/* =========================================================================
   Elit Gastro — main stylesheet
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

:root {
  /* Brand recolor: all primary + secondary text is pure black; the gold
     accent (buttons, gradients, hover states, badges, icon highlights)
     is #f4c241. White / dark structural surfaces are preserved. */
  --ink: #000000;
  --ink-soft: #000000;
  --ink-line: #3a3a3a;
  --gold: #f4c241;
  --paper: #FFFFFF;
  --paper-tint: #fafaf7;
  --muted: #000000;

  --font-display: 'Bricolage Grotesque', ui-serif, Georgia, serif;
  --font-body: 'Manrope', ui-sans-serif, system-ui, sans-serif;

  --max: 1320px;
  --pad-x: clamp(20px, 4vw, 56px);
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

/* Topbar -------------------------------------------------------------- */
.topbar {
  background: var(--gold);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-bottom: 1px solid rgba(0,0,0,0.15);
}
.topbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 38px;
  gap: 24px;
}
.topbar .left, .topbar .right { display: flex; gap: 24px; align-items: center; }
.topbar a { opacity: 0.85; transition: opacity .2s, color .2s; }
.topbar a:hover { opacity: 1; color: var(--ink); text-decoration: underline; }
@media (max-width: 720px) { .topbar .right { display: none; } }

/* Topbar widget slot — hosts whatever the editor drops into the
   "Topbar — uz zastave (GTranslate)" sidebar in Appearance → Widgets.
   Inherits the yellow topbar palette (dark text on #f4c241) so plugin
   widgets (GTranslate dropdown, link list, etc.) blend in automatically. */
.topbar__widgets {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.topbar__widgets .widget {
  display: inline-flex;
  align-items: center;
  margin: 0;
  font-size: 13px;
}
.topbar__widgets .widget__title { display: none; }
.topbar__widgets a { color: var(--ink); }
.topbar__widgets a:hover { color: var(--ink); text-decoration: underline; }
/* GTranslate widget defaults — keep the flags small + tight. */
.topbar__widgets .gt_container--default,
.topbar__widgets .gtranslate_wrapper {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.topbar__widgets img,
.topbar__widgets .gflag {
  width: 18px !important;
  height: auto !important;
  border-radius: 2px;
  opacity: 0.85;
  transition: opacity .15s ease, transform .15s ease;
}
.topbar__widgets a:hover img,
.topbar__widgets img:hover,
.topbar__widgets .gflag:hover { opacity: 1; transform: translateY(-1px); }
.topbar__widgets select {
  background: transparent;
  color: var(--ink);
  border: 1px solid rgba(0,0,0,0.25);
  border-radius: 999px;
  padding: 4px 22px 4px 10px;
  font-size: 12px;
  font-family: inherit;
}
.topbar__widgets select option { color: var(--ink); background: var(--paper); }

/* Header -------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid #eee;
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 78px;
  gap: 32px;
}
.brand { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.brand img { height: 52px; width: auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-text .name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.brand-text .tag {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--muted);
  margin-top: 4px;
}

.nav-links {
  display: flex;
  /* Tighter horizontal gap so 5–6 top-level items fit on one row at
     typical widths. Was 32px — wraps with 5+ items + chevrons. */
  gap: 24px;
  list-style: none;
  align-items: center;
  margin: 0;
  padding: 0;
  /* Keep nav on one line; mega-menu still works regardless of where the
     trigger lands horizontally. If a site genuinely needs more items than
     fit, the mobile drawer breakpoint kicks in earlier. */
  flex-wrap: nowrap;
}
.nav-links > li > a { white-space: nowrap; }
/* Narrower-laptop fallback: shave gap further so 6 items fit at 1280px. */
@media (max-width: 1180px) {
  .nav-links { gap: 18px; }
  .nav-links a { font-size: 13.5px; }
}
.nav-links a {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  position: relative;
  padding: 6px 0;
  transition: color .2s;
}
/* Gold underline grow-on-hover, scoped to TOP-LEVEL items only so dropdown
   submenu links don't inherit the effect. */
.nav-links > li > a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--gold);
  transition: width .3s ease;
}
.nav-links > li > a:hover::after,
.nav-links > li.current-menu-item > a::after,
.nav-links > li.current-menu-ancestor > a::after { width: 100%; }

.nav-cta { display: flex; gap: 14px; align-items: center; }
.cart-btn, .menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 999px;
  transition: transform .2s, background .2s, color .2s;
}
.cart-btn { background: var(--ink); color: var(--paper); }
.cart-btn:hover { background: var(--gold); color: var(--ink); }
.cart-btn .count {
  background: var(--gold);
  color: var(--ink);
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 999px;
  font-weight: 700;
}
.cart-btn:hover .count { background: var(--ink); color: var(--gold); }

.menu-btn { display: none; }

/* Header — mobile responsive --------------------------------------- */
@media (max-width: 980px) {
  .nav { min-height: 64px; gap: 12px; }
  .primary-nav { display: none; }
  .nav-links { display: none; }
  .brand img { height: 40px; }
  /* The logo image already carries the wordmark visually — hide the
     duplicated text on mobile so the brand sits compact next to the
     hamburger + cart buttons. The text still renders in the footer and
     the mobile drawer for screen readers / accessibility. */
  .header .brand-text { display: none; }

  .menu-btn {
    display: inline-flex;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    background: var(--ink);
    border: 0;
    color: var(--paper);
    align-items: center;
    justify-content: center;
    transition: background .2s ease, transform .2s ease;
  }
  .menu-btn:hover, .menu-btn:focus-visible {
    background: var(--gold);
    color: var(--ink);
  }
  .menu-btn[aria-expanded="true"] {
    background: var(--gold);
    color: var(--ink);
  }

  .cart-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
    position: relative;
    gap: 0;
  }
  .cart-btn__label { display: none; }
  .cart-btn .count {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 10px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--paper);
  }
  .nav-cta { gap: 10px; }
}

@media (max-width: 420px) {
  .brand img { height: 36px; }
}

/* Mobile drawer ------------------------------------------------------- */
.mobile-drawer__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
  z-index: 59;
}
.mobile-drawer__backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

.mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 100%);
  background: var(--ink);
  color: var(--paper);
  z-index: 60;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .4s cubic-bezier(.65,0,.35,1);
  box-shadow: -10px 0 40px rgba(0,0,0,0);
  overflow-y: auto;
  visibility: hidden;
}
.mobile-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
  box-shadow: -10px 0 40px rgba(0,0,0,0.3);
}

.mobile-drawer__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px var(--pad-x);
  border-bottom: 1px solid var(--ink-line);
  flex-shrink: 0;
}
.mobile-drawer__brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--paper);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.mobile-drawer__brand img {
  height: 36px;
  width: auto;
}
.mobile-drawer__close {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
  background: transparent;
  color: var(--paper);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all .2s ease;
}
.mobile-drawer__close:hover, .mobile-drawer__close:focus-visible {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
}

.mobile-drawer__nav {
  flex: 1;
  padding: 16px var(--pad-x);
  overflow-y: auto;
}
.mobile-drawer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.mobile-drawer__list li {
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.mobile-drawer__list li:last-child {
  border-bottom: 0;
}
.mobile-drawer__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.02em;
  padding: 18px 0;
  color: var(--paper);
  transition: color .2s ease, padding-left .25s ease;
}
.mobile-drawer__list a::after {
  content: '→';
  color: rgba(255,255,255,0.3);
  font-size: 18px;
  transition: color .2s ease, transform .25s ease;
}
.mobile-drawer__list a:hover,
.mobile-drawer__list a:focus-visible,
.mobile-drawer__list .current-menu-item > a {
  color: var(--gold);
  padding-left: 6px;
}
.mobile-drawer__list a:hover::after,
.mobile-drawer__list a:focus-visible::after,
.mobile-drawer__list .current-menu-item > a::after {
  color: var(--gold);
  transform: translateX(4px);
}

.mobile-drawer__foot {
  padding: 24px var(--pad-x) max(24px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--ink-line);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: rgba(0,0,0,0.2);
}
.mobile-drawer__cart {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  background: var(--gold);
  color: var(--ink);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  align-self: flex-start;
  transition: transform .2s ease, box-shadow .2s ease;
}
.mobile-drawer__cart:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(244,194,65,0.3);
}
.mobile-drawer__cart .count {
  background: var(--ink);
  color: var(--gold);
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 999px;
  font-weight: 700;
  margin-left: 4px;
}
.mobile-drawer__contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mobile-drawer__contact a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  transition: color .2s ease;
}
.mobile-drawer__contact a:hover {
  color: var(--gold);
}
.mobile-drawer__contact svg {
  color: var(--gold);
  flex-shrink: 0;
}

/* Lock body scroll when drawer is open */
body.menu-open {
  overflow: hidden;
}

/* Hero ----------------------------------------------------------------
   Stacked layout: a short full-bleed banner image on top, then all the
   hero copy (eyebrow / title / sub / CTAs) below it in normal flow on
   the white page background. (Was previously a full-viewport image with
   white text overlaid.) */
.hero {
  position: relative;
  /* Yellow content band: the image block sits opaque at the top, the
     copy area below shows this background through (.hero-content is
     transparent) — so the yellow runs full-bleed edge to edge. */
  background: var(--gold);
}
.hero-img {
  display: block;
  width: 100%;
  height: clamp(240px, 32vw, 400px);
  object-fit: cover;
}
/* The dark gradient overlay only existed to keep white text readable on
   top of the image — content no longer sits on the image, so it's gone. */
.hero-grain { display: none; }
.hero-content {
  position: relative;
  z-index: 2;
  padding: clamp(32px, 4vw, 56px) 0;
  width: 100%;
  color: var(--ink);
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 18px;
  opacity: 0;
  animation: fadeUp .9s ease .2s forwards;
}
.hero-eyebrow .dot {
  width: 8px; height: 8px;
  background: var(--ink);
  border-radius: 50%;
  animation: pulse 2s ease infinite;
}
/* Smaller, wider hero copy: the title no longer wraps to a tall narrow
   block — it runs across most of the container width at a more modest
   size now that it sits below the image rather than dominating a
   full-viewport hero. */
.hero-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(30px, 4vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  max-width: 38ch;
  margin-bottom: 18px;
  opacity: 0;
  animation: fadeUp .9s ease .4s forwards;
}
.hero-sub {
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.55;
  max-width: 80ch;
  color: rgba(0,0,0,0.7);
  font-weight: 400;
  margin-bottom: 28px;
  opacity: 0;
  animation: fadeUp .9s ease .6s forwards;
}
.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  opacity: 0;
  animation: fadeUp .9s ease .8s forwards;
}

/* Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  transition: all .25s ease;
  cursor: pointer;
  border: 0;
}
/* Primary button — solid black with white text. Hover KEEPS the black
   fill (a white-flip disappeared against the off-white CTA band) — the
   feedback is a lift + shadow, same pattern as .section-link. */
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover {
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0,0,0,0.28);
}
/* Ghost button — used in the hero and CTA band, both of which sit on
   light backgrounds now, so the default is dark text + dark hairline
   border. Hover fills ink + lift + shadow (matches the section-link /
   primary-button hover language). */
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid rgba(0,0,0,0.3);
}
.btn-ghost:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0,0,0,0.28);
}
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { background: var(--gold); color: var(--ink); }
.btn .arrow { transition: transform .25s ease; }
.btn:hover .arrow { transform: translateX(4px); }

/* Sections ------------------------------------------------------------ */
.section { padding: clamp(80px, 9vw, 140px) 0; }
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 64px;
  gap: 32px;
  flex-wrap: wrap;
}
.section-eyebrow {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--ink);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.section-eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--ink);
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  max-width: 18ch;
}
/* Section "view all" link — solid black pill so it reads as a real
   button against the white section heads, gold on hover. */
.section-link {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 999px;
  transition: gap .25s, transform .25s, box-shadow .25s;
}
/* Hover keeps the black fill — it must stay visible on BOTH the white
   section heads AND the yellow featured-products band. A gold hover
   state disappeared against the yellow background, so feedback is a
   lift + shadow + the arrow nudge instead of a colour flip. */
.section-link:hover {
  gap: 14px;
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0,0,0,0.28);
}

/* ====================================================================
   Category card — visually consistent with .product (white card, top media
   area + body, same border + hover lift). Used on the homepage Kategorije
   section and inherited by WooCommerce subcategory cards on the shop
   archive (li.product.product-category — see overrides further down).

   Structure mirrors the product card:
     .cat-card                  ← clickable card (a tag)
       .cat-card__media         ← 4:3 white box; centred icon OR image
         <svg> / <img>
       .cat-card__body
         .cat-card__name
         .cat-card__count
   ==================================================================== */
.cats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
/* Mobile keeps 2 columns on purpose so the row reads like a compact menu
   of categories rather than a single tall stack. Card gap tightens at
   narrow widths so the labels stay legible without overflowing. */
@media (max-width: 980px) { .cats-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (max-width: 380px) { .cats-grid { gap: 10px; } }

.cat-card {
  background: var(--paper);
  border: 1px solid #f0f0f0;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  text-decoration: none;
  height: 100%;
  transition: border-color .2s ease, box-shadow .3s ease, transform .25s ease;
}
.cat-card:hover {
  border-color: #d6d6d6;
  box-shadow: 0 14px 36px rgba(0,0,0,0.05);
  transform: translateY(-2px);
}

/* Media area — same 4:3 ratio as product cards. Sits flush at the top
   of the card with a thin separator line below. */
.cat-card__media {
  aspect-ratio: 4 / 3;
  background: var(--paper);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #f5f5f5;
  overflow: hidden;
}
.cat-card__media svg {
  /* Icons claim ~50% of the media box now (was ~30%) so the category
     graphic is the dominant element of the card, not a footnote. */
  width: 50%;
  height: 50%;
  max-width: 120px;
  max-height: 120px;
  color: var(--ink);
  transition: color .35s ease, transform .35s ease;
}
.cat-card:hover .cat-card__media svg {
  color: var(--gold);
  transform: scale(1.08);
}
/* Editor-uploaded category thumbnail (WC archive case) — fill the box
   with contain so the whole product photo is visible, no cropping. */
.cat-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 14px;
  transition: transform .4s ease;
}
.cat-card:hover .cat-card__media img { transform: scale(1.03); }

