/* Cart: the page itself, plus the fly-to-cart moment on product / event /
   masterclass pages. Loaded after meros-polish.css. */

/* ---------- fly-to-cart ---------- */

.cart-fly {
  position: fixed;
  z-index: 200;
  margin: 0;
  pointer-events: none;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 14px 36px rgba(23, 23, 20, .28);
  will-change: transform, opacity;
}

/* The icon "catches" the item: one short squash, plus a single expanding ring. */
.nav-cart { transform-origin: 50% 60%; }
.nav-cart.is-catching { animation: cart-catch .5s cubic-bezier(.34, 1.56, .64, 1); }
.nav-cart.is-catching::after {
  content: '';
  position: absolute;
  inset: -9px;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: 0;
  animation: cart-ring .7s ease-out;
  pointer-events: none;
}
.nav-cart-badge.is-pop { animation: cart-badge-pop .5s cubic-bezier(.34, 1.56, .64, 1); }

@keyframes cart-catch {
  0% { transform: scale(1); }
  35% { transform: scale(1.22) rotate(-6deg); }
  70% { transform: scale(.94) rotate(3deg); }
  100% { transform: scale(1); }
}
@keyframes cart-ring {
  0% { opacity: .55; transform: scale(.55); }
  100% { opacity: 0; transform: scale(1.5); }
}
@keyframes cart-badge-pop {
  0% { transform: scale(.4); }
  60% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* Button confirmation state */
.add-to-cart-form .form-submit { transition: background .3s ease, color .3s ease, transform .3s ease; }
.add-to-cart-form .form-submit.is-added { background: var(--color-cultural, #263d39); }
.add-to-cart-form .form-submit.is-failed { background: var(--color-accent, #963f29); }
.add-to-cart-form .form-submit[aria-disabled='true'] { pointer-events: none; }

.cart-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- cart page ---------- */

.cart-page {
  padding: clamp(112px, 12vw, 160px) clamp(20px, 5vw, 76px) clamp(56px, 8vw, 112px);
  min-height: 70vh;
}

.cart-head { margin-bottom: clamp(28px, 4vw, 52px); }
.cart-title {
  margin: .1em 0 0;
  font: 400 clamp(2.6rem, 6vw, 5.2rem)/.95 var(--font-display);
  letter-spacing: -.03em;
}
.cart-lede { margin-top: 1.6em; color: var(--ink-soft); font-size: .95rem; }

.cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: clamp(32px, 6vw, 88px);
  align-items: start;
}

.cart-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }

.cart-row {
  display: grid;
  grid-template-columns: clamp(96px, 12vw, 148px) minmax(0, 1fr) auto;
  gap: clamp(16px, 3vw, 36px);
  padding-block: clamp(20px, 3vw, 32px);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  transition: opacity .3s ease, transform .3s ease, max-height .32s ease, padding .32s ease;
  max-height: 600px;
}
.cart-row.is-removing {
  opacity: 0;
  transform: translateX(-16px);
  max-height: 0;
  padding-block: 0;
}

.cart-row-photo {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--flax-deep);
}
.cart-row-photo img,
.cart-row-photo .ph { width: 100%; height: 100%; object-fit: cover; display: block; }

.cart-row-body { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.cart-row-type {
  margin: 0 0 1em;
  color: var(--terracotta);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.cart-row-name {
  font: 400 clamp(1.3rem, 2.2vw, 1.85rem)/1.1 var(--font-display);
  letter-spacing: -.02em;
  text-wrap: balance;
}
.cart-row-name:hover { color: var(--terracotta); }
.cart-row-desc {
  margin: .9em 0 0;
  max-width: 52ch;
  color: var(--ink-soft);
  font-size: .92rem;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cart-row-unit { margin: auto 0 0; padding-top: 1em; color: var(--ink-soft); font-size: .8rem; letter-spacing: .02em; }

.cart-row-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 18px;
  text-align: right;
  min-width: 108px;
}
.cart-row-qty { display: grid; gap: 4px; justify-items: end; }
.cart-row-qty-label { color: var(--ink-soft); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; }
.cart-row-qty-value { font: 400 1.9rem/1 var(--font-display); }
.cart-row-subtotal { margin: 0; font-size: 1rem; font-weight: 500; white-space: nowrap; }
.cart-row-remove {
  margin-top: auto;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  color: var(--ink-soft);
  font-size: .8rem;
  transition: color .25s ease, border-color .25s ease;
}
.cart-row-remove:hover,
.cart-row-remove:focus-visible { color: var(--terracotta); border-color: currentColor; }

.cart-summary {
  position: sticky;
  top: 96px;
  padding: clamp(24px, 3vw, 36px);
  background: var(--flax-deep);
}
.cart-summary-line {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-block: .55em;
  color: var(--ink-soft);
  font-size: .9rem;
}
.cart-summary-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-top: 1em;
  padding-top: 1.2em;
  border-top: 1px solid var(--line);
}
.cart-summary-total span:first-child { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; }
.cart-summary-total span:last-child { font: 400 clamp(1.5rem, 2.4vw, 2rem)/1 var(--font-display); }
.cart-summary .link-arrow { margin-top: 1.8em; }

.cart-empty { max-width: 34rem; padding-top: clamp(8px, 2vw, 24px); }
.cart-empty-title { margin: 0 0 .5em; font: 400 clamp(1.6rem, 3vw, 2.4rem)/1.1 var(--font-display); }
.cart-empty p { margin-bottom: 1.6em; color: var(--ink-soft); line-height: 1.6; }

@media (max-width: 900px) {
  .cart-layout { grid-template-columns: 1fr; }
  .cart-summary { position: static; }
}

@media (max-width: 600px) {
  .cart-page { padding-top: 96px; }
  .cart-row { grid-template-columns: 92px minmax(0, 1fr); row-gap: 16px; }
  .cart-row-side {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    text-align: left;
    padding-top: 14px;
    border-top: 1px solid var(--line);
  }
  .cart-row-qty { justify-items: start; }
  .cart-row-side .cart-row-subtotal { margin-left: auto; margin-right: 18px; }
  .cart-row-remove { margin-top: 0; }
  .cart-row-desc { -webkit-line-clamp: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-cart.is-catching,
  .nav-cart.is-catching::after,
  .nav-cart-badge.is-pop { animation: none; }
  .cart-row { transition: none; }
}