/* ---------- Design tokens ---------- */
:root {
  --dark: #150F22;
  --dark-soft: #241B3D;
  --dark-line: rgba(255, 255, 255, 0.12);
  --cream: #FFF5E9;
  --cream-soft: #F2E7DA;
  --ink: #241D2F;
  --yaya-brown: #422918;
  --ink-soft: #665D6D;
  --blueberry: #6542B5;
  --blueberry-dark: #46267F;
  --blueberry-soft: #E8DFF3;
  --cta: #6542B5;
  --cta-hover: #46267F;
  --eco-green: #477A50;
  --gold: #C28A37;
  --gold-soft: #F0D9AA;
  --white: #FFFFFF;
  --error: #C43D3D;

  --font-display: "Bebas Neue", "Inter", sans-serif;
  --font-body: "Poppins", -apple-system, BlinkMacSystemFont, sans-serif;

  --radius: 22px;
  --radius-sm: 12px;
  --shadow: 0 24px 48px -22px rgba(21, 15, 34, 0.35);
  --shadow-sm: 0 12px 28px -16px rgba(21, 15, 34, 0.3);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --max-width: 1160px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* Keeps normal scrolling and pinch-to-zoom, but prevents accidental double-tap page zoom
   on dense mobile controls such as cards, steppers and modal actions. */
html { scroll-behavior: smooth; touch-action: manipulation; }
@media (max-width: 699px) {
  html { scroll-behavior: auto; }
}
main section[id] { scroll-margin-top: 48px; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.02; margin: 0 0 0.5em; letter-spacing: 0.02em; text-transform: uppercase; }
p { margin: 0 0 1em; }
button { font-family: inherit; }

.wrap { max-width: var(--max-width); margin: 0 auto; padding: 0 20px; }

/* ---------- Accessibility ---------- */
.skip-link { position: absolute; left: -999px; top: auto; background: var(--ink); color: var(--white); padding: 12px 20px; border-radius: 0 0 8px 0; z-index: 200; }
.skip-link:focus { left: 0; top: 0; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--blueberry); outline-offset: 3px; }

/* ---------- Scroll reveal ---------- */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---------- Shared placeholder photo ---------- */
.photo-placeholder {
  background: url("../assets/placeholder.svg") center/cover no-repeat;
  position: relative;
  overflow: hidden;
}

/* ---------- Eyebrow labels ---------- */
/* Gold-on-dark eyebrow is now the one consistent treatment site-wide — it was already
   proven on the hero/chocolate sections; every other section used to have its own
   light-theme color (plain blueberry, or violet on .products) since it was the only
   dark section. No more light sections left, so one shared rule replaces all of them. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gold-soft);
  margin: 0 0 16px;
}
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--gold); border-radius: 2px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.2s ease, border-color 0.2s ease;
  min-height: 44px;
  white-space: nowrap;
}
.btn-primary,
.btn-gold { background: var(--cta); color: var(--white); }
.btn-primary:hover,
.btn-gold:hover { background: var(--cta-hover); color: var(--white); transform: translateY(-2px); box-shadow: var(--shadow-sm); }

/* Shared product CTA used on every product detail page and in every quick-view modal.
   Keeping this separate from generic buttons prevents page-specific overrides from
   changing its pill silhouette, size or purple color. */
.product-pill-button {
  height: 48px;
  min-height: 48px;
  min-width: 190px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  background: var(--cta);
  color: var(--white);
  font-size: 0.95rem;
  font-weight: 600;
}
.product-pill-button:hover,
.product-pill-button:focus-visible {
  background: var(--cta-hover);
  color: var(--white);
}
/* Prednarudžba is intentionally distinct from an immediately purchasable item. It is
   presented as a quiet terracotta text action instead of a filled purchase pill. */
.btn.btn-preorder,
.card-cart-control > .btn.btn-preorder {
  width: auto;
  min-width: 0;
  height: 44px;
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #A44A2A;
  box-shadow: none;
}
.btn.btn-preorder:hover,
.btn.btn-preorder:focus-visible,
.card-cart-control > .btn.btn-preorder:hover,
.card-cart-control > .btn.btn-preorder:focus-visible {
  background: transparent;
  color: #82391F;
  box-shadow: none;
}
.btn.btn-preorder svg,
.card-cart-control > .btn.btn-preorder svg { display: none; }
/* Every section is dark now, so the "light outline" treatment (previously scoped to
   just .hero/.chocolate, the only dark sections) is now the one universal .btn-outline. */
.btn-outline { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.4); }
.btn-outline:hover { background: rgba(255,255,255,0.08); transform: translateY(-2px); }
.btn-small { height: 44px; padding: 0 14px; min-height: 44px; font-size: 0.9rem; background: var(--white); color: var(--ink); box-shadow: var(--shadow-sm); }
.btn-block { width: 100%; }

/* ---------- Header ---------- */
/* Hidden by default so the hero opens full-bleed with nothing overlaid on it — reveals
   as a floating sticky bar when the mouse hovers the top edge or the page scrolls (see
   updateHeaderVisibility in script.js), and whenever a nav link inside it gets keyboard
   focus, so it's never possible to tab into an invisible, off-screen link. */
/* Hidden/shown via `top`, not `transform` — a transformed (or backdrop-filtered)
   ancestor becomes the containing block for any position:fixed descendant, which broke
   the mobile fullscreen nav's inset:68px-from-viewport math. `top` has no such effect. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  opacity: 1;
  pointer-events: none;
  transition: background-color .25s ease, border-color .2s ease, box-shadow .2s ease;
}
.site-header.is-revealed, .site-header:focus-within {
  top: 0;
  opacity: 1;
  pointer-events: auto;
}
.site-header .logo { pointer-events: auto; }
.site-header:not(.is-revealed):not(:focus-within) .main-nav,
.site-header:not(.is-revealed):not(:focus-within) .menu-toggle {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.site-header .nav-actions { pointer-events: auto; }
.site-header .main-nav,
.site-header .nav-actions,
.site-header .menu-toggle {
  transition: opacity .2s ease, visibility .2s ease;
}
.site-header.is-scrolled { border-bottom-color: rgba(255, 255, 255, 0.08); box-shadow: 0 8px 24px -18px rgba(0,0,0,0.4); }
@media (max-width: 899px) {
  /* backdrop-filter alone also creates a fixed-descendant containing block — the mobile
     fullscreen nav needs it gone here; desktop nav isn't position:fixed, so no conflict. */
  .site-header { backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header { transition: none; }
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 14px; padding-bottom: 14px; }
.logo { display: flex; align-items: center; text-decoration: none; }

.logo-chip { display: inline-flex; align-items: center; justify-content: center; background: transparent; padding: 0; perspective: 1000px;}
.logo-img { width: 161px; height: auto; aspect-ratio: 161 / 76; display: block; transition: transform .35s ease, opacity .35s ease; transform-origin: center; backface-visibility: hidden; }
.logo-img.logo-switch { transform: rotateY(90deg); opacity: 0; }

@media (max-width: 899px) {
  .logo-img { width: 138px; }
}


.main-nav ul { display: flex; gap: 30px; }
.main-nav a { position: relative; text-decoration: none; font-weight: 500; font-size: 0.94rem; color: rgba(255, 255, 255, 0.85); padding: 6px 0; }
.main-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: var(--gold); transition: right 0.25s var(--ease); border-radius: 2px; }
.main-nav a:hover::after, .main-nav a.is-active::after { right: 0; }
.main-nav a:hover, .main-nav a.is-active { color: var(--gold-soft); }
.main-nav a.nav-choco { color: var(--gold-soft); }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-icon-btn {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;
  margin: 0;

  border: none;
  border-radius: 50%;
  background: #8DC63F;
  cursor: pointer;
  overflow: hidden;

  transition: background-color .25s ease, transform .25s var(--ease), box-shadow .25s ease; }
.nav-actions a.nav-icon-btn { padding: 0; }

.nav-icon-btn:hover { background: #6FA816; transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.nav-icon-btn:focus-visible { outline: 3px solid rgba(255,255,255,.35); outline-offset: 3px; }
.nav-icon-btn img { width: 100%; height: 100%; display: block; object-fit: cover; pointer-events: none; }

.menu-toggle { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; background: none; border: none; cursor: pointer; padding: 0; }
.menu-toggle span { display: block; width: 24px; height: 2px; background: var(--white); margin: 0 auto; border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 899px) {
  .header-inner { justify-content: flex-start; }
  .logo { order: 1; }
  .menu-toggle { order: 2; margin-left: auto; }
  .nav-actions { order: 3; margin-left: 0; }
  .main-nav { position: fixed; inset: 68px 0 0 0; background: var(--dark); padding: 24px 20px; transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; overflow-y: auto; }
  .main-nav.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .main-nav ul { flex-direction: column; gap: 4px; }
  .main-nav a { display: block; padding: 16px 8px; font-size: 1.15rem; border-bottom: 1px solid var(--dark-line); }
  .main-nav a::after { display: none; }
}
@media (min-width: 900px) {
  .menu-toggle { display: none; }
}

/* ---------- Hero — circular gallery unroll ---------- */
.hero-circle {
  --hero-card-hover-scale: 2;
  --hero-product-image-size: 90%;
  position: relative;
  height: 280vh;
  background: var(--dark);
  color: var(--white);
}
.hero-circle-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.hero-circle-stage {
  position: absolute;
  inset: 0;
}
.hero-circle-stage::before,
.hero-circle-stage::after {
  content: "";
  position: absolute;
  z-index: 4;
  top: 0;
  bottom: 0;
  width: 9%;
  pointer-events: none;
}
.hero-circle-stage::before {
  left: 0;
  background: linear-gradient(90deg, #FFF5E9 0, rgba(255, 245, 233, 0) 100%);
}
.hero-circle-stage::after {
  right: 0;
  background: linear-gradient(270deg, #FFF5E9 0, rgba(255, 245, 233, 0) 100%);
}
.hero-circle-stage.is-line-ready,
.hero-circle-stage.is-line-dragging { cursor: default; }
.hero-scatter {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 30% 35% at 50% 48%, transparent 0 78%, #000 84%);
  mask-image: radial-gradient(ellipse 30% 35% at 50% 48%, transparent 0 78%, #000 84%);
}
.scatter-item {
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  /* Hero background motion intentionally paused for V2.
  will-change: transform;
  animation-name: scatter-float;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  */
}
@keyframes scatter-float {
  0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
  50% { transform: translateY(-18px) rotate(calc(var(--rot, 0deg) + 8deg)); }
}
@media (prefers-reduced-motion: reduce) {
  .scatter-item { animation: none; }
}

.circle-card {
  position: absolute;
  top: 50%;
  left: 50%;
  border: none;
  padding: 0;
  background: none;
  cursor: pointer;
  z-index: 3;
  contain: layout style;
}
.circle-card:hover,
.circle-card:focus-visible { z-index: 90; }
.circle-card[data-slug="svjeze-eko-borovnice"]::after {
  content: "";
  position: absolute;
  top: -12px;
  right: -28px;
  bottom: -44px;
  left: -28px;
  border-radius: inherit;
}
.hero-circle.is-motion-active .circle-card { will-change: transform; }
.circle-card-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--hero-card-width, 100%);
  height: var(--hero-card-height, 100%);
  border-radius: var(--hero-card-radius, inherit);
  background: #fff;
  box-shadow: var(--hero-shadow-x, 4px) var(--hero-shadow-y, 8px) 24px -17px rgba(0, 0, 0, 0.22);
  overflow: hidden;
  transform: translate(-50%, -50%);
  transition: width 0.38s cubic-bezier(0.2, 0.9, 0.25, 1.12), height 0.38s cubic-bezier(0.2, 0.9, 0.25, 1.12), border-radius 0.38s var(--ease), transform 0.38s var(--ease), box-shadow 0.38s ease;
}
.circle-card-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--hero-product-image) center/var(--hero-product-image-size) no-repeat;
  transition: transform 0.38s var(--ease);
}
.circle-card[data-slug="tamna-borovnica-malina"] .circle-card-inner::before,
.circle-card[data-slug="bijela-jagoda"] .circle-card-inner::before,
.circle-card[data-slug="hrskavi-ljesnjak"] .circle-card-inner::before,
.circle-card[data-slug="cremino-bucine-kostice"] .circle-card-inner::before {
  transform: rotate(90deg) scale(0.8);
}
.circle-card:focus-visible .circle-card-inner {
  width: var(--hero-card-hover-width);
  height: var(--hero-card-hover-height);
  border-radius: var(--hero-card-hover-radius);
  transform: translate(-50%, calc(-50% - 5px));
  box-shadow: var(--hero-hover-shadow-x, 4px) var(--hero-hover-shadow-y, 8px) 18px -10px rgba(0, 0, 0, 0.18);
}
@media (hover: hover) and (pointer: fine) {
  .circle-card:hover .circle-card-inner {
    width: var(--hero-card-hover-width);
    height: var(--hero-card-hover-height);
    border-radius: var(--hero-card-hover-radius);
    transform: translate(-50%, calc(-50% - 5px));
    box-shadow: var(--hero-hover-shadow-x, 4px) var(--hero-hover-shadow-y, 8px) 18px -10px rgba(0, 0, 0, 0.18);
  }
}
@media (prefers-reduced-motion: reduce) {
  .circle-card-inner,
  .circle-card-inner::before { transition: none; }
}

.hero-circle-copy {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 24px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.hero-circle-copy.is-active { opacity: 1; }
.hero-circle-copy--intro {
  justify-content: flex-start;
  padding-top: clamp(150px, 19vh, 185px);
  transition: none;
}
.hero-brand-lockup { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 16px; }
.hero-brand { display: inline-flex; align-items: center; justify-content: center; width: 126px; height: 60px; border-radius: 999px; background: rgba(255, 255, 255, 0.76); box-shadow: 0 10px 28px -20px rgba(66, 41, 24, 0.5); backdrop-filter: blur(8px); }
.hero-brand img { display: block; width: 108px; height: auto; }
.hero-brand--yaya img { width: 96px; opacity: 0.92; }
.hero-brand-separator { color: var(--yaya-brown); font-family: var(--font-display); font-size: 1.5rem; line-height: 1; }
.hero-circle-copy .eyebrow { justify-content: center; color: var(--gold-soft); }
.hero-circle-copy .eyebrow::before { background: var(--gold); }
.hero-circle-copy h1 { font-size: clamp(1.9rem, 4.4vw, 2.9rem); color: var(--white); max-width: 17ch; margin-inline: auto; text-shadow: 0 2px 20px rgba(0,0,0,0.75); }
.hero-circle-copy--intro h1 {
  max-width: 20ch;
  margin-bottom: 0;
  font-size: clamp(3rem, 6vw, 5.4rem);
  line-height: 0.92;
}
.hero-circle-copy--intro .eyebrow {
  font-size: clamp(0.8rem, 0.9vw, 0.94rem);
}
.hero-brand-lede {
  max-width: 47ch;
  margin: 14px auto 0;
  color: var(--ink-soft);
  font-size: clamp(0.88rem, 1.35vw, 1.02rem);
  line-height: 1.6;
}
.hero-circle-copy--intro .hero-brand-lede {
  max-width: 42ch;
  margin-top: 16px;
  font-size: clamp(1rem, 1.45vw, 1.2rem);
}
.hero-brand-lede strong { color: var(--yaya-brown); font-weight: 700; }
.hero-origin { margin-top: 12px; color: rgba(66, 41, 24, 0.62); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.hero-origin span { display: block; }
.hero-origin span + span { margin-top: 4px; }
.hero-circle-copy--reveal { justify-content: flex-start; padding-top: 130px; }
.hero-circle-copy--reveal h2 { font-size: clamp(2rem, 5vw, 3.1rem); color: var(--white); text-shadow: 0 2px 18px rgba(0,0,0,0.65); }
.hero-circle-copy .lede { font-size: 1.08rem; max-width: 44ch; margin-inline: auto; color: rgba(255,255,255,0.72); }
/* Shared with .social's two link buttons below — same centered/wrapped button row,
   just reused outside the hero copy this time. */
.hero-circle-copy .hero-actions, .social .hero-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 24px; pointer-events: auto; }
.hero-scroll-hint { margin-top: 28px; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.4); animation: hero-bob 2s ease-in-out infinite; animation-play-state: paused; }
.hero-circle.is-motion-active .hero-scroll-hint { animation-play-state: running; }
.hero-quick-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  pointer-events: auto;
}
.hero-quick-links-primary { display: flex; justify-content: center; gap: 8px; }
.hero-circle-copy:not(.is-active) .hero-quick-links { pointer-events: none; }
.hero-quick-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px;
  border: 1.5px solid var(--blueberry);
  border-radius: 999px;
  background: var(--blueberry);
  color: var(--white);
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 12px 24px -18px rgba(70, 38, 127, 0.72);
  transition: background-color .2s ease, transform .2s var(--ease), box-shadow .2s ease;
}
.hero-quick-link:hover,
.hero-quick-link:focus-visible {
  background: var(--blueberry-dark);
  border-color: var(--blueberry-dark);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 16px 28px -18px rgba(70, 38, 127, 0.85);
}
.hero-quick-link--story {
  min-height: 38px;
  padding: 0 16px;
  border-color: rgba(70, 38, 127, 0.48);
  background: transparent;
  color: var(--blueberry-dark);
  font-size: 0.72rem;
  box-shadow: none;
}
.hero-quick-link--story:hover,
.hero-quick-link--story:focus-visible {
  background: rgba(101, 66, 181, 0.08);
  border-color: var(--blueberry);
  color: var(--blueberry-dark);
  box-shadow: none;
}
.hero-quick-link:focus-visible { outline: 3px solid rgba(101, 66, 181, 0.25); outline-offset: 3px; }
@keyframes hero-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

