/* =============================================================================
   Del Plaza — home
   Homepage avenues (/index.php) — the market on the floor, dressed for the floor.
   DESIGN_BIBLE-aligned palette, Univers typography, civic grid discipline.

   Avenue order (top → bottom):
     1. Hero — Imperial Plum ground, the live market and its curator's pick
     2. Hours rail — the mini countdown, overlapping the hero's lower edge
     3. New arrivals — four product cards
     4. Promotions — three banners, three colours, each a doorway to a category
     5. Featured category — editorial two-up, media beside argument
     6. Spotlight departments — Deep Navy, varied tile geometry
     7. Seller in focus — magazine profile
     8. Product carousel — the second seller's rail (component: .dp-carousel)
     9. The delPlaza Guarantee — Golden Milk closing band

   Component styles for the product rail live in css/components.css (.dp-carousel).
   Product-card geometry is the shop listing's own — css/pages/shop.css is loaded
   alongside this file so a card is identical on both surfaces.
   ============================================================================= */

/* =============================================================================
   Avenue Rhythm — DESIGN_BIBLE §3 (Section Padding Rhythm), §5 (Spacing System)
   Every avenue breathes: block padding escalates with the viewport so no two
   elements ever press against one another.
   ============================================================================= */
.home-page {
  padding-top: 0;
  padding-bottom: 0;
}

.home-avenue {
  padding: var(--spacing-lg) 0;
  position: relative;
}

@media (min-width: 660px) {
  .home-avenue {
    padding: var(--spacing-xl) 0;
  }
}

@media (min-width: 1024px) {
  .home-avenue {
    padding: var(--spacing-xxl) 0;
  }
}

@media (min-width: 1200px) {
  .home-avenue {
    padding: var(--spacing-big) 0;
  }
}

/* ---- Avenue grounds — the rhythm of surfaces down the page ---- */
.home-arrivals,
.home-promos-avenue,
.home-seller-avenue {
  background-color: var(--parchment-cream);
}

.home-feature-avenue {
  background-color: var(--alabaster);
}

.home-carousel-avenue {
  background-color: #ffffff;
}

/* =============================================================================
   Section Headings — overline, title, lead, and one action at the far right
   DESIGN_BIBLE §6 (Typography), §11 (Wayfinding — a sign at every junction)
   ============================================================================= */
.home-overline {
  display: inline-block;
  font-family: 'Univers Extended', var(--font-primary);
  font-weight: 500;
  font-size: 0.6875rem;
  text-transform: uppercase;
  color: var(--cognac);
  margin-bottom: var(--spacing-nano);
}

.home-overline--on-dark {
  color: var(--golden-milk);
}

.home-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding-bottom: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
  border-bottom: 1px solid var(--color-border-primary);
}

.home-section-head__text {
  max-width: 720px;
}

.home-section-head__title {
  font-family: 'Univers', var(--font-primary);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  line-height: 1.05;
  color: var(--color-content-heading);
  margin-bottom: var(--spacing-xxs);
}

.home-section-head__lead {
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
  line-height: 1.7;
  color: var(--color-content-primary);
  margin-bottom: 0;
  max-width: 62ch;
}

.home-section-head__action {
  flex-shrink: 0;
}

/* On the Deep Navy ground the head inverts: Golden Milk governs the title. */
.home-section-head--on-dark {
  border-bottom-color: rgba(249, 243, 229, 0.18);
}

.home-section-head--on-dark .home-section-head__title {
  color: var(--golden-milk);
}

.home-section-head--on-dark .home-section-head__lead {
  color: var(--parchment-cream);
}

/* =============================================================================
   Avenue 1 — Hero
   DESIGN_BIBLE §4 (Hero: full-bleed), §7 (Cognac), §8 (Button Geometry)
   The market's own colour. The floor is open; the page says so first.
   ============================================================================= */
.home-hero {
  position: relative;
  background-color: var(--imperial-plum);
  color: var(--golden-milk);
  padding: var(--spacing-xxxl) 0 var(--spacing-huge);
  overflow: hidden;
}

/* Civic-grid hairlines — structure felt rather than seen. */
.home-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(236, 217, 172, 0.06) 0,
    rgba(236, 217, 172, 0.06) 1px,
    transparent 1px,
    transparent 6rem
  );
  pointer-events: none;
}

.home-hero .container {
  position: relative;
  z-index: 2;
}

.home-hero__grid {
  row-gap: var(--spacing-xxl);
}

.home-hero__copy {
  max-width: 760px;
}

