/* Landing page + shop grid. 2026-09-19 redesign — photo-first product cards,
   2-up mobile grid, tighter gutters, hero with real hierarchy. CSP-clean: no
   inline styles anywhere in index.html. */

/* ==========================================================================
   Hero
   Cold ad traffic's first read. Value prop lands in one glance: eyebrow →
   headline → lede → CTAs. Big product tile on the right (desktop) or stacked
   (mobile) so it reads as a store, not a landing page.
   ========================================================================== */
.landing-hero {
  position: relative;
  padding: var(--s-8) 0 var(--s-8);
  margin-bottom: var(--s-8);
  border-bottom: 1px solid var(--edge);
  display: grid;
  gap: var(--s-8);
  grid-template-columns: 1fr;
  align-items: center;
}
.landing-hero .hero-copy { max-width: 44ch; }
.landing-hero .eyebrow {
  color: var(--accent);
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: var(--fw-semibold);
  margin: 0 0 var(--s-3);
}
.landing-hero h1 {
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.03;
  letter-spacing: -0.028em;
  font-weight: var(--fw-semibold);
  margin: 0 0 var(--s-4);
  color: var(--ink);
}
.landing-hero h1 .accent { color: var(--accent); }
.landing-hero .lede {
  font-size: clamp(15.5px, 1.4vw, 18px);
  color: var(--ink-3);
  line-height: 1.55;
  max-width: 44ch;
  margin: 0 0 var(--s-6);
}
.landing-hero .cta-row {
  display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center;
}
.landing-hero .cta-row .btn { font-size: 15px; padding: 14px 26px; }
.landing-hero .cta-row .btn.secondary {
  color: var(--ink-2);
  border-color: var(--edge-hi);
}
.landing-hero .hero-visual {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-elev-1);
  border: 1px solid var(--edge);
}
.landing-hero .hero-visual img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.landing-hero .hero-visual::after {
  /* Subtle gradient at the base so the hero-visual-tag stays legible on any photo. */
  content: "";
  position: absolute; inset: auto 0 0 0; height: 42%;
  background: linear-gradient(180deg, transparent, rgba(11,11,13,0.75));
  pointer-events: none;
}
.landing-hero .hero-visual-tag {
  position: absolute; left: var(--s-4); bottom: var(--s-4); right: var(--s-4);
  display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-3);
  color: var(--ink);
  z-index: 1;
}
.landing-hero .hero-visual-tag .tag-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--accent); font-weight: var(--fw-semibold);
  display: block; margin-bottom: 2px;
}
.landing-hero .hero-visual-tag .tag-name {
  font-size: 15px; font-weight: var(--fw-medium); color: var(--ink);
}
.landing-hero .hero-visual-tag .btn {
  padding: 8px 14px; font-size: 12px;
}

@media (min-width: 900px) {
  .landing-hero {
    grid-template-columns: 1.15fr 0.85fr;
    padding: var(--s-12) 0 var(--s-10);
    gap: var(--s-10);
  }
}
@media (min-width: 1200px) {
  .landing-hero {
    grid-template-columns: 1.2fr 0.8fr;
    gap: var(--s-16);
  }
}
@media (max-width: 480px) {
  .landing-hero { padding: var(--s-6) 0; margin-bottom: var(--s-6); gap: var(--s-6); }
  .landing-hero h1 { font-size: clamp(34px, 9vw, 46px); }
  .landing-hero .cta-row .btn { padding: 13px 22px; }
}

/* ==========================================================================
   Trust strip
   ========================================================================== */
.trust-strip {
  display: flex; flex-wrap: wrap; align-items: center;
  row-gap: 6px;
  margin: 0 0 var(--s-8);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--edge);
}
.trust-item {
  color: var(--dim);
  font-size: 13px;
  font-weight: var(--fw-medium);
}
.trust-item:not(:last-child)::after {
  content: "·";
  margin: 0 12px;
  color: var(--edge-hi);
}

