@charset "UTF-8";

/* ═══════════════════════════════════════════════════════════════════════════
   LÁKRIS — javni dio
   ───────────────────────────────────────────────────────────────────────────
   Smjer: urednički modni magazin, ne katalog. Fotografija i prazan prostor
   nose hijerarhiju; obrub i sjena su iznimka, ne pravilo.

   Tri odluke koje objašnjavaju ostatak datoteke:

   1. RAZMAK SLOVA JE POTPIS. Tekstualni znak LÁKRIS ima vrlo širok razmak
      među verzalima. Taj razmak se ponavlja u nadnaslovima, navigaciji,
      gumbima i oznakama (`--track-wide`), pa se stranica veže uz znak i bez
      logotipa u kadru.

   2. PALETA JE KLIJENTIČINA, NE POGOĐENA. Coconut Milk (#F1EEE6) i Shaved
      Chocolate (#553C36) su službene boje brenda; sve neutrale između njih su
      izvedene iz ta dva tona. `--c-mist` je uzorkovan sa zida s kampanjske
      fotografije i koristi se štedljivo — jedna sekcija i sitni detalji — da
      stranica ne padne u „sve smeđe”.

   3. RADIJUS JE NULA. Zaobljene kartice i tabletasti gumbi su ono što modnu
      stranicu odmah spusti na razinu predloška. Hijerarhiju rade format,
      razmak i tipografija.

   Boje dolaze iz administracije kroz <style> blok u zaglavlju; ovdje su samo
   zamjenske vrijednosti da stranica izgleda ispravno i prije nego se baza
   pročita.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────── 1. tokeni */

:root {
  /* boje — prepisuje ih admin.
     Dvije su službene: Coconut Milk (Pantone 11-0608 TCX, #F1EEE6) kao glavna
     topla neutrala i Shaved Chocolate (Pantone 19-1215 TCX, #553C36) kao
     tipografija i nosivi element sučelja. Sve ostalo je IZVEDENO iz njih ili
     je boja artikla — nijedna nije dodana radi ukrasa. */
  --c-cream:       #F1EEE6;   /* Coconut Milk — službena */
  --c-shell:       #F8F6F1;   /* izvedena: svjetlija ploha za izmjenične sekcije */
  --c-surface:     #FFFFFF;
  --c-ink:         #553C36;   /* Shaved Chocolate — službena, sav tekst */
  --c-ink-soft:    #7A605A;   /* izvedena: sporedni tekst, 4,96:1 na Coconut Milku */
  --c-brand:       #3B2925;   /* izvedena: tamnija, za dodir i pritisak kontrola */
  --c-merlot:      #5E2434;   /* boja artikla — Deep Merlot */
  --c-taupe:       #B7A18E;   /* boja artikla — Silk Taupe */
  --c-ivory:       #E7DCCB;   /* paleta stranice, NIJE boja artikla */
  --c-bison:       #9A7659;   /* paleta stranice, NIJE boja artikla */
  --c-mist:        #C4D4D5;   /* uzorkovano sa zida s kampanjske fotografije */
  --c-line:        #E3DACB;   /* izvedena: granice */
  --c-line-strong: #8B7A6E;   /* izvedena: granice kontrola */

  /* stanja */
  --c-ok:     #3E6B4F;
  --c-warn:   #8A5A1E;
  --c-danger: #8C2F2F;
  --c-info:   #3D5A63;

  /* pisma */
  --f-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --f-sans:    'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* razmak slova — potpis stranice */
  --track-wide:  0.24em;
  --track-mid:   0.14em;
  --track-tight: -0.02em;

  /* mjerilo tipografije: 1.25 na mobilnom, otvorenije na stolnom */
  --t-xs:   0.6875rem;   /* 11px — oznake */
  --t-sm:   0.8125rem;   /* 13px */
  --t-base: 0.9375rem;   /* 15px */
  --t-md:   1.0625rem;   /* 17px */
  --t-lg:   clamp(1.35rem, 1.1rem + 1.1vw, 1.9rem);
  --t-xl:   clamp(1.9rem, 1.35rem + 2.4vw, 3.1rem);
  --t-2xl:  clamp(2.4rem, 1.5rem + 4vw, 4.6rem);
  --t-3xl:  clamp(3rem, 1.4rem + 6.6vw, 6.4rem);

  /* ritam */
  --gutter:   1.25rem;
  --wrap:     84rem;
  --wrap-narrow: 46rem;
  --section:  clamp(4rem, 2.5rem + 6vw, 8.5rem);
  --section-tight: clamp(2.75rem, 2rem + 3.5vw, 5rem);

  /* pokret */
  --ease:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 180ms;
  --t-mid:  320ms;
  --t-slow: 640ms;

  --header-h: 4.5rem;
}

@media (min-width: 48em) {
  :root {
    --gutter: 2rem;
    --t-base: 1rem;
    --t-md:   1.125rem;
    --header-h: 5.25rem;
  }
}

@media (min-width: 75em) {
  :root { --gutter: 3rem; }
}

/* ──────────────────────────────────────────────────────────────── 2. osnova */

*, *::before, *::after { box-sizing: border-box; }

/* `hidden` mora pobijediti svaki `display` iz komponente. Bez ovoga
   `.stock-line { display: flex }` nadjača atribut i prazan redak se vidi. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Sidro ispod ljepljivog zaglavlja ne završi skriveno iza njega. */
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  background: var(--c-cream);
  color: var(--c-ink);
  font-family: var(--f-sans);
  font-size: var(--t-base);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Nijedna sekcija ne smije gurnuti vodoravni klizač. */
  overflow-x: hidden;
}

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: var(--track-tight);
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); line-height: 1.15; }
h4 { font-size: var(--t-md); font-family: var(--f-sans); font-weight: 500; letter-spacing: 0; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }

ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

button, input, select, textarea { font: inherit; color: inherit; }

hr {
  border: 0;
  border-top: 1px solid var(--c-line);
  margin: var(--section-tight) 0;
}

::selection { background: var(--c-ink); color: var(--c-cream); }

/* Fokus se vidi UVIJEK kad dolazi s tipkovnice — nikad `outline: none`. */
:focus-visible {
  outline: 2px solid var(--c-ink);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -4rem;
  z-index: 200;
  background: var(--c-ink);
  color: var(--c-cream);
  padding: 0.75rem 1.25rem;
  font-size: var(--t-sm);
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  transition: top var(--t-fast) var(--ease);
}
.skip-link:focus { top: 0.75rem; }

.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ─────────────────────────────────────────────────────────────── 3. raspored */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--narrow { max-width: var(--wrap-narrow); }
.wrap--wide   { max-width: 100rem; }

.section { padding-block: var(--section); }
.section--tight { padding-block: var(--section-tight); }
.section--flush-top { padding-top: 0; }

.section--shell   { background: var(--c-shell); }
.section--surface { background: var(--c-surface); }
.section--ink     { background: var(--c-ink); color: var(--c-cream); }
/* --c-ink-soft (#7A605A) je izveden za tople plohe i na Coconut Milku daje
   4,96:1. Na hladnoj --c-mist (#C4D4D5) pada na 3,76:1, pa `.prose` na ovoj
   plohi nije prolazio AA. Token se potamnjuje SAMO ovdje: globalna promjena
   bi pomaknula pedesetak mjesta koja su već izmjerena i uredna. */
.section--mist {
  background: var(--c-mist);
  color: var(--c-ink);
  --c-ink-soft: #66514C;   /* 4,82:1 na #C4D4D5 */
}

/* ────────────────────────────────────────────────────── 4. tipografski alati */

/* Nadnaslov: široko razmaknuti verzali — isti potez kao u tekstualnom znaku. */
.eyebrow {
  font-family: var(--f-sans);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--c-brand);
  margin: 0 0 1.25rem;
  display: block;
}

.section--ink .eyebrow { color: var(--c-ivory); }

.lede {
  font-size: var(--t-md);
  color: var(--c-ink-soft);
  max-width: 38ch;
  font-weight: 300;
}

.section--ink .lede { color: #E7DCCF; }

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem);
}

.section-head__text { max-width: 34rem; }
.section-head h2 { margin-bottom: 0.6rem; }

/* Naslov u dva reda: prijelom je namjeran i dolazi iz administracije (\n). */
.display-break { white-space: pre-line; }

.rule {
  height: 1px;
  background: var(--c-line);
  border: 0;
  margin: 0;
}

/* ─────────────────────────────────────────────────────────────── 5. kontrole */

.btn {
  --btn-bg: var(--c-ink);
  --btn-fg: var(--c-cream);
  --btn-bd: var(--c-ink);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3.25rem;
  padding: 0.9rem 2rem;
  border: 1px solid var(--btn-bd);
  border-radius: 0;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--f-sans);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              opacity var(--t-fast) var(--ease);
}

.btn:hover { --btn-bg: var(--c-brand); --btn-bd: var(--c-brand); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--c-ink);
  --btn-bd: var(--c-ink);
}
.btn--ghost:hover { --btn-bg: var(--c-ink); --btn-fg: var(--c-cream); }

.btn--light {
  --btn-bg: var(--c-cream);
  --btn-fg: var(--c-ink);
  --btn-bd: var(--c-cream);
}
.btn--light:hover { --btn-bg: var(--c-surface); --btn-bd: var(--c-surface); }

.btn--on-dark {
  --btn-bg: transparent;
  --btn-fg: var(--c-cream);
  --btn-bd: rgba(246, 239, 231, 0.55);
}
.btn--on-dark:hover { --btn-bg: var(--c-cream); --btn-fg: var(--c-ink); --btn-bd: var(--c-cream); }

.btn--block { width: 100%; }
.btn--small { min-height: 2.5rem; padding: 0.5rem 1.1rem; }

.btn[disabled],
.btn[aria-disabled='true'] {
  opacity: 0.42;
  cursor: not-allowed;
  pointer-events: none;
}

/* Tekstualna poveznica s podvlakom koja se izvuče slijeva. */
.link {
  display: inline-block;
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  padding-bottom: 0.35rem;
  position: relative;
}

.link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform-origin: left;
  transition: transform var(--t-mid) var(--ease-out-soft);
}

.link:hover::after { transform: scaleX(0.35); }

.link--quiet { color: var(--c-ink-soft); }

/* ───────────────────────────────────────────────────────────── 6. zaglavlje */

.announce {
  background: var(--c-ink);
  color: var(--c-cream);
  text-align: center;
  font-size: var(--t-xs);
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  padding: 0.6rem var(--gutter);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--c-cream);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-mid) var(--ease),
              background var(--t-mid) var(--ease);
}

.site-header.is-stuck {
  border-bottom-color: var(--c-line);
  background: color-mix(in srgb, var(--c-cream) 92%, transparent);
  backdrop-filter: saturate(1.1) blur(8px);
}

.site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  min-height: var(--header-h);
}

.site-header__nav-left,
.site-header__actions { display: flex; align-items: center; gap: 0.25rem; }
.site-header__actions { justify-content: flex-end; }

/* Znak je ugrađeni SVG sa ŽIVIM tekstom (vidi templates/partials/brand.php).
   Rez se zato postavlja ovdje, kroz isti token kojim su pisani naslovi — znak
   i naslovi ne mogu tvrditi različit rez. `currentColor` znači da boju bira
   ploha: u zaglavlju je to tinta stranice, u podnožju bijela. */
.wordmark__svg text { font-family: var(--f-display); }

/* Platno je skraćeno na slova (vidi brand.php), pa zamjenski serif — širi od
   Cormoranta dok se ne učita — mora smjeti prijeći preko ruba. Bez ovoga bi
   mu se rub slova odrezao, i to samo u tom kratkom trenutku, dakle greška
   koju nijedan spis ne uhvati. */
.wordmark__svg { overflow: visible; }

.wordmark {
  display: block;
  justify-self: center;
  padding: 0.5rem 0.25rem;
  color: var(--c-ink);
}

/* Visina je veća od one koju je nosila izrezana bitmapa (1,35rem) jer platno
   znaka ima rub iznad i ispod slova: slova mjere 122,7 od 160 visine platna,
   pa 1,75rem okvira daje istih 21 px slova kao prije. Okvir je fiksan, pa
   zamjena fonta pri učitavanju ne pomiče zaglavlje — mijenjaju se slova
   unutar okvira, ne okvir. */
.wordmark .wordmark__svg {
  display: block;
  width: auto;
  height: clamp(1.25rem, 0.9rem + 1.3vw, 1.75rem);
}

.nav-list { display: none; gap: 2rem; }

@media (min-width: 62em) {
  .nav-list { display: flex; }
}

.nav-link {
  display: inline-block;
  padding: 0.4rem 0;
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--t-mid) var(--ease-out-soft);
}

