/* =========================================================
   Bora Sport / Colmar — presentational site stylesheet
   Mobile-first. Editorial, high-contrast, generous whitespace.
   ========================================================= */

:root {
  --color-ink: #12141a;
  --color-navy: #0c1f4d;
  --color-orange: #f2a13a;
  --color-colmar-red: #cf1b2b;
  --color-paper: #faf9f6;
  --color-white: #ffffff;
  --color-line: rgba(18, 20, 26, 0.12);
  --color-muted: #5b6270;
  /* Telo filmske trake. Grafitna, ne crna: klijentov nalaz je bio da traka
     vizuelno nadjačava fotografije artikala — ovo je namerno tiše od ivične
     linije (--color-ink) koja traku uokviruje. */
  --color-film-band: #3a3d44;

  /* Klijent traži Century Gothic svuda (jedan font umesto dosadašnja dva) —
     Century Gothic je Monotype-ov komercijalni font, nije na Google Fonts i ne
     sme se hostovati bez licence, pa je prvi u stacku (radi kod korisnika koji
     ga već imaju lokalno instaliranog preko MS Office), a Jost je učitani
     Google Fonts fallback — najbliži besplatni geometrijski sans sa punim
     rasponom debljina (radi i za teške naslove i za regularan body tekst).
     OTVORENO PITANJE ZA KLIJENTA: privremeno rešenje dok pravi Century Gothic
     fajlovi/licenca ne stignu — videti .m/PLAN.md B9. */
  --font-display: "Century Gothic", "Jost", sans-serif;
  --font-body: "Century Gothic", "Jost", sans-serif;

  --header-height: 72px;
  --container-max: 1280px;
  --gutter: 20px;
  --transition: 220ms ease;
}

@media (min-width: 768px) {
  :root {
    --header-height: 84px;
    --gutter: 32px;
  }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  position: relative;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p, dl, dd { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- Watermark ---------- */
.watermark {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.watermark__word {
  position: absolute;
  width: 160vw;
  max-width: none;
  height: auto;
  opacity: 0.05;
  filter: grayscale(1);
}
.watermark__word--1 { transform: rotate(-8deg) translate(-8vw, -20vh); }
.watermark__word--2 { transform: rotate(-8deg) translate(10vw, 26vh); }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 249, 246, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-line);
}
.site-header__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  height: var(--header-height);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 0 var(--gutter);
}
.brand-logo { justify-self: start; display: flex; align-items: center; }
.brand-logo__img { width: 120px; height: auto; }
.colmar-logo { justify-self: center; display: flex; align-items: center; }
.colmar-logo__img { width: 36px; height: auto; }
.site-header__actions { justify-self: end; display: flex; align-items: center; gap: 16px; }

@media (min-width: 640px) {
  .brand-logo__img { width: 160px; }
  .colmar-logo__img { width: 46px; }
}

.lang-toggle {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.06em;
  border: 1px solid var(--color-line);
  padding: 6px 12px;
  border-radius: 999px;
  transition: border-color var(--transition), background var(--transition);
}
.lang-toggle:hover { border-color: var(--color-ink); }

.hamburger { display: flex; align-items: center; gap: 8px; }
.hamburger__box { position: relative; width: 24px; height: 16px; flex: none; }
.hamburger__line,
.hamburger__line::before,
.hamburger__line::after {
  content: "";
  position: absolute;
  left: 0;
  width: 24px;
  height: 2px;
  background: var(--color-ink);
  transition: transform var(--transition), opacity var(--transition), top var(--transition);
}
.hamburger__line { top: 7px; }
.hamburger__line::before { top: -7px; }
.hamburger__line::after { top: 7px; }
.hamburger[aria-expanded="true"] .hamburger__line { background: transparent; }
.hamburger[aria-expanded="true"] .hamburger__line::before { top: 0; transform: rotate(45deg); background: var(--color-ink); }
.hamburger[aria-expanded="true"] .hamburger__line::after { top: 0; transform: rotate(-45deg); background: var(--color-ink); }

