/* ============================================================
   Shop page — shared styles for the merchandised /shop landing.
   Polyphony × MoTeC: dark, sharp edges, generous whitespace,
   data-forward accents. Uses EW design tokens from ew-components.css.
   ============================================================ */

/* ---- Section frame ---- */
.shop-section { padding: 56px 24px; }
.shop-section--tight { padding: 32px 24px; }
.shop-section__inner { max-width: 1320px; margin: 0 auto; }
.shop-section__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.shop-section__overline {
  color: var(--accent-text);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.shop-section__title {
  color: var(--ew-white);
  font-size: clamp(24px, 3vw, 36px);
  letter-spacing: 0.02em;
  margin: 6px 0 0;
  font-weight: 600;
}
.shop-section__subtitle {
  color: var(--ew-paper);
  font-size: 14px;
  max-width: 60ch;
  margin: 8px 0 0;
  line-height: 1.5;
}
.shop-section__cta {
  color: var(--ew-paper);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid var(--ew-steel);
  padding-bottom: 4px;
  transition: color 0.15s, border-color 0.15s;
}
.shop-section__cta:hover { color: var(--ew-white); border-color: var(--accent); }

/* ---- Empty state ---- */
.shop-empty {
  border: 1px dashed var(--ew-steel);
  padding: 32px 20px;
  text-align: center;
  color: var(--ew-aluminum);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ============================================================
   HERO
   ============================================================ */
.shop-hero {
  position: relative;
  width: 100%;
  min-height: 480px;
  display: flex;
  align-items: flex-end;
  background: var(--ew-black);
  overflow: hidden;
}
.shop-hero__slides {
  position: absolute; inset: 0;
}
.shop-hero__slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.shop-hero__slide[data-active="true"] { opacity: 1; }
.shop-hero__img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: right center;
}
/* MOBILE (<720px): full-bleed image behind a bottom-up black scrim so the
   turbo stays visible (right center) while text over it reads AA-legible. */
.shop-hero__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    var(--ew-black) 0%,
    rgba(10, 10, 11, 0.94) 62%,
    rgba(10, 10, 11, 0.88) 80%,
    rgba(10, 10, 11, 0.60) 100%
  );
}
.shop-hero__content {
  position: relative;
  z-index: 1;
  max-width: 1320px;
  width: 100%;
  margin: 0 auto;
  padding: 32px 24px;
}
.shop-hero__overline {
  color: var(--accent-text);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.shop-hero__headline {
  color: var(--ew-white);
  font-size: clamp(36px, 6vw, 76px);
  line-height: 1.02;
  margin: 12px 0 16px;
  letter-spacing: -0.01em;
  max-width: 18ch;
}
.shop-hero__subhead {
  color: var(--ew-paper);
  font-size: clamp(15px, 1.6vw, 18px);
  max-width: 56ch;
  line-height: 1.5;
  margin-bottom: 28px;
}
.shop-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--accent);
  color: var(--on-accent);
  text-decoration: none;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 14px 24px;
  border: 1px solid var(--accent);
  transition: background 0.15s, color 0.15s;
}
.shop-hero__cta:hover { background: transparent; color: var(--ew-white); }
.shop-hero__nav {
  position: absolute;
  bottom: 24px; right: 24px;
  display: flex;
  gap: 8px;
  z-index: 2;
}
.shop-hero__nav button {
  width: 36px; height: 4px;
  background: rgba(255,255,255,0.25);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s;
}
.shop-hero__nav button[aria-current="true"] { background: var(--accent); }

/* DESKTOP (≥720px): product render anchored to the right ~58% of the band,
   full band height, undimmed so the turbo reads bright and dominant. The
   section black extends left to carry the headline/CTA. */
