/* Bench Brothers v73 FINAL STABILITY LAYER
   Loaded last. Purpose: one predictable layout on desktop/mobile and a stable visual editor. */

:root {
  --bb-photo-radius: 10px;
  --bb-safe-page: min(calc(100% - 24px), 1840px);
  --bb-safe-content: min(calc(100% - 40px), 1540px);
}

html, body { max-width: 100%; }
body { overflow-x: clip; }
main { overflow: clip; }
img, video, iframe { max-width: 100%; }

/* ---------- VISUAL EDITOR ---------- */
html.bb-edit-mode,
body.bb-edit-mode { scroll-behavior: auto !important; }
body.bb-edit-mode .preloader,
body.bb-edit-mode .page-transition { display: none !important; }
body.bb-edit-mode [data-editable-text],
body.bb-edit-mode [data-editable-image],
body.bb-edit-mode [data-editable-video],
body.bb-edit-mode [data-editable-placeholder] {
  cursor: pointer !important;
}
body.bb-edit-mode [data-editable-text]:hover,
body.bb-edit-mode [data-editable-image]:hover,
body.bb-edit-mode [data-editable-video]:hover,
body.bb-edit-mode [data-editable-placeholder]:hover {
  outline: 2px solid rgba(28,29,31,.44) !important;
  outline-offset: 3px !important;
}
body.bb-edit-mode [data-editable-text] {
  position: relative;
  z-index: 4;
}
.bb-edit-modal { z-index: 100000 !important; }
.bb-edit-modal__box--wide {
  width: min(920px, calc(100vw - 24px)) !important;
  max-height: calc(100svh - 24px) !important;
  overflow: auto !important;
}
.bb-edit-controls { align-items: end !important; }

/* ---------- SAVED TEXT STYLES ---------- */
html body[data-page] [data-editable-text] {
  min-width: 0 !important;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: normal;
}
html body[data-page] [data-editable-text][data-bb-style] {
  font-family: var(--bb-font, inherit) !important;
  color: var(--bb-color, inherit) !important;
  font-size: var(--bb-size-desktop, inherit) !important;
  font-weight: var(--bb-weight, inherit) !important;
  text-align: var(--bb-align-desktop, var(--bb-align, inherit)) !important;
  line-height: var(--bb-line-height, inherit) !important;
  letter-spacing: var(--bb-letter-spacing, inherit) !important;
}
html body[data-page] [data-bb-text-width="1"] {
  width: var(--bb-text-width-desktop, 100%) !important;
  max-width: 100% !important;
}

