:root {
  --bg: #e9e4db;
  --bg-deep: #17110e;
  --surface: #f2ece3;
  --surface-soft: rgba(242, 236, 227, 0.84);
  --line: rgba(48, 37, 31, 0.16);
  --line-strong: rgba(32, 22, 18, 0.32);
  --line-light: rgba(255, 255, 255, 0.14);
  --text: #1f1714;
  --text-soft: #5a4a42;
  --cream: #f4ede2;
  --accent: #6d1822;
  --accent-deep: #421117;
  --gold: #b69463;
  --shadow: 0 22px 56px rgba(23, 17, 14, 0.08);
  --radius-xl: 0px;
  --radius-lg: 0px;
  --radius-md: 0px;
  --container: min(1220px, calc(100vw - 48px));
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  font-family: "Manrope", sans-serif;
  color: var(--text);
  background:
    linear-gradient(180deg, #ece6dd 0%, #e5dfd5 42%, #ece7de 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(31, 23, 20, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31, 23, 20, 0.05) 1px, transparent 1px),
    radial-gradient(circle at top left, rgba(182, 148, 99, 0.08), transparent 28%);
  background-size: 56px 56px, 56px 56px, auto;
  opacity: 0.8;
}

/* Skip link */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 9999;
  padding: 12px 20px;
  background: var(--bg-deep);
  color: var(--cream);
  font-size: 0.9rem;
  font-weight: 700;
  border: 2px solid var(--gold);
  text-decoration: none;
  transition: top 0ms;
}

.skip-link:focus {
  top: 16px;
}

/* Focus rings */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

a {
  color: inherit;
  text-decoration: none;
}

.site-shell {
  width: var(--container);
  margin: 0 auto;
  padding-bottom: 0;
}

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  width: 100%;
  padding: 20px 0 0;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    background 220ms ease,
    backdrop-filter 220ms ease,
    border-color 220ms ease,
    padding 220ms ease;
}

.topbar.is-scrolled {
  padding-top: 0;
  background: rgba(19, 13, 11, 0.42);
  backdrop-filter: blur(12px);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.topbar-inner {
  width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  min-height: 84px;
}

.brand {
  display: flex;
  align-items: center;
  color: var(--cream);
  justify-self: start;
}

.brand-logo {
  display: block;
  width: auto;
  height: 52px;
}

.nav {
  display: flex;
  gap: 28px;
  font-size: 0.95rem;
  color: rgba(246, 239, 228, 0.82);
  justify-self: center;
}

.nav a {
  position: relative;
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms ease;
}

.nav a:hover::after,
.nav a:focus-visible::after {
  transform: scaleX(1);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 14px 24px;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  font-size: 0.94rem;
  font-weight: 700;
  color: #fff8f0;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-deep) 100%);
  cursor: pointer;
  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    background 220ms ease,
    border-color 220ms ease;
}

.button:hover,
.button:focus-visible {
  transform: translateY(-1px);
  box-shadow: 8px 8px 0 rgba(23, 17, 14, 0.12);
}

.button-secondary,
.button-ghost {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.22);
  color: #fff8f0;
  box-shadow: none;
}

.product-pdf-button {
  color: var(--text);
  background: rgba(242, 236, 227, 0.96);
  border-color: var(--line-strong);
  box-shadow: none;
}

.button-soft-accent {
  color: var(--text-soft);
  background: rgba(31, 23, 20, 0.04);
  border-color: rgba(48, 37, 31, 0.22);
  box-shadow: none;
}

.button-soft-accent:hover,
.button-soft-accent:focus-visible {
  color: var(--accent);
  background: rgba(109, 24, 34, 0.1);
  border-color: rgba(109, 24, 34, 0.34);
  box-shadow: 8px 8px 0 rgba(23, 17, 14, 0.12);
}

.button-ghost {
  justify-self: end;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-self: end;
}

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  min-width: 52px;
  height: 52px;
  border-color: var(--line-strong);
  background: rgba(242, 236, 227, 0.96);
  color: var(--text);
  font-size: 1rem;
  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    background 220ms ease,
    border-color 220ms ease;
}

.icon-button-accent {
  background: rgba(31, 23, 20, 0.04);
  border-color: rgba(48, 37, 31, 0.22);
  color: var(--text-soft);
}

.icon-button:hover,
.icon-button:focus-visible {
  transform: translateY(-1px);
  box-shadow: 8px 8px 0 rgba(23, 17, 14, 0.12);
}

.icon-button-accent:hover,
.icon-button-accent:focus-visible {
  background: rgba(109, 24, 34, 0.1);
  border-color: rgba(109, 24, 34, 0.34);
  color: var(--accent);
}

.topbar .button-ghost {
  min-width: 148px;
  background: rgba(109, 24, 34, 0.92);
  border-color: rgba(255, 255, 255, 0.16);
  color: #fff8f0;
  box-shadow: none;
}

.topbar .button-ghost:hover,
.topbar .button-ghost:focus-visible {
  box-shadow: 12px 12px 0 rgba(23, 17, 14, 0.24);
}

.hero {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-content: end;
  width: auto;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  min-height: 100vh;
  padding:
    152px
    max(24px, calc((100vw - min(1220px, calc(100vw - 48px))) / 2))
    44px;
  overflow: hidden;
  border-radius: 0;
}

.hero-overlay {
  position: absolute;
  inset: 0;
}

/* The hero backdrop is an <img g-img> with the 'hero' preset, which
   the engine wraps in <picture> + LQIP. Both the bare <img>,
   <picture>-only, and lqip-wrap forms must position absolute fill
   the hero section behind the gradient overlay. */
.hero > .hero-backdrop,
.hero > .lqip-wrap.hero-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
}

.hero > picture.hero-backdrop,
.hero > .lqip-wrap > picture {
  position: absolute;
  inset: 0;
  display: block;
}

.hero > img.hero-backdrop,
.hero > picture.hero-backdrop > img,
.hero > .lqip-wrap > picture > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-overlay {
  background:
    linear-gradient(90deg, rgba(11, 8, 6, 0.78) 0%, rgba(11, 8, 6, 0.42) 42%, rgba(11, 8, 6, 0.28) 100%),
    linear-gradient(180deg, rgba(9, 6, 5, 0.12) 0%, rgba(9, 6, 5, 0.28) 40%, rgba(9, 6, 5, 0.8) 100%);
  z-index: 1;
}

.hero > .hero-content,
.hero > .hero-rail {
  z-index: 2;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: calc(100% / 12) 100%, calc(100% / 12) 100%;
  opacity: 0.32;
  pointer-events: none;
}

.hero-content,
.hero-rail {
  position: relative;
  z-index: 1;
}

.hero-content {
  grid-column: 1 / span 7;
  max-width: 760px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.eyebrow {
  margin: 0 0 18px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
}

.hero h1,
.section-heading h2,
.callout h2,
.contact-panel h2 {
  margin: 0;
  font-family: "EB Garamond", serif;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.hero h1 {
  font-size: clamp(2.6rem, 4.8vw, 4.6rem);
  line-height: 0.94;
  color: #fff8f0;
}

.hero-text,
.panel p,
.solution-card p,
.timeline-step p,
.callout p:last-child,
.contact-panel p,
.trust-band p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.82;
}

.hero-text {
  max-width: 38rem;
  margin-top: 24px;
  color: rgba(255, 248, 240, 0.84);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.hero-rail {
  grid-column: 8 / span 5;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: end;
  align-self: stretch;
  justify-self: stretch;
  margin-top: 0;
  margin-left: 24px;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.hero-note,
.hero-metrics,
.panel,
.solution-card,
.timeline-step,
.callout,
.contact-panel {
  border: 1px solid var(--line);
  background: var(--surface-soft);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
}

.hero-note {
  margin-top: auto;
  padding: 24px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(247, 239, 229, 0.08);
  color: #fff8f0;
}

.card-label {
  display: block;
  margin-bottom: 10px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

.hero-note strong {
  font-size: 1.02rem;
  line-height: 1.6;
}

.hero-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border: 0;
  overflow: hidden;
  background: rgba(247, 239, 229, 0.1);
}

.hero-metrics div {
  padding: 24px 20px;
  background: rgba(255, 255, 255, 0.04);
}

.hero-metrics dt {
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff8f0;
}

.hero-metrics dd {
  margin: 8px 0 0;
  color: rgba(255, 248, 240, 0.78);
}

.section {
  padding: 88px 0;
  position: relative;
}

.trust-band {
  position: relative;
  width: auto;
  margin: 0;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
  box-shadow: none;
}

.trust-band-inner {
  width: var(--container);
  margin: 0 auto;
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}

.trust-grid p {
  padding: 28px 30px;
}

.trust-grid p:first-child {
  padding-left: 0;
  border-right: 1px solid var(--line);
}

.trust-grid p:last-child {
  padding-right: 0;
}

@media (max-width: 720px) {
  .trust-grid {
    grid-template-columns: 1fr;
  }
  .trust-grid p:first-child {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .trust-grid p:last-child {
    padding-right: 30px;
  }
  .trust-grid p:first-child {
    padding-left: 30px;
  }
}

.trust-band p,
.panel p,
.solution-card p,
.timeline-step p,
.callout p:last-child,
.contact-panel p {
  color: var(--text-soft);
}

.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 860px);
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.section-heading h2,
.callout h2,
.contact-panel h2 {
  font-size: clamp(2.2rem, 3.4vw, 3.4rem);
  line-height: 1.08;
}

.about-grid,
.solutions-grid,
.timeline {
  display: grid;
  gap: 18px;
}

.about-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.panel.about-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.about-card::before {
  z-index: 2;
}

.about-card-figure {
  position: relative;
  margin: -1px -1px 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: rgba(48, 37, 31, 0.06);
}

.about-card-figure img,
.about-card-figure picture,
.about-card-figure picture > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Aged-photo treatment for the first card: warm tone + slight
   desaturation + subtle vignette + grain overlay. */
.about-card-figure-aged img {
  filter: sepia(0.55) saturate(0.85) contrast(0.95) brightness(0.96) hue-rotate(-6deg);
}

.about-card-figure-aged::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 55%, rgba(40, 24, 12, 0.32) 100%),
    linear-gradient(180deg, rgba(218, 168, 88, 0.10), rgba(120, 70, 30, 0.18));
  mix-blend-mode: multiply;
}

.about-card-figure-noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.18  0 0 0 0 0.12  0 0 0 0 0.05  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>");
  background-size: 220px 220px;
  opacity: 0.42;
  mix-blend-mode: multiply;
}

.about-card-body {
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
}

.about-card-kicker {
  margin: 0;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.about-card-title {
  margin: 4px 0 2px;
  font-family: "EB Garamond", "Garamond", "Times New Roman", serif;
  font-size: 1.4rem;
  line-height: 1.2;
  font-weight: 500;
  color: var(--text);
}

.about-card .about-card-body p:not(.about-card-kicker) {
  margin: 0;
  line-height: 1.7;
  color: var(--text-soft);
}

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

.about.section {
  padding-bottom: 56px;
}

.solutions.section {
  padding-top: 56px;
}

.solution-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 16px;
  color: var(--accent);
  font-size: 1.5rem;
  line-height: 1;
}

/* ── Brand marquee (homepage closing section) ────────────────── */
.brand-marquee {
  position: relative;
  width: auto;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 88px 0;
  background: transparent;
}

.brand-marquee > .section-heading {
  width: var(--container);
  margin-left: auto;
  margin-right: auto;
  border-bottom: 0;
  padding-bottom: 0;
}

.brand-marquee > .section-heading h2 {
  max-width: calc(var(--container) / 2);
}

.brand-marquee-lede {
  width: calc(var(--container) / 2);
  margin: 18px auto 56px;
  margin-left: max(28px, calc((100vw - var(--container)) / 2));
  margin-right: 0;
  line-height: 1.7;
  color: var(--text-soft);
}


.brand-marquee-viewport {
  position: relative;
  overflow: hidden;
  cursor: grab;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 8%,
    #000 92%,
    transparent 100%
  );
          mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 8%,
    #000 92%,
    transparent 100%
  );
  user-select: none;
}

.brand-marquee-viewport.is-grabbing {
  cursor: grabbing;
}

.brand-marquee-nudge {
  /* Nudge offset (set inline by JS) is decoupled from the marquee
     keyframe so the two transforms compose without one cancelling
     the other. */
  transform: translate3d(var(--nudge, 0px), 0, 0);
  transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.brand-marquee-nudge.is-grabbing {
  transition: none;
}

.brand-marquee-track {
  display: flex;
  align-items: center;
  gap: 56px;
  width: max-content;
  animation: brand-marquee-scroll 70s linear infinite;
  will-change: transform;
}

.brand-marquee-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 180px;
  height: 90px;
  flex: 0 0 180px;
  text-decoration: none;
  color: var(--text-soft);
}

.brand-marquee-item img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1) opacity(0.62);
  transition: filter 240ms ease;
}

