/* Kinzé Atelier — Theme styles (design revision 3: compact system).
   Section 1 is a verbatim port of design/mockups/kz.css (selectors, values
   and breakpoints kept identical to the mockup, including its v2/v3
   compact-chrome additions — .kz-bar/.kz-hd/.kz-ft etc). Section 2 is
   WordPress-only mechanics (drawer open/close, search overlay, progressive
   enhancement) that kz.css doesn't need to define because it's a static
   mockup, not an interactive site. Section 3 holds WP additions for pages
   not yet reworked for R3 (shop/archive = R3-3, product = R3-4) — kept
   verbatim from the r2 build so those pages keep working until their turn;
   remove each block as its phase lands.
   Self-hosted @font-face lives in fonts/fonts.css (enqueued separately),
   not duplicated here. */

:root {
  /* Colour roles — customizable via Customizer, falls back to kz.css defaults */
  --kz-bg: var(--kinze-colour-bg, #fbf9f5);
  --kz-ivory: var(--kinze-colour-ivory, #f4f0e8);
  --kz-sand: #ece6dc;
  --kz-ink: var(--kinze-colour-ink, #1e1a18);
  --kz-muted: var(--kinze-colour-muted, #6b5a4e);
  --kz-line: #ddd5c8;
  --kz-line-strong: #c8bdac;
  --kz-jamun: var(--kinze-colour-jamun, #4b1e4a);
  --kz-jamun-700: var(--kinze-colour-jamun-700, #381537);
  --kz-jamun-50: #f4eef3;
  --kz-emerald: var(--kinze-colour-emerald, #123d30);
  --kz-gold: var(--kinze-colour-gold, #e3c27a);
  --kz-gold-deep: var(--kinze-colour-gold-deep, #c9a04a);
  --kz-error: #9b2c2c;

  /* Type */
  --kz-serif: "Newsreader", Georgia, serif;
  --kz-sans: "Manrope", system-ui, sans-serif;

  /* Spacing (8pt) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  --kz-radius: 3px;
  --kz-ease: cubic-bezier(.2,.7,.2,1);
}

/* =========================================================
   SECTION 1 — verbatim port of design/mockups/kz.css
   The mockup's ".kz" scope wrapper is replaced with "body"
   since the whole document is the scope in the real theme.
   ========================================================= */

body { background: var(--kz-bg); color: var(--kz-ink); font-family: var(--kz-sans); font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased; margin: 0; }
*, *::before, *::after { box-sizing: border-box; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }
.kz-wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding-left: 40px; padding-right: 40px; }

/* ---------- Type scale ---------- */
.kz-display { font-family: var(--kz-serif); font-weight: 400; font-size: 38px; line-height: 1.1; letter-spacing: -0.015em; font-variation-settings: "opsz" 72; }
.kz-h1 { font-family: var(--kz-serif); font-weight: 400; font-size: 28px; line-height: 1.12; letter-spacing: -0.01em; font-variation-settings: "opsz" 60; }
.kz-h2 { font-family: var(--kz-serif); font-weight: 400; font-size: 22px; line-height: 1.2; letter-spacing: -0.005em; }
.kz-h3 { font-family: var(--kz-serif); font-weight: 500; font-size: 17px; line-height: 1.25; }
.kz-h4 { font-family: var(--kz-sans); font-weight: 600; font-size: 13px; line-height: 1.4; }
.kz-lede { font-size: 14.5px; line-height: 1.6; color: var(--kz-muted); }
.kz-body { font-size: 14px; line-height: 1.6; }
.kz-small { font-size: 12.5px; line-height: 1.5; }
.kz-muted { color: var(--kz-muted); }
.kz-eyebrow { font-family: var(--kz-sans); font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--kz-muted); display: inline-flex; align-items: center; gap: 10px; }
.kz-price { font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .01em; white-space: nowrap; }
.kz-serif-i { font-family: var(--kz-serif); font-style: italic; }

/* The nuqta — the brand's signature diamond */
.kz-dia { display: inline-block; width: 6px; height: 6px; background: var(--kz-gold-deep); transform: rotate(45deg); flex: none; }
.kz-dia--lg { width: 9px; height: 9px; }
.kz-dia--gold { background: var(--kz-gold); }

/* ---------- Buttons ---------- */
.kz-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 20px; border-radius: var(--kz-radius); font-size: 13px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; transition: background .25s var(--kz-ease), color .25s var(--kz-ease), border-color .25s var(--kz-ease); border: 1px solid transparent; cursor: pointer; }
.kz-btn--primary { background: var(--kz-jamun); color: var(--kz-ivory) !important; }
.kz-btn--primary:hover { background: var(--kz-jamun-700); }
.kz-btn--secondary { border-color: var(--kz-ink); color: var(--kz-ink); }
.kz-btn--secondary:hover { background: var(--kz-ink); color: var(--kz-bg) !important; }
/* Emerald fill — first real use of the secondary brand colour on a button
   (17 Oct 2026 modernization pass), scoped to the "View all"-style CTA
   under a product rail so it doesn't recolour every neutral outline
   button (coupon/filter/account actions keep kz-btn--secondary as-is).
   Filled rather than outlined: an outline in this particular emerald
   (#123d30, very dark) read as a plain dark/black border at button size —
   direct feedback was "no colour at all" — so it needed a solid fill to
   actually register as the brand's secondary colour. */
.kz-btn--emerald { background: var(--kz-emerald); border-color: var(--kz-emerald); color: var(--kz-ivory) !important; }
.kz-btn--emerald:hover { background: #0e3126; border-color: #0e3126; }
.kz-btn--light { border-color: rgba(244,240,232,.55); color: var(--kz-ivory) !important; }
.kz-btn--light:hover { background: var(--kz-ivory); color: var(--kz-jamun) !important; }
.kz-btn--gold { background: var(--kz-gold); color: var(--kz-jamun) !important; }
.kz-btn--gold:hover { background: #ecd197; }
.kz-btn--block { width: 100%; }
.kz-btn--sm { height: 34px; padding: 0 14px; font-size: 12.5px; }
.kz-btn[disabled], .kz-btn--disabled { background: var(--kz-line); color: var(--kz-muted) !important; cursor: not-allowed; }

.kz-link { font-size: 13px; font-weight: 600; letter-spacing: .02em; border-bottom: 1px solid currentColor; padding-bottom: 3px; transition: color .2s, border-color .2s; display: inline-flex; align-items: center; gap: 6px; }
.kz-link:hover { color: var(--kz-jamun); }
.kz-textlink { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; cursor: pointer; background: none; border: none; }
.kz-textlink:hover { color: var(--kz-jamun); }

.kz-icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; color: var(--kz-ink); transition: color .2s; }
.kz-icon-btn:hover { color: var(--kz-jamun); }
.kz-icon-btn svg { width: 20px; height: 20px; stroke-width: 1.7; }
.kz-icon-btn.kinze-wishlist-toggle.is-on { color: var(--kz-jamun); }
.kz-count { position: absolute; top: 3px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--kz-jamun); color: var(--kz-ivory); font-size: 9.5px; font-weight: 700; line-height: 16px; text-align: center; }

/* ---------- Product card ---------- */
.kz-card { display: flex; flex-direction: column; gap: 9px; }
/* Aspect ratio relaxed from kz.css's 4/5 to 1/1 (17 Oct 2026, direct
   feedback: cards read as too tall/narrow, wanted a more "balanced"
   square) — flagged deviation from the mockup, same pass as the badge/
   button colour changes below. */
.kz-card__media { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--kz-sand); border-radius: 8px; }
.kz-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--kz-ease); }
.kz-card:hover .kz-card__media img { transform: scale(1.045); }
.kz-card__badge { position: absolute; top: 8px; left: 8px; background: var(--kz-bg); color: var(--kz-ink); font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: 4px 7px; }
/* Modernization pass (17 Oct 2026): pill badge in the secondary brand
   colour (emerald), used only for the promotional New/custom badge
   (product-card.php) — kept as a separate modifier rather than recolouring
   .kz-card__badge itself, because wishlist-card.php reuses the same base
   class for its neutral "Sold out" label, which must stay muted, not read
   as a green "available" signal. Also departs from kz.css's "cards and
   images stay square" rule (see .kz-card__media's border-radius, same
   pass) — a deliberate, flagged deviation. */
.kz-card__badge--accent { background: var(--kz-emerald); color: var(--kz-ivory); letter-spacing: .09em; padding: 4px 10px; border-radius: 999px; }
.kz-card__wish { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(251,249,245,.88); color: var(--kz-ink); transition: color .2s, background .2s; }
.kz-card__wish:hover { color: var(--kz-jamun); background: var(--kz-bg); }
.kz-card__wish svg { width: 16px; height: 16px; }
.kz-card__wish.is-on { color: var(--kz-jamun); }
.kz-card__wish.is-on svg, .kinze-wishlist-toggle.is-on svg { fill: currentColor; }
.kz-card__quick { position: absolute; left: 8px; right: 8px; bottom: 8px; height: 34px; border-radius: 6px; display: flex; align-items: center; justify-content: center; gap: 8px; background: rgba(251,249,245,.96); color: var(--kz-ink); font-size: 12px; font-weight: 600; letter-spacing: .02em; opacity: 0; transform: translateY(8px); transition: opacity .3s var(--kz-ease), transform .3s var(--kz-ease), background .2s; text-decoration: none; }
.kz-card:hover .kz-card__quick { opacity: 1; transform: none; }
.kz-card__quick:hover { background: var(--kz-jamun); color: var(--kz-ivory); }
.kz-card__body { display: flex; flex-direction: column; gap: 2px; }
.kz-card__name { font-family: var(--kz-serif); font-size: 15px; font-weight: 500; line-height: 1.25; }
.kz-card__name:hover { color: var(--kz-jamun); }
.kz-card__meta { font-size: 12px; color: var(--kz-muted); }
.kz-card__row { display: flex; align-items: center; justify-content: space-between; margin-top: 3px; }
.kz-card__price { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.kz-tones { display: flex; gap: 6px; }
.kz-tone { width: 11px; height: 11px; border-radius: 50%; border: 1px solid rgba(0,0,0,.12); }
.kz-tone--gold { background: linear-gradient(135deg,#f3dc9f,#c39645); }
.kz-tone--silver { background: linear-gradient(135deg,#f2f2f0,#b8b8b4); }
.kz-card--soldout .kz-card__media img { opacity: .55; }

/* ---------- Forms ---------- */
.kz-field { display: flex; flex-direction: column; gap: 7px; }
.kz-label { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; color: var(--kz-ink); }
.kz-label em { font-style: normal; font-weight: 500; color: var(--kz-muted); }
.kz-input { width: 100%; height: 40px; padding: 0 14px; border: 1px solid var(--kz-line-strong); border-radius: var(--kz-radius); background: #fff; font: inherit; font-size: 14px; color: var(--kz-ink); outline: none; transition: border-color .2s, box-shadow .2s; }
.kz-input::placeholder { color: #9a8c80; }
.kz-input:focus { border-color: var(--kz-jamun); box-shadow: 0 0 0 3px rgba(75,30,74,.14); }
.kz-input--error { border-color: var(--kz-error); }
textarea.kz-input { height: 110px; padding: 11px 14px; resize: vertical; }
.kz-select { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 40px; cursor: pointer; }
.kz-sort-select { border-radius: 999px; background: #fff; }
.kz-sort-select:hover { border-color: var(--kz-ink); }
.kz-selwrap { position: relative; display: block; }
.kz-selwrap > svg { position: absolute; right: 16px; top: 50%; width: 12px; height: 8px; margin-top: -4px; pointer-events: none; }
.kz-help { font-size: 12px; color: var(--kz-muted); }
.kz-err { font-size: 12px; color: var(--kz-error); font-weight: 600; }
.kz-check { display: flex; align-items: center; gap: 10px; font-size: 13px; cursor: pointer; min-height: 26px; text-align: left; }
.kz-box { width: 17px; height: 17px; border: 1px solid var(--kz-line-strong); border-radius: 3px; background: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
.kz-box.is-on { background: var(--kz-jamun); border-color: var(--kz-jamun); color: var(--kz-ivory); }

/* Dynamic price-range slider (17 Oct 2026) — two overlapping native range
   inputs, each with pointer-events:none except its own thumb, is the
   standard dependency-free technique for a draggable dual-handle slider;
   .kz-price-range__fill (an absolutely positioned bar between the two
   thumbs) is sized/positioned by JS from their live values. The no-JS
   fallback (plain number inputs + Apply button) and this slider toggle via
   the existing html.no-js/.js class (set in header.php) rather than both
   being in the DOM at once. */
.kz-price-range__values { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; margin-bottom: 10px; }
.kz-price-range__sep { color: var(--kz-muted); font-weight: 400; }
.kz-price-range__track { position: relative; height: 28px; }
.kz-price-range__rail { position: absolute; top: 50%; left: 2px; right: 2px; height: 3px; margin-top: -1.5px; background: var(--kz-line-strong); border-radius: 2px; }
.kz-price-range__fill { position: absolute; top: 50%; height: 3px; margin-top: -1.5px; background: var(--kz-jamun); border-radius: 2px; left: 0; right: 0; }
.kz-price-range__input { position: absolute; top: 0; left: 0; width: 100%; height: 28px; margin: 0; background: none; appearance: none; -webkit-appearance: none; pointer-events: none; }
.kz-price-range__input::-webkit-slider-runnable-track { background: transparent; height: 28px; }
.kz-price-range__input::-moz-range-track { background: transparent; height: 28px; border: none; }
.kz-price-range__input::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 16px; height: 16px; margin-top: 6px; border-radius: 50%; background: var(--kz-jamun); border: 2px solid var(--kz-bg); box-shadow: 0 1px 3px rgba(30,26,24,.35); cursor: pointer; }
.kz-price-range__input::-moz-range-thumb { pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; background: var(--kz-jamun); border: 2px solid var(--kz-bg); box-shadow: 0 1px 3px rgba(30,26,24,.35); cursor: pointer; }
.kz-price-range__input--max { z-index: 2; }
.kz-price-range__input--min:hover, .kz-price-range__input--min:focus { z-index: 3; }
.kz-price-range__fallback { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.js .kz-price-range__fallback { display: none; }
.no-js .kz-price-range__slider { display: none; }
.kz-radio-card { display: flex; align-items: flex-start; gap: 12px; padding: 13px 14px; border: 1px solid var(--kz-line-strong); border-radius: var(--kz-radius); background: #fff; cursor: pointer; transition: border-color .2s, background .2s; }
.kz-radio-card.is-on { border-color: var(--kz-jamun); background: var(--kz-jamun-50); }
.kz-dot { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--kz-line-strong); background: #fff; flex: none; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.kz-radio-card.is-on .kz-dot, .kz-dot.is-on { border-color: var(--kz-jamun); }
.kz-radio-card.is-on .kz-dot::after, .kz-dot.is-on::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--kz-jamun); }

.kz-qty { display: inline-flex; align-items: center; height: 40px; border: 1px solid var(--kz-line-strong); border-radius: var(--kz-radius); background: #fff; }
.kz-qty button { width: 36px; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--kz-ink); }
.kz-qty button:hover { color: var(--kz-jamun); }
.kz-qty span { min-width: 30px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.kz-qty--sm { height: 32px; }
.kz-qty--sm button { width: 30px; }

.kz-chip { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 13px; border: 1px solid var(--kz-line-strong); border-radius: 999px; font-size: 12.5px; font-weight: 500; background: transparent; white-space: nowrap; transition: border-color .2s, background .2s, color .2s; cursor: pointer; text-decoration: none; color: var(--kz-ink); }
.kz-chip:hover { border-color: var(--kz-ink); }
.kz-chip.is-on { background: var(--kz-ink); border-color: var(--kz-ink); color: var(--kz-bg); }

.kz-swatch { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 6px; border: 1px solid var(--kz-line-strong); border-radius: 999px; font-size: 12.5px; font-weight: 600; background: #fff; transition: border-color .2s, box-shadow .2s; cursor: pointer; text-decoration: none; }
.kz-swatch .kz-tone { width: 22px; height: 22px; }
.kz-swatch.is-on { border-color: var(--kz-jamun); box-shadow: inset 0 0 0 1px var(--kz-jamun); }

/* ---------- Accordion ---------- */
.kz-acc { border-top: 1px solid var(--kz-line); }
.kz-acc:last-child { border-bottom: 1px solid var(--kz-line); }
.kz-acc__head { width: 100%; height: 44px; display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 600; letter-spacing: .02em; text-align: left; cursor: pointer; }
.kz-acc__head:hover { color: var(--kz-jamun); }
.kz-acc__body { padding: 0 0 16px; font-size: 13px; line-height: 1.65; color: var(--kz-muted); }

/* ---------- Misc ---------- */
.kz-rule { height: 1px; background: var(--kz-line); border: 0; margin: 0; }
.kz-crumbs { display: flex; gap: 8px; align-items: center; font-size: 11.5px; color: var(--kz-muted); letter-spacing: .03em; }
.kz-crumbs a:hover { color: var(--kz-jamun); }
.kz-shop-banner { background: var(--kz-ivory); padding: 52px 0 46px; margin-top: 10px; }
.kz-shop-banner .kz-h1 { margin: 0 0 4px; }
.kz-shop-banner__meta { font-size: 12.5px; color: var(--kz-muted); margin: 0; }
/* Photo variant (17 Oct 2026) — per-category banner image (term meta) or
   the Customizer's site-wide fallback, hero-style but shorter since this
   sits above a chip row + utility bar, not alone like the homepage hero. */
.kz-shop-banner--image { position: relative; padding: 0; height: 220px; display: flex; align-items: flex-end; overflow: hidden; background: var(--kz-sand); }
.kz-shop-banner__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kz-shop-banner__scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(30,26,24,.68) 0%, rgba(30,26,24,.15) 55%, rgba(30,26,24,0) 85%); }
.kz-shop-banner--image .kz-wrap { position: relative; z-index: 1; padding-bottom: 28px; }
.kz-shop-banner--image .kz-h1 { color: var(--kz-ivory); }
.kz-shop-banner--image .kz-shop-banner__meta { color: rgba(244,240,232,.8); }
.kz-shop-utility { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--kz-line); border-bottom: 1px solid var(--kz-line); }
.kz-shop-filter-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; transition: color .2s; }
.kz-shop-filter-toggle:hover { color: var(--kz-jamun); }
.kz-shop-utility__sort { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.kz-progress { height: 3px; background: var(--kz-line); position: relative; overflow: hidden; }
.kz-progress > i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--kz-emerald); }
.kz-note { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; line-height: 1.55; color: var(--kz-muted); }
.kz-note svg { flex: none; width: 20px; height: 20px; stroke-width: 1.6; color: var(--kz-ink); margin-top: 1px; }
.kz-note--link span { text-decoration: underline; text-underline-offset: 3px; transition: color .2s; }
.kz-note--link:hover span { color: var(--kz-jamun); }
.kz-arrow { transition: transform .3s var(--kz-ease); }
.kz-link:hover .kz-arrow { transform: translateX(4px); }

/* ---------- Footer ---------- */
.kz-footer { background: var(--kz-jamun); color: var(--kz-ivory); }
.kz-footer a { color: rgba(244,240,232,.82); transition: color .2s; }
.kz-footer a:hover { color: var(--kz-gold); }
.kz-footer__h { font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--kz-gold); margin-bottom: 12px; }
.kz-footer__list { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.kz-footer__input { height: 38px; flex: 1; min-width: 0; padding: 0 16px; background: transparent; border: 1px solid rgba(244,240,232,.4); border-right: 0; border-radius: var(--kz-radius) 0 0 var(--kz-radius); color: var(--kz-ivory); font: inherit; font-size: 14px; outline: none; }
.kz-footer__input::placeholder { color: rgba(244,240,232,.6); }
.kz-footer__input:focus { border-color: var(--kz-gold); }

/* ---------- Layout helpers ---------- */
.kz-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 24px; row-gap: 34px; }
.kz-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kz-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kz-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-items: center; }
.kz-show-m { display: none !important; }
.kz-show-t { display: none !important; }

/* ---------- Generic page content (page.php: policy pages' WYSIWYG) ---------- */
.kz-content { max-width: 760px; font-size: 14px; line-height: 1.7; color: var(--kz-ink); }
.kz-content > :first-child { margin-top: 0; }
.kz-content h2 { font-family: var(--kz-serif); font-size: 22px; margin: 32px 0 12px; }
.kz-content h3 { font-family: var(--kz-serif); font-size: 18px; margin: 24px 0 10px; }
.kz-content p { margin: 0 0 16px; }
.kz-content ul, .kz-content ol { margin: 0 0 16px; padding-left: 20px; }
.kz-content li { margin-bottom: 6px; }
.kz-content a { color: var(--kz-jamun); text-decoration: underline; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .kz-display { font-size: 32px; }
  .kz-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kz-grid--5 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kz-grid--5 > :nth-child(5) { display: none; }
  .kz-nav { gap: 20px; }
}
@media (max-width: 860px) {
  .kz-wrap { padding-left: 24px; padding-right: 24px; }
  .kz-nav, .kz-hide-t { display: none !important; }
  .kz-burger { display: inline-flex; }
  .kz-header__row { height: 64px; }
  .kz-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 14px; row-gap: 24px; }
  .kz-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; row-gap: 22px; }
  .kz-grid--5 { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 12px; }
  .kz-split { grid-template-columns: minmax(0, 1fr) !important; gap: 32px; }
  .kz-stack-t { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .kz-pad-t { padding: 48px 0 56px !important; }
  .kz-1col-t { grid-template-columns: minmax(0, 1fr) !important; gap: 24px !important; }
  .kz-show-t { display: inline-flex !important; }
  .kz-col-t { flex-direction: column !important; }
  .kz-full-t { width: 100% !important; position: static !important; }
}
@media (max-width: 600px) {
  .kz-wrap { padding-left: 20px; padding-right: 20px; }
  .kz-display { font-size: 28px; line-height: 1.12; }
  .kz-h1 { font-size: 24px; }
  .kz-h2 { font-size: 19px; }
  .kz-grid, .kz-grid--3, .kz-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 10px; row-gap: 20px; }
  .kz-card__name { font-size: 14px; }
  .kz-card__quick { display: none; }
  .kz-hide-m { display: none !important; }
  .kz-show-m { display: flex !important; }
  .kz-btn { height: 44px; }
}

/* =====================================================================
   v2 additions: compact desktop chrome (kz-bar / kz-hd / kz-ft) and
   merchandising blocks.
   ===================================================================== */
.kz-ico { width: 18px; height: 18px; flex: none; stroke-width: 1.7; }
.kz-ico--sm { width: 15px; height: 15px; }
.kz-ico--lg { width: 22px; height: 22px; }

.kz-bar { background: var(--kz-jamun); color: var(--kz-ivory); font-size: 11.5px; letter-spacing: .04em; height: 28px; display: flex; align-items: center; justify-content: center; gap: 22px; }
.kz-bar span { display: inline-flex; align-items: center; gap: 7px; }
.kz-bar svg { width: 14px; height: 14px; color: var(--kz-gold); stroke-width: 1.7; }

.kz-hd { background: #fff; border-bottom: 1px solid var(--kz-line); position: relative; z-index: 5; }
.kz-hd__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 36px; height: 60px; }
.kz-hd .kz-nav { gap: 24px; display: flex; align-items: center; }
.kz-hd .kz-nav a { font-size: 13px; font-weight: 500; letter-spacing: .02em; position: relative; }
.kz-hd .kz-nav a.is-active { color: var(--kz-jamun); font-weight: 600; }
.kz-hd .kz-nav a.is-active::after { content: ""; position: absolute; left: 50%; bottom: -3px; width: 4px; height: 4px; margin-left: -2px; background: var(--kz-gold-deep); transform: rotate(45deg); }
.kz-hd__tools { display: flex; align-items: center; gap: 2px; }
.kz-search { display: flex; align-items: center; gap: 8px; height: 36px; width: 210px; padding: 0 12px; margin-right: 8px; border: 1px solid var(--kz-line-strong); border-radius: 999px; font-size: 12.5px; color: var(--kz-muted); background: #fff; transition: border-color .2s; }
.kz-search:hover { border-color: var(--kz-ink); }
.kz-search svg { width: 16px; height: 16px; color: var(--kz-ink); stroke-width: 1.8; }
.kz-search input { border: 0; outline: 0; background: none; font: inherit; width: 100%; color: inherit; }
.kz-search-ic { display: none; }

.kz-sec { padding-top: 48px; padding-bottom: 12px; }
.kz-sec__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.kz-sec__head .kz-h2 { font-size: 21px; }
/* Centred variant (17 Oct 2026 modernization pass) — product-rail headers
   (New in, Bestsellers, Pairs well with) read as a centred title with the
   "View all" CTA moved below the grid, matching the Swapot reference
   instead of the original left-title/right-link row. Other kz-sec__head
   uses (Instagram, shop toolbar) are untouched. */
.kz-sec__head--center { flex-direction: column; align-items: center; text-align: center; gap: 4px; }
/* Feedback after the first pass: the centred title and the CTA below the
   grid both read as too small/thin against the width of a 4-column rail.
   Sized up specifically here rather than touching .kz-h2 or .kz-btn
   globally (which stay at the system's compact 40px-control baseline
   everywhere else — coupons, filters, account actions, etc.). */
.kz-sec__head--center .kz-h2 { font-size: 28px; }
.kz-sec__cta { display: flex; justify-content: center; margin-top: 28px; }
.kz-sec__cta .kz-btn { height: 46px; padding: 0 30px; font-size: 14px; }

/* Full-bleed (17 Oct 2026) — was inset in .kz-wrap with 12px rounded
   corners; now flush with the viewport edges and the header above it, so
   the rounding (which only made sense as a "card" floating in a margin)
   is dropped too. */
.kz-hero { position: relative; height: 360px; overflow: hidden; background: var(--kz-sand); padding-top: 0; }
.kz-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kz-hero__scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(30,26,24,.78) 0%, rgba(30,26,24,.3) 46%, rgba(30,26,24,0) 74%); }
/* left uses the same "edge of the centred 1280px content column" formula
   as .kz-wrap's own padding, so the hero text lines up with New In/Shop by
   Category/etc. below it instead of sitting a flat 36px from the true
   (now full-bleed) viewport edge. */
.kz-hero__copy { position: absolute; left: max(36px, calc(50% - 640px + 40px)); right: 36px; bottom: 32px; max-width: 480px; display: flex; flex-direction: column; gap: 12px; }
.kz-hero__copy .kz-display { font-size: 36px; color: var(--kz-ivory); margin: 0; }
.kz-hero__copy p { font-size: 13.5px; line-height: 1.6; color: rgba(251,249,245,.85); max-width: 420px; margin: 0; }

/* Closing banner (17 Oct 2026, replaces the Instagram feed section) — a
   full-bleed photo with centred copy, deliberately different from the
   hero's left-aligned bottom-gradient treatment (a uniform scrim + dead-
   centre text reads as a conclusive closing statement, not a repeat of
   the opening hero). */
/* Full-bleed (17 Oct 2026, same reasoning as the hero) — was inset in
   .kz-wrap with 12px rounded corners; the wrapping <section>'s own
   padding-top/bottom is replaced with margin here since there's no
   wrapper left to carry it. */
/* Left-aligned, bottom-anchored — matches the hero's own treatment exactly
   (17 Oct 2026, direct request), including reusing its "align with the
   1280px content column" left-offset formula, instead of the originally
   centred layout. */
.kz-closing { position: relative; height: 320px; overflow: hidden; background: var(--kz-sand); }
.kz-closing__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kz-closing__scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(30,26,24,.75) 0%, rgba(30,26,24,.25) 50%, rgba(30,26,24,0) 80%); }
.kz-closing__copy { position: absolute; left: max(36px, calc(50% - 640px + 40px)); right: 36px; bottom: 32px; max-width: 480px; display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 12px; }
.kz-closing__copy .kz-display { font-size: 30px; color: var(--kz-ivory); margin: 0; }
.kz-closing__copy p { font-size: 13.5px; line-height: 1.6; color: rgba(251,249,245,.85); margin: 0; max-width: 420px; }

/* Quiet category tile — shared between the homepage hybrid grid's cluster
   and the standalone Categories page grid (17 Oct 2026 redesign, replaces
   the old horizontal-scroll chip strip). */
.kz-cattile { display: flex; flex-direction: column; gap: 8px; }
.kz-cattile__im { position: relative; aspect-ratio: 4 / 5; border-radius: 8px; overflow: hidden; background: var(--kz-sand); }
.kz-cattile__im img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--kz-ease); }
.kz-cattile:hover .kz-cattile__im img { transform: scale(1.05); }
.kz-cattile__name { font-family: var(--kz-serif); font-size: 15px; font-weight: 500; }
.kz-cattile:hover .kz-cattile__name { color: var(--kz-jamun); }
.kz-cattile__count { font-size: 12px; color: var(--kz-muted); }

