/* ============================================================
   LIVE LIFE WRONG — collection + product pages (quiet luxury)
   ============================================================ */

/* ---------------- COLLECTION ---------------- */
.shop-hero {
  padding: calc(var(--nav-h) + var(--space-block)) var(--gutter) var(--space-block);
  text-align: center;
}
.shop-hero .u-micro { color: var(--mute); display: block; margin-bottom: 1.2rem; }
.shop-hero h1 {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.12em;
  text-indent: 0.12em;
  text-transform: uppercase;
}
.shop-hero__meta {
  margin-top: 1.4rem;
  color: var(--mute);
}

.shop { padding-top: calc(var(--nav-h) + var(--space-block)); }
.shop__head h1 { font-family: var(--font-title); font-weight: 400; font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3.3rem); text-transform: uppercase; letter-spacing: 0.01em; line-height: 0.95; color: var(--red); }
.shop-empty { grid-column: 1 / -1; padding: var(--space-section) var(--gutter); color: var(--mute); }
.filter-pill:focus-visible { outline: 1px solid var(--onyx); outline-offset: 4px; }
.filter-pill.is-active { color: var(--onyx); font-weight: 600; }
.shop-bar {
  position: sticky;
  top: var(--nav-h);
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem var(--gutter);
  background: color-mix(in srgb, var(--ivory) 92%, transparent);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}
.shop-bar__filters { display: flex; gap: clamp(1rem, 2vw, 2.2rem); flex-wrap: wrap; }
.filter-pill {
  position: relative;
  padding: 0.4em 0;
  font-size: var(--text-micro);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--mute);
  transition: color 0.3s ease;
}
.filter-pill::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transition: transform var(--duration-normal) var(--ease-hes);
}
.filter-pill:hover { color: var(--onyx); }
.filter-pill.is-active { color: var(--onyx); }
.filter-pill.is-active::after { transform: scaleX(1); }
.shop-bar__sort { display: flex; align-items: center; gap: 0.6em; color: var(--mute); }
.shop-bar__sort select {
  font: inherit;
  font-size: var(--text-micro);
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  font-weight: 500;
  background: none;
  border: 0;
  color: var(--onyx);
  cursor: pointer;
  outline: none;
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem 2px;
  padding: 2px 0 var(--space-section);
}
@media (max-width: 1020px) { .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------------- PRODUCT (PDP) ---------------- */
.pdp {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  grid-template-areas: "first info" "rest info";
  gap: 1rem clamp(2rem, 4vw, 6rem);
  padding: calc(var(--nav-h) + 2rem) var(--gutter) var(--space-section);
  align-items: start;
}
.pdp__first { grid-area: first; }
.pdp__gallery { grid-area: rest; display: flex; flex-direction: column; gap: 1rem; }
.pdp__info { grid-area: info; }
.pdp__lost { grid-column: 1 / -1; display: grid; gap: 1rem; justify-items: start; padding: var(--space-section) 0; }
.pdp__lost .pdp__name { color: var(--red); }
.measure { width: 100%; border-collapse: collapse; font-size: var(--text-small); font-variant-numeric: tabular-nums; }
.measure th, .measure td { text-align: left; padding: 0.45rem 0.6rem 0.45rem 0; border-bottom: 1px solid var(--color-line); }
.measure thead th { font-size: var(--text-micro); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--mute); font-weight: 500; }
.measure tbody th { font-weight: 500; }
.pdp__plate {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--ivory-2);
}
.pdp__plate svg, .pdp__plate img { width: 100%; height: 100%; }
.pdp__plate .wipe__in { position: absolute; inset: 0; }

.pdp__plate .wipe__in svg, .pdp__plate .wipe__in img { transition: transform 0.9s var(--ease-luxe); }
/* fabric magnifier — zooms toward the cursor (origin set in JS) */
@media (hover: hover) and (min-width: 1021px) { .pdp__plate:hover .wipe__in svg, .pdp__plate:hover .wipe__in img { transform: scale(1.45); } }
.pdp__info { position: sticky; top: calc(var(--nav-h) + 2rem); max-width: 30rem; }
.pdp__crumb { color: var(--mute); margin-bottom: 2.2rem; display: flex; gap: 0.8em; }
.pdp__crumb a:hover { color: var(--onyx); }
.pdp__name {
  font-family: var(--font-title);
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.6rem);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.08;
  margin-bottom: 0.9rem;
}
.pdp__price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.4rem;
  margin-bottom: 2rem;
}
.pdp__price { font-size: var(--text-h3); letter-spacing: 0.04em; font-weight: 300; }
.pdp__desc { color: var(--mute-dark); max-width: 44ch; margin-bottom: 2.4rem; }
.pdp__label { display: flex; justify-content: space-between; margin-bottom: 1rem; color: var(--mute-dark); }
.pdp__label button, .pdp__label a { color: var(--mute); text-decoration: underline; text-underline-offset: 3px; }
.pdp__sizes { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 2rem; }
.size-pill {
  min-width: 3.1rem;
  padding: 0.8em 0.6em;
  border: 1px solid var(--color-line);
  text-align: center;
  font-size: var(--text-micro);
  letter-spacing: 0.1em;
  font-weight: 500;
  transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}