.cat-card__body {
  padding: 16px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.cat-card__name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.cat-card__count {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
}

/* Featured products --------------------------------------------------- */
/* Featured products band — yellow (#f4c241) section with dark text. The
   product cards inside stay white (set further down) so they read as a
   curated catalogue floating on the brand colour. */
.featured { background: var(--gold); color: var(--ink); }
.featured .section-eyebrow { color: var(--ink); }
.featured .section-eyebrow::before { background: var(--ink); }
.featured .section-title { color: var(--ink); }
/* .section-link is a solid black pill — it reads fine on the yellow
   featured band without any override. */

.products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
/* Mobile keeps 2 columns to match the categories grid above and the WC
   archive grid below — one consistent rhythm. Gap tightens with width. */
@media (max-width: 980px) { .products-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (max-width: 380px) { .products-grid { gap: 10px; } }

/* ====================================================================
   Product card — LIGHT default (shop archive, search, related, my account).
   Dark variant scoped to .featured lives further down.

   IMPORTANT: card styles are anchored to `a.product` ONLY — never to
   `li.product` and never to the bare `.product` selector. Reasons:

     1. WC's content-product.php emits <li class="product"><a class="product">…</a></li>.
        Styling both produces a stacked / nested-frame effect.
     2. WC's content-single-product.php wraps the entire single-product page
        in <div class="product">. A bare `.product` selector would leak
        card border + hover transform onto the whole detail page.

   The <li> stays unstyled (it's just the grid cell from .products /
   .products-grid). All visual treatment lives on <a class="product">.
   ==================================================================== */

/* Reset the list item — let the grid container own layout, the <a> own visuals. */
li.product {
  list-style: none;
  padding: 0;
  margin: 0;
}

a.product {
  background: var(--paper);
  border: 1px solid #f0f0f0;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  /*
    Cards in a grid row should all match the row's height. The grid
    container stretches each <li class="product"> via the default
    `align-items: stretch`, but the inner <a class="product"> would
    otherwise be content-sized and leave dead space at the bottom of
    its <li>. height: 100% fills the cell; combined with .product-body
    { flex: 1 } and .product-name { flex: 1 } below, the price row
    always lands at the same vertical line across the row.
  */
  height: 100%;
  transition: border-color .2s ease, box-shadow .3s ease;
}
a.product:hover {
  border-color: #d6d6d6;
  box-shadow: 0 14px 36px rgba(0,0,0,0.05);
}

.product-media {
  /* Square media area gives images much more visual weight than the
     previous 4:3 box. Combined with the tighter padding below, product
     photos read as the hero element of the card. */
  aspect-ratio: 1 / 1;
  background: var(--paper);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Tight 4 px inset — product photo fills almost the entire square,
     reading as the hero element of the card. */
  padding: 4px;
  transition: transform .6s ease, opacity .35s ease;
}
a.product:hover .product-media img { transform: scale(1.03); }

/* Second image swap-in on hover.
   When `<img class="product-media__alt">` is present (rendered by our
   content-product.php override only when the WC product has at least
   one gallery image), it sits absolutely ON TOP of the primary thumbnail
   at opacity 0. Hovering the card fades the alt in — it fully covers the
   primary underneath, so we don't need to (and must not) fade the primary
   out. If we did, products without a gallery would flash to a blank media
   box on hover. With the alt simply not rendered for those products, the
   primary stays visible at all times and no second image flicker happens.

   .product-media__primary keeps its identity class for any future styling,
   but no opacity hook is attached. */
.product-media__alt {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
a.product:hover .product-media__alt,
a.product:focus-visible .product-media__alt { opacity: 1; }

.product-media svg {
  width: 42%;
  height: 42%;
  color: #c4c4c4;
  transition: color .3s ease, transform .4s ease;
}
a.product:hover .product-media svg { color: var(--gold); transform: scale(1.04); }

/* Badges (top-left of media) ---------------------------------------- */
.product-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--gold);
  color: var(--ink);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  z-index: 2;
  line-height: 1.2;
}
.product-badge.new  { background: var(--gold); color: var(--ink); }
.product-badge.sale { background: var(--ink);  color: var(--paper); }

/* Body --------------------------------------------------------------- */
.product-body {
  padding: 10px 11px 11px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 10px;
}
.product-cat {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  font-weight: 600;
}
.product-cat a { color: inherit; }
.product-name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
  flex: 1;
  /* Cap to 2 lines so cards in a grid stay vertically aligned. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Price + (legacy) add row. The add button is hidden — the whole card is
   the click target and the button felt redundant. To bring it back:
   remove the `.product-add { display: none }` rule below. */
.product-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-top: 4px;
}
.product-price {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
}
.product-price ins { background: transparent; text-decoration: none; }
.product-price del { color: var(--muted); font-size: 14px; margin-right: 8px; }
.product-price.quote {
  color: var(--muted);
  font-size: 13px;
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.product-add { display: none; }

/* ===========================================================
   Inquiry button — shown for products with no price set.
   Renders below the product card (featured grid) or replaces the
   add-to-cart link (shop archive / single product page). Visual
   matches the brand: ink pill with paper text, gold on hover.
   =========================================================== */
.product-cell { display: flex; flex-direction: column; gap: 10px; }
.product-cell > a.product { flex: 1; }
.product-inquiry-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.product-inquiry-btn:hover,
.product-inquiry-btn:focus-visible {
  background: var(--gold);
  color: var(--ink);
  transform: translateY(-1px);
}
.product-inquiry-btn svg { transition: transform .2s ease; }
.product-inquiry-btn:hover svg { transform: translateX(2px); }

/* Inside a WC li.product card, the inquiry button replaces the default
   add-to-cart link via the woocommerce_loop_add_to_cart_link filter. WC
   wraps the loop button area in a <p class="woocommerce-loop"> margin —
   undo it for our pill button so spacing matches the rest of the card. */
.woocommerce ul.products li.product .product-inquiry-btn {
  margin: 0 14px 14px;
  align-self: stretch;
}

/* ===========================================================
   Featured section — light/white card variant (homepage only).
   Featured cards render as <a class="product"> (no <li>). They use the
   same paper/ink/gold treatment as the rest of the product cards on
   the site so the homepage section reads as a curated catalogue, not
   a dark spotlight. The dark `.featured { background: var(--ink) }`
   section background is kept so the cards visually float on the dark
   band — the gold price + section header still register.
   =========================================================== */
.featured a.product {
  background: var(--paper);
  border-color: #f0f0f0;
  color: var(--ink);
}
.featured a.product:hover {
  border-color: #d6d6d6;
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}
.featured .product-media { background: var(--paper); }
.featured .product-media svg { color: #c4c4c4; }
.featured a.product:hover .product-media svg { color: var(--gold); }
.featured .product-cat { color: var(--muted); }
.featured .product-name { color: var(--ink); }
.featured .product-price { color: var(--ink); }
.featured .product-price del { color: var(--muted); }
.featured .product-price.quote { color: var(--muted); }

/* Blog / News --------------------------------------------------------- */
.blog-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: end;
  margin-bottom: 72px;
}
@media (max-width: 860px) { .blog-head { grid-template-columns: 1fr; gap: 24px; } }
.blog-head p { font-size: 16px; color: #000; line-height: 1.7; max-width: 48ch; }

.blog-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 28px;
}
@media (max-width: 980px) {
  .blog-grid { grid-template-columns: 1fr 1fr; }
  .blog-grid article:first-child { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .blog-grid { grid-template-columns: 1fr; }
  .blog-grid article:first-child { grid-column: auto; }
}

.post { display: flex; flex-direction: column; transition: transform .3s ease; }
.post:hover { transform: translateY(-4px); }

.post-media {
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  margin-bottom: 20px;
  background: linear-gradient(135deg, #2a2a2a, #1a1a1a);
}
.post:first-child .post-media { aspect-ratio: 16 / 11; }
.post-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.post:hover .post-media img { transform: scale(1.05); }
.post-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(244,194,65,0.15), transparent 60%);
  mix-blend-mode: overlay;
  pointer-events: none;
}
.post-media .ph-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.25);
}
.post-media .ph-icon svg { width: 64px; height: 64px; }

.post-meta {
  display: flex;
  gap: 14px;
  align-items: center;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  margin-bottom: 14px;
  font-weight: 600;
}
.post-tag {
  color: var(--ink);
  background: var(--gold);
  padding: 4px 10px;
  border-radius: 3px;
  font-weight: 700;
}
.post-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin-bottom: 12px;
  transition: color .25s;
  color: var(--ink);
}
.post:first-child .post-title { font-size: 28px; }
.post:hover .post-title { color: var(--gold); }
.post-excerpt { font-size: 14px; color: #000; line-height: 1.6; }

/* CTA band ------------------------------------------------------------ */
.cta-band {
  background: var(--paper-tint);
  color: var(--ink);
  padding: clamp(60px, 8vw, 100px) 0;
  position: relative;
  border-top: 1px solid #ececec;
  overflow: hidden;
}
.cta-band .container {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  align-items: center;
  gap: 48px;
  position: relative;
}
@media (max-width: 860px) { .cta-band .container { grid-template-columns: 1fr; } }
.cta-band h2 {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
}
.cta-band .cta-actions {
  display: flex;
  gap: 16px;
  justify-self: end;
  flex-wrap: wrap;
}
@media (max-width: 860px) { .cta-band .cta-actions { justify-self: start; } }
/* CTA band primary button uses the same hover language as everything
   else — keeps the black fill, lifts, shadows. The old white-flip
   nearly vanished against the off-white CTA band background.
   .btn-ghost base rule already covers the light-background case. */
.cta-band .btn-primary { background: var(--ink); color: var(--paper); }
.cta-band .btn-primary:hover {
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0,0,0,0.28);
}

/* Footer --------------------------------------------------------------
   Yellow (#f4c241) brand panel — all text flips to ink/black, dividers
   become low-opacity black. The dark-background colour set the footer
   used before is replaced wholesale here. */
.footer { background: var(--gold); color: var(--ink); padding: 80px 0 32px; font-weight: 600; }
.foot-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(0,0,0,0.15);
}
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 40px; } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; } }

.foot-brand .brand-text .name { color: var(--ink); }
.foot-brand .brand-text .tag { color: rgba(0,0,0,0.6); }
.foot-brand p {
  color: rgba(0,0,0,0.75);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
  margin: 20px 0 24px;
  max-width: 38ch;
}
.foot-brand .contact { font-size: 14px; font-weight: 600; color: rgba(0,0,0,0.9); line-height: 1.9; }
.foot-brand .contact a:hover { color: var(--ink); text-decoration: underline; }

.foot-col h4 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ink);
  font-weight: 700;
  margin-bottom: 22px;
}
.foot-col ul { list-style: none; margin: 0; padding: 0; }
.foot-col li { margin-bottom: 12px; }
.foot-col a {
  font-size: 14px;
  font-weight: 600;
  color: rgba(0,0,0,0.78);
  transition: color .2s, padding-left .2s;
}
.foot-col a:hover { color: var(--ink); padding-left: 4px; }

.foot-legal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 28px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(0,0,0,0.7);
  gap: 24px;
  flex-wrap: wrap;
}
.foot-legal .links { display: flex; gap: 24px; }
.foot-legal a:hover { color: var(--ink); text-decoration: underline; }

/* Generic page header / content (used by page, single, archive) ------- */
/* Archive banner (blog, category, tag, author, search) — yellow brand
   block with dark text, matching .post-hero. */
.page-header {
  background: var(--gold);
  padding: clamp(72px, 9vw, 130px) 0 clamp(40px, 5vw, 64px);
  border-bottom: 1px solid rgba(0,0,0,0.15);
}
.page-header .eyebrow {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--ink);
  font-weight: 700;
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 18px;
}
.page-header .eyebrow::before { content:''; width: 28px; height: 1px; background: var(--ink); }
.page-header h1 {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
}
.page-header p { color: #000; max-width: 60ch; margin-top: 16px; line-height: 1.7; }

.entry-content {
  padding: clamp(48px, 6vw, 96px) var(--pad-x);
  max-width: calc(820px + (var(--pad-x) * 2));
  margin: 0 auto;
  font-size: 17px;
  line-height: 1.7;
  color: #000;
}
.entry-content > * + * { margin-top: 1.1em; }
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-top: 1.6em;
}
.entry-content h2 { font-size: clamp(28px, 3.4vw, 40px); }
.entry-content h3 { font-size: clamp(22px, 2.6vw, 28px); }
.entry-content a { color: var(--ink); border-bottom: 1px solid var(--gold); transition: color .2s; }
.entry-content a:hover { color: var(--gold); }
.entry-content blockquote {
  border-left: 3px solid var(--gold);
  padding: 8px 0 8px 24px;
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.4;
  font-style: italic;
}
.entry-content img { border-radius: 8px; margin: 1.5em 0; }
.entry-content ul, .entry-content ol { padding-left: 1.4em; }

/* Pagination ---------------------------------------------------------- */
.pagination {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin: 48px 0;
}
.pagination a, .pagination span {
  padding: 10px 16px;
  border: 1px solid #e5e5e5;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  transition: all .2s;
}
.pagination a:hover, .pagination .current {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}

/* WooCommerce overrides ---------------------------------------------- */
.wc-wrap { padding: clamp(40px, 6vw, 80px) 0; }
.wc-content { display: block; }

.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr);
  /* Tight 12px gutter at desktop — cards sit close so the 6-column grid
     reads as one dense product wall. Tablet/mobile breakpoints below
     loosen this back up where 2–4 cols need a bit more breathing room. */
  gap: 12px;
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
}
/* WC's woocommerce-layout.css adds ::before / ::after pseudo-elements on
   ul.products as a clearfix for its legacy float layout. Those pseudos count
   as grid items on a `display: grid` container, which pushes every product
   one cell to the right and orphans the bottom-right card onto a new row.
   Neutralise them so the grid auto-fills from cell 1. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after { display: none !important; }

/* Reset WC's float-based layout (we use grid via .woocommerce ul.products)
   AND set the white card background in one block. The inner .product-media
   inherits the same white so the image area is edge-to-edge consistent. */
.woocommerce ul.products li.product {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  background: var(--paper);
}
.woocommerce ul.products li.product .product-media { background: var(--paper); }
.woocommerce ul.products li.product .product-media img {
  margin: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
}
/* Drop WC's `1px solid #f2f2f2` outline on the placeholder image. */
.woocommerce ul.products li.product .woocommerce-placeholder { border: 0; }

/* Shop archive responsive ladder. Desktop is 6 columns; we ease down so
   cards stay tappable on smaller widths without ever collapsing to a
   single column. Sidebar-on layouts run narrower in the main column so
   they re-use the same ladder one step down (see .shop-page--with-filters
   override below). */
@media (max-width: 1280px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products { grid-template-columns: repeat(5, 1fr) !important; }
}
@media (max-width: 1080px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products { grid-template-columns: repeat(4, 1fr) !important; }
}
@media (max-width: 860px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products { grid-template-columns: repeat(3, 1fr) !important; gap: 12px !important; }
}
@media (max-width: 640px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
}
@media (max-width: 380px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products { gap: 10px !important; }
}

/* When the sidebar IS shown the main column is narrower — drop one step
   off the column count so cards aren't crushed. */
@media (min-width: 981px) {
  .shop-page--with-filters .woocommerce ul.products,
  .shop-page--with-filters .woocommerce-page ul.products { grid-template-columns: repeat(4, 1fr) !important; }
}
@media (min-width: 1280px) {
  .shop-page--with-filters .woocommerce ul.products,
  .shop-page--with-filters .woocommerce-page ul.products { grid-template-columns: repeat(5, 1fr) !important; }
}

