/* The VRL Sale page (/vrl-sale/). Mobile first. VRL tokens, VRL lighting (4-layer buttons, shadow-ring cards, lit
   surfaces, dot field + grain). One accent: VRL blue as a single-hue gradient. Imagery: one studio render of the three
   vials (hero, white panel) and the store photos re-lettered VRL-n (img/), shown untouched on their own near-white
   ground (#fdfdfb) so no edge shows — no tilt, no blend modes, no filters. */

.vrl-sale{--vs-navy:#010f2d;--vs-ink:#0a1f47;--vs-sub:#4c5260;--vs-muted:#6d7484;--vs-blue:#1d4ed8;--vs-ring:0 0 0 1px rgba(16,20,30,.055);--vs-sticky:76px;background:var(--vrl-bg-base,#fdfdfe);color:var(--vs-ink);font-family:var(--vrl-font-body,'Manrope',system-ui,sans-serif)}
/* Room for the bottom sticky bar goes under the footer, so the page end (copyright) clears it without a gap mid-page. */
body.vrl-sale-page--on footer.footer{padding-bottom:calc(40px + var(--vs-sticky-room,76px) + env(safe-area-inset-bottom,0px))}
.vrl-sale *,.vrl-sale *::before,.vrl-sale *::after{box-sizing:border-box}
.vrl-sale img{max-width:100%}
.vrl-sale-nowrap{white-space:nowrap}

/* Buttons — four-layer lighting, key light from the top */
.vrl-sale-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border:0;border-radius:999px;font:700 15px/1.1 var(--vrl-font-ui,'Manrope',system-ui,sans-serif);letter-spacing:-.005em;text-decoration:none!important;cursor:pointer;white-space:nowrap;transition:transform .15s ease,box-shadow .15s ease,background .15s ease;-webkit-tap-highlight-color:transparent}
.vrl-sale-btn--dark{background:linear-gradient(180deg,#262a33,#1c1f26);color:#fdfdfe!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 1px 2px rgba(16,20,30,.3),0 4px 12px -2px rgba(16,20,30,.25),0 0 0 1px #12141a}
.vrl-sale-btn--dark:hover{background:linear-gradient(180deg,#2e333e,#22262e);transform:translateY(-1px)}
.vrl-sale-btn--light{background:linear-gradient(180deg,#fdfdfe,#f4f6f9);color:var(--vs-ink)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 1px 2px rgba(16,20,30,.12),0 4px 12px -4px rgba(16,20,30,.12),0 0 0 1px #d1d5dd}
.vrl-sale-btn--light:hover{background:#fff;transform:translateY(-1px)}
.vrl-sale-btn:focus-visible{outline:3px solid #8db4f3;outline-offset:3px}
.vrl-sale-btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}

/* Hero — lit sky surface with a dot field and grain */
.vrl-sale-hero{position:relative;isolation:isolate;overflow:hidden;padding:24px 0 30px;background:radial-gradient(90% 120% at 0% 0%,#ffffff 0%,rgba(255,255,255,0) 55%),radial-gradient(70% 90% at 100% 100%,#cfe4fc 0%,rgba(207,228,252,0) 62%),linear-gradient(165deg,#f2f7fe 0%,#e2edfc 100%)}
.vrl-sale-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.55;background-image:radial-gradient(circle,rgba(29,78,216,.16) 0 1px,transparent 1.4px),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");background-size:22px 22px,140px 140px;-webkit-mask-image:linear-gradient(180deg,#000 40%,transparent);mask-image:linear-gradient(180deg,#000 40%,transparent)}
.vrl-sale-hero__inner{display:grid;gap:8px}
.vrl-sale-hero__copy{position:relative;z-index:2;max-width:620px}
.vrl-sale-hero__eyebrow{margin:0 0 10px;color:var(--vs-blue);font:800 12px/1.2 var(--vrl-font-ui,sans-serif);letter-spacing:.12em;text-transform:uppercase}
.vrl-sale-hero__title{margin:18px 0 10px;color:var(--vs-navy);font:800 clamp(30px,7.4vw,54px)/1.04 var(--vrl-font-display,'Archivo',system-ui,sans-serif);letter-spacing:-.03em;text-wrap:balance}
.vrl-sale-hero__sub{margin:0 0 20px;max-width:34rem;color:var(--vs-sub);font-size:16px;line-height:1.55}
.vrl-sale-hero__actions{display:flex;flex-wrap:wrap;gap:10px}
.vrl-sale-hero__actions .vrl-sale-btn{flex:1 1 160px}
/* Hero photo: one studio render (white sweep) presented as a white studio panel on the lit surface. */
.vrl-sale-hero__art{position:relative;z-index:1;margin:14px 0 0;overflow:hidden;border-radius:22px;background:#fff;box-shadow:0 0 0 1px rgba(16,20,30,.06),0 4px 10px -2px rgba(16,20,30,.06),0 24px 56px -18px rgba(10,31,71,.28)}
.vrl-sale-hero__art picture,.vrl-sale-hero__art img{display:block;width:100%;height:auto}

/* Banner card — the hero card family (one link, gradient + soft top-left glow, lighter rim, coloured drop, white mark tile) */
.vrl-sale-card{box-sizing:border-box;display:grid;grid-template-columns:48px minmax(0,1fr) 15px;align-items:center;gap:10px;padding:12px;border:1px solid #6f9fe6;border-radius:14px;background:radial-gradient(120% 140% at 0% 0%,#3b7be6 0%,#2563d0 38%,rgba(0,0,0,0) 72%),linear-gradient(112deg,#1d55bd,#0c2a66);box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 10px 26px -14px #2563d0;color:#fff!important;text-decoration:none!important;font-family:var(--vrl-font-ui,sans-serif);transition:transform .15s ease,box-shadow .15s ease}
.vrl-sale-card:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 14px 30px -14px #2563d0}
.vrl-sale-card:focus-visible{outline:3px solid #8db4f3;outline-offset:3px}
.vrl-sale-card__mark{display:flex;flex-direction:column;align-items:center;justify-content:center;width:48px;height:54px;border-radius:12px;background:linear-gradient(145deg,#f4f8ff,#c9dbf8);box-shadow:inset 0 1px 0 #fff;color:#123b8a}
.vrl-sale-card__mark strong{display:block;color:#123b8a;font-size:16px;font-weight:900;line-height:1;letter-spacing:-.03em}
.vrl-sale-card__mark em{display:block;margin-top:3px;color:#123b8a;font-size:8px;font-style:normal;font-weight:800;line-height:1;letter-spacing:.14em}
.vrl-sale-card__copy{display:block;min-width:0}
.vrl-sale-card__eyebrow{display:flex;align-items:center;margin:0 0 3px;color:#c7dbfb;font-size:7px;font-weight:750;line-height:1.3;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.vrl-sale-card__eyebrow::before{content:"";flex:none;width:5px;height:5px;margin-right:7px;border-radius:50%;background:#9cc0f7;box-shadow:0 0 0 3px rgba(156,192,247,.25)}
.vrl-sale-card__title{display:block;color:#fff;font-size:19px;font-weight:700;line-height:1.1;letter-spacing:-.025em}
.vrl-sale-card__fine{display:block;margin-top:4px;color:#e1ecfd;font-size:10px;line-height:1.4}
.vrl-sale-card__go{color:#c7dbfb;font-size:21px;font-weight:700;line-height:1;transition:transform .15s ease}
.vrl-sale-card:hover .vrl-sale-card__go{transform:translateX(3px)}

/* Products */
/* Products: the store's standard product cards. Phones: two columns, the third card centred on its own row (a 4-track
   grid, every card spans 2, the third starts at track 2). Desktop: all three in one row at catalog card width. The VRL
   mark (dots only) sits faintly behind them. */
.vrl-sale-products{position:relative;padding:28px 0 12px;overflow-x:clip}
.vrl-sale-products__wrap{position:relative;isolation:isolate}
/* The mark shows on desktop only: phones stack the cards full width, which leaves no background around them. */
.vrl-sale-products__mark{display:none;position:absolute;left:50%;z-index:-1;height:auto;color:#0a1f47;pointer-events:none}
/* Phones: one card per row, full container width; the photo fills the card's square media box (1200px tier on 3x screens). */
.vrl-sale-cards{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.vrl-sale-cards>.product-card{min-width:0}
.vrl-sale-cards .product-card__media .vrl-sale-pill__long{display:inline}
.vrl-sale-cards .product-card__media .vrl-sale-pill__short{display:none}
.vrl-sale-cards .product-card__media .vrl-sale-pill{top:8px;right:8px;left:auto}

/* How it works + details */
.vrl-sale-section-title{margin:0 0 16px;color:var(--vs-navy);font:800 clamp(22px,4.6vw,30px)/1.15 var(--vrl-font-display,'Archivo',system-ui,sans-serif);letter-spacing:-.02em}
.vrl-sale-how{padding:36px 0 8px}
.vrl-sale-how__steps{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.vrl-sale-how__steps li{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:14px;row-gap:2px;align-items:start;padding:16px;border-radius:16px;background:#fdfdfe;box-shadow:var(--vs-ring),0 1px 2px rgba(16,20,30,.05)}
.vrl-sale-how__steps b{grid-row:span 2;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:linear-gradient(150deg,#3b7be6,#1a4fb3 55%,#123b8a);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 6px 14px -6px rgba(18,59,138,.6);color:#fff;font:800 16px/1 var(--vrl-font-display,sans-serif)}
.vrl-sale-how__steps strong{color:var(--vs-navy);font-size:16px;line-height:1.3}
.vrl-sale-how__steps span{color:var(--vs-sub);font-size:14px;line-height:1.5}
.vrl-sale-terms{padding:28px 0 40px}
.vrl-sale-terms__panel{padding:20px;border-radius:16px;background:linear-gradient(180deg,#f5f7fa,#eef2f7);box-shadow:var(--vs-ring)}
.vrl-sale-terms__panel ul{display:grid;gap:8px;margin:0;padding:0 0 0 18px;color:var(--vs-sub);font-size:14px;line-height:1.55}
.vrl-sale-terms__panel a{color:var(--vrl-link,#2563eb);font-weight:700}

/* Sticky bar — bottom, thumb zone */
.vrl-sale-sticky{position:fixed;left:0;right:0;bottom:0;z-index:70;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));background:rgba(253,253,254,.9);-webkit-backdrop-filter:saturate(1.8) blur(16px);backdrop-filter:saturate(1.8) blur(16px);box-shadow:0 -1px 0 rgba(16,20,30,.08),0 -12px 30px -18px rgba(16,20,30,.35);transition:transform .25s var(--vrl-ease-out,ease),opacity .25s ease}
.vrl-sale-sticky.is-hidden{transform:translateY(110%);opacity:0;pointer-events:none}
.vrl-sale-sticky__inner{display:grid;grid-template-columns:62px minmax(0,1fr) auto;align-items:center;gap:10px;max-width:760px;margin:0 auto}
.vrl-sale-sticky__art{position:relative;display:block;width:62px;height:56px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px rgba(16,20,30,.08);overflow:hidden}
.vrl-sale-sticky__art img{display:block;width:100%;height:100%;object-fit:cover}
.vrl-sale-sticky__copy{display:grid;gap:2px;min-width:0}
.vrl-sale-sticky__copy strong{color:var(--vs-navy);font:800 15px/1.15 var(--vrl-font-display,sans-serif);letter-spacing:-.01em}
.vrl-sale-sticky__copy span{overflow:hidden;color:var(--vs-sub);font-size:11.5px;line-height:1.3;text-overflow:ellipsis;white-space:nowrap}
.vrl-sale-sticky__btn{min-height:46px;padding:0 18px;font-size:14px}
body.vrl-sale-page--on .vrla-bubble{bottom:calc(var(--vs-sticky,76px) + 18px + env(safe-area-inset-bottom,0px))!important}
body.vrl-sale-page--on .vrl-bogo-nudge{display:none!important}

/* Picker — bottom sheet on phones, centred modal above */
.vrl-sale-sheet{position:fixed;inset:0;z-index:9995}
.vrl-sale-sheet[hidden]{display:none}
.vrl-sale-sheet__backdrop{position:absolute;inset:0;background:rgba(1,15,45,.48);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:vrlSaleFade .2s ease}
.vrl-sale-sheet__panel{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;max-height:90dvh;border-radius:22px 22px 0 0;background:#fdfdfe;box-shadow:0 -20px 60px -20px rgba(1,15,45,.5);outline:0;animation:vrlSaleUp .28s var(--vrl-ease-out,ease)}
.vrl-sale-sheet__handle{width:40px;height:4px;margin:8px auto 0;border-radius:4px;background:#d1d5dd}
.vrl-sale-sheet__head{display:grid;grid-template-columns:40px minmax(0,1fr) 40px;align-items:center;gap:6px;padding:8px 12px 10px;border-bottom:1px solid #eef1f5}
.vrl-sale-sheet__title{margin:0;color:var(--vs-navy);font:800 18px/1.2 var(--vrl-font-display,sans-serif);text-align:center;letter-spacing:-.01em}
.vrl-sale-sheet__back,.vrl-sale-sheet__close{display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:999px;background:#f2f4f7;color:var(--vs-ink);font-size:20px;line-height:1;cursor:pointer}
.vrl-sale-sheet__back[hidden]{visibility:hidden;display:grid}
.vrl-sale-sheet__close{grid-column:3}
.vrl-sale-sheet__body{overflow-y:auto;overscroll-behavior:contain;padding:14px 14px calc(16px + env(safe-area-inset-bottom,0px))}
@keyframes vrlSaleUp{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
@keyframes vrlSaleFade{from{opacity:0}to{opacity:1}}

.vrl-sale-pick{display:grid;gap:10px}
.vrl-sale-pick__card{display:grid;grid-template-columns:68px minmax(0,1fr) 18px;align-items:center;gap:12px;width:100%;padding:10px 12px;border:0;border-radius:16px;background:#fdfdfe;box-shadow:var(--vs-ring),0 4px 10px -4px rgba(16,20,30,.1);color:inherit;text-align:left;cursor:pointer;transition:box-shadow .15s ease,transform .15s ease}
.vrl-sale-pick__card:hover{transform:translateY(-1px);box-shadow:0 0 0 1px #9cc0f7,0 8px 20px -8px rgba(29,78,216,.35)}
.vrl-sale-pick__img{display:grid;place-items:center;width:68px;height:76px;overflow:hidden;border-radius:12px;background:#fdfdfb;box-shadow:0 0 0 1px rgba(16,20,30,.07)}
.vrl-sale-pick__img img{width:auto;height:74px}
.vrl-sale-pick__copy{display:grid;gap:4px;min-width:0}
.vrl-sale-pick__copy strong{color:var(--vs-navy);font:700 20px/1.05 var(--vrl-font-product,sans-serif)}
.vrl-sale-pick__copy small{color:var(--vs-muted);font-size:12.5px}
.vrl-sale-pick__copy .vrl-sale-pill{justify-self:start}
.vrl-sale-pick__go{color:#9aa1ae;font-size:20px}

.vrl-sale-cfg{display:grid;gap:16px}
.vrl-sale-cfg__head{display:grid;grid-template-columns:84px minmax(0,1fr);align-items:center;gap:14px}
.vrl-sale-cfg__img{display:grid;place-items:center;width:84px;height:96px;overflow:hidden;border-radius:14px;background:#fdfdfb;box-shadow:0 0 0 1px rgba(16,20,30,.07)}
.vrl-sale-cfg__img img{width:auto;height:94px}
.vrl-sale-cfg__name{margin:0;color:var(--vs-navy);font:700 24px/1.05 var(--vrl-font-product,sans-serif)}
.vrl-sale-cfg__link{display:inline-block;margin-top:6px;color:var(--vrl-link,#2563eb);font-size:13px;font-weight:700;text-decoration:none}
.vrl-sale-cfg__label{margin:0 0 8px;color:var(--vs-sub);font:800 11px/1.2 var(--vrl-font-ui,sans-serif);letter-spacing:.1em;text-transform:uppercase}
.vrl-sale-chips{display:flex;flex-wrap:wrap;gap:8px}
.vrl-sale-chip{display:grid;gap:2px;min-width:88px;padding:9px 12px;border:0;border-radius:12px;background:linear-gradient(180deg,#fdfdfe,#f4f6f9);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 0 0 1px #d1d5dd;color:var(--vs-ink);text-align:left;cursor:pointer}
.vrl-sale-chip b{font-size:14px;font-weight:800}
.vrl-sale-chip span{color:var(--vs-muted);font-size:12px}
.vrl-sale-chip[aria-pressed="true"]{background:linear-gradient(180deg,#f4f8ff,#e4eefd);box-shadow:0 0 0 2px var(--vs-blue)}
.vrl-sale-chip[disabled]{opacity:.45;cursor:not-allowed}
.vrl-sale-qtys{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.vrl-sale-qty{position:relative;display:grid;gap:3px;padding:12px;border:0;border-radius:14px;background:#fdfdfe;box-shadow:var(--vs-ring),0 0 0 1px #e4e7ec;color:var(--vs-ink);text-align:left;cursor:pointer}
.vrl-sale-qty strong{font-size:15px;font-weight:800}
.vrl-sale-qty .vrl-sale-qty__get{color:var(--vs-blue);font-size:12.5px;font-weight:800}
.vrl-sale-qty .vrl-sale-qty__pay{color:var(--vs-navy);font-size:16px;font-weight:800}
.vrl-sale-qty .vrl-sale-qty__pay s{margin-left:4px;color:var(--vs-muted);font-size:12px;font-weight:600}
.vrl-sale-qty .vrl-sale-qty__per{color:var(--vs-muted);font-size:12px}
.vrl-sale-qty[aria-pressed="true"]{background:linear-gradient(180deg,#f4f8ff,#e8f0fd);box-shadow:0 0 0 2px var(--vs-blue)}
.vrl-sale-cfg__note{margin:-6px 0 0;color:var(--vs-muted);font-size:12px;line-height:1.45}
.vrl-sale-cfg__add{width:100%;min-height:52px;font-size:16px}
.vrl-sale-cfg__error{margin:0;padding:10px 12px;border-radius:12px;background:#fef2f2;color:#991b1b;font-size:13px}
.vrl-sale-cfg__error[hidden]{display:none}

.vrl-sale-done{display:grid;gap:14px;text-align:center}
.vrl-sale-done__check{display:grid;place-items:center;width:56px;height:56px;margin:4px auto 0;border-radius:50%;background:linear-gradient(150deg,#3b7be6,#1a4fb3 55%,#123b8a);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 10px 24px -10px rgba(18,59,138,.7);color:#fff;font-size:26px}
.vrl-sale-done h3{margin:0;color:var(--vs-navy);font:800 22px/1.2 var(--vrl-font-display,sans-serif)}
.vrl-sale-done__lines{display:grid;gap:8px;margin:0;padding:0;list-style:none;text-align:left}
.vrl-sale-done__lines li{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:12px;background:#f5f7fa;font-size:14px}
.vrl-sale-done__lines li.is-free{background:linear-gradient(135deg,#f2f7fe,#e2edfc);color:var(--vs-blue);font-weight:750}
.vrl-sale-done__actions{display:grid;gap:8px}
.vrl-sale-done__actions .vrl-sale-btn{width:100%}

body.vrl-sale-lock{overflow:hidden}

@media (min-width:768px){
	.vrl-sale{--vs-sticky:80px}
	body.vrl-sale-page--on{--vs-sticky-room:104px}
	.vrl-sale-hero{padding:48px 0 56px}
	.vrl-sale-hero__inner{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:32px}
	.vrl-sale-hero__actions .vrl-sale-btn{flex:0 0 auto}
	.vrl-sale-hero__art{margin:0}
	.vrl-sale-card{grid-template-columns:58px minmax(0,1fr) auto;gap:14px;padding:14px 16px;max-width:520px}
	.vrl-sale-card__mark{width:58px;height:58px}
	.vrl-sale-card__mark strong{font-size:19px}
	.vrl-sale-card__mark em{font-size:9px}
	.vrl-sale-card__eyebrow{font-size:8px}
	.vrl-sale-card__title{font-size:21px}
	.vrl-sale-card__fine{font-size:11px}
	.vrl-sale-products{padding:44px 0 16px}
	.vrl-sale-products__mark{display:block;top:50%;width:1180px;opacity:.045;transform:translate(-50%,-50%)}
	.vrl-sale-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;max-width:960px;margin:0 auto}
	.vrl-sale-how{padding:48px 0 12px}
	.vrl-sale-how__steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
	.vrl-sale-terms{padding:36px 0 56px}
	.vrl-sale-terms__panel{padding:24px 28px}
	.vrl-sale-sticky{left:50%;right:auto;bottom:16px;width:min(760px,calc(100% - 32px));padding:10px 12px;border-radius:20px;transform:translateX(-50%);box-shadow:0 0 0 1px rgba(16,20,30,.07),0 18px 40px -16px rgba(1,15,45,.45)}
	.vrl-sale-sticky.is-hidden{transform:translate(-50%,140%)}
	.vrl-sale-sticky__inner{grid-template-columns:70px minmax(0,1fr) auto;gap:14px}
	.vrl-sale-sticky__art{width:70px;height:64px}
	.vrl-sale-sticky__copy strong{font-size:17px}
	.vrl-sale-sticky__copy span{font-size:12.5px}
	.vrl-sale-sticky__btn{padding:0 24px;font-size:15px}
	.vrl-sale-sheet__panel{left:50%;right:auto;top:50%;bottom:auto;width:min(560px,calc(100% - 48px));max-height:min(88dvh,780px);border-radius:22px;transform:translate(-50%,-50%);animation:vrlSaleFade .2s ease}
	.vrl-sale-sheet__handle{display:none}
	.vrl-sale-sheet__body{padding:18px 20px 22px}
	.vrl-sale-qtys{grid-template-columns:repeat(4,minmax(0,1fr))}
	body.vrl-sale-page--on .vrla-bubble{bottom:112px!important}
}
@media (max-width:419px){.vrl-sale-sticky__more{display:none}}
@media (max-width:374px){
	.vrl-sale-sticky__inner{grid-template-columns:52px minmax(0,1fr) auto;gap:8px}
	.vrl-sale-sticky__art{width:52px;height:50px}
	.vrl-sale-sticky__btn{padding:0 14px;font-size:13px}
}
@media (prefers-reduced-motion:reduce){.vrl-sale *{transition:none!important;animation:none!important}}