@media (min-width: 720px) {
  /* restore desktop vertical centering — mobile bottom-anchors for scrim legibility */
  .shop-hero { min-height: 600px; align-items: center; }
  /* Image occupies the right ~58%; left ~42% is the extended section black. */
  .shop-hero__slides { left: 42%; right: 0; }
  .shop-hero__img { filter: none; }
  /* Seam hiding: blend the image's LEFT edge into the section black with a
     left→right fade. Opaque at the image's left edge, transparent ~36% in,
     so the seam is invisible while the turbo (right side) is untouched. */
  .shop-hero__slide::after {
    background: linear-gradient(
      to right,
      var(--ew-black) 0%,
      rgba(10, 10, 11, 0.85) 14%,
      rgba(10, 10, 11, 0.35) 26%,
      rgba(10, 10, 11, 0) 38%
    );
  }
  /* Content stays on the extended black LEFT side. The content box is left-
     anchored to the page gutter and its RIGHT edge is held just inside where
     the image begins (40vw, image slides start at 42vw), so no text ever
     crosses into the turbo at any width — verified clean at 1280/1440/1920/2560.
     Left gutter matches the rest of the page (centered 1320 gutter, min 24px). */
  .shop-hero__content {
    max-width: none;
    width: auto;
    margin: 0;
    padding-left: max(24px, calc((100vw - 1320px) / 2 + 24px));
    padding-right: 0;
    /* right edge of the content box clamped to 40vw → text clears the image */
    margin-right: 60vw;
  }
  .shop-hero__headline { max-width: 14ch; }
  .shop-hero__subhead { max-width: 42ch; }
}

/* ============================================================
   CATEGORY GRID
   ============================================================ */
.shop-cat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (min-width: 720px) { .shop-cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .shop-cat-grid { grid-template-columns: repeat(4, 1fr); } }

.shop-cat-tile {
  position: relative;
  display: block;
  background: var(--ew-panel);
  border: 1px solid var(--ew-steel);
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.22s ease, border-color 0.18s;
  aspect-ratio: 1 / 1;
}
.shop-cat-tile:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
}
.shop-cat-tile__img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.7);
  transition: filter 0.18s;
}
.shop-cat-tile:hover .shop-cat-tile__img { filter: brightness(0.85); }
.shop-cat-tile__body {
  position: absolute;
  inset: auto 0 0 0;
  padding: 14px 16px;
  background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0));
}
.shop-cat-tile__name {
  color: var(--ew-white);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.shop-cat-tile__count {
  color: var(--ew-aluminum);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 4px;
}
.shop-cat-tile__placeholder {
  width: 100%; height: 100%;
  background:
    linear-gradient(135deg, var(--ew-graphite) 0%, var(--ew-black) 100%);
}

/* ============================================================
   SHOP BY CHASSIS
   The platform picker now renders the canonical chassis-tile grid
   (snippets/ew-chassis-tiles → .ew-chassis-hub__tiles, styled in
   ew-components.css). The legacy .shop-chassis-grid/.shop-chassis-card
   rules were removed with that swap.
   ============================================================ */

/* ============================================================
   STAGE PATH
   ============================================================ */
.shop-stage-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  position: relative;
}
@media (min-width: 720px) { .shop-stage-grid { grid-template-columns: repeat(3, 1fr); } }

.shop-stage-card {
  background: var(--ew-panel);
  border: 1px solid var(--ew-steel);
  padding: 28px 24px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 0.15s;
}
.shop-stage-card:hover { border-color: var(--accent); }
.shop-stage-card__step {
  color: var(--accent-text);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.shop-stage-card__title {
  color: var(--ew-white);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin: 0;
}
.shop-stage-card__body {
  color: var(--ew-paper);
  font-size: 13px;
  line-height: 1.55;
  flex-grow: 1;
}
.shop-stage-card__cta {
  color: var(--ew-white);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--ew-steel);
  padding-bottom: 4px;
  align-self: flex-start;
}
.shop-stage-card:hover .shop-stage-card__cta { border-color: var(--accent); }

/* ============================================================
   BUNDLES / SPECIALS
   ============================================================ */
.shop-bundle-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 720px) { .shop-bundle-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .shop-bundle-grid { grid-template-columns: repeat(3, 1fr); } }

