/* ============================================================
   ZAWSZE Z BOGIEM — v3 "Devotional Editorial"
   Polish Catholic devotional × Aesop editorial restraint
   ============================================================ */

/* ----- Tokens ----- */
:root, .zzb-theme {
  --zzb-bg:        #fbf6ec;
  --zzb-bg-warm:   #f4ecdb;
  --zzb-bg-deep:   #ede2c6;
  --zzb-paper:     #fffaf0;
  --zzb-ink:       #1f1c17;
  --zzb-ink-soft:  #6b614f;
  --zzb-ink-mute:  #9a8e76;
  --zzb-gold:      #b8923c;
  --zzb-gold-light:#caa256;
  --zzb-gold-dark: #8d6f25;
  --zzb-gold-soft: rgba(184, 146, 60, 0.18);
  --zzb-line:      #e8dfc8;

  --zzb-display: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --zzb-body:    'Assistant', system-ui, sans-serif;
  --zzb-script:  'Sacramento', 'Caveat', cursive;

  --zzb-page:    min(1320px, calc(100vw - 4rem));
  --zzb-narrow:  min(720px, calc(100vw - 4rem));
  --zzb-wide:    min(1480px, calc(100vw - 4rem));

  --zzb-ease-soft: cubic-bezier(0.32, 0.72, 0.16, 1);
  --zzb-ease-snap: cubic-bezier(0.65, 0, 0.35, 1);

  --zzb-shadow-paper: 0 1px 2px rgba(31,28,23,0.04), 0 4px 12px rgba(31,28,23,0.04);
  --zzb-shadow-lift:  0 16px 40px rgba(31,28,23,0.08);

  /* Override Blocksy palette (so default Blocksy CSS uses our colors) */
  --theme-palette-color-1: var(--zzb-gold);
  --theme-palette-color-2: var(--zzb-gold-dark);
  --theme-palette-color-3: var(--zzb-ink);
  --theme-palette-color-4: var(--zzb-ink);
  --theme-palette-color-5: var(--zzb-line);
  --theme-palette-color-6: var(--zzb-paper);
  --theme-palette-color-7: var(--zzb-bg);
  --theme-palette-color-8: var(--zzb-gold);
  --theme-link-initial-color: var(--zzb-gold-dark);
  --theme-link-hover-color:   var(--zzb-gold);
}

/* ----- Reset essentials ----- */
.zzb-theme *, .zzb-theme *::before, .zzb-theme *::after { box-sizing: border-box; }

/* ----- Selection + scrollbar ----- */
.zzb-theme ::selection { background: var(--zzb-gold-light); color: var(--zzb-bg); }
html { scrollbar-width: thin; scrollbar-color: var(--zzb-gold-light) var(--zzb-bg-warm); scroll-behavior: smooth; }
html::-webkit-scrollbar { width: 10px; height: 10px; }
html::-webkit-scrollbar-track { background: var(--zzb-bg-warm); }
html::-webkit-scrollbar-thumb { background: var(--zzb-gold-light); border-radius: 999px; border: 2px solid var(--zzb-bg-warm); }

/* ----- Body / globals ----- */
.zzb-theme {
  background: var(--zzb-bg);
  color: var(--zzb-ink);
  font-family: var(--zzb-body);
  font-size: 16px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern', 'liga';
}

/* Subtle paper grain — fixed overlay */
.zzb-theme::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.045;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ----- Typography ----- */
.zzb-theme h1, .zzb-theme h2, .zzb-theme h3, .zzb-theme h4 {
  font-family: var(--zzb-display);
  color: var(--zzb-ink);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
}
.zzb-theme h1 { font-size: clamp(3rem, 7vw, 5.5rem); font-weight: 300; font-style: italic; }
.zzb-theme h2 { font-size: clamp(2.2rem, 4.5vw, 3.6rem); font-weight: 400; font-style: italic; }
.zzb-theme h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 500; }

.zzb-theme p { color: var(--zzb-ink); }

.zzb-theme a { color: var(--zzb-gold-dark); text-decoration: none; transition: color .3s var(--zzb-ease-soft); }
.zzb-theme a:hover { color: var(--zzb-gold); }

/* Eyebrow / kicker */
.zzb-eyebrow {
  display: inline-block;
  font-family: var(--zzb-body);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--zzb-gold-dark);
}

/* Decorative ornament: ── ✦ ── */
.zzb-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 2.5rem auto;
  max-width: 220px;
}
.zzb-rule::before, .zzb-rule::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--zzb-gold-light);
  opacity: 0.55;
}
.zzb-rule__sym {
  color: var(--zzb-gold);
  font-size: 1rem;
  line-height: 1;
}

/* ----- Promo bar (above header) ----- */
.zzb-promo-bar {
  background: var(--zzb-paper);
  color: var(--zzb-ink-soft);
  text-align: center;
  padding: 0.7rem 1rem;
  font-size: 0.83rem;
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--zzb-line);
  position: relative;
  z-index: 100;
}
.zzb-promo-bar a { color: var(--zzb-gold-dark); font-weight: 600; margin-left: 0.4em; }
.zzb-promo-bar a::after { content: ' →'; transition: margin-left .3s; display: inline-block; }
.zzb-promo-bar a:hover { color: var(--zzb-gold); }
.zzb-promo-bar a:hover::after { margin-left: 4px; }

/* ----- Header (Blocksy override) ----- */
.zzb-theme .ct-header {
  background: var(--zzb-bg) !important;
  border-bottom: 1px solid var(--zzb-line);
}
.zzb-theme .ct-header [data-row="middle"] { padding: 1.2rem 0 !important; }

/* Hide default Blocksy logo & inject our custom inline SVG via PHP — see functions.php */
.zzb-theme [data-id="logo"] .ct-text-logo,
.zzb-theme [data-id="logo"] .ct-image-default {
  display: none !important;
}
.zzb-theme [data-id="logo"] a.ct-image-container,
.zzb-theme [data-id="logo"] a {
  display: inline-flex !important;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}
.zzb-logo {
  display: inline-flex !important;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--zzb-ink) !important;
}
.zzb-logo__dove {
  width: 38px;
  height: 38px;
  color: var(--zzb-gold);
  flex-shrink: 0;
}
.zzb-logo__text {
  font-family: var(--zzb-script);
  font-size: 1.85rem;
  color: var(--zzb-gold-dark);
  line-height: 1;
  white-space: nowrap;
  letter-spacing: 0.005em;
  padding-top: 0.3rem; /* optical alignment with dove */
}

/* Menu links */
.zzb-theme [data-id="menu"] a {
  font-family: var(--zzb-body) !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  color: var(--zzb-ink) !important;
  text-transform: none !important;
  position: relative;
  transition: color .3s var(--zzb-ease-soft);
}
.zzb-theme [data-id="menu"] > ul > li > a::after {
  content: '';
  position: absolute;
  bottom: -6px; left: 50%;
  width: 0; height: 1px;
  background: var(--zzb-gold);
  transition: width .35s var(--zzb-ease-soft);
  transform: translateX(-50%);
}
.zzb-theme [data-id="menu"] a:hover { color: var(--zzb-gold-dark) !important; }
.zzb-theme [data-id="menu"] > ul > li > a:hover::after,
.zzb-theme [data-id="menu"] .current-menu-item > a::after {
  width: 24px;
}

/* ----- Buttons (gold pill, restrained shadow) ----- */
.zzb-theme .button,
.zzb-theme .ct-button,
.zzb-theme .wp-block-button__link,
.zzb-theme .single_add_to_cart_button,
.zzb-theme button[type="submit"]:not(.zzb-newsletter__btn-bare),
.zzb-theme input[type="submit"],
.zzb-theme .checkout-button,
.zzb-cta {
  font-family: var(--zzb-body) !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.05em !important;
  text-transform: none !important;
  background: var(--zzb-gold-light) !important;
  color: var(--zzb-bg) !important;
  border: 1px solid var(--zzb-gold-light) !important;
  padding: 0.95em 2.4em !important;
  border-radius: 999px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
  transition: all .35s var(--zzb-ease-soft);
  cursor: pointer;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  text-decoration: none !important;
  line-height: 1.2;
}
.zzb-theme .button:hover,
.zzb-theme .ct-button:hover,
.zzb-theme .wp-block-button__link:hover,
.zzb-theme .single_add_to_cart_button:hover,
.zzb-theme button[type="submit"]:hover,
.zzb-theme .checkout-button:hover,
.zzb-cta:hover {
  background: var(--zzb-gold-dark) !important;
  border-color: var(--zzb-gold-dark) !important;
  color: var(--zzb-bg) !important;
  transform: translateY(-1px);
}

.zzb-theme .is-style-outline .wp-block-button__link {
  background: transparent !important;
  border: 1.5px solid var(--zzb-gold-dark) !important;
  color: var(--zzb-gold-dark) !important;
  box-shadow: none !important;
}
.zzb-theme .is-style-outline .wp-block-button__link:hover {
  background: var(--zzb-gold-dark) !important;
  color: var(--zzb-bg) !important;
}

/* Search overlay submit — make Blocksy's built-in magnifying-glass visible.
   Blocksy renders an <svg class="ct-icon ct-search-button-content"> inside the
   button but uses --theme-button-text-initial-color (near-white) for its fill,
   which disappears on our gold pill. Force the SVG to dark ink. */
.zzb-theme .ct-search-form button[type="submit"] svg.ct-icon,
.zzb-theme form[role="search"] button[type="submit"] svg.ct-icon {
  width: 1.1em !important;
  height: 1.1em !important;
  flex-shrink: 0 !important;
  fill: var(--zzb-ink) !important;
}
.zzb-theme .ct-search-form button[type="submit"] svg.ct-icon path,
.zzb-theme form[role="search"] button[type="submit"] svg.ct-icon path {
  fill: var(--zzb-ink) !important;
}

/* Search modal — keep the form compact. Blocksy defaults to a 90px-tall
   input which dwarfs the gold submit pill. Cap width and shrink height. */
.zzb-theme #search-modal .ct-search-form {
  max-width: 640px;
  margin: 0 auto;
}
.zzb-theme #search-modal input[type="search"].modal-field {
  height: auto !important;
  min-height: 0 !important;
  padding: 14px 22px !important;
  font-size: 1rem !important;
}
.zzb-theme #search-modal .ct-search-form-controls {
  padding: 6px !important;
}

/* Search results page — Blocksy's `.entry-card.card-content` paints a gold
   hero block above each result, swallowing the title text. Strip the block
   and restore readable ink-on-cream cards.
   NOTE: `.zzb-theme` and `[data-prefix="search"]` are both on <body>, so they
   must be combined without a space (same element, not descendant). */
body.zzb-theme[data-prefix="search"] .entry-card,
body.zzb-theme[data-prefix="search"] .entry-card.card-content {
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
}
body.zzb-theme[data-prefix="search"] .entry-card .entry-title,
body.zzb-theme[data-prefix="search"] .entry-card .entry-title a {
  color: var(--zzb-ink) !important;
}
body.zzb-theme[data-prefix="search"] .entry-card .entry-meta,
body.zzb-theme[data-prefix="search"] .entry-card .entry-meta a {
  color: var(--zzb-gold-dark) !important;
}
body.zzb-theme[data-prefix="search"] .entry-card .entry-excerpt,
body.zzb-theme[data-prefix="search"] .entry-card .entry-content {
  color: var(--zzb-ink) !important;
}
/* Hide the author byline ("SITEK.MONTAGE") in search result cards — it's
   noisy admin metadata, not customer-facing info. */
