/* =====================================================================
   Pet minuta mira - stilovi (demo)
   Paleta i tipografija prema logotipu i cjeniku klijenta:
   bijela/off-white podloga, meki sivi tonovi, pastelne boje iz
   logotipa (mint, plava, breskva, roza) i suzdržani zlatni akcent.
   ===================================================================== */

:root {
  /* Boje */
  --paper: #fdfdfa;
  --paper-warm: #faf9f6;
  --beige: #f4efe6;
  --ink: #3f403a;
  --ink-soft: #5f5f5a;
  /* Stone Grey. Bio je #8d8d84, sto je na papiru davalo 3.17:1 - ispod AA
     praga 4.5:1 za tekst te velicine, a bas se koristi za najsitniji tekst
     (eyebrow, caption, meta, podnozje). Zatamnjeno na 4.87:1 na najsvjetlijoj
     podlozi; ton ostaje isti topli sivo-zeleni. Ne vracati na svjetliju
     vrijednost bez ponovnog mjerenja - vidjeti LEGAL.md. */
  --grey: #6e6e68;
  --grey-line: #e4e2d9;
  --grey-soft: #d8d8cf;

  --mint: #b9ded0;
  --mint-soft: #e3f1ea;
  --blue: #c9e5f4;
  --blue-soft: #e9f4fa;
  --peach: #f7c9ad;
  --peach-soft: #fceadd;
  --pink: #efd1dc;
  --pink-soft: #f9edf2;

  --gold: #c8b878;
  /* Muted Brass Deep. DESIGN.md (red 159) trazi da ova inacica "must clear
     contrast" - mjerenjem nije: #a08c4e daje 3.14:1 kao tekst, a nosi sve
     poveznice. Kao prsten fokusa je i dalje prolazio (prag 3:1), pa se defekt
     vidio samo na tekstu. Zatamnjeno na 4.83:1 na najsvjetlijoj podlozi. */
  --gold-deep: #7f6d2e;

  /* Tipografija */
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Nunito Sans", "Segoe UI", system-ui, sans-serif;

  /* Oblici i sjene */
  --radius: 20px;
  --radius-lg: 28px;
  --shadow-soft: 0 10px 30px rgba(63, 64, 58, 0.07);
  --shadow-lift: 0 16px 40px rgba(63, 64, 58, 0.11);

  --container: 1120px;
}

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

/* Naslov koji vide samo čitači ekrana - kad je vizualni naslov suvišan. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Poveznica za preskakanje zaglavlja (WCAG 2.2 SC 2.4.1). Sakrivena je izvan
   zaslona dok ne dobije fokus, pa je ne vidi nitko tko koristi mis. Boje su
   iste kao primarna tipka, da bude ocita kad se pojavi. */
.skip-link {
  position: absolute;
  top: 0;
  left: 12px;
  z-index: 200;
  transform: translateY(-120%);
  padding: 10px 18px;
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--ink);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.15s ease;
}

.skip-link:focus-visible,
.skip-link:focus {
  transform: translateY(0);
  outline: 2px solid var(--gold-deep);
  outline-offset: 3px;
}

/* Meta je uvijek cilj skoka, a tabindex="-1" mu dopusta fokus bez toga da
   ude u redoslijed tipke Tab. Bez ovoga fokus ostaje na poveznici i citac
   ekrana nastavi citati od zaglavlja. */
main:focus { outline: none; }

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink-soft);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.15;
  margin: 0 0 0.6em;
  letter-spacing: 0.01em;
}

h1 { font-size: clamp(2.4rem, 5.4vw, 3.9rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); }
h3 { font-size: 1.45rem; }
h4 {
  font-family: var(--font-body);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 0.35em;
}

p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }

a { color: var(--gold-deep); }

:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

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

.container-narrow { max-width: 860px; }

/*
 * Uža mjera teksta BEZ centriranja bloka.
 * Ide UNUTAR punog .container-a, pa lijevi rub ostaje poravnat sa svim
 * ostalim sekcijama; .container-narrow bi cijeli blok centrirao i uvukao
 * ga udesno. Širina = 860px minus 2×24px paddinga .container-narrow-a,
 * da mjera retka ostane identična.
 */
.measure-narrow { max-width: 812px; }

.center { text-align: center; margin-top: 40px; }

/* ----------------------------- IKONE ----------------------------- */
.icon { width: 1.15em; height: 1.15em; flex: none; }
.icon-lg { width: 2rem; height: 2rem; }

/* ----------------------------- GUMBI ----------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  padding: 0.85em 1.7em;
  border-radius: 999px;
  border: 1.5px solid transparent;
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}

.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }

.btn-primary {
  background: var(--ink);
  color: #fff;
}
.btn-primary:hover { background: #55564f; }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--grey-soft);
}
.btn-ghost:hover { border-color: var(--grey); }

.btn-outline {
  background: #fff;
  color: var(--ink);
  border-color: var(--grey-line);
}
.btn-outline:hover { border-color: var(--gold); }

.btn-whatsapp {
  background: var(--mint-soft);
  color: #2e6b52;
  border-color: var(--mint);
}
.btn-whatsapp:hover { background: var(--mint); color: #1f4f3b; }

.btn-small { padding: 0.6em 1.25em; font-size: 0.9rem; }

/* ---------------------------- HEADER ---------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(253, 253, 250, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.site-header.is-scrolled {
  border-bottom-color: var(--grey-line);
  box-shadow: 0 4px 20px rgba(63, 64, 58, 0.05);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 84px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}

/* Znak + natpis, dvije odvojene stvari: logotip bez lučnog teksta samo
   se zamijeni u Postavkama i natpis pokraj njega i dalje nosi ime. */
.brand-logo {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--grey-line);
}

/* Natpis se ne prelama, ali SMIJE se stisnuti kad traka ostane bez
   mjesta - inace bi znak marke gurao navigaciju preko ruba ekrana u
   uskom pojasu izmedu 881 i 1020 px, gdje traka jos nosi svih sedam
   poveznica i gumb. Isto ponasanje kao i prije povecanja znaka. */
.brand-name {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.04em;
  white-space: nowrap;
  min-width: 0;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 26px;
}

.main-nav a:not(.btn) {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.main-nav a:not(.btn):hover {
  color: var(--ink);
  border-bottom-color: var(--gold);
}

/* Natpis u dva reda razvukao bi gumb na visinu vecu od same trake, pa se
   ne prelama; traka se ionako sklapa u mobilni izbornik na 880 px. */
.nav-cta { white-space: nowrap; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: none;
  border: 1px solid var(--grey-line);
  border-radius: 10px;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ----------------------------- HERO ----------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 72px 0 88px;
  background:
    radial-gradient(600px 420px at 88% 8%, var(--blue-soft) 0%, transparent 70%),
    radial-gradient(520px 400px at 4% 92%, var(--pink-soft) 0%, transparent 70%),
    radial-gradient(640px 460px at 70% 100%, var(--mint-soft) 0%, transparent 72%),
    var(--paper-warm);
}

/*
  Hero s fotografijom u pozadini. Aktivira se tek kad je u adminu
  postavljena slika (Postavke -> Naslovna fotografija); bez nje ostaje
  gornji gradijentni izgled. Preko fotke ide scrim da tekst ostane
  čitljiv bez obzira na svjetlinu snimke.
*/
.hero.has-hero-image {
  padding: 104px 0 116px;
  background-color: var(--ink);
  background-image:
    linear-gradient(100deg, rgba(24, 22, 20, 0.86) 0%, rgba(24, 22, 20, 0.74) 46%, rgba(24, 22, 20, 0.44) 72%, rgba(24, 22, 20, 0.16) 100%),
    var(--hero-image);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}

.hero.has-hero-image .hero-inner { grid-template-columns: minmax(0, 1fr); }
.hero.has-hero-image .hero-copy { max-width: 46rem; }
.hero.has-hero-image .eyebrow { color: rgba(255, 255, 255, 0.78); }
.hero.has-hero-image h1,
.hero.has-hero-image .hero-signature em { color: #fff; }
.hero.has-hero-image .hero-sub,
.hero.has-hero-image .hero-signature { color: rgba(255, 255, 255, 0.9); }

.hero.has-hero-image .trust-badges li { color: rgba(255, 255, 255, 0.92); }
/* Mesing se gubi na tamnom scrimu, pa kvačica prelazi u bijelo. */
.hero.has-hero-image .trust-badges svg { color: #fff; }

.hero.has-hero-image .btn-ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.08);
}
.hero.has-hero-image .btn-ghost:hover { background: rgba(255, 255, 255, 0.18); }

/* Tamni gumb bi se izgubio na tamnom scrimu - okrećemo kontrast. */
.hero.has-hero-image .btn-primary {
  background: #fff;
  color: var(--ink);
  border-color: #fff;
}
.hero.has-hero-image .btn-primary:hover { background: var(--beige); color: var(--ink); }

/* --- Hero s videom ---------------------------------------------------
   Video je sloj IZNAD pozadinske fotografije, a scrim je sloj iznad
   videa - zato scrim ovdje ne moze ostati dio background-imagea nego
   dolazi kao ::after. Fotografija ostaje ispod svega i vidi se kao
   poster te kao zamjena ako video ne krene. */
.hero.has-hero-video { position: relative; overflow: hidden; }

.hero.has-hero-video .hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero.has-hero-video::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(100deg, rgba(24, 22, 20, 0.86) 0%, rgba(24, 22, 20, 0.74) 46%, rgba(24, 22, 20, 0.44) 72%, rgba(24, 22, 20, 0.16) 100%);
}

.hero.has-hero-video .hero-inner { position: relative; z-index: 2; }

@media (max-width: 900px) {
  /* Isti zaokret kao kod fotografije: tekst je ispod videa, ne lijevo. */
  .hero.has-hero-video::after {
    background: linear-gradient(180deg, rgba(24, 22, 20, 0.42) 0%, rgba(24, 22, 20, 0.68) 45%, rgba(24, 22, 20, 0.86) 100%);
  }
}

/* Tko je trazio manje gibanja, dobiva mirnu fotografiju. */
@media (prefers-reduced-motion: reduce) {
  .hero.has-hero-video .hero-media { display: none; }
}

@media (max-width: 900px) {
  .hero.has-hero-image { padding: 64px 0 72px; }
  /* Na uskom ekranu scrim ide odozdo - tekst je ispod, a ne lijevo. */
  .hero.has-hero-image {
    background-image:
      linear-gradient(180deg, rgba(24, 22, 20, 0.42) 0%, rgba(24, 22, 20, 0.68) 45%, rgba(24, 22, 20, 0.86) 100%),
      var(--hero-image-mobile, var(--hero-image));
  }
}

/* --- Hero video preko cijelog zaslona + zaglavlje do prvog pomaka --------
   Na početnoj, kad je postavljen hero video, hero je visok točno jedan
   ekran (100svh) i video ga ispunjava od vrha do dna. Zaglavlje je tada
   fiksirano i skriveno; pojavi se tek kad se stranica pomakne (JS dodaje
   .hero-nav-visible na <body>). Skrivanje je vezano uz .js klasu na <html>,
   pa bez JS-a zaglavlje ostaje sticky i vidljivo. */