/* ==========================================================================
   Email capture strip
   ========================================================================== */
.landing-email-capture {
  margin: var(--s-6) 0 var(--s-10);
  padding: var(--s-6);
  background: var(--bg-elev-1);
  border: 1px solid var(--edge);
  border-radius: var(--r-lg);
}
.landing-email-capture .lec-content {
  display: flex; gap: var(--s-6); flex-wrap: wrap;
  align-items: flex-start; justify-content: space-between;
}
.landing-email-capture .lec-headline { max-width: 42ch; }
.landing-email-capture h3 {
  margin: 0 0 var(--s-2);
  font-size: 20px; font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
}
.landing-email-capture .lec-form {
  display: flex; gap: var(--s-2); flex-wrap: wrap;
  flex: 1; min-width: 260px;
}
.landing-email-capture .lec-form input {
  flex: 1; min-width: 200px;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--edge-hi);
  border-radius: var(--r-md);
  color: var(--ink); font-size: 14px;
}
.landing-email-capture .lec-form input:focus {
  border-color: var(--edge-focus); outline: none;
}
.index-s1 {
  color: inherit; text-decoration: none;
  border-bottom: 1px solid var(--edge-hi);
  padding-bottom: 2px;
}
.index-s2 {
  font-size: 13px;
  display: block;
  margin-top: 8px;
  min-height: 1.2em;
  flex-basis: 100%;
}
.index-s3 {
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--edge);
  display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center;
  font-size: 13px;
}
.index-s4, .index-s5, .index-s6 { padding: 8px 16px; font-size: 13px; }
.index-s7 { font-size: 13px; margin: 4px 0 0; color: var(--dim); }
/* Social-follow row — folded into the email-capture card (2026-09-27 declutter)
   so "notify me / drop channels / follow us" read as one connect band instead
   of two stacked cards. Kept as its own labeled row under the drop channels to
   preserve the drop-rail vs ongoing-follow distinction (manager ruling
   2026-09-19); [data-follow-us] still drives the same JS hydration. */
.lec-socials {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--edge);
  display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center;
  font-size: 13px;
}

/* ==========================================================================
   Follow-us — separate section + purpose from drop channels. Ongoing-follow
   feeds live here; drop rails announce new inventory. Same brand tokens.
   ========================================================================== */
.landing-follow-us {
  margin: 0 0 var(--s-10);
  padding: var(--s-6);
  background: var(--bg-elev-1);
  border: 1px solid var(--edge);
  border-radius: var(--r-lg);
  display: flex; gap: var(--s-6);
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.landing-follow-us .follow-us-copy { max-width: 40ch; }
.landing-follow-us .eyebrow {
  color: var(--accent);
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: var(--fw-semibold);
  margin: 0 0 var(--s-2);
}
.landing-follow-us .follow-us-headline {
  margin: 0 0 var(--s-2);
  font-size: 20px; font-weight: var(--fw-semibold);
  letter-spacing: -0.01em; color: var(--ink);
}
.landing-follow-us .follow-us-lede {
  margin: 0; font-size: 14px; line-height: 1.55;
  color: var(--dim);
}
.landing-follow-us .follow-us-row {
  display: flex; gap: var(--s-3);
  flex-wrap: wrap;
}
.follow-us-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--edge-hi);
  background: transparent;
  color: var(--ink);
  font-size: 13px; font-weight: var(--fw-medium);
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.follow-us-btn:hover {
  color: var(--accent-hi);
  border-color: var(--accent);
  background: var(--bg-elev-2);
}
.follow-us-btn .follow-us-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 11px; font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
}
.follow-us-btn .follow-us-mark svg { display: block; }
.follow-us-btn .follow-us-label { line-height: 1; }

/* ==========================================================================
   Section head — "Available now" / count
   ========================================================================== */
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--edge);
}
.section-head h2.section-label {
  color: var(--ink);
  font-size: 22px;
  text-transform: none;
  letter-spacing: -0.015em;
  font-weight: var(--fw-semibold);
  margin: 0;
}
.section-head .count {
  color: var(--dim);
  font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: var(--fw-medium);
}
.landing-email-capture + .section-head { margin-top: var(--s-10); }

