/* ============================================
   EDEN — extra styles for shop / cart / checkout
   ============================================ */

/* Cart badge on nav icon */
.cart-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--copper);
  color: #fff;
  font-family: var(--sans);
  font-size: 0.65rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Language switch links */
.nav-lang a {
  color: inherit;
  text-decoration: none;
  opacity: 0.55;
  transition: opacity 0.3s;
}
.nav-lang a.active,
.nav-lang a:hover {
  opacity: 1;
}

/* Flash messages */
.flash-message {
  max-width: 760px;
  margin: 0 auto 1.5rem;
  padding: 1rem 1.5rem;
  border-radius: 4px;
  font-family: var(--sans);
  font-size: 0.9rem;
}
.flash-message.is-success {
  background: rgba(211, 137, 98, 0.12);
  border: 1px solid var(--copper);
  color: var(--copper-deep);
}
.flash-message.is-error {
  background: rgba(180, 60, 50, 0.1);
  border: 1px solid #b43c32;
  color: #b43c32;
}
.form-errors {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  color: #b43c32;
  font-family: var(--sans);
  font-size: 0.85rem;
}

/* Generic shop page wrapper */
.shop-page {
  padding: 9rem 2rem 6rem;
  min-height: 70vh;
}
.shop-page .container {
  max-width: 1200px;
  margin: 0 auto;
}

/* Cart layout */
.cart-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 3rem;
  align-items: start;
}
.cart-items {
  display: flex;
  flex-direction: column;
}
.cart-row {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: 1.5rem;
  align-items: center;
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(106, 95, 82, 0.18);
}
.cart-row-img {
  width: 90px;
  height: 110px;
  object-fit: cover;
  background: var(--card);
}
.cart-row-info .brand {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--copper);
}
.cart-row-info h3 {
  font-family: var(--serif);
  font-size: 1.5rem;
  margin: 0.2rem 0;
}
.cart-row-info .size {
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--text-medium);
}
.cart-row-actions {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.6rem;
}
.cart-row-price {
  font-family: var(--serif);
  font-size: 1.3rem;
  color: var(--text-dark);
}
.cart-qty-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.cart-qty-form input {
  width: 56px;
  padding: 0.4rem;
  text-align: center;
  border: 1px solid rgba(106, 95, 82, 0.3);
  background: var(--white-warm);
  font-family: var(--sans);
}
.cart-qty-form button,
.cart-remove-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-medium);
  text-decoration: underline;
}
.cart-remove-btn:hover {
  color: #b43c32;
}

/* Cart summary */
.cart-summary {
  background: var(--card);
  padding: 2rem;
  position: sticky;
  top: 7rem;
}
.cart-summary h3 {
  font-family: var(--serif);
  font-size: 1.6rem;
  margin: 0 0 1.5rem;
}
.cart-summary-row {
  display: flex;
  justify-content: space-between;
  font-family: var(--sans);
  font-size: 0.95rem;
  padding: 0.6rem 0;
}
.cart-summary-row.total {
  border-top: 1px solid rgba(106, 95, 82, 0.25);
  margin-top: 0.5rem;
  padding-top: 1rem;
  font-family: var(--serif);
  font-size: 1.4rem;
}
.cart-summary .btn {
  width: 100%;
  margin-top: 1.5rem;
  text-align: center;
}
.cart-summary-note {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--text-soft);
  margin-top: 1rem;
  line-height: 1.6;
}
.cart-empty {
  text-align: center;
  padding: 4rem 0;
}
.cart-empty p {
  font-family: var(--serif);
  font-size: 1.8rem;
  color: var(--text-medium);
  margin-bottom: 2rem;
}

/* Checkout layout */
.checkout-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 3rem;
  align-items: start;
}
.checkout-summary {
  background: var(--card);
  padding: 2rem;
  position: sticky;
  top: 7rem;
}
.checkout-summary h3 {
  font-family: var(--serif);
  font-size: 1.6rem;
  margin: 0 0 1.2rem;
}
.checkout-summary-item {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--sans);
  font-size: 0.85rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(106, 95, 82, 0.15);
}
.checkout-summary-item .name {
  color: var(--text-dark);
}
.checkout-summary-item .meta {
  color: var(--text-soft);
  font-size: 0.78rem;
}

/* Order success */
.order-success {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}
.order-success .order-box {
  background: var(--card);
  padding: 2rem;
  margin: 2rem 0;
  font-family: var(--sans);
}
.order-success .order-number {
  font-family: var(--serif);
  font-size: 2rem;
  color: var(--copper);
}

@media (max-width: 900px) {
  .cart-layout,
  .checkout-layout {
    grid-template-columns: 1fr;
  }
  .cart-summary,
  .checkout-summary {
    position: static;
  }
  .cart-row {
    grid-template-columns: 70px 1fr;
  }
  .cart-row-actions {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .cart-row-img {
    width: 70px;
    height: 88px;
  }
}

/* ============================================
   Article detail
   ============================================ */
.article-detail {
  padding: 4rem 2rem 2rem;
}
.article-detail .container {
  max-width: 820px;
  margin: 0 auto;
}
.article-detail-image {
  margin-bottom: 3rem;
  overflow: hidden;
}
.article-detail-image img {
  width: 100%;
  display: block;
}
.article-body {
  font-family: var(--serif);
  font-size: 1.3rem;
  line-height: 1.85;
  color: var(--text-dark);
}
.article-body p {
  margin: 0 0 1.6rem;
}
.article-body h2,
.article-body h3 {
  font-family: var(--serif);
  margin: 2.5rem 0 1rem;
}
.article-body a {
  color: var(--copper-deep);
}
.article-back {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(106, 95, 82, 0.2);
}

/* ============================================
   Share buttons
   ============================================ */
.share-buttons {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 2rem 0;
}
.share-label {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-right: 0.4rem;
}
.share-btn {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(106, 95, 82, 0.3);
  border-radius: 50%;
  color: var(--text-medium);
  background: transparent;
  cursor: pointer;
  transition: background 0.3s, color 0.3s, border-color 0.3s, transform 0.3s;
  padding: 0;
}
.share-btn svg {
  width: 16px;
  height: 16px;
}
.share-btn:hover {
  background: var(--copper);
  border-color: var(--copper);
  color: #fff;
  transform: translateY(-2px);
}
.share-copy.is-copied {
  background: var(--green-dark);
  border-color: var(--green-dark);
  color: #fff;
}
.share-toast {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--copper-deep);
  margin-left: 0.3rem;
  opacity: 0;
  transition: opacity 0.3s;
}
.share-toast.show {
  opacity: 1;
}

/* Share on dark sections */
.product-bleed .share-buttons .share-btn,
.share-buttons--light .share-btn {
  border-color: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.85);
}

/* ============================================
   Cookie banner
   ============================================ */