.home-hero__overline {
  display: inline-flex;
  /* Baseline registration, not centre: the dot's bottom edge is set on the text
     baseline so it can be centred on the cap band rather than on the line box.
     Univers caps sit above the line-box centre — under align-items: center the
     dot therefore read roughly a pixel low. See .home-market-dot. */
  align-items: baseline;
  gap: var(--spacing-nano);
  font-family: 'Univers Extended', var(--font-primary);
  font-weight: 500;
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--golden-milk);
  margin-bottom: var(--spacing-md);
}

.home-market-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--golden-milk);
  /* Optical centring on the cap band, in the spirit of the pill-text correction
     in components.css. The parent's align-items: baseline drops the dot's bottom
     edge onto the text baseline; the cap unit then lifts the dot's centre onto
     the middle of the capitals — exact for any typeface, at any size, because
     the correction is derived from the font rather than assumed. Where cap is
     unsupported the declaration is dropped, the dot keeps baseline alignment,
     and the residual error stays under 0.8px. */
  position: relative;
  bottom: calc(0.25rem - 0.5cap);
  animation: homePulse 2.4s var(--ease-out) infinite;
}

@keyframes homePulse {
  0%   { box-shadow: 0 0 0 0 rgba(236, 217, 172, 0.65); }
  70%  { box-shadow: 0 0 0 10px rgba(236, 217, 172, 0); }
  100% { box-shadow: 0 0 0 0 rgba(236, 217, 172, 0); }
}

/* The marquee is set as two lines — "Del Plaza presents:" over the market's
   name — so the type is scaled to hold that first line on one measure at every
   width, and led a shade looser than a single-line display to keep air between
   the two. Parchment Cream is the brightest ink on the plum ground (14.02:1). */
.home-hero__title {
  font-family: 'Univers', var(--font-primary);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(2rem, 5vw, 3.75rem);
  line-height: 1.05;
  color: var(--parchment-cream);
  margin-bottom: var(--spacing-md);
}

.home-hero__lead {
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  line-height: 1.7;
  color: var(--golden-milk);
  max-width: 56ch;
  margin-bottom: var(--spacing-lg);
}

.home-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm) var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

/* The provenance sticker inverts on the plum ground: white ground, Cognac
   lettering — the warm accent that keeps the composition from going cold. */
.home-hero .provenance-badge {
  background-color: #ffffff;
  color: var(--cognac);
  margin-bottom: 0;
}

.home-hero__cycle {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-nano);
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--golden-milk);
}

.home-hero__cycle i {
  color: var(--golden-milk);
}

.home-hero__flag {
  display: block;
  width: auto;
  height: 1.25rem;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xxs);
}

/* ---- Hero buttons — the Imperial Plum ground calls for its own two variants.
   Golden Milk is the ground's own voice; the press lifts it to white. ---- */
.btn-hero-light {
  background-color: var(--golden-milk);
  border: 1px solid var(--golden-milk);
  color: var(--imperial-plum);
}

.btn-hero-light:hover {
  background-color: #ffffff;
  border-color: #ffffff;
  color: var(--imperial-plum);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.btn-hero-light:active {
  background-color: var(--parchment-cream);
  border-color: var(--parchment-cream);
  color: var(--imperial-plum);
}

.btn-hero-outline {
  background-color: transparent;
  border: 1px solid rgba(236, 217, 172, 0.75);
  color: var(--golden-milk);
}

.btn-hero-outline:hover {
  background-color: var(--golden-milk);
  border-color: var(--golden-milk);
  color: var(--imperial-plum);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.btn-hero-outline:active {
  background-color: #ffffff;
  border-color: #ffffff;
  color: var(--imperial-plum);
}

.btn .home-btn__icon {
  margin-left: var(--spacing-nano);
  transition: transform 0.25s var(--ease-out);
}

.btn:hover .home-btn__icon {
  transform: translateX(6px);
}

/* ---- Hero companion — the curator's pick, and the two facts beneath it ---- */
.home-hero__stack {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxs);
}

.home-hero__pick {
  display: block;
  position: relative;
  background-color: #ffffff;
  border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
  overflow: hidden;
  text-decoration: none;
  box-shadow: var(--shadow-heavy);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}

.home-hero__pick:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
}

.home-hero__pick-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--parchment-cream);
}

.home-hero__pick-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease-out);
}

.home-hero__pick:hover .home-hero__pick-media img {
  transform: scale(1.05);
}