.brand-marquee-item:hover img {
  filter: grayscale(0) opacity(1);
}

.brand-marquee-item-text {
  font-family: "EB Garamond", serif;
  font-size: 1.2rem;
  letter-spacing: 0.02em;
  color: var(--text-soft);
}

@keyframes brand-marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .brand-marquee-track {
    animation: none;
  }
  .brand-marquee-viewport {
    overflow-x: auto;
  }
}

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

.timeline {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.panel,
.solution-card,
.timeline-step {
  padding: 28px;
  border-radius: 0;
  background: #f8f2e9;
  box-shadow: none;
  position: relative;
}

.panel::before,
.solution-card::before,
.timeline-step::before,
.callout::before,
.contact-panel::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 18px;
  height: 18px;
  border-top: 2px solid var(--line-strong);
  border-left: 2px solid var(--line-strong);
}

.solution-card h3,
.timeline-step h3 {
  margin: 0 0 12px;
  font-size: 1.28rem;
}

.timeline-step span {
  display: inline-flex;
  margin-bottom: 18px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.callout,
.contact-panel {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: 24px;
  align-items: end;
  padding: 38px;
  border-radius: 0;
  background: #f8f2e9;
  box-shadow: none;
}

.capability-strip {
  position: relative;
  width: auto;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: -1px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(31, 23, 20, 0.04);
}

.capability-strip-inner {
  width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.capability-strip-inner > div {
  padding: 18px 20px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
}

.capability-strip-inner > div + div {
  border-left: 1px solid var(--line);
}

.capability-strip-inner > div:first-child {
  padding-left: 0;
}

.capability-strip-inner > div:last-child {
  padding-right: 0;
}

.contact {
  padding-top: 24px;
}

.contact-details {
  display: grid;
  gap: 12px;
  justify-items: start;
}

.contact-details a {
  font-size: clamp(1.25rem, 3vw, 2rem);
  font-weight: 700;
}

.contact-details p {
  max-width: 24ch;
}

.footer {
  position: relative;
  width: auto;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 64px;
  padding: 0;
  font-size: 0.94rem;
}

.footer a {
  text-decoration: none;
}

/* ── CTA band (warm) ─────────────────────────────────────────── */
.footer-cta-band {
  position: relative;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(109, 24, 34, 0.06), transparent 60%),
    linear-gradient(180deg, rgba(244, 237, 226, 1) 0%, rgba(238, 229, 215, 1) 100%);
  border-top: 1px solid rgba(48, 37, 31, 0.08);
  border-bottom: 1px solid rgba(48, 37, 31, 0.08);
}

.footer-cta-inner {
  width: var(--container);
  margin: 0 auto;
  padding: 72px 28px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 72px;
  align-items: start;
  color: var(--text);
}

.footer-cta-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer-cta-eyebrow {
  margin: 0 0 18px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.footer-cta-title {
  margin: 0 0 14px;
  max-width: 24ch;
  font-family: "EB Garamond", "Garamond", "Times New Roman", serif;
  font-size: clamp(1.8rem, 3.2vw, 2.8rem);
  line-height: 1.1;
  font-weight: 500;
  color: var(--text);
}

.footer-cta-lede {
  margin: 0 0 28px;
  max-width: 52ch;
  line-height: 1.7;
  color: var(--text-soft);
}

.footer-cta-right {
  display: flex;
  flex-direction: column;
  /* Pad-top to roughly align with the eyebrow line on the left. */
  padding-top: 4px;
}

.footer-cta-news-label {
  margin: 0 0 14px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.footer-cta-news-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.footer-cta-news-item {
  border-top: 1px solid rgba(48, 37, 31, 0.16);
}

.footer-cta-news-item:last-child {
  border-bottom: 1px solid rgba(48, 37, 31, 0.16);
}

.footer-cta-news-link {
  display: block;
  padding: 14px 0;
  color: inherit;
  text-decoration: none;
  transition: color 160ms ease;
}

.footer-cta-news-link:hover .footer-cta-news-title {
  color: var(--accent);
}

.footer-cta-news-date {
  margin: 0 0 4px;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--text-soft);
}

.footer-cta-news-title {
  margin: 0;
  font-family: "EB Garamond", "Garamond", "Times New Roman", serif;
  font-size: 1.12rem;
  line-height: 1.35;
  color: var(--text);
  transition: color 160ms ease;
}

.footer-cta-news-more {
  display: inline-block;
  margin-top: 14px;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  color: var(--text-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 160ms ease, color 160ms ease;
}

.footer-cta-news-more:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

@media (max-width: 860px) {
  .footer-cta-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

/* ── Dark base ───────────────────────────────────────────────── */
.footer-main {
  background:
    linear-gradient(180deg, rgba(20, 14, 12, 0.98) 0%, rgba(13, 9, 8, 0.99) 100%);
  color: rgba(244, 237, 226, 0.78);
}

.footer-main-inner {
  width: var(--container);
  margin: 0 auto;
  padding: 52px 28px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
}

.footer-identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 56ch;
}

.footer-logo {
  display: block;
  height: 58px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  margin-top: 4px;
}

.footer-contact-line {
  margin: 0;
  line-height: 1.6;
  color: rgba(244, 237, 226, 0.78);
}

.footer-contact-line a {
  color: #fff8f0;
  border-bottom: 1px solid transparent;
  transition: border-color 160ms ease;
}

.footer-contact-line a:hover {
  border-bottom-color: rgba(255, 248, 240, 0.5);
}

.footer-dot {
  display: inline-block;
  margin: 0 8px;
  color: rgba(244, 237, 226, 0.35);
}

.footer-nav-inline {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 0;
  margin-top: 12px;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
}

.footer-nav-inline a {
  color: rgba(244, 237, 226, 0.92);
  padding: 4px 14px;
  border-bottom: 1px solid transparent;
  transition: border-color 160ms ease, color 160ms ease;
}

.footer-nav-inline a + a {
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-nav-inline a:hover {
  color: #fff8f0;
  border-bottom-color: rgba(255, 248, 240, 0.5);
}

.footer-bottom {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  width: 100%;
  max-width: 720px;
}

.footer-bottom p {
  margin: 0;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: rgba(244, 237, 226, 0.5);
}

@media (max-width: 640px) {
  .footer-cta-inner { padding: 56px 22px; }
  .footer-main-inner { padding: 44px 22px 26px; }
  .footer-nav-inline a + a { border-left: 0; }
  .footer-contact-line { font-size: 0.9rem; }
  .footer-dot { margin: 0 6px; }
}

.page-hero,
.article-hero,
.product-hero {
  position: relative;
  width: auto;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* Top padding clears the fixed page header (logo + nav) AND adds
     real breathing room before the breadcrumb begins. The header is
     ~80px tall; 140px gives ~60px of clear space below it before
     "REVIN / O NAMA" starts reading. */
  padding:
    140px
    max(24px, calc((100vw - min(1220px, calc(100vw - 48px))) / 2))
    56px;
  color: #fff8f0;
  overflow: hidden;
}

.page-hero::before,
.article-hero::before,
.product-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Fallback hero image is served from local GridFS at /img/...
     The old fallback pointed at https://revin.hosted.in.rs/files/hero.jpg
     which 404s. Per-page heroes override via inline style="--hero-image". */
  background:
    linear-gradient(90deg, rgba(11, 8, 6, 0.92) 0%, rgba(11, 8, 6, 0.68) 40%, rgba(11, 8, 6, 0.42) 100%),
    var(--hero-image, url("/img/hero.1920x1080.cover.jpg")) center center / cover no-repeat;
  transform: scale(1.02);
}

.page-hero::after,
.article-hero::after,
.product-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: calc(100% / 12) 100%, calc(100% / 12) 100%;
  pointer-events: none;
  opacity: 0.24;
}

.page-hero-inner,
.article-hero-inner,
.product-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 860px;
}

.breadcrumb {
  /* Use flex so children align baseline; wrap so long chains don't
     overflow on narrow viewports. Inner children get
     `white-space: nowrap` so a multi-word chip (e.g. "Sve kategorije")
     stays on a single line and wraps as a whole unit to the next row
     instead of fragmenting in the middle. */
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  row-gap: 6px;
  column-gap: 10px;
  margin-bottom: 18px;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 248, 240, 0.72);
}

.breadcrumb > * {
  white-space: nowrap;
}

