/*
Theme Name: ALPENIX Swiss Peptides
Theme URI: https://alpenix.ch
Author: D-A Web Dev
Description: Custom theme built from the ALPENIX static blueprint. Dark premium theme for research peptides. CMS: wordpress-local-v1
Version: 1.0.16
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: alpenix
Tags: dark, one-column, custom-menu, featured-images
*/

/* ===================================
   ALPENIX Global Stylesheet
   VERSION: 2.0 | MINIMAL REDESIGN
   Paleta: crna/bijela + crvena (akcija) + zlatna (premium mikro-akcenat)
   =================================== */

/* --- CSS Custom Properties (Design Tokens) --- */
:root {
  /* Colors */
  --color-bg-primary: #0B0B0B;
  --color-bg-secondary: #111111;
  --color-bg-tertiary: #1A1A1A;
  --color-surface: #141414;
  --color-surface-2: #101010;
  --color-text-primary: #FFFFFF;
  --color-text-secondary: #B4B4B4;
  --color-text-muted: #8A8A8A;
  --color-text-faint: #5F5F5F;
  --color-border: #262626;
  --color-border-soft: #1D1D1D;
  --color-hairline: #222222;

  /* Brand Colors — minimal paleta */
  --color-gold: #C8A456;
  --color-red: #D42828;
  --color-red-dark: #B11F1F;
  --color-swiss-red: #D42828;
  /* legacy alias-i (uklonjeni zelena/plava/ljubičasta) */
  --color-green: #D42828;
  --color-blue: #D42828;
  --color-purple: #C8A456;

  /* Typography */
  /* Typography — 'Urbanist' se učitava lokalno (inc/fonts.php, varijabilni 100-900).
     Fallback stack je NAMJERNO sistemski: font-display: swap znači da se tekst
     prvo iscrta fallbackom, pa zamijeni Urbanistom — bliske metrike = bez skoka. */
  --font-primary: 'Urbanist', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: 'Urbanist', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 6rem;

  /* Layout */
  --container-max: 1400px;
  --header-height: 76px;

  /* Radius & efekti */
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-lg: 12px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 400ms ease;
}

/* --- Reset & Base --- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-primary);
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Form controls ne nasljeduju font-family od roditelja, nego padaju na UA
   default (Arial). Bez ovoga: FAQ harmonika (.accordion-header) i gumbi
   cookie bannera/modal-a renderiraju se u Arialu umjesto u Urbanistu. */
button,
input,
select,
textarea {
  font-family: inherit;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

::selection {
  background: rgba(212, 40, 40, 0.85);
  color: #fff;
}

/* --- Container --- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-5);
}

@media (min-width: 768px) {
  .container { padding: 0 var(--space-8); }
}

@media (min-width: 1200px) {
  .container { padding: 0 var(--space-12); }
}

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 2.6vw, 1.6rem); }
h4 { font-size: clamp(1rem, 1.8vw, 1.15rem); }

p { font-size: clamp(0.9rem, 1.4vw, 1rem); color: var(--color-text-secondary); }

/* Kicker / mala etiketa iznad naslova */
.kicker,
.eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* --- Grid System --- */
.grid { display: grid; gap: var(--space-5); }

.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
/* grid--4: fiksan broj kolona (ne auto-fit) da kartice budu iste širine
   bez obzira na broj stavki u redu (manje grupe ostave prazan prostor).
   2 kolone vec na mobitelu (do 767px): /products/ je prije bio 1 kolona,
   pa se u prvi ekran nije vidjela nijedna cijela kartica; /shop/ je i
   prije imao 2 kolone (WooCommerce). Detalji: "MOBILNI KATALOG" nize. */
.grid--4 { grid-template-columns: repeat(2, 1fr); }
.grid--5 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

@media (min-width: 768px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* =========================================================
   DUGMAD — ultra-minimal
   P1 solid red (primarna) · ghost (sekundarna) · gold (premium)
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 26px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1;
  text-transform: none;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast),
              border-color var(--transition-fast), transform var(--transition-fast);
}

.btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}

.btn:hover svg { transform: translateX(3px); }

/* P1 — Solid red (primarna akcija) */
.btn--red {
  background: var(--color-red);
  border-color: var(--color-red);
  color: #FFFFFF;
}
.btn--red:hover {
  background: var(--color-red-dark);
  border-color: var(--color-red-dark);
  color: #FFFFFF;
}

/* P2 — Ghost / thin outline (sekundarna) */
.btn--ghost {
  background: transparent;
  border-color: #3A3A3A;
  color: #E8E8E8;
}
.btn--ghost:hover {
  background: rgba(212, 40, 40, 0.05);
  border-color: var(--color-red);
  color: var(--color-red);
}

/* P3 — Gold thin outline (premium moment) */
.btn--gold {
  background: transparent;
  border-color: var(--color-gold);
  color: var(--color-gold);
}
.btn--gold:hover {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: #0B0B0B;
}

/* Red outline (isti hover obrazac kao .btn--gold) */
.btn--outline-red {
  background: transparent;
  border-color: var(--color-red);
  color: var(--color-red);
}
.btn--outline-red:hover {
  background: var(--color-red);
  border-color: var(--color-red);
  color: #FFFFFF;
}

/* Solid gold (rijetko) */
.btn--solid-gold {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: #0B0B0B;
}
.btn--solid-gold:hover {
  background: transparent;
  color: var(--color-gold);
}

/* Text link (tercijarna akcija) */
.btn--text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 6px 2px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  color: #FFFFFF;
  cursor: pointer;
  position: relative;
}
.btn--text::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 0;
  height: 1px;
  background: var(--color-red);
  transition: width var(--transition-normal);
}
.btn--text:hover { color: var(--color-red); }
.btn--text:hover::after { width: 100%; }
.btn--text:hover svg { transform: translateX(3px); }
.btn--text svg { width: 15px; height: 15px; transition: transform var(--transition-fast); }

/* Legacy alias: zelena/plava -> crvena */
.btn--green,
.btn--blue {
  background: var(--color-red);
  border-color: var(--color-red);
  color: #FFFFFF;
}
.btn--green:hover,
.btn--blue:hover {
  background: var(--color-red-dark);
  border-color: var(--color-red-dark);
  color: #FFFFFF;
}

/* Veličine */
.btn--sm { padding: 10px 17px; font-size: 0.85rem; }
.btn--lg { padding: 17px 34px; font-size: 1.02rem; }
.btn--block { display: flex; width: 100%; }

/* =========================================================
   HEADER & NAV
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(11, 11, 11, 0.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border-soft);
  height: var(--header-height);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: var(--space-5);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
}

.brand svg { color: var(--color-red); } /* planina — crveni premium akcenat loga */

.brand-icon { width: 44px; height: auto; }

.brand-sub {
  display: block;
  font-size: 0.58rem;
  font-weight: 400;
  letter-spacing: 0.3em;
  color: var(--color-text-muted);
}

.nav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: none; /* obrub oko hamburgera uklonjen */
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  cursor: pointer;
}

/* ------------------------------------------------------------------
   HAMBURGER → X — ikona gradjena CSS-om (klijent 06.10.2026.)
   ------------------------------------------------------------------
   Tri crte kao tri <span>. Kad se meni otvori, gornja i donja se
   dovedu u sredinu i zakrenu na ±45°, a srednja nestane → X.
   `background: currentColor` znaci da crte prate boju gumba.

   Zasto CSS, a ne SVG: pravi „morph" trazi da se SVAKA crta moze
   pojedinacno transformirati. `<path>` iz SVG-a se bez SMIL/JS-a ne moze
   tako animirati; `<span>` s `transform` je compositor-friendly.
   ================================================================== */
.nav-toggle__bars {
  position: relative;
  display: block;
  width: 26px;
  height: 18px;
  /* Crte su pozicionirane apsolutno unutar ovog okvira; fiksna visina
     sprecava da gumb „skoci" dok se crte krecu. */
}

.nav-toggle__bars > span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  /* `top`/`margin` se animiraju kod spajanja u sredinu, `transform` kod
     rotacije. `cubic-bezier` s blagim prebacivanjem daje prirodan osjecaj
     (bez linearnog robotizma). */
  transition:
    top 240ms cubic-bezier(0.22, 0.7, 0.28, 1),
    transform 280ms cubic-bezier(0.22, 0.7, 0.28, 1),
    opacity 160ms ease,
    width 200ms cubic-bezier(0.22, 0.7, 0.28, 1);
}

.nav-toggle__bars > span:nth-child(1) { top: 0; }
.nav-toggle__bars > span:nth-child(2) { top: 8px; }
.nav-toggle__bars > span:nth-child(3) { top: 16px; }

/* --- OTVORENO: X --- */
html.apx-menu-open .nav-toggle__bars > span:nth-child(1) {
  top: 8px;
  transform: rotate(45deg);
}
html.apx-menu-open .nav-toggle__bars > span:nth-child(2) {
  opacity: 0;
  /* kratimo je prema sredini da ne „iskoči" iz X-a */
  width: 0;
  transform: translateX(13px);
}
html.apx-menu-open .nav-toggle__bars > span:nth-child(3) {
  top: 8px;
  transform: rotate(-45deg);
}

/* ------------------------------------------------------------------
   KOŠARICA U HEADERU — vidljiva samo na mobilnom/tabletu i samo kad
   košarica NIJE prazna (klijent 06.10.2026.).
   Na desktopu je skrivena jer je tamo košarica ionako u vodoravnom meniju.
   ================================================================== */
.apx-header-cart {
  display: none;
}

/* „Pop" kad se broj artikala poveca (dodaje JS u footer.php preko
   `MutationObserver`-a jer WooCommerce fragmenti samo zamijene HTML).
   Kratko povecanje + prsten koji izlazi → kupac dobije potvrdu da je
   artikl dodan i kad je skrolan daleko od košarice.
   `transform` je na slotu, a ne na gumbu, da animacija ne pomice layout. */
@keyframes apxCartPop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

.apx-header-cart {
  position: relative;
}

.apx-header-cart.apx-cart-pop {
  animation: apxCartPop 460ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Prsten koji izlazi iz gumba — dodatni sloj, sam se ugasi. */
.apx-header-cart.apx-cart-pop::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-sm);
  border: 2px solid var(--color-red);
  animation: apxCartRing 600ms ease-out forwards;
  pointer-events: none;
}

@keyframes apxCartRing {
  0%   { opacity: 0.85; transform: scale(0.9); }
  100% { opacity: 0; transform: scale(1.35); }
}

/* Pristupačnost: bez animacije kad korisnik trazi smanjenu. */
@media (prefers-reduced-motion: reduce) {
  .apx-header-cart.apx-cart-pop { animation: none; }
  .apx-header-cart.apx-cart-pop::after { display: none; }
}

/* --- Navigation --- */
.nav-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  position: absolute;
  top: var(--header-height);
  left: 0;
  right: 0;
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-5);
  gap: var(--space-2);
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-normal);
}

.nav-list.is-open { max-height: 640px; }

@media (min-width: 1024px) {
  .nav-toggle { display: none; }
  .nav-list {
    position: static;
    flex-direction: row;
    background: transparent;
    border: none;
    padding: 0;
    max-height: none;
    overflow: visible;
    gap: var(--space-5);
  }
}

.nav-item > a {
  display: block;
  padding: var(--space-2) 0;
  font-size: 0.86rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--color-text-secondary);
}

@media (min-width: 1024px) {
  .nav-item > a { padding: var(--space-3) var(--space-2); }
}

.nav-item > a:hover { color: var(--color-red); }

.nav-item > a[aria-current="page"] {
  color: var(--color-red);
  font-weight: 600;
}

/* Language */
.nav-lang { display: flex; align-items: center; }

.lang-trigger {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  padding: var(--space-2) var(--space-3);
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.lang-trigger:hover { color: var(--color-red); }

/* Submenu se sirina prema najduzoj stavci + zadani padding,
   bez fiksne minimalne sirine. */
.lang-menu { min-width: 0; width: max-content; }

.lang-menu .lang-link {
  display: block;
  padding: var(--space-2) var(--space-5);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  border: none;
  border-radius: 0;
}

.lang-menu .lang-link:hover {
  color: var(--color-red);
  background: rgba(212, 40, 40, 0.06);
}

.lang-menu .lang-link.is-active {
  color: var(--color-red);
  font-weight: 600;
}

/* Jezik bez prijevoda — nije link (nema mrtvog href="#") */
.lang-menu .lang-link.is-unavailable {
  color: var(--color-text-faint, rgba(255,255,255,0.28));
  cursor: not-allowed;
}

.lang-menu .lang-link.is-unavailable:hover {
  color: var(--color-text-faint, rgba(255,255,255,0.28));
  background: none;
}

/* Dropdown */
.nav-dropdown { position: relative; }
.dropdown-menu { list-style: none; }

@media (min-width: 1024px) {
  .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: #141414;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3) 0;
    /* Sirina = najduza stavka + padding stavke (.dropdown-item), bez fiksnog min-width. */
    min-width: 0;
    width: max-content;
    max-width: min(92vw, 340px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all var(--transition-normal);
  }

  .nav-dropdown:hover .dropdown-menu,
  .nav-dropdown:focus-within .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-5) !important;
    font-size: 0.85rem !important;
  }
}

.dropdown-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.85;
}

/* =========================================================
   HERO — AFTER (Linear/Zenit model)
   ========================================================= */
.hero {
  position: relative;
  min-height: 62vh;
  display: flex;
  align-items: center;
  padding: var(--space-12) 0;
  overflow: hidden;
}

/* D2 — crveni glow SMANJEN (bilo 0.12 → 0.06) i pomaknut iza sadržaja.
   Prije je bio istaknut točno u zoni naslova/CTA (84% 15%) i vizualno
   "gutao" kontrast viala i teksta. */
.hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 88% 8%, rgba(212, 40, 40, 0.06) 0%, transparent 58%),
    #0B0B0B;
  z-index: 1;
}

/* tanka crvena linija na vrhu heroja — švicarski detalj */
.hero-bg::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 40, 40, 0.6), transparent);
}

.hero-content { position: relative; z-index: 2; max-width: 760px; }

.hero-eyebrow {
  display: inline-block;
  /* −15 % (klijent 02.10.2026.): 0.74 → 0.629 rem */
  font-size: 0.629rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
}

.hero-eyebrow strong { color: var(--color-red); font-weight: 700; }

.hero-title {
  /* −15 %: clamp(2.7rem, 6.5vw, 4.5rem) → ×0.85 */
  font-size: clamp(2.295rem, 5.525vw, 3.825rem);
  font-weight: 500;
  /* D1 — bilo 1.04 (tijesno za dvoredne/višeredne naslove, npr.
     EU-LABORATORY-TESTED RESEARCH PEPTIDES). 1.08 daje zraka bez
     gubitka kompaktnosti. */
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-transform: none;
  margin-bottom: var(--space-5);
}

.hero-title b,
.hero-title strong {
  font-weight: 800;
}

.hero-title .accent {
  color: var(--color-red);
  font-weight: 800;
}

.hero-subtitle {
  /* −15 %: clamp(1rem, 1.9vw, 1.2rem) → ×0.85 */
  font-size: clamp(0.85rem, 1.615vw, 1.02rem);
  color: var(--color-text-muted);
  max-width: 520px;
}

/* =========================================================
   SECTION & TRUST BAR — AFTER (Zenit/Aesop: tanka traka)
   ---------------------------------------------------------
   NAPOMENA: `.trust-grid` / `.trust-item` / `.trust-icon` / `.trust-text`
   niže su LEGACY (statična varijanta trake, više se ne renderira).
   Traka je sada ticker — vidi `.trust-bar.is-ticker` / `.ticker-*`
   blok dalje u datoteci.
   ========================================================= */
.section { padding: var(--space-12) 0; }
.section--lg { padding: var(--space-12) 0; }

/* ------------------------------------------------------------------
   NASLOVNICA — mobilni razmak izmedu „Swiss precision…" i „Research
   catalog" sekcije (klijent 03.10.2026.).
   ------------------------------------------------------------------
   Svaka sekcija nosi `padding: var(--space-12) 0` (96px), pa se izmedu
   dvije susjedne sekcije nakupi 96 + 96 = 192px praznine. Na mobitelu to
   izgleda kao prazan ekran izmedu fotografije kutije i naslova kataloga.
   Klijent trazi −50 %, pa svaka strana daje 48px (--space-8) → ukupno 96px.
   Klase su vezane ISKLJUCIVO na te dvije sekcije naslovnice (front-page.php),
   pa ostale stranice i ostale sekcije zadrzavaju puni ritam. */
@media (max-width: 767px) {
  .apx-home-brand { padding-bottom: var(--space-8); }
  .apx-home-catalog { padding-top: var(--space-8); }
}

.trust-bar {
  background: #0E0E0E;
  padding: 16px 0;
  border-top: 1px solid var(--color-border-soft);
  border-bottom: 1px solid var(--color-border-soft);
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 22px;
}

.trust-item + .trust-item { border-left: 1px solid var(--color-border-soft); }

/* ikonica — bez kruga, kao znak */
.trust-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: none;
  background: none;
  width: auto;
  height: auto;
}

.trust-icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--color-text-muted);
}

.trust-item:first-child .trust-icon svg { stroke: var(--color-red); }

.trust-text h4 {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.08em;
  color: #E8E8E8;
  line-height: 1.4;
}