.home-hero__pick-tag {
  position: absolute;
  top: var(--spacing-nano);
  left: var(--spacing-nano);
  z-index: 2;
  background-color: var(--imperial-plum);
  color: var(--golden-milk);
  font-family: 'Univers Extended', var(--font-primary);
  font-weight: 600;
  font-size: 0.6875rem;
  text-transform: uppercase;
  padding: var(--spacing-quark) var(--spacing-nano);
  border-radius: 0 0 6px 6px;
}

.home-hero__pick-body {
  padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-md);
}

.home-hero__pick-name {
  font-family: 'Univers', var(--font-primary);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.25;
  color: var(--color-content-heading);
  margin-bottom: var(--spacing-quark);
}

.home-hero__pick-price {
  font-family: 'Univers Extended', var(--font-primary);
  font-weight: 400;
  font-size: 1.25rem;
  color: var(--cognac);
}

.home-hero__pick-seller {
  display: block;
  font-family: var(--font-primary);
  font-size: 0.75rem;
  color: var(--color-content-primary);
  margin-top: var(--spacing-quark);
}

/* ---- Hero facts — two small squares beneath the pick ---- */
.home-hero__facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-xxs);
}

.home-hero__fact {
  padding: var(--spacing-sm);
  background-color: rgba(236, 217, 172, 0.06);
  border: 1px solid rgba(236, 217, 172, 0.7);
  border-radius: 0 0 6px 6px;
  transition: background-color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}

.home-hero__fact:hover {
  background-color: rgba(236, 217, 172, 0.12);
  border-color: var(--golden-milk);
}

.home-hero__fact-value {
  display: block;
  font-family: 'Univers', var(--font-primary);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--golden-milk);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--spacing-quark);
}

.home-hero__fact-label {
  display: block;
  font-family: 'Univers Extended', var(--font-primary);
  font-weight: 500;
  font-size: 0.625rem;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--golden-milk);
}

/* =============================================================================
   Avenue 2 — The Hours Rail
   The timetable's mini countdown, tied to the market currently on the floor.
   The rail rises out of the hero and overlaps its lower edge — weight upon
   the page rather than beside it.
   ============================================================================= */
.home-hours {
  background-color: var(--parchment-cream);
  padding-bottom: var(--spacing-md);
}

.home-hours__rail {
  position: relative;
  z-index: 5;
  margin-top: calc(-1 * var(--spacing-xxl));
  background-color: #ffffff;
  border: 1px solid var(--color-border-primary);
  border-top: 3px solid var(--cognac);
  border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
  box-shadow: var(--shadow-medium);
  padding: var(--spacing-lg) var(--spacing-md);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
}

/* The five-minute reset between markets — the rail warms to Golden Milk. */
/* Desktop: four columns with ruled lanes between them. */
@media (min-width: 992px) {
  .home-hours__rail {
    grid-template-columns: 1.1fr 1.2fr 1fr auto;
    align-items: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg) var(--spacing-xl);
  }

  .home-hours__count,
  .home-hours__times,
  .home-hours__next-wrap {
    align-self: stretch;
    padding-left: var(--spacing-lg);
    border-left: 1px solid var(--color-border-primary);
  }
}

.home-hours__rail.is-refresh {
  border-top-color: var(--tawny-umber);
  background-color: var(--golden-milk);
}

.home-hours__rail.is-refresh .home-hours__time-value {
  color: var(--deep-navy);
}

.home-hours__rail.is-refresh .home-count__unit {
  color: var(--imperial-plum);
}

.home-hours__market {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  min-width: 0;
}

.home-flag {
  display: block;
  width: auto;
  height: 1.625rem;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.home-hours__overline {
  display: block;
  font-family: 'Univers Extended', var(--font-primary);
  font-weight: 500;
  font-size: 0.6875rem;
  text-transform: uppercase;
  color: var(--color-content-primary);
  margin-bottom: var(--spacing-quark);
}

.home-hours__name {
  display: block;
  font-family: 'Univers Condensed', var(--font-primary);
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1.15;
  color: var(--color-content-heading);
  margin-bottom: var(--spacing-nano);
}

.home-hours__badge {
  margin-bottom: 0;
}

.home-hours__count-label {
  display: block;
  font-family: 'Univers Extended', var(--font-primary);
  font-weight: 500;
  font-size: 0.6875rem;
  text-transform: uppercase;
  color: var(--color-content-primary);
  margin-bottom: var(--spacing-nano);
}

/* ---- The key figure — h / m / s in the timetable's own grammar ---- */
.home-count {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  font-family: 'Univers', var(--font-primary);
  font-weight: 700;
  color: var(--deep-navy);
  font-variant-numeric: tabular-nums;
}

.home-count__part {
  display: inline-flex;
  align-items: baseline;
}

.home-count__num {
  font-size: clamp(1.75rem, 3.6vw, 2.75rem);
  line-height: 1;
}

.home-count__unit {
  font-family: 'Univers Extended', var(--font-primary);
  font-weight: 500;
  font-size: clamp(0.8125rem, 1.4vw, 1rem);
  color: var(--cognac);
  margin-left: 2px;
}

.home-hours__times {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-nano);
}