body.zzb-theme[data-prefix="search"] .entry-card .entry-meta .meta-author,
body.zzb-theme[data-prefix="search"] .entry-card .entry-meta li.meta-author {
  display: none !important;
}

/* WooCommerce single product — quantity pill.
   Blocksy renders `data-type="type-2"` (stacked up/down arrows next to a
   narrow input). Force a clean horizontal `[-] [n] [+]` layout. */
body.zzb-theme .quantity,
body.zzb-theme .quantity[data-type="type-2"] {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  width: auto !important;
  height: 55px;
  padding: 0 !important;
  background: var(--zzb-paper) !important;
  border: 1.5px solid var(--zzb-gold-200);
  border-radius: 999px;
  overflow: hidden;
}
body.zzb-theme .quantity .ct-decrease,
body.zzb-theme .quantity .ct-increase {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  width: 44px !important;
  height: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}
body.zzb-theme .quantity .ct-decrease { order: 1; }
body.zzb-theme .quantity input.qty {
  order: 2 !important;
  flex: 0 0 auto !important;
  width: 56px !important;
  height: 100% !important;
  text-align: center !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  font-size: 1rem !important;
  color: var(--zzb-ink) !important;
  appearance: textfield;
}
body.zzb-theme .quantity .ct-increase { order: 3; }

/* Product loop cards (shop archive, category, related, upsells…) —
   Blocksy gives the inner <a> the same ~373 px height as the figure
   (cause unknown — `height: auto` doesn't override). Use plain
   `display: block` with `max-height` + overflow hidden so the title
   spans the full card width AND gets clipped to ~3 lines.
   (`-webkit-line-clamp` collapses width to content, so the title
   rendered as a narrow column on the left — avoid.) */
body.zzb-theme ul.products li.product .woocommerce-loop-product__title,
body.zzb-theme .related li.product .woocommerce-loop-product__title,
body.zzb-theme .up-sells li.product .woocommerce-loop-product__title,
body.zzb-theme .cross-sells li.product .woocommerce-loop-product__title {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: 4.4em !important;
  aspect-ratio: auto !important;
  overflow: hidden !important;
  flex: 0 0 auto !important;
  margin-top: 12px !important;
  padding: 0 !important;
}
body.zzb-theme ul.products li.product .woocommerce-loop-product__link,
body.zzb-theme .related li.product .woocommerce-loop-product__link,
body.zzb-theme .up-sells li.product .woocommerce-loop-product__link,
body.zzb-theme .cross-sells li.product .woocommerce-loop-product__link {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: 4.4em !important;
  overflow: hidden !important;
  line-height: 1.4 !important;
  font-size: 1rem !important;
}

/* Header cart icon — injected by core.js next to the search trigger.
   Mirrors Blocksy's `.ct-header-search` button so it picks up the
   same cream/gold colours via the existing header rules. */
.zzb-header-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 40px;
  height: 40px;
  margin-left: 4px;
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.zzb-header-cart:hover {
  color: var(--zzb-gold-light);
}
.zzb-header-cart .zzb-cart-count {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--zzb-gold-light);
  color: var(--zzb-bg);
  font-family: var(--zzb-body, var(--font-body));
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 1px 2px rgba(0,0,0,0.18);
  pointer-events: none;
}
.zzb-header-cart:not(.has-items) .zzb-cart-count {
  display: none;
}

/* WooCommerce Cart/Checkout block — repaint the default WP blue
   "Proceed to Checkout" button as our gold pill. The block uses
   `--wp--preset--color--*` design tokens, so nuking those plus the
   raw classes covers every render path. */
.zzb-theme .wc-block-cart__submit-button,
.zzb-theme .wc-block-components-checkout-button,
.zzb-theme .wp-block-woocommerce-proceed-to-checkout-block a,
.zzb-theme a.wc-block-components-button.contained,
.zzb-theme button.wc-block-components-button.contained {
  background: var(--zzb-gold-light) !important;
  background-color: var(--zzb-gold-light) !important;
  color: var(--zzb-bg) !important;
  border: 1px solid var(--zzb-gold-light) !important;
  border-radius: 999px !important;
  padding: 0.95em 2.4em !important;
  font-family: var(--zzb-body, var(--font-body)) !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.05em !important;
  text-transform: none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
  transition: background var(--dur-fast) var(--ease-out);
}
.zzb-theme .wc-block-cart__submit-button:hover,
.zzb-theme .wc-block-components-checkout-button:hover,
.zzb-theme .wp-block-woocommerce-proceed-to-checkout-block a:hover,
.zzb-theme a.wc-block-components-button.contained:hover,
.zzb-theme button.wc-block-components-button.contained:hover {
  background: var(--zzb-gold-dark) !important;
  background-color: var(--zzb-gold-dark) !important;
  border-color: var(--zzb-gold-dark) !important;
}

/* ----- HERO ----- */
.zzb-hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: var(--zzb-bg-deep);
  isolation: isolate;
}
.zzb-hero__media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(0.96) saturate(1.05);
  transform: scale(1.02);
}
.zzb-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(31,28,23,0) 30%, rgba(31,28,23,0.5) 100%),
              linear-gradient(110deg, rgba(31,28,23,0.25) 0%, transparent 45%);
  z-index: 1;
  pointer-events: none;
}
.zzb-hero__inner {
  position: relative;
  z-index: 2;
  max-width: var(--zzb-page);
  margin: 0 auto;
  padding: 0 1.5rem 5rem;
  width: 100%;
  color: var(--zzb-bg);
}
.zzb-hero__eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--zzb-gold-light);
  margin-bottom: 1.8rem;
  text-shadow: 0 1px 12px rgba(0,0,0,0.4);
}
.zzb-hero__title {
  font-family: var(--zzb-display);
  font-size: clamp(3.2rem, 8.5vw, 6.4rem);
  font-weight: 300;
  font-style: italic;
  line-height: 0.98;
  letter-spacing: -0.015em;
  color: var(--zzb-bg);
  margin: 0 0 1.8rem;
  max-width: 14ch;
  text-shadow: 0 4px 32px rgba(0,0,0,0.35);
}
.zzb-hero__quote {
  font-family: var(--zzb-display);
  font-size: clamp(1.15rem, 1.9vw, 1.45rem);
  font-style: italic;
  font-weight: 400;
  color: rgba(251, 246, 236, 0.92);
  margin: 0 0 2.5rem;
  max-width: 36ch;
  line-height: 1.5;
  text-shadow: 0 2px 16px rgba(0,0,0,0.25);
}
.zzb-hero__cta {
  background: var(--zzb-gold-light) !important;
  color: var(--zzb-bg) !important;
  border: 1px solid var(--zzb-gold-light);
  padding: 1.05em 2.4em;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.05em;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  box-shadow: 0 14px 36px rgba(0,0,0,0.22);
  transition: all .35s var(--zzb-ease-soft);
}
.zzb-hero__cta:hover {
  background: var(--zzb-gold-dark);
  color: var(--zzb-bg);
  transform: translateY(-2px);
  box-shadow: 0 20px 44px rgba(0,0,0,0.28);
}

/* Hero scroll indicator */
.zzb-hero__scroll {
  position: absolute;
  bottom: 1.8rem;
  right: 2rem;
  z-index: 3;
  font-family: var(--zzb-body);
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--zzb-gold-light);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  text-shadow: 0 1px 12px rgba(0,0,0,0.4);
}
.zzb-hero__scroll::after {
  content: '';
  width: 1px;
  height: 36px;
  background: var(--zzb-gold-light);
  animation: zzb-pulse 2s ease-in-out infinite;
  transform-origin: top;
}
@keyframes zzb-pulse {
  0%, 100% { opacity: 0.25; transform: scaleY(0.4); }
  50%      { opacity: 1;    transform: scaleY(1); }
}

/* ----- Section base ----- */
.zzb-section {
  padding: clamp(5rem, 10vw, 8rem) 1.5rem;
}
.zzb-section--cream { background: var(--zzb-bg); }
.zzb-section--warm  { background: var(--zzb-bg-warm); }
.zzb-section--deep  { background: var(--zzb-bg-deep); }
.zzb-section__inner { max-width: var(--zzb-page); margin: 0 auto; }
.zzb-section__center { max-width: var(--zzb-narrow); margin: 0 auto; text-align: center; }

/* ----- Quote (Psalm) ----- */
.zzb-quote {
  text-align: center;
  padding: clamp(5rem, 9vw, 7.5rem) 1.5rem;
  background: var(--zzb-bg);
  position: relative;
}
.zzb-quote__ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  margin: 0 auto 2rem;
  max-width: 180px;
  color: var(--zzb-gold);
}
.zzb-quote__ornament::before, .zzb-quote__ornament::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--zzb-gold-light);
  opacity: 0.6;
}
.zzb-quote__text {
  font-family: var(--zzb-display);
  font-size: clamp(1.7rem, 3.6vw, 2.7rem);
  font-style: italic;
  font-weight: 300;
  color: var(--zzb-ink);
  line-height: 1.32;
  max-width: 28ch;
  margin: 0 auto 2rem;
}
.zzb-quote__cite {
  font-family: var(--zzb-body);
  font-size: 0.76rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--zzb-gold-dark);
  font-weight: 600;
}

/* ----- Editorial intro ----- */
.zzb-intro { padding: clamp(5rem, 9vw, 7rem) 1.5rem; background: var(--zzb-bg); text-align: center; }
.zzb-intro__inner { max-width: 720px; margin: 0 auto; }
.zzb-intro__eyebrow { color: var(--zzb-gold-dark); margin-bottom: 1.5rem; }
.zzb-intro__title {
  font-family: var(--zzb-display);
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  font-style: italic;
  font-weight: 300;
  margin: 0 0 1.8rem;
  line-height: 1.18;
  color: var(--zzb-ink);
}
.zzb-intro__lead {
  color: var(--zzb-ink-soft);
  font-size: 1.1rem;
  line-height: 1.85;
  max-width: 60ch;
  margin: 0 auto;
}

/* ----- Featured product (asymmetric showcase) ----- */
.zzb-featured {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
  padding: clamp(5rem, 10vw, 8rem) 1.5rem;
  max-width: var(--zzb-wide);
  margin: 0 auto;
}
@media (max-width: 800px) { .zzb-featured { grid-template-columns: 1fr; } }
.zzb-featured__media {
  aspect-ratio: 4/5;
  background-size: cover;
  background-position: center;
  background-color: var(--zzb-bg-warm);
  position: relative;
  box-shadow: var(--zzb-shadow-lift);
}
.zzb-featured__content { padding: 1rem; }
.zzb-featured__eyebrow { color: var(--zzb-gold-dark); margin-bottom: 1.2rem; }
.zzb-featured__title {
  font-family: var(--zzb-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-style: italic;
  font-weight: 400;
  margin: 0 0 1rem;
  line-height: 1.15;
  color: var(--zzb-ink);
}
.zzb-featured__desc {
  color: var(--zzb-ink-soft);
  font-size: 1.05rem;
  line-height: 1.75;
  margin: 0 0 1.5rem;
  max-width: 38ch;
}
.zzb-featured__price {
  font-family: var(--zzb-body);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--zzb-gold-dark);
  margin: 0 0 2rem;
  font-variant-numeric: tabular-nums;
}