.nav-link:hover::after,
.nav-link[aria-current='page']::after { transform: scaleX(1); transform-origin: left; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  background: none;
  cursor: pointer;
  position: relative;
  color: inherit;
}

.icon-btn svg { width: 1.15rem; height: 1.15rem; }

.icon-btn__count {
  position: absolute;
  top: 0.35rem;
  right: 0.3rem;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.2rem;
  border-radius: 999px;
  background: var(--c-merlot);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 1.1rem;
  text-align: center;
  letter-spacing: 0;
}

.icon-btn--menu { margin-inline-start: -0.6rem; }

@media (min-width: 62em) {
  .icon-btn--menu { display: none; }
}

/* ────────────────────────────────────────────────── 7. izvanplatna navigacija */

/*
 * Slaganje slojeva: ladica (160) iznad trake privole (140), obavijest (170)
 * iznad obje, preskočna poveznica (200) iznad svega.
 *
 * ── Zašto ladica ide iznad privole ────────────────────────────────────────
 *
 * Traka privole je stajala iznad ladice i presretala klikove na „Na naplatu”:
 * posjetitelj koji doda artikl prije nego što odgovori na kolačiće nije mogao
 * doći do naplate. Ladicu otvara sam korisnik svojom radnjom, traka je trajna
 * i pasivna, pa dok je ladica otvorena ide iznad. Privola se ne skriva ni ne
 * preskače — traka je i dalje tu čim se ladica zatvori.
 */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 160;
  display: grid;
  pointer-events: none;
}

.drawer[hidden] { display: none; }

.drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(42, 27, 18, 0.42);
  opacity: 0;
  transition: opacity var(--t-mid) var(--ease);
  border: 0;
  padding: 0;
  cursor: pointer;
}

.drawer__panel {
  position: relative;
  height: 100%;
  width: min(28rem, 100%);
  margin-left: auto;
  background: var(--c-cream);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--t-mid) var(--ease-out-soft);
  overflow: hidden;
}

.drawer--left .drawer__panel {
  margin-left: 0;
  margin-right: auto;
  transform: translateX(-100%);
}

.drawer.is-open { pointer-events: auto; }
.drawer.is-open .drawer__scrim { opacity: 1; }
.drawer.is-open .drawer__panel { transform: translateX(0); }

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.5rem;
  border-bottom: 1px solid var(--c-line);
  min-height: var(--header-h);
}

.drawer__title {
  font-family: var(--f-sans);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}

.drawer__body { flex: 1; overflow-y: auto; padding: 1.5rem; }
.drawer__foot { border-top: 1px solid var(--c-line); padding: 1.5rem; background: var(--c-shell); }

.menu-list { display: grid; gap: 0.25rem; }

.menu-list a {
  display: block;
  padding: 0.85rem 0;
  font-family: var(--f-display);
  font-size: 1.75rem;
  font-weight: 300;
  border-bottom: 1px solid var(--c-line);
}

.menu-meta {
  margin-top: 2rem;
  display: grid;
  /*
   * Razmak je manji nego prije jer ga sada drži sam redak: poveznice su bile
   * visoke 21 px, pa je meta za prst bila upola manja od preporučenih 44 px.
   * Tekst ostaje iste veličine — raste samo područje na koje se može
   * pritisnuti, i to unutar postojećeg razmaka, pa se izgled ladice ne mijenja.
   */
  gap: 0;
  font-size: var(--t-sm);
  color: var(--c-ink-soft);
}

.menu-meta a {
  display: flex;
  align-items: center;
  min-height: 44px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ──────────────────────────────────────────────────────────────── 8. naslovna */

.hero {
  position: relative;
  background: var(--c-cream);
}

.hero__media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.hero__media img,
.hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Fotografija za stolno i za mobilno su ZASEBNI kadrovi, ne isti smanjeni. */
.hero__img--desktop { display: none; }

/*
 * Kampanjski film na telefonu.
 *
 * Film je 9 : 16, a okvir naslovne 4 : 5, pa `object-fit: cover` odsiječe oko
 * 29 % visine, po pola gore i dolje. Okvir se NE mijenja u 9 : 16: na telefonu
 * bi tada sam film bio visok gotovo cijeli zaslon, a naslov, podnaslov i oba
 * gumba pali bi ispod pregiba — cijena veća od izrezanog ruba kadra.
 *
 * Film je SKRIVEN dok ga skripta ne uključi razredom `is-film`. Redoslijed je
 * takav zato što izvor filma pridružuje ta ista skripta (`site.js`): dok ga
 * nema, `<video>` je prazan okvir, a fotografija ispod njega je ono što treba
 * vidjeti. Tako i posjetitelj bez JavaScripta dobije naslovnu, a ne rupu.
 *
 * Fotografija je ujedno zamjena uz `prefers-reduced-motion` — skripta tada
 * `is-film` uopće ne doda, pa se film ne skriva nego se nikad ni ne učita.
 */
.hero__film { display: none; }

.hero__media--film.is-film .hero__film        { display: block; }
.hero__media--film.is-film .hero__img--mobile { display: none; }

.hero__body {
  padding-block: clamp(2rem, 1rem + 5vw, 3.5rem);
}

/* Naslov namjerno NIJE `--t-3xl`: preko fotografije se najveći rez razlio
   preko modela i naslov je pao u tri reda. Ovaj raspon ga drži u dva. */
.hero__title {
  font-size: clamp(2.5rem, 1.5rem + 3.4vw, 4.15rem);
  margin-bottom: 1.25rem;
  max-width: 15ch;
}

.hero__text {
  font-size: var(--t-md);
  color: var(--c-ink-soft);
  max-width: 34ch;
  font-weight: 300;
  margin-bottom: 2rem;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/*
 * „Kupi sada” preko kadra na telefonu, na mjestu koje je klijentica označila
 * (oko desetine visine od donjeg ruba, po sredini). Svijetla ploha jer film
 * ispod nje mijenja svjetlinu iz kadra u kadar; tamni gumb bi se na tamnoj
 * stubi izgubio. Sjena ga odvaja od svijetlih kadrova.
 */
.hero__shop {
  position: absolute;
  left: 50%;
  bottom: 10%;
  z-index: 1;
  min-width: 11.5rem;
  transform: translateX(-50%);
  white-space: nowrap;
  box-shadow: 0 0.4rem 1.5rem rgba(36, 26, 23, 0.22);
}

@media (max-width: 61.99em) {
  /*
   * Na telefonu naslov stoji u JEDNOM retku (klijentica, 21. 9. 2026.).
   * Prijelom iz administracije (\n) vrijedi za stolni kadar, gdje naslov
   * leži u uskom stupcu preko fotografije; ovdje ga `normal` pretvara u
   * razmak.
   *
   * Dulji naslov je hrvatski, „Elegancija u pokretu.”: izmjereno u Cormorantu
   * 300 uz ovaj razmak slova, 7,71 em (engleski 7,28 em). Dijeljenje širine
   * retka s 8,2 ostavlja ~6 % zraka za razlike u iscrtavanju. Na većini
   * telefona (od 375 px naviše) veličina ostaje dosadašnjih 40 px; smanjuje
   * se samo na užima. Prelamanje namjerno NIJE zabranjeno (`nowrap`): dok se
   * pismo ne učita, širi zamjenski serif bi na najužim zaslonima prešao rub
   * stranice, a ovako se na trenutak prelomi u dva retka.
   */
  .hero__title {
    white-space: normal;
    max-width: none;
    font-size: min(
      calc((100vw - 2 * var(--gutter)) / 8.2),
      clamp(2.5rem, 1.5rem + 3.4vw, 4.15rem)
    );
  }
}

@media (min-width: 62em) {
  .hero__shop { display: none; }

  .hero__media {
    aspect-ratio: auto;
    height: min(46rem, calc(100svh - var(--header-h)));
  }

  /*
   * Film je uspravan kadar za telefon; na stolnom stoji fotografija. Pravilo
   * mora nositi `.is-film`, inače ga skripta nadjača kad se prozor razvuče
   * preko 62em nakon što je film već krenuo.
   */
  .hero__media--film.is-film .hero__film { display: none; }
  .hero__img--mobile  { display: none; }
  .hero__img--desktop { display: block; }

  /* Tekst leži na ravnoj plohi zida s lijeve strane kadra; zato blagi veo,
     ne puno zatamnjenje — kontrast tinte na tom zidu je već 10,8 : 1. */
  .hero__body {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
    background: linear-gradient(
      100deg,
      color-mix(in srgb, var(--c-cream) 78%, transparent) 0%,
      color-mix(in srgb, var(--c-cream) 46%, transparent) 26%,
      transparent 52%
    );
  }

  .hero__inner {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .hero__copy { max-width: 30rem; }
  .hero__text { max-width: 28ch; }
}

/* ────────────────────────────────────────────────── 9. urednička razdioba */

.split {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}

@media (min-width: 62em) {
  .split { grid-template-columns: 1fr 1fr; gap: clamp(3rem, 1rem + 5vw, 6rem); }
  .split--wide-media { grid-template-columns: 1.15fr 1fr; }
  .split--reverse .split__media { order: 2; }
}

.split__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--c-shell);
}

.split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out-soft);
}

.split__copy { max-width: 34rem; }
.split__copy h2 { margin-bottom: 1.25rem; }
.split__copy .btn, .split__copy .link { margin-top: 1.75rem; }

.prose { color: var(--c-ink-soft); font-weight: 300; font-size: var(--t-md); }
.prose p + p { margin-top: 0.85em; }
.section--ink .prose { color: #E7DCCF; }

/* ───────────────────────────────────────── 10. POTPIS: traka nijansi */

/*
 * „Odaberi svoju nijansu”. Umjesto krugova s bojom — plohe u stvarnoj boji
 * artikla, s imenom nijanse postavljenim okomito, širokim razmakom slova,
 * po istom potezu kao tekstualni znak.
 *
 * Ime je UVIJEK vidljivo. Prijelaz na hover/fokus samo produbljuje plohu i
 * izvuče strelicu — nijedna informacija ne ovisi o mišu.
 */

.shades {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--c-line);
}

@media (min-width: 62em) {
  .shades { grid-template-columns: repeat(4, 1fr); }
}

.shade {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(14rem, 10rem + 26vw, 30rem);
  padding: 1.5rem;
  background: var(--shade-color, var(--c-ivory));
  color: var(--shade-ink, var(--c-ink));
  overflow: hidden;
  isolation: isolate;
}

.shade::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.16) 100%);
  opacity: 0;
  transition: opacity var(--t-mid) var(--ease);
}

.shade:hover::before,
.shade:focus-visible::before { opacity: 1; }

.shade__name {
  font-family: var(--f-sans);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
}

.shade__meta {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  margin-left: auto;
  font-size: var(--t-xs);
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
}

.shade__arrow {
  display: inline-block;
  transition: transform var(--t-mid) var(--ease-out-soft);
}

.shade:hover .shade__arrow,
.shade:focus-visible .shade__arrow { transform: translateX(0.4rem); }

/* ────────────────────────────────────────────────── 11. mreža proizvoda */

.grid-products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 1rem;
}

@media (min-width: 48em) {
  .grid-products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem 1.5rem; }
}

@media (min-width: 75em) {
  .grid-products--four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3rem 2rem; }
}

/*
 * ── Mreža se prilagođava BROJU artikala ───────────────────────────────────
 *
 * Tri stupca uz dva artikla ostavljaju prazan stupac desno, a uz jedan artikl
 * karticu široku trećinu zaslona koja visi uz lijevi rub. Oboje se čita kao
 * „ostatak se nije učitao”, a ne kao namjera. Kolekcija Accessories danas ima
 * točno jedan proizvod, a stranica Kolekcije točno dvije kolekcije.
 *
 * Broj artikala se NE prosljeđuje iz PHP-a nego čita iz same mreže: popis se
 * na više mjesta filtrira (kolekcija, kategorija, pretraga, filtri kupca), pa
 * bi klasa izračunata na jednom mjestu prije ili kasnije opisivala drugi skup
 * od onoga koji je iscrtan.
 *
 * Dva artikla dobivaju dva stupca i ispune red. Jedan artikl zadržava širinu
 * stupca — da fotografija ne naraste na dvostruko u odnosu na svaku drugu
 * stranicu — ali se mreža centrira, pa prazan prostor stoji simetrično s obje
 * strane i izgleda kao razmak, a ne kao rupa.
 *
 * `:has()` podržavaju svi aktualni preglednici; ondje gdje ga nema, vrijedi
 * pravilo iznad i izgled je današnji, ne pokvaren.
 */
@media (min-width: 48em) {
  .grid-products:has(> :nth-child(2)):not(:has(> :nth-child(3))) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid-products:not(:has(> :nth-child(2))) {
    grid-template-columns: minmax(0, 22rem);
    justify-content: center;
  }
}

.card { position: relative; display: flex; flex-direction: column; }

