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

   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 2662–3277 ── */
/* ── Below-products info band (inc/category-content.php +
   inc/product-content.php) ── Full-width lavender band after the
   product grid / product details; a centred 900px copy column. */
.pd-info-band {
  background: var(--lavender);
  border-top: 1px solid var(--rule);
}
.pd-info-band__inner {
  max-width: calc(900px + (var(--row-pad) * 2));
  margin: 0 auto;
  padding: 44px var(--row-pad) 52px;
}
/* On collection pages the band content runs the same width as the
   page/product grid (v1.45.1, designer note 7); product pages keep
   the narrower 900px reading column. */
.pd-archive .pd-info-band__inner {
  max-width: var(--row-max);
}
/* Band media header: legacy videos + image carousel restored from the
   Elementor exports (pd_product_seo_media / js/seo-media.js).
   Videos and gallery are centred at max 550px; corners match the main
   product gallery (6px). Gallery shows one image at a time at natural
   dimensions, swipeable, with prev/next arrows and auto-advance. */
.pd-seo-media {
  margin-bottom: 36px;
}
.pd-seo-media__heading {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 20px;
  color: #000;
  text-align: center;
  margin: 0 0 14px;
}
.pd-seo-media__video {
  max-width: 550px;
  margin: 0 auto 24px;
}
.pd-seo-media__video video {
  display: block;
  width: 100%;
  height: auto;
  background: #000;
  border-radius: 6px;
}
.pd-seo-gallery {
  position: relative;
  max-width: 550px;
  margin: 0 auto;
}
.pd-seo-gallery__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.pd-seo-gallery__track::-webkit-scrollbar { display: none; }
.pd-seo-gallery__item {
  flex: 0 0 100%;
  margin: 0;
  scroll-snap-align: start;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pd-seo-gallery__item img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}
.pd-seo-gallery__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.35);
  border: none;
  color: #fff;
  width: 32px; height: 45px;
  border-radius: 4px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
  transition: background 0.2s;
  padding: 0;
}
.pd-seo-gallery__arrow:hover { background: rgba(0,0,0,0.55); }
.pd-seo-gallery__arrow.prev { left: 10px; }
.pd-seo-gallery__arrow.next { right: 10px; }
.pd-seo-gallery__arrow svg { width: 18px; height: 18px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media screen and (max-width: 766px) {
  .pd-seo-media { margin-bottom: 28px; }
}
/* Legacy navy icon-grid for the "Fitting Your Panelling" steps
   (pd_render_info_band_fitting_steps). Full-bleed inside the band. */
.pd-fitting-steps {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: #080153;
  color: #fff;
  padding: 56px var(--row-pad) 64px;
  margin-top: 24px;
  margin-bottom: 32px;
}
.pd-fitting-steps__inner {
  max-width: 1200px;
  margin: 0 auto;
}
.pd-fitting-steps__heading {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 34px;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  margin: 0 0 18px;
}
.pd-fitting-steps__intro {
  text-align: center;
  color: #fff;
  margin: 0 0 12px;
}
.pd-fitting-steps__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px 40px;
  margin-top: 44px;
}
.pd-fitting-steps__step {
  text-align: center;
}
.pd-fitting-steps__icon {
  display: inline-flex;
  color: #FCDC00;
  margin-bottom: 16px;
}
.pd-fitting-steps__icon svg {
  width: 46px;
  height: 46px;
}
.pd-fitting-steps__label {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 22px;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 10px;
}
.pd-fitting-steps__text {
  color: #fff;
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
}
/* .pd-info-band p (declared later) sets #000 and out-specifies the
   two class-only rules above, leaving the navy band's copy dark —
   re-assert white at band scope (v1.44.9). */
.pd-info-band .pd-fitting-steps p {
  color: #fff;
}
/* When the fitting steps open the band (creator/headboard products,
   where all before-media is absent), cancel the band inner's 44px top
   padding plus this section's own 24px gap so the full-bleed navy
   starts flush — no lavender strip above (v1.44.9). */
