/* =========================================================================
   VINEL — Page-specific styles
   ========================================================================= */

/* ---------- Hero (full viewport slider) ---------- */
.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  min-height: 620px;
  padding-top: var(--header-h);
  padding-bottom: clamp(var(--s-48), 7vh, var(--s-80));
  overflow: hidden;
  background: var(--char);
  color: var(--paper);
  display: flex; flex-direction: column;
  justify-content: center;
}
.hero__slides {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero__slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1200ms var(--ease-out);
}
.hero__slide.is-active { opacity: 1; z-index: 1; }

/* Full-bleed background image — premium treatment. Photos read clearly;
   text legibility is enforced by the left-side scrim, not by darkening the
   image globally. */
.hero__slide-bg {
  position: absolute; inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  /* Editorial pass: slight desaturation + a touch darker so bright amateur
     photos don't blow out and white text stays readable on every slide. */
  filter: grayscale(0.06) saturate(0.95) brightness(0.9) contrast(1.06);
  transform: scale(1.04);
  transform-origin: 55% 50%;
  will-change: transform;
}
.hero__slide.is-active .hero__slide-bg {
  animation: hero-kenburns 12s ease-out forwards;
}
@keyframes hero-kenburns {
  0%   { transform: scale(1.04); }
  100% { transform: scale(1.14); }
}

/* Warm volt glow only (no global multiply that flattens the photos). */
.hero__slide-duotone {
  position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 72% 52%, rgba(220,35,51,0.08) 0%, transparent 55%);
  mix-blend-mode: screen;
  pointer-events: none;
}

/* Master scrim: strong on the LEFT (text side) so the wordmark/stats stay
   crisp; almost transparent over the product so the imagery reads bright.
   Tiny bottom darken keeps dots/caption legible. */
.hero__scrim {
  position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(90deg,
      rgba(11,11,7,0.94) 0%,
      rgba(11,11,7,0.86) 26%,
      rgba(11,11,7,0.58) 46%,
      rgba(11,11,7,0.34) 64%,
      rgba(11,11,7,0.20) 82%,
      rgba(11,11,7,0.24) 100%),
    linear-gradient(180deg,
      rgba(11,11,7,0.14) 0%,
      transparent 20%,
      transparent 78%,
      rgba(11,11,7,0.40) 100%);
  pointer-events: none;
}

/* Blueprint grid + grain — the "engineering" texture, kept very faint and
   confined to the LEFT text side so it doesn't darken the product imagery. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  opacity: 0.12;
  background-image:
    linear-gradient(rgba(220,35,51,0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(220,35,51,0.10) 1px, transparent 1px);
  background-size: 64px 64px, 64px 64px;
  background-position: -1px -1px;
  mask-image: linear-gradient(90deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.50) 30%, rgba(0,0,0,0.15) 55%, transparent 75%);
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.50) 30%, rgba(0,0,0,0.15) 55%, transparent 75%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  opacity: 0.08;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.85 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
}

/* Thin volt conductor line that traverses the hero — engineering accent */
.hero__conductor {
  position: absolute; left: 0; right: 0; z-index: 2;
  top: 38%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(220,35,51,0.0) 8%,
    rgba(220,35,51,0.55) 38%,
    rgba(220,35,51,0.85) 52%,
    rgba(220,35,51,0.0) 78%,
    transparent 100%);
  pointer-events: none;
  filter: drop-shadow(0 0 6px rgba(220,35,51,0.4));
}
.hero__conductor::before,
.hero__conductor::after {
  content: ""; position: absolute; top: 50%; width: 6px; height: 6px;
  background: var(--volt); border-radius: 50%;
  transform: translateY(-50%);
  box-shadow: 0 0 10px var(--volt);
}
.hero__conductor::before { left: 38%; }
.hero__conductor::after  { left: 64%; }
.hero__content {
  position: relative; z-index: 3;
  width: 100%;
}
.hero__eyebrow-row {
  display: flex; gap: var(--s-24); flex-wrap: wrap;
  padding-bottom: var(--s-24); border-bottom: 1px solid rgba(255,255,255,0.16);
  margin-bottom: var(--s-40);
}
.hero__eyebrow-row span { font-family: var(--font-mono); font-size: var(--t-12); letter-spacing: var(--ls-mono); text-transform: uppercase; color: rgba(255,255,255,0.65); }
.hero__eyebrow-row span:first-child { color: var(--paper); }
.hero__eyebrow-row .sep { color: rgba(255,255,255,0.32); }

