/* ============================================================
   NEXO PRINT — Cart & Checkout (/cart) styles
   Builds on tokens.css + landing.css (shared header/footer)
   ============================================================ */

.checkout-main { background: var(--color-mist); min-height: 70vh; padding-bottom: var(--space-16); }

/* breadcrumb reuse */
.breadcrumb { background: #fff; border-bottom: 1px solid var(--color-border); }
.breadcrumb .container { display: flex; align-items: center; gap: var(--space-2); padding-block: var(--space-3); font-size: 0.875rem; color: var(--color-text-muted); flex-wrap: wrap; }
.breadcrumb a { color: var(--color-text-muted); }
.breadcrumb a:hover { color: var(--color-navy); }
.breadcrumb .current { color: var(--color-navy); font-weight: 600; }

/* ───── Stepper ───── */
.checkout-head { background: linear-gradient(180deg, #fff, var(--color-mist)); border-bottom: 1px solid var(--color-border); }
.checkout-head .container { padding-block: var(--space-8) var(--space-6); }
.checkout-head h1 { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 800; color: var(--color-navy); margin: 0 0 var(--space-6); letter-spacing: -0.02em; }

.stepper { display: flex; align-items: flex-start; width: 100%; }
.step {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  flex: none; width: 92px; position: relative; z-index: 2;
}
.step__dot {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; border: 2px solid var(--color-border-strong); color: var(--color-text-muted);
  font-weight: 800; font-size: 1rem; transition: all var(--duration-normal) var(--ease-out);
}
.step__dot svg { width: 20px; height: 20px; }
.step__label { font-size: 0.8125rem; font-weight: 600; color: var(--color-text-muted); text-align: center; transition: color var(--duration-normal) var(--ease-out); }
.step__bar { flex: 1; height: 2px; background: var(--color-border-strong); margin-top: 21px; position: relative; z-index: 1; min-width: 24px; }
.step__bar i { position: absolute; inset: 0; width: 0; background: var(--color-navy); transition: width var(--duration-slow) var(--ease-out); }

.step.is-active .step__dot { border-color: var(--color-navy); background: var(--color-navy); color: #fff; box-shadow: 0 0 0 4px var(--color-sky); }
.step.is-active .step__label { color: var(--color-navy); }
.step.is-done .step__dot { border-color: var(--color-success); background: var(--color-success); color: #fff; }
.step.is-done .step__label { color: var(--color-success-dark, var(--color-success)); }
.step.is-done + .step__bar i, .step__bar.is-filled i { width: 100%; }

/* ───── Layout ───── */
.checkout-grid {
  display: grid; grid-template-columns: 1fr 360px; gap: var(--space-8);
  align-items: start; padding-top: var(--space-8);
}
@media (max-width: 980px) { .checkout-grid { grid-template-columns: 1fr; gap: var(--space-5); } }

.checkout-panel { min-width: 0; }
.panel-step { display: none; animation: stepIn 360ms var(--ease-out); }
.panel-step.is-active { display: block; }
@keyframes stepIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.section-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-xs); margin-bottom: var(--space-5); overflow: hidden; }
.section-card__head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-5); border-bottom: 1px solid var(--color-border); }
.section-card__head h2 { font-size: 1.1875rem; font-weight: 700; color: var(--color-navy); margin: 0; display: flex; align-items: center; gap: var(--space-2); }
.section-card__head .count { font-size: 0.875rem; color: var(--color-text-muted); }
.section-card__body { padding: var(--space-5); }
.section-card__body.flush { padding: 0; }

/* ───── Cart line items ───── */
.cart-line {
  display: grid; grid-template-columns: 240px 1fr; gap: var(--space-6);
  padding: var(--space-6); border-bottom: 1px solid var(--color-border); align-items: start;
}
.cart-line:last-child { border-bottom: 0; }

/* ── large product mockup (Vistaprint-style) ── */
.cl-image { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.cl-stage {
  position: relative; width: 100%; aspect-ratio: 1; border-radius: var(--radius-xl);
  background: var(--color-neutral-100); overflow: hidden;
  display: grid; place-items: center;
}
.cl-view { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity var(--duration-normal) var(--ease-out); padding: 14%; }
.cl-view.is-active { opacity: 1; }
.cl-view > * { max-width: 100%; max-height: 100%; }
.cl-mockup { width: 86%; filter: drop-shadow(0 10px 22px rgba(15,23,42,0.16)); }
.cl-design-board { box-shadow: 0 8px 28px rgba(15,23,42,0.18); border-radius: 4px; overflow: hidden; background: #fff; }

.cl-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--color-border);
  background: rgba(255,255,255,0.94); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  color: var(--color-navy); display: grid; place-items: center; cursor: pointer;
  box-shadow: var(--shadow-sm); transition: background var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.cl-nav:hover { background: #fff; }
.cl-nav.prev { inset-inline-start: 10px; }
.cl-nav.next { inset-inline-end: 10px; }
.cl-nav svg { width: 18px; height: 18px; }
.cl-zoom {
  position: absolute; inset-block-end: 10px; inset-inline-end: 10px; z-index: 3;
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--color-border);
  background: rgba(255,255,255,0.94); color: var(--color-slate-dark); display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-xs);
}
.cl-zoom:hover { color: var(--color-navy); }
.cl-zoom svg { width: 17px; height: 17px; }
.cl-dots { display: flex; gap: 6px; justify-content: center; }
.cl-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-neutral-300); border: 0; cursor: pointer; padding: 0; transition: background var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); }
.cl-dot.is-active { background: var(--color-navy); transform: scale(1.25); }
.cl-edit-links { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.cl-edit-link { display: inline-flex; align-items: center; gap: 6px; font-size: 0.875rem; font-weight: 600; color: var(--color-navy); background: none; border: 0; cursor: pointer; padding: 4px 6px; border-radius: var(--radius-md); }
.cl-edit-link:hover { background: var(--color-mist); text-decoration: underline; }
.cl-edit-link svg { width: 15px; height: 15px; }

/* ── line info column ── */
.cart-line__info { min-width: 0; display: flex; flex-direction: column; }
.cl-info-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-3); }
.cart-line__title { font-size: 1.25rem; font-weight: 700; color: var(--color-text); margin: 0 0 6px; }
.cart-line__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.cl-tag { font-size: 0.75rem; font-weight: 600; padding: 3px 9px; border-radius: var(--radius-full); background: var(--color-neutral-100); color: var(--color-slate-dark); }
.cl-tag--design { background: var(--color-sky); color: var(--color-navy); }
.cl-tag--upload { background: var(--color-cream); color: var(--tier-gold-text); }
/* design-service cart line (kind:'design_service') */
.cl-tag--service { background: var(--color-navy); color: #fff; }
.cl-image--service { justify-content: flex-start; }
/* full self-contained app-icon (its own gradient + rounded corners) filling the media square */
.cl-service-ico {
  width: 100%; aspect-ratio: 1; border-radius: var(--radius-xl); overflow: hidden;
  display: block;
}
.cl-service-ico img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cl-service-rows { margin-top: var(--space-2); }
.cart-line--service .cart-line__title { color: var(--color-navy); }
.summary-item__media--service { background: none; }
.summary-item__media--service img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cart-line__remove { background: transparent; border: 0; color: var(--color-text-muted); cursor: pointer; padding: 6px 8px; border-radius: var(--radius-md); font-size: 0.875rem; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; flex: none; transition: all var(--duration-fast) var(--ease-out); }
.cart-line__remove:hover { color: var(--color-danger); background: var(--color-danger-bg); }
.cart-line__remove svg { width: 16px; height: 16px; }

/* quantity dropdown */
.cl-qty { margin-bottom: var(--space-4); max-width: 260px; }
.cl-qty label { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--color-text-muted); margin-bottom: 6px; }
.cl-qty .sel-wrap { position: relative; }
.cl-qty select {
  width: 100%; padding: 0.7rem 0.9rem; border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-lg);
  font-family: inherit; font-size: 0.9375rem; font-weight: 600; color: var(--color-text); background: #fff;
  -webkit-appearance: none; appearance: none; cursor: pointer;
}
.cl-qty select:focus { outline: none; border-color: var(--color-blue); box-shadow: var(--shadow-focus); }
.cl-qty .sel-wrap::after { content: ''; position: absolute; inset-inline-end: 14px; top: 50%; width: 9px; height: 9px; border-inline-end: 2px solid var(--color-slate); border-block-end: 2px solid var(--color-slate); transform: translateY(-70%) rotate(45deg); pointer-events: none; }