@media (min-width: 992px) {
  .home-hours__times {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm);
  }
}

.home-hours__time {
  display: block;
  min-width: 0;
}

.home-hours__time + .home-hours__time {
  margin-top: var(--spacing-nano);
}

@media (min-width: 992px) {
  .home-hours__time + .home-hours__time {
    margin-top: 0;
  }
}

.home-hours__time-label {
  display: block;
  font-family: 'Univers Extended', var(--font-primary);
  font-weight: 500;
  font-size: 0.6875rem;
  text-transform: uppercase;
  color: var(--color-content-primary);
  margin-bottom: var(--spacing-quark);
}

.home-hours__time-value {
  display: block;
  font-family: 'Univers Condensed', var(--font-primary);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--color-content-heading);
}

.home-hours__time-value--hmt {
  color: var(--cognac);
}

.home-hours__next {
  display: block;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--color-content-primary);
  margin-bottom: var(--spacing-sm);
}

.home-hours__link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-nano);
  font-family: 'Univers Extended', var(--font-primary);
  font-weight: 500;
  font-size: 0.6875rem;
  text-transform: uppercase;
  color: var(--deep-navy);
  text-decoration: none;
}

.home-hours__link i {
  transition: transform 0.25s var(--ease-out);
}

.home-hours__link:hover {
  color: var(--cognac);
}

.home-hours__link:hover i {
  transform: translate(3px, -3px);
}

/* =============================================================================
   Product Card — page-level extensions
   The card itself is the shop listing's (css/pages/shop.css). The homepage adds
   two badges and the seller meta line. The SKU line that once followed the
   maker has been retired from the card: at card scale it was inventory
   bookkeeping, not provenance, and it competed with the maker for the same
   breath. The SKU itself is unchanged wherever it genuinely belongs - the
   product page, the basket, Track Order, the order emails, the order
   confirmation and the seller's desk.
   DESIGN_BIBLE §10 (Card Layout Patterns), §12 (Provenance Badging)
   ============================================================================= */
.home-page .product-card__badge--new {
  background-color: var(--imperial-plum);
  color: #ffffff;
}

.home-page .product-card__meta {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-tiny);
  margin-top: var(--spacing-nano);
  margin-bottom: var(--spacing-nano);
  padding-top: var(--spacing-nano);
  border-top: 1px solid var(--color-border-primary);
}

.home-page .product-card__meta-seller {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--color-content-heading);
}

/* =============================================================================
   Avenue 4 — Promotions
   Three banners, three grounds, three doorways.
   DESIGN_BIBLE §1 (Ethos — physical presence), §13 (Micro-interactions)
   ============================================================================= */
.home-promos__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xxs);
}

@media (min-width: 660px) {
  .home-promos__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-xs);
  }
}

@media (min-width: 1024px) {
  .home-promos__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-sm);
  }
}

.home-promo {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 16rem;
  padding: var(--spacing-lg) var(--spacing-md) var(--spacing-md);
  border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}

/* Shine sweep — the badge's own gesture, granted to the banner. */
.home-promo::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s var(--ease-out);
  pointer-events: none;
}

.home-promo:hover::after {
  transform: translateX(100%);
}

.home-promo:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-heavy);
}

.home-promo:active {
  transform: translateY(-2px);
}

.home-promo__overline {
  display: block;
  font-family: 'Univers Extended', var(--font-primary);
  font-weight: 500;
  font-size: 0.6875rem;
  text-transform: uppercase;
  margin-bottom: var(--spacing-md);
}

.home-promo__title {
  display: block;
  font-family: 'Univers', var(--font-primary);
  font-weight: 700;
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  line-height: 1.15;
  margin-bottom: var(--spacing-nano);
}

.home-promo__note {
  display: block;
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: 0.875rem;
  line-height: 1.6;
  margin-bottom: var(--spacing-lg);
}

.home-promo__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-nano);
  font-family: 'Univers Extended', var(--font-primary);
  font-weight: 500;
  font-size: 0.75rem;
  text-transform: uppercase;
  margin-top: auto;
}

.home-promo__cta i {
  transition: transform 0.25s var(--ease-out);
}

.home-promo:hover .home-promo__cta i {
  transform: translateX(6px);
}

