/*
 * Super Saver Deals - templates/cms/super-saver.template.html
 *
 * Loaded sitewide from headers/template.html. Every rule is scoped to the
 * Super Saver page (.ss-page, or body:has(.ss-page) for the header and footer),
 * except the countdown bar (.ss-bar) and the Super Saver nav item
 * (.mega-menu-item-ss), which show on every page.
 *
 * Theme tokens
 * ------------
 * The defaults below are the everyday Super Saver theme. A sale theme
 * overrides them from its SS <slug> Theme advert's Description, printed into
 * <style id="ss-theme-tokens">:root{...}</style> in the header. The defaults
 * sit in :where(:root), which has no specificity, so the advert's values win
 * whatever order the two load in.
 *
 * Page body and notification bar - a theme sets two colours:
 *
 *   --ss-main               nav/hero colour: hero background, highlights,
 *                           selected states, badges, icons, section tints
 *   --ss-button             accent: buttons, hero date badge, highlighted words
 *                           in the hero heading, notification bar
 *
 *   e.g.  --ss-main: #0d5eaf; --ss-button: #ffffff;
 *
 * Everything else is worked out from those two (color-mix), so a theme
 * normally sets nothing more. Each derived token can still be overridden in
 * the advert for a one-off exception:
 *
 *   --ss-on-main            text on --ss-main (hero text, badge text)
 *   --ss-on-button          text on --ss-button - the main colour, as in every mockup
 *   --ss-button-hover       button hover, 15% darker
 *   --ss-tint               product finder, USP and icon circle backgrounds,
 *                           empty state - a neutral light grey, the same for
 *                           every theme (client feedback: a tint of the main
 *                           colour looked too generic). A theme can still set
 *                           one, e.g. --ss-tint: color-mix(in srgb, var(--ss-main) 8%, #fff);
 *   --ss-hero-bg            hero background, main by default. An image in
 *                           images/black-friday-landing/<slug>.png goes on top
 *   --ss-side-bg            background either side of the white/grey content
 *                           column in the product finder, listing and USP. Not set
 *                           by default, so each section keeps its own
 *                           background edge to edge. Black Friday sets it to black.
 *   --ss-bar-bg             notification bar background, button by default
 *   --ss-bar-text           notification bar text, on-button by default
 *   --ss-eyebrow-bg         small label above the hero heading, white with
 *   --ss-eyebrow-text       black text on every theme. Set on the label
 *                           itself, not here, so theme tokens can't reach them
 *
 * Header nav - not on the two colour system yet, set separately:
 *
 *   --ss-nav-bg             main nav bar
 *   --ss-nav-bg-dark        main nav hover/open
 *
 * Footer (footers/super-saver.template.html) - follows the theme on its own,
 * these only override it:
 *
 *   --ss-footer-bg          background - the hero background by default
 *   --ss-footer-text        text - white (on-main) by default
 *   --ss-footer-accent      column headings - the button colour by default
 */
