/*
 * CFS2030 PDP vertical rhythm contract.
 * Scope is deliberately limited to the PDP shell so PLP, blog, account and
 * global heading semantics remain untouched.
 */
.pdp2030,
body.cfs2030-shell:has(#pdp-main-content.pdp2030) {
  /* Adjacent sections contribute 20px each, producing a predictable 40px
   * content-to-next-heading transition without one wrapper owning it all. */
  --pdp-rhythm-section-top: 20px;
  --pdp-rhythm-section-bottom: 20px;
  --pdp-rhythm-heading-gap: 16px;
  --pdp-rhythm-compound-gap: 8px;
  --pdp-rhythm-compact-top: 20px;
  --pdp-rhythm-compact-bottom: 20px;
}

/* Section family: content, commerce and supporting modules. Natural height
 * prevents optional modules from reserving stale fixed-height whitespace. */
#pdp-main-content.pdp2030[data-pdp-family] > :is(
  .product-highlights,
  .product-info-section,
  .bundle-section,
  .collection-section,
  .brand-section,
  .reviews-section,
  .trustpilot-section,
  .product-glance-section,
  .faq-section,
  .cfs-ugc-section,
  .similar-section,
  .guides-section,
  .recent-section,
  .explore-dining
),
#pdp-main-content.pdp2030[data-pdp-family] .pdp-information > .product-info-section {
  box-sizing: border-box;
  height: auto !important;
  min-height: 0 !important;
  margin-block: 0 !important;
  padding-top: var(--pdp-rhythm-section-top) !important;
  padding-bottom: var(--pdp-rhythm-section-bottom) !important;
}

/* Core information sections own their spacing. Child cards/grids start at a
 * single heading gap; browser h2 defaults and legacy 20/24px rules cannot add
 * a second gap. */
#pdp-main-content.pdp2030[data-pdp-family] .product-info-section > h2,
#pdp-main-content.pdp2030[data-pdp-family] .product-materials .content-wrap > h2,
#pdp-main-content.pdp2030[data-pdp-family] .brand-section h2,
#pdp-main-content.pdp2030[data-pdp-family] .reviews-section .content-wrap > h2,
#pdp-main-content.pdp2030[data-pdp-family] .trustpilot-section .content-wrap > h2,
#pdp-main-content.pdp2030[data-pdp-family] .faq-section .content-wrap > h2,
#pdp-main-content.pdp2030[data-pdp-family] .guides-section .content-wrap > h2,
#pdp-main-content.pdp2030[data-pdp-family] .recent-section .content-wrap > h2 {
  margin: 0 0 var(--pdp-rhythm-heading-gap) !important;
}

#pdp-main-content.pdp2030[data-pdp-family] .cfs-ugc-section .cfs-section-heading {
  height: auto !important;
  min-height: 0 !important;
  margin: 0 0 var(--pdp-rhythm-heading-gap) !important;
}
#pdp-main-content.pdp2030[data-pdp-family] .cfs-ugc-section .cfs-section-heading > h2 {
  margin: 0 !important;
}

/* Product Highlights uses a flex column. The parent gap is the sole source of
 * heading-to-card spacing, avoiding margin + gap double spacing. */
#pdp-main-content.pdp2030[data-pdp-family] .product-highlights .content-wrap {
  row-gap: var(--pdp-rhythm-heading-gap) !important;
}
#pdp-main-content.pdp2030[data-pdp-family] .product-highlights .content-wrap > h2 {
  margin: 0 !important;
}

/* Frequently Bought Together is a compound header: heading, short intro,
 * then the compact bundle UI. */
#pdp-main-content.pdp2030[data-pdp-family] .bundle-section .content-wrap {
  row-gap: 0 !important;
}
#pdp-main-content.pdp2030[data-pdp-family] .bundle-section .content-wrap > h2 {
  margin: 0 0 var(--pdp-rhythm-compound-gap) !important;
}
#pdp-main-content.pdp2030[data-pdp-family] .bundle-section .bundle-intro {
  margin: 0 0 var(--pdp-rhythm-heading-gap) !important;
}

/* Carousel heading rows include controls, so the row—not the h2—owns the
 * standard gap to the rail. */
#pdp-main-content.pdp2030[data-pdp-family] :is(.collection-section, .similar-section) .pdp-rail-heading {
  margin: 0 0 var(--pdp-rhythm-heading-gap) !important;
}
#pdp-main-content.pdp2030[data-pdp-family] :is(.collection-section, .similar-section) .pdp-rail-heading > h2 {
  margin: 0 !important;
}
#pdp-main-content.pdp2030[data-pdp-family] :is(.collection-section, .similar-section) .figma-product-grid {
  margin-top: 0 !important;
}

/* Questions has eyebrow + heading + explanation. Treat all three as one
 * header and keep the section-to-list transition on the normal scale. */
#pdp-main-content.pdp2030[data-pdp-family] .product-glance-heading {
  margin: 0 0 var(--pdp-rhythm-heading-gap) !important;
}
#pdp-main-content.pdp2030[data-pdp-family] .product-glance-heading > small {
  display: block;
  margin: 0 0 var(--pdp-rhythm-compound-gap) !important;
}
#pdp-main-content.pdp2030[data-pdp-family] .product-glance-heading > h2 {
  margin: 0 0 var(--pdp-rhythm-compound-gap) !important;
}
#pdp-main-content.pdp2030[data-pdp-family] .product-glance-heading > p {
  margin: 0 !important;
}

