/* Cart / basket — checkout step 1 (static prototype) */
/*
  Brand tokens from logo:
    Red     #c41e3a  (hover #a8182f) — logo "R"
    Charcoal #3d4046  (hover #2d3035) — logo "eaders"
*/

.cart-page {
  background: #f7f6f3;
  min-height: 100vh;
}

.cart-page__main {
  padding: clamp(1.25rem, 4vw, 2.5rem) max(var(--layout-gutter, clamp(0.9375rem, 2.85vw, 1.875rem)), env(safe-area-inset-left, 0))
    clamp(2rem, 5vw, 3.5rem)
    max(var(--layout-gutter, clamp(0.9375rem, 2.85vw, 1.875rem)), env(safe-area-inset-right, 0));
}

.cart-panel {
  max-width: 960px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #e0dbd5;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(61, 64, 70, 0.08);
  overflow: hidden;
}

/* ── Progress steps ────────────────────────────────── */
.cart-steps {
  background: #fff;
  border-bottom: 1px solid #e0dbd5;
}

.cart-steps__list {
  display: flex;
  align-items: center;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: clamp(1.1rem, 3vw, 1.6rem) var(--layout-gutter, clamp(0.9375rem, 2.85vw, 1.875rem));
  gap: 0;
}

.cart-steps__item {
  display: flex;
  align-items: center;
  background: transparent;
  clip-path: none;
}

.cart-steps__btn {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0;
  border: none;
  background: transparent;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #aaa;
  cursor: default;
  white-space: nowrap;
  pointer-events: none;
}

.cart-steps__item.is-active .cart-steps__btn {
  color: #1a1a1a;
}

.cart-steps__item.is-done .cart-steps__btn {
  color: #2e7d32;
}

.cart-steps__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 700;
  background: #e8e6e1;
  color: #999;
  flex-shrink: 0;
  transition: background 0.2s ease, color 0.2s ease;
}

.cart-steps__item.is-active .cart-steps__num {
  background: #c41e3a;
  color: #fff;
}

.cart-steps__item.is-done .cart-steps__num {
  background: #2e7d32;
  color: #fff;
}

.cart-steps__label {
  /* colour inherited from .cart-steps__btn */
}

.cart-steps__connector {
  list-style: none;
  width: clamp(2.5rem, 6vw, 5rem);
  height: 2px;
  background: #e8e6e1;
  flex-shrink: 0;
  margin: 0 0.3rem;
  border-radius: 999px;
  overflow: hidden;
  display: flex;
  align-items: stretch;
}

.cart-steps__connector-fill {
  display: block;
  height: 100%;
  width: 100%;
  background: #2e7d32;
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.cart-steps__connector.is-done .cart-steps__connector-fill {
  transform: scaleX(1);
}


/* ── Step panels ───────────────────────────────────── */
.cart-step-content {
  min-height: 12rem;
}

.cart-step-panel {
  outline: none;
}

/* Cash-on-delivery address / payment rows */
.cart-step-lines {
  padding: 0;
  font-family: "DM Sans", system-ui, sans-serif;
}

.cart-field-line {
  display: grid;
  grid-template-columns: minmax(7.5rem, 28%) 1fr;
  gap: 0.75rem 1.25rem;
  align-items: center;
  padding: 1rem 1.25rem;
  border-bottom: 1px dotted #d8d3ce;
}

.cart-field-line:last-child {
  border-bottom: none;
}

.cart-field-line__label {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #3d4046;
}

.cart-field-line__control {
  min-width: 0;
}

.cart-field-line__input {
  width: 100%;
  max-width: 28rem;
  box-sizing: border-box;
  padding: 0.4rem 0.85rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  font: inherit;
  font-size: 0.875rem;
  color: #222;
  transition: border-color 0.18s, outline 0.18s;
}

.cart-field-line__input:focus {
  outline: 2px solid rgba(196, 30, 58, 0.3);
  outline-offset: 1px;
  border-color: #c41e3a;
}

.cart-field-line__static {
  font-size: 0.875rem;
  color: #444;
}

.cart-field-line--message {
  grid-template-columns: 1fr;
}

.cart-field-line--message .cart-card-form__intro {
  margin: 0;
  max-width: 40rem;
  font-size: 0.8125rem;
  font-weight: 400;
  color: #555;
  line-height: 1.5;
}

.cart-field-line__control--cvv-help {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.cart-field-line__input--narrow {
  width: auto;
  min-width: 5.5rem;
  max-width: 7.5rem;
}

.cart-payment-blurb {
  margin: 0;
  font-size: 0.875rem;
  color: #555;
  line-height: 1.5;
}

.cart-step-footnote {
  margin: 0;
  padding: 1rem 1.25rem 1.35rem;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 0.75rem;
  color: #777;
  line-height: 1.45;
  border-top: 1px solid #ede9e4;
  background: #faf9f7;
}

/* ── Free delivery promo banner ────────────────────── */
.cart-promo {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1.25rem;
  background: #fde8ec;
  border-bottom: 1px solid #f5c4cc;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 0.875rem;
  color: #3a3a3a;
}

.cart-promo--ok {
  background: #e8f5ec;
  border-bottom-color: #c5e3cf;
}

.cart-promo__icon {
  flex-shrink: 0;
  font-size: 1.25rem;
  color: #c41e3a;
}

.cart-promo--ok .cart-promo__icon {
  color: #2e7d47;
}

.cart-promo__text {
  margin: 0;
  line-height: 1.45;
}

.cart-promo__text strong {
  font-weight: 700;
}

/* ── Line items ────────────────────────────────────── */
.cart-lines {
  padding: 0;
}

.cart-line {
  display: grid;
  grid-template-columns: 72px 1fr auto auto;
  grid-template-areas: "img main qty total";
  gap: 1rem 1.25rem;
  align-items: start;
  padding: 1.25rem 1.25rem;
  border-bottom: 1px solid #ede9e4;
  font-family: "DM Sans", system-ui, sans-serif;
}

.cart-line:last-child {
  border-bottom: none;
}

.cart-line--undo {
  display: flex;
  align-items: center;
  grid-template-columns: none;
  grid-template-areas: none;
  gap: 0;
  padding: 0.75rem 1.25rem;
  background: #faf9f7;
}

.cart-line__undo-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  gap: 0.75rem 1rem;
  flex-wrap: wrap;
  min-width: 0;
}

.cart-line__undo-text {
  margin: 0;
  font-size: 0.875rem;
  color: #555;
  line-height: 1.35;
  min-width: 0;
}

.cart-line__undo-intro {
  font-weight: 600;
  color: #666;
}

.cart-line__undo-title {
  font-weight: 700;
  color: #222;
}

.cart-line__undo-btn {
  margin: 0;
  padding: 0.4rem 1rem;
  border: 1.5px solid #c41e3a;
  border-radius: 6px;
  background: #fff;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #c41e3a;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.18s, color 0.18s;
}

.cart-line__undo-btn:hover {
  background: #c41e3a;
  color: #fff;
}

.cart-line__undo-btn:focus-visible {
  outline: 2px solid #c41e3a;
  outline-offset: 2px;
}

.cart-line__media {
  grid-area: img;
}

.cart-line__img {
  display: block;
  width: 72px;
  height: auto;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.cart-line__gc-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: 72px;
  height: 92px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
  overflow: hidden;
  flex-shrink: 0;
}

.cart-line__gc-brand {
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  font-family: "Cormorant Garamond", Georgia, serif;
}

.cart-line__gc-icon {
  font-size: 1.4rem;
  color: rgba(255, 255, 255, 0.9);
}

.cart-line__main {
  grid-area: main;
  min-width: 0;
}

.cart-line__title {
  margin: 0 0 0.25rem;
  font-size: 1rem;
  font-weight: 700;
  color: #1e2024;
  line-height: 1.3;
}

.cart-line__label {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.1em 0.55em;
  border-radius: 3px;
  background: #1e2024;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
  line-height: 1.6;
}

.cart-line__author {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #3d4046;
}

.cart-line__unit {
  margin: 0 0 0.35rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #1e2024;
}

.cart-line__unit-label {
  font-weight: 600;
  margin-right: 0.15rem;
}

.cart-line__format {
  margin: 0 0 0.25rem;
  font-size: 0.75rem;
  color: #777;
  line-height: 1.4;
}

.cart-line__row-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}

