/* ==========================================================================
   Frizerski salon Look — design system
   Boje su uzete iz samog salona: ivory s osvijetljenog natpisa nad ulazom,
   siva žbuka zidova, maslinasta s jastuka i palmi, hrast namještaja.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- boje ---- */
  --ivory:      #EFEAE0;   /* podloga — boja natpisa nad ulazom */
  --ivory-hi:   #F7F4ED;   /* podignuta ploha */
  --stone:      #DDD8CF;   /* žbuka na zidovima salona */
  --stone-d:    #C6C0B4;   /* obrub */
  --hairline:   rgba(35, 32, 28, 0.14);
  --ink:        #23201C;   /* slova na natpisu */
  --ink-2:      #57514A;   /* sporedni tekst */
  --ink-3:      #6B6459;   /* najtiši tekst — još uvijek 4.9:1 na ivory */
  --olive:      #4A5741;   /* jastuci i palme */
  --olive-d:    #3A4633;
  --olive-lt:   #93A382;
  --oak:        #BE9767;   /* hrast namještaja */
  --ember:      #C2562A;   /* slika na zidu — koristi se rijetko */

  /* ---- tipografija ---- */
  /* Newsreader dolazi samo u rezu 300 (+ kurziv) — sve serifne razine
     koriste tu jednu debljinu, hijerarhiju nosi veličina. */
  --serif: Newsreader, Georgia, "Times New Roman", serif;
  --sans:  Archivo, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --script: Yellowtail, "Brush Script MT", cursive;

  --t--1: 0.875rem;
  --t-0:  1.0625rem;
  --t-1:  1.1875rem;
  --t-2:  1.4375rem;
  --t-3:  clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
  --t-4:  clamp(1.9rem, 1.4rem + 2.4vw, 2.9rem);
  --t-5:  clamp(2.4rem, 1.5rem + 4.2vw, 4.4rem);

  /* ---- razmaci ---- */
  --s-1: 0.25rem; --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;
  --s-9: 6rem;    --s-10: 8rem;

  --wrap: 74rem;
  --measure: 34rem;
  --radius: 2px;
}

/* ==========================================================================
   Osnove
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-0);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; text-wrap: balance; }
p, ul, ol, dl, figure, table { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--olive); }

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

::selection { background: var(--olive); color: var(--ivory); }

.skip {
  position: absolute; left: var(--s-4); top: -100px; z-index: 100;
  background: var(--ink); color: var(--ivory);
  padding: var(--s-3) var(--s-5); text-decoration: none; font-weight: 600;
  transition: top 0.15s ease;
}
.skip:focus { top: var(--s-4); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ==========================================================================
   Raspored
   ========================================================================== */

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--s-5); }
@media (min-width: 40em) { .wrap { padding-inline: var(--s-6); } }

.section { padding-block: var(--s-8); }
@media (min-width: 48em) { .section { padding-block: var(--s-9); } }
.section--tight { padding-block: var(--s-7); }
.section--stone { background: var(--stone); }
.section--hi { background: var(--ivory-hi); }
.section + .section:not(.section--stone):not(.section--hi) { border-top: 1px solid var(--hairline); }

.stack { display: flex; flex-direction: column; }
.stack > * + * { margin-top: var(--gap, var(--s-4)); }

/* ==========================================================================
   Tipografski elementi
   ========================================================================== */

.eyebrow {
  font-size: var(--t--1);
  letter-spacing: 0.17em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--olive);
  margin-bottom: var(--s-4);
}

.display {
  font-family: var(--serif);
  font-weight: 300;
  font-size: var(--t-5);
  line-height: 1.03;
  letter-spacing: -0.021em;
}
.display em { font-style: italic; font-weight: 300; }

.h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: var(--t-4);
  line-height: 1.13;
  letter-spacing: -0.015em;
}
.h3 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: var(--t-2);
  line-height: 1.25;
}
.lede {
  font-size: var(--t-1);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: var(--measure);
}
.prose { max-width: var(--measure); color: var(--ink-2); }
.prose > * + * { margin-top: var(--s-4); }
.prose strong { color: var(--ink); font-weight: 600; }

