/* ================================================================
   Zlatara Tanasković — Beograd (Zemun · Vračar)
   Glavni stylesheet sajta
================================================================ */

/* -----------------------------------------------------------------
   1. TOKENS
----------------------------------------------------------------- */
:root {
  /* palette — Zlatara Tanasković (crimson + silver + graphite, from the logo) */
  --c-ivory:        #F7F6F4;
  --c-ivory-warm:   #EFEDEB;
  --c-pearl:        #FFFFFF;
  --c-beige:        #DEDFE1;
  --c-gold:         #A12529;   /* primary accent (crimson) */
  --c-gold-soft:    #E0676B;   /* light accent — text on dark backgrounds */
  --c-gold-deep:    #8A1D21;   /* deep accent */
  --c-bronze:       #7A8286;   /* silver */
  --c-silver:       #7A8286;
  --c-silver-light: #C9CDD0;
  --c-espresso:     #151517;   /* graphite */
  --c-espresso-2:   #0D0D0F;
  --c-coal:         #212124;
  --c-emerald:      #0E7C66;   /* success state only */
  --c-text:         #232326;
  --c-muted:        #686C70;
  --c-rule:         rgba(21, 21, 23, 0.12);
  --c-rule-light:   rgba(255, 255, 255, 0.18);

  /* typography — editorial serif (Cormorant Garamond) + clean sans (Manrope) */
  --f-display: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --f-body:    "Manrope", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  /* sizing */
  --container: 1400px;
  --gutter:    clamp(20px, 4vw, 56px);
  --radius:    2px;

  /* layout — header total = announce(~40) + header__inner(~94) + nav(~48)
     after the logo bump. JS updates these at runtime, but the defaults
     must match the new larger logo so the hero calc is correct on first paint. */
  --header-h-desktop: 184px;
  --header-h-mobile:  112px; /* announce(~40) + compact mobile header(~72) */
  --header-stack:     0px;   /* announce + header, measured live in main.js; the hero is pulled up by it */

  /* motion */
  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-soft: cubic-bezier(.4,.0,.2,1);
  --t-fast:    .35s;
  --t-med:     .6s;
  --t-slow:    1.1s;
}

/* -----------------------------------------------------------------
   2. RESET
----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--f-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.65;
  color: var(--c-text);
  background: var(--c-ivory);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  max-width: 100%;
}
/* Top-level clipping at the root so any element that briefly escapes its
   parent (decorative absolute glows, swiper wrappers mid-init, etc.) can
   never trigger a mobile horizontal scroll. `clip` is preferred over
   `hidden` because it doesn't make the element a scroll-container. */
html { overflow-x: clip; max-width: 100%; }
body.no-scroll { overflow: hidden; }

img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--t-fast) var(--ease); }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
ul, ol { list-style: none; padding: 0; margin: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 400; }
p { margin: 0; }
input, textarea { font: inherit; color: inherit; }
::selection { background: var(--c-gold); color: var(--c-pearl); }

/* -----------------------------------------------------------------
   3. UTILITIES
----------------------------------------------------------------- */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.eyebrow {
  display: inline-block;
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--c-gold-deep);
  position: relative;
  padding-left: 28px;
  margin-bottom: 18px;
}
.eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 18px;
  height: 1px;
  background: var(--c-gold);
}
.eyebrow--light { color: var(--c-gold-soft); }
.eyebrow--light::before { background: var(--c-gold-soft); }

.section__title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(34px, 5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.005em;
  color: var(--c-espresso);
}
.section__title em {
  font-style: italic;
  font-weight: 300;
  color: var(--c-gold-deep);
}
.section__title--light { color: var(--c-pearl); }

.section__sub {
  margin-top: 18px;
  max-width: 460px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--c-muted);
}
.section__sub--center { margin-left: auto; margin-right: auto; text-align: center; }
.section__sub--light { color: rgba(255,255,255,.72); }

.section__head {
  margin-bottom: clamp(40px, 6vw, 72px);
}
.section__head--split {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  flex-wrap: wrap;
}
.section__head--split .section__sub { margin-top: 0; }
.section__head--center {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.rule {
  display: block;
  width: 60px;
  height: 1px;
  margin-top: 22px;
  background: var(--c-rule);
  position: relative;
  overflow: hidden;
}
.rule span {
  position: absolute;
  inset: 0;
  background: var(--c-gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.2s var(--ease);
}
.is-revealed .rule span,
.reveal.is-revealed .rule span { transform: scaleX(1); }

.section { padding: clamp(80px, 10vw, 140px) 0; }
.section--light { background: var(--c-ivory); }
.section--dark  { background: var(--c-espresso); color: var(--c-pearl); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 36px;
  font-family: var(--f-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform .8s var(--ease);
}
.btn:hover::after { transform: translateX(100%); }

.btn--gold {
  background: var(--c-espresso);
  color: var(--c-pearl);
  border-color: var(--c-espresso);
}
.btn--gold:hover {
  background: var(--c-gold);
  border-color: var(--c-gold);
  color: var(--c-pearl);
}
.btn--ghost {
  background: transparent;
  color: var(--c-espresso);
  border-color: var(--c-espresso);
}
.btn--ghost:hover {
  background: var(--c-espresso);
  color: var(--c-pearl);
}
.btn--ghost-light {
  background: transparent;
  color: var(--c-pearl);
  border-color: rgba(255,255,255,.5);
}
.btn--ghost-light:hover {
  background: var(--c-pearl);
  color: var(--c-espresso);
  border-color: var(--c-pearl);
}
.btn--ghost-dark {
  background: transparent;
  color: var(--c-espresso);
  border-color: var(--c-espresso);
}

.btn-pill {
  display: inline-flex;
  align-items: center;
  padding: 11px 22px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  border: 1px solid var(--c-espresso);
  border-radius: 100px;
  color: var(--c-espresso);
  transition: all var(--t-fast) var(--ease);
}
.btn-pill:hover { background: var(--c-espresso); color: var(--c-pearl); }

.icon-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--c-espresso);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 400;
  transition: color var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.icon-btn:hover { color: var(--c-gold-deep); }
.icon-btn--round {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
}
.icon-btn--round:hover { border-color: var(--c-rule); background: rgba(21,21,23,.04); }

/* Language switcher */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  letter-spacing: .22em;
  font-weight: 500;
  text-transform: uppercase;
}
.lang-switch__btn {
  color: var(--c-muted);
  padding: 4px 2px;
  position: relative;
  transition: color var(--t-fast) var(--ease);
}
.lang-switch__btn.is-active { color: var(--c-espresso); }
.lang-switch__btn.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--c-gold);
}
.lang-switch__btn:disabled { opacity: .55; cursor: not-allowed; }
.lang-switch__btn:not(.is-active):not(:disabled):hover { color: var(--c-espresso); }
.lang-switch__sep { color: var(--c-muted); opacity: .5; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--c-pearl);
  border-bottom: 1px solid rgba(255,255,255,.35);
  padding-bottom: 6px;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), gap var(--t-fast) var(--ease);
}
.link-arrow:hover { color: var(--c-gold); border-color: var(--c-gold); gap: 18px; }

/* -----------------------------------------------------------------
   4. PRELOADER — logo reveal on graphite + curtain split
   Full run (once per session, ~2s — timing lives in main.js):
     0 – 1.1s     diamond outline draws itself, then settles at 20%
     .15 – 1.05s  logo wipes in left → right with a soft blur/fade-in
     .8 – 1.4s    bordo hairline grows from the centre to 120px
     1.2 – 2.0s   one shimmer sweep across the logo
     1.9s         .preloader-exit → logo fades/scales to .96, then the
                  graphite curtains split top/bottom
     2.85s        .preloader-hidden → click-through; node removed
   html.preloader-quick (later pages in the same session): 0.4s fade.
   prefers-reduced-motion: static logo, 0.5s fade.
----------------------------------------------------------------- */
.site-preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  background: transparent;
}

/* Two graphite panels that together cover the viewport. On exit they
   slide outward (top up, bottom down) revealing the site. */
.preloader-curtain {
  position: absolute;
  left: 0; right: 0;
  height: 50.5%;          /* small overlap kills any seam at the meet line */
  background: #0D0D0F;
  z-index: 0;
  transition: transform .7s cubic-bezier(.7, 0, .3, 1) .22s;
  pointer-events: none;
  will-change: transform;
}
.preloader-curtain--top    { top: 0; }
.preloader-curtain--bottom { bottom: 0; }

.preloader-stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 70px 0 0;
  transition: opacity .35s ease, transform .35s ease;
}
/* Faint light pool so the crimson wordmark reads on graphite */
.preloader-stage::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 420px; height: 300px;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(201,205,208,.09), transparent);
  pointer-events: none;
}

.preloader-diamond {
  position: absolute;
  left: 50%; top: 50%;
  width: 300px;
  height: auto;
  transform: translate(-50%, -50%);
  overflow: visible;
  animation: plDiamondSettle .5s ease 1.1s forwards;
}
.preloader-diamond path {
  stroke: #C9CDD0;
  stroke-width: .7;          /* ≈1px at the rendered size */
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: plDraw 1.1s cubic-bezier(.65, 0, .35, 1) forwards;
}
.preloader-diamond path:nth-child(2) { animation-duration: .8s; animation-delay: .2s; }
.preloader-diamond path:nth-child(3),
.preloader-diamond path:nth-child(4) { animation-duration: .8s; animation-delay: .3s; }

.preloader-logo {
  position: relative;
  width: 220px;
  max-width: 70vw;
}
.preloader-logo__img,
.preloader-logo__shine {
  display: block;
  width: 100%;
  height: auto;
}
.preloader-logo__img {
  opacity: 0;
  filter: blur(6px);
  clip-path: inset(0 100% 0 0);
  animation: plLogoIn .9s cubic-bezier(.22, .61, .36, 1) .15s forwards;
}
/* Shimmer: a brightened copy of the logo, revealed only inside a narrow
   gradient band that travels left → right once. */
.preloader-logo__shine {
  position: absolute;
  inset: 0;
  filter: brightness(2.6) saturate(.35);
  opacity: 0;
  -webkit-mask-image: linear-gradient(100deg, transparent 40%, #000 50%, transparent 60%);
          mask-image: linear-gradient(100deg, transparent 40%, #000 50%, transparent 60%);
  -webkit-mask-size: 300% 100%;
          mask-size: 300% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0;
          mask-position: 100% 0;
  animation: plShine .8s ease-in-out 1.2s forwards;
}

.preloader-line {
  display: block;
  width: 120px;
  height: 1px;
  margin-top: 26px;
  background: #A12529;
  transform: scaleX(0);
  animation: plLine .6s cubic-bezier(.22, .61, .36, 1) .8s forwards;
}

@keyframes plDraw         { to { stroke-dashoffset: 0; } }
@keyframes plDiamondSettle { to { opacity: .2; } }
@keyframes plLogoIn       { to { opacity: 1; filter: blur(0); clip-path: inset(0 0 0 0); } }
@keyframes plLine         { to { transform: scaleX(1); } }
@keyframes plShine {
  0%   { opacity: .85; -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  100% { opacity: .85; -webkit-mask-position: 0 0;    mask-position: 0 0; }
}

/* ===== Exit ===== */
.site-preloader.preloader-exit .preloader-stage { opacity: 0; transform: scale(.96); }
.site-preloader.preloader-exit .preloader-curtain--top    { transform: translateY(-100%); }
.site-preloader.preloader-exit .preloader-curtain--bottom { transform: translateY(100%); }

/* ===== Hidden ===== */
.site-preloader.preloader-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, visibility 0s linear .2s;
}

/* ===== Later pages in the session: a short 0.4s fade only ===== */
.preloader-quick .site-preloader {
  background: #F7F6F4;
  transition: opacity .4s ease, visibility 0s linear .4s;
}
.preloader-quick .preloader-stage,
.preloader-quick .preloader-curtain { display: none; }
.preloader-quick .site-preloader.preloader-exit { opacity: 0; visibility: hidden; }

/* Lock body scroll while the preloader is mounted */
body.preloader-active { overflow: hidden; }

@media (max-width: 600px) {
  .preloader-logo { width: 160px; }
  .preloader-diamond { width: 230px; }
  .preloader-diamond path { stroke-width: .9; }
  .preloader-stage { padding-top: 54px; }
}

/* Reduced motion — static logo, then a plain 0.5s fade */
@media (prefers-reduced-motion: reduce) {
  .preloader-diamond,
  .preloader-diamond path,
  .preloader-logo__img,
  .preloader-line { animation: none !important; }
  .preloader-diamond { opacity: .2; }
  .preloader-diamond path { stroke-dashoffset: 0; }
  .preloader-logo__img { opacity: 1; filter: none; clip-path: none; }
  .preloader-line { transform: none; }
  .preloader-logo__shine,
  .preloader-curtain { display: none; }
  .site-preloader:not(.preloader-hidden) { background: #0D0D0F; }
  .site-preloader { transition: opacity .5s ease, visibility 0s linear .5s !important; }
  .site-preloader.preloader-exit { opacity: 0; }
  .site-preloader.preloader-exit .preloader-stage { transform: none; opacity: 1; }
  .preloader-quick .site-preloader:not(.preloader-hidden) { background: #F7F6F4; }
}


/* -----------------------------------------------------------------
   5. ANNOUNCEMENT BAR
----------------------------------------------------------------- */
.announce {
  background: var(--c-espresso);
  color: var(--c-gold-soft);
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  padding: 11px 0;
  overflow: hidden;
  position: relative;
  /* Belt + suspenders: even though overflow:hidden clips the marquee
     visually, force a max-width so the wide inline-flex child can never
     contribute to body width on any browser. */
  max-width: 100vw;
}
.announce__track {
  display: inline-flex;
  gap: 20px;
  white-space: nowrap;
  animation: marquee 40s linear infinite;
  padding-left: 100%;
}
.announce__track span { display: inline-block; }
@keyframes marquee {
  to { transform: translateX(-100%); }
}

/* -----------------------------------------------------------------
   6. HEADER / NAV
----------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--c-ivory);
  transition: background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  border-bottom: 1px solid transparent;
}
.header.is-scrolled {
  background: rgba(247,246,244,0.94);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: var(--c-rule);
}
.header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 18px var(--gutter) 14px;
  transition: padding var(--t-fast) var(--ease);
}
.header.is-scrolled .header__inner { padding: 12px var(--gutter); }
.header__left, .header__right {
  display: flex;
  align-items: center;
  gap: 18px;
}
.header__right { justify-content: flex-end; position: relative; }
.header__center { display: flex; justify-content: center; }
.header__search-label { display: inline; }

.header__menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;   /* center the 3 lines vertically inside the button box */
  align-items: stretch;
  gap: 5px;
  width: 28px;
  height: 22px;
  padding: 0;
}
.header__menu-toggle span {
  width: 100%;
  height: 1px;
  background: var(--c-espresso);
  transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.header__menu-toggle.is-active span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.header__menu-toggle.is-active span:nth-child(2) { opacity: 0; }
.header__menu-toggle.is-active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.header__cta {
  font-size: 10px;
  padding: 10px 20px;
}

/* Brand wordmark / logo image */
.brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.brand__logo {
  width: auto;
  height: clamp(50px, 5vw, 69px);   /* +15% over previous 44/4.4vw/60px */
  transition: height var(--t-fast) var(--ease);
  object-fit: contain;
}
.header.is-scrolled .brand__logo { height: 48px; }   /* +15% over previous 42px */
.brand--small .brand__logo { height: 36px; }
.brand--footer .brand__logo {
  height: 72px;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.2));
}

/* Primary nav */
.nav {
  border-top: 1px solid var(--c-rule);
  position: relative;
}
.nav__list {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  /* Slightly tightened from clamp(18,2.4vw,36) so the +20% larger
     links still fit on one row across desktop widths. */
  gap: clamp(16px, 2vw, 30px);
  padding: 14px var(--gutter);
}
.nav__link {
  /* −10% over the prior 14px to dial back the navbar weight while
     keeping it ≈+9% larger than the original 11.5px baseline. */
  font-size: 12.5px;
  letter-spacing: .26em;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--c-espresso);
  position: relative;
  padding: 6px 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--c-gold);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--t-fast) var(--ease);
}
.nav__link:hover::after,
.nav__item--has-mega.is-open .nav__link::after { transform: scaleX(1); }
.nav__item--has-mega .nav__link::before {
  content: "";
  width: 5px;
  height: 5px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--t-fast) var(--ease);
  margin-left: 4px;
  order: 1;
}

/* Compact sticky state — keep nav visible but tightened */
.header.is-scrolled .nav { border-top-color: transparent; }
.header.is-scrolled .nav__list { padding: 10px var(--gutter); gap: clamp(16px, 2vw, 28px); }
.header.is-scrolled .nav__link { font-size: 11px; }

/* Mega menu */
.mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--c-ivory);
  border-top: 1px solid var(--c-rule);
  border-bottom: 1px solid var(--c-rule);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), visibility 0s linear var(--t-fast);
  z-index: 10;
}
.mega.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}
.mega__inner {
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: 60px;
  max-width: var(--container);
  margin: 0 auto;
  padding: 50px var(--gutter) 60px;
}
.mega__title {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 400;
  margin-bottom: 22px;
  color: var(--c-espresso);
  font-style: italic;
}
.mega__links li + li { margin-top: 14px; }
.mega__links a {
  font-size: 14px;
  color: var(--c-text);
  position: relative;
  display: inline-block;
  transition: color var(--t-fast) var(--ease), padding-left var(--t-fast) var(--ease);
}
.mega__links a:hover { color: var(--c-gold-deep); padding-left: 12px; }
.mega__links a:hover::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 8px;
  height: 1px;
  background: var(--c-gold);
}
.mega-card {
  display: flex;
  flex-direction: column;
  background: var(--c-pearl);
  border: 1px solid var(--c-rule);
  padding: 22px;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.mega-card:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -22px rgba(21,21,23,.18); }
.mega-card__visual {
  position: relative;
  aspect-ratio: 6/5;
  background: linear-gradient(140deg, var(--c-beige), var(--c-pearl));
  margin-bottom: 16px;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.mega-card__svg { width: 70%; }
.mega-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
}
.mega-card:hover .mega-card__img { transform: scale(1.05); }
.mega-card__shimmer {
  position: absolute;
  inset: -50%;
  background: radial-gradient(closest-side, rgba(161,37,41,.25), transparent 70%);
  animation: shimmerPulse 5s ease-in-out infinite;
}
@keyframes shimmerPulse {
  0%, 100% { transform: scale(.9); opacity: .5; }
  50%      { transform: scale(1.1); opacity: 1; }
}
.mega-card__label {
  font-family: var(--f-display);
  font-size: 22px;
  color: var(--c-espresso);
  font-style: italic;
}
.mega-card__cta {
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--c-gold-deep);
  margin-top: 10px;
}

/* -----------------------------------------------------------------
   7. MOBILE MENU & OVERLAY
----------------------------------------------------------------- */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(13,13,15,0.55);
  opacity: 0;
  visibility: hidden;
  z-index: 110;
  transition: opacity var(--t-fast) var(--ease), visibility 0s linear var(--t-fast);
}
.overlay.is-visible { opacity: 1; visibility: visible; transition-delay: 0s; }

.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(86%, 420px);
  background: var(--c-ivory);
  z-index: 120;
  transform: translateX(-100%);
  transition: transform .5s var(--ease);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.mobile-menu.is-open { transform: translateX(0); }
