/* Panelling Direct — pages bundle (v1.45.54).
   Page-specific layer; loads only on the contexts that need it.
   Source line ranges (v1.45.53): 5773-7198, 7290-7366, 10533-10827, 11432-12085, 12198-12492, 12679-12718

   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 5773–7198 ── */
/* ══════════════════════════════════════════════════════════════
   v1.5.0 — ABOUT US PAGE
   Figma: node 504:13921 (large breakpoint)
   Loaded by page-template-about.php (Custom Page Template).

   Sections:
     1. .pd-about-hero          — navy band, intro headline + image
     2. .pd-about-story         — polaroid image cluster + body copy
     3. .pd-about-team          — 3-col card grid
     4. .pd-about-sponsorship   — navy band, two rotated photos
     5. .pd-about-contact       — circular portrait + address card

   NOTE: only the L breakpoint is implemented at this stage. The M/S/XS
   designs will be wired up when those frames are exported.
══════════════════════════════════════════════════════════════ */

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

/* ── 1. HERO ────────────────────────────────────────────────── */
/* Pattern matches the category archive title band: section is
   full-bleed; inner is row-max-capped with reserved right-side
   space; image is absolute-positioned to right:0 so it sits flush
   against the viewport edge on any width. Gradient overlay fades
   the navy bg into the image on the left edge. */
.pd-about-hero {
  background: var(--navy);
  color: #fff;
  position: relative;     /* positioning context for the absolute image */
  overflow: hidden;       /* contain any image bleed cleanly */
}
.pd-about-hero__inner {
  max-width: var(--row-max);
  margin: 0 auto;
  /* Reserve space on the right for the hero image. min(45%, 700px)
     keeps the image roughly proportional to design (≈45% of frame)
     while capping on ultra-wide viewports. */
  padding: 88px min(45%, 700px) 88px calc(var(--row-pad) + 34px);
  position: relative;
  z-index: 2;
  min-height: 523px;
  box-sizing: border-box;
}
.pd-about-hero__copy {
  max-width: 551px;
  display: flex;
  flex-direction: column;
  gap: 19px;
}
.pd-about-hero__title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 52px;
  line-height: 1.2;
  margin: 0;
  max-width: 512px;
  color: #fff;
}
.pd-about-hero__lede {
  font-size: 23px;
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
  color: #fff;
}
/* Hero image — absolute to viewport's right edge, with gradient
   fade from navy → transparent across the left portion. */
.pd-about-hero__media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(45%, 700px);
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}
.pd-about-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pd-about-hero__fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    var(--navy) 0%,
    rgba(8, 1, 83, 0) 50%
  );
  pointer-events: none;
  z-index: 1;
}

/* ── 2. OUR STORY ───────────────────────────────────────────── */
.pd-about-story {
  background: #fff;
  /* Visible spacer between hero bottom and the body of the story
     section. The cluster (positioned by the rules below) overlaps
     into the hero's bottom; without this padding the COPY would
     also lift up and crowd against the hero. Padding is on the
     section (white) so the cluster's negative margin-top lifts it
     above the white area into the navy hero. */
  padding-top: 82px;
}
.pd-about-story__inner {
  max-width: var(--row-max);
  margin: 0 auto;
  /* No top padding here — the SECTION already has padding-top: 82
     to clear the hero, and the cluster + copy each manage their own
     vertical offset (cluster lifts, copy pads down). */
  padding: 0 var(--row-pad) 61px;
  display: grid;
  grid-template-columns: 658px minmax(0, 1fr);
  gap: 52px;
  align-items: start;            /* was center; Figma aligns from top */
}
.pd-about-story__cluster {
  position: relative;
  width: 658px;
  height: 760px;
  /* Pulled UP into the hero so the first photo (top: 0 inside the
     cluster) sits inside the navy band — matches Figma node 562:23076
     where the story section uses `mb-[-82px]` to overlap. The
     cluster's photos have white borders that read cleanly against
     navy, and the negative margin only lifts the cluster (not the
     copy or the section's white background).

     The lift = (margin-top × -1) + (section padding-top). Net
     overlap into the hero = lift - section padding. With
     `padding-top: 82px` on the section + `margin-top: -120px`
     here, the cluster overlaps the hero by 38px on L. The M
     override drops to -100px (overlap 18px) since the column
     widths get tighter and a softer overlap reads better.  */
  margin-top: -120px;
}
.pd-about-story__photo {
  position: absolute;
  margin: 0;
  border: 5px solid #fff;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 4px 9.6px 2px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}
.pd-about-story__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pd-about-story__photo--1 { top:   0;     left:   0;   width: 393px; height: 334px; }
.pd-about-story__photo--2 { top: 172px;   left: 231px; width: 427px; height: 323px; }
.pd-about-story__photo--3 { top: 416px;   left:  71px; width: 429px; height: 344px; }

.pd-about-story__copy {
  /* Copy starts well below the cluster's top so it visually aligns
     with the second image — per Figma the copy column uses
     `pt-[117px]` from the inner's top. */
  padding-top: 117px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 474px;
}
.pd-about-story__title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 33px;
  line-height: 1.5;
  margin: 0;
  color: #000;
}
.pd-about-story__body p {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  margin: 0 0 18px;
}
.pd-about-story__body p:last-child { margin-bottom: 0; }
.pd-about-story__body strong { font-weight: 700; }

/* ── 3. MEET THE TEAM ───────────────────────────────────────── */
.pd-about-team {
  background: #fff;
  scroll-margin-top: 24px;
}
.pd-about-team__inner {
  max-width: var(--row-max);
  margin: 0 auto;
  padding: 51px var(--row-pad) 60px;
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.pd-about-team__head {
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.pd-about-team__title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 33px;
  line-height: 1.5;
  margin: 0;
  color: #000;
}
.pd-about-team__subtitle {
  font-size: 18px;
  line-height: 1.5;
  margin: 0;
  max-width: 519px;
  color: #000;
}
.pd-about-team__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

/* Card */
.pd-team-card {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.pd-team-card__image {
  height: 295px;
  background: #f5f5f5;
}
.pd-team-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pd-team-card__body {
  padding: 30px 37px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
}
.pd-team-card__name {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
  color: #000;
}
.pd-team-card__role {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
  margin: 0;
  color: #000;
}

/* ── 4. COMMUNITY SPONSORSHIP ───────────────────────────────── */
.pd-about-sponsorship {
  background: var(--navy);
  color: #fff;
  overflow: hidden;
  scroll-margin-top: 24px;
}
.pd-about-sponsorship__inner {
  max-width: var(--row-max);
  margin: 0 auto;
  padding: 44px var(--row-pad) 106px;
  display: flex;
  flex-direction: column;
  gap: 46px;
  align-items: center;
}
.pd-about-sponsorship__head {
  display: flex;
  flex-direction: column;
  gap: 11px;
  width: 100%;
}
.pd-about-sponsorship__title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 33px;
  line-height: 1.5;
  margin: 0;
  color: #fff;
}
.pd-about-sponsorship__subtitle {
  font-size: 18px;
  line-height: 1.5;
  margin: 0;
  max-width: 747px;
  color: #fff;
}
.pd-about-sponsorship__cluster {
  position: relative;
  width: 100%;
  max-width: 1168px;
  height: 447px;
}
.pd-about-sponsorship__photo {
  position: absolute;
  margin: 0;
  width: 578px;
  height: 405px;
  border: 4px solid #fff;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.pd-about-sponsorship__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pd-about-sponsorship__photo--1 {
  top: 21px;
  left: 14px;
  transform: rotate(-4.3deg);
}
.pd-about-sponsorship__photo--2 {
  top: 30px;
  left: 578px;
  transform: rotate(3.36deg);
}

/* ── 5. GETTING IN CONTACT ──────────────────────────────────── */
.pd-about-contact {
  background: #fff;
}
.pd-about-contact__inner {
  max-width: var(--row-max);
  margin: 0 auto;
  padding: 52px var(--row-pad) 102px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.pd-about-contact__title {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 32px;
  line-height: 1.2;
  margin: 0;
  color: #000;
}
.pd-about-contact__row {
  display: grid;
  grid-template-columns: minmax(0, 622fr) minmax(0, 576fr);
  gap: 32px;
  align-items: center;
}

/* Left: portrait + lede + channels */
.pd-about-contact__intro {
  display: flex;
  gap: 18px;
  align-items: center;
}
.pd-about-contact__portrait {
  flex: 0 0 176px;
  width: 176px;
  height: 176px;
  border-radius: 50%;
  overflow: hidden;
  background: #f5f5f5;
}
.pd-about-contact__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pd-about-contact__intro-text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}
.pd-about-contact__lede {
  font-size: 18px;
  line-height: 1.5;
  margin: 0;
  color: #000;
}
.pd-about-contact__channels {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 16px;
  row-gap: 8px;
}
.pd-about-contact__channel a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 600;
  color: #000;
  text-decoration: none;
  line-height: 1.2;
}
.pd-about-contact__channel a:hover { text-decoration: underline; }
/* Source SVGs use stroke="white", so they're invisible on the white
   contact-section bg. brightness(0) forces all non-transparent pixels
   to black while preserving the stroke shape and transparency. */