.trust-text p {
  font-size: 0.66rem;
  color: var(--color-text-faint);
}

/* velika cifra u trust baru (npr. 99%) */
.trust-value {
  font-size: 1.3rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
  line-height: 1;
}
.trust-value small {
  display: block;
  font-size: 0.56rem;
  font-weight: 500;
  color: var(--color-text-faint);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 4px;
}

/* =========================================================
   TRUST BAR → SEAMLESS INFINITE TICKER (CRVENA VARIANTA)
   ---------------------------------------------------------
   Zamjenjuje statičnu traku (5 stavki) beskonačnom trakom.
   Visina 43px = 50% stare trake (~87px).
   Boje: pozadina --color-red (#D42828), tekst i kvačice bijeli.
   Stavke: bez ikona — tekst + kvačica na kraju stavke.
   Animacija se uključuje tek kad JS složi kopije (.is-ticking).
   ========================================================= */

.trust-bar.is-ticker {
  --ticker-height: 34px;                     /* 20% tanje od 43px */
  --ticker-duration: 45s;
  --ticker-sets: 2;
  --ticker-red: #8B1A1A;                     /* zagasito crvena */
  --ticker-red-edge: #6B1414;                /* rub (1px borderi) */
  --ticker-fade: 15%;                        /* širina fade-a u crno s obje strane */

  /*
     z-index: 2 — OBAVEZNO, inače traka NESTANE na mobitelu.

     UZROK (klijent 03.10.2026., „crvena traka se ne vidi na mobilnom").
     `.hero--home` ima `overflow: visible` (§22.39 — da se duži podnaslov i
     CTA gumbi ne režu), pa se `.hero-bg` smije preliti PREKO donjeg ruba
     heroja. `.hero-bg` je `position: absolute` sa `z-index: 1`, a ova traka
     je imala `z-index: auto` (0) → pozadina heroja je bila IZNAD trake.
     `document.elementFromPoint()` je na svakoj točki trake vraćao
     `DIV.hero-bg`, a mjerenje piksela 0 bijelih piksela (tekst je bio
     prekriven) — na desktopu se nije vidjelo jer je hero niži i ne dopire.

     `z-index: 2` je najmanji mogući popravak: NE dira layout heroja
     (provjereno — visina heroja i položaj sadržaja ostaju identični), samo
     podiže traku iznad hero pozadine. `.hero-content` je i dalje na
     `z-index: 2`, a nalazi se unutar heroja koji je ranije u toku dokumenta,
     pa nema međusobnog preklapanja.
  */
  z-index: 2;

  position: relative;
  overflow: hidden;          /* KLJUČNO: traka se ne scrolla fizički */
  height: var(--ticker-height);
  padding: 0;
  display: flex;
  align-items: center;
  background: var(--ticker-red);
  border-top-color: var(--ticker-red-edge);   /* 1px borderi iz `.trust-bar` */
  border-bottom-color: var(--ticker-red-edge);
  color: #fff;

  /*
     Fade u crno lijevo i desno (kao scrim preko hero slike).
     Maska je na NEPOMIČNOM kontejneru — da fade stoji uz rubove viewporta,
     a ne da se pomiče zajedno s animiranom trakom (tada bi bio izvan ekrana).
     Kroz transparentne rubove se vidi pozadina stranice (#0B0B0B) = crno.
  */
  -webkit-mask-image: linear-gradient(to right,
      transparent 0%, #000 var(--ticker-fade),
      #000 calc(100% - var(--ticker-fade)), transparent 100%);
          mask-image: linear-gradient(to right,
      transparent 0%, #000 var(--ticker-fade),
      #000 calc(100% - var(--ticker-fade)), transparent 100%);
}

/* Unutrašnjost koja se kreće */
.ticker-track {
  display: flex;
  width: max-content;
  will-change: transform;
}

/* Jedan set stavki (PHP renderira samo ovaj; JS ga klonira) */
.ticker-group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* Stavka u traci */
.ticker-item {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;            /* ne sabijaj — traka mora ostati pune širine */
  white-space: nowrap;
  padding: 0 24px;
  /* separator: bijeli 22% (na zagasito crvenoj podlozi) — uključuje i šav petlje */
  border-right: 1px solid rgba(255, 255, 255, 0.22);
}

/* Tekst stavke — bez ikona, samo tekst */
.ticker-text {
  font-size: 0.70rem;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.2;
  white-space: nowrap;
}

/* Kvačica na kraju stavke */
.ticker-check {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.ticker-check svg {
  width: 13px;
  height: 13px;
  stroke: #fff;
  stroke-width: 2.6;         /* deblje da se jasno vidi na crvenoj podlozi */
}

/* Animacija — uključuje se SAMO kad je traka sastavljena (JS dodaje .is-ticking).
   Fade je namjerno na roditelju (`.trust-bar.is-ticker`), ne ovdje — vidi gore. */
.trust-bar.is-ticker.is-ticking .ticker-track {
  animation: apxTickerScroll var(--ticker-duration) linear infinite;
}

/*
   Petlja: track je širok `N × širina_seta`, a `translateX` s postotkom računa se
   prema vlastitoj širini elementa. `-100% / N` = pomak točno za jedan set — u tom
   trenutku je slika identična početnoj, pa petlja nema skok.
*/
@keyframes apxTickerScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-100% / var(--ticker-sets))); }
}

/* Hover — traka stane dok je miš iznad */
.trust-bar.is-ticker:hover .ticker-track,
.trust-bar.is-ticker:focus-within .ticker-track {
  animation-play-state: paused;
}

/* Smanjene animacije: bez kretanja, traka ostaje čitljiva i pomična.
   Fade u crno ostaje (to je stil, ne animacija). */
@media (prefers-reduced-motion: reduce) {
  .trust-bar.is-ticker .ticker-track {
    animation: none !important;
  }

  .trust-bar.is-ticker {
    overflow-x: auto;
  }
}

/* =========================================================
   KATEGORIJE — AFTER (Pentagram/Zenit: neutralne, ghost broj)
   ========================================================= */
.category-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition-normal), transform var(--transition-normal);
}

.category-card .card-media {
  position: relative;
  aspect-ratio: 4/3;
  background: var(--color-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.category-card .card-media svg {
  width: 72px;
  height: 72px;
  opacity: 0.8;
}

.category-card > div:nth-child(2) { display: flex; flex-direction: column; flex: 1; }
/* Imena (card-meta) guramo na dno kartice, a razmak imena → dugme je
   fiksan (isti na svim karticama bez obzira na broj redova imena). */
.category-card .card-meta { margin-top: auto; }
.category-card .btn { margin-top: 16px; }

.category-card .card-body { position: relative; padding: 26px 26px 28px; display: flex; flex-direction: column; flex: 1; }

/* podnaslov kategorije (sentence, bez verzala) */
.card-sub {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin-top: 4px;
}

/* meta lista imena u kartici — mutna, može da se prelama */
.card-meta .meta-names {
  color: var(--color-text-faint);
  font-weight: 450;
}

/* ghost broj */
.card-index {
  position: absolute;
  top: 14px;
  right: 20px;
  font-size: 3rem;
  font-weight: 750;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px #2E2E2E;
  letter-spacing: -0.02em;
  pointer-events: none;
}

/* broj na fotografiji (home kartice) — tamno sivi stroke (50% tamniji) */
.category-card .card-media .card-index {
  top: 14px;
  right: 18px;
  z-index: 2;
  -webkit-text-stroke: 1px rgba(77, 77, 77, 0.9);
}

.category-card h3 { font-weight: 650; letter-spacing: -0.01em; }

@media (min-width: 1024px) {
  .category-card:hover {
    border-color: var(--color-red);
    transform: translateY(-6px);
  }
}

/* Home kartice (4 kartice, 2 po redu — desktop): povećaj box,
   sadržaj ostaje gore, imena + dugme na dnu. */
@media (min-width: 1024px) {
  .home-cat-grid .category-card {
    min-height: 680px;
  }
}

/* Veći boxevi (2×2): malo veći padding i tipografija */
.home-cat-grid .category-card .card-body {
  padding: 32px 34px 34px;
}

.home-cat-grid .category-card h3 {
  font-size: 1.74rem;
}

.home-cat-grid .category-card .card-sub {
  font-size: 1rem;
}

.home-cat-grid .category-card .card-meta {
  font-size: 0.85rem;
}

/* =========================================================
   PRODUCT CARD — AFTER
   ========================================================= */
.product-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 18px;
  transition: border-color var(--transition-normal), transform var(--transition-normal);
}

.product-card:hover {
  border-color: var(--color-red);
  transform: translateY(-3px);
}

.product-card__image {
  width: 100%;
  aspect-ratio: 3/4;
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-card__image img,
.product-card__image svg { max-width: 82%; height: auto; }

.product-card__name {
  font-size: 1.12rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}

.product-card__type {
  font-size: 0.74rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  margin-bottom: 10px;
}

.product-card__description {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-bottom: 14px;
}

.product-card .btn { margin-top: auto; }

.product-card__options { display: flex; gap: var(--space-2); margin-bottom: 14px; }

/* dose / pill */
.dose-option {
  padding: 7px 13px;
  font-size: 0.74rem;
  font-weight: 500;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  color: var(--color-text-secondary);
}

.dose-option:hover,
.dose-option--active {
  border-color: var(--color-red);
  color: var(--color-red);
}

/* Available amount picker (single product) — crna kutija, tanak bijeli rub,
   bold bijeli tekst. Aktivna opcija = inverz (bijela pozadina / crni tekst). */
.apx-dose-option {
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.85);
  color: #ffffff;
  font-weight: 700;
}

.apx-dose-option:hover {
  background: #141414;
  border-color: #ffffff;
  color: #ffffff;
}

.apx-dose-option.dose-option--active {
  background: #ffffff;
  border-color: #ffffff;
  color: #000000;
}

/* meta red na dnu kartice */
.card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border-soft);
  font-size: 0.76rem;
  color: var(--color-text-muted);
}
.card-meta strong { color: #fff; font-weight: 600; }

/* home kartice: samo imena (bez broja) — lijevo */
.category-card .card-meta {
  justify-content: flex-start;
}
.category-card .card-meta .meta-names {
  color: var(--color-text-secondary);
  text-align: left;
}

/* ---------------------------------------------------------
   Katalog proizvoda (/products/) — dodatak kartici
   --------------------------------------------------------- */

/* eyebrow ("RESEARCH PEPTIDE") unutar kartice kataloga */
.product-card__badge { margin-bottom: 6px; }

/* okvir liste kataloga na /products/ (page-products.php). Razmaci su ovdje,
   a ne inline, da ih mobilni @media može smanjiti — inline style bi ih
   nadjacao. */
.apx-catalog-list { padding: var(--space-8) 0; }
.apx-catalog-count {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

/* "Coming soon" kartica (dashed). Prije je bila inline style u
   page-products.php — sada klasa da se moze smanjiti na mobitelu. */
.product-card--pending {
  border-style: dashed;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  min-height: 280px;
}

/* =========================================================
   MOBILNI KATALOG PROIZVODA (do 767px) — 2 kartice u redu
   ---------------------------------------------------------
   Prije (17.09.2026.): /products/ je bio 1 kolona. Kartica je bila
   342×576 px, a sam box slike 304×405 px dok je boca unutra visoka
   samo 213 px → ~190 px praznog prostora po kartici. Prva kartica
   zavrsavala je na 1054 px, ekran je 844 px, pa se u prvom ekranu
   nije vidjela NI JEDNA cijela kartica.
   Sada: 2 kolone × ~165 px, kartica ~285 px visoka → prvi red (2
   proizvoda) cijeli vidljiv, 7 redova za 14 proizvoda.
   Vrijedi i za /shop/ (WooCommerce arhiv koristi iste klase).
   ========================================================= */
@media (max-width: 767px) {
  .grid--4 { gap: 12px; }

  .product-card { padding: 10px; border-radius: var(--radius-md); }

  /* Box slike: 3/4 → 1/1 (najveci dio praznog prostora bio je vertikalan) */
  .product-card__image {
    aspect-ratio: 1 / 1;
    margin-bottom: 10px;
  }
  /* veca specificnost od `.product-card__image img` nize u datoteci */
  .product-card .product-card__image img,
  .product-card .product-card__image svg { max-width: 94%; max-height: 94%; }

  .product-card__badge { margin-bottom: 4px; font-size: 0.62rem; letter-spacing: 0.14em; }
  .product-card__name { font-size: 0.98rem; }
  .product-card__type { font-size: 0.7rem; margin-bottom: 8px; }

  .card-meta { margin-top: 10px; padding-top: 10px; font-size: 0.72rem; }

  .product-card--pending { min-height: 150px; }
}

/* tag/chip — neutralan */
.tag {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 9px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-text-secondary);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-soft);
}

/* =========================================================
   ACCORDION (FAQ)
   ========================================================= */
.accordion-item { border-bottom: 1px solid var(--color-border-soft); }

.accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) 0;
  cursor: pointer;
  width: 100%;
  background: none;
  border: none;
  color: var(--color-text-primary);
  font-size: 1rem;
  font-weight: 550;
  text-align: left;
  letter-spacing: -0.01em;
}

.accordion-header svg {
  width: 18px;
  height: 18px;
  color: var(--color-red);
  transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
}

.accordion-item.is-open .accordion-header svg { transform: rotate(45deg); }

/* 17.09.2026. (22.24): glatko otvaranje/zatvaranje.
   Prije: `max-height: 0` ↔ `600px`. Odgovori su 77-130 px visoki, pa je
   animacija bila gotova u prvih ~20 % trajanja i onda „stajala".
   Sada: JS mjeri scrollHeight i animira na točnu visinu (inline max-height),
   a CSS vrijednosti ispod su fallback bez JS-a + prateći fade/translate.
   Napomena: `--transition-normal` (250ms) je prekratko da se osjeti kao
   „smooth", zato je tu izričito 320ms. */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition: max-height 320ms cubic-bezier(0.4, 0, 0.2, 1),
              opacity 220ms ease,
              transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
}

.accordion-item.is-open .accordion-content {
  max-height: 600px; /* fallback ako JS ne radi; JS postavlja točan px */
  opacity: 1;
  transform: translateY(0);
}

.accordion-content p { padding-bottom: var(--space-5); color: var(--color-text-secondary); }
@media (prefers-reduced-motion: reduce) {
  .accordion-content,
  .accordion-header svg { transition: none; }
  .accordion-content { transform: none; opacity: 1; }
}

/* =========================================================
   FORME
   ========================================================= */
.form-group { margin-bottom: var(--space-5); }

.form-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: var(--space-2);
  color: #ffffff;
}

.form-input,
.form-textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-family: inherit;
  font-size: 1rem;
  transition: border-color var(--transition-fast);
}

.form-input::placeholder,
.form-textarea::placeholder { color: var(--color-text-faint); }

.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-red);
  box-shadow: 0 0 0 1px rgba(212, 40, 40, 0.25);
}

.form-textarea { min-height: 150px; resize: vertical; }

/* =========================================================
   D5 — FORME: select, checkbox, radio, poruke
   ---------------------------------------------------------
   Prije su postojali SAMO .form-input / .form-textarea. Sve ostalo
   (dropdowni, checkbox, radio, WooCommerce polja i poruke) naslijedilo
   bi defaultni stil preglednika — bijeli select na crnoj stranici.
   Ovdje se sve svodi na isti jezik: crna/bijela/crvena, isti radius.
   ========================================================= */

/* --- Select (i WooCommerce varijante) --- */
.form-select,
.wc-block-components-form .wc-block-components-select__input,
select:not([multiple]):not([size]) {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: var(--space-3) var(--space-10) var(--space-3) var(--space-4);
  background-color: var(--color-bg-secondary);
  /* Strelica u SVG-u (data-URI) — nema dodatnog HTTP zahtjeva. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8A8A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  background-size: 15px 15px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.4;
  cursor: pointer;
  transition: border-color var(--transition-fast);
}

.form-select:hover,
select:not([multiple]):not([size]):hover { border-color: #3A3A3A; }

.form-select:focus,
select:not([multiple]):not([size]):focus {
  outline: none;
  border-color: var(--color-red);
  box-shadow: 0 0 0 1px rgba(212, 40, 40, 0.25);
}

/* Popis opcija — preglednik ga crta; u Chromiumu/Firefoxu može se obojiti. */
select option { background: var(--color-bg-secondary); color: var(--color-text-primary); }

/* --- Checkbox / radio --- */
input[type="checkbox"],
input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin: 0;
  background: var(--color-bg-secondary);
  border: 1px solid #3A3A3A;
  cursor: pointer;
  position: relative;
  transition: border-color var(--transition-fast), background var(--transition-fast);
  vertical-align: middle;
}

input[type="checkbox"] { border-radius: 3px; }
input[type="radio"]    { border-radius: 50%; }

input[type="checkbox"]:hover,
input[type="radio"]:hover { border-color: var(--color-red); }

input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background: var(--color-red);
  border-color: var(--color-red);
}

/* Kvačica (checkbox) */
input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid #FFFFFF;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Točka (radio) */
input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: #FFFFFF;
}

input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(212, 40, 40, 0.35);
}

input[type="checkbox"]:disabled,
input[type="radio"]:disabled { opacity: 0.45; cursor: not-allowed; }

