/* Skol Sample Kit lander v2. All rules scoped under .skol-sk so the Shopify theme is untouched. Designed 390px-first. */
/* Typography matches skolbeardco.com.au (Dawn theme): headings = system UI stack, body/buttons = Assistant (the theme's own Shopify font files, self-hosted). */
@font-face{font-family:'SkolAssistant';src:url(https://skol-sample-kit.pages.dev/assets/assistant-600.woff2?v=14) format('woff2');font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:'SkolAssistant';src:url(https://skol-sample-kit.pages.dev/assets/assistant-700.woff2?v=14) format('woff2');font-weight:700 900;font-style:normal;font-display:swap}
.skol-sk{--bg:#000;--panel:#0d0d0d;--line:#262626;--r:8px;--rb:8px;--card:linear-gradient(180deg,#121212,#080808);--txt:#efefec;--mute:#a9a9a4;--red:#e1121b;--gold:#d2a85a;--cream:#f0dcae;--display:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue','Noto Sans','Liberation Sans',Arial,sans-serif;--body:'SkolAssistant',Assistant,sans-serif;--ease:cubic-bezier(.2,.7,.2,1);
  background:var(--bg);color:var(--txt);font-family:var(--body);font-size:16px;font-weight:600;line-height:1.55;letter-spacing:.04em;-webkit-font-smoothing:antialiased;overflow-x:clip;position:relative;isolation:isolate;text-align:left}
.skol-sk *,.skol-sk *:before,.skol-sk *:after{box-sizing:border-box}
.skol-sk img{max-width:100%;height:auto;display:block;border:0}
.skol-sk h1,.skol-sk h2,.skol-sk h3,.skol-sk p,.skol-sk ul{margin:0;padding:0}
.skol-sk ul{list-style:none}
.skol-sk a{color:inherit;text-decoration:none}
.skol-sk a:focus-visible,.skol-sk summary:focus-visible,.skol-sk [tabindex]:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.skol-sk .sk-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skol-sk .sk-center{text-align:center}
.skol-sk .sk-h1,.skol-sk .sk-h2,.skol-sk h3{font-family:var(--display);font-weight:700;text-transform:none;letter-spacing:.02em;line-height:1.1;color:#fff}
.skol-sk .sk-h2{font-size:clamp(28px,7.8vw,44px);margin-bottom:16px}
.skol-sk .sk-h2 span{color:var(--red)}
.skol-sk .sk-eyebrow{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.skol-sk .sk-kicker{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#cfcfca}
.skol-sk .sk-small{font-size:13px;color:var(--mute);margin-top:16px;line-height:1.5}
.skol-sk .sk-section{padding:40px 16px;border-top:1px solid var(--line);max-width:1080px;margin:0 auto}

/* Reveal on scroll (only hides content once JS has confirmed it can reveal it again) */
.skol-sk.sk-js [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .75s ease var(--d,0s),transform .85s var(--ease) var(--d,0s)}
.skol-sk.sk-js [data-reveal].is-in{opacity:1;transform:none}

/* URGENCY BANNER: first element of the lander. Fully static apart from the ticking digits. Sticky only on the standalone page; static inside the store so it never fights the theme's own sticky header. */
.skol-sk .sk-ub{position:relative;z-index:30;display:flex;align-items:center;justify-content:center;gap:7px;min-height:38px;padding:7px 10px;overflow:hidden;background:#9a0000;color:#fff;font-family:var(--display);font-size:13px;font-weight:700;letter-spacing:normal;text-transform:none;line-height:1.1;white-space:nowrap;border-bottom:1px solid #000;box-shadow:0 2px 10px rgba(0,0,0,.45)}
.skol-sk .sk-ub[hidden]{display:none!important}
.skol-sk[data-sk-mode=offsite] .sk-ub{position:-webkit-sticky;position:sticky;top:0}
.skol-sk .sk-ub-ico{flex:0 0 auto}
.skol-sk .sk-ub-txt i{font-style:normal;padding:0 .45em;opacity:.85}
.skol-sk .sk-ub-clock{display:inline-flex;align-items:baseline;gap:1px;background:#000;color:#fff;border-radius:3px;padding:4px 7px;font-variant-numeric:tabular-nums}
.skol-sk .sk-ub-clock b{font-weight:700;font-size:13px;margin-left:4px}
.skol-sk .sk-ub-clock b:first-child{margin-left:0}
@media (min-width:480px){.skol-sk .sk-ub{font-size:14px}}

/* HERO */
.skol-sk .sk-hero{padding:16px 16px 24px;max-width:1080px;margin:0 auto;background:#000;text-align:center}
.skol-sk .sk-h1{font-size:clamp(29px,8.3vw,56px);line-height:1.1;text-wrap:balance}
.skol-sk .sk-h1-l{display:block}
.skol-sk .sk-h1 .sk-red{color:var(--red)}
.skol-sk .sk-hero .sk-kicker{font-size:12px;margin-top:8px}
.skol-sk .sk-hero-media{margin:8px auto 0;max-width:312px}
.skol-sk .sk-kit-img{width:100%;aspect-ratio:894/938;object-fit:contain}
.skol-sk .sk-buy{max-width:440px;margin:16px auto 0}
/* BUY UNIT (hero + final): one aligned block, hairline rows on the 8/16/24 scale */
.skol-sk .sk-unit{max-width:440px;margin:0 auto;text-align:left}
.skol-sk .sk-unit--final{margin-top:24px}
.skol-sk .sk-offer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.skol-sk .sk-offer-name{font-size:13px;line-height:1.4;color:var(--mute)}
.skol-sk .sk-offer-name b{display:block;font-family:var(--display);font-size:17px;font-weight:700;letter-spacing:.02em;color:#fff;margin-bottom:2px}
.skol-sk .sk-offer-price{display:flex;flex-direction:column;align-items:flex-end;flex:0 0 auto;text-align:right;line-height:1}
.skol-sk .sk-offer-price strong{font-family:var(--display);font-size:30px;font-weight:800;letter-spacing:.02em;color:var(--red)}
.skol-sk .sk-offer-price span{font-size:13px;color:#fff;margin-top:6px}
.skol-sk .sk-countdown{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.skol-sk .sk-countdown[hidden]{display:none!important}
.skol-sk .sk-cd-label{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.skol-sk .sk-cd-clock{font-family:var(--display);font-size:13px;font-weight:600;color:var(--mute);white-space:nowrap;font-variant-numeric:tabular-nums}
.skol-sk .sk-cd-clock b{font-size:17px;font-weight:700;color:#fff;margin-left:6px}
.skol-sk .sk-cd-clock b:first-child{margin-left:0}

/* CTA */
.skol-sk .sk-cta{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;width:100%;min-height:60px;margin-top:16px;padding:12px 16px;background:var(--red);color:#fff;border-radius:var(--rb);text-align:center;box-shadow:0 8px 22px rgba(225,18,27,.3);transition:background .15s,transform .1s;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.skol-sk .sk-cta:after{content:'';position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-18deg);animation:sk-cta-shine 4.8s ease-in-out infinite 1.5s;pointer-events:none}
.skol-sk .sk-cta:hover{background:#f01a24}
.skol-sk .sk-cta:active{transform:scale(.985)}
.skol-sk .sk-cta[aria-busy=true]{opacity:.7;pointer-events:none}
.skol-sk .sk-cta-main{font-family:var(--body);font-weight:800;font-size:20px;letter-spacing:.07em;text-transform:none;line-height:1}
.skol-sk .sk-cta-status{font-size:13px;color:#ffb3b3;text-align:center;margin-top:6px}
.skol-sk .sk-cta-status:empty{display:none}
.skol-sk .sk-rating{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;margin-top:8px;font-size:13px;color:#cfcfca}
.skol-sk .sk-stars{color:#f2c200;letter-spacing:2px;font-size:14px}
@keyframes sk-cta-shine{0%,62%{left:-60%}100%{left:130%}}

/* TICKER: same band as Find Your Signature (.ticker / .ticker-track) */
.skol-sk .sk-ticker{overflow:hidden;background:#000;border-top:1px solid #444;border-bottom:1px solid #444;padding:14px 0}
.skol-sk .sk-ticker-track{display:flex;width:max-content;animation:sk-ticker 40s linear infinite;font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:.03em;line-height:1.2;color:#ccc;white-space:nowrap}
.skol-sk .sk-ticker-track i{font-style:normal;color:var(--red);padding:0 .35em}
@keyframes sk-ticker{to{transform:translateX(-50%)}}

/* KIT: three cutouts laid across */
.skol-sk .sk-kit .sk-h2 span,.skol-sk .sk-reviews .sk-h2 span{display:block}
.skol-sk .sk-kit-list{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.skol-sk .sk-kit-list li{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:0 8px 16px;display:flex;flex-direction:column;align-items:center;text-align:center;overflow:hidden}
.skol-sk .sk-kit-stage{position:relative;width:calc(100% + 16px);height:196px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:16px;margin-bottom:10px;background:radial-gradient(ellipse 70% 62% at 50% 62%,rgba(160,102,42,.5),rgba(70,42,16,.22) 55%,transparent 75%)}
.skol-sk .sk-kit-stage:after{content:'';position:absolute;left:22%;right:22%;bottom:10px;height:12px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.9),transparent)}
.skol-sk .sk-kit-stage img{position:relative;z-index:1;width:auto;filter:drop-shadow(0 6px 10px rgba(0,0,0,.55))}
.skol-sk .sk-kit-wash{height:160px}
.skol-sk .sk-kit-oil{height:128px}
.skol-sk .sk-kit-list b{display:block;font-size:13px;line-height:1.2;color:#fff}
.skol-sk .sk-kit-list span{display:block;font-size:12px;color:var(--gold);margin-top:4px;line-height:1.25}
.skol-sk .sk-kit-list small{display:block;font-size:11px;color:#8d8d88;margin-top:4px;line-height:1.3}

/* ROUTINE: stacked step cards with floating products */
.skol-sk .sk-routine .sk-kicker{font-size:11px;margin:-6px 0 18px}
.skol-sk .sk-steps{display:grid;gap:16px}
.skol-sk .sk-step{position:relative;display:grid;grid-template-columns:1fr 128px;align-items:center;gap:8px;min-height:236px;padding:16px 8px 16px 16px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:radial-gradient(ellipse 55% 75% at 84% 62%,rgba(160,102,42,.5),transparent 70%),var(--card)}
.skol-sk .sk-num{display:block;font-family:var(--display);font-weight:800;font-size:30px;line-height:1;color:var(--red)}
.skol-sk .sk-step h3{font-size:24px;margin-top:2px}
.skol-sk .sk-step em{display:inline-block;font-style:normal;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;background:#2a2a2a;color:#e6e6e2;border-radius:20px;padding:5px 10px;margin-top:8px;white-space:nowrap}
.skol-sk .sk-step ul{margin-top:12px}
.skol-sk .sk-step li{position:relative;padding-left:16px;font-size:15px;font-weight:600;line-height:1.3;color:#eee;margin:8px 0 0}
.skol-sk .sk-step li:before{content:'';position:absolute;left:0;top:.42em;width:7px;height:7px;border-radius:50%;background:var(--red)}
.skol-sk .sk-routine-foot{text-align:center;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#cfcfca;margin-top:16px}

.skol-sk .sk-float{position:relative;height:236px;align-self:stretch}
.skol-sk .sk-float-obj{position:absolute;left:50%;bottom:30px;display:block;transform-origin:50% 85%;animation:sk-bob 4.8s ease-in-out infinite;will-change:transform}
.skol-sk .sk-float-obj img{width:auto;filter:drop-shadow(0 10px 14px rgba(0,0,0,.6))}
.skol-sk .sk-float--wash .sk-float-obj img{height:186px}
.skol-sk .sk-float--oil .sk-float-obj img{height:156px}
.skol-sk .sk-float--oil .sk-float-obj{animation-delay:-2.1s;animation-duration:5.4s}
.skol-sk .sk-float-shadow{position:absolute;left:50%;bottom:16px;width:84px;height:14px;margin-left:-42px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.95),rgba(0,0,0,0));animation:sk-breathe 4.8s ease-in-out infinite;will-change:transform,opacity}
.skol-sk .sk-float--oil .sk-float-shadow{width:70px;margin-left:-35px;animation-delay:-2.1s;animation-duration:5.4s}
@keyframes sk-bob{0%,100%{transform:translateX(-50%) translateY(0) rotate(-2.5deg)}30%{transform:translateX(calc(-50% + 3px)) translateY(-9px) rotate(.5deg)}55%{transform:translateX(calc(-50% + 2px)) translateY(-15px) rotate(2.5deg)}80%{transform:translateX(calc(-50% - 2px)) translateY(-6px) rotate(0deg)}}
@keyframes sk-breathe{0%,100%{transform:scale(1);opacity:1}55%{transform:scale(.7);opacity:.5}}
/* glint sweeps across the bottle only (masked to the cutout's alpha) */
.skol-sk .sk-glint{position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 38%,rgba(255,240,215,.42) 50%,transparent 62%);background-size:320% 100%;background-repeat:no-repeat;animation:sk-glint 5.5s ease-in-out infinite 1s;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;mix-blend-mode:screen}
.skol-sk .sk-float--wash .sk-glint{-webkit-mask-image:url(https://skol-sample-kit.pages.dev/assets/cut-wash.webp?v=14);mask-image:url(https://skol-sample-kit.pages.dev/assets/cut-wash.webp?v=14)}
.skol-sk .sk-float--oil .sk-glint{-webkit-mask-image:url(https://skol-sample-kit.pages.dev/assets/cut-oil-vb.webp?v=14);mask-image:url(https://skol-sample-kit.pages.dev/assets/cut-oil-vb.webp?v=14);animation-delay:3.4s}
@keyframes sk-glint{0%,55%{background-position:115% 0}100%{background-position:-15% 0}}
/* foam bubbles drifting up around the wash */
.skol-sk .sk-foam,.skol-sk .sk-motes{position:absolute;inset:0;pointer-events:none}
.skol-sk .sk-foam i{position:absolute;bottom:40px;width:var(--s,9px);height:var(--s,9px);border-radius:50%;border:1px solid rgba(255,255,255,.55);background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.9) 0 14%,rgba(255,255,255,.12) 30%,rgba(255,255,255,.04) 70%);opacity:0;animation:sk-bubble 5.2s ease-in infinite}
.skol-sk .sk-foam i:nth-child(1){left:12%;--s:8px;animation-delay:0s}
.skol-sk .sk-foam i:nth-child(2){left:78%;--s:11px;animation-delay:-1.1s}
.skol-sk .sk-foam i:nth-child(3){left:22%;--s:6px;animation-delay:-2.3s}
.skol-sk .sk-foam i:nth-child(4){left:70%;--s:7px;animation-delay:-3.2s}
.skol-sk .sk-foam i:nth-child(5){left:6%;--s:12px;animation-delay:-4.1s}
.skol-sk .sk-foam i:nth-child(6){left:86%;--s:6px;animation-delay:-4.7s}
@keyframes sk-bubble{0%{transform:translate(0,0) scale(.6);opacity:0}15%{opacity:.85}70%{opacity:.6}100%{transform:translate(6px,-160px) scale(1.05);opacity:0}}
/* warm motes rising off the oil */
.skol-sk .sk-motes i{position:absolute;bottom:46px;width:4px;height:4px;border-radius:50%;background:#f3c779;box-shadow:0 0 8px 2px rgba(243,170,70,.7);opacity:0;animation:sk-mote 6s ease-out infinite}
.skol-sk .sk-motes i:nth-child(1){left:18%;animation-delay:0s}
.skol-sk .sk-motes i:nth-child(2){left:76%;animation-delay:-1.3s}
.skol-sk .sk-motes i:nth-child(3){left:30%;animation-delay:-2.6s}
.skol-sk .sk-motes i:nth-child(4){left:66%;animation-delay:-3.8s}
.skol-sk .sk-motes i:nth-child(5){left:48%;animation-delay:-4.9s}
@keyframes sk-mote{0%{transform:translate(0,0);opacity:0}20%{opacity:.9}100%{transform:translate(-8px,-150px);opacity:0}}

/* SCROLL-IN TYPE: same transform maths as the Find Your Signature "presence" section */

/* FRAGRANCES: mood backgrounds with floating bottle cutouts */
.skol-sk .sk-scents{display:grid;gap:16px}
.skol-sk .sk-scents .sk-h2{margin-bottom:4px}
.skol-sk .sk-scent{position:relative;isolation:isolate;border-radius:var(--r);overflow:hidden;text-align:center;padding:24px 16px 16px;border:1px solid var(--line);background:#0a0705}
/* photo background with a slow Ken Burns drift, under a dark overlay for legible type */
.skol-sk .sk-scent:before{content:'';position:absolute;inset:0;z-index:0;background-size:cover;background-position:50% 100%;background-repeat:no-repeat;transform-origin:50% 85%;animation:sk-kb 24s ease-in-out infinite alternate;will-change:transform}
.skol-sk .sk-scent--vb:before{background-image:url(https://skol-sample-kit.pages.dev/assets/scent-bg-vb.webp?v=14)}
.skol-sk .sk-scent--ro:before{background-image:url(https://skol-sample-kit.pages.dev/assets/scent-bg-ro.webp?v=14);animation-delay:-9s}
.skol-sk .sk-scent:after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.74) 0%,rgba(0,0,0,.5) 30%,rgba(0,0,0,.12) 52%,rgba(0,0,0,0) 66%,rgba(0,0,0,.5) 100%)}
.skol-sk .sk-scent>*{position:relative;z-index:1}
@keyframes sk-kb{0%{transform:scale(1.04) translate(0,0)}100%{transform:scale(1.12) translate(-2%,-1.2%)}}
.skol-sk .sk-scent-tag{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.skol-sk .sk-scent h3{font-size:clamp(38px,11vw,64px);line-height:1.02;margin:6px 0 12px;text-shadow:0 2px 18px rgba(0,0,0,.6)}
.skol-sk .sk-scent--vb h3 span{color:var(--cream);display:block}
.skol-sk .sk-scent--ro h3 span{color:var(--gold);display:block}
.skol-sk .sk-notes{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:4px 9px;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#f3ead8;border-top:1px solid rgba(210,168,90,.45);border-bottom:1px solid rgba(210,168,90,.45);padding:9px 0}
.skol-sk .sk-notes i{width:5px;height:5px;border-radius:50%;background:var(--gold);display:inline-block}
.skol-sk .sk-scent-stage{position:relative;height:262px;margin-top:6px}
.skol-sk .sk-sobj{position:absolute;bottom:30px;display:block;transform-origin:50% 85%;animation:sk-bob 5s ease-in-out infinite;will-change:transform}
.skol-sk .sk-sobj img{width:auto;filter:drop-shadow(0 14px 18px rgba(0,0,0,.7))}
.skol-sk .sk-sobj--wash{left:39%}
.skol-sk .sk-sobj--wash img{height:212px}
.skol-sk .sk-sobj--oil{left:62%;animation-delay:-2.4s;animation-duration:5.6s}
.skol-sk .sk-sobj--oil img{height:170px}
.skol-sk .sk-sobj--solo{left:50%;animation-duration:5.2s}
.skol-sk .sk-sobj--solo img{height:206px}
.skol-sk .sk-scent .sk-float-shadow{bottom:16px}
.skol-sk .sk-fs-a{left:39%!important;width:90px!important;margin-left:-45px!important}
.skol-sk .sk-fs-b{left:62%!important;width:72px!important;margin-left:-36px!important;animation-delay:-2.4s!important;animation-duration:5.6s!important}
.skol-sk .sk-fs-c{width:86px!important;margin-left:-43px!important;animation-duration:5.2s!important}
.skol-sk .sk-scent-in{position:relative;font-size:13px;font-weight:700;color:#f0e4cc;letter-spacing:.04em}

/* REVIEWS */
.skol-sk .sk-rev-summary{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:#cfcfca;margin:-6px 0 6px}
.skol-sk .sk-rev-cue{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);text-align:right;margin-bottom:8px}
.skol-sk .sk-rev-strip{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;padding:2px 16px 12px;margin:0 -16px;scroll-padding:0 16px;scrollbar-width:thin;scrollbar-color:var(--gold) #1a1a1a}
.skol-sk .sk-rev-strip::-webkit-scrollbar{height:5px}
.skol-sk .sk-rev-strip::-webkit-scrollbar-thumb{background:var(--gold);border-radius:9px}
.skol-sk .sk-rev{flex:0 0 84%;max-width:330px;scroll-snap-align:start;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:flex;flex-direction:column}
.skol-sk .sk-rev-meta{display:flex;align-items:center;gap:9px;font-size:13px}
.skol-sk .sk-rev-av{width:30px;height:30px;border-radius:50%;background:#222;color:#ddd;display:grid;place-items:center;font-weight:700;font-size:13px;flex:0 0 30px}
.skol-sk .sk-rev-meta b{display:block;color:#fff;line-height:1.2}
.skol-sk .sk-rev-meta small{font-size:11px;color:#63c37b;font-weight:700;letter-spacing:.04em}
.skol-sk .sk-rev-date{margin-left:auto;font-size:11px;color:#8d8d88}
.skol-sk .sk-rev .sk-stars{margin-top:8px;font-size:13px}
.skol-sk .sk-rev h3{font-family:inherit;text-transform:none;font-size:15px;font-weight:700;letter-spacing:0;line-height:1.3;margin:4px 0 4px}
.skol-sk .sk-rev p{font-size:14px;line-height:1.5;color:#cfcfca;white-space:pre-line;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.skol-sk .sk-rev img{margin-top:auto;padding-top:12px;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:4px;box-sizing:content-box;padding-left:0;padding-right:0}
.skol-sk .sk-rev-prod{font-size:11px;color:#8d8d88;margin-top:8px;line-height:1.35}
.skol-sk .sk-btn-ghost{display:flex;align-items:center;justify-content:center;min-height:52px;margin-top:16px;border:1px solid #5a5a55;border-radius:var(--rb);font-family:var(--body);font-weight:800;font-size:17px;letter-spacing:.07em;text-transform:none;color:#fff;-webkit-tap-highlight-color:transparent}
.skol-sk .sk-btn-ghost:active{background:#111}

/* FAQ */
.skol-sk .sk-faq details{border-bottom:1px solid var(--line)}
.skol-sk .sk-faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;min-height:58px;padding:12px 40px 12px 0;font-weight:700;font-size:16px;line-height:1.3;color:#fff;position:relative;-webkit-tap-highlight-color:transparent}
.skol-sk .sk-faq summary::-webkit-details-marker{display:none}
.skol-sk .sk-faq summary:after{content:'+';position:absolute;right:2px;top:50%;transform:translateY(-52%);width:30px;text-align:center;font-size:24px;color:var(--gold);font-weight:400}
.skol-sk .sk-faq details[open] summary:after{content:'\2013'}
.skol-sk .sk-faq details p{font-size:15px;color:#cfcfca;padding:0 0 16px;line-height:1.55}
.skol-sk .sk-faq details p b{color:#fff}
.skol-sk .sk-faq-list{padding:0 0 16px}
.skol-sk .sk-faq-list li{position:relative;padding-left:16px;font-size:15px;color:#cfcfca;margin:4px 0}
.skol-sk .sk-faq-list li:before{content:'';position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--red)}

/* FINAL */
.skol-sk .sk-final{padding:40px 16px 48px;border-top:1px solid var(--line);max-width:560px;margin:0 auto;text-align:center}
.skol-sk .sk-final>img{max-width:260px;margin:0 auto 4px}
.skol-sk .sk-final .sk-h2 span{display:block}

/* STICKY (mobile) */
.skol-sk .sk-sticky{position:fixed;left:0;right:0;bottom:0;z-index:2147483000;display:flex;align-items:center;gap:12px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(8,8,8,.96);border-top:1px solid #2e2e2e;box-shadow:0 -8px 24px rgba(0,0,0,.5);transform:translateY(110%);transition:transform .25s ease;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.skol-sk .sk-sticky.is-on{transform:none}
.skol-sk .sk-sticky-txt{display:flex;flex-direction:column;line-height:1.15;flex:0 0 auto}
.skol-sk .sk-sticky-txt b{font-family:var(--display);font-weight:800;font-size:20px;color:var(--red);text-transform:none}
.skol-sk .sk-sticky-txt span{font-size:12px;color:#fff;font-weight:700}
.skol-sk .sk-cta--sticky{margin:0;min-height:52px;flex:1 1 auto;padding:8px 10px}
.skol-sk .sk-cta--sticky .sk-cta-main{font-size:20px}

@media (min-width:760px){
  .skol-sk .sk-hero{padding:28px 32px 44px}
  .skol-sk .sk-hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:36px;align-items:center;margin-top:18px}
  .skol-sk .sk-hero-media{max-width:480px}
  .skol-sk .sk-section{padding:64px 32px}
  .skol-sk .sk-kit-stage{height:270px}
  .skol-sk .sk-kit-wash{height:236px}
  .skol-sk .sk-kit-oil{height:189px}
  .skol-sk .sk-kit-list b{font-size:15px}
  .skol-sk .sk-steps{grid-template-columns:1fr 1fr}
  .skol-sk .sk-step{grid-template-columns:1fr 170px}
  .skol-sk .sk-float{height:260px}
  .skol-sk .sk-float--wash .sk-float-obj img{height:210px}
  .skol-sk .sk-float--oil .sk-float-obj img{height:176px}
  .skol-sk .sk-scents{grid-template-columns:1fr 1fr}
  .skol-sk .sk-scents .sk-eyebrow,.skol-sk .sk-scents .sk-h2{grid-column:1/-1}
  .skol-sk .sk-scent-stage{height:320px}
  .skol-sk .sk-rev{flex-basis:300px}
  .skol-sk .sk-sticky{display:none}
}
@media (prefers-reduced-motion:reduce){
  .skol-sk *,.skol-sk *:before,.skol-sk *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .skol-sk.sk-js [data-reveal]{opacity:1;transform:none}
  .skol-sk .sk-foam,.skol-sk .sk-motes,.skol-sk .sk-glint{display:none}
  .skol-sk .sk-float-obj{transform:translateX(-50%)}
  .skol-sk .sk-sobj{transform:translateX(-50%)}
  .skol-sk .sk-ticker-track{transform:none}
}

/* Low-key countdown line directly under ADD TO CART buttons (same SALE_END_ISO deadline as the banner). Space is reserved while JS starts, so nothing shifts. */
.skol-sk .sk-atc-cd{margin:10px 0 0;font-family:var(--body);font-size:12px;font-weight:600;line-height:16px;letter-spacing:.06em;color:#8e8e89;text-align:center;font-variant-numeric:tabular-nums;white-space:nowrap}
.skol-sk .sk-atc-cd[hidden]{display:block!important;visibility:hidden}
.skol-sk .sk-atc-cd b{font-weight:700;color:#c8c8c3}
/* Monochrome urgency bar (D concepts + /routine/): same markup and timer as .sk-ub, black and white, static (scrolls away like A's in-store bar) */
.skol-sk .sk-ub.sk-ub--mono{background:#000;color:#e9e9e6;border-bottom:1px solid #262626;box-shadow:none}
.skol-sk .sk-ub.sk-ub--mono[hidden]{display:flex!important;visibility:hidden}
.skol-sk[data-sk-mode=offsite] .sk-ub.sk-ub--mono,.skol-sk .sk-ub.sk-ub--mono{position:relative}
.skol-sk .sk-ub--mono .sk-ub-ico{color:#bdbdb8}
.skol-sk .sk-ub--mono .sk-ub-clock{background:transparent;border:1px solid #3a3a3a;color:#fff}

/* ===== concept common ===== */
.skol-d .sk-cta-main{letter-spacing:.09em}
.skol-d .sk-h2{text-wrap:balance}
.skol-d .sk-hero-kit{display:block;width:100%;max-width:320px;margin:8px auto 0;aspect-ratio:894/938;object-fit:contain}
.skol-d .d-buy{padding:32px 16px 40px;max-width:560px;margin:0 auto;text-align:center}
.skol-d .d-buy .sk-unit{margin-top:8px}
.skol-d .d-h1{font-family:var(--display);font-weight:700;letter-spacing:.02em;line-height:1.08;color:#fff;font-size:clamp(30px,8.6vw,56px);text-wrap:balance}
.skol-d .d-h1 .sk-red{color:var(--red)}
.skol-d .d-h1>span{display:block}
/* veteran + SA USP */
.skol-d .d-usp{display:grid;gap:8px;margin:24px auto 0;max-width:440px;text-align:left}
.skol-d .d-usp li{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);font-size:14px;line-height:1.35;color:#e8e8e4}
.skol-d .d-usp svg{flex:0 0 22px;color:var(--gold)}
/* kit contents rows */
.skol-d .d-items{display:grid;gap:8px;max-width:440px;margin:16px auto 0;text-align:left}
.skol-d .d-items li{display:flex;align-items:center;gap:14px;padding:10px 14px 10px 8px;border:1px solid var(--line);border-radius:var(--r);background:radial-gradient(ellipse 40% 90% at 12% 60%,rgba(160,102,42,.38),transparent 70%),var(--card)}
.skol-d .d-items-img{flex:0 0 56px;height:96px;display:flex;align-items:flex-end;justify-content:center}
.skol-d .d-items-img img{width:auto;height:88px;filter:drop-shadow(0 6px 8px rgba(0,0,0,.6))}
.skol-d .d-items li:first-child .d-items-img img{height:96px}
.skol-d .d-items-txt{display:flex;flex-direction:column;line-height:1.3}
.skol-d .d-items-txt b{font-family:var(--display);font-size:16px;color:#fff;letter-spacing:.02em}
.skol-d .d-items-txt em{font-style:normal;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-top:3px}
.skol-d .d-items-txt span{font-size:14px;color:#cfcfca;margin-top:5px}
/* reviews: heading spans on their own line */
.skol-d .sk-reviews .sk-h2 span{display:block}
.skol-d .d-scroll-cue{display:inline-flex;flex-direction:column;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:#cfcfca}
.skol-d .d-scroll-cue svg{animation:d-nudge 1.8s ease-in-out infinite}
@keyframes d-nudge{0%,100%{transform:translateY(0);opacity:.6}50%{transform:translateY(6px);opacity:1}}
@media (prefers-reduced-motion:reduce){.skol-d .d-scroll-cue svg{animation:none}}
/* final ADD TO CART timer: digits a touch larger than the 12px label (line-height stays 16px, so no layout shift) */
.skol-d .sk-final .sk-atc-cd b{font-size:14px;line-height:1;letter-spacing:.03em}

/* ===== d1 ===== */
/* D1: scroll-to-unbox. Geometry (px, before the rig scale): box W=230 H=140 D=160. */
.skol-d1{--W:230px;--H:140px;--D:160px}
.skol-d1 .d1-stage{position:relative;height:auto;background:#000}
.skol-d1 .d1-scene{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:radial-gradient(ellipse 90% 60% at 50% 62%,#0d0a07 0%,#000 70%)}
.skol-d1.d1-js .d1-stage{height:560vh}
.skol-d1.d1-js .d1-scene{position:-webkit-sticky;position:sticky;top:0}
.skol-d1 .d1-glow{position:absolute;left:50%;top:var(--glowY,58%);width:560px;height:560px;margin:-280px 0 0 -280px;border-radius:50%;background:radial-gradient(closest-side,rgba(226,150,62,.42),rgba(160,90,30,.16) 45%,transparent 72%);opacity:var(--glow,0);pointer-events:none}
.skol-d1 .d1-head{position:absolute;left:0;right:0;top:0;padding:max(22px,env(safe-area-inset-top)) 16px 0;text-align:center;z-index:3;animation:d1-in 1.1s var(--ease) both .15s}
.skol-d1 .d1-rig{position:absolute;left:50%;top:0;width:0;height:0;transform-origin:0 0;z-index:1}
.skol-d1 .d1-float{position:absolute;left:0;top:0}
.skol-d1 .d1-cam{position:absolute;left:-200px;top:-420px;width:400px;height:420px;perspective:1100px;perspective-origin:200px -360px;animation:d1-reveal 1.6s ease-out backwards}
.skol-d1 .d1-box{position:absolute;left:calc(200px - var(--W)/2);top:calc(420px - var(--H));width:var(--W);height:var(--H);transform-style:preserve-3d}
.skol-d1 .d1-f{position:absolute;left:0;top:0;width:var(--W);height:var(--H)}
.skol-d1 .d1-f--front{transform:translateZ(calc(var(--D)/2));background:linear-gradient(160deg,#1d1d1d 0%,#0c0c0c 46%,#050505 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),inset 0 1px 0 rgba(255,255,255,.12);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;overflow:hidden}
.skol-d1 .d1-logo{height:88px;width:auto;opacity:.92;margin-top:8px}
.skol-d1 .d1-front-txt{font-size:9px;font-weight:800;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);padding-left:.34em}
.skol-d1 .d1-sheen{position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.09) 48%,transparent 60%);background-size:300% 100%;animation:d1-sheen 5s ease-in-out infinite 1.4s}
.skol-d1 .d1-f--back{transform:rotateY(180deg) translateZ(calc(var(--D)/2));background:linear-gradient(180deg,#2a1c10 0%,#0a0806 70%)}
.skol-d1 .d1-f--left,.skol-d1 .d1-f--right{width:var(--D);left:calc((var(--W) - var(--D))/2);background:linear-gradient(180deg,#101010,#030303);box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.skol-d1 .d1-f--left{transform:rotateY(-90deg) translateZ(calc(var(--W)/2))}
.skol-d1 .d1-f--right{transform:rotateY(90deg) translateZ(calc(var(--W)/2))}
.skol-d1 .d1-f--bottom{height:var(--D);top:calc((var(--H) - var(--D))/2);transform:rotateX(-90deg) translateZ(calc(var(--H)/2));background:#0b0805;overflow:hidden}
.skol-d1 .d1-inner{position:absolute;inset:0;background:radial-gradient(ellipse 60% 55% at 50% 50%,rgba(255,190,110,.75),rgba(200,120,50,.25) 55%,transparent 80%);opacity:var(--glow,0)}
.skol-d1 .d1-hinge{position:absolute;left:0;top:0;width:var(--W);height:0;transform-style:preserve-3d;transform:translateZ(calc(var(--D)/-2)) rotateX(0deg)}
.skol-d1 .d1-lid{position:absolute;left:-2px;top:0;width:calc(var(--W) + 4px);height:calc(var(--D) + 2px);transform-origin:50% 0;transform:rotateX(90deg);background:linear-gradient(180deg,#0e0e0e 0%,#222 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center}
.skol-d1 .d1-lid img{height:92px;width:auto;opacity:.16}
.skol-d1 .d1-lip{position:absolute;left:-2px;top:0;width:calc(var(--W) + 4px);height:16px;transform:translateZ(calc(var(--D) + 2px));background:linear-gradient(180deg,#262626,#111);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),0 3px 6px rgba(0,0,0,.6)}
/* Shopify (Dawn) base.css hides empty elements: `div:empty{display:none}`. On the live store that removed the box's back, left and right
   faces, the lid lip and the glow (all empty divs), so only the lid and the front were left floating as flat panels. Force them back on. */
.skol-d1 .d1-f:empty,.skol-d1 .d1-lip:empty,.skol-d1 .d1-glow:empty{display:block}
/* explicit WebKit prefixes for the 3D context (older iOS Safari) */
.skol-d1 .d1-cam{-webkit-perspective:1100px;-webkit-perspective-origin:200px -360px}
.skol-d1 .d1-box,.skol-d1 .d1-hinge{-webkit-transform-style:preserve-3d}
/* Products are sized at their FINAL display size (wash 260px / oils 200px tall, sources ~3x that) and only ever scaled DOWN (scale <= 1).
   No filter on them; will-change is set by d1.js only while they move and removed when the animation lands. */
/* 2D layer above the 3D box (NOT inside the perspective context: Chrome rasterises perspective layers at reduced resolution). d1.js clips each product at the box front rim to fake the occlusion. */
.skol-d1 .d1-items{position:absolute;left:0;top:0;width:0;height:0}
.skol-d1 .d1-p{position:absolute;left:0;top:0;transform-origin:50% 100%;visibility:hidden}
.skol-d1 .d1-p img{display:block;width:auto;max-width:none}
.skol-d1 .d1-p--wash img{height:260px}
.skol-d1 .d1-p--vb img,.skol-d1 .d1-p--ro img{height:200px}
.skol-d1 .d1-row{position:absolute;left:0;top:0;width:0;height:0;z-index:1;visibility:hidden}
.skol-d1 .d1-row img{position:absolute;left:0;top:0;width:auto;max-width:none;display:block}
.skol-d1 .d1-shadow{position:absolute;left:-150px;top:-22px;width:300px;height:44px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.95),rgba(0,0,0,.5) 55%,transparent)}
.skol-d1 .d1-rays{position:absolute;left:-210px;top:-560px;width:420px;height:440px;background:conic-gradient(from 160deg at 50% 100%,transparent 0deg,rgba(255,196,120,.16) 8deg,transparent 15deg,rgba(255,196,120,.1) 22deg,transparent 28deg,rgba(255,196,120,.18) 36deg,transparent 44deg);-webkit-mask-image:linear-gradient(0deg,#000 10%,transparent 85%);mask-image:linear-gradient(0deg,#000 10%,transparent 85%);opacity:var(--rays,0);transform-origin:50% 100%;animation:d1-rays 9s ease-in-out infinite alternate;pointer-events:none}
.skol-d1 .d1-caps{position:absolute;left:16px;right:16px;bottom:calc(26px + env(safe-area-inset-bottom));height:124px;text-align:center;pointer-events:none;z-index:2}
.skol-d1 .d1-cap{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;opacity:0}
.skol-d1 .d1-cap--cue{opacity:1;bottom:6px}
.skol-d1 .d1-n{font-size:11px;font-weight:800;letter-spacing:.2em;color:#8d8d88;margin-bottom:6px}
.skol-d1 .d1-cap b{font-family:var(--display);font-size:24px;line-height:1.1;color:#fff;letter-spacing:.02em}
.skol-d1 .d1-cap em{font-style:normal;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-top:6px}
.skol-d1 .d1-line{font-size:16px;line-height:1.4;color:#e4e4df;margin-top:8px;max-width:330px}
.skol-d1 .d1-unit{position:absolute;left:16px;right:16px;bottom:calc(12px + env(safe-area-inset-bottom));max-width:440px;margin:0 auto;z-index:4;opacity:0;visibility:hidden}
.skol-d1 .d1-unit .sk-offer{padding:12px 0}
.skol-d1 .d1-unit .sk-countdown{padding:10px 0}
.skol-d1 .d1-unit .sk-cta{margin-top:12px}
.skol-d1 .d1-trust{padding-top:24px;padding-bottom:32px;border-top:1px solid var(--line)}
.skol-d1 .d1-trust .sk-rating{margin-top:0}
@keyframes d1-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes d1-reveal{from{opacity:0}to{opacity:1}}
@keyframes d1-sheen{0%,60%{background-position:120% 0}100%{background-position:-20% 0}}
@keyframes d1-rays{from{transform:rotate(-4deg)}to{transform:rotate(4deg)}}
/* no JS / reduced motion: the scene shows its end state (d1.js sets it) and is not pinned */
.skol-d1:not(.d1-js) .d1-unit{position:relative;left:auto;right:auto;bottom:auto;opacity:1;visibility:visible;margin-top:24px}
.skol-d1:not(.d1-js) .d1-scene{height:auto;padding-bottom:24px}
.skol-d1:not(.d1-js) .d1-head{position:relative}
.skol-d1:not(.d1-js) .d1-rig,.skol-d1:not(.d1-js) .d1-glow{display:none}
.skol-d1 .d1-static{display:none}
.skol-d1:not(.d1-js) .d1-static{display:block;width:100%;max-width:320px;margin:0 auto;padding-top:8px;aspect-ratio:894/938;object-fit:contain}
.skol-d1:not(.d1-js) .d1-caps{display:none}
@media (prefers-reduced-motion:reduce){.skol-d1 .d1-cam,.skol-d1 .d1-rays,.skol-d1 .d1-head{animation:none!important}}
@media (min-width:760px){.skol-d1 .d1-unit{left:50%;right:auto;width:440px;margin-left:-220px}}