/* Homepage "Shop by category" rail (17 Oct 2026, final direction) — circular
   medallions in a horizontal row, centered when they fit the container,
   scrollable if more are added later. Deliberately a different shape
   language (circle) from the product-card grid and from the earlier
   grid-based attempts, so it doesn't read as either a repeat of New In/
   Bestsellers or a copy of the Swapot reference's own category grid.
   Given its own tinted band so the section has real visual weight instead
   of floating in open space (17 Oct 2026 follow-up) — pale jamun
   (--kz-jamun-50), not ivory: direct feedback that ivory looked wrong
   here, and the Trust Strip directly below is already ivory, so a second
   ivory band back to back would read as one undifferentiated block. */
.kz-catrail-band { background: var(--kz-jamun-50); padding: 28px 0; margin-top: 4px; }
.kz-catrail { display: flex; justify-content: center; gap: 30px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: none; }
.kz-catrail::-webkit-scrollbar { display: none; }
.kz-catrail__item { display: flex; flex-direction: column; align-items: center; gap: 10px; flex: none; width: 108px; text-align: center; }
.kz-catrail__im { width: 96px; height: 96px; border-radius: 50%; overflow: hidden; background: var(--kz-sand); border: 1px solid var(--kz-line-strong); transition: border-color .2s; }
.kz-catrail__im img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--kz-ease); }
.kz-catrail__item:hover .kz-catrail__im { border-color: var(--kz-jamun); }
.kz-catrail__item:hover .kz-catrail__im img { transform: scale(1.08); }
.kz-catrail__name { font-family: var(--kz-serif); font-size: 14.5px; font-weight: 500; }
.kz-catrail__item:hover .kz-catrail__name { color: var(--kz-jamun); }