/* Hero nav: dots + caption */
.hero__nav {
  position: absolute; left: 0; right: 0; bottom: clamp(20px, 4vh, 48px); z-index: 4;
  display: flex; justify-content: space-between; align-items: center;
  padding-inline: var(--gutter-x);
  pointer-events: none;
}
.hero__dots {
  display: flex; gap: 10px; pointer-events: auto;
}
.hero__dot {
  width: 36px; height: 2px; padding: 8px 0;
  background-clip: content-box;
  background: rgba(255,255,255,0.28);
  border: 0; cursor: pointer;
  position: relative;
  transition: background var(--d-fast);
}
.hero__dot::after {
  content: ""; position: absolute; left: 0; top: 50%; width: 0; height: 2px;
  background: var(--volt); transform: translateY(-50%);
  transition: width var(--d-slow) var(--ease-out);
}
.hero__dot.is-active::after { width: 100%; }
.hero__dot:hover { background: rgba(255,255,255,0.5); background-clip: content-box; }
.hero__caption {
  font-family: var(--font-mono); font-size: var(--t-12);
  letter-spacing: var(--ls-mono); text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  pointer-events: auto;
  display: flex; align-items: center; gap: 12px;
}
.hero__caption-idx { color: var(--volt); }

@media (max-width: 900px) {
  .hero {
    padding-top: calc(var(--header-h) + var(--s-12));
    padding-bottom: var(--s-64);
  }
  .hero__eyebrow-row { margin-bottom: var(--s-20); padding-bottom: var(--s-12); gap: var(--s-12); }
  .hero__eyebrow-row span { font-size: 10px; letter-spacing: 0.06em; }
  /* Mobile: let the two lines use the full column — an 18ch cap (sized for the
     old short tagline) would break each line into a ragged stack. */
  .hero__tagline { font-size: clamp(1.15rem, 4vw, 1.5rem); margin: var(--s-16) 0 0; max-width: none; }
  .hero__cta { margin-top: var(--s-20); gap: 8px; }
  .hero__cta .btn { padding: 12px 16px; font-size: var(--t-12); }
  .hero__readout { margin-top: var(--s-24); }
  .readout-cell { padding: var(--s-12) var(--s-8) var(--s-8) 15px; }
  .readout-cell__num { font-size: clamp(1.4rem, 5vw, 2rem); }
  /* Mobile: focus the bg image around the products and use a vertical scrim
     so the text overlay (top of viewport) stays legible while the photo
     remains visible toward the bottom. */
  .hero__slide-bg { background-position: 70% 50%; filter: grayscale(0.08) saturate(0.94) brightness(0.86) contrast(1.06); }
  .hero__scrim {
    background:
      linear-gradient(180deg,
        rgba(11,11,7,0.82) 0%,
        rgba(11,11,7,0.52) 34%,
        rgba(11,11,7,0.34) 60%,
        rgba(11,11,7,0.66) 100%);
  }
  .hero::before {
    background-size: 48px 48px, 48px 48px;
    opacity: 0.12;
    mask-image: linear-gradient(180deg, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.6) 50%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.6) 50%, transparent 100%);
  }
  .hero__conductor { display: none; }
  .hero__nav { bottom: 16px; }
  .hero__dots { gap: 6px; }
  .hero__dot { width: 24px; }
  .hero__caption { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__slide { transition: opacity 0ms; }
  .hero__slide-bg { animation: none !important; transform: none !important; }
  .hero__slide.is-active .hero__slide-bg { animation: none !important; transform: none !important; }
}

.hero__wordmark {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(3rem, 9vw, 7.2rem);
  line-height: 0.86;
  letter-spacing: -0.045em;
  color: var(--paper);
  display: block;
}
.hero__wordmark .dot { color: var(--volt); display: inline-block; }
.hero__wordmark .doo { font-size: 0.18em; vertical-align: super; letter-spacing: 0.02em; color: rgba(255,255,255,0.55); margin-left: 0.05em; font-family: var(--font-mono); }

