/* ================================================================
   Orthodox Corner v2 — "Atelier"
   Cream parchment + dark nav/footer + gold accents.
   Conversion-focused: products, prices, trust, CTA.
   ================================================================ */

:root {
  /* ---- Cream / parchment palette (everywhere except nav + footer) ---- */
  --cream-paper: #FBF5E8;
  --cream:       #F3E9D2;   /* primary bg */
  --cream-warm:  #ECDFC2;   /* subtle elevated */
  --cream-deep:  #DDCFB2;   /* shadow on cream */

  /* ---- Dark (nav + footer only) ---- */
  --dark-deep:   #140A05;
  --dark:        #1F120A;
  --dark-elev:   #2C1B10;

  /* ---- Gold (accent everywhere) ---- */
  --gold-bright: #D4B070;
  --gold:        #A0782C;   /* primary accent */
  --gold-deep:   #75571F;
  --gold-shadow: #4A370E;
  --gold-faint:  rgba(160, 120, 44, 0.16);

  /* ---- Sacred red (sparingly) ---- */
  --rust:        #8A2818;
  --rust-deep:   #5C1810;

  /* ---- Ink (text on cream) ---- */
  --ink:         #1F1208;
  --ink-soft:    #3D2B1B;
  --ink-mute:    #6B5742;
  --ink-fade:    #9A8870;

  /* ---- On-dark text ---- */
  --on-dark:        #F5EBD4;
  --on-dark-soft:   #C9B998;
  --on-dark-mute:   #8A7A60;
  --on-dark-fade:   #5F4E38;

  /* ---- Semantic ---- */
  --line:        rgba(31, 18, 8, 0.14);
  --line-strong: rgba(31, 18, 8, 0.26);
  --line-gold:   rgba(160, 120, 44, 0.32);

  /* ---- Typography ---- */
  --font-display: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --font-body:    'Newsreader', 'Cormorant Garamond', Georgia, serif;

  /* ---- Type scale ---- */
  --t-eyebrow:  0.6875rem;
  --t-xs:       0.75rem;
  --t-sm:       0.875rem;
  --t-base:     1.0625rem;
  --t-lg:       1.1875rem;
  --t-xl:       1.4375rem;
  --t-2xl:      clamp(1.625rem, 1.45rem + 0.9vw, 2.125rem);
  --t-3xl:      clamp(2rem, 1.7rem + 1.5vw, 2.75rem);
  --t-4xl:      clamp(2.375rem, 1.9rem + 2.4vw, 3.625rem);
  --t-5xl:      clamp(2.75rem, 2.1rem + 3.25vw, 4.5rem);
  --t-display:  clamp(3rem, 2.2rem + 4vw, 5.25rem);

  --leading-tight:   1.05;
  --leading-snug:    1.18;
  --leading-base:    1.6;
  --leading-relaxed: 1.78;

  --tracking-tight:   -0.022em;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.12em;
  --tracking-widest:  0.22em;
  --tracking-extreme: 0.32em;

  /* ---- Spacing ---- */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.25rem;
  --s-6:  1.5rem;
  --s-8:  2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-20: 5rem;
  --s-24: 6rem;
  --s-32: 8rem;
  --s-40: 10rem;

  /* ---- Layout ---- */
  --gutter:    clamp(1.5rem, 4vw, 3rem);
  --max-w:     1440px;
  --narrow:    920px;
  --section-y: clamp(4.5rem, 9vw, 8rem);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.19, 1, 0.22, 1);
  --d-fast: 240ms;
  --d-base: 440ms;
  --d-slow: 760ms;
}

/* ================================================================
   Reset
   ================================================================ */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; min-width: 0; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  background-color: var(--cream);
  /* overflow-x: clip ne stvara novi stacking context (za razliku od hidden),
     pa sticky / fixed elementi rade normalno. Sprečava bilo kakav horizontal
     scroll bug — sa bilo kojeg elementa koji bi mogao da probije viewport. */
  overflow-x: clip;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: var(--leading-base);
  color: var(--ink);
  background-color: var(--cream);
  min-height: 100vh;
  overflow-x: clip;
  max-width: 100vw;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "lnum" 1;
}

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

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

button { background: none; border: none; cursor: pointer; padding: 0; color: inherit; }

a { color: var(--ink); text-decoration: none; transition: color var(--d-base) var(--ease-out); }

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

::selection { background-color: var(--gold); color: var(--cream-paper); }
:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }

/* ================================================================
   Subtle parchment texture on cream background
   ================================================================ */

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 320 320' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.62' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.32 0 0 0 0 0.18 0 0 0 0.15 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.4;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 1;
}

main, header, footer { position: relative; z-index: 2; }

/* ================================================================
   Container + sections
   ================================================================ */

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

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

.section {
  padding-block: var(--section-y);
  position: relative;
}

.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }
.section--alt   { background-color: var(--cream-warm); }
.section--paper { background-color: var(--cream-paper); }

/* Section sa logo mark watermark u pozadini (suptilno) */
.section--with-mark {
  position: relative;
  overflow: hidden;
}

.section__watermark {
  position: absolute;
  top: 50%;
  right: -8%;
  transform: translateY(-50%);
  width: clamp(420px, 50vw, 720px);
  aspect-ratio: 1;
  background-image: url("assets/logo/logo-mark.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
  filter: blur(0.5px);
}

.section--with-mark .wrap {
  position: relative;
  z-index: 1;
}

@media (max-width: 880px) {
  .section__watermark {
    right: -30%;
    width: 90vw;
    opacity: 0.04;
  }
}

/* ================================================================
   Typography utilities
   ================================================================ */

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-extreme);
  color: var(--gold-deep);
}

.eyebrow-line {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-extreme);
  color: var(--gold-deep);
}

.eyebrow-line::before {
  content: '';
  width: 28px;
  height: 1px;
  background-color: var(--gold);
}

.text-mute  { color: var(--ink-mute); }
.text-soft  { color: var(--ink-soft); }
.text-fade  { color: var(--ink-fade); }
.text-gold  { color: var(--gold-deep); }

/* ================================================================
   Section heading
   ================================================================ */

.section-head {
  margin-bottom: var(--s-16);
  max-width: 720px;
}

.section-head--center { margin-inline: auto; text-align: center; }

.section-head--row {
  max-width: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-8);
  flex-wrap: wrap;
}

.section-head__eyebrow { margin-bottom: var(--s-4); }

.section-head__title {
  font-family: var(--font-display);
  font-size: var(--t-4xl);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  text-wrap: balance;
}

.section-head__title em {
  font-style: italic;
  color: var(--gold-deep);
}

.section-head__lead {
  margin-top: var(--s-5);
  font-size: var(--t-lg);
  line-height: var(--leading-relaxed);
  color: var(--ink-soft);
  max-width: 56ch;
}

.section-head--center .section-head__lead { margin-inline: auto; }

.section-head__link {
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--gold-deep);
  padding-block: var(--s-2);
  border-bottom: 1px solid var(--gold);
  transition: color var(--d-base) var(--ease-out), border-color var(--d-base) var(--ease-out);
}

.section-head__link:hover {
  color: var(--gold);
  border-color: var(--gold-bright);
}

.section-head__link::after {
  content: '\2192';
  margin-left: var(--s-2);
  font-family: var(--font-display);
  font-style: italic;
}

/* ================================================================
   Top bar (always dark, fixed)
   ================================================================ */

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: var(--dark);
  color: var(--on-dark);
  border-bottom: 1px solid var(--line-gold);
  transition: transform 0.35s var(--ease-out), background-color var(--d-base) var(--ease-out);
  will-change: transform;
}

.topbar.is-scrolled {
  background-color: rgba(20, 10, 5, 0.96);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
}

/* Auto-hide na scroll down (JS dodaje is-hidden klasu).
   Ne sakriva se kad je meni otvoren. */
.topbar.is-hidden:not(.is-menu-open) {
  transform: translateY(-100%);
}

.topbar__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s-10);
  padding: var(--s-5) var(--gutter);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  color: inherit;
  flex-shrink: 0;
  transition: opacity var(--d-base) var(--ease-out);
}

.brand:hover { opacity: 0.85; }

.brand__logo {
  display: block;
  height: 44px;
  width: auto;
  object-fit: contain;
}

.brand__logo--footer {
  height: 56px;
}

.topbar__nav { justify-self: center; }

.topbar__nav ul {
  display: flex;
  gap: 0;
  align-items: center;
}

.topbar__nav li {
  position: relative;
  padding-inline: var(--s-5);
}

.topbar__nav li + li::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 50%;
  width: 1px;
  height: 12px;
  background-color: rgba(212, 176, 112, 0.28);
  transform: translateY(-50%);
}

.topbar__nav a {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--on-dark-soft);
  position: relative;
  padding-block: var(--s-3);
  transition: color var(--d-base) var(--ease-out);
}

.topbar__nav a::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 0;
  height: 1px;
  background-color: var(--gold-bright);
  transition: width var(--d-base) var(--ease-out), left var(--d-base) var(--ease-out);
}

.topbar__nav a:hover,
.topbar__nav a.is-active { color: var(--gold-bright); }

.topbar__nav a:hover::after,
.topbar__nav a.is-active::after {
  width: 60%;
  left: 20%;
}


.topbar__tools {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.tool-btn {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: var(--on-dark-soft);
  border: 1px solid transparent;
  transition: all var(--d-base) var(--ease-out);
  position: relative;
}

.tool-btn:hover {
  border-color: var(--line-gold);
  color: var(--gold-bright);
}

/* Language switcher (SR | EN) — segmentni prekidac, aktivni jezik obojen */
.lang-switch {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--line-gold);
  border-radius: 6px;
  overflow: hidden;
}
.lang-switch__btn {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1;
  padding: 7px 9px;
  color: var(--on-dark-soft);
  text-decoration: none;
  transition: color var(--d-base) var(--ease-out), background var(--d-base) var(--ease-out);
}
.lang-switch__btn + .lang-switch__btn {
  border-left: 1px solid var(--line-gold);
}
a.lang-switch__btn:hover {
  color: var(--gold-bright);
}
.lang-switch__btn.is-active {
  background: var(--gold-bright);
  color: var(--dark);
}

.tool-btn__count {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 17px;
  height: 17px;
  padding-inline: 4px;
  display: grid;
  place-items: center;
  background-color: var(--gold-bright);
  color: var(--dark);
  font-size: 9px;
  font-weight: 700;
  border-radius: 99px;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

@media (max-width: 880px) {
  .topbar__nav { display: none; }
  .topbar__inner { grid-template-columns: 1fr auto; }
  /* Traka se rasterećuje: jezik i nalog se sele u mobilni meni */
  .topbar__tools > .lang-switch { display: none; }
  .topbar__tools .tool-btn-group[data-tool="profile"] { display: none; }
  .topbar .brand__logo { height: 38px; }
}

/* ===== Hamburger meni (mobile) ===== */
.tool-btn--menu {
  display: none;
}

.hamburger {
  display: inline-block;
  width: 20px;
  height: 14px;
  position: relative;
}

.hamburger span {
  display: block;
  position: absolute;
  left: 0;
  height: 2px;
  width: 100%;
  background-color: currentColor;
  border-radius: 1px;
  transition: top 0.3s var(--ease-out), transform 0.3s var(--ease-out), opacity 0.2s var(--ease-out);
}

.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 6px; }
.hamburger span:nth-child(3) { top: 12px; }

.topbar.is-menu-open .hamburger span:nth-child(1) {
  top: 6px;
  transform: rotate(45deg);
}

.topbar.is-menu-open .hamburger span:nth-child(2) {
  opacity: 0;
}

.topbar.is-menu-open .hamburger span:nth-child(3) {
  top: 6px;
  transform: rotate(-45deg);
}

/* ============================================================
   Mobilni meni — klizni panel s desne strane
   ============================================================ */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(12, 7, 3, 0.6);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--ease-out);
  z-index: 190;
}
.drawer-backdrop.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.mobile-drawer {
  display: none;
  flex-direction: column;
  position: fixed;
  top: 0;
  right: 0;
  height: 100dvh;
  width: min(360px, 86vw);
  background-color: var(--dark);
  border-left: 1px solid var(--line-gold);
  box-shadow: -20px 0 50px rgba(0, 0, 0, 0.45);
  transform: translateX(100%);
  transition: transform 0.4s var(--ease-out);
  z-index: 200;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-drawer.is-open {
  transform: translateX(0);
}

.mobile-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--line-gold);
}
.mobile-drawer__head .brand__logo { height: 36px; }
.mobile-drawer__close {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: var(--on-dark-soft);
  background: transparent;
  border: 1px solid var(--line-gold);
  border-radius: 6px;
  cursor: pointer;
  transition: color var(--d-base) var(--ease-out), border-color var(--d-base) var(--ease-out);
}
.mobile-drawer__close:hover {
  color: var(--gold-bright);
  border-color: var(--gold-bright);
}

.mobile-drawer__nav {
  list-style: none;
  margin: 0;
  padding: var(--s-3) var(--s-5);
}
.mobile-drawer__nav li + li {
  border-top: 1px solid rgba(212, 176, 112, 0.12);
}
.mobile-drawer__nav a {
  display: block;
  padding: var(--s-4) 0;
  color: var(--on-dark-soft);
  font-family: var(--font-body);
  font-size: var(--t-base);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  transition: color var(--d-base) var(--ease-out);
}
.mobile-drawer__nav a:hover,
.mobile-drawer__nav a.is-active { color: var(--gold-bright); }

.mobile-drawer__account {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  border-top: 1px solid var(--line-gold);
}
.mobile-drawer__account > div {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.mobile-drawer__acct-link {
  display: block;
  width: 100%;
  text-align: center;
  padding: var(--s-4);
  border: 1px solid var(--gold-bright);
  border-radius: 6px;
  background-color: var(--gold-bright);
  color: var(--dark);
  font-family: var(--font-body);
  font-size: var(--t-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  cursor: pointer;
  transition: opacity var(--d-base) var(--ease-out);
}
.mobile-drawer__acct-link:hover { opacity: 0.88; }
.mobile-drawer__acct-link--ghost {
  background-color: transparent;
  color: var(--on-dark);
  border-color: var(--line-gold);
}

.mobile-drawer__lang {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5) var(--s-6);
}
.mobile-drawer__lang-label {
  font-family: var(--font-body);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--on-dark-soft);
}
.mobile-drawer__lang .lang-switch__btn { padding: 9px 18px; font-size: 13px; }

body.menu-open { overflow: hidden; }

@media (max-width: 880px) {
  .tool-btn--menu { display: grid; }
  .mobile-drawer { display: flex; }
}

/* Desktop: panel i backdrop ne postoje (hamburger je sakriven) */
@media (min-width: 881px) {
  .drawer-backdrop { display: none; }
}

/* ================================================================
   HERO — Cream, asymmetric, image-forward, conversion CTAs
   ================================================================ */

.hero {
  position: relative;
  min-height: 100vh;
  padding-top: 130px;
  padding-bottom: var(--s-16);
  overflow: hidden;
  isolation: isolate;
  background-color: var(--cream);
}

.hero__glow {
  position: absolute;
  top: 8%;
  right: 5%;
  width: 60vw;
  height: 60vw;
  max-width: 800px;
  max-height: 800px;
  background:
    radial-gradient(circle at center,
      rgba(212, 176, 112, 0.45) 0%,
      rgba(160, 120, 44, 0.18) 30%,
      rgba(138, 40, 24, 0.05) 55%,
      transparent 72%);
  filter: blur(80px);
  z-index: 0;
  pointer-events: none;
  animation: heroGlow 16s ease-in-out infinite;
}

@keyframes heroGlow {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.85; }
  50%      { transform: translate(2%, -2%) scale(1.06); opacity: 1; }
}

.hero__grid {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 540px);
  grid-template-areas: "statement display";
  align-items: center;
  gap: var(--s-8) clamp(2rem, 5vw, 5rem);
  min-height: calc(100vh - 200px);
}

.hero__statement {
  grid-area: statement;
  align-self: center;
  padding-block: var(--s-6);
  max-width: 580px;
}

.hero__eyebrow {
  display: block;
  margin-bottom: var(--s-5);
  opacity: 0;
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-display);
  line-height: 0.96;
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  margin-bottom: var(--s-6);
  text-wrap: balance;
}

.hero__title em {
  font-style: italic;
  color: var(--gold-deep);
  font-weight: 400;
}

.hero__title .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(36px);
  will-change: transform, opacity;
}

.hero__lead {
  font-family: var(--font-body);
  font-size: var(--t-lg);
  line-height: var(--leading-relaxed);
  color: var(--ink-soft);
  max-width: 48ch;
  margin-bottom: var(--s-10);
  opacity: 0;
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  flex-wrap: wrap;
  opacity: 0;
}

/* Hero icon display */
.hero__display {
  grid-area: display;
  position: relative;
  justify-self: end;
  width: 100%;
  max-width: 420px;
  align-self: center;
  opacity: 0;
}

.hero__display-stage {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  isolation: isolate;
}

.hero__display-light {
  position: absolute;
  top: -8%;
  left: 50%;
  transform: translateX(-50%);
  width: 115%;
  height: 80%;
  background:
    radial-gradient(ellipse at 50% 30%,
      rgba(255, 220, 130, 0.55) 0%,
      rgba(212, 176, 112, 0.28) 35%,
      rgba(138, 40, 24, 0.10) 60%,
      transparent 78%);
  filter: blur(28px);
  z-index: 0;
  pointer-events: none;
}

.hero__display-image {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  padding: clamp(1rem, 3vw, 1.75rem);
  box-sizing: border-box;
  object-fit: contain;
  object-position: center;
  z-index: 2;
  filter:
    drop-shadow(0 28px 48px rgba(31, 18, 8, 0.26))
    drop-shadow(0 12px 28px rgba(138, 40, 24, 0.22))
    drop-shadow(0 0 50px rgba(212, 176, 112, 0.38));
  will-change: opacity, transform;
}

.hero__caption {
  margin-top: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  opacity: 0;
}

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

.hero__caption-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-sm);
  color: var(--gold-deep);
  font-feature-settings: "lnum" 1;
  white-space: nowrap;
}

.hero__caption-meta {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-sm);
  color: var(--ink-soft);
  text-align: right;
  white-space: nowrap;
  font-feature-settings: "lnum" 1;
}

.hero__caption-name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-xl);
  color: var(--ink);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 960px) {
  .hero__grid {
    grid-template-columns: 1fr;
    grid-template-areas: "display" "statement";
    gap: var(--s-10);
    min-height: auto;
  }
  .hero__display { justify-self: center; max-width: 380px; }
  .hero__title { font-size: clamp(2.5rem, 7.5vw, 4rem); }
  .hero__statement { padding-block: 0; text-align: center; }
  .hero__lead { margin-inline: auto; }
  .hero__actions { justify-content: center; }
  .hero__caption { grid-template-columns: 1fr; gap: var(--s-2); text-align: center; }
  .hero__caption-meta { text-align: center; }
}

/* Scroll mark — vertical, centered */
.scroll-mark {
  position: absolute;
  bottom: var(--s-6);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-extreme);
  color: var(--ink-mute);
  z-index: 4;
  opacity: 0;
}

.scroll-mark__line {
  display: inline-block;
  width: 1px;
  height: 56px;
  background: linear-gradient(to bottom, var(--gold), transparent 95%);
  position: relative;
  overflow: hidden;
}

.scroll-mark__line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent, var(--gold-bright), transparent);
  animation: scrollLineV 2.4s ease-in-out infinite;
}

@keyframes scrollLineV {
  0%   { transform: translateY(-100%); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateY(100%); opacity: 0; }
}

.scroll-mark__arrow {
  color: var(--gold);
  margin-top: -2px;
}

@media (max-width: 720px) {
  .scroll-mark { display: none; }
}

/* ================================================================
   TRUST STRIP — 4 quick signals after hero
   ================================================================ */

.trust-strip {
  background-color: var(--cream-warm);
  padding-block: var(--s-12);
  border-block: 1px solid var(--line-gold);
}

.trust-strip__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.trust-strip__item {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  position: relative;
  padding: var(--s-2) var(--s-6);
}

.trust-strip__item + .trust-strip__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 60%;
  background-color: var(--line-gold);
  transform: translateY(-50%);
}

.trust-strip__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  color: var(--gold-deep);
}

.trust-strip__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.trust-strip__title {
  font-family: var(--font-display);
  font-size: var(--t-base);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
  line-height: 1.2;
}

.trust-strip__sub {
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-mute);
}

@media (max-width: 960px) {
  .trust-strip__list { grid-template-columns: repeat(2, 1fr); gap: var(--s-6); }
  .trust-strip__item + .trust-strip__item::before { display: none; }
}

@media (max-width: 540px) {
  .trust-strip__list { grid-template-columns: 1fr; }
}

/* ================================================================
   FEATURED PRODUCTS — 4-card grid with prices + CTA
   ================================================================ */

.featured-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-8);
}

@media (max-width: 1100px) { .featured-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-10); } }
@media (max-width: 540px)  { .featured-grid { grid-template-columns: 1fr; } }

.product-card {
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform var(--d-base) var(--ease-out);
}

.product-card:hover { transform: translateY(-4px); }

.product-card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  background-color: var(--cream-paper);
  border: 1px solid var(--line-strong);
  overflow: hidden;
  isolation: isolate;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  margin-bottom: var(--s-5);
  display: block;
}

.product-card__media::before {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid var(--line-gold);
  opacity: 0.7;
  pointer-events: none;
  z-index: 3;
}

.product-card__media::after {
  content: '';
  position: absolute;
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
  width: 75%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(212, 176, 112, 0.30) 0%, transparent 65%);
  filter: blur(14px);
  z-index: 1;
  opacity: 0.7;
  transition: opacity var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out);
}

.product-card:hover .product-card__media::after {
  opacity: 1;
  transform: translateX(-50%) scale(1.08);
}

.product-card__media img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transition: transform var(--d-base) var(--ease-out);
  filter: drop-shadow(0 18px 30px rgba(31, 18, 8, 0.20));
}

.product-card:hover .product-card__media img { transform: scale(1.03); }

.product-card__badge {
  position: absolute;
  top: var(--s-3);
  left: var(--s-3);
  padding: 4px var(--s-3);
  background-color: var(--gold-deep);
  color: var(--cream-paper);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--tracking-extreme);
  text-transform: uppercase;
  z-index: 4;
}

.product-card__category {
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-extreme);
  color: var(--gold-deep);
  margin-bottom: var(--s-2);
}

.product-card__title {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 500;
  color: var(--ink);
  margin-bottom: var(--s-3);
  line-height: 1.2;
}

.product-card__title em { font-style: italic; color: var(--gold-deep); }

.product-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
  margin-top: auto;
}

.product-card__price {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  color: var(--ink);
  font-feature-settings: "lnum" 1;
}

.product-card__price-from {
  font-style: italic;
  font-size: 0.85em;
  color: var(--ink-mute);
  margin-right: 4px;
}

.product-card__sizes {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--ink-mute);
}

/* ================================================================
   CATEGORIES — browse tiles
   ================================================================ */

.categories {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-8);
}

@media (max-width: 960px) { .categories { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .categories { grid-template-columns: 1fr; } }

/* ================================================================
   CAROUSEL — horizontalni slider (kategorije, recenzije)
   Scroll-snap track + strelice. Native swipe na touch (overflow-x).
   Konstantna visina (jedan red) → dodavanje stavki ne pomera sekcije
   ispod, pa ne remeti ScrollTrigger pin pozicije.
   ================================================================ */
.oc-carousel { position: relative; }

.oc-carousel__track {
  display: flex;
  gap: var(--s-8);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;                 /* Firefox */
  /* Dovoljno prostora da hover lift + drop senka kartica ne budu odsečeni
     track overflow-om (overflow-x:auto forsira i overflow-y na auto). */
  padding: 14px 6px 32px;
  scroll-padding-left: 6px;
}
.oc-carousel__track::-webkit-scrollbar { display: none; } /* Chrome/Safari/Edge */

.oc-carousel__track > * {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

/* Širina stavke po tipu carousela */
.categories-track > * { width: clamp(220px, 30%, 300px); }
.reviews-track > *    { width: clamp(280px, 44%, 420px); }

@media (max-width: 640px) {
  .categories-track > * { width: 78%; }
  .reviews-track > *    { width: 86%; }
}

/* Strelice — preko ivica track-a */
.oc-carousel__arrow {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  z-index: 5;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--cream-paper);
  color: var(--ink);
  font-size: 1.6rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color var(--d-base) var(--ease-out),
              color var(--d-base) var(--ease-out),
              transform var(--d-base) var(--ease-out),
              opacity var(--d-base) var(--ease-out);
  box-shadow: 0 4px 16px rgba(31, 18, 8, 0.12);
}
.oc-carousel__arrow:hover {
  border-color: var(--gold);
  color: var(--gold);
  transform: translateY(-50%) scale(1.06);
}
.oc-carousel__arrow--prev { left: -10px; }
.oc-carousel__arrow--next { right: -10px; }
.oc-carousel__arrow[disabled] { opacity: 0; pointer-events: none; }

/* Mobilni: swipe je prirodan, strelice smetaju → sakrij */
@media (max-width: 640px) {
  .oc-carousel__arrow { display: none; }
}

/* Stagger "ulet" kartica kad sekcija uđe u vidokrug (klasu reveal-in dodaje
   index.js preko IntersectionObserver-a, per-kartica delay inline). Kartice su
   BEZ ove klase podrazumevano vidljive — ako JS padne, ništa se ne sakriva. */
@keyframes ocCardIn {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}
.oc-carousel__track.reveal-in > * {
  animation: ocCardIn 0.6s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
}
@media (prefers-reduced-motion: reduce) {
  .oc-carousel__track.reveal-in > * { animation: none; }
}

.category-tile {
  display: flex;
  flex-direction: column;
  position: relative;
  background-color: var(--cream-paper);
  border: 1px solid var(--line-strong);
  padding: var(--s-5);
  transition: all var(--d-base) var(--ease-out);
}

.category-tile:hover {
  border-color: var(--gold);
  transform: translateY(-3px);
}

.category-tile__media {
  position: relative;
  aspect-ratio: 5 / 4;
  background-color: var(--cream-warm);
  margin-bottom: var(--s-5);
  /* Flex umesto grid + place-items: pouzdaniji centar na svim browser-ima
     kad img ima i max-width i intrinsic dimensions koje variraju (3D side
     view vs flat, transparent vs white background). */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
}

.category-tile__media::before {
  content: '';
  position: absolute;
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(212, 176, 112, 0.28) 0%, transparent 70%);
  filter: blur(10px);
  z-index: 1;
  pointer-events: none;
}

