/* =========================================================================
   Header cart link. Sits outside the collapsible nav so it stays reachable
   at every width, including when the mobile menu is closed.
   ========================================================================= */

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  height: 76px;
}
.site-logo { margin-right: auto; display: inline-flex; align-items: center; }

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
}
.cart-fragment { display: flex; align-items: center; }

.cart-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px 9px 11px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}
.cart-link:hover,
.cart-link:focus-visible {
  color: var(--ink);
  border-color: var(--muted);
  background: rgba(255,255,255,0.04);
}
.cart-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.cart-link.has-items { color: var(--ink); border-color: var(--panel); }

.cart-link__icon { display: block; width: 21px; height: 21px; flex: none; }
.cart-link__icon svg { width: 100%; height: 100%; display: block; }

/* The count rides the basket rather than sitting in the text flow. */
.cart-link__count {
  position: absolute;
  top: -7px;
  left: 21px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #0D0D0D;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 0 0 2px var(--bg);
}

.cart-link__total { font-variant-numeric: tabular-nums; }
.cart-link__total .woocommerce-Price-amount { color: inherit; }

/* A cart that just gained an item gives one small nudge, no loop. */
@keyframes td-cart-bump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}
.cart-link.is-bumped .cart-link__count { animation: td-cart-bump .45s cubic-bezier(.2,.7,.3,1); }

@media (prefers-reduced-motion: reduce) {
  .cart-link.is-bumped .cart-link__count { animation: none; }
  .cart-link { transition: none; }
}

/* ---------- Narrow screens ---------- */
@media (max-width: 900px) {
  .site-header__inner { gap: var(--space-sm); }
  .header-actions { gap: 8px; }
  .nav-toggle { display: block; }
}

@media (max-width: 460px) {
  /* Keep the basket and the count; drop the subtotal so the bar stays on one line. */
  .cart-link__total { display: none; }
  .cart-link { padding: 9px 11px; }
  .cart-link__count { left: 20px; }
}