/* =============================================================================
   store/shop.css — the Shop all page, and only that page.
   Scoped to .shop on <body>, the same convention as devices/ring/ring.css and
   store/phenometech-ring/pdp.css: a bad rule in here can only break one URL.

   Layout is the classic catalogue shape: a standing hero, then a two track
   body with a sticky category index on the left and the categories themselves
   stacked on the right. Under 900px the index lies down and becomes a sticky
   chip rail, which is the only place a phone has room for it.

   Colour comes entirely from the site tokens. Nothing here may invent a grey
   between #6E6E73 and #D2D2D7 — see the $gapRule note in shared.css.
   ========================================================================== */

/* Proportions at 1440: card
   16px radius with 8px padding, media 12px radius, pills 10/16 at
   48px radius with 10px between them, section heading 24px at weight 500.
   Palette: the card ground is the site's single tint, the
   media plane is phenome-blue-100, and the live pill is phenome-blue-900. */
.shop {
  --shop-rail-w: 232px;
  --shop-gap: 56px;
  --shop-stick: calc(var(--ph-nav-h) + 20px);
  --shop-card: var(--gl-tint-sunk);
  --shop-media: var(--phenome-blue-100);
}

/* ---- 1. Hero ------------------------------------------------------------ */
/* The headline is the whole opening. No image, no film: the products below
   carry every photograph on the page, so the top of it stays type only and
   the first tile lands as the first picture you see. */

.shop .shop-hero {
  padding: calc(var(--ph-nav-h) + 56px) 0 64px;
}

.shop .shop-title {
  margin: 0;
  max-width: 19ch;
  font-size: clamp(40px, 5.4vw, 72px);
  line-height: 1.04;
  letter-spacing: var(--ph-tr-80-600);
  font-weight: var(--ph-w-600);
  color: var(--ph-text-1);
}

.shop .shop-title em {
  font-style: normal;
  color: var(--ph-accent-link);
}

/* ---- 2. The two track body ---------------------------------------------- */

.shop .shop-body {
  padding: 0 0 var(--ph-sec-bottom);
}

.shop .shop-layout {
  display: grid;
  grid-template-columns: var(--shop-rail-w) minmax(0, 1fr);
  gap: var(--shop-gap);
  align-items: start;
}

/* ---- 3. Category index -------------------------------------------------- */

.shop .shop-rail {
  position: sticky;
  top: var(--shop-stick);
  align-self: start;
}

.shop .shop-rail-title {
  margin: 0 0 16px;
  font-size: var(--ph-fs-17);
  line-height: 1.3;
  font-weight: var(--ph-w-600);
  color: var(--ph-text-1);
}

/* Pills wrap to their own text width, so the rail is a ragged column rather
   than a list of full width rows. That raggedness is the shape of it. */
.shop .shop-rail-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.shop .shop-rail-link {
  padding: 10px 16px;
  border-radius: 48px;
  background: var(--shop-card);
  color: var(--ph-text-1);
  text-decoration: none;
  font-size: var(--ph-fs-14);
  line-height: 1;
  letter-spacing: var(--ph-tr-17-400);
  transition: background .2s linear, color .2s linear;
}

/* Each category carries one line drawn glyph ahead of its name, the same
   glyph on the pill and on the heading it jumps to, so the two read as one
   thing. Stroke only, in the text colour, so it inverts with the live pill. */
.shop .shop-rail-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* The glyph is the RAIL's, and only the rail's. It was drawn a second time, in
   a tinted disc, beside each category heading in the body; two marks for one
   category read as two different things, and the heading does not need a
   picture of itself when the rail entry that jumps to it already carries one.
   Removed 2026-09-16 at the user's request, markup and rule together. */
