/* =========================================================
   Cart page (/checkout/cart) — VIER layout in the Satphone dark theme.
   Left: title. Right: items -> special instructions -> total -> actions.
   Reuses the global --spc-* tokens from cart-drawer.css.
   ========================================================= */

/* GSAP load-in — pre-hide both column containers before first paint so there is
   no flash of un-animated content; js/anim (loadReveal) fades + slides them up on
   load, then adds .sp-load-done to release this guard. The delayed keyframe is a
   fallback that reveals the content if JS never runs. */
.checkout-cart-index .page-title-wrapper:not(.sp-load-done),
.checkout-cart-index .cart-container:not(.sp-load-done) {
  opacity: 0;
  transform: translateY(24px);
  animation: sp-cart-load-in .55s cubic-bezier(.4, 0, .2, 1) 1.4s forwards;
}
@keyframes sp-cart-load-in { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .checkout-cart-index .page-title-wrapper,
  .checkout-cart-index .cart-container {
    opacity: 1 !important; transform: none !important; animation: none !important;
  }
}

/* Full-viewport-width split: left = title/continue (fixed, centered),
   right = cart content (the ONLY column that scrolls). */
.checkout-cart-index .page-wrapper {
  padding-top: 74px; height: 100vh; box-sizing: border-box; overflow: hidden;
}
.checkout-cart-index .page-main {
  color: var(--spc-fg); max-width: none; width: 100%; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr;
  height: 100%; min-height: 0;
}
/* skip-link / hidden anchors — keep them out of the grid tracks */
.checkout-cart-index .page-main > a { position: absolute; width: 1px; height: 1px; overflow: hidden; }
.checkout-cart-index .page-main > .page.messages,
.checkout-cart-index .page-main > .messages { grid-row: 1; grid-column: 1 / -1; margin: 0; }
/* Add-to-cart success banners ("You added X to your shopping cart.") are redundant
   with the drawer + toast that already confirm the add — suppress them on the cart
   page. (Rendering still consumes them, so they don't resurface on other pages.) */
.checkout-cart-index .page.messages .message.success,
.checkout-cart-index .messages .message.success { display: none; }

/* Left column — the title/continue block is centered in the column, but its
   text (and orange rule) is left-aligned. JS wraps the pieces in .sp-cart-hero. */
.checkout-cart-index .page-main > .page-title-wrapper {
  grid-row: 2; grid-column: 1; margin: 0; min-height: 0; box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: left;
  padding: 3rem 2.5rem;
}
.checkout-cart-index .sp-cart-hero { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 16px; }

/* Right column — bordered, scrolls independently */
.checkout-cart-index .page-main > .columns {
  grid-row: 2; grid-column: 2; min-width: 0; min-height: 0; box-sizing: border-box;
  border-left: 1px solid var(--spc-line);
  overflow-y: auto; overflow-x: hidden;
  padding: 3rem 4rem 4rem;
}
.checkout-cart-index .column.main { display: block; min-height: 0; }
.checkout-cart-index .cart-container { display: flex; flex-direction: column; min-width: 0; }
.checkout-cart-index .cart-container .form-cart { order: 1; }
.checkout-cart-index .cart-container .cart-summary { order: 2; }

.checkout-cart-index .page-title-wrapper .page-title {
  font-family: 'Barlow', system-ui, sans-serif; text-transform: none;
  font-size: 56px; font-weight: 600; letter-spacing: 2px;
  line-height: 1; color: var(--spc-fg); margin: 0;
  /* JS splits the title into one <span> per word; flex gap = 16px rhythm.
     The ::after divider is also a flex item, so it inherits the 16px gap.
     !important overrides the blank theme's later `.page-title { display }` rule. */
  display: flex !important; flex-direction: column; align-items: flex-start; gap: 16px;
}
.checkout-cart-index .page-title-wrapper .page-title > span { display: block; }
.checkout-cart-index .page-title-wrapper .page-title::after {
  content: ""; display: block; width: 48px; height: 2px; background: var(--spc-accent); margin: 0;
}

/* Radar beacon over the tittle of the lowercase "i" (built by JS) — a scoped
   copy of the homepage .radar: 16px dot covers the i's dot, three pinging rings. */