/* ---------- IMAGE EDITOR ---------- */
html body[data-page] [data-image-frame] {
  min-width: 0;
  max-width: 100%;
  overflow: hidden !important;
  border-radius: var(--bb-photo-radius) !important;
}
html body[data-page] [data-image-frame][data-image-custom-width="1"] {
  width: var(--bb-img-width, 100%) !important;
  inline-size: var(--bb-img-width, 100%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  background: transparent !important;
}
html body[data-page] [data-image-frame][data-image-custom-ratio="1"] {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: var(--bb-img-ratio) !important;
}
html body[data-page] [data-image-frame] > img[data-editable-image],
html body[data-page] [data-image-frame] img[data-editable-image] {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: var(--bb-img-fit, cover) !important;
  object-position: var(--bb-img-position, center center) !important;
  border-radius: inherit !important;
}

/* ---------- HEADER ---------- */
.site-header {
  width: var(--bb-safe-page) !important;
  max-width: calc(100vw - 24px) !important;
}
.nav { min-width: 0; }
.nav__link, .header-action { white-space: nowrap; }

/* ---------- HOME HERO ---------- */
body[data-page="home"] .hero-grid,
body[data-page="home"] .hero-main,
body[data-page="home"] .hero-layout,
body[data-page="home"] .hero-copy,
body[data-page="home"] .hero-main__content,
body[data-page="home"] .hero-stats,
body[data-page="home"] .hero-visual { min-width: 0 !important; }

body[data-page="home"] .hero-logo-standalone {
  max-width: 170px !important;
}
body[data-page="home"] .hero-logo-standalone > img,
body[data-page="home"] .hero-logo-standalone__image {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

/* ---------- CUSTOM ORDER BANNER ----------
   This block is a semantic section with overlay text. Never shrink the entire section
   from a saved image-width value; that was the cause of text jumping outside the photo. */
html body[data-page="home"] .full-banner,
html body[data-page="home"] .full-banner[data-image-frame],
html body[data-page="home"] .full-banner[data-image-custom-width="1"],
html body[data-page="home"] .full-banner[data-image-custom-ratio="1"] {
  width: var(--bb-safe-content) !important;
  inline-size: var(--bb-safe-content) !important;
  max-width: calc(100vw - 40px) !important;
  height: clamp(480px, 46vw, 660px) !important;
  min-height: 480px !important;
  max-height: 660px !important;
  aspect-ratio: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  position: relative !important;
  overflow: hidden !important;
  background: #1c1d1f !important;
}
html body[data-page="home"] .full-banner > img,
html body[data-page="home"] .full-banner > img[data-editable-image] {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  object-fit: var(--bb-img-fit, cover) !important;
  object-position: var(--bb-img-position, center center) !important;
}
html body[data-page="home"] .full-banner::after {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
html body[data-page="home"] .full-banner__content {
  position: absolute !important;
  left: clamp(28px, 4vw, 72px) !important;
  right: auto !important;
  top: auto !important;
  bottom: clamp(32px, 4vw, 64px) !important;
  width: min(790px, calc(100% - 112px)) !important;
  max-width: calc(100% - 112px) !important;
  margin: 0 !important;
  transform: none !important;
  z-index: 3 !important;
}
html body[data-page="home"] .full-banner__content h2 {
  position: static !important;
  width: 100% !important;
  max-width: 760px !important;
  margin: 0 !important;
  line-height: .94 !important;
  transform: none !important;
}
html body[data-page="home"] .full-banner__content p {
  position: static !important;
  width: 100% !important;
  max-width: 660px !important;
  margin: 18px 0 24px !important;
  transform: none !important;
}
html body[data-page="home"] .full-banner .option-boxes {
  z-index: 3 !important;
  pointer-events: none !important;
}

/* ---------- ABOUT ---------- */
body[data-page="about"] .about-hero,
body[data-page="about"] .about-value,
body[data-page="about"] .about-principle { min-width: 0 !important; }
body[data-page="about"] .about-hero {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr) !important;
  align-items: stretch !important;
}
body[data-page="about"] .about-hero__text {
  min-width: 0 !important;
  width: 100% !important;
  max-width: none !important;
}
body[data-page="about"] .about-hero__text .hero-title {
  width: 100% !important;
  max-width: 17ch !important;
}
body[data-page="about"] .about-hero__text .hero-text {
  max-width: 680px !important;
}

/* ---------- PRODUCT CARDS ---------- */
.product-card { min-width: 0; }
.product-card__media {
  aspect-ratio: var(--bb-img-ratio, 3 / 4) !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
}
.product-card__media > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: var(--bb-img-fit, cover) !important;
  object-position: var(--bb-img-position, center center) !important;
}

/* ---------- PRODUCT PAGE / MANY PHOTOS / VIDEO ---------- */
body[data-page="product"] .product-page,
body[data-page="product"] .product-gallery,
body[data-page="product"] .product-gallery__frame,
body[data-page="product"] .product-info { min-width: 0 !important; }
body[data-page="product"] .product-gallery__main {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: var(--bb-img-ratio, 3 / 4) !important;
  position: relative !important;
  overflow: hidden !important;
  background: #f1efec !important;
}
body[data-page="product"] .product-gallery__main > img:not([hidden]) {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: var(--bb-img-fit, contain) !important;
  object-position: var(--bb-img-position, center center) !important;
}
body[data-page="product"] .product-gallery__main > img[hidden] { display: none !important; }
body[data-page="product"] .product-gallery__active-video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 2 !important;
}
body[data-page="product"] .product-gallery__thumbs--side {
  min-width: 0 !important;
  scrollbar-width: thin;
  overscroll-behavior: contain;
}
body[data-page="product"] .product-gallery__thumbs--side button {
  overflow: hidden !important;
  box-sizing: border-box !important;
}
body[data-page="product"] .product-gallery__thumbs--side img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