.page-hero h1,
.article-hero h1,
.product-hero h1 {
  margin: 0;
  font-family: "EB Garamond", serif;
  font-size: clamp(2.2rem, 3.4vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.012em;
  max-width: 28ch;
}

/* Hero-context overrides for the breadcrumb + eyebrow. The defaults
   live higher in the file and serve a different (in-page) role; here
   we want a clear "navigation up top → identifier → headline → lead"
   hierarchy with distinct weights and spacing. */
.page-hero .breadcrumb,
.article-hero .breadcrumb,
.product-hero .breadcrumb {
  margin-bottom: 36px;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: rgba(255, 248, 240, 0.5);
}
.page-hero .eyebrow,
.article-hero .eyebrow,
.product-hero .eyebrow {
  /* Sits TIGHTLY above the heading — they read as one unit. The
     gold tone + heavier weight makes the eyebrow function as the
     section label, the heading as its statement. */
  margin: 0 0 14px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  color: var(--gold);
}

/* Subtle gold underline accent below the heading. Visually anchors
   the headline as the page's keystone instead of letting it float
   into the lead paragraph. */
.page-hero h1::after,
.article-hero h1::after,
.product-hero h1::after {
  content: "";
  display: block;
  width: 64px;
  height: 2px;
  margin: 24px 0 0;
  background: var(--gold);
  opacity: 0.7;
}

.page-hero p,
.article-hero p,
.product-hero p {
  max-width: 44rem;
  /* Bigger gap below the heading so the lead reads as supporting
     copy, not "next sentence." */
  margin: 28px 0 0;
  font-size: 1rem;
  line-height: 1.75;
  color: rgba(255, 248, 240, 0.74);
}

.page-section {
  padding: 88px 0;
}

.section,
.page-section {
  content-visibility: auto;
  contain-intrinsic-size: 1px 800px;
}

.split-copy,
.contact-layout,
.article-layout,
.product-layout,
.about-story {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

.split-copy > div:first-child,
.about-story > div:first-child,
.product-copy,
.contact-layout > div:first-child {
  grid-column: 1 / span 7;
}

.split-copy > div:last-child,
.about-story > div:last-child,
.product-side,
.contact-layout > div:last-child {
  grid-column: 8 / span 5;
}

/* Product layout: 2 column wrappers. Left holds gallery + copy
 * stacked. Right holds summary + recent stacked. Side-by-side via
 * grid; column heights are independent so the right column doesn't
 * inherit gallery height — no gap below the summary on tall
 * galleries. */
.product-layout-left {
  grid-column: 1 / span 7;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.product-layout-right {
  grid-column: 8 / span 5;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.rich-panel,
.partner-card,
.news-card,
.product-card,
.contact-card,
.detail-panel,
.stat-panel {
  position: relative;
  padding: 28px;
  border: 1px solid var(--line);
  background: #f8f2e9;
}

.partner-card {
  display: flex;
  flex-direction: column;
}

.news-card,
.product-card {
  display: flex;
  flex-direction: column;
}

.rich-panel::before,
.partner-card::before,
.news-card::before,
.product-card::before,
.contact-card::before,
.detail-panel::before,
.stat-panel::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 18px;
  height: 18px;
  border-top: 2px solid var(--line-strong);
  border-left: 2px solid var(--line-strong);
}

.section-kicker {
  margin: 0 0 14px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.section-title {
  margin: 0;
  font-family: "EB Garamond", serif;
  font-size: clamp(2.2rem, 4vw, 3.8rem);
  line-height: 0.96;
}

.section-copy,
.rich-panel p,
.partner-card p,
.news-card p,
.product-card p,
.contact-card p,
.detail-panel p,
.detail-panel li,
.stat-panel p {
  color: var(--text-soft);
  line-height: 1.82;
}

.stats-grid,
.partner-grid,
.news-grid,
.shop-grid,
.contact-grid {
  display: grid;
  gap: 18px;
}

.stats-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.partner-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.news-grid,
.shop-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Aktuelnosti — editorial article list inside the catalog-main column.
   Cards reuse the standard .panel chrome (cream background + 1px line
   + gold corner accent) so they feel consistent with the rest of the
   site. The list fills the column width set by .catalog-layout — no
   internal max-width, the layout grid already constrains it. */
.news-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.news-list-item {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 32px;
  align-items: start;
  padding: 28px;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  background: #f8f2e9;
  position: relative;
}

.news-list-item::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 18px;
  height: 18px;
  border-top: 2px solid var(--line-strong);
  border-left: 2px solid var(--line-strong);
}

.news-list-item:last-child {
  margin-bottom: 0;
}

.news-list-thumb {
  display: block;
  overflow: hidden;
  background: rgba(31, 23, 20, 0.04);
  border: 1px solid var(--line);
}

.news-list-thumb img {
  display: block;
  width: 100%;
  height: 160px;
  object-fit: cover;
  transition: transform 600ms ease;
}

.news-list-thumb:hover img,
.news-list-thumb:focus-visible img {
  transform: scale(1.04);
}

.news-list-body {
  display: flex;
  flex-direction: column;
  padding-top: 4px;
}

.news-list-eyebrow {
  margin: 0 0 12px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold, #9a7a45);
}

.news-list-title {
  margin: 0 0 14px;
  font-family: "EB Garamond", "Garamond", "Times New Roman", serif;
  font-size: clamp(1.45rem, 2.2vw, 1.85rem);
  line-height: 1.18;
  letter-spacing: -0.005em;
  font-weight: 600;
}

.news-list-title a {
  color: var(--text);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 350ms ease;
}

.news-list-title a:hover,
.news-list-title a:focus-visible {
  background-size: 100% 1px;
}

.news-list-dek {
  margin: 0 0 18px;
  color: var(--text-soft);
  line-height: 1.7;
  font-size: 1rem;
}

.news-list-more {
  align-self: flex-start;
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: gap 220ms ease;
}

.news-list-more:hover,
.news-list-more:focus-visible {
  gap: 14px;
}

@media (max-width: 720px) {
  .news-list-item {
    grid-template-columns: 96px 1fr;
    gap: 20px;
    padding: 28px 0;
  }
  .news-list-thumb img {
    height: 96px;
  }
}

/* Aktuelnosti listing — sidebar layout reuses .catalog-shell /
   .catalog-layout / .catalog-toolbar from the shop module, so the
   page reads as a coherent part of the same product family. Only
   news-specific overrides live below. */
.news-clear-all {
  display: inline-block;
  margin-top: 18px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
}

.news-clear-all:hover,
.news-clear-all:focus-visible {
  text-decoration: underline;
}

.news-list-eyebrow a {
  color: inherit;
  text-decoration: none;
}

.news-list-eyebrow a:not(:last-child)::after {
  content: " · ";
  color: var(--text-soft);
}

.news-list-eyebrow a:hover,
.news-list-eyebrow a:focus-visible {
  color: var(--accent);
}

.news-list-meta {
  margin: 0 0 18px;
  font-size: 0.85rem;
  color: var(--text-soft);
}

.news-list-meta time + span {
  margin: 0 6px;
}

/* Article detail page — used by /aktuelnosti/objava/<slug> docs.
   Reuses the global .article-hero shell (full-bleed, padded to align
   with .site-shell); the hero photo is rendered as an <img g-img>
   with the 'hero' preset (AVIF/WebP/JPEG <picture>, srcset, sizes),
   positioned absolute behind the gradient overlay. The shared
   `.article-hero::before` rule's CSS-bg fallback is overridden so it
   contributes only the gradient — the photo comes from the <img>. */
.article-hero::before {
  /* Strip the CSS-bg image; keep only the gradient and lift it above
     the <img class="article-hero-photo"> so it darkens the photo for
     legibility. */
  background:
    linear-gradient(180deg, rgba(11, 8, 6, 0.22) 0%, rgba(11, 8, 6, 0.55) 55%, rgba(11, 8, 6, 0.88) 100%);
  transform: none;
  z-index: 1;
}

/* The hero <img g-img> is rendered by the engine as one of three forms
   depending on whether a preset and LQIP are active:
     - no preset:   <img class="article-hero-photo">
     - preset only: <picture><img class="article-hero-photo"></picture>
     - preset+LQIP: <div class="lqip-wrap article-hero-photo"
                          style="background-image:url(data:...);">
                      <picture><img></picture>
                    </div>
   All three forms are positioned absolute behind the text + gradient. */
.article-hero > picture,
.article-hero > .article-hero-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
}

.article-hero > picture > img,
.article-hero > img.article-hero-photo,
.article-hero > .lqip-wrap > picture,
.article-hero > .lqip-wrap > picture > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Same treatment for page-hero on /o-nama, /partneri, etc. Hero
   photo is rendered as <img g-img="..., 'hero'">, the engine emits
   <picture> + LQIP wrapper, both forms positioned absolute fill.
   The shared `.page-hero::before` rule's CSS-bg fallback is
   overridden so it contributes only the gradient. */
.page-hero::before {
  background:
    linear-gradient(90deg, rgba(11, 8, 6, 0.78) 0%, rgba(11, 8, 6, 0.42) 42%, rgba(11, 8, 6, 0.28) 100%);
  transform: none;
  z-index: 1;
}

.page-hero > picture,
.page-hero > .page-hero-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
}

.page-hero > picture > img,
.page-hero > img.page-hero-photo,
.page-hero > .lqip-wrap > picture,
.page-hero > .lqip-wrap > picture > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Page-hero-inner needs to sit above the photo (z-index 0) and
   the gradient ::before (z-index 1). */
.page-hero > .page-hero-inner {
  z-index: 2;
}

/* LQIP wrapper. Two children stacked:
     - .lqip-placeholder — a real <img> with the tiny data-URL AVIF
       (~400 bytes). The browser decodes this inline immediately, so
       it paints in the first frame after HTML parsing.
     - <picture><img>     — the real image, which fetches AVIF/WebP/
       JPEG via srcset and paints over the placeholder when ready.

   The wrapper does NOT set its own position; callers must establish
   positioning context (e.g. `.hero > .lqip-wrap { position: absolute;
   inset: 0 }`). overflow:hidden clips the blur halo on the placeholder. */
.lqip-wrap {
  overflow: hidden;
  isolation: isolate;
}

.lqip-wrap > .lqip-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(20px);
  transform: scale(1.08);
  z-index: 0;
}

.lqip-wrap > picture {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.lqip-wrap > picture > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.article-hero .article-hero-inner {
  z-index: 2;
}


.article-hero-inner .breadcrumb {
  margin-bottom: 28px;
  color: rgba(248, 242, 233, 0.72);
}

.article-hero-inner .breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.article-hero-inner .breadcrumb a:hover,
.article-hero-inner .breadcrumb a:focus-visible {
  text-decoration: underline;
}

.article-eyebrow {
  margin: 0 0 18px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold, #9a7a45);
}

.article-eyebrow a {
  color: inherit;
  text-decoration: none;
}

.article-eyebrow a:not(:last-child)::after {
  content: " · ";
  color: rgba(248, 242, 233, 0.5);
}

.article-eyebrow a:hover,
.article-eyebrow a:focus-visible {
  color: #ffe9b8;
}

.article-hero-inner h1 {
  margin: 0 0 20px;
  font-family: "EB Garamond", "Garamond", "Times New Roman", serif;
  font-size: clamp(2.1rem, 4.2vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: #fff8ec;
}

.article-dek {
  margin: 0 0 26px;
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.55;
  color: rgba(248, 242, 233, 0.86);
  max-width: 640px;
}

.article-meta {
  margin: 0;
  font-size: 0.85rem;
  color: rgba(248, 242, 233, 0.7);
}

.article-meta time + span {
  margin: 0 6px;
}

.article-body {
  padding: clamp(60px, 8vw, 96px) 0 40px;
}

/* Two-column layout inside the body section:
   - left: the article body in a cream-card with the gold corner accent
     (same chrome as .panel / .partner-card / .news-list-item).
   - right: a slim rail of related products, sticky on tall viewports so
     it stays in view as the reader scrolls.
   Collapses to a single column below 980px. */
.article-body-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 32px;
  align-items: start;
}

.article-body-box {
  position: relative;
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid var(--line);
  background: #f8f2e9;
}

.article-body-box::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 18px;
  height: 18px;
  border-top: 2px solid var(--line-strong);
  border-left: 2px solid var(--line-strong);
}

/* Body text sits at a comfortable reading measure inside the card. */
.article-body-box > p,
.article-body-box > ul,
.article-body-box > ol,
.article-body-box > h2 {
  max-width: 64ch;
}

.article-related {
  position: sticky;
  top: 100px;
  padding: 24px;
  border: 1px solid var(--line);
  background: rgba(248, 242, 233, 0.5);
}

.article-related-title {
  margin: 6px 0 18px;
  font-family: "EB Garamond", "Garamond", "Times New Roman", serif;
  font-size: 1.2rem;
  line-height: 1.2;
  font-weight: 600;
  color: var(--text);
}

.article-related-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.article-related-card {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 14px;
  align-items: start;
}

.article-related-thumb {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--line);
  overflow: hidden;
}

/* Explicit pixel sizing so the engine-set width/height attributes
   (which match the requested variant dimensions, e.g. 240x240) don't
   blow out of the 64px wrapper. Object-fit: contain so transparent
   logos / aspect-mismatched photos read whole, not cropped. */
.article-related-thumb img {
  width: 56px;
  height: 56px;
  display: block;
  object-fit: contain;
}

.article-related-name {
  margin: 0 0 4px;
  font-size: 0.95rem;
  line-height: 1.25;
  font-weight: 600;
}

.article-related-name a {
  color: var(--text);
  text-decoration: none;
}

.article-related-name a:hover,
.article-related-name a:focus-visible {
  text-decoration: underline;
}

.article-related-price {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-soft);
}

@media (max-width: 980px) {
  .article-body-layout {
    grid-template-columns: 1fr;
  }
  .article-related {
    position: static;
  }
}

.article-body-box > p,
.article-body-box > ul,
.article-body-box > ol {
  margin: 0 0 24px;
  font-size: 1.08rem;
  line-height: 1.75;
  color: var(--text);
}

.article-body-box > p.article-lead {
  font-family: "EB Garamond", "Garamond", "Times New Roman", serif;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.45;
  color: var(--text);
  margin-bottom: 32px;
}

.article-body-box h2 {
  margin: 44px 0 16px;
  font-family: "EB Garamond", "Garamond", "Times New Roman", serif;
  font-size: clamp(1.5rem, 2.4vw, 1.85rem);
  line-height: 1.2;
  letter-spacing: -0.005em;
  font-weight: 600;
}

.article-body-box ul,
.article-body-box ol {
  padding-left: 22px;
}

.article-body-box li {
  margin-bottom: 8px;
}

.article-gallery {
  padding: 0 0 clamp(60px, 8vw, 96px);
}

/* Gallery sits in the same cream-card chrome as the body, with the
   gold corner accent. Tiles are small uniform squares so the row
   reads as a contact-sheet — not a stacked column of large images. */
.article-gallery-box {
  position: relative;
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid var(--line);
  background: #f8f2e9;
}

.article-gallery-box::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 18px;
  height: 18px;
  border-top: 2px solid var(--line-strong);
  border-left: 2px solid var(--line-strong);
}

.article-gallery-title {
  margin: 6px 0 22px;
  font-family: "EB Garamond", "Garamond", "Times New Roman", serif;
  font-size: 1.4rem;
  line-height: 1.2;
  font-weight: 600;
  color: var(--text);
}

.article-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}

/* Each tile is a <button> so it's keyboard-activatable. Reset native
   button chrome and force a 1:1 cell. */
.article-gallery-figure {
  position: relative;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.4);
  aspect-ratio: 1 / 1;
  cursor: zoom-in;
  font: inherit;
  color: inherit;
  display: block;
  transition: transform 220ms ease, border-color 220ms ease;
}

.article-gallery-figure:hover,
.article-gallery-figure:focus-visible {
  border-color: var(--line-strong);
  transform: translateY(-2px);
}