.wordmark {
  font-family: var(--script);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.01em;
}

/* ==========================================================================
   Gumbi
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 48px;
  padding: 0.8em 1.7em;
  font: inherit; font-size: var(--t--1); font-weight: 600; letter-spacing: 0.035em;
  border: 1px solid transparent; border-radius: var(--radius);
  text-decoration: none; cursor: pointer;
  transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.btn--primary { background: var(--olive); color: var(--ivory); }
.btn--primary:hover { background: var(--olive-d); }
.btn--ghost { border-color: currentColor; color: inherit; }
.btn--ghost:hover { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.btn--light { background: var(--ivory); color: var(--ink); }
.btn--light:hover { background: #fff; }
.btn--outline-light { border-color: rgba(239, 234, 224, 0.55); color: var(--ivory); }
.btn--outline-light:hover { background: rgba(239, 234, 224, 0.14); border-color: var(--ivory); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }

.link-arrow {
  display: inline-flex; align-items: baseline; gap: 0.5em;
  font-size: var(--t--1); font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--olive); text-decoration: none;
  border-bottom: 1px solid var(--olive); padding-bottom: 2px;
}
.link-arrow::after { content: "\2192"; transition: transform 0.16s ease; }
.link-arrow:hover::after { transform: translateX(3px); }

/* ==========================================================================
   Zaglavlje i navigacija
   ========================================================================== */

.header { position: relative; z-index: 20; }
.header__inner {
  display: flex; align-items: center; gap: var(--s-5);
  padding-block: var(--s-4);
}
.header__mark { font-size: 1.75rem; text-decoration: none; flex: none; }
.header__nav { display: none; }
.header__right { display: flex; align-items: center; gap: var(--s-3); margin-left: auto; }

.navlist { display: flex; gap: var(--s-6); }
.navlist a {
  font-size: var(--t--1); font-weight: 500; letter-spacing: 0.055em;
  text-transform: uppercase; text-decoration: none; padding-block: var(--s-2);
}
.navlist a { position: relative; }
.navlist a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
}
.navlist a:hover::after, .navlist a[aria-current="page"]::after { transform: scaleX(1); }

.lang {
  font-size: var(--t--1); font-weight: 600; letter-spacing: 0.05em;
  text-decoration: none; padding: var(--s-2) var(--s-3);
  border: 1px solid var(--hairline); border-radius: var(--radius);
}

.burger {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 44px; padding: var(--s-2) var(--s-3);
  background: none; border: 1px solid currentColor; border-radius: var(--radius);
  font: inherit; font-size: var(--t--1); font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: inherit; cursor: pointer;
}
.burger__bars { display: block; width: 18px; height: 9px; position: relative; }
.burger__bars::before, .burger__bars::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor;
}
.burger__bars::before { top: 0; }
.burger__bars::after { bottom: 0; }

@media (min-width: 60em) {
  .header__nav { display: block; }
  .burger { display: none; }
}

/* mobilni izbornik */
.mobilenav {
  position: fixed; inset: 0; z-index: 60;
  background: var(--ink); color: var(--ivory);
  display: flex; flex-direction: column;
  padding: var(--s-5);
  overflow-y: auto;
}
.mobilenav[hidden] { display: none; }
.mobilenav__top { display: flex; align-items: center; justify-content: space-between; }
.mobilenav__close {
  min-height: 44px; min-width: 44px;
  background: none; border: 1px solid rgba(239,234,224,.4); border-radius: var(--radius);
  color: inherit; font: inherit; font-size: 1.25rem; cursor: pointer;
}
.mobilenav__list { margin-top: var(--s-7); display: flex; flex-direction: column; gap: var(--s-2); }
.mobilenav__list a {
  font-family: var(--serif); font-weight: 300; font-size: 1.9rem;
  text-decoration: none; padding-block: var(--s-3);
  border-bottom: 1px solid rgba(239,234,224,.16);
}
.mobilenav__foot { margin-top: auto; padding-top: var(--s-6); display: flex; flex-direction: column; gap: var(--s-3); }