.pd-about-contact__channel-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  filter: brightness(0);
}
/* Vertical divider between adjacent channels — replaces the old
   `|` character which depended on font metrics and looked uneven. */
.pd-about-contact__channel + .pd-about-contact__channel {
  padding-left: 16px;
  border-left: 1px solid rgba(0, 0, 0, 0.25);
}

/* Right: address + hours card with map */
.pd-about-contact__card {
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid #DFDFDF;
  border-radius: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  padding: 11px;
  align-items: stretch;
  min-height: 243px;
  overflow: hidden;
}
.pd-about-contact__card-info {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 11px 18px;
  align-self: center;
}
.pd-about-contact__card-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 18px;
  line-height: 1.2;
  color: #010101;
}
.pd-about-contact__card-row--address { align-items: flex-start; }
.pd-about-contact__card-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
  filter: brightness(0);   /* white-stroked SVGs → black on white card */
}
.pd-about-contact__address {
  font-style: normal;
  margin: 0;
  line-height: 1.2;
}
.pd-about-contact__card-map {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  align-self: stretch;
  min-height: 220px;
}
.pd-about-contact__card-map img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── 6. ELEVATE CTA (Trustpilot + headline + Shop button) ───── */
/* Same pattern as the hero: solid sage-green section with the
   decorative image absolute-positioned to the right, contained
   vertically by the section, with a sage-green → transparent
   gradient fade across its left edge. Image hidden on XS — mobile
   shows the solid colour only. */
.pd-about-elevate {
  background-color: #ACB29C;
  color: #000;
  position: relative;
  overflow: hidden;
}
.pd-about-elevate__inner {
  max-width: var(--row-max);
  margin: 0 auto;
  /* Reserve right-side space for the image, mirroring the hero. */
  padding: 77px min(45%, 700px) 77px var(--row-pad);
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-start;
  box-sizing: border-box;
}
.pd-about-elevate__media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(45%, 700px);
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}
.pd-about-elevate__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pd-about-elevate__fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    #ACB29C 0%,
    rgba(172, 178, 156, 0) 50%
  );
  pointer-events: none;
  z-index: 1;
}
.pd-about-elevate__trustpilot img {
  display: block;
  height: 34px;
  width: auto;
}
.pd-about-elevate__copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 800px;          /* keeps headline readable on wide viewports */
}
.pd-about-elevate__title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 52px;
  line-height: 1.2;
  margin: 0;
  color: #000;
}
.pd-about-elevate__sub {
  font-size: 23px;
  line-height: 1.5;
  margin: 0;
  color: #000;
}
.pd-about-elevate__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-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-decoration: none;
  text-align: center;
  border-radius: 12px;
  transition: background-color 0.15s ease;
}
.pd-about-elevate__cta:hover,
.pd-about-elevate__cta:focus-visible {
  background: var(--navy-mid);
  color: #fff;
}


/* ══════════════════════════════════════════════════════════════
   ABOUT US — M breakpoint (≤1023px)
   The L→S design jumps straight to single-column at ≤779, but the
   M range (780–1023px) keeps the L two-column grid in a tighter
   space. Soften the cluster's overlap into the hero — a smaller
   lift reads better when columns are narrower.
══════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  .pd-about-story__cluster {
    margin-top: -100px;
  }
}


/* ══════════════════════════════════════════════════════════════
   v1.5.0 — ABOUT US, RESPONSIVE (XS)
   Figma: node 504:14289 (XS, 440px wide)
   Single breakpoint: ≤779px collapses to the XS layout.
   No M/S design has been provided yet, so 780–999px viewports
   render the L layout but with the flexible columns set above.
══════════════════════════════════════════════════════════════ */
@media (max-width: 779px) {

  /* ── 1. HERO ────────────────────────────────────────────── */
  .pd-about-hero__inner {
    grid-template-columns: 1fr;       /* single column */
    gap: 0;
    padding: 0 var(--row-pad);
    min-height: 0;
  }
  .pd-about-hero__copy {
    padding: 48px 0 113px 0;          /* matches Figma XS */
    gap: 19px;
  }
  .pd-about-hero__title {
    font-size: 39px;                  /* down from 52px */
    max-width: none;
  }
  .pd-about-hero__lede {
    font-size: 23px;
    max-width: none;
  }
  .pd-about-hero__media {              /* image hidden on XS */
    display: none;
  }

  /* ── 2. OUR STORY ───────────────────────────────────────── */
  .pd-about-story {
    /* L uses padding-top: 82 to clear the hero overlap; at small
       screens the cluster doesn't overlap (single-column layout),
       so reset to 0. */
    padding-top: 0;
  }
  .pd-about-story__inner {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 40px var(--row-pad) 40px;
  }
  /* Cluster scales down — figures repositioned per Figma XS */
  .pd-about-story__cluster {
    width: 100%;
    max-width: 400px;
    height: 462px;
    margin: 0 auto;
  }
  .pd-about-story__photo--1 {
    top:   0;
    left:  0;
    width: 239px; height: 203px;
  }
  .pd-about-story__photo--2 {
    top:   105px;
    left:  140px;
    width: 260px; height: 196px;
  }
  .pd-about-story__photo--3 {
    top:   253px;
    left:   43px;
    width: 261px; height: 209px;
  }
  .pd-about-story__copy {
    padding-top: 0;
    max-width: none;
  }
  .pd-about-story__title {
    font-size: 33px;
  }

  /* ── 3. MEET THE TEAM ───────────────────────────────────── */
  .pd-about-team__inner {
    padding: 51px var(--row-pad) 51px;
    gap: 36px;
  }
  .pd-about-team__title { font-size: 33px; }
  .pd-about-team__subtitle { max-width: none; }

  .pd-about-team__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));   /* 2-col on XS */
    gap: 10px;
  }
  .pd-team-card__image {
    height: 0;
    padding-bottom: 100%;             /* square 1:1 image */
    position: relative;
  }
  .pd-team-card__image img {
    position: absolute;
    inset: 0;
  }
  .pd-team-card__body {
    padding: 24px 16px;
    gap: 4px;
  }
  .pd-team-card__name,
  .pd-team-card__role {
    font-size: 18px;
    line-height: 1.4;
  }

  /* ── 4. COMMUNITY SPONSORSHIP ───────────────────────────── */
  .pd-about-sponsorship__inner {
    padding: 44px var(--row-pad) 44px;
    gap: 46px;
  }
  .pd-about-sponsorship__title { font-size: 33px; }
  .pd-about-sponsorship__subtitle { max-width: none; }

  /* Cluster: photos stack vertically, full-width, no rotation */
  .pd-about-sponsorship__cluster {
    height: auto;
    max-width: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .pd-about-sponsorship__photo {
    position: static;
    width: 100%;
    height: 299px;
    transform: none;                  /* override L rotation */
  }

  /* ── 5. GETTING IN CONTACT ──────────────────────────────── */
  .pd-about-contact__inner {
    padding: 52px var(--row-pad) 52px;
    gap: 32px;
  }
  .pd-about-contact__title { font-size: 32px; }

  .pd-about-contact__row {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  /* Portrait hidden on XS (matches Figma) */
  .pd-about-contact__portrait { display: none; }
  .pd-about-contact__intro {
    gap: 0;
  }
  .pd-about-contact__intro-text {
    width: 100%;
  }
  /* Address card stays 2-col (info | map) but tighter */
  .pd-about-contact__card {
    padding: 11px;
    min-height: 243px;
  }
  .pd-about-contact__card-info {
    padding: 11px;
    gap: 15px;
  }
  .pd-about-contact__card-row {
    font-size: 16px;                  /* slightly smaller for narrow cols */
  }

  /* ── 6. ELEVATE CTA ─────────────────────────────────────── */
  .pd-about-elevate__inner {
    padding: 77px var(--row-pad);     /* reset to symmetric — image hidden below */
    gap: 32px;
  }
  .pd-about-elevate__media {           /* hide bg image on mobile */
    display: none;
  }
  .pd-about-elevate__title {
    font-size: 40px;                  /* down from 52 — fits 320px viewports */
  }
  .pd-about-elevate__cta {
    width: 100%;
    max-width: 320px;
  }
}


/* ══════════════════════════════════════════════════════════════
   v1.6.0 — LEGAL / LONG-FORM PAGE
   Figma: node 504:15275 (Terms, Refund and Returns Policy, large)
   Loaded by page-template-legal.php (Custom Page Template).

   Designed to be re-used for any text-heavy legal/policy page —
   Privacy Policy, Cookie Policy, Returns & Refunds, Trade Terms,
   etc. Styles target both the wrapper (.pd-legal*) AND the standard
   .entry-content typography so block-editor content renders cleanly
   regardless of which blocks the editor uses.
══════════════════════════════════════════════════════════════ */

.pd-legal {
  background: #fff;
  font-family: 'Open Sans', sans-serif;
  color: #000;
}
.pd-legal__inner {
  max-width: var(--row-max);
  margin: 0 auto;
  padding: 80px var(--row-pad) 100px;
}
/* The article narrows the readable column. The Figma frame is
   1234px wide with 202px left/right padding inside, leaving an
   ~830px text column that's centred horizontally on the page. */
.pd-legal__article {
  max-width: 830px;
  margin: 0 auto;
}

/* Header — page title from the WP admin */
.pd-legal__header {
  margin: 0 0 32px;   /* matches Figma title→body gap */
}
.pd-legal__title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 33px;
  line-height: 1.2;
  margin: 0;
  color: #000;
}