/* ---------- Nav (off-canvas) ---------- */
.site-nav-scrim {
  position: fixed;
  inset: 0;
  background: rgba(10, 12, 16, 0.45);
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
}
.site-nav-scrim.is-open { opacity: 1; pointer-events: auto; }

.site-nav {
  position: fixed;
  top: 0;
  right: 0;
  height: 100dvh;
  width: min(400px, 88vw);
  background: var(--color-ink);
  color: var(--color-white);
  z-index: 100;
  padding: calc(var(--header-height) + 16px) 32px 40px;
  transform: translateX(100%);
  transition: transform 340ms cubic-bezier(.22,.61,.36,1);
  overflow-y: auto;
}
.site-nav.is-open { transform: translateX(0); }

.site-nav__close {
  position: absolute;
  top: 20px;
  right: 24px;
  font-size: 32px;
  line-height: 1;
  color: var(--color-white);
}

.site-nav__list { display: flex; flex-direction: column; gap: 28px; }
.site-nav__top-link {
  font-family: var(--font-display);
  /* Was 30px — client asked for the nav menu font a little smaller
     (2026-09-10), same Century Gothic/Jost width concern as the hero title. */
  font-size: 26px;
  letter-spacing: 0.02em;
}
/* Dodaci is a flat top-link (no Muško/Žensko sublist), but client wants it
   to read as the same "kind" of menu item as Odeća/Obuća — matches
   .site-nav__label's dimmed color exactly (2026-09-10). Still a real link
   (unlike the Odeća/Obuća group labels), so :hover below still applies. */
.site-nav__top-link--muted {
  color: rgba(255, 255, 255, 0.55);
}
.site-nav__group { display: flex; flex-direction: column; gap: 12px; }
.site-nav__label {
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.55);
}
.site-nav__sublist { display: flex; flex-direction: column; gap: 10px; padding-left: 4px; }
.site-nav__sublist a { font-size: 16px; color: var(--color-white); }
.site-nav__sublist a:hover,
.site-nav__top-link:hover { color: var(--color-orange); }

/* ---------- Layout shell ---------- */
main { flex: 1; }
.section-heading {
  font-family: var(--font-display);
  font-size: 32px;
  letter-spacing: 0.02em;
  margin-bottom: 20px;
}
/* The sticky header sits on top of everything (z-index 50) — without this,
   jumping to #categories-heading (via .hero__scrollhint or any other
   anchor link) lands the heading exactly behind the header. Must match
   .category-grid's own padding-top (24px) exactly, not just
   var(--header-height): scroll-margin-top only guarantees *at least* this
   much clearance above the target, so the browser picks the minimum
   scroll that satisfies it — with header-height alone, that minimum
   scrolls straight past the grid's real padding (eating it) and lands the
   heading flush against the header anyway, undoing the padding for anchor
   jumps even though it's still there for an ordinary scroll. Adding the
   24px here makes the two consistent. */
#categories-heading {
  scroll-margin-top: calc(var(--header-height) + 24px);
}

/* ---------- Hero ----------
   Normal document flow (no fixed/pinned positioning — see the abandoned
   fixed-height:100svh-backdrop approach this replaced, in git history),
   but floored at one viewport tall (minus the sticky header, which already
   occupies its own flow space above .hero) via min-height below. That
   floor plus .hero__title-row's margin-bottom:auto (further down) is what
   pushes the bottom banner down to sit flush with the viewport's bottom
   edge on first load ("zalepljen za taskbar", client request) without
   position:fixed: on a short viewport it's pure CSS free-space
   distribution, not pinning, so it still scrolls away normally afterward.
   On a tall/narrow viewport where the banners+title already exceed one
   viewport height, min-height simply has no effect and content overflows
   it normally — no clipping either way, unlike the old fixed approach. */
