/* TT-SHOP-REDO-10 -- quick-add picker: the per-card <details> drawer, its
   modal (desktop) / bottom-sheet (mobile) presentation, and the AJAX toast +
   confetti + cart-badge feedback. Ported from the legacy shop.html at commit
   07005ae0 (.variant-modal / .variant-sheet / .toast-notification / confetti)
   and retargeted onto the TT-SHOP-REDO tokens.

   EVERYTHING here is scoped under .shop-tray. The overlay, toast and confetti
   are appended to <body>, which carries `.shop-tray` -- so the descendant
   scoping holds and nothing leaks onto other pages that happen to load this
   sheet. Per the standing "no redundant arrows" rule, picker rows carry NO
   "->" affordance (the legacy sheet's .variant-arrow is deliberately dropped). */

/* ----------------------------------------------------------- in-card drawer */
/* The <details> sits below .product-card-link as its own flex item, exactly
   like .quick-add-form; its <summary> reuses .quick-add-btn's look (styled in
   shop-lanes.css) so the trigger reads as the same button 06 shipped. */
.shop-tray .quick-add {
  padding: 0 1rem 0.85rem;
}
.shop-tray .quick-add > summary.quick-add-btn {
  display: block;
  width: 100%;
  text-align: center;
  list-style: none;          /* drop the disclosure triangle... */
}
.shop-tray .quick-add > summary::-webkit-details-marker { display: none; }  /* ...incl. WebKit's */
.shop-tray .quick-add > summary::marker { content: ''; }
/* TT-SHOP-REDO-12: logged-out cart affordances render as <a> login links (new
   tab) instead of POST buttons -- give the anchor the same block/centre layout
   the <summary> and <button> variants get (.quick-add-btn already carries the
   box/colour/border and box-sizing). */
.shop-tray a.quick-add-btn {
  display: block;
  width: 100%;
  text-align: center;
  text-decoration: none;
}

/* No-JS fallback ONLY: shop-quick-add.js preventDefaults the summary toggle,
   so a <details> can reach [open] only when JS is off. There the panel drops
   inline -- but the card is `overflow:hidden` + clip-path'd, so it would be
   sliced. `:has()` lets the open card overflow just then, and the panel sits
   absolutely over its neighbours. (With JS on, the panel is cloned into the
   overlay below and this inline path never runs.) */
.shop-tray .product-card:has(details.quick-add[open]) {
  overflow: visible;
  clip-path: none;
  z-index: 40;
}
.shop-tray .quick-add[open] .quick-add-panel {
  position: absolute;
  left: 0.6rem;
  right: 0.6rem;
  margin-top: 0.4rem;
  padding: 0.85rem;
  background: var(--bg-white);
  border: 1.5px solid var(--primary-color);
  border-radius: 12px;
  box-shadow: 0 14px 30px rgba(12, 58, 40, 0.22);
  max-height: 60vh;
  overflow-y: auto;
  z-index: 41;
}

/* -------------------------------------------------------------- the overlay */
.shop-tray .quick-add-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.shop-tray .quick-add-overlay.is-open { opacity: 1; }
.shop-tray .quick-add-overlay.is-modal { align-items: center; justify-content: center; }
.shop-tray .quick-add-overlay.is-sheet { align-items: flex-end; justify-content: center; }

.shop-tray .quick-add-overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(3px);
}

.shop-tray .quick-add-overlay-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg-white);
  max-height: 80vh;
}
.shop-tray .quick-add-overlay.is-modal .quick-add-overlay-content {
  width: min(440px, 92vw);
  padding: 1.3rem;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  transform: translateY(-8px) scale(0.98);
  transition: transform 0.2s ease;
}
.shop-tray .quick-add-overlay.is-modal.is-open .quick-add-overlay-content { transform: none; }
.shop-tray .quick-add-overlay.is-sheet .quick-add-overlay-content {
  width: 100%;
  max-height: 78vh;
  padding: 1rem 0.85rem calc(1rem + env(safe-area-inset-bottom, 0px));
  border-radius: 20px 20px 0 0;
  transform: translateY(100%);
  transition: transform 0.3s ease-out;
}
.shop-tray .quick-add-overlay.is-sheet.is-open .quick-add-overlay-content { transform: translateY(0); }

.shop-tray .quick-add-overlay-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--shop-text-gray);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.shop-tray .quick-add-overlay-close:hover,
.shop-tray .quick-add-overlay-close:focus-visible {
  background: var(--primary-light);
  color: var(--primary-color);
}