/* Hero logo image (replaces the "VINEL." text wordmark). Sized to stay as
   dominant as the old wordmark; a drop-shadow keeps it crisp over any slide. */
.hero__wordmark--logo { line-height: 1; }
.hero__logo {
  display: block;
  width: auto;
  height: clamp(70px, 11vw, 140px);
  max-width: min(90%, 620px);
  filter: drop-shadow(0 6px 22px rgba(0,0,0,0.45));
  animation: hero-logo-in 900ms var(--ease-out) both;
}
@keyframes hero-logo-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__logo { animation: none; }
}

.hero__tagline {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  /* Wide enough that each of the two lines stays on one line; the longer
     second line ("Delovi za liftove David Pajić i Rade Končar") is ~43ch. */
  max-width: 46ch;
  margin: var(--s-24) 0 0;
  color: rgba(255,255,255,0.92);
}
/* The H1 renders as two lines — one block per line. */
.hero__tagline-line { display: block; }
.hero__tagline-line + .hero__tagline-line { margin-top: 0.18em; }

.hero__readout {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(255,255,255,0.18);
  margin-top: var(--s-40);
}
.readout-cell {
  /* 15px left offset on every cell pushes the numbers + labels clear of the
     vertical divider tick that comes before each column. */
  padding: var(--s-20) var(--s-12) var(--s-12) 15px;
  display: flex; flex-direction: column; gap: var(--s-8);
  border-right: 1px solid rgba(255,255,255,0.18);
}
.readout-cell:last-child { border-right: 0; }
.readout-cell__num { font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 0.95; letter-spacing: -0.025em; color: var(--paper); font-weight: 500; }
.readout-cell__label { font-family: var(--font-mono); font-size: var(--t-12); letter-spacing: var(--ls-mono); color: rgba(255,255,255,0.55); text-transform: uppercase; }

.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-12); margin-top: var(--s-32); }

/* Hero CTAs: paper-tinted to read on dark hero */
.hero .btn--ghost { color: var(--paper); border-color: rgba(255,255,255,0.50); }
.hero .btn--ghost::before { background: var(--paper); }
.hero .btn--ghost:hover { color: var(--ink); border-color: var(--paper); }

/* Wordmark animated voltage line */
.hero__line {
  position: relative; height: 2px; background: rgba(255,255,255,0.20);
  margin-block: var(--s-12);
  overflow: hidden;
  max-width: 540px;
}
.hero__line::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, var(--volt) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: line-charge 4.2s var(--ease-out) infinite;
}
@keyframes line-charge {
  0% { transform: translateX(-100%); }
  60%, 100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__line::after { animation: none; }
}

@media (max-width: 600px) {
  .hero__readout { grid-template-columns: repeat(2, 1fr); }
  .readout-cell:nth-child(2) { border-right: 0; }
  .readout-cell:nth-child(1), .readout-cell:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,0.18); padding-bottom: var(--s-16); }
  .readout-cell:nth-child(3), .readout-cell:nth-child(4) { padding-top: var(--s-16); }
  /* Keep the 15px offset consistent across both columns on mobile. */
  .readout-cell { padding-left: 15px; }
}

/* ---------- Category showcase tiles ---------- */
.cat-show + .cat-show { margin-top: clamp(64px, 7vw, 120px); }
.cat-show__head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: var(--s-32);
  padding-bottom: var(--s-24); border-bottom: 1px solid var(--line);
  margin-bottom: var(--s-32);
}
.cat-show__head-l { display: flex; flex-direction: column; gap: 12px; }
.cat-show__idx { font-family: var(--font-mono); font-size: var(--t-12); letter-spacing: var(--ls-mono); color: var(--steel); text-transform: uppercase; }
.cat-show__title { font-family: var(--font-display); font-size: var(--t-44); line-height: 1; letter-spacing: -0.025em; font-weight: 500; margin: 0; }
.cat-show__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--grid-gap);
}
@media (max-width: 1100px) { .cat-show__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .cat-show__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px)  { .cat-show__grid { grid-template-columns: 1fr; } }

