/* Checkout B (FluffCo-style steps) — page-specific styles.
   Loaded only by checkout-v2.html, after checkout-figma.css. */

/* ── Two-phase reveal ─────────────────────────────────────────────── */
.jc-hidden {
  display: none !important;
}

/* SELL-1030 — the card number and CVV fields accepted no input at all on this
   checkout: window.Spreedly stayed undefined and zero Spreedly iframes mounted,
   so a customer could not pay by card. Verified live before and after.

   Root cause is in the SDK. CreditCardService.initialize() runs ONCE at SDK boot
   and resolves the fields through FieldFinder.findField(), which skips anything
   with `offsetParent === null`:

     if (!options.includeHidden && htmlElement.offsetParent === null) continue;

   `display:none` on an ancestor nulls offsetParent, so with Step 4 inside
   `#jc-step-3.jc-hidden` the SDK found no card fields and returned before
   loadSpreedlyScript(). Nothing re-runs it when Add-to-Cart reveals the step,
   so the iframes were never mounted. Confirmed by clicking through the reveal:
   the step became visible and Spreedly was still undefined.

   Fix: keep Step 4 in the layout tree while hidden by parking it off-screen.
   Removing .jc-hidden on Add-to-Cart drops it back into normal flow unchanged.
   Scoped to #jc-step-3 so plain .jc-hidden stays display:none everywhere else.
   Same rule already shipped on iceforce/checkout-v2 (SELL-1053). */
#jc-step-3.jc-hidden {
  display: block !important;
  position: absolute !important;
  left: -200vw !important;
  top: 0 !important;
  width: 100% !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ── Step titles (same pattern as .form-section__title) ───────────── */
.jc-step-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--wc-navy, #1f2c56);
  margin: 0;
}

/* ── Add to Cart button + Klarna tag ──────────────────────────────── */
.jc-atc-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.jc-klarna-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  color: #5c5c5e;
  text-align: center;
}
.jc-klarna-tag__logo {
  width: 44px;
  height: auto;
  flex: none;
  display: block;
}

/* ── "or pay with card" divider label — keep on one line ──────────── */
.exp-checkout .divider-section__text-v2 {
  white-space: nowrap;
  padding: 0 10px;
}

/* ── Shipping note (truck + "Most orders ship within 24 hours") ───── */
.jc-ship-note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #5c5c5e;
  margin-top: 8px;
}
.jc-ship-note__icon {
  width: 20px;
  height: 20px;
  flex: none;
  display: flex;
  align-items: center;
}

/* ── Smaller trust badges under the purchase button ───────────────── */
.jc-trust-sm .trust-badge--text {
  font-size: 10px;
  letter-spacing: 0.12em;
}
@media screen and (max-width: 479px) {
  .jc-trust-sm .trust-badge--text {
    font-size: 8px;
    letter-spacing: 0.08em;
  }
}

/* ── Product carousel sizing ──────────────────────────────────────── */
.checkout-media__wrapper [data-component="swiper"] {
  width: 100%;
}
.checkout-media__wrapper
  [data-component="swiper"]
  [swiper="slider-main"]
  .swiper-slide_image-wrap
  img.cover {
  object-fit: contain;
  background: #fff;
}
.checkout-media__wrapper [swiper="slider-main"] .swiper-slide_image-wrap {
  border-radius: 12px;
  overflow: hidden;
}

/* ── Kevin feedback 2026-07-14 ─────────────────────────────── */

/* No dashed border on the Step 2 protection and shipping-protection blocks
   (next-core.css puts a 2px dashed border on every prepurchase-upsell). */
[data-component="prepurchase-upsell"][data-variant="check-b"],
[data-component="prepurchase-upsell"][data-variant="switch-b"] {
  border: none;
  border-radius: 0;
  overflow: visible;
}

/* USP checkmark list directly under the carousel (all viewports). */
.jc-usp-list {
  list-style: none;
  margin: 14px 0 4px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.jc-usp-list li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 15px;
  font-weight: 500;
  color: var(--brand--color--primary-dark, #1e2a6a);
}
.jc-usp-check {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #1bba86;
  color: #fff;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  transform: translateY(2px);
}

/* Small bundle image on each package card (1x / 3x / 5x). */
.os-card__image-slot.jc-bundle-img {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.os-card__image-slot.jc-bundle-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
@media (max-width: 479px) {
  .os-card__image-slot.jc-bundle-img { width: 48px; height: 48px; }
}