/* ==========================================================================
   Hero (prijedlog A — fotografija preko cijelog ekrana)
   ========================================================================== */

.hero { position: relative; background: var(--ink); color: var(--ivory); }
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
/* ::after dolazi nakon slike u redoslijedu iscrtavanja, pa je zatamnjuje
   bez negativnog z-indexa — negativan bi pao ispod pozadine .hero */
.hero::after {
  content: ""; position: absolute; inset: 0;
  /* Dva sloja: vodoravni tamni klin s lijeve strane, gdje stoji tekst, i
     blagi okomiti prijelaz za zaglavlje i donju traku. Desna strana ostaje
     svijetla da se salon i dalje jasno vidi. */
  background:
    linear-gradient(97deg,
      rgba(18, 16, 13, 0.90) 0%,
      rgba(18, 16, 13, 0.78) 30%,
      rgba(18, 16, 13, 0.34) 58%,
      rgba(18, 16, 13, 0.12) 100%),
    linear-gradient(180deg,
      rgba(18, 16, 13, 0.55) 0%,
      rgba(18, 16, 13, 0.10) 26%,
      rgba(18, 16, 13, 0.26) 68%,
      rgba(18, 16, 13, 0.80) 100%);
}
/* Na uskim ekranima tekst ide preko cijele širine, pa i zatamnjenje mora. */
@media (max-width: 47.999em) {
  .hero::after {
    background: linear-gradient(180deg,
      rgba(18, 16, 13, 0.72) 0%,
      rgba(18, 16, 13, 0.62) 42%,
      rgba(18, 16, 13, 0.74) 72%,
      rgba(18, 16, 13, 0.90) 100%);
  }
}
.hero > .header, .hero > .wrap { position: relative; z-index: 1; }
.hero .header__inner { border-bottom: 1px solid rgba(239, 234, 224, 0.22); }
.hero .lang { border-color: rgba(239, 234, 224, 0.4); }
.hero .eyebrow { color: #DDD4C3; }

.hero__body { padding-block: var(--s-9) var(--s-7); max-width: 40rem; }
@media (min-width: 48em) { .hero__body { padding-block: var(--s-10) var(--s-8); } }
.hero__lede { color: #E4DDCF; font-size: var(--t-1); max-width: 30rem; margin-block: var(--s-5) var(--s-6); }

.hero__bar {
  border-top: 1px solid rgba(239, 234, 224, 0.22);
  padding-block: var(--s-4);
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6);
  font-size: var(--t--1); color: #E4DDCF; letter-spacing: 0.03em;
}
.hero__bar b { font-weight: 600; color: var(--ivory); }

/* zaglavlje na unutarnjim stranicama */
.pagehead { padding-block: var(--s-7) var(--s-6); border-bottom: 1px solid var(--hairline); }
@media (min-width: 48em) { .pagehead { padding-block: var(--s-8) var(--s-7); } }

/* ==========================================================================
   Sadržajni blokovi
   ========================================================================== */

.split { display: grid; gap: var(--s-6); }
@media (min-width: 52em) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); align-items: center; }
  .split--wide-left { grid-template-columns: 1.25fr 1fr; }
  .split--wide-right { grid-template-columns: 1fr 1.25fr; }
  .split--top { align-items: start; }
}
.split__media img { width: 100%; }

.facts { display: flex; flex-direction: column; gap: 0; margin-top: var(--s-6); }
.facts li {
  padding-block: var(--s-3);
  border-top: 1px solid var(--hairline);
  font-size: var(--t--1); letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600;
  color: var(--ink-2);
}
.facts li:last-child { border-bottom: 1px solid var(--hairline); }

