/* 05-home.css: home sections (design-system.md Layout > Home). */
/* Hero: full-bleed photo; at desktop the text block sits bottom-left on a solid Iron Charcoal scrim (AA whatever
 * the photo); the caption runs as one label line under the hero. At phone the photo (4:3) sits above the text. */
body.woopify .woopify-section--hero { padding: 0; }
body.woopify .woopify-hero { position: relative; }
body.woopify .woopify-hero__media { margin: 0; }
body.woopify .woopify-hero__media .woopify-photo-pending, body.woopify .woopify-hero__img { display: flex; width: 100%; aspect-ratio: 16 / 9; max-height: calc(100vh - 72px); min-height: 520px; object-fit: cover; border-radius: 0; border: 0; }
body.woopify .woopify-hero__inner { position: absolute; left: 0; right: 0; bottom: var(--space-xl); }
body.woopify .woopify-hero__text { background: var(--woopify-charcoal); color: var(--color-bg); padding: var(--space-lg); max-width: 560px; border-radius: var(--radius-md); }
body.woopify .woopify-hero__text .woopify-h1 { color: var(--color-bg); margin: 0 0 var(--space-md); }
body.woopify .woopify-hero__text .woopify-hero__kicker, body.woopify .woopify-hero__text .woopify-hero__subhead { color: var(--color-bg); }
body.woopify .woopify-hero__subhead { font-size: 18px; margin: 0 0 var(--space-lg); }
body.woopify .woopify-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-md); }
body.woopify .woopify-hero__text .woopify-button-secondary { border-color: var(--color-bg); color: var(--color-bg); }
body.woopify .woopify-hero__text .woopify-button-secondary:hover { background: var(--color-bg); color: var(--woopify-charcoal); }
body.woopify .woopify-hero__caption { margin: 0; padding: var(--space-sm) 0; background: var(--color-surface); border-bottom: 1px solid var(--color-border); font-size: var(--fs-label); line-height: var(--lh-label); color: var(--color-ink-muted); }
body.woopify .woopify-hero__caption .woopify-container { display: block; }
@media (max-width: 767px) {
  body.woopify .woopify-hero__media .woopify-photo-pending, body.woopify .woopify-hero__img { aspect-ratio: 4 / 3; min-height: 0; max-height: none; }
  body.woopify .woopify-hero__inner { position: static; padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
  body.woopify .woopify-hero__text { background: transparent; color: var(--color-ink); padding: 0; max-width: none; }
  body.woopify .woopify-hero__text .woopify-h1 { color: var(--color-ink); }
  body.woopify .woopify-hero__text .woopify-hero__kicker { color: var(--color-ink-muted); }
  body.woopify .woopify-hero__text .woopify-hero__subhead { color: var(--color-ink); font-size: var(--fs-body-md); }
  body.woopify .woopify-hero__actions { flex-direction: column; gap: var(--space-sm); }
  body.woopify .woopify-hero__actions > a { width: 100%; }
  body.woopify .woopify-hero__text .woopify-button-secondary { border-color: var(--color-ink); color: var(--color-ink); }
}
/* Two-column text and photo ([problem], About [story]). */
body.woopify .woopify-split { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-xl); align-items: center; }
body.woopify .woopify-split--reverse { grid-template-columns: 7fr 5fr; }
body.woopify .woopify-split--reverse .woopify-split__media { order: 2; }
body.woopify .woopify-split__media { margin: 0; }
body.woopify .woopify-split__media .woopify-photo-pending { aspect-ratio: 4 / 5; }
body.woopify .woopify-split__text ul { list-style: none; padding: 0; margin: var(--space-md) 0; display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); }
body.woopify .woopify-split__text ul li { font-weight: 600; font-size: var(--fs-body-sm); padding-left: 18px; position: relative; }
body.woopify .woopify-split__text ul li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; background: var(--color-accent); border-radius: var(--radius-sm); }
@media (max-width: 767px) {
  body.woopify .woopify-split, body.woopify .woopify-split--reverse { grid-template-columns: 1fr; gap: var(--space-lg); }
  body.woopify .woopify-split--reverse .woopify-split__media { order: 0; }
}
/* Collection tiles: 4 across, 2 by 2 at phone; 4:5 photo, Fraunces name, one line, text link. */
body.woopify .woopify-section--categories { background: var(--color-surface); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
body.woopify .woopify-tiles { list-style: none; margin: var(--space-lg) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); }
body.woopify .woopify-tile__link { display: flex; flex-direction: column; color: var(--color-ink); text-decoration: none; height: 100%; }
body.woopify .woopify-tile__media { display: block; margin-bottom: var(--space-md); }
body.woopify .woopify-tile__media img, body.woopify .woopify-tile__media .woopify-photo-pending { display: flex; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-md); background-color: var(--color-bg); }
body.woopify .woopify-tile__name { font: 600 var(--fs-h3)/var(--lh-h3) var(--font-heading); }
body.woopify .woopify-tile__desc { color: var(--color-ink-muted); font-size: var(--fs-body-sm); margin: var(--space-xs) 0 auto; }
body.woopify .woopify-tile .woopify-text-link { margin-top: var(--space-sm); }
@media (max-width: 767px) {
  body.woopify .woopify-tiles { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg) var(--space-md); }
  body.woopify .woopify-tile__name { font-size: 18px; }
}
/* How it works: numbered steps in one row, stacked at phone. */
body.woopify .woopify-steps { list-style: none; margin: var(--space-lg) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); counter-reset: none; }
body.woopify .woopify-steps li { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); font-weight: 600; }
body.woopify .woopify-steps__n { flex: 0 0 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); font: 600 18px/1 var(--font-heading); }
@media (max-width: 767px) { body.woopify .woopify-steps { grid-template-columns: 1fr; gap: var(--space-sm); } }
/* Proof: quotes word for word, two columns, no stars. */
body.woopify .woopify-section--proof { background: var(--color-surface); border-top: 1px solid var(--color-border); }
body.woopify .woopify-quotes { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }
body.woopify .woopify-quote { margin: 0; padding: var(--space-lg); border-left: 3px solid var(--color-accent); background: var(--color-bg); }
body.woopify .woopify-quote blockquote { margin: 0; padding: 0; border: 0; font: 500 20px/1.45 var(--font-heading); color: var(--color-ink); quotes: none; }
body.woopify .woopify-quote blockquote::before, body.woopify .woopify-quote blockquote::after { content: none; }
body.woopify .woopify-quote blockquote p { margin: 0; }
body.woopify .woopify-quote figcaption { margin-top: var(--space-md); font-size: var(--fs-body-sm); color: var(--color-ink-muted); }
@media (max-width: 767px) { body.woopify .woopify-quotes { grid-template-columns: 1fr; } body.woopify .woopify-quote blockquote { font-size: 18px; } }
/* Featured row: the shop's own cards (06-collection.css). */
body.woopify .woopify-section--featured ul.products { margin-top: 0; }
body.woopify .woopify-tile__link .woopify-tile__name { color: var(--color-ink); }
body.woopify .woopify-tile__link .woopify-tile__desc { color: var(--color-ink-muted); }
body.woopify .woopify-quote blockquote p { font: inherit; color: inherit; }

/* 2026-10-09 visual QA: phone. The benefit list stacks one per line instead of wrapping 1 + 2; quote cards use 24px. */
@media (max-width: 767px) {
  body.woopify .woopify-split__text ul { flex-direction: column; gap: var(--space-sm); }
  body.woopify .woopify-quote { padding: 24px 20px; }
}