/* =========================================================================
   AltTune — Woo HEADER: nav cart icon + badge + slide-in mini-cart panel.
   Loaded GLOBALLY (every page). Owned by the header/mini-cart agent.

   Contract (inc/woocommerce.php): badge = span.at-cart-badge and mini-cart
   body = div.at-minicart-body, both swapped by WC cart fragments. They live
   in the nav / panel overlay, OUTSIDE the .at-woo page scope, so rules here
   scope under .at-nav / .at-mobile-nav / .at-minicart instead.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Desktop nav cart icon — sits in the top utility row (.at-nav-utility),
   immediately to the RIGHT of the currency switcher (form.at-nav-currency).
   Colour follows the nav text colour across every nav mode, mirroring
   .at-nav-login / .at-nav-currency-toggle exactly.

   The utility row is overflow:hidden + max-height:24px (it collapses on
   scroll). The cart icon (20px) and its badge (which pokes ~5px above the
   icon) would be clipped by that, so we let the icon group escape the clip
   the same way the currency menu does — overflow:visible scoped to the cart
   only — and keep the row's max-height untouched so the collapse animation
   and the currency dropdown (position:fixed in main.js) still work.
   ---------------------------------------------------------------------- */
/* The utility row (styles.css) is overflow:hidden + max-height:24px as a static
   clip guard — it never animates to 0, and the currency menu already escapes it
   via position:fixed (main.js). To stop that guard from cropping the cart icon
   (20px) and its badge (pokes ~6px above the icon), relax the clip to visible
   and give the row just enough height for the badge. The currency dropdown is
   unaffected (still position:fixed). Scoped to rows that actually hold a cart. */
.at-nav .at-nav-utility:has(.at-nav-cart) {
  overflow: visible;
  max-height: 30px;
}

.at-nav-utility .at-nav-cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Pull left so the icon hugs the currency control rather than sitting a full
     22px gap away; the trailing nudge keeps the badge corner off the row edge. */
  margin: -3px -2px -3px -10px;
  color: inherit;                    /* follow utility-row currentColor */
  text-decoration: none;
  transition: color 520ms cubic-bezier(.32,.72,0,1);
}
.at-nav-utility .at-nav-cart .at-cart-icon { display: block; }
.at-nav-utility .at-nav-cart:hover { color: var(--performance-orange); }

/* Default utility text is rgba(255,255,255,0.78); give the cart full white so
   the icon reads as a real action, not muted body text. */
.at-nav .at-nav-utility .at-nav-cart { color: #fff; }

/* Scrolled (light sticky bar) + light-nav pages → black icon. */
.at-nav.is-scrolled .at-nav-utility .at-nav-cart,
body.bad-nav-light .at-nav .at-nav-utility .at-nav-cart,
body.bad-ecu-quiz-open .at-nav .at-nav-utility .at-nav-cart { color: var(--rubber-black); }

/* Dark-nav pages stay white even when scrolled (mirrors .at-nav-login). */
body.bad-nav-dark .at-nav .at-nav-utility .at-nav-cart,
body.bad-nav-dark .at-nav.is-scrolled .at-nav-utility .at-nav-cart,
body.news-nav-dark .at-nav .at-nav-utility .at-nav-cart,
body.news-nav-dark .at-nav.is-scrolled .at-nav-utility .at-nav-cart { color: #fff; }

/* Hover wins in every mode. */
.at-nav.is-scrolled .at-nav-utility .at-nav-cart:hover,
body.bad-nav-light .at-nav .at-nav-utility .at-nav-cart:hover,
body.bad-nav-dark .at-nav .at-nav-utility .at-nav-cart:hover,
body.bad-nav-dark .at-nav.is-scrolled .at-nav-utility .at-nav-cart:hover,
body.news-nav-dark .at-nav .at-nav-utility .at-nav-cart:hover,
body.news-nav-dark .at-nav.is-scrolled .at-nav-utility .at-nav-cart:hover { color: var(--performance-orange); }

/* Hide the desktop icon where the desktop actions are hidden anyway. */
@media (max-width: 1024px) {
  .at-nav-utility .at-nav-cart { display: none; }
}

/* -------------------------------------------------------------------------
   Badge — small orange count bubble pinned to the icon's top-right corner.
   Orange is the sanctioned accent use here. `.is-empty` (count 0) hides it.
   ---------------------------------------------------------------------- */
.at-cart-badge {
  position: absolute;
  top: -5px;
  right: -7px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--performance-orange);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  letter-spacing: 0;
  pointer-events: none;
  transform: scale(1);
  transition: transform var(--dur-base) var(--ease-standard),
              opacity var(--dur-base) var(--ease-standard);
}
.at-cart-badge.is-empty {
  opacity: 0;
  transform: scale(0);
}

/* Pop on count change — signature easing, driven by woo-shop.js (.is-pop). */
@keyframes at-cart-badge-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}
.at-cart-badge.is-pop {
  animation: at-cart-badge-pop 540ms cubic-bezier(.32,.72,0,1);
}