/* selected options collapsible */
.cl-options { border-top: 1px solid var(--color-border); }
.cl-options__toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) 0; background: none; border: 0; cursor: pointer; font-size: 0.9375rem; font-weight: 700; color: var(--color-text); }
.cl-options__toggle .chev { transition: transform var(--duration-fast) var(--ease-out); color: var(--color-slate); }
.cl-options.is-open .cl-options__toggle .chev { transform: rotate(180deg); }
.cl-options__body { display: none; padding-bottom: var(--space-3); }
.cl-options.is-open .cl-options__body { display: block; }
.cl-opt-row { display: flex; justify-content: space-between; font-size: 0.875rem; padding: 5px 0; }
.cl-opt-row .k { color: var(--color-text-muted); }
.cl-opt-row .v { color: var(--color-text); font-weight: 600; }

.cl-total { display: flex; align-items: center; justify-content: space-between; padding-top: var(--space-4); margin-top: auto; border-top: 1px solid var(--color-border); }
.cl-total .lbl { font-size: 0.9375rem; color: var(--color-text-muted); }
.cl-total .amt { display: flex; flex-direction: column; align-items: flex-end; }
.cl-total .amt .unit { font-size: 0.75rem; color: var(--color-text-faint); }
.cl-total .amt b { font-size: 1.375rem; font-weight: 800; color: var(--color-navy); }