.category-tile__media img {
  position: relative;
  z-index: 2;
  /* Img sad eksplicitno zauzima ceo prostor (width/height 100%) a object-fit
     skalira sadržaj unutra. Bez ovog, img je samo svoja intrinsic veličina
     ograničena max-width-om, pa identičan source na različitim ekranima
     izgleda različito centriran. */
  width: 100%;
  height: 100%;
  /* Sigurnosni padding da slika ne dodirne ivice tile-a kad je source uzak.
     Iznosi su clamp da bi se manje skupljali na malim card-ima. */
  padding: clamp(0.75rem, 4%, 1.5rem);
  object-fit: contain;
  object-position: center center;
  transition: transform var(--d-slow) var(--ease-out);
  filter: drop-shadow(0 16px 24px rgba(31, 18, 8, 0.15));
}

.category-tile:hover .category-tile__media img {
  transform: scale(1.05);
}

.category-tile__title {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 500;
  color: var(--ink);
  margin-bottom: var(--s-2);
}

.category-tile__count {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--t-eyebrow);
  letter-spacing: var(--tracking-extreme);
  text-transform: uppercase;
  color: var(--gold-deep);
}

.category-tile__count::after {
  content: '\2192';
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1em;
  transition: transform var(--d-base) var(--ease-out);
}

.category-tile:hover .category-tile__count::after {
  transform: translateX(4px);
}

/* ================================================================
   STORY / Workshop
   ================================================================ */

.story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

.story--reverse .story__media { order: 2; }

.story__media {
  position: relative;
  aspect-ratio: 4 / 5;
  background-color: var(--cream-warm);
  border: 1px solid var(--line-strong);
  overflow: hidden;
  display: grid;
  place-items: center;
  color: var(--ink-fade);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-lg);
}

.story__media::before {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid var(--line-gold);
  opacity: 0.6;
  pointer-events: none;
  z-index: 1;
}

.story__body { max-width: 520px; }

.story__title {
  font-family: var(--font-display);
  font-size: var(--t-4xl);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  margin: var(--s-5) 0 var(--s-6);
  text-wrap: balance;
}

.story__title em { font-style: italic; color: var(--gold-deep); }

.story__text {
  font-size: var(--t-base);
  line-height: var(--leading-relaxed);
  color: var(--ink-soft);
  margin-bottom: var(--s-5);
  max-width: 54ch;
}

.story__pull {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-xl);
  color: var(--gold-deep);
  margin: var(--s-8) 0;
  padding-left: var(--s-6);
  border-left: 2px solid var(--gold);
  line-height: 1.3;
  max-width: 36ch;
}

.story__signature {
  margin-top: var(--s-8);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-base);
  color: var(--gold-deep);
}

@media (max-width: 880px) {
  .story { grid-template-columns: 1fr; }
  .story--reverse .story__media { order: 0; }
}

/* ================================================================
   PROCESS — Sticky scene "kako se pravi ikona"
   ScrollTrigger pin-uje .process-scene__pin, vertikalni scroll
   kontroliše build-up slojeva.
   ================================================================ */

.process-scene {
  position: relative;
  background-color: var(--cream-warm);
  border-block: 1px solid var(--line-gold);
  /* Scene height = 5 koraka × ~80vh + buffer = pin pun trip */
  height: 480vh;
}

.process-scene__pin {
  /* CSS sticky pin — browser-native, ne kešira poziciju, ne može da "promaši
     piksel". Parent .process-scene je 480vh i pravi scroll runway; pin sticks
     dok ne dođe do dna scene. JS samo čita poziciju i bira korak (initProcessScene). */
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-block: var(--s-10);
}

.process-scene__head {
  text-align: center;
  margin-bottom: var(--s-10);
  max-width: 720px;
  margin-inline: auto;
}

.process-scene__eyebrow { margin-bottom: var(--s-4); }

.process-scene__title {
  font-family: var(--font-display);
  font-size: var(--t-4xl);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  text-wrap: balance;
}

.process-scene__title em {
  font-style: italic;
  color: var(--gold-deep);
}

.process-scene__grid {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) minmax(280px, 360px);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  min-height: 480px;
}

/* ===== LEVO — vertikalni step indikator ===== */
.process-rail {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  position: relative;
}

.process-rail::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background-color: var(--line-gold);
}

.process-rail__step {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-5);
  padding-left: 0;
  cursor: default;
}

/* Default (inactive) state — krug je UVEK opaque da linija ne probija kroz njega.
   Boje su svetlije da daju "faded" izgled, bez korišćenja opacity. */
.process-rail__num {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-sm);
  color: var(--ink-fade);
  background-color: var(--cream-paper);
  border: 1px solid var(--line);
  border-radius: 50%;
  font-feature-settings: "lnum" 1;
  transition: all var(--d-base) var(--ease-out);
  position: relative;
  z-index: 2;
}

.process-rail__step.is-active .process-rail__num {
  background-color: var(--gold);
  color: var(--cream-paper);
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(160, 120, 44, 0.15);
}

.process-rail__step.is-done .process-rail__num {
  background-color: var(--gold-deep);
  color: var(--cream-paper);
  border-color: var(--gold-deep);
}

.process-rail__label {
  font-family: var(--font-display);
  font-size: var(--t-base);
  color: var(--ink-fade);
  letter-spacing: -0.005em;
  transition: color var(--d-base) var(--ease-out), font-weight var(--d-base) var(--ease-out);
}

.process-rail__step.is-active .process-rail__label {
  color: var(--ink);
  font-weight: 500;
}

.process-rail__step.is-done .process-rail__label {
  color: var(--ink-soft);
}

/* ===== SREDINA — stage gde se ikona gradi ===== */
.process-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-5);
}

.process-stage__inner {
  position: relative;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 4 / 5;
  isolation: isolate;
}

.process-stage__halo {
  position: absolute;
  top: -10%;
  left: -10%;
  width: 120%;
  height: 120%;
  background: radial-gradient(circle at 50% 40%,
    rgba(212, 176, 112, 0.0) 0%,
    rgba(160, 120, 44, 0.0) 40%,
    transparent 70%);
  filter: blur(40px);
  z-index: 0;
  pointer-events: none;
  transition: background 1.2s var(--ease-out);
}

.process-stage.has-gold .process-stage__halo {
  background: radial-gradient(circle at 50% 40%,
    rgba(255, 220, 130, 0.55) 0%,
    rgba(212, 176, 112, 0.28) 40%,
    transparent 70%);
}

/* Svaki layer */
.proc-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.6s var(--ease-out), transform 0.8s var(--ease-out);
  will-change: opacity, transform;
}

.proc-layer.is-visible { opacity: 1; }

/* Layer 1 — wooden plank */
.proc-layer--plank {
  z-index: 1;
  filter: drop-shadow(0 16px 28px rgba(31, 18, 8, 0.32));
}

.proc-layer--plank svg {
  width: 100%;
  height: 100%;
}

/* Layer 2 — gesso (preko drveta, paper-white) */
.proc-layer--gesso {
  z-index: 2;
  filter: drop-shadow(0 6px 14px rgba(31, 18, 8, 0.10));
}

.proc-layer--gesso svg {
  width: 100%;
  height: 100%;
}

/* Layer 3 — sketch (silueta ikone u tamnom, kao crtež) */
.proc-layer--sketch {
  z-index: 3;
  object-fit: contain;
  padding: 12%;
  filter: grayscale(1) brightness(0.55) contrast(1.6);
  mix-blend-mode: multiply;
  opacity: 0;
}

.proc-layer--sketch.is-visible { opacity: 0.85; }

/* Layer 4 — gold aura iza ikone */
.proc-layer--gold {
  z-index: 4;
  display: grid;
  place-items: center;
}

.proc-gold-aura {
  width: 65%;
  aspect-ratio: 1;
  background:
    radial-gradient(circle,
      rgba(255, 220, 130, 0.85) 0%,
      rgba(212, 176, 112, 0.55) 25%,
      rgba(160, 120, 44, 0.25) 50%,
      transparent 70%);
  filter: blur(8px);
  animation: procGoldPulse 4.5s ease-in-out infinite;
}

@keyframes procGoldPulse {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50%      { transform: scale(1.04); opacity: 1; }
}

/* Layer 5 — finalna ikona u zlatu */
.proc-layer--icon {
  z-index: 5;
  object-fit: contain;
  padding: 10%;
  filter:
    drop-shadow(0 14px 24px rgba(31, 18, 8, 0.30))
    drop-shadow(0 0 30px rgba(212, 176, 112, 0.45));
}

/* Layer 6 — gloss varnish sweep */
.proc-layer--varnish {
  z-index: 6;
  overflow: hidden;
  pointer-events: none;
}

.proc-varnish-sweep {
  position: absolute;
  top: -10%;
  left: -50%;
  width: 50%;
  height: 120%;
  background: linear-gradient(115deg,
    transparent 30%,
    rgba(255, 245, 220, 0.0) 45%,
    rgba(255, 245, 220, 0.45) 50%,
    rgba(255, 245, 220, 0.0) 55%,
    transparent 70%);
  transform: translateX(0);
  opacity: 0;
}

.proc-layer--varnish.is-visible .proc-varnish-sweep {
  opacity: 1;
  animation: procVarnishSweep 2.4s ease-out forwards;
}

@keyframes procVarnishSweep {
  0%   { transform: translateX(0); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translateX(400%); opacity: 0.6; }
}

.process-stage__caption {
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-sm);
  color: var(--gold-deep);
  letter-spacing: var(--tracking-wide);
}

.process-stage__step-num {
  font-feature-settings: "lnum" 1;
}

/* ===== DESNO — copy panel ===== */
.process-copy {
  position: relative;
  min-height: 320px;
}

.process-copy__panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
  pointer-events: none;
}

.process-copy__panel.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.process-copy__tag {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-extreme);
  color: var(--gold-deep);
  padding: 4px var(--s-3);
  border: 1px solid var(--line-gold);
  margin-bottom: var(--s-5);
}

.process-copy__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3vw, 2.5rem);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  margin-bottom: var(--s-5);
  text-wrap: balance;
}

.process-copy__title em {
  font-style: italic;
  color: var(--gold-deep);
}

.process-copy__text {
  font-size: var(--t-base);
  line-height: var(--leading-relaxed);
  color: var(--ink-soft);
  margin-bottom: var(--s-6);
  max-width: 36ch;
}

.process-copy__facts {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line-gold);
}

.process-copy__facts li {
  position: relative;
  padding-left: var(--s-5);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-sm);
  color: var(--ink-soft);
}

.process-copy__facts li::before {
  content: '\2726';
  position: absolute;
  left: 0;
  color: var(--gold);
  font-style: normal;
  font-size: 0.7em;
  top: 6px;
}

/* ===== Progress bar na dnu ===== */
.process-progress {
  position: absolute;
  bottom: var(--s-8);
  left: 50%;
  transform: translateX(-50%);
  width: min(420px, 60vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
}

.process-progress__track {
  width: 100%;
  height: 2px;
  background-color: var(--line-gold);
  position: relative;
  overflow: hidden;
}

.process-progress__fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright));
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.15s linear;
  will-change: transform;
}

.process-progress__hint {
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-extreme);
  color: var(--gold-deep);
  text-align: center;
  width: 100%;
  display: block;
}

/* ===== Tablet & mobile — prirodan vertical scroll, sticky stage =====
   Bez pin-a, bez snap-a. Naslov sekcije vidljiv gore, stage se lepi
   ispod fixed topbar-a, copy paneli skroluju normalno ispod stage-a.
   IntersectionObserver detektuje koji panel je u view i transformira stage.
   UX šema je ista kao Apple/Linear product pages. */
@media (max-width: 960px) {
  .process-scene {
    height: auto;
  }

  .process-scene__pin {
    position: relative;
    height: auto;
    min-height: 0;
    display: block;
    padding-block: 0 var(--s-10);
    overflow: visible;
  }

  /* SECTION HEADER — sticky na vrhu sekcije, prati auto-hide topbar-a.
     Koristi --topbar-current-h (0 kad je topbar sakriven, puna visina kad
     je vidljiv) — bez ovog naslov ostaje na 64px ostavljajući prazninu iznad. */
  .process-scene__head {
    position: sticky;
    top: var(--topbar-current-h, 64px);
    z-index: 6;
    background-color: var(--cream-warm);
    text-align: center;
    margin: 0 calc(-1 * var(--gutter));
    padding: var(--s-4) var(--gutter);
    transition: top 0.35s var(--ease-out);
  }

  .process-scene__eyebrow {
    margin-bottom: var(--s-2);
    font-size: var(--t-eyebrow);
  }

  .process-scene__title {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: var(--t-xl);
    max-width: 480px;
    margin-inline: auto;
  }

  /* Grid → block flow */
  .process-scene__grid {
    display: block;
    gap: 0;
    min-height: 0;
  }

  /* RAIL — sakriven na mobile (IO drives stage state, dots redundantni
     jer copy panels su svi vidljivi pa se već vidi gde si u sekvenci) */
  .process-rail {
    display: none;
  }

  /* STAGE — sticky ISPOD naslova sekcije. Top prati naslov pozicije i
     auto-hide topbar-a kroz --topbar-current-h. */
  .process-stage {
    position: sticky;
    top: calc(var(--topbar-current-h, 64px) + var(--process-head-h, 80px));
    z-index: 5;
    background-color: var(--cream-warm);
    padding-block: var(--s-3) var(--s-3);
    margin: 0 calc(-1 * var(--gutter)) var(--s-4);
    padding-inline: var(--gutter);
    box-shadow: 0 12px 16px -8px rgba(31, 18, 8, 0.08);
    transition: top 0.35s var(--ease-out);
  }

  .process-stage__inner {
    width: min(42vw, 180px);
    height: auto;
    aspect-ratio: 4 / 5;
    max-width: none;
    margin-inline: auto;
  }

  .process-stage__caption {
    font-size: var(--t-xs);
    margin-top: var(--s-2);
  }

  /* COPY paneli — SVI vidljivi, vertical scroll.
     Override desktop absolute swap mehanike. */
  .process-copy {
    min-height: 0;
    position: relative;
  }

  .process-copy__panel,
  .process-copy__panel:not(.is-active),
  .process-copy__panel.is-active {
    position: relative;
    inset: auto;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    /* Visina panela = dostupan prostor ispod sticky stack-a, sa malo viška
       da uvek postoji scroll trigger. */
    min-height: calc(100svh - var(--topbar-h, 64px) - var(--process-head-h, 80px) - 280px);
    padding-block: var(--s-8);
    border-top: 1px solid var(--line-gold);
  }

  .process-copy__panel:first-child {
    border-top: none;
    padding-top: var(--s-5);
  }

  .process-copy__tag {
    margin-bottom: var(--s-4);
  }

  .process-copy__title {
    font-size: var(--t-2xl);
    margin-bottom: var(--s-4);
  }

  .process-copy__text {
    font-size: var(--t-base);
    line-height: var(--leading-relaxed);
    max-width: 42ch;
    margin-bottom: var(--s-5);
    /* Override desktop max-width: 36ch i centriraj */
    margin-inline: auto;
    /* Skinuti line-clamp */
    display: block;
    -webkit-line-clamp: none;
    line-clamp: none;
    overflow: visible;
  }

  /* Facts vidljive — text je dominantan element panela, ima mesta */
  .process-copy__facts {
    display: flex;
    text-align: left;
    align-self: center;
    width: max-content;
    max-width: 100%;
  }

  /* Progress bar skriven — copy paneli ispod stage-a su sami progress */
  .process-progress {
    display: none;
  }
}

/* Vrlo mali ekrani (iPhone SE i slični) */
@media (max-width: 480px) {
  .process-scene__pin {
    padding-block: var(--s-10) var(--s-8);
  }

  .process-scene__title {
    font-size: var(--t-xl);
  }

  .process-stage__inner {
    width: min(45vw, 180px);
  }

  .process-copy__panel,
  .process-copy__panel:not(.is-active),
  .process-copy__panel.is-active {
    min-height: 50vh;
    padding-block: var(--s-6);
  }

  .process-copy__title {
    font-size: var(--t-xl);
  }

  .process-copy__text {
    font-size: var(--t-sm);
  }
}

/* ================================================================
   SPOTLIGHT — one featured icon (large, with spec list)
   ================================================================ */

.spotlight {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}

.spotlight__image-side {
  position: relative;
  aspect-ratio: 4 / 5;
  background-color: var(--cream-paper);
  border: 1px solid var(--line-strong);
  display: block;
  isolation: isolate;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  overflow: hidden;
}

.spotlight__image-side::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid var(--line-gold);
  opacity: 0.7;
  pointer-events: none;
  z-index: 3;
}

.spotlight__light {
  position: absolute;
  top: 6%;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  height: 65%;
  background: radial-gradient(ellipse at 50% 0%, rgba(212, 176, 112, 0.40) 0%, transparent 72%);
  filter: blur(20px);
  z-index: 0;
}

.spotlight__num {
  position: absolute;
  top: var(--s-5);
  left: var(--s-5);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-sm);
  color: var(--gold-deep);
  z-index: 4;
}

.spotlight__image {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 24px 40px rgba(31, 18, 8, 0.25));
}

.spotlight__body { max-width: 480px; }

.spotlight__title {
  font-family: var(--font-display);
  font-size: var(--t-4xl);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  margin: var(--s-5) 0 var(--s-6);
  text-wrap: balance;
}

.spotlight__title em { font-style: italic; color: var(--gold-deep); }

.spotlight__lead {
  font-size: var(--t-lg);
  line-height: var(--leading-relaxed);
  color: var(--ink-soft);
  margin-bottom: var(--s-8);
}

.spec-list {
  margin: 0 0 var(--s-10) 0;
  border-top: 1px solid var(--line);
}

.spec-list li {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--s-6);
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}

.spec-list li span:first-child {
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-extreme);
  color: var(--ink-mute);
}

.spec-list li span:last-child {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-base);
  color: var(--ink);
}

.spotlight__price {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  margin-bottom: var(--s-6);
  padding-block: var(--s-4);
  border-block: 1px solid var(--line);
}

.spotlight__price-from {
  font-style: italic;
  font-size: var(--t-sm);
  color: var(--ink-mute);
}

.spotlight__price-value {
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  color: var(--ink);
  font-feature-settings: "lnum" 1;
}

@media (max-width: 960px) {
  .spotlight { grid-template-columns: 1fr; }
}

/* ================================================================
   REVIEWS — testimonials with stars
   ================================================================ */

.reviews-meta {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-top: var(--s-5);
  font-family: var(--font-body);
  font-size: var(--t-sm);
  color: var(--ink-soft);
}

.stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--gold);
  font-size: var(--t-lg);
  letter-spacing: 1px;
  line-height: 1;
}

.stars--lg { font-size: var(--t-xl); }

.reviews {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-10);
}

@media (max-width: 880px) { .reviews { grid-template-columns: 1fr; gap: var(--s-10); } }

.review {
  position: relative;
  padding: var(--s-8);
  background-color: var(--cream-paper);
  border: 1px solid var(--line-strong);
  overflow: hidden;                 /* drži navodnik + accent liniju unutar kartice */
  box-shadow: 0 4px 18px rgba(31, 18, 8, 0.05);
  transition: transform var(--d-base) var(--ease-out),
              border-color var(--d-base) var(--ease-out),
              box-shadow var(--d-base) var(--ease-out);
}

/* Veliki dekorativni navodnik — zlatni watermark iza teksta */
.review::before {
  content: '\201C';
  position: absolute;
  top: 0.04em;
  right: 0.12em;
  font-family: var(--font-display);
  font-size: 7rem;
  line-height: 1;
  color: var(--gold);
  opacity: 0.13;
  pointer-events: none;
  z-index: 0;
}

/* Zlatna accent linija na vrhu — "uvuče se" sleva na hover */
.review::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-deep));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease-out);
}

/* Sadržaj (zvezde, citat, autor) iznad watermark-a */
.review > * {
  position: relative;
  z-index: 1;
}

.review:hover {
  transform: translateY(-5px);
  border-color: var(--gold);
  box-shadow: 0 14px 34px rgba(31, 18, 8, 0.12);
}

.review:hover::after {
  transform: scaleX(1);
}

.review__stars {
  margin-bottom: var(--s-4);
}

.review__quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-lg);
  line-height: 1.4;
  color: var(--ink);
  margin-bottom: var(--s-6);
  text-wrap: pretty;
}

.review__author {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-extreme);
  color: var(--ink-mute);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}

.review__author cite {
  font-style: normal;
  color: var(--gold-deep);
  font-weight: 600;
}

.review__verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  color: var(--gold-deep);
}

.review__verified::before {
  content: '\2713';
  font-weight: 700;
}

/* ================================================================
   FINAL CTA banner
   ================================================================ */

.final-cta {
  text-align: center;
  padding-block: clamp(5rem, 11vw, 11rem);
  position: relative;
  overflow: hidden;
  border-block: 1px solid var(--line-gold);
}

.final-cta__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80vw;
  height: 80vw;
  max-width: 900px;
  max-height: 900px;
  background: radial-gradient(circle, rgba(212, 176, 112, 0.18) 0%, transparent 65%);
  filter: blur(60px);
  z-index: 0;
  pointer-events: none;
}

.final-cta__inner {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin-inline: auto;
}

.final-cta__ornament {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-xl);
  color: var(--gold);
  margin-bottom: var(--s-5);
}

.final-cta__eyebrow { margin-bottom: var(--s-5); }

.final-cta__title {
  font-family: var(--font-display);
  font-size: var(--t-5xl);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  margin-bottom: var(--s-10);
  text-wrap: balance;
}

.final-cta__title em { font-style: italic; color: var(--gold-deep); }

.final-cta__buttons {
  display: flex;
  justify-content: center;
  gap: var(--s-6);
  flex-wrap: wrap;
}

/* Mobile: dva dugmeta jedno ispod drugog, iste širine */
@media (max-width: 720px) {
  .final-cta__buttons {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-4);
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }
  .final-cta__buttons .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ================================================================
   Buttons + links
   ================================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: var(--s-5) var(--s-10);
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  border: 1px solid transparent;
  transition: all var(--d-base) var(--ease-out);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

.btn-ink,
.btn-primary {
  background-color: var(--ink);
  color: var(--cream-paper);
  border-color: var(--ink);
}

.btn-ink:hover,
.btn-primary:hover {
  background-color: var(--gold-deep);
  border-color: var(--gold-deep);
  color: var(--cream-paper);
  transform: translateY(-1px);
}

/* btn-danger — za destruktivne akcije (Obriši) — koristi se u admin i u
   client-side action menijima. Već postoji .btn-sm na liniji ~3969. */
.btn-danger {
  background-color: var(--rust, #B0432A);
  color: var(--cream-paper);
  border-color: var(--rust, #B0432A);
}
.btn-danger:hover {
  background-color: var(--ink);
  border-color: var(--ink);
  color: var(--cream-paper);
  transform: translateY(-1px);
}

.btn-gold {
  background-color: var(--gold);
  color: var(--cream-paper);
  border-color: var(--gold);
}

.btn-gold:hover {
  background-color: var(--gold-deep);
  border-color: var(--gold-deep);
  color: var(--cream-paper);
  transform: translateY(-1px);
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
  border-width: 1.5px;
}

.btn-ghost:hover {
  background-color: var(--ink);
  border-color: var(--ink);
  color: var(--cream-paper);
  transform: translateY(-1px);
}

/* btn-secondary alias za .btn-ghost — koristi se semantički kad postoji
   primarni + sekundarni par dugmadi (CTA + alt action). Identičan stil. */
.btn-secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
  border-width: 1.5px;
}
.btn-secondary:hover {
  background-color: var(--ink);
  border-color: var(--ink);
  color: var(--cream-paper);
  transform: translateY(-1px);
}

.btn-lg {
  padding: var(--s-6) var(--s-12);
  font-size: var(--t-sm);
}

.btn-arrow::after {
  content: '\2192';
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15em;
  transition: transform var(--d-base) var(--ease-out);
}

.btn-arrow:hover::after { transform: translateX(4px); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-body);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--ink);
  padding-block: var(--s-2);
  border-bottom: 1px solid var(--gold);
}

.link-arrow::after {
  content: '\2192';
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1em;
  color: var(--gold-deep);
  transition: transform var(--d-base) var(--ease-out);
}

.link-arrow:hover { color: var(--gold-deep); }
.link-arrow:hover::after { transform: translateX(6px); }

.link-arrow--quiet {
  border-bottom-color: transparent;
  color: var(--ink-soft);
}

.link-arrow--quiet:hover {
  color: var(--gold-deep);
  border-bottom-color: var(--gold);
}

/* ================================================================
   Magnetic wrapper
   ================================================================ */

.magnetic { display: inline-block; }
.magnetic__inner { display: inline-block; will-change: transform; }

/* ================================================================
   Footer (dark)
   ================================================================ */

.site-footer {
  background-color: var(--dark);
  color: var(--on-dark-soft);
  padding-block: var(--s-24) var(--s-10);
  font-size: var(--t-sm);
  border-top: 4px solid var(--gold);
  position: relative;
}

.site-footer::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background-color: rgba(212, 176, 112, 0.5);
}

.site-footer h4 {
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-extreme);
  color: var(--on-dark);
  margin-bottom: var(--s-6);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: var(--s-12);
  margin-bottom: var(--s-16);
}

@media (max-width: 880px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .site-footer__grid { grid-template-columns: 1fr; gap: var(--s-10); } }