/* ----- Categories (editorial, asymmetric) ----- */
.zzb-categories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: 4rem;
}
.zzb-cat-card {
  display: block;
  text-decoration: none;
  color: var(--zzb-ink);
  transition: transform 0.6s var(--zzb-ease-soft);
}
.zzb-cat-card:hover { transform: translateY(-6px); }
.zzb-cat-card__media {
  aspect-ratio: 4/5;
  background-size: cover;
  background-position: center;
  background-color: var(--zzb-bg-warm);
  margin-bottom: 1.4rem;
  overflow: hidden;
  position: relative;
}
.zzb-cat-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(31,28,23,0.08) 100%);
  transition: background 0.4s var(--zzb-ease-soft);
}
.zzb-cat-card:hover .zzb-cat-card__media::after {
  background: linear-gradient(180deg, transparent 30%, rgba(31,28,23,0.18) 100%);
}
.zzb-cat-card__num {
  font-family: var(--zzb-body);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--zzb-gold-dark);
  margin-bottom: 0.3rem;
  display: block;
}
.zzb-cat-card__title {
  font-family: var(--zzb-display);
  font-size: 1.4rem;
  font-weight: 500;
  font-style: italic;
  color: var(--zzb-ink);
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.zzb-cat-card__title::after {
  content: '→';
  font-style: normal;
  color: var(--zzb-gold);
  font-size: 0.95em;
  transition: transform 0.4s var(--zzb-ease-soft);
}
.zzb-cat-card:hover .zzb-cat-card__title::after { transform: translateX(8px); }

/* ----- Bestsellers (refined, no-frills) ----- */
.zzb-bestsellers {
  background: var(--zzb-bg);
  padding: clamp(4rem, 8vw, 6rem) 0;
  overflow: hidden;
  border-top: 1px solid var(--zzb-line);
  border-bottom: 1px solid var(--zzb-line);
}
.zzb-bestsellers__head {
  text-align: center;
  margin: 0 auto clamp(2.5rem, 4vw, 3.5rem);
  padding: 0 1.5rem;
  max-width: 700px;
}
.zzb-bestsellers__eyebrow { color: var(--zzb-gold-dark); margin-bottom: 1rem; }
.zzb-bestsellers__title {
  font-family: var(--zzb-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-style: italic;
  font-weight: 300;
  color: var(--zzb-ink);
  margin: 0;
}
.zzb-bestsellers__container {
  -webkit-mask: linear-gradient(90deg, transparent 0%, black 5%, black 95%, transparent 100%);
          mask: linear-gradient(90deg, transparent 0%, black 5%, black 95%, transparent 100%);
}
/* Once core.js takes over scrolling, switch to native horizontal scroll
   so users can swipe (touch) or drag (mouse) through the bestsellers.
   The auto-loop is driven by JS adjusting scrollLeft. */
.zzb-bestsellers__container--interactive {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;            /* Firefox */
  -ms-overflow-style: none;         /* legacy Edge */
  cursor: grab;
  scroll-behavior: auto;            /* keep wrap-jump instant, no smooth */
  overscroll-behavior-x: contain;
}
.zzb-bestsellers__container--interactive::-webkit-scrollbar { display: none; }
.zzb-bestsellers__container--interactive.is-dragging { cursor: grabbing; }
.zzb-bestsellers__container--interactive.is-dragging .zzb-bestsellers__item {
  pointer-events: none;             /* prevent accidental click during drag */
}
.zzb-bestsellers__track {
  display: flex;
  gap: 1.25rem;
  width: max-content;
  animation: zzb-scroll-left 90s linear infinite;
  will-change: transform;
}
.zzb-bestsellers:hover .zzb-bestsellers__track { animation-play-state: paused; }
.zzb-bestsellers__item {
  flex-shrink: 0;
  width: 14rem;
  text-decoration: none;
  color: inherit;
  transition: transform 0.5s var(--zzb-ease-soft);
}
.zzb-bestsellers__item:hover { transform: translateY(-4px); }
.zzb-bestsellers__thumb {
  width: 100%;
  aspect-ratio: 1;
  background: var(--zzb-bg-warm);
  overflow: hidden;
  position: relative;
  margin-bottom: 0.85rem;
}
.zzb-bestsellers__thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  transition: transform 1.2s var(--zzb-ease-soft);
}
.zzb-bestsellers__item:hover .zzb-bestsellers__thumb img { transform: scale(1.06); }
.zzb-bestsellers__name {
  font-family: var(--zzb-display);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--zzb-ink);
  margin: 0 0 0.2rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.zzb-bestsellers__price {
  color: var(--zzb-gold-dark);
  font-weight: 600;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}
.zzb-bestsellers__price del { opacity: 0.4; margin-right: 0.4em; font-size: 0.85em; }
.zzb-bestsellers__price ins { text-decoration: none; }
@keyframes zzb-scroll-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* =====================================================================
   APLIKACJA — full landing page (hero, intro split, feature grid, steps, CTA)
   Replaces the old asymmetric app-promo layout with a proper landing.
   ===================================================================== */

/* Break out of WordPress's `.is-layout-constrained` width clamp so each
 * section spans the full viewport. Without this the grid hits its 880px
 * stacking breakpoint while the *viewport* is much wider. */
body.zzb-theme .entry-content > .zzb-app-hero,
body.zzb-theme .entry-content > .zzb-app-intro,
body.zzb-theme .entry-content > .zzb-app-features,
body.zzb-theme .entry-content > .zzb-app-showcase,
body.zzb-theme .entry-content > .zzb-app-steps,
body.zzb-theme .entry-content > .zzb-app-cta {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Common eyebrow used across sections */
.zzb-app-hero .zzb-eyebrow,
.zzb-app-intro .zzb-eyebrow,
.zzb-app-features .zzb-eyebrow,
.zzb-app-steps .zzb-eyebrow,
.zzb-app-cta .zzb-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-extra);
  text-transform: uppercase;
  color: var(--zzb-gold-deep);
  margin: 0 0 var(--space-3);
}

/* ---------- HERO — split layout (copy left, marketing image right) ---------- */
.zzb-app-hero {
  position: relative;
  background:
    radial-gradient(1200px 600px at 85% 20%, rgba(212, 175, 55, 0.12) 0%, transparent 60%),
    linear-gradient(180deg, var(--zzb-cream) 0%, var(--zzb-cream-soft) 100%);
  padding: clamp(5rem, 9vw, 8rem) clamp(1.5rem, 5vw, 5rem) clamp(4rem, 8vw, 7rem);
  overflow: hidden;
  isolation: isolate;
}
.zzb-app-hero::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 90vw;
  height: 90vw;
  max-width: 1100px;
  max-height: 1100px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(212, 175, 55, 0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.zzb-app-hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--width-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.zzb-app-hero__copy {
  max-width: 560px;
}
.zzb-app-hero__eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-extra);
  text-transform: uppercase;
  color: var(--zzb-gold-deep);
  margin: 0 0 var(--space-6);
}
.zzb-app-hero__eyebrow em {
  font-family: var(--font-script);
  font-style: normal;
  font-size: 1.7rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--zzb-gold-deep);
  vertical-align: -0.4em;
  margin: 0 0.1em;
  line-height: 0;
}
.zzb-app-hero__title {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: clamp(2.6rem, 6.2vw, 5.2rem);
  line-height: 1.02;
  letter-spacing: var(--tracking-tight);
  color: var(--zzb-ink);
  margin: 0 0 var(--space-6);
}
.zzb-app-hero__title em {
  font-style: italic;
  color: var(--zzb-gold-deep);
  font-weight: var(--fw-regular);
}
.zzb-app-hero__lead {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  line-height: var(--lh-loose);
  color: var(--zzb-ink-soft);
  margin: 0 0 var(--space-8);
  max-width: 50ch;
}
.zzb-app-hero__lead strong {
  color: var(--zzb-ink);
  font-weight: var(--fw-medium);
}
.zzb-app-hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}
.zzb-app-hero__btn {
  text-transform: none;
  letter-spacing: var(--tracking-wide);
  padding: 16px 32px;
  font-size: var(--fs-base);
  border-radius: var(--radius-pill);
}
.zzb-app-hero__btn svg {
  transition: transform var(--dur-fast) var(--ease-out);
}
.zzb-app-hero__btn:hover svg {
  transform: translateX(3px);
}
.zzb-app-hero__btn--text {
  text-transform: none;
  letter-spacing: 0;
  padding: 0;
  font-size: var(--fs-base);
}
.zzb-app-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--zzb-ink-soft);
}
.zzb-app-hero__meta li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.zzb-app-hero__meta span {
  color: var(--zzb-gold);
  font-size: 0.85rem;
}
.zzb-app-hero__media {
  margin: 0;
  position: relative;
}
.zzb-app-hero__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
  box-shadow:
    0 30px 60px -20px rgba(26, 34, 54, 0.25),
    0 12px 24px -12px rgba(201, 164, 99, 0.20);
}

@media (max-width: 880px) {
  .zzb-app-hero__inner {
    grid-template-columns: 1fr;
    gap: clamp(2rem, 6vw, 4rem);
    text-align: left;
  }
  .zzb-app-hero__media {
    max-width: 480px;
    margin: 0 auto;
  }
}
@media (max-width: 560px) {
  .zzb-app-hero__cta { flex-direction: column; align-items: stretch; gap: var(--space-4); }
  .zzb-app-hero__btn--text { align-self: flex-start; }
}