.card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--c-shell);
  margin-bottom: 1rem;
}

.card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity var(--t-slow) var(--ease), transform 1.4s var(--ease-out-soft);
}

.card__img--hover { opacity: 0; }

/* Zamjena slike na hover je ukras, ne informacija — na dodir se ne događa. */
@media (hover: hover) and (pointer: fine) {
  .card:hover .card__img--main  { opacity: 0; }
  .card:hover .card__img--hover { opacity: 1; }
  .card:hover .card__media img  { transform: scale(1.03); }
}

/* ── Bedževi na kartici ──────────────────────────────────────────────────
 *
 * Dva su kuta, dvije poruke: lijevo gore stanja (SET, uskoro, rasprodano),
 * desno gore sniženje. Cijela je traka jedan red koji se po potrebi
 * prijelama: na najužim karticama mreže od dva stupca (≈320–390 px) bedž
 * sniženja sklizne u vlastiti red i ostane desno, pa se dva bedža nikad ne
 * preklope ni preliju preko ruba kartice. Red se dodaje u DOM samo kad ima
 * što pokazati.
 *
 * Sniženje se ispisuje SAMO uz stvarno aktivno stanje cijene:
 * `compare_price()` u `src/Helpers.php` vraća staru cijenu isključivo kad
 * je `products.sale_price` upisan i niži od redovne cijene. Komplet po
 * cijeni nižoj od zbroja komada NIJE sniženje nego cijena ponude, pa ne
 * smije dobiti bedž — provjereno testom `http_bedzevi`.
 *
 * Traka stoji ispod poveznice cijele kartice (`z-index: 2` < 3), pa ništa
 * ne presreće klik; tekst bedža čitač zaslona čita kao i svaki drugi, a
 * cijene uz njega nose i skrivenu oznaku „Redovna/Akcijska cijena”.
 */
.card__flags {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  right: 0.85rem;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.4rem 0.5rem;
}

.card__flags__stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
}

.card__flag {
  padding: 0.3rem 0.7rem;
  background: var(--c-ink);
  color: var(--c-cream);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
}

/* Desni kut: sniženje je jedini bedž koji se izdvaja na suprotnu stranu. */
.card__flag--sale { margin-left: auto; background: var(--c-merlot); }
.card__flag--set  { background: var(--c-ink); } /* isto kao osnovni — izričito */
.card__flag--soon { background: var(--c-surface); color: var(--c-ink-soft); border: 1px solid var(--c-line); }
.card__flag--out  { background: var(--c-surface); color: var(--c-ink); }

.card__name {
  font-family: var(--f-sans);
  font-size: var(--t-base);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.4;
  margin: 0 0 0.35rem;
}

/* Cijela kartica je klikabilna, ali u DOM-u postoji samo JEDNA poveznica —
   čitač zaslona inače nabraja isti proizvod triput. */
.card__link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
}

.card__price {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-size: var(--t-sm);
  letter-spacing: 0.02em;
}

.card__price del { color: var(--c-ink-soft); text-decoration-thickness: 1px; }
.card__price ins { color: var(--c-merlot); text-decoration: none; }
.card__price--pending { color: var(--c-ink-soft); font-style: italic; font-family: var(--f-display); font-size: var(--t-md); }

/* Zakonske reference uz cijenu: najniža cijena u 30 dana prije akcije i
   dodatna („sidrena”) cijena na referentni datum. Običan tekst ispod cijene,
   ne tooltip i ne razlika u boji — inspekcija i čitač zaslona moraju ih
   pročitati jednako (spec §11, pristupačnost). Sitniji je od cijene, ali
   ostaje iznad granice čitljivosti i na mobitelu. */
.card__price-refs,
.price-ref {
  display: block;
  color: var(--c-ink-soft);
  font-size: var(--t-xs);
  line-height: 1.45;
  letter-spacing: 0.01em;
}

.card__price-refs { margin: 0.2rem 0 0; }

/* Vodeća rečenica ispod cijene: potvrđeni kratki opis, sveden na najviše
   dva retka da kartice u mreži ostanu usporedive visine. Tehnička
   specifikacija ne živi ovdje nego na stranici proizvoda. */
.card__lead {
  color: var(--c-ink-soft);
  font-size: var(--t-sm);
  line-height: 1.5;
  margin: 0.15rem 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card__colors { display: flex; gap: 0.35rem; margin-top: 0.6rem; }

.swatch {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 999px;
  background: var(--swatch, var(--c-ivory));
  box-shadow: inset 0 0 0 1px rgba(85, 60, 54, 0.28);
}

.card__meta {
  font-size: var(--t-xs);
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--c-ink-soft);
  margin-bottom: 0.5rem;
}

/* ────────────────────────────────────────────────────────── 12. kampanja */

.campaign {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}

@media (min-width: 48em) {
  .campaign { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
}

.campaign__item { aspect-ratio: 1 / 1; overflow: hidden; background: var(--c-shell); }
.campaign__item img { width: 100%; height: 100%; object-fit: cover; }

/* ──────────────────────────────────────────────────────── 13. newsletter */

.newsletter { display: grid; gap: 2rem; align-items: center; }

@media (min-width: 62em) {
  .newsletter { grid-template-columns: 1fr 1fr; gap: 4rem; }
}

.field-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: stretch;
}

.field-inline .input { flex: 1 1 14rem; }

/* ───────────────────────────────────────────────────────── 14. obrasci */

.field { margin-bottom: 1.25rem; }

.label {
  display: block;
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--c-ink-soft);
  margin-bottom: 0.5rem;
}

.label__optional { text-transform: none; letter-spacing: 0; font-weight: 400; }

.input,
.select,
.textarea {
  display: block;
  width: 100%;
  min-height: 3.25rem;
  padding: 0.85rem 1rem;
  background: var(--c-surface);
  border: 1px solid var(--c-line-strong);
  border-radius: 0;
  font-size: var(--t-base);
  color: var(--c-ink);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
  /* 16px na mobilnom sprječava iOS da uveća stranicu pri fokusu polja. */
}

@media (max-width: 47.99em) {
  .input, .select, .textarea { font-size: 1rem; }
}

.textarea { min-height: 8rem; resize: vertical; line-height: 1.6; }

.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237A605A' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 0.7rem;
  padding-right: 2.5rem;
}

/* — vlastiti padajući izbornik —

   `<select>` ostaje u obrascu i dalje je jedini izvor vrijednosti; `site.js`
   ga sakrije i iznad njega nacrta gumb i popis u temi stranice. Popis opcija
   izvornog `<select>`-a crta operativni sustav i CSS ga ne dohvaća — na
   stranici u smeđoj paleti to je jedini sivo-plavi element.

   Bez JavaScripta klase `.select--replaced` nema, pa se vidi izvorni
   `<select>` i sve radi kao prije. */

.dropdown { position: relative; }

.select--replaced {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
}

.dropdown__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  min-height: 3.25rem;
  padding: 0.85rem 1rem;
  background: var(--c-surface);
  border: 1px solid var(--c-line-strong);
  font: inherit;
  font-size: var(--t-base);
  color: var(--c-ink);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

@media (max-width: 47.99em) {
  .dropdown__button { font-size: 1rem; }
}

.dropdown__button::after {
  content: '';
  flex: none;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 1px solid var(--c-ink-soft);
  border-bottom: 1px solid var(--c-ink-soft);
  transform: rotate(45deg) translate(-0.12em, -0.12em);
  transition: transform var(--t-fast) var(--ease);
}

.dropdown__button[aria-expanded='true']::after {
  transform: rotate(-135deg) translate(-0.05em, -0.05em);
}

.dropdown__button:hover { border-color: var(--c-ink); }
.dropdown__button[aria-expanded='true'] { border-color: var(--c-ink); box-shadow: inset 0 0 0 1px var(--c-ink); }
.dropdown__button:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 2px; }

/* Popis je najmanje širok koliko i gumb, ali smije narasti do svoje
   najduže opcije — inače se „Cijena: niža prema višoj” lomi u tri retka i
   naleti na kvačicu. Raste ULIJEVO (`right: 0`), jer u traci kataloga stoji
   uz desni rub i prema desno nema mjesta. */
.dropdown__list {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  left: auto;
  z-index: 30;
  min-width: 100%;
  width: max-content;
  max-width: min(22rem, calc(100vw - 2 * var(--gutter)));
  max-height: 17rem;
  overflow-y: auto;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  background: var(--c-surface);
  border: 1px solid var(--c-ink);
  box-shadow: 0 12px 34px rgba(42, 27, 18, 0.16);
}

/* U obrascu (naplata, kontakt) polje ide preko cijele širine, pa se popis
   veže uz lijevi rub kao i sve ostalo. */
.field .dropdown__list { left: 0; right: auto; }

.dropdown__option {
  padding: 0.65rem 2.1rem 0.65rem 0.85rem;
  font-size: var(--t-sm);
  line-height: 1.4;
  color: var(--c-ink);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}

.dropdown__option:hover { background: var(--c-shell); }

/* Kvačica, ne podebljanje: podebljan redak pomiče širinu popisa. Razmak za
   nju drži svaka opcija, ne samo odabrana — inače se tekst pomakne u
   trenutku odabira. */
.dropdown__option[aria-selected='true'] {
  background: var(--c-shell);
  position: relative;
}

.dropdown__option[aria-selected='true']::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0.85rem;
  width: 0.6rem;
  height: 0.6rem;
  margin-top: -0.35rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5.2l3.2 3.2L11 1.6' fill='none' stroke='%23553C36' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.dropdown__option[aria-disabled='true'] { opacity: 0.4; cursor: not-allowed; }

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--c-ink);
  box-shadow: inset 0 0 0 1px var(--c-ink);
}

.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 2px; }

.input[aria-invalid='true'],
.select[aria-invalid='true'],
.textarea[aria-invalid='true'] { border-color: var(--c-danger); }

.field__error {
  display: block;
  margin-top: 0.45rem;
  font-size: var(--t-sm);
  color: var(--c-danger);
}

.field__hint {
  display: block;
  margin-top: 0.45rem;
  font-size: var(--t-sm);
  color: var(--c-ink-soft);
}

.field-row { display: grid; gap: 0 1rem; }

@media (min-width: 40em) {
  .field-row--2 { grid-template-columns: 1fr 1fr; }
  .field-row--pc { grid-template-columns: 9rem 1fr; }
}

.check {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  cursor: pointer;
  font-size: var(--t-sm);
  line-height: 1.55;
}

/* — kućice i kružići —

   `accent-color` je bio jedan redak, ali daje kućicu operativnog sustava:
   plavu na Windowsu, sivu na Linuxu, sa zaobljenjem koje se ne da dirati.
   Uz smeđu paletu je to jedini element na stranici koji izgleda posuđeno.
   Ispod je vlastita izvedba — kvadrat za kućicu, krug za kružić, ista
   debljina crte kao na poljima i gumbima.

   Ostaje pravi `<input>`: JAWS ga i dalje čita kao kućicu, razmaknica ga
   prebacuje, obrazac ga i dalje šalje. Mijenja se samo crtanje. */

.check input[type='checkbox'],
.check input[type='radio'],
.filter-option input[type='checkbox'],
.filter-option input[type='radio'],
.choice__item input[type='checkbox'],
.choice__item input[type='radio'] {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  display: grid;
  place-content: center;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  padding: 0;
  border: 1px solid var(--c-line-strong);
  background: var(--c-surface);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}

.check input[type='radio'],
.filter-option input[type='radio'],
.choice__item input[type='radio'] { border-radius: 999px; }

.check input[type='checkbox']:hover:not(:disabled),
.check input[type='radio']:hover:not(:disabled),
.filter-option input:hover:not(:disabled),
.choice__item input:hover:not(:disabled) { border-color: var(--c-ink); }

.check input:checked,
.filter-option input:checked,
.choice__item input:checked {
  border-color: var(--c-ink);
  background-color: var(--c-ink);
}

/* Kvačica je pozadinska slika, ne pseudoelement: `input` je zamjenjivi
   element i ::after mu ne rade u svakom pregledniku. */
.check input[type='checkbox']:checked,
.filter-option input[type='checkbox']:checked,
.choice__item input[type='checkbox']:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5.2l3.2 3.2L11 1.6' fill='none' stroke='%23FFFFFF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.72rem;
}

/* Točka u kružiću je unutarnja sjena — ne traži drugi element. */
.check input[type='radio']:checked,
.filter-option input[type='radio']:checked,
.choice__item input[type='radio']:checked {
  box-shadow: inset 0 0 0 0.28rem var(--c-surface);
}

.check input:focus-visible,
.filter-option input:focus-visible,
.choice__item input:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 2px; }

.check input:disabled,
.filter-option input:disabled,
.choice__item input:disabled { opacity: 0.4; cursor: not-allowed; }