.mobile-menu__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 26px;
  border-bottom: 1px solid var(--c-rule);
}
.mobile-menu__nav { padding: 26px; flex: 1; }
.mobile-menu__nav > ul > li { border-bottom: 1px solid var(--c-rule); }
.mobile-menu__nav > ul > li > a,
.m-acc__btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 18px 0;
  font-family: var(--f-display);
  font-size: 22px;
  color: var(--c-espresso);
}
.m-acc__btn span {
  font-size: 18px;
  color: var(--c-gold-deep);
  transition: transform var(--t-fast) var(--ease);
}
.m-acc.is-open .m-acc__btn span { transform: rotate(45deg); }
.m-acc__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s var(--ease);
}
.m-acc.is-open .m-acc__panel { max-height: 460px; }
.m-acc__panel li { padding: 8px 0; }
.m-acc__panel a {
  font-family: var(--f-body);
  font-size: 14px;
  color: var(--c-text);
  letter-spacing: .04em;
}
.m-acc__panel li:last-child { padding-bottom: 18px; }
.mobile-menu__lang {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 22px 0 12px;
  font-size: 12px;
  letter-spacing: .22em;
}
.mobile-menu__cta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 10px;
}

/* -----------------------------------------------------------------
   8. SEARCH OVERLAY
----------------------------------------------------------------- */
.search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(21,21,23,0.96);
  z-index: 130;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-fast) var(--ease), visibility 0s linear var(--t-fast);
  display: grid;
  place-items: center;
}
.search-overlay.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.search-overlay__close {
  position: absolute;
  top: 24px;
  right: 24px;
  color: var(--c-pearl);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  transition: background var(--t-fast) var(--ease);
}
.search-overlay__close:hover { background: rgba(255,255,255,.1); }
.search-overlay__inner {
  width: min(720px, 90%);
  text-align: center;
}
.search-overlay__label {
  display: block;
  font-size: 11px;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--c-gold-soft);
  margin-bottom: 26px;
}
.search-overlay__form input {
  width: 100%;
  font-family: var(--f-display);
  font-size: clamp(28px, 5vw, 48px);
  font-weight: 300;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.2);
  color: var(--c-pearl);
  padding: 14px 0;
  text-align: center;
  outline: none;
  transition: border-color var(--t-fast) var(--ease);
}
.search-overlay__form input:focus { border-color: var(--c-gold); }
.search-overlay__form input::placeholder { color: rgba(255,255,255,.35); }
.search-overlay__hints {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 16px;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
}
.search-overlay__hints a {
  color: var(--c-gold-soft);
  border-bottom: 1px solid rgba(161,37,41,.4);
  padding-bottom: 2px;
}
.search-overlay__hints a:hover { color: var(--c-pearl); border-color: var(--c-pearl); }

/* -----------------------------------------------------------------
   9. HERO — 3-image crossfade slider, exactly one viewport high
   The sticky header overlaps the top of the slider: the hero is pulled
   up by the header stack height (--header-stack, measured in main.js)
   and the content gets the same top padding, so text never sits under
   the header. Slides: 1.4s crossfade + slow Ken-Burns zoom (main.js).
----------------------------------------------------------------- */
.hero {
  position: relative;
  height: 100vh;
  min-height: 100svh;
  margin-top: calc(-1 * var(--header-stack, 0px));
  background: var(--c-espresso-2);
  color: #FFFFFF;
  overflow: hidden;
  isolation: isolate;
}
@supports (height: 100dvh) {
  .hero { height: 100dvh; }
}
/* Announcement bar stays above the pulled-up hero */
.announce { z-index: 101; }

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--c-espresso-2);
}
.hero-slider { position: absolute; inset: 0; }
.hero-slide {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.4s cubic-bezier(.4, 0, .2, 1);
}
.hero-slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1);
  transform-origin: center;
  will-change: transform;
}
/* Outgoing slide stays fully opaque underneath while the next one
   fades in on top — no dark dip between slides. */
.hero-slide.is-prev   { opacity: 1; z-index: 1; transition: none; }
.hero-slide.is-active { opacity: 1; z-index: 2; }
.hero-slide.is-zoom img { animation: heroKenBurns 7.4s linear forwards; }
.hero-slider.is-paused .hero-slide img { animation-play-state: paused; }
@keyframes heroKenBurns {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}

/* Overlay — light enough that the champagne silk stays visible:
   heavier where the text sits (left / bottom), plus a 10% global dim. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top right, rgba(13,13,15,.55) 0%, rgba(13,13,15,.34) 38%, rgba(13,13,15,.15) 72%),
    linear-gradient(rgba(0,0,0,.10), rgba(0,0,0,.10));
  z-index: 1;
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 2;
  height: 100%;
  padding-top: var(--header-stack, 0px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero__content {
  position: relative;
  width: min(100%, 720px);
  max-width: 720px;
  margin-left: 0;
  margin-right: auto;
  padding-top: clamp(20px, 4vh, 60px);
  padding-bottom: clamp(28px, 5vh, 70px);
}
/* Soft local scrim behind the copy — keeps contrast without darkening
   the whole photograph. */
.hero__content::before {
  content: "";
  position: absolute;
  inset: -12% -22% -12% -30%;
  background: radial-gradient(closest-side, rgba(13,13,15,.30), transparent);
  z-index: -1;
  pointer-events: none;
}
.hero .eyebrow--light { color: rgba(255,255,255,.9); text-shadow: 0 1px 14px rgba(0,0,0,.35); }
.hero .eyebrow--light::before { background: #E0676B; }
.hero__title {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(40px, 5.2vw, 72px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: #FFFFFF;
  margin: 12px 0 0;
  text-shadow: 0 2px 28px rgba(13,13,15,.42);
}
.hero__title em {
  font-style: italic;
  color: #E0676B;
  font-weight: 300;
}
.hero__title .line { display: block; overflow: hidden; padding-top: .1em; margin-top: -.1em; }
.hero__title .line__inner {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1s var(--ease);
}
.is-loaded .hero__title .line:nth-child(1) .line__inner { transition-delay: .1s; transform: translateY(0); }
.is-loaded .hero__title .line:nth-child(2) .line__inner { transition-delay: .25s; transform: translateY(0); }

.hero__divider {
  position: relative;
  width: 80px;
  height: 1px;
  background: rgba(255,255,255,.3);
  margin: 36px 0 28px;
  overflow: hidden;
}
.hero__divider span {
  position: absolute;
  inset: 0;
  background: #E0676B;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1s var(--ease) .8s;
}
.is-loaded .hero__divider span { transform: scaleX(1); }

.hero__lede {
  max-width: 520px;
  font-size: 16px;
  line-height: 1.75;
  color: rgba(255,255,255,.92);
  text-shadow: 0 1px 18px rgba(13,13,15,.45);
}

.hero__actions {
  margin-top: 44px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.hero .btn--ghost-light {
  border-color: rgba(255,255,255,.75);
  background: rgba(13,13,15,.12);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}
.hero .btn--ghost-light:hover { background: #FFFFFF; border-color: #FFFFFF; color: var(--c-espresso); }

/* Slide indicators — bottom centre, stacked above the scroll cue */
.hero__dots {
  position: absolute;
  left: 50%;
  bottom: 118px;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 2px;
}
.hero__dot {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
}
.hero__dot::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.5);
  box-shadow: 0 0 0 0 rgba(255,255,255,0);
  transition: background .35s var(--ease), box-shadow .35s var(--ease);
}
.hero__dot:hover::before { background: #FFFFFF; }
.hero__dot.is-active::before {
  background: #FFFFFF;
  box-shadow: 0 0 0 4px rgba(255,255,255,.22);
}

.hero__scroll {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-size: 10px;
  letter-spacing: .42em;
  color: rgba(255,255,255,.8);
  text-transform: uppercase;
}
.hero__scroll-line {
  width: 1px;
  height: 50px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,.6), transparent);
  position: relative;
  overflow: hidden;
}
.hero__scroll-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #E0676B;
  transform: translateY(-100%);
  animation: scrollPulse 2.4s var(--ease) infinite;
}
@keyframes scrollPulse {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

/* Initial reveal hidden state for hero */
.hero .reveal { opacity: 0; transform: translateY(20px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.is-loaded .hero .reveal { opacity: 1; transform: translateY(0); }
.is-loaded .hero .reveal:nth-of-type(1) { transition-delay: .1s; }
.is-loaded .hero .reveal:nth-of-type(2) { transition-delay: .9s; }
.is-loaded .hero .reveal:nth-of-type(3) { transition-delay: 1.1s; }
.is-loaded .hero .reveal:nth-of-type(4) { transition-delay: 1.3s; }

@media (max-width: 980px) {
  .hero__content { margin-left: auto; }
  .hero::after {
    background:
      linear-gradient(to top, rgba(13,13,15,.58) 0%, rgba(13,13,15,.34) 45%, rgba(13,13,15,.15) 80%),
      linear-gradient(rgba(0,0,0,.10), rgba(0,0,0,.10));
  }
}
@media (max-width: 600px) {
  .hero__title { font-size: 42px; }
  .hero__divider { margin: 26px 0 22px; }
  .hero__lede { font-size: 15px; }
  .hero__actions { margin-top: 32px; }
  .hero__dots { bottom: 104px; gap: 0; }
  .hero__dot { width: 44px; height: 44px; }
}
@media (max-height: 640px) and (max-width: 980px) {
  .hero__dots, .hero__scroll { display: none; }
}

/* Reduced motion — no zoom, a simple (shorter) fade */
@media (prefers-reduced-motion: reduce) {
  .hero-slide.is-zoom img { animation: none !important; }
  .hero-slide { transition: opacity .8s ease !important; }
  .hero-slide.is-prev { transition: none !important; }
}

/* -----------------------------------------------------------------
   10. PRODUCT CARDS
----------------------------------------------------------------- */
.product-card { height: auto; }
.product-card__link { display: block; color: inherit; }
.product-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: linear-gradient(140deg, var(--c-pearl) 0%, var(--c-beige) 100%);
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid var(--c-rule);
  transition: border-color var(--t-fast) var(--ease);
}
.product-card__media--ivory { background: linear-gradient(140deg, #F7F6F4, #E3E4E6); }
.product-card__media--pearl { background: linear-gradient(140deg, #FFFFFF, #E8E9EA); }
.product-card__svg {
  width: 70%;
  transition: transform .8s var(--ease);
}
/* Real photo product image — fills the square media area, smooth hover zoom */
.product-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .8s var(--ease);
}
.product-card__link:hover .product-card__svg,
.product-card__link:hover .product-card__img { transform: scale(1.05); }
.product-card__link:hover .product-card__media { border-color: var(--c-gold); }
.product-card__shine {
  position: absolute;
  top: 0; left: -150%;
  width: 80%;
  height: 100%;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  transition: left .9s var(--ease);
  pointer-events: none;
}
.product-card__link:hover .product-card__shine { left: 150%; }
.product-card__quick {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--c-espresso);
  color: var(--c-pearl);
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  padding: 10px 22px;
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  z-index: 2;
}
.product-card__link:hover .product-card__quick { opacity: 1; transform: translateX(-50%) translateY(0); }

.product-card__body { padding: 22px 0 4px; text-align: left; }
.product-card__body--center { text-align: center; }
.product-card__cat {
  display: block;
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--c-gold-deep);
  margin-bottom: 8px;
}
.product-card__title {
  font-family: var(--f-display);
  font-size: 22px;
  color: var(--c-espresso);
  font-weight: 400;
  margin-bottom: 6px;
}
.product-card__desc {
  font-size: 13px;
  color: var(--c-muted);
  line-height: 1.55;
  margin-bottom: 10px;
}
.product-card__price {
  display: inline-block;
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--c-text);
  border-bottom: 1px solid var(--c-rule);
  padding-bottom: 4px;
}

/* Swiper nav */
.signature-swiper { position: relative; padding-bottom: 60px; }
.signature-swiper__nav {
  position: absolute;
  bottom: 0; right: 0;
  display: flex;
  gap: 12px;
  z-index: 2;
}
.swiper-button-prev, .swiper-button-next {
  position: static;
  width: 46px;
  height: 46px;
  margin: 0;
  border: 1px solid var(--c-rule);
  border-radius: 50%;
  color: var(--c-espresso);
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.swiper-button-prev::after, .swiper-button-next::after { font-size: 13px; font-weight: 600; }
.swiper-button-prev:hover, .swiper-button-next:hover {
  background: var(--c-espresso);
  border-color: var(--c-espresso);
  color: var(--c-pearl);
}

/* -----------------------------------------------------------------
   11. DIAMOND COLLECTION FEATURE BAND
----------------------------------------------------------------- */
.feature-band {
  position: relative;
  min-height: clamp(560px, 80vh, 820px);
  padding: clamp(80px, 10vw, 140px) 0;
  display: flex;
  align-items: center;
  color: var(--c-pearl);
  overflow: hidden;
  isolation: isolate;
}
.feature-band__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
/* Real photo + dark editorial overlay for the feature band */
.feature-band__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.feature-band__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(13,13,15,.62), rgba(13,13,15,.74)),
    rgba(13,13,15,.18);
}
.feature-band__sky {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 30%, #2E2F33 0%, #141416 60%, var(--c-espresso-2) 100%);
}
.feature-band__beam {
  position: absolute;
  width: 240px; height: 700px;
  background: radial-gradient(ellipse at center, rgba(161,37,41,.35), transparent 70%);
  left: 50%; top: 30%;
  transform: translateX(-50%);
  filter: blur(20px);
}
.feature-band__balloon {
  position: absolute;
  width: clamp(280px, 40vw, 520px);
  top: 50%; left: 50%;
  transform: translate(-50%, -55%);
  filter: drop-shadow(0 40px 60px rgba(0,0,0,.5));
  animation: balloonFloat 8s ease-in-out infinite;
  opacity: .92;
}
@keyframes balloonFloat {
  0%, 100% { transform: translate(-50%, -55%) translateY(-8px); }
  50%      { transform: translate(-50%, -55%) translateY(8px); }
}
.feature-band__content {
  text-align: center;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.feature-band__title {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(46px, 8vw, 110px);
  line-height: 1;
  margin: 12px 0 28px;
  color: var(--c-pearl);
}
.feature-band__title em { font-style: italic; color: var(--c-gold); }
.feature-band__title .line { display: block; overflow: hidden; }
.feature-band__title .line__inner {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1s var(--ease);
}
.is-revealed .feature-band__title .line:nth-child(1) .line__inner { transform: translateY(0); transition-delay: .1s; }
.is-revealed .feature-band__title .line:nth-child(2) .line__inner { transform: translateY(0); transition-delay: .25s; }

.feature-band__lede {
  max-width: 520px;
  font-size: 16px;
  color: rgba(255,255,255,.75);
  margin-bottom: 36px;
}

/* -----------------------------------------------------------------
   12. CATEGORY GRID
----------------------------------------------------------------- */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.6vw, 24px);
}
.cat-card {
  display: block;
  position: relative;
  overflow: hidden;
}
.cat-card__media {
  position: relative;
  aspect-ratio: 3/4;
  background: var(--c-ivory-warm);
  overflow: hidden;
  display: grid;
  place-items: center;
}
/* Real jewelry photo, gentle hover zoom */
.cat-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .8s var(--ease);
}
.cat-card:hover .cat-card__img { transform: scale(1.04); }
/* Legacy SVG hook kept for graceful coverage if any older markup
   still uses it — invisible fallback rule */
.cat-card__svg {
  width: 60%;
  filter: drop-shadow(0 10px 20px rgba(21,21,23,.25));
}
.cat-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(13,13,15,.55) 0%, transparent 60%);
}
.cat-card::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(255,255,255,0);
  pointer-events: none;
  transition: border-color var(--t-fast) var(--ease);
  z-index: 2;
}
.cat-card:hover::after { border-color: rgba(161,37,41,.6); }
.cat-card__body {
  position: absolute;
  bottom: 0; left: 0;
  padding: 28px;
  z-index: 3;
}
.cat-card__title {
  font-family: var(--f-display);
  font-size: clamp(24px, 2.4vw, 32px);
  color: var(--c-pearl);
  font-weight: 400;
  margin-bottom: 6px;
}
.cat-card__cta {
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.cat-card__cta .arrow { transition: transform var(--t-fast) var(--ease); }
.cat-card:hover .cat-card__cta { color: var(--c-gold); }
.cat-card:hover .cat-card__cta .arrow { transform: translateX(6px); }

/* -----------------------------------------------------------------
   13. BANDS (Gold / Pearl / Gemstones)
----------------------------------------------------------------- */
.band {
  position: relative;
  padding: clamp(80px, 10vw, 140px) 0;
  overflow: hidden;
  isolation: isolate;
}
.band__bg { position: absolute; inset: 0; z-index: -1; }

/* Photographic background layer for select bands. The image sits behind a
   tinted overlay so product cards and section text stay readable. */
.band__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.05);
}
.band__bg-overlay { position: absolute; inset: 0; }
.band__bg-overlay--ivory {
  background:
    linear-gradient(180deg,
      rgba(247,246,244,0.86) 0%,
      rgba(239,237,235,0.78) 100%);
}
.band__bg-overlay--pearl {
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.88) 0%,
      rgba(239,237,235,0.80) 100%);
}
/* Dark editorial overlay for photo-backed dark bands (Drago kamenje).
   Keeps gemstone cards readable against any underlying photo. */
.band__bg-overlay--dark {
  background:
    linear-gradient(135deg, rgba(13,13,15,.82) 0%, rgba(13,13,15,.7) 100%),
    rgba(13,13,15,.18);
}
/* When a band uses a photo, lift the image opacity slightly via the photo
   layer (it's already fully behind the overlay; this fine-tunes contrast). */
.band--photo .band__photo { opacity: 0.55; }
.band--dark.band--photo .band__photo { opacity: 0.45; }
.band--ivory { background: linear-gradient(180deg, var(--c-ivory-warm), var(--c-pearl)); }
.band--ivory .band__bg-glow {
  position: absolute;
  width: 700px; height: 700px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(161,37,41,.18), transparent);
  top: -200px; right: -100px;
  filter: blur(40px);
}
.band--pearl { background: linear-gradient(180deg, var(--c-pearl), #EFEFEE); }
.band--pearl .band__bg-glow--soft {
  position: absolute;
  width: 800px; height: 800px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,255,255,.6), transparent);
  top: 30%; left: -10%;
  filter: blur(40px);
}
.band--dark { background: linear-gradient(180deg, var(--c-espresso-2), #1B1B1E); color: var(--c-pearl); }
.band--dark .band__bg-glow--emerald {
  position: absolute;
  width: 700px; height: 700px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(161,37,41,.16), transparent);
  bottom: -200px; left: -100px;
  filter: blur(60px);
}
.band--dark .product-card__title { color: var(--c-pearl); }
.band--dark .product-card__price { color: rgba(255,255,255,.7); border-color: rgba(255,255,255,.18); }

.gem-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.gem-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 36px 22px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.gem-card:hover {
  background: rgba(255,255,255,.06);
  border-color: rgba(161,37,41,.4);
  transform: translateY(-6px);
}
.gem-card__visual {
  width: 110px; height: 110px;
  display: grid;
  place-items: center;
  margin-bottom: 22px;
  filter: drop-shadow(0 14px 24px rgba(0,0,0,.35));
}
.gem-card__title {
  font-family: var(--f-display);
  font-size: 26px;
  color: var(--c-pearl);
  font-weight: 400;
  margin-bottom: 6px;
}
.gem-card__sub {
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--c-gold-soft);
}