.article-gallery-figure:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.article-gallery-figure > img:first-child {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The preload img is rendered only so the engine generates the
   large variant for the lightbox. It must NOT take any layout space. */
.article-gallery-preload {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  top: 0;
  left: 0;
}

/* Lightbox modal. <dialog> handles the backdrop natively via
   ::backdrop; we style it dark + dim. The dialog itself is the
   transparent container that holds the image + close button. */
.article-lightbox {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: 92vw;
  max-height: 92vh;
  width: max-content;
  height: max-content;
}

.article-lightbox::backdrop {
  background: rgba(11, 8, 6, 0.92);
}

.article-lightbox-img {
  display: block;
  max-width: 92vw;
  max-height: 88vh;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
}

.article-lightbox-close {
  position: absolute;
  top: -44px;
  right: 0;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 0;
  color: #f8f2e9;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.article-lightbox-close:hover,
.article-lightbox-close:focus-visible {
  color: #ffe9b8;
}

.article-lightbox-close:focus-visible {
  outline: 2px solid #ffe9b8;
  outline-offset: 2px;
}

.contact-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.catalog-shell {
  display: grid;
  gap: 18px;
}

.catalog-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.catalog-sidebar,
.catalog-toolbar {
  border: 1px solid var(--line);
  background: #f8f2e9;
}

.catalog-sidebar {
  display: grid;
  gap: 18px;
  padding: 24px;
  position: sticky;
  top: 116px;
}

.catalog-sidebar-head h2 {
  margin: 0 0 12px;
  font-family: "EB Garamond", serif;
  font-size: 2rem;
  line-height: 0.96;
}

.catalog-sidebar-head p:last-child,
.catalog-note p:last-child {
  margin: 0;
  color: var(--text-soft);
  line-height: 1.75;
}

.catalog-filter-group {
  display: grid;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.catalog-main {
  display: grid;
  gap: 18px;
}

.catalog-toolbar {
  display: grid;
  grid-template-columns: 1.2fr auto 0.8fr;
  gap: 18px;
  padding: 22px 24px;
  align-items: end;
}

.catalog-search,
.catalog-sort {
  display: grid;
  gap: 10px;
  align-content: start;
  margin: 0;
}

.catalog-search label,
.catalog-sort label,
.catalog-label {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.catalog-search input,
.catalog-sort select {
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 0;
  font: inherit;
  color: var(--text);
  background: #ffffff;
}

.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.filter-pills-column {
  flex-direction: column;
}

.filter-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: rgba(31, 23, 20, 0.02);
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  text-align: left;
}

.filter-pill strong {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.filter-pill.is-active {
  border-color: rgba(109, 24, 34, 0.34);
  background: rgba(109, 24, 34, 0.1);
  color: var(--accent);
}

.filter-pill.is-active strong {
  color: var(--accent);
}

.catalog-meta {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 0 16px;
  border: 1px solid var(--line);
  background: rgba(31, 23, 20, 0.03);
}

.catalog-meta p {
  margin: 0;
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
}

.stat-panel strong,
.contact-card strong {
  display: block;
  margin-bottom: 10px;
  font-size: 1.6rem;
}

.partner-logo-wrap,
.news-image-wrap,
.product-image-wrap {
  display: grid;
  place-items: center;
  min-height: 150px;
  margin-bottom: 22px;
  border: 1px solid var(--line);
  background: rgba(31, 23, 20, 0.03);
}

/* Partner-card logos render in a fixed 150×90 box. `object-fit:
   contain` preserves each logo's intrinsic aspect ratio inside. */
.partner-logo-wrap img {
  display: block;
  margin: 0 auto;
  width: 150px;
  height: 90px;
  object-fit: contain;
}


/* Fallback rendered when a brand has no logo image in GridFS. We use
   the brand name set in serif at logo-comparable size so card height
   stays uniform with the logo'd siblings. */
.partner-logo-placeholder {
  max-width: 78%;
  padding: 0 12px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text);
  text-align: center;
  line-height: 1.15;
}

.shop-grid .product-image-wrap {
  min-height: 250px;
}

.shop-grid .product-image-wrap img {
  display: block;
  margin: 0 auto;
  width: 200px;
  height: 200px;
  object-fit: contain;
}

.news-image-wrap img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.partner-card h3,
.news-card h3,
.product-card h3,
.contact-card h3,
.detail-panel h3 {
  margin: 0 0 12px;
  font-size: 1.2rem;
}

.card-actions,
.page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.partner-card .card-actions {
  margin-top: auto;
  padding-top: 24px;
}

.news-card .card-actions,
.product-card .card-actions {
  margin-top: auto;
  padding-top: 24px;
}

.tag-row,
.news-meta,
.product-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
  color: var(--text);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.product-specs {
  display: grid;
  gap: 1px;
  margin: 18px 0 0;
  border: 1px solid var(--line);
  background: var(--line);
}

.product-specs div {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(248, 242, 233, 0.94);
}

.product-specs dt {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.product-specs dd {
  margin: 0;
  color: var(--text);
}

.article-layout .detail-panel:first-child {
  grid-column: 1 / span 8;
}

.article-layout .detail-panel:last-child {
  grid-column: 9 / span 4;
}

.article-layout .news-image-wrap,
.product-layout .product-image-wrap {
  min-height: auto;
  margin-bottom: 24px;
}

.article-layout ul,
.detail-panel ul {
  margin: 18px 0 0;
  padding-left: 18px;
}

.product-layout .product-copy {
  display: grid;
  gap: 18px;
  align-self: start;
  position: sticky;
  top: 116px;
}

.product-gallery {
  display: grid;
  gap: 16px;
}

.product-gallery-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 500px;
  border: 1px solid var(--line);
  background: rgba(31, 23, 20, 0.03);
  overflow: hidden;
}

.carousel-image {
  max-width: 90%;
  max-height: 420px;
  width: auto;
  height: auto;
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border: 1px solid var(--line-strong);
  background: rgba(242, 236, 227, 0.88);
  color: var(--text);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}

.carousel-prev {
  left: 16px;
}

.carousel-next {
  right: 16px;
}

.product-thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.product-thumb {
  padding: 10px;
  border: 1px solid var(--line);
  background: #f8f2e9;
  cursor: pointer;
}

.product-thumb.is-active {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.product-thumb img {
  display: block;
  width: 100%;
  height: 92px;
  object-fit: contain;
}

.product-side {
  display: grid;
  gap: 18px;
  align-content: start;
}

.product-copy > .detail-panel {
  align-self: start;
}

.product-summary {
  height: 100%;
}

.product-summary .card-actions {
  margin-top: 28px;
}

.contact-form {
  display: grid;
  gap: 16px;
  margin-top: 24px;
}

.contact-form label {
  display: grid;
  gap: 8px;
}

.contact-form span {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 0;
  font: inherit;
  color: var(--text);
  background: #ffffff;
  appearance: none;
}

.contact-form input:focus-visible,
.contact-form select:focus-visible,
.contact-form textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
}

/* ── Contact page — letterhead layout ───────────────────────
   Single elegant column. Two boxed panels stacked (contact info
   above, form below), each in the site's standard panel chrome
   (cream + hairline border + gold corner accent). Full-bleed map
   band closes the page. */

.kontakt-shell {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: stretch;
}

/* Left column: map on top + info panel below. The grid cell
   stretches to match the form panel's height (align-items: stretch
   on .kontakt-shell). The map grows to fill the leftover space
   after the info panel takes its natural height. */
.kontakt-left {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.kontakt-left .kontakt-map-band {
  flex: 1;
  min-height: 240px;
}

.kontakt-left .kontakt-panel {
  flex: 0 0 auto;
}

.kontakt-panel {
  position: relative;
  padding: clamp(36px, 5vw, 64px);
  border: 1px solid var(--line);
  background: #f8f2e9;
}

.kontakt-panel::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 18px;
  height: 18px;
  border-top: 2px solid var(--line-strong);
  border-left: 2px solid var(--line-strong);
}

.kontakt-eyebrow {
  margin: 0 0 14px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold, #9a7a45);
}

.kontakt-headline {
  margin: 0 0 36px;
  font-family: "EB Garamond", "Garamond", "Times New Roman", serif;
  font-size: clamp(1.7rem, 2.8vw, 2.2rem);
  line-height: 1.15;
  letter-spacing: -0.005em;
  font-weight: 600;
}

.kontakt-lede {
  margin: -20px 0 32px;
  color: var(--text-soft);
  line-height: 1.7;
  max-width: 640px;
}

/* Address / phone / email / hours as a typographic dl. Single
   column inside the half-width panel; each row has a small
   gold-uppercase label and a serif value. */
.kontakt-fields {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin: 0;
}

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

.kontakt-field dt {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold, #9a7a45);
}

.kontakt-field dd {
  margin: 0;
  font-family: "EB Garamond", "Garamond", "Times New Roman", serif;
  font-size: 1.2rem;
  line-height: 1.45;
  color: var(--text);
}

.kontakt-field dd a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 300ms ease;
}

.kontakt-field dd a:hover,
.kontakt-field dd a:focus-visible {
  background-size: 100% 1px;
}

/* Form */
.kontakt-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 4px;
}

.kontakt-form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.kontakt-form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kontakt-form-field label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.kontakt-form-optional {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--text-soft);
  opacity: 0.7;
  margin-left: 4px;
}

.kontakt-form input,
.kontakt-form select,
.kontakt-form textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 0;
  font: inherit;
  color: var(--text);
  background: #ffffff;
  appearance: none;
}

.kontakt-form input:focus-visible,
.kontakt-form select:focus-visible,
.kontakt-form textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
}

.kontakt-form textarea {
  resize: vertical;
  min-height: 168px;
  font-family: inherit;
}

.kontakt-form-actions {
  margin-top: 8px;
}

/* Map band — sits in the left column above the info panel and
   takes whatever vertical space is left after the info panel
   takes its natural height. Grayscale-toned to match the site's
   warm palette and not fight for attention. */
.kontakt-map-band {
  overflow: hidden;
  border: 1px solid var(--line);
}

.kontakt-map {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(0.35) brightness(0.97);
}

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

.contact-form textarea {
  resize: vertical;
  min-height: 144px;
}

.map-panel {
  display: flex;
  flex-direction: column;
  min-height: 820px;
}

.contact-map {
  flex: 1;
  min-height: 100%;
  margin-top: 24px;
}

.cta-band {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 24px;
  padding: 36px;
  border: 1px solid var(--line);
  background: #f8f2e9;
}

.reveal {
  opacity: 1;
  transform: none;
}

.js .reveal {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 700ms ease,
    transform 700ms ease;
}

.js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1100px) {
  .hero {
    grid-template-columns: 1fr;
    padding:
      136px
      max(24px, calc((100vw - min(1220px, calc(100vw - 48px))) / 2))
      28px;
  }

  .hero-rail,
  .callout,
  .contact-panel,
  .about-grid,
  .timeline,
  .trust-grid,
  .capability-strip,
  .split-copy,
  .contact-layout,
  .article-layout,
  .product-layout,
  .product-copy-full,
  .about-story,
  .catalog-layout,
  .catalog-toolbar,
  .partner-grid,
  .news-grid,
  .shop-grid,
  .stats-grid,
  .contact-grid,
  .cta-band,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .hero-content,
  .hero-rail {
    grid-column: auto;
  }

  .hero-content {
    border-bottom: 0;
  }

  .hero-rail {
    margin-top: 36px;
    margin-left: 0;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }

  .split-copy > div,
  .about-story > div,
  .contact-layout > div,
  .article-layout .detail-panel,
  .product-copy,
  .product-side {
    grid-column: auto;
  }

  /* Mobile order on product page:
   *   1. Gallery
   *   2. Summary (product-side, has CTA)
   *   3. Description + specs + features (product-copy)
   *   4. Recently viewed
   *   5. (similar products section is full-width, follows .product-layout)
   *
   * The left/right column wrappers exist only for desktop. On
   * mobile, `display: contents` removes them from the box tree so
   * their children become direct grid items of .product-layout and
   * can be re-ordered cross-column. */
  .product-layout-left,
  .product-layout-right {
    display: contents;
  }
  .product-layout .product-gallery-panel,
  .product-layout .product-copy,
  .product-layout .product-side,
  .product-layout .product-recent {
    grid-column: auto;
    grid-row: auto;
  }
  .product-layout .product-gallery-panel { order: 1; }
  .product-layout .product-side          { order: 2; }
  .product-layout .product-copy          { order: 3; }
  .product-layout .product-recent        { order: 4; }

  .product-copy > .detail-panel {
    position: static;
  }

  .catalog-sidebar {
    position: static;
  }

  .trust-grid p:first-child,
  .capability-strip-inner > div + div {
    border-right: 0;
    border-left: 0;
  }

  .trust-grid p + p,
  .capability-strip-inner > div + div {
    border-top: 1px solid var(--line);
  }

  .capability-strip-inner {
    grid-template-columns: 1fr 1fr;
  }
}

/* Sidebar nav */

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.22);
  cursor: pointer;
  color: var(--cream);
  padding: 0;
  flex-shrink: 0;
  transition: border-color 220ms ease, background 220ms ease;
}

.nav-toggle:hover,
.nav-toggle:focus-visible {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.06);
  outline: none;
}

.nav-toggle-icon {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 20px;
}

.nav-toggle-icon span {
  display: block;
  height: 1.5px;
  background: currentColor;
  transition: transform 280ms ease, opacity 280ms ease, width 280ms ease;
  transform-origin: center;
}

.nav-toggle-icon span:nth-child(3) {
  width: 13px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-icon span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-icon span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-icon span:nth-child(3) {
  width: 20px;
  transform: translateY(-6.5px) rotate(-45deg);
}

.nav-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(19, 13, 11, 0.54);
  z-index: 30;
  opacity: 0;
  transition: opacity 280ms ease;
  backdrop-filter: blur(2px);
}

.nav-sidebar-overlay.is-open {
  opacity: 1;
}

.nav-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 86vw);
  z-index: 31;
  background: linear-gradient(160deg, #1e1410 0%, #130d0b 60%, #0f0b09 100%);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
  overflow-y: auto;
}

.nav-sidebar.is-open {
  transform: translateX(0);
}