.hero.has-hero-video {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 0;
}

.hero.has-hero-video .hero-inner {
  width: 100%;
}

.js .fullscreen-hero .site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s linear 0.5s;
}

.js .fullscreen-hero.hero-nav-visible .site-header {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Sticky mobilna traka s CTA gumbima prati isti ritam kao zaglavlje:
   skrivena dok hero video ispunjava zaslon, pa klizne gore zajedno s
   navigacijom pri prvom pomaku. */
.js .fullscreen-hero .mobile-cta-bar {
  transform: translateY(100%);
  visibility: hidden;
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s linear 0.5s;
}

.js .fullscreen-hero.hero-nav-visible .mobile-cta-bar {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 56px;
  align-items: center;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 18px;
}

.eyebrow-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold);
  flex: none;
}

.hero-sub {
  font-size: 1.15rem;
  max-width: 34em;
}

.hero-signature {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--ink);
  margin: 18px 0 26px;
}

.hero-signature em { color: var(--gold-deep); }

/* Informativne oznake u herou.
   Namjerno NISU pilule: bijela podloga s okvirom i oblim rubom bila je
   ista silueta kao gumbi koji stoje odmah ispod, pa su se čitale kao
   nešto na što se klikne. Sada nose samo mesinganu kvačicu i tekst,
   bez podloge, okvira, sjene i bilo kakve reakcije na miš. */
.trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  list-style: none;
  margin-bottom: 32px;
}

.trust-badges li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  font-weight: 400;
  color: var(--ink-soft);
  cursor: default;
}

.trust-badges svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--gold-deep);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Hero vizual */
.hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
}

.hero-card {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  padding: 28px;
  max-width: 360px;
  rotate: 1.5deg;
}

.hero-card img { border-radius: 16px; }

.hero-chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 9px;
  background: #fff;
  border: 1px solid var(--grey-line);
  border-radius: 999px;
  box-shadow: var(--shadow-soft);
  padding: 9px 16px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

.hero-chip-1 { top: 6%; left: -4%; rotate: -2deg; }
.hero-chip-2 { bottom: 20%; right: -6%; rotate: 2deg; }
.hero-chip-3 { bottom: -4%; left: 2%; rotate: -1.5deg; }

.chip-swatch,
.benefit-mark {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex: none;
}

.swatch-mint { background: var(--mint); }
.swatch-blue { background: var(--blue); }
.swatch-peach { background: var(--peach); }
.swatch-pink { background: var(--pink); }
.swatch-gold { background: var(--gold); }

/* --------------------------- SEKCIJE --------------------------- */
.section { padding: 92px 0; }

.section-tinted { background: var(--paper-warm); }

.section-head {
  max-width: 640px;
  margin-bottom: 48px;
}

.section-lead { font-size: 1.08rem; }

.section-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 56px;
  align-items: start;
}

/* --------------------------- O NAMA --------------------------- */
.benefit-list {
  list-style: none;
  display: grid;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--grey-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 30px 28px;
}

.benefit-list li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-weight: 600;
  color: var(--ink);
}

.benefit-list .benefit-mark { translate: 0 2px; }

/* --------------------------- PAKETI --------------------------- */
.package-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-bottom: 28px;
}

.package-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--grey-line);
  border-top: 4px solid var(--grey-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 30px 26px 26px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.package-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }

.package-card.accent-mint { border-top-color: var(--mint); }
.package-card.accent-blue { border-top-color: var(--blue); }
.package-card.accent-peach { border-top-color: var(--peach); }
.package-card.accent-pink { border-top-color: var(--pink); }

.package-card h3 { font-size: 1.4rem; margin-bottom: 0.4em; }

.package-desc { font-size: 0.97rem; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.badge-popular {
  position: absolute;
  top: -14px;
  right: 20px;
  background: var(--ink);
  color: #fff;
}

.include-list {
  list-style: none;
  display: grid;
  gap: 9px;
  margin: 6px 0 18px;
  flex-grow: 1;
}

.include-list li {
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-size: 0.94rem;
}

.include-list svg {
  width: 0.95em;
  height: 0.95em;
  flex: none;
  translate: 0 2px;
  color: var(--gold-deep);
}

.package-recommend {
  font-size: 0.88rem;
  font-style: italic;
  color: var(--grey);
}

.package-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  border-top: 1px solid var(--grey-line);
  padding-top: 18px;
  margin-top: auto;
}

.price-label {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

/* Premium kartica */
.premium-card {
  position: relative;
  background: linear-gradient(135deg, #fffdf7 0%, var(--beige) 100%);
  border: 1px solid #e3d9bb;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  padding: 44px 42px 36px;
  margin-top: 20px;
}

.premium-card::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(200, 184, 120, 0.45);
  border-radius: calc(var(--radius-lg) - 8px);
  pointer-events: none;
}

.premium-head { max-width: 620px; }

.premium-card h3 { font-size: 2rem; margin: 14px 0 10px; }

.badge-premium {
  background: var(--gold);
  color: #453a15;
}

.badge-premium svg { width: 1em; height: 1em; }

.include-list-columns {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 32px;
  margin: 22px 0 26px;
}

.premium-card .package-foot { border-top-color: #e3d9bb; }

.price-label-premium {
  font-size: 1.35rem;
  color: var(--gold-deep);
}

/* --------------------------- OPREMA --------------------------- */
.equipment-category { margin-bottom: 54px; }
.equipment-category:last-child { margin-bottom: 0; }

.equipment-category-head {
  border-left: 4px solid var(--grey-soft);
  padding-left: 20px;
  margin-bottom: 24px;
  max-width: 720px;
}

.equipment-category-head.accent-mint { border-left-color: var(--mint); }
.equipment-category-head.accent-blue { border-left-color: var(--blue); }
.equipment-category-head.accent-peach { border-left-color: var(--peach); }
.equipment-category-head.accent-pink { border-left-color: var(--pink); }

.equipment-category-head h3 { margin-bottom: 0.25em; }
.equipment-category-head p { font-size: 0.95rem; margin: 0; }

.equipment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 18px;
}

.equipment-card {
  background: #fff;
  border: 1px solid var(--grey-line);
  border-radius: 16px;
  padding: 20px 20px 18px;
  box-shadow: var(--shadow-soft);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.equipment-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }

.equipment-card p { font-size: 0.9rem; margin-bottom: 0.6em; }

.dim-tag {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-soft);
  background: var(--paper-warm);
  border: 1px solid var(--grey-line);
  border-radius: 999px;
  padding: 3px 11px;
}

/* ------------------------ KAKO FUNKCIONIRA ------------------------ */
.steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  counter-reset: step;
}

.step-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--grey-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 28px 24px;
}

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--beige);
  border: 1px solid #e3d9bb;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--gold-deep);
  margin-bottom: 16px;
}

.step-card h3 { font-size: 1.25rem; }
/* Odlomak preuzima visak visine, pa gumb ispod njega sjeda na dno
   kartice i poravnava se s gumbom susjednog koraka. */
.step-card p { font-size: 0.93rem; margin: 0; flex: 1 1 auto; }

/* Precica iz koraka na odrediste koje taj korak opisuje. Obrubljena je,
   a ne ispunjena: korak je uputa, a ne glavni poziv na akciju - zavrsna
   CTA traka pri dnu stranice mora ostati najglasnija stvar na ekranu. */
.step-cta { margin-top: 18px; }

.steps-note {
  margin-top: 30px;
  text-align: center;
  font-style: italic;
  color: var(--grey);
}

/* --------------------------- GALERIJA --------------------------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.gallery-item {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--grey-line);
  box-shadow: var(--shadow-soft);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.gallery-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }

.gallery-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.gallery-item figcaption {
  padding: 14px 18px;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink);
}

.gallery-ph-inner {
  aspect-ratio: 4 / 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.tile-mint.gallery-ph-inner,
.tile-mint .gallery-ph-inner { background: linear-gradient(150deg, var(--mint-soft), var(--mint)); }
.tile-blue.gallery-ph-inner,
.tile-blue .gallery-ph-inner { background: linear-gradient(150deg, var(--blue-soft), var(--blue)); }
.tile-peach.gallery-ph-inner,
.tile-peach .gallery-ph-inner { background: linear-gradient(150deg, var(--peach-soft), var(--peach)); }
.tile-pink.gallery-ph-inner,
.tile-pink .gallery-ph-inner { background: linear-gradient(150deg, var(--pink-soft), var(--pink)); }
.tile-gold.gallery-ph-inner,
.tile-gold .gallery-ph-inner { background: linear-gradient(150deg, #f6efdb, #e2d5a7); }
.tile-beige.gallery-ph-inner,
.tile-beige .gallery-ph-inner { background: linear-gradient(150deg, var(--paper-warm), var(--beige)); }

.gallery-ph-icon svg {
  width: 54px;
  height: 54px;
  color: rgba(63, 64, 58, 0.55);
}

.gallery-ph-note {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(63, 64, 58, 0.5);
}

/* -------------------------- SIGURNOST -------------------------- */
/* Kartice stoje u vrtuljku (.offer-marquee na /o-nama), pa im širinu i
   razmak zadaje traka; ovdje je samo izgled same kartice. */
.trust-card {
  background: #fff;
  border: 1px solid var(--grey-line);
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
  padding: 24px 22px;
}

.trust-card .benefit-mark { display: block; margin-bottom: 14px; }
.trust-card h3 { font-size: 1.18rem; }
.trust-card p { font-size: 0.9rem; margin: 0; }

/* ----------------------------- FAQ ----------------------------- */
.faq-list { display: grid; gap: 12px; }

.faq-item {
  background: #fff;
  border: 1px solid var(--grey-line);
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
  padding: 0 22px;
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  list-style: none;
  cursor: pointer;
  padding: 18px 0;
  font-weight: 700;
  color: var(--ink);
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-chevron {
  flex: none;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--grey);
  border-bottom: 2px solid var(--grey);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.faq-item[open] .faq-chevron { transform: rotate(-135deg); }

.faq-item p { padding-bottom: 18px; margin: 0; }

/* --------------------------- OBRAZAC --------------------------- */
.inquiry-form {
  background: #fff;
  border: 1px solid var(--grey-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 38px 36px;
}

.inquiry-form fieldset {
  border: none;
  padding: 0;
  margin: 0 0 30px;
}

.inquiry-form legend {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--ink);
  padding: 0;
  margin-bottom: 18px;
}

/* Koraci - traka je vidljiva tek kad JS podijeli obrazac na korake.
   Bez JS-a svi su fieldsetovi otvoreni i obrazac se šalje odjednom. */
/* .btn nosi vlastiti display, pa [hidden] mora pobijediti eksplicitno. */
.form-rail[hidden],
.form-controls .btn[hidden],
.inquiry-form fieldset[hidden],
.form-actions[hidden] { display: none; }

.form-rail {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 28px;
  padding: 0 0 22px;
  border-bottom: 1px solid var(--grey-line);
}

.form-rail-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--grey);
}