:where(:root) {
    --ss-main: #fa5617;
    --ss-button: #fa5617;

    --ss-on-main: #ffffff;
    --ss-on-button: var(--ss-main);
    --ss-button-hover: color-mix(in srgb, var(--ss-button) 85%, #000000);
    --ss-tint: #f5f6f8;
    --ss-hero-bg: var(--ss-main);
    --ss-bar-bg: var(--ss-button);
    --ss-bar-text: var(--ss-on-button);

    --ss-nav-bg: #fa5617;
    --ss-nav-bg-dark: #dd3f08;

    --ss-ink: #000000;
    --ss-text: #212529;
    --ss-muted: #525252;
    --ss-line: #d8d8d8;
}
/* Everyday theme, as in its mockup: main and button are both the brand
   orange, so text on button colours is white (main would vanish), and the
   hero and notification bar are black rather than following the two colours.
   Sale themes don't need any of this - their adverts set main and button only. */
body.ss-theme-regular {
    --ss-on-button: #ffffff;
    --ss-hero-bg: #000000;
    --ss-bar-bg: #000000;
    --ss-bar-text: #ffffff;
}

/* ---------- Header, nav and footer (outside the page body) ---------- */

/* Countdown bar - sitewide, whenever the active theme has an SS <slug> Bar advert */
.ss-bar {
    display: none;
}
.ss-bar:not(.ss-bar--hidden) {
    display: block;
    background: var(--ss-bar-bg);
    color: var(--ss-bar-text);
    padding: 10px 0;
}
.ss-bar-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 24px;
    text-align: center;
}
.ss-bar-item__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 4px 12px;
}
.ss-bar-item__title,
.ss-bar-item__description {
    font-size: 13px;
    line-height: 20px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.ss-bar-item__title {
    margin: 0;
    color: inherit;
}
.ss-bar-item__counter {
    display: flex;
    gap: 12px;
}
.ss-bar-item__unit {
    display: flex;
    align-items: baseline;
    gap: 4px;
}
.ss-bar-item__value {
    font-size: 18px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.ss-bar-item__label {
    font-size: 11px;
    letter-spacing: .04em;
}

/* Main nav colours */
body:has(.ss-page) .mega-menu {
    --mega-menu-orange: var(--ss-nav-bg);
    --mega-menu-orange-dark: var(--ss-nav-bg-dark);
}
/* The Super Saver nav item, in the running sale's main colour on every page
   (black for Black Friday). The everyday main colour is the nav's own orange,
   so it only stands out during a sale. :where() leaves the hover rules in
   mega-menu.css on top, and they pick up the darker shade set here. */
.mega-menu-item-ss {
    --mega-menu-orange-dark: color-mix(in srgb, var(--ss-main) 85%, #000000);
}
:where(.mega-menu-item-ss) > .mega-menu-item-link {
    background: var(--ss-main);
    color: var(--ss-on-main);
}

/*
 * Super Saver footer - footers/super-saver.template.html. Only its own
 * ss-footer classes are styled, so the default footer is untouched. Colours
 * fall back to the theme where they're used (not in :root), so the everyday
 * theme's black hero, set on <body>, carries through.
 */
.ss-footer {
    width: 100%;
    background: var(--ss-footer-bg, var(--ss-hero-bg));
    color: var(--ss-footer-text, var(--ss-on-main));
    font-size: 14px;
    line-height: 20px;
}
.ss-footer__inner {
    max-width: 1248px;
    margin: 0 auto;
    padding: 56px 24px 32px;
}
.ss-footer__cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 32px 24px;
}
.ss-footer .ss-footer__title {
    margin: 0 0 16px;
    font-family: inherit;
    font-size: 13px;
    line-height: 16px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ss-footer-accent, var(--ss-button));
}
.ss-footer .ss-footer__toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-align: left;
    text-transform: inherit;
    cursor: default;
    pointer-events: none;
}
.ss-footer .ss-footer__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ss-footer .ss-footer__list li {
    margin: 0;
    padding: 0;
}
.ss-footer a,
.ss-footer a:hover,
.ss-footer a:focus {
    color: inherit;
    text-decoration: none;
}
.ss-footer a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}
.ss-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px 24px;
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent);
    font-size: 12px;
    line-height: 16px;
    color: color-mix(in srgb, currentColor 70%, transparent);
}
.ss-footer .ss-footer__copyright {
    margin: 0;
}
.ss-footer .ss-footer__social {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}
@media (max-width: 991px) {
    .ss-footer__inner {
        padding: 40px 16px 24px;
    }
}
/* Mobile: one column of accordions, plus/minus on the right of each title */
@media (max-width: 767px) {
    .ss-footer__cols {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .ss-footer__col {
        border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent);
    }
    .ss-footer .ss-footer__title {
        margin: 0;
    }
    .ss-footer .ss-footer__toggle {
        padding: 16px 0;
        cursor: pointer;
        pointer-events: auto;
    }
    .ss-footer__toggle::after {
        content: "+";
        flex: none;
        width: 16px;
        font-size: 20px;
        line-height: 16px;
        font-weight: 400;
        text-align: center;
    }
    .ss-footer__col--open .ss-footer__toggle::after {
        content: "\2212";
    }
    .ss-footer .ss-footer__list {
        padding-bottom: 16px;
    }
    .ss-footer__col:not(.ss-footer__col--open) .ss-footer__list {
        display: none;
    }
}
@media (max-width: 575px) {
    .ss-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}

body.ss-panel-open {
    overflow: hidden;
}

/* ---------- Page ---------- */