/* -----------------------------------------------------------------
   14. CONSULTATION
----------------------------------------------------------------- */
.consultation {
  background: var(--c-pearl);
  padding: clamp(80px, 10vw, 140px) 0;
}
.consultation__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 7vw, 90px);
  align-items: center;
}
.consultation__visual { position: relative; aspect-ratio: 5/6; }
.consultation__photo {
  position: absolute;
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(21,21,23,.35);
}
.consultation__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .8s var(--ease);
}
.consultation__photo:hover img { transform: scale(1.04); }
.consultation__photo--1 { inset: 0 30% 30% 0; z-index: 1; }
.consultation__photo--2 { inset: 30% 0 0 30%; z-index: 2; border: 6px solid var(--c-pearl); }

.consultation__lede {
  max-width: 520px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--c-text);
  margin: 8px 0 32px;
}
.consultation__benefits {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 0;
  border-top: 1px solid var(--c-rule);
  border-bottom: 1px solid var(--c-rule);
  margin-bottom: 32px;
}
.consultation__benefits li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
  color: var(--c-text);
}
.consultation__benefits li span { color: var(--c-gold); font-size: 22px; line-height: 0; }
.consultation__actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* -----------------------------------------------------------------
   16. ABOUT
----------------------------------------------------------------- */
.about {
  position: relative;
  padding: clamp(100px, 14vw, 180px) 0;
  background: var(--c-espresso);
  color: var(--c-pearl);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.about__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse at 50% 30%, #26272A 0%, var(--c-espresso) 60%);
}
.about__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(45deg, transparent 49%, rgba(161,37,41,.04) 49.5%, rgba(161,37,41,.04) 50.5%, transparent 51%);
  background-size: 40px 40px;
  opacity: .5;
}

/* Photographic about background — image with strong dark overlay so
   the centered editorial text stays elegant and highly readable. */
.about--photo .about__bg { background: var(--c-espresso); }
.about--photo .about__bg::before {
  background-image: none;
  background:
    linear-gradient(135deg,
      rgba(13,13,15,0.86) 0%,
      rgba(13,13,15,0.65) 60%,
      rgba(13,13,15,0.82) 100%);
  opacity: 1;
  z-index: 1;
}
.about__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.45;
  filter: saturate(1.05);
}
.about__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 760px;
}
.about__title {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(36px, 5vw, 64px);
  margin: 12px 0 28px;
  color: var(--c-pearl);
}
.about__lede {
  font-size: 18px;
  line-height: 1.85;
  color: rgba(255,255,255,.78);
  margin-bottom: 36px;
  font-family: var(--f-display);
  font-weight: 300;
  font-style: italic;
}

/* -----------------------------------------------------------------
   17. INSTAGRAM
----------------------------------------------------------------- */
.instagram-section { background: var(--c-ivory); padding: clamp(80px, 10vw, 140px) 0; }
.ig-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  margin-bottom: 50px;
}
.ig-card { position: relative; aspect-ratio: 1/1; overflow: hidden; display: block; background: var(--c-ivory-warm); }
/* Real Instagram image — fills the card with a subtle hover zoom */
.ig-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .55s var(--ease);
}
.ig-card:hover .ig-card__img { transform: scale(1.04); }
.ig-card__icon {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(.85);
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.ig-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(13,13,15,.45);
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease);
  z-index: 1;
}
.ig-card:hover::before { opacity: 1; }
.ig-card:hover .ig-card__icon { opacity: 1; transform: translate(-50%, -50%) scale(1); z-index: 2; }
.ig-cta { text-align: center; }

/* -----------------------------------------------------------------
   18. FOOTER — warm-white editorial layout
   Top: editorial newsletter row · thin gold rule · 4-column links
   block (brand + 3 link columns with vertical divider) · centered
   bottom copyright. All text in Serbian.
----------------------------------------------------------------- */
.footer {
  background: var(--c-ivory);
  color: var(--c-text);
  padding: clamp(70px, 9vw, 110px) 0 36px;
  border-top: 1px solid var(--c-rule);
}

/* Newsletter row */
.footer__newsletter {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 2fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
  padding-bottom: clamp(50px, 6vw, 80px);
}
.footer__newsletter-title {
  font-family: var(--f-display);
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 400;
  line-height: 1.1;
  color: var(--c-espresso);
  letter-spacing: -0.005em;
}

.footer-form { position: relative; }
.footer-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: clamp(20px, 3vw, 40px);
  align-items: end;
}
.footer-form__field { display: flex; flex-direction: column; gap: 6px; }
.footer-form__field label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-gold-deep);
}
.footer-form__field label span { color: var(--c-gold); }
.footer-form__field input {
  width: 100%;
  padding: 10px 0 10px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--c-rule);
  font-size: 15px;
  color: var(--c-espresso);
  outline: none;
  transition: border-color var(--t-fast) var(--ease);
}
.footer-form__field input:focus { border-color: var(--c-gold); }
.footer-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 40px;
  font-family: var(--f-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--c-pearl);
  background: var(--c-espresso);
  border: 1px solid var(--c-espresso);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  white-space: nowrap;
  min-width: 200px;
}
.footer-form__submit:hover {
  background: var(--c-gold);
  border-color: var(--c-gold);
  color: var(--c-pearl);
}

.footer-form__check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 24px;
  font-size: 13px;
  color: var(--c-muted);
  cursor: pointer;
  user-select: none;
}
.footer-form__check input {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
  border: 1px solid var(--c-rule);
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.footer-form__check input:checked {
  background: var(--c-espresso);
  border-color: var(--c-espresso);
}
.footer-form__check input:checked::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 5px;
  width: 4px;
  height: 8px;
  border: solid var(--c-pearl);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.footer-form__check span span { color: var(--c-gold); }

.footer-form__success {
  display: block;
  margin-top: 16px;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-emerald);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.footer-form__success.is-visible { opacity: 1; transform: translateY(0); }

/* Thin divider */
.footer__rule {
  border: 0;
  height: 1px;
  background: var(--c-rule);
  margin: 0;
}

/* Columns */
.footer__cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(30px, 4vw, 60px);
  padding: clamp(50px, 6vw, 80px) 0 clamp(40px, 5vw, 60px);
}
.footer__col--brand {
  position: relative;
  padding-right: clamp(20px, 3vw, 40px);
}
.footer__col--brand::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 1px;
  background: var(--c-rule);
}
.footer__col--brand .brand--footer .brand__logo {
  height: 60px;
  width: auto;
  filter: none;
  margin-bottom: 22px;
}

.footer__social { display: flex; gap: 12px; margin-bottom: 24px; }
.footer__social a {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--c-rule);
  border-radius: 50%;
  color: var(--c-espresso);
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.footer__social a:hover {
  background: var(--c-espresso);
  border-color: var(--c-espresso);
  color: var(--c-gold-soft);
}

.footer__contact {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}
.footer__contact li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--c-text);
}
.footer__contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--c-gold-deep);
  flex-shrink: 0;
}
.footer__contact a:hover { color: var(--c-gold-deep); }

.footer__note {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 14px;
  color: var(--c-muted);
  line-height: 1.55;
}

.footer__heading {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 400;
  font-style: italic;
  color: var(--c-espresso);
  margin-bottom: 22px;
  letter-spacing: -0.005em;
}
.footer__links { display: flex; flex-direction: column; gap: 12px; }
.footer__links a {
  font-size: 13px;
  color: var(--c-text);
  letter-spacing: 0.01em;
  position: relative;
  display: inline-block;
  transition: color var(--t-fast) var(--ease), padding-left var(--t-fast) var(--ease);
}
.footer__links a:hover {
  color: var(--c-gold-deep);
  padding-left: 10px;
}
.footer__links a:hover::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 1px;
  background: var(--c-gold);
}

.footer__bottom {
  border-top: 1px solid var(--c-rule);
  padding-top: 26px;
  text-align: center;
}
.footer__bottom p {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--c-muted);
}
.footer__bottom a {
  color: var(--c-gold-deep);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-fast) var(--ease);
}
.footer__bottom a:hover { border-color: var(--c-gold); }

/* -----------------------------------------------------------------
   18b. AI ASSISTANT — floating button (bottom-LEFT) + chat popup
   The AI fab sits bottom-left mirroring back-to-top (bottom-right) on
   the same Y axis. Chat popup opens from the left edge above the fab.
----------------------------------------------------------------- */
.ai-fab {
  position: fixed;
  left: 24px;
  right: auto;
  bottom: 24px;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: var(--c-espresso);
  color: var(--c-gold-soft);
  border: 1px solid var(--c-gold);
  border-radius: 50%;
  cursor: pointer;
  z-index: 90;
  box-shadow: 0 14px 30px -14px rgba(21,21,23,.45);
  transition:
    transform var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease);
}
.ai-fab::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-gold);
  box-shadow: 0 0 0 3px var(--c-espresso), 0 0 12px rgba(161,37,41,.6);
  animation: aiPulse 2.4s ease-in-out infinite;
}
@keyframes aiPulse {
  0%, 100% { opacity: .9; transform: scale(1); }
  50%      { opacity: .55; transform: scale(.85); }
}
.ai-fab:hover {
  background: var(--c-gold);
  color: var(--c-pearl);
  box-shadow: 0 16px 36px -14px rgba(161,37,41,.55);
}
.ai-fab[aria-expanded="true"] {
  background: var(--c-gold);
  color: var(--c-pearl);
}

/* Tooltip on hover — sits to the right of the fab (since fab is bottom-left) */
.ai-fab[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 12px);
  right: auto;
  top: 50%;
  transform: translateY(-50%);
  padding: 7px 12px;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-pearl);
  background: var(--c-espresso);
  border-radius: 2px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--t-fast) var(--ease), visibility 0s linear var(--t-fast);
}
.ai-fab[data-tooltip]:hover::before {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

/* Chat popup — opens from bottom-left, mirrors the fab */
.ai-chat {
  position: fixed;
  left: 24px;
  right: auto;
  bottom: 88px;          /* sits above the fab */
  width: min(420px, calc(100vw - 48px));
  max-height: min(560px, calc(100vh - 140px));
  background: var(--c-pearl);
  color: var(--c-text);
  border: 1px solid var(--c-rule);
  box-shadow: 0 30px 60px -20px rgba(21,21,23,.35);
  z-index: 95;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(.98);
  transform-origin: bottom left;
  transition:
    opacity var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease),
    visibility 0s linear var(--t-fast);
}
.ai-chat.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition-delay: 0s;
}

.ai-chat__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  background: var(--c-espresso);
  color: var(--c-pearl);
  border-bottom: 1px solid var(--c-gold);
}
.ai-chat__title {
  font-family: var(--f-display);
  font-size: 19px;
  font-weight: 400;
  font-style: italic;
  color: var(--c-pearl);
  letter-spacing: 0;
}
.ai-chat__sub {
  display: block;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-gold-soft);
  margin-top: 2px;
}
.ai-chat__close {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: var(--c-pearl);
  border-radius: 50%;
  transition: background var(--t-fast) var(--ease);
}
.ai-chat__close:hover { background: rgba(255,255,255,.08); }

.ai-chat__body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scroll-behavior: smooth;
  background: linear-gradient(180deg, var(--c-pearl), var(--c-ivory-warm));
}
.ai-chat__body::-webkit-scrollbar { width: 6px; }
.ai-chat__body::-webkit-scrollbar-thumb {
  background: rgba(21,21,23,.15);
  border-radius: 3px;
}

.ai-msg { max-width: 86%; }
.ai-msg p {
  font-size: 14px;
  line-height: 1.55;
  padding: 12px 16px;
  margin: 0;
}
.ai-msg--agent {
  align-self: flex-start;
}
.ai-msg--agent p {
  background: var(--c-pearl);
  color: var(--c-text);
  border: 1px solid var(--c-rule);
  border-bottom-left-radius: 0;
}
.ai-msg--user {
  align-self: flex-end;
}
.ai-msg--user p {
  background: var(--c-espresso);
  color: var(--c-pearl);
  border: 1px solid var(--c-espresso);
  border-bottom-right-radius: 0;
}

.ai-msg--typing p {
  display: inline-flex;
  gap: 5px;
  padding: 14px 18px;
}
.ai-typing { display: inline-flex; gap: 5px; align-items: center; }
.ai-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-gold);
  opacity: .35;
  animation: aiTypingDot 1.2s ease-in-out infinite;
}
.ai-typing span:nth-child(2) { animation-delay: .15s; }
.ai-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes aiTypingDot {
  0%, 100% { opacity: .35; transform: translateY(0); }
  50%      { opacity: 1;   transform: translateY(-3px); }
}

.ai-chat__questions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 22px 18px;
  border-top: 1px solid var(--c-rule);
  background: var(--c-pearl);
}
.ai-q {
  font-family: var(--f-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--c-espresso);
  background: var(--c-ivory-warm);
  border: 1px solid var(--c-rule);
  padding: 8px 14px;
  cursor: pointer;
  transition:
    background var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
}
.ai-q:hover {
  background: var(--c-espresso);
  border-color: var(--c-espresso);
  color: var(--c-gold-soft);
}

/* Manual message composer — sits at the bottom of the chat panel */
.ai-chat__composer {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 12px 14px 14px;
  background: var(--c-pearl);
  border-top: 1px solid var(--c-gold-soft);
}
.ai-chat__input {
  flex: 1;
  min-height: 40px;
  max-height: 110px;
  padding: 11px 14px;
  font-family: var(--f-body);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--c-espresso);
  background: var(--c-ivory-warm);
  border: 1px solid var(--c-rule);
  border-radius: 2px;
  resize: none;
  overflow-y: auto;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.ai-chat__input::placeholder {
  color: rgba(21,21,23,.45);
  font-style: italic;
}
.ai-chat__input:focus {
  outline: none;
  border-color: var(--c-gold);
  background: var(--c-pearl);
}
.ai-chat__send {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 16px;
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-gold-soft);
  background: var(--c-espresso);
  border: 1px solid var(--c-espresso);
  border-radius: 2px;
  cursor: pointer;
  transition:
    background var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    opacity var(--t-fast) var(--ease);
}
.ai-chat__send:hover { background: var(--c-gold); color: var(--c-pearl); border-color: var(--c-gold); }
.ai-chat__send[disabled],
.ai-chat__send.is-disabled { opacity: .45; cursor: not-allowed; }
.ai-chat__send-icon { transition: transform var(--t-fast) var(--ease); }
.ai-chat__send:hover .ai-chat__send-icon { transform: translateX(2px); }

/* -----------------------------------------------------------------
   20. BACK TO TOP — fixed bottom-RIGHT, mirrors AI fab on the same Y axis
----------------------------------------------------------------- */
.back-top {
  position: fixed;
  right: 24px;
  left: auto;
  bottom: 24px;
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  background: var(--c-espresso);
  color: var(--c-gold-soft);
  border: 1px solid var(--c-gold);
  border-radius: 50%;
  cursor: pointer;
  z-index: 90;
  box-shadow: 0 14px 30px -14px rgba(21,21,23,.45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), visibility 0s linear var(--t-fast), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.back-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; }
.back-top:hover { background: var(--c-gold); color: var(--c-pearl); }

/* -----------------------------------------------------------------
   21. QUICK VIEW MODAL
----------------------------------------------------------------- */
.qv-modal {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-fast) var(--ease), visibility 0s linear var(--t-fast);
}
.qv-modal.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.qv-modal__backdrop { position: absolute; inset: 0; background: rgba(13,13,15,.7); }
.qv-modal__inner {
  position: relative;
  background: var(--c-pearl);
  width: min(820px, 92%);
  max-height: 86vh;
  overflow: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  transform: translateY(20px);
  transition: transform var(--t-fast) var(--ease);
}
.qv-modal.is-open .qv-modal__inner { transform: translateY(0); }
.qv-modal__close {
  position: absolute;
  top: 16px; right: 16px;
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--c-espresso);
  z-index: 2;
}
.qv-modal__close:hover { background: rgba(21,21,23,.06); }
.qv-modal__media {
  position: relative;
  background: linear-gradient(140deg, var(--c-pearl), var(--c-beige));
  display: grid;
  place-items: center;
  aspect-ratio: 1/1;
  overflow: hidden;
}
.qv-modal__media svg { width: 70%; }
.qv-modal__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.qv-modal__body { padding: 50px 40px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.qv-modal__cat {
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--c-gold-deep);
}
.qv-modal__title {
  font-family: var(--f-display);
  font-size: 30px;
  color: var(--c-espresso);
  font-weight: 400;
}
.qv-modal__desc { color: var(--c-muted); font-size: 14px; line-height: 1.7; }
.qv-modal__price {
  font-size: 13px;
  letter-spacing: .14em;
  margin-top: 8px;
  border-bottom: 1px solid var(--c-rule);
  padding-bottom: 6px;
}

/* -----------------------------------------------------------------
   22. REVEAL ANIMATIONS
----------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.is-revealed,
.is-loaded .hero .reveal { opacity: 1; transform: translateY(0); }
.reveal[data-delay="1"] { transition-delay: .1s; }
.reveal[data-delay="2"] { transition-delay: .2s; }
.reveal[data-delay="3"] { transition-delay: .3s; }

/* -----------------------------------------------------------------
   23. RESPONSIVE
----------------------------------------------------------------- */

/* Hide some nav items earlier so 8 fit gracefully on mid-desktops */
@media (max-width: 1280px) {
  .nav__list { gap: clamp(16px, 1.8vw, 28px); }
  .nav__link { font-size: 11px; letter-spacing: .22em; }
  .header__cta { display: none; }
  .header__right { gap: 14px; }
}

@media (max-width: 1100px) {
  .footer__cols { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer__cols .footer__col:last-child { grid-column: 1 / -1; }
  .nav__list { gap: 16px; }
  .nav__link { font-size: 10.5px; }
}

@media (max-width: 980px) {
  /* Collapse the inline nav into the mobile menu */
  .nav { display: none; }

  /* Mobile header layout
     ──────────────────────────────────────────
     [Search] [SR/EN] ........ (logo) ........ [Hamburger]
     ──────────────────────────────────────────
     Single fixed-height row. Every cluster is absolutely positioned at
     top: 50% and pulled back by translateY(-50%), so the search icon,
     language switcher, centered logo, and hamburger ALL share the
     exact same horizontal centerline regardless of their box height. */
  .header__inner {
    position: relative;
    display: block;
    min-height: 86px;
    padding: 0 var(--gutter);
  }
  .header__left,
  .header__right { display: contents; }

  /* LEFT cluster — search icon */
  .header__search {
    position: absolute;
    left: var(--gutter);
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    height: 36px;
    margin: 0;
    padding: 0;
  }
  /* LEFT cluster — language switch (sits right of the search icon) */
  .header__left .lang-switch,
  .header__right .lang-switch {
    position: absolute;
    left: calc(var(--gutter) + 50px);
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    height: 36px;
    margin: 0;
  }
  /* RIGHT cluster — hamburger */
  .header__menu-toggle {
    position: absolute;
    right: var(--gutter);
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    margin: 0;
  }
  .header__menu-toggle.is-active span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .header__menu-toggle.is-active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* CENTER — logo pinned to the exact viewport horizontal centerline,
     same Y as the icons. +25% over the previous 48px. */
  .header__center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
  }
  .header__center .brand {
    pointer-events: auto;
    display: flex;
    align-items: center;
    line-height: 0;
  }
  .header__center .brand__logo {
    width: auto;
    height: 58px;       /* −15% over previous 69px so it doesn't crowd the mobile bar */
    max-width: 220px;
  }

  /* Mobile hides anything that would crowd the bar — account + cart move
     into the mobile menu so the top bar stays clean (search/lang/logo/menu) */
  .header__search-label { display: none; }
  .header__cta { display: none; }
  .header__right .header__auth,
  .header__right .header__cart { display: none; }
  .lang-switch { font-size: 10px; }


  .section__head--split { flex-direction: column; align-items: flex-start; gap: 18px; }

  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .gem-grid { grid-template-columns: repeat(2, 1fr); }
  .ig-grid { grid-template-columns: repeat(3, 1fr); }

  .feature-band__title { font-size: clamp(48px, 12vw, 90px); }

  .consultation__inner { grid-template-columns: 1fr; gap: 50px; }
  .consultation__visual { max-width: 480px; margin: 0 auto; width: 100%; }

  /* Footer collapses to a stacked single column */
  .footer__newsletter { grid-template-columns: 1fr; gap: 24px; }
  .footer-form__row { grid-template-columns: 1fr; gap: 22px; }
  .footer-form__submit { width: 100%; min-width: 0; }
  .footer__cols { grid-template-columns: 1fr 1fr; }
  .footer__col--brand {
    grid-column: 1 / -1;
    padding-right: 0;
    padding-bottom: 24px;
    margin-bottom: 8px;
  }
  .footer__col--brand::after {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    height: 1px;
  }
}