.cat-tile {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: border-color var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out);
}
.cat-tile__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--paper-2);
  display: grid; place-items: center;
  padding: 22px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.cat-tile__media img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  mix-blend-mode: multiply;
  filter: saturate(0.78) contrast(1.02);
  transition: transform 600ms var(--ease-out), filter 400ms var(--ease-out);
}
.cat-tile {
  box-shadow: 0 1px 0 rgba(23,23,15,0.02), 0 6px 24px -16px rgba(23,23,15,0.18);
}
.cat-tile:hover {
  border-color: var(--ink);
  box-shadow: 0 1px 0 rgba(23,23,15,0.04), 0 22px 50px -22px rgba(23,23,15,0.28);
  transform: translateY(-2px);
}
.cat-tile:hover .cat-tile__media img { transform: scale(1.06); filter: saturate(1) contrast(1.02); }

/* SVG-cover tile: no multiply blend, slightly softer paper field. */
.cat-tile--cover .cat-tile__media {
  background:
    radial-gradient(140% 80% at 50% 40%, rgba(220,35,51,0.05) 0%, transparent 65%),
    linear-gradient(165deg, #F3F0E5 0%, #E7E4D6 100%);
}
.cat-tile--cover .cat-tile__media img {
  mix-blend-mode: normal;
  max-width: 72%; max-height: 72%;
  opacity: 0.94;
}
.cat-tile__row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; gap: 12px;
}
.cat-tile__name {
  font-family: var(--font-display); font-size: var(--t-15);
  line-height: 1.2; letter-spacing: -0.005em; font-weight: 500; color: var(--ink);
}
.cat-tile__count {
  font-family: var(--font-mono); font-size: var(--t-12); letter-spacing: var(--ls-mono-tight); color: var(--steel);
}
/* Voltage sweep line on hover */
.cat-tile::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--volt); transform: scaleX(0); transform-origin: left;
  transition: transform 600ms var(--ease-out);
}
.cat-tile:hover::after { transform: scaleX(1); }

/* ---------- Featured strip (marquee) ---------- */
.featured-strip {
  position: relative;
  padding-block: clamp(var(--s-80), 9vw, var(--s-120));
  background: var(--char);
  color: #ECEAE0;
  overflow: hidden;
}
.featured-strip::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: rgba(255,255,255,0.10);
}
.fstrip {
  position: relative;
  margin-top: var(--s-24);
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.fstrip__track {
  display: flex; gap: 20px; padding-block: var(--s-8);
  width: max-content;
  animation: fstrip-roll 60s linear infinite;
  animation-play-state: paused;
  will-change: transform;
}
.fstrip__track.is-running { animation-play-state: running; }
@keyframes fstrip-roll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(calc(-1 * var(--fstrip-w, 50%))); }
}
@media (prefers-reduced-motion: reduce) {
  .fstrip__track { animation: none; }
  .fstrip { mask-image: none; }
}
.fstrip__card {
  display: grid; grid-template-columns: 92px 1fr;
  gap: 14px;
  width: 320px;
  padding: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  transition: background var(--d-fast), border-color var(--d-fast);
  flex-shrink: 0;
}
.fstrip__card:hover { background: rgba(255,255,255,0.07); border-color: var(--volt); }
.fstrip__media {
  width: 92px; height: 92px;
  background: var(--surface);
  display: grid; place-items: center;
  padding: 6px;
}
.fstrip__media img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.fstrip__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fstrip__top { display: flex; justify-content: space-between; gap: 8px; }
.fstrip__sifra { font-family: var(--font-mono); font-size: var(--t-12); letter-spacing: var(--ls-mono-tight); color: rgba(255,255,255,0.85); }
.fstrip__brand { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--volt); text-align: right; }
.fstrip__title {
  font-family: var(--font-display); font-size: var(--t-14); line-height: 1.25;
  color: #fff;
  white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
}
.fstrip__cat { font-family: var(--font-mono); font-size: var(--t-12); letter-spacing: var(--ls-mono-tight); color: rgba(255,255,255,0.5); text-transform: uppercase; }