.kz-promo { display: grid; grid-template-columns: minmax(0, 1fr) 190px; min-height: 238px; overflow: hidden; border-radius: 8px; }
.kz-promo__text { padding: 26px 26px; display: flex; flex-direction: column; justify-content: center; gap: 8px; align-items: flex-start; }
.kz-promo img { width: 100%; height: 100%; object-fit: cover; }

/* --kz-trust-count (set inline by front-page.php, 1-4) replaces the fixed
   repeat(4, ...) so fewer than 4 configured items spread evenly across the
   row instead of sitting left-aligned with a dead slot on the right —
   same fix, direct feedback (17 Oct 2026). The ≤860px breakpoint below
   still forces a literal 2 columns, unaffected by this variable. */
.kz-values { display: grid; grid-template-columns: repeat(var(--kz-trust-count, 4), minmax(0, 1fr)); gap: 16px; padding-top: 18px; padding-bottom: 18px; }
.kz-value { display: flex; align-items: center; gap: 12px; }
.kz-value svg { width: 24px; height: 24px; flex: none; color: var(--kz-jamun); stroke-width: 1.5; }
.kz-value b { display: block; font-size: 13px; font-weight: 600; line-height: 1.25; }
.kz-value span { display: block; font-size: 12px; color: var(--kz-muted); line-height: 1.3; }