.cart-line__actions-sep {
  color: #ccc;
  font-size: 0.75rem;
  line-height: 1;
}

.cart-line__remove {
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #c41e3a;
  text-decoration: underline;
  cursor: pointer;
}

.cart-line__remove:hover {
  color: #a8182f;
}

.cart-line__note-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #888;
  cursor: pointer;
  transition: color 0.15s;
}

.cart-line__note-btn:hover { color: #444; }

.cart-line__note-text {
  margin: 0.3rem 0 0;
  font-size: 0.78rem;
  color: #777;
  font-style: italic;
  line-height: 1.4;
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
}

/* ── Out of stock ──────────────────────────────────── */
.cart-line--oos {
  opacity: 0.6;
}

.cart-line--oos .cart-line__img,
.cart-line--oos .cart-line__gc-visual {
  filter: grayscale(1);
}

.cart-line--oos .cart-line__select {
  pointer-events: none;
  color: #aaa;
  border-color: #e0e0e0;
  background: #f5f5f5;
}

.cart-line__oos-badge {
  margin: 0.15rem 0 0.25rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: #999;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.cart-line__oos-total {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #bbb;
}

/* ── Cart item links ───────────────────────────────── */
.cart-line__media-link { display: block; line-height: 0; }

.cart-line__title-link {
  color: inherit;
  text-decoration: none;
}

.cart-line__title-link:hover { text-decoration: underline; }

/* ── Basket options bar (gift + order note) ─────────── */
.cart-basket-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid #ede9e4;
  background: #faf9f7;
}

.cart-basket-options--list {
  flex-direction: column;
  align-items: flex-start;
  padding: 0.75rem 0;
  border-top: 1px solid #ede9e4;
  background: none;
  gap: 0.55rem;
}

.cart-gift-check {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  color: #3d4046;
  cursor: pointer;
  user-select: none;
}

.cart-gift-check--disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.cart-gift-check__label {
  flex: 1;
}

.cart-gift-check i {
  color: #c41e3a;
  font-size: 0.9rem;
  flex-shrink: 0;
}

/* hide native checkbox */
.cart-gift-check input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* toggle track */
.cart-gift-check__track {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: #d0cdc8;
  padding: 2px;
  transition: background 0.2s;
}

.cart-basket-options--list .cart-gift-check {
  display: grid;
  grid-template-columns: auto 1fr auto;
  width: 100%;
}

.cart-basket-options--list .cart-gift-check__track {
  justify-self: end;
}

.cart-basket-options--list .cart-order-note-btn {
  position: relative;
}

.cart-gift-check input:checked ~ .cart-gift-check__track {
  background: #c41e3a;
}

/* toggle thumb */
.cart-gift-check__thumb {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: transform 0.2s;
}

.cart-gift-check input:checked ~ .cart-gift-check__track .cart-gift-check__thumb {
  transform: translateX(16px);
}

.cart-order-note-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: 1 1 16rem;
  min-width: min(100%, 16rem);
}

.cart-order-note-label {
  display: flex;
  align-items: center;
  gap: 0.4em;
  font: 600 0.75rem/1 inherit;
  color: #555;
}

.cart-order-note-label i {
  color: #c41e3a;
}

.cart-order-note-btn {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 34px;
  min-height: 34px;
  max-height: 34px;
  padding: 0 0.65rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  color: #222;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 34px;
  cursor: pointer;
  transition: border-color 0.18s;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cart-order-note-btn__placeholder {
  color: #aaa;
}

.cart-order-note-btn:hover {
  border-color: #c41e3a;
}

.cart-order-note-btn:focus-visible {
  outline: 2px solid rgba(196, 30, 58, 0.3);
  outline-offset: 1px;
  border-color: #c41e3a;
}

.cart-order-note-btn i {
  color: #c41e3a;
}

.cart-basket-options--list .cart-order-note-wrap {
  flex: 0 0 auto;
  width: 100%;
  border-top: 1px solid #ede9e4;
  padding-top: 0.55rem;
}

.cart-basket-options--list .cart-order-note-btn::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -0.3rem;
  border-top: 1px solid #e0dbd5;
}

