/* Product details: section-level hooks on top of the ported design CSS.

   product.css, product-ui.css and pdp.css draw the whole torn-paper band: its
   fixed ratio, the negative margins that tuck it under the hero, the two-column
   .details-grid, the .inside bullet list and the .inside-links rows. Only what
   the section's settings change, and the one rule the design keyed off <body>,
   live here. */

/* product-ui.css paints the band with !important, so the merchant's colour
   setting has to answer in kind. */
.details {
  background-color: var(--mm-details-bg, #1c192c) !important;
}

/* pdp.css: the band is a fixed-ratio panel, and a bundle's linked rows are
   taller than that ratio allows, so the last row fell out of the panel. The
   design scoped the fix to body[data-page-type="bundle"]; a section cannot set
   an attribute on <body>, so it is keyed off the section root's own
   data-product-kind instead. The background is sized 100% 100%, so the panel
   stretches with it. */
.details.misfit-page[data-product-kind="bundle"] {
  aspect-ratio: auto;
  height: auto;
  min-height: 0;
  padding-block: clamp(56px, 5vw, 96px);
}

/* F-51: from 801px product-ui.css draws the band at a fixed 24/5 ratio with
   min-height:0, so at 1440 the band is 300px tall while the two-column grid
   needs about 275px plus padding, and the last "What is inside" item ran past
   the paper's bottom edge. min-height:auto restores the aspect-ratio box's
   content minimum: the band keeps its 24/5 shape whenever the content fits
   and grows (the background is sized 100% 100%) only when it does not. */
@media (min-width: 801px) {
  .details.misfit-page {
    min-height: auto;
  }
}