/* ==========================================================================
   Shop landing
   ========================================================================== */

.shop-hero { padding-block: clamp(var(--space-6), 5vw, var(--space-9)) var(--section-pad); }
.shop-hero__copy { align-items: flex-start; }
.shop-hero__title { font-size: var(--text-heading); font-weight: 700; line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); max-width: 12ch; }

.pair {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2) var(--space-4);
  align-items: center;
  width: 100%;
  max-width: 34rem;
  padding: var(--space-4) var(--space-5);
  border: var(--stroke);
  border-radius: var(--radius-sm);
}
.pair__icon {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--color-brand-deep);
  background-color: var(--color-highlight);
  border: var(--stroke);
  border-radius: var(--radius-pill);
}
.pair p { font-weight: 500; color: var(--color-brand-deep); }
.pair .arrow-link { min-height: var(--tap); font-size: var(--text-body); }   /* 44px tap band (round 297; was 32) */

/* Poster */
/* ---------- Shop shelf (round 51): a static shopfront like the home hero's: awning, three racks of five, plinth ---------- */
.shop-hero__grid { display: grid; gap: var(--space-8); align-items: center; }
.shop-hero__lede { margin: 0; font-size: var(--text-body); line-height: var(--leading-body); letter-spacing: var(--tracking-body); color: var(--color-text-secondary); text-wrap: pretty; }
.shop-hero__shelf { display: grid; place-items: center; }
@media (min-width: 64em) { .shop-hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }
.shelf { --shelf-a: #E8D3AA; --shelf-b: #F2E6CF; width: min(100%, 32.25rem); }
.shelf__awning { display: block; width: 100%; height: auto; aspect-ratio: 516 / 98; overflow: visible; filter: drop-shadow(0 2px 0 rgb(24 24 24 / 0.08)); }
.awning__rail, .awning__dark { fill: var(--shelf-a); }
.awning__light { fill: var(--shelf-b); }
.shelf__cabinet { display: grid; gap: 0; margin: -0.5rem 5% 0; padding-top: var(--space-2); background-color: var(--color-shelf-lip, #F5F5F5); }
.shelf__rack { position: relative; display: grid; padding-top: var(--space-4); }
.shelf__row { display: flex; align-items: flex-end; justify-content: space-around; gap: var(--space-1); min-height: 6.5rem; padding-inline: var(--space-3); }
.shelf__item { display: grid; place-items: end center; width: 18%; transform-origin: 50% 100%; transition: transform var(--dur-hover) var(--ease-out); }
.shelf__item:hover { transform: scale(1.1); }
.shelf__item img { display: block; width: auto; max-width: 100%; height: 5.5rem; object-fit: contain; filter: drop-shadow(0 2px 2px rgb(24 24 24 / 0.16)); }
.shelf__item--ph { align-items: center; width: 18%; height: 5rem; margin-bottom: 0.25rem; color: var(--color-text); background-color: var(--yellow); border-radius: var(--radius-md); }
.shelf__rack:nth-child(2) .shelf__item--ph { background-color: var(--shelf-a); }
.shelf__rack:nth-child(3) .shelf__item--ph { background-color: var(--shelf-b); }
.shelf__item--ph .icon { width: var(--icon-xl); height: var(--icon-xl); }
.shelf__board { display: block; height: 1rem; margin-top: var(--space-1); background-color: var(--color-shelf-base, #E0E0E0); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.shelf__tag { position: absolute; left: 50%; bottom: 0.1rem; max-width: 80%; padding-inline: var(--space-3); overflow: hidden; font-size: var(--text-eyebrow); font-weight: 500; letter-spacing: var(--tracking-eyebrow); line-height: var(--leading-eyebrow); text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; color: var(--color-text-secondary); background-color: var(--color-surface); border-radius: 2px; translate: -50% 0; }
.shelf__plinth { display: block; height: 1.5rem; margin: 0 5%; background-color: var(--color-shelf-base, #E0E0E0); }

/* How it works + more shops */
.shop-how__steps { margin: 0; padding: 0; list-style: none; }
.shop-how__steps li { display: grid; gap: var(--space-3); align-content: start; }
.shop-how__title { font-size: var(--text-subheading); }
.shop-how__steps p { color: var(--color-text-secondary); }
.shop-how .beat__n {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  font-family: var(--font-display);
  font-size: var(--text-subheading);
  font-weight: 600;
  color: var(--color-on-dark);
  background-color: var(--color-brand);
  border-radius: var(--radius-pill);
  box-shadow: 3px 3px 0 var(--color-brand-deep);
}
.shop-more__title { margin-bottom: var(--space-5); font-size: var(--text-subheading); font-weight: 600; }
.chip--more { border-style: solid; }

/* Shop pages are white like the story and blog pages; the download band and footer keep the home look */
body[data-page="shop"] { background-color: var(--color-surface); }
.shop-hero__copy { display: grid; justify-items: start; align-content: center; min-width: 0; }   /* min-width: may shrink below its longest line (round 227: Reliance's page overflowed at 320) */
.shop-hero__copy > * { max-width: 100%; }
.shop-hero__copy > .cluster, .shop-hero__copy > .promise, .shop-hero__copy > .pair { margin-top: var(--space-2); }
.shop-hero__title { margin: 0; max-width: 14ch; font-size: var(--text-heading); line-height: var(--leading-heading); }