@media (min-width: 821px) {
  body[data-page="product"] .product-gallery__frame {
    display: grid !important;
    grid-template-columns: 88px minmax(0, 1fr) !important;
    gap: 14px !important;
    align-items: start !important;
  }
  body[data-page="product"] .product-gallery__thumbs--side {
    display: flex !important;
    flex-direction: column !important;
    width: 88px !important;
    height: clamp(430px, 72vh, 760px) !important;
    max-height: clamp(430px, 72vh, 760px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    gap: 8px !important;
  }
  body[data-page="product"] .product-gallery__thumbs--side button {
    flex: 0 0 96px !important;
    width: 88px !important;
    height: 96px !important;
    min-height: 96px !important;
    max-height: 96px !important;
  }
}

/* ---------- PAGE TRANSITIONS: never expose a white browser canvas ---------- */
html { background: #1c1d1f; }
body { background: #fafafc; }
html.bb-nav-arrival,
html.bb-nav-arrival body,
body.is-leaving { background: #1c1d1f !important; }
.page-transition { background: transparent !important; }
.page-transition__panel { background: #1c1d1f !important; }
body.is-leaving #app { opacity: 1 !important; }

/* ---------- TABLET ---------- */
@media (max-width: 1079px) {
  body[data-page="about"] .about-hero { grid-template-columns: 1fr 1fr !important; }
  body[data-page="about"] .about-hero__text .hero-title { max-width: none !important; }
}

/* ---------- MOBILE ---------- */
@media (max-width: 820px) {
  :root {
    --bb-safe-page: calc(100% - 16px);
    --bb-safe-content: calc(100% - 24px);
  }

  html body[data-page] [data-editable-text][data-bb-style] {
    font-size: var(--bb-size-mobile, var(--bb-size-desktop, inherit)) !important;
    text-align: var(--bb-align-mobile, var(--bb-align-desktop, var(--bb-align, inherit))) !important;
  }
  html body[data-page] [data-bb-text-width="1"] {
    width: var(--bb-text-width-mobile, 100%) !important;
  }

  .site-header {
    width: calc(100% - 16px) !important;
    max-width: calc(100vw - 16px) !important;
  }

  /* Requested centred logo on the first screen. */
  body[data-page="home"] .hero-logo-standalone,
  body[data-page="home"] .hero-logo-standalone[data-editable-image="brand.logo"] {
    width: min(150px, 45vw) !important;
    max-width: 150px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  body[data-page="home"] .hero-logo-standalone > img,
  body[data-page="home"] .hero-logo-standalone__image {
    margin: 0 auto !important;
    object-position: center center !important;
  }

  body[data-page="home"] .full-banner,
  html body[data-page="home"] .full-banner[data-image-frame],
  html body[data-page="home"] .full-banner[data-image-custom-width="1"],
  html body[data-page="home"] .full-banner[data-image-custom-ratio="1"] {
    width: calc(100% - 24px) !important;
    inline-size: calc(100% - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    min-height: 500px !important;
    height: 500px !important;
    max-height: none !important;
    aspect-ratio: auto !important;
  }
  html body[data-page="home"] .full-banner__content {
    left: 22px !important;
    right: 22px !important;
    bottom: 26px !important;
    width: auto !important;
    max-width: none !important;
  }
  html body[data-page="home"] .full-banner__content h2 {
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(28px, 8.5vw, 36px) !important;
    line-height: 1 !important;
  }
  html body[data-page="home"] .full-banner__content p {
    max-width: 100% !important;
    font-size: 14px !important;
    line-height: 1.28 !important;
  }

  body[data-page="about"] .about-hero,
  body[data-page="about"] .about-value {
    grid-template-columns: 1fr !important;
  }
  body[data-page="about"] .about-hero__text,
  body[data-page="about"] .about-value__copy {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  body[data-page="about"] .about-hero__text .hero-title,
  body[data-page="about"] .about-hero__text .hero-text {
    width: 100% !important;
    max-width: 100% !important;
  }

  body[data-page="product"] .product-gallery__frame {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  body[data-page="product"] .product-gallery__main { order: 0 !important; }
  body[data-page="product"] .product-gallery__thumbs--side {
    order: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 8px !important;
    padding-bottom: 4px !important;
  }
  body[data-page="product"] .product-gallery__thumbs--side button {
    flex: 0 0 74px !important;
    width: 74px !important;
    height: 88px !important;
    min-height: 88px !important;
  }

  .bb-edit-controls { grid-template-columns: 1fr !important; }
  .bb-edit-modal { padding: 8px !important; }
  .bb-edit-modal__box--wide { width: calc(100vw - 16px) !important; max-height: calc(100svh - 16px) !important; }
  .bb-edit-modal__actions { display: grid !important; grid-template-columns: 1fr !important; }
}

/* Final alignment corrections from visual QA. */
@media (min-width: 1080px) {
  body[data-page="about"] .about-hero__text .hero-title {
    max-width: 21ch !important;
  }
}

@media (max-width: 820px) {
  body[data-page="product"] .product-page {
    display: flex !important;
    flex-direction: column !important;
  }
  body[data-page="product"] .product-gallery { order: 1 !important; width: 100% !important; }
  body[data-page="product"] .product-info { order: 2 !important; width: 100% !important; }
}

/* ================================
   Bench Brothers v74 — final client QA
   ================================ */

/* Exact text casing: editor text should render exactly as it was entered. */
html body[data-page] [data-editable-text] {
  text-transform: none !important;
}

/* Uploaded logo may include a white matte; multiply blends it into the light hero background. */
body[data-page="home"] .hero-logo-standalone,
body[data-page="home"] .hero-logo-standalone[data-editable-image="brand.logo"] {
  background: transparent !important;
  isolation: auto !important;
}
body[data-page="home"] .hero-logo-standalone > img,
body[data-page="home"] .hero-logo-standalone__image {
  background: transparent !important;
  mix-blend-mode: multiply;
}

/* Custom image widths/ratios: remove the visible second-colour "frame" around a reduced photo. */
body[data-page="home"] .combo-interior:has(> .combo-interior__image[data-image-custom-width="1"]),
body[data-page="home"] .combo-interior:has(> .combo-interior__image[data-image-custom-ratio="1"]),
body[data-page="home"] .combo-product:has(.combo-product__image[data-image-custom-width="1"]),
body[data-page="home"] .combo-product:has(.combo-product__image[data-image-custom-ratio="1"]) {
  background: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
  min-height: 0 !important;
  height: auto !important;
  align-self: start !important;
}
body[data-page="home"] .combo-interior__image[data-image-custom-width="1"],
body[data-page="home"] .combo-product__image[data-image-custom-width="1"] {
  display: block !important;
  background: transparent !important;
}
body[data-page="home"] .combo-interior__image[data-image-custom-ratio="1"],
body[data-page="home"] .combo-product__image[data-image-custom-ratio="1"] {
  height: auto !important;
  min-height: 0 !important;
  background: transparent !important;
}

/* FAQ gets a real visual-media area on the left, analogous to the assembly cards. */
body[data-page="home"] .faq-block {
  grid-template-columns: minmax(0, .9fr) minmax(380px, 1.1fr) !important;
  align-items: start !important;
}
body[data-page="home"] .faq-block__intro { min-width: 0; }
body[data-page="home"] .faq-media-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 28px;
}
body[data-page="home"] .faq-media {
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: #f1efec !important;
}
body[data-page="home"] .faq-media > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: var(--bb-img-fit, cover) !important;
  object-position: var(--bb-img-position, center center) !important;
}

/* About / production: unlimited media, photos and videos share the same slider geometry. */
body[data-page="about"] .about-production__slide--video {
  background: #1c1d1f !important;
  overflow: hidden !important;
}
body[data-page="about"] .about-production__slide--video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  background: #1c1d1f;
}

/* Product video thumbnail/player consistency. */
body[data-page="product"] .product-gallery__active-video {
  background: #111 !important;
  object-fit: contain !important;
}
body[data-page="product"] .product-gallery__video-thumb {
  border-radius: inherit;
}

@media (max-width: 820px) {
  body[data-page="home"] .faq-block {
    grid-template-columns: 1fr !important;
  }
  body[data-page="home"] .faq-media-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 24px;
  }
}

@media (max-width: 520px) {
  body[data-page="home"] .faq-media-grid { gap: 6px; }
}

/* Any manually reduced visual block must not expose a card-colour rim. */
html body[data-page] .image-pair__card[data-image-custom-width="1"],
html body[data-page] .image-pair__card[data-image-custom-ratio="1"],
html body[data-page] .quiet-block__media[data-image-custom-width="1"],
html body[data-page] .quiet-block__media[data-image-custom-ratio="1"],
html body[data-page] .about-hero__image[data-image-custom-width="1"],
html body[data-page] .about-value__images [data-image-custom-width="1"] {
  background: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
}


/* v75 — transparent logo uploads stay transparent and never crop */
[data-editable-image="brand.logo"],
[data-editable-image="brand.footerLogo"],
.hero-logo-standalone,
.footer-brand--image {
  background: transparent !important;
}
[data-editable-image="brand.logo"] img,
img[data-editable-image="brand.logo"],
.hero-logo-standalone__image,
.footer__logo[data-editable-image="brand.footerLogo"] {
  object-fit: contain !important;
  object-position: center center !important;
  background: transparent !important;
  box-shadow: none !important;
}
.hero-logo-standalone[data-image-custom-ratio="1"],
.hero-logo-standalone[data-image-custom-width="1"] {
  aspect-ratio: auto !important;
  width: auto !important;
  max-width: 100% !important;
}

/* v81 — material cards now use image-led layout like assembly cards. */
body[data-page="home"] .materials-grid {
  align-items: start !important;
}
body[data-page="home"] .materials-grid .material-card {
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 18px !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-sm) !important;
  background: rgba(255,255,255,.42) !important;
}
body[data-page="home"] .material-card__media {
  display: block !important;
  width: 100% !important;
  aspect-ratio: var(--bb-img-ratio, 16 / 9) !important;
  overflow: hidden !important;
  border-radius: 10px !important;
  background: var(--paper-2) !important;
  margin: 0 0 16px !important;
}
body[data-page="home"] .material-card__media > img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: var(--bb-img-fit, cover) !important;
  object-position: var(--bb-img-position, center center) !important;
  border-radius: 10px !important;
}
body[data-page="home"] .materials-grid .material-card h3 {
  margin: 4px 0 0 !important;
  font-size: 22px !important;
  line-height: .98 !important;
  font-weight: 520 !important;
  letter-spacing: -.045em !important;
}
body[data-page="home"] .materials-grid .material-card p {
  margin: 12px 0 0 !important;
  color: var(--muted) !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
}

@media (max-width: 820px) {
  body[data-page="home"] .material-card__media {
    margin-bottom: 14px !important;
  }
}

/* v82 — restore original combo-card composition from client reference.
   Product card stays on the white plaque, image card on the right has no text.
   Also tighten the vertical gap after/between these combo blocks. */
body[data-page="home"] .combo-product {
  background: var(--paper) !important;
}

body[data-page="home"] .combo-interior > :not(.combo-interior__image) {
  display: none !important;
}

@media (min-width: 821px) {
  body[data-page="home"] .combo-section--mirror .combo-product {
    transform: none !important;
    align-content: center !important;
    padding-top: clamp(26px, 4vw, 58px) !important;
  }

  body[data-page="home"] .combo-section--mirror {
    margin-bottom: 0 !important;
  }

  body[data-page="home"] .combo-section + .combo-section {
    padding-top: 28px !important;
  }

  body[data-page="home"] .combo-section--mirror + .quiet-block {
    padding-top: 28px !important;
  }
}

/* v83 — combo blocks: row 1 = product card left / photo right,
   row 2 = photo left / product card right. Keep the product cards on white plaques
   and tighten the empty space after the pair. */
@media (min-width: 1181px) {
  body[data-page="home"] .combo-section:not(.combo-section--mirror) .combo-grid > .combo-product { grid-column: 1; }
  body[data-page="home"] .combo-section:not(.combo-section--mirror) .combo-grid > .combo-interior { grid-column: 2; }

  body[data-page="home"] .combo-section--mirror .combo-grid > .combo-interior { grid-column: 1; }
  body[data-page="home"] .combo-section--mirror .combo-grid > .combo-product { grid-column: 2; }

  body[data-page="home"] .combo-section .combo-product {
    background: var(--paper) !important;
  }

  body[data-page="home"] .combo-section--mirror {
    padding-top: 22px !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  body[data-page="home"] .combo-section--mirror + .quiet-block {
    padding-top: 12px !important;
  }
}

/* v84 — final combo layout correction.
   Keep both columns visible even when the visual editor has old custom image sizing saved.
   Product cards sit on white plaques; photo-only cards remain clean. */
@media (min-width: 821px) {
  body[data-page="home"] .combo-section .combo-grid {
    align-items: stretch !important;
  }

  body[data-page="home"] .combo-section .combo-product,
  body[data-page="home"] .combo-section .combo-interior,
  body[data-page="home"] .combo-section .combo-product:has(.combo-product__image[data-image-custom-width="1"]),
  body[data-page="home"] .combo-section .combo-product:has(.combo-product__image[data-image-custom-ratio="1"]),
  body[data-page="home"] .combo-section .combo-interior:has(> .combo-interior__image[data-image-custom-width="1"]),
  body[data-page="home"] .combo-section .combo-interior:has(> .combo-interior__image[data-image-custom-ratio="1"]) {
    min-height: clamp(520px, 43vw, 650px) !important;
    height: auto !important;
    align-self: stretch !important;
    box-shadow: none !important;
    border-color: transparent !important;
  }

  body[data-page="home"] .combo-section .combo-product {
    background: #fff !important;
    padding: clamp(32px, 4vw, 58px) !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    align-content: center !important;
    justify-items: center !important;
  }

  body[data-page="home"] .combo-section .combo-product h3 {
    margin: 0 auto 28px !important;
  }

  body[data-page="home"] .combo-section .combo-product__image,
  body[data-page="home"] .combo-section .combo-product__image[data-image-custom-width="1"],
  body[data-page="home"] .combo-section .combo-product__image[data-image-custom-ratio="1"] {
    display: block !important;
    width: min(420px, 78%) !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    margin: 0 auto !important;
    background: var(--paper-2) !important;
  }

  body[data-page="home"] .combo-section .combo-product__image > img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: var(--bb-img-fit, cover) !important;
    object-position: var(--bb-img-position, center center) !important;
  }

  body[data-page="home"] .combo-section .combo-interior,
  body[data-page="home"] .combo-section .combo-interior:has(> .combo-interior__image[data-image-custom-width="1"]),
  body[data-page="home"] .combo-section .combo-interior:has(> .combo-interior__image[data-image-custom-ratio="1"]) {
    position: relative !important;
    overflow: hidden !important;
    background: #fff !important;
  }

  body[data-page="home"] .combo-section .combo-interior__image,
  body[data-page="home"] .combo-section .combo-interior__image[data-image-custom-width="1"],
  body[data-page="home"] .combo-section .combo-interior__image[data-image-custom-ratio="1"] {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: #fff !important;
  }

  body[data-page="home"] .combo-section .combo-interior__image > img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: var(--bb-img-fit, cover) !important;
    object-position: var(--bb-img-position, center center) !important;
  }

  /* Preserve requested inversion: first row text card left, photo right; second row reversed. */
  body[data-page="home"] .combo-section:not(.combo-section--mirror) .combo-grid > .combo-product { grid-column: 1 !important; }
  body[data-page="home"] .combo-section:not(.combo-section--mirror) .combo-grid > .combo-interior { grid-column: 2 !important; }
  body[data-page="home"] .combo-section--mirror .combo-grid > .combo-interior { grid-column: 1 !important; }
  body[data-page="home"] .combo-section--mirror .combo-grid > .combo-product { grid-column: 2 !important; }

  body[data-page="home"] .combo-section + .combo-section {
    padding-top: 24px !important;
  }
  body[data-page="home"] .combo-section--mirror {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
  body[data-page="home"] .combo-section--mirror + .quiet-block {
    padding-top: 10px !important;
  }
}

/* v85 — desktop combo showcase: the WHOLE row sits on one white plaque.
   Keep the same two photos that are visible on mobile and place them in the
   opposite side column on desktop. Equalise all internal spacing. */
@media (min-width: 821px) {
  body[data-page="home"] .combo-section {
    padding-top: 22px !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  body[data-page="home"] .combo-section .combo-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: clamp(22px, 2.2vw, 34px) !important;
    align-items: stretch !important;
    padding: clamp(22px, 2.4vw, 38px) !important;
    background: #fff !important;
    border-radius: var(--radius, 18px) !important;
    overflow: hidden !important;
  }

  /* Everything is already on the shared white plaque, so inner cards don't
     create a second coloured panel. */
  body[data-page="home"] .combo-section .combo-product,
  body[data-page="home"] .combo-section .combo-interior,
  body[data-page="home"] .combo-section .combo-product:has(.combo-product__image[data-image-custom-width="1"]),
  body[data-page="home"] .combo-section .combo-product:has(.combo-product__image[data-image-custom-ratio="1"]),
  body[data-page="home"] .combo-section .combo-interior:has(> .combo-interior__image[data-image-custom-width="1"]),
  body[data-page="home"] .combo-section .combo-interior:has(> .combo-interior__image[data-image-custom-ratio="1"]) {
    background: transparent !important;
    min-height: clamp(500px, 39vw, 620px) !important;
    height: auto !important;
    margin: 0 !important;
    transform: none !important;
    align-self: stretch !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body[data-page="home"] .combo-section .combo-product {
    display: grid !important;
    grid-template-rows: auto 1fr auto !important;
    align-content: start !important;
    justify-items: center !important;
    padding: clamp(18px, 2vw, 30px) !important;
  }

  body[data-page="home"] .combo-section .combo-product h3 {
    width: 100% !important;
    max-width: 520px !important;
    margin: 0 auto 24px !important;
  }

  body[data-page="home"] .combo-section .combo-product__image,
  body[data-page="home"] .combo-section .combo-product__image[data-image-custom-width="1"],
  body[data-page="home"] .combo-section .combo-product__image[data-image-custom-ratio="1"] {
    width: min(430px, 86%) !important;
    max-width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    margin: 0 auto !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: var(--paper-2) !important;
  }

  body[data-page="home"] .combo-section .combo-product__caption {
    width: min(430px, 86%) !important;
    max-width: 100% !important;
    margin: 16px auto 0 !important;
  }

  /* Force the photo-only half to use the CMS/mobile image on desktop too. */
  body[data-page="home"] .combo-section .combo-interior {
    display: block !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 12px !important;
  }
  body[data-page="home"] .combo-section .combo-interior__image,
  body[data-page="home"] .combo-section .combo-interior__image[data-image-frame],
  body[data-page="home"] .combo-section .combo-interior__image[data-image-custom-width="1"],
  body[data-page="home"] .combo-section .combo-interior__image[data-image-custom-ratio="1"] {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: hidden !important;
  }
  body[data-page="home"] .combo-section .combo-interior__image > img,
  body[data-page="home"] .combo-section .combo-interior img[data-editable-image] {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 100% !important;
    opacity: 1 !important;
    visibility: visible !important;
    object-fit: cover !important;
    object-position: var(--bb-img-position, center center) !important;
  }

  /* Requested inversion. */
  body[data-page="home"] .combo-section:not(.combo-section--mirror) .combo-grid > .combo-product { grid-column: 1 !important; grid-row: 1 !important; }
  body[data-page="home"] .combo-section:not(.combo-section--mirror) .combo-grid > .combo-interior { grid-column: 2 !important; grid-row: 1 !important; }
  body[data-page="home"] .combo-section--mirror .combo-grid > .combo-interior { grid-column: 1 !important; grid-row: 1 !important; }
  body[data-page="home"] .combo-section--mirror .combo-grid > .combo-product { grid-column: 2 !important; grid-row: 1 !important; }

  /* Same spacing above/below both rows and no giant empty tail after them. */
  body[data-page="home"] .combo-section + .combo-section {
    padding-top: 22px !important;
  }
  body[data-page="home"] .combo-section--mirror + .quiet-block {
    padding-top: 22px !important;
  }
}

@media (max-width: 820px) {
  /* Keep the existing mobile images/layout untouched; only normalise the plaque spacing. */
  body[data-page="home"] .combo-section .combo-grid {
    background: #fff !important;
    border-radius: var(--radius, 18px) !important;
    padding: 14px !important;
    gap: 14px !important;
  }
}

/* v14: product videos keep their native aspect ratio (vertical/square/wide) without cropping. */
body[data-page="product"] .product-gallery__active-video:is(video) {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #111 !important;
}
body[data-page="product"] .product-gallery__active-video video {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #111 !important;
}


/* v88 — universal editable image ratios: every selected format really applies and fills the frame. */
html body[data-page] [data-image-frame][data-image-custom-ratio="1"] {
  aspect-ratio: var(--bb-img-ratio) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
}
html body[data-page] [data-image-frame][data-image-custom-ratio="1"] > img,
html body[data-page] [data-image-frame][data-image-custom-ratio="1"] img[data-editable-image],
html body[data-page] img[data-image-frame][data-image-custom-ratio="1"] {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: var(--bb-img-position, center center) !important;
  background: transparent !important;
}
/* Span-based image frames (combo/interior, assembly, etc.) must behave as real boxes. */
html body[data-page] span[data-image-frame] {
  display: block !important;
}
\n\n/* v89 — saved custom photo ratios must beat old component defaults after reload.\n   3:4 stays 3:4 (not 1:1), 16:9 stays 16:9, etc.; fixed ratios always crop to fill. */\nhtml body[data-page] [data-image-frame][data-image-custom-ratio="1"][style] {\n  aspect-ratio: var(--bb-img-ratio) !important;\n  height: auto !important;\n  min-height: 0 !important;\n  max-height: none !important;\n  overflow: hidden !important;\n}\nhtml body[data-page] [data-image-frame][data-image-custom-ratio="1"][style] > img,\nhtml body[data-page] [data-image-frame][data-image-custom-ratio="1"][style] img[data-editable-image] {\n  width: 100% !important;\n  height: 100% !important;\n  min-width: 100% !important;\n  min-height: 100% !important;\n  object-fit: cover !important;\n  object-position: var(--bb-img-position, center center) !important;\n}\n/* Old combo rules used to force product photos back to square. Respect the selected CMS ratio. */\n@media (min-width: 821px) {\n  html body[data-page="home"] .combo-section .combo-product__image[data-image-frame][data-image-custom-ratio="1"] {\n    aspect-ratio: var(--bb-img-ratio) !important;\n    height: auto !important;\n  }\n}\n
/* v17: product video follows its native aspect ratio. The gallery frame is
   resized by JS from videoWidth/videoHeight, so vertical/square/wide videos
   fill the frame without black/empty bands or cropping. */
body[data-page="product"] .product-gallery__main[data-media-type="video"] {
  height: auto !important;
  min-height: 0 !important;
  background: #111 !important;
}
body[data-page="product"] .product-gallery__main[data-media-type="video"] .product-gallery__active-video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  background: #111 !important;
}

/* v18 — custom image ratio has priority even inside the desktop combo blocks.
   Old combo rules used absolute positioning / fixed 1:1 and ignored the CMS ratio. */
@media (min-width: 821px) {
  html body[data-page="home"] .combo-section .combo-product__image[data-image-frame][data-image-custom-ratio="1"],
  html body[data-page="home"] .combo-section .combo-interior__image[data-image-frame][data-image-custom-ratio="1"] {
    position: relative !important;
    inset: auto !important;
    width: var(--bb-img-width, 100%) !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: var(--bb-img-ratio) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: hidden !important;
  }
  html body[data-page="home"] .combo-section .combo-interior:has(> .combo-interior__image[data-image-custom-ratio="1"]) {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    overflow: visible !important;
  }
  html body[data-page="home"] .combo-section .combo-product__image[data-image-custom-ratio="1"] > img,
  html body[data-page="home"] .combo-section .combo-interior__image[data-image-custom-ratio="1"] > img {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    object-fit: cover !important;
    object-position: var(--bb-img-position, center center) !important;
  }
}

/* Product video: frame follows metadata ratio; video fills exactly that frame. */
body[data-page="product"] .product-gallery__main[data-media-type="video"] {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: var(--bb-img-ratio) !important;
  overflow: hidden !important;
}
body[data-page="product"] .product-gallery__main[data-media-type="video"] > .product-gallery__active-video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
}

/* v93 — mobile combo: make the upper product photo use the same full content width as the lower interior photo. */
@media (max-width: 820px) {
  body[data-page="home"] .combo-section .combo-grid {
    align-items: stretch !important;
  }

  body[data-page="home"] .combo-section .combo-product,
  body[data-page="home"] .combo-section .combo-interior {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  body[data-page="home"] .combo-section .combo-product {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body[data-page="home"] .combo-section .combo-product__image,
  body[data-page="home"] .combo-section .combo-product__image[data-image-frame],
  body[data-page="home"] .combo-section .combo-product__image[data-image-custom-width="1"],
  body[data-page="home"] .combo-section .combo-product__image[data-image-custom-ratio="1"],
  body[data-page="home"] .combo-section .combo-interior__image,
  body[data-page="home"] .combo-section .combo-interior__image[data-image-frame] {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  body[data-page="home"] .combo-section .combo-product__image > img,
  body[data-page="home"] .combo-section .combo-interior__image > img {
    width: 100% !important;
    max-width: none !important;
    display: block !important;
  }
}