.checkout-cart-index .sp-radar-i { position: relative; }
.checkout-cart-index .sp-cart-radar {
  position: absolute; left: 50%; top: 0.30em; width: 150px; height: 150px;
  transform: translate(-50%, -50%); pointer-events: none; z-index: 2;
}
.checkout-cart-index .sp-cart-radar .radar-dot {
  position: absolute; top: 50%; left: 50%; width: 16px; height: 16px;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: var(--spc-accent); box-shadow: 0 0 18px var(--spc-accent);
}
.checkout-cart-index .sp-cart-radar .radar-ring {
  position: absolute; top: 50%; left: 50%; border-radius: 50%;
  border: 1px solid var(--spc-accent); transform: translate(-50%, -50%);
  opacity: 0; animation: sp-ping 3s ease-out infinite;
}
.checkout-cart-index .sp-cart-radar .radar-ring.r1 { width: 60px;  height: 60px;  animation-delay: 0s; }
.checkout-cart-index .sp-cart-radar .radar-ring.r2 { width: 100px; height: 100px; animation-delay: .5s; }
.checkout-cart-index .sp-cart-radar .radar-ring.r3 { width: 150px; height: 150px; animation-delay: 1s; }
@keyframes sp-ping {
  0%   { opacity: .8; }
  70%  { opacity: .12; }
  100% { transform: translate(-50%, -50%) scale(1.15); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .checkout-cart-index .sp-cart-radar .radar-ring { animation: none; opacity: .3; }
}
/* beat Magento's default 20px top margin on the continue button */
.checkout-cart-index .page-title-wrapper .sp-cart-hero .action.continue { margin: 0; }

/* Continue Shopping — relocated by JS into the left column, under the rule.
   Appearance comes from the global .sp-btn / .sp-btn--secondary classes (base.css,
   which mirrors the minicart); here we only add the leading back-arrow. */
.checkout-cart-index .page-title-wrapper .action.continue { vertical-align: top; }
.checkout-cart-index .page-title-wrapper .action.continue::before { content: "\2190"; font-size: 1.1em; line-height: 0; }
.checkout-cart-index .page-title-wrapper .action.continue span { display: inline; }

/* ---------- Items ---------- */
/* beat Magento's default .cart-container .form-cart { width:73% } / float */
.checkout-cart-index .cart-container .form-cart { display: block; width: 100%; float: none; }
.checkout-cart-index .cart.table-wrapper { border: 0; margin: 0; overflow: visible; width: 100%; }
/* force the table (and its rows) to fill the column instead of shrink-wrapping */
.checkout-cart-index .cart.table-wrapper table.cart.items { display: block; width: 100%; }
.checkout-cart-index .cart.table-wrapper .table-caption,
.checkout-cart-index .cart.table-wrapper thead { display: none; }
.checkout-cart-index .cart.table-wrapper .cart.item { display: block; border: 0; }
/* divider BETWEEN items only: 24px above & below, none before first / after last */
.checkout-cart-index .cart.table-wrapper .cart.item:not(:first-of-type)::before {
  content: ""; display: block; height: 1px; background: var(--spc-line); margin: 24px 0;
}
/* details | qty | × — all centered on the thumbnail via align-items:center */
.checkout-cart-index .cart.table-wrapper .cart.item .item-info {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 24px;
  padding: 0;
}
.checkout-cart-index .cart.table-wrapper .cart.item .col { padding: 0; border: 0; }

/* Thumbnail — same dashed placeholder as the drawer */
.checkout-cart-index .cart.table-wrapper .col.item { display: flex; align-items: center; gap: 0; }
.checkout-cart-index .cart.table-wrapper .product-item-photo { display: block; flex: 0 0 108px; width: 108px; height: 108px; align-self: center; margin-right: 16px; }
.checkout-cart-index .cart.table-wrapper .product-image-wrapper {
  position: relative; width: 108px !important; height: 108px !important; padding: 0 !important; overflow: hidden;
  border: 1px dashed rgba(255,255,255,.22); background-color: var(--spc-bg-2);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='0.32' stroke-width='1.2'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.6'/%3E%3Cpath d='m21 15-5-5L5 21'/%3E%3C/svg%3E"),
    repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 12px, rgba(255,255,255,.05) 12px 24px);
  background-repeat: no-repeat, repeat; background-position: center, 0 0; background-size: 42px 42px, auto;
}
.checkout-cart-index .cart.table-wrapper .product-image-photo { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; }
.checkout-cart-index .cart.table-wrapper .product-image-photo[src*="placeholder"] { display: none; }