/* -------------------------------------------------------------------------
   Mobile panel footer cart row — sits above Login in .at-mobile-nav-foot,
   styled like .at-mobile-nav-login with the icon + badge on the left.
   ---------------------------------------------------------------------- */
.at-mobile-nav-cart {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px;
  font-weight: 700;
  color: var(--rubber-black);
  text-decoration: none;
  border-radius: var(--radius-md);
}
.at-mobile-nav-cart:hover { color: var(--performance-orange); }
.at-mobile-nav-cart-icon {
  position: relative;
  display: inline-flex;
}

/* -------------------------------------------------------------------------
   Mini-cart overlay — same structural pattern as .at-mobile-nav (fixed
   shell, scrim, right slide-in panel) toggled by body.at-minicart-open.
   Sits above the mobile nav (z 1000) so "View cart" can hand over to it.
   ---------------------------------------------------------------------- */
.at-minicart {
  position: fixed; inset: 0;
  z-index: 1001;
  pointer-events: none;
  visibility: hidden;
}
body.at-minicart-open .at-minicart { pointer-events: auto; visibility: visible; }

.at-minicart-scrim {
  position: absolute; inset: 0;
  background: rgba(5, 5, 5, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 320ms cubic-bezier(.32,.72,0,1);
  cursor: pointer;
}
body.at-minicart-open .at-minicart-scrim { opacity: 1; }

.at-minicart-panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(420px, 92vw);
  background: var(--pure-white);
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.25);
  transform: translateX(100%);
  transition: transform 420ms cubic-bezier(.32,.72,0,1);
  display: flex; flex-direction: column;
  overflow: hidden;
}
body.at-minicart-open .at-minicart-panel { transform: translateX(0); }

/* Admin bar offsets (mirrors theme.css mobile-nav rules). */
body.admin-bar .at-minicart-panel,
body.admin-bar .at-minicart-scrim { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .at-minicart-panel,
  body.admin-bar .at-minicart-scrim { top: 46px; }
}

/* Lock body scroll while the panel is open (mirrors at-mobile-open). */
body.at-minicart-open {
  overflow: hidden;
  touch-action: none;
}

/* Head — uppercase display title + bordered close button (mobile-nav idiom). */
.at-minicart-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border-1);
  flex-shrink: 0;
}
.at-minicart-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rubber-black);
}
.at-minicart-close {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  color: var(--rubber-black);
  cursor: pointer;
  transition: background-color var(--dur-base) ease;
}
.at-minicart-close:hover { background: var(--bg-subtle); }

/* Body — the fragment-swapped wrapper. Items scroll; subtotal + actions
   stay pinned at the bottom of the column. */
.at-minicart-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Line items */
.at-minicart-items {
  list-style: none;
  margin: 0;
  padding: 6px 22px;
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.at-minicart-item {
  display: flex;
  align-items: flex-start;   /* top-align so the remove × sits next to the name,
                                not floating in the middle of tall lines (e.g. a
                                tool with an attached-protocols add-on box). */
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-2);
}
.at-minicart-item:last-child { border-bottom: 0; }