/* Explore More is intentionally compact; flex gap is its sole
 * heading-to-chip spacing source. */
#pdp-main-content.pdp2030[data-pdp-family] > .explore-dining {
  padding-top: var(--pdp-rhythm-compact-top) !important;
  padding-bottom: var(--pdp-rhythm-compact-bottom) !important;
}
#pdp-main-content.pdp2030[data-pdp-family] .explore-dining .content-wrap {
  row-gap: var(--pdp-rhythm-heading-gap) !important;
}
#pdp-main-content.pdp2030[data-pdp-family] .explore-dining .content-wrap > h2 {
  margin: 0 !important;
}

/* Recently Viewed is rendered just outside the PDP root. It participates in
 * the contract only when the same page contains the PDP shell. */
body.cfs2030-shell:has(#pdp-main-content.pdp2030)
  #recentlyViewedContainer.cfs-recently-viewed {
  box-sizing: border-box;
  margin-block: 0 !important;
  padding-top: var(--pdp-rhythm-section-top) !important;
  padding-bottom: var(--pdp-rhythm-section-bottom) !important;
}
body.cfs2030-shell:has(#pdp-main-content.pdp2030)
  #recentlyViewedContainer #cfs-recently-viewed-title {
  margin-block: 0 !important;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .pdp2030,
  body.cfs2030-shell:has(#pdp-main-content.pdp2030) {
    --pdp-rhythm-section-top: 16px;
    --pdp-rhythm-section-bottom: 16px;
    --pdp-rhythm-heading-gap: 14px;
    --pdp-rhythm-compact-top: 16px;
    --pdp-rhythm-compact-bottom: 16px;
  }
}

@media (max-width: 767px) {
  .pdp2030,
  body.cfs2030-shell:has(#pdp-main-content.pdp2030) {
    --pdp-rhythm-section-top: 14px;
    --pdp-rhythm-section-bottom: 14px;
    --pdp-rhythm-heading-gap: 12px;
    --pdp-rhythm-compound-gap: 6px;
    --pdp-rhythm-compact-top: 14px;
    --pdp-rhythm-compact-bottom: 14px;
  }
}

/* A few legacy responsive blocks are emitted after the stylesheet link and
 * use !important. Keep the contract authoritative for those known PDP-only
 * exceptions without broadening the scope to global headings or components. */
:is(#pdp-rhythm-contract#pdp-rhythm-contract#pdp-rhythm-contract#pdp-rhythm-contract#pdp-rhythm-contract#pdp-rhythm-contract#pdp-rhythm-contract#pdp-rhythm-contract#pdp-rhythm-contract#pdp-rhythm-contract#pdp-rhythm-contract#pdp-rhythm-contract#pdp-rhythm-contract#pdp-rhythm-contract#pdp-rhythm-contract#pdp-rhythm-contract, html)
  body.cfs2030-shell #pdp-main-content.pdp2030[data-pdp-family] > :is(.product-highlights, .reviews-section) {
  padding-top: var(--pdp-rhythm-section-top) !important;
  padding-bottom: var(--pdp-rhythm-section-bottom) !important;
}
:is(#pdp-rhythm-contract#pdp-rhythm-contract#pdp-rhythm-contract#pdp-rhythm-contract#pdp-rhythm-contract#pdp-rhythm-contract#pdp-rhythm-contract#pdp-rhythm-contract#pdp-rhythm-contract#pdp-rhythm-contract#pdp-rhythm-contract#pdp-rhythm-contract#pdp-rhythm-contract#pdp-rhythm-contract#pdp-rhythm-contract#pdp-rhythm-contract, html)
  body.cfs2030-shell #pdp-main-content.pdp2030[data-pdp-family] .product-highlights .content-wrap > h2 {
  margin: 0 !important;
}
:is(#pdp-rhythm-contract#pdp-rhythm-contract#pdp-rhythm-contract#pdp-rhythm-contract#pdp-rhythm-contract#pdp-rhythm-contract#pdp-rhythm-contract#pdp-rhythm-contract#pdp-rhythm-contract#pdp-rhythm-contract#pdp-rhythm-contract#pdp-rhythm-contract#pdp-rhythm-contract#pdp-rhythm-contract#pdp-rhythm-contract#pdp-rhythm-contract, html)
  body.cfs2030-shell #pdp-main-content.pdp2030[data-pdp-family] :is(.reviews-section, .guides-section) .content-wrap > h2 {
  margin: 0 0 var(--pdp-rhythm-heading-gap) !important;
}

/* Max-quantity-one products use one compact, full-width mobile CTA. Hide only
 * their locked quantity control and release the legacy fixed row height.
 * Normal quantity PDPs keep the fixed-height, 2-column purchase row. */
@media (max-width: 767px) {
  #pdp-main-content.pdp2030[data-pdp-family]
    .cfs-purchase-basket-row:has(> .cfs-purchase-quantity input[readonly][max="1"]) {
    grid-template-columns: minmax(0, 1fr) !important;
    height: auto !important;
    min-height: 50px !important;
  }
  #pdp-main-content.pdp2030[data-pdp-family]
    .cfs-purchase-basket-row
    > .cfs-purchase-quantity:has(> input[readonly][max="1"]) {
    display: none !important;
  }
  #pdp-main-content.pdp2030[data-pdp-family]
    .cfs-purchase-basket-row:has(> .cfs-purchase-quantity input[readonly][max="1"])
    > .cfs-purchase-primary-action {
    grid-row: 1 !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }
}