/* Poravnanje s prvim retkom teksta uz kućicu. */
.check input[type='checkbox'],
.check input[type='radio'] { margin-top: 0.2rem; }

.check a { text-decoration: underline; text-underline-offset: 3px; }

/* ──────────────────────────────────────────────────────────── 15. poruke */

.notice {
  padding: 1rem 1.25rem;
  border-left: 2px solid var(--c-line-strong);
  background: var(--c-shell);
  font-size: var(--t-sm);
  color: var(--c-ink-soft);
}

.notice--error   { border-left-color: var(--c-danger); color: var(--c-ink); }
.notice--ok      { border-left-color: var(--c-ok); }
.notice--info    { border-left-color: var(--c-brand); }
.notice + .notice { margin-top: 0.75rem; }

.notice strong { color: var(--c-ink); font-weight: 500; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.6rem;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  background: var(--c-shell);
  color: var(--c-ink-soft);
  border: 1px solid var(--c-line);
}

.badge--ok     { color: var(--c-ok);     border-color: color-mix(in srgb, var(--c-ok) 35%, transparent); }
.badge--warn   { color: var(--c-warn);   border-color: color-mix(in srgb, var(--c-warn) 35%, transparent); }
.badge--danger { color: var(--c-danger); border-color: color-mix(in srgb, var(--c-danger) 35%, transparent); }
.badge--accent { color: var(--c-brand);  border-color: color-mix(in srgb, var(--c-brand) 35%, transparent); }
.badge--info   { color: var(--c-info); border-color: color-mix(in srgb, var(--c-info) 35%, transparent); }

/* Diskretna oznaka demo stanja. Pojavljuje se samo gdje je nužna. */
.demo-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--t-xs);
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--c-ink-soft);
}

.demo-tag::before {
  content: '';
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 999px;
  background: var(--c-bison);
}

/* ───────────────────────────────────────────────────────────── 16. podnožje */

.site-footer {
  /* Tri tona teksta na plohi --c-ink (#553C36). Sva tri su izmjerena
     `php scripts/contrast.php` i sva tri prelaze 4,5:1, jer podnožje nosi
     podatke tvrtke u 11 px i 13 px, dakle nikad ne kvalificira kao velik
     tekst. Prije 7. 9. 2026. je prigušeni ton bio #A99887, mjereno 3,61:1.
     Vrijednosti su ovdje, a ne uz svako pravilo: rasute po datoteci su se
     razišle i jedna je pala ispod praga a da to ništa nije javilo. */
  --fc-text:  #E4D9CC;   /* 7,24:1 — tijelo podnožja */
  --fc-link:  #DCCEBF;   /* 6,53:1 — poveznice */
  --fc-muted: #C4B09D;   /* 4,82:1 — podaci tvrtke, autorstvo, oznaka demo */

  background: var(--c-ink);
  color: var(--fc-text);
  padding-block: var(--section-tight) 2rem;
  font-size: var(--t-sm);
}

.footer-grid {
  display: grid;
  gap: 2.5rem;
  padding-bottom: 3rem;
}

@media (min-width: 40em) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 62em) {
  .footer-grid { grid-template-columns: 1.4fr repeat(3, 1fr); gap: 3rem; }
}

/* Znak, ne monogram: platno je 440 × 160 (2,75 : 1), pa 5,5rem širine daje 2rem
   visine okvira i oko 1,53rem slova. Monogram je ovdje stajao kvadratno na 3rem
   — znak s istim brojem bio bi visok 1,09rem i sitan. */
.footer-brand__mark { display: block; width: 5.5rem; height: auto; margin-bottom: 1.5rem; }
.footer-brand p { max-width: 26rem; color: var(--fc-muted); }

.footer-title {
  font-family: var(--f-sans);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--c-cream);
  margin: 0 0 1.25rem;
}

/* `.link-list` je SAMO raspored. Boja je bila u istom razredu (`.footer-list a`,
   blijeda krema za tamno podnožje), pa je stranica Kontakt taj razred posudila
   za popis na svijetloj plohi i tri poveznice su ondje mjerile 1,42:1 — dakle
   nevidljive. Razred koji nosi i raspored i boju se ne da posuditi bez te
   greške; boju zato postavlja ploha, ne popis. */
.link-list { display: grid; gap: 0.7rem; }

.site-footer .link-list a { color: var(--fc-link); transition: color var(--t-fast) var(--ease); }
.site-footer .link-list a:hover { color: var(--c-cream); }

.footer-bottom {
  border-top: 1px solid rgba(246, 239, 231, 0.16);
  padding-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  justify-content: space-between;
  align-items: center;
  font-size: var(--t-xs);
  color: var(--fc-muted);
}

.footer-social { display: flex; gap: 1.25rem; }
.footer-social a { display: inline-flex; }
.footer-social svg { width: 1.05rem; height: 1.05rem; }

/* Ovdje je do 10. 9. 2026. stajao filtar `brightness(0) invert(1)` nad tamnim
   monogramom — privremeno rješenje, jer tamna grafika na tamnom podnožju nije
   bila vidljiva. Klijentica je dostavila znak u bijeloj inačici, pa je bijela
   sada PODATAK, a ne trik: znak nasljeđuje boju plohe, a ploha je bijela.
   Opacity je namjerno pun — 0,82 je bio ustupak filtru, ne odluka o izgledu. */
.footer-brand__mark { color: #FFFFFF; }

.footer-company { margin-top: 1.25rem; color: var(--fc-muted); line-height: 1.7; }

/* — donja traka: autorstvo lijevo, pravno desno — */

.footer-bottom__copy { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.footer-bottom__copy .demo-tag { color: var(--fc-muted); }

.footer-bottom__menus { display: flex; gap: 0.5rem; }

/* — izbornici koji se otvaraju prema GORE —

   `<details>` jer izbornik mora raditi i bez JavaScripta. Ploča je
   pozicionirana apsolutno s `bottom: 100%`, pa raste uvis: u podnožju nema
   mjesta prema dolje. `site.js` dodaje zatvaranje klikom izvan i tipkom Esc. */

.footdrop { position: relative; }

.footdrop > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.85rem;
  border: 1px solid rgba(246, 239, 231, 0.22);
  cursor: pointer;
  list-style: none;
  font-size: var(--t-xs);
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--fc-link);
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.footdrop > summary::-webkit-details-marker { display: none; }

.footdrop > summary::after {
  content: '';
  width: 0.4rem;
  height: 0.4rem;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  /* Zatvoreno: strelica gore, jer se ploča otvara prema gore. */
  transform: rotate(-135deg) translate(-0.1em, -0.1em);
  transition: transform var(--t-fast) var(--ease);
}

.footdrop[open] > summary::after { transform: rotate(45deg) translate(-0.05em, -0.05em); }

.footdrop > summary:hover,
.footdrop[open] > summary { border-color: var(--c-cream); color: var(--c-cream); }
.footdrop > summary:focus-visible { outline: 2px solid var(--c-cream); outline-offset: 2px; }

.footdrop__menu {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  right: 0;
  z-index: 5;
  min-width: 13rem;
  display: grid;
  padding: 0.4rem;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  box-shadow: 0 10px 34px rgba(42, 27, 18, 0.28);
}

.footdrop__menu a,
.footdrop__menu button {
  display: block;
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--t-sm);
  color: var(--c-ink);
  text-align: left;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}

.footdrop__menu a:hover,
.footdrop__menu button:hover { background: var(--c-shell); }
.footdrop__menu a:focus-visible,
.footdrop__menu button:focus-visible { outline: 2px solid var(--c-ink); outline-offset: -2px; }

/* Na uskom zaslonu ploča se veže uz CIJELI red izbornika, ne uz svoj
   `<summary>`.

   Prvi pokušaj je bio `left: 0` na samoj ploči — ali `Pravno` je desni od dva
   gumba, pa je ploča od 13rem krenula udesno s njegovog lijevog ruba i
   ispala 40 px izvan zaslona (mjereno na 390 px: desni rub ploče na 430),
   što je cijelu stranicu pomicalo vodoravno. `right: 0` bi na `Kolačići`
   napravio isto na lijevoj strani.

   `position: static` na `.footdrop` znači da se ploča računa prema
   `.footer-bottom__menus` — a taj red je uz lijevi rub sadržaja, pa ploča
   ostaje na zaslonu bez obzira koji je gumb otvoren. */
@media (max-width: 47.99em) {
  .footer-bottom { justify-content: flex-start; }
  .footer-bottom__menus { position: relative; }
  .footdrop { position: static; }
  .footdrop__menu {
    right: auto;
    left: 0;
    max-width: calc(100vw - 2 * var(--gutter));
  }
}

/* ─────────────────────────────────────────────────────── 17. privola */

.consent {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 140;
  background: var(--c-surface);
  border-top: 1px solid var(--c-line);
  box-shadow: 0 -8px 40px rgba(42, 27, 18, 0.09);
  padding: 1.5rem var(--gutter) calc(1.5rem + env(safe-area-inset-bottom));
  transform: translateY(100%);
  animation: consent-in var(--t-slow) var(--ease-out-soft) 600ms forwards;
}

@keyframes consent-in { to { transform: translateY(0); } }

.consent__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 62em) {
  .consent__inner { grid-template-columns: 1fr auto; align-items: center; gap: 2.5rem; }
}

.consent__text { font-size: var(--t-sm); color: var(--c-ink-soft); max-width: 52ch; }
.consent__text a { text-decoration: underline; text-underline-offset: 3px; color: var(--c-ink); }
/*
 * Tri gumba moraju imati JEDNAKU težinu na SVAKOJ širini, ne samo isti razred.
 * Dok je red bio `flex-wrap: wrap` uz `flex: 1 1 auto`, između 390 i 567 px
 * stanu točno DVA gumba, treći prijeđe u novi red i ondje se — sam na retku —
 * rastegne na punu širinu: izmjereno 390 px za „Prihvati sve” prema 171 px za
 * „Odbij sve”, dakle 2,3 puta veća meta baš za pristanak. Razred, boja i
 * visina su pritom bili identični, pa se nejednakost nije vidjela ni u HTML-u
 * ni u testu koji uspoređuje razrede; vidi se samo mjerenjem u pregledniku.
 *
 * Zato mreža, a ne omatanje: ili TRI jednaka stupca ili JEDAN, nikad dva pa
 * ostatak. Iznad 62em se vraća flex s prirodnim širinama, kako je i bilo.
 */
.consent__actions { display: grid; grid-template-columns: 1fr; gap: 0.6rem; }

@media (min-width: 38em) {
  .consent__actions { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 62em) {
  .consent__actions { display: flex; flex-wrap: wrap; }
  .consent__actions .btn { flex: 0 0 auto; }
}

.consent__options { display: grid; gap: 0.85rem; padding-top: 0.5rem; }

/* ───────────────────────────────────────────────────────────── 18. pokret */

/*
 * Pojavljivanje pri skrolanju. Ključno: sadržaj NIJE skriven u CSS-u.
 * Klasu `is-ready` dodaje site.js tek ako preglednik ima IntersectionObserver
 * i korisnik nije tražio manje pokreta. Bez JS-a se sve vidi odmah.
 */
.js-reveal.is-ready {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--t-slow) var(--ease-out-soft),
              transform var(--t-slow) var(--ease-out-soft);
  transition-delay: var(--reveal-delay, 0ms);
}

.js-reveal.is-ready.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Traka privole se pojavljuje animacijom; sa skraćenim trajanjem bi
     ostala izvan zaslona, pa joj se konačno stanje postavlja izravno. */
  .consent { transform: none; animation: none; }
  .js-reveal.is-ready { opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════════════ 19. katalog i filtri */

.page-head {
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(1.75rem, 1rem + 2vw, 2.75rem);
}

.page-head h1 { margin-bottom: 0.75rem; }
.page-head .lede { max-width: 44ch; }

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--t-xs);
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--c-ink-soft);
  margin-bottom: 1.5rem;
}

.breadcrumbs a:hover { color: var(--c-ink); }
.breadcrumbs li:not(:last-child)::after { content: '/'; margin-left: 0.5rem; opacity: 0.5; }
.breadcrumbs li { display: inline-flex; align-items: center; }

.catalog { display: grid; gap: 2rem; align-items: start; }

@media (min-width: 62em) {
  .catalog { grid-template-columns: 15rem 1fr; gap: 3.5rem; }
}

.catalog__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.25rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--c-line);
}

.catalog__count { font-size: var(--t-sm); color: var(--c-ink-soft); }

.sort {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: var(--t-xs);
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--c-ink-soft);
}

.sort .select { min-height: 2.6rem; padding-block: 0.4rem; font-size: var(--t-sm); width: auto; }

