/* fonts load via in (page()) — an @import here
would chain-block first paint behind the CSS download, which is slow on mobile */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:#fcfcfc;color:#000;min-height:100vh;
font-family:"Satoshi",-apple-system,"Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased}
::selection{background:#00218f;color:#fff}
a{color:#00218f;text-decoration:none}
/* ---- top nav (shared chrome, same palette) ---- */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
gap:18px;padding:20px 5vw;background:rgba(252,252,252,.86);backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);border-bottom:1px solid #ddd}
.nav .home{display:flex;align-items:center;gap:10px;font-family:"Poiret One",cursive;
text-transform:lowercase;font-size:24px;color:#00218f;line-height:1}
/* the ✳ glyphs sit still (no spin) — the slow rotation read as jitter on mobile */
.nav .home .spin{display:inline-block;font-size:18px}
.nav .links{display:flex;gap:14px;text-transform:uppercase;font-size:12px;letter-spacing:2px;color:#272727}
/* padding+negative margin = 44px-tall tap targets without changing the visual layout */
.nav .links a{color:#272727;transition:color .3s;padding:14px 6px;margin:-14px -6px 0}
.nav .links a:hover{color:#00218f}
/* the current page's link is a filled cobalt pill (white text), same asymmetric
two-rounded/two-pointed corner as the CTAs/thumbnails — radius scaled to the pill's
small height so it reads like the CTA (a literal 20px clamps into a semicircle here).
the -7/+7 vertical margin re-centers the visible pill onto the sibling labels: the
siblings carry a -14px top margin (tap-target trick) that pushes the flex line-center
down 7px, so align-self:center alone would drop the active label below the others. */
.nav .links a.here{background:#00218f;color:#fff;border-radius:6px 0;padding:6px 14px;margin:-7px 0 7px 0;align-self:center}
@media(max-width:800px){.nav .links{gap:8px;font-size:11px;letter-spacing:1.5px}}
@media(max-width:560px){.nav .links{gap:2px;font-size:11px;letter-spacing:1px}.nav .links a{padding:14px 7px;margin:-14px -3px 0}.nav .links a.here{padding:6px 11px;margin:-7px 0 7px 0}}
/* small phones: brand on its own row, links spread edge-to-edge below (no wordmark wrap,
and every link keeps a >=44px tap target) */
@media(max-width:480px){
.nav{flex-wrap:wrap;gap:0;padding:10px 4vw 0}
.nav .home{font-size:21px;white-space:nowrap}
.nav .links{width:100%;justify-content:space-between;gap:0;font-size:11px;letter-spacing:1.2px}
.nav .links a{padding:15px 8px;margin:0}
/* siblings have no negative margin at this width, so the pill centers cleanly with margin:0 */
.nav .links a.here{padding:6px 10px;margin:0}
}
/* ---- shared page wrap + headings (gallery tokens) ---- */
.wrap{max-width:1920px;margin:0 auto;padding:28px 5vw 64px}
.eyebrow{display:flex;align-items:center;gap:14px;text-transform:uppercase;
font-size:12px;letter-spacing:2px;color:#272727}
.eyebrow .spin{display:inline-block;color:#00218f;font-size:18px}
.title{font-family:"Poiret One",cursive;font-weight:400;text-transform:lowercase;
color:#00218f;line-height:.95;font-size:clamp(58px,11vw,176px);margin:18px 0 10px}
.title .word{display:block;overflow:hidden;padding-bottom:.22em;margin-bottom:-.22em}
.title .line{display:block;transform:translateY(115%);animation:lineUp 1s cubic-bezier(.19,.66,.22,1) forwards}
@keyframes lineUp{to{transform:translateY(0)}}
.sub{text-transform:uppercase;font-size:13px;letter-spacing:2px;line-height:1.7;
color:#747474;max-width:620px;margin:26px 0 0}
.rule{border:none;border-top:1px solid #ddd;margin:56px 0 48px}
/* ---- landing path cards ---- */
.paths{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;margin-top:8px}
.path{background:#fff;border:1px solid #ddd;border-radius:40px 0;padding:2rem 1.8rem;
display:flex;flex-direction:column;gap:.8rem;transition:ease all .5s;color:#000}
.path:hover{transform:scale(1.02);box-shadow:#00008b33 0 7px 29px}
.path .pn{font-family:"Poiret One",cursive;text-transform:lowercase;font-size:34px;color:#00218f;line-height:1}
.path .pd{text-transform:uppercase;font-size:12px;letter-spacing:1.5px;line-height:1.75;color:#272727}
.path .pgo{margin-top:auto;text-transform:uppercase;font-size:11px;letter-spacing:2px;color:#747474}
/* ---- gallery grid (verbatim from #view-gallery) ---- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:32px}
.card{background:#fff;border:1px solid #ddd;border-radius:40px 0;padding:1.8rem;
display:flex;flex-direction:column;gap:1.1rem;transition:ease all .5s}
.card:hover{transform:scale(1.02);box-shadow:#00008b33 0 7px 29px}
.card .img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:26px 0;
background:#eee;filter:grayscale(1);transition:ease filter .5s,ease transform .5s}
/* hover-capable pointers only — on touch, a tap would otherwise stick :hover on */
@media (hover:hover){.card:hover .img{filter:grayscale(0)}}
/* no cursor to hover with (touch, or a narrow/mobile viewport): light the lamp
as it scrolls to the center of the screen instead — the toggle is in REVEAL_JS */
@media (hover:none),(max-width:700px){.card.lit .img{filter:grayscale(0)}}
.card .name{font-family:"Poiret One",cursive;font-weight:400;text-transform:lowercase;
color:#000;font-size:32px;line-height:1.05}
.card .brief{text-transform:uppercase;font-size:12.5px;letter-spacing:1.5px;line-height:1.75;color:#272727}
.card .dots{display:flex;align-items:center;gap:8px;margin:2px 0 2px}
.card .dots .dot{width:18px;height:18px;border-radius:50%;display:inline-block;border:1px solid #0002}
.card .meta{border-top:1px solid #ddd;padding-top:.9rem;margin-top:auto;
display:flex;justify-content:space-between;gap:10px;text-transform:uppercase;
font-size:11px;letter-spacing:2px;color:#747474}
.cta{display:flex;justify-content:center;align-items:center;gap:.6rem;min-height:52px;
background:#00218f;color:#fff !important;text-transform:uppercase;font-weight:700;
font-size:13px;letter-spacing:2px;padding:1.05rem .5rem;border-radius:20px 0;
transition:ease all .4s}
.cta:hover{box-shadow:#00008b33 0 7px 29px;transform:scale(1.02)}
.card .imgwrap{position:relative;display:block;width:100%;padding:0;border:none;
background:none;cursor:zoom-in;overflow:hidden;border-radius:26px 0;font:inherit}
.card .count{position:absolute;top:12px;left:12px;background:#00218f;color:#fff;
text-transform:uppercase;font-size:10px;letter-spacing:1.5px;font-weight:700;
padding:6px 10px;border-radius:12px 0;pointer-events:none}
.card .zoom{position:absolute;bottom:12px;right:12px;background:#fff;color:#00218f;
text-transform:uppercase;font-size:10px;letter-spacing:1.5px;font-weight:700;
padding:6px 10px;border-radius:12px 0;opacity:0;transform:translateY(6px);
transition:ease all .4s;pointer-events:none}
.card:hover .zoom{opacity:1;transform:none}
.empty{text-transform:uppercase;font-size:13px;letter-spacing:2px;line-height:2;color:#747474;max-width:640px}
.empty b{color:#00218f}
/* ---- lightbox (verbatim) ---- */
#lightbox{position:fixed;inset:0;z-index:1000;display:none;
background:rgba(250,250,248,.97);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
grid-template-columns:96px 1fr 96px;grid-template-rows:1fr auto;
align-items:center;justify-items:center;padding:3.2vh 2vw}
#lightbox.on{display:grid;animation:lbFade .3s ease}
@keyframes lbFade{from{opacity:0}to{opacity:1}}
#lightbox .lb-stage{grid-column:2;grid-row:1;display:flex;align-items:center;
justify-content:center;width:100%;height:100%;margin:0;overflow:hidden;cursor:zoom-out}
#lightbox .lb-img{max-width:100%;max-height:80vh;object-fit:contain;border-radius:26px 0;
box-shadow:#00008b22 0 20px 60px;cursor:default}
#lightbox.on .lb-img{animation:lbIn .45s cubic-bezier(.19,.66,.22,1)}
@keyframes lbIn{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
#lightbox .lb-nav{grid-row:1;background:none;border:none;color:#00218f;cursor:pointer;
font-family:"Poiret One",cursive;font-size:60px;line-height:1;width:78px;height:78px;
border-radius:50%;transition:ease all .3s}
#lightbox .lb-nav:hover{background:#00218f;color:#fff}
#lightbox .lb-prev{grid-column:1}
#lightbox .lb-next{grid-column:3}
#lightbox .lb-close{position:absolute;top:20px;right:28px;background:none;border:none;
color:#000;font-size:42px;line-height:1;cursor:pointer;font-family:"Poiret One",cursive;
transition:ease color .3s;z-index:2}
#lightbox .lb-close:hover{color:#00218f}
#lightbox .lb-bar{grid-column:1/4;grid-row:2;display:flex;flex-direction:column;
align-items:center;gap:12px;width:100%;padding-top:16px}
#lightbox .lb-title{font-family:"Poiret One",cursive;text-transform:lowercase;
font-size:26px;color:#000;line-height:1}
#lightbox .lb-count{text-transform:uppercase;letter-spacing:2px;font-size:11px;color:#747474}
#lightbox .lb-thumbs{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;max-width:860px}
#lightbox .lb-th{width:56px;height:70px;object-fit:cover;border-radius:10px 0;cursor:pointer;
filter:grayscale(1);opacity:.5;transition:ease all .3s;border:none;padding:0}
#lightbox .lb-th:hover{opacity:1;filter:grayscale(0)}
#lightbox .lb-th.on{opacity:1;filter:grayscale(0);outline:2px solid #00218f;outline-offset:2px}
@media(max-width:640px){
#lightbox{grid-template-columns:54px 1fr 54px;padding:2vh 1vw}
#lightbox .lb-nav{font-size:40px;width:48px;height:48px}
#lightbox .lb-img{max-height:64vh}
}
/* ---- forms (same palette) ---- */
.form{max-width:680px;display:flex;flex-direction:column;gap:20px;margin-top:8px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{text-transform:uppercase;font-size:11px;letter-spacing:2px;color:#272727}
/* 16px inputs: anything smaller makes iOS Safari zoom the page on focus */
.field input,.field textarea,.field select{font-family:inherit;font-size:16px;color:#000;
background:#fff;border:1px solid #ddd;border-radius:18px 0;padding:14px 16px;width:100%;min-height:52px}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:#00218f}
.field textarea{resize:vertical;min-height:130px}
.field.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.field.two{grid-template-columns:1fr}}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
button.submit{align-self:flex-start;background:#00218f;color:#fff;border:none;cursor:pointer;
text-transform:uppercase;font-weight:700;font-size:13px;letter-spacing:2px;min-height:54px;
padding:1.05rem 2.2rem;border-radius:20px 0;transition:ease all .4s}
@media(max-width:560px){button.submit{align-self:stretch;width:100%}}
button.submit:hover{box-shadow:#00008b33 0 7px 29px;transform:scale(1.02)}
button.submit:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.formnote{text-transform:uppercase;font-size:11px;letter-spacing:1.5px;line-height:1.9;color:#747474}
.formnote b{color:#00218f}
.form-ok{max-width:680px;background:#fff;border:1px solid #00218f2e;border-radius:40px 0;padding:2.4rem 2.2rem}
.form-ok .okh{font-family:"Poiret One",cursive;text-transform:lowercase;font-size:clamp(26px,4vw,38px);color:#00218f;line-height:1.1;margin-bottom:.7rem}
.form-ok .okp{font-size:15px;line-height:1.7;color:#272727}
.form-err{max-width:680px;font-size:14px;line-height:1.7;color:#b00020}
.form-err a{color:#00218f}
.formstatus{font-size:14px;line-height:1.6;color:#00218f;min-height:1.2em}
/* ---- gated shop notice ---- */
.gate{background:#fff;border:1px solid #ddd;border-radius:40px 0;padding:2.6rem 2.2rem;max-width:760px}
.gate .gh{font-family:"Poiret One",cursive;text-transform:lowercase;font-size:40px;color:#00218f;line-height:1;margin-bottom:1rem}
.gate p{text-transform:uppercase;font-size:12.5px;letter-spacing:1.5px;line-height:2;color:#272727}
/* ---- footer ---- */
.foot{border-top:1px solid #ddd;margin:44px 5vw 0;padding:40px 0 80px;display:flex;
flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;
font-family:"Poiret One",cursive;text-transform:lowercase;font-size:18px;color:#747474}
.foot .pili{display:flex;gap:10px;opacity:.35;font-size:15px;color:#00218f}
.foot .fl{display:flex;gap:22px;font-size:16px}
.foot .fl a{color:#747474}.foot .fl a:hover{color:#00218f}
/* down-arrow cues sit still — the looping bounce read as jitter on mobile */
.indicate{display:inline-block}
/* ---- landing hero: dark, cinematic, full-bleed (LANDING ONLY) ---- */
.hero{position:relative;height:100vh;height:100svh;min-height:580px;display:flex;align-items:center;
overflow:hidden;background:#08080a}
.hero-bg{position:absolute;inset:0;background:var(--hero,url('/assets/hero/cascade.jpg')) center/cover no-repeat;
animation:heroDrift 26s ease-in-out infinite alternate;will-change:transform}
@keyframes heroDrift{from{transform:scale(1.04)}to{transform:scale(1.12)}}
.hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
background:radial-gradient(125% 95% at 32% 50%,transparent 0%,rgba(8,8,10,.5) 68%,rgba(8,8,10,.88) 100%),
linear-gradient(90deg,rgba(8,8,10,.45) 0%,transparent 58%),
linear-gradient(180deg,rgba(8,8,10,.5) 0%,transparent 22%,transparent 58%,rgba(8,8,10,.8) 100%)}
.hero-inner{position:relative;z-index:2;width:100%;max-width:1920px;margin:0 auto;padding:0 6vw}
.hero .eyebrow{color:#e8e2d6}
.hero .eyebrow .spin{color:#f3d9a8}
.hero-title{font-family:"Poiret One",cursive;font-weight:400;text-transform:lowercase;
color:#fff;line-height:.9;font-size:clamp(64px,12.5vw,210px);margin:14px 0 0;
text-shadow:0 2px 50px rgba(0,0,0,.45)}
.hero-title .word{display:block;overflow:hidden;padding-bottom:.22em;margin-bottom:-.22em}
.hero-title .line{display:block;transform:translateY(115%);
animation:lineUp 1.1s cubic-bezier(.19,.66,.22,1) forwards}
.hero-sub{color:#f0ebe0;text-transform:uppercase;font-size:12.5px;letter-spacing:2.5px;
line-height:2.1;max-width:560px;margin:28px 0 0;opacity:0;animation:heroFade .9s ease .65s forwards;
text-shadow:0 1px 28px rgba(8,8,10,.85),0 1px 4px rgba(8,8,10,.5)}
@keyframes heroFade{to{opacity:1}}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:36px;opacity:0;animation:heroFade .9s ease .85s forwards}
.hbtn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:56px;
padding:0 2.1rem;border-radius:20px 0;text-transform:uppercase;font-weight:700;
font-size:13px;letter-spacing:2px;transition:ease all .4s}
.hbtn.solid{background:#fff;color:#08080a}
.hbtn.solid:hover{transform:scale(1.03);box-shadow:0 7px 29px rgba(255,255,255,.28)}
.hbtn.ghost{border:1px solid rgba(255,255,255,.55);color:#fff}
.hbtn.ghost:hover{background:rgba(255,255,255,.14);border-color:#fff}
@media(max-width:560px){.hero-actions{gap:10px}.hbtn{flex:1 1 100%;min-height:54px}}
.hero-cue{position:absolute;left:0;right:0;bottom:34px;z-index:2;display:flex;flex-direction:column;
align-items:center;gap:9px;color:#e8e2d6;text-transform:uppercase;font-size:11px;letter-spacing:3px;
padding:12px 0}
.hero-cue:hover{color:#fff}
.hero-cue .arr{font-size:20px}
@media(max-width:640px){.hero-cue span:first-child{display:none}.hero-cue{bottom:14px}}
/* transparent nav floating over the hero on the landing; swaps to paper on scroll */
body.home .nav{position:fixed;left:0;right:0;background:transparent;border-bottom-color:transparent;
backdrop-filter:none;-webkit-backdrop-filter:none;
background-image:linear-gradient(180deg,rgba(8,8,10,.6),transparent);transition:all .45s ease}
body.home .nav .home{color:#fff}
body.home .nav .links a{color:#e8e2d6}
body.home .nav .links a:hover,body.home .nav .links a.here{color:#fff}
body.home .nav.scrolled{position:fixed;background:rgba(252,252,252,.9);border-bottom-color:#ddd;
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);background-image:none}
body.home .nav.scrolled .home{color:#00218f}
body.home .nav.scrolled .links a{color:#272727}
body.home .nav.scrolled .links a:hover,body.home .nav.scrolled .links a.here{color:#00218f}
body.home .reveal{padding-top:96px}
/* ---- featured kit (landing, shop-open only) ---- */
.feat{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center;background:#fff;
border:1px solid #ddd;border-radius:40px 0;padding:2.6rem;margin-top:34px}
@media(max-width:860px){.feat{grid-template-columns:1fr;padding:1.3rem;gap:20px}}
.feat .fimgwrap{position:relative;display:block;overflow:hidden;border-radius:26px 0}
.feat .fimg{width:100%;aspect-ratio:4/5;object-fit:cover;background:#eee;display:block;
filter:grayscale(1);transition:ease transform .6s,ease filter .5s}
.feat .fimgwrap:hover .fimg{transform:scale(1.03)}
/* same "lamp lights up" move as the .card thumbs: colour on hover (cursor devices),
and on scroll-to-centre for touch/mobile via the .lit toggle in REVEAL_JS */
@media (hover:hover){.feat .fimgwrap:hover .fimg{filter:grayscale(0)}}
@media (hover:none),(max-width:700px){.feat.lit .fimg{filter:grayscale(0)}}
.feat .fpill{position:absolute;top:14px;left:14px;background:#00218f;color:#fff;
text-transform:uppercase;font-size:10px;letter-spacing:1.5px;font-weight:700;
padding:7px 12px;border-radius:12px 0}
.feat .fname{font-family:"Poiret One",cursive;font-weight:400;text-transform:lowercase;
color:#000;font-size:clamp(38px,5.5vw,62px);line-height:1}
.feat .fprice{font-size:1.45rem;color:#00218f;margin:.5rem 0 1.1rem}
.feat .fbrief{text-transform:uppercase;font-size:12.5px;letter-spacing:1.5px;line-height:1.9;color:#272727;margin-bottom:1.2rem}
.feat .fsws{display:flex;align-items:center;gap:9px;margin-bottom:1.6rem}
.feat .fsws .dot{width:20px;height:20px;border-radius:50%;display:inline-block;border:1px solid #0002}
.feat .fsws .fsl{text-transform:uppercase;font-size:11px;letter-spacing:1.5px;color:#747474;margin-left:4px}
.feat .cta{max-width:420px}
.feat .fnote{text-transform:uppercase;font-size:11px;letter-spacing:1.5px;line-height:1.9;color:#747474;margin-top:1rem}
/* ---- value strip ---- */
.marks{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:26px;margin-top:34px}
.mark{border-top:2px solid #00218f;padding-top:1.1rem}
.mark .mh{font-family:"Poiret One",cursive;text-transform:lowercase;font-size:24px;color:#00218f;line-height:1.15;margin-bottom:.5rem}
.mark .mp{text-transform:uppercase;font-size:11.5px;letter-spacing:1.5px;line-height:1.9;color:#747474}
/* ---- scroll reveal (progressive; content visible without JS) ---- */
.rv{opacity:0;transform:translateY(26px);
transition:opacity .8s ease,transform .8s cubic-bezier(.19,.66,.22,1)}
.rv.on,html.no-io .rv{opacity:1;transform:none}
/* ---- tighter mobile rhythm ---- */
@media(max-width:640px){
.wrap{padding:20px 5vw 48px}
.grid{grid-template-columns:1fr;gap:22px}
.card{padding:1.2rem;gap:.9rem}
.rule{margin:40px 0 34px}
.foot{margin:32px 5vw 0;padding:32px 0 56px}
/* hanging indent so a wrapped detail line (e.g. "…no tools") aligns with the
first word after the diamond marker, not under the marker */
.pp-details li{display:flex;align-items:baseline}
}
/* ---- reduced motion: kill the drift/spin/reveals, keep everything visible ---- */
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms !important;animation-delay:0s !important;transition-duration:.01ms !important}
.rv{opacity:1;transform:none}
.title .line,.hero-title .line{transform:none;animation:none}
.hero-sub,.hero-actions{opacity:1;animation:none}
.hero-bg{animation:none}
}
/* ================= cart (localStorage cart + Shopify multi-item checkout) ================= */
/* the nav "cart (N)" control — styled like a nav link with a cobalt count badge */
.cartlink{font:inherit;text-transform:uppercase;font-size:12px;letter-spacing:2px;color:#272727;
background:none;border:none;cursor:pointer;padding:14px 6px;margin:-14px -6px 0;
display:inline-flex;align-items:center;gap:7px;transition:color .3s}
.cartlink:hover,.cartlink.has{color:#00218f}
.cartcount{display:none;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#00218f;
color:#fff;font-size:10.5px;letter-spacing:0;font-weight:700;line-height:18px;text-align:center}
body.home .nav .cartlink{color:#e8e2d6}
body.home .nav .cartlink:hover,body.home .nav .cartlink.has{color:#fff}
body.home .nav.scrolled .cartlink{color:#272727}
body.home .nav.scrolled .cartlink:hover,body.home .nav.scrolled .cartlink.has{color:#00218f}
@media(max-width:480px){.cartlink{padding:15px 8px;margin:0}}
/* slide-in drawer */
.wbl-cart{position:fixed;inset:0;z-index:200;display:none}
.wbl-cart.on{display:block}
.wbl-scrim{position:absolute;inset:0;background:rgba(8,8,10,.42);backdrop-filter:blur(3px);
-webkit-backdrop-filter:blur(3px);opacity:0;animation:wblScrim .3s ease forwards}
@keyframes wblScrim{to{opacity:1}}
.wbl-panel{position:absolute;top:0;right:0;height:100%;width:min(420px,92vw);background:#fcfcfc;
border-left:1px solid #ddd;box-shadow:-18px 0 60px rgba(8,8,10,.18);display:flex;flex-direction:column;
transform:translateX(100%);animation:wblIn .38s cubic-bezier(.19,.66,.22,1) forwards}
@keyframes wblIn{to{transform:none}}
.wbl-head{display:flex;align-items:center;justify-content:space-between;padding:22px 24px 16px;border-bottom:1px solid #ddd}
.wbl-title{font-family:"Poiret One",cursive;text-transform:lowercase;font-size:30px;color:#00218f;line-height:1}
.wbl-x{background:none;border:none;color:#000;font-size:34px;line-height:1;cursor:pointer;
font-family:"Poiret One",cursive;transition:color .3s}
.wbl-x:hover{color:#00218f}
.wbl-items{flex:1;overflow-y:auto;padding:8px 24px}
.wbl-empty{text-transform:uppercase;font-size:12px;letter-spacing:2px;color:#747474;padding:40px 0}
.wbl-item{display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:start;
padding:18px 0;border-bottom:1px solid #eee}
.wbl-thumb{width:64px;height:80px;object-fit:cover;border-radius:14px 0;background:#eee}
.wbl-nm{font-family:"Poiret One",cursive;text-transform:lowercase;font-size:21px;color:#000;line-height:1.05}
.wbl-cl{text-transform:uppercase;font-size:10.5px;letter-spacing:1.5px;color:#747474;margin:3px 0 8px}
.wbl-qty{display:flex;align-items:center;gap:9px}
.wbl-qty button{width:26px;height:26px;border:1px solid #ddd;border-radius:8px 0;background:#fff;
color:#00218f;font-size:15px;line-height:1;cursor:pointer;transition:border-color .2s}
.wbl-qty button:hover{border-color:#00218f}
.wbl-qty span{min-width:16px;text-align:center;font-size:14px}
/* the remove control sits inside .wbl-qty, so it must out-specify `.wbl-qty button` (which
would otherwise force it into a 26px bordered box) — hence the button.wbl-rm selector */
.wbl-qty button.wbl-rm{width:auto;height:auto;margin-left:8px;background:none;border:none;
border-radius:0;color:#747474;cursor:pointer;text-transform:uppercase;font-size:10px;letter-spacing:1.5px;padding:4px}
.wbl-qty button.wbl-rm:hover{color:#00218f;border-color:transparent}
.wbl-lp{font-size:14px;color:#00218f;font-weight:700;white-space:nowrap}
.wbl-foot{border-top:1px solid #ddd;padding:18px 24px calc(20px + env(safe-area-inset-bottom));background:#fff}
.wbl-row{display:flex;justify-content:space-between;align-items:center;gap:12px;
text-transform:uppercase;font-size:11.5px;letter-spacing:1.5px;color:#272727;padding:4px 0}
.wbl-disc{color:#00218f}
.wbl-disc span:first-child{text-transform:none;letter-spacing:.3px;font-size:11px}
.wbl-note{text-transform:none;font-size:12px;line-height:1.5;color:#00218f;background:#00218f0d;
border-radius:14px 0;padding:10px 12px;margin:8px 0}
.wbl-total{border-top:1px solid #ddd;margin-top:6px;padding-top:12px;font-weight:700;color:#000;font-size:13px}
.wbl-checkout{display:block;width:100%;margin-top:14px;min-height:54px;background:#00218f;color:#fff;
border:none;cursor:pointer;text-transform:uppercase;font-weight:700;font-size:13px;letter-spacing:2px;
border-radius:20px 0;transition:ease all .4s}
.wbl-checkout:hover{background:#001a72;box-shadow:#00008b33 0 7px 29px}
.wbl-fine{text-transform:uppercase;font-size:10px;letter-spacing:1.2px;color:#747474;text-align:center;margin-top:12px;line-height:1.7}
@media(max-width:560px){.wbl-title{font-size:26px}.wbl-head,.wbl-items,.wbl-foot{padding-left:18px;padding-right:18px}}
/* promo lines — product page + shop/landing banner (cobalt tint, house radii) */
.promo-line{display:inline-flex;align-items:center;gap:9px;background:#00218f0d;color:#00218f;
border-radius:16px 0;padding:11px 16px;text-transform:uppercase;font-size:11px;letter-spacing:1.5px;
font-weight:700;line-height:1.4}
.promo-line .spark{font-size:12px}
.shop-promo{margin:-8px 0 40px}
/* ---- installation video (dedicated page + product pages) ----
the aspect-ratio on the wrap reserves the box BEFORE any video data arrives, so the
player never shifts layout (CLS 0); the video itself is native