.shop-bundle-card {
  position: relative;
  background: var(--ew-panel);
  border: 1px solid var(--ew-steel);
  text-decoration: none;
  transition: border-color 0.15s, transform 0.18s;
}
.shop-bundle-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.shop-bundle-card__img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; background: var(--ew-black); }
.shop-bundle-card__body { padding: 16px; }
.shop-bundle-card__title { color: var(--ew-white); font-size: 16px; margin: 0; }
.shop-bundle-card__price { color: var(--ew-paper); font-size: 13px; margin-top: 6px; font-variant-numeric: tabular-nums; }
.shop-bundle-card__badge {
  position: absolute;
  top: 10px; left: 10px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 10px;
  z-index: 1;
}

/* ============================================================
   COLLABS — premium treatment
   ============================================================ */
.shop-collab {
  background:
    radial-gradient(circle at 30% 0%, rgba(220,60,60,0.06) 0%, transparent 60%),
    var(--ew-black);
}
/* Phase 3 3D: 4-wide on desktop so a 4-card collab row fills cleanly
   (no orphaned 2nd-row tile). Mobile stays 1-up, tablet 2-up. */
.shop-collab-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 600px) { .shop-collab-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .shop-collab-grid { grid-template-columns: repeat(4, 1fr); } }

.shop-collab-card {
  position: relative;
  background: #0a0a0c;
  border: 1px solid #2a2a30;
  text-decoration: none;
  overflow: hidden;
  transition: border-color 0.18s;
}
.shop-collab-card:hover { border-color: var(--accent); }
.shop-collab-card__img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.shop-collab-card__body { padding: 18px 18px 22px; }
.shop-collab-card__overline {
  color: var(--accent-text);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.shop-collab-card__title { color: var(--ew-white); font-size: 18px; font-weight: 600; margin: 8px 0 0; }
.shop-collab-card__price { color: var(--ew-paper); font-size: 13px; margin-top: 6px; font-variant-numeric: tabular-nums; }

/* ============================================================
   PRODUCT CAROUSEL (CSS scroll-snap, no JS)
   ============================================================ */
.shop-carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 70%;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--ew-steel) transparent;
  padding-bottom: 14px;
  -webkit-overflow-scrolling: touch;
}
@media (min-width: 720px) { .shop-carousel { grid-auto-columns: 38%; } }
@media (min-width: 960px) { .shop-carousel { grid-auto-columns: 24%; } }
.shop-carousel > * {
  scroll-snap-align: start;
}
.shop-carousel::-webkit-scrollbar { height: 6px; }
.shop-carousel::-webkit-scrollbar-track { background: transparent; }
.shop-carousel::-webkit-scrollbar-thumb { background: var(--ew-steel); }
.shop-carousel::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ============================================================
   APPAREL STRIP
   Phase 3 3D: full-page-width strip with adaptive left hero box.
   Layout: left hero is `flex: 1` so it grows to absorb whatever width
   the right carousel doesn't take. Right carousel uses fixed-width
   product cards (the existing shop-carousel) so its total width is
   data-driven; the hero box flexes to fill the differential.
   ============================================================ */
.shop-section--apparel { padding-left: 0; padding-right: 0; max-width: none; }
.shop-section--apparel .shop-section__inner { max-width: none; padding: 0; }
.shop-apparel {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: stretch;
}
@media (min-width: 720px) {
  .shop-apparel {
    flex-direction: row;
    align-items: stretch;
  }
  /* Left hero stays the dominant box at ~its current width (percentage
     basis), can still flex a little. */
  .shop-apparel__hero { flex: 1 1 44%; min-width: 280px; }
  /* Carousel is a FIXED natural 3-card region — it does NOT grow, so the
     cards keep their proportions (no blow-up to fill). */
  .shop-apparel .shop-carousel { flex: 0 0 auto; max-width: none; }
}
.shop-apparel__hero {
  background: var(--ew-panel);
  border-top: 1px solid var(--ew-steel);
  border-bottom: 1px solid var(--ew-steel);
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}
.shop-apparel__overline { color: var(--accent-text); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; }
.shop-apparel__title { color: var(--ew-white); font-size: clamp(22px, 3vw, 32px); margin: 0; }
.shop-apparel__body { color: var(--ew-paper); font-size: 13px; line-height: 1.55; }