/* (Cards now use the light default defined earlier — no per-archive override needed) */

.woocommerce-result-count { color: var(--muted); font-size: 14px; }
.woocommerce-ordering select {
  border: 1px solid #ddd; padding: 10px 14px; border-radius: 999px;
  background: var(--paper); font-family: inherit; font-size: 14px;
}

/* WC button reset to theme button */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page a.button,
.woocommerce-page button.button {
  background: var(--ink) !important;
  color: var(--paper) !important;
  border-radius: 999px !important;
  padding: 14px 24px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  border: 0 !important;
  transition: all .2s ease !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce-page a.button:hover {
  background: var(--gold) !important;
  color: var(--ink) !important;
}
.woocommerce a.button.alt,
.woocommerce button.button.alt {
  background: var(--gold) !important;
  color: var(--ink) !important;
}
.woocommerce a.button.alt:hover { background: var(--ink) !important; color: var(--paper) !important; }

/* =====================================================================
   Single product page
   ===================================================================== */

/* Breadcrumb (woocommerce_breadcrumb, hooked to woocommerce_before_main_content) */
.single-product .woocommerce-breadcrumb {
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.02em;
  margin: 0 0 clamp(20px, 3vw, 36px);
}
.single-product .woocommerce-breadcrumb a {
  color: var(--ink);
  transition: color .2s ease;
}
.single-product .woocommerce-breadcrumb a:hover { color: var(--gold); }

/* Two-column main layout — override WC's default float layout.
   WC's content-single-product.php drops gallery, summary, tabs, and related
   products as direct children of div.product, so we explicitly assign the
   first row (gallery + summary) and force every later block onto a full-width
   row of its own. */
.single-product div.product {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  column-gap: clamp(32px, 5vw, 72px);
  row-gap: clamp(48px, 6vw, 88px);
  align-items: start;
}
.single-product div.product::before,
.single-product div.product::after { display: none; }
.single-product div.product > .woocommerce-tabs,
.single-product div.product > .woocommerce-product-gallery + .woocommerce-tabs,
.single-product div.product > .related,
.single-product div.product > .upsells,
.single-product div.product > .up-sells {
  grid-column: 1 / -1;
}
@media (max-width: 980px) {
  .single-product div.product { grid-template-columns: 1fr; column-gap: 0; row-gap: 32px; }
}

/* --- Gallery (left) ------------------------------------------------- */
.single-product div.product .woocommerce-product-gallery {
  position: relative;
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  border: 1px solid #ececec;
  border-radius: 14px;
  overflow: hidden;
  background: var(--paper-tint);
}
.single-product .woocommerce-product-gallery__image,
.single-product .woocommerce-product-gallery__image a {
  display: block;
  background: var(--paper-tint);
}
.single-product .woocommerce-product-gallery__image img {
  width: 100%;
  height: auto;
}
.single-product .woocommerce-product-gallery__trigger {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(255,255,255,0.94);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 18px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  z-index: 3;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.single-product .woocommerce-product-gallery__trigger:hover {
  background: var(--gold);
  color: var(--ink);
  transform: translateY(-1px);
}
.single-product .flex-control-thumbs {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
  gap: 8px;
  padding: 12px;
  margin: 0;
  list-style: none;
  background: var(--paper);
  border-top: 1px solid #ececec;
}
.single-product .flex-control-thumbs li {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  cursor: pointer;
}
.single-product .flex-control-thumbs img {
  border-radius: 6px;
  opacity: 0.6;
  transition: opacity .2s ease, box-shadow .2s ease;
}
.single-product .flex-control-thumbs img:hover,
.single-product .flex-control-thumbs img.flex-active {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--gold);
}

/* Sale flash inside the gallery */
.single-product div.product span.onsale {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  background: var(--ink);
  color: var(--gold);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  min-height: 0;
  line-height: 1.4;
  min-width: 0;
}

/* --- Summary (right) ----------------------------------------------- */
.single-product div.product .summary {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  padding: 4px 0 0;
}

/* Category eyebrow injected before the title (setup.php @ priority 4) */
.product-page__cats {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.product-page__cats a {
  color: var(--muted);
  transition: color .2s ease;
}
.product-page__cats a:hover { color: var(--gold); }

.single-product div.product .product_title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 4vw, 46px);
  letter-spacing: -0.025em;
  line-height: 1.08;
  color: var(--ink);
  margin: 0 0 16px;
}

.single-product .woocommerce-product-rating {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  font-size: 13px;
  color: var(--muted);
}
.single-product .woocommerce-product-rating .star-rating {
  font-size: 14px;
  color: var(--gold);
  margin: 0;
  letter-spacing: 2px;
}
.single-product .woocommerce-product-rating .woocommerce-review-link {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(0,0,0,0.2);
  transition: text-decoration-color .2s ease;
}
.single-product .woocommerce-product-rating .woocommerce-review-link:hover {
  text-decoration-color: var(--gold);
}

.single-product div.product .summary > .price {
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  font-size: clamp(28px, 3.6vw, 40px) !important;
  color: var(--ink) !important;
  margin: 0 0 24px !important;
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.single-product div.product .summary > .price del {
  color: var(--muted);
  font-size: 0.65em !important;
  opacity: 1;
}
.single-product div.product .summary > .price ins {
  background: transparent;
  color: var(--gold);
  text-decoration: none;
}

.single-product .woocommerce-product-details__short-description {
  color: #000;
  line-height: 1.7;
  font-size: 15px;
  margin: 0 0 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid #ececec;
}
.single-product .woocommerce-product-details__short-description p:last-child { margin-bottom: 0; }

.single-product .stock {
  display: inline-block;
  margin: 0 0 16px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.single-product .stock.in-stock { background: rgba(45,140,74,0.1); color: #2d8c4a; }
.single-product .stock.out-of-stock,
.single-product .stock.available-on-backorder { background: rgba(196,68,68,0.1); color: #c44; }

/* --- Variations (variable products) -------------------------------- */
.single-product .variations_form { margin: 0 0 24px; }
.single-product .variations {
  width: 100%;
  margin: 0 0 16px;
  border: 0;
  border-collapse: separate;
}
.single-product .variations tr { border: 0; }
.single-product .variations td {
  border: 0;
  padding: 8px 0;
  vertical-align: middle;
  background: transparent;
}
.single-product .variations td.label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  width: 120px;
  padding-right: 16px;
}
.single-product .variations td.label label { margin: 0; font-weight: inherit; }
.single-product .variations td.value select {
  padding: 12px 36px 12px 18px;
  border: 1px solid #ececec;
  border-radius: 999px;
  background: var(--paper);
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
  min-width: 220px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-position: right 14px center;
  background-repeat: no-repeat;
  background-size: 14px;
  transition: border-color .2s ease;
}
.single-product .variations td.value select:focus { outline: 0; border-color: var(--ink); }
.single-product .reset_variations {
  display: inline-block;
  font-size: 13px;
  color: var(--muted);
  margin-left: 16px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.single-product .single_variation_wrap .woocommerce-variation-price {
  margin-bottom: 14px;
}
.single-product .single_variation_wrap .woocommerce-variation-price .price {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 32px);
  color: var(--gold);
  font-weight: 500;
}

/* --- Add-to-cart form --------------------------------------------- */
.single-product form.cart {
  display: flex !important;
  align-items: stretch;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 28px !important;
}
.single-product form.cart .quantity {
  display: flex;
  align-items: center;
  margin: 0 !important;
}
.single-product form.cart .quantity label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.single-product form.cart .quantity input.qty {
  width: 84px;
  height: 56px;
  padding: 0 14px;
  text-align: center;
  border: 1px solid #ececec;
  border-radius: 999px;
  background: var(--paper);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  appearance: textfield;
  -moz-appearance: textfield;
  transition: border-color .2s ease;
}
.single-product form.cart .quantity input.qty::-webkit-inner-spin-button,
.single-product form.cart .quantity input.qty::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.single-product form.cart .quantity input.qty:focus { outline: 0; border-color: var(--ink); }

.single-product form.cart .single_add_to_cart_button,
.single-product form.cart button.button.alt {
  flex: 1 1 240px;
  min-width: 240px;
  height: 56px;
  background: var(--ink) !important;
  color: var(--paper) !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 0 32px !important;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.single-product form.cart .single_add_to_cart_button:hover,
.single-product form.cart button.button.alt:hover {
  background: var(--gold) !important;
  color: var(--ink) !important;
  transform: translateY(-1px);
}

/* External product "Buy" button uses .product_type_external */
.single-product form.cart .product_type_external { width: 100%; }

/* Grouped products table */
.single-product table.group_table { width: 100%; margin: 0 0 20px; border: 1px solid #ececec; border-radius: 12px; border-collapse: separate; overflow: hidden; }
.single-product table.group_table td { padding: 14px 16px; border-top: 1px solid #ececec; vertical-align: middle; }
.single-product table.group_table tr:first-child td { border-top: 0; }
.single-product table.group_table .quantity input.qty { width: 64px; height: 40px; font-size: 14px; }

/* --- Trust strip (injected after add-to-cart) --------------------- */
.product-trust {
  list-style: none;
  margin: 0 0 24px;
  padding: 18px 0;
  border-top: 1px solid #ececec;
  border-bottom: 1px solid #ececec;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}
.product-trust li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--ink);
}
.product-trust li svg {
  color: var(--gold);
  flex-shrink: 0;
}
.product-trust a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(0,0,0,0.2);
  transition: text-decoration-color .2s ease;
}
.product-trust a:hover { text-decoration-color: var(--gold); }

/* --- Meta (SKU, categories, tags) --------------------------------- */
.single-product .product_meta {
  font-size: 13px;
  color: var(--muted);
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.single-product .product_meta > span { display: block; }
.single-product .product_meta a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(0,0,0,0.2);
  transition: text-decoration-color .2s ease;
}
.single-product .product_meta a:hover { text-decoration-color: var(--gold); }

/* --- Tabs --------------------------------------------------------- */
.single-product .woocommerce-tabs.wc-tabs-wrapper {
  margin: clamp(48px, 6vw, 96px) 0 0;
  padding-top: clamp(32px, 4vw, 56px);
  border-top: 1px solid #ececec;
  clear: both;
}
.single-product .woocommerce-tabs .tabs.wc-tabs {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  border: 0;
  border-bottom: 1px solid #ececec;
  background: transparent;
}
.single-product .woocommerce-tabs .tabs.wc-tabs::before,
.single-product .woocommerce-tabs .tabs.wc-tabs::after { display: none; }
.single-product .woocommerce-tabs .tabs.wc-tabs li {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.single-product .woocommerce-tabs .tabs.wc-tabs li::before,
.single-product .woocommerce-tabs .tabs.wc-tabs li::after { display: none !important; }
.single-product .woocommerce-tabs .tabs.wc-tabs li a {
  display: block;
  padding: 14px 22px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted) !important;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: transparent;
  text-shadow: none;
  transition: color .2s ease, border-color .2s ease;
}
.single-product .woocommerce-tabs .tabs.wc-tabs li a:hover { color: var(--ink) !important; }
.single-product .woocommerce-tabs .tabs.wc-tabs li.active a,
.single-product .woocommerce-tabs .tabs.wc-tabs li[aria-selected="true"] a {
  color: var(--ink) !important;
  border-bottom-color: var(--gold);
}
.single-product .woocommerce-Tabs-panel {
  line-height: 1.7;
  color: var(--ink);
  font-size: 15px;
  max-width: 76ch;
}
.single-product .woocommerce-Tabs-panel h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 2.6vw, 30px);
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}
.single-product .woocommerce-Tabs-panel p { margin: 0 0 14px; }
.single-product .woocommerce-Tabs-panel ul,
.single-product .woocommerce-Tabs-panel ol { margin: 0 0 14px 1.4em; }
.single-product .woocommerce-Tabs-panel table.shop_attributes {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #ececec;
  border-radius: 12px;
  overflow: hidden;
}
.single-product .woocommerce-Tabs-panel table.shop_attributes th,
.single-product .woocommerce-Tabs-panel table.shop_attributes td {
  padding: 14px 18px;
  border-top: 1px solid #ececec;
  background: transparent;
  font-style: normal;
}
.single-product .woocommerce-Tabs-panel table.shop_attributes tr:first-child th,
.single-product .woocommerce-Tabs-panel table.shop_attributes tr:first-child td { border-top: 0; }
.single-product .woocommerce-Tabs-panel table.shop_attributes th {
  width: 30%;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--paper-tint);
}

/* --- Upsells + related ------------------------------------------- */
.single-product .related.products,
.single-product .upsells.products {
  margin: clamp(64px, 8vw, 120px) 0 0;
  clear: both;
}
.single-product .related.products > h2,
.single-product .upsells.products > h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 3vw, 36px);
  letter-spacing: -0.025em;
  margin: 0 0 28px;
  color: var(--ink);
}

/* --- Reviews tab ------------------------------------------------- */
.single-product #reviews .comment-text { font-size: 15px; line-height: 1.7; }
.single-product #reviews #respond { margin-top: 32px; padding-top: 24px; border-top: 1px solid #ececec; }
.single-product #reviews .comment-form-rating .stars a {
  color: var(--muted);
  transition: color .2s ease;
}
.single-product #reviews .comment-form-rating .stars a.active,
.single-product #reviews .comment-form-rating .stars a:hover { color: var(--gold); }
.single-product #reviews .comment-form-comment textarea,
.single-product #reviews .comment-form-author input,
.single-product #reviews .comment-form-email input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid #ececec;
  border-radius: 12px;
  font-family: inherit;
  font-size: 14px;
  background: var(--paper);
  transition: border-color .2s ease;
}
.single-product #reviews textarea:focus,
.single-product #reviews input[type="text"]:focus,
.single-product #reviews input[type="email"]:focus {
  outline: 0;
  border-color: var(--ink);
}
.single-product #reviews .form-submit input[type="submit"] {
  margin-top: 8px;
  background: var(--ink) !important;
  color: var(--paper) !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 14px 32px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.single-product #reviews .form-submit input[type="submit"]:hover {
  background: var(--gold) !important;
  color: var(--ink) !important;
}

/* WC notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-top-color: var(--gold) !important;
  background: var(--paper-tint) !important;
}
.woocommerce-message::before,
.woocommerce-info::before { color: var(--gold) !important; }

/* Post hero (single post / page) ------------------------------------- */
/* Page / post / shop banner — solid yellow (#f4c241) with dark text.
   The optional background image + dark overlay are intentionally hidden
   so every banner reads as a clean brand-colour block. */
.post-hero {
  position: relative;
  background: var(--gold);
  color: var(--ink);
  overflow: hidden;
  isolation: isolate;
}
.post-hero__bg,
.post-hero__overlay { display: none; }
.post-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.post-hero__inner {
  position: relative;
  z-index: 2;
  padding: clamp(96px, 12vw, 180px) var(--pad-x) clamp(64px, 8vw, 110px);
}
.post-hero--page .post-hero__inner {
  padding-top: clamp(80px, 10vw, 140px);
  padding-bottom: clamp(48px, 6vw, 80px);
}