.form-rail-item:not(:last-child) { flex: 1; }

.form-rail-item:not(:last-child)::after {
  content: "";
  flex: 1;
  height: 1px;
  min-width: 12px;
  background: var(--grey-line);
  margin-left: 4px;
  transition: background-color 0.25s ease;
}

.form-rail-num {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--paper-warm);
  border: 1px solid var(--grey-line);
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1;
  color: var(--grey);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.form-rail-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.form-rail-item.is-done { color: var(--ink-soft); }
.form-rail-item.is-done .form-rail-num {
  background: var(--beige);
  border-color: var(--gold);
  color: var(--gold-deep);
}
.form-rail-item.is-done::after { background: var(--gold); }

.form-rail-item.is-current { color: var(--ink); }
.form-rail-item.is-current .form-rail-num {
  background: #fff;
  border-color: var(--gold);
  color: var(--gold-deep);
  box-shadow: 0 0 0 3px rgba(200, 184, 120, 0.18);
}

.inquiry-form.is-stepped fieldset {
  margin-bottom: 24px;
  animation: rise-in 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.form-step-lead {
  font-size: 0.93rem;
  color: var(--grey);
  margin: -8px 0 18px;
}

/* Jedan red za sve kontrole koraka: natrag lijevo, akcija desno. */
.form-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding-top: 22px;
  border-top: 1px solid var(--grey-line);
}

.form-controls > [data-form-next] { margin-left: auto; }

/* Zadnji korak: "Natrag" lijevo, slanje desno u istom redu - a kad je uže,
   gumbi se lome unutar svoje grupe umjesto da otvaraju novi red. */
.inquiry-form.is-stepped .form-controls { flex-wrap: nowrap; }

.inquiry-form.is-stepped .form-controls > .form-actions {
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-end;
}

.form-controls .form-actions { margin-top: 0; }

/* Greška na pojedinom polju - ista paleta kao .alert-error, nikad akcent. */
/* Instagram: "@" stoji u polju kao oznaka, korisnik upisuje samo ime.
   Polje se proteže preko cijelog reda jer je odgovor na odabir iznad,
   a ne još jedno polje u paru. */
/* Bez vlastite margine: razmak iznad daje .form-grid, a margina bi pri
   otvaranju iskočila prije nego animacija visine krene. */
.field-instagram[hidden] { display: none; }

.input-affix { position: relative; }

.input-affix-mark {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 700;
  color: var(--grey);
  pointer-events: none;
}

/* Nadjačava kraticu `padding` iz .field input, koja dolazi kasnije. */
.field .input-affix input { padding-left: 30px; }

.field-hint { font-size: 0.88rem; color: var(--grey); }
.field-hint[hidden] { display: none; }

.field-hint a {
  color: var(--gold-deep);
  font-weight: 600;
}

.field-error {
  font-size: 0.88rem;
  font-weight: 600;
  color: #7c3b2e;
}

.field-error[hidden] { display: none; }

.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: #eac8c2;
  background: #fdf0ee;
}

/* Fokus ostaje jedini fokus u sustavu - zlatni prsten; boja greške ostaje
   samo na rubu polja dok se ne ispravi. */
.field input[aria-invalid="true"]:focus,
.field select[aria-invalid="true"]:focus,
.field textarea[aria-invalid="true"]:focus {
  background: #fff;
  box-shadow: 0 0 0 3px rgba(200, 184, 120, 0.18);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 20px;
  margin-bottom: 18px;
}

.field { display: flex; flex-direction: column; gap: 7px; }

.field label,
.group-label {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink);
}

.req { color: var(--gold-deep); }

.opt {
  font-weight: 400;
  color: var(--grey);
  font-size: 0.82rem;
}

.field input,
.field select,
.field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper-warm);
  border: 1px solid var(--grey-line);
  border-radius: 12px;
  padding: 11px 14px;
  transition: border-color 0.15s ease, background-color 0.15s ease;
  width: 100%;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(200, 184, 120, 0.18);
}

.field textarea { resize: vertical; }

.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 4px;
}

.checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.93rem;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--paper-warm);
  border: 1px solid var(--grey-line);
  border-radius: 12px;
  padding: 10px 14px;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.checkbox:hover { border-color: var(--grey-soft); }

.checkbox input {
  width: 17px;
  height: 17px;
  accent-color: var(--gold-deep);
  flex: none;
}

.checkbox-single { margin: 16px 0 18px; display: inline-flex; }

.form-note {
  font-size: 0.88rem;
  color: var(--grey);
  font-style: italic;
}

/* Obavijest o obradi podataka (čl. 13. Opće uredbe) - mora stajati uz sam
   obrazac, ne samo u podnožju. Sitnija je od .form-note i nije kurzivna, da
   se čita kao informacija, a ne kao usputna napomena. */
.form-privacy-note {
  margin-top: 10px;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--grey);
}

.form-privacy-note a {
  color: var(--gold-deep);
  text-decoration: underline;
}

/* Napomena o slanju pripada zadnjem koraku, uz sam gumb. */
.inquiry-form.is-stepped:not(.is-last-step) .form-note,
.inquiry-form.is-stepped:not(.is-last-step) .form-privacy-note { display: none; }

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

/* Potvrda slanja */
.success-card {
  text-align: center;
  background: #fff;
  border: 1px solid var(--mint);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 56px 32px;
}

.success-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--mint-soft);
  border: 1.5px solid var(--mint);
  color: #2e6b52;
  font-size: 1.7rem;
  margin-bottom: 18px;
}

/* --------------------------- KONTAKT --------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

/* Obrazac nosi stranicu; kanali stoje uz njega i ostaju vidljivi pri skrolu. */
.contact-form-col .section-head { margin-bottom: 30px; }

.contact-aside { position: sticky; top: 96px; }

.aside-title {
  font-size: 1.45rem;
  margin-bottom: 18px;
}

.contact-stack { display: grid; gap: 18px; }

.contact-stack .contact-card { padding: 26px 24px 24px; }

.aside-panel {
  background: var(--paper-warm);
  border: 1px solid var(--grey-line);
  border-radius: var(--radius);
  padding: 26px 24px;
}

.aside-panel h3 { font-size: 1.15rem; }
.aside-panel p { font-size: 0.93rem; margin-top: 8px; }

.contact-card {
  display: block;
  background: #fff;
  border: 1px solid var(--grey-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 30px 26px;
  text-decoration: none;
  color: var(--ink-soft);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.contact-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
  border-color: var(--grey-soft);
}

.contact-card .icon-lg { color: var(--gold-deep); margin-bottom: 14px; }
.contact-card h3 { font-size: 1.3rem; }
.contact-card p { font-size: 0.93rem; }

.contact-link {
  font-weight: 700;
  color: var(--ink);
  border-bottom: 2px solid var(--gold);
  padding-bottom: 2px;
  font-size: 0.93rem;
}

/* ---------------------------- FOOTER ---------------------------- */
.site-footer {
  background: var(--paper-warm);
  border-top: 1px solid var(--grey-line);
  padding: 64px 0 0;
  margin-bottom: 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 3fr));
  gap: 40px;
  padding-bottom: 44px;
}

.footer-brand img {
  border-radius: 50%;
  border: 1px solid var(--grey-line);
  margin-bottom: 14px;
}

.footer-name {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
}

.footer-brand p:not(.footer-name),
.footer-col p { font-size: 0.92rem; }

.footer-col h3 {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 14px;
}

.footer-links {
  list-style: none;
  display: grid;
  gap: 10px;
}

.footer-links a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.95rem;
  border-bottom: 1px solid transparent;
}

.footer-links a:hover { color: var(--ink); border-bottom-color: var(--gold); }

.footer-bottom {
  border-top: 1px solid var(--grey-line);
  padding-top: 22px;
  padding-bottom: 26px;
}

.footer-bottom p {
  font-size: 0.85rem;
  color: var(--grey);
  margin: 0;
}

/* --------------------- STICKY MOBILNI CTA BAR --------------------- */
.mobile-cta-bar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(253, 253, 250, 0.95);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--grey-line);
}

.mobile-cta-bar .btn { flex: 1; padding: 0.75em 1em; font-size: 0.92rem; }

/* ------------------------ ANIMACIJE (reveal) ------------------------ */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.65s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--reveal-delay, 0s);
}

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .package-card, .equipment-card, .gallery-item, .contact-card, .offer-card { transition: none; }
  /* Korak obrasca se pojavljuje bez pomaka; traka koraka mijenja se odmah. */
  .inquiry-form.is-stepped fieldset { animation: none; }
  .form-rail-num,
  .form-rail-item::after { transition: none; }
  /* Vrtuljak kategorija ostaje statična pomična lista (JS ne pokreće petlju). */
  .offer-marquee-track { scroll-behavior: auto; }
  /* Kontrole obrasca: strelica se ne okreće, stanja se mijenjaju odmah.
     Otvaranje popisa, kalendara i uvjetnih polja gasi se u JS-u, jer se
     visina zna tek u trenutku poziva (WAAPI, ne keyframes). */
  .pmm-select-caret { transition: none; }
  .pmm-select-trigger,
  .pmm-date-control,
  .pmm-date-toggle,
  .pmm-option-mark,
  .pmm-option-mark::after,
  .pmm-cal-nav,
  .pmm-cal-title,
  .pmm-cal-day,
  .pmm-cal-chunk,
  .pmm-cal-link,
  .pmm-chip-remove,
  .cookie-toggle { transition: none; }
}

/* --------------------------- RESPONSIVE --------------------------- */
@media (max-width: 1020px) {
  /* Izbornik se sklapa u hamburger vec ovdje, a ne na 880 px.
     Razlog: izmedu 881 i 1020 px traka nosi sedam poveznica i gumb, pa
     je znak marke morao ostati sicusan i svejedno se stiskao dok mu
     natpis ne bi presao preko prve poveznice. To se dogadalo i prije
     povecanja znaka. Sklapanjem u hamburger taj tijesni pojas nestaje:
     ispod 1020 px uz znak stoji samo gumb, pa znak moze nositi punu
     velicinu, a navigacija nije natrpana. */
  .nav-toggle { display: flex; }

  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--grey-line);
    box-shadow: var(--shadow-lift);
    padding: 10px 24px 20px;
  }

  .main-nav.is-open { display: flex; }

  /* Pojednostavljena navigacija na pravnim stranicama (samo "Natrag") */
  .main-nav.is-open-static {
    display: flex;
    position: static;
    flex-direction: row;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
  }

  .main-nav.is-open-static .btn { white-space: nowrap; }

  .package-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 880px) {
  .hero { padding: 48px 0 64px; }

  /* Traka je nesto niza na uskim ekranima, znak ostaje citak. */
  .header-inner { min-height: 72px; }
  .brand-logo { width: 54px; height: 54px; }
  .brand-name { font-size: 1.45rem; }

  .hero-inner,
  .section-grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .hero-visual { margin-top: 8px; }
  .hero-card { max-width: 300px; }
  .hero-chip-1 { left: 0; }
  .hero-chip-2 { right: 0; }
}