/* Footer newsletter prijava — traka između grida i dna */
.site-footer__newsletter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-8);
  flex-wrap: wrap;
  padding-block: var(--s-8);
  margin-bottom: var(--s-6);
  border-top: 1px solid rgba(212, 176, 112, 0.2);
}
.site-footer__newsletter h4 { margin: 0 0 var(--s-2); }
.site-footer__newsletter-text p {
  font-size: var(--t-sm);
  color: var(--on-dark-soft);
  margin: 0;
  max-width: 46ch;
  line-height: var(--leading-relaxed);
}
.footer-news-form {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  align-items: center;
}
.footer-news-form input[type="email"] {
  padding: 0.7rem 1rem;
  min-width: 240px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(212, 176, 112, 0.35);
  color: var(--on-dark);
  font-size: var(--t-sm);
  border-radius: 2px;
}
.footer-news-form input[type="email"]::placeholder { color: var(--on-dark-mute); }
.footer-news-form input[type="email"]:focus { outline: none; border-color: var(--gold-bright); }
.footer-news-form button {
  padding: 0.7rem 1.5rem;
  background: var(--gold);
  color: var(--dark);
  border: none;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  border-radius: 2px;
  transition: background var(--d-base) var(--ease-out);
}
.footer-news-form button:hover { background: var(--gold-bright); }
.footer-news-form button:disabled { opacity: 0.6; cursor: default; }
.footer-news-msg { flex-basis: 100%; font-size: var(--t-sm); margin: var(--s-1) 0 0; }
.footer-news-msg.is-ok  { color: var(--gold-bright); }
.footer-news-msg.is-err { color: #e7a3a3; }
@media (max-width: 700px) {
  .site-footer__newsletter { flex-direction: column; align-items: flex-start; }
}

.site-footer__brand p {
  font-size: var(--t-sm);
  line-height: var(--leading-relaxed);
  max-width: 36ch;
  color: var(--on-dark-soft);
}

.site-footer__brand .brand { margin-bottom: var(--s-5); color: var(--on-dark); }

.site-footer ul li { margin-bottom: var(--s-3); }

.site-footer a {
  color: var(--on-dark-soft);
  transition: color var(--d-base) var(--ease-out);
}

.site-footer a:hover { color: var(--gold-bright); }

.site-footer__bottom {
  padding-top: var(--s-8);
  border-top: 1px solid rgba(212, 176, 112, 0.2);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-4);
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--on-dark-fade);
}

/* ================================================================
   Reveal helpers
   ================================================================ */

[data-reveal] { opacity: 0; will-change: opacity, transform; }
[data-reveal="mask"] { opacity: 1; clip-path: inset(0 100% 0 0); }
[data-reveal-stagger] > * { opacity: 0; will-change: opacity, transform; }

/* Defensive: gallery i product kartice koje su dinamično renderovane iz JS-a
   ne smeju ostati nevidljive zbog reveal-stagger CSS-a iznad. Inline opacity
   iz JS-a treba da pobedi, ali ovo je explicit guard za slučaj da neki parent
   ima reveal-stagger atribut (npr. omaškom na nekoj stranici). */
.gallery-grid > .gallery-item:not(.gallery-item--skeleton),
.featured-grid > .product-card:not(.is-skeleton),
.categories > .category-tile:not(.is-skeleton) {
  opacity: 1;
}

.no-js [data-reveal],
.no-js [data-reveal-stagger] > * {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
}

/* ================================================================
   SHOP PAGE — prodavnica (category-mockup.html)
   ================================================================ */

.shop-page {
  background-color: var(--cream);
  padding-top: 88px; /* visina fixed topbar-a */
}

/* ===== Breadcrumb ===== */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-body);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--ink-mute);
  margin-bottom: var(--s-6);
  flex-wrap: wrap;
  row-gap: 4px;
}

@media (max-width: 640px) {
  .breadcrumb {
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    gap: 6px;
    row-gap: 2px;
  }
  /* Sakrijemo "Početna" na mobilu da skratimo putanju — prvi sep posle
     toga takođe nestaje. Korisnik može da koristi logo da se vrati na home. */
  .breadcrumb > a:first-child,
  .breadcrumb > a:first-child + .breadcrumb__sep { display: none; }
}

.breadcrumb a {
  color: var(--ink-mute);
  transition: color var(--d-base) var(--ease-out);
  padding-block: 2px;
  border-bottom: 1px solid transparent;
}

.breadcrumb a:hover {
  color: var(--gold-deep);
  border-bottom-color: var(--gold);
}

.breadcrumb__sep {
  color: var(--ink-fade);
}

.breadcrumb [aria-current="page"] {
  color: var(--ink);
  font-weight: 500;
}

/* ===== Shop hero ===== */
.shop-hero {
  padding-block: clamp(2rem, 5vw, 4rem) clamp(2rem, 4vw, 3rem);
  position: relative;
}

.shop-hero__head {
  max-width: 720px;
}

.shop-hero__title {
  font-family: var(--font-display);
  font-size: var(--t-5xl);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  margin: var(--s-4) 0 var(--s-5);
  text-wrap: balance;
}

.shop-hero__title em {
  font-style: italic;
  color: var(--gold-deep);
}

.shop-hero__lead {
  font-size: var(--t-lg);
  line-height: var(--leading-relaxed);
  color: var(--ink-soft);
  max-width: 60ch;
}

/* Uvodni SEO tekst kategorije — render.php ubaci ceo <section> kroz {{shop_intro}}
   samo kad kategorija ima opis. Prazno za /prodavnica/ i kategorije bez opisa. */
.shop-intro {
  padding-block: 0 clamp(1.5rem, 3vw, 2.5rem);
}
.shop-intro__body {
  max-width: 70ch;
  color: var(--ink-soft);
  line-height: var(--leading-relaxed);
}
.shop-intro__body p {
  margin: 0 0 0.85em;
}
.shop-intro__body p:last-child {
  margin-bottom: 0;
}

/* ===== Shop layout (sidebar + main) ===== */
.shop-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: clamp(2rem, 3vw, 3rem);
  align-items: start;
}

/* ===== Sidebar =====
   Sticky top prati --topbar-current-h (0 kad topbar nestane, puna kad je tu)
   da kada se topbar sakrije sidebar takođe klizi gore i koristi taj prostor. */
.shop-sidebar {
  position: sticky;
  top: calc(var(--topbar-current-h, 64px) + var(--s-4));
  align-self: start;
  background-color: var(--cream-paper);
  border: 1px solid var(--line-strong);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  max-height: calc(100svh - var(--topbar-current-h, 64px) - var(--s-8));
  overflow-y: auto;
  transition: top 0.35s var(--ease-out), max-height 0.35s var(--ease-out);
  /* Custom scrollbar — suptilan */
  scrollbar-width: thin;
  scrollbar-color: var(--gold-deep) transparent;
}

.shop-sidebar::-webkit-scrollbar { width: 6px; }
.shop-sidebar::-webkit-scrollbar-track { background: transparent; }
.shop-sidebar::-webkit-scrollbar-thumb { background: var(--gold-faint); border-radius: 3px; }
.shop-sidebar::-webkit-scrollbar-thumb:hover { background: var(--gold-deep); }

.shop-sidebar__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line-gold);
}

.shop-sidebar__title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-xl);
  font-weight: 500;
  color: var(--ink);
  margin: 0;
}

.shop-sidebar__reset {
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-extreme);
  color: var(--gold-deep);
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  padding-block: 2px;
  transition: color var(--d-base) var(--ease-out), border-color var(--d-base) var(--ease-out);
}

.shop-sidebar__reset:hover {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

/* ===== Filter group u sidebar-u — vertikalni stack ===== */
.filter-group {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

/* Svaki sledeći filter-group dobija dodatni razmak iznad — ranije je
   "Privesci" (zadnji chip prethodne grupe) sedeo skoro slepljen na
   "DIMENZIJA" label. Kombinujemo gap iz roditelja (.shop-sidebar) + ovaj
   margin → jasno razdvajanje grupa. */
.filter-group + .filter-group {
  margin-top: var(--s-4);
}

.filter-group__label {
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-extreme);
  color: var(--gold-deep);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s-2);
}

.filter-chips {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}

/* Dimenzije idu u 2-kolonski grid (uštedi prostor) */
.filter-chips--grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
}

.filter-chips--grid .filter-chip {
  text-align: center;
}

/* "Sve" chip u grid-u zauzima ceo red */
.filter-chips--grid .filter-chip[data-filter="all"] {
  grid-column: 1 / -1;
}

/* ===== Main area (count + sort + grid) ===== */
.shop-main {
  min-width: 0;
}

.shop-main__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--line-gold);
  margin-bottom: var(--s-8);
}

.filter-chip {
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  padding: 7px var(--s-4);
  background-color: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
  cursor: pointer;
  transition: all var(--d-base) var(--ease-out);
  white-space: nowrap;
  font-feature-settings: "lnum" 1;
  text-align: left; /* kategorije se lepše čitaju levo */
}

.filter-chip:hover {
  border-color: var(--gold);
  color: var(--gold-deep);
}

.filter-chip.is-active {
  background-color: var(--ink);
  color: var(--cream-paper);
  border-color: var(--ink);
}

.filter-chip.is-active:hover {
  background-color: var(--gold-deep);
  border-color: var(--gold-deep);
}

/* Parent kategorija — vizuelno teža (semibold + tamna ivica) */
.filter-chip--parent {
  font-weight: 600;
  border-color: var(--line-strong);
  color: var(--ink);
}

/* Child kategorija — manja, indented sa em-dash u tekstu */
.filter-chip--child {
  font-size: calc(var(--t-xs) - 1px);
  padding: 5px var(--s-3);
  color: var(--ink-mute);
  border-style: dashed;
  border-color: var(--line);
}

.filter-chip--child:hover {
  color: var(--gold-deep);
  border-style: solid;
  border-color: var(--gold);
}

.filter-chip--child.is-active {
  background-color: var(--gold-deep);
  color: var(--cream-paper);
  border-color: var(--gold-deep);
  border-style: solid;
}

.shop-toolbar__count {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-base);
  color: var(--ink-mute);
  font-feature-settings: "lnum" 1;
}

/* ===== Sort dropdown ===== */
.sort-control {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.sort-control__label {
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-extreme);
  color: var(--gold-deep);
}

.sort-control__select-wrap {
  position: relative;
  display: inline-block;
}

.sort-control__select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid var(--line-strong);
  padding: 8px var(--s-8) 8px var(--s-4);
  font-family: var(--font-body);
  font-size: var(--t-sm);
  color: var(--ink);
  cursor: pointer;
  transition: border-color var(--d-base) var(--ease-out);
  letter-spacing: var(--tracking-wide);
}

.sort-control__select:hover,
.sort-control__select:focus-visible {
  border-color: var(--gold);
  outline: none;
}

.sort-control__icon {
  position: absolute;
  right: var(--s-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--gold-deep);
  pointer-events: none;
}

/* ===== Mobile: sidebar postaje collapsible "Filteri" toggle =====
   Header je klikabilan, otvara/zatvara filter panel. Default zatvoreno. */
@media (max-width: 960px) {
  .shop-layout {
    grid-template-columns: 1fr;
    gap: var(--s-6);
  }

  .shop-sidebar {
    position: sticky;
    top: var(--topbar-current-h, 64px);
    z-index: 40;
    max-height: none;
    overflow-y: visible;
    padding: 0;
    gap: 0;
    background-color: var(--cream-paper);
  }

  .shop-sidebar__header {
    cursor: pointer;
    padding: var(--s-4) var(--s-5);
    margin: 0;
    border-bottom: 1px solid transparent;
    transition: border-color var(--d-base) var(--ease-out);
    user-select: none;
  }

  .shop-sidebar.is-open .shop-sidebar__header {
    border-bottom-color: var(--line-gold);
  }

  .shop-sidebar__title {
    display: flex;
    align-items: center;
    gap: var(--s-3);
  }

  .shop-sidebar__title::after {
    content: '';
    width: 10px;
    height: 10px;
    border-right: 1.5px solid var(--gold-deep);
    border-bottom: 1.5px solid var(--gold-deep);
    transform: rotate(45deg);
    margin-top: -4px;
    transition: transform 0.3s var(--ease-out);
  }

  .shop-sidebar.is-open .shop-sidebar__title::after {
    transform: rotate(-135deg);
    margin-top: 4px;
  }

  .shop-sidebar__panel {
    display: flex;
    flex-direction: column;
    gap: var(--s-6);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s var(--ease-out), padding 0.4s var(--ease-out);
    padding: 0 var(--s-5);
  }

  .shop-sidebar.is-open .shop-sidebar__panel {
    max-height: 70vh;
    overflow-y: auto;
    padding: var(--s-4) var(--s-5) var(--s-5);
  }

  /* Na mobilu chips u kategorijama postaju horizontal scroll umesto stack */
  .shop-sidebar .filter-chips:not(.filter-chips--grid) {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--s-2);
  }
  .shop-sidebar .filter-chip {
    text-align: center;
  }
  .shop-main__head {
    flex-direction: row;
    gap: var(--s-3);
  }
}

@media (max-width: 540px) {
  .shop-main__head {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-3);
  }
  .shop-main__head .sort-control {
    justify-content: space-between;
  }
}

/* ===== Shop grid (3 kolone pošto je sidebar uzeo prostor) ===== */
.shop-grid-section {
  padding-bottom: var(--section-y);
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-10) var(--s-6);
  margin-bottom: var(--s-12);
}

@media (max-width: 1280px) { .shop-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 960px)  { .shop-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-8); } }
@media (max-width: 720px)  { .shop-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .shop-grid { grid-template-columns: 1fr; } }

.shop-grid .product-card.is-hidden {
  display: none;
}

/* Grid transition kad se filteri promene */
.shop-grid .product-card {
  transition: opacity var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out);
}

.shop-grid.is-filtering .product-card {
  opacity: 0;
  transform: translateY(8px);
}

/* ===== Empty state ===== */
.shop-empty {
  text-align: center;
  padding: var(--s-20) var(--s-6);
  background-color: var(--cream-paper);
  border: 1px solid var(--line-strong);
  margin-bottom: var(--s-16);
}

.shop-empty__ornament {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-2xl);
  color: var(--gold);
  margin-bottom: var(--s-5);
}

.shop-empty__title {
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  font-weight: 400;
  color: var(--ink);
  margin-bottom: var(--s-3);
}

.shop-empty__text {
  font-size: var(--t-base);
  color: var(--ink-soft);
  margin-bottom: var(--s-6);
  max-width: 48ch;
  margin-inline: auto;
}

/* ===== Pagination ===== */
.shop-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--s-2);
  padding-block: var(--s-8);
}

.shop-pagination__btn,
.shop-pagination__page {
  min-width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  font-family: var(--font-body);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--line-strong);
  cursor: pointer;
  transition: all var(--d-base) var(--ease-out);
  font-feature-settings: "lnum" 1;
  padding-inline: var(--s-3);
}

.shop-pagination__btn:not(:disabled):hover,
.shop-pagination__page:hover {
  border-color: var(--gold);
  color: var(--gold-deep);
}

.shop-pagination__page.is-active {
  background-color: var(--ink);
  color: var(--cream-paper);
  border-color: var(--ink);
}

.shop-pagination__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.shop-pagination__sep {
  display: inline-grid;
  place-items: center;
  height: 38px;
  padding-inline: var(--s-2);
  color: var(--ink-fade);
  font-family: var(--font-display);
  font-style: italic;
}

@media (max-width: 540px) {
  .shop-pagination__page,
  .shop-pagination__btn {
    min-width: 34px;
    height: 34px;
    font-size: var(--t-xs);
  }
}

/* ================================================================
   AUTH PAGES (login, register, forgot password)
   ================================================================ */

.auth-page {
  background-color: var(--cream);
  /* NE dodajemo padding-top ovde — header offset uzimaju per-column padding-top,
     tako da brand panel (dark) pokriva sav prostor do gore (ne ostaje creamy
     traka iznad njega). */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Split layout: brand panel left + form right */
.auth-layout {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  min-height: calc(100vh - 60px); /* minus minimal footer */
}

@media (max-width: 880px) {
  .auth-layout { grid-template-columns: 1fr; min-height: 0; }
}

/* ===== Brand panel (left, dark) ===== */
.auth-brand {
  position: relative;
  background-color: var(--dark);
  /* Fotografija radionice (ručno oslikavanje) iza jakog tamnog overlay-a —
     atmosfera „ručna izrada", a tekst ostaje potpuno čitljiv. Namerno NE
     koristimo sliku ikone (sečenje lica svetitelja bi bilo nezgodno). */
  background-image:
    linear-gradient(155deg, rgba(20, 12, 6, 0.74) 0%, rgba(20, 12, 6, 0.86) 55%, rgba(20, 12, 6, 0.95) 100%),
    url('/assets/images/rucno-oslikavanje-ikone-cetkicom.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--on-dark);
  /* Top padding kompenzuje 88px fixed header + dodatni vazduh */
  padding: calc(88px + clamp(2rem, 5vw, 4rem)) clamp(2rem, 5vw, 4rem) clamp(2rem, 5vw, 4rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
  isolation: isolate;
  border-right: 1px solid var(--gold-deep);
  min-height: 480px;
}

@media (max-width: 880px) {
  /* Mobile: header je fixed; brand panel full-width pa zadržava header offset gore */
  .auth-brand {
    border-right: none;
    border-bottom: 1px solid var(--gold-deep);
    min-height: 280px;
    padding: calc(88px + var(--s-6)) var(--s-6) var(--s-10);
  }
}

/* Trust signali uz formu (login/register) */
.auth-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(160, 120, 44, 0.18);
}
.auth-trust__item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  color: #6B5742;
  letter-spacing: 0.01em;
}
.auth-trust__item svg {
  flex-shrink: 0;
  color: var(--gold);
}

.auth-brand__glow {
  position: absolute;
  top: 30%;
  right: -20%;
  width: 80%;
  aspect-ratio: 1;
  background: radial-gradient(circle at center,
    rgba(212, 176, 112, 0.35) 0%,
    rgba(160, 120, 44, 0.12) 35%,
    transparent 70%);
  filter: blur(60px);
  z-index: 0;
  pointer-events: none;
}

.auth-brand__mark {
  position: absolute;
  /* Pozicioniran u gornju polovinu da ne kolidira sa naslovom/citatom dole */
  top: 22%;
  right: -8%;
  width: 50%;
  aspect-ratio: 1;
  opacity: 0.03;
  z-index: 0;
  pointer-events: none;
  filter: blur(1px);
}

.auth-brand__mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (max-width: 880px) {
  .auth-brand__mark {
    top: 10%;
    right: -10%;
    width: 70%;
    opacity: 0.04;
  }
}

.auth-brand__content {
  position: relative;
  z-index: 1;
  max-width: 480px;
}

.auth-brand__eyebrow {
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-extreme);
  color: var(--gold-bright);
  display: block;
  margin-bottom: var(--s-4);
}

.auth-brand__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--on-dark);
  margin: 0 0 var(--s-6);
}

.auth-brand__title em {
  font-style: italic;
  color: var(--gold-bright);
}

.auth-brand__quote {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-lg);
  line-height: 1.5;
  color: var(--on-dark-soft);
  padding-left: var(--s-5);
  border-left: 2px solid var(--gold);
}

.auth-brand__quote em {
  color: var(--gold-bright);
}

.auth-brand__perks {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.auth-brand__perks li {
  position: relative;
  padding-left: var(--s-6);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-base);
  color: var(--on-dark-soft);
}

.auth-brand__perks li::before {
  content: '\2726';
  position: absolute;
  left: 0;
  color: var(--gold-bright);
  font-style: normal;
  font-size: 0.85em;
  top: 4px;
}

/* ===== Form panel (right) ===== */
.auth-form-wrap {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  /* Top padding kompenzuje fixed header (88px) + dodaje vazduh iznad forme */
  padding: calc(88px + clamp(2rem, 4vw, 3rem)) clamp(1.5rem, 5vw, 4rem) clamp(2rem, 4vw, 3rem);
}

.auth-form-inner {
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}

.auth-breadcrumb {
  margin: 0;
}

.auth-form-head {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.auth-form-title {
  font-family: var(--font-display);
  font-size: var(--t-4xl);
  font-weight: 400;
  line-height: var(--leading-tight);
  color: var(--ink);
  margin: var(--s-3) 0 0;
}

.auth-form-title em {
  font-style: italic;
  color: var(--gold-deep);
}

.auth-form-lead {
  font-size: var(--t-base);
  line-height: var(--leading-relaxed);
  color: var(--ink-soft);
}

.auth-form-lead a {
  color: var(--gold-deep);
  border-bottom: 1px solid var(--line-gold);
}

.auth-form-lead a:hover {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.auth-form__fields-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-4);
}

@media (max-width: 480px) {
  .auth-form__fields-grid { grid-template-columns: 1fr; }
}

/* Password toggle wrapper */
.auth-password-wrap {
  position: relative;
}

.auth-password-wrap input {
  width: 100%;
  padding-right: 48px !important;
}

.auth-password-toggle {
  position: absolute;
  right: var(--s-3);
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: transparent;
  border: none;
  color: var(--ink-mute);
  cursor: pointer;
  transition: color var(--d-base) var(--ease-out);
}

.auth-password-toggle:hover {
  color: var(--gold-deep);
}

.auth-password-icon-hide { display: none; }
.auth-password-toggle.is-revealed .auth-password-icon-show { display: none; }
.auth-password-toggle.is-revealed .auth-password-icon-hide { display: block; }

/* Password strength meter */
.password-strength {
  margin-top: var(--s-2);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.password-strength__bar {
  height: 3px;
  background-color: var(--line);
  overflow: hidden;
}

.password-strength__fill {
  height: 100%;
  width: 0%;
  background-color: var(--rust);
  transition: width var(--d-base) var(--ease-out),
              background-color var(--d-base) var(--ease-out);
}

.password-strength__fill.is-weak    { width: 30%; background-color: var(--rust); }
.password-strength__fill.is-medium  { width: 60%; background-color: var(--gold-deep); }
.password-strength__fill.is-strong  { width: 100%; background-color: var(--gold); }

.password-strength__label {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--t-xs);
  color: var(--ink-mute);
}

/* Remember + forgot row */
.auth-form-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-top: calc(var(--s-2) * -1);
}

.auth-remember {
  margin: 0;
}

.auth-remember .checkout-terms__text {
  font-size: var(--t-sm);
}

.auth-forgot {
  font-family: var(--font-body);
  font-size: var(--t-sm);
  color: var(--gold-deep);
  border-bottom: 1px solid var(--line-gold);
  padding-block: 2px;
  transition: color var(--d-base) var(--ease-out), border-color var(--d-base) var(--ease-out);
}

.auth-forgot:hover {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

.auth-submit {
  width: 100%;
  justify-content: center;
  margin-top: var(--s-2);
}

.auth-submit.is-submitting {
  opacity: 0.7;
  pointer-events: none;
}

/* Divider "ili" */
.auth-divider {
  position: relative;
  text-align: center;
  margin: var(--s-3) 0;
}

.auth-divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background-color: var(--line-gold);
}

.auth-divider span {
  position: relative;
  padding: 0 var(--s-5);
  background-color: var(--cream);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-sm);
  color: var(--ink-mute);
}

/* Switch link (login ↔ register) */
.auth-switch {
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--t-sm);
  color: var(--ink-soft);
}

.auth-switch a {
  color: var(--gold-deep);
  border-bottom: 1px solid var(--gold);
  padding-block: 1px;
  font-weight: 500;
}

.auth-switch a:hover {
  color: var(--gold);
}

.auth-foot {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--t-xs);
  color: var(--ink-mute);
  text-align: center;
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  line-height: var(--leading-relaxed);
}

/* Single-page auth variant (forgot password — no split) */
.auth-page--single {
  background-color: var(--cream);
  align-items: center;
  justify-content: center;
}

.auth-single {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 5rem) var(--s-6);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}

.auth-single__mark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  opacity: 0.05;
  z-index: -1;
}

.auth-single__mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Success state (forgot password) */
.auth-success {
  text-align: center;
  padding: var(--s-10);
  background-color: var(--cream-paper);
  border: 1px solid var(--line-gold);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
}

.auth-success__icon {
  color: var(--gold);
  margin-bottom: var(--s-2);
  filter: drop-shadow(0 0 20px rgba(212, 176, 112, 0.4));
}

.auth-success__title {
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  font-weight: 400;
  color: var(--ink);
  margin: 0;
}

.auth-success__text {
  font-size: var(--t-base);
  line-height: var(--leading-relaxed);
  color: var(--ink-soft);
}

.auth-success__hint {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--t-sm);
  color: var(--ink-mute);
}

.auth-link-button {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--gold-deep);
  border-bottom: 1px solid var(--gold);
  cursor: pointer;
  font-weight: 500;
}

.auth-link-button:hover {
  color: var(--gold);
}

/* Minimal footer (auth pages) */
.site-footer--minimal {
  padding-block: var(--s-5);
  background-color: var(--dark);
  color: var(--on-dark-soft);
  border-top: 1px solid var(--gold-deep);
}

.site-footer--minimal .site-footer__bottom {
  border-top: none;
  padding-top: 0;
  font-size: var(--t-xs);
  color: var(--on-dark-fade);
}

.site-footer__bottom--solo a {
  color: var(--on-dark-soft);
}

.site-footer__bottom--solo a:hover {
  color: var(--gold-bright);
}

/* ================================================================
   ACCOUNT PAGE (dashboard sa sidebar nav-om)
   ================================================================ */

.account-page {
  background-color: var(--cream);
  padding-top: 88px;
}

.account-hero {
  padding-block: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem);
}

.account-hero__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--s-6);
  flex-wrap: wrap;
  margin-top: var(--s-5);
}

.account-hero__title {
  font-family: var(--font-display);
  font-size: var(--t-5xl);
  font-weight: 400;
  line-height: var(--leading-tight);
  color: var(--ink);
  margin: var(--s-3) 0 0;
}

.account-hero__title em {
  font-style: italic;
  color: var(--gold-deep);
}

.account-hero__logout {
  flex-shrink: 0;
}

.account-hero__logout svg {
  margin-right: var(--s-1);
}

.account-section {
  padding-bottom: var(--section-y);
}

.account-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}

@media (max-width: 880px) {
  .account-layout { grid-template-columns: 1fr; }
}

/* Sidebar */
.account-nav {
  position: sticky;
  top: 100px;
  align-self: start;
  background-color: var(--cream-paper);
  border: 1px solid var(--line-strong);
  padding: var(--s-4);
}