/* ---------- INTRO SPLIT ---------- */
.zzb-app-intro {
  background: var(--zzb-cream);
  padding: clamp(5rem, 10vw, 8rem) clamp(1.5rem, 5vw, 5rem);
}
.zzb-app-intro__inner {
  max-width: var(--width-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(3rem, 7vw, 6rem);
  align-items: center;
}
.zzb-app-intro__title {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  line-height: 1.08;
  margin: 0 0 var(--space-6);
  color: var(--zzb-ink);
}
.zzb-app-intro__title em {
  font-style: italic;
  color: var(--zzb-gold-deep);
}
.zzb-app-intro__lead {
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  line-height: var(--lh-loose);
  color: var(--zzb-ink-soft);
  margin: 0 0 var(--space-4);
  max-width: 52ch;
}
.zzb-app-intro__lead em {
  color: var(--zzb-gold-deep);
  font-style: italic;
}
.zzb-app-intro__lead strong {
  color: var(--zzb-ink);
  font-weight: var(--fw-medium);
}
.zzb-app-intro__media {
  position: relative;
  margin: 0;
}
.zzb-app-intro__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
.zzb-app-intro__caption {
  position: absolute;
  bottom: var(--space-6);
  left: var(--space-6);
  right: var(--space-6);
  background: rgba(245, 237, 224, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-base);
  color: var(--zzb-ink);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.zzb-app-intro__caption span {
  color: var(--zzb-gold);
}
@media (max-width: 800px) {
  .zzb-app-intro__inner { grid-template-columns: 1fr; }
  .zzb-app-intro__media { order: -1; }
}

/* ---------- FEATURES GRID ---------- */
.zzb-app-features {
  background: var(--zzb-paper);
  padding: clamp(5rem, 10vw, 8rem) clamp(1.5rem, 5vw, 5rem);
}
.zzb-app-features__inner {
  max-width: var(--width-wide);
  margin: 0 auto;
}
.zzb-app-features__header {
  text-align: center;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
.zzb-app-features__title {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-style: italic;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  margin: 0;
  color: var(--zzb-ink);
}
.zzb-app-features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}
@media (max-width: 920px) {
  .zzb-app-features__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .zzb-app-features__grid { grid-template-columns: 1fr; gap: var(--space-6); }
}
.zzb-app-feature {
  background: var(--zzb-card);
  border: 1px solid var(--zzb-gold-200);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
  position: relative;
  overflow: hidden;
}
.zzb-app-feature::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--zzb-gradient-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.zzb-app-feature:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--zzb-gold);
}
.zzb-app-feature:hover::before {
  transform: scaleX(1);
}
.zzb-app-feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--zzb-gradient-paper);
  border-radius: 50%;
  color: var(--zzb-gold-deep);
  margin-bottom: var(--space-4);
  border: 1px solid var(--zzb-gold-200);
}
.zzb-app-feature__eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-extra);
  text-transform: uppercase;
  color: var(--zzb-gold-deep);
  margin-bottom: var(--space-2);
}
.zzb-app-feature__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-regular);
  font-size: var(--fs-xl);
  line-height: 1.2;
  color: var(--zzb-ink);
  margin: 0 0 var(--space-3);
}
.zzb-app-feature__text {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  color: var(--zzb-ink-soft);
  margin: 0;
}

/* ---------- SHOWCASE — phone mockup + 24h timeline ---------- */
.zzb-app-showcase {
  background: linear-gradient(180deg, var(--zzb-paper) 0%, var(--zzb-cream) 100%);
  padding: clamp(5rem, 10vw, 8rem) clamp(1.5rem, 5vw, 5rem);
}
.zzb-app-showcase__inner {
  max-width: var(--width-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(3rem, 7vw, 6rem);
  align-items: center;
}
.zzb-app-showcase__media {
  margin: 0;
  position: relative;
}
.zzb-app-showcase__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
  box-shadow:
    0 24px 48px -16px rgba(26, 34, 54, 0.18),
    0 8px 16px -8px rgba(201, 164, 99, 0.15);
}
.zzb-app-showcase__title {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 1.08;
  margin: 0 0 var(--space-6);
  color: var(--zzb-ink);
}
.zzb-app-showcase__title em {
  font-style: italic;
  color: var(--zzb-gold-deep);
}
.zzb-app-showcase__lead {
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  line-height: var(--lh-loose);
  color: var(--zzb-ink-soft);
  margin: 0 0 var(--space-8);
  max-width: 52ch;
}
.zzb-app-showcase__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.zzb-app-showcase__list li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--zzb-paper);
  border: 1px solid var(--zzb-gold-200);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--zzb-ink);
  transition: border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.zzb-app-showcase__list li:hover {
  border-color: var(--zzb-gold);
  transform: translateX(4px);
}
.zzb-app-showcase__time {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-xl);
  color: var(--zzb-gold-deep);
  font-variant-numeric: tabular-nums;
  min-width: 72px;
}
@media (max-width: 880px) {
  .zzb-app-showcase__inner { grid-template-columns: 1fr; }
  .zzb-app-showcase__media { max-width: 480px; margin: 0 auto; order: -1; }
}

/* ---------- STEPS ---------- */
.zzb-app-steps {
  background: var(--zzb-cream-soft);
  padding: clamp(5rem, 10vw, 8rem) clamp(1.5rem, 5vw, 5rem);
}
.zzb-app-steps__inner {
  max-width: var(--width-content);
  margin: 0 auto;
}
.zzb-app-steps__header {
  text-align: center;
  margin-bottom: clamp(3rem, 6vw, 4rem);
}
.zzb-app-steps__title {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-style: italic;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  margin: 0;
  color: var(--zzb-ink);
}
.zzb-app-steps__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  counter-reset: step;
}
@media (max-width: 720px) {
  .zzb-app-steps__list { grid-template-columns: 1fr; }
}
.zzb-app-step {
  position: relative;
  padding: var(--space-8) var(--space-6);
  text-align: center;
}
.zzb-app-step__num {
  display: inline-block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 4rem;
  line-height: 1;
  color: var(--zzb-gold);
  margin-bottom: var(--space-3);
  letter-spacing: var(--tracking-tight);
}
.zzb-app-step__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-regular);
  font-size: var(--fs-xl);
  line-height: 1.2;
  color: var(--zzb-ink);
  margin: 0 0 var(--space-3);
}
.zzb-app-step__text {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  color: var(--zzb-ink-soft);
  margin: 0;
  max-width: 30ch;
  margin-inline: auto;
}
.zzb-app-step__text strong {
  color: var(--zzb-ink);
  font-weight: var(--fw-medium);
}
.zzb-app-step__text em {
  color: var(--zzb-gold-deep);
  font-style: italic;
}

/* ---------- BIG CTA ---------- */
.zzb-app-cta {
  background: var(--zzb-ink);
  color: #fff;
  padding: clamp(5rem, 10vw, 8rem) clamp(1.5rem, 5vw, 5rem);
  position: relative;
  overflow: hidden;
}
.zzb-app-cta::before {
  content: '';
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(212, 175, 55, 0.25) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(212, 175, 55, 0.18) 0%, transparent 60%);
  pointer-events: none;
}
.zzb-app-cta__inner {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.zzb-app-cta__eyebrow {
  color: var(--zzb-gold-200);
}
.zzb-app-cta__title {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-6);
  color: #fff;
}
.zzb-app-cta__title em {
  font-style: italic;
  color: var(--zzb-gold-200);
}
.zzb-app-cta__lead {
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  line-height: var(--lh-loose);
  color: rgba(255, 255, 255, 0.78);
  margin: 0 auto var(--space-8);
  max-width: 50ch;
}
.zzb-app-cta__btn {
  font-size: var(--fs-base);
  padding: 18px 40px;
  text-transform: none;
  letter-spacing: var(--tracking-wide);
}
.zzb-app-cta__url {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--zzb-gold-200);
  margin: var(--space-6) 0 0;
  letter-spacing: var(--tracking-wide);
}

/* =====================================================================
   APLIKACJA — design-critique fixes (1.4.4)
   ===================================================================== */

/* #1 — CTA contrast: force white title + ink-on-gold button + brighter URL.
 * Boosting specificity so global heading rules don't steal back. */
body.zzb-theme .zzb-app-cta { color: #fff; }
body.zzb-theme .zzb-app-cta__title {
  color: #fff !important;
  font-weight: var(--fw-regular);
}
body.zzb-theme .zzb-app-cta__title em {
  color: var(--zzb-gold-200) !important;
}
body.zzb-theme .zzb-app-cta__lead {
  color: rgba(255, 255, 255, 0.85) !important;
}
body.zzb-theme .zzb-app-cta__btn,
body.zzb-theme .zzb-app-cta .zzb-btn--primary {
  background: var(--zzb-gradient-gold) !important;
  color: var(--zzb-ink) !important;
  font-weight: var(--fw-semibold);
  text-shadow: none;
}
body.zzb-theme .zzb-app-cta__btn:hover {
  color: var(--zzb-ink) !important;
}
body.zzb-theme .zzb-app-cta__url {
  color: var(--zzb-gold-200) !important;
  font-weight: var(--fw-medium);
}

/* #3 — eyebrow: stop the Sacramento <em> from crashing into the next line on mobile */
@media (max-width: 560px) {
  .zzb-app-hero__eyebrow {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
    line-height: 1;
  }
  .zzb-app-hero__eyebrow em {
    font-size: 1.4rem;
    vertical-align: baseline;
    margin: 0;
  }
}

/* #4 — hero headline shrinks more aggressively on small mobile */
@media (max-width: 480px) {
  .zzb-app-hero__title {
    font-size: 2.4rem !important;
    line-height: 1.05;
  }
  .zzb-app-intro__title,
  .zzb-app-features__title,
  .zzb-app-showcase__title,
  .zzb-app-steps__title,
  .zzb-app-cta__title {
    font-size: 2rem !important;
  }
}

/* #6 — feature card: keep border consistent at all states (defaults to gold-200,
 * intensifies to gold-deep on hover instead of optical jitter from transparent). */
body.zzb-theme .zzb-app-feature {
  border-color: var(--zzb-gold-200);
}
body.zzb-theme .zzb-app-feature:hover {
  border-color: var(--zzb-gold-deep);
}

/* #7 — "Zobacz, co znajdziesz" text link: animated underline + nudge arrow */
.zzb-app-hero__btn--text {
  position: relative;
  color: var(--zzb-ink);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.zzb-app-hero__btn--text::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -3px;
  height: 1px;
  width: 100%;
  background: var(--zzb-gold);
  transform: scaleX(0.4);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.zzb-app-hero__btn--text:hover::after { transform: scaleX(1); }
.zzb-app-hero__btn--text::before {
  content: '↓';
  display: inline-block;
  color: var(--zzb-gold-deep);
  font-family: var(--font-body);
  transition: transform var(--dur-base) var(--ease-spring);
}
.zzb-app-hero__btn--text:hover::before {
  transform: translateY(3px);
}

/* #8 — showcase timeline: vertically center the time numeral with the line of text */
body.zzb-theme .zzb-app-showcase__list li {
  align-items: center;
}
body.zzb-theme .zzb-app-showcase__time {
  align-self: center;
}

/* ---------- SCROLL PROGRESS BAR ---------- */
.zzb-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--zzb-gold) 0%, var(--zzb-gold-deep) 100%);
  transform-origin: left;
  transform: scaleX(0);
  z-index: 200;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}
body.zzb-progress-active .zzb-progress { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .zzb-progress { transition: none; }
}