@media (max-width: 600px) {
  .container { padding: 0 22px; }
  /* Logo is +25% over the previous narrow-phone size (was 42px → 52px).
     Still scales down slightly relative to the wide-mobile breakpoint
     so it doesn't visually crash into the search/lang cluster. */
  .header__center .brand__logo { height: 52px; max-width: 200px; }
  /* Tighter lang-switch offset on narrow phones */
  .header__left .lang-switch,
  .header__right .lang-switch { left: calc(var(--gutter) + 44px); }
  .ig-grid { grid-template-columns: repeat(2, 1fr); }
  .footer__cols { grid-template-columns: 1fr; }
  .footer__col--brand { padding-bottom: 18px; }

  /* AI chat goes near-fullwidth on phones */
  .ai-chat {
    left: 16px;
    right: 16px;
    bottom: 82px;
    width: auto;
    max-height: calc(100vh - 140px);
  }
  .ai-fab[data-tooltip]::before { display: none; }
  .ai-fab  { left: 16px;  bottom: 18px; }
  .back-top { right: 16px; bottom: 18px; }
  .feature-band__title em { display: inline-block; }
  .qv-modal__inner { grid-template-columns: 1fr; }
  .qv-modal__media { aspect-ratio: 4/3; }
  .qv-modal__body { padding: 30px 24px; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }
  .signature-swiper__nav { left: 50%; right: auto; transform: translateX(-50%); }
}

/* -----------------------------------------------------------------
   24. PRODUCTS PAGE (proizvodi.html)
   Page intro hero, filter sidebar (desktop) / drawer (mobile),
   product topbar with sort, listing grid, chips, empty state.
----------------------------------------------------------------- */

/* Page intro */
.page-intro {
  position: relative;
  min-height: clamp(320px, 46vh, 460px);
  display: flex;
  align-items: center;
  color: var(--c-pearl);
  isolation: isolate;
  overflow: hidden;
  padding: clamp(60px, 8vw, 110px) 0;
}
.page-intro__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.page-intro__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.page-intro__bg-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(13,13,15,.55), rgba(13,13,15,.7)),
    rgba(13,13,15,.18);
}
.page-intro__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  max-width: 720px;
}
.page-intro__title {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.05;
  margin: 4px 0 18px;
}
.page-intro__rule {
  width: 56px; height: 1px;
  background: var(--c-gold);
  margin: 6px 0 22px;
  position: relative;
}
.page-intro__rule span {
  position: absolute;
  inset: 0;
  background: var(--c-gold);
}
.page-intro__lede {
  max-width: 560px;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255,255,255,.78);
  margin-bottom: 28px;
}
.page-intro__actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* Products section frame */
.products {
  padding: clamp(60px, 7vw, 100px) 0 clamp(80px, 10vw, 140px);
  background: var(--c-ivory);
}
.products__editorial {
  max-width: 720px;
  margin: 0 auto clamp(40px, 5vw, 64px);
  text-align: center;
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.55;
  color: var(--c-muted);
}

/* Layout: sidebar + main.
   minmax(0, 1fr) on the main track stops grid items from blowing the
   container wider than the viewport when content has long unbroken
   strings or overflowing children. */
.products__layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.products__main { min-width: 0; width: 100%; }

/* Mobile bar — hidden on desktop */
.products__mobile-bar { display: none; }

/* ===== Filter sidebar / drawer ===== */
.filters {
  background: transparent;
  position: sticky;
  top: calc(var(--header-h-desktop, 184px) + 16px);
  align-self: start;
  max-height: calc(100vh - var(--header-h-desktop, 184px) - 32px);
  overflow-y: auto;
  padding-right: 8px;
}
.filters__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.filters__title {
  font-family: var(--f-body);
  font-size: 11px;
  letter-spacing: .32em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--c-espresso);
}
.filters__close { display: none; color: var(--c-espresso); }
.filters__body { display: flex; flex-direction: column; gap: 6px; border: 0; padding: 0; margin: 0; }

.filter-group {
  border: 0;
  padding: 18px 0;
  margin: 0;
  border-bottom: 1px solid var(--c-rule);
}
.filter-group:first-of-type { padding-top: 0; }
.filter-group:last-of-type  { border-bottom: 0; }
.filter-group__legend {
  font-family: var(--f-body);
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--c-gold-deep);
  margin-bottom: 12px;
}
.filter-group__items {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.filter-group__items label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;            /* larger hit area without visible chrome */
  font-size: 14px;
  color: var(--c-espresso);
  cursor: pointer;
  user-select: none;
  transition: color var(--t-fast) var(--ease);
}
.filter-group__items label:hover { color: var(--c-gold-deep); }
/* Active label state — italic + gold to make the selection obvious */
.filter-group__items label:has(input:checked) {
  color: var(--c-gold-deep);
  font-weight: 500;
}
.filter-group__items input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 18px; height: 18px;
  border: 1px solid var(--c-rule);
  background: var(--c-pearl);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.filter-group__items input[type="checkbox"]:hover { border-color: var(--c-gold); }
.filter-group__items input[type="checkbox"]:checked {
  background: var(--c-espresso);
  border-color: var(--c-espresso);
}
.filter-group__items input[type="checkbox"]:checked::after {
  content: "";
  width: 5px; height: 9px;
  border: solid var(--c-gold);
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}

.filters__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--c-rule);
}
.filters__reset {
  font-family: var(--f-body);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-muted);
  background: none;
  border: 0;
  padding: 8px 0;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease);
}
.filters__reset:hover { color: var(--c-espresso); }
.filters__apply {
  display: none;          /* desktop: filters apply live */
  font-family: var(--f-body);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-gold-soft);
  background: var(--c-espresso);
  border: 1px solid var(--c-espresso);
  padding: 12px 20px;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.filters__apply:hover { background: var(--c-gold); color: var(--c-pearl); }

/* ===== Main listing area ===== */
.products__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 18px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--c-rule);
}
.products__count {
  font-family: var(--f-body);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.products__sort {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.products__sort-label {
  font-family: var(--f-body);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.products__sort-select {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--c-espresso);
  background: var(--c-pearl);
  border: 1px solid var(--c-rule);
  border-radius: 0;
  padding: 9px 36px 9px 14px;
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--c-espresso) 50%),
    linear-gradient(-45deg, transparent 50%, var(--c-espresso) 50%);
  background-position: calc(100% - 16px) 14px, calc(100% - 11px) 14px;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  transition: border-color var(--t-fast) var(--ease);
}
.products__sort-select:focus { outline: none; border-color: var(--c-gold); }

/* Active filter chips */
.products__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-body);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-espresso);
  background: var(--c-pearl);
  border: 1px solid var(--c-rule);
  padding: 7px 12px;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.filter-chip:hover { border-color: var(--c-gold); color: var(--c-gold-deep); }
.filter-chip svg { opacity: .7; transition: opacity var(--t-fast) var(--ease); }
.filter-chip:hover svg { opacity: 1; }
.filter-chip--reset {
  background: var(--c-espresso);
  color: var(--c-gold-soft);
  border-color: var(--c-espresso);
}
.filter-chip--reset:hover { background: var(--c-gold); color: var(--c-pearl); border-color: var(--c-gold); }

/* Product grid — 4 cols on desktop. Use minmax(0, 1fr) so the tracks
   never grow wider than the column to accommodate an image; that
   keeps the grid stable and matches the column count exactly. */
.products__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(28px, 2.6vw, 42px) clamp(18px, 1.6vw, 28px);
  width: 100%;
}
.product-card--list { width: 100%; min-width: 0; }
.product-card--list .product-card__media {
  aspect-ratio: 1 / 1.08;        /* slimmer than the homepage square */
  background: var(--c-ivory-warm);
}
.product-card--list .product-card__body { padding: 14px 2px 0; }
.product-card--list .product-card__title { font-size: 18px; }
.product-card--list .product-card__cat { font-size: 10px; }

/* Hover-swap — primary fades out, secondary fades in. Both share
   absolute placement and identical sizing so the swap reads as a
   smooth crossfade with a hint of zoom for premium feel. */
.product-card--list .product-card__img--primary { opacity: 1; z-index: 1; }
.product-card--list .product-card__img--hover   { opacity: 0; z-index: 2; }
.product-card--list .product-card__img {
  transition: opacity .45s var(--ease), transform .8s var(--ease);
}
.product-card--list:hover .product-card__img--primary,
.product-card--list .product-card__link:hover .product-card__img--primary { opacity: 0; }
.product-card--list:hover .product-card__img--hover,
.product-card--list .product-card__link:hover .product-card__img--hover { opacity: 1; }

/* On touch devices, hover styles never settle — keep both images
   visible at rest by skipping the swap so layout stays clean. */
@media (hover: none) {
  .product-card--list .product-card__img--hover { display: none; }
}

/* Empty state */
.products__empty {
  text-align: center;
  padding: 60px 20px;
  border: 1px solid var(--c-rule);
  background: var(--c-pearl);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.products__empty-title {
  font-family: var(--f-display);
  font-size: 22px;
  color: var(--c-espresso);
}
.products__empty-sub {
  color: var(--c-muted);
  font-size: 14px;
  margin-bottom: 8px;
}

/* Load more */
.products__more {
  display: flex;
  justify-content: center;
  margin-top: clamp(40px, 5vw, 64px);
}

/* ===== Wide desktop / laptop ===== */
@media (max-width: 1399px) {
  .products__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ===== Smaller desktop / large tablet ===== */
@media (max-width: 1199px) {
  .products__layout { grid-template-columns: 220px minmax(0, 1fr); gap: 32px; }
  .products__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ===== Mobile (≤ 980px) — collapse sidebar into a drawer ===== */
@media (max-width: 980px) {
  .products__layout { grid-template-columns: 1fr; gap: 0; }

  /* Show the mobile bar (filter button + sort) */
  .products__mobile-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
  }
  .products__mobile-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 44px;
    font-family: var(--f-body);
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--c-espresso);
    background: var(--c-pearl);
    border: 1px solid var(--c-rule);
    cursor: pointer;
    transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  }
  .products__mobile-btn:hover { border-color: var(--c-gold); color: var(--c-gold-deep); }
  .products__mobile-count[hidden] { display: none; }
  .products__mobile-count { color: var(--c-gold-deep); }
  .products__mobile-sort {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .products__mobile-sort > span {
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--c-muted);
  }

  /* Hide desktop sort + count text doubles where redundant — keep count */
  .products__topbar { display: none; }

  /* Filters become a slide-in drawer from the left */
  .filters {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(86%, 380px);
    max-height: 100vh;
    background: var(--c-ivory);
    border-right: 1px solid var(--c-rule);
    z-index: 130;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform .45s var(--ease);
    padding: 22px 24px 24px;
  }
  .filters.is-open { transform: translateX(0); }
  .filters__head {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--c-rule);
    margin-bottom: 6px;
  }
  .filters__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: 50%;
  }
  .filters__close:hover { background: rgba(21,21,23,.04); }
  .filters__apply { display: inline-flex; align-items: center; justify-content: center; }

  /* Drawer overlay */
  .filters-overlay {
    position: fixed;
    inset: 0;
    background: rgba(13,13,15,.55);
    z-index: 125;
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s var(--ease), visibility 0s linear .35s;
  }
  .filters-overlay.is-visible {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }

  .products__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
}

/* ===== Tablet portrait ===== */
@media (max-width: 767px) {
  .products__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 18px; }
}

/* ===== Narrow phones ===== */
@media (max-width: 520px) {
  .products__grid { grid-template-columns: minmax(0, 1fr); }
  .products__editorial { font-size: 16px; }
  .page-intro__inner { align-items: flex-start; }
  .page-intro__title { font-size: clamp(36px, 9vw, 56px); }
  .products__mobile-bar { flex-direction: column; align-items: stretch; gap: 10px; }
  .products__mobile-sort { justify-content: space-between; }
  .products__mobile-sort .products__sort-select { flex: 1; }
}


/* -----------------------------------------------------------------
   25. PRODUCT DETAIL PAGE (proizvod.html)
   Breadcrumb, two-column gallery + summary, options, trust strip,
   accordions, brand-story band, related-products carousels.
----------------------------------------------------------------- */

/* Breadcrumbs */
.crumbs {
  background: var(--c-ivory);
  padding: 22px 0 6px;
  border-bottom: 1px solid var(--c-rule);
}
.crumbs__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.crumbs__inner a { color: var(--c-muted); transition: color var(--t-fast) var(--ease); }
.crumbs__inner a:hover { color: var(--c-espresso); }
.crumbs__current { color: var(--c-espresso); }

/* Section frame */
.product-detail {
  background: var(--c-ivory);
  padding: clamp(40px, 6vw, 80px) 0 clamp(60px, 7vw, 100px);
}
.product-detail__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}

/* ===== Gallery ===== */
.product-gallery {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.product-gallery__thumbs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.product-gallery__thumb {
  display: block;
  width: 84px;
  height: 84px;
  padding: 0;
  background: var(--c-ivory-warm);
  border: 1px solid var(--c-rule);
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
  opacity: .75;
}
.product-gallery__thumb img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}
.product-gallery__thumb:hover { opacity: 1; border-color: var(--c-gold-soft); }
.product-gallery__thumb.is-active {
  border-color: var(--c-gold);
  opacity: 1;
}

.product-gallery__stage { position: relative; }
.product-gallery__main {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 4.5;
  background: var(--c-ivory-warm);
  border: 1px solid var(--c-rule);
  overflow: hidden;
  cursor: zoom-in;
}
.product-gallery__main img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  transition: transform .8s var(--ease);
}
.product-gallery__main:hover img { transform: scale(1.02); }
.product-gallery__zoom {
  position: absolute;
  top: 14px; right: 14px;
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c-pearl);
  color: var(--c-espresso);
  border: 1px solid var(--c-rule);
  box-shadow: 0 8px 18px -10px rgba(21,21,23,.35);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.product-gallery__main:hover .product-gallery__zoom {
  background: var(--c-espresso);
  color: var(--c-gold-soft);
  border-color: var(--c-espresso);
}
.product-gallery__hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
}

/* ===== Summary ===== */
.product-detail__summary {
  position: sticky;
  top: calc(var(--header-h-desktop, 184px) + 16px);
  align-self: start;
}
.product-summary__eyebrow {
  font-family: var(--f-body);
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--c-gold-deep);
  margin: 0 0 12px;
}
.product-summary__title {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(34px, 3.6vw, 52px);
  line-height: 1.1;
  color: var(--c-espresso);
  margin: 0 0 22px;
}
.product-summary__price-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 0;
  border-top: 1px solid var(--c-rule);
  border-bottom: 1px solid var(--c-rule);
  margin-bottom: 24px;
}
.product-summary__price {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 20px;
  color: var(--c-espresso);
}
.product-summary__price-note {
  font-size: 12px;
  color: var(--c-muted);
  letter-spacing: .02em;
  line-height: 1.55;
}
.product-summary__desc {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--c-text);
  margin-bottom: 30px;
}

/* Option groups */
.product-options {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-bottom: 30px;
}
.product-option__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}
.product-option__label {
  font-family: var(--f-body);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--c-espresso);
}
.product-option__hint {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-gold-deep);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: color var(--t-fast) var(--ease);
}
.product-option__hint:hover { color: var(--c-gold); }
.option-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.option-pill {
  font-family: var(--f-body);
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--c-espresso);
  background: var(--c-pearl);
  border: 1px solid var(--c-rule);
  padding: 10px 16px;
  cursor: pointer;
  min-width: 50px;
  transition:
    background var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
}
.option-pill:hover { border-color: var(--c-gold); color: var(--c-gold-deep); }
.option-pill.is-active {
  background: var(--c-espresso);
  border-color: var(--c-espresso);
  color: var(--c-gold-soft);
}

/* CTA + quick links */
.product-summary__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 30px;
}
.btn--full { width: 100%; text-align: center; justify-content: center; display: inline-flex; align-items: center; }
.product-summary__quick-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--c-muted);
}
.product-summary__quick-links a {
  color: var(--c-espresso);
  border-bottom: 1px solid var(--c-rule);
  padding-bottom: 1px;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.product-summary__quick-links a:hover { color: var(--c-gold-deep); border-color: var(--c-gold); }

/* Trust strip */
.trust-strip {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--c-rule);
  list-style: none;
  margin: 0;
}
.trust-strip li {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 4px 12px;
  border-right: 1px solid var(--c-rule);
}
.trust-strip li:last-child { border-right: 0; }
.trust-strip__icon {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  color: var(--c-gold-deep);
}
.trust-strip__label {
  font-family: var(--f-body);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-espresso);
  line-height: 1.4;
}

/* ===== Product info accordions ===== */
.product-info {
  background: var(--c-ivory);
  padding: clamp(40px, 5vw, 80px) 0;
  border-top: 1px solid var(--c-rule);
}
.product-info__inner {
  max-width: 920px;
  margin: 0 auto;
}
.accordion {
  border-bottom: 1px solid var(--c-rule);
}
.accordion:first-of-type { border-top: 1px solid var(--c-rule); }
.accordion__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0;
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2vw, 26px);
  color: var(--c-espresso);
  background: none;
  cursor: pointer;
  text-align: left;
}
.accordion__btn:hover { color: var(--c-gold-deep); }
.accordion__icon {
  position: relative;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}
.accordion__icon::before,
.accordion__icon::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform .35s var(--ease), opacity .35s var(--ease);
}
.accordion__icon::before {
  top: 50%; left: 0;
  width: 100%; height: 1px;
  transform: translateY(-50%);
}
.accordion__icon::after {
  top: 0; left: 50%;
  width: 1px; height: 100%;
  transform: translateX(-50%);
}
.accordion.is-open .accordion__icon::after { opacity: 0; transform: translateX(-50%) rotate(90deg); }
.accordion__panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height .45s var(--ease);
}
.accordion__panel p {
  padding: 0 0 22px;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--c-text);
  max-width: 760px;
}

/* ===== Brand story band ===== */
.brand-story {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--c-pearl);
  padding: clamp(80px, 10vw, 140px) 0;
}
.brand-story__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.brand-story__bg img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
.brand-story__overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(13,13,15,.6), rgba(13,13,15,.78)),
    rgba(13,13,15,.18);
}
.brand-story__inner {
  max-width: 720px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  position: relative;
  z-index: 1;
}
.brand-story__title {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.1;
  margin: 6px 0 22px;
}
.brand-story__text {
  font-size: 15.5px;
  line-height: 1.85;
  color: rgba(255,255,255,.82);
  margin-bottom: 30px;
  max-width: 600px;
}