.shop .shop-rail-ic {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-left: -2px;
  opacity: .8;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.shop .shop-rail-link.on .shop-rail-ic { opacity: 1; }

.shop .shop-rail-link:hover { background: var(--phenome-blue-100); }

.shop .shop-rail-link.on {
  background: var(--phenome-blue-900);
  color: var(--ph-white);
}

/* ---- 4. A category block ------------------------------------------------ */

.shop .shop-cat {
  scroll-margin-top: calc(var(--ph-nav-h) + 24px);
  padding-top: 8px;
}

.shop .shop-cat + .shop-cat { margin-top: 56px; }

/* Heading only. A category that needs a sentence explaining it is a category
   whose name is wrong, and the grid under it says the rest. */
.shop .shop-cat-title {
  margin: 0 0 16px;
  padding-top: 16px;
  font-size: var(--ph-fs-24);
  line-height: 1;
  letter-spacing: var(--ph-tr-24-600);
  font-weight: var(--ph-w-600);
  color: var(--ph-text-1);
}

/* Three across at full width. A category holding one product leaves the other
   two columns empty, which keeps every
   card on the page the same size. */
.shop .shop-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

/* ---- 5. Product card ---------------------------------------------------- */

/* The card is a filled panel with the picture inset inside it, not a bare
   tile with type under it. Full height with a growing body, so the price and
   the pill sit on one line across a row however many lines the name takes. */
.shop .pcard {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 8px;
  border-radius: 16px;
  background: var(--shop-card);
  text-decoration: none;
  color: inherit;
  transition: background .2s linear;
}

.shop .pcard:hover { background: var(--phenome-blue-100); }

.shop .pcard-tile {
  position: relative;
  display: block;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 12px;
  background: var(--shop-media);
  aspect-ratio: 311 / 335;
  max-width: 100%;
}

.shop .pcard-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform .5s var(--ph-ease);
}

.shop .pcard:hover .pcard-tile img { transform: scale(1.035); }

/* A flag sits in the picture's top right corner, not in the body, so it reads
   as a mark on the product rather than another line of type competing with the
   name. Only a handful of cards carry one: the moment every card is flagged,
   no card is. New is the filled navy, Popular the white counter pill, because
   a shop has more of the second kind and the quieter chip can repeat. */
.shop .pcard-tag {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 11px;
  border-radius: 50px;
  background: var(--ph-accent);
  color: var(--ph-white);
  font-size: var(--ph-fs-12);
  line-height: 1;
  letter-spacing: var(--ph-tr-12-600);
  font-weight: var(--ph-w-600);
  white-space: nowrap;
  pointer-events: none;
}

.shop .pcard-tag.is-pop {
  background: var(--ph-white);
  color: var(--ph-accent);
}

.shop .pcard-body {
  display: block;
  flex: 1 1 auto;
  padding: 14px 8px 0;
}

.shop .pcard-name {
  display: block;
  font-size: var(--ph-fs-17);
  line-height: 1.25;
  letter-spacing: var(--ph-tr-17-400);
  font-weight: var(--ph-w-600);
  color: var(--ph-text-1);
}

.shop .pcard-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 4px;
  min-height: calc(2 * 1.3em);
  font-size: var(--ph-fs-12);
  line-height: 1.3;
  color: var(--ph-text-2);
}

.shop .pcard-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding: 0 8px 8px;
}

.shop .pcard-price {
  font-size: var(--ph-fs-17);
  line-height: 1.3;
  font-weight: var(--ph-w-600);
  color: var(--ph-text-1);
  font-variant-numeric: tabular-nums;
}

/* Drawn as a pill, not built as one: a real button inside an anchor is invalid
   and swallows the card's own click target. It stands there at rest rather
   than arriving on hover, because on a shop the price and the way to buy
   belong together at all times, on a mouse or a thumb. */
.shop .pcard-go {
  display: inline-flex;
  align-items: center;
  height: 32px;
  margin-left: auto;
  padding: 0 16px;
  border-radius: 50px;
  background: var(--ph-accent);
  color: var(--ph-white);
  font-size: var(--ph-fs-14);
  line-height: 1;
  white-space: nowrap;
  transition: background .2s linear;
}

.shop .pcard:hover .pcard-go { background: var(--ph-accent-hover); }

.shop .pcard:focus-visible {
  outline: 2px solid var(--ph-focus);
  outline-offset: 4px;
}

/* ---- 6. Entrance -------------------------------------------------------- */
/* Cards are grandchildren of the section, so this cannot collide with the
   site wide reveal in shared.js, which only touches a section's own children. */

.shop .pcard {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s linear, transform .5s var(--ph-ease);
  transition-delay: calc(var(--i, 0) * 55ms);
}

.shop .pcard.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .shop .pcard { opacity: 1; transform: none; transition: none; }
  .shop .pcard-tile img { transition: none; }
}

/* ---- 7. Closing line ---------------------------------------------------- */
/* One row, not a band of six reassurances. The catalogue is the page. */

.shop .shop-end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: 96px;
  padding: 32px 0 0;
  /* The one rule on the page is the brand blue, not the grey divider: it is
     closing the catalogue, so it should read as the house drawing a line. */
  border-top: 1px solid var(--ph-accent);
}

.shop .shop-end-title {
  margin: 0;
  font-size: var(--ph-fs-21);
  line-height: 1.3;
  letter-spacing: var(--ph-tr-21-600);
  font-weight: var(--ph-w-600);
  color: var(--ph-text-1);
}

.shop .shop-end-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-left: auto;
}

