/* Catalog + product pages. Mirrors the Figma file "Iviemme": every value below is a
   token from its variable collections (Color Primitives, Color Tokens, Typography,
   Spacing, Radius). Change a token here, not the rules further down. */

:root {
  /* Color Primitives */
  --brand-paper: #FBFFFA;
  --brand-paper-16: rgba(251, 255, 250, 0.16);
  --brand-black-40: rgba(0, 0, 0, 0.4);
  --brand-ink: #262827;
  --brand-black: #000000;

  /* Color Tokens */
  --colors-background: var(--brand-paper);
  --colors-text-primary: var(--brand-ink);
  --colors-text-strong: var(--brand-black);
  --colors-text-inverse: var(--brand-paper);
  --colors-action: var(--brand-black);
  --colors-border: var(--brand-black);
  --colors-hover-overlay: var(--brand-paper-16);
  --colors-shadow: var(--brand-black-40);

  /* Typography */
  --font-family-primary: 'Geologica', sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-black: 900;
  --font-size-md: 16px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-5xl: 48px;
  --letter-spacing-wide: 0.03em; /* 3% in Figma */

  /* Spacing */
  --spacing-0: 0;
  --spacing-xs: 8px;
  --spacing-base: 16px;
  --spacing-md: 24px;
  --spacing-lg: 32px;
  --spacing-xl: 40px;

  /* Shadow (white logo / back link over photos) */
  --shadow-offset-y: 1px;
  --shadow-blur: 6px;

  /* Radius */
  --radius-none: 0;

  /* Layout (from the Figma frames) */
  --gallery-share: 66.667%;       /* page = 3 equal columns: gallery, gallery, info (853px of 1280px) */
  --gallery-tile-ratio: 3 / 4;     /* portrait photos (207 of 221 are 3:4): 410 x 547, no cropping */
  --gallery-full-ratio: 3 / 4;     /* odd last photo spans both columns at the same 3:4 ratio */
  --mark-w: 87px;
  --mark-h: 40px;
  --hover-duration: 200ms;
}

* { margin: 0; padding: 0; box-sizing: border-box; border-radius: var(--radius-none); }

html { background: var(--colors-background); }

body {
  min-height: 100vh;
  background: var(--colors-background);
  color: var(--colors-text-primary);
  font-family: var(--font-family-primary);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { display: block; }
[hidden] { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

:focus-visible { outline: 2px solid var(--colors-border); outline-offset: 2px; }

/* ---------- Shared pieces ---------- */

.logo { display: block; width: 100%; height: 100%; }
.icon { display: block; width: 24px; height: 24px; flex: none; }

.mark {
  display: block; width: var(--mark-w); height: var(--mark-h);
  color: var(--colors-text-inverse); z-index: 5;
  filter: drop-shadow(0 var(--shadow-offset-y) var(--shadow-blur) var(--colors-shadow));
}

.btn {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-xs) var(--spacing-base);
  background: var(--colors-background);
  border: 0;
  box-shadow: inset 0 0 0 2px var(--colors-border); /* Figma strokes sit inside: 40px tall, not 44 */
  color: var(--colors-action);
  font: var(--font-weight-medium) var(--font-size-xl) / 1.2 var(--font-family-primary);
  letter-spacing: var(--letter-spacing-wide);
  white-space: nowrap;
  cursor: pointer;
}

/* ---------- Catalog (Figma: Listing / Tablet / Mobile) ---------- */

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

.tile {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--colors-background);
}

.tile img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* 1px border on every tile, drawn above the photo */
.tile::before {
  content: '';
  position: absolute; inset: 0; z-index: 2;
  box-shadow: inset 0 0 0 1px var(--colors-border);
  pointer-events: none;
}

/* Hover state: a subtle lighten (Figma Tile / State=Hover) */
.tile::after {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background: var(--colors-hover-overlay);
  opacity: 0;
  transition: opacity var(--hover-duration) ease-out;
  pointer-events: none;
}
.tile:hover::after,
.tile:focus-visible::after { opacity: 1; }

.mark--fixed {
  position: fixed;
  top: var(--spacing-xl);
  left: 50%;
  transform: translateX(-50%);
}

.btn--fixed-bottom {
  position: fixed;
  bottom: var(--spacing-xl);
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
}