/* ---------- Parallax band ---------- */
.parallax-band {
  position: relative;
  overflow: hidden;
  min-height: clamp(360px, 56vh, 620px);
  display: grid; place-items: center;
  color: #fff;
  isolation: isolate;
}
.parallax-band__media {
  position: absolute; inset: -10% -2% -10% -2%;
  z-index: 0;
}
.parallax-band__img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  filter: grayscale(0.25) brightness(0.72) contrast(1.05);
  transform: scale(1.08);
  will-change: transform;
}
.parallax-band__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(80% 60% at 30% 50%, rgba(11,11,7,0.86) 0%, rgba(11,11,7,0.6) 60%, rgba(11,11,7,0.85) 100%),
    linear-gradient(180deg, rgba(11,11,7,0.5) 0%, rgba(11,11,7,0.5) 100%);
}
.parallax-band__content { position: relative; z-index: 2; padding-block: clamp(80px, 9vw, 140px); }
.parallax-band__eyebrow {
  font-family: var(--font-mono); font-size: var(--t-12);
  letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--volt);
  margin-bottom: var(--s-20);
}
.parallax-band__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 4rem); line-height: 1.02; letter-spacing: -0.035em;
  font-weight: 500;
  margin: 0 0 var(--s-24);
  max-width: 20ch;
}
.parallax-band__lede {
  max-width: 56ch; font-size: clamp(1rem, 1.2vw, 1.1rem);
  line-height: 1.6;
  color: rgba(255,255,255,0.78);
}

/* ---------- Section heading ---------- */
.section-head {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--s-32);
  align-items: end;
  padding-bottom: var(--s-32); margin-bottom: var(--s-56);
  border-bottom: 1px solid var(--line);
}
/* Heading with no lede beside it — one full-width column instead of an empty one. */
.section-head--solo { grid-template-columns: minmax(0, 1fr); }
.section-head__title { font-family: var(--font-display); font-size: var(--t-64); line-height: 0.95; letter-spacing: -0.03em; font-weight: 500; margin: var(--s-20) 0 0; }
.section-head__lede { font-size: var(--t-16); color: var(--steel); max-width: 50ch; }
.section-head__meta { font-family: var(--font-mono); font-size: var(--t-12); letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--steel); display: flex; gap: var(--s-12); align-items: center; }

@media (max-width: 760px) {
  .section-head { grid-template-columns: 1fr; gap: var(--s-16); }
  .section-head__lede { padding-top: var(--s-8); }
}

/* ---------- Group block (overview on home / katalog) ---------- */
.group-block { padding-block: clamp(var(--s-64), 7vw, var(--s-120)); border-top: 1px solid var(--line); }
.group-block__head {
  display: grid; grid-template-columns: 100px 1fr auto; gap: var(--s-32); align-items: start;
  padding-bottom: var(--s-40); margin-bottom: var(--s-40); border-bottom: 1px solid var(--line);
}
.group-block__idx { font-family: var(--font-mono); font-size: var(--t-12); letter-spacing: var(--ls-mono); color: var(--steel); text-transform: uppercase; padding-top: var(--s-12); }
.group-block__title { font-family: var(--font-display); font-size: var(--t-64); line-height: 0.95; letter-spacing: -0.03em; font-weight: 500; margin: 0; }
.group-block__desc { font-size: var(--t-16); color: var(--steel); max-width: 64ch; margin-top: var(--s-12); }
.group-block__count { font-family: var(--font-mono); font-size: var(--t-12); letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--ink); white-space: nowrap; padding-top: var(--s-12); }

@media (max-width: 720px) {
  .group-block__head { grid-template-columns: 1fr; gap: var(--s-12); }
}

.cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gap);
}
@media (max-width: 980px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cat-grid { grid-template-columns: 1fr; } }

/* ---------- Katalog page ---------- */
.katalog-head { padding-top: calc(var(--header-h) + var(--s-64)); }
.katalog-head__inner {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s-40);
  align-items: end;
  padding-bottom: var(--s-32); border-bottom: 1px solid var(--line);
}
.katalog-head__title { font-family: var(--font-display); font-size: var(--t-88); line-height: 0.9; letter-spacing: -0.04em; margin: var(--s-20) 0 0; font-weight: 500; }
.katalog-head__sub { font-size: var(--t-18); color: var(--steel); max-width: 56ch; }