/* ---- Banner grounds ---- */
.home-promo--cognac {
  background-color: var(--cognac);
  color: #ffffff;
}

.home-promo--cognac .home-promo__overline {
  color: var(--golden-milk);
}

.home-promo--navy {
  background-color: var(--deep-navy);
  color: var(--parchment-cream);
}

.home-promo--navy .home-promo__overline {
  color: var(--golden-milk);
}

.home-promo--gold {
  background-color: var(--golden-milk);
  color: var(--deep-navy);
}

.home-promo--gold .home-promo__overline {
  color: var(--imperial-plum);
}

.home-promo--gold .home-promo__note {
  color: var(--slate-charcoal);
}

/* =============================================================================
   Avenue 5 — Featured Category
   An editorial two-up: the object on the left, the argument on the right.
   DESIGN_BIBLE §3 (Blocks), §6 (Typography)
   ============================================================================= */
.home-feature__panel {
  display: grid;
  grid-template-columns: 1fr;
  background-color: #ffffff;
  border: 1px solid var(--color-border-primary);
  border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-light);
}

@media (min-width: 1024px) {
  .home-feature__panel {
    grid-template-columns: 1fr 1fr;
  }
}

.home-feature__media {
  position: relative;
  min-height: 18rem;
  background-color: var(--parchment-cream);
}

.home-feature__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.home-feature__badge {
  position: absolute;
  top: var(--spacing-xxs);
  left: var(--spacing-xxs);
  z-index: 2;
  margin-bottom: 0;
}

.home-feature__caption {
  position: absolute;
  left: var(--spacing-xxs);
  bottom: var(--spacing-xxs);
  z-index: 2;
  background-color: rgba(46, 26, 71, 0.88);
  color: #ffffff;
  font-family: 'Univers Extended', var(--font-primary);
  font-weight: 500;
  font-size: 0.625rem;
  letter-spacing: normal;
  text-transform: uppercase;
  padding: var(--spacing-quark) var(--spacing-nano);
  border-radius: 0 0 6px 6px;
}

.home-feature__body {
  padding: var(--spacing-xl) var(--spacing-md);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (min-width: 1024px) {
  .home-feature__body {
    padding: var(--spacing-xxl);
  }
}

.home-feature__title {
  font-family: 'Univers', var(--font-primary);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.05;
  color: var(--color-content-heading);
  margin-bottom: var(--spacing-xxs);
}

.home-feature__text {
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: clamp(0.9375rem, 1.2vw, 1rem);
  line-height: 1.75;
  color: var(--color-content-primary);
  margin-bottom: var(--spacing-md);
}

.home-feature__list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--spacing-lg);
}

.home-feature__list li {
  position: relative;
  padding-left: var(--spacing-xxs);
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.9;
  color: var(--color-content-primary);
}

.home-feature__list li::before {
  content: '\2014';
  position: absolute;
  left: 0;
  color: var(--cognac);
}

.home-feature__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xxs);
}

.home-feature__minis {
  margin-top: var(--spacing-md);
}

/* =============================================================================
   Avenue 6 — Spotlight Departments
   Deep Navy ground, tile geometry that varies by rank: one department spans
   four cells and carries the photograph; the rest hold their own weight.
   Nine tiles — one 2×2 feature and eight singles — divide exactly into the
   2-, 3- and 4-column grids, so no avenue ever ends on a ragged row.
   DESIGN_BIBLE §4 (Grid), §7 (Deep Navy), §13 (Card hovers lift)
   ============================================================================= */
.home-departments {
  background-color: var(--deep-navy);
  color: var(--parchment-cream);
}

.home-departments__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: minmax(11rem, auto);
  gap: var(--spacing-xxs);
}

@media (min-width: 660px) {
  .home-departments__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-xs);
  }
}

@media (min-width: 1024px) {
  .home-departments__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-sm);
  }
}

.home-dept {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 11rem;
  padding: var(--spacing-md) var(--spacing-sm);
  background-color: rgba(249, 243, 229, 0.06);
  border: 1px solid rgba(249, 243, 229, 0.16);
  border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
  color: var(--parchment-cream);
  text-decoration: none;
  overflow: hidden;
  transition: background-color 0.3s var(--ease-out), border-color 0.3s var(--ease-out),
              color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}

.home-dept:hover {
  background-color: var(--golden-milk);
  border-color: var(--golden-milk);
  color: var(--deep-navy);
  transform: translateY(-4px);
}

.home-dept__icon {
  font-size: 1.5rem;
  color: var(--golden-milk);
  margin-bottom: var(--spacing-sm);
  transition: color 0.3s var(--ease-out);
}