.checkout-cart-index .cart.table-wrapper .col.item { grid-column: 1; }
.checkout-cart-index .cart.table-wrapper .product-item-details { min-width: 0; }
.checkout-cart-index .cart.table-wrapper .product-item-name { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.3; }
.checkout-cart-index .cart.table-wrapper .product-item-name a { color: var(--spc-fg); text-decoration: none; }
.checkout-cart-index .cart.table-wrapper .product-item-name a:hover { color: var(--spc-accent2); }
/* SKU line between name and price */
.checkout-cart-index .cart.table-wrapper .product-item-sku {
  display: block; margin: .35rem 0 0; color: var(--spc-muted); font-size: .8rem; letter-spacing: .01em;
}
.checkout-cart-index .cart.table-wrapper .col.price { display: none; } /* unit price cell — hidden */

/* Line price — JS relocates .col.subtotal directly under the name (VIER-style) */
.checkout-cart-index .cart.table-wrapper .product-item-details .col.subtotal {
  display: block; text-align: left; margin-top: .45rem; min-width: 0; white-space: nowrap;
}
.checkout-cart-index .cart.table-wrapper .col.subtotal .price { color: var(--spc-fg); font-weight: 700; font-size: .95rem; }

/* Qty input (editable here on the cart page) — right group */
.checkout-cart-index .cart.table-wrapper .col.qty { grid-column: 2; text-align: center; }
.checkout-cart-index .cart.table-wrapper .field.qty .label { display: none; }
.checkout-cart-index .cart.table-wrapper .input-text.qty {
  width: 60px; height: 46px; text-align: center; background: var(--spc-bg-2); color: var(--spc-fg);
  border: 1px solid var(--spc-line); border-radius: 0;
}

/* Remove [x] — now a grid cell (moved in by JS), centered with the row */
.checkout-cart-index .cart.table-wrapper .item-actions {
  grid-column: 3; margin: 0; padding: 0;
  display: flex; align-items: center; justify-content: flex-end;
}
.checkout-cart-index .cart.table-wrapper .item-actions td { padding: 0; border: 0; display: flex; align-items: center; justify-content: flex-end; }
.checkout-cart-index .cart.table-wrapper .item-actions .actions-toolbar { display: flex; align-items: center; gap: 8px; margin: 0; }
.checkout-cart-index .cart.table-wrapper .item-actions .actions-toolbar > * { display: flex; align-items: center; margin: 0; }
.checkout-cart-index .cart.table-wrapper .item-actions .action-edit,
.checkout-cart-index .cart.table-wrapper .item-actions .gift-options-cart-item { display: none; }
.checkout-cart-index .cart.table-wrapper .action-delete {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--spc-muted); background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 4px;
}
.checkout-cart-index .cart.table-wrapper .action-delete span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.checkout-cart-index .cart.table-wrapper .action-delete::before { content: '\00d7'; font-family: inherit; font-size: 27px; font-weight: 500; line-height: 1; color: var(--spc-fg); }
.checkout-cart-index .cart.table-wrapper .action-delete:hover::before { color: var(--spc-accent); }

/* The default cart action toolbar is emptied by JS (continue -> left column,
   update -> summary row) and hidden once reflow has run. Until then (and as a
   fallback if the JS never runs) give the buttons on-brand styling so Magento's
   default pink never flashes. */
.checkout-cart-index .cart.main.actions { display: flex; gap: 12px; margin-top: 1.5rem; flex-wrap: wrap; }
.checkout-cart-index .cart.main.actions .action {
  display: inline-flex; align-items: center; gap: .5em;
  border: 1px solid var(--spc-line); border-radius: 0; background: transparent; color: var(--spc-fg);
  font-family: inherit; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: 14px 20px; text-decoration: none; box-shadow: none;
}
.checkout-cart-index .cart.main.actions .action.clear { display: none; }
.checkout-cart-index.sp-reflowed .cart.main.actions { display: none; }

