@font-face {
  font-family: 'Bodoni Moda';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/BodoniModa-italic-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bodoni Moda';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/BodoniModa-italic-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/BodoniModa-normal-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/BodoniModa-normal-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/Inter-normal-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/Inter-normal-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/Inter-normal-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/Inter-normal-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/Inter-normal-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/Inter-normal-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Cinzel 600 latin-ext — product titles (Zrian 27-10) */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/Cinzel-normal-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Cinzel 600 latin — product titles (Zrian 27-10) */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/Cinzel-normal-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ETERNITY — "night & stone" (design pass 2026-10-12). One system, taken from the product:
   NIGHT  the spotlight film set: hero, the press band, footer.          STONE  warm travertine daylight: everything you shop on.
   SERIF  Bodoni Moda, the Didone of the debossed EN monogram: headlines, prices, numerals, chapter marks (italic, never caps).
   SANS   Inter for every control and every sentence you act on. Sentence case everywhere; no tiny tracked capitals.
   Mobile first. Tokens below are the only source of colour, type, space, radius, shadow and motion. */
:root{
 /* colour */
 --stone:#F3EEE6; --paper:#FBF9F5; --stage:#ECE6DC; --sand:#E8DECF; --line:#DDD3C4; --line2:#C9BCA9;
 --ink:#151311; --ink2:#3D3731; --mute:#6B6359; --bronze:#7A5A36;
 --night:#0E0D0B; --night2:#191714; --cream:#EFE6D6; --brass:#D9BE95; --onnight:#CFC5B6; --nline:rgba(239,230,214,.16);
 --err:#8A2E1E; --ok:#4F7A4A;
 /* type */
 --serif:'Bodoni Moda',Didot,'Bodoni 72',Georgia,serif; --sans:'Inter',system-ui,-apple-system,sans-serif;
 --d1:clamp(54px,14.5vw,148px); --d2:clamp(38px,5.6vw,68px); --d3:clamp(32px,3.6vw,48px);
 /* space + measure */
 --pad:clamp(20px,5vw,72px); --max:1320px; --sec:clamp(80px,10vw,140px); --gap:clamp(28px,4vw,56px);
 /* shape */
 --r:4px; --r-img:6px;
 --prod:drop-shadow(0 10px 12px rgba(40,30,20,.12)) drop-shadow(0 2px 3px rgba(40,30,20,.08));
 --pop:0 24px 60px rgba(21,19,17,.16);
 /* motion */
 --e:cubic-bezier(.2,.7,.2,1); --spring:cubic-bezier(.2,.9,.25,1.15); --t1:.18s; --t2:.35s; --t3:.75s;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--stone);color:var(--ink);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video{display:block;max-width:100%}
a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px}
h1,h2,h3,p,ol,ul,dl,dd,figure{margin:0;padding:0}
ol,ul{list-style:none}
button{font:inherit;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--bronze);outline-offset:3px;border-radius:var(--r)}
[hidden]{display:none!important}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;background:var(--ink);color:#fff;padding:10px 14px;z-index:100;font:600 14px var(--sans);border-radius:var(--r)}
.skip:focus{top:12px}
[id]{scroll-margin-top:84px}
body.locked{overflow:hidden}
.muted{color:var(--mute)}
.nb{display:inline-block}

/* ---------- icons: one family, 24 grid, 1.5 stroke, round caps ---------- */
.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.ic.lg{width:28px;height:28px;stroke-width:1.35;color:var(--bronze)}

/* ---------- type ---------- */
h1,h2{font-family:var(--serif);font-weight:400;letter-spacing:-.02em;line-height:1.02;color:var(--ink);text-wrap:balance}
h1 em,h2 em{font-style:italic;color:var(--bronze)}
h2{font-size:var(--d2)}
h3{font:600 17px/1.35 var(--sans);letter-spacing:-.01em;margin-bottom:4px}
p{text-wrap:pretty}
.lead{font-size:clamp(17px,1.4vw,19px);line-height:1.6;color:var(--ink2);max-width:34em}
/* chapter mark: a hairline + Didone italic. Replaces the tracked-caps eyebrow everywhere. */
.eb{display:flex;align-items:center;gap:12px;margin:0 0 16px;font:italic 400 19px/1.2 var(--serif);letter-spacing:0;color:var(--bronze)}
.eb::before{content:"";flex:none;width:32px;height:1px;background:currentColor;opacity:.5}
.eb.c{justify-content:center}.eb.c::after{content:"";flex:none;width:32px;height:1px;background:currentColor;opacity:.5}
.sec-head{max-width:var(--max);margin:0 auto var(--gap)}
.sec-head.c{text-align:center}
.sec-lead{margin-top:14px;color:var(--ink2);max-width:34em}
.sec-lead a{color:var(--ink)}