@media (max-width: 480px) {
  .legal-page .brand-name { display: none; }

  .main-nav a:not(.btn) {
    padding: 13px 4px;
    border-bottom: 1px solid var(--grey-line);
    font-size: 1.02rem;
  }

  .nav-cta { margin-top: 16px; }
}

@media (max-width: 720px) {
  body { padding-bottom: 74px; } /* prostor za sticky CTA */

  .section { padding: 64px 0; }

  .package-grid,
  .gallery-grid,
  .steps { grid-template-columns: 1fr; }

  .include-list-columns { grid-template-columns: 1fr; }

  .premium-card { padding: 32px 24px 28px; }

  .form-grid { grid-template-columns: 1fr; }

  .inquiry-form { padding: 28px 20px; }

  /* Uža traka koraka: brojevi ostaju, natpis nosi samo trenutni korak. */
  .form-rail { gap: 4px; }
  .form-rail-label { display: none; }
  .form-rail-item.is-current .form-rail-label { display: inline; }

  /* Na uskom ekranu gumbi idu jedan ispod drugog, punom širinom. */
  .form-controls,
  .inquiry-form.is-stepped .form-controls { flex-wrap: wrap; }
  .form-controls > .btn,
  .form-controls .form-actions,
  .form-controls .form-actions .btn { flex: 1 1 100%; justify-content: center; }

  .mobile-cta-bar { display: flex; }

  .brand-logo { width: 52px; height: 52px; }
  .brand-name { font-size: 1.34rem; }
}

@media (max-width: 400px) {
  .hero-chip { font-size: 0.78rem; padding: 7px 12px; }
  .hero-actions .btn { width: 100%; }

  /* Znak i natpis moraju ostati citki, ali ne smiju gurnuti hamburger.
     I na najuzem ekranu ostaju veci nego prije ovog kruga izmjena. */
  .header-inner { min-height: 68px; }
  .brand { gap: 10px; }
  .brand-logo { width: 48px; height: 48px; }
  .brand-name { font-size: 1.22rem; }
}

/* =====================================================================
   VIŠESTRANIČNA VERZIJA - dodatni stilovi
   (page hero, kartice sa slikom, detaljne stranice, filteri, lightbox,
   CTA traka, obrazac s greškama)
   ===================================================================== */

/* ------------------------- PAGE HERO (podstranice) ------------------------- */
.page-hero {
  padding: 64px 0 56px;
  background:
    radial-gradient(560px 380px at 90% 0%, var(--blue-soft) 0%, transparent 70%),
    radial-gradient(480px 360px at 0% 100%, var(--pink-soft) 0%, transparent 70%),
    var(--paper-warm);
  border-bottom: 1px solid var(--grey-line);
}

.page-hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.2rem); max-width: 20em; }

.page-lead {
  font-size: 1.12rem;
  max-width: 40em;
  margin-bottom: 0;
}

.page-hero-detail { padding: 48px 0 46px; }

.breadcrumb { margin-bottom: 18px; }

.breadcrumb a {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink-soft);
  text-decoration: none;
}

.breadcrumb a:hover { color: var(--ink); }

.page-hero .badge { margin-bottom: 14px; }

.badge-ink { background: var(--ink); color: #fff; }

.badge-category { border: 1px solid var(--grey-line); background: #fff; color: var(--ink); }
.badge-mint  { border-color: var(--mint);  background: var(--mint-soft); }
.badge-blue  { border-color: var(--blue);  background: var(--blue-soft); }
.badge-peach { border-color: var(--peach); background: var(--peach-soft); }
.badge-pink  { border-color: var(--pink);  background: var(--pink-soft); }

/* ------------------- KARTICE SA SLIKOM (paketi/oprema) ------------------- */
.card-visual { padding: 0; overflow: hidden; }

/* Badge unutar kartice sa slikom - negativni offset bi bio odrezan */
.card-visual .badge-popular {
  top: 14px;
  right: 14px;
  z-index: 2;
}

.card-visual .card-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 22px 24px 24px;
}

.card-cover {
  display: block;
  text-decoration: none;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-bottom: 1px solid var(--grey-line);
}

.card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.card-visual:hover .card-cover img { transform: scale(1.04); }

.card-cover .gallery-ph-inner { aspect-ratio: auto; height: 100%; }

.card-title-link { color: inherit; text-decoration: none; }
.card-title-link:hover { color: var(--gold-deep); }

.card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.equipment-card.card-visual .package-foot { margin-top: auto; padding-top: 14px; }

.equipment-card .equipment-title { font-size: 1.15rem; margin-bottom: 0.35em; }

.equipment-card .dim-tag { margin-bottom: 12px; align-self: flex-start; }

.price-label-sm { font-size: 1rem; }

/* ------------------------------ ŠTO NUDIMO ------------------------------ */
/* Vrtuljak kategorija - traka klizi neprekidno (vidi initOfferMarquee u main.js).
   Bazira se na nativnom vodoravnom scrollu: bez JS-a ostaje obična pomična
   lista, a JS samo dodaje automatsko pomicanje i bešavnu petlju. */
.offer-marquee {
  position: relative;
  /* Rubovi se blago gube kako bi se vidjelo da lista ide dalje. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 42px, #000 calc(100% - 42px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 42px, #000 calc(100% - 42px), transparent);
}

.offer-marquee-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(228px, 22vw, 272px);
  gap: 20px;
  /* Traka je ponegdje <ul> (kartice povjerenja na /o-nama). */
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-behavior: auto;
  /* Prostor za hover podizanje kartice i njezinu sjenu. */
  padding: 6px 4px 18px;
  scrollbar-width: thin;
  scrollbar-color: var(--grey-soft) transparent;
}

/* Dok vrtuljak radi, traka se pomiče sama - nativna traka za pomicanje bi
   samo treperila, a povlačenje mišem preuzima JS. */
.offer-marquee.is-live .offer-marquee-track {
  scrollbar-width: none;
  cursor: grab;
}

.offer-marquee.is-live .offer-marquee-track::-webkit-scrollbar { display: none; }

.offer-marquee.is-dragging .offer-marquee-track { cursor: grabbing; }

/* Kartica se ne smije "uhvatiti" kao slika/tekst tijekom povlačenja. */
.offer-marquee.is-live .offer-marquee-track > * {
  -webkit-user-select: none;
  user-select: none;
}

.offer-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--grey-line);
  border-top: 4px solid var(--grey-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 26px 24px;
  text-decoration: none;
  color: var(--ink-soft);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.offer-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }

.offer-card.accent-mint  { border-top-color: var(--mint); }
.offer-card.accent-blue  { border-top-color: var(--blue); }
.offer-card.accent-peach { border-top-color: var(--peach); }
.offer-card.accent-pink  { border-top-color: var(--pink); }

.offer-card h3 { font-size: 1.28rem; margin-bottom: 0; }

.offer-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--paper-warm);
  border: 1px solid var(--grey-line);
  color: var(--ink);
  margin-bottom: 8px;
}

.offer-icon svg { width: 24px; height: 24px; }

.offer-link {
  margin-top: 4px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ink);
  border-bottom: 2px solid var(--gold);
  padding-bottom: 2px;
}

/* --------------------------- DETALJNE STRANICE --------------------------- */
.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 44px;
  align-items: start;
}

.detail-main { display: grid; gap: 40px; }

.detail-main h2 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); }

.detail-cover {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--grey-line);
  border-top: 5px solid var(--grey-soft);
  box-shadow: var(--shadow-soft);
  background: #fff;
}

.detail-cover.accent-mint  { border-top-color: var(--mint); }
.detail-cover.accent-blue  { border-top-color: var(--blue); }
.detail-cover.accent-peach { border-top-color: var(--peach); }
.detail-cover.accent-pink  { border-top-color: var(--pink); }
.detail-cover.accent-gold  { border-top-color: var(--gold); }

.detail-cover img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.detail-cover .gallery-ph-inner { aspect-ratio: 16 / 9; }

.detail-aside { position: sticky; top: 96px; }