.katalog-search { margin-top: var(--s-48); }

/* ---------- Category page ---------- */
.kategorija-head { padding-top: calc(var(--header-h) + var(--s-48)); padding-bottom: var(--s-32); border-bottom: 1px solid var(--line); }
.crumbs { display: flex; gap: var(--s-8); align-items: center; font-family: var(--font-mono); font-size: var(--t-12); letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--steel); }
.crumbs a:hover { color: var(--ink); }
.crumbs span { color: var(--steel-2); }
.kategorija-head__title { font-family: var(--font-display); font-size: var(--t-64); line-height: 0.95; letter-spacing: -0.03em; font-weight: 500; margin: var(--s-20) 0 var(--s-16); }
.kategorija-head__sub { font-size: var(--t-16); color: var(--steel); max-width: 64ch; margin-bottom: var(--s-32); }
.kategorija-head__row {
  display: grid; grid-template-columns: 1fr auto; gap: var(--s-24); align-items: center;
}
.kategorija-head__count { font-family: var(--font-mono); font-size: var(--t-13); letter-spacing: var(--ls-mono-tight); text-transform: uppercase; color: var(--ink); }
.kategorija-head__count span { color: var(--steel); }

.kategorija-tools {
  display: flex; gap: var(--s-12); flex-wrap: wrap;
  padding-block: var(--s-24);
  border-bottom: 1px solid var(--line);
  align-items: center;
}
.kategorija-tools__group { display: flex; gap: var(--s-8); flex-wrap: wrap; align-items: center; }
.kategorija-tools__label { font-family: var(--font-mono); font-size: var(--t-12); letter-spacing: var(--ls-mono); color: var(--steel); text-transform: uppercase; }

.prod-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap);
  padding-block: var(--s-48);
}
@media (max-width: 1100px) { .prod-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .prod-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .prod-grid { grid-template-columns: 1fr; } }

.prod-empty {
  padding: var(--s-64) var(--s-32); text-align: center; border: 1px dashed var(--line-2);
  color: var(--steel); font-family: var(--font-mono); font-size: var(--t-13); letter-spacing: var(--ls-mono-tight); text-transform: uppercase;
}

/* ---------- Product detail page ---------- */
.proizvod {
  padding-top: calc(var(--header-h) + var(--s-32));
  padding-bottom: var(--s-80);
}
.proizvod__crumbs { padding-bottom: var(--s-32); }
.proizvod__main {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(var(--s-32), 4vw, var(--s-80));
}
.proizvod__media {
  background: var(--paper-2); border: 1px solid var(--line);
  aspect-ratio: 1 / 1; display: grid; place-items: center;
  position: relative; padding: var(--s-32);
  overflow: hidden;
}
.proizvod__img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }

/* When the detail page falls back to the branded SVG cover (image-less
   product), present it as an intentional illustration rather than a photo. */
.proizvod__img--cover {
  mix-blend-mode: normal;
  max-width: 78%; max-height: 78%;
  opacity: 0.94;
}
.proizvod__media:has(.proizvod__img--cover) {
  background:
    radial-gradient(140% 80% at 50% 40%, rgba(220,35,51,0.06) 0%, transparent 60%),
    linear-gradient(165deg, #F3F0E5 0%, #E7E4D6 100%);
}

/* Final fallback (no real image AND no category cover) — keep card hairline
   structure with subtle diagonal tone, NO "U pripremi" copy. */
.proizvod__placeholder {
  width: 70%; aspect-ratio: 1;
  border: 1px solid var(--line);
  background:
    repeating-linear-gradient(45deg,
      transparent 0,
      transparent 10px,
      rgba(23,23,15,0.05) 10px,
      rgba(23,23,15,0.05) 11px);
}
.proizvod__sifra-overlay { position: absolute; top: 16px; left: 16px; padding: 4px 8px; background: var(--surface); border: 1px solid var(--line); font-family: var(--font-mono); font-size: var(--t-12); letter-spacing: var(--ls-mono-tight); }
.proizvod__brand-overlay { position: absolute; top: 16px; right: 16px; padding: 4px 8px; background: var(--ink); color: var(--paper); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; }

.proizvod__gallery { display: flex; gap: var(--s-8); margin-top: var(--s-16); flex-wrap: wrap; }
.gallery-thumb { width: 72px; height: 72px; padding: 6px; background: var(--surface); border: 1px solid var(--line); cursor: pointer; display: grid; place-items: center; transition: border-color var(--d-fast); }
.gallery-thumb:hover, .gallery-thumb.is-active { border-color: var(--ink); }
.gallery-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }

