/* Panelling Direct — home bundle (v1.45.54).
   Page-specific layer; loads only on the contexts that need it.
   Source line ranges (v1.45.53): 8442-9697

   LOAD ORDER IS LOAD-BEARING:
       style.css (core-early)  ->  page bundle(s)  ->  css/core-late.css
   Enqueued by pd_enqueue_assets() in functions.php. */

/* ── source lines 8442–9697 ── */
/* ══════════════════════════════════════════════════════════════
   v1.11.0 — HOMEPAGE
   Figma: node 631:31683 (Homepage L)
   Loaded by front-page.php.

   Layout primer:
     1. .pd-home-hero          — sage-green bleed-image hero
     2. .pd-home-styles        — 4-up style cards with SVG swatches
     3. .pd-home-delivery      — wide navy banner with photo right
     4. .pd-home-rooms         — 8 image+caption category cards
     5. .pd-home-reviews       — title + Trustpilot widget placeholder
     6. .pd-home-featured      — lavender pill with publication logos
     7. .pd-home-more          — 2 dark-overlay cards with arrow CTA
     8. .pd-home-bestsellers   — 8 product cards (reuses .pd-card)
     9. .pd-home-inspired      — Instagram mosaic (1 large + 6 small)

   Several existing primitives reused:
     • Hero pattern → same as .pd-trade-hero / .pd-about-elevate
     • Product cards in best-sellers → .pd-card unchanged
     • Trustpilot logo → existing TrustPilot-Green.png
     • Featured-In strip → existing Featured-In.png
══════════════════════════════════════════════════════════════ */

.pd-home {
  background: #fff;
  font-family: 'Open Sans', sans-serif;
  color: #000;
}

/* Wrap holding all sections after the hero — single max-width
   container that gives them consistent gutters and 64px gap. */
.pd-home__wrap {
  max-width: var(--row-max);
  margin: 0 auto;
  padding: 64px var(--row-pad);
  display: flex;
  flex-direction: column;
  gap: 64px;
}

/* Common section header (used by Shop by Style / Room / etc.) */
.pd-home-section__head {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-bottom: 32px;
}
.pd-home-section__title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 27px;
  line-height: 1.2;
  margin: 0;
  color: #000;
}
.pd-home-section__head .pd-home-section__title { flex: 1 1 auto; }
.pd-home-section__view-all {
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  color: var(--navy-mid);
  text-decoration: none;
  flex-shrink: 0;
}
.pd-home-section__view-all:hover {
  text-decoration: underline;
}
/* When a section uses just the title (no head wrapper), give it
   the same bottom margin so spacing stays consistent. */
.pd-home-section > .pd-home-section__title {
  margin-bottom: 32px;
}

/* ── 1. HERO ────────────────────────────────────────────────── */
/* Same bleed-image pattern as Trade hero / About-Elevate. */
.pd-home-hero {
  background: #ACB29C;          /* sage-green from Figma */
  color: #000;
  position: relative;
  overflow: hidden;
}
.pd-home-hero__inner {
  max-width: var(--row-max);
  margin: 0 auto;
  padding: 68px min(45%, 700px) 68px var(--row-pad);
  position: relative;
  z-index: 2;
  min-height: 450px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.pd-home-hero__trustpilot {
  display: flex;
  align-items: center;
}
.pd-home-hero__trustpilot img {
  display: block;
  height: 34px;
  width: auto;
}
.pd-home-hero__copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 620px;
}
.pd-home-hero__title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 52px;
  line-height: 1.2;
  margin: 0;
  color: #000;
}
.pd-home-hero__lede {
  font-size: 23px;
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
  color: #000;
}
.pd-home-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 227px;
  height: 55px;
  padding: 12px;
  background: var(--navy);
  color: #fff;
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.41;
  text-align: center;
  text-decoration: none;
  border-radius: 12px;
  transition: background-color 0.15s ease;
}
.pd-home-hero__cta:hover,
.pd-home-hero__cta:focus-visible {
  background: var(--navy-mid);
  color: #fff;
}
.pd-home-hero__media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(50%, 800px);
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}
.pd-home-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pd-home-hero__fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    #ACB29C 0%,
    rgba(172, 178, 156, 0) 50%
  );
  pointer-events: none;
  z-index: 1;
}