.cart-basket-note-preview {
  display: flex;
  align-items: flex-start;
  gap: 0.45em;
  padding: 0.55rem 1.25rem 0.6rem;
  background: #faf9f7;
  border-bottom: 1px solid #ede9e4;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 0.8125rem;
  color: #666;
  font-style: italic;
  line-height: 1.4;
}

.cart-basket-options--list + .cart-basket-note-preview {
  padding: 0.4rem 0 0.6rem;
  background: none;
  border-bottom: none;
}

.cart-basket-note-preview i { color: #c41e3a; flex-shrink: 0; margin-top: 0.1em; }

/* ── Receipt gift / note extras ─────────────────────── */
.cart-receipt-gift-row { text-align: center; }

.cart-receipt-gift-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.3rem 0.85rem;
  border-radius: 20px;
  background: #fff3e0;
  color: #e65100;
  font-size: 0.8125rem;
  font-weight: 700;
}

.cart-receipt-order-note {
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.45em;
  padding: 0.65rem 0.85rem;
  background: #faf9f7;
  border: 1px solid #ede9e4;
  border-radius: 6px;
  font-size: 0.8125rem;
  color: #666;
  font-style: italic;
  line-height: 1.45;
}

.cart-receipt-order-note i { color: #c41e3a; flex-shrink: 0; margin-top: 0.1em; }

/* ── Note modal ────────────────────────────────────── */
.cart-note-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.cart-note-overlay[hidden] { display: none !important; }

.cart-note-modal {
  background: #fff;
  border-radius: 14px;
  padding: 1.5rem 1.5rem 1.25rem;
  width: 100%;
  max-width: 22rem;
  box-shadow: 0 12px 40px rgba(0,0,0,0.18);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.cart-note-modal__title {
  margin: 0;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: #1a1a1a;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.cart-note-modal__textarea {
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  font: inherit;
  font-size: 0.875rem;
  color: #222;
  resize: vertical;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.18s;
}

.cart-note-modal__textarea:focus { border-color: #c41e3a; }

.cart-note-modal__count {
  margin: -0.35rem 0 0;
  font-size: 0.72rem;
  color: #aaa;
  text-align: right;
}

.cart-note-modal__actions {
  display: flex;
  gap: 0.6rem;
  justify-content: flex-end;
}

.cart-note-modal__btn {
  padding: 0.5rem 1.1rem;
  border-radius: 8px;
  border: none;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.cart-note-modal__btn--cancel {
  background: #f0eeeb;
  color: #555;
}

.cart-note-modal__btn--cancel:hover { background: #e5e2de; }

.cart-note-modal__btn--save {
  background: #c41e3a;
  color: #fff;
}

.cart-note-modal__btn--save:hover { background: #a8182f; }

/* ── Save toast ────────────────────────────────────── */
.cart-toast {
  position: fixed;
  bottom: 1.75rem;
  left: 50%;
  transform: translateX(-50%) translateY(0.5rem);
  background: #1a1a1a;
  color: #fff;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.65rem 1.25rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.22s ease, transform 0.22s ease;
  pointer-events: none;
  white-space: nowrap;
}

.cart-toast i { color: #4caf50; }

.cart-toast--in {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Order receipt modal ────────────────────────────── */
.cart-receipt-overlay {
  position: fixed;
  inset: 0;
  background: rgba(30, 32, 36, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100;
  padding: 1rem;
  backdrop-filter: blur(3px);
}

.cart-receipt-overlay[hidden] { display: none !important; }

.cart-receipt-modal {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.22);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 2rem 1.75rem 1.75rem;
  font-family: "DM Sans", system-ui, sans-serif;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.cart-receipt-check {
  text-align: center;
  font-size: 3rem;
  color: #2e7d32;
  line-height: 1;
  margin-bottom: -0.25rem;
}

.cart-receipt-title {
  margin: 0;
  font-family: "Playfair Display", "Cormorant Garamond", serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #1e2024;
  text-align: center;
}

.cart-receipt-id {
  margin: 0;
  font-size: 0.875rem;
  color: #666;
  text-align: center;
}

.cart-receipt-id strong { color: #1e2024; }

.cart-receipt-id-date { color: #aaa; }

/* Items list */
.cart-receipt-items {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  border-top: 1px solid #ede9e4;
  border-bottom: 1px solid #ede9e4;
  padding: 0.85rem 0;
}

.cart-receipt-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.cart-receipt-item__img {
  width: 52px;
  height: 68px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
  background: #f0ede8;
}

.cart-receipt-item__gc {
  width: 52px;
  height: 68px;
  border-radius: 6px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: 800;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cart-receipt-item__info {
  flex: 1 1 0;
  min-width: 0;
}

.cart-receipt-item__title {
  margin: 0 0 0.2rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #1e2024;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-receipt-item__meta {
  margin: 0;
  font-size: 0.75rem;
  color: #999;
}

.cart-receipt-item__price {
  font-size: 0.875rem;
  font-weight: 700;
  color: #1e2024;
  white-space: nowrap;
}

/* Cost breakdown */
.cart-receipt-breakdown {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.cart-receipt-breakdown__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
  color: #555;
  font-weight: 500;
}

.cart-receipt-breakdown__row--total {
  border-top: 1px solid #e5e2dc;
  margin-top: 0.25rem;
  padding-top: 0.55rem;
  font-size: 1rem;
  font-weight: 700;
  color: #1e2024;
}

.cart-receipt-breakdown__promo {
  color: #2e7d32;
  font-size: 0.8125rem;
}

.cart-receipt-old-price {
  text-decoration: line-through;
  color: #bbb;
  font-weight: 400;
  margin-right: 0.25em;
}

.cart-receipt-new-price { color: #2e7d32; font-weight: 700; }
.cart-receipt-free      { color: #2e7d32; font-weight: 700; }
.cart-receipt-saved     { font-weight: 700; }

/* Meta (payment / address) */
.cart-receipt-meta {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.cart-receipt-delivery,
.cart-receipt-payment,
.cart-receipt-address {
  margin: 0;
  font-size: 0.8125rem;
  color: #777;
  display: flex;
  align-items: flex-start;
  gap: 0.45em;
}

.cart-receipt-delivery i,
.cart-receipt-payment i,
.cart-receipt-address i { color: #c41e3a; flex-shrink: 0; margin-top: 0.1em; }

/* Action buttons */
.cart-receipt-actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.25rem;
}

.cart-receipt-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75rem 1.25rem;
  border-radius: 8px;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}

.cart-receipt-btn--primary {
  background: #c41e3a;
  color: #fff;
}

.cart-receipt-btn--primary:hover { background: #a8182f; }

.cart-receipt-btn--secondary {
  background: transparent;
  color: #3d4046;
  border: 1.5px solid #d0cdc8;
}

.cart-receipt-btn--secondary:hover { background: #f5f4f1; }

.cart-line__qty {
  grid-area: qty;
  align-self: start;
  margin-top: 0.15rem;
}

.cart-line__select {
  min-width: 3.25rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  font: inherit;
  font-size: 0.875rem;
  color: #333;
}

.cart-line__total {
  grid-area: total;
  align-self: start;
  margin-top: 0.15rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #1e2024;
  text-align: right;
  white-space: nowrap;
}

/* ── Order summary ─────────────────────────────────── */
.cart-summary__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.75rem 1rem;
  border: 1.5px solid #d0ccc8;
  border-radius: 6px;
  background: #fff;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #555;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s;
}

.cart-summary__back:hover {
  border-color: #999;
  color: #222;
}

.cart-summary {
  padding: 1.25rem 1.25rem 1.5rem;
  border-top: 2px solid #c41e3a;
  background: #faf9f7;
  font-family: "DM Sans", system-ui, sans-serif;
}

.cart-summary__action {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  margin: 0;
  padding: 0.75rem 1.35rem;
  border: none;
  border-radius: 6px;
  background: #c41e3a;
  color: #fff;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(196, 30, 58, 0.25);
  transition: background 0.18s, box-shadow 0.18s;
}

.cart-summary__action:hover {
  background: #a8182f;
  box-shadow: 0 4px 10px rgba(196, 30, 58, 0.3);
}

.cart-summary__action:focus-visible {
  outline: 2px solid #c41e3a;
  outline-offset: 2px;
}

.cart-summary__action--purchase {
  letter-spacing: 0.12em;
}

.cart-summary__action-row {
  display: flex;
  align-items: stretch;
  gap: 0.6rem;
  margin: 0.75rem 0 0.5rem;
}

.cart-summary__detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 0.3rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #666;
}

.cart-summary__free {
  font-weight: 700;
  color: #2e7d32;
}

.cart-summary__total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0.5rem 0 0.75rem;
  font-size: 1rem;
  font-weight: 700;
  color: #1e2024;
}

.cart-summary__meta {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #555;
}

.cart-summary__note {
  margin: 0;
  font-size: 0.75rem;
  color: #888;
  line-height: 1.45;
}

/* ── Empty state ───────────────────────────────────── */
.cart-empty {
  margin: 0;
  padding: 2.5rem 1.5rem 0.5rem;
  text-align: center;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 1.05rem;
  color: #444;
}

.cart-empty__hint {
  margin: 0;
  padding: 0 1.5rem 2.5rem;
  text-align: center;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 0.9rem;
}

.cart-empty__hint a {
  color: #c41e3a;
  font-weight: 600;
}

/* ── Promo code ────────────────────────────────────── */
.cart-promo-code {
  padding: 0.6rem 0 0.5rem;
  border-top: 1px solid #e0dbd5;
  border-bottom: 1px solid #e0dbd5;
  margin-bottom: 0.35rem;
  background: transparent;
  font-family: "DM Sans", system-ui, sans-serif;
}

.cart-promo-code__label {
  display: block;
  margin-bottom: 0.45rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #3d4046;
}

.cart-promo-code__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: stretch;
}

.cart-promo-code__input {
  flex: 1 1 12rem;
  min-width: 0;
  box-sizing: border-box;
  padding: 0.5rem 0.65rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  font: inherit;
  font-size: 0.875rem;
  color: #222;
  transition: border-color 0.18s;
}

.cart-promo-code__input:focus {
  outline: 2px solid rgba(196, 30, 58, 0.3);
  outline-offset: 1px;
  border-color: #c41e3a;
}

.cart-promo-code__apply {
  flex-shrink: 0;
  padding: 0.5rem 1.15rem;
  border: none;
  border-radius: 6px;
  background: #3d4046;
  color: #fff;
  font: inherit;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.18s;
}

.cart-promo-code__apply:hover {
  background: #2d3035;
}

.cart-promo-code__hint {
  margin: 0.45rem 0 0;
  font-size: 0.6875rem;
  color: #888;
  line-height: 1.4;
}

.cart-promo-code__status {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0.45rem 0 0;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
}

.cart-promo-code__status--ok {
  color: #2e7d32;
}

.cart-promo-code__status--err {
  color: #c41e3a;
}

.cart-summary__old-price {
  text-decoration: line-through;
  color: #aaa;
  font-weight: 400;
  margin-right: 0.2em;
}

.cart-summary__new-price {
  color: #2e7d32;
  font-weight: 700;
}

/* ── Upsell recommendation ─────────────────────────── */
.cart-upsell {
  margin: 0;
  border: none;
  border-top: 1px solid #ede9e4;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
  box-sizing: border-box;
}

.cart-upsell__inner {
  padding: 0.6rem 1.25rem 0.65rem;
}

.cart-upsell__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0 0 0.5rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid #ede9e4;
}

.cart-upsell__title {
  margin: 0;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #3d4046;
}

.cart-upsell__nav {
  display: flex;
  gap: 0.35rem;
  flex-shrink: 0;
}

.cart-upsell__arrow {
  width: 1.7rem;
  height: 1.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e7ded4;
  background: #fff;
  border-radius: 50%;
  color: #3d4046;
  font-size: 0.7rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.cart-upsell__arrow:hover {
  background: #c41e3a;
  color: #fff;
  border-color: #c41e3a;
}

.cart-upsell__arrow:focus-visible {
  outline: 2px solid #c41e3a;
  outline-offset: 2px;
}

/* Horizontal carousel of upsell cards */
.cart-upsell__track {
  display: flex;
  gap: 0.85rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 0.15rem;
}

.cart-upsell__track::-webkit-scrollbar {
  display: none;
}

.cart-upsell-card {
  display: grid;
  grid-template-columns: minmax(4.5rem, 16%) 1fr;
  gap: 0.55rem 0.85rem;
  align-items: center;
}

.cart-upsell__track > .cart-upsell-card {
  flex: 0 0 min(20rem, 86%);
  scroll-snap-align: start;
}

.cart-upsell__track > .cart-upsell-card:only-child {
  flex-basis: 100%;
}

.cart-upsell-card__media {
  display: block;
  text-decoration: none;
  max-width: 5.25rem;
}

.cart-upsell-card__img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.cart-upsell-card__body {
  min-width: 0;
  font-family: "DM Sans", system-ui, sans-serif;
}

.cart-upsell-card__title {
  margin: 0 0 0.15rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #1e2024;
  line-height: 1.25;
}

.cart-upsell-card__title a {
  color: inherit;
  text-decoration: none;
}

.cart-upsell-card__title a:hover {
  color: #c41e3a;
}

.cart-upsell-card__author {
  margin: 0 0 0.2rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #3d4046;
}

.cart-upsell-card__price {
  margin: 0 0 0.3rem;
  font-size: 0.75rem;
  line-height: 1.35;
}

.cart-upsell-card__price-was {
  text-decoration: line-through;
  color: #9a9a9a;
  font-weight: 500;
  margin-right: 0.35rem;
}

.cart-upsell-card__price-now {
  font-weight: 700;
  color: #c41e3a;
}

.cart-upsell-card__desc {
  margin: 0 0 0.45rem;
  font-size: 0.6875rem;
  line-height: 1.4;
  color: #555;
  max-width: 44rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cart-upsell-card__cta {
  margin: 0;
  padding: 0.4rem 1rem;
  border: none;
  border-radius: 6px;
  background: #c41e3a;
  color: #fff;
  font-family: inherit;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 1px 5px rgba(196, 30, 58, 0.22);
  transition: background 0.18s;
}

.cart-upsell-card__cta:hover {
  background: #a8182f;
}

.cart-upsell-card__cta:focus-visible {
  outline: 2px solid #c41e3a;
  outline-offset: 3px;
}

/* ── Payment step — professional redesign ──────────── */

/* ── Method selection tiles ────────────────────────── */
.cart-payment-methods {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  padding: 1.35rem 1.25rem 1.25rem;
  border-bottom: 1px solid #ede9e4;
  background: #faf9f7;
  font-family: "DM Sans", system-ui, sans-serif;
}

.cart-payment-method {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 1.1rem 0.75rem 1rem;
  border: 2px solid #e0dbd5;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
  color: #1e2024;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  -webkit-user-select: none;
  user-select: none;
}

.cart-payment-method:hover {
  border-color: #c41e3a;
}

/* Hide native radio — keep keyboard/screen-reader accessible */
.cart-payment-method input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* Selected state */
.cart-payment-method:has(input:checked) {
  border-color: #c41e3a;
  box-shadow: 0 0 0 1px #c41e3a;
  background: #fff9fa;
}

/* Checkmark badge */
.cart-payment-method:has(input:checked)::after {
  content: "✓";
  position: absolute;
  top: 5px;
  right: 8px;
  font-size: 0.7rem;
  font-weight: 900;
  color: #c41e3a;
  line-height: 1;
}

/* Method icons (Font Awesome) */
.cart-payment-method::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 1.45rem;
  color: #c0bab4;
  line-height: 1;
  display: block;
  transition: color 0.2s;
}

.cart-payment-method:hover::before,
.cart-payment-method:has(input:checked)::before {
  color: #c41e3a;
}

.cart-payment-method:has(#cart-pay-method-pickup)::before   { content: "\f54e"; } /* fa-store */
.cart-payment-method:has(#cart-pay-method-cashvisa)::before { content: "\f0d1"; } /* fa-truck */
.cart-payment-method:has(#cart-pay-method-card)::before     { content: "\f09d"; } /* fa-credit-card */

.cart-payment-method__text {
  font-size: 0.75rem;
  font-weight: 700;
  color: #666;
  letter-spacing: 0.01em;
  line-height: 1.25;
  transition: color 0.2s;
}

.cart-payment-method:has(input:checked) .cart-payment-method__text {
  color: #c41e3a;
}

/* ── Section cards ─────────────────────────────────── */
.cart-cash-delivery,
.cart-card-form,
.cart-pickup-location {
  margin: 1.25rem;
  border: 1px solid #e0dbd5;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 6px rgba(61, 64, 70, 0.06);
  font-family: "DM Sans", system-ui, sans-serif;
  padding: 0;
}

/* Charcoal header bar */
.cart-cash-delivery__title,
.cart-card-form__title,
.cart-pickup-location__title {
  margin: 0;
  padding: 0.8rem 1.25rem;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: #3d4046;
  color: #fff;
}

/* ── Pickup location body ──────────────────────────── */
.cart-pickup-location__address {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 0;
  padding: 1.15rem 1.25rem 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  font-weight: 600;
  color: #3d4046;
}

.cart-pickup-location__address::before {
  content: "\f3c5"; /* fa-location-dot */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 1.1rem;
  color: #c41e3a;
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.cart-pickup-location__map-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  margin-left: 0.5em;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #c41e3a;
  text-decoration: none;
  white-space: nowrap;
}

.cart-pickup-location__map-link:hover {
  text-decoration: underline;
}

/* ── Pickup reminder notice ────────────────────────── */
.cart-pickup-reminder {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin: 0 1.25rem 1.1rem;
  padding: 0.8rem 1rem;
  background: #fff8e1;
  border: 1px solid #ffe082;
  border-radius: 6px;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 0.8125rem;
  color: #5a4800;
  line-height: 1.45;
}

.cart-pickup-reminder i {
  flex-shrink: 0;
  font-size: 0.95rem;
  color: #f59e0b;
  margin-top: 0.15rem;
}

.cart-pickup-reminder__text {
  margin: 0;
}

.cart-pickup-reminder__text strong {
  font-weight: 700;
}

/* ── New address form — type selector ─────────────── */
.cart-addr-type-group {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 1rem 1.25rem 0.75rem;
  border-bottom: 1px solid #f0ede8;
}

.cart-addr-type-opt {
  position: relative;
  flex: 1;
  min-width: 90px;
}

.cart-addr-type-opt input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.cart-addr-type-opt__label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.6rem 0.75rem;
  border: 2px solid #e0dbd5;
  border-radius: 8px;
  background: #faf9f7;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: #666;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s, color 0.18s, box-shadow 0.18s;
  text-align: center;
  white-space: nowrap;
  user-select: none;
}

.cart-addr-type-opt__label:hover {
  border-color: #c41e3a;
  color: #c41e3a;
}

.cart-addr-type-opt__label.is-selected {
  border-color: #c41e3a;
  background: #fff9fa;
  color: #c41e3a;
  box-shadow: 0 0 0 1px #c41e3a;
}

/* ── New address form — 2-column grid ──────────────── */
/* ── Address step map ──────────────────────────────── */
.cart-addr-map-outer {
  position: relative;
  margin: 0 0 1.1rem;
}

.cart-addr-map-wrap {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #e0dbd5;
}

/* Map search overlay (mirrors the address-book map) */
.cart-addr-map-search {
  position: absolute;
  top: 0.6rem;
  left: 50%;
  transform: translateX(-50%);
  width: min(440px, calc(100% - 1.5rem));
  z-index: 1000;
  display: flex;
  gap: 0.4rem;
}

.cart-addr-map-search__input-wrap {
  position: relative;
  flex: 1;
}

.cart-addr-map-search__input-wrap > i {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  font-size: 0.8rem;
  pointer-events: none;
}

.cart-addr-map-search__input {
  width: 100%;
  height: 2.4rem;
  padding: 0 0.75rem 0 2.1rem;
  border: 1.5px solid #ddd8d2;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.97);
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 0.85rem;
  color: #1a1a1a;
  outline: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  box-sizing: border-box;
  transition: border-color 0.18s;
}

.cart-addr-map-search__input:focus {
  border-color: #c41e3a;
}

.cart-addr-map-search__btn {
  height: 2.4rem;
  padding: 0 0.85rem;
  border: none;
  border-radius: 9px;
  background: #152238;
  color: #fff;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
  transition: background 0.18s;
}

.cart-addr-map-search__btn:hover {
  background: #1e3255;
}

.cart-addr-map-results {
  position: absolute;
  top: calc(100% + 0.3rem);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #e4e0da;
  border-radius: 9px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  overflow-y: auto;
  max-height: 200px;
  z-index: 1001;
}

.cart-addr-map-results[hidden] {
  display: none;
}

.cart-addr-map-result {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  width: 100%;
  padding: 0.6rem 0.85rem;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 0.78rem;
  color: #333;
  border-bottom: 1px solid #f4f2ee;
  transition: background 0.15s;
}

.cart-addr-map-result:last-child {
  border-bottom: none;
}

.cart-addr-map-result:hover {
  background: #faf8f5;
}

.cart-addr-map-result i {
  color: #c41e3a;
  margin-top: 0.1rem;
  flex-shrink: 0;
}

.cart-addr-map-results__empty {
  padding: 0.7rem 0.85rem;
  color: #aaa;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 0.8rem;
}

#cart-addr-map {
  height: 240px;
  width: 100%;
  display: block;
  background: #e8e0d8;
}

.cart-addr-map-hint {
  position: absolute;
  bottom: 0.6rem;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: rgba(255,255,255,0.92);
  border: 1px solid #e0dbd5;
  border-radius: 999px;
  padding: 0.3rem 0.85rem;
  font-size: 0.75rem;
  color: #555;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.cart-addr-map-hint[hidden] {
  display: none;
}

.cart-addr-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.cart-addr-full {
  grid-column: 1 / -1;
}

.cart-addr-textarea {
  min-height: 68px;
  resize: vertical;
  line-height: 1.5;
}

/* ── Express shipment section ──────────────────────── */
.cart-express {
  margin: 0 1.25rem 1.25rem;
  border: 1px solid #e0dbd5;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 6px rgba(61, 64, 70, 0.06);
  font-family: "DM Sans", system-ui, sans-serif;
}

.cart-express__title {
  margin: 0;
  padding: 0.8rem 1.25rem;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: #3d4046;
  color: #fff;
}

.cart-express__options {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.85rem;
  padding: 1rem 1.25rem;
}

.cart-express__option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 1rem;
  border: 2px solid #e0dbd5;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
  -webkit-user-select: none;
  user-select: none;
}

.cart-express__option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.cart-express__option:hover {
  border-color: #c41e3a;
}

.cart-express__option.is-selected {
  border-color: #c41e3a;
  background: #fff9fa;
  box-shadow: 0 0 0 1px #c41e3a;
}

.cart-express__option.is-selected::after {
  content: "✓";
  position: absolute;
  top: 5px;
  right: 7px;
  font-size: 0.65rem;
  font-weight: 900;
  color: #c41e3a;
}

.cart-express__icon {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f0ede8;
  font-size: 0.85rem;
  color: #888;
  transition: background 0.2s, color 0.2s;
}

.cart-express__option.is-selected .cart-express__icon {
  background: #fde8ec;
  color: #c41e3a;
}

.cart-express__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.cart-express__name {
  font-size: 0.875rem;
  font-weight: 700;
  color: #1e2024;
  line-height: 1.2;
}

.cart-express__detail {
  font-size: 0.72rem;
  color: #888;
  line-height: 1.2;
}

.cart-express__price {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #3d4046;
  white-space: nowrap;
  flex-shrink: 0;
}

.cart-express__option.is-selected .cart-express__price {
  color: #c41e3a;
}

/* ── Delivery address section ──────────────────────── */
.cart-address-section {
  margin: 0 1.25rem 1.25rem;
  border: 1px solid #e0dbd5;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 6px rgba(61, 64, 70, 0.06);
  font-family: "DM Sans", system-ui, sans-serif;
}

.cart-address-section__title {
  margin: 0;
  padding: 0.8rem 1.25rem;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: #3d4046;
  color: #fff;
}

.cart-address-modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #f0ede8;
}

.cart-address-mode {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border: 2px solid #e0dbd5;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  color: #666;
  text-align: center;
  transition: border-color 0.2s, background 0.2s, color 0.2s, box-shadow 0.2s;
  -webkit-user-select: none;
  user-select: none;
}

.cart-address-mode input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.cart-address-mode:hover {
  border-color: #c41e3a;
  color: #c41e3a;
}

.cart-address-mode.is-selected {
  border-color: #c41e3a;
  background: #fff9fa;
  color: #c41e3a;
  box-shadow: 0 0 0 1px #c41e3a;
}

.cart-address-mode i {
  font-size: 0.875rem;
}

/* ── Saved address cards (up to 3) ─────────────────── */
.cart-saved-addrs {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.85rem 1.25rem 0.5rem;
}

.cart-saved-addr {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1.5px solid #e0dbd5;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  user-select: none;
  transition: border-color 0.15s, background 0.15s;
}

.cart-saved-addr input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.cart-saved-addr__icon {
  flex-shrink: 0;
  font-size: 1rem;
  color: #c41e3a;
  margin-top: 0.15rem;
}

.cart-saved-addr__text {
  flex: 1;
  margin: 0;
  font-size: 0.875rem;
  color: #444;
  line-height: 1.55;
}

.cart-saved-addr__dirs {
  font-size: 0.8em;
  color: #999;
}

.cart-saved-addr__badge {
  flex-shrink: 0;
  align-self: center;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  color: #888;
  padding: 0.15rem 0.55rem;
  border: 1px solid #e0dbd5;
  border-radius: 999px;
}

.cart-saved-addr:hover {
  border-color: #c41e3a;
}

.cart-saved-addr.is-selected {
  border-color: #c41e3a;
  background: #fff9fa;
  box-shadow: 0 0 0 1px #c41e3a;
}

.cart-saved-addr.is-selected .cart-saved-addr__badge {
  color: #c41e3a;
  border-color: rgba(196, 30, 58, 0.4);
}

.cart-saved-addrs__manage {
  display: inline-block;
  padding: 0.4rem 0;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #c41e3a;
  text-decoration: none;
}

.cart-saved-addrs__manage:hover {
  text-decoration: underline;
}

/* Saved default address display */
.cart-default-addr {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: #f8f7f5;
}

.cart-default-addr__icon {
  flex-shrink: 0;
  font-size: 1rem;
  color: #c41e3a;
  margin-top: 0.15rem;
}

.cart-default-addr__text {
  flex: 1;
  margin: 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: #3d4046;
  line-height: 1.55;
}

.cart-default-addr__text a {
  color: #c41e3a;
  font-weight: 600;
  text-decoration: none;
}

.cart-default-addr__text a:hover {
  text-decoration: underline;
}

.cart-default-addr__edit {
  flex-shrink: 0;
  align-self: center;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #c41e3a;
  text-decoration: none;
  padding: 0.3rem 0.65rem;
  border: 1.5px solid #c41e3a;
  border-radius: 4px;
  transition: background 0.18s, color 0.18s;
}

.cart-default-addr__edit:hover {
  background: #c41e3a;
  color: #fff;
}

.cart-default-addr--empty .cart-default-addr__icon {
  color: #bbb;
}

.cart-default-addr--empty .cart-default-addr__text {
  color: #888;
  font-style: italic;
}

/* ── Field lines inside payment sections ───────────── */
.cart-cash-delivery .cart-field-line,
.cart-card-form .cart-field-line,
#cart-addr-new-section .cart-field-line {
  grid-template-columns: 1fr;    /* stacked: label above input */
  gap: 0.3rem;
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid #f0ede8;
  align-items: start;
}

.cart-cash-delivery .cart-field-line:last-child,
.cart-card-form .cart-field-line:last-child,
#cart-addr-new-section .cart-field-line:last-child {
  border-bottom: none;
}

/* Compact uppercase caption labels */
.cart-cash-delivery .cart-field-line__label,
.cart-card-form .cart-field-line__label,
#cart-addr-new-section .cart-field-line__label {
  font-size: 0.6875rem;
  font-weight: 700;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  line-height: 1;
}

/* Full-width inputs */
.cart-cash-delivery .cart-field-line__input,
.cart-card-form .cart-field-line__input,
#cart-addr-new-section .cart-field-line__input {
  width: 100%;
  max-width: 100%;
  padding: 0.62rem 0.8rem;
  font-size: 0.9375rem;
  border: 1.5px solid #ddd;
  border-radius: 6px;
  background: #fcfbf9;
  color: #1e2024;
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
}

.cart-cash-delivery .cart-field-line__input:focus,
.cart-card-form .cart-field-line__input:focus,
#cart-addr-new-section .cart-field-line__input:focus {
  outline: none;
  border-color: #c41e3a;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(196, 30, 58, 0.1);
}

/* ── 2-column grid — delivery form ─────────────────── */
.cart-cash-delivery .cart-step-lines {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* Address row spans full width */
.cart-cash-delivery .cart-step-lines .cart-field-line:nth-child(3) {
  grid-column: 1 / -1;
}

/* ── 2-column grid — card form ──────────────────────── */
.cart-card-form .cart-step-lines {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* Intro, name-on-card, card-number — span full width */
.cart-card-form .cart-step-lines .cart-field-line:nth-child(1),
.cart-card-form .cart-step-lines .cart-field-line:nth-child(2),
.cart-card-form .cart-step-lines .cart-field-line:nth-child(3) {
  grid-column: 1 / -1;
}
/* Expiry (4th) and CVV (5th) each occupy one column */

/* Card number spaced digits */
#cart-pay-cardnum {
  letter-spacing: 0.15em;
  font-size: 1rem;
}

/* CVV narrow input fills its column */
.cart-field-line__input--narrow {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* Card form nested inside the card-section toggle — strip the outer border */
#cart-card-section .cart-card-form {
  margin: 0;
  border: none;
  border-top: 1px solid #e0dbd5;
  border-radius: 0;
}

/* Intro message */
.cart-card-form__intro {
  margin: 0;
  font-size: 0.8125rem;
  color: #777;
  line-height: 1.5;
}

/* Footnote inside section cards */
.cart-step-footnote {
  margin: 0;
  padding: 0.6rem 1.25rem 0.7rem;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 0.6875rem;
  color: #bbb;
  font-style: italic;
  line-height: 1.4;
  border-top: 1px solid #f0ede8;
  background: #faf9f7;
}

/* ── Address save-default button ───────────────────── */
.cart-addr-save-row {
  padding: 1rem 1.25rem 1.35rem;
  border-top: 1px solid #f0ede8;
  background: #faf9f7;
}

.cart-addr-save-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.6rem 1.25rem;
  border: 1.5px solid #3d4046;
  border-radius: 6px;
  background: #fff;
  color: #3d4046;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.cart-addr-save-btn:hover {
  background: #3d4046;
  color: #fff;
}

/* ── Card form actions footer ───────────────────────── */
.cart-pay-req {
  color: #c41e3a;
  font-weight: 700;
}

.cart-field-line__input.cart-pay-input::placeholder {
  color: #bbb;
}

.cart-field-line__input.cart-pay-input:focus {
  outline: none;
  border-color: #c41e3a;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(196, 30, 58, 0.1);
}

.cart-pay-help {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  padding: 0;
  border: 1.5px solid #f0b8c0;
  border-radius: 50%;
  background: #fde8ec;
  color: #c41e3a;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.5rem;
  text-align: center;
  cursor: help;
  transition: background 0.18s;
}

.cart-pay-help:hover {
  background: #fcd0da;
}

.cart-field-line--save-card {
  padding: 0.75rem 1.25rem 0;
  border: none;
}

.cart-save-card-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: #3d4046;
  cursor: pointer;
}

.cart-save-card-label input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  accent-color: #c41e3a;
  cursor: pointer;
  flex-shrink: 0;
}

.cart-card-form .cart-pay-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 1rem 1.25rem 1.25rem;
  border-top: 1px solid #ede9e4;
  background: #faf9f7;
}

.cart-pay-required-note {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: #bbb;
}

.cart-pay-continue {
  margin: 0;
  margin-left: auto;
  padding: 0.75rem 2.1rem;
  border: none;
  border-radius: 6px;
  background: #c41e3a;
  color: #fff;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(196, 30, 58, 0.25);
  transition: background 0.18s, box-shadow 0.18s;
}

.cart-pay-continue:hover {
  background: #a8182f;
  box-shadow: 0 4px 14px rgba(196, 30, 58, 0.32);
}

.cart-pay-continue:focus-visible {
  outline: 2px solid #c41e3a;
  outline-offset: 3px;
}

/* ── Responsive ────────────────────────────────────── */

/* 3 tiles → single column on small tablets */
@media (max-width: 860px) {
  .cart-payment-methods {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 640px) {
  .cart-line:not(.cart-line--undo) {
    grid-template-columns: 64px 1fr auto;
    grid-template-areas:
      "img main main"
      "img qty total";
  }

  .cart-line--undo {
    padding: 0.65rem 1rem;
  }

  .cart-line__qty {
    margin-top: 0;
  }

  .cart-line__total {
    text-align: right;
    font-size: 0.875rem;
  }

  .cart-steps__btn {
    font-size: 0.58rem;
    padding-left: 0.85rem;
    padding-right: 0.65rem;
    min-height: 44px;
  }

  /* Payment method tiles → single column on mobile */
  .cart-payment-methods {
    grid-template-columns: 1fr;
    gap: 0.6rem;
    padding: 1rem;
  }

  .cart-payment-method {
    flex-direction: row;
    justify-content: flex-start;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    border-radius: 8px;
    text-align: left;
  }

  .cart-payment-method::before {
    font-size: 1.15rem;
  }

  .cart-payment-method:has(input:checked)::after {
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
  }

  /* Section cards: tighter margin */
  .cart-cash-delivery,
  .cart-card-form,
  .cart-pickup-location,
  .cart-express,
  .cart-address-section {
    margin: 0.85rem;
  }

  /* Express options → single column */
  .cart-express__options {
    grid-template-columns: 1fr;
    gap: 0.6rem;
    padding: 0.85rem;
  }

  .cart-express__option {
    padding: 0.75rem 0.85rem;
  }

  /* Address modes → single column */
  .cart-address-modes {
    grid-template-columns: 1fr;
    gap: 0.6rem;
    padding: 0.85rem;
  }

  /* Pickup reminder */
  .cart-pickup-reminder {
    margin: 0 0.85rem 0.85rem;
  }

  /* Delivery fields → single column */
  .cart-cash-delivery .cart-step-lines,
  .cart-card-form .cart-step-lines {
    grid-template-columns: 1fr;
  }

  .cart-cash-delivery .cart-step-lines .cart-field-line:nth-child(3) {
    grid-column: auto;
  }

  .cart-addr-form-grid {
    grid-template-columns: 1fr;
  }

  .cart-addr-full {
    grid-column: auto;
  }

  .cart-addr-type-group {
    padding: 0.85rem 1rem 0.65rem;
  }

  .cart-card-form .cart-step-lines .cart-field-line:nth-child(1),
  .cart-card-form .cart-step-lines .cart-field-line:nth-child(2),
  .cart-card-form .cart-step-lines .cart-field-line:nth-child(3) {
    grid-column: auto;
  }

  .cart-field-line__input--narrow {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .cart-field-line__control--cvv-help {
    width: 100%;
  }

  .cart-card-form .cart-pay-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .cart-pay-continue {
    margin-left: 0;
    width: 100%;
    text-align: center;
  }

  .cart-upsell__inner {
    padding: 0.55rem 1rem 0.6rem;
  }

  .cart-upsell-card {
    grid-template-columns: minmax(4rem, 28%) 1fr;
    align-items: start;
    gap: 0.5rem 0.65rem;
  }

  .cart-upsell-card__media {
    max-width: 6.5rem;
  }
}