.hero {
  display: flex;
  flex-direction: column;
  /* -3px: .site-header has its own border-bottom on top of --header-height,
     which only covers .site-header__inner's content height. An exact 1px
     correction left zero margin (the bottom banner's border-bottom landed
     flush on the last visible row, no slack), so a subpixel rounding
     difference on the client's actual screen was still clipping it. 3px
     buys visible breathing room instead of an exact-pixel match this tool
     can't fully verify against the client's real render. */
  min-height: calc(100vh - var(--header-height) - 3px);
  min-height: calc(100svh - var(--header-height) - 3px);
  /* align-items default (stretch), not center: the film-strip banners rely on
     the width:100vw + margin-left:calc(50%-50vw) full-bleed trick, which
     assumes normal block position. align-items:center re-centers each flex
     item's already-offset margin box, halving the intended negative margin
     and leaving the banners short of the right edge and off-center from the
     COLMAR title above/below them. Centering of .hero__title (width:auto,
     no full-bleed trick) still comes from text-align:center below. */
  justify-content: flex-start;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  text-align: center;
}
/* 3-column grid, not flex+gap: a flanking link must center itself within
   the *leftover* space on its side of COLMAR (not hug the title), while
   COLMAR itself stays perfectly centered on the row. Two equal 1fr columns
   guarantee that leftover space is identical on both sides regardless of
   viewport width, and justify-self:center on each link then centers it
   within its own column. */
.hero__title-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  /* Absorbs .hero's leftover min-height (see .hero comment above). Auto on
     *both* sides, not just bottom: with only margin-bottom:auto, every
     leftover pixel landed in one lump below the title (COLMAR left
     hugging the top banner, then a large dead gap, then the bottom banner)
     — worst on mobile/tablet, where the flanking .hero__collections-link
     is hidden and .hero__title-row is just the title with nothing to
     balance it. Auto on both margins splits that leftover space evenly
     above and below instead (the standard flexbox single-item-centering
     trick), so COLMAR sits centered between the two banners, proportional
     to both, rather than parked under the top one. */
  margin-top: auto;
  margin-bottom: auto;
}
.hero__title { grid-column: 2; }
.hero__title {
  font-family: var(--font-display);
  /* 68px floor / 18vw / 170px cap (was 110/30vw/270, before that 96/28vw/240).
     Deliberately smaller than either previous version: Century Gothic (the
     first name in --font-display, real on machines that have it installed —
     Claude's own browser-automation environment does NOT have it, so its
     screenshots only ever show the Jost fallback) is a notably WIDE
     geometric sans. The 270px-cap version overflowed .hero's box on the
     client's machine (real Century Gothic) — grid-template-columns' `auto`
     center track has an implicit min-content floor equal to the full
     unbreakable "COLMAR" width, so once that exceeds the 1fr+1fr leftover
     space it spills past .hero (no overflow:hidden there) out to body's
     page-level overflow-x:hidden, which clips it — read by the client as
     "grew, shifted right/down, half cut off". This size leaves real margin
     for a wide font at typical viewport widths; client explicitly OK'd
     shrinking it (2026-09-10) — needs their live visual confirmation since
     Claude cannot render actual Century Gothic to re-check precisely. */
  font-size: clamp(68px, 18vw, 170px);
  line-height: 0.9;
  letter-spacing: 0.02em;
  /* No margin here — spacing above/below comes entirely from
     .film-strip--top's margin-bottom and .film-strip--bottom's margin-top
     (both 16px), so the gap is identical on both sides of the title. A
     leftover margin-bottom here (from the pre-banner design, sized for the
     old subtitle/buttons below it) made the gap under COLMAR bigger than
     the gap above it. */
  margin: 0;
  /* A translateY ink-optical-centering nudge lived here before, calibrated
     for Bebas Neue's unusual metrics — removed 2026-09-10 when the font
     changed to Century Gothic/Jost (.m/PLAN.md B9); line-height:0.9 centers
     the glyphs on its own for a normal-metrics font. Do not re-add a guessed
     nudge without visual confirmation on a machine that actually has
     Century Gothic installed. */
}
/* Flanking "Kolekcije" links beside COLMAR — a desktop-only stand-in for
   .hero__scrollhint below. On a short browser window (a maximized Chrome
   on a common 1366x768 laptop leaves ~650px of page height) the header +
   both banners + title already exceed the visible area, so the scrollhint
   below the bottom banner sits below the fold and is never seen without
   scrolling. Placed here instead, next to the title, it's always visible
   as soon as the title itself is — regardless of window height. Hidden
   below 1100px (tablet/mobile) where there isn't reliably enough room
   beside COLMAR at its clamped size; .hero__scrollhint below the bottom
   banner covers those widths instead (it already fits above the fold
   there — see the mobile viewport check in this task).
   Reuses .hero__scrollhint-label/-arrow (below) for its contents so the
   font size and arrow are pixel-identical to the original below-banner
   version, not a re-styled lookalike. */