/* ── 2. SHOP BY STYLE ──────────────────────────────────────── */
.pd-home-styles__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.pd-style-card {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
  transition: box-shadow 0.2s ease;
  /* Flex column so the body element can flex-grow and fill the card.
     Combined with the grid's default align-items: stretch this makes
     all four cards the same height as the tallest, with each body
     centring its content vertically (Figma: every breakpoint shows
     this `flex-[1_0_0] justify-center` pattern). */
  display: flex;
  flex-direction: column;
}
.pd-style-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.pd-style-card__link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.pd-style-card__image {
  position: relative;
  height: 419px;
  background: #d9d9d9;
}
.pd-style-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pd-style-card__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  background: #FCDC00;
  color: var(--navy);
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  line-height: 1.2;
  padding: 6px 12px;
  border-radius: 5px;
}
/* Circular swatch overlapping image bottom & body top */
.pd-style-card__swatch {
  position: absolute;
  bottom: -48px;
  left: 50%;
  transform: translateX(-50%);
  width: 96px;
  height: 96px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 2;
}
/* Children render at ~72×60 inside the 96px frame (matches Figma's
   imgGroup41 measurements). Same rule covers the inline-SVG fallback
   and the PNG <img> variant emitted by pd_home_render_style_swatch(). */
.pd-style-card__swatch svg,
.pd-style-card__swatch img,
.pd-style-card__swatch-img {
  display: block;
  width: 72px;
  height: auto;
  max-width: 72px;
  max-height: 72px;
  object-fit: contain;
}
.pd-style-card__body {
  padding: 60px 37px 30px;     /* extra top to clear the swatch */
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: center;
  /* Body grows to fill remaining card height and centres its
     contents vertically — the `flex-[1_0_0] justify-center`
     pattern that's present at every breakpoint in Figma. */
  flex: 1 1 auto;
  justify-content: center;
}
.pd-style-card__name {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
  margin: 0;
  color: #000;
}
.pd-style-card__desc {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.4;
  margin: 0;
  color: #000;
}

/* ── 3. EXPRESS DELIVERY BANNER ────────────────────────────── */
/* Single rounded navy card with a flex layout: copy column on the
   left, photo column on the right, badge absolutely-positioned in
   the bottom-right corner. The section bg is navy as a fallback so
   any sliver of background that shows behind/around the photo
   reads as navy, never white. The yellow "stamp" badge is anchored
   to the bottom-right corner per Figma node 631:31874. */
.pd-home-delivery {
  position: relative;
  /* v1.15.1 — Refactored from absolute-positioning to flex.
     Previously .pd-home-delivery__copy used `width: 496px` and
     .pd-home-delivery__media used `position: absolute; width: 55%`.
     On L this leaves a 44px gap between them; on M / S / XS the
     percentage-positioned media can OVERLAP the copy column once
     the responsive max-widths kick in. Flex makes the columns share
     the full width with no gap and no overlap at any breakpoint. */
  display: flex;
  align-items: stretch;
  /* min-height (not height) so the card can grow if content needs more
     room — long copy or wrapped CTAs were getting clipped by the old
     fixed `height: 409px`. Floor stays 409 to match the Figma when copy
     is short. The S/XS breakpoint drops to 363 with the same pattern. */
  min-height: 409px;
  background: var(--navy);    /* navy band per Figma node 631:31874 */
  color: #fff;
  border-radius: 10px;
  overflow: hidden;
}
.pd-home-delivery__copy {
  flex: 0 0 auto;
  width: 540px;
  max-width: 50%;             /* never let copy push media off-screen */
  padding: 33px 48px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  z-index: 2;
  /* Per-element margin spacing matches Figma's three nested gap
     values exactly (10 / 12 / 26) — a flat `gap` couldn't express
     the asymmetry. */
}
.pd-home-delivery__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--yellow);
  flex-shrink: 0;
  margin-bottom: 10px;          /* icon → title (Figma) */
}
.pd-home-delivery__icon img,
.pd-home-delivery__icon svg {
  width: 34px;
  height: 34px;
  display: block;
}
.pd-home-delivery__title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 52px;
  line-height: 1.2;
  margin: 0 0 12px;             /* title → body (Figma) */
  color: #fff;
}
.pd-home-delivery__body {
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.5;
  margin: 0 0 26px;             /* body → CTA (Figma) */
  color: var(--lavender);
}
.pd-home-delivery__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 55px;
  width: 236px;                 /* exact Figma width */
  padding: 12px;
  margin: 0;
  background: transparent;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 12px;
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.41;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.pd-home-delivery__cta:hover,
.pd-home-delivery__cta:focus-visible {
  background: #fff;
  color: var(--navy);
}
/* Photo column — fills remaining flex space. Image extends to all
   four corners of the section. */