.home-dept:hover .home-dept__icon {
  color: var(--cognac);
}

.home-dept__name {
  display: block;
  font-family: 'Univers', var(--font-primary);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.2;
  margin-bottom: var(--spacing-quark);
}

.home-dept__count {
  display: block;
  font-family: 'Univers Extended', var(--font-primary);
  font-weight: 500;
  font-size: 0.625rem;
  text-transform: uppercase;
  color: var(--muted-silver);
  transition: color 0.3s var(--ease-out);
}

.home-dept:hover .home-dept__count {
  color: var(--slate-charcoal);
}

/* ---- Feature tile — spans the grid and carries the photograph ---- */
.home-dept--feature {
  grid-column: span 2;
  grid-row: span 2;
  background-image:
    linear-gradient(180deg, rgba(46, 26, 71, 0.3) 0%, rgba(46, 26, 71, 0.92) 100%),
    url('../../assets/Dummy%20Data/machine.jpg');
  background-size: cover;
  background-position: center;
  border-color: rgba(236, 217, 172, 0.32);
}

.home-dept--feature .home-dept__name {
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  color: #ffffff;
}

.home-dept--feature .home-dept__count {
  color: var(--golden-milk);
}

.home-dept--feature:hover {
  background-color: transparent;
  border-color: var(--golden-milk);
  color: #ffffff;
}

.home-dept--feature:hover .home-dept__name {
  color: var(--golden-milk);
}

.home-dept--feature:hover .home-dept__count {
  color: var(--golden-milk);
}

/* =============================================================================
   Avenue 7 — Seller in Focus
   A magazine profile: portrait, issue sticker, pull quote, ledger of facts.
   DESIGN_BIBLE §2 (localized brand storytelling), §10 (Media Card)
   ============================================================================= */
.home-seller__card {
  display: grid;
  grid-template-columns: 1fr;
  background-color: #ffffff;
  border: 1px solid var(--color-border-primary);
  border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-light);
}

/* The plate wraps the photograph rather than containing it: no fixed height, no
   letterboxing, no crop. Seller images arrive in every dimension, so the panel is
   simply as tall and as wide as the picture it holds. The corner sticker is
   anchored to the plate, so it always lands on the image's own top-left corner. */
.home-seller__portrait {
  position: relative;
  background-color: var(--golden-milk);
}

.home-seller__portrait img {
  display: block;
  width: 100%;
  height: auto;
}

/* From tablet up the plate is capped in height rather than in width. The wrap
   still holds exactly — the gold is never wider or taller than the photograph —
   but no seller's portrait can turn the avenue into a billboard: 34rem is the
   ceiling for every ratio, portrait or landscape. A plate that ends up narrower
   than the card sits centred on it; one that still meets the full measure runs
   full bleed, exactly as it does on a phone. */
@media (min-width: 660px) {
  .home-seller__portrait {
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
  }

  .home-seller__portrait img {
    width: auto;
    max-width: 100%;
    max-height: 34rem;
  }
}

.home-seller__issue {
  position: absolute;
  top: var(--spacing-xxs);
  left: var(--spacing-xxs);
  z-index: 2;
  background-color: var(--cognac);
  color: #ffffff;
  font-family: 'Univers Extended', var(--font-primary);
  font-weight: 500;
  font-size: 0.625rem;
  text-transform: uppercase;
  padding: var(--spacing-quark) var(--spacing-nano);
  border-radius: 0 0 6px 6px;
}

/* Two blocks, so the card can read as a single column on small screens and as a
   spread on large ones: the story, and the ledger that walks beside it. */
.home-seller__story {
  padding: var(--spacing-xl) var(--spacing-md) var(--spacing-md);
}

.home-seller__ledger {
  padding: 0 var(--spacing-md) var(--spacing-xl);
}

.home-seller__name {
  font-family: 'Univers', var(--font-primary);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.05;
  color: var(--color-content-heading);
  margin-bottom: var(--spacing-xxs);
}

.home-seller__market {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-nano);
  font-family: var(--font-primary);
  font-size: 0.8125rem;
  color: var(--color-content-primary);
  margin-bottom: var(--spacing-md);
}

.home-seller__flag {
  display: block;
  width: auto;
  height: 0.875rem;
}

.home-seller__quote {
  font-family: 'Univers', var(--font-primary);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.125rem, 1.9vw, 1.5rem);
  line-height: 1.45;
  color: var(--deep-navy);
  border-left: 3px solid var(--cognac);
  padding-left: var(--spacing-md);
  margin: 0 0 var(--spacing-md);
}