.nav-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  min-height: 72px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.nav-sidebar-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.16);
  cursor: pointer;
  color: rgba(246, 239, 228, 0.7);
  padding: 0;
  transition: border-color 220ms ease, color 220ms ease;
}

.nav-sidebar-close:hover,
.nav-sidebar-close:focus-visible {
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--cream);
  outline: none;
}

.nav-sidebar-close svg {
  display: block;
}

.nav-sidebar-body {
  flex: 1;
  padding: 8px 0 32px;
}

.nav-sidebar-links {
  display: flex;
  flex-direction: column;
  padding: 16px 0;
}

.nav-sidebar-links a {
  display: flex;
  align-items: center;
  padding: 13px 24px;
  font-size: 1rem;
  font-weight: 600;
  color: rgba(246, 239, 228, 0.78);
  letter-spacing: 0.01em;
  border-left: 2px solid transparent;
  transition: color 200ms ease, border-color 200ms ease, background 200ms ease, padding-left 200ms ease;
}

.nav-sidebar-links a:hover,
.nav-sidebar-links a:focus-visible {
  color: var(--cream);
  border-left-color: var(--gold);
  background: rgba(255, 255, 255, 0.04);
  padding-left: 28px;
  outline: none;
}

.nav-sidebar-links a.is-active {
  color: var(--cream);
  border-left-color: var(--accent);
}

.nav-sidebar-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.07);
  margin: 8px 24px;
}

.nav-sidebar-cta {
  padding: 8px 24px 0;
}

.nav-sidebar-cta .button {
  width: 100%;
  justify-content: center;
}

/* Responsive */

@media (max-width: 920px) {
  .topbar-inner {
    grid-template-columns: 1fr auto;
    min-height: 72px;
  }

  .nav {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  .topbar-actions {
    justify-self: end;
  }

  .nav-sidebar-overlay {
    display: block;
  }

  .hero-metrics,
  .solutions-grid,
  .partner-grid,
  .news-grid,
  .shop-grid,
  .contact-grid,
  .stats-grid,
  .product-thumbs {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  :root {
    --container: min(100vw - 24px, 1220px);
  }

  .topbar {
    padding-top: 10px;
  }

  .button-ghost {
    display: none;
  }

  .hero {
    min-height: 100svh;
    padding: 120px 20px 20px;
    border-radius: 0;
  }

  .page-hero,
  .article-hero,
  .product-hero {
    padding: 92px 20px 40px;
  }

  .hero h1 {
    font-size: clamp(2.3rem, 9vw, 3.2rem);
  }

  .page-hero h1,
  .article-hero h1,
  .product-hero h1 {
    /* Slightly smaller floor on phones so a long Serbian title with
       narrow characters still fits within two-to-three readable
       lines instead of overflowing the column. */
    font-size: clamp(1.8rem, 6.8vw, 2.6rem);
    max-width: 100%;
  }

  .section {
    padding: 68px 0;
  }

  .page-section {
    padding: 68px 0;
  }

  .callout,
  .contact-panel,
  .panel,
  .solution-card,
  .timeline-step,
  .rich-panel,
  .partner-card,
  .news-card,
  .product-card,
  .contact-card,
  .detail-panel,
  .stat-panel,
  .cta-band,
  .footer-brand,
  .footer-block,
  .footer-cta {
    padding: 24px;
  }

  .product-gallery-stage {
    min-height: 360px;
  }

  .carousel-image {
    max-height: 280px;
  }

  .footer {
    margin-top: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .button,
  .nav a::after,
  .reveal,
  .nav-sidebar,
  .nav-sidebar-overlay,
  .nav-toggle-icon span {
    transition: none;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 1100px) {
  .split-copy,
  .contact-layout,
  .about-story {
    display: flex;
    flex-direction: column;
    gap: 18px;
    grid-template-columns: 1fr !important;
  }

  .split-copy > *,
  .contact-layout > *,
  .about-story > * {
    grid-column: 1 / -1 !important;
    width: 100%;
  }

  .contact-layout .map-panel,
  .contact-layout .contact-form,
  .contact-layout .rich-panel {
    width: 100%;
  }

  .split-copy > * {
    min-width: 0;
  }
}

/* ── Catalog facet hierarchy ────────────────────────────────────── */

/* Top-level cat pill: slightly heavier weight for visual hierarchy */
.filter-pill.is-parent {
  font-weight: 800;
  letter-spacing: 0.04em;
  background: rgba(31, 23, 20, 0.05);
  border-color: rgba(48, 37, 31, 0.32);
}

/* Nested cat pill: indented, lighter, smaller */
.filter-pill.is-nested {
  margin-left: 12px;
  font-size: 0.85rem;
  font-weight: 500;
  background: transparent;
  border-color: var(--line);
  min-height: 40px;
}

.filter-pill.is-nested strong {
  font-weight: 600;
}

/* ── Catalog toolbar polish ─────────────────────────────────────── */

.catalog-toolbar {
  align-items: stretch;
  background: linear-gradient(180deg, rgba(248, 242, 233, 0.9) 0%, rgba(242, 236, 227, 0.7) 100%);
  border: 1px solid var(--line);
  position: relative;
}

.catalog-toolbar::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 18px;
  height: 18px;
  border-top: 2px solid var(--line-strong);
  border-left: 2px solid var(--line-strong);
}

.catalog-search {
  position: relative;
}

.catalog-search input {
  padding-left: 44px;
  font-size: 1rem;
  background: #ffffff;
  transition: border-color 220ms ease, background 220ms ease;
}

.catalog-search input:focus-visible {
  outline: none;
  border-color: var(--accent);
  background: #ffffff;
}

/* Font Awesome magnifying-glass placed inside the form via a real
   <i> element. The form is `position: relative`; the icon is
   absolute, anchored to the bottom of the form (== bottom of the
   input, since the label sits ABOVE the input) and sized to the
   input's min-height (52px) so flex-centering lands on the input's
   vertical center regardless of font/line-height. */
.catalog-search .fa-magnifying-glass {
  position: absolute;
  left: 16px;
  bottom: 0;
  height: 52px;
  display: flex;
  align-items: center;
  font-size: 0.95rem;
  color: var(--text-soft);
  opacity: 0.7;
  pointer-events: none;
}


.catalog-meta {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  background: transparent;
  border: 0;
}

.catalog-meta-label {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.catalog-meta-value {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 16px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent);
  background: rgba(109, 24, 34, 0.05);
  border: 1px solid rgba(109, 24, 34, 0.18);
}

.catalog-sort select {
  padding-right: 44px;
  font-size: 1rem;
  background: #ffffff;
  cursor: pointer;
  transition: border-color 220ms ease, background 220ms ease;
}

.catalog-sort select:focus-visible {
  outline: none;
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.95);
}

.catalog-sort {
  position: relative;
}

/* Custom chevron — appears regardless of browser default styling.
   Position relative to the select via a wrapper-relative pseudo. */
.catalog-sort::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: 21px;
  width: 10px;
  height: 10px;
  pointer-events: none;
  border-right: 2px solid var(--text-soft);
  border-bottom: 2px solid var(--text-soft);
  transform: rotate(45deg);
  opacity: 0.7;
}

/* Hide the default appearance (Safari shows a native arrow even with
   appearance:none on some versions; this layered approach is robust). */
.catalog-sort select {
  appearance: none;
  -webkit-appearance: none;
}

/* Active-filter pill row: spacing + clear-all visual difference */
.shop-active-row {
  margin-bottom: 22px;
  align-items: center;
}

.filter-pill.shop-clear-all {
  background: transparent;
  border-color: transparent;
  color: var(--text-soft);
  text-decoration: underline;
  text-underline-offset: 4px;
  min-height: 40px;
}

.filter-pill.shop-clear-all:hover,
.filter-pill.shop-clear-all:focus-visible {
  color: var(--accent);
  background: transparent;
  border-color: transparent;
}

/* Smaller toolbar at narrow widths */
@media (max-width: 920px) {
  .catalog-toolbar {
    grid-template-columns: 1fr;
  }
  .catalog-meta {
    padding-bottom: 0;
  }
  .catalog-meta p {
    padding-bottom: 0;
  }
}

/* ── Product price display ──────────────────────────────────────── */

.product-price {
  margin: 12px 0 0;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.02em;
}

.product-price strong {
  font-weight: 800;
}

.product-price span {
  margin-left: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-soft);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.product-card .product-price {
  margin-top: 16px;
}


/* ── Curated product page ───────────────────────────────────────── */

/* Stack the description panel under the gallery in the left column. */
.product-copy {
  display: grid;
  gap: 18px;
}

/* Side panel internal spacing tighter; price + SKU + points + pickers in sequence. */
.product-summary .product-meta {
  margin-bottom: 16px;
}

.product-side-heading {
  margin: 28px 0 14px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 1.05rem;
}

.product-pickers-block .catalog-filter-group:not(:first-child) {
  margin-top: 16px;
}

.product-points {
  margin: 18px 0 0;
  padding: 18px 20px;
  list-style: none;
  display: grid;
  gap: 12px;
  background: rgba(31, 23, 20, 0.03);
  border-left: 2px solid var(--accent);
}

.product-points li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.92rem;
  line-height: 1.5;
}

.product-points li i {
  color: var(--accent);
  margin-top: 3px;
  font-size: 1rem;
  flex-shrink: 0;
  width: 18px;
  text-align: center;
}

.product-stock {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.product-stock .eyebrow {
  margin: 0;
  letter-spacing: 0.14em;
}

.product-sku {
  margin: 0 0 14px;
  font-size: 0.82rem;
  color: var(--text-soft);
}

.product-sku code {
  font-family: ui-monospace, "SFMono-Regular", "Menlo", monospace;
  font-size: 0.82rem;
  padding: 2px 6px;
  background: rgba(31, 23, 20, 0.06);
}

/* Description panel (within product-copy column) */
.product-description-text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.85;
  white-space: pre-line;
  color: var(--text-soft);
}

.product-description-use {
  margin-top: 22px;
  padding: 18px 22px;
  background: rgba(109, 24, 34, 0.05);
  border-left: 3px solid var(--accent);
  font-size: 0.95rem;
  line-height: 1.6;
}

.product-description-use strong {
  color: var(--text);
}

/* Spec + features panels: span the full product-layout width below the 2-col split */
.product-spec-panel,
.product-features-panel {
  margin-top: 28px;
}

.product-spec-tables {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 8px;
}

.product-spec-group h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  font-family: "EB Garamond", serif;
  font-size: 1.3rem;
  font-weight: 600;
}

.product-spec-group h3 i {
  color: var(--accent);
  font-size: 1.05rem;
  width: 22px;
  text-align: center;
}

.product-spec-table {
  width: 100%;
  border-collapse: collapse;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid var(--line);
}

.product-spec-table tr {
  border-bottom: 1px solid var(--line);
}

.product-spec-table tr:last-child {
  border-bottom: 0;
}

.product-spec-name {
  padding: 12px 16px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-soft);
  width: 42%;
  vertical-align: top;
}

.product-spec-value {
  padding: 12px 16px;
  color: var(--text);
  font-size: 0.95rem;
  vertical-align: top;
}

.product-features-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 8px;
}

.product-feature {
  position: relative;
  padding: 26px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.3);
}

.product-feature::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 18px;
  height: 18px;
  border-top: 2px solid var(--line-strong);
  border-left: 2px solid var(--line-strong);
}

.product-feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 16px;
  border: 1px solid var(--line-strong);
  background: rgba(109, 24, 34, 0.05);
  color: var(--accent);
  font-size: 1.2rem;
}

.product-feature h3 {
  margin: 0 0 10px;
  font-size: 1.1rem;
  line-height: 1.3;
}

.product-feature p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--text-soft);
}

/* Image gallery: thumbnails are clickable; active one has a visible border */
.product-thumb {
  cursor: pointer;
  transition: border-color 200ms ease;
}

.product-thumb.is-active,
.product-thumb:hover {
  border-color: var(--accent);
}

.product-thumb img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 920px) {
  .product-spec-tables,
  .product-features-grid {
    grid-template-columns: 1fr;
  }
}

.product-panel-title {
  margin: 0 0 20px;
  font-family: "EB Garamond", serif;
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* ── Clickable product card ─────────────────────────────────────── */

.product-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
  outline: none;
  transition: transform 0.18s ease;
}

.product-card-link:hover,
.product-card-link:focus-visible {
  transform: translateY(-2px);
}

.product-card-link:focus-visible .product-card {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent);
}

.product-card-link .product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.product-card-link:hover .product-card {
  border-color: var(--line-strong);
}

.product-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.product-card-short {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 0 16px;
}

.product-card-axes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 18px;
}

.product-card-axis-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.5);
  color: var(--text);
  font-size: 0.78rem;
  line-height: 1.4;
}

.product-card-axis-label {
  color: var(--text-soft);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.68rem;
}

.product-card-axis-count {
  font-weight: 600;
}

.product-card-foot {
  margin-top: 24px;
}