/* ===== Related products ===== */
.related {
  background: var(--c-ivory);
  padding: clamp(60px, 7vw, 100px) 0;
}
.related--alt {
  background: var(--c-ivory-warm);
}
.related__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: clamp(28px, 3.5vw, 48px);
}
.related__title {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(28px, 3vw, 40px);
  color: var(--c-espresso);
  margin: 4px 0 0;
}
.related__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(24px, 2.4vw, 36px) clamp(18px, 1.6vw, 28px);
  width: 100%;
}

/* ===== Fancybox tweaks — subtle ivory frame, gold accents ===== */
.fancybox__container { --fancybox-bg: rgba(13,13,15,.92); }
.fancybox__caption { font-family: var(--f-body); letter-spacing: .14em; text-transform: uppercase; font-size: 11px; }

/* ===== Tablet ===== */
@media (max-width: 1199px) {
  .product-detail__layout { grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr); gap: 48px; }
  .product-detail__summary { position: static; }
  .related__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ===== Mobile ===== */
@media (max-width: 991px) {
  .product-detail__layout { grid-template-columns: minmax(0, 1fr); }
  .product-gallery {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Move thumbnails BELOW the main stage on mobile, horizontal row */
  .product-gallery__stage { order: 1; }
  .product-gallery__thumbs {
    order: 2;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 12px;
  }
  .product-gallery__thumb { width: 64px; height: 64px; }
  .related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
}

@media (max-width: 600px) {
  .crumbs { font-size: 10px; }
  .product-summary__title { font-size: clamp(28px, 8vw, 40px); }
  .trust-strip { flex-wrap: wrap; gap: 14px 0; padding: 18px 0 0; }
  .trust-strip li {
    flex: 1 1 50%;
    border-right: 0;
    padding: 8px 6px;
  }
  .product-options { gap: 18px; }
}

@media (max-width: 520px) {
  .related__grid { grid-template-columns: minmax(0, 1fr); }
}


/* -----------------------------------------------------------------
   26. ABOUT PAGE (O NAMA)
   Page-specific styles for o-nama.html. Reuses .page-intro, .feature-band,
   .section__title, .eyebrow, .rule, .btn etc. Adds a centered hero variant,
   a two-column intro storytelling section, a 4-card values grid, a
   3-step process timeline and a closing CTA panel.
----------------------------------------------------------------- */

/* ---- Centered hero variant for the About inner-page hero ---- */
.page-intro--about {
  min-height: clamp(420px, 70vh, 640px);
  text-align: center;
  align-items: center;
  justify-content: center;
}
.page-intro--about .page-intro__bg-overlay {
  background:
    linear-gradient(180deg, rgba(13,13,15,.55) 0%, rgba(13,13,15,.78) 100%),
    radial-gradient(ellipse at 50% 50%, rgba(13,13,15,.05), rgba(13,13,15,.4));
}
.page-intro__inner--center {
  align-items: center;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.page-intro__inner--center .page-intro__rule { margin-left: auto; margin-right: auto; }
.page-intro__inner--center .page-intro__lede {
  margin-left: auto;
  margin-right: auto;
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(17px, 1.6vw, 21px);
  color: rgba(255,255,255,.86);
}

/* ---- Intro storytelling (two-column) ---- */
.about-intro {
  padding: clamp(80px, 10vw, 140px) 0;
  background: var(--c-ivory);
}
.about-intro__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 7vw, 100px);
  align-items: center;
}
.about-intro__visual {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: visible;
}
.about-intro__photo {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  box-shadow: 0 30px 60px -28px rgba(21,21,23,.32);
  border-radius: var(--radius);
  isolation: isolate;
}
.about-intro__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(21,21,23,0) 60%, rgba(21,21,23,.18) 100%);
  pointer-events: none;
  z-index: 1;
}
.about-intro__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 1.1s var(--ease);
}
.about-intro__visual:hover .about-intro__photo img { transform: scale(1.04); }
.about-intro__mark {
  position: absolute;
  bottom: -22px;
  right: -18px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 22px;
  background: var(--c-pearl);
  font-family: var(--f-display);
  font-style: italic;
  font-size: 18px;
  letter-spacing: .25em;
  color: var(--c-gold-deep);
  border: 1px solid var(--c-rule);
  box-shadow: 0 14px 30px -14px rgba(21,21,23,.25);
}
.about-intro__content { max-width: 560px; }
.about-intro__content .section__title { display: block; margin-top: 4px; }
.about-intro__content .section__title em {
  display: block;
  font-style: italic;
  font-weight: 300;
  color: var(--c-gold-deep);
  margin-top: 6px;
}
.about-intro__text {
  margin-top: 18px;
  font-size: 15px;
  line-height: 1.85;
  color: var(--c-text);
}
.about-intro__content .btn-pill { margin-top: 32px; }

/* ---- Brand values ---- */
.values {
  padding: clamp(80px, 10vw, 140px) 0;
  background: var(--c-ivory-warm);
  position: relative;
}
.values__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 28px);
  margin-top: clamp(24px, 4vw, 40px);
}
.value-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(28px, 3vw, 40px) clamp(24px, 2.4vw, 32px);
  background: var(--c-pearl);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius);
  transition:
    transform var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease);
  overflow: hidden;
  isolation: isolate;
}
.value-card::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: var(--c-gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .6s var(--ease);
  z-index: 1;
}
.value-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 50px -22px rgba(21,21,23,.28);
  border-color: rgba(161,37,41,.4);
}
.value-card:hover::before { transform: scaleX(1); }

.value-card__num {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 300;
  font-size: 30px;
  color: var(--c-gold);
  letter-spacing: .04em;
  line-height: 1;
}
.value-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--c-rule);
  color: var(--c-gold-deep);
  background: var(--c-ivory);
  transition:
    color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease);
}
.value-card:hover .value-card__icon {
  color: var(--c-pearl);
  background: var(--c-espresso);
  border-color: var(--c-espresso);
}
.value-card__title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.25;
  color: var(--c-espresso);
  margin-top: 4px;
}
.value-card__text {
  font-size: 14px;
  line-height: 1.75;
  color: var(--c-muted);
}

/* ---- Visual statement band tweaks (extends .feature-band) ---- */
.about-statement { padding: clamp(120px, 16vw, 200px) 0; }
.about-statement__content { max-width: 820px; margin-left: auto; margin-right: auto; text-align: center; }
.about-statement__content .feature-band__title { letter-spacing: -0.005em; }
.about-statement__content .feature-band__lede { margin-left: auto; margin-right: auto; }
.about-statement__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 12px;
}

/* ---- Process / Kako biramo kolekciju ---- */
.process {
  padding: clamp(80px, 10vw, 140px) 0;
  background: var(--c-ivory);
}
.process__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 44px);
  counter-reset: zt-step;
  position: relative;
}
.process-step {
  position: relative;
  padding: clamp(28px, 3vw, 40px) clamp(20px, 2.2vw, 28px);
  background: var(--c-pearl);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius);
  transition:
    transform var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.process-step:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 50px -22px rgba(21,21,23,.28);
  border-color: rgba(161,37,41,.4);
}
.process-step__head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.process-step__num {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 300;
  font-size: 36px;
  line-height: 1;
  color: var(--c-gold);
  letter-spacing: .04em;
}
.process-step__line {
  flex: 1 1 auto;
  height: 1px;
  background: var(--c-rule);
  position: relative;
}
.process-step__line::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-gold);
  transform: translateY(-50%);
}
.process-step__line--last::after { background: var(--c-espresso); }
.process-step__title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.25;
  color: var(--c-espresso);
}
.process-step__text {
  font-size: 14px;
  line-height: 1.8;
  color: var(--c-muted);
}

/* ---- Closing CTA ---- */
.about-cta {
  padding: clamp(90px, 12vw, 160px) 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(161,37,41,.08), transparent 60%),
    var(--c-pearl);
  position: relative;
  text-align: center;
}
.about-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 760px;
  margin: 0 auto;
}
.about-cta__title {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(34px, 5vw, 60px);
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: var(--c-espresso);
  margin: 6px 0 0;
}
.about-cta__title em {
  font-style: italic;
  color: var(--c-gold-deep);
  font-weight: 300;
}
.about-cta__inner .rule { margin: 22px auto; }
.about-cta__lede {
  font-size: 16px;
  line-height: 1.85;
  color: var(--c-muted);
  margin-top: 14px;
  max-width: 560px;
}
.about-cta__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 32px;
}

/* ---- Responsive (About page) ---- */
@media (max-width: 1024px) {
  .values__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process__grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .process-step__line { display: none; }
}
@media (max-width: 820px) {
  .about-intro__inner { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .about-intro__visual { aspect-ratio: 4 / 5; max-width: 520px; margin: 0 auto; }
  .about-intro__mark { bottom: -16px; right: 0; padding: 10px 16px; font-size: 16px; }
  .about-intro__content { max-width: none; }
  .page-intro--about { min-height: clamp(380px, 60vh, 520px); }
  .about-statement { padding: clamp(90px, 14vw, 140px) 0; }
}
@media (max-width: 600px) {
  .values__grid { grid-template-columns: minmax(0, 1fr); }
  .value-card { padding: 28px 24px; }
  .value-card__num { font-size: 26px; }
  .about-cta__title { font-size: clamp(28px, 8vw, 40px); }
  .about-cta__actions .btn { width: 100%; }
  .about-statement__actions .btn { width: 100%; }
}

/* -----------------------------------------------------------------
   27. CONTACT PAGE (KONTAKT)
   Page-specific styles for kontakt.html. Reuses .page-intro--about,
   .section__title, .eyebrow, .rule, .btn*, .accordion, .about-cta etc.
   Adds: contact info cards, contact form fields, map placeholder block.
----------------------------------------------------------------- */

/* ---- Inner hero variant for the Contact page ---- */
.page-intro--contact {
  min-height: clamp(420px, 65vh, 600px);
}
.page-intro--contact .page-intro__bg-overlay {
  background:
    linear-gradient(180deg, rgba(13,13,15,.55) 0%, rgba(13,13,15,.78) 100%),
    radial-gradient(ellipse at 50% 50%, rgba(13,13,15,.05), rgba(13,13,15,.4));
}

/* ---- Contact intro (centered editorial block) ---- */
.contact-intro {
  padding: clamp(80px, 10vw, 130px) 0 clamp(40px, 5vw, 70px);
}
.contact-intro__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}
.contact-intro__inner .rule { margin: 22px auto 0; }
.contact-intro__text {
  margin-top: 22px;
  font-size: 16px;
  line-height: 1.85;
  color: var(--c-muted);
  max-width: 620px;
}

/* ---- Contact split (info cards left / form right) ---- */
.contact-split {
  padding: clamp(40px, 6vw, 80px) 0 clamp(80px, 10vw, 140px);
  background: var(--c-ivory);
  scroll-margin-top: 120px;
}
.contact-split__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}
.contact-info { max-width: 520px; }
.contact-info__title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.1;
  color: var(--c-espresso);
  margin: 4px 0 0;
}
.contact-info__lede {
  margin-top: 22px;
  font-size: 15px;
  line-height: 1.85;
  color: var(--c-muted);
}
.contact-info__hours {
  margin-top: 28px;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-gold-deep);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.contact-info__hours span:first-child { color: var(--c-gold); font-size: 22px; line-height: 0; }

/* Contact info cards */
.contact-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 28px;
}
.contact-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 22px 22px 24px;
  background: var(--c-pearl);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius);
  transition:
    transform var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.contact-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--c-gold);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform .5s var(--ease);
}
.contact-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -22px rgba(21,21,23,.25);
  border-color: rgba(161,37,41,.4);
}
.contact-card:hover::before { transform: scaleY(1); }
.contact-card__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--c-rule);
  color: var(--c-gold-deep);
  background: var(--c-ivory);
  transition:
    color var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease);
}
.contact-card:hover .contact-card__icon {
  color: var(--c-pearl);
  background: var(--c-espresso);
  border-color: var(--c-espresso);
}
.contact-card__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.contact-card__label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--c-gold-deep);
}
.contact-card__text {
  font-size: 13px;
  line-height: 1.65;
  color: var(--c-muted);
  margin-top: 2px;
}
.contact-card__value {
  margin-top: 8px;
  font-family: var(--f-display);
  font-style: italic;
  font-size: 18px;
  color: var(--c-espresso);
  word-break: break-word;
  transition: color var(--t-fast) var(--ease);
}
a.contact-card__value:hover { color: var(--c-gold-deep); }

/* ---- Contact form ---- */
.contact-form-wrap {
  background: var(--c-pearl);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius);
  padding: clamp(28px, 4vw, 48px);
  box-shadow: 0 30px 60px -36px rgba(21,21,23,.22);
}
.contact-form-wrap__title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(26px, 3.2vw, 36px);
  line-height: 1.1;
  color: var(--c-espresso);
  margin: 4px 0 0;
}
.contact-form { margin-top: 24px; display: flex; flex-direction: column; gap: 18px; }
.contact-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.contact-form__field { display: flex; flex-direction: column; gap: 8px; }
.contact-form__field--full { width: 100%; }
.contact-form__label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form select,
.contact-form textarea {
  width: 100%;
  font: inherit;
  font-size: 15px;
  line-height: 1.5;
  color: var(--c-espresso);
  background: var(--c-ivory);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius);
  padding: 14px 16px;
  outline: none;
  transition:
    border-color var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease);
  appearance: none;
  -webkit-appearance: none;
}
.contact-form textarea { resize: vertical; min-height: 140px; }
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: rgba(104,108,112,.6); }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: var(--c-gold);
  background: var(--c-pearl);
  box-shadow: 0 0 0 3px rgba(161,37,41,.18);
}
.contact-form__select-wrap { position: relative; }
.contact-form__select-wrap select {
  padding-right: 42px;
  cursor: pointer;
}
.contact-form__select-caret {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--c-muted);
  pointer-events: none;
}
.contact-form__check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--c-muted);
  cursor: pointer;
  margin-top: 2px;
}
.contact-form__check input[type="checkbox"] {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  accent-color: var(--c-gold-deep);
  margin-top: 2px;
  cursor: pointer;
}
.contact-form__check a {
  color: var(--c-espresso);
  border-bottom: 1px solid var(--c-rule);
  padding-bottom: 1px;
}
.contact-form__check a:hover { color: var(--c-gold-deep); border-color: var(--c-gold); }
.contact-form__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 22px;
  margin-top: 6px;
}
.contact-form__note {
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.contact-form__success {
  display: none;
  margin-top: 6px;
  padding: 14px 16px;
  background: rgba(161,37,41,.14);
  border: 1px solid rgba(161,37,41,.4);
  border-radius: var(--radius);
  color: var(--c-espresso);
  font-size: 14px;
  line-height: 1.5;
}
.contact-form__success.is-visible { display: block; }

/* ---- Map / Lokacija ---- */
.map-band {
  padding: clamp(80px, 10vw, 130px) 0;
  background: var(--c-ivory-warm);
}
.map-block {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--c-espresso);
  box-shadow: 0 30px 60px -36px rgba(21,21,23,.4);
  isolation: isolate;
}
.map-block__visual {
  position: relative;
  aspect-ratio: 16 / 7;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(161,37,41,.12), transparent 60%),
    radial-gradient(ellipse at 80% 80%, rgba(161,37,41,.08), transparent 60%),
    var(--c-espresso);
  overflow: hidden;
}
.map-block__pattern {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(161,37,41,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(161,37,41,.07) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: -1px -1px;
  mask-image: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 80%);
}
.map-block__pin {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 62px; height: 62px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(161,37,41,.16);
  color: var(--c-gold-soft);
  border: 1px solid rgba(161,37,41,.4);
  animation: zt-pin-pulse 2.4s ease-in-out infinite;
}
@keyframes zt-pin-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(161,37,41,.35); }
  50%      { box-shadow: 0 0 0 18px rgba(161,37,41,0); }
}
.map-block__caption {
  padding: 22px clamp(20px, 3vw, 36px) 26px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: rgba(13,13,15,.92);
  color: var(--c-pearl);
  text-align: center;
}
.map-block__city {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 20px;
  color: var(--c-gold-soft);
  letter-spacing: .04em;
}
.map-block__note {
  font-size: 13px;
  color: rgba(255,255,255,.65);
  letter-spacing: .04em;
}

/* ---- FAQ section (uses the existing .accordion component) ---- */
.faq { padding: clamp(80px, 10vw, 140px) 0; }
.faq__list {
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ---- Responsive (Contact page) ---- */
@media (max-width: 1024px) {
  .contact-split__inner { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .contact-info { max-width: none; }
}
@media (max-width: 720px) {
  .contact-cards { grid-template-columns: minmax(0, 1fr); }
  .contact-form__row { grid-template-columns: minmax(0, 1fr); }
  .map-block__visual { aspect-ratio: 4 / 3; }
}
@media (max-width: 600px) {
  .contact-form-wrap { padding: 24px 20px; }
  .contact-form__actions .btn { width: 100%; text-align: center; justify-content: center; }
  .contact-form__note { width: 100%; text-align: center; }
}

/* -----------------------------------------------------------------
   28. CART (KORPA)
   Front-end only (localStorage). Markup for the mini-cart panel,
   backdrop and toast is injected by assets/js/cart.js — these
   styles also drive korpa.html and porudzbine.html.
----------------------------------------------------------------- */

/* ---- Navbar cart button + badge ---- */
.header__cart {
  position: relative;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}
.header__cart .cart-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--c-gold);
  color: var(--c-pearl);
  border-radius: 100px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1;
  box-shadow: 0 4px 10px -3px rgba(161,37,41,.5);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.cart-badge[hidden] { display: none; }
.cart-badge.is-bumped {
  animation: cart-badge-bump .55s var(--ease);
}
@keyframes cart-badge-bump {
  0%   { transform: scale(.6); opacity: 0; }
  40%  { transform: scale(1.25); opacity: 1; }
  70%  { transform: scale(.92); }
  100% { transform: scale(1); }
}
.header__cart.has-items svg {
  animation: cart-icon-glow 2.6s ease-in-out infinite;
}
@keyframes cart-icon-glow {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1px); }
}

/* ---- Mini-cart backdrop + panel ---- */
.cart-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(13,13,15,.5);
  z-index: 1100;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s var(--ease);
}
.cart-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}
.mini-cart {
  position: fixed;
  top: 0;
  right: 0;
  height: 100dvh;
  height: 100vh;
  width: min(420px, 92vw);
  background: var(--c-pearl);
  z-index: 1110;
  display: flex;
  flex-direction: column;
  box-shadow: -30px 0 60px -30px rgba(21,21,23,.4);
  transform: translateX(100%);
  transition: transform .45s cubic-bezier(.7,0,.3,1);
  visibility: hidden;
}
.mini-cart.is-open {
  transform: translateX(0);
  visibility: visible;
}
body.mini-cart-open { overflow: hidden; }

.mini-cart__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 26px 28px 22px;
  border-bottom: 1px solid var(--c-rule);
  flex: 0 0 auto;
}
.mini-cart__title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.1;
  color: var(--c-espresso);
}
.mini-cart__sub {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-gold-deep);
}
.mini-cart__close {
  background: transparent;
  border: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--c-espresso);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.mini-cart__close:hover { background: var(--c-ivory); color: var(--c-gold-deep); }

.mini-cart__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 18px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Empty state inside mini-cart */
.mini-cart__empty {
  margin: auto;
  padding: 28px 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.mini-cart__empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 78px; height: 78px;
  border-radius: 50%;
  border: 1px solid var(--c-rule);
  color: var(--c-gold-deep);
  background: var(--c-ivory);
  margin-bottom: 6px;
  animation: cart-empty-pulse 3s ease-in-out infinite;
}
@keyframes cart-empty-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(161,37,41,.18); }
  50%      { box-shadow: 0 0 0 12px rgba(161,37,41,0); }
}
.mini-cart__empty h4 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 22px;
  color: var(--c-espresso);
}
.mini-cart__empty p {
  font-size: 14px;
  color: var(--c-muted);
  max-width: 280px;
  line-height: 1.65;
  margin-bottom: 8px;
}