/* Body content — styles target both the .pd-legal__content wrapper
   and the standard .entry-content selector, so any block-editor
   content (paragraphs, headings, lists, etc.) renders consistently. */
.pd-legal__content {
  font-size: 18px;
  line-height: 1.5;
  color: #000;
}

/* Headings — sub-section H2 (Figma: Oswald 700 23px / 1.2) */
.pd-legal__content h2 {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 23px;
  line-height: 1.2;
  margin: 0;
  color: #000;
}
/* Smaller subheadings, in case the editor uses them */
.pd-legal__content h3 {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
  margin: 0;
  color: #000;
}
.pd-legal__content h4 {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
  margin: 0;
  color: #000;
}

/* Paragraphs */
.pd-legal__content p {
  margin: 0;
  line-height: 1.5;
}

/* Lists — Figma uses 27px indent for bullets */
.pd-legal__content ul,
.pd-legal__content ol {
  margin: 0;
  padding: 0 0 0 27px;
}
.pd-legal__content ul { list-style: disc; }
.pd-legal__content ol { list-style: decimal; }
.pd-legal__content li {
  margin: 0;
  line-height: 1.5;
}
.pd-legal__content li + li {
  margin-top: 8px;
}
/* Nested lists — restart spacing inside the parent list */
.pd-legal__content li > ul,
.pd-legal__content li > ol {
  margin-top: 8px;
}

/* ── Block rhythm ──────────────────────────────────────────────
   Placed AFTER the type-specific resets above so adjacent-sibling
   rules win by source order (same specificity, 0,1,1). Headings
   get extra breathing room above to act as visual section breaks
   between policy sections. */
.pd-legal__content > * + p,
.pd-legal__content > * + ul,
.pd-legal__content > * + ol,
.pd-legal__content > * + blockquote,
.pd-legal__content > * + figure,
.pd-legal__content > * + table,
.pd-legal__content > * + hr {
  margin-top: 23px;
}
.pd-legal__content > * + h2 { margin-top: 40px; }
.pd-legal__content > * + h3 { margin-top: 32px; }
.pd-legal__content > * + h4 { margin-top: 24px; }
/* Consecutive paragraphs: tighter rhythm (e.g. for sub-paragraphs
   inside the same logical idea). Specificity 0,1,2 beats the 0,1,1
   default above. */
.pd-legal__content > p + p { margin-top: 8px; }

/* Inline elements */
.pd-legal__content strong,
.pd-legal__content b {
  font-weight: 700;
}
.pd-legal__content em,
.pd-legal__content i {
  font-style: italic;
}
.pd-legal__content a {
  color: var(--navy-mid);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pd-legal__content a:hover,
.pd-legal__content a:focus-visible {
  color: var(--navy);
}

/* Images & figures — keep responsive within the text column */
.pd-legal__content img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}
.pd-legal__content figure {
  margin: 0;
}
.pd-legal__content figcaption {
  font-size: 14px;
  color: #666;
  margin-top: 8px;
}

/* Blockquote — used occasionally in policies for citing rules */
.pd-legal__content blockquote {
  margin: 0;
  padding: 12px 18px;
  border-left: 3px solid var(--navy-mid);
  background: var(--lavender);
  border-radius: 0 6px 6px 0;
}
.pd-legal__content blockquote p {
  margin: 0;
}

/* Tables — for refund tiers, fee schedules, etc. */
.pd-legal__content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}
.pd-legal__content th,
.pd-legal__content td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--rule);
}
.pd-legal__content th {
  font-weight: 700;
  background: var(--lavender);
}

/* HR — visual divider between major sections */
.pd-legal__content hr {
  border: 0;
  height: 1px;
  background: var(--rule);
  margin: 0;
}

/* Page-break pagination (rarely used for legal but supported) */
.pd-legal__pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 14px;
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}
.pd-legal__pagination a,
.pd-legal__pagination > span {
  padding: 4px 10px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  text-decoration: none;
  color: #000;
}
.pd-legal__pagination > span {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}

/* ── Responsive (≤779px) ────────────────────────────────────── */
/* Only the L breakpoint was provided in Figma. At narrow widths
   the title shrinks, vertical padding tightens, and the content
   column fills the available row-pad-bound width. */
@media (max-width: 779px) {
  .pd-legal__inner {
    padding: 40px var(--row-pad) 60px;
  }
  .pd-legal__header {
    margin: 0 0 24px;
  }
  .pd-legal__title {
    font-size: 28px;
  }
  .pd-legal__content {
    font-size: 16px;
  }
  .pd-legal__content h2 {
    font-size: 20px;
  }
  .pd-legal__content h3 {
    font-size: 18px;
  }
}


/* ══════════════════════════════════════════════════════════════
   v1.7.0 — TRADE PAGE
   Figma: node 509:18420 (Trade-L, large breakpoint)
   Loaded by page-template-trade.php (Custom Page Template).

   Sections:
     1. .pd-trade-hero          — navy band + image + -20% badge
     2. .pd-trade-apply         — application form + perks card
     3. .pd-trade-products      — bulk-buy product grid (reuses .pd-card)
     4. .pd-faq                 — generic accordion (reusable; defined here
                                    since this is the first usage)

   Form-field primitives `.pd-form-field*` and FAQ accordion `.pd-faq*`
   are deliberately generic so they can be reused on other templates.
══════════════════════════════════════════════════════════════ */

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

/* ── 1. HERO ────────────────────────────────────────────────── */
/* Same absolute-positioning bleed pattern as the About / archive
   heroes: section is full-bleed, inner reserves right-side space,
   image is absolute to right:0 of the section. */
