/* home-collections.css — the collections homepage (homepage.html LEIF:COLLECTIONS
   blocks) and the /collections/<slug>/ + /collections/partner-brands/ pages.
   Loads after theme-editorial.css and only styles hp-* classes. Markup is
   written by build/build-collections.js. Uses the existing tokens (theme.css):
   navy ink, pop box, Fraunces display. */

:root {
  --hp-tint-green: #e3efe6;  --hp-tint-green-ink: #1f5137;
  --hp-tint-peach: #fbe6d9;  --hp-tint-peach-ink: #8a3d17;
  --hp-tint-sand:  #f3ead6;  --hp-tint-sand-ink:  #6b4e12;
  --hp-tint-sky:   #e0ecf8;  --hp-tint-sky-ink:   #173a5e;
  --hp-gutter: clamp(16px, 4vw, 40px);
  --hp-max: 1240px;
}

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Shared bits ────────────────────────────────────────────────── */
.hp-eyebrow {
  display: block;
  font: 600 11px/1.2 var(--font-sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ed-tile-ink);
  opacity: .8;
}
.hp-link {
  font: 600 14px/1.3 var(--font-sans);
  color: var(--ed-tile-ink);
  text-decoration: none;
}
a:hover > .hp-link, a.hp-link:hover, a:hover .hp-link { text-decoration: underline; }
.hp-pill { position: static; flex: 0 0 auto; }

.hp-pop {
  background: #fff;
  border: 2px solid var(--ed-tile-ink);
  border-radius: 14px;
  box-shadow: var(--pop-shadow);
}

.hp-section {
  max-width: var(--hp-max);
  margin: 0 auto;
  padding: clamp(32px, 5vw, 56px) var(--hp-gutter) 0;
}
.hp-section-head { margin-bottom: 20px; text-align: left; }
.hp-section-head .section-title { margin: 0; text-align: left; }
.hp-section-sub {
  margin: 6px 0 0;
  color: var(--leif-text-secondary);
  font: 400 15px/1.5 var(--font-sans);
}