/* Mini-cart line item */
.mini-line {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid var(--c-rule);
}
.mini-line:last-child { border-bottom: 0; }
.mini-line__media {
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--c-ivory);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius);
  overflow: hidden;
}
.mini-line__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mini-line__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mini-line__title {
  font-family: var(--f-display);
  font-size: 17px;
  font-weight: 400;
  color: var(--c-espresso);
  line-height: 1.2;
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
.mini-line__title:hover { color: var(--c-gold-deep); }
.mini-line__cat {
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.mini-line__price {
  font-size: 13px;
  color: var(--c-text);
  margin-top: 2px;
}
.mini-line__qty {
  display: inline-flex;
  align-items: center;
  margin-top: 6px;
  border: 1px solid var(--c-rule);
  border-radius: 100px;
  overflow: hidden;
  width: max-content;
}
.mini-line__qty button {
  width: 28px;
  height: 28px;
  background: transparent;
  border: 0;
  color: var(--c-espresso);
  font-size: 16px;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.mini-line__qty button:hover { background: var(--c-ivory); color: var(--c-gold-deep); }
.mini-line__qty span {
  min-width: 28px;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .04em;
}
.mini-line__remove {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid transparent;
  color: var(--c-muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  align-self: flex-start;
}
.mini-line__remove:hover {
  color: var(--c-espresso);
  background: var(--c-ivory);
  border-color: var(--c-rule);
}

/* Mini-cart footer */
.mini-cart__foot {
  flex: 0 0 auto;
  padding: 18px 24px 24px;
  border-top: 1px solid var(--c-rule);
  background: var(--c-ivory);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mini-cart__totals {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.mini-cart__totals strong {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  color: var(--c-espresso);
  letter-spacing: 0;
  text-transform: none;
}
.mini-cart__note {
  font-size: 12px;
  line-height: 1.55;
  color: var(--c-muted);
  background: var(--c-pearl);
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--c-rule);
}
.mini-cart__actions { display: flex; flex-direction: column; gap: 10px; }
.mini-cart__actions .btn { width: 100%; padding: 14px 22px; font-size: 11px; }

/* ---- Toast feedback ---- */
.cart-toast {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--c-pearl);
  border: 1px solid var(--c-rule);
  border-left: 3px solid var(--c-gold);
  border-radius: var(--radius);
  padding: 14px 18px;
  min-width: 280px;
  max-width: min(360px, calc(100vw - 32px));
  box-shadow: 0 20px 40px -20px rgba(21,21,23,.35);
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
  pointer-events: none;
}
.cart-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.cart-toast[hidden] { display: none; }
.cart-toast__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--c-gold);
  color: var(--c-pearl);
  flex: 0 0 auto;
}
.cart-toast__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.cart-toast__body strong {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-espresso);
}
.cart-toast__body span {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 15px;
  color: var(--c-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cart-toast__actions { flex: 0 0 auto; }
.cart-toast__link {
  background: transparent;
  border: 0;
  color: var(--c-gold-deep);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 4px 6px;
  border-bottom: 1px solid var(--c-gold);
  transition: color var(--t-fast) var(--ease);
}
.cart-toast__link:hover { color: var(--c-espresso); }

/* ---- Add-to-cart button on product cards ---- */
.add-to-cart-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 18px;
  background: transparent;
  color: var(--c-espresso);
  border: 1px solid var(--c-espresso);
  border-radius: 100px;
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease);
  white-space: nowrap;
}
.add-to-cart-btn:hover {
  background: var(--c-espresso);
  color: var(--c-pearl);
  border-color: var(--c-espresso);
}
.add-to-cart-btn::after {
  content: "+";
  font-size: 14px;
  font-weight: 400;
  margin-left: 2px;
  opacity: .7;
}
.add-to-cart-btn.is-bumped { animation: cart-btn-bump .5s var(--ease); }
@keyframes cart-btn-bump {
  0%   { transform: scale(1); }
  40%  { transform: scale(.94); }
  100% { transform: scale(1); }
}
/* Inside swiper/product-cards: anchor below the product body */
.product-card .add-to-cart-btn {
  align-self: stretch;
  margin: 14px 16px 16px;
}
.product-card--mini .add-to-cart-btn {
  margin: 12px auto 14px;
  display: flex;
  width: max-content;
  font-size: 10px;
  padding: 8px 16px;
}

/* On product detail page, place add-to-cart prominently (gold) */
.product-summary .add-to-cart-btn,
.product-summary__cta .add-to-cart-btn {
  background: var(--c-espresso);
  color: var(--c-pearl);
  border-color: var(--c-espresso);
  border-radius: var(--radius);
  padding: 16px 36px;
  letter-spacing: .22em;
  font-size: 12px;
  margin: 0;
}
.product-summary .add-to-cart-btn:hover {
  background: var(--c-gold);
  border-color: var(--c-gold);
  color: var(--c-pearl);
}

/* =================== KORPA PAGE =================== */
.cart-page {
  padding: clamp(60px, 8vw, 110px) 0 clamp(80px, 10vw, 140px);
  background: var(--c-ivory);
}
.cart-page__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
}
.cart-items {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cart-items__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.cart-items__head h2 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(28px, 3.2vw, 36px);
  color: var(--c-espresso);
}
.cart-items__clear {
  background: transparent;
  border: 0;
  color: var(--c-muted);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  cursor: pointer;
  border-bottom: 1px solid transparent;
  padding: 4px 0;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.cart-items__clear:hover { color: var(--c-espresso); border-color: var(--c-rule); }
.cart-items__clear[data-confirm="yes"] { color: #a23a3a; border-color: #a23a3a; }

.cart-line {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 18px;
  padding: 18px;
  background: var(--c-pearl);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius);
}
.cart-line__media {
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--c-ivory);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius);
  overflow: hidden;
}
.cart-line__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cart-line__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.cart-line__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.cart-line__title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(18px, 2vw, 22px);
  color: var(--c-espresso);
  text-decoration: none;
  line-height: 1.2;
  transition: color var(--t-fast) var(--ease);
}
.cart-line__title:hover { color: var(--c-gold-deep); }
.cart-line__remove {
  background: transparent;
  border: 1px solid var(--c-rule);
  width: 32px; height: 32px;
  border-radius: 50%;
  cursor: pointer;
  color: var(--c-muted);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.cart-line__remove:hover { color: var(--c-espresso); background: var(--c-ivory); border-color: var(--c-rule); }
.cart-line__cat {
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.cart-line__price {
  font-size: 14px;
  color: var(--c-text);
}
.cart-line__controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  flex-wrap: wrap;
  gap: 10px;
}
.cart-line__subtotal {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 18px;
  color: var(--c-espresso);
}
.qty-control {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--c-rule);
  border-radius: 100px;
  overflow: hidden;
}
.qty-control button {
  width: 34px;
  height: 34px;
  background: transparent;
  border: 0;
  color: var(--c-espresso);
  font-size: 16px;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.qty-control button:hover { background: var(--c-ivory); color: var(--c-gold-deep); }
.qty-control span {
  min-width: 32px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
}

/* Cart summary */
.cart-summary {
  background: var(--c-pearl);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius);
  padding: clamp(24px, 3vw, 36px);
  position: sticky;
  top: 120px;
}
.cart-summary h3 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 24px;
  color: var(--c-espresso);
  margin-bottom: 18px;
}
.cart-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--c-rule);
  font-size: 14px;
  color: var(--c-text);
}
.cart-summary__row:last-of-type { border-bottom: 0; }
.cart-summary__row--total {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 22px;
  color: var(--c-espresso);
  padding-top: 18px;
  margin-top: 6px;
  border-top: 1px solid var(--c-rule);
}
.cart-summary__note {
  margin-top: 8px;
  padding: 12px 14px;
  background: rgba(161,37,41,.1);
  border: 1px solid rgba(161,37,41,.3);
  border-radius: var(--radius);
  font-size: 12px;
  line-height: 1.6;
  color: var(--c-text);
}
.cart-summary__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 22px;
}
.cart-summary__actions .btn { width: 100%; }

/* Empty cart page state */
.cart-empty {
  text-align: center;
  padding: clamp(40px, 7vw, 90px) 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.cart-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 110px; height: 110px;
  border-radius: 50%;
  border: 1px solid var(--c-rule);
  color: var(--c-gold-deep);
  background: var(--c-pearl);
  animation: cart-empty-pulse 3s ease-in-out infinite;
  margin-bottom: 12px;
}
.cart-empty h2 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(28px, 4vw, 40px);
  color: var(--c-espresso);
  margin-bottom: 4px;
}
.cart-empty p {
  font-size: 15px;
  color: var(--c-muted);
  max-width: 460px;
  line-height: 1.7;
  margin-bottom: 14px;
}

/* =================== PORUDŽBINE PAGE =================== */
.order-page {
  padding: clamp(60px, 8vw, 110px) 0 clamp(80px, 10vw, 140px);
  background: var(--c-ivory);
}
.order-page__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.order-form-wrap {
  background: var(--c-pearl);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius);
  padding: clamp(28px, 4vw, 48px);
  box-shadow: 0 30px 60px -36px rgba(21,21,23,.22);
}
.order-form-wrap h2 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(26px, 3vw, 34px);
  color: var(--c-espresso);
  margin-bottom: 6px;
}
.order-form-wrap p {
  color: var(--c-muted);
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 22px;
}
.order-form { display: flex; flex-direction: column; gap: 16px; }
.order-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.order-form__field { display: flex; flex-direction: column; gap: 6px; position: relative; }
.order-form__field--full { grid-column: 1 / -1; }
.order-form__label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.order-form input[type="text"],
.order-form input[type="email"],
.order-form input[type="tel"],
.order-form select,
.order-form textarea {
  width: 100%;
  font: inherit;
  font-size: 15px;
  color: var(--c-espresso);
  background: var(--c-ivory);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius);
  padding: 13px 16px;
  outline: none;
  transition:
    border-color var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease);
  appearance: none;
  -webkit-appearance: none;
}
.order-form textarea { resize: vertical; min-height: 120px; }
.order-form input:focus,
.order-form select:focus,
.order-form textarea:focus {
  border-color: var(--c-gold);
  background: var(--c-pearl);
  box-shadow: 0 0 0 3px rgba(161,37,41,.18);
}
.order-form input.has-error,
.order-form select.has-error,
.order-form textarea.has-error {
  border-color: #a23a3a;
  background: rgba(162,58,58,.04);
}
.field-error {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #a23a3a;
  letter-spacing: .04em;
}
.form-error-banner {
  background: rgba(162,58,58,.08);
  border: 1px solid rgba(162,58,58,.3);
  color: #7a1d2e;
  padding: 12px 14px;
  border-radius: var(--radius);
  font-size: 13px;
  line-height: 1.55;
  margin-bottom: 8px;
}
.order-form__select-wrap { position: relative; }
.order-form__select-wrap select { padding-right: 42px; cursor: pointer; }
.order-form__select-caret {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--c-muted);
  pointer-events: none;
}
.order-form__check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--c-muted);
  cursor: pointer;
}
.order-form__check input[type="checkbox"] {
  flex: 0 0 auto;
  width: 16px; height: 16px;
  accent-color: var(--c-gold-deep);
  margin-top: 2px;
  cursor: pointer;
}
.order-form__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 22px;
  margin-top: 6px;
}
.order-form__actions .btn:disabled {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}
.order-form__success {
  margin-top: 14px;
  padding: 16px 18px;
  background: rgba(14,124,102,.08);
  border: 1px solid rgba(14,124,102,.3);
  border-left: 3px solid var(--c-emerald);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.order-form__success[hidden] { display: none; }
.order-form__success.is-visible { opacity: 1; transform: translateY(0); }
.order-form__success strong {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 18px;
  color: var(--c-espresso);
}
.order-form__success span {
  font-size: 13px;
  color: var(--c-text);
}

/* Order summary panel */
.order-summary {
  background: var(--c-pearl);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius);
  padding: clamp(24px, 3vw, 32px);
  position: sticky;
  top: 120px;
}
.order-summary h3 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 22px;
  color: var(--c-espresso);
  margin-bottom: 16px;
}
.order-line {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--c-rule);
  align-items: center;
}
.order-line:last-of-type { border-bottom: 0; }
.order-line__media { position: relative; }
.order-line__media img {
  width: 64px; height: 64px;
  border-radius: var(--radius);
  border: 1px solid var(--c-rule);
  object-fit: cover;
  display: block;
  background: var(--c-ivory);
}
.order-line__qty {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--c-espresso);
  color: var(--c-pearl);
  border-radius: 100px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
}
.order-line__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.order-line__title {
  font-family: var(--f-display);
  font-size: 15px;
  font-weight: 400;
  color: var(--c-espresso);
  line-height: 1.25;
}
.order-line__cat {
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.order-line__price { font-size: 12px; color: var(--c-text); }
.order-line__subtotal {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 15px;
  color: var(--c-espresso);
}
.order-totals {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--c-rule);
}
.order-totals__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 14px;
  color: var(--c-text);
  padding: 6px 0;
}
.order-totals__row--total {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 22px;
  color: var(--c-espresso);
  border-top: 1px solid var(--c-rule);
  padding-top: 14px;
  margin-top: 6px;
}
.order-totals__note {
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(161,37,41,.1);
  border: 1px solid rgba(161,37,41,.3);
  border-radius: var(--radius);
  font-size: 12px;
  line-height: 1.55;
  color: var(--c-text);
}

/* Order empty state */
.order-empty {
  text-align: center;
  padding: 30px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.order-empty p {
  font-size: 14px;
  color: var(--c-muted);
  max-width: 320px;
  line-height: 1.6;
}

/* ---- Responsive ---- */
@media (max-width: 960px) {
  .cart-page__layout { grid-template-columns: minmax(0, 1fr); }
  .order-page__layout { grid-template-columns: minmax(0, 1fr); }
  .cart-summary, .order-summary { position: static; }
}
@media (max-width: 600px) {
  .cart-toast { top: auto; bottom: 24px; right: 16px; left: 16px; max-width: none; min-width: 0; }
  .cart-line { grid-template-columns: 84px 1fr; gap: 14px; padding: 14px; }
  .order-form__row { grid-template-columns: minmax(0, 1fr); }
  .mini-cart { width: 100vw; }
  .product-card .add-to-cart-btn { margin: 12px 12px 14px; font-size: 10px; }
}

/* -----------------------------------------------------------------
   29. AUTH (PRIJAVA / REGISTRACIJA / NALOG)
   Front-end demo only (localStorage). Markup for the navbar dropdown
   panel and the modal is injected by assets/js/auth.js. Page styles
   below also drive register.html, login.html and moj-nalog.html.
----------------------------------------------------------------- */

/* ---- Navbar auth toggle ---- */
.header__auth {
  position: relative;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-espresso);
  transition: color var(--t-fast) var(--ease);
}
.header__auth:hover { color: var(--c-gold-deep); }
.header__auth .auth-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.header__auth .auth-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--c-espresso);
  color: var(--c-pearl);
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  border: 1px solid var(--c-gold);
  transition:
    transform var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease);
}
.header__auth.is-logged-in:hover .auth-initials {
  transform: scale(1.06);
  background: var(--c-gold);
  color: var(--c-pearl);
  box-shadow: 0 6px 16px -6px rgba(161,37,41,.55);
}
.header__auth[hidden] { display: none; }

/* ---- Auth dropdown panel ---- */
.auth-panel {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  width: 300px;
  max-width: calc(100vw - 32px);
  background: var(--c-pearl);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius);
  box-shadow: 0 30px 60px -28px rgba(21,21,23,.36);
  padding: 18px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(.98);
  transition:
    opacity .25s var(--ease),
    transform .25s var(--ease),
    visibility 0s linear .25s;
  z-index: 1050;
}
.auth-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition:
    opacity .25s var(--ease),
    transform .25s var(--ease),
    visibility 0s linear 0s;
}
.auth-panel__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--c-rule);
  margin-bottom: 12px;
}
.auth-panel__avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--c-espresso);
  color: var(--c-pearl);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  border: 1px solid var(--c-gold);
  flex: 0 0 auto;
}
.auth-panel__avatar--guest {
  background: var(--c-ivory);
  color: var(--c-gold-deep);
  border-color: var(--c-rule);
}
.auth-panel__hi {
  display: block;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.auth-panel__name {
  display: block;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 18px;
  color: var(--c-espresso);
  line-height: 1.15;
  margin-top: 2px;
}
.auth-panel__list { display: flex; flex-direction: column; }
.auth-panel__list li { padding: 0; }
.auth-panel__list a,
.auth-panel__list button {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 11px 12px;
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--c-text);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  text-decoration: none;
}
.auth-panel__list a:hover,
.auth-panel__list button:hover {
  background: var(--c-ivory);
  color: var(--c-espresso);
}
.auth-panel__logout {
  margin-top: 6px;
  padding-top: 12px !important;
  border-top: 1px solid var(--c-rule);
  color: var(--c-gold-deep) !important;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 11px !important;
}
.auth-panel__guest-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.auth-panel__guest-actions .btn {
  width: 100%;
  padding: 12px 18px;
  font-size: 11px;
}

/* ---- Auth modal ---- */
.auth-modal {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease);
}
.auth-modal.is-open { opacity: 1; pointer-events: auto; }
.auth-modal[hidden] { display: none; }
.auth-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(13,13,15,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.auth-modal__inner {
  position: relative;
  z-index: 1;
  width: min(440px, 100%);
  background: var(--c-pearl);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius);
  padding: 36px 32px 32px;
  text-align: center;
  box-shadow: 0 40px 80px -30px rgba(21,21,23,.5);
  transform: scale(.96) translateY(8px);
  transition: transform .3s var(--ease);
}
.auth-modal.is-open .auth-modal__inner { transform: scale(1) translateY(0); }
.auth-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px; height: 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  color: var(--c-muted);
  display: grid;
  place-items: center;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.auth-modal__close:hover { background: var(--c-ivory); color: var(--c-espresso); }
.auth-modal__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  margin: 0 auto 16px;
  background: var(--c-ivory);
  color: var(--c-gold-deep);
  border: 1px solid var(--c-rule);
}
.auth-modal__icon[data-modal-type="success"] { background: var(--c-gold); color: var(--c-pearl); border-color: var(--c-gold); }
.auth-modal__icon[data-modal-type="logout"]  { background: var(--c-espresso); color: var(--c-pearl); border-color: var(--c-espresso); }
.auth-modal__icon[data-modal-type="error"]   { background: rgba(162,58,58,.1); color: #a23a3a; border-color: rgba(162,58,58,.3); }
.auth-modal__title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(24px, 3vw, 30px);
  color: var(--c-espresso);
  line-height: 1.15;
  margin: 0 0 8px;
}
.auth-modal__msg {
  color: var(--c-muted);
  font-size: 15px;
  line-height: 1.7;
  margin: 0 0 22px;
}
.auth-modal__actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.auth-modal__actions .btn { min-width: 160px; }

/* ---- AUTH PAGE LAYOUT (login + register) ---- */
.auth-page {
  padding: clamp(60px, 8vw, 110px) 0 clamp(80px, 10vw, 140px);
  background: var(--c-ivory);
}
.auth-page__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(32px, 5vw, 70px);
  align-items: stretch;
}

