/* 05-home.css: the home page slots, in design-system order (Page layouts › Home).
 * One container for every section so edges align (Layout). Section spacing from the tokens. */
body.woopify .woopify-main { display: block; }
body.woopify .woopify-section { padding: var(--space-section) 0 0; }
body.woopify .woopify-main > .woopify-section:last-child { padding-bottom: var(--space-section); }
body.woopify .woopify-section .woopify-h2 { margin: 0 0 var(--space-md); max-width: 24ch; }
body.woopify .woopify-body p { margin: 0 0 var(--space-md); }
body.woopify .woopify-body p:last-child { margin-bottom: 0; }
body.woopify .woopify-button { display: inline-block; margin-top: var(--space-lg); padding: 14px 28px; border-radius: var(--radius-md); font-family: var(--font-body); font-weight: 600; font-size: var(--fs-body-md); line-height: 1.2; text-decoration: none; }
body.woopify .woopify-button:hover { filter: brightness(1.12); }
body.woopify .woopify-more { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
body.woopify .woopify-kicker, body.woopify .woopify-hero__kicker { font-size: var(--fs-label); line-height: var(--lh-label); font-weight: 600; letter-spacing: 0.04em; color: var(--color-ink-muted); margin: 0 0 var(--space-sm); }
body.woopify figure.woopify-media { margin: var(--space-lg) 0 0; }
body.woopify figure figcaption { margin-top: var(--space-sm); font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); color: var(--color-ink-muted); }

/* [hero]: full-bleed 3:2 photo at desktop, text on a surface card over the left third; phone: photo 4:5 on top, text below. */
body.woopify .woopify-section--hero { padding-top: var(--space-lg); }
body.woopify .woopify-hero { position: relative; display: grid; }
body.woopify .woopify-hero__media { grid-area: 1 / 1; margin: 0; }
body.woopify .woopify-hero__media .woopify-photo-pending, body.woopify .woopify-hero__media img { aspect-ratio: 3 / 2; width: 100%; height: auto; object-fit: cover; border-radius: var(--radius-md); }
body.woopify .woopify-hero__media figcaption { position: absolute; right: calc(var(--space-gutter) + var(--space-md)); bottom: var(--space-sm); }
body.woopify .woopify-hero__text { grid-area: 1 / 1; align-self: center; justify-self: start; z-index: 1; width: min(440px, 40%); margin-left: var(--space-lg); padding: var(--space-lg); background: var(--color-surface); border-radius: var(--radius-md); box-shadow: var(--shadow-raised); }
body.woopify .woopify-hero__text .woopify-h1 { margin: 0 0 var(--space-md); }
body.woopify .woopify-hero__subhead { margin: 0; color: var(--color-ink); }
body.woopify .woopify-hero__text .woopify-button { margin-top: var(--space-lg); }
/* The placeholder's label sits in the part of the photo the text card leaves open. */
body.woopify .woopify-hero__media .woopify-photo-pending { padding-left: calc(min(440px, 40%) + 2 * var(--space-lg)); }
@media (max-width: 767px) {
  body.woopify .woopify-section--hero { padding-top: var(--space-md); }
  body.woopify .woopify-hero { grid-template-columns: 1fr; }
  body.woopify .woopify-hero__media { grid-area: 1 / 1; }
  body.woopify .woopify-hero__media .woopify-photo-pending, body.woopify .woopify-hero__media img { aspect-ratio: 4 / 3; }
  body.woopify .woopify-hero__media .woopify-photo-pending { padding-left: var(--space-md); }
  body.woopify .woopify-hero__media figcaption { position: static; }
  body.woopify .woopify-hero__text { grid-area: 2 / 1; width: auto; margin: var(--space-md) 0 0; padding: 0; background: none; box-shadow: none; }
  body.woopify .woopify-hero__text .woopify-button { margin-top: var(--space-md); }
}