.hero__collections-link {
  display: none;
}
@media (min-width: 1100px) {
  .hero__collections-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  /* Pushed to the outer edge of their 1fr column (not centered within it)
     — client asked for the flanking "Kolekcije" links moved further outward,
     away from COLMAR and toward the page edges (2026-09-10). */
  .hero__collections-link--left { justify-self: start; }
  .hero__collections-link--right { justify-self: end; }
}
/* ---------- Film-strip banners (home hero) ----------
   Two continuous-scroll image strips flanking the eyebrow/COLMAR title: one
   above (apparel), one below (footwear). Styled as an actual 35mm film strip
   per client reference (FilmskaTraka.docx) — graphite band bounded by a hairline
   edge rule, perforated top/bottom edges, dividers between frames — not a plain
   image row. The whole chrome is deliberately quieter than the photos it carries
   (client: "fokus mora da bude na artiklima"). Pure CSS (no
   JS/carousel dep, see .m/PLAN.md A1) — each strip's image list is rendered
   doubled by build.mjs (renderFilmStrip) so a translateX(-50%) loop is
   seamless. Full-bleed (ignores .hero's own max-width/padding) via the
   100vw/negative-margin trick. */
.film-strip {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: var(--color-film-band);
  /* Edge rules on both long edges of both strips — the band alone stopped
     abruptly against the paper background with nothing to close it. Same
     thickness and colour as the between-frame divider (picture border-right,
     below) so every line in the strip reads as one consistent graphite gap,
     not a mix of a dark accent line and lighter graphite dividers. */
  border-top: 2px solid var(--color-film-band);
  border-bottom: 2px solid var(--color-film-band);
  overflow: hidden;
}
/* Directional gap, not symmetric: the top banner sticks to the header (no
   margin-top — normal flow already puts it right after the sticky header)
   and only needs breathing room before the title below it. The bottom
   banner sticks to .hero__scrollhint's border-top line below it (no
   margin-bottom) and only needs breathing room after the title above it.
   Kept deliberately tight (not the original 16px) so more of the bottom
   banner + Kolekcije fit above the fold without shrinking the banners
   themselves. Symmetric on both sides of the title, on purpose. */
.film-strip--top { margin-bottom: 8px; }
/* Mobile/tablet only (below the 1100px breakpoint where
   .hero__collections-link takes over and .hero__scrollhint disappears):
   client feedback was that the top banner sitting flush against the header
   and the bottom banner+scrollhint flush against the viewport's bottom
   edge (see .hero's min-height + .hero__title-row's auto margins) read as
   lopsided on a phone-sized screen. A small fixed margin on each end still
   lets the auto-margin split absorb the rest evenly around the title —
   it just stops both banners from touching their respective edges. */
@media (max-width: 1099px) {
  .film-strip--top { margin-top: 56px; }
}
.film-strip--bottom { margin-top: 8px; }
/* Mobile/tablet: separates the bottom banner from .hero__scrollhint right
   below it — they used to sit flush (0 gap), which read as too tight once
   the banner itself already had breathing room on every other side. */
@media (max-width: 1099px) {
  .film-strip--bottom { margin-bottom: 36px; }
}
.film-strip__perf {
  height: 8px;
  /* Sprocket holes: a repeating light-on-band pattern, no extra markup/JS.
     The hole (11px) is wider than the band segment between holes (9px) per
     client request; `transparent` lets .film-strip's own colour through, so the
     gap always tracks the band token. */
  background: repeating-linear-gradient(
    to right,
    var(--color-paper) 0 11px,
    transparent 11px 20px
  );
}
/* Gap between the perforation row and the images: 2px, matching the outer
   edge rules on .film-strip — so the strip reads top-to-bottom as
   line / holes / line / photos / line / holes / line, every "line" the
   same thickness. */
