/* Shared layout geometry. Load after component styles; colours stay in theme.css. */
:root {
  --site-max: 1440px;
  --standard-max: 1200px;
  --commerce-gap: 18px;
  --site-gutter: 32px;
  --reading-max: 840px;
  --section-space: 64px;
  --related-space: 48px;
  --grid-gap: 24px;
}
.wrap, .site-container {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--site-max);
  margin-inline: auto;
  padding-inline: var(--site-gutter);
  min-width: 0;
}
/* Full-bleed surfaces contain the frame; never constrain the surface itself. */
.site-header, .home-hero, .home-hero-stats, .site-footer { width: 100%; }
.header-inner { min-height: 72px; gap: 16px; }
.main-nav { gap: 2px; }
.main-nav a { padding-inline: 9px; min-height: 44px; display: inline-flex; align-items: center; }
.main-nav .mobile-saved { display: none; }
.menu-toggle { min-width: 44px; min-height: 44px; }
.header-action, .official-cta { min-height: 44px; flex-shrink: 0; }

.home-hero-grid {
  grid-template-columns: minmax(0,1.1fr) minmax(0,1fr);
  gap: 56px;
  min-height: 0;
  padding-block: 32px;
}
.home-hero-copy { max-width: none; padding: 0; }
.home-hero-copy h1 { max-width: 660px; }
.home-hero-copy>p { max-width: 600px; }
.home-hero-art { min-width: 0; width: 100%; max-width: 560px; justify-self: start; }
@media (min-width:1025px) {
  .hero-shortlist-note { top: auto; bottom: 38px; right: 4px; max-width: 232px; transform: rotate(4deg); }
  .home-hero-spark.spark-two { bottom: 150px; }
  .hero-find-note { bottom: 145px; left: 0; max-width: 230px; transform: rotate(-5deg); }
}
.category-strip>div, .filter-pills { scrollbar-width: none; }
.category-strip>div::-webkit-scrollbar, .filter-pills::-webkit-scrollbar { display: none; }
.home-hero-search { max-width: 520px; }
.home-hero-stats>.wrap { column-gap: 24px; }

.section { padding-block: var(--section-space); }
.section-heading { margin-bottom: 24px; gap: 24px; }
.home-wrap>.section+.section { padding-top: 0; }
.home-wrap>.home-finds { padding-top: 32px; padding-bottom: var(--related-space); }
.home-wrap>.essentials-layout, .home-wrap>.home-faq {
  margin-top: 0;
  padding-top: var(--related-space);
}
.essentials-layout, .faq-layout { gap: 48px; }
.guide-index { padding-bottom: var(--section-space); }
.guide-highlights, .guide-index .guide-cards, .reading-grid, .destination-grid { gap: var(--grid-gap); }
.guide-highlights { margin-bottom: var(--grid-gap); }

/* Three measures: commerce frame, explanatory modules, and readable article text. */
.home-wrap>.essentials-layout, .home-wrap>.reading-shelf,
.home-wrap>.destination-section, .home-wrap>.home-faq,
.guide-index .guide-highlights, .guide-index .guide-cards, .article-layout {
  width: 100%; max-width: var(--standard-max); margin-inline: auto;
}
/* Desktop commerce density; existing card styling remains in component styles. */
.product-grid, .home-finds .product-grid, .catalog-listing .catalog-grid,
.related-finds .product-grid, .recent-finds .product-grid, .category-directory .directory-grid {
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: var(--commerce-gap);
}
.catalog-listing:not(.catalog-saved) .catalog-workspace {
  grid-template-columns: 176px minmax(0,1fr);
  column-gap: 24px;
}
.product-card, .directory-card, .guide-card { min-width: 0; }
.category-directory .directory-card h3 { min-height: 1.4em; }
.category-directory .directory-content { padding: 18px; }
.category-directory .directory-photo { max-height: 220px; }
.catalog-bar .search-box { flex: 1 1 250px; min-width: 0; }
.catalog-listing .budget-panel:not([open]) { flex-shrink: 0; }

