/*
Theme Name: Afrosource Shop
Theme URI: https://afrosource.be
Description: Beer crate shop for Afrosource: crate catalogue with instant filters and live search, a homepage slider, price on request, French, Dutch and English interface, and a crate drawer that records the order in WooCommerce and sends it on WhatsApp. Standalone theme, needs WooCommerce.
Author: Afrosource
Version: 1.11.0
Requires at least: 6.4
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: afrosource-shop
*/

:root{
  --gold:#E8AE1E;        /* header and footer band, the colour of a blond beer */
  --gold-deep:#CE9411;   /* info strip, band hover */
  --amber:#F7BE35;       /* buttons and accents */
  --amber-deep:#A9720A;  /* accent text on pale surfaces */
  --kraft:#FBE7AE;       /* hero and page headers, beer foam gold */
  --kraft-soft:#FDF3D6;  /* feature bands */
  --paper:#FFFCF2;       /* page background */
  --card:#FFFFFF;
  --malt:#4A2F14;        /* dark roast brown: the few anchor blocks and dark buttons */
  --malt-2:#5E3D1C;
  --ink:#3B2612;         /* text */
  --ink-soft:#7A5B33;
  --line:#EBD5A3;
  --line-soft:#F5E9CA;
  --red:#C8312B;
  --hop:#3E7A2B;
  --order:#2F5D80;
  --wa:#11804A;
  --foam:#FFF7E2;        /* text on the dark brown blocks */

  --f-display:'Big Shoulders','Big Shoulders Display','Oswald','Arial Narrow',Impact,sans-serif;
  --f-stencil:'Big Shoulders Stencil Display','Big Shoulders','Arial Narrow',Impact,sans-serif;
  --f-text:'Newsreader',Georgia,'Times New Roman',serif;
  --f-mono:'Martian Mono',ui-monospace,'Cascadia Mono',Consolas,monospace;

  --gutter:clamp(16px,4vw,48px);
  --maxw:1320px;
  --r-card:14px;
  --shadow-lift:0 1px 0 rgba(42,26,16,.06),0 18px 36px -18px rgba(42,26,16,.35);
  color-scheme:light;
}

/* ---------- language visibility (all three languages are in the HTML) ---------- */
html[data-lang="fr"] [data-l]:not([data-l="fr"]),
html[data-lang="nl"] [data-l]:not([data-l="nl"]),
html[data-lang="en"] [data-l]:not([data-l="en"]),
html:not([data-lang]) [data-l]:not([data-l="fr"]){display:none!important}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-text);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px;border-radius:4px}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip:focus{position:fixed;left:16px;top:16px;width:auto;height:auto;clip:auto;z-index:200;background:var(--amber);color:var(--malt);padding:10px 14px;border-radius:6px}
main{display:block;outline:none}

.display{font-family:var(--f-display);font-weight:900;text-transform:uppercase;letter-spacing:.005em;line-height:.9;text-wrap:balance;margin:0}
.label{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:600}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.tnum{font-variant-numeric:tabular-nums}

/* ---------- header ---------- */
.strip{background:var(--gold-deep);color:var(--ink);font-family:var(--f-mono);font-size:11px;letter-spacing:.04em}
.strip .wrap{display:flex;gap:12px 24px;align-items:center;justify-content:space-between;min-height:36px;flex-wrap:wrap;padding-block:6px}
.strip a{color:var(--ink);text-decoration:none}
.strip a:hover{color:var(--malt);text-decoration:underline}
.strip-info{display:flex;gap:6px 20px;flex-wrap:wrap}
.strip-links{display:flex;gap:18px;margin-left:auto;margin-right:18px}
@media (max-width:1600px){.strip-info .strip-street{display:none}}
/* The brand line already says "wholesaler": below 1500 px the strip keeps the minimum and WhatsApp on one row. */
@media (max-width:1500px){.strip-info>span:first-child{display:none}}
.strip-links a{font-weight:600;text-transform:uppercase;letter-spacing:.08em}
@media (min-width:901px){.nav .nav-secondary{display:none}}
@media (max-width:900px){.strip-links{display:none}}
.lang{display:inline-flex;border:1px solid rgba(59,38,18,.35);border-radius:999px;padding:2px}
.lang button{background:none;border:0;color:rgba(59,38,18,.7);font-family:var(--f-mono);font-size:11px;font-weight:600;letter-spacing:.08em;padding:4px 10px;border-radius:999px;cursor:pointer}
html[data-lang="fr"] .lang [data-set-lang="fr"],
html[data-lang="nl"] .lang [data-set-lang="nl"],
html[data-lang="en"] .lang [data-set-lang="en"]{background:var(--ink);color:var(--amber)}

