/* Base-off adapter — the rules the platform's stock components need from base/index.css, for templates
   where the layout leaves that file off (playbook §11.3, §19.3, §22.3). Load it wherever those
   components render: the cart drawer is emitted by the layout on every page. Brand-free except the
   colour variables, which fall back to neutral values. */
/* ---- What the stock components need from base/index.css -----------------
   layout/theme.html leaves base/index.css off on these page types so it cannot fight the brand
   CSS, but the product form, the media viewer and the cart drawer are stock components that
   lean on a handful of its rules. Without them the Add to cart spinner showed all the time, the
   form's error box (a ⚠ icon) showed with no error, and the viewer's and the drawer's empty
   <summary> drew a ▶ marker on the page. These are those rules, verbatim in effect. */
[data-base-css="off"] .hidden { display: none !important; }
[data-base-css="off"] summary { list-style: none; cursor: pointer; }
[data-base-css="off"] summary::-webkit-details-marker { display: none; }
[data-base-css="off"] summary:empty { display: none; }
[data-base-css="off"] .button { position: relative; }
[data-base-css="off"] .button__spinner {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  display: none;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
}
[data-base-css="off"] .button.loading { color: transparent; }
[data-base-css="off"] .button.loading .button__spinner {
  display: flex;
  color: var(--adapter-on-dark, #f6f2e9);
  animation: pdp-spin 1.5s linear infinite;
}
@keyframes pdp-spin { to { transform: rotate(360deg); } }

/* The platform's loading icon (components/icons/loading-spinner) is a .loading--rotator wrapper that
   base/index.css hides until its parent is .loading — ported here, since that file is off. */
[data-base-css="off"] .loading--rotator { display: none; }
[data-base-css="off"] .loading > .loading--rotator { display: inline-flex; animation: pdp-spin 1.2s linear infinite; }
.block-product-card__add .button.loading > .loading--rotator {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  color: var(--adapter-primary, #24402f);
}
.block-product-card__add .button.loading > .loading--rotator svg { width: 16px; height: 16px; }

/* ---- Cart drawer: stacking and motion (playbook §22.4) -----------------------------------------
   The platform modal reads --z-index-modal and --modal-animation-name, both defined in base/index.css.
   Off, the drawer opens UNDER a sticky header (z-index auto), and the modal's inline animation name
   resolves to keyframes that do not exist: the panel shows flat, then any animation of your own
   restarts when the modal clears its inline style ~300ms later — "it opens twice". Give the modal a
   level and hand it your keyframes; keep them within its 300ms fallback timer. */
theme-cart-drawer theme-modal > details { --z-index: var(--adapter-z-modal, 95); }
theme-cart-drawer .cart-drawer > summary + * {
  --modal-animation-name: adapter-drawer-in;
  animation-duration: .28s;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
  animation-fill-mode: both;
}
@keyframes adapter-drawer-in { from { transform: translateX(100%); } to { transform: none; } }
/* The modal opens one frame before it sets its animation: without this the panel flashes open
   first. The drawer's open() adds .is-entering and removes it on animationend (see README). */
theme-cart-drawer.is-entering .cart-drawer > summary + * { animation: adapter-drawer-in .28s cubic-bezier(.22, 1, .36, 1) both !important; }
theme-cart-drawer theme-modal > details[open]::before { animation: adapter-fade .28s ease both; }
@keyframes adapter-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  theme-cart-drawer .cart-drawer > summary + * { --modal-animation-name: none; }
  theme-cart-drawer.is-entering .cart-drawer > summary + * { animation: none !important; }
  theme-cart-drawer theme-modal > details[open]::before { animation: none; }
}

/* ---- A cart line being updated (drawer and cart page) ---------------------------------------------
   The platform swaps the line price for .cart-item__total-loading with a spinner whose spin and
   position live in base/index.css — off, it sits frozen as a half circle. A shimmer bar instead. */
.cart-item { transition: opacity .25s ease; }
.cart-item.cart-item__disabled { opacity: .55; pointer-events: none; }
.cart-item__total { position: relative; min-width: 64px; text-align: end; }
.cart-item__total-loading { display: none; }
.cart-item__total-loading.loading {
  display: block;
  position: absolute;
  inset: 50% 0 auto auto;
  width: 64px; height: 12px; margin-top: -6px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--adapter-muted, #efeae0) 0%, var(--adapter-line, #e3dccf) 50%, var(--adapter-muted, #efeae0) 100%);
  background-size: 200% 100%;
  animation: adapter-shimmer 1.1s ease-in-out infinite;
}
.cart-item__total-loading svg { display: none; }
.cart-item__total-loading.loading ~ * { visibility: hidden; }
@keyframes adapter-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .cart-item__total-loading.loading { animation: none; } }