/* ── Featured brands ────────────────────────────────────────────── */
.hp-brand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: 24px;
}
.hp-brand-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
  background: #fff;
  border: 2px solid var(--ed-tile-ink);
  border-radius: 14px;
  box-shadow: var(--pop-shadow);
}
.hp-brand-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.hp-brand-name { margin: 0; font: 600 24px/1.15 var(--font-display); }
.hp-brand-name a { color: var(--ed-tile-ink); text-decoration: none; }
.hp-brand-name a:hover { text-decoration: underline; }
/* Logos vary (wide wordmark vs stacked lockup): fix the height, cap the width. */
.hp-brand-logo { display: block; height: 52px; width: auto; max-width: 200px; object-fit: contain; object-position: left center; }
.hp-brand-place { margin: 6px 0 0; font: 500 13px/1.3 var(--font-sans); color: var(--leif-text-secondary); }
.hp-brand-blurb { margin: 0; font: 400 15px/1.55 var(--font-sans); color: var(--leif-text); }
.hp-brand-products {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.hp-brand-product { display: flex; flex-direction: column; gap: 6px; color: var(--leif-text); text-decoration: none; }
.hp-brand-ptitle {
  font: 500 12.5px/1.35 var(--font-sans);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hp-brand-product:hover .hp-brand-ptitle { text-decoration: underline; }
.hp-brand-all { margin-top: auto; }

/* ── Collections grid ───────────────────────────────────────────── */
.hp-collection-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.hp-col-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  border-radius: 14px;
  border: 2px solid transparent;
  text-decoration: none;
  color: var(--hp-ink);
  background: var(--hp-bg);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.hp-col-card:hover { border-color: var(--ed-tile-ink); box-shadow: var(--pop-shadow-press); transform: translate(-2px, -2px); }
.hp-col-card--lg {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  padding: clamp(20px, 3vw, 32px);
  border-color: var(--ed-tile-ink);
  box-shadow: var(--pop-shadow);
}
.hp-col-card--lg:hover { transform: translate(3px, 3px); box-shadow: var(--pop-shadow-press); }
.hp-col-copy { flex: 1 1 320px; display: flex; flex-direction: column; gap: 10px; }
.hp-col-title { font: 600 20px/1.2 var(--font-display); color: var(--hp-ink); }
.hp-col-card--lg .hp-col-title { font-size: clamp(26px, 3vw, 36px); }
.hp-col-desc { font: 400 15px/1.5 var(--font-sans); color: var(--leif-text); max-width: 46ch; }
.hp-col-count { font: 500 13px/1.3 var(--font-sans); color: var(--hp-ink); opacity: .8; }
.hp-col-card .hp-link, .hp-col-card .hp-eyebrow { color: var(--hp-ink); }
.hp-col-thumb,
.hp-brand-img {
  display: block;
  aspect-ratio: 1;
  background: #fff;
  border: 1px solid var(--ed-box-border);
  border-radius: 10px;
  overflow: hidden;
}
.hp-col-thumb img,
.hp-brand-img img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* never crop product shots (card-image rule) */
  padding: 6px;
  box-sizing: border-box;
}
.hp-col-thumbs { flex: 1 1 380px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.hp-col-thumbs--sm { flex: none; gap: 6px; }

.hp-tint--green { --hp-bg: var(--hp-tint-green); --hp-ink: var(--hp-tint-green-ink); }
.hp-tint--peach { --hp-bg: var(--hp-tint-peach); --hp-ink: var(--hp-tint-peach-ink); }
.hp-tint--sand  { --hp-bg: var(--hp-tint-sand);  --hp-ink: var(--hp-tint-sand-ink); }
.hp-tint--sky   { --hp-bg: var(--hp-tint-sky);   --hp-ink: var(--hp-tint-sky-ink); }

@media (max-width: 900px) {
  .hp-collection-grid { grid-template-columns: repeat(2, 1fr); }
  .hp-col-card--lg { flex-direction: column; align-items: stretch; }
  .hp-col-copy { flex: none; }
  .hp-col-thumbs { flex: none; }
}
@media (max-width: 560px) {
  .hp-collection-grid { grid-template-columns: 1fr; gap: 16px; }
  .hp-brand-card, .hp-col-card--lg { box-shadow: var(--pop-shadow-sm); }
}

/* ── Collection page ────────────────────────────────────────────── */
.hp-banner { background: var(--hp-bg); border-bottom: 2px solid var(--ed-tile-ink); }
.hp-banner-inner {
  max-width: var(--hp-max);
  margin: 0 auto;
  padding: clamp(28px, 5vw, 56px) var(--hp-gutter);
}
.hp-crumb { font: 600 13px/1.3 var(--font-sans); color: var(--hp-ink); text-decoration: none; }
.hp-crumb:hover { text-decoration: underline; }
.hp-banner-title { margin: 10px 0 8px; font: 600 clamp(32px, 5vw, 52px)/1.05 var(--font-display); color: var(--hp-ink); }
.hp-banner-desc { margin: 0; max-width: 60ch; font: 400 17px/1.5 var(--font-sans); color: var(--leif-text); }
.hp-banner-count { margin: 12px 0 0; font: 600 14px/1.3 var(--font-sans); color: var(--hp-ink); }

.hp-toolbar {
  max-width: var(--hp-max);
  margin: 0 auto;
  padding: 20px var(--hp-gutter) 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.hp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hp-chip {
  padding: 7px 14px;
  font: 600 13px/1.2 var(--font-sans);
  color: var(--ed-tile-ink);
  background: #fff;
  border: 2px solid var(--ed-tile-ink);
  border-radius: 999px;
  cursor: pointer;
}
.hp-chip span { font-weight: 500; opacity: .7; margin-left: 2px; }
.hp-chip[aria-pressed="true"] { background: var(--ed-tile-ink); color: #fff; }
.hp-chip:focus-visible, .hp-sort select:focus-visible { outline: 3px solid var(--leif-gold); outline-offset: 2px; }

.hp-product-grid {
  max-width: var(--hp-max);
  margin: 0 auto;
  padding: 12px var(--hp-gutter) 0;
  box-sizing: border-box;
}
.hp-empty { font: 500 15px/1.5 var(--font-sans); color: var(--leif-text-secondary); }

/* ── Partner brands (homepage strip + /collections/partner-brands/) ── */
.hp-partners-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: 20px;
  padding: 18px 22px;
  background: #fff;
  border: 2px solid var(--ed-tile-ink);
  border-radius: 14px;
  color: var(--ed-tile-ink);
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.hp-partners-strip:hover { transform: translate(-2px, -2px); box-shadow: var(--pop-shadow-press); }
.hp-partners-copy { display: flex; flex-direction: column; gap: 4px; flex: 0 0 auto; --hp-ink: var(--ed-tile-ink); }
.hp-partners-logos { flex: 1 1 360px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.hp-partners-logos img { height: 26px; width: auto; max-width: 120px; object-fit: contain; }

.hp-partner-grid {
  max-width: var(--hp-max);
  margin: 0 auto;
  padding: 28px var(--hp-gutter) 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 22px;
}
.hp-partner-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  background: #fff;
  border: 2px solid var(--ed-tile-ink);
  border-radius: 14px;
  box-shadow: var(--pop-shadow-sm);
}
.hp-partner-logo-wrap {
  display: flex;
  align-items: center;
  height: 72px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ed-box-border);
}
.hp-partner-logo { max-height: 56px; max-width: 220px; width: auto; height: auto; object-fit: contain; }
.hp-partner-wordmark { font: 600 24px/1.1 var(--font-display); color: var(--ed-tile-ink); }
.hp-partner-meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.hp-partner-kind { font: 600 11px/1.2 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--leif-text-secondary); }
.hp-partner-name { margin: 0; font: 600 20px/1.2 var(--font-display); color: var(--ed-tile-ink); }
.hp-partner-blurb { margin: 0; font: 400 14.5px/1.55 var(--font-sans); color: var(--leif-text); }
.hp-partner-carries { margin: 0; font: 400 13px/1.5 var(--font-sans); color: var(--leif-text-secondary); }
.hp-partner-carries a { color: var(--ed-tile-ink); }
.hp-partner-link { margin-top: auto; padding-top: 4px; }

/* On the homepage these sections sit inside .home, which already sets the
   width and gutter; don't add a second one. */
.home .hp-section { max-width: none; padding-left: 0; padding-right: 0; }

/* ==========================================================================
   Image-led layout (2026-10-21): featured collection block, collection image
   tiles, one-at-a-time featured brands. Markup: build/build-collections.js.
   Cards here use the homepage's navy-block look (2px navy rule + navy offset)
   per Logan's rule. Real photos (assets/collections/, assets/brands/*-hero)
   fill their tile (cover); the fallback is a product photo CONTAINED on the
   cream photo well, never cropped or enlarged.
   ========================================================================== */
.hp-feat,
.hp-tile {
  background: var(--white, #fff);
  border: 2px solid var(--navy, #16304D);
  border-radius: var(--radius-card, 16px);
  box-shadow: 7px 7px 0 var(--navy, #16304D);
}

/* Shared photo tile */
.hp-media {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 14px;
  background: var(--well, #F1ECE2);
  color: var(--cream, #F6F4EF);
  text-decoration: none;
}
.hp-media-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hp-media--fallback .hp-media-img {
  inset: 8% 20% auto; width: 60%; height: 58%;
  object-fit: contain; mix-blend-mode: multiply;
}
.hp-media-overlay {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; gap: 8px;
  padding: 56px 24px 22px;
  background: linear-gradient(to bottom, rgba(22, 48, 77, 0) 0%, rgba(22, 48, 77, .78) 38%, rgba(22, 48, 77, .9) 100%);
}

/* Featured collection: photo left, six products right, one card */
.hp-feat {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 16px;
  padding: 16px;
}
.hp-feat-hero { min-height: 520px; }
.hp-feat-title { font: 600 34px/1.1 var(--font-display); color: var(--cream, #F6F4EF); }
.hp-feat-desc { max-width: 44ch; font: 400 15px/1.5 var(--font-sans); color: var(--cream, #F6F4EF); opacity: .92; }
.hp-feat-btn {
  align-self: flex-start; margin-top: 6px; padding: 10px 18px;
  border-radius: 999px; background: var(--mustard, #F2C46D); color: var(--navy, #16304D);
  font: 700 14.5px/1.2 var(--font-sans);
}
.hp-feat-hero:hover .hp-feat-btn { background: var(--mustard-hover, #E5B24F); }
/* The other collections: 4:3 photo tiles */
.hp-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 28px; }
.hp-tile { aspect-ratio: 4 / 3; border-radius: var(--radius-card, 16px); }
.hp-tile .hp-media-overlay { border-radius: 0 0 14px 14px; }
.hp-tile-overlay { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 48px 20px 18px; }
.hp-tile-title { font: 600 22px/1.15 var(--font-display); color: var(--cream, #F6F4EF); }
.hp-tile-count { flex: 0 0 auto; font: 700 14px/1.2 var(--font-sans); color: var(--cream, #F6F4EF); white-space: nowrap; }
.hp-tile:hover, .hp-feat-hero:hover { color: var(--cream, #F6F4EF); }
.hp-tile:hover { box-shadow: 4px 4px 0 var(--navy, #16304D); transform: translate(3px, 3px); }


@media (max-width: 900px) {
  .hp-feat { grid-template-columns: minmax(0, 1fr); }
  .hp-feat-hero { min-height: 380px; }
  .hp-tiles { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 640px) {
  .hp-feat, .hp-tile { box-shadow: 5px 5px 0 var(--navy, #16304D); }
  .hp-feat { padding: 12px; gap: 14px; }
  .hp-feat-hero { min-height: 340px; }
  .hp-feat-title { font-size: 28px; }
  .hp-media-overlay { padding: 48px 18px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .hp-tile:hover { transform: none; }
}

/* Collection + partner pages: the category page's container, so product cards
   come out the same size on both (category: up to 1500px of content, a
   clamp(16px, 2vw, 28px) gutter, 20px gaps; 8px gaps on phones). */
.hp-collection .ds-band-inner,
.hp-collection .hp-toolbar,
.hp-collection .hp-product-grid,
.hp-collection .hp-partner-grid {
  max-width: 1556px;
  padding-left: clamp(16px, 2vw, 28px);
  padding-right: clamp(16px, 2vw, 28px);
  box-sizing: border-box;
}
.hp-collection .hp-product-grid { gap: 20px; }
@media (max-width: 640px) {
  .hp-collection .hp-product-grid { gap: 8px; }
}
/* Same columns as the category grid: 4, then 2 at ≤900px (16px gap), 8px gap ≤640px. */
.hp-collection .hp-product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .hp-collection .hp-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media (max-width: 640px) {
  .hp-collection .hp-product-grid { gap: 8px; }
}
/* Category gutter steps: 24px at ≤900px, 16px at ≤640px. */
@media (max-width: 900px) {
  .hp-collection .ds-band-inner, .hp-collection .hp-toolbar, .hp-collection .hp-product-grid, .hp-collection .hp-partner-grid { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 640px) {
  .hp-collection .ds-band-inner, .hp-collection .hp-toolbar, .hp-collection .hp-product-grid, .hp-collection .hp-partner-grid { padding-left: 16px; padding-right: 16px; }
}
/* Cards inherit the page's body type; the category page's is 16px / normal. */
.hp-collection .hp-product-grid .product-card { font-size: 16px; line-height: normal; }

/* ---- Prev / next arrows on sideways card rows (homepage-v2.js wireRowArrows)
   The buttons replace the scrollbar, so it is hidden on every wrapped row;
   touch and trackpad scrolling still work. Buttons sit half over the row's
   edge on desktop and just inside it on phones, and fade out at each end. */
.hp-scroller { position: relative; }
.hp-scroller > * { scrollbar-width: none; }
.hp-scroller > ::-webkit-scrollbar { display: none; }
.hp-scroll-btn {
  position: absolute; top: 50%; z-index: 2; transform: translateY(-50%);
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; cursor: pointer;
  background: var(--white, #fff); color: var(--navy, #16304D);
  border: 2px solid var(--navy, #16304D); border-radius: 50%;
  box-shadow: 3px 3px 0 var(--navy, #16304D);
  transition: opacity .2s, background-color .15s;
}
.hp-scroller.is-scrollable > .hp-scroll-btn { display: inline-flex; }
.hp-scroll-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.hp-scroll-btn:hover { background: var(--well, #F1ECE2); }
.hp-scroll-btn:focus-visible { outline: 2px solid var(--navy, #16304D); outline-offset: 3px; }
.hp-scroll-btn:disabled { opacity: 0; pointer-events: none; }
.hp-scroll-btn--prev { left: -18px; }
.hp-scroll-btn--next { right: -18px; }
@media (max-width: 640px) {
  .hp-scroll-btn { width: 36px; height: 36px; box-shadow: 2px 2px 0 var(--navy, #16304D); }
  .hp-scroll-btn svg { width: 17px; height: 17px; }
  .hp-scroll-btn--prev { left: 2px; }
  .hp-scroll-btn--next { right: 2px; }
}
@media (prefers-reduced-motion: reduce) { .hp-scroll-btn { transition: none; } }

/* ==========================================================================
   Homepage, 2026-10-23 declutter. Order: hero → How we rate → Our faves → Shop Local: Portland → Collections → Guides → FAQ.
   Every section starts with the one header (build/section.js .hp-head):
   H2, optional one-line subtitle, "See all →" right of the title on
   desktop and under it on phones. No eyebrows.
   ========================================================================== */
.home > .hp-section + .hp-section { padding-top: clamp(40px, 6vw, 64px); }
.hp-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 8px 24px; margin-bottom: 20px;
}
.hp-head-text { min-width: 0; }
.ed-theme .hp-title, .hp-title {
  margin: 0; text-align: left;
  font: 600 clamp(26px, 3vw, 34px)/1.15 var(--font-display); color: var(--navy, #16304D);
}
.hp-sub { margin: 6px 0 0; max-width: 62ch; font: 400 16px/1.5 var(--font-sans); color: var(--muted, #5E594F); }
.hp-see-all {
  flex: 0 0 auto; display: inline-block; padding: 3px 0;
  font: 600 15px/1.3 var(--font-sans); color: var(--navy, #16304D); text-decoration: none; white-space: nowrap;
}
.hp-see-all:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) {
  .hp-head { flex-direction: column; align-items: flex-start; }
}

/* ---- 1. Hero: intro + "Popular:" value links ----------------------------- */
.ed-theme .home-hero-intro {
  margin: 14px 0 0; max-width: 60ch;
  font: 400 17px/1.55 var(--font-sans); color: var(--on-navy, #F6F4EF);
}
.ed-theme .home-hero :where(a, button, input):focus-visible { outline-color: var(--mustard, #F2C46D); }

/* ---- 3. How we rate: two lines, one link --------------------------------- */
.hp-how-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0; padding: 0; list-style: none; }
.hp-how-item {
  display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px;
  background: var(--white, #fff); border: 1px solid var(--line, #E4DED2); border-radius: var(--radius-card, 16px);
  font: 400 15.5px/1.5 var(--font-sans); color: var(--ink, #26241F);
}
.hp-how-icon { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: var(--sky, #E7EFF8); color: var(--navy, #16304D); }
.hp-how-icon svg { width: 22px; height: 22px; }
.hp-how-item--planet .hp-how-name { color: var(--planet, #2F6B45); }
.hp-how-item--people .hp-how-name { color: var(--people, #B5532F); }
@media (max-width: 640px) { .hp-how-pair { grid-template-columns: 1fr; gap: 10px; } }

/* ---- Product rows (Our faves, Shop Local): the shared card, sideways ------
   Arrow buttons from homepage-v2.js stand in for the scrollbar. */
.hp-row {
  display: flex; gap: 16px; margin: 0; padding: 4px 2px 12px; list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.hp-row > .product-card { flex: 0 0 236px; scroll-snap-align: start; min-width: 0; margin: 0; }
@media (max-width: 640px) {
  .hp-row { gap: 8px; padding-left: 0; padding-right: 0; }
  .hp-row > .product-card { flex-basis: calc((100% - 8px) / 2); }
}

/* ---- 5. Shop Local: Portland — one featured maker ------------------------
   Maker panel (navy-block, the Shop Local look) + its products. Built to
   take more .hp-sl-feature blocks later (a maker grid) without new CSS. */
.hp-sl-feature {
  display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: 24px; align-items: start;
}
.hp-sl-maker {
  display: flex; flex-direction: column; gap: 8px; padding: 22px;
  background: var(--white, #fff); border: 2px solid var(--navy, #16304D); border-radius: var(--radius-card, 16px);
  box-shadow: 7px 7px 0 var(--navy, #16304D);
}
.hp-sl-maker-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.hp-sl-name { margin: 0; font: 600 26px/1.15 var(--font-display); color: var(--navy, #16304D); }
.hp-sl-sponsored { font: 500 12.5px/1.3 var(--font-sans); color: var(--muted, #5E594F); }
.hp-sl-badge { display: flex; }
.hp-sl-hood { margin: 0; font: 600 14px/1.4 var(--font-sans); color: var(--muted, #5E594F); }
.hp-sl-desc { margin: 0; font: 400 15.5px/1.55 var(--font-sans); color: var(--ink, #26241F); }
.hp-sl-sponsor-note { margin: 0; font: 400 13px/1.5 var(--font-sans); color: var(--muted, #5E594F); }
.hp-sl-shop { margin-top: 6px; font: 700 15px/1.3 var(--font-sans); color: var(--navy, #16304D); }
.hp-sl-partner { margin: 18px 0 0; font: 400 14.5px/1.5 var(--font-sans); color: var(--muted, #5E594F); }
.hp-sl-partner a { font-weight: 600; color: var(--navy, #16304D); }
@media (max-width: 900px) {
  .hp-sl-feature { grid-template-columns: minmax(0, 1fr); }
  .hp-sl-maker { box-shadow: 5px 5px 0 var(--navy, #16304D); }
}

/* ---- 7. Guides: a compact list of links ---------------------------------- */
.hp-guide-list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 32px;
  margin: 0; padding: 0; list-style: none;
}
.hp-guide-list li { padding: 12px 0; border-top: 1px solid var(--line, #E4DED2); }
.hp-guide-link { display: inline-block; font: 600 16.5px/1.35 var(--font-sans); color: var(--navy, #16304D); text-decoration: none; }
.hp-guide-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.hp-guide-desc { display: block; margin-top: 2px; font: 400 14.5px/1.45 var(--font-sans); color: var(--muted, #5E594F); }
@media (max-width: 640px) { .hp-guide-list { grid-template-columns: minmax(0, 1fr); gap: 0; } }

/* ---- 8. FAQ: closed accordion --------------------------------------------- */
.hp-faq .ds-accordion { max-width: 820px; }
.home > .hp-section:last-child { padding-bottom: clamp(48px, 7vw, 80px); }

/* ==========================================================================
   2026-10-23, round 2 (Logan): product cards at category-page size, the
   navy-block look back on the editorial boxes, three equal collection
   tiles, a full-width FAQ.
   ========================================================================== */
/* Product rows: four cards across, like the category grid (3 tablet, 2 phone). */
.hp-row { gap: 20px; }
.hp-row > .product-card { flex: 0 0 calc((100% - 60px) / 4); font-size: 16px; line-height: normal; }
@media (max-width: 1100px) { .hp-row > .product-card { flex-basis: calc((100% - 40px) / 3); } }
@media (max-width: 640px) {
  .hp-row { gap: 8px; }
  .hp-row > .product-card { flex-basis: calc((100% - 8px) / 2); }
}
/* Shop Local: maker panel beside its products on wide screens, above them
   from tablet down. The products are a plain grid (no sideways scroller):
   three across, two on phones (the third is left off there so the row is
   even). Cards at category-page size. */
.hp-sl-feature { grid-template-columns: minmax(260px, 300px) minmax(0, 1fr); gap: 24px; }
.hp-sl-products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.hp-sl-products > .product-card { margin: 0; min-width: 0; font-size: 16px; line-height: normal; }
.hp-sl-tag {
  align-self: flex-start; padding: 4px 10px; border-radius: 999px;
  background: var(--sky, #E7EFF8); color: var(--navy, #16304D);
  font: 700 12px/1.2 var(--font-sans); letter-spacing: .04em; text-transform: uppercase;
}
@media (max-width: 900px) {
  .hp-sl-feature { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 640px) {
  .hp-sl-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .hp-sl-products > .product-card:nth-child(n+3) { display: none; }
}

/* Navy-block ("pop") boxes: How we rate, guides. White face, 2px navy rule,
   solid navy block offset behind it (ds.css section 13). */
.hp-how-item,
.hp-guide-list li {
  background: var(--white, #fff);
  border: 2px solid var(--navy, #16304D);
  border-radius: var(--radius-card, 16px);
  box-shadow: 6px 6px 0 var(--navy, #16304D);
}
.hp-how-pair { gap: 22px; }
.hp-guide-list { gap: 22px; }
.hp-guide-list li { position: relative; padding: 18px 20px; }
.hp-guide-list li:hover { box-shadow: 3px 3px 0 var(--navy, #16304D); transform: translate(3px, 3px); }
/* The whole box is the link's target. */
.hp-guide-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
@media (max-width: 640px) {
  .hp-how-item, .hp-guide-list li { box-shadow: 4px 4px 0 var(--navy, #16304D); }
  .hp-guide-list { gap: 14px; }
}
@media (prefers-reduced-motion: reduce) { .hp-guide-list li:hover { transform: none; } }

/* Collections: three equal 4:3 photo tiles. */
.hp-coll-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 900px) { .hp-coll-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; } }

/* FAQ: full width, like every other section. */
.hp-faq .ds-accordion { max-width: none; }