/* Shop archive variant — much shallower banner so the products grid
   below dominates the page. Title scale also drops because the available
   vertical room shrinks; the eyebrow line keeps editors' breadcrumb-like
   context visible. */
.post-hero--shop .post-hero__inner {
  padding-top:    clamp(40px, 5vw, 64px);
  padding-bottom: clamp(24px, 3vw, 40px);
}
.post-hero--shop .post-hero__title {
  font-size: clamp(26px, 3.4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.post-hero--shop .post-hero__eyebrow { font-size: 11px; }
.post-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--ink);
  font-weight: 700;
  margin-bottom: 28px;
}
.post-hero__eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--ink);
}
.post-hero__eyebrow a { color: var(--ink); transition: opacity .2s; }
.post-hero__eyebrow a:hover { opacity: 0.6; }
.post-hero__eyebrow .dot-sep { color: rgba(0,0,0,0.45); }
.post-hero__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(36px, 6.2vw, 80px);
  line-height: 1;
  letter-spacing: -0.035em;
  max-width: 24ch;
  margin-bottom: 24px;
  color: var(--ink);
}
.post-hero__sub {
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.55;
  max-width: 56ch;
  color: rgba(0,0,0,0.78);
  font-weight: 500;
  margin-bottom: 36px;
}
.post-hero__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 24px;
  border-top: 1px solid rgba(0,0,0,0.18);
  max-width: 420px;
}
.post-hero__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.2);
}
.post-hero__author {
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
}
.post-hero__readtime {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.6);
  margin-top: 2px;
}

/* Entry typography (extends earlier .entry-content rules) ------------- */
.entry-content > p:first-child { font-size: 19px; line-height: 1.6; color: var(--ink); }
.entry-content p { margin-bottom: 1.4em; }
.entry-content h2 { margin-top: 2em; margin-bottom: .6em; }
.entry-content h3 { margin-top: 1.8em; margin-bottom: .5em; }
.entry-content figure, .entry-content .wp-block-image { margin: 2em 0; }
.entry-content figure img, .entry-content .wp-block-image img { border-radius: 8px; }
.entry-content figcaption {
  margin-top: 10px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  letter-spacing: 0.02em;
}
.entry-content code {
  background: var(--paper-tint);
  border: 1px solid #ececec;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.entry-content pre {
  background: var(--ink);
  color: var(--paper);
  padding: 20px 24px;
  border-radius: 8px;
  overflow-x: auto;
  font-size: 14px;
  margin: 1.5em 0;
}
.entry-content pre code { background: transparent; border: 0; padding: 0; color: inherit; }
.entry-content hr {
  border: 0;
  height: 1px;
  background: #ececec;
  margin: 3em 0;
}

.entry-tags {
  max-width: calc(820px + (var(--pad-x) * 2));
  margin: 0 auto;
  padding: 0 var(--pad-x) 80px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.entry-tag {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--paper-tint);
  border: 1px solid #ececec;
  color: var(--ink);
  transition: all .2s;
}
.entry-tag:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* Post navigation ----------------------------------------------------- */
.post-nav {
  background: var(--paper-tint);
  border-top: 1px solid #ececec;
  border-bottom: 1px solid #ececec;
}
.post-nav__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: clamp(32px, 5vw, 56px) var(--pad-x);
}
.post-nav__link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 24px;
  border: 1px solid #ececec;
  background: var(--paper);
  border-radius: 8px;
  transition: all .25s ease;
}
.post-nav__link:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
.post-nav__link--next { text-align: right; }
.post-nav__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gold);
  font-weight: 700;
}
.post-nav__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
}
@media (max-width: 620px) {
  .post-nav__inner { grid-template-columns: 1fr; }
  .post-nav__link--next { text-align: left; }
}

/* Comments ------------------------------------------------------------ */
.comments {
  background: var(--paper);
  padding: clamp(64px, 8vw, 120px) 0;
  border-top: 1px solid #ececec;
}
.comments__inner {
  max-width: calc(820px + (var(--pad-x) * 2));
  margin: 0 auto;
  padding: 0 var(--pad-x);
}
.comments__head { margin-bottom: 40px; }
.comments__head .section-eyebrow { margin-bottom: 14px; }
.comments__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
}

.comment-list {
  list-style: none;
  margin: 0 0 56px;
  padding: 0;
}
.comment-list .children {
  list-style: none;
  margin: 24px 0 0 32px;
  padding-left: 24px;
  border-left: 2px solid var(--paper-tint);
}
@media (max-width: 620px) {
  .comment-list .children { margin-left: 16px; padding-left: 16px; }
}

.comment-list li.comment {
  margin-bottom: 24px;
}
.comment-list li.comment:last-child { margin-bottom: 0; }

.comment-body {
  background: var(--paper-tint);
  border: 1px solid #ececec;
  border-radius: 10px;
  padding: 24px 28px;
  position: relative;
}
.bypostauthor > .comment-body {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(244,194,65,0.12);
}

.comment-body .comment-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #ececec;
}
.comment-author { display: flex; align-items: center; gap: 14px; }
.comment-author .avatar {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50%;
  border: 1px solid #ececec;
}
.comment-author .fn,
.comment-author cite {
  font-style: normal;
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
}
.comment-author .says { display: none; }

.comment-metadata {
  margin-left: auto;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 12px;
}
.comment-metadata a { color: inherit; transition: color .2s; }
.comment-metadata a:hover { color: var(--gold); }
.comment-metadata .edit-link a { color: var(--gold); }

.comment-content {
  font-size: 15px;
  line-height: 1.7;
  color: #000;
}
.comment-content p { margin: 0 0 10px; }
.comment-content p:last-child { margin-bottom: 0; }
.comment-content a { color: var(--ink); border-bottom: 1px solid var(--gold); }

.reply { margin-top: 14px; }
.reply .comment-reply-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--ink);
  color: var(--paper) !important;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: all .2s ease;
}
.reply .comment-reply-link:hover {
  background: var(--gold);
  color: var(--ink) !important;
}

.comments__pagination { justify-content: center; }
.comments__closed {
  text-align: center;
  padding: 24px;
  background: var(--paper-tint);
  border: 1px solid #ececec;
  border-radius: 8px;
  color: var(--muted);
  font-size: 14px;
}

/* Comment form -------------------------------------------------------- */
.comment-form-wrap {
  margin-top: 56px;
  padding-top: 56px;
  border-top: 1px solid #ececec;
}
.comment-respond .comment-reply-title,
#reply-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(24px, 3vw, 32px);
  letter-spacing: -0.02em;
  margin-bottom: 24px;
  color: var(--ink);
}
.comment-respond .comment-reply-title small { font-size: 13px; margin-left: 12px; }
.comment-respond .comment-reply-title small a {
  color: var(--gold);
  border-bottom: 1px solid currentColor;
}

.logged-in-as,
.comment-notes {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 18px;
}
.logged-in-as a { color: var(--ink); border-bottom: 1px solid var(--gold); }
.required { color: var(--gold); }

.comment-form { display: flex; flex-direction: column; gap: 18px; }
.comment-form .comment-form-author,
.comment-form .comment-form-email,
.comment-form .comment-form-url,
.comment-form .comment-form-comment,
.comment-form .comment-form-cookies-consent {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}
.comment-form-author,
.comment-form-email {
  display: inline-flex !important;
}
@media (min-width: 720px) {
  .comment-form .comment-form-author,
  .comment-form .comment-form-email {
    display: inline-flex !important;
    width: calc(50% - 9px);
  }
  .comment-form .comment-form-author { float: left; }
  .comment-form .comment-form-email { float: right; }
  .comment-form::after { content: ''; display: table; clear: both; }
}
.comment-form label {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink);
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  padding: 14px 18px;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  background: var(--paper);
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  transition: border-color .2s, box-shadow .2s;
}
.comment-form input:focus,
.comment-form textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
}
.comment-form textarea { min-height: 160px; resize: vertical; }

.comment-form-cookies-consent {
  flex-direction: row !important;
  align-items: center;
  gap: 10px !important;
  font-size: 13px;
  color: var(--muted);
}
.comment-form-cookies-consent label {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: 13px;
  color: var(--muted);
}
.comment-form-cookies-consent input[type="checkbox"] {
  width: 16px; height: 16px; accent-color: var(--gold);
}

.form-submit { margin: 8px 0 0; }
.comment-form .submit,
.form-submit input[type="submit"] {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  cursor: pointer;
  transition: all .25s ease;
  font-family: inherit;
}
.comment-form .submit:hover,
.form-submit input[type="submit"]:hover {
  background: var(--gold);
  color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(244,194,65,0.25);
}

#cancel-comment-reply-link {
  display: inline-block;
  margin-left: 12px;
  font-size: 13px;
  color: var(--muted);
  border-bottom: 1px solid currentColor;
}
#cancel-comment-reply-link:hover { color: var(--gold); }

/* Shop page (template-shop.blade.php) ------------------------------- */

/* Toolbar — search + chips + sort */
.shop-toolbar {
  background: var(--paper-tint);
  border-bottom: 1px solid #ececec;
  padding: 18px 0;
  position: sticky;
  top: 78px; /* under sticky header */
  z-index: 5;
}
@media (max-width: 980px) {
  .shop-toolbar { top: 64px; }
}
.shop-toolbar__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
@media (max-width: 720px) {
  .shop-toolbar__inner { gap: 10px; }
}

/* Search input + inline live-search dropdown on the shop toolbar were
   removed — the header search button (🔍) now covers searching site-wide
   via the overlay (partials/search-overlay.blade.php). */

.shop-cats {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scroll-padding: 0 16px;
}
.shop-cats::-webkit-scrollbar { height: 4px; }
.shop-cats::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 999px; }
.shop-cats__item { flex-shrink: 0; scroll-snap-align: start; }
.shop-cats__item a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid #ececec;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: all .2s ease;
}
.shop-cats__item a:hover { border-color: var(--ink); }
.shop-cats__item.is-active a {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.shop-cats__count {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--paper-tint);
  color: var(--ink);
}
.shop-cats__item.is-active .shop-cats__count {
  background: var(--gold);
  color: var(--ink);
}

.shop-sort {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.shop-sort label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted);
}
.shop-sort select {
  padding: 9px 32px 9px 14px;
  border: 1px solid #e5e5e5;
  border-radius: 999px;
  background: var(--paper);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%),
                    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  transition: border-color .2s;
}
.shop-sort select:hover { border-color: var(--ink); }
.shop-sort select:focus { outline: 0; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(0,0,0,0.06); }

@media (max-width: 720px) {
  .shop-toolbar__inner { flex-direction: column; align-items: stretch; }
  .shop-cats { width: 100%; padding: 0 0 4px; }
  .shop-sort { justify-content: space-between; }
  .shop-sort select { flex: 1; }
}

/* Active filters strip */
.shop-active {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 24px;
}
.shop-active__label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted);
}
.shop-active__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 14px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: background .2s ease;
}
.shop-active__pill:hover { background: var(--gold); color: var(--ink); }
.shop-active__pill span {
  font-size: 16px;
  line-height: 1;
}

/* Body --------------------------------------------------------------- */
.shop-page { padding: clamp(40px, 5vw, 72px) 0 clamp(64px, 8vw, 120px); }

.shop-page .woocommerce-result-count {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 16px;
}

/* Top-level shop notice (e.g. updated cart from quick-add) */
.shop-page .woocommerce-message,
.shop-page .woocommerce-info { margin-bottom: 24px; }

/* (Light card variant is now the default in the .product rule above —
   shop archive, search, my-account, etc. all inherit it automatically.) */

/* Empty results ------------------------------------------------------ */
.shop-empty {
  text-align: center;
  padding: clamp(40px, 6vw, 80px) 24px;
  background: var(--paper-tint);
  border: 1px solid #ececec;
  border-radius: 12px;
  max-width: 720px;
  margin: 24px auto 0;
}
.shop-empty svg {
  width: 48px;
  height: 48px;
  color: var(--gold);
  margin: 0 auto 16px;
  display: block;
}
.shop-empty h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 2.6vw, 30px);
  letter-spacing: -0.025em;
  margin-bottom: 10px;
  color: var(--ink);
}
.shop-empty p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
  margin: 0 auto 24px;
  max-width: 48ch;
}

/* WooCommerce pagination on shop ------------------------------------ */
.woocommerce-pagination {
  margin-top: 40px !important;
  padding: 0 !important;
}
.woocommerce nav.woocommerce-pagination ul,
.shop-page .woocommerce-pagination {
  border: 0 !important;
  display: flex !important;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.woocommerce nav.woocommerce-pagination ul li {
  border: 0 !important;
  margin: 0 !important;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span,
.shop-page .woocommerce-pagination a,
.shop-page .woocommerce-pagination span {
  padding: 10px 16px !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  background: var(--paper) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  text-align: center;
  transition: all .2s !important;
}
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current,
.shop-page .woocommerce-pagination a:hover,
.shop-page .woocommerce-pagination span.current {
  background: var(--ink) !important;
  color: var(--paper) !important;
  border-color: var(--ink) !important;
}

/* Result count + ordering on the actual WC shop archive ------------ */
.woocommerce.archive .woocommerce-result-count,
.woocommerce.archive .woocommerce-ordering {
  margin-bottom: 24px;
}
.woocommerce.archive .woocommerce-ordering select {
  padding: 9px 32px 9px 14px !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 999px !important;
  background: var(--paper) !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  cursor: pointer;
}

/* Checkout page (template-checkout.blade.php) ----------------------- */
.checkout-page { padding: clamp(48px, 6vw, 96px) 0 clamp(64px, 8vw, 120px); }
.checkout-page--empty { padding-bottom: clamp(80px, 10vw, 140px); }

/* 2-column layout: form left, order review right (sticky on desktop) -
   We use float (not grid) because the WC checkout markup places
   #customer_details, #order_review_heading and #order_review as three
   sibling blocks. Grid auto-placement with the very-tall #customer_details
   pushes #order_review into row 2 — leaving the right column with just
   the heading at top and the summary far below the form.
   Floats let us place the heading + summary together at the top of the
   right column, with sticky positioning working out of the box. */
.woocommerce-checkout form.checkout::after {
  content: '';
  display: block;
  clear: both;
}

@media (min-width: 981px) {
  .woocommerce-checkout #customer_details {
    float: left;
    width: 58%;
  }
  .woocommerce-checkout #order_review_heading,
  .woocommerce-checkout #order_review {
    float: right;
    clear: right;
    width: 38%;
  }
  .woocommerce-checkout #order_review {
    position: sticky;
    top: 100px;
  }
}
@media (max-width: 980px) {
  .woocommerce-checkout #customer_details,
  .woocommerce-checkout #order_review_heading,
  .woocommerce-checkout #order_review {
    float: none;
    width: 100%;
    clear: both;
  }
  .woocommerce-checkout #order_review_heading { margin-top: 32px; }
}