.pd-info-band__inner > .pd-fitting-steps:first-child {
  margin-top: -44px;
}
@media screen and (max-width: 1024px) {
  .pd-fitting-steps__grid { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 600px) {
  .pd-fitting-steps__grid { grid-template-columns: 1fr; gap: 36px; }
  .pd-fitting-steps__heading { font-size: 26px; }
}
.pd-info-band__split-caption {
  text-align: center;
  font-size: 15px;
  color: #444;
  margin-top: 10px;
}
/* Illustrated media lists (block 'list_media' option) */
.pd-list-media { margin: 24px 0; }
.pd-list-media--strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 34px;
  text-align: center;
}
.pd-list-media--strip .pd-list-media__item {
  flex: 1 1 0;
  min-width: 150px;
  max-width: 210px;
}
.pd-list-media--strip .pd-list-media__img,
.pd-list-media--cards .pd-list-media__img {
  margin: 0 auto 16px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  overflow: hidden;
}
.pd-list-media__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pd-list-media--strip .pd-list-media__text strong { display: block; }
.pd-list-media--cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px 60px;
  text-align: center;
}
.pd-list-media--cards .pd-list-media__item:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  max-width: 50%;
  margin: 0 auto;
}
@media screen and (max-width: 766px) {
  .pd-list-media--cards { grid-template-columns: 1fr; }
  .pd-list-media--cards .pd-list-media__item:last-child:nth-child(odd) { max-width: 100%; }
  .pd-list-media--strip { gap: 24px; }
}
/* Room-divider media column: static illustration + disclaimers in
   place of the product gallery (pd_render_room_divider_media) */
.pd-divider-media {
  text-align: center;
}
.pd-divider-media__img {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  margin: 0 auto 12px;
}
.pd-divider-media__caption {
  font-size: 14px;
  color: #666;
  margin: 0 0 26px;
}
.pd-divider-media__disclaimer {
  color: #555;
  font-size: 16px;
  line-height: 1.55;
}
.pd-divider-media__disclaimer strong { color: #333; }
.pd-divider-media__disclaimer p { margin: 0 0 18px; }
.pd-divider-media__contact {
  font-size: 14px;
  color: #666;
  margin: 6px 0 0;
}
/* Legacy "Video: Fitting Your Room Divider" pill (WAPF content) —
   room-divider product only, per legacy styling */
.postid-13223 .howto-video {
  background-color: #fcdc00;
  border-radius: 20px;
  padding: 3px;
  display: flex;
  color: #080152;
  font-size: 14px;
  font-weight: 500;
  line-height: 30px;
  width: 270px;
}
.postid-13223 .howto-video img {
  width: 30px;
  margin-right: 8px;
  height: 30px;
}
/* WAPF image swatches — compact sizing across all products */
.wapf-field-container .wapf-swatch--image {
  padding: 1.5px !important;
  border-width: 1px !important;
  width: 35px !important;
  height: 35px !important;
}
.wapf-swatch--image img { height: 100%; }
.pd-wapf .wapf-field-container {
  padding-bottom: 15px;
  padding-top: 0;
}
/* Product price — no top padding (site-wide) */
.woocommerce div.product .price, .woocommerce div.product p.price, .woocommerce div.product span.price, .woocommerce div.product .price ins, .woocommerce div.product .price .amount, .woocommerce div.product .price del, .pd-single-product .price, .pd-single-product .price ins, .pd-single-product .price .amount, .pd-single-product .price del {
  padding-top: 0;
}
/* Room-divider media column end */
/* Icon-card group (block 'cards' option) — e.g. All-In-One How To Guide */
.pd-info-cards { margin: 8px 0 24px; }
.pd-info-cards__heading {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 28px;
  text-align: center;
  color: #000;
  margin: 0 0 16px;
}
.pd-info-cards__intro {
  text-align: center;
  margin: 0 0 12px;
}
.pd-info-cards__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 32px;
}
.pd-info-cards__card {
  background: #fafafa;
  padding: 34px 30px 26px;
}
.pd-info-cards__icon {
  display: flex;
  justify-content: center;
  color: #FCDC00;
  margin-bottom: 14px;
}
.pd-info-cards__icon svg { width: 44px; height: 44px; }
.pd-info-cards__title {
  text-align: center;
  font-weight: 700;
  font-size: 20px;
  color: #000;
  margin: 0 0 16px;
}
@media screen and (max-width: 766px) {
  .pd-info-cards__grid { grid-template-columns: 1fr; }
}
/* Plain image row (block 'images' option) — e.g. bead-butt spec + components */
.pd-info-band__imgrow {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  justify-content: center;
  margin: 8px 0 24px;
}
.pd-info-band__imgrow-item { margin: 0; min-width: 0; }
.pd-info-band__imgrow-item img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}
/* Small logo/icon figures inside info-band image rows (e.g. the FSC mark on
   Decorative Wall Panels) — capped so they render as icons rather than
   full-width photos.
   ------------------------------------------------------------------
   v1.45.62 — MOVED here from style.css, where it had been since before the
   split. It is a CASCADE casualty of v1.45.54, not a broken rule:

       .pd-info-band__imgrow-item--icon img   0,1,1
       .pd-info-band__imgrow-item img         0,1,1   <- max-width: 100%

   Identical specificity, so source order decides. In the old monolithic
   style.css the icon cap sat ~10,000 lines BELOW the imgrow rule and won.
   After the split the imgrow rule moved into this bundle, which loads AFTER
   style.css — so max-width: 100% started winning and the FSC logo went from
   60px to nearly full width. Keeping it directly below its opponent makes
   the ordering local and obvious. */