.pd-trade-hero {
  background: var(--navy);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.pd-trade-hero__inner {
  max-width: var(--row-max);
  margin: 0 auto;
  padding: 81px min(45%, 700px) 81px calc(var(--row-pad) + 34px);
  position: relative;
  z-index: 2;
  min-height: 362px;
  box-sizing: border-box;
}
.pd-trade-hero__copy {
  display: flex;
  flex-direction: column;
  gap: 19px;
}
.pd-trade-hero__title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 52px;
  line-height: 1.2;
  margin: 0;
  color: #fff;
}
.pd-trade-hero__lede {
  font-size: 23px;
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
  color: #fff;
  max-width: 620px;
}
.pd-trade-hero__lede strong {
  font-weight: 700;
}
/* Hero image — anchored to viewport right edge */
.pd-trade-hero__media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(45%, 700px);
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}
.pd-trade-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pd-trade-hero__fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    var(--navy) 0%,
    rgba(8, 1, 83, 0) 50%
  );
  pointer-events: none;
  z-index: 1;
}
/* -20% starburst badge — sits over the photo, roughly at its
   left-middle area. Per Figma node 509:18531 the badge centre
   sits at ~65% from the section's left edge and ~74% down its
   height, which puts it visually anchored to the tradesperson's
   chest area regardless of the photo's exact crop. Tilts
   slightly to feel hand-stamped.

   Anchored from the LEFT (not right) because the photo column
   starts at ~55% from the left and the badge needs to align
   inside it; right-anchoring would push the badge to the
   viewport edge as the screen widens, off the photo entirely. */
.pd-trade-hero__badge {
  position: absolute;
  /* 65% horizontal centre per Figma. translate(-50%) so the
     percentage refers to the badge's own centre, not its left
     edge — keeps it anchored visually as the section width
     scales between the L breakpoint and 780px. */
  left: 65%;
  top: 74%;
  transform: translate(-50%, -50%) rotate(9deg);
  z-index: 3;
  width: 187px;
  height: 187px;
  pointer-events: none;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15));
}
.pd-trade-hero__badge-bg {
  display: block;
  width: 100%;
  height: 100%;
}
.pd-trade-hero__badge-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(2deg);   /* +9 from badge = 11 total */
  font-family: 'Open Sans', sans-serif;
  font-weight: 800;
  font-size: 38px;
  line-height: 1.24;
  color: var(--navy);
  white-space: nowrap;
  text-align: center;
}

/* ── 2. APPLY FORM + TRADE PERKS ────────────────────────────── */
.pd-trade-apply {
  background: #fff;
}
.pd-trade-apply__inner {
  max-width: var(--row-max);
  margin: 0 auto;
  padding: 60px var(--row-pad) 80px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 375px;
  gap: 64px;
  align-items: start;
}
.pd-trade-apply__main {
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-width: 0;
}
.pd-trade-apply__head {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pd-trade-apply__title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 33px;
  line-height: 1.5;
  margin: 0;
  color: #000;
}
.pd-trade-apply__intro {
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
  color: #000;
}

/* Form ----------------------------------------------------------- */
.pd-trade-apply__form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
/* Honeypot — visually hidden but accessible to bots. We use the
   "off-screen but discoverable" trick rather than display:none, so
   form-walking bots will still find and fill it. */
.pd-trade-apply__hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.pd-trade-apply__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}
.pd-trade-apply__consent {
  background: #FAFAFA;
  border-radius: 6px;
  padding: 8px 12px;
  margin: 17px 0 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 24px;
  text-align: center;
  color: #000;
}
.pd-trade-apply__status {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: #000;
  min-height: 1px;   /* preserve space when empty */
}
.pd-trade-apply__status.is-error {
  color: #b00020;
}
.pd-trade-apply__submit {
  appearance: none;
  border: 0;
  cursor: pointer;
  width: 100%;
  height: 55px;
  padding: 12px;
  background: var(--navy);
  color: #fff;
  border-radius: 12px;
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.41;
  text-align: center;
  transition: background-color 0.15s ease;
}
/* v1.45.56: focus was signalled only by navy -> navy-mid, which is 1.51:1 —
   far below the 3:1 of WCAG 1.4.11, and identical to hover.
   SUPERSEDED: .pd-trade-apply__submit:hover, .pd-trade-apply__submit:focus-visible
               { background: var(--navy-mid); outline: none; } */
.pd-trade-apply__submit:hover,
.pd-trade-apply__submit:focus-visible {
  background: var(--navy-mid);
}
.pd-trade-apply__submit:disabled {
  opacity: 0.6;
  cursor: progress;
}
/* Success state — replaces the form when the application is sent */
.pd-trade-apply__success {
  background: #F4F0F8;
  border: 1px solid var(--rule);
  border-left: 4px solid #2E7D32;
  border-radius: 6px;
  padding: 24px;
  font-size: 16px;
  line-height: 1.5;
  color: #000;
}

/* Generic form-field primitive — reusable on other templates */
.pd-form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.pd-form-field__label {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 24px;
  color: #000;
}
.pd-form-field__input {
  appearance: none;
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 1px solid #C2C2C2;
  border-radius: 5px;
  background: #fff;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  line-height: 1.2;
  color: #000;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.pd-form-field__input:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(8, 1, 83, 0.1);
}
.pd-form-field__input--textarea {
  height: 154px;
  padding: 12px;
  line-height: 1.5;
  resize: vertical;
}
.pd-form-field__input[aria-invalid="true"] {
  border-color: #b00020;
}
.pd-form-field__error {
  margin: 0;
  font-size: 13px;
  color: #b00020;
}

/* Trade Perks card ---------------------------------------------- */
.pd-trade-perks {
  background: #FBF6EB;
  border-radius: 10px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: sticky;
  top: 24px;            /* sticks below the sticky header on scroll */
}
.pd-trade-perks__title {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.5;
  margin: 0;
  color: #000;
}
.pd-trade-perks__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pd-trade-perks__item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 18px;
  line-height: 1.5;
  color: #000;
}
.pd-trade-perks__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: #2E7D32;       /* green tick */
}
.pd-trade-perks__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}
.pd-trade-perks__footer {
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
  color: #000;
}

/* ── 3. BULK-BUY PRODUCTS ───────────────────────────────────── */
.pd-trade-products {
  background: #fff;
}
.pd-trade-products__inner {
  max-width: var(--row-max);
  margin: 0 auto;
  padding: 40px var(--row-pad) 60px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.pd-trade-products__title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 33px;
  line-height: 1.2;
  margin: 0;
  color: #000;
}
/* Grid — same 4-col layout as the archive, but scoped to this
   container so it doesn't conflict with the archive's selectors. */
.pd-trade-products__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}


/* ── source lines 7290–7366 ── */
/* ── Responsive (≤779px) ────────────────────────────────────── */
/* Below 1023px the form/perks layout collapses to a single column.
   Per the XS Figma frame, the Perks card moves ABOVE the form when
   stacked (since users land here from the hero CTA — seeing the
   perks first reinforces the value proposition before the ask). */
@media (max-width: 1023px) {
  .pd-trade-apply__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  /* Perks first, form second. `order` lets us reorder visually
     without touching DOM order (which keeps the form's natural
     reading-order intact for screen readers landing on the heading). */
  .pd-trade-perks { order: 1; position: static; }
  .pd-trade-apply__main { order: 2; }

  .pd-trade-products__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 779px) {
  /* Hero — image and badge hidden, copy at full width on navy.
     Heading stays at 52px per Figma XS (uses available width). */
  .pd-trade-hero__inner {
    padding: 43px var(--row-pad) 36px;
    min-height: 0;
  }
  /* .pd-trade-hero__title — size unchanged from L (52px) */
  .pd-trade-hero__media,
  .pd-trade-hero__badge {
    display: none;
  }

  /* Apply section */
  .pd-trade-apply__inner {
    padding: 32px var(--row-pad);
  }
  .pd-trade-apply__title {
    font-size: 28px;
  }
  .pd-trade-apply__row {
    grid-template-columns: 1fr;
  }

  /* Perks card — stays on the cream bg, padding tightens slightly */
  .pd-trade-perks {
    padding: 32px;
  }

  /* Products — 2-col grid per Figma XS (193px cards) */
  .pd-trade-products__inner {
    padding: 32px var(--row-pad);
    gap: 24px;
  }
  /* .pd-trade-products__title — stays 33px per Figma XS */
  /* .pd-trade-products__grid — already 2-col from the 1023px rule */

  /* FAQ — title stays 33px per Figma XS, card padding tightens */
  .pd-faq {
    padding: 24px var(--row-pad) 40px;
  }
  .pd-faq__inner {
    padding: 24px 20px;
  }
  /* .pd-faq__title — size unchanged from L (33px) */
  .pd-faq__summary {
    padding: 24px 0;
    /* Allow longer questions to wrap onto two lines without
       crushing the chevron. */
    align-items: flex-start;
  }
  .pd-faq__icon {
    margin-top: 2px;
  }
}