.product-card-price-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 52px;
  padding: 14px 24px;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  font-size: 0.94rem;
  font-weight: 700;
  color: #fff8f0;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-deep) 100%);
  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    background 220ms ease,
    border-color 220ms ease;
}

.product-card-link:hover .product-card-price-box,
.product-card-link:focus-visible .product-card-price-box {
  transform: translateY(-1px);
  box-shadow: 8px 8px 0 rgba(23, 17, 14, 0.12);
}

.product-card-price-box strong {
  font-weight: 700;
  font-size: 1rem;
}

.product-card-price-box > span:last-child {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff8f0;
  opacity: 0.75;
}

.product-card-price-from {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff8f0;
  opacity: 0.75;
}

.product-card-price-box-empty {
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ── Topbar Proizvodi dropdown ───────────────────────────────────── */

.nav-products {
  position: relative;
  display: inline-flex;
  align-items: stretch;
}

.nav-products-trigger {
  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    background 220ms ease,
    border-color 220ms ease;
}

.nav-products-caret-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-height: 52px;
  padding: 0;
  /* Borders on top/right/bottom only — the left edge shares the trigger's
   * right border so the split button reads as one outline. */
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-left: none;
  background: rgba(109, 24, 34, 0.92);
  color: #fff8f0;
  cursor: pointer;
  transition:
    transform 220ms ease,
    background 220ms ease,
    box-shadow 220ms ease;
}

/* Both elements share a single visual state — hovering or focusing
 * either one lifts both, so the split button reads as one unit. */
.nav-products:hover .nav-products-trigger,
.nav-products:focus-within .nav-products-trigger,
.nav-products:hover .nav-products-caret-btn,
.nav-products:focus-within .nav-products-caret-btn {
  transform: translateY(-1px);
  box-shadow: 8px 8px 0 rgba(23, 17, 14, 0.18);
}

.nav-products-caret-btn:focus-visible {
  outline: none;
}

.nav-products-caret {
  font-size: 0.72rem;
  transition: transform 200ms ease;
}

.nav-products-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 240px;
  padding: 8px 0;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  box-shadow: 8px 8px 0 rgba(23, 17, 14, 0.12);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 180ms ease, transform 180ms ease;
  z-index: 50;
}

/* Invisible hover-bridge: an absolutely-positioned ::after on the
 * container covers the visual gap between trigger and menu, so the
 * cursor never leaves `.nav-products` while moving from one to the
 * other. The bridge is only active while the menu is open (or about
 * to open) — otherwise it would extend the trigger's hover hitbox
 * downward into other layout. */
.nav-products::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 8px;
  pointer-events: none;
}

.nav-products:hover::after,
.nav-products:focus-within::after,
.nav-products[data-open="true"]::after {
  pointer-events: auto;
}

.nav-products:hover .nav-products-menu,
.nav-products:focus-within .nav-products-menu,
.nav-products[data-open="true"] .nav-products-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.nav-products:hover .nav-products-caret,
.nav-products:focus-within .nav-products-caret,
.nav-products[data-open="true"] .nav-products-caret {
  transform: rotate(180deg);
}

.nav-products-menu-item {
  display: block;
  padding: 10px 18px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.01em;
  border-left: 2px solid transparent;
  transition: background 160ms ease, border-color 160ms ease, padding-left 160ms ease;
}

.nav-products-menu-item:hover,
.nav-products-menu-item:focus-visible {
  background: rgba(109, 24, 34, 0.06);
  border-left-color: var(--accent);
  padding-left: 22px;
  outline: none;
}

@media (max-width: 920px) {
  /* Topbar dropdown is hidden on mobile — sidebar handles it. */
  .nav-products {
    display: none;
  }
}

/* ── Mobile sidebar cats list ────────────────────────────────────── */

.nav-sidebar-products {
  padding: 8px 24px 16px;
}

.nav-sidebar-label {
  margin: 0 0 8px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(246, 239, 228, 0.5);
}

.nav-sidebar-cats {
  display: flex;
  flex-direction: column;
}

.nav-sidebar-cats a {
  display: block;
  padding: 9px 0;
  font-size: 0.94rem;
  font-weight: 500;
  color: rgba(246, 239, 228, 0.78);
  border-left: 2px solid transparent;
  padding-left: 12px;
  margin-left: -12px;
  transition: color 180ms ease, border-color 180ms ease, padding-left 180ms ease;
}

.nav-sidebar-cats a:hover,
.nav-sidebar-cats a:focus-visible {
  color: var(--cream);
  border-left-color: var(--gold);
  padding-left: 16px;
  outline: none;
}

.nav-sidebar-logout {
  margin-top: 14px;
  padding: 0 24px;
}

.nav-sidebar-logout .button {
  width: 100%;
  justify-content: center;
}

/* ── Topbar auth controls ────────────────────────────────────────── */

.nav-auth-anon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text);
}

.nav-auth-link {
  color: inherit;
  text-decoration: none;
  padding: 6px 8px;
  transition: color 200ms ease, background 200ms ease;
}

.nav-auth-link:hover,
.nav-auth-link:focus-visible {
  background: rgba(109, 24, 34, 0.06);
  color: var(--accent);
  outline: none;
}

.nav-auth-sep {
  color: var(--text-soft);
  user-select: none;
}

.nav-account {
  position: relative;
  display: inline-flex;
  align-items: stretch;
}

.nav-account-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--line-strong);
  background: rgba(242, 236, 227, 0.96);
  color: var(--text);
  cursor: pointer;
  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    background 220ms ease;
}

.nav-account-trigger:hover,
.nav-account-trigger:focus-visible {
  transform: translateY(-1px);
  box-shadow: 8px 8px 0 rgba(23, 17, 14, 0.12);
  outline: none;
}

.nav-account-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 240px;
  padding: 8px 0;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  box-shadow: 8px 8px 0 rgba(23, 17, 14, 0.12);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 180ms ease, transform 180ms ease;
  z-index: 50;
}

/* Same hover-bridge pattern as the products dropdown — covers the
 * 6px gap so the cursor doesn't leave .nav-account mid-aim. */
.nav-account::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 8px;
  pointer-events: none;
}

.nav-account:hover::after,
.nav-account:focus-within::after,
.nav-account[data-open="true"]::after {
  pointer-events: auto;
}

.nav-account:hover .nav-account-menu,
.nav-account:focus-within .nav-account-menu,
.nav-account[data-open="true"] .nav-account-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.nav-account-greeting {
  margin: 0;
  padding: 8px 18px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
  border-bottom: 1px solid var(--line);
}

.nav-account-menu-item {
  display: block;
  padding: 10px 18px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.01em;
  border-left: 2px solid transparent;
  text-align: left;
  background: transparent;
  border-top: none;
  border-right: none;
  border-bottom: none;
  width: 100%;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, padding-left 160ms ease;
}

.nav-account-menu-item:hover,
.nav-account-menu-item:focus-visible {
  background: rgba(109, 24, 34, 0.06);
  border-left-color: var(--accent);
  padding-left: 22px;
  outline: none;
}

.nav-account-logout {
  margin: 0;
  border-top: 1px solid var(--line);
  padding-top: 4px;
}

.nav-account-menu-button {
  /* The Odjavi-se control is a <button> inside a logout form but
     visually sits as the bottom item of the link list above. The
     sibling class .nav-account-menu-item already sets font-size and
     font-weight; we only need to align font-family (browsers use
     a different stack for <button> by default) and color. */
  font-family: inherit;
  color: var(--text);
}

@media (max-width: 920px) {
  .nav-auth-anon,
  .nav-account {
    display: none;
  }
}

/* ── Auth pages (login / register / account hub / sub-pages) ─────── */

.auth-shell {
  display: grid;
  grid-template-columns: minmax(0, 480px);
  justify-content: center;
}

.auth-panel {
  width: 100%;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.auth-form label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-top: 8px;
}

.auth-form input[type="email"],
.auth-form input[type="text"],
.auth-form input[type="tel"],
.auth-form input[type="password"] {
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.6);
  font-size: 0.96rem;
  color: var(--text);
  transition: border-color 160ms ease, background 160ms ease;
}

.auth-form input:focus-visible {
  border-color: var(--accent);
  background: var(--paper, var(--surface));
  outline: none;
}

.auth-form .button {
  margin-top: 14px;
}

.auth-cross-link {
  margin-top: 18px;
  text-align: center;
  font-size: 0.92rem;
  color: var(--text-soft);
}

.auth-cross-link a {
  color: var(--accent);
  font-weight: 700;
}

.auth-error {
  padding: 10px 14px;
  border: 1px solid rgba(109, 24, 34, 0.34);
  background: rgba(109, 24, 34, 0.08);
  color: var(--accent);
  font-size: 0.92rem;
  margin-bottom: 14px;
}

.auth-field-error {
  margin: -6px 0 10px;
  color: var(--accent);
  font-size: 0.84rem;
  font-weight: 600;
}

.checkout-delivery-note {
  margin: 6px 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: rgba(48, 37, 31, 0.03);
  color: var(--text-soft);
  font-size: 0.9rem;
  line-height: 1.5;
}

.auth-flash {
  padding: 14px 18px;
  border: 1px solid rgba(48, 116, 50, 0.55);
  background: rgba(48, 116, 50, 0.14);
  color: #1f4a22;
  font-size: 1rem;
  line-height: 1.45;
  margin-bottom: 14px;
}

/* Lightweight wrapper for a between-hero-and-content flash banner.
   Page-section's 88px padding swallowed the message in whitespace;
   this sits flush under the hero, full-width, with just enough
   breathing room. */
.page-flash {
  padding: 12px 0 0;
  display: grid;
  gap: 8px;
}
.page-flash .auth-flash {
  margin: 0;
}

/* Variant that places an action button (Pošalji ponovo) on the
   right of the flash message. Wraps to a stacked layout on narrow
   widths. */
.auth-flash-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.auth-flash-row > span {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 500;
}
.auth-flash-form {
  margin: 0;
  flex: 0 0 auto;
}
.auth-flash-form .button {
  white-space: nowrap;
  min-height: 44px;
  padding: 10px 18px;
  color: var(--accent) !important;
  background: #f4ede2 !important;
  border-color: var(--accent) !important;
  /* Lift above the fixed body::before grid overlay (opacity 0.8). */
  position: relative;
  z-index: 1;
}
.auth-flash-form .button:hover,
.auth-flash-form .button:focus-visible {
  color: #fff8f0 !important;
  background: var(--accent) !important;
  border-color: var(--accent-deep) !important;
}

.auth-strength {
  margin-top: -2px;
}

.auth-strength-bar {
  height: 4px;
  background: rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.auth-strength-bar span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width 220ms ease, background 220ms ease;
}

.auth-strength-label {
  margin: 4px 0 0;
  font-size: 0.78rem;
  color: var(--text-soft);
}

.auth-fieldset {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: none;
  padding: 0;
  margin: 12px 0 0;
}

.auth-fieldset legend {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.auth-radio,
.auth-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.94rem;
  color: var(--text);
  cursor: pointer;
}

.auth-company-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}

.auth-danger {
  border-color: rgba(109, 24, 34, 0.4);
}

.button-danger {
  background: linear-gradient(180deg, #8b1f2c 0%, #4a131a 100%);
  border-color: rgba(109, 24, 34, 0.6);
}

.account-hub-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.account-hub-card {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.account-hub-card:hover,
.account-hub-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--accent);
  outline: none;
}

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

/* ── Account merged-page layout: sidebar + main panel ──────────────
   Used by /moj-nalog. Vocabulary mirrors `.nav-sidebar-cats` (left
   accent border on hover, no rounded chrome, gold eyebrow label) so
   it sits inside the same design system as the rest of the site
   instead of looking like a bolted-on settings widget. */
.account-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}
.account-side {
  position: sticky;
  top: 116px;
  padding: 24px;
  border: 1px solid var(--line);
  background: rgba(248, 242, 233, 0.82);
}
.account-side-eyebrow {
  margin: 0 0 14px;
}
.account-side-nav {
  display: flex;
  flex-direction: column;
}
.account-side-link {
  display: block;
  padding: 10px 0 10px 12px;
  margin-left: -12px;
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: color 180ms ease, border-color 180ms ease, padding-left 180ms ease;
}
.account-side-link:hover,
.account-side-link:focus-visible {
  color: var(--accent);
  border-left-color: var(--gold);
  padding-left: 16px;
  outline: none;
}
.account-side-link.is-active {
  color: var(--accent);
  border-left-color: var(--gold);
}
.account-main {
  min-width: 0;
}
.account-panel[hidden] {
  display: none;
}

