/**
 * @file overrides/commerce-cart-flyout.flyout.css
 * Overrides for commerce_cart_flyout. Attached via libraries-extend on the
 * module's flyout library (see wwf_tw.info.yml), so it loads only where the
 * cart flyout renders. Depends on wwf_tw/throbber (cart stepper overlay).
 *
 * Make the offcanvas respect Drupal's displacement (admin toolbar / navigation)
 * instead of covering it or sliding behind: the module only accounts for the
 * classic horizontal toolbar via a fixed padding-top; we drive the panel off the
 * --drupal-displace-offset-* custom properties core's drupal.displace publishes.
 *
 * Must stay UNLAYERED: the module's styles are unlayered and unlayered rules win
 * over any @layer.
 *
 * Every selector here carries a `body` prefix: the module declares the same
 * properties at the same class specificity, and a bare tie would fall to
 * aggregation order (non-deterministic across environments).
 */
body .cart-offcanvas {
  top: var(--drupal-displace-offset-top, 0px);
  bottom: var(--drupal-displace-offset-bottom, 0px);
  min-height: 0;
  height: auto;
  /* Token is the source of truth for the panel layer (matches the module). */
  z-index: var(--wwf-z-cart-panel, 1000);
}

body.toolbar-fixed .cart-offcanvas,
body.toolbar-fixed.toolbar-tray-open .cart-offcanvas {
  padding-top: 0;
}

/* An UNFIXED classic toolbar scrolls away with the page while still publishing
   its height as a top offset; the offcanvas is viewport-fixed, so honouring
   that offset reserves a dead strip once the toolbar has scrolled out of view.
   Drop the inset there: the modal may cover the (scrolled-to-top) toolbar,
   like any overlay. The fixed toolbar and the Navigation chrome (really pinned
   to the viewport) keep the displace inset. */
body:is(.toolbar-horizontal, .toolbar-vertical):not(.toolbar-fixed) .cart-offcanvas,
body:is(.toolbar-horizontal, .toolbar-vertical):not(.toolbar-fixed) .cart-offcanvas-bg {
  top: 0;
}

body .cart-offcanvas--left,
body .cart-offcanvas--right {
  height: auto;
}

body .cart-offcanvas--right {
  right: var(--drupal-displace-offset-right, 0px);
}

body .cart-offcanvas-bg {
  top: var(--drupal-displace-offset-top, 0px);
  bottom: 0;
  height: auto;
  /* Above positioned page content (e.g. sections use z-10); the panel
     (z-1000) still sits above this overlay. */
  z-index: var(--wwf-z-cart-bg, 900);
}

/* Lock page scroll while the cart offcanvas is open, so only the flyout scrolls
   behind its backdrop (Escape closes it; see cart-offcanvas.js). */
html:has(.cart-offcanvas.is-open) {
  overflow: hidden;
}

/* Cart trigger hover: the heart scales up a touch (replaces the opacity fade).
   A user-initiated effect, kept on under reduced-motion by design. */
.cart-block--link__expand .cart-block--summary__icon {
  transform-origin: center;
  transition: transform 0.2s ease;
}
.cart-block--link__expand:hover .cart-block--summary__icon {
  transform: scale(1.1);
}

/* Mobile mini-cart bar.
   cart-minicart.js mounts this strip right BEFORE the sticky header and
   renders it from the flyout model: heart + count badge, items + total
   summary, and a CTA: straight to checkout when a single order has items
   (labelled like the flyout button, or "Finish adoption" for adoption
   orders), "View cart" opening the offcanvas when several do. On small
   screens it becomes the cart's single entry point (the in-bar heart hides);
   from 48rem up the bar stays hidden and the header heart rules. */
.wwf-minicart {
  display: none;
}

/* Mobile mini-cart disabled: the cart icon stays in the header at every width
   (like desktop), and the offer flag drops below the header instead of sharing
   the bar (see webform-shortcut / anchor overrides). The bar markup + JS stay
   (kept .wwf-minicart { display: none }); re-enable by restoring the rules
   below. */

.wwf-minicart__cart {
  position: relative;
  flex: none;
  display: inline-flex;
}
.wwf-minicart__badge {
  position: absolute;
  top: -0.375rem;
  right: -0.5rem;
  min-width: 0.9375rem;
  height: 0.9375rem;
  border-radius: 0.5rem;
  background: var(--wwf-color-cart-badge, #e3000f);
  color: #fff;
  font-family: var(--wwf-font-body, sans-serif);
  font-size: 0.5625rem;
  font-weight: 700;
  line-height: 0.9375rem;
  text-align: center;
  padding: 0 0.1875rem;
}
.wwf-minicart__sum {
  font-family: var(--wwf-font-heading, sans-serif);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.wwf-minicart__sum small {
  margin-inline-start: 0.375rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--wwf-color-muted-foreground, #5c5c5a);
}
.wwf-minicart__cta {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  font-family: var(--wwf-font-heading, sans-serif);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: inherit;
  text-decoration: none;
  /* Accent lives in the underline only (the accent would fail contrast as text
     on white at this size). */
  border-bottom: 2px solid var(--wwf-color-accent);
  padding-bottom: 0.125rem;
}
.wwf-minicart__icon {
  display: block;
  width: 1.5rem;
  height: auto;
}