.missing {
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--spacing-base);
  font-size: var(--font-size-2xl);
  letter-spacing: var(--letter-spacing-wide);
}

/* ---------- Product (Figma: Product / Product / Mobile) ---------- */

.item {
  display: grid;
  grid-template-columns: var(--gallery-share) 1fr;
  align-items: start;
}

.gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.tile--photo { aspect-ratio: var(--gallery-tile-ratio); }

.gallery .tile:nth-child(odd):last-child {
  grid-column: 1 / -1;
  aspect-ratio: var(--gallery-full-ratio);
}

/* Header over the gallery: back link + logo */
.bar {
  position: fixed; top: 0; left: 0;
  width: var(--gallery-share);
  height: 0;
  z-index: 5;
}

.back {
  position: absolute;
  left: 36px; top: 44px;
  display: flex; align-items: center; gap: var(--spacing-xs);
  color: var(--colors-text-inverse);
  font: var(--font-weight-regular) var(--font-size-md) / 1 var(--font-family-primary);
  letter-spacing: var(--letter-spacing-wide);
  filter: drop-shadow(0 var(--shadow-offset-y) var(--shadow-blur) var(--colors-shadow));
}

.back .icon { width: 16px; height: 16px; } /* Figma: 16px beside the text on desktop */

.mark--bar {
  position: absolute;
  left: 50vw; top: 36px;      /* page centre = centre of gallery column 2 (3 equal columns) */
  transform: translateX(-50%);
}

.btn--gallery-corner {
  position: fixed;
  right: calc(100% - var(--gallery-share) + 12px);
  bottom: 30px;
  z-index: 5;
}

.info {
  position: sticky; top: 0;
  height: 100vh; height: 100dvh;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  gap: var(--spacing-base);
  padding: 0 var(--spacing-lg);
}

.info__title {
  font: var(--font-weight-black) var(--font-size-5xl) / 1 var(--font-family-primary);
  letter-spacing: var(--letter-spacing-wide);
  color: var(--colors-text-strong);
  overflow-wrap: anywhere;
}

.info__line {
  font: var(--font-weight-regular) var(--font-size-2xl) / 1 var(--font-family-primary);
  letter-spacing: var(--letter-spacing-wide);
  color: var(--colors-text-strong);
  overflow-wrap: anywhere;
}

/* Sold tag: underlined, like the CTA underline */
.tag {
  padding: var(--spacing-xs) var(--spacing-0);
  box-shadow: inset 0 -2px 0 var(--colors-border);
  color: var(--colors-action);
  font: var(--font-weight-medium) var(--font-size-xl) / 1.2 var(--font-family-primary);
  letter-spacing: var(--letter-spacing-wide);
}

/* ---------- Photo viewer (horizontal, scroll-snapped) ---------- */

.viewer {
  position: fixed; inset: 0; z-index: 20;
  background: var(--colors-background);
}

.viewer__track {
  display: flex;
  width: 100%; height: 100%;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior: contain;
}
.viewer__track::-webkit-scrollbar { display: none; }

.viewer__slide {
  flex: 0 0 100%;
  height: 100%;
  scroll-snap-align: center;
  display: flex; align-items: center; justify-content: center;
}

.viewer__slide img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
}

.viewer__close {
  position: fixed; top: 20px; right: var(--spacing-md); z-index: 21;
}

.viewer:focus { outline: none; }

body.is-viewing { overflow: hidden; }

/* ---------- Tablet / mobile (< 768px) ---------- */

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

  .item { display: block; }

  /* room under the last photo for the fixed info panel (height set by shop.js) */
  .gallery { padding-bottom: var(--info-h, 289px); }

  .bar { width: 100%; }

  .back { left: 20px; top: 36px; }
  .back .icon { width: 24px; height: 24px; } /* Figma: arrow only, 24px on mobile */
  .back__text {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }

  .mark--bar { left: 50%; right: auto; top: 20px; transform: translateX(-50%); }

  .btn--gallery-corner { display: none; }

  .info {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    height: auto;
    z-index: 6;
    align-items: center; text-align: center;
    padding: var(--spacing-md);
    padding-bottom: calc(var(--spacing-md) + env(safe-area-inset-bottom));
    background: var(--colors-background);
    border-top: 1px solid var(--colors-border);
  }
}

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