@media (max-width: 880px) {
  .account-nav { position: static; }
}

.account-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.account-nav a,
.account-nav button.account-nav__logout {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  font-family: var(--font-body);
  font-size: var(--t-sm);
  color: var(--ink-soft);
  border-left: 2px solid transparent;
  margin-left: -2px;
  transition: all var(--d-base) var(--ease-out);
  position: relative;
  /* Button reset — bez ovog dugme ima default browser stil */
  background: none;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
}

.account-nav a:hover,
.account-nav button.account-nav__logout:hover {
  color: var(--gold-deep);
  background-color: var(--cream-warm);
  border-left-color: var(--gold);
}

.account-nav a.is-active {
  color: var(--ink);
  background-color: var(--cream-warm);
  border-left-color: var(--gold);
  font-weight: 500;
}

.account-nav a svg,
.account-nav button.account-nav__logout svg {
  flex-shrink: 0;
  color: var(--gold-deep);
}

.account-nav__badge {
  margin-left: auto;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-xs);
  color: var(--gold-deep);
  background-color: var(--cream);
  padding: 2px var(--s-2);
  border: 1px solid var(--line-gold);
  border-radius: 99px;
  font-feature-settings: "lnum" 1;
}

.account-nav__divider {
  height: 1px;
  background-color: var(--line);
  margin-block: var(--s-3);
}

.account-nav__logout {
  color: var(--rust) !important;
}

.account-nav__logout svg {
  color: var(--rust) !important;
}

.account-nav__logout:hover {
  background-color: rgba(138, 40, 24, 0.06) !important;
  border-left-color: var(--rust) !important;
}

/* Content */
.account-content {
  min-width: 0;
}

.account-tab {
  display: none;
  animation: tabPanelFade 0.4s var(--ease-out);
}

.account-tab.is-active {
  display: block;
}

/* Profile card */
.account-profile-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s-5);
  align-items: center;
  padding: var(--s-6);
  background-color: var(--cream-paper);
  border: 1px solid var(--line-strong);
  margin-bottom: var(--s-8);
}

@media (max-width: 540px) {
  .account-profile-card {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
  }
  .account-profile-card > .link-arrow {
    grid-column: 1 / 3;
    justify-self: start;
  }
}

.account-profile-card__avatar {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  background-color: var(--gold-deep);
  color: var(--cream-paper);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-2xl);
  font-weight: 500;
  border-radius: 50%;
}

.account-profile-card__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.account-profile-card__greeting {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 500;
  color: var(--ink);
}

.account-profile-card__email {
  font-family: var(--font-body);
  font-size: var(--t-sm);
  color: var(--ink-soft);
}

.account-profile-card__meta {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-xs);
  color: var(--ink-mute);
  margin-top: 2px;
}

/* Quick stats */
.account-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  margin-bottom: var(--s-10);
}

@media (max-width: 720px) { .account-stats { grid-template-columns: 1fr; } }

.account-stat {
  background-color: var(--cream-paper);
  border: 1px solid var(--line);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.account-stat__label {
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-extreme);
  color: var(--gold-deep);
}

.account-stat__value {
  font-family: var(--font-display);
  font-size: var(--t-3xl);
  font-weight: 500;
  color: var(--ink);
  font-feature-settings: "lnum" 1;
  line-height: 1;
}

.account-stat__unit {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-base);
  color: var(--ink-mute);
  margin-left: var(--s-2);
  font-weight: 400;
}

/* Block (Recent orders, Adrese) */
.account-block {
  margin-bottom: var(--s-10);
}

.account-block__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-4);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line-gold);
  margin-bottom: var(--s-5);
}

.account-block__title {
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  font-weight: 400;
  color: var(--ink);
  margin: 0;
}

.account-block__count {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-sm);
  color: var(--ink-mute);
}

/* Orders list */
.account-orders {
  list-style: none;
  padding: 0;
  margin: 0;
}

.account-order {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto auto auto;
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-4) var(--s-5);
  background-color: var(--cream-paper);
  border: 1px solid var(--line);
  margin-bottom: var(--s-3);
  transition: border-color var(--d-base) var(--ease-out);
}

.account-order:hover {
  border-color: var(--gold);
}

@media (max-width: 880px) {
  .account-order {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto auto;
    row-gap: var(--s-2);
  }
  .account-order__num { grid-column: 1; grid-row: 1; }
  .account-order__status { grid-column: 2; grid-row: 1; justify-self: end; }
  .account-order__items { grid-column: 1 / 3; grid-row: 2; }
  .account-order__total { grid-column: 1; grid-row: 3; }
  .account-order__action { grid-column: 2; grid-row: 3; justify-self: end; }
}

.account-order__num {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.account-order__id {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-base);
  color: var(--ink);
  font-feature-settings: "lnum" 1;
  font-weight: 500;
}

.account-order__date {
  font-family: var(--font-body);
  font-size: var(--t-xs);
  color: var(--ink-mute);
}

.account-order__items {
  font-family: var(--font-body);
  font-size: var(--t-sm);
  color: var(--ink-soft);
  line-height: var(--leading-snug);
}

.account-order__status {
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-extreme);
  padding: 4px var(--s-3);
  white-space: nowrap;
}

.account-order__status--processing {
  background-color: var(--gold-faint);
  color: var(--gold-deep);
  border: 1px solid var(--line-gold);
}

.account-order__status--delivered {
  background-color: rgba(112, 130, 56, 0.12);
  color: #56660D;
  border: 1px solid rgba(112, 130, 56, 0.3);
}

.account-order__total {
  font-family: var(--font-display);
  font-size: var(--t-base);
  font-weight: 500;
  color: var(--ink);
  font-feature-settings: "lnum" 1;
  white-space: nowrap;
}

.account-order__action {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: var(--gold-deep);
  font-size: var(--t-lg);
  border: 1px solid var(--line-gold);
  background-color: var(--cream);
  transition: all var(--d-base) var(--ease-out);
  text-decoration: none;
}

.account-order__action:hover {
  background-color: var(--gold-deep);
  color: var(--cream-paper);
}

/* Address card */
.account-address-card {
  position: relative;
  padding: var(--s-5) var(--s-6);
  background-color: var(--cream-paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: var(--leading-relaxed);
  color: var(--ink-soft);
}

.account-address-card__label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-extreme);
  color: var(--gold-deep);
  margin-bottom: var(--s-2);
}

.account-address-card strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 500;
  color: var(--ink);
  margin-bottom: var(--s-1);
}

.account-address-card__edit {
  position: absolute;
  top: var(--s-5);
  right: var(--s-6);
  font-family: var(--font-body);
  font-size: var(--t-xs);
  color: var(--gold-deep);
  border-bottom: 1px solid var(--line-gold);
  padding-block: 1px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

.account-address-card__edit:hover {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

/* Tab placeholder */
.account-tab__placeholder {
  padding: var(--s-8);
  background-color: var(--cream-paper);
  border: 1px dashed var(--line-strong);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-base);
  color: var(--ink-mute);
  text-align: center;
}

.btn-sm {
  padding: var(--s-2) var(--s-4);
  font-size: var(--t-eyebrow);
}

/* ================================================================
   SEARCH RESULTS PAGE
   ================================================================ */

.search-page {
  background-color: var(--cream);
  padding-top: 88px;
}

.search-hero {
  position: relative;
  padding-block: clamp(2rem, 5vw, 4rem) clamp(2rem, 4vw, 3rem);
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid var(--line-gold);
}

.search-hero__glow {
  position: absolute;
  top: 0;
  left: 50%;
  width: 80vw;
  height: 80vw;
  max-width: 800px;
  max-height: 800px;
  background: radial-gradient(circle at center,
    rgba(212, 176, 112, 0.22) 0%,
    rgba(160, 120, 44, 0.08) 40%,
    transparent 70%);
  filter: blur(60px);
  transform: translate(-50%, -40%);
  z-index: 0;
  pointer-events: none;
}

.search-hero > .wrap {
  position: relative;
  z-index: 1;
}

/* Search form (large input) */
.search-form {
  display: flex;
  align-items: stretch;
  gap: var(--s-3);
  margin-top: var(--s-5);
  margin-bottom: var(--s-5);
}

.search-form__field {
  position: relative;
  flex: 1;
}

.search-form__icon {
  position: absolute;
  left: var(--s-5);
  top: 50%;
  transform: translateY(-50%);
  color: var(--gold-deep);
  pointer-events: none;
}

.search-form__input {
  width: 100%;
  height: 56px;
  padding: 0 var(--s-12) 0 calc(var(--s-5) + 32px);
  background-color: var(--cream-paper);
  border: 1px solid var(--line-strong);
  font-family: var(--font-display);
  font-size: var(--t-xl);
  color: var(--ink);
  transition: border-color var(--d-base) var(--ease-out);
}

.search-form__input::placeholder {
  color: var(--ink-fade);
  font-style: italic;
}

.search-form__input:focus {
  outline: none;
  border-color: var(--gold);
}

.search-form__clear {
  position: absolute;
  right: var(--s-3);
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background-color: var(--cream-warm);
  border: none;
  color: var(--ink-mute);
  cursor: pointer;
  border-radius: 50%;
  transition: all var(--d-base) var(--ease-out);
}

.search-form__clear:hover {
  background-color: var(--rust);
  color: var(--cream-paper);
}

.search-form__submit {
  height: 56px;
  padding: 0 var(--s-8);
  white-space: nowrap;
}

@media (max-width: 540px) {
  .search-form {
    flex-direction: column;
  }
  .search-form__submit { width: 100%; }
}

.search-hero__meta {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-body);
  font-size: var(--t-sm);
  color: var(--ink-mute);
  flex-wrap: wrap;
}

.search-hero__count em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
  font-weight: 500;
}

.search-hero__sep {
  color: var(--ink-fade);
}

.search-hero__time {
  font-family: var(--font-display);
  font-style: italic;
}

/* Suggestions */
.search-suggestions {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px dashed var(--line-gold);
}

.search-suggestions__label {
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-extreme);
  color: var(--gold-deep);
}

.filter-chip--suggestion {
  font-size: calc(var(--t-xs) - 1px);
  padding: 5px var(--s-3);
}

/* Results section */
.search-results-section {
  padding-block: var(--s-10) var(--section-y);
}

/* Tabs */
.search-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--line-gold);
  margin-bottom: var(--s-10);
}

.search-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-6);
  background: transparent;
  border: none;
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 500;
  color: var(--ink-mute);
  cursor: pointer;
  transition: color var(--d-base) var(--ease-out);
}

.search-tab:hover { color: var(--gold-deep); }
.search-tab.is-active { color: var(--ink); }

.search-tab.is-active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--gold);
}

.search-tab__count {
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  color: var(--gold-deep);
  background-color: var(--cream-warm);
  padding: 2px var(--s-2);
  border-radius: 99px;
  font-feature-settings: "lnum" 1;
}

.search-tab.is-active .search-tab__count {
  background-color: var(--gold-deep);
  color: var(--cream-paper);
}

.search-tab-panel {
  animation: tabPanelFade 0.4s var(--ease-out);
}

.search-tab-panel[hidden] { display: none; }

/* Search product card — horizontalan layout, više informacija */
.search-products {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.search-product-card {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: var(--s-6);
  padding: var(--s-5);
  background-color: var(--cream-paper);
  border: 1px solid var(--line);
  transition: border-color var(--d-base) var(--ease-out),
              transform var(--d-base) var(--ease-out);
  text-decoration: none;
}

.search-product-card:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
}

@media (max-width: 600px) {
  .search-product-card {
    grid-template-columns: 1fr;
  }
}

.search-product-card__media {
  position: relative;
  aspect-ratio: 1;
  background-color: var(--cream-warm);
  padding: var(--s-3);
  isolation: isolate;
}

.search-product-card__media::before {
  content: '';
  position: absolute;
  top: 8%;
  left: 50%;
  width: 80%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(212, 176, 112, 0.25) 0%, transparent 65%);
  filter: blur(10px);
  transform: translateX(-50%);
  z-index: 0;
}

.search-product-card__media img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 14px rgba(31, 18, 8, 0.15));
}

.search-product-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-width: 0;
}

.search-product-card__category {
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-extreme);
  color: var(--gold-deep);
}

.search-product-card__title {
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  font-weight: 500;
  color: var(--ink);
  margin: 0;
  line-height: var(--leading-tight);
}

.search-product-card__title em {
  font-style: italic;
  color: var(--gold-deep);
}

.search-product-card__excerpt {
  font-size: var(--t-sm);
  line-height: var(--leading-relaxed);
  color: var(--ink-soft);
  margin: var(--s-2) 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.search-product-card__meta {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  flex-wrap: wrap;
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
  margin-top: auto;
}

.search-product-card__price {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 500;
  color: var(--ink);
  font-feature-settings: "lnum" 1;
}

.search-product-card__price-from {
  font-style: italic;
  font-size: 0.85em;
  color: var(--ink-mute);
  margin-right: 4px;
}

.search-product-card__sizes {
  font-family: var(--font-body);
  font-size: var(--t-xs);
  color: var(--ink-mute);
}

.search-product-card__cta {
  margin-left: auto;
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--gold-deep);
}

/* Page results (Stranice tab) */
.search-pages {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}

.search-page-result {
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--line);
}

.search-page-result__crumb {
  display: block;
  font-family: var(--font-body);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--gold-deep);
  margin-bottom: var(--s-2);
}

.search-page-result__title {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 500;
  color: var(--ink);
  line-height: var(--leading-snug);
  margin-bottom: var(--s-2);
  transition: color var(--d-base) var(--ease-out);
}

.search-page-result__title em {
  font-style: normal;
  background-color: rgba(212, 176, 112, 0.25);
  padding: 0 4px;
  border-radius: 2px;
}

.search-page-result__title:hover {
  color: var(--gold-deep);
}

.search-page-result__excerpt {
  font-size: var(--t-sm);
  line-height: var(--leading-relaxed);
  color: var(--ink-soft);
}

.search-page-result__excerpt em {
  font-style: normal;
  background-color: rgba(212, 176, 112, 0.18);
  padding: 0 3px;
  border-radius: 2px;
  font-weight: 500;
  color: var(--ink);
}

.search-tab__placeholder {
  padding: var(--s-10);
  background-color: var(--cream-paper);
  border: 1px dashed var(--line-strong);
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink-mute);
  text-align: center;
}

.search-empty {
  text-align: center;
  padding: var(--s-20) var(--s-6);
  max-width: 560px;
  margin: 0 auto;
}

.search-empty__actions {
  display: flex;
  justify-content: center;
  gap: var(--s-4);
  flex-wrap: wrap;
}

/* ================================================================
   LEGAL PAGES (Politika privatnosti, Uslovi, Plaćanje, Isporuka)
   ================================================================ */

.legal-page {
  background-color: var(--cream);
  padding-top: 88px;
}

.legal-hero {
  padding-block: clamp(2rem, 5vw, 4rem) clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--line-gold);
}

.legal-hero__head {
  margin-top: var(--s-5);
  max-width: 720px;
}

.legal-hero__title {
  font-family: var(--font-display);
  font-size: var(--t-5xl);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  margin: var(--s-4) 0 var(--s-4);
}

.legal-hero__title em {
  font-style: italic;
  color: var(--gold-deep);
}

.legal-hero__meta {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  font-family: var(--font-body);
  font-size: var(--t-sm);
  color: var(--ink-mute);
  flex-wrap: wrap;
}

.legal-hero__meta strong {
  color: var(--ink);
  font-weight: 500;
}

.legal-hero__sep {
  color: var(--ink-fade);
}

/* ===== Legal layout — TOC + content ===== */
.legal-section {
  padding-block: var(--s-12) var(--section-y);
}

.legal-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

@media (max-width: 960px) {
  .legal-layout { grid-template-columns: 1fr; }
}

/* ===== TOC sidebar ===== */
.legal-toc {
  position: sticky;
  top: 96px;
  align-self: start;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  padding-right: var(--s-3);
  scrollbar-width: thin;
  scrollbar-color: var(--gold-faint) transparent;
}

.legal-toc::-webkit-scrollbar { width: 4px; }
.legal-toc::-webkit-scrollbar-thumb { background: var(--gold-faint); border-radius: 2px; }

@media (max-width: 960px) {
  .legal-toc {
    position: static;
    max-height: none;
    overflow-y: visible;
    padding: var(--s-5);
    background-color: var(--cream-paper);
    border: 1px solid var(--line-strong);
    margin-bottom: var(--s-8);
  }
}

.legal-toc__title {
  display: block;
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-extreme);
  color: var(--gold-deep);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line-gold);
  margin-bottom: var(--s-4);
}

.legal-toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.legal-toc__list a {
  display: block;
  padding: var(--s-2) var(--s-3);
  font-family: var(--font-body);
  font-size: var(--t-sm);
  color: var(--ink-mute);
  border-left: 2px solid transparent;
  margin-left: -2px;
  transition: all var(--d-base) var(--ease-out);
  line-height: var(--leading-snug);
}

.legal-toc__list a:hover {
  color: var(--gold-deep);
  border-left-color: var(--gold);
}

.legal-toc__list a.is-active {
  color: var(--ink);
  border-left-color: var(--gold);
  font-weight: 500;
  background-color: var(--cream-paper);
}

.legal-toc__related {
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
}

.legal-toc__related-label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-extreme);
  color: var(--gold-deep);
  margin-bottom: var(--s-3);
}

.legal-toc__related ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.legal-toc__related a {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-sm);
  color: var(--ink-soft);
  transition: color var(--d-base) var(--ease-out);
}

.legal-toc__related a:hover {
  color: var(--gold-deep);
}

/* ===== Legal content ===== */
.legal-content {
  font-size: var(--t-base);
  line-height: var(--leading-relaxed);
  color: var(--ink-soft);
  max-width: 720px;
  min-width: 0;
}

.legal-content__intro {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-xl);
  line-height: 1.55;
  color: var(--ink);
  padding-bottom: var(--s-8);
  margin-bottom: var(--s-10);
  border-bottom: 1px solid var(--line-gold);
}

.legal-content__intro a {
  color: var(--gold-deep);
  border-bottom: 1px solid var(--line-gold);
  font-style: normal;
}

.legal-content__intro a:hover {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

.legal-content__section {
  margin-bottom: var(--s-10);
  scroll-margin-top: 110px; /* za anchor links */
}

.legal-content__section h2 {
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  font-weight: 500;
  color: var(--ink);
  line-height: var(--leading-tight);
  margin: 0 0 var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
  letter-spacing: -0.01em;
}

.legal-content__section h3 {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 500;
  color: var(--ink);
  margin: var(--s-6) 0 var(--s-3);
}

.legal-content__section p {
  margin-bottom: var(--s-4);
}

.legal-content__section p:last-child {
  margin-bottom: 0;
}

.legal-content__section ul,
.legal-content__section ol {
  margin: var(--s-3) 0 var(--s-5);
  padding-left: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.legal-content__section ul {
  list-style: none;
  padding-left: var(--s-1);
}

.legal-content__section ul li {
  position: relative;
  padding-left: var(--s-6);
}

.legal-content__section ul li::before {
  content: '\2726';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--gold);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.85em;
}

.legal-content__section ol {
  padding-left: var(--s-5);
}

.legal-content__section ol li::marker {
  color: var(--gold-deep);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
}

.legal-content__section strong {
  color: var(--ink);
  font-weight: 600;
}

.legal-content__section a {
  color: var(--gold-deep);
  border-bottom: 1px solid var(--line-gold);
  transition: color var(--d-base) var(--ease-out), border-color var(--d-base) var(--ease-out);
}

.legal-content__section a:hover {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

.legal-content__contact-card {
  margin: var(--s-5) 0;
  padding: var(--s-5) var(--s-6);
  background-color: var(--cream-paper);
  border-left: 3px solid var(--gold);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: var(--leading-relaxed);
}

.legal-content__contact-card strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 500;
  color: var(--ink);
  margin-bottom: var(--s-2);
}

.legal-content__note {
  margin-top: var(--s-8);
  padding: var(--s-5);
  background-color: rgba(212, 176, 112, 0.08);
  border: 1px dashed var(--gold-deep);
  font-style: italic;
  font-size: var(--t-sm);
  color: var(--ink-soft);
}

.legal-content__note strong {
  color: var(--gold-deep);
  font-weight: 600;
}

/* ================================================================
   404 ERROR PAGE
   ================================================================ */

.error-page {
  background-color: var(--cream);
  padding-top: 88px;
  min-height: calc(100vh - 88px);
  display: flex;
  flex-direction: column;
}

.error-hero {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-block: clamp(4rem, 8vw, 7rem);
  overflow: hidden;
  isolation: isolate;
}

.error-hero__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80vw;
  height: 80vw;
  max-width: 900px;
  max-height: 900px;
  background: radial-gradient(circle at center,
    rgba(212, 176, 112, 0.25) 0%,
    rgba(160, 120, 44, 0.08) 40%,
    transparent 70%);
  filter: blur(80px);
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
}

.error-hero__mark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(360px, 50vw, 640px);
  aspect-ratio: 1;
  transform: translate(-50%, -55%);
  opacity: 0.05;
  z-index: 0;
  pointer-events: none;
}

.error-hero__mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.error-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-5);
}

.error-hero__code {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(5rem, 14vw, 9rem);
  font-weight: 400;
  line-height: 1;
  color: var(--gold-deep);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--s-2);
  font-feature-settings: "lnum" 1;
  text-shadow: 0 0 40px rgba(212, 176, 112, 0.3);
}

.error-hero__eyebrow {
  font-feature-settings: "lnum" 1;
}

.error-hero__title {
  font-family: var(--font-display);
  font-size: var(--t-5xl);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}

.error-hero__title em {
  font-style: italic;
  color: var(--gold-deep);
}

.error-hero__lead {
  font-size: var(--t-lg);
  line-height: var(--leading-relaxed);
  color: var(--ink-soft);
  max-width: 52ch;
}

.error-hero__actions {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--s-3);
}

.error-hero__suggestions {
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line-gold);
  width: 100%;
  max-width: 480px;
}

.error-hero__suggestions-label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-extreme);
  color: var(--gold-deep);
  margin-bottom: var(--s-4);
}

.error-hero__suggestions ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  justify-content: center;
}

.error-hero__suggestions a {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-base);
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line-gold);
  padding-block: 2px;
  transition: color var(--d-base) var(--ease-out), border-color var(--d-base) var(--ease-out);
}

.error-hero__suggestions a:hover {
  color: var(--gold-deep);
  border-bottom-color: var(--gold);
}

/* ================================================================
   THANK-YOU PAGE (post-checkout confirmation)
   ================================================================ */

.thank-you-page {
  background-color: var(--cream);
  padding-top: 88px;
}

/* ===== Confirmation hero ===== */
.ty-hero {
  position: relative;
  padding-block: clamp(3rem, 6vw, 5rem) clamp(3rem, 5vw, 4rem);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid var(--line-gold);
}

.ty-hero__glow {
  position: absolute;
  top: 20%;
  left: 50%;
  width: 80vw;
  height: 80vw;
  max-width: 900px;
  max-height: 900px;
  background: radial-gradient(circle at center,
    rgba(212, 176, 112, 0.32) 0%,
    rgba(160, 120, 44, 0.12) 35%,
    transparent 65%);
  filter: blur(60px);
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
  animation: tyGlowPulse 6s ease-in-out infinite;
}

@keyframes tyGlowPulse {
  0%, 100% { opacity: 0.85; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.05); }
}

/* "Sunčani zraci" za dramatiku — radial linije iza checkmark-a */
.ty-hero__rays {
  position: absolute;
  top: 30%;
  left: 50%;
  width: 320px;
  height: 320px;
  transform: translate(-50%, -50%);
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(212, 176, 112, 0.15) 8deg, transparent 16deg,
    transparent 38deg,
    rgba(212, 176, 112, 0.12) 46deg, transparent 54deg,
    transparent 76deg,
    rgba(212, 176, 112, 0.15) 84deg, transparent 92deg,
    transparent 114deg,
    rgba(212, 176, 112, 0.12) 122deg, transparent 130deg,
    transparent 152deg,
    rgba(212, 176, 112, 0.15) 160deg, transparent 168deg,
    transparent 190deg,
    rgba(212, 176, 112, 0.12) 198deg, transparent 206deg,
    transparent 228deg,
    rgba(212, 176, 112, 0.15) 236deg, transparent 244deg,
    transparent 266deg,
    rgba(212, 176, 112, 0.12) 274deg, transparent 282deg,
    transparent 304deg,
    rgba(212, 176, 112, 0.15) 312deg, transparent 320deg,
    transparent 342deg,
    rgba(212, 176, 112, 0.12) 350deg, transparent 358deg
  );
  opacity: 0.6;
  filter: blur(2px);
  z-index: 0;
  pointer-events: none;
  animation: tyRaysSpin 60s linear infinite;
}

@keyframes tyRaysSpin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.ty-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-5);
}

.ty-hero__inner .checkout-steps {
  margin: 0 0 var(--s-6);
  justify-content: center;
}

/* Checkmark u krugu — entrance animacija */
.ty-hero__check {
  width: 88px;
  height: 88px;
  color: var(--gold);
  margin-bottom: var(--s-2);
}

.ty-hero__check svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 0 30px rgba(212, 176, 112, 0.55));
}

.ty-hero__check-circle {
  stroke-dasharray: 230;
  stroke-dashoffset: 230;
  animation: tyCircleDraw 0.9s var(--ease-out) 0.15s forwards;
}

.ty-hero__check-mark {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: tyMarkDraw 0.5s var(--ease-out) 0.85s forwards;
}

@keyframes tyCircleDraw {
  to { stroke-dashoffset: 0; }
}

@keyframes tyMarkDraw {
  to { stroke-dashoffset: 0; }
}

.ty-hero__eyebrow {
  font-feature-settings: "lnum" 1;
}

.ty-hero__title {
  font-family: var(--font-display);
  font-size: var(--t-display);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}

.ty-hero__title em {
  font-style: italic;
  color: var(--gold-deep);
}

.ty-hero__lead {
  font-size: var(--t-lg);
  line-height: var(--leading-relaxed);
  color: var(--ink-soft);
  max-width: 54ch;
}