/* pregled usluga — namjerno lista s tankim crtama, ne kartice */
.pricelist-preview { margin-top: var(--s-6); border-top: 1px solid var(--hairline); }
.pricelist-preview li {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4);
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--hairline);
}
.pricelist-preview .name { font-size: var(--t-1); }
.pricelist-preview .price {
  font-variant-numeric: tabular-nums; white-space: nowrap;
  font-size: var(--t-1); font-weight: 600;
}
.pricelist-preview .price small {
  font-size: var(--t--1); font-weight: 500; color: var(--ink-3); margin-right: 0.3em;
  text-transform: lowercase; letter-spacing: 0.03em;
}

/* ==========================================================================
   Cjenik
   ========================================================================== */

/* table-layout: fixed drži stupce na istom mjestu u sve četiri tablice —
   inače svaka razvuče stupce po svom sadržaju i cijene se ne poravnaju. */
.pricetable { width: 100%; border-collapse: collapse; margin-top: var(--s-5); table-layout: fixed; }
.pricetable th:first-child, .pricetable td:first-child { width: 40%; }
.pricetable caption {
  text-align: left; font-family: var(--serif); font-size: var(--t-2); font-weight: 300;
  padding-bottom: var(--s-3);
}
.pricetable th, .pricetable td { text-align: right; padding: var(--s-3) var(--s-2); }
.pricetable th:first-child, .pricetable td:first-child { text-align: left; padding-left: 0; }
.pricetable td:last-child, .pricetable th:last-child { padding-right: 0; }
.pricetable thead th {
  font-size: var(--t--1); font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-3); border-bottom: 1px solid var(--ink); padding-bottom: var(--s-3);
  vertical-align: bottom;
}
.pricetable tbody tr { border-bottom: 1px solid var(--hairline); }
.pricetable tbody td { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pricetable tbody th {
  font-weight: 400; text-align: left; padding-left: 0;
  white-space: normal; min-width: 12rem;
}
.pricetable .na { color: var(--stone-d); }
.pricetable .flat { color: var(--ink-3); font-style: italic; font-size: var(--t--1); white-space: normal; }

@media (max-width: 47.999em) {
  .pricetable, .pricetable tbody, .pricetable tr, .pricetable td, .pricetable th { display: block; }
  .pricetable thead { display: none; }
  .pricetable tbody tr { padding-block: var(--s-4); }
  .pricetable tbody th { padding: 0 0 var(--s-2); font-size: var(--t-1); }
  .pricetable tbody td {
    display: flex; justify-content: space-between; gap: var(--s-4);
    padding: var(--s-1) 0; text-align: right;
  }
  .pricetable tbody td::before {
    content: attr(data-label);
    font-size: var(--t--1); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--ink-3); text-align: left;
  }
  .pricetable tbody td.flat::before { content: none; }
  .pricetable tbody td.flat { justify-content: flex-start; }
  /* Ista cijena za sve duljine: prikaži je jednom umjesto četiri puta. */
  .pricetable tbody tr.uniform td:not(:first-of-type) { display: none; }
  .pricetable tbody tr.uniform td:first-of-type::before { content: attr(data-uniform-label); }
}

.lengthkey { display: grid; gap: var(--s-3); margin-top: var(--s-5); }
@media (min-width: 40em) { .lengthkey { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .lengthkey { grid-template-columns: repeat(4, 1fr); } }
.lengthkey div { border-top: 2px solid var(--olive); padding-top: var(--s-3); }
.lengthkey dt { font-weight: 600; font-size: var(--t--1); letter-spacing: 0.07em; text-transform: uppercase; }
.lengthkey dd { margin: var(--s-1) 0 0; color: var(--ink-2); font-size: var(--t--1); }

.notes { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--hairline); }
.notes li { padding-block: var(--s-2); color: var(--ink-2); font-size: var(--t--1); max-width: 46rem; }
.notes li::before { content: "—"; color: var(--olive); margin-right: 0.6em; }

/* ==========================================================================
   Galerija
   ========================================================================== */