.pd-home-delivery__media {
  flex: 1 1 auto;
  position: relative;
  background: var(--navy);     /* fallback so any sliver shows navy,
                                   never white from the body bg */
  overflow: hidden;
  min-width: 0;                /* lets the flex item shrink past its
                                   intrinsic content width */
}
/* Soft navy → transparent gradient on the photo's left edge so the
   navy copy column blends into the photo without a hard line. */
.pd-home-delivery__media::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 140px;
  background: linear-gradient(
    to right,
    var(--navy) 0%,
    rgba(8, 1, 83, 0) 100%
  );
  z-index: 1;
  pointer-events: none;
}
.pd-home-delivery__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}
/* Yellow "stamp" badge — anchored to the section's bottom-right
   corner. Negative offsets push the badge past the section bounds;
   the section's overflow: hidden then clips the protruding portion,
   producing the "stamp peeking out from the corner" effect. The
   -18deg rotation extends the visual a few pixels further still. */
.pd-home-delivery__badge {
  position: absolute;
  right: -25px;
  bottom: -45px;
  width: 173px;
  height: 173px;
  border-radius: 50%;
  background: var(--yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-18deg);
  z-index: 3;
  pointer-events: none;
}
.pd-home-delivery__badge img {
  width: 107px;
  height: 107px;
  object-fit: contain;
  display: block;
}

/* ── 4. SHOP BY ROOM ──────────────────────────────────────── */
.pd-home-rooms__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.pd-room-card {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}
.pd-room-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.pd-room-card__link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.pd-room-card__image {
  aspect-ratio: 1 / 1;
  background: #d9d9d9;
  overflow: hidden;
}
.pd-room-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}
.pd-room-card:hover .pd-room-card__image img {
  transform: scale(1.03);
}
.pd-room-card__name {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
  text-align: center;
  margin: 0;
  padding: 30px 16px;
  color: #000;
}

/* ── 5. CUSTOMER REVIEWS — curated Trustpilot carousel ────────
   Three bordered cards (TP stars + static date, bold title, body,
   reviewer), circular prev/next arrows either side, and a centred
   "Rated X out of 5…" line beneath. Cards scroll-snap; arrows page
   by one card (js/main.js). */