/* [problem]: two-column text at desktop (three short blocks, no cards), one column at phone. */
body.woopify .woopify-section--problem .woopify-body { max-width: none; columns: 2; column-gap: var(--space-xl); }
body.woopify .woopify-section--problem .woopify-body > * { break-inside: avoid; }
body.woopify .woopify-section--problem ul { margin: 0; padding-left: 1.1em; }
body.woopify .woopify-section--problem li { margin-bottom: var(--space-xs); }
@media (max-width: 767px) { body.woopify .woopify-section--problem .woopify-body { columns: 1; } }

/* [mechanism]: one centred column with the highlighted phrases. */
body.woopify .woopify-section--mechanism .woopify-body { margin: 0 auto; text-align: center; max-width: 62ch; font-size: calc(var(--fs-body-md) + 2px); }

/* [categories]: the four doors, 4:5 tiles, 4 across desktop, 2 across phone, collections beneath as text links. */
body.woopify .woopify-tiles__lead p { margin: 0 0 var(--space-lg); font-family: var(--font-heading); font-size: var(--fs-h2); line-height: var(--lh-h2); }
body.woopify .woopify-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-gutter); }
body.woopify .woopify-tile { margin: 0; }
body.woopify .woopify-tile__link { display: block; color: var(--color-ink); text-decoration: none; }
body.woopify .woopify-tile__media { aspect-ratio: 4 / 5; border-radius: var(--radius-md); padding: var(--space-md); text-align: center; }
body.woopify .woopify-tile__title { font-size: var(--fs-h3); line-height: var(--lh-h3); margin: var(--space-md) 0 var(--space-xs); }
body.woopify .woopify-tile__link:hover .woopify-tile__title { color: var(--color-accent); }
body.woopify .woopify-tile__desc { margin: 0 0 var(--space-sm); font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); color: var(--color-ink-muted); }
body.woopify .woopify-tile__cols { list-style: none; margin: 0; padding: 0; font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); }
body.woopify .woopify-tile__cols li { margin: 0 0 2px; }
@media (max-width: 767px) { body.woopify .woopify-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); } }

/* [featured]: three product cards, 3 across desktop, 1 across phone (no horizontal scroll). */
body.woopify .woopify-section--featured ul.products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-gutter); margin: 0; }
body.woopify .woopify-section--featured ul.products::before, body.woopify .woopify-section--featured ul.products::after { display: none; }
body.woopify .woopify-section--featured ul.products li.product { width: auto !important; float: none !important; margin: 0 !important; }
body.woopify .woopify-card-line { margin: var(--space-xs) 0 0; font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); color: var(--color-ink-muted); }
@media (max-width: 767px) { body.woopify .woopify-section--featured ul.products { grid-template-columns: 1fr; } }

/* [moments]: four moment links, text over 3:2 photos, 4 across desktop, 2 across phone. */
body.woopify .woopify-moments { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-gutter); }
body.woopify .woopify-moment__link { display: block; position: relative; color: var(--color-ink); text-decoration: none; }
body.woopify .woopify-moment__media { aspect-ratio: 3 / 2; border-radius: var(--radius-md); align-items: flex-start; padding: var(--space-sm); }
body.woopify .woopify-moment__text { display: block; margin-top: var(--space-sm); }
body.woopify .woopify-moment__name { display: block; font-family: var(--font-heading); font-size: var(--fs-h3); line-height: var(--lh-h3); }
body.woopify .woopify-moment__line { display: block; font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); color: var(--color-ink-muted); }
body.woopify .woopify-moment__link:hover .woopify-moment__name { color: var(--color-accent); }
@media (max-width: 767px) { body.woopify .woopify-moments { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); } }

/* [proof]: a quote band on surface (omitted once the copy says so; until reviews exist it shows the open item). */
body.woopify .woopify-section--proof .woopify-body { max-width: none; padding: var(--space-lg); background: var(--color-surface); border-radius: var(--radius-md); }