.cookie-banner {
  position: fixed;
  bottom: 1.5rem;
  left: 1.5rem;
  right: 1.5rem;
  max-width: 720px;
  margin: 0 auto;
  background: var(--green-darkest);
  color: rgba(255, 255, 255, 0.92);
  padding: 1.4rem 1.6rem;
  border-radius: 4px;
  box-shadow: 0 16px 40px rgba(20, 39, 30, 0.35);
  z-index: 9000;
  font-family: var(--sans);
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
  align-items: center;
  animation: cookieIn 0.4s ease-out;
}
@keyframes cookieIn {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.cookie-text {
  flex: 1;
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.55;
}
.cookie-actions {
  display: flex;
  gap: 0.6rem;
  flex-shrink: 0;
}
.cookie-btn {
  padding: 0.55rem 1.2rem;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 2px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.cookie-btn-accept {
  background: var(--copper);
  color: #fff;
  border-color: var(--copper);
}
.cookie-btn-accept:hover { background: var(--copper-deep); border-color: var(--copper-deep); }
.cookie-btn-decline {
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  border-color: rgba(255, 255, 255, 0.3);
}
.cookie-btn-decline:hover { color: #fff; border-color: rgba(255, 255, 255, 0.7); }
@media (max-width: 640px) {
  .cookie-banner { flex-direction: column; align-items: stretch; bottom: 1rem; left: 1rem; right: 1rem; padding: 1.2rem; }
  .cookie-actions { justify-content: flex-end; }
}

/* ============================================
   Galerija parfema (glavna slika + thumbovi)
   ============================================ */
.product-gallery {
  width: 80%;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}
.product-gallery .product-split-image {
  width: 100%;
  max-width: none;
  max-height: calc(100vh - 260px);
}
.product-gallery-thumbs {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  justify-content: center;
}
.product-gallery-thumbs .thumbnail {
  width: 62px;
  height: 78px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid rgba(106, 95, 82, 0.25);
  opacity: 0.55;
  transition: opacity 0.3s, border-color 0.3s, transform 0.3s;
  flex: 0 0 auto;
}
.product-gallery-thumbs .thumbnail img {
  width: 100%;
  height: 100%;
  /* Cijela slika, ne isjecak — sto se vidi u slicici to se otvara */
  object-fit: contain;
  display: block;
}
.product-gallery-thumbs .thumbnail:hover {
  opacity: 1;
  transform: translateY(-2px);
}
.product-gallery-thumbs .thumbnail.active {
  opacity: 1;
  border-color: var(--copper);
}

/* ============================================
   Detaljni opis parfema
   ============================================ */
.product-story {
  background: var(--bg-alt);
  padding: 7rem 2rem;
}
.product-story-inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.product-story .tag {
  display: block;
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 1rem;
}
.product-story h2 {
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 300;
  margin: 0 0 2.5rem;
  color: var(--text-dark);
}
.product-story h2 em {
  font-style: italic;
  color: var(--copper);
}
.product-story-body {
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.9;
  color: var(--text-medium);
  text-align: left;
}
.product-story-body p {
  margin: 0 0 1.5rem;
}
.product-story-body h3,
.product-story-body h4 {
  font-family: var(--serif);
  color: var(--text-dark);
  margin: 2rem 0 0.8rem;
}
.product-story-body ul,
.product-story-body ol {
  margin: 0 0 1.5rem 1.4rem;
}
.product-story-body li { margin-bottom: 0.5rem; }
.product-story-body a { color: var(--copper-deep); }
.product-story-body strong { color: var(--text-dark); font-weight: 600; }

@media (max-width: 968px) {
  .product-gallery { width: 88%; }
  .product-gallery .product-split-image { max-height: none; }
  .product-story { padding: 4.5rem 1.5rem; }
  .product-story-body { font-size: 1.1rem; }
}

/* ============================================
   Stranica kuće / familije
   ============================================ */
.brand-hero {
  min-height: 62vh;
  display: flex;
  align-items: flex-end;
  background-color: var(--green-darkest);
  background-size: cover;
  background-position: center;
  padding: 10rem 2rem 4rem;
  color: var(--white-warm);
}
.brand-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}
.brand-hero .tag {
  display: block;
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--copper-light);
  margin-bottom: 0.8rem;
}
.brand-hero h1 {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 7vw, 5rem);
  font-weight: 300;
  line-height: 1.05;
  margin: 0 0 1.2rem;
  color: #fff;
}
.brand-hero-desc {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.75;
  max-width: 720px;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 1rem;
}
.brand-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.8rem;
  margin-top: 1.6rem;
  font-family: var(--sans);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
}
.brand-hero-meta strong { color: var(--copper-light); font-size: 1.1rem; }
.brand-hero-meta a { color: var(--copper-light); text-decoration: none; }
.brand-hero-meta a:hover { text-decoration: underline; }

.breadcrumb-light,
.breadcrumb-light a { color: rgba(255, 255, 255, 0.6); }
.breadcrumb-light a:hover { color: var(--copper-light); }
.breadcrumb-light { margin-bottom: 1.6rem; }

/* Zaglavlje sekcije */
.section-head {
  text-align: center;
  margin-bottom: 3.5rem;
}
.section-head .tag {
  display: block;
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 0.9rem;
}
.section-head h2 {
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 300;
  margin: 0;
  color: var(--text-dark);
}
.section-head h2 em { font-style: italic; color: var(--copper); }

.empty-note {
  text-align: center;
  font-family: var(--serif);
  font-size: 1.3rem;
  color: var(--text-soft);
  padding: 3rem 0;
}

.other-brands {
  background: var(--bg-alt);
  padding: 6rem 2rem;
}
.other-brands .container { max-width: 1200px; margin: 0 auto; }

/* Klikabilna vizuelna kartica kuće */
a.brand-card-visual { text-decoration: none; display: block; }
.brand-info h2 a { color: inherit; text-decoration: none; }
.brand-info h2 a:hover { color: var(--copper); }
.product-brand a { color: inherit; text-decoration: none; }
.product-brand a:hover { color: var(--copper); }

/* ============================================
   Pretraga
   ============================================ */
.search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 22, 16, 0.97);
  z-index: 9500;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s, visibility 0.35s;
  padding: 2rem;
}
.search-overlay.is-open { opacity: 1; visibility: visible; }
.search-overlay-close {
  position: absolute;
  top: 2rem;
  right: 2.5rem;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.65);
  font-size: 2.6rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.3s;
}
.search-overlay-close:hover { color: var(--copper-light); }
.search-overlay-form {
  width: 100%;
  max-width: 680px;
  text-align: center;
}
.search-overlay-form label {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 300;
  color: #fff;
  margin-bottom: 2rem;
}
.search-overlay-form label em { font-style: italic; color: var(--copper-light); }
.search-overlay-form input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  padding: 1rem 0;
  font-family: var(--serif);
  font-size: 1.5rem;
  color: #fff;
  text-align: center;
  outline: none;
  transition: border-color 0.3s;
}
.search-overlay-form input::placeholder { color: rgba(255, 255, 255, 0.35); }
.search-overlay-form input:focus { border-bottom-color: var(--copper); }
.search-overlay-form .btn { margin-top: 2rem; }
.search-overlay-hint {
  font-family: var(--sans);
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 1.5rem;
}

.search-page-form {
  display: flex;
  gap: 0.8rem;
  max-width: 620px;
  margin: 2rem auto 0;
}
.search-page-form input {
  flex: 1;
  padding: 0.9rem 1.2rem;
  border: 1px solid rgba(106, 95, 82, 0.3);
  background: var(--white-warm);
  font-family: var(--sans);
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.3s;
}
.search-page-form input:focus { border-color: var(--copper); }
.search-page-form button {
  padding: 0.9rem 1.8rem;
  background: var(--copper);
  color: #fff;
  border: none;
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s;
}
.search-page-form button:hover { background: var(--copper-deep); }
.search-hint {
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--text-soft);
  margin-top: 1.2rem;
}
.search-empty { text-align: center; padding: 3rem 0 5rem; }
.search-empty-title {
  font-family: var(--serif);
  font-size: 1.8rem;
  color: var(--text-dark);
  margin-bottom: 0.6rem;
}
.search-empty-text {
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--text-medium);
  margin-bottom: 2rem;
}

@media (max-width: 768px) {
  .brand-hero { padding: 8rem 1.5rem 3rem; min-height: 55vh; }
  .brand-hero-meta { gap: 1rem; flex-direction: column; }
  .other-brands { padding: 4rem 1.5rem; }
  .search-overlay-close { top: 1.2rem; right: 1.4rem; }
  .search-page-form { flex-direction: column; }
}

:root {
  /* Bakarna dovoljno tamna za sitan tekst — 5.3:1 na --white-warm */
  --copper-ink: #9A5730;
}

/* ============================================
   Mega meni — puna širina, kuće se same slažu u redove
   ============================================ */

/* Panel se prostire cijelom širinom nav trake */
.nav-menu .nav-has-sub { position: static; }

.nav-mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;                     /* iznad sadržaja nav trake, ispod pretrage */
  background: var(--white-warm);
  border-top: 1px solid rgba(211, 137, 98, 0.28);
  box-shadow: 0 28px 60px -24px rgba(20, 39, 30, 0.28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition:
    opacity 0.42s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.42s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0.42s;
}
.nav-has-sub:hover > .nav-mega,
.nav-has-sub:focus-within > .nav-mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Nevidljivi most — meni ne bježi dok miš prelazi razmak */
.nav-has-sub::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 18px;
}