.size-pill:hover { border-color: var(--onyx); }
.size-pill.is-active { background: var(--onyx); color: var(--ivory); border-color: var(--onyx); }
.size-pill.is-error { border-color: var(--mute-dark); }
.size-pill.is-out { color: var(--mute); text-decoration: line-through; cursor: pointer; }
.size-pill.is-out.is-active { background: transparent; color: var(--onyx); border-color: var(--onyx); text-decoration: line-through; }
.waitlist { margin: -0.6rem 0 2rem; padding: 1.1rem 1.2rem; background: var(--ivory-2); border: 1px solid var(--color-line); }
.waitlist__lead { margin: 0 0 0.8rem; font-size: var(--text-small); color: var(--onyx); }
.waitlist__row { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem; }
.waitlist input { font: inherit; font-size: var(--text-small); padding: 0.75em 0.9em; background: #fff; border: 1px solid var(--color-line); outline: none; min-width: 0; }
.waitlist input:focus { border-color: var(--onyx); }
.waitlist .btn { padding: 0.8em 1.4em; }
.waitlist__note { margin: 0.6rem 0 0; color: var(--mute); }
.size-pill:disabled:hover { border-color: var(--color-line); }
.pdp__add:disabled { opacity: 0.45; cursor: not-allowed; }
.pdp__hint { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--red); min-height: 1.2em; margin: -1.2rem 0 1.4rem; }
.pdp__bar { display: none; }
@media (max-width: 760px) {
  .pdp__bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.8rem var(--gutter) calc(0.8rem + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--ivory) 94%, transparent); backdrop-filter: blur(12px); border-top: 1px solid var(--color-line); transform: translateY(101%); transition: transform 0.45s var(--ease-luxe); }
  .pdp__bar.is-on { transform: none; }
  .pdp__bar .btn { padding: 1em 2em; }
  .pdp__bar__name { font-size: var(--text-small); letter-spacing: 0.02em; }
  .pdp__bar__price { color: var(--mute); font-size: var(--text-small); }
}
.pdp__add { width: 100%; margin-bottom: 0.9rem; }
.pdp__promise {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--mute);
  margin: 1.4rem 0 2.6rem;
}

.pdp__spec { border-top: 1px solid var(--onyx); margin-top: 0.5rem; }
.pdp__spec > div { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--color-line); }
.pdp__spec dt { font-size: var(--text-micro); font-weight: 500; letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--mute); padding-top: 0.2rem; }
.pdp__spec dd { margin: 0; color: var(--mute-dark); }
@media (max-width: 480px) { .pdp__spec > div { grid-template-columns: 1fr; gap: 0.3rem; } }
.acc { border-top: 1px solid var(--color-line); }
.acc:last-of-type { border-bottom: 1px solid var(--color-line); }
.acc__head {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 0;
  font-size: var(--text-micro);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  font-weight: 500;
}
.acc__head i { font-style: normal; font-weight: 300; transition: transform 0.4s var(--ease-luxe); }
.acc.is-open .acc__head i { transform: rotate(45deg); }
.acc__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s var(--ease-luxe);
  color: var(--mute-dark);
}
.acc__body-in { padding: 0 0 1.5rem; max-width: 46ch; }
.acc__body-in li { margin-bottom: 0.45em; }

.related { padding: 0 0 var(--space-section); }
.related__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem 2px;
  padding: 0 var(--gutter);
}
@media (max-width: 1020px) {
  .pdp { grid-template-columns: 1fr; grid-template-areas: "first" "info" "rest"; }
  .pdp__info { position: static; max-width: none; padding-top: 0.5rem; }
  .related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* before a drop: the alert form sits under the (locked) button */
.waitlist--drop { margin-top: 1rem; }