.gallery { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, 1fr); margin-top: var(--s-6); }
@media (min-width: 48em) { .gallery { grid-template-columns: repeat(3, 1fr); gap: var(--s-4); } }
.gallery figure { margin: 0; }
.gallery button {
  display: block; width: 100%; padding: 0; border: 0; background: var(--stone);
  cursor: zoom-in; overflow: hidden;
}
.gallery img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform 0.4s ease; }
.gallery button:hover img { transform: scale(1.03); }
.gallery [hidden] { display: none; }

.filters { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); }
.filters button {
  min-height: 44px; padding: var(--s-2) var(--s-4);
  background: none; border: 1px solid var(--stone-d); border-radius: var(--radius);
  font: inherit; font-size: var(--t--1); font-weight: 600; letter-spacing: 0.04em;
  color: var(--ink-2); cursor: pointer;
}
.filters button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--ivory); }

.lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100dvh; }
.lightbox::backdrop { background: rgba(20, 18, 15, 0.92); }
.lightbox__inner { display: grid; place-items: center; gap: var(--s-4); padding: var(--s-4); }
.lightbox img { max-height: 78dvh; width: auto; object-fit: contain; }
.lightbox figcaption { color: var(--ivory); font-size: var(--t--1); max-width: 46rem; text-align: center; }
.lightbox__close {
  position: fixed; top: var(--s-4); right: var(--s-4);
  min-width: 44px; min-height: 44px;
  background: rgba(239,234,224,.12); border: 1px solid rgba(239,234,224,.5); border-radius: var(--radius);
  color: var(--ivory); font: inherit; font-size: 1.3rem; cursor: pointer;
}

/* ==========================================================================
   Tretmani i certifikati
   ========================================================================== */

.treatment { padding-block: var(--s-8); }
.treatment + .treatment { border-top: 1px solid var(--hairline); }
.badge {
  display: inline-block; padding: var(--s-2) var(--s-3);
  background: var(--olive); color: var(--ivory);
  font-size: var(--t--1); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  border-radius: var(--radius);
}
.callout {
  margin-top: var(--s-5); padding: var(--s-5);
  background: var(--ivory-hi); border-left: 3px solid var(--olive);
  max-width: 42rem;
}
.callout p { color: var(--ink-2); }
.certs { display: grid; gap: var(--s-4); grid-template-columns: 1fr; margin-top: var(--s-5); }
@media (min-width: 40em) { .certs { grid-template-columns: repeat(2, 1fr); } }
.certs figure { margin: 0; }
.certs figcaption { margin-top: var(--s-3); font-size: var(--t--1); color: var(--ink-3); }
.brandlist { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); }
.brandlist li {
  padding: var(--s-2) var(--s-4); border: 1px solid var(--stone-d);
  font-size: var(--t--1); letter-spacing: 0.03em; color: var(--ink-2);
}

/* ==========================================================================
   Radno vrijeme i kontakt
   ========================================================================== */

.hours { width: 100%; border-collapse: collapse; margin-top: var(--s-4); max-width: 26rem; }
.hours th, .hours td { padding: var(--s-3) 0; border-bottom: 1px solid var(--hairline); font-weight: 400; }
.hours th { text-align: left; }
.hours td { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hours tr[data-today] th, .hours tr[data-today] td { font-weight: 600; }
.hours .closed { color: var(--ink-3); }

.contactcard { border-top: 1px solid var(--hairline); padding-top: var(--s-5); }
.contactcard + .contactcard { margin-top: var(--s-6); }
.contactcard dt {
  font-size: var(--t--1); font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-3);
}
.contactcard dd { margin: var(--s-2) 0 0; }
.bigphone {
  font-family: var(--serif); font-weight: 300; font-size: var(--t-4);
  text-decoration: none; letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
}
.bigphone:hover { color: var(--olive); }