/* Checkbox/radio unutar labela (WooCommerce, kontakt forma) */
label > input[type="checkbox"],
label > input[type="radio"],
.checkbox-item input[type="checkbox"],
.form-check input[type="checkbox"],
.form-check input[type="radio"] { margin-right: var(--space-2); }

/* --- Poruke i greske (WooCommerce + opcenito) --- */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info,
.form-error {
  border-radius: var(--radius-sm);
  border-left-width: 3px;
  border-left-style: solid;
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
  font-size: 0.9rem;
  line-height: 1.6;
  list-style: none;
}

.woocommerce-error, .form-error { border-left-color: var(--color-red); }
.woocommerce-message           { border-left-color: #4CAF50; }
.woocommerce-info              { border-left-color: var(--color-gold); }

.woocommerce-error a,
.woocommerce-message a,
.woocommerce-info a { color: var(--color-gold); text-decoration: underline; }

.woocommerce-error li { margin-bottom: var(--space-1); }
.woocommerce-error li:last-child { margin-bottom: 0; }

/* WooCommerce “required” zvjezdica */
.required { color: var(--color-red); text-decoration: none; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  background: #0D0D0D;
  border-top: 1px solid var(--color-border-soft);
  padding: var(--space-10) 0 var(--space-6);
}

.footer-main {
  display: grid;
  gap: var(--space-8);
  margin-bottom: var(--space-10);
}

@media (min-width: 768px) { .footer-main { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer-main { grid-template-columns: 2fr repeat(3, 1fr); } }

/* Footer kolone koriste <h3> (bez preskoka razine naslova); h4 ostaje
   u selektoru za slučaj starijeg označavanja. */
.footer-nav h3,
.footer-nav h4 {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: var(--space-4);
  color: var(--color-text-secondary);
}

.footer-nav ul { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }

.footer-nav li a { font-size: 0.86rem; color: var(--color-text-muted); }
.footer-nav li a:hover { color: var(--color-red); }

.footer-bottom-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border-soft);
}

@media (min-width: 768px) {
  .footer-bottom-inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

.footer-tagline { text-align: center; }

@media (min-width: 768px) {
  .footer-tagline {
    text-align: left;
    display: flex;
    align-items: center;
    gap: var(--space-5);
  }
}

.footer-tagline strong { color: var(--color-gold); font-weight: 600; }

/* =========================================================
   PAGE HEADER & BREADCRUMBS
   ========================================================= */
.page-header {
  /* Padding identican gore i dolje: razmak od vrha boxa do sadrzaja
     jednak je razmaku od zadnjeg retka do dna boxa. */
  padding: var(--space-8) 0;
  position: relative;
  background: linear-gradient(180deg, #0E0E0E 0%, #0B0B0B 100%);
  border-bottom: 1px solid var(--color-border-soft);
}

.breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.78rem;
  color: var(--color-text-faint);
  margin-bottom: var(--space-5);
}

.breadcrumbs a { color: var(--color-text-muted); }
.breadcrumbs a:hover { color: var(--color-red); }
.breadcrumbs span:last-child { color: var(--color-text-secondary); }

/* --- Responsive Utilities --- */
@media (max-width: 1023px) {
  .hero-image { display: none !important; }
}

@media (max-width: 640px) {
  .trust-item { padding: 10px 12px; }
  .trust-item + .trust-item { border-left: none; }
  .trust-grid { gap: 4px; }
}

/* Naslov stranice na mobitelu: 48px gore + 48px dolje (96px) praznog
   prostora → 24 + 24. Na ekranu od 844px to je 11 % visine, a cilj je
   da se prvi red proizvoda vidi bez skrolanja.
   NAMJERNO ovdje (a ne gore uz grid): .page-header je definiran NIZE u
   datoteci (linija ~1262), pa bi ga pravilo iznad njega nadjacalo. */
@media (max-width: 767px) {
  .page-header { padding: var(--space-5) 0; }
  .page-header .breadcrumbs { margin-bottom: var(--space-3); }

  /* dodatno skupljanje vertikalnog razmaka oko kataloga */
  .apx-catalog-list { padding: var(--space-5) 0; }
  .apx-catalog-count { margin-bottom: var(--space-4); }
}

/* =========================================================
   WP THEME OVERRIDES — minimal sweep (front/catalog/groups)
   ========================================================= */
.page-header h1 { font-weight: 600; }

/* ikona u card-media (kategorije na home) — fallback bez fotografije */
.category-card .card-media img { max-width: 120px; max-height: 120px; width: auto; height: auto; opacity: 0.9; }

/* fotografija u card-media (home kartice): ispuni 16/9 box, cover */
.category-card .card-media img.card-photo {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  display: block;
}

/* lagani zoom fotografije na hover kartice */
@media (min-width: 1024px) {
  .category-card:hover .card-media img.card-photo {
    transform: scale(1.04);
  }
  .category-card .card-media {
    overflow: hidden;
  }
  .category-card .card-media img.card-photo {
    transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
}

/* fotografije proizvoda u karticama — bez istezanja */
/* 17.09.2026. (22.23): 82/86 → 94/92 %. Box ostaje 246x328 (3/4), a slika
   (portret 2274x2766 → omjer 0.822) sada popunjava ~231x281 px umjesto
   202x245 px. Sirina je mjerodavna (slika je „sira" od boxa), pa je
   max-height 92 % samo sigurnosna granica za drugacije omjere.
   NE dirati `max-width` na `.product-card__image img, svg` (linija ~961) —
   tamo 82 % drzi SVG placeholder za proizvode bez fotografije. */
.product-card__image img { width: auto !important; height: auto !important; max-width: 94%; max-height: 92%; object-fit: contain; }

/* meta imena lijepo da se prelamaju */
.card-meta .meta-names { text-align: right; line-height: 1.5; }
@media (max-width: 640px) { .card-meta { flex-direction: column; align-items: flex-start; } .card-meta .meta-names { text-align: left; } }

/* --- Ikone: header/nav dodaci --- */
.nav-toggle svg,
.nav-toggle .icon-btn-svg {
  width: 22px;
  height: 22px;
}

.dropdown-icon {
  opacity: 0.9;
}

.lang-trigger svg.nav-chevron,
.nav-dropdown > a svg.nav-chevron {
  width: 12px;
  height: 12px;
  margin-left: 4px;
}

/* Cart link u glavnom meniju — ikonica + tekst poravnati */
.nav-cart {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.nav-cart .nav-cart-ico {
  width: 16px;
  height: 16px;
  opacity: 0.9;
}

/* Broj artikala u košarici (badge) — OSNOVNI izgled, vrijedi na svim
   sirinama.
   06.10.2026. — prije je ovaj izgled bio INLINE STIL u header.php, pa ga je
   mobilni `@media` morao nadjacavati s `!important` (4 puta). Sada je
   izgled u CSS-u, markup je cist, a mobilni samo skalira dimenzije.
   Boje: crvena podloga (brend), bijeli broj. */
.nav-cart .cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.3rem;
  margin-left: 0.15rem;
  background: var(--color-red);
  color: #ffffff;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
}

/* =========================================================
   WOOCOMMERCE — tamna koža (crvena/bijela/zlatna brend)
   CMS: wordpress-local-v1 · Opcija A
   ========================================================= */

/* --- Općenito: WC stranice unutar naše teme --- */
.woocommerce,
.woocommerce-page,
.alpenix-wc-page {
  color: var(--color-text-primary);
}

/* Tabele / kartice */
.woocommerce table.shop_table,
.woocommerce-page table.shop_table {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--color-surface);
  color: var(--color-text-primary);
}
.woocommerce table.shop_table th,
.woocommerce-page table.shop_table th {
  background: #161616;
  color: var(--color-text-secondary);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  border-bottom: 1px solid var(--color-border);
}
.woocommerce table.shop_table td,
.woocommerce-page table.shop_table td {
  border-top: 1px solid var(--color-border-soft);
  color: var(--color-text-secondary);
}
.woocommerce table.shop_table td.product-name a,
.woocommerce-page table.shop_table td.product-name a {
  color: #fff;
}
.woocommerce table.shop_table td.product-name a:hover {
  color: var(--color-red);
}
.woocommerce table.shop_table td .amount,
.woocommerce-page table.shop_table td .amount {
  color: #fff;
  font-weight: 600;
}

/* --- Cijene --- */
.woocommerce .price,
.woocommerce-page .price,
.woocommerce-Price-amount {
  color: #fff;
}
.woocommerce .price ins,
.woocommerce-page .price ins {
  color: var(--color-gold);
  text-decoration: none;
}

/* --- Dugmad (klasična + blok) --- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button,
.wc-block-components-button,
.wp-block-woocommerce-cart .wp-block-button__link,
.wp-block-woocommerce-checkout .wp-block-button__link {
  background: var(--color-red) !important;
  color: #fff !important;
  border: 1px solid var(--color-red) !important;
  border-radius: 2px !important;
  font-family: inherit;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  padding: 13px 24px !important;
  text-transform: none !important;
  letter-spacing: 0.01em !important;
  transition: background 0.15s ease, border-color 0.15s ease !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.wc-block-components-button:hover,
.wp-block-button__link:hover {
  background: var(--color-red-dark) !important;
  border-color: var(--color-red-dark) !important;
  color: #fff !important;
}
/* Sekundarna (ghost) */
.woocommerce a.button.alt,
.woocommerce button.button.alt {
  background: transparent !important;
  border-color: #3a3a3a !important;
  color: #e8e8e8 !important;
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  border-color: var(--color-red) !important;
  color: var(--color-red) !important;
  background: rgba(212, 40, 40, 0.05) !important;
}
/* Remove / link tipke */
.woocommerce a.remove {
  color: var(--color-red) !important;
}
.woocommerce a.remove:hover {
  background: var(--color-red);
}

/* --- Forme i inputi --- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-page form .form-row input.input-text,
.woocommerce-page form .form-row textarea,
.wc-block-components-text-input input,
.wc-block-components-combobox .wc-block-components-combobox-control input,
.wc-block-components-select .wc-block-components-select-control input,
.woocommerce form .form-row select {
  background: var(--color-bg-secondary) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 2px !important;
  color: var(--color-text-primary) !important;
  padding: 12px 14px !important;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.wc-block-components-text-input input:focus {
  border-color: var(--color-red) !important;
  outline: none;
}
.woocommerce form .form-row label {
  color: var(--color-text-muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* --- Notices / poruke --- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  background: var(--color-surface) !important;
  border-top-color: var(--color-red) !important;
  color: var(--color-text-secondary) !important;
  border-radius: 6px;
}
.woocommerce-message::before,
.woocommerce-info::before {
  color: var(--color-gold);
}
.woocommerce-error::before {
  color: var(--color-red);
}

/* --- Blok: cart (prazna košarica) --- */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout,
.wc-block-cart,
.wc-block-checkout {
  color: var(--color-text-primary);
}

/* Prazna košarica: BEZ ikone košarice (WooCommerce dodaje 84px mask-image
   preko ::before) — ostaje samo tekst „Your cart is currently empty!".
   Klasu `with-empty-cart-icon` dobiva SAMO prazan naslov, pa je dovoljno
   ugasiti taj pseudo-element. */
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
  display: none;
  content: none;
}

/* Slike proizvoda u cart gridu („New in store") — nekropane (portret),
   pa visinu puštamo auto da se ne deformiraju u kvadratnom boxu. */
.wc-block-grid__product-image img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.wc-block-components-totals-wrapper,
.wc-block-cart__submit-container,
.wc-block-components-cart-coupon__form {
  border-top-color: var(--color-border);
}
.wc-block-components-express-payment,
.wc-block-components-express-checkout {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
}

/* Naslovi blok panela */
.wc-block-components-total-list-item__label,
.wc-block-components-totals-item__label {
  color: var(--color-text-secondary);
}

/* Neki WC blokovi imaju bijele pozadine — obojimo panel */
.wp-block-woocommerce-cart .wc-block-cart__main,
.wp-block-woocommerce-cart .wc-block-cart__sidebar,
.wp-block-woocommerce-checkout .wc-block-checkout__form,
.wc-block-components-panel,
.wc-block-components-order-summary {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 20px;
}

/* Quantity (blok) */
.wc-block-components-quantity-selector {
  border-color: var(--color-border);
  border-radius: 4px;
  background: var(--color-bg-secondary);
}
.wc-block-components-quantity-selector__button {
  color: #fff;
}

/* --- My Account --- */
.woocommerce-MyAccount-navigation ul {
  list-style: none;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface);
  overflow: hidden;
}
.woocommerce-MyAccount-navigation ul li a {
  color: var(--color-text-secondary);
  padding: 12px 18px;
  display: block;
  border-bottom: 1px solid var(--color-border-soft);
}
.woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-MyAccount-navigation ul li.is-active a {
  color: var(--color-red);
  background: rgba(212, 40, 40, 0.05);
}

/* --- Linkovi --- */
.woocommerce a,
.woocommerce-page a {
  color: var(--color-text-secondary);
}
.woocommerce a:hover,
.woocommerce-page a:hover {
  color: var(--color-red);
}

/* Zakloni bijele kutije u blokovima */
.alpenix-wc-page .wp-block-woocommerce-coming-soon,
.alpenix-wc-page .is-large {
  background: transparent !important;
}

/* --- Novi ALPENIX logo (assets/img/logo.svg) --- */
.brand img.brand-logo,
.brand-logo {
  display: block;
  width: auto;
  height: 52px;
}
@media (min-width: 1024px) {
  .brand img.brand-logo,
  .brand-logo { height: 62px; }
}

/* =========================================================
   HERO — naslovna slika + animacija A+D (WP)
   ---------------------------------------------------------
   ART DIRECTION (klijent 06.10.2026.): DVIJE fotografije.
     - ≥768px  → hero-desktop-*.{jpg,webp}  (2677x1504, omjer 1.7799)
     - ≤767px  → hero-mobile-*.{jpg,webp}   (1506x2676, omjer 0.5628)
   `aspect-ratio` MORA odgovarati omjeru KONKRETNE slike, inače `object-fit:
   cover` dodatno reže kadar. Zato su dva razlicita omjera (prije je bio jedan,
   2674/1614, jer je postojala samo landscape slika).

   D1/D2 — `max-height: 82vh; overflow: hidden` (u `.hero`) je REZALO sadržaj
   na nižim ekranima nakon što su dodani duži podnaslov i CTA gumbi. Sada
   visinu drži omjer slike, a sadržaj smije rasti ispod njezinog okvira.
   ========================================================= */
.hero--home {
  min-height: 0;
  /* Desktop/tablet: landscape slika (2677x1504) */
  aspect-ratio: 2677 / 1504;
  width: 100%;
  max-height: none;
  overflow: visible;
}

/* Mobilni: portretna slika (1506x2676).
   Fiksni `aspect-ratio` portreta daje hero visok ~178vw — na 390px to je
   ~694px, dovoljno za naslov + podnaslov + CTA + red s ikonama bez rezanja.
   NAMJERNO nije `aspect-ratio: auto` + `min-height`: tada visinu odreduje
   sadržaj, pa se slika u pozadini razvlači na proizvoljan omjer i gubi kadar. */
@media (max-width: 767px) {
  .hero--home {
    aspect-ratio: 1506 / 2676;
    max-height: none;
  }
}

/* Tablet (768–900px) ranije je imao prijelaz na `auto` + `min-height: 70svh`.
   Sada je tu landscape slika, pa omjer slike ostaje mjerodavan i na tabletu —
   nema potrebe za `auto`. Zadržano je samo izjednačavanje sadržaja. */
@media (min-width: 768px) and (max-width: 900px) {
  .hero--home {
    min-height: 0;
    display: flex;
    align-items: center;
  }
}

.hero--home .hero-bg {
  background: #0B0B0B;  /* fallback dok se slika učitava */
}

/* Slika heroja kao <img> — ispunjava hero-bg, fokus podesiv (opcija 6) */
.hero--home .hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 0;
}

/* Scrim (gradijent) iznad slike radi čitljivosti teksta */
.hero--home .hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(8, 8, 8, 0.9) 0%, rgba(8, 8, 8, 0.72) 38%, rgba(8, 8, 8, 0.25) 72%, rgba(8, 8, 8, 0.4) 100%);
}

.hero--home .hero-bg::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 40, 40, 0.7), transparent);
}

.hero--home .hero-content {
  /* 720 → 860 px: naslov je od 02.10.2026. dugačak
     („EU-LABORATORY-TESTED RESEARCH PEPTIDES"), a mjereno stvarnim metrikama
     fonta (fontTools + render, Urbanist od 03.10.2026.) ta prva riječ
     @61,2 px iznosi 693 px — u 720 px se lomila bez potrebe. 860 px je
     najveća riječ + margina, pa H1 stane u jedan red. */
  max-width: 860px;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.55);
}

/* Klijent 02.10.2026. — sadržaj heroja podignut prema menu baru.
   NAPOMENA: pomak je RESPONZIVAN. Na mobitelu (`≤767px`) `.hero--home` ima
   `align-items: flex-start` + `padding-top: 4vh`, pa bi `translateY(-15%)`
   gurnuo sadržaj IZNAD okvira heroja i odrezao vrh naslova. Zato:
     ≤767px  → bez pomaka (blok je već pri vrhu zbog `flex-start` + padding)
     768–1023px → pola pomaka (`-8%`), blok je centriran
     ≥1024px → puni pomak (`-15%`), kako je klijent tražio
   Na ≥1024px nema rizika od rezanja: hero je visok (aspect-ratio slike). */
