/* Step 3: shared page rhythm, aligned cards and unobscured purchase controls. */
:root { --gutter: max(24px, calc((100vw - 1280px) / 2)); }
.site-header, .site-header--inner, .site-header.is-scrolled { height: 96px; padding: 10px var(--gutter); }
.wordmark { display: block; width: 190px; max-width: 100%; }
.wordmark .brand-logo { display: block; width: 100%; height: auto; object-fit: contain; }
.footer-wordmark { width: 240px; padding: 10px; background: var(--paper-bright); border-radius: 4px; }
section[id] { scroll-margin-top: 112px; }
.hero { min-height: min(760px, 92svh); }
.hero-content {
  width: min(560px, calc(100% - 2 * var(--gutter)));
  max-width: none;
  margin-inline: var(--gutter);
  padding: 150px 0 64px;
}
/* The page gutter must sit outside the text column, not consume its width.
   Essential hero content is visible even before animation scripts initialise. */
.hero-content.reveal { opacity: 1; transform: none; }
.collections, .shop-section, .story, .journal, .about-story, .about-beliefs,
.about-difference, .about-cta, .contact-layout, .related-products,
.product-content-section { padding: 72px var(--gutter); }
.section-intro, .story-title, .about-beliefs-heading, .about-difference-heading { margin-bottom: 36px; }
.section-intro h2, .shop-head h2, .story-title h2, .related-heading h2 { margin-bottom: 0; }
.collection-grid--five { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.collection-grid--five .collection-card { min-height: 330px; }
.collection-name { left: 16px; bottom: 20px; max-width: calc(100% - 60px); }
.round-arrow { right: 12px; bottom: 18px; width: 34px; height: 34px; }
.product-stage { height: 480px; }
.product-slot { width: min(28vw, 340px); }
.product-details { margin: 0 auto; gap: 32px; }
.story-layout { gap: 48px; }
.story-steps { padding-bottom: 0; }
.story-step { min-height: 360px; padding: 32px 0; }
.story-step > span { margin-bottom: 24px; }
.story-visual { top: 112px; height: 540px; min-height: 0; }
.journal { min-height: 0; gap: 48px; }
.journal-collage { height: 450px; }
.cta { min-height: 340px; padding: 64px var(--gutter); }
.site-footer { padding: 56px var(--gutter) 24px; gap: 40px; }

.page-hero, .contact-hero { padding: 40px var(--gutter); }
.page-hero h1, .contact-hero h1 { margin: 12px 0 18px; }
.shop-catalog { padding: 32px var(--gutter) 64px; }
.shop-tools { align-items: flex-start; flex-wrap: wrap; gap: 20px; }
.category-filters { flex: 1 1 600px; }
.product-search { flex: 0 1 280px; }
.catalog-grid { gap: 24px; }
.catalog-card { display: flex; flex-direction: column; min-width: 0; }
.catalog-card-image { aspect-ratio: 1; padding: 6%; }
.catalog-card-copy { display: flex; flex: 1; flex-direction: column; padding: 18px; }
.catalog-card-copy h3 { min-height: 0; margin: 8px 0 12px; }
.catalog-card-copy > p:not(.eyebrow) { min-height: 0; margin-bottom: 20px; }
.catalog-card-bottom { margin-top: auto; padding-top: 8px; }
.product-hero-shell { min-height: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.product-gallery { padding: 32px; }
.product-info-panel { padding: 40px; }
.product-info-panel h1 { margin-top: 14px; }
.gallery-thumbnails { grid-template-columns: repeat(5, minmax(0, 76px)); }
.purchase-block { grid-template-columns: 110px minmax(0, 1fr); align-items: stretch; }
.purchase-block .quantity-selector { grid-column: 1; grid-row: 1; }
.purchase-block .button-primary { grid-column: 2; grid-row: 1; }
.purchase-block .button-dark { grid-column: 1 / -1; grid-row: 2; justify-content: center; }
.wishlist-large { padding: 8px; }
.trust-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.product-content-section { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: 64px; }
.related-heading { margin-bottom: 28px; }
.utility-page, .policy-page { padding: 40px var(--gutter) 64px; }
.utility-heading { margin-bottom: 28px; }
.utility-heading h1 { margin: 10px 0 0; }
.account-layout { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 48px; }
.account-form, .checkout-form { padding: 32px; }
.account-form h2, .checkout-form h1 { margin: 12px 0 28px; }
.account-intro { top: 120px; }
.cart-layout, .checkout-layout { gap: 40px; grid-template-columns: minmax(0, 1.4fr) minmax(300px, .8fr); }
.order-summary, .checkout-summary { top: 120px; }
.empty-cart-page { min-height: 380px; padding: 48px 24px; }
.contact-layout { gap: 48px; }
.contact-form-panel { padding: 32px; }
.contact-visit-image { min-height: 400px; }
.contact-visit-copy { padding: 48px; }
.about-hero { min-height: 0; }
.about-hero-image { min-height: 480px; }
.about-hero-copy { padding: 48px; }
.belief-grid article { min-height: 320px; padding: 28px; }
.difference-grid article { min-height: 220px; padding: 24px; }

@media (max-width: 1023px) {
  .catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .collection-grid--five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .product-info-panel { padding: 28px; }
  .product-gallery { padding: 24px; }
  .account-layout, .cart-layout, .checkout-layout { grid-template-columns: 1fr; }
  .account-intro, .order-summary, .checkout-summary { position: static; }
}
@media (max-width: 767px) {
  :root { --gutter: 16px; }
  .site-header, .site-header--inner, .site-header.is-scrolled { height: 80px; padding: 10px 12px; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 8px; }
  .site-header > .wordmark { width: min(100%, 140px); }
  .header-actions { gap: 5px; }
  .header-tool, .site-header .icon-button { width: 36px; height: 36px; }
  .cart-trigger { min-width: 36px; padding: 0; height: 36px; }
  .hero { min-height: 660px; }
  .hero-content { padding: 140px 0 40px; }
  .collections, .shop-section, .story, .journal, .about-story, .about-beliefs,
  .about-difference, .about-cta, .contact-layout, .related-products,
  .product-content-section { padding: 40px var(--gutter); }
  .page-hero, .contact-hero { padding: 28px var(--gutter); }
  .shop-catalog { padding: 24px var(--gutter) 40px; }
  .shop-tools { gap: 16px; }
  .category-filters, .product-search { flex: auto; width: 100%; }
  .category-filters { scrollbar-width: thin; margin-inline: 0; padding-inline: 0; padding-bottom: 8px; }
  .category-filters::-webkit-scrollbar { display: block; height: 3px; }
  .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .catalog-card-copy { padding: 12px; }
  .catalog-card-copy > p:not(.eyebrow) { margin-bottom: 14px; }
  .catalog-card-bottom { flex-wrap: wrap; gap: 8px; }
  .product-badge { max-width: calc(100% - 52px); padding: 5px; }
  .collection-grid--five { display: flex; margin-right: 0; }
  .collection-grid--five .collection-card { min-height: 280px; flex: 0 0 72%; }
  .collection-name { max-width: calc(100% - 66px); }
  .product-stage { height: 340px; }
  .product-slot { width: 240px; }
  .product-details { grid-template-columns: 1fr; gap: 20px; }
  .product-purchase { justify-content: space-between; }
  .story-layout { display: block; }
  .story-step { min-height: 0; padding: 20px 0; margin-bottom: 24px; opacity: 1; }
  .story-step-visual { height: 320px; margin-bottom: 24px; }
  .journal-collage { height: 350px; }
  .cta { min-height: 280px; padding: 40px var(--gutter); }
  .site-footer { grid-template-columns: 1fr; padding: 40px var(--gutter) 24px; gap: 32px; }
  .footer-wordmark { width: 200px; }
  .product-gallery { padding: 16px; }
  .product-info-panel { padding: 24px 16px 32px; }
  .purchase-block { position: static; margin: 24px 0 0; padding: 0; border: 0; box-shadow: none; backdrop-filter: none; grid-template-columns: 104px minmax(0, 1fr); }
  .purchase-block .quantity-selector { grid-column: 1; grid-row: 1; width: 104px; }
  .purchase-block .button-primary { grid-column: 2; grid-row: 1; }
  .purchase-block .button-dark { grid-column: 1 / -1; grid-row: 2; }
  .trust-strip { display: grid; grid-template-columns: 1fr; gap: 16px; }
  .product-content-section { grid-template-columns: 1fr; gap: 24px; }
  .utility-page, .policy-page { padding: 28px var(--gutter) 40px; }
  .account-layout, .cart-layout, .checkout-layout { gap: 28px; }
  .account-form, .checkout-form, .contact-form-panel { padding: 24px 16px; }
  .empty-cart-page { min-height: 300px; padding: 36px 16px; }
  .contact-visit-image, .about-hero-image { min-height: 300px; }
  .contact-visit-copy, .about-hero-copy { padding: 32px 16px; }
  .belief-grid article, .difference-grid article { min-height: 0; padding: 24px; }
  .belief-grid article > span { margin-bottom: 20px; }
  .belief-grid .eyebrow, .difference-grid h3 { margin-top: 20px; }
}