@media (max-width: 639px) {
  .hero-circle-stage { cursor: grab; touch-action: pan-y; overscroll-behavior-x: contain; }
  .hero-circle-stage.is-line-dragging { cursor: grabbing; }
  .circle-card-inner {
    border: 1px solid rgba(70, 38, 127, 0.08);
    box-shadow: 0 14px 30px -22px rgba(66, 41, 24, 0.42);
  }
  .hero-circle {
    height: max(100svh, 704px);
    min-height: max(100svh, 704px);
  }
  .hero-circle-sticky {
    position: relative;
    height: max(100svh, 704px);
  }
  .hero-scatter {
    -webkit-mask-image: radial-gradient(ellipse 42% 40% at 50% 48%, transparent 0 80%, #000 86%);
    mask-image: radial-gradient(ellipse 42% 40% at 50% 48%, transparent 0 80%, #000 86%);
  }
  .hero-circle-copy--intro {
    isolation: isolate;
    padding-top: 126px;
    transform: none;
  }
  .hero-circle-copy--intro::before {
    display: none;
  }
  .hero-circle-copy--reveal { padding-top: 110px; }
  .hero-circle-copy h1 { font-size: 1.5rem; max-width: 16ch; }
  .hero-circle-copy--intro h1 {
    max-width: 12ch;
    margin-bottom: 0;
    font-size: clamp(2.15rem, 10vw, 3.1rem);
    line-height: 0.93;
  }
  .hero-circle-copy .eyebrow { font-size: 0.62rem; letter-spacing: 0.08em; }
  .hero-circle-copy--intro .eyebrow { margin-bottom: 24px; font-size: 0.69rem; }
  .hero-brand-lede { max-width: 32ch; margin-top: 16px; font-size: 0.72rem; line-height: 1.5; }
  .hero-circle-copy--intro .hero-brand-lede { max-width: 29ch; font-size: 0.82rem; }
  .hero-brand-lockup { gap: 8px; margin-bottom: 10px; }
  .hero-brand { width: 96px; height: 46px; }
  .hero-brand img { width: 82px; }
  .hero-brand--yaya img { width: 72px; }
  .hero-brand-separator { font-size: 1.1rem; }
  .hero-origin { margin-top: 8px; max-width: 24ch; font-size: 0.58rem; line-height: 1.45; }
  .hero-circle-copy--intro .lede, .hero-circle-copy--intro .hero-actions { display: none; }
  .hero-scroll-hint { font-size: 0.62rem; margin-top: 14px; }
  .hero-quick-links { gap: 6px; margin-top: 12px; }
  .hero-quick-links-primary { gap: 6px; }
  .hero-quick-link { min-height: 38px; padding: 0 14px; font-size: 0.69rem; }
  .hero-quick-link--story { min-height: 34px; padding: 0 12px; font-size: 0.64rem; }
  .circle-card:focus-visible .circle-card-inner {
    width: var(--hero-card-width);
    height: var(--hero-card-height);
    border-radius: var(--hero-card-radius);
    transform: translate(-50%, -50%);
    box-shadow: var(--hero-shadow-x, 4px) var(--hero-shadow-y, 8px) 24px -17px rgba(0, 0, 0, 0.22);
  }
}

@media (min-width: 640px) {
  .hero-circle {
    --hero-card-hover-scale: 2;
    height: 100vh;
    min-height: 100vh;
  }
  .hero-circle-sticky {
    position: relative;
    height: 100vh;
  }
  .circle-card .circle-card-inner {
    box-shadow: var(--hero-shadow-x, 4px) var(--hero-shadow-y, 8px) 30px -15px rgba(0, 0, 0, 0.34);
  }
  .circle-card:focus-visible .circle-card-inner,
  .circle-card:hover .circle-card-inner {
    width: var(--hero-card-hover-width);
    height: var(--hero-card-hover-height);
    border-radius: var(--hero-card-hover-radius);
    transform: translate(-50%, calc(-50% - 8px));
    box-shadow: var(--hero-hover-shadow-x, 4px) var(--hero-hover-shadow-y, 8px) 38px -14px rgba(0, 0, 0, 0.42);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-circle { height: auto; }
  .hero-circle-sticky { position: relative; height: auto; padding: 90px 20px 60px; }
  .hero-circle-stage { display: none; }
  .hero-circle-copy { position: relative; inset: auto; opacity: 1; pointer-events: auto; }
  .hero-circle-copy--reveal { display: none; }
  .hero-scroll-hint { display: none; }
}

/* ---------- Hero — curated horizontal product showcase ---------- */
.hero-showcase {
  position: relative;
  min-height: 100svh;
  padding: 104px 0 64px;
  overflow: hidden;
  background: var(--cream);
}
.hero-showcase .hero-scatter { z-index: 0; }
.hero-showcase .scatter-item { animation-play-state: running; }
.hero-showcase-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1.5fr);
  align-items: center;
  gap: clamp(34px, 5vw, 68px);
  min-height: calc(100svh - 168px);
}
.hero-showcase-copy { min-width: 0; margin: 0; text-align: left; }
.hero-showcase-copy .hero-brand-lockup,
.hero-showcase-copy .eyebrow { justify-content: flex-start; }
.hero-showcase-copy h1 {
  max-width: 12ch;
  color: var(--yaya-brown);
  font-size: clamp(2.65rem, 4.4vw, 4.35rem);
  text-wrap: balance;
}
.hero-showcase-copy .lede { max-width: 42ch; margin: 0 0 14px; color: var(--ink-soft); }
.hero-showcase-browser { min-width: 0; }
.hero-showcase-tabs {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}
.hero-showcase-tab {
  min-height: 44px;
  padding: 10px 19px;
  border: 1.5px solid rgba(70, 38, 127, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  color: var(--yaya-brown);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.22s ease, background 0.22s ease, border-color 0.22s ease, transform 0.22s var(--ease);
}
.hero-showcase-tab:hover { transform: translateY(-2px); border-color: rgba(70, 38, 127, 0.38); }
.hero-showcase-tab.is-active { border-color: var(--blueberry); background: var(--blueberry); color: var(--white); }
.hero-product-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(250px, 1fr);
  gap: 16px;
  overflow-x: auto;
  padding: 4px 4px 20px;
  scroll-snap-type: x mandatory;
  scrollbar-color: rgba(101, 66, 181, 0.34) transparent;
  scrollbar-width: thin;
}
.hero-product-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 490px;
  padding: 18px;
  overflow: hidden;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 18px 40px -30px rgba(66, 41, 24, 0.5);
  scroll-snap-align: start;
  animation: hero-showcase-card-in 0.5s var(--ease) both;
  animation-delay: var(--hero-card-delay, 0ms);
  transition: transform 0.3s var(--ease), box-shadow 0.3s ease;
}
.hero-product-card:hover,
.hero-product-card:focus-visible { transform: translateY(-7px); box-shadow: 0 24px 48px -28px rgba(66, 41, 24, 0.6); }
@keyframes hero-showcase-card-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-product-card .pc-topbar { margin-bottom: 12px; }
.hero-product-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 210px;
  padding: 18px;
  border-radius: 20px;
  background: var(--hero-card-color);
  overflow: hidden;
}
.hero-product-visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 14px 14px rgba(36, 29, 47, 0.16));
  transition: transform 0.35s var(--ease);
}
.hero-product-card:hover .hero-product-visual img { transform: scale(1.045) rotate(-1deg); }
.hero-product-placeholder { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 100%; padding: 16px; color: rgba(66, 41, 24, 0.55); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.hero-product-content { display: flex; flex: 1; flex-direction: column; padding: 18px 4px 2px; }
.hero-product-content h2 { min-height: 2.05em; margin-bottom: 12px; color: var(--yaya-brown); font-size: 1.35rem; text-wrap: balance; }
.hero-product-content .pc-traits { justify-content: flex-start; margin-bottom: 16px; }
.hero-product-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: auto; padding-top: 15px; border-top: 1px solid rgba(70, 38, 127, 0.1); }
.hero-product-footer strong { color: var(--blueberry-dark); font-size: 1.05rem; }
.hero-product-link { color: var(--blueberry-dark); font-size: 0.82rem; font-weight: 700; }
@media (min-width: 1080px) {
  .hero-product-track { grid-auto-columns: calc((100% - 16px) / 2); }
}
@media (max-width: 899px) {
  .hero-showcase-inner { display: block; min-height: 0; }
  .hero-showcase-copy { max-width: 720px; margin: 0 auto 30px; text-align: center; }
  .hero-showcase-copy .hero-brand-lockup,
  .hero-showcase-copy .eyebrow,
  .hero-showcase-tabs { justify-content: center; }
  .hero-showcase-copy h1 { max-width: 18ch; margin-inline: auto; }
  .hero-showcase-copy .lede { max-width: 54ch; margin-inline: auto; }
}
@media (max-width: 639px) {
  .hero-showcase { min-height: auto; padding: 126px 0 44px; }
  .hero-showcase-copy { margin-bottom: 24px; }
  .hero-showcase-copy h1 { font-size: 2.15rem; }
  .hero-showcase-copy .lede { font-size: 0.9rem; }
  .hero-showcase-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; overflow: visible; padding: 2px 0 8px; }
  .hero-showcase-tab { min-width: 0; min-height: 48px; padding: 7px 5px; font-size: 0.68rem; line-height: 1.2; white-space: normal; }
  .hero-product-track { grid-auto-columns: minmax(252px, 82vw); margin-right: -20px; }
  .hero-product-card { min-height: 430px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-product-card { animation: none; transition: none; }
  .hero-product-card:hover { transform: none; }
}

/* ---------- Hero — family story with expandable photography ---------- */
.family-hero {
  position: relative;
  min-height: 100svh;
  padding: 122px 0 58px;
  overflow: hidden;
  background: var(--cream);
}
.family-hero .hero-scatter { z-index: 0; }
.family-hero .scatter-item { animation-play-state: running; }
.family-hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1.35fr);
  align-items: center;
  gap: clamp(38px, 6vw, 82px);
  min-height: calc(100svh - 180px);
}
.family-hero-copy { max-width: 430px; }
.family-hero-copy h1 {
  max-width: 10ch;
  color: var(--yaya-brown);
  font-size: clamp(3rem, 5vw, 5.2rem);
  text-wrap: balance;
}
.family-hero-copy .eyebrow { color: var(--blueberry-dark); }
.family-hero-copy .eyebrow::before { background: var(--blueberry); }
.family-hero-lede { margin-bottom: 18px; color: var(--ink-soft); font-size: 1.02rem; }
.family-hero-copy .hero-origin { margin-bottom: 24px; }
.family-hero-gallery {
  --gallery-gap: 14px;
  position: relative;
  height: min(68vh, 640px);
  min-height: 550px;
}
.family-photo {
  position: absolute;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 0;
  border-radius: 26px;
  background: var(--blueberry-soft);
  box-shadow: 0 22px 46px -30px rgba(66, 41, 24, 0.62);
  transition:
    left 0.9s var(--ease),
    top 0.9s var(--ease),
    width 0.9s var(--ease),
    height 0.9s var(--ease),
    border-radius 0.9s var(--ease),
    box-shadow 0.45s ease;
}
button.family-photo { padding: 0; cursor: zoom-in; }
.family-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 1;
  transition: transform 0.5s var(--ease), opacity 0.9s var(--ease);
}
.family-photo img.family-photo-image--incoming { opacity: 0; }
.family-photo img.family-photo-image--incoming.is-visible { opacity: 1; }
.family-photo img.is-leaving { opacity: 0; }
.family-photo:hover img,
.family-photo:focus-visible img { transform: scale(1.015); }

/* The dominant block travels clockwise: top, left, bottom and right. */
.family-photo[data-position="top"] {
  left: 0;
  top: 0;
  width: 100%;
  height: calc(50% - var(--gallery-gap) / 2);
}
.family-photo[data-position="bottom"] {
  left: 0;
  top: calc(50% + var(--gallery-gap) / 2);
  width: 100%;
  height: calc(50% - var(--gallery-gap) / 2);
}
.family-photo[data-position="left"] {
  left: 0;
  top: 0;
  width: calc(50% - var(--gallery-gap) / 2);
  height: 100%;
}
.family-photo[data-position="right"] {
  left: calc(50% + var(--gallery-gap) / 2);
  top: 0;
  width: calc(50% - var(--gallery-gap) / 2);
  height: 100%;
}
.family-photo[data-position="top-left"] {
  left: 0;
  top: 0;
  width: calc(50% - var(--gallery-gap) / 2);
  height: calc(50% - var(--gallery-gap) / 2);
}
.family-photo[data-position="top-right"] {
  left: calc(50% + var(--gallery-gap) / 2);
  top: 0;
  width: calc(50% - var(--gallery-gap) / 2);
  height: calc(50% - var(--gallery-gap) / 2);
}
.family-photo[data-position="bottom-left"] {
  left: 0;
  top: calc(50% + var(--gallery-gap) / 2);
  width: calc(50% - var(--gallery-gap) / 2);
  height: calc(50% - var(--gallery-gap) / 2);
}
.family-photo[data-position="bottom-right"] {
  left: calc(50% + var(--gallery-gap) / 2);
  top: calc(50% + var(--gallery-gap) / 2);
  width: calc(50% - var(--gallery-gap) / 2);
  height: calc(50% - var(--gallery-gap) / 2);
}
.family-photo-expand {
  position: absolute;
  z-index: 2;
  right: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(255, 245, 233, 0.9);
  color: var(--blueberry-dark);
  font-size: 0.72rem;
  font-weight: 700;
  backdrop-filter: blur(8px);
}
.family-photo--placeholder {
  display: flex;
  align-items: flex-end;
  padding: 20px;
  background: #E8DFF3 url("../assets/images/branding/graphics/03_borovnica.svg") 82% 28% / 54px no-repeat;
  box-shadow: inset 0 0 0 1px rgba(70, 38, 127, 0.06);
}
.family-photo--placeholder-alt { background-color: #F4DDE0; background-image: url("../assets/images/branding/graphics/02_malina.svg"); }
.family-photo--placeholder span { max-width: 16ch; color: rgba(66, 41, 24, 0.62); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; line-height: 1.45; text-transform: uppercase; }
.family-lightbox {
  position: fixed;
  inset: 0;
  z-index: 240;
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgba(21, 15, 34, 0.86);
  backdrop-filter: blur(8px);
}
.family-lightbox[hidden] { display: none; }
.family-lightbox figure { max-width: min(920px, 92vw); margin: 0; text-align: center; }
.family-lightbox img { max-width: 100%; max-height: 82vh; margin: auto; border-radius: 22px; box-shadow: var(--shadow); object-fit: contain; }
.family-lightbox figcaption { margin-top: 12px; color: rgba(255, 255, 255, 0.78); font-size: 0.84rem; }
.family-lightbox-close {
  position: fixed;
  top: 22px;
  right: 22px;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--cream);
  color: var(--ink);
  font-size: 1rem;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
body.has-open-lightbox { overflow: hidden; }
@media (max-width: 799px) {
  .family-hero { min-height: auto; padding: 124px 0 48px; }
  .family-hero-inner { display: block; min-height: 0; }
  .family-hero-copy { max-width: 620px; margin: 0 auto 32px; text-align: center; }
  .family-hero-copy .eyebrow { justify-content: center; }
  .family-hero-copy h1 { max-width: 13ch; margin-inline: auto; font-size: clamp(2.7rem, 11vw, 4rem); }
  .family-hero-copy .hero-origin { margin-inline: auto; }
  .family-hero-gallery { height: 520px; min-height: 0; }
}
@media (max-width: 480px) {
  .family-hero-gallery { --gallery-gap: 9px; height: 460px; }
  .family-photo { border-radius: 20px; }
  .family-photo--placeholder { padding: 14px; background-size: 42px; }
  .family-photo--placeholder span { font-size: 0.62rem; }
  .family-lightbox { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .family-photo { transition: none; }
  .family-photo img { transition: none; }
}

/* ---------- Marquee ---------- */
.marquee { background: var(--dark-soft); border-top: 1px solid var(--dark-line); border-bottom: 1px solid var(--dark-line); overflow: hidden; padding: 16px 0; }
.marquee-track { display: flex; width: max-content; gap: 0; animation: marquee 38s linear infinite; animation-play-state: paused; will-change: transform; }
.marquee.is-motion-active .marquee-track { animation-play-state: running; }
.marquee-track span { display: flex; align-items: center; gap: 48px; font-family: var(--font-display); font-weight: 400; font-size: 1.2rem; letter-spacing: 0.06em; color: var(--gold-soft); white-space: nowrap; }
.marquee-track span::after { content: "•"; color: var(--gold); margin: 0 48px; }
/* Four identical copies make -50% an exact two-copy loop. Uneven keyframe distances
   introduce a soft change of pace while keeping the transition perfectly seamless. */
@keyframes marquee {
  0% { transform: translateX(0); }
  24% { transform: translateX(-9%); }
  52% { transform: translateX(-31%); }
  76% { transform: translateX(-40%); }
  100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ---------- Section heads ---------- */
.section-head { max-width: 640px; margin: 0 auto 48px; text-align: center; }
.section-head .eyebrow { justify-content: center; }
.section-head h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); color: var(--white); }
.section-lede { color: rgba(255, 255, 255, 0.65); }

/* ---------- Story ---------- */
.story { padding: 96px 0; }
.story-inner { display: flex; flex-direction: column; gap: 44px; }
.story-art {
  position: relative;
  isolation: isolate;
  aspect-ratio: 5/4;
  border-radius: var(--radius);
  background: #e9dfd3;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.story-gallery-open {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}
.story-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transform: scale(1.025);
  transition: opacity 0.8s ease, transform 5.4s ease-out;
  pointer-events: none;
}
.story-slide.is-active { opacity: 1; transform: scale(1); }
.story-gallery-open:focus-visible { outline: 3px solid var(--blueberry); outline-offset: -7px; border-radius: inherit; }
.story-gallery-dots {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255, 245, 233, 0.72);
  box-shadow: 0 8px 22px rgba(36, 29, 47, 0.12);
  backdrop-filter: blur(8px);
  transform: translateX(-50%);
}
.story-gallery-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(70, 38, 127, 0.28);
  cursor: pointer;
  transition: width 0.3s var(--ease), background-color 0.25s ease;
}
.story-gallery-dot.is-active { width: 22px; border-radius: 999px; background: var(--blueberry); }

