/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   UNIT 365 — PDP Additions  v1
   Scope: payment icon rail + mobile sticky add-to-cart bar.
   All 6 PDP pages. Desktop ≥860px: sticky bar is display:none.
   z-index 110 keeps the bar below cart drawer (220) + modals.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */


/* ═══════════════════════════════════════════════════════════
   1. PAYMENT ICON RAIL
   Lives inside .cta, below the finance note.
   ═══════════════════════════════════════════════════════════ */

.pay-rail {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 11px;
}

.cta .finance-note {
  text-align: center !important;
}

.pay-icon {
  height: 22px;
  width: auto;
  display: block;
  flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════════════
   2. STICKY ADD-TO-CART BAR
   Slides up from the bottom edge when the main ATC button
   exits the viewport. Managed via IntersectionObserver in JS.
   ═══════════════════════════════════════════════════════════ */

.sticky-atc {
  display: none;             /* mobile breakpoint overrides to flex */
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: #fff;
  border-top: 1px solid #e5e8ee;
  padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  z-index: 110;
  transform: translateY(100%);
  transition: transform 0.22s ease;
  will-change: transform;
}

/* Mobile only */
@media (max-width: 860px) {
  .sticky-atc { display: flex; }
}

/* Visible state (toggled by IntersectionObserver) */
.sticky-atc.is-visible {
  transform: translateY(0);
}

/* Info column: product name + current variant */
.sticky-atc__info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}

.sticky-atc__name {
  font-family: var(--tf-sans, Barlow, sans-serif);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #111518;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.sticky-atc__sel {
  font-family: var(--tf-sans, Barlow, sans-serif);
  font-size: 0.63rem;
  font-weight: 500;
  color: #8a9098;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

/* Add-to-cart button */
.sticky-atc__btn {
  flex-shrink: 0;
  height: 40px;
  padding: 0 22px;
  background: #111518;
  color: #fff;
  border: none;
  border-radius: 0;
  font-family: var(--tf-sans, Barlow, sans-serif);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.14s ease;
  white-space: nowrap;
}

.sticky-atc__btn:disabled {
  background: #c5cdd5;
  cursor: default;
}

@media (hover: hover) and (pointer: fine) {
  .sticky-atc__btn:not(:disabled):hover {
    background: #2a2e32;
  }
}


/* ═══════════════════════════════════════════════════════════
   3. REDUCED MOTION
   ═══════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .sticky-atc,
  .sticky-atc__btn {
    transition: none;
  }
}