/*
 * Bez ovoga se traka kataloga na 320 i 360 px NE skuplja. Lanac je
 * `min-width: auto`, koje i grid i flex stavke imaju podrazumijevano: stupac
 * rezultata u `.catalog` se ne smanjuje ispod svog sadržaja, a unutar njega
 * `<select>` drži širinu najduže opcije. Rezultat je traka od 351 px u
 * spremniku od 280 px i vodoravno pomicanje cijele stranice.
 * Mjereno prije: scrollWidth 371 na širini 320 px.
 */
.catalog > *,
.catalog__bar > * { min-width: 0; }

.sort {
  min-width: 0;
  flex: 1 1 auto;
  justify-content: flex-end;
}

.sort .select { min-width: 0; flex: 0 1 auto; }

.filters { display: grid; gap: 0.25rem; }

/* Filtri su pravi <details> — bez JS-a se i dalje otvaraju. */
.filter { border-bottom: 1px solid var(--c-line); }

.filter > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  cursor: pointer;
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  list-style: none;
}

.filter > summary::-webkit-details-marker { display: none; }

.filter > summary::after {
  content: '';
  width: 0.6rem;
  height: 0.6rem;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translate(-0.15rem, -0.15rem);
  transition: transform var(--t-mid) var(--ease);
}

.filter[open] > summary::after { transform: rotate(225deg) translate(-0.1rem, -0.1rem); }

.filter__body { padding-bottom: 1.25rem; display: grid; gap: 0.7rem; }

.filter-option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--t-sm);
  cursor: pointer;
}

.filter-option input { width: 1rem; height: 1rem; }
.filter-option input[type='checkbox']:checked { background-size: 0.62rem; }
.filter-option .swatch { width: 0.85rem; height: 0.85rem; }
.filter-option__count { margin-left: auto; color: var(--c-ink-soft); font-size: var(--t-xs); }

.filters__actions { display: flex; gap: 0.6rem; padding-top: 1.25rem; }

.filters-toggle { display: inline-flex; }

@media (min-width: 62em) {
  .filters-toggle { display: none; }
  .catalog__aside { display: block !important; }
}

@media (max-width: 61.99em) {
  .catalog__aside[hidden] { display: none; }
}

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--c-line-strong);
  font-size: var(--t-xs);
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  background: var(--c-surface);
}

.chip button {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  line-height: 1;
  font-size: 1rem;
}

.empty-state {
  padding: clamp(3rem, 2rem + 5vw, 6rem) 0;
  text-align: center;
  max-width: 34rem;
  margin-inline: auto;
}

.empty-state h2 { margin-bottom: 0.85rem; }
.empty-state p { color: var(--c-ink-soft); margin-bottom: 1.75rem; }

.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
  align-items: center;
  margin-top: 3.5rem;
}

.pagination a,
.pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  height: 2.75rem;
  padding: 0 0.6rem;
  font-size: var(--t-sm);
  border: 1px solid transparent;
}

.pagination a:hover { border-color: var(--c-line-strong); }
.pagination [aria-current='page'] { background: var(--c-ink); color: var(--c-cream); }
.pagination .is-disabled { opacity: 0.35; }

/* ══════════════════════════════════════════════════ 20. stranica proizvoda */

.pdp { display: grid; gap: 2.5rem; padding-block: 1.5rem clamp(3rem, 2rem + 4vw, 5rem); }

@media (min-width: 62em) {
  .pdp { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(3rem, 1rem + 5vw, 5.5rem); align-items: start; }
}

/* — galerija — */

.gallery { display: grid; gap: 0.5rem; }

/* Stupac sličica stoji OVDJE, prije upita za medij, a ne iza njih. Dok je
   stajao iza, `@media (max-width: 61.99em) { .gallery__thumbs { display: none } }`
   nije vrijedio: ista specifičnost, a kasnije pravilo pobjeđuje. Na mobitelu
   su se zato ispisivali I klizač I stupac sličica, pa je posjetitelj ispod
   galerije dobio sve fotografije još jednom, jednu ispod druge, u punoj
   širini. S dvije fotografije se to čitalo kao dio stranice; s dvanaest,
   koliko ih je stiglo 8. 9. 2026., stranica postane osam zaslona praznog
   listanja. */
.gallery__thumbs { display: grid; gap: 0.5rem; }

/* Stupac sličica je okomiti klizač VISOK KOLIKO pozornica, i to ne upisanom
   visinom nego iz mreže. Popis sličica je `absolute` unutar tračnice, pa
   tračnica u visinu retka ne pridonosi ništa: redak određuje pozornica
   (`aspect-ratio: 4 / 5`), a tračnica se na nju samo rastegne. Do 10. 9. 2026.
   su sličice bile obična mreža koja je sama određivala svoju visinu; tajice
   imaju dvanaest fotografija, pa je pola stupca visjelo ispod glavne slike.

   Rub koji sječe zadnju sličicu je namjeran: pola vidljive sličice kaže da
   ima još, bolje od bilo kakve oznake. Maska ga samo omekša, i to samo na
   strani na kojoj stvarno ima još (`is-more-*` postavlja `site.js`). */
@media (min-width: 62em) {
  .gallery { grid-template-columns: 4.5rem 1fr; gap: 1rem; }
  .gallery__stage { align-self: start; }

  .gallery__rail { order: -1; position: relative; }

  /* Stupac, ne mreža: mreža fiksne visine stisne retke da stanu, pa je
     dvanaest sličica bilo zgnječeno u visinu pozornice i klizača nije ni
     bilo. Stavka stupca s `flex: none` zadrži svoj 4 : 5. */
  .gallery__thumbs {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-snap-type: y proximity;
    scrollbar-width: none;
  }

  .gallery__thumbs::-webkit-scrollbar { display: none; }

  .gallery__thumb { flex: none; scroll-snap-align: start; }

  .gallery__rail.is-more-below .gallery__thumbs {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 3rem), transparent);
            mask-image: linear-gradient(to bottom, #000 calc(100% - 3rem), transparent);
  }

  .gallery__rail.is-more-above .gallery__thumbs {
    -webkit-mask-image: linear-gradient(to top, #000 calc(100% - 3rem), transparent);
            mask-image: linear-gradient(to top, #000 calc(100% - 3rem), transparent);
  }

  .gallery__rail.is-more-above.is-more-below .gallery__thumbs {
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
            mask-image: linear-gradient(to bottom, transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
  }
}

/* Strelice tračnice postoje samo sa skriptom (`hidden` u HTML-u). Bez nje se
   tračnica i dalje pomiče kotačićem, a tabulator sam dovede skrivenu
   sličicu u kadar. Hvatište je 32 px, iznad 24 px iz SC 2.5.8. */
.gallery__rail-btn {
  position: absolute;
  left: 50%;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-left: -1rem;
  padding: 0;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  background: color-mix(in srgb, var(--c-cream) 92%, transparent);
  color: var(--c-ink);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease);
}

.gallery__rail-btn:hover { background: var(--c-cream); }
.gallery__rail-btn--prev { top: 0.25rem; }
.gallery__rail-btn--next { bottom: 0.25rem; }
.gallery__rail-btn svg { width: 0.95rem; height: 0.95rem; }
/* Ikona `chevron` gleda desno; tračnica je okomita. */
.gallery__rail-btn--prev svg { transform: rotate(-90deg); }
.gallery__rail-btn--next svg { transform: rotate(90deg); }

.gallery__stage {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--c-shell);
}

.gallery__stage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 280ms var(--ease);
}

/* Povećanje pod pokazivačem. Samo gdje pokazivač postoji i lebdi: na dodir
   bi prvi dodir povećao sliku umjesto da je pomakne. Točku povećanja
   (`transform-origin`) postavlja `site.js` iz položaja miša, pa se vidi
   baš dio ispod njega. `overflow: hidden` pozornice drži povećanu sliku u
   okviru. */
@media (hover: hover) and (pointer: fine) {
  .gallery__stage { cursor: zoom-in; }
  .gallery__stage.is-zoomed img { transform: scale(2); }
}

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

/* Na mobilnom je galerija vodoravni klizač s uhvatnim točkama — pravi
   pomak prstom, bez knjižnice i bez JS-a za samo listanje. */
/* `tabindex="0"` u predlošku: traka se vodoravno pomiče (856 px sadržaja u
   280 px okvira) pa je tipkovnica mora moći dohvatiti. Fokus nasljeđuje
   globalni `:focus-visible`, a `outline-offset` se ovdje smanjuje da obrub
   ne izađe iz stupca na uskom zaslonu. */
.gallery__track {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.gallery__track::-webkit-scrollbar { display: none; }

.gallery__track:focus-visible { outline: 2px solid var(--c-ink); outline-offset: -2px; }

.gallery__slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--c-shell);
}

.gallery__slide img { width: 100%; height: 100%; object-fit: cover; }

/* Traka se PRELAMA, i to nije kozmetika. Točkica je 1,5rem široka uz razmak
   od 0,4rem, pa je najmanja širina trake zbroj svih točkica: dvanaest ih traži
   358 px. Traka je stavka u `.pdp` mreži, a stavka mreže ima `min-width: auto`
   — pa taj zbroj ne stisne nego RAZVUČE cijeli stupac, i stranica proizvoda
   se na zaslonu od 320 px pomiče vodoravno. Do 8. 9. 2026. se nije vidjelo:
   galerije su nosile dvije do tri fotografije, a prve prave fotografije
   klijentice donijele su dvanaest.

   Točkica se pritom NE smanjuje. Hvatište je 24×24 px iz SC 2.5.8 i dolazi iz
   pseudoelementa (`inset: -11px 0`); uže točkice bi ga probile. Zato se
   razmak dijeli: vodoravno ostaje 0,4rem, a okomiti je 1,5rem, jer bi na
   manjem hvatišta dvaju redaka (11 px gore, 11 px dolje) legla jedno na
   drugo. */
.gallery__dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 0.4rem;
  row-gap: 1.5rem;
  padding-top: 0.85rem;
}

/* Točkica je namjerno crtica od 24×2 px — veći kružić bi na fotografiji bio
   ukras, a galerija ne treba dva naglaska. Cilj dodira se zato širi PSEUDO
   ELEMENTOM, ne samom točkicom: 24×24 px hvatišta iz SC 2.5.8 dobiva se bez
   ijednog vidljivog piksela više. Vodoravno ostaje 0, pa se susjedna hvatišta
   ne preklapaju preko razmaka od 0,4rem. */
.gallery__dot {
  position: relative;
  width: 1.5rem;
  height: 2px;
  border: 0;
  padding: 0;
  background: var(--c-line-strong);
  opacity: 0.35;
  cursor: pointer;
  transition: opacity var(--t-fast) var(--ease);
}

.gallery__dot::after {
  content: '';
  position: absolute;
  inset: -11px 0;   /* 11 + 2 + 11 = 24 px */
}

.gallery__dot[aria-current='true'] { opacity: 1; background: var(--c-ink); }

@media (min-width: 62em) {
  .gallery__track { display: none; }
  .gallery__dots  { display: none; }
}

@media (max-width: 61.99em) {
  .gallery { display: block; }
  .gallery__rail   { display: none; }
  .gallery__stage  { display: none; }
}


.gallery__thumb {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid transparent;
  background: var(--c-shell);
  padding: 0;
  cursor: pointer;
}

.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb[aria-current='true'] { border-color: var(--c-ink); }

.media-note {
  margin-top: 0.75rem;
  font-size: var(--t-xs);
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--c-ink-soft);
}

/* — kupovni stupac — */

@media (min-width: 62em) {
  .pdp__buy { position: sticky; top: calc(var(--header-h) + 2rem); }
}

.pdp__collection {
  font-size: var(--t-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--c-brand);
  margin-bottom: 0.85rem;
  display: block;
}

.pdp__title { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); margin-bottom: 0.85rem; }

.pdp__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: var(--t-md);
  margin-bottom: 1.5rem;
}

.pdp__price del { color: var(--c-ink-soft); }
.pdp__price ins { color: var(--c-merlot); text-decoration: none; }
.pdp__price--pending { font-family: var(--f-display); font-size: var(--t-lg); font-style: italic; color: var(--c-ink-soft); }

/* Reference stoje između cijene i napomene o PDV-u; `.pdp__price` nosi donju
   marginu od 1.5rem, pa je ovdje nema (inače bi blok „plutao” odvojen od
   cijene na koju se odnosi). */
.pdp__price-refs { margin: -1rem 0 1.25rem; }
.price-ref--pdp { font-size: var(--t-xs); }

.pdp__tax { font-size: var(--t-xs); color: var(--c-ink-soft); letter-spacing: 0.02em; text-transform: none; }

.pdp__short { color: var(--c-ink-soft); margin-bottom: 2rem; font-weight: 300; }

.option-group { margin-bottom: 1.75rem; }

.option-group__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.option-group__label {
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
}