/* poziv na akciju pred podnožjem */
.cta { background: var(--ink); color: var(--ivory); }
.cta .h2 { color: var(--ivory); }
.cta p { color: #DDD4C3; }

/* ==========================================================================
   Podnožje
   ========================================================================== */

.footer { background: var(--ink); color: var(--ivory); padding-block: var(--s-8) var(--s-6); }
.footer a { color: inherit; }
.footer__grid { display: grid; gap: var(--s-6); }
@media (min-width: 44em) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 64em) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.1fr; gap: var(--s-7); } }
.footer h2 {
  font-size: var(--t--1); font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--olive-lt); margin-bottom: var(--s-4);
}
.footer__mark { font-size: 2.2rem; text-decoration: none; display: inline-block; }
.footer__tagline { color: #C9C1B2; margin-top: var(--s-3); max-width: 24rem; font-size: var(--t--1); }
.footer ul { display: flex; flex-direction: column; gap: var(--s-3); }
.footer li, .footer p { font-size: var(--t--1); }
.footer dl { display: grid; grid-template-columns: auto 1fr; gap: var(--s-2) var(--s-4); font-size: var(--t--1); }
.footer dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.footer__bottom {
  margin-top: var(--s-8); padding-top: var(--s-5);
  border-top: 1px solid rgba(239, 234, 224, 0.18);
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); justify-content: space-between;
  font-size: 0.8125rem; color: #A79F91;
}

/* ==========================================================================
   Mobilna traka za poziv — glavni put do termina na telefonu
   ========================================================================== */

.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--hairline);
  border-top: 1px solid var(--hairline);
  padding-bottom: env(safe-area-inset-bottom);
}
.callbar a {
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 56px; text-decoration: none;
  font-size: var(--t--1); font-weight: 600; letter-spacing: 0.04em;
  background: var(--ivory-hi); color: var(--ink);
}
.callbar a:first-child { background: var(--olive); color: var(--ivory); }
@media (min-width: 60em) { .callbar { display: none; } }
@media (max-width: 59.999em) { body { padding-bottom: 56px; } }

/* ==========================================================================
   404
   ========================================================================== */

.notfound { padding-block: var(--s-9) var(--s-10); }
.notfound ul { margin-top: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); }

/* ==========================================================================
   Pomoćne klase
   Namjerno ih je malo. Postoje da HTML ne mora nositi inline stilove — tako
   Content-Security-Policy može ostati strog, bez 'unsafe-inline'.
   ========================================================================== */

.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }
.mb-0 { margin-bottom: 0; }
.small { font-size: var(--t--1); }
.muted { color: var(--ink-3); }
.measure-wide { max-width: 46rem; }
.stack--lg { --gap: var(--s-7); }
.stack--xl { --gap: var(--s-8); }
.wordmark--md { font-size: 2rem; }

/* ==========================================================================
   Poveznice na društvene mreže
   Ikona je ugrađeni SVG, ne slika s Metinih servera — stranica i dalje ne
   šalje nijedan zahtjev izvan vlastite domene.
   ========================================================================== */

.icon { width: 1.1em; height: 1.1em; flex: none; }

.link-arrow .icon { align-self: center; }
.btn .icon { margin-right: -0.15em; }

.footer__social {
  display: inline-flex; align-items: center; gap: 0.5em;
  text-decoration: none;
}
.footer__social:hover { text-decoration: underline; }

/* cijena po mililitru na stranici Tretmani */
.pricelines { display: grid; grid-template-columns: 1fr auto; gap: var(--s-2) var(--s-5); }
.pricelines dt { color: var(--ink-2); }
.pricelines dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }

/* poklon bon — tekst desno poravnat s vrhom naslova */
@media (min-width: 52em) { .gift__body { padding-top: 0.45rem; } }


