/** Shopify CDN: Minification failed
Line 480:0 All "@import" rules must come first
**/
/* Zekulhyda theme stylesheet.
Base layer is the reference design (zekulhyda-site_8.html) verbatim, so the
storefront matches the approved design exactly. Page-specific rules that the
reference has no opinion about are appended below it. */
:root{--ink:#0B0B0C;--graphite:#151517;--slate:#1F1F22;--line:#2C2C30;--silver:#C9CBCF;--fog:#8E9197;--amber:#C9963B;--amber-2:#E4B65A;--paper:#F1EDE4;--paper-2:#E6E0D3;--ink-on-paper:#17171A;--muted-on-paper:#5E5A52;--line-on-paper:#D6CFC0;--ok:#4E8B57;--danger:#B8323F}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--silver);font-family:"Manrope","Helvetica Neue",Arial,sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;font-weight:500;line-height:1.08;margin:0;text-wrap:balance;color:#F3F1EC}
h1{font-size:clamp(2.6rem,6vw,5rem);letter-spacing:-.01em}
h2{font-size:clamp(2rem,4vw,3.2rem)}
h3{font-size:1.5rem}
p{margin:0 0 1rem}
a{color:inherit}
.eyebrow{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--amber)}
.wrap{max-width:1180px;margin:0 auto;padding:0 1.5rem}
button{font-family:inherit;cursor:pointer}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 1.4rem;border:1px solid var(--silver);background:transparent;color:#F3F1EC;font-weight:600;font-size:.9rem;letter-spacing:.04em;text-decoration:none;border-radius:2px;transition:background .2s,color .2s}
.btn:hover{background:var(--silver);color:var(--ink)}
.btn.primary{background:var(--amber);border-color:var(--amber);color:var(--ink)}
.btn.primary:hover{background:var(--amber-2);border-color:var(--amber-2)}
.btn:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--amber-2);outline-offset:3px}
/* nav */
header.top{position:sticky;top:0;z-index:50;background:rgba(11,11,12,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;height:68px;gap:1rem}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.brand img{height:44px;width:44px;border-radius:2px}
.brand span{font-family:"Cormorant Garamond",serif;font-size:1.35rem;letter-spacing:.14em;text-transform:uppercase;color:#F3F1EC}
nav.main{display:flex;gap:1.6rem}
nav.main a{text-decoration:none;font-size:.86rem;font-weight:600;letter-spacing:.04em;color:var(--silver)}
nav.main a:hover{color:#fff}
.tools{display:flex;align-items:center;gap:.6rem}
.lang{display:flex;border:1px solid var(--line);border-radius:2px;overflow:hidden}
.lang button{background:transparent;border:0;color:var(--fog);font-family:"IBM Plex Mono",monospace;font-size:.72rem;padding:.45rem .6rem;letter-spacing:.08em}
.lang button.on{background:var(--slate);color:#fff}
.cartbtn{background:transparent;border:1px solid var(--line);color:var(--silver);padding:.45rem .8rem;border-radius:2px;font-size:.8rem;font-weight:600;display:flex;gap:.5rem;align-items:center}
.cartbtn b{background:var(--amber);color:var(--ink);border-radius:999px;padding:0 .45rem;font-size:.72rem;line-height:1.5}
@media (max-width:1000px){nav.main{display:none}.brand span{display:none}}
/* hero */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center;padding-top:3rem;padding-bottom:3rem;min-height:70vh}
.hero p.lead{font-size:1.1rem;color:var(--silver);max-width:52ch;margin:1.4rem 0 2rem}
.hero .ctas{display:flex;gap:.8rem;flex-wrap:wrap}
.hero .art{position:relative;aspect-ratio:1/1;display:grid;place-items:center}
.hero .art img{width:min(100%,420px);border-radius:4px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.hero .art::before{content:"";position:absolute;inset:10%;border-radius:50%;background:radial-gradient(circle,rgba(201,150,59,.22),transparent 65%);filter:blur(20px)}
@media (max-width:860px){.hero .wrap{grid-template-columns:1fr;min-height:0;padding-top:3rem}.hero .art{order:-1;aspect-ratio:auto}.hero .art img{width:200px}}
/* medals strip */
.medals{border-bottom:1px solid var(--line);background:var(--graphite)}
.medals .wrap{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line)}
.medal{background:var(--graphite);padding:1.2rem 1rem;display:flex;flex-direction:column;gap:.2rem}
.medal .n{font-family:"Cormorant Garamond",serif;font-size:2.2rem;color:var(--amber-2);line-height:1}
.medal .l{font-size:.78rem;color:var(--fog);line-height:1.3}
@media (max-width:860px){.medals .wrap{grid-template-columns:repeat(2,1fr)}.medal:last-child{grid-column:1/-1}}
/* sections */
section{padding:5.5rem 0}
.sec-head{max-width:64ch;margin-bottom:2.6rem}
.sec-head h2{margin:.6rem 0 .8rem}
.sec-head p{color:var(--fog);font-size:1.05rem}
.tiers{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.tier{background:var(--ink);padding:1.4rem 1.2rem;display:flex;flex-direction:column;gap:.5rem;min-height:220px;position:relative}
.tier h3{font-size:1.35rem}
.tier p{font-size:.86rem;color:var(--fog);margin:0}
.tier .sw{height:6px;width:48px;border-radius:2px;margin-bottom:.4rem}
.tier a{margin-top:auto;font-size:.8rem;font-weight:600;color:var(--amber-2);text-decoration:none;letter-spacing:.04em}
@media (max-width:1000px){.tiers{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.tiers{grid-template-columns:1fr}}
/* shop */
#shop{background:var(--paper);color:var(--ink-on-paper)}
#shop h2,#shop h3{color:var(--ink-on-paper)}
#shop .sec-head p{color:var(--muted-on-paper)}
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.8rem}
.filters button{border:1px solid var(--line-on-paper);background:transparent;color:var(--ink-on-paper);padding:.45rem .9rem;border-radius:999px;font-size:.82rem;font-weight:600}
.filters button.on{background:var(--ink-on-paper);color:var(--paper);border-color:var(--ink-on-paper)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1.2rem}
.card{background:#fff;border:1px solid var(--line-on-paper);border-radius:4px;display:flex;flex-direction:column;overflow:hidden}
.card .pic{background:linear-gradient(180deg,#F7F4EE,#E9E3D6);aspect-ratio:4/5;display:grid;place-items:center;position:relative}
.card .pic svg{height:90%;width:auto}
.card .badge{position:absolute;top:.7rem;left:.7rem;font-family:"IBM Plex Mono",monospace;font-size:.62rem;letter-spacing:.12em;background:var(--ink-on-paper);color:var(--amber-2);padding:.25rem .5rem;border-radius:2px}
.card .body{padding:1rem 1rem 1.1rem;display:flex;flex-direction:column;gap:.35rem;flex:1}
.card .fruit{font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-on-paper)}
.card h3{font-size:1.2rem;line-height:1.15}
.card .note{font-size:.84rem;color:var(--muted-on-paper);margin:0;flex:1}
.card .row{display:flex;align-items:center;justify-content:space-between;margin-top:.6rem;gap:.5rem}
.card .price{font-family:"Cormorant Garamond",serif;font-size:1.5rem;font-weight:600}
.card .price small{font-family:"Manrope",sans-serif;font-size:.7rem;color:var(--muted-on-paper);font-weight:500;display:block;line-height:1}
.card .add{border:1px solid var(--ink-on-paper);background:var(--ink-on-paper);color:#fff;padding:.55rem .9rem;border-radius:2px;font-size:.78rem;font-weight:700;letter-spacing:.04em}
.card .add.done{background:var(--ok);border-color:var(--ok)}
/* story */
#story .wrap{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:start}
#story .text p{color:var(--silver);max-width:58ch}
#story blockquote{margin:1.6rem 0 0;padding-left:1.2rem;border-left:2px solid var(--amber);font-family:"Cormorant Garamond",serif;font-size:1.4rem;font-style:italic;color:#F3F1EC}
.photos{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.photos figure{margin:0;position:relative;overflow:hidden;border-radius:3px;background:var(--graphite)}
.photos figure:first-child{grid-column:1/-1}
.photos img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:3/2}
.photos figcaption{position:absolute;left:0;right:0;bottom:0;padding:.6rem .8rem;font-size:.72rem;color:#EDEBE6;background:linear-gradient(transparent,rgba(0,0,0,.75))}
.timeline{margin-top:2.4rem;display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;border-top:1px solid var(--line);padding-top:1.4rem}
.timeline div b{display:block;font-family:"Cormorant Garamond",serif;font-size:1.6rem;color:var(--amber-2);line-height:1}
.timeline div span{font-size:.78rem;color:var(--fog);display:block;margin-top:.3rem;line-height:1.35}
@media (max-width:900px){#story .wrap{grid-template-columns:1fr}.timeline{grid-template-columns:repeat(2,1fr)}}
/* taste */
#taste{background:var(--graphite);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
#taste .wrap{display:block}
#taste ul{list-style:none;padding:0;margin:0 0 1.6rem;display:flex;flex-direction:column;gap:.6rem}
#taste li{padding:.8rem 1rem;border:1px solid var(--line);border-radius:3px;font-size:.92rem}
#taste li::before{content:"◆";color:var(--amber);margin-right:.6rem;font-size:.7rem}
#taste img{width:100%;border-radius:4px;aspect-ratio:4/3;object-fit:cover}
@media (max-width:900px){#taste .wrap{grid-template-columns:1fr}}
/* contact */
#contact .wrap{display:grid;grid-template-columns:1fr 1fr;gap:3rem}
#contact .info p{margin:0 0 .5rem;color:var(--silver)}
#contact .info a{color:var(--amber-2);text-decoration:none}
.map{border:1px solid var(--line);border-radius:4px;background:var(--graphite);padding:1.4rem;font-size:.9rem;color:var(--fog)}
.map b{color:#F3F1EC;display:block;font-family:"Cormorant Garamond",serif;font-size:1.3rem;margin-bottom:.3rem}
@media (max-width:800px){#contact .wrap{grid-template-columns:1fr}}
footer{border-top:1px solid var(--line);padding:2rem 0;font-size:.78rem;color:var(--fog)}
footer .wrap{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;align-items:center}
footer a{color:var(--fog);text-decoration:none;margin-right:1rem}
/* drawer */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:80}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);background:var(--paper);color:var(--ink-on-paper);z-index:90;display:flex;flex-direction:column;box-shadow:-20px 0 60px rgba(0,0,0,.5);transform:translateX(100%);transition:transform .25s}
.drawer.open{transform:none}
.drawer header{display:flex;align-items:center;justify-content:space-between;padding:1.1rem 1.3rem;border-bottom:1px solid var(--line-on-paper)}
.drawer header h3{color:var(--ink-on-paper)}
.drawer .x{background:none;border:0;font-size:1.4rem;color:var(--ink-on-paper)}
.drawer .items{flex:1;overflow:auto;padding:1rem 1.3rem;display:flex;flex-direction:column;gap:.8rem}
.line{display:grid;grid-template-columns:44px 1fr auto;gap:.8rem;align-items:center;font-size:.88rem}
.line svg,.line img{height:44px;width:auto;max-width:44px;object-fit:contain}
.line .q{display:flex;align-items:center;gap:.3rem}
.line .q button{width:24px;height:24px;border:1px solid var(--line-on-paper);background:#fff;border-radius:2px;font-size:.9rem;line-height:1}
.line .rm{background:none;border:0;color:var(--danger);font-size:.72rem;padding:0;margin-left:.4rem}
.drawer .sum{padding:1rem 1.3rem;border-top:1px solid var(--line-on-paper);font-size:.9rem;display:flex;flex-direction:column;gap:.35rem}
.drawer .sum div{display:flex;justify-content:space-between}
.drawer .sum .tot{font-family:"Cormorant Garamond",serif;font-size:1.5rem;font-weight:600}
.drawer .sum .btn.primary{margin-top:.6rem;justify-content:center}
.empty{color:var(--muted-on-paper);font-size:.9rem;text-align:center;margin-top:2rem}
/* photo bands */
.band{position:relative;background-size:cover;background-position:center;isolation:isolate}
.band::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,12,.78),rgba(11,11,12,.86));z-index:-1}
@media (min-width:900px) and (hover:hover){.band{background-attachment:fixed}}
/* hero photo */
.hero{background-image:var(--hero);background-size:cover;background-position:center 40%}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,11,12,.94) 0%,rgba(11,11,12,.82) 45%,rgba(11,11,12,.45) 100%)}
.hero .wrap{position:relative}
.hero .art img{width:min(100%,380px);border-radius:4px;box-shadow:0 40px 90px rgba(0,0,0,.7)}
@media (min-width:900px) and (hover:hover){.hero{background-attachment:fixed}}
/* feature bands (barrique / distilat) */
.feature .wrap{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center}
.feature p{color:var(--silver);max-width:52ch}
.feature .pics{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.feature .pics img{width:100%;height:100%;object-fit:cover;border-radius:3px;display:block;aspect-ratio:3/4}
.feature .pics img.wide{grid-column:1/-1;aspect-ratio:16/9}
@media (max-width:900px){.feature .wrap{grid-template-columns:1fr}}
#distilat{background:var(--paper);color:var(--ink-on-paper)}
#distilat h2{color:var(--ink-on-paper)}
#distilat p{color:var(--muted-on-paper)}
#distilat .btn{color:var(--ink-on-paper);border-color:var(--ink-on-paper)}
#distilat .btn:hover{background:var(--ink-on-paper);color:var(--paper)}
/* product card hover */
.card{transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s,border-color .28s;will-change:transform}
.card:hover,.card:focus-within{transform:translateY(-6px);box-shadow:0 24px 50px rgba(23,23,26,.18);border-color:var(--amber)}
.card .pic img{height:88%;width:auto;max-width:90%;object-fit:contain;transition:transform .6s cubic-bezier(.2,.7,.2,1);filter:drop-shadow(0 14px 18px rgba(0,0,0,.18))}
.card .pic svg{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.card:hover .pic img,.card:hover .pic svg{transform:scale(1.07) translateY(-4px)}
.card .pic.photo{background:#fff}
.card .pic::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 40% at 50% 100%,rgba(201,150,59,.22),transparent 70%);opacity:0;transition:opacity .35s}
.card:hover .pic::after{opacity:1}
.card .add{transition:background .2s,color .2s,border-color .2s}
.card:hover .add{background:var(--amber);border-color:var(--amber);color:var(--ink)}
.card .body h3{transition:color .2s}
.card:hover .body h3{color:#7A5416}
/* tasting */
#taste .gallery{display:grid;grid-template-columns:2fr 1fr 1fr;gap:.8rem;margin:2.4rem 0 3.5rem}
#taste .gallery img{width:100%;height:100%;object-fit:cover;border-radius:3px;display:block;aspect-ratio:16/10}
#taste .gallery img:first-child{grid-row:span 2;aspect-ratio:auto}
@media (max-width:800px){#taste .gallery{grid-template-columns:1fr 1fr}#taste .gallery img:first-child{grid-column:1/-1;grid-row:auto;aspect-ratio:16/9}}
#taste .intro{display:grid;grid-template-columns:1.2fr .8fr;gap:3rem;align-items:center}
@media (max-width:900px){#taste .intro{grid-template-columns:1fr}}
.packs{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.pack{background:rgba(21,21,23,.92);border:1px solid var(--line);border-radius:4px;padding:1.6rem 1.5rem;display:flex;flex-direction:column;gap:.6rem;position:relative;transition:transform .25s,border-color .25s}
.pack:hover{transform:translateY(-4px);border-color:var(--amber)}
.pack.hi{border-color:var(--amber);background:rgba(31,31,34,.95)}
.pack .tag{position:absolute;top:-.7rem;right:1rem;font-family:"IBM Plex Mono",monospace;font-size:.62rem;letter-spacing:.12em;background:var(--amber);color:var(--ink);padding:.25rem .55rem;border-radius:2px}
.pack h3{font-size:1.6rem}
.pack .time{font-family:"IBM Plex Mono",monospace;font-size:.72rem;color:var(--fog);letter-spacing:.08em}
.pack .price{font-family:"Cormorant Garamond",serif;font-size:2.6rem;color:var(--amber-2);line-height:1;margin:.4rem 0 .2rem}
.pack .price small{font-family:"Manrope",sans-serif;font-size:.74rem;color:var(--fog);display:block;margin-top:.25rem}
.pack ul{list-style:none;padding:0;margin:.4rem 0 1rem;display:flex;flex-direction:column;gap:.45rem;flex:1}
.pack li{font-size:.9rem;color:var(--silver);padding-left:1.1rem;position:relative}
.pack li::before{content:"◆";color:var(--amber);position:absolute;left:0;top:.35em;font-size:.55rem}
.pack .btn{justify-content:center}
@media (max-width:900px){.packs{grid-template-columns:1fr}}
.addons{margin-top:1.6rem;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.addons div{background:rgba(21,21,23,.92);padding:.9rem 1.1rem;font-size:.86rem;color:var(--silver);display:flex;justify-content:space-between;gap:1rem}
.addons div b{color:var(--amber-2);white-space:nowrap;font-family:"Cormorant Garamond",serif;font-size:1.15rem}
@media (max-width:800px){.addons{grid-template-columns:1fr}}
/* social */
.social{display:flex;gap:.5rem;align-items:center}
.social a{display:inline-grid;place-items:center;width:34px;height:34px;border:1px solid var(--line);border-radius:2px;color:var(--silver);transition:color .2s,border-color .2s,background .2s}
.social a:hover{color:var(--ink);background:var(--amber);border-color:var(--amber)}
.social svg{width:16px;height:16px;fill:currentColor}
@media (max-width:860px){header .social{display:none}}
footer .social a{color:var(--fog)}
.tiers{grid-template-columns:repeat(12,1fr)}
.tier{grid-column:span 3}
.tier:nth-child(n+5){grid-column:span 4}
@media (max-width:1000px){.tier,.tier:nth-child(n+5){grid-column:span 6}.tier:last-child{grid-column:1/-1}}
@media (max-width:560px){.tier,.tier:nth-child(n+5),.tier:last-child{grid-column:1/-1}}
/* ===== v3 premium pass ===== */
body{position:relative}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9998;opacity:.06;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,")}
h1 em,h2 em{font-style:italic;font-weight:400;color:var(--amber-2)}
#shop h2 em,#distilat h2 em{color:#8A5F1E}
.eyebrow{display:flex;align-items:center;gap:.7rem}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--amber);flex:none}
.sec-head{margin-bottom:3.2rem}
section{padding:6.5rem 0}
/* buttons */
.btn{padding:1rem 1.7rem;border:1px solid rgba(201,203,207,.5);font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500;border-radius:0;position:relative;isolation:isolate;overflow:hidden;transition:color .35s,border-color .35s}
.btn::before{content:"";position:absolute;inset:0;background:#F3F1EC;transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.7,.2,1);z-index:-1}
.btn:hover{background:transparent;color:var(--ink);border-color:#F3F1EC}
.btn:hover::before{transform:scaleX(1)}
.btn.primary{background:transparent;border-color:var(--amber);color:var(--amber-2)}
.btn.primary::before{background:var(--amber)}
.btn.primary:hover{background:transparent;color:var(--ink);border-color:var(--amber)}
#distilat .btn,#shop .btn{border-color:var(--ink-on-paper);color:var(--ink-on-paper)}
#distilat .btn::before,#shop .btn::before{background:var(--ink-on-paper)}
#distilat .btn:hover,#shop .btn:hover{color:var(--paper)}
.modal .btn.primary{color:#7A5416}
.modal .btn.primary:hover{color:var(--ink)}
.cartbtn{border-radius:0;font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase}
.lang{border-radius:0}
/* shop filters */
.filters{gap:0 1.8rem;border-bottom:1px solid var(--line-on-paper);margin-bottom:2.4rem}
.filters button{border:0;border-bottom:1px solid transparent;border-radius:0;background:none;padding:.8rem 0 .9rem;font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-on-paper);margin-bottom:-1px;transition:color .2s,border-color .2s;font-weight:500}
.filters button:hover{color:var(--ink-on-paper)}
.filters button.on{background:none;color:var(--ink-on-paper);border-bottom:1px solid var(--amber)}
.card{border-radius:0}
.card .add{border-radius:0;font-family:"IBM Plex Mono",monospace;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;padding:.65rem 1rem}
.card .badge{border-radius:0}
/* tiers with photos */
.tiers{gap:1px;border:1px solid var(--line)}
.tier{overflow:hidden;min-height:280px;padding:1.8rem 1.5rem;background:var(--ink)}
.tier::before{content:"";position:absolute;inset:0;background-image:var(--bg);background-size:cover;background-position:center;opacity:.16;filter:grayscale(.5) contrast(1.1);transition:opacity .6s,transform 1.2s cubic-bezier(.2,.7,.2,1),filter .6s;transform:scale(1.02)}
.tier::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,12,.15),rgba(11,11,12,.85) 70%)}
.tier:hover::before{opacity:.55;transform:scale(1.08);filter:grayscale(0) contrast(1.05)}
.tier>*{position:relative;z-index:1}
.tier .idx{font-family:"IBM Plex Mono",monospace;font-size:.66rem;letter-spacing:.18em;color:var(--amber-2)}
.tier .sw{transition:width .5s cubic-bezier(.2,.7,.2,1)}
.tier:hover .sw{width:96px}
.tier a{font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;display:inline-flex;gap:.5rem;align-items:center}
.tier a::after{content:"→";transition:transform .3s}
.tier:hover a::after{transform:translateX(5px)}
/* hero: ken burns */
.hero{background-image:none!important}
.hero .bg{position:absolute;inset:0;background-image:var(--hero);background-size:cover;background-position:center 40%;animation:kb 26s ease-in-out infinite alternate;z-index:0}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.05)}}
.hero::before{z-index:1}
.hero .wrap{z-index:2}
.hero h1,.hero .eyebrow,.hero .lead,.hero .ctas,.hero .art{animation:rise 1.1s cubic-bezier(.2,.7,.2,1) both}
.hero h1{animation-delay:.1s}.hero .lead{animation-delay:.25s}.hero .ctas{animation-delay:.4s}.hero .art{animation-delay:.3s}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
/* reveal on scroll */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.hero .bg{animation:none}}
/* medals */
.medal .n{font-size:2.6rem;font-weight:400}
.medal{padding:1.6rem 1.2rem}
/* distilat v3 */
#distilat{background:linear-gradient(160deg,#1C97B2,#2FB3C9 55%,#3BC0D2);color:#062B36;padding:0;overflow:hidden}
#distilat .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:0;max-width:none;padding:0}
#distilat .mosaic{display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr;min-height:640px}
#distilat .mosaic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
#distilat .mosaic figure{margin:0;overflow:hidden}
#distilat .mosaic figure:hover img{transform:scale(1.06)}
#distilat .text{padding:5.5rem clamp(1.5rem,6vw,6rem);display:flex;flex-direction:column;justify-content:center}
#distilat h2{color:#062B36}
#distilat h2 em{color:#FFF3B0}
#distilat .eyebrow{color:#062B36}#distilat .eyebrow::before{background:#062B36}
#distilat p{color:#0B3A47}
#distilat .btn{border-color:#062B36;color:#062B36}
#distilat .btn::before{background:#062B36}
#distilat .btn:hover{color:#8EE3F2}
.flavors{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.6rem 0 2rem}
.flavors button{border:1px solid rgba(6,43,54,.35);background:rgba(255,255,255,.14);color:#062B36;border-radius:999px;padding:.45rem .9rem .45rem .5rem;font-size:.8rem;font-weight:600;display:flex;align-items:center;gap:.5rem;transition:background .25s,transform .25s;cursor:pointer}
.flavors button i{width:16px;height:16px;border-radius:50%;display:inline-block;border:2px solid rgba(255,255,255,.7)}
.flavors button:hover{background:#fff;transform:translateY(-2px)}
.serves{list-style:none;padding:0;margin:0 0 2rem;display:flex;flex-direction:column;gap:.4rem;font-size:.9rem;color:#0B3A47}
.serves li::before{content:"—";margin-right:.6rem;color:#062B36}
.serves b{font-family:"IBM Plex Mono",monospace;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;display:block;margin-bottom:.4rem;color:#062B36}
@media (max-width:900px){#distilat .wrap{grid-template-columns:1fr}#distilat .mosaic{min-height:0}#distilat .mosaic img{aspect-ratio:1}}
/* partners marquee */
#partners{padding:5rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--graphite);overflow:hidden}
#partners .sec-head{text-align:center;margin:0 auto 2.6rem}
#partners .eyebrow{justify-content:center}
.marquee{position:relative;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee .track{display:flex;gap:1rem;width:max-content;animation:scroll 42s linear infinite}
.marquee:hover .track{animation-play-state:paused}
@keyframes scroll{to{transform:translateX(-50%)}}
.logo{width:250px;height:130px;border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;text-decoration:none;color:var(--silver);filter:grayscale(1);opacity:.7;transition:opacity .3s,filter .3s,border-color .3s,background .3s;background:var(--ink)}
.logo:hover{opacity:1;filter:none;border-color:var(--amber);background:var(--slate)}
.logo .nm{font-family:"Cormorant Garamond",serif;font-size:1.5rem;letter-spacing:.06em;color:#F3F1EC;text-align:center;line-height:1.1;padding:0 1rem}
.logo .nm.mono{font-family:"IBM Plex Mono",monospace;font-size:1rem;letter-spacing:.24em;text-transform:uppercase}
.logo .nm.sans{font-family:"Manrope",sans-serif;font-weight:700;font-size:1.15rem;letter-spacing:.12em;text-transform:uppercase}
.logo .ty{font-family:"IBM Plex Mono",monospace;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--amber-2);text-align:center;padding:0 .8rem;line-height:1.5}
.logo svg{width:34px;height:34px;stroke:var(--amber-2);fill:none;stroke-width:1.2}
.logo .pl{height:96px;width:96px;object-fit:cover;border-radius:6px;display:block;margin-bottom:.1rem}
/* tasting v3 */
#taste .gallery{grid-template-columns:repeat(3,1fr);margin:2.6rem 0 4rem}
#taste .gallery img,#taste .gallery img:first-child{aspect-ratio:4/3;grid-row:auto}
@media (max-width:800px){#taste .gallery{grid-template-columns:1fr}}
.pack{border-radius:0;padding:2rem 1.8rem}
.pack .meta{display:flex;gap:1rem;flex-wrap:wrap;font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.1em;color:var(--fog);text-transform:uppercase}
.pack .prices{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1rem 0 .6rem;padding:1rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pack .prices div{display:flex;flex-direction:column}
.pack .prices b{font-family:"Cormorant Garamond",serif;font-size:2.2rem;color:var(--amber-2);line-height:1;font-weight:400}
.pack .prices b small{font-family:"Manrope",sans-serif;font-size:.7rem;color:var(--fog);margin-left:.3rem}
.pack .prices span{font-family:"IBM Plex Mono",monospace;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fog);margin-top:.35rem}
.pack .incl{font-family:"IBM Plex Mono",monospace;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);margin-top:.4rem}
.pack .btn{border-radius:0}
.addons{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.addons{grid-template-columns:1fr 1fr}}
#taste .pack li{border:0;padding:.15rem 0 .15rem 1.1rem;font-size:.9rem}
#taste .pack li::before{margin:0}
.pk-note{font-size:.82rem;color:var(--fog);margin-top:1.2rem;max-width:70ch}
/* booking */
.booking{margin-top:3.5rem;background:rgba(21,21,23,.94);border:1px solid var(--line);padding:2rem;display:grid;grid-template-columns:1fr 1.4fr;gap:2.5rem;align-items:start}
.booking h3{font-size:1.8rem;margin-bottom:.4rem}
.booking form{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.booking label{display:flex;flex-direction:column;gap:.35rem;font-family:"IBM Plex Mono",monospace;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fog)}
.booking input,.booking select,.booking textarea{background:var(--ink);border:1px solid var(--line);color:#F3F1EC;padding:.7rem .8rem;font-family:"Manrope",sans-serif;font-size:.9rem;border-radius:0}
.booking input:focus,.booking select:focus,.booking textarea:focus{outline:1px solid var(--amber);border-color:var(--amber)}
.booking .full{grid-column:1/-1}
.booking .demo{grid-column:1/-1;font-family:"IBM Plex Mono",monospace;font-size:.68rem;color:var(--fog)}
@media (max-width:900px){.booking{grid-template-columns:1fr}}
/* map */
#contact .wrap{grid-template-columns:1fr 1.3fr}
.mapbox{position:relative;border:1px solid var(--line);background:var(--graphite);min-height:360px;display:grid}
.mapbox iframe{width:100%;height:100%;min-height:360px;border:0;display:block;filter:grayscale(.85) contrast(1.05) brightness(.85);grid-area:1/1}
.mapbox .fallback{grid-area:1/1;padding:1.4rem;font-size:.9rem;color:var(--fog);align-self:end;background:linear-gradient(transparent,rgba(11,11,12,.92) 40%);display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;align-items:center;justify-content:space-between;pointer-events:none}
.mapbox .fallback *{pointer-events:auto}
.mapbox .fallback b{color:#F3F1EC;font-family:"Cormorant Garamond",serif;font-size:1.3rem;display:block}
.mapbox .fallback .btn{padding:.7rem 1.1rem;font-size:.62rem}
footer{padding:2.6rem 0}
/* ===== v4 ===== */
.brand .lg{height:46px;width:auto;color:#F3F1EC}
.brand img{display:none}
.brand span{display:none}
.hero .art{aspect-ratio:auto;padding:1rem 0}
.hero .art img{width:auto;height:min(62vh,560px);max-width:100%;border-radius:0;box-shadow:none;filter:drop-shadow(0 40px 50px rgba(0,0,0,.75)) drop-shadow(0 0 40px rgba(201,150,59,.18));animation:float 7s ease-in-out infinite}
.hero .art::before{inset:20% 10%;background:radial-gradient(ellipse,rgba(201,150,59,.28),transparent 65%)}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media (max-width:860px){.hero .art img{height:300px;width:auto}}
/* medal badges */
.medals{padding:3.2rem 0 2.6rem;position:relative;overflow:hidden}
.medals .wrap{display:flex;flex-wrap:wrap;justify-content:center;gap:1.6rem 2.2rem;background:none}
.medals .emb{position:absolute;right:-2%;top:50%;transform:translateY(-50%);height:150%;color:#fff;opacity:.035;pointer-events:none}
.badge-m{width:150px;display:flex;flex-direction:column;align-items:center;gap:.5rem;text-decoration:none;color:var(--fog)}
.badge-m svg{width:132px;height:132px;transition:transform .5s cubic-bezier(.2,.7,.2,1),filter .5s;filter:drop-shadow(0 12px 18px rgba(0,0,0,.5))}
.badge-m:hover svg{transform:translateY(-6px) rotate(-4deg) scale(1.05);filter:drop-shadow(0 22px 26px rgba(0,0,0,.6))}
.badge-m .l{font-family:"IBM Plex Mono",monospace;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;text-align:center}
.medals-note{width:100%;text-align:center;font-size:.82rem;color:var(--fog);margin-top:.4rem}
@media (max-width:600px){.badge-m{width:110px}.badge-m svg{width:100px;height:100px}}
/* packs interactive */
.pack{cursor:pointer;transition:transform .25s,border-color .25s,background .25s,box-shadow .25s}
.pack:hover{background:rgba(42,36,24,.96);border-color:var(--amber-2);box-shadow:0 20px 50px rgba(0,0,0,.45)}
.pack.sel{border-color:var(--amber-2);background:rgba(48,40,26,.97)}
.pack.sel::after{content:"✓";position:absolute;top:1rem;right:1rem;width:24px;height:24px;border-radius:50%;background:var(--amber);color:var(--ink);display:grid;place-items:center;font-size:.8rem;font-weight:700}
.pack.hi .tag{right:auto;left:1rem}
/* distilat compact */
#distilat .mosaic{min-height:0}
#distilat .mosaic img{aspect-ratio:4/5}
@media (max-width:900px){#distilat .mosaic{grid-template-columns:1fr 1fr 1fr}#distilat .mosaic img{aspect-ratio:1!important}}
#distilat .text{padding:3.2rem clamp(1.5rem,5vw,4.5rem)}
#distilat p{font-size:.95rem}
.flavors{margin:1.1rem 0 1.3rem}
.serves{margin-bottom:1.4rem}
/* footer logo */
footer .wrap{align-items:center}
footer .lg{height:54px;color:var(--fog);opacity:.8}
/* ===== v5 hero slider ===== */
.hero .bg{background-image:none;animation:none}
.hero .slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.4s ease;animation:kb 14s ease-in-out infinite alternate}
.hero .slide.on{opacity:1}
.hero::before{background:linear-gradient(90deg,rgba(11,11,12,.95) 0%,rgba(11,11,12,.85) 38%,rgba(11,11,12,.35) 68%,rgba(11,11,12,.12) 100%)}
.hero{min-height:calc(100vh - 68px);display:flex;flex-direction:column;padding:0}
.hero .wrap{grid-template-columns:1fr;min-height:0;flex:1;align-content:center;padding-bottom:7.5rem;width:100%}
.hero .art{display:none}
.hero h1{max-width:14ch}
.slidebar{position:absolute;left:0;right:0;bottom:0;z-index:3;border-top:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(11,11,12,.2),rgba(11,11,12,.75));backdrop-filter:blur(6px)}
.slidebar .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-top:1rem;padding-bottom:1rem;min-height:0}
.slidebar .cap{display:flex;align-items:center;gap:1.4rem;min-width:0}
.slidebar .num{font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.2em;color:var(--amber-2);flex:none}
.slidebar .ttl{font-family:"Cormorant Garamond",serif;font-size:clamp(1.15rem,2vw,1.6rem);color:#F3F1EC;line-height:1.15;animation:rise .8s both}
.slidebar .btn{flex:none;padding:.75rem 1.2rem;font-size:.64rem}
.slidebar .nav{display:flex;align-items:center;gap:.8rem;flex:none}
.dots{display:flex;gap:.5rem}
.dots button{width:28px;height:2px;border:0;background:rgba(255,255,255,.3);padding:0;transition:background .3s,width .3s}
.dots button.on{background:var(--amber);width:44px}
.arr{width:36px;height:36px;border:1px solid rgba(255,255,255,.25);background:transparent;color:#F3F1EC;font-size:1rem;display:grid;place-items:center;transition:border-color .2s,background .2s}
.arr:hover{border-color:var(--amber);background:rgba(201,150,59,.15)}
@media (max-width:860px){.hero .wrap{min-height:0;padding:4rem 1.5rem 9rem}.hero h1{max-width:none}.slidebar .wrap{flex-wrap:wrap}.slidebar .nav{display:none}.slidebar .ttl{font-size:1rem}.hero .slide{background-position:70% 30%}}
/* tiers clickable */
.tier{cursor:pointer}
/* booking estimate */
.estimate{grid-column:1/-1;border:1px solid var(--line);background:var(--ink);padding:.9rem 1.1rem;display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap}
.estimate .lbl{font-family:"IBM Plex Mono",monospace;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fog)}
.estimate .val{font-family:"Cormorant Garamond",serif;font-size:2rem;color:var(--amber-2);line-height:1}
.estimate .val small{font-family:"Manrope",sans-serif;font-size:.72rem;color:var(--fog);margin-left:.4rem}
.estimate .calc{font-size:.78rem;color:var(--fog);flex-basis:100%}
/* range on paper */
#range{background:var(--paper);color:var(--ink-on-paper)}
#range h2{color:var(--ink-on-paper)}
#range h2 em{color:#8A5F1E}
#range .sec-head p{color:var(--muted-on-paper)}
.tiers{border-color:var(--line-on-paper);background:var(--line-on-paper);gap:2px}
.tier{background:var(--ink)}
.tier::before{opacity:.28;filter:grayscale(.2) contrast(1.05)}
.tier::after{background:linear-gradient(180deg,rgba(11,11,12,.05),rgba(11,11,12,.88) 72%)}
.tier:hover::before{opacity:.7}
/* round badges */
.card .badge{display:none}
.rb{position:absolute;top:.8rem;left:.8rem;z-index:2;width:62px;height:62px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;font-family:"IBM Plex Mono",monospace;text-transform:uppercase;box-shadow:0 8px 18px rgba(0,0,0,.35),inset 0 0 0 2px rgba(255,255,255,.35);transform:rotate(-8deg);transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.card:hover .rb{transform:rotate(0deg) scale(1.06)}
.rb b{font-size:.56rem;letter-spacing:.08em;font-weight:700}
.rb i{font-style:normal;font-size:.66rem;margin-top:.2rem;font-family:"Cormorant Garamond",serif;font-weight:600;letter-spacing:.04em}
.rb-champion{background:radial-gradient(circle at 30% 25%,#FFF1C2,#E4B65A 45%,#8A5F1E);color:#1a1408}
.rb-gold{background:radial-gradient(circle at 30% 25%,#FBE9B4,#D9A441 50%,#8A5F1E);color:#1a1408}
.rb-medal{background:radial-gradient(circle at 30% 25%,#FFFFFF,#C9CBCF 50%,#6E7178);color:#17171A}
.rb-new{background:radial-gradient(circle at 30% 25%,#8EE3F2,#2FB3C9 55%,#136B7C);color:#062B36}
.rb-best{background:radial-gradient(circle at 30% 25%,#F5A3B0,#B8323F 55%,#5E1520);color:#fff}
.rb-champion::after{content:"★";position:absolute;top:-6px;right:-4px;font-size:.9rem;color:#E4B65A;text-shadow:0 1px 2px rgba(0,0,0,.5)}
/* dark photo cards */
.card .pic.dark{background:#050505}
.card .pic.dark img{height:100%;max-width:100%;width:auto;filter:none}
.card .pic.dark::after{background:radial-gradient(60% 50% at 50% 100%,rgba(201,150,59,.35),transparent 70%)}
/* checkout + age */
[hidden]{display:none!important}
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:rgba(5,5,6,.82);padding:1rem}
.modal .box{background:var(--paper);color:var(--ink-on-paper);width:min(520px,100%);border-radius:4px;padding:1.8rem;max-height:92vh;overflow:auto}
.modal h3{color:var(--ink-on-paper);font-size:1.8rem;margin-bottom:.5rem}
.modal p{color:var(--muted-on-paper);font-size:.92rem}
.modal .btns{display:flex;gap:.6rem;margin-top:1rem;flex-wrap:wrap}
.modal .btn{color:var(--ink-on-paper);border-color:var(--ink-on-paper)}
.modal .btn.primary{color:var(--ink);border-color:var(--amber)}
form.co{display:grid;gap:.7rem}
form.co label{font-size:.78rem;font-weight:600;display:grid;gap:.25rem}
form.co input,form.co textarea,form.co select{font:inherit;padding:.6rem .7rem;border:1px solid var(--line-on-paper);border-radius:2px;background:#fff}
form.co .chk{display:flex;align-items:center;gap:.5rem;font-weight:500}
.demo{font-family:"IBM Plex Mono",monospace;font-size:.7rem;color:var(--muted-on-paper);border-left:2px solid var(--amber);padding-left:.6rem}
.toast{position:fixed;bottom:1.4rem;left:50%;transform:translateX(-50%);background:var(--ink-on-paper);color:#fff;padding:.7rem 1.1rem;border-radius:2px;font-size:.85rem;z-index:120;box-shadow:0 10px 30px rgba(0,0,0,.4)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
/* ==========================================================================
Page-specific styles
product / cart / collection / search / 404 / page / zk-* legal. Rules colliding with the reference were dropped so the reference wins.
========================================================================== */
/* ─────────────────────────────────────────
ZEKULHYDA PREMIUM — SHOPIFY THEME CSS v4
Sursa: zekulhyda-site_8.html (design final)
───────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
/* ── FONTS (matching source HTML) ── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Manrope:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');
body {
font-family: 'Manrope', 'Helvetica Neue', Arial, sans-serif;
background: var(--color-bg, #0B0B0C);
color: var(--color-silver, #C9CBCF);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
font-size: 16px;
line-height: 1.6;
position: relative;
}
.brand-name {
font-family: 'Cormorant Garamond', serif;
font-size: 1.35rem;
letter-spacing: .14em;
text-transform: uppercase;
color: #F3F1EC;
}
.header-tools { display: flex; align-items: center; gap: .6rem; }
.lang-switcher {
display: flex;
border: 1px solid var(--line);
border-radius: 0;
overflow: hidden;
}
.lang-switcher a, .lang-switcher button {
background: transparent;
border: 0;
color: var(--fog);
font-family: 'IBM Plex Mono', monospace;
font-size: .72rem;
padding: .45rem .6rem;
letter-spacing: .08em;
cursor: pointer;
transition: background .2s, color .2s;
}
.lang-switcher a.active, .lang-switcher button.active { background: var(--slate); color: #fff; }
.cart-btn {
background: transparent;
border: 1px solid var(--line);
color: var(--silver);
padding: .45rem .8rem;
border-radius: 0;
font-family: 'IBM Plex Mono', monospace;
font-size: .7rem;
letter-spacing: .14em;
text-transform: uppercase;
display: flex;
gap: .5rem;
align-items: center;
cursor: pointer;
transition: border-color .2s, color .2s;
}
.cart-btn:hover { border-color: var(--amber); color: #fff; }
.cart-count {
background: var(--amber);
color: var(--ink);
border-radius: 999px;
padding: 0 .45rem;
font-size: .72rem;
line-height: 1.5;
font-weight: 700;
}
.burger {
display: none;
flex-direction: column;
gap: 5px;
width: 28px;
padding: 4px 0;
}
.burger span { display: block; height: 1px; background: var(--silver); }
@media (max-width: 860px) {
.brand-name { display: none; }
.burger { display: flex; }
}
/* ── MOBILE NAV ── */
.mobile-nav {
position: fixed;
inset: 0;
background: var(--graphite);
z-index: 200;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2rem;
transform: translateX(100%);
transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.mobile-nav a {
font-family: 'Cormorant Garamond', serif;
font-size: 2rem;
letter-spacing: .08em;
color: #F3F1EC;
}
.mobile-nav .close {
position: absolute;
top: 1.5rem;
right: 1.5rem;
font-size: 1.5rem;
color: var(--fog);
background: none;
border: none;
cursor: pointer;
}
.hero-slide {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
opacity: 0;
transition: opacity 1.4s ease;
animation: kb 14s ease-in-out infinite alternate;
}
@keyframes kb { from { transform: scale(1); } to { transform: scale(1.05); } }
.hero-anim { animation: rise 1.1s cubic-bezier(.2,.7,.2,1) both; }
.hero-anim.d1 { animation-delay: .1s; }
.hero-anim.d2 { animation-delay: .25s; }
.hero-anim.d3 { animation-delay: .4s; }
@keyframes rise { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:none; } }
.slide-cap { display: flex; align-items: center; gap: 1.4rem; min-width: 0; }
.slide-num {
font-family: 'IBM Plex Mono', monospace;
font-size: .68rem;
letter-spacing: .2em;
color: var(--amber-2);
flex: none;
}
.slide-title {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(1.15rem, 2vw, 1.6rem);
color: #F3F1EC;
line-height: 1.15;
}
.slide-dots { display: flex; gap: .5rem; }
.slide-dot {
width: 28px;
height: 1px;
background: rgba(255,255,255,.3);
cursor: pointer;
transition: background .4s;
}
.slide-cta {
font-family: 'IBM Plex Mono', monospace;
font-size: .68rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--amber-2);
white-space: nowrap;
}
.slide-cta::after { content: ' →'; }
@media (max-width: 600px) {
.slide-cta { display: none; }
}
/* ── RANGE / TIERS ── */
.range-section { background: var(--ink); border-bottom: 1px solid var(--line); }
.prod-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(230px,1fr));
gap: 1.2rem;
}
.prod-card {
background: #fff;
border: 1px solid var(--line-on-paper);
border-radius: 0;
display: flex;
flex-direction: column;
overflow: hidden;
transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s, border-color .28s;
will-change: transform;
}
.prod-card:hover {
transform: translateY(-6px);
box-shadow: 0 24px 50px rgba(23,23,26,.18);
border-color: var(--amber);
}
.prod-body { padding: 1rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.prod-fruit {
font-family: 'IBM Plex Mono', monospace;
font-size: .68rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--muted-on-paper);
}
.prod-body h3 { font-size: 1.2rem; line-height: 1.15; transition: color .2s; }
.prod-card:hover .prod-body h3 { color: #7A5416; }
.prod-note { font-size: .84rem; color: var(--muted-on-paper); margin: 0; flex: 1; }
.prod-row { display: flex; align-items: center; justify-content: space-between; margin-top: .6rem; gap: .5rem; }
.prod-price { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; font-weight: 600; color: var(--ink-on-paper); }
.prod-price small { font-family: 'Manrope', sans-serif; font-size: .7rem; color: var(--muted-on-paper); font-weight: 500; display: block; line-height: 1; }
.prod-add {
border: 1px solid var(--ink-on-paper);
background: var(--ink-on-paper);
color: #fff;
padding: .55rem .9rem;
border-radius: 0;
font-family: 'IBM Plex Mono', monospace;
font-size: .64rem;
letter-spacing: .16em;
text-transform: uppercase;
cursor: pointer;
transition: background .2s, color .2s, border-color .2s;
}
.prod-card:hover .prod-add { background: var(--amber); border-color: var(--amber); color: var(--ink); }
#distilat .ds-mosaic {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
min-height: 540px;
}
#distilat .ds-mosaic figure { margin: 0; overflow: hidden; }
#distilat .ds-mosaic img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
aspect-ratio: 4/5;
transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
}
#distilat .ds-mosaic figure:hover img { transform: scale(1.06); }
#distilat .ds-text {
padding: 3.2rem clamp(1.5rem,5vw,4.5rem);
display: flex;
flex-direction: column;
justify-content: center;
}
.ds-flavors { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.1rem 0 1.3rem; }
.ds-flavors button {
border: 1px solid rgba(6,43,54,.35);
background: rgba(255,255,255,.14);
color: #062B36;
border-radius: 999px;
padding: .45rem .9rem .45rem .5rem;
font-size: .8rem;
font-weight: 600;
display: flex;
align-items: center;
gap: .5rem;
transition: background .25s, transform .25s;
cursor: pointer;
}
.ds-flavors button i {
width: 16px;
height: 16px;
border-radius: 50%;
display: inline-block;
border: 2px solid rgba(255,255,255,.7);
}
.ds-flavors button:hover { background: #fff; transform: translateY(-2px); }
.ds-serves { list-style: none; padding: 0; margin: 0 0 1.4rem; display: flex; flex-direction: column; gap: .4rem; font-size: .9rem; color: #0B3A47; }
.ds-serves li::before { content: '—'; margin-right: .6rem; color: #062B36; }
.ds-serves b { font-family: 'IBM Plex Mono', monospace; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; display: block; margin-bottom: .4rem; color: #062B36; }
@media (max-width: 900px) {
#distilat .ds-mosaic { min-height: 0; grid-template-columns: 1fr 1fr 1fr; }
#distilat .ds-mosaic img { aspect-ratio: 1!important; }
}
@keyframes scroll { to { transform: translateX(-50%); } }
.partner-logo {
width: 220px;
height: 110px;
border: 1px solid var(--line);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: .35rem;
text-decoration: none;
color: var(--silver);
filter: grayscale(1);
opacity: .7;
transition: opacity .3s, filter .3s, border-color .3s, background .3s;
background: var(--ink);
padding: 0 1rem;
}
.partner-logo:hover { opacity: 1; filter: none; border-color: var(--amber); background: var(--slate); }
/* ── NEWSLETTER ── */
.newsletter-section { background: var(--ink); border-top: 1px solid var(--line); padding: 5rem 0; }
.newsletter-inner { max-width: 520px; }
.newsletter-form { display: flex; gap: 0; margin-top: 1.6rem; }
.newsletter-form input {
flex: 1;
background: var(--graphite);
border: 1px solid var(--line);
border-right: none;
color: #F3F1EC;
padding: .85rem 1rem;
font-family: 'Manrope', sans-serif;
font-size: .9rem;
}
.newsletter-form input:focus { outline: none; border-color: var(--amber); }
.newsletter-form button {
padding: .85rem 1.4rem;
background: var(--amber);
border: 1px solid var(--amber);
color: var(--ink);
font-family: 'IBM Plex Mono', monospace;
font-size: .7rem;
letter-spacing: .2em;
text-transform: uppercase;
cursor: pointer;
transition: background .2s;
}
.newsletter-form button:hover { background: var(--amber-2); }
.newsletter-gdpr { font-size: .78rem; color: var(--fog); margin-top: .8rem; }
footer .foot-inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; }
.foot-brand .foot-logo { font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; letter-spacing: .14em; text-transform: uppercase; color: #F3F1EC; margin-bottom: .8rem; }
.foot-tagline { font-style: italic; font-size: .9rem; color: var(--fog); margin-bottom: 1rem; font-family: 'Cormorant Garamond', serif; }
.foot-col h4 { font-family: 'IBM Plex Mono', monospace; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--amber); margin-bottom: 1rem; }
.foot-col a, .foot-col p { display: block; font-size: .84rem; color: var(--fog); margin-bottom: .4rem; transition: color .2s; text-decoration: none; }
.foot-col a:hover { color: var(--silver); }
.foot-legal {
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px solid var(--line);
display: flex;
flex-wrap: wrap;
gap: .5rem 1.5rem;
font-size: .72rem;
color: var(--fog);
}
.foot-legal a { color: var(--fog); text-decoration: none; }
.foot-legal a:hover { color: var(--silver); }
.alcohol-warning {
background: rgba(184,50,63,.15);
border-top: 1px solid rgba(184,50,63,.3);
padding: .8rem 0;
text-align: center;
font-size: .78rem;
color: #c97f87;
letter-spacing: .04em;
}
@media (max-width: 860px) {
footer .foot-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
footer .foot-inner { grid-template-columns: 1fr; }
}
.cart-line { display: grid; grid-template-columns: 44px 1fr auto; gap: .8rem; align-items: center; font-size: .88rem; }
.cart-line img { height: 44px; width: auto; max-width: 44px; object-fit: contain; }
.cart-empty { color: var(--muted-on-paper); font-size: .9rem; text-align: center; margin-top: 2rem; }
/* ── AGE GATE ── */
.age-gate {
position: fixed;
inset: 0;
background: var(--ink);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
padding: 2rem;
}
.age-gate p { color: var(--fog); margin: 1rem 0 2rem; max-width: 380px; font-size: .95rem; }
@media (prefers-reduced-motion: reduce) {
.hero-slide { animation: none; }
}
@keyframes toast-in { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@keyframes zkShineSweep {
from { background-position: 150% 150%; }
to { background-position: -50% -50%; }
}
@keyframes zkShimmer {
to { background-position: -220% center; }
}
@keyframes zkGlowPulse {
0%, 100% { opacity: 0.7; }
50% { opacity: 1; }
}
/* ─── Gold Divider ──────────────────────────────────────────────────────────── */
.zk-divider {
display: flex;
align-items: center;
gap: 2rem;
margin: 2rem auto;
max-width: 300px;
}
.zk-divider::before,
.zk-divider::after {
content: '';
flex: 1;
height: 1px;
background: linear-gradient(to right, transparent, var(--zk-gold));
}
.zk-divider::after {
background: linear-gradient(to left, transparent, var(--zk-gold));
}
.zk-divider span {
color: var(--zk-gold);
font-size: 1.8rem;
}
/* ─── Zekulhyda Story Section ──────────────────────────────────────────────── */
.zk-story {
background-color: var(--zk-dark);
padding: 8rem 3rem;
}
.zk-story__inner {
max-width: 900px;
margin: 0 auto;
text-align: center;
}
.zk-story__label {
font-family: var(--zk-font-body);
font-size: 1.1rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--zk-gold);
margin-bottom: 2rem;
display: block;
}
.zk-story__title {
font-family: var(--zk-font-heading);
font-size: 5rem;
font-weight: 400;
color: var(--zk-warm-white);
margin-bottom: 1rem;
line-height: 1.1;
}
@media screen and (max-width: 749px) {
.zk-story__title {
font-size: 3.5rem;
}
}
.zk-story__ornament {
color: var(--zk-gold);
margin: 2.4rem 0;
display: block;
}
.zk-story__ornament svg {
width: 16rem;
max-width: 60%;
height: auto;
}
.zk-story__text {
font-family: var(--zk-font-body);
font-size: 1.6rem;
line-height: 2;
color: rgba(245, 240, 232, 0.78);
font-weight: 300;
text-align: left;
margin-bottom: 2.5rem;
}
.zk-story__quote {
font-family: var(--zk-font-heading);
font-size: 2.4rem;
font-style: italic;
color: var(--zk-gold);
margin: 4rem 0 2rem;
padding: 2rem 4rem;
border-left: 3px solid var(--zk-gold);
text-align: left;
line-height: 1.5;
}
/* ─── Awards Section ────────────────────────────────────────────────────────── */
.zk-awards {
background-color: var(--zk-black);
padding: 8rem 3rem;
border-top: 1px solid var(--zk-border-gold);
border-bottom: 1px solid var(--zk-border-gold);
}
.zk-awards__inner {
max-width: 1280px;
margin: 0 auto;
}
.zk-awards__header {
text-align: center;
margin-bottom: 6rem;
}
.zk-awards__label {
font-family: var(--zk-font-body);
font-size: 1.1rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--zk-gold);
margin-bottom: 1.5rem;
display: block;
}
.zk-awards__title {
font-family: var(--zk-font-heading);
font-size: 4.5rem;
font-weight: 400;
color: var(--zk-warm-white);
margin-bottom: 1.5rem;
}
.zk-awards__subtitle {
color: rgba(245, 240, 232, 0.6);
font-size: 1.5rem;
font-family: var(--zk-font-body);
font-weight: 300;
}
.zk-awards__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
}
@media screen and (max-width: 989px) {
.zk-awards__grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (max-width: 749px) {
.zk-awards__grid {
grid-template-columns: 1fr;
}
}
.zk-award-card {
border: 1px solid var(--zk-border-gold);
padding: 3rem 2rem;
text-align: center;
transition: border-color 0.3s ease, background-color 0.3s ease;
}
.zk-award-card:hover {
border-color: var(--zk-gold);
background-color: rgba(201, 168, 76, 0.05);
}
.zk-award-card__medal {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 8.4rem;
height: 8.4rem;
margin-bottom: 1.8rem;
border-radius: 50%;
color: var(--zk-gold);
background:
radial-gradient(circle at 50% 38%, rgba(201, 168, 76, 0.16), transparent 68%);
transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
/* soft ring + sweeping shine over the medal */
.zk-award-card__medal::before {
content: '';
position: absolute;
inset: 0;
border-radius: 50%;
border: 1px solid rgba(201, 168, 76, 0.25);
transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.zk-award-card__medal::after {
content: '';
position: absolute;
inset: 0;
border-radius: 50%;
background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.45) 50%, transparent 65%);
background-size: 250% 250%;
background-position: 150% 150%;
opacity: 0;
pointer-events: none;
}
.zk-medal-svg {
position: relative;
width: 4.8rem;
height: 4.8rem;
z-index: 1;
overflow: visible;
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
/* metallic tints per rank */
.zk-medal--gold .zk-award-card__medal { color: #E0C068; }
.zk-medal--silver .zk-award-card__medal { color: #D8D8DE; }
.zk-medal--bronze .zk-award-card__medal { color: #C99367; }
.zk-medal--silver .zk-award-card__medal {
background: radial-gradient(circle at 50% 38%, rgba(216, 216, 222, 0.14), transparent 68%);
}
.zk-medal--bronze .zk-award-card__medal {
background: radial-gradient(circle at 50% 38%, rgba(201, 147, 103, 0.14), transparent 68%);
}
/* idle gentle float */
.zk-award-card .zk-medal-svg {
animation: zkFloat 5s ease-in-out infinite;
}
.zk-award-card:nth-child(2) .zk-medal-svg { animation-delay: 0.6s; }
.zk-award-card:nth-child(3) .zk-medal-svg { animation-delay: 1.2s; }
.zk-award-card:nth-child(4) .zk-medal-svg { animation-delay: 1.8s; }
/* hover: lift medal, ignite ring + shine sweep */
.zk-award-card:hover .zk-award-card__medal {
transform: scale(1.06);
}
.zk-award-card:hover .zk-award-card__medal::before {
border-color: rgba(224, 192, 104, 0.7);
box-shadow: 0 0 22px rgba(201, 168, 76, 0.35), inset 0 0 12px rgba(201, 168, 76, 0.2);
}
.zk-award-card:hover .zk-award-card__medal::after {
opacity: 1;
animation: zkShineSweep 0.9s ease forwards;
}
.zk-award-card__count {
font-family: var(--zk-font-heading);
font-size: 5rem;
color: var(--zk-gold);
line-height: 1;
display: block;
margin-bottom: 0.5rem;
}
.zk-award-card__type {
font-family: var(--zk-font-heading);
font-size: 2rem;
color: var(--zk-warm-white);
display: block;
margin-bottom: 1rem;
}
.zk-award-card__desc {
font-family: var(--zk-font-body);
font-size: 1.3rem;
color: rgba(245, 240, 232, 0.6);
font-weight: 300;
line-height: 1.6;
}
.zk-award-card--champion {
border-color: var(--zk-gold);
background: linear-gradient(135deg, rgba(201, 168, 76, 0.08) 0%, transparent 100%);
}
.zk-awards__competition {
margin-top: 5rem;
text-align: center;
padding: 3rem;
border: 1px solid var(--zk-border-gold);
}
.zk-awards__competition-name {
font-family: var(--zk-font-heading);
font-size: 2rem;
color: var(--zk-gold);
margin-bottom: 0.5rem;
}
.zk-awards__competition-detail {
font-family: var(--zk-font-body);
font-size: 1.4rem;
color: rgba(245, 240, 232, 0.65);
font-weight: 300;
}
/* ════════════════════════════════════════════════════════════════════════════
PREMIUM EFFECTS & ANIMATIONS
════════════════════════════════════════════════════════════════════════════ */
/* ─── Scroll reveal ─────────────────────────────────────────────────────────── */
.zk-reveal {
opacity: 0;
transform: translateY(32px);
transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
transition-delay: var(--zk-delay, 0ms);
will-change: opacity, transform;
}
.zk-reveal.is-visible {
opacity: 1;
transform: none;
}
/* ─── Gold shimmer title ────────────────────────────────────────────────────── */
.zk-shimmer {
background: linear-gradient(
100deg,
var(--zk-warm-white) 0%,
var(--zk-gold-light) 30%,
var(--zk-white) 48%,
var(--zk-gold) 62%,
var(--zk-warm-white) 100%
);
background-size: 220% auto;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent !important;
animation: zkShimmer 7s linear infinite;
}
/* ─── Award card: sheen sweep + glow lift ───────────────────────────────────── */
.zk-award-card {
position: relative;
overflow: hidden;
}
.zk-award-card::before {
content: '';
position: absolute;
top: 0;
left: -120%;
width: 60%;
height: 100%;
background: linear-gradient(115deg, transparent, rgba(201, 168, 76, 0.12), transparent);
transform: skewX(-18deg);
transition: left 0.7s cubic-bezier(0.22, 1, 0.36, 1);
pointer-events: none;
}
.zk-award-card:hover {
transform: translateY(-6px);
border-color: var(--zk-gold) !important;
box-shadow: 0 18px 45px -22px rgba(0, 0, 0, 0.9),
0 0 0 1px rgba(201, 168, 76, 0.25);
}
.zk-award-card::before { will-change: left; }
.zk-award-card:hover::before { left: 130%; }
.zk-award-card {
transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
border-color 0.4s ease,
box-shadow 0.45s ease,
background-color 0.4s ease;
}
.zk-award-card--champion {
box-shadow: 0 0 0 1px rgba(201, 168, 76, 0.25),
0 0 40px -18px rgba(201, 168, 76, 0.4);
}
.zk-award-card__count {
background: linear-gradient(180deg, var(--zk-gold-light), var(--zk-gold-dark));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
/* ─── Story quote: subtle entrance accent ───────────────────────────────────── */
.zk-story__quote {
position: relative;
transition: border-color 0.4s ease;
}
.zk-story__quote::before {
content: '';
position: absolute;
left: -3px;
top: 0;
width: 3px;
height: 100%;
background: linear-gradient(180deg, var(--zk-gold-light), transparent);
opacity: 0;
transition: opacity 0.6s ease;
}
.zk-story.is-visible .zk-story__quote::before,
.zk-story__inner.is-visible .zk-story__quote::before {
opacity: 1;
}
/* ════════════════════════════════════════════════════════════════════════════
LEGAL FOOTER BAR
════════════════════════════════════════════════════════════════════════════ */
.zk-legalbar {
background-color: var(--zk-black);
border-top: 1px solid var(--zk-border-gold);
padding: 4.5rem 2.4rem 4rem;
}
.zk-legalbar__inner {
max-width: 1280px;
margin: 0 auto;
}
.zk-legalbar__age {
display: flex;
align-items: center;
justify-content: center;
gap: 1.4rem;
text-align: center;
border: 1px solid var(--zk-border-gold);
padding: 1.6rem 2rem;
margin-bottom: 4rem;
flex-wrap: wrap;
}
.zk-legalbar__age-badge {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 4rem;
height: 4rem;
border: 1px solid var(--zk-gold);
border-radius: 50%;
color: var(--zk-gold);
font-family: var(--zk-font-heading);
font-size: 1.5rem;
}
.zk-legalbar__age p {
margin: 0;
font-family: var(--zk-font-body);
font-size: 1.3rem;
letter-spacing: 0.05em;
color: rgba(245, 240, 232, 0.65);
font-weight: 300;
}
.zk-legalbar__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 3rem;
margin-bottom: 3.5rem;
}
@media screen and (max-width: 749px) {
.zk-legalbar__grid { grid-template-columns: 1fr; gap: 2.5rem; }
}
.zk-legalbar__heading {
font-family: var(--zk-font-heading) !important;
font-size: 1.7rem !important;
color: var(--zk-gold) !important;
letter-spacing: 0.08em;
text-transform: uppercase;
margin: 0 0 1.4rem;
}
.zk-legalbar__col p {
margin: 0 0 0.5rem;
font-family: var(--zk-font-body);
font-size: 1.3rem;
line-height: 1.6;
color: rgba(245, 240, 232, 0.6);
font-weight: 300;
}
.zk-legalbar__links {
list-style: none;
margin: 0;
padding: 0;
}
.zk-legalbar__links li { margin-bottom: 0.8rem; }
.zk-legalbar__links a,
.zk-legalbar__col a {
font-family: var(--zk-font-body);
font-size: 1.3rem;
color: rgba(245, 240, 232, 0.7);
text-decoration: none;
transition: color 0.25s ease;
}
.zk-legalbar__links a:hover,
.zk-legalbar__col a:hover { color: var(--zk-gold); }
.zk-legalbar__badges {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 1rem;
}
.zk-legalbar__badge {
display: inline-flex;
align-items: center;
padding: 0.8rem 1.4rem;
border: 1px solid var(--zk-border-gold);
font-family: var(--zk-font-body);
font-size: 1.15rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--zk-warm-white) !important;
transition: all 0.3s ease;
}
.zk-legalbar__badge:hover {
border-color: var(--zk-gold);
color: var(--zk-gold) !important;
background: rgba(201, 168, 76, 0.06);
}
.zk-legalbar__note {
font-size: 1.15rem !important;
color: rgba(245, 240, 232, 0.4) !important;
}
.zk-legalbar__copy {
text-align: center;
font-family: var(--zk-font-body);
font-size: 1.2rem;
letter-spacing: 0.06em;
color: rgba(245, 240, 232, 0.4);
border-top: 1px solid rgba(201, 168, 76, 0.15);
padding-top: 2.5rem;
margin: 0;
}
/* ════════════════════════════════════════════════════════════════════════════
PREMIUM EFFECTS v2 — scroll progress, back-to-top, soft reveal, accents
════════════════════════════════════════════════════════════════════════════ */
/* ─── Gold scroll-progress bar ──────────────────────────────────────────────── */
.zk-progress {
position: fixed;
top: 0;
left: 0;
width: 0;
height: 3px;
z-index: 2147482000;
background: linear-gradient(90deg, var(--zk-gold-dark), var(--zk-gold-light), var(--zk-gold));
box-shadow: 0 0 12px rgba(201, 168, 76, 0.6);
pointer-events: none;
transition: width 0.12s linear;
}
/* ─── Back-to-top button ────────────────────────────────────────────────────── */
.zk-totop {
position: fixed;
right: 2.4rem;
bottom: 2.4rem;
width: 4.8rem;
height: 4.8rem;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--zk-border-gold);
background: rgba(13, 13, 13, 0.7);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: var(--zk-gold);
border-radius: 50%;
cursor: pointer;
opacity: 0;
visibility: hidden;
transform: translateY(14px) scale(0.92);
transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
visibility 0.4s ease, border-color 0.3s ease, background-color 0.3s ease;
z-index: 2147481000;
}
.zk-totop.is-visible {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}
.zk-totop:hover {
border-color: var(--zk-gold);
background: rgba(201, 168, 76, 0.12);
box-shadow: 0 0 22px -4px rgba(201, 168, 76, 0.5);
}
@media screen and (max-width: 749px) {
.zk-totop { right: 1.6rem; bottom: 1.6rem; width: 4.2rem; height: 4.2rem; }
}
/* ─── Soft reveal for native Dawn sections (added by JS only) ────────────────── */
.zk-soft {
transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
will-change: opacity, transform;
}
.zk-soft.zk-soft-hidden {
opacity: 0;
transform: translateY(28px);
}
/* ─── Section title underline accent ────────────────────────────────────────── */
.zk-story__title,
.zk-awards__title,
.zk-despre__title,
.zk-despre__section-title {
position: relative;
}
.zk-awards__header.is-visible .zk-awards__title::after,
.zk-despre__awards.is-visible .zk-despre__section-title::after,
.zk-despre__comps.is-visible .zk-despre__section-title::after,
.zk-despre__products.is-visible .zk-despre__section-title::after {
transform: scaleX(1);
}
.zk-awards__title::after,
.zk-despre__section-title::after {
content: '';
display: block;
width: 7rem;
height: 2px;
margin: 1.8rem auto 0;
background: linear-gradient(90deg, transparent, var(--zk-gold), transparent);
transform: scaleX(0);
transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}
/* ─── Ambient gold glow on text sections ────────────────────────────────────── */
.zk-story,
.zk-despre {
position: relative;
overflow: hidden;
}
.zk-story::before,
.zk-despre::before {
content: '';
position: absolute;
top: -18%;
left: 50%;
width: 70rem;
max-width: 120%;
height: 40rem;
transform: translateX(-50%);
background: radial-gradient(ellipse at center, rgba(201, 168, 76, 0.10), transparent 68%);
pointer-events: none;
z-index: 0;
animation: zkGlowPulse 9s ease-in-out infinite;
}
.zk-story__inner,
.zk-despre__hero,
.zk-despre__inner {
position: relative;
z-index: 1;
}
/* ════════════════════════════════════════════════════════════════════════════
DESPRE (ABOUT) PAGE
════════════════════════════════════════════════════════════════════════════ */
.zk-despre {
background-color: var(--zk-black);
padding: 8rem 2.4rem 9rem;
}
.zk-despre__hero {
text-align: center;
max-width: 90rem;
margin: 0 auto 5rem;
}
.zk-despre__eyebrow {
display: block;
font-family: var(--zk-font-body);
font-size: 1.2rem;
letter-spacing: 0.34em;
text-transform: uppercase;
color: var(--zk-gold);
margin-bottom: 1.8rem;
}
.zk-despre__title {
font-family: var(--zk-font-heading) !important;
font-size: 6rem;
font-weight: 300;
letter-spacing: 0.06em;
line-height: 1.05;
margin: 0 0 1rem;
text-transform: uppercase;
}
.zk-despre__motto {
font-family: var(--zk-font-heading);
font-style: italic;
font-size: 2.2rem;
color: var(--zk-gold);
margin: 1.5rem 0 0;
}
.zk-despre__inner {
max-width: 82rem;
margin: 0 auto;
}
.zk-despre__story { margin-bottom: 5rem; }
.zk-despre__lead {
font-family: var(--zk-font-body);
font-size: 1.65rem;
line-height: 2;
color: rgba(245, 240, 232, 0.82);
font-weight: 300;
margin: 0 0 1.8rem;
}
/* ─── Founder ───────────────────────────────────────────────────────────────── */
.zk-despre__founder {
display: flex;
gap: 2.6rem;
align-items: flex-start;
border: 1px solid var(--zk-border-gold);
background: linear-gradient(135deg, rgba(201, 168, 76, 0.06), transparent 70%);
padding: 3.4rem;
margin-bottom: 6rem;
}
.zk-despre__founder-mark {
flex: 0 0 auto;
width: 6.4rem;
height: 6.4rem;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--zk-gold);
border-radius: 50%;
color: var(--zk-gold);
}
.zk-despre__founder-mark svg { width: 3.4rem; height: 3.4rem; }
.zk-despre__founder-role {
display: block;
font-family: var(--zk-font-body);
font-size: 1.15rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--zk-gold);
margin-bottom: 0.6rem;
}
.zk-despre__founder-name {
font-family: var(--zk-font-heading) !important;
font-size: 3rem;
font-weight: 400;
color: var(--zk-warm-white);
margin: 0 0 1.2rem;
}
.zk-despre__founder-body p {
font-family: var(--zk-font-body);
font-size: 1.5rem;
line-height: 1.85;
color: rgba(245, 240, 232, 0.78);
font-weight: 300;
margin: 0;
}
@media screen and (max-width: 749px) {
.zk-despre__founder { flex-direction: column; gap: 1.8rem; padding: 2.4rem; }
}
/* ─── Section labels/titles inside despre ───────────────────────────────────── */
.zk-despre__section-label {
display: block;
text-align: center;
font-family: var(--zk-font-body);
font-size: 1.1rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--zk-gold);
margin-bottom: 1.4rem;
}
.zk-despre__section-title {
font-family: var(--zk-font-heading) !important;
font-size: 3.6rem;
font-weight: 400;
color: var(--zk-warm-white);
text-align: center;
margin: 0 0 2.5rem;
}
/* ─── Awards block ──────────────────────────────────────────────────────────── */
.zk-despre__awards { margin-bottom: 6rem; }
.zk-despre__awards-sub {
text-align: center;
font-family: var(--zk-font-body);
font-size: 1.45rem;
color: rgba(245, 240, 232, 0.6);
font-weight: 300;
max-width: 56rem;
margin: -1rem auto 3rem;
}
.zk-despre__stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.6rem;
}
@media screen and (max-width: 989px) {
.zk-despre__stats { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 600px) {
.zk-despre__stats { grid-template-columns: repeat(2, 1fr); }
}
.zk-despre__stat {
text-align: center;
border: 1px solid var(--zk-border-gold);
padding: 2.6rem 1rem;
transition: border-color 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
background-color 0.35s ease;
}
.zk-despre__stat:hover {
border-color: var(--zk-gold);
transform: translateY(-5px);
background: rgba(201, 168, 76, 0.05);
}
.zk-despre__stat--hero {
border-color: var(--zk-gold);
background: linear-gradient(135deg, rgba(201, 168, 76, 0.10), transparent);
}
.zk-despre__stat-num {
display: block;
font-family: var(--zk-font-heading);
font-size: 4.4rem;
line-height: 1;
margin-bottom: 0.6rem;
background: linear-gradient(180deg, var(--zk-gold-light), var(--zk-gold-dark));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.zk-medal--silver .zk-despre__stat-num {
background: linear-gradient(180deg, #EAEAF0, #9FA0AA);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.zk-medal--bronze .zk-despre__stat-num {
background: linear-gradient(180deg, #DBA77C, #9C6B45);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.zk-despre__stat-label {
font-family: var(--zk-font-body);
font-size: 1.2rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(245, 240, 232, 0.7);
}
.zk-despre__champs {
margin: 2.6rem 0 0;
text-align: center;
font-family: var(--zk-font-body);
font-size: 1.4rem;
line-height: 1.8;
color: rgba(245, 240, 232, 0.7);
font-weight: 300;
}
.zk-despre__champs strong { color: var(--zk-gold); font-weight: 500; }
/* ─── Competitions ──────────────────────────────────────────────────────────── */
.zk-despre__comps { margin-bottom: 6rem; }
.zk-despre__comp-list {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid var(--zk-border-gold);
}
.zk-despre__comp-list li {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 2rem;
padding: 2rem 0.5rem;
border-bottom: 1px solid var(--zk-border-gold);
transition: padding-left 0.35s ease, background-color 0.35s ease;
}
.zk-despre__comp-list li:hover {
padding-left: 1.6rem;
background: rgba(201, 168, 76, 0.04);
}
.zk-despre__comp-name {
font-family: var(--zk-font-heading);
font-size: 2rem;
color: var(--zk-warm-white);
}
.zk-despre__comp-meta {
font-family: var(--zk-font-body);
font-size: 1.3rem;
color: rgba(245, 240, 232, 0.55);
font-weight: 300;
text-align: right;
}
@media screen and (max-width: 600px) {
.zk-despre__comp-list li { flex-direction: column; gap: 0.4rem; }
.zk-despre__comp-meta { text-align: left; }
}
/* ─── Products chips ────────────────────────────────────────────────────────── */
.zk-despre__products { margin-bottom: 6rem; }
.zk-despre__chips {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
}
.zk-despre__chip {
font-family: var(--zk-font-body);
font-size: 1.3rem;
letter-spacing: 0.04em;
color: rgba(245, 240, 232, 0.8);
border: 1px solid var(--zk-border-gold);
padding: 0.9rem 1.6rem;
transition: all 0.3s ease;
}
.zk-despre__chip:hover {
border-color: var(--zk-gold);
color: var(--zk-gold);
background: rgba(201, 168, 76, 0.06);
transform: translateY(-3px);
}
/* ─── CTA ───────────────────────────────────────────────────────────────────── */
.zk-despre__cta {
text-align: center;
border-top: 1px solid var(--zk-border-gold);
padding-top: 5rem;
}
.zk-despre__cta-text {
font-family: var(--zk-font-heading);
font-size: 2.4rem;
font-style: italic;
color: var(--zk-warm-white);
margin: 0 0 2.4rem;
}
@media screen and (max-width: 749px) {
.zk-despre__title { font-size: 4rem; }
.zk-despre__motto { font-size: 1.8rem; }
.zk-despre__section-title { font-size: 2.8rem; }
.zk-despre__lead { font-size: 1.5rem; }
}
/* ==========================================================================
Product card corrections
========================================================================== */
/* The artwork tile is meant to be a 4/5 rectangle. A photo respects that, but the
bottle-svg fallback has no intrinsic ratio, so it stretched the tile from 289px to
570px and cards without a product image rendered ~50% taller than the rest of the
grid. Taking the fallback out of the flow lets aspect-ratio decide the height. */
.card .pic { overflow: hidden; }
.card .pic > svg {
position: absolute;
top: 50%;
left: 50%;
height: 84%;
width: auto;
max-width: 86%;
transform: translate(-50%, -50%);
}
.card:hover .pic > svg,
.card:focus-within .pic > svg { transform: translate(-50%, -50%) scale(1.07); }
/* Award medal in the corner of a card, so a prize-winning bottle is recognisable
straight from the grid. */
.zk-mini {
position: absolute;
right: .55rem;
bottom: .55rem;
width: 52px;
height: 52px;
z-index: 2;
display: block;
filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45));
transition: transform .35s cubic-bezier(.2, .7, .2, 1);
pointer-events: none;
}
.zk-mini svg { width: 100%; height: 100%; display: block; }
.card:hover .zk-mini { transform: translateY(-4px) rotate(-6deg) scale(1.06); }
.zk-mini__more {
position: absolute;
right: -4px;
top: -4px;
background: var(--ink-on-paper);
color: var(--amber-2);
font-family: "IBM Plex Mono", monospace;
font-size: .58rem;
font-style: normal;
line-height: 1;
padding: .18rem .3rem;
border-radius: 2px;
}
@media (max-width: 560px) { .zk-mini { width: 42px; height: 42px; } }
/* Filters are buttons now rather than links, so they need the anchor's reset. */
.filters button { cursor: pointer; font-family: inherit; }
/* Titles and blurbs vary in length, which left cards in different grid rows between 543
and 586px tall. Clamping both to a fixed number of lines makes every card the same
height regardless of the product's copy. */
.card .body h3 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 2.3em;
}
.card .note {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 3.9em;
}
/* ==========================================================================
Product page
Rebuilt in the reference design's language (wrap / eyebrow / btn / card) — it was
still using the old v5 vocabulary, which is why it read as a generic template.
========================================================================== */
.pdp { padding: 7rem 0 6rem; }
.pdp__crumbs { display: flex; gap: .8rem; align-items: center; font-family: "IBM Plex Mono", monospace; font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--fog); margin-bottom: 3rem; flex-wrap: wrap; }
.pdp__crumbs a { color: var(--fog); text-decoration: none; }
.pdp__crumbs a:hover { color: var(--amber-2); }
.pdp__top { display: grid; grid-template-columns: 1fr 1fr; gap: 4.5rem; align-items: start; }
@media (max-width: 900px) { .pdp__top { grid-template-columns: 1fr; gap: 2.5rem; } }
/* Media -------------------------------------------------------------------- */
.pdp__media { position: sticky; top: 92px; }
@media (max-width: 900px) { .pdp__media { position: static; } }
.pdp__stage {
position: relative; aspect-ratio: 4/5; border: 1px solid var(--line); border-radius: 3px;
background: radial-gradient(120% 90% at 50% 0%, #17171A 0%, #0E0E10 70%);
display: grid; place-items: center; overflow: hidden;
}
.pdp__stage::after {
content: ""; position: absolute; inset: auto 0 0 0; height: 45%;
background: radial-gradient(60% 100% at 50% 100%, rgba(201,150,59,.20), transparent 70%);
pointer-events: none;
}
.pdp__stage img { max-height: 86%; max-width: 82%; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 30px 45px rgba(0,0,0,.6)); }
.pdp__stage > svg { height: 84%; width: auto; }
.pdp__stage .zk-mini { right: 1rem; bottom: 1rem; width: 74px; height: 74px; }
.pdp__thumbs { display: flex; gap: .6rem; margin-top: .8rem; flex-wrap: wrap; }
.pdp__thumb { width: 74px; aspect-ratio: 4/5; padding: 0; background: var(--graphite); border: 1px solid var(--line); border-radius: 2px; overflow: hidden; cursor: pointer; transition: border-color .25s; }
.pdp__thumb img { width: 100%; height: 100%; object-fit: contain; }
.pdp__thumb:hover { border-color: var(--fog); }
.pdp__thumb.on { border-color: var(--amber); }
/* Info --------------------------------------------------------------------- */
.pdp__title { font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(2.2rem, 4vw, 3.4rem); font-weight: 500; line-height: 1.05; color: #F3F1EC; margin: .7rem 0 1rem; }
.pdp__badge { display: inline-block; font-family: "IBM Plex Mono", monospace; font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--amber-2); border: 1px solid rgba(201,150,59,.45); padding: .3rem .6rem; border-radius: 2px; margin-bottom: 1rem; }
.pdp__price { display: flex; align-items: baseline; gap: .8rem; margin: 0 0 2rem; }
.pdp__price-now { font-family: "Cormorant Garamond", serif; font-size: 2.6rem; color: var(--amber-2); line-height: 1; }
.pdp__price s { color: var(--fog); font-size: 1.1rem; }
.pdp__price small { font-family: "IBM Plex Mono", monospace; font-size: .68rem; letter-spacing: .1em; color: var(--fog); }
.pdp__variants { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.pdp__field { display: flex; flex-direction: column; gap: .4rem; }
.pdp__field span { font-family: "IBM Plex Mono", monospace; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fog); }
.pdp__field select { background: var(--graphite); border: 1px solid var(--line); color: #F3F1EC; padding: .7rem .9rem; font-family: inherit; font-size: .9rem; border-radius: 2px; }
.pdp__row { display: flex; gap: .8rem; align-items: stretch; flex-wrap: wrap; }
.pdp__qty { display: flex; border: 1px solid var(--line); border-radius: 2px; overflow: hidden; }
.pdp__qty button { width: 44px; background: transparent; border: 0; color: var(--silver); font-size: 1.1rem; cursor: pointer; }
.pdp__qty button:hover { background: var(--slate); color: #fff; }
.pdp__qty input { width: 56px; background: transparent; border: 0; color: #F3F1EC; text-align: center; font-family: inherit; font-size: .95rem; -moz-appearance: textfield; }
.pdp__qty input::-webkit-outer-spin-button, .pdp__qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pdp__add { flex: 1; min-width: 200px; justify-content: center; }
.pdp__add[disabled] { opacity: .45; cursor: not-allowed; }
.pdp__specs { list-style: none; padding: 0; margin: 2.4rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.pdp__specs li { background: var(--ink); padding: 1rem .9rem; display: flex; flex-direction: column; gap: .25rem; }
.pdp__specs b { font-family: "Cormorant Garamond", serif; font-size: 1.35rem; color: var(--amber-2); font-weight: 500; line-height: 1; }
.pdp__specs span { font-family: "IBM Plex Mono", monospace; font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fog); }
/* Description: the copy uses h4 for "tasting notes" and bold run-in labels. */
.pdp__rte { margin-top: 2.4rem; color: var(--silver); }
.pdp__rte p { margin: 0 0 1rem; line-height: 1.85; }
.pdp__rte > p:first-child strong { font-family: "Cormorant Garamond", serif; font-size: 1.35rem; font-weight: 500; color: #F3F1EC; }
.pdp__rte h4 { font-family: "IBM Plex Mono", monospace; font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--amber); margin: 2rem 0 1rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.pdp__rte strong { color: var(--amber-2); font-weight: 600; }
.pdp__rte ul { list-style: none; padding: 0; margin: 1.4rem 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.pdp__rte li { border: 1px solid var(--line); border-radius: 2px; padding: .5rem .8rem; font-size: .85rem; }
.pdp__rte li strong { color: var(--fog); font-weight: 500; }
.pdp__warning { margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid var(--line); font-family: "IBM Plex Mono", monospace; font-size: .6rem; line-height: 1.9; letter-spacing: .06em; color: var(--fog); }
.pdp__more { margin-top: 6rem; padding-top: 3rem; border-top: 1px solid var(--line); }
.pdp__more .grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
/* ==========================================================================
Sticky header, category menu, prominent filters
========================================================================== */
/* The design sets position:sticky on header.top, but Shopify wraps every section in a
div, and a sticky element can never leave its parent's box. #shopify-section-header is
exactly as tall as the header, so it scrolled away with the page. Making the wrapper
the sticky element is what actually pins it. */
#shopify-section-header {
position: sticky;
top: 0;
z-index: 60;
}
header.top { position: static; }
/* Category menu -------------------------------------------------------------- */
.zk-cats { position: relative; }
/* Reads as one of the nav links, not a boxed control: same size, weight, letter
spacing and colour as the nav anchors. Only the caret marks it as a menu. */
.zk-cats__btn {
display: inline-flex; align-items: center; gap: .35rem;
background: transparent; border: 0; padding: 0;
font-family: inherit; font-size: .86rem; font-weight: 600; letter-spacing: .04em;
text-transform: none; color: var(--silver);
transition: color .2s;
}
.zk-cats__btn:hover, .zk-cats__btn[aria-expanded="true"] { color: #fff; }
.zk-cats__btn svg { width: 9px; height: 6px; opacity: .65; transition: transform .25s, opacity .2s; }
.zk-cats__btn:hover svg { opacity: 1; }
.zk-cats__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.zk-cats__menu {
position: absolute; top: calc(100% + .55rem); left: 0; z-index: 70;
min-width: 240px; padding: .4rem;
background: rgba(15, 15, 17, .97); backdrop-filter: blur(10px);
border: 1px solid var(--line); border-radius: 2px;
box-shadow: 0 24px 50px rgba(0, 0, 0, .55);
display: flex; flex-direction: column;
}
.zk-cats__menu a {
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
padding: .7rem .8rem; text-decoration: none; color: var(--silver);
font-size: .88rem; border-radius: 2px; transition: background .2s, color .2s;
}
.zk-cats__menu a:hover { background: var(--slate); color: #fff; }
.zk-cats__menu a i {
font-style: normal; font-family: "IBM Plex Mono", monospace; font-size: .62rem;
letter-spacing: .1em; color: var(--amber); border: 1px solid rgba(201, 150, 59, .35);
border-radius: 999px; padding: .1rem .45rem;
}
/* Give the categories real presence in the shop, rather than a row of quiet tabs. */
#shop .filters {
gap: .6rem; border-bottom: 0; margin-bottom: 2.6rem;
display: flex; flex-wrap: wrap;
}
#shop .filters button {
border: 1px solid var(--line-on-paper); border-radius: 999px;
padding: .7rem 1.3rem; margin-bottom: 0;
font-family: "IBM Plex Mono", monospace; font-size: .7rem; letter-spacing: .14em;
text-transform: uppercase; color: var(--muted-on-paper); background: transparent;
transition: background .22s, color .22s, border-color .22s, transform .22s;
}
#shop .filters button:hover { border-color: var(--ink-on-paper); color: var(--ink-on-paper); transform: translateY(-1px); }
#shop .filters button.on {
background: var(--ink-on-paper); border-color: var(--ink-on-paper); color: var(--paper);
}
/* Show the whole bottle: the tile was cropping the artwork at 88% of its height. */
.card .pic img { height: auto; width: auto; max-height: 100%; max-width: 100%; object-fit: contain; padding: 6% 8%; }
.card .pic { padding: 0; }
@media (max-width: 860px) {
.zk-cats { display: block; }
.zk-cats__menu { left: auto; right: 0; }
}
/* Eight legal links no longer fit on one line beside the logo and the socials, so they
wrap as their own block and the footer stacks instead of spreading. */
footer .wrap { align-items: flex-start; }
.foot-legal { display: flex; flex-wrap: wrap; gap: .35rem 1.4rem; max-width: 620px; }
.foot-legal a { margin-right: 0; }
.foot-legal a:hover { color: var(--amber-2); }
@media (max-width: 860px) { .foot-legal { max-width: none; } }
/* ==========================================================================
Inner pages
The homepage was rebuilt in the reference design's language, but the inner pages
were left on the old v5 vocabulary whose rules the merge dropped, so they rendered
as good as unstyled — raw selects, no rhythm, no page header. This is the shared
furniture they all use: page header, toolbar, sort, pager, rich text.
========================================================================== */
.zk-head {
padding: 7.5rem 0 3rem;
border-bottom: 1px solid var(--line);
background:
radial-gradient(120% 140% at 12% 0%, rgba(201, 150, 59, .10), transparent 55%),
var(--ink);
}
.zk-head__title {
font-family: "Cormorant Garamond", Georgia, serif;
font-size: clamp(2.4rem, 5.5vw, 4.4rem);
font-weight: 500; line-height: 1.03; color: #F3F1EC;
margin: .8rem 0 0; text-wrap: balance;
}
.zk-head__lead { margin-top: 1.1rem; max-width: 62ch; color: var(--silver); font-size: 1.02rem; line-height: 1.8; }
.zk-head__lead p { margin: 0 0 .8rem; }
.zk-head__meta {
margin: 1.4rem 0 0; font-family: "IBM Plex Mono", monospace;
font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--fog);
}
.zk-shop { padding: 3rem 0 6rem; }
/* Category strip on inner pages: same pills as the shop, on the dark ground. */
.zk-shop .filters { display: flex; flex-wrap: wrap; gap: .6rem; border-bottom: 0; margin-bottom: 2rem; }
.zk-shop .filters a,
.zk-shop .filters span {
border: 1px solid var(--line); border-radius: 999px; padding: .62rem 1.2rem;
font-family: "IBM Plex Mono", monospace; font-size: .68rem; letter-spacing: .14em;
text-transform: uppercase; color: var(--fog); text-decoration: none;
transition: color .2s, border-color .2s, background .2s;
}
.zk-shop .filters a:hover { color: #F3F1EC; border-color: var(--silver); }
.zk-shop .filters .on { background: var(--amber); border-color: var(--amber); color: var(--ink); }
/* Selects are the single worst offender when unstyled — the browser default box. */
.zk-sort { display: flex; align-items: center; gap: .7rem; margin: 0 0 2.2rem; }
.zk-sort label {
font-family: "IBM Plex Mono", monospace; font-size: .64rem;
letter-spacing: .14em; text-transform: uppercase; color: var(--fog);
}
.zk-sort select,
.zk-select {
-webkit-appearance: none; appearance: none;
background: var(--graphite) url("data:image/svg+xml;utf8,") no-repeat right .9rem center;
border: 1px solid var(--line); border-radius: 2px;
color: #F3F1EC; font-family: inherit; font-size: .86rem;
padding: .62rem 2.4rem .62rem .9rem; cursor: pointer;
transition: border-color .2s;
}
.zk-sort select:hover, .zk-select:hover { border-color: var(--fog); }
.zk-sort select:focus, .zk-select:focus { outline: none; border-color: var(--amber); }
/* Cards sit on the dark ground here, not on paper. */
.zk-shop .card,
.zk-article .card { background: var(--graphite); border-color: var(--line); }
.zk-shop .card .pic { background: linear-gradient(180deg, #17171A, #101012); }
.zk-shop .card .pic.photo { background: #fff; }
.zk-shop .card h3 { color: #F3F1EC; }
.zk-shop .card h3 a { color: inherit; text-decoration: none; }
.zk-shop .card .note { color: var(--fog); }
.zk-shop .card .fruit { color: var(--fog); }
.zk-shop .card .price { color: var(--amber-2); }
.zk-shop .card:hover { border-color: var(--amber); box-shadow: 0 24px 50px rgba(0, 0, 0, .45); }
.zk-shop .card:hover .body h3 { color: var(--amber-2); }
.zk-shop .card .add { background: transparent; border-color: var(--silver); color: #F3F1EC; }
.zk-shop .card:hover .add { background: var(--amber); border-color: var(--amber); color: var(--ink); }
.zk-pager { margin-top: 3.5rem; display: flex; justify-content: center; }
.zk-pager .pagination,
.zk-pager > span { display: flex; gap: .4rem; flex-wrap: wrap; }
.zk-pager a, .zk-pager span.page.current, .zk-pager .page {
display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 .6rem;
border: 1px solid var(--line); border-radius: 2px; text-decoration: none;
font-family: "IBM Plex Mono", monospace; font-size: .74rem; color: var(--silver);
}
.zk-pager a:hover { border-color: var(--amber); color: var(--amber-2); }
.zk-pager .current { background: var(--slate); color: #fff; border-color: var(--slate); }
.empty { color: var(--fog); font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 1.2rem; }
/* ==========================================================================
Legacy token bridge
The inner pages were written against the old v5 palette (--color-*, --font-*), which
the reference design does not define. 113 references were resolving to nothing, which
is why those pages rendered as flat black with browser-default controls. Mapping the
old names onto the reference palette fixes every one of them at once; new work should
use the reference names directly.
========================================================================== */
:root {
--color-bg: var(--ink);
--color-ink: var(--ink);
--color-graphite: var(--graphite);
--color-surface: var(--graphite);
--color-surface2: var(--slate);
--color-slate: var(--slate);
--color-line: var(--line);
--color-silver: var(--silver);
--color-fog: var(--fog);
--color-gold: var(--amber);
--color-gold-hi: var(--amber-2);
--color-gold-lo: #7A5416;
--color-cream: #F3F1EC;
--color-cream-dim: var(--silver);
--color-light-bg: var(--paper);
--color-paper: var(--paper);
--font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
--font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
--font-body: "Manrope", "Helvetica Neue", Arial, sans-serif;
--font-mono: "IBM Plex Mono", ui-monospace, monospace;
}
/* Long-form content: article bodies and CMS pages. */
.zk-rte { max-width: 68ch; color: var(--silver); font-size: 1.03rem; line-height: 1.85; }
.zk-rte > *:first-child { margin-top: 0; }
.zk-rte p { margin: 0 0 1.3rem; }
.zk-rte h2 { font-family: "Cormorant Garamond", serif; font-size: 2rem; font-weight: 500; color: #F3F1EC; margin: 2.6rem 0 1rem; }
.zk-rte h3 { font-family: "Cormorant Garamond", serif; font-size: 1.5rem; font-weight: 500; color: #F3F1EC; margin: 2rem 0 .8rem; }
.zk-rte h4 { font-family: "IBM Plex Mono", monospace; font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--amber); margin: 2rem 0 .9rem; }
.zk-rte a { color: var(--amber-2); text-decoration: none; border-bottom: 1px solid rgba(201, 150, 59, .4); }
.zk-rte a:hover { border-color: var(--amber-2); }
.zk-rte strong { color: #F3F1EC; }
.zk-rte ul, .zk-rte ol { padding-left: 1.2rem; margin: 0 0 1.3rem; }
.zk-rte li { margin-bottom: .5rem; }
.zk-rte blockquote {
margin: 2rem 0; padding-left: 1.3rem; border-left: 2px solid var(--amber);
font-family: "Cormorant Garamond", serif; font-size: 1.35rem; font-style: italic; color: #F3F1EC;
}
.zk-rte img { border-radius: 3px; margin: 1.6rem 0; }
.zk-rte hr { border: 0; border-top: 1px solid var(--line); margin: 2.6rem 0; }
/* padding-top/bottom only: this class sits on .wrap, which needs its side padding. */
.zk-body { padding-top: 3.5rem; padding-bottom: 6rem; }
/* Article ------------------------------------------------------------------- */
.zk-article__hero { max-width: 1180px; margin: 0 auto; padding: 0 1.5rem; }
.zk-article__hero img { width: 100%; height: auto; display: block; border-radius: 3px; margin-top: -2.5rem; box-shadow: 0 30px 70px rgba(0, 0, 0, .55); }
.zk-article__tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2.5rem; }
.zk-article__tags span {
border: 1px solid var(--line); border-radius: 999px; padding: .35rem .8rem;
font-family: "IBM Plex Mono", monospace; font-size: .62rem;
letter-spacing: .12em; text-transform: uppercase; color: var(--fog);
}
.zk-article__foot { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--line); }
/* ==========================================================================
Cart
========================================================================== */
/* The old container class lost its rules in the merge — max-width:none, padding:0 —
which is why any page still using it ran flush against the viewport edge. */
.section-inner { max-width: 1180px; margin: 0 auto; padding: 0 1.5rem; }
.zk-cart__grid { display: grid; grid-template-columns: 1.6fr .9fr; gap: 3.5rem; align-items: start; }
@media (max-width: 900px) { .zk-cart__grid { grid-template-columns: 1fr; gap: 2rem; } }
.zk-cart__row {
display: grid; grid-template-columns: 96px 1fr auto auto 28px;
gap: 1.4rem; align-items: center;
padding: 1.4rem 0; border-bottom: 1px solid var(--line);
}
.zk-cart__row:first-child { border-top: 1px solid var(--line); }
.zk-cart__pic {
width: 96px; aspect-ratio: 4/5; display: grid; place-items: center; overflow: hidden;
background: linear-gradient(180deg, #17171A, #101012);
border: 1px solid var(--line); border-radius: 2px;
}
.zk-cart__pic img { max-width: 82%; max-height: 86%; width: auto; height: auto; object-fit: contain; }
.zk-cart__pic svg { height: 78%; width: auto; }
.zk-cart__name {
font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.4rem; font-weight: 500;
color: #F3F1EC; text-decoration: none; display: block; line-height: 1.2;
}
.zk-cart__name:hover { color: var(--amber-2); }
.zk-cart__meta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: .4rem; }
.zk-cart__meta span {
font-family: "IBM Plex Mono", monospace; font-size: .6rem;
letter-spacing: .14em; text-transform: uppercase; color: var(--fog);
}
.zk-cart__unit { margin-top: .35rem; font-size: .8rem; color: var(--fog); }
.zk-cart__qty { display: flex; border: 1px solid var(--line); border-radius: 2px; overflow: hidden; }
.zk-cart__qty button { width: 34px; height: 38px; background: transparent; border: 0; color: var(--silver); cursor: pointer; font-size: 1rem; }
.zk-cart__qty button:hover { background: var(--slate); color: #fff; }
.zk-cart__qty input {
width: 48px; background: transparent; border: 0; color: #F3F1EC; text-align: center;
font-family: "Manrope", sans-serif; font-size: .9rem; -moz-appearance: textfield;
}
.zk-cart__qty input::-webkit-outer-spin-button,
.zk-cart__qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.zk-cart__line {
font-family: "Cormorant Garamond", serif; font-size: 1.5rem; color: var(--amber-2);
min-width: 110px; text-align: right;
}
.zk-cart__rm { color: var(--fog); text-decoration: none; font-size: .95rem; text-align: center; transition: color .2s; }
.zk-cart__rm:hover { color: var(--danger); }
/* The form is submitted by the steppers; the button stays for no-JS shoppers. */
.zk-cart__update { margin-top: 1.6rem; }
.zk-cart__box {
position: sticky; top: 92px;
background: var(--graphite); border: 1px solid var(--line); border-radius: 3px;
padding: 2rem 1.8rem;
}
.zk-cart__total { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.zk-cart__total span {
font-family: "IBM Plex Mono", monospace; font-size: .64rem;
letter-spacing: .18em; text-transform: uppercase; color: var(--fog);
}
.zk-cart__total b { font-family: "Cormorant Garamond", serif; font-size: 2.2rem; font-weight: 500; color: var(--amber-2); }
.zk-cart__note { margin: 1.2rem 0 0; font-size: .8rem; line-height: 1.7; color: var(--fog); }
.zk-cart__warn {
margin: 1.2rem 0 1.6rem; padding-top: 1rem; border-top: 1px solid var(--line);
font-family: "IBM Plex Mono", monospace; font-size: .58rem; line-height: 1.8;
letter-spacing: .06em; color: var(--fog);
}
.zk-cart__checkout { width: 100%; justify-content: center; }
.zk-cart__back {
display: block; text-align: center; margin-top: 1rem; text-decoration: none;
font-size: .82rem; color: var(--silver);
}
.zk-cart__back:hover { color: var(--amber-2); }
.zk-cart__empty { text-align: center; padding: 4rem 0 6rem; }
.zk-cart__empty p {
font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 1.4rem;
color: var(--silver); margin-bottom: 2rem;
}
@media (max-width: 640px) {
.zk-cart__row { grid-template-columns: 76px 1fr auto; grid-template-areas: "pic info rm" "pic qty line"; row-gap: .9rem; }
.zk-cart__pic { grid-area: pic; width: 76px; }
.zk-cart__info { grid-area: info; }
.zk-cart__qty { grid-area: qty; }
.zk-cart__line { grid-area: line; min-width: 0; }
.zk-cart__rm { grid-area: rm; }
}
/* ==========================================================================
Award winners — the featured category
Deliberately not another pill in the row: it gets its own band on the homepage,
between the medal strip that makes the claim and the range that explains it.
========================================================================== */
.zk-winners {
padding: 6rem 0;
background:
radial-gradient(90% 120% at 50% 0%, rgba(201, 150, 59, .13), transparent 60%),
var(--graphite);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.zk-winners__row {
display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.4rem;
}
.zk-winner {
display: flex; flex-direction: column;
background: rgba(11, 11, 12, .72); border: 1px solid var(--line); border-radius: 3px;
overflow: hidden; transition: transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s, box-shadow .3s;
}
.zk-winner:hover { transform: translateY(-6px); border-color: var(--amber); box-shadow: 0 26px 55px rgba(0, 0, 0, .5); }
.zk-winner__pic {
position: relative; aspect-ratio: 4/5; display: grid; place-items: center;
background: linear-gradient(180deg, #17171A, #0E0E10); overflow: hidden;
}
.zk-winner__pic img { max-height: 88%; max-width: 84%; width: auto; height: auto; object-fit: contain; }
.zk-winner__pic > svg { height: 82%; width: auto; }
.zk-winner__body { padding: 1.3rem 1.2rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
/* The medal and the competition it came from, read together. */
.zk-winner__ring { display: flex; align-items: center; gap: .6rem; margin-bottom: .8rem; }
.zk-winner__ring .zk-mini { position: static; width: 40px; height: 40px; flex: none; }
.zk-winner__ring span {
font-family: "IBM Plex Mono", monospace; font-size: .58rem; line-height: 1.4;
letter-spacing: .12em; text-transform: uppercase; color: var(--amber-2);
}
.zk-winner h3 { font-family: "Cormorant Garamond", serif; font-size: 1.4rem; font-weight: 500; line-height: 1.15; }
.zk-winner h3 a { color: #F3F1EC; text-decoration: none; }
.zk-winner:hover h3 a { color: var(--amber-2); }
.zk-winner__note { font-size: .84rem; line-height: 1.7; color: var(--fog); margin: .6rem 0 0; flex: 1; }
.zk-winner__foot { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-top: 1.2rem; }
.zk-winner__price { font-family: "Cormorant Garamond", serif; font-size: 1.5rem; color: var(--amber-2); }
.zk-winner__foot .btn { padding: .7rem 1rem; font-size: .6rem; }
.zk-winners__all { margin-top: 2.6rem; display: flex; justify-content: center; }
/* The featured category stands out among the filter pills. */
#shop .filters button[data-f="premiate"] { border-color: var(--amber); color: #7A5416; }
#shop .filters button[data-f="premiate"].on { background: var(--amber); border-color: var(--amber); color: var(--ink); }
/* ==========================================================================
Product artwork — never crop the bottle
The product shots are tall portraits (316x760, ratio 0.42) while the tiles are 4/5.
The tiles size themselves with aspect-ratio, so a percentage max-height on the image
has no definite height to resolve against and behaves as `none`: max-width capped the
width, height:auto made it 494px inside a 289px tile, and overflow:hidden cut 206px
off the bottom of every bottle.
Taking the image out of the flow gives it the tile's exact box, and object-fit:contain
then letterboxes it — the whole bottle is always visible, whatever its proportions.
The tiles are also 3/4 rather than 4/5, which suits a bottle and wastes less space.
========================================================================== */
.card .pic,
.zk-winner__pic,
.zk-cart__pic { position: relative; overflow: hidden; }
.card .pic { aspect-ratio: 3/4; }
.zk-winner__pic { aspect-ratio: 3/4; }
.card .pic > img,
.zk-winner__pic > img,
.pdp__stage > img,
.zk-cart__pic > img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: none;
max-height: none;
object-fit: contain;
padding: 7% 9%;
}
.card .pic > img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.card:hover .pic > img,
.card:focus-within .pic > img { transform: scale(1.05); }
.pdp__stage { position: relative; }
.pdp__stage > img { padding: 8% 10%; }
.zk-cart__pic > img { padding: 8%; }
/* The generic bottle SVG gets the same treatment so fallbacks line up with photos. */
.zk-winner__pic > svg,
.zk-cart__pic > svg {
position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%); height: 80%; width: auto;
}
/* ==========================================================================
Category colours
Each category carries the colour of what is in the bottle, so the row reads as a
palette rather than six identical pills. Set once here and used by the shop filters,
the header menu and the collection pages.
========================================================================== */
:root {
--cat-premiate: #C9963B; /* gold — the podium */
--cat-fructe: #D98E4A; /* apricot — orchard fruit */
--cat-struguri: #7B2D3B; /* burgundy — grape */
--cat-wild: #B5305C; /* raspberry — berries */
--cat-barrique: #8A5A2B; /* oak — cask */
--cat-albastru: #2FB3C9; /* the blue bottle */
}
#shop .filters button[data-f="premiate"],
.zk-shop .filters a[href*="premiate"] { --cat: var(--cat-premiate); }
#shop .filters button[data-f="fructe"],
.zk-shop .filters a[href*="/fructe"] { --cat: var(--cat-fructe); }
#shop .filters button[data-f="struguri"],
.zk-shop .filters a[href*="/struguri"] { --cat: var(--cat-struguri); }
#shop .filters button[data-f="wild"],
.zk-shop .filters a[href*="/wild"] { --cat: var(--cat-wild); }
#shop .filters button[data-f="barrique"],
.zk-shop .filters a[href*="/barrique"] { --cat: var(--cat-barrique); }
#shop .filters button[data-f="distilat-sticla-albastra"],
.zk-shop .filters a[href*="albastra"] { --cat: var(--cat-albastru); }
/* Shop sits on paper: the colour is the outline and the label, filled when active. */
#shop .filters button[data-f]:not([data-f="*"]) {
border-color: color-mix(in srgb, var(--cat, var(--line-on-paper)) 55%, transparent);
color: var(--cat, var(--muted-on-paper));
}
#shop .filters button[data-f]:not([data-f="*"]):hover {
border-color: var(--cat, var(--ink-on-paper));
background: color-mix(in srgb, var(--cat, #000) 8%, transparent);
}
#shop .filters button[data-f]:not([data-f="*"]).on {
background: var(--cat, var(--ink-on-paper));
border-color: var(--cat, var(--ink-on-paper));
color: #fff;
}
/* Gold and the blue are light enough that white text on them is hard to read. */
#shop .filters button[data-f="premiate"].on,
#shop .filters button[data-f="distilat-sticla-albastra"].on { color: var(--ink); }
/* Collection pages sit on the dark ground. */
.zk-shop .filters a[href],
.zk-shop .filters span.on { border-color: color-mix(in srgb, var(--cat, var(--line)) 60%, transparent); }
.zk-shop .filters a[href]:hover { color: #fff; border-color: var(--cat, var(--silver)); }
.zk-shop .filters span.on { background: var(--cat, var(--amber)); border-color: var(--cat, var(--amber)); color: var(--ink); }
/* A colour chip in the header menu. */
.zk-cats__menu a[data-cat] span::before {
content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 999px;
margin-right: .55rem; vertical-align: 1px; background: var(--cat, var(--fog));
}
.zk-cats__menu a[data-cat="premiate"] { --cat: var(--cat-premiate); }
.zk-cats__menu a[data-cat="fructe"] { --cat: var(--cat-fructe); }
.zk-cats__menu a[data-cat="struguri"] { --cat: var(--cat-struguri); }
.zk-cats__menu a[data-cat="wild"] { --cat: var(--cat-wild); }
.zk-cats__menu a[data-cat="barrique"] { --cat: var(--cat-barrique); }
.zk-cats__menu a[data-cat="distilat-sticla-albastra"] { --cat: var(--cat-albastru); }
/* The chosen package, named in the estimate panel. */
.estimate .pk {
display: block; font-family: "Cormorant Garamond", serif; font-size: 1.15rem;
color: #F3F1EC; margin: .3rem 0 .15rem;
}
/* ==========================================================================
Botond's timeline — boxed
The years and what happened in them were bare text in a five-column strip, so the
milestones ran together. Each one is its own card now, with the year as the marker.
========================================================================== */
#story .timeline {
border-top: 0; padding-top: 0; margin-top: 2.8rem;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .9rem;
}
#story .timeline > div {
position: relative;
background: rgba(21, 21, 23, .75);
border: 1px solid var(--line);
border-radius: 3px;
padding: 1.1rem 1rem 1.05rem;
transition: border-color .25s, transform .25s, background .25s;
}
#story .timeline > div::before {
content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%;
background: linear-gradient(90deg, var(--amber), transparent);
opacity: .55;
}
#story .timeline > div:hover {
border-color: var(--amber); transform: translateY(-3px); background: rgba(31, 31, 34, .85);
}
#story .timeline div b { font-size: 1.5rem; letter-spacing: .01em; }
#story .timeline div span { margin-top: .5rem; font-size: .76rem; line-height: 1.5; color: var(--silver); }
@media (max-width: 560px) { #story .timeline { grid-template-columns: repeat(2, 1fr); } }
/* Where am I: the active nav link and category. */
nav.main a.on,
.zk-cats__btn.on { color: var(--amber-2); }
nav.main a { position: relative; padding-bottom: 2px; }
nav.main a.on::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
background: var(--amber);
}
.zk-cats__menu a.on { background: var(--slate); color: #fff; }
.zk-cats__menu a.on i { border-color: var(--amber); color: var(--amber-2); }
/* ==========================================================================
Mobile
The design hides nav.main below 860px and put nothing in its place, so a phone had no
navigation at all. It also let four things spill past the viewport, giving the whole
page a sideways scroll: the medal watermark, the partner marquee track, the booking
form and the contact map.
========================================================================== */
/* Nothing may push the page sideways.
NOT overflow-x: hidden — that makes the element a scroll container, which moves the
scroll off the window and stops position:sticky working, so the header came unstuck on
mobile. overflow-x: clip crops the same way without creating a scroll container. */
html, body { overflow-x: clip; }
.medals { overflow: hidden; }
.marquee { overflow: hidden; }
.zk-burger { display: none; }
@media (max-width: 1000px) {
.zk-burger {
display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
width: 42px; height: 42px; padding: 0 9px;
background: transparent; border: 1px solid var(--line); border-radius: 2px;
cursor: pointer; order: -1; margin-right: .6rem;
}
.zk-burger span { display: block; height: 1.5px; background: var(--silver); transition: transform .25s, opacity .2s; }
.zk-burger.on span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.zk-burger.on span:nth-child(2) { opacity: 0; }
.zk-burger.on span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
header.top .wrap { gap: .5rem; }
header.top .social { display: none; }
header.top .lang { display: none; }
.brand svg { height: 38px; width: auto; }
}
.zk-mnav {
position: fixed; inset: 69px 0 0 0; z-index: 55;
background: rgba(11, 11, 12, .97); backdrop-filter: blur(12px);
overflow-y: auto; padding: 1.6rem 1.5rem 3rem;
}
.zk-mnav__label {
font-family: "IBM Plex Mono", monospace; font-size: .6rem; letter-spacing: .18em;
text-transform: uppercase; color: var(--fog); margin: 0 0 .7rem;
}
.zk-mnav__cats { display: grid; gap: .5rem; margin-bottom: 2rem; }
.zk-mnav__cats a {
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
padding: .95rem 1rem; text-decoration: none; color: #F3F1EC; font-size: 1rem;
border: 1px solid var(--line); border-left: 3px solid var(--cat, var(--line)); border-radius: 2px;
}
.zk-mnav__cats a i {
font-style: normal; font-family: "IBM Plex Mono", monospace; font-size: .62rem;
color: var(--fog);
}
.zk-mnav__cats a[data-cat="premiate"] { --cat: var(--cat-premiate); }
.zk-mnav__cats a[data-cat="fructe"] { --cat: var(--cat-fructe); }
.zk-mnav__cats a[data-cat="struguri"] { --cat: var(--cat-struguri); }
.zk-mnav__cats a[data-cat="wild"] { --cat: var(--cat-wild); }
.zk-mnav__cats a[data-cat="barrique"] { --cat: var(--cat-barrique); }
.zk-mnav__cats a[data-cat="distilat-sticla-albastra"] { --cat: var(--cat-albastru); }
.zk-mnav__links { display: grid; gap: .1rem; margin-bottom: 2rem; }
.zk-mnav__links a {
padding: .9rem 0; text-decoration: none; color: var(--silver);
font-family: "Cormorant Garamond", serif; font-size: 1.5rem;
border-bottom: 1px solid var(--line);
}
.zk-mnav__foot { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.zk-mnav__foot .lang { display: flex; }
.zk-mnav__foot .social { display: flex; }
/* --- layout that broke below 900px ------------------------------------------ */
@media (max-width: 900px) {
#taste .booking { grid-template-columns: 1fr; gap: 1.6rem; }
#taste .booking form,
#taste #bkForm { grid-template-columns: 1fr; width: 100%; max-width: 100%; }
#taste #bkForm label { width: 100%; }
#taste .intro { grid-template-columns: 1fr; }
#taste .packs { grid-template-columns: 1fr; }
#taste .addons { grid-template-columns: 1fr; }
#contact .wrap { grid-template-columns: 1fr; }
#contact .mapbox { width: 100%; }
.feature .wrap,
#story .wrap,
#distilat .wrap { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.zk-head { padding-top: 6rem; }
section { padding: 4rem 0; }
.grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; }
.card .body { padding: .8rem .8rem 1rem; }
.card h3 { font-size: 1.05rem; }
.card .note { display: none; }
.card .row { flex-direction: column; align-items: flex-start; gap: .5rem; }
.card .add { width: 100%; }
#shop .filters { gap: .4rem; }
#shop .filters button { padding: .55rem .9rem; font-size: .62rem; }
.zk-shop .filters a, .zk-shop .filters span { padding: .5rem .85rem; font-size: .6rem; }
.pdp__top { gap: 1.8rem; }
.zk-winners__row { grid-template-columns: 1fr 1fr; }
.zk-winner__note { display: none; }
footer .wrap { flex-direction: column; align-items: flex-start; gap: 1.2rem; }
}
/* Add-to-cart confirmation, and a cart button that reads as full. */
.card .add.done, .pdp__add.done { background: var(--ok, #4E8B57) !important; border-color: var(--ok, #4E8B57) !important; color: #fff !important; }
.cartbtn.has b { background: var(--amber); color: var(--ink); }
/* ==========================================================================
Product filters
========================================================================== */
.zk-filters { margin: 0 0 2rem; }
.zk-filters__row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-start; }
.zk-filter { position: relative; }
.zk-filter > summary {
list-style: none; cursor: pointer; user-select: none;
display: inline-flex; align-items: center; gap: .5rem;
border: 1px solid var(--line); border-radius: 999px; padding: .62rem 1.1rem;
font-family: "IBM Plex Mono", monospace; font-size: .66rem;
letter-spacing: .14em; text-transform: uppercase; color: var(--silver);
transition: border-color .2s, color .2s;
}
.zk-filter > summary::-webkit-details-marker { display: none; }
.zk-filter > summary::after {
content: ""; width: 7px; height: 7px; border-right: 1.4px solid currentColor;
border-bottom: 1.4px solid currentColor; transform: rotate(45deg) translate(-2px, -2px);
opacity: .6;
}
.zk-filter[open] > summary,
.zk-filter > summary:hover { border-color: var(--amber); color: var(--amber-2); }
.zk-filter[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.zk-filter > summary i {
font-style: normal; background: var(--amber); color: var(--ink);
border-radius: 999px; min-width: 16px; text-align: center; padding: 0 .3rem; font-size: .6rem;
}
.zk-filter__body {
position: absolute; z-index: 40; top: calc(100% + .5rem); left: 0; min-width: 230px;
background: rgba(15, 15, 17, .98); backdrop-filter: blur(10px);
border: 1px solid var(--line); border-radius: 3px; padding: .5rem;
box-shadow: 0 22px 46px rgba(0, 0, 0, .5);
}
.zk-filter__opt {
display: flex; align-items: center; gap: .6rem; padding: .55rem .6rem;
border-radius: 2px; cursor: pointer; font-size: .88rem; color: var(--silver);
}
.zk-filter__opt:hover { background: var(--slate); color: #fff; }
.zk-filter__opt input { accent-color: var(--amber); width: 15px; height: 15px; }
.zk-filter__opt span { flex: 1; }
.zk-filter__opt i { font-style: normal; font-family: "IBM Plex Mono", monospace; font-size: .62rem; color: var(--fog); }
.zk-filter__opt.is-off { opacity: .4; cursor: not-allowed; }
.zk-filter__price { display: flex; gap: .6rem; }
.zk-filter__price label { display: flex; flex-direction: column; gap: .3rem; }
.zk-filter__price span {
font-family: "IBM Plex Mono", monospace; font-size: .58rem;
letter-spacing: .12em; text-transform: uppercase; color: var(--fog);
}
.zk-filter__price input {
width: 104px; background: var(--graphite); border: 1px solid var(--line); border-radius: 2px;
color: #F3F1EC; padding: .55rem .6rem; font-family: inherit; font-size: .88rem;
}
.zk-filter__price input:focus { outline: none; border-color: var(--amber); }
.zk-filters__active { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .9rem; }
.zk-chip {
display: inline-flex; align-items: center; gap: .45rem; text-decoration: none;
border: 1px solid var(--amber); border-radius: 999px; padding: .35rem .75rem;
font-family: "IBM Plex Mono", monospace; font-size: .6rem;
letter-spacing: .1em; text-transform: uppercase; color: var(--amber-2);
}
.zk-chip span { opacity: .7; }
.zk-chip:hover { background: var(--amber); color: var(--ink); }
.zk-chip--clear { border-color: var(--line); color: var(--fog); }
.zk-chip--clear:hover { background: transparent; border-color: var(--silver); color: #fff; }
@media (max-width: 640px) {
.zk-filter__body { position: static; min-width: 0; box-shadow: none; margin-top: .4rem; }
.zk-filter { width: 100%; }
.zk-filter > summary { width: 100%; justify-content: space-between; }
}
/* ==========================================================================
Hover image swap, fine filters, product zoom
========================================================================== */
/* Second product shot crossfades in on hover where one exists. */
.card .pic > .pic-alt { opacity: 0; transition: opacity .45s ease; pointer-events: none; }
.card .pic.has-alt:hover > img:not(.pic-alt) { opacity: 0; }
.card .pic.has-alt:hover > .pic-alt { opacity: 1; }
.card .pic > img:not(.pic-alt) { transition: opacity .45s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
/* Second filter row on the homepage: price bands and an in-stock switch. */
#shop .filters--fine { margin-top: -1.4rem; margin-bottom: 2.4rem; align-items: center; gap: .45rem; }
#shop .filters__lbl {
font-family: "IBM Plex Mono", monospace; font-size: .6rem; letter-spacing: .16em;
text-transform: uppercase; color: var(--muted-on-paper); margin-right: .3rem;
}
#shop .filters--fine button { padding: .5rem .95rem; font-size: .62rem; border-color: var(--line-on-paper); color: var(--muted-on-paper); }
#shop .filters--fine button:hover { border-color: var(--ink-on-paper); color: var(--ink-on-paper); }
#shop .filters--fine button.on { background: var(--ink-on-paper); border-color: var(--ink-on-paper); color: var(--paper); }
#shop .filters__chk {
display: inline-flex; align-items: center; gap: .45rem; margin-left: .6rem; cursor: pointer;
font-family: "IBM Plex Mono", monospace; font-size: .62rem; letter-spacing: .12em;
text-transform: uppercase; color: var(--muted-on-paper);
}
#shop .filters__chk input { accent-color: var(--ink-on-paper); width: 14px; height: 14px; }
/* Product stage: hover magnifies under the cursor, click opens the lightbox. */
.pdp__stage { cursor: zoom-in; }
.pdp__stage > img { transition: transform .18s ease-out; will-change: transform; }
.zk-lightbox {
position: fixed; inset: 0; z-index: 200;
background: rgba(8, 8, 9, .94); backdrop-filter: blur(8px);
display: grid; place-items: center; padding: 3rem; cursor: zoom-out;
}
.zk-lightbox img {
max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
filter: drop-shadow(0 40px 80px rgba(0, 0, 0, .8));
}
.zk-lightbox__x {
position: absolute; top: 1.2rem; right: 1.2rem; width: 44px; height: 44px;
background: transparent; border: 1px solid var(--line); border-radius: 2px;
color: #F3F1EC; font-size: 1.1rem; cursor: pointer;
}
.zk-lightbox__x:hover { border-color: var(--amber); color: var(--amber-2); }
/* Medals are links to the podium category now; make that legible on hover. */
.badge-m { cursor: pointer; }
/* ==========================================================================
Cart on paper — the order summary reads like a receipt, not a cellar wall.
========================================================================== */
.zk-cart { background: var(--paper); color: var(--ink-on-paper); }
.zk-cart__row, .zk-cart__row:first-child { border-color: var(--line-on-paper); }
.zk-cart__pic { background: #fff; border-color: var(--line-on-paper); }
.zk-cart__name { color: var(--ink-on-paper); }
.zk-cart__name:hover { color: var(--amber); }
.zk-cart__meta span, .zk-cart__unit, .zk-cart__total span,
.zk-cart__note, .zk-cart__back, .zk-cart__rm { color: var(--muted-on-paper); }
.zk-cart__qty { border-color: var(--line-on-paper); background: #fff; }
.zk-cart__qty button { color: var(--ink-on-paper); }
.zk-cart__qty button:hover { background: var(--ink-on-paper); color: #fff; }
.zk-cart__qty input { color: var(--ink-on-paper); }
.zk-cart__line { color: var(--ink-on-paper); }
.zk-cart__box { background: #fff; border-color: var(--line-on-paper); box-shadow: 0 24px 60px rgba(23, 23, 26, .07); }
.zk-cart__total b { color: var(--ink-on-paper); }
.zk-cart__warn { border-color: var(--line-on-paper); color: var(--muted-on-paper); }
.zk-cart__back:hover { color: var(--amber); }
.zk-cart__empty p { color: var(--muted-on-paper); }
.zk-cart .btn:not(.primary) { border-color: var(--ink-on-paper); color: var(--ink-on-paper); }
.zk-cart .btn:not(.primary):hover { background: var(--ink-on-paper); color: #fff; }
/* Search page ------------------------------------------------------------- */
.zk-search {
display: flex; max-width: 560px; margin: 0 0 2.6rem;
border: 1px solid var(--line); border-radius: 2px; overflow: hidden; background: var(--graphite);
}
.zk-search input {
flex: 1; min-width: 0; background: transparent; border: 0; padding: .9rem 1.1rem;
color: #F3F1EC; font-family: "Manrope", sans-serif; font-size: .95rem;
}
.zk-search input::placeholder { color: var(--fog); }
.zk-search input:focus { outline: none; }
.zk-search button {
background: var(--amber); border: 0; color: var(--ink); padding: 0 1.4rem; cursor: pointer;
font-family: "IBM Plex Mono", monospace; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase;
}
.zk-search button:hover { background: var(--amber-2); }
.zk-result {
border: 1px solid var(--line); background: var(--graphite); border-radius: 4px;
padding: 1.6rem; display: flex; flex-direction: column; gap: .6rem;
}
.zk-result__type {
font-family: "IBM Plex Mono", monospace; font-size: .62rem; letter-spacing: .16em;
text-transform: uppercase; color: var(--amber);
}
.zk-result h3 { font-family: "Cormorant Garamond", serif; font-size: 1.5rem; font-weight: 500; margin: 0; }
.zk-result h3 a { color: #F3F1EC; text-decoration: none; }
.zk-result h3 a:hover { color: var(--amber-2); }
.zk-result p { margin: 0; color: var(--silver); font-size: .9rem; line-height: 1.7; flex: 1; }
.zk-result__link {
font-family: "IBM Plex Mono", monospace; font-size: .64rem; letter-spacing: .14em;
text-transform: uppercase; color: var(--amber); text-decoration: none;
}
.zk-empty { font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 1.3rem; color: var(--silver); }
/* Legal pages are Romanian by law; other languages get a one-line note. */
.zk-legal__note {
margin: 0 0 2rem; padding: .9rem 1.1rem; border: 1px solid var(--line);
border-left: 3px solid var(--amber); font-size: .85rem; color: var(--silver);
}
/* ==========================================================================
Shop link in the header: a faint amber frame with a slow breathing glow, so the
one link that sells stands out without shouting.
========================================================================== */
nav.main a.nav-shop {
padding: .38rem .85rem; margin: -.38rem 0;
border: 1px solid rgba(201, 150, 59, .45); border-radius: 999px;
color: var(--amber-2);
animation: zkShopPulse 3.2s ease-in-out infinite;
}
nav.main a.nav-shop:hover { border-color: var(--amber-2); color: #fff; animation-play-state: paused; box-shadow: 0 0 14px rgba(201, 150, 59, .35); }
nav.main a.nav-shop.on::after { display: none; }
nav.main a.nav-shop.on { border-color: var(--amber-2); }
@keyframes zkShopPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(201, 150, 59, 0); border-color: rgba(201, 150, 59, .35); }
50% { box-shadow: 0 0 12px 1px rgba(201, 150, 59, .28); border-color: rgba(228, 182, 90, .8); }
}
@media (prefers-reduced-motion: reduce) {
nav.main a.nav-shop { animation: none; border-color: rgba(201, 150, 59, .6); }
}
/* Mobile panel: same frame, no animation on a stacked list. */
.zk-mnav__links a.nav-shop {
display: inline-block; padding: .3rem .9rem;
border: 1px solid rgba(201, 150, 59, .55); border-radius: 999px; color: var(--amber-2);
}
/* Photographed award stickers (Quintessence 2026) used in place of the drawn medals. */
.badge-m .badge-m__photo { width: 132px; height: 132px; border-radius: 50%; display: block; transition: transform .5s cubic-bezier(.2,.7,.2,1), filter .5s; filter: drop-shadow(0 12px 18px rgba(0,0,0,.5)); }
.badge-m:hover .badge-m__photo { transform: translateY(-6px) rotate(-4deg) scale(1.05); filter: drop-shadow(0 22px 26px rgba(0,0,0,.6)); }
@media (max-width:600px) { .badge-m .badge-m__photo { width: 100px; height: 100px; } }
.zk-mini img, .zk-awards .badge-m img { width: 100%; height: 100%; border-radius: 50%; display: block; object-fit: cover; }
.zk-awards .badge-m img { width: 132px; height: 132px; }
/* ==========================================================================
Award badge in the top-right corner of the artwork, on cards and the product stage.
========================================================================== */
.zk-mini { top: .55rem; bottom: auto; }
.pdp__stage .zk-mini { top: 1rem; bottom: auto; }
.card:hover .zk-mini { transform: translateY(4px) rotate(6deg) scale(1.06); }
/* Product stage with a real photo: white ground, the photo fills the frame, no fake shadow. */
.pdp__stage.has-photo { background: #fff; border-color: var(--line-on-paper); }
.pdp__stage.has-photo::after { display: none; }
.pdp__stage.has-photo img { max-height: 100%; max-width: 100%; width: 100%; height: 100%; object-fit: contain; filter: none; }
.pdp__stage img { transition: transform .12s ease-out; }
.pdp__stage:hover img { transition: none; }
/* Sold-out products: greyed artwork, muted price, a small tag on the picture. */
.card--soldout .pic img { filter: grayscale(1) opacity(.45); }
.card--soldout .pic svg { opacity: .35; }
.card--soldout .price { color: var(--muted-on-paper); }
.card--soldout h3 a { color: var(--muted-on-paper); }
.card--soldout .add[disabled] { background: #E4E0D7; border-color: #E4E0D7; color: #8D877C; cursor: not-allowed; }
.card--soldout .zk-mini { filter: grayscale(.6) opacity(.7); }
.soldout-tag {
position: absolute; left: .7rem; top: .7rem; z-index: 2;
font-family: "IBM Plex Mono", monospace; font-size: .6rem; letter-spacing: .14em; text-transform: uppercase;
background: #4A4740; color: #F3F1EC; padding: .28rem .55rem; border-radius: 2px;
}
.card--soldout .badge { display: none; }
.card--soldout .pic.has-alt:hover > img:not(.pic-alt) { opacity: 1; }
.card--soldout .pic.has-alt:hover > .pic-alt { opacity: 0; }
/* Lightbox above everything (the header is sticky at 50, the grain overlay at 9998). */
.zk-lightbox { z-index: 10000; }
.zk-lightbox img { cursor: zoom-out; }
.zk-lightbox__x { z-index: 1; width: 52px; height: 52px; font-size: 1.4rem; }
/* Several stickers for one strip entry (the 2026 gold / silver / bronze set), fanned. */
.badge-m__stack { position: relative; display: block; width: 132px; height: 132px; }
.badge-m__stack .badge-m__photo { position: absolute; left: 0; top: 0; }
.badge-m__stack.n3 .badge-m__photo:nth-child(1) { z-index: 3; transform: translate(-26px, 0) scale(.86); }
.badge-m__stack.n3 .badge-m__photo:nth-child(2) { z-index: 2; transform: translate(4px, -14px) scale(.78); }
.badge-m__stack.n3 .badge-m__photo:nth-child(3) { z-index: 1; transform: translate(30px, 8px) scale(.72); }
.badge-m:hover .badge-m__stack.n3 .badge-m__photo:nth-child(1) { transform: translate(-34px, -4px) scale(.9) rotate(-6deg); }
.badge-m:hover .badge-m__stack.n3 .badge-m__photo:nth-child(2) { transform: translate(4px, -20px) scale(.82); }
.badge-m:hover .badge-m__stack.n3 .badge-m__photo:nth-child(3) { transform: translate(38px, 6px) scale(.76) rotate(6deg); }
@media (max-width:600px) { .badge-m__stack { width: 100px; height: 100px; } .badge-m__stack .badge-m__photo { width: 100px; height: 100px; } }
/* Contact: the wordmark leads, the legal company name sits under it, small and quiet. */
#contact .contact__logo { width: min(280px, 72%); color: #F3F1EC; margin: 0 0 2rem; }
#contact .contact__logo svg { width: 100%; height: auto; display: block; }
#contact .contact__firm {
margin: .9rem 0 1.1rem; font-family: "IBM Plex Mono", monospace; font-weight: 500;
font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--fog);
}
@media (max-width: 600px) { #contact .contact__logo { width: 200px; } }
/* Range tiers on photos: the picture shows through, text sits on a gradient. */
.tier::before { opacity: .62; filter: grayscale(0) contrast(1.05); }
.tier:hover::before { opacity: .9; filter: grayscale(0) contrast(1.05); }
.tier::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,11,12,.05) 0%, rgba(11,11,12,.35) 50%, rgba(11,11,12,.85) 100%); pointer-events: none; }
.tier > * { position: relative; z-index: 1; }
.tier p { color: var(--silver); }
/* Five tiers in one even row; six (with Distilat on) as two rows of three. */
.tiers { grid-template-columns: repeat(5, 1fr); }
.tiers:has(.tier:nth-child(6)) { grid-template-columns: repeat(3, 1fr); }
.tiers .tier { grid-column: auto; padding: 1.6rem 1.3rem; }
.tier h3 { font-size: 1.25rem; }
@media (max-width: 1000px) {
.tiers { grid-template-columns: repeat(2, 1fr); }
/* an odd last tile stretches across so no hole is left */
.tiers .tier:nth-child(odd):last-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
.tiers { grid-template-columns: 1fr; }
.tiers .tier:nth-child(odd):last-child { grid-column: auto; }
}
/* Whole tier card is the link; the price line keeps the old arrow styling. */
a.tier { text-decoration: none; color: inherit; cursor: pointer; }
.tier .more { margin-top: auto; font-family: "IBM Plex Mono", monospace; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; display: inline-flex; gap: .5rem; align-items: center; font-weight: 600; color: var(--amber-2); }
.tier .more::after { content: "→"; transition: transform .3s; }
.tier:hover .more::after { transform: translateX(5px); }
/* ==========================================================================
Legal pages — redesigned on the theme's own tokens (the old block referenced
--zk-* variables that no longer exist, which is why it rendered raw).
Layout: editorial head, then a sticky contents rail beside numbered chapters.
========================================================================== */
.zk-legal { background: var(--ink); padding: 7.5rem 1.5rem 7rem; }
.zk-legal__inner { max-width: 1180px; margin: 0 auto; }
.zk-legal__head { padding-bottom: 2.4rem; margin-bottom: 3rem; border-bottom: 1px solid var(--line); }
.zk-legal__eyebrow {
display: inline-flex; align-items: center; gap: .7rem; margin: 0 0 1rem;
font-family: "IBM Plex Mono", monospace; font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--amber);
}
.zk-legal__eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--amber); }
.zk-legal__title {
font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; font-size: clamp(2.4rem, 5vw, 4rem);
line-height: 1.05; color: #F3F1EC; margin: 0 0 1rem; text-wrap: balance;
}
.zk-legal__updated { margin: 0; font-size: .9rem; color: var(--fog); }
.zk-legal__updated strong { color: var(--silver); font-weight: 500; }
.zk-legal__note {
margin: 1.2rem 0 0; padding: .8rem 1rem; border: 1px solid var(--line); border-left: 3px solid var(--amber);
font-size: .84rem; color: var(--silver); max-width: 70ch;
}
.zk-legal__layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 4rem; align-items: start; }
.zk-legal__toc { position: sticky; top: 92px; }
.zk-legal__toc-label { font-family: "IBM Plex Mono", monospace; font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--fog); margin: 0 0 .9rem; }
.zk-legal__toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.zk-legal__toc li { margin: 0; }
.zk-legal__toc a {
display: flex; gap: .7rem; align-items: baseline; padding: .42rem 0 .42rem 1rem; margin-left: -1px;
border-left: 1px solid transparent; text-decoration: none; color: var(--silver); font-size: .84rem; line-height: 1.35;
transition: color .2s, border-color .2s;
}
.zk-legal__toc a span { font-family: "IBM Plex Mono", monospace; font-size: .6rem; color: var(--fog); flex: none; }
.zk-legal__toc a:hover, .zk-legal__toc a.on { color: #F3F1EC; border-left-color: var(--amber); }
.zk-legal__toc a.on span { color: var(--amber); }
.zk-legal__body { max-width: 74ch; }
.zk-legal h2 {
display: flex; align-items: baseline; gap: 1rem; scroll-margin-top: 100px;
font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; font-size: 1.8rem; color: #F3F1EC;
margin: 3.2rem 0 1.2rem; padding-top: 2rem; border-top: 1px solid var(--line);
}
.zk-legal h2:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.zk-legal h2 > span { font-family: "IBM Plex Mono", monospace; font-size: .66rem; letter-spacing: .16em; color: var(--amber); }
.zk-legal p, .zk-legal li { font-family: "Manrope", sans-serif; font-size: .95rem; line-height: 1.8; color: var(--silver); font-weight: 400; }
.zk-legal p { margin: 0 0 1rem; }
.zk-legal p > strong:first-child { color: #F3F1EC; font-weight: 600; }
.zk-legal strong { color: #F3F1EC; font-weight: 600; }
.zk-legal em { color: #F3F1EC; font-style: italic; }
.zk-legal ul { list-style: none; margin: 0 0 1.4rem; padding: 0; }
.zk-legal li { position: relative; padding-left: 1.4rem; margin-bottom: .5rem; }
.zk-legal li::before { content: ""; position: absolute; left: 0; top: .72em; width: 6px; height: 6px; background: var(--amber); transform: rotate(45deg); }
.zk-legal a { color: var(--amber-2); text-decoration: none; border-bottom: 1px solid rgba(228, 182, 90, .35); transition: border-color .2s, color .2s; }
.zk-legal a:hover { color: #fff; border-color: #fff; }
.zk-legal__firma {
margin: .4rem 0 1.6rem; padding: 1.4rem 1.6rem; background: var(--graphite); border: 1px solid var(--line); border-radius: 3px;
display: grid; gap: .35rem;
}
.zk-legal__firma p { margin: 0; display: grid; grid-template-columns: 150px 1fr; gap: 1rem; font-size: .9rem; }
.zk-legal__firma p > span { font-family: "IBM Plex Mono", monospace; font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fog); padding-top: .35em; }
.zk-legal__firma .zk-legal__firma-name { display: block; font-family: "Cormorant Garamond", serif; font-size: 1.5rem; color: #F3F1EC; margin-bottom: .6rem; padding-bottom: .6rem; border-bottom: 1px solid var(--line); }
.zk-legal__callout {
margin: 1.2rem 0 1.4rem; padding: 1.3rem 1.5rem 1.1rem; border-radius: 3px;
background: linear-gradient(135deg, rgba(201, 150, 59, .12), rgba(201, 150, 59, .03)); border: 1px solid rgba(201, 150, 59, .35);
}
.zk-legal__callout > strong { display: block; font-family: "Cormorant Garamond", serif; font-size: 1.25rem; font-weight: 600; color: var(--amber-2); margin-bottom: .5rem; }
.zk-legal__callout p { margin: 0; }
.zk-legal__anpc { margin: 1rem 0 1.4rem; padding: 1.3rem 1.5rem; background: var(--graphite); border: 1px solid var(--line); border-radius: 3px; }
.zk-legal__anpc p { margin-bottom: .8rem; }
.zk-legal__anpc ul { margin: 0; }
.zk-legal__anpc li strong { color: var(--amber-2); }
.zk-legal__contactline { margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line); font-family: "IBM Plex Mono", monospace; font-size: .66rem; letter-spacing: .08em; color: var(--fog); }
@media (max-width: 900px) {
.zk-legal { padding-top: 6rem; }
.zk-legal__layout { grid-template-columns: 1fr; gap: 2rem; }
.zk-legal__toc { position: static; }
.zk-legal__toc ol { border-left: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.zk-legal__toc a { padding: .4rem .7rem; border: 1px solid var(--line); border-radius: 999px; font-size: .74rem; margin: 0; }
.zk-legal__toc a.on { border-color: var(--amber); }
.zk-legal__toc-label { display: none; }
.zk-legal__firma p { grid-template-columns: 1fr; gap: .1rem; }
}
/* ANPC SAL / SOL pictograms in the footer, full row under everything else. */
footer .foot-badges { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; justify-content: center; padding-top: 1.4rem; margin-top: .4rem; border-top: 1px solid var(--line); }
footer .foot-badges a { margin: 0; line-height: 0; opacity: .92; transition: opacity .2s, transform .2s; }
footer .foot-badges a:hover { opacity: 1; transform: translateY(-1px); }
footer .foot-badges img { height: 50px; width: auto; display: block; border-radius: 26px; }
/* Partner strip: hand-scrollable (the JS drifts it slowly and loops it) + arrows. */
.pscroll { position: relative; }
.marquee { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; padding: 2px 0; }
.marquee::-webkit-scrollbar { display: none; }
.marquee .track { animation: none; }
.marquee .logo { flex: none; }
.pscroll__arr {
position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 46px; height: 46px;
border: 1px solid var(--line); border-radius: 50%; background: rgba(8, 8, 9, .82); backdrop-filter: blur(6px);
color: #F3F1EC; font-size: 1.1rem; cursor: pointer; transition: border-color .2s, color .2s, background .2s;
}
.pscroll__arr.prev { left: 1.2rem; }
.pscroll__arr.next { right: 1.2rem; }
.pscroll__arr:hover { border-color: var(--amber); color: var(--amber-2); background: var(--slate); }
.pactions { text-align: center; margin-top: 2.2rem; }
/* "All locations" list */
.pall {
position: fixed; inset: 0; z-index: 10000; background: rgba(8, 8, 9, .9); backdrop-filter: blur(8px);
display: grid; place-items: center; padding: 1.5rem;
}
.pall__box {
width: min(680px, 100%); max-height: min(86vh, 900px); display: flex; flex-direction: column;
background: var(--graphite); border: 1px solid var(--line); border-radius: 3px; box-shadow: 0 40px 80px rgba(0, 0, 0, .7);
}
.pall__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 1.6rem 1.8rem 1.2rem; border-bottom: 1px solid var(--line); }
.pall__head .eyebrow { margin-bottom: .4rem; }
.pall__head h3 { margin: 0; font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; font-size: 1.9rem; color: #F3F1EC; line-height: 1.05; }
.pall__x { flex: none; width: 44px; height: 44px; background: transparent; border: 1px solid var(--line); border-radius: 2px; color: #F3F1EC; font-size: 1.1rem; cursor: pointer; }
.pall__x:hover { border-color: var(--amber); color: var(--amber-2); }
.pall__list { list-style: none; margin: 0; padding: .4rem 0; overflow-y: auto; overscroll-behavior: contain; flex: 1 1 auto; }
.pall__list li { margin: 0; }
.pall__list a {
display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 1rem; padding: .9rem 1.8rem;
text-decoration: none; color: var(--silver); border-bottom: 1px solid var(--line); transition: background .2s, color .2s;
}
.pall__list li:last-child a { border-bottom: 0; }
.pall__list a:hover { background: var(--slate); color: #F3F1EC; }
.pall__list a.off { cursor: default; opacity: .55; }
.pall__list a.off:hover { background: transparent; }
.pall__ic { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.pall__ic svg { width: 22px; height: 22px; stroke: var(--amber-2); fill: none; stroke-width: 1.2; }
.pall__ic img { width: 100%; height: 100%; object-fit: cover; }
.pall__nm { display: flex; flex-direction: column; gap: .15rem; font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.25rem; color: #F3F1EC; line-height: 1.1; }
.pall__nm small { font-family: "IBM Plex Mono", monospace; font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--amber-2); }
.pall__go { font-family: "IBM Plex Mono", monospace; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fog); white-space: nowrap; }
.pall__go:not(:empty)::after { content: " ↗"; }
.pall__list a:hover .pall__go { color: var(--amber-2); }
.pall__hint { margin: 0; padding: 1rem 1.8rem 1.3rem; border-top: 1px solid var(--line); font-size: .8rem; color: var(--fog); }
@media (max-width: 640px) {
.pscroll__arr { width: 40px; height: 40px; }
.pscroll__arr.prev { left: .6rem; }
.pscroll__arr.next { right: .6rem; }
.pall { padding: .8rem; }
.pall__head { padding: 1.2rem 1.2rem 1rem; }
.pall__list a { padding: .8rem 1.2rem; grid-template-columns: 40px 1fr; }
.pall__go { display: none; }
.pall__hint { padding: .9rem 1.2rem 1.1rem; }
}
/* Medal strip: link to the official results list */
.medals-cta { display: flex; flex-direction: column; align-items: center; gap: .7rem; margin-top: 1.6rem; position: relative; z-index: 1; }
.medals-cta__btn { gap: .7rem; }
.medals-cta__btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.medals-cta__hint { margin: 0; font-size: .78rem; color: var(--fog); text-align: center; max-width: 60ch; transition: color .3s; }
.medals-cta__hint.is-copied { color: var(--amber-2); }
.medals-cta__hint kbd { font-family: "IBM Plex Mono", monospace; font-size: .72rem; padding: .1rem .4rem; border: 1px solid var(--line); border-radius: 3px; color: var(--silver); }
/* Barrique feature: the two bottle photos link to their product pages */
.feature .pics__link { position: relative; display: block; overflow: hidden; border-radius: 3px; text-decoration: none; }
.feature .pics__link img { transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.feature .pics__link:hover img { transform: scale(1.04); }
.feature .pics__cap {
position: absolute; inset: auto 0 0 0; padding: 2.4rem .9rem .8rem; display: flex; flex-direction: column; gap: .15rem;
background: linear-gradient(180deg, transparent, rgba(8, 8, 9, .85)); pointer-events: none;
opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s;
}
.feature .pics__link:hover .pics__cap, .feature .pics__link:focus-visible .pics__cap { opacity: 1; transform: none; }
.feature .pics__name { font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.15rem; color: #F3F1EC; line-height: 1.1; }
.feature .pics__price { font-family: "IBM Plex Mono", monospace; font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--amber-2); }
@media (hover: none) { .feature .pics__cap { opacity: 1; transform: none; } }
/* Lightbox: the grid row grew to the image's natural height, so max-height:100% never
constrained it and only the neck of the bottle was visible. Size the image to the box. */
.zk-lightbox { display: block; }
.zk-lightbox img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; }
/* Header: the desktop nav never wraps; between 1000 and 1240px it tightens instead, and
below 1000px the burger + mobile panel take over (was 860px, which left laptops with a
two-line menu). */
nav.main a { white-space: nowrap; }
@media (max-width: 1240px) {
nav.main { gap: 1.05rem; }
nav.main a { font-size: .78rem; letter-spacing: .02em; }
nav.main a.nav-shop { padding: .3rem .7rem; }
header.top .social { display: none; }
}
/* ==========================================================================
Botond's story — layout pass
Text and photos side by side (photos stick while you read), the quote as a proper
pull-quote, and the five milestones on one rail across the full width instead of a
two-column grid that left the last year orphaned.
========================================================================== */
#story .wrap { grid-template-columns: 1.05fr .95fr; gap: 4.5rem 4rem; }
#story .photos { position: sticky; top: 92px; gap: .9rem; }
#story .photos figure:first-child img { aspect-ratio: 16 / 10; }
#story .photos figure:not(:first-child) img { aspect-ratio: 4 / 3; }
#story .photos figcaption {
padding: 1.8rem .9rem .75rem; font-family: "IBM Plex Mono", monospace; font-size: .58rem;
letter-spacing: .1em; text-transform: uppercase; line-height: 1.55; color: #EDEBE6;
background: linear-gradient(transparent, rgba(8, 8, 9, .88));
}
#story blockquote {
position: relative; margin: 2.2rem 0 0; padding: 1.5rem 1.6rem 1.4rem 3.1rem;
border-left: 0; border: 1px solid var(--line); border-radius: 3px;
background: linear-gradient(135deg, rgba(201, 150, 59, .1), rgba(21, 21, 23, .5));
font-size: 1.3rem; line-height: 1.45;
}
#story blockquote::before {
content: "„"; position: absolute; left: 1rem; top: -.1rem;
font-family: "Cormorant Garamond", serif; font-size: 3.6rem; line-height: 1; color: var(--amber); font-style: normal;
}
#story .timeline {
grid-column: 1 / -1; position: relative; margin-top: 0;
grid-template-columns: repeat(5, 1fr); gap: 1.4rem;
}
#story .timeline::before {
content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 1px;
background: linear-gradient(90deg, var(--amber) 0%, var(--line) 70%, transparent);
}
#story .timeline > div { background: transparent; border: 0; border-radius: 0; padding: 1.7rem 0 0; }
#story .timeline > div::before {
width: 13px; height: 13px; top: 0; left: 0; border-radius: 50%; opacity: 1;
background: var(--ink); border: 2px solid var(--amber);
transition: background .25s, box-shadow .25s;
}
#story .timeline > div:hover { transform: none; background: transparent; border: 0; }
#story .timeline > div:hover::before { background: var(--amber); box-shadow: 0 0 0 5px rgba(201, 150, 59, .18); }
#story .timeline div b { font-size: 1.75rem; }
#story .timeline div span { max-width: 24ch; margin-top: .4rem; }
@media (max-width: 900px) {
#story .wrap { gap: 3rem; }
#story .photos { position: static; }
#story .timeline { grid-template-columns: 1fr; gap: 0; padding-left: 1.7rem; }
#story .timeline::before { left: 6px; right: auto; top: 4px; bottom: 0; width: 1px; height: auto; background: linear-gradient(180deg, var(--amber), var(--line)); }
#story .timeline > div { padding: 0 0 1.5rem; }
#story .timeline > div::before { left: -1.7rem; top: .45rem; }
#story .timeline > div:last-child { padding-bottom: 0; }
#story .timeline div span { max-width: none; }
}
@media (max-width: 560px) { #story .timeline { grid-template-columns: 1fr; } }
@media (max-width: 900px) { #story .wrap { grid-template-columns: 1fr; } #story blockquote { font-size: 1.15rem; padding: 1.2rem 1.2rem 1.1rem 2.6rem; } }
/* The milestones sit in their own row below the text/photo grid, so the sticky photo
column is bounded by that grid and can no longer slide over them. */
#story .wrap--timeline { margin-top: 4.5rem; }
@media (max-width: 900px) { #story .wrap--timeline { margin-top: 3rem; } }
/* FAQ accordion (metafield-driven) and collection SEO copy */
.zk-faq { margin: 2.6rem 0 0; }
.zk-faq__title { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; font-size: 1.6rem; color: #F3F1EC; margin: 0 0 .8rem; }
.zk-faq__item { border-top: 1px solid var(--line); }
.zk-faq__item:last-child { border-bottom: 1px solid var(--line); }
.zk-faq__item summary {
list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
padding: .95rem 0; font-family: "Manrope", sans-serif; font-weight: 600; font-size: .95rem; color: #F3F1EC;
}
.zk-faq__item summary::-webkit-details-marker { display: none; }
.zk-faq__item summary i { flex: none; width: 22px; height: 22px; position: relative; border: 1px solid var(--line); border-radius: 50%; transition: border-color .2s, transform .3s; }
.zk-faq__item summary i::before, .zk-faq__item summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1px; background: var(--amber-2); transform: translate(-50%, -50%); }
.zk-faq__item summary i::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .3s; }
.zk-faq__item[open] summary i { border-color: var(--amber); }
.zk-faq__item[open] summary i::after { transform: translate(-50%, -50%) rotate(0); }
.zk-faq__answer { padding: 0 2.4rem 1.1rem 0; font-size: .92rem; line-height: 1.75; color: var(--silver); max-width: 68ch; }
.zk-shop .zk-faq { max-width: 74ch; margin-top: 3.5rem; }
.zk-seotext { max-width: 74ch; margin: 3.5rem 0 0; padding-top: 2.4rem; border-top: 1px solid var(--line); color: var(--silver); font-size: .95rem; line-height: 1.8; }
.zk-seotext h2, .zk-seotext h3 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; color: #F3F1EC; margin: 1.6rem 0 .6rem; }
.zk-seotext h2 { font-size: 1.6rem; } .zk-seotext h3 { font-size: 1.25rem; }
.zk-seotext p { margin: 0 0 1rem; }
.zk-seotext a { color: var(--amber-2); }
.pdp__specs .pdp__spec--wide { grid-column: 1 / -1; }
/* Mobile hero: the slide bar used to float over the bottom of the text (absolute, with a
fixed 9rem reserve that the longer lead outgrew on phones). Below 860px it now sits in
the flow under the text, so nothing can be covered whatever the font or line count. */
@media (max-width: 860px) {
.hero .wrap { padding-bottom: 2.4rem; }
.slidebar { position: relative; z-index: 3; background: rgba(11, 11, 12, .55); }
.slidebar .wrap { padding-top: 1rem; padding-bottom: 1.1rem; row-gap: .9rem; }
}
/* Partner cards: real logos on tiles, with the name under them. */
.logo { width: 250px; height: auto; min-height: 150px; padding: 1rem .9rem .95rem; gap: .3rem; justify-content: center; }
.logo .pl { width: 64px; height: 64px; border-radius: 8px; margin-bottom: .3rem; object-fit: cover; }
.logo.has-pic .nm { font-size: 1.15rem; letter-spacing: .03em; }
.logo .nm { line-height: 1.15; }
.logo svg { width: 30px; height: 30px; margin-bottom: .1rem; }
.pall__ic { background: var(--graphite); }
@media (max-width: 640px) { .logo { width: 210px; } }
/* Several awards on one bottle: stacked under each other in the top-right corner. */
.zk-mini-stack { position: absolute; top: .55rem; right: .55rem; z-index: 2; display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; pointer-events: none; }
.zk-mini-stack .zk-mini { position: static; }
.pdp__stage .zk-mini-stack { top: 1rem; right: 1rem; gap: .5rem; }
.card:hover .zk-mini { transform: translateY(3px) scale(1.04); }
.zk-winner__ring .zk-mini-stack { position: static; flex-direction: row; }
/* Medal strip: two-sticker fan (2025 summary) and a second label line under each medal. */
.badge-m__stack.n2 .badge-m__photo:nth-child(1) { z-index: 2; transform: translate(-20px, 0) scale(.9); }
.badge-m__stack.n2 .badge-m__photo:nth-child(2) { z-index: 1; transform: translate(24px, 8px) scale(.78); }
.badge-m:hover .badge-m__stack.n2 .badge-m__photo:nth-child(1) { transform: translate(-26px, -4px) scale(.94) rotate(-5deg); }
.badge-m:hover .badge-m__stack.n2 .badge-m__photo:nth-child(2) { transform: translate(30px, 6px) scale(.82) rotate(5deg); }
.badge-m .l small { display: block; margin-top: .25rem; font-size: .56rem; letter-spacing: .12em; color: var(--amber-2); }
/* Medal strip: four-sticker fan (2025 summary: champion, gold, silver, bronze). */
.badge-m__stack.n4 .badge-m__photo:nth-child(1) { z-index: 4; transform: translate(-34px, 2px) scale(.8); }
.badge-m__stack.n4 .badge-m__photo:nth-child(2) { z-index: 3; transform: translate(-8px, -14px) scale(.74); }
.badge-m__stack.n4 .badge-m__photo:nth-child(3) { z-index: 2; transform: translate(18px, -4px) scale(.68); }
.badge-m__stack.n4 .badge-m__photo:nth-child(4) { z-index: 1; transform: translate(40px, 12px) scale(.62); }
.badge-m:hover .badge-m__stack.n4 .badge-m__photo:nth-child(1) { transform: translate(-42px, -2px) scale(.84) rotate(-6deg); }
.badge-m:hover .badge-m__stack.n4 .badge-m__photo:nth-child(2) { transform: translate(-10px, -20px) scale(.78) rotate(-2deg); }
.badge-m:hover .badge-m__stack.n4 .badge-m__photo:nth-child(3) { transform: translate(22px, -8px) scale(.72) rotate(3deg); }
.badge-m:hover .badge-m__stack.n4 .badge-m__photo:nth-child(4) { transform: translate(48px, 10px) scale(.66) rotate(7deg); }
/* Tasting package add-ons: toggle buttons on the card, checkboxes in the booking form. */
.pack__adds { display: grid; gap: .45rem; margin: .2rem 0 1.1rem; }
.pack__add {
display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left;
padding: .6rem .75rem; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); border-radius: 2px;
color: var(--silver); font-family: "Manrope", sans-serif; font-size: .82rem; cursor: pointer;
transition: border-color .2s, background .2s, color .2s;
}
.pack__add i { flex: none; width: 16px; height: 16px; border: 1px solid var(--fog); border-radius: 3px; position: relative; transition: background .2s, border-color .2s; }
.pack__add i::after { content: ""; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border: solid var(--ink); border-width: 0 2px 2px 0; transform: rotate(45deg); opacity: 0; }
.pack__add span { flex: 1 1 auto; }
.pack__add b { flex: none; font-family: "IBM Plex Mono", monospace; font-size: .62rem; letter-spacing: .08em; font-weight: 500; color: var(--amber-2); }
.pack__add:hover { border-color: var(--amber); color: #F3F1EC; }
.pack__add.on { border-color: var(--amber); background: rgba(201, 150, 59, .1); color: #F3F1EC; }
.pack__add.on i { background: var(--amber); border-color: var(--amber); }
.pack__add.on i::after { opacity: 1; }
.bk-adds { border: 1px solid var(--line); border-radius: 2px; padding: .8rem .9rem .7rem; margin: 0; grid-column: 1 / -1; display: grid; gap: .45rem; }
.bk-adds legend { font-family: "IBM Plex Mono", monospace; font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--fog); padding: 0 .4rem; }
.bk-adds__opt { display: flex !important; align-items: center; gap: .6rem; width: auto !important; cursor: pointer; font-size: .88rem; color: var(--silver); }
.bk-adds__opt input { accent-color: var(--amber); width: 16px; height: 16px; margin: 0; }
.bk-adds__opt span { flex: 1 1 auto; }
.bk-adds__opt em { font-style: normal; font-family: "IBM Plex Mono", monospace; font-size: .62rem; letter-spacing: .08em; color: var(--amber-2); }
.bk-adds small { color: var(--fog); font-size: .74rem; }
.bk-adds[hidden] { display: none; }
.pack__add.is-incl { cursor: default; border-style: dashed; color: var(--silver); }
.pack__add.is-incl i { background: var(--amber); border-color: var(--amber); opacity: .75; }
.pack__add.is-incl i::after { opacity: 1; }
.pack__add.is-incl:hover { border-color: var(--line); color: var(--silver); }
/* Cart: order note for invoicing details (company, CUI) */
.zk-cart__notefield { display: block; margin: 1rem 0 0; }
.zk-cart__notefield span { display: block; font-family: "IBM Plex Mono", monospace; font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-on-paper); margin-bottom: .4rem; }
.zk-cart__notefield textarea { width: 100%; padding: .7rem .8rem; border: 1px solid var(--line-on-paper); border-radius: 2px; background: #fff; color: var(--ink-on-paper); font: inherit; font-size: .88rem; resize: vertical; }
.zk-cart__notefield textarea:focus { outline: none; border-color: var(--amber); }
.booking textarea{resize:vertical;min-height:2.6rem}
.bk-adds__opt.is-locked{cursor:default}
.bk-adds__opt.is-locked input{cursor:not-allowed;accent-color:var(--amber-2)}
.bk-adds__opt.is-locked em{color:var(--fog)}
#bkForm button[disabled]{opacity:.6;cursor:wait}
.modal[hidden]{display:none}
#bkModal .box p strong{color:var(--ink-on-paper);font-weight:600}
/* Spec grid: cells draw their own separators, so a row that is not fully filled leaves plain background instead of a grey block. */
.pdp__specs { gap: 0; background: var(--ink); }
.pdp__specs li { box-shadow: inset -1px -1px 0 0 var(--line); }
/* Shop menu: the item is a link, the category list opens on hover/focus (JS adds .open). */
.zk-cats__menu { display: none; }
.zk-cats:hover > .zk-cats__menu, .zk-cats.open > .zk-cats__menu { display: flex; }
.zk-cats__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -.7rem; height: .7rem; }
nav.main a.zk-cats__btn { text-decoration: none; }
nav.main a.zk-cats__btn svg { margin-left: .1rem; }
.zk-mnav__cats { margin: .4rem 0 1rem 1rem; }
/* Inner-page header: compact, so the filters and products start within the first screen. */
.zk-head { padding: 3.2rem 0 1.8rem; }
.zk-head__title { font-size: clamp(2rem, 3.8vw, 3.1rem); margin-top: .5rem; }
.zk-head__lead { margin-top: .7rem; font-size: .96rem; line-height: 1.65; }
.zk-head__meta { margin-top: .9rem; }
@media (max-width: 640px) { .zk-head { padding-top: 2.4rem; } }
/* Homepage grid sort control, on the fine-filter row. */
.filters__sort { display: inline-flex; align-items: center; gap: .6rem; margin-left: auto; }
.filters__sort select { background: var(--ink); border: 1px solid var(--line); color: #F3F1EC; padding: .45rem 2rem .45rem .8rem; font-family: "Manrope", sans-serif; font-size: .82rem; border-radius: 999px; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right .7rem center; background-size: 10px 7px; }
.filters__sort select:focus { outline: 1px solid var(--amber); border-color: var(--amber); }
@media (max-width: 640px) { .filters__sort { margin-left: 0; width: 100%; } }
/* Booking box: anchors and the "next" buttons land with the box's top edge in view. */
#booking { scroll-margin-top: 28px; }
/* Product page: spec grid above the buy row, SKU as a quiet line under it. */
.pdp__specs { margin: 1.5rem 0 1.5rem; }
.pdp__sku { margin: .9rem 0 0; font-family: "IBM Plex Mono", monospace; font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fog); }
/* Hero copy swaps with the slide. */
.hero .wrap > div { transition: opacity .26s ease; }
.hero .wrap > div.swap { opacity: 0; }
/* Price per litre (H.G. 947/2000): quiet mono line beside every price. */
.unitp { display: block; font-family: "IBM Plex Mono", monospace; font-size: .6rem; letter-spacing: .08em; color: var(--fog); font-weight: 400; margin-top: .15rem; white-space: nowrap; }
.pdp__price .unitp { display: inline-block; margin-left: .6rem; font-size: .66rem; vertical-align: baseline; }
.zk-cart__unit .unitp, .pics__price .unitp, .zk-winner__price .unitp { display: inline; margin: 0; }
/* Producer row on the product page: name in the value font, address as a quiet second line. */
.pdp__spec--producer b { font-size: 1.1rem; }
.pdp__spec--producer b small { display: block; margin-top: .35rem; font-family: "Manrope", sans-serif; font-size: .74rem; color: var(--fog); line-height: 1.4; }
/* Booking box: who runs the tasting room. */
.booking .bk-operator { margin-top: 1rem; font-size: .76rem; line-height: 1.5; color: var(--fog); }
.booking .bk-operator strong { color: var(--silver); font-weight: 600; }
/* Related products under the product page: white cards on the dark page, so the title
and price need the on-paper ink instead of the page's light text colour. */
.pdp__more .card h3, .pdp__more .card h3 a { color: var(--ink-on-paper); text-decoration: none; }
.pdp__more .card h3 a:hover { color: var(--amber); }
.pdp__more .card .price { color: var(--ink-on-paper); }
.pdp__more .card .price .unitp { color: var(--muted-on-paper); }
/* Hero H1 = keyword kicker + slogan. The kicker keeps the eyebrow look; the slogan keeps the old H1 size and width. */
.hero h1.hero__h1 { max-width: none; }
.hero h1 .hero__kicker { margin-bottom: .8rem; font-weight: 400; line-height: 1.4; animation: none; }
.hero h1 .hero__t { display: block; max-width: 14ch; }
@media (max-width: 860px) { .hero h1 .hero__t { max-width: none; } }
/* No shadow behind the medal badges anywhere (owner, 2026-10). The sold-out greyscale filter below still applies. */
.zk-mini { filter: none; }
.badge-m svg, .badge-m:hover svg, .badge-m .badge-m__photo, .badge-m:hover .badge-m__photo { filter: none; }
.card--soldout .zk-mini { filter: grayscale(.6) opacity(.7); }