.kz-ft { background: var(--kz-jamun); color: var(--kz-ivory); }
.kz-ft a { color: rgba(244,240,232,.82); transition: color .2s; }
.kz-ft a:hover { color: var(--kz-gold); }
.kz-ft__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 36px; padding-top: 34px; padding-bottom: 26px; }
.kz-ft__bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 14px 0; border-top: 1px solid rgba(244,240,232,.16); font-size: 11.5px; color: rgba(244,240,232,.7); }
.kz-social { display: flex; gap: 8px; }
.kz-social a { width: 32px; height: 32px; border: 1px solid rgba(244,240,232,.3); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.kz-social a:hover { border-color: var(--kz-gold); }
.kz-social svg { width: 16px; height: 16px; stroke-width: 1.7; }

/* Site-wide floating WhatsApp button (17 Oct 2026, footer.php). Fixed to
   the viewport corner on every page it renders on — never product pages
   or checkout (see footer.php's own comment on why). Real WhatsApp brand
   green (#25D366), not --kz-emerald — same reasoning as the Swapot
   reference project's own floating button: this is a recognised
   third-party brand mark, not a Kinzé UI element, so recognition depends
   on the colour matching WhatsApp's own. */
.kz-wa-float { position: fixed; right: 20px; bottom: 20px; width: 52px; height: 52px; border-radius: 50%; background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0,0,0,.22); z-index: 45; transition: transform .2s, box-shadow .2s; }
.kz-wa-float:hover { transform: scale(1.06); box-shadow: 0 6px 20px rgba(0,0,0,.28); }
.kz-wa-float svg { width: 28px; height: 28px; }
@media (max-width: 600px) {
  .kz-wa-float { right: 14px; bottom: 14px; width: 46px; height: 46px; }
  .kz-wa-float svg { width: 23px; height: 23px; }
}