@media (max-width: 560px) {
  .cart-line { grid-template-columns: 1fr; gap: var(--space-4); padding: var(--space-4); }
  .cl-image { max-width: 280px; margin: 0 auto; }
  /* Stepper: fixed 92px steps + bars overflow ~390px screens. Let steps shrink
     and trim the dot/label so all four fit without horizontal scroll. */
  .step { width: auto; flex: 1 1 0; min-width: 0; gap: var(--space-1); }
  .step__dot { width: 34px; height: 34px; font-size: 0.875rem; }
  .step__dot svg { width: 16px; height: 16px; }
  .step__label { font-size: 0.6875rem; }
  .step__bar { min-width: 8px; margin-top: 17px; }
}

/* ── zoom lightbox ── */
.cl-lightbox { position: fixed; inset: 0; z-index: 1600; background: rgba(15,23,42,0.78); display: grid; place-items: center; padding: var(--space-6); opacity: 0; visibility: hidden; transition: opacity var(--duration-normal) var(--ease-out), visibility 0s linear var(--duration-normal); }
.cl-lightbox.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.cl-lightbox__inner { background: var(--color-neutral-100); border-radius: var(--radius-2xl); padding: var(--space-10); max-width: min(680px, 92vw); max-height: 88vh; display: grid; place-items: center; transform: scale(0.95); transition: transform var(--duration-normal) var(--ease-spring); }
.cl-lightbox.is-open .cl-lightbox__inner { transform: scale(1); }
.cl-lightbox__inner > * { max-width: 100%; max-height: 70vh; }
.cl-lightbox__close { position: absolute; inset-block-start: var(--space-5); inset-inline-end: var(--space-5); width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,0.15); color: #fff; display: grid; place-items: center; cursor: pointer; }
.cl-lightbox__close:hover { background: rgba(255,255,255,0.28); }

/* empty cart */
.cart-empty-state { text-align: center; padding: var(--space-16) var(--space-4); }
.cart-empty-state .ico { width: 96px; height: 96px; margin: 0 auto var(--space-5); border-radius: var(--radius-2xl); background: var(--color-sky); color: var(--color-navy); display: grid; place-items: center; }
.cart-empty-state .ico svg { width: 44px; height: 44px; }
.cart-empty-state h2 { font-size: 1.5rem; color: var(--color-navy); margin: 0 0 var(--space-2); }
.cart-empty-state p { color: var(--color-text-muted); margin: 0 0 var(--space-6); }