.detail-card {
  background: #fff;
  border: 1px solid var(--grey-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 30px 28px;
}

.detail-card-premium {
  background: linear-gradient(135deg, #fffdf7 0%, var(--beige) 100%);
  border-color: #e3d9bb;
}

.detail-card-title {
  font-size: 1.35rem;
  margin-bottom: 16px;
}

.detail-space-note {
  margin-top: 16px;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--grey);
}

.detail-price {
  border-top: 1px solid var(--grey-line);
  margin-top: 20px;
  padding-top: 18px;
}

/* Crta je razdjelnica prema popisu "Ukratko" iznad. Kad stavka nema nijedan
   podatak, popis se ne ispisuje i cijena je prvo u kartici - tada bi crta
   visjela na vrhu, bez icega iznad sebe. */
.detail-card > .detail-price:first-child {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

.detail-card-premium .detail-price { border-top-color: #e3d9bb; }

.detail-price .price-label { font-size: 1.3rem; }
.detail-price .form-note { margin: 6px 0 0; }

.detail-actions {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}

.detail-facts {
  list-style: none;
  display: grid;
  gap: 14px;
}

.detail-facts li { display: grid; gap: 3px; }

.detail-fact-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey);
}

/* Napomena uz "Dimenzije": manja i tanja od oznake, ali istog tona - mora se
   procitati, a ne samo naslutiti. Verzalna slova i razmak izmedu slova se
   ponistavaju jer bi nasljedivanjem od .detail-fact-label razbili zagradu. */
.detail-fact-hint {
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

.detail-facts .dim-tag { justify-self: start; }

.related-list {
  list-style: none;
  display: grid;
  gap: 10px;
}

.related-list a {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid var(--grey-line);
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
  padding: 14px 18px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.related-list a:hover { transform: translateX(4px); border-color: var(--grey-soft); }

.related-title { flex-grow: 1; }

.related-note {
  font-size: 0.82rem;
  font-weight: 400;
  font-style: italic;
  color: var(--grey);
}

.gallery-grid-detail { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ------------------------------ GALERIJA+ ------------------------------ */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 30px;
}

.filter-pill {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink-soft);
  background: #fff;
  border: 1px solid var(--grey-line);
  border-radius: 999px;
  padding: 8px 18px;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.filter-pill:hover { border-color: var(--grey-soft); }

.filter-pill.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.gallery-empty {
  text-align: center;
  font-style: italic;
  color: var(--grey);
  padding: 30px 0;
}

.gallery-item a { display: block; }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(43, 44, 40, 0.88);
}

.lightbox[hidden] { display: none; }

.lightbox img {
  max-width: min(1000px, 100%);
  max-height: 88vh;
  border-radius: 12px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
}

.lightbox-close {
  position: absolute;
  top: 18px;
  right: 22px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 1.3rem;
  cursor: pointer;
}

.lightbox-close:hover { background: rgba(255, 255, 255, 0.28); }

/* ------------------------------- CTA TRAKA ------------------------------- */
.cta-band-wrap { padding: 60px 0; }

.cta-band {
  text-align: center;
  background:
    radial-gradient(480px 300px at 12% 0%, var(--mint-soft) 0%, transparent 70%),
    radial-gradient(480px 300px at 88% 100%, var(--peach-soft) 0%, transparent 70%),
    #fff;
  border: 1px solid var(--grey-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 54px 32px;
}

.cta-band h2 { margin-bottom: 0.35em; }

.cta-band .section-lead {
  max-width: 34em;
  margin: 0 auto 26px;
}

.cta-band-actions { justify-content: center; }

/* --------------------------- OBRAZAC - GREŠKE --------------------------- */
.alert-error {
  background: #fdf0ee;
  border: 1px solid #eac8c2;
  border-radius: 14px;
  color: #7c3b2e;
  padding: 18px 22px;
  margin-bottom: 26px;
  font-size: 0.95rem;
}

.alert-error ul { margin-top: 8px; padding-left: 20px; }

/* Honeypot - vizualno skriveno, ostaje u DOM-u za botove */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.success-section { padding-top: 72px; }
.success-title { font-size: clamp(1.8rem, 3.4vw, 2.4rem); }
.form-actions-center { justify-content: center; margin-top: 22px; }

/* ------------------------------- FOOTER+ ------------------------------- */
.footer-area {
  margin-top: 16px;
  font-size: 0.85rem;
  color: var(--grey);
}

/* Tri stupca: autorstvo lijevo, izrada u sredini, pravni dokumenti desno.
   Krajnji stupci dijele istu širinu (1fr) pa srednji ostaje u sredini reda,
   a ne u sredini preostalog prostora. */
.footer-bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px 20px;
}

.footer-credit { justify-self: center; text-align: center; }

.footer-credit a {
  color: var(--grey);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.footer-credit a:hover {
  color: var(--ink);
  border-bottom-color: var(--gold);
}

.footer-legal-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px 18px;
  margin: 0;
  padding: 0;
}

.footer-legal-links a {
  font-size: 0.85rem;
  color: var(--grey);
  text-decoration: none;
}

.footer-legal-links a:hover { color: var(--ink); }

/* Tri stupca stanu u jedan red tek dok ima širine za sve tri pravne
   poveznice. Ispod toga se slažu jedan ispod drugoga i centriraju, da red
   ne ostane napola prazan s prelomljenim popisom. */
@media (max-width: 880px) {
  .footer-bottom {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 14px;
  }

  .footer-legal-links { justify-content: center; }
  .footer-legal { text-align: center; }
}

.footer-admin a {
  color: var(--grey);
  font-size: 0.85rem;
  text-decoration: none;
}

.footer-admin a:hover { color: var(--ink); }

/* ------------------------------ RESPONSIVE+ ------------------------------ */
@media (max-width: 1020px) {
  .offer-marquee-track { grid-auto-columns: clamp(210px, 42vw, 250px); }
}

@media (max-width: 880px) {
  .detail-grid { grid-template-columns: 1fr; gap: 36px; }
  .detail-aside { position: static; }
  .contact-aside { position: static; }
  .contact-stack { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}

@media (max-width: 720px) {
  .page-hero { padding: 46px 0 40px; }
  .offer-marquee-track { grid-auto-columns: min(74vw, 260px); gap: 14px; }
  .offer-marquee {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 22px, #000 calc(100% - 22px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 22px, #000 calc(100% - 22px), transparent);
  }
  .gallery-grid-detail { grid-template-columns: 1fr; }
  .cta-band { padding: 40px 22px; }
  .card-visual .card-body { padding: 18px 18px 20px; }
}

/* ================== DODATNI AKCENTI (lavanda, kadulja, limun, koraljna) ================== */
:root {
  --lavender: #d8d0ec;
  --lavender-soft: #efebf8;
  --sage: #ccdcc0;
  --sage-soft: #eaf2e3;
  --lemon: #f5e9b8;
  --lemon-soft: #fbf5dd;
  --coral: #f3bdb0;
  --coral-soft: #fbe8e3;
}

.swatch-lavender { background: var(--lavender); }
.swatch-sage { background: var(--sage); }
.swatch-lemon { background: var(--lemon); }
.swatch-coral { background: var(--coral); }
.swatch-beige { background: var(--beige); }

.tile-lavender.gallery-ph-inner,
.tile-lavender .gallery-ph-inner { background: linear-gradient(150deg, var(--lavender-soft), var(--lavender)); }
.tile-sage.gallery-ph-inner,
.tile-sage .gallery-ph-inner { background: linear-gradient(150deg, var(--sage-soft), var(--sage)); }
.tile-lemon.gallery-ph-inner,
.tile-lemon .gallery-ph-inner { background: linear-gradient(150deg, var(--lemon-soft), var(--lemon)); }
.tile-coral.gallery-ph-inner,
.tile-coral .gallery-ph-inner { background: linear-gradient(150deg, var(--coral-soft), var(--coral)); }

.package-card.accent-lavender, .offer-card.accent-lavender, .detail-cover.accent-lavender, .equipment-category-head.accent-lavender { border-top-color: var(--lavender); border-left-color: var(--lavender); }
.package-card.accent-sage, .offer-card.accent-sage, .detail-cover.accent-sage, .equipment-category-head.accent-sage { border-top-color: var(--sage); border-left-color: var(--sage); }
.package-card.accent-lemon, .offer-card.accent-lemon, .detail-cover.accent-lemon, .equipment-category-head.accent-lemon { border-top-color: var(--lemon); border-left-color: var(--lemon); }
.package-card.accent-coral, .offer-card.accent-coral, .detail-cover.accent-coral, .equipment-category-head.accent-coral { border-top-color: var(--coral); border-left-color: var(--coral); }
.package-card.accent-gold, .offer-card.accent-gold, .equipment-category-head.accent-gold { border-top-color: var(--gold); border-left-color: var(--gold); }
.package-card.accent-beige, .offer-card.accent-beige, .detail-cover.accent-beige, .equipment-category-head.accent-beige { border-top-color: var(--beige); border-left-color: var(--beige); }

/* ------------------------------ VIDEO U GALERIJI ------------------------------ */
.gallery-item video {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  background: var(--ink);
}

/* Stavka opreme u paketu bez javne stranice (VIDLJIVO isključeno) */
.related-list .related-static {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid var(--grey-line);
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
  padding: 14px 18px;
  color: var(--ink);
  font-weight: 600;
}

/* =====================================================================
   ANIMACIJE+ - nježne animacije sučelja
   Ulaz heroja pri učitavanju, lebdeći čipovi, podcrtavanje navigacije,
   otvaranje mobilnog izbornika, FAQ, lightbox, filtar galerije.
   Sve se isključuje uz prefers-reduced-motion.
   ===================================================================== */

@keyframes rise-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes zoom-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: none; }
}

@keyframes pop-in {
  from { opacity: 0; transform: scale(0.5); }
  to   { opacity: 1; transform: none; }
}

@keyframes float-soft {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

@keyframes pulse-dot {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.25); }
}

/* ---------------------- Ulaz heroja pri učitavanju ---------------------- */
.hero-copy > * {
  animation: rise-in 0.65s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.hero-copy > *:nth-child(1) { animation-delay: 0.05s; }
.hero-copy > *:nth-child(2) { animation-delay: 0.13s; }
.hero-copy > *:nth-child(3) { animation-delay: 0.21s; }
.hero-copy > *:nth-child(4) { animation-delay: 0.29s; }
.hero-copy > *:nth-child(5) { animation-delay: 0.37s; }
.hero-copy > *:nth-child(6) { animation-delay: 0.45s; }

.hero-visual {
  animation: rise-in 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.3s both;
}

/* Podstranice - hero naslov i uvod */
.page-hero .container > * {
  animation: rise-in 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.page-hero .container > *:nth-child(1) { animation-delay: 0.03s; }
.page-hero .container > *:nth-child(2) { animation-delay: 0.1s; }
.page-hero .container > *:nth-child(3) { animation-delay: 0.17s; }
.page-hero .container > *:nth-child(4) { animation-delay: 0.24s; }

/* --------------------------- Lebdeći čipovi --------------------------- */
.hero-chip-1 { animation: float-soft 5.5s ease-in-out infinite; }
.hero-chip-2 { animation: float-soft 6.5s ease-in-out -2s infinite; }
.hero-chip-3 { animation: float-soft 7s ease-in-out -4s infinite; }

.eyebrow-dot { animation: pulse-dot 3s ease-in-out infinite; }

/* ---------------------- Podcrtavanje u navigaciji ---------------------- */
@media (min-width: 881px) {
  .main-nav a:not(.btn) {
    position: relative;
    border-bottom: none;
    padding-bottom: 6px;
  }

  .main-nav a:not(.btn)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .main-nav a:not(.btn):hover::after,
  .main-nav a:not(.btn)[aria-current="page"]::after { transform: scaleX(1); }
}

/* ------------------------ Mobilni izbornik ------------------------ */
@media (max-width: 880px) {
  .main-nav.is-open { animation: rise-in 0.25s ease both; }
}

/* ------------------------------- Gumbi ------------------------------- */
.btn:active { transform: translateY(0) scale(0.98); box-shadow: none; }

/* -------------------------------- FAQ -------------------------------- */
.faq-item[open] > p { animation: rise-in 0.3s ease both; }

/* ------------------------------ Lightbox ------------------------------ */
.lightbox { animation: fade-in 0.25s ease both; }
.lightbox img { animation: zoom-in 0.3s cubic-bezier(0.22, 0.61, 0.36, 1) both; }

/* ---------------------- Potvrda poslanog upita ---------------------- */
.success-mark { animation: pop-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both; }

/* ------------------------- Filtar galerije ------------------------- */
.gallery-item.filter-pop { animation: rise-in 0.35s ease both; }

/* ------------------------ Smanjeno kretanje ------------------------ */
@media (prefers-reduced-motion: reduce) {
  .hero-copy > *,
  .hero-visual,
  .page-hero .container > *,
  .hero-chip-1,
  .hero-chip-2,
  .hero-chip-3,
  .eyebrow-dot,
  .main-nav.is-open,
  .faq-item[open] > p,
  .lightbox,
  .lightbox img,
  .success-mark,
  .gallery-item.filter-pop { animation: none; }

  .main-nav a:not(.btn)::after { transition: none; }

  /* Zaglavlje se uz smanjeno kretanje pojavi odmah, bez klizanja. */
  .js .fullscreen-hero .site-header,
  .js .fullscreen-hero .mobile-cta-bar { transition: none; }
}

/* =====================================================================
   STRANICA PAKETA+ - sličice opreme, vrtuljak prijedloga,
   galerija na dnu i navigacija lightboxa.
   ===================================================================== */

/* ------------------- Oprema u paketu - sličice ------------------- */
.related-thumb {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--grey-line);
}

.related-thumb-ph { display: block; }

@media (max-width: 480px) {
  .related-thumb { width: 44px; height: 44px; }
}

/* --------------- Vrtuljak "Možda biste željeli i…" --------------- */
.carousel { position: relative; }

.carousel-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(200px, 26vw, 260px);
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 4px 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--grey-soft) transparent;
}

