/* Catalog / listing styles: product grid, product card, shop filters.
   Extracted from the duplicated per-page <style> blocks (see site.css
   header comment). Loaded on /shop, /collections/:slug, /brands/:slug. */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 24px;
}
.product-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .15s ease, transform .15s ease;
}
.product-card:hover { box-shadow: 0 8px 24px rgba(27,42,60,0.08); transform: translateY(-2px); }
.img-box {
  background: var(--light-bg);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.img-box .placeholder-text {
  font-family: 'Fraunces', serif;
  color: var(--sage);
  font-size: 15px;
  text-align: center;
  padding: 0 20px;
}
.img-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.sale-pill {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--clay);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 5px 10px;
  border-radius: 100px;
}
.product-card .body { padding: 18px 18px 20px; display: flex; flex-direction: column; flex: 1; }
.product-card h3 { font-size: 17px; margin: 0 0 6px; line-height: 1.3; }
.product-card .sku { font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.price-row { margin-bottom: 16px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.price-row .sale { font-family: 'Fraunces', serif; font-size: 20px; font-weight: 600; color: var(--navy); }
.price-row .msrp { font-size: 14px; color: var(--muted); text-decoration: line-through; }
.shipping-note { font-size: 12.5px; font-weight: 600; color: var(--trust-teal); margin: -10px 0 14px; }
.shipping-note.freight { color: var(--clay); }

/* "Complete package" positioning (Part 25) -- every heater SKU is a
   heater+controls+stones package, never sold heater-only. */
.package-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--trust-teal);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 100px;
}
.package-contents { font-size: 12.5px; font-weight: 600; color: var(--trust-teal); margin: -6px 0 10px; }
.price-context { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 3px; }
.package-explainer {
  background: var(--light-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 22px 24px;
  margin: 0 0 8px;
}
.package-explainer h2 { font-size: 18px; margin: 0 0 8px; }
.package-explainer p { font-size: 14.5px; color: var(--ink); margin: 0 0 8px; line-height: 1.6; }
.package-explainer p:last-child { margin-bottom: 0; }
.package-explainer .explainer-tagline { font-weight: 600; color: var(--trust-teal); }

/* Family-sectioned collection layout (Part 26) -- uses the site's existing
   heading typography (h1/h2/h3 already set to Fraunces/navy in site.css)
   and border/muted tokens, no new colors introduced. */
.family-section { margin: 0 0 40px; }
.family-section:last-child { margin-bottom: 0; }
.family-heading { margin-bottom: 18px; }
.family-heading h2 { font-size: 21px; margin: 0 0 4px; }
.family-heading p { font-size: 14px; color: var(--muted); margin: 0; }
.brand-divider { display: flex; align-items: center; margin: 8px 0 22px; }
.brand-divider span { font-family: 'Fraunces', serif; font-size: 14px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy); white-space: nowrap; padding-right: 16px; }
.brand-divider:after { content: ''; flex: 1; border-top: 1px solid var(--border); }

/* Shop filter/search bar (new in Phase 4 -- follows the existing card/
   button/border visual language rather than introducing new patterns) */
.filter-bar {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end;
  padding: 20px 0 28px;
}
.filter-field { display: flex; flex-direction: column; gap: 6px; }
.filter-field label {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted);
}
.filter-field select, .filter-field input {
  font-family: inherit; font-size: 14.5px; color: var(--ink);
  border: 1px solid var(--border); border-radius: 4px; padding: 9px 12px;
  background: #fff; min-width: 160px;
}
.filter-field input[type="search"] { min-width: 220px; }
.filter-summary { font-size: 14px; color: var(--muted); padding: 0 0 20px; }
.empty-state {
  text-align: center; padding: 60px 24px; color: var(--desc);
  border: 1px dashed var(--border); border-radius: 8px;
}

/* /shop storefront layout (Part 31): major category > brand > family >
   product cards. Major-category headings are the strongest element in
   this hierarchy (largest, most surrounding space); the brand divider
   above already stands out via its uppercase small-caps treatment;
   family headings stay at their existing, smaller weight. Hierarchy
   comes entirely from typography/spacing, not boxes, per the client's
   "no giant bordered boxes" instruction. */
.major-category-heading { margin: 40px 0 28px; }
.major-category-heading h2 { font-size: 30px; margin: 0 0 8px; }
.major-category-heading p { font-size: 15.5px; color: var(--muted); margin: 0; max-width: 620px; }
.shop-quicknav {
  display: flex; flex-wrap: wrap; gap: 10px 22px;
  padding: 4px 0 22px; margin-bottom: 4px; border-bottom: 1px solid var(--border);
}
.shop-quicknav a {
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--trust-teal);
}
.shop-quicknav a:hover { color: var(--navy); }