/* cross-sell — "More with your design" big-image cards */
.crosssell-full { margin-top: var(--space-5); }
.crosssell { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
@media (max-width: 1100px) { .crosssell { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .crosssell { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .crosssell { grid-template-columns: 1fr; } }
.cs-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-xl); overflow: hidden; transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); }
.cs-card:hover { border-color: var(--color-blue-light); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.cs-card__media { position: relative; aspect-ratio: 1; background: var(--color-neutral-100); display: grid; place-items: center; padding: 16%; cursor: pointer; }
.cs-card__media .cs-mockup { width: 90%; filter: drop-shadow(0 8px 18px rgba(15,23,42,0.15)); }
.cs-card__fav { position: absolute; inset-block-start: 10px; inset-inline-end: 10px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255,255,255,0.9); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); box-shadow: var(--shadow-xs); color: var(--color-slate); display: grid; place-items: center; cursor: pointer; transition: color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); }
.cs-card:hover .cs-card__fav { transform: none; }
.cs-card__fav:hover { color: #E0567A; transform: scale(1.08); }
.cs-card__fav.is-fav { color: #E0567A; }
.cs-card__fav.is-fav svg { fill: #E0567A; }
.cs-card__fav svg { width: 20px; height: 20px; }
.cs-card__body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.cs-card__title { font-size: 0.9375rem; font-weight: 700; color: var(--color-text); margin: 0; line-height: 1.35; min-height: 2.6em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cs-card__price { font-size: 0.875rem; }
.cs-card__price .from { color: var(--color-text); font-weight: 700; }
.cs-card__price .each { color: var(--color-text-faint); font-size: 0.75rem; display: block; margin-top: 1px; }
.cs-card__qty { position: relative; margin-top: auto; }
.cs-card__qty label { font-size: 0.75rem; color: var(--color-text-muted); display: block; margin-bottom: 4px; }
.cs-card__qty select { width: 100%; padding: 0.55rem 0.7rem; border: 1.5px solid var(--color-border); border-radius: var(--radius-md); font-family: inherit; font-size: 0.875rem; font-weight: 600; color: var(--color-text); background: #fff; -webkit-appearance: none; appearance: none; cursor: pointer; }
.cs-card__qty select:focus { outline: none; border-color: var(--color-blue); }
.cs-card__qty::after { content: ''; position: absolute; inset-inline-end: 12px; bottom: 16px; width: 8px; height: 8px; border-inline-end: 2px solid var(--color-slate); border-block-end: 2px solid var(--color-slate); transform: rotate(45deg); pointer-events: none; }
.cs-card__add { width: 100%; padding: 0.65rem; border-radius: var(--radius-lg); border: 0; background: var(--color-navy); color: #fff; font-family: inherit; font-weight: 700; font-size: 0.875rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: background var(--duration-fast) var(--ease-out); }
/* single-qty cards have no qty <select>; push their add button to the bottom so the row stays aligned */
.cs-card__body:not(:has(.cs-card__qty)) .cs-card__add { margin-top: auto; }
.cs-card__add:hover { background: var(--color-navy-dark); }
.cs-card__add svg { width: 16px; height: 16px; }

/* ───── Forms (step 2/3) ───── */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field label { font-size: 0.875rem; font-weight: 600; color: var(--color-text); }
.field label .req { color: var(--color-danger); }
.field input, .field select, .field textarea {
  width: 100%; padding: 0.7rem 0.9rem; border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg); font-family: inherit; font-size: 0.9375rem; background: #fff; color: var(--color-text);
  transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--color-blue); box-shadow: var(--shadow-focus); }
.field input::placeholder, .field textarea::placeholder { color: var(--color-text-faint); }
.field.has-error input, .field.has-error select { border-color: var(--color-danger); }
.field__error { font-size: 0.75rem; color: var(--color-danger); display: none; }
.field.has-error .field__error { display: block; }
.field textarea { resize: vertical; min-height: 80px; }

/* delivery / shipping options */
.option-row { display: flex; flex-direction: column; gap: var(--space-3); }
.opt-card {
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4);
  border: 1.5px solid var(--color-border); border-radius: var(--radius-lg); cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}
.opt-card:hover { border-color: var(--color-blue-light); }
.opt-card.is-selected { border-color: var(--color-navy); background: var(--color-sky); }
.opt-card input { position: absolute; opacity: 0; }
.opt-card__radio { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--color-border-strong); display: grid; place-items: center; transition: border-color var(--duration-fast) var(--ease-out); }
.opt-card__radio::after { content: ''; width: 11px; height: 11px; border-radius: 50%; background: var(--color-navy); transform: scale(0); transition: transform var(--duration-fast) var(--ease-spring); }
.opt-card.is-selected .opt-card__radio { border-color: var(--color-navy); }
.opt-card.is-selected .opt-card__radio::after { transform: scale(1); }
.opt-card__icon { flex: none; width: 42px; height: 42px; border-radius: var(--radius-lg); background: var(--color-neutral-100); color: var(--color-navy); display: grid; place-items: center; }
.opt-card__icon svg { width: 22px; height: 22px; }
.opt-card__body { flex: 1; }
.opt-card__body h4 { font-size: 0.9375rem; font-weight: 700; margin: 0 0 2px; color: var(--color-text); }
.opt-card__body p { font-size: 0.8125rem; color: var(--color-text-muted); margin: 0; }
.opt-card__price { font-size: 0.9375rem; font-weight: 800; color: var(--color-navy); }
.opt-card__price.free { color: var(--color-success); }

/* payment methods */
.pay-grid { display: grid; gap: var(--space-3); }
.pay-card { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); border: 1.5px solid var(--color-border); border-radius: var(--radius-lg); cursor: pointer; transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out); }
.pay-card:hover { border-color: var(--color-blue-light); }
.pay-card.is-selected { border-color: var(--color-navy); background: var(--color-sky); }
.pay-card__logo { flex: none; width: 54px; height: 38px; border-radius: var(--radius-md); background: #fff; border: 1px solid var(--color-border); display: grid; place-items: center; font-weight: 800; font-size: 0.7rem; color: var(--color-navy); }
.pay-card__body { flex: 1; }
.pay-card__body h4 { margin: 0 0 2px; font-size: 0.9375rem; font-weight: 700; color: var(--color-text); }
.pay-card__body p { margin: 0; font-size: 0.8125rem; color: var(--color-text-muted); }
.pay-card__radio { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--color-border-strong); display: grid; place-items: center; }
.pay-card__radio::after { content: ''; width: 11px; height: 11px; border-radius: 50%; background: var(--color-navy); transform: scale(0); transition: transform var(--duration-fast) var(--ease-spring); }
.pay-card.is-selected .pay-card__radio { border-color: var(--color-navy); }
.pay-card.is-selected .pay-card__radio::after { transform: scale(1); }