.article-layout {
  grid-template-columns: minmax(0,var(--reading-max)) minmax(240px,280px);
  gap: 48px;
  align-items: start;
}
.article { width: 100%; max-width: var(--reading-max); min-width: 0; }
.article>p, .article>ul, .article>ol, .article>blockquote,
.article>section>p, .article>section>ul, .article>section>ol { max-width: 76ch; }
.page-head h1 { max-width: 960px; }
.page-head .lede, .catalog-listing>.page-head .lede { max-width: 65ch; }
.table-scroll { max-width: 100%; }
.footer-compact .footer-grid { gap: 24px; }

@media (min-width:1280px) {
  .category-directory .directory-grid { grid-template-columns: repeat(5,minmax(0,1fr)); }
}
/* Full-width grids can add a fifth card earlier than catalogues with a sidebar. */
@media (min-width:1440px) {
  .home-finds .product-grid, .catalog-saved .catalog-grid,
  .related-finds .product-grid, .recent-finds .product-grid { grid-template-columns: repeat(5,minmax(0,1fr)); }
}
@media (min-width:1600px) {
  .product-grid, .home-finds .product-grid, .catalog-listing .catalog-grid,
  .related-finds .product-grid, .recent-finds .product-grid { grid-template-columns: repeat(5,minmax(0,1fr)); }
  .category-directory .directory-grid { grid-template-columns: repeat(6,minmax(0,1fr)); }
  /* Horizontal categories reserve the full row for five comfortably sized cards. */
  .catalog-listing .catalog-workspace { display: flex; flex-direction: column; gap: 0; }
  .catalog-listing .catalog-workspace>:not(.sr-only) { width: 100%; min-width: 0; }
  .catalog-listing .catalog-bar { order: 0; }
  .catalog-listing .filter-pills {
    order: 1; position: static; flex-direction: row; flex-wrap: nowrap;
    overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none;
    background: transparent; border: 0; border-radius: 0; padding: 8px 8px 12px; margin: 0; gap: 8px;
  }
  .catalog-listing .filter-caption { display: none; }
  .catalog-listing .filter-pills .pill { flex: none; width: auto; min-height: 44px; border: 1px solid var(--line); background: var(--surface); padding: 10px; text-align: center; border-radius: 6px; }
  .catalog-listing .filter-pills .pill[aria-pressed=true] { background: var(--dark); color: var(--on-dark); border-color: var(--dark); }
  .catalog-listing .filter-pills .pill:not([aria-pressed=true]):hover { background: var(--surface-mint); border-color: var(--line-strong); }
  .catalog-listing .filter-pills .pill:focus-visible { outline-offset: 2px; }
  .catalog-listing .results-bar { order: 2; }
  .catalog-listing .feed-status { order: 3; }
  .catalog-listing [data-catalog] { order: 4; }
  .catalog-listing .catalog-pagination { order: 5; }
}
@media (min-width:768px) and (max-width:1439px) {
  :root { --site-gutter: 24px; }
}
@media (min-width:1025px) and (max-width:1279px) {
  .product-grid, .home-finds .product-grid, .catalog-listing .catalog-grid,
  .related-finds .product-grid, .recent-finds .product-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
/* Use the existing expandable navigation before links become crowded. */
@media (min-width:1025px) and (max-width:1279px) {
  .header-action { display: none; }
  .header-inner { gap: 12px; }
  .official-cta { margin-left: auto; }
  .menu-toggle { display: flex; margin-left: 0; padding: 9px; }
  .main-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    padding: 12px var(--site-gutter) 18px; background: var(--surface);
    border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch;
    gap: 3px; box-shadow: 0 10px 15px #122f3808;
  }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 13px 15px; }
  .main-nav .mobile-saved { display: flex; }
}
@media (max-width:1024px) {
  :root { --site-gutter: 24px; --section-space: 56px; --related-space: 40px; --grid-gap: 20px; --commerce-gap: 20px; }
  .header-inner { min-height: 72px; gap: 12px; }
  .main-nav { top: 100%; padding-inline: var(--site-gutter); }
  .main-nav a { display: flex; }
  .main-nav .mobile-saved { display: flex; }
  .home-hero-grid { gap: 32px; }
  .home-hero-art { height: 320px; }
  .home-hero-stats>.wrap { flex-wrap: wrap; }
  .product-grid, .home-finds .product-grid, .catalog-listing .catalog-grid,
  .related-finds .product-grid, .recent-finds .product-grid, .category-directory .directory-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .article-layout { display: block; }
  .article { max-width: var(--reading-max); }
  .article-layout>aside { position: static; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; margin: 32px 0 0; }
  .article-layout>aside .aside-box { margin-bottom: 0; }
  .essentials-layout, .faq-layout { gap: 32px; }
}
@media (max-width:767px) {
  :root { --site-gutter: 16px; }
  .home-hero-grid { display: block; padding-block: 32px; }
  .home-hero-art { display: none; }
  .home-hero-copy h1 { margin: 0 0 16px; }
  .home-hero-label { margin-bottom: 16px; }
  .home-hero-search { max-width: 100%; }
  .product-grid, .home-finds .product-grid, .catalog-listing .catalog-grid,
  .related-finds .product-grid, .recent-finds .product-grid, .category-directory .directory-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .reading-grid { grid-template-columns: 1fr; }
  .section-heading { align-items: start; gap: 16px; }
  .essentials-layout, .faq-layout { gap: 24px; }
}
@media (max-width:640px) {
  :root { --site-gutter: 16px; --section-space: 40px; --related-space: 32px; --grid-gap: 16px; --commerce-gap: 16px; }
  .header-inner { min-height: 68px; gap: 8px; }
  .catalog-listing .catalog-bar { display: grid; grid-template-columns: minmax(0,1fr); }
  .catalog-listing .catalog-bar .search-box, .catalog-listing .catalog-bar select,
  .catalog-listing .budget-panel { grid-column: 1 / -1; width: 100%; min-width: 0; max-width: none; }
  .catalog-listing .budget-panel:not([open]), .catalog-listing .budget-panel[open] { grid-column: 1 / -1; }
  .catalog-listing .budget-panel:not([open]) { border-top: 1px solid var(--line); padding-top: 4px; }
  .catalog-listing .budget-panel:not([open]) summary { min-height: 44px; padding: 8px 32px 8px 0; justify-content: flex-start; }
  .catalog-listing .budget-panel:not([open]) summary:after { right: 4px; }
  .home-wrap>.home-finds { padding-top: 24px; }
  .home-finds .section-heading>.button { min-height: 44px; }
  .product-grid, .home-finds .product-grid, .catalog-listing .catalog-grid,
  .related-finds .product-grid, .recent-finds .product-grid { gap: 16px 12px; }
  .category-directory .directory-content { padding: 16px; }
  .article-layout>aside { grid-template-columns: minmax(0,1fr); }
  .footer-compact .footer-grid { gap: 0; }
}
@media (max-width:480px) {
  .category-directory .directory-grid { grid-template-columns: minmax(0,1fr); }
  .category-directory .directory-card h3 { min-height: 0; }
}
@media (max-width:360px) {
  .header-inner { gap: 6px; }
  .official-cta { padding-inline: 8px; }
}
/* Show complete rows in the four-column home selection; full catalogue remains available. */
@media (min-width:1280px) and (max-width:1439px) {
  .home-finds .product-card:nth-child(n+29) { display: none; }
}
@media print {
  .wrap, .site-container { max-width: none; padding-inline: 0; }
  .header-inner { min-height: 0; }
  .article-layout { display: block; }
  .article { max-width: none; }
  .article-layout>aside { display: none; }
  .product-grid, .home-finds .product-grid, .catalog-listing .catalog-grid,
  .related-finds .product-grid, .recent-finds .product-grid, .category-directory .directory-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

/* Keep the complete source collection reachable before browsing a long result list. */
.spreadsheet-entry { display:flex; align-items:center; justify-content:space-between; gap:16px 24px; padding:14px 18px; margin:0 0 20px; border:1px solid var(--line); border-radius:9px; background:var(--surface-mint); }
.spreadsheet-entry p { min-width:0; font-size:14px; line-height:1.6; color:var(--ink); }
.spreadsheet-entry strong { display:block; font-size:16px; font-weight:600; }
.spreadsheet-entry>.button { flex:none; }
.finds-actions .button-label-short { display:none; }
.finds-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:12px; flex:none; }
.spreadsheet-entry .button, .finds-actions .button { min-height:44px; white-space:normal; text-align:center; }
.home-finds .section-heading>div:first-child { min-width:0; }
@media(max-width:1024px) { .home-finds .section-heading { flex-wrap:wrap; } .finds-actions { justify-content:flex-start; } }
@media(max-width:640px) {
 .spreadsheet-entry { flex-direction:column; align-items:stretch; padding:16px; gap:12px; }
 .home-finds .section-heading>.finds-actions { width:100%; display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:10px; }
 .finds-actions>.button { min-width:0; min-height:44px; padding:10px 8px; gap:6px; line-height:1.5; }
 .finds-actions .button-label-full { display:none; }
 .finds-actions .button-label-short { display:inline; }
 .finds-actions .icon { width:14px; height:14px; flex:none; }
 .spreadsheet-entry>.button, .finds-actions>.button { width:100%; }
}