/* Customer details — billing/shipping cards */
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
  width: 100% !important;
  float: none !important;
  margin-bottom: 0 !important;
}
.woocommerce-checkout #customer_details > div + div { margin-top: 32px; }
.woocommerce-checkout .woocommerce-billing-fields > h3,
.woocommerce-checkout .woocommerce-shipping-fields > h3,
.woocommerce-checkout .woocommerce-additional-fields > h3,
.woocommerce-checkout #order_review_heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 2.6vw, 28px);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid #ececec;
}
.woocommerce-checkout #order_review_heading { margin-bottom: 16px; }
.woocommerce-checkout .woocommerce-shipping-fields .shipping_address {
  margin-top: 16px;
}
.woocommerce-checkout #ship-to-different-address label {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
}
.woocommerce-checkout #ship-to-different-address input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--gold);
}

/* Form rows + inputs */
.woocommerce-checkout form .form-row {
  display: flex !important;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 16px !important;
  padding: 0 !important;
}
.woocommerce-checkout form .form-row.form-row-first,
.woocommerce-checkout form .form-row.form-row-last {
  width: calc(50% - 8px) !important;
  display: inline-flex !important;
  vertical-align: top;
}
.woocommerce-checkout form .form-row.form-row-first { float: left; }
.woocommerce-checkout form .form-row.form-row-last { float: right; }
.woocommerce-checkout form .form-row-wide { width: 100% !important; clear: both; }

.woocommerce-checkout form .form-row label {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink);
}
.woocommerce-checkout form .form-row label .optional { color: var(--muted); font-weight: 400; letter-spacing: 0; text-transform: none; }
.woocommerce-checkout form .form-row label abbr.required {
  color: var(--gold);
  text-decoration: none;
  margin-left: 4px;
}

.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout input[type="password"],
.woocommerce-checkout input[type="number"],
.woocommerce-checkout textarea,
.woocommerce-checkout select {
  width: 100% !important;
  padding: 14px 18px !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 8px !important;
  background: var(--paper) !important;
  font-family: inherit !important;
  font-size: 15px !important;
  color: var(--ink) !important;
  transition: border-color .2s, box-shadow .2s !important;
  box-shadow: none !important;
}
.woocommerce-checkout textarea { min-height: 120px; resize: vertical; }
.woocommerce-checkout input:focus,
.woocommerce-checkout textarea:focus,
.woocommerce-checkout select:focus {
  outline: 0 !important;
  border-color: var(--ink) !important;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.06) !important;
}
.woocommerce-checkout .woocommerce-invalid input,
.woocommerce-checkout .woocommerce-invalid select {
  border-color: #d4441e !important;
  box-shadow: 0 0 0 3px rgba(212,68,30,0.08) !important;
}
.woocommerce-checkout .woocommerce-validated input.input-text {
  border-color: #b8d6a8 !important;
}

/* Select2 (country / state dropdowns) */
.woocommerce-checkout .select2-container--default .select2-selection--single {
  height: 49px !important;
  padding: 8px 18px !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 8px !important;
  background: var(--paper);
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 31px !important;
  color: var(--ink) !important;
  padding: 0 !important;
  font-size: 15px;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 47px !important;
  right: 14px !important;
}
.woocommerce-checkout .select2-container--default.select2-container--open .select2-selection--single,
.woocommerce-checkout .select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--ink) !important;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.06) !important;
}

/* Account creation toggle / login row.
   Default WC positions the .woocommerce-info::before icon absolutely at
   left: 1.5em — so the wrapper needs left padding ≥ 3em to keep the icon
   from overlapping the text. */
.woocommerce-form-login-toggle .woocommerce-info,
.woocommerce-form-coupon-toggle .woocommerce-info {
  background: var(--paper-tint) !important;
  border-top-color: var(--gold) !important;
  border-radius: 8px !important;
  padding: 14px 20px 14px 52px !important;
  font-size: 14px !important;
  color: var(--ink) !important;
  position: relative;
}
.woocommerce-form-login-toggle .woocommerce-info::before,
.woocommerce-form-coupon-toggle .woocommerce-info::before {
  color: var(--gold) !important;
  left: 18px !important;
  top: 16px !important;
}
.woocommerce-form-login-toggle .woocommerce-info a,
.woocommerce-form-coupon-toggle .woocommerce-info a {
  color: var(--ink) !important;
  border-bottom: 1px solid var(--gold);
}

/* Order review table — branded card */
.woocommerce-checkout #order_review {
  background: var(--paper);
  border: 1px solid #ececec;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.04);
}
.woocommerce-checkout table.shop_table {
  border: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.woocommerce-checkout table.shop_table thead { display: none; }
.woocommerce-checkout table.shop_table tbody td {
  background: transparent !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid #ececec !important;
  font-size: 14px;
}
.woocommerce-checkout table.shop_table tbody tr:last-child td { border-bottom: 0 !important; }
.woocommerce-checkout table.shop_table tfoot th,
.woocommerce-checkout table.shop_table tfoot td {
  background: transparent !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid #ececec !important;
  font-size: 14px;
}
.woocommerce-checkout table.shop_table tfoot tr:last-child th,
.woocommerce-checkout table.shop_table tfoot tr:last-child td { border-bottom: 0 !important; }
.woocommerce-checkout table.shop_table .product-name {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
}
.woocommerce-checkout table.shop_table .product-name strong.product-quantity {
  color: var(--muted);
  font-weight: 400;
  margin-left: 4px;
}
.woocommerce-checkout table.shop_table tfoot .order-total th,
.woocommerce-checkout table.shop_table tfoot .order-total td {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  color: var(--ink);
  padding-top: 16px !important;
  padding-bottom: 0 !important;
}
.woocommerce-checkout table.shop_table tfoot .order-total .amount,
.woocommerce-checkout table.shop_table tfoot .order-total bdi {
  color: var(--ink);
}

/* Payment box */
.woocommerce-checkout #payment {
  background: var(--paper-tint) !important;
  border: 1px solid #ececec;
  border-radius: 10px;
  padding: 4px;
  margin-top: 20px;
}
.woocommerce-checkout #payment ul.payment_methods {
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
.woocommerce-checkout #payment ul.payment_methods li {
  padding: 14px 16px;
  border-radius: 8px;
  transition: background .2s ease;
}
.woocommerce-checkout #payment ul.payment_methods li:hover {
  background: var(--paper);
}
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  margin-left: 6px;
}
.woocommerce-checkout #payment ul.payment_methods input[type="radio"] {
  accent-color: var(--gold);
  width: 18px;
  height: 18px;
}
.woocommerce-checkout #payment ul.payment_methods .payment_box {
  background: var(--paper) !important;
  border: 1px solid #ececec;
  border-radius: 8px;
  margin: 12px 0 0 !important;
  padding: 16px !important;
  font-size: 14px;
  color: var(--ink);
}
.woocommerce-checkout #payment ul.payment_methods .payment_box::before {
  display: none !important;
}
.woocommerce-checkout #payment .form-row.place-order {
  padding: 16px 16px 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
.woocommerce-checkout #payment .terms label,
.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper label {
  font-size: 13px;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  display: inline-flex;
  gap: 8px;
  align-items: flex-start;
}
.woocommerce-checkout #payment .terms input[type="checkbox"] {
  margin-top: 3px;
  accent-color: var(--gold);
  width: 16px;
  height: 16px;
}

/* Place order button */
.woocommerce-checkout #place_order {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100% !important;
  padding: 18px 28px !important;
  background: var(--gold) !important;
  color: var(--ink) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border-radius: 999px !important;
  border: 0 !important;
  margin: 16px 0 0 !important;
  transition: all .25s ease !important;
}
.woocommerce-checkout #place_order:hover {
  background: var(--paper) !important;
  color: var(--ink) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(244,194,65,0.3);
}
.woocommerce-checkout #place_order:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Notices stacking */
.woocommerce-checkout .woocommerce-notices-wrapper {
  margin-bottom: 24px;
}

/* Thank-you (order received) ---------------------------------------- */
.checkout-page--received { padding-bottom: clamp(48px, 6vw, 80px); }

.thankyou {
  background: var(--paper);
  border: 1px solid #ececec;
  border-radius: 12px;
  padding: clamp(24px, 4vw, 40px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.04);
}

.thankyou__summary {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}
.thankyou__summary li {
  background: var(--paper-tint);
  border: 1px solid #ececec;
  border-radius: 8px;
  padding: 16px 18px;
}
.thankyou__label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 6px;
}
.thankyou__summary strong {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
  word-break: break-word;
}
.thankyou__amount,
.thankyou__amount bdi { color: var(--gold) !important; }

.thankyou__note {
  background: var(--paper-tint);
  border-left: 3px solid var(--gold);
  padding: 16px 20px;
  border-radius: 0 8px 8px 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 24px;
}

.thankyou__alert {
  border-radius: 10px;
  padding: 20px 24px;
  margin-bottom: 24px;
}
.thankyou__alert--error {
  background: rgba(212, 68, 30, 0.06);
  border: 1px solid rgba(212, 68, 30, 0.2);
  color: var(--ink);
}
.thankyou__alert strong {
  display: block;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 6px;
}
.thankyou__alert .thankyou__actions {
  margin-top: 16px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* WC's default order summary blocks on thank-you (order_details, customer_details) */
.thankyou .woocommerce-order-overview,
.woocommerce-order-received .woocommerce-order-overview {
  display: none; /* replaced by our .thankyou__summary */
}
.woocommerce-order-received .woocommerce-order-details,
.woocommerce-order-received .woocommerce-customer-details {
  background: transparent;
  border: 0;
  padding: 0;
  margin-top: 32px;
}
.woocommerce-order-received .woocommerce-order-details h2,
.woocommerce-order-received .woocommerce-customer-details h2,
.woocommerce-order-received h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 2.6vw, 28px);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #ececec;
}
.woocommerce-order-received .woocommerce-table--order-details,
.woocommerce-order-received .woocommerce-table--customer-details {
  border: 1px solid #ececec !important;
  border-radius: 10px;
  overflow: hidden;
  background: var(--paper);
}
.woocommerce-order-received address {
  font-style: normal;
  padding: 16px 20px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
}
.woocommerce-order-received .woocommerce-customer-details--phone,
.woocommerce-order-received .woocommerce-customer-details--email {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--muted);
}

/* "What's next?" CTA strip after thank-you */
.checkout-after {
  margin-top: 40px;
}
.checkout-after__inner {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(28px, 4vw, 48px);
  border-radius: 12px;
  text-align: center;
}
.checkout-after__inner h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(24px, 3vw, 36px);
  letter-spacing: -0.025em;
  color: var(--paper);
  margin: 0 0 12px;
}
.checkout-after__inner p {
  color: rgba(255,255,255,0.72);
  font-size: 15px;
  line-height: 1.6;
  max-width: 56ch;
  margin: 0 auto 24px;
}
.checkout-after__actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* WooCommerce block-based empty cart (defensive fallback) ----------- */
/* Used when a page renders <!-- wp:woocommerce/cart --> instead of the
   classic [woocommerce_cart] shortcode. The classic-shortcode path is
   styled by woocommerce/cart/cart-empty.php override. */

.wp-block-woocommerce-empty-cart-block,
.wc-block-cart__empty-cart,
.is-large.wc-block-cart {
  text-align: center;
  padding: clamp(40px, 6vw, 80px) 24px;
  max-width: 720px;
  margin: 0 auto;
}
.wc-block-cart__empty-cart__title,
.wp-block-woocommerce-empty-cart-block h2,
.wp-block-woocommerce-empty-cart-block .wp-block-heading {
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  font-size: clamp(28px, 3.6vw, 44px) !important;
  letter-spacing: -0.025em !important;
  color: var(--ink) !important;
  margin: 24px 0 12px !important;
}
.wc-block-mini-cart__empty-cart-icon,
.wc-block-cart__empty-cart__image,
.wc-block-cart__empty-cart img {
  display: none !important;
}
.wp-block-woocommerce-empty-cart-block::before,
.wc-block-cart__empty-cart::before {
  content: '';
  display: block;
  width: 64px;
  height: 64px;
  margin: 0 auto 8px;
  background: var(--gold);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='21' r='1'/><circle cx='20' cy='21' r='1'/><path d='M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='21' r='1'/><circle cx='20' cy='21' r='1'/><path d='M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6'/></svg>") no-repeat center / contain;
}
.wc-block-cart__empty-cart__description,
.wp-block-woocommerce-empty-cart-block p {
  color: var(--muted) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  max-width: 48ch;
  margin: 0 auto 28px !important;
}
.wp-block-woocommerce-empty-cart-block .wp-block-button .wp-block-button__link,
.wc-block-cart__empty-cart a.wc-block-components-button {
  background: var(--ink) !important;
  color: var(--paper) !important;
  border-radius: 999px !important;
  padding: 14px 24px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border: 0 !important;
}
.wp-block-woocommerce-empty-cart-block .wp-block-button .wp-block-button__link:hover,
.wc-block-cart__empty-cart a.wc-block-components-button:hover {
  background: var(--gold) !important;
  color: var(--ink) !important;
}

/* "New in store" suggestion strip (block default) — brand it */
.wp-block-woocommerce-empty-cart-block .wp-block-heading + .wp-block-woocommerce-product-new {
  margin-top: clamp(48px, 6vw, 80px);
}
.wp-block-woocommerce-empty-cart-block .wp-block-heading {
  text-align: left;
  font-size: clamp(22px, 2.6vw, 32px) !important;
}

/* Cart page (template-cart.blade.php) -------------------------------- */
.cart-page { padding: clamp(48px, 6vw, 96px) 0 clamp(64px, 8vw, 120px); }

.cart-trust {
  list-style: none;
  margin: 0 0 clamp(40px, 5vw, 64px);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 720px) { .cart-trust { grid-template-columns: 1fr; } }
.cart-trust li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  background: var(--paper-tint);
  border: 1px solid #ececec;
  border-radius: 8px;
}
.cart-trust svg { color: var(--gold); flex-shrink: 0; }
.cart-trust strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin-bottom: 2px;
}
.cart-trust span { display: block; font-size: 13px; color: var(--muted); }
.cart-trust a { color: var(--ink); }
.cart-trust a:hover { color: var(--gold); }

/* Empty state -------------------------------------------------------- */
.cart-empty-state {
  text-align: center;
  padding: clamp(40px, 6vw, 80px) 24px;
  background: var(--paper-tint);
  border: 1px solid #ececec;
  border-radius: 12px;
}
.cart-empty-state__icon {
  width: 56px;
  height: 56px;
  color: var(--gold);
  margin: 0 auto 24px;
  display: block;
}
.cart-empty-state h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(24px, 3vw, 36px);
  letter-spacing: -0.025em;
  margin-bottom: 12px;
  color: var(--ink);
}
.cart-empty-state p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
  max-width: 48ch;
  margin: 0 auto 28px;
}
.cart-empty-state__actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.woocommerce .cart-empty,
.woocommerce-cart .wc-empty-cart-message,
.woocommerce-cart .return-to-shop {
  /* Native "Your cart is currently empty." line + return button — hidden because we render our own. */
  display: none !important;
}