.home-seller__text {
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--color-content-primary);
  margin-bottom: var(--spacing-md);
}

.home-seller__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: var(--spacing-md);
  margin: 0 0 var(--spacing-lg);
  padding: var(--spacing-md) 0;
  border-top: 1px solid var(--color-border-primary);
  border-bottom: 1px solid var(--color-border-primary);
}

.home-seller__stat-value {
  display: block;
  font-family: 'Univers', var(--font-primary);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--cognac);
  margin-bottom: var(--spacing-quark);
}

.home-seller__stat-label {
  display: block;
  font-family: 'Univers Extended', var(--font-primary);
  font-weight: 500;
  font-size: 0.6875rem;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--color-content-primary);
}

/* ---- Large screens: the profile opens as a spread ----
   A photograph column beside a text column only ever flatters one image ratio,
   so the rail is given a second job instead of being left empty: the plate holds
   the head of the left column, the ledger holds its floor and stretches to meet
   the story, and the story takes the right column across the full height, ruled
   off from the rail. Whatever dimensions the photograph arrives in, the left
   column is full of something, and the act sits on the card's own floor. */
@media (min-width: 1024px) {
  .home-seller__card {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto 1fr;
  }

  .home-seller__portrait {
    grid-column: 1;
    grid-row: 1;
    margin-inline: 0;
  }

  .home-seller__ledger {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-xxl);
  }

  .home-seller__story {
    grid-column: 2;
    grid-row: 1 / span 2;
    padding: 0 var(--spacing-xxl) var(--spacing-xxl) var(--spacing-xl);
    border-left: 1px solid var(--color-border-primary);
  }

  /* ---- The ledger: three crowned plates ----
     These figures are the one place on the page where numbers are the ornament,
     so each is given an object of its own: a cognac crown, a caption on the
     plate's ceiling, and the figure standing on its floor. The lanes are
     deliberately open — 24px above and below, 16px either side, 20px between
     plates — so the band breathes between the photograph above and the act
     below rather than reading as a table of rules. */
  .home-seller__stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: var(--spacing-xs);
    margin-bottom: 0;
    padding: 0;
    border-top: none;
    border-bottom: none;
  }

  .home-seller__stat {
    container-type: inline-size;      /* the figure is measured against the plate */
    display: flex;
    flex-direction: column-reverse;   /* caption first, figure on the floor */
    justify-content: space-between;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-xxs);
    background-color: var(--parchment-cream);
    border: 1px solid var(--color-border-primary);
    border-top: 3px solid var(--cognac);
    border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
  }

  .home-seller__stat-value {
    margin-bottom: 0;
    /* Fallback first (viewport-relative), then the reading that actually knows
       how wide the plate is — so a 107px plate on a 1024px screen and a 156px
       plate on a 1440px screen each get a figure that fits with room to spare. */
    font-size: clamp(1.5rem, 2vw, 2.25rem);
    font-size: clamp(1.25rem, 22cqi, 2.25rem);
    line-height: 1;
  }

  .home-seller__stat-label {
    margin-bottom: 0;
  }

  .home-seller__ledger .home-feature__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .home-seller__text {
    margin-bottom: 0;
  }
}


/* =============================================================================
   Avenue 9 — The delPlaza Guarantee
   The certification band. The ground is Oxford Light — the house's cool,
   official surface — with white certificate plates sealed by a Deep Navy crown,
   Cognac kept back as the single warm note on the icon, and Imperial Plum
   carrying the section label. Every ink on this field clears AA: Plum 11.2:1,
   Navy 6.4:1, and the plates' own Slate 6.6:1 on white.
   DESIGN_BIBLE §2 (The delPlaza Guarantee), §7 (Oxford Light / Deep Navy)
   ============================================================================= */
.home-guarantee {
  background-color: var(--oxford-light);
  color: var(--deep-navy);
}

/* The section label, re-inked for the cool ground: Cognac would fall to 3.5:1
   here, Imperial Plum holds 11.2:1 and reads as the premium marker. */
.home-guarantee .home-overline {
  color: var(--imperial-plum);
}

.home-guarantee__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-md);
}

@media (min-width: 660px) {
  .home-guarantee__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
  }
}

@media (min-width: 1024px) {
  .home-guarantee__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-xl);
  }
}

.home-guarantee__pillar {
  padding: var(--spacing-lg) var(--spacing-md);
  background-color: #ffffff;
  border: 1px solid rgba(60, 71, 122, 0.25);
  border-top: 3px solid var(--deep-navy);
  border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}

.home-guarantee__pillar:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-medium);
}