/* Category browsing is one quiet shelf; the product shapes supply the visual cues. */
.category-discovery {
  display:grid; grid-template-columns:126px minmax(0,1fr); align-items:center; gap:16px;
  background:var(--surface-mint); border:1px solid var(--line); border-radius:10px;
  padding:10px 14px; margin-top:16px; scroll-margin-top:88px;
}
.category-discovery-intro { min-width:0; padding-right:12px; border-right:1px solid var(--line-strong); }
.category-discovery-intro p { font-size:16px; font-weight:600; line-height:1.35; color:var(--ink); }
.category-discovery-all { display:inline-flex; align-items:center; gap:6px; min-height:44px; color:var(--deep); font-size:14px; font-weight:500; white-space:nowrap; }
.category-discovery-all .icon { width:15px; height:15px; }
.category-discovery-all:hover { text-decoration:underline; text-underline-offset:4px; }
.category-discovery-track { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:8px; min-width:0; padding:6px; }
.category-discovery-link { display:flex; flex-direction:column; align-items:center; justify-content:start; gap:6px; min-width:0; min-height:76px; padding:6px 2px; border-radius:6px; color:var(--ink); text-align:center; transition:background-color 150ms ease,color 150ms ease; }
.category-discovery-link>span { display:flex; align-items:center; justify-content:center; min-height:34px; font-size:14px; font-weight:500; line-height:1.2; }
.category-glyph { display:block; flex:none; width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.category-glyph-accent { stroke:var(--deep); }
.category-discovery-link:hover, .category-discovery-link:focus-visible { color:var(--deep); background:var(--surface); }
.category-discovery-link:hover>span, .category-discovery-link:focus-visible>span { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; }
.category-discovery-link:focus-visible, .category-discovery-all:focus-visible { outline:2px solid var(--focus); outline-offset:3px; }
.category-discovery-link:active { background:var(--surface-soft); }
@media(max-width:1439px) {
 .category-discovery { grid-template-columns:minmax(0,1fr); gap:0; padding:6px 10px; }
 .category-discovery-intro { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 6px; border:0; }
 .category-discovery-intro p { font-size:15px; }
}
@media(max-width:1279px) {
 .category-discovery-track { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:94px; padding-bottom:12px; overflow-x:auto; overscroll-behavior-inline:contain; scroll-snap-type:x proximity; scroll-padding-inline:6px; scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent; }
 .category-discovery-link { scroll-snap-align:start; }
}
@media(max-width:640px) {
 .category-discovery { margin-top:12px; }
 .category-discovery-intro { gap:8px; }
 .category-discovery-track { grid-auto-columns:88px; }
}
@media(prefers-reduced-motion:reduce) { .category-discovery-link { transition:none; } }

.category-discovery-track:focus-within { scroll-snap-type:none; }

/* A 44px hit area preserves the existing 30px circle and its position. */
.product-open {
 width:44px; height:44px; flex:0 0 44px; margin:-7px;
 background:radial-gradient(circle, var(--surface-soft) 0 15px, transparent 15.5px);
}
.product-open:hover { background:radial-gradient(circle, var(--surface-mint) 0 15px, transparent 15.5px); }
.product-open:focus-visible { outline-offset:-4px; }

/* A source-confirmed QC reference is an optional, compact product aid. */
.qc-badge { position:absolute; bottom:6px; left:8px; z-index:2; display:inline-flex; align-items:center; justify-content:center; gap:4px; min-height:44px; padding:6px; border:1px solid var(--line-strong); border-radius:6px; background:var(--surface); color:var(--ink); font-size:13px; font-weight:600; line-height:1.2; }
.product-image>.qc-badge { display:inline-flex; width:auto; height:auto; inset:auto auto 6px 8px; }
.qc-badge .icon { width:14px; height:14px; flex:none; }
.qc-badge:hover { background:var(--surface-mint); color:var(--deep); }
.qc-badge:focus-visible { outline-offset:2px; }
.table-name .qc-badge { position:static; flex:none; }
.qc-gallery { margin:16px 0 0; padding:0; border:1px solid var(--line); border-radius:8px; background:var(--surface); scroll-margin-top:100px; }
.qc-gallery>summary { display:flex; align-items:center; gap:10px; min-height:48px; padding:11px 42px 11px 14px; font-size:15px; font-weight:600; line-height:1.5; }
.qc-gallery>summary::after { right:14px; top:50%; transform:translateY(-50%); }
.qc-gallery>summary:focus-visible { outline-offset:3px; border-radius:6px; }
.qc-photo-count { flex:none; color:var(--muted); font-size:13px; font-weight:400; white-space:nowrap; }
.qc-gallery-body { padding:0 14px 14px; }
.qc-gallery-body>.caption { margin:0; }
.qc-photo-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:14px 0; }
.qc-photo { position:relative; display:flex; flex-direction:column; min-width:0; min-height:44px; border:1px solid var(--line); border-radius:6px; background:var(--surface-soft); color:var(--ink); }
.qc-photo img { display:block; width:100%; height:140px; object-fit:contain; border-radius:5px 5px 0 0; }
.qc-photo>span:not(.image-fallback) { padding:7px 8px; font-size:13px; line-height:1.5; }
.qc-photo:hover { border-color:var(--deep); color:var(--deep); }
.qc-photo:focus-visible { outline-offset:3px; }
.qc-photo.image-error { aspect-ratio:1; }
.qc-photo.image-error::after { display:none; }
.qc-photo .image-fallback { font-size:13px; padding:14px; }
.qc-source-links { display:flex; align-items:center; flex-wrap:wrap; gap:8px 18px; margin-top:8px; }
.qc-source-links>a { display:inline-flex; align-items:center; min-height:44px; }
.qc-gallery-body>.qc-checked { margin-top:4px; }
@media(max-width:1024px) { .qc-photo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:640px) {
 .qc-photo img { height:116px; }
 .qc-photo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .qc-gallery>summary { gap:8px; padding-inline:12px 36px; }
 .qc-gallery-body { padding-inline:12px; }
}