/* ── source lines 10533–10827 ── */
/* ════════════════════════════════════════════════════════════════════════
   BESPOKE SHEETS QUOTE FORM (v1.45.5 — Figma 978:20926)
════════════════════════════════════════════════════════════════════════ */
.pd-bq {
  max-width: var(--row-max);
  margin: 0 auto;
  padding: 32px var(--row-pad) 80px;
  background: #fff;
}
.pd-bq__form {
  display: flex;
  gap: 64px;
  align-items: flex-start;
}
.pd-bq__main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 48px; /* v1.45.12: was 32px — M flagged the groups as too tight */
}
.pd-bq__aside {
  flex: 0 0 375px;
  position: sticky;
  top: 24px;
}

.pd-bq__title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 33px;
  line-height: 1.5;
  color: #000;
  margin: 0;
}
.pd-bq__sub {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #000;
  margin: 4px 0 0;
}

/* Option group: Oswald Bold 19 label, 12px gap to options */
.pd-bq-group {
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px; /* v1.45.14: was 12px — more air between the heading and its options. */
}
/* v1.45.14: <legend> is excluded from the fieldset's flex layout
   (rendered in the border box), so the flex gap never applied between
   the label and the options (rendered 0). The legend carries its own
   margin instead; the flex gap still spaces the non-legend children
   (e.g. orientation image → pills) and the div-based groups. */
fieldset.pd-bq-group > legend.pd-bq-group__label { margin-bottom: 20px; }
.pd-bq-group__label {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 19px;
  line-height: 24px;
  color: #000;
  padding: 0;
}

/* Pills — 44px, radius 5, #e6e7e8 border; selected = black border,
   semibold (Figma 978:19562). */