.option-group__value { font-size: var(--t-sm); color: var(--c-ink-soft); }

.options { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Odabir je pravi radio: tipkovnica ga vidi kao skupinu, čitač zaslona
   izgovori „odabrano”, a bez JS-a i dalje radi. */
.option { position: relative; }

.option input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.option__face {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 3.25rem;
  min-height: 3rem;
  padding: 0.6rem 1rem;
  border: 1px solid var(--c-line-strong);
  background: var(--c-surface);
  font-size: var(--t-sm);
  letter-spacing: 0.04em;
  transition: border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}

.option input:checked + .option__face {
  border-color: var(--c-ink);
  background: var(--c-ink);
  color: var(--c-cream);
}

.option input:focus-visible + .option__face { outline: 2px solid var(--c-ink); outline-offset: 2px; }

/* Nedostupna kombinacija se NE skriva — precrtana je i onemogućena, pa kupac
   vidi da veličina postoji, ali je trenutačno nema. */
.option input:disabled + .option__face {
  color: var(--c-ink-soft);
  border-color: var(--c-line);
  background: transparent;
  cursor: not-allowed;
  position: relative;
  overflow: hidden;
}

.option input:disabled + .option__face::after {
  content: '';
  position: absolute;
  left: -10%;
  right: -10%;
  top: 50%;
  height: 1px;
  background: var(--c-line-strong);
  transform: rotate(-14deg);
  opacity: 0.8;
}

.option--color .option__face { min-width: 0; padding: 0.5rem 0.9rem 0.5rem 0.6rem; }

.option--color .swatch { width: 1.1rem; height: 1.1rem; }

.qty {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--c-line-strong);
  background: var(--c-surface);
}

.qty button {
  width: 2.75rem;
  min-height: 3.25rem;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--c-ink);
}

.qty button:disabled { opacity: 0.35; cursor: not-allowed; }

.qty input {
  width: 3rem;
  border: 0;
  text-align: center;
  background: none;
  font-size: var(--t-base);
  -moz-appearance: textfield;
}

.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.buy-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: stretch; margin-bottom: 1rem; }
.buy-row .btn { flex: 1 1 12rem; }

.stock-line {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--t-sm);
  margin-bottom: 1.25rem;
}

.stock-line::before {
  content: '';
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 999px;
  background: currentColor;
  flex: none;
}

.stock-line--ok   { color: var(--c-ok); }
.stock-line--low  { color: var(--c-warn); }
.stock-line--out  { color: var(--c-danger); }

.delivery-note {
  border-top: 1px solid var(--c-line);
  padding-top: 1.25rem;
  margin-top: 0.5rem;
  font-size: var(--t-sm);
  color: var(--c-ink-soft);
  display: grid;
  gap: 0.6rem;
}

.delivery-note li { display: flex; gap: 0.65rem; align-items: flex-start; }
.delivery-note svg { width: 1rem; height: 1rem; flex: none; margin-top: 0.25rem; color: var(--c-brand); }

/* — harmonika — */

.accordion { margin-top: 2.25rem; border-top: 1px solid var(--c-line); }

.accordion__item { border-bottom: 1px solid var(--c-line); }

/* Biljeg je bio dvije crtice složene `order`-om i negativnim marginama, pa
   je vodoravna crta sjedila desno od okomite umjesto preko nje — plus koji
   nije plus. Sada je jedan kvadratić s dva pozadinska preljeva: vodoravna
   crta ostaje, okomita se pri otvaranju stisne na nulu. */

.accordion__item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  transition: color var(--t-fast) var(--ease);
}

.accordion__item > summary::-webkit-details-marker { display: none; }
.accordion__item > summary::marker { content: ''; }

.accordion__item > summary:hover { color: var(--c-brand); }
.accordion__item > summary:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 3px; }

.accordion__item > summary::after {
  content: '';
  flex: none;
  width: 0.8rem;
  height: 0.8rem;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1px 100% no-repeat;
  transition: background-size var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}

.accordion__item[open] > summary::after {
  background-size: 100% 1px, 1px 0;
  transform: rotate(180deg);
}

/* Otvaranje je nativno (details/summary), bez animacije: `site.js` akordeon ne
   dodiruje, a visinu i razmak drži sadržaj — preglednik ih pokaže odjednom. */
.accordion__body { padding-bottom: 1.5rem; color: var(--c-ink-soft); font-size: var(--t-sm); }
.accordion__body ul { display: grid; gap: 0.5rem; }
.accordion__body li { padding-left: 1rem; position: relative; }
.accordion__body li::before { content: '—'; position: absolute; left: 0; color: var(--c-line-strong); }

/* — materijal i svojstva (torba) — */

/* Gornjeg obruba nema namjerno: zadnja stavka harmonike iznad već nosi donju
   crtu, a druga crta u istom ritmu čitala bi se kao prazan redak harmonike. */

.pdp-material { margin-top: 2.25rem; }

.pdp-material__title {
  font-family: var(--f-sans);
  font-size: var(--t-xs);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
}

/* Svojstva su sadržaj odjeljka, pa idu punom bojom i osnovnom veličinom;
   tehnička specifikacija ispod njih je potvrda i ostaje prigušena. */

.pdp-material__list {
  margin-top: 0.9rem;
  display: grid;
  gap: 0.5rem;
  font-size: var(--t-base);
}

.pdp-material__list li { padding-left: 1rem; position: relative; }
.pdp-material__list li::before { content: '—'; position: absolute; left: 0; color: var(--c-line-strong); }

.pdp-material__tech { margin-top: 1.5rem; border-top: 1px solid var(--c-line); }

/* — ljepljiva traka za kupnju na mobilnom — */

.buy-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 80;
  background: color-mix(in srgb, var(--c-cream) 94%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--c-line);
  padding: 0.75rem var(--gutter) calc(0.75rem + env(safe-area-inset-bottom));
  transform: translateY(110%);
  transition: transform var(--t-mid) var(--ease-out-soft);
  display: flex;
  align-items: center;
  gap: 1rem;
}

.buy-bar.is-visible { transform: translateY(0); }

.buy-bar__info { min-width: 0; flex: 1; }
.buy-bar__name {
  font-size: var(--t-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.buy-bar__price { font-size: var(--t-xs); color: var(--c-ink-soft); }
.buy-bar .btn { flex: 0 0 auto; }

@media (min-width: 62em) { .buy-bar { display: none; } }

/* ═════════════════════════════════════════════════════════════ 21. košarica */

.cart-line {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 1rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--c-line);
}

@media (min-width: 48em) {
  .cart-line { grid-template-columns: 7rem 1fr auto; gap: 1.5rem; align-items: start; }
}

.cart-line__media { aspect-ratio: 4 / 5; overflow: hidden; background: var(--c-shell); }
.cart-line__media img { width: 100%; height: 100%; object-fit: cover; }

.cart-line__name { font-size: var(--t-base); margin-bottom: 0.3rem; }
.cart-line__variant { font-size: var(--t-sm); color: var(--c-ink-soft); margin-bottom: 0.75rem; }

/* Komad po komad — samo kod kompleta s različitim veličinama. Uvučeno i
   sitnije od retka iznad: to je razrada odabira, a ne drugi podatak. */
.cart-line__parts {
  list-style: none;
  margin: -0.5rem 0 0.75rem;
  padding: 0 0 0 0.75rem;
  border-left: 2px solid var(--c-line);
  font-size: var(--t-sm);
  color: var(--c-ink-soft);
}
.cart-line__parts li { margin: 0.15rem 0; }
.cart-line__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.cart-line__price { font-size: var(--t-sm); }
.cart-line__total { font-size: var(--t-base); text-align: right; white-space: nowrap; }

.cart-line .qty button { min-height: 2.5rem; width: 2.25rem; }
.cart-line .qty input { width: 2.5rem; }

.link-remove {
  border: 0;
  background: none;
  padding: 0;
  font-size: var(--t-xs);
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--c-ink-soft);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.link-remove:hover { color: var(--c-danger); }

.totals { display: grid; gap: 0.85rem; }

.totals__row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: var(--t-sm);
  color: var(--c-ink-soft);
}

.totals__row--grand {
  border-top: 1px solid var(--c-line);
  padding-top: 1rem;
  margin-top: 0.35rem;
  font-size: var(--t-md);
  color: var(--c-ink);
  align-items: baseline;
}

/*
 * PDV je napomena UZ ukupan iznos, ne stavka koja mu se pribraja: stoji ispod
 * iznosa, sitno i tiho, poravnat s njim po desnom rubu.
 */
.totals__grand {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2rem;
  text-align: end;
}

.totals__vat {
  font-size: var(--t-xs);
  color: var(--c-ink-soft);
  font-weight: 400;
}

.summary-box {
  background: var(--c-shell);
  padding: clamp(1.5rem, 1rem + 2vw, 2rem);
  border: 1px solid var(--c-line);
}

/* — promotivni kod u sažetku naplate — */

/* Redak artikla iznad već nosi donju crtu — druga crta bi bila dvostruka. */
.promo-code { margin-top: 1.25rem; }

.promo-code__row {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}

.promo-code__row .input {
  flex: 1 1 auto;
  min-width: 0;
  text-transform: uppercase;
  letter-spacing: var(--track-mid);
}

.promo-code__row .btn { flex: 0 0 auto; min-height: 3.25rem; }

.promo-code__applied {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem 1rem;
  margin: 0;
  font-size: var(--t-sm);
}

/* Popust je oduzimanje, ne stavka: isti ton kao ostali redci, bez boje „akcije”. */
.totals__row--discount { color: var(--c-ink); }

.cart-layout { display: grid; gap: 2.5rem; align-items: start; }

@media (min-width: 62em) {
  .cart-layout { grid-template-columns: 1fr 22rem; gap: 4rem; }
  .cart-layout__aside { position: sticky; top: calc(var(--header-h) + 2rem); }
}

/* — ladica košarice — */

.cart-drawer__lines { display: grid; }
.cart-drawer .cart-line { grid-template-columns: 4.5rem 1fr; gap: 0.85rem; }

/* ═══════════════════════════════════════════════════════════ 22. naplata */

.checkout { display: grid; gap: 2.5rem; align-items: start; padding-block: 2rem clamp(3rem, 2rem + 4vw, 5rem); }

@media (min-width: 62em) {
  .checkout { grid-template-columns: minmax(0, 1fr) 23rem; gap: 4rem; }
  .checkout__aside { position: sticky; top: calc(var(--header-h) + 2rem); }
}

.checkout__step { margin-bottom: 2.75rem; }

/*
 * Prijelaz između koraka naplate.
 *
 * Sedam koraka živi u JEDNOM obrascu i izmjenjuju se atributom `hidden`, pa
 * bez animacije sadržaj naprosto TREPNE u nešto drugo — na dugom koraku
 * (adresa) izgleda kao da se stranica ponovno učitala. Klizanje u stranu daje
 * smjer: naprijed dolazi zdesna, natrag slijeva, isto kako se kreće i traka
 * napretka.
 *
 * Animira se SAMO ULAZ. Izlaz bi tražio da stari korak ostane u dokumentu dok
 * ne odklizi, a on nosi polja obrasca — dva vidljiva `name="ime"` u istom
 * trenutku su rizik koji ukras ne vrijedi.
 *
 * Ne animira se kad:
 *   — provjera zaustavi korak (`show()` se tada uopće ne pozove),
 *   — se stranica tek otvorila na `?korak=N` nakon osvježavanja iznosa; to je
 *     puno učitavanje, a ne prijelaz, pa bi klizanje lagalo o tome što se
 *     dogodilo,
 *   — kupac traži manje pokreta (`prefers-reduced-motion`) — pokriva ga i
 *     općeniti blok na dnu ove datoteke, ali `site.js` tada i ne dodaje razred.
 */
@keyframes step-in-fwd {
  from { opacity: 0; transform: translate3d(1.5rem, 0, 0); }
  to   { opacity: 1; transform: none; }
}

@keyframes step-in-back {
  from { opacity: 0; transform: translate3d(-1.5rem, 0, 0); }
  to   { opacity: 1; transform: none; }
}

.checkout__step--in-fwd  { animation: step-in-fwd  var(--t-mid) var(--ease-out-soft) both; }
.checkout__step--in-back { animation: step-in-back var(--t-mid) var(--ease-out-soft) both; }

.checkout__step-head {
  /* Skok na korak inače završi s naslovom ispod ljepljivog zaglavlja. */
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  margin-bottom: 1.5rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--c-line);
}

.checkout__step-num {
  font-family: var(--f-display);
  font-size: 1.35rem;
  color: var(--c-brand);
  line-height: 1;
}

.checkout__step-head h2 { font-size: var(--t-lg); }

/* — traka napretka —

   `hidden` u HTML-u, otkriva je tek skripta: bez koraka je popis brojeva bez
   značenja, a bez skripte koraka nema. */