.shop .shop-pill {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 20px;
  border-radius: 50px;
  background: var(--ph-accent);
  color: var(--ph-white);
  text-decoration: none;
  font-size: var(--ph-fs-14);
  transition: background .2s linear;
}

.shop .shop-pill:hover { background: var(--ph-accent-hover); }
.shop .shop-pill:active { background: var(--ph-accent-active); }

.shop .shop-pill.is-plain {
  background: var(--shop-card);
  color: var(--ph-text-1);
}

.shop .shop-pill.is-plain:hover { background: var(--phenome-blue-100); }

/* ---- 8. Narrow ---------------------------------------------------------- */

@media (max-width: 1100px) {
  .shop { --shop-rail-w: 196px; --shop-gap: 40px; }
}

@media (max-width: 900px) {
  .shop { --shop-stick: 48px; }

  .shop .shop-hero { padding: 40px 0 36px; }

  .shop .shop-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  /* Lying down, the index becomes a chip rail that rides under the nav. It
     keeps its own ground so the cards scrolling behind it stay legible. */
  .shop .shop-rail {
    position: sticky;
    top: var(--shop-stick);
    z-index: 20;
    margin: 0 calc(var(--ph-margin) * -1);
    padding: 10px var(--ph-margin) 12px;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: var(--gl-blur-thin);
    -webkit-backdrop-filter: var(--gl-blur-thin);
    border-bottom: 1px solid var(--ph-line);
  }

  .shop .shop-rail-title { display: none; }

  .shop .shop-rail-nav {
    flex-direction: row;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .shop .shop-rail-nav::-webkit-scrollbar { display: none; }

  .shop .shop-rail-link {
    flex: 0 0 auto;
    padding: 9px 14px;
    white-space: nowrap;
  }

  .shop .shop-cat { scroll-margin-top: 112px; }
  .shop .shop-cat + .shop-cat { margin-top: 48px; }
  .shop .shop-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .shop .shop-end { margin-top: 64px; }
  .shop .shop-end-acts { margin-left: 0; }
}

@media (max-width: 560px) {
  .shop .shop-cat-title { font-size: var(--ph-fs-21); }
  .shop .pcard-name { font-size: var(--ph-fs-14); }
  .shop .pcard-desc { display: none; }
  .shop .pcard-price { font-size: var(--ph-fs-14); }
  /* The pill used to say "Buy", which is three characters and sat beside the
     price on any card. "Add to cart" (2026-09-16, one label for the whole site)
     is 86px at this size and the card's foot is 126px wide inside its padding —
     so beside a price it spilled past the card's own edge. Two rows here, the
     price above and the pill across the full width beneath it: the cards are
     grid items and equalise, so nothing goes ragged, and a full width control is
     the better thumb target anyway. */
  .shop .pcard-foot {
    margin-top: 12px; gap: 6px;
    flex-wrap: wrap; align-items: stretch;
  }
  .shop .pcard-go {
    height: 30px; padding: 0 13px; font-size: var(--ph-fs-12);
    margin-left: 0; flex: 1 0 100%; justify-content: center;
  }
  .shop .pcard-tag { top: 8px; right: 8px; height: 22px; padding: 0 9px; }
}

/* ---- 9. The store's front page ------------------------------------------ */
/* /store/ only (src/site/StoreHome.jsx), in apple.com/store's shape, measured
   at 1440 and 390: an 80px headline with its line on the right, a row of the
   ranges, then shelves of cards on a grey ground that scroll sideways from the
   headline's left edge out to the window's edge, a round arrow at each end.
   Everything is under .st-hero and .st-home, so the category pages keep the
   grid above. */

.shop main:has(.st-home) { background: var(--shop-card); }

/* The purchase pages' one ink and its grey (apple/type.css, .ph-type.pdp). */
.shop .st-hero,
.shop .st-home { --ph-text-1: #1d1d1f; --ph-text-2: #6e6e73; }

.shop .st-hero { padding: calc(var(--ph-nav-h) + 76px) 0 40px; }

.shop .st-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  column-gap: 40px;
  row-gap: 14px;
}

/* One heading in two parts: the word on the left and its line on the right.
   The line is the heading's own text, which the grid puts in the second column. */
.shop .st-hero .shop-title {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  column-gap: 40px;
  align-items: center;
  max-width: none;
  margin: 0;
  font-size: 28px;
  line-height: 1.143;
  font-weight: 600;
  letter-spacing: .007em;
  text-align: right;
  color: var(--ph-text-1);
}

.shop .st-hero .shop-title-lead {
  display: block;
  margin: 0;
  font-size: 80px;
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -.015em;
  text-align: left;
  color: var(--ph-text-1);
}

.shop .st-help {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  margin: 0;
  font-size: 17px;
  line-height: 1.24;
}

.shop .st-help a { color: var(--ph-accent-link); text-decoration: none; }
.shop .st-help a::after { content: '\00a0\203a'; }

.shop .st-home {
  --st-edge: max(var(--ph-margin), calc((100% - var(--ph-content-max)) / 2));
  padding-bottom: 48px;
}

.shop .st-shelf { padding-top: 36px; scroll-margin-top: calc(var(--ph-nav-h) + 12px); }
.shop .st-shelf.is-ranges { padding-top: 0; }

.shop .st-h2 {
  max-width: 34em;
  margin: 0 0 4px;
  font-size: 28px;
  line-height: 1.143;
  font-weight: 600;
  letter-spacing: .007em;
  color: var(--ph-text-2);
}

.shop .st-h2 b { font-weight: inherit; color: var(--ph-text-1); }
/* The shelf's line sits under its name, on a line of its own. */
.shop .st-h2 b, .shop .st-h2-line { display: block; }

.shop .st-scroller { position: relative; }

/* The row runs the full width of the window; its padding puts the first card
   on the headline's left edge and lets the last one stop on the right one. */
.shop .st-rail {
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 20px var(--st-edge) 32px;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-padding-inline: var(--st-edge);
  scrollbar-width: none;
}

.shop .st-rail::-webkit-scrollbar { display: none; }

.shop .st-slot { flex: 0 0 auto; display: flex; }

.shop .st-rail.is-waiting > .st-slot { opacity: 0; transform: translate3d(56px, 0, 0); }

.shop .st-rail.is-in > .st-slot {
  opacity: 1;
  transform: none;
  transition: opacity .7s cubic-bezier(.22, .61, .36, 1), transform .9s cubic-bezier(.2, .8, .2, 1);
  transition-delay: calc(var(--i, 0) * 70ms);
}

/* Centred on the cards: the row's padding is 20px above and 32px below them. */
.shop .st-paddle {
  position: absolute;
  top: calc(50% - 6px);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(210, 210, 215, .64);
  color: rgba(0, 0, 0, .56);
  cursor: pointer;
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  transition: opacity .2s linear, background-color .2s linear, color .2s linear;
}

.shop .st-paddle svg { width: 24px; height: 24px; stroke-width: 2.2; }
.shop .st-paddle:hover { background: rgba(223, 223, 227, .7); color: rgba(0, 0, 0, .64); }
.shop .st-paddle.is-prev { left: 18px; }
.shop .st-paddle.is-next { right: 18px; }
.shop .st-paddle:disabled { opacity: 0; pointer-events: none; }
.shop .st-paddle:focus-visible { outline: 2px solid var(--ph-focus); outline-offset: 2px; }

/* The ranges: each family drawn on the page's own grey, its name under it. The
   range photos are shot on white, which the multiply lays onto the grey. */
.shop .st-shelf.is-ranges .st-rail { gap: 12px; padding-top: 16px; padding-bottom: 28px; }

.shop .st-range {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 176px;
  color: var(--ph-text-1);
  text-decoration: none;
}

.shop .st-range-media {
  display: block;
  width: 168px;
  height: 112px;
}

.shop .st-range-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform .3s cubic-bezier(0, 0, .5, 1);
}

