/* checkout-inline.css — the two inline <style> blocks from bareearth/wblanket/v1/checkout.html <head> (SELL-1007). */

/* Figma spec fonts (design-QA audit): Figtree (body/UI), Poppins (trust badges),
   Neue Haas Grotesk Display Pro (product name h1, self-hosted) */
@import url("https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap");
@font-face {
  font-family: "Neue Haas Grotesk Display Pro";
  src: url("../fonts/NeueHaasDisplay-Bold.woff2") format("woff2"),
       url("../fonts/NeueHaasDisplay-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

html:not(.next-display-ready) [data-next-await] {
  position: relative;
  overflow: hidden;
  border-color: transparent !important;
  box-shadow: none !important;
}
[data-next-await] * {
  opacity: 0;
  transition: opacity 0.2s ease;
}
[data-next-await]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #e0e0e0;
  animation: pulse-gray 1.5s ease-in-out infinite;
  z-index: 1;
  pointer-events: none;
}
@keyframes pulse-gray {
  0%,
  100% {
    background-color: #e0e0e0;
    opacity: 0.6;
  }
  50% {
    background-color: #f5f5f5;
    opacity: 0.8;
  }
}
html.next-display-ready [data-next-await] * {
  opacity: 1;
}
html.next-display-ready [data-next-await]::before {
  display: none;
}

.exit-intent-close {
  top: 16px !important;
  right: 16px !important;
  color: transparent !important;
  text-shadow: none !important;
  font-size: 40px !important;
}

/* --- Figma checkout design (3CkiDy70b83mwt5EwHytyG, nodes 1028:7069 / 1028:7515) — colour, size and spacing
   overrides on top of the BareEarth theme. Typography now follows the design-QA follow-up block at the end of this file (supersedes the 2026-08-27 decision). --- */
.section-checkout.cc-green { background: #f8f8f8; }                       /* page bg (frame fill) */
.cc-weight-selector { display: flex; gap: 16px; }                         /* tiles 98×98, 16px apart */
.cc-weight-tile { width: 98px; height: 98px; border: 1px solid #bbb; border-radius: 4px; background: #fff; }
.cc-weight-tile.is-active { border: 3px solid #000; }
.cc-weight-tile__label { font-size: 16px; font-weight: 800; }
.form-section__sub.span-red { color: #d32b33; font-size: 14px; font-weight: 500; }   /* "8 Left in stock" */
.form-section__price--reg { color: #939393; font-size: 22px; font-weight: 700; }   /* struck retail price */
.form-section__price--sale { font-size: 16px; font-weight: 700; color: #000; }   /* Figma QA 2026-08-28: 22px → 16px */
.form-section__price--savings { background: #deff96; border-radius: 4px; min-height: 41px; display: inline-flex; align-items: center; padding: 0 8px; }
.form-section__price--savings > div { font-size: 15px; font-weight: 700; color: #000; background: transparent; }
.option__quantity { border-radius: 60px; border: 1px solid #bbb; min-height: 52px; }       /* quantity stepper (Figma pill: 52px) */
.payment-method, .payment-method.next-selected { background: #e2e2e2; border-color: #bbb; }   /* credit-card block: neutral grey, not olive */
.payment-method .input-flds { border-color: #8b8b8b; }
.cart-box { border-color: #bbb; }
.payment-method__header { border-bottom: 1px solid #141414; }              /* Figma Rect 1028:7406 */

/* Free gift (pkg 34 "Velin Rewards", $0) rides in every bundle card so it lands on the order,
   but its cart line stays hidden — the customer first sees it on the receipt page. */
[data-next-cart-items] [data-package-id="34"] { display: none !important; }

/* --- Figma QA 2026-08-28 --- */
.size_chart-right { text-decoration: none; font-size: 15px; }              /* no underline; 15px → lh 22.5 */
.order-totals__value.ts-lg.tw-600.cc-disc { color: #e44613; }              /* discount value — Figma rgba(228,70,19) (QA 2026-08-31, supersedes the earlier black) */

/* --- Figma mobile checkout (node 1028:7963) + size-chart modal (1028:8419 desktop / 1028:8430 mobile) --- */
.checkout__header-top { background-color: #002c6f; }                      /* navy brand bar (Rect 1028:8149), all viewports */
.security-banner { background-color: #f5f5f5; }                           /* light grey strip under the header */
pageblock-modal[data-modal-id="size-guide"] .pb-modal_title.cc-title { color: #002c6f; font-size: 36px; }
pageblock-modal[data-modal-id="size-guide"] .sizechart-guide { border-top: 0; }   /* no divider above Quick Sizing Guide */
/* desktop graphics = Figma group 1028:8510 (sits over the modal, outside its group): panel 513px, labels above each blanket,
   graphics 1.5× the mobile export, 21px apart, bottoms aligned */
@media (min-width: 768px) { pageblock-modal[data-modal-id="size-guide"] .pb-modal { width: 513px; } }
pageblock-modal[data-modal-id="size-guide"] .sizechart-grid { grid-template-columns: max-content max-content; column-gap: 21px; }
pageblock-modal[data-modal-id="size-guide"] .sizechart-label { font-size: 18px; font-weight: 700; }
pageblock-modal[data-modal-id="size-guide"] .sizechart-img.first { width: 202px; height: 269px; max-width: none; }
pageblock-modal[data-modal-id="size-guide"] .sizechart-img.second { width: 224px; height: 299px; max-width: none; }
@media (max-width: 767px) {
  .express-checkout__buttons { flex-flow: row; }                           /* GPay + PayPal side by side */
  pageblock-modal[data-modal-id="size-guide"] .pb-modal_title.cc-title { font-size: 24px; }
  pageblock-modal[data-modal-id="size-guide"] .sizechart-label { display: none; }          /* mobile frame 1028:8430 has no labels */
  pageblock-modal[data-modal-id="size-guide"] .sizechart-grid { justify-content: space-between; }
  pageblock-modal[data-modal-id="size-guide"] .sizechart-img.first { width: 134px; height: 179px; }
  pageblock-modal[data-modal-id="size-guide"] .sizechart-img.second { width: 149px; height: 199px; }
}

/* ---- Design-QA parity fixes (Figma vs live audit follow-up) ---- */

/* Section titles: H2 "Select your weight...", H1 Shipping address / Payment — Figtree, weight 800 */
.form-section__title {
  font-family: Figtree, Roboto, sans-serif;
  font-weight: 800;
}
@media (min-width: 768px) {
  .form-section__title { line-height: 23px; } /* all section headings — Payment, Select your weight... (QA 2026-08-31) */
}

/* Size Chart link: Figtree, underlined, right-aligned */
.size_chart-right { margin-left: auto; }
.size_chart-right > div:last-child {
  font-family: Figtree, Roboto, sans-serif;
  text-decoration: underline;
}

/* "New & Improved 2026 Edition" */
.text-reg.cc-red { font-family: Figtree, Roboto, sans-serif; }

/* Product name */
h1.display-olympus {
  font-family: "Neue Haas Grotesk Display Pro", Outfit, sans-serif;
}

/* Rating line — Figtree; text regular, "4.8/5" bold */
.review_component-wrapper {
  font-family: Figtree, Roboto, sans-serif;
  font-weight: 400;
}
.review_component-wrapper strong { font-weight: 700; } /* theme's `strong{font-weight:bolder}` pushed "4.8/5" to 900 (QA 2026-08-31) */

/* Trust badges */
.badge-text {
  font-family: Poppins, Roboto, sans-serif;
  line-height: 18px;
}
@media (max-width: 767px) {
  .badge-text { line-height: 12px; }
}

/* CTA */
.submit-button__main-text {
  font-family: Figtree, Roboto, sans-serif;
  font-weight: 800;
  letter-spacing: 0.9px;
}

/* Order summary rows (Total / Today you saved / Discount) */
.order-totals__label,
.order-totals__value {
  font-family: Figtree, Roboto, sans-serif;
  font-weight: 700;
  line-height: 19px;
}

/* Reviews */
.review-titles {
  font-family: Figtree, Roboto, sans-serif;
  font-size: 15px;
}
.review-descriptions { font-family: Figtree, Roboto, sans-serif; }
.review-auth { font-weight: 700; }   /* name bold; "| Verified Customer" is Regular in Figma (1028:7277) */

/* Icon labels (Lowers Stress and Anxiety, ...) */
.text-xs { font-family: Figtree, Roboto, sans-serif; }

/* Quantity pill: exact 52px outer height (inner controls' min-height pushed it to 54px) */
.option__quantity { height: 52px; box-sizing: border-box; }
.option__quantity-control { min-height: 0; }

/* Mobile-only spec values */
@media (max-width: 767px) {
  .form-section__subtitle {
    font-family: Figtree, Roboto, sans-serif;
    font-size: 14px;
  }
  .label-checkout,
  .label-checkout.cc-limos {
    font-family: Figtree, Roboto, sans-serif;
    color: #2b2b2b;
  }
  .form-section__price--reg { font-size: 20px; }        /* crossed-out price */
  .text-xs { color: #000; }
  .guarantee-section > div {
    font-family: Figtree, Roboto, sans-serif;
    color: #242424;
  }
  .guarantee-section .cc-guarantee {
    width: 73px;
    height: 73px;
    min-width: 73px;   /* img is a flex item; shrink floors at natural 70px otherwise */
    flex-shrink: 0;
    object-fit: contain;
  }
  .option__quantity { border-color: #90958b; }
}

/* ---- Figma font parity, whole checkout (desk 1028:7069 / mob 1028:7963), 2026-09-03 ----
   Figma sets all of these in Figtree; the BareEarth theme left them on Roboto. */
.form-section__sub.span-red,
.cc-weight-tile__label,
.cc-weight-guide,
.form-section__price--reg,
.form-section__price--sale,
.form-section__price--savings > div,
.form-section__subtitle,
.label-checkout,
.label-checkout.cc-limos,
.input-flds,
.parcelis-title,
.parcelis-subtitle,
.toggle-label,
.guarantee-section > div,
.payment-method__title,
.checkbox__label,
.cart-item__title,
.checkout__line-item__final-price,
.green-box p,
.shipping-note,
.security-banner__text,
.review-auth,
.text-block-4-copy,
.cart-summary__line.pb--header {
  font-family: Figtree, Roboto, sans-serif;
}
.payment-method .hide-tablet { font-family: Poppins, Roboto, sans-serif; }   /* "and more..." (1028:7409) */

/* size / weight corrections (desktop values; mobile below) */
.form-section__price--sale,
.form-section__price--sale .display-visible { font-size: 22px; }     /* sale price: Figtree Bold 22 (1028:7156); .display-visible carries its own 16/14px */
.form-section__price--sale .price__each { font-weight: 500; }          /* "/ea": Figtree Medium 17 */
.review-descriptions { font-size: 15px; }
.review-auth { font-size: 15px; }
.text-block-4-copy { font-weight: 400; font-size: 15px; }
.label-checkout,
.label-checkout.cc-limos { font-size: 13px; color: #2b2b2b; }          /* floating labels (1028:7359) */
.input-flds,
.input-flds.cc-limos,
.input-flds.select-field.cc-limos { font-size: 15px; }                 /* placeholders / values (1028:7347) */
select.input-flds { font-weight: 600; }                                /* chosen value "United States": SemiBold (1028:7360) */
.parcelis-toggle .toggle-label,
.parcelis-toggle.is-on .toggle-label { font-weight: 500; font-size: 14px; }   /* "ON" (1028:7480) */
.payment-method__title { font-size: 15px; }                            /* "Credit Card" (1028:7407) */
.checkbox__label { font-weight: 400; font-size: 14px; }                /* "Use shipping address…" (1028:7419) */
.cart-item__title { font-weight: 700; }                                /* "1x Weighted Blanket" (1028:7386) */
.checkout__line-item__final-price { font-weight: 400; }                /* "$XX.XX/ea" (1028:7388) */
.order-totals__value.order-totals__value--total { font-weight: 400; }  /* Total amount Regular (1028:7385) */
.security-banner__text { font-weight: 700; }                           /* "100% Encrypted…" (1028:8160) */
.divider-section__text { font-family: Poppins, Roboto, sans-serif; font-weight: 700; }   /* "OR" (1028:7441) */
.footer_legal-link,
.footer_link-wrapper { font-size: 12px; }

@media (max-width: 767px) {
  .form-section__price--sale,
  .form-section__price--sale .display-visible { font-size: 20px; }
  .form-section__price--sale .price__each { font-size: 20px; }
  .form-section__price--savings > div { font-size: 14px; }
  .review-titles { font-size: 14px; }
  .review-descriptions { font-size: 14px; }
  .review-auth { font-size: 14px; }
  .text-block-4-copy { font-size: 12px; }
  .order-totals__line--total .order-totals__label,
  .order-totals__line--total .order-totals__value { font-size: 16px; }
  .divider-section__text { font-size: 13px; }
  .cart-item__content { align-items: flex-start; }
  .footer-logo { width: 185px; }   /* theme: 110px; flex/max-width/margin already match */
}
