/* TORQUE De-Tan Face Wash product page, preview build (2026-11-12).
   Phone first: one column with a fixed buy bar. Desktop: gallery left, buy box right, sections below. */
:root{
  --ink:#141b2d; --mist:#5a6377; --body:#3f475a; --line:#e1e4ea; --line2:#d5d9e1;
  --ground:#eceef2; --band:#f4f5f7; --navy:#1b2640; --bone:#ecebe6; --bone2:#b9c0d0;
  --tan:#de7e3b; --tan-ink:#b4581c; --ph-bg:#fdeee3; --ph-ink:#8a3f10; --ok:#1d6b4a; --ok-bg:#e3f3ea;
  --f-mark:"Bebas Neue",Impact,"Arial Narrow",sans-serif;
  --f-cond:"Barlow Condensed","Arial Narrow","Helvetica Neue",sans-serif;
  --f-body:Barlow,"Helvetica Neue",Arial,sans-serif;
  --gl:max(16px,env(safe-area-inset-left,0px)); --gr:max(16px,env(safe-area-inset-right,0px));
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--ink);font:400 15px/1.5 var(--f-body);-webkit-font-smoothing:antialiased;padding-bottom:calc(122px + env(safe-area-inset-bottom,0px))}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--tan-ink);outline-offset:2px}
.wrap{padding-left:var(--gl);padding-right:var(--gr)}
.in{max-width:1180px;margin:0 auto}
.ph{background:var(--ph-bg);color:var(--ph-ink);padding:1px 5px;border-radius:3px;font-weight:600;white-space:nowrap}
.eyebrow{margin:0;font:600 13px/1.2 var(--f-cond);letter-spacing:.16em;text-transform:uppercase;color:var(--tan-ink)}
.h2{margin:4px 0 0;font:400 34px/.95 var(--f-mark);letter-spacing:.02em}
.stars{color:var(--tan);letter-spacing:2px}
.dash{border:1.5px dashed #b6bdc9;background:var(--band);border-radius:6px;display:flex;align-items:center;justify-content:center;text-align:center;padding:8px;font:600 11px/1.2 var(--f-cond);letter-spacing:.08em;text-transform:uppercase;color:var(--mist)}
.btn{height:50px;border:0;border-radius:4px;font:600 17px/1 var(--f-cond);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.btn-navy{background:var(--navy);color:#fff}
.btn-tan{background:var(--tan);color:var(--ink);font-weight:700}
.btn-line{height:36px;padding:0 14px;border:1.5px solid var(--ink);border-radius:4px;background:#fff;font:600 14px/1 var(--f-cond);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.mark{display:inline-flex;align-items:center;font:400 30px/1 var(--f-mark);letter-spacing:.03em;text-decoration:none;color:var(--ink)}
.mark i{width:.6em;height:.6em;border-radius:50%;background:var(--tan);display:inline-block;margin:0 .05em}

/* preview strip + header */
.strip{background:var(--navy);color:var(--bone);font:600 12px/1.3 var(--f-cond);letter-spacing:.12em;text-transform:uppercase;text-align:center;padding:7px var(--gr) 6px var(--gl)}
.strip b{color:var(--tan)}
header.site{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--line)}
header.site .in{height:56px;display:flex;align-items:center;justify-content:space-between}
.icon-btn{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:none;border:0;cursor:pointer;color:var(--ink)}

/* top: gallery + buy box */
.top{display:grid;grid-template-columns:minmax(0,1fr)}
.gallery .stage{position:relative;aspect-ratio:4/5;background:var(--ground);overflow:hidden}
.gallery .stage img,.gallery .stage .slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gallery .slide[hidden]{display:none}
.slide.video{background:var(--navy);color:var(--bone);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:24px;font:600 15px/1.3 var(--f-cond);letter-spacing:.1em;text-transform:uppercase}
.play{width:64px;height:64px;border-radius:50%;background:var(--tan);color:var(--ink);display:flex;align-items:center;justify-content:center}
.slide.dash{position:absolute;border-radius:0;font-size:16px;border-width:2px}
.count{position:absolute;left:12px;bottom:12px;background:rgba(20,27,45,.78);color:#fff;font-size:12px;font-weight:600;padding:4px 9px;border-radius:999px}
.thumbs{display:flex;gap:8px;padding:12px var(--gr) 12px var(--gl);overflow-x:auto}
.thumbs button{flex:none;width:52px;height:64px;padding:0;border-radius:4px;overflow:hidden;background:var(--ground);cursor:pointer;border:2px solid transparent}
.thumbs button[aria-pressed="true"]{border-color:var(--ink)}
.thumbs img{width:100%;height:100%;object-fit:cover}
.thumbs .t-video{display:flex;width:100%;height:100%;align-items:center;justify-content:center;background:var(--navy);color:var(--tan)}
.thumbs .t-ph{display:flex;width:100%;height:100%;align-items:center;justify-content:center;text-align:center;border:1.5px dashed #b6bdc9;background:var(--band);font:600 10px/1.1 var(--f-cond);letter-spacing:.06em;text-transform:uppercase;color:var(--mist);padding:2px}

.buy{padding:8px var(--gr) 26px var(--gl);display:flex;flex-direction:column;gap:12px}
.tagrow{display:flex;align-items:center;gap:8px}
.tag{background:var(--tan);color:var(--ink);font:700 12px/1 var(--f-cond);letter-spacing:.14em;padding:5px 7px 4px;border-radius:2px}
.tagrow span:last-child{font:600 12px/1 var(--f-cond);letter-spacing:.14em;color:var(--mist)}
h1{margin:0;font:700 38px/1 var(--f-cond);letter-spacing:.01em;text-transform:uppercase}
h1 em{font-style:normal;color:var(--tan-ink)}
.sub{margin:0;color:var(--mist)}
.rating{margin:0;display:flex;align-items:center;gap:6px;font-size:14px;flex-wrap:wrap}
.chips{display:flex;flex-wrap:wrap;gap:8px;padding-top:2px}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line2);border-radius:999px;padding:6px 11px;font-size:14px;font-weight:500}
.price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding-top:8px}
.price .now{font-size:28px;font-weight:700;line-height:1.1}
.price s{font-size:16px;color:var(--mist)}
.off{font-size:13px;font-weight:700;color:var(--ok);background:var(--ok-bg);padding:3px 7px;border-radius:3px}
.tax{margin:-6px 0 0;font-size:13px;color:var(--mist)}
.label{margin:6px 0 0;font:600 13px/1 var(--f-cond);letter-spacing:.16em;text-transform:uppercase;color:var(--mist)}
.packs{display:flex;flex-direction:column;gap:10px}
.pack{position:relative;display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:14px;border-radius:6px;border:2px solid var(--line2);background:#fff;cursor:pointer}
.pack[aria-checked="true"]{border-color:var(--ink);background:#f7f8fa}
.dot{flex:none;width:20px;height:20px;border-radius:50%;border:2px solid #9aa2b2;background:#fff}
.pack[aria-checked="true"] .dot{border:6px solid var(--ink)}
.pack .txt{display:flex;flex-direction:column;gap:3px;flex-grow:1;min-width:0}
.pack .t{font:700 18px/1.1 var(--f-cond);letter-spacing:.02em;text-transform:uppercase}
.pack .s{font-size:13px;color:var(--mist);line-height:1.35}
.pack .minis{display:flex;gap:4px;padding-top:4px}
.pack .minis img{width:30px;height:30px;border-radius:3px;object-fit:cover}
.pack .p{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none}
.pack .save{font-size:12px;font-weight:700;color:var(--ok)}
.badge{position:absolute;top:-10px;right:12px;background:var(--ink);color:#fff;font:600 11px/1 var(--f-cond);letter-spacing:.12em;text-transform:uppercase;padding:4px 8px;border-radius:2px}
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding-top:6px}
.trust{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding-top:6px}
.trust div{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;font-size:12px;color:var(--body)}

/* sections */
section.sec{padding-top:32px;padding-bottom:32px}
section.band{background:var(--band)}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:16px}
.reels{display:flex;gap:10px;overflow-x:auto;padding-bottom:2px}
.reel{flex:none;width:132px;height:234px;border-radius:8px;background:var(--navy);color:var(--bone);display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;padding:10px}
.reel .l{font:600 11px/1 var(--f-cond);letter-spacing:.1em;text-transform:uppercase;border:1px dashed rgba(236,235,230,.55);padding:3px 5px;border-radius:3px}
.reel .play{width:44px;height:44px;align-self:center}
.reel small{font-size:12px;color:#c9cfdb}
.routine{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.routine .pic{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:6px}
.steps{display:flex;flex-direction:column;gap:10px}
.step{display:flex;gap:12px;align-items:center;padding:12px;border:1px solid var(--line2);border-radius:6px}
.step.this{border:2px solid var(--ink)}
.step img{width:64px;height:64px;border-radius:4px;object-fit:cover;flex:none}
.step .txt{flex-grow:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.step .where{font:600 12px/1.2 var(--f-cond);letter-spacing:.14em;text-transform:uppercase;color:var(--tan-ink)}
.step .n{font:700 18px/1.1 var(--f-cond);letter-spacing:.02em;text-transform:uppercase}
.step .w{font-size:13px;color:var(--mist)}
.step .act{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.step .here{font:600 12px/1 var(--f-cond);letter-spacing:.1em;text-transform:uppercase;color:var(--mist)}
.all{width:100%;height:52px}
.actives{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.active{display:grid;grid-template-columns:92px minmax(0,1fr);gap:14px;align-items:center;background:#fff;border-radius:6px;padding:16px 14px}
.active b{font:400 40px/.9 var(--f-mark)}
.active strong{display:block;font-size:16px}
.active span{font-size:14px;color:var(--mist)}
.day{background:var(--navy);color:var(--bone)}
.day .eyebrow{color:var(--tan)}
.day .h2{color:var(--bone)}
.times{display:grid;grid-template-columns:minmax(0,1fr)}
.time{display:grid;grid-template-columns:70px minmax(0,1fr);gap:12px;padding:14px 0;border-top:1px solid rgba(236,235,230,.16)}
.time b{font:400 26px/1 var(--f-mark);color:var(--tan)}
.time strong{display:block;font-size:16px;font-weight:600}
.time span{font-size:14px;color:var(--bone2)}
.how{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.how .dash{height:140px}
.how strong{display:block;margin-top:8px;font:700 16px/1.2 var(--f-cond);letter-spacing:.04em;text-transform:uppercase}
.how span{display:block;font-size:13px;color:var(--mist);line-height:1.35}
.lasts{margin:16px 0 0;padding:12px 14px;background:var(--band);border-radius:6px}
.photos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:14px 0}
.photos .dash{height:78px;background:#fff;font-size:10px}
.rev{background:#fff;border-radius:6px;padding:14px;display:flex;flex-direction:column;gap:8px;margin-top:10px}
.rev .top-row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.bar{height:9px;border-radius:5px;background:var(--line)}
.rev small{font-size:12px;color:var(--mist)}
.faq{max-width:760px}
details{border-top:1px solid var(--line)}
.faq-list{border-bottom:1px solid var(--line)}
summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 0;font-size:16px;font-weight:600;line-height:1.35;cursor:pointer}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";flex:none;width:20px;text-align:center;font-size:22px;line-height:1;color:var(--tan-ink)}
details[open] summary::after{content:"\2013"}
details p{margin:0 0 16px;font-size:15px;line-height:1.55;color:var(--body);max-width:62ch}
footer.site{background:var(--navy);color:var(--bone);padding-top:28px;padding-bottom:32px}
footer .mark{color:var(--bone);font-size:48px}
footer p{margin:10px 0 12px;font-size:14px;color:var(--bone2)}
footer nav{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px}
footer nav a{color:var(--bone)}
footer .note{margin-top:18px;font-size:12px;color:var(--bone2)}

/* sticky buy bar (phone) */
.bar-buy{position:fixed;left:0;right:0;bottom:0;z-index:30;background:#fff;border-top:1px solid var(--line);box-shadow:0 -6px 18px rgba(20,27,45,.08);padding:10px var(--gr) calc(12px + env(safe-area-inset-bottom,0px)) var(--gl);display:flex;flex-direction:column;gap:10px}
.bar-buy .row{display:flex;align-items:center;gap:10px}
.bar-buy img{width:36px;height:36px;border-radius:4px;object-fit:cover;background:var(--ground)}
.bar-buy .nm{display:flex;flex-direction:column;gap:1px;min-width:0;flex-grow:1}
.bar-buy .nm b{font:600 15px/1.1 var(--f-cond);letter-spacing:.04em;text-transform:uppercase}
.bar-buy .nm span{font-size:13px;color:var(--mist)}
.bar-buy .btn{height:48px}
.toast{position:fixed;left:50%;bottom:calc(140px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:40;background:var(--ink);color:#fff;font-size:14px;padding:10px 14px;border-radius:6px;max-width:calc(100% - 32px);text-align:center;opacity:0;pointer-events:none;transition:opacity .2s}
.toast.show{opacity:1}

@media (min-width:900px){
  body{padding-bottom:0}
  .bar-buy{display:none}
  .toast{bottom:32px}
  .top{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;padding:28px var(--gr) 40px var(--gl);max-width:1180px;margin:0 auto}
  .gallery{display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px;align-items:start;position:sticky;top:76px}
  .gallery .stage{order:2;border-radius:6px}
  .thumbs{order:1;flex-direction:column;padding:0;overflow:visible}
  .thumbs button{width:72px;height:90px}
  .buy{padding:0}
  h1{font-size:48px}
  .h2{font-size:44px}
  .reel{width:200px;height:356px}
  .routine{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start}
  .actives{grid-template-columns:repeat(3,minmax(0,1fr))}
  .active{grid-template-columns:1fr;gap:8px;padding:22px}
  .times{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
  .time{grid-template-columns:1fr;gap:6px}
  .how .dash{height:240px}
  .photos .dash{height:140px}
  .revs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .revs .rev{margin-top:0}
}
@media (prefers-reduced-motion:reduce){.toast{transition:none}}

/* ---- torquemen.com: the earlier product-page LAYOUT in the homepage (Sun) COLOURS (owner 11-12) ---- */
:root{
  --ink:#141b2d; --mist:#5a5040; --body:#3f3a30; --line:#e6dccb; --line2:#d9c7a8;
  --ground:#e9dbc3; --band:#f1e6d4; --navy:#141d33; --bone:#ecebe6; --bone2:#b9c0d0;
  --tan:#de7e3b; --tan-ink:#9a4a17; --deep:#0e1527; --paper:#fbf7f0; --sand3:#f9f3ea;
}
body{background:var(--paper);padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
.strip{display:block;text-decoration:none;background:var(--tan);color:var(--ink);font-weight:700}
.strip b{color:var(--ink)}
header.site{background:var(--deep);border-bottom:0}
header.site .icon-btn{color:#fff}
header.site .mark{color:#fff}
.menu{background:var(--deep)!important;border-top:1px solid rgba(236,235,230,.10)!important}
.menu a{color:#fff;border-bottom-color:rgba(236,235,230,.08)!important}
.menu a small{color:var(--bone2)!important}
nav.main a{color:#fff}
nav.main a:hover{color:#f0a46b!important}
.pack{background:#fff}
.pack[aria-checked="true"]{background:var(--sand3)}
.active{background:var(--sand3)}
.step.this{border-color:var(--ink)}
.chip{background:#fff}
.day{background:var(--navy)}
.day .eyebrow{color:#f0a46b}
footer.site{background:var(--deep)}
footer .mark i{box-shadow:0 0 28px rgba(222,126,59,.55)}
.bar-buy{background:var(--deep);border-top:1px solid rgba(236,235,230,.12)}
.bar-buy .nm b{color:#fff}
.bar-buy .nm span{color:var(--bone2)}
.signup{background:var(--sand3)!important}
.toast{background:#fff;color:var(--ink)}
header.site .in{gap:8px}
.lhs{display:flex;align-items:center;gap:2px}
.hdr-cta{height:38px;padding:0 14px;font-size:14px;display:inline-flex;align-items:center;text-decoration:none}
nav.main{display:none}
.menu{display:none;background:#fff;border-top:1px solid var(--line);padding:6px var(--gr) 16px var(--gl)}
.menu.open{display:block}
.menu a{display:block;padding:12px 0;border-bottom:1px solid var(--line);font:600 18px/1.2 var(--f-cond);letter-spacing:.06em;text-transform:uppercase;text-decoration:none}
.menu a small{display:block;font:400 13px/1.3 var(--f-body);letter-spacing:0;text-transform:none;color:var(--mist);margin-top:2px}
.newl{margin:0;display:flex;align-items:center;gap:8px;font:700 13px/1 var(--f-cond);letter-spacing:.14em;text-transform:uppercase;color:var(--tan-ink)}
.newl i{width:9px;height:9px;border-radius:50%;background:var(--tan);box-shadow:0 0 0 4px rgba(222,126,59,.22)}
.price .now.soon{font:700 26px/1.1 var(--f-cond);letter-spacing:.04em;text-transform:uppercase}
.pack .tick{font:600 12px/1 var(--f-cond);letter-spacing:.1em;text-transform:uppercase;color:var(--mist)}
.signup{display:flex;flex-direction:column;gap:10px;padding:14px;border:2px solid var(--ink);border-radius:6px;background:#f7f8fa}
.signup .lead{margin:0;font-size:14px;color:var(--body)}
.signup .lead b{color:var(--ink)}
.signup .fields{display:flex;flex-direction:column;gap:10px}
.signup label.l{font-size:13px;font-weight:700}
.signup .row{display:flex;gap:8px}
.signup .cc{flex:none;height:48px;display:flex;align-items:center;padding:0 10px;border:1.5px solid var(--line2);border-radius:4px;background:#fff}
.signup input[type=tel]{flex-grow:1;min-width:0;height:48px;border:1.5px solid var(--line2);border-radius:4px;padding:0 12px;font-size:16px;background:#fff}
.signup input[type=tel]:focus{border-color:var(--ink)}
.signup .consent{display:flex;gap:8px;align-items:flex-start;font-size:13px;line-height:1.4;color:var(--body)}
.signup .consent input{width:18px;height:18px;margin:1px 0 0;flex:none;accent-color:var(--navy)}
.signup .btn{width:100%}
.signup .msg{min-height:20px;font-size:14px;font-weight:700;color:var(--ok)}
.signup .msg.err{color:#a3361a}
.signup.done .fields{display:none}
.step .act a.btn-line{display:inline-flex;align-items:center;text-decoration:none}
a.all{display:flex;align-items:center;justify-content:center;text-decoration:none}
.how .num{height:110px;border-radius:6px;background:var(--band);display:flex;align-items:center;justify-content:center;font:400 64px/1 var(--f-mark);color:var(--tan-ink)}
.bar-buy{gap:0}
.bar-buy .row .btn{height:46px;padding:0 18px;font-size:16px;display:inline-flex;align-items:center;text-decoration:none;flex:none}
footer .mark i{width:.6em;height:.6em}
@media (min-width:900px){
  body{padding-bottom:0}
  nav.main{display:flex;gap:22px;font:600 15px/1 var(--f-cond);letter-spacing:.1em;text-transform:uppercase}
  nav.main a{text-decoration:none}
  nav.main a:hover{color:var(--tan-ink)}
  .menu-btn,.menu{display:none!important}
  .how .num{height:160px}
}