/* ---------- Summary → inline total + checkout (VIER style) ---------- */
.checkout-cart-index .cart-summary {
  width: 100%; float: none; background: transparent; border: 0; border-top: 0; padding: 2rem 0 0; margin-top: 1rem;
}
.checkout-cart-index #cart-totals { border-top: 0; }
.checkout-cart-index .cart-summary > .summary.title,
.checkout-cart-index .cart-summary .block.shipping,
.checkout-cart-index .cart-summary .block.discount,
.checkout-cart-index .cart-summary #block-discount,
.checkout-cart-index .cart-summary .item.multicheckout,
.checkout-cart-index .cart-summary .action.multicheckout,
.checkout-cart-index .cart-summary .multicheckout { display: none !important; }

.checkout-cart-index #cart-totals .table-wrapper, .checkout-cart-index #cart-totals table { border: 0; margin: 0; width: 100%; }
.checkout-cart-index #cart-totals .totals th, .checkout-cart-index #cart-totals .totals td { padding: 6px 0; border: 0; color: var(--spc-muted); }
.checkout-cart-index #cart-totals .totals td { text-align: right; color: var(--spc-fg); }
.checkout-cart-index #cart-totals .grand.totals th {
  font-family: var(--spc-display); text-transform: uppercase; font-weight: 700; font-size: 1.1rem; color: var(--spc-fg);
  border: 0; padding-top: .5rem;
}
.checkout-cart-index #cart-totals .grand.totals td { border: 0; padding-top: .5rem; }
.checkout-cart-index #cart-totals .grand.totals .price { font-family: var(--spc-display); font-weight: 700; font-size: 1.6rem; color: var(--spc-fg); }

/* Shipping note under totals */
.checkout-cart-index .cart-summary .checkout-methods-items { margin: 1rem 0 0; padding: 0; list-style: none; }
.checkout-cart-index .cart-summary .checkout-methods-items::before {
  content: "Shipping & taxes calculated at checkout"; display: block; color: var(--spc-muted); font-size: .82rem; margin-bottom: 1.25rem;
}

/* Update + Checkout share one row (update left, checkout right) — built by JS.
   Both consume the global .sp-btn classes (checkout = --primary, update = --secondary),
   so the look/arrow/hover exactly track the minicart. Here we only set the row layout
   and the minicart's balanced secondary:primary = 1:1.35 proportions. */
.checkout-cart-index .cart-summary .sp-action-row { display: flex; gap: 12px; align-items: stretch; margin: 0; }
.checkout-cart-index .cart-summary .sp-action-row .action.update { flex: 1 1 0; margin: 0; }
.checkout-cart-index .cart-summary .sp-action-row .action.checkout { flex: 1.35 1 0; margin: 0; }

/* Empty cart */
.checkout-cart-index .cart-empty { color: var(--spc-fg); grid-column: 1 / -1; }
.checkout-cart-index .cart-empty a { color: var(--spc-accent2); }

@media (max-width: 860px) {
  .checkout-cart-index .page-wrapper { height: auto; overflow: visible; }
  .checkout-cart-index .page-main { display: block; height: auto; }
  .checkout-cart-index .page-main > .page-title-wrapper { padding: 2.5rem 1.5rem; }
  .checkout-cart-index .page-main > .columns {
    border-left: 0; border-top: 1px solid var(--spc-line);
    overflow: visible; height: auto; padding: 2rem 1.5rem 3rem;
  }
}

/* ---------- Mobile row layout + swipe-to-reveal delete (≤448px) ----------
   Two fixes over Luma's mobile cart sheet, which absolutely-positions the
   thumbnail (so the name/options render on top of it) and injects "Qty:" /
   "Item:" pseudo-labels from each cell's data-th. We pull the photo back into
   the flex flow and drop the labels, giving a clean [ photo | details ] … [ qty ]
   row. Swiping a row left reveals the orange delete icon; the item is removed
   only by pressing that icon (js/cart-swipe). */