/* --------------------------------------------------------------- the panel */
.shop-tray .quick-add-overlay-content .quick-add-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;               /* let .quick-add-rows own the scroll */
  overflow: hidden;
}
.shop-tray .quick-add-panel-title {
  margin: 0 2.25rem 0.85rem 0;  /* clear of the close button */
  font-family: var(--f-title), serif;
  font-weight: var(--f-title-wght);
  font-optical-sizing: auto;
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--primary-color);
}
.shop-tray .quick-add-rows {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Rows: <a> link rows and <button> (inside a form) add rows share the look. */
.shop-tray .quick-add-row-form { margin: 0; }
.shop-tray .quick-add-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 0.7rem 0.9rem;
  text-align: left;
  text-decoration: none;
  color: inherit;
  background: var(--tint-else);
  border: 1.5px solid transparent;
  border-radius: 10px;
  font: inherit;
  font-family: var(--f-body), serif;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.shop-tray .quick-add-row:hover,
.shop-tray .quick-add-row:focus-visible {
  border-color: var(--primary-color);
  background: var(--primary-light);
  transform: translateY(-1px);
}
.shop-tray .quick-add-row-label {
  font-weight: 600;
  color: var(--primary-color);
  line-height: 1.35;
  word-break: break-word;
  hyphens: auto;
}
.shop-tray .quick-add-row-price {
  flex-shrink: 0;
  white-space: nowrap;
  color: var(--shop-text-gray);
  font-size: 0.9rem;
}
/* Link rows (Generate your own / Custom request) are navigation, NOT add
   actions -- ticket decision 1. No fill, an underlined label reads as a link. */
.shop-tray .quick-add-row.is-link {
  background: transparent;
  border-color: var(--shop-border);
  border-style: dashed;
}
.shop-tray .quick-add-row.is-link:hover,
.shop-tray .quick-add-row.is-link:focus-visible {
  background: var(--bg-white);
  border-style: solid;
}
.shop-tray .quick-add-row.is-link .quick-add-row-label {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------------------------------------------------------- toast + confetti */
/* TT-SHOP-REDO-13: toast + confetti are appended to <body>, which carries
   `.shop-tray` on tray pages and `.shop-catalogue` on the catalogue -- both
   run the same AJAX add-to-cart, so match either ancestor. (The picker /
   overlay selectors above stay tray-only: the catalogue has no drawer.) */
:is(.shop-tray, .shop-catalogue) .qa-toast {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 10001;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.4rem;
  border-radius: 12px;
  background: #10b981;
  color: #fff;
  font-family: var(--f-title), serif;
  font-weight: var(--f-title-wght);
  font-size: 0.98rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
  animation: qaToastIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
:is(.shop-tray, .shop-catalogue) .qa-toast.error { background: #ef4444; }
:is(.shop-tray, .shop-catalogue) .qa-toast svg { width: 20px; height: 20px; flex-shrink: 0; }
:is(.shop-tray, .shop-catalogue) .qa-toast.is-leaving { animation: qaToastOut 0.3s ease-out forwards; }
@keyframes qaToastIn {
  0%   { opacity: 0; transform: translateY(30px) scale(0.9); }
  70%  { transform: translateY(-5px) scale(1.02); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes qaToastOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(30px); }
}
@media (max-width: 700px) {
  :is(.shop-tray, .shop-catalogue) .qa-toast { bottom: 1rem; right: 1rem; left: 1rem; }
}

:is(.shop-tray, .shop-catalogue) .qa-confetti-container {
  position: fixed;
  inset: 0;
  z-index: 10002;
  pointer-events: none;
  overflow: hidden;
}
:is(.shop-tray, .shop-catalogue) .qa-confetti-piece {
  position: absolute;
  top: -10px;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  animation: qaConfettiFall 1s ease-out forwards;
}
@keyframes qaConfettiFall {
  0%   { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
  100% { opacity: 0; transform: translateY(100vh) rotate(720deg) scale(0.5); }
}

/* Cart-badge celebration in the shared header (TT-SHOP-REDO-08 .cart-link /
   .cart-badge -- the legacy .cart-button / #cartCount are gone). */
.base-header .cart-link.cart-pulse { animation: qaCartPulse 0.6s ease-in-out; }
.base-header .cart-badge.cart-count-pop { animation: qaCartCountPop 0.6s ease-in-out; }
@keyframes qaCartPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.1); }
}
@keyframes qaCartCountPop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.4); }
  100% { transform: scale(1); }
}

/* Lock background scroll while a picker is open (body carries .shop-tray). */
.shop-tray.quick-add-open { overflow: hidden; }

/* ------------------------------------------------------------ reduced motion */
@media (prefers-reduced-motion: reduce) {
  .shop-tray .quick-add-overlay,
  .shop-tray .quick-add-overlay.is-modal .quick-add-overlay-content,
  .shop-tray .quick-add-overlay.is-sheet .quick-add-overlay-content {
    transition: none;
  }
  .shop-tray .quick-add-overlay.is-modal .quick-add-overlay-content,
  .shop-tray .quick-add-overlay.is-sheet .quick-add-overlay-content { transform: none; }
  .shop-tray .quick-add-row:hover,
  .shop-tray .quick-add-row:focus-visible { transform: none; }
  :is(.shop-tray, .shop-catalogue) .qa-toast { animation: none; }
  /* confetti is not emitted at all under reduced motion (guarded in JS) */
}
