:root{
            /* Light theme */
            --bg: #ffffff;
            --bg2:#f4f5f3;
            --hero-base:#0a0f13;      /* dark base behind the hero photo */
            --text:#16181a;
            --muted: rgba(0,0,0,.58);
            --line: rgba(0,0,0,.10);
            --card:#ffffff;
            --shadow: 0 16px 40px rgba(0,0,0,.14);
            --radius-xl: 22px;
            --radius-md: 12px;
            --cta: #D68A34;
            --cta-hover:#BE7A2C;
            --danger:#ff5c5c;
            --success:#32d296;
            --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 */
            --font-head: 'Ruda', -apple-system, 'system-ui', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            --font-body: 'Source Sans Pro', -apple-system, 'system-ui', 'Segoe UI', Roboto, '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(--text);
            overflow-x:hidden;
          }
          h1,h2,h3,h4,h5,h6{ font-family: var(--font-head); }
          a{ text-decoration:none !important; color:inherit !important; }

          /* ---------- Light-mode text scoping ----------
             Hero (#welcomeScreen) sits over a dark photo, so its text stays white.
             Finder content (#productFinder) is on a light surface, so text is dark. */
          #welcomeScreen,
          #welcomeScreen h1, #welcomeScreen h2, #welcomeScreen h3, #welcomeScreen h4,
          #welcomeScreen p, #welcomeScreen strong, #welcomeScreen em,
          #welcomeScreen .welcome-copy, #welcomeScreen .brand-kicker{
            color:#FFFFFF !important;
          }
          #productFinder{ color: var(--text) !important; }
          #productFinder #headline,
          #productFinder #description,
          #productFinder h1, #productFinder h2, #productFinder h3{
            color: var(--text) !important;
          }
          /* Photo-tile card labels always stay white (they sit on dark image scrims).
             Scoped with IDs so they win over the #productFinder heading color above. */
          #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;
            backdrop-filter: blur(14px);
            background: linear-gradient(to bottom, rgba(255,255,255,.92) 0%, rgba(255,255,255,.55) 70%, rgba(255,255,255,0) 100%);
          }
          .breadcrumb-inner{ display:flex; align-items:center; gap: .9rem; }
          .crumb-back{
            width: 40px; height: 40px;
            border-radius: 999px;
            border: 1px solid var(--line);
            background: rgba(0,0,0,.04);
            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: rgba(0,0,0,.08); transform: translateY(-1px); }
          .breadcrumb-trail{ display:flex; align-items:center; gap:.5rem; flex-wrap: wrap; width: 100%; }
          .breadcrumb-pill{
            appearance: none;
            border: 1px solid var(--line);
            background: rgba(0,0,0,.04);
            color: rgba(0,0,0,.60);
            padding: .40rem .90rem;
            border-radius: 999px;
            font-size: .82rem;
            font-weight: 700;
            cursor: pointer;
            user-select:none;
            white-space: nowrap;
            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: rgba(0,0,0,.08);
            border-color: rgba(0,0,0,.16);
            transform: translateY(-1px);
            color: rgba(0,0,0,.85);
          }
          .breadcrumb-pill.active{
            background: var(--cta);
            border-color: transparent;
            color: #fff;
          }
          #welcomeScreen{
            position: relative;
            min-height: 100vh;
            background: var(--hero-base);
            overflow-x: hidden;
            overflow-y: visible;
          }
          /* Photo hero covers the full welcome screen so the white title stays legible */
          #welcomeScreen .intro-hero{
            position:absolute;
            inset:0;
            background: url('finder/background_wtf64k.jpg') center/cover no-repeat;
            z-index:0;
          }
          #welcomeScreen .intro-hero::before{
            content:"";
            position:absolute;
            inset:0;
            background:
              radial-gradient(1200px 600px at 35% 10%, rgba(0,0,0,.10) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.72) 100%),
              linear-gradient(to bottom, rgba(0,0,0,.10) 0%, rgba(0,0,0,.48) 55%, rgba(10,15,19,.92) 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;
            letter-spacing:.22em;
            text-transform:uppercase;
            opacity:.75;
            margin-bottom:.75rem;
          }
          .welcome-copy h1{
            font-family: var(--font-head);
            font-size: clamp(2.4rem, 4.2vw, 3.9rem);
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: .005em;
            line-height:1.02;
            margin:0 0 1rem 0;
          }
          .welcome-copy p{
            font-family: var(--font-body);
            max-width: 740px;
            font-size: 1rem;
            opacity:.9;
            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.55rem, 2.2vw, 2.1rem);
            font-weight: 900;
            text-transform: uppercase;
            line-height: 1.08;
            margin: 0 0 .55rem 0;
            letter-spacing: 0;
          }
          .intro-question p{
            font-family: var(--font-body);
            max-width: 760px;
            margin: 0;
            font-size: 1rem;
            color: rgba(255,255,255,.82) !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: 1rem 2.1rem;
            border:0;
            border-radius: var(--radius-md);
            background: var(--cta);
            color:#fff !important;
            font-family: var(--font-head);
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: .04em;
            font-size: 1rem;
            cursor: pointer;
            box-shadow: 0 12px 30px rgba(0,0,0,.28);
            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);
            transform: translateY(-2px);
            box-shadow: var(--shadow);
          }
          .lets-go-btn:focus-visible{
            outline: 3px solid rgba(255,255,255,.6);
            outline-offset: 2px;
          }
          .lets-go-btn i{ transition: transform var(--t-fast) var(--ease); }
          .lets-go-btn:hover i{ transform: translateX(3px); }
          .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{
            min-height:100vh;
            padding: 0 0 4rem;
            background:
              radial-gradient(1200px 700px at 50% -10%, rgba(0,0,0,.035) 0%, rgba(0,0,0,0) 60%),
              linear-gradient(to bottom, var(--bg) 0%, var(--bg2) 100%);
            display:none;
          }
          .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.2rem;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 0;
            margin: 0 0 .45rem 0;
            max-width: 920px;
          }
          #description{
            font-family: var(--font-body);
            font-size: 1rem;
            color: var(--muted);
            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;
            border: 1px solid var(--line);
            background-color: #0a0f13;
            background-size: cover;
            background-position:center;
            background-repeat: no-repeat;
            box-shadow: 0 10px 30px rgba(0,0,0,.18);
            transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
            color: #fff;
            will-change: transform, opacity;
            transform: translateZ(0);
          }
          .grid-option-btn::before{
            content:"";
            position:absolute;
            inset:0;
            background: linear-gradient(to bottom, rgba(0,0,0,.12) 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.78) 100%);
            z-index:0;
          }
          .grid-option-btn:hover{ transform: translateY(-4px); box-shadow: var(--shadow); }
          .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.25rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: .01em;
            line-height:1.15;
            color:#fff !important;
            text-shadow: 0 1px 2px rgba(0,0,0,.35);
          }
          .option-arrow{
            width: 42px;
            height: 42px;
            border-radius: 999px;
            background: rgba(255,255,255,.18);
            border: 1px solid rgba(255,255,255,.14);
            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,.24);
            transform: translateX(1px);
          }
          .option-description{
            font-family: var(--font-body);
            margin: .6rem 0 0 0;
            font-size: .92rem;
            color: rgba(0,0,0,.65);
            line-height:1.45;
            padding: 0 .2rem;
          }
          .screen{
            transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), filter var(--t) var(--ease);
            will-change: opacity, transform, filter;
          }
          .screen.fade-out{
            opacity: 0;
            transform: translateY(-10px);
            filter: blur(2px);
            pointer-events:none;
          }
          .screen.fade-in{
            opacity: 0;
            transform: translateY(10px);
            filter: blur(2px);
          }
          .screen.fade-in.is-active{
            opacity: 1;
            transform: translateY(0);
            filter: blur(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;
            }
          }
          .product-card{
            position:relative;
            width:100%;
            border-radius: var(--radius-xl);
            overflow:hidden;
            border: 1px solid var(--line);
            background: var(--card);
            box-shadow: 0 12px 30px rgba(0,0,0,.10);
            transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), opacity var(--t) var(--ease);
            padding:0;
            display:flex;
            flex-direction:column;
            min-height: 520px;
          }
          .product-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow); }
          .product-card__media{
            position: relative;
            height: 0;
            padding-bottom: 100%;
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            background-color: #ffffff;
          }
          .product-card__media::after{
            content: none !important;
            display: none !important;
          }
          .tag-pill{
            position:absolute;
            top: 12px; left: 12px;
            z-index:2;
            padding: .35rem .70rem;
            border-radius: 999px;
            font-size: .75rem;
            font-weight: 800;
            color: #fff !important;
            background: rgba(214,138,52,.95);
            border: 1px solid rgba(255,255,255,.14);
            box-shadow: 0 6px 18px rgba(0,0,0,.20);
          }
          .discount-bubble{
            position:absolute;
            top: 12px; right: 12px;
            z-index:2;
            padding: .4rem .75rem;
            border-radius: 999px;
            font-size: .75rem;
            font-weight: 900;
            line-height: 1;
            white-space: nowrap;
            color: #111 !important;
            background: rgba(17,17,17,.06);
            border: 1px solid rgba(0,0,0,.14);
            box-shadow: 0 6px 18px rgba(0,0,0,.12);
          }
          .product-card__content{
            padding: 1.2rem 1.25rem 1.1rem;
            display:flex;
            flex-direction:column;
            gap: .6rem;
            flex: 1 1 auto;
            min-height: 0;
          }
          .product-card__brand{ font-family: var(--font-body); font-size: .85rem; color: rgba(0,0,0,.55) !important; font-weight: 700; margin-top: .2rem; }
          .product-card__name{ font-family: var(--font-head); font-size: 1.18rem; font-weight: 800; line-height:1.2; margin: 0; color: var(--text) !important; }
          .product-card__description{
            font-family: var(--font-body);
            font-size: .95rem;
            color: rgba(0,0,0,.62) !important;
            line-height:1.45;
            margin-top: .15rem;
            min-height: 2.6em;
          }
          .price-row{
            display:flex;
            align-items: baseline;
            gap: .8rem;
            margin-top: auto;
          }
          .price-now{ font-family: var(--font-head); font-size: 1.45rem; font-weight: 900; color: var(--text) !important; }
          .price-old{ font-size: .9rem; color: rgba(0,0,0,.42) !important; text-decoration: line-through; font-weight: 700; }
          .cta-wrap{ padding: 0 1.25rem 1.25rem; }
          .shop-button{
            width:100%;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:.55rem;
            padding: .95rem 1rem;
            border-radius: var(--radius-md);
            background: var(--cta);
            color:#fff !important;
            font-weight: 900;
            letter-spacing:.02em;
            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(--cta-hover);
            transform: translateY(-1px);
            color:#fff !important;
          }
          .shop-button--outline{
            background: transparent !important;
            border: 1px solid rgba(0,0,0,.22) !important;
            color: var(--text) !important;
          }
          .shop-button--outline:hover{
            background: rgba(0,0,0,.05) !important;
            border-color: rgba(0,0,0,.35) !important;
            transform: translateY(-1px);
            color: var(--text) !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: 800; 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{
            flex: 0 0 calc(33.333% - 20px);
            max-width: calc(33.333% - 20px);
          }
          #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% - 20px);
              max-width: calc(50% - 20px);
            }
          }
          @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; }
          }
          @media (max-height: 760px){
            #welcomeScreen .welcome-content{
              align-items: flex-start;
              padding-top: 48px;
              padding-bottom: 56px;
            }
          }
          .grid-option-btn{
            border: 0;
            box-shadow:
              inset 0 0 0 1px rgba(255,255,255,.06),
              0 10px 30px rgba(0,0,0,.18);
            overflow: hidden;
            border-radius: var(--radius-xl);
            background-clip: padding-box;
            -webkit-mask-image: -webkit-radial-gradient(white, black);
          }
          .grid-option-btn::before{
            border-radius: inherit;
          }
          @media screen and (max-width: 767px) {
            .breadcrumb-nav {
              padding: .65rem 0 .75rem;
              padding-left: 42px;
            }
          }

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

          @media (min-width: 992px){
            #categoryContainerWelcome .option-col{
              flex: 0 0 calc(50% - 10px);
              max-width: calc(50% - 10px);
            }
          }

            .brand-kicker {
              display: none;
            }