.band{background:var(--gold);color:var(--ink);position:sticky;top:0;z-index:40;box-shadow:0 1px 0 rgba(59,38,18,.18)}
.admin-bar .band{top:32px}
.band .wrap{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px 28px;min-height:84px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.brand .capmark{width:44px;height:44px;flex:none}
.brand-word{font-family:var(--f-display);font-weight:900;font-size:34px;line-height:.8;letter-spacing:.01em;text-transform:uppercase}
.brand-word b{color:#7A2E12;font-weight:900}
.brand-sub{display:block;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;color:rgba(59,38,18,.72);margin-top:5px;text-transform:uppercase}
.nav{display:flex;gap:4px 22px;align-items:center;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{font-family:var(--f-display);font-weight:800;font-size:21px;text-transform:uppercase;letter-spacing:.02em;text-decoration:none;white-space:nowrap;padding-block:6px;border-bottom:3px solid transparent;color:var(--ink)}
.nav a:hover{color:var(--malt);border-color:rgba(59,38,18,.3)}
.nav a[aria-current="page"]{border-color:var(--ink);color:var(--ink)}
.nav .nav-soon{display:inline-flex;align-items:center;gap:10px;color:rgba(59,38,18,.6);cursor:default;font-family:var(--f-display);font-weight:800;font-size:16px;text-transform:uppercase;white-space:nowrap}
.nav .nav-soon em{font-style:normal;font-family:var(--f-mono);font-size:9px;font-weight:600;letter-spacing:.1em;color:rgba(59,38,18,.7);border:1px solid rgba(59,38,18,.35);border-radius:999px;padding:3px 8px}
.band-tools{display:flex;gap:12px;align-items:center}
.search{position:relative;margin:0}
.search input[type=search]{width:200px;background:#FFFDF6;border:1px solid rgba(59,38,18,.18);border-radius:6px;padding:10px 12px 10px 36px;font-family:var(--f-text);font-size:15px;color:var(--ink)}
.search input::placeholder{color:#9B8055}
.search>svg{position:absolute;left:11px;top:50%;translate:0 -50%;width:16px;height:16px;fill:none;stroke:var(--ink-soft);stroke-width:2}
.cart-btn{position:relative;display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:var(--amber);border:0;border-radius:6px;padding:9px 16px 9px 12px;font-family:var(--f-display);font-weight:900;font-size:20px;text-transform:uppercase;cursor:pointer;letter-spacing:.02em}
.cart-btn:hover{background:var(--malt)}
.cart-btn svg{width:22px;height:22px}
.cart-count{min-width:24px;height:24px;border-radius:999px;background:var(--amber);color:var(--ink);font-family:var(--f-mono);font-size:12px;font-weight:600;display:inline-grid;place-items:center;padding-inline:6px}
.cart-btn.bump{animation:bump .45s ease}
@keyframes bump{30%{transform:scale(1.08) rotate(-2deg)}60%{transform:scale(.97)}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:6px;padding:13px 22px;font-family:var(--f-display);font-weight:900;font-size:21px;line-height:1;text-transform:uppercase;letter-spacing:.03em;text-decoration:none;cursor:pointer;transition:background .15s,transform .15s}
.btn-amber{background:var(--amber);color:var(--ink)}
.btn-amber:hover{background:#FFCB4F}
.btn-malt{background:var(--malt);color:var(--foam)}
.btn-malt:hover{color:var(--amber)}
.btn-malt:hover{background:var(--malt-2)}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--foam)}
.btn-wa{background:var(--wa);color:#fff;font-size:22px;padding:15px 22px}
.btn-wa:hover{background:#0C6B3D;color:#fff}
.btn-wa svg{width:24px;height:24px;fill:currentColor}
.btn:disabled{opacity:.45;cursor:not-allowed}
.link{font-family:var(--f-display);font-weight:800;font-size:19px;text-transform:uppercase;letter-spacing:.03em;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--amber);padding-bottom:2px}
.link:hover{color:var(--amber-deep)}

.stepper{display:inline-grid;grid-template-columns:40px 48px 40px;height:48px;border:2px solid var(--ink);border-radius:6px;overflow:hidden;background:var(--card)}
.stepper button{border:0;background:transparent;font-family:var(--f-display);font-size:26px;font-weight:800;cursor:pointer;line-height:1}
.stepper button:hover{background:var(--kraft-soft)}
.stepper input{border:0;border-inline:1px solid var(--line);text-align:center;font-family:var(--f-mono);font-size:15px;font-weight:600;width:100%;-moz-appearance:textfield;background:transparent;padding:0}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.stepper.sm{grid-template-columns:30px 36px 30px;height:34px;border-width:1.5px}
.stepper.sm button{font-size:20px}
.stepper.sm input{font-size:13px}

.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.chip::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.chip-stock{color:var(--hop)}
.chip-order{color:var(--order)}
.style-dot{display:inline-flex;align-items:center;gap:7px}
.style-dot i{width:10px;height:10px;border-radius:2px;background:var(--c);flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}

/* ---------- product visuals ---------- */
.crate-slot{display:block;width:100%}
.crate-slot:empty{aspect-ratio:4/3}
.crate-slot svg{display:block;width:100%;height:auto}
.packshot{display:block;width:100%;height:auto;object-fit:contain}
.no-photo{display:grid;place-items:center;width:100%;aspect-ratio:4/3;background:var(--kraft-soft);border-radius:12px;box-shadow:inset 0 0 0 1px var(--line)}
.no-photo .capmark{width:34%;height:auto;opacity:.55}

/* ---------- hero ---------- */
.hero{background:var(--kraft);position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
/* Clip the tilted crate sideways only, so the search suggestions can hang below the hero. */
@supports (overflow:clip){.hero{overflow:visible;overflow-x:clip}}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:10px;background:repeating-linear-gradient(90deg,var(--malt) 0 26px,transparent 26px 34px);opacity:.14}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:30px;padding-block:44px 60px}
.hero-copy{display:grid;gap:22px;align-content:start}
.hero-eyebrow{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.stamp{font-family:var(--f-stencil);font-weight:800;font-size:22px;line-height:1;letter-spacing:.04em;color:var(--red);border:3px solid var(--red);border-radius:4px;padding:5px 10px 4px;transform:rotate(-3deg);display:inline-block;text-transform:uppercase}
.hero h1{font-size:clamp(52px,8vw,124px);line-height:.8;letter-spacing:-.005em}
.hero h1>span{display:block}
.hero h1 .fmt{font-family:var(--f-stencil);font-weight:800;color:var(--malt);opacity:.9;font-size:.52em;line-height:1;margin-top:.18em;letter-spacing:.02em}
.hero-lede{font-size:19px;max-width:44ch;margin:0;color:#5C4322}
.pricebox{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:end}
.bigprice{font-family:var(--f-display);font-weight:900;font-size:clamp(56px,6vw,84px);line-height:.8;letter-spacing:-.01em}
.price-meta{display:grid;gap:4px;padding-bottom:4px}
.price-meta .mono{font-size:12px;color:var(--ink-soft)}
.buyrow{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:0}
.hero-art{position:relative;display:grid;place-items:center;min-height:360px}
.hero-art .crate-slot,.hero-art .packshot{width:min(560px,100%);transform:rotate(-7deg);filter:drop-shadow(0 34px 28px rgba(42,26,16,.35));transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.hero-art:hover .crate-slot,.hero-art:hover .packshot{transform:rotate(-4deg) translateY(-6px)}
.hero-art .tag{position:absolute;right:4%;bottom:6%;background:var(--malt);color:var(--foam);padding:10px 14px;border-radius:4px;transform:rotate(4deg);font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;line-height:1.6;text-transform:uppercase}
.hero-art .tag b{color:var(--amber);font-weight:600}

/* ---------- hero slider: stacked slides that cross-fade ---------- */
.slider{position:relative}
.slides{display:grid;touch-action:pan-y}
.slide{grid-area:1/1;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:24px 48px;align-items:start;transition:opacity .6s ease,visibility 0s linear 0s}
.slide:not(.is-active){opacity:0;visibility:hidden;transition:opacity .6s ease,visibility 0s linear .6s}
/* Top-aligned, and the photo column has a fixed height: a late web font reflows the text but never moves the slide. */
.slide .hero-art{min-height:520px;align-self:start}
.slide .hero-copy{transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.slide:not(.is-active) .hero-copy{transform:translateY(14px)}
.slide .hero-art{transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.slide:not(.is-active) .hero-art{transform:translateX(36px)}
.slide h2.display{font-size:clamp(52px,8vw,124px);line-height:.8;letter-spacing:-.005em}
.slide h2.display>span{display:block}
.slide h2 .fmt{font-family:var(--f-stencil);font-weight:800;color:var(--malt);opacity:.9;font-size:.52em;line-height:1;margin-top:.18em;letter-spacing:.02em}
.slide .hero-lede{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.slider-nav{display:flex;align-items:center;gap:10px;margin-top:26px}
/* Space is kept while the script starts, so nothing below jumps when the controls appear. */
.slider-nav.is-off{visibility:hidden}
.slider-btn{flex:none;display:inline-grid;place-items:center;width:42px;height:42px;padding:0;border-radius:50%;border:2px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer}
.slider-btn:hover{background:var(--ink);color:var(--amber)}
.slider-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.slider-dots{display:flex;align-items:center}
.slider-dots button{display:grid;place-items:center;width:30px;height:42px;padding:0;border:0;background:none;cursor:pointer}
.slider-dots span{display:block;width:10px;height:10px;border-radius:999px;background:rgba(59,38,18,.28);transition:width .3s,background .3s}
.slider-dots button:hover span{background:rgba(59,38,18,.55)}
.slider-dots [aria-current] span{width:26px;background:var(--ink)}
.slider-pause{margin-left:auto;width:36px;height:36px;border-width:1.5px}
.slider-pause span{display:block;width:10px;height:12px;border-inline:3px solid currentColor}
.slider.is-paused .slider-pause span{width:0;height:0;border-style:solid;border-width:7px 0 7px 11px;border-color:transparent transparent transparent currentColor;margin-left:3px}

/* ---------- product photos: upright, with a soft shadow (the drawn crates keep their tilt) ---------- */
.packshot{filter:drop-shadow(0 18px 16px rgba(42,26,16,.22))}
.hero-art .packshot{position:relative;z-index:1;width:min(480px,100%);max-height:480px;transform:none}
.hero-art:hover .packshot{transform:translateY(-6px)}
.slide.has-photo .hero-art::before{content:"";position:absolute;inset:4% 6%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.85),rgba(255,255,255,0))}
.hero-art .tag{z-index:2}

/* ---------- sections ---------- */
.section{padding-block:72px}
.section-tight{padding-top:8px}
.section-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:12px 32px;margin-bottom:34px}
.section-head h2{font-size:clamp(40px,5vw,64px)}
.section-head p{margin:10px 0 0;max-width:56ch;color:var(--ink-soft)}

.stock-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:56px 22px;padding-top:28px}
.stock-intro{align-self:stretch;display:grid;align-content:space-between;gap:20px;padding:26px 24px;border-radius:var(--r-card);background:var(--malt);color:var(--foam);margin-top:36px}
.stock-intro h2{font-size:46px;color:var(--foam)}
.stock-intro h2 em{font-style:normal;color:var(--amber)}
.stock-intro p{margin:14px 0 0;color:#E9D6AE;font-size:16px}
.stock-intro .link{color:var(--foam)}

/* ---------- card ---------- */
.card{position:relative;display:grid;grid-template-rows:auto 1fr;background:var(--card);border-radius:var(--r-card);margin-top:36px;box-shadow:0 0 0 1px var(--line-soft);transition:box-shadow .2s,transform .2s}
.card:hover{box-shadow:0 0 0 1px var(--line),var(--shadow-lift);transform:translateY(-2px)}
.card-art{display:block;margin:-40px 18px 0;text-decoration:none}
.card-art .crate-slot,.card-art .packshot{transform:rotate(-4deg);filter:drop-shadow(0 14px 12px rgba(42,26,16,.28));transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.card-art .packshot{aspect-ratio:1;background:none;border-radius:0;transform:none;filter:drop-shadow(0 12px 10px rgba(42,26,16,.22))}
.card:hover .card-art .crate-slot,.card:hover .card-art .packshot{transform:rotate(0deg) translateY(-6px)}
.card-body{display:grid;grid-template-rows:auto auto 1fr auto;gap:8px;padding:14px 18px 18px}
.card-top{display:flex;justify-content:space-between;align-items:center;gap:8px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);font-weight:600}
.card h3{margin:0;font-family:var(--f-display);font-weight:900;font-size:27px;line-height:.95;text-transform:uppercase;text-wrap:balance}
.card h3 a{text-decoration:none}
.card h3 a:hover{color:var(--amber-deep)}
.card .spec{font-family:var(--f-mono);font-size:12px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.card-foot{display:flex;justify-content:space-between;align-items:end;gap:10px;padding-top:12px;border-top:1px dashed var(--line)}
.card .price{font-family:var(--f-display);font-weight:900;font-size:34px;line-height:.85;font-variant-numeric:tabular-nums}
.card .price small{display:block;font-family:var(--f-mono);font-size:10.5px;font-weight:400;line-height:1.35;color:var(--ink-soft);letter-spacing:.02em;margin-top:6px;text-transform:none}
.card.is-order .price{color:#5C4322}
.add-form{margin:0}
.add{flex:none;display:inline-grid;place-items:center;width:46px;height:46px;border-radius:50%;border:0;background:var(--amber);color:var(--ink);cursor:pointer;transition:background .15s,transform .15s}
.add:hover{background:var(--malt);color:var(--amber);transform:rotate(90deg)}
.add svg{width:20px;height:20px;stroke:currentColor;stroke-width:3;fill:none}
.card.is-order .add{background:var(--kraft-soft);box-shadow:inset 0 0 0 2px var(--order);color:var(--order)}
.card.is-order .add:hover{background:var(--order);color:#fff}
.add.busy{opacity:.5;pointer-events:none}

/* ---------- styles shelf ---------- */
.styles-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.style-tile{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:16px 18px;background:var(--card);border-radius:10px;text-decoration:none;box-shadow:0 0 0 1px var(--line-soft);transition:box-shadow .15s}
.style-tile:hover{box-shadow:0 0 0 2px var(--c)}
.style-tile .sw{width:34px;height:26px;border-radius:4px;background:var(--c);box-shadow:inset 0 -6px 0 rgba(0,0,0,.18),inset 0 0 0 1px rgba(0,0,0,.15)}
.style-tile b{font-family:var(--f-display);font-weight:800;font-size:22px;text-transform:uppercase;line-height:1}
.style-tile .mono{font-size:12px;color:var(--ink-soft)}

/* ---------- on-order band ---------- */
.order-band{background:var(--kraft-soft);border-block:1px solid var(--line)}
.order-band .wrap{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:24px 48px;align-items:center;padding-block:56px}
.order-num{font-family:var(--f-display);font-weight:900;font-size:clamp(96px,13vw,190px);line-height:.75;color:var(--order);letter-spacing:-.02em}
.order-band h2{font-size:clamp(34px,4vw,52px)}
.order-band p{margin:12px 0 0;max-width:58ch;color:#5C4322}

.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;counter-reset:s;list-style:none;margin:0;padding:0}
.steps li{counter-increment:s;display:grid;gap:10px;align-content:start;padding:26px 24px 28px;border-top:3px solid var(--ink)}
.steps li::before{content:counter(s);font-family:var(--f-stencil);font-weight:800;font-size:58px;line-height:.8;color:var(--amber-deep)}
.steps h3{margin:0;font-family:var(--f-display);font-weight:900;font-size:30px;text-transform:uppercase;line-height:.95}
.steps p{margin:0;color:var(--ink-soft);max-width:36ch}

/* ---------- catalogue ---------- */
.cat-head,.page-head{background:var(--kraft);color:var(--ink);padding-block:40px 34px;border-bottom:1px solid var(--line)}
.crumbs{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);display:flex;gap:8px;flex-wrap:wrap}
.crumbs a{color:var(--ink-soft);text-decoration:none}
.crumbs a:hover{color:var(--ink);text-decoration:underline}
.cat-head h1,.page-head h1{font-size:clamp(52px,7.5vw,108px);color:var(--ink);margin-top:10px}
.cat-head h1 em,.page-head h1 em{font-style:normal;color:var(--amber-deep)}
.cat-head p,.page-lede{margin:12px 0 0;max-width:62ch;color:#5C4322}
.page-lede p{margin:0}
.page-head .label{color:var(--ink-soft);margin:14px 0 0}
.shop{display:grid;grid-template-columns:260px minmax(0,1fr);gap:40px;padding-block:34px 80px;align-items:start}
.filters{position:sticky;top:104px;display:grid;gap:26px;max-height:calc(100vh - 120px);overflow:auto;padding-right:6px;scrollbar-width:thin}
.admin-bar .filters{top:136px}
.fgroup{display:grid;gap:8px}
.fgroup h4{margin:0 0 4px;font-family:var(--f-display);font-weight:900;font-size:22px;text-transform:uppercase;letter-spacing:.02em}
.fopt{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;font-size:15.5px;cursor:pointer;padding:3px 0}
.fopt.has-dot{grid-template-columns:auto auto 1fr auto}
.fopt input{accent-color:var(--malt);width:17px;height:17px;margin:0}
.fopt .mono{font-size:11px;color:var(--ink-soft)}
.fopt.off{opacity:.4}
.seg{display:grid;grid-template-columns:repeat(3,1fr);border:2px solid var(--ink);border-radius:6px;overflow:hidden}
.seg button{border:0;background:transparent;padding:9px 4px;font-family:var(--f-display);font-weight:800;font-size:16px;text-transform:uppercase;cursor:pointer;letter-spacing:.02em}
.seg button+button{border-left:1.5px solid var(--ink)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--amber)}
.toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;padding-bottom:6px;border-bottom:2px solid var(--ink)}
.toolbar .count{font-family:var(--f-display);font-weight:800;font-size:24px;text-transform:uppercase}
.toolbar .count b{color:var(--amber-deep)}
.toolbar-r{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.select{appearance:none;background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%232A1A10' stroke-width='2' fill='none'/%3E%3C/svg%3E") no-repeat right 12px center;border:2px solid var(--ink);border-radius:6px;padding:9px 36px 9px 12px;font-size:15px;cursor:pointer}
.active-filters{display:flex;flex-wrap:wrap;gap:8px;padding-top:14px}
.pill{display:inline-flex;align-items:center;gap:8px;background:var(--kraft-soft);border:1px solid var(--line);border-radius:999px;padding:4px 6px 4px 12px;font-size:14px}
.pill button{border:0;background:var(--malt);color:var(--foam);width:20px;height:20px;border-radius:50%;cursor:pointer;line-height:1;font-size:13px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:48px 20px;padding-top:14px}
.empty{padding:60px 0;display:grid;gap:14px;justify-items:start}
.empty h3{margin:0;font-family:var(--f-display);font-weight:900;font-size:36px;text-transform:uppercase}
.filter-toggle{display:none}

/* ---------- product page ---------- */
.pdp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px 56px;padding-block:40px 72px;align-items:start}
.pdp-art{background:var(--kraft);border-radius:18px;display:grid;place-items:center;padding:56px 40px;position:sticky;top:110px;overflow:hidden}
.pdp-art .crate-slot,.pdp-art .packshot{max-width:520px;transform:rotate(-6deg);filter:drop-shadow(0 30px 24px rgba(42,26,16,.32))}
.pdp-art .stamp{position:absolute;top:22px;left:22px;z-index:1}
.pdp-art .packshot{transform:none;max-height:560px;width:auto;max-width:min(520px,100%)}
.pdp-info{display:grid;gap:22px}
.pdp-info .crumbs,.pdp-info .crumbs a{color:var(--ink-soft)}
.pdp-titles{display:grid;gap:10px}
.pdp-chips{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.pdp-info h1{font-size:clamp(52px,6.4vw,96px)}
.pdp-info .fmt{font-family:var(--f-stencil);font-weight:800;font-size:clamp(30px,3.2vw,44px);line-height:1;letter-spacing:.02em;color:var(--amber-deep)}
.pdp-desc p{font-size:19px;margin:0;max-width:52ch}
.pdp-buy{display:grid;gap:16px;padding:22px;background:var(--card);border-radius:var(--r-card);box-shadow:0 0 0 1px var(--line-soft)}
.pdp-buy .bigprice{font-size:72px}
.note{font-size:14.5px;color:var(--ink-soft);margin:0}
.note b{color:var(--ink);font-weight:600}
.specs{display:grid;grid-template-columns:max-content 1fr;margin:0;border-top:2px solid var(--ink)}
.specs dt,.specs dd{margin:0;padding:11px 0;border-bottom:1px solid var(--line)}
.specs dt{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);padding-right:28px;padding-top:14px}
.specs dd{font-variant-numeric:tabular-nums}
.related{padding-bottom:80px}

/* ---------- pages, FAQ, journal ---------- */
.page-body{padding-block:44px 72px}
.prose{max-width:760px;font-size:18px}
.prose>*:first-child{margin-top:0}
.prose h2{font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:clamp(32px,4vw,46px);line-height:.95;margin:48px 0 14px}
.prose h3{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:26px;line-height:1;margin:32px 0 10px}
.prose p,.prose ul,.prose ol{margin:0 0 16px}
.prose li{margin-bottom:6px}
.prose a{color:var(--amber-deep);text-underline-offset:3px}
.prose strong{font-weight:600}
.prose table{width:100%;border-collapse:collapse;font-size:16px;margin:0 0 20px}
.prose th,.prose td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
.prose th{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.prose details{background:var(--card);border-radius:10px;box-shadow:0 0 0 1px var(--line-soft);margin:0 0 10px;padding:0}
.prose summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:16px 20px;font-family:var(--f-display);font-weight:800;font-size:22px;text-transform:uppercase;line-height:1.05}
.prose summary::-webkit-details-marker{display:none}
.prose summary::after{content:"+";font-family:var(--f-mono);font-size:20px;color:var(--amber-deep);flex:none}
.prose details[open] summary::after{content:"−"}
.prose details>*:not(summary){margin:0;padding:0 20px 16px}
.prose .contact-card{display:grid;gap:6px;background:var(--card);border-radius:12px;box-shadow:0 0 0 1px var(--line-soft);padding:22px 24px;margin:0 0 16px}
.page-body.is-wc .prose{max-width:none}
.cta-band{background:var(--kraft-soft);border-top:1px solid var(--line)}
.cta-band .wrap{display:flex;flex-wrap:wrap;gap:20px 40px;align-items:center;justify-content:space-between;padding-block:44px}
.cta-band h2{font-size:clamp(32px,4vw,48px)}
.cta-band p{margin:8px 0 0;color:#5C4322}
.journal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
.post-card-link{display:grid;grid-template-rows:auto 1fr;height:100%;background:var(--card);border-radius:var(--r-card);box-shadow:0 0 0 1px var(--line-soft);text-decoration:none;overflow:hidden;transition:box-shadow .2s,transform .2s}
.post-card-link:hover{box-shadow:0 0 0 1px var(--line),var(--shadow-lift);transform:translateY(-2px)}
.post-card-img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
.post-card-art{display:grid;place-items:center;aspect-ratio:16/10;background:var(--kraft) repeating-linear-gradient(90deg,rgba(42,26,16,.07) 0 26px,transparent 26px 34px);font-family:var(--f-stencil);font-weight:800;font-size:64px;color:var(--malt)}
.post-card-body{display:grid;gap:10px;align-content:start;padding:18px 20px 22px}
.post-card-body .label{color:var(--ink-soft)}
.post-card-title{font-family:var(--f-display);font-weight:900;font-size:30px;line-height:.95;text-transform:uppercase;text-wrap:balance}
.post-card-excerpt{color:var(--ink-soft);font-size:16px}
.post-card-body .link{justify-self:start;font-size:17px}
.article-hero{margin:0 0 28px;max-width:960px}
.article-hero img{border-radius:14px}
.back{margin-top:40px}
.pager{margin-top:36px;font-family:var(--f-mono)}
.pager .page-numbers{display:inline-block;padding:6px 10px;text-decoration:none}
.pager .current{background:var(--malt);color:var(--amber);border-radius:6px}
.notices:empty{display:none}
.notices .woocommerce-message,.notices .woocommerce-info,.notices .woocommerce-error{list-style:none;margin:16px 0 0;padding:14px 18px;border-radius:8px;background:var(--card);box-shadow:0 0 0 1px var(--line)}
.notices .woocommerce-error{box-shadow:0 0 0 2px var(--red)}
.notices .button{margin-left:12px;font-family:var(--f-display);font-weight:800;text-transform:uppercase}

/* ---------- footer ---------- */
.foot{background:var(--gold);color:var(--ink);padding-block:56px 28px}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:32px}
.foot h4{margin:0 0 12px;font-family:var(--f-display);font-weight:900;font-size:22px;text-transform:uppercase;color:var(--ink);letter-spacing:.02em}
.foot p,.foot li{margin:0;font-size:15.5px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.foot a{color:var(--ink);text-decoration:none}
.foot a:hover{color:var(--malt);text-decoration:underline}
.foot .soon{color:rgba(59,38,18,.62)}
.foot-legal{margin-top:40px;padding-top:18px;border-top:1px solid rgba(59,38,18,.25);display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-family:var(--f-mono);font-size:11px;letter-spacing:.04em;color:rgba(59,38,18,.72)}
.age{display:inline-flex;align-items:center;gap:6px}
.age span{margin-left:4px}
.age b{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;border:2px solid var(--ink);color:var(--ink);font-weight:600}

/* ---------- drawer ---------- */
.scrim{position:fixed;inset:0;background:rgba(28,17,10,.55);z-index:80;opacity:0;transition:opacity .25s}
.scrim.open{opacity:1}
.drawer{position:fixed;inset:0 0 0 auto;width:min(520px,100%);background:var(--paper);z-index:90;display:grid;grid-template-rows:auto 1fr;transform:translateX(100%);transition:transform .32s cubic-bezier(.2,.8,.2,1);box-shadow:-20px 0 40px rgba(28,17,10,.25)}
.admin-bar .drawer{top:32px}
.drawer.open{transform:none}
.drawer-head{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--gold);color:var(--ink);padding:18px 22px;box-shadow:0 1px 0 rgba(59,38,18,.18)}
.drawer-head h2{font-size:38px;color:var(--ink)}
.drawer-head h2 span{color:#7A2E12}
.x{border:0;background:rgba(59,38,18,.14);color:var(--ink);width:40px;height:40px;border-radius:50%;cursor:pointer;font-size:22px;line-height:1}
.x:hover{background:var(--ink);color:var(--amber)}
.drawer-body{overflow:auto;padding:8px 22px 28px;display:grid;gap:22px;align-content:start}
.drawer-loading{padding:40px 0;font-family:var(--f-mono);font-size:12px;color:var(--ink-soft)}
.cgroup h3{margin:14px 0 4px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.line{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:6px 14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.line .crate-slot,.line img{width:64px;display:block}
.line-name{font-family:var(--f-display);font-weight:800;font-size:20px;line-height:1;text-transform:uppercase}
.line-name a{text-decoration:none}
.line .spec{font-family:var(--f-mono);font-size:11px;color:var(--ink-soft);margin-top:4px}
.line-r{display:grid;justify-items:end;gap:6px}
.line-total{font-family:var(--f-display);font-weight:900;font-size:22px;font-variant-numeric:tabular-nums}
.line-ctl{grid-column:2/4;display:flex;justify-content:space-between;align-items:center}
.rm{border:0;background:none;font-family:var(--f-mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);text-decoration:underline;cursor:pointer;padding:4px}
.rm:hover{color:var(--red)}
.totals{display:grid;gap:8px;padding:16px 18px;background:var(--card);border-radius:10px;box-shadow:0 0 0 1px var(--line-soft)}
.totals>div{display:flex;justify-content:space-between;gap:10px;font-variant-numeric:tabular-nums}
.totals .grand{border-top:2px solid var(--ink);padding-top:10px;margin-top:4px;align-items:baseline}
.totals .grand span:first-child{font-family:var(--f-display);font-weight:900;font-size:24px;text-transform:uppercase;line-height:1}
.totals .grand small{display:block;font-family:var(--f-mono);font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--ink-soft);margin-top:6px}
.totals .grand span:last-child{font-family:var(--f-display);font-weight:900;font-size:38px;line-height:1}
.form{display:grid;gap:14px}
.form h3{margin:0;font-family:var(--f-display);font-weight:900;font-size:30px;text-transform:uppercase}
.field{display:grid;gap:6px}
.field label,.field legend{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--ink-soft)}
.field input[type=text],.field input[type=tel],.field textarea{width:100%;background:var(--card);border:1.5px solid var(--line);border-radius:6px;padding:11px 12px;font-size:16px}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(240,162,2,.35)}
.field.err input{border-color:var(--red)}
.field .msg{font-size:13.5px;color:var(--red);margin:0}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
fieldset.field{border:0;padding:0;margin:0}
.radios{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.radio{display:flex;gap:10px;align-items:center;background:var(--card);border:1.5px solid var(--line);border-radius:8px;padding:11px 12px;cursor:pointer;font-size:15.5px}
.radio:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.radio input{accent-color:var(--malt);margin:0}
.check{display:flex;gap:10px;align-items:flex-start;font-size:15px;cursor:pointer}
.check input{accent-color:var(--malt);width:18px;height:18px;margin:2px 0 0;flex:none}
.preview-wrap{display:grid;gap:8px;background:#F2E3BC;border-radius:12px;padding:12px}
.preview-wrap .label{color:var(--ink-soft);display:flex;justify-content:space-between;gap:8px;align-items:center}
.preview{background:#fff;border-radius:10px 10px 10px 2px;padding:14px 16px;font-family:var(--f-mono);font-size:11.5px;line-height:1.65;white-space:pre-wrap;word-break:break-word;box-shadow:0 0 0 1px var(--line-soft);max-height:240px;overflow:auto;color:#27313A}
.copy{border:0;background:none;font-family:var(--f-mono);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;text-decoration:underline;cursor:pointer;color:var(--ink)}
.drawer .btn-wa{width:100%}
.drawer-empty,.drawer-done{display:grid;gap:14px;justify-items:start;padding:30px 0}
.drawer-done h3{font-size:40px}
.drawer-done .order-no{font-family:var(--f-stencil);font-weight:800;font-size:28px;color:var(--hop)}
.drawer-done .btn-wa{width:auto}
.form.is-sending{opacity:.6;pointer-events:none}
.drawer-empty .crate-slot{width:220px}
.drawer-empty h3{font-size:40px}

.toast{position:fixed;left:50%;bottom:24px;translate:-50% 0;z-index:100;background:var(--malt);color:var(--foam);padding:12px 18px;border-radius:8px;font-size:15px;box-shadow:0 12px 30px rgba(28,17,10,.35);display:flex;gap:14px;align-items:center;max-width:calc(100% - 32px)}
.toast button{border:0;background:none;color:var(--amber);font-family:var(--f-display);font-weight:900;font-size:18px;text-transform:uppercase;cursor:pointer;white-space:nowrap}
.toast.is-error{background:var(--red)}
.toast.is-error button{color:#fff}

/* ---------- search: homepage finder, suggestions, phone toggle ---------- */
.finder{grid-column:1/-1;display:grid;gap:14px;background:#FFFDF6;border-radius:16px;padding:22px 24px 20px;box-shadow:0 0 0 2px var(--ink),var(--shadow-lift);position:relative;z-index:5}
.finder-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 20px}
.finder-title{font-size:clamp(32px,3.6vw,46px)}
.finder-title em{font-style:normal;color:var(--amber-deep)}
.finder-count{font-size:12px;color:var(--ink-soft)}
.finder-form{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;margin:0}
.finder-field{position:relative;display:block}
.finder-field svg{position:absolute;left:18px;top:50%;translate:0 -50%;width:22px;height:22px;fill:none;stroke:var(--ink-soft);stroke-width:2;pointer-events:none}
.finder-field input{width:100%;height:60px;background:var(--card);border:2px solid var(--ink);border-radius:10px;padding:0 16px 0 52px;font-family:var(--f-text);font-size:19px;color:var(--ink)}
.finder-field input::placeholder{color:#9B8055}
.finder-field input:focus{outline:none;box-shadow:0 0 0 4px rgba(247,190,53,.55)}
.finder-form .btn{height:60px;padding-inline:28px}
.finder-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.finder-chips .label{color:var(--ink-soft);margin-right:4px}
.chip-link{display:inline-block;background:var(--kraft-soft);border:1px solid var(--line);border-radius:999px;padding:5px 13px;font-size:15px;text-decoration:none;color:var(--ink)}
.chip-link:hover{background:var(--amber);border-color:var(--amber)}
.hero-finder-only .wrap{grid-template-columns:1fr}

.suggest{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:60;background:var(--card);border-radius:12px;box-shadow:0 0 0 1px var(--line),0 24px 48px -16px rgba(42,26,16,.45);padding:6px;max-height:min(70vh,540px);overflow:auto;color:var(--ink);text-align:left}
.band .suggest{left:auto;width:min(460px,calc(100vw - 32px))}
.suggest-head{margin:0;padding:8px 10px 4px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.sug{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px 10px;border-radius:8px;text-decoration:none;color:var(--ink)}
.sug:hover,.sug[aria-selected="true"],.sug-all:hover,.sug-all[aria-selected="true"]{background:var(--kraft-soft)}
.sug-art{display:block;width:52px}
.sug-art svg,.sug-art img{display:block;width:100%;height:auto}
.sug-art img{aspect-ratio:1;object-fit:contain;border-radius:6px}
.sug-main{min-width:0}
.sug-name{display:block;font-family:var(--f-display);font-weight:800;font-size:19px;line-height:1;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sug-name mark{background:none;color:var(--amber-deep)}
.sug-meta{display:block;font-family:var(--f-mono);font-size:10.5px;color:var(--ink-soft);margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sug-price{font-family:var(--f-display);font-weight:900;font-size:21px;line-height:1;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.sug-price.is-por{font-size:16px;text-transform:uppercase}
.sug-price small{display:block;margin-top:5px;font-family:var(--f-mono);font-size:9.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.sug-price .is-stock{color:var(--hop)}
.sug-price .is-order{color:var(--order)}
.sug-all{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:4px;padding:12px 10px;border-top:1px dashed var(--line);border-radius:0 0 8px 8px;font-family:var(--f-display);font-weight:800;font-size:18px;text-transform:uppercase;text-decoration:none;color:var(--ink)}
.sug-all .mono{font-size:12px;color:var(--ink-soft)}
.sug-empty{margin:0;padding:14px 10px;color:var(--ink-soft);font-size:15px}
.search-toggle{display:none;border:0;background:rgba(59,38,18,.12);color:var(--ink);width:42px;height:42px;border-radius:6px;cursor:pointer;place-items:center}
.search-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2}
.band.search-open .search-toggle{background:var(--ink);color:var(--amber)}

/* ---------- price on request ---------- */
.card .price.is-por{font-size:24px;line-height:.95;text-transform:uppercase;color:var(--ink)}
.card .price.is-por small{text-transform:none}
.bigprice.por-price{font-size:clamp(40px,4.6vw,60px);line-height:.9;text-transform:uppercase}
.pdp-buy .bigprice.por-price{font-size:clamp(40px,4.6vw,60px)}
.ask-row{display:flex;flex-wrap:wrap;gap:12px}
.ask-row .btn-wa{font-size:21px}
.line.is-por .line-total{font-size:15px;text-transform:uppercase;font-family:var(--f-display);font-weight:800;color:var(--ink-soft)}
.totals .por-row{color:var(--ink-soft)}

/* ---------- homepage ranges (beers, softs, wines, spirits) ---------- */
.section-ranges{padding-bottom:24px}
.ranges-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.range-tile{position:relative;display:grid;grid-template-rows:auto auto auto;gap:6px;padding:18px 18px 16px;background:var(--card);border-radius:var(--r-card);box-shadow:0 0 0 1px var(--line-soft);text-decoration:none;color:var(--ink);overflow:hidden;transition:box-shadow .2s,transform .2s}
.range-tile::before{content:"";position:absolute;inset:0 0 auto 0;height:6px;background:var(--c)}
.range-tile:hover{box-shadow:0 0 0 2px var(--c),var(--shadow-lift);transform:translateY(-2px)}
.range-art{display:grid;place-items:center;height:170px}
.range-art img{max-height:170px;width:auto;object-fit:contain;filter:drop-shadow(0 12px 10px rgba(42,26,16,.2))}
.range-art .capmark{width:90px;height:90px;opacity:.5}
.range-name{font-family:var(--f-display);font-weight:900;font-size:30px;line-height:.95;text-transform:uppercase}
.range-count{font-size:12px;color:var(--ink-soft)}

/* ---------- section landing (softs, wines, spirits) ---------- */
.landing{padding-block:30px 80px}
.kinds-grid{margin-bottom:44px}
.landing-head{margin-bottom:8px}
.landing-head h2{font-size:clamp(34px,4vw,50px)}
.landing-head h2 em{font-style:normal;color:var(--amber-deep)}

/* ---------- age check + cookie notice (first visit) ---------- */
.age-gate{display:none}
html.age-pending{overflow:hidden}
html.age-pending .age-gate{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:16px;background:rgba(28,17,10,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.age-box{display:grid;justify-items:center;gap:16px;width:min(560px,100%);max-height:calc(100vh - 32px);overflow:auto;background:var(--paper);border-radius:16px;padding:30px 26px 24px;text-align:center;box-shadow:0 30px 60px rgba(28,17,10,.45)}
.age-box .capmark{width:64px;height:64px}
.age-box .lang{border-color:rgba(59,38,18,.3)}
.age-box h2{font-size:clamp(34px,6vw,50px);line-height:.95}
.age-box p{margin:0;color:#5C4322;max-width:44ch}
.age-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.age-actions .btn{font-size:19px}
.age-cookies{font-size:13.5px;color:var(--ink-soft)!important;border-top:1px dashed var(--line);padding-top:14px}
.age-refused{font-weight:600;color:var(--red)!important}

/* ---------- trade accounts ---------- */
.strip-info{align-items:center}
.strip-min{font-weight:600;background:var(--ink);color:var(--amber);padding:3px 10px;border-radius:999px;white-space:nowrap}
.account-btn{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 14px 0 11px;border-radius:6px;background:rgba(59,38,18,.12);color:var(--ink);text-decoration:none;font-family:var(--f-display);font-weight:800;font-size:18px;text-transform:uppercase;letter-spacing:.02em;white-space:nowrap}
.account-btn:hover{background:var(--ink);color:var(--amber)}
.account-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;flex:none}
.account-btn.is-in{box-shadow:inset 0 0 0 2px var(--ink)}
.card .add-lock,.card.is-order .add-lock{background:var(--kraft-soft);color:var(--ink);box-shadow:inset 0 0 0 2px var(--line);text-decoration:none}
.card .add-lock:hover,.card.is-order .add-lock:hover{background:var(--ink);color:var(--amber);box-shadow:none;transform:none}
.add-lock svg{stroke-width:2.3}
.pro-gate{display:grid;gap:14px;padding:18px 20px;background:var(--card);border-radius:10px;box-shadow:0 0 0 1px var(--line);max-width:560px}
.pro-gate p{margin:0;font-size:16px}
.pro-gate.is-compact{padding:0;background:none;box-shadow:none}
.pro-actions{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center}
.pro-actions .btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4}
.pro-actions .link{font-size:17px}
.drawer-pro{display:grid;gap:16px;justify-items:start;padding:30px 0}
.drawer-pro h3{font-size:40px}
.drawer-pro .note{margin:0}
.pro-badge{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--ink);color:var(--amber)}
.pro-badge svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:2.2}
.pro-steps{margin:0;padding-left:22px;display:grid;gap:6px}
.pro-steps li::marker{font-family:var(--f-mono);font-weight:600;color:var(--amber-deep)}
.min-order{display:grid;gap:8px;padding-top:12px;margin-top:4px;border-top:1px dashed var(--line)}
.min-order p{margin:0;font-size:14.5px;font-weight:600;color:var(--red)}
.min-order.is-ok p{color:var(--hop)}
.min-bar{height:8px;border-radius:999px;background:var(--line-soft);overflow:hidden}
.min-bar i{display:block;height:100%;background:var(--amber);border-radius:inherit;transition:width .3s}
.min-order.is-ok .min-bar i{background:var(--hop)}
.drawer .btn-wa[disabled]{opacity:.45;cursor:not-allowed}
.drawer .min-note{margin:0;text-align:center;color:var(--red)}
/* WooCommerce "my account": login, sign-up and the client dashboard */
.afs-login-intro{max-width:760px;margin:0 0 24px;padding:16px 20px;background:var(--kraft-soft);border-radius:10px;box-shadow:0 0 0 1px var(--line)}
.page-body.is-wc .u-columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:28px;align-items:start}
.page-body.is-wc .u-columns::before,.page-body.is-wc .u-columns::after{display:none}
.page-body.is-wc .u-columns>.u-column1,.page-body.is-wc .u-columns>.u-column2{width:auto;float:none;margin:0}
.page-body.is-wc .u-columns h2{font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:34px;line-height:1;margin:0 0 14px}
.page-body.is-wc form.login,.page-body.is-wc form.register{margin:0;padding:22px 24px;border:0;border-radius:12px;background:var(--card);box-shadow:0 0 0 1px var(--line-soft)}
.page-body.is-wc form .form-row{margin:0 0 14px;padding:0}
.page-body.is-wc form .form-row label{display:block;font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--ink-soft);margin-bottom:6px}
.page-body.is-wc form .form-row label.woocommerce-form__label-for-checkbox{display:inline-flex;gap:8px;align-items:center;text-transform:none;letter-spacing:0;font-family:var(--f-text);font-size:15px;color:var(--ink)}
.page-body.is-wc form .form-row .input-text,.page-body.is-wc form .form-row select,.page-body.is-wc form .form-row textarea{width:100%;background:var(--paper);border:1.5px solid var(--line);border-radius:6px;padding:11px 12px;font:inherit;font-size:16px;color:var(--ink)}
.page-body.is-wc form .form-row .input-text:focus,.page-body.is-wc form .form-row select:focus,.page-body.is-wc form .form-row textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(240,162,2,.35)}
.page-body.is-wc .required{color:var(--red);text-decoration:none;border:0}
.page-body.is-wc .password-input{display:block;position:relative}
.page-body.is-wc .show-password-input{position:absolute;right:10px;top:50%;transform:translateY(-50%)}
.page-body.is-wc form .woocommerce-button,.page-body.is-wc form .woocommerce-Button,.page-body.is-wc form button.button{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:6px;padding:13px 22px;background:var(--amber);color:var(--ink);font-family:var(--f-display);font-weight:900;font-size:20px;line-height:1;text-transform:uppercase;letter-spacing:.03em;cursor:pointer}
.page-body.is-wc form .woocommerce-button:hover,.page-body.is-wc form .woocommerce-Button:hover,.page-body.is-wc form button.button:hover{background:#FFCB4F;color:var(--ink)}
.page-body.is-wc .lost_password a,.page-body.is-wc .woocommerce-privacy-policy-text a{color:var(--amber-deep)}
.page-body.is-wc .woocommerce-privacy-policy-text p,.afs-privacy{font-size:13.5px;color:var(--ink-soft)}
.afs-register-intro{margin:0 0 18px;padding:12px 14px;border-radius:8px;background:var(--kraft-soft);font-size:15px}
.afs-register-intro p{margin:0}
.afs-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:0 12px}
.afs-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.afs-client-status{margin:0 0 24px;padding:16px 20px;border-radius:10px;background:var(--card);box-shadow:0 0 0 1px var(--line);border-left:6px solid var(--amber)}
.afs-client-status p{margin:6px 0 0}
.afs-client-status.is-approved{border-left-color:var(--hop)}
.afs-client-status.is-rejected{border-left-color:var(--red)}
.page-body.is-wc .woocommerce-MyAccount-navigation ul{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.page-body.is-wc .woocommerce-MyAccount-navigation a{display:inline-block;padding:8px 14px;border-radius:999px;background:var(--card);box-shadow:0 0 0 1px var(--line);text-decoration:none;color:var(--ink);font-family:var(--f-display);font-weight:800;font-size:17px;text-transform:uppercase}
.page-body.is-wc .woocommerce-MyAccount-navigation .is-active a{background:var(--ink);color:var(--amber);box-shadow:none}
.page-body.is-wc .woocommerce-MyAccount-navigation,.page-body.is-wc .woocommerce-MyAccount-content{float:none;width:auto}
@media (max-width:1600px){.account-btn .account-label{display:none}.account-btn{padding:0 11px}}
/* Homepage panorama: a wide picture of the full crate (parts/slide.php, tools/panorama.py) */
.slide.is-panorama{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
.slide.is-panorama .display{font-size:clamp(52px,7.4vw,108px)}
.slide.is-panorama .hero-art{min-height:0;align-self:center;padding-block:10px 26px}
.hero-art .panorama{position:relative;z-index:1;display:block;width:100%;height:auto;filter:drop-shadow(0 26px 22px rgba(42,26,16,.28));transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.hero-art:hover .panorama{transform:translateY(-6px)}
.slide.is-panorama .hero-art::before{content:"";position:absolute;inset:-8% -6% 6%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.8),rgba(255,255,255,0))}
/* The crate photo already shows the pack: no sticker over it. */
.slide.is-panorama .hero-art .tag{display:none}


.foot-dev a{font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ---------- volume price (plugin quantity-price.php) ---------- */
.qty-deal{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;width:fit-content;max-width:100%;margin:0;padding:9px 14px;border-radius:8px;background:var(--hop);color:#fff;font-size:16px;line-height:1.35}
.qty-deal b{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;background:var(--amber);color:var(--ink);padding:3px 9px;border-radius:999px}
.qty-deal .qty-was{opacity:.82}
.card .price small.qty-mini{color:var(--hop);font-weight:600;margin-top:4px}
.qty-hint{margin-top:4px;font-family:var(--f-mono);font-size:11px;letter-spacing:.02em;line-height:1.4;color:var(--amber-deep)}
.qty-hint.is-on{color:var(--hop);font-weight:600}

/* ---------- services band (parts/services.php) ---------- */
.services-band{background:var(--malt);color:var(--foam);border-bottom:6px solid var(--amber);scroll-margin-top:96px}
.services-band .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:26px 56px;align-items:start;padding-block:60px}
.services-head{grid-column:1;grid-row:1}
.services-head .label{color:var(--amber);margin:0 0 14px}
.services-band h2.display{font-size:clamp(46px,6.2vw,98px);line-height:.86;color:var(--foam)}
.services-band h2 span{display:block}
.services-band h2 .svc-alt{color:var(--amber);margin-top:.08em}
.svc-stamp{display:inline-flex;align-items:center;gap:10px;margin:24px 0 0;padding:10px 16px;border:2px solid var(--amber);border-radius:6px;transform:rotate(-1.5deg);font-family:var(--f-display);font-weight:900;font-size:clamp(21px,2.3vw,30px);line-height:1;text-transform:uppercase;letter-spacing:.02em;color:var(--amber)}
.svc-stamp svg,.svc-ico svg{width:1.1em;height:1.1em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.services-list{grid-column:2;grid-row:1/3;list-style:none;margin:0;padding:0;display:grid;gap:16px}
.services-list li{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;align-items:start;padding:18px 20px;border-radius:10px;background:rgba(255,252,242,.06);box-shadow:inset 0 0 0 1px rgba(255,252,242,.16)}
.svc-ico{grid-row:1/3;display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:var(--amber);color:var(--malt);font-size:26px}
.services-list h3{margin:0;font-family:var(--f-display);font-weight:900;font-size:27px;text-transform:uppercase;line-height:1;color:var(--foam)}
.services-list p{margin:0;font-size:15.5px;line-height:1.45;color:rgba(255,252,242,.84)}
.services-cta{grid-column:1;grid-row:2;align-self:start}
@media (max-width:900px){
  .services-band .wrap{grid-template-columns:1fr;padding-block:42px}
  .services-head,.services-list,.services-cta{grid-column:auto;grid-row:auto}
  .services-cta .btn-wa{width:100%}
}

/* ---------- responsive ---------- */
@media (max-width:1400px){
  .nav .nav-soon{display:none}
}
@media (max-width:1200px){
  .search input[type=search]{width:160px}
}
@media (max-width:1100px){
  .stock-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .styles-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .band .wrap{grid-template-columns:1fr auto auto auto;column-gap:10px;min-height:70px;padding-block:8px}
  .band-tools{display:contents}
  .nav{grid-column:1/-1;grid-row:2;padding-bottom:4px}
  .nav a{font-size:19px}
  .search{display:none}
  .search-toggle{display:inline-grid}
  .band.search-open .search{display:block;grid-column:1/-1;grid-row:3;padding-bottom:10px}
  .band.search-open .search input[type=search]{width:100%;font-size:16px}
  .band.search-open .suggest{left:0;right:0;width:auto}
  .hero .wrap{grid-template-columns:1fr;padding-block:24px 44px}
  .slide,.slide.is-panorama{grid-template-columns:1fr}
  .slide.is-panorama .hero-art{padding-block:0 8px}
  .slide .hero-art{min-height:360px}
  .hero-art .packshot{max-height:340px}
  .slider-nav{margin-top:18px}
  .hero-art{order:-1;min-height:0}
  .finder{order:-2;padding:16px 16px 14px}
  .hero-art .crate-slot,.hero-art .packshot{width:min(420px,92%)}
  .order-band .wrap{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .shop{grid-template-columns:1fr;gap:18px}
  .filters{position:static;max-height:none;overflow:visible;display:none;padding:18px;background:var(--card);border-radius:12px;box-shadow:0 0 0 1px var(--line-soft)}
  .filters.show{display:grid}
  .filter-toggle{display:inline-flex;font-size:17px;padding:9px 14px}
  .pdp{grid-template-columns:1fr}
  .pdp-art{position:static;padding:40px 24px}
}
@media (max-width:782px){
  .admin-bar .band{top:46px}
  .admin-bar .drawer{top:46px}
}
@media (max-width:560px){
  body{font-size:16px}
  .brand-word{font-size:27px}
  .brand .capmark{width:36px;height:36px}
  .brand-sub{display:none}
  .cart-btn{font-size:17px;padding:8px 12px 8px 10px}
  .cart-btn .cart-label{display:none}
  .stock-grid{grid-template-columns:1fr 1fr;gap:44px 12px}
  .stock-intro{margin-top:36px;padding:18px 14px}
  .stock-intro h2{font-size:30px}
  .stock-intro p{font-size:14px}
  .stock-intro .link{font-size:15px}
  .grid{grid-template-columns:1fr 1fr;gap:44px 12px}
  .card-art{margin:-32px 10px 0}
  .card-body{padding:10px 12px 14px}
  .card h3{font-size:21px}
  .card .price{font-size:26px}
  .card .spec{font-size:10.5px}
  .card-top{flex-wrap:wrap}
  .add{width:38px;height:38px}
  .styles-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .two,.radios{grid-template-columns:1fr}
  .section{padding-block:52px}
  .strip-info>span:first-child{display:none}
  .pdp-buy .bigprice{font-size:56px}
  .pdp-buy .bigprice.por-price{font-size:40px}
  .finder-field input{height:52px;font-size:16px;padding-left:44px}
  .finder-field svg{left:14px;width:19px;height:19px}
  .finder-form .btn{height:52px;padding-inline:14px;font-size:18px}
  .finder-chips .chip-link{font-size:14px;padding:4px 11px}
  .card .price.is-por{font-size:19px}
  .sug{grid-template-columns:44px minmax(0,1fr) auto;gap:10px;padding:8px 6px}
  .sug-art{width:44px}
  .sug-name{font-size:17px}
  .sug-price{font-size:18px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}