/* WooCommerce cart table -------------------------------------------- */
.woocommerce-cart .cart-page__body { display: block; }

.woocommerce-cart-form,
.woocommerce form.woocommerce-cart-form {
  margin-bottom: 32px;
}

.woocommerce table.shop_table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 0 !important;
  border-radius: 12px;
  overflow: hidden;
  background: var(--paper);
  box-shadow: 0 1px 0 #ececec, 0 6px 24px rgba(0,0,0,0.04);
}
.woocommerce table.shop_table thead {
  background: var(--ink);
}
.woocommerce table.shop_table thead th {
  color: var(--paper) !important;
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  padding: 18px 20px !important;
  text-align: left;
  border: 0 !important;
}
.woocommerce table.shop_table tbody td {
  background: var(--paper);
  padding: 24px 20px !important;
  border: 0 !important;
  border-bottom: 1px solid #ececec !important;
  vertical-align: middle;
  font-size: 15px;
  color: var(--ink);
}
.woocommerce table.shop_table tbody tr:last-child td {
  border-bottom: 0 !important;
}

.woocommerce .cart .product-thumbnail img,
.woocommerce-cart .product-thumbnail img {
  width: 80px !important;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #ececec;
}

.woocommerce .cart .product-name,
.woocommerce-cart .product-name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.woocommerce .cart .product-name a,
.woocommerce-cart .product-name a {
  color: var(--ink);
  border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}
.woocommerce .cart .product-name a:hover,
.woocommerce-cart .product-name a:hover {
  color: var(--gold);
  border-color: var(--gold);
}
.woocommerce .cart .product-name .variation,
.woocommerce-cart .product-name .variation {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

.woocommerce .cart .product-price,
.woocommerce .cart .product-subtotal,
.woocommerce-cart .product-price,
.woocommerce-cart .product-subtotal {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  color: var(--ink);
}
.woocommerce .cart .product-subtotal,
.woocommerce-cart .product-subtotal {
  color: var(--ink);
}

/* Quantity ----------------------------------------------------------- */
.woocommerce .quantity {
  display: inline-flex;
  align-items: center;
  background: var(--paper);
  border: 1px solid #e5e5e5;
  border-radius: 999px;
  padding: 4px;
  width: max-content;
}
.woocommerce .quantity .qty {
  width: 48px !important;
  height: 32px !important;
  background: transparent !important;
  border: 0 !important;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  font-family: inherit;
  -moz-appearance: textfield;
  appearance: textfield;
}
.woocommerce .quantity .qty::-webkit-inner-spin-button,
.woocommerce .quantity .qty::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.woocommerce .quantity .qty:focus {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
  border-radius: 4px;
}

/* Remove (×) button ------------------------------------------------- */
.woocommerce .cart .product-remove,
.woocommerce-cart .product-remove { width: 36px; }
.woocommerce a.remove,
.woocommerce-cart a.remove {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50%;
  background: var(--paper-tint) !important;
  color: var(--ink) !important;
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 600;
  transition: all .2s ease !important;
  text-decoration: none !important;
}
.woocommerce a.remove:hover,
.woocommerce-cart a.remove:hover {
  background: var(--ink) !important;
  color: var(--gold) !important;
  transform: rotate(90deg);
}

/* Coupon row + update cart row -------------------------------------- */
.woocommerce table.cart td.actions {
  background: var(--paper-tint);
  padding: 20px !important;
}
.woocommerce table.cart td.actions .coupon {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.woocommerce table.cart td.actions .coupon label {
  display: none;
}
.woocommerce table.cart td.actions .coupon input.input-text,
.woocommerce form .form-row input.input-text,
.woocommerce-cart input#coupon_code {
  padding: 12px 18px !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 999px !important;
  background: var(--paper) !important;
  font-family: inherit !important;
  font-size: 14px !important;
  color: var(--ink) !important;
  min-width: 200px;
  transition: border-color .2s, box-shadow .2s !important;
}
.woocommerce table.cart td.actions .coupon input.input-text:focus,
.woocommerce-cart input#coupon_code:focus {
  outline: 0 !important;
  border-color: var(--ink) !important;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.06) !important;
}

/* Cart totals box --------------------------------------------------- */
.cart-collaterals,
.woocommerce-cart .cart-collaterals {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 16px;
}
@media (min-width: 860px) {
  .cart-collaterals,
  .woocommerce-cart .cart-collaterals {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin-left: auto;
  }
}
.woocommerce .cart-collaterals .cart_totals { width: 100% !important; float: none !important; }
.woocommerce .cart_totals h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 28px);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 16px;
}
.woocommerce .cart_totals table.shop_table {
  background: var(--ink);
  color: var(--paper);
}
.woocommerce .cart_totals table.shop_table thead { display: none; }
.woocommerce .cart_totals table.shop_table tbody td,
.woocommerce .cart_totals table.shop_table tbody th {
  background: var(--ink) !important;
  color: var(--paper) !important;
  border-bottom: 1px solid var(--ink-line) !important;
  padding: 16px 20px !important;
  font-size: 14px;
}
.woocommerce .cart_totals table.shop_table tbody tr:last-child td,
.woocommerce .cart_totals table.shop_table tbody tr:last-child th { border-bottom: 0 !important; }
.woocommerce .cart_totals table.shop_table th {
  font-weight: 600 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 12px !important;
  color: rgba(255,255,255,0.7) !important;
}
.woocommerce .cart_totals .order-total td,
.woocommerce .cart_totals .order-total th {
  font-size: 18px !important;
  font-family: var(--font-display);
  font-weight: 500 !important;
  color: var(--paper) !important;
}
.woocommerce .cart_totals .order-total .amount,
.woocommerce .cart_totals .order-total bdi {
  color: var(--gold) !important;
}
.woocommerce .shop_table .amount { font-weight: 500; }

/* Shipping calculator inside totals --------------------------------- */
.woocommerce .shipping-calculator-button {
  color: var(--gold) !important;
  border-bottom: 1px solid currentColor;
}
.woocommerce .woocommerce-shipping-totals .shipping-calculator-form {
  margin-top: 12px;
}
.woocommerce .woocommerce-shipping-methods {
  list-style: none;
  margin: 0;
  padding: 0;
}
.woocommerce .woocommerce-shipping-methods li { margin-bottom: 6px; }
.woocommerce .woocommerce-shipping-methods label {
  color: var(--paper);
  font-size: 14px;
}
.woocommerce-shipping-destination {
  font-size: 12px;
  color: rgba(255,255,255,0.7);
  margin-top: 8px;
}

/* Proceed to checkout ---------------------------------------------- */
.woocommerce .wc-proceed-to-checkout {
  padding: 16px 0 0 !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.woocommerce .wc-proceed-to-checkout a.checkout-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 28px !important;
  background: var(--gold) !important;
  color: var(--ink) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border-radius: 999px !important;
  width: 100% !important;
  margin: 0 !important;
  transition: all .25s ease !important;
}
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover {
  background: var(--paper) !important;
  color: var(--ink) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(244,194,65,0.3);
}

/* Cross-sells ------------------------------------------------------- */
.woocommerce .cross-sells {
  margin-top: clamp(48px, 6vw, 80px);
  clear: both;
}
.woocommerce .cross-sells > h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 40px);
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 28px;
}

/* Mobile adjustments — collapse cart table to cards ----------------- */
@media (max-width: 720px) {
  .woocommerce table.shop_table.cart thead { display: none; }
  .woocommerce table.shop_table.cart,
  .woocommerce-cart-form table.shop_table tbody,
  .woocommerce-cart-form table.shop_table tr,
  .woocommerce-cart-form table.shop_table td {
    display: block;
    width: 100% !important;
  }
  .woocommerce-cart-form table.shop_table tr {
    background: var(--paper);
    border: 1px solid #ececec;
    border-radius: 10px;
    margin-bottom: 16px;
    padding: 16px;
    position: relative;
  }
  .woocommerce-cart-form table.shop_table td {
    border: 0 !important;
    padding: 6px 0 !important;
    text-align: left;
  }
  .woocommerce-cart-form table.shop_table td.product-remove {
    position: absolute;
    top: 12px;
    right: 12px;
  }
  .woocommerce-cart-form table.shop_table td.product-thumbnail img {
    width: 64px !important;
    height: 64px;
  }
  .woocommerce table.cart td.actions {
    border-radius: 10px;
    margin-top: 16px;
  }
  .woocommerce table.cart td.actions .coupon { width: 100%; }
  .woocommerce table.cart td.actions .coupon input.input-text { flex: 1; min-width: 0; }
}

/* GTranslate (multilanguage) ----------------------------------------
   These rules style the output the GTranslate plugin injects into the
   .gtranslate_wrapper slot. The plugin generates different markup per
   "Widget look", so the rules below cover flags, flag+name, dropdown
   and code variants without dictating one of them.
   ------------------------------------------------------------------- */

.gtranslate_wrapper { display: inline-flex; align-items: center; }
.gtranslate_wrapper:empty { display: none; }

/* Topbar variant — small, inline, on dark background */
/* ----------------------------------------------------------------------
   Built-in language switcher (.lang-switcher)
   Rendered by partials/lang-switcher.blade.php. Holds inline SVG flag
   links sized for the topbar; the mobile drawer rules below grow the
   flags so they're tappable. Keeps the .gtranslate_wrapper class so the
   GTranslate plugin can still inject its own dropdown when configured.
   ---------------------------------------------------------------------- */
.lang-switcher {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
}
.lang-switcher__flag {
  display: inline-flex;
  width: 22px;
  height: auto;
  border-radius: 3px;
  overflow: hidden;
  opacity: 0.85;
  transition: opacity .15s ease, transform .15s ease, box-shadow .15s ease;
  outline: 0;
}
.lang-switcher__flag svg { display: block; width: 100%; height: auto; }
.lang-switcher__flag:hover,
.lang-switcher__flag:focus-visible {
  opacity: 1;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

/* Mobile drawer variant — bigger and bordered so the flags read clearly
   against the dark drawer background. */
.mobile-drawer__lang .lang-switcher { gap: 12px; }
.mobile-drawer__lang .lang-switcher__flag {
  width: 32px;
  border: 1px solid rgba(255,255,255,0.18);
}
.mobile-drawer__lang .lang-switcher__flag:hover,
.mobile-drawer__lang .lang-switcher__flag:focus-visible {
  border-color: var(--gold);
  transform: scale(1.08);
}

/* Mobile-drawer mirror of the topbar widget slot. The GTranslate (or any
   other) widget dropped into the "Topbar — uz zastave" sidebar renders
   here too — same widget, two render points, no duplicate config. */
.mobile-drawer__widget {
  padding: 0 0 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.mobile-drawer__widget .widget { margin: 0; font-size: 14px; }
.mobile-drawer__widget .widget__title { display: none; }
.mobile-drawer__widget a { color: var(--paper); text-decoration: none; }
.mobile-drawer__widget a:hover,
.mobile-drawer__widget a:focus-visible { color: var(--gold); }
.mobile-drawer__widget select {
  background: rgba(255,255,255,0.06);
  color: var(--paper);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  padding: 8px 30px 8px 14px;
  font-size: 14px;
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
}
.mobile-drawer__widget select option { color: var(--ink); background: var(--paper); }
.mobile-drawer__widget img,
.mobile-drawer__widget .gflag {
  width: 28px !important;
  height: auto !important;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,0.18);
}
.mobile-drawer__widget .gt_container--default,
.mobile-drawer__widget .gtranslate_wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.topbar__lang { line-height: 1; }
.topbar__lang .gt_container--default,
.topbar__lang .gtranslate_wrapper-content { display: inline-flex; align-items: center; gap: 6px; }
.topbar__lang img,
.topbar__lang .gt-current-lang img,
.topbar__lang .gflag {
  width: 18px !important;
  height: auto !important;
  border-radius: 2px;
  opacity: 0.85;
  transition: opacity .2s, transform .2s;
}
.topbar__lang a:hover img,
.topbar__lang img:hover,
.topbar__lang .gflag:hover { opacity: 1; transform: translateY(-1px); }
.topbar__lang a,
.topbar__lang span { color: var(--ink); font-size: 13px; }
.topbar__lang select {
  background: transparent;
  color: var(--ink);
  border: 1px solid rgba(0,0,0,0.25);
  border-radius: 999px;
  padding: 4px 28px 4px 10px;
  font-size: 12px;
  letter-spacing: 0.04em;
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%),
                    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.topbar__lang select option { color: var(--ink); background: var(--paper); }

/* Mobile drawer variant — bigger touch targets, on dark drawer */
.mobile-drawer__lang { padding: 0 0 8px; }
.mobile-drawer__lang .gt_container--default,
.mobile-drawer__lang .gtranslate_wrapper-content {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.mobile-drawer__lang img,
.mobile-drawer__lang .gflag {
  width: 28px !important;
  height: auto !important;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,0.18);
  transition: transform .2s, border-color .2s;
}
.mobile-drawer__lang a:hover img,
.mobile-drawer__lang img:hover,
.mobile-drawer__lang .gflag:hover { transform: scale(1.08); border-color: var(--gold); }
.mobile-drawer__lang a,
.mobile-drawer__lang span { color: var(--paper); font-size: 14px; }
.mobile-drawer__lang select {
  background: rgba(255,255,255,0.06);
  color: var(--paper);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  padding: 10px 36px 10px 16px;
  font-size: 14px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  width: 100%;
}
.mobile-drawer__lang select option { color: var(--ink); background: var(--paper); }

/* Floating switcher (when GTranslate uses its built-in float container) */
.gt_floater_wrapper {
  font-family: var(--font-body) !important;
}
.gt_float_switcher,
.gtranslate_wrapper .gt_switcher {
  font-family: var(--font-body) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
}

/* GTranslate dropdown options (some looks use ul.gt_options) */
.gtranslate_wrapper .gt_options,
.gt_float_switcher .gt_options {
  background: var(--paper) !important;
  border: 1px solid #ececec !important;
  border-radius: 8px !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.08) !important;
  padding: 6px !important;
}
.gtranslate_wrapper .gt_options a,
.gt_float_switcher .gt_options a {
  color: var(--ink) !important;
  border-radius: 6px !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
  transition: background .15s ease, color .15s ease !important;
}
.gtranslate_wrapper .gt_options a:hover,
.gt_float_switcher .gt_options a:hover {
  background: var(--paper-tint) !important;
  color: var(--gold) !important;
}