/* [how-it-works]: three numbered steps in one row at desktop, stacked at phone. */
body.woopify .woopify-section--how-it-works .woopify-body { max-width: none; }
body.woopify .woopify-section--how-it-works ol { list-style: none; counter-reset: woopify-step; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
body.woopify .woopify-section--how-it-works ol > li { counter-increment: woopify-step; padding-top: var(--space-md); border-top: 1px solid var(--color-border); }
body.woopify .woopify-section--how-it-works ol > li::before { content: counter(woopify-step); display: block; font-family: var(--font-heading); font-size: var(--fs-h2); line-height: 1; color: var(--color-accent); margin-bottom: var(--space-sm); }
body.woopify .woopify-section--how-it-works ol > li strong { display: block; margin-bottom: var(--space-xs); }
@media (max-width: 767px) { body.woopify .woopify-section--how-it-works ol { grid-template-columns: 1fr; gap: var(--space-md); } }

/* [founder]: image left 4:5, text right at desktop; stacked at phone. */
body.woopify .woopify-section--founder .woopify-container { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-xl); align-items: center; }
body.woopify .woopify-section--founder figure.woopify-media { grid-column: 1; grid-row: 1 / span 4; margin: 0; }
body.woopify .woopify-section--founder .woopify-body { grid-column: 2; }
@media (max-width: 767px) {
  body.woopify .woopify-section--founder .woopify-container { grid-template-columns: 1fr; gap: var(--space-md); }
  body.woopify .woopify-section--founder figure.woopify-media, body.woopify .woopify-section--founder .woopify-body { grid-column: 1; grid-row: auto; }
}

/* [guarantee]: the Made Right Promise as a bordered surface panel, centred, one paragraph. */
body.woopify .woopify-section--guarantee .woopify-body { margin: 0 auto; max-width: 64ch; text-align: center; padding: var(--space-lg); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }

/* [business]: full-width band, 3:2 photo left, text and one secondary button right; stacked at phone. */
body.woopify .woopify-section--business .woopify-container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xl); align-items: center; }
body.woopify .woopify-section--business figure.woopify-media { grid-column: 1; grid-row: 1 / span 3; margin: 0; }
body.woopify .woopify-section--business figure .woopify-photo-pending { aspect-ratio: 3 / 2; border-radius: var(--radius-md); padding: var(--space-md); text-align: center; }
body.woopify .woopify-section--business .woopify-body, body.woopify .woopify-section--business .woopify-button { grid-column: 2; }
body.woopify .woopify-section--business .woopify-button { justify-self: start; background: var(--color-surface); color: var(--color-accent); border: 1px solid var(--color-accent); }
@media (max-width: 767px) {
  body.woopify .woopify-section--business .woopify-container { grid-template-columns: 1fr; gap: var(--space-md); }
  body.woopify .woopify-section--business figure.woopify-media, body.woopify .woopify-section--business .woopify-body, body.woopify .woopify-section--business .woopify-button { grid-column: 1; grid-row: auto; }
}

/* [faq]: accordion, single column, 70ch. */
body.woopify .woopify-faq { max-width: 70ch; margin-left: auto; margin-right: auto; }
body.woopify .woopify-faq__group { font-size: var(--fs-h3); line-height: var(--lh-h3); margin: var(--space-lg) 0 var(--space-sm); }
body.woopify .woopify-faq__item { border-bottom: 1px solid var(--color-border); }
body.woopify .woopify-faq__item summary { cursor: pointer; list-style: none; padding: var(--space-md) var(--space-lg) var(--space-md) 0; position: relative; font-weight: 600; }
body.woopify .woopify-faq__item summary::-webkit-details-marker { display: none; }
body.woopify .woopify-faq__item summary::after { content: "+"; position: absolute; right: 0; top: var(--space-md); color: var(--color-accent); font-weight: 400; }
body.woopify .woopify-faq__item[open] summary::after { content: "\2212"; }
body.woopify .woopify-faq__answer p { margin: 0 0 var(--space-md); }
body.woopify .woopify-faq__note { margin: var(--space-md) 0; }

/* [final-cta]: ground band, headline-sized lead, two sentences, one primary button. */
body.woopify .woopify-section--final-cta .woopify-container { text-align: center; }
body.woopify .woopify-section--final-cta .woopify-body { margin: 0 auto; font-family: var(--font-heading); font-size: var(--fs-h3); line-height: var(--lh-h3); }