/* ==========================================================================
   Pokret
   Sve što se miče živi ovdje, iza upita prefers-reduced-motion: tko je u
   sustavu isključio animacije, dobiva stranicu potpuno mirnu. Trajanja su
   kratka, krivulje mekane; ništa ne skače i ništa ne čeka korisnika.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  :root { --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); }

  @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  @keyframes settle { from { transform: scale(1.045); } to { transform: scale(1); } }
  @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes pop { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }

  /* ---- ulaz naslovnice: fotografija se smiri, tekst ulazi redom ---- */
  .hero__media img { animation: settle 1.8s var(--ease-out) both; }
  .hero__body > * { animation: rise 0.7s var(--ease-out) both; }
  .hero__body > :nth-child(1) { animation-delay: 0.10s; }
  .hero__body > :nth-child(2) { animation-delay: 0.20s; }
  .hero__body > :nth-child(3) { animation-delay: 0.32s; }
  .hero__body > :nth-child(4) { animation-delay: 0.44s; }
  .hero__bar { animation: rise 0.7s 0.55s var(--ease-out) both; }

  /* ---- unutarnje stranice: zaglavlje ---- */
  .pagehead > * { animation: rise 0.6s var(--ease-out) both; }
  .pagehead > :nth-child(2) { animation-delay: 0.08s; }
  .pagehead > :nth-child(3) { animation-delay: 0.16s; }
  .pagehead > :nth-child(4) { animation-delay: 0.24s; }

  /* ---- sekcije se otkriju kad dođu u kadar (samo uz JavaScript) ---- */
  .js .reveal { opacity: 0; transform: translateY(16px);
                transition: opacity 0.7s ease, transform 0.7s var(--ease-out); }
  .js .reveal.is-visible { opacity: 1; transform: none; }

  /* ---- slike se pojave mekano kad se učitaju ---- */
  img.fade { transition: opacity 0.6s ease; }
  .js img.fade:not(.is-loaded) { opacity: 0; }

  /* ---- mobilni izbornik ---- */
  .mobilenav { opacity: 0; transition: opacity 0.25s ease; }
  .mobilenav.is-open { opacity: 1; }
  .mobilenav__list li { opacity: 0; transform: translateY(10px);
                        transition: opacity 0.4s ease, transform 0.4s var(--ease-out); }
  .mobilenav.is-open .mobilenav__list li { opacity: 1; transform: none; }
  .mobilenav.is-open .mobilenav__list li:nth-child(1) { transition-delay: 0.05s; }
  .mobilenav.is-open .mobilenav__list li:nth-child(2) { transition-delay: 0.10s; }
  .mobilenav.is-open .mobilenav__list li:nth-child(3) { transition-delay: 0.15s; }
  .mobilenav.is-open .mobilenav__list li:nth-child(4) { transition-delay: 0.20s; }
  .mobilenav.is-open .mobilenav__list li:nth-child(5) { transition-delay: 0.25s; }

  /* ---- lightbox ---- */
  .lightbox[open] { animation: fade 0.25s ease both; }
  .lightbox[open]::backdrop { animation: fade 0.25s ease both; }
  .lightbox[open] .lightbox__inner { animation: pop 0.3s var(--ease-out) both; }

  /* ---- dodir i lebdenje ---- */
  .navlist a::after { transition: transform 0.25s var(--ease-out); }
  .btn { transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease,
                     transform 0.16s ease; }
  .btn:hover { transform: translateY(-1px); }
  .btn:active { transform: translateY(0); transition-duration: 0.05s; }
  .filters button { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
  .lang, .burger { transition: background-color 0.16s ease, border-color 0.16s ease; }
  .lang:hover, .burger:hover { border-color: currentColor; }
  .contactcard .btn, .callbar a { transition: background-color 0.16s ease, transform 0.16s ease; }
  .callbar a:active { transform: scale(0.98); }
}

/* Na desktopu se redak cjenika pod mišem obilježi bojom naziva, ne pozadinom —
   pozadinska traka bi tekst prislonila uz rub. */
@media (prefers-reduced-motion: no-preference) and (min-width: 48em) {
  .pricetable tbody th, .pricelist-preview .name { transition: color 0.2s ease; }
  .pricetable tbody tr:hover th, .pricelist-preview li:hover .name { color: var(--olive); }
}