.story-lightbox {
  position: fixed;
  inset: 0;
  z-index: 260;
  display: grid;
  place-items: center;
  padding: 32px 92px;
  background: rgba(21, 15, 34, 0.9);
  backdrop-filter: blur(10px);
}
.story-lightbox[hidden] { display: none; }
.story-lightbox figure { max-width: min(1040px, 82vw); margin: 0; text-align: center; }
.story-lightbox img {
  display: block;
  max-width: 100%;
  max-height: 82vh;
  margin: auto;
  border-radius: 22px;
  box-shadow: var(--shadow);
  object-fit: contain;
  transition: opacity 0.18s ease, transform 0.22s var(--ease);
}
.story-lightbox img.is-changing { opacity: 0; transform: scale(0.985); }
.story-lightbox figcaption {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.84rem;
}
.story-lightbox-count { color: rgba(255, 255, 255, 0.5); }
.story-lightbox-close,
.story-lightbox-nav {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--cream);
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 0.22s var(--ease), background-color 0.2s ease;
}
.story-lightbox-close:hover,
.story-lightbox-nav:hover { transform: scale(1.06); background: #fff; }
.story-lightbox-close { position: fixed; top: 22px; right: 22px; }
.story-lightbox-nav { position: fixed; top: 50%; transform: translateY(-50%); }
.story-lightbox-nav:hover { transform: translateY(-50%) scale(1.06); }
.story-lightbox-nav--prev { left: 24px; }
.story-lightbox-nav--next { right: 24px; }
body.has-open-story-lightbox { overflow: hidden; }

@media (max-width: 639px) {
  .story-gallery-dots { bottom: 12px; }
  .story-lightbox { padding: 76px 16px 64px; }
  .story-lightbox figure { max-width: 100%; }
  .story-lightbox img { max-height: 72vh; border-radius: 16px; }
  .story-lightbox-close { top: 16px; right: 16px; width: 44px; height: 44px; }
  .story-lightbox-nav { top: auto; bottom: 14px; width: 44px; height: 44px; transform: none; }
  .story-lightbox-nav:hover { transform: scale(1.04); }
  .story-lightbox-nav--prev { left: calc(50% - 54px); }
  .story-lightbox-nav--next { right: calc(50% - 54px); }
  .story-lightbox figcaption { padding-inline: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .story-slide { transition: opacity 0.2s ease; transform: none; }
  .story-lightbox img { transition: none; }
}
.story h2 { color: var(--white); }
blockquote { margin: 24px 0; padding: 20px 24px; border-left: 3px solid var(--blueberry); background: rgba(255, 255, 255, 0.06); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-style: italic; font-size: 1.05rem; }
blockquote cite { display: block; margin-top: 10px; font-style: normal; font-weight: 600; font-size: 0.85rem; color: var(--gold-soft); }
.story-more { margin-top: 20px; }
.story-more summary { display: inline-flex; align-items: center; gap: 8px; color: var(--blueberry-dark); font-weight: 600; cursor: pointer; list-style: none; border-bottom: 1px solid rgba(70, 38, 127, 0.35); }
.story-more summary::-webkit-details-marker { display: none; }
.story-more summary::after { content: "+"; font-size: 1.15rem; line-height: 1; transition: transform 0.2s ease; }
.story-more[open] summary::after { transform: rotate(45deg); }
.story-more summary:hover { border-bottom-color: var(--blueberry-dark); }
.story-more summary:focus-visible { outline: 3px solid rgba(101, 66, 181, 0.28); outline-offset: 4px; border-radius: 2px; }
.story-more-content {
  padding-top: 16px;
  overflow: hidden;
  transform-origin: top center;
  will-change: height, opacity, transform;
}
.story-more-content p + p { margin-top: 14px; }
.story-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 32px; }
.story-stats div { text-align: left; padding: 18px 4px; border-top: 1px solid var(--dark-line); }
.story-stats strong { display: block; font-family: var(--font-display); font-size: 1.7rem; color: var(--gold-soft); }
.story-stats span { display: block; font-size: 0.8rem; line-height: 1.25; color: rgba(255, 255, 255, 0.6); }

@media (min-width: 900px) {
  .story-inner { flex-direction: row; align-items: stretch; gap: 72px; }
  .story-art { flex: 1; aspect-ratio: auto; }
  .story-copy { flex: 1.1; display: flex; flex-direction: column; justify-content: center; }
  .story-stats { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Products — collection grid ---------- */
.products { padding: 96px 24px; background: var(--dark); }
.products-wrap { max-width: 1320px; margin: 0 auto; }

.product-grid { display: grid; grid-template-columns: 1fr; grid-auto-rows: 1fr; column-gap: 32px; row-gap: 56px; }
@media (min-width: 640px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }

/* Card wrapper: holds perspective for the 3D tilt of the box inside.
   Shared 1:1 with .choco-card so the two grids stay motion/UX-identical —
   only the config data (colors, copy, assets) differs between them. */
.product-card, .choco-card {
  background: none;
  border: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  font-family: inherit;
  perspective: 1000px;
  height: 100%;
  opacity: 0;
  transform: translateY(28px) scale(0.96);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.product-card.is-visible, .choco-card.is-visible { opacity: 1; transform: translateY(0) scale(1); }

/* The coloured "press + tilt" card — image area on top, name/price live inside the same box */
.product-card-box, .choco-card-box {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 28px;
  background: var(--card-color, #ffffff);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  padding: 48px 40px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden; /* keeps the action buttons + everything else strictly inside the card */
  transform-style: preserve-3d;
  transform: translateY(var(--pressY, 0px)) scale(var(--pressScale, 1)) rotateX(var(--tiltX, 0deg)) rotateY(var(--tiltY, 0deg));
transition: transform .22s var(--ease), box-shadow .22s ease;
}
.product-card-box.is-tilting, .choco-card-box.is-tilting { transition: box-shadow 0.35s ease; }
.product-card:hover .product-card-box, .product-card:focus-within .product-card-box,
.choco-card:hover .choco-card-box, .choco-card:focus-within .choco-card-box {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08), inset 0 2px 10px rgba(0, 0, 0, 0.06);
}

/* Square photo area. No clip here — the particles inside it are only ever clipped by the
   outer card edge (.product-card-box), never by this smaller frame, so they never show a
   harsh mid-air cutoff. Their own reach is capped in JS so they still can't touch the text. */
.product-card-image, .choco-card-image {
  position: relative;
  z-index: 2;
  width: 100%;
  aspect-ratio: 1 / 1;
  min-height: 0; /* overrides flex's default min-height:auto so the aspect-ratio actually holds */
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: visible;
  animation: idle-float 8s ease-in-out infinite;
  animation-play-state: paused;
}
.product-card.is-motion-active .product-card-image,
.choco-card.is-motion-active .choco-card-image { animation-play-state: running; }
.product-card:hover .product-card-image, .choco-card:hover .choco-card-image { animation-play-state: paused; }

/* Jars/bottles: tall, narrower products. Height is definite (not max-) so every photo
   fills the same relative footprint regardless of its native resolution; width follows
   the image's own aspect ratio and is capped so wide shots never touch the side padding.
   Sized ~25% larger than the original spec for a bolder, more confident presence. */
.product-card-image img, .choco-card-image img {
  position: relative;
  z-index: 2; /* sits above this card's own accent particles (z-index 1) */
  height: 90%;
  width: auto;
  max-width: 78%;
  display: block;
  object-fit: contain;
  transform: translate(var(--parX, 0px), var(--parY, 0px)) scale(1) rotate(0deg);
  transition: transform 0.35s var(--ease), filter 0.35s ease;
  filter: drop-shadow(0 14px 14px rgba(0, 0, 0, 0.16));
}
/* Wider products (e.g. a punnet of fresh blueberries) get a shorter, broader frame */
.product-card-image.is-wide img, .choco-card-image.is-wide img { height: 85%; max-width: 88%; }

/* Placeholder: sized the same way as a real photo (percentage of the now-reliably-square
   outer wrapper), instead of being applied to the wrapper itself — keeps the wrapper's own
   aspect-ratio intact so the box never mis-measures its height and pushes the text out. */
.placeholder-visual {
  position: relative;
  z-index: 2; /* sits above this card's own accent particles (z-index 1) */
  height: 78%;
  aspect-ratio: 4 / 5;
  width: auto;
  max-width: 78%;
  border-radius: 16px;
  filter: drop-shadow(0 14px 14px rgba(0, 0, 0, 0.16));
}
.placeholder-visual.photo-placeholder {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 14px 18px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.yaya-placeholder {
  background:
    url("../assets/images/branding/logo/yaya-chocolates-color.svg") center 43% / 62% auto no-repeat,
    linear-gradient(145deg, #fff8ef, #eadccc) !important;
  box-shadow: inset 0 0 0 1px rgba(66, 41, 24, 0.12);
}
.placeholder-visual.yaya-placeholder { color: rgba(66, 41, 24, 0.62); }
.product-detail-placeholder {
  width: min(78%, 310px);
  aspect-ratio: 4 / 5;
  border-radius: 18px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 24px;
  color: rgba(66, 41, 24, 0.62);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
  box-shadow: 0 18px 30px -24px rgba(36, 29, 47, 0.45), inset 0 0 0 1px rgba(66, 41, 24, 0.12);
}
.modal-visual.yaya-placeholder { background-position: center 43%, center !important; }
.modal-visual.yaya-placeholder::after {
  content: "Fotografija uskoro";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 24px;
  color: rgba(66, 41, 24, 0.62);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
}

/* "Svježe eko borovnice" has no product photo, so it gets a small square box that fills
   with berries instead — a few drop in individually, then a fast burst fills it to ~76%
   (never all the way — see buildBerryFillBox). Its own edge clips the berries, unlike the
   card-accents particles elsewhere, since it represents a literal drawn container.
   Driven by :hover/:focus-within (same trigger as every other card animation) rather than
   a one-time scroll reveal, so it replays each time the card is hovered. */
.berry-fill-box {
  position: relative;
  z-index: 2;
  width: 88%;
  height: 88%;
  border-radius: 18px;
  background: transparent;
  border: none;
  overflow: hidden;
  animation: none !important;
}

.berry-fill-item {
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0;
  transform: translateY(-190px) rotate(var(--rot, 0deg)) scale(0.85);
  transition:
    opacity 0.45s var(--ease),
    transform 0.75s cubic-bezier(.18,.89,.32,1.28);
  filter: drop-shadow(0 6px 5px rgba(0,0,0,.14));
}

.product-card:hover .berry-fill-item,
.product-card:focus-within .berry-fill-item {
  opacity: 1;
  transform: translateY(0) rotate(var(--rot, 0deg)) scale(1);
}
@keyframes idle-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* Accent elements (berries/leaves) fly out BEHIND the product (z-index 1, product image is 2) */
.card-accents { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: visible; }
.card-accent {
  position: absolute;
  left: 50%;
  bottom: 30%;
  width: 26px;
  height: 26px;
  margin-left: -13px;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0;
  filter: blur(2px);
  transform: translate(0, 0) scale(0.4) rotate(0deg);
}
.product-card:hover .card-accent, .product-card:focus-within .card-accent,
.choco-card:hover .card-accent, .choco-card:focus-within .card-accent,
.product-card.is-accent-active .card-accent,
.choco-card.is-accent-active .card-accent,
.product-detail-media:hover .card-accent {
  animation: accent-fly 1.1s var(--ease) forwards;
}
@keyframes accent-fly {
  0%   { opacity: 0;    transform: translate(0, 0) scale(0.4) rotate(0deg); filter: blur(2px); }
  25%  { opacity: 0.9;  transform: translate(var(--ax), var(--ay)) scale(1) rotate(var(--arot)); filter: blur(0); }
  65%  { opacity: 0.85; transform: translate(var(--ax), var(--ay)) scale(1.05) rotate(var(--arot)); filter: blur(0); }
  100% { opacity: 0;    transform: translate(calc(var(--ax) * 1.2), calc(var(--ay) * 1.2)) scale(1.1) rotate(var(--arot)); filter: blur(1.5px); }
}

.product-card-text, .choco-card-text {
  width: 100%;
  flex: 1 1 auto;
  text-align: center;
  padding-top: 18px; /* gap between the product image and the text below it */
  display: flex;
  flex-direction: column;
  align-items: center;
}
.product-card-name, .choco-card-name {
  font-family: var(--font-display);
  font-weight: 400; /* Bebas Neue only ships a regular weight; its display cut already reads as bold */
  font-size: 1.72rem; /* ~25% bigger than the original 22px */
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 6px; /* consistent, natural gap — no reserved dead space for short names */
  width: 100%;
  height: 2.3em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-wrap: balance;
}
.product-card-price, .choco-card-price { display: block; font-weight: 600; color: var(--blueberry); font-size: 1.2rem; line-height: 1.2; }
.product-card-price { color: var(--blueberry-dark); }

/* Maloprodajna + sidrena (dodatna) cijena — Odluka 1212 */
.price-dual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  line-height: 1.25;
}
.price-dual-current { display: block; }
.price-dual-anchor {
  display: block;
  font-size: 0.72em;
  font-weight: 500;
  opacity: 0.78;
}
.price-dual-anchor-label { font-weight: 500; }
.modal-foot .price.price-dual,
.product-detail-price.price-dual { align-items: flex-start; }
.product-detail-info .price-dual-anchor { color: inherit; opacity: 0.7; }

/* Weight/size toggle — "Svježe eko borovnice" (weight) and "Liker od borovnica" (bottle
   size + photo) are the only two products sold by selectable option. Sits just above
   the price it updates. */
.product-card-qty { display: flex; gap: 8px; justify-content: center; margin-bottom: 8px; }
/* Liker's toggle additionally swaps the product photo, so — like the order/view
   buttons — it only reveals on hover instead of sitting there permanently. Collapsed via
   max-height (not just opacity) while hidden, so it doesn't reserve layout space and make
   this one card taller than every sibling card that doesn't have a quantity row. */
.product-card-qty--hover { max-height: 0; margin-bottom: 0; opacity: 0; overflow: hidden; pointer-events: none; transition: opacity 0.25s ease, max-height 0.25s ease, margin-bottom 0.25s ease; }
.product-card:hover .product-card-qty--hover, .product-card:focus-within .product-card-qty--hover {
  max-height: 44px;
  margin-bottom: 8px;
  opacity: 1;
  pointer-events: auto;
}
.qty-pill {
  padding: 5px 14px;
  border-radius: 999px;
  border: 1.5px solid rgba(27, 22, 38, 0.15);
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.qty-pill:hover:not(.is-active) { border-color: var(--blueberry); }
.qty-pill.is-active { background: var(--blueberry); border-color: var(--blueberry); color: var(--white); }
/* Chocolate section keeps its own gold-on-dark identity — layout/motion above is shared,
   only these two color rules differ from the berry grid. */
.choco-card-name { color: var(--gold-soft); }
.choco-card-price { color: var(--gold); }

/* Image + text lift together on hover to reveal the action buttons underneath, without the
   box itself changing height or anything spilling outside it. */
.product-card-main, .choco-card-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  flex: 1 1 auto;
  transition: transform 0.35s var(--ease);
}
.product-card:hover .product-card-main, .product-card:focus-within .product-card-main,
.choco-card:hover .choco-card-main, .choco-card:focus-within .choco-card-main {
  transform: translateY(-58px);
}

.product-card-actions, .choco-card-actions {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 22px;
  z-index: 4;
  display: flex;
  gap: 10px;
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity .2s ease, transform .22s var(--ease);
}
.product-card:hover .product-card-actions, .product-card:focus-within .product-card-actions,
.choco-card:hover .choco-card-actions, .choco-card:focus-within .choco-card-actions {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.product-card-actions .btn, .choco-card-actions .btn { flex: 1; height: 44px; min-height: 44px; padding: 0 12px; font-size: 0.9rem; text-decoration: none; }
.card-action-label,
.card-action-break { display: inline; }
.btn-small--ghost { background: transparent; color: var(--ink); box-shadow: none; border: 1.5px solid rgba(27, 22, 38, 0.2); }
.btn-small--ghost:hover { background: rgba(255, 255, 255, 0.5); }
/* Ghost button needs light text/border on the chocolate section's dark cards */
.choco-card-actions .btn-small--ghost { color: var(--white); border-color: rgba(255, 255, 255, 0.35); }
.choco-card-actions .btn-small--ghost:hover { background: rgba(255, 255, 255, 0.12); }

/* "Dodaj u košaricu" control: fills the same flex slot as the buttons beside it, and
   swaps between the add button and the live qty stepper (see buildCardCartControl) —
   same behaviour as the modal's own button. */
.card-cart-control { flex: 1; display: flex; }
.card-cart-control .btn { width: 100%; }
.card-cart-control > .btn { background: var(--cta); color: var(--white); }
.card-cart-control > .btn:hover { background: var(--cta-hover); color: var(--white); }
.card-cart-control-stepper { flex: 1; display: flex; align-items: center; justify-content: center; }
.card-cart-control-stepper .qty-stepper { width: 100%; justify-content: center; }
/* .qty-stepper defaults to light-on-dark (built for the dark cart panel/modal) — product
   cards sit on a light pastel background, so it needs the same dark-ink treatment as the
   liker's .qty-pill already uses there. Choco cards are dark (--card-color is forced to
   --dark-soft in JS), so the default light-on-dark stepper already reads fine as-is. */
.product-card-actions .qty-stepper { border-color: rgba(27, 22, 38, 0.15); }
.product-card-actions .qty-stepper-btn { color: var(--ink); }
.product-card-actions .qty-stepper-btn:hover { background: rgba(27, 22, 38, 0.08); }
.product-card-actions .qty-stepper-value { color: var(--ink); }

/* Touch cards have two equally sized actions. Flex items otherwise keep the intrinsic
   width of their labels and the right-hand action can spill past the card edge. The
   width fallback covers every common iPad orientation, while coarse-pointer detection
   also catches larger iPad Pro viewports. */
@media (max-width: 1199px), (hover: none) and (pointer: coarse) {
  /* Touchscreens do not have a dependable hover state. Keep card actions in the normal
     layout so a tap cannot leave the content translated while the buttons reflow. */
  .product-card-main,
  .choco-card-main,
  .product-card:hover .product-card-main,
  .product-card:focus-within .product-card-main,
  .choco-card:hover .choco-card-main,
  .choco-card:focus-within .choco-card-main {
    transform: none;
    transition: none;
  }
  .product-card-actions,
  .choco-card-actions {
    display: none;
  }
  .product-card:hover .product-card-actions,
  .product-card:focus-within .product-card-actions,
  .choco-card:hover .choco-card-actions,
  .choco-card:focus-within .choco-card-actions {
    display: none;
  }
  .product-card-actions > .btn,
  .product-card-actions > .card-cart-control,
  .choco-card-actions > .btn,
  .choco-card-actions > .card-cart-control {
    width: 100%;
    min-width: 0;
  }
  .product-card-actions .btn,
  .choco-card-actions .btn {
    width: 100%;
    height: 52px;
    min-height: 52px;
    min-width: 0;
    padding: 6px 8px;
    font-size: 0.78rem;
    line-height: 1.15;
    text-align: center;
    white-space: normal;
  }
  .card-action-label { line-height: 1.08; }
  .card-action-break { display: block; }
  .product-card-actions > .btn,
  .choco-card-actions > .btn { width: 100%; }
  .product-card-actions .card-cart-control .btn,
  .choco-card-actions .card-cart-control .btn { width: 100%; }
  .product-card-actions .card-cart-control,
  .choco-card-actions .card-cart-control,
  .product-card-actions .card-cart-control-stepper,
  .choco-card-actions .card-cart-control-stepper { min-width: 0; }
  .product-card-qty--hover,
  .product-card:hover .product-card-qty--hover,
  .product-card:focus-within .product-card-qty--hover {
    max-height: 44px;
    margin-bottom: 8px;
    opacity: 1;
    pointer-events: auto;
  }

  /* The lower touch zone recreates desktop hover on demand. Only an explicitly expanded
     card reveals the two actions; all other touch cards keep the clean default layout. */
  .product-card .product-card-actions,
  .choco-card .choco-card-actions {
    display: flex;
    opacity: 0;
    transform: translateY(14px);
    pointer-events: none;
  }
  .product-card.is-touch-expanded .product-card-main,
  .choco-card.is-touch-expanded .choco-card-main {
    transform: translateY(-58px);
    transition: transform 0.3s var(--ease);
  }
  .product-card.is-touch-expanded .product-card-actions,
  .choco-card.is-touch-expanded .choco-card-actions {
    display: flex;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-card, .choco-card { opacity: 1; transform: none; transition: none; }
  .product-card-box, .choco-card-box { transition: none; }
  .product-card-image, .choco-card-image { animation: none; }
  .product-card-image img, .choco-card-image img { transition: none; }
  .product-card:hover .card-accent,
  .product-card.is-accent-active .card-accent,
  .choco-card:hover .card-accent,
  .choco-card.is-accent-active .card-accent,
  .product-detail-media:hover .card-accent { animation: none; }
  .berry-fill-item { transition: none; opacity: 1; transform: rotate(var(--rot, 0deg)); }
}

/* ---------- Product Card View redesign. Spacing overrides below win over the shared
   .product-card-box/.product-card-text rules above by appearing later in the cascade,
   without editing those shared rules in place. ---------- */
.product-card-box { padding: 30px 28px 30px; }
.product-card-text { padding-top: 22px; }
.product-card-name { margin-bottom: 12px; }

.pc-topbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; margin-bottom: 22px; }

.pc-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.pc-status-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
/* Colors reuse the existing palette (--eco-green, --blueberry-dark, --ink-soft) plus two
   extra hexes, so no new color tokens are introduced for the 5 states. */
.pc-status--dostupno { color: var(--eco-green); }
.pc-status--pri-kraju { color: #d1652f; }
.pc-status--rasprodano { color: var(--ink-soft); }
.pc-status--uskoro { color: var(--blueberry-dark); }
.pc-status--sezonski { color: #4a3812; }
.pc-status--u-izradi { color: #b42318; background: #fff0ef; box-shadow: inset 0 0 0 1px rgba(180, 35, 24, 0.2); }
.pc-status--izvan-sezone { color: #b42318; background: #fff0ef; box-shadow: inset 0 0 0 1px rgba(180, 35, 24, 0.2); }
.btn-seasonal:disabled { cursor: default; opacity: 0.78; box-shadow: none; transform: none; }

.pc-tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  color: var(--ink);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

/* Characteristics row: discreet secondary info, sits between the name and the divider */
.pc-traits { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.pc-trait { display: inline-flex; align-items: center; gap: 5px; font-size: 0.78rem; font-weight: 500; color: var(--ink-soft); }
.pc-trait-icon { width: 14px; height: 14px; flex-shrink: 0; color: var(--ink-soft); }
.pc-trait-icon svg { display: block; width: 100%; height: 100%; }
.pc-trait--quantity { gap: 0; }
.pc-trait-sep { color: rgba(27, 22, 38, 0.25); font-size: 0.75rem; }

.pc-divider { display: block; width: 100%; height: 1px; background: rgba(27, 22, 38, 0.1); margin: 0 0 16px; }

.pc-footer { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; margin-top: auto; }

.pc-unavailable-text { font-size: 0.92rem; font-weight: 600; color: var(--ink-soft); }
.pc-notify-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1.5px solid rgba(27, 22, 38, 0.18);
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.pc-notify-btn:hover { background: rgba(27, 22, 38, 0.06); border-color: rgba(27, 22, 38, 0.3); }
.pc-notify-btn svg { width: 16px; height: 16px; }

/* ---------- Chocolate special section ---------- */
/* Horizontal padding (24px) moved here, off .chocolate-inner, to mirror .products'
   structure exactly: the inset lives on the section, not inside the max-width box —
   otherwise the two grids' content width diverges once max-width (1320px) is the
   binding constraint, even with identical padding values. */
.chocolate { background: var(--dark); color: rgba(255,255,255,0.85); padding: 104px 24px; }
.chocolate .section-lede { color: rgba(255,255,255,0.6); }
/* Same max-width as .products-wrap, and now the same zero-own-padding structure too. */
.chocolate-inner { max-width: 1320px; padding-left: 0; padding-right: 0; }
/* Column count, gaps and breakpoints match .product-grid exactly. */
.choco-grid { display: grid; grid-template-columns: 1fr; grid-auto-rows: 1fr; column-gap: 32px; row-gap: 56px; }
@media (min-width: 640px) { .choco-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .choco-grid { grid-template-columns: repeat(3, 1fr); } }
.choco-cta { text-align: center; margin-top: 52px; }
.choco-cta p { color: rgba(255,255,255,0.6); margin-bottom: 18px; }

/* Choco Card View: same pc-topbar/traits/divider/footer structure as the berry grid,
   just adapted to sit on the chocolate section's own dark card surface — the status/tag
   pills stay identical (they're opaque white pills, readable on any card color), only the
   elements that sit directly on the card background need light-on-dark treatment. */
.choco-card-box { padding: 30px 28px 30px; }
.choco-card-text { padding-top: 22px; }
.choco-card-name { font-size: 1.58rem; }
.choco-card-name.is-long { font-size: 1.4rem; }
.choco-card-name { margin-bottom: 12px; }
.choco-card .pc-trait, .choco-card .pc-trait-icon { color: rgba(255, 255, 255, 0.65); }
.choco-card .pc-trait-sep { color: rgba(255, 255, 255, 0.25); }
.choco-card .pc-divider { background: rgba(255, 255, 255, 0.12); }
.choco-card .pc-unavailable-text { color: rgba(255, 255, 255, 0.6); }
.choco-card .pc-notify-btn { color: var(--white); border-color: rgba(255, 255, 255, 0.3); }
.choco-card .pc-notify-btn:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.45); }

/* Mobile-only product list from the supplied sketch. All layout spacing follows
   a 4px/8px grid: 8, 16, 48, 112 and 200px. */
@media (max-width: 639px) {
  .products,
  .chocolate {
    padding-left: 16px;
    padding-right: 16px;
    overflow: visible;
  }

  .product-grid,
  .choco-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  .product-card,
  .choco-card {
    min-width: 0;
    opacity: 1;
    transform: none;
    transition: none;
    -webkit-touch-callout: none;
  }

  .product-card:hover .card-accent,
  .product-card:focus-within .card-accent,
  .choco-card:hover .card-accent,
  .choco-card:focus-within .card-accent { animation: none; }

  .product-card.is-accent-active .card-accent,
  .choco-card.is-accent-active .card-accent {
    animation: accent-fly-mobile 1.1s var(--ease) forwards;
  }

  /* Mobile collection cards keep their CTA anchored below the image in every
     interaction state; tapping the card opens details without reflowing the row. */
  .product-card:hover .product-card-actions,
  .product-card:focus-within .product-card-actions,
  .product-card.is-touch-expanded .product-card-actions,
  .choco-card:hover .choco-card-actions,
  .choco-card:focus-within .choco-card-actions,
  .choco-card.is-touch-expanded .choco-card-actions {
    display: flex;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .product-card:hover .product-card-main,
  .product-card:focus-within .product-card-main,
  .product-card.is-touch-expanded .product-card-main,
  .choco-card:hover .choco-card-main,
  .choco-card:focus-within .choco-card-main,
  .choco-card.is-touch-expanded .choco-card-main {
    transform: none;
  }

  .product-card-box,
  .choco-card-box {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) 48px;
    column-gap: 16px;
    row-gap: 8px;
    align-items: start;
    min-width: 0;
    min-height: 200px;
    padding: 16px;
    border-radius: 16px;
  }

  .product-card-box.is-touch-pressing,
  .choco-card-box.is-touch-pressing {
    box-shadow: 0 6px 18px -14px rgba(36, 29, 47, 0.42), inset 0 2px 8px rgba(36, 29, 47, 0.06);
    transition: transform 0.12s var(--ease), box-shadow 0.12s ease;
  }

  .product-card .pc-topbar,
  .choco-card .pc-topbar {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    gap: 8px;
    min-width: 0;
    margin: 0 0 8px;
  }

  .product-card .pc-status,
  .choco-card .pc-status,
  .product-card .pc-tag,
  .choco-card .pc-tag {
    max-width: 100%;
    padding: 4px 8px;
    gap: 8px;
    font-size: 0.58rem;
    line-height: 1.2;
    white-space: normal;
    text-align: left;
  }

  .product-card-main,
  .choco-card-main { display: contents; }

  .product-card-image,
  .choco-card-image {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: start;
    width: 112px;
    height: 112px;
    aspect-ratio: 1;
    overflow: visible;
    animation: none;
  }

  /* Let the product's drop-shadow breathe outside the 112px image frame, while
     keeping the decorative burst clipped to that frame and away from card copy. */
  .product-card-image .card-accents,
  .choco-card-image .card-accents {
    overflow: hidden;
  }

  .product-card-image img,
  .choco-card-image img,
  .product-card-image.is-wide img,
  .choco-card-image.is-wide img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
  }

  .product-card-text,
  .choco-card-text {
    grid-column: 2;
    grid-row: 2 / 4;
    align-self: start;
    align-items: flex-start;
    min-width: 0;
    padding: 0;
    text-align: left;
  }

  .product-card .pc-divider,
  .choco-card .pc-divider { display: none; }

  .product-card .pc-footer,
  .choco-card .pc-footer {
    align-items: flex-start;
    margin-top: 0;
  }

  .product-card-name,
  .choco-card-name,
  .choco-card-name.is-long {
    justify-content: flex-start;
    height: auto;
    margin: 0 0 16px;
    padding: 0 0 16px;
    border-bottom: 1px solid rgba(101, 66, 181, 0.48);
    font-size: clamp(1.4rem, 6vw, 1.75rem);
    line-height: 0.96;
    text-align: left;
  }

  .product-card .pc-traits,
  .choco-card .pc-traits {
    justify-content: flex-start;
    gap: 8px;
    margin: 0 0 8px;
  }

  .product-card .pc-trait,
  .choco-card .pc-trait { font-size: 0.66rem; }

  .product-card-qty {
    justify-content: flex-start;
    gap: 8px;
    margin: 0 0 8px;
  }

  .qty-pill {
    padding: 4px 8px;
    font-size: 0.66rem;
  }

  .product-card .product-card-actions,
  .choco-card .choco-card-actions {
    display: flex;
    position: static;
    grid-column: 1;
    grid-row: 3;
    align-self: end;
    width: 112px;
    max-height: none;
    margin: 0;
    overflow: visible;
    flex-direction: column;
    gap: 8px;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition: none;
  }

  .product-card .product-card-actions > a,
  .choco-card .choco-card-actions > a { display: none; }

  .product-card .product-card-actions > .card-cart-control,
  .choco-card .choco-card-actions > .card-cart-control {
    flex: 0 0 auto;
    width: 112px;
    height: 48px;
  }

  .product-card .card-cart-control > .btn,
  .choco-card .card-cart-control > .btn {
    width: 112px;
    height: 48px;
    min-height: 48px;
    padding: 0;
    border-radius: 24px;
    font-size: 0;
  }

  .product-card .card-cart-control > .btn svg,
  .choco-card .card-cart-control > .btn svg {
    width: 24px;
    height: 24px;
  }

  .product-card .card-action-label,
  .choco-card .card-action-label { display: none; }

  .product-card .card-cart-control-stepper,
  .choco-card .card-cart-control-stepper {
    width: 112px;
    min-width: 112px;
  }

  .product-card .card-cart-control-stepper .qty-stepper,
  .choco-card .card-cart-control-stepper .qty-stepper {
    width: 112px;
    height: 48px;
    gap: 8px;
    padding: 4px;
    justify-content: space-between;
  }

  .product-card .card-cart-control-stepper .qty-stepper-btn,
  .choco-card .card-cart-control-stepper .qty-stepper-btn {
    width: 32px;
    height: 32px;
    font-size: 0.8rem;
  }

  .product-card .card-cart-control-stepper .qty-stepper-value,
  .choco-card .card-cart-control-stepper .qty-stepper-value {
    min-width: 16px;
    font-size: 0.7rem;
  }

  .choco-card[data-slug="tamna-borovnica-malina"] .choco-card-image img,
  .choco-card[data-slug="bijela-jagoda"] .choco-card-image img,
  .choco-card[data-slug="hrskavi-ljesnjak"] .choco-card-image img,
  .choco-card[data-slug="cremino-bucine-kostice"] .choco-card-image img {
    transform: rotate(90deg) scale(0.76);
  }
}

@keyframes accent-fly-mobile {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.4) rotate(0deg); filter: blur(2px); }
  25%  { opacity: 0.9; transform: translate(var(--mobile-ax), var(--mobile-ay)) scale(0.9) rotate(var(--arot)); filter: blur(0); }
  65%  { opacity: 0.85; transform: translate(var(--mobile-ax), var(--mobile-ay)) scale(1) rotate(var(--arot)); filter: blur(0); }
  100% { opacity: 0; transform: translate(var(--mobile-ax-end), var(--mobile-ay-end)) scale(1.05) rotate(var(--arot)); filter: blur(1.5px); }
}

@media (max-width: 639px) and (prefers-reduced-motion: reduce) {
  .product-card.is-accent-active .card-accent,
  .choco-card.is-accent-active .card-accent { animation: none; }
}

/* Keep status/tag pills consistent within each mobile collection. The complete
   collection switches rows together at the width required by its longest label. */
@media (max-width: 359px) {
  .product-card .pc-topbar {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    min-height: 48px;
  }
}

@media (min-width: 360px) and (max-width: 639px) {
  .product-card .pc-topbar {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    min-height: 19px;
  }
}

@media (max-width: 495px) {
  .choco-card .pc-topbar {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    min-height: 64px;
  }
}

@media (min-width: 496px) and (max-width: 639px) {
  .choco-card .pc-topbar {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    min-height: 28px;
  }
}

@media (max-width: 639px) {
  .product-card .pc-status,
  .product-card .pc-tag,
  .choco-card .pc-status,
  .choco-card .pc-tag {
    width: auto;
    white-space: nowrap;
  }

  .product-card .pc-traits,
  .choco-card .pc-traits {
    height: auto;
    min-height: 0;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    column-gap: 10px;
    row-gap: 8px;
  }

  .product-card .pc-trait,
  .choco-card .pc-trait {
    max-width: 100%;
    white-space: normal;
  }

  .product-card .pc-trait-sep,
  .choco-card .pc-trait-sep { display: none; }
}

/* ---------- Testimonials ---------- */
.testimonials {
  position: relative;
  padding: 104px 0 112px;
  background: var(--cream);
  overflow: hidden;
}
.testimonials::before,
.testimonials::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: 210px;
  aspect-ratio: 1;
  background: center / contain no-repeat;
  opacity: 0.09;
  pointer-events: none;
  animation: testimonial-float 7s ease-in-out infinite alternate;
}
.testimonials::before {
  top: 72px;
  left: -54px;
  background-image: url("../assets/images/branding/graphics/03_borovnica.svg");
  transform: rotate(-16deg);
}
.testimonials::after {
  right: -46px;
  bottom: 34px;
  background-image: url("../assets/images/branding/graphics/10_pralina.svg");
  animation-delay: -3s;
}
@keyframes testimonial-float {
  from { translate: 0 0; rotate: -2deg; }
  to { translate: 0 -12px; rotate: 3deg; }
}
.testimonials-wrap { position: relative; z-index: 1; }
.testimonials-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-bottom: 46px;
  position: relative;
}
.testimonials-head .section-head { margin: 0; text-align: center; }
.testimonials-head .section-head h2 { margin-bottom: 0; color: var(--yaya-brown); }
.testimonial-controls {
  position: absolute;
  right: 0;
  bottom: 1px;
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.testimonial-nav {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--blueberry);
  color: var(--white);
  font-size: 1.2rem;
  cursor: pointer;
  box-shadow: 0 12px 26px -16px rgba(70, 38, 127, 0.62);
  transition: transform 0.2s var(--ease), background-color 0.2s ease, border-color 0.2s ease;
}
.testimonial-nav:hover { transform: translateY(-2px); background: var(--blueberry-dark); }
.testimonial-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 48px) / 3);
  align-items: stretch;
  gap: 24px;
  padding: 20px 2px 24px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  align-items: start;
  scrollbar-width: thin;
  scrollbar-color: rgba(101, 66, 181, 0.34) transparent;
}
.testimonial-track::-webkit-scrollbar { height: 6px; }
.testimonial-track::-webkit-scrollbar-track { background: transparent; }
.testimonial-track::-webkit-scrollbar-thumb { background: rgba(101, 66, 181, 0.3); border-radius: 999px; }
.testimonial-card {
  --testimonial-bg: #E8DFF3;
  --testimonial-accent: #6542B5;
  --testimonial-rotate: -2deg;
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  scroll-snap-align: start;
  min-height: 500px;
  border-radius: var(--radius);
  background: var(--testimonial-bg);
  box-shadow: 0 24px 44px -34px rgba(55, 34, 35, 0.36);
  isolation: isolate;
  transition: transform 0.3s var(--ease), box-shadow 0.3s ease;
}
.testimonial-card::before {
  content: "“";
  position: absolute;
  z-index: -1;
  right: 20px;
  top: 252px;
  color: var(--testimonial-accent);
  font-family: Georgia, serif;
  font-size: 8rem;
  font-weight: 700;
  line-height: 1;
  opacity: 0.09;
  pointer-events: none;
}
.testimonial-card:hover {
  transform: translateY(-7px) rotate(0.15deg);
  box-shadow: 0 30px 54px -34px rgba(55, 34, 35, 0.44);
}
.testimonial-card--berry { --testimonial-bg: #E7DFFA; --testimonial-accent: #53339B; }
.testimonial-card--cocoa { --testimonial-bg: #F2E4D7; --testimonial-accent: #573223; --testimonial-rotate: 2deg; }
.testimonial-card--rose { --testimonial-bg: #F9E1E4; --testimonial-accent: #D43B3F; }
.testimonial-card--gold { --testimonial-bg: #F3E5BD; --testimonial-accent: #986B12; --testimonial-rotate: 2deg; }
.testimonial-card--blueberry { --testimonial-bg: #DEE6F8; --testimonial-accent: #38528C; }
.testimonial-media {
  position: relative;
  z-index: 2;
  height: 292px;
  display: grid;
  place-items: center;
  padding: 4px 22px 0;
  overflow: visible;
}
.testimonial-media[role="button"] { cursor: pointer; }
.testimonial-media[role="button"]:focus-visible {
  outline: 3px solid rgba(101, 66, 181, 0.48);
  outline-offset: -5px;
  border-radius: inherit;
}
.testimonial-media::before {
  content: none;
  position: absolute;
  z-index: -1;
  width: 174px;
  height: 174px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.56);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}
.testimonial-media img {
  width: 88%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 17px 13px rgba(36, 29, 47, 0.19));
  transform: rotate(var(--testimonial-rotate)) scale(0.98);
  transition: transform 0.3s var(--ease);
}
.testimonial-card:hover .testimonial-media img { transform: translateY(-7px) rotate(0deg) scale(1.03); }
.testimonial-card--gold .testimonial-media img { width: 108%; height: 92%; }
.testimonial-card--blueberry .testimonial-media img { width: 72%; }
.testimonial-body {
  position: relative;
  z-index: 3;
  min-height: 258px;
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 22px 28px 26px;
}
.testimonial-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.testimonial-tag {
  align-self: flex-start;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.66);
  color: var(--testimonial-accent);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.testimonial-rating {
  display: block;
  align-self: flex-start;
  flex-shrink: 0;
  margin: 0 0 12px;
  color: #B77B14;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}
.testimonial-quote {
  margin: 20px 0 28px;
  color: var(--yaya-brown);
  font-size: clamp(1.12rem, 1.35vw, 1.28rem);
  font-weight: 600;
  line-height: 1.45;
  text-wrap: balance;
}
.testimonial-body footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--testimonial-accent) 18%, transparent);
  font-size: 0.76rem;
}
.testimonial-body footer strong { color: var(--ink); }
.testimonial-body footer a { color: var(--testimonial-accent); text-decoration: none; font-weight: 600; }
.testimonial-body footer a:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 899px) {
  .testimonial-track { grid-auto-columns: calc((100% - 18px) / 2); gap: 18px; }
}
@media (max-width: 639px) {
  .testimonials { padding: 72px 0; }
  .testimonials-wrap { padding: 0; }
  .testimonials-head { align-items: flex-start; margin-bottom: 22px; padding: 0 24px; }
  .testimonial-controls { display: none; }
  .testimonial-track {
    grid-auto-columns: min(82vw, 320px);
    gap: 16px;
    padding: 18px 24px 20px;
    scroll-padding-inline: 24px;
  }
  .testimonial-card { min-height: 500px; }
  .testimonial-card::before { top: 218px; }
  .testimonial-media { height: 258px; padding: 2px 18px 0; }
  .testimonial-media img { width: 92%; height: 100%; transform: rotate(var(--testimonial-rotate)) scale(0.98); }
  .testimonial-card--gold .testimonial-media img { width: 110%; height: 90%; }
  .testimonial-card--blueberry .testimonial-media img { width: 72%; }
  .testimonial-body { min-height: 230px; padding: 20px 22px 24px; }
  .testimonial-meta { align-items: flex-start; flex-direction: column; gap: 10px; }
  .testimonial-quote { margin: 18px 0 24px; font-size: 1rem; }
  .testimonial-body footer { align-items: flex-start; flex-direction: column; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .testimonial-track { scroll-behavior: auto; }
  .testimonial-media img { transition: none; }
  .testimonials::before,
  .testimonials::after { animation: none; }
}

/* Horizontal editorial mosaic: three compact cards above, two wider below. */
@media (min-width: 900px) {
  .testimonial-controls { display: none; }
  .testimonial-track {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-flow: row;
    gap: 20px;
    padding: 12px 2px 22px;
    overflow: visible;
    scroll-snap-type: none;
  }
  .testimonial-card {
    grid-column: span 2;
    min-height: 278px;
    display: grid;
    grid-template-columns: minmax(126px, 40%) minmax(0, 1fr);
    align-items: stretch;
  }
  .testimonial-card:nth-child(4),
  .testimonial-card:nth-child(5) { grid-column: span 3; }
  .testimonial-media {
    height: 100%;
    min-height: 278px;
    padding: 18px 10px;
    overflow: hidden;
  }
  .testimonial-media::before {
    width: 122px;
    height: 122px;
  }
  .testimonial-media img {
    width: 100%;
    height: 91%;
    transform: rotate(var(--testimonial-rotate)) scale(0.96);
  }
  .testimonial-card:hover .testimonial-media img {
    transform: translateY(-4px) rotate(0deg) scale(1.01);
  }
  .testimonial-card--gold .testimonial-media img { width: 118%; height: 78%; }
  .testimonial-card--blueberry .testimonial-media img { width: 84%; height: 88%; }
  .testimonial-card::before {
    z-index: 0;
    top: 82px;
    right: 16px;
    font-size: 6.5rem;
  }
  .testimonial-body {
    min-height: 278px;
    padding: 26px 22px 22px;
  }
  .testimonial-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
  .testimonial-quote {
    margin: 18px 0 22px;
    font-size: 1rem;
    line-height: 1.45;
  }
  .testimonial-body footer {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }
  .testimonial-card:nth-child(4) .testimonial-meta,
  .testimonial-card:nth-child(5) .testimonial-meta {
    align-items: center;
    flex-direction: row;
  }
  .testimonial-card:nth-child(4) .testimonial-body footer,
  .testimonial-card:nth-child(5) .testimonial-body footer {
    align-items: center;
    flex-direction: row;
  }
}

@media (min-width: 640px) and (max-width: 899px) {
  .testimonial-controls { display: none; }
  .testimonial-track {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(76vw, 580px);
    gap: 16px;
    padding: 18px 24px 22px;
    overflow-x: auto;
    scroll-padding-inline: 24px;
    scroll-snap-type: x mandatory;
  }
  .testimonial-card {
    grid-column: auto;
    min-height: 300px;
    display: grid;
    grid-template-columns: 38% minmax(0, 1fr);
  }
  .testimonial-media { height: 100%; min-height: 300px; padding: 16px 8px; overflow: hidden; }
  .testimonial-media img { width: 100%; height: 90%; transform: rotate(var(--testimonial-rotate)) scale(0.94); }
  .testimonial-card--gold .testimonial-media img { width: 116%; height: 76%; }
  .testimonial-card--blueberry .testimonial-media img { width: 82%; }
  .testimonial-card::before { top: 90px; right: 14px; font-size: 6rem; }
  .testimonial-body { min-height: 300px; padding: 24px 20px 20px; }
  .testimonial-meta,
  .testimonial-body footer { align-items: flex-start; flex-direction: column; }
  .testimonial-quote { font-size: 0.98rem; }
}

@media (max-width: 639px) {
  .testimonial-track {
    grid-auto-columns: min(80vw, 330px);
    gap: 16px;
    padding-right: 64px;
  }
  .testimonial-card {
    min-height: 306px;
    display: grid;
    grid-template-columns: 39% minmax(0, 1fr);
  }
  .testimonial-media {
    height: 100%;
    min-height: 306px;
    padding: 16px 6px;
    overflow: hidden;
  }
  .testimonial-media::before { width: 104px; height: 104px; }
  .testimonial-media img {
    width: 105%;
    height: 88%;
    transform: rotate(var(--testimonial-rotate)) scale(0.94);
  }
  .testimonial-card--gold .testimonial-media img { width: 124%; height: 72%; }
  .testimonial-card--blueberry .testimonial-media img { width: 86%; height: 84%; }
  .testimonial-card::before { top: 92px; right: 10px; font-size: 5rem; }
  .testimonial-body { min-height: 306px; padding: 22px 16px 18px; }
  .testimonial-tag { padding: 7px 9px; font-size: 0.58rem; }
  .testimonial-rating { font-size: 0.7rem; }
  .testimonial-quote { margin: 16px 0 20px; font-size: 0.94rem; }
  .testimonial-body footer { font-size: 0.68rem; }
}

/* Final review carousel: one focused card with an exact neighbouring-card hint. */
.testimonials::before,
.testimonials::after,
.testimonial-card::before { display: none; }

.testimonial-controls { display: flex; }
.testimonial-track {
  width: min(100%, 860px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: 8px;
  padding: 12px 48px 22px;
  overflow-x: auto;
  scroll-padding-inline: 48px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.testimonial-track::-webkit-scrollbar { display: none; }

.testimonial-card,
.testimonial-card:nth-child(4),
.testimonial-card:nth-child(5) {
  grid-column: auto;
  height: 320px;
  min-height: 0;
  display: grid;
  grid-template-columns: 38% minmax(0, 1fr);
  align-items: stretch;
  scroll-snap-align: center;
}
.testimonial-media {
  height: 320px;
  min-height: 0;
  padding: 18px 12px;
  overflow: hidden;
}
.testimonial-media::before { width: 142px; height: 142px; }
.testimonial-media img {
  width: 100%;
  height: 91%;
  transform: rotate(var(--testimonial-rotate)) scale(0.96);
}
.testimonial-card:hover .testimonial-media img {
  transform: translateY(-4px) rotate(0deg) scale(1.01);
}
.testimonial-card--gold .testimonial-media img { width: 112%; height: 82%; }
.testimonial-card--blueberry .testimonial-media img { width: 84%; height: 88%; }
.testimonial-body {
  height: 320px;
  min-height: 0;
  padding: 30px 32px 24px;
}
.testimonial-meta,
.testimonial-card:nth-child(4) .testimonial-meta,
.testimonial-card:nth-child(5) .testimonial-meta {
  align-items: center;
  flex-direction: row;
}
.testimonial-quote { margin: 28px 0 14px; font-size: clamp(1.08rem, 1.7vw, 1.35rem); }
.testimonial-body footer,
.testimonial-card:nth-child(4) .testimonial-body footer,
.testimonial-card:nth-child(5) .testimonial-body footer {
  align-items: center;
  flex-direction: row;
}

@media (max-width: 899px) {
  .testimonial-controls { display: none; }
}

@media (max-width: 639px) {
  .testimonial-track {
    width: 100%;
    grid-auto-columns: 100%;
    gap: 8px;
    padding: 12px 48px 20px;
    scroll-padding-inline: 48px;
  }
  .testimonial-card,
  .testimonial-card:nth-child(4),
  .testimonial-card:nth-child(5) {
    height: 320px;
    min-height: 0;
    grid-template-columns: 39% minmax(0, 1fr);
  }
  .testimonial-media { height: 320px; min-height: 0; padding: 16px 6px; }
  .testimonial-media::before { width: 104px; height: 104px; }
  .testimonial-media img { width: 105%; height: 88%; transform: rotate(var(--testimonial-rotate)) scale(0.94); }
  .testimonial-card--gold .testimonial-media img { width: 120%; height: 76%; }
  .testimonial-card--blueberry .testimonial-media img { width: 86%; height: 84%; }
  .testimonial-body { height: 320px; min-height: 0; padding: 22px 16px 18px; }
  .testimonial-meta,
  .testimonial-card:nth-child(4) .testimonial-meta,
  .testimonial-card:nth-child(5) .testimonial-meta,
  .testimonial-body footer,
  .testimonial-card:nth-child(4) .testimonial-body footer,
  .testimonial-card:nth-child(5) .testimonial-body footer {
    align-items: flex-start;
    flex-direction: column;
  }
  .testimonial-quote { margin: 16px 0 12px; font-size: 0.94rem; }
}

/* Two-row review mosaic with soft, cream-coloured edge fades. The track keeps exactly
   40px of the neighbouring column inside the viewport; the gradient makes that hint
   dissolve into the section instead of looking abruptly clipped. */
.testimonial-viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.testimonial-viewport::before,
.testimonial-viewport::after {
  content: "";
  position: absolute;
  z-index: 6;
  top: 12px;
  bottom: 22px;
  width: 64px;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.22s ease;
}
.testimonial-viewport::before {
  left: 0;
  background: linear-gradient(90deg, #FFF5E9 8%, rgba(255, 245, 233, 0.88) 38%, rgba(255, 245, 233, 0));
}
.testimonial-viewport::after {
  right: 0;
  background: linear-gradient(270deg, #FFF5E9 8%, rgba(255, 245, 233, 0.88) 38%, rgba(255, 245, 233, 0));
}
.testimonial-viewport.is-at-start::before,
.testimonial-viewport.is-at-end::after { opacity: 0; }

/* In loop mode both edge fades remain visible because there is no beginning or end. */
.testimonial-viewport.is-looping::before,
.testimonial-viewport.is-looping::after { opacity: 1; }
.testimonial-track.is-looping {
  scroll-behavior: auto;
  scroll-snap-type: none;
}

.testimonial-track {
  width: 100%;
  margin: 0;
  display: grid;
  grid-template-rows: repeat(2, 264px);
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 16px) / 3);
  align-items: stretch;
  column-gap: 8px;
  row-gap: 14px;
  padding: 12px 48px 22px;
  overflow-x: auto;
  scroll-padding-inline: 48px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.testimonial-track::-webkit-scrollbar { display: none; }
.testimonial-card,
.testimonial-card:nth-child(4),
.testimonial-card:nth-child(5) {
  width: 100%;
  height: 264px;
  min-height: 0;
  display: grid;
  grid-template-columns: 36% minmax(0, 1fr);
  align-items: stretch;
  scroll-snap-align: start;
}
.testimonial-media {
  width: 100%;
  height: 264px;
  min-height: 0;
  padding: 14px 8px;
  overflow: hidden;
}
.testimonial-media::before { width: 108px; height: 108px; }
.testimonial-media img {
  width: 105%;
  height: 88%;
  transform: rotate(var(--testimonial-rotate)) scale(0.94);
}
.testimonial-card:hover .testimonial-media img {
  transform: translateY(-3px) rotate(0deg) scale(0.99);
}
.testimonial-card--gold .testimonial-media img { width: 118%; height: 76%; }
.testimonial-card--blueberry .testimonial-media img { width: 86%; height: 84%; }
.testimonial-body {
  width: 100%;
  height: 264px;
  min-height: 0;
  padding: 18px 16px 16px;
}
.testimonial-meta,
.testimonial-card:nth-child(4) .testimonial-meta,
.testimonial-card:nth-child(5) .testimonial-meta,
.testimonial-body footer,
.testimonial-card:nth-child(4) .testimonial-body footer,
.testimonial-card:nth-child(5) .testimonial-body footer {
  align-items: flex-start;
  flex-direction: column;
}
.testimonial-tag { padding: 7px 9px; font-size: 0.58rem; line-height: 1.25; }
.testimonial-quote { margin: 14px 0 9px; font-size: 0.92rem; line-height: 1.42; }
.testimonial-rating { margin-bottom: 8px; font-size: 0.72rem; }
.testimonial-body footer { gap: 3px; padding-top: 10px; font-size: 0.68rem; }

@media (min-width: 640px) and (max-width: 899px) {
  .testimonial-track {
    grid-template-rows: repeat(2, 270px);
    grid-auto-columns: calc((100% - 8px) / 2);
  }
  .testimonial-card,
  .testimonial-card:nth-child(4),
  .testimonial-card:nth-child(5),
  .testimonial-media,
  .testimonial-body { height: 270px; }
}

@media (max-width: 639px) {
  .testimonial-track {
    grid-template-rows: repeat(2, 276px);
    grid-auto-columns: 100%;
    gap: 12px 8px;
    padding: 12px 48px 22px;
    scroll-padding-inline: 48px;
  }
  .testimonial-card,
  .testimonial-card:nth-child(4),
  .testimonial-card:nth-child(5),
  .testimonial-media,
  .testimonial-body { height: 276px; }
  .testimonial-card,
  .testimonial-card:nth-child(4),
  .testimonial-card:nth-child(5) { grid-template-columns: 34% minmax(0, 1fr); }
  .testimonial-media img { width: 108%; height: 86%; }
  .testimonial-body { padding: 17px 14px 15px; }
  .testimonial-meta { width: 100%; }
  .testimonial-tag {
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    min-height: 44px;
    display: grid;
    place-items: center;
    padding: 6px 10px;
    overflow: hidden;
    text-align: center;
    text-wrap: balance;
    font-size: 0.54rem;
    line-height: 1.22;
    letter-spacing: 0.02em;
  }
  .testimonial-quote { font-size: 0.88rem; }
}

/* Editorial 2 + 3 review mosaic. Every five reviews form one horizontal scene:
   two generous cards above and three compact cards below. */
.testimonial-page { display: contents; }

.testimonial-viewport::before,
.testimonial-viewport::after {
  width: 46px;
}
.testimonial-viewport::before {
  background: linear-gradient(90deg, #FFF5E9 0%, rgba(255, 245, 233, 0.62) 34%, rgba(255, 245, 233, 0));
}
.testimonial-viewport::after {
  background: linear-gradient(270deg, #FFF5E9 0%, rgba(255, 245, 233, 0.62) 34%, rgba(255, 245, 233, 0));
}

@media (min-width: 900px) {
  .testimonial-track {
    display: flex;
    align-items: stretch;
    gap: 18px;
    padding: 12px 72px 24px;
    scroll-padding-inline: 72px;
  }
  .testimonial-page {
    flex: 0 0 max(860px, calc(100% - 154px));
    height: 542px;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: repeat(2, 264px);
    gap: 14px;
    scroll-snap-align: start;
  }
  .testimonial-page > .testimonial-card,
  .testimonial-page > .testimonial-card:nth-child(4),
  .testimonial-page > .testimonial-card:nth-child(5) {
    grid-column: span 3;
    width: 100%;
    height: 264px;
    scroll-snap-align: none;
  }
  .testimonial-page > .testimonial-card:nth-child(n + 3) {
    grid-column: span 2;
  }
  .testimonial-page > .testimonial-card:nth-child(-n + 2) {
    grid-template-columns: 34% minmax(0, 1fr);
  }
}

@media (max-width: 899px) {
  .testimonial-track {
    padding-inline: 68px;
    scroll-padding-inline: 68px;
  }
}

/* ---------- Social (was the Instagram embed section) ---------- */
.social { padding: 96px 0; }

/* ---------- Where to buy ---------- */
.where { padding: 96px 0; background: var(--dark); }
/* Gap between cards doubles as a hairline divider — needs a light tint on dark instead
   of the dark tint it used against the old cream background. */
.where-grid { display: grid; grid-template-columns: 1fr; gap: 4px; background: var(--dark-line); }
@media (min-width: 640px) { .where-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .where-grid { grid-template-columns: repeat(4, 1fr); } }
/* The info row only ever holds 3 cards — it gets its own column count from the same
   breakpoint the partner row switches to 2 columns at, so it never lands on a 2 or
   4-column split that would leave an empty trailing cell. */
@media (min-width: 640px) { .where-grid--info { grid-template-columns: repeat(3, 1fr); } }
.where-card { background: var(--dark-soft); padding: 30px 24px; }
.where-card h3 { font-size: 1.15rem; color: var(--white); font-family: var(--font-display); font-weight: 400; }
.where-card p { font-size: 0.9rem; color: rgba(255, 255, 255, 0.6); margin-bottom: 0; }

/* Partner store cards double as buttons (they open the store-locations modal), so they
   need button reset on top of the plain .where-card look. */
.where-card--partner { border: none; text-align: left; cursor: pointer; width: 100%; font: inherit; transition: background 0.2s ease; }
.where-card--partner:hover { background: var(--dark); }
.where-card-logo { width: 72px; height: 72px; object-fit: contain; border-radius: var(--radius-sm); background: var(--white); padding: 8px; margin-bottom: 14px; }
/* First row (imanje / dostava / sezonska turneja) uses white-fill line icons instead of
   real partner logos — a white chip would make them invisible, so they sit on a
   blueberry circle instead, same footprint as .where-card-logo for row alignment. */
.where-card-icon { width: 72px; height: 72px; object-fit: contain; border-radius: 999px; background: var(--blueberry); padding: 16px; margin-bottom: 14px; }
/* Second row of the "Gdje kupiti" grid holds real dućan partners — a hair of breathing
   room separates it from the row of generic distribution cards above it. */
.where-grid--partners { margin-top: 4px; }

/* ---------- Store locations modal (opened from partner cards above) ---------- */
.store-modal { background: var(--dark-soft); color: rgba(255, 255, 255, 0.88); border-radius: var(--radius); max-width: 480px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow); position: relative; animation: modal-pop 0.25s var(--ease); padding: 32px; }
.store-modal-head { display: flex; align-items: center; gap: 14px; margin: 0 26px 18px 0; }
.store-modal-logo { width: 52px; height: 52px; object-fit: contain; border-radius: var(--radius-sm); background: var(--white); padding: 6px; flex-shrink: 0; }
.store-modal-head h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; color: var(--white); margin: 0; }
.store-modal-head p { font-size: 0.85rem; color: rgba(255, 255, 255, 0.6); margin: 2px 0 0; }
.store-modal-locations { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; background: var(--dark-line); border-radius: var(--radius-sm); overflow: hidden; }
/* Row is a flex line now: address button on the left (grows to fill), icon-only
   "directions" button anchored to the right — both share one row, one background. */
.store-location { display: flex; align-items: center; background: var(--dark); transition: background 0.2s ease; }
.store-location:hover { background: var(--dark-soft); }
.store-location.is-active { background: var(--dark-soft); }
.store-location-btn { flex: 1; min-width: 0; border: none; background: none; text-align: left; font: inherit; cursor: pointer; padding: 12px 16px; font-size: 0.88rem; color: rgba(255, 255, 255, 0.85); }
.store-location:hover .store-location-btn, .store-location.is-active .store-location-btn { color: var(--white); }
.store-location-btn strong { display: block; font-weight: 600; color: var(--white); margin-bottom: 2px; }
/* Same info a pin's popup shows (see marker.bindPopup) — only revealed once this row is
   picked, so the closed state stays as compact as it was before. */
.store-location-hours { display: none; margin-top: 4px; font-size: 0.78rem; color: rgba(255, 255, 255, 0.55); }
.store-location.is-active .store-location-hours { display: block; }
/* Only revealed once its address is picked — clicking a row narrows the map to that
   one branch (see focusSingleMarker), and this is the escape hatch to real Google Maps.
   Icon-only oval, big enough to tap without needing the label back. */
.store-location-external { display: none; align-items: center; justify-content: center; flex-shrink: 0; margin-right: 14px; padding: 10px 14px; font-size: 0.95rem; color: #A78BFA; text-decoration: none; background: rgba(167, 139, 250, 0.14); border-radius: 999px; transition: background 0.2s ease; }
.store-location.is-active .store-location-external { display: inline-flex; }
.store-location-external:hover { background: rgba(167, 139, 250, 0.24); }

/* Leaflet map preview — soft Positron basemap + a minimal round pin for a cleaner,
   Apple/Google Maps-like feel, with real scroll/pinch/button zoom (unlike the old
   iframe embed, this is a real interactive map). */
.store-modal-map { width: 100%; height: 260px; border-radius: var(--radius-sm); margin-bottom: 18px; background: var(--dark); overflow: hidden; }
.store-modal-map .leaflet-control-zoom { border: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); border-radius: 10px; }
.store-modal-map .leaflet-control-zoom a { width: 30px; height: 30px; line-height: 30px; color: var(--ink); background: #fff; border: none; }
.store-modal-map .leaflet-control-zoom a:first-child { border-radius: 10px 10px 0 0; }
.store-modal-map .leaflet-control-zoom a:last-child { border-radius: 0 0 10px 10px; border-top: 1px solid rgba(0, 0, 0, 0.08); }
.store-modal-map .leaflet-control-zoom a:hover { background: #f2f2f2; }
.store-modal-map .leaflet-control-attribution { background: rgba(21, 15, 34, 0.65); color: rgba(255, 255, 255, 0.55); font-size: 0.62rem; padding: 1px 6px; border-radius: 4px 0 0 0; }
.store-modal-map .leaflet-control-attribution a { color: rgba(255, 255, 255, 0.75); }
.store-map-pin { width: 30px; height: 30px; cursor: pointer; }
.store-map-pin img { width: 100%; height: 100%; display: block; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45)); }
.store-map-pin-label { font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; color: var(--ink); background: #fff; padding: 3px 8px; border-radius: 20px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); white-space: nowrap; }

/* "Locate me" control — same rounded, shadowed pill treatment as the zoom control. */
.store-modal-map .store-locate-control { border: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); border-radius: 10px; margin-top: 74px; }
.store-modal-map .store-locate-btn { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: #fff; color: var(--ink); border-radius: 10px; font-size: 1.05rem; text-decoration: none; }
.store-modal-map .store-locate-btn:hover { background: #f2f2f2; }
/* Classic "you are here" blue dot, with a soft halo so it reads at a glance next to the
   blueberry pins instead of blending in as just another marker. */
.store-user-pin { width: 18px; height: 18px; border-radius: 50%; background: #4285F4; border: 3px solid #fff; box-shadow: 0 0 0 4px rgba(66, 133, 244, 0.3), 0 1px 4px rgba(0, 0, 0, 0.4); }

/* Popup for a clicked pin: address, working hours, directions link — restyled from
   Leaflet's default white/black chrome to match the dark modal. */
.store-modal-map .leaflet-popup-content-wrapper { background: var(--dark-soft); color: rgba(255, 255, 255, 0.88); border-radius: var(--radius-sm); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35); }
.store-modal-map .leaflet-popup-tip { background: var(--dark-soft); }
.store-modal-map .leaflet-popup-content { margin: 12px 14px; font-family: var(--font-body); font-size: 0.85rem; line-height: 1.45; min-width: 160px; }
.store-modal-map .leaflet-popup-content strong { display: block; color: var(--white); font-weight: 600; margin-bottom: 2px; }
.store-modal-map .leaflet-popup-close-button { color: rgba(255, 255, 255, 0.6) !important; }
.store-modal-map .leaflet-popup-close-button:hover { color: var(--white) !important; }
.store-map-popup-hours { display: block; color: rgba(255, 255, 255, 0.55); font-size: 0.78rem; margin: 4px 0 8px; }
.store-map-popup-link { color: #A78BFA; font-weight: 600; text-decoration: none; }
.store-map-popup-link:hover { text-decoration: underline; }

/* ---------- Press ---------- */
.press { padding: 28px 0; }
.press-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; justify-content: center; text-align: center; }
.press-inner span { font-weight: 600; color: rgba(255, 255, 255, 0.55); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; }
.press-inner ul { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; }
.press-inner li { color: rgba(255, 255, 255, 0.55); font-weight: 500; font-size: 0.9rem; }
.press-inner li a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.2s ease, border-color 0.2s ease; }
.press-inner li a:hover, .press-inner li a:focus-visible { color: var(--white); border-color: rgba(255, 255, 255, 0.4); }

/* ---------- Contact ---------- */
.contact { padding: 96px 0 120px; }
.contact-inner { display: flex; flex-direction: column; gap: 44px; }
.contact h2 { color: var(--white); }
.contact-list { display: flex; flex-direction: column; gap: 14px; margin: 24px 0; }
.contact-list li { display: flex; align-items: center; gap: 10px; }
.contact-list a { text-decoration: none; font-weight: 500; border-bottom: 1px solid rgba(255,255,255,0.3); }
/* Plain --blueberry text fails AA directly on the dark section background (it's fine
   on light card surfaces, just not here) — same fix as the modal price. */
.contact-list a:hover { border-color: var(--blueberry); color: #A78BFA; }
.socials { display: flex; gap: 12px; }
.socials a { color: var(--white); display: flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 50%; background: var(--dark-soft); transition: background 0.2s ease, color 0.2s ease; }
.socials a:hover { background: var(--blueberry); color: var(--white); }

.contact-form { background: var(--dark-soft); border-radius: var(--radius); padding: 32px; box-shadow: var(--shadow); }
.form-row { margin-bottom: 18px; display: flex; flex-direction: column; }
.form-row label { font-weight: 600; font-size: 0.86rem; margin-bottom: 6px; color: rgba(255,255,255,0.85); }
.form-row input, .form-row select, .form-row textarea { font-family: inherit; font-size: 1rem; padding: 12px 14px; border: 1.5px solid var(--dark-line); border-radius: 10px; background: var(--dark); color: rgba(255,255,255,0.9); min-height: 48px; transition: border-color 0.2s ease; }
.form-row input::placeholder, .form-row textarea::placeholder { color: rgba(255,255,255,0.35); }
.form-row select { color-scheme: dark; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { border-color: var(--blueberry); }
.form-row textarea { min-height: 110px; resize: vertical; }
.form-row input:invalid[data-touched="true"], .form-row textarea:invalid[data-touched="true"] { border-color: var(--error); }
/* Base --error/--eco-green read fine as borders (3:1 is enough there) but are too dark
   for AA text contrast directly on the form's dark background — lightened here only. */
.field-error { color: #F08080; font-size: 0.82rem; min-height: 1.2em; margin-top: 4px; font-weight: 500; }
.form-status { text-align: center; font-weight: 600; margin: 14px 0 0; min-height: 1.2em; }
.form-status.success { color: #7BC98C; }

@media (min-width: 980px) {
  .contact-inner { flex-direction: row; gap: 64px; }
  .contact-info { flex: 1; }
  .contact-form { flex: 1.1; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--cream); color: var(--ink-soft); padding: 56px 0 28px; border-top: 1px solid rgba(70, 38, 127, 0.12); }
.footer-inner { display: flex; flex-direction: column; gap: 28px; padding-bottom: 28px; border-bottom: 1px solid rgba(70, 38, 127, 0.14); }
.footer-logos { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.footer-logo { width: 142px; height: 68px; }
.footer-logo .logo-img { width: 142px; max-height: 68px; object-fit: contain; }
.footer-logo--yaya .logo-img { width: 124px; opacity: 0.9; }
.footer-brand p { color: var(--ink-soft); margin: 10px 0 0; font-size: 0.9rem; }
.footer-tagline { display: block; margin-top: 2px; font-style: italic; }
.site-footer nav { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.footer-nav-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.site-footer nav a { text-decoration: none; font-size: 0.92rem; font-weight: 500; color: var(--ink-soft); white-space: nowrap; }
.site-footer nav a:hover { color: var(--blueberry-dark); }
.footer-copy { text-align: center; font-size: 0.78rem; color: rgba(36, 29, 47, 0.5); margin: 22px 0 0; padding: 0 20px; }
@media (min-width: 700px) {
  .footer-inner { flex-direction: row; justify-content: space-between; align-items: flex-end; }
  .site-footer nav { align-items: flex-end; text-align: right; }
  .footer-nav-row { justify-content: flex-end; }
}
@media (min-width: 980px) {
  .footer-nav-row { flex-wrap: nowrap; }
  .footer-nav-legal { flex-wrap: wrap; justify-content: flex-end; }
}

/* ---------- Legal / customer information pages ---------- */
.legal-page { padding: 148px 24px 104px; background: var(--cream); }
.payment-result-page { min-height: 70vh; }
.payment-result-note { color: var(--ink-soft); margin: 0 0 8px; }
.payment-result-error { color: #b42318; margin: 0 0 16px; }
.payment-result-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 28px; }
.payment-result-actions form { margin: 0; }
.payment-result-home { color: var(--blueberry-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.legal-wrap { max-width: 920px; }
.legal-intro { margin-bottom: 48px; }
.legal-intro .eyebrow { margin-bottom: 14px; color: var(--blueberry-dark); }
.legal-intro .eyebrow::before { background: var(--blueberry); }
.legal-intro h1 { color: var(--yaya-brown); font-size: clamp(2.5rem, 6vw, 4.5rem); }
.legal-intro p { max-width: 62ch; color: var(--ink-soft); font-size: 1.03rem; }
.legal-intro p strong { color: var(--yaya-brown); font-weight: 600; }

.thankyou-wrap { max-width: 640px; }
.thankyou-intro { margin-bottom: 28px; }
.thankyou-mark {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 0 18px;
  border-radius: 50%;
}
.thankyou-mark svg { width: 26px; height: 26px; }
.thankyou-mark--ok { background: rgba(71, 122, 80, 0.14); color: var(--eco-green); }
.thankyou-mark--pending { background: rgba(194, 138, 55, 0.16); color: var(--gold); }
.thankyou-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 20px;
  margin: 0 0 22px;
}
.thankyou-meta dt {
  margin: 0 0 4px;
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.thankyou-meta dd {
  margin: 0;
  color: var(--yaya-brown);
  font-weight: 600;
  font-size: 0.98rem;
  overflow-wrap: anywhere;
}
.thankyou-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
}
.thankyou-pill--ok { background: rgba(71, 122, 80, 0.14); color: var(--eco-green); }
.thankyou-pill--pending { background: rgba(194, 138, 55, 0.16); color: #8A5F18; }
.thankyou-receipt {
  padding: 28px 26px 24px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(70, 38, 127, 0.1);
  border-radius: var(--radius);
  box-shadow: 0 20px 44px -36px rgba(36, 29, 47, 0.45);
}
.thankyou-receipt h2 {
  color: var(--yaya-brown);
  font-size: 1.55rem;
  margin: 0 0 16px;
}
.thankyou-lines { display: grid; gap: 12px; }
.thankyou-lines li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.45;
}
.thankyou-lines li span { min-width: 0; }
.thankyou-lines li strong { flex: 0 0 auto; font-weight: 600; color: var(--yaya-brown); }
.thankyou-lines-ship { color: var(--ink-soft); padding-top: 4px; }
.thankyou-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(70, 38, 127, 0.12);
  color: var(--yaya-brown);
  font-size: 1.05rem;
}
.thankyou-total strong { font-size: 1.2rem; }
.thankyou-note {
  margin: 16px 0 0;
  color: var(--ink-soft);
  font-size: 0.86rem;
  line-height: 1.55;
}
.thankyou-pickup-note {
  padding: 12px 14px;
  background: #fff7e8;
  border: 1px solid rgba(196, 132, 22, 0.35);
  border-radius: 12px;
  color: #7a5410;
}
.thankyou-pickup-note a { color: #7a5410; font-weight: 700; }
/* Virman (HUB-3 QR) uplatnice na stranici zahvale */
.thankyou-bank {
  margin: 26px 0 0;
  padding: 24px;
  background: #fff;
  border: 1px solid rgba(70, 38, 127, 0.12);
  border-radius: 18px;
}
.thankyou-bank h2 { margin: 0 0 12px; font-size: 1.15rem; color: var(--yaya-brown); }
.thankyou-bank-note {
  margin: 0 0 18px;
  padding: 12px 14px;
  background: #fff7e8;
  border: 1px solid rgba(196, 132, 22, 0.35);
  border-radius: 12px;
  color: #7a5410;
  font-size: 0.92rem;
  line-height: 1.5;
}
.thankyou-bank-slip {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  padding: 18px 0;
  border-top: 1px solid rgba(70, 38, 127, 0.1);
}
.thankyou-bank-slip:first-of-type { border-top: 0; padding-top: 6px; }
.thankyou-bank-qr {
  flex: 0 0 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.bank-qr {
  width: 260px;
  max-width: 100%;
  min-height: 220px;
  background: #fff;
  padding: 8px;
  box-sizing: border-box;
}
.bank-qr img,
.bank-qr svg {
  width: 100%;
  height: auto;
  display: block;
  background: #fff;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.thankyou-bank-scan { font-size: 0.78rem; color: var(--ink-soft); text-align: center; }
.thankyou-bank-data { margin: 0; display: grid; gap: 8px; min-width: 0; }
.thankyou-bank-data div { display: grid; gap: 1px; }
.thankyou-bank-data dt { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); }
.thankyou-bank-data dd { margin: 0; font-size: 0.95rem; color: var(--ink); overflow-wrap: anywhere; }
.thankyou-bank-iban { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.02em; }
@media (max-width: 639px) {
  .thankyou-meta { grid-template-columns: 1fr; }
  .thankyou-receipt { padding: 22px 18px 20px; }
  .thankyou-bank { padding: 18px 16px; }
  .thankyou-bank-slip { flex-direction: column; align-items: center; }
  .thankyou-bank-data { width: 100%; }
}
.legal-tabs {
  display: inline-flex;
  gap: 6px;
  margin: 0 0 30px;
  padding: 5px;
  border: 1px solid rgba(70, 38, 127, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
}
.legal-tab {
  min-height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  font: 600 0.88rem/1 var(--font-body);
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.legal-tab:hover { color: var(--blueberry-dark); }
.legal-tab.is-active {
  background: var(--blueberry);
  color: var(--white);
  box-shadow: 0 10px 22px -16px rgba(70, 38, 127, 0.7);
}
.legal-tab:focus-visible { outline: 3px solid rgba(101, 66, 181, 0.25); outline-offset: 3px; }
.legal-tab-panel[hidden] { display: none; }
.legal-section {
  padding: 34px clamp(22px, 5vw, 48px);
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid rgba(70, 38, 127, 0.1);
  border-radius: var(--radius);
  box-shadow: 0 20px 44px -36px rgba(36, 29, 47, 0.45);
}
.legal-section + .legal-section { margin-top: 24px; }
.legal-section h2 { color: var(--yaya-brown); font-size: clamp(1.65rem, 3vw, 2.15rem); margin-bottom: 18px; }
.legal-section h3 { color: var(--yaya-brown); font-size: 1.2rem; margin: 30px 0 12px; text-transform: none; letter-spacing: 0; }
.legal-section p { color: var(--ink-soft); line-height: 1.8; }
.legal-section p + p { margin-top: 16px; }
.legal-section ul { margin: 16px 0 0; padding-left: 21px; color: var(--ink-soft); }
.legal-section li { line-height: 1.75; }
.legal-section li + li { margin-top: 7px; }
.legal-actions { margin-top: 22px; }
.legal-intro a { color: var(--blueberry-dark); text-underline-offset: 3px; }
.legal-intro a:hover { color: var(--blueberry); }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.legal-page .consumer-form {
  padding: 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
}
.legal-page .form-row label { color: var(--ink); }
.legal-page .form-row input,
.legal-page .form-row textarea {
  border-color: rgba(70, 38, 127, 0.18);
  background: #fff;
  color: var(--ink);
}
.legal-page .form-row input:invalid[data-touched="true"],
.legal-page .form-row textarea:invalid[data-touched="true"],
.legal-page .form-row input[aria-invalid="true"],
.legal-page .form-row textarea[aria-invalid="true"] { border-color: #b42318; }
.legal-page .field-error { color: #b42318; }
.legal-page .form-status { text-align: left; color: var(--ink-soft); }
.legal-page .form-status.success { color: var(--eco-green); }
.consumer-form-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 22px;
  margin-top: 8px;
}
.consumer-form-note { margin: 0; color: rgba(36, 29, 47, 0.48); font-size: 0.92rem; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }
.legal-contact {
  margin: 18px 0 26px;
  padding: 20px 22px;
  background: var(--cream);
  border-left: 3px solid var(--blueberry);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--ink-soft);
  font-style: normal;
  line-height: 1.75;
}
.legal-contact strong { color: var(--yaya-brown); }
.legal-section a { color: var(--blueberry-dark); text-underline-offset: 3px; overflow-wrap: anywhere; }
.legal-section a:hover { color: var(--blueberry); }
.legal-note { font-size: 0.9rem; padding: 16px 18px; border-radius: var(--radius-sm); background: rgba(101, 66, 181, 0.08); }
.legal-accordion { display: grid; gap: 14px; }
.legal-disclosure {
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid rgba(70, 38, 127, 0.1);
  border-radius: var(--radius);
  box-shadow: 0 18px 40px -36px rgba(36, 29, 47, 0.5);
  overflow: hidden;
}
.legal-disclosure summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 76px;
  padding: 20px clamp(20px, 4vw, 34px);
  color: var(--yaya-brown);
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.5vw, 1.72rem);
  line-height: 1.15;
  letter-spacing: 0.01em;
  cursor: pointer;
  list-style: none;
}
.legal-disclosure summary::-webkit-details-marker { display: none; }
.legal-disclosure summary::after {
  content: "+";
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  background: rgba(101, 66, 181, 0.1);
  color: var(--blueberry-dark);
  font-family: var(--font-body);
  font-size: 1.3rem;
  font-weight: 500;
  transition: transform 0.3s var(--ease), background 0.25s ease;
}
.legal-disclosure[open] summary::after { transform: rotate(45deg); background: rgba(101, 66, 181, 0.16); }
.legal-disclosure summary:hover::after { background: rgba(101, 66, 181, 0.16); }
.legal-disclosure summary:focus-visible { outline: 3px solid rgba(101, 66, 181, 0.25); outline-offset: -3px; }
.legal-disclosure-content {
  overflow: hidden;
  padding: 0 clamp(20px, 4vw, 34px) 28px;
  transform-origin: top center;
  will-change: height, opacity, transform;
}
.legal-disclosure-content p { color: var(--ink-soft); line-height: 1.8; }
.legal-disclosure-content p + p,
.legal-disclosure-content ul + p,
.legal-disclosure-content p + ul { margin-top: 15px; }
.legal-disclosure-content ul { margin: 0; padding-left: 21px; color: var(--ink-soft); }
.legal-disclosure-content li { line-height: 1.75; }
.legal-disclosure-content li + li { margin-top: 7px; }
.legal-disclosure-content a { color: var(--blueberry-dark); text-underline-offset: 3px; overflow-wrap: anywhere; }
.legal-updated { margin-top: 28px; color: rgba(36, 29, 47, 0.55); font-size: 0.82rem; }
@media (max-width: 639px) {
  .legal-page { padding: 116px 18px 80px; }
  .legal-intro { margin-bottom: 32px; }
  .legal-tabs { display: flex; width: 100%; }
  .legal-tab { flex: 1; min-width: 0; padding: 0 12px; }
  .legal-section { padding: 26px 20px; }
  .legal-disclosure summary { min-height: 68px; gap: 14px; }
}

/* ---------- Mobile sticky CTA ---------- */
/* The labelled "Nazovi" / "Košarica" bar is intentionally hidden. Ordering
   remains available through product controls and the compact floating cart. */
.mobile-cta-bar { display: none; }
@media (max-width: 899px) { body { padding-bottom: 0; } }

/* Mobile-only collection switcher. It appears once the product collection reaches
   the viewport and stays fixed below the site header through both product sections. */
.mobile-product-switcher { display: none; }
@media (max-width: 639px) {
  #proizvodi,
  #cokolada { scroll-margin-top: 110px; /* 94px mobile header + 16px anchor gap */ }

  .mobile-product-switcher {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 90;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    width: 100%;
    height: calc(48px + env(safe-area-inset-bottom, 0px));
    padding: 0 0 env(safe-area-inset-bottom, 0px);
    border: 0;
    border-top: 1px solid rgba(70, 38, 127, 0.08);
    border-bottom: 1px solid rgba(70, 38, 127, 0.12);
    border-radius: 0;
    background: rgba(242, 231, 217, 0.9);
    box-shadow: none;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s var(--ease), visibility 0.2s ease;
  }

  .mobile-product-switcher.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    animation: mobile-switcher-arrive 0.52s var(--ease) both;
  }

  .mobile-product-switcher-link {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 1 136px;
    min-width: 112px;
    max-width: 136px;
    height: 48px;
    padding: 0 16px;
    border-radius: 0;
    color: rgba(36, 29, 47, 0.56);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: color 0.2s ease, background-color 0.2s ease;
  }

  .mobile-product-switcher-link.is-active {
    background: transparent;
    color: var(--blueberry-dark);
    box-shadow: inset 0 -2px 0 var(--blueberry);
  }

  .mobile-product-switcher-link:focus-visible {
    outline: 2px solid var(--blueberry-dark);
    outline-offset: 2px;
  }

  body.has-mobile-product-switcher .cart-widget {
    bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  }
}

@keyframes mobile-switcher-arrive {
  0% { opacity: 0; transform: translateY(16px); }
  58% { opacity: 1; transform: translateY(-4px); }
  78% { transform: translateY(2px); }
  100% { opacity: 1; transform: translateY(0); }
}

@media (max-width: 639px) and (prefers-reduced-motion: reduce) {
  .mobile-product-switcher.is-visible { animation: none; }
}

/* ---------- Floating WhatsApp order button ---------- */
/* Only ever added to the DOM when LIVE_ORDER_CONFIG.enabled is true (see script.js). */
.wa-widget { position: fixed; right: 20px; bottom: 24px; z-index: 95; }
@media (max-width: 899px) { .wa-widget { bottom: 20px; } }

.wa-fab {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: none;
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background-color 0.25s ease, transform 0.25s var(--ease), box-shadow 0.25s ease;
}
.wa-fab:hover { background: #1EBE57; transform: translateY(-2px); box-shadow: var(--shadow); }
.wa-fab:focus-visible { outline: 3px solid rgba(37, 211, 102, 0.5); outline-offset: 3px; }

.wa-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 14px);
  width: min(320px, calc(100vw - 40px));
  background: var(--dark-soft);
  color: rgba(255, 255, 255, 0.88);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: 24px 22px;
}
.wa-panel-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  cursor: pointer;
  font-size: 0.85rem;
}
.wa-panel-close:hover { background: rgba(255, 255, 255, 0.2); }
.wa-panel h3 { font-size: 1.1rem; margin: 0 26px 8px 0; color: var(--white); }
.wa-panel p { font-size: 0.86rem; color: rgba(255, 255, 255, 0.7); margin-bottom: 14px; }
.wa-panel-updates { display: flex; flex-direction: column; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
.wa-panel-updates li { font-size: 0.82rem; color: rgba(255, 255, 255, 0.65); padding-left: 14px; position: relative; }
.wa-panel-updates li::before { content: "•"; position: absolute; left: 0; color: #25D366; }

/* ---------- Floating cart bubble ---------- */
/* Sits left of the WhatsApp button on desktop (58px fab + 14px gap from .wa-widget's
   right:20px). On mobile the WhatsApp button keeps the bottom-right corner, so this
   moves to the opposite edge instead of crowding it. */
.cart-panel-backdrop { display: none; }
.cart-panel-backdrop[hidden] { display: none; }
.cart-widget { position: fixed; right: 92px; bottom: 24px; z-index: 95; }
.cart-widget.is-panel-open { z-index: 220; }
.cart-widget[hidden] { display: none; }
@media (max-width: 899px) { .cart-widget { left: auto; right: 20px; bottom: 20px; } }
@media (max-width: 899px) {
  body.has-open-cart-panel {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
    overscroll-behavior: none;
  }
  .cart-panel-backdrop:not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: 210;
    display: block;
    background: rgba(21, 15, 34, 0.34);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    animation: cart-backdrop-arrive 0.28s ease both;
  }
  .product-detail-page .wa-widget,
  .product-detail-page .cart-widget { bottom: 20px; }
  .product-detail-page { padding-bottom: 0; }
}

.cart-fab {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  padding: 0;
  font: inherit;
  background: var(--blueberry);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background-color 0.25s ease, transform 0.25s var(--ease), box-shadow 0.25s ease;
}
.cart-fab:hover { background: var(--blueberry-dark); transform: translateY(-2px); box-shadow: var(--shadow); }
.cart-fab:focus-visible { outline: 3px solid rgba(79, 53, 168, 0.5); outline-offset: 3px; }
.cart-fab-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--error);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px var(--cream);
}
@keyframes cart-bounce {
  0% { transform: scale(1); box-shadow: var(--shadow-sm); }
  30% { transform: scale(1.25); box-shadow: 0 0 0 10px rgba(108, 75, 209, 0.28), var(--shadow-sm); }
  55% { transform: scale(0.92); box-shadow: 0 0 0 5px rgba(108, 75, 209, 0.16), var(--shadow-sm); }
  75% { transform: scale(1.08); box-shadow: 0 0 0 2px rgba(108, 75, 209, 0.08), var(--shadow-sm); }
  100% { transform: scale(1); box-shadow: var(--shadow-sm); }
}
.cart-fab.is-bouncing { animation: cart-bounce 0.5s var(--ease); }
@keyframes cart-fab-arrive {
  0% { opacity: 0; transform: translateY(18px) scale(0.68); }
  58% { opacity: 1; transform: translateY(-3px) scale(1.08); }
  78% { transform: translateY(1px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes cart-fab-leave {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  24% { transform: translateY(-3px) scale(1.07); }
  100% { opacity: 0; transform: translateY(18px) scale(0.68); }
}
.cart-fab.is-appearing { animation: cart-fab-arrive 0.46s var(--ease) both; }
.cart-fab.is-disappearing { pointer-events: none; animation: cart-fab-leave 0.34s var(--ease) both; }
@keyframes cart-action-confirm {
  0% { transform: scale(1); }
  38% { transform: scale(1.07); }
  64% { transform: scale(0.98); }
  100% { transform: scale(1); }
}
.cart-action-bounce { animation: cart-action-confirm 0.42s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .cart-fab.is-bouncing,
  .cart-fab.is-appearing,
  .cart-fab.is-disappearing,
  .cart-action-bounce { animation: none; }
}
@keyframes cart-backdrop-arrive {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Cart panel — same floating-card pattern as .wa-panel, opens upward from the fab. */
.cart-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 14px);
  width: min(420px, calc(100vw - 40px));
  max-height: min(70vh, 560px);
  overflow-y: auto;
  background: var(--dark-soft);
  color: rgba(255, 255, 255, 0.88);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: 24px 22px;
  transform-origin: right bottom;
}
.cart-panel:not([hidden]):not(.is-closing) { animation: cart-panel-arrive 0.34s var(--ease) both; }
.cart-panel.is-closing { pointer-events: none; animation: cart-panel-leave 0.32s var(--ease) both; }
@keyframes cart-panel-arrive {
  0% { opacity: 0; transform: translateY(18px) scale(0.94); }
  62% { opacity: 1; transform: translateY(-3px) scale(1.012); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes cart-panel-leave {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(18px) scale(0.94); }
}
@media (max-width: 899px) { .cart-panel { right: 0; left: auto; } }
.cart-panel[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .cart-panel:not([hidden]):not(.is-closing),
  .cart-panel.is-closing { animation: none; }
}
.cart-panel-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  cursor: pointer;
  font-size: 0.85rem;
}
.cart-panel-close:hover { background: rgba(255, 255, 255, 0.2); }
.cart-panel h3 { font-size: 1.1rem; margin: 0 26px 14px 0; color: var(--white); }

.cart-empty { font-size: 0.88rem; color: rgba(255, 255, 255, 0.6); }

.cart-brand + .cart-brand { margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.cart-brand-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
/* Dot instead of the brand's own logo mark — the white logo files read poorly this
   small against the panel's dark background, so a plain contrast-color dot (picked
   from colors already used elsewhere for each brand) stands in for it instead. */
.cart-brand-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.cart-brand-dot--leo { background: var(--blueberry); }
.cart-brand-dot--yaya { background: var(--gold); }
.cart-brand-head span { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); }
.cart-section-title { margin: 18px 0 10px; padding-bottom: 7px; border-bottom: 1px solid rgba(255,255,255,0.12); color: var(--white); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.cart-section-title:first-child { margin-top: 4px; }
.cart-section-title--preorder { color: #ffb4ad; border-bottom-color: rgba(255, 180, 173, 0.26); }
.cart-brand--preorder { background: rgba(180, 35, 24, 0.08); border-radius: 12px; padding: 10px; }

.cart-item { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.cart-item-img { width: 44px; height: 44px; border-radius: 10px; object-fit: contain; background: #fff; flex-shrink: 0; }
.cart-item-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
/* Wraps onto 2 lines instead of truncating with an ellipsis — the panel is wide enough
   now that most names fit on one anyway, but the longer ones stay fully readable. */
.cart-item-name { font-size: 0.88rem; font-weight: 600; color: var(--white); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.cart-item-price { display: flex; flex-wrap: wrap; gap: 1px 5px; font-size: 0.8rem; color: rgba(255, 255, 255, 0.6); }
.cart-money,
.checkout-summary-price { white-space: nowrap; font-variant-numeric: tabular-nums; }
.cart-item .qty-stepper { flex-shrink: 0; }

.cart-brand-subtotal { font-size: 0.8rem; color: rgba(255, 255, 255, 0.6); text-align: right; margin-top: 6px; }

.cart-delivery { font-size: 0.82rem; color: rgba(255, 255, 255, 0.65); margin: 18px 0 0; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.cart-note { font-size: 0.78rem; color: var(--gold-soft); margin: 8px 0 0; }
.cart-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 1.05rem; font-weight: 700; color: var(--white); margin: 10px 0 0; }
.cart-checkout-btn { width: 100%; margin-top: 16px; }

@media (max-width: 420px) {
  .cart-widget { right: 12px; }
  .cart-panel { width: calc(100vw - 24px); padding: 20px 14px; }
  .cart-brand--preorder { padding: 9px; }
  .cart-item {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 10px;
    row-gap: 7px;
  }
  .cart-item-img { grid-row: 1 / span 2; }
  .cart-item-info { grid-column: 2; }
  .cart-item .qty-stepper { grid-column: 2; justify-self: start; }
  .cart-section-title { letter-spacing: 0.025em; }
}

/* ---------- Modal (quick view) ---------- */
.modal-overlay { position: fixed; inset: 0; background: rgba(21, 15, 34, 0.55); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 200; }
#checkoutOverlay.modal-overlay {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.modal-overlay[hidden] { display: none; }
.modal { background: var(--dark-soft); color: rgba(255,255,255,0.88); border-radius: var(--radius); max-width: 440px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow); position: relative; animation: modal-pop 0.25s var(--ease); display: flex; flex-direction: column; }
@keyframes modal-pop { from { transform: scale(0.96) translateY(8px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }
@keyframes modal-swipe-close { from { transform: translateY(0); opacity: 1; } to { transform: translateY(72px); opacity: 0; } }
.modal.is-swipe-closing,
.store-modal.is-swipe-closing,
.checkout-modal.is-swipe-closing,
.story-lightbox figure.is-swipe-closing,
.cart-panel.is-swipe-closing,
.wa-panel.is-swipe-closing {
  animation: modal-swipe-close 0.2s ease forwards !important;
  pointer-events: none;
}
.modal-close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.9); border: none; font-size: 1.1rem; font-weight: 600; cursor: pointer; z-index: 2; box-shadow: var(--shadow-sm); }
.modal-close:hover { background: var(--white); }
.modal-nav { position: absolute; top: 160px; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,0.9); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; box-shadow: var(--shadow-sm); color: var(--ink); transition: background 0.2s ease, transform 0.2s ease; }
.modal-nav:hover { background: var(--white); transform: translateY(-50%) scale(1.08); }
.modal-nav--prev { left: 16px; }
.modal-nav--next { right: 16px; }
.modal-visual { order: 1; position: relative; height: 320px; flex-shrink: 0; background-color: var(--dark); border-radius: var(--radius) var(--radius) 0 0; }
.modal-body { order: 2; padding: 26px; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; }
.modal-content-main { flex: 0 1 auto; }
.modal-logo { display: block; width: 80px; height: auto; margin: 16px 0 14px; object-fit: contain; }
.modal-logo[hidden] { display: none; }

/* #modalTag now hosts the same .pc-topbar (status pill + secondary tag) the product/choco
   cards render, built by the shared buildStatusBadge/buildSecondaryTag functions in
   script.js — so colors and labels always match the homepage cards exactly. */
.modal-body h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; margin: 12px 0 10px; color: var(--white); }
.modal-body p#modalDesc {
  line-height: 1.55;
  max-height: 15.5em;
  margin-right: -8px;
  padding-right: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  white-space: pre-line;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.32) transparent;
}
.modal-body p#modalDesc.has-overflow:not(.is-at-end) {
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 3.1em), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 3.1em), transparent 100%);
}
.modal-variants {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 0;
}
.modal-variant-button {
  min-width: 116px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 15px;
}
.modal-variant-button strong { font-size: 0.78rem; font-weight: 700; }

/* Same buildTraitsRow markup the cards use — light-on-dark override mirrors the one
   already applied to .choco-card's traits, since the modal is dark like that card too. */
.modal-traits { display: none; margin: 0 0 16px; }
.modal-traits .pc-traits { justify-content: flex-start; margin: 0; }
.modal-traits .pc-trait, .modal-traits .pc-trait-icon { color: rgba(255, 255, 255, 0.65); }
.modal-traits .pc-trait-sep { color: rgba(255, 255, 255, 0.25); }

.modal-meta { font-size: 0.85rem; color: rgba(255,255,255,0.6); font-weight: 500; }
.modal-stock { font-size: 0.85rem; color: rgba(255,255,255,0.6); font-weight: 500; margin-top: 2px; }

/* Optional heading+body sections (currently only the eco-cert modal uses these, via
   data.sections) — same display-font heading treatment as .modal-body h3, just smaller
   since it's a sub-section rather than the modal's main title. */
.modal-extra { margin-top: 18px; }
.modal-extra h4 { font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; letter-spacing: 0.02em; text-transform: uppercase; margin: 0 0 6px; color: var(--gold-soft); }
.modal-extra p { font-size: 0.92rem; color: rgba(255, 255, 255, 0.75); margin: 0 0 16px; }
.modal-extra p:last-child { margin-bottom: 0; }

.modal-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: auto; flex: 0 0 auto; flex-wrap: wrap; }
/* Plain --blueberry only has ~2.8:1 contrast against the modal's new dark-soft
   background (fine on the light pastel cards, not here) — lightened for AA. */
.modal-foot .price { font-weight: 600; font-size: 1.1rem; color: #A78BFA; }
.modal-foot .price:empty { display: none; }

.modal-cta-area { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.modal-action-stack { display: flex; flex-direction: column; align-items: flex-end; }
.modal-details-link {
  display: inline-block;
  margin-top: 16px;
  color: var(--blueberry);
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-align: right;
  transition: color 0.2s ease;
}
.modal-details-link:hover { color: var(--yaya-brown); }

/* #modalCta / #modalAddCart / #modalQty (the stepper itself) are shown/hidden entirely
   via inline style.display in script.js, not the [hidden] attribute alone — an author
   display rule (below) would otherwise keep outranking the browser's default
   [hidden]{display:none} regardless of the attribute. */
.qty-stepper { display: inline-flex; align-items: center; gap: 2px; border: 1.5px solid rgba(255, 255, 255, 0.18); border-radius: 999px; padding: 4px; }
.qty-stepper-btn {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--white);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}
.qty-stepper-btn:hover { background: rgba(255, 255, 255, 0.12); }
.qty-stepper-value { min-width: 22px; text-align: center; font-weight: 600; color: var(--white); }

/* Small "+1"/"-1" that pops up and fades from whichever button triggered a cart change —
   appended to <body> with fixed positioning (see popDelta in script.js) so it survives
   the triggering button being hidden, moved, or rebuilt (the cart panel rebuilds its
   entire item list on every qty change) right after the click. */
.qty-pop {
  position: fixed;
  transform: translate(-50%, -100%);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--eco-green);
  pointer-events: none;
  z-index: 300;
  animation: qty-pop-float 0.7s ease forwards;
}
.qty-pop--minus { color: var(--error); }
.qty-pop--preorder {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #A44A2A;
  white-space: nowrap;
  box-shadow: none;
  text-shadow: 0 1px 10px rgba(255, 255, 255, 0.88);
}
.is-preorder .qty-stepper {
  border-color: rgba(164, 74, 42, 0.42);
  background: rgba(164, 74, 42, 0.08);
}
.is-preorder .qty-stepper-btn,
.is-preorder .qty-stepper-value { color: #82391F; }
@keyframes qty-pop-float {
  0% { opacity: 0; transform: translate(-50%, -100%) scale(0.85); }
  25% { opacity: 1; transform: translate(-50%, -130%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -172%) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .qty-pop { animation: none; opacity: 0; }
  .modal.is-swipe-closing,
  .store-modal.is-swipe-closing,
  .checkout-modal.is-swipe-closing,
  .story-lightbox figure.is-swipe-closing,
  .cart-panel.is-swipe-closing,
  .wa-panel.is-swipe-closing { animation: none !important; }
}

.modal-add-cart { display: inline-flex; align-items: center; gap: 8px; }

/* Mobile uses one continuous scroll surface for every quick-view modal. Long product
   descriptions must flow with the title, price and CTA instead of creating a second,
   nested scrollbar below the image. */
@media (max-width: 699px) {
  .modal-body p#modalDesc,
  .modal-body p#modalDesc.has-overflow:not(.is-at-end) {
    max-height: none;
    margin-right: 0;
    padding-right: 0;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

@media (min-width: 700px) {
  .modal { flex-direction: row; max-width: 900px; height: 600px; max-height: 86vh; }
  .modal-visual { aspect-ratio: 2 / 3; width: auto; height: 100%; flex-shrink: 0; border-radius: var(--radius) 0 0 var(--radius); margin: 0; }
  .modal-body { flex: 1 1 auto; min-width: 320px; padding: 44px 82px 44px 44px; justify-content: space-between; overflow-y: auto; }
  .modal-body h3 { font-size: 2rem; }
  .modal-body p#modalDesc { font-size: 1.05rem; max-height: 18.6em; }
  .modal-nav { top: 50%; }
  .modal-nav--prev { left: 16px; }
  .modal-nav--next { right: 16px; }
}

/* ---------- Checkout modal ("Naruči odmah") ---------- */
.checkout-modal {
  background: var(--dark-soft);
  color: rgba(255, 255, 255, 0.88);
  border-radius: var(--radius);
  max-width: 480px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow);
  position: relative;
  animation: modal-pop 0.25s var(--ease);
  padding: 32px;
}
/* Mobitel: checkout je obična stranica (document flow), ne overlay.
   Tipkovnica tada radi bez visualViewport / position:fixed hacks. */
@media (max-width: 699px) {
  html.checkout-open body > *:not(#checkoutOverlay):not(script) {
    display: none !important;
  }
  html.checkout-open,
  html.checkout-open body {
    overflow: visible;
    height: auto;
    position: static;
  }
  #checkoutOverlay.modal-overlay {
    position: static;
    inset: auto;
    display: block;
    min-height: 100vh;
    padding: 12px 12px 40px;
    background: var(--cream);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    z-index: auto;
  }
  #checkoutOverlay.modal-overlay[hidden] { display: none; }
  .checkout-modal {
    max-height: none;
    overflow: visible;
    width: 100%;
    max-width: none;
    box-shadow: none;
    animation: none;
    padding: 20px 8px 48px;
    border-radius: 0;
    border: 0;
  }
}
.checkout-body h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; margin: 0 26px 16px 0; color: var(--white); }

.checkout-summary { background: var(--dark); border-radius: var(--radius-sm); padding: 16px 18px; margin-bottom: 22px; }
.checkout-summary-item { display: flex; justify-content: space-between; gap: 12px; font-size: 0.85rem; color: rgba(255, 255, 255, 0.75); padding: 4px 0; }
.checkout-summary-brand { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); margin: 10px 0 2px; }
.checkout-summary-brand:first-child { margin-top: 0; }
.checkout-summary-subtotal { font-size: 0.78rem; color: rgba(255, 255, 255, 0.55); text-align: right; margin: 2px 0 4px; }
.checkout-summary-total { display: flex; justify-content: space-between; gap: 12px; font-size: 0.95rem; font-weight: 700; color: var(--white); margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.checkout-summary-delivery { font-size: 0.78rem; color: rgba(255, 255, 255, 0.55); margin-top: 6px; }
.checkout-summary-note { font-size: 0.74rem; line-height: 1.4; color: rgba(255, 255, 255, 0.45); margin: 8px 0 0; }
.checkout-summary-section-title { margin: 12px 0 6px; color: var(--white); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.checkout-summary-section-title:first-child { margin-top: 0; }
.checkout-summary-section-title--preorder { color: #ffb4ad; padding-top: 10px; border-top: 1px solid rgba(255, 180, 173, 0.24); }
.checkout-summary-item--preorder { color: rgba(255, 210, 206, 0.82); }
.checkout-summary-price { flex: 0 0 auto; text-align: right; }

@media (max-width: 420px) {
  .checkout-summary { padding: 14px; }
  .checkout-summary-item { align-items: flex-start; gap: 8px; }
  .checkout-summary-item > :first-child { min-width: 0; }
  .checkout-summary-total { align-items: flex-start; gap: 8px; }
}

/* Reuses .contact-form's own input/label/error styling — just strips the card chrome
   (background/padding/shadow) since .checkout-modal already provides that. */
.checkout-form.contact-form { padding: 0; background: none; box-shadow: none; border-radius: 0; }
.form-row--split { flex-direction: row; gap: 16px; }
.form-row--split > div { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.checkout-payment { background: var(--dark); border-radius: var(--radius-sm); padding: 14px 16px; margin: 4px 0 20px; border: 0; }
.checkout-payment span { font-size: 0.88rem; color: rgba(255, 255, 255, 0.8); }
.checkout-payment legend { display: block; float: none; width: auto; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: rgba(255, 255, 255, 0.6); margin-bottom: 6px; padding: 0; }
.checkout-payment p { font-size: 0.88rem; color: rgba(255, 255, 255, 0.8); margin: 0; }
.checkout-payment-option { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; cursor: pointer; }
.checkout-payment-option:last-child { margin-bottom: 0; }
.checkout-payment-option input[type="radio"] { margin: 0; flex-shrink: 0; width: 16px; height: 16px; min-height: 0; padding: 0; accent-color: var(--blueberry-dark); }
.checkout-payment-option input[type="radio"]:disabled + span { opacity: 0.5; }
.checkout-pickup-note {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff7e8;
  border: 1px solid rgba(196, 132, 22, 0.35);
  color: #7a5410;
  font-size: 0.86rem;
  line-height: 1.45;
}
.checkout-pickup-note a { color: #7a5410; font-weight: 700; }
.checkout-terms { margin: 0 0 16px; }
.checkout-terms label { display: flex; gap: 10px; align-items: flex-start; font-size: 0.88rem; line-height: 1.4; cursor: pointer; }
/* .form-row input postavlja min-height: 48px i padding — checkbox to mora resetirati,
   inače se rastegne i kvadratić "padne" ispod teksta privole. */
.checkout-terms input[type="checkbox"] { margin: 2px 0 0; flex-shrink: 0; width: 18px; height: 18px; min-height: 0; padding: 0; accent-color: var(--blueberry-dark); }
.checkout-terms a { color: inherit; text-decoration: underline; }

/* ---------- Product detail page (/proizvodi/<slug>.html) ---------- */
.breadcrumb { padding: 128px 20px 0; font-size: 0.82rem; color: rgba(255, 255, 255, 0.5); display: flex; flex-wrap: wrap; gap: 6px; }
.breadcrumb a { text-decoration: none; color: rgba(255, 255, 255, 0.7); }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb span[aria-current] { color: rgba(255, 255, 255, 0.85); }

.product-detail { padding: 40px 0 80px; }
/* No breadcrumb above it (see build-products.js) — needs its own clearance under the
   fixed header instead of relying on .breadcrumb's top padding. */
.product-detail--no-breadcrumb { padding-top: 128px; }
.product-detail-inner { display: flex; flex-direction: column; gap: 36px; }
@media (min-width: 800px) { .product-detail-inner { flex-direction: row; align-items: center; gap: 64px; } }
.product-detail-media { order: 1; }
.product-detail-info { order: 2; }

.product-detail-media { position: relative; flex-shrink: 0; width: 100%; max-width: 420px; margin: 0 auto; aspect-ratio: 1 / 1; border-radius: 28px; background: var(--card-color, var(--blueberry-soft)); box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; padding: 32px; perspective: 1000px; transform-style: preserve-3d; overflow: hidden; transform: translateY(var(--pressY, 0)) scale(var(--pressScale, 1)) rotateX(var(--tiltX, 0deg)) rotateY(var(--tiltY, 0deg)); transition: transform 0.22s var(--ease), box-shadow 0.22s ease; }
.product-detail-media.is-tilting { transition: box-shadow 0.35s ease; box-shadow: 0 18px 42px -20px rgba(36, 29, 47, 0.36); }
.product-detail-float { position: relative; z-index: 2; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; animation: idle-float 5s ease-in-out infinite; animation-play-state: paused; }
.product-detail-media.is-motion-active .product-detail-float { animation-play-state: running; }
.product-detail-media:hover .product-detail-float { animation-play-state: paused; }
.product-detail-media img { max-height: 100%; max-width: 100%; width: auto; object-fit: contain; transform: translate(var(--parX, 0), var(--parY, 0)) scale(1); transition: transform 0.35s var(--ease), filter 0.35s ease; filter: drop-shadow(0 18px 18px rgba(0, 0, 0, 0.18)); }
.product-detail-media:hover img { filter: drop-shadow(0 22px 22px rgba(0, 0, 0, 0.22)); }
@media (prefers-reduced-motion: reduce) {
  .product-detail-float { animation: none; }
  .product-detail-media,
  .product-detail-media img { transition: none; }
}

.product-detail-info { flex: 1; min-width: 0; }
.product-detail-info h1 { color: var(--white); font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 14px; }
.product-detail-price { font-family: var(--font-body); font-weight: 700; font-size: 1.3rem; color: #A78BFA; margin: 0 0 16px; }
.preorder-note { max-width: 640px; margin: 0 0 20px; padding: 14px 16px; border-radius: var(--radius-sm); background: #fff4e8; border: 1px solid rgba(155, 76, 34, 0.2); color: var(--ink); }
.preorder-note strong { display: block; color: #8a3f1d; margin-bottom: 4px; }
.preorder-note p { margin: 0; font-size: 0.9rem; line-height: 1.55; color: var(--ink-soft); }
.product-detail-desc { font-size: 1.02rem; color: rgba(255, 255, 255, 0.75); margin: 0 0 18px; white-space: pre-line; }
.product-detail-info .product-detail-traits {
  justify-content: flex-start;
  width: 100%;
  margin: 0 0 18px;
  text-align: left;
}
.product-detail-traits .pc-trait { font-size: 0.86rem; }
.product-detail-variants { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; color: var(--ink-soft); font-size: 0.9rem; }
.product-detail-variants strong { color: inherit; }
.product-variant-tab {
  display: inline-flex;
  align-items: center;
  min-width: 116px;
  min-height: 48px;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 15px;
}
.product-variant-tab strong { font-size: 0.78rem; font-weight: 700; }
.product-detail-info .pc-topbar { margin-bottom: 18px; }
.product-detail-info .product-card-qty { margin: 4px 0 18px; }
.product-detail-info .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
/* "Dodaj u košaricu" control (see js/product-page.js): starts as the add button, swaps
   to the live qty stepper once the item's in the cart — button/stepper visibility is
   toggled inline by the script, this just lays them out side by side. */
.pdp-cart-control { display: inline-flex; align-items: center; }
.pdp-cart-control .qty-stepper,
.modal-cta-area .qty-stepper {
  box-sizing: border-box;
  height: 48px;
  min-height: 48px;
  min-width: 134px;
  padding: 4px 6px;
  justify-content: space-between;
}
.pdp-cart-control .qty-stepper-btn,
.modal-cta-area .qty-stepper-btn {
  width: 36px;
  height: 36px;
}

.product-declaration { padding: 0 0 96px; }
.product-declaration .wrap { background: var(--dark-soft); border-radius: var(--radius); padding: 36px 28px; }
.product-declaration h2 { color: var(--white); font-size: 1.5rem; margin-bottom: 20px; }
.product-declaration h3 { color: var(--white); font-size: 1.1rem; margin: 28px 0 14px; text-transform: none; letter-spacing: 0; }
.declaration-list { display: grid; gap: 14px; margin: 0 0 4px; }
.declaration-list div { display: flex; flex-direction: column; gap: 2px; }
.declaration-list dt { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gold-soft); }
.declaration-list dd { margin: 0; font-size: 0.95rem; color: rgba(255, 255, 255, 0.85); }
.nutrition-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.nutrition-table th, .nutrition-table td { text-align: left; padding: 9px 6px; border-bottom: 1px solid var(--dark-line); color: rgba(255, 255, 255, 0.8); }
.nutrition-table th { font-weight: 600; color: rgba(255, 255, 255, 0.55); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; }
.nutrition-table td:last-child, .nutrition-table th:last-child { text-align: right; }
.product-declaration-foot { margin-top: 22px; font-size: 0.88rem; color: rgba(255, 255, 255, 0.6); }
.product-declaration-foot p { margin: 0 0 8px; }
.product-declaration-foot strong { color: rgba(255, 255, 255, 0.85); }
.declaration-pending { margin-top: 20px; padding: 18px 20px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 14px; background: rgba(255, 255, 255, 0.07); color: rgba(255, 255, 255, 0.76); }
.declaration-pending strong { display: block; margin-bottom: 6px; color: var(--white); font-size: 0.95rem; }
.declaration-pending p { margin: 0; font-size: 0.9rem; line-height: 1.65; }
.declaration-pending a { color: var(--gold-soft); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.declaration-pending a:hover { color: var(--white); }

/* ---------- Warm light theme ----------
   The site now lives on the requested oat-cream background. Deep plum remains as a
   deliberate contrast color for the chocolate collection, footer and floating panels. */
.site-header {
  isolation: isolate;
  background: transparent;
  border-bottom-color: transparent;
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: rgba(255, 245, 233, 0.8);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(70, 38, 127, 0.08);
  box-shadow: 0 8px 22px -20px rgba(36, 29, 47, 0.18);
  opacity: 0;
  transition: opacity 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}
.site-header .header-inner { position: relative; z-index: 1; }
.site-header.is-revealed,
.site-header:focus-within {
  background: transparent;
  border-bottom-color: transparent;
}
.site-header.is-revealed::before,
.site-header:focus-within::before { opacity: 1; }
.site-header.is-scrolled {
  border-bottom-color: rgba(70, 38, 127, 0.08);
  box-shadow: none;
}
.site-header.is-scrolled::before {
  background: rgba(255, 245, 233, 0.86);
  box-shadow: 0 8px 22px -20px rgba(36, 29, 47, 0.18);
  opacity: 1;
}
.main-nav a { color: rgba(36, 29, 47, 0.78); }
.main-nav a:hover,
.main-nav a.is-active,
.main-nav a.nav-choco { color: var(--blueberry-dark); }
.menu-toggle span { background: var(--ink); }

@media (max-width: 899px) {
  .main-nav {
    inset: 94px 0 0;
    background: var(--cream);
  }
  .main-nav a { border-bottom-color: rgba(70, 38, 127, 0.12); }
}

.hero-circle,
.products,
.where { background: var(--cream); }
.hero-circle { color: var(--ink); }
.hero-circle-copy .eyebrow,
.eyebrow { color: var(--blueberry-dark); }
.hero-circle-copy .eyebrow::before,
.eyebrow::before { background: var(--blueberry); }
.hero-circle-copy h1,
.hero-circle-copy--reveal h2,
.section-head h2,
.story h2,
.contact h2 { color: var(--yaya-brown); text-shadow: none; }
.hero-circle-copy .lede,
.section-lede { color: var(--ink-soft); }
.hero-scroll-hint { color: rgba(36, 29, 47, 0.5); }
.btn-outline { color: var(--blueberry-dark); border-color: rgba(70, 38, 127, 0.38); }
.btn-outline:hover { background: rgba(101, 66, 181, 0.09); }

.marquee {
  background: var(--yaya-brown);
  border-color: rgba(255, 255, 255, 0.12);
}
.marquee-track span { color: rgba(255, 245, 233, 0.92); }
.marquee-track span::after { color: var(--blueberry-soft); }

blockquote {
  background: rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 0 0 1px rgba(70, 38, 127, 0.06);
}
blockquote cite,
.story-stats strong { color: var(--blueberry-dark); }
.story-stats div { border-top-color: rgba(70, 38, 127, 0.15); }
.story-stats span { color: var(--ink-soft); }

.product-card-box {
  box-shadow: 0 18px 42px -26px rgba(36, 29, 47, 0.38);
}

/* Yaya collection uses the same warm canvas, with clean white cards. */
.chocolate { background: var(--cream); color: var(--ink); }
.chocolate .eyebrow { color: var(--blueberry-dark); }
.chocolate .eyebrow::before { background: var(--blueberry); }
.chocolate .section-head h2 { color: var(--yaya-brown); }
.chocolate .section-lede,
.choco-cta p { color: var(--ink-soft); }
.chocolate .btn-gold { color: var(--white); }
.choco-card-box {
  background: #FFFFFF;
  box-shadow: 0 18px 42px -26px rgba(36, 29, 47, 0.38);
}
.product-card .pc-status,
.product-card .pc-tag,
.choco-card .pc-status,
.choco-card .pc-tag {
  min-height: 28px;
  box-sizing: border-box;
  justify-content: center;
  padding: 6px 12px;
  background: #FFF5E9;
  border: none;
  box-shadow: none;
  font-size: 0.7rem;
  line-height: 1;
}
.product-card .pc-tag,
.choco-card .pc-tag { color: var(--yaya-brown); }

/* One exact pill treatment for every product modal and product detail page. */
#modalTag .pc-status,
#modalTag .pc-tag,
.product-detail-info .pc-status,
.product-detail-info .pc-tag {
  min-height: 32px;
  box-sizing: border-box;
  justify-content: center;
  padding: 7px 14px;
  background: #FFFFFF;
  border: none;
  box-shadow: none;
  font-size: 0.72rem;
  line-height: 1;
}
#modalTag .pc-tag,
.product-detail-info .pc-tag { color: var(--yaya-brown); }
.product-card-name,
.choco-card-name { color: var(--yaya-brown); }
.choco-card-price { color: var(--blueberry-dark); }
.choco-card .pc-trait,
.choco-card .pc-trait-icon,
.choco-card .pc-unavailable-text { color: var(--ink-soft); }
.choco-card .pc-trait-sep { color: rgba(36, 29, 47, 0.25); }
.choco-card .pc-divider { background: rgba(70, 38, 127, 0.12); }
.choco-card .pc-notify-btn {
  color: var(--ink);
  border-color: rgba(70, 38, 127, 0.22);
}
.choco-card .pc-notify-btn:hover {
  background: rgba(70, 38, 127, 0.07);
  border-color: rgba(70, 38, 127, 0.35);
}
.choco-card-actions .btn-small--ghost {
  color: var(--ink);
  border-color: rgba(70, 38, 127, 0.24);
}
.choco-card-actions .btn-small--ghost:hover { background: rgba(70, 38, 127, 0.07); }
.choco-card-actions .qty-stepper { border-color: rgba(70, 38, 127, 0.2); }
.choco-card-actions .qty-stepper-btn,
.choco-card-actions .qty-stepper-value { color: var(--ink); }
.choco-card-actions .qty-stepper-btn:hover { background: rgba(70, 38, 127, 0.08); }
.card-cart-control.is-preorder .qty-stepper,
.modal-cta-area.is-preorder .qty-stepper,
.pdp-cart-control.is-preorder .qty-stepper {
  border-color: rgba(164, 74, 42, 0.42);
  background: rgba(164, 74, 42, 0.08);
}
.card-cart-control.is-preorder .qty-stepper-btn,
.card-cart-control.is-preorder .qty-stepper-value,
.modal-cta-area.is-preorder .qty-stepper-btn,
.modal-cta-area.is-preorder .qty-stepper-value,
.pdp-cart-control.is-preorder .qty-stepper-btn,
.pdp-cart-control.is-preorder .qty-stepper-value { color: #82391F; }

/* These selectors intentionally sit after the light product-card overrides so the
   preorder action stays text-only on cards, quick-view modals and product pages. */
.card-cart-control > .btn.btn-preorder,
.modal-cta-area .btn.btn-preorder,
.pdp-cart-control > .btn.btn-preorder,
.card-cart-control > .btn.btn-preorder:hover,
.card-cart-control > .btn.btn-preorder:focus-visible,
.modal-cta-area .btn.btn-preorder:hover,
.modal-cta-area .btn.btn-preorder:focus-visible,
.pdp-cart-control > .btn.btn-preorder:hover,
.pdp-cart-control > .btn.btn-preorder:focus-visible {
  width: auto;
  min-width: 0;
  height: 44px;
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #A44A2A;
  box-shadow: none;
  transform: none;
}
.card-cart-control > .btn.btn-preorder:hover,
.card-cart-control > .btn.btn-preorder:focus-visible,
.modal-cta-area .btn.btn-preorder:hover,
.modal-cta-area .btn.btn-preorder:focus-visible,
.pdp-cart-control > .btn.btn-preorder:hover,
.pdp-cart-control > .btn.btn-preorder:focus-visible { color: #82391F; }
.card-cart-control > .btn.btn-preorder svg,
.modal-cta-area .btn.btn-preorder svg,
.pdp-cart-control > .btn.btn-preorder svg { display: none; }

/* Mobile product cards normally collapse their CTA to a cart icon. Preorders have no
   icon by design, so keep their text label visible and centred in the same touch area. */
@media (max-width: 639px) {
  .product-card .card-cart-control > .btn.btn-preorder,
  .choco-card .card-cart-control > .btn.btn-preorder {
    display: inline-flex;
    width: 112px;
    min-width: 112px;
    height: 48px;
    min-height: 48px;
    padding: 0 4px;
    font-size: 0.8rem;
    line-height: 1.1;
    white-space: normal;
  }
  .product-card .btn.btn-preorder .card-action-label,
  .choco-card .btn.btn-preorder .card-action-label { display: inline; }
}

.where-grid {
  gap: 12px;
  background: transparent;
}
.where-card {
  --where-rgb: 91, 63, 166;
  --where-surface: #EEE9FA;
  --where-hover: #E7DFF8;
  position: relative;
  background: var(--where-surface);
  border-radius: var(--radius-sm);
  box-shadow: none;
  transition: background 0.25s ease, transform 0.25s var(--ease), box-shadow 0.25s ease;
}
.where-grid--info .where-card:nth-child(1) { --where-rgb: 91, 63, 166; --where-surface: #EEE9FA; --where-hover: #E7DFF8; }
.where-grid--info .where-card:nth-child(2) { --where-rgb: 210, 57, 60; --where-surface: #FBE9EA; --where-hover: #F8DFE1; }
.where-grid--info .where-card:nth-child(3) { --where-rgb: 157, 174, 24; --where-surface: #F2F3DB; --where-hover: #EBEECF; }
.where-grid--partners .where-card {
  --where-rgb: 91, 63, 166;
  --where-surface: #FFFFFF;
  --where-hover: #FFF9F1;
}
.where-grid--partners .where-card:nth-child(1) { --where-surface: #F3E7DE; --where-hover: #EDDED2; }
.where-grid--partners .where-card:nth-child(2) { --where-surface: #FBE9EA; --where-hover: #F8DFE1; }
.where-grid--partners .where-card:nth-child(3) { --where-surface: #EEE9FA; --where-hover: #E7DFF8; }
.where-grid--partners .where-card:nth-child(4) { --where-surface: #F2F3DB; --where-hover: #EBEECF; }
.where-card h3 { color: var(--yaya-brown); }
.where-card p { color: var(--ink-soft); }
.where-card--partner:hover {
  background: var(--where-hover);
  transform: translateY(-3px);
  box-shadow: 0 18px 32px -28px rgba(36, 29, 47, 0.5);
}
.where-card-icon { background: rgb(var(--where-rgb)); }
.where-card-logo { background: #FFFFFF; box-shadow: none; }
.where-grid--partners { margin-top: 12px; }

@media (max-width: 639px) {
  .where-grid--partners {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 8px;
  }

  .where-grid--partners .where-card {
    min-width: 0;
    height: 100%;
    padding: 16px 12px 18px;
    border-radius: 18px;
  }

  .where-grid--partners .where-card-logo {
    width: 64px;
    height: 64px;
    margin-bottom: 12px;
  }

  .where-grid--partners .where-card h3 {
    font-size: 1.05rem;
    line-height: 1.08;
  }

  .where-grid--partners .where-card p {
    font-size: 0.8rem;
    line-height: 1.4;
  }
}

.press-inner span,
.press-inner li { color: var(--ink-soft); }
.press-inner li a:hover,
.press-inner li a:focus-visible { color: var(--blueberry-dark); border-color: var(--blueberry); }
.contact-list a { border-bottom-color: rgba(70, 38, 127, 0.25); }
.socials a { color: var(--white); background: var(--blueberry); }
.socials a:hover { background: var(--blueberry-dark); }

.contact .contact-form {
  background: rgba(255, 255, 255, 0.58);
  box-shadow: 0 24px 48px -30px rgba(36, 29, 47, 0.38);
}
.contact .form-row label { color: var(--ink); }
.contact .form-row input,
.contact .form-row select,
.contact .form-row textarea {
  border-color: rgba(70, 38, 127, 0.18);
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
}
.contact .form-row input::placeholder,
.contact .form-row textarea::placeholder { color: rgba(36, 29, 47, 0.42); }
.contact .form-row select { color-scheme: light; }
.form-status.success { color: var(--eco-green); }

.mobile-cta-bar {
  background: rgba(255, 245, 233, 0.95);
  border-top-color: rgba(70, 38, 127, 0.14);
}

/* Product detail pages share the same light canvas and readable plum typography. */
.breadcrumb { color: rgba(36, 29, 47, 0.52); }
.breadcrumb a { color: rgba(36, 29, 47, 0.72); }
.breadcrumb span[aria-current] { color: var(--ink); }
.product-detail-info h1 { color: var(--yaya-brown); }
.product-detail-price { color: var(--blueberry-dark); }
.product-detail-desc { color: var(--ink-soft); }
.product-detail-info .qty-pill { color: var(--ink); border-color: rgba(70, 38, 127, 0.2); }
.product-detail-info .qty-pill.is-active { color: var(--white); }
.product-detail-info .qty-stepper { border-color: rgba(70, 38, 127, 0.22); }
.product-detail-info .qty-stepper-btn,
.product-detail-info .qty-stepper-value { color: var(--ink); }
.product-detail-info .qty-stepper-btn:hover { background: rgba(70, 38, 127, 0.08); }
.product-declaration .wrap { background: rgba(255, 255, 255, 0.58); }
.product-declaration h2,
.product-declaration h3 { color: var(--yaya-brown); }
.declaration-list dt { color: var(--blueberry-dark); }
.declaration-list dd,
.nutrition-table th,
.nutrition-table td,
.product-declaration-foot,
.product-declaration-foot strong { color: var(--ink-soft); }
.nutrition-table th,
.nutrition-table td { border-bottom-color: rgba(70, 38, 127, 0.12); }
.product-declaration-foot strong { color: var(--ink); }
.yaya-product-page .declaration-pending { border-color: rgba(70, 38, 127, 0.14); background: rgba(255, 255, 255, 0.48); color: var(--ink-soft); }
.yaya-product-page .declaration-pending strong { color: var(--yaya-brown); }
.yaya-product-page .declaration-pending a { color: var(--blueberry-dark); }
.yaya-product-page .declaration-pending a:hover { color: var(--yaya-brown); }

/* All dialogs follow the warm light theme used by the rest of the site. */
.modal,
.store-modal,
.checkout-modal {
  background: var(--cream);
  color: var(--ink);
  border: 1px solid rgba(70, 38, 127, 0.12);
}
.modal-close {
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
}

/* Product and certificate modal. */
.modal-visual { background-color: var(--cream-soft); }
.modal-body h3 { color: var(--yaya-brown); }
.modal-body p,
.modal-meta,
.modal-stock { color: var(--ink-soft); }
.modal-traits .pc-trait,
.modal-traits .pc-trait-icon { color: var(--ink-soft); }
.modal-traits .pc-trait-sep { color: rgba(36, 29, 47, 0.25); }
.modal-extra h4 { color: var(--blueberry-dark); }
.modal-extra p { color: var(--ink-soft); }
.modal-foot .price { color: var(--blueberry-dark); }
.modal .qty-stepper { border-color: rgba(70, 38, 127, 0.22); }
.modal .qty-stepper-btn,
.modal .qty-stepper-value { color: var(--ink); }
.modal .qty-stepper-btn:hover { background: rgba(70, 38, 127, 0.08); }

/* Store locations modal and its map popup. */
.store-modal-head h3 { color: var(--yaya-brown); }
.store-modal-head p { color: var(--ink-soft); }
.store-modal-locations { background: rgba(70, 38, 127, 0.12); }
.store-location { background: rgba(255, 255, 255, 0.72); }
.store-location:hover,
.store-location.is-active { background: var(--cream-soft); }
.store-location-btn,
.store-location:hover .store-location-btn,
.store-location.is-active .store-location-btn,
.store-location-btn strong { color: var(--ink); }
.store-location-hours { color: var(--ink-soft); }
.store-location-external { color: var(--blueberry-dark); background: rgba(101, 66, 181, 0.1); }
.store-location-external:hover { background: rgba(101, 66, 181, 0.18); }
.store-modal-map { background: var(--cream-soft); }
.store-modal-map .leaflet-popup-content-wrapper,
.store-modal-map .leaflet-popup-tip { background: var(--cream); }
.store-modal-map .leaflet-popup-content-wrapper { color: var(--ink); }
.store-modal-map .leaflet-popup-content strong { color: var(--ink); }
.store-modal-map .leaflet-popup-close-button { color: rgba(36, 29, 47, 0.55) !important; }
.store-modal-map .leaflet-popup-close-button:hover { color: var(--ink) !important; }
.store-map-popup-hours { color: var(--ink-soft); }
.store-map-popup-link { color: var(--blueberry-dark); }

/* Checkout modal, including summary cards and form controls. */
.checkout-body h3 { color: var(--yaya-brown); }
.checkout-summary,
.checkout-payment { background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(70, 38, 127, 0.1); }
.checkout-summary-item,
.checkout-summary-subtotal,
.checkout-summary-delivery,
.checkout-summary-note,
.checkout-payment span,
.checkout-payment p { color: var(--ink-soft); }
.checkout-payment legend { color: var(--ink-soft); opacity: 0.75; }
.checkout-summary-brand,
.checkout-payment span { color: var(--blueberry-dark); }
.checkout-summary-section-title { color: var(--blueberry-dark); }
.checkout-summary-section-title--preorder { color: #b42318; border-top-color: rgba(180, 35, 24, 0.2); }
.checkout-summary-item--preorder { color: #8f342d; }
.checkout-summary-total { color: var(--ink); border-top-color: rgba(70, 38, 127, 0.14); }
.checkout-modal .form-row label { color: var(--ink); }
.checkout-modal .form-row input,
.checkout-modal .form-row select,
.checkout-modal .form-row textarea {
  border-color: rgba(70, 38, 127, 0.18);
  background: rgba(255, 255, 255, 0.78);
  color: var(--ink);
}
.checkout-modal .form-row input::placeholder,
.checkout-modal .form-row textarea::placeholder { color: rgba(36, 29, 47, 0.42); }
.checkout-terms label { color: var(--ink); }
.checkout-terms a { color: var(--blueberry-dark); }
.checkout-modal .form-row select { color-scheme: light; }
.checkout-modal .field-error { color: #A43232; }

/* Contact links on inner pages open this dialog without leaving the current page. */
.modal.contact-modal {
  display: block;
  width: min(100%, 620px);
  height: auto;
  max-width: 620px;
  max-height: min(90vh, 780px);
}
.contact-modal-body { padding: 38px 42px 40px; }
.contact-modal-body .eyebrow { margin: 0 0 8px; color: var(--blueberry-dark); }
.contact-modal-body h2 {
  margin: 0;
  padding-right: 44px;
  color: var(--yaya-brown);
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 2.8rem);
  font-weight: 400;
  line-height: 1;
}
.contact-modal-intro { margin: 14px 0 24px; color: var(--ink-soft); line-height: 1.6; }
.contact-modal-form.contact-form {
  padding: 24px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(70, 38, 127, 0.1);
  box-shadow: 0 24px 48px -32px rgba(36, 29, 47, 0.38);
}
.contact-modal .form-row { margin-bottom: 14px; }
.contact-modal .form-row label { color: var(--ink); }
.contact-modal .form-row input,
.contact-modal .form-row select,
.contact-modal .form-row textarea {
  border-color: rgba(70, 38, 127, 0.18);
  background: rgba(255, 255, 255, 0.82);
  color: var(--ink);
}
.contact-modal .form-row input::placeholder,
.contact-modal .form-row textarea::placeholder { color: rgba(36, 29, 47, 0.42); }
.contact-modal .form-row select { color-scheme: light; }
.contact-modal .field-error { color: #A43232; }

@media (max-width: 560px) {
  .contact-modal-overlay { padding: 12px; }
  .contact-modal-body { padding: 30px 18px 22px; }
  .contact-modal-form.contact-form { padding: 18px; }
}

/* Mobile and tablet content is portrait-only. Screen Orientation locking is not
   consistently available in regular browser tabs, so landscape receives a dedicated
   blocking view instead of rendering the site sideways. */
@media (orientation: landscape) and (hover: none) and (pointer: coarse) {
  html,
  body {
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
    background: var(--cream);
  }

  body > * { display: none !important; }

  body::before,
  body::after {
    position: fixed;
    left: 50%;
    z-index: 10000;
    display: block;
    width: min(84vw, 480px);
    transform: translateX(-50%);
    color: var(--yaya-brown);
    text-align: center;
  }

  body::before {
    content: "↻";
    top: calc(50% - 82px);
    font-family: var(--font-body);
    font-size: 3.6rem;
    font-weight: 500;
    line-height: 1;
    color: var(--blueberry);
  }

  body::after {
    content: "Okrenite uređaj u uspravni položaj\A Stranica je dostupna samo u portrait prikazu.";
    top: 50%;
    white-space: pre-line;
    font-family: var(--font-body);
    font-size: clamp(0.92rem, 2.6vw, 1.08rem);
    font-weight: 600;
    line-height: 1.6;
  }
}

/* Cjenik (objava + sidrene cijene) */
.cjenik-page .cjenik-firm { margin: 0 0 40px; padding-bottom: 28px; border-bottom: 1px solid rgba(66, 41, 24, 0.12); }
.cjenik-page .cjenik-firm:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.cjenik-page .cjenik-firm > h2 { margin: 0 0 12px; font-size: 1.5rem; }
.cjenik-page .cjenik-downloads { margin: 0 0 20px; }
.cjenik-download-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.cjenik-meta-note { font-size: 0.9rem; color: var(--ink-soft); margin: 8px 0 0; }
.cjenik-archive { margin: 0; }
.cjenik-archive h3 { margin: 0 0 8px; font-size: 1.15rem; }
.cjenik-archive-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  border-top: 1px solid rgba(66, 41, 24, 0.12);
}
.cjenik-archive-list li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(66, 41, 24, 0.1);
}
.cjenik-archive-list a {
  color: var(--blueberry-dark);
  font-weight: 600;
  word-break: break-all;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cjenik-archive-list .cjenik-archive-meta {
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.cjenik-archive-list li.is-current a { color: var(--blueberry); }