.at-minicart-thumb {
  flex: 0 0 56px;
  display: block;
}
.at-minicart-thumb img {
  display: block;
  width: 56px; height: 56px;
  object-fit: contain;    /* product shots must never be cropped */
  padding: 4px;
  box-sizing: border-box;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-2);
  background: #fff;
  float: none;            /* WC widget CSS floats cart_list imgs */
  margin: 0;
}

.at-minicart-line {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.at-minicart-name {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--fg-1);
  text-decoration: none;
}
a.at-minicart-name:hover { color: var(--performance-orange); }
.at-minicart-line .variation,
.at-minicart-line dl.variation {
  margin: 0;
  font-size: 11px;
  color: var(--fg-3);
}
.at-minicart-line .variation dt,
.at-minicart-line .variation dd { display: inline; margin: 0; padding: 0; float: none; }
.at-minicart-line .variation dd p { display: inline; margin: 0; }
.at-minicart-qty {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-2);
}
.at-minicart-qty .woocommerce-Price-amount { font-family: inherit; }

/* Remove × — quiet circle that turns danger on hover. Override WC's widget
   absolute-positioned red circle defaults. */
.at-minicart-item .at-minicart-remove,
.at-minicart-item a.remove {
  position: static;
  flex: 0 0 26px;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-2);
  border-radius: 999px;
  background: transparent;
  color: var(--fg-3) !important;   /* WC widget css uses !important red */
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
  transition: color var(--dur-base) ease, border-color var(--dur-base) ease;
}
.at-minicart-item .at-minicart-remove:hover,
.at-minicart-item a.remove:hover {
  background: transparent;
  color: var(--danger) !important;
  border-color: var(--danger);
}

/* Remove flow — neutralise WC's grey blockUI overlay (add-to-cart.js blocks the
   row at opacity 0.6 during the AJAX) and instead play a delightful collapse +
   slide-out on the leaving line item (driven by .is-removing in woo-shop.js). */
#at-minicart .blockUI.blockOverlay,
#at-minicart .at-minicart-item > .blockUI { display: none !important; }
.at-minicart-item.is-removing {
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transform: translateX(20px);
  padding-top: 0;
  padding-bottom: 0;
  border-bottom-color: transparent;
  transition:
    height 280ms cubic-bezier(0.4, 0, 0.2, 1),
    padding 280ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 200ms ease,
    transform 240ms cubic-bezier(0.34, 1.2, 0.64, 1);
}
@media (prefers-reduced-motion: reduce) {
  .at-minicart-item.is-removing { transition: opacity 120ms ease; transform: none; }
}

/* Subtotal — micro-label left, price right. WC echoes
   "<strong>Subtotal:</strong> <amount>"; restyle the strong as the label. */
.at-minicart-subtotal {
  flex-shrink: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 16px 22px;
  border-top: 1px solid var(--border-1);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--rubber-black);
}
.at-minicart-subtotal strong {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-2);
}

/* Actions — View cart (light) + Checkout (primary), full-width pair. */
.at-minicart-actions {
  flex-shrink: 0;
  display: flex;
  gap: 10px;
  padding: 0 22px 22px;
}
.at-minicart-actions .at-btn {
  flex: 1 1 0;
  justify-content: center;
}

/* Empty state */
.at-minicart-empty {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 32px 22px;
  text-align: center;
  color: var(--fg-3);
}
.at-minicart-empty .at-minicart-empty-icon {
  color: var(--fg-3);
}
.at-minicart-empty .woocommerce-mini-cart__empty-message {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--fg-2);
}
.at-minicart-empty .at-btn { margin-top: 4px; }

/* alientech-sync (bundles/assets/frontend.css) injects a grey-circle bag icon
   via ::before on every .woocommerce-mini-cart__empty-message. We render our
   own nav-matching cart icon in the template, so suppress the plugin's
   duplicate inside our drawer. */
.at-minicart .woocommerce-mini-cart__empty-message::before {
  content: none !important;
  display: none !important;
  background: none !important;
}

/* Reduced motion: no slide/pop theatrics. */
@media (prefers-reduced-motion: reduce) {
  .at-minicart-panel,
  .at-minicart-scrim,
  .at-cart-badge { transition: none; }
  .at-cart-badge.is-pop { animation: none; }
}