.home-guarantee__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  background-color: var(--cognac);
  color: #ffffff;
  font-size: 1.25rem;
  border-radius: 0 0 6px 6px;
  margin-bottom: var(--spacing-md);
}

.home-guarantee__title {
  font-family: 'Univers', var(--font-primary);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.25;
  color: var(--deep-navy);
  margin-bottom: var(--spacing-nano);
}

.home-guarantee__text {
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--slate-charcoal);
  margin-bottom: 0;
}

.home-guarantee__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-lg);
  border-top: 1px solid rgba(60, 71, 122, 0.25);
}

.home-guarantee__statement {
  font-family: 'Univers', var(--font-primary);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.125rem, 1.8vw, 1.5rem);
  line-height: 1.4;
  color: var(--deep-navy);
  max-width: 44ch;
  margin-bottom: 0;
}

/* =============================================================================
   Responsive Refinements — DESIGN_BIBLE §15 (Responsive Behaviour)
   ============================================================================= */
@media (max-width: 991.98px) {
  .home-hero {
    padding: var(--spacing-xxl) 0 var(--spacing-xxxl);
  }

  .home-hours__rail {
    margin-top: calc(-1 * var(--spacing-xxl));
  }
}

@media (max-width: 575.98px) {
  .home-hero {
    padding: var(--spacing-xxl) 0 var(--spacing-xxl);
  }

  .home-hero__fact {
    padding: var(--spacing-xs) var(--spacing-nano);
  }

  .home-hours__rail {
    margin-top: calc(-1 * var(--spacing-xl));
    padding: var(--spacing-md) var(--spacing-sm);
  }

  .home-count {
    gap: var(--spacing-xxs);
  }

  .home-promo {
    min-height: 13rem;
    padding: var(--spacing-md) var(--spacing-sm);
  }

  .home-dept {
    padding: var(--spacing-sm) var(--spacing-xxs);
    min-height: 9.5rem;
  }

  .home-guarantee__pillar {
    padding: var(--spacing-md) var(--spacing-sm);
  }
}

/* =============================================================================
   Avenue 5 (continued) — Category Highlights
   Three numbered cards: the featured category's articles of faith. No imagery —
   weight, number and argument only.
   ============================================================================= */
.home-highlights {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
}

@media (min-width: 660px) {
  .home-highlights {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
  }
}

@media (min-width: 1024px) {
  .home-highlights {
    gap: var(--spacing-xl);
    margin-top: var(--spacing-xl);
  }
}

.home-highlight {
  position: relative;
  padding: var(--spacing-lg) var(--spacing-md) var(--spacing-md);
  background-color: #ffffff;
  border: 1px solid var(--color-border-primary);
  border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}

.home-highlight::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3rem;
  height: 3px;
  background-color: var(--cognac);
}

.home-highlight:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-medium);
}

.home-highlight__index {
  display: block;
  font-family: 'Univers', var(--font-primary);
  font-weight: 900;
  font-style: italic;
  font-size: 2rem;
  line-height: 1;
  color: var(--muted-silver);
  margin-bottom: var(--spacing-md);
  transition: color 0.3s var(--ease-out);
}

.home-highlight:hover .home-highlight__index {
  color: var(--cognac);
}

.home-highlight__title {
  font-family: 'Univers', var(--font-primary);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.25;
  color: var(--color-content-heading);
  margin-bottom: var(--spacing-nano);
}

.home-highlight__text {
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--color-content-primary);
  margin-bottom: 0;
}

/* =============================================================================
   Avenue 8 (continued) — Carousel Footer
   ============================================================================= */
.home-carousel__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
}

.home-carousel__note {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--color-content-primary);
}

/* =============================================================================
   Avenue 6 (continued) — Outlined action on the Deep Navy ground
   Bootstrap's outline variant is re-pointed through its own variable API so the
   control stays legible on a dark surface (DESIGN_BIBLE §16).
   ============================================================================= */
.home-section-head__action--on-dark {
  --bs-btn-color: var(--golden-milk);
  --bs-btn-border-color: var(--golden-milk);
  --bs-btn-hover-bg: var(--golden-milk);
  --bs-btn-hover-border-color: var(--golden-milk);
  --bs-btn-hover-color: var(--deep-navy);
  --bs-btn-active-bg: var(--parchment-cream);
  --bs-btn-active-border-color: var(--parchment-cream);
  --bs-btn-active-color: var(--imperial-plum);
}

/* =============================================================================
   Avenue 2 (continued) — Countdown stack & closing column
   ============================================================================= */
.home-hours__count {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.home-hours__next-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--spacing-sm);
}