.hero--home .hero-content { transform: translateY(-15%); }
@media (min-width: 768px) and (max-width: 1023px) {
  .hero--home .hero-content { transform: translateY(-8%); }
}
@media (max-width: 767px) {
  .hero--home .hero-content { transform: none; }
}
.hero--home .hero-eyebrow { color: #d9d9d9; }
.hero--home .hero-eyebrow strong { color: var(--color-red); }
.hero--home .hero-subtitle { color: #c9c9c9; }

/* --- A · Linije: maska + reveal --- */
.hero-title .hero-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.06em;
  margin-bottom: -0.06em;
}
.hero-line__inner {
  display: block;
  transform: translateY(112%);
  opacity: 0;
  animation: alpenixLineUp 0.95s cubic-bezier(0.22, 0.7, 0.2, 1) forwards;
  will-change: transform, opacity;
  backface-visibility: hidden;
}
@keyframes alpenixLineUp {
  0%   { transform: translateY(112%); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: translateY(0);    opacity: 1; }
}
.hero-title .hero-line:nth-child(1) .hero-line__inner { animation-delay: 0.12s; }
.hero-title .hero-line:nth-child(2) .hero-line__inner { animation-delay: 0.26s; }
.hero-title .hero-line:nth-child(3) .hero-line__inner { animation-delay: 0.40s; }

.hero-line__inner--accent {
  color: var(--color-red);
  font-weight: 800;
  text-shadow: 0 0 0 rgba(212, 40, 40, 0);
  animation-name: alpenixLineUpAccent;
}
@keyframes alpenixLineUpAccent {
  0%   { transform: translateY(112%); opacity: 0; text-shadow: 0 0 0 rgba(212,40,40,0); }
  55%  { opacity: 1; }
  78%  { text-shadow: 0 0 26px rgba(212,40,40,0.45); }
  100% { transform: translateY(0); opacity: 1; text-shadow: 0 0 0 rgba(212,40,40,0); }
}

/* Eyebrow i subtitle — fade + mali pomak */
.hero-eyebrow,
.hero-subtitle {
  opacity: 0;
  animation: alpenixFadeUp 0.8s cubic-bezier(0.22, 0.7, 0.2, 1) forwards;
}
.hero-eyebrow { animation-delay: 0.02s; }
.hero-subtitle { animation-delay: 0.62s; }
@keyframes alpenixFadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- D · Scroll efekat (osnova transform; JS postavlja translate) --- */
.hero--home .hero-bg {
  will-change: transform;
  transform: translate3d(0, 0, 0) scale(1.08);
  transition: transform 0.1s linear;
}

/* --- Pristupačnost --- */
@media (prefers-reduced-motion: reduce) {
  .hero-line__inner,
  .hero-eyebrow,
  .hero-subtitle {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .hero--home .hero-bg {
    transform: none;
    transition: none;
  }
}

/* =========================================================
   RESPONZIVNOST — popravke (mobile/tablet)
   ========================================================= */

/* --- Footer: responzivne kolone (umjesto fiksnih 4) --- */
.footer-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  text-align: left;
}
@media (max-width: 900px) {
  .footer-cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .footer-cols { grid-template-columns: 1fr; }
}

/* --- Hero na mobitelu: PORTRETNA slika (hero1 → hero-mobile-*) ---
   06.10.2026. — bilo `aspect-ratio: auto; min-height: 58vh` (za staru
   landscape sliku). Sada je na mobitelu DRUGA, portretna fotografija
   (1506x2676), pa visinu drži NJEZIN omjer: `1506 / 2676`.

   ZASTO FIKSAN OMJER, A NE `auto`:
   `auto` prepusta visinu sadržaju, pa se slika u pozadini razvlači na
   proizvoljan omjer — `object-fit: cover` tada reže kadar nepredictivno i
   boce izlaze iz fokusa. S omjerom identicnim izvornoj slici (0.5628)
   `cover` NE reže nista: hero je 390x693 px, slika je omjer 1506/2676.

   `padding-top: 4vh` i `align-items: flex-start` ostaju (klijent §22.43):
   sadržaj je pri vrhu, iznad planina, gdje je podloga najtamnija. */
@media (max-width: 767px) {
  .hero--home {
    aspect-ratio: 1506 / 2676;
    /* GORNJA GRANICA VISINE — nuzna jer je portretna slika vrlo visoka:
       na 767px sirine `aspect-ratio` sam daje 1363px, sto je VISE od ekrana
       tableta (1066px) — hero bi pojeo cijeli ekran i gurnuo sadrzaj ispod
       preklopa. `92svh` (svh = visina kad su mobilni toolbari VIDLJIVI,
       konstantna) drzi hero unutar ekrana; visak se odreze `object-fit:
       cover`, a `object-position` cuva gornji dio kadra (planine + vrh boca).
       Na manjim telefonima (360–430px) `aspect-ratio` daje 640–764px, dakle
       ISPOD granice — tamo se NE reze nista.
       `vh` je fallback za starije browsere bez `svh`. */
    max-height: 92vh;
    max-height: 92svh;
    min-height: 0;
    padding-top: 4vh;      /* tekst blizu vrha portretne slike */
    align-items: flex-start;
  }
  .hero--home .hero-img {
    /* Omjeri se poklapaju, pa `cover` ne reže — ovo vrijedi samo kao
       osigurac ako se slika ikad zamijeni drugim omjerom. */
    object-position: center top;
  }
  .hero--home .hero-bg::before {
    background: linear-gradient(180deg, rgba(8,8,8,0.82) 0%, rgba(8,8,8,0.45) 55%, rgba(8,8,8,0.85) 100%);
  }
  .hero--home .hero-content {
    max-width: 100%;
  }
  .hero-title {
    /* −15 %: clamp(2.1rem, 11vw, 3rem) → ×0.85 */
    font-size: clamp(1.785rem, 9.35vw, 2.55rem);
  }
  /* DE naslov FORSCHUNGSPEPTIDE je jedna rijec i ne stane u 390px —
     nevidljivi prijelom (U+200B) iz front-page.php daje dva reda
     (FORSCHUNGS / PEPTIDE bez vidljive crtice). Specificnost je visa od
     baznog pravila (nowrap) koje je nize u datoteci. */
  /* NAPOMENA: `white-space` je premješten u osnovno pravilo (vidi dolje) —
     ZWSP prijelomi rade na SVIM širinama, ne samo na mobitelu. */
  .hero--home .hero-eyebrow {
    /* −15 %: 0.62 → 0.527 rem */
    font-size: 0.527rem;
    letter-spacing: 0.2em;
  }
}

/* --- Lang meni: poravnaj desno (ne viri van ekrana) --- */
@media (min-width: 1024px) {
  .nav-lang > .dropdown-menu {
    left: auto;
    right: 0;
  }
}

/* --- Hero parallax: na mobitelu ISKLJUČEN (klijent 03.10.2026.) ---
   JS u footer.php sada na ≤767px uopće ne piše inline `transform` na
   `.hero-bg`, pa pozadina miruje — nema više dojma „lebdjenja" naslovnice
   pri scrollu. Ova pravila ostaju kao SIGURNOSNA MREŽA: ako se JS ne učita
   ili se vrati starija verzija skripte, `will-change: auto` i `transition:
   none` spriječavaju da se element promovira u vlastiti sloj (traži GPU
   memoriju, a na mobitelu je uzrok trzanja).
   `transform: translate3d(0,0,0) scale(1.08)` iz osnovnog pravila ostaje —
   to je bazno stanje pozadine (blagi zoom zbog `object-fit: cover`). */
@media (max-width: 767px) {
  .hero--home .hero-bg {
    will-change: auto;
    transition: none;
  }
}

/* =========================================================
   FRONT PAGE — trust bar: ikone + tekst veći za ~30%
   (samo body.home; ostale stranice zadržavaju standard)
   ========================================================= */
body.home .trust-icon svg {
  width: 29px;   /* 22 × 1.3 */
  height: 29px;
}
body.home .trust-text h4 {
  font-size: 0.91rem;   /* 0.70 × 1.3 */
  line-height: 1.3;
}
body.home .trust-text p {
  font-size: 0.86rem;   /* 0.66 × 1.3 */
}
body.home .trust-item {
  gap: 17px;            /* malo veći razmak uz veće ikone */
  padding: 12px 22px;
}

/* =========================================================
   SUBMENU (dropdown) — crveni hover efekat
   ========================================================= */
.dropdown-menu .dropdown-item {
  color: var(--color-text-secondary);
  border-radius: 4px;
  transition: color 0.15s ease, background 0.15s ease, padding-left 0.2s ease;
}

.dropdown-menu .dropdown-item:hover {
  color: var(--color-red);
  background: rgba(212, 40, 40, 0.08);
}

/* ikonica unutar submenua dobija crvenu boju na hover */
.dropdown-menu .dropdown-item:hover .dropdown-icon {
  opacity: 1;
}

/* aktivna (trenutna) kategorija u submenuu — crvena */
.dropdown-menu .dropdown-item.is-active,
.nav-dropdown > a[aria-current="page"] .dropdown-menu .dropdown-item {
  color: var(--color-red);
}

/* =========================================================
   IKONE — velike/srednje: duplo tanje linije
   Trust bar ikone (22–29px, helper bez width atributa) → stroke 0.6
   ========================================================= */
.trust-icon svg,
.trust-icon svg * {
  stroke-width: 0.6;
}

/* =========================================================
   QUALITY-TESTING — naslov: maskirani reveal (kao početna)
   ========================================================= */
.quality-title .hero-line:nth-child(1) .hero-line__inner { animation-delay: 0.12s; }
.quality-title .hero-line:nth-child(2) .hero-line__inner { animation-delay: 0.28s; }
.quality-title .hero-line:nth-child(3) .hero-line__inner { animation-delay: 0.44s; }

/* =========================================================
   ANIMIRANI NASLOVNI BLOK U SEKCIJI (pause dok sekcija nije vidljiva)
   ---------------------------------------------------------
   Isti blok (hero-eyebrow + hero-title + hero-subtitle) koristi se i
   u heroju i na vrhu Brand Positioning sekcije. U heroju je iznad
   fold-a pa animacija ide odmah; u sekciji je ispod fold-a, pa bi bez
   ovoga animacija zavrsila prije nego je korisnik vidi.

   Reveal JS dodaje .is-visible djetetu .reveal-group (kolona), pa
   animaciju drzimo na "paused" dok ta klasa ne stigne.
   ========================================================= */

.reveal-group .hero-title .hero-line__inner,
.reveal-group .hero-eyebrow,
.reveal-group .hero-subtitle {
  animation-play-state: paused;
}

.reveal-group .is-visible .hero-title .hero-line__inner,
.reveal-group .is-visible .hero-eyebrow,
.reveal-group .is-visible .hero-subtitle {
  animation-play-state: running;
}

/* =========================================================
   SCROLL REVEAL (A+B) — lagana animacija sekcija
   A: .reveal (cijela sekcija) · B: .reveal-group (kartice stagger)
   ========================================================= */
.reveal,
.reveal-group > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s cubic-bezier(0.2, 0.7, 0.2, 1),
              transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: opacity, transform;
}

.reveal.is-visible,
.reveal-group > *.is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger u B: JS postavlja --rd na svaki child */
.reveal-group > * {
  transition-delay: calc(var(--rd, 0) * 70ms);
}

/* Poštuj korisnikov izbor manje pokreta */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-group > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* =========================================================
   COMMERCE BOX — custom single proizvod (WooCommerce engine)
   WC stilovi vrijede samo unutar .woocommerce; ovdje ih
   ponavljamo skopirano na .apx-buy-box.
   ========================================================= */
.apx-buy-box .price {
  font-size: 1.4rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
}

.apx-buy-box .price .woocommerce-Price-amount,
.apx-buy-box .price bdi {
  color: #ffffff;
}

.apx-buy-box .price del {
  opacity: 0.5;
  font-weight: 500;
  margin-right: 0.35rem;
}

.apx-buy-box .price ins {
  text-decoration: none;
}

.apx-buy-box .variations_form,
.apx-buy-box .cart {
  margin-top: var(--space-4);
}

/* A6 — JEDAN vidljivi selektor varijante (mg gumbi).
   Native WooCommerce <select> ostaje u DOM-u (wc-add-to-cart-variation.js
   čita/piše vrijednost iz njega), ali je vizualno skriven. Prije su
   postojala DVA selektora, a dropdown je znao ostati na "Choose an option"
   pa je Add to cart bio onemogućen. */