.kz-pdp { display: grid; grid-template-columns: minmax(0, 450px) minmax(0, 500px); justify-content: center; gap: 48px; align-items: start; }
.kz-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 12px 14px; background: var(--kz-ivory); font-size: 11.5px; line-height: 1.4; color: var(--kz-muted); }
.kz-trio div { display: flex; gap: 8px; align-items: flex-start; }
.kz-trio svg { width: 18px; height: 18px; flex: none; color: var(--kz-ink); stroke-width: 1.6; margin-top: 1px; }
.kz-trio strong { display: block; color: var(--kz-ink); font-weight: 600; font-size: 12px; }
.kz-dotc { display: inline-block; width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(0,0,0,.14); flex: none; }

@media (max-width: 1100px) {
  .kz-search { display: none; }
  .kz-search-ic { display: inline-flex; }
  .kz-hero { height: 380px; }
  .kz-hero__copy .kz-display { font-size: 32px; }
  .kz-closing { height: 280px; }
  .kz-closing__copy .kz-display { font-size: 27px; }
  .kz-values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kz-ft__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kz-pdp { grid-template-columns: minmax(0, 1fr); }
}

/* =====================================================================
   v3: responsive behaviour of the v2 components (tablet <= 860, mobile <= 600)
   ===================================================================== */