/* review (step 3) summary blocks */
.review-block { padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); margin-bottom: var(--space-3); }
.review-block__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); }
.review-block__head h4 { font-size: 0.9375rem; font-weight: 700; color: var(--color-navy); margin: 0; }
.review-block__edit { font-size: 0.8125rem; font-weight: 600; color: var(--color-blue); background: none; border: 0; cursor: pointer; }
.review-block__edit:hover { text-decoration: underline; }
.review-block p { margin: 0; font-size: 0.875rem; color: var(--color-text-muted); line-height: 1.7; }

/* step nav */
.step-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-2); }
.step-nav .btn-back { background: transparent; border: 0; color: var(--color-text-muted); font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.6rem; }
.step-nav .btn-back:hover { color: var(--color-navy); }
.step-nav .spacer { flex: 1; }

/* ───── Order summary (sticky) ───── */
.order-summary { position: sticky; top: var(--space-4); }
.summary-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); overflow: hidden; }
.summary-card__head { padding: var(--space-5); border-bottom: 1px solid var(--color-border); }
.summary-card__head h3 { margin: 0; font-size: 1.0625rem; font-weight: 700; color: var(--color-navy); }
.summary-card__body { padding: var(--space-5); }

.summary-items { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-4); max-height: 200px; overflow-y: auto; }
.summary-item { display: flex; gap: var(--space-3); align-items: center; }
.summary-item__media { flex: none; width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--color-cream); display: grid; place-items: center; overflow: hidden; position: relative; }
.summary-item__media svg { width: 82%; height: 82%; }
.summary-item__media .q { position: absolute; inset-block-start: -6px; inset-inline-start: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--radius-full); background: var(--color-navy); color: #fff; font-size: 0.6875rem; font-weight: 700; display: grid; place-items: center; }
.summary-item__info { flex: 1; min-width: 0; }
.summary-item__info h5 { margin: 0; font-size: 0.8125rem; font-weight: 600; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.summary-item__info span { font-size: 0.75rem; color: var(--color-text-faint); }
.summary-item__price { font-size: 0.8125rem; font-weight: 700; color: var(--color-navy); white-space: nowrap; }

/* coupon */
.coupon { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); }
.coupon input { flex: 1; padding: 0.6rem 0.8rem; border: 1.5px solid var(--color-border); border-radius: var(--radius-lg); font-family: inherit; font-size: 0.875rem; }
.coupon input:focus { outline: none; border-color: var(--color-blue); }
.coupon button { padding: 0.6rem 1.1rem; border-radius: var(--radius-lg); border: 1.5px solid var(--color-navy); background: #fff; color: var(--color-navy); font-weight: 700; font-size: 0.875rem; cursor: pointer; transition: background var(--duration-fast) var(--ease-out); }
.coupon button:hover { background: var(--color-navy); color: #fff; }
.coupon-msg { font-size: 0.8125rem; margin: -8px 0 var(--space-4); display: none; }
.coupon-msg.ok { color: var(--color-success); display: block; }
.coupon-msg.err { color: var(--color-danger); display: block; }

.summary-rows { border-top: 1px solid var(--color-border); padding-top: var(--space-4); }
.summary-row { display: flex; align-items: center; justify-content: space-between; font-size: 0.9375rem; color: var(--color-text-muted); margin-bottom: var(--space-3); }
.summary-row .val { color: var(--color-text); font-weight: 600; }
.summary-row.discount .val { color: var(--color-success); }
.summary-row.total { font-size: 1.25rem; font-weight: 800; color: var(--color-navy); padding-top: var(--space-3); border-top: 1px solid var(--color-border); margin-bottom: 0; }

.summary-card__foot { padding: 0 var(--space-5) var(--space-5); }
.summary-card__foot .btn { width: 100%; }
.summary-trust { display: flex; align-items: center; justify-content: center; gap: var(--space-2); font-size: 0.75rem; color: var(--color-text-faint); margin-top: var(--space-3); }
.summary-trust svg { width: 14px; height: 14px; color: var(--color-success); }

.free-ship-hint { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3); background: var(--color-success-bg); border-radius: var(--radius-lg); font-size: 0.8125rem; color: var(--color-success-dark, #15803D); margin-bottom: var(--space-4); }
.free-ship-hint.reached { color: var(--color-success); font-weight: 600; }
.free-ship-hint svg { flex: none; width: 18px; height: 18px; }
.free-ship-bar { height: 5px; background: var(--color-neutral-200); border-radius: var(--radius-full); overflow: hidden; margin-top: 6px; }
.free-ship-bar i { display: block; height: 100%; background: var(--color-success); border-radius: inherit; transition: width var(--duration-slow) var(--ease-out); }

/* ───── Confirmation (step 4) ───── */
.confirm-wrap { text-align: center; padding: var(--space-10) var(--space-6); }
.confirm-check { width: 96px; height: 96px; margin: 0 auto var(--space-5); border-radius: 50%; background: var(--color-success-bg); color: var(--color-success); display: grid; place-items: center; animation: popIn 520ms var(--ease-spring); }
@keyframes popIn { 0% { transform: scale(0); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
.confirm-check svg { width: 48px; height: 48px; }
.confirm-wrap h2 { font-size: 1.75rem; color: var(--color-navy); margin: 0 0 var(--space-2); }
.confirm-wrap > p { color: var(--color-text-muted); font-size: 1.0625rem; margin: 0 0 var(--space-6); }
.order-receipt { max-width: 480px; margin: 0 auto var(--space-6); text-align: start; background: var(--color-mist); border: 1px solid var(--color-border); border-radius: var(--radius-xl); overflow: hidden; }
.order-receipt__head { padding: var(--space-4) var(--space-5); background: var(--color-navy); color: #fff; display: flex; align-items: center; justify-content: space-between; }
.order-receipt__head .lbl { font-size: 0.8125rem; opacity: 0.8; }
.order-receipt__head .num { font-size: 1.125rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.order-receipt__body { padding: var(--space-5); }
.receipt-row { display: flex; align-items: center; justify-content: space-between; font-size: 0.9375rem; padding-block: var(--space-2); }
.receipt-row .k { color: var(--color-text-muted); }
.receipt-row .v { color: var(--color-text); font-weight: 600; }
.confirm-actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }
.confirm-timeline { display: flex; justify-content: center; gap: 0; max-width: 520px; margin: 0 auto var(--space-8); }
.ctl-step { flex: 1; text-align: center; position: relative; }
.ctl-step .d { width: 30px; height: 30px; border-radius: 50%; background: var(--color-neutral-200); color: var(--color-text-muted); display: grid; place-items: center; margin: 0 auto var(--space-2); position: relative; z-index: 2; }
.ctl-step.active .d { background: var(--color-navy); color: #fff; }
.ctl-step .d svg { width: 15px; height: 15px; }
.ctl-step span { font-size: 0.75rem; color: var(--color-text-muted); }
.ctl-step.active span { color: var(--color-navy); font-weight: 600; }
.ctl-step::before { content: ''; position: absolute; top: 15px; inset-inline-end: 50%; width: 100%; height: 2px; background: var(--color-neutral-200); z-index: 1; }
.ctl-step:first-child::before { display: none; }
.ctl-step.active::before { background: var(--color-navy); }

/* toast reuse */
.toast-stack { position: fixed; inset-block-end: var(--space-6); inset-inline-end: var(--space-6); z-index: 1700; display: flex; flex-direction: column; gap: var(--space-3); pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: var(--space-3); min-width: 290px; max-width: 400px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); border-inline-start: 4px solid var(--color-success); background: #fff; box-shadow: var(--shadow-lg); animation: toastIn var(--duration-normal) var(--ease-spring); }
@keyframes toastIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.toast.is-out { animation: toastOut var(--duration-normal) var(--ease-out) forwards; }
@keyframes toastOut { to { opacity: 0; transform: translateY(8px); } }
.toast .ticon { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--color-success-bg); color: var(--color-success); display: grid; place-items: center; }
.toast .ttitle { font-size: 0.9375rem; font-weight: 700; color: var(--color-text); }
.toast .tsub { font-size: 0.8125rem; color: var(--color-text-muted); }

/* inline spinner for pay button */
.spin-inline { display: inline-block; width: 15px; height: 15px; border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff; border-radius: 50%; animation: spinInline 0.7s linear infinite; vertical-align: -2px; margin-inline-end: 6px; }
@keyframes spinInline { to { transform: rotate(360deg); } }
.btn-disabled { cursor: not-allowed; }

/* ═══════════════════════════════════════════════════════════
   In-cart OPTIONS EDITOR — mirrors the PDP config card, but
   saves straight back to the cart (no detour through the PDP).
   ═══════════════════════════════════════════════════════════ */
.opt-edit { position: fixed; inset: 0; z-index: 1650; background: rgba(15,23,42,0.78); display: grid; place-items: center; padding: var(--space-5); opacity: 0; visibility: hidden; transition: opacity var(--duration-normal) var(--ease-out), visibility 0s linear var(--duration-normal); }
.opt-edit.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.opt-edit__panel { width: min(560px, 100%); max-height: 90vh; display: flex; flex-direction: column; background: #fff; border-radius: var(--radius-2xl); box-shadow: var(--shadow-2xl, 0 30px 60px rgba(15,23,42,0.4)); transform: translateY(12px) scale(0.98); transition: transform var(--duration-normal) var(--ease-spring); overflow: hidden; }
.opt-edit.is-open .opt-edit__panel { transform: translateY(0) scale(1); }
.opt-edit__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--color-border); }
.opt-edit__eyebrow { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; color: var(--color-blue); margin-bottom: 4px; }
.opt-edit__head h3 { font-size: 1.1875rem; font-weight: 800; color: var(--color-navy); margin: 0; line-height: 1.3; }
.opt-edit__close { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--color-neutral-100); color: var(--color-text-muted); display: grid; place-items: center; cursor: pointer; transition: background var(--duration-fast) var(--ease-out); }
.opt-edit__close:hover { background: var(--color-neutral-200); color: var(--color-text); }
.opt-edit__close svg { width: 20px; height: 20px; }
.opt-edit__body { padding: var(--space-6); overflow-y: auto; }
.opt-edit__foot { display: flex; gap: var(--space-3); padding: var(--space-4) var(--space-6); border-top: 1px solid var(--color-border); background: var(--color-neutral-50); }
.opt-edit__foot .btn { flex: 1; }
.opt-edit__foot .btn-secondary { flex: 0 0 auto; min-width: 110px; }

/* config card + chips + qty — visual parity with the product page */
.opt-edit .config-card { border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-5); background: var(--color-neutral-50); }
.opt-edit .config-group { margin-bottom: var(--space-5); }
.opt-edit .config-group:last-child { margin-bottom: 0; }
.opt-edit .config-label { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.opt-edit .config-label .ctitle { font-size: 0.9375rem; font-weight: 700; color: var(--color-text); }
.opt-edit .config-label .cvalue { font-size: 0.875rem; font-weight: 600; color: var(--color-blue); }
.opt-edit .opt-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.opt-edit .opt-chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.6rem 1rem; border-radius: var(--radius-lg); border: 1.5px solid var(--color-border); background: #fff; color: var(--color-text); font-family: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: all var(--duration-fast) var(--ease-out); }
.opt-edit .opt-chip:hover { border-color: var(--color-blue-light); }
.opt-edit .opt-chip.is-active { border-color: var(--color-navy); background: var(--color-navy); color: #fff; }
.opt-edit .qty-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }
@media (max-width: 480px) { .opt-edit .qty-grid { grid-template-columns: repeat(2, 1fr); } }
.opt-edit .qty-card { position: relative; padding: var(--space-3) var(--space-2); border-radius: var(--radius-lg); border: 1.5px solid var(--color-border); background: #fff; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; font-family: inherit; transition: all var(--duration-fast) var(--ease-out); }
.opt-edit .qty-card:hover { border-color: var(--color-blue-light); }
.opt-edit .qty-card.is-active { border-color: var(--color-navy); background: var(--color-sky); }
.opt-edit .qty-card .qn { font-size: 1.125rem; font-weight: 800; color: var(--color-navy); }
.opt-edit .qty-card .qunit { font-size: 0.6875rem; color: var(--color-text-muted); }
.opt-edit .qty-card .qper { font-size: 0.75rem; font-weight: 600; color: var(--color-slate); margin-top: 2px; }
.opt-edit .qty-card.is-active .qunit, .opt-edit .qty-card.is-active .qper { color: var(--color-navy); }
.oe-pricebar { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--color-border); }
.oe-plabel { font-size: 0.8125rem; color: var(--color-text-muted); margin-bottom: 2px; }
.oe-pnow { font-size: 1.625rem; font-weight: 800; color: var(--color-navy); letter-spacing: -0.01em; line-height: 1.1; }
.oe-dval { text-align: end; }
.oe-dlabel { display: block; font-size: 0.8125rem; color: var(--color-text-muted); margin-bottom: 2px; }
.oe-dval > span:last-child { font-size: 0.9375rem; font-weight: 700; color: var(--color-navy); }

/* ═══════════════════════════════════════════════════════════
   Step-1 checkout CTA — login required (no guest path)
   ═══════════════════════════════════════════════════════════ */
.checkout-cta-group { display: flex; flex-direction: column; gap: var(--space-2); }
.cta-signedin { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 0.8125rem; color: var(--color-text-muted); margin-top: var(--space-3); }
.cta-signedin svg { width: 14px; height: 14px; color: var(--color-success); }
.cta-signedin .fa-num { font-weight: 700; color: var(--color-text); }
.cta-signedin button { background: none; border: 0; color: var(--color-blue); font-family: inherit; font-size: 0.8125rem; font-weight: 600; cursor: pointer; padding: 0; text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════
   LOGIN modal — lightweight OTP-style sign-in (prototype)
   ═══════════════════════════════════════════════════════════ */
.auth-modal { position: fixed; inset: 0; z-index: 1680; background: rgba(15,23,42,0.78); display: grid; place-items: center; padding: var(--space-5); opacity: 0; visibility: hidden; transition: opacity var(--duration-normal) var(--ease-out), visibility 0s linear var(--duration-normal); }
.auth-modal.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.auth-modal__panel { width: min(420px, 100%); background: #fff; border-radius: var(--radius-2xl); box-shadow: var(--shadow-2xl, 0 30px 60px rgba(15,23,42,0.4)); padding: var(--space-8) var(--space-7) var(--space-7); transform: translateY(12px) scale(0.98); transition: transform var(--duration-normal) var(--ease-spring); text-align: center; }
.auth-modal.is-open .auth-modal__panel { transform: translateY(0) scale(1); }
.auth-modal__logo { height: 40px; width: auto; margin: 0 auto var(--space-5); display: block; }
.auth-modal__panel h3 { font-size: 1.375rem; font-weight: 800; color: var(--color-navy); margin: 0 0 var(--space-2); }
.auth-modal__panel p { font-size: 0.9375rem; color: var(--color-text-muted); margin: 0 0 var(--space-6); }
.auth-field { text-align: start; margin-bottom: var(--space-4); }
.auth-field label { display: block; font-size: 0.875rem; font-weight: 600; color: var(--color-text); margin-bottom: var(--space-2); }
.auth-field input { width: 100%; padding: 0.75rem 0.9rem; border: 1.5px solid var(--color-border); border-radius: var(--radius-lg); font-family: inherit; font-size: 1rem; text-align: center; letter-spacing: 0.08em; }
.auth-field input:focus { outline: none; border-color: var(--color-blue); }
.auth-field.has-error input { border-color: var(--color-danger); }
.auth-field__err { font-size: 0.8125rem; color: var(--color-danger); margin-top: 6px; display: none; }
.auth-field.has-error .auth-field__err { display: block; }
.auth-modal .btn { width: 100%; }
.auth-modal__back { background: none; border: 0; color: var(--color-text-muted); font-family: inherit; font-size: 0.875rem; cursor: pointer; margin-top: var(--space-4); }
.auth-modal__back:hover { color: var(--color-text); }
.auth-modal__close { position: absolute; inset-block-start: var(--space-5); inset-inline-end: var(--space-5); width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(255,255,255,0.14); color: #fff; display: grid; place-items: center; cursor: pointer; }
.auth-modal__close:hover { background: rgba(255,255,255,0.26); }
.auth-modal__close svg { width: 20px; height: 20px; }