.film-strip__frame { height: 130px; padding: 2px 0; }
.film-strip__track {
  display: flex;
  width: max-content;
  height: 100%;
}
.film-strip__track picture {
  display: block;
  height: 100%;
  /* width comes from the inline aspect-ratio (build.mjs) × height — explicit
     and deterministic, not inferred from the <img> child's intrinsic size. */
  flex: none;
  border-right: 2px solid var(--color-film-band);
}
.film-strip__track img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.film-strip--top .film-strip__track { animation: filmstrip-scroll 52s linear infinite; }
.film-strip--bottom .film-strip__track { animation: filmstrip-scroll-reverse 58s linear infinite; }
@keyframes filmstrip-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes filmstrip-scroll-reverse {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .film-strip__track { animation: none; }
}
@media (min-width: 768px) {
  .film-strip__perf { height: 10px; }
  .film-strip__frame { height: 210px; }
}

/* Thin hint bar below the bottom banner — labels what's below and prompts
   the user to keep scrolling. Normal flow (not pinned to the viewport
   bottom). Click/tap smooth-scrolls to the collections heading (native
   anchor jump, html has scroll-behavior:smooth already). No longer flush
   against the banner — see .film-strip--bottom's mobile-only
   margin-bottom above, which now separates the two. */
.hero__scrollhint {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 0 16px;
  border-top: 1px solid var(--color-line);
  /* Mirrors .film-strip--top's mobile-only margin-top above — pulls the
     bottom banner+hint stack up off the viewport's bottom edge by the same
     amount the top banner is pushed down, so the whole hero reads as
     evenly framed instead of flush top-and-bottom. */
  margin-bottom: 56px;
}
@media (min-width: 1100px) {
  .hero__scrollhint { margin-bottom: 0; }
}
/* Superseded by .hero__collections-link (flanking COLMAR) once there's room
   for it — see that rule's comment. Must come after the base rule above to
   win the cascade at equal specificity. */