.pd-info-band__imgrow-item--icon img { max-width: 60px; }
/* Desktop: fixed card size so mixed-aspect photos read as a consistent
   strip rather than a ragged row (v1.45.36, per M). `object-fit: cover`
   keeps them undistorted — the crop is centred. Small logo/icon figures
   (--icon, e.g. the FSC mark) are excluded and keep their natural size.
   Mobile is untouched: the row stacks and images stay full-width at
   natural proportions. */
@media screen and (min-width: 767px) {
  .pd-info-band__imgrow { flex-wrap: nowrap; gap: 24px; align-items: center; }
  .pd-info-band__imgrow-item:not(.pd-info-band__imgrow-item--icon) {
    flex: 1 1 150px;
    max-width: 260px;
  }
  .pd-info-band__imgrow-item:not(.pd-info-band__imgrow-item--icon) img {
    width: 100%;
    height: 200px;
    object-fit: cover;
  }
  .pd-info-band__imgrow-item--icon { flex: 0 0 auto; }
}
@media screen and (max-width: 766px) {
  .pd-info-band__imgrow { flex-direction: column; align-items: center; }
}
/* Two-column block pair (block 'half' => true) */
.pd-info-band__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
  margin: 8px 0 24px;
}
@media screen and (max-width: 766px) {
  .pd-info-band__cols { grid-template-columns: 1fr; gap: 24px; }
}
/* Centred band section (block 'align' => 'center') */
.pd-info-band__center { text-align: center; }
.pd-info-band__center ul { display: inline-block; text-align: left; }
/* Yellow tick list (legacy icon-list treatment) */
ul.pd-ticks {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
}
ul.pd-ticks li {
  position: relative;
  padding-left: 28px;
  font-weight: 700;
  margin-bottom: 8px;
}
ul.pd-ticks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  width: 15px;
  height: 8px;
  border-left: 3px solid #FCDC00;
  border-bottom: 3px solid #FCDC00;
  transform: rotate(-48deg);
}
ul.pd-ticks--reg li { font-weight: 400; }
/* 2x2 product-gallery collage inside a split ('collage' => true) */
.pd-info-band__split-collage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.pd-info-band__split-collage figure { margin: 0; }
.pd-info-band__split-collage img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 5;
  border-radius: 6px;
}
/* Right-aligned split text (img 'text_align' => 'right') */
.pd-info-band__split--text-right .pd-info-band__split-text { text-align: right; }
/* Video row with social CTA column */
.pd-seo-media__rowwrap.has-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 34%);
  gap: 40px;
  align-items: center;
}
.pd-seo-media__cta {
  text-align: center;
  font-size: 17px;
  line-height: 1.5;
}
.pd-seo-media__cta p { margin: 0 0 14px; }
.pd-seo-media__cta-socials {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 22px;
}
.pd-seo-media__cta-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 8px;
  /* v1.45.56: the icon inherits `color` via currentColor — white on yellow
     is 1.37:1, below the 3:1 that WCAG 1.4.11 requires of a graphical
     object. Navy on this yellow is 13.5:1. */
  background: #FCDC00;
  color: var(--navy);
  transition: opacity 0.15s;
}
.pd-seo-media__cta-social:hover { opacity: 0.8; }
.pd-seo-media__cta-social svg { width: 26px; height: 26px; }
@media screen and (max-width: 766px) {
  .pd-seo-media__rowwrap.has-cta {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .pd-info-band__split--text-right .pd-info-band__split-text { text-align: left; }
}
/* Two-column block split: text beside a section image
   (pd_render_info_band_blocks 'img' option) */
.pd-info-band__split {
  display: grid;
  grid-template-columns: 1fr minmax(0, 42%);
  gap: 40px;
  align-items: center;
  margin: 24px 0 64px;
}
.pd-info-band__split:last-child { margin-bottom: 24px; }
.pd-info-band__split--img-left { grid-template-columns: minmax(0, 42%) 1fr; }
.pd-info-band__split--img-left .pd-info-band__split-img { order: -1; }
.pd-info-band__split-text > :first-child { margin-top: 0; }
.pd-info-band__split-img {
  margin: 0;
}
.pd-info-band__split-img img,
.pd-info-band__split-img video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}
.pd-info-band__split-img video { background: #000; }
/* Side-by-side video strip (videos_layout: row) — legacy social clips */
.pd-seo-media__row {
  display: flex;
  gap: 12px;
}
.pd-seo-media__row .pd-seo-media__video {
  flex: 1 1 0;
  min-width: 0;
  max-width: none;
  margin: 0;
}
.pd-seo-media__row .pd-seo-media__video video {
  aspect-ratio: 9 / 16;
  object-fit: cover;
}
@media screen and (max-width: 766px) {
  .pd-info-band__split,
  .pd-info-band__split--img-left {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .pd-info-band__split--img-left .pd-info-band__split-img { order: 0; }
  .pd-seo-media__row {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .pd-seo-media__row::-webkit-scrollbar { display: none; }
  .pd-seo-media__row .pd-seo-media__video {
    flex: 0 0 62%;
    scroll-snap-align: start;
  }
}
.pd-info-band__heading {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 21px;
  line-height: 1.25;
  color: #000;
  margin: 0 0 14px;
}
.pd-info-band__heading:not(:first-child) { margin-top: 30px; }
.pd-info-band p {
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: #000;
  margin: 0 0 12px;
}
.pd-info-band p:last-child { margin-bottom: 0; }
.pd-info-band a { color: var(--navy-mid); text-decoration: underline; }

/* Product variant (single product pages) — same band, plus h3
   subheadings, bold p-level headings and list support. */
.pd-info-band__subheading {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  color: #000;
  margin: 26px 0 10px;
}
.pd-info-band__subheading:first-child { margin-top: 0; }
.pd-info-band__pheading {
  font-size: 15px;
  margin: 20px 0 8px;
}
.pd-info-band ul,
.pd-info-band ol {
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: #000;
  margin: 0 0 12px;
  padding-left: 22px;
}
.pd-info-band li { margin-bottom: 6px; }
.pd-info-band li:last-child { margin-bottom: 0; }

/* (read-more toggle removed in v1.24.0 — descriptions render in full) */

/* Trustpilot block */
.pd-trustpilot-badge {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  height: 34px;
}
.pd-trustpilot-badge img { height: 34px; width: auto; display: block; }

/* Hero image — absolute-positioned to the viewport's right edge so it sits
   flush with the page edge even on ultra-wide screens, with a gradient fade
   from lavender → transparent across its left portion. Hidden at ≤999px. */
.pd-title-band__hero {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(35%, 560px);
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}
.pd-title-band__hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pd-title-band__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  /* v1.45.21: solid lavender head (0–18%) then a longer fade (to 85%).
     The previous 0%→60% ramp began fading at the very first pixel, so
     bright/near-white hero images showed a hard vertical seam at the
     box edge (no solid zone to blend from); dark images masked it. */
  background: linear-gradient(
    to right,
    var(--lavender) 0%,
    var(--lavender) 18%,
    rgba(244, 240, 248, 0) 85%
  );
  pointer-events: none;
  z-index: 1;
}