/* 6.14.18 — Affirm as one quiet line, Key specs aligned to the buy box.
   Layout/styling only. Does not change Affirm settings or script config. */

/* ------------------------------------------------------------------
   1. Affirm: always its own full-width row under the price. One short
   quiet line. Hide the highlighted 0% APR pill so it cannot stack.
   ------------------------------------------------------------------ */
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):not(#c) {
  flex: 0 0 100% !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  align-content: center !important;
  gap: 0.3em;
  box-sizing: border-box;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 22px !important;
  font: 400 13px/1.4 Jost, var(--f-body), sans-serif !important;
  color: #5A4E62 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  overflow: visible !important;
}
html body.dtc-c .productView .pdp-card > .c28-affirm.c28-affirm--off:not(#a):not(#b):not(#c) {
  display: none !important;
}
/* Drop the highlighted 0% APR pill (never let it stack). */
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"],
html body.dtc-c .c28-affirm [class*="__apr"] {
  display: none !important;
}
html body.dtc-c .c28-affirm .c6180-line {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.3em;
  min-width: 0;
  font: inherit;
  color: inherit;
  white-space: nowrap;
}
html body.dtc-c .c28-affirm .c6180-line a {
  font: inherit;
  color: #713592;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
html body.dtc-c .c28-affirm .__affirm-logo,
html body.dtc-c .c28-affirm [class*="affirm-logo"],
html body.dtc-c .c28-affirm .c6180-line img {
  display: inline-block !important;
  height: 1.05em !important;
  width: auto !important;
  max-height: 16px !important;
  vertical-align: -0.15em;
  flex: 0 0 auto;
}
/* Hide leftover Affirm nodes once we have rebuilt the quiet line. */
html body.dtc-c .c28-affirm[data-c6180="1"] > :not(.c6180-line) {
  display: none !important;
}
/* Long form by default; short form ("From $X/mo with [logo]") when the
   line would wrap, or on narrow phones. */
html body.dtc-c .c28-affirm .c6180-short { display: none !important; }
html body.dtc-c .c28-affirm .c6180-full { display: inline !important; }
html body.dtc-c .c28-affirm.c6180-short-mode .c6180-full { display: none !important; }
html body.dtc-c .c28-affirm.c6180-short-mode .c6180-short { display: inline !important; }
@media (max-width: 480px) {
  html body.dtc-c .productView .pdp-card > .c28-affirm:not(#a):not(#b):not(#c),
  html body.dtc-c .productView .c28-affirm:not(#a):not(#b),
  html body.dtc-c .productView #c28-affirm:not(#a):not(#b) {
    min-height: 20px !important;
    margin: 2px 0 6px !important;
    font-size: 12px !important;
    line-height: 20px !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }
}

/* ------------------------------------------------------------------
   2. Key specs: match the lavender buy box left/right edges.
   The buy box sits in the right column of .pdp-b-row (57/3/40, or
   54/3/43 at 801–1100). The description grid used a 62/34 split inside
   a 1144px cap, so Key specs was narrower and offset. Use the same
   shell width and the same column fractions at >=1024. JS in fix6180.js
   refines this when a tall gallery shifts the buy box.
   Below 1024 the grid already stacks; keep Key specs full width
   (including phones at 390).
   ------------------------------------------------------------------ */
@media (min-width: 1024px) {
  html body.dtc-c .pdp-b-desc .c9-desc-grid.c28v-grid:not(#a):not(#b),
  html body.dtc-c .pdp-b-desc .c28v-grid:not(#a):not(#b) {
    display: grid !important;
    grid-template-columns: 57% 40% !important;
    column-gap: 3% !important;
    row-gap: 24px !important;
    max-width: none !important;
    align-items: start;
  }
}
@media (min-width: 1024px) and (max-width: 1100px) {
  html body.dtc-c .pdp-b-desc .c9-desc-grid.c28v-grid:not(#a):not(#b),
  html body.dtc-c .pdp-b-desc .c28v-grid:not(#a):not(#b) {
    grid-template-columns: 54% 43% !important;
    column-gap: 3% !important;
  }
}
@media (max-width: 1023px) {
  html body.dtc-c .pdp-b-desc .c9-desc-grid.c28v-grid:not(#a):not(#b),
  html body.dtc-c .pdp-b-desc .c28v-grid:not(#a):not(#b) {
    grid-template-columns: none !important;
  }

}

/* FAQ: keep the existing accordion look after Shipping & returns is removed.
   #pdp-faq now lives on the Frequently Asked Questions block. */
html body.dtc-c .additonal-content-section.pdp-faq,
html body.dtc-c section.additonal-content-section.pdp-faq {
  scroll-margin-top: 120px;
}
html body.dtc-c #pdp-faq-shipping,
html body.dtc-c #pdp-faq-return {
  scroll-margin-top: 120px;
}

/* Hide Affirm's original bare text nodes once the quiet line is built. */
html body.dtc-c .productView .pdp-card > .c28-affirm[data-c6180="1"]:not(#a):not(#b):not(#c) {
  font-size: 0 !important;
}
html body.dtc-c .c28-affirm[data-c6180="1"] .c6180-line {
  font: 400 13px/1.4 Jost, var(--f-body), sans-serif !important;
  color: #5A4E62 !important;
}
@media (max-width: 480px) {
  html body.dtc-c .c28-affirm[data-c6180="1"] .c6180-line { font-size: 12px !important; line-height: 20px !important; }
}