.ty-hero__lead strong {
  color: var(--ink);
  font-weight: 500;
}

.ty-hero__blessing {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-top: var(--s-4);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-xl);
  color: var(--gold-deep);
  padding: var(--s-4) var(--s-8);
  border-top: 1px solid var(--line-gold);
  border-bottom: 1px solid var(--line-gold);
}

.ty-hero__ornament {
  font-style: italic;
  color: var(--gold);
  font-size: 0.85em;
}

/* ===== Order summary block ===== */
.ty-summary-section {
  padding-block: clamp(3rem, 5vw, 5rem) var(--s-12);
}

.ty-summary {
  background-color: var(--cream-paper);
  border: 1px solid var(--line-strong);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  max-width: 920px;
  margin-inline: auto;
}

.ty-summary__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s-5);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--line-gold);
  margin-bottom: var(--s-6);
  flex-wrap: wrap;
}

.ty-summary__num {
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-extreme);
  color: var(--gold-deep);
  display: block;
  margin-bottom: var(--s-2);
}

.ty-summary__title {
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  font-weight: 400;
  color: var(--ink);
  margin: 0;
}

.ty-summary__head-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--s-2);
  text-align: right;
}

.ty-summary__date {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-sm);
  color: var(--ink-mute);
  font-feature-settings: "lnum" 1;
}

.ty-summary__items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.ty-summary__item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: var(--s-5);
  align-items: center;
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--line);
}

.ty-summary__item:last-child {
  border-bottom: none;
}

.ty-summary__media {
  width: 64px;
  height: 64px;
  background-color: var(--cream-warm);
  border: 1px solid var(--line);
  padding: var(--s-2);
}

.ty-summary__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ty-summary__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ty-summary__category {
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-extreme);
  color: var(--gold-deep);
}

.ty-summary__name {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 500;
  color: var(--ink);
  line-height: var(--leading-snug);
}

.ty-summary__name em {
  font-style: italic;
  color: var(--gold-deep);
}

.ty-summary__variant {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-sm);
  color: var(--ink-mute);
  margin-top: 2px;
}

.ty-summary__price {
  font-family: var(--font-display);
  font-size: var(--t-base);
  color: var(--ink);
  font-feature-settings: "lnum" 1;
  white-space: nowrap;
  font-weight: 500;
}

.ty-summary__lines {
  list-style: none;
  padding: var(--s-5) 0 0;
  margin: 0;
  border-top: 1px solid var(--line-gold);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.ty-summary__lines li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-body);
  font-size: var(--t-base);
  color: var(--ink-soft);
}

.ty-summary__lines li span:last-child {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
  font-feature-settings: "lnum" 1;
}

.ty-summary__line--payment {
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px dashed var(--line);
}

.ty-summary__line--payment span:last-child {
  font-style: normal !important;
  font-family: var(--font-body) !important;
  font-weight: 500;
  text-transform: uppercase;
  font-size: var(--t-eyebrow);
  letter-spacing: var(--tracking-wider);
  color: var(--gold-deep) !important;
}

.ty-summary__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: var(--s-4);
  margin-top: var(--s-4);
  border-top: 1px solid var(--line-gold);
}

.ty-summary__total-label {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 500;
  color: var(--ink);
}

.ty-summary__total-value {
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  font-weight: 500;
  color: var(--ink);
  font-feature-settings: "lnum" 1;
}

/* ===== Next steps timeline ===== */
.ty-next-section {
  padding-block: var(--section-y);
}

.ty-timeline {
  list-style: none;
  padding: 0;
  margin: var(--s-12) 0 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s-6);
  position: relative;
}

/* Connecting line between steps */
.ty-timeline::before {
  content: '';
  position: absolute;
  top: 26px;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(to right,
    var(--line-gold) 0%,
    var(--gold) 50%,
    var(--line-gold) 100%);
  z-index: 0;
}

@media (max-width: 1100px) { .ty-timeline { grid-template-columns: repeat(3, 1fr); } .ty-timeline::before { display: none; } }
@media (max-width: 720px)  { .ty-timeline { grid-template-columns: 1fr; gap: var(--s-5); } }

.ty-step {
  position: relative;
  z-index: 1;
  text-align: center;
  background-color: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
}

.ty-step__num {
  position: relative;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  background-color: var(--cream-paper);
  border: 1px solid var(--line-gold);
  border-radius: 50%;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-xl);
  font-weight: 500;
  color: var(--gold-deep);
  font-feature-settings: "lnum" 1;
}

.ty-step__num-deco {
  position: absolute;
  top: -8px;
  right: -8px;
  font-size: 10px;
  color: var(--gold);
  background-color: var(--cream-warm);
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
}

.ty-step__title {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 500;
  color: var(--ink);
  margin: 0;
}

.ty-step__text {
  font-size: var(--t-sm);
  line-height: var(--leading-relaxed);
  color: var(--ink-soft);
  margin: 0;
  max-width: 28ch;
}

.ty-step__time {
  margin-top: var(--s-2);
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-extreme);
  color: var(--gold-deep);
  padding: 4px var(--s-3);
  background-color: var(--cream-paper);
  border: 1px solid var(--line-gold);
}

/* ===== Instagram CTA banner ===== */
.ty-cta-section {
  padding-block: var(--section-y);
  border-top: 1px solid var(--line-gold);
}

.ty-cta {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

@media (max-width: 880px) {
  .ty-cta { grid-template-columns: 1fr; }
  .ty-cta__visual { order: -1; max-width: 320px; margin-inline: auto; }
}

.ty-cta__eyebrow {
  margin-bottom: var(--s-4);
  display: inline-block;
}

.ty-cta__title {
  font-family: var(--font-display);
  font-size: var(--t-4xl);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  margin-bottom: var(--s-5);
}

.ty-cta__title em {
  font-style: italic;
  color: var(--gold-deep);
}

.ty-cta__lead {
  font-size: var(--t-lg);
  line-height: var(--leading-relaxed);
  color: var(--ink-soft);
  margin-bottom: var(--s-8);
  max-width: 56ch;
}

.ty-cta__actions {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  flex-wrap: wrap;
}

.ty-cta__visual {
  position: relative;
  aspect-ratio: 4 / 5;
  background-color: var(--cream-paper);
  border: 1px solid var(--line-strong);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  isolation: isolate;
  overflow: hidden;
}

.ty-cta__visual::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid var(--line-gold);
  pointer-events: none;
  z-index: 3;
}

.ty-cta__visual img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 24px 40px rgba(31, 18, 8, 0.25));
}

.ty-cta__visual-glow {
  position: absolute;
  top: 8%;
  left: 50%;
  width: 80%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(212, 176, 112, 0.4) 0%, transparent 65%);
  filter: blur(20px);
  transform: translateX(-50%);
  z-index: 0;
}

/* ===== Contact reassurance bar ===== */
.ty-contact-bar {
  background-color: var(--dark);
  color: var(--cream-paper);
  padding-block: var(--s-8);
  border-top: 1px solid var(--gold-deep);
}

.ty-contact-bar__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-8);
  flex-wrap: wrap;
}

.ty-contact-bar__text {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.ty-contact-bar__text .eyebrow {
  color: var(--gold-bright);
}

.ty-contact-bar__msg {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-lg);
  color: var(--on-dark);
}

.ty-contact-bar__links {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  flex-wrap: wrap;
}

.ty-contact-bar__links .link-arrow {
  color: var(--on-dark);
  border-bottom-color: var(--gold);
}

.ty-contact-bar__links .link-arrow:hover {
  color: var(--gold-bright);
}

.ty-contact-bar__links .link-arrow--quiet {
  color: var(--on-dark-soft);
  border-bottom-color: transparent;
}

.ty-contact-bar__links .link-arrow--quiet:hover {
  color: var(--gold-bright);
  border-bottom-color: var(--gold);
}

@media (max-width: 720px) {
  .ty-contact-bar__inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ================================================================
   GALLERY PAGE
   ================================================================ */

.gallery-page {
  background-color: var(--cream);
  padding-top: 88px;
}

/* ===== Gallery hero ===== */
.gallery-hero {
  position: relative;
  padding-block: clamp(2rem, 5vw, 4rem) clamp(2rem, 4vw, 3rem);
  overflow: hidden;
  isolation: isolate;
}

.gallery-hero__glow {
  position: absolute;
  top: -10%;
  left: 40%;
  width: 60vw;
  height: 60vw;
  max-width: 720px;
  max-height: 720px;
  background: radial-gradient(circle at center,
    rgba(212, 176, 112, 0.3) 0%,
    rgba(160, 120, 44, 0.10) 40%,
    transparent 70%);
  filter: blur(60px);
  z-index: 0;
  pointer-events: none;
}

.gallery-hero__head {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin-top: var(--s-5);
}

.gallery-hero__title {
  font-family: var(--font-display);
  font-size: var(--t-5xl);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  margin: var(--s-4) 0 var(--s-5);
}

.gallery-hero__title em {
  font-style: italic;
  color: var(--gold-deep);
}

.gallery-hero__lead {
  font-size: var(--t-lg);
  line-height: var(--leading-relaxed);
  color: var(--ink-soft);
  max-width: 60ch;
}

/* ===== Filter bar (sticky kao na shop) =====
   Top prati --topbar-current-h da klizi zajedno sa auto-hide topbar-om. */
.gallery-filter {
  position: sticky;
  top: var(--topbar-current-h, 64px);
  z-index: 50;
  background-color: rgba(251, 245, 232, 0.92);
  backdrop-filter: saturate(160%) blur(8px);
  -webkit-backdrop-filter: saturate(160%) blur(8px);
  border-block: 1px solid var(--line-gold);
  padding-block: var(--s-4);
  margin-bottom: var(--s-10);
  transition: top 0.35s var(--ease-out);
}

.gallery-filter .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-5);
  flex-wrap: wrap;
}

.gallery-filter .filter-chips {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.gallery-filter .filter-chip {
  text-align: center;
}

.gallery-filter__count {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-base);
  color: var(--ink-mute);
  font-feature-settings: "lnum" 1;
  white-space: nowrap;
}

/* Toggle dugme (samo na mobile) — kompaktan "Filteri" sa chevron-om */
.gallery-filter__toggle {
  display: none;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--s-3) 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-lg);
  font-weight: 500;
}

.gallery-filter__toggle::after {
  content: '';
  width: 10px;
  height: 10px;
  border-right: 1.5px solid var(--gold-deep);
  border-bottom: 1.5px solid var(--gold-deep);
  transform: rotate(45deg);
  margin-top: -4px;
  transition: transform 0.3s var(--ease-out);
  flex-shrink: 0;
}

.gallery-filter.is-open .gallery-filter__toggle::after {
  transform: rotate(-135deg);
  margin-top: 4px;
}

.gallery-filter__toggle-meta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-style: normal;
  font-family: var(--font-body);
  font-size: var(--t-xs);
  color: var(--ink-mute);
  font-weight: 400;
  letter-spacing: var(--tracking-wide);
}

/* Mobile collapsible — toggle vidljivo, panel collapsed default */
@media (max-width: 720px) {
  .gallery-filter {
    padding-block: var(--s-2);
  }

  .gallery-filter .wrap {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .gallery-filter__toggle {
    display: flex;
  }

  .gallery-filter__panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s var(--ease-out), padding 0.4s var(--ease-out);
  }

  .gallery-filter.is-open .gallery-filter__panel {
    max-height: 320px;
    padding-block: var(--s-3) var(--s-2);
    overflow-y: auto;
  }

  .gallery-filter .filter-chips {
    gap: var(--s-2);
  }

  /* Inline count je redundantan kad je collapsed — toggle ga već pokazuje */
  .gallery-filter__count {
    display: none;
  }
}

/* ===== Gallery grid — CSS columns za masonry feel ===== */
.gallery-section {
  padding-bottom: var(--section-y);
}

.gallery-grid {
  columns: 4;
  column-gap: var(--s-5);
  margin-bottom: var(--s-10);
}

@media (max-width: 1100px) { .gallery-grid { columns: 3; } }
@media (max-width: 720px)  { .gallery-grid { columns: 2; column-gap: var(--s-4); } }
@media (max-width: 480px)  { .gallery-grid { columns: 1; } }

/* ===== Gallery item ===== */
.gallery-item {
  position: relative;
  margin: 0 0 var(--s-5);
  break-inside: avoid;
  background-color: var(--cream-paper);
  border: 1px solid var(--line);
  overflow: hidden;
  cursor: pointer;
  isolation: isolate;
  transition: border-color var(--d-base) var(--ease-out),
              transform var(--d-base) var(--ease-out);
  padding: clamp(1rem, 2.5vw, 1.75rem);
}

.gallery-item::before {
  content: '';
  position: absolute;
  top: 8%;
  left: 50%;
  width: 70%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(212, 176, 112, 0.22) 0%, transparent 65%);
  filter: blur(14px);
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
  transition: opacity var(--d-slow) var(--ease-out);
  opacity: 0.7;
}

.gallery-item:hover {
  border-color: var(--gold);
  transform: translateY(-3px);
}

.gallery-item:hover::before {
  opacity: 1;
}

.gallery-item.is-hidden {
  display: none;
}

/* Badge — slika vodi na proizvod u prodavnici */
.gallery-item__shop-badge {
  position: absolute;
  top: var(--s-3);
  right: var(--s-3);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: var(--gold-deep);
  color: var(--cream-paper);
  box-shadow: 0 4px 12px rgba(31, 18, 8, 0.28);
  pointer-events: none;
}

.gallery-item__shop-badge svg {
  display: block;
}

.gallery-item img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 16px 28px rgba(31, 18, 8, 0.18));
  transition: transform var(--d-slow) var(--ease-out);
}

.gallery-item:hover img {
  transform: scale(1.03);
}

/* ===== Caption overlay — bottom slide up on hover ===== */
.gallery-item__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: var(--s-6) var(--s-5) var(--s-4);
  background: linear-gradient(to top,
    rgba(20, 10, 5, 0.92) 0%,
    rgba(20, 10, 5, 0.7) 60%,
    transparent 100%);
  color: var(--cream-paper);
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  transform: translateY(20%);
  transition: opacity var(--d-base) var(--ease-out),
              transform var(--d-base) var(--ease-out);
}

.gallery-item:hover .gallery-item__caption,
.gallery-item:focus-within .gallery-item__caption {
  opacity: 1;
  transform: translateY(0);
}

.gallery-item__category {
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-extreme);
  color: var(--gold-bright);
}

.gallery-item__name {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 500;
  color: var(--cream-paper);
  line-height: var(--leading-snug);
}

.gallery-item__name em {
  font-style: italic;
  color: var(--gold-bright);
}

/* Touch devices — uvek prikaži caption (nema hover) */
@media (hover: none) {
  .gallery-item__caption {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== Empty state ===== */
.gallery-empty {
  text-align: center;
  padding: var(--s-20) var(--s-6);
  max-width: 560px;
  margin: 0 auto;
}

/* ================================================================
   LIGHTBOX
   ================================================================ */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--s-8) var(--s-6);
}

.lightbox.is-open {
  display: flex;
  animation: lightboxFadeIn 0.25s ease-out;
}

@keyframes lightboxFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(10, 5, 2, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: zoom-out;
}

.lightbox__content {
  position: relative;
  z-index: 1;
  /* Širina prati sliku (njen max box), ne dugačak naslov/CTA. Kontrole
     (strelice + X) su apsolutno pozicionirane u odnosu na ovu širinu, pa
     se time vezuju za sliku umesto za širinu teksta. */
  width: min(560px, 90vw);
  max-width: 90vw;
  max-height: 90vh;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: var(--s-5);
  align-items: center;
}

.lightbox__image-wrap {
  display: grid;
  place-items: center;
  min-height: 0;
  max-height: 70vh;
}

.lightbox__image {
  max-width: min(560px, 90vw);
  max-height: 70vh;
  width: auto;
  height: auto;
  object-fit: contain;
  filter:
    drop-shadow(0 24px 48px rgba(0, 0, 0, 0.5))
    drop-shadow(0 0 60px rgba(212, 176, 112, 0.35));
  animation: lightboxImageIn 0.4s var(--ease-out);
}

@keyframes lightboxImageIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

.lightbox__info {
  text-align: center;
  color: var(--cream-paper);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  padding: 0 var(--s-5);
}

.lightbox__category {
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-extreme);
  color: var(--gold-bright);
}

.lightbox__name {
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  font-weight: 400;
  color: var(--cream-paper);
  margin: 0;
  line-height: var(--leading-tight);
}

.lightbox__name em {
  font-style: italic;
  color: var(--gold-bright);
}

.lightbox__cta {
  margin-top: var(--s-3);
  background-color: var(--gold-deep);
  border-color: var(--gold-deep);
}

.lightbox__cta:hover {
  background-color: var(--gold);
  border-color: var(--gold);
}

/* Close button — sedi na gornjem desnom ćošku slike (pola izvan okvira). */
.lightbox__close {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
  z-index: 2;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(212, 176, 112, 0.3);
  color: var(--cream-paper);
  cursor: pointer;
  transition: all var(--d-base) var(--ease-out);
}

.lightbox__close:hover {
  background-color: var(--gold-deep);
  border-color: var(--gold);
  color: var(--cream-paper);
}

/* Nav buttons (prev/next) */
.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(212, 176, 112, 0.25);
  color: var(--cream-paper);
  cursor: pointer;
  transition: all var(--d-base) var(--ease-out);
}

/* Strelice tik izvan leve/desne ivice slike (sa malim razmakom). */
.lightbox__nav--prev { left: 0;  transform: translate(calc(-100% - var(--s-4)), -50%); }
.lightbox__nav--next { right: 0; transform: translate(calc(100% + var(--s-4)), -50%); }

.lightbox__nav:hover {
  background-color: var(--gold-deep);
  border-color: var(--gold);
}

@media (max-width: 720px) {
  /* Na uskim ekranima nema mesta izvan slike — strelice idu uz ivicu, unutra. */
  .lightbox__nav { width: 40px; height: 40px; }
  .lightbox__nav--prev { left: var(--s-2);  transform: translateY(-50%); }
  .lightbox__nav--next { right: var(--s-2); transform: translateY(-50%); }
}

body.is-lightbox-open {
  overflow: hidden;
}

/* ================================================================
   CONTACT PAGE
   ================================================================ */

.contact-page {
  background-color: var(--cream);
  padding-top: 88px;
}

/* ===== Contact hero ===== */
.contact-hero {
  position: relative;
  padding-block: clamp(2rem, 5vw, 4rem) clamp(2rem, 4vw, 3rem);
  overflow: hidden;
  isolation: isolate;
}

.contact-hero__glow {
  position: absolute;
  top: -20%;
  right: -10%;
  width: 50vw;
  height: 50vw;
  max-width: 640px;
  max-height: 640px;
  background: radial-gradient(circle at center,
    rgba(212, 176, 112, 0.28) 0%,
    rgba(160, 120, 44, 0.10) 40%,
    transparent 70%);
  filter: blur(60px);
  z-index: 0;
  pointer-events: none;
}

.contact-hero__head {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin-top: var(--s-5);
}

.contact-hero__title {
  font-family: var(--font-display);
  font-size: var(--t-5xl);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  margin: var(--s-4) 0 var(--s-5);
}

.contact-hero__title em {
  font-style: italic;
  color: var(--gold-deep);
}

.contact-hero__lead {
  font-size: var(--t-lg);
  line-height: var(--leading-relaxed);
  color: var(--ink-soft);
  max-width: 60ch;
}

/* ===== Contact layout (form + info card) ===== */
.contact-section {
  padding-bottom: var(--s-16);
}

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}

@media (max-width: 960px) {
  .contact-layout { grid-template-columns: 1fr; }
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-10);
  min-width: 0;
}

/* ===== Subject chips (radio group disguised) ===== */
.contact-subject-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.subject-chip {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.subject-chip input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.subject-chip span {
  display: inline-block;
  padding: var(--s-3) var(--s-5);
  border: 1px solid var(--line-strong);
  background-color: transparent;
  font-family: var(--font-body);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ink-soft);
  transition: all var(--d-base) var(--ease-out);
  letter-spacing: var(--tracking-wide);
}

.subject-chip:hover span {
  border-color: var(--gold);
  color: var(--gold-deep);
}

.subject-chip input[type="radio"]:checked + span {
  background-color: var(--ink);
  color: var(--cream-paper);
  border-color: var(--ink);
}

/* ===== Contact info card (sticky) ===== */
.contact-info {
  position: sticky;
  top: 100px;
  align-self: start;
}

@media (max-width: 960px) {
  .contact-info { position: static; }
}

.contact-info__inner {
  background-color: var(--cream-paper);
  border: 1px solid var(--line-strong);
  padding: var(--s-6) var(--s-6) var(--s-8);
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}

.contact-info__title {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 500;
  color: var(--ink);
  margin: 0;
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line-gold);
}

.contact-info__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.contact-info__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
}

.contact-info__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background-color: var(--cream-warm);
  color: var(--gold-deep);
  border-radius: 50%;
}

.contact-info__details {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.contact-info__label {
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-extreme);
  color: var(--gold-deep);
}

.contact-info__value {
  font-family: var(--font-display);
  font-size: var(--t-base);
  color: var(--ink);
  font-feature-settings: "lnum" 1;
  transition: color var(--d-base) var(--ease-out);
  word-break: break-word;
}

a.contact-info__value:hover {
  color: var(--gold-deep);
}

.contact-info__sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-xs);
  color: var(--ink-mute);
}

.contact-info__social {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}

.contact-info__social-icons {
  display: flex;
  gap: var(--s-3);
}

.contact-social-link {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
  transition: all var(--d-base) var(--ease-out);
}

.contact-social-link:hover {
  color: var(--gold-deep);
  border-color: var(--gold);
  background-color: var(--cream-warm);
}

/* ===== Map (Google Maps iframe + brand frame) ===== */
.contact-map-section {
  padding-block: var(--s-12);
  position: relative;
}

/* Header iznad mape — paralel sa drugim section headerima sajta. */
.contact-map__head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--s-8);
}

.contact-map__eyebrow {
  display: inline-block;
  margin-bottom: var(--s-3);
}

.contact-map__title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin: 0 0 var(--s-3) 0;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.contact-map__title em {
  font-style: italic;
  color: var(--gold-deep);
}

.contact-map__lead {
  color: var(--ink-soft);
  font-size: 1.02rem;
  line-height: 1.6;
  margin: 0;
}

.contact-map {
  position: relative;
  width: 100%;
  height: clamp(360px, 50vw, 540px);
  background-color: var(--cream-warm);
  /* Pre fix-a: border-block (samo gore-dole), full-bleed edge-to-edge.
     Sad je karta u .wrap, ima border sa svih strana + rounded corners +
     suptilna warm shadow da "lebdi" iznad section pozadine. */
  border: 1px solid var(--line-gold);
  border-radius: 8px;
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(70, 45, 25, 0.04),
    0 8px 24px rgba(70, 45, 25, 0.08);
}

/* Brand ✦ ornament u uglovima mape — vežu mapu vizualno sa ostatkom sajta
   (about-quote, thank-you, final-cta sve koriste isti motif). */
.contact-map__corner {
  position: absolute;
  z-index: 2;
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--gold-deep);
  opacity: 0.6;
  pointer-events: none;
  line-height: 1;
  text-shadow: 0 0 12px rgba(251, 245, 232, 0.95);
}

.contact-map__corner--tl {
  top: 14px;
  left: 16px;
}

.contact-map__corner--br {
  bottom: 14px;
  left: 16px;
}

.contact-map__iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  /* Suptilni warm filter — Google Maps default je modra/zelena, ovaj filter joj
     daje topliji ton bez gubitka čitljivosti. Pojačan saturate down + brightness up
     posle frame fix-a da mapa ima "vintage map" feel umesto "Google modern" feel. */
  filter: saturate(0.78) hue-rotate(-10deg) contrast(0.94) brightness(1.02);
}

/* Legacy placeholder (samo ako se vrati SVG verzija) */
.contact-map__placeholder {
  width: 100%;
  height: 100%;
}

.contact-map__placeholder svg {
  width: 100%;
  height: 100%;
  display: block;
}

.contact-map__cta {
  position: absolute;
  bottom: var(--s-6);
  right: var(--s-6);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-5);
  background-color: var(--ink);
  color: var(--cream-paper);
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  border: 1px solid var(--ink);
  transition: background-color var(--d-base) var(--ease-out),
              border-color var(--d-base) var(--ease-out);
}

.contact-map__cta:hover {
  background-color: var(--gold-deep);
  border-color: var(--gold-deep);
}

/* ===== FAQ accordion (<details>) ===== */
.faq {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-top: var(--s-12);
  max-width: 820px;
  margin-inline: auto;
}

.faq-item {
  background-color: var(--cream-paper);
  border: 1px solid var(--line-strong);
  transition: border-color var(--d-base) var(--ease-out);
}

.faq-item[open],
.faq-item:hover {
  border-color: var(--gold);
}

.faq-item__q {
  list-style: none;
  cursor: pointer;
  padding: var(--s-5) var(--s-6);
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 500;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  position: relative;
  user-select: none;
}

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

.faq-item__q::after {
  content: '+';
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  color: var(--gold-deep);
  font-weight: 400;
  line-height: 1;
  flex-shrink: 0;
  transition: transform var(--d-base) var(--ease-out);
}

.faq-item[open] .faq-item__q::after {
  transform: rotate(45deg);
}

.faq-item__a {
  padding: 0 var(--s-6) var(--s-5);
  font-size: var(--t-base);
  line-height: var(--leading-relaxed);
  color: var(--ink-soft);
}

.faq-item__a p { margin: 0; }

/* ================================================================
   ABOUT PAGE
   ================================================================ */

.about-page {
  background-color: var(--cream);
  padding-top: 88px;
}

/* ===== About hero ===== */
.about-hero {
  position: relative;
  padding-block: clamp(2rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem);
  overflow: hidden;
  isolation: isolate;
}

.about-hero__glow {
  position: absolute;
  top: 0;
  right: -10%;
  width: 60vw;
  height: 60vw;
  max-width: 720px;
  max-height: 720px;
  background: radial-gradient(circle at center,
    rgba(212, 176, 112, 0.35) 0%,
    rgba(160, 120, 44, 0.14) 35%,
    transparent 70%);
  filter: blur(60px);
  z-index: 0;
  pointer-events: none;
}