/* ----- Newsletter ----- */
.zzb-newsletter {
  background: var(--zzb-bg);
  padding: clamp(5rem, 9vw, 7.5rem) 1.5rem;
  text-align: center;
  border-top: 1px solid var(--zzb-line);
  border-bottom: 1px solid var(--zzb-line);
}
.zzb-newsletter__inner { max-width: 600px; margin: 0 auto; }
.zzb-newsletter__eyebrow { color: var(--zzb-gold-dark); margin-bottom: 1.2rem; }
.zzb-newsletter__title {
  font-family: var(--zzb-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-style: italic;
  font-weight: 300;
  margin: 0 0 1.2rem;
  line-height: 1.15;
  color: var(--zzb-ink);
}
.zzb-newsletter__lead {
  color: var(--zzb-ink-soft);
  font-size: 1.05rem;
  line-height: 1.75;
  margin: 0 0 2.4rem;
  max-width: 50ch;
  margin-left: auto;
  margin-right: auto;
}
.zzb-newsletter__form {
  display: flex;
  gap: 0.5rem;
  max-width: 480px;
  margin: 0 auto;
  flex-wrap: wrap;
  justify-content: center;
}
.zzb-newsletter__form input[type="email"] {
  flex: 1 1 240px;
  border: 1px solid var(--zzb-line);
  border-radius: 999px;
  padding: 0.95em 1.6em;
  font-family: var(--zzb-body);
  font-size: 0.95rem;
  background: var(--zzb-paper);
  color: var(--zzb-ink);
  transition: all 0.3s var(--zzb-ease-soft);
}
.zzb-newsletter__form input[type="email"]:focus {
  outline: none;
  border-color: var(--zzb-gold);
  box-shadow: 0 0 0 3px var(--zzb-gold-soft);
}
.zzb-newsletter__hint {
  font-size: 0.78rem;
  color: var(--zzb-ink-mute);
  margin-top: 1.4rem;
  letter-spacing: 0.04em;
}

/* ----- Coffee support ----- */
.zzb-coffee {
  background: var(--zzb-bg);
  padding: clamp(4rem, 8vw, 6rem) 1.5rem;
  text-align: center;
}
.zzb-coffee__inner { max-width: 600px; margin: 0 auto; }
.zzb-coffee__sym {
  display: inline-block;
  width: 28px; height: 1px;
  background: var(--zzb-gold);
  margin: 0 0.6em 1.4em;
  vertical-align: middle;
}
.zzb-coffee__head {
  font-family: var(--zzb-body);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--zzb-gold-dark);
  margin-bottom: 0.5rem;
}
.zzb-coffee__title {
  font-family: var(--zzb-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-style: italic;
  font-weight: 300;
  margin: 0 0 1.2rem;
  line-height: 1.25;
}
.zzb-coffee__lead {
  color: var(--zzb-ink-soft);
  font-size: 1rem;
  line-height: 1.8;
  margin: 0 0 2rem;
}
.zzb-coffee__signature {
  font-family: var(--zzb-script);
  font-size: 1.7rem;
  color: var(--zzb-gold-dark);
  margin-top: 2rem;
  display: block;
}

/* ----- Testimonials ----- */
.zzb-testimonials {
  padding: clamp(5rem, 9vw, 7rem) 1.5rem;
  background: var(--zzb-bg-warm);
  text-align: center;
}
.zzb-testimonials__head { max-width: 600px; margin: 0 auto clamp(3rem, 5vw, 4rem); }
.zzb-testimonials__eyebrow { color: var(--zzb-gold-dark); margin-bottom: 1rem; }
.zzb-testimonials__title {
  font-family: var(--zzb-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-style: italic;
  font-weight: 300;
  margin: 0;
  color: var(--zzb-ink);
}
.zzb-testimonials__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(2rem, 4vw, 3rem);
  max-width: var(--zzb-page);
  margin: 0 auto;
}
.zzb-testimonial { text-align: center; padding: 0 1rem; }
.zzb-testimonial__stars {
  color: var(--zzb-gold);
  letter-spacing: 0.12em;
  margin-bottom: 1.2rem;
  font-size: 0.95rem;
}
.zzb-testimonial__text {
  font-family: var(--zzb-display);
  font-size: 1.2rem;
  font-style: italic;
  color: var(--zzb-ink);
  line-height: 1.55;
  margin: 0 auto 1.5rem;
  max-width: 32ch;
}
.zzb-testimonial__author {
  font-family: var(--zzb-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--zzb-gold-dark);
}

/* ----- WooCommerce overrides (single, loop, cart, checkout) ----- */

/* Loop product card — minimal, photographic */
.zzb-theme ul.products li.product {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  transition: transform 0.5s var(--zzb-ease-soft);
}
.zzb-theme ul.products li.product:hover { transform: translateY(-4px); }
.zzb-theme ul.products li.product a img {
  border-radius: 0 !important;
  margin: 0 0 1rem !important;
  aspect-ratio: 1;
  object-fit: cover;
  width: 100%;
  transition: transform 1.2s var(--zzb-ease-soft);
}
.zzb-theme ul.products li.product:hover a img { transform: scale(1.05); }
.zzb-theme ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--zzb-display) !important;
  font-size: 1.2rem !important;
  font-weight: 500 !important;
  color: var(--zzb-ink) !important;
  margin: 0.6rem 0 0.4rem !important;
  line-height: 1.25 !important;
  padding: 0 !important;
}
.zzb-theme ul.products li.product .price {
  color: var(--zzb-gold-dark) !important;
  font-family: var(--zzb-body) !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  display: block !important;
  margin: 0 0 0.8rem !important;
  font-variant-numeric: tabular-nums;
}
/* Hide "Add to cart" button in loop for clean look */
.zzb-theme ul.products li.product .button {
  background: transparent !important;
  color: var(--zzb-gold-dark) !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 0 0.6rem !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
  position: relative;
  width: auto !important;
  display: inline-flex !important;
}
.zzb-theme ul.products li.product .button::after {
  content: '→';
  margin-left: 0.4em;
  font-style: normal;
  transition: transform .35s var(--zzb-ease-soft);
}
.zzb-theme ul.products li.product .button:hover {
  background: transparent !important;
  color: var(--zzb-gold) !important;
  transform: none;
}
.zzb-theme ul.products li.product .button:hover::after { transform: translateX(4px); }

/* Star rating */
.zzb-theme .star-rating {
  color: var(--zzb-gold) !important;
  letter-spacing: 0.1em;
  font-size: 0.85em;
  margin-bottom: 0.5rem !important;
}

/* Sale badge — minimal black tag */
.zzb-theme span.onsale {
  background: var(--zzb-ink) !important;
  color: var(--zzb-bg) !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: var(--zzb-body);
  font-weight: 500 !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.62rem !important;
  padding: 0.45em 0.9em !important;
  min-width: auto !important;
  min-height: auto !important;
  line-height: 1.2 !important;
  position: absolute !important;
  top: 0.8rem !important;
  left: 0.8rem !important;
  right: auto !important;
  z-index: 2;
  box-shadow: none !important;
}

/* Single product page — editorial layout */
.zzb-theme .single-product div.product {
  padding-top: 3rem;
  max-width: var(--zzb-page);
  margin: 0 auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.zzb-theme .single-product .summary {
  padding-left: clamp(1rem, 3vw, 3rem);
}
@media (max-width: 768px) {
  .zzb-theme .single-product .summary { padding-left: 0; padding-top: 2rem; }
}

.zzb-theme .single-product .woocommerce-product-gallery {
  position: relative;
}
.zzb-theme .single-product .product_meta {
  border-top: 1px solid var(--zzb-line);
  padding-top: 1.5rem;
  margin-top: 2rem;
  font-size: 0.85rem;
  color: var(--zzb-ink-mute);
  font-family: var(--zzb-body);
  letter-spacing: 0.04em;
}
.zzb-theme .single-product .product_meta > span { display: block; margin-bottom: 0.4rem; }
.zzb-theme .single-product .product_meta a { color: var(--zzb-gold-dark); }

/* Add-to-cart wrapper sample/spacing */
.zzb-theme .single-product form.cart {
  margin: 2rem 0 !important;
  padding: 1.5rem 0;
  border-top: 1px solid var(--zzb-line);
  border-bottom: 1px solid var(--zzb-line);
}
.zzb-theme .single-product .cart .quantity { margin-right: 0.5rem !important; }
.zzb-theme .single-product .product_title {
  font-family: var(--zzb-display) !important;
  font-size: clamp(2rem, 4vw, 2.8rem) !important;
  font-weight: 300 !important;
  font-style: italic;
  margin-bottom: 1rem !important;
  line-height: 1.15;
}
.zzb-theme .single-product .price {
  color: var(--zzb-gold-dark) !important;
  font-size: 1.6rem !important;
  font-family: var(--zzb-body) !important;
  font-weight: 600;
  margin: 0.5rem 0 1.5rem !important;
  font-variant-numeric: tabular-nums;
}
.zzb-theme .single-product .price del { color: var(--zzb-ink-mute); opacity: 0.6; font-size: 0.85em; margin-right: 0.5rem; }
.zzb-theme .single-product .price ins { text-decoration: none; }
.zzb-theme .single-product .woocommerce-product-details__short-description {
  color: var(--zzb-ink);
  font-size: 1.05rem;
  line-height: 1.75;
  padding: 1rem 0;
}

.zzb-theme .single-product .quantity input {
  border: 1px solid var(--zzb-line) !important;
  border-radius: 999px !important;
  padding: 0.7em 1em !important;
  background: var(--zzb-paper);
  font-family: var(--zzb-body);
  font-weight: 500;
  text-align: center;
  width: 90px;
}

/* ============================================================
   VARIATION SWATCHES — pill button style (Shopify-like)
   ============================================================ */
.zzb-theme .single-product .variations {
  border: none !important;
  margin: 1.5rem 0 !important;
  width: 100%;
}
.zzb-theme .single-product .variations tbody { display: block; }
.zzb-theme .single-product .variations tr {
  display: block;
  margin-bottom: 1.8rem;
}
.zzb-theme .single-product .variations th.label {
  display: block;
  width: auto !important;
  padding: 0 0 0.7rem !important;
  background: transparent !important;
  font-family: var(--zzb-body) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--zzb-ink) !important;
  border: none !important;
}
.zzb-theme .single-product .variations td.value {
  display: block;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}
/* Hide native select — replaced by pills */
.zzb-theme .single-product .variations td.value > select {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Pills container (built by zzb-variants.js) */
.zzb-variant-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.zzb-variant-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.65em 1.4em;
  background: var(--zzb-paper);
  border: 1.5px solid var(--zzb-line);
  color: var(--zzb-ink);
  font-family: var(--zzb-body);
  font-size: 0.88rem;
  font-weight: 500;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.25s var(--zzb-ease-soft);
  min-width: 3rem;
  user-select: none;
  white-space: nowrap;
  position: relative;
}
.zzb-variant-pill:hover:not(.is-disabled) {
  border-color: var(--zzb-gold);
  color: var(--zzb-gold-dark);
  transform: translateY(-1px);
}
.zzb-variant-pill.is-active {
  background: var(--zzb-ink);
  border-color: var(--zzb-ink);
  color: var(--zzb-bg);
}
.zzb-variant-pill.is-disabled {
  opacity: 0.35;
  cursor: not-allowed;
  text-decoration: line-through;
}
/* Color swatches: dot prefix when CSS var --color is set */
.zzb-variant-pill[data-color] {
  padding-left: 2.4em;
}
.zzb-variant-pill[data-color]::before {
  content: '';
  position: absolute;
  left: 0.6em;
  top: 50%;
  transform: translateY(-50%);
  width: 1.2em;
  height: 1.2em;
  border-radius: 999px;
  background: var(--swatch-color, var(--zzb-ink-mute));
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: inset 0 0 0 2px var(--zzb-paper);
}