/* Animations ---------------------------------------------------------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}

.reveal { opacity: 0; transform: translateY(40px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }

/* Respect reduced-motion preference -------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .cats-grid .cat-card,
  .products-grid .product { transition-delay: 0s !important; }
  .mobile-drawer { transition: none; }
  .mobile-drawer__backdrop { transition: none; }
}

/* 404 ----------------------------------------------------------------- */
.page-404 { text-align: center; max-width: 720px; }
.page-404 .section-eyebrow { display: inline-flex; justify-content: center; }
.page-404__title { font-size: clamp(48px, 7vw, 88px); margin: 16px auto 24px; }
.page-404__lead { color: #000; line-height: 1.7; margin-bottom: 32px; }
.page-404__actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* Search results ------------------------------------------------------ */
.search-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 24px; }
.search-list__item {
  display: block;
  padding: 24px;
  border: 1px solid #ececec;
  border-radius: 8px;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.search-list__item:hover {
  border-color: var(--ink);
  box-shadow: 0 6px 24px rgba(0,0,0,0.06);
  transform: translateY(-2px);
}
.search-list__item .post-meta,
.search-list__item .post-title { margin-bottom: 8px; }

/* Blog grid override on index ---------------------------------------- */
.blog-grid--3 { grid-template-columns: repeat(3, 1fr); }

/* Featured section empty state -------------------------------------- */
.featured .products-grid__empty { color: rgba(0,0,0,0.65); }

/* =====================================================================
   Site-wide search — header trigger + overlay + live-results list.

   Trigger lives in the header next to the cart. Click opens an overlay
   (in layouts/app.blade.php). The overlay's input fetches from
   /wp-json/elit-gastro/v1/search?q=… (debounced). Empty state shows
   recent queries (localStorage) + top categories. Keyboard nav: ↓↑ Enter
   Esc.
   ===================================================================== */

/* --- Header trigger button --------------------------------------- */
.search-trigger {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--paper-tint);
  color: var(--ink);
  border: 1px solid #ececec;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
  flex-shrink: 0;
}
.search-trigger:hover,
.search-trigger:focus-visible {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
@media (max-width: 980px) {
  .search-trigger { width: 40px; height: 40px; }
}

/* --- Overlay shell ---------------------------------------------- */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
}
.search-overlay.is-open { display: block; }
.search-overlay__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  opacity: 0;
  transition: opacity .25s ease;
}
.search-overlay.is-open .search-overlay__backdrop { opacity: 1; }

.search-overlay__panel {
  position: relative;
  max-width: 760px;
  margin: clamp(40px, 10vh, 120px) auto 24px;
  background: var(--paper);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.25);
  overflow: hidden;
  transform: translateY(-12px);
  opacity: 0;
  transition: transform .3s cubic-bezier(.65,0,.35,1), opacity .25s ease;
}
.search-overlay.is-open .search-overlay__panel {
  transform: translateY(0);
  opacity: 1;
}
@media (max-width: 720px) {
  .search-overlay__panel {
    margin: 12px;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    border-radius: 14px;
  }
}

.search-overlay__close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 38px;
  height: 38px;
  border: 1px solid #ececec;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: background .2s ease, border-color .2s ease;
}
.search-overlay__close:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* --- Form row -------------------------------------------------- */
.search-overlay__form {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 28px 70px 24px 28px;
  border-bottom: 1px solid #ececec;
  position: relative;
}
.search-overlay__input-icon {
  color: var(--muted);
  flex-shrink: 0;
  display: inline-flex;
}
.search-overlay__input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  padding: 6px 0;
  outline: 0;
}
.search-overlay__input::-webkit-search-cancel-button { display: none; }
.search-overlay__input::placeholder {
  color: #b8b8b8;
  font-weight: 300;
}
.search-overlay__submit {
  flex-shrink: 0;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  border-radius: 999px;
  padding: 12px 22px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.search-overlay__submit:hover {
  background: var(--gold);
  color: var(--ink);
}
@media (max-width: 520px) {
  .search-overlay__form { padding: 22px 60px 18px 18px; gap: 10px; }
  .search-overlay__submit { padding: 10px 16px; font-size: 12px; }
  .search-overlay__close { top: 14px; right: 14px; }
}

/* --- Results region -------------------------------------------- */
.search-overlay__results {
  padding: 20px 0;
  max-height: 60vh;
  overflow-y: auto;
}
@media (max-width: 720px) {
  .search-overlay__results { max-height: none; }
}

/* Empty state (no query yet) */
.search-overlay__empty {
  padding: 4px 28px 8px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.search-overlay__empty-title {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
}
.search-overlay__suggestions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.search-overlay__suggestion {
  display: inline-block;
  padding: 8px 14px;
  background: var(--paper-tint);
  border: 1px solid #ececec;
  border-radius: 999px;
  font-size: 13px;
  color: var(--ink);
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease;
}
.search-overlay__suggestion:hover,
.search-overlay__suggestion:focus-visible {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.search-overlay__recent-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.search-overlay__recent-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
}
.search-overlay__recent-list a:hover { color: var(--gold); }
.search-overlay__recent-list svg {
  color: var(--muted);
  flex-shrink: 0;
}
.search-overlay__recent-clear {
  margin-top: 8px;
  background: transparent;
  border: 0;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.search-overlay__recent-clear:hover { color: var(--ink); }

/* Result group */
.search-results__group {
  padding: 12px 28px;
}
.search-results__group + .search-results__group {
  border-top: 1px solid #ececec;
}
.search-results__group-title {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
}
.search-results__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Generic result row */
.search-results__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink);
  transition: background .15s ease;
}
.search-results__item:hover,
.search-results__item.is-active,
.search-results__item:focus-visible {
  background: var(--paper-tint);
  outline: 0;
}
.search-results__thumb {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 8px;
  background: var(--paper-tint);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.search-results__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.search-results__thumb-empty {
  width: 22px;
  height: 22px;
  color: #c4c4c4;
}
.search-results__body {
  flex: 1;
  min-width: 0;
}
.search-results__title {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-results__meta {
  font-size: 12px;
  color: var(--muted);
  margin: 2px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-results__price {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}
.search-results__price del {
  color: var(--muted);
  font-size: 12px;
  margin-right: 4px;
}
.search-results__price ins {
  background: transparent;
  text-decoration: none;
  color: var(--gold);
}

/* Category row variant */
.search-results__count {
  flex-shrink: 0;
  background: var(--paper-tint);
  color: var(--muted);
  font-size: 12px;
  padding: 1px 8px;
  border-radius: 999px;
}

/* "View all" footer */
.search-results__view-all {
  display: block;
  padding: 16px 28px;
  background: var(--paper-tint);
  border-top: 1px solid #ececec;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-align: center;
  transition: background .15s ease, color .15s ease;
}
.search-results__view-all:hover {
  background: var(--ink);
  color: var(--paper);
}

/* No-results state */
.search-results__nope {
  padding: 32px 28px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}
.search-results__nope strong { color: var(--ink); }

/* Loading shimmer */
.search-results__loading {
  padding: 24px 28px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 13px;
}
.search-results__loading::before {
  content: '';
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: search-spin .8s linear infinite;
}
@keyframes search-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .search-results__loading::before { animation: none; }
  .search-overlay__panel,
  .search-overlay__backdrop { transition: none; }
}

/* Body lock + scroll while overlay is open */
body.search-overlay-open { overflow: hidden; }

/* =====================================================================
   Shop filter sidebar (partials/shop-filters.blade.php)

   Desktop layout: 280px sidebar + flexible main column.
   Mobile (<981px): sidebar becomes a slide-in drawer from the left,
     opened via the "Filtriraj" button in the toolbar.
   ===================================================================== */

/* Two-column wrapper on the archive page (shop-page--with-filters) */
.shop-page--with-filters .shop-page__inner {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: clamp(28px, 4vw, 48px);
  align-items: start;
}

/* Filters-off variant — no sidebar, products grid spans the full container.
   Default for the shop archive (Customizer toggle `eg_shop_filters` = off). */
.shop-page--full .shop-page__inner { display: block; }
.shop-page--full .shop-page__main { min-width: 0; }
.shop-page--with-filters .shop-page__main { min-width: 0; }

/* Category description block — sits BELOW the products grid on a product
   category archive. SEO-friendly intro copy that doesn't fight the products
   for visual primacy. */
.shop-category-copy {
  padding: clamp(48px, 7vw, 88px) 0 clamp(64px, 8vw, 96px);
  background: var(--paper);
}
.shop-category-copy__inner { max-width: 820px; }
.shop-category-copy__body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: #000;
}
.shop-category-copy__body :first-child { margin-top: 0; }
.shop-category-copy__body :last-child  { margin-bottom: 0; }
.shop-category-copy__body p { margin: 0 0 14px; }
.shop-category-copy__body h2,
.shop-category-copy__body h3 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  margin: 24px 0 12px;
  letter-spacing: -0.01em;
}
.shop-category-copy__body h2 { font-size: 24px; }
.shop-category-copy__body h3 { font-size: 19px; }
.shop-category-copy__body a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 3px;
}
.shop-category-copy__body a:hover { color: var(--gold); }

@media (max-width: 980px) {
  .shop-page--with-filters .shop-page__inner {
    grid-template-columns: 1fr;
  }
}

/* --- Sidebar shell ----------------------------------------------- */
.shop-filters {
  background: var(--paper);
  border: 1px solid #ececec;
  border-radius: 14px;
  padding: clamp(16px, 1.8vw, 22px);
  position: sticky;
  top: clamp(88px, 12vh, 110px);
  /* Hard lid on width — anything wider than the 300px grid column gets clipped
     so a long category name + count badge can never spill into the products
     area. Combined with the min-width: 0 chain below, this makes the labels
     ellipsize correctly. */
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}
@media (max-width: 980px) {
  /* On mobile, the sidebar becomes an off-canvas drawer. */
  .shop-filters {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(360px, 92%);
    border: 0;
    border-radius: 0;
    border-right: 1px solid #ececec;
    z-index: 70;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform .35s cubic-bezier(.65,0,.35,1);
    visibility: hidden;
  }
  .shop-filters.is-open {
    transform: translateX(0);
    visibility: visible;
    box-shadow: 10px 0 40px rgba(0,0,0,0.18);
  }
}

/* Header --------------------------------------------------------- */
.shop-filters__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 18px;
}
.shop-filters__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.shop-filters__active-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--gold);
  display: inline-block;
}
.shop-filters__close {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid #ececec;
  background: transparent;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.shop-filters__close:hover {
  background: var(--paper-tint);
  border-color: var(--ink);
}
@media (min-width: 981px) { .shop-filters__close { display: none; } }

/* Sections ------------------------------------------------------- */
.shop-filters__group {
  border: 0;
  padding: 0 0 18px;
  margin: 0 0 18px;
  border-bottom: 1px solid #ececec;
}
.shop-filters__group:last-of-type { border-bottom: 0; }
.shop-filters__legend {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 0 12px;
  margin: 0;
}

/* Categories list ----------------------------------------------- */
.shop-filters__cats {
  list-style: none;
  margin: 0;
  padding: 0;
}
.shop-filters__cat-item { margin: 0; min-width: 0; }
.shop-filters__cat-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}
.shop-filters__subcats {
  list-style: none;
  margin: 4px 0 4px 30px;
  padding: 4px 0;
  border-left: 1px solid #ececec;
  padding-left: 12px;
  display: none;
}
.shop-filters__cat-item.is-expanded > .shop-filters__subcats { display: block; }

/* Expand toggle (chevron) on parent rows */
.shop-filters__expand {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.shop-filters__expand:hover {
  background: var(--paper-tint);
  color: var(--ink);
}
.shop-filters__expand[aria-expanded="true"] {
  transform: rotate(180deg);
  color: var(--ink);
}

/* Custom checkboxes -------------------------------------------- */
.shop-filters__check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 6px;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  font-size: 14px;
  color: var(--ink);
  flex: 1;
  min-width: 0;
  transition: background .15s ease;
}
.shop-filters__check:hover { background: var(--paper-tint); }
.shop-filters__check input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.shop-filters__check-box {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border: 1.5px solid #d0d0d0;
  border-radius: 4px;
  background: var(--paper);
  position: relative;
  transition: border-color .15s ease, background .15s ease;
}
.shop-filters__check-box::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid var(--ink);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform .15s ease;
}
.shop-filters__check input:checked ~ .shop-filters__check-box {
  border-color: var(--gold);
  background: var(--gold);
}
.shop-filters__check input:checked ~ .shop-filters__check-box::after {
  transform: rotate(45deg) scale(1);
}
.shop-filters__check input:focus-visible ~ .shop-filters__check-box {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.shop-filters__check-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shop-filters__count {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--muted);
  background: var(--paper-tint);
  padding: 1px 8px;
  border-radius: 999px;
  min-width: 24px;
  text-align: center;
}
.shop-filters__check--child {
  font-size: 13.5px;
  color: #000;
}

/* Price range -------------------------------------------------- */
.shop-filters__price {
  display: flex;
  align-items: center;
  gap: 8px;
}
.shop-filters__price-field {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  border: 1px solid #ececec;
  border-radius: 10px;
  background: var(--paper);
  padding: 0 12px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.shop-filters__price-field:focus-within {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
}
.shop-filters__price-field input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 10px 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  outline: 0;
  -moz-appearance: textfield;
  appearance: textfield;
}
.shop-filters__price-field input::-webkit-inner-spin-button,
.shop-filters__price-field input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.shop-filters__price-suffix {
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  padding-left: 4px;
}
.shop-filters__price-sep {
  color: var(--muted);
  font-weight: 500;
}
.shop-filters__price-hint {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--muted);
}

/* iOS-style toggles ------------------------------------------- */
.shop-filters__toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
}
.shop-filters__toggle input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.shop-filters__toggle-track {
  flex-shrink: 0;
  position: relative;
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: #e0e0e0;
  transition: background .2s ease;
}
.shop-filters__toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--paper);
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  transition: transform .2s cubic-bezier(.65,0,.35,1);
}
.shop-filters__toggle input:checked ~ .shop-filters__toggle-track {
  background: var(--gold);
}
.shop-filters__toggle input:checked ~ .shop-filters__toggle-track .shop-filters__toggle-thumb {
  transform: translateX(18px);
}
.shop-filters__toggle input:focus-visible ~ .shop-filters__toggle-track {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Action row -------------------------------------------------- */
.shop-filters__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin-top: 18px;
}
.shop-filters__apply {
  width: 100%;
  justify-content: center;
}
.shop-filters__clear {
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(138,138,138,0.4);
  transition: color .15s ease, text-decoration-color .15s ease;
}
.shop-filters__clear:hover {
  color: var(--ink);
  text-decoration-color: var(--ink);
}

/* Mobile backdrop --------------------------------------------- */
.shop-filters__backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 65;
  opacity: 0;
  transition: opacity .25s ease;
}
@media (max-width: 980px) {
  .shop-filters__backdrop.is-open {
    display: block;
    opacity: 1;
  }
}