@media (max-width: 920px) {
  .account-hub-grid {
    grid-template-columns: 1fr;
  }
  .account-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .account-side {
    position: static;
    padding: 0;
    border: 0;
    background: transparent;
  }
  .account-side-eyebrow {
    display: none;
  }
  .account-side-nav {
    flex-direction: row;
    gap: 24px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .account-side-link {
    flex: 0 0 auto;
    margin-left: 0;
    padding: 8px 0;
    border-left: 0;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
  }
  .account-side-link:hover,
  .account-side-link:focus-visible {
    padding-left: 0;
    border-left: 0;
    border-bottom-color: var(--gold);
  }
  .account-side-link.is-active {
    border-left: 0;
    border-bottom-color: var(--gold);
  }
}

/* ── Cart drawer + nav cart icon ─────────────────────────────────── */

.nav-cart-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--line-strong);
  background: rgba(242, 236, 227, 0.96);
  color: var(--text);
  cursor: pointer;
  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    background 220ms ease;
}

.nav-cart-trigger:hover,
.nav-cart-trigger:focus-visible {
  transform: translateY(-1px);
  box-shadow: 8px 8px 0 rgba(23, 17, 14, 0.12);
  outline: none;
}

.nav-cart-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #fff8f0;
  font-family: 'Manrope', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 999px;
}

/* Drawer overlay + panel */
.cart-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(23, 17, 14, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
  z-index: 90;
}

.cart-drawer-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 92vw);
  background: var(--surface);
  border-left: 1px solid var(--line-strong);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 240ms ease;
  z-index: 100;
}

.cart-drawer.is-open {
  transform: translateX(0);
}

.cart-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px;
  border-bottom: 1px solid var(--line);
}

.cart-drawer-header h2 {
  margin: 0;
  font-family: 'EB Garamond', serif;
  font-size: 1.4rem;
}

.cart-drawer-close {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}

.cart-drawer-close:hover,
.cart-drawer-close:focus-visible {
  background: rgba(0, 0, 0, 0.04);
  border-color: var(--line-strong);
  outline: none;
}

.cart-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px;
}

.cart-drawer-empty {
  margin: 0;
  padding: 24px 0;
  text-align: center;
  color: var(--text-soft);
}

.cart-drawer-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cart-drawer-line {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.cart-drawer-line:last-child {
  border-bottom: none;
}

.cart-drawer-line-image img {
  width: 100%;
  height: 80px;
  object-fit: cover;
  border: 1px solid var(--line);
}

.cart-drawer-line-title {
  margin: 0 0 4px;
  font-weight: 600;
}

.cart-drawer-line-title a {
  color: var(--text);
  text-decoration: none;
}

.cart-drawer-line-title a:hover {
  color: var(--accent);
}

.cart-drawer-line-qty {
  margin: 0;
  font-size: 0.86rem;
  color: var(--text-soft);
}

.cart-drawer-line-stale {
  margin: 4px 0 0;
  font-size: 0.78rem;
  color: var(--accent);
  font-weight: 600;
}

.cart-drawer-line-unavail {
  margin: 4px 0 0;
  font-size: 0.78rem;
  color: var(--accent);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.cart-drawer-footer {
  border-top: 1px solid var(--line);
  padding: 18px 24px 24px;
}

.cart-drawer-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0 0 14px;
  font-size: 0.94rem;
}

.cart-drawer-total strong {
  font-family: "Manrope", sans-serif;
  font-size: 0.94rem;
  font-weight: 700;
}

.cart-drawer-total-gross {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0 0 14px;
  font-size: 0.94rem;
}

.cart-drawer-total-gross > span {
  font-family: "Manrope", sans-serif;
  font-size: 0.94rem;
}

.cart-drawer-total-gross > span:last-child {
  font-weight: 700;
}

.cart-drawer-line-remove {
  margin: 6px 0 0;
}

.cart-drawer-line-remove button {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  font-size: 0.82rem;
  color: var(--text-soft);
  text-decoration: underline;
  cursor: pointer;
}

.cart-drawer-line-remove button:hover {
  color: var(--accent);
}

.cart-drawer-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.cart-drawer-actions .button {
  width: 100%;
  justify-content: center;
}

/* Add-to-cart disabled state */
.button-disabled,
.button[disabled] {
  background: rgba(48, 37, 31, 0.18);
  border-color: rgba(48, 37, 31, 0.18);
  color: var(--text-soft);
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}

.button-disabled:hover,
.button[disabled]:hover {
  transform: none;
  box-shadow: none;
}

/* ── /korpa page ─────────────────────────────────────────────────── */

.cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 24px;
  align-items: start;
}

.cart-lines {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cart-banner {
  margin: 0;
  padding: 14px 18px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 246, 215, 0.6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.cart-banner-warn strong {
  color: var(--accent);
}

.cart-banner-action {
  margin-left: auto;
}

.cart-banner-action .button {
  padding: 10px 18px;
  min-height: 0;
}

.cart-line {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr) 220px;
  gap: 18px;
  padding: 18px;
  align-items: start;
}

.cart-line-image img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border: 1px solid var(--line);
}

.cart-line-title {
  margin: 0 0 8px;
  font-size: 1.1rem;
}

.cart-line-title a {
  color: var(--text);
  text-decoration: none;
}

.cart-line-title a:hover {
  color: var(--accent);
}

.cart-line-sku {
  margin: 0 0 6px;
  font-size: 0.78rem;
  color: var(--text-soft);
  letter-spacing: 0.06em;
}

.cart-line-attrs {
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cart-line-attrs li {
  padding: 3px 9px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.5);
  font-size: 0.76rem;
  color: var(--text-soft);
}

.cart-line-stale {
  margin: 8px 0 0;
  font-size: 0.86rem;
  color: var(--accent);
}

.cart-line-stale s {
  opacity: 0.6;
}

.cart-line-unavail {
  margin: 8px 0 0;
  padding: 6px 10px;
  background: rgba(109, 24, 34, 0.08);
  border: 1px solid rgba(109, 24, 34, 0.34);
  color: var(--accent);
  font-size: 0.86rem;
  font-weight: 600;
}

.cart-line-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cart-line-qty-form {
  display: flex;
  align-items: end;
  gap: 6px;
}

.cart-line-qty-form label {
  display: flex;
  flex-direction: column;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
  gap: 4px;
}

.cart-line-qty-form input {
  width: 70px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  font-size: 0.94rem;
}

.cart-line-qty-form .button,
.cart-line-remove .button {
  padding: 9px 14px;
  min-height: 0;
  font-size: 0.82rem;
}

.cart-line-price,
.cart-line-subtotal {
  display: flex;
  justify-content: space-between;
  margin: 0;
  font-size: 0.86rem;
  border-top: 1px dashed var(--line);
  padding-top: 6px;
}

.cart-line-price span,
.cart-line-subtotal span {
  color: var(--text-soft);
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}

.cart-summary {
  position: sticky;
  top: 24px;
}

/* Iznos porudžbine — flat flex rows so the grand-total separator
 * spans the full container width (CSS-grid column-gap leaves a
 * visible break). Each row is a single flex element with label and
 * value on opposite ends, sharing one font and one baseline. */
.cart-summary-totals {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: 'Manrope', sans-serif;
  font-size: 0.94rem;
}

.cart-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
}

.cart-summary-label {
  color: var(--text-soft);
  font-weight: 500;
}

.cart-summary-value {
  font-weight: 600;
  color: var(--text);
  text-align: right;
}

.cart-summary-grand {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.cart-summary-grand .cart-summary-label,
.cart-summary-grand .cart-summary-value {
  font-weight: 700;
  color: var(--text);
}

/* Dev-only: hide the Turnstile widget (and its "Samo za testiranje"
 * banner) entirely. The widget script still runs and adds the
 * cf-turnstile-response field to the form, so submit succeeds; we
 * just don't clutter the form in dev. */
.cf-turnstile-dev-hidden {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* ── Recently viewed (product page right column) ─────────────── */

.product-recent-panel {
  padding: 22px 24px;
}

.product-recent-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.product-recent-item {
  margin: 0;
}

.product-recent-link {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 8px 0;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: background 160ms ease;
}

.product-recent-item:last-child .product-recent-link {
  border-bottom: none;
}

.product-recent-link:hover,
.product-recent-link:focus-visible {
  background: rgba(109, 24, 34, 0.04);
  outline: none;
}

.product-recent-thumb img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border: 1px solid var(--line);
}

.product-recent-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.product-recent-display {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-recent-price {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-soft);
}

.product-recent-link:hover .product-recent-display {
  color: var(--accent);
}

/* ── Similar products section (product page) ─────────────────── */

/* `.page-section` already supplies 88px top/bottom padding. Add only
 * a top border above that padding for visual separation from the
 * product details panels. */
.product-similar-section {
  border-top: 1px solid var(--line);
}

.product-similar-heading {
  margin-bottom: 28px;
  max-width: 720px;
}

.product-similar-heading .section-title {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  margin-top: 8px;
}

.product-similar-grid {
  /* Always 4 columns on desktop — even when fewer cards render, the
   * grid keeps them left-aligned at card-width rather than stretching. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1100px) {
  .product-similar-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

/* ── Sticky bottom-right cart pill ────────────────────────────────
 *
 * Matches the rest of the site's vocabulary:
 *   - Sharp 0px corners (per --radius-* tokens)
 *   - Single font (Manrope) throughout, no serif mixing
 *   - Same crimson gradient + offset shadow as `.button`
 *   - Corner-bracket accent like `.detail-panel`
 *
 * Naming: still called "pill" internally for clarity, but visually
 * it's a rectangular badge.
 */
.cart-pill {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 80;
  display: inline-flex;
  align-items: stretch;
  max-width: calc(100vw - 48px);
  border: 1px solid var(--line-strong);
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-deep) 100%);
  color: #fff8f0;
  font-family: 'Manrope', sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 8px 8px 0 rgba(23, 17, 14, 0.18);
  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    opacity 220ms ease;
}

/* Corner-bracket accent — same motif as `.detail-panel::before`. */
.cart-pill::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 14px;
  height: 14px;
  border-top: 2px solid #fff8f0;
  border-left: 2px solid #fff8f0;
  opacity: 0.7;
  pointer-events: none;
}

.cart-pill:hover,
.cart-pill:focus-visible {
  transform: translateY(-2px);
  box-shadow: 10px 10px 0 rgba(23, 17, 14, 0.24);
  outline: none;
}

.cart-pill-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  border-right: 1px solid rgba(255, 248, 240, 0.18);
  font-size: 1rem;
  flex-shrink: 0;
}

.cart-pill-body {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
}

.cart-pill-count,
.cart-pill-total {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  white-space: nowrap;
}

.cart-pill-divider {
  width: 1px;
  height: 14px;
  background: rgba(255, 248, 240, 0.32);
}

.cart-pill-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  margin-left: 2px;
  opacity: 0.8;
  transition: transform 220ms ease, opacity 220ms ease;
}

.cart-pill:hover .cart-pill-arrow,
.cart-pill:focus-visible .cart-pill-arrow {
  transform: translateX(4px);
  opacity: 1;
}

/* Slide-up entrance animation. JS removes `.cart-pill-mounting` on
 * first paint via requestAnimationFrame — except when the drawer is
 * auto-opening (so we don't double-up motion). */
.cart-pill-mounting {
  transform: translateY(calc(100% + 32px));
  opacity: 0;
}

/* Hide the pill while the drawer is open — drawer is the cart now. */
.cart-pill-suppressed {
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
}

/* When the pill is present, expand the footer's bottom padding so
 * its last line doesn't sit beneath the pill. `:has()` is the
 * cleanest signal: body that contains a `.cart-pill` element — the
 * pill is a body-level fixed sibling of `.site-shell`. */
body:has(.cart-pill) .footer {
  padding-bottom: calc(140px + 28px);
}

@media (max-width: 720px) {
  .cart-pill {
    right: 16px;
    bottom: 16px;
    padding: 12px 18px;
    font-size: 0.86rem;
    gap: 10px;
  }
  .cart-pill-total {
    font-size: 1rem;
  }
  body:has(.cart-pill) .footer {
    padding-bottom: calc(120px + 16px);
  }
}

.cart-summary-shipping {
  margin: 18px 0 0;
  padding: 10px;
  background: rgba(0, 0, 0, 0.03);
  font-size: 0.82rem;
  color: var(--text-soft);
}

@media (max-width: 920px) {
  .cart-layout {
    grid-template-columns: 1fr;
  }
  .cart-line {
    grid-template-columns: 100px 1fr;
  }
  .cart-line-controls {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* ── Checkout wizard ─────────────────────────────────────────────── */

.checkout-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-bottom: 24px;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.checkout-step {
  position: relative;
  padding: 8px 14px;
  border-bottom: 2px solid transparent;
  transition: color 200ms ease, border-color 200ms ease;
}

a.checkout-step {
  color: var(--text);
  text-decoration: none;
}

a.checkout-step:hover {
  color: var(--accent);
}

.checkout-step.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 24px;
  align-items: start;
}

.checkout-summary {
  position: sticky;
  top: 24px;
}

.checkout-private-fields,
.checkout-company-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}

.checkout-saved-addresses {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

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

.checkout-saved-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.5);
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
  font: inherit;
}