.shop .st-range:hover .st-range-media img { transform: scale(1.05); }

.shop .st-range-name {
  font-size: 14px;
  line-height: 1.29;
  font-weight: 600;
  letter-spacing: -.016em;
  text-align: center;
}

.shop .st-range:focus-visible { outline: 2px solid var(--ph-focus); outline-offset: 4px; border-radius: 12px; }

/* ---- Cards ---- */

.shop .st-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 18px;
  background: var(--ph-white);
  color: var(--ph-text-1);
  text-decoration: none;
  box-shadow: 2px 4px 12px rgba(0, 0, 0, .08);
  transition: box-shadow .3s cubic-bezier(0, 0, .5, 1), transform .3s cubic-bezier(0, 0, .5, 1);
}

.shop a.st-card:hover {
  box-shadow: 2px 4px 16px rgba(0, 0, 0, .16);
  transform: scale3d(1.01, 1.01, 1.01);
}

.shop a.st-card:focus-visible { outline: 2px solid var(--ph-focus); outline-offset: 4px; }

.shop .st-card.is-big { width: 400px; height: 500px; }
.shop .st-card.is-dark { background: #000; color: var(--ph-white); }

.shop .st-card-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding: 30px 30px 0;
}

.shop .st-eyebrow {
  margin-bottom: 6px;
  font-size: 12px;
  line-height: 1.33;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ph-accent);
}