@media (max-width: 448px) {
  /* row grid: [ item (photo+details) | qty ] — item-actions is hidden below */
  .checkout-cart-index .cart.table-wrapper .cart.item .item-info {
    grid-template-columns: 1fr auto; gap: 16px;
  }
  .checkout-cart-index .cart.table-wrapper .col.item { gap: 14px; }
  .checkout-cart-index .cart.table-wrapper .product-item-photo {
    position: static !important; flex: 0 0 76px;
    width: 76px !important; min-width: 76px !important; max-width: 76px !important; /* beat Luma's max-width:60px clamp */
    height: 76px !important; margin: 0 !important;
  }
  .checkout-cart-index .cart.table-wrapper .product-image-wrapper { width: 76px !important; height: 76px !important; }
  /* even vertical rhythm between name / SKU / options / price */
  .checkout-cart-index .cart.table-wrapper .product-item-details {
    padding-left: 0 !important; display: flex; flex-direction: column; gap: 6px;
  }
  .checkout-cart-index .cart.table-wrapper .product-item-details > * { margin: 0 !important; }
  /* the option value already reads "… Minutes Card (…)", so drop the redundant
     "Minutes:" option label and its indent */
  .checkout-cart-index .cart.table-wrapper .item-options dt { display: none; }
  .checkout-cart-index .cart.table-wrapper .item-options,
  .checkout-cart-index .cart.table-wrapper .item-options dd { margin: 0; }
  /* drop the data-th "Item:" / "Qty:" / "Price:" pseudo-labels */
  .checkout-cart-index .cart.table-wrapper .cart.item .col::before { content: none !important; }
  /* qty box: 50px tall, centred in its cell, pushed flush to the row's right edge
     (justify-self:end — the cell was left-aligned in a wider track, leaving a gap) */
  .checkout-cart-index .cart.table-wrapper .col.qty {
    grid-column: 2; justify-self: end; display: flex; align-items: center; justify-content: flex-end;
  }
  /* collapse the field/control/label wrappers (they render 45px tall and
     bottom-anchor the 50px input, riding it 2.5px high) so the input becomes a
     direct flex child of the centred cell and lines up exactly with the box */
  .checkout-cart-index .cart.table-wrapper .col.qty .field.qty,
  .checkout-cart-index .cart.table-wrapper .col.qty .control.qty,
  .checkout-cart-index .cart.table-wrapper .col.qty label { display: contents; }
  .checkout-cart-index .cart.table-wrapper .col.qty .input-text.qty { height: 50px; margin: 0; } /* kill Luma's -5px top margin */

  .checkout-cart-index .cart.table-wrapper .cart.item { position: relative; overflow: hidden; }
  /* the edit/remove toolbar is replaced by the swipe gesture */
  .checkout-cart-index .cart.item .item-actions { display: none; }
  /* reveal strip = full-height click target; the visible affordance is the
     bordered box inside it, mirroring the qty box beside it. Icon is red. */
  .checkout-cart-index .cart.item .sp-cart-delete {
    position: absolute; top: 0; right: 0; bottom: 0; width: 66px; z-index: 0; /* = OPEN in js/cart-swipe */
    display: flex; align-items: center; justify-content: flex-end; padding: 0; margin: 0;
    background: transparent; border: 0; border-radius: 0; box-shadow: none; cursor: pointer;
  }
  .checkout-cart-index .cart.item .sp-cart-delete-box {
    display: flex; align-items: center; justify-content: center;
    width: 50px; height: 50px; box-sizing: border-box;
    border: 1px solid var(--spc-line); background: var(--spc-bg-2); color: #ff0000;
  }
  .checkout-cart-index .cart.item .sp-cart-delete svg { width: 22px; height: 22px; display: block; }
  /* Non-first rows carry a 49px divider (::before: 1px line + 24px×2 margin)
     ABOVE .item-info. The delete zone spans the whole .cart.item, so without
     this its box would centre on row+divider and sit ~24px high. Offset the
     zone past the divider so it centres on .item-info — level with the qty box. */
  .checkout-cart-index .cart.table-wrapper .cart.item:not(:first-of-type) .sp-cart-delete { top: 49px; }
  /* the row sits above the delete zone on an opaque ground and slides to reveal it */
  .checkout-cart-index .cart.item .item-info {
    position: relative; z-index: 1; background: var(--spc-bg); touch-action: pan-y;
    transition: transform .28s cubic-bezier(.22, .61, .36, 1);
  }
}