/* Lime Apparel -- beta. Same tokens as the full platform, so this looks like the brand
   and not like a starter template. */

/* Self-hosted fonts -- no external requests. Space Grotesk is the variable master (wght 300-700);
   Space Mono is Regular + Bold. Latin subset, woff2. */
@font-face {
  font-family: 'Space Grotesk';
  src: url('/assets/fonts/space-grotesk.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Space Mono';
  src: url('/assets/fonts/space-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Space Mono';
  src: url('/assets/fonts/space-mono-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --lime: #8cb81e;
  --lime-deep: #6f9417;
  --lime-ink: #142000;
  --ink: #0b0b0b;
  --ink-2: #121212;
  --ink-3: #181818;
  --chip: #151515;
  --off: #f4f4ef;
  --text: #d7d7d2;
  --muted: #9a9a93;
  --faint: #6e6e68;
  --line: rgba(255, 255, 255, 0.1);
  --line-2: rgba(255, 255, 255, 0.16);
  --down: #d98a3d;
  --sans: 'Space Grotesk', system-ui, sans-serif;
  --mono: 'Space Mono', ui-monospace, monospace;
  --wrap: 1180px;
  --nav-h: 64px; /* the sticky header's height -- used to fit the product page to the viewport */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--ink);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1.5rem; }

.kick {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lime);
}
.muted { color: var(--muted); }
.mono { font-family: var(--mono); }

/* ---- nav ---- */
.nav {
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: rgba(11, 11, 11, 0.92);
  backdrop-filter: blur(8px);
  z-index: 20;
}
.nav-in {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.brand { display: flex; align-items: center; gap: 0.6rem; }
.brand .mark {
  width: 30px; height: 30px; border-radius: 22%;
  background: var(--chip); color: var(--lime);
  display: flex; align-items: center; justify-content: center;
}
.brand .mark svg { width: 100%; height: 100%; display: block; }
.brand b { color: var(--off); letter-spacing: 0.06em; font-size: 0.95rem; }
.nav-links { display: flex; gap: 1.6rem; align-items: center; }
.nav-links a { color: var(--muted); font-size: 0.9rem; transition: 0.15s; }
.nav-links a:hover, .nav-links a.on { color: var(--off); }

/* Women / Men / All toggle -- a pill segmented control by the logo, matching the main platform. */
.ctx-switch {
  display: inline-flex; margin-left: 1.2rem; margin-right: auto;
  border: 1px solid var(--line-2); background: var(--ink-2);
  border-radius: 40px; padding: 2px;
}
.ctx-switch .ctx {
  font-family: var(--mono); font-weight: 700; font-size: 0.66rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.4rem 0.72rem; border: 0; background: transparent;
  color: var(--muted); cursor: pointer; border-radius: 40px; transition: 0.15s;
}
.ctx-switch .ctx:hover { color: var(--off); }
.ctx-switch .ctx.on { background: var(--lime); color: var(--lime-ink); }

/* ---- buttons ---- */
.btn {
  display: inline-block;
  background: var(--lime);
  color: var(--lime-ink);
  border: 0;
  border-radius: 999px;
  padding: 0.85rem 1.8rem;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  transition: 0.15s;
}
.btn:hover { background: var(--lime-deep); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-ghost {
  display: inline-block;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 0.85rem 1.8rem;
  font-family: var(--sans);
  font-size: 0.92rem;
  cursor: pointer;
}
.btn-ghost:hover { border-color: var(--off); color: var(--off); }
.btn-full { width: 100%; text-align: center; }

/* ---- section head ---- */
.sec { padding: 3rem 0; }
/* Centered shop intro: heading + subheading stacked and centered, the subheading given room to
   run as full lines rather than a narrow stacked column. */
.sec-intro { text-align: center; margin-bottom: 2.6rem; }
.sec-intro h2 { color: var(--off); font-size: 1.7rem; font-weight: 700; margin-bottom: 0.9rem; }
.sec-intro p { max-width: 62rem; margin: 0 auto; }

/* ---- product grid + card ----
   The card is a faithful copy of the built shop's ProductCard / CardMedia (web/src/components):
   a 1:1 .ph frame that CONTAINS any aspect ratio (never crops), a glassy badge overlaid
   top-left, hover-revealed arrows + dots, and below the frame a .meta row with name+lead on
   the left and price on the right. Rendered with this beta's own tokens -- same brand, same
   fonts -- so nothing about the styling changes, only the card's shape and behaviour. */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.4rem;
}
.pcard { position: relative; display: flex; flex-direction: column; color: inherit; transition: transform 0.18s; }
.pcard:hover { transform: translateY(-3px); }
.pcard .ph {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--ink-3);
  display: flex; align-items: center; justify-content: center;
}
.pcard .ph img,
.pcard .ph video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; display: block; background: #0e0e0e;
}
.pcard:hover .ph { border-color: var(--line-2); }
.pcard .ph-empty {
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.14em;
  color: var(--faint); text-transform: uppercase;
}
.pcard .arw {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--line-2); background: rgba(11, 11, 11, 0.5);
  backdrop-filter: blur(6px); color: var(--off); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; line-height: 1; opacity: 0; transition: opacity 0.16s;
}
.pcard .ph:hover .arw { opacity: 1; }
.pcard .arw.prev { left: 8px; }
.pcard .arw.next { right: 8px; }
.pcard .arw:hover { border-color: var(--lime); color: var(--lime); }
.pcard .dots {
  position: absolute; left: 0; right: 0; bottom: 9px; z-index: 3;
  display: flex; gap: 6px; justify-content: center;
}
.pcard .dot {
  width: 6px; height: 6px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.45); cursor: pointer; transition: 0.16s;
}
.pcard .dot.on { background: var(--lime); transform: scale(1.3); }
.pcard .tags {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  display: flex; flex-direction: column; gap: 0.4rem; align-items: flex-start;
}
.pcard .tag {
  font-family: var(--mono); font-weight: 700; font-size: 0.64rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.36rem 0.6rem; border-radius: 20px;
}
.pcard .tag.mtm {
  background: rgba(11, 11, 11, 0.55); color: var(--off);
  border: 1px solid var(--line-2); backdrop-filter: blur(6px);
}
.pcard .meta {
  padding: 0.85rem 0.15rem 0;
  display: flex; justify-content: space-between; gap: 0.8rem; align-items: baseline;
}
.pcard .meta > div:first-child { flex: 1; min-width: 0; }
.pcard .nm {
  color: var(--off); font-weight: 600; font-size: 0.98rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pcard .ct {
  font-family: var(--mono); font-weight: 700; font-size: 0.6rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
  margin-top: 0.2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pcard .pr {
  color: var(--lime); font-weight: 700; font-family: var(--mono); font-size: 0.9rem;
  white-space: nowrap; flex-shrink: 0;
}

/* ---- product detail ---- */
.pdp { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem; padding: 2rem 0 3rem; align-items: start; }
/* The gallery column pins under the sticky header, so the media stays fully in view while the
   details scroll. Its exact height is set to fit the viewport by the fitGallery() pass in
   product.html; the max-height here is a no-JS safety net so the frame is never a giant. */
.pdp .gallery {
  position: sticky;
  top: calc(var(--nav-h) + 1rem);
  align-self: start;
}
.pdp h1 { color: var(--off); font-size: 2rem; font-weight: 700; margin: 0.5rem 0 0.6rem; }
.price { font-family: var(--mono); font-size: 1.5rem; color: var(--off); margin-bottom: 1.4rem; }
.field { margin-bottom: 1.2rem; }
.field label {
  display: block; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 0.45rem;
}
.field input, .field select, .field textarea {
  width: 100%; background: var(--ink-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 0.75rem 0.9rem; color: var(--text);
  font-family: var(--sans); font-size: 0.92rem;
}
.field textarea { min-height: 92px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--lime);
}
.field .hint { font-size: 0.78rem; color: var(--faint); margin-top: 0.35rem; }
.sizes { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.size-b {
  background: var(--ink-2); border: 1px solid var(--line); color: var(--text);
  border-radius: 8px; padding: 0.55rem 1rem; cursor: pointer;
  font-family: var(--mono); font-size: 0.82rem;
}
.size-b.on { background: var(--lime); color: var(--lime-ink); border-color: var(--lime); font-weight: 700; }

.note {
  border-left: 2px solid var(--lime); background: var(--ink-2);
  padding: 0.85rem 1rem; margin: 1.4rem 0; font-size: 0.85rem; color: var(--muted);
}
.err {
  border-left: 2px solid var(--down); background: var(--ink-2);
  padding: 0.85rem 1rem; margin: 1rem 0; font-size: 0.85rem; color: var(--down);
}

/* ---- footer ---- */
.foot { border-top: 1px solid var(--line); margin-top: 4rem; padding: 2.5rem 0; }
.foot-in { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: 0.82rem; color: var(--faint); }

/* ---- admin ---- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.kpi { background: var(--ink-2); border: 1px solid var(--line); border-radius: 14px; padding: 1.2rem; }
.kpi .k { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 0.5rem; }
.kpi .v { font-family: var(--mono); font-size: 1.7rem; color: var(--off); }
.kpi .s { font-family: var(--mono); font-size: 0.68rem; color: var(--lime); margin-top: 0.3rem; }

.panel { background: var(--ink-2); border: 1px solid var(--line); border-radius: 14px;
  padding: 1.3rem; margin-bottom: 1.5rem; }
.panel h3 { color: var(--off); font-size: 1rem; margin-bottom: 1rem; }

table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
th {
  text-align: left; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--faint); font-weight: 400;
  padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--line);
}
td { padding: 0.7rem 0.6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
td.num, th.num { text-align: right; font-family: var(--mono); }
tbody tr:last-child td { border-bottom: 0; }

.tabs { display: flex; gap: 0.4rem; margin-bottom: 1.2rem; }
.tab {
  background: transparent; border: 1px solid var(--line); color: var(--muted);
  border-radius: 999px; padding: 0.45rem 1rem; cursor: pointer;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase;
}
.tab.on { background: var(--lime); color: var(--lime-ink); border-color: var(--lime); font-weight: 700; }

.thumbs { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.thumbs a {
  display: block; width: 54px; height: 54px; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--line);
}
.thumbs img { width: 100%; height: 100%; object-fit: cover; }

.empty { text-align: center; padding: 2.5rem 1rem; color: var(--faint); font-size: 0.9rem; }

@media (max-width: 800px) {
  .pdp { grid-template-columns: 1fr; gap: 1.8rem; }
  /* Stacked layout: media on top, details below -- the gallery should scroll away normally, not
     pin. fitGallery() caps it to ~70% of the screen so you see the photo AND the details start. */
  .pdp .gallery { position: static; }
  .nav-links { gap: 1rem; }
  .nav-links a { font-size: 0.82rem; }
  /* Tighten the department toggle so brand + toggle + links fit a phone width. */
  .ctx-switch { margin-left: 0.7rem; }
  .ctx-switch .ctx { padding: 0.34rem 0.5rem; font-size: 0.6rem; }
}

/* ================================================================================
   MEDIA -- PDP gallery + lightbox (the product-detail page).
   The card carousel lives up in the product-grid section above; it follows the built shop's
   CardMedia. Gallery + lightbox here follow product-mtm.html. Everywhere, media is
   object-fit: CONTAIN, never cropped -- a cropped garment photo is a lie about the garment.
   ================================================================================ */


/* ---- PDP gallery ---- */
.gallery { display: flex; flex-direction: column; gap: 0.75rem; }
.gmain {
  aspect-ratio: 1 / 1; position: relative; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--line); background: var(--ink-3); cursor: zoom-in;
  /* Same 1:1 frame + contain treatment as the shop card, just bigger. No-JS safety net: never
     taller than the viewport minus the header and a little breathing room. fitGallery() in
     product.html then sets an exact width+height that keeps the 1:1 shape while fitting the
     available space. width:auto lets the frame narrow when height is the limit. */
  max-height: calc(100dvh - var(--nav-h) - 5rem);
  max-width: 100%;
  width: auto;
  margin-inline: auto;
}
.gmain .gmedia { position: absolute; inset: 0; }
.gmain .gmedia img,
.gmain .gmedia video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; display: block; background: #0e0e0e;
}
.gmain .ph {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.14em;
  color: var(--faint); text-transform: uppercase;
}
.gthumbs { display: flex; gap: 0.6rem; }
.gthumb {
  flex: 1; aspect-ratio: 1 / 1; border-radius: 11px; overflow: hidden;
  border: 1px solid var(--line); cursor: pointer; position: relative;
  transition: border-color 0.16s; background: var(--ink-2); padding: 0;
}
.gthumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.gthumb:hover { border-color: var(--line-2); }
.gthumb.on { border-color: var(--lime); }
.gthumb .play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--off); pointer-events: none;
}
.gthumb .play svg { width: 26%; height: 26%; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.6)); }