/* Visual / story block */
.auth-visual {
  position: relative;
  min-height: 440px;
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  background: var(--c-espresso);
  display: flex;
  align-items: flex-end;
}
.auth-visual__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.auth-visual__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: .7;
}
.auth-visual__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(13,13,15,.25) 0%, rgba(13,13,15,.85) 100%);
}
.auth-visual__content {
  position: relative;
  z-index: 1;
  padding: clamp(28px, 3vw, 44px);
  color: var(--c-pearl);
  max-width: 460px;
}
.auth-visual__content .eyebrow { color: var(--c-gold-soft); margin-bottom: 14px; }
.auth-visual__content .eyebrow::before { background: var(--c-gold-soft); }
.auth-visual__title {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.15;
  color: var(--c-pearl);
  margin: 6px 0 14px;
}
.auth-visual__title em { font-style: italic; color: var(--c-gold); font-weight: 300; }
.auth-visual__lede {
  font-size: 14px;
  line-height: 1.75;
  color: rgba(255,255,255,.78);
  margin-bottom: 22px;
}
.auth-visual__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13px;
  color: rgba(255,255,255,.78);
}
.auth-visual__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.6;
}
.auth-visual__list li::before {
  content: "·";
  color: var(--c-gold);
  font-size: 22px;
  line-height: .9;
  flex: 0 0 auto;
}

/* Auth form panel */
.auth-form-wrap {
  background: var(--c-pearl);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius);
  padding: clamp(28px, 4vw, 48px);
  box-shadow: 0 30px 60px -36px rgba(21,21,23,.22);
  display: flex;
  flex-direction: column;
}
.auth-form-wrap > h2 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 38px);
  color: var(--c-espresso);
  line-height: 1.15;
  margin: 6px 0 4px;
}
.auth-form-wrap > p {
  color: var(--c-muted);
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 22px;
}
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.auth-field { display: flex; flex-direction: column; gap: 6px; position: relative; }
.auth-field--full { grid-column: 1 / -1; }
.auth-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.auth-field__optional {
  text-transform: none;
  letter-spacing: .04em;
  font-weight: 400;
  color: var(--c-muted);
  font-size: 11px;
}

.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="tel"],
.auth-form input[type="password"] {
  width: 100%;
  font: inherit;
  font-size: 15px;
  color: var(--c-espresso);
  background: var(--c-ivory);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius);
  padding: 13px 16px;
  outline: none;
  transition:
    border-color var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease);
  appearance: none;
  -webkit-appearance: none;
}
.auth-form input:focus {
  border-color: var(--c-gold);
  background: var(--c-pearl);
  box-shadow: 0 0 0 3px rgba(161,37,41,.18);
}
.auth-form input.has-error {
  border-color: #a23a3a;
  background: rgba(162,58,58,.04);
}

.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 84px; }
.pw-toggle {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-gold-deep);
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 100px;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.pw-toggle:hover { background: var(--c-ivory); color: var(--c-espresso); }

.auth-form__check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--c-muted);
  cursor: pointer;
  margin: 4px 0;
}
.auth-form__check input[type="checkbox"] {
  flex: 0 0 auto;
  width: 16px; height: 16px;
  accent-color: var(--c-gold-deep);
  margin-top: 2px;
  cursor: pointer;
}
.auth-form__check a {
  color: var(--c-espresso);
  border-bottom: 1px solid var(--c-rule);
  padding-bottom: 1px;
}
.auth-form__check a:hover { color: var(--c-gold-deep); border-color: var(--c-gold); }

.auth-form__row--between {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 4px 0;
}
.auth-form__forgot {
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-gold-deep);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  cursor: pointer;
  background: transparent;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.auth-form__forgot:hover { border-bottom-color: var(--c-gold); color: var(--c-espresso); }

.auth-form__actions { margin-top: 8px; display: flex; flex-direction: column; gap: 12px; }
.auth-form__actions .btn { width: 100%; }

.auth-form__alt {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--c-rule);
  text-align: center;
  font-size: 14px;
  color: var(--c-muted);
}
.auth-form__alt a {
  color: var(--c-espresso);
  border-bottom: 1px solid var(--c-rule);
  padding-bottom: 1px;
  font-weight: 500;
}
.auth-form__alt a:hover { color: var(--c-gold-deep); border-color: var(--c-gold); }

/* ---- ACCOUNT PAGE ---- */
.account-page {
  padding: clamp(60px, 8vw, 110px) 0 clamp(80px, 10vw, 140px);
  background: var(--c-ivory);
}
.account-page__layout {
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

.acc-sidebar {
  background: var(--c-pearl);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius);
  padding: 24px;
  position: sticky;
  top: 120px;
}
.acc-sidebar__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--c-rule);
  margin-bottom: 16px;
}
.acc-sidebar__avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--c-espresso);
  color: var(--c-pearl);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  border: 1px solid var(--c-gold);
  flex: 0 0 auto;
}
.acc-sidebar__name {
  display: block;
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: 400;
  color: var(--c-espresso);
  line-height: 1.2;
  margin-top: 2px;
}
.acc-sidebar__role {
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-gold-deep);
}
.acc-sidebar__list {
  display: flex;
  flex-direction: column;
}
.acc-sidebar__list a,
.acc-sidebar__list button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 11px 12px;
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--c-text);
  background: transparent;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.acc-sidebar__list a:hover,
.acc-sidebar__list button:hover {
  background: var(--c-ivory);
  color: var(--c-espresso);
}
.acc-sidebar__list .is-active {
  background: var(--c-ivory);
  color: var(--c-espresso);
  border-left: 2px solid var(--c-gold);
  padding-left: 10px;
}
.acc-sidebar__logout {
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--c-rule);
  color: var(--c-gold-deep) !important;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 11px;
}

.acc-content {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.acc-section { display: none; }
.acc-section.is-active { display: block; }
.acc-section__head {
  margin-bottom: 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.acc-section__head h2 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 38px);
  color: var(--c-espresso);
  line-height: 1.1;
}
.acc-section__head p {
  color: var(--c-muted);
  font-size: 14px;
  line-height: 1.7;
}

/* Overview cards */
.acc-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.acc-card {
  background: var(--c-pearl);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.acc-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 50px -22px rgba(21,21,23,.22);
  border-color: rgba(161,37,41,.4);
}
.acc-card__label {
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.acc-card__value {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 22px;
  color: var(--c-espresso);
  line-height: 1.25;
  word-break: break-word;
}
.acc-greeting {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(28px, 3.6vw, 40px);
  color: var(--c-espresso);
  line-height: 1.1;
  margin-bottom: 6px;
}
.acc-greeting + p { color: var(--c-muted); margin-bottom: 24px; }
.acc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 22px;
}

/* Empty/orders placeholder */
.acc-empty {
  text-align: center;
  padding: clamp(30px, 5vw, 60px) 20px;
  background: var(--c-pearl);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.acc-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 90px; height: 90px;
  border-radius: 50%;
  background: var(--c-ivory);
  border: 1px solid var(--c-rule);
  color: var(--c-gold-deep);
  margin-bottom: 6px;
}
.acc-empty h3 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(22px, 2.8vw, 28px);
  color: var(--c-espresso);
}
.acc-empty p {
  color: var(--c-muted);
  font-size: 14px;
  max-width: 460px;
  line-height: 1.7;
  margin-bottom: 8px;
}

/* Auth-required guard (rendered in moj-nalog.html) */
.auth-guard {
  text-align: center;
  padding: clamp(60px, 10vw, 120px) 20px;
  background: var(--c-ivory);
}
.auth-guard__inner {
  max-width: 540px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.auth-guard h2 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(28px, 3.6vw, 38px);
  color: var(--c-espresso);
  line-height: 1.1;
}
.auth-guard p {
  color: var(--c-muted);
  font-size: 15px;
  line-height: 1.7;
}
.auth-guard__actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }

/* Order page hint banner (logged-out) */
#orderAuthHint {
  background: rgba(161,37,41,.1);
  border: 1px solid rgba(161,37,41,.3);
  border-left: 3px solid var(--c-gold);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--c-text);
  margin-bottom: 18px;
}
#orderAuthHint a {
  color: var(--c-espresso);
  border-bottom: 1px solid var(--c-rule);
  padding-bottom: 1px;
  font-weight: 500;
  margin-left: 4px;
}
#orderAuthHint a:hover { color: var(--c-gold-deep); border-color: var(--c-gold); }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .auth-page__layout { grid-template-columns: minmax(0, 1fr); }
  .auth-visual { min-height: 280px; }
  .account-page__layout { grid-template-columns: minmax(0, 1fr); }
  .acc-sidebar { position: static; }
  .acc-sidebar__list { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .acc-sidebar__list a, .acc-sidebar__list button {
    width: auto;
    border: 1px solid var(--c-rule);
    border-radius: 100px;
    padding: 8px 14px;
    font-size: 12px;
  }
  .acc-sidebar__list .is-active {
    background: var(--c-espresso);
    color: var(--c-pearl);
    border-color: var(--c-espresso);
    border-left: 1px solid var(--c-espresso);
    padding-left: 14px;
  }
  .acc-sidebar__logout { width: auto !important; border-top: 0 !important; padding-top: 8px !important; }
}
@media (max-width: 600px) {
  .auth-form__row { grid-template-columns: minmax(0, 1fr); }
  .auth-panel { width: calc(100vw - 32px); right: -8px; }
  .auth-modal__inner { padding: 32px 24px 26px; }
  .acc-card { padding: 18px 20px; }
}

/* -----------------------------------------------------------------
   29b. NAVBAR POLISH
   Bumps right cluster (icons + initials + lang) by ~25%, left search
   group by ~25%, and removes the empty-initials "black blob" that
   appears when CSS `display: inline-flex` overrides HTML `hidden`.
----------------------------------------------------------------- */

/* Hide initials/icon properly when JS toggles the [hidden] attribute.
   Without these rules, our `display: inline-flex` declarations on
   .auth-icon and .auth-initials override `hidden`, so the empty
   black initials circle paints as a stray oval next to the user
   icon when the visitor is logged out. */
.header__auth .auth-icon[hidden],
.header__auth .auth-initials[hidden] { display: none !important; }
.header__auth .auth-initials:empty   { display: none !important; }

/* Even, refined spacing for left/right clusters. The grid columns
   already isolate them; each cluster fills its column with flex so
   justify-content pushes content to the correct edge. */
.header__left,
.header__right {
  display: flex;
  align-items: center;
  gap: 18px;
}
.header__left  { justify-content: flex-start; }
.header__right { justify-content: flex-end; }

/* +25% on the right cluster — icons and small text */
.header__right .icon-btn { font-size: 15px; }
.header__right .icon-btn svg { width: 25px; height: 25px; }
.header__right .lang-switch { font-size: 14px; gap: 8px; }
.header__right .lang-switch__btn { padding: 4px 3px; }

/* Larger, refined initials avatar (matches the bigger icon scale) */
.header__auth { width: 40px; height: 40px; }
.header__auth .auth-initials {
  width: 40px; height: 40px;
  font-size: 14px;
  letter-spacing: .04em;
}

/* +25% on the left search group — icon and "PRETRAGA" label.
   IMPORTANT: scope to the search button only; the hamburger
   (.header__menu-toggle) is also an .icon-btn inside .header__left
   but it relies on its own internal gap:5px between the three lines.
   If we override its gap to 12px, the bars overflow the 22px-tall
   button and visually collapse into an X-like garbled shape. */
.header__left .header__search { font-size: 15px; gap: 12px; }
.header__left .header__search svg { width: 25px; height: 25px; }
.header__search-label { font-size: 15px; letter-spacing: .14em; }

/* Hamburger keeps its own tight 5px gap regardless of inherited
   .icon-btn rules — guarantees three crisp parallel lines that
   transform cleanly into an X only when .is-active is set. */
.header__menu-toggle { gap: 5px; }

/* Laptop tier (981–1600px) — compress the full header stack by ≈25–28%.
   Targets common 13–15" laptop resolutions (1366×768, 1440×900, 1536×864,
   1600×900). Original ~184px header (announce + main row + nav row) feels
   heavy on these screens; we shave each layer proportionally so the hero
   gets a cleaner first fold without anything looking cramped.
   main.js measures the stack live (--header-stack), so the full-height
   hero absorbs the change with no manual variable override needed. */
@media (min-width: 981px) and (max-width: 1600px) {
  /* Announce strip: 36px → 26px */
  .announce { padding: 7px 0; font-size: 10.5px; }

  /* Main row padding: 18/14 → 10/8 (saves ≈14px) */
  .header__inner { padding: 10px var(--gutter) 8px; }
  .header.is-scrolled .header__inner { padding: 8px var(--gutter); }

  /* Centred logo trim — keeps proportional shrink with the row.
     Top end caps at 54px per the user spec to keep the brand mark
     visible without forcing the row taller than ~70px. */
  .brand__logo { height: clamp(42px, 4vw, 54px); }
  .header.is-scrolled .brand__logo { height: 40px; }

  /* Nav row tightens to ~44px total: 10+10 padding + 4+4 link padding
     + ~16 line-height. Letter-spacing held at .22em (matches the
     existing ≤1280px polish rule) so the row stays elegant. */
  .nav__list { padding: 10px var(--gutter); gap: clamp(14px, 1.8vw, 26px); }
  .nav__link { padding: 4px 0; font-size: 11px; letter-spacing: .22em; }
}

/* On mobile (≤980px) the original layout uses `display: contents` so
   each cluster's children become absolutely-positioned. We restore
   that here and trim the icon scale a touch so the bigger desktop
   sizes don't blow up the compact mobile bar. */
@media (max-width: 980px) {
  .header__left,
  .header__right { display: contents; gap: 0; }
  .header__search { height: 40px; }
  .header__left .lang-switch,
  .header__right .lang-switch { height: 40px; font-size: 12px; gap: 6px; }
  .header__left .header__search svg,
  .header__right .icon-btn svg { width: 22px; height: 22px; }
}

/* -----------------------------------------------------------------
   30. ACCESSIBILITY
----------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 3px;
  border-radius: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .feature-band__balloon { animation: none; }
}

/* -----------------------------------------------------------------
   31. ZLATARA TANASKOVIĆ — brand overrides + new components
----------------------------------------------------------------- */

/* Preloader and hero use the brand palette like the rest of the site;
   only their graphite grounds are pinned here. */
.site-preloader,
.hero {
  --c-espresso:   #151517;
  --c-espresso-2: #0D0D0F;
  --c-coal:       #212124;
}