.steps-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  margin: 0 0 2.5rem;
  padding: 0 0 1.25rem;
  border-bottom: 1px solid var(--c-line);
  list-style: none;
  counter-reset: none;
}

.steps-rail__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.6rem;
  font-size: var(--t-xs);
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--c-ink-soft);
  opacity: 0.5;
  transition: opacity var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.steps-rail__item.is-reachable { opacity: 1; cursor: pointer; }
.steps-rail__item.is-reachable:hover { color: var(--c-ink); }
.steps-rail__item.is-current { color: var(--c-ink); opacity: 1; }

.steps-rail__num {
  display: grid;
  place-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.7rem;
  letter-spacing: 0;
  /* Brojka koja skoči iz obrisa u ispunu bez prijelaza izgleda kao druga
     traka, a ne kao ista koja je uznapredovala. Ide zajedno s panelom. */
  transition: background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}

.steps-rail__item.is-current .steps-rail__num { background: var(--c-ink); color: var(--c-cream); border-color: var(--c-ink); }

/* Prijeđen korak nosi kvačicu umjesto broja — broj koji je već iza ne govori
   ništa, a kvačica kaže „ovo je gotovo”. */
.steps-rail__item.is-done .steps-rail__num { font-size: 0; }
.steps-rail__item.is-done .steps-rail__num::after {
  content: '';
  width: 0.6rem;
  height: 0.6rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5.2l3.2 3.2L11 1.6' fill='none' stroke='%237A605A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Na uskom zaslonu se pokazuje samo trenutni korak — sedam naljepnica u
   dva reda pojede pola prvog zaslona naplate. */
@media (max-width: 47.99em) {
  .steps-rail__item:not(.is-current) .steps-rail__label { display: none; }
}

/* — kretanje kroz korake — */

.step__lead { margin-bottom: 1.5rem; color: var(--c-ink-soft); font-size: var(--t-sm); }

.step__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.step__nav [data-step-next] { margin-left: auto; }

/* Na zadnjem koraku je „Naruči” glavna radnja i ide PRVI, iako je u HTML-u
   drugi: `order` ga diže, a redoslijed tabulatora ostaje logičan (natrag pa
   naprijed). Prije je „Natrag” stajao preko cijele širine iznad gumba za
   narudžbu i izgledao kao glavna radnja. */
.step__nav--final { display: grid; gap: 0.75rem; margin-top: 2rem; }
.step__nav--final [type='submit'] { order: -1; }
.step__nav--final [data-step-prev] { justify-self: center; border: 0; text-decoration: underline; text-underline-offset: 3px; }
.step__nav--final [data-step-prev]:hover { --btn-bg: transparent; --btn-fg: var(--c-ink); }

@media (min-width: 40em) {
  .field-row--street { grid-template-columns: 1fr 8rem; }
}

/* — sažetak prije potvrde — */

.recap {
  display: grid;
  gap: 0;
  margin: 0 0 2rem;
  border-top: 1px solid var(--c-line);
}

.recap dt {
  padding: 0.9rem 0 0.2rem;
  font-size: var(--t-xs);
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--c-ink-soft);
}

.recap dd {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin: 0;
  padding: 0 0 0.9rem;
  border-bottom: 1px solid var(--c-line);
  font-size: var(--t-sm);
  /* Napomena kupca zna biti dugačka i mora se prelomiti, ne izgurati okvir. */
  overflow-wrap: anywhere;
}

.recap__edit {
  flex: none;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: var(--t-xs);
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--c-ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease);
}

.recap__edit:hover { color: var(--c-ink); }
.recap__edit:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 2px; }

.choice { display: grid; gap: 0.75rem; }

.choice__item { position: relative; }

.choice__item input {
  position: absolute;
  top: 1.35rem;
  left: 1.25rem;
  z-index: 1;
}

.choice__face {
  display: block;
  padding: 1.15rem 1.25rem 1.15rem 3.35rem;
  border: 1px solid var(--c-line-strong);
  background: var(--c-surface);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.choice__item input:checked + .choice__face {
  border-color: var(--c-ink);
  box-shadow: inset 0 0 0 1px var(--c-ink);
}

.choice__item input:focus-visible + .choice__face { outline: 2px solid var(--c-ink); outline-offset: 2px; }

.choice__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  font-size: var(--t-base);
  margin-bottom: 0.3rem;
}

.choice__price { font-size: var(--t-sm); white-space: nowrap; }
.choice__desc { font-size: var(--t-sm); color: var(--c-ink-soft); }
.choice__extra { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--c-line); }

/* — odabir paketomata — */

.locker-picker { display: grid; gap: 0.85rem; }

.locker-card {
  display: grid;
  gap: 0.35rem;
  padding: 1rem 1.15rem;
  background: var(--c-shell);
  border: 1px solid var(--c-line);
  font-size: var(--t-sm);
}

.locker-card__name { font-size: var(--t-base); }
.locker-card__addr { color: var(--c-ink-soft); }
.locker-card__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.6rem; }

.locker-modal { border: 0; padding: 0; background: transparent; max-width: none; width: 100%; }
.locker-modal::backdrop { background: rgba(42, 27, 18, 0.55); }

.locker-modal__panel {
  width: min(64rem, 100vw);
  height: min(44rem, 100svh);
  margin-inline: auto;
  background: var(--c-surface);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.locker-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--c-line);
}

/*
 * Okvir karte slaže sam BOX NOW učitavač i ubacuje ga u ovaj spremnik, pa
 * pravilo hvata dijete, a ne element koji bi bio u našem HTML-u.
 * `min-height: 0` je nužan: bez njega flex stavka ne smije biti niža od
 * sadržaja, a okvir visine 100% nema o čemu računati postotak.
 */
.locker-modal__map { flex: 1; min-height: 0; display: flex; }
.locker-modal__map > iframe { flex: 1; border: 0; width: 100%; height: 100%; }

@media (max-width: 47.99em) {
  .locker-modal__panel { width: 100vw; height: 100svh; }
}

/* ══════════════════════════════════════════════ modal vodiča veličina */

/*
 * Drugi prikaz istog sadržaja koji stoji na /vodic-za-velicine: nativni
 * dijalog kao birač paketomata, ploča sa svojim pomicanjem. Na uskom
 * zaslonu ploča je list od ruba do ruba, a sadržaj drži svoj rub kroz
 * padding tijela. Tablica unutra klizi vodoravno kao i na stranici.
 */
.size-guide-modal { border: 0; padding: 0; background: transparent; max-width: none; width: 100%; }
.size-guide-modal::backdrop { background: rgba(42, 27, 18, 0.55); }

.size-guide-modal__panel {
  width: min(40rem, 100vw);
  max-height: min(44rem, 100svh);
  margin-inline: auto;
  background: var(--c-surface);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.size-guide-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--c-line);
}

.size-guide-modal__title { margin: 0; font-size: var(--t-lg); }

.size-guide-modal__close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--c-line);
  background: transparent;
  color: var(--c-ink);
  cursor: pointer;
}

.size-guide-modal__close:hover { background: var(--c-shell); }
.size-guide-modal__close svg { display: block; }

.size-guide-modal__body {
  overflow-y: auto;
  padding: 1.25rem;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 47.99em) {
  .size-guide-modal__panel { width: 100vw; max-height: 100svh; }
}

/* Slika modela uz „Kako izmjeriti” — ispod teksta, nikad umjesto njega.
   Dimenzije su u atributima `width` / `height` (izmjerene iz datoteke),
   pa `height: auto` drži omjer i bez pomicanja izgleda pri učitavanju. */
.size-guide__figure { margin: 1.25rem 0 0; }
.size-guide__figure img { display: block; max-width: 100%; height: auto; }

/* ══════════════════════════════════════════════════════ 23. potvrda i status */

.confirm { max-width: 44rem; padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }

.confirm__mark {
  width: 3.25rem;
  height: 3.25rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--c-line-strong);
  border-radius: 999px;
  margin-bottom: 1.75rem;
}

.confirm__mark svg { width: 1.25rem; height: 1.25rem; color: var(--c-ok); }

.confirm__ref {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 1.25rem 0 2rem;
  padding: 0.75rem 1.1rem;
  background: var(--c-shell);
  border: 1px solid var(--c-line);
  font-size: var(--t-base);
  letter-spacing: 0.06em;
}

.confirm__ref span { font-size: var(--t-xs); letter-spacing: var(--track-mid); text-transform: uppercase; color: var(--c-ink-soft); }

/* Napomena uz odabir varijante — npr. da set dolazi u jednoj veličini. */
.option-note {
  margin: -0.5rem 0 1.5rem;
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--c-ink-soft);
}

/* Demo korak plaćanja: tri ishoda, svaki vlastiti obrazac. Gumbi su u stupcu
   i pune širinu, pa se na telefonu ne stisnu jedan uz drugi. */
.pay-demo {
  display: grid;
  gap: 0.6rem;
  max-width: 22rem;
  margin: 2rem 0 0;
}

.pay-demo__note {
  max-width: 40ch;
  margin-top: 1.75rem;
  font-size: var(--t-sm);
  color: var(--c-ink-soft);
}

.data-list { display: grid; gap: 1.5rem; }

@media (min-width: 40em) { .data-list--2 { grid-template-columns: repeat(2, 1fr); } }

.data-list dt {
  font-size: var(--t-xs);
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--c-ink-soft);
  margin-bottom: 0.4rem;
}

.data-list dd { margin: 0; font-size: var(--t-sm); line-height: 1.6; }

.timeline { display: grid; gap: 0; border-left: 1px solid var(--c-line); padding-left: 1.5rem; }

.timeline li { position: relative; padding-bottom: 1.5rem; }
.timeline li:last-child { padding-bottom: 0; }

.timeline li::before {
  content: '';
  position: absolute;
  left: -1.8rem;
  top: 0.45rem;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: var(--c-line-strong);
}

.timeline li:first-child::before { background: var(--c-brand); }
.timeline__label { font-size: var(--t-sm); }
.timeline__time { font-size: var(--t-xs); color: var(--c-ink-soft); letter-spacing: 0.02em; }

/* ═══════════════════════════════════════════════════════ 24. tekstualne stranice */

.legal { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) clamp(4rem, 2rem + 5vw, 7rem); }

.legal__body { max-width: 42rem; }
.legal__body h2 { font-size: var(--t-lg); margin: 2.75rem 0 1rem; }
.legal__body h2:first-child { margin-top: 0; }
.legal__body h3 { font-family: var(--f-sans); font-size: var(--t-base); font-weight: 500; letter-spacing: 0; margin: 1.75rem 0 0.6rem; }
.legal__body p, .legal__body li { color: var(--c-ink-soft); }
.legal__body ul { display: grid; gap: 0.55rem; margin: 0 0 1em; }
.legal__body ul li { padding-left: 1.15rem; position: relative; }
.legal__body ul li::before { content: '—'; position: absolute; left: 0; color: var(--c-line-strong); }
.legal__body a { text-decoration: underline; text-underline-offset: 3px; }
/* Oznaka izrade stoji ISPOD povezanih dokumenata, odvojeno od zakonskih
   podataka: nije dio tablice prodavatelja i ne pripada niti jednom
   odjeljku. Vidi `templates/impressum.php`. Boju NE postavlja: ton daje
   `.legal__body p` (--c-ink-soft, 4,96:1), a tonovi `--fc-*` postoje samo
   na tamnoj plohi podnožja i na svijetloj bi stranici bili nečitljivi. */
.legal__by { margin-top: 3rem; font-size: var(--t-sm); }
.legal__by a { color: inherit; }

.legal__toc {
  border: 1px solid var(--c-line);
  background: var(--c-shell);
  padding: 1.5rem;
  margin-bottom: 2.5rem;
}

.legal__toc ol { display: grid; gap: 0.5rem; counter-reset: toc; }
.legal__toc li { counter-increment: toc; font-size: var(--t-sm); }

/* Harmonika unutar pravne/pomoćne stranice. Ista komponenta kao na stranici
   proizvoda, samo bez gornjeg obruba prvog elementa — zaglavlje odjeljka već
   nosi crtu. */
.accordion--faq { margin: 0 0 2.5rem; }
.accordion--faq .accordion__body p:last-child,
.accordion--faq .accordion__body ul:last-child { margin-bottom: 0; }

/* Dostupne veličine kao niz oznaka. Nije tablica: tablica bez mjera obećava
   stupce kojih nema. */
.size-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}

.size-chips li {
  min-width: 3.25rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--c-line-strong);
  text-align: center;
  font-size: var(--t-sm);
  letter-spacing: var(--track-mid);
}
.legal__toc li::before { content: counter(toc) '. '; color: var(--c-ink-soft); }
.legal__toc a { text-decoration: underline; text-underline-offset: 3px; }