/* APPAREL-2 — scoped card alignment for the 3-up apparel strip.
   All selectors prefixed `.shop-apparel` so the global `.shop-carousel`
   (Trending) and the global `.ew-product` card stay byte-identical
   everywhere else. <720px keeps the inherited horizontal scroller. */
@media (min-width: 720px) {
  /* The carousel region becomes a clean 3-up grid that fills the
     right ~half beside the hero — no horizontal scroll, no right clip. */
  .shop-apparel .shop-carousel {
    grid-auto-flow: row;
    /* Fixed per-card track => the carousel has a definite natural width
       and the cards keep their proportions (don't blow up to fill). The
       hero grows (flex:1 1 44%) and the carousel is flex:0 0 auto, so the
       carousel sits right-aligned at the page edge while the hero absorbs
       the differential. Track steps up at 960px so the 3-up still fits
       beside the hero in the 720–960 band without overflowing the row. */
    grid-template-columns: repeat(3, 132px);
    grid-auto-columns: auto;
    /* Single full-height row so each card fills the carousel height and
       its bottom meets the hero/filler bottom (shared baseline). */
    grid-template-rows: 1fr;
    overflow: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
  }
  /* Equal-height cards with the price pinned to a shared bottom baseline,
     so there's no graphite gap below shorter cards (e.g. the cap). */
  .shop-apparel .ew-product { height: 100%; }
  .shop-apparel .ew-product__body { flex: 1 1 auto; }
  .shop-apparel .ew-product__price { margin-top: auto; }
}
@media (min-width: 960px) {
  .shop-apparel .shop-carousel { grid-template-columns: repeat(3, 200px); }
}
@media (min-width: 1200px) {
  .shop-apparel .shop-carousel { grid-template-columns: repeat(3, 240px); }
}

/* ============================================================
   EDITORIAL (Tech Essays)
   ============================================================ */
.shop-editorial-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 720px) { .shop-editorial-grid { grid-template-columns: repeat(3, 1fr); } }

.shop-essay-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}
.shop-essay-card__img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  background: var(--ew-panel);
  border: 1px solid var(--ew-steel);
  transition: border-color 0.15s;
}
.shop-essay-card:hover .shop-essay-card__img { border-color: var(--accent); }
.shop-essay-card__overline { color: var(--accent-text); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; }
.shop-essay-card__title { color: var(--ew-white); font-size: 18px; margin: 0; line-height: 1.3; }
.shop-essay-card__excerpt { color: var(--ew-paper); font-size: 13px; line-height: 1.55; }
.shop-essay-card__cta { color: var(--ew-paper); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; margin-top: 4px; }
.shop-essay-card:hover .shop-essay-card__cta { color: var(--ew-white); }

/* Source shop landing owns its full-width sections. The Woo archive wrapper
   remains unchanged unless its direct content is the admitted shop hero. */
main#content.ew-bay:has(> .ew-container > .shop-hero) {
  padding: 0;
}
main#content.ew-bay > .ew-container:has(> .shop-hero) {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
}
main#content.ew-bay > .ew-container:has(> .shop-hero) > .woocommerce-breadcrumb {
  display: none;
}

/* Keep the source shop sections within narrow native viewports. */
@media (max-width: 760px) {
  #chassis.shop-section .ew-chassis-hub__tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #chassis.shop-section .ew-chassis-hub__tiles .ew-chassis-tile {
    min-width: 0;
  }
  #chassis.shop-section .ew-chassis-tile__meta {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}
@media (min-width: 720px) {
  .shop-apparel > .shop-apparel__hero {
    min-width: 0;
  }
}