.shop .st-card.is-dark .st-eyebrow { color: #fff; }

.shop .st-card-title {
  font-size: 28px;
  line-height: 1.143;
  font-weight: 600;
  letter-spacing: .007em;
}

.shop .st-card-sub {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.29;
  font-weight: 600;
  letter-spacing: -.016em;
}

.shop .st-card-price {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.29;
  letter-spacing: -.016em;
}

/* A big card's photo fills its lower part; on a dark card the top of the photo
   fades into the black so the words stand on one ground. */
.shop .st-card-media {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 58%;
}

.shop .st-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.shop .st-card-media.is-contain img {
  box-sizing: border-box;
  padding: 0 24px 28px;
  object-fit: contain;
  object-position: 50% 100%;
}

.shop .st-card.is-dark .st-card-media::after {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 40%;
  background: linear-gradient(#000, rgba(0, 0, 0, 0));
}

/* A product in a category shelf: its catalogue photo across the top, then
   its name, first line and price, the price on the card's foot. */
.shop .st-card.is-product { width: 313px; }

.shop .st-product-media {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--ph-white);
}

.shop .st-product-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.shop .st-card.is-product .st-card-copy { flex: 1 1 auto; padding: 20px 24px 24px; }

.shop .st-card.is-product .st-card-title { font-size: 17px; line-height: 1.235; letter-spacing: -.022em; }

.shop .st-card.is-product .st-card-sub {
  -webkit-line-clamp: 2;
  margin-top: 6px;
  font-weight: 400;
  color: var(--ph-text-2);
}

.shop .st-card.is-product .st-card-price { margin-top: auto; padding-top: 16px; font-weight: 600; }

/* The claims and the ways to get help: an icon over a line of large type. Four
   of them fill the headline's width exactly, so a full window never scrolls
   them a few pixels. */
.shop .st-card.is-note {
  gap: 16px;
  width: 300px;
  min-height: 236px;
  padding: 30px;
}

.shop .st-note-icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  color: var(--ph-accent);
  stroke-width: 1.6;
}

.shop .st-note-text,
.shop .st-note-title {
  margin: 0;
  font-size: 24px;
  line-height: 1.167;
  font-weight: 600;
  letter-spacing: .009em;
}

.shop .st-note-text em { font-style: normal; color: var(--ph-accent); }

.shop .st-note-line {
  margin-top: -8px;
  font-size: 14px;
  line-height: 1.43;
  letter-spacing: -.016em;
  color: var(--ph-text-2);
}

@media (prefers-reduced-motion: reduce) {
  .shop .st-rail.is-waiting > .st-slot { opacity: 1; transform: none; }
  .shop .st-card, .shop .st-range-media img { transition: none; }
}

@media (max-width: 1068px) {
  .shop .st-hero .shop-title-lead { font-size: 64px; }
}

@media (max-width: 734px) {
  .shop .st-hero { padding: calc(var(--ph-nav-h) + 40px) 0 24px; }

  .shop .st-head,
  .shop .st-hero .shop-title { grid-template-columns: minmax(0, 1fr); }

  .shop .st-hero .shop-title {
    row-gap: 8px;
    font-size: 21px;
    line-height: 1.19;
    letter-spacing: .011em;
    text-align: left;
  }

  .shop .st-hero .shop-title-lead { font-size: 48px; line-height: 1.083; letter-spacing: -.003em; }

  .shop .st-help { grid-column: 1; align-items: flex-start; gap: 12px; margin-top: 16px; }

  .shop .st-shelf { padding-top: 28px; }

  .shop .st-h2 { font-size: 24px; line-height: 1.167; letter-spacing: .009em; }

  .shop .st-rail { gap: 16px; scroll-snap-type: x mandatory; }
  .shop .st-slot { scroll-snap-align: start; }

  .shop .st-shelf.is-ranges .st-rail { gap: 4px; }
  .shop .st-range { width: 128px; }
  .shop .st-range-media { width: 120px; height: 80px; }

  .shop .st-card.is-big { width: min(400px, calc(100vw - var(--ph-margin) - 57px)); height: 450px; }

  .shop .st-card.is-product,
  .shop .st-card.is-note { width: min(313px, calc(100vw - var(--ph-margin) - 96px)); }

  .shop .st-card-copy { padding: 26px 26px 0; }
  .shop .st-card-title { font-size: 24px; line-height: 1.167; }

  .shop .st-note-text,
  .shop .st-note-title { font-size: 21px; line-height: 1.19; }
}