:root{
        /* Sunwarrior palette (sampled from sunwarrior.com) */
        --sw-slate:#314C57;       /* headline color */
        --sw-slate-deep:#23373F;
        --sw-coral:#E06D5F;       /* primary CTA */
        --sw-coral-hover:#C95A4D;
        --sw-gold:#E3D074;        /* accent */
        --sw-cream:#F2F0EC;       /* warm neutral surface */
        --sw-sky:#D7E3F1;         /* soft blue section background */
        --sw-gray:#58595B;        /* body copy */

        /* ExpertVoice product-shelf palette, measured on the EV search results page.
           The finder is brand-led everywhere EXCEPT the results screen, which is a
           commerce surface and follows EV so it reads as part of the platform. */
        --ev-orange:#EE5720;
        --ev-orange-hover:#D24A18;
        --ev-navy:#314A7B;
        --ev-tile:#F7F7F7;
        --ev-ink:#252525;
        --ev-muted:#757575;
        --ev-strike:#C5C5C5;
        --ev-save:#E02500;
        --ev-pill:999px;

        --bg: #ffffff;
        --bg2: var(--sw-cream);
        --text: var(--sw-slate);
        --body: var(--sw-gray);
        --muted: rgba(88,89,91,.85);
        --line: rgba(49,76,87,.12);
        --card:#ffffff;
        --shadow: 0 4px 14px rgba(35,55,63,.08);
        --radius-xl: 8px;
        --radius-md: 6px;
        --cta: var(--sw-coral);
        --cta-hover: var(--sw-coral-hover);
        --danger:#dd1f26;
        --success:#37cd8f;
        --ease: cubic-bezier(.2,.8,.2,1);
        --t-fast: 220ms;
        --t: 420ms;
        --header-gap: 26px;
        --grid-top-gap: 14px;
        --intro-pad: 56px;
        --app-max: 1160px;
        --app-pad: 1.25rem;
        /* Fonts — 'Nexa' is used if the brand font is installed/hosted, else Montserrat */
        --font-head: 'Nexa', 'Nexa-ExtraBold', 'Montserrat', -apple-system, 'system-ui', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        --font-body: 'Roboto', -apple-system, 'system-ui', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
      }
      *{ box-sizing:border-box; }
      html,body{ height:100%; }
      body{
        margin:0;
        font-family: var(--font-body);
        background: var(--bg);
        color: var(--body);
        overflow-x:hidden;
      }
      h1,h2,h3,h4,h5,h6{ font-family: var(--font-head); color: var(--text); }
      a{ text-decoration:none !important; color:inherit !important; }

      /* ---------- Text scoping ----------
         Both the welcome screen and the finder sit on light surfaces, so text is dark.
         Photo-tile card labels stay white because they sit on image scrims. */
      #welcomeScreen h1, #welcomeScreen h2, #welcomeScreen h3,
      #productFinder #headline,
      #productFinder h1, #productFinder h2, #productFinder h3{
        color: var(--text) !important;
      }
      #welcomeScreen p, #productFinder #description{ color: var(--body) !important; }
      #productFinder .option-title h4,
      #welcomeScreen .option-title h4{
        color:#fff !important;
      }

      .container-custom{
        max-width: var(--app-max);
        margin: 0 auto;
        padding: 0 var(--app-pad);
        width: 100%;
      }
      .breadcrumb-nav{
        position: sticky;
        top: 0;
        z-index: 50;
        padding: 1.1rem 0 .75rem;
        background: #fff;
        border-bottom: 1px solid var(--line);
      }
      .breadcrumb-inner{ display:flex; align-items:center; gap: .9rem; }
      .crumb-back{
        width: 40px; height: 40px;
        border-radius: 999px;
        border: 1px solid var(--line);
        background: #fff;
        color: var(--text);
        cursor:pointer;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
        flex: 0 0 auto;
      }
      .crumb-back:hover{ background: var(--sw-cream); }
      /* Close shares the back button's look, but is fixed so it shows on every screen,
         intro included. It lines up with the container's left edge. */
      .finder-close{
        position: fixed;
        z-index: 60;
        top: 1.1rem;
        left: calc(max(0px, (100% - var(--app-max)) / 2) + var(--app-pad));
      }
      #productFinder .breadcrumb-inner{ padding-left: calc(var(--app-pad) + 40px + .9rem); }
      .breadcrumb-trail{ display:flex; align-items:center; gap:.5rem; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
      .breadcrumb-pill{
        appearance: none;
        border: 1px solid var(--line);
        background: #fff;
        color: var(--body);
        padding: .40rem .90rem;
        border-radius: 999px;
        font-family: var(--font-body);
        font-size: .82rem;
        font-weight: 500;
        cursor: pointer;
        user-select:none;
        white-space: nowrap;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
      }
      .breadcrumb-pill:hover{
        background: var(--sw-cream);
        border-color: rgba(49,76,87,.22);
        color: var(--text);
      }
      .breadcrumb-pill.active{
        background: var(--sw-slate);
        border-color: transparent;
        color: #fff;
      }

      /* ---------- Welcome screen (light mode) ---------- */
      #welcomeScreen{
        position: relative;
        min-height: 100vh;
        background: #fff;
        overflow-x: hidden;
        overflow-y: visible;
      }
      /* Soft blue band with a wavy bottom edge, like the sections on sunwarrior.com */
      #welcomeScreen .intro-hero{
        position:absolute;
        left:0; right:0; top:0;
        height: calc(100% - clamp(80px, 10vw, 150px));
        background: var(--sw-sky);
        z-index:0;
      }
      #welcomeScreen .intro-hero::after{
        content:"";
        position:absolute;
        left:0; right:0;
        top: calc(100% - 1px);
        height: clamp(46px, 6.5vw, 100px);
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath fill='%23D7E3F1' d='M0,0H1440V48C1350,78 1250,93 1130,93C900,93 600,2 300,2C200,2 100,16 0,48Z'/%3E%3C/svg%3E") no-repeat;
        background-size: 100% 100%;
      }
      #welcomeScreen .welcome-content{
        position: relative;
        z-index: 1;
        width: 100%;
        min-height: 100vh;
        display:flex;
        align-items:center;
        justify-content:center;
        padding: var(--intro-pad) 0;
      }
      #introScreen{ width:100%; }
      .welcome-copy{
        max-width: 920px;
        padding: 1.6rem 0 1.2rem;
      }
      .brand-kicker{
        font-family: var(--font-body);
        font-size:.75rem;
        font-weight:500;
        letter-spacing:.16em;
        text-transform:uppercase;
        color: var(--body);
        margin-bottom:.75rem;
      }
      .welcome-copy h1{
        font-family: var(--font-head);
        font-size: clamp(2.2rem, 3.8vw, 3.4rem);
        font-weight: 700;
        letter-spacing: -.01em;
        line-height:1.05;
        margin:0 0 1rem 0;
      }
      .welcome-copy p{
        font-family: var(--font-body);
        max-width: 640px;
        font-size: 1.08rem;
        line-height:1.65;
        margin: 0 0 1.25rem 0;
      }
      .intro-question{
        max-width: 920px;
        margin-top: .35rem;
        padding: .15rem 0 1.0rem;
      }
      .intro-question h2{
        font-family: var(--font-head);
        font-size: clamp(1.6rem, 2.2vw, 2.1rem);
        font-weight: 700;
        line-height: 1.12;
        margin: 0 0 .55rem 0;
        letter-spacing: -.005em;
      }
      .intro-question p{
        font-family: var(--font-body);
        max-width: 760px;
        margin: 0;
        font-size: 1rem;
        color: var(--body) !important;
        line-height: 1.65;
      }
      #welcomeGate{ max-width: 920px; }
      #welcomeGate .welcome-copy{ padding-bottom: .5rem; }
      .lets-go-btn{
        display:inline-flex;
        align-items:center;
        gap:.6rem;
        margin-top: 1.25rem;
        padding: .9rem 1.9rem;
        border:0;
        border-radius: var(--radius-md);
        background: var(--cta);
        color:#fff !important;
        font-family: var(--font-head);
        font-weight: 700;
        font-size: 1rem;
        cursor: pointer;
        transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
      }
      .lets-go-btn:hover{
        background: var(--cta-hover);
      }
      .lets-go-btn:focus-visible{
        outline: 3px solid rgba(49,76,87,.45);
        outline-offset: 2px;
      }
      .recommended-kicker{
        font-family: var(--font-body);
        display:flex;
        align-items:center;
        gap:1rem;
        margin: 1.0rem 0 1rem;
        color: rgba(0,0,0,.5);
        letter-spacing: .22em;
        font-size: .7rem;
        text-transform: uppercase;
      }
      .recommended-kicker:before,
      .recommended-kicker:after{
        content:"";
        height: 1px;
        background: rgba(0,0,0,.12);
        flex:1;
      }
      #productFinder{
        position: relative;
        min-height:100vh;
        padding: 0 0 4rem;
        background: var(--bg);
        display:none;
        --wave-gap: clamp(80px, 10vw, 150px);
      }
      /* Same blue band + wave as the welcome screen on every question screen */
      #productFinder::before{
        content:"";
        position:absolute;
        left:0; right:0; top:0;
        height: calc(100% - var(--wave-gap));
        background: var(--sw-sky);
        z-index:0;
        pointer-events:none;
      }
      #productFinder::after{
        content:"";
        position:absolute;
        left:0; right:0;
        top: calc(100% - var(--wave-gap) - 1px);
        height: clamp(46px, 6.5vw, 100px);
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath fill='%23D7E3F1' d='M0,0H1440V48C1350,78 1250,93 1130,93C900,93 600,2 300,2C200,2 100,16 0,48Z'/%3E%3C/svg%3E") no-repeat;
        background-size: 100% 100%;
        z-index:0;
        pointer-events:none;
      }
      #productFinder > .container-custom{ position:relative; z-index:1; }
      #productFinder .breadcrumb-nav{ background: var(--sw-sky); border-bottom-color: transparent; }
      /* Results screen stays plain white. Hidden product cards linger after going back, so only count visible ones. */
      #productFinder:has(#productsContainer:not(.d-none) .product-card)::before,
      #productFinder:has(#productsContainer:not(.d-none) .product-card)::after{ display:none; }
      #productFinder:has(#productsContainer:not(.d-none) .product-card) .breadcrumb-nav{ background:#fff; border-bottom-color: var(--line); }
      .content-header{
        max-width: 920px;
        padding-top: .1rem;
        margin-bottom: var(--header-gap);
      }
      .content-header.has-no-desc{
        margin-bottom: calc(var(--header-gap) - 8px);
      }
      #headline{
        font-family: var(--font-head);
        font-size: 2.1rem;
        font-weight: 700;
        letter-spacing: -.005em;
        margin: 0 0 .45rem 0;
        max-width: 920px;
      }
      #description{
        font-family: var(--font-body);
        font-size: 1.02rem;
        margin: 0;
        max-width: 820px;
        line-height: 1.6;
      }
      .options-grid{ margin-top: var(--grid-top-gap); }
      .option-col{ margin-bottom: 0; }
      .grid-option-btn{
        position:relative;
        width: 100%;
        aspect-ratio: 4 / 3;
        border-radius: var(--radius-xl);
        overflow:hidden;
        cursor:pointer;
        display:flex;
        align-items:flex-end;
        justify-content:flex-start;
        padding: 1rem;
        background-color: var(--sw-slate);
        background-size: cover;
        background-position:center;
        background-repeat: no-repeat;
        transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
        color: #fff;
        will-change: transform, opacity;
        transform: translateZ(0);
        border: 0;
        background-clip: padding-box;
        -webkit-mask-image: -webkit-radial-gradient(white, black);
      }
      .grid-option-btn::before{
        content:"";
        position:absolute;
        inset:0;
        border-radius: inherit;
        background: linear-gradient(to bottom, rgba(0,0,0,0) 45%, rgba(0,0,0,.55) 100%);
        z-index:0;
      }
      .grid-option-btn:hover{ opacity:.94; }
      .grid-option-btn:focus-visible{ outline: 2px solid var(--sw-slate); outline-offset: 3px; }
      .option-title{
        position:relative;
        z-index:1;
        width:100%;
        display:flex;
        align-items:flex-end;
        justify-content:space-between;
        gap:.75rem;
      }
      .option-title h4{
        font-family: var(--font-head);
        margin:0;
        font-size: 1.15rem;
        font-weight: 700;
        letter-spacing: 0;
        line-height:1.25;
        color:#fff !important;
      }
      .option-arrow{
        width: 36px;
        height: 36px;
        border-radius: 999px;
        border: 1px solid rgba(255,255,255,.7);
        font-size: .85rem;
        display:flex;
        align-items:center;
        justify-content:center;
        flex: 0 0 auto;
        transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
      }
      .grid-option-btn:hover .option-arrow{
        background: rgba(255,255,255,.15);
      }
      .option-description{
        font-family: var(--font-body);
        margin: .7rem 0 0 0;
        font-size: .95rem;
        color: var(--body) !important;
        line-height:1.5;
        padding: 0;
      }
      .screen{
        transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
        will-change: opacity, transform;
      }
      .screen.fade-out{
        opacity: 0;
        transform: translateY(-6px);
        pointer-events:none;
      }
      .screen.fade-in{
        opacity: 0;
        transform: translateY(6px);
      }
      .screen.fade-in.is-active{
        opacity: 1;
        transform: translateY(0);
      }
      .option-col{
        will-change: opacity, transform;
        transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
      }
      .option-col.enter{ opacity: 0; transform: translateY(14px); }
      .option-col.enter.is-active{ opacity: 1; transform: translateY(0); }
      .option-col.exit{ opacity: 0; transform: translateY(-14px); }
      @media (prefers-reduced-motion: reduce){
        .screen, .option-col, .grid-option-btn, .breadcrumb-pill, .crumb-back{
          transition: none !important;
          animation: none !important;
        }
      }
      /* ---------- Results screen: ExpertVoice product-shelf styling ---------- */
      .product-card{
        position:relative;
        width:100%;
        border-radius: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
        transition: opacity var(--t) var(--ease);
        padding:0;
        display:flex;
        flex-direction:column;
        min-height: 460px;
      }
      .product-card__media{
        position: relative;
        height: 0;
        padding-bottom: 100%;
        border-radius: 12px;
        overflow: hidden;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        background-color: var(--ev-tile);
      }
      .product-card__media::after{
        content: none !important;
        display: none !important;
      }
      .tag-pill{
        position:absolute;
        top: 12px; left: 12px;
        z-index:2;
        padding: 2px 8px;
        border-radius: 4px;
        font-size: 13px;
        font-weight: 600;
        background: var(--ev-navy);
        border: 0;
        color: #fff !important;
      }
      /* Only used for "Out of stock" — savings show as red copy in the price row */
      .discount-bubble{
        position:absolute;
        top: 12px; right: 12px;
        z-index:2;
        padding: 2px 8px;
        border-radius: 4px;
        font-size: 13px;
        font-weight: 600;
        line-height: 18px;
        white-space: nowrap;
        background: #fff;
        border: 1px solid rgba(0,0,0,.10);
        color: var(--ev-ink) !important;
      }
      .product-card__content{
        padding: 1rem 0;
        display:flex;
        flex-direction:column;
        gap: .6rem;
        flex: 1 1 auto;
        min-height: 0;
      }
      .product-card__brand{ font-family: var(--font-body); font-size: 15px; font-weight: 600; margin-top: .2rem; color: var(--ev-ink) !important; }
      .product-card__name{ font-family: var(--font-head); font-size: 1.18rem; font-weight: 700; line-height:1.2; margin: 0; color: var(--ev-ink) !important; }
      .product-card__description{
        font-family: var(--font-body);
        font-size: .95rem;
        line-height:1.45;
        margin-top: .15rem;
        min-height: 2.6em;
        color: var(--ev-muted) !important;
      }
      .price-row{
        display:flex;
        align-items: baseline;
        flex-wrap: wrap;
        gap: .55rem;
        margin-top: auto;
      }
      .price-now{ font-family: var(--font-body); font-size: 18px; line-height: 24px; font-weight: 600; color: var(--ev-ink) !important; }
      .price-save{ font-family: var(--font-body); font-size: 18px; line-height: 24px; font-weight: 600; color: var(--ev-save) !important; }
      .price-old{ font-family: var(--font-body); font-size: 18px; line-height: 24px; text-decoration: line-through; font-weight: 400; color: var(--ev-strike) !important; }
      .cta-wrap{ padding: 0 0 1.25rem; }
      .shop-button{
        width:100%;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        gap:.55rem;
        padding: 12px 20px;
        border-radius: var(--ev-pill);
        background: var(--ev-orange);
        color:#fff !important;
        font-family: var(--font-body);
        font-weight: 600;
        text-transform: none;
        letter-spacing: normal;
        border: 1px solid rgba(0,0,0,.06);
        transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
        text-decoration:none !important;
        cursor: pointer;
      }
      .shop-button:hover{
        background: var(--ev-orange-hover);
        transform: translateY(-1px);
        color:#fff !important;
      }
      .shop-button--outline{
        background: transparent !important;
        border: 1px solid rgba(0,0,0,.22) !important;
        color: var(--ev-ink) !important;
      }
      .cta-wrap .shop-button{
        width:auto;
        align-self:flex-start;
        padding: 10px 18px;
        font-size: .92rem;
      }
      .shop-button--outline:hover{
        transform: translateY(-1px);
        background: rgba(0,0,0,.05) !important;
        border-color: rgba(0,0,0,.35) !important;
        color: var(--ev-ink) !important;
      }
      .spinner{
        position:absolute;
        top: 50%; left: 50%;
        width: 44px; height: 44px;
        border: 4px solid rgba(0,0,0,0.12);
        border-top-color: rgba(0,0,0,0.5);
        border-radius: 50%;
        transform: translate(-50%,-50%);
        animation: spin 1s linear infinite;
        z-index: 5;
      }
      @keyframes spin{ to{ transform: translate(-50%,-50%) rotate(360deg); } }
      .fallback{
        max-width: 980px;
        margin: 1.75rem auto 0;
        padding: 1.5rem 0 0;
        text-align:center;
        border-top: 1px solid var(--line);
      }
      .fallback p{ font-family: var(--font-body); font-size: 1rem; font-weight: 600; margin: 0 0 1rem 0; color: rgba(0,0,0,.65) !important; }
      .d-none{ display:none !important; }
      .options-left{ justify-content: flex-start !important; }
      .row{
        margin-left: 0 !important;
        margin-right: 0 !important;
        display:flex;
        flex-wrap:wrap;
      }
      .row > [class*="col-"]{ padding-left: 0 !important; padding-right: 0 !important; }
      #categoryContainerWelcome, #subcategoryContainer, #productsContainer{ gap: 20px; }
      #categoryContainerWelcome .option-col,
      #subcategoryContainer .option-col,
      #productsContainer .option-col{
        /* exact thirds of the row (2 gaps of 20px) so cards line up with the heading */
        flex: 0 0 calc((100% - 40px) / 3);
        max-width: calc((100% - 40px) / 3);
      }
      /* Results grid fills left to right, so a 4th product doesn't sit centered on its own row */
      #productsContainer{ justify-content: flex-start !important; }
      #productsContainer .option-col{
        display: flex;
        flex-direction: column;
      }
      #productsContainer .option-col .product-card{
        height: 100%;
        flex: 1 1 auto;
      }
      @media (max-width: 991px){
        #categoryContainerWelcome .option-col,
        #subcategoryContainer .option-col,
        #productsContainer .option-col{
          flex: 0 0 calc(50% - 10px);
          max-width: calc(50% - 10px);
        }
      }
      @media (max-width: 767px){
        :root{ --intro-pad: 40px; }
        #headline{ font-size: 1.9rem; }
        .product-card{ min-height: 500px; }
        #categoryContainerWelcome .option-col,
        #subcategoryContainer .option-col,
        #productsContainer .option-col{
          flex: 0 0 100% !important;
          max-width: 100% !important;
        }
        #productsContainer .option-col.col-12,
        #productsContainer .option-col.col-md-4{
          flex: 0 0 100% !important;
          max-width: 100% !important;
        }
        #categoryContainerWelcome, #subcategoryContainer, #productsContainer{ gap: 14px; }
        .breadcrumb-nav{
          padding: .65rem 0 .75rem;
        }
        .finder-close{ top: .65rem; }
        /* Breadcrumbs wrap here, so pin back to the top row beside the close button. */
        .breadcrumb-inner{ align-items: flex-start; }
      }
      @media (max-height: 760px){
        #welcomeScreen .welcome-content{
          align-items: flex-start;
          padding-top: 48px;
          padding-bottom: 56px;
        }
      }

      .starting-options {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 280px));
        justify-content: center;
        gap: 24px;
      }