.about-hero__head {
  position: relative;
  z-index: 1;
  max-width: 820px;
  margin-top: var(--s-5);
}

.about-hero__title {
  font-family: var(--font-display);
  font-size: var(--t-display);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  margin: var(--s-4) 0 var(--s-6);
  text-wrap: balance;
}

.about-hero__title em {
  font-style: italic;
  color: var(--gold-deep);
}

.about-hero__lead {
  font-family: var(--font-body);
  font-size: var(--t-xl);
  line-height: var(--leading-relaxed);
  color: var(--ink-soft);
  max-width: 64ch;
  margin-bottom: var(--s-8);
}

.about-hero__actions {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  flex-wrap: wrap;
}

/* ===== About pull quote — full bleed dramatic ===== */
.about-quote {
  position: relative;
  padding-block: clamp(4rem, 9vw, 8rem);
  background-color: var(--dark);
  color: var(--cream-paper);
  overflow: hidden;
  isolation: isolate;
  border-block: 1px solid var(--gold-deep);
}

.about-quote__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(212, 176, 112, 0.18) 0%, transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(160, 120, 44, 0.15) 0%, transparent 45%);
}

.about-quote__bg::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(400px, 50vw, 720px);
  aspect-ratio: 1;
  background-image: url("assets/logo/logo-mark.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transform: translate(-50%, -50%);
  opacity: 0.08;
}

.about-quote__inner {
  position: relative;
  z-index: 1;
  max-width: 920px;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-6);
}

.about-quote__ornament {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-2xl);
  color: var(--gold-bright);
  line-height: 1;
  text-shadow: 0 0 20px rgba(212, 176, 112, 0.5);
}

.about-quote__text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: var(--tracking-tight);
  color: var(--on-dark);
  margin: 0;
  text-wrap: balance;
}

.about-quote__text em {
  color: var(--gold-bright);
  font-style: italic;
}

/* ================================================================
   IZ RADIONICE — 4 fotografije pravog postupka izrade (about page)
   ================================================================ */
.workshop-shots { padding: clamp(3rem, 7vw, 6rem) 0; }

.workshop-grid {
  list-style: none;
  padding: 0;
  margin: var(--s-12) 0 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
}

.workshop-shot { display: flex; flex-direction: column; }

.workshop-shot__media {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--cream-paper);
  border: 1px solid var(--line);
  box-shadow: 0 8px 24px rgba(31, 18, 8, 0.10);
  isolation: isolate;
}

.workshop-shot__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease-out);
  will-change: transform;
}

.workshop-shot:hover .workshop-shot__media img { transform: scale(1.05); }

.workshop-shot__num {
  position: absolute;
  top: var(--s-3);
  left: var(--s-3);
  font-family: var(--font-display);
  font-size: var(--t-sm);
  letter-spacing: var(--tracking-extreme);
  color: var(--cream-paper);
  background: rgba(31, 18, 8, 0.78);
  padding: 4px 10px;
  border-radius: 999px;
  z-index: 2;
}

.workshop-shot__caption {
  padding-top: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.workshop-shot__title {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 400;
  margin: 0;
  color: var(--ink);
  letter-spacing: var(--tracking-tight);
}

.workshop-shot__text {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--ink-soft);
}

@media (max-width: 960px) {
  .workshop-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .workshop-grid { grid-template-columns: 1fr; }
  .workshop-shot__media { aspect-ratio: 4 / 3; }
}

/* ===== Promises grid (5 obećanja) ===== */
.promises {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s-6);
  list-style: none;
  padding: 0;
  margin-top: var(--s-12);
}

@media (max-width: 1100px) { .promises { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .promises { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .promises { grid-template-columns: 1fr; } }

.promise {
  background-color: var(--cream-paper);
  border: 1px solid var(--line-strong);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
  position: relative;
  transition: border-color var(--d-base) var(--ease-out),
              transform var(--d-base) var(--ease-out);
}

.promise:hover {
  border-color: var(--gold);
  transform: translateY(-3px);
}

.promise__icon {
  width: 44px;
  height: 44px;
  color: var(--gold-deep);
  display: grid;
  place-items: center;
  background-color: var(--cream-warm);
  border-radius: 50%;
}

.promise__icon svg {
  width: 26px;
  height: 26px;
}

.promise__title {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 500;
  color: var(--ink);
  line-height: var(--leading-snug);
  margin: 0;
}

.promise__text {
  font-size: var(--t-sm);
  line-height: var(--leading-relaxed);
  color: var(--ink-soft);
  margin: 0;
}

/* ===== Custom order banner — full bleed, dva fokusa ===== */
.custom-order-banner {
  position: relative;
  padding-block: clamp(4rem, 8vw, 7rem);
  background-color: var(--cream);
  border-block: 1px solid var(--line-gold);
  overflow: hidden;
  isolation: isolate;
}

.custom-order-banner__glow {
  position: absolute;
  top: 50%;
  left: 30%;
  width: 60vw;
  height: 60vw;
  max-width: 720px;
  max-height: 720px;
  background: radial-gradient(circle at center,
    rgba(212, 176, 112, 0.22) 0%,
    rgba(160, 120, 44, 0.08) 40%,
    transparent 70%);
  filter: blur(50px);
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
}

.custom-order-banner__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

@media (max-width: 880px) {
  .custom-order-banner__inner {
    grid-template-columns: 1fr;
  }
}

.custom-order-banner__eyebrow {
  margin-bottom: var(--s-4);
  display: inline-block;
}

.custom-order-banner__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  margin-bottom: var(--s-5);
  text-wrap: balance;
}

.custom-order-banner__title em {
  font-style: italic;
  color: var(--gold-deep);
}

.custom-order-banner__lead {
  font-size: var(--t-lg);
  line-height: var(--leading-relaxed);
  color: var(--ink-soft);
  max-width: 56ch;
}

.custom-order-banner__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-4);
}

@media (max-width: 880px) {
  .custom-order-banner__actions {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }
}

.checkout-page {
  background-color: var(--cream);
  padding-top: 88px;
}

/* ===== Checkout hero + step progress ===== */
.checkout-hero {
  padding-block: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem);
}

.checkout-hero__head {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.checkout-hero__title {
  font-family: var(--font-display);
  font-size: var(--t-5xl);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  margin: var(--s-2) 0 0;
}

.checkout-hero__title em {
  font-style: italic;
  color: var(--gold-deep);
}

.checkout-steps {
  list-style: none;
  padding: 0;
  margin: var(--s-3) 0 0;
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
}

.checkout-step {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  opacity: 0.4;
  position: relative;
  padding-right: var(--s-8);
}

.checkout-step:not(:last-child)::after {
  content: '';
  position: absolute;
  right: var(--s-3);
  top: 50%;
  width: var(--s-5);
  height: 1px;
  background-color: var(--line-gold);
  transform: translateY(-50%);
}

.checkout-step.is-active,
.checkout-step.is-done {
  opacity: 1;
}

.checkout-step__num {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-sm);
  background-color: var(--cream-paper);
  border: 1px solid var(--line-strong);
  color: var(--ink-mute);
  border-radius: 50%;
  font-feature-settings: "lnum" 1;
  flex-shrink: 0;
}

.checkout-step.is-active .checkout-step__num {
  background-color: var(--gold);
  color: var(--cream-paper);
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(160, 120, 44, 0.15);
}

.checkout-step.is-done .checkout-step__num {
  background-color: var(--gold-deep);
  color: var(--cream-paper);
  border-color: var(--gold-deep);
}

.checkout-step__label {
  font-family: var(--font-display);
  font-size: var(--t-base);
  color: var(--ink);
}

/* ===== Checkout layout ===== */
.checkout-section {
  padding-bottom: var(--section-y);
}

.checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}

@media (max-width: 960px) {
  .checkout-layout {
    grid-template-columns: 1fr;
  }
}

/* ===== Form sekcije (fieldset) ===== */
.checkout-form-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--s-10);
  min-width: 0;
}

.checkout-fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

.checkout-fieldset__legend {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  font-weight: 400;
  color: var(--ink);
  margin-bottom: var(--s-6);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line-gold);
  width: 100%;
}

.checkout-fieldset__num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-sm);
  color: var(--gold-deep);
  background-color: var(--cream-paper);
  border: 1px solid var(--gold);
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-feature-settings: "lnum" 1;
}

.checkout-fieldset__optional {
  margin-left: auto;
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-extreme);
  color: var(--ink-mute);
}

/* ===== Form fields ===== */
.checkout-fields {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-5);
}

@media (max-width: 540px) {
  .checkout-fields { grid-template-columns: 1fr; }
}

.checkout-field {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-width: 0;
}

.checkout-field--full {
  grid-column: 1 / -1;
}

.checkout-field label {
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-extreme);
  color: var(--gold-deep);
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
}

.checkout-field__req {
  color: var(--rust);
  font-size: 0.85em;
}

.checkout-field input,
.checkout-field textarea {
  width: 100%;
  padding: var(--s-3) var(--s-4);
  background-color: var(--cream-paper);
  border: 1px solid var(--line-strong);
  font-family: var(--font-body);
  font-size: var(--t-base);
  color: var(--ink);
  transition: border-color var(--d-base) var(--ease-out),
              background-color var(--d-base) var(--ease-out);
  font-feature-settings: "lnum" 1;
}

.checkout-field input::placeholder,
.checkout-field textarea::placeholder {
  color: var(--ink-fade);
  font-style: italic;
}

.checkout-field input:hover,
.checkout-field textarea:hover {
  border-color: var(--gold-deep);
}

.checkout-field input:focus,
.checkout-field textarea:focus {
  outline: none;
  border-color: var(--gold);
  background-color: var(--cream);
}

.checkout-field textarea {
  resize: vertical;
  min-height: 100px;
  font-family: var(--font-body);
  line-height: var(--leading-relaxed);
}

.checkout-field.has-error input,
.checkout-field.has-error textarea {
  border-color: var(--rust);
  background-color: rgba(138, 40, 24, 0.04);
}

.checkout-field__hint {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--t-xs);
  color: var(--ink-mute);
}

.checkout-field.has-error .checkout-field__hint {
  color: var(--rust);
}

/* Shipping note */
.checkout-shipping-note {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  margin-top: var(--s-5);
  padding: var(--s-4) var(--s-5);
  background-color: var(--cream-paper);
  border: 1px solid var(--line-gold);
  font-size: var(--t-sm);
  line-height: var(--leading-relaxed);
  color: var(--ink-soft);
}

.checkout-shipping-note svg {
  flex-shrink: 0;
  color: var(--gold-deep);
  margin-top: 2px;
}

/* ===== Payment radio options ===== */
.payment-options {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.payment-option {
  display: block;
  cursor: pointer;
  position: relative;
}

.payment-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.payment-option__inner {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  background-color: var(--cream-paper);
  border: 1px solid var(--line-strong);
  transition: border-color var(--d-base) var(--ease-out),
              background-color var(--d-base) var(--ease-out);
}

.payment-option:hover .payment-option__inner {
  border-color: var(--gold);
}

.payment-option input[type="radio"]:checked + .payment-option__inner {
  border-color: var(--gold-deep);
  border-width: 2px;
  padding: calc(var(--s-5) - 1px);
  background-color: var(--cream);
}

.payment-option__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.payment-option__check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
  position: relative;
  transition: border-color var(--d-base) var(--ease-out);
}

.payment-option input[type="radio"]:checked + .payment-option__inner .payment-option__check {
  border-color: var(--gold-deep);
}

.payment-option input[type="radio"]:checked + .payment-option__inner .payment-option__check::after {
  content: '';
  position: absolute;
  inset: 3px;
  background-color: var(--gold-deep);
  border-radius: 50%;
}

.payment-option__title {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 500;
  color: var(--ink);
}

.payment-option__icon {
  margin-left: auto;
  color: var(--gold-deep);
  flex-shrink: 0;
}

.payment-option__badge {
  display: inline-block;
  padding: 3px var(--s-3);
  background-color: var(--gold-faint);
  color: var(--gold-deep);
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-extreme);
  border-radius: 99px;
}

.payment-option__desc {
  font-size: var(--t-sm);
  line-height: var(--leading-relaxed);
  color: var(--ink-soft);
  padding-left: calc(20px + var(--s-3));
}

.payment-option--disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.payment-option--disabled:hover .payment-option__inner {
  border-color: var(--line-strong);
}

/* ===== Terms checkbox + submit ===== */
.checkout-submit {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line-gold);
}

.checkout-terms {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  cursor: pointer;
  font-size: var(--t-sm);
  line-height: var(--leading-relaxed);
  color: var(--ink-soft);
  user-select: none;
}

.checkout-terms input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.checkout-terms__check {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--line-strong);
  background-color: var(--cream-paper);
  display: grid;
  place-items: center;
  margin-top: 1px;
  transition: all var(--d-base) var(--ease-out);
}

.checkout-terms__check svg {
  opacity: 0;
  color: var(--cream-paper);
  transition: opacity var(--d-base) var(--ease-out);
}

.checkout-terms input[type="checkbox"]:checked ~ .checkout-terms__check {
  background-color: var(--gold-deep);
  border-color: var(--gold-deep);
}

.checkout-terms input[type="checkbox"]:checked ~ .checkout-terms__check svg {
  opacity: 1;
}

.checkout-terms.has-error .checkout-terms__check {
  border-color: var(--rust);
  background-color: rgba(138, 40, 24, 0.06);
}

.checkout-terms a {
  color: var(--gold-deep);
  border-bottom: 1px solid var(--line-gold);
  padding-block: 1px;
}

.checkout-terms a:hover {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

/* ===== Napravi nalog (guest checkout) ===== */
.checkout-account {
  margin-top: var(--s-5);
  padding: var(--s-4) var(--s-5);
  background: rgba(160, 120, 44, 0.05);
  border: 1px solid var(--line-gold);
  border-radius: 4px;
}

.checkout-account__toggle {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  cursor: pointer;
  font-size: var(--t-sm);
  line-height: var(--leading-relaxed);
  color: var(--ink-soft);
  user-select: none;
}

.checkout-account__toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.checkout-account__check {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--line-strong);
  background-color: var(--cream-paper);
  display: grid;
  place-items: center;
  margin-top: 1px;
  transition: all var(--d-base) var(--ease-out);
}

.checkout-account__check svg {
  opacity: 0;
  color: var(--cream-paper);
  transition: opacity var(--d-base) var(--ease-out);
}

.checkout-account__toggle input[type="checkbox"]:checked ~ .checkout-account__check {
  background-color: var(--gold-deep);
  border-color: var(--gold-deep);
}

.checkout-account__toggle input[type="checkbox"]:checked ~ .checkout-account__check svg {
  opacity: 1;
}

.checkout-account__text strong { color: var(--ink); }

.checkout-account__pass {
  margin-top: var(--s-4);
}

.checkout-submit__btn {
  align-self: stretch;
  justify-content: center;
}

.checkout-submit__btn.is-submitting {
  opacity: 0.65;
  cursor: not-allowed;
  pointer-events: none;
}

.checkout-submit__hint {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--t-xs);
  color: var(--ink-mute);
  text-align: center;
}

/* ===== Order review side panel (sticky) ===== */
.order-review {
  position: sticky;
  top: 100px;
  align-self: start;
}

@media (max-width: 960px) {
  .order-review { position: static; }
}

.order-review__inner {
  background-color: var(--cream-paper);
  border: 1px solid var(--line-strong);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.order-review__title {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 500;
  color: var(--ink);
  margin: 0;
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line-gold);
}

.order-review__items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.order-review__item {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: var(--s-4);
  align-items: center;
}

.order-review__media {
  position: relative;
  width: 56px;
  height: 56px;
  background-color: var(--cream-warm);
  border: 1px solid var(--line);
  padding: 4px;
}

.order-review__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.order-review__qty-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 22px;
  height: 22px;
  padding-inline: 5px;
  display: grid;
  place-items: center;
  background-color: var(--ink);
  color: var(--cream-paper);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-xs);
  font-weight: 500;
  border-radius: 99px;
  font-feature-settings: "lnum" 1;
}

.order-review__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.order-review__name {
  font-family: var(--font-display);
  font-size: var(--t-base);
  color: var(--ink);
  line-height: var(--leading-snug);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.order-review__variant {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-xs);
  color: var(--ink-mute);
}

.order-review__price {
  font-family: var(--font-display);
  font-size: var(--t-sm);
  color: var(--ink);
  font-feature-settings: "lnum" 1;
  white-space: nowrap;
}

.order-review__lines {
  list-style: none;
  padding: var(--s-4) 0 0;
  margin: 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.order-review__lines li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-body);
  font-size: var(--t-sm);
  color: var(--ink-soft);
}

.order-review__value {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
  font-feature-settings: "lnum" 1;
}

.order-review__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-gold);
}

.order-review__total-label {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 500;
  color: var(--ink);
}

.order-review__total-value {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 500;
  color: var(--ink);
  font-feature-settings: "lnum" 1;
}

.order-review__back {
  font-size: var(--t-xs) !important;
  align-self: flex-start;
  border-bottom: 1px solid transparent !important;
  padding-block: 0 !important;
}

.order-review__trust {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--t-xs);
  color: var(--ink-mute);
  line-height: var(--leading-relaxed);
}

.order-review__trust svg {
  flex-shrink: 0;
  color: var(--gold-deep);
  margin-top: 1px;
}

/* ================================================================
   CART PAGE
   ================================================================ */

.cart-page {
  background-color: var(--cream);
  padding-top: 88px;
}

/* ===== Cart hero ===== */
.cart-hero {
  padding-block: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 3vw, 2.5rem);
}

.cart-hero__head {
  max-width: 720px;
}

.cart-hero__title {
  font-family: var(--font-display);
  font-size: var(--t-5xl);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  margin: var(--s-4) 0 var(--s-3);
}

.cart-hero__title em {
  font-style: italic;
  color: var(--gold-deep);
}

.cart-hero__count {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-lg);
  color: var(--ink-mute);
  font-feature-settings: "lnum" 1;
}

/* ===== Cart section ===== */
.cart-section {
  padding-bottom: var(--section-y);
}

.cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}

@media (max-width: 960px) {
  .cart-layout {
    grid-template-columns: 1fr;
  }
}

/* ===== Cart items table-like ===== */
.cart-items-wrap {
  min-width: 0;
}

.cart-items-head {
  display: grid;
  grid-template-columns: 100px minmax(0, 1.5fr) 100px 130px 100px 40px;
  gap: var(--s-4);
  align-items: center;
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line-gold);
  margin-bottom: var(--s-3);
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-extreme);
  color: var(--gold-deep);
}

.cart-items-head > span:nth-child(2) { padding-left: 0; }
.cart-items-head > span:nth-child(3) { text-align: right; }
.cart-items-head > span:nth-child(4) { text-align: center; }
.cart-items-head > span:nth-child(5) { text-align: right; }

@media (max-width: 720px) {
  .cart-items-head { display: none; }
}

.cart-items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

/* ===== Cart item row ===== */
.cart-item {
  display: grid;
  grid-template-columns: 100px minmax(0, 1.5fr) 100px 130px 100px 40px;
  gap: var(--s-4);
  align-items: center;
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--line);
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}

.cart-item.is-removing {
  opacity: 0;
  transform: translateX(-12px);
}

.cart-item__media {
  display: block;
  width: 100px;
  height: 100px;
  background-color: var(--cream-paper);
  border: 1px solid var(--line);
  padding: var(--s-3);
  position: relative;
  overflow: hidden;
  transition: border-color var(--d-base) var(--ease-out);
}

.cart-item__media:hover {
  border-color: var(--gold);
}

.cart-item__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 12px rgba(31, 18, 8, 0.15));
}

.cart-item__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.cart-item__category {
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-extreme);
  color: var(--gold-deep);
}

.cart-item__name {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 500;
  color: var(--ink);
  line-height: var(--leading-snug);
  transition: color var(--d-base) var(--ease-out);
}

.cart-item__name em {
  font-style: italic;
  color: var(--gold-deep);
}

.cart-item__name:hover {
  color: var(--gold-deep);
}

.cart-item__variant {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-sm);
  color: var(--ink-mute);
  margin-top: 2px;
}

.cart-item__price,
.cart-item__total {
  font-family: var(--font-display);
  font-size: var(--t-base);
  color: var(--ink);
  font-feature-settings: "lnum" 1;
  white-space: nowrap;
}

.cart-item__price { text-align: right; }
.cart-item__total {
  text-align: right;
  font-weight: 500;
  font-size: var(--t-lg);
}

.cart-item__mobile-label {
  display: none;
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-extreme);
  color: var(--ink-mute);
  margin-right: var(--s-2);
  font-family: var(--font-body);
  font-style: normal;
}

.cart-item__qty {
  display: flex;
  align-items: center;
  border: 1px solid var(--line-strong);
  justify-self: center;
  width: 110px;
  height: 38px;
}

.cart-item__qty .qty-control__btn {
  width: 32px;
  min-height: 36px;
  height: 36px;
}

.cart-item__qty .qty-control__input {
  width: 38px;
  height: 36px;
  font-size: var(--t-sm);
}

.cart-item__remove {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-mute);
  cursor: pointer;
  transition: all var(--d-base) var(--ease-out);
  justify-self: center;
}

.cart-item__remove:hover {
  border-color: var(--rust);
  color: var(--rust);
  background-color: rgba(138, 40, 24, 0.05);
}

/* ===== Mobile cart item — stack layout ===== */
@media (max-width: 720px) {
  .cart-item {
    grid-template-columns: 90px 1fr 36px;
    grid-template-rows: auto auto auto;
    gap: var(--s-3) var(--s-4);
    row-gap: var(--s-3);
  }

  .cart-item__media {
    grid-column: 1;
    grid-row: 1 / 4;
    width: 90px;
    height: 90px;
  }

  .cart-item__info {
    grid-column: 2;
    grid-row: 1;
  }

  .cart-item__price {
    grid-column: 2;
    grid-row: 2;
    text-align: left;
    font-size: var(--t-sm);
  }

  .cart-item__qty {
    grid-column: 2;
    grid-row: 3;
    justify-self: start;
  }

  .cart-item__total {
    grid-column: 2 / 4;
    grid-row: 4;
    text-align: right;
    padding-top: var(--s-3);
    border-top: 1px dashed var(--line);
    font-size: var(--t-base);
  }

  .cart-item__remove {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  .cart-item__mobile-label {
    display: inline;
  }
}

/* ===== Cart footer (coupon + back link) ===== */
.cart-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-5);
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line-gold);
}

.link-arrow--back::after {
  content: '';
}

.link-arrow--back svg {
  margin-right: var(--s-1);
  color: var(--gold-deep);
  transition: transform var(--d-base) var(--ease-out);
}

.link-arrow--back:hover svg {
  transform: translateX(-3px);
}

.cart-coupon {
  display: flex;
  align-items: stretch;
  gap: var(--s-2);
}

.cart-coupon__input {
  height: 44px;
  padding: 0 var(--s-4);
  background-color: transparent;
  border: 1px solid var(--line-strong);
  font-family: var(--font-body);
  font-size: var(--t-sm);
  color: var(--ink);
  width: 200px;
  transition: border-color var(--d-base) var(--ease-out);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.cart-coupon__input:focus {
  outline: none;
  border-color: var(--gold);
}

.cart-coupon__btn {
  padding-block: var(--s-3);
  padding-inline: var(--s-6);
  font-size: var(--t-xs);
  white-space: nowrap;
}

@media (max-width: 540px) {
  .cart-footer {
    flex-direction: column;
    align-items: stretch;
  }
  .cart-coupon { width: 100%; }
  .cart-coupon__input { flex: 1; width: auto; }
}

/* ===== Cart summary (sticky panel) ===== */
.cart-summary {
  position: sticky;
  top: 100px;
  background-color: var(--cream-paper);
  border: 1px solid var(--line-strong);
  padding: var(--s-8);
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}

@media (max-width: 960px) {
  .cart-summary {
    position: static;
  }
}

.cart-summary__title {
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  font-weight: 400;
  color: var(--ink);
  margin: 0;
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--line-gold);
}

.cart-summary__lines {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.cart-summary__line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-4);
  font-family: var(--font-body);
  font-size: var(--t-base);
  color: var(--ink-soft);
}

.cart-summary__value {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
  font-feature-settings: "lnum" 1;
  text-align: right;
}

.cart-summary__shipping {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.cart-summary__shipping-hint {
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--ink-fade);
}

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

.cart-summary__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-4);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line-gold);
}

.cart-summary__total-label {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  color: var(--ink);
  font-weight: 500;
}

.cart-summary__total-value {
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  color: var(--ink);
  font-weight: 500;
  font-feature-settings: "lnum" 1;
  transition: color var(--d-base) var(--ease-out);
}

.cart-summary__total-value.is-updated {
  animation: priceFlash 0.6s ease-out;
}

.cart-summary__checkout {
  width: 100%;
  justify-content: center;
}

.cart-summary__trust {
  list-style: none;
  padding: var(--s-5) 0 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  border-top: 1px solid var(--line);
}

.cart-summary__trust li {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-body);
  font-size: var(--t-xs);
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

.cart-summary__trust svg {
  flex-shrink: 0;
  color: var(--gold-deep);
}

/* ===== Empty cart state ===== */
.cart-empty {
  text-align: center;
  padding: var(--s-24) var(--s-6);
  max-width: 560px;
  margin: 0 auto;
}

.cart-empty__ornament {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-3xl);
  color: var(--gold);
  margin-bottom: var(--s-6);
}

.cart-empty__title {
  font-family: var(--font-display);
  font-size: var(--t-4xl);
  font-weight: 400;
  color: var(--ink);
  margin-bottom: var(--s-4);
  line-height: var(--leading-tight);
}

.cart-empty__title em {
  font-style: italic;
  color: var(--gold-deep);
}

.cart-empty__text {
  font-size: var(--t-base);
  line-height: var(--leading-relaxed);
  color: var(--ink-soft);
  margin-bottom: var(--s-8);
}

/* ================================================================
   SINGLE PRODUCT PAGE
   ================================================================ */

.single-product-page {
  background-color: var(--cream);
  padding-top: 100px; /* ispod fixed topbar */
}