.apx-buy-box table.variations,
.apx-buy-box .reset_variations {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

.apx-buy-box table.variations td {
  border: none;
  padding: 0;
  background: transparent;
}

.apx-buy-box table.variations .label {
  padding-right: var(--space-3);
  color: var(--color-text-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.apx-buy-box table.variations .value {
  width: 100%;
}

.apx-buy-box select {
  width: 100%;
  background: var(--color-surface-2);
  color: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 0.55rem 0.75rem;
  font-size: 0.9rem;
  cursor: pointer;
}

.apx-buy-box .reset_variations {
  display: inline-block;
  margin-top: var(--space-2);
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-decoration: none;
}

.apx-buy-box .reset_variations:hover {
  color: var(--color-red);
}

.apx-buy-box .woocommerce-variation-price {
  margin: var(--space-2) 0;
}

.apx-buy-box .single_add_to_cart_button,
.apx-buy-box button.single_add_to_cart_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  background: var(--color-red);
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 0.8rem 1.25rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease;
}

.apx-buy-box .single_add_to_cart_button:hover {
  background: var(--color-red-dark);
}

.apx-buy-box .single_add_to_cart_button.disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.apx-buy-box .quantity {
  margin-bottom: var(--space-3);
}

.apx-buy-box .quantity .qty {
  background: var(--color-surface-2);
  color: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 0.6rem 0.75rem;
  width: 5rem;
  font-size: 0.9rem;
}

.apx-buy-box .woocommerce-variation-availability {
  margin-bottom: var(--space-2);
}

.apx-buy-box .stock {
  color: var(--color-gold);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Cijena u shop product-card petlji — bijela, bold, bez lomljenja flexa */
.alpenix-loop-price {
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 700;
  margin: 6px 0 4px;
  display: block;
}
.alpenix-loop-price .woocommerce-Price-amount,
.alpenix-loop-price bdi {
  color: #ffffff;
}

@media (max-width: 1023px) {
  /* ANIMIRANO OTVARANJE MENIJA (klijent 02.10.2026.).
     ------------------------------------------------------------------
     PRIJE: `.nav-list { display:none }` → `.is-open { display:flex }`.
     `display` NIJE animabilan property — browser preskoči tranziciju i meni
     se pojavi u jednom frameu ("skoči"). Zato nikakva animacija nije radila
     ni kad je `transition` bio napisan (osnovno pravilo ga ima za
     `max-height`, ali `display` ga pregazi).

     SADA: `display: flex` je STALAN, a sakriveno stanje se postiže trojkom
     koja JEST animabilna:
       visibility: hidden      → element nije fokusabilan ni klikabilan
       opacity: 0              → nevidljiv
       transform: translateY(-8px) scale(0.985) → lagano iznad + manji
     Uz `visibility` u tranziciji s `step-end` na zatvaranju, element se
     sakrije TEK kad animacija završi (inače bi nestao odmah).

     `.nav-list` je `position: absolute` pa je izvan toka — nema utjecaja na
     layout i ne izaziva reflow ostatka stranice. */
  /*
     ANIMACIJA PANELA (doradjeno 06.10.2026.) — klijent je trazio „ljepše".
     ------------------------------------------------------------------
     Prije: `translateY(-8px) scale(0.985)` + linearno-ish krivulje.
     Sada:
       - veca putanja (`-14px`) i blagi scale (0.98) → panel se osjetno
         „spusti" iz headera, a ne samo pojavi;
       - OTVARANJE koristi `cubic-bezier(0.16, 1, 0.3, 1)` (easeOutExpo):
         brz start, dugacko mekano slijeganje → djeluje skupo, bez „skoka";
       - ZATVARANJE koristi `cubic-bezier(0.4, 0, 1, 1)` (easeIn): panel
         ubrzava prema gore i cisti se brzo, pa zatvaranje ne djeluje tromo.
     `transform-origin: top center` znaci da scale krece od ruba headera.
     `visibility` s `step-end` na zatvaranju: element ostaje u toku dok
     animacija ne zavrsi, pa nema treptaja. */
  .nav-list {
    display: flex;                 /* stalno (bilo: none) */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-14px) scale(0.98);
    transform-origin: top center;
    pointer-events: none;
    /* dok je zatvoren, ne smije zauzimati ništa: visina 0 */
    height: 0;
    max-height: 0;
    overflow: hidden;
    transition:
      opacity 170ms cubic-bezier(0.4, 0, 1, 1),
      transform 230ms cubic-bezier(0.4, 0, 1, 1),
      visibility 230ms step-end,
      height 0ms linear 230ms;     /* visina se NE animira, postavi se na kraju */
  }

  .nav-list.is-open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    transition:
      opacity 240ms cubic-bezier(0.16, 1, 0.3, 1),
      transform 380ms cubic-bezier(0.16, 1, 0.3, 1),
      visibility 0ms linear,
      height 0ms linear;
  }

  /* Otvoreni meni je PREKRIVNI PANEL PREKO SADRŽAJA ("main"), a ne samo
     padajući popis: .site-header je `position: sticky`, pa je apsolutno
     dijete (.nav-list) pozicionirano po njemu. Visina = ostatak ekrana
     (`svh` = visina kad su mobilni toolbari VIDLJIVI), pa se ispod menija
     NIKAD ne vidi dio stranice. Ako je sadržaj viši od ekrana (mali mobitel
     / landscape), panel se sam scrolla — stari `max-height: 640px` je rezao
     zadnje stavke bez mogućnosti scrolla.

     NAMJERNO `svh`, a NE `dvh`: `dvh` se mijenja čim se mobilni toolbar
     sakrije/pokaže tijekom scrolla, pa je visina panela bila izračunata
     ispočetka praktički svaki frame — na mobitelu je to vidljivo trzanje,
     a na slabijim uređajima izgleda kao zamrznut browser. `svh` je
     KONSTANTAN i uvijek dovoljno mali da nijedna stavka ne ostane
     odrezana. */
  .nav-list.is-open {
    height: calc(100vh - var(--header-height));  /* fallback stariji browseri */
    height: calc(100svh - var(--header-height)); /* konstantno, bez reflowa */
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
    /* Visina se postavlja odmah (bez `height` tranzicije) — animiraju se
       samo `opacity` i `transform` iz gornjeg bloka. Animiranje visine na
       panelu od 100svh izaziva reflow na svakom frameu i vidljivo trzanje
       na mobitelu (istа lekcija kao `dvh` → `svh` u §22.31). */
  }

  /* Dok je meni otvoren, stranica iza se ne pomiče.
     POZOR: `overflow: hidden` na <html> čini <html> scroll-kontejnerom koji
     ne scrolla, pa `position: sticky` na `.site-header` prestaje funkcionirati
     — header se "zalijepi" na dokumentni vrh i odscrolla se izvan ekrana.
     Kako je `.nav-list` apsolutno dijete headera, i on završi izvan ekrana
     (npr. pri scrollY = 1200 panel je na y = −1124), pa klik na hamburger
     izgleda kao da se ništa nije dogodilo ("zamrznuta" stranica).
     Zato je header DOK JE MENI OTVOREN `position: fixed` (vidi dolje) —
     fiksiran na viewport pa panel uvijek počinje točno ispod njega. */
  html.apx-menu-open,
  html.apx-menu-open body { overflow: hidden; }

  /* Header izvan toka samo dok je meni otvoren. Panel prekriva cijeli ekran
     (od --header-height do dna), pa pomak sadržaja koji nastane jer header
     više ne zauzima 76 px u toku NIJE vidljiv. Pri zatvaranju se sve vraća
     na `position: sticky`, a scroll pozicija ostaje nepromijenjena. */
  html.apx-menu-open .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }

  /* Naslovi stavki mobilnog menija: +70 % (0.86rem → 1.462rem).
     Skaliraju se SVE stavke — navigacija, Home i Cart (`.nav-item > a`)
     te jezični podmeni (`.lang-link` 0.875rem × 1.7), a `.lang-trigger`
     je ispod već na novoj veličini — da sve ostane u istoj veličini.
     Bazno `.nav-item > a` (0.86rem) je izvan media queryja, pa ovo
     pravilo (isti selektor, kasnije u datoteci) sigurno pobjeđuje.
     Desktop ≥1024 px nije diran. */
  .nav-item > a { font-size: calc(0.86rem * 1.7); }
  .nav-lang .lang-link { font-size: calc(0.875rem * 1.7); }
  /* Ikone i badge unutar stavki su bile dimenzionirane na stari tekst
     (korpa 16 px, chevron 12 px), pa se skaliraju istim faktorom 1.7 —
     inače uz 23 px tekst ostaju vidljivo premale. */
  .nav-cart .nav-cart-ico { width: 27px; height: 27px; }
  .lang-trigger svg.nav-chevron,
  .nav-dropdown > a svg.nav-chevron { width: 20px; height: 20px; }
  /* Badge broja u košarici unutar menija.
     06.10.2026. — inline stil je UKLONJEN iz header.php (markup sada gradi
     `alpenix_nav_cart_item()` u inc/cart.php), pa `!important` nije
     potreban. Skaliran je istim faktorom 1.7 kao i tekst stavke (0.68rem
     → 1rem), da ostane proporcionalan većem tekstu na mobilnom. */
  .nav-cart .cart-count {
    min-width: 1.7rem;
    height: 1.7rem;
    padding: 0 0.45rem;
    font-size: 1rem;
  }

  /* Jezični podmeni: na mobitelu sklopljen i pisan istom veličinom kao
     ostale stavke; otvara ga isti klik (.is-open dodaje skripta u
     footer.php — do sada je taj toggle bio bez ikakvog CSS-a, pa je
     podmeni bio stalno otvoren i kvario poravnanje). */
  .nav-lang {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav-lang .lang-trigger {
    font-size: calc(0.86rem * 1.7); /* +70 %, isto kao .nav-item > a */
    color: var(--color-text-secondary);
  }
  .nav-lang .dropdown-menu { display: none; padding-left: var(--space-4); }
  .nav-lang .dropdown-menu.is-open { display: block; }
  .nav-lang .lang-link { padding: var(--space-2) var(--space-2); }

  /* ------------------------------------------------------------------
     STAGGER STAVKI (klijent 02.10.2026.) — kaskadno otvaranje/zatvaranje.
     Svaka stavka se pojavi s vlastitim malim kašnjenjem, pa meni ne
     „iskoči" kao blok nego se „izlije" odozgo prema dolje. Pri ZATVARANJU
     je redoslijed OBRNUT (zadnja stavka ide prva) — tako se meni
     „skupi" prema gore, što izgleda kao da se vraća u hamburger.

     `transition-delay` se postavlja na stavku, a `opacity`/`transform` na
     `.nav-item` (i `li` unutar jezičnog podmenija). Ne diramo `height`
     (reflow) ni `display` (nije animabilno) — samo compositor-friendly
     svojstva.

     `--apx-i` je indeks koji postavlja CSS `nth-child` (nema JS-a).
     Stagger je namjerno kratak (35 ms) da ukupno trajanje ostane < 250 ms
     i da meni ne djeluje „usporeno" pri brzom otvaranju.
     ------------------------------------------------------------------ */
  .nav-list .nav-item {
    opacity: 0;
    /* S putanjom od 12px i „settle" krivuljom stavka se osjetno spusti,
       pa se meni doima kao da se sadrzaj izlije iz headera. */
    transform: translateY(-12px);
    transition:
      opacity 150ms cubic-bezier(0.4, 0, 1, 1),
      transform 170ms cubic-bezier(0.4, 0, 1, 1);
  }
  .nav-list.is-open .nav-item {
    opacity: 1;
    transform: translateY(0);
    transition:
      opacity 260ms cubic-bezier(0.16, 1, 0.3, 1),
      transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* Stagger pri OTVARANJU: 0, 45, 90, 135 ms …
     Malo veci korak nego prije (35 → 45 ms) da se kaskada jasnije vidi,
     ali ukupno trajanje ostaje < 300 ms za prvih pet stavki. */
  .nav-list.is-open .nav-item:nth-child(1) { transition-delay: 0ms; }
  .nav-list.is-open .nav-item:nth-child(2) { transition-delay: 45ms; }
  .nav-list.is-open .nav-item:nth-child(3) { transition-delay: 90ms; }
  .nav-list.is-open .nav-item:nth-child(4) { transition-delay: 135ms; }
  .nav-list.is-open .nav-item:nth-child(5) { transition-delay: 180ms; }
  .nav-list.is-open .nav-item:nth-child(n+6) { transition-delay: 220ms; }

  /* Stagger pri ZATVARANJU: obrnuti redoslijed (zadnja prva) i kratak
     korak (25 ms) — meni se mora „skupiti" brzo, bez cekanja.
     Ovdje su delayi na ZATVORENOM selektoru (bez `.is-open`), pa se
     primjenjuju u trenutku kad klasa padne. */
  .nav-list .nav-item:nth-child(1) { transition-delay: 125ms; }
  .nav-list .nav-item:nth-child(2) { transition-delay: 100ms; }
  .nav-list .nav-item:nth-child(3) { transition-delay: 75ms; }
  .nav-list .nav-item:nth-child(4) { transition-delay: 50ms; }
  .nav-list .nav-item:nth-child(5) { transition-delay: 25ms; }
  .nav-list .nav-item:nth-child(n+6) { transition-delay: 0ms; }
}

/* =========================================================
   HAMBURGER (mobilni/tablet <1024px): desno + ~20% veći
   ========================================================= */
/* Home stavka: vidljiva SAMO dok je hamburger meni otvoren
   (.nav-list.is-open). Na desktopu se meni ne otvara pa je
   Home trajno skriven — ne može se vidjeti prije klika. */
.nav-item-home { display: none; }
.nav-list.is-open .nav-item-home { display: list-item; }
@media (max-width: 1023px) {
  .header-inner .brand { order: 1; }
  .header-inner nav { order: 2; }

  /*
     REDOSLIJED U HEADERU (mobilni):
       1  logo
       2  nav (nevidljiv dok se ne otvori — `position: absolute` panel)
       3  košarica (SAMO kad nije prazna; `margin-left: auto` gura je desno)
       4  hamburger / X

     `margin-left: auto` je NAMJERNO na košarici, a ne na hamburgeru:
     košarica je u DOM-u UVIJEK (i prazna, sirine 0), pa ona preuzme
     slobodan prostor i gurne hamburger skroz desno. Da je `auto` na
     hamburgeru, prazna košarica bi ostala „zalijepljena" uz nav i
     razmak bi se vidio na pogrešnoj strani.
  */
  .header-inner { position: relative; }

  /* --- HAMBURGER / X (jedan gumb, ikona se morfira) ------------------
     53×53 px je dodirna povrsina; ikona je 26×18 px (`nav-toggle__bars`).
     Crte same nisu u <svg>, pa im se `width`/`height` postavlja na
     roditelju `.nav-toggle__bars`. */
  .header-inner .nav-toggle { order: 4; }
  .nav-toggle {
    width: 53px;
    height: 53px;
  }
  .nav-toggle__bars {
    width: 26px;
    height: 18px;
  }
  /* `2px` debljina na 18px visine → 3 crte s razmakom od 8px */
  .nav-toggle__bars > span { height: 2px; }

  /* --- KOŠARICA U HEADERU -------------------------------------------
     Vidljiva samo kad košarica NIJE prazna (PHP tada ispise <a> unutar
     slota; prazan slot nema sadrzaja pa se ni ne vidi).
     `margin-left: auto` gura je uz hamburger. */
  .apx-header-cart {
    order: 3;
    display: flex;
    align-items: center;
    margin-left: auto;
    margin-right: var(--space-1);
  }
  .apx-header-cart__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 53px;
    height: 53px;
    color: var(--color-text-primary);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: color 160ms ease, background 160ms ease;
  }
  .apx-header-cart__link:hover,
  .apx-header-cart__link:focus-visible {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.06);
  }
  /* Ikonu crta helper (inline SVG), pa je dimenzioniramo preko njenih
     atributa `width`/`height` koje postavlja `alpenix_icon()` — ovdje
     samo osiguravamo da se ne skalira drugacije. */
  .apx-header-cart__ico { width: 26px; height: 26px; }

  /* Broj artikala — crveni badge u gornjem desnom kutu ikone. */
  .apx-header-cart__count {
    position: absolute;
    top: 7px;
    right: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 0.25rem;
    background: var(--color-red);
    color: #ffffff;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
  }

  /*
     KOŠARICA UNUTAR MENIJA — na mobilnom se SKRIVA kad košarica nije
     prazna, jer je tada gumb u headeru (zahtjev klijenta 06.10.2026.).
     Kad je prazna, ostaje u meniju kao i dosad.
     Na desktopu (≥1024px) ovo pravilo ne vrijedi — tamo je uvijek u meniju.
  */
  .nav-cart-item.has-items { display: none; }
}

/* =========================================================
   PROIZVOD — SEKCIJE SADRŽAJA IZ INFOGRAFIKA (apx-sec)
   ---------------------------------------------------------
   Renderira ih alpenix_render_product_sections()
   (inc/product-sections.php). Podaci: post meta _apx_sections
   (metabox "ALPENIX — katalog podaci") uz seed fallback.
   Akcent dolazi iz grupe proizvoda preko --apx-accent.
   ========================================================= */
.apx-sec { padding: var(--space-12) 0; }
.apx-sec--alt { background: var(--color-bg-secondary); }

.apx-sec__head { max-width: 820px; margin-bottom: var(--space-8); }

.apx-sec__title {
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: var(--space-4);
}

.apx-sec__intro {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--color-text-secondary);
}

.apx-sec__outro {
  margin-top: var(--space-6);
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--color-text-secondary);
  border-left: 2px solid var(--apx-accent, var(--color-red));
  padding-left: var(--space-4);
}

/* --- Kartice (ikona + naslov + tekst) --- */
.apx-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
.apx-cards--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.apx-cards--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.apx-cards--5 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.apx-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: border-color var(--transition-normal);
}

.apx-card__num {
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 1.6rem;
  font-weight: 750;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px #2E2E2E;
  letter-spacing: -0.02em;
  pointer-events: none;
}

.apx-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--apx-accent, var(--color-red));
}
.apx-card__icon svg { width: 26px; height: 26px; }

.apx-card__title {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
}

.apx-card__text {
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--color-text-muted);
}

@media (min-width: 1024px) {
  .apx-card:hover { border-color: var(--apx-accent, var(--color-red)); }
}

/* --- Pločice (naslov + tekst) --- */
.apx-tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
.apx-tile {
  border: 1px solid var(--color-border);
  border-left: 2px solid var(--apx-accent, var(--color-red));
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
.apx-tile__title {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: var(--space-2);
}
.apx-tile__text {
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--color-text-muted);
}

@media (min-width: 768px) {
  .apx-tiles { grid-template-columns: repeat(3, 1fr); }
}

/* --- Lanac koraka --- */
.apx-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.apx-step {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #fff;
}
.apx-steps__arrow {
  color: var(--apx-accent, var(--color-red));
  font-size: 1rem;
  line-height: 1;
}
.apx-steps__result {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--apx-accent, var(--color-red));
  margin-bottom: var(--space-5);
}
.apx-steps__list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
.apx-steps__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

@media (min-width: 768px) {
  .apx-steps__list { grid-template-columns: repeat(2, 1fr); }
}

/* --- Kružići s vremenom --- */
.apx-clocks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--space-5);
}
.apx-clock { text-align: center; }
.apx-clock__dial {
  width: 104px;
  height: 104px;
  margin: 0 auto var(--space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-top: 2px solid var(--apx-accent, var(--color-red));
  border-radius: 50%;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--color-surface);
}
.apx-clock__label {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* --- Tabela labela/vrijednost --- */
.apx-facts {
  max-width: 640px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.apx-facts__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
}
.apx-facts__row:nth-child(even) { background: var(--color-bg-tertiary); }
.apx-facts__label {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.apx-facts__value {
  font-size: 0.9rem;
  text-align: right;
  font-weight: 500;
  color: #fff;
}

/* --- Liste s kvačicama --- */
.apx-checks {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
.apx-checks--single { max-width: 820px; }
.apx-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
}
.apx-check__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--apx-accent, var(--color-red));
  margin-top: 2px;
}
.apx-check__icon svg { width: 16px; height: 16px; }

@media (min-width: 768px) {
  .apx-checks { grid-template-columns: repeat(2, 1fr); }
  .apx-checks--single { grid-template-columns: 1fr; }
}

/* --- Bullet / numerisana lista --- */
.apx-list {
  list-style: none;
  display: grid;
  gap: var(--space-3);
  max-width: 900px;
}
.apx-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--color-text-secondary);
}
.apx-list__dot {
  width: 5px;
  height: 5px;
  margin-top: 9px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--apx-accent, var(--color-red));
}
.apx-list__num {
  flex-shrink: 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--apx-accent, var(--color-red));
  min-width: 18px;
}

/* --- Paragrafi --- */
.apx-paras { max-width: 820px; }
.apx-paras p {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}
.apx-paras p:last-child { margin-bottom: 0; }

.apx-note {
  margin-top: var(--space-5);
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--color-text-secondary);
  border-left: 2px solid var(--apx-accent, var(--color-red));
  padding-left: var(--space-4);
}

/* --- Notice (upozorenje) --- */
.apx-notice {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  background: var(--color-surface-2);
}
.apx-notice__icon {
  display: flex;
  flex-shrink: 0;
  color: var(--color-gold);
}
.apx-notice__icon svg { width: 28px; height: 28px; }
.apx-notice__body { flex: 1; }

/* =========================================================
   RASPORED PROIZVODA — V2 (redizajn)
   ---------------------------------------------------------
   Aktivira se preko alpenix_is_section_layout_v2()
   (inc/product-render.php). Trenutno: nad-plus (pilot).

   Tokeni
   - akcent sekcija = crvena (--color-red #D42828) na svim
     proizvodima, bez obzira na grupu
   - zlatna (--color-gold) SAMO u "Quality & batch
     traceability" sekciji i na QR bloku
   - ritam: hairline razdvajanje, bez izmjene pozadina
   - sav sadržaj i redoslijed sekcija ostaju nepromijenjeni
   ========================================================= */