/* Dok je meni otvoren nav dobija podlogu da logo i linkovi ostanu čitljivi */
.nav-fixed:has(.nav-has-sub:hover),
.nav-fixed:has(.nav-has-sub:focus-within) {
  background: rgba(248, 244, 237, 0.96);
  backdrop-filter: blur(20px);
}
.nav-fixed:has(.nav-has-sub:hover) .nav-menu a,
.nav-fixed:has(.nav-has-sub:hover) .nav-actions,
.nav-fixed:has(.nav-has-sub:focus-within) .nav-menu a,
.nav-fixed:has(.nav-has-sub:focus-within) .nav-actions {
  color: var(--text-dark);
  text-shadow: none;
}
.nav-fixed:has(.nav-has-sub:hover) .logo-light,
.nav-fixed:has(.nav-has-sub:focus-within) .logo-light { display: none; }
.nav-fixed:has(.nav-has-sub:hover) .logo-dark,
.nav-fixed:has(.nav-has-sub:focus-within) .logo-dark { display: block; }

/* Sadržaj panela */
.nav-mega-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(2rem, 3.4vw, 3.2rem) 2.5rem clamp(2.2rem, 3.6vw, 3.4rem);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: flex-start;
}
.nav-mega-col { flex: 0 0 auto; }
.nav-mega-brands { flex: 1 1 520px; min-width: 0; }

.nav-mega-title {
  display: block;
  font-family: var(--sans);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--copper-ink);          /* 4.6:1 na toploj bijeloj */
  padding-bottom: 0.85rem;
  margin-bottom: 1.15rem;
  border-bottom: 1px solid rgba(106, 95, 82, 0.16);
}

.nav-mega ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Vrste proizvoda — glavni put, veći serif */
.nav-mega-col:not(.nav-mega-brands) ul { min-width: 200px; }
.nav-mega-col:not(.nav-mega-brands) a { font-size: 1.18rem; }

/* Kuće — same se slažu u redove i kolone koliko treba */
.nav-mega-brands ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 0.15rem 1.75rem;
}

.nav-mega a {
  display: block;
  font-family: var(--serif);
  font-size: 1.02rem;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-dark);
  text-decoration: none;
  text-shadow: none;
  padding: 0.4rem 0;
  transition:
    color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-mega a:hover { color: var(--copper-ink); transform: translateX(6px); }

.nav-mega-all {
  display: inline-block !important;
  margin-top: 1.5rem;
  font-family: var(--sans) !important;
  font-size: 0.66rem !important;
  font-weight: 500;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--copper-ink) !important;
  border-bottom: 1px solid rgba(154, 87, 48, 0.5);
  padding-bottom: 0.25rem !important;
}
.nav-mega-all:hover { transform: none !important; border-bottom-color: var(--copper-ink); }

@media (prefers-reduced-motion: reduce) {
  .nav-mega { transition: opacity 0.15s linear, visibility 0.15s linear; transform: none; }
  .nav-has-sub:hover > .nav-mega,
  .nav-has-sub:focus-within > .nav-mega { transform: none; }
  .nav-mega a:hover { transform: none; }
}

@media (max-width: 968px) {
  .nav-mega { display: none; }
}

/* ============================================
   Mobilni meni — podmeniji koji se otvaraju
   Radi i bez JavaScripta (native <details>)
   ============================================ */
.mobile-menu .mobile-nav { gap: 0.15rem; }

/* Grupa sa podmenijem */
.m-group { border-bottom: 1px solid rgba(252, 250, 245, 0.08); }
.mobile-nav > li:last-child { border-bottom: none; }

.m-group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  list-style: none;
  cursor: pointer;
  padding: 0.35rem 0;
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--white-warm);
  transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  -webkit-tap-highlight-color: transparent;
}
.m-group > summary::-webkit-details-marker { display: none; }
.m-group > summary::marker { content: ''; }
.m-group > summary:hover,
.m-group > summary.active { color: var(--copper-light); }

.m-chev {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  color: var(--copper);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.m-group[open] > summary .m-chev { transform: rotate(180deg); }

/* Stavke podmenija */
.mobile-menu .m-sub {
  gap: 0;
  padding: 0.4rem 0 1.1rem 1.1rem;
  border-left: 1px solid rgba(211, 137, 98, 0.3);
  margin-left: 0.2rem;
}
.mobile-menu .m-sub a {
  font-size: 1.12rem;
  color: rgba(252, 250, 245, 0.74);
  padding: 0.55rem 0;
  letter-spacing: 0;
  /* Prst treba najmanje 44px visine da pogodi bez promasaja */
  min-height: 44px;
  display: flex;
  align-items: center;
}
.mobile-menu .m-sub a:hover,
.mobile-menu .m-sub a.active { color: var(--copper-light); transform: translateX(6px); }

.m-sub-all {
  font-family: var(--sans) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  color: var(--copper-light) !important;
  padding-top: 0.9rem !important;
}

/* Blago pojavljivanje stavki kad se grupa otvori */
.m-group[open] > .m-sub > li {
  animation: mSubIn 0.42s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.m-group[open] > .m-sub > li:nth-child(1) { animation-delay: 0.02s; }
.m-group[open] > .m-sub > li:nth-child(2) { animation-delay: 0.05s; }
.m-group[open] > .m-sub > li:nth-child(3) { animation-delay: 0.08s; }
.m-group[open] > .m-sub > li:nth-child(4) { animation-delay: 0.11s; }
.m-group[open] > .m-sub > li:nth-child(5) { animation-delay: 0.14s; }
.m-group[open] > .m-sub > li:nth-child(n+6) { animation-delay: 0.17s; }
@keyframes mSubIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Pretraga i korpa — odvojene, sitnije */
.mobile-menu-utility {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  margin-top: 2rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(252, 250, 245, 0.12);
}
.mobile-menu .mobile-menu-utility a {
  font-family: var(--sans);
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(252, 250, 245, 0.78);
  padding: 0;
}
.mobile-menu .mobile-menu-utility a:hover { color: var(--copper-light); transform: none; }

/* Duži meni mora imati mjesta za skrol na malim ekranima */
.mobile-menu { padding-bottom: 4rem; overscroll-behavior: contain; }

@media (prefers-reduced-motion: reduce) {
  .m-chev { transition: none; }
  .m-group[open] > .m-sub > li { animation: none; }
  .mobile-menu .m-sub a:hover { transform: none; }
}

/* ============================================
   Zaštita od razvlačenja stranice
   Dugačak neprelomljiv niz (link, šifra, e-mail) ne smije
   nikad da razvuče layout preko širine ekrana.
   ============================================ */
body { overflow-x: clip; }

/* Djeca grid/flex ćelija se po pravilu ne skupljaju ispod svog sadržaja */
.brand-row-detail > *,
.shop-grid > *,
.journal-grid > *,
.related-grid > *,
.families-grid > *,
.cart-layout > *,
.checkout-layout > *,
.contact-layout > *,
.about-story > *,
.visit-info > *,
.footer-grid > * { min-width: 0; }

/* Tekstualni blokovi lome i predugačke riječi */
.brand-info-meta,
.brand-info p,
.brand-hero-desc,
.perfume-desc,
.article-card-excerpt,
.product-story-body,
.cart-row-info,
.checkout-summary-item,
.footer-brand p,
.detail-value,
.pyramid-note { overflow-wrap: anywhere; }

.brand-info-meta a { color: var(--copper-deep); }

/* ============================================
   Telefon — sve što se dodiruje mora biti dovoljno veliko
   (najmanje 44px, preporuka za prst)
   ============================================ */
@media (max-width: 768px) {
  /* Putanja (Početna / Kolekcija / …) — bila je visoka 14px */
  .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 0.35rem;
    row-gap: 0.2rem;
  }
  .breadcrumb a,
  .breadcrumb span {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 0.1rem;
  }

  /* Izbor veličine pakovanja */
  .size-chip {
    min-height: 46px;
    padding-inline: 1.2rem;
  }

  /* Dugmad za dijeljenje */
  .share-btn {
    width: 46px;
    height: 46px;
  }

  /* Kvačica „slažem se sa politikom privatnosti" */
  .form-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    min-height: 44px;
    line-height: 1.5;
  }
  .form-checkbox input[type="checkbox"] {
    width: 22px;
    height: 22px;
    margin-top: 0.15rem;
    flex: 0 0 auto;
    accent-color: var(--copper);
  }

  /* Sličice u galeriji proizvoda */
  .product-gallery-thumbs .thumbnail {
    width: 66px;
    height: 82px;
  }

  /* Ukloni / Ažuriraj u korpi */
  .cart-qty-form button,
  .cart-remove-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .cart-qty-form input { min-height: 44px; }

  /* Filter dugmad */
  .filter-pill { min-height: 42px; }

  /* Vodeni žig u podnožju ne smije da viri preko ivice */
  .footer-watermark,
  .page-hero-watermark,
  .values-watermark { max-width: 100%; overflow: hidden; }
}