.single-product__breadcrumb-wrap {
  padding-block: var(--s-5) var(--s-3);
}

/* ===== Product main grid (galerija | info) ===== */
.product-main {
  padding-block: var(--s-6) var(--section-y);
}

.product-main__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

@media (max-width: 960px) {
  .product-main__grid {
    grid-template-columns: 1fr;
    gap: var(--s-10);
  }
}

/* ===== Galerija ===== */
.product-gallery {
  position: sticky;
  top: 100px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

@media (max-width: 960px) {
  .product-gallery {
    position: static;
  }
}

.product-gallery__main {
  position: relative;
  aspect-ratio: 4 / 5;
  background-color: var(--cream-paper);
  border: 1px solid var(--line-strong);
  overflow: hidden;
  isolation: isolate;
  padding: clamp(2rem, 4vw, 3.5rem);
}

.product-gallery__main::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid var(--line-gold);
  opacity: 0.7;
  pointer-events: none;
  z-index: 3;
}

.product-gallery__halo {
  position: absolute;
  top: 6%;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  aspect-ratio: 1;
  background: radial-gradient(circle,
    rgba(212, 176, 112, 0.32) 0%,
    rgba(160, 120, 44, 0.12) 50%,
    transparent 75%);
  filter: blur(20px);
  z-index: 1;
  pointer-events: none;
}

.product-gallery__image {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter:
    drop-shadow(0 22px 38px rgba(31, 18, 8, 0.26))
    drop-shadow(0 0 40px rgba(212, 176, 112, 0.32));
  transform-origin: 50% 50%;
  transition: transform 140ms var(--ease-out);
  will-change: transform;
}

/* WP-style hover zoom: kratak transition (140ms) → smooth follow kad miš putuje,
   transform-origin postavlja JS po poziciji kursora (% / %). */
.product-gallery__main.is-zoomed .product-gallery__image {
  transform: scale(2.2);
}

@media (hover: none), (max-width: 960px) {
  .product-gallery__main.is-zoomed .product-gallery__image {
    transform: none;
  }
}

.product-gallery__zoom-hint {
  position: absolute;
  bottom: var(--s-4);
  right: var(--s-4);
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  background-color: rgba(31, 18, 8, 0.85);
  color: var(--cream-paper);
  border: none;
  cursor: pointer;
  z-index: 5;
  transition: background-color var(--d-base) var(--ease-out);
  opacity: 0;
}

.product-gallery__main:hover .product-gallery__zoom-hint {
  opacity: 1;
}

.product-gallery__zoom-hint:hover {
  background-color: var(--gold-deep);
}

/* Thumbs */
.product-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
}

.product-gallery__thumb {
  position: relative;
  aspect-ratio: 1;
  background-color: var(--cream-paper);
  border: 1px solid var(--line);
  padding: var(--s-3);
  cursor: pointer;
  transition: border-color var(--d-base) var(--ease-out);
  overflow: hidden;
}

.product-gallery__thumb:hover {
  border-color: var(--gold);
}

.product-gallery__thumb.is-active {
  border-color: var(--gold-deep);
  border-width: 2px;
  padding: calc(var(--s-3) - 1px);
}

.product-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(31, 18, 8, 0.15));
}

/* ===== Info pane ===== */
.product-info {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.product-info__category {
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-extreme);
  color: var(--gold-deep);
}

.product-info__title {
  font-family: var(--font-display);
  font-size: var(--t-5xl);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}

.product-info__title em {
  font-style: italic;
  color: var(--gold-deep);
}

.product-info__rating {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-body);
  font-size: var(--t-sm);
  color: var(--ink-soft);
}

.product-info__rating-text a {
  color: var(--gold-deep);
  border-bottom: 1px solid var(--line-gold);
  padding-block: 1px;
}

.product-info__rating-text a:hover {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

.product-info__price {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  padding-block: var(--s-5);
  border-block: 1px solid var(--line-gold);
  font-family: var(--font-display);
  font-feature-settings: "lnum" 1;
}

.product-info__price-from {
  font-style: italic;
  font-size: var(--t-base);
  color: var(--ink-mute);
}

.product-info__price-value {
  font-size: clamp(2rem, 3vw, 2.75rem);
  color: var(--ink);
  font-weight: 500;
  transition: color var(--d-base) var(--ease-out);
}

.product-info__price-currency {
  font-size: var(--t-xl);
  color: var(--ink-soft);
  margin-left: var(--s-1);
}

.product-info__price.is-updated .product-info__price-value {
  animation: priceFlash 0.6s ease-out;
}

@keyframes priceFlash {
  0%   { color: var(--ink); }
  50%  { color: var(--gold-deep); }
  100% { color: var(--ink); }
}

.product-info__excerpt {
  font-size: var(--t-base);
  line-height: var(--leading-relaxed);
  color: var(--ink-soft);
  max-width: 56ch;
}

/* ===== Shop paginacija ===== */
.shop-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-12);
}

.shop-pagination__btn {
  min-width: 2.6rem;
  height: 2.6rem;
  padding: 0 0.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: var(--t-sm);
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.shop-pagination__btn:hover:not(:disabled):not(.is-active) {
  border-color: var(--ink);
  background: var(--cream-warm);
}

.shop-pagination__btn.is-active {
  background: var(--ink);
  color: var(--cream-paper);
  border-color: var(--ink);
  cursor: default;
}

.shop-pagination__btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.shop-pagination__nav {
  font-size: 1.1rem;
}

.shop-pagination__ellipsis {
  padding: 0 0.2rem;
  color: var(--ink-mute);
  user-select: none;
}

/* ===== Variants (veličine) ===== */
.product-variants {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding-block: var(--s-4) 0;
}

.product-variants__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-3);
}

.product-variants__label {
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-extreme);
  color: var(--gold-deep);
}

.product-variants__selected {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-sm);
  color: var(--ink-soft);
}

.product-variants__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-2);
}

@media (max-width: 540px) {
  .product-variants__grid { grid-template-columns: repeat(2, 1fr); }
}

.variant-chip {
  padding: var(--s-3) var(--s-4);
  background-color: transparent;
  border: 1px solid var(--line-strong);
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: var(--t-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--d-base) var(--ease-out);
  text-align: center;
  font-feature-settings: "lnum" 1;
}

.variant-chip:hover {
  border-color: var(--gold);
  color: var(--ink);
}

.variant-chip.is-selected,
.variant-chip[aria-checked="true"] {
  background-color: var(--ink);
  color: var(--cream-paper);
  border-color: var(--ink);
}

/* ===== Actions (qty + add to cart) ===== */
.product-actions {
  display: flex;
  align-items: stretch;
  gap: var(--s-4);
  margin-top: var(--s-4);
}

.qty-control {
  display: flex;
  align-items: center;
  border: 1px solid var(--line-strong);
  background-color: transparent;
  flex-shrink: 0;
}

.qty-control__btn {
  width: 44px;
  height: 100%;
  min-height: 44px;
  display: grid;
  place-items: center;
  background: transparent;
  border: none;
  color: var(--ink);
  font-size: var(--t-lg);
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--d-base) var(--ease-out);
}

.qty-control__btn:hover {
  background-color: var(--cream-warm);
  color: var(--gold-deep);
}

.qty-control__input {
  width: 44px;
  height: 100%;
  text-align: center;
  border: none;
  background: transparent;
  font-family: var(--font-display);
  font-size: var(--t-base);
  color: var(--ink);
  appearance: textfield;
  -moz-appearance: textfield;
}

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

.product-actions__add {
  flex: 1;
  justify-content: center;
}

.product-actions__add.is-added {
  background-color: var(--gold-deep);
  border-color: var(--gold-deep);
}

/* ===== Trust signals u info pane-u ===== */
.product-trust {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-top: var(--s-6);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
  list-style: none;
}

.product-trust li {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--t-sm);
  color: var(--ink-soft);
}

.product-trust svg {
  flex-shrink: 0;
  color: var(--gold-deep);
}

.product-info__custom {
  margin-top: var(--s-5);
  padding: var(--s-4) var(--s-5);
  background-color: var(--cream-paper);
  border: 1px solid var(--line-gold);
  font-size: var(--t-sm);
  line-height: var(--leading-relaxed);
  color: var(--ink-soft);
}

.product-info__custom strong {
  color: var(--ink);
  font-weight: 600;
}

.product-info__custom a {
  color: var(--gold-deep);
  border-bottom: 1px solid var(--gold);
  padding-block: 1px;
}

.product-info__custom a:hover {
  color: var(--gold);
}

/* ================================================================
   PRODUCT TABS (Opis / Kako se pravi / Dostava / O svetitelju)
   ================================================================ */

.product-tabs-section {
  padding-block: var(--s-12) var(--section-y);
  background-color: var(--cream-warm);
  border-block: 1px solid var(--line-gold);
}

.product-tabs__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 1px solid var(--line-gold);
  margin-bottom: var(--s-10);
}

.product-tab {
  position: relative;
  padding: var(--s-4) var(--s-6);
  background: transparent;
  border: none;
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 500;
  color: var(--ink-mute);
  cursor: pointer;
  transition: color var(--d-base) var(--ease-out);
  white-space: nowrap;
}

.product-tab:hover {
  color: var(--gold-deep);
}

.product-tab.is-active {
  color: var(--ink);
}

.product-tab.is-active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--gold);
}

.product-tab-panel {
  max-width: 760px;
  font-size: var(--t-base);
  line-height: var(--leading-relaxed);
  color: var(--ink-soft);
}

.product-tab-panel[hidden] {
  display: none;
}

.product-tab-panel.is-active {
  animation: tabPanelFade 0.4s var(--ease-out);
}

@keyframes tabPanelFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.product-tab-panel p + p {
  margin-top: var(--s-4);
}

.product-tab-panel h3 {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 500;
  color: var(--ink);
  margin-top: var(--s-8);
  margin-bottom: var(--s-3);
}

.product-tab-panel h3:first-child {
  margin-top: 0;
}

.product-tab-panel__lead {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-xl);
  color: var(--ink);
  margin-bottom: var(--s-6) !important;
}

.product-tab-panel__specs {
  list-style: none;
  margin-top: var(--s-8);
  border-top: 1px solid var(--line);
  padding: 0;
}

.product-tab-panel__specs li {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--s-6);
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}

.product-tab-panel__specs li span:first-child {
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-extreme);
  color: var(--ink-mute);
}

.product-tab-panel__specs li span:last-child {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
}

.product-tab-panel__steps {
  list-style: decimal;
  padding-left: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  margin-top: var(--s-5);
}

.product-tab-panel__steps li::marker {
  color: var(--gold-deep);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
}

.product-tab-panel__steps li strong {
  color: var(--ink);
  font-weight: 600;
}

/* ================================================================
   STICKY CART BAR — mobile (sakriven na desktop-u)
   ================================================================ */

.sticky-cart {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 90;
  background-color: var(--dark);
  color: var(--cream-paper);
  border-top: 1px solid var(--line-gold);
  padding: var(--s-3) var(--s-5);
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  transform: translateY(100%);
  transition: transform var(--d-base) var(--ease-out);
}

.sticky-cart.is-visible {
  transform: translateY(0);
}

.sticky-cart__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sticky-cart__name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-sm);
  color: var(--on-dark-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sticky-cart__price {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  color: var(--cream-paper);
  font-feature-settings: "lnum" 1;
}

.sticky-cart__price-from {
  font-style: italic;
  font-size: 0.8em;
  color: var(--on-dark-mute);
  margin-right: 4px;
}

.sticky-cart__btn {
  flex-shrink: 0;
  background-color: var(--gold-deep);
  color: var(--cream-paper);
  border-color: var(--gold-deep);
  padding: var(--s-3) var(--s-6);
  font-size: var(--t-xs);
}

.sticky-cart__btn:hover {
  background-color: var(--gold);
  border-color: var(--gold);
}

/* "Dodato u korpu" state — kratko posle klika, isti pattern kao
   .product-actions__add.is-added ali sa zelenom akcentom da se jasno
   vidi razlika od neutralne gold-deep base boje. */
.sticky-cart__btn.is-added,
.product-actions__add.is-added {
  background-color: #1e6f3c;
  border-color: #1e6f3c;
  color: #fff;
  pointer-events: none;
}
.sticky-cart__btn.is-added::after,
.product-actions__add.is-added::after {
  /* Sakri eventualni .btn-arrow strelicu dok je u "Dodato" state-u */
  display: none !important;
}

@media (max-width: 720px) {
  .sticky-cart { display: flex; }
}

/* ================================================================
   PRODUCT CARD — "Dodaj u korpu" dugme + cart count bump
   ================================================================ */

.product-card__cart-btn {
  margin-top: var(--s-4);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  width: 100%;
  padding: var(--s-3) var(--s-4);
  background-color: transparent;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  cursor: pointer;
  transition: background-color var(--d-base) var(--ease-out),
              border-color var(--d-base) var(--ease-out),
              color var(--d-base) var(--ease-out);
  position: relative;
  z-index: 6; /* iznad gold sweep da bi se kliknulo */
}

.product-card__cart-btn:hover {
  background-color: var(--ink);
  border-color: var(--ink);
  color: var(--cream-paper);
}

.product-card__cart-btn:active {
  transform: translateY(1px);
}

/* "Dodato u korpu" state — kratko posle klika */
.product-card__cart-btn.is-added {
  background-color: var(--gold-deep);
  border-color: var(--gold-deep);
  color: var(--cream-paper);
}

.product-card__cart-icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  transition: transform var(--d-base) var(--ease-out);
}

.product-card__cart-btn:hover .product-card__cart-icon {
  transform: translateY(-1px);
}

.product-card__cart-label {
  line-height: 1;
}

/* Cart count bump u topbar-u (kad se klikne "Dodaj u korpu") */
.tool-btn__count.is-bumped {
  animation: cartBump 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

@keyframes cartBump {
  0%   { transform: scale(1); background-color: var(--gold-bright); }
  35%  { transform: scale(1.45); background-color: var(--gold-bright); }
  70%  { transform: scale(0.92); }
  100% { transform: scale(1); background-color: var(--gold-bright); }
}

/* Cart icon u topbar-u takođe blago "primi" paket */
.tool-btn.is-cart-receiving {
  animation: cartReceive 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

@keyframes cartReceive {
  0%   { transform: translateY(0); }
  35%  { transform: translateY(-3px); }
  70%  { transform: translateY(1px); }
  100% { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .product-card__cart-btn,
  .tool-btn__count.is-bumped,
  .tool-btn.is-cart-receiving {
    animation: none;
    transition: none;
  }
}

/* ================================================================
   HOME PAGE PRE-INTRO COVER
   Kad korisnik klikne logo i navigira na index.html, browser parsira HTML
   PRE nego što JS pokrene cinematic intro. Hero se vidi ~100-500ms pre
   nego što overlay pojavi — vidi se "flash" stare strane.

   Fix: body.is-home::before je tamni pseudo-element koji pokriva sve
   ODMAH kad CSS učita (pre body parse). JS u initCinematicIntro doda
   `intro-complete` na body kad overlay završi → pseudo fade-uje out.
   ================================================================ */

body.is-home::before {
  content: '';
  position: fixed;
  /* Top: 88px da topbar bude vidljiv tokom cover-a (navigacija ostaje accessible) */
  top: 88px;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #0A0502;
  /* z-index 99 < topbar (100) < intro overlay (9999) */
  z-index: 99;
  pointer-events: none;
  transition: opacity 0.5s var(--ease-out);
  opacity: 1;
}

body.is-home.intro-complete::before {
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  body.is-home::before { display: none; }
}

/* ================================================================
   CINEMATIC INTRO OVERLAY — "Uključi svetlo" sekvenca
   ================================================================ */

body.is-intro-active {
  overflow: hidden;
}

.intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background-color: #0A0502;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: all;
}

.intro-overlay__light {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  transform: translate(-50%, -50%) scale(0);
  background: radial-gradient(circle,
    rgba(255, 220, 130, 0.85) 0%,
    rgba(212, 176, 112, 0.55) 20%,
    rgba(160, 120, 44, 0.30) 40%,
    rgba(138, 40, 24, 0.12) 65%,
    transparent 80%);
  filter: blur(40px);
  opacity: 0;
  pointer-events: none;
}

.intro-overlay__mark {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
}

.intro-overlay__logo {
  display: block;
  width: clamp(220px, 28vw, 360px);
  height: auto;
  opacity: 0;
  filter:
    drop-shadow(0 0 40px rgba(212, 176, 112, 0.45))
    drop-shadow(0 0 80px rgba(255, 220, 130, 0.25));
  /* Logo.png ima tamne corner brackets — na tamnoj intro pozadini se gube,
     ostaje vidljiv zlatan krst u krugu + crveni "Orthodox Corner" tekst.
     To je zapravo dobar dramatični efekat. */
}

@media (prefers-reduced-motion: reduce) {
  .intro-overlay { display: none; }
}

/* ================================================================
   PRODUCT CARD — gold leaf reveal sweep
   ================================================================ */

.product-card__sweep {
  position: absolute;
  top: 0;
  left: -50%;
  width: 50%;
  height: 100%;
  background: linear-gradient(115deg,
    transparent 30%,
    rgba(255, 245, 220, 0.0) 40%,
    rgba(255, 230, 160, 0.55) 50%,
    rgba(212, 176, 112, 0.45) 52%,
    rgba(255, 245, 220, 0.0) 62%,
    transparent 75%);
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transform: translateX(0) skewX(-12deg);
  mix-blend-mode: screen;
}

/* Sweep se okida JS-om (initial scroll-in i mouseenter), nikad
   kroz :hover CSS selektor — :hover bi okidao i na mouseleave
   jer browser menja animation property pa restartuje. */
.product-card__sweep.is-sweeping {
  animation: cardGoldSweep 1.4s cubic-bezier(0.19, 1, 0.22, 1);
}

@keyframes cardGoldSweep {
  0%   { opacity: 0;   transform: translateX(0) skewX(-12deg); }
  15%  { opacity: 1; }
  100% { opacity: 0;   transform: translateX(500%) skewX(-12deg); }
}

@media (prefers-reduced-motion: reduce) {
  .product-card__sweep { display: none; }
}

/* ================================================================
   Utility
   ================================================================ */

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Sekundaran/prigušen tekst - koristi se u šablonima (npr. account.html);
   do sada je postojao samo u admin.css pa je na frontu bio bez stila. */
.muted { color: var(--ink-mute); }

/* ================================================================
   Skeleton loaders — prikaz dok JS fetcuje sa API-ja
   Ne pokazujemo mockup data koji "blesne" → onda ga JS zameni
   ================================================================ */

@keyframes ocShimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.oc-skel {
  background: linear-gradient(
    90deg,
    rgba(160, 120, 44, 0.06) 0%,
    rgba(160, 120, 44, 0.14) 50%,
    rgba(160, 120, 44, 0.06) 100%
  );
  background-size: 200% 100%;
  animation: ocShimmer 1.4s linear infinite;
  border-radius: 4px;
  color: transparent;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}

.oc-skel--block { display: block; }

/* Skeleton card za product/category grid */
.product-card.is-skeleton,
.category-tile.is-skeleton {
  pointer-events: none;
  cursor: default;
  opacity: 1 !important;
  transform: none !important;
}

.product-card.is-skeleton .product-card__media,
.category-tile.is-skeleton .category-tile__media {
  background: linear-gradient(
    90deg,
    rgba(160, 120, 44, 0.06) 0%,
    rgba(160, 120, 44, 0.14) 50%,
    rgba(160, 120, 44, 0.06) 100%
  );
  background-size: 200% 100%;
  animation: ocShimmer 1.4s linear infinite;
}

.product-card.is-skeleton img,
.category-tile.is-skeleton img {
  visibility: hidden;
}

.product-card.is-skeleton .product-card__category,
.product-card.is-skeleton .product-card__title,
.product-card.is-skeleton .product-card__price,
.product-card.is-skeleton .product-card__sizes,
.category-tile.is-skeleton .category-tile__title,
.category-tile.is-skeleton .category-tile__count {
  background: linear-gradient(
    90deg,
    rgba(160, 120, 44, 0.06) 0%,
    rgba(160, 120, 44, 0.14) 50%,
    rgba(160, 120, 44, 0.06) 100%
  );
  background-size: 200% 100%;
  animation: ocShimmer 1.4s linear infinite;
  color: transparent;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .oc-skel,
  .product-card.is-skeleton .product-card__media,
  .category-tile.is-skeleton .category-tile__media,
  .product-card.is-skeleton .product-card__category,
  .product-card.is-skeleton .product-card__title,
  .product-card.is-skeleton .product-card__price,
  .product-card.is-skeleton .product-card__sizes,
  .category-tile.is-skeleton .category-tile__title,
  .category-tile.is-skeleton .category-tile__count {
    animation: none;
    background: rgba(160, 120, 44, 0.10);
  }
}

/* Generic loading message — kad fetch fail-uje ili dok čekamo */
.oc-loading {
  text-align: center;
  padding: var(--s-8, 64px) var(--s-4, 24px);
  color: rgba(31, 18, 8, 0.55);
  font-style: italic;
  font-family: "Newsreader", "Cormorant Garamond", Georgia, serif;
  font-size: 0.95rem;
}

/* "Hide until JS hydrates" — JS uklanja klasu .is-hydrated kad popuni */
[data-hydrate-gate]:not(.is-hydrated) > [data-hydrate-show="ready"] {
  display: none;
}
[data-hydrate-gate].is-hydrated > [data-hydrate-show="loading"] {
  display: none;
}

/* HTML `hidden` atribut mora pobediti specificity-jače display: flex/grid pravila
   (npr. .account-gate { display: flex }) — bez !important hidden ne radi. */
[hidden] { display: none !important; }

/* ================================================================
   Moj nalog — gate, forme, modali, adrese
   ================================================================ */

.account-loading {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.account-gate {
  min-height: 60vh;
  display: flex;
  align-items: center;
  padding: 64px 0;
}
.account-gate__card {
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
  padding: 48px 32px;
  background: #fff;
  border: 1px solid rgba(160, 120, 44, 0.18);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}
.account-gate__title {
  font-family: "Cormorant Garamond", "Newsreader", Georgia, serif;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 500;
  margin: 0 0 16px;
  color: #1F1208;
}
.account-gate__text {
  color: rgba(31, 18, 8, 0.7);
  margin: 0 0 28px;
  font-family: "Newsreader", Georgia, serif;
  line-height: 1.6;
}
.account-gate__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Forme u "Moj nalog" */
.account-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 540px;
}
.account-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.account-form__field input,
.account-form__field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(160, 120, 44, 0.22);
  border-radius: 4px;
  background: #fff;
  font-family: "Newsreader", Georgia, serif;
  font-size: 0.95rem;
  color: #1F1208;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.account-form__field input:focus,
.account-form__field textarea:focus {
  outline: none;
  border-color: #A0782C;
  box-shadow: 0 0 0 3px rgba(160, 120, 44, 0.14);
}
.account-form__field input[readonly] {
  background: rgba(160, 120, 44, 0.04);
  color: rgba(31, 18, 8, 0.6);
  cursor: not-allowed;
}
.account-form__field.has-error input,
.account-form__field.has-error textarea {
  border-color: #B0432A;
  box-shadow: 0 0 0 3px rgba(176, 67, 42, 0.12);
}
.account-form__label {
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: rgba(31, 18, 8, 0.7);
  font-weight: 500;
}
.account-form__row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 16px;
}
@media (max-width: 640px) {
  .account-form__row { grid-template-columns: 1fr; }
}

/* ================================================================
   Order detail page — /moj-nalog/porudzbina/<number>/
   ================================================================ */
.order-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: start;
}
@media (max-width: 960px) {
  .order-detail-layout { grid-template-columns: 1fr; }
}
.order-detail-side .account-block { margin-bottom: 1.5rem; }