.apx-v2 {
  --apx-gutter: clamp(1.5rem, 3vw, 3.25rem);
  --apx-rail-w: clamp(168px, 17vw, 242px);
  --apx-line: rgba(255, 255, 255, 0.07);
  --apx-line-soft: rgba(255, 255, 255, 0.045);
  --apx-tint: rgba(212, 40, 40, 0.1);
  --apx-tint-border: rgba(212, 40, 40, 0.3);
  --apx-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.038) 0%, rgba(255, 255, 255, 0.012) 100%);
}

/* ---------------------------------------------------------
   1) Ritam sekcija — hairline, bez izmjene pozadina
   --------------------------------------------------------- */
.apx-v2 .apx-sec {
  padding: clamp(2.5rem, 4.5vw, 4rem) 0;
  scroll-margin-top: calc(var(--header-height) + 4.75rem);
}
.apx-v2 .apx-sec + .apx-sec { border-top: 1px solid var(--color-hairline); }
.apx-v2 .apx-sec-nav + .apx-sec { padding-top: clamp(2rem, 3.5vw, 3rem); }

/* ---------------------------------------------------------
   2) Dvokolona shell: sticky rail (broj + naslov) | sadržaj
   --------------------------------------------------------- */
.apx-v2 .apx-sec__grid { display: grid; gap: var(--space-5); }

/* Osnovno (mobilno): normalan tok, BEZ position:relative —
   relative + top iz media queryja pomicao je naslov 152px nadolje. */
.apx-v2 .apx-sec__aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-left: var(--space-4);
  /* Grid item default je min-width:auto -> dugacka rijec siri kolonu
     i naslov izlazi preko sadrzaja. 0 + overflow-wrap to sprecava. */
  min-width: 0;
}

@media (min-width: 1024px) {
  .apx-v2 .apx-sec__grid {
    grid-template-columns: var(--apx-rail-w) 1fr;
    gap: var(--apx-gutter);
  }
  .apx-v2 .apx-sec__aside {
    position: sticky;
    top: calc(var(--header-height) + 4.75rem);
    align-self: start;
  }
}

/* vertikalni rail — akcent na vrhu, zatim prigušen */
.apx-v2 .apx-sec__aside::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 1px;
  background: linear-gradient(
    180deg,
    var(--apx-accent, var(--color-red)) 0%,
    var(--apx-line) 45%,
    var(--apx-line-soft) 100%
  );
}

.apx-v2 .apx-sec__num {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  line-height: 1;
  color: var(--apx-accent, var(--color-red));
}

.apx-v2 .apx-sec__title {
  text-transform: none;
  font-size: clamp(1.05rem, 1.5vw, 1.32rem);
  font-weight: 650;
  letter-spacing: -0.012em;
  line-height: 1.28;
  color: #fff;
  margin: 0;
  text-wrap: balance;
  /* Dugi njemacki naslovi (npr. INFORMATIONEN ZUR FORSCHUNGSVERWENDUNG):
     lomi rijeci unutar kolone uz hyphenation kad jezik to podrzava. */
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}

.apx-v2 .apx-sec__body { min-width: 0; }

/* ---------------------------------------------------------
   3) Tipografija tijela sekcije
   --------------------------------------------------------- */
.apx-v2 .apx-sec__intro {
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--color-text-secondary);
  max-width: 74ch;
  margin-bottom: var(--space-5);
}

.apx-v2 .apx-sec__outro {
  margin-top: var(--space-5);
  padding-left: var(--space-4);
  border-left: 2px solid var(--apx-accent, var(--color-red));
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--color-text-secondary);
}

.apx-v2 .apx-note {
  margin-top: var(--space-5);
  padding-left: var(--space-4);
  border-left: 2px solid var(--apx-accent, var(--color-red));
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--color-text-secondary);
}

/* ---------------------------------------------------------
   4) Kartice — hairline / "glass" površina
   --------------------------------------------------------- */
.apx-v2 .apx-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

@media (min-width: 768px) {
  .apx-v2 .apx-cards { grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); }
}

@media (min-width: 1024px) {
  .apx-v2 .apx-cards--3 { grid-template-columns: repeat(3, 1fr); }
  .apx-v2 .apx-cards--4 { grid-template-columns: repeat(4, 1fr); }
  .apx-v2 .apx-cards--5 { grid-template-columns: repeat(5, 1fr); }
}

.apx-v2 .apx-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--apx-line);
  border-radius: 10px;
  background: var(--apx-surface);
  transition: border-color 200ms ease, transform 200ms ease;
}

/* akcentna linija na vrhu kartice */
.apx-v2 .apx-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--apx-accent, var(--color-red));
  opacity: 0.75;
}

.apx-v2 .apx-card__num {
  top: 14px;
  right: 16px;
  font-size: 1.4rem;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.14);
}

/* Ikona bez boxa — samo znak u akcentnoj boji. */
.apx-v2 .apx-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--apx-accent, var(--color-red));
}

.apx-v2 .apx-card__icon svg { width: 22px; height: 22px; }

.apx-v2 .apx-card__title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1.4;
  color: #ededed;
}

.apx-v2 .apx-card__text {
  font-size: 0.83rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

@media (min-width: 1024px) {
  .apx-v2 .apx-card:hover {
    border-color: var(--apx-tint-border);
    transform: translateY(-2px);
  }
}

/* ---------------------------------------------------------
   5) Pločice (General Research Information i sl.)
   --------------------------------------------------------- */
.apx-v2 .apx-tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

@media (min-width: 768px) {
  .apx-v2 .apx-tiles { grid-template-columns: repeat(3, 1fr); }
}

.apx-v2 .apx-tile {
  position: relative;
  padding: var(--space-4);
  border: 1px solid var(--apx-line);
  border-left: 2px solid var(--apx-accent, var(--color-red));
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.016);
}

.apx-v2 .apx-tile__title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #ededed;
  margin-bottom: var(--space-2);
}

.apx-v2 .apx-tile__text {
  font-size: 0.83rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* ---------------------------------------------------------
   6) Spec strip (At a glance / Steckbrief)
   --------------------------------------------------------- */
.apx-v2 .apx-facts {
  max-width: none;
  border: 0;
  border-top: 1px solid var(--apx-line);
  border-radius: 0;
  overflow: visible;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.apx-v2 .apx-facts__row {
  position: relative;
  display: block;
  padding: var(--space-4) var(--space-4) var(--space-4) 0;
  border-bottom: 1px solid var(--apx-line);
}

.apx-v2 .apx-facts__row::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 18px;
  height: 2px;
  background: var(--apx-accent, var(--color-red));
}

.apx-v2 .apx-facts__row:nth-child(even) { background: none; }

.apx-v2 .apx-facts__label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.apx-v2 .apx-facts__value {
  display: block;
  text-align: left;
  font-size: 0.85rem;
  line-height: 1.45;
  font-weight: 500;
  color: #ededed;
}

/* ---------------------------------------------------------
   7) Procesni rail (Mechanism of action, Cell migration)
   --------------------------------------------------------- */
.apx-v2 .apx-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-bottom: var(--space-4);
  border-top: 1px solid var(--apx-line);
  counter-reset: apx-step;
}

@media (min-width: 768px) {
  .apx-v2 .apx-steps { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

.apx-v2 .apx-step {
  position: relative;
  counter-increment: apx-step;
  border: 0;
  border-radius: 0;
  background: none;
  padding: var(--space-5) var(--space-4) var(--space-4) 0;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.45;
  color: #ededed;
}

/* broj koraka */
.apx-v2 .apx-step::before {
  content: counter(apx-step, decimal-leading-zero);
  display: block;
  margin-bottom: 6px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--apx-accent, var(--color-red));
}

/* čvor na liniji */
.apx-v2 .apx-step::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--apx-accent, var(--color-red));
}

.apx-v2 .apx-steps__arrow { display: none; }

.apx-v2 .apx-steps__result {
  display: block;
  margin: var(--space-4) 0;
  padding-left: var(--space-4);
  border-left: 2px solid var(--apx-accent, var(--color-red));
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--apx-accent, var(--color-red));
}

.apx-v2 .apx-steps__list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  max-width: 74ch;
}

@media (min-width: 768px) {
  .apx-v2 .apx-steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.apx-v2 .apx-steps__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

/* ---------------------------------------------------------
   8) Kružići s vremenom (Epitalon — Biological rhythms)
   --------------------------------------------------------- */
.apx-v2 .apx-clocks {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--apx-line);
}

@media (min-width: 768px) {
  .apx-v2 .apx-clocks { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
}

.apx-v2 .apx-clock {
  position: relative;
  text-align: left;
  padding: var(--space-5) var(--space-4) var(--space-4) 0;
}

.apx-v2 .apx-clock::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--apx-accent, var(--color-red));
}

.apx-v2 .apx-clock__dial {
  width: auto;
  height: auto;
  margin: 0 0 4px;
  display: block;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #fff;
}

.apx-v2 .apx-clock__label {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

/* ---------------------------------------------------------
   9) Liste i kvačice
   --------------------------------------------------------- */
.apx-v2 .apx-checks {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.apx-v2 .apx-checks--single { max-width: 74ch; }

@media (min-width: 768px) {
  .apx-v2 .apx-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .apx-v2 .apx-checks--single { grid-template-columns: 1fr; }
}

.apx-v2 .apx-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

/* Ikona bez boxa — samo znak u akcentnoj boji. */
.apx-v2 .apx-check__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 3px;
  color: var(--apx-accent, var(--color-red));
}

.apx-v2 .apx-check__icon svg { width: 14px; height: 14px; }

.apx-v2 .apx-list {
  list-style: none;
  display: grid;
  gap: var(--space-2);
  max-width: 74ch;
}

.apx-v2 .apx-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--color-text-secondary);
}

.apx-v2 .apx-list__dot {
  width: 5px;
  height: 5px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--apx-accent, var(--color-red));
}

.apx-v2 .apx-list__num {
  min-width: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--apx-accent, var(--color-red));
}

@media (min-width: 1024px) {
  .apx-v2 .apx-list--numbered { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------
   10) Paragrafi
   --------------------------------------------------------- */
.apx-v2 .apx-paras { max-width: 74ch; }

.apx-v2 .apx-paras p {
  font-size: 0.92rem;
  line-height: 1.75;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-3);
}

.apx-v2 .apx-paras p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------
   11) Notice (vlastito upozorenje proizvoda)
   --------------------------------------------------------- */
.apx-v2 .apx-notice {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-5);
  border: 1px solid var(--apx-line);
  border-left: 2px solid var(--apx-accent, var(--color-red));
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.016);
}

.apx-v2 .apx-notice__icon { color: var(--apx-accent, var(--color-red)); }
.apx-v2 .apx-notice__icon svg { width: 24px; height: 24px; }
.apx-v2 .apx-notice__body { flex: 1; min-width: 0; }
.apx-v2 .apx-notice .apx-list { max-width: none; }

/* ---------------------------------------------------------
   12) Sticky indeks sekcija (anchor navigacija)
   --------------------------------------------------------- */
.apx-sec-nav {
  position: sticky;
  top: var(--header-height);
  z-index: 20;
  background: rgba(11, 11, 11, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-hairline);
}

.apx-sec-nav__inner {
  display: flex;
  gap: var(--space-5);
  overflow-x: auto;
  padding: var(--space-3) 0;
  scrollbar-width: none;
}

.apx-sec-nav__inner::-webkit-scrollbar { display: none; }

.apx-sec-nav a {
  position: relative;
  flex: 0 0 auto;
  padding-bottom: 3px;
  white-space: nowrap;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  transition: color 180ms ease;
}

.apx-sec-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--color-red);
  transition: right 200ms ease;
}

.apx-sec-nav a:hover { color: #fff; }
.apx-sec-nav a:hover::after { right: 0; }

/* ---------------------------------------------------------
   13) Quality & batch traceability — jedina zlatna sekcija
   --------------------------------------------------------- */
.apx-v2 .apx-sec--quality {
  --apx-tint: rgba(200, 164, 86, 0.12);
  --apx-tint-border: rgba(200, 164, 86, 0.32);
}

.apx-v2 .apx-sec--quality .apx-sec__title { color: var(--color-gold); }

.apx-v2 .apx-quality__grid { display: grid; gap: var(--space-5); }

@media (min-width: 768px) {
  .apx-v2 .apx-quality__grid {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--space-8);
  }
}

.apx-v2 .apx-quality__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.apx-v2 .apx-quality__badges span {
  padding: 0.22rem 0.62rem;
  border: 1px solid rgba(200, 164, 86, 0.45);
  border-radius: 5px;
  background: rgba(200, 164, 86, 0.06);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--color-gold);
}

.apx-v2 .apx-quality__qr {
  width: 172px;
  height: 172px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: 1px solid var(--apx-tint-border);
  border-radius: 10px;
  background: var(--apx-tint);
  text-align: center;
}

.apx-v2 .apx-quality__qr svg { width: 62px; height: 62px; }

.apx-v2 .apx-quality__scan {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.apx-v2 .apx-quality__batch {
  font-size: 0.62rem;
  color: var(--color-text-faint);
}

.apx-v2 .apx-quality__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--apx-line);
}

/* ---------------------------------------------------------
   13b) SIMILAR PRODUCTS — horizontalni slider
   ---------------------------------------------------------
   Sekcija stoji IZNAD „Quality & batch traceability" na svakom
   single proizvodu (inc/product-render.php →
   alpenix_product_similar_block()).

   - rail + sadržaj: ista .apx-sec__grid shema kao ostale sekcije
   - traka: grid-auto-flow:column (jedan red), scroll-snap,
     skriveni scrollbar; strelice u railu pomiču za jednu karticu
   - kartice: postojeći .product-card s /products/ (iste mobilne
     @media prilagodbe vrijede i ovdje)
   - fade na desnom rubu dok ima još sadržaja (.is-end / .is-static
     ga isključuju)

   --apx-sim-col: koliko kartica stane u vidljivi dio trake
     < 600px  → 2 kartice
     ≥ 600px  → 3 kartice
     ≥ 1024px → fiksno 240px (3 pune + 4. „viri" = znak da se
                traka može pomicati)
   --------------------------------------------------------- */
.apx-sec--similar { --apx-sim-gap: var(--space-4); }

/* Klase strelica/trake i shell su NAMJERNO bez `.apx-v2` prefiksa:
   blok se renderira i u "legacy" grani (inc/product-render.php,
   $profile_pars fallback) koja nema omotač `.apx-v2`. Tokeni zato
   imaju fallback vrijednost. */
.apx-sec--similar .apx-sec__grid { display: grid; gap: var(--space-5); }
.apx-sec--similar .apx-sec__aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-left: var(--space-4);
  min-width: 0;
}
/* BEZ ovoga grid stavka ima min-width:auto → kolona naraste na punu
   širinu trake (8 × 240px) i cijela stranica dobije horizontalni scroll.
   U `.apx-v2` shellu to rješava `.apx-v2 .apx-sec__body`. */
.apx-sec--similar .apx-sec__body { min-width: 0; }

.apx-sim__arrows {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.apx-sim__btn {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: 1px solid var(--apx-line, rgba(255, 255, 255, 0.07));
  border-radius: 50%;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast);
}

.apx-sim__btn svg { width: 17px; height: 17px; }
.apx-sim__btn--prev svg { transform: rotate(180deg); }
.apx-sim__btn:hover:not(:disabled) { border-color: var(--color-red); color: #fff; }
.apx-sim__btn:disabled { opacity: 0.28; cursor: default; }

.apx-sim { position: relative; }

.apx-sim__track {
  --apx-sim-col: calc((100% - var(--apx-sim-gap)) / 2);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--apx-sim-col);
  gap: var(--apx-sim-gap);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* vertikalni padding: hover podigne karticu 3px i ne smije se odrezati */
  padding: 6px 0 4px;
}

.apx-sim__track::-webkit-scrollbar { display: none; }

.apx-sim__item {
  display: block;
  scroll-snap-align: start;
}

.apx-sim__item .product-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.apx-sim__item .card-meta { margin-top: auto; }

/* fade prema rubu — dok se traka može pomicati udesno */
.apx-sim::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 0;
  bottom: 4px;
  width: 56px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(11, 11, 11, 0), var(--color-bg-primary));
  transition: opacity var(--transition-normal);
}

/* Stanja (is-start / is-end / is-static) postavlja JS na <section
   data-apx-sim> — vidi alpenix_product_similar_block() u
   inc/product-render.php. Kad sve kartice stanu u vidljivi dio trake,
   strelice se skrivaju. */
.apx-sec--similar.is-end .apx-sim::after,
.apx-sec--similar.is-static .apx-sim::after { opacity: 0; }
.apx-sec--similar.is-static .apx-sim__arrows { display: none; }

@media (max-width: 767px) {
  .apx-sec--similar { --apx-sim-gap: 12px; }
}

@media (min-width: 600px) {
  .apx-sim__track { --apx-sim-col: calc((100% - (2 * var(--apx-sim-gap))) / 3); }
}

@media (min-width: 1024px) {
  .apx-sec--similar { --apx-sim-gap: var(--space-5); }
  /* Ista rail shema kao `.apx-v2 .apx-sec__grid` (u v2 se obje
     vrijednosti razrješavaju na iste tokene, u legacy grani padaju
     na fallback). */
  .apx-sec--similar .apx-sec__grid {
    grid-template-columns: var(--apx-rail-w, clamp(168px, 17vw, 242px)) 1fr;
    gap: var(--apx-gutter, var(--space-5));
  }
  /* Fiksna širina kartice (kao na /products/, samo malo uža) — tako 4.
     kartica uvijek viri iza treće i traka je očito pomična. */
  .apx-sim__track { --apx-sim-col: 240px; }
}

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