/* ---------- buttons + links ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 26px;border:1px solid var(--ink);border-radius:var(--r);background:transparent;color:var(--ink);
 font:600 15px/1.1 var(--sans);letter-spacing:.005em;text-decoration:none;text-align:center;cursor:pointer;
 transition:background-color var(--t2) var(--e),color var(--t2) var(--e),border-color var(--t2) var(--e),transform var(--t1) var(--e)}
.btn:hover{background:var(--ink);color:#FBF6EC}
.btn:active{transform:scale(.985)}
.btn .ic{width:18px;height:18px;transition:transform var(--t2) var(--e)}
.btn:hover .ic{transform:translateX(3px)}
.btn.solid{background:var(--ink);color:#FBF6EC}
.btn.solid:hover{background:#2D2823;border-color:#2D2823}
.btn.light{background:#FBF6EC;color:var(--ink);border-color:#FBF6EC}
.btn.light:hover{background:#fff;border-color:#fff;color:var(--ink)}
.btn.sm{min-height:46px;padding:0 18px;font-size:14px}
.btn.wide{width:100%}
.btn[disabled]{background:var(--sand);border-color:var(--sand);color:var(--mute);cursor:not-allowed;transform:none}
.btn[disabled] .ic{transform:none}
.btn[aria-busy=true]{background:var(--ink);border-color:var(--ink);color:#FBF6EC;cursor:progress}
.spin{width:16px;height:16px;border-radius:50%;border:1.5px solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(1turn)}}
.tlink{display:inline-flex;align-items:center;gap:8px;min-height:44px;font:600 15px var(--sans);color:var(--ink);text-decoration:underline;text-decoration-color:rgba(21,19,17,.28);text-underline-offset:6px;transition:text-decoration-color var(--t2) var(--e)}
.tlink:hover{text-decoration-color:currentColor}
.tlink .ic{width:18px;height:18px;transition:transform var(--t2) var(--e)}
.tlink:hover .ic{transform:translateX(3px)}
.tlink.light{color:#F6EFE3;text-decoration-color:rgba(246,239,227,.35)}
.tlink.light:hover{text-decoration-color:#F6EFE3}
.linkbtn{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:44px}
.iconbtn{display:inline-grid;place-items:center;width:44px;height:44px;background:none;border:0;border-radius:var(--r);color:var(--ink);cursor:pointer;transition:background-color var(--t1)}
.iconbtn:hover{background:rgba(21,19,17,.06)}

/* ---------- controls ---------- */
.qty{display:inline-flex;align-items:center;height:54px;border:1px solid var(--line2);border-radius:var(--r);background:var(--paper)}
.qty button{width:42px;height:100%;display:grid;place-items:center;background:none;border:0;cursor:pointer;color:var(--ink);border-radius:var(--r);transition:background-color var(--t1)}
.qty button:hover{background:rgba(21,19,17,.05)}
.qty button:disabled{color:var(--line2);cursor:not-allowed;background:none}
.qty button .ic{width:16px;height:16px}
.qty input{width:34px;height:100%;border:0;background:none;text-align:center;font:500 16px var(--sans);color:var(--ink);-moz-appearance:textfield;padding:0}
.qty input::-webkit-inner-spin-button,.qty input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.qty.sm{height:46px}.qty.sm button{width:44px}.qty.sm input{width:32px;font-size:15px}
.dot{display:block;width:32px;height:32px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.14),inset 0 -6px 10px rgba(0,0,0,.12);transition:box-shadow var(--t2) var(--e),transform var(--t2) var(--e)}
.sw-carbon .dot,.dot.sw-carbon{background:repeating-linear-gradient(45deg,#1e1f21 0 3px,#3a3b3e 3px 6px)}
.swname{font:500 12px/1.25 var(--sans);color:var(--mute);text-align:center;transition:color var(--t1)}
.select{position:relative;display:inline-flex;align-items:center}
.select select{appearance:none;-webkit-appearance:none;min-height:44px;padding:0 38px 0 12px;border:1px solid var(--line2);border-radius:var(--r);background:var(--paper);font:500 15px var(--sans);color:var(--ink);cursor:pointer;max-width:200px}
.select .ic{position:absolute;right:10px;width:18px;height:18px;pointer-events:none;color:var(--mute)}
.select select:focus-visible{outline:2px solid var(--bronze);outline-offset:2px}
.field{display:grid;gap:8px}
.field label{font:600 14px var(--sans);color:var(--ink)}
.field .opt{font-weight:400;color:var(--mute)}
.field input,.field textarea,.field select,.adm-filter select,.adm-table input{width:100%;min-height:52px;padding:12px 14px;border:1px solid var(--line2);background:var(--paper);font:400 16px var(--sans);color:var(--ink);border-radius:var(--r);transition:border-color var(--t1),box-shadow var(--t1)}
.field textarea{min-height:150px;resize:vertical}
.field input:hover,.field textarea:hover{border-color:var(--mute)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(122,90,54,.18)}
.field [aria-invalid=true]{border-color:var(--err);box-shadow:0 0 0 3px rgba(138,46,30,.12)}
.hp{position:absolute;left:-9999px}
.msg{min-height:22px;margin-top:10px;font:500 14px var(--sans);color:var(--err)}
.msg:empty{min-height:0;margin:0}
.notice{padding:12px 14px;background:var(--paper);border-left:2px solid var(--bronze);border-radius:0 var(--r) var(--r) 0;font-size:14px;color:var(--ink2);margin:8px 0 16px}

/* ---------- motion utilities (reveal on enter; never holds the page) ---------- */
.rv{opacity:0;transform:translateY(14px);transition:opacity var(--t3) var(--e),transform var(--t3) var(--e)}
.rv.in{opacity:1;transform:none}
.rv-img{clip-path:inset(6% 0 0 0);transition:clip-path 1.1s var(--e)}
.rv-img.in{clip-path:inset(0)}
li.rv:nth-child(2){transition-delay:.06s}li.rv:nth-child(3){transition-delay:.12s}li.rv:nth-child(4){transition-delay:.18s}li.rv:nth-child(5){transition-delay:.24s}
.vid{width:100%;height:100%;object-fit:cover;background:var(--night2);pointer-events:none}
.vid::-webkit-media-controls,.vid::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none} /* iOS Low Power Mode blocks autoplay and draws its own play button; show just the poster */

/* ---------- announcement + header ---------- */
.topbars{position:relative;z-index:52}
.announce{background:var(--night);color:#EDE4D6;font:500 12.5px/1 var(--sans);letter-spacing:.01em}
.announce ul{display:flex;justify-content:center;gap:36px;padding:9px var(--pad);max-width:var(--max);margin:0 auto}
.announce li{display:flex;align-items:center;gap:8px;white-space:nowrap}
.announce a{color:inherit;text-decoration:none}.announce a:hover{text-decoration:underline}
.announce .ic{width:15px;height:15px;color:var(--brass)}
.top{position:sticky;top:0;z-index:50;background:rgba(243,238,230,.9);-webkit-backdrop-filter:saturate(1.2) blur(12px);backdrop-filter:saturate(1.2) blur(12px);border-bottom:1px solid transparent;transition:border-color var(--t2),background-color var(--t2)}
.top.scrolled{border-bottom-color:var(--line)}
.top .in{max-width:var(--max);margin:0 auto;padding:0 var(--pad);height:64px;display:flex;align-items:center;gap:16px}
.top .logo{display:flex;align-items:center;min-height:44px;margin-right:auto}
.top .logo img{height:36px;width:auto}
.lg-light{display:none}
.top nav{display:none;gap:30px}
.top nav a{font:500 14px/20px var(--sans);color:var(--ink2);text-decoration:none;padding:12px 0;min-height:44px;display:inline-flex;align-items:center;position:relative}
.top nav a::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--t2) var(--e)}
.top nav a:hover{color:var(--ink)}.top nav a:hover::after{transform:none}
.langsw{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 4px;font:600 12.5px/1 var(--sans);letter-spacing:.06em;color:var(--mute);text-decoration:none}
.langsw span+span::before{content:"/";margin-right:6px;color:var(--line2);font-weight:400}
.langsw .on{color:var(--ink)}
.langsw:hover span:not(.on){color:var(--ink)}
body.home .top .langsw{color:rgba(246,239,227,.62)} body.home .top .langsw .on{color:#F6EFE3} body.home .top .langsw span+span::before{color:rgba(246,239,227,.35)}
body.home .top.scrolled .langsw{color:var(--mute)} body.home .top.scrolled .langsw .on{color:var(--ink)} body.home .top.scrolled .langsw span+span::before{color:var(--line2)}
.burger{display:inline-grid;place-items:center;width:44px;height:44px;background:none;border:0;color:inherit;cursor:pointer}
.burger .ic{width:24px;height:24px}
.cartbtn{position:relative;display:inline-grid;place-items:center;width:44px;height:44px;color:var(--ink);text-decoration:none}
.cartbtn .ic{width:22px;height:22px}
.cartbtn .count{position:absolute;top:4px;right:1px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--ink);color:#fff;font:600 11px/18px var(--sans);text-align:center}
.cartbtn .count.bump{animation:bump .5s var(--spring)}
@keyframes bump{40%{transform:scale(1.35)}}
/* home: header floats over the night hero, turns to stone once you scroll past it */
body.home .top{position:fixed;left:0;right:0;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
body.home .top .lg-dark{display:none} body.home .top .lg-light{display:block}
body.home .top nav a,body.home .top .cartbtn,body.home .top .burger{color:#F6EFE3}
body.home .top .cartbtn .count{background:#F6EFE3;color:var(--ink)}
body.home .top.scrolled{background:rgba(243,238,230,.92);-webkit-backdrop-filter:saturate(1.2) blur(12px);backdrop-filter:saturate(1.2) blur(12px)}
body.home .top.scrolled .lg-dark{display:block} body.home .top.scrolled .lg-light{display:none}
body.home .top.scrolled nav a,body.home .top.scrolled .cartbtn,body.home .top.scrolled .burger{color:var(--ink)}
body.home .top.scrolled .cartbtn .count{background:var(--ink);color:#fff}
body.home.has-test .top{top:var(--tb,0px)}
/* mobile menu */
.msheet{position:fixed;inset:0;z-index:85;background:var(--stone);display:flex;flex-direction:column;padding:12px var(--pad) calc(28px + env(safe-area-inset-bottom));transform:translateY(-100%);transition:transform .45s var(--e)}
.msheet.open{transform:none}
.msheet-head{display:flex;justify-content:space-between;align-items:center;height:52px}
.msheet-head img{height:34px;width:auto}
.msheet nav{display:grid;margin-top:28px;border-top:1px solid var(--line)}
.msheet nav a{display:flex;justify-content:space-between;align-items:center;min-height:68px;border-bottom:1px solid var(--line);font:400 32px var(--serif);letter-spacing:-.01em;color:var(--ink);text-decoration:none}
.msheet nav a .ic{color:var(--bronze)}
.msheet .msheet-foot{margin-top:auto;display:flex;gap:24px;font-size:15px}
.msheet .msheet-foot a{color:var(--ink2);min-height:44px;display:inline-flex;align-items:center}

/* ---------- 1 hero: the wallet turning in the spotlight ---------- */
.cine{position:relative;height:100svh;min-height:560px;overflow:hidden;background:#000;color:#F6EFE3;isolation:isolate}
.cine-films{position:absolute;inset:0;display:grid}
.cine-p{position:relative;overflow:hidden;clip-path:inset(100% 0 0 0);transition:clip-path 1.4s var(--e)}
.cine-p .vid{position:absolute;inset:-6% 0 6% 0;height:108%;transform:scale(1.08);transition:transform 2.4s var(--e);background:#000;object-position:50% 50%}
.cine.on .cine-p{clip-path:inset(0)}
.cine.on .cine-p .vid{transform:scale(1)}
/* phones: the film is sized so the wallet (31–72% of the frame) fills the space between header and copy; --wa/--wh set by store.js */
@media (max-width:899px){
 .cine.fit .cine-p .vid{inset:auto;left:50%;top:calc(var(--wa) + var(--wh) * .5 - var(--wh) * 1.148);height:calc(var(--wh) * 2.22);width:auto;max-width:none;aspect-ratio:9/16;transform:translateX(-50%) scale(1.08);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent),linear-gradient(180deg,transparent,#000 10%,#000 70%,transparent 92%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent),linear-gradient(180deg,transparent,#000 10%,#000 70%,transparent 92%);mask-composite:intersect}
 .cine.fit.on .cine-p .vid{transform:translateX(-50%)}
}
.cine::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
 background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,0) 20%,rgba(0,0,0,.05) 36%,rgba(0,0,0,.62) 58%,rgba(0,0,0,.9) 100%)}
.cine-copy{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 var(--pad) calc(32px + env(safe-area-inset-bottom));max-width:var(--max);margin:0 auto}
.cine-eb{color:var(--brass);overflow:hidden;margin-bottom:14px}
.cine-eb span{display:inline-block;transform:translateY(110%);transition:transform 1s var(--e) .5s}
.cine-h{font-family:var(--serif);font-weight:400;font-size:var(--d1);line-height:.92;letter-spacing:-.025em;color:#FBF6EC;margin:0 0 16px}
.cine-h em{color:var(--brass);font-style:italic}
.cine-h .ln{display:block;overflow:hidden;padding-bottom:.06em}
.cine-h .ln>*{display:inline-block;transform:translateY(105%);transition:transform 1.15s var(--e)}
.cine-h .ln:nth-child(1)>*{transition-delay:.62s}.cine-h .ln:nth-child(2)>*{transition-delay:.78s}
.cine-lead,.cine-cta,.cine-assure{opacity:0;transform:translateY(14px);transition:opacity 1s var(--e),transform 1s var(--e)}
.cine-lead{max-width:28em;font-size:17px;line-height:1.55;color:#EDE4D6;margin-bottom:22px;transition-delay:1s}
.cine-cta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;margin-bottom:18px;transition-delay:1.12s}
.cine-cta .btn{flex:1 1 100%}
.cine-assure{display:flex;flex-wrap:wrap;gap:8px 18px;font:500 13px var(--sans);color:#D9CFBF;transition-delay:1.24s}
.cine-assure li{display:flex;align-items:center;gap:7px}.cine-assure .ic{width:16px;height:16px;color:var(--brass)}
.cine.on .cine-eb span,.cine.on .cine-h .ln>*{transform:none}
.cine.on .cine-lead,.cine.on .cine-cta,.cine.on .cine-assure{opacity:1;transform:none}
.cine-cue{display:none}
.cine :focus-visible{outline-color:var(--brass)}

/* ---------- 2 colour stage (round wheel) ---------- */
.colours{padding:clamp(72px,9vw,120px) var(--pad) var(--sec);text-align:center}
.colours .sec-head{margin-bottom:8px}
.orbit{position:relative;max-width:980px;margin:0 auto}
.ob-stage{position:relative;height:270px;touch-action:pan-y;user-select:none;-webkit-user-select:none;overflow:hidden}
.ob-ring{position:absolute;border-radius:50%;border:1px solid rgba(122,90,54,.2);background:radial-gradient(closest-side,rgba(40,30,20,.16),rgba(40,30,20,.05) 70%,rgba(40,30,20,0))}
.ob-item{position:absolute;left:50%;top:0;width:130px;aspect-ratio:800/1080;padding:0;border:0;background:none;cursor:pointer;will-change:transform;transform-origin:50% 100%;transition:opacity var(--t2) var(--e)}
.ob-item:focus-visible{outline:none}.ob-item:focus-visible .ob-tilt{outline:2px solid var(--bronze);outline-offset:6px;border-radius:var(--r-img)}
.ob-tilt{position:absolute;inset:0;transform:perspective(700px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:preserve-3d}
.ob-tilt img{position:absolute;left:50%;bottom:0;width:100%;max-width:none;height:auto;transform:translateX(-50%);transform-origin:50% 100%;pointer-events:none;-webkit-user-drag:none;transition:opacity .32s var(--e),transform .55s var(--spring)}
.ob-item.front .ob-tilt img{filter:drop-shadow(var(--sx,0) var(--sy,14px) 18px rgba(40,30,20,.28))}
.ob-cards{opacity:0;transform:translateX(-50%) translateY(6%)!important}
.ob-open{opacity:0;width:190%!important;transform:translateX(-50%) scaleX(.44)!important}
.st-cards .ob-closed{opacity:0}
.st-cards .ob-cards{opacity:1;transform:translateX(-50%) translateY(0)!important}
.st-open .ob-closed{opacity:0;transform:translateX(-50%) scaleX(.6)!important}
.st-open .ob-open{opacity:1;transform:translateX(-50%) scaleX(1)!important}
.ob-hint{display:flex;align-items:center;justify-content:center;gap:8px;margin:6px 0 18px;font:500 14px var(--sans);color:var(--mute);min-height:22px}
.ob-hint .ic{width:18px;height:18px;color:var(--bronze)}
.ob-pick{display:flex;justify-content:center;flex-wrap:wrap;gap:2px 6px;margin-bottom:22px}
.ob-sw,.sw{position:relative;display:inline-flex;flex-direction:column;align-items:center;gap:6px;min-width:56px;padding:4px 2px;background:none;border:0;cursor:pointer;font:inherit;color:inherit}
.ob-sw:hover .dot,.sw:hover .dot{transform:scale(1.06)}
.ob-sw.on .dot,.sw input:checked+.dot{box-shadow:0 0 0 2px var(--stone),0 0 0 3px var(--ink),inset 0 -6px 10px rgba(0,0,0,.12)}
.ob-sw.on .swname,.sw input:checked~.swname{color:var(--ink);font-weight:600}
/* five colours always on one row: names ("Midnight Black") wrap onto two short lines under the dot */
.swatches .sw,.ob-pick .ob-sw{flex:1 1 0;min-width:0;max-width:88px}
.ob-pick{flex-wrap:nowrap}.swatches{flex-wrap:nowrap}
.ob-buy{display:flex;flex-direction:column;align-items:center;gap:14px}
.ob-price{display:flex;align-items:baseline;gap:12px;font:600 17px var(--sans)}
.ob-eur{font:400 26px/1 var(--serif)}
.ob-buy .btn{min-width:min(300px,100%)}
.ob-fine{font-size:13px;color:var(--mute)}
.buybox .orbit .ob-stage{height:250px}.buybox .orbit .ob-item{width:118px}

/* ---------- 3 how it works: the dark band ---------- */
.how{background:var(--stone);color:var(--ink);padding:var(--sec) var(--pad)}
.how-in{max-width:var(--max);margin:0 auto;display:grid;gap:40px}
.how-film{position:relative;aspect-ratio:4/5;max-height:78svh;border-radius:var(--r-img);overflow:hidden;background:var(--stage,#ECE6DC);display:grid;place-items:center}
.how-film .vid{background:#000;object-position:50% 58%}
.how .eb{color:var(--bronze)}
.how h2{color:var(--ink);margin-bottom:28px}
.how-steps{border-top:1px solid var(--line);margin-bottom:24px}
.how-steps li{display:grid;grid-template-columns:60px 1fr;gap:12px;align-items:start;padding:22px 0;border-bottom:1px solid var(--line)}
.how-steps .n{font:italic 400 34px/1 var(--serif);color:var(--bronze);font-variant-numeric:lining-nums;letter-spacing:-.02em}
.how-steps h3{color:var(--ink)}
.how-steps p{color:var(--ink2);font-size:15.5px}
.how :focus-visible{outline-color:var(--bronze)}

/* ---------- 4 anatomy ---------- */
.anat{max-width:var(--max);margin:0 auto;padding:var(--sec) var(--pad) calc(var(--sec) * .75)}
.anat-grid{display:grid;gap:36px}
.anat-fig{position:relative;background:var(--stage);border-radius:var(--r-img);padding:8% 7%}
.anat-fig img{width:100%;height:auto;filter:var(--prod)}
.pin{position:absolute;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;background:var(--paper);color:var(--ink);font:600 12px/30px var(--sans);text-align:center;box-shadow:0 0 0 1px var(--ink),0 0 0 6px rgba(251,249,245,.55);transition:background-color var(--t2),color var(--t2),transform var(--t2) var(--spring)}
.pin::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid rgba(251,249,245,.9);animation:ping 2.6s var(--e) infinite}
.pin.hot{background:var(--ink);color:#fff;transform:translate(-50%,-50%) scale(1.15)}
@keyframes ping{0%{transform:scale(.8);opacity:1}70%,100%{transform:scale(1.6);opacity:0}}
.parts{border-top:1px solid var(--line)}
.parts li{display:grid;grid-template-columns:30px 1fr;gap:16px;align-items:start;padding:20px 0;border-bottom:1px solid var(--line)}
.parts p{font-size:15.5px;color:var(--ink2)}
.pin-n{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--ink);font:600 12px var(--sans);color:var(--ink);transition:background-color var(--t2),color var(--t2)}
.pin-n.mono{font:400 11.5px var(--serif);letter-spacing:-.04em}
.parts li.hot .pin-n{background:var(--ink);color:#fff}
.specs{margin-top:40px;border-top:1px solid var(--ink);display:grid}
.specs div{display:grid;gap:2px;padding:14px 0;border-bottom:1px solid var(--line)}
.specs dt{font:500 14px var(--sans);color:var(--mute)}
.specs dd{margin:0;font-size:16px}

/* ---------- 5 in the wild: one large + four ---------- */
.wild{max-width:var(--max);margin:0 auto;padding:0 var(--pad) var(--sec)}
.wild-grid{display:grid;grid-auto-flow:column;grid-auto-columns:76vw;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 calc(var(--pad) * -1);padding:0 var(--pad);scroll-padding:0 var(--pad)}
.wild-grid::-webkit-scrollbar{display:none}
.wild-grid li{aspect-ratio:4/5;overflow:hidden;border-radius:var(--r-img);background:var(--sand);scroll-snap-align:start}
.wild-grid img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--e)}
.wild-grid li:hover img{transform:scale(1.03)}
.wild-note{margin-top:12px;font-size:13px;color:var(--mute)}

/* ---------- 6 buy: gallery + buy box (homepage + product page) ---------- */
.buy{max-width:var(--max);margin:0 auto;padding:var(--sec) var(--pad);display:grid;gap:32px;border-top:1px solid var(--line)}
.gal{min-width:0}
.stage{position:relative;aspect-ratio:1/1;background:var(--stage);border-radius:var(--r-img);overflow:hidden}
.stage img{position:absolute;inset:10%;width:80%;height:80%;object-fit:contain;filter:var(--prod);transition:opacity .3s var(--e),transform .5s var(--e)}
.stage img.swap{opacity:0;transform:scale(.97)}
.thumbs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px;margin-top:8px;max-width:520px}
.thumbs button{position:relative;aspect-ratio:1;min-height:44px;background:var(--stage);border:1px solid transparent;border-radius:var(--r);padding:0;cursor:pointer;overflow:hidden;transition:border-color var(--t1)}
.thumbs button:hover{border-color:var(--line2)}
.thumbs button.on{border-color:var(--ink)}
.thumbs img{position:absolute;inset:12%;width:76%;height:76%;object-fit:contain}
.info{min-width:0}
.buybox .bb-title{font-size:var(--d3);line-height:1.02;margin-bottom:12px}
.bb-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px;margin-bottom:14px}
.price{font:400 34px/1 var(--serif);font-variant-numeric:lining-nums}
.bb-size{margin:-4px 0 12px;font:500 14px var(--sans);color:var(--ink2)}
/* prices + totals: the display serif's large optical sizes have hairlines that vanish at 1× density (€49 read as "C19");
   the text cut (opsz 12) keeps the Bodoni look with strokes that survive any screen */
.price,.t-price b,.tile-price,.ob-eur,.summary .tot dd,.summary-dl .tot dd,.drawer-body .dfoot .tot dd{font-variation-settings:'opsz' 12}
.bb-price s{font:400 17px var(--sans);color:var(--mute)}
.tax{font-size:13px;color:var(--mute)}
.bb-pitch{color:var(--ink2);max-width:32em;margin-bottom:24px}
.opt{border:0;margin:0 0 6px;padding:0;min-width:0}
.opt legend{font:500 14px var(--sans);color:var(--mute);margin-bottom:10px;padding:0}
.opt legend b{color:var(--ink);font-weight:600;margin-left:4px}
.swatches{display:flex;flex-wrap:wrap;gap:2px 6px;margin-left:-2px}
.sw input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.sw input:focus-visible+.dot{outline:2px solid var(--bronze);outline-offset:5px}
.colourline{font:500 14px var(--sans);color:var(--mute);margin-bottom:14px}.colourline b{color:var(--ink);font-weight:600}
.bbspecs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0 16px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:16px 0 0}
.bbspecs div{padding:12px 10px 12px 0}.bbspecs dt{font:500 13px var(--sans);color:var(--mute)}.bbspecs dd{margin:4px 0 0;font-size:15px}
.buyrow{display:flex;gap:10px;margin-top:22px}
.buyrow .qty{flex:none}
.buyrow .btn{flex:1;min-width:0;padding:0 18px}
.avail{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink2);margin-top:10px}
.avail:empty{display:none}
.avail span{width:8px;height:8px;border-radius:50%}
.doty{background:var(--ok)}.dotx{background:#A1452F}
.secure{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin-top:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.secure p{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink2)}
.secure p .ic{width:17px;height:17px;color:var(--bronze)}
.paylogos ul{display:flex;flex-wrap:wrap;gap:5px}
.paylogos li{line-height:0}
.paylogos img{height:22px;width:35px;background:#fff;border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.07)}
.pl-label{display:block;font:500 13px var(--sans);color:var(--mute);margin-bottom:8px}
.assure-list li{display:grid;grid-template-columns:20px 1fr;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);font-size:14px;line-height:1.55;color:var(--ink2)}
.assure-list .ic{width:19px;height:19px;color:var(--bronze);margin-top:1px}
.assure-list b{display:block;color:var(--ink);font-weight:600}
.assure-list a{color:var(--ink)}
.buy .info>.tlink{margin-top:12px}
.prelaunch{padding:18px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-img);margin:18px 0 6px}
.pl-h{font:600 15px var(--sans);color:var(--bronze);margin-bottom:6px}
.pl-p{font-size:15px;color:var(--ink2);margin-bottom:14px}
.pl-form{display:flex;gap:8px;flex-wrap:wrap}
.pl-form input[type=email]{flex:1 1 200px;min-height:52px;padding:0 14px;border:1px solid var(--line2);border-radius:var(--r);background:#fff;font:400 16px var(--sans);color:var(--ink)}
.pl-form input[type=email]:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(122,90,54,.18)}
.pl-form .btn{min-height:52px;flex:0 0 auto}
.pl-fine{font-size:12.5px;color:var(--mute);margin-top:8px}.pl-fine a{color:var(--ink2)}
.prelaunch .msg{color:var(--ink2)}
.prelaunch .paylogos{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
/* bundle tiers (quantity breaks across any colours) */
.tiers{border:0;margin:18px 0 0;padding:0;min-width:0;display:grid;gap:8px}
.tiers legend{font:500 14px var(--sans);color:var(--ink);margin-bottom:10px;padding:0}
.tiers legend span{color:var(--mute);font-weight:400}
.tier{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:68px;padding:10px 14px 10px 42px;border:1px solid var(--line2);border-radius:var(--r);background:var(--paper);cursor:pointer;transition:border-color var(--t1),box-shadow var(--t1),background-color var(--t1)}
.tier input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.tier::before{content:"";position:absolute;left:14px;top:50%;width:18px;height:18px;margin-top:-9px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line2);transition:box-shadow var(--t1)}
.tier.on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink);background:#fff}
.tier.on::before{box-shadow:inset 0 0 0 5px var(--ink)}
.tier:has(input:focus-visible){outline:2px solid var(--bronze);outline-offset:3px}
.t-imgs{flex:none;display:flex;align-items:flex-end;width:58px;height:44px;justify-content:center}
.t-imgs img{width:30px;height:auto;margin-left:-15px;filter:drop-shadow(0 3px 4px rgba(40,30,20,.22));transform-origin:50% 100%;transition:transform var(--t2) var(--spring)}
.t-imgs img:first-child{margin-left:0}
.t-imgs.n2 img:nth-child(1){transform:rotate(-7deg)}.t-imgs.n2 img:nth-child(2){transform:rotate(7deg) translateY(-1px)}
.t-imgs.n3 img:nth-child(1){transform:rotate(-11deg)}.t-imgs.n3 img:nth-child(2){transform:translateY(-3px);position:relative;z-index:1}.t-imgs.n3 img:nth-child(3){transform:rotate(11deg)}
.tier.on .t-imgs img{filter:drop-shadow(0 4px 6px rgba(40,30,20,.3))}
.t-main{flex:1;display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px}.t-main b{font:600 15px var(--sans)}.t-main small{flex-basis:100%;font-size:12.5px;color:var(--mute)}
.t-tag{display:inline-block;margin-left:0;padding:2px 8px;border-radius:99px;background:var(--ink);color:#FBF6EC;font:600 11px/1.5 var(--sans);font-style:normal;vertical-align:1px}
.t-price{display:grid;justify-items:end;gap:2px;text-align:right}.t-price b{font:400 22px/1 var(--serif);font-variant-numeric:lining-nums}
.t-save{font:600 12px var(--sans);color:var(--bronze)}
.xpicks{display:grid;gap:4px;margin-top:10px;padding:12px 14px;border-radius:var(--r);background:var(--paper);border:1px dashed var(--line2)}
.xpick{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.xlabel{font:500 13.5px var(--sans);color:var(--mute)}.xlabel b{color:var(--ink);font-weight:600;margin-left:4px}
.xdots{display:flex;gap:0}
.xdots .sw{min-width:40px;padding:2px}.xdots .dot{width:24px;height:24px}
.buybox.has-tiers .buyrow .qty{display:none}
.ob-bundle{font:600 13.5px var(--sans);color:var(--bronze)}
.shop-bundle{max-width:var(--max);margin:0 auto 28px;padding:12px var(--pad);display:flex;align-items:center;gap:10px;font:500 15px var(--sans);color:var(--ink2)}
.shop-bundle .ic{color:var(--bronze);flex:none}
.bprice{font-size:13px;color:var(--bronze)}
.summary .bsave dt,.summary .bsave dd{color:var(--bronze);font-weight:600}
.bnudge{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:14px 0 0;padding:12px 14px;border-radius:var(--r);background:var(--paper);border:1px solid var(--line);font-size:14px;color:var(--ink2)}
.bnudge a{font-weight:600;color:var(--ink);display:inline-flex;align-items:center;min-height:44px}
.bprog{display:flex;gap:4px;flex:1 0 100%}.bprog i{flex:1;height:5px;border-radius:3px;background:var(--line)}.bprog i.on{background:var(--ink)}
.bmore{min-height:44px;padding:0 16px;border-radius:99px;border:1px solid var(--ink);background:var(--ink);color:#FFFDF9;font:600 14px/1 var(--sans);cursor:pointer}
/* product page accordion */
.acc{margin-top:24px;border-top:1px solid var(--ink)}
.acc details,.qa details{border-bottom:1px solid var(--line)}
.acc summary,.qa summary{list-style:none;cursor:pointer;min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 0;font:600 16px/1.4 var(--sans);transition:color var(--t1)}
.acc summary::-webkit-details-marker,.qa summary::-webkit-details-marker{display:none}
.acc summary:hover,.qa summary:hover{color:var(--bronze)}
.acc summary .ic,.qa summary .ic{color:var(--bronze);transition:transform var(--t2) var(--e)}
.acc details[open] summary .ic,.qa details[open] summary .ic{transform:rotate(45deg)}
.acc details>p,.acc .dl,.acc .specs,.acc .shiptable{margin-bottom:18px;color:var(--ink2);font-size:15px}
.dl li{display:flex;gap:12px;align-items:center;padding:6px 0}
.dl .ic{color:var(--bronze)}
.crumbs{max-width:var(--max);margin:0 auto;padding:6px var(--pad) 0;display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;font-size:13.5px;color:var(--mute)}
.adhook{max-width:var(--max);margin:0 auto;padding:10px var(--pad) 4px}
.adhook-h{font:400 clamp(28px,7.4vw,44px)/1.05 var(--serif);color:var(--ink);letter-spacing:-.01em;text-wrap:balance}
html.has-hook .pdp .crumbs{display:none}
.crumbs a{color:var(--ink2);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}.crumbs a:hover{text-decoration:underline}
.pdp-buy{padding-top:24px;border-top:0}

/* ---------- 7 questions ---------- */
.faq{background:var(--paper);padding:var(--sec) var(--pad)}
.faq-in{max-width:820px;margin:0 auto}
.faq h2{margin-bottom:28px}
.qa{border-top:1px solid var(--ink)}
.qa summary{font-weight:500;font-size:17px;min-height:64px}
.qa details p{padding:0 40px 22px 0;color:var(--ink2);max-width:42em}
.qa details p a{color:var(--ink)}
.faqmore{margin-top:24px;color:var(--ink2)}.faqmore a{color:var(--ink)}

/* ---------- 8 closer ---------- */
.closer{text-align:center;padding:var(--sec) var(--pad)}
.closer-h{font:400 var(--d2)/1.02 var(--serif);letter-spacing:-.02em;margin-bottom:28px}
.closer-fine{margin-top:16px;font-size:13.5px;color:var(--mute)}

/* ---------- sticky buy bars (phones only) ---------- */
.bar,.pbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(251,249,245,.96);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .4s var(--e)}
.bar.show,.pbar.show{transform:none}
.bar b,.pbar b{display:block;font:600 14px var(--sans)}
.bar span,.pbar span{font-size:13px;color:var(--mute)}

/* ---------- footer ---------- */
.foot{background:var(--night);color:#BFB6A8;padding:72px var(--pad) calc(96px + env(safe-area-inset-bottom))}
.foot .in{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:32px 20px}
.foot .mono{height:56px;width:auto;opacity:.92}
.foot .brand{grid-column:1/-1}.foot .brand p{font:italic 400 21px var(--serif);color:#D8CFC1;margin-top:12px}
.foot .fcol{display:grid;align-content:start}
.foot .fcol b{color:#F2EADD;font:600 14px var(--sans);margin-bottom:4px}
.foot a,.foot .linkbtn{color:#E3DACC;text-decoration:none;font-size:14.5px;min-height:44px;display:inline-flex;align-items:center;text-align:left}
.foot a:hover,.foot .linkbtn:hover{color:#fff;text-decoration:underline}
.foot .fpay{grid-column:1/-1;padding-top:24px;border-top:1px solid var(--nline)}
.foot .fpay .pl-label{color:#968D80}
.foot small{grid-column:1/-1;font-size:12.5px;color:#968D80}
.foot :focus-visible{outline-color:var(--brass)}

/* ---------- page heads, shop ---------- */
.pagehead{max-width:var(--max);margin:0 auto;padding:clamp(40px,7vw,96px) var(--pad) clamp(24px,3vw,40px)}
.pagehead h1{font-size:clamp(44px,6vw,76px);line-height:1;margin-bottom:14px}
.tiles{max-width:var(--max);margin:0 auto;padding:0 var(--pad);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 12px}
.tile{display:grid;gap:12px;align-content:start;min-width:0}
.tile-link{display:grid;gap:12px;text-decoration:none;color:var(--ink)}
.tile-img{position:relative;aspect-ratio:4/5;background:var(--stage);border-radius:var(--r-img);overflow:hidden;display:grid;place-items:center}
.tile-img img{width:76%;height:auto;filter:var(--prod);transition:transform 1s var(--e)}
.tile-link:hover .tile-img img{transform:translateY(-4px) scale(1.03)}
.tile-meta{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 8px}
/* long colour names (Middernachtzwart) break at the compound, never push the grid wider than the phone */
.tile-name{display:flex;align-items:center;gap:9px;min-width:0;font:600 16px var(--sans);-webkit-hyphens:auto;hyphens:auto;overflow-wrap:anywhere}
.tile-name .dot{flex:none}
.tile-name .dot{width:14px;height:14px}
.tile-price{font:400 21px/1 var(--serif)}
@media (max-width:719px){.tiles .tile:first-child{grid-column:1/-1}.tiles .tile:first-child .tile-img{aspect-ratio:4/3}
 .tiles .tile:first-child .tile-img img{position:absolute;top:9%;bottom:9%;left:0;right:0;margin:auto;width:auto;height:82%;max-width:none}}
.tile .btn{white-space:nowrap}
@media (max-width:719px){.tiles .tile:not(:first-child) .btn{padding:0 10px;font-size:14px}.tiles .tile:not(:first-child) .btn .ic{display:none}}
.hshop{max-width:var(--max);margin:0 auto;padding:var(--sec) 0 0}
.hshop .sec-head{padding:0 var(--pad)}
.hshop .tiles{padding-bottom:0}
.shop-assure{max-width:var(--max);margin:clamp(48px,6vw,80px) auto 0;padding:24px var(--pad) var(--sec);display:flex;flex-wrap:wrap;gap:12px 32px;border-top:1px solid var(--line);font-size:14.5px;color:var(--ink2)}
.shop-assure li{display:flex;align-items:center;gap:10px}.shop-assure .ic{color:var(--bronze)}

/* ---------- cart page + drawer ---------- */
.cartwrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad) var(--sec);display:grid;gap:28px;align-items:start}
.lines{border-top:1px solid var(--line)}
.line{display:grid;grid-template-columns:84px 1fr auto;gap:16px;padding:18px 0;border-bottom:1px solid var(--line);align-items:start}
.orderview .line,.thanks .line{grid-template-columns:1fr auto}
.limg{width:84px;height:84px;background:var(--stage);border-radius:var(--r);display:grid;place-items:center}
.limg img{max-width:72%;max-height:80%;object-fit:contain;filter:drop-shadow(0 8px 10px rgba(40,30,20,.16))}
.lmain{display:grid;gap:2px;font-size:15px}
.lmain b{font-weight:600}
.lrow{display:flex;align-items:center;gap:16px;margin-top:10px}
.lrow .linkbtn{font-size:14px;color:var(--mute)}
.lrow .linkbtn:hover{color:var(--ink)}
.lprice{font:500 15px var(--sans);white-space:nowrap}
.line.bad .limg{opacity:.5}
.warn{color:var(--err);font-size:13.5px}
.summary dl,.summary-dl{margin:0 0 18px}
.summary dl div,.summary-dl div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:8px 0;font-size:15px}
.summary dt small,.summary-dl dt small{display:block;color:var(--mute);font-size:12.5px;margin-top:2px}
.summary dd,.summary-dl dd{margin:0;text-align:right}
.summary .shipto{align-items:center}
.summary .tot,.summary-dl .tot{border-top:1px solid var(--ink);margin-top:8px;padding-top:16px;align-items:baseline}
.summary .tot dt,.summary-dl .tot dt{font:600 16px var(--sans)}
.summary .tot dd,.summary-dl .tot dd{font:400 30px/1 var(--serif)}
.summary .tot small{font-weight:400}
.freehint{display:block;color:var(--bronze);font-size:12.5px;margin-top:2px}
.paysm{display:flex;gap:8px;align-items:center;justify-content:center;font-size:13px;color:var(--mute);margin:14px 0 10px}
.paysm .ic{width:16px;height:16px;color:var(--bronze)}
.summary .paylogos ul{justify-content:center}
.summary .cnote{text-align:center}
.summary>.tlink{display:flex;justify-content:center;margin-top:6px}
.cartwrap .summary{background:var(--paper);border-radius:var(--r-img);padding:22px}
.empty{display:grid;justify-items:start;gap:14px;padding:28px 0}
.empty>p:first-child{font:400 30px/1.1 var(--serif)}
.empty .empty-sub{color:var(--ink2);margin-top:-6px}
.empty-cols{list-style:none;margin:6px 0 10px;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;width:100%;max-width:560px}
.empty-cols a{display:grid;gap:6px;justify-items:center;text-align:center;font:500 12px/1.25 var(--sans);color:var(--ink2);text-decoration:none;min-height:44px}
.empty-cols span{display:block;width:100%;aspect-ratio:4/5;background:var(--stage);border-radius:var(--r);position:relative;overflow:hidden;transition:transform var(--t2) var(--e)}
.empty-cols img{position:absolute;inset:10%;width:80%;height:80%;object-fit:contain;filter:var(--prod)}
.empty-cols a:hover span{transform:translateY(-3px)}
.empty-cols a:hover{color:var(--ink)}
/* cart loading: real lines from the local catalogue, only the prices shimmer */
.skb{display:block;height:14px;width:56px;border-radius:4px;background:linear-gradient(90deg,var(--line) 0,rgba(255,255,255,.6) 50%,var(--line) 100%);background-size:200% 100%;animation:sk 1.2s linear infinite}
.sk-sum{display:grid;gap:12px;padding:18px 0}.sk-sum .skb{width:100%}.sk-sum .skb.w{height:52px;border-radius:var(--r)}
@keyframes sk{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.skb{animation:none}}
.notice.fail{display:grid;gap:12px;justify-items:start}
.drawer{position:fixed;inset:0;z-index:80}
.drawer-bg{position:absolute;inset:0;background:rgba(21,19,17,.38);opacity:0;transition:opacity var(--t2) var(--e)}
.drawer-panel{position:absolute;top:0;right:0;bottom:0;width:min(440px,100%);background:var(--stone);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .4s var(--e);box-shadow:-20px 0 60px rgba(21,19,17,.12)}
.drawer-panel.wide{width:min(640px,100%)}
.drawer.open .drawer-bg,#od:not([hidden]) .drawer-bg{opacity:1}
.drawer.open .drawer-panel,#od:not([hidden]) .drawer-panel{transform:none}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px 10px 24px;border-bottom:1px solid var(--line)}
.drawer-head h2{font-size:28px}
.drawer-body{flex:1;overflow:auto;padding:0 24px;display:flex;flex-direction:column}
.drawer-body .lines{border-top:0}
/* drawer: items + details scroll as one; only Total + Checkout stay pinned (a pinned full summary left phones no room to scroll) */
.drawer-body .sumd{margin-top:auto;padding:14px 0 4px;border-top:1px solid var(--line)}
.drawer-body .sumd dl{margin-bottom:4px}
.drawer-body .summary dl div{padding:5px 0}
.drawer-body .sumd .paysm{margin-top:10px}
.drawer-body .dfoot{position:sticky;bottom:0;z-index:2;padding:0 0 calc(14px + env(safe-area-inset-bottom));background:var(--stone)}
.drawer-body .dfoot dl{margin:0 0 12px}
.drawer-body .dfoot .tot{margin-top:0;padding-top:14px}
.drawer-body .dfoot .msg:empty{min-height:0;margin:0}

/* ---------- forms, order, thanks ---------- */
.formpage{max-width:var(--max);margin:0 auto}
.formpage .pagehead{max-width:640px}
.form{max-width:640px;margin:0 auto;padding:0 var(--pad) var(--sec);display:grid;gap:20px}
.form .btn{justify-self:start}
.orderview{max-width:640px;margin:0 auto;padding:8px var(--pad) 40px}
.onum{font-size:15px;margin-bottom:6px}.ostatus{font:400 30px var(--serif);margin-bottom:14px;text-transform:capitalize}
.thanks .tactions{max-width:640px;margin:0 auto;padding:0 var(--pad) var(--sec);display:flex;gap:20px;align-items:center;flex-wrap:wrap}

/* ---------- FAQ page, legal + help pages ---------- */
.page-faq{background:var(--stone);padding:clamp(40px,7vw,96px) var(--pad) var(--sec)}
.page-faq h1{font-size:clamp(44px,6vw,76px);line-height:1;margin-bottom:28px}
.page-faq details{border-bottom:1px solid var(--line)}
.page-faq summary{list-style:none;cursor:pointer;min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 0;font:500 17px/1.4 var(--sans)}
.page-faq summary::-webkit-details-marker{display:none}
.page-faq summary:hover{color:var(--bronze)}
.page-faq summary .ic{color:var(--bronze);transition:transform var(--t2) var(--e)}
.page-faq details[open] summary .ic{transform:rotate(45deg)}
.page-faq details p{padding:0 40px 22px 0;color:var(--ink2);max-width:42em}
.page-faq .faqgroup+details{border-top:1px solid var(--ink)}
.faqgroup{font:italic 400 22px var(--serif)!important;letter-spacing:0;color:var(--bronze);margin:44px 0 10px}
.page{max-width:760px;margin:0 auto;padding:clamp(40px,7vw,96px) var(--pad) var(--sec);color:var(--ink2)}
.page h1{font-size:clamp(44px,6vw,72px);line-height:1;margin-bottom:24px}
.page h2{font-size:28px;margin:44px 0 10px}
.page p{margin-bottom:12px;max-width:66ch}
.page a{color:var(--ink)}
.page .btn{margin-top:28px;color:inherit}
.page .btn.solid{color:#FBF6EC}
.legal .seller{padding:14px 16px;background:var(--paper);border-radius:var(--r);font-size:14px;margin:8px 0 20px;line-height:1.9}
.legal .seller b{display:block;font:600 14px var(--sans);color:var(--ink)}
.shiptable{width:100%;border-collapse:collapse;margin:8px 0 14px;font-size:15px}
.shiptable th,.shiptable td{text-align:left;padding:12px 10px 12px 0;border-bottom:1px solid var(--line);vertical-align:top}
.shiptable th{font:500 13.5px var(--sans);color:var(--mute)}
.shiptable td:nth-child(2){white-space:nowrap;color:var(--ink);font-weight:500}
.shiptable.sm{font-size:14px}.shiptable.sm td{padding:9px 10px 9px 0}
.plain{list-style:disc;padding-left:20px;display:grid;gap:8px;margin:8px 0 12px}
.plain.big{list-style:none;padding:0;font:400 26px var(--serif)}
.form-model{padding:16px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);font-size:14px;line-height:2}
.updated{margin-top:40px;font-size:13px;color:var(--mute)}
.notfound{text-align:left}
.page .acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin-top:28px}.page .acts .btn{margin-top:0}

/* ---------- consent + toast ---------- */
.consent{position:fixed;left:8px;right:8px;bottom:8px;z-index:90;max-width:520px;padding:14px 16px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-img);box-shadow:var(--pop);display:grid;gap:12px;font-size:13.5px;color:var(--ink2)}
.consent-h{font:600 15px var(--sans);color:var(--ink)}
.consent-p a{color:var(--ink)}
.consent-btns{display:flex;gap:8px}.consent-btns .btn{flex:1;min-height:46px;padding:0 12px}
.consent-more{display:flex;justify-content:space-between;align-items:center;gap:10px}
.consent-more .linkbtn{font-size:14px;color:var(--ink2)}
.consent-opts{display:grid;gap:2px;border-top:1px solid var(--line);padding-top:8px}
.c-short{display:none}
/* phones (2026-10-15): compact bar so the banner no longer covers the bundle choice — same two equal buttons, full text under Kies per categorie */
@media (max-width:699px){.consent{left:0;right:0;bottom:0;border-radius:14px 14px 0 0;border-width:1px 0 0;padding:10px 14px calc(10px + env(safe-area-inset-bottom));gap:8px;font-size:13px;line-height:1.4}
 .consent-h{display:none}.consent .c-long{display:none}.consent .c-short{display:inline}
 .consent.more .c-long{display:inline}.consent.more .c-short{display:none}
 .consent-btns .btn{min-height:40px;font-size:14px}.consent-more .linkbtn{min-height:28px;font-size:12.5px;color:var(--mute)}}
@media (max-width:699px){.consent{padding:8px 12px calc(8px + env(safe-area-inset-bottom));gap:6px;font-size:12px;line-height:1.35}.consent-btns .btn{min-height:38px;font-size:13.5px}.consent-more .linkbtn{min-height:24px;font-size:12px}}   /* 2026-10-19: slimmer on phones (was a quarter of the screen) */
.contact-facts{list-style:none;max-width:640px;margin:calc(var(--sec) * -.5) auto var(--sec);padding:0 var(--pad)}
.contact-facts li:first-child{border-top:1px solid var(--line)}
.copt{display:flex;gap:12px;align-items:flex-start;padding:8px 0;cursor:pointer}
.copt input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--ink);flex:none}
.copt b{display:block;font-weight:600;color:var(--ink)}.copt small{display:block;font-size:13px;color:var(--mute)}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,calc(100% + 40px));visibility:hidden;z-index:95;padding:12px 18px;background:var(--ink);color:#fff;font-size:14px;border-radius:var(--r);transition:transform var(--t2) var(--e),visibility 0s var(--t2)}
.toast.show{transform:translate(-50%,0);visibility:visible;transition:transform var(--t2) var(--e)}

/* ---------- preview / review markers ---------- */
.testbar{display:flex;gap:10px;align-items:center;padding:7px var(--pad);background:#2B2620;color:#F1E9DC;font-size:12.5px;line-height:1.5}
.testbar .ic{width:15px;height:15px;color:var(--brass)}
.tb-more{display:none}
.tbc{display:inline-block;vertical-align:middle;margin-left:6px;padding:2px 7px;border:1px dashed #B0864F;color:#7A5A36;background:#FBF3E6;font:600 10px/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.review{display:flex;gap:10px;padding:12px 14px;background:#FBF3E6;border:1px dashed #B0864F;font-size:14px;margin-bottom:16px}
.review .ic{color:var(--bronze);margin-top:2px}

/* ---------- admin (unchanged) ---------- */
.admin .top nav{display:none}
.adm-title{font:400 22px var(--serif);margin-right:auto}
.adm-mode{font:600 11px var(--sans);letter-spacing:.14em;padding:5px 9px;background:var(--sand)}
.adm-mode.live{background:#4F7A4A;color:#fff}.adm-mode.test{background:#E7C98F}
.adm{max-width:var(--max);margin:0 auto;padding:28px var(--pad) 80px}
.adm-login{max-width:420px;margin:40px auto;padding:0}
.adm-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:20px;overflow-x:auto}
.adm-tabs button{min-height:44px;padding:0 16px;background:none;border:0;border-bottom:2px solid transparent;font:600 14px var(--sans);cursor:pointer;color:var(--mute)}
.adm-tabs button.on{color:var(--ink);border-bottom-color:var(--ink)}
.adm-filter{display:flex;gap:12px;align-items:end;margin-bottom:16px}
.adm-filter label{display:grid;gap:6px;font:600 13px var(--sans)}
.adm-table{width:100%;border-collapse:collapse;font-size:14px;background:var(--paper)}
.adm-table th,.adm-table td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.adm-table th{font:600 11px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.adm-table tr[data-n]{cursor:pointer}.adm-table tr[data-n]:hover{background:var(--stone)}
.adm-table input{min-height:40px;width:90px}
.adm-table.small td{padding:7px 0}
#orders,#stock,#stats{overflow-x:auto}
.st{display:inline-block;padding:3px 8px;font:600 11px var(--sans);letter-spacing:.06em;text-transform:uppercase;background:var(--sand);white-space:nowrap}
.st-paid,.st-fulfilled{background:#DDE8D6}.st-refunded,.st-cancelled,.st-payment_failed{background:#F0D9D2}.st-paid_review,.st-partially_refunded{background:#F3E2BF}.st-abandoned{background:#ECE7E0;color:var(--mute)}
.adm-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:16px 0;font-size:14px}
.adm-act{padding:16px 0 0;margin:0;max-width:none;border-top:1px solid var(--line)}
.adm-act h3{font:400 22px var(--serif)}
.chk{display:flex;gap:10px;align-items:center;min-height:44px;font-size:14px}
.adm-msg{padding:14px 0;border-bottom:1px solid var(--line)}.adm-msg.done{opacity:.5}.pre{white-space:pre-wrap;margin:8px 0}

/* ===================== mobile pass (2026-10-12): swipe gallery, zoom, delivery date, narrow phones ===================== */
.stage .track{position:absolute;inset:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.stage .track::-webkit-scrollbar{display:none}
.slide{position:relative;flex:0 0 100%;scroll-snap-align:center;border:0;background:none;padding:0;cursor:zoom-in}
.slide:focus-visible{outline-offset:-4px}
/* evidence slides: the film of the cards rising and the in-hand photo fill the frame (photos, not cut-outs) */
.slide.full img,.vslide video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:none}
/* the film is portrait: shown whole (cards rise to the top edge), its own frame blurred behind it fills the square */
.vslide{cursor:default;background:#c8b39b;overflow:hidden}
.vslide::before{content:'';position:absolute;inset:-30px;background:var(--poster) center/cover;filter:blur(26px) saturate(.9);opacity:.85}
.vslide video{object-fit:contain}
.slide .shown{position:absolute;left:12px;bottom:12px;z-index:2;padding:5px 10px;border-radius:99px;background:rgba(246,239,227,.92);font:500 12.5px/1.2 var(--sans);color:var(--ink2)}
.vslide .vbtn{z-index:3}
.thumbs .tfull img{inset:0;width:100%;height:100%;object-fit:cover}
.thumbs .tfilm .ic{position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;padding:5px;box-sizing:content-box;border-radius:50%;background:rgba(14,13,11,.55);color:#F6EFE3}
.zoom{position:fixed;inset:0;z-index:96;display:flex;flex-direction:column;background:var(--paper);opacity:0;transition:opacity .2s var(--e)}
.zoom.open{opacity:1}
.zoom-bar{display:flex;align-items:center;justify-content:space-between;padding:calc(6px + env(safe-area-inset-top)) 10px 6px 18px;font:500 14px var(--sans);color:var(--mute)}
.zoom-view{flex:1;overflow:hidden;display:grid;place-items:center;cursor:zoom-in;touch-action:pinch-zoom}
.zoom-view img{max-width:min(92vw,900px);max-height:78svh;width:auto;height:auto;object-fit:contain;filter:var(--prod)}
.zoom-view.z2{overflow:auto;display:block;cursor:zoom-out;touch-action:auto}
.zoom-view.z2 img{max-width:none;max-height:none;width:200vw;margin:0 auto}
@media (min-width:1000px){.zoom-view.z2 img{width:1400px}}
.zoom-nav{display:flex;align-items:center;justify-content:center;gap:16px;padding:6px 10px calc(10px + env(safe-area-inset-bottom))}
.zoom-hint{font-size:13px;color:var(--mute)}
.ic.flip{transform:scaleX(-1)}
.eta{display:flex;align-items:center;gap:8px;margin:-4px 0 14px;font:600 14px/1.4 var(--sans);color:var(--ink)}
.eta .ic{width:18px;height:18px;color:var(--ok)}
/* buy box (2026-10-19): three outcome lines under the pitch + ordered → shipped → delivered timeline under the pay logos */
.bb-ben{list-style:none;margin:-10px 0 22px;padding:0;display:grid;gap:9px}
.bb-ben li{display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:center;font:500 14.5px/1.4 var(--sans);color:var(--ink)}
.bb-ben .ic{width:18px;height:18px;color:var(--bronze)}
.eta-steps{list-style:none;margin:0;padding:16px 0 14px;display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line);position:relative}
.eta-steps::before{content:"";position:absolute;top:33px;left:16.66%;right:16.66%;border-top:1px dashed var(--line2)}
.eta-steps li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;font-size:12.5px;line-height:1.35;color:var(--mute);position:relative}
.eta-steps .es-ic{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--paper);border:1px solid var(--line2);margin-bottom:5px}
.eta-steps li:last-child .es-ic{border-color:var(--ok)}
.eta-steps .ic{width:16px;height:16px;color:var(--bronze)}
.eta-steps li:last-child .ic{color:var(--ok)}
.eta-steps b{font:600 13px/1.3 var(--sans);color:var(--ink)}
.ferr{margin:-2px 0 0;font:500 13.5px var(--sans);color:var(--err)}
.vbtn{position:absolute;z-index:3;right:12px;bottom:12px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(14,13,11,.5);color:#F6EFE3;display:grid;place-items:center;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.vbtn .ic{width:18px;height:18px}
.cine .vbtn{top:calc(var(--tb,32px) + 76px);bottom:auto;right:var(--pad)}
@media (min-width:900px){.cine .vbtn{top:auto;bottom:28px}}
body.kb .bar,body.kb .pbar,body.consent-open .bar,body.consent-open .pbar{transform:translateY(110%)!important}
body.locked .consent{visibility:hidden}   /* cart drawer, menu or zoom open: the cookie banner never covers Checkout; it returns on close */
@media (max-width:400px){
 .line{grid-template-columns:64px 1fr auto;gap:12px}.limg{width:64px;height:64px}.lrow{flex-wrap:wrap;gap:4px 12px}
 .drawer-body{padding:0 16px}.drawer-head{padding-left:16px}
 .t-ship{display:none}.t-imgs{width:46px}.t-imgs img{width:26px;margin-left:-13px}
 .tier{padding:10px 12px 10px 36px;gap:8px}.tier::before{left:11px}
 .swatches,.ob-pick{gap:2px 4px}
}
/* ===================== phones + tablets: rotating announcement ===================== */
@media (max-width:999px){
 .announce ul{position:relative;height:32px;padding:0}
 .announce li{position:absolute;inset:0;justify-content:center;opacity:0;animation:annc 12s infinite}
 .announce li:nth-child(2){animation-delay:4s}.announce li:nth-child(3){animation-delay:8s}
 @keyframes annc{0%{opacity:0;transform:translateY(4px)}3%,31%{opacity:1;transform:none}34%,100%{opacity:0;transform:translateY(-4px)}}   /* cross-fade: the next line is in before the last one is gone (was a blank bar between lines) */
}
@media (max-width:430px){
 .paylogos ul{gap:4px}.paylogos img{width:33px;height:21px}
 .buyrow .btn .ic{display:none}
}

/* ===================== ≥ 720: tablets ===================== */
@media (min-width:720px){
 .ob-stage{height:360px}.ob-item{width:180px}.buybox .orbit .ob-stage{height:300px}.buybox .orbit .ob-item{width:140px}
 .wild-grid{grid-auto-flow:row;grid-template-columns:repeat(4,1fr);overflow:visible;margin:0;padding:0}
 .wild-grid.n5 li:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
 .wild-grid.n5{grid-template-rows:auto auto}
 .tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 20px}
 .specs{grid-template-columns:repeat(2,1fr);column-gap:40px}
 .foot .in{grid-template-columns:1.4fr 1fr 1fr 1fr}
 .foot .brand{grid-column:auto}
 .consent{left:24px;bottom:24px;padding:18px;font-size:14px}
 .cine-cta .btn{flex:0 0 auto}
}

/* ===================== ≥ 900: hero composition ===================== */
@media (min-width:900px){
 .tb-more{display:inline}
 .p-n{position:absolute;top:0;bottom:0;right:4%;width:min(48vw,760px)}
 .p-n .vid{inset:-4% 0;height:108%}
 .p-n::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#000 0%,rgba(0,0,0,0) 26%,rgba(0,0,0,0) 80%,#000 100%),linear-gradient(180deg,rgba(0,0,0,0) 70%,#000 100%)}
 .cine::after{background:linear-gradient(90deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 55%)}
 .cine-copy{top:0;padding-bottom:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
 .cine-copy>*{max-width:560px}
 .cine-h{font-size:clamp(76px,7.2vw,124px);margin:0 0 24px}
 .cine-lead{font-size:18px;margin-bottom:28px}
 .cine-cue{display:block;position:absolute;left:50%;top:calc(100% - 26px);z-index:2;width:44px;height:44px;transform:translate(-50%,-50%)}
 .cine-cue span{position:absolute;left:50%;top:6px;width:1px;height:28px;background:rgba(246,239,227,.35);overflow:hidden}
 .cine-cue span::after{content:"";position:absolute;left:0;top:-100%;width:1px;height:100%;background:#F6EFE3;animation:cue 2.2s var(--e) infinite}
 @keyframes cue{to{top:100%}}
}

/* ===================== ≥ 1000: desktop compositions ===================== */
@media (min-width:1000px){
 .top nav{display:flex;margin-right:12px}
 .burger{display:none}
 .how-in{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(56px,7vw,112px);align-items:center}
 .how-film{max-height:none}
 .how-steps li{grid-template-columns:76px 1fr;padding:26px 0}
 .how-steps .n{font-size:42px}
 .anat-grid{grid-template-columns:1.3fr 1fr;gap:clamp(56px,6vw,96px);align-items:center}
 .parts li{transition:background-color var(--t2)}
 .buy{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:clamp(48px,6vw,96px);align-items:start}
 .buy .gal{position:sticky;top:96px}
 .tiles{grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}
 .cartwrap{grid-template-columns:minmax(0,1fr) 400px;gap:56px}
 .cartwrap>.notice,.cartwrap>.empty,.cartwrap>p{grid-column:1/-1}
 .cartwrap>.summary{position:sticky;top:96px}
 .bar,.pbar{display:none}
 .foot{padding-bottom:56px}
 .consent{left:auto;right:24px;max-width:380px}
}

/* ===================== touch screens: no sticky hover after a tap (press feedback comes from :active) ===================== */
@media (hover:none){
 .btn:hover{background:transparent;color:var(--ink)}
 .btn.solid:hover{background:var(--ink);border-color:var(--ink);color:#FBF6EC}
 .btn.light:hover{background:#FBF6EC;border-color:#FBF6EC}
 .btn[disabled]:hover{background:var(--sand);border-color:var(--sand);color:var(--mute)}
 .btn:hover .ic,.tlink:hover .ic{transform:none}
 .btn:active{background:var(--ink);color:#FBF6EC}.btn.light:active{background:#fff;color:var(--ink)}
 .qty button:hover,.iconbtn:hover{background:none}
 .qty button:active,.iconbtn:active{background:rgba(21,19,17,.08)}
 .tile-link:hover .tile-img img,.wild-grid li:hover img{transform:none}
 .ob-sw:hover .dot,.sw:hover .dot{transform:none}
 .acc summary:hover,.qa summary:hover,.page-faq summary:hover{color:inherit}
}
/* ===================== reduced motion: everything still works, nothing moves ===================== */
@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{transition:none!important;animation:none!important}
 .rv{opacity:1;transform:none}.rv-img{clip-path:none}
 .cine-p{clip-path:none}.cine-p .vid{transform:none}
 .cine-eb span,.cine-h .ln>*{transform:none}.cine-lead,.cine-cta,.cine-assure{opacity:1;transform:none}
 .announce li{animation:none!important;opacity:0}.announce li:first-child{opacity:1}
 .ob-tilt img{transition:opacity .2s!important}
}
/* limited-time offer (catalog bundle.promo) */
.promo-line{display:flex;align-items:center;gap:8px;margin:14px 0 -4px;padding:9px 12px;background:var(--night);color:#F3EADB;font:600 13px/1.35 var(--sans);border-radius:6px}
.promo-line .ic{width:15px;height:15px;color:var(--brass);flex:none}
.t-tag.t-promo{background:var(--bronze)}   /* art direction 2026-10-26: brand bronze, not alarm red */
[data-promo][hidden]{display:none!important}
/* trust pass 2026-10-16: colour-preview note, added-to-cart line, next steps, plain summaries */
.gal-note{display:flex;gap:8px;align-items:flex-start;margin:10px 0 0;font-size:13px;line-height:1.45;color:var(--mute)}
.gal-note .ic{width:16px;height:16px;flex:none;margin-top:1px;color:var(--bronze)}
.gal-note[hidden]{display:none}
.drawer-added{margin:0;padding:10px 24px;background:var(--paper);border-bottom:1px solid var(--line);font:500 14px/1.4 var(--sans);color:var(--ok)}
.drawer-added.warn{color:var(--err)}
.drawer-added[hidden]{display:none}
.capnote{display:block;margin-top:6px;font-size:13px}
.handoff{margin:10px 0 0;font-size:13px;line-height:1.45;color:var(--mute);text-align:center}
/* cart reminder opt-in (unticked by default; email field shows after ticking) */
.summary .remind{margin:6px 0 14px}.remind .chk{align-items:flex-start;padding-top:10px;line-height:1.45}.remind .chk input{width:20px;height:20px;margin:1px 0 0;flex:none;accent-color:var(--ink)}
.remind .field{margin-top:6px}.remind .field small{display:block;margin-top:6px}
.shipto dt .freehint{display:block;font-weight:400;max-width:24ch}
.tnext{margin-top:28px;padding:20px 22px;background:var(--paper);border-radius:var(--r)}
.tnext h2{font:600 17px var(--sans);margin:0 0 10px}
.tnext ol{margin:0 0 12px;padding-left:20px;display:grid;gap:8px;font-size:15px;line-height:1.5}
.tnext p{margin:0;font-size:14.5px;color:var(--ink2)}
.inshort{margin:8px 0 28px;padding:18px 22px;background:var(--paper);border-left:2px solid var(--bronze);border-radius:0 var(--r) var(--r) 0}
.inshort b{display:block;font:600 15px var(--sans);margin-bottom:8px}
.inshort ul{margin:0;padding-left:18px;display:grid;gap:6px;font-size:15px;line-height:1.5}
.foot .fq{grid-column:1/-1;margin:0;font-size:14.5px;color:#D8CFC1}
.foot .fq a{min-height:0;display:inline;text-decoration:underline}
@media (max-width:640px){.drawer-added{padding:10px 16px}.tnext{padding:16px}.inshort{padding:14px 16px}}
.tnext ol{list-style:decimal}
.announce a{display:inline-flex;align-items:center;gap:8px;padding:9px 0;margin:-9px 0}
/* phones: a long notice wraps to two short lines inside the bar instead of pushing the page sideways (320 px overflowed before) */
@media (max-width:999px){
 .announce ul{height:34px}
 .announce li{padding:0 var(--pad);white-space:normal;text-align:center;line-height:1.2;overflow:hidden}
 .announce li .ic{flex:none}
 .announce a{padding:0;margin:0;min-height:34px}
}
.inshort ul{list-style:disc}

/* ---- accessories (2026-10-18, preview-only products: belt, key organizer, bracelet) ---- */
.pdp-simple .eta{display:flex;gap:.4rem;align-items:center;margin:.4rem 0}
.pdp-simple .tbc{display:inline-block;font-size:.7rem;padding:.05rem .35rem;border:1px dashed #b4561f;color:#b4561f;margin-left:.3rem;vertical-align:middle}
/* ---- accessory PDP v2 (2026-10-18) ---- */
@media (max-width:760px){.pdp-simple .crumbs{display:none}}
.pdp-simple .bb-pitch{font-size:1.05rem}
.opt-pills .swatches{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0}
.opt-pills .sw{max-width:none;min-height:48px;flex-direction:row;justify-content:center;padding:0 12px;border:1px solid var(--line2);border-radius:var(--r);background:var(--paper);cursor:pointer;transition:border-color .15s cubic-bezier(.23,1,.32,1),box-shadow .15s cubic-bezier(.23,1,.32,1),transform .12s cubic-bezier(.23,1,.32,1)}
.opt-pills .sw:active{transform:scale(.97)}
.opt-pills .swname{font:500 14px/1.2 var(--sans);color:var(--ink2);white-space:nowrap}
.opt-pills .sw:has(input:checked){border-color:var(--ink);box-shadow:0 0 0 1px var(--ink);background:#fff}
.opt-pills .sw:has(input:focus-visible){outline:2px solid var(--bronze);outline-offset:3px}
.opt-pills .sw input{position:absolute;opacity:0;pointer-events:none}
.sizetip{font-size:.85rem;opacity:.75;margin:.35rem 0 .2rem}
.setline{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;justify-content:space-between;border:1px solid var(--line2);border-radius:var(--r);padding:.7rem .85rem;margin:.75rem 0 .25rem;background:var(--paper);transition:border-color .18s cubic-bezier(.23,1,.32,1),box-shadow .18s cubic-bezier(.23,1,.32,1),background-color .18s cubic-bezier(.23,1,.32,1)}
.setline:has([data-setcheck]:checked){border-color:var(--ink);box-shadow:0 0 0 1px var(--ink);background:#fff}
.setcheck{display:flex;align-items:center;gap:.7rem;cursor:pointer;flex:1 1 260px}
.setcheck input{width:20px;height:20px;accent-color:var(--ink,#151311);flex:none}
.setcheck img{width:56px;height:56px;object-fit:contain;flex:none;background:var(--stage);border-radius:var(--r);padding:4px}
.setcheck span{display:flex;flex-wrap:wrap;gap:.15rem .45rem;align-items:baseline;line-height:1.3}
.setcheck em{font-style:normal;font-weight:600}
.setcheck small{font-size:.78rem;color:var(--bronze,#8a6a46)}
.setcol{font-size:15px;display:flex;gap:.5rem;align-items:center}
.setcol select{appearance:none;-webkit-appearance:none;min-height:44px;padding:0 36px 0 12px;font:500 16px var(--sans);color:var(--ink);border:1px solid var(--line2);border-radius:var(--r);background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6359' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center/16px}
.feats,.psize,.morerow{padding:var(--sec) var(--pad)}
.feats .sec-head,.morerow .sec-head{padding:0}
.feat-grid{list-style:none;padding:0;margin:0 auto;max-width:var(--max);display:grid;gap:var(--gap);grid-template-columns:1fr}
@media (min-width:860px){.feat-grid{grid-template-columns:repeat(3,1fr)}}
.feat-grid img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-img,0);background:#e9e3d9;margin-bottom:1rem}
.feat-grid h3{font:400 1.6rem/1.15 var(--serif);margin:0 0 .4rem}
.feat-grid p{margin:0;opacity:.8}
.psize{background:#ebe5db}
.psize-in{max-width:var(--max);margin:0 auto;display:grid;gap:var(--gap);align-items:center}
@media (min-width:860px){.psize-in:has(figure){grid-template-columns:1fr 1fr}}
.psize-in img{width:100%;height:auto;border-radius:var(--r-img,0)}
.size-steps{margin:24px 0 0;padding:0;display:grid;gap:.8rem;font-size:1.02rem;line-height:1.6;color:var(--ink2);max-width:34em;list-style:none}
.pdp-simple .how-film img{width:100%;height:100%;object-fit:cover}
.pdp-simple .how-film:has(img){aspect-ratio:1/1;background:var(--stage)}
@media (max-width:999px){.pdp-simple .how-film:has(img){display:none}}
@media (max-width:760px){.pdp-simple .m-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin:0 0 .7rem;font-size:1.05rem}.pdp-simple .m-head b{font:400 1.45rem/1.1 var(--serif)}}
.pdp-simple .gal .thumbs{grid-auto-columns:minmax(0,84px)}
.pdp-simple .acc-orbit .ob-item{aspect-ratio:1/1;width:150px}
.pdp-simple .acc-orbit .ob-stage{height:230px}
.pdp-simple .acc-hint{margin:0 0 10px}
.pdp-simple .acc-orbit + .opt{margin-top:0}
.acc-orbit .ob-tilt{transition:scale .2s cubic-bezier(.23,1,.32,1)}
.acc-orbit .ob-item.bump .ob-tilt{scale:.96;transition-duration:.1s}

/* three-lens review fixes (2026-10-18) */
.pdp-simple .stage img:is([src*="/img/key-"],[src*="/img/brc-"]){inset:0;width:100%;height:100%;object-fit:cover;filter:none}
.pdp-simple .thumbs img:is([src*="/img/key-"],[src*="/img/brc-"]){inset:0;width:100%;height:100%;object-fit:cover}
.zoom-view img:is([src*="/img/key-"],[src*="/img/brc-"]){filter:none}
.pdp-simple .rv{transform:translateY(8px);transition:opacity .4s cubic-bezier(.23,1,.32,1),transform .4s cubic-bezier(.23,1,.32,1)}
.pdp-simple .rv.in{transform:none}
.pdp-simple .rv-img{transition:clip-path .6s cubic-bezier(.23,1,.32,1)}
.pdp-simple li.rv:nth-child(2){transition-delay:.04s}.pdp-simple li.rv:nth-child(3){transition-delay:.08s}.pdp-simple li.rv:nth-child(4){transition-delay:.12s}.pdp-simple li.rv:nth-child(5){transition-delay:.16s}
@media (prefers-reduced-motion:reduce){.pdp-simple .rv{transform:none}}
.pdp-simple .wild{padding-top:var(--sec)}
@media (min-width:720px){.pdp-simple .wild-grid.n3{grid-template-columns:repeat(3,1fr)}.pdp-simple .wild{max-width:none}.pdp-simple .wild>*{max-width:var(--max);margin-left:auto;margin-right:auto}}
@media (min-width:1000px){
 .pdp-simple .how-in:not(:has(.how-film)){grid-template-columns:1fr}
 .pdp-simple .how-in:not(:has(.how-film)) .how-copy{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:clamp(56px,7vw,112px);align-items:start}
 .pdp-simple .how-in:not(:has(.how-film)) .how-copy>:not(.how-steps){grid-column:1}
 .pdp-simple .how-in:not(:has(.how-film)) .how-steps{grid-column:2;grid-row:1/span 3}
}
.pdp-simple .stage img:is([src*="/img/belt-03"],[src*="/img/belt-06"],[src*="/img/belt-09"]){inset:0;width:100%;height:100%;object-fit:cover;filter:none}
.pdp-simple .thumbs img:is([src*="/img/belt-03"],[src*="/img/belt-06"],[src*="/img/belt-09"]){inset:0;width:100%;height:100%;object-fit:cover}
.zoom-view img:is([src*="/img/belt-03"],[src*="/img/belt-06"],[src*="/img/belt-09"]){filter:none}
/* benefit-led sections (2026-10-18) */
.cmp{padding:var(--sec) var(--pad)}
.cmp .sec-head{padding:0}
.cmp{background:#ebe5db}
.cmp-wrap{max-width:860px;margin:0 auto;overflow-x:auto;-webkit-overflow-scrolling:touch}
.cmp-t{width:100%;border-collapse:collapse;font-size:.95rem;background:var(--paper);border-radius:var(--r-img);overflow:hidden}
.cmp-t th,.cmp-t td{padding:14px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line2)}
.cmp-t thead th{font:600 .82rem/1.2 var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--mute)}
.cmp-t thead th.us{color:var(--ink)}
.cmp-t tbody th{font:500 .95rem/1.35 var(--sans);color:var(--ink);width:34%}
.cmp-t td{color:var(--ink2);line-height:1.4}
.cmp-t td .ic{width:16px;height:16px;margin-right:8px;vertical-align:-3px}
.cmp-t td .ic.ok{color:#3c6e47}.cmp-t td .ic.no{color:#a14b3a}
.cmp-t td.us{background:rgba(255,255,255,.65);color:var(--ink)}
@media (max-width:600px){.cmp-t th,.cmp-t td{padding:12px 12px;font-size:.9rem}.cmp-t thead tr,.cmp-t tbody tr{display:grid;grid-template-columns:1fr 1fr}.cmp-t thead th:first-child{display:none}.cmp-t tbody th{grid-column:1/-1;width:auto;border-bottom:0;padding:14px 12px 2px;font-weight:600}}
/* delivery promise (2026-10-18): next to the buy button, cart shipment groups, thank-you + order look-up parcels */
.pdeliv{display:flex;gap:12px;align-items:flex-start;margin:14px 0 4px;padding:12px 14px;border:1px solid var(--line2);border-radius:var(--r);background:rgba(255,255,255,.55)}
.pdeliv .ic{width:20px;height:20px;flex:none;margin-top:2px;color:var(--ink)}
.pdeliv p{margin:0;display:grid;gap:2px;line-height:1.4}.pdeliv b{font-weight:600;color:var(--ink)}.pdeliv span{color:var(--ink2);font-size:.92rem}.pdeliv small{color:var(--mute);font-size:.84rem}
.line .lsrc{display:block;font-size:.82rem;color:var(--mute);margin-top:2px}
.parcels{margin:18px 0 6px;padding:16px;border:1px solid var(--line2);border-radius:var(--r);background:rgba(255,255,255,.55)}
.parcels h3{font:500 1.05rem/1.3 var(--sans);margin:0 0 10px}
.parcels ol,.parcels-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.parcels li,.parcels-list li{display:grid;gap:2px;padding:12px 14px;background:var(--paper);border-radius:var(--r);line-height:1.4}
.parcels .pn,.parcels-list .pn{font:600 .74rem/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin-bottom:4px}
.parcels .pw,.parcels-list .pw{font-weight:600;color:var(--ink)}
.parcels>p{margin:10px 0 0;font-size:.88rem}
.parcels-list .pst{justify-self:start;font:600 .78rem/1 var(--sans);padding:5px 8px;border-radius:99px;background:#ebe5db;margin-bottom:4px}
.parcels-list .warn{color:#a14b3a;font-size:.9rem}
/* online withdrawal ("herroepingsknop", 2026-10-18) */
.wdhint{max-width:640px;margin:24px auto 0;padding:0 var(--pad) var(--sec);color:var(--ink2);font-size:.92rem}
.withdraw{margin:26px 0 0;padding:16px;border:1px solid var(--line2);border-radius:var(--r);background:rgba(255,255,255,.55)}
.withdraw h2{font:400 1.4rem/1.2 var(--serif);margin:0 0 6px}.withdraw p{margin:0 0 10px;color:var(--ink2)}
.withdraw .wdi{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line2)}
.withdraw .field{display:grid;gap:4px;margin:12px 0}.withdraw .field input{padding:10px;border:1px solid var(--line2);border-radius:var(--r);font:inherit}
/* ===== design v7 (2026-10-18 review): one stage, one card, quiet section heads ===== */
.how-film > img[src*="/img/cards-"]{width:62%;height:auto;filter:var(--prod)}
.how .tlink.light{color:var(--ink);text-decoration-color:rgba(21,19,17,.28)} .how .tlink.light:hover{text-decoration-color:currentColor}
.acc-row{max-width:var(--max);margin:0 auto;padding:var(--sec) var(--pad)} .shop > .acc-row{padding-top:0} .cine + .acc-row{padding-bottom:0}
.acc-row h2{font:600 20px/1.3 var(--sans);letter-spacing:0;margin:0 0 16px}
.acc-cards{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 12px}
@media (min-width:860px){.acc-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 20px}}
.acc-cards a{display:flex;flex-direction:column;gap:4px;text-decoration:none;color:var(--ink)}
.ac-img{display:grid;place-items:center;aspect-ratio:4/5;margin-bottom:8px;background:var(--stage,#ECE6DC);border-radius:var(--r-img);overflow:hidden}
.ac-img img{width:70%;height:70%;object-fit:contain;filter:var(--prod);transition:transform 1s var(--e)}
.acc-cards a:hover .ac-img img{transform:translateY(-4px) scale(1.03)}
.acc-cards b{font:600 15px/1.3 var(--sans)} .ac-l{font-size:13px;line-height:1.4;color:var(--mute)} .acc-cards em{font:500 15px/1.3 var(--sans);font-style:normal}
.ac-dots{display:flex;gap:6px;margin:2px 0;font-style:normal} .ac-dots .dot{width:12px;height:12px}
/* the buckle wheel is the picker: the pill grid stays for keyboards + screen readers, visually hidden */
.pdp-simple .acc-orbit ~ .opt-pills .swatches{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pdp-simple .acc-orbit:has(~ .opt-pills input:focus-visible) .ob-stage{outline:2px solid var(--bronze);outline-offset:4px;border-radius:var(--r-img)}
/* section heads: one display heading per section, no italic kicker above every section (kept on the hero, colour stage and page heads) */
.sec-head .eb:not(.c),.how .eb,.faq .eb,.psize .eb{display:none}
.faq h2{font:600 20px/1.3 var(--sans);letter-spacing:0;margin-bottom:16px}
/* order page: withdrawal line inside the form column */
.form:has(+ .wdhint){padding-bottom:0}


/* 2026-10-19 Test Lab: lifestyle scenes fill the stage; supplier photos full-size on white (they have their own backgrounds) */
.pdp-simple .stage{aspect-ratio:4/5}
.pdp-simple.gsq .stage{aspect-ratio:1/1}   /* gallery_square: square graphics (text, steps) show whole instead of cropped to 4:5 */
.pdp-simple .stage img[src*="-scene"]{inset:0;width:100%;height:100%;object-fit:cover;filter:none}
.pdp-simple .stage img:is([src*="-shot"],[src*="/img/scr-0"]){inset:0;width:100%;height:100%;object-fit:contain;filter:none;background:#fff}
.pdp-simple .thumbs img{object-fit:cover}
/* accessory upsell (2026-10-19): limited-time 2nd item, one checkbox under the add button */
.upsell{display:flex;gap:12px;align-items:flex-start;margin:12px 0 2px;padding:12px 14px;border:1.5px dashed var(--bronze);border-radius:12px;background:var(--paper);cursor:pointer}
.upsell input{width:20px;height:20px;margin-top:2px;accent-color:var(--ink);flex:none}
.upsell span{font:500 14px/1.45 var(--sans);color:var(--ink)}
.upsell b{font-weight:600}.upsell s{color:var(--mute);margin-left:2px}.upsell em{font-style:normal;font-weight:700;color:var(--err);margin-left:4px}
.upsell small{display:block;color:var(--mute);font-size:12.5px;margin-top:2px}
/* own-stock studio photos (Slim, Kaartclip) carry their own background: fill the frame instead of floating inside it (2026-10-25) */
.pdp-simple .stage img:is([src*="/img/clip-0"],[src*="/img/slim-"]){inset:0;width:100%;height:100%;object-fit:cover;filter:none}
.tile-img img:is([src*="/img/clip-0"],[src*="/img/slim-"]){position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:none}
.tile-link:hover .tile-img img:is([src*="/img/clip-0"],[src*="/img/slim-"]){transform:scale(1.03)}
.ac-img img:is([src*="/img/clip-0"],[src*="/img/slim-"]){width:100%;height:100%;object-fit:cover;filter:none}

/* ---------- polish pass 2026-10-25: one offer, three models, one gallery frame ----------
   The offer is told once, the same way, wherever a wallet is chosen. The three wallets are alternatives: one card frame
   (4:5 on the stage colour; the pop-up's cut-out sits on it, the studio photos fill it), the same facts in the same order. */
.offer-strip{display:flex;align-items:flex-start;gap:10px;width:fit-content;max-width:100%;margin:18px 0 0;padding:11px 14px;border:1px solid var(--line2);border-radius:var(--r);background:var(--paper);font:500 14px/1.45 var(--sans);color:var(--ink2)}
.offer-strip b{color:var(--ink);font-weight:600}
.offer-strip .ic{width:18px;height:18px;color:var(--bronze);margin-top:1px}
.offer-mix{display:flex;gap:10px;align-items:flex-start;margin:10px 0 0;font:500 13.5px/1.45 var(--sans);color:var(--ink2)}
.offer-mix .ic{width:17px;height:17px;color:var(--bronze);margin-top:1px}
.offer-mix a{color:var(--ink);font-weight:600}

/* model cards: phones = one row per model (photo left, words right); from 720px three columns, photo on top */
.mcards{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.mcard a{display:grid;grid-template-columns:minmax(108px,36%) 1fr;gap:16px;align-items:center;padding:8px;border:1px solid var(--line);border-radius:var(--r-img);background:var(--paper);color:var(--ink);text-decoration:none;transition:border-color var(--t2) var(--e)}
.mcard a:hover{border-color:var(--line2)}
.mc-img{position:relative;display:block;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;background:var(--stage)}
.mc-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--e)}
.mc-img.cut img{inset:9% 15%;width:70%;height:82%;object-fit:contain;filter:var(--prod)}
.mcard a:hover .mc-img img{transform:scale(1.03)}
.mc-body{display:grid;gap:4px;align-content:center;padding-right:6px}
.mc-name{font:400 23px/1.08 var(--serif);letter-spacing:-.01em}
.mc-line{font-size:14px;line-height:1.45;color:var(--ink2)}
.mc-col{display:flex;align-items:center;gap:8px;margin-top:2px;font-size:13px;color:var(--mute)}
.mc-dots{display:flex;gap:4px;font-style:normal}.mc-dots .dot{width:12px;height:12px}
.mc-price{margin-top:6px;font:400 21px/1 var(--serif);font-variant-numeric:lining-nums;font-variation-settings:'opsz' 12}
@media (min-width:720px){
 .mcards{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
 .mcards.n2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:720px}
 .mcard a{grid-template-columns:1fr;gap:14px;align-items:start;padding:0;border:0;background:none}
 .mc-img{border-radius:var(--r-img)}
 .mc-body{padding:0}
}
/* homepage: the collection right under the hero, compact head (no display-size headline) */
.models{max-width:var(--max);margin:0 auto;padding:clamp(48px,7vw,96px) var(--pad) 0}
.models-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px 32px;margin-bottom:clamp(18px,3vw,32px)}
.models-head h2{font-size:var(--d3)}
.models-head .eb{margin-bottom:10px}
.models-head .offer-strip{margin:0}
/* product pages: "Liever een ander model?" */
.mrow{max-width:var(--max);margin:0 auto;padding:var(--sec) var(--pad)}
.mrow-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-bottom:18px}
.mrow-head h2{font:600 20px/1.3 var(--sans);letter-spacing:0}
.mrow-head .offer-strip{margin:0}
/* shop: chooser, then the differences side by side */
.shop .pagehead .offer-strip{margin-top:22px}
.shop-models{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.cmpm{max-width:var(--max);margin:0 auto;padding:clamp(56px,7vw,96px) var(--pad) 0}
.cmpm .sec-head{margin-bottom:18px}.cmpm h2{font-size:var(--d3)}
.cmpm-t{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.45}
.cmpm-t th,.cmpm-t td{text-align:left;vertical-align:top;padding:14px 16px 14px 0;border-bottom:1px solid var(--line)}
.cmpm-t thead th{padding-top:0;padding-bottom:4px;border-bottom:1px solid var(--ink);font:600 15px/1.3 var(--sans)}
.cmpm-t thead a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:none}.cmpm-t thead a:hover{text-decoration:underline}
.cmpm-t tbody th{width:16%;font-weight:500;color:var(--mute)}
.cmpm-t .mc-dots{display:inline-flex;margin-right:8px;vertical-align:-1px}
.cmpm-t .num{font:400 19px/1.2 var(--serif);font-variant-numeric:lining-nums;font-variation-settings:'opsz' 12}
@media (max-width:719px){   /* phones: the row label above its three cells (roles keep it a table for screen readers) */
 .cmpm-t,.cmpm-t thead,.cmpm-t tbody{display:block}
 .cmpm-t tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:12px;border-bottom:1px solid var(--line)}
 .cmpm-t.n2 tr{grid-template-columns:repeat(2,minmax(0,1fr))}
 .cmpm-t th,.cmpm-t td{border:0;padding:4px 0 12px}
 .cmpm-t thead tr{border-bottom:1px solid var(--ink)}.cmpm-t thead th{padding:0 0 2px;border:0;font-size:13.5px}
 .cmpm-t thead th:first-child{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 .cmpm-t tbody th{grid-column:1/-1;width:auto;padding:12px 0 2px;font-size:12.5px}
 .cmpm-t tbody td{font-size:13.5px}
}
/* buy box: one-colour models show their colour as a line; a one-colour 2nd wallet needs no colour row */
.colourline{display:flex;align-items:center;gap:8px}.colourline .dot{width:18px;height:18px}
.xpicks[data-solo]{display:none!important}
.pdp-simple .t-imgs img{width:30px;height:37px;object-fit:cover;border-radius:3px}
/* one gallery frame for every model: 4:5 (the hand film is 3:4, so it fills the frame instead of floating in blur) */
.pdp .stage{aspect-ratio:4/5}
.vslide::before{content:none}
.vslide{background:var(--stage)}
.vslide video{object-fit:cover}
@media (min-width:1000px){.pdp-buy .gal{max-width:600px}}
/* empty cart: the three models */
.empty-models{grid-template-columns:repeat(3,minmax(0,1fr));max-width:460px;gap:12px}
.empty-models span img{inset:0;width:100%;height:100%;object-fit:cover;filter:none}
.empty-models span.cut img{inset:10%;width:80%;height:80%;object-fit:contain;filter:var(--prod)}
.empty-models a{font-size:13px;gap:4px}.empty-models em{font-style:normal;color:var(--mute)}
/* tablets: the 4:5 gallery would fill the whole screen; keep it to a photo the buy box can follow */
@media (min-width:600px) and (max-width:999px){.pdp-buy .gal{width:100%;max-width:520px}}
/* phones: both product templates drop the breadcrumb (the menu has Shop) so price + colour come up a screen sooner */
@media (max-width:760px){.pdp .crumbs{display:none}.pdp-buy{padding-top:14px}}


/* ---------- reviews (2026-10-20, docs/REVIEWS.md): product-page block + the review form behind the mail link ---------- */
.revs{background:var(--stone);padding:var(--sec) var(--pad)}
.revs-in{max-width:820px;margin:0 auto}
.revs h2{margin-bottom:24px}
.revs-sum{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px}
.revs-short{margin:10px 0 0;padding-bottom:24px;border-bottom:1px solid var(--line);color:var(--ink2);font-size:15px}
.rv-avg{font:400 64px/1 var(--serif);font-variation-settings:'opsz' 12;letter-spacing:-.02em}
.rv-of{color:var(--mute);font-size:15px}
.rv-n{color:var(--ink2);font:500 15px var(--sans)}
.rv-st{display:inline-flex;gap:2px;font-size:18px;line-height:1;color:var(--line2)}
.rv-st .on{color:var(--ink)}
.revs-list{list-style:none;margin:0;padding:0}
.rvw{padding:24px 0;border-bottom:1px solid var(--line)}
.rv-head{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px}
.rv-name{font:600 15px var(--sans)}
.rv-ver{display:inline-flex;align-items:center;gap:6px;font:500 13px var(--sans);color:var(--ok)}
.rv-ver::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.rv-meta{margin:6px 0 0;color:var(--mute);font-size:14px}
.rv-text{margin:10px 0 0;color:var(--ink2);white-space:pre-line;overflow-wrap:anywhere}
.rv-ph{display:inline-block;margin-top:12px;border-radius:var(--r-img);overflow:hidden}
.rv-ph img{display:block;width:120px;height:120px;object-fit:cover}
.revs-more{margin:24px 0}
.revs-how{margin-top:0;border-bottom:1px solid var(--line)}
.revs-how summary{list-style:none;cursor:pointer;min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:16px;font:600 15px/1.4 var(--sans)}
.revs-how summary::-webkit-details-marker{display:none}
.revs-how summary .ic{color:var(--bronze);transition:transform var(--t2) var(--e)}
.revs-how[open] summary .ic{transform:rotate(45deg)}
.revs-how p{margin:0 0 16px;color:var(--ink2);font-size:15px}
.revpage .rv-wrap{max-width:640px;margin:0 auto;padding:0 var(--pad) var(--sec)}
.revpage .form{padding:0;margin:0 0 28px;max-width:none}
.rv-state{color:var(--ink2);margin:0 0 20px}
.rv-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-img);padding:clamp(20px,4vw,32px)!important}
.rv-item{font:600 18px/1.3 var(--sans);letter-spacing:0;margin:0}
.rv-stars{border:0;margin:0;padding:0;display:flex;align-items:center;flex-wrap:wrap;gap:2px}
.rv-stars legend{font:600 14px var(--sans);margin-bottom:6px;padding:0;width:100%}
.rv-stars label{position:relative;display:grid;place-items:center;width:48px;height:48px;cursor:pointer}
.rv-stars input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.rv-stars .st{font-size:34px;line-height:1;color:var(--line2);transition:color var(--t1)}
.rv-stars input:focus-visible+.st{outline:2px solid var(--bronze);outline-offset:4px;border-radius:2px}
.rv-stars[data-val="1"] label:nth-of-type(-n+1) .st,.rv-stars[data-val="2"] label:nth-of-type(-n+2) .st,.rv-stars[data-val="3"] label:nth-of-type(-n+3) .st,
.rv-stars[data-val="4"] label:nth-of-type(-n+4) .st,.rv-stars[data-val="5"] label:nth-of-type(-n+5) .st{color:var(--ink)}
.rv-word{margin-left:10px;font:500 15px var(--sans);color:var(--ink2)}
.rv-count{justify-self:end;color:var(--mute);font-size:13px}
.rv-prev{display:flex;align-items:center;gap:16px}
.rv-prev img{width:96px;height:96px;object-fit:cover;border-radius:var(--r)}
.rv-consent{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--ink2);cursor:pointer}
.rv-consent input{flex:none;width:22px;height:22px;margin:1px 0 0;accent-color:var(--ink)}
.rv-done{margin:0;color:var(--ink2)}
.field input[type=file]{min-height:0;padding:10px}
.addon{margin:28px 0 0;padding:22px;border:1px solid var(--line);border-radius:var(--r-img);background:var(--paper)}.addon h2{font:400 26px/1.15 var(--serif);margin:0 0 8px}.addon p{margin:0 0 16px;color:var(--ink2)}
.addon-sw{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}.addon-sw button{display:flex;flex-direction:column;align-items:center;gap:4px;width:76px;padding:6px;border:1px solid var(--line);border-radius:var(--r);background:var(--stone);font:500 12px/1.2 var(--sans);color:var(--ink2);cursor:pointer}.addon-sw button[aria-checked=true]{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}.addon-sw img{width:56px;height:56px;object-fit:cover;border-radius:6px}
.fsign{grid-column:1/-1;max-width:520px;margin:8px 0 0}.fsign b{display:block;font:600 15px var(--sans);margin:0 0 4px}.fsign p{margin:0 0 10px;font-size:14px;opacity:.8}
.fsign-row{display:flex;gap:8px}.fsign-row input{flex:1;min-width:0;min-height:48px;padding:0 14px;border-radius:99px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);color:inherit;font:400 15px var(--sans)}.fsign-row .btn{min-height:48px;white-space:nowrap}
.fsign-ok{display:flex;gap:10px;align-items:flex-start;margin:10px 0 0;font-size:12.5px;line-height:1.45;opacity:.85}.fsign-ok input{width:18px;height:18px;flex:0 0 18px;margin:1px 0 0}.fsign .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}.fsign .msg{margin:8px 0 0;font-size:13.5px}
.wel-code{font:600 30px/1 var(--sans);letter-spacing:.08em;padding:20px;border:1px dashed var(--ink);border-radius:var(--r-img);text-align:center;margin:0 0 24px;user-select:all}
.fsign .btn{background:#F3EEE6;color:#151311;border-color:#F3EEE6}
.welcomepage .wel-code{margin:0 var(--pad) 24px}.welcomepage .tactions{padding:0 var(--pad)}

/* ===================== store v2 (2026-10-26): navigation, listings, cards, search ===================== */
/* one card image system: every -cut file is a transparent cut-out on the stone stage, wherever older rules forced 'cover' */
.ac-img img[src*="-cut"],.pdp-simple .stage img[src*="-cut"],.stage img[src*="-cut"]{inset:10%;width:80%;height:80%;object-fit:contain;filter:var(--prod);background:none}
.ac-img img[src*="-cut"]{width:76%;height:76%}
/* header: collections menu (≥1100), magnifier everywhere */
.top nav.mnav{gap:0}
.mnav ul{display:flex;align-items:center;gap:clamp(14px,1.6vw,26px);list-style:none;margin:0;padding:0}
.mn{position:static}
.top nav.mnav .mn-top{white-space:nowrap}
.top nav.mnav .mn-top[aria-current]::after{transform:none}
.mn-drop{position:absolute;left:0;right:0;top:100%;background:var(--stone);border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:0 18px 40px rgba(21,19,17,.08);
 opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity var(--t2) var(--e),transform var(--t2) var(--e),visibility 0s linear var(--t2)}
.mn:focus-within:not(.shut) .mn-drop{opacity:1;visibility:visible;transform:none;transition-delay:0s}
@media (hover:hover) and (pointer:fine){.mn:hover:not(.shut) .mn-drop{opacity:1;visibility:visible;transform:none;transition-delay:.08s}}
.mn-in{max-width:var(--max);margin:0 auto;padding:28px var(--pad) 32px;display:grid;grid-template-columns:minmax(220px,1fr) 3fr;gap:40px}
.top nav.mnav .mn-drop a{color:var(--ink);padding:0;min-height:44px}
.top nav.mnav .mn-drop a::after{display:none}
.mn-types{display:grid!important;align-content:start;gap:2px!important}
.mn-types a{font:400 15px var(--sans)!important;color:var(--ink2)!important}
.mn-types a:hover{color:var(--ink)!important;text-decoration:underline}
.mn-types b{font-weight:600;color:var(--ink)}
.mn-picks{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px!important}
.top nav.mnav .mn-picks a{display:grid;grid-template-columns:72px 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:center;font:500 14px/1.35 var(--sans)}
.mn-picks .ac-img{grid-row:span 2;width:72px;margin:0}
.mn-picks em{font-style:normal;color:var(--mute);font-weight:400}
body.home .top:not(.scrolled) .mn-drop a{color:var(--ink)}
.srchbtn{color:var(--ink)} body.home .top .srchbtn{color:#F6EFE3} body.home .top.scrolled .srchbtn{color:var(--ink)}
.srchbtn .ic{width:22px;height:22px}
@media (min-width:1000px) and (max-width:1099px){.top nav.mnav{display:none}.burger{display:inline-grid}}
@media (min-width:1100px){.top .in{position:relative}.top .logo{margin-right:clamp(16px,2.4vw,40px)}.top nav.mnav{margin-right:auto}}
/* phone menu */
.msheet{overflow-y:auto;-webkit-overflow-scrolling:touch}
.msheet-h{margin:22px 0 0;font-size:13px;color:var(--mute)}
.msheet nav{margin-top:8px}
.msheet nav a{min-height:58px;font-size:27px}
.msheet .msheet-foot{flex-wrap:wrap;gap:4px 22px;padding-top:24px}
.msrch{margin-top:14px}
/* search form + dialog */
.srch-form{display:flex;align-items:center;gap:10px;min-height:54px;padding:0 6px 0 16px;background:var(--paper);border:1px solid var(--line2);border-radius:var(--r)}
.srch-form:focus-within{border-color:var(--ink)}
.srch-form .ic{color:var(--mute)}
.srch-form input{flex:1;min-width:0;min-height:52px;border:0;background:none;font:400 16px var(--sans);color:var(--ink);outline:none}
.srch-form input::-webkit-search-cancel-button{-webkit-appearance:none}
.srch{position:fixed;inset:0;z-index:90}
.srch-bg{position:absolute;inset:0;background:rgba(14,13,11,.42);opacity:0;transition:opacity var(--t2)}
.srch-panel{position:relative;background:var(--stone);padding:14px var(--pad) 22px;padding-top:calc(14px + env(safe-area-inset-top));max-height:88vh;overflow-y:auto;transform:translateY(-12px);opacity:0;transition:transform var(--t2) var(--e),opacity var(--t2)}
.srch.open .srch-bg{opacity:1}.srch.open .srch-panel{transform:none;opacity:1}
.srch-panel > *{max-width:760px;margin-left:auto;margin-right:auto}
.srch-qh{margin:18px auto 4px;font-size:13px;color:var(--mute)}
.srch-quick ul{display:flex;flex-wrap:wrap;gap:8px}
.srch-quick a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--line2);border-radius:99px;text-decoration:none;font-size:14.5px;color:var(--ink)}
.srch-quick a:hover{border-color:var(--ink)}
.srch-rows{margin-top:10px}
.srch-rows a{display:grid;grid-template-columns:56px 1fr auto;gap:14px;align-items:center;min-height:68px;padding:6px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.srch-rows .ac-img{width:56px;margin:0}
.srch-rows b{display:block;font:500 15px/1.3 var(--sans)}.srch-rows small{color:var(--mute);font-size:13px}
.srch-rows em{font-style:normal;font-size:14.5px}
.srch-all{margin-top:8px}.srch-msg{margin-top:16px;color:var(--ink2);font-size:15px}
/* listing pages */
.plp{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.plp .crumbs{padding-left:0;padding-right:0}
.plp-head{padding:clamp(12px,3vw,32px) 0 clamp(16px,2.4vw,28px)}
.plp-head h1{font-size:clamp(40px,5.6vw,68px);line-height:1.02;margin-bottom:10px}
.plp-head .lead{font-size:16.5px}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--pad) * -1);padding:2px var(--pad) 14px;scroll-snap-type:x proximity}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;min-height:44px;padding:0 18px;border:1px solid var(--line2);border-radius:99px;background:transparent;font:500 14.5px var(--sans);color:var(--ink);cursor:pointer;scroll-snap-align:start;transition:background-color var(--t1),border-color var(--t1),color var(--t1)}
.chip:hover{border-color:var(--ink)}
.chip.on,.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#FBF6EC}
.plp-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:22px;position:sticky;top:64px;z-index:5;background:rgba(243,238,230,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.plp-count{font-size:14px;color:var(--mute);white-space:nowrap}
.plp-tools{display:flex;gap:8px;align-items:center}
.plp-fbtn{min-height:44px;padding:0 12px;white-space:nowrap}
.plp-fbtn.on{background:var(--ink);color:#FBF6EC}
.plp-sort{position:relative;display:inline-flex;align-items:center}
.plp-sort select{appearance:none;-webkit-appearance:none;min-height:44px;padding:0 36px 0 14px;border:1px solid var(--ink);border-radius:var(--r);background:transparent;font:500 14px var(--sans);color:var(--ink);cursor:pointer;max-width:40vw;text-overflow:ellipsis}
.plp-sort .ic{position:absolute;right:10px;width:16px;height:16px;pointer-events:none}
.plp-filters{display:grid;gap:18px;padding:4px 0 24px;margin-bottom:22px;border-bottom:1px solid var(--line)}
.plp-filters fieldset{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.plp-filters legend{width:100%;margin-bottom:8px;font:600 14px var(--sans)}
.fopt{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px 0 12px;border:1px solid var(--line2);border-radius:99px;font-size:14.5px;cursor:pointer}
.fopt input{width:18px;height:18px;accent-color:var(--ink)}
.fopt:has(input:checked){border-color:var(--ink);background:var(--paper)}
.fbtns{display:flex;justify-content:space-between;align-items:center}
.plp-empty{padding:40px 0 60px;text-align:center;display:grid;justify-items:center;gap:16px;color:var(--ink2)}
.plp-cmp{margin-top:clamp(56px,7vw,96px)}
.plp-cmp .cmpm{padding-left:0;padding-right:0}
.plp-more{margin-top:clamp(56px,7vw,96px)}
.plp-more h2,.srch-none h2{font-size:clamp(28px,3vw,38px);margin-bottom:22px}
.srch-none h2:not(:first-child){margin-top:48px}
.srchpage .srch-form{max-width:640px}
.srchpage .plp-count{margin:16px 0 20px}
/* the product card (one everywhere) */
.pgrid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 12px}
@media (min-width:700px){.pgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 18px}}
@media (min-width:1100px){.pgrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:44px 22px}}
.pc[hidden]{display:none}
.pc a{display:flex;flex-direction:column;gap:3px;height:100%;text-decoration:none;color:var(--ink)}
.pc-img{position:relative;display:grid;place-items:center;aspect-ratio:4/5;margin-bottom:10px;background:var(--stage);border-radius:var(--r-img);overflow:hidden}
.pc-img img{width:76%;height:76%;object-fit:contain;filter:var(--prod);transition:transform 1s var(--e)}
.pc-img img:not([src*="-cut"]):not([src*="wheel-"]){width:100%;height:100%;object-fit:cover;filter:none}
@media (hover:hover){.pc a:hover .pc-img img{transform:translateY(-4px) scale(1.03)}.pc a:hover .pc-n{text-decoration:underline;text-underline-offset:3px}}
.pc-badge{position:absolute;left:10px;top:10px;padding:5px 10px;border-radius:99px;background:rgba(251,249,245,.94);font:600 12px/1.2 var(--sans);font-style:normal;color:var(--ink)}
.pc-badge.draft{background:#FBF3E6;border:1px dashed #B0864F;color:var(--bronze)}
.pc-n{font:600 15px/1.3 var(--sans)}
.pc-l{font-size:13px;line-height:1.4;color:var(--mute);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pc-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:4px}
.pc-p{font:500 15.5px/1.3 var(--sans);font-style:normal;font-variant-numeric:tabular-nums}
.pc-two{font-size:12.5px;color:var(--bronze);font-weight:600}
/* rows: swipe on phones, grid from 700 */
.pgrid-row{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:44%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 calc(var(--pad) * -1);padding:0 var(--pad) 6px}
.pgrid-row::-webkit-scrollbar{display:none}.pgrid-row > li{scroll-snap-align:start}
@media (min-width:700px){.pgrid-row{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;margin:0;padding:0}}
@media (min-width:1100px){.pgrid-row{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}}
/* collection tiles */
.coltiles{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px}
@media (min-width:700px){.coltiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 18px}}
@media (min-width:1100px){.coltiles{grid-template-columns:repeat(6,minmax(0,1fr))}}
.ct a{display:flex;flex-direction:column;gap:2px;text-decoration:none;color:var(--ink)}
.ct-img{display:grid;place-items:center;aspect-ratio:4/5;margin-bottom:10px;background:var(--stage);border-radius:var(--r-img);overflow:hidden}
.ct-img img{width:72%;height:72%;object-fit:contain;filter:var(--prod);transition:transform 1s var(--e)}
.ct-img img:not([src*="-cut"]):not([src*="wheel-"]){width:100%;height:100%;object-fit:cover;filter:none}
.ct b{font:400 21px/1.15 var(--serif);letter-spacing:-.01em}
@media (hover:hover){.ct a:hover img{transform:translateY(-4px) scale(1.03)}.ct a:hover b{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}}
/* homepage: categories + featured, recommendation rows */
.cats{max-width:var(--max);margin:0 auto;padding:clamp(56px,8vw,112px) var(--pad) 0}
.cats.feat{padding-bottom:clamp(24px,4vw,48px)}
.cats-head,.recs-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:clamp(22px,3vw,36px)}
.cats-head .eb{margin-bottom:10px}
.recs{max-width:var(--max);margin:0 auto;padding:var(--sec) var(--pad)}
.recs h2{font-size:clamp(30px,3.4vw,44px)}
.draftnote{margin:0 0 14px}
/* the old shop rows give way to the card grid where both exist */
.pdp-simple .recs + .acc-row{display:none}

.pc-badge.out{left:auto;right:10px;background:var(--ink);color:#FBF6EC}
.pc-out .pc-img img{opacity:.55}
.empty-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:18px 0 22px}
.empty-chips a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--line2);border-radius:99px;text-decoration:none;font-size:14.5px;color:var(--ink)}
.empty-chips a:hover{border-color:var(--ink)}

/* ===================== art direction pass (2026-10-26): one photographic world ===================== */
/* every card/tile/gallery image is a full-frame composite (-scene / -tile): stone stage or collection scene, no CSS shadow on top */
.pc-img img[src*="-scene"],.ct-img img[src*="-tile"],.stage img[src*="-scene"]{inset:0;width:100%;height:100%;object-fit:cover;filter:none}
.pc-img,.ct-img{background:var(--stage)}
.pc-draft{margin-top:2px;font-size:12px;line-height:1.35;color:var(--bronze)}
/* collection header: title + intro beside the collection's own still life */
.plp-head.has-img{display:grid;gap:20px;align-items:end}
.plp-head-img{margin:0;border-radius:var(--r-img);overflow:hidden;aspect-ratio:16/10;background:var(--stage)}
.plp-head-img img{width:100%;height:100%;object-fit:cover;object-position:50% 55%}
@media (min-width:900px){
 .plp-head.has-img{grid-template-columns:minmax(0,1.15fr) minmax(0,0.85fr);gap:clamp(32px,5vw,80px);align-items:center;padding-bottom:clamp(28px,3vw,44px)}
 .plp-head-img{aspect-ratio:4/5;max-height:560px;justify-self:end;width:100%;max-width:440px}
}
/* sub-category guide cards: image · name · what it is for (they filter the grid) */
.tcards{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,74%);gap:10px;overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--pad) * -1);padding:2px var(--pad) 16px;scroll-snap-type:x proximity}
.tcards::-webkit-scrollbar{display:none}
@media (min-width:900px){.tcards{grid-auto-flow:row;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));overflow:visible;margin:0;padding:0 0 20px}}
.tcard{display:grid;grid-template-columns:52px 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;text-align:left;min-height:76px;padding:10px 14px 10px 10px;border:1px solid var(--line);border-radius:var(--r-img);background:var(--paper);color:var(--ink);font:inherit;cursor:pointer;scroll-snap-align:start;transition:border-color var(--t1),background-color var(--t1)}
.tcard:hover{border-color:var(--ink2)}
.tcard.on,.tcard[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.tcard:first-child{grid-template-columns:1fr;padding-left:16px}
.tc-img{grid-row:span 2;display:grid;place-items:center;width:52px;height:52px;border-radius:var(--r);background:var(--stage);overflow:hidden}
.tc-img img{width:82%;height:82%;object-fit:contain;filter:drop-shadow(0 3px 4px rgba(40,30,20,.16))}
.tc-n{font:600 14.5px/1.25 var(--sans)}
.tc-g{font-size:12.5px;line-height:1.35;color:var(--mute)}
/* tiles: as many columns as tiles on desktop; an odd last tile spans the row on phones */
@media (min-width:1100px){.coltiles{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}}
@media (max-width:699px){.coltiles > li:last-child:nth-child(odd){grid-column:1/-1}.coltiles > li:last-child:nth-child(odd) .ct-img{aspect-ratio:16/10}}
.ct-img img[src*="-tile"]{object-position:50% 55%}
/* buy box benefits on every store product: one icon, one line each */
.pdp-simple .bb-ben{margin:14px 0 18px}

.mcard img[src*="-scene"],.mc-img img[src*="-scene"]{width:100%;height:100%;object-fit:cover;filter:none}
@media (max-width:899px){.tcard:first-child{min-height:0}}

/* ===================== storewide pass (2026-10-26): store hero, service band, store FAQ ===================== */
.cine-still .cine-p{clip-path:none}
.cine-still picture,.cine-still img.still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0}
@media (min-width:900px){.cine-still img.still{object-position:50% 50%}}
.cine-still::after{background:linear-gradient(180deg,rgba(0,0,0,.40) 0%,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 46%,rgba(0,0,0,.55) 66%,rgba(0,0,0,.86) 100%)}
@media (min-width:900px){.cine-still::after{background:linear-gradient(90deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.45) 34%,rgba(0,0,0,0) 56%),linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 20%)}}
.cats-lead{margin-top:10px;max-width:36em;color:var(--ink2);font-size:15.5px}
.svc{max-width:var(--max);margin:clamp(56px,7vw,96px) auto 0;padding:0 var(--pad)}
.svc-list{list-style:none;margin:0;padding:clamp(24px,3vw,36px) 0;display:grid;gap:22px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media (min-width:700px){.svc-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.svc-list{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}}
.svc-list li{display:grid;grid-template-columns:36px 1fr;column-gap:12px;row-gap:2px;align-items:start}
.svc-list .ic{grid-row:span 2;margin-top:2px}
.svc-list b{font:600 15px/1.35 var(--sans)}.svc-list span{font-size:14px;line-height:1.5;color:var(--ink2)}
.faq-more{margin-top:18px}

/* test store: pipeline status page */
.pstat-wrap{overflow-x:auto;margin-bottom:var(--sec)}
.pstat-t{border-collapse:collapse;width:100%;font-size:13.5px;min-width:900px}
.pstat-t th,.pstat-t td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:center;white-space:nowrap}
.pstat-t thead th{font-weight:600;color:var(--mute)}.pstat-t tbody th{text-align:left;font-weight:600}
.pstat-t .st-ok{color:var(--ok)}.pstat-t .st-warn{color:var(--bronze)}.pstat-t .st-todo{color:var(--mute)}.pstat-t .st-fail{color:var(--err);font-weight:700}
.pstat-why td{text-align:left;white-space:normal;color:var(--ink2);font-size:12.5px;background:var(--paper)}.pstat-why span{display:block}

/* ============================================================================================================================
   v3 look (2026-10-26) — the owner: "it doesn't feel like a trustworthy, genuine Dutch webshop". Benchmarks: Lucardi, Coolblue, bol,
   The Little Green Bag, Secrid. White page, plain bold sans for names and prices, a USP bar with green checks, a visible search
   field, green stock + delivery lines, a check-list of facts under the button, full-width product information + specifications,
   light footer with the company details. No scroll animations. Delete this block to return to the v2 boutique look.
   ============================================================================================================================ */
:root{--stone:#FFFFFF;--paper:#F7F6F4;--stage:#F4F3F0;--sand:#F1EFEB;--line:#E6E3DE;--line2:#CFCAC3;--ink:#151413;--ink2:#34302B;--mute:#5E5A54;
 --ok:#1E7B3C;--okbg:#EDF6EF;--bronze:#34302B;--serif:var(--sans);
 --d1:clamp(34px,6vw,60px);--d2:clamp(24px,2.8vw,32px);--d3:clamp(24px,2.4vw,30px);--sec:clamp(44px,6vw,80px);--r:8px;--r-img:8px}
body{background:#fff}
h1,h2{font-family:var(--sans);font-weight:700;letter-spacing:-.015em;line-height:1.15}
.eb{font:600 13px/1.3 var(--sans);font-style:normal;letter-spacing:.01em;color:var(--mute);margin-bottom:10px}
.eb::before{display:none}
.rv,.rv-img,li.rv{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
.price,.t-price b,.tile-price,.ob-eur,.summary .tot dd,.summary-dl .tot dd,.drawer-body .dfoot .tot dd{font-family:var(--sans);font-weight:700;font-variation-settings:normal}
.btn{border-radius:var(--r)}
/* USP bar + test strip */
.announce{background:#F4F3F0;color:var(--ink);border-bottom:1px solid var(--line);font:500 13px/1 var(--sans)}
.announce .ic{width:16px;height:16px;color:var(--ok)}
.testbar{padding:5px var(--pad);background:#FFF6CF;color:#4A4128;font-size:12px;line-height:1.4}
.testbar .ic{width:14px;height:14px;color:#8A6D1A}
.testbar .tb-more{display:none}
/* header: white, search field always visible */
.top,body.home .top,body.home .top.scrolled{position:sticky;background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:1px solid var(--line)}
body.home .top .lg-dark{display:block} body.home .top .lg-light{display:none}
body.home .top nav a,body.home .top .cartbtn,body.home .top .burger,body.home .top .srchbtn{color:var(--ink)}
body.home .top .cartbtn .count{background:var(--ink);color:#fff}
body.home .top .langsw{color:var(--mute)} body.home .top .langsw .on{color:var(--ink)}
.top .in{height:auto;min-height:60px;flex-wrap:wrap;column-gap:12px;row-gap:0;padding-top:4px;padding-bottom:4px}
.top .logo img{height:34px}
.hsrch{order:9;flex:1 1 100%;display:flex;align-items:center;gap:10px;height:44px;padding:0 14px;margin:2px 0 8px;border:1px solid var(--line2);border-radius:var(--r);background:#fff;color:var(--mute);font:400 15px var(--sans);text-align:left;cursor:text}
.hsrch .ic{width:18px;height:18px;color:var(--ink);flex:none}
.hsrch:hover{border-color:var(--ink2)}
@media (min-width:1000px){
 .top .logo{margin-right:0}
 .hsrch{order:0;flex:0 1 480px;margin:0 auto 0 28px}
 .top nav,.top .mnav{order:10;flex:1 1 100%;display:flex;margin:0;border-top:1px solid var(--line)}
 .top nav a{color:var(--ink)}
}
/* product page */
.crumbs{padding-top:2px}
.pdp-buy{padding-top:12px;padding-bottom:40px}
.buybox .bb-title{font:700 clamp(24px,2.4vw,30px)/1.2 var(--sans);letter-spacing:-.01em;margin-bottom:4px}
.bb-sub{margin:0 0 14px;font-size:15px;color:var(--mute)}
.bb-price{margin-bottom:8px}
.price{font-size:30px;line-height:1}
.bb-pitch{font-size:15px;color:var(--ink2);margin-bottom:14px}
.bb-ben{margin:0 0 18px}
.bb-ben .ic{color:var(--ink)}
.opt legend{color:var(--ink)} .opt legend b{font-weight:600}
.avail{margin:14px 0 8px;font-weight:600;color:var(--ok)}
.pdeliv{margin:0 0 14px;padding:10px 12px;border:0;border-radius:var(--r);background:var(--okbg)}
.pdeliv .ic{color:var(--ok)}
.pdeliv b{color:var(--ink)}
.buyrow .btn.solid{flex:1 1 auto;min-height:54px;font-size:16px}
.upsell{border:1px solid var(--line2)!important;border-style:solid!important;background:var(--paper);border-radius:var(--r)}
.upsell em{color:var(--ok);font-style:normal;font-weight:600}
.usp{list-style:none;margin:20px 0 14px;padding:16px 0 0;border-top:1px solid var(--line);display:grid;gap:9px}
.usp li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.45;color:var(--ink)}
.usp .ic{width:18px;height:18px;color:var(--ok);flex:none;margin-top:1px}
.usp span{color:var(--mute)} .usp a{color:var(--ink2);margin-left:6px;font-size:13.5px}
.buybox .paylogos{margin-top:4px}
.draftnote.dn-small{margin-top:16px;font-size:12.5px;line-height:1.5;background:#FFF6CF;border:0;color:#4A4128}
.pfilm{padding:8px var(--pad) 40px}.pfilm-in{max-width:560px;margin:0 auto;aspect-ratio:9/16;max-height:86svh;border-radius:var(--r-img);overflow:hidden;background:var(--stage,#ECE6DC)}.pfilm-in .vid{width:100%;height:100%;object-fit:cover;display:block}
.pinfo{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pinfo-in{max-width:var(--max);margin:0 auto;padding:44px var(--pad);display:grid;gap:32px}
@media (min-width:900px){.pinfo-in{grid-template-columns:1.1fr 1fr;gap:64px}}
.pinfo h2{font-size:22px;margin-bottom:14px}
.pi-desc p{max-width:62ch;color:var(--ink2);font-size:16px;line-height:1.7}
.spec-t{margin:0;border-top:1px solid var(--line)}
.spec-t div{display:grid;grid-template-columns:42% 1fr;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14.5px;line-height:1.45}
.spec-t dt{color:var(--mute)} .spec-t dd{margin:0;color:var(--ink)}
.pinfo .acc{margin-top:22px;border-top:0}
.acc summary,.qa summary{font-weight:600}
.acc summary .ic,.qa summary .ic,.acc summary:hover,.qa summary:hover{color:var(--ink)}
.how-steps .n{font:700 22px/1 var(--sans);color:var(--ink)}
.cmp{background:var(--paper)}
.cmp-t td.us{background:#fff}
/* product cards + listings */
.pcard h3,.pc-name{font-weight:600}
/* home hero: a shop banner, not a full-screen film */
.cine{height:min(70svh,680px);min-height:440px}
.cine-h{font-family:var(--sans);font-weight:700;letter-spacing:-.02em;line-height:1.05}
.cine-h em{font-style:normal;color:#fff}
.cine-eb{color:#E9E4DC}
/* footer: light, company details readable */
.foot{background:#F4F3F0;color:var(--ink2);border-top:1px solid var(--line);padding-top:56px}
.foot .mono{height:44px;opacity:1}
.foot .brand p{font:400 14.5px/1.6 var(--sans);color:var(--ink2);max-width:46ch;margin-top:12px}
.foot .brand .fmail a{color:var(--ink);text-decoration:underline;min-height:0;display:inline}
.foot .fcol b{color:var(--ink)}
.foot a,.foot .linkbtn{color:var(--ink2)} .foot a:hover,.foot .linkbtn:hover{color:var(--ink)}
.foot .fpay{border-top-color:var(--line)} .foot .fpay .pl-label,.foot small{color:var(--mute)}
.foot :focus-visible{outline-color:var(--ink)}
.usp li{display:block;position:relative;padding-left:28px}
.usp .ic{position:absolute;left:0;top:2px;margin:0}
.usp span{color:var(--mute)}
/* gallery: studio shots fill the square (their own flat background), so the product reads bigger, like the big shops */
.pdp-simple .stage .slide img{inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:640px){.pdp-simple .gal .thumbs{grid-auto-columns:minmax(0,58px);gap:6px}.pdp-simple .thumbs button{min-height:0}}
/* "Zo werkt het" without a film or photo: three steps side by side */
.how-in:not(:has(.how-film)){display:block}
@media (min-width:900px){.how-in:not(:has(.how-film)) .how-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0 32px;border-top:0}
 .how-in:not(:has(.how-film)) .how-steps li{grid-template-columns:44px 1fr;border-top:1px solid var(--line)}}
.buyrow .btn.solid{white-space:nowrap;padding:0 16px}
@media (max-width:420px){.buyrow .qty button{width:36px}.buyrow .qty input{width:28px}.buyrow .btn.solid{font-size:15px}}
.cine-h{font-size:clamp(32px,4.2vw,56px)!important;max-width:14em;line-height:1.08}
.plp-head h1,.pstat h1{font-size:clamp(28px,3vw,40px)}
.mcard h3,.mc-name,.ctile b,.coltile b{font-weight:600}

.pi-h3{margin:26px 0 10px;font:700 17px/1.3 var(--sans)}
.pi-ben{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.pi-ben li{position:relative;padding-left:28px;font-size:15.5px;line-height:1.5;color:var(--ink)}
.pi-ben .ic{position:absolute;left:0;top:3px;width:18px;height:18px;color:var(--ok)}

.slide .aitag{position:absolute;left:10px;bottom:10px;padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.88);color:var(--mute);font:500 11.5px/1.3 var(--sans);pointer-events:none}
/* homepage banner = a real photo now (2026-10-26): a softer shade behind the words so the photo runs edge to edge */
@media (min-width:900px){.cine-still::after{background:linear-gradient(90deg,rgba(20,14,8,.62) 0%,rgba(20,14,8,.38) 32%,rgba(20,14,8,0) 54%)}}
@media (min-width:900px){.cine-still .p-n{inset:0;right:0;width:auto}.cine-still .p-n::before{display:none}}
@media (min-width:900px){.cine.cine-still{height:min(56.25vw,860px);min-height:0}.cine-still .cine-copy{max-width:var(--max)}.cine-still .cine-lead{max-width:30em}}
/* homepage banner as a split panel (2026-10-26): words on cream, the photo beside (desktop) or above (phone) — readable on any photo */
.cine.cine-still{height:auto;min-height:0;background:#F4F1EC;color:var(--ink);display:grid;overflow:hidden}
.cine-still::after{display:none}
.cine-still .cine-films{position:relative;inset:auto;display:block;aspect-ratio:4/5}
.cine-still .cine-p{position:absolute;inset:0}
.cine-still .cine-copy{position:relative;inset:auto;margin:0;padding:26px var(--pad) 34px;max-width:none}
.cine-still .cine-h{color:var(--ink);font-size:clamp(30px,8vw,40px)!important;margin-bottom:12px}
.cine-still .cine-h em{color:var(--ink)}
.cine-still .cine-h .ln>*,.cine-still .cine-lead,.cine-still .cine-cta,.cine-still .cine-assure{transform:none!important;opacity:1!important}
.cine-still .cine-lead{color:var(--ink2);font-size:16px;margin-bottom:18px}
.cine-still .cine-cta .btn.light{background:var(--ink);color:#fff;border-color:var(--ink)}
.cine-still .cine-cta .tlink.light{color:var(--ink);text-decoration-color:rgba(21,20,19,.3)}
.cine-still .cine-assure{color:var(--ink2)} .cine-still .cine-assure .ic{color:var(--ok)}
@media (min-width:900px){
 .cine.cine-still{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);height:min(46vw,660px)}
 .cine-still .cine-films{order:2;aspect-ratio:auto;height:100%}
 .cine-still img.still{object-position:72% 62%}
 .cine-still .cine-copy{order:1;align-self:center;padding:40px 48px 40px max(var(--pad),calc((100vw - var(--max)) / 2 + var(--pad)))}
 .cine-still .cine-h{font-size:clamp(36px,3.6vw,54px)!important}
 .cine-still .cine-cta .btn{flex:0 0 auto}
}
@media (min-width:900px){.cine-still img.still{object-position:100% 60%}}

/* ===== homepage banner v4 (2026-10-26, after Ekster): the product itself on slate, words on its calm side; rest of the home unchanged ===== */
.ehero{position:relative;background:#323F50;color:#fff;overflow:hidden}
.ehero img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.ehero::after{content:"";position:absolute;left:0;right:0;top:calc(100vw * 1.25 - 120px);height:120px;background:linear-gradient(180deg,rgba(50,63,80,0),#323F50);pointer-events:none}
.ehero-copy{position:relative;z-index:1;padding:0 var(--pad) 34px;margin-top:-64px}
.ehero h1{color:#fff;font-size:clamp(32px,8.6vw,44px);line-height:1.08;margin-bottom:12px}
.ehero-lead{color:rgba(255,255,255,.86);font-size:16px;line-height:1.55;max-width:32em;margin-bottom:20px}
.ehero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px}
.ehero .btn.light{background:#fff;color:var(--ink);border-color:#fff}
.ehero .tlink.light{color:#fff;text-decoration-color:rgba(255,255,255,.4)}
@media (min-width:900px){
 .ehero img{aspect-ratio:auto;height:min(52vw,720px);object-position:50% 50%}
 .ehero::after{display:none}
 .ehero-copy{position:absolute;inset:0;margin:0;display:flex;flex-direction:column;justify-content:center;max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
 .ehero-copy>*{max-width:520px}
 .ehero h1{font-size:clamp(40px,4vw,58px)}
}
.ehero-assure{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px;font:500 13px var(--sans);color:rgba(255,255,255,.82)}
.ehero-assure li{display:flex;align-items:center;gap:7px}.ehero-assure .ic{width:15px;height:15px}
/* footer 10% sign-up on the light footer (merge 2026-10-26): outlined field, dark button */
.foot .fsign-row input{border:1px solid var(--line2);background:#fff;color:var(--ink);border-radius:var(--r)}
.foot .fsign-row input::placeholder{color:var(--mute)}
.foot .fsign .btn{background:var(--ink);color:#fff;border-color:var(--ink);border-radius:var(--r)}
.foot .fsign p,.foot .fsign-ok{opacity:1;color:var(--ink2)}

/* ===== header + offer bar v2 (2026-10-26, after Ekster): solid offer bar, one-row phone header, deal banner ===== */
.announce{background:var(--ink);color:#fff;border-bottom:0;font:600 13px/1.25 var(--sans)}
.announce .ic{color:#fff}
.announce li[data-promo] a{font-weight:700}
@media (max-width:999px){
 .announce ul:has(li[data-promo]) li{animation:none;opacity:0}
 .announce ul:has(li[data-promo]) li[data-promo]{opacity:1}
}
.srchic{display:none}
@media (max-width:999px){
 .top .in{display:grid;grid-template-columns:44px 44px 1fr 56px 44px;align-items:center;column-gap:2px;min-height:58px;padding-top:2px;padding-bottom:2px}
 .top .burger{order:1;grid-column:1}
 .top .srchic{display:inline-grid;order:2;grid-column:2;color:var(--ink)}
 .top .logo{order:3;grid-column:3;justify-self:center;margin:0}
 .top .logo img{height:32px}
 .top .langsw{order:4;grid-column:4;justify-self:end}
 .top .cartbtn{order:5;grid-column:5}
 .top .hsrch{display:none}
}
.ehero-cats{display:none}
@media (max-width:899px){
 .ehero-cats{display:flex;position:absolute;top:0;left:0;right:0;z-index:2;gap:22px;overflow-x:auto;scrollbar-width:none;padding:12px var(--pad);
  border-bottom:1px solid rgba(255,255,255,.22);font:600 15px/1.2 var(--sans);white-space:nowrap}
 .ehero-cats::-webkit-scrollbar{display:none}
 .ehero-cats a{color:#fff;text-decoration:none}
}
.ehero-eb{font:600 14px/1.35 var(--sans);color:#fff;margin:0 0 8px;opacity:.92}
.ann-s{display:none}
@media (max-width:599px){.ann-l{display:none}.ann-s{display:inline}}

/* ===== secondary brand colour: bordeaux (Zrian 2026-10-26 "add a secondary brand colour, bordeaux red, to the whole website") =====
   Black stays the primary (buy buttons, text). Bordeaux is the accent: offer bar, labels, savings, icons, focus rings, cart count.
   --bronze is the accent token every component already uses, so it now points to bordeaux. Delete this block to go back. */
:root{--bordeaux:#7A1F2E;--bordeaux-dk:#5E1622;--bordeaux-bg:#F8EEF0;--bronze:var(--bordeaux)}
.announce{background:var(--bordeaux);color:#fff}
.announce .ic{color:#fff}
.eb{color:var(--bordeaux)}
.top .cartbtn .count,body.home .top .cartbtn .count{background:var(--bordeaux);color:#fff}
.t-tag.t-promo,.t-tag.t-new{background:var(--bordeaux);color:#fff}
.foot{border-top:3px solid var(--bordeaux)}
a:hover{text-decoration-color:var(--bordeaux)}

/* ===== ICON pass (Zrian 2026-10-26 'go icon', after icon-amsterdam.com): detail inset on the first photo, fact chips under the button,
   'Past er goed bij' with a + right under the buy box. The 1 / 2 cards reuse .tiers. Not on the Klaphouder until lane 4's test ends. ===== */
.gal .stage{position:relative}
.ginset{position:absolute;left:12px;top:12px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;pointer-events:none}
.ginset{z-index:3}
.gal .ginset img{position:static;inset:auto;transform:none;max-width:none;width:84px;height:105px;object-fit:cover;border-radius:6px;border:2px solid #fff;box-shadow:0 2px 10px rgba(0,0,0,.18);background:#fff}
.ginset small{font:600 11px/1.2 var(--sans);color:var(--ink);background:rgba(255,255,255,.88);padding:2px 6px;border-radius:4px}
.ginset[hidden]{display:none}
.chips{display:flex;gap:8px;overflow-x:auto;margin:14px 0 4px;padding:0 0 4px;list-style:none;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips li{flex:none;display:flex;align-items:center;gap:6px;padding:9px 12px;background:var(--paper);border:1px solid var(--line);border-radius:999px;font:500 13.5px/1.2 var(--sans);color:var(--ink2);white-space:nowrap}
.chips .ic{width:15px;height:15px;color:var(--bordeaux,var(--bronze))}
.goes{margin:22px 0 0;padding-top:18px;border-top:1px solid var(--line)}
.goes h2{font:700 17px/1.2 var(--sans);margin:0 0 12px}
.goes ul{display:flex;gap:10px;overflow-x:auto;list-style:none;margin:0;padding:0 0 6px;scroll-snap-type:x mandatory;scrollbar-width:none}
.goes ul::-webkit-scrollbar{display:none}
.goes li{position:relative;flex:0 0 132px;scroll-snap-align:start}
.goes li>a{display:block;color:inherit;text-decoration:none}
.goes img{display:block;width:132px;height:165px;object-fit:cover;border-radius:var(--r-img,8px);background:var(--stage)}
.goes b{display:block;margin-top:6px;font:600 13px/1.25 var(--sans);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.goes span{display:block;font:700 13px var(--sans);margin-top:2px}
.goes .goes-add{position:absolute;right:6px;top:125px;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:var(--ink);color:#fff;border:0;box-shadow:0 2px 8px rgba(0,0,0,.2);cursor:pointer}
.goes .goes-add .ic{width:16px;height:16px}
.goes .goes-add:disabled{opacity:.5}

/* chips v2 (Zrian 26-10 "use icons like ICON does, a tad more stunning"): a line icon per fact in a soft bordeaux disc */
.chips{gap:10px;margin:16px 0 6px}
.chips li{gap:10px;padding:8px 14px 8px 8px;background:#F6F4F1;border:0;border-radius:14px;font:600 13.5px/1.25 var(--sans);color:var(--ink)}
.chips .ic{width:30px;height:30px;padding:6px;border-radius:50%;background:var(--bordeaux-bg,#F8EEF0);color:var(--bordeaux,var(--bronze));stroke-width:1.6}

/* Klarna pay in 3, ICON style (Zrian 26-10): a row with the pink K and an arrow, opening a sheet with 4 steps + the small print */
.k3{list-style:none;margin:0}
div.k3{margin:6px 0 4px}
.k3-row{display:flex;align-items:center;gap:10px;width:100%;padding:0;border:0;background:none;font:600 14px/1.3 var(--sans);color:var(--ink);text-align:left;cursor:pointer}
.k3-row img{width:34px;height:auto;flex:none;border-radius:4px}
.k3-row span{flex:1}.k3-row small{font:inherit;color:inherit}
.k3-row .ic{width:16px;height:16px;color:var(--mute)}
.usp li.k3{display:block;padding-left:0}
.k3-sheet{position:fixed;inset:auto 0 0 0;margin:0 auto;width:100%;max-width:560px;max-height:88vh;padding:0;border:0;border-radius:18px 18px 0 0;background:#fff;color:var(--ink);overflow:auto}
@media (min-width:700px){.k3-sheet{inset:0;margin:auto;border-radius:16px;height:fit-content}}
.k3-sheet::backdrop{background:rgba(14,13,11,.5)}
.k3-in{position:relative;padding:28px 22px 26px}
.k3-x{position:absolute;right:12px;top:12px;width:40px;height:40px;display:grid;place-items:center;border:0;background:none;cursor:pointer;color:var(--ink)}
.k3-sheet h2{font:700 22px/1.2 var(--sans);margin:4px 40px 10px 0}
.k3-lead{margin:0 0 14px;color:var(--ink2)}
.k3-sheet ol{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:12px}
.k3-sheet ol li{display:flex;align-items:center;gap:12px;font:500 15px/1.35 var(--sans)}
.k3-sheet ol li span{flex:none;width:26px;height:26px;display:grid;place-items:center;border-radius:6px;background:var(--bordeaux,#7A1F2E);color:#fff;font:700 13px var(--sans)}
.k3-sheet ol li img{width:34px;height:auto;border-radius:4px}
.k3-warn{margin:0 0 8px;font-size:15px}
.k3-small{margin:0;font-size:13px;line-height:1.5;color:var(--mute)}
.k3-small a{color:inherit}
/* colour choice as a photo of each colour (ICON style, Zrian 26-10 'use actual colours, not typed out') */
.opt-thumbs .swatches{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.opt-thumbs .sw-thumb{flex:0 0 76px;max-width:76px;min-width:0;padding:0;gap:4px}
.opt-thumbs .sw-thumb input{position:absolute;opacity:0;width:1px;height:1px}
.opt-thumbs .sw-thumb img{display:block;width:76px;height:95px;object-fit:cover;border-radius:8px;border:2px solid transparent;outline:1px solid var(--line);background:var(--stage);transition:border-color .15s}
.opt-thumbs .sw-thumb input:checked+img{border-color:var(--ink);outline-color:transparent}
.opt-thumbs .sw-thumb input:focus-visible+img{outline:2px solid var(--bordeaux,var(--bronze));outline-offset:2px}
.opt-thumbs .sw-thumb .swname{font:500 11.5px/1.2 var(--sans);color:var(--mute);text-align:center;white-space:normal}
.k3-sheet ol{padding-left:0!important;margin-left:0!important}
.k3-sheet ol li{padding-left:0!important}
.k3-sheet ol li::before{content:none!important}
.k3-x .ic{color:var(--ink)!important;stroke:var(--ink)}

/* buy box clarity pass (Zrian 27-10 "better icons, space between delivery and the bundle choices, clearer which colour"); all ICON pages, not the frozen Klaphouder */
.bb-icon .opt-thumbs legend{font:500 15px/1.3 var(--sans);margin-bottom:10px}
.bb-icon .opt-thumbs legend b{font-weight:700}
.bb-icon .opt-thumbs .swatches{gap:12px}
.bb-icon .opt-thumbs .sw-thumb{position:relative;flex:0 0 112px;max-width:112px;gap:6px;cursor:pointer}
.bb-icon .opt-thumbs .sw-thumb img{width:112px;height:140px;border-radius:12px;border:2px solid transparent;outline:1px solid var(--line2)}
.bb-icon .opt-thumbs .sw-thumb input:checked+img{border-color:var(--ink);outline:2px solid var(--ink);outline-offset:-1px}
.bb-icon .opt-thumbs .sw-thumb:has(input:checked)::after{content:"";position:absolute;right:7px;top:7px;width:22px;height:22px;border-radius:50%;background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center/14px no-repeat;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.bb-icon .opt-thumbs .sw-thumb .swname{font:500 13px/1.3 var(--sans);color:var(--mute)}
.bb-icon .opt-thumbs .sw-thumb:has(input:checked) .swname{font-weight:700;color:var(--ink)}
.bb-icon .tiers{margin-top:20px}
.bb-icon .avail:empty{display:none}
.bb-icon .pdeliv{margin:20px 0 18px;padding:14px 16px;gap:14px;align-items:center}
.bb-icon .pdeliv .ic{width:36px;height:36px;padding:7px;margin:0;border-radius:50%;background:#fff;color:var(--ok);stroke-width:1.7}
.bb-icon .usp{gap:12px}
.bb-icon .usp li{padding-left:38px;min-height:26px;line-height:1.5}
.bb-icon .usp li:not(.k3) .ic{left:0;top:-1px;width:28px;height:28px;padding:5px;border-radius:50%;background:#F3EFEA;color:var(--ink);stroke-width:1.7}
.bb-icon .promo-line .ic{stroke-width:1.8}
.bb-icon .usp li.k3{padding-left:0}.bb-icon .usp li.k3 .ic{position:static}
.bb-icon .opt-thumbs .swatches{flex-wrap:wrap}.bb-icon .opt-thumbs .sw-thumb{flex:1 1 0;min-width:76px;max-width:112px}.bb-icon .opt-thumbs .sw-thumb img{width:100%;height:auto;aspect-ratio:4/5}
.bb-icon .opt-thumbs .swatches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 10px}.bb-icon .opt-thumbs.n2 .swatches,.bb-icon .opt-thumbs.n3 .swatches{grid-template-columns:repeat(3,minmax(0,1fr))}.bb-icon .opt-thumbs .sw-thumb{min-width:0;max-width:none}

/* product showcase under the buy box (Zrian 27-10): large real photos as people scroll */
.pshow{max-width:640px;margin:0 auto;padding:8px var(--pad) 40px;display:grid;gap:14px}.pshow figure{margin:0;border-radius:var(--r-img,10px);overflow:hidden;background:var(--stage)}.pshow img{display:block;width:100%;height:auto}

/* ICON-style swipe on phones (Zrian 27-10, his screen recording of icon-amsterdam.com): photos edge to edge, the next one peeks in, dots instead of thumbs */
@media (max-width:640px){
 .gal-peek{margin-left:calc(var(--pad) * -1);margin-right:calc(var(--pad) * -1)}
 .gal-peek .stage{aspect-ratio:100/105;border-radius:0;background:none}
 .gal-peek .stage .track{gap:4px}
 .gal-peek .slide{flex:0 0 84%;scroll-snap-align:start;background:var(--stage);overflow:hidden}
 .gal-peek .slide:last-child{flex-basis:100%}
 .gsq .gal-peek .stage{aspect-ratio:1/1}
 .gsq .gal-peek .slide{flex-basis:100%}   /* gallery_square: whole square image per slide, no peek */
 .gal-peek .ginset{left:calc(var(--pad));top:12px}
 .gal-peek .thumbs{display:flex;justify-content:center;gap:6px;margin:10px 0 0;max-width:none}
 .gal-peek .thumbs[hidden]{display:none}
 .gal-peek .thumbs button{width:6px;height:6px;min-height:0;padding:0;border:0;border-radius:50%;background:var(--line2);flex:none;overflow:hidden}
 .gal-peek .thumbs button.on{background:var(--ink)}
 .gal-peek .thumbs button>*{display:none}
}
.pshow video{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}

/* closer to ICON (Zrian 27-10 side-by-side): taller, narrower photos with a bigger peek; the detail inset without a white frame, its label as plain text */
@media (max-width:640px){
 .gal-peek .stage{aspect-ratio:100/104}
 .gal-peek .slide{flex-basis:78%}
}
.gal-peek .ginset{gap:6px}
.gal-peek .ginset img{width:76px;height:76px;border:0;border-radius:4px;box-shadow:0 1px 6px rgba(0,0,0,.14)}
.gal-peek .ginset small{background:none;padding:0;font:500 12px/1.25 var(--sans);color:var(--ink);max-width:90px}
.gal-peek .ginset img{outline:1px solid rgba(255,255,255,.85);box-shadow:0 2px 10px rgba(0,0,0,.18)}

/* title + price like ICON (Zrian 27-10): small line on top, the name big in capitals, the price with a thin divider (no struck-through price: Omnibus) */
.bb-icon .bb-proof{display:flex;align-items:center;gap:8px;margin:0 0 12px;font:500 13.5px/1.3 var(--sans);color:var(--ink2)}
.bb-icon .bb-proof .ic{width:20px;height:20px;padding:3px;border-radius:50%;background:#F3EFEA;color:var(--ink);stroke-width:1.7}
.buybox.bb-icon .bb-title{font:500 clamp(26px,7vw,34px)/1.08 var(--sans);text-transform:uppercase;letter-spacing:.005em;margin-bottom:10px}
.bb-icon .bb-sub{margin:0 0 12px;font-size:15px}
.bb-icon .bb-price{display:flex;align-items:center;gap:0;margin-bottom:14px}
.bb-icon .price{font:500 28px/1 var(--sans)}
.bb-icon .bb-price .tax{margin-left:14px;padding-left:14px;border-left:1px solid var(--line2);font-size:14px;color:var(--mute);line-height:28px}

/* sticky add-to-cart like ICON (Zrian 27-10): on phones one full-width black button in capitals, no name/price next to it */
.bb-icon [data-add]{text-transform:uppercase;letter-spacing:.06em;font-weight:500}
.pbar-icon{padding:10px 16px calc(10px + env(safe-area-inset-bottom))}
.pbar-icon>div{display:none}
.pbar-icon [data-pbar-add]{flex:1 1 auto;min-height:52px;font:500 15px/1 var(--sans);text-transform:uppercase;letter-spacing:.06em;border-radius:var(--r)}

/* ICON pages (Zrian 27-10): info folded into capital headings, every section heading in capitals */
.pinfo-acc .pinfo-in{display:block;padding-top:8px;padding-bottom:24px}
.pinfo-acc .acc{margin-top:0;border-top:1px solid var(--line)}
.pdp-icon .acc summary,.pdp-icon .qa summary{font:500 14px/1.3 var(--sans);text-transform:uppercase;letter-spacing:.05em;color:var(--ink)}
.pinfo-acc details p{color:var(--ink2);font-size:15px;line-height:1.65;margin:0 0 12px}
.pinfo-acc .pi-lead{color:var(--ink);font-weight:500}
.pinfo-acc .pi-ben{margin:4px 0 14px}
.pdp-icon h2,.pdp-icon .goes h2{text-transform:uppercase;letter-spacing:.02em;font-weight:600}

/* titles in Cinzel (Zrian 27-10 picked option 1 of 10 jewellery fonts): product name + section headings on ICON pages; body text stays Inter */
.buybox.bb-icon .bb-title{font-family:'Cinzel',Georgia,serif;font-weight:600;font-size:clamp(25px,6.6vw,32px);line-height:1.15;letter-spacing:.04em}
.pdp-icon h2,.pdp-icon .goes h2{font-family:'Cinzel',Georgia,serif;font-weight:600;letter-spacing:.04em}

/* add-to-cart in jewellery style (Zrian 27-10 picked C): Cinzel capitals, square corners, a thin gold line inside the edge; same on the sticky bar */
.bb-icon [data-add],.pbar-icon [data-pbar-add]{min-height:56px;border-radius:0;background:#141210;color:#fff;font:600 15px/1 'Cinzel',Georgia,serif;letter-spacing:.12em;text-transform:uppercase;box-shadow:inset 0 0 0 1px #141210,inset 0 0 0 3px #C9A86A}
.bb-icon [data-add]:hover,.pbar-icon [data-pbar-add]:hover{background:#000}
.bb-icon [data-add][disabled],.pbar-icon [data-pbar-add][disabled]{box-shadow:none;opacity:.55}
@media (max-width:360px){.bb-icon [data-add],.pbar-icon [data-pbar-add]{font-size:13.5px;letter-spacing:.08em}}
.bb-icon [data-add],.pbar-icon [data-pbar-add]{font-size:clamp(12.5px,3.85vw,15px);letter-spacing:clamp(.06em,.3vw,.12em);padding-left:12px;padding-right:12px}

/* add-to-cart = D (Zrian 27-10, C rejected): like ICON/Mejuri, black, square corners, small spaced capitals in Inter, a soft shine gliding over it every 6 s (off for reduced motion) */
.bb-icon [data-add],.pbar-icon [data-pbar-add]{position:relative;overflow:hidden;min-height:56px;border-radius:0;background:#000;color:#F1EFE9;box-shadow:none;font:600 12.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase}
.bb-icon [data-add]::after,.pbar-icon [data-pbar-add]::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:35%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);transform:skewX(-20deg);animation:ctaShine 6s ease-in-out 1.5s infinite;pointer-events:none}
@keyframes ctaShine{0%{left:-60%}22%,100%{left:130%}}
@media (prefers-reduced-motion:reduce){.bb-icon [data-add]::after,.pbar-icon [data-pbar-add]::after{animation:none;display:none}}
.bb-icon [data-add][disabled]::after,.pbar-icon [data-pbar-add][disabled]::after{display:none}
@media (max-width:380px){.bb-icon [data-add],.pbar-icon [data-pbar-add]{font-size:11.5px;letter-spacing:.1em;padding-left:8px;padding-right:8px}}

/* cart like ICON (Zrian 27-10): capitals heading with a count, free-delivery line + green bar, bigger photos, names in capitals, round qty pill,
   black square AFREKENEN; no struck totals or savings labels (Omnibus); everywhere except the frozen Klaphouder (body.cart-x) */
.cart-x .drawer-head h2{display:flex;align-items:center;gap:10px;font:500 22px/1 var(--sans);text-transform:uppercase;letter-spacing:.04em}
.cart-x .dcount{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border-radius:12px;background:var(--ink);color:#fff;font:600 12px/1 var(--sans);letter-spacing:0}
.cart-x .dcount[hidden]{display:none}
.cart-x .fship{margin:2px 0 16px}.cart-x .fship p{margin:0 0 8px;font:500 14px/1.35 var(--sans);color:var(--ink)}
.cart-x .fbar{height:5px;border-radius:3px;background:var(--line);overflow:hidden}.cart-x .fbar i{display:block;height:100%;background:#3DA34A;border-radius:3px;transition:width .4s}
.cart-x .line .limg{width:84px;height:104px;border-radius:8px;overflow:hidden;background:var(--stage)}
.cart-x .line .limg img{width:100%;height:100%;object-fit:cover}
.cart-x .line .lmain b{font:500 14.5px/1.3 var(--sans);text-transform:uppercase;letter-spacing:.04em}
.cart-x .qty.sm{border-radius:999px;overflow:hidden}
.cart-x [data-checkout]{min-height:56px;border-radius:0;background:#000;color:#F1EFE9;font:600 13px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase}
.cart-x .tot dt{text-transform:uppercase;letter-spacing:.04em}
.cart-x .line{grid-template-columns:84px 1fr auto;gap:14px}.cart-x .line .limg img{max-width:none;max-height:none;filter:none}

/* code banner like ICON's EARLY25 box (27-10) */
.codebox{display:flex;align-items:center;gap:14px;margin:4px 0 18px;padding:14px 16px;background:#F4F1EC;border-left:3px solid #141210}
.codebox[hidden]{display:none}
.codebox .cb-pct{flex:none;padding-right:14px;border-right:1px solid var(--line2);font:600 28px/1 'Cinzel',Georgia,serif;color:var(--ink)}
.codebox p{margin:0}.codebox .cb-h{font:600 15px/1.2 'Cinzel',Georgia,serif;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.codebox .cb-t{font:500 13px/1.4 var(--sans);text-transform:uppercase;letter-spacing:.06em;color:var(--ink);margin-top:3px}
.codebox .cb-code{padding:0;border:0;background:none;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.codebox small{display:block;margin-top:6px;font-size:11.5px;line-height:1.4;color:var(--mute)}
/* colour cards a tad smaller (27-10): 4 per row for 2-3 options too */
.bb-icon .opt-thumbs.n2 .swatches,.bb-icon .opt-thumbs.n3 .swatches{grid-template-columns:repeat(4,minmax(0,1fr))}
.bb-icon .opt-thumbs .sw-thumb .swname{font-size:12.5px}
/* cart: code field + quiet NL shipping line */
.cform{margin:0 0 14px}.cform label{display:block;font:500 13px var(--sans);color:var(--ink2);margin-bottom:6px}
.cform span{display:flex;gap:8px}.cform input{flex:1;min-width:0;height:44px;padding:0 12px;border:1px solid var(--line2);border-radius:0;font:500 15px var(--sans);text-transform:uppercase;letter-spacing:.06em;background:#fff}
.cform .btn{height:44px;border-radius:0;padding:0 16px}
.cmsg.bad{margin:6px 0 0;font-size:13px;color:#A0262E}
.crow dt,.crow dd{color:#1E7B3C;font-weight:600}
.shipto.cc-quiet .select{display:none}.ccq{font-weight:500}.ccq .linkbtn{margin-left:8px;font-size:13px}
.gal-peek .ginset img{width:84px;height:105px;object-fit:cover}
.crow dt .linkbtn{color:var(--mute);font-weight:400;font-size:13px;margin-left:6px}

/* code banner smaller (Zrian 27-10): no side line, one compact row, no 30-day line */
.codebox{gap:12px;margin:2px 0 16px;padding:10px 14px;border-left:0;background:#F4F1EC;border-radius:6px}
.codebox .cb-pct{font-size:20px;padding-right:12px}
.codebox .cb-h{display:inline;font-size:12.5px;letter-spacing:.08em}
.codebox .cb-t{display:inline;font-size:11.5px;margin:0 0 0 6px}
.codebox .cb-t::before{content:"· ";color:var(--mute)}
.codebox small{margin-top:3px;font-size:11px}
.codebox .cb-h{display:block}.codebox .cb-t{display:block;margin:2px 0 0;text-transform:none;letter-spacing:0;font-size:13px}.codebox .cb-t::before{content:none}.codebox .cb-code{font-weight:600;letter-spacing:.04em}

/* 'Meer van Luzof' quiet on ICON pages (Zrian 27-10: looks legit, but must not distract): small heading, smaller cards */
.pdp-icon .recs{padding-top:28px;padding-bottom:28px}
.pdp-icon .recs h2{font-size:17px;letter-spacing:.08em}
.pdp-icon .recs .recs-head{margin-bottom:12px}
.pdp-icon .recs .tlink{font-size:13px}
@media (max-width:699px){.pdp-icon .recs .pgrid-row{grid-auto-columns:31%}}
.pdp-icon .recs .pgrid-row .pc-name,.pdp-icon .recs .pgrid-row h3{font-size:13px}
.pdp-icon .recs .pgrid-row p,.pdp-icon .recs .pgrid-row .pc-sub{display:none}
.pdp-icon .recs h2{font-size:14px;letter-spacing:.1em}
.pdp-icon .recs .pc-n{font-size:13px;line-height:1.25}
.pdp-icon .recs .pc-l{display:none}
.pdp-icon .recs .pc-p{font-size:13.5px}
.pdp-icon .recs .pc-two,.pdp-icon .recs .pc-draft{font-size:11.5px}
.pdp-icon .recs .ac-dots .dot{width:10px;height:10px}
.t-note{display:block;font:500 12.5px/1.3 var(--sans);color:var(--ink2);margin:1px 0 1px}
.pdp-simple .t-imgs.n3 img{width:24px;height:30px;margin-left:-14px}.pdp-simple .t-imgs.n3 img:first-child{margin-left:0}.pdp-simple .tier .t-imgs{width:58px;overflow:visible}
/* 27-10: icon pages WITHOUT bundle offers keep the qty stepper beside the CTA, so the spaced caps clipped on phones: compact stepper + tighter caps there only */
@media (max-width:480px){
.buybox.bb-icon:not(.has-tiers) .buyrow{gap:8px}
.buybox.bb-icon:not(.has-tiers) .buyrow .qty button{width:32px}.buybox.bb-icon:not(.has-tiers) .buyrow .qty input{width:26px}
.buybox.bb-icon:not(.has-tiers) [data-add]{font-size:11.5px;letter-spacing:.06em;padding-left:8px;padding-right:8px}
}
@media (max-width:350px){.buybox.bb-icon:not(.has-tiers) [data-add]{white-space:normal;line-height:1.3;letter-spacing:.05em}}
/* 28-10: card text written out (daughter necklace, teardown R25) */
.pcard{padding:8px var(--pad) 40px}.pcard-in{max-width:560px;margin:0 auto;padding:24px 22px;background:var(--paper);border:1px solid var(--line)}
.pcard h2{font:600 13px/1.3 var(--sans);text-transform:uppercase;letter-spacing:.1em;margin:0 0 14px;color:var(--ink)}
.pcard h3{font:600 12px/1.3 var(--sans);text-transform:uppercase;letter-spacing:.1em;margin:22px 0 10px;color:var(--mute)}
.pcard blockquote{margin:0;font:400 17px/1.55 Georgia,serif;font-style:italic;color:var(--ink)}
.pcard p{margin:0 0 10px}.pcard .pc-h{font-style:normal;font-weight:600;letter-spacing:.02em}.pcard .pc-s{margin:0}
.pcard .pc-nl{font:400 15px/1.55 var(--sans);color:var(--ink2,var(--ink))}.pcard .pc-note{margin:16px 0 0;font:400 13px/1.45 var(--sans);color:var(--mute)}

 */
.bb-problem{margin:0 0 6px;font:600 15px/1.35 var(--sans);color:var(--ink)}