/* Reset variations link */
.zzb-theme .single-product .reset_variations {
  display: inline-block !important;
  margin-top: 0.8rem;
  font-size: 0.78rem;
  color: var(--zzb-ink-mute);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.zzb-theme .single-product .woocommerce-product-gallery__image img {
  border-radius: 0;
  box-shadow: var(--zzb-shadow-paper);
}
.zzb-theme .single-product .flex-control-thumbs li img {
  border-radius: 0;
  border: 1px solid transparent;
  transition: border-color .3s var(--zzb-ease-soft);
}
.zzb-theme .single-product .flex-control-thumbs li img.flex-active,
.zzb-theme .single-product .flex-control-thumbs li img:hover { border-color: var(--zzb-gold); }

/* Tabs */
.zzb-theme .woocommerce-tabs ul.tabs {
  border-bottom: 1px solid var(--zzb-line);
  padding-left: 0 !important;
}
.zzb-theme .woocommerce-tabs ul.tabs li {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 1.5rem 0 0 !important;
}
.zzb-theme .woocommerce-tabs ul.tabs li::before,
.zzb-theme .woocommerce-tabs ul.tabs li::after { display: none !important; }
.zzb-theme .woocommerce-tabs ul.tabs li a {
  font-family: var(--zzb-body);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.78rem;
  padding: 1em 0 !important;
  color: var(--zzb-ink-mute) !important;
  display: block;
}
.zzb-theme .woocommerce-tabs ul.tabs li.active { border-bottom-color: var(--zzb-gold) !important; }
.zzb-theme .woocommerce-tabs ul.tabs li.active a { color: var(--zzb-ink) !important; }

/* Cart, checkout */
.zzb-theme .woocommerce-cart .cart-collaterals .cart_totals,
.zzb-theme .woocommerce-checkout #order_review {
  background: var(--zzb-paper);
  border: 1px solid var(--zzb-line);
  border-radius: 0;
  padding: 2rem;
}
.zzb-theme .woocommerce table.shop_table {
  border: 1px solid var(--zzb-line);
  border-radius: 0;
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--zzb-paper);
}
.zzb-theme .woocommerce table.shop_table th {
  background: var(--zzb-bg-warm);
  font-family: var(--zzb-body);
  font-weight: 600;
  color: var(--zzb-ink);
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  padding: 1em 1.2em;
}
.zzb-theme .woocommerce table.shop_table td {
  padding: 1em 1.2em;
  border-top: 1px solid var(--zzb-line);
}

/* Hide WC default page title — only on /shop/ archive */
.zzb-theme.post-type-archive-product .woocommerce-products-header,
.zzb-theme.post-type-archive-product .woocommerce-products-header__title,
.zzb-theme.post-type-archive-product .ct-page-title,
.zzb-theme.post-type-archive-product .entry-header,
.zzb-theme.post-type-archive-product .page-title,
.zzb-theme.post-type-archive-product h1.page-title,
.zzb-theme.post-type-archive-product .entry-title,
.zzb-theme.post-type-archive-product header.entry-header {
  display: none !important;
}

/* For category pages — keep nice editorial title */
.zzb-theme .tax-product_cat .woocommerce-products-header {
  display: block !important;
  text-align: center;
  padding: clamp(3rem, 6vw, 5rem) 1.5rem clamp(1.5rem, 3vw, 2.5rem);
  background: var(--zzb-bg);
}
.zzb-theme .tax-product_cat .woocommerce-products-header__title {
  display: block !important;
  font-family: var(--zzb-display) !important;
  font-style: italic;
  font-weight: 300 !important;
  font-size: clamp(2.2rem, 4.5vw, 3.6rem) !important;
  color: var(--zzb-ink) !important;
  margin: 0 !important;
}

/* WC results count + sorting bar — translate look */
.zzb-theme .woocommerce-result-count {
  font-family: var(--zzb-body);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--zzb-ink-mute);
  font-weight: 600;
  padding: 1.5rem 0 !important;
  margin: 0 !important;
}
.zzb-theme .woocommerce-ordering select,
.zzb-theme .orderby {
  border: 1px solid var(--zzb-line) !important;
  border-radius: 999px !important;
  padding: 0.6em 1.2em !important;
  background: var(--zzb-paper) !important;
  font-family: var(--zzb-body);
  font-size: 0.85rem;
  color: var(--zzb-ink) !important;
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' stroke='%23b8923c' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 1em center;
  padding-right: 2.4em !important;
}
.zzb-theme .woocommerce-ordering {
  margin: 1rem 0 !important;
}

/* Cookie notice — match brand */
.cookie-notice-container,
#cookie-notice {
  background: var(--zzb-paper) !important;
  color: var(--zzb-ink) !important;
  border-top: 1px solid var(--zzb-line);
  font-family: var(--zzb-body);
  font-size: 0.88rem;
  padding: 1rem !important;
}
.cookie-notice-container .cn-button,
#cookie-notice .cn-button {
  background: var(--zzb-gold-light) !important;
  color: var(--zzb-bg) !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 0.55em 1.4em !important;
  font-family: var(--zzb-body);
  font-weight: 600;
  font-size: 0.85rem !important;
  letter-spacing: 0.04em;
  text-transform: none;
  transition: background .3s var(--zzb-ease-soft);
  margin: 0 0.3rem !important;
}
.cookie-notice-container .cn-button:hover,
#cookie-notice .cn-button:hover {
  background: var(--zzb-gold-dark) !important;
}
#cookie-revoke {
  background: var(--zzb-paper) !important;
  border-top: 1px solid var(--zzb-line);
  font-family: var(--zzb-body);
  font-size: 0.85rem;
  color: var(--zzb-ink-soft);
}

/* Footer */
.zzb-theme .ct-footer {
  background: var(--zzb-paper) !important;
  color: var(--zzb-ink);
  border-top: 1px solid var(--zzb-line);
  padding-top: 4rem;
}
.zzb-theme .ct-footer a { color: var(--zzb-gold-dark); }
.zzb-theme .ct-footer a:hover { color: var(--zzb-gold); }
.zzb-theme .ct-footer h4 {
  font-family: var(--zzb-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--zzb-gold-dark);
}

/* WooCommerce messages */
.zzb-theme .woocommerce-message,
.zzb-theme .woocommerce-info {
  border-top: 2px solid var(--zzb-gold) !important;
  background: var(--zzb-paper) !important;
  border-radius: 0 !important;
  padding: 1em 1.4em !important;
  font-family: var(--zzb-body);
}
.zzb-theme .woocommerce-message::before,
.zzb-theme .woocommerce-info::before { color: var(--zzb-gold) !important; }

/* Breadcrumbs */
.zzb-theme .woocommerce-breadcrumb {
  font-family: var(--zzb-body);
  font-size: 0.8rem;
  color: var(--zzb-ink-mute);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  padding: 1rem;
}
.zzb-theme .woocommerce-breadcrumb a { color: var(--zzb-gold-dark); }

/* View Transitions */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: zzb-fade-out 0.18s ease forwards; }
::view-transition-new(root) { animation: zzb-fade-in 0.32s ease forwards; }
@keyframes zzb-fade-out { to { opacity: 0; } }
@keyframes zzb-fade-in  { from { opacity: 0; } }

/* Reveal on scroll (gentle) */
@keyframes zzb-reveal {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.zzb-quote, .zzb-newsletter, .zzb-coffee, .zzb-testimonials, .zzb-app-features, .zzb-bestsellers, .zzb-featured, .zzb-intro {
  animation: zzb-reveal 0.85s var(--zzb-ease-soft) both;
}

@media (prefers-reduced-motion: reduce) {
  .zzb-bestsellers__track { animation: none; }
  .zzb-hero__scroll::after { animation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
  .zzb-quote, .zzb-newsletter, .zzb-coffee, .zzb-testimonials,
  .zzb-app-features, .zzb-bestsellers, .zzb-featured, .zzb-intro {
    animation: none;
  }
}

/* Image safety */
.zzb-theme img { max-width: 100%; height: auto; display: block; }

/* Tighten Blocksy default container padding */
.zzb-theme .ct-container { padding-left: 1.5rem; padding-right: 1.5rem; }

/* === Defensive centering for quote (overrides any legacy/Blocksy override) === */
section.zzb-quote { text-align: center !important; }
section.zzb-quote .zzb-quote__text,
section.zzb-quote .zzb-quote__cite {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
section.zzb-quote .zzb-quote__ornament {
  margin-left: auto !important;
  margin-right: auto !important;
}


/* =====================================================================
   HERO — CINEMATIC v2 (Etap 3 — premium redesign)
   ===================================================================== */

.zzb-hero.zzb-hero--cinematic {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: #0d1117;
  overflow: hidden;
  isolation: isolate;
  margin: 0;
  padding: 0;
}

/* Image (with srcset via <picture>) */
.zzb-hero--cinematic .zzb-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.zzb-hero--cinematic .zzb-hero__media picture,
.zzb-hero--cinematic .zzb-hero__media img {
  width: 100%;
  height: 100%;
  display: block;
}
.zzb-hero--cinematic .zzb-hero__media img {
  object-fit: cover;
  object-position: center;
  /* slow ken-burns zoom; JS may override transform with parallax */
  animation: zzb-hero-zoom 28s ease-out infinite alternate;
  will-change: transform;
}
@keyframes zzb-hero-zoom {
  from { transform: scale(1.02); }
  to   { transform: scale(1.10); }
}

/* Cinematic gradient overlay */
.zzb-hero--cinematic .zzb-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(13,17,23,0.10) 0%, rgba(13,17,23,0.55) 65%, rgba(13,17,23,0.92) 100%),
    linear-gradient(90deg, rgba(13,17,23,0.65) 0%, rgba(13,17,23,0.15) 45%, transparent 100%);
  pointer-events: none;
}

/* Content */
.zzb-hero--cinematic .zzb-hero__inner {
  position: relative;
  z-index: 2;
  max-width: var(--zzb-page, 1280px);
  width: 100%;
  margin: 0 auto;
  padding: 6rem clamp(1.5rem, 4vw, 4rem);
  color: #f5ede0;
}

/* Eyebrow with gold rule */
.zzb-hero--cinematic .zzb-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--zzb-body, 'Assistant', sans-serif);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #d4af37;
  margin-bottom: 2.4rem;
  text-shadow: 0 1px 12px rgba(0,0,0,0.4);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 1s 0.1s cubic-bezier(.2,.7,.2,1),
              transform 1s 0.1s cubic-bezier(.2,.7,.2,1);
}
.zzb-hero--cinematic .zzb-hero__eyebrow::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 1px;
  background: #d4af37;
}
.zzb-hero--cinematic.is-loaded .zzb-hero__eyebrow {
  opacity: 1;
  transform: translateY(0);
}

