/* 6.14.12 (Nov 11): Best Sellers photo fit, hide duplicate card play overlay,
   30% larger PDP "We accept" badges, fuller lower Harmony band. */

/* ---- 1. Best Sellers photo boxes ----
   Root cause: .card-figure is locked to aspect-ratio 1/1. Many Best Sellers
   photos (and Koshi / crystal shots) are ~4/3, so object-fit:contain leaves
   ~25% empty height above and below the product. 4/3 is the common landscape
   ratio; square photos letterbox on the sides and are never cropped.
   box-sizing + max-width keep the figure inside the card (the 16px figure
   padding was overflowing the card box, especially at 390). */
html body.dtc-c .h5-best .card-figure:not(#a):not(#b){
  aspect-ratio:4/3!important;
  width:100%!important;
  max-width:100%!important;
  height:auto!important;
  box-sizing:border-box!important;
  padding:8px!important;
  overflow:hidden!important;
  margin:0 0 12px!important;
}
html body.dtc-c .h5-best .card-figure>a:not(#a),
html body.dtc-c .h5-best .card-img-container:not(#a){
  position:absolute!important;inset:0;
  width:100%!important;height:100%!important;
  max-width:100%!important;box-sizing:border-box!important;
}
html body.dtc-c .h5-best .card-figure img.card-image:not(#a){
  object-fit:contain!important;
  object-position:center center!important;
}
html body.dtc-c .h5-best-grid>.product{display:flex}
html body.dtc-c .h5-best .card:not(#a){height:100%;box-sizing:border-box!important}

/* Duplicate gray play button on the photo (injected only on .h5-best when a
   Sound sample player is present). Keep the main .c9p player. */
html body.dtc-c .c9-play-ov{display:none!important}

/* ---- 2. PDP "We accept" badges ~30% larger (38x26 -> 50x34; img 33x18 -> 43x23).
   Native mark art is larger than the new CSS size, so they stay sharp.
   Label stays on the first line with the badges; badges wrap evenly if the
   buy-box is narrower than 10 enlarged marks (phone, and tight desktop cards).
   Do not touch footer icons or the phone sticky ATC bar. */
html body.dtc-c .productView .pdp-card .footer-payment-icons.pdp-pay:not(#a):not(#b),
html body.dtc-c .productView .pdp-card .pdp-pay:not(#a):not(#b){
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  gap:8px 6px!important;
  column-gap:6px!important;
  row-gap:8px!important;
  width:100%!important;
  max-width:100%!important;
  box-sizing:border-box!important;
  height:auto!important;
  max-height:none!important;
  overflow:visible!important;
}
html body.dtc-c .productView .pdp-card .pdp-pay .pdp-pay-lbl:not(#a):not(#b){
  flex:0 0 auto;
  white-space:nowrap!important;
  margin:0 2px 0 0!important;
  font:500 14px/1.3 Jost,"Jost Fallback",sans-serif;
  color:#241A2B;
}
html body.dtc-c .productView .pdp-card .pdp-pay .pdp-pay-b:not(#a):not(#b){
  flex:0 0 auto;
  width:50px!important;
  height:34px!important;
  padding:0 3px!important;
  margin:0!important;
  box-sizing:border-box!important;
  background:#fff;
  border:1px solid #CFC4D6;
  border-radius:5px;
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
}
html body.dtc-c .productView .pdp-card .pdp-pay .pdp-pay-b img:not(#a):not(#b){
  display:block;
  width:auto!important;
  height:auto!important;
  max-width:43px!important;
  max-height:23px!important;
  object-fit:contain!important;
  image-rendering:auto;
  margin:0!important;
}
@media (max-width:520px){
  html body.dtc-c .productView .pdp-card .pdp-pay:not(#a):not(#b){
    gap:8px 6px!important;
  }
  html body.dtc-c .productView .pdp-card .pdp-pay .pdp-pay-b:not(#a):not(#b){
    width:57px!important;
    height:34px!important;
  }
  html body.dtc-c .productView .pdp-card .pdp-pay .pdp-pay-b img:not(#a):not(#b){
    max-width:49px!important;
    max-height:23px!important;
  }
}

/* ---- 3. Lower PDP Harmony block (.cbp-close, under Key specs, above Pairs).
   Lavender band with Listen first eyebrow, the original Playfair heading, and
   the larger gold button whose visible text is only "Find Bowls in Harmony".
   Crystal-only gating is unchanged (the row lives inside section.cbp).
   Buy-box stacked button is left as-is, including its colors. */
html body.dtc-c section.cbp .cbp-close:not(#a):not(#b),
html body.dtc-c section.cbp:not([hidden]) .cbp-close:not(#a):not(#b){
  display:block!important;
  box-sizing:border-box!important;
  width:100%!important;
  max-width:none!important;
  margin:32px 0 0!important;
  padding:40px 24px 44px!important;
  background:#EBE5ED;
  color:#241A2B;
  text-align:center;
  font-family:Jost,"Jost Fallback",sans-serif;
}
html body.dtc-c .cbp .cbp-close-in{width:100%;max-width:760px;margin:0 auto;box-sizing:border-box}
html body.dtc-c .cbp .cbp-close-e{
  margin:0 0 10px!important;padding:0;
  font:600 16px/1.2 Jost,"Jost Fallback",sans-serif;
  letter-spacing:.12em;text-transform:uppercase;color:#462C59;
}
html body.dtc-c .cbp .cbp-close-t,
html body.dtc-c .cbp h2.cbp-close-t{
  margin:0 0 24px!important;padding:0;
  font:500 34px/1.2 'Playfair Display',Georgia,serif!important;
  color:#241A2B!important;
  text-transform:none!important;
  letter-spacing:0!important;
}
html body.dtc-c .cbp .cbp-close a.pdp-harm-btn:not(#a):not(#b),
html body.dtc-c .cbp .cbp-close [data-cb-open].pdp-harm-btn:not(#a):not(#b){
  display:inline-flex!important;
  flex-direction:row;
  flex-wrap:nowrap;
  align-items:center;justify-content:center;
  box-sizing:border-box;
  width:auto!important;
  min-width:560px;
  max-width:min(640px,100%)!important;
  height:auto!important;
  min-height:64px!important;
  margin:0 auto!important;
  padding:14px 56px!important;
  border-radius:10px!important;
  border:1.5px solid #A8822E!important;
  background:#C9A24A!important;
  color:#241A2B!important;
  font:700 18px/1.2 Jost,"Jost Fallback",sans-serif!important;
  text-decoration:none!important;
  text-transform:none!important;
  letter-spacing:0!important;
  white-space:nowrap;
  cursor:pointer;
}
html body.dtc-c .cbp .cbp-close a.pdp-harm-btn:hover:not(#a),
html body.dtc-c .cbp .cbp-close a.pdp-harm-btn:is(:hover,:focus-visible):not(#a){
  background:#D4B062!important;
  color:#241A2B!important;
  border-color:#A8822E!important;
  text-decoration:none!important;
}
html body.dtc-c .cbp .cbp-close a.pdp-harm-btn:focus-visible{
  outline:3px solid #4B2A5C!important;
  outline-offset:2px!important;
}
html body.dtc-c section.cbp:has(.cbp-close) .cbp-hd{
  border-top:0!important;
  margin-top:32px!important;
  padding-top:0!important;
}
html body.dtc-c .cbp .cbp-close-in{width:100%!important;max-width:760px;box-sizing:border-box;margin:0 auto}
@media (max-width:1100px){
  html body.dtc-c .cbp .cbp-close a.pdp-harm-btn:not(#a):not(#b),
  html body.dtc-c .cbp .cbp-close [data-cb-open].pdp-harm-btn:not(#a):not(#b){
    flex-wrap:wrap;
    white-space:normal;
    min-width:0;
    max-width:100%!important;
    padding:14px 40px!important;
  }
}
@media (max-width:800px){
  html body.dtc-c section.cbp .cbp-close:not(#a):not(#b){
    padding:28px 16px 32px!important;
    margin:24px 0 0!important;
  }
  html body.dtc-c .cbp .cbp-close-t,
  html body.dtc-c .cbp h2.cbp-close-t{font-size:28px!important}
  html body.dtc-c .cbp .cbp-close-in{display:block!important;width:100%!important}
  html body.dtc-c .cbp .cbp-close a.pdp-harm-btn:not(#a):not(#b),
  html body.dtc-c .cbp .cbp-close [data-cb-open].pdp-harm-btn:not(#a):not(#b){
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    flex:0 0 auto!important;
    align-self:stretch!important;
    box-sizing:border-box!important;
    min-height:60px!important;
    padding:12px 20px!important;
    white-space:normal;
    font-size:18px!important;
  }
}