.ss-page {
    color: var(--ss-text);
    font-size: 14px;
    line-height: 20px;
}
/* Figma grid: 1200px of content with 24px gutters (16px on mobile), wider
   than the site's 1170px Bootstrap container */
.ss-page .container,
.ss-bar .container {
    width: 100%;
    max-width: 1248px;
    padding-left: 24px;
    padding-right: 24px;
}
/* Bootstrap 3's clearfix pseudo elements would be extra grid/flex items in
   the containers that are laid out as grids here */
.ss-page .container::before,
.ss-page .container::after,
.ss-bar .container::before,
.ss-bar .container::after {
    content: none;
}
/* :where() keeps these at element specificity, so the product tile's own
   .kxl-product-title (an h3) still wins */
:where(.ss-page) h1,
:where(.ss-page) h2,
:where(.ss-page) h3 {
    margin: 0;
    font-weight: 700;
    text-transform: uppercase;
    text-wrap: balance;
    color: var(--ss-ink);
}
:where(.ss-page) h2 {
    font-size: 32px;
    line-height: 36px;
}
:where(.ss-page) h3 {
    font-size: 18px;
    line-height: 24px;
}
.ss-label {
    font-weight: 700;
    font-size: 13px;
    line-height: 16px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.ss-hl {
    color: var(--ss-main);
}
.ss-hero .ss-hl {
    color: var(--ss-button);
}
/* Section headings: product finder steps and the listing. A class, so the
   site's generic h2 rules can't change them. Line height follows the size so
   wrapped headings don't overlap. */
.ss-section-title {
    margin: 0;
    font-size: 2.5rem;
    line-height: 1.1;
    font-weight: 600;
}
.ss-page :focus-visible {
    outline: 3px solid var(--ss-main);
    outline-offset: 2px;
}
.ss-hero :focus-visible {
    outline-color: var(--ss-button);
}

/* Buttons */
.ss-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 24px;
    border: 0;
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    text-decoration: none;
    cursor: pointer;
}
.ss-btn:hover,
.ss-btn:focus {
    text-decoration: none;
}
.ss-btn--primary {
    background: var(--ss-button);
    color: var(--ss-on-button);
}
.ss-btn--primary:hover {
    background: var(--ss-button-hover);
    color: var(--ss-on-button);
}
.ss-btn--ghost {
    background: transparent;
    color: var(--ss-ink);
    box-shadow: inset 0 0 0 2px var(--ss-ink);
}
.ss-btn--ghost-inverse {
    background: transparent;
    color: var(--ss-on-main);
    box-shadow: inset 0 0 0 2px var(--ss-on-main);
}
.ss-btn--ghost-inverse:hover {
    color: var(--ss-on-main);
}
.ss-btn--block {
    width: 100%;
}
.ss-linkbtn {
    background: none;
    border: 0;
    padding: 0 0 0 8px;
    font-weight: 700;
    text-decoration: underline;
    color: var(--ss-ink);
    cursor: pointer;
}

/* Breadcrumb */
.ss-crumb__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding-block: 16px;
}
/* Two classes plus !important to undo the site's .breadcrumb in styles.css
   (background-color !important, float right, 6px top/bottom margin) */
.ss-crumb .ss-crumb__trail {
    float: none;
    margin: 0;
    padding: 0;
    background-color: transparent !important;
    font-size: 12px;
    line-height: 16px;
    color: var(--ss-muted);
}
/* Spacing comes from the separator only. The site's .breadcrumb li a adds
   right margin/padding to links, and below 1367px styles.css zeroes the
   separator padding with !important. */
.ss-crumb .ss-crumb__trail a {
    margin-right: 0;
    padding-right: 0;
}
.ss-crumb__trail li + li::before {
    content: "/";
    padding: 0 6px !important;
}
.ss-crumb__trail [aria-current] {
    color: var(--ss-text);
}
.ss-crumb__filter {
    display: none;
    padding: 6px 16px;
    font-size: 14px;
}

/* Hero */
/* --ss-hero-image is set on the section from images/black-friday-landing/<slug>.png
   (cms/super-saver.template.html), only when [@ss_hero_bg_images@] is on there.
   Unset, or a missing file, just leaves the colour. */