.pd-bq-pills {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px; /* v1.45.14: was 8px — wider gap between the option pills. */
}
.pd-bq-pills--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pd-bq-pill {
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  background: #fff;
  border: 1px solid #e6e7e8;
  border-radius: 5px;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  color: #000;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.pd-bq-pill:hover { border-color: #b9babc; }
.pd-bq-pill.is-selected {
  border-color: #000;
  font-weight: 600;
}

/* Image cards — 128px image radius top, label centred (Figma 978:19596) */
.pd-bq-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px; /* v1.45.14: was 8px — wider gap between the image cards. */
}
.pd-bq-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 0 12px;
  background: #fff;
  border: 1px solid #e6e7e8;
  border-radius: 5px;
  overflow: hidden;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s;
}
.pd-bq-card:hover { border-color: #b9babc; }
.pd-bq-card.is-selected { border-color: #000; }
.pd-bq-card.is-selected .pd-bq-card__label { font-weight: 600; }
.pd-bq-card__image {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
  background: #f6f6f6;
}
.pd-bq-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pd-bq-card__label {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  line-height: 1.2;
  color: #000;
  padding: 0 8px;
}

/* Orientation explainer image (per M: shown once above the buttons) */
.pd-bq-orientation-image img {
  display: block;
  max-width: 320px;
  width: 100%;
  height: auto;
  border-radius: 5px;
}

/* v1.45.12: .pd-bq-group is a column flex, so align-items:stretch was
   stretching the stepper to the old 160px max-width with the buttons
   clustered left. align-self makes .qty-wrap hug its content — the
   identical compact component the product pages render. */
.pd-bq-qty { align-self: flex-start; }

/* Details fields — 44px inputs, radius 5, matching the pill treatment */
.pd-bq-details {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pd-bq-details__title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 19px;
  line-height: 24px;
  color: #000;
  margin: 0;
}
.pd-bq-field-row {
  display: flex;
  gap: 15px;
}
.pd-bq-field-row .pd-bq-field { flex: 1 1 0; }
.pd-bq-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}
.pd-bq-field label {
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: #000;
}
.pd-bq-field input[type="text"],
.pd-bq-field input[type="email"],
.pd-bq-field input[type="tel"],
.pd-bq-field textarea {
  border: 1px solid #e6e7e8;
  border-radius: 5px;
  padding: 12px 10px;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  color: #000;
  width: 100%;
  box-sizing: border-box;
}
.pd-bq-field input:focus,
.pd-bq-field textarea:focus {
  outline: none;
  border-color: var(--navy-mid, #30287C);
}
.pd-bq-field input[type="file"] {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
}
.pd-bq-hp {
  position: absolute !important;
  left: -9999px;
}

/* ══════════════════════════════════════════════════════════════
   BESPOKE QUOTE — components BORROWED from other bundles
   (v1.45.63, reported by M)
   ══════════════════════════════════════════════════════════════
   page-template-bespoke-sheets.php deliberately reuses three component
   class sets it does not own, so it inherited their styling for free while
   style.css was one file. After the v1.45.54 split those live in bundles
   this page never loads, and the components silently lost their skins:

     .qty-wrap / .qty-input / .qty-wrap .qty-btn  -> css/product.css
                                                     (loads on is_product only)
     .pd-ty-note                                  -> css/checkout.css
     .pd-ty-continue                              -> css/checkout.css
                                                     (load on cart/checkout only)

   The damage was not evenly visible, which is why it read as two separate
   faults. The `.pd-bq-*` rules for these elements exist in this file but
   only cover LAYOUT — `.pd-bq-qty` is `align-self: flex-start` and nothing
   more, and `.pd-bq-submit` is `border: 0; cursor: pointer`. Every visual
   property (the qty box border, the navy 55px Oswald button, the lavender
   consent panel) came from the borrowed classes, so the fields kept their
   positions while the controls rendered as raw browser defaults.

   PORTED here rather than loading product.css or checkout.css on this page:
   both are large and carry `.woocommerce`- and `.pd-checkout`-scoped rules
   with real bleed potential, unlike archive.css in v1.45.62 where every
   selector was already namespaced.

   ⚠ These are COPIES. The canonical rules are still in product.css and
   checkout.css and are unchanged — if the product qty stepper or the
   thank-you button is restyled, this block must be updated to match. The
   cleaner long-term fix is a shared component bundle loaded by all three
   contexts; that changes load order on product, cart and checkout pages,
   so it is not a go-live change.

   Everything is scoped to `.pd-bespoke-quote` (on <main>) so it cannot
   affect the product page or the thank-you page. */

/* Quantity stepper — from css/product.css */
.pd-bespoke-quote .qty-wrap {
  display: inline-flex;
  align-items: center;
  border: 1px solid #000;
  border-radius: 6px;
  overflow: hidden;
}
.pd-bespoke-quote .qty-wrap .qty-btn {
  width: 38px;
  height: 38px;
  background: #fff;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.pd-bespoke-quote .qty-wrap .qty-btn:hover { background: #f5f5f5; }
.pd-bespoke-quote .qty-input {
  width: 48px;
  text-align: center;
  border: none;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  color: #000;
  padding: 8px 0;
  outline: none;
}
/* Carried over with the rest — without it `outline: none` above would leave
   this field with no focus indicator at all (the v1.45.56 fix). */
.pd-bespoke-quote .qty-input:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
  border-radius: 2px;
}
.pd-bespoke-quote .qty-input::-webkit-outer-spin-button,
.pd-bespoke-quote .qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.pd-bespoke-quote .qty-input[type="number"] { -moz-appearance: textfield; }

/* Consent panel (.pd-ty-note) — from css/checkout.css */
.pd-bespoke-quote .pd-ty-note {
  background: var(--lavender, #F4F0F8);
  border-left: 3px solid var(--navy-mid, #30287C);
  border-radius: 0 5px 5px 0;
  padding: 15px 18px;
}
.pd-bespoke-quote .pd-ty-note p {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  line-height: 1.2;
  color: var(--navy-mid, #30287C);
  margin: 0 0 8px;
}
.pd-bespoke-quote .pd-ty-note p:last-child { margin-bottom: 0; }

/* Submit button (.pd-ty-continue) — from css/checkout.css. `.pd-bq-submit`
   above only strips the browser border; the whole look is this rule. */
.pd-bespoke-quote .pd-ty-continue {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 55px;
  background: var(--navy);
  color: #fff;
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 22px;
  border-radius: 12px;
  text-decoration: none;
  box-sizing: border-box;
}
.pd-bespoke-quote .pd-ty-continue:hover { background: var(--navy-mid, #30287C); }

.pd-bq-error {
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  color: #b32d2e;
  margin: 0;
}
.pd-bq-submit { border: 0; cursor: pointer; }
.pd-bq-submit.is-busy { opacity: 0.6; cursor: wait; }

.pd-bq-success h3 {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 23px;
  color: #000;
  margin: 0 0 8px;
}
.pd-bq-success p {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  color: #000;
  margin: 0;
}

/* SEO band closing CTA — navy pill linking back up to the form */
.pd-info-band a.pd-bq-seo-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--navy);
  color: #fff;
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 18px;
  padding: 12px 28px;
  border-radius: 8px;
  text-decoration: none;
  margin-top: 8px;
}
.pd-info-band a.pd-bq-seo-cta:hover { background: var(--navy-mid, #30287C); }

/* Quote Summary card — matches the confirmation summary treatment */
.pd-bq-summary {
  background: #f9f9f9;
  border: 1px solid #e9e9e9;
  border-radius: 10px;
  padding: 32px;
}
.pd-bq-summary__title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.5;
  color: #000;
  margin: 0 0 20px;
}
.pd-bq-summary__rows {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pd-bq-summary__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #4b4b4b;
}
.pd-bq-summary__row dt { font-weight: 400; }
.pd-bq-summary__row dd { margin: 0; text-align: right; }

@media (max-width: 999px) {
  .pd-bq__form { flex-direction: column; gap: 32px; }
  .pd-bq__aside { position: static; flex-basis: auto; width: 100%; }
  .pd-bq-pills { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pd-bq-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .pd-bq-pills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-bq-field-row { flex-direction: column; gap: 16px; }
}


/* ── source lines 11432–12085 ── */
/* ════════════════════════════════════════════════════════════════════════
   v1.14.0 — 404 PAGE
   ════════════════════════════════════════════════════════════════════════
   Centred-column pattern matching the thank-you / legal templates.
   No bespoke Figma frame — kept simple, on-brand.
════════════════════════════════════════════════════════════════════════ */
.pd-404 {
  background: #fff;
  padding: 56px var(--row-pad) 80px;
  text-align: center;
}
.pd-404__inner {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Big "404" wordmark. Uses the brand yellow for visual interest, rendered
   at a large display size so it works as the page's visual anchor without
   needing imagery. */
.pd-404__mark {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 160px;
  line-height: 0.9;
  color: var(--yellow);
  margin: 0 0 8px;
  letter-spacing: -0.02em;
  -webkit-text-stroke: 0;
}
.pd-404__title {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 47px;
  line-height: 1.1;
  color: var(--navy);
  margin: 0 0 14px;
}
.pd-404__lede {
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  line-height: 1.5;
  color: #333;
  margin: 0 0 36px;
  max-width: 560px;
}

/* Search form ----------------------------------------------------- */
.pd-404__search {
  width: 100%;
  max-width: 560px;
  margin: 0 0 32px;
  text-align: left;
}
.pd-404__search-label {
  display: block;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 24px;
  color: #000;
  margin-bottom: 6px;
  text-align: center;
}
.pd-404__search-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.pd-404__search-input {
  appearance: none;
  flex: 1 1 auto;
  min-width: 0;
  height: 48px;
  padding: 0 14px;
  border: 1px solid #C2C2C2;
  border-radius: 8px;
  background: #fff;
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  line-height: 1.2;
  color: #000;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.pd-404__search-input::-webkit-search-cancel-button { display: none; }
.pd-404__search-input:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(8, 1, 83, 0.1);
}
.pd-404__search-btn {
  flex: 0 0 auto;
  appearance: none;
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0 22px;
  font-family: 'Oswald', sans-serif;
  font-size: 18px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  height: 48px;
  /* Picks up site-wide primary-button hover/active treatment from v1.12.0
     (shadow on hover, scale on press) via .pd-card__cta-style cascading
     selectors? — no, that's class-specific. Add transitions inline so this
     button gets the same feel without us shoehorning it into the v1.12.0
     selector list. */
  transition:
    background-color var(--ix-transition),
    box-shadow var(--ix-transition),
    transform var(--ix-transition);
}
.pd-404__search-btn:hover,
.pd-404__search-btn:focus-visible {
  background: var(--navy-mid);
  box-shadow: var(--ix-shadow-button);
}
.pd-404__search-btn:active { transform: scale(var(--ix-press)); }

/* Popular-links row ---------------------------------------------- */
.pd-404__suggest {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #555;
  margin: 0 0 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pd-404__links {
  list-style: none;
  margin: 0 0 36px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.pd-404__link-item { margin: 0; }
.pd-404__link {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 18px;
  background: var(--lavender);
  color: var(--navy);
  border-radius: 999px;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition:
    background-color var(--ix-transition),
    color var(--ix-transition),
    transform var(--ix-transition);
}
.pd-404__link:hover,
.pd-404__link:focus-visible {
  background: var(--navy);
  color: #fff;
}
.pd-404__link:active { transform: scale(var(--ix-press)); }

/* Bottom homepage CTA ------------------------------------------- */
.pd-404__home { margin: 0; }
.pd-404__home-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--navy);
  color: #fff;
  font-family: 'Oswald', sans-serif;
  font-size: 22px;
  font-weight: 500;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 14px 32px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  min-height: 55px;
  min-width: 240px;
  transition:
    background-color var(--ix-transition),
    box-shadow var(--ix-transition),
    transform var(--ix-transition);
}
.pd-404__home-btn:hover,
.pd-404__home-btn:focus-visible {
  background: var(--navy-mid);
  box-shadow: var(--ix-shadow-button);
}
.pd-404__home-btn:active { transform: scale(var(--ix-press)); }

/* Responsive ---------------------------------------------------- */
@media (max-width: 779px) {
  .pd-404 { padding: 36px var(--row-pad) 56px; }
  .pd-404__mark  { font-size: 110px; }
  .pd-404__title { font-size: 33px; }
  .pd-404__lede  { font-size: 16px; margin-bottom: 28px; }
  .pd-404__home-btn { width: 100%; max-width: 360px; }
}
@media (max-width: 479px) {
  .pd-404__mark { font-size: 88px; }
  .pd-404__search-row { flex-direction: column; gap: 8px; }
  .pd-404__search-btn,
  .pd-404__search-input { width: 100%; }
  .pd-404__search-btn { height: 48px; }
}

/* v1.45.64 — FOUR RULES REMOVED FROM THIS FILE. None of them were page
   rules; they were product-page and product-card rules that landed in the
   `pages` bundle when style.css was split, and pages.css does not load on
   products or archives, so all four had simply stopped applying.

     .pd-wapf-purchase .pd-wapf-form        -> css/product.css
     .pd-wapf-form .quantity  (display:none) -> css/product.css
     .pd-wapf-form .wapf-product-totals      -> css/product.css
     .pd-card__cta.is-adding                 -> css/core-late.css

   See the note at the foot of product.css for what the quantity rule was
   doing and why its loss was visible. */


/* ══════════════════════════════════════════════════════════════
   CONTACT PAGE (page-template-contact.php) — Figma 880:7615
     1. .pd-contact-intro  — lavender band, H1 + intro copy
     2. .pd-contact-cards  — 3 cards pulled up 80px over the band
     3. .pd-contact-visit  — translucent card: address + directions + image
══════════════════════════════════════════════════════════════ */
.pd-contact { background: #fff; }

/* ── 1. Intro band ── */
.pd-contact-intro {
  background: var(--lavender);
}
.pd-contact-intro__inner {
  max-width: var(--row-max);
  margin: 0 auto;
  padding: 32px var(--row-pad) 114px; /* extra bottom = card overlap zone */
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pd-contact-intro__title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 52px;
  line-height: 1.2;
  color: #000;
  margin: 0;
}
.pd-contact-intro__text {
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  line-height: 1.5;
  color: #000;
  max-width: 620px;
  margin: 0;
}

/* ── 2. Contact cards ── */
.pd-contact-cards {
  max-width: var(--row-max);
  margin: -80px auto 0;   /* pull up over the intro band per the design */
  padding: 0 var(--row-pad);
}
.pd-contact-cards__grid {
  display: flex;
  gap: 18px;
  align-items: stretch;
}
.pd-contact-card {
  flex: 1 1 0;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--rule, #dbdbdb);
  border-radius: 10px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.pd-contact-card__disc {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pd-contact-card__disc--navy  { background: var(--navy, #080153); }
.pd-contact-card__disc--green { background: #33d26d; }
.pd-contact-card__title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 19px;
  line-height: 1.2;
  color: #000;
  margin: 0;
}
.pd-contact-card__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  width: 100%;
}
.pd-contact-card__line {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #000;
  margin: 0;
}
.pd-contact-card__highlight {
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 19px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.pd-contact-card__highlight a {
  color: var(--navy-mid, #30287C);
  text-decoration: none;
}
.pd-contact-card__highlight a:hover { text-decoration: underline; }
.pd-contact-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 250px;
  max-width: 100%;
  height: 55px;
  margin-top: 8px;
  /* v1.45.56: white on #33d26d was 1.98:1. This is the same hue and
     saturation at the highest lightness that reaches 4.5:1. */
  background: #1D8644;
  color: #fff;
  border-radius: 12px;
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 22px;
  text-decoration: none;
  transition: filter .15s ease;
}
.pd-contact-card__btn:hover { filter: brightness(.95); }

/* ── 3. Visit us ── */
.pd-contact-visit {
  max-width: var(--row-max);
  margin: 0 auto;
  padding: 32px var(--row-pad) 54px;
}
.pd-contact-visit__card {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid #dfdfdf;
  border-radius: 10px;
  overflow: hidden;
  min-height: 351px;
}
.pd-contact-visit__copy {
  flex: 1 1 0;
  min-width: 0;
  padding: 32px 18px 32px 47px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  align-items: flex-start;
}
.pd-contact-visit__title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 19px;
  line-height: 1.2;
  color: #000;
  margin: 0;
}
.pd-contact-visit__details {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.pd-contact-visit__address,
.pd-contact-visit__hours {
  font-family: 'Open Sans', sans-serif;
  font-size: 19px;
  line-height: 1.2;
  color: #010101;
  margin: 0;
}
.pd-contact-visit__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 250px;
  max-width: 100%;
  height: 55px;
  background: var(--navy, #080153);
  color: #fff;
  border-radius: 12px;
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 22px;
  text-decoration: none;
  transition: filter .15s ease;
}
.pd-contact-visit__btn:hover { filter: brightness(1.15); }
.pd-contact-visit__media {
  flex: 1 1 0;
  min-width: 0;
  align-self: stretch;
}
.pd-contact-visit__media img,
.pd-contact-visit__media iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 351px;
  object-fit: cover;
  border: 0;
}

/* ── Contact responsive (mobile per Contact-XS) ── */
@media (max-width: 779px) {
  .pd-contact-intro__inner { padding: 32px var(--row-pad) 100px; }
  .pd-contact-intro__title { font-size: 40px; }
  .pd-contact-cards__grid { flex-direction: column; }
  .pd-contact-visit__card { flex-direction: column-reverse; align-items: stretch; min-height: 0; }
  .pd-contact-visit__copy { padding: 16px 32px 32px; }
  .pd-contact-visit__media img,
  .pd-contact-visit__media iframe { min-height: 260px; aspect-ratio: 400 / 342; height: auto; }
}


/* ══════════════════════════════════════════════════════════════
   AFFILIATES PAGE (page-template-affiliates.php) — no Figma design;
   composed from the contact/trade patterns.
══════════════════════════════════════════════════════════════ */
.pd-affiliates { background: #fff; }

/* ── 1. Intro band (lavender, copy left / image right) ── */
.pd-affiliates-intro { background: var(--lavender); }
.pd-affiliates-intro__inner {
  max-width: var(--row-max);
  margin: 0 auto;
  padding: 48px var(--row-pad);
  display: flex;
  gap: 48px;
  align-items: center;
}
.pd-affiliates-intro__copy {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pd-affiliates-intro__title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 44px;
  line-height: 1.2;
  color: #000;
  margin: 0;
}
.pd-affiliates-intro__strap {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 19px;
  line-height: 1.4;
  color: var(--navy-mid, #30287C);
  margin: 0;
}
.pd-affiliates-intro__text {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: #000;
  margin: 0;
  max-width: 620px;
}
.pd-affiliates-intro__media {
  flex: 0 1 44%;
  min-width: 0;
}
.pd-affiliates-intro__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

/* ── 2. Why become ── */
.pd-affiliates-why {
  max-width: var(--row-max);
  margin: 0 auto;
  padding: 48px var(--row-pad) 16px;
  display: flex;
  gap: 48px;
  align-items: center;
}
.pd-affiliates-why__copy {
  flex: 1 1 0;
  min-width: 0;
}
.pd-affiliates-why__title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 27px;
  line-height: 1.2;
  color: #000;
  margin: 0 0 16px;
}
.pd-affiliates-why__copy p {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: #000;
  margin: 0 0 12px;
  max-width: 845px;
}
.pd-affiliates-why__copy p:last-child { margin-bottom: 0; }
.pd-affiliates-why__logo { flex: 0 0 auto; }
.pd-affiliates-why__logo img {
  display: block;
  width: 140px;
  height: auto;
}

/* ── 3. Perk cards (reuses .pd-contact-card) ── */
.pd-affiliates-perks {
  max-width: var(--row-max);
  margin: 0 auto;
  padding: 32px var(--row-pad);
}
.pd-affiliates-perks__title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 27px;
  line-height: 1.2;
  color: #000;
  margin: 0 0 24px;
}
.pd-affiliates-perks__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
/* Client-supplied icons are fill-based (contact's are inline-styled) —
   render them white at 24px on the disc. */
.pd-contact-card__disc--fill svg {
  width: 24px;
  height: 24px;
  fill: #fff;
}

/* ── 4. Enquiry form (mirrors the trade form styling) ── */
.pd-affiliates-apply {
  max-width: var(--row-max);
  margin: 0 auto;
  padding: 16px var(--row-pad) 64px;
}
.pd-affiliates-apply__inner { max-width: 720px; }
.pd-affiliates-apply__title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 27px;
  line-height: 1.2;
  color: #000;
  margin: 0 0 12px;
}
.pd-affiliates-apply__text {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: #000;
  margin: 0 0 24px;
}
.pd-affiliate-form { display: flex; flex-direction: column; gap: 16px; }
.pd-affiliate-form__hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.pd-affiliates-apply__row {
  display: flex;
  gap: 16px;
}
.pd-affiliates-apply__row .pd-form-field { flex: 1 1 0; min-width: 0; }
.pd-affiliates-apply__consent {
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: #4b4b4b;
  margin: 0;
}
.pd-affiliate-form__status { margin: 0; font-family: 'Open Sans', sans-serif; font-size: 14px; }
.pd-affiliate-form__status.is-error { color: #b32d2e; }
.pd-affiliate-form__submit {
  appearance: none;
  border: 0;
  cursor: pointer;
  width: 250px;
  max-width: 100%;
  height: 55px;
  padding: 12px;
  background: var(--navy);
  color: #fff;
  border-radius: 12px;
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.41;
  text-align: center;
  transition: filter .15s ease;
}
.pd-affiliate-form__submit:hover { filter: brightness(1.15); }
.pd-affiliate-form__submit:disabled { opacity: .6; cursor: default; }
.pd-affiliate-form__success {
  background: #F4F0F8;
  border: 1px solid var(--rule);
  border-left: 4px solid #2E7D32;
  border-radius: 6px;
  padding: 24px;
  font-size: 16px;
  line-height: 1.5;
  color: #000;
}

/* ── Affiliates responsive ── */
@media (max-width: 999px) {
  .pd-affiliates-perks__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 779px) {
  .pd-affiliates-intro__inner { flex-direction: column; align-items: stretch; gap: 24px; }
  .pd-affiliates-intro__title { font-size: 34px; }
  .pd-affiliates-why { flex-direction: column-reverse; align-items: flex-start; gap: 24px; }
  .pd-affiliates-perks__grid { grid-template-columns: 1fr; }
  .pd-affiliates-apply__row { flex-direction: column; }
}



/* ── source lines 12198–12492 ── */
/* ══════════════════════════════════════════════════════════════
   MEDIA / PRESS PAGE (page-template-media.php) — composed from the
   established patterns.
══════════════════════════════════════════════════════════════ */
.pd-media { background: #fff; }

.pd-media-intro { background: var(--lavender); }
.pd-media-intro__inner {
  max-width: var(--row-max);
  margin: 0 auto;
  padding: 32px var(--row-pad) 48px;
}
.pd-media-intro__title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 52px;
  line-height: 1.2;
  color: #000;
  margin: 0;
}

.pd-media-section {
  max-width: var(--row-max);
  margin: 0 auto;
  padding: 40px var(--row-pad) 0;
}
.pd-media-section__title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 27px;
  line-height: 1.2;
  color: #000;
  margin: 0 0 14px;
}
.pd-media-section__text {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #000;
  margin: 0;
  max-width: 900px;
}
.pd-media-section__text a {
  color: var(--navy-mid, #30287C);
  text-decoration: underline;
}

.pd-media-posts { margin-top: 24px; }
.pd-media-posts__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.pd-media-posts__view-all {
  background: #080153;
  color: #fff !important;
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 10px;
  padding: 10px 24px;
  transition: background 0.2s;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--navy-mid, #30287C);
  text-decoration: none;
  flex-shrink: 0;
}
.pd-media-posts__view-all:hover { background: var(--navy-mid); text-decoration: none; }

/* 4-up blog grid variant (Recent Posts). */
.pd-blog-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 999px) {
  .pd-blog-grid--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .pd-blog-grid--three { grid-template-columns: 1fr; }
}
@media (max-width: 779px) {
  .pd-media-intro__title { font-size: 40px; }
}


/* ══════════════════════════════════════════════════════════════
   ORDER A SAMPLE PAGE (page-template-order-a-sample.php) — based on
   the live page, composed from the theme patterns.
══════════════════════════════════════════════════════════════ */
.pd-samples { background: #fff; }

.pd-samples-intro { background: var(--lavender); }
.pd-samples-intro__inner {
  max-width: var(--row-max);
  margin: 0 auto;
  padding: 40px var(--row-pad);
}
.pd-samples-intro__title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 44px;
  line-height: 1.2;
  color: #000;
  margin: 0;
  max-width: 760px;
}

.pd-samples-how {
  max-width: var(--row-max);
  margin: 0 auto;
  padding: 44px var(--row-pad) 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.pd-samples-how__text {
  font-family: 'Open Sans', sans-serif;
  font-size: 17px;
  line-height: 1.55;
  color: #1c1c1c;
  margin: 0;
  max-width: 720px;
}
.pd-samples-how__price {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: #000;
  margin: 0;
}
.pd-samples-how__img {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin-top: 8px;
}

.pd-samples-products {
  max-width: var(--row-max);
  margin: 0 auto;
  padding: 36px var(--row-pad) 64px;
}
.pd-samples-products__title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 27px;
  line-height: 1.25;
  color: #000;
  text-align: center;
  margin: 0 auto 32px;
  max-width: 640px;
}
/* Product grid — same 4-up card layout as the homepage bestsellers. */
ul.products.pd-samples-products__grid {
  list-style: none;
  margin: 0 0 40px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 999px) {
  ul.products.pd-samples-products__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  ul.products.pd-samples-products__grid { grid-template-columns: 1fr; }
}
@media (max-width: 779px) {
  .pd-samples-intro__title { font-size: 34px; }
}


/* Custom builder products — spacing above the in-step summary row. */
.sum-in-step {
  margin-top: 10px;
}

/* ── Wainscot Kits page template (page-template-wainscot-kits.php) ── */
.pd-wainscot-intro {
  background: var(--lavender);
  border-bottom: 1px solid var(--rule);
}
.pd-wainscot-intro__inner {
  max-width: 820px;
  margin: 0 auto;
  padding: 44px var(--row-pad) 40px;
  text-align: center;
}
.pd-wainscot-intro__title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 1.2;
  color: #000;
  margin: 0 0 16px;
}
.pd-wainscot-intro__inner p {
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #000;
  margin: 0 0 10px;
}
.pd-wainscot-chooser,
.pd-wainscot-strip {
  max-width: var(--row-max);
  margin: 0 auto;
  padding: 36px var(--row-pad) 8px;
}
.pd-kit-cards {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 22px;
}
.pd-kit-card {
  grid-column: span 2;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: #fff;
  padding: 16px 16px 20px;
  display: flex;
  flex-direction: column;
  text-align: center;
}
.pd-kit-card--featured { grid-column: span 3; }
.pd-kit-card__media img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}
.pd-kit-card--featured .pd-kit-card__media img { height: 320px; }
.pd-kit-card__title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 19px;
  margin: 14px 0 10px;
}
.pd-kit-card__title a { color: #000; text-decoration: none; }
.pd-kit-card__features {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #000;
}
.pd-kit-card__features li { margin-bottom: 4px; }
.pd-kit-card__features li::before { content: '\2714\00a0\00a0'; color: var(--navy-mid); }
.pd-kit-card__btn {
  margin-top: auto;
  align-self: center;
  background: #080153;
  color: #fff;
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 17px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 12px;
  padding: 12px 34px;
  transition: background 0.2s;
}
.pd-kit-card__btn:hover { background: var(--navy-mid); }
.pd-wainscot-strip__grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.pd-wainscot .pd-info-band { margin-top: 40px; }
@media (max-width: 1000px) {
  .pd-kit-cards { grid-template-columns: repeat(2, 1fr); }
  .pd-kit-card, .pd-kit-card--featured { grid-column: span 1; }
  .pd-wainscot-strip__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .pd-kit-cards { grid-template-columns: 1fr; }
  .pd-wainscot-strip__grid { grid-template-columns: repeat(2, 1fr); }
  .pd-kit-card__media img, .pd-kit-card--featured .pd-kit-card__media img { height: 220px; }
}


/* ── source lines 12679–12718 ── */
/* ══════════════════════════════════════════════════════════════
   v1.45.40 — Newsletter page template (page-template-newsletter.php)
   Title + Klaviyo embed, nothing else. Typography follows the legal
   template so it sits consistently with the other simple pages.
══════════════════════════════════════════════════════════════ */
.pd-newsletter__inner {
  max-width: var(--row-max);
  margin: 0 auto;
  padding: 80px var(--row-pad) 100px;
}
.pd-newsletter__title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 33px;
  line-height: 1.2;
  margin: 0 0 24px;
  color: #000;
  max-width: 600px;
}
.pd-newsletter__content {
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  line-height: 1.5;
  max-width: 600px;
  margin: 0 0 28px;
}
.pd-newsletter__content p { margin: 0 0 16px; }
/* The embed itself — capped at 600px per M. Klaviyo injects its own
   markup inside, so the cap sits on the container and the form is left
   to fill it. */
.pd-newsletter__form {
  max-width: 600px;
  width: 100%;
}
@media screen and (max-width: 766px) {
  .pd-newsletter__inner { padding: 48px var(--row-pad) 64px; }
  .pd-newsletter__title { font-size: 27px; }
  .pd-newsletter__content { font-size: 16px; }
}