.kz-hd__l { display: none; }
.kz-hd__logo img { width: 112px; height: auto; }
.kz-hscroll { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.kz-hscroll::-webkit-scrollbar { display: none; }
.kz-brand { display: grid; grid-template-columns: 170px minmax(0, 1fr) 250px; gap: 36px; align-items: stretch; }
/* Square + rounded (17 Oct 2026, matches the card/gallery/banner modernization
   elsewhere this pass) — was stretched to match the row's height via
   align-items:stretch, which on a narrow fixed-width column made the photo
   read as an oddly tall, narrow strip (worst on phone, where the text
   column wraps to more lines and stretches the row taller still).
   align-self:center opts this one column out of that stretch so
   aspect-ratio can size it from its own width instead. */
.kz-brand__im { position: relative; align-self: center; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; }
.kz-brand__im img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kz-brand__facts { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 28px 0 28px 32px; border-left: 1px solid rgba(244,240,232,.18); }
.kz-promo2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.kz-gal { display: flex; gap: 10px; align-items: flex-start; }
.kz-gal__thumbs { display: flex; flex-direction: column; gap: 8px; flex: none; }
.kz-gal__thumb { display: block; width: 56px; height: 56px; border-radius: 6px; overflow: hidden; background: var(--kz-sand); outline-offset: 2px; }
.kz-gal__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; }
.kz-gal__main { position: relative; width: 384px; height: 384px; border-radius: 8px; overflow: hidden; background: var(--kz-sand); flex: none; }
.kz-gal__main > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; }
.kz-gal__nav { position: absolute; top: 50%; margin-top: -16px; width: 32px; height: 32px; border-radius: 50%; background: rgba(251,249,245,.9); }
.kz-gal__count { position: absolute; right: 10px; bottom: 10px; background: rgba(251,249,245,.92); font-size: 11.5px; font-weight: 600; padding: 4px 8px; }
.kz-stickybar { display: none; }