/* ==========================================================================
   Shop grid
   Mobile: 2-up (was 1-up — the biggest wireframe tell).
   Tablet+: auto-fill with a comfortable minmax.
   ========================================================================== */
.shop-grid {
  display: grid;
  gap: var(--s-4) var(--s-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 640px) {
  .shop-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--s-6) var(--s-4);
  }
}
@media (min-width: 1024px) {
  .shop-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--s-8) var(--s-5);
  }
}

/* ==========================================================================
   Shop filters (CP7y) — Type + Brand chip rows + Sort. Mobile-first: each row
   scrolls horizontally so a long brand list never wraps into a wall of chips.
   ========================================================================== */
.shop-filters {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin: var(--s-3) 0 var(--s-5);
}
.filter-row {
  display: flex;
  gap: var(--s-2);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
.filter-row::-webkit-scrollbar { display: none; }
.filter-chip {
  flex: 0 0 auto;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--edge);
  background: var(--bg-elev-1);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: var(--fw-medium);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast);
}
.filter-chip:hover { border-color: var(--edge-hi); color: var(--ink); }
.filter-chip.active {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
}
.filter-sort {
  align-items: center;
  gap: var(--s-2);
  overflow: visible;
  margin-top: var(--s-1);
}
.filter-sort-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--dim);
}
.filter-sort-select {
  padding: 7px 10px;
  border-radius: var(--r-md);
  border: 1px solid var(--edge);
  background: var(--bg-elev-1);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: var(--fw-medium);
  cursor: pointer;
}
.filter-sort-select:hover { border-color: var(--edge-hi); }

/* ==========================================================================
   Product card
   Photo carries the card. Info sits under the photo, tight, hierarchical:
     name (medium weight) → meta (dim) → price + availability badge.
   Hover: photo scales subtly, border lifts, name slides to accent.
   Whole card is one anchor — no dead pixels between photo and info.
   ========================================================================== */
