/* 6.14.17 — gallery gap, Affirm wrap, listen cards, related card photos */

/* ------------------------------------------------------------------
   1. Gallery gap
   Desktop (≥801): the gallery is a flex column (fix6147). The space
   between "Click to see full view" and the trust badges is the flex
   gap (~10px) plus .product-usps-main { margin-top:30px; padding-top:10px }.
   Measured ~48px at 1440. Cut to about 30% (~14px) by tightening the
   badge block only. Do not stretch the left column, do not change
   sticky behavior, and leave the mobile usps block (already margin-top:0)
   alone.
   ------------------------------------------------------------------ */
@media (min-width: 801px) {
  html body.dtc-c .pdp-b-gallery > .product-slider:not(#a):not(#b) {
    /* Beats fix6147's margin-top:10px !important. Gallery column-gap is 8px,
       so 6px margin yields a ~14px hint-to-badge gap (~30% of the original 48px). */
    margin-top: 6px !important;
  }
  html body.dtc-c .pdp-b-gallery > .product-slider .product-usps-main:not(#a):not(#b),
  html body.dtc-c .pdp-b-gallery .product-usps-main:not(.mobile-visible):not(#a):not(#b) {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* ------------------------------------------------------------------
   2. Affirm promo wrap (CSS only — do not change the Affirm script,
   data-amount, or placement). Keep the line beside the price when it
   fits; otherwise drop it onto its own full-width row. Do not let the
   container shrink into a cramped column that stacks "0% APR" with
   its highlight box. Style the container; also force the badge to
   stay inline if the injected markup is reachable.
   ------------------------------------------------------------------ */
html body.dtc-c .productView .pdp-card:not(#a):not(#b) {
  container-type: inline-size;
}
html body.dtc-c .productView .pdp-card > .c28-affirm:not(#a):not(#b) {
  /* Own row under the price whenever the promo cannot sit on one clean
     line beside it. At 1440 the leftover next to the price is already
     too narrow (the badge stacks and the sentence jumbles), so use a
     full-width basis. */
  flex: 1 0 100%;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  white-space: normal !important;
  overflow: visible !important;
}
html body.dtc-c .c28-affirm .__apr_badge,
html body.dtc-c .affirm-as-low-as .__apr_badge,
html body.dtc-c .c28-affirm [class*="apr_badge"] {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  white-space: nowrap !important;
  vertical-align: middle;
}
@container (max-width: 420px) {
  html body.dtc-c .productView .pdp-card > .c28-affirm:not(#a):not(#b) {
    flex: 0 0 100%;
    width: 100%;
  }
}
@media (max-width: 800px) {
  html body.dtc-c .productView .pdp-card > .c28-affirm:not(#a):not(#b) {
    flex: 0 0 100%;
    width: 100%;
    white-space: normal !important;
    overflow: visible !important;
  }
}

/* ------------------------------------------------------------------
   3+4. Homepage "Hear before you buy" product cards
   ------------------------------------------------------------------ */
html body.dtc-c .h5-hear-list[data-listen-cards]:not(#a):not(#b) {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 24px !important;
  width: 100% !important;
  max-width: none !important;
}
html body.dtc-c .h5-hear-list[data-listen-cards] > li {
  min-width: 0;
}
html body.dtc-c .h5lc {
  background: #fff;
  border: 1px solid #ECE5EE;
  border-radius: 12px;
  padding: 16px 16px 18px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
}
html body.dtc-c .h5lc-photo {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #F0EAF3;
}
html body.dtc-c .h5lc-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
html body.dtc-c .h5lc-name {
  font: 400 18px/24px var(--f-head), "Playfair Display", Georgia, serif;
  margin: 0;
  color: #241A2B;
}
html body.dtc-c .h5lc-name a {
  color: #241A2B !important;
  text-decoration: none;
}
html body.dtc-c .h5lc-name a:hover,
html body.dtc-c .h5lc-name a:focus-visible {
  color: #713592 !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
html body.dtc-c .h5lc-price {
  font: 600 16px/1.3 var(--f-body), Jost, sans-serif;
  color: #241A2B;
  margin: 0;
}
html body.dtc-c .h5lc-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
}
html body.dtc-c .h5lc-play {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: #713592;
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  margin: 0;
}
html body.dtc-c .h5lc-play:hover { background: #5E2C7A; }
html body.dtc-c .h5lc-play:focus-visible {
  outline: 2px solid #4B2A5C;
  outline-offset: 2px;
}
html body.dtc-c .h5lc-ico {
  width: 0;
  height: 0;
  border-left: 12px solid #fff;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  margin-left: 3px;
  display: block;
}
html body.dtc-c .h5lc.is-playing .h5lc-ico,
html body.dtc-c .h5lc-play[aria-pressed="true"] .h5lc-ico {
  width: 12px;
  height: 14px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg, #fff 0 35%, transparent 35% 65%, #fff 65%);
}
html body.dtc-c .h5lc-go {
  font: 500 13px/18px var(--f-body), Jost, sans-serif;
  color: #713592 !important;
  text-transform: uppercase;
  letter-spacing: .08em;
  text-decoration: none;
}
html body.dtc-c .h5lc-go:hover,
html body.dtc-c .h5lc-go:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}
html body.dtc-c .h5-hear-list[data-listen-cards][data-empty] {
  display: block;
}

@media (max-width: 1100px) and (min-width: 801px) {
  html body.dtc-c .h5-hear-list[data-listen-cards]:not(#a):not(#b) {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
}
@media (max-width: 800px) {
  html body.dtc-c .h5-hear-list[data-listen-cards]:not(#a):not(#b) {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    gap: 12px;
    grid-template-columns: none;
    -webkit-overflow-scrolling: touch;
    padding: 0 0 8px;
    margin: 0 -16px;
    padding-left: 16px;
    padding-right: 16px;
  }
  html body.dtc-c .h5-hear-list[data-listen-cards] > li {
    flex: 0 0 78%;
    max-width: 320px;
    scroll-snap-align: start;
  }
}

/* Related products: no layout change; images swapped in JS when a white shot is known. */

/* 6.14.24: Hear cards reuse the shared compact (c9p) Best Sellers player.
   Play button size stays 44x44 via fix6190. Duration slot is reserved even
   when empty (real metadata only; never a made-up time). */
html body.dtc-c .h5lc .c9p-list:not(#a) {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  box-sizing: border-box;
}
html body.dtc-c .h5lc .c9p:not(#a) {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 44px;
  align-items: center;
}
html body.dtc-c .h5lc .c9p-dur:not(#a) {
  min-width: 3ch;
  flex: 0 0 auto;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
html body.dtc-c .h5lc .c9p-wave:not(#a) {
  height: 20px;
  overflow: hidden;
  min-width: 0;
  max-width: 100%;
}
html body.dtc-c .h5lc-go {
  margin-top: auto;
}