.ss-hero {
    background: var(--ss-hero-image, none) center / cover no-repeat var(--ss-hero-bg);
    color: var(--ss-on-main);
}
.ss-hero-banner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: center;
    padding-block: 72px;
}
.ss-hero-banner__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    min-width: 0;
}
.ss-hero-banner__eyebrow {
    --ss-eyebrow-bg: #ffffff;
    --ss-eyebrow-text: #000000;
    background: var(--ss-eyebrow-bg);
    color: var(--ss-eyebrow-text);
    padding: 6px 10px;
}
.ss-page .ss-hero-banner__title {
    font-size: 56px;
    line-height: 60px;
    letter-spacing: -.01em;
    color: var(--ss-on-main);
}
.ss-hero-banner__description {
    max-width: 30em;
    font-size: 18px;
    line-height: 28px;
}
.ss-hero-banner__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
.ss-hero-banner__media {
    position: relative;
    aspect-ratio: 588 / 416;
    overflow: hidden;
}
.ss-hero-banner__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.ss-hero-banner__stat {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 20px 24px;
    background: var(--ss-button);
    color: var(--ss-on-button);
}
.ss-hero-banner__stat[hidden] {
    display: none;
}
.ss-hero-banner__stat b {
    display: block;
    font-size: 32px;
    line-height: 36px;
    text-transform: uppercase;
}
/* Copy with no image - take the full row rather than leave the right half empty */
.ss-hero-banner__copy:only-child {
    grid-column: 1 / -1;
}
/* Banner only (image, no copy). Two classes so it also beats the mobile
   .ss-hero-banner rules further down. */
.ss-hero-banner.ss-hero-banner--image-only {
    display: block;
    padding: 0;
}
.ss-hero-banner--image-only .ss-hero-banner__link,
.ss-hero-banner--image-only .ss-hero-banner__picture {
    display: block;
}
.ss-hero-banner--image-only .ss-hero-banner__image {
    height: auto;
}

/* Product finder */
/* Framed like the listing (see .ss-list): grey content column, --ss-side-bg
   either side, falling back to the same grey so it runs edge to edge */
.ss-quiz {
    padding-inline: 8px;
    background: var(--ss-side-bg, var(--ss-tint));
}
.ss-quiz__inner {
    display: flex;
    flex-direction: column;
    gap: 48px;
    padding-block: 64px;
    background: var(--ss-tint);
}
.ss-qstep {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ss-qstep[hidden],
.ss-qres[hidden],
.ss-qres [hidden] {
    display: none;
}
.ss-qstep__label {
    color: var(--ss-muted);
}
.ss-qstep p {
    margin: 0 0 16px;
    font-size: 16px;
    line-height: 24px;
    color: var(--ss-muted);
}
.ss-qgrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.ss-qopt {
    min-height: 64px;
    padding: 8px 16px;
    background: #fff;
    color: var(--ss-text);
    border: 1px solid var(--ss-line);
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    cursor: pointer;
}
.ss-qopt:hover {
    border-color: var(--ss-ink);
}
.ss-qopt[aria-pressed="true"] {
    background: var(--ss-main);
    border-color: var(--ss-main);
    color: var(--ss-on-main);
}
.ss-qcat {
    display: flex;
    align-items: center;
    justify-content: center;
}
.ss-qcat__inner {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    white-space: nowrap;
}
.ss-qcat__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--ss-tint);
}
.ss-qcat__icon img {
    display: block;
    width: 20px;
    height: 20px;
    object-fit: contain;
}
.ss-qcat[aria-pressed="true"] .ss-qcat__icon {
    background: #fff;
}
/* Tinted icon: the PNG is only used as a mask, so its shape is drawn in
   --ss-main whatever colour it was exported in. The <img> stays in
   place but hidden, so dropping the class shows it as is. */
.ss-qcat__icon--tint {
    position: relative;
}
.ss-qcat__icon--tint img {
    visibility: hidden;
}
.ss-qcat__icon--tint::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 20px;
    height: 20px;
    margin: auto;
    background: var(--ss-main);
    -webkit-mask: var(--ss-qcat-icon) center / contain no-repeat;
    mask: var(--ss-qcat-icon) center / contain no-repeat;
}
.ss-qres {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--ss-line);
}
.ss-qres p {
    margin: 0;
}