/* ============================================
   STRANICE (paginacija) + FILTER KAO LINKOVI
   Lista se više ne sipa cijela odjednom — ide u turama po 24.
   ============================================ */

.pager {
  margin-top: 4.5rem;
  padding-top: 2.75rem;
  border-top: 1px solid rgba(20, 39, 30, 0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

/* Dugme "Učitaj još" — tiho, u boji kuće */
.pager-more {
  font-family: var(--font-display, inherit);
  font-size: 0.94rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--copper-ink, #9A5730);
  background: transparent;
  border: 1px solid rgba(154, 87, 48, 0.4);
  border-radius: 2px;
  padding: 1.05rem 3.25rem;
  min-height: 52px;
  cursor: pointer;
  transition: background-color .5s cubic-bezier(.16,1,.3,1),
              color .5s cubic-bezier(.16,1,.3,1),
              border-color .5s cubic-bezier(.16,1,.3,1);
}
.pager-more:hover:not(:disabled) {
  background: var(--copper-ink, #9A5730);
  border-color: var(--copper-ink, #9A5730);
  color: #fff;
}
.pager-more:disabled { opacity: 0.55; cursor: default; }
.pager-more.is-done {
  border-color: transparent;
  color: rgba(20, 39, 30, 0.45);
  cursor: default;
  pointer-events: none;
}

.pager-count {
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(20, 39, 30, 0.55);
  margin: 0;
}

/* Numerisani niz — rezerva kad nema JavaScripta, i put za pretraživače */
.pager-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem 1rem;
}
.pager-nums { display: flex; align-items: center; gap: 0.15rem; }

.pager-num,
.pager-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.7rem;
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  color: rgba(20, 39, 30, 0.7);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .35s ease, border-color .35s ease;
}
.pager-num:hover,
.pager-step:hover { color: var(--copper-ink, #9A5730); border-bottom-color: currentColor; }

.pager-num.is-now {
  color: var(--forest, #14271e);
  border-bottom-color: var(--copper-ink, #9A5730);
  font-weight: 500;
}
.pager-gap { padding: 0 0.3rem; letter-spacing: 0.1em; }

/* Filter i redosljed — sada linkovi, ne dugmad */
.shop-filter { display: contents; }
.shop-filter.is-center {
  display: block;
  margin-bottom: 2.5rem;
}
.shop-filter.is-center .filter-pills { justify-content: center; }
.shop-filter.is-center .filter-secondary {
  justify-content: center;
  margin-top: 1.5rem;
}

a.filter-pill { text-decoration: none; }

.shop-sort {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 1.25rem;
}
.sort-opt {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(20, 39, 30, 0.55);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .35s ease, border-color .35s ease;
}
.sort-opt:hover { color: var(--copper-ink, #9A5730); }
.sort-opt.active {
  color: var(--forest, #14271e);
  border-bottom-color: var(--copper-ink, #9A5730);
}

/* Na tamnoj podlozi (stranica kuće, familije) */
.brand-hero .pager-num,
.brand-hero .pager-step { color: rgba(255, 255, 255, 0.7); }

@media (max-width: 768px) {
  .pager { margin-top: 3rem; padding-top: 2rem; gap: 1.25rem; }
  .pager-more { width: 100%; padding-inline: 1rem; }
  .pager-links { gap: 0.2rem 0.5rem; }
  .pager-step { font-size: 0.82rem; padding: 0 0.4rem; }
  .filter-secondary {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .shop-filter.is-center .filter-secondary { align-items: center; }
  .shop-sort { gap: 0 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .pager-more, .pager-num, .pager-step, .sort-opt { transition: none; }
}

/* ============================================
   Traka sa kućama na telefonu
   Bila je zamišljena kao vodoravna traka (nowrap + overflow-x:auto),
   ali kao flex-stavka sa podrazumijevanim min-width:auto naraste na
   punu širinu sadržaja (2125px) i razvuče cijelu stranicu umjesto da
   se skroluje unutar sebe. min-width:0 je ono što je nedostajalo.
   ============================================ */
.shop-filter-bar .filter-pills,
.filter-pills {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 768px) {
  .filter-pills {
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* Traka ide do same ivice ekrana — jasno se vidi da se nastavlja */
    margin-inline: calc(var(--pad, 1.5rem) * -1);
    padding-inline: var(--pad, 1.5rem);
    padding-block: 0.25rem;
  }
  .filter-pills::-webkit-scrollbar { display: none; }
  .filter-pills > .filter-pill {
    flex: 0 0 auto;
    scroll-snap-align: start;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Centrirana varijanta (difuzeri, svijeće…) — tu ih je malo, pa se lome u redove */
  .shop-filter.is-center .filter-pills {
    flex-wrap: wrap;
    overflow-x: visible;
    margin-inline: 0;
    padding-inline: 0;
  }
}

/* Vidljivo čitaču ekrana, nevidljivo oku — za labele koje bi kvarile izgled */
.vidljivo-citacu {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ============================================
   Čitljivost — mjereno, ne procijenjeno
   Tekst mora imati odnos svjetline najmanje 4.5:1 prema podlozi.
   ============================================ */

/* Brojač i sortiranje su bili 3.56:1 — presvijetli za sitan tekst */
.pager-count,
.sort-opt { color: rgba(20, 39, 30, 0.74); }   /* ~6.1:1 */

/* Ugašena strelica: i dalje očigledno neaktivna, ali se vidi */


/* Aktivna kuća: bijelo na svijetloj bakarnoj je bilo 2.68:1.
   Tamnija bakarna nosi isti ton, a tekst se čita (5.3:1). */
.filter-pill.active,
a.filter-pill.active {
  background: var(--copper-ink, #9A5730);
  border-color: var(--copper-ink, #9A5730);
  color: #fff;
}

/* ============================================
   Podnožje na telefonu — linkovi su bili visoki 18px
   ============================================ */
@media (max-width: 768px) {
  .footer-links a,
  .footer-col a,
  .footer-legal a,
  .footer-tel,
  .footer-email {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }
  .footer-social a { width: 44px; height: 44px; }

  /* Mrvice do punih 44px */
  .breadcrumb a,
  .breadcrumb span { min-height: 44px; }

  /* Kuća iznad naziva parfema je link, treba prst da ga pogodi */
  .perfume-detail-brand a,
  .product-brand-link { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ============================================
   Bakarna u dvije jačine
   Svijetla bakarna (#D38962) je lijepa na tamnom, ali na svijetloj
   podlozi daje 2.55:1 — ispod granice čitljivosti za sitan tekst.
   Tamnija (#9A5730) nosi isti ton i daje 5.3:1.
   Sekcije na tamnoj podlozi vraćaju svijetlu varijantu.
   ============================================ */
:root { --tag-ink: var(--copper-ink, #9A5730); }

/* Tamne sekcije -- popisane mjerenjem stvarnih podloga na svim stranicama,
   plus one koje pozadinu nose slikom. Ovdje se --tag-ink vraca na svijetlu
   bakarnu, jer bi tamna na tamnom bila necitljiva. */
.hero, .hero-bg, .shop-hero, .brand-hero, .family-hero, .article-hero,
.big-numbers, .brand-showcase, .journal-featured, .marquee-strip,
.product-bleed, .shop-bleed, .bleed-quote, .visit, .visit-cta, .visit-content,
.magazine, .mag-cell-quote,
.nav-mega, .nav-fixed:not(.solid), .family-card, .cookie-banner,
.search-overlay, .mobile-menu,
footer, .footer, .footer-newsletter {
  --tag-ink: var(--copper, #D38962);
  --text-soft: #9A8C7C;
}

.tag { color: var(--tag-ink); }

/* Naziv kuće iznad svakog parfema — uvijek na svijetloj podlozi */
.perfume-brand { color: var(--copper-ink, #9A5730); }

/* Dugme za prijavu na novosti: bijelo na svijetloj bakarnoj bilo je 2.68:1 */
.footer-newsletter-form button { background: var(--copper-ink, #9A5730); }

/* Sitni redovi na dnu podnožja bili su 3.7:1 na tamnozelenoj */
.footer-bottom-content,
.footer-bottom-content span,
.footer-bottom-links a { color: rgba(252, 250, 245, 0.62); }
.footer-bottom-links a:hover { color: var(--copper, #D38962); }

/* Ugašena strelica i tačkice u nizu stranica */
.pager-gap { color: rgba(20, 39, 30, 0.68); }

/* ============================================
   Bakarna kao boja teksta -- svuda kroz --tag-ink
   Generisano iz eden.css: svako pravilo koje je koristilo
   var(--copper) ili var(--copper-light) za boju teksta.
   Na svijetloj podlozi --tag-ink je tamna bakarna (5.3:1),
   unutar tamnih sekcija se sam vraca na svijetlu.
   ============================================ */
.nav-menu a:hover { color: var(--tag-ink); }
.nav-menu a.active { color: var(--tag-ink); }
.nav-lang .active { color: var(--tag-ink); }
.nav-icon-btn:hover { color: var(--tag-ink); }
.mobile-menu a:hover, .mobile-menu a.active { color: var(--tag-ink); }
.mobile-menu-footer a { color: var(--tag-ink); }
.hero-eyebrow { color: var(--tag-ink); }
.hero h1 em { color: var(--tag-ink); }
.marquee-item { color: var(--tag-ink); }
.marquee-item::after { color: var(--tag-ink); }
.manifesto-tag { color: var(--tag-ink); }
.manifesto h2 em { color: var(--tag-ink); }
.big-number-item .number { color: var(--tag-ink); }
.product-hero-slide .step { color: var(--tag-ink); }
.product-hero-slide h2 em { color: var(--tag-ink); }
.bleed-quote-mark { color: var(--tag-ink); }
.bleed-quote cite { color: var(--tag-ink); }
.brand-showcase-intro h2 em { color: var(--tag-ink); }
.brand-row-num { color: var(--tag-ink); }
.brand-row:hover .brand-row-name { color: var(--tag-ink); }
.horizontal-scroll-intro h2 em { color: var(--tag-ink); }
.h-scroll-card::before { color: var(--tag-ink); }
.h-scroll-card-brand { color: var(--tag-ink); }
.magazine-header .tag { color: var(--tag-ink); }
.magazine-header h2 em { color: var(--tag-ink); }
.mag-cell-content p { color: var(--tag-ink); }
.mag-cell-text .num { color: var(--tag-ink); }
.visit .tag { color: var(--tag-ink); }
.visit h2 em { color: var(--tag-ink); }
.visit-info-item h4 { color: var(--tag-ink); }
.visit-info-item a:hover { color: var(--tag-ink); }
.visit-cta { color: var(--tag-ink); }
.page-hero .tag { color: var(--tag-ink); }
.page-hero h1 em { color: var(--tag-ink); }
.shop-hero-tag { color: var(--tag-ink); }
.shop-hero h1 em { color: var(--tag-ink); }
.shop-hero-stat .num { color: var(--tag-ink); }
.shop-featured-content .tag { color: var(--tag-ink); }
.shop-featured-content .btn { color: var(--tag-ink); }
.families-header .tag { color: var(--tag-ink); }
.families-header h2 em { color: var(--tag-ink); }
.family-card-content .num { color: var(--tag-ink); }
.filter-pill:hover { color: var(--tag-ink); }
.perfume-brand { color: var(--tag-ink); }
.shop-bleed-content em { color: var(--tag-ink); }
.breadcrumb a:hover { color: var(--tag-ink); }
.breadcrumb span { color: var(--tag-ink); }
.product-info .product-brand { color: var(--tag-ink); }
.product-name em { color: var(--tag-ink); }
.size-selector h4 { color: var(--tag-ink); }
.size-chip { color: var(--tag-ink); }
.btn { color: var(--tag-ink); }
.product-bleed-text .tag { color: var(--tag-ink); }
.product-bleed-text h2 em { color: var(--tag-ink); }
.pyramid-level-info .pyramid-level-label { color: var(--tag-ink); }
.product-details-wrap > .tag { color: var(--tag-ink); }
.detail-label { color: var(--tag-ink); }
.related-header .tag { color: var(--tag-ink); }
.related-header h2 em { color: var(--tag-ink); }
.about-text p.highlight { color: var(--tag-ink); }
.values-section .section-header .tag { color: var(--tag-ink); }
.value-icon { color: var(--tag-ink); }
.brand-card-number { color: var(--tag-ink); }
.brand-card-country { color: var(--tag-ink); }
.brand-info .tag { color: var(--tag-ink); }
.brand-info-meta strong { color: var(--tag-ink); }
.contact-info-block h4 { color: var(--tag-ink); }
.form-group label { color: var(--tag-ink); }
.footer-newsletter-text .tag { color: var(--tag-ink); }
.footer-newsletter-text h2 em { color: var(--tag-ink); }
.footer-newsletter-form .success { color: var(--tag-ink); }
.footer-social a { color: var(--tag-ink); }
.footer-col h4 { color: var(--tag-ink); }
.footer-col a:hover { color: var(--tag-ink); }
.footer-contact-col .footer-hours { color: var(--tag-ink); }
.footer-contact-col .footer-tel:hover, .footer-contact-col .footer-email:hover { color: var(--tag-ink); }
.footer-bottom-links a:hover { color: var(--tag-ink); }
.journal-featured-content .tag { color: var(--tag-ink); }
.journal-featured-content .btn { color: var(--tag-ink); }
.journal-section-header .tag { color: var(--tag-ink); }
.journal-section-header h2 em { color: var(--tag-ink); }
.article-card:hover .article-card-title { color: var(--tag-ink); }
.article-card-link { color: var(--tag-ink); }
.category-pill span { color: var(--tag-ink); }
.category-pill:hover { color: var(--tag-ink); }

/* Bakarne povrsine PREKO KOJIH STOJI TEKST.
   Bijelo na #D38962 je 2.68:1; tamnija bakarna daje 5.3:1.
   Ukrasne bakarne povrsine (kursor, crtice, strelice) ostaju svijetle. */
.filter-pill.active { background: var(--copper-ink, #9A5730); border-color: var(--copper-ink, #9A5730); }
.size-chip.active, .size-chip:hover { background: var(--copper-ink, #9A5730); border-color: var(--copper-ink, #9A5730); }
.btn-primary { background: var(--copper-ink, #9A5730); border-color: var(--copper-ink, #9A5730); }
.btn::before { background: var(--copper-ink, #9A5730); border-color: var(--copper-ink, #9A5730); }
.shop-featured-content .btn::before { background: var(--copper-ink, #9A5730); border-color: var(--copper-ink, #9A5730); }
.journal-featured-content .btn::before { background: var(--copper-ink, #9A5730); border-color: var(--copper-ink, #9A5730); }
.footer-newsletter-form button { background: var(--copper-ink, #9A5730); border-color: var(--copper-ink, #9A5730); }
.article-category { background: var(--copper-ink, #9A5730); border-color: var(--copper-ink, #9A5730); }
.mag-cell-quote { background: var(--copper-ink, #9A5730); border-color: var(--copper-ink, #9A5730); }

/* ============================================
   Posljednji krug — nađeno mjerenjem po svim stranicama
   ============================================ */

/* Prigušeni tekst #9A8C7C daje 2.99:1 na svijetloj podlozi.
   Malo tamniji nosi isti ton i prelazi granicu (4.6:1).
   U tamnim sekcijama se gore vraća na stariju, svjetliju vrijednost. */
:root { --text-soft: #756A5C; }

/* Dugme u punoj boji: tekst mora biti svijetao, bez obzira na sekciju.
   Bez ovoga je unutar tamnih sekcija ispadala bakarna na bakarnoj. */
.btn-primary,
.btn-primary:hover,
.footer-newsletter-form button { color: var(--white-warm, #FCFAF5); }

/* "Ostale kuće" na stranici jedne kuće: naziv je bio krem na svijetloj
   podlozi — 1.12:1, praktično nevidljiv. Stil je pisan za tamnu sekciju
   na početnoj i preuzet ovdje bez izmjene. */
.other-brands .brand-row-name { color: var(--forest, #14271e); }
.other-brands .brand-row:hover .brand-row-name { color: var(--copper-ink, #9A5730); }
.other-brands .brand-row-num,
.other-brands .brand-row-meta { color: var(--text-medium, #6B5F52); }

/* Link ka sajtu kuće bio je 3.55:1 */
.brand-info-meta a { color: var(--tag-ink); }

/* Naslovi sa bakarnom kurzivnom riječi i oznake sekcija koje sam ranije
   dodao — i one idu kroz --tag-ink */
.section-head .tag,
.section-head h2 em,
.product-story .tag,
.product-story-inner h2 em,
.families-header h2 em,
.related-header h2 em { color: var(--tag-ink); }

/* Posljednje dvije bakarne površine sa tekstom — pretraga i traka o kolačićima */
.search-page-form button,
.cookie-btn.cookie-btn-accept {
  background: var(--copper-ink, #9A5730);
  border-color: var(--copper-ink, #9A5730);
  color: var(--white-warm, #FCFAF5);
}

/* Ostatak sitnih meta na telefonu — pravi naziv klase je footer-bottom-links */
@media (max-width: 768px) {
  .footer-bottom-links a,
  .footer-bottom-content a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .footer-bottom-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 1.25rem;
  }
  .footer-links a, .footer-col a, .footer-tel, .footer-email,
  .footer-logo-link, .sort-opt { min-height: 44px; }
}

/* Dno mobilnog menija — Pretraga, Korpa, e-adresa i izbor jezika
   bili su visoki 20-23px; CG i EN su se dodirivali. */
.mobile-menu-utility a,
.mobile-menu-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.mobile-menu-footer p:last-child {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.mobile-menu-footer p:last-child a {
  justify-content: center;
  min-width: 44px;
  padding-inline: 0.5rem;
}

/* ============================================
   Preostali sitni linkovi na telefonu — pogođeni po namjeni,
   ne po klasi, da se ne provuče nešto po strani.
   ============================================ */
@media (max-width: 768px) {
  a[href^="tel:"],
  a[href^="mailto:"],
  .brand-info h2 a,
  .brand-info-meta a,
  .brand-hero-meta a,
  .product-brand a,
  .perfume-brand a,
  .article-meta a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Naziv kuće je veliki naslov — dovoljno je da red bude visok,
     ne treba mu dodatni prazan prostor ispod */
  .brand-info h2 { line-height: 1.15; }
  .brand-info h2 a { min-height: 44px; }
}

/* ============================================
   "Plodovi našeg vrta" — praznina ispod kartica
   Sekcija je imala overflow:hidden, a to ukida position:sticky
   na traci sa karticama. Zato se kartice nikad nisu zakačile,
   pa je staza za vodoravno klizanje (655px) ostajala prazna
   između kartica i "Priče iz vrta".
   overflow:clip odsijeca isto, ali ne pravi novi okvir za
   skrolovanje — sticky opet radi.
   ============================================ */
.horizontal-scroll {
  overflow-x: clip;
  overflow-y: visible;
}

/* Na telefonu kartice "Plodova našeg vrta" idu kao obična traka
   koja se prevlači prstom — bez pričvršćivanja i bez duge prazne staze. */
@media (max-width: 768px) {
  .horizontal-scroll-track { height: auto !important; }
  .horizontal-scroll-sticky {
    position: static;
    height: auto;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .horizontal-scroll-sticky::-webkit-scrollbar { display: none; }
  .horizontal-scroll-row {
    transform: none !important;
    padding-block: 2rem;
  }
  .horizontal-scroll-row > .h-scroll-card { scroll-snap-align: center; }
}

/* Podatak koji se ne smije prelomiti nasred — npr. "12:00 — 21:00" */
.ne-lomi { white-space: nowrap; }

/* Podaci o posjeti ("U srcu Portonovija") na telefonu:
   dvije kolone od 144px su preuske — adresa i radno vrijeme se lome
   u tri reda. U jednoj koloni svaki podatak staje kako je zamišljen. */
@media (max-width: 640px) {
  .visit-info {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
}


/* ============================================
   PRAVI KURZOR SE MORA VIDJETI

   Sajt je krio sistemski kurzor (cursor:none) i umjesto njega crtao
   prsten koji je NAMJERNO kasnio za misem. Nad fotografijom taj prsten
   koristi mix-blend-mode:difference pa se, zavisno od boja slike, izgubi
   — posjetilac tada ne vidi gdje pokazuje. Otuda "bjezi mis".

   Ukrasni kurzor je uklonjen; posao radi sistemski.
   Popis ispod je izvucen iz eden.css, da nijedno mjesto ne ostane skriveno.
   ============================================ */

/* Ukrasni krug ostaje kao ukras — sada stoji tacno na misu, ne kasni.
   Tacka je uklonjena: uz vidljiv pravi kurzor bila bi suvisna. */
.custom-cursor-dot { display: none !important; }

.custom-cursor {
  /* Uvijek vidljiv. Dok se mis ne pomjeri, JavaScript ga drzi van ekrana —
     vidljivost ne smije zavisiti od prelaza, jer se oni u pozadinskoj
     kartici pauziraju, a krug je sada jedini pokazivac. */
  opacity: 1;
  transition: width .25s, height .25s, background .25s;
}

/* Preko fotografija je mix-blend-mode znao da ga proguta; blagi obris
   ga drzi vidljivim na svakoj podlozi. */
.custom-cursor {
  /* Manji nego prije: 24px -> 18px, a nad klikabilnim 56px -> 40px */
  width: 18px;
  height: 18px;
  /* Bez stapanja sa podlogom. Ranije je mix-blend-mode:difference umio da
     proguta krug nad fotografijom — a sada je on jedini pokazivac, pa se
     mora vidjeti na svakoj podlozi: tamni obrub spolja, svijetli iznutra. */
  mix-blend-mode: normal;
  border-color: var(--copper, #D38962);
  box-shadow:
    0 0 0 1px rgba(20, 39, 30, 0.45),
    inset 0 0 0 1px rgba(252, 250, 245, 0.55);
}
.custom-cursor.is-hover {
  width: 40px;
  height: 40px;
}

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

body { cursor: auto !important; }
button { cursor: pointer !important; }
.nav-logo { cursor: pointer !important; }
.nav-icon-btn { cursor: pointer !important; }
.mobile-menu a { cursor: pointer !important; }
.brand-row { cursor: pointer !important; }
.h-scroll-card { cursor: pointer !important; }
.visit-cta { cursor: pointer !important; }
.family-card { cursor: pointer !important; }
.filter-pill { cursor: pointer !important; }
.shop-sort { cursor: auto !important; }
.size-chip { cursor: pointer !important; }
.btn { cursor: pointer !important; }
.thumbnail { cursor: pointer !important; }
.form-checkbox { cursor: pointer !important; }
.footer-newsletter-form button { cursor: pointer !important; }
.footer-social a { cursor: pointer !important; }
.footer-col a { cursor: pointer !important; }
.footer-contact-col .footer-tel, .footer-contact-col .footer-email { cursor: pointer !important; }
.footer-bottom-links a { cursor: pointer !important; }
.article-card { cursor: pointer !important; }
.category-pill { cursor: pointer !important; }

/* Polja za unos i tekst */
input, textarea { cursor: auto !important; }
select, input[type="checkbox"], input[type="radio"] { cursor: pointer !important; }
a, summary, [data-hover] { cursor: pointer !important; }

/* ============================================
   Uvećavanje slike proizvoda
   Glavna slika se nije mogla otvoriti — nije bila ni klikabilna.
   ============================================ */
.product-main-image-wrap,
#product-main-image { cursor: zoom-in; }

.uvecana-slika {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(10, 22, 16, 0.94);
  padding: 2rem;
  cursor: zoom-out;
}
.uvecana-slika.otvorena { display: flex; }
.uvecana-slika img {
  max-width: min(92vw, 1100px);
  max-height: 88vh;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.uvecana-zatvori,
.uvecana-prev,
.uvecana-next {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(252, 250, 245, 0.35);
  border-radius: 50%;
  background: transparent;
  color: var(--white-warm, #FCFAF5);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color .3s ease, border-color .3s ease;
}
.uvecana-zatvori:hover,
.uvecana-prev:hover,
.uvecana-next:hover { background: rgba(252, 250, 245, 0.12); border-color: rgba(252, 250, 245, 0.7); }
.uvecana-zatvori { top: 1.5rem; right: 1.5rem; }
.uvecana-prev { left: 1.5rem; top: 50%; transform: translateY(-50%); }
.uvecana-next { right: 1.5rem; top: 50%; transform: translateY(-50%); }
.uvecana-broj {
  position: absolute;
  bottom: 1.75rem;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(252, 250, 245, 0.7);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
}

@media (max-width: 768px) {
  .uvecana-slika { padding: 1rem; }
  .uvecana-prev { left: 0.5rem; }
  .uvecana-next { right: 0.5rem; }
  .uvecana-zatvori { top: 0.75rem; right: 0.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .uvecana-zatvori, .uvecana-prev, .uvecana-next { transition: none; }
}


/* ============================================
   Sistemski kurzor se krije SAMO kad krug stvarno radi
   Oznaku .ima-krug postavlja JavaScript tek kad je krug na strani.
   Ako JavaScript ne prode, kurzor ostaje vidljiv — nikad se ne desi
   da posjetilac nema nikakav pokazivac.
   ============================================ */
.ima-krug body,
.ima-krug a,
.ima-krug button,
.ima-krug summary,
.ima-krug label,
.ima-krug [data-hover],
.ima-krug .perfume-card,
.ima-krug .brand-row,
.ima-krug .h-scroll-card,
.ima-krug .family-card,
.ima-krug .article-card,
.ima-krug .thumbnail,
.ima-krug .size-chip,
.ima-krug .filter-pill,
.ima-krug .sort-opt,
.ima-krug .btn,
.ima-krug .visit-cta,
.ima-krug .category-pill,
.ima-krug .nav-logo,
.ima-krug .nav-icon-btn,
.ima-krug #product-main-image,
.ima-krug select,
.ima-krug input[type="checkbox"],
.ima-krug input[type="radio"] { cursor: none !important; }

/* Polja u koja se kuca zadrzavaju svoj pokazivac — bez njega se ne vidi
   gdje ce tekst poceti. */
.ima-krug input:not([type="checkbox"]):not([type="radio"]),
.ima-krug textarea { cursor: text !important; }

/* ============================================
   SLIKA PROIZVODA SE VIŠE NE SIJEČE

   Okvir je bio fiksiran na odnos 4:5 uz object-fit: cover — sve što ne
   stane u taj odnos se odsijecalo. A slike dolaze u svim oblicima:
   od 60 provjerenih, 29 je kvadratnih, ostale od 0.56 (visoke) do 1.78
   (široke). Dakle skoro svaka se negdje kidala.

   Sada slika uvijek stane cijela, a oko nje ostaje mirna podloga.
   ============================================ */
.product-split-image {
  background: var(--white-warm, #FCFAF5);
  padding: 1.75rem;
}
.product-split-image img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

/* Sličice pokazuju istu stvar kao velika slika — cijelu, ne isječak */
.thumbnail {
  background: var(--white-warm, #FCFAF5);
  padding: 4px;
}

@media (max-width: 768px) {
  .product-split-image { padding: 1rem; }
}

/* ============================================
   SLIČICE SE VIŠE NE SIJEKU NA TELEFONU

   Lijeva kolona je na telefonu bila zaključana na 60vh (na ekranu od
   812px to je 487px), a galerija sa slikom i sličicama traži 512px.
   Uz overflow:hidden dno sličica je jednostavno odsjecano.
   Sada visina prati sadržaj.
   ============================================ */
@media (max-width: 968px) {
  .product-split-left {
    height: auto;
    min-height: 0;
    overflow: visible;
    padding-block: 2rem 1rem;
  }
}

/* Na niskom prozoru (npr. laptop 1366×768) galerija se skupi umjesto da
   je kolona odsiječe — slika smanji, sličice ostanu vidljive. */
.product-split-left { min-height: 0; }
.product-gallery { max-height: 100%; min-height: 0; }
.product-split-image { max-height: 100%; min-height: 0; }

/* ============================================
   SLIKE SAJTA IZ ADMINA
   Slika iz Podešavanja dolazi kao --slika na samom elementu.
   Ako nije postavljena, ostaje slika iz prvobitnog dizajna.
   ============================================ */
.hero-bg {
  background-image: var(--slika, url('images/interior/interior-1.jpeg'));
}
.bleed-quote {
  background-image:
    linear-gradient(rgba(20, 39, 30, 0.65), rgba(20, 39, 30, 0.45)),
    var(--slika, url('images/interior/interior-5.jpeg'));
}
.shop-hero-bg {
  background-image: var(--slika, url('images/interior/interior-3.jpeg'));
}
.shop-bleed {
  background-image:
    linear-gradient(rgba(20, 39, 30, 0.7), rgba(20, 39, 30, 0.5)),
    var(--slika, url('images/interior/interior-4.jpeg'));
}

/* ============================================
   O NAMA — dvije slike prostora uz priču
   Druga je spuštena naniže, kao par stranica u časopisu.
   Slike se ne sijeku — prikazuju se u svom obliku.
   ============================================ */
.about-slike {
  position: sticky;
  top: 110px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: start;
}
.about-slike.ima-dvije { grid-template-columns: 1.12fr 1fr; }
.about-slika {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 24px 48px rgba(20, 39, 30, 0.14);
}
.about-slike.ima-dvije .about-slika:nth-child(2) { margin-top: 5rem; }

/* Kad su dvije slike, one dobijaju širu kolonu — tekst je kratak i ne treba mu pola ekrana */
@media (min-width: 969px) {
  .about-story:has(.about-slike.ima-dvije) { grid-template-columns: 1fr 1.25fr; gap: 4.5rem; }
}

@media (max-width: 968px) {
  .about-slike { position: relative; top: 0; }
}
@media (max-width: 640px) {
  .about-slike { gap: 0.75rem; }
  .about-slike.ima-dvije .about-slika:nth-child(2) { margin-top: 2.5rem; }
}

/* ============================================
   TIM — ljudi iz radnje, uvijek jedno pored drugog
   ============================================ */
.tim-section {
  padding: 7rem 0 7.5rem;
  background: var(--white-warm, #FCFAF5);
}
.tim-section .section-head { text-align: center; }
.tim-mreza {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3rem;
  max-width: 780px;
  margin: 3.5rem auto 0;
}
.tim-clan { margin: 0; text-align: center; }
.tim-foto {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--bg, #F8F4ED);
}
.tim-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}
.tim-ime {
  display: block;
  margin-top: 1.4rem;
  font-family: var(--serif, 'Cormorant Garamond', serif);
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1.15;
  color: var(--forest, #14271e);
}
.tim-pozicija {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--copper-ink, #9A5730);
}
@media (max-width: 640px) {
  .tim-section { padding: 5rem 0; }
  .tim-mreza { gap: 1rem; margin-top: 2.5rem; }
  .tim-ime { font-size: 1.15rem; margin-top: 0.85rem; }
  .tim-pozicija { font-size: 0.66rem; letter-spacing: 0.1em; }
}

/* ============================================
   GALERIJA PROSTORA
   Mreža "zidarskog" tipa — svaka slika zadržava svoj oblik,
   ništa se ne siječe. Klik otvara uvećanje preko cijelog ekrana.
   ============================================ */
.galerija-section { padding: 7rem 0 8rem; }
.galerija-section .section-head { text-align: center; }
.galerija-uvod {
  max-width: 52ch;
  margin: 1.1rem auto 0;
  color: var(--text-medium, #6B5F52);
}
/* Redovi od ivice do ivice: svaka stavka raste srazmjerno svom obliku (--r),
   pa su sve slike u redu iste visine, a nijedna se ne siječe.
   --red je ciljana visina reda; stvarna je malo veća jer red popuni širinu.
   Zadata je u dijelu širine ekrana, pa isti broj slika staje u red na svakom
   monitoru (desktop 6, tablet 5, telefon 3). */
.galerija-mreza {
  --red: 15vw;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 3.5rem;
  padding: 0 6px;
}
/* Poslednji red se ne razvlači preko cijelog ekrana — slike ostaju svoje veličine */
.galerija-mreza::after {
  content: '';
  flex-grow: 999999;
}
.galerija-stavka {
  position: relative;
  display: block;
  flex-grow: var(--r, 1.5);
  flex-basis: calc(var(--red) * var(--r, 1.5));
  aspect-ratio: var(--r, 1.5);
  overflow: hidden;
  background: var(--bg, #F8F4ED);
  cursor: zoom-in;
}
.galerija-stavka img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 1024px) { .galerija-mreza { --red: 17vw; } }
@media (max-width: 768px)  { .galerija-mreza { gap: 4px; padding: 0 4px; } }
@media (max-width: 480px)  { .galerija-mreza { --red: 30vw; } }
.galerija-stavka::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(20, 39, 30, 0);
  transition: background-color 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.galerija-stavka:hover::after { background: rgba(20, 39, 30, 0.14); }
.galerija-stavka:focus-visible {
  outline: 2px solid var(--copper-ink, #9A5730);
  outline-offset: 3px;
}
@media (max-width: 640px) {
  .galerija-section { padding: 5rem 0 6rem; }
  .galerija-mreza { margin-top: 2.5rem; }
}

/* Opis ispod uvećane slike */
.uvecana-opis {
  position: absolute;
  left: 50%;
  bottom: 3.6rem;
  transform: translateX(-50%);
  max-width: min(80vw, 640px);
  text-align: center;
  font-family: var(--serif, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 1.15rem;
  color: rgba(252, 250, 245, 0.88);
}
.uvecana-slika img { transition: opacity 0.25s ease; }

@media (prefers-reduced-motion: reduce) {
  .galerija-stavka::after,
  .uvecana-slika img { transition: none; }
}

/* Dugmad u uvećanju imaju display:inline-flex, pa bi atribut hidden bio
   nadjačan — ovo ga vraća (npr. strelice kad je samo jedna slika). */
.uvecana-slika [hidden] { display: none !important; }

/* ============================================
   KONTAKT — zaglavlje sa slikom parfimerije, tekst preko nje
   Slika dolazi iz admina (--slika); bez nje ostaje obično svijetlo zaglavlje.
   ============================================ */
.page-hero.kontakt-hero {
  display: flex;
  align-items: center;
  min-height: clamp(440px, 72vh, 760px);
  padding: 9rem 0 5rem;
  background: #14271e var(--slika) center 22% / cover no-repeat;
}
.page-hero.kontakt-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 60% 55% at center, rgba(10, 22, 16, 0.5) 0%, rgba(10, 22, 16, 0) 100%),
    linear-gradient(180deg, rgba(10, 22, 16, 0.15) 0%, rgba(10, 22, 16, 0.4) 100%);
}
.page-hero.kontakt-hero > .container { width: 100%; }
.page-hero.kontakt-hero .tag { color: #E6BE96; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5); }
.page-hero.kontakt-hero h1 { color: #FCFAF5; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35); }
.page-hero.kontakt-hero > .container > p { color: rgba(252, 250, 245, 0.92); text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5); }
.page-hero.kontakt-hero .page-hero-divider { background: #E6BE96; }
@media (max-width: 640px) {
  .page-hero.kontakt-hero {
    min-height: clamp(380px, 62vh, 560px);
    padding: 7.5rem 0 3.5rem;
  }
}

/* ============================================
   RADNO VRIJEME — dani, pa sati ispod; grupe odvojene razmakom
   (početna, kontakt, podnožje)
   ============================================ */
.rv-grupa,
.rv-red { display: block; }
.rv-grupa + .rv-grupa { margin-top: 0.85em; }

/* ============================================
   PODNOŽJE — telefon i mail ispod teksta o EDEN-u
   ============================================ */
.footer-kontakt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  margin: -0.75rem 0 1.5rem;
}
.footer-kontakt-stavka {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 40px;
  font-family: var(--serif);
  font-size: 1rem;
  color: rgba(252, 250, 245, 0.78);
  transition: color 0.3s;
}
.footer-kontakt-stavka svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--copper, #D38962);
}
.footer-kontakt-stavka:hover { color: var(--copper-light, #E6BE96); }
.footer-kontakt-stavka:focus-visible { outline: 2px solid var(--copper, #D38962); outline-offset: 4px; }
@media (max-width: 540px) {
  .footer-kontakt-stavka { min-height: 44px; }
}

/* Sidro galerije na O nama — da naslov ne završi ispod menija */
#galerija { scroll-margin-top: 90px; }

/* ============================================
   ČISTE SLIKE U POSTOJEĆIM DIJELOVIMA
   Cijela slika, bez zatamnjenja i bez teksta preko nje.
   ============================================ */
.cista-slika { margin: 0; }
.cista-slika img {
  display: block;
  width: 100%;
  height: auto;
}

/* Početna — ispod teksta o EDEN-u */
.cista-manifest { max-width: 960px; margin: 4.5rem auto 0; }

/* O nama — između naslova i kartica vrijednosti */
.cista-vrijednosti {
  position: relative;
  z-index: 2;
  max-width: 1000px;
  margin: 0 auto 5rem;
  padding: 0 2rem;
}

@media (max-width: 640px) {
  .cista-manifest { margin-top: 3rem; }
  .cista-vrijednosti { margin-bottom: 3rem; padding: 0 1.25rem; }
}

/* ============================================
   KONTAKT — traka slika prostora ispod forme
   Slike jedna do druge od ivice do ivice, u svom obliku (ništa se ne siječe).
   Niz je dupliran pa se pomjera za tačno pola — kraj se nastavlja na početak bez skoka.
   ============================================ */
.contact-section:has(+ .traka-prostora) { padding-bottom: 5rem; }
.traka-prostora {
  --visina: clamp(210px, 26vw, 360px);
  background: var(--bg, #F8F4ED);
}
.traka-okvir {
  width: 100%;
  overflow: hidden;
}
.traka-niz {
  display: flex;
  width: max-content;
  animation: traka-kreni var(--trajanje, 100s) linear infinite;
  will-change: transform;
}
/* Zastane dok je miš na traci ili dok je fokus u njoj */
.traka-okvir:hover .traka-niz,
.traka-okvir:focus-within .traka-niz { animation-play-state: paused; }
.traka-stavka {
  position: relative;
  flex: none;
  display: block;
  margin-right: 8px;
  background: var(--bg-alt, #EFE8DC);
  cursor: zoom-in;
}
.traka-stavka img {
  display: block;
  height: var(--visina);
  width: auto;
}
.traka-stavka::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(20, 39, 30, 0);
  transition: background-color 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.traka-stavka:hover::after { background: rgba(20, 39, 30, 0.12); }
.traka-stavka:focus-visible { outline: 2px solid var(--copper-ink, #9A5730); outline-offset: -2px; }
@keyframes traka-kreni {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (max-width: 640px) {
  .traka-stavka { margin-right: 5px; }
}
/* Bez pokreta ako je korisnik tako podesio — traka se tada lista prstom/mišem */
@media (prefers-reduced-motion: reduce) {
  .traka-niz { animation: none; }
  .traka-okvir { overflow-x: auto; }
  .traka-stavka[data-kopija] { display: none; }
}