/* Primary button — crimson with white text (outside the hero) */
.btn--gold {
  background: #A12529;
  border-color: #A12529;
  color: #FFFFFF;
}
.btn--gold:hover {
  background: #8A1D21;
  border-color: #8A1D21;
  color: #FFFFFF;
}
::selection { background: #A12529; color: #FFFFFF; }

/* Accent text on dark backgrounds — never crimson on black */
.feature-band__title em,
.about__title em,
.brand-story__title em,
.page-intro__title em,
.section__title--light em,
.auth-visual__title em,
.auth-visual__list li::before { color: var(--c-gold-soft); }
.link-arrow:hover { color: var(--c-gold-soft); border-color: var(--c-gold-soft); }
.cat-card:hover .cat-card__cta { color: #FFFFFF; }

/* Logo — 207×66 PNG, never upscaled past its natural height */
.brand__logo {
  height: clamp(46px, 4.2vw, 62px);
  max-width: 100%;
  width: auto;
  aspect-ratio: 207 / 66;
}
.header.is-scrolled .brand__logo { height: 46px; }
.brand--small .brand__logo { height: 42px; }
.brand--footer .brand__logo,
.footer__col--brand .brand--footer .brand__logo { height: 58px; filter: none; }
@media (min-width: 981px) and (max-width: 1600px) {
  .brand__logo { height: clamp(44px, 3.6vw, 56px); }
  .header.is-scrolled .brand__logo { height: 42px; }
}
@media (max-width: 980px) {
  .header__center .brand__logo { height: 48px; max-width: 160px; }
}
@media (max-width: 600px) {
  .header__center .brand__logo { height: 38px; max-width: 120px; }
}

/* Mega menu feature image is a product photo on white */
.mega-card__img { object-fit: cover; background: #FFFFFF; }

/* Product cards — code line + white photo ground */
.product-card__media { background: #FFFFFF; }
.product-card__code {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--c-muted);
}
.product-card--list .product-card__title,
.product-card--mini .product-card__title { overflow-wrap: anywhere; }

/* "Sve …" link under a band swiper */
.band__more {
  display: flex;
  justify-content: center;
  margin-top: clamp(36px, 5vw, 56px);
}

/* Category grid: 8 cards → 4 + 4 */
.cat-card__media { background: #FFFFFF; }
.cat-card__overlay {
  background: linear-gradient(to top, rgba(13,13,15,.78) 0%, rgba(13,13,15,.35) 32%, transparent 62%);
}

/* ===== Otkup zlata band (index #otkup) ===== */
.gem-card__text {
  margin-top: 14px;
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(255,255,255,.72);
  max-width: 240px;
}
.buyback {
  margin-top: clamp(48px, 6vw, 80px);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(24px, 3vw, 40px);
  align-items: stretch;
}
.buyback__panel {
  padding: clamp(26px, 3vw, 40px);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}
.buyback__title {
  font-family: var(--f-display);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 400;
  color: #FFFFFF;
  margin-bottom: 8px;
}
.buyback__lede { font-size: 14px; line-height: 1.7; color: rgba(255,255,255,.72); margin-bottom: 22px; }
.buyback__table { width: 100%; border-collapse: collapse; font-size: 14px; color: #FFFFFF; }
.buyback__table th,
.buyback__table td {
  padding: 12px 10px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  text-align: left;
}
.buyback__table th {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-gold-soft);
}
.buyback__table td:last-child,
.buyback__table th:last-child { text-align: right; white-space: nowrap; }
.buyback__table td strong { font-weight: 500; }
.buyback__note { margin-top: 16px; font-size: 12.5px; line-height: 1.7; color: rgba(255,255,255,.62); }
.buyback__box { display: flex; flex-direction: column; }
.buyback__example {
  margin: 18px 0 22px;
  padding: 18px 20px;
  border-left: 2px solid var(--c-gold-soft);
  background: rgba(255,255,255,.04);
  color: #FFFFFF;
  font-size: 15px;
  line-height: 1.6;
}
.buyback__example strong { color: var(--c-gold-soft); font-weight: 500; }
.buyback__list { display: grid; gap: 8px; margin-bottom: 26px; font-size: 14px; color: rgba(255,255,255,.78); }
.buyback__list li { position: relative; padding-left: 18px; }
.buyback__list li::before { content: "·"; position: absolute; left: 0; top: -4px; font-size: 22px; color: var(--c-gold-soft); }
.buyback__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: auto; }
@media (max-width: 980px) {
  .buyback { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .buyback__actions .btn { width: 100%; }
  .buyback__table th, .buyback__table td { padding: 10px 6px; }
}

/* ===== Footer ===== */
.footer__shops { display: grid; gap: 18px; font-size: 14px; line-height: 1.6; color: var(--c-muted); }
.footer__shops strong {
  display: block;
  font-weight: 500;
  color: var(--c-espresso);
  margin-bottom: 2px;
}
.footer__shops a { color: var(--c-espresso); }
.footer__shops a:hover { color: var(--c-gold-deep); }
.footer__shops small { display: block; font-size: 12.5px; color: var(--c-muted); }
.footer__bottom p { line-height: 1.8; }

/* ===== Catalog (proizvodi.html) ===== */
.products__search-chip { font-style: italic; }

/* ===== Product page (proizvod.html) ===== */
.product-gallery--single { grid-template-columns: minmax(0, 1fr); }
.product-gallery--single .product-gallery__main {
  aspect-ratio: 1 / 1;
  background: #FFFFFF;
}
.product-gallery--single .product-gallery__main img { object-fit: contain; }
.product-summary__code {
  display: block;
  margin: -6px 0 18px;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.spec-list {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 10px 22px;
  margin: 0 0 28px;
  padding: 18px 0;
  border-top: 1px solid var(--c-rule);
  border-bottom: 1px solid var(--c-rule);
  font-size: 14px;
}
.spec-list dt {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-gold-deep);
  padding-top: 3px;
}
.spec-list dd { margin: 0; color: var(--c-text); }
.product-summary__contact {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-size: 13px;
  color: var(--c-muted);
}
.product-summary__contact a {
  color: var(--c-espresso);
  border-bottom: 1px solid var(--c-rule);
}
.product-summary__contact a:hover { color: var(--c-gold-deep); border-color: var(--c-gold); }
.product-missing { padding: clamp(80px, 10vw, 140px) 0; text-align: center; }
.product-missing h1 { font-family: var(--f-display); font-size: clamp(30px, 4vw, 46px); margin-bottom: 14px; }
.product-missing p { color: var(--c-muted); margin-bottom: 28px; }
.trust-strip__label { line-height: 1.4; }

/* ===== About page ===== */
.about-intro__mark--logo {
  padding: 10px 14px;
  background: #FFFFFF;
}
.about-intro__mark--logo img { width: 132px; height: auto; display: block; }
.about-statement__shops {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 32px;
  margin: 6px 0 30px;
  font-size: 14px;
  color: rgba(255,255,255,.82);
}
.about-statement__shops strong { color: var(--c-gold-soft); font-weight: 500; margin-right: 6px; }

/* ===== Contact page — locations ===== */
.locations {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 36px);
}
.shop-card {
  background: var(--c-pearl);
  border: 1px solid var(--c-rule);
  display: flex;
  flex-direction: column;
}
.shop-card__map {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--c-ivory-warm);
}
.shop-card__map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(.35);
}
.shop-card__body { padding: clamp(22px, 3vw, 34px); display: flex; flex-direction: column; gap: 16px; flex: 1; }
.shop-card__eyebrow {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--c-gold-deep);
}
.shop-card__title { font-family: var(--f-display); font-size: clamp(24px, 2.6vw, 32px); color: var(--c-espresso); }
.shop-card__address { font-size: 15px; color: var(--c-text); }
.hours-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.hours-table th, .hours-table td { padding: 8px 0; border-bottom: 1px solid var(--c-rule); text-align: left; font-weight: 400; }
.hours-table th { color: var(--c-muted); }
.hours-table td { text-align: right; color: var(--c-espresso); }
.shop-card__phones { display: grid; gap: 4px; font-size: 14px; }
.shop-card__phones a { color: var(--c-espresso); }
.shop-card__phones a:hover { color: var(--c-gold-deep); }
.shop-card__actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 860px) {
  .locations { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .shop-card__actions .btn { width: 100%; }
}
.faq .accordion { scroll-margin-top: calc(var(--header-h-desktop) + 20px); }
.faq .accordion__panel ul { margin: 10px 0 0; padding-left: 18px; list-style: disc; }
.faq .accordion__panel li { margin-bottom: 6px; }
.faq .accordion__panel p + p { margin-top: 10px; }
#kontakt-forma, #lokacije, #otkup, #staro-za-novo { scroll-margin-top: 120px; }

/* AI chat answers can be longer now */
.ai-msg p { white-space: pre-line; }

/* -----------------------------------------------------------------
   32. PREMIUM POLISH — typography, rhythm, buttons, cards, bands,
       micro-interactions (visual only; loaded last so it wins)
----------------------------------------------------------------- */

/* ===== Typography & vertical rhythm ===== */
body { font-size: 16px; line-height: 1.72; }
.section__title,
.feature-band__title,
.about__title,
.brand-story__title,
.about-cta__title {
  font-weight: 300;
  letter-spacing: -0.01em;
}
.section__title {
  font-size: clamp(38px, 5.4vw, 70px);
  line-height: 1.04;
}
.section__title em { font-weight: 300; color: var(--c-gold); }
.eyebrow {
  font-size: 10.5px;
  letter-spacing: .34em;
}
.section__sub { font-size: 15px; line-height: 1.75; }

.section,
.band,
.feature-band,
.consultation,
.about,
.brand-story,
.instagram-section {
  padding-top: clamp(88px, 11vw, 150px);
  padding-bottom: clamp(88px, 11vw, 150px);
}

/* Thin silver rule with a centred bordo segment (homepage section breaks) */
.rule-divider {
  position: relative;
  max-width: var(--container);
  height: 1px;
  margin: 0 auto;
  background: linear-gradient(90deg, transparent, var(--c-silver-light) 12%, var(--c-silver-light) 88%, transparent);
}
.rule-divider span {
  position: absolute;
  left: 50%;
  top: 0;
  width: 40px;
  height: 1px;
  transform: translateX(-50%);
  background: var(--c-gold);
}
.rule-divider::before,
.rule-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 3px;
  height: 3px;
  transform: translateY(-50%) rotate(45deg);
  background: var(--c-gold);
}
.rule-divider::before { left: calc(50% - 26px); }
.rule-divider::after  { left: calc(50% + 23px); }
@media (max-width: 980px) {
  .rule-divider { margin: 0 var(--gutter); }
}

/* ===== Header — glass on scroll ===== */
.header {
  transition:
    background .35s var(--ease),
    box-shadow .35s var(--ease),
    border-color .35s var(--ease),
    -webkit-backdrop-filter .35s var(--ease),
    backdrop-filter .35s var(--ease);
}
.header.is-scrolled {
  background: rgba(247,246,244,.85);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
          backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid rgba(201,205,208,.7);
  box-shadow: 0 10px 30px -24px rgba(13,13,15,.35);
}
.header__inner,
.nav__list,
.nav__link,
.brand__logo { transition-duration: .35s; }
@media (min-width: 981px) {
  .brand__logo,
  .header__center .brand__logo { height: 56px; }
  .header.is-scrolled .brand__logo { height: 44px; }
}
.nav__link::after {
  transform-origin: center;
  transition: transform .35s var(--ease);
}
.nav__link:hover { color: var(--c-espresso); }

/* Mega menu */
.mega {
  background: rgba(247,246,244,.98);
  border-top: 1px solid var(--c-silver-light);
  border-bottom: 1px solid var(--c-silver-light);
  box-shadow: 0 40px 70px -40px rgba(13,13,15,.28);
}
.mega-card {
  border: 1px solid var(--c-silver-light);
  border-radius: 0;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.mega-card:hover {
  border-color: var(--c-espresso);
  box-shadow: 0 28px 50px -30px rgba(13,13,15,.35);
}
.mega-card__img { transition: transform 1.2s var(--ease); }
.mega-card:hover .mega-card__img { transform: scale(1.06); }

/* ===== Buttons ===== */
.btn {
  padding: 16px 36px;
  font-size: 13px;
  letter-spacing: .2em;
  border-width: 1px;
  border-radius: 0;
}
.btn--gold {
  background: var(--c-gold);
  border-color: var(--c-gold);
  color: #FFFFFF;
}
.btn--gold:hover {
  background: var(--c-espresso);
  border-color: var(--c-espresso);
  color: #FFFFFF;
}
.btn--ghost,
.btn--ghost-dark {
  background: transparent;
  color: var(--c-espresso);
  border-color: var(--c-espresso);
}
.btn--ghost:hover,
.btn--ghost-dark:hover {
  background: transparent;
  color: var(--c-gold);
  border-color: var(--c-gold);
}
.btn--ghost-light:hover {
  background: transparent;
  color: var(--c-gold-soft);
  border-color: var(--c-gold-soft);
}
@media (max-width: 600px) {
  .btn {
    padding: 15px 24px;
    white-space: normal;
    text-align: center;
    line-height: 1.45;
    min-height: 48px;
  }
}

/* ===== Product cards ===== */
.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid rgba(201,205,208,.8);
  border-radius: 0;
  transition:
    transform .6s var(--ease),
    border-color .6s var(--ease),
    box-shadow .6s var(--ease),
    opacity .9s var(--ease);
}
.product-card:hover {
  transform: translateY(-4px);
  border-color: var(--c-espresso);
  box-shadow: 0 26px 46px -32px rgba(13,13,15,.4);
}
.product-card .product-card__link { display: flex; flex-direction: column; flex: 1 1 auto; }
.product-card .product-card__media {
  border: 0;
  border-bottom: 1px solid rgba(201,205,208,.45);
  background: radial-gradient(circle at 50% 46%, #FFFFFF 0%, #FFFFFF 38%, #F2F2F3 100%);
}
.product-card .product-card__img {
  mix-blend-mode: multiply;     /* white photo ground picks up the soft highlight */
  transition: transform .6s var(--ease), opacity .45s var(--ease);
}
.product-card:hover .product-card__img,
.product-card .product-card__link:hover .product-card__img { transform: scale(1.04); }
.product-card .product-card__link:hover .product-card__media { border-color: rgba(201,205,208,.45); }
.product-card .product-card__body { padding: 20px 20px 4px; }
.product-card .product-card__cat { letter-spacing: .24em; color: var(--c-muted); }
.product-card .product-card__price {
  color: var(--c-gold);
  font-weight: 500;
  letter-spacing: .1em;
  border-bottom: 0;
  padding-bottom: 0;
}
.product-card .add-to-cart-btn {
  align-self: stretch;
  margin: 16px 20px 20px;
  margin-top: auto;
  padding: 12px 16px;
  border-radius: 0;
  border: 1px solid var(--c-espresso);
  background: transparent;
  color: var(--c-espresso);
  font-size: 11px;
  letter-spacing: .2em;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), opacity .45s var(--ease), transform .45s var(--ease);
}
.product-card .product-card__link + .add-to-cart-btn { margin-top: 16px; }
.product-card .add-to-cart-btn:hover {
  background: var(--c-gold);
  border-color: var(--c-gold);
  color: #FFFFFF;
}
/* Desktop: the button appears on hover / keyboard focus. Touch: always on. */
@media (hover: hover) and (pointer: fine) {
  .product-card .add-to-cart-btn { opacity: 0; transform: translateY(6px); }
  .product-card:hover .add-to-cart-btn,
  .product-card:focus-within .add-to-cart-btn { opacity: 1; transform: none; }
}
.swiper-slide.product-card { height: auto; }
.signature-swiper .swiper-wrapper,
.gold-swiper .swiper-wrapper,
.pearl-swiper .swiper-wrapper { align-items: stretch; }
.signature-swiper,
.gold-swiper,
.pearl-swiper { padding-top: 6px; }   /* room for the 4px hover lift */

/* Swipers — slower easing, no scrollbars */
.swiper { --swiper-wrapper-transition-timing-function: cubic-bezier(.22, .61, .36, 1); scrollbar-width: none; }
.swiper::-webkit-scrollbar { display: none; }
.swiper-scrollbar { display: none; }

/* ===== Category cards ===== */
.cat-card__overlay {
  background: linear-gradient(to top, rgba(13,13,15,.65) 0%, rgba(13,13,15,.28) 34%, rgba(13,13,15,0) 62%);
}
.cat-card__title { font-size: 30px; font-weight: 400; letter-spacing: -0.005em; }
.cat-card__img { transition: transform 1.2s var(--ease); }
.cat-card:hover .cat-card__img { transform: scale(1.05); }
.cat-card::after { inset: 14px; transition: border-color .6s var(--ease); }
.cat-card:hover::after { border-color: rgba(255,255,255,.55); }

/* ===== Dark bands — faint silver texture + soft crimson glow ===== */
.feature-band::after,
.band--dark::after,
.about::after,
.brand-story::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 60% at 88% 12%, rgba(161,37,41,.18), transparent 70%),
    radial-gradient(ellipse 45% 50% at 8% 95%, rgba(161,37,41,.10), transparent 70%),
    repeating-linear-gradient(135deg, rgba(201,205,208,.02) 0 1px, transparent 1px 16px);
}
.gem-card,
.buyback__panel,
.buyback__example {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
}
.buyback__example { border-left: 2px solid var(--c-gold-soft); }
.gem-card:hover { background: rgba(255,255,255,.06); border-color: rgba(224,103,107,.45); }

/* ===== Reveal — one motion everywhere ===== */
.reveal {
  transform: translateY(24px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.is-revealed { transform: translateY(0); }
/* Cards rendered by JS after load (catalog, related) ease in by column */
@keyframes ztCardIn {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.products__grid > .product-card,
.related__grid > .product-card { animation: ztCardIn .9s var(--ease) backwards; }
.products__grid > .product-card:nth-child(4n+2),
.related__grid > .product-card:nth-child(4n+2) { animation-delay: 60ms; }
.products__grid > .product-card:nth-child(4n+3),
.related__grid > .product-card:nth-child(4n+3) { animation-delay: 120ms; }
.products__grid > .product-card:nth-child(4n+4),
.related__grid > .product-card:nth-child(4n+4) { animation-delay: 180ms; }

/* ===== Micro-interactions ===== */
.back-top,
.ai-fab {
  transition:
    opacity .35s var(--ease),
    transform .35s var(--ease),
    visibility 0s linear .35s,
    background .35s var(--ease),
    color .35s var(--ease),
    box-shadow .35s var(--ease);
}
.ai-fab { transition-delay: 0s; }
.back-top.is-visible { transition-delay: 0s; }
.back-top:hover,
.ai-fab:hover {
  background: var(--c-espresso);
  color: #FFFFFF;
  box-shadow: 0 0 0 4px var(--c-ivory), 0 0 0 5px var(--c-gold), 0 16px 34px -14px rgba(13,13,15,.45);
}

/* Form fields: a bordo bottom border on focus, no glow */
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus,
.order-form input:focus,
.order-form select:focus,
.order-form textarea:focus,
.auth-form input:focus,
.footer-form__field input:focus,
.ai-chat__input:focus,
.products__sort-select:focus {
  outline: none;
  box-shadow: inset 0 -1px 0 var(--c-gold);
  border-color: var(--c-silver-light);
  border-bottom-color: var(--c-gold);
}
.contact-form :is(input, select, textarea):focus-visible,
.order-form :is(input, select, textarea):focus-visible,
.auth-form input:focus-visible,
.footer-form__field input:focus-visible,
.ai-chat__input:focus-visible,
.search-overlay__form input:focus-visible { outline: none; }

/* Accordions: the plus turns into an × (45°) */
.accordion__icon { transition: transform .45s var(--ease), color .35s var(--ease); }
.accordion.is-open .accordion__icon { transform: rotate(45deg); color: var(--c-gold); }
.accordion.is-open .accordion__icon::after { opacity: 1; transform: translateX(-50%); }
.m-acc__btn span { display: inline-block; transition: transform .45s var(--ease); }

/* Footer links — same bordo dot everywhere */
.footer__links a:hover { color: var(--c-espresso); }
.footer__links a:hover::before { background: var(--c-gold); }

/* ===== Mobile menu — full-height graphite drawer ===== */
.mobile-menu {
  background: #151517;
  color: #FFFFFF;
  border-right: 1px solid rgba(255,255,255,.06);
}
.mobile-menu::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 40% at 100% 0%, rgba(161,37,41,.16), transparent 70%),
    repeating-linear-gradient(135deg, rgba(201,205,208,.02) 0 1px, transparent 1px 16px);
}
.mobile-menu > * { position: relative; }
.mobile-menu__head { border-bottom-color: rgba(255,255,255,.1); }
.mobile-menu__close { color: #FFFFFF; width: 44px; height: 44px; justify-content: center; }
.mobile-menu__close:hover { color: var(--c-gold-soft); }
.mobile-menu__nav > ul > li { border-bottom-color: rgba(255,255,255,.1); }
.mobile-menu__nav > ul > li > a,
.m-acc__btn {
  font-size: 26px;
  font-weight: 300;
  color: #FFFFFF;
  min-height: 56px;
}
.mobile-menu__nav > ul > li > a:hover,
.m-acc__btn:hover { color: var(--c-gold-soft); }
.m-acc__btn span { color: var(--c-gold-soft); }
.m-acc__panel a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: rgba(255,255,255,.72);
}
.m-acc__panel a:hover { color: #FFFFFF; }
.m-acc__panel li { padding: 2px 0; }
.mobile-menu__lang .lang-switch__btn { color: rgba(255,255,255,.5); min-height: 44px; min-width: 32px; }
.mobile-menu__lang .lang-switch__btn.is-active { color: #FFFFFF; }
.mobile-menu__lang .lang-switch__sep { color: rgba(255,255,255,.4); }
.mobile-menu__cta .btn--ghost {
  color: #FFFFFF;
  border-color: rgba(255,255,255,.4);
}
.mobile-menu__cta .btn--ghost:hover { color: var(--c-gold-soft); border-color: var(--c-gold-soft); }

/* ===== Inner page intros — random hero photo, lighter scrim ===== */
.page-intro__bg picture { display: contents; }
.page-intro__bg-overlay,
.page-intro--about .page-intro__bg-overlay,
.page-intro--contact .page-intro__bg-overlay {
  background:
    radial-gradient(ellipse 70% 75% at 50% 55%, rgba(13,13,15,.32), transparent 75%),
    linear-gradient(180deg, rgba(13,13,15,.42) 0%, rgba(13,13,15,.5) 100%),
    rgba(0,0,0,.10);
}
.page-intro:not(.page-intro--about) .page-intro__bg-overlay {
  background:
    radial-gradient(ellipse 60% 85% at 40% 50%, rgba(13,13,15,.34), transparent 75%),
    linear-gradient(180deg, rgba(13,13,15,.42) 0%, rgba(13,13,15,.5) 100%),
    rgba(0,0,0,.10);
}
.page-intro .eyebrow { color: rgba(255,255,255,.9); text-shadow: 0 1px 14px rgba(13,13,15,.45); }
.page-intro .eyebrow::before { background: var(--c-gold-soft); }
.page-intro__title { text-shadow: 0 2px 26px rgba(13,13,15,.4); letter-spacing: -0.01em; }
.page-intro__lede { color: rgba(255,255,255,.9); text-shadow: 0 1px 16px rgba(13,13,15,.45); }

/* ===== Mobile (≤600px) ===== */
@media (max-width: 600px) {
  :root { --gutter: 16px; }
  .section__title { font-size: clamp(32px, 9vw, 36px); }
  .products__grid,
  .related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  .product-card .product-card__body { padding: 14px 12px 2px; }
  .product-card .product-card__title,
  .product-card--list .product-card__title { font-size: 16px; line-height: 1.25; }
  .product-card .product-card__cat { font-size: 9px; letter-spacing: .16em; }
  .product-card .product-card__code { font-size: 10px; letter-spacing: .06em; }
  .product-card .product-card__price { font-size: 11.5px; letter-spacing: .06em; }
  .product-card .add-to-cart-btn {
    margin: 12px 10px 12px;
    padding: 10px 8px;
    min-height: 44px;
    font-size: 10px;
    letter-spacing: .14em;
  }
  .product-card .product-card__link + .add-to-cart-btn { margin-top: 12px; }
  .cat-card__title { font-size: 24px; }
  .cat-card__body { padding: 18px; }
  .header__menu-toggle { width: 44px; height: 44px; padding: 11px 8px; }
  .footer__links a { display: inline-block; padding: 6px 0; }
}
.product-card .product-card__title { line-height: 1.3; }
@media (max-width: 600px) {
  .product-card .add-to-cart-btn { opacity: 1; transform: none; }
}