.proizvod__title { font-family: var(--font-display); font-size: var(--t-44); line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 var(--s-12); font-weight: 500; }
.proizvod__brand { display: inline-block; font-family: var(--font-mono); font-size: var(--t-12); letter-spacing: var(--ls-mono); text-transform: uppercase; padding: 4px 10px; background: var(--paper-2); border: 1px solid var(--line); color: var(--ink); margin-bottom: var(--s-24); }
.proizvod__desc { color: var(--ink-2); font-size: var(--t-16); line-height: 1.55; margin-bottom: var(--s-32); white-space: pre-line; }
.proizvod__cta { display: flex; gap: var(--s-12); flex-wrap: wrap; margin-bottom: var(--s-32); }

.spec-table { width: 100%; border-collapse: collapse; border-top: 1px solid var(--line); }
.spec-table th, .spec-table td { text-align: left; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: var(--t-14); }
.spec-table th { font-family: var(--font-mono); font-size: var(--t-12); letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--steel); width: 40%; font-weight: 400; }
.spec-table td { font-family: var(--font-mono); font-size: var(--t-13); letter-spacing: var(--ls-mono-tight); color: var(--ink); }

.proizvod__meta { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-24); padding-block: var(--s-32); border-block: 1px solid var(--line); margin-bottom: var(--s-32); }
.proizvod__meta-row { display: flex; flex-direction: column; gap: 4px; }
.proizvod__meta-label { font-family: var(--font-mono); font-size: var(--t-12); letter-spacing: var(--ls-mono); color: var(--steel); text-transform: uppercase; }
.proizvod__meta-value { font-family: var(--font-mono); font-size: var(--t-14); color: var(--ink); }

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

/* Related products */
.related-section { margin-top: var(--s-80); border-top: 1px solid var(--line); padding-top: var(--s-48); }

/* ---------- O nama ---------- */
.about-hero { padding-top: calc(var(--header-h) + var(--s-64)); }
.about-hero__title { font-family: var(--font-display); font-size: var(--t-88); line-height: 0.92; letter-spacing: -0.04em; margin: var(--s-20) 0 0; font-weight: 500; max-width: 18ch; }
/* This heading's longest word ("improvizacije.") is wider than the text column
   on a 360px phone at --t-88, which pushed the page into horizontal scroll.
   Scale it down just below 400px; 400px and up are untouched. Scoped to this
   heading — --t-88 is shared with .h-1 and .katalog-head__title, which fit. */
@media (max-width: 400px) { .about-hero__title { font-size: 14vw; } }
.about-hero__lede { font-size: var(--t-21); color: var(--steel); line-height: 1.5; max-width: 60ch; margin-top: var(--s-32); }

.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line); margin-top: var(--s-80); }
.stats-row .stat { border-top: 0; border-right: 1px solid var(--line); padding: var(--s-32) var(--s-12); }
.stats-row .stat:last-child { border-right: 0; }
@media (max-width: 760px) { .stats-row { grid-template-columns: repeat(2, 1fr); } .stats-row .stat:nth-child(2) { border-right: 0; } .stats-row .stat:nth-child(3) { border-top: 1px solid var(--line); } .stats-row .stat:nth-child(4) { border-top: 1px solid var(--line); } }

.story-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(var(--s-32), 4vw, var(--s-80)); padding-top: var(--s-80); margin-top: var(--s-80); border-top: 1px solid var(--line); }
.story-grid__title { font-family: var(--font-display); font-size: var(--t-44); line-height: 1.05; letter-spacing: -0.02em; font-weight: 500; margin: var(--s-20) 0; }
.story-grid__body { font-size: var(--t-16); color: var(--ink-2); line-height: 1.6; }
.story-grid__body p { margin: 0 0 var(--s-16); }
@media (max-width: 800px) { .story-grid { grid-template-columns: 1fr; } }