/* Toolbar "Filtriraj" button (mobile only) -------------------- */
.shop-toolbar__filter-btn {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid #ececec;
  border-radius: 999px;
  background: var(--paper);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.shop-toolbar__filter-btn:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
@media (max-width: 980px) {
  .shop-toolbar__filter-btn { display: inline-flex; }
}

/* Reduced-motion respect */
@media (prefers-reduced-motion: reduce) {
  .shop-filters,
  .shop-filters__backdrop,
  .shop-filters__toggle-track,
  .shop-filters__toggle-thumb,
  .shop-filters__expand,
  .shop-filters__check-box,
  .shop-filters__check-box::after { transition: none; }
}

/* =====================================================================
   Navigation submenus + mega menu

   Three modes:
     1. Standard dropdown — any top-level item that has sub-items renders
        a 240px-wide card panel on hover/focus.
     2. Mega menu — top-level item with CSS class `mega-menu` (added in WP
        Menus → Screen Options → CSS Classes) spreads its sub-menu across
        the page width as a multi-column grid. Direct children become
        column headings, their sub-items become the column's links.
     3. Mobile drawer — same nested markup; rendered as collapsible
        accordion sections. Tapping a parent toggles the section open.

   Markup is the WP-default nav-menu output:
     <ul class="nav-links">
       <li class="menu-item menu-item-has-children mega-menu">    ← optional class
         <a href="...">Top label</a>
         <ul class="sub-menu">
           <li class="menu-item-has-children">
             <a href="...">Column heading / sub-link</a>
             <ul class="sub-menu">...</ul>
           </li>
           ...
         </ul>
       </li>
     </ul>
   ===================================================================== */

/* Top-level item is the positioning context for the dropdown. */
.nav-links > li { position: relative; }

/* Parent triggers fill the header height vertically so the cursor can
   travel from the trigger label down to the absolutely-positioned panel
   below the header without crossing a dead zone. Without this, the <li>
   is only ~28px tall (label height) inside a ~78px header — leaving 25px
   below the label where :hover would drop before the cursor reaches the
   panel and the menu would snap closed.

   The <a> stays vertically centred via flex inside the now-tall <li>;
   the gold underline (on a::after) keeps its visual position because it's
   positioned relative to the <a>, not the <li>. */
.nav-links > li.menu-item-has-children {
  display: flex;
  align-items: center;
  padding: 25px 0;
}

/* Chevron next to parents — uses an inline SVG so it doesn't clash with the
   gold-underline pseudo-element on the link. */
.nav-links .menu-item-has-children > a {
  padding-right: 16px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-position: right 0 center;
  background-repeat: no-repeat;
  background-size: 10px;
  transition: color .2s, background-image .2s;
}
.nav-links .menu-item-has-children:hover > a,
.nav-links .menu-item-has-children:focus-within > a {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f4c241' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* Standard dropdown panel ------------------------------------------- */
.nav-links .sub-menu {
  position: absolute;
  top: 100%;
  left: -8px;
  min-width: 240px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: var(--paper);
  border: 1px solid #ececec;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  /*
    pointer-events is the actual gate that prevents the panel from catching
    hover events while it's hidden or fading out. `visibility` transitions are
    discrete (the value stays at `visible` for the full duration, then snaps
    to `hidden`), so on hover-out the panel remained interactive for 200ms
    and could re-catch the cursor as it crossed the hero area — which made
    the menu feel like it "opened from nowhere" when moving over the hero.
    `pointer-events` has no transition: it flips instantly, so the moment
    `:hover` leaves the trigger the panel stops receiving events.
  */
  pointer-events: none;
  transition: opacity .2s ease, visibility 0s linear .2s, transform .2s ease;
  z-index: 60;
}
.nav-links > li:hover > .sub-menu,
.nav-links > li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity .2s ease, visibility 0s linear 0s, transform .2s ease;
}
.nav-links .sub-menu li { margin: 0; padding: 0; }
.nav-links .sub-menu a {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  background: transparent;
  transition: background .2s ease, color .2s ease;
  white-space: nowrap;
}
.nav-links .sub-menu a:hover,
.nav-links .sub-menu a:focus-visible {
  background: var(--paper-tint);
  color: var(--ink);
}
/* Submenu links never get the underline pseudo. */
.nav-links .sub-menu a::after,
.nav-links .sub-menu a::before { display: none; }

/* Nested third-level submenu (cascades to the right of its parent). */
.nav-links .sub-menu .menu-item-has-children { position: relative; }
.nav-links .sub-menu .sub-menu {
  top: -8px;
  left: 100%;
  margin-left: 4px;
}
/* Show the third-level panel when its parent <li> inside the second-level
   sub-menu is hovered or focused. Without this rule the level-3 inherits
   `opacity: 0; visibility: hidden; pointer-events: none` from the base
   .sub-menu rule and stays unreachable — which is exactly the "subcategory
   links aren't clickable" symptom on a 3-level menu that isn't tagged as
   mega-menu. Mega-menu structures don't need this because their level-3
   is statically visible (position: static + opacity: 1). */
.nav-links .sub-menu > li.menu-item-has-children:hover > .sub-menu,
.nav-links .sub-menu > li.menu-item-has-children:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity .2s ease, visibility 0s linear 0s, transform .2s ease;
}

/* Mega menu ----------------------------------------------------------
   When the top-level <li> has class `mega-menu`, the panel spans the page
   instead of the parent, and its first level of children becomes a grid of
   columns with their own children listed beneath. */
.nav-links > li.mega-menu { position: static; }
.nav-links > li.mega-menu > .sub-menu {
  left: 0;
  right: 0;
  width: calc(100% - (var(--pad-x) * 2));
  max-width: var(--max);
  margin: 0 auto;             /* flush with header — no gap to bridge */
  padding: 32px 36px 28px;
  display: grid;
  /* 180px minimum keeps 6 columns fitting on one row at 1320px max width
     (180×6 + 28×5 gaps = 1220px content area). Wider headings still fit
     because the columns can grow via 1fr. */
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 24px 28px;
  align-items: start;
  /* Lock in a fully opaque panel so the underlying page never bleeds
     through, even if a parent rule's background gets dropped. */
  background: var(--paper);
  border: 1px solid #ececec;
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.10);
}
.nav-links > li.mega-menu > .sub-menu > li > a {
  display: block;
  padding: 0 0 10px;
  margin: 0 0 8px;
  border-radius: 0;
  border-bottom: 1px solid #ececec;
  background: transparent !important;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: normal;
}
.nav-links > li.mega-menu > .sub-menu > li > a:hover {
  color: var(--ink);
}
/* Inside the mega panel, the inner sub-menu is a static stack of links,
   not a separate popout. */
.nav-links > li.mega-menu .sub-menu .sub-menu {
  position: static;
  opacity: 1;
  visibility: visible;
  transform: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-links > li.mega-menu .sub-menu .sub-menu a {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  padding: 8px 10px;
  white-space: normal;
}
/* "Pogledaj sve →" link inside each mega-menu column. Sits at the bottom
   of the column and uses the brand gold so it reads as a CTA, not just
   another category entry. */
.nav-links > li.mega-menu .sub-menu .mega-view-all {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px dashed #ececec;
}
.nav-links > li.mega-menu .sub-menu .mega-view-all a {
  color: var(--gold);
  font-weight: 600;
  font-size: 13px;
}
.nav-links > li.mega-menu .sub-menu .mega-view-all a:hover,
.nav-links > li.mega-menu .sub-menu .mega-view-all a:focus-visible {
  color: var(--ink);
}

/* Don't render desktop dropdowns at all on mobile — the drawer takes over. */
@media (max-width: 980px) {
  .nav-links .sub-menu { display: none; }
}

/* Mobile drawer — accordion-style nested menus ----------------------
   .menu-item-has-children gets a +/− indicator via ::after; tapping the
   parent toggles the `.is-open` class which reveals the .sub-menu (JS in
   app.js handles the click). */
.mobile-drawer__list .menu-item-has-children > a {
  position: relative;
  padding-right: 36px;
}
/* The default drawer-list ::after is a right-arrow on each leaf; for parents
   we swap it for a plus/minus toggle indicator. */
.mobile-drawer__list .menu-item-has-children > a::after {
  content: '+';
  font-size: 24px;
  font-weight: 300;
  color: rgba(255,255,255,0.5);
  transition: color .2s ease, transform .2s ease;
}
.mobile-drawer__list .menu-item-has-children.is-open > a::after {
  content: '−';
  color: var(--gold);
}
.mobile-drawer__list .menu-item-has-children:hover > a::after,
.mobile-drawer__list .menu-item-has-children:focus-within > a::after {
  color: var(--gold);
}

.mobile-drawer__list .sub-menu {
  list-style: none;
  margin: 0;
  padding: 4px 0 12px 16px;
  border-left: 2px solid var(--ink-line);
  display: none;
}
.mobile-drawer__list .menu-item-has-children.is-open > .sub-menu {
  display: block;
}
.mobile-drawer__list .sub-menu a {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
  padding: 12px 0;
  color: rgba(255,255,255,0.8);
  text-transform: none;
}
.mobile-drawer__list .sub-menu a::after { content: none; }
.mobile-drawer__list .sub-menu a:hover,
.mobile-drawer__list .sub-menu a:focus-visible,
.mobile-drawer__list .sub-menu .current-menu-item > a {
  color: var(--gold);
  padding-left: 0;
}

/* =====================================================================
   Mobile mega-menu — special-case override

   Goal: one tap on the top-level mega item expands the WHOLE structure at
   once (columns + their links), instead of forcing the user to expand each
   column individually. Column headings become styled section dividers,
   not collapsible accordions.
   ===================================================================== */

/* Auto-expand every nested sub-menu when the mega-menu parent is open. */
.mobile-drawer__list .mega-menu.is-open .sub-menu { display: block; }

/* Column container: drop the indent + left border (mega is wide, not nested
   in the visual sense). */
.mobile-drawer__list .mega-menu > .sub-menu {
  padding: 8px 0 16px;
  border-left: 0;
}

/* Column heading row (the parent <li> inside the mega's sub-menu).
   Style as an uppercase section divider, NOT as a tappable accordion. */
.mobile-drawer__list .mega-menu > .sub-menu > .menu-item-has-children > a {
  display: block;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  padding: 24px 0 6px;
  margin-top: 4px;
  border-bottom: 1px solid var(--ink-line);
  padding-right: 0;
}
.mobile-drawer__list .mega-menu > .sub-menu > .menu-item-has-children:first-child > a {
  padding-top: 8px;
  margin-top: 0;
}
.mobile-drawer__list .mega-menu > .sub-menu > .menu-item-has-children > a::after {
  display: none;  /* no +/− toggle on column headings */
}
.mobile-drawer__list .mega-menu > .sub-menu > .menu-item-has-children > a:hover,
.mobile-drawer__list .mega-menu > .sub-menu > .menu-item-has-children > a:focus-visible {
  color: var(--gold);
}

/* Column links (third level inside mega): clean body text, no indent. */
.mobile-drawer__list .mega-menu > .sub-menu > .menu-item-has-children > .sub-menu {
  padding: 6px 0 0;
  border-left: 0;
  margin: 0;
}
.mobile-drawer__list .mega-menu > .sub-menu > .menu-item-has-children > .sub-menu a {
  font-size: 16px;
  padding: 10px 0;
  font-weight: 400;
  color: var(--paper);
}

/* =====================================================================
   Contact page (template-contact.blade.php)
   ===================================================================== */
.contact-page {
  padding: clamp(48px, 7vw, 96px) 0 clamp(64px, 8vw, 120px);
}
.contact-page__grid {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
@media (max-width: 860px) {
  .contact-page__grid { grid-template-columns: 1fr; }
}

/* --- Contact info card (left column) ---------------------------- */
.contact-info {
  background: var(--paper-tint);
  border-radius: 14px;
  padding: clamp(28px, 4vw, 40px);
  position: sticky;
  top: 96px;
}
@media (max-width: 860px) {
  .contact-info { position: static; }
}
.contact-info__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(20px, 2vw, 24px);
  letter-spacing: -0.02em;
  margin: 0 0 24px;
  color: var(--ink);
}
.contact-info__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.contact-info__list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.contact-info__list svg {
  color: var(--gold);
  flex-shrink: 0;
  margin-top: 3px;
}
.contact-info__label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.contact-info__value {
  display: block;
  font-size: 15px;
  color: var(--ink);
  line-height: 1.55;
}
a.contact-info__value {
  text-decoration: none;
  transition: color .2s ease;
}
a.contact-info__value:hover { color: var(--gold); }
.contact-info__about {
  margin: 28px 0 0;
  padding-top: 24px;
  border-top: 1px solid rgba(0,0,0,0.08);
  font-size: 13px;
  line-height: 1.65;
  color: var(--muted);
}

/* --- Contact form (right column) -------------------------------- */
.contact-form-wrap {
  background: var(--paper);
  border: 1px solid #ececec;
  border-radius: 14px;
  padding: clamp(28px, 4vw, 48px);
}
.contact-form__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  color: var(--ink);
}
.contact-form__lead {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0 0 28px;
}
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 520px) {
  .contact-form__row { grid-template-columns: 1fr; }
}
.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}
.contact-form__field > label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}
.contact-form__field .required { color: var(--gold); margin-left: 2px; }
.contact-form__field input[type="text"],
.contact-form__field input[type="email"],
.contact-form__field input[type="tel"],
.contact-form__field textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid #ececec;
  border-radius: 12px;
  background: var(--paper);
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.contact-form__field input:focus,
.contact-form__field textarea:focus {
  outline: 0;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
}
.contact-form__field textarea {
  resize: vertical;
  min-height: 140px;
  line-height: 1.55;
}

.contact-form__checkbox {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 13px;
  color: #000;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.55;
  cursor: pointer;
}
.contact-form__checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--ink);
  flex-shrink: 0;
  cursor: pointer;
}

/* Honeypot — visually hidden, off-screen for both sighted users and AT. */
.contact-form__honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-form__actions { margin-top: 8px; }
.contact-form__submit {
  position: relative;
  min-width: 200px;
  padding: 16px 32px;
}
.contact-form__submit:disabled { cursor: wait; opacity: 0.75; }
.contact-form__submit-spinner {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: contact-spin .8s linear infinite;
}
.contact-form.is-loading .contact-form__submit-label { opacity: 0; }
.contact-form.is-loading .contact-form__submit-spinner { display: block; }
@keyframes contact-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .contact-form__submit-spinner { animation: none; }
}

.contact-form__status {
  margin-top: 4px;
  padding: 0;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.5;
  display: none;
}
.contact-form__status.is-success,
.contact-form__status.is-error {
  display: block;
  padding: 14px 16px;
  border: 1px solid transparent;
}
.contact-form__status.is-success {
  background: rgba(45,140,74,0.08);
  color: #2d8c4a;
  border-color: rgba(45,140,74,0.2);
}
.contact-form__status.is-error {
  background: rgba(196,68,68,0.08);
  color: #c44;
  border-color: rgba(196,68,68,0.2);
}

/* Editor content below the two-column block. */
.contact-page__extra {
  margin-top: clamp(48px, 6vw, 96px);
  padding-top: clamp(32px, 4vw, 56px);
  border-top: 1px solid #ececec;
}