/* ============================================================================
   RARA · cart.css — shopping cart page (line items, qty steppers, summary aside).
   Migrated from rara.css with the Slice-4 palette (house label → warm-grey).
   ============================================================================ */

.cart-wrap{display:grid;grid-template-columns:1fr 340px;gap:48px;align-items:start}
.cart-lines{display:flex;flex-direction:column}
.cart-line{display:grid;grid-template-columns:96px 1fr auto;gap:20px;padding:22px 0;border-top:1px solid var(--line);align-items:start}
.cart-line:last-child{border-bottom:1px solid var(--line)}
.cart-thumb{display:block;aspect-ratio:4/5;background:linear-gradient(150deg,var(--cream-2),var(--ph-2));overflow:hidden}
.cart-meta .house{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--warm-grey);margin-bottom:5px}
.cart-name{display:block;font-size:21px;line-height:1.1;margin-bottom:6px}
.cart-sub{font-size:12px;color:var(--muted);margin-bottom:12px}
.cart-preorder{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:-2px 0 12px;
  font-size:12px;color:var(--muted);line-height:1.4}
.qty{display:flex;align-items:center;gap:16px;font-family:var(--mono);font-size:13px}
.qty-stepper{display:inline-flex;align-items:center;border:1px solid var(--line-ui);background:var(--surface)}
.qty-stepper .qty-btn{width:34px;height:34px;border:0;background:none;cursor:pointer;font-size:16px;line-height:1;color:var(--ink);transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
/* FX-5.3: 34x34 is under the 44px touch-target floor on mobile. Grow the
   +/- hit areas and give the stepper a little internal gap so enlarged
   buttons don't crowd the qty number between them. Desktop stays 34px. */
@media(max-width:600px){
  .qty-stepper{gap:4px}
  .qty-stepper .qty-btn{width:44px;height:44px}
  .qty-n{min-width:36px}
}
.qty-stepper .qty-btn:hover:not(:disabled){background:var(--cream-2);color:var(--burgundy)}
.qty-stepper .qty-btn:active:not(:disabled){transform:scale(.88)}
.qty-stepper .qty-btn:disabled{color:var(--line-2);cursor:not-allowed}
.qty-n{min-width:32px;text-align:center;font-size:14px;color:var(--ink)}
.qty .cart-rm{border:0;background:none;color:var(--warm-grey);text-decoration:underline;text-underline-offset:2px;cursor:pointer;font-size:11px;letter-spacing:.04em}
.qty .cart-rm:hover:not(:disabled){color:var(--burgundy)}
.qty .cart-rm:disabled{opacity:.5;cursor:not-allowed}
.cart-line-total{font-size:19px}

/* a line is dimmed while its qty/remove POST is in flight (transform/opacity only) */
.cart-line.is-busy{opacity:.55;transition:opacity var(--dur-fast) var(--ease-out)}

/* removing a line fades + slides it out instead of an instant DOM delete
   (transform/opacity only; cart.js holds the actual splice until this plays) */
.cart-line.is-leaving{opacity:0;transform:translateX(-8px);
  transition:opacity var(--dur-mid) var(--ease-out),transform var(--dur-mid) var(--ease-out)}

/* summary aside — the .sum-* rows are the shared summary component (components.css) */
.cart-summary{position:sticky;top:88px;background:var(--surface);border:1px solid var(--line);padding:24px}
.cart-cont{display:block;text-align:center;font-size:12px;color:var(--warm-grey);margin-top:16px;
  transition:color var(--dur-fast,.2s) var(--ease-out,ease)}
.cart-cont:hover{color:var(--burgundy)}

/* ---------- FX-5.2: condensed sticky checkout bar (mobile) ----------
   Below 1000px the cart drops to one column, so a static summary sinks the
   checkout CTA under every line item on long carts. Pin a CONDENSED bar
   (total + CTA only — subtotal/IVA/shipping notes/msi/continue link stay in
   normal flow above it, still reachable by scrolling) to the viewport
   bottom instead, full-bleed like the PDP FX-5.1 buy bar. Single row keeps
   it near ~60-70px tall, well clear of the 72px sticky header at the top.
   .cart-wrap gets matching bottom padding so the fixed bar never covers the
   last line item. Entrance is transform/opacity only, one-time, and killed
   (shown at rest instantly) under reduced motion below. Desktop untouched. */
@media(max-width:1000px){
  .cart-wrap{grid-template-columns:1fr;padding-bottom:88px}
  .cart-summary{
    position:fixed;left:0;right:0;bottom:0;z-index:40;
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding:10px 20px calc(10px + env(safe-area-inset-bottom));
    box-shadow:0 -6px 18px rgba(0,0,0,.16);
    animation:cartBarIn var(--dur-mid) var(--ease-out) both;
  }
  /* hide everything except the total row + the checkout CTA */
  .cart-summary>.sum-row:not(.sum-total),
  .cart-summary>.sum-ship,
  .cart-summary>.mono:not(.sum-ship),
  .cart-summary>.cart-cont{display:none}
  .cart-summary .sum-total{border-top:0;margin-top:0;padding-top:0;font-size:18px}
  .cart-summary .btn{width:auto!important;margin-top:0!important;padding:12px 22px;flex:0 0 auto;white-space:nowrap}
  /* the loading skeleton keeps its original in-flow, stacked look */
  .cart-summary-sk{position:static;padding:24px;box-shadow:none;animation:none}
}
@keyframes cartBarIn{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}
/* smallest phones: the total + "Continuar a pago"/"Continue to checkout" CTA
   don't reliably fit one row, so stack them rather than let either truncate */
@media(max-width:480px){
  .cart-summary{flex-direction:column;align-items:stretch;gap:8px}
  .cart-summary .sum-total{text-align:center}
  .cart-summary .btn{width:100%!important}
}

/* ============================================================================
   Slice 4d beautification — cart thumbs, summary, branded skeletons, states.
   Single accent = --burgundy; motion is transform/opacity only (reduced-motion
   handled at the bottom). No gold on this page.
   ============================================================================ */

/* ---- line-item thumbnail: fill the frame + gentle hover zoom ---- */
.cart-thumb img{width:100%;height:100%;object-fit:contain;background:#FFFFFF;transition:transform var(--dur-slow) var(--ease-out)}
.cart-thumb:hover img{transform:scale(1.05)}

/* ---- sticky summary: thin accent cap + emphasized total ---- */
.cart-summary{border-top:2px solid var(--burgundy)}
.cart-summary .sum-total{color:var(--ink)}

/* ---- designed empty / error states (composed, on-brand) ---- */
.state-msg{padding:76px 0}
.state-mark{width:64px;height:64px;margin:0 auto 22px;display:grid;place-items:center;
  font-family:var(--serif);font-size:32px;line-height:1;color:var(--burgundy);
  background:var(--surface);border:1px solid var(--line-2);border-radius:50%}
.state-msg p{max-width:40ch;margin-left:auto;margin-right:auto}
.state-cta{margin-top:22px}

/* ---- branded loading skeletons (shimmer, matching the cart-line shape) ---- */
.cart-line-sk{align-items:center}
.sk-shim,.sk-bar{background:linear-gradient(100deg,var(--cream-2) 30%,var(--sk-1) 50%,var(--cream-2) 70%);
  background-size:200% 100%;animation:sh 1.2s infinite;border-radius:2px}
.cart-thumb.sk-shim{aspect-ratio:4/5}
.sk-bar-xs{height:9px;width:34%;margin-bottom:10px}
.sk-bar-lg{height:20px;width:66%;margin-bottom:10px}
.sk-bar-sm{height:12px;width:46%}
.sk-bar-total{height:16px;width:64px}
.cart-summary-sk{display:flex;flex-direction:column;gap:16px}
.sk-bar-row{height:13px;width:100%}
.sk-bar-total-row{height:22px;width:60%;margin-top:6px}

/* ---- reduced motion: no thumb zoom, mobile bar appears at rest (opacity only),
   no leaving fade (JS splices immediately) ---- */
@media(prefers-reduced-motion:reduce){
  .cart-thumb img,.cart-thumb:hover img{transition:none;transform:none}
  .cart-summary{animation:none!important}
  .cart-line.is-leaving{transition:none;opacity:1;transform:none}
}