.product-card {
  position: relative;
  display: flex; flex-direction: column;
  color: inherit;
  border-radius: var(--r-md);
  overflow: hidden;
  background: transparent;
  transition: transform 0.15s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.product-card:hover { transform: translateY(-2px); }
.product-card:active { transform: translateY(0); }

.product-card .photo {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  background: var(--bg-elev-1);
  border: 1px solid var(--edge);
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  transition: border-color var(--dur-med), box-shadow var(--dur-med);
}
.product-card:hover .photo {
  border-color: var(--edge-hi);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.product-card .photo img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.4s var(--ease-out);
}
.product-card:hover .photo img { transform: scale(1.03); }
.product-card .photo .noshot {
  color: var(--dimmer); font-size: 11px;
  text-align: center; padding: var(--s-3);
  text-transform: uppercase; letter-spacing: 0.08em;
}

/* Availability badge sits on the photo — tiny, top-left, clear affordance. */
.product-card .badge {
  position: absolute; top: var(--s-2); left: var(--s-2);
  z-index: 2;
  padding: 4px 8px;
  font-size: 10px; font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: 0.1em;
  border-radius: var(--r-pill);
  background: var(--live-bg);
  border: 1px solid var(--live-edge);
  color: var(--live);
  backdrop-filter: blur(6px);
}
.product-card .badge.badge-gone {
  background: rgba(0,0,0,0.55);
  border-color: var(--edge-hi);
  color: var(--dim);
}
.product-card .badge.badge-low {
  background: rgba(224,160,160,0.1);
  border-color: var(--warn-edge);
  color: var(--warn);
}

.product-card .info {
  padding: var(--s-3) var(--s-1) 0;
  display: flex; flex-direction: column; gap: 2px;
}
.product-card h3 {
  margin: 0;
  font-size: 14px;
  font-weight: var(--fw-medium);
  letter-spacing: -0.005em;
  line-height: 1.3;
  color: var(--ink);
  /* Two-line clamp survives legacy products (pre-2026-09-19) that still carry
     the long descriptor in the name. New products use product-display-set to
     move descriptors into `attributes` (rendered in .meta.attrs below), so
     .name stays short and never needs to clamp. Fixed min-height keeps 1-line
     and 2-line cards aligned in the 2-up grid. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.3em * 2);
  transition: color var(--dur-fast);
  overflow-wrap: anywhere;
}
.product-card:hover h3 { color: var(--accent-hi); }
.product-card .meta {
  color: var(--dim);
  font-size: 12px;
  line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Attribute caption (Silver · Cross): allow up to 2 lines so tag-style
   descriptors don't get lost to ellipsis if the operator sets 3-4 short
   attributes. `.attrs` overrides the parent .meta's nowrap. */
.product-card .meta.attrs {
  white-space: normal;
  text-overflow: clip;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
/* D31 (2026-09-20) size chip row on multi-size cards. Live sizes show in the
   ink-2 tone, sold-out sizes strike through in the dimmer tone. */
.product-card .meta.sizes {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s-1); white-space: normal; text-overflow: clip;
}
.product-card .size-chip {
  display: inline-block; padding: 2px 6px; border: 1px solid var(--edge); border-radius: var(--r-sm); font-size: 11px; font-variant-numeric: tabular-nums;
}
.product-card .size-chip.live { color: var(--ink-2); }
.product-card .size-chip.gone { color: var(--dimmer); text-decoration: line-through; }
.product-card .foot {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s-2);
  margin-top: var(--s-2);
}
.product-card .price {
  font-size: 16px;
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.product-card .avail {
  font-size: 11px;
  color: var(--live);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: var(--fw-medium);
  white-space: nowrap;
}
.product-card .avail.gone { color: var(--dimmer); }
.product-card .avail.low { color: var(--warn); }

@media (min-width: 640px) {
  .product-card h3 { font-size: 15px; }
  .product-card .price { font-size: 17px; }
  .product-card .info { padding: var(--s-4) 0 0; }
}

/* ==========================================================================
   "Not available right now" list
   ========================================================================== */
#goneHead { margin-top: var(--s-12); }
.gone-list { list-style: none; padding: 0; margin: var(--s-3) 0 0; }
.gone-list li {
  display: flex; justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--edge);
  font-size: 13px; color: var(--dim);
}
.gone-list li:last-child { border-bottom: 0; }
.gone-list .tag {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--dimmer);
}

/* Skeleton grid — matches the shop grid so the layout doesn't jump on load. */
.skeleton-grid {
  display: grid;
  gap: var(--s-4) var(--s-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 640px) {
  .skeleton-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--s-6) var(--s-4);
  }
}
.skeleton-card { display: flex; flex-direction: column; gap: var(--s-3); }
.skeleton-photo { width: 100%; aspect-ratio: 4 / 5; border-radius: var(--r-md); }
.skeleton-lines { display: flex; flex-direction: column; gap: 6px; padding: 0 var(--s-1); }
/* .skeleton + skeleton-shimmer keyframes hoisted to public/style.css so
   any page (checkout, product, drops…) can drop in a skeleton without
   reimplementing the shimmer. Shop-grid-specific dimensions stay here. */
.skeleton-line { height: 12px; border-radius: 3px; }
.skeleton-line.medium { width: 70%; }
.skeleton-line.short  { width: 40%; }

/* Empty / error states — sit in the grid slot so the section stays balanced. */
#availList .empty, #availList .err {
  padding: var(--s-8) var(--s-4);
  text-align: center;
  color: var(--dim);
  font-size: 14px;
  background: var(--bg-elev-1);
  border: 1px solid var(--edge);
  border-radius: var(--r-md);
}
#availList .empty a { color: var(--accent); }
#availList .err { color: var(--warn); }