/* Shared spacing scale. Load after page styles; do not use this layer for content or media cropping. */
:root {
  --space-section: 40px;
  --space-heading: 24px;
  --space-grid: 24px;
  --space-stack: 20px;
  --space-card: 24px;
  --space-compact: 20px;
  --space-reading: 32px;
  --space-text: 12px;
  --space-inline: 8px;
  --space-hero: 32px;
}
@media (max-width: 980px) {
  :root {
    --space-section: 32px;
    --space-grid: 20px;
    --space-card: 20px;
    --space-compact: 18px;
    --space-reading: 28px;
    --space-hero: 28px;
  }
}
@media (max-width: 680px) {
  :root {
    --space-section: 28px;
    --space-heading: 20px;
    --space-grid: 16px;
    --space-stack: 16px;
    --space-card: 20px;
    --space-compact: 16px;
    --space-reading: 20px;
    --space-hero: 24px;
  }
}

/* One-sided section spacing prevents adjoining modules from doubling their gaps. */
.secondary-page { --inner-space: var(--space-section); --inner-gap: var(--space-grid); }
.secondary-page .page-content { padding-bottom: var(--space-section); }
.secondary-page .page-content:has(> .page-cta-section:last-child) { padding-bottom: 0; }
.secondary-page .page-section { padding-top: var(--space-section); padding-bottom: 0; }
.secondary-page .stats-bridge-section { padding-top: var(--space-heading); }
.secondary-page .page-hero .wrap { padding-top: var(--space-hero); padding-bottom: var(--space-hero); gap: var(--space-section); }
/* Keep short and long hero introductions on the same top baseline; artwork stays centred. */
.secondary-page .page-hero .wrap > div:not(.page-hero-visual) { align-self: start; }
.secondary-page .page-hero-visual { height: 240px; }
.secondary-page .page-hero h1 { margin-bottom: var(--space-text); }
.secondary-page .page-badges { margin-top: var(--space-text); margin-bottom: var(--space-stack); }
.secondary-page .page-hero .page-actions { gap: var(--space-text); }
.secondary-page .section-head,
.faq-page #questions > .wrap > .section-head { margin-bottom: var(--space-heading); }
.secondary-page .section-head h2 { margin-top: 0; margin-bottom: var(--space-inline); }
.secondary-page .section-head p { margin-top: 0; margin-bottom: 0; }
.catalog-heading { margin-bottom: var(--space-stack); gap: var(--space-grid); }
.catalog-heading .section-head { margin: 0; }
.catalog-context { margin-bottom: var(--space-stack); }
.catalog-controls { padding: var(--space-compact); gap: var(--space-text); }
.scope-actions { gap: var(--space-inline) var(--space-grid); }
.secondary-page .page-section > .wrap > .scope-actions:last-child { margin-bottom: 0; }

/* Home: keep the illustrated entrances, but separate every following content block. */
.home-page main { padding-bottom: var(--space-section); }
.home-page .hero-grid { padding-top: var(--space-hero); padding-bottom: var(--space-hero); }
.home-page .home-guide-band { gap: var(--space-grid); padding-top: var(--space-heading); padding-bottom: 0; }
.home-page #categories.section,
.home-page #product-examples { padding-top: var(--space-section); padding-bottom: 0; }
.home-page .section-title { margin-bottom: var(--space-heading); }
.home-page .category-next { margin-top: var(--space-text); }
.home-listing-heading { gap: var(--space-inline) var(--space-grid); margin-bottom: var(--space-heading); }
.home-page .home-listing-grid { gap: var(--space-grid); }
.home-page .home-listing-card { padding: var(--space-compact); gap: var(--space-text); }
.home-page .home-listings .scope-actions { margin-top: var(--space-text); margin-bottom: 0; }
.home-page .qc-panel { margin-top: var(--space-section); margin-bottom: 0; padding: var(--space-card); gap: var(--space-grid); }
.home-page .qc-checklist h2 { margin-bottom: var(--space-stack); }
.home-page .qc-checklist .source-photo-note { margin: var(--space-stack) 0; }
.home-page .home-qc-source-grid { gap: var(--space-grid); }
.home-page .disclaimer { margin-top: var(--space-section); margin-bottom: 0; padding: var(--space-card); gap: var(--space-stack); min-height: 0; }
.home-page .disclaimer h2 { margin-top: 0; margin-bottom: var(--space-inline); }
.home-page .disclaimer p { margin-top: 0; margin-bottom: 0; }