@media (max-width: 860px) {
  .kz-hd__row { grid-template-columns: 1fr auto 1fr; column-gap: 8px; height: 56px; }
  .kz-hd__l { display: flex; align-items: center; margin-left: -8px; }
  .kz-hd__tools { justify-content: flex-end; margin-right: -8px; }
  .kz-hd__tools .kz-search-ic { display: none; }
  .kz-hd__l .kz-search-ic { display: inline-flex; }
  .kz-hd__logo img { width: 100px; }
  .kz-hero { height: 340px; }
  .kz-hero__copy { left: 24px; right: 24px; bottom: 24px; max-width: 420px; }
  .kz-hero__copy .kz-display { font-size: 28px; }
  .kz-closing { height: 240px; }
  .kz-closing__copy { left: 24px; right: 24px; bottom: 24px; max-width: 420px; }
  .kz-closing__copy .kz-display { font-size: 24px; }
  .kz-shop-banner { padding: 38px 0 34px; }
  .kz-shop-banner--image { height: 190px; }
  .kz-catrail-band { padding: 28px 0; }
  .kz-catrail { justify-content: flex-start; gap: 22px; }
  .kz-catrail__item { width: 90px; }
  .kz-catrail__im { width: 80px; height: 80px; }
  .kz-promo2 { gap: 12px; }
  .kz-promo { grid-template-columns: minmax(0, 1fr) 130px; min-height: 200px; }
  .kz-promo__text { padding: 20px 18px; }
  .kz-brand { grid-template-columns: 150px minmax(0, 1fr); gap: 20px 24px; }
  .kz-brand__facts { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: 10px 22px; padding: 14px 0 22px; border-left: 0; border-top: 1px solid rgba(244,240,232,.18); }
  .kz-ft__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; }
  .kz-ft__grid > :first-child, .kz-ft__grid > :last-child { grid-column: 1 / -1; }
  .kz-pdp { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .kz-gal { flex-direction: column; align-items: stretch; gap: 8px; }
  .kz-gal__main { width: 100%; height: auto; aspect-ratio: 1 / 1; max-width: 560px; margin: 0 auto; }
  .kz-gal__thumbs { flex-direction: row; justify-content: center; order: 2; }
  .kz-stickybar { display: flex; position: sticky; bottom: 0; z-index: 8; gap: 8px; padding: 10px 16px; background: rgba(251,249,245,.97); border-top: 1px solid var(--kz-line); }
  .kz-pdp-buy { display: none !important; }
}
@media (max-width: 600px) {
  .kz-hd__row { height: 52px; }
  .kz-bar { font-size: 11px; gap: 16px; }
  .kz-hero { height: 380px; }
  .kz-hero__copy { left: 20px; right: 20px; bottom: 22px; max-width: none; gap: 10px; }
  .kz-hero__copy .kz-display { font-size: 25px; }
  .kz-closing { height: 220px; }
  .kz-closing__copy { left: 20px; right: 20px; bottom: 22px; max-width: none; }
  .kz-closing__copy .kz-display { font-size: 22px; }
  .kz-hero__copy p { max-width: none; }
  .kz-shop-banner { padding: 30px 0 26px; }
  .kz-shop-banner--image { height: 160px; }
  .kz-catrail-band { padding: 22px 0; }
  .kz-catrail { gap: 16px; }
  .kz-catrail__item { width: 82px; }
  .kz-catrail__im { width: 72px; height: 72px; }
  .kz-catrail__name { font-size: 12.5px; }
  .kz-card__meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .kz-sec { padding-top: 32px; padding-bottom: 8px; }
  .kz-promo2 { grid-template-columns: minmax(0, 1fr); }
  .kz-promo { grid-template-columns: minmax(0, 1fr) 132px; min-height: 176px; }
  .kz-promo__text { padding: 18px 16px; }
  .kz-promo__text .kz-h2 { font-size: 18px; }
  .kz-values { gap: 14px 12px; }
  .kz-value { gap: 8px; }
  .kz-trio { gap: 8px; padding: 12px 10px; }
  .kz-trio div { flex-direction: column; gap: 4px; }
  .kz-value svg { width: 22px; height: 22px; }
  .kz-brand { grid-template-columns: 116px minmax(0, 1fr); gap: 14px 16px; }
  .kz-ft__bar { flex-direction: column; align-items: flex-start; gap: 6px; }
  .kz-gal__main { max-width: none; }
}

.kz-cartrow { display: grid; grid-template-columns: 1fr 150px 120px; gap: 24px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--kz-line); }
/* Compact order-item thumbnail — cart/checkout summary rows, the "Added to
   bag" popover, and cross-sells (17 Oct 2026, matches the rounded-square
   card media used everywhere else). These render WooCommerce's own
   get_image('kinze-thumb') output (112x140 native) with no sizing of their
   own, so without this they show at that full native size. */
.kz-co-thumb { position: relative; flex: none; width: 48px; height: 48px; border-radius: 8px; overflow: hidden; }
.kz-co-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kz-addons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.kz-sumbar { display: none; background: var(--kz-ivory); border-bottom: 1px solid var(--kz-line); }
.kz-sumbar summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 24px; cursor: pointer; list-style: none; }
.kz-sumbar summary::-webkit-details-marker { display: none; }
.kz-sumbar__body { display: flex; flex-direction: column; gap: 10px; padding: 4px 24px 16px; }
@media (max-width: 860px) {
  .kz-cartrow { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; padding: 14px 0; }
  .kz-cartrow > :first-child { grid-column: 1 / -1; }
  .kz-addons { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kz-sumbar { display: block; }
}
@media (max-width: 600px) {
  .kz-addons { grid-template-columns: minmax(0, 1fr); }
  .kz-sumbar summary, .kz-sumbar__body { padding-left: 20px; padding-right: 20px; }
}

/* =========================================================
   SECTION 2 — WordPress-only mechanics for R3 Foundation
   (not in kz.css because the mockup is static, not interactive)
   ========================================================= */

/* kz.css never styles a selected .kz-dotc: on the PDP the selectable
   element is .kz-swatch (dot + label, already has .is-on), but the shop
   filter sidebar/sheet uses a bare dot with no label (02-shop.html,
   m4-filters.html) — a shape kz.css doesn't define an active state for.
   Reuses .kz-swatch's jamun-ring language rather than inventing a new one. */
.kz-dotc.is-on { box-shadow: 0 0 0 2px var(--kz-bg), 0 0 0 3px var(--kz-jamun); }

/* Mobile drawer (m2-menu): open/close + body-scroll-lock mechanics. The
   drawer's own content uses kz.css component classes (kz-search, link
   list styling, kz-social) — only the panel chrome is WP-specific. */
.kz-drawer {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--kz-bg);
  z-index: 999;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  visibility: hidden;
  transform: translateX(-100%);
  transition: transform .3s var(--kz-ease), visibility .3s;
}
.kz-drawer.is-open { visibility: visible; transform: translateX(0); }
/* The burger that opens this only exists ≤860px (kz-hd__l), so this range
   only needs a lower bound at 601px: tablet (601-860) gets a 420px side
   panel, phone (≤600) gets the full-screen sheet above (accepted deviation,
   BUILD-SPEC §11 item 13). */