.checkout-saved-card:hover,
.checkout-saved-card:focus-visible {
  border-color: var(--accent);
  background: rgba(109, 24, 34, 0.04);
  outline: none;
}

.checkout-saved-card strong {
  font-size: 0.92rem;
}

.checkout-saved-card span {
  font-size: 0.82rem;
  color: var(--text-soft);
}

.checkout-divider {
  margin: 22px 0;
  border: none;
  border-top: 1px solid var(--line);
}

.checkout-summary-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.checkout-summary-list span {
  display: inline-block;
  min-width: 130px;
  color: var(--text-soft);
  font-size: 0.82rem;
}

.checkout-lines-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  font-size: 0.92rem;
}

.checkout-lines-table th,
.checkout-lines-table td {
  padding: 10px 8px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.checkout-lines-table th {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.checkout-line-sku {
  display: block;
  font-size: 0.74rem;
  color: var(--text-soft);
  margin-top: 2px;
}

.checkout-submit-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  flex: 1 1 100%;
}

.checkout-submit-form .button {
  width: 100%;
  justify-content: center;
}

@media (max-width: 920px) {
  .checkout-layout {
    grid-template-columns: 1fr;
  }
  .checkout-stepper {
    gap: 8px;
    font-size: 0.74rem;
  }
  .checkout-step {
    padding: 6px 8px;
  }
  .checkout-saved-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Address card actions — wrap on small screens ────────────── */
.address-actions {
  flex-wrap: wrap;
  gap: 8px;
}

.address-summary {
  margin-bottom: 16px;
}

.address-edit-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-top: 8px;
}

.address-edit-form input {
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.6);
  font-size: 0.92rem;
  color: var(--text);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
}

.address-edit-form input:focus-visible {
  border-color: var(--accent);
  outline: none;
}

.account-recent {
  max-width: 720px;
}

.text-soft {
  color: var(--text-soft);
}

/* Stepper: numbered circles for clarity. The number prefix in the
 * label (e.g. "1. Podaci") would otherwise compete with the active
 * underline; a small visual anchor before the text reads better. */
.checkout-step {
  position: relative;
}

.checkout-step.is-active {
  font-weight: 800;
}

.checkout-stepper a.checkout-step::before,
.checkout-stepper span.checkout-step::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--line-strong);
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
  transition: background 200ms ease, transform 200ms ease;
}

.checkout-step.is-active::before {
  background: var(--accent);
  transform: scale(1.6);
}

@media (max-width: 920px) {
  .address-edit-form .card-actions {
    flex-direction: column;
  }
  .address-edit-form .card-actions .button {
    width: 100%;
    justify-content: center;
  }
}




/* ── /o-nama page — scoped overrides ───────────────────────────────
   The site's `.section-heading h2` clamps at clamp(2.8rem, 5vw, 5rem)
   which suits the homepage's marketing tone. On the about page that
   reads as shouting. Scope the override via the .page-onama class
   set on the g-wrap root so no other page is affected. */

.page-onama .section-heading h2,
.page-onama .callout h2,
.page-onama .contact-panel h2 {
  font-size: clamp(1.7rem, 2.6vw, 2.4rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* Right-align each line of the contact column independently. The
   shared .contact-details is a CSS grid, so text-align on the
   container doesn't reach the grid items — each <a>/<p> needs its
   own text-align. justify-items: end pulls each grid item flush to
   the right edge so wrapped lines also sit ragged-left/flush-right. */
.page-onama .contact-details {
  justify-items: end;
  text-align: right;
}
.page-onama .contact-details > * {
  text-align: right;
}

/* Editorial overlay section — full-bleed photographic background
   with text laid over it. The image is set as a true <img> child
   (so g-img/variants drive the source) absolutely positioned to
   fill, with a directional gradient on top for readability. Content
   sits in a constrained editorial column with serif body. */
.page-onama .about-overlay {
  position: relative;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  min-height: clamp(420px, 60vw, 640px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: #fff8f0;
  isolation: isolate;
}
.page-onama .about-overlay-image {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.page-onama .about-overlay-image::after {
  /* Heavier on the bottom-left where the type sits; feathers out
     to the top-right so the landscape and the harvester stay
     visible as the editorial subject of the image. */
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg,
      rgba(11, 8, 6, 0.84) 0%,
      rgba(11, 8, 6, 0.62) 38%,
      rgba(11, 8, 6, 0.22) 70%,
      rgba(11, 8, 6, 0.08) 100%),
    linear-gradient(180deg,
      rgba(11, 8, 6, 0.0) 0%,
      rgba(11, 8, 6, 0.4) 100%);
}
.page-onama .about-overlay-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.page-onama .about-overlay-inner {
  position: relative;
  z-index: 1;
  /* Match .site-shell width exactly so the left edge of overlay
     content aligns with .section / .section-heading on the rows
     above and below. Horizontal padding stays zero — the shell's
     auto margins do the centering. */
  width: var(--container);
  margin: 0 auto;
  padding: 96px 0 88px;
}
.page-onama .about-overlay-eyebrow {
  color: var(--gold);
  margin: 0 0 18px;
}
.page-onama .about-overlay-title {
  margin: 0 0 24px;
  font-family: "EB Garamond", Georgia, serif;
  font-size: clamp(1.7rem, 2.6vw, 2.4rem);
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: #fff8f0;
  font-weight: 500;
  max-width: 28ch;
}
.page-onama .about-overlay-copy {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.06rem;
  line-height: 1.75;
  color: rgba(255, 248, 240, 0.88);
  max-width: 56ch;
}
@media (max-width: 720px) {
  .page-onama .about-overlay-inner { padding: 64px 0 56px; }
  .page-onama .about-overlay-image::after {
    /* On mobile the gradient covers more of the image so 56ch of
       white text remains legible. */
    background:
      linear-gradient(180deg,
        rgba(11, 8, 6, 0.55) 0%,
        rgba(11, 8, 6, 0.85) 100%);
  }
}

/* Full-bleed wrapper for the capability strip. Background spans the
   viewport (escapes .site-shell the same way .page-hero does); the
   inner .capability-strip stays at the shell's content width so the
   four labels keep the same column geometry as before. */
.page-onama .about-strip-band {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: rgba(31, 23, 20, 0.04);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.page-onama .about-strip-band .capability-strip {
  max-width: var(--container);
  margin: 0 auto;
  background: transparent;
  border-top: 0;
  border-bottom: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.page-onama .about-strip-band .capability-strip > div {
  padding: 18px 20px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
}

.page-onama .about-strip-band .capability-strip > div + div {
  border-left: 1px solid var(--line);
}

.page-onama .about-strip-band .capability-strip > div:first-child {
  padding-left: 0;
}

.page-onama .about-strip-band .capability-strip > div:last-child {
  padding-right: 0;
}

@media (max-width: 1100px) {
  .page-onama .about-strip-band .capability-strip {
    grid-template-columns: 1fr 1fr;
  }
  .page-onama .about-strip-band .capability-strip > div + div {
    border-left: 0;
  }
  .page-onama .about-strip-band .capability-strip > div + div {
    border-top: 1px solid var(--line);
  }
}

/* Editorial full-bleed image band. Sits between sections, escapes
   the .site-shell width like .page-hero does, no chrome — just the
   image with a subtle gold rule above & below to tie it to the
   gold-accent vocabulary the rest of the page uses. */
.about-image-band {
  position: relative;
  width: auto;
  margin: 0;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.about-image-band img {
  display: block;
  width: 100%;
  height: clamp(280px, 38vw, 520px);
  object-fit: cover;
  object-position: center;
}
@media (max-width: 920px) {
  .about-image-band img { height: clamp(240px, 56vw, 380px); }
}

/* ── Slice 1 (Revin engine uplift): auth additions ──
   Appended to styles.css. Idempotent — seeder detects the
   sentinel comment above and rewrites the block in place. */

.auth-forgot-row {
  margin: -4px 0 0;
  font-size: 0.85rem;
}

.auth-forgot-row .auth-cross-link {
  font-weight: 500;
}

.auth-field-optional {
  color: var(--text-soft);
  font-weight: 400;
  font-size: 0.85em;
  margin-left: 4px;
}

.auth-otp-input {
  letter-spacing: 0.5em;
  font-family: "Manrope", sans-serif;
  font-variant-numeric: tabular-nums;
  font-size: 1.55rem;
  font-weight: 600;
  text-align: center;
  text-indent: 0.5em;
  padding-block: 14px;
}

.auth-secondary-form {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

/* ── End Slice 1 auth additions ── */

/* ── Slice 2 (Revin engine uplift): account-split additions ──
   Appended to styles.css. Idempotent — seeder detects the
   sentinel comment above and rewrites the block in place. */

/* Sidebar logout form — sits below the 5 nav links with a divider. */
.account-side-logout {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

/* Page-flash row sitting between the hero and the .page-section.
   Reuses page-section padding pattern but with no top margin. */
.page-flash-section {
  padding-top: 0;
  padding-bottom: 0;
}

.page-flash-section > * {
  margin-bottom: 12px;
}

/* When the sidebar collapses to a horizontal scroller on narrow
   widths, the logout form should sit below the nav links rather
   than alongside them. The default block layout already does
   this — no override needed. We only need to make the divider
   span-aware on the narrow layout. */
@media (max-width: 760px) {
  .account-side-logout {
    margin-top: 12px;
    padding-top: 12px;
  }
}

/* ── End Slice 2 account-split additions ── */

/* ── Slice 3 (Revin engine uplift): /poruci checkout additions ──
   Appended to styles.css. Idempotent — seeder detects the
   sentinel comment above and rewrites the block in place. */

/* Quiet anonymous-user hint above the /poruci form. */
.poruci-anon-hint {
  background: rgba(182, 148, 99, 0.06);
  border-color: rgba(182, 148, 99, 0.32);
}

.poruci-anon-hint p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text-soft);
}

/* Mono-uppercase eyebrow header for /poruci section dividers,
   echoing the existing .section-kicker but with a bit more
   vertical breathing room. */
.poruci-section-title {
  margin-top: 22px;
  margin-bottom: 8px;
}

.poruci-section-title:first-of-type {
  margin-top: 0;
}

/* Billing-fields block — appears when "Ista kao isporuka" is
   unchecked. Mirrors checkout-company-fields spacing. */
.poruci-billing-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}

/* Live-validate states on individual form fields. Used by the
   PIB live-mask + phone/email blur heuristics. Adds a colored
   underline that matches the focus ring vocabulary. */
.form-field.is-valid input,
input.is-valid {
  box-shadow: inset 0 -2px 0 var(--gold);
}

.form-field.is-invalid input,
input.is-invalid {
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* ── Customer-type-gated blocks ──
   .is-company-only elements are present in the DOM but hidden by
   default so they never flash visible before JS runs. The form
   gets `.is-cust-company` when the company radio is active (set by
   the checkout JS on load + on radio change). We use a scoped
   :not() selector so each block's natural display value is
   preserved when shown — `.checkout-company-fields` wants flex,
   `.auth-checkbox` wants flex, the saveCompany <label> wants flex.
   A naive `.is-cust-company .is-company-only { display: block }`
   override would kill flex layout on the company-fields block and
   collapse labels+inputs into inline flow. */
.auth-form:not(.is-cust-company) .is-company-only {
  display: none;
}

/* ── Form controls beyond the four input types ──
   .auth-form already styles input[type=email|text|tel|password].
   On /poruci the form also uses <select> and <textarea>, which
   were inheriting browser defaults (white box, sans-serif, no
   border). Match them to the existing input idiom. */
.auth-form select,
.auth-form textarea {
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.6);
  font: inherit;
  font-size: 0.95rem;
  color: var(--text);
  width: 100%;
  box-sizing: border-box;
}

.auth-form select {
  /* Native <select> sizing is jumpy across browsers; pin the
     height to match the input row. */
  height: 46px;
  /* Show the platform caret. We don't custom-style the dropdown
     menu — that's a deep rabbit hole, and the native look is fine
     against this cream palette. */
  appearance: auto;
}

.auth-form textarea {
  min-height: 96px;
  resize: vertical;
  line-height: 1.55;
  font-family: Georgia, "Times New Roman", serif;
}

.auth-form select:focus-visible,
.auth-form textarea:focus-visible {
  border-color: var(--accent);
  background: var(--paper, var(--surface));
  outline: none;
}

/* ── End Slice 3 checkout additions ── */

/* ── Revin UI fixes (post-Slice-6) ──
   Appended to styles.css. Idempotent — seeder detects the sentinel
   comment above and rewrites the block in place. */

/* Footer extends its dark background across the cart-pill padding
   reserve. Without this, the body's cream gradient paints through
   the 168px strip below `.footer-main` when the cart pill is
   present, leaving a visible cream band beneath a dark footer. */
.footer {
  background: rgb(13, 9, 8);
}

/* ── End Revin UI fixes ── */