/* Cards share padding by role: reading cards, compact product cards, and form panels. */
.secondary-page .finds-grid,
.secondary-page .category-grid,
.secondary-page .steps-clean,
.secondary-page .qc-examples-grid,
.secondary-page .qc-overview-section .overview-grid,
.uk-sizing-grid,
.uk-delivery-layout { gap: var(--space-grid); }
.secondary-page .finds-grid .source-product,
.secondary-page .qc-single-example { padding: var(--space-compact); }
.secondary-page .steps-clean .card { min-height: 0; padding: var(--space-card); }
.secondary-page .steps-clean img { margin-top: var(--space-text); margin-bottom: var(--space-text); }
.secondary-page .steps-clean h3 { margin-top: 0; margin-bottom: var(--space-inline); }
.secondary-page .steps-clean p { margin-top: 0; margin-bottom: 0; line-height: 1.65; }
.secondary-page .steps-clean .text-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--space-text); }
.secondary-page .qc-overview-section .overview-card { min-height: 0; padding: var(--space-compact); grid-template-columns: 44px minmax(0,1fr); gap: var(--space-text); }
.secondary-page .qc-overview-section .overview-card img { width: 44px; height: 44px; padding: 8px; }
.secondary-page #qc-checklist .check-layout { grid-template-columns: repeat(2,minmax(0,1fr)); padding: var(--space-card); gap: var(--space-grid); align-items: start; }
.secondary-page #qc-checklist .check-panel { padding: var(--space-compact); }
.secondary-page #qc-checklist .check-panel h3 { margin-bottom: var(--space-text); }
.qc-review-list { gap: var(--space-text); }
.check-panel > .source-photo-note { margin: var(--space-text) 0 0; }
.secondary-page .qc-action-grid { gap: var(--space-stack); align-content: start; }
.secondary-page .qc-action { min-height: 0; padding: var(--space-compact); gap: var(--space-stack); }
.qc-source-explanation { padding: var(--space-compact); margin-top: var(--space-stack); }

/* Guides: keep the video aspect ratio and reading order; remove competing gap sizes. */
.secondary-page .purchase-video-layout { gap: var(--space-grid); padding: var(--space-card); }
.secondary-page .purchase-video-notes h3 { margin-bottom: var(--space-text); }
.secondary-page .purchase-video-notes > p { margin: 0 0 var(--space-stack); }
.secondary-page .purchase-video-steps { gap: var(--space-text); }
.secondary-page .purchase-video-caution { padding-top: var(--space-stack); }
.video-chapters { padding-top: var(--space-stack); }
.uk-practical-checks { margin-top: var(--space-heading); padding: var(--space-card); }
.uk-practical-checks > p { margin-bottom: var(--space-stack); }
.uk-reading-card,
.uk-budget { padding: var(--space-card); }
.uk-budget { gap: var(--space-grid); }
.uk-budget-fields { gap: var(--space-stack); }
.uk-budget-summary { padding: var(--space-compact); }
.uk-reading-card h3 { margin-top: var(--space-text); margin-bottom: var(--space-text); }
.guide-topic-nav { padding-top: var(--space-heading); gap: var(--space-inline) var(--space-text); }
.editorial-surface { padding: var(--space-reading); }
.editorial-surface h2 { margin-top: var(--space-section); margin-bottom: var(--space-text); }
.editorial-contact { margin-top: var(--space-section); padding-top: var(--space-heading); }
.editorial-contact h2 { margin-top: 0; }

/* FAQ cards use the same compact padding and stack spacing as other pages. */
.faq-page .faq-layout { gap: var(--space-section); }
.faq-page .faq-groups { gap: var(--space-stack); }
.faq-page .faq-group-head { padding: var(--space-compact); }
.faq-page .faq-summary-card { padding: var(--space-card); }
.faq-page .faq-guide-links { margin-top: var(--space-text); }

/* Finish each page with the same CTA and footer rhythm. */
.secondary-page .page-cta-section,
.secondary-page #qc-checklist + .page-section {
  margin-top: var(--space-section);
  padding-top: var(--space-stack);
  padding-bottom: var(--space-stack);
}
.secondary-page .page-cta { padding: var(--space-card); gap: var(--space-stack); min-height: 0; }
.secondary-page .page-cta h2 { margin-bottom: var(--space-inline); }
.footer { padding-top: var(--space-section); padding-bottom: var(--space-stack); }
.footer .footer-grid { gap: var(--space-grid); }
.footer-bottom { margin-top: var(--space-heading); padding-top: var(--space-text); }

/* Small-screen exceptions protect compact menus and useful tap targets. */
@media (max-width: 980px) {
  .faq-page .faq-layout { gap: var(--space-stack); }
  .secondary-page #qc-checklist .check-layout { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 760px) {
  .home-page .home-guide-band { gap: var(--space-text); }
}
@media (max-width: 680px) {
  .secondary-page .page-hero .wrap { gap: 0; }
  .secondary-page .stats-bridge-section .overview-card { padding: 12px 8px; }
  .home-page .category-grid { gap: var(--space-text); }
  .home-page .home-listing-heading { gap: var(--space-inline); }
  .home-page .disclaimer { display: grid; grid-template-columns: 36px minmax(0,1fr); align-items: start; gap: var(--space-text); }
  .home-page .disclaimer .shield { width: 36px; height: 36px; }
  .home-page .disclaimer .shield img { width: 32px; height: 32px; object-fit: contain; }
  .home-page .disclaimer .skyline { display: none; }
  .secondary-page #qc-checklist .check-layout { padding: var(--space-compact); }
  .footer .footer-grid { gap: var(--space-stack) var(--space-text); }
}