/* Title with word-by-word reveal */
.zzb-hero--cinematic .zzb-hero__title {
  font-family: var(--zzb-display, 'Cormorant Garamond', serif);
  font-size: clamp(3.2rem, 9vw, 7rem);
  font-weight: 300;
  font-style: italic;
  line-height: 0.96;
  letter-spacing: -0.018em;
  color: #f5ede0;
  margin: 0 0 2rem;
  max-width: 16ch;
  text-shadow: 0 8px 48px rgba(0,0,0,0.45);
}
.zzb-hero--cinematic .zzb-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.45em);
  filter: blur(8px);
  transition: opacity 1.2s cubic-bezier(.2,.7,.2,1),
              transform 1.2s cubic-bezier(.2,.7,.2,1),
              filter 1.2s cubic-bezier(.2,.7,.2,1);
}
.zzb-hero--cinematic .zzb-word.is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Quote / subtitle */
.zzb-hero--cinematic .zzb-hero__quote {
  font-family: var(--zzb-display, 'Cormorant Garamond', serif);
  font-size: clamp(1.2rem, 1.7vw, 1.5rem);
  font-style: italic;
  font-weight: 400;
  color: rgba(245, 237, 224, 0.92);
  margin: 0 0 3rem;
  max-width: 38ch;
  line-height: 1.55;
  text-shadow: 0 2px 24px rgba(0,0,0,0.4);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.2s 1.3s cubic-bezier(.2,.7,.2,1),
              transform 1.2s 1.3s cubic-bezier(.2,.7,.2,1);
}
.zzb-hero--cinematic.is-loaded .zzb-hero__quote {
  opacity: 1;
  transform: translateY(0);
}

/* CTA pill — magnetic */
.zzb-hero--cinematic .zzb-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  background: rgba(245, 237, 224, 0.95);
  color: #1a2236;
  border: 1px solid rgba(212, 175, 55, 0.3);
  padding: 1.15em 2.6em;
  border-radius: 999px;
  font-family: var(--zzb-body, 'Assistant', sans-serif);
  font-weight: 500;
  letter-spacing: 0.10em;
  font-size: 0.85rem;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 24px 48px -16px rgba(0,0,0,0.55);
  cursor: pointer;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.2s 1.7s cubic-bezier(.2,.7,.2,1),
              transform 0.5s cubic-bezier(.2,.7,.2,1),
              background 0.3s ease,
              color 0.3s ease,
              box-shadow 0.3s ease;
  will-change: transform;
}
.zzb-hero--cinematic.is-loaded .zzb-hero__cta {
  opacity: 1;
  transform: translateY(0);
}
.zzb-hero--cinematic .zzb-hero__cta:hover {
  background: #d4af37;
  color: #f5ede0;
  border-color: #d4af37;
  box-shadow: 0 28px 56px -16px rgba(212, 175, 55, 0.45);
}