/* Status pill — boja prema status varijanti */
.order-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 100px;
  border: 1px solid currentColor;
  align-self: center;
}
.order-status-pill--pending   { color: #8A6A1F; background: rgba(160,120,44,0.10); }
.order-status-pill--confirmed { color: #2C7548; background: rgba(44,117,72,0.10); }
.order-status-pill--shipped   { color: #1F5078; background: rgba(31,80,120,0.10); }
.order-status-pill--delivered { color: #2C7548; background: rgba(44,117,72,0.10); }
.order-status-pill--cancelled { color: #8A2E1F; background: rgba(176,67,42,0.10); }

/* Akcije u side panelu (Preuzmi račun / Otkaži) */
.order-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}
.btn-block {
  display: flex;
  width: 100%;
  text-align: center;
  justify-content: center;
}

/* Klikabilni order entry u "Moj nalog" listi */
.account-order--link {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: grid;
  transition: background-color 0.18s ease, transform 0.18s ease;
}
.account-order--link:hover {
  background-color: rgba(160, 120, 44, 0.06);
  transform: translateX(2px);
}

.account-form__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.account-form__status {
  font-size: 0.85rem;
  font-family: "Newsreader", Georgia, serif;
}
.account-form__status.is-success { color: #2C7548; }
.account-form__status.is-error   { color: #B0432A; }

.account-form__checkbox {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 0.92rem;
  color: rgba(31, 18, 8, 0.8);
  cursor: pointer;
}
.account-form__checkbox input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: #A0782C;
  cursor: pointer;
}

.field-error {
  display: block;
  font-size: 0.8rem;
  color: #B0432A;
  margin-top: 4px;
}

.form-banner {
  padding: 12px 14px;
  border-radius: 4px;
  font-size: 0.9rem;
  font-family: "Newsreader", Georgia, serif;
  margin-bottom: 8px;
}
.form-banner:empty { display: none; }
.form-banner.is-error {
  background: rgba(176, 67, 42, 0.08);
  border: 1px solid rgba(176, 67, 42, 0.3);
  color: #8A331E;
}
.form-banner.is-success {
  background: rgba(44, 117, 72, 0.08);
  border: 1px solid rgba(44, 117, 72, 0.3);
  color: #1F5634;
}

/* Lista adresa */
.account-addresses-list {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  margin-top: 16px;
}
.account-address-card {
  background: #fff;
  border: 1px solid rgba(160, 120, 44, 0.18);
  border-radius: 6px;
  padding: 20px;
  font-family: "Newsreader", Georgia, serif;
  font-size: 0.95rem;
  color: rgba(31, 18, 8, 0.85);
  line-height: 1.5;
  position: relative;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.account-address-card.is-default {
  border-color: #A0782C;
  box-shadow: 0 0 0 1px rgba(160, 120, 44, 0.25);
}
.account-address-card__label {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #A0782C;
  font-weight: 600;
  margin-bottom: 8px;
}
.account-address-card__lines {
  margin-top: 6px;
  color: rgba(31, 18, 8, 0.7);
}
.account-address-card__actions {
  display: flex;
  gap: 14px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(160, 120, 44, 0.12);
  flex-wrap: wrap;
}
.account-address-card__actions button {
  background: none; border: 0; cursor: pointer;
  padding: 0;
  font-family: inherit;
  font-size: 0.85rem;
}

.link-arrow--danger { color: #B0432A; }
.link-arrow--danger:hover { color: #8A331E; }

.account-empty {
  padding: 20px 16px;
  background: rgba(160, 120, 44, 0.04);
  border: 1px dashed rgba(160, 120, 44, 0.25);
  border-radius: 4px;
  color: rgba(31, 18, 8, 0.65);
  font-family: "Newsreader", Georgia, serif;
  font-size: 0.92rem;
  margin-top: 12px;
}

/* Modal za novu/edit adresu */
.account-modal {
  position: fixed; inset: 0;
  z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.account-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(31, 18, 8, 0.55);
  backdrop-filter: blur(2px);
  cursor: pointer;
}
.account-modal__inner {
  position: relative;
  background: #FBF5E8;
  border-radius: 8px;
  padding: 32px 28px 28px;
  max-width: 540px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
}
.account-modal__close {
  position: absolute;
  top: 10px; right: 12px;
  background: none; border: 0;
  font-size: 1.6rem;
  line-height: 1;
  color: rgba(31, 18, 8, 0.55);
  cursor: pointer;
  width: 36px; height: 36px;
}
.account-modal__close:hover { color: #1F1208; }
.account-modal__title {
  font-family: "Cormorant Garamond", "Newsreader", Georgia, serif;
  font-size: 1.4rem;
  font-weight: 500;
  margin: 0 0 16px;
  color: #1F1208;
}

/* ================================================================
   Header tool dropdowns (Profile + Cart)
   ================================================================ */

.tool-btn-group {
  position: relative;
  display: inline-flex;
}

.tool-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: -8px;
  min-width: 320px;
  max-width: 400px;
  background: #FBF5E8;
  color: #1F1208;
  border: 1px solid rgba(160, 120, 44, 0.28);
  border-radius: 6px;
  box-shadow: 0 12px 32px rgba(20, 10, 5, 0.25);
  padding: 18px 18px 16px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 200;
  font-family: "Newsreader", "Cormorant Garamond", Georgia, serif;
  font-size: 0.92rem;
}

.tool-dropdown::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 14px;
  width: 12px; height: 12px;
  background: #FBF5E8;
  border-left: 1px solid rgba(160, 120, 44, 0.28);
  border-top: 1px solid rgba(160, 120, 44, 0.28);
  transform: rotate(45deg);
}

.tool-btn-group:hover .tool-dropdown,
.tool-btn-group:focus-within .tool-dropdown,
.tool-btn-group.is-open .tool-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Hover bridge — sprečava close kad mišom prelazimo razmak između tool-btn i dropdown */
.tool-btn-group::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  height: 12px;
  pointer-events: none;
}
.tool-btn-group:hover::after { pointer-events: auto; }

/* Profile dropdown */
.tool-dropdown__greeting {
  margin: 0 0 4px;
  font-family: "Cormorant Garamond", serif;
  font-size: 1.05rem;
  color: #1F1208;
}
.tool-dropdown__greeting strong {
  font-weight: 600;
  color: #A0782C;
}
.tool-dropdown__email {
  margin: 0 0 14px;
  color: rgba(31, 18, 8, 0.6);
  font-size: 0.82rem;
  word-break: break-all;
}
.tool-dropdown__hint {
  margin: 0 0 14px;
  color: rgba(31, 18, 8, 0.65);
  font-size: 0.88rem;
  line-height: 1.4;
}
.tool-dropdown__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tool-dropdown__actions .btn {
  width: 100%;
  justify-content: center;
  text-align: center;
}
.tool-dropdown__links {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  border-top: 1px solid rgba(160, 120, 44, 0.15);
  border-bottom: 1px solid rgba(160, 120, 44, 0.15);
}
.tool-dropdown__links li { margin: 0; }
.tool-dropdown__links a {
  display: block;
  padding: 9px 4px;
  color: #1F1208;
  text-decoration: none;
  font-size: 0.92rem;
  border-bottom: 1px solid rgba(160, 120, 44, 0.10);
  transition: color 0.15s, padding-left 0.15s;
}
.tool-dropdown__links li:last-child a { border-bottom: 0; }
.tool-dropdown__links a:hover {
  color: #A0782C;
  padding-left: 8px;
}
.tool-dropdown__logout {
  width: 100%;
  padding: 9px 12px;
  background: transparent;
  border: 1px solid rgba(176, 67, 42, 0.4);
  color: #B0432A;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.88rem;
  transition: background 0.15s, color 0.15s;
}
.tool-dropdown__logout:hover {
  background: #B0432A;
  color: #fff;
}

/* Cart dropdown */
.tool-dropdown__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(160, 120, 44, 0.15);
}
.tool-dropdown__title {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.1rem;
  color: #1F1208;
}
.tool-dropdown__meta {
  font-size: 0.78rem;
  color: rgba(31, 18, 8, 0.6);
}
.tool-dropdown__cart-items {
  max-height: 280px;
  overflow-y: auto;
  margin: 0 -4px 12px;
  padding: 0 4px;
}
.tool-dropdown__empty {
  margin: 0;
  padding: 16px 4px;
  color: rgba(31, 18, 8, 0.65);
  font-style: italic;
  font-size: 0.9rem;
  text-align: center;
}
.tool-dropdown__empty a {
  color: #A0782C;
  text-decoration: none;
  font-style: normal;
  font-weight: 500;
}
.tool-dropdown__cart-item {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 6px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(160, 120, 44, 0.10);
}
.tool-dropdown__cart-item:last-child { border-bottom: 0; }

.tool-dropdown__cart-item-img-link {
  grid-row: span 2;
  display: block;
  text-decoration: none;
}
.tool-dropdown__cart-item-img {
  width: 56px; height: 56px;
  object-fit: cover;
  border-radius: 3px;
  background: rgba(160, 120, 44, 0.06);
  display: block;
}
.tool-dropdown__cart-item-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  grid-column: 2;
  grid-row: 1;
}
.tool-dropdown__cart-item-name {
  font-size: 0.88rem;
  color: #1F1208;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.15s ease;
}
.tool-dropdown__cart-item-name:hover { color: #A0782C; }
.tool-dropdown__cart-item-meta {
  font-size: 0.74rem;
  color: rgba(31, 18, 8, 0.55);
}
.tool-dropdown__cart-item-price {
  font-size: 0.88rem;
  color: #A0782C;
  font-weight: 600;
  white-space: nowrap;
  grid-column: 3;
  grid-row: 1;
}

/* Qty controls + remove — drugi red ispod info-a, zauzima kolone 2-3 */
.tool-dropdown__cart-item-actions {
  grid-column: 2 / span 2;
  grid-row: 2;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tool-dropdown__qty-btn,
.tool-dropdown__remove-btn {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1;
  background: transparent;
  border: 1px solid rgba(160, 120, 44, 0.28);
  border-radius: 3px;
  color: #1F1208;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
  font-family: inherit;
}
.tool-dropdown__qty-btn:hover {
  border-color: #A0782C;
  background: rgba(160, 120, 44, 0.08);
}
.tool-dropdown__qty {
  min-width: 20px;
  text-align: center;
  font-size: 0.85rem;
  color: #1F1208;
  font-variant-numeric: tabular-nums;
}
.tool-dropdown__remove-btn {
  margin-left: auto;
  font-size: 1.1rem;
  color: rgba(31, 18, 8, 0.55);
  border-color: transparent;
}
.tool-dropdown__remove-btn:hover {
  color: var(--rust, #B0432A);
  border-color: rgba(176, 67, 42, 0.3);
  background: rgba(176, 67, 42, 0.06);
}
.tool-dropdown__cart-footer {
  padding-top: 12px;
  border-top: 1px solid rgba(160, 120, 44, 0.15);
}
.tool-dropdown__cart-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
  font-size: 0.95rem;
}
.tool-dropdown__cart-total strong {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.15rem;
  color: #A0782C;
}
.tool-dropdown__cart-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.tool-dropdown__cart-actions .btn {
  justify-content: center;
}

/* Mobile (<720px): NE pokazujemo dropdown — klik na profile/cart ide direktno
   na /moj-nalog/ ili /korpa/. Dropdown je čist desktop-only pattern. */
@media (max-width: 720px) {
  .tool-dropdown { display: none !important; }
  .tool-btn-group::after { display: none; }
}

/* Cart count badge — sakriven kad je 0 (cart-helper.js postavlja hidden) */
[data-cart-count][hidden],
.tool-btn__count[hidden] {
  display: none !important;
}

/* ================================================================
   Lightbox za zumiranje slika (product page + gallery može da koristi)
   ================================================================ */

.oc-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9800;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 32px;
}
.oc-lightbox.is-open { display: flex; }

.oc-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 10, 5, 0.92);
  cursor: zoom-out;
}

.oc-lightbox__image {
  position: relative;
  max-width: 92vw;
  max-height: 88vh;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 24px 64px rgba(0,0,0,.5);
  border-radius: 4px;
  animation: ocLightboxIn 0.22s ease-out;
}

@keyframes ocLightboxIn {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

.oc-lightbox__close {
  position: absolute;
  top: 20px; right: 20px;
  width: 44px; height: 44px;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 2;
  transition: background 0.15s, transform 0.15s;
}
.oc-lightbox__close:hover {
  background: rgba(176, 67, 42, 0.85);
  transform: rotate(90deg);
}

.oc-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px; height: 56px;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 2;
  transition: background 0.15s;
}
.oc-lightbox__nav:hover { background: rgba(160, 120, 44, 0.85); }
.oc-lightbox__nav--prev { left: 24px; }
.oc-lightbox__nav--next { right: 24px; }

@media (max-width: 720px) {
  .oc-lightbox { padding: 16px; }
  .oc-lightbox__nav { width: 44px; height: 44px; font-size: 1.5rem; }
  .oc-lightbox__nav--prev { left: 8px; }
  .oc-lightbox__nav--next { right: 8px; }
}

/* Order status pills — proširen mapiranje statusa (pending/confirmed/shipped/delivered/cancelled) */
.account-order__status--pending   { color: #8A6C1F; background: rgba(160, 120, 44, 0.12); }
.account-order__status--confirmed { color: #1F5634; background: rgba(44, 117, 72, 0.12); }
.account-order__status--shipped   { color: #1F4B7A; background: rgba(34, 76, 122, 0.12); }
.account-order__status--delivered { color: #1F5634; background: rgba(44, 117, 72, 0.16); }
.account-order__status--cancelled { color: #8A331E; background: rgba(176, 67, 42, 0.12); }

/* ============================================================
   SEARCH OVERLAY (global popup pretrage)
   ============================================================ */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 80px 16px 16px;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.search-overlay.is-open { opacity: 1; }
.search-overlay[hidden] { display: none; }

.search-overlay__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 10, 5, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
}

.search-overlay__panel {
  position: relative;
  width: 100%;
  max-width: 720px;
  background: #FBF5E8;
  border-radius: 8px;
  border: 1px solid rgba(160, 120, 44, 0.18);
  box-shadow: 0 24px 80px rgba(31, 18, 8, 0.35);
  padding: 24px;
  transform: translateY(-8px);
  transition: transform 0.2s ease;
  max-height: calc(100vh - 96px);
  display: flex;
  flex-direction: column;
}
.search-overlay.is-open .search-overlay__panel { transform: translateY(0); }

.search-overlay__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  color: rgba(31, 18, 8, 0.55);
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.15s ease, color 0.15s ease;
}
.search-overlay__close:hover {
  color: #1F1208;
  background: rgba(31, 18, 8, 0.06);
}

.search-overlay__form {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid rgba(160, 120, 44, 0.35);
  border-radius: 6px;
  background: #fff;
  margin-top: 8px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.search-overlay__form:focus-within {
  border-color: var(--gold-deep, #A0782C);
  box-shadow: 0 0 0 3px rgba(160, 120, 44, 0.18);
}

.search-overlay__icon {
  flex-shrink: 0;
  color: var(--gold-deep, #A0782C);
}

.search-overlay__input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: "Newsreader", "Cormorant Garamond", Georgia, serif;
  font-size: 1.05rem;
  color: #1F1208;
  padding: 6px 0;
  min-width: 0;
}
.search-overlay__input::placeholder { color: rgba(31, 18, 8, 0.45); }

.search-overlay__submit {
  flex-shrink: 0;
  background: #1F1208;
  color: #FBF5E8;
  border: 0;
  border-radius: 4px;
  padding: 8px 16px;
  font-family: inherit;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.15s ease;
}
.search-overlay__submit:hover { background: #3A2418; }

.search-overlay__results {
  margin-top: 16px;
  overflow-y: auto;
  max-height: 60vh;
}

.search-overlay__hint {
  padding: 24px 8px;
  text-align: center;
  font-style: italic;
  color: rgba(31, 18, 8, 0.55);
  font-size: 0.95rem;
}
.search-overlay__hint em { color: #1F1208; font-style: italic; }

@media (max-width: 720px) {
  .search-overlay {
    /* Full screen na mobilu — nema viška praznog backdropa, sav prostor je panel */
    padding: 0;
    align-items: stretch;
  }
  .search-overlay__panel {
    border-radius: 0;
    max-height: 100vh;
    padding: 64px 16px 16px;
    width: 100%;
    max-width: none;
    box-shadow: none;
    border: 0;
  }
  .search-overlay__close {
    width: 44px;
    height: 44px;
    top: 12px;
    right: 12px;
    background: rgba(31, 18, 8, 0.06);
  }
  .search-overlay__form {
    margin-top: 0;
    padding: 12px 14px;
    border-width: 1.5px;
  }
  .search-overlay__input {
    font-size: 16px;  /* iOS zoom prevention */
    padding: 8px 0;
  }
  .search-overlay__submit {
    padding: 10px 16px;
    font-size: 0.85rem;
    min-height: 44px;
  }
  .search-overlay__hint {
    padding: 32px 12px;
    font-size: 0.95rem;
  }
}

.search-overlay__result-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.search-overlay__result-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 8px;
  border-radius: 6px;
  text-decoration: none;
  color: #1F1208;
  transition: background 0.15s ease;
}
.search-overlay__result-item:hover {
  background: rgba(160, 120, 44, 0.08);
}

.search-overlay__result-media {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(31, 18, 8, 0.05);
}
.search-overlay__result-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.search-overlay__result-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.search-overlay__result-category {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gold-deep, #A0782C);
}
.search-overlay__result-name {
  font-family: "Cormorant Garamond", "Newsreader", Georgia, serif;
  font-size: 1.05rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-overlay__result-price {
  font-size: 0.9rem;
  color: rgba(31, 18, 8, 0.7);
}

.search-overlay__see-all {
  display: inline-block;
  margin-top: 12px;
  padding: 10px 8px;
  color: var(--gold-deep, #A0782C);
  text-decoration: none;
  font-size: 0.92rem;
  border-top: 1px solid rgba(160, 120, 44, 0.18);
  width: 100%;
  text-align: center;
  transition: color 0.15s ease;
}
.search-overlay__see-all:hover { color: #1F1208; }

@media (max-width: 600px) {
  .search-overlay { padding: 56px 12px 12px; }
  .search-overlay__panel { padding: 20px 16px 16px; }
  .search-overlay__form { padding: 8px 10px; gap: 8px; }
  .search-overlay__input { font-size: 1rem; }
  .search-overlay__submit { padding: 8px 12px; font-size: 0.9rem; }
  .search-overlay__result-media { width: 48px; height: 48px; }
  .search-overlay__result-name { font-size: 1rem; }
}

/* ================================================================
   About — Sertifikat sekcija (slika sertifikata + lista šta dobijate)
   ================================================================ */
.certificate-section {
  padding: clamp(3rem, 7vw, 6rem) 0;
  background: var(--bg-tint, rgba(160, 120, 44, 0.04));
}
.certificate {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 1.2fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  max-width: 1080px;
  margin: 0 auto;
}
/* Ako slika fail-uje da se učita (npr. pre prvog upload-a), JS dodaje
   ovu klasu — grid postaje jednokolonski tako da body ne ima prazno mesto. */
.certificate.certificate--no-image {
  grid-template-columns: 1fr;
  max-width: 720px;
  text-align: center;
}
.certificate--no-image .certificate__list { display: inline-block; text-align: left; }
.certificate__media {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.certificate__media img {
  max-width: 100%;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 16px 40px rgba(31, 18, 8, 0.10);
}
.certificate__body { min-width: 0; }
.certificate__title {
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 var(--s-5);
  letter-spacing: var(--tracking-tight);
}
.certificate__list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.certificate__list li {
  font-size: var(--t-base);
  line-height: 1.55;
  color: var(--ink-soft);
  padding-left: var(--s-5);
  position: relative;
}
.certificate__list li::before {
  content: '\2726';
  position: absolute;
  left: 0;
  top: 0.1em;
  color: var(--gold-deep);
  font-size: 0.85em;
}
.certificate__list strong {
  color: var(--ink);
  font-weight: 600;
}
.certificate__note {
  margin: 0;
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  font-size: var(--t-sm);
  color: var(--ink-mute);
  font-style: italic;
}

@media (max-width: 800px) {
  .certificate {
    grid-template-columns: 1fr;
    gap: var(--s-8);
  }
  .certificate__media {
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ================================================================
   Contact — Pravni subjekat (NCcommerce LLC) sekcija
   ================================================================ */
.contact-legal-section {
  padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(3rem, 7vw, 6rem);
  background: var(--bg-tint, rgba(160, 120, 44, 0.04));
  border-top: 1px solid var(--line);
}
.contact-legal {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}
.contact-legal__eyebrow {
  display: block;
  margin-bottom: var(--s-4);
  color: var(--gold-deep);
}
.contact-legal__title {
  font-family: var(--font-display);
  font-size: var(--t-3xl);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  margin: 0 0 var(--s-5);
}
.contact-legal__title em {
  font-style: italic;
  color: var(--gold-deep);
}
.contact-legal__lead {
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 auto var(--s-8);
  max-width: 560px;
}
.contact-legal__details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s-5) var(--s-8);
  text-align: left;
  margin: 0;
  padding: var(--s-6) var(--s-8);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
}
.contact-legal__details > div { margin: 0; }
.contact-legal__details dt {
  font-size: var(--t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--ink-mute);
  margin-bottom: 4px;
}
.contact-legal__details dd {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--ink);
  line-height: 1.5;
}
.contact-legal__details dd a { color: var(--gold-deep); text-decoration: none; }
.contact-legal__details dd a:hover { text-decoration: underline; }

@media (max-width: 600px) {
  .contact-legal__details {
    grid-template-columns: 1fr;
    gap: var(--s-4);
    padding: var(--s-5);
  }
}

/* ================================================================
   GLOBAL MOBILE PATCHES — universalni fixevi za sve stranice
   ================================================================
   - iOS zoom prevention na svim input-ima (font-size 16px)
   - Tap target minimum 44px za interaktivne elemente
   - Smanjeni paddingovi gde su preglomazni
   - Buttons full-width u uskoj koloni kad ima jedan sam
   ================================================================ */
@media (max-width: 720px) {
  /* iOS Safari zoom-on-focus kad input ima <16px font-size. Lečimo globalno. */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  textarea,
  select {
    font-size: 16px;
  }

  /* Tap target minimum — dugmad i linkovi u nav/akcijama */
  .btn,
  .qty-control__btn,
  .tool-btn {
    min-height: 44px;
  }
  .btn-sm { min-height: 36px; }

  /* Hero akcije isto kao final-cta na mobilu — stack + full-width */
  .hero__actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-4);
    max-width: 360px;
  }
  .hero__actions .btn {
    width: 100%;
    justify-content: center;
  }

  /* Tipičan "actions" container — slaganje vertikalno na mobilu */
  .about-hero__actions,
  .contact-cta__actions,
  .account-actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-4);
  }
  .about-hero__actions .btn,
  .contact-cta__actions .btn,
  .account-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* Manje od 380px (very small phones — iPhone SE old, Galaxy A05) */
@media (max-width: 380px) {
  :root {
    --gutter: 14px;  /* tighter side padding tako da kontent ne bode ivice */
  }
  .btn-lg { padding: var(--s-5) var(--s-8); font-size: var(--t-xs); }
}

/* ============================================================
   VELEPRODAJA (/veleprodaja/) — koristi contact-page skelet,
   ovde su samo specifične sekcije (benefiti, koraci, uslovi).
   ============================================================ */

/* Select unutar checkout polja — izgleda kao input (kontakt forma ih nema) */
.checkout-field .checkout-select {
  width: 100%;
  padding: var(--s-3) var(--s-4);
  background-color: var(--cream-paper);
  border: 1px solid var(--line-strong);
  font-family: var(--font-body);
  font-size: var(--t-base);
  color: var(--ink);
  transition: border-color var(--d-base) var(--ease-out),
              background-color var(--d-base) var(--ease-out);
  cursor: pointer;
}
.checkout-field .checkout-select:hover { border-color: var(--gold-deep); }
.checkout-field .checkout-select:focus {
  outline: none;
  border-color: var(--gold);
  background-color: var(--cream);
}

/* Honeypot — sakriveno polje; pristupačno botu, nevidljivo čoveku */
.vp-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Benefiti — grid kartica */
.vp-benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-5);
  margin-top: var(--s-8);
}
.vp-benefit {
  background-color: var(--cream-paper);
  border: 1px solid var(--gold-faint);
  padding: var(--s-6);
  text-align: left;
}
.vp-benefit__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--gold-faint);
  border-radius: 50%;
  color: var(--gold-deep);
  margin-bottom: var(--s-4);
}
.vp-benefit__title {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  color: var(--ink);
  margin: 0 0 var(--s-2);
}
.vp-benefit__text {
  font-family: var(--font-body);
  font-size: var(--t-sm);
  color: var(--ink-mute);
  line-height: 1.6;
  margin: 0;
}

/* Koraci — numerisani */
.vp-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s-5);
  margin: var(--s-8) 0 0;
  padding: 0;
  list-style: none;
}
.vp-step {
  position: relative;
  padding: var(--s-6);
  border-top: 2px solid var(--gold-faint);
}
.vp-step__num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  color: var(--gold);
  margin-bottom: var(--s-3);
}
.vp-step__title {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  color: var(--ink);
  margin: 0 0 var(--s-2);
}
.vp-step__text {
  font-family: var(--font-body);
  font-size: var(--t-sm);
  color: var(--ink-mute);
  line-height: 1.6;
  margin: 0;
}

/* Uslovi saradnje — lista u sticky aside */
.vp-terms {
  list-style: none;
  margin: 0 0 var(--s-5);
  padding: 0;
}
.vp-terms li {
  font-family: var(--font-body);
  font-size: var(--t-sm);
  color: var(--ink-mute);
  line-height: 1.6;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--gold-faint);
}
.vp-terms li:last-child { border-bottom: none; }
.vp-terms li strong { color: var(--ink); }
.vp-terms__contact {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding-top: var(--s-4);
  border-top: 1px solid var(--gold-faint);
}

/* ============================================================
   RECENZIJE (strana proizvoda) — prikaz + forma
   ============================================================ */
.reviews-summary {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-2);
  margin-top: var(--s-3);
}
.reviews-summary__stars {
  color: var(--gold);
  font-size: var(--t-lg);
  letter-spacing: 2px;
}
.reviews-summary__num {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  color: var(--ink);
}
.reviews-summary__count {
  font-family: var(--font-body);
  font-size: var(--t-sm);
  color: var(--ink-mute);
}

.reviews-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-5);
  margin: var(--s-6) 0;
}
.reviews-empty {
  grid-column: 1 / -1;
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--t-sm);
  color: var(--ink-mute);
  padding: var(--s-5) 0;
}
.review-card {
  background-color: var(--cream-paper);
  border: 1px solid var(--gold-faint);
  padding: var(--s-5);
}
.review-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s-3);
}
.review-card__stars {
  color: var(--gold);
  letter-spacing: 2px;
  font-size: var(--t-base);
}
.review-card__date {
  font-family: var(--font-body);
  font-size: var(--t-xs);
  color: var(--ink-fade);
}
.review-card__body {
  font-family: var(--font-body);
  font-size: var(--t-sm);
  color: var(--ink-soft);
  line-height: 1.65;
  margin: 0 0 var(--s-3);
}
.review-card__author {
  font-family: var(--font-display);
  font-size: var(--t-base);
  color: var(--ink);
  margin: 0;
}

/* Forma za slanje */
.reviews-form-card {
  max-width: 680px;
  margin: var(--s-6) auto 0;
  background-color: var(--cream-warm);
  border: 1px solid var(--gold-faint);
  padding: var(--s-6);
}
.reviews-form__title {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  color: var(--ink);
  margin: 0 0 var(--s-2);
  text-align: center;
}
.reviews-form__hint {
  font-family: var(--font-body);
  font-size: var(--t-sm);
  color: var(--ink-mute);
  text-align: center;
  margin: 0 0 var(--s-5);
}

/* Zvezdice za unos ocene — klasičan row-reverse trik (hover osvetli sebe+levo) */
.rv-stars {
  display: inline-flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: var(--s-1);
}
.rv-stars input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.rv-stars label {
  font-size: 1.9rem;
  line-height: 1;
  color: var(--cream-deep);
  cursor: pointer;
  transition: color var(--d-fast, 0.15s) var(--ease-out);
}
.rv-stars label:hover,
.rv-stars label:hover ~ label,
.rv-stars input:checked ~ label {
  color: var(--gold);
}
.rv-stars input:focus-visible + label {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}