.suggest-card {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--grey-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

a.suggest-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }

.suggest-cover { display: block; }

.suggest-cover img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.suggest-cover .gallery-ph-note { font-size: 0.85rem; padding: 0 10px; text-align: center; }

.suggest-body {
  display: grid;
  gap: 2px;
  padding: 14px 16px 16px;
}

.suggest-title { font-weight: 700; }

.suggest-category {
  font-size: 0.82rem;
  color: var(--grey);
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  display: none;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--grey-line);
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-soft);
  color: var(--ink);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease, opacity 0.15s ease;
}

.carousel.has-overflow .carousel-btn { display: flex; }

.carousel-btn:disabled { opacity: 0.35; cursor: default; }

.carousel-btn:not(:disabled):hover { background: var(--beige, #f4efe6); }

.carousel-prev { left: -14px; }
.carousel-next { right: -14px; }

@media (max-width: 720px) {
  .carousel-prev { left: -6px; }
  .carousel-next { right: -6px; }
}

/* ---------------- "Što set sadrži" (stranica seta) ---------------- */
/* Redak po elementu: fotografija lijevo, naziv/opis/specifikacije desno.
   Nema poveznice ni gumba - set se iznajmljuje kao cjelina. */
.set-elements {
  list-style: none;
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
}

.set-element {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--grey-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

.set-element-media img,
.set-element-ph {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: calc(var(--radius) - 6px);
}

/* Fotografija otvara lightbox. Povećalo stoji stalno, samo tiho: bez njega
   ništa ne govori da se slika može otvoriti, a hover ne postoji na dodiru. */
.set-element-zoom {
  position: relative;
  display: block;
  border-radius: calc(var(--radius) - 6px);
  overflow: hidden;
}

.set-element-zoom img { transition: transform 0.25s ease; }

.set-element-zoom:hover img,
.set-element-zoom:focus-visible img { transform: scale(1.05); }

.set-element-zoom-mark {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--grey-line);
  color: var(--ink);
  box-shadow: var(--shadow-soft);
}

.set-element-zoom-mark svg { width: 15px; height: 15px; }

.set-element-title { font-size: 1.08rem; margin: 0; }

.set-element-note {
  font-size: 0.9rem;
  color: var(--grey);
  margin: 4px 0 0;
}

.set-element-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 0;
}

@media (max-width: 560px) {
  .set-element { grid-template-columns: 120px minmax(0, 1fr); gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .set-element-zoom img { transition: none; }
  .set-element-zoom:hover img,
  .set-element-zoom:focus-visible img { transform: none; }
}

/* --------- Vrtuljak "Više slika ovog elementa" (proizvod) --------- */
/* Iste plocice kao u galeriji, samo bez potpisa i poredane vodoravno. */

/* .detail-main je grid, pa mu je dijete siroko "min-content" - a to je kod
   trake zbroj svih plocica. Bez min-width: 0 traka se ne bi kotrljala nego bi
   razvukla stupac i podvukla se pod pricvrscenu karticu s desne strane. */
.product-gallery { min-width: 0; }

.carousel-gallery .carousel-track { grid-auto-columns: clamp(180px, 22vw, 230px); }

.carousel-gallery .gallery-item { scroll-snap-align: start; }

/* ----------------- Galerija paketa (dno stranice) ----------------- */
.gallery-grid-showcase .gallery-item img { height: 100%; }

@media (min-width: 721px) {
  .gallery-grid-showcase .gallery-item:first-child {
    grid-column: span 2;
    grid-row: span 2;
  }

  .gallery-grid-showcase .gallery-item:first-child img { aspect-ratio: auto; }
}

@media (max-width: 720px) {
  .gallery-grid-showcase { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

/* ---------------------- Lightbox - navigacija ---------------------- */
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
}

.lightbox-nav:hover { background: rgba(255, 255, 255, 0.28); }

.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }

.lightbox-count {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.lightbox-nav[hidden],
.lightbox-count[hidden] { display: none; }

@media (max-width: 720px) {
  .lightbox-nav { width: 42px; height: 42px; }
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
}

/* ------------------------ Smanjeno kretanje ------------------------ */
@media (prefers-reduced-motion: reduce) {
  .suggest-card,
  .carousel-btn { transition: none; }

  .carousel-track { scroll-behavior: auto; }
}

/* ==========================================================================
   KLIJENTSKI KRUG IZMJENA (srpanj 2026)
   Blokovi: "Želite sami složiti svoju kombinaciju?", "Obogatite svoj paket",
   napomena ispod paketa.
   ========================================================================== */

.custom-combo {
  margin-top: 48px;
  padding: 40px 36px;
  text-align: center;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(520px 300px at 12% 0%, var(--mint-soft) 0%, transparent 68%),
    radial-gradient(480px 300px at 88% 100%, var(--peach-soft) 0%, transparent 68%),
    var(--paper);
  border: 1px solid var(--grey-line);
  box-shadow: var(--shadow-soft);
}

.custom-combo h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  margin: 0 0 12px;
  color: var(--ink);
}

.custom-combo p {
  max-width: 46rem;
  margin: 0 auto 24px;
  color: var(--ink-soft);
}

.custom-combo .card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* ------------------------ Obogatite svoj paket ------------------------ */
.addon-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.addon-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  border-radius: var(--radius);
  background: var(--paper);
  border: 1px solid var(--grey-line);
}

.addon-name { color: var(--ink); font-weight: 600; }

.addon-price {
  flex: none;
  font-weight: 700;
  color: var(--gold-deep);
  white-space: nowrap;
}

/* --------------------------- Napomena uz pakete --------------------------- */
.packages-note {
  margin-top: 48px;
  padding: 28px 32px;
  border-radius: var(--radius);
  background: var(--paper-warm);
  border: 1px solid var(--grey-line);
}

.packages-note h2 {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey);
  margin: 0 0 12px;
}

.packages-note p { margin: 0 0 10px; font-size: 0.96rem; }
.packages-note p:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
  .custom-combo { padding: 32px 22px; }
  .packages-note { padding: 22px 20px; }
  .custom-combo .card-actions .btn { width: 100%; }
  .addon-list li { flex-direction: column; gap: 4px; }
}

/* ==========================================================================
   KONTROLE OBRASCA (kolovoz 2026)
   Padajući izbornik, višestruki odabir i kalendar u jeziku i tonu stranice.

   Sve tri kontrole nadograđuju nativno polje koje ostaje nositelj vrijednosti.
   Nativno polje se skriva TEK kad je ljuska označena .is-ready - ako
   nadogradnja zapne, korisniku ostaje nativna kontrola, a ne prazno mjesto.
   ========================================================================== */

.pmm-select,
.pmm-date { position: relative; }

.pmm-select.is-ready .pmm-select-source,
.pmm-date.is-ready .pmm-date-source {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  opacity: 0;
}

/* Dok nadogradnja nije gotova, vidi se samo nativno polje. */
.pmm-select:not(.is-ready) .pmm-select-trigger,
.pmm-select:not(.is-ready) .pmm-select-panel,
.pmm-date:not(.is-ready) .pmm-date-control,
.pmm-date:not(.is-ready) .pmm-cal { display: none; }

/* ------------------------------ Zatvoreno polje ------------------------------ */
.pmm-select-trigger,
.pmm-date-control {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  text-align: left;
  color: var(--ink);
  background: var(--paper-warm);
  border: 1px solid var(--grey-line);
  border-radius: 12px;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.pmm-select-trigger {
  justify-content: space-between;
  padding: 11px 14px;
  cursor: pointer;
}

.pmm-select-trigger:hover,
.pmm-date-control:hover { border-color: var(--grey-soft); }

/* width:0 + flex-grow, ne samo min-width:0. Gumb je zaseban formatting
   context: njegova najmanja širina računa se iz sadržaja, pa bi najduži naziv
   paketa ("Paket 6 - soft play + veliki dvorac + bubble house") razvukao
   cijeli stupac obrasca i uveo vodoravni scroll na uskim ekranima.
   Nula kao osnova znači da tekst ne doprinosi najmanjoj širini, a flex-grow
   ga svejedno rastegne preko cijelog raspoloživog prostora. */
.pmm-select-value {
  width: 0;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Natuknica je uputa, ne vrijednost - nosi boju pomoćnog teksta. */
.pmm-select-trigger.is-empty .pmm-select-value { color: var(--grey); }

.pmm-select-caret {
  flex: none;
  width: 12px;
  height: 8px;
  color: var(--grey);
  transition: transform 0.2s ease, color 0.15s ease;
}

.pmm-select.is-open .pmm-select-caret {
  transform: rotate(180deg);
  color: var(--gold-deep);
}

/* Fokus je isti kao na svakom polju: bijela podloga, mjedeni rub i prsten. */
.pmm-select-trigger:focus-visible,
.pmm-date-control:focus-within {
  outline: none;
  border-color: var(--gold);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(200, 184, 120, 0.18);
}

.pmm-select.is-open .pmm-select-trigger { background: #fff; border-color: var(--gold); }

/* Greška: rub i podloga kao na nativnom polju, fokus i dalje mjedeni. */
.pmm-select.is-invalid .pmm-select-trigger,
.pmm-date.is-invalid .pmm-date-control {
  border-color: #eac8c2;
  background: #fdf0ee;
}

.pmm-select.is-invalid .pmm-select-trigger:focus-visible,
.pmm-date.is-invalid .pmm-date-control:focus-within { background: #fff; }

/* -------------------------------- Popis -------------------------------- */
.pmm-select-panel,
.pmm-cal {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 40;
  background: #fff;
  border: 1px solid var(--grey-line);
  border-radius: 16px;
  box-shadow: var(--shadow-lift);
}

.pmm-select-panel {
  right: 0;
  padding: 6px;
  overflow: hidden;
}

.pmm-select.is-above .pmm-select-panel,
.pmm-date.is-above .pmm-cal {
  top: auto;
  bottom: calc(100% + 6px);
}

.pmm-select-panel[hidden],
.pmm-cal[hidden] { display: none; }

.pmm-select-search { padding: 4px 4px 8px; }

.pmm-select-search-input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.93rem;
  color: var(--ink);
  background: var(--paper-warm);
  border: 1px solid var(--grey-line);
  border-radius: 12px;
  padding: 8px 12px;
}

.pmm-select-search-input:focus {
  outline: none;
  border-color: var(--gold);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(200, 184, 120, 0.18);
}

.pmm-select-list {
  max-height: 260px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.pmm-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 0.95rem;
  color: var(--ink-soft);
  cursor: pointer;
}

.pmm-option[hidden] { display: none; }

/* Tipkovnica i miš vode isti trag - jedna oznaka trenutne stavke. */
.pmm-option.is-active { background: var(--paper-warm); color: var(--ink); }

.pmm-option.is-selected { color: var(--ink); font-weight: 600; }

/* Kvačica nosi stanje odabira; kod višestrukog odabira je i okvir potvrde. */
.pmm-option-mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid var(--grey-soft);
  border-radius: 6px;
  background: #fff;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.pmm-select:not(.pmm-select-multi) .pmm-option-mark {
  border-radius: 50%;
}

.pmm-option-mark::after {
  content: "";
  width: 9px;
  height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.pmm-option.is-selected .pmm-option-mark {
  background: var(--gold-deep);
  border-color: var(--gold-deep);
}

.pmm-option.is-selected .pmm-option-mark::after { opacity: 1; }

.pmm-option-label { min-width: 0; }

.pmm-select-empty {
  margin: 0;
  padding: 12px;
  font-size: 0.93rem;
  color: var(--grey);
  text-align: center;
}

.pmm-select-empty[hidden] { display: none; }

/* ----------------------------- Odabrane pilule ----------------------------- */
/* Kod višestrukog odabira gumb ne može pokazati sve odabrano; pilule drže
   odabir vidljivim i uklonjivim bez ponovnog otvaranja popisa. */
.pmm-select-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.pmm-select-chips[hidden] { display: none; }

.pmm-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px 5px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--grey-line);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
}

.pmm-chip-remove {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--paper-warm);
  color: var(--grey);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.pmm-chip-remove svg { width: 8px; height: 8px; }

.pmm-chip-remove:hover {
  background: var(--beige);
  color: var(--ink);
}

/* ------------------------------- Kalendar ------------------------------- */
.pmm-date-control { padding: 0; }

.pmm-date-text {
  flex: 1;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: none;
  border: 0;
  border-radius: 12px 0 0 12px;
  padding: 11px 0 11px 14px;
}

.pmm-date-text:focus { outline: none; }
.pmm-date-text::placeholder { color: var(--grey); }

.pmm-date-toggle {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  align-self: stretch;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--grey-line);
  border-radius: 0 12px 12px 0;
  background: none;
  color: var(--grey);
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.pmm-date-toggle svg { width: 18px; height: 18px; }

.pmm-date-toggle:hover,
.pmm-date.is-open .pmm-date-toggle {
  color: var(--gold-deep);
  background: var(--beige);
}

.pmm-cal {
  right: auto;
  width: 306px;
  max-width: calc(100vw - 48px);
  padding: 14px;
  /* Visinu ograničava JS kad ni iznad ni ispod polja nema dovoljno mjesta;
     bez vlastitog scrolla kalendar bi tada ispao iz vidokruga. */
  overflow-y: auto;
  overscroll-behavior: contain;
}

.pmm-cal-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}

