/* =========================================================
   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; }

/* 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;
  }
}