/* ============================================================
   Sleepeezee PDP — Product Detail Page

   All component rules are nested inside .pdp-mattress .pdp { }
   so they compile to .pdp-mattress .pdp .pdp__X (specificity
   0-3-0), which beats element resets like h1–h4 at 0-2-1.

   Layer 1  all: revert  — strips Elementor/Astra author styles
   Layer 2  Base tokens on .pdp — inherit to children
   Layer 3  Component styles — nested = higher specificity
   ============================================================ */

/* ── Design tokens ── */
:root {
  --pdp-ocean:   #393245;
  --pdp-ivory:   #FBF8F4;
  --pdp-pebble:  #F5EDE3;
  --pdp-green:   #455146;
  --pdp-heather: #582E40;
  --pdp-grey-d:  #666;
  --pdp-grey-m:  #888;
  --pdp-grey-l:  #F1F1F1;
  --pdp-border:  #C4C4C4;
  --pdp-max:     1300px;
}

/* ── Astra container overrides — outside .pdp, need !important ── */
body.pdp-mattress #content,
body.pdp-mattress .ast-container {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}
body.pdp-mattress #primary,
body.pdp-mattress #main,
body.pdp-mattress .ast-article-single {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* ============================================================
   ROOT COMPONENT
   ============================================================ */
.pdp-mattress .pdp {

  /* Layer 1: strip all author styles (Elementor, Astra).
     IMPORTANT: exclude .swiper and its descendants — Swiper's own CSS is
     author-origin and would also be reverted, breaking the carousel.
     Also exclude .se-card and its descendants so the shared product-card
     styles survive inside the related-products grid.
     Also exclude form controls so we can style our custom radio/checkbox. */
  & {
    all: revert;
    box-sizing: border-box;
  }
  & *:not(.swiper, .swiper *, [class^="swiper-"], [class*=" swiper-"], svg, svg *, .se-card, .se-card *, .fp-reviews, .fp-reviews *, i),
  & *:not(.swiper, .swiper *, [class^="swiper-"], [class*=" swiper-"], svg, svg *, .se-card, .se-card *, .fp-reviews, .fp-reviews *, i)::before,
  & *:not(.swiper, .swiper *, [class^="swiper-"], [class*=" swiper-"], svg, svg *, .se-card, .se-card *, .fp-reviews, .fp-reviews *, i)::after {
    all: revert;
    box-sizing: border-box;
  }

  /* Layer 2: base tokens — inherited properties flow to children */
  font-family: "itc-avant-garde-gothic-pro", sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--pdp-ocean);
  background: var(--pdp-ivory);

  /* Element resets — exclude .se-card and .fp-reviews descendants so the
     shared product-card markup AND the shared flexible-content reviews
     markup keep their own typography. The exclusion list is wrapped in
     :where() so it contributes 0 to specificity, keeping these resets at
     the same level (0,2,1) as before — block-specific rules like
     .pdp__hero-title (0,3,0) still win. */
  h1:not(:where(.se-card *, .fp-reviews *)),
  h2:not(:where(.se-card *, .fp-reviews *)),
  h3:not(:where(.se-card *, .fp-reviews *)),
  h4:not(:where(.se-card *, .fp-reviews *)),
  h5:not(:where(.se-card *, .fp-reviews *)),
  h6:not(:where(.se-card *, .fp-reviews *)) {
    font-family: "new-spirit", serif;
    font-weight: 500;
    line-height: 1.2;
    margin: 0;
    color: var(--pdp-ocean);
  }

  p:not(:where(.se-card *, .fp-reviews *)) { margin: 0; }

  /* Exclude .pdp__btn so button colour rules aren't overridden.
     Also exclude .se-card (the card itself is an <a>) and any <a> inside.
     Also exclude .fp-reviews descendants so the shared reviews CTA link
     keeps its underline/colour. :where() keeps this reset at its original
     specificity (0,3,1). */
  a:not(:where(.pdp__btn, .se-card, .se-card *, .fp-reviews *)) {
    color: inherit;
    text-decoration: none;
  }

  /* ============================================================
     WC NOTICES — printed by wc_print_notices() at top of template
     ============================================================ */
  .pdp__notices {
    background: var(--pdp-ivory);
    padding: 16px 24px 0;
  }

  .pdp__notices-inner {
    max-width: var(--pdp-max);
    margin: 0 auto;
  }

  /* Style the WC-generated notice lists */
  .pdp__notices .woocommerce-notices-wrapper,
  .pdp__notices ul.woocommerce-error,
  .pdp__notices .woocommerce-message,
  .pdp__notices .woocommerce-info,
  .pdp__notices .woocommerce-error {
    list-style: none;
    margin: 0 0 12px;
    padding: 14px 20px;
    border-radius: 2px;
    font-size: 14px;
    line-height: 1.4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }

  .pdp__notices .woocommerce-message {
    background: var(--pdp-green);
    color: #fff;
    border-left: 4px solid #2d3a2e;
  }

  .pdp__notices .woocommerce-info {
    background: var(--pdp-pebble);
    color: var(--pdp-ocean);
    border-left: 4px solid var(--pdp-ocean);
  }

  .pdp__notices .woocommerce-error,
  .pdp__notices ul.woocommerce-error li {
    background: #fceaea;
    color: #8a1f1f;
    border-left: 4px solid #8a1f1f;
  }

  /* "View cart" link / button rendered inside the success notice */
  .pdp__notices .button,
  .pdp__notices a.wc-forward {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: var(--pdp-ocean);
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid #fff;
    line-height: 1;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
  }

  .pdp__notices .button:hover,
  .pdp__notices a.wc-forward:hover {
    background: var(--pdp-pebble);
    color: var(--pdp-ocean);
  }

  /* ============================================================
     HERO — gallery left / panel right
     ============================================================ */
  .pdp__hero {
    display: grid;
    grid-template-columns: 762px 1fr;
    max-width: var(--pdp-max);
    margin: 0 auto;
    padding-top: 20px;
  }

  /* ── Gallery ── */
  .pdp__gallery {
    position: relative;
    background: var(--pdp-ivory);
    padding: 16px 49px;
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .pdp__gallery-main {
    width: 100%;
    aspect-ratio: 1 / 1;
    max-height: 665px;
    overflow: hidden;

    .swiper-wrapper,
    .swiper-slide {
      height: 100%;
    }

    .swiper-slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
  }

  .pdp__gallery-thumbs-row {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 14px;
    gap: 0;
  }

  /* Thumbs swiper: slides are auto-width, flex shrink handled by Swiper */
  .pdp__gallery-thumbs {
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }

  .pdp__gallery-thumb {
    width: calc(100% - 4px);
    aspect-ratio: 1 / 1;
    border: 2px solid transparent;
    background: none;
    appearance: none;
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.15s;
    display: block;

    img { width: 100%; height: 100%; object-fit: cover; }
  }

  /* Swiper sets this class on the active thumb slide */
  .pdp__gallery-thumbs .swiper-slide-thumb-active .pdp__gallery-thumb {
    border-color: var(--pdp-ocean);
  }

  /* Mobile-only dot pagination — hidden on desktop, shown by the responsive
     block below. The buttons are rendered by Swiper. */
  .pdp__gallery-pagination {
    display: none;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
  }

  .pdp__gallery-bullet {
    width: 16px;
    height: 4px;
    border-radius: 2px;
    border: none;
    padding: 0;
    background: rgba(57, 50, 59, 0.25);
    cursor: pointer;
    transition: width 0.25s ease, background 0.25s ease;
  }

  .pdp__gallery-bullet--active {
    width: 40px;
    background: var(--pdp-ocean);
  }

  .pdp__gallery-arrow {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    appearance: none;
    cursor: pointer;
    color: var(--pdp-ocean);
    padding: 0;
    margin: 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    z-index: 2;
    &[data-gallery-next] {
      margin-right: 0px !important;
    }
    &[data-gallery-prev] {
      margin-left: 0px !important;
    }
    svg {
      width: 32px;
      height: 32px;
      display: block;
      pointer-events: none;
      overflow: visible;
    }

    svg path { stroke: currentColor; }

    &:hover { color: #000; }

    /* Swiper marks externally-bound nav buttons as disabled at the edges —
       keep them visible but dimmed instead of fully hidden */
    &.swiper-button-disabled {
      opacity: 0.35;
      cursor: default;
      pointer-events: none;
    }
  }

  /* ── Info panel ── */
  .pdp__panel {
    background: var(--pdp-ivory);
    padding: 7px 0px 32px;
    display: flex;
    flex-direction: column;
    padding-right: 50px;
  }

  .pdp__breadcrumb {
    font-size: 14px;
    color: var(--pdp-grey-d);
    text-decoration: underline;
    margin-bottom: 6px;
    text-transform: capitalize;
    display: block;
    line-height: 1.3;

    a { color: inherit; text-decoration: underline; }
  }

  .pdp__title {
    font-family: "new-spirit", serif;
    font-size: clamp(24px, 2.5vw, 32px);
    font-weight: 500;
    margin: 0 0 8px;
    line-height: 1.2;
  }

  /* Badges */
  .pdp__badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 300;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 5px 8px;
    margin-bottom: 11px;

    &.pdp__badge--exclusive { background: var(--pdp-grey-l); color: var(--pdp-ocean); }
    &.pdp__badge--retail    { background: var(--pdp-green);  color: #fff; }
  }

  /* Rating */
  .pdp__rating {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
  }

  .pdp__stars { display: inline-flex; align-items: center; gap: 1px; }

  .pdp__star {
    display: inline-flex;
    width: 20px;
    height: 20px;
    line-height: 1;
    font-style: normal;

    /* Legacy glyph fallback */
    color: var(--pdp-ocean);
    font-size: 20px;

    &.is-filled { color: var(--pdp-ocean); }
    &.is-half    { color: var(--pdp-ocean); opacity: 0.5; }
  }

  .pdp__star-svg {
    width: 20px;
    height: 20px;
    display: block;
  }

  .pdp__rating-score {
    font-size: 14px;
    font-weight: 500;
    color: #414141;
  }

  .pdp__rating-count {
    font-size: 14px;
    color: #414141;
  }

  /* Short description */
  .pdp__short-desc {
    font-size: 14px;
    color: var(--pdp-grey-d);
    line-height: 1.4;
    a {
      color: #414141;
    }
  }

  .pdp__more-details {
    font-size: 14px;
    color: #414141;
    text-decoration: underline;
    display: block;
    margin-left: 0px;

  }

  /* ── Spec rows — label stacked above value ── */
  .pdp__specs {
    display: block;
    margin: 32px 0 0;
    padding: 0;
    border-top: 1px solid #39323B;
    border-bottom: 1px solid #39323B;
  }

  .pdp__spec-row {
    display: block;
    padding: 14px 8px;
    border-bottom: 1px solid rgba(57, 50, 59, 0.25);
    margin: 0;

    dt {
      font-size: 14px;
      font-weight: 500;
      color: #414141;
      margin: 0 0 2px;
      display: block;
    }

    dd {
      font-size: 14px;
      color: var(--pdp-grey-d);
      margin: 0;
      display: block;
    }
  }

  /* ── Size picker ── */
  .pdp__sizes { margin-top: 13px; }

  .pdp__sizes-label {
    font-size: 14px;
    color: var(--pdp-grey-d);
    margin-bottom: 10px;
    display: block;
  }

  .pdp__size-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .pdp__size-btn {
    display: inline-block;
    border: 1px solid var(--pdp-border);
    background: none;
    appearance: none;
    padding: 10px 14px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: lowercase;
    color: var(--pdp-ocean);
    cursor: pointer;
    transition: border-color 0.15s;
    line-height: 1;
    @media only screen and (max-width: 600px) {
      font-size: 11px;
      font-weight: 300;
    }

    &:hover:not(.is-unavailable) { border-color: var(--pdp-ocean); }

    &.is-selected { border-color: var(--pdp-ocean); border-width: 2px; }

    &.is-unavailable {
      background: #EEE;
      color: var(--pdp-grey-m);
      cursor: not-allowed;
      position: relative;
      border-color: transparent;

      &::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(
          to bottom right,
          transparent calc(50% - 0.5px),
          var(--pdp-border) calc(50% - 0.5px),
          var(--pdp-border) calc(50% + 0.5px),
          transparent calc(50% + 0.5px)
        );
      }
    }
  }

  /* ── Price ── */
  .pdp__price-wrap { margin-top: 8px; }

  .pdp__price-note {
    font-size: 14px;
    color: var(--pdp-grey-d);
    line-height: 1.2;
    margin-bottom: 10px;
    display: block;
  }

  .pdp__price {
    font-size: 24px;
    font-weight: 300;
    color: #414141;
    line-height: 1.3;
    min-height: 1.3em;
    display: block;

    .woocommerce-Price-amount { font-size: 24px; }
  }

  .pdp__price-from { font-size: 14px; }

  /* ── Cart form ── */
  .pdp__cart-form { margin-top: 0; display: block; }

  .pdp__recycling { margin-top: 24px; }

  .pdp__recycling-label {
    font-size: 14px;
    color: var(--pdp-grey-d);
    margin-bottom: 12px;
    display: block;
    line-height: 1.2;
  }

  /* ── Custom radio (recycling Yes/No) ── */
  .pdp__radio-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--pdp-grey-d);
    margin-right: 10px;
    cursor: pointer;
    line-height: 1.2;
    user-select: none;

    input[type="radio"] {
      appearance: none;
      -webkit-appearance: none;
      width: 24px;
      height: 24px;
      border: 1.5px solid var(--pdp-ocean);
      border-radius: 50%;
      background: #fff;
      margin: 0;
      padding: 0;
      flex-shrink: 0;
      position: relative;
      cursor: pointer;
      transition: border-color 0.15s;

      &:checked {
        border-color: var(--pdp-ocean);

        &::after {
          content: '';
          position: absolute;
          inset: 2px;
          border-radius: 50%;
          background: var(--pdp-ocean);
        }
      }

      &:focus-visible {
        outline: 2px solid var(--pdp-ocean);
        outline-offset: 2px;
      }
    }
  }

  /* ── Custom checkbox (residential confirm) ── */
  .pdp__residential {
    display: flex;
    align-items: start;
    gap: 12px;
    font-size: 14px;
    line-height: 1.4;
    margin-top: 30px;
    cursor: pointer;
    color: var(--pdp-ocean);
    user-select: none;
    position: relative;
  }

  .pdp__residential input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .pdp__residential-icon {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .pdp__residential-svg {
    display: block;
    width: 24px;
    height: 24px;
  }

  .pdp__residential-svg--checked {
    display: none;
  }

  .pdp__residential input[type="checkbox"]:checked + .pdp__residential-icon .pdp__residential-svg--checked {
    display: block;
  }

  .pdp__residential input[type="checkbox"]:checked + .pdp__residential-icon .pdp__residential-svg--unchecked {
    display: none;
  }

  .pdp__residential input[type="checkbox"]:focus-visible + .pdp__residential-icon {
    outline: 2px solid var(--pdp-ocean);
    outline-offset: 2px;
    border-radius: 3px;
  }

  .pdp__ctas {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 27px;
  }

  /* ── Buttons ── */
  .pdp__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 342px;
    height: 50px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    border: none;
    appearance: none;
    transition: box-shadow 0.2s;
    line-height: 1;

    &.pdp__btn--primary {
      background: var(--pdp-ocean);
      color: #fff;

      &:hover {
        text-decoration: underline;
        text-underline-offset: 3px;
        font-weight: 600;
        box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.3);
      }
    }

    &.pdp__btn--outline {
      background: #fff;
      color: var(--pdp-ocean);
      border: 1px solid var(--pdp-ocean);

      &:hover {
        text-decoration: underline;
        text-underline-offset: 3px;
        font-weight: 600;
        box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.3);
      }
    }

    &.pdp__btn--light {
      background: var(--pdp-pebble);
      color: var(--pdp-ocean);

      &:hover {
        text-decoration: underline;
        text-underline-offset: 3px;
        font-weight: 600;
        box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.3);
      }
    }

    &[disabled],
    &:disabled { opacity: 0.4; cursor: not-allowed; }
  }

  .pdp__find-store { margin-top: 24px; }

  .pdp__find-store-note {
    font-size: 14px;
    color: var(--pdp-grey-d);
    margin-bottom: 16px;
    line-height: 1.4;
    display: block;
  }

  /* ============================================================
     ACCORDIONS
     ============================================================ */
  .pdp__accordions {
    padding: 10px 0 30px;
    background: var(--pdp-ivory);
  }

  .pdp__accordions-inner {
    max-width: 988px;
    margin: 0 auto;

  }

  .pdp__accordion {
    border-top: 1px solid #666666;

    &:last-child { border-bottom: 1px solid #666666; }
  }

  .pdp__accordion-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px;
    background: none;
    border: none;
    appearance: none;
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    color: #414141;
    text-align: left;
    cursor: pointer;
    line-height: 1.4;

    &:hover { color: var(--pdp-ocean); }

    &[aria-expanded="true"] .pdp__accordion-arrow { transform: rotate(180deg); }
  }

  .pdp__accordion-arrow { flex-shrink: 0; transition: transform 0.2s ease; }

  .pdp__accordion-content {
    padding: 0 22px 24px;
    min-width: 0;
    max-width: 100%;

    &[hidden] { display: none; }
  }

  .pdp__accordion-body {
    font-size: 14px;
    color: var(--pdp-grey-d);
    line-height: 1.6;
    max-width: 100%;
    overflow-wrap: break-word;

    img,
    video,
    iframe,
    table {
      max-width: 100%;
    }

    .dim {
      max-width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }

    .dim__table {
      width: max-content;
      min-width: 100%;
    }
  }

  .pdp__dimensions-table-subtext {
    margin-bottom: 20px;
    color: #666666;
  }

  .pdp__dimensions-table .dim {
    margin-top: 0;
  }

  .pdp__accordion-body.image-text-container {
    display: grid;
    grid-template-columns: 352fr 451fr;
    gap: 127px;
    @media only screen and (max-width: 1050px) {
      gap: 40px;
    }

    @media only screen and (max-width: 500px) {
      grid-template-columns: minmax(0, 1fr);
    }

    .subtext,
    .image-container {
      min-width: 0;
    }

    .pdp__accordion-image {
      display: block;
      width: 100%;
      height: auto;
    }

    @media only screen and (max-width: 1050px) {
      gap: 40px;
    }

    @media only screen and (max-width: 500px) {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  .pdp__accordion-body.pdp__dimensions-table .dim {
    max-width: 462px;
    color: #414141;
  }

  .pdp__accordion-body.pdp__dimensions-table .dim__table {
    border-collapse: collapse;
    border-spacing: 0;
  }

  .pdp__accordion-body.pdp__dimensions-table .dim th,
  .pdp__accordion-body.pdp__dimensions-table .dim td {
    padding: 10px;
    border: none;
  }

  .pdp__accordion-body.pdp__dimensions-table .dim thead th {
    background: #455146;
    font-weight: 400;
    color: #fff;
  }

  .pdp__accordion-body.pdp__dimensions-table .dim tbody td {
    border-bottom: 1px solid rgba(136, 136, 136, 1);
  }

  /* ── Feature cards (flexible content layout) ── */
  .pdp__feature-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding-bottom: 4px;
  }

  .pdp__feature-card {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--pdp-green);
    min-height: 124px;
    flex: 1 1 calc(50% - 8px);
    min-width: 280px;
    max-width: 100%;
    overflow: hidden;

    @media only screen and (max-width: 640px) {
      flex: 1 1 100%;
      min-width: 0;
    }
  }

  .pdp__feature-card-icon {
    flex-shrink: 0;
    width: 94px;
    display: flex;
    align-items: center;
    justify-content: center;
    i {
      width: 59px;
      height: 59px;
      object-fit: contain;
      border-radius: 50%;
      background-color: white;
      border: 1px solid black;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 25px;
    }
    img {
      width: 59px;
      height: 59px;
      object-fit: contain;
      border-radius: 50%;
    }
  }

  .pdp__feature-card-body {
    flex: 1;
    padding: 16px 16px 16px 0;
  }

  .pdp__feature-card-name {
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    line-height: 1.3;
    margin: 0 0 4px;
  }

  .pdp__feature-card-desc {
    font-size: 14px;
    font-weight: 300;
    color: #fff;
    line-height: 1.4;
    margin: 0;
    opacity: 0.85;
  }

  .pdp__layers-images {
    display: flex;
    gap: 20px;

    img { max-width: 100%; height: auto; }
  }

  .pdp__dims-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 32px;
    padding: 0;
    margin: 0;

    & > div { display: contents; }

    dt {
      font-size: 14px;
      font-weight: 500;
      color: #414141;
    }

    dd {
      font-size: 14px;
      color: var(--pdp-grey-d);
      text-align: right;
      margin: 0;
    }
  }

  /* ============================================================
     COMMITMENT STRIP
     ============================================================ */
  .pdp__commitment {
    background: var(--pdp-green);
    min-height: 390px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 40px;
  }

  .pdp__commitment-inner {
    max-width: var(--pdp-max);
    width: 100%;
    margin: 0 auto;
  }

  .pdp__commitment-heading {
    font-family: "new-spirit", serif;
    font-size: 32px;
    font-weight: 500;
    color: #FBF8F4;
    text-align: center;
    margin: 0 0 48px;
    line-height: 1.2;
      @media only screen and (max-width: 500px) {
    font-size: 18px !important;
  }
  }

  .pdp__commitment-cols {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 48px;
    @media only screen and (max-width: 500px) {
      margin-left: -25%;
    }
  }

  .pdp__commitment-item {
    display: flex;
    align-items: center;
    gap: 24px;
    flex: 0 0 auto;
  }

  .pdp__commitment-img {
    flex-shrink: 0;
    width: 120px;

    img {
      width: 100%;
      height: auto;
      display: block;
      transform: rotate(var(--rot, 0deg));
    }
  }

  .pdp__commitment-text {
    width: 226px;
    text-align: center;

    h3 {
      font-family: "new-spirit", serif;
      font-size: 24px;
      font-weight: 300;
      color: #FBF8F4;
      margin: 0 0 10px;
      line-height: 1.3;
       @media only screen and (max-width: 500px) {
        font-size: 20px;
      }
    }

    p {
      font-size: 16px;
      font-weight: 300;
      color: #FBF8F4;
      line-height: 1.5;
      margin: 0;
       @media only screen and (max-width: 500px) {
        font-size: 14px
        }
    }
  }

  /* Reviews section uses the shared .fp-reviews markup + styles from
     flexible.css. The .fp-reviews descendants are exempted from this
     block's `all: revert` and element resets at the top of the file.
     Only override here: swap the background image for the PDP-specific
     one. Nesting under `.pdp-mattress .pdp` gives this rule specificity
     0,3,0 — beats the shared rule's 0,2,0 cleanly. */
  .fp-reviews {
    background-color: white !important;
    background-image: url('../images/single-reviews-background.png');
    background-size: cover;
    background-repeat: no-repeat;
    .fp-reviews__heading {
      color: #39323B !important;
    }
    /* Invert the CTA: dark bg + ivory text (opposite of the flexible
       content version, which is ivory bg + dark text). */
    .fp-reviews__btn {
      background: #39323B;
      color: #FBF8F4;
      transition: .4s ease-in-out;
    }
    .fp-reviews__btn:hover {
      text-decoration: underline;
      text-underline-offset: 3px;
      font-weight: 600;
      box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.3);
    }
  }

  /* ============================================================
     BUILD YOUR OWN BED
     ============================================================ */
  .pdp__bed-builder {
    background: var(--pdp-heather);
    position: relative;
    height: 622px;
    overflow: hidden;
  }

  /* White left panel */
  .pdp__bed-builder::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 50%;
    background: #fff;
  }

  .pdp__bed-builder-photo {
    position: absolute;
    left: 4%;
    top: 0;
    width: 42%;
    height: 100%;
    overflow: hidden;
    z-index: 55;
    img {
      position: absolute;
      left: -2.92%;
      top: 4.53%;
      width: 108.92%;
      height: 79.53%;
      object-fit: cover;
      object-position: center top;
    }
  }

  .pdp__bed-builder-tear {
    position: absolute;
    left: calc(52% - 391px);
    top: -14px;
    width: 391px;
    height: calc(100% + 35px);
    z-index: 0;
    pointer-events: none;
    filter: drop-shadow(4px 0 2px rgba(0,0,0,0.25));

    img {
      width: 100%;
      height: 100%;
      object-fit: fill;
      display: block;
    }
  }

  .pdp__bed-builder-panel {
    position: absolute;
    left: 52%;
    top: 0;
    width: 48%;
    height: 100%;
    padding: 103px 56px 40px;
    display: flex;
    flex-direction: column;
    z-index: 3;
  }

  .pdp__bed-builder-heading {
    font-family: "new-spirit", serif;
    font-size: 32px;
    font-weight: 500;
    color: #FBF8F4;
    margin: 0 0 10px;
    line-height: 1.2;
  }

  .pdp__bed-builder-desc {
    font-size: 16px;
    font-weight: 300;
    color: #FBF8F4;
    line-height: 1.5;
    margin: 0 0 20px;
    max-width: 483px;
  }

  .pdp__bed-builder-form { display: contents; }

  /* Ivory "Add to cart" button — matches Figma */
  .pdp__btn--ivory {
    background: white;
    color: var(--pdp-heather);
    border: 1px solid var(--pdp-pebble);
    width: 331px;

    &:hover {
      text-decoration: underline;
      text-underline-offset: 3px;
      font-weight: 600;
      box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.3);
    }
  }

  .pdp__bed-builder-submit { margin-top: 20px; }

  /* ── BedBuilder React overrides (within PDP context) ── */
  /* The bb__container is mounted inside #pdp-bed-builder. Hide everything
     that isn't the divan/headboard/fabric selection list — recycling,
     size-guide, gallery, totals, etc. are all handled by the main cart. */
  #pdp-bed-builder .bb__container {
    display: contents;
  }

  #pdp-bed-builder .bb__title,
  #pdp-bed-builder .bb__trustpilot,
  #pdp-bed-builder .bb__prices,
  #pdp-bed-builder .bb__description,
  #pdp-bed-builder .bb__selectitems--build-a-bed,
  #pdp-bed-builder .size-guide,
  #pdp-bed-builder .size-popup,
  #pdp-bed-builder .mattress_recycling,
  #pdp-bed-builder .recycle-option,
  #pdp-bed-builder .mattress_recycling__answerbox,
  #pdp-bed-builder .domestic-disclaimer-notice,
  #pdp-bed-builder .bb__gallery,
  #pdp-bed-builder .bb__disclaimer,
  #pdp-bed-builder .product-gallery,
  #pdp-bed-builder .lightbox__container,
  #pdp-bed-builder .bb__container > p {
    display: none !important;
  }

  #pdp-bed-builder .bb__selectitems {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 369px;
    width: 100%;
  }

  /* Style the selection boxes to match Figma dropdowns */
  #pdp-bed-builder .bb__selection-box {
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #fff;
    border-radius: 2px;
    height: 51px;
    min-height: 51px;
    max-width: 369px;
    width: 100%;
    padding: 0 16px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    font-family: "itc-avant-garde-gothic-pro", sans-serif;
    font-size: 16px;
    font-weight: 300;
    color: var(--pdp-ocean);
    line-height: 1.2;
    transition: border-color 0.15s;

    &:hover { border-color: var(--pdp-ocean); }
  }

  /* Left-hand label inside the dropdown */
  #pdp-bed-builder .bb__selection-box--lhs {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 16px;
    color: var(--pdp-ocean);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #pdp-bed-builder .bb__selection-box--selected-item {
    font-size: 14px;
    color: var(--pdp-grey-d);
    font-weight: 400;
  }

  /* The default ">" chevron — replace with a styled SVG-like arrow */
  #pdp-bed-builder .bb__selection-box > div:last-child:not(.bb__selection-box--lhs):not(.bb__image) {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: transparent;            /* hide the ">" glyph */
    position: relative;

    &::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 10px;
      height: 10px;
      border-right: 2px solid var(--pdp-ocean);
      border-bottom: 2px solid var(--pdp-ocean);
      transform: translate(-60%, -75%) rotate(45deg);
    }
  }

  /* Preview thumbnail (when an item is chosen) */
  #pdp-bed-builder .bb__image {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background-color: var(--pdp-pebble);
  }

  /* ── React component restore rules ──────────────────────────────────────────
     all: revert above (specificity 0-2-0) is beaten by these ID-prefixed rules
     (specificity 1-1-0 or higher), restoring the properties the components need.
     ───────────────────────────────────────────────────────────────────────── */

  /* 3D Viewer: restore the Loader overlay so it stays inside the canvas */
  #pdp-3d-viewer .loading-3d-screen {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgba(255,255,255,0.8);
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-in-out;
    width: 100%;
    height: 100%;

    &.loading { opacity: 1; pointer-events: all; }

    p { color: #1F325B; margin-top: 10px; }

    img { max-height: 30px; }

    .image-loader {
      display: inline-block;
      position: relative;

      &::after {
        content: '';
        display: block;
        position: absolute;
        inset: 0;
        background: rgba(255,255,255,0.8);
        left: var(--loader-progress);
      }
    }
  }

  /* 3D viewer canvas container */
  #pdp-3d-viewer .threedviewer__viewer {
    position: relative;
    width: 100%;
    height: 100%;
  }

  /* SlidePanel overlay — mirrors BedBuilder.scss but scoped for pdp-mattress
     (BedBuilder.scss only targets body .elementor .bb, not this page) */
  #pdp-bed-builder .bb__showitems {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 99999;
    pointer-events: none;

    &.show { pointer-events: all; }
  }

  #pdp-bed-builder .bb__showitems-holder {
    position: absolute;
    top: 0;
    right: 0;
    transform: translateX(100%);
    transition: transform 0.4s ease-in-out;
    max-width: 400px;
    width: 100%;
    bottom: 0;
    background-color: #fff;
    border-left: 1px solid #ddd;
    box-shadow: -3px 0 10px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* Panel content wrapper — restore styles for the React-rendered selector list */
  #pdp-bed-builder .bb__select-item-panel {
    padding: 28px 24px 20px;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
    background: #fff;
    font-family: "itc-avant-garde-gothic-pro", sans-serif;
    color: var(--pdp-ocean);
  }

  #pdp-bed-builder .bb__select-item-panel--title {
    font-family: "new-spirit", serif;
    font-size: 22px;
    font-weight: 500;
    color: var(--pdp-ocean);
    margin: 0 0 20px;
    padding: 0;
    line-height: 1.2;
  }

  #pdp-bed-builder .bb__select__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
  }

  #pdp-bed-builder .bb__select__list li {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--pdp-border);
    border-radius: 0px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.15s;
    margin: 0;
    color: var(--pdp-ocean);
  }

  #pdp-bed-builder .bb__select__list li:hover {
    border-color: var(--pdp-ocean);
  }

  #pdp-bed-builder .bb__select__list li.selected {
    border: 2px solid var(--pdp-ocean);
    padding: 11px 13px;
  }

  #pdp-bed-builder .bb__select__list li.disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  #pdp-bed-builder .bb__select__list li > div:first-child {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 14px;
    font-weight: 500;
  }

  #pdp-bed-builder .bb__select__price {
    font-size: 13px;
    font-weight: 400;
    color: var(--pdp-grey-d);
  }

  #pdp-bed-builder .bb__select-item-panel--dimensions {
    font-size: 12px;
    font-weight: 300;
    color: var(--pdp-grey-m);
    line-height: 1.3;
  }

  #pdp-bed-builder .bb__select__list .bb__image {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 2px;
    background-color: var(--pdp-pebble);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  /* Loading state inside the slide drawer */
  #pdp-bed-builder .bb__showitems-loader {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 40px 24px;
    color: var(--pdp-grey-d);
    font-size: 14px;
    text-align: center;
  }

  #pdp-bed-builder .bb__spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--pdp-grey-l);
    border-top-color: var(--pdp-ocean);
    border-radius: 50%;
    animation: pdp-spin 0.8s linear infinite;
  }

  @keyframes pdp-spin {
    to { transform: rotate(360deg); }
  }

  /* Back / close button */
  #pdp-bed-builder .bb__select-item-panel > button {
    margin-top: 16px;
    padding: 12px 20px;
    background: #fff;
    border: 1px solid var(--pdp-ocean);
    color: var(--pdp-ocean);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s;
    appearance: none;
    line-height: 1;
    border-radius: 0px !important;
  }

  #pdp-bed-builder .bb__select-item-panel > button:hover {
    background: var(--pdp-pebble);
  }

  /* When SlidePanel is open the holder slides in */
  #pdp-bed-builder .bb__showitems.show .bb__showitems-holder {
    transform: translateX(0);
  }

  /* 3D viewer mount — fills the photo column absolutely */
  #pdp-3d-viewer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  /* Ensure the threedviewer canvas fills its container on the PDP.
     Includes the .mobile modifier — the component adds it on small
     viewports, and its scss forces a fixed 300px height + border +
     margin that broke the mount inside our 290px photo container. */
  #pdp-3d-viewer .threedviewer,
  #pdp-3d-viewer .threedviewer.full,
  #pdp-3d-viewer .threedviewer.mobile {
    width: 100%;
    height: 100%;
    background-color: #fff;

    .threedviewer__viewer {
      position: relative;
      width: 100%;
      height: 100%;
      border: none;
      border-radius: 0;
      margin: 0;
    }
  }

  /* TopButtonsAndMobile3D renders a second inline 3D viewer for the
     standalone bed-builder mobile flow. On the PDP we already have the
     dedicated #pdp-3d-viewer in the photo column — hide the inline copy
     so we don't end up with two viewers stacked. */
  #pdp-bed-builder .threedviewer.mobile { display: none; }

  /* ============================================================
     YOU MAY ALSO LIKE
     ============================================================ */
  .pdp__related {
    background: var(--pdp-ivory);
    padding: 60px 0;
    @media only screen and (max-width: 500px) {
      padding: 20px 0px;
      padding-bottom: 52px;
    }
  }

  .pdp__related-inner {
    max-width: var(--pdp-max);
    margin: 0 auto;
    padding: 0 91px;
    @media only screen and (max-width: 500px) {
      padding: 0 15px !important;  
    }
  }

  .pdp__related-heading {
    font-size: clamp(24px, 2.5vw, 32px);
    text-align: center;
    margin-bottom: 30px;
   font-weight: 500;
   font-family: 'new-spirit', serif;
  }

  .pdp__related-grid {
    display: grid;
    grid-template-columns: repeat(3, 352px);
    gap: 33px;
    justify-content: center;
    @media only screen and (max-width: 500px) {
      gap: 17px;
    }
  }

  /* ── Product card styles live in product-card.css (globally enqueued) ── */

  /* ============================================================
     RESPONSIVE
     ============================================================ */
  @media (max-width: 1100px) {
    .pdp__hero { grid-template-columns: 1fr 1fr; }
    .pdp__related-inner { padding: 0 40px; }
    .pdp__commitment-cols { gap: 16px; }
    .pdp__commitment-text { width: 200px; }
  }

  @media (max-width: 1025px) {
    .pdp__hero { grid-template-columns: 1fr; }
    .pdp__gallery { padding: 16px 24px; }
    .pdp__panel { padding: 24px; }
    .pdp__btn { width: 100%; }
    .pdp__commitment { padding: 40px 24px; min-height: auto; }
    .pdp__commitment-heading { font-size: 24px; margin-bottom: 32px; }
    .pdp__commitment-cols { flex-direction: column; gap: 32px; }
    .pdp__commitment-item { gap: 20px; }
    .pdp__commitment-text { width: auto; text-align: left; }
    .pdp__related-grid { grid-template-columns: 1fr 1fr; }
  }

  @media (max-width: 600px) {
    .pdp__related-grid { grid-template-columns: 1fr; }
  }

  /* ── Build-your-own-bed: stacked mobile layout (photo on top, heather
     panel below with centred content) per Figma 103:10103 ─────────── */
  @media (max-width: 768px) {
    .pdp__bed-builder {
      height: auto;
      display: flex;
      flex-direction: column;
    }

    /* Drop the desktop's white left-half pseudo */
    .pdp__bed-builder::before { display: none; }

    .pdp__bed-builder-photo {
      position: relative;
      left: auto;
      top: auto;
      width: 100%;
      height: 290px;
      background: #fff;
      z-index: 1;

      /* Whatever the 3D viewer renders (canvas / img) fills the box. */
      & > * { width: 100%; height: 100%; }

      img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
      }
    }

    /* Swap the desktop tear SVG for a mobile-specific horizontal tear that
       sits between the white photo above and the heather panel below.
       NOTE: keep all background-* declarations BEFORE any nested rule —
       some CSS-nesting parsers drop properties that appear after a nested
       selector, which silently broke the background-image. */
    .pdp__bed-builder-tear {
      position: relative;
      left: auto;
      top: auto;
      width: 100%;
      height: 32px;
      filter: none;
      pointer-events: none;
      z-index: 2;
      background-image: url('../images/bed-builder-tear-mobile.svg');
      background-repeat: no-repeat;
      background-position: center bottom;
      background-size: 100% auto;

      /* Hide the desktop SVG — replaced by the mobile asset above. */
      img { display: none; }
    }

    .pdp__bed-builder-panel {
      position: relative;
      left: auto;
      top: auto;
      width: 100%;
      height: auto;
      padding: 30px 22px 40px;
      align-items: center;
      text-align: center;
      z-index: 2;
    }

    .pdp__bed-builder-heading {
      font-size: 20px;
      text-align: center;
      margin: 0 0 14px;
    }

    .pdp__bed-builder-desc {
      font-size: 14px;
      text-align: center;
      max-width: 100%;
      margin: 0 auto 24px;
    } 
    #pdp-bed-builder {
      width: 100%;
    }
    /* React-rendered selection boxes inside #pdp-bed-builder */
    #pdp-bed-builder .bb__selectitems {
      margin: 0 auto;
      width: 100%;
      max-width: 100%;
      gap: 8px;
    }

    /* Match the Figma: 59px-tall white field with centred prompt text */
    #pdp-bed-builder .bb__selection-box {
      height: 59px;
      min-height: 59px;
      max-width: 100%;
      justify-content: center;       /* centre the prompt text */
      position: relative;            /* anchor the absolute chevron */
      padding: 0 40px;               /* leave room for the chevron on the right */
      text-align: center;
    }

    #pdp-bed-builder .bb__selection-box--lhs {
      flex: 0 0 auto;
      align-items: center;
      text-align: center;
    }

    /* Move the chevron icon to an absolute position on the right edge */
    #pdp-bed-builder .bb__selection-box svg,
    #pdp-bed-builder .bb__selection-box .bb__selection-box--rhs {
      position: absolute;
      right: 14px;
      top: 50%;
      transform: translateY(-50%);
    }

    .pdp__btn--ivory { width: 200px; }
    .pdp__bed-builder-submit {
      align-self: center;
      margin-top: 24px;
    }
  }

  /* ── Mobile gallery: arrows overlay the main image, dot pagination
     replaces the thumbnail strip ──────────────────────────────── */
  @media (max-width: 768px) {
    /* Override the desktop 1/1 aspect — that made the slide a giant
       square on phones. Match the Figma's slightly-landscape framing. */
    .pdp__gallery { padding: 16px; padding-left: 40px; padding-right: 40px; overflow: hidden; }
    .pdp__gallery-main {
      aspect-ratio: 6 / 5;
      max-height: none;
    }

    /* Hide the thumbnail strip entirely (its parent row stays in flow
       via display: contents so its arrow children can still render). */
    .pdp__gallery-thumbs { display: none; }
    .pdp__gallery-thumbs-row { display: contents; }

    /* Lift the prev/next arrows onto the main image. They resolve against
       .pdp__gallery (already position: relative). */
    .pdp__gallery-arrow {
      position: absolute;
      top: calc(50% - 15px); /* compensate for pagination row below */
      transform: translateY(-50%);
      margin: 0;
      z-index: 5;
      color: var(--pdp-ocean);
    }
    .pdp__gallery-arrow[data-gallery-prev] { left: 8px; right: auto; }
    .pdp__gallery-arrow[data-gallery-next] { right: 8px; left: auto; }

    .pdp__gallery-pagination { display: flex; bottom: 0px !important; }
  }

} /* end .pdp-mattress .pdp */