.pmm-cal-nav {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--grey-line);
  border-radius: 50%;
  background: #fff;
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.pmm-cal-nav svg { width: 8px; height: 12px; }
.pmm-cal-nav:hover { border-color: var(--gold); color: var(--gold-deep); }

/* Mjesec i godina su imenovanje - serif, kao i ostali naslovi u sustavu. */
.pmm-cal-title {
  flex: 1;
  padding: 6px 8px;
  border: 0;
  border-radius: 12px;
  background: none;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.pmm-cal-title:hover { background: var(--paper-warm); }

.pmm-cal-weekdays,
.pmm-cal-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.pmm-cal-weekdays {
  margin-bottom: 4px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--grey-line);
}

.pmm-cal-weekdays span {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey);
}

.pmm-cal-day {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: none;
  font-family: var(--font-body);
  font-size: 0.93rem;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.pmm-cal-day.is-empty { pointer-events: none; }

.pmm-cal-day:hover:not(:disabled) { background: var(--paper-warm); color: var(--ink); }

/* Danas je orijentir, ne odabir - mjedeni obrub bez ispune. */
.pmm-cal-day.is-today { border-color: var(--gold); color: var(--gold-deep); font-weight: 700; }

/* Odabir se ne smije moći zamijeniti ni s čim: puna tinta i bijeli tekst,
   isti potez kao aktivna filtar-pilula i primarni gumb. */
.pmm-cal-day.is-selected,
.pmm-cal-day.is-selected:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
  font-weight: 700;
}

.pmm-cal-day:disabled {
  color: var(--grey-soft);
  cursor: not-allowed;
}

.pmm-cal-months {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.pmm-cal-chunk {
  padding: 12px 4px;
  border: 1px solid var(--grey-line);
  border-radius: 12px;
  background: #fff;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.pmm-cal-chunk:hover:not(:disabled) { border-color: var(--gold); color: var(--gold-deep); }

.pmm-cal-chunk.is-selected {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.pmm-cal-chunk:disabled {
  color: var(--grey-soft);
  cursor: not-allowed;
}

.pmm-cal-foot {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--grey-line);
}

.pmm-cal-link {
  padding: 4px 8px;
  border: 0;
  border-radius: 999px;
  background: none;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--gold-deep);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.pmm-cal-link:hover { background: var(--beige); }

/* ------------------------------ Uvjetno polje ------------------------------ */
/* Polje koje se otvara animacijom visine nema vlastitu marginu - razmak daje
   mreža iznad, a margina bi na prvom kadru iskočila u punoj veličini. */
.field-reveal[hidden] { display: none; }

@media (max-width: 640px) {
  .pmm-cal { width: 100%; }
  .pmm-select-list { max-height: 220px; }
}

/* ==========================================================================
   SLOŽI KOMBINACIJU (/slozi-kombinaciju)
   Vizualni odabir opreme po kategorijama - prvi korak obrasca.
   ========================================================================== */

.combo-picker {
  display: grid;
  gap: 28px;
  margin-bottom: 26px;
}

/* Kategorija nosi svoj akcent kao 4px lijevi rub - isti potez kao na
   naslovima kategorija u katalogu opreme. */
.combo-group {
  padding-left: 18px;
  border-left: 4px solid var(--grey-soft);
}

.combo-group-head { margin-bottom: 14px; }

.combo-group-head h3 {
  font-size: 1.25rem;
  margin: 0 0 4px;
}

.combo-group-head p {
  margin: 0;
  font-size: 0.93rem;
  color: var(--grey);
}

.combo-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 12px;
}

/* Stavka je kartica-potvrda: cijela ploha je meta za klik. */
.combo-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--grey-line);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

/* Namjerno BEZ podizanja karticе: ovih je kartica desetak u gustoj mreži i
   svaka bi se pomicala dok pokazivač prelazi preko njih, a na dodir bi
   ostala podignuta i nakon odabira. Rub i sjena su dovoljan odgovor. */
.combo-item:hover {
  border-color: var(--grey-soft);
  box-shadow: var(--shadow-soft);
}

/* Nativna potvrda ostaje nositelj stanja, ali se ne vidi - oznaku crtamo. */
.combo-item input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}

.combo-item-mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border: 1px solid var(--grey-soft);
  border-radius: 6px;
  background: var(--paper-warm);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.combo-item-mark::after {
  content: "";
  width: 10px;
  height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.combo-item-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  min-width: 0;
}

.combo-item-title {
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--ink);
  line-height: 1.3;
}

.combo-item-desc {
  font-size: 0.88rem;
  color: var(--grey);
  line-height: 1.45;
}

/* Odabir je nedvosmislen: puna tinta u oznaci i tintani rub kartice. */
.combo-item:has(input:checked) {
  border-color: var(--ink);
  box-shadow: var(--shadow-soft);
}

.combo-item:has(input:checked) .combo-item-mark {
  background: var(--ink);
  border-color: var(--ink);
}

.combo-item:has(input:checked) .combo-item-mark::after { opacity: 1; }

/* Fokus tipkovnicom mora se vidjeti na kartici, ne na skrivenoj potvrdi. */
.combo-item:focus-within {
  outline: 2px solid var(--gold-deep);
  outline-offset: 3px;
}

/* Brojač odabranog - pojavljuje se tek kad JS ima što prijaviti. */
.combo-count {
  margin: 18px 0 0;
  padding: 12px 18px;
  border-radius: var(--radius);
  background: var(--beige);
  border: 1px solid var(--grey-line);
  font-size: 0.93rem;
  font-weight: 600;
  color: var(--ink);
}

.combo-count[hidden] { display: none; }

/* Prazno stanje drži istu visinu, ali se ne nameće - okvir ostaje, boja i
   debljina se povlače dok odabira nema. */
.combo-count.is-empty {
  background: transparent;
  color: var(--grey);
  font-weight: 400;
}

@media (max-width: 640px) {
  .combo-items { grid-template-columns: 1fr; }
  .combo-group { padding-left: 14px; }
}

/* Akcent kategorije na lijevom rubu skupine - vrijednost dolazi iz baze,
   pa moraju biti pokrivena sva imena iz accents(). */
.combo-group.accent-mint     { border-left-color: var(--mint); }
.combo-group.accent-blue     { border-left-color: var(--blue); }
.combo-group.accent-peach    { border-left-color: var(--peach); }
.combo-group.accent-pink     { border-left-color: var(--pink); }
.combo-group.accent-lavender { border-left-color: var(--lavender); }
.combo-group.accent-sage     { border-left-color: var(--sage); }
.combo-group.accent-lemon    { border-left-color: var(--lemon); }
.combo-group.accent-coral    { border-left-color: var(--coral); }
.combo-group.accent-gold     { border-left-color: var(--gold); }
.combo-group.accent-beige    { border-left-color: var(--beige); }

/* Odabrano stanje ide i preko klase koju postavlja JS: :has() pokriva rad bez
   JS-a, klasa pokriva preglednike bez :has() podrške. */
.combo-item.is-picked {
  border-color: var(--ink);
  box-shadow: var(--shadow-soft);
}

.combo-item.is-picked .combo-item-mark {
  background: var(--ink);
  border-color: var(--ink);
}

.combo-item.is-picked .combo-item-mark::after { opacity: 1; }

/* ------------------- Poziv na vlastitu kombinaciju ------------------- */
/* Namjerno NE sliči završnoj CTA traci: ta je centrirana, s pastelnim
   prijelazom, sjenom i tri kanala. Ova je lijevo poravnata, plošna, na
   toploj podlozi i s jednim odredištem - čita se kao dio stranice, a ne
   kao drugi poziv na akciju. */
.combo-invite {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0 0 44px;
  padding: 22px 26px;
  border-radius: var(--radius);
  background: var(--paper-warm);
  border: 1px solid var(--grey-line);
}

.combo-invite-mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--beige);
  color: var(--gold-deep);
}

.combo-invite-mark .icon { width: 22px; height: 22px; }

.combo-invite-body { flex: 1; min-width: 0; }

.combo-invite-body h2 {
  font-size: 1.3rem;
  margin: 0 0 4px;
}

.combo-invite-body p {
  margin: 0;
  font-size: 0.93rem;
  color: var(--ink-soft);
}