.table-wrap { overflow-x: auto; margin-bottom: 1.5rem; -webkit-overflow-scrolling: touch; }

.table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); min-width: 32rem; }
.table th, .table td { text-align: left; padding: 0.85rem 1rem 0.85rem 0; border-bottom: 1px solid var(--c-line); vertical-align: top; }
.table th { font-size: var(--t-xs); letter-spacing: var(--track-mid); text-transform: uppercase; color: var(--c-ink-soft); font-weight: 500; }
.table td { color: var(--c-ink-soft); }

/* ── Tablica „oznaka → vrijednost” na uskom zaslonu ────────────────────────
   Impressum, dostava i vodič veličina koriste `.table` s dva stupca. Na 390 px
   je `min-width: 32rem` gurao tablicu u vodoravni klizač, a fiksni stupac
   oznake (16rem) ostavljao je vrijednosti stotinjak piksela — pravni naziv i
   adresa e-pošte odsijecali su se na pola. Vodoravni klizač na Impressumu
   nitko ne traži jer stranica ne izgleda kao da se ima kamo pomaknuti.

   Ispod 46em redak postaje blok: oznaka iznad, vrijednost ispod, cijela
   širina. Semantika ostaje (`<table>`, `th scope="row"`) — mijenja se samo
   `display`, isto pravilo kao `.tbl--rows` u administraciji.

   Vrijedi SAMO za tablice s dva stupca (bez `<thead>`). Tablica dostave ima
   zaglavlje i tri stupca; njoj klizač i dalje ima smisla. */
@media (max-width: 46em) {
  .legal .table:not(:has(thead)) { min-width: 0; }

  .legal .table:not(:has(thead)) tr {
    display: block;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--c-line);
  }

  .legal .table:not(:has(thead)) th,
  .legal .table:not(:has(thead)) td {
    display: block;
    width: auto !important;
    padding: 0;
    border: 0;
  }

  .legal .table:not(:has(thead)) th { margin-bottom: 0.3rem; }

  /* Duga adresa e-pošte se lomi umjesto da gura redak van zaslona. */
  .legal .table:not(:has(thead)) td { overflow-wrap: anywhere; }
}

/* ══════════════════════════════════════════════════════════════ 25. 404 */

.page-404 {
  min-height: 60svh;
  display: grid;
  place-content: center;
  text-align: center;
  padding-block: var(--section);
}

.page-404 h1 { font-size: var(--t-2xl); margin-bottom: 1rem; }
.page-404 p { color: var(--c-ink-soft); margin-bottom: 2rem; max-width: 34ch; margin-inline: auto; }
.page-404__links { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }

/* ════════════════════════════════════════════════════════════ 26. obavijest */

.toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translate(-50%, 1rem);
  /* Iznad ladice — potvrda „Dodano u košaricu” mora ostati vidljiva. */
  z-index: 170;
  max-width: calc(100vw - 2rem);
  padding: 0.9rem 1.35rem;
  background: var(--c-ink);
  color: var(--c-cream);
  font-size: var(--t-sm);
  opacity: 0;
  transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease-out-soft);
}

.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ── Podatak koji klijentica još nije dala ─────────────────────────────────
   Vidljiv, ali tih. Ranije je bio žuti <mark> i na Impressumu ih je bilo pet,
   pa je stranica izgledala kao nedovršen radni dokument. Puni opis onoga što
   nedostaje stoji u `title`. */
.pending {
  font-size: 0.86em;
  font-style: italic;
  color: var(--c-ink-soft);
  border-bottom: 1px dotted var(--c-line-strong);
  cursor: help;
  white-space: nowrap;
}

/* ── Prekidač jezika ──────────────────────────────────────────────────────
 *
 * Gumb nosi zastavicu trenutnog jezika i malu strelicu; klik otvara popis
 * oba jezika sa zastavicom i nazivom. Ploča je `<details>` (`data-langdrop`)
 * i otvara se sama, bez skripte — skripta dodaje samo zatvaranje klikom
 * izvan i tipkom Esc, isto kao izbornicima u podnožju.
 *
 * Do 15. 9. 2026. je gumb nosio dvoslovnu oznaku („EN”/„HR”); zastavice su
 * uvedene na zahtjev vlasnika projekta. Zastavica je oznaka jezika, ne
 * odabir države — u popisu uvijek stoji uz naziv jezika.
 */
.lang-switch { position: relative; }

/* Zastavica, bez obruba (uklonjen 15. 9. 2026. na zahtjev vlasnika
   projekta): oblik zastave nose pruge i štit, ne rub. */
.flag {
  display: block;
  width: 1.4rem;
  height: auto;
  flex: none;
}

.icon-btn--lang {
  gap: 0.15rem;
}

.icon-btn--lang .flag { width: 1.3rem; }

.lang-switch__caret {
  width: 0.6rem;
  height: 0.6rem;
  flex: none;
  color: var(--c-ink-soft);
  transition: transform var(--t-fast) var(--ease);
}

.lang-switch__details[open] .lang-switch__caret { transform: rotate(180deg); }

/* Preglednik crta uz summary vlastiti trokut; miče se jer je zamijenjen
   strelicom koja se okreće sa stanjem ploče. */
.lang-switch summary { list-style: none; }
.lang-switch summary::-webkit-details-marker { display: none; }

.lang-switch__list {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  min-width: 12.5rem;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  box-shadow: 0 12px 34px rgba(42, 27, 18, 0.16);
}

.lang-switch__item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 0.65rem;
  font-size: var(--t-sm);
  color: var(--c-ink);
  text-decoration: none;
}

.lang-switch__item:hover,
.lang-switch__item:focus-visible { background: var(--c-shell); }

.lang-switch__name { flex: 1; }

.lang-switch__check {
  width: 0.9rem;
  height: 0.9rem;
  flex: none;
  color: var(--c-ink-soft);
}

.lang-switch__item.is-current { font-weight: 600; }

/* ═══════════════════════════════════════ 27. traka obavijesti i pretraga u zaglavlju */

/* ── Traka obavijesti ──────────────────────────────────────────────────────
 *
 * Poslužitelj ispisuje JEDAN skup poruka u `.announce__set`; `site.js`
 * klonira skupove dok ne pokriju širinu trake, postavi `--announce-shift`
 * (širina JEDNOG skupa) i `--announce-duration`, pa dodá `.is-animating`.
 * Bez te klase — nema skripte ili je uključen `prefers-reduced-motion` —
 * traka ostaje nepomičan, po sredini složen sadržaj koji se prelama u
 * retke; točka nije razdjelnik i skrivena je, a skupine razmiče razmak.
 *
 * U pokretu svaka poruka nosi vlastitu točku-razdjelnik, pa je razmak
 * jednak i ondje gdje se skupovi nastavljaju jedan na drugi — bez toga bi
 * se na mjestu klona vidjela stepenica.
 */

.announce__track {
  display: flex;
}

.announce__set {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.announce__group {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.announce__dot {
  margin-inline: 0.625rem;
}

.announce__link {
  color: inherit;
}

.announce__link:hover,
.announce__link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.announce:not(.is-animating) .announce__dot {
  display: none;
}

.announce:not(.is-animating) .announce__group + .announce__group {
  margin-inline-start: 1.25rem;
}

.announce.is-animating {
  overflow: hidden;
}

.announce.is-animating .announce__set {
  flex-wrap: nowrap;
  justify-content: flex-start;
}

.announce.is-animating .announce__track {
  width: max-content;
  animation: announce-scroll var(--announce-duration, 30s) linear infinite;
  will-change: transform;
}

/* Zaustavljanje nad čitljivošću: pokret staje dok je pokazivač nad trakom
   ili dok je poveznica u njoj na fokusu. */
.announce.is-animating:hover .announce__track,
.announce.is-animating:focus-within .announce__track {
  animation-play-state: paused;
}

@keyframes announce-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--announce-shift, -100%)); }
}

@media (prefers-reduced-motion: reduce) {
  /* Globalna pravila samo skrate trajanje; ovdje se pokret gasi u potpunosti
     i kad bi ga skripta ipak uključila (starija inačica skripte ili
     prekidač koji se promijenio usred rada). */
  .announce.is-animating .announce__track { animation: none; }
}

/* ── Ploča pretrage u zaglavlju ──────────────────────────────────────────── */

.header-search {
  position: absolute;
  top: 100%;
  inset-inline: 0;
  z-index: 5;
  background: var(--c-cream);
  border-bottom: 1px solid var(--c-line);
  box-shadow: 0 1.25rem 2.75rem -2rem rgb(0 0 0 / 0.5);
  padding-block: 0.625rem 0.75rem;

  /* Ploča se spušta ispod zaglavlja i pojavljuje, ne iskače. Početno stanje
     vrijedi samo dok ploča nije otvorena; `is-open` postavlja i skida
     `site.js`. Bez skripte ploča se nikad ne otvara (povećalo je obična
     poveznica), pa ovo stanje nikoga ne skriva. */
  opacity: 0;
  transform: translateY(-0.375rem);
  pointer-events: none;
  transition:
    opacity 200ms var(--ease),
    transform 260ms var(--ease);
}

.header-search.is-open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.header-search__form {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Crta ispod polja se razvuče s lijeva kad se ploča otvori: jedan mali
   pokret koji kaže gdje se piše, bez ikakvog drugog ukrasa. */
.header-search__form::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: -0.3rem;
  height: 1px;
  background: var(--c-ink);
  opacity: 0.35;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 420ms var(--ease) 60ms;
}

.header-search.is-open .header-search__form::after {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  /* Ostaje samo kratko pojavljivanje: bez pomaka i bez crte koja putuje. */
  .header-search { transform: none; transition: opacity 120ms linear; }
  .header-search__form::after { transition: none; }
}

.header-search__icon {
  flex: none;
  display: inline-flex;
  color: var(--c-ink-soft);
}

.header-search__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.header-search__input {
  flex: 1 1 auto;
  min-width: 0;
}

.header-search__close {
  flex: none;
}

.header-search__list {
  margin: 0.375rem 0 0;
  padding: 0;
  list-style: none;
  max-height: min(60vh, 22rem);
  overflow-y: auto;
}

.header-search__item {
  margin: 0;
}

.header-search__link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.25rem;
  color: var(--c-ink);
}

.header-search__link:hover,
.header-search__item.is-active .header-search__link {
  background: color-mix(in srgb, var(--c-ivory) 55%, transparent);
}

.header-search__thumb {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  object-fit: cover;
  background: var(--c-shell);
}

.header-search__text {
  flex: 1 1 auto;
  min-width: 0;
}

.header-search__name,
.header-search__meta {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-search__name {
  font-size: var(--t-s);
  line-height: 1.3;
}

.header-search__meta {
  margin-top: 0.1rem;
  font-size: var(--t-xs);
  line-height: 1.3;
  color: var(--c-ink-soft);
}

.header-search__all {
  border-top: 1px solid var(--c-line);
}

.header-search__hint {
  margin: 0.375rem 0 0;
  font-size: var(--t-s);
  color: var(--c-ink-soft);
}

/* ── „O brendu”: službena linija i pločice načela ────────────────────────── */

/*
 * `.story-line` ističe službenu izjavu brenda kao samostojeći redak u
 * uredničkom pojasu: „Beyond the workout.”, „Designed for confidence.” i
 * „LÁKRIS — activewear made for more.” (srednja crtica ondje je dio
 * službenog izraza, ne vezni znak). Riječi su na engleskom na oba jezika
 * stranice, kao i stupovi u pločicama ispod — isto pravilo kao naziv
 * „Activewear” na naslovnoj.
 */
.story-line {
  font-family: var(--f-display);
  font-size: var(--t-xl);
  font-weight: 300;
  line-height: 1.2;
  color: var(--c-ink);
  text-wrap: balance;
  margin: 1.75rem 0 0;
}

/*
 * Četiri pločice načela kao jedna ploča: tanke linije razdjelnice nastaju iz
 * pozadine ploče (1 px razmaka između bijelih pločica). U jednom stupcu su
 * redovi, na 40em dva, na 75em četiri — pločice su kratke i na 75em stanu u
 * jedan redak, pa ne postoji stanje s dva retka po dva.
 */
.story-principles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--c-line);
}

@media (min-width: 40em) {
  .story-principles { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 75em) {
  .story-principles { grid-template-columns: repeat(4, 1fr); }
}

.story-tile {
  background: var(--c-surface);
  padding: clamp(1.5rem, 1.2rem + 1vw, 2rem);
}

.story-tile__word {
  font-family: var(--f-display);
  font-size: var(--t-lg);
  font-weight: 300;
  margin: 0 0 0.6rem;
}

.story-tile__gloss {
  color: var(--c-ink-soft);
  font-weight: 300;
  font-size: var(--t-md);
  margin: 0;
}