/* Shop (option 1, "Classic") — the home page's composition carried over:
   hero (title, lede and a pointer to How to order on the minor side | the four categories as stone tiles
   on the major side), then the four category sections, closing.
   How to order is stated once, in the closing: the footer's line repeats it, so it is hidden on this page. */

/* ---------- hero: text 38.2 | categories 61.8 ---------- */
.hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr); gap: var(--s-5) var(--split-gap);
  align-items: center; padding-top: var(--s-5);
}
.hero h1 { line-height: 1.08; margin: 0 0 var(--s-3); } /* size: the one h1 size (style.css --h1) */
.hero .lede { margin-bottom: var(--s-3); }
.hero .link-arrow::after { content: "\2193"; } /* jumps down the page, like the category tiles */
.hero .link-arrow:hover::after { transform: translateY(3px); }

/* ---------- the four categories: stone tiles, every subject at the same scale ----------
   cat-*.webp are 1.618:1 crops of originals/box-open, lavender-soap, liquid-set-lemongrass and
   saver-dark-wood-with-soap, padded with the photos' own stone (#dfddd1) so each subject fills 72% of the
   tile's height, centred. */
.cats ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--gap); list-style: none; margin: 0; padding: 0; }
.cats a { display: block; color: inherit; text-decoration: none; }
.cat-media { display: block; aspect-ratio: 1.618 / 1; }
.cat-media img { position: absolute; inset: 0; }
.cat-name { display: flex; align-items: baseline; gap: var(--s-2); padding-top: var(--s-2); font-size: var(--t-1); line-height: 1.3; color: var(--cream); }
.cat-name::after { content: "\2193"; margin-left: auto; font: 400 var(--t-0)/1 var(--sans); color: var(--orange); transition: transform .2s ease; }
.cats a:hover .cat-name { text-decoration: underline 1px var(--orange); text-underline-offset: .22em; }
.cats a:hover .cat-name::after { transform: translateY(3px); }

/* ---------- categories ---------- */
/* three across; the four liquids sit four across on desktop (style.css data-count="4"), so no row is left
   with a single tile */
.shop-cat { scroll-margin-top: var(--s-3); }
/* under the bars: "Subscribe and save", a ruled strip cut on the 38.2 | 61.8 line (title | text and its button) */
.sub-strip {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr); gap: var(--s-2) var(--split-gap);
  align-items: baseline; margin-top: var(--s-5); padding-top: var(--s-3); border-top: 1px solid var(--rule);
}
.sub-strip h3 { margin: 0; }
.sub-strip-body { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-4); }
.sub-strip-body p { flex: 1 1 22em; margin: 0; max-width: 30em; font-size: var(--t-0h); } /* the button beside it where both fit */

/* ---------- closing: How to order, with its two actions in one row ---------- */
#how-to-order { scroll-margin-top: var(--s-3); }
/* two paragraphs, so the split flips to headline 38.2 | text 61.8; the wider measure keeps the text short */
@media (min-width: 1000px) { .closing-long { grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr); } }
.closing-long .closing-aside > p { max-width: 34em; }
.closing .actions .btn { margin-top: 0; }
.site-footer .footer-base p:last-child { display: none; } /* the closing above says it */

/* ---------- tablet ---------- */
@media (max-width: 999px) {
  .hero { grid-template-columns: minmax(0, 1fr); padding-top: var(--s-5); }
  .hero-text { max-width: 34em; }
  .sub-strip { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- mobile ---------- */
@media (max-width: 759px) {
  .hero { gap: var(--s-4); }
  .cats ol { gap: var(--s-3) var(--s-2); }
  .cat-name { font-size: var(--t-0); gap: var(--s-1); padding-top: var(--s-1); min-height: 44px; }
  .cat-name::after { display: none; }
  .shop-cat:first-of-type { margin-top: var(--s-6); }
  .closing .actions .btn { flex: 1 1 auto; }
  .sub-strip .btn { width: 100%; }
  /* one tile size: three-product categories stay square, two across (the shared odd-count rule would widen the first) */
  .grid[data-odd] > .card:first-child { grid-column: auto; }
  .grid[data-odd] > .card:first-child .card-media { aspect-ratio: 1 / 1; }
  .grid[data-odd] > .card:first-child .card-media img { object-fit: cover; }
}
@media (max-width: 379px) {
  .cat-name { gap: 6px; font-size: .9375rem; } /* "03 Organic Liquid Soap" stays on one line, so the four captions line up */
}