@media (min-width: 601px) and (max-width: 860px) {
  .kz-drawer { width: 420px; left: auto; right: 0; transform: translateX(100%); }
}
.kz-drawer-close { color: var(--kz-ink); }
/* m2-menu's logo is a static img with an inline width; here the_custom_logo()
   stamps width/height from whatever file was uploaded, so without this the
   drawer logo renders at the uploaded file's raw pixel size instead of a
   consistent 100px. */
.kz-drawer img.custom-logo { width: 100px; height: auto; }

/* Search overlay for the <1100px icon-triggered bar (desktop ≥1100px uses
   the persistent .kz-search pill instead and never opens this). */
.kz-search-overlay {
  background: var(--kz-bg);
  border-bottom: 1px solid var(--kz-line);
  display: none;
}
.kz-search-overlay.is-open { display: block; }

/* Progressive enhancement: variable-product add-to-cart (PDP, R3-4 scope
   but the no-js/js toggle itself is a site-wide Foundation mechanism). */
.no-js .js-only { display: none; }

body:not(.no-js) .kz-hd__logo { /* no-op placeholder kept for specificity parity; logo has no JS-only state */ }

/* =========================================================
   SECTION 3 — WordPress additions for pages NOT YET reworked
   for R3 (shop/archive = R3-3, product = R3-4). Kept verbatim
   from the prior build so those pages keep working until their
   phase lands; delete each block once its template is reworked.
   ========================================================= */

/* .kz-products is a JS hook only (load-more, assets/js/theme.js) — layout
   comes entirely from the .kz-grid class alongside it. */

.kz-filter-sheet-backdrop { position: fixed; inset: 0; background: rgba(30,26,24,.48); z-index: 1000; display: none; }
.kz-filter-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; top: 64px;
  background: var(--kz-bg); border-radius: 14px 14px 0 0; z-index: 1001;
  display: none; flex-direction: column; transform: translateY(100%);
  transition: transform .3s var(--kz-ease);
}
.kz-filter-sheet-backdrop.is-open, .kz-filter-sheet.is-open { display: flex; }
.kz-filter-sheet-backdrop.is-open { display: block; }
.kz-filter-sheet.is-open { transform: translateY(0); }

/* Mini-cart drawer (new, not in any mockup — see docs/CHANGELOG.md): replaces
   the old auto-dismissing .kz-added toast with a persistent slide-out panel,
   same open/close/backdrop/body-scroll-lock mechanics as .kz-drawer and
   .kz-filter-sheet above, just a third variant of the same pattern (side
   panel on tablet/desktop, bottom sheet on phone — lighter-touch than a
   full-screen takeover for a quick "it worked, here's your bag" moment). */
.kz-minicart-backdrop { position: fixed; inset: 0; background: rgba(30,26,24,.48); z-index: 980; display: none; }
.kz-minicart-backdrop.is-open { display: block; }
.kz-minicart {
  position: fixed; top: 0; right: 0; height: 100%; width: 100%; max-width: 420px;
  background: var(--kz-bg); z-index: 981; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .3s var(--kz-ease);
  box-shadow: -8px 0 24px rgba(30,26,24,.16);
}
.kz-minicart.is-open { transform: translateX(0); }
@media (max-width: 600px) {
  .kz-minicart {
    top: auto; bottom: 0; left: 0; right: 0; width: 100%; max-width: none;
    height: auto; max-height: 82vh; border-radius: 14px 14px 0 0;
    transform: translateY(100%);
  }
  .kz-minicart.is-open { transform: translateY(0); }
}

/* kz.css's .kz-acc__head has no built-in +/- icon (the mockup swaps SVG path
   data via JS state); the real site uses native <details> instead, with both
   icons always in the markup and toggled by the [open] attribute. */
.kz-acc-minus { display: none; }
details[open] > .kz-acc__head .kz-acc-plus { display: none; }
details[open] > .kz-acc__head .kz-acc-minus { display: inline-flex; }

.kz-pdp-js-only { display: none; }
.js .kz-pdp-js-only { display: block; }

/* Cart qty dec/inc buttons only work with JS (they auto-submit the form);
   the explicit "Update cart" button is the no-JS fallback, so it only
   needs to show when JS is off. */
.js .kz-cart-update-fallback { display: none; }
.kz-cart-qty-dec, .kz-cart-qty-inc { display: none; }
.js .kz-cart-qty-dec, .js .kz-cart-qty-inc { display: flex; }
.js .kz-variation-form-wrap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.kz-pdp-qty-input {
  width: 46px; text-align: center; border: none; background: none; font: inherit;
  font-weight: 600; font-variant-numeric: tabular-nums; -moz-appearance: textfield;
}
.kz-pdp-qty-input::-webkit-outer-spin-button, .kz-pdp-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.kz-cart-qty-input {
  width: 30px; text-align: center; border: none; background: none; font: inherit;
  font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; -moz-appearance: textfield;
}
.js .kz-cart-qty-input::-webkit-outer-spin-button, .js .kz-cart-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.kz-card__quick-sq {
  display: none; position: absolute; right: 10px; bottom: 10px; width: 36px; height: 36px;
  align-items: center; justify-content: center; background: var(--kz-bg); color: var(--kz-ink);
  border-radius: 50%; text-decoration: none; font-size: 20px; line-height: 1;
}
@media (max-width: 600px) { .kz-card__quick-sq { display: flex; } }