/* Naming notes are only shown for listings with confirmed mixed brands. */
.product-info>.product-brand-note { margin:0 0 8px; color:var(--muted); font-size:13px; font-weight:400; line-height:1.4; }
.table-name>.product-brand-note { margin:0; color:var(--muted); font-size:13px; line-height:1.4; flex:none; }
.detail-copy>.detail-brand-note { margin:10px 0 14px; font-size:14px; line-height:1.6; color:var(--muted); }

/* Keep prices aligned when a collection includes a mixed-brand note. */
.product-card { display:flex; flex-direction:column; }
.product-card>.product-image { flex:none; }
.product-card>.product-info { display:flex; flex-direction:column; flex:1; }
.product-info>.product-bottom { margin-top:auto; }
@media (max-width:640px) { .results-actions>button { min-width:44px; min-height:44px; } }

/* Separate the source spreadsheet from the purchase platform without taller navigation. */
.main-nav .nav-pikobuy { gap:6px; white-space:nowrap; }
.header-source-cta { min-height:44px; white-space:nowrap; }
@media (max-width:640px) { .header-source-cta { height:44px; padding-block:8px; } }
@media (max-width:360px) {
 .header-inner { gap:8px; }
 .header-source-cta { padding-inline:6px; }
 .header-source-cta>.header-source-arrow { display:none; }
}

/* Reserve space for focus rings, including the added purchase-platform link. */
.main-nav { gap:8px; }
@media (max-width:1279px) {
 .main-nav { max-height:calc(100dvh - 112px); overflow-y:auto; overscroll-behavior:contain; }
}
@media (max-width:640px) { .main-nav { max-height:calc(100dvh - 84px); } }

.main-nav { scroll-padding-block:10px; }
.main-nav a { scroll-margin-block:8px; }