/* ---------- Kontakt ---------- */
.contact-hero { padding-top: calc(var(--header-h) + var(--s-64)); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(var(--s-32), 4vw, var(--s-80)); margin-top: var(--s-64); padding-top: var(--s-48); border-top: 1px solid var(--line); }
/* Collapse to one column on narrow screens, like every other grid on the site.
   Without this the contact form was squeezed into a ~137px column on a phone
   and its submit button overflowed the viewport. */
@media (max-width: 800px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-info { display: flex; flex-direction: column; gap: var(--s-32); }
.contact-block {
  display: flex; flex-direction: column; gap: var(--s-8);
  padding-bottom: var(--s-24); border-bottom: 1px solid var(--line);
}
.contact-block__label { font-family: var(--font-mono); font-size: var(--t-12); letter-spacing: var(--ls-mono); color: var(--steel); text-transform: uppercase; }
.contact-block__val { font-family: var(--font-display); font-size: var(--t-21); color: var(--ink); }
.contact-block__val a { display: block; }
.contact-block__val a:hover { color: var(--volt); }

.contact-form { background: var(--surface); border: 1px solid var(--line); padding: clamp(var(--s-24), 3vw, var(--s-40)); }
.contact-form__title { font-family: var(--font-display); font-size: var(--t-32); line-height: 1.1; margin: 0 0 var(--s-12); font-weight: 500; }
.contact-form__lede { color: var(--steel); margin-bottom: var(--s-24); font-size: var(--t-14); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-16); }
@media (max-width: 600px) { .field-row { grid-template-columns: 1fr; } }

.delivery-info { margin-top: var(--s-80); padding-top: var(--s-48); border-top: 1px solid var(--line); }
.delivery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-32); margin-top: var(--s-32); }
.delivery-card { padding: var(--s-24); background: var(--paper-2); border: 1px solid var(--line); }
.delivery-card__head { font-family: var(--font-mono); font-size: var(--t-12); letter-spacing: var(--ls-mono); color: var(--steel); text-transform: uppercase; margin-bottom: var(--s-12); }
.delivery-card__title { font-family: var(--font-display); font-size: var(--t-24); line-height: 1.2; margin-bottom: var(--s-12); font-weight: 500; }
.delivery-card__body { font-size: var(--t-14); color: var(--ink-2); line-height: 1.55; }
.delivery-card__body ul li { padding-left: 16px; position: relative; margin-bottom: var(--s-6); }
.delivery-card__body ul li::before { content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 1px; background: var(--volt); }
@media (max-width: 800px) { .delivery-grid { grid-template-columns: 1fr; } }

/* ---------- Index home sections ---------- */
.home-services { padding-block: clamp(var(--s-80), 8vw, var(--s-120)); }
.services-list { border-bottom: 1px solid var(--line); }
.service:hover { background: var(--paper-2); }
.service:hover .service__arrow { color: var(--volt); }

.about-teaser { padding-block: clamp(var(--s-64), 8vw, var(--s-120)); background: var(--paper-2); }
.about-teaser__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--s-48); align-items: end; }
.about-teaser__num { font-family: var(--font-display); font-size: var(--t-128); line-height: 0.85; letter-spacing: -0.045em; font-weight: 500; }
.about-teaser__num span { color: var(--volt); }
.about-teaser__body p { font-size: var(--t-18); color: var(--ink-2); margin: 0 0 var(--s-16); }
@media (max-width: 760px) { .about-teaser__inner { grid-template-columns: 1fr; } }

/* Final CTA */
.cta-section {
  padding-block: clamp(var(--s-80), 8vw, var(--s-120));
  background: var(--char); color: #ECEAE0; position: relative;
  overflow: hidden;
}
.cta-section__inner { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s-48); align-items: end; }
.cta-section__title { font-family: var(--font-display); font-size: var(--t-64); line-height: 1; letter-spacing: -0.03em; margin: 0; font-weight: 500; max-width: 16ch; color: #fff; }
.cta-section__title .dot { color: var(--volt); }
.cta-section__body { color: var(--steel-2); }
@media (max-width: 800px) { .cta-section__inner { grid-template-columns: 1fr; } }