/* Listing */
/*
 * Listing frame: the content column is white, and the section around it is
 * --ss-side-bg, so a theme can put a colour either side of the products
 * (e.g. black for Black Friday). Unset, the section falls back to white, so
 * nothing shows. The section's small side padding keeps the edge visible on
 * narrower screens, where the column would otherwise fill the width. The
 * column runs the full height of the section, so there's no band of side
 * colour above or below it. The product finder is framed the same way.
 */
.ss-list {
    padding-inline: 8px;
    background: var(--ss-side-bg, #ffffff);
}
.ss-list__inner {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding-block: 64px;
    background: #ffffff;
}
/*
 * No jump on load. The listing is filled in by js/super-saver.js, so in the
 * first paint it is nearly empty and then grows by a few thousand pixels.
 *
 * 1. While the section is off screen (the usual case on load, it sits below
 *    the hero and product finder) the browser skips laying it out and holds
 *    its place at the estimated size; "auto" then remembers the real size
 *    once it has rendered.
 * 2. If it is on screen before the script runs (e.g. landing on
 *    #ss-listing), the empty grid reserves the first 24 tiles. Tiles are a
 *    near fixed height (220px image area in styles.css plus title, price and
 *    button), so rows x tile height is a close match.
 * Recalibrate the numbers below if the tile design changes.
 */
.ss-list {
    --ss-tile-h: 456px;
    --ss-grid-rows: 8;
    --ss-grid-gap: 24px;
    content-visibility: auto;
    contain-intrinsic-block-size: auto 4200px;
}
.ss-grid:empty {
    min-height: calc(var(--ss-grid-rows) * var(--ss-tile-h) + (var(--ss-grid-rows) - 1) * var(--ss-grid-gap));
}
.ss-layout {
    display: grid;
    grid-template-columns: 282px 1fr;
    gap: 24px;
    align-items: start;
}
.ss-side,
.ss-side__groups {
    display: flex;
    flex-direction: column;
    gap: 28px;
}
:where(.ss-page) fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}
.ss-fgroup {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--ss-line);
}
.ss-fgroup legend {
    display: flex;
    align-items: center;
    gap: 8px;
    float: none;
    width: auto;
    margin: 0;
    padding: 0 8px 0 0;
    border: 0;
    color: var(--ss-ink);
}
.ss-gcount {
    color: var(--ss-main);
    font-size: 14px;
    text-transform: none;
    letter-spacing: 0;
}
.ss-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    line-height: 20px;
    font-weight: 400;
    cursor: pointer;
}
.ss-opt input {
    -webkit-appearance: none;
    appearance: none;
    display: grid;
    place-content: center;
    flex: none;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 1.5px solid var(--ss-ink);
    background: #fff;
    cursor: pointer;
}
.ss-opt input:checked {
    background: var(--ss-main);
    border-color: var(--ss-main);
}
.ss-opt input:checked::after {
    content: "";
    width: 5px;
    height: 10px;
    border: solid var(--ss-on-main);
    border-width: 0 2px 2px 0;
    transform: translateY(-1px) rotate(45deg);
}
.ss-opt input:checked + span {
    font-weight: 700;
}
.ss-opt__count {
    color: var(--ss-muted);
    font-size: 12px;
}
.ss-opt.is-disabled {
    opacity: .4;
    cursor: not-allowed;
}
.ss-opt.is-disabled input {
    cursor: not-allowed;
}
.ss-results {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}
.ss-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}
.ss-applied {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    min-height: 20px;
}
.ss-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.ss-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--ss-ink);
    background: #fff;
    font-weight: 700;
}
.ss-chip button {
    padding: 0;
    border: 0;
    background: none;
    color: var(--ss-muted);
    font-size: 12px;
    text-decoration: underline;
    cursor: pointer;
}
.ss-sortwrap {
    display: flex;
    align-items: center;
    flex: none;
    gap: 4px;
    padding: 0 12px 0 16px;
    border: 1px solid var(--ss-ink);
}
.ss-sortwrap label {
    margin: 0;
    white-space: nowrap;
}
.ss-sortwrap select {
    padding: 10px 4px;
    border: 0;
    background: transparent;
    cursor: pointer;
}
.ss-grid {
    gap: 24px;
}
/* Product tiles as bordered cards, as in the mockup */
.ss-page .kxl-product {
    border: 1px solid var(--ss-line);
}
/* Product tile badges in the theme colour. The "% off" starburst keeps its
   shape: its image (images/black-friday/bgfriday.png) is used as a mask over
   a --ss-main background, the same way as the product finder icons. */