.pd-home-reviews {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.pd-home-reviews__carousel {
  display: flex;
  align-items: center;
  gap: 26px;
}
.pd-home-reviews__arrow {
  flex: 0 0 33px;
  width: 33px;
  height: 33px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--rule, #dbdbdb);
  border-radius: 50%;
  color: #414141;
  cursor: pointer;
  transition: background .15s ease;
}
.pd-home-reviews__arrow:hover { background: #f3f3f3; }
.pd-home-reviews__track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 16px;
  flex: 1 1 auto;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.pd-home-reviews__track::-webkit-scrollbar { display: none; }
.pd-review-card {
  flex: 0 0 calc( ( 100% - 32px ) / 3 );
  scroll-snap-align: start;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 18px;
  background: #fcfcfd;
  border: 1px solid var(--rule, #ececec);
  border-radius: 10px;
}
.pd-review-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.pd-review-card__logo { height: 24px; width: auto; }
.pd-review-card__when {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  color: #767676; /* v1.45.56: reviewer date — was 2.96:1 */
}
.pd-review-card__title {
  margin: 0 0 12px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: #000;
}
.pd-review-card__body {
  margin: 0 0 16px;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: #1c1c1c;
  flex: 1 1 auto;
}
.pd-review-card__name {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  color: #767676; /* v1.45.56: reviewer name — was 2.96:1 */
}
.pd-home-reviews__rating {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  color: #1c1c1c;
}
.pd-home-reviews__rating a { color: inherit; }
.pd-home-reviews__tp-logo { height: 25px; width: auto; }

/* Section subtitle under a section title (styles / rooms / inspired). */
.pd-home-section__intro {
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1 1 auto;
}
/* When the intro stands alone (rooms / inspired — no __head wrapper),
   it carries the same 32px gap to the grid as a bare title would. Inside
   .pd-home-section__head, the head's own margin-bottom applies instead. */
.pd-home-section > .pd-home-section__intro,
section > .pd-home-section__intro {
  margin-bottom: 32px;
}
.pd-home-section__head .pd-home-section__intro { margin-bottom: 0; }
/* The head centres a lone title against "View all"; with a two-line
   intro, top-align and nudge the link onto the title's line. */
.pd-home-section__head { align-items: flex-start; }
.pd-home-section__head .pd-home-section__view-all { margin-top: 8px; }
.pd-home-section__sub {
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  line-height: 1.4;
  color: #1c1c1c;
  max-width: 845px;
}
.pd-home-section__sub a { color: var(--c-navy, #080153); }

/* ── 6. FEATURED IN ────────────────────────────────────────── */
.pd-home-featured {
  background: var(--lavender);
  border-radius: 10px;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 42px;
  flex-wrap: wrap;
}
.pd-home-featured__label {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 27px;
  line-height: 1.2;
  color: #000;
}
/* List of publication logos. Each rendered at its native aspect ratio
   per Figma node 631:31996 (Grand Designs 113×70, GoodHomes 220×39).
   Using a list rather than a single image strip means we can swap or
   add publications without re-cutting an asset. */
.pd-home-featured__logos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 51px;
}
.pd-home-featured__logo {
  display: flex;
  align-items: center;
  margin: 0;
}
.pd-home-featured__logo img {
  display: block;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}
.pd-home-featured__logo--grand img { width: 113px; height: 70px; }
.pd-home-featured__logo--good  img { width: 220px; height: 39px; }

/* ── 7. MORE WAYS TO TRANSFORM YOUR SPACE ─────────────────── */
.pd-home-more__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 38px;
}
.pd-more-card {
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}
.pd-more-card__link {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 34px;
  height: 422px;
  padding: 18px 31px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #d9d9d9;
  position: relative;
  text-decoration: none;
  border-radius: 10px;
  overflow: hidden;
}
/* Dark gradient overlay so the white text reads cleanly */
.pd-more-card__link::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 68%,
    rgba(0, 0, 0, 0.7) 95%
  );
  pointer-events: none;
}
.pd-more-card__label {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 27px;
  line-height: 1.2;
  color: #fff;
}
.pd-more-card__arrow {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  background: #fff;
  border-radius: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}
.pd-more-card__link:hover .pd-more-card__arrow {
  transform: translateX(4px);
}

/* ── 8. BEST SELLERS ──────────────────────────────────────── */
/* Reuses .pd-card from the archive — no card styling needed.
   We just provide the grid container. */
.pd-home-bestsellers__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

/* ── 9. BE INSPIRED — Instagram mosaic ────────────────────── */
.pd-home-inspired__handle {
  color: var(--navy);
  margin-left: 4px;
}
/* Layout: 1 large square (left) + 3×2 grid of small squares (right).
   Implemented via CSS grid — left tile spans 2 rows, others one each. */
.pd-home-inspired__grid {
  display: grid;
  grid-template-columns: minmax(0, 488fr) repeat(3, minmax(0, 226fr));
  gap: 32px 20px;
  align-items: start;
}
.pd-inspired-tile {
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  background: #d9d9d9;
  aspect-ratio: 1 / 1;
}
.pd-inspired-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pd-inspired-tile--large {
  grid-row: 1 / span 2;
  grid-column: 1;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
}

/* ── M responsive (≤1023px) ─────────────────────────────────
   Per Figma nodes 631:33156 (hero) and 631:33167 (content).
   Notable M findings vs L:
     • Hero copy left padding 112→56px; typography unchanged
     • Page wrap padding 80/64 → 32/20px; section gap 64→48px
     • Style card image 419→272px; name 18→16, desc 15→12;
       swatch repositions from -48 → -12 (image is shorter so
       the swatch sits much closer to the bottom edge); body
       padding 60/37/30 → 30/18 uniform
     • Delivery banner: title 52→39, body 18→16, copy column
       540→394px (NOT 490 — Figma is exact 394)
     • Room cards: fixed 197×256, image stays aspect 1/1
       (image area = 197×197, name strip = 59px)
     • Best sellers: cards 269px wide, gap 22→18, flex-wrap
     • More ways: gap 38→20px, card height/padding unchanged
     • Inspired mosaic: large 488→391, small 226→182 with
       gaps 32/20 → 26/35; small grid 3-col → 2-col, last 2
       small tiles hidden (showing 4 of 6)
     • Featured-in pill, Loved-by-customers, all section titles:
       unchanged from L
*/
@media (max-width: 1023px) {

  /* ── HERO ────────────────────────────────────────────────── */
  /* Copy column shifts left padding 112→56. Photo column ratio
     unchanged via min(45%, 700px). Typography unchanged. */
  .pd-home-hero__inner {
    padding-left: 56px;
    padding-right: min(45%, 700px);
  }

  /* ── PAGE WRAP ───────────────────────────────────────────── */
  .pd-home__wrap {
    padding: 32px 20px;
    gap: 48px;
  }

  /* ── SHOP BY STYLE (Figma 631:33172) ─────────────────────── */
  /* 4-up grid, gap 12, image 272 tall, swatch sits 12px below
     image bottom (Figma top:188 from card → top of image at
     188 within 272 image = swatch ends at 284 = 12 below). */
  .pd-home-styles__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }
  .pd-style-card__image {
    height: 272px;
  }
  .pd-style-card__swatch {
    bottom: -12px;             /* was -48 (L value), per Figma */
  }
  .pd-style-card__body {
    padding: 30px 18px;        /* was 60/18/30, now uniform 30 */
    text-align: center;        /* explicit (also in L base) */
  }
  .pd-style-card__name {
    font-size: 16px;           /* 18→16 */
  }
  .pd-style-card__desc {
    font-size: 12px;           /* 15→12 */
  }
  /* Most-popular badge typography unchanged from L (12px / 0.04em). */

  /* ── EXPRESS DELIVERY (Figma 631:33245) ──────────────────── */
  /* Copy column narrows from 540 → 394 per Figma exact spec.
     Photo column auto-widens (flex: 1 1 auto). Stamp position
     unchanged. */
  .pd-home-delivery__copy {
    /* Width = 48 (left padding) + 394 (content per Figma) + 48
       (right padding) = 490. With our flex layout, the photo
       column auto-fills the remainder. Figma shows the photo
       starting at left-[464] which means it overlaps the right
       padding by 26px, but visually that just means the photo's
       gradient fade begins inside the copy column's right pad —
       not visible since both surfaces are navy. */
    width: 490px;
    max-width: 50%;
  }
  .pd-home-delivery__title {
    font-size: 39px;           /* 52→39 */
  }
  .pd-home-delivery__body {
    font-size: 16px;           /* 18→16 */
  }

  /* ── SHOP BY ROOM (Figma 631:33265) ──────────────────────── */
  /* L's 4-up grid → flex-wrap with fixed-size 197×256 cards.
     Image keeps aspect-ratio: 1/1 from L base (197×197),
     name strip auto-fills the remaining 59px. */
  .pd-home-rooms__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    grid-template-columns: none;
  }
  .pd-room-card {
    width: 197px;
    height: 256px;
    flex: 0 0 auto;
    /* For the fixed height + aspect-ratio image to play nicely
       we need the card to be a flex column so the image takes
       its aspect-defined size and the name fills the remainder
       without collapsing or overflowing. */
    display: flex;
    flex-direction: column;
  }
  .pd-room-card__link {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }
  .pd-room-card__image {
    flex: 0 0 auto;            /* image keeps its aspect-ratio:1/1 */
  }
  .pd-room-card__name {
    flex: 1 1 auto;
    min-height: 0;
    font-size: 16px;
    padding: 18px;
    /* Centre-align the single text line vertically in the
       remaining ~59px strip below the image. */
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ── FEATURED IN ──────────────────────────────────────────
     Unchanged from L (lavender pill, 27px label, 51px logo gap).
     ── LOVED BY OUR CUSTOMERS ───────────────────────────────
     Our placeholder block needs no responsive override. ───── */

  /* ── MORE WAYS (Figma 631:33372) ─────────────────────────── */
  /* Two cards in a row, gap drops 38→20. Card height (422px),
     padding (18/31) and typography unchanged from L base. */
  .pd-home-more__grid {
    gap: 20px;
  }

  /* ── BEST SELLERS (Figma 631:33389) ──────────────────────── */
  /* L 4-up grid → flex-wrap with 269px-wide cards. */
  .pd-home-bestsellers__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    grid-template-columns: none;
  }
  .pd-home-bestsellers__grid > .product,
  .pd-home-bestsellers__grid > .pd-card,
  .pd-home-bestsellers__grid > li {
    width: 269px;
    flex: 0 0 auto;
  }

  /* ── BE INSPIRED (Figma 631:33400) ───────────────────────── */
  /* L's 1+6 layout → 1+4 (last two small tiles hidden).
     Columns are proportional: large 391fr, smalls 182fr each.
     Aspect-ratio: 1/1 from base keeps every tile square as the
     wrap content scales across the M range. Large spans 2 rows
     so its height = 2 × small_height + row_gap, which matches
     the Figma's visual square (large width = 2 × small + gap). */
  .pd-home-inspired__grid {
    grid-template-columns: 391fr 182fr 182fr;
    grid-template-rows: repeat(2, 1fr);
    gap: 26px 35px;
    align-items: start;
  }
  .pd-inspired-tile--large {
    grid-row: 1 / span 2;
    grid-column: 1;
    border-radius: 10px;
  }
  .pd-home-inspired__grid > .pd-inspired-tile:not(.pd-inspired-tile--large) {
    border-radius: 8px;
  }
  .pd-home-inspired__grid > .pd-inspired-tile:nth-child(2) { grid-row: 1; grid-column: 2; }
  .pd-home-inspired__grid > .pd-inspired-tile:nth-child(3) { grid-row: 1; grid-column: 3; }
  .pd-home-inspired__grid > .pd-inspired-tile:nth-child(4) { grid-row: 2; grid-column: 2; }
  .pd-home-inspired__grid > .pd-inspired-tile:nth-child(5) { grid-row: 2; grid-column: 3; }
  .pd-home-inspired__grid > .pd-inspired-tile:nth-child(6),
  .pd-home-inspired__grid > .pd-inspired-tile:nth-child(7) {
    display: none;
  }
}
/* ── S + XS responsive (≤779px) ─────────────────────────────
   Combined breakpoint. Per the design notes the L (and M)
   layout works at large widths; below M we collapse straight
   to a 2-up mobile-style layout that scales fluidly across
   the entire ≤779 range.

   Implementation notes:
     • Cards use fluid `calc(50% - <half-gap>)` widths so two
       sit side-by-side and fill the row at any viewport in
       this range — no fixed pixel widths.
     • Hero typography drops, hero image is hidden (single
       column on the sage band).
     • Section titles 27→23. Most-popular badge 12→10.
     • Express Delivery: copy fills card; photo column hidden
       since at narrow widths the photo position from Figma
       falls off-screen anyway.
     • Featured-in: pill stacks (label above logos), logos
       themselves stay side-by-side.
     • More ways cards stack vertically (1-col).
     • Best sellers: 2-up fluid wrap, tighter padding & CTA.
     • Inspired mosaic: large rectangle (179×207 ratio) on
       left + 2×3 grid of 6 small squares on right. Large
       uses `align-self: stretch` so it always matches the
       3-stack height regardless of viewport — without that
       the aspect-ratio math only matched at one specific
       viewport width.
*/
@media (max-width: 779px) {

  /* ── HERO ─────────────────────────────────────────────── */
  /* Single column on the sage-green band, no bleed image. */
  .pd-home-hero__inner {
    padding: 42px 24px;
    min-height: 0;
    gap: 13px;
  }
  .pd-home-hero__media {
    display: none;             /* hidden — flat sage band */
  }
  .pd-home-hero__trustpilot img {
    height: 22px;              /* 34→22 */
  }
  .pd-home-hero__title {
    font-size: 33px;           /* 52→33 */
  }
  .pd-home-hero__lede {
    font-size: 16px;           /* 23→16 */
  }
  .pd-home-hero__cta {
    width: 181px;              /* 227→181 */
    height: 44px;
    font-size: 16px;           /* 22→16 */
  }

  /* ── PAGE WRAP ────────────────────────────────────────── */
  /* Padding/gap unchanged from M (32/20px, gap 48). */

  /* ── REVIEWS CAROUSEL ─────────────────────────────────── */
  /* One card per view; arrows hidden — swipe instead. */
  .pd-home-reviews__arrow { display: none; }
  .pd-review-card { flex: 0 0 100%; }
  .pd-home-reviews__rating { flex-wrap: wrap; text-align: center; }

  /* ── SECTION HEADINGS ────────────────────────────────── */
  /* Most section titles drop to 23px. */
  .pd-home-section__title {
    font-size: 23px;
  }
  .pd-home-section__head { margin-bottom: 20px; }
  .pd-home-section > .pd-home-section__title { margin-bottom: 20px; }
  .pd-home-section > .pd-home-section__intro,
  section > .pd-home-section__intro { margin-bottom: 20px; }

  /* ── SHOP BY STYLE ────────────────────────────────────
     4-up grid → 2-up flex-wrap. Cards fluid at calc(50% - 6)
     so each card takes half the available row width with a
     12px gap between them. Image 272→212. Body padding
     uniform 24/12 (no extra top — swatch sits at bottom: -12
     same as M, image 212 → swatch at top: 128 → ends at 224
     → 12 past image). Description 12→10, Most-popular badge
     12→10. */
  .pd-home-styles__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    grid-template-columns: none;
  }
  .pd-style-card {
    width: calc(50% - 6px);    /* fluid: 2-up with 12px gap */
    flex: 0 0 auto;
  }
  .pd-style-card__image {
    height: 212px;             /* 272→212 */
  }
  /* Swatch position inherited from M base (bottom: -12). */
  .pd-style-card__body {
    padding: 24px 12px;        /* uniform, no extra top */
  }
  .pd-style-card__name {
    font-size: 16px;
  }
  .pd-style-card__desc {
    font-size: 10px;           /* 12→10 */
  }
  .pd-style-card__badge {
    font-size: 10px;           /* 12→10 */
    letter-spacing: 0.04em;
  }

  /* ── EXPRESS DELIVERY ─────────────────────────────────
     At narrow widths:
     - Photo column is hidden (would fall off-screen per Figma).
     - Yellow stamp badge is hidden (the design without the truck
       icon — the stamp is L/M-only ornamentation).
     - Card height drops the fixed 409/363 from L/M and becomes
       fluid (auto), sized to whatever the wrapped title + body
       + button content needs. With copy at 100% width and bigger
       wrapping at narrow viewports, fixed heights forced text
       to overflow or get clipped. Auto height + min-height as
       a sensible floor lets the card grow naturally.
     - Title 39→33, body 16→14, CTA 236→173 / 22→16. */
  .pd-home-delivery {
    height: auto;
    min-height: 363px;          /* floor: matches Figma when copy is short */
  }
  .pd-home-delivery__copy {
    width: 100%;
    max-width: 100%;
    padding: 33px 42px;
  }
  .pd-home-delivery__media {
    display: none;
  }
  .pd-home-delivery__badge {
    display: none;              /* truck stamp hidden at this breakpoint */
  }
  .pd-home-delivery__title {
    font-size: 33px;
  }
  .pd-home-delivery__body {
    font-size: 14px;
  }
  .pd-home-delivery__cta {
    width: 173px;
    height: 44px;
    font-size: 16px;
    padding: 12px;
  }

  /* ── SHOP BY ROOM ─────────────────────────────────────
     Cards fluid at calc(50% - 9px) (18px gap, half each).
     Image keeps aspect-ratio: 1/1 from M base (square),
     name strip auto-sizes via flex from M base. Body
     padding 18→12. */
  .pd-room-card {
    width: calc(50% - 9px);    /* fluid: 2-up with 18px gap */
    height: auto;              /* let aspect-ratio image + name flex */
    flex: 0 0 auto;
  }
  .pd-room-card__name {
    padding: 12px;             /* 18→12 */
  }

  /* ── LOVED BY OUR CUSTOMERS ───────────────────────────
     Single placeholder block, no per-breakpoint changes. */

  /* ── FEATURED IN ──────────────────────────────────────
     Pill stacks: label above logos. Logos themselves stay
     side-by-side (89 + 51 + 175 = 315px fits comfortably).
     Label 27→23. */
  .pd-home-featured {
    flex-direction: column;
    gap: 12px;
    padding: 24px 16px;
  }
  .pd-home-featured__label {
    font-size: 23px;
  }
  .pd-home-featured__logo--grand img { width: 89px;  height: 55px; }
  .pd-home-featured__logo--good  img { width: 175px; height: 31px; }

  /* ── MORE WAYS ────────────────────────────────────────
     Cards stack vertically — full-width, 342px tall, 20px gap.
     Inner title stays 27 from L base (Figma still shows 27). */
  .pd-home-more__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .pd-more-card__link {
    height: 342px;             /* 422→342 */
  }

  /* ── BEST SELLERS ─────────────────────────────────────
     2-up flex-wrap, fluid calc(50% - 7) (14px col gap). Row
     gap 22, col gap 14. Border-radius 10→6. Card body
     padding 18×12, CTA font 16. */
  .pd-home-bestsellers__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 22px 14px;            /* row 22, col 14 */
    grid-template-columns: none;
  }
  .pd-home-bestsellers__grid > .product,
  .pd-home-bestsellers__grid > .pd-card,
  .pd-home-bestsellers__grid > li {
    width: calc(50% - 7px);    /* fluid: 2-up with 14px col gap */
    flex: 0 0 auto;
    max-width: calc(50% - 7px);
    border-radius: 6px;
  }
  /* Card body uses the shared .pd-card primitive. The archive
     ≤560 breakpoint sets it to 14×12; Figma wants 18×12 inside
     best-sellers cards. CTA also bumps from archive's 14 to 16. */
  .pd-home-bestsellers__grid .pd-card__body,
  .pd-home-bestsellers__grid .pd-card__inner {
    padding: 18px 12px;
  }
  .pd-home-bestsellers__grid .pd-card__cta {
    font-size: 16px;
    padding: 12px;
  }

  /* ── BE INSPIRED ──────────────────────────────────────
     Large rectangle (179×207 ratio) on left + 2×3 grid of
     6 small squares on right. Outer flex columns 179fr 64fr
     64fr scales fluidly with viewport.

     The HEIGHT-MATCH problem: the 3-row stack of small squares
     and the large tile both grow with viewport, but at
     different rates. Smalls are sized via aspect-ratio: 1/1
     against their column width — so stack height = 3×col + 2×7.
     Large via aspect-ratio: 179/207 against ITS column width —
     so its height = (179/207) × col_factor × 179. The two rates
     only match at one specific viewport (where the columns are
     at exactly the Figma's 179/64/64 nominal widths).

     Fix: drop the aspect-ratio on the large tile and let it
     stretch to match the 3-row stack via `align-self: stretch`
     (default for grid items, but the inherited base sets
     `align-items: start` on the grid container — so we need to
     set `align-items: stretch` on the grid itself OR override
     `align-self` on the large tile). Going with the latter so
     we don't disturb how smalls behave. */
  .pd-home-inspired__grid {
    grid-template-columns: 179fr 64fr 64fr;
    grid-template-rows: repeat(3, auto);
    gap: 7px 16px;
    align-items: start;        /* explicit; smalls size to aspect-ratio */
  }
  /* Large tile: span all 3 rows, stretch to match. Override
     the base `aspect-ratio: 1/1` since the tile's grid area
     defines its size now, not its ratio. */
  .pd-inspired-tile--large {
    grid-row: 1 / span 3;
    grid-column: 1;
    aspect-ratio: auto;        /* override base 1/1 */
    align-self: stretch;       /* match 3-row stack height */
    border-radius: 4px;
  }
  /* Smalls keep aspect-ratio 1/1 from base — each row sizes
     to its small tile's natural height. */
  .pd-home-inspired__grid > .pd-inspired-tile:not(.pd-inspired-tile--large) {
    border-radius: 3px;
  }
  /* Place the 6 smalls into a 2-col × 3-row layout. All 6
     tiles visible at this breakpoint (M-block hides #6 and #7;
     we re-show here). */
  .pd-home-inspired__grid > .pd-inspired-tile:nth-child(2) { grid-row: 1; grid-column: 2; }
  .pd-home-inspired__grid > .pd-inspired-tile:nth-child(3) { grid-row: 1; grid-column: 3; }
  .pd-home-inspired__grid > .pd-inspired-tile:nth-child(4) { grid-row: 2; grid-column: 2; }
  .pd-home-inspired__grid > .pd-inspired-tile:nth-child(5) { grid-row: 2; grid-column: 3; }
  .pd-home-inspired__grid > .pd-inspired-tile:nth-child(6) {
    display: block;
    grid-row: 3;
    grid-column: 2;
  }
  .pd-home-inspired__grid > .pd-inspired-tile:nth-child(7) {
    display: block;
    grid-row: 3;
    grid-column: 3;
  }
}