/* ---------------------------------------------------------
   14) Fokus (pristupačnost)
   --------------------------------------------------------- */
.apx-v2 a:focus-visible,
.apx-sec-nav a:focus-visible,
.apx-v2 .apx-dose-option:focus-visible,
.apx-sim__btn:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 2px;
  border-radius: 3px;
}

/* =========================================================
   BAR CHART (tip sekcije "bars")
   ---------------------------------------------------------
   Koristi ga CJC-1295 "Research Progress" / "Forschungsfortschritt".
   Renderira alpenix_render_sec_bars() u inc/product-sections.php.

   Shema stavke: { label_en, label_de, value, note_en, note_de }
   Opciono na sekciji: max (skala), unit_en/unit_de (jedinica uz vrijednost).
   Ako nema stavki, grafikon se ne prikazuje — samo tekstualni blokovi.
   ========================================================= */

.apx-bars {
  display: grid;
  gap: var(--space-5);
  max-width: 820px;
  margin-top: var(--space-5);
}

.apx-bar { display: grid; gap: var(--space-2); }

.apx-bar__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}

.apx-bar__label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ededed;
}

.apx-bar__value {
  flex: 0 0 auto;
  font-size: 0.9rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--apx-accent, var(--color-red));
}

.apx-bar__track {
  position: relative;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

.apx-bar__fill {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(
    90deg,
    var(--apx-accent, var(--color-red)) 0%,
    color-mix(in srgb, var(--apx-accent, var(--color-red)) 62%, transparent) 100%
  );
}

/* Fallback za preglednike bez color-mix(): puna akcentna boja. */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .apx-bar__fill { background: var(--apx-accent, var(--color-red)); }
}

.apx-bar__note {
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* --- V2 varijanta (dvokoloni raspored) --- */
.apx-v2 .apx-bars { max-width: 74ch; }

/* Na uskim ekranima labela i vrijednost idu jedno pod drugo. */
@media (max-width: 560px) {
  .apx-bar__head { flex-direction: column; gap: 2px; }
  .apx-bar__value { align-self: flex-start; }
}

/* =========================================================
   FACT BAR — tri ikone u jednom redu (About / Brand Introduction)
   ---------------------------------------------------------
   Nalazi se UNUTAR lijeve kolone hero grida, odmah ispod paragrafa.
   Tri stavke stoje u JEDNOM REDU unutar kolone od 580px.
   Ikone 48px (bazna) / 43px (--compact), ujednačene optičke
   veličine — sve ~19.9 viewBox jedinica (raspon 1.2%).
   Na užim ekranima red se loma u više redova (flex-wrap).
   SVG: icon-swiss-company, icon-eu-tested, icon-shipped-ch.
   ========================================================= */

.apx-factbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin-top: var(--space-6);
}

.apx-factbar__item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.apx-factbar__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-red);
}

.apx-factbar__icon svg {
  width: 48px;
  height: 48px;
  stroke-width: 0.7;
}

/* Klijentske „fact" ikone (03.10.2026.) — na mjestima gdje se tri ikone
   pojavljuju zajedno (Quality & Testing / About i DE verzije) SVG je
   zamijenjen PNG setom iz assets/img/icons/hero/. Velicina je
   NEPROMIJENJENA (48 px, compact 43 px).
   `display: block` uklanja prazninu koju inline <img> ostavlja na baselineu
   — bez toga se visina reda poveca ~6 % jer se rezervira prostor za
   descendere fonta. `height: auto` + `aspect-ratio` cuvaju kvadrat. */
.apx-factbar__icon img {
  display: block;
  width: 48px;
  height: auto;
  aspect-ratio: 1 / 1;
}

.apx-factbar__label {
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
  color: #ededed;
  white-space: nowrap;
}

/* ---------------------------------------------------------
   FACT BAR — kompaktna varijanta (Quality & Testing stranica)
   ---------------------------------------------------------
   Njemačke labele na ovoj stranici su duže (Erster Laborreport,
   Unabhängige EU-Prüfung, Zweifach verifizierbar), pa bazna
   veličina (40px / 0.64rem) traži 613px u koloni od 580px.
   Ova varijanta: 43px / 0.58rem / gap 8-12.
   ========================================================= */

.apx-factbar--compact {
  gap: 12px;
}

.apx-factbar--compact .apx-factbar__item {
  gap: 8px;
}

.apx-factbar--compact .apx-factbar__icon svg {
  width: 43px;
  height: 43px;
}

.apx-factbar--compact .apx-factbar__icon img {
  width: 43px;
}

.apx-factbar--compact .apx-factbar__label {
  font-size: 0.58rem;
  letter-spacing: 0.04em;
}

/* =========================================================
   CONTACT LINKS — red linkova u kartici "Accessible service"
   ---------------------------------------------------------
   Koristi se u sadržaju stranice (wp-admin HTML), npr. About →
   Brand Characteristics → "Accessible service":
     <p class="apx-contact-links">
       <a href="...">WhatsApp</a><a href="...">Telegram</a><a href="...">E-mail</a>
     </p>
   Izdvojeno od opisa (hairline gore), tanki crveni linkovi s
   točkom kao separatorom. Lome se u više redova u uskoj kartici.
   ========================================================= */

.apx-contact-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 0;
  margin: var(--space-3) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-hairline);
}

.apx-contact-links a {
  position: relative;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  line-height: 1.5;
  color: var(--color-red);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.apx-contact-links a:hover {
  border-bottom-color: var(--color-red);
}

/* separator "·" izmedju linkova (ne prije prvog) */
.apx-contact-links a + a::before {
  content: "·";
  display: inline-block;
  margin: 0 8px;
  color: var(--color-text-faint);
  border: 0;
}

/* ---------------------------------------------------------
   DOUBLE CONTROL — ikona + labela (Quality control process)
   ---------------------------------------------------------
   Srednja kolona izmedju "Prüfstufe 1" i "Prüfstufe 2".
   Zamjenjuje tekstualni pill. Ikona: icon-double-control
   (dvije strelice suprotnih smjerova).
   ========================================================= */

.apx-double-control {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}

.apx-double-control__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-red);
}

.apx-double-control__icon svg {
  width: 42px;
  height: 42px;
  stroke-width: 0.7;
}

.apx-double-control__label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--color-red);
}

/* ---------------------------------------------------------
   JANOSHIK SEAL — slika sigurnosne naljepnice (Quality stranica)
   ---------------------------------------------------------
   DESNA kolona sekcije "How to verify authenticity at Janoshik"
   (box s formom je lijevo). Slika je portrait (592x1229, omjer
   ~1:2.08) i rastegnuta je na TOCNU visinu boxa: grid ima
   align-items:stretch, kolona se rasteze, a img height:100%.
   Sirina se izvodi iz omjera (~235px pri visini 488px).
   ========================================================= */

.apx-janoshik-seal {
  position: relative;
  min-height: 0;
  /* Bez sadrzaja u toku: visinu kolone odreduje ISKLJUCIVO box,
     pa grid red = visina boxa. Bez ovoga bi slika (svojom
     prirodnom visinom) povukla red i box za sobom. */
}

.apx-janoshik-seal img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 100%;           /* = visina boxa */
  width: auto;            /* sirina iz omjera slike (~235px) */
  max-width: 100%;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(0,0,0,0.55);
}

/* U jednom stupcu (mobitel) nema boxa uz sliku — vrati sliku
   u normalan tok i ogranici visinu. */
@media (max-width: 767px) {
  .apx-janoshik-seal img {
    position: static;
    transform: none;
    height: auto;
    max-height: 420px;
    display: block;
    margin: 0 auto;
  }
}

/* ---------------------------------------------------------
   FLOW LINES — animirane crte koraka (01 → 06)
   ---------------------------------------------------------
   Za sekciju "From sample to verifiable report." (Quality stranica).
   Statična `border-top` crta zamijenjena je ::before elementom koji
   se iscrtava slijeva nadesno, REDOM od 01 do 06 (flow).

   Delay se veže na --rd koji postavlja reveal JS na svako dijete
   .reveal-group (0,1,2,…), pa crte "teku" jedna za drugom.

   Bez JS-a / uz prefers-reduced-motion crte su odmah pune —
   sadržaj ostaje čitljiv.
   ========================================================= */

.apx-flow > * {
  position: relative;
  border-top: 0 !important;      /* ugasi statičnu crtu iz sadržaja */
  padding-top: var(--space-4);
}

.apx-flow > *::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-red);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 460ms cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(var(--rd, 0) * 100ms);
}

.apx-flow > *.is-visible::before {
  transform: scaleX(1);
  /* priguseni "rep" crte dok putuje — daje osjecaj smjera */
  animation: apx-flow-glow 900ms cubic-bezier(0.2, 0.7, 0.2, 1);
  animation-delay: calc(var(--rd, 0) * 100ms);
}

@keyframes apx-flow-glow {
  0%   { box-shadow: 0 0 0 0 rgba(212, 40, 40, 0.55); }
  100% { box-shadow: 0 0 0 6px rgba(212, 40, 40, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .apx-flow > *::before {
    transform: scaleX(1);
    transition: none;
    transition-delay: 0s;
    animation: none;
  }
}

/* ---------------------------------------------------------
   ICON LIST — vertikalna lista ikona s labelama (homepage)
   ---------------------------------------------------------
   Koristi se u sekciji "Quality Assurance" na naslovnici:
     <div class="apx-icon-list">
       <div class="apx-icon-list__item">
         <span class="apx-icon-list__icon"><svg…></span>
         <span class="apx-icon-list__label">…</span>
       </div>
     </div>
   Ikone: assets/img/icons/ (stroke: currentColor). Crveni akcent.
   ========================================================= */

.apx-icon-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.apx-icon-list__item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.apx-icon-list__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-red);
}

.apx-icon-list__icon svg {
  width: 44px;
  height: 44px;
  stroke-width: 0.7;
}

.apx-icon-list__label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.45;
  color: #ededed;
}

/* ---------------------------------------------------------
   BRAND POSITIONING — slika proizvoda (homepage)
   ---------------------------------------------------------
   Kutija s desne strane; omjer cuva original (1608x1203).
   ========================================================= */

.apx-brand-photo img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
}

/* =========================================================
   HERO — animirani intro: bold naslov, red s ikonama, flow
   ---------------------------------------------------------
   Hero intro ide u kaskadi (suptilno, u skladu s ostatkom):
     eyebrow 0.02s → naslov 0.12s → subtitle 0.62s → ikone 0.80/0.90/1.00s
   Sve koristi postojece keyframeove (alpenixLineUp / alpenixFadeUp)
   da ritam ostane isti kao do sada.
   ========================================================= */

/* Naslov u heroju — REGULAR (klijent 02.10.2026.).
   Bilo je `font-weight: 800` (ekstra bold) + zaseban `letter-spacing: -0.03em`.
   Sada je 400 = regular/normalna težina. `letter-spacing` se NE postavlja
   (nasljeđuje -0.025em iz `.hero-title`). Klasa se dodaje na svaku riječ
   naslova u `front-page.php:61`, pa promjena pokriva EN
   („EU-LABORATORY-TESTED RESEARCH PEPTIDES") i DE
   („EU-LABORGEPRÜFTE FORSCHUNGSPEPTIDE") istovremeno. */
.hero-line__inner--bold {
  font-weight: 400;
}

/* Red s ikonama ispod podnaslova.
   PRAVILO: do 1023px red se LOMI (stavke su dugačke — EN „Batch-specific test
   report" / DE „Chargenspezifischer Prüfbericht" — a do 1023px nema dovoljno
   mjesta). U jednom redu (nowrap) je samo na desktopu, od 1024px nadalje.
   Prije je nowrap bio i u osnovnom pravilu, pa se red na tabletu (768–1023px)
   odsijecao — body ima overflow-x: hidden, pa nije bilo horizontalnog scrolla
   nego tiho odrezan sadržaj. */
.hero--home .apx-hero-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) clamp(0.6rem, 1.4vw, 1.5rem);
  width: auto;
  max-width: 100%;
  margin-top: var(--space-6);
}

@media (min-width: 1024px) {
  .hero--home .apx-hero-facts {
    flex-wrap: nowrap;      /* sve tri stavke u jednom redu (EN i DE) */
    width: max-content;     /* red smije koristiti punu sirinu containera */
    max-width: none;
    /* Klijent 03.10.2026. — red s ikonama spusten nize, u DVA koraka:
         1) relativno: +50 % visine reda kroz `translateY` (vidi dolje)
         2) apsolutno: +50 px kroz `margin-top`
       Zbrajamo u `calc()` da oba dijela ostanu citljiva i pojedinacno
       podesiva — inace bi se iz jednog broja izgubilo porijeklo.
       Bazni `--space-8` = 48px, dakle ukupno 98px iznad reda. */
    margin-top: calc(var(--space-8) + 50px);
    /* 50 % od visine SAMOG reda (~45px) → ~22px nize.
       `translateY` (a ne margin) namjerno: ne dira visinu/flow i ne izaziva
       reflow; `margin-top` bi tu takoder radio, ali ovako je pomak odvojen
       od razmaka prema sadrzaju iznad. */
    transform: translateY(50%);
  }
}

.hero--home .apx-hero-facts__item {
  display: flex;
  align-items: center;
  gap: clamp(0.4rem, 0.85vw, 0.75rem);
  white-space: nowrap;
  /* Isti tipografski stil kao .hero-eyebrow, samo bijele boje.
     −15 % (klijent 02.10.2026.): 0.74 → 0.629 rem */
  font-size: 0.629rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  line-height: 1.4;
  color: #FFFFFF;
  opacity: 0;
  animation: alpenixFadeUp 0.7s cubic-bezier(0.22, 0.7, 0.2, 1) forwards;
}

.hero--home .apx-hero-facts__item:nth-child(1) { animation-delay: 0.80s; }
.hero--home .apx-hero-facts__item:nth-child(2) { animation-delay: 0.90s; }
.hero--home .apx-hero-facts__item:nth-child(3) { animation-delay: 1.00s; }

.hero--home .apx-hero-facts__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-red);
}

/* Klijentske ikone reda „fact" (03.10.2026.) — sada PNG set, ne SVG.
   Velicina je NEPROMIJENJENA (−15 % iz 22.42): clamp(18.7px, 2.6945vw, 37.4px).
   `display: block` uklanja prazninu koju inline <img> ostavlja na baselineu
   (rezervirana visina za descendere) — bez toga bi razmak prema tekstu
   narastao ~5-8 %. `height: auto` + `aspect-ratio` cuvaju kvadratni omjer.
   `stroke-width` je uklonjen (nema smisla za raster). */
.hero--home .apx-hero-facts__icon img {
  display: block;
  /* Klijent 03.10.2026. — ikone +20 % na desktopu.
     Bilo: clamp(18.7px, 2.6945vw, 37.4px)  →  sada ×1.2:
       18.7  -> 22.44px
        2.6945vw -> 3.2334vw
       37.4  -> 44.88px
     `sizes` u alpenix_hero_fact_icon() MORA pratiti ove vrijednosti, inace
     browser izabere premali izvor i ikona se zamuti. */
  width: clamp(22.44px, 3.2334vw, 44.88px);
  height: auto;
  aspect-ratio: 1 / 1;
}

/* Mobilni raspored reda s ikonama (klijent 03.10.2026.).
   Prije: tri stavke su se LOMILE (flex-wrap) pa je raspored zavisio od
   dužine teksta — EN „Batch-specific test report" je pravio neuredan,
   nepredvidiv raspored. Sada je SVAKA IKONA U SVOM REDU (kolona), pa je
   rezultat uvijek ista tri reda, neovisno o jeziku i sirini ekrana.
   Uz to: ikone +20 % (23.8 → 28.56 px), red spusten 15 % niže i
   podnaslov „Two control stages…" uklonjen (samo mobilno). */
@media (max-width: 767px) {
  .hero--home .apx-hero-facts {
    flex-direction: column;      /* svaka ikona u svom redu */
    align-items: flex-start;     /* tekst ostaje lijevo poravnat */
    flex-wrap: nowrap;           /* u koloni lomljenje nema smisla */
    gap: var(--space-3);         /* 12px izmedu redova */
    margin-top: var(--space-6);
    /* 15 % nize od visine samog reda; `translateY` ne dira flow. */
    transform: translateY(15%);
  }
  /* −15 % tipografija (nepromijenjeno, §22.42) + ikona 23.8 → ×1.2 = 28.56px */
  .hero--home .apx-hero-facts__item { font-size: 0.527rem; letter-spacing: 0.2em; }
  .hero--home .apx-hero-facts__icon img { width: 28.56px; }

  /* Podnaslov „Two control stages. Three analytical test procedures.
     Batch-specific documentation." — uklonjen SAMO na mobilnom (trazi
     klijent; desktop ostaje nepromijenjen). `display: none` ga uklanja i iz
     toka i iz pristupacnog stabla, pa se ne cita ni citacima ekrana. */
  .hero--home .hero-subtitle { display: none; }
}

/* Tablet (768–1023px): red se lomi (vidi osnovno pravilo), a veličina je
   između mobilne i desktop. */
