/* Shop category funnel pages (/shop/:roast with a `landing` content module, e.g. /shop/decaf).
   Loaded after shop.css + landing.css by apply-shop-ssr.js only on those pages. */

/* Hero CTA row under the H1/intro */
.landing-hero { display: grid; gap: var(--space-2); margin-top: var(--space-4); }
.landing-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.landing-hero__variant { font-size: var(--step--1); font-weight: 700; color: var(--color-text-900); }
.landing-hero__note { font-size: var(--step--1); color: var(--color-text-500); max-width: 60ch; }

/* Sections inside #shop-seo-content */
#shop-seo-content .landing-section { margin-top: var(--space-8); }
#shop-seo-content .landing-section h2 { font-size: var(--step-2); margin-top: 0; margin-bottom: var(--space-3); }
#shop-seo-content .landing-section p + p { margin-top: var(--space-3); }

/* Product cards */
.landing-cards { display: grid; gap: var(--space-6); }
.landing-card {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
}
@media (min-width: 640px) {
  .landing-card { grid-template-columns: 200px 1fr; align-items: start; }
}
.landing-card__media { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-md); }
.landing-card__media img { width: 100%; height: 100%; object-fit: cover; }
.landing-card__body { display: grid; gap: var(--space-2); }
.landing-card__body h3 { margin: 0; font-size: var(--step-2); }
.landing-card__meta {
  font-size: var(--step--1);
  color: var(--color-text-500);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
#shop-seo-content .landing-card__facts { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-1); }
.landing-card__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }

/* Swiss Water steps + bullet lists */
#shop-seo-content .landing-steps,
#shop-seo-content .landing-list { display: grid; gap: var(--space-3); margin-top: var(--space-3); }
#shop-seo-content .landing-steps { padding-left: 1.25rem; }

/* Subscription upsell */
.landing-callout {
  padding: var(--space-6);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-green-600) 8%, var(--color-cream-50));
}