/* ---- lightbox ---- */
.lightbox {
  position: fixed; inset: 0; z-index: 300; display: none;
  align-items: center; justify-content: center; padding: 3vh 3vw;
}
.lightbox.open { display: flex; }
.lb-bg { position: absolute; inset: 0; background: rgba(4, 4, 4, 0.92); backdrop-filter: blur(6px); }
.lb-media {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center;
  max-width: 92vw; max-height: 92vh;
}
.lb-media img, .lb-media video {
  max-width: 92vw; max-height: 92vh; width: auto; height: auto;
  display: block; border-radius: 8px; background: var(--ink-2);
}
.lb-close {
  position: absolute; top: 14px; right: 16px; z-index: 3; width: 42px; height: 42px;
  border-radius: 50%; border: 1px solid var(--line-2); background: rgba(11, 11, 11, 0.6);
  color: var(--off); cursor: pointer; font-size: 1.3rem; line-height: 1; transition: 0.16s;
}
.lb-close:hover { border-color: var(--lime); color: var(--lime); }
.lb-arw {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-2);
  background: rgba(11, 11, 11, 0.55); backdrop-filter: blur(6px); color: var(--off);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; line-height: 1; transition: 0.16s;
}
.lb-arw:hover { border-color: var(--lime); color: var(--lime); }
.lb-arw.prev { left: 2vw; }
.lb-arw.next { right: 2vw; }
.lb-counter {
  position: absolute; top: 18px; left: 18px; z-index: 3;
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; color: var(--muted);
}
.lb-dots {
  position: absolute; left: 0; right: 0; bottom: 18px; z-index: 3;
  display: flex; gap: 8px; justify-content: center;
}
.lb-dot {
  width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.35);
  border: 0; cursor: pointer; padding: 0; transition: 0.16s;
}
.lb-dot.on { background: var(--lime); transform: scale(1.25); }
.lb-dot:hover { background: rgba(255, 255, 255, 0.8); }

/* ---- details, from the product folder's markdown body ---- */
.details { margin-top: 1.9rem; border-top: 1px solid var(--line); padding-top: 1.2rem; }
.details h4 {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--faint); font-weight: 400; margin-bottom: 0.6rem;
}
.details p { color: var(--muted); font-size: 0.9rem; margin-bottom: 0.7rem; }
.details p:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}