.ss-page .kxl-product-badge-sale {
    background: var(--ss-main);
    color: var(--ss-on-main);
}
.ss-page .kxl-product-badge-save {
    background: var(--ss-main);
    color: var(--ss-on-main);
    -webkit-mask: url("../images/black-friday/bgfriday.png") center / contain no-repeat;
    mask: url("../images/black-friday/bgfriday.png") center / contain no-repeat;
}
.ss-page .kxl-product-badge-save > img {
    visibility: hidden;
}
.ss-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    grid-column: 1 / -1;
    padding: 48px 24px;
    border: 1px solid var(--ss-line);
    background: var(--ss-tint);
    text-align: center;
}
.ss-empty p {
    max-width: 40ch;
    margin: 0;
    color: var(--ss-muted);
}
.ss-recs {
    display: flex;
    flex-direction: column;
    gap: 24px;
    grid-column: 1 / -1;
    padding-top: 32px;
}
.ss-more {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding-top: 8px;
}
.ss-more p {
    margin: 0;
}
.ss-more__bar {
    width: 240px;
    height: 4px;
    background: var(--ss-line);
}
.ss-more__bar span {
    display: block;
    height: 100%;
    background: var(--ss-main);
}
/* Desktop loads more on scroll (js/super-saver.js), so it shows a loading
   line; mobile shows the button instead */
.ss-more__loading {
    color: var(--ss-muted);
}
.ss-more__button {
    display: none;
}
.ss-mbar {
    display: none;
}

/* USP */
/* Framed like the listing (see .ss-list): grey content column, --ss-side-bg
   either side, falling back to the same grey so it runs edge to edge */
.ss-usp {
    padding-inline: 8px;
    background: var(--ss-side-bg, var(--ss-tint));
}
.ss-usp__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    padding-block: 28px;
    background: var(--ss-tint);
}
.ss-usp-item,
.ss-usp-item__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}
.ss-usp-item__content {
    gap: 4px;
}
/* A USP advert with a URL is a link: same look, underlined title on hover */
a.ss-usp-item--link,
a.ss-usp-item--link:hover,
a.ss-usp-item--link:focus {
    color: inherit;
    text-decoration: none;
}
a.ss-usp-item--link:hover .ss-usp-item__title {
    text-decoration: underline;
    text-underline-offset: 3px;
}
.ss-usp-item__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--ss-main);
}
.ss-usp-item__icon img {
    display: block;
    width: 24px;
    height: 24px;
    object-fit: contain;
}
/* Title and copy pinned with classes so the site's generic h3/p rules
   (font stack, sizes, margins) can't change them - matches the mockup */
.ss-page .ss-usp-item__title {
    margin: 0;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 18px;
    line-height: 24px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--ss-ink);
}
.ss-page .ss-usp-item__description {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    color: var(--ss-muted);
    text-wrap: pretty;
}

/* Mobile filter panel */
.ss-panel {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    padding-top: env(safe-area-inset-top, 0px);
    background: #fff;
}
.ss-panel[hidden] {
    display: none !important;
}
.ss-panel__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 16px;
    border-bottom: 1px solid var(--ss-line);
}
.ss-panel__title {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ss-pill {
    padding: 2px 8px;
    background: var(--ss-ink);
    color: #fff;
    font-weight: 700;
}
.ss-panel__body {
    flex: 1;
    overflow-y: auto;
}
.ss-panel__applied {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    background: var(--ss-tint);
}
.ss-panel__applied[hidden] {
    display: none;
}
.ss-panel__applied-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ss-acc {
    border-bottom: 1px solid var(--ss-line);
}
.ss-acc > button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 16px;
    border: 0;
    background: none;
    font-size: 18px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}
.ss-acc__opts {
    display: flex;
    flex-direction: column;
    padding: 0 16px 12px;
}
.ss-acc__opts[hidden] {
    display: none;
}
.ss-acc .ss-opt {
    padding-block: 12px;
}
.ss-acc .ss-opt input {
    width: 20px;
    height: 20px;
}
.ss-panel__foot {
    display: flex;
    gap: 12px;
    padding: 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--ss-line);
}
.ss-panel__foot .ss-btn {
    flex: 1;
    padding: 14px 16px;
}

