/* Cart — Retro-Futurist macro slate (Direction 5) */
:root {
  --ink: var(--a92-ink, #14213D);
  --paper: var(--a92-paper, #FDF0D5);
  --white: var(--a92-white, #FFFCF5);
  --primary: var(--a92-primary, #FF6B35);
  --accent: var(--a92-accent, #F7C548);
  --mute: var(--a92-mute, #3D4A66);
  --alert: var(--a92-alert, #E84A2F);
  --mint: var(--a92-mint, #F7C548);
  --display: var(--font-display, "Righteous", sans-serif);
  --body: var(--font-body, "Work Sans", sans-serif);
  --mono: var(--font-body, "Work Sans", sans-serif);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); }

body.page-cart,
body.macro-cart {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
}

body.page-cart a { color: inherit; }
body.page-cart a:focus-visible,
body.page-cart button:focus-visible,
body.page-cart input:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.cart-slate {
  min-height: 100vh;
  padding: clamp(18px, 3.5vw, 56px);
  padding-bottom: 3rem;
  overflow-x: clip;
}

.slate-head {
  position: relative;
  min-height: 0;
  padding-bottom: 1rem;
}

.slate-head h1 {
  margin: 0.2rem 0 0;
  font: clamp(3rem, 12vw, 7rem) / 0.88 var(--display);
  letter-spacing: -0.03em;
  color: var(--ink);
  text-transform: uppercase;
  max-width: 8ch;
}

.slate-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  margin-bottom: 0.85rem;
  padding: 0.55rem 1rem;
  border: 3px solid var(--ink);
  border-radius: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--display);
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 3px 3px 0 var(--ink);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.slate-back:hover,
.slate-back:focus-visible {
  background: var(--ink);
  color: var(--accent);
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--primary);
}

.slate-back:active {
  transform: translate(0, 0);
  box-shadow: 2px 2px 0 var(--ink);
}

.slate-head p {
  margin: 0.75rem 0 0;
  color: var(--mute);
  max-width: 40ch;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.75rem;
}

.line-slate { border-top: 4px solid var(--ink); }

.macro-line {
  display: grid;
  grid-template-columns: 40px minmax(80px, 10vw) minmax(220px, 1fr) auto minmax(170px, auto);
  gap: clamp(14px, 2vw, 36px);
  align-items: center;
  padding: 28px 0;
  border-bottom: 3px solid var(--ink);
  color: var(--ink);
}

.line-no {
  align-self: start;
  color: var(--primary);
  font: 800 0.7rem var(--mono);
  letter-spacing: 0.06em;
}

.line-image {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 0;
  transform: rotate(-1deg);
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.line-image:hover,
.line-image:focus-visible {
  transform: rotate(0deg) translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--primary);
}

.line-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.line-image span {
  display: grid;
  height: 100%;
  place-items: center;
  color: var(--mute);
  font-weight: 700;
}

.line-name h2 {
  margin: 0;
  font: clamp(1.6rem, 4vw, 3.4rem) / 0.95 var(--display);
  text-transform: uppercase;
  color: var(--ink);
}

.line-name h2 a {
  text-decoration: none;
  color: var(--ink);
}

.line-name h2 a:hover,
.line-name h2 a:focus-visible {
  color: var(--primary);
}

.line-name p {
  margin: 10px 0 0;
  color: var(--mute);
  font: 800 0.7rem var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.macro-qty {
  display: flex;
  align-items: stretch;
  border: 3px solid var(--ink);
  border-radius: 0;
  background: var(--white);
  overflow: hidden;
  box-shadow: 3px 3px 0 var(--ink);
}

.macro-qty button {
  width: 44px;
  min-height: 44px;
  border: 0;
  border-radius: 0;
  background: var(--accent);
  color: var(--ink);
  font-family: var(--display);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.macro-qty button:hover,
.macro-qty button:focus-visible {
  background: var(--ink);
  color: var(--accent);
}

.macro-qty button:active {
  background: var(--primary);
  color: #fff;
}

.macro-qty input {
  width: 52px;
  border: 0;
  border-left: 3px solid var(--ink);
  border-right: 3px solid var(--ink);
  border-radius: 0;
  background: var(--paper);
  text-align: center;
  color: var(--ink);
  font-weight: 800;
  font-family: var(--body);
}

.macro-qty input::-webkit-inner-spin-button,
.macro-qty input::-webkit-outer-spin-button { display: none; }
.macro-qty input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

.line-total {
  font: 400 clamp(1.1rem, 2vw, 1.6rem) / 1 var(--display);
  color: var(--ink);
}

.summary-slate {
  display: grid;
  grid-template-columns: minmax(230px, 0.55fr) 1.2fr;
  gap: 1.5rem;
  padding: 2rem 0 1rem;
  align-items: start;
}

.summary-minor {
  border: 3px solid var(--ink);
  border-radius: 0;
  padding: 1rem;
  background: var(--white);
  box-shadow: 4px 4px 0 var(--ink);
}

.summary-minor p {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  padding: 0.55rem 0;
  border-bottom: 2px solid var(--ink);
  font-weight: 600;
}

.slate-recalc,
.summary-minor button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.85rem;
  min-height: 3rem;
  width: 100%;
  border: 3px solid var(--ink);
  border-radius: 0;
  background: var(--paper);
  padding: 0.75rem 1rem;
  font-family: var(--display);
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--ink);
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.slate-recalc:hover,
.slate-recalc:focus-visible,
.summary-minor button:hover,
.summary-minor button:focus-visible {
  background: var(--ink);
  color: var(--accent);
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--primary);
}

.slate-recalc:active,
.summary-minor button:active {
  background: var(--primary);
  color: #fff;
  transform: translate(0, 0);
  box-shadow: 2px 2px 0 var(--ink);
}

.summary-minor small {
  display: block;
  margin-top: 0.75rem;
  color: var(--mute);
  font-size: 0.75rem;
  line-height: 1.45;
}

.grand-total {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
}

.grand-total span {
  font: 800 0.7rem var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
}

.grand-total strong {
  font: clamp(2.4rem, 7vw, 4.5rem) / 0.9 var(--display);
  color: var(--ink);
}

.checkout-macro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
  padding: 1rem 1.35rem;
  border: 3px solid var(--ink);
  border-radius: 0;
  background: var(--primary);
  color: #fff;
  text-decoration: none;
  font: clamp(2rem, 8vw, 4.5rem) / 0.9 var(--display);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  box-shadow: 6px 6px 0 var(--ink);
  transform: rotate(-0.5deg);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.checkout-macro b {
  font-weight: 400;
  transition: transform 0.2s ease;
}

.checkout-macro:hover,
.checkout-macro:focus-visible {
  background: var(--ink);
  color: var(--accent);
  transform: translate(-2px, -2px) rotate(0deg);
  box-shadow: 8px 8px 0 var(--primary);
}

.checkout-macro:hover b,
.checkout-macro:focus-visible b {
  transform: translateX(12px);
}

.checkout-macro:active {
  transform: translate(0, 0);
  box-shadow: 2px 2px 0 var(--ink);
}

.slate-foot {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2rem;
  padding-top: 1.15rem;
  border-top: 3px solid var(--ink);
  font-size: 0.85rem;
  color: var(--mute);
}

.slate-foot a {
  color: var(--primary);
  font-weight: 800;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.slate-foot a:hover,
.slate-foot a:focus-visible {
  color: var(--ink);
  border-bottom-color: var(--primary);
}

.empty-slate {
  min-height: 45vh;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 1rem;
}

.empty-slate p {
  color: var(--mute);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 800;
  margin: 0;
}

.empty-slate h2 {
  margin: 0;
  font: clamp(2.4rem, 8vw, 4.5rem) / 0.9 var(--display);
  text-transform: uppercase;
}

.slate-cta,
.empty-slate a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.1rem;
  margin: 0 auto;
  padding: 0.9rem 1.35rem;
  border: 3px solid var(--ink);
  border-radius: 0;
  background: var(--accent);
  color: var(--ink);
  font-family: var(--display);
  font-size: 1.05rem;
  letter-spacing: 0.03em;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: 4px 4px 0 var(--ink);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.slate-cta:hover,
.slate-cta:focus-visible,
.empty-slate a:hover,
.empty-slate a:focus-visible {
  background: var(--ink);
  color: var(--accent);
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--primary);
}

.slate-cta:active,
.empty-slate a:active {
  background: var(--primary);
  color: #fff;
  transform: translate(0, 0);
  box-shadow: 2px 2px 0 var(--ink);
}

.qty-wave::after,
.chroma-wave::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 90;
  background: linear-gradient(90deg, transparent, rgba(255, 107, 53, 0.25), transparent);
  animation: color-wave 0.9s ease;
}

.chroma-wave::after { animation-duration: 1.45s; }

@keyframes color-wave {
  from { transform: translateX(-100%); opacity: 0.8; }
  to { transform: translateX(100%); opacity: 0; }
}

@media (max-width: 850px) {
  .slate-head { min-height: auto; }
  .macro-line { grid-template-columns: 25px 75px 1fr; }
  .line-name h2 { font-size: 1.7rem; }
  .macro-qty { grid-column: 2; }
  .line-total { grid-column: 3; justify-self: end; }
  .summary-slate { grid-template-columns: 1fr; }
  .summary-minor,
  .grand-total,
  .checkout-macro { grid-column: 1; }
  .grand-total { margin-top: 28px; align-items: flex-start; }
  .checkout-macro { font-size: clamp(2rem, 12vw, 4rem); }
  .line-image { transform: none; }
}

@media (max-width: 500px) {
  .cart-slate { padding: 18px; padding-bottom: 2.5rem; }
  .slate-head { padding-top: 0.5rem; }
  .macro-line { grid-template-columns: 20px 60px 1fr; gap: 0.75rem; }
  .slate-foot { flex-direction: column; }
  .slate-back { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .qty-wave::after,
  .chroma-wave::after { display: none; }
  .checkout-macro b,
  .slate-back,
  .slate-recalc,
  .checkout-macro,
  .slate-cta,
  .macro-qty button { transition: none; }
}