@media (min-width: 768px) and (max-width: 1023px) {
  /* −15 %: item 0.68 → 0.578 rem, ikona 34 → 28.9 px */
  .hero--home .apx-hero-facts__item { font-size: 0.578rem; letter-spacing: 0.22em; }
  .hero--home .apx-hero-facts__icon img { width: 28.9px; }
}

/* =========================================================
   STATEMENT — dvije izjavne kolone (Research catalog / Quality)
   ---------------------------------------------------------
   Isti vizualni jezik: kicker + nosivi tekst + CTA, centrirano
   u svojoj koloni. Koristi se na naslovnici.
   ========================================================= */

.apx-statement {
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

/* Kicker / naslov / CTA poravnati u visini obje kolone:
   kolone su iste visine (align-items:stretch), CTA se zalijepi na dno. */
.apx-statement .btn { margin-top: auto; }

/* =========================================================
   HERO IMAGE — smooth load (fade-in umjesto naglog prikaza)
   ---------------------------------------------------------
   JS (footer.php) dodaje .is-loaded kad je slika ucitana.
   ========================================================= */
.hero--home .hero-img {
  opacity: 0;
  transition: opacity 1.8s cubic-bezier(0.22, 0.7, 0.2, 1);
}
.hero--home .hero-img.is-loaded { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .hero--home .hero-img,
  .hero--home .hero-img.is-loaded {
    opacity: 1;
    transition: none;
  }
}

/* =========================================================
   HERO NASLOV — animacija po rijeci
   ---------------------------------------------------------
   Svaka rijec ima vlastitu masku i vlastiti delay
   (RESEARCH → PEPTIDES).
   ========================================================= */
.hero-title .hero-line--words {
  display: block;
  overflow: visible;
  padding-bottom: 0;
  margin-bottom: 0;
}

.hero-title .hero-line--words .hero-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.06em;
  margin-bottom: -0.06em;
}

/* Razmak izmedju rijeci = obican razmak iz HTML-a (bez margina),
   da se pri lomu retka rijec ne uvlaci. */

.hero-line--words .hero-word__inner {
  display: block;
  transform: translateY(112%);
  opacity: 0;
  animation: alpenixLineUp 0.95s cubic-bezier(0.22, 0.7, 0.2, 1) forwards;
  will-change: transform, opacity;
  backface-visibility: hidden;
  /* PRIJE (od §22.28): `white-space: nowrap` ovdje, a `normal` samo u
     `@media (max-width: 767px)`. To je radilo dok je naslov bila JEDNA
     dugačka riječ (DE FORSCHUNGSPEPTIDE). Od 02.10.2026. naslov je
     „EU-LABORATORY-TESTED RESEARCH PEPTIDES" / „EU-LABORGEPRÜFTE
     FORSCHUNGSPEPTIDE" — oba imaju VIŠE segmenata koji se moraju lomiti, i to
     na tabletu i desktopu jednako. Zato je `normal` sada osnovno pravilo:
     ZWSP (U+200B) iz `front-page.php` lomi naslov SAMO kad ne stane, a inače
     se ne vidi. Nema više breakpoint-ovisnog `nowrap`. */
  white-space: normal;
}

.hero-line--words .hero-word:nth-child(1) .hero-word__inner { animation-delay: 0.12s; }
.hero-line--words .hero-word:nth-child(2) .hero-word__inner { animation-delay: 0.32s; }
.hero-line--words .hero-word:nth-child(3) .hero-word__inner { animation-delay: 0.52s; }

@media (prefers-reduced-motion: reduce) {
  .hero-line--words .hero-word__inner {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* =========================================================
   HERO — CTA gumbi (View product range / Verify test report)
   ---------------------------------------------------------
   Stojе ispod podnaslova, iznad reda s ikonama. Primarni je solid
   crveni (.btn--red), sekundarni ghost (.btn--ghost). Na mobitelu se
   slažu jedan pod drugim preko pune širine.
   ========================================================= */
.hero--home .apx-hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  margin-top: var(--space-6);
  opacity: 0;
  animation: alpenixFadeUp 0.8s cubic-bezier(0.22, 0.7, 0.2, 1) forwards;
  animation-delay: 0.72s;
}

/* Podnaslov je duži od prijašnje jedne rečenice — daj mu malo više širine. */
.hero--home .hero-subtitle { max-width: 620px; }

/* CTA gumbi u heroju −15 % (klijent 02.10.2026.).
   Skopirano na .apx-hero-cta da se NE dira globalni `.btn` (kolica, shop,
   checkout, kontakt forma…). Bazni .btn: 0.95 rem / 14px 26px / ikona 15px
   → 0.8075 rem / 11.9px 22.1px / 12.75px. */
.hero--home .apx-hero-cta .btn {
  font-size: 0.8075rem;
  padding: 11.9px 22.1px;
}
.hero--home .apx-hero-cta .btn svg {
  width: 12.75px;
  height: 12.75px;
}

@media (max-width: 767px) {
  .hero--home .apx-hero-cta {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }
  .hero--home .apx-hero-cta .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero--home .apx-hero-cta {
    animation: none !important;
    opacity: 1 !important;
  }
}

/* =========================================================
   RESEARCH NOTICE — centriran box, tekst crvene boje
   ========================================================= */
/* Sekcija noticea: tekst centriran vodoravno, padding identican gore/dolje. */
.apx-notice-section {
  padding: var(--space-6) 0;
}

.apx-research-notice {
  max-width: 760px;
  margin: 0 auto;
  line-height: 1.2;
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-red);
}

/* =========================================================
   FOOTER DNO — grid, cijela linija centrirana
   ========================================================= */
.footer-bottom .footer-bottom-inner.apx-footer-legal {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
  border-top: none;
}

.apx-footer-legal__copy {
  width: 100%;
  margin: 0;
  text-align: center;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

/* Footer kolone: kolone su iste visine (grid stretch). */
.footer-cols { align-items: stretch; }
.footer-nav {
  display: flex;
  flex-direction: column;
}

.apx-statement__head {
  margin: 0 0 var(--space-3);
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
}

/* =========================================================
   SKIP LINK — vidljiv samo pri fokusu (tipkovnica / čitači zaslona)
   ========================================================= */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 9999;
	padding: 12px 20px;
	background: var(--color-red, #D42828);
	color: #FFFFFF;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-decoration: none;
	border-radius: 0 0 8px 0;
}
.skip-link:focus {
	left: 0;
	outline: 2px solid #FFFFFF;
	outline-offset: -4px;
}

/* =========================================================
   PROIZVOD — velika slika (responsivna kutija)
   ---------------------------------------------------------
   Kutija je prije imala fiksno width:345px i min-height:387px, pa je na
   mobitelu (375px) izlazila iz viewporta. Sada je fluidna uz max-width i
   aspect-ratio; slika se skalira s kutijom.
   ========================================================= */
.apx-single-media {
  margin-inline: 0;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 420 / 504; /* 600×730 foto + 2×16px paddinga (--space-4) */
  padding: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1a1a1a, #0A0A0A);
  border: 1px solid var(--color-border);
  border-radius: 12px;
}
.apx-single-media img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* ---------------------------------------------------------
   Single product — gornji blok (grid raspored)
   ---------------------------------------------------------
   RED 1: naslov + podnaslov, samo LIJEVA kolona (nepromijenjeni).
   RED 2: FOTO (lijevo, uz sami lijevi rub kolone) | FORMA (desno).
   Forma je align-items:start u istom redu kao foto box, pa joj je vrh
   u ravnini s vrhom boxa.
   Kolona 1 je od 1024px na dalje minmax(0,420px) 1fr → foto je max 420px
   i razmak do forme je tocno --space-5 (24px).
   Redak „What's in this box" + „1x … vial" je ISPOD fotografije, u boxu.
   Na mobitelu (1 kolona) redoslijed ostaje kao prije:
   naslov → forma → foto. */
.apx-single-top {
  align-items: start;
  gap: var(--space-5);
}

/* Foto blok: sirina kolone (max 420px), poravnat uz lijevi rub kolone. */
.apx-single-box {
  max-width: 420px;
}

/* Redak ISPOD slike: "WHAT'S IN THIS BOX"  +  "1x … vial". */
.apx-single-boxhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.apx-single-boxhead > * {
  margin: 0;
}

/* Mobitel: naslov → FOTO → forma.
   Klijent 03.10.2026.: prije je odmah ispod naslova isla forma za narudzbu, a
   slika proizvoda je bila TEK ISPOD nje. Kupac je prvo vidio cijenu i gumb
   prije nego sto je vidio sto kupuje. Sada: naslov → slika → narudzba, pa
   onda sve ostalo (opis, sekcije, slicni proizvodi).
   `order` radi i na grid kontejneru (.grid je display:grid), a postavljen je
   SAMO unutar ovog breakpointa — na ≥768px raspored drze `grid-column` /
   `grid-row` iz bloka nize, pa je desktop netaknut. */
@media (max-width: 767px) {
  .apx-single-head { order: 1; }
  .apx-single-col-media { order: 2; }
  .apx-single-col-form { order: 3; }
}

/* Tablet: dvije jednake kolone (isto kao .grid--2). */
@media (min-width: 768px) {
  .apx-single-head { grid-column: 1; grid-row: 1; }
  .apx-single-col-media { grid-column: 1; grid-row: 2; }
  .apx-single-col-form { grid-column: 2; grid-row: 2; }
}

/* Desktop/laptop: foto kolona max 420px, forma dobiva ostatak (1fr).
   Mora ici NAKON @media (min-width:1024px) .grid--2 u ovom fajlu. */
@media (min-width: 1024px) {
  .apx-single-top { grid-template-columns: minmax(0, 420px) 1fr; }
}


/* =========================================================
   C1 — VERIFIKACIJA ŠARŽE (/verify/<batch>/)
   ---------------------------------------------------------
   Stranicu otvara QR kod s kartice. Kupac je najčešće na mobitelu,
   pa je sve čitljivo i jednostavno, bez suvišnih elemenata.
   ========================================================= */
.apx-verify .page-header { margin-bottom: var(--space-8); }

/* Podaci o šarži — dvije kolone na desktopu, jedna na mobitelu */
.apx-verify__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5) var(--space-8);
  padding: var(--space-6) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-8);
}

@media (max-width: 640px) {
  .apx-verify__grid { grid-template-columns: 1fr; gap: var(--space-5); }
}

.apx-verify__field { display: flex; flex-direction: column; gap: var(--space-1); }
.apx-verify__field--wide { grid-column: 1 / -1; }

.apx-verify__label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-text-muted);
}

.apx-verify__value {
  font-size: 1.05rem;
  color: var(--color-text-primary);
  word-break: break-word;
}

/* Batch broj — najveći element, jer se uspoređuje s naljepnicom */
.apx-verify__value--big {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(1.4rem, 3.4vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #FFFFFF;
}

.apx-verify__badge {
  display: inline-block;
  border: 1px solid var(--color-gold);
  color: var(--color-gold);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  margin: 0 var(--space-2) 0 0;
}

.apx-verify__report { margin-bottom: var(--space-8); }

.apx-verify__pending {
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-gold);
  background: var(--color-bg-secondary);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--color-text-secondary);
}

.apx-verify__note {
  font-size: 0.8rem;
  line-height: 1.7;
  color: var(--color-text-faint);
  max-width: 60ch;
}

/* Kutija za grešku (nepoznat batch / povučena šarža) */
.apx-verify__box {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-6);
  background: var(--color-bg-secondary);
  line-height: 1.7;
}

.apx-verify__box--error {
  border-left: 3px solid var(--color-red);
}

.apx-verify__box--error strong { color: #FFFFFF; }

.apx-verify__searched {
  margin-top: var(--space-4);
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.apx-verify__searched code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: rgba(255, 255, 255, 0.06);
  padding: 0.15rem 0.45rem;
  border-radius: 3px;
  color: var(--color-gold);
}

/* ── Quality stranica: forma „Find test report" ────────── */
.apx-report-lookup {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: stretch;
  max-width: 520px;
  margin-top: var(--space-5);
}

.apx-report-lookup input[type="text"] {
  flex: 1 1 220px;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  text-transform: uppercase;
}

.apx-report-lookup .btn { flex: 0 0 auto; }

.apx-report-lookup__hint {
  flex: 1 1 100%;
  font-size: 0.78rem;
  color: var(--color-text-faint);
  margin-top: var(--space-1);
}

/* =========================================================
   C1 — QR box u bloku „Quality & batch traceability"
   ========================================================= */
.apx-qr-box {
  text-align: center;
  border: 1px solid var(--color-border);
  border-radius: 0;
  width: 240px;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin: 0 auto;
  padding: var(--space-4);
}

/* Pravi QR — SVG na bijeloj podlozi (mora ostati bijel za skeniranje) */
.apx-qr-box__link {
  display: block;
  line-height: 0;
  border-radius: 4px;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.apx-qr-box__link:hover {
  transform: scale(1.03);
  box-shadow: 0 0 0 3px rgba(200, 164, 86, 0.25);
}

.apx-qr-box__link svg {
  display: block;
  width: 150px;
  height: auto;
  border-radius: 4px;
}

/* Kad šarža još nije upisana — neutralna ikona umjesto lažnog QR-a */
.apx-qr-box__pending {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 150px;
  border: 1px dashed var(--color-border);
  border-radius: 4px;
}

/* QR unutar V2 bloka */
.apx-quality__qr .apx-qr-box__link svg { width: 130px; }
.apx-quality__qr .apx-qr-box__pending { width: 130px; height: 130px; }

/* =========================================================
   B1 — PRAVNE STRANICE (Imprint, Privacy, AGB, …)
   ---------------------------------------------------------
   Zajednička tipografija za duge tekstove: čitljiva mjera,
   jasna hijerarhija, liste s umjerenim uvlakama.
   ========================================================= */
.apx-legal { max-width: 78ch; }

.apx-legal-lead {
  font-size: clamp(0.95rem, 1.6vw, 1.08rem);
  color: var(--color-text-secondary);
  line-height: 1.75;
  max-width: 62ch;
}

.apx-legal h2 {
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  font-weight: 600;
  margin: var(--space-8) 0 var(--space-3);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border-soft);
  letter-spacing: -0.01em;
}

.apx-legal h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.apx-legal h3 {
  font-size: clamp(0.98rem, 1.8vw, 1.08rem);
  font-weight: 600;
  margin: var(--space-6) 0 var(--space-2);
  color: var(--color-text-primary);
}

.apx-legal p {
  line-height: 1.8;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}

.apx-legal ul {
  margin: 0 0 var(--space-5) 0;
  padding-left: var(--space-5);
  list-style: none;
}

.apx-legal ul li {
  position: relative;
  padding-left: var(--space-4);
  margin-bottom: var(--space-2);
  line-height: 1.75;
  color: var(--color-text-secondary);
}

/* Kvačica-blok: mala crvena crtica umjesto proračunatog bulleta */
.apx-legal ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 8px;
  height: 1px;
  background: var(--color-red);
}

.apx-legal a { color: var(--color-gold); text-decoration: underline; text-underline-offset: 2px; }
.apx-legal a:hover { color: #FFFFFF; }

.apx-legal strong { color: var(--color-text-primary); font-weight: 600; }

/* DRAFT banner — MORA se ukloniti prije launcha */
.apx-legal-draft {
  border: 1px solid var(--color-gold);
  border-left: 3px solid var(--color-gold);
  background: rgba(200, 164, 86, 0.06);
  color: var(--color-text-secondary);
  padding: var(--space-4) var(--space-5);
  margin: 0 0 var(--space-8);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  line-height: 1.7;
}

.apx-legal-draft strong { color: var(--color-gold); }

/* Polja koja klijent mora popuniti (firma, adresa, VAT…) */
.apx-legal-todo {
  color: var(--color-gold);
  border-bottom: 1px dashed rgba(200, 164, 86, 0.5);
}

.apx-legal-note {
  border-left: 2px solid var(--color-border);
  padding-left: var(--space-4);
  font-size: 0.85rem;
  color: var(--color-text-faint);
  font-style: normal;
}

/* =========================================================
   ANIMACIJA MOBILNOG MENIJA — prefers-reduced-motion
   ---------------------------------------------------------
   Kad korisnik traži smanjenu animaciju (sistemska postavka), otvaranje
   menija je TRENUTAČNO (bez opacity/transform tranzicije). Pristupačnost:
   vestibularne smetnje od pomicanja/scalea.
   ========================================================= */
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  .nav-list,
  .nav-list.is-open,
  .nav-list .nav-item,
  .nav-list.is-open .nav-item {
    transition: none !important;
    transition-delay: 0ms !important;
    transform: none !important;
  }
  /* Bez animacije, stavke moraju biti odmah vidljive u otvorenom stanju
     (inače bi `opacity: 0` iz base pravila ostao i meni bi bio prazan). */
  .nav-list.is-open .nav-item { opacity: 1; }

  /* Hamburger → X: BEZ tranzicije crta. Ikona se i dalje ispravno preklopi
     u X (rotacije i `top` iz `html.apx-menu-open` pravila ostaju), samo se
     promjena dogodi u jednom frameu — sto je upravo ono sto korisnik s
     „reduce motion" trazi. `transition: none` je nuzan da se ne animira
     ni `width` ni `opacity` srednje crte. */
  .nav-toggle__bars > span {
    transition: none !important;
  }
}