.combo-invite-actions {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Na paketima poziv dolazi nakon mreže kartica, pa mu treba zrak iznad. */
.package-grid + .combo-invite,
.premium-card + .combo-invite { margin-top: 44px; }

@media (max-width: 880px) {
  .combo-invite {
    flex-wrap: wrap;
    gap: 16px;
  }
  .combo-invite-body { flex: 1 1 100%; order: 2; }
  .combo-invite-mark { order: 1; }
  .combo-invite-actions { order: 3; flex: 1 1 100%; }
}

@media (max-width: 480px) {
  .combo-invite { padding: 20px; }
  .combo-invite-actions .btn { flex: 1 1 auto; }
}

/* Dopuna uz uvodni odlomak stranice: nosi uvjet ili ogradu (npr. kako se
   dolazi do cijene), pa je tisa i manja od samog uvoda.
   .page-lead nema donju marginu, pa razmak mora doci odavde: negativna
   margina koja je ovdje stajala do 23. 8. 2026. lijepila je napomenu uz
   zadnji redak uvoda, sto se vidjelo i na /oprema i na /slozi-kombinaciju. */
.page-lead-note {
  font-size: 0.95rem;
  color: var(--grey);
  margin-top: 12px;
}

/* Istaknuta napomena na pravnoj stranici - upucuje na sluzbeni dokument
   kada on postoji, pa mora presjeci prije duguljastog teksta ispod. */
.legal-notice {
  margin: 0 0 32px;
  padding: 20px 24px;
  border-radius: var(--radius);
  background: var(--beige);
  border: 1px solid #e3d9bb;
}

.legal-notice p { margin: 0; }
.legal-notice p + p { margin-top: 14px; }

/* --- Tiha pomoc uz obrazac ------------------------------------------
   Nije CTA traka: stoji odmah ispod obrasca, u istoj sirini, i nudi
   jedno odrediste onome tko je zapeo na odabiru. */
.form-help {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 24px;
  padding: 18px 22px;
  border-radius: var(--radius);
  background: var(--paper-warm);
  border: 1px solid var(--grey-line);
}

.form-help p {
  margin: 0;
  font-size: 0.93rem;
  color: var(--ink-soft);
}

@media (max-width: 480px) {
  .form-help { flex-direction: column; align-items: stretch; }
  .form-help .btn { width: 100%; justify-content: center; }
}

/* --- Dodatak na upit umjesto kategorije s karticama ------------------
   Baloni i personalizacija stoje u katalogu kao dodatak, a ne kao
   zasebna ponuda s vlastitim paketima. Blok zato nosi tinu akcenta
   kategorije umjesto sive kartice: dovoljno da se vidi u nizu opreme,
   dovoljno tiho da se ne cita kao jos jedna kategorija proizvoda. */
.addon-invite {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0 0 44px;
  padding: 28px 30px;
  border-radius: var(--radius);
  background: var(--paper-warm);
  border: 1px solid var(--grey-line);
  /* Akcent kategorije nosi lijevi rub, isto kao zaglavlja kategorija
     u katalogu iznad - blok time ostaje dio istog niza. */
  border-left: 4px solid var(--grey-soft);
}

.addon-invite.accent-mint { border-left-color: var(--mint); }
.addon-invite.accent-blue { border-left-color: var(--blue); }
.addon-invite.accent-peach { border-left-color: var(--peach); }
.addon-invite.accent-pink { border-left-color: var(--pink); }
.addon-invite.accent-gold { border-left-color: var(--gold); }
.addon-invite.accent-lemon { border-left-color: var(--lemon); }

.addon-invite-body { flex: 1; min-width: 0; }

.addon-invite-body h2 {
  font-size: 1.4rem;
  margin: 0 0 6px;
}

.addon-invite-body p {
  margin: 0;
  color: var(--ink-soft);
}

.addon-invite-note {
  margin-top: 8px !important;
  font-size: 0.9rem;
  color: var(--grey);
}

.addon-invite-actions { flex: none; }

@media (max-width: 880px) {
  .addon-invite {
    flex-wrap: wrap;
    gap: 18px;
    padding: 24px;
  }
  .addon-invite-actions { flex: 1 1 100%; }
}

@media (max-width: 480px) {
  .addon-invite-actions .btn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   PRAVNE STRANICE (/privatnost, /uvjeti, /kolacici)
   Duge, gusto pisane stranice - mjera retka i razmaci vode čitanje.
   ========================================================================== */

.legal-page h2 {
  font-size: 1.5rem;
  margin: 46px 0 14px;
  padding-top: 22px;
  border-top: 1px solid var(--grey-line);
}

.legal-page h3 {
  font-size: 1.2rem;
  margin: 28px 0 10px;
}

.legal-updated {
  font-size: 0.88rem;
  color: var(--grey);
  margin: -8px 0 26px;
}

.legal-list {
  list-style: none;
  display: grid;
  gap: 10px;
  margin: 0 0 18px;
  padding: 0;
}

.legal-list li {
  position: relative;
  padding-left: 22px;
}

/* Točka popisa u mjedi - ista oznaka kao kružić uz nadnaslov. */
.legal-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.72em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
}

.legal-list strong { color: var(--ink); }

/* Numerirane odredbe (Opći uvjeti). Broj je dio dokumenta, ne ukras: na
   njega se poziva u komunikaciji s klijentom, pa ide u boji teksta, a ne
   u mjedi - mjed na papiru daje 3.3:1 i pala bi na WCAG AA. */
.legal-numbered {
  list-style: none;
  counter-reset: legal-clause;
  display: grid;
  gap: 14px;
  margin: 0 0 18px;
  padding: 0;
}

.legal-numbered li {
  position: relative;
  padding-left: 36px;
  counter-increment: legal-clause;
}

/* Cormorant po zadanom daje minuskulne brojke, koje na "10." padaju ispod
   crte i cine broj slabijim od teksta. Broj odredbe nije ukras, pa ide u
   verzalne brojke fiksne sirine, a line-height se nasljeduje da prva
   crta broja sjedne na prvu crtu odredbe. */
.legal-numbered li::before {
  content: counter(legal-clause) ".";
  position: absolute;
  left: 0;
  top: 0;
  min-width: 26px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-variant-numeric: lining-nums tabular-nums;
  font-weight: 600;
  line-height: inherit;
  color: var(--ink);
}

/* Podaci o obrtu - parovi oznaka/vrijednost na toploj podlozi. */
.legal-identity {
  display: grid;
  grid-template-columns: minmax(140px, auto) 1fr;
  gap: 8px 20px;
  margin: 0 0 22px;
  padding: 22px 26px;
  border-radius: var(--radius);
  background: var(--paper-warm);
  border: 1px solid var(--grey-line);
}

.legal-identity dt {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
  padding-top: 2px;
}

.legal-identity dd {
  margin: 0;
  color: var(--ink);
}

.legal-address {
  padding: 18px 22px;
  border-radius: var(--radius);
  background: var(--paper-warm);
  border: 1px solid var(--grey-line);
}

.legal-table-wrap {
  overflow-x: auto;
  margin: 0 0 20px;
}

.legal-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 0.93rem;
}

.legal-table th,
.legal-table td {
  text-align: left;
  vertical-align: top;
  padding: 12px 14px;
  border-bottom: 1px solid var(--grey-line);
}

.legal-table th {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey);
  border-bottom-color: var(--grey-soft);
}

.legal-table code {
  font-size: 0.88rem;
  color: var(--gold-deep);
  word-break: break-all;
}

.legal-nav {
  margin-top: 52px;
  padding: 24px 26px;
  border-radius: var(--radius);
  background: var(--paper-warm);
  border: 1px solid var(--grey-line);
}

.legal-nav h2 {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-family: var(--font-body);
  color: var(--grey);
  margin: 0 0 12px;
  padding: 0;
  border: 0;
}

.legal-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin: 0;
  padding: 0;
}

.legal-nav a { font-weight: 600; }

/* Gumb koji izgleda kao poveznica - otvara postavke kolačića iz podnožja. */
.footer-link-btn {
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Podaci o obrtu stoje ispod zadnjeg reda footera, u punoj širini. */
.footer-legal {
  margin: 8px 0 0;
  padding-bottom: 26px;
  font-size: 0.82rem;
  color: var(--grey);
}

@media (max-width: 560px) {
  .legal-identity { grid-template-columns: 1fr; gap: 2px 0; }
  .legal-identity dt { padding-top: 12px; }
  .legal-identity dd { padding-bottom: 6px; }
}

/* ==========================================================================
   TRAKA ZA PRIVOLU O KOLAČIĆIMA
   Sjedi nad sadržajem jer traži odluku; ton je isti kao ostatak stranice -
   papir, mjed i oblici iz sustava, bez upozoravajućih boja.
   ========================================================================== */

.cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 70;
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 26px;
  border-radius: var(--radius-lg);
  background: rgba(253, 253, 250, 0.97);
  backdrop-filter: blur(10px);
  border: 1px solid var(--grey-line);
  box-shadow: var(--shadow-lift);
}

.cookie-banner[hidden] { display: none; }

.cookie-copy h2 {
  font-size: 1.25rem;
  margin: 0 0 6px;
}

.cookie-copy p {
  margin: 0;
  font-size: 0.93rem;
}

.cookie-details {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.cookie-details[hidden] { display: none; }

.cookie-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--paper-warm);
  border: 1px solid var(--grey-line);
  cursor: pointer;
}

.cookie-option.is-locked { cursor: default; }

.cookie-option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.cookie-option strong {
  display: block;
  font-size: 0.93rem;
  color: var(--ink);
}

.cookie-option p {
  margin: 2px 0 0;
  font-size: 0.88rem;
  color: var(--grey);
}

/* Prekidač: pilula s kružićem koji klizne udesno kad je uključen. */
.cookie-toggle {
  flex: none;
  position: relative;
  width: 38px;
  height: 22px;
  margin-top: 2px;
  border-radius: 999px;
  background: var(--grey-soft);
  transition: background-color 0.2s ease;
}

.cookie-toggle::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(63, 64, 58, 0.25);
  transition: transform 0.2s ease;
}

.cookie-option input:checked ~ .cookie-toggle,
.cookie-toggle.is-locked { background: var(--gold-deep); }

.cookie-option input:checked ~ .cookie-toggle::after,
.cookie-toggle.is-locked::after { transform: translateX(16px); }

.cookie-option input:focus-visible ~ .cookie-toggle {
  outline: 2px solid var(--gold-deep);
  outline-offset: 3px;
}

.cookie-always {
  margin-left: auto;
  align-self: center;
  flex: none;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grey);
}

.cookie-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

/* .btn nosi vlastiti display, pa [hidden] mora pobijediti eksplicitno. */
.cookie-actions .btn[hidden] { display: none; }

.cookie-actions [data-consent-settings] { margin-right: auto; }

/* Iznad mobilne CTA trake, da se ne preklapaju. */
@media (max-width: 720px) {
  .cookie-banner { bottom: 84px; }
  .cookie-actions { justify-content: stretch; }
  .cookie-actions .btn { flex: 1 1 auto; }
  .cookie-actions [data-consent-settings] { margin-right: 0; flex-basis: 100%; }
}