/* ---------- Responsive ---------- */

@media (max-width: 1199px) {
    .ss-page .ss-hero-banner__title {
        font-size: 44px;
        line-height: 48px;
    }
}

@media (max-width: 991px) {
    .ss-page .container,
    .ss-bar .container {
        padding-left: 16px;
        padding-right: 16px;
    }
    :where(.ss-page) h2 {
        font-size: 24px;
        line-height: 28px;
    }

    .ss-crumb__inner {
        padding-block: 6px;
    }
    .ss-crumb__filter {
        display: inline-flex;
    }

    .ss-hero .container {
        padding: 0;
    }
    .ss-hero-banner {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 0 0 40px;
    }
    .ss-hero-banner__media {
        order: -1;
        aspect-ratio: 390 / 240;
        padding: 24px 16px 0;
    }
    .ss-hero-banner__copy {
        gap: 16px;
        padding-inline: 16px;
    }
    .ss-hero-banner__eyebrow {
        align-self: center;
    }
    .ss-page .ss-hero-banner__title {
        align-self: stretch;
        max-width: none;
        font-size: 34px;
        line-height: 38px;
        text-align: center;
    }
    .ss-hero-banner__description {
        font-size: 16px;
        line-height: 24px;
    }
    .ss-hero-banner__ctas {
        flex-direction: column;
        align-self: stretch;
    }
    .ss-hero-banner__ctas .ss-btn {
        width: 100%;
    }
    .ss-hero-banner__stat {
        padding: 14px 16px;
    }
    .ss-hero-banner__stat b {
        font-size: 24px;
        line-height: 28px;
    }

    .ss-quiz__inner {
        gap: 32px;
        padding-block: 40px;
    }
    .ss-qstep p {
        font-size: 14px;
        line-height: 20px;
    }
    .ss-qgrid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    .ss-qopt {
        min-height: 52px;
        padding: 8px 12px;
        font-size: 14px;
    }
    .ss-qcat {
        min-height: 80px;
    }
    .ss-qcat__inner {
        flex-direction: column;
        gap: 6px;
        width: auto !important;
        text-align: center;
        white-space: normal;
    }
    .ss-qres {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        text-align: center;
    }
    .ss-qres .ss-btn {
        width: 100%;
    }

    .ss-list__inner {
        gap: 24px;
        padding-block: 40px;
    }
    .ss-layout {
        grid-template-columns: 1fr;
    }
    .ss-side,
    .ss-toolbar .ss-sortwrap {
        display: none;
    }
    /* Sticky filter and sort bar */
    .ss-mbar {
        position: sticky;
        top: 0;
        z-index: 20;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        margin-inline: -16px;
        padding: 12px 16px;
        border-bottom: 1px solid var(--ss-line);
        background: #fff;
    }
    .ss-mbar .ss-btn {
        padding: 10px 16px;
    }
    .ss-mbar .ss-sortwrap {
        justify-content: center;
        padding: 0 8px;
    }
    .ss-mbar .ss-sortwrap select {
        width: 100%;
        font-weight: 700;
    }
    .ss-page .ss-grid {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
    .ss-list {
        --ss-tile-h: 440px;
        --ss-grid-rows: 12;
        --ss-grid-gap: 16px;
        contain-intrinsic-block-size: auto 5900px;
    }
    .ss-more__bar {
        width: 200px;
    }
    .ss-more__loading {
        display: none;
    }
    .ss-more__button {
        display: inline-flex;
        width: 100%;
    }

    .ss-usp__grid {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        padding-block: 24px;
    }
    .ss-usp-item {
        gap: 10px;
    }
    .ss-page .ss-usp-item__title {
        font-size: 14px;
        line-height: 20px;
    }
    .ss-page .ss-usp-item__description {
        font-size: 12px;
        line-height: 16px;
    }
    .ss-usp-item__icon {
        width: 32px;
        height: 32px;
    }
    .ss-usp-item__icon img {
        width: 20px;
        height: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ss-page * {
        transition: none !important;
        animation: none !important;
    }
}