@media (min-width: 1100px) {
  .hero__scrollhint { display: none; }
}
.hero__scrollhint-label {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.hero__scrollhint-arrow {
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--color-muted);
  border-bottom: 2px solid var(--color-muted);
  transform: rotate(45deg);
  animation: scrollhint-bounce 1.8s ease-in-out infinite;
}
@keyframes scrollhint-bounce {
  0%, 100% { transform: rotate(45deg) translate(0, 0); }
  50% { transform: rotate(45deg) translate(4px, 4px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__scrollhint-arrow { animation: none; }
}

.category-grid__season {
  font-size: 15px;
  color: var(--color-muted);
  margin: -12px 0 24px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: 0.03em;
  padding: 13px 28px;
  border-radius: 2px;
  border: 1px solid var(--color-ink);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.btn--primary { background: var(--color-ink); color: var(--color-white); }
.btn--primary:hover { background: var(--color-colmar-red); border-color: var(--color-colmar-red); }
.btn--outline { background: transparent; color: var(--color-ink); }
.btn--outline:hover { background: var(--color-ink); color: var(--color-white); }

/* ---------- Category grid (home) ---------- */
.category-grid { max-width: var(--container-max); margin: 0 auto; padding: 24px var(--gutter) 8px; }
/* Desktop keeps the same 24px padding-top as mobile (no override) — the
   "Kolekcije" heading + season line reads as symmetric between the bottom
   banner above it and the category cards below (.category-grid__season's
   own 24px margin-bottom), per client request. An earlier version zeroed
   this out to sit flush against the banner; that's what
   #categories-heading's scroll-margin-top comment below still refers to. */
.category-grid__items {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 640px) {
  .category-grid__items { grid-template-columns: repeat(2, 1fr); }
}
.category-card {
  position: relative;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 4 / 3;
  background-color: var(--color-navy);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
/* Same reasoning as [data-page^="obuca"] .product-card__media above — the
   Obuća tiles' source photo is now a 2/1 crop, not the old ~3/4 portrait,
   so 4/3 would crop into the shoe's toe/heel on the sides. */
.category-card--wide {
  aspect-ratio: 2 / 1;
}
.category-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12,15,20,0) 40%, rgba(12,15,20,0.75) 100%);
  transition: background var(--transition);
}
.category-card:hover .category-card__overlay { background: linear-gradient(180deg, rgba(12,15,20,0.1) 20%, rgba(12,15,20,0.85) 100%); }
.category-card__text {
  position: relative;
  z-index: 1;
  padding: 22px;
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.category-card__cat { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.85; }
.category-card__sub { font-family: var(--font-display); font-size: 34px; letter-spacing: 0.02em; }

/* ---------- Gallery header + grid ---------- */
.gallery-header {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 40px var(--gutter) 8px;
  border-bottom: 1px solid var(--color-line);
  margin-bottom: 8px;
}
.gallery-header__eyebrow {
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 6px;
}
.gallery-header__title {
  font-family: var(--font-display);
  font-size: clamp(36px, 8vw, 64px);
  letter-spacing: 0.02em;
  padding-bottom: 20px;
}

.gallery {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 28px var(--gutter) 96px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 16px;
}
@media (min-width: 640px) {
  .gallery { grid-template-columns: repeat(3, 1fr); gap: 28px 24px; }
}
@media (min-width: 1024px) {
  .gallery { grid-template-columns: repeat(4, 1fr); }
}

.gallery__empty { grid-column: 1 / -1; text-align: center; color: var(--color-muted); padding: 48px 0; }

.product-card { display: flex; flex-direction: column; }
.product-card__media {
  position: relative;
  /* 9/10, not the old 3/4 — the crop script (scripts/crop-products.mjs)
     trims jackets to their natural shape first, which averages close to
     square (measured via scripts/analyze-odeca.mjs). Forcing 3/4 meant
     padding the crop back out with a lot of dead space just to satisfy the
     container; 9/10 needs far less of that, so more of the frame is
     actual product. */
  aspect-ratio: 9 / 10;
  overflow: hidden;
  background: var(--color-line);
}
/* Obuća photos are cropped tight to the shoe (see scripts/crop-products.mjs)
   at a 2/1 ratio, not 9/10 — a shoe shot side-on is inherently landscape, and
   forcing that into a near-square card would let object-fit:cover slice off
   the toe/heel. Scoped by page (both odeća and obuća share bodyClass
   "page-gallery", but page_id differs) rather than a per-card class, since
   every card on an obuća gallery page needs it. */
[data-page^="obuca"] .product-card__media {
  aspect-ratio: 2 / 1;
}
/* Overrides the general 35%-biased-up object-position below — shoes need the
   OPPOSITE bias from pants: the full tread/sole (bottom) matters as much as
   the collar/lacing (top), and true center turned out to lose only a sliver
   of the pull-loop at the very top while keeping the entire sole in frame
   (verified 2026-09-10 by extracting the exact CSS crop window from a real
   boot photo and comparing 35/50/60% by eye — 50% was clearly best; the
   35% used for pants cropped away most of the sole here). */
[data-page^="obuca"] .product-card__media img {
  object-position: center 50%;
}
.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Biased up from center (was implicit 50% 50%) — many FW26 photos (full-
     length pants especially) are framed with almost no white margin around
     the garment, so scripts/crop-products.mjs's trim+grow-toward-ratio logic
     hits the source canvas bounds and can't fully reach the target ratio.
     object-fit:cover then crops whatever's left over equally off the top and
     bottom, which on a tall/narrow photo like that cuts into the waistband —
     more noticeable and more important than losing a bit of hem/shoe at the
     bottom. Client feedback 2026-09-10 ("slika odsečena odozgo", e.g. Šifra
     14000023, 23000001). Low-risk on well-fit photos (jackets etc. already
     near the target ratio) since there's little to crop either way. */
  /* Was 20% — client feedback 2026-09-10 round 2: pants now lose too much off
     the BOTTOM (ankle/shoe visibly gone). 35% is a middle ground between
     that and true center (50%, the original top-crop problem). */
  object-position: center 35%;
  transition: transform 420ms ease;
}
.product-card:hover .product-card__media img { transform: scale(1.045); }
.product-card__season {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(255, 255, 255, 0.92);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 8px;
}
.product-card__body { padding-top: 12px; display: flex; flex-direction: column; gap: 4px; }
.product-card__code { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink); }
.product-card__cta {
  align-self: flex-start;
  margin-top: 4px;
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--color-muted);
}
.product-card:hover .product-card__cta { color: var(--color-ink); }

