:root{
  --ink:#f5f5f2;
  --ink-2:#121212;
  --ink-soft:#b8b8b3;
  --paper:#0b0b0b;
  --paper-2:#171717;
  --white:#f8f8f6;
  --product-yellow:#f2b90f;
  --product-yellow-deep:#dca500;
  --steel:#8d8d88;
  --line:rgba(255,255,255,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Barlow",Arial,sans-serif;font-size:1rem;line-height:1.6;-webkit-font-smoothing:antialiased}
.container{max-width:1180px}
a{color:inherit}
.navbar{color:#fff}
.brand{font-size:.92rem;font-weight:800;letter-spacing:.18em;text-decoration:none}
.btn{font-weight:700;letter-spacing:.01em;text-transform:uppercase;font-size:.86rem}
.btn-dark{background:var(--product-yellow);border-color:var(--product-yellow);color:#0b0b0b}
.btn-dark:hover{background:#ffd02a;border-color:#ffd02a;color:#000}
.hero{min-height:92svh;position:relative;display:flex;align-items:center;overflow:hidden;background:#080808}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.hero-wash{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,5,5,.97) 0%,rgba(5,5,5,.84) 37%,rgba(5,5,5,.28) 70%,rgba(5,5,5,.08) 100%)}
.hero-copy{z-index:1;padding-top:7rem;padding-bottom:5rem}
.eyebrow{font-size:.7rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;margin-bottom:1.2rem;color:rgba(255,255,255,.56)}
.eyebrow.dark{color:#9d9d98}
h1,h2,h3{font-family:"Barlow",Arial,sans-serif;font-weight:800;letter-spacing:-.045em;text-transform:none}
h1{font-size:clamp(3.1rem,5.8vw,6rem);line-height:.92;max-width:850px}
h2{font-size:clamp(2.35rem,4.1vw,4.25rem);line-height:.96}
h3{font-size:1.9rem;line-height:1.02}
.lead{font-size:clamp(1.05rem,1.35vw,1.24rem);line-height:1.62;max-width:620px;color:var(--ink-soft);font-weight:400}
.section-pad{padding:clamp(5rem,8vw,8rem) 0}
.big-copy{font-size:clamp(1.06rem,1.35vw,1.28rem);line-height:1.7;color:var(--ink-soft)}
.intro{background:var(--paper)}
.split-section{background:#090909}
.media-panel img{width:100%;height:100%;min-height:640px;object-fit:cover}
.text-panel{display:flex;align-items:center;padding:clamp(4rem,8vw,8rem)}
.dark-panel{background:#090909;color:#fff}
.dark-panel>div{max-width:590px}
.dark-panel p:not(.eyebrow){font-size:1.08rem;line-height:1.75;color:rgba(255,255,255,.68)}
.product-card{height:100%;background:#151515;border:1px solid rgba(255,255,255,.09);border-radius:5px;overflow:hidden;box-shadow:0 18px 55px rgba(0,0,0,.22)}
.product-card img{width:100%;height:500px;object-fit:cover}
.product-card.alt img{object-position:center 35%}
.product-copy{padding:1.8rem 1.9rem 2rem;display:flex;justify-content:space-between;gap:2rem;align-items:center}
.product-copy p{max-width:410px;color:#aaa;font-size:.94rem}
.pill{display:inline-block;font-size:.65rem;font-weight:800;letter-spacing:.16em;color:#f3f3ef;background:transparent;padding:0 0 .32rem;border-radius:0;border-bottom:3px solid var(--product-yellow);margin-bottom:.9rem}
.product-price{display:flex;align-items:baseline;gap:.6rem;margin:.2rem 0 .75rem;font-family:"Barlow",Arial,sans-serif}
.price-current{font-size:1.55rem;font-weight:800;letter-spacing:-.025em}
.price-current.sale{color:var(--product-yellow)}
.price-was{font-family:"Barlow",Arial,sans-serif;font-size:.88rem;color:#777;text-decoration:line-through;text-decoration-thickness:1px}
.feature-strip{background:#161616;color:#fff;padding:2.8rem 0;border-top:1px solid #292929}
.feature-strip strong{display:block;font-size:clamp(2rem,3vw,3.1rem);font-weight:800;letter-spacing:-.045em}
.feature-strip span{display:block;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.54)}
.orange-section{background:#111}
.orange-section .eyebrow.dark{color:#999}
.image-stack{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.image-stack img{width:100%;height:560px;object-fit:cover;border-radius:4px}
.rounded-media{width:100%;height:650px;object-fit:cover;border-radius:4px}
.faq{background:#0e0e0e}
.accordion-item{background:transparent;border-color:var(--line)}
.accordion-button{background:transparent!important;box-shadow:none!important;font-family:"Barlow",Arial,sans-serif;font-size:1.35rem;font-weight:700;padding:1.55rem 0}
.accordion-button:not(.collapsed){color:#fff}
.accordion-body{padding:0 0 1.8rem;font-size:1rem;line-height:1.7;color:#aaa}
.buy-section{padding:clamp(6rem,9vw,9rem) 0;background:#050505;color:#fff;border-top:1px solid #262626}
.buy-section h2{font-size:clamp(2.8rem,4.7vw,4.9rem)}
.buy-lead{color:rgba(255,255,255,.58);font-size:.95rem}
.buy-box{max-width:720px;margin-top:3rem}
.variant-buttons{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.variant{border:1px solid rgba(255,255,255,.17);background:rgba(255,255,255,.025);color:#fff;border-radius:4px;padding:1.15rem 1.25rem;text-align:left;transition:.18s ease}
.variant:hover{border-color:rgba(255,255,255,.45)}
.variant.active{background:#fff;color:var(--ink);border-color:#fff;box-shadow:inset 0 -4px 0 var(--product-yellow)}
.variant span,.variant small{display:block}
.variant span{font-size:1.35rem;font-weight:800}
.variant small{opacity:.62;font-size:.78rem;margin-top:.15rem}
.variant small .price-was{font-size:.72rem;margin-right:.3rem}
.variant small .price-current{font-family:"Barlow",Arial,sans-serif;font-size:.78rem;font-weight:700}
.quantity{display:flex;align-items:center;justify-content:center;gap:1rem;margin:1.5rem auto;max-width:220px;font-size:.85rem;color:rgba(255,255,255,.7)}
.quantity .form-select{width:90px;background-color:#fff;border:0;border-radius:3px}
#checkout.btn-light{background:var(--product-yellow);border-color:var(--product-yellow);color:var(--ink)}
#checkout.btn-light:hover{background:#ffc928;border-color:#ffc928}
footer{background:#050505;color:rgba(255,255,255,.46);padding:2rem 0;font-size:.82rem;border-top:1px solid #1d1d1d}
.success-page h1{font-size:clamp(3.3rem,6.5vw,5.5rem)}
.success-page .lead{color:rgba(255,255,255,.74)}
@media(max-width:991.98px){
  .hero-wash{background:linear-gradient(90deg,rgba(5,5,5,.96),rgba(5,5,5,.75) 62%,rgba(5,5,5,.18))}
  .media-panel img{min-height:500px}.product-copy{display:block}.product-copy .btn{margin-top:1rem}.rounded-media{height:520px}
}
@media(max-width:575.98px){
  .navbar .btn{font-size:.76rem}.hero{min-height:850px;align-items:end}.hero-img{object-position:58% center}.hero-wash{background:linear-gradient(0deg,rgba(5,5,5,.99) 0%,rgba(5,5,5,.9) 43%,rgba(5,5,5,.1) 78%)}.hero-copy{padding-bottom:4rem}.media-panel img,.product-card img,.image-stack img,.rounded-media{height:420px}.image-stack{grid-template-columns:1fr}.variant-buttons{grid-template-columns:1fr}h1{font-size:3.2rem}.section-pad{padding:4.5rem 0}
}

/* v7 dark-first refinement */
.hero h1,.hero .lead{color:#fff}
.hero .lead{color:rgba(255,255,255,.72)}
.intro,.orange-section,.faq{color:#f5f5f2}
.accordion-button{color:#f5f5f2}
.accordion-button::after{filter:invert(1) grayscale(1)}
.product-card h3{color:#f5f5f2}
.product-price{color:#f5f5f2}
.product-card .btn-dark{box-shadow:none}

/* v8 — stronger section rhythm + readable dark controls */
.intro{background:#0b0b0b}
.split-section{background:#151515}
.dark-panel{background:#101010}
.orange-section{background:#1a1a1a}
.faq{background:#101010}
.buy-section{background:#070707}
.feature-strip{background:#202020}

/* Keep the selected variant dark too — selection is communicated by yellow. */
.variant.active{
  background:#202020;
  color:#fff;
  border-color:var(--product-yellow);
  box-shadow:inset 0 -4px 0 var(--product-yellow);
}
.variant.active small{color:#c5c5c0;opacity:1}
.variant.active .price-was{color:#777}
.variant.active .price-current{color:var(--product-yellow)}

/* Native select: force an explicitly readable dark appearance. */
.quantity .form-select{
  width:96px;
  background-color:#1c1c1c;
  color:#fff;
  border:1px solid #3b3b3b;
  border-radius:4px;
  padding-top:.65rem;
  padding-bottom:.65rem;
  color-scheme:dark;
}
.quantity .form-select:focus{
  border-color:var(--product-yellow);
  box-shadow:0 0 0 .2rem rgba(242,185,15,.14);
}
.quantity .form-select option{background:#1c1c1c;color:#fff}


.shower-scene {
    width: 100%;
    height: 360px;

    background-image: url("img/shower_scene-comp.jpg");
    background-size: cover;
    background-position: center 45%;
    background-repeat: no-repeat;
}

@media (max-width: 768px) {
    .shower-scene {
        height: 240px;
        background-position: center center;
    }
}