/* Scroll indicator (centered bottom) */
.zzb-hero--cinematic .zzb-hero__scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  font-family: var(--zzb-body, 'Assistant', sans-serif);
  font-size: 0.65rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(245, 237, 224, 0.7);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  text-shadow: 0 1px 12px rgba(0,0,0,0.4);
  transition: color 0.3s ease;
  opacity: 0;
  animation: zzb-fade-in-up 1.2s 2.3s forwards cubic-bezier(.2,.7,.2,1);
}
.zzb-hero--cinematic .zzb-hero__scroll:hover {
  color: #d4af37;
}
.zzb-hero--cinematic .zzb-hero__scroll svg {
  animation: zzb-bounce-down 2s ease-in-out infinite;
}
@keyframes zzb-fade-in-up {
  from { opacity: 0; transform: translate(-50%, 14px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes zzb-bounce-down {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50%      { transform: translateY(6px); opacity: 1; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .zzb-hero--cinematic *,
  .zzb-hero--cinematic *::before,
  .zzb-hero--cinematic *::after {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .zzb-hero--cinematic .zzb-hero__scroll {
    transform: translateX(-50%) !important;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .zzb-hero.zzb-hero--cinematic {
    min-height: 92vh;
  }
  .zzb-hero--cinematic .zzb-hero__title {
    font-size: clamp(2.8rem, 13vw, 4.2rem);
    max-width: 12ch;
  }
  .zzb-hero--cinematic .zzb-hero__inner {
    padding: 4rem 1.5rem;
  }
}


/* =====================================================================
   HOMEPAGE LAYOUT — hide page title, full-bleed sections
   ===================================================================== */

/* Hide WP/Blocksy page title on the home page (it duplicates the hero) */
body.home .entry-header,
body.home .ct-page-title,
body.home h1.page-title,
body.home .ct-default-page-content > h1.page-title,
body.home .ct-page-title-default,
body.home [class*="ct-hero"],
body.home .entry-content > h1:first-child {
  display: none !important;
}

/* Force full-bleed for zzb-* sections — escape Blocksy's content container */
body.home main#main,
body.home main[role="main"],
body.home .ct-container,
body.home .entry-content,
body.home .entry-content.is-layout-constrained,
body.home article.post-310,
body.home article[class*="page-id-"] {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Belt-and-suspenders: ensure each zzb section spans the full viewport */
body.home section[class^="zzb-"],
body.home section[class*=" zzb-"] {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Hero must sit flush at the top under the sticky header */
body.home .zzb-hero.zzb-hero--cinematic {
  margin-top: 0 !important;
}


/* =====================================================================
   HEADER — transparent over cinematic hero (homepage), sticky cream after scroll
   ===================================================================== */

/* On the home page, make the entire header float OVER the hero */
body.home header.ct-header {
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 100;
  background: transparent !important;
  transition: background 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease;
}

/* All inner header rows: kill the gold backgrounds, become transparent */
body.home header.ct-header [data-row],
body.home header.ct-header .ct-row,
body.home header.ct-header [data-row="top"],
body.home header.ct-header [data-row="middle"],
body.home header.ct-header [data-row="bottom"] {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Ink/menu text becomes cream when over dark hero */
body.home header.ct-header,
body.home header.ct-header a,
body.home header.ct-header .menu-item > a,
body.home header.ct-header [data-row="top"] *,
body.home header.ct-header [data-row="middle"] * {
  color: rgba(245, 237, 224, 0.95) !important;
}
body.home header.ct-header a:hover,
body.home header.ct-header .menu-item:hover > a,
body.home header.ct-header .current-menu-item > a {
  color: #d4af37 !important;
}

/* Logo SVG / image inversion handled per-element if needed */
body.home header.ct-header .ct-header-cart .ct-header-cart-icon path,
body.home header.ct-header .ct-search-icon path,
body.home header.ct-header svg path {
  fill: rgba(245, 237, 224, 0.95) !important;
  stroke: rgba(245, 237, 224, 0.95) !important;
}

/* === SCROLLED state: cream backdrop-blur + dark text === */
body.home.zzb-scrolled header.ct-header {
  position: fixed !important;
  background: rgba(245, 237, 224, 0.92) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  backdrop-filter: blur(20px) saturate(1.2);
  box-shadow: 0 1px 0 rgba(212, 175, 55, 0.25), 0 4px 24px -8px rgba(26, 34, 54, 0.08);
  /* shrink header slightly when scrolled */
  transform: translateY(0);
}

body.home.zzb-scrolled header.ct-header,
body.home.zzb-scrolled header.ct-header a,
body.home.zzb-scrolled header.ct-header .menu-item > a,
body.home.zzb-scrolled header.ct-header [data-row="middle"] * {
  color: #1a2236 !important;
}
body.home.zzb-scrolled header.ct-header a:hover,
body.home.zzb-scrolled header.ct-header .menu-item:hover > a {
  color: #b8923c !important;
}
body.home.zzb-scrolled header.ct-header svg path {
  fill: #1a2236 !important;
  stroke: #1a2236 !important;
}

/* Hide announcement (top row) when scrolled — saves vertical space */
body.home.zzb-scrolled header.ct-header [data-row="top"] {
  display: none !important;
}

/* When NOT scrolled, the announcement and nav rows must be transparent */
body.home:not(.zzb-scrolled) header.ct-header [data-row="top"] {
  background: rgba(13, 17, 23, 0.35) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(212, 175, 55, 0.25);
}


/* =====================================================================
   HOMEPAGE — pull hero flush with viewport top (kill all wrapper padding)
   ===================================================================== */

/* Aggressive reset: every ancestor of the hero on home page = no padding/margin */
body.home #main,
body.home main.site-main,
body.home main[role="main"],
body.home .ct-container-full,
body.home .ct-container,
body.home .ct-page-wrapper,
body.home article.post-310,
body.home article.page,
body.home .entry-content,
body.home .entry-content.is-layout-constrained {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* If Blocksy renders an announcement bar OUTSIDE header (sibling), absolute it */
body.home > .ct-toolbar,
body.home > [class*="ct-announcement"],
body.home .ct-toolbar:not(header *) {
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 51 !important;
  background: rgba(13, 17, 23, 0.45) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #f5ede0 !important;
}

/* If admin bar is showing for logged-in user, push hero down so it doesn't hide under it */
html[lang] body.home.admin-bar .zzb-hero.zzb-hero--cinematic {
  margin-top: 0 !important;
  padding-top: 32px;
}
@media screen and (max-width: 782px) {
  html[lang] body.home.admin-bar .zzb-hero.zzb-hero--cinematic {
    padding-top: 46px;
  }
}


/* =====================================================================
   HOMEPAGE — kill mystery 40px gap above hero
   Blocksy main wrapper appears to add ~40px above first child via some
   internal mechanism not exposed via standard padding/margin. Pull
   .ct-container-full up to flush the hero with the announcement bar.
   ===================================================================== */
body.home .ct-container-full {
  margin-top: -40px !important;
}


/* =====================================================================
   HEADER — cream backdrop on every non-home page (shop, single, cart…)
   On home the header is transparent over the hero. Everywhere else,
   give it the same cream/blur treatment that home gets after scroll —
   instead of Blocksy's flat olive bar.
   ===================================================================== */
body.zzb-theme:not(.home) header.ct-header,
body.zzb-theme:not(.home) [data-row="header"] {
  background: rgba(245, 237, 224, 0.92) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  backdrop-filter: blur(20px) saturate(1.2);
  box-shadow: 0 1px 0 rgba(212, 175, 55, 0.25),
              0 4px 24px -8px rgba(26, 34, 54, 0.08) !important;
}
body.zzb-theme:not(.home) header.ct-header [data-row="top"],
body.zzb-theme:not(.home) header.ct-header [data-row="middle"],
body.zzb-theme:not(.home) header.ct-header [data-row="bottom"] {
  background: transparent !important;
}
body.zzb-theme:not(.home) header.ct-header,
body.zzb-theme:not(.home) header.ct-header a,
body.zzb-theme:not(.home) header.ct-header .menu-item > a,
body.zzb-theme:not(.home) header.ct-header [data-row="middle"] * {
  color: var(--zzb-ink) !important;
}
body.zzb-theme:not(.home) header.ct-header a:hover,
body.zzb-theme:not(.home) header.ct-header .menu-item:hover > a,
body.zzb-theme:not(.home) header.ct-header .current-menu-item > a {
  color: var(--zzb-gold-deep) !important;
}
body.zzb-theme:not(.home) header.ct-header svg path {
  fill: var(--zzb-ink) !important;
  stroke: var(--zzb-ink) !important;
}


/* =====================================================================
   SHOP ARCHIVE — premium card grid + sort dropdown
   Replaces Blocksy's plain default styling on the shop / category pages.
   ===================================================================== */

/* Sort/order toolbar — wrap the WC ordering form in a gold pill */
body.zzb-theme .woocommerce-ordering {
  display: inline-flex;
  margin: 0 0 var(--space-8);
}
body.zzb-theme .woocommerce-ordering select.orderby {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%231a2236' stroke-width='1.6'><path d='M1 1.5l5 5 5-5'/></svg>")
    no-repeat right 18px center,
    var(--zzb-paper);
  background-size: 12px 8px, auto;
  border: 1.5px solid var(--zzb-gold-200);
  border-radius: var(--radius-pill);
  padding: 12px 44px 12px 22px;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  color: var(--zzb-ink);
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
  min-width: 240px;
}
body.zzb-theme .woocommerce-ordering select.orderby:hover {
  border-color: var(--zzb-gold);
  background-color: var(--zzb-cream-soft);
}
body.zzb-theme .woocommerce-ordering select.orderby:focus {
  outline: 0;
  border-color: var(--zzb-gold);
  box-shadow: 0 0 0 4px var(--zzb-gold-shadow);
}

/* Shop page wrapper — give content room to breathe */
body.zzb-theme.woocommerce.archive .ct-container,
body.zzb-theme.woocommerce-page.archive .ct-container,
body.zzb-theme.archive.tax-product_cat .ct-container {
  padding-top: var(--space-12);
  padding-bottom: var(--space-16);
}

/* Product card grid — bigger gaps, consistent rhythm */
body.zzb-theme ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-12) var(--space-8);
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
@media (max-width: 1080px) {
  body.zzb-theme ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  body.zzb-theme ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) var(--space-4); }
}
@media (max-width: 420px) {
  body.zzb-theme ul.products { grid-template-columns: 1fr; }
}

/* Reset Blocksy's per-item floats / widths */
body.zzb-theme ul.products li.product {
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  float: none !important;
  clear: none !important;
  background: transparent !important;
  text-align: left !important;
  padding: 0 !important;
  border: 0 !important;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Product image: enforce a consistent 4:5 portrait crop and rounded corners.
 * The varied aspect ratios in the source uploads were the main cause of the
 * "looks bad" feel — uniform crops give the grid editorial rhythm. */
body.zzb-theme ul.products li.product a.woocommerce-LoopProduct-link,
body.zzb-theme ul.products li.product .ct-image-container,
body.zzb-theme ul.products li.product .ct-media-container {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  aspect-ratio: 4 / 5;
  background: var(--zzb-cream-soft);
  margin: 0 0 var(--space-2) !important;
}
body.zzb-theme ul.products li.product img,
body.zzb-theme ul.products li.product picture img,
body.zzb-theme ul.products li.product .attachment-woocommerce_thumbnail {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  margin: 0 !important;
  transition: transform var(--dur-slow) var(--ease-out);
}
body.zzb-theme ul.products li.product:hover img {
  transform: scale(1.04);
}

/* Product title — italic editorial display face */
body.zzb-theme ul.products li.product .woocommerce-loop-product__title,
body.zzb-theme ul.products li.product h2,
body.zzb-theme ul.products li.product h3 {
  font-family: var(--font-display) !important;
  font-style: italic !important;
  font-weight: var(--fw-regular) !important;
  font-size: var(--fs-lg) !important;
  line-height: var(--lh-snug) !important;
  color: var(--zzb-ink) !important;
  text-align: left !important;
  padding: 0 !important;
  margin: var(--space-2) 0 0 !important;
  letter-spacing: var(--tracking-tight);
}

/* Price */
body.zzb-theme ul.products li.product .price {
  font-family: var(--font-body) !important;
  font-size: var(--fs-base) !important;
  font-weight: var(--fw-medium) !important;
  color: var(--zzb-ink) !important;
  margin: var(--space-1) 0 var(--space-2) !important;
}

/* Category line above the button */
body.zzb-theme ul.products li.product .ct-product-categories,
body.zzb-theme ul.products li.product .product-categories {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-extra);
  text-transform: uppercase;
  color: var(--zzb-muted);
  margin: 0;
}

/* Button — use the gold pill */
body.zzb-theme ul.products li.product .button,
body.zzb-theme ul.products li.product a.add_to_cart_button,
body.zzb-theme ul.products li.product a.product_type_variable,
body.zzb-theme ul.products li.product a.product_type_simple {
  display: inline-flex !important;
  align-items: center;
  gap: var(--space-2);
  align-self: flex-start;
  background: transparent !important;
  color: var(--zzb-ink) !important;
  border: 1.5px solid var(--zzb-gold-200) !important;
  border-radius: var(--radius-pill) !important;
  padding: 12px 24px !important;
  font-family: var(--font-body) !important;
  font-size: var(--fs-xs) !important;
  font-weight: var(--fw-medium) !important;
  letter-spacing: var(--tracking-extra) !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  margin: var(--space-2) 0 0 !important;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
body.zzb-theme ul.products li.product .button:hover,
body.zzb-theme ul.products li.product a.add_to_cart_button:hover,
body.zzb-theme ul.products li.product a.product_type_variable:hover,
body.zzb-theme ul.products li.product a.product_type_simple:hover {
  background: var(--zzb-ink) !important;
  border-color: var(--zzb-ink) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

/* Sale badge */
body.zzb-theme ul.products li.product .onsale {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 2;
  background: var(--zzb-gradient-gold);
  color: #fff;
  border: 0;
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  box-shadow: var(--shadow-gold);
  margin: 0;
  min-height: 0;
  line-height: 1;
}

/* Pagination */
body.zzb-theme .woocommerce-pagination ul.page-numbers {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: 0;
  margin: var(--space-12) 0 0;
}
body.zzb-theme .woocommerce-pagination ul.page-numbers li {
  border: 0;
}
body.zzb-theme .woocommerce-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  background: transparent;
  border: 1.5px solid var(--zzb-gold-200);
  color: var(--zzb-ink);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
body.zzb-theme .woocommerce-pagination .page-numbers.current,
body.zzb-theme .woocommerce-pagination .page-numbers:hover {
  background: var(--zzb-ink);
  border-color: var(--zzb-ink);
  color: #fff;
}


/* =====================================================================
   FOOTER — custom Shopify-style footer (replaces Blocksy default)
   ===================================================================== */
.zzb-footer {
  background: var(--zzb-cream);
  color: var(--zzb-ink);
  padding: var(--space-16) var(--space-6) var(--space-8);
  border-top: 1px solid var(--zzb-gold-200);
  margin-top: var(--space-16);
}
.zzb-footer__inner {
  max-width: var(--width-wide);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-8);
}

/* Brand mark */
.zzb-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--zzb-gold-deep);
}
.zzb-footer__dove {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}
.zzb-footer__wordmark {
  font-family: var(--font-script);
  font-size: 3.25rem;
  line-height: 1;
  color: var(--zzb-gold-deep);
  padding-top: 0.4rem;
}

/* Socials */
.zzb-footer__socials {
  display: flex;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.zzb-footer__socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--zzb-paper);
  border: 1.5px solid var(--zzb-gold-200);
  color: var(--zzb-ink);
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.zzb-footer__socials a:hover {
  background: var(--zzb-ink);
  border-color: var(--zzb-ink);
  color: #fff;
  transform: translateY(-2px);
}

/* Newsletter */
.zzb-footer__newsletter {
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.zzb-footer__nl-text {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--zzb-ink-soft);
  margin: 0;
  line-height: var(--lh-loose);
}
.zzb-footer__nl-text em {
  color: var(--zzb-gold-deep);
  font-style: italic;
}
.zzb-footer__nl-text a {
  color: var(--zzb-gold-deep);
  border-bottom: 1px solid var(--zzb-gold-200);
}
.zzb-footer__nl-text a:hover {
  color: var(--zzb-ink);
  border-bottom-color: var(--zzb-gold);
}
.zzb-footer__nl-form {
  display: flex;
  align-items: center;
  background: var(--zzb-paper);
  border: 1.5px solid var(--zzb-gold-200);
  border-radius: var(--radius-pill);
  overflow: hidden;
  padding: 4px 4px 4px 4px;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.zzb-footer__nl-form:focus-within {
  border-color: var(--zzb-gold);
  box-shadow: 0 0 0 4px var(--zzb-gold-shadow);
}
.zzb-footer__nl-form input[type="email"] {
  flex: 1;
  border: 0 !important;
  background: transparent !important;
  padding: 12px 18px !important;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--zzb-ink);
  box-shadow: none !important;
  outline: 0;
}
.zzb-footer__nl-form button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: var(--zzb-gradient-gold);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: var(--shadow-gold);
  transition: transform var(--dur-fast) var(--ease-spring);
}
.zzb-footer__nl-form button:hover {
  transform: scale(1.05);
}

/* Payments */
.zzb-footer__payments {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.zzb-footer__payments li {
  display: inline-block;
}
.zzb-pay {
  display: inline-block;
  width: 38px;
  height: 24px;
  border-radius: 4px;
  border: 1px solid var(--zzb-gold-200);
  background: #fff center / contain no-repeat;
  overflow: hidden;
}
.zzb-pay--amex      { background-image: url('../img/payments/amex.svg'); }
.zzb-pay--applepay  { background-image: url('../img/payments/applepay.svg'); }
.zzb-pay--blik      { background-image: url('../img/payments/blik.svg'); }
.zzb-pay--gpay      { background-image: url('../img/payments/gpay.svg'); }
.zzb-pay--klarna    { background-image: url('../img/payments/klarna.svg'); }
.zzb-pay--maestro   { background-image: url('../img/payments/maestro.svg'); }
.zzb-pay--mc        { background-image: url('../img/payments/mastercard.svg'); }
.zzb-pay--paypal    { background-image: url('../img/payments/paypal.svg'); }
.zzb-pay--unionpay  { background-image: url('../img/payments/unionpay.svg'); }
.zzb-pay--visa      { background-image: url('../img/payments/visa.svg'); }

/* Subscribe status messages (shared by footer NL form + shortcode) */
.zzb-subscribe-status {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-xs);
  font-family: var(--font-body);
  letter-spacing: 0.02em;
}
.zzb-subscribe-status[data-state="ok"]    { color: #1f7a4d; }
.zzb-subscribe-status[data-state="error"] { color: #b00020; }

/* Legal row */
.zzb-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  color: var(--zzb-muted);
  letter-spacing: var(--tracking-wide);
  padding-top: var(--space-6);
  border-top: 1px solid var(--zzb-gold-200);
  width: 100%;
  max-width: var(--width-wide);
}
.zzb-footer__legal a {
  color: var(--zzb-ink-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.zzb-footer__legal a:hover {
  color: var(--zzb-gold-deep);
  border-bottom-color: var(--zzb-gold);
}
.zzb-footer__sep {
  color: var(--zzb-gold-200);
}
.zzb-footer__legal .zzb-cookie-link {
  font-size: var(--fs-xs);
  color: var(--zzb-ink-soft);
  letter-spacing: var(--tracking-wide);
  border-bottom: 1px solid transparent;
  text-decoration: none;
}
.zzb-footer__legal .zzb-cookie-link:hover {
  color: var(--zzb-gold-deep);
  border-bottom-color: var(--zzb-gold);
}

/* Minimal variant for cart/checkout */
.zzb-footer--minimal {
  padding: var(--space-8) var(--space-6);
  margin-top: var(--space-12);
}
.zzb-footer--minimal .zzb-footer__copy {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--zzb-muted);
}

@media (max-width: 600px) {
  .zzb-footer__wordmark {
    font-size: 2.5rem;
  }
  .zzb-footer__legal {
    font-size: 11px;
  }
}