/* ---------- Contact page ---------- */
.contact { max-width: var(--container-max); margin: 0 auto; padding: 48px var(--gutter) 96px; }
.contact__eyebrow { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 8px; }
.contact__title { font-family: var(--font-display); font-size: clamp(36px, 8vw, 64px); letter-spacing: 0.02em; margin-bottom: 16px; }
.contact__intro { max-width: 60ch; color: var(--color-muted); margin-bottom: 40px; }

.contact__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px) {
  .contact__grid { grid-template-columns: repeat(2, 1fr); }
}

.contact__card {
  border: 1px solid var(--color-line);
  padding: 28px;
  background: rgba(255, 255, 255, 0.6);
}
.contact__company {
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: 0.02em;
  margin-bottom: 18px;
}
.contact__facts { display: flex; flex-direction: column; gap: 14px; }
.contact__facts dt { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 2px; }
.contact__facts dd { font-size: 16px; }
.contact__card--reach { display: flex; flex-direction: column; }
.contact__card--reach .btn { margin-top: 22px; align-self: flex-start; }
.contact__placeholder-note {
  margin-top: 16px;
  font-size: 12px;
  color: var(--color-muted);
  border-top: 1px dashed var(--color-line);
  padding-top: 12px;
}

/* ---------- About pages (O nama / O Brendu) ---------- */
.about { max-width: var(--container-max); margin: 0 auto; padding: 48px var(--gutter) 96px; }
.about__eyebrow { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 8px; }
.about__title { font-family: var(--font-display); font-size: clamp(36px, 8vw, 64px); letter-spacing: 0.02em; margin-bottom: 24px; }
.about__body { max-width: 68ch; display: flex; flex-direction: column; gap: 16px; color: var(--color-muted); font-size: 16px; }
/* .section-heading's own margin-bottom (20px, correct for its other use on
   the home page) would otherwise stack on top of .about__body's 16px flex
   gap, making the gap after each O Brendu subheading ~36px — visibly larger
   than the 16px between two plain paragraphs. Reset to 0 here so every gap
   in the flex column is the same 16px, subheading or not (client feedback
   2026-09-10: "ujednači razmake"). */
.about__body .section-heading { margin-bottom: 0; }

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--color-line);
  background: rgba(255, 255, 255, 0.5);
}
.site-footer__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 44px var(--gutter) 28px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
@media (min-width: 768px) {
  /* Even 1fr 1fr now that site-footer__nav is removed (see .m/PLAN.md
     A5/T5) — was 1.2fr 1fr 1fr for three columns (brand, company, nav).
     Two columns inherited that 1.2fr lean on the first one, which no
     longer has a third column to balance against — it just reads as the
     right (company/address) column sitting off-center. Equal fractions
     split the row symmetrically instead. */
  .site-footer__inner { grid-template-columns: 1fr 1fr; }
}
.site-footer__logo { width: 130px; margin-bottom: 10px; }
.site-footer__tagline { color: var(--color-muted); font-size: 14px; max-width: 32ch; }
.site-footer__company-name { font-family: var(--font-display); font-size: 17px; letter-spacing: 0.02em; margin-bottom: 6px; }
.site-footer__company p { font-size: 14px; color: var(--color-muted); margin-bottom: 2px; }
.site-footer__bottom {
  border-top: 1px solid var(--color-line);
  padding: 16px var(--gutter);
  text-align: center;
}
.site-footer__bottom p { font-size: 12px; color: var(--color-muted); }

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