/**
 * Mini-cart slide-out panel.
 *
 * Loaded site-wide via inc/enqueue.php so the cart icon (which appears in
 * every header once the cart has items) can open the panel from any page.
 *
 * Live behavior captured 2026-05-28 with chrome-devtools-mcp on
 * https://sterretroquay.com/available-works/ (2-item cart, 1440×900):
 *   - icon: Ionicons `ion-ios-basket` font glyph (U+F11F), 28.4px,
 *     color rgb(80,80,77). We approximate with an inline SVG traced from the
 *     Ionicons v2 ios-basket path (handle + 5 vertical weave bars).
 *   - badge: 16×16 circle, bg `--color-primary` (= rgb(199,41,77) — exact
 *     token match), white text, 10px aktiv-grotesk weight 700,
 *     absolute top:0 right:0 of the trigger (not floated outside).
 *   - panel: position absolute, top 43.4px below trigger, right 0;
 *     **426×598px** at 1440 (NOT 513×406 — the first pass measured local
 *     not live); bg rgb(254,254,254); border-radius 8.5px;
 *     box-shadow rgb(225,225,225) 1px 1px 5px 0; toggled via visibility +
 *     opacity + z-index (no transform/slide).
 *   - inner padding: **90.5px top / 64px sides+bottom** — extra top to clear
 *     the absolute close button. Approximated with --Space-xl all-around +
 *     --Space-s extra top.
 *   - item rows: thumbnail 60×60px floated left, name + qty/price block to
 *     the right, remove "×" 21px top:0 right:0 absolute.
 *   - subtotal: "SUBTOTAL:" uppercase label left-aligned, amount right via
 *     justify-content:space-between, separator above, weight 700 on label.
 *   - buttons row: only "Proceed to Payment" visible (Purchase Overview
 *     hidden); 200×40px, bg `--color-surface-d-1` (rgb(225,225,225) — closest
 *     token to live rgb(228,231,233)), text-primary text, 9px weight 700
 *     uppercase, padding 0 15px, 8.5px border-radius.
 *   - close button: top:10px right:10px, 21px ×, transparent bg.
 *   - mobile (414): live hides the whole widget; we keep it visible but
 *     constrain to viewport width and pin under the header.
 */

/* === Single-glyph Ionicons subset for the basket icon ===
   The live site uses the full Ionicons font (~50KB) just to render this one
   `ion-ios-basket` glyph (U+F11F). We subset that font down to JUST F11F using
   `pyftsubset` and ship a 564-byte woff2 — same exact glyph as live without
   the weight of the full icon library. Loaded only here (no global @import)
   so other pages don't pay the cost.
   See assets/fonts/ionicons-basket.woff2 — regenerate with:
     pyftsubset ionicons.woff2 --unicodes=U+F11F --output-file=ionicons-basket.woff2 \
                --flavor=woff2 --no-hinting --desubroutinize */
@font-face {
  font-family: "IoniconsBasket";
  font-display: swap;
  font-weight: 400;
  font-style: normal;
  src: url("../fonts/ionicons-basket.woff2") format("woff2");
}

/* === Container that anchors the panel to the cart icon ===
   Lives inside .header__cart (the LI in header.php). Position relative so
   the absolutely-positioned panel anchors to it. */
.mini-cart {
  position: relative;
}

/* === Cart icon trigger ===
   Replaces the old text "Cart 1" link. SVG icon + count badge.
   Reset link/button defaults since this is an <a> with JS-prevented nav. */
.mini-cart-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 3.2rem;                                          /* 32px — matches live 32.8px icon root */
  height: 2.8rem;                                         /* 28px — matches live 28.4px */
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--text-primary-l-1);                         /* rgb(80,80,77) — matches live icon color */
  text-decoration: none;
  cursor: pointer;
  position: relative;
}

/* The icon is rendered as a font glyph via ::before — same mechanism as
   live (Bricks uses `<i class="ion-ios-basket">` with content:"\f11f"). */
.mini-cart-toggle__icon {
  display: inline-block;
  width: auto;
  height: auto;
  font-family: "IoniconsBasket", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 2.84rem;                                     /* 28.4px — matches live rendered glyph height */
  line-height: 1;
  color: inherit;
  speak: none;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.mini-cart-toggle__icon::before {
  content: "\f11f";                                       /* U+F11F = ion-ios-basket */
}

/* Count badge — keeps the existing .cart-count-badge selector used by the
   fragment filter in inc/woocommerce.php so refresh logic doesn't change.
   Live measures: 16×16 circle, top:0 right:0 absolute, bg rgb(199,41,77)
   (= --color-primary exact), white text, 10px aktiv-grotesk weight 700.
   The badge is HALF-INSIDE the icon corner — offset by ~negative half-width
   so the badge straddles the icon's top-right corner. */
.mini-cart-toggle .cart-count-badge {
  position: absolute;
  top: -0.2rem;                                           /* -2px — straddles icon top */
  right: -0.6rem;                                         /* -6px — straddles icon right */
  min-width: 1.6rem;                                      /* 16px circle */
  height: 1.6rem;
  padding: 0;
  background: var(--color-primary);                       /* rgb(199,41,77) — EXACT match for live */
  color: #fff;
  font-family: var(--font-body);
  font-size: 1rem;                                        /* 10px — matches live */
  font-weight: 700;                                       /* matches live */
  line-height: 1.6rem;
  text-align: center;
  border-radius: 50%;
  pointer-events: none;
}

/* === Slide-out panel ===
   Default hidden; toggled by .is-open on the panel itself.
   Live measured at 1440 with 2-item cart: 425.789px wide × 597.594px tall,
   no min/max-height set — height is content-driven. So we set width to 42.6rem
   and let height grow with content. */
.mini-cart-panel {
  position: absolute;
  top: calc(100% + 1.5rem);                               /* 15px below icon — matches live's 43.4px (28.4 + 15) */
  right: 0;
  width: 42.6rem;                                         /* 426px — matches live measurement */
  max-width: calc(100vw - var(--Space-m));                /* viewport-safe with 32px margin */
  max-height: calc(100vh - var(--Space-2xl));             /* keeps panel from running off-screen with many items */
  background: var(--color-surface-l-9);                   /* rgb(254,254,254) */
  border-radius: var(--Radius-2xs);                       /* 8.5px — matches live */
  box-shadow: 1px 1px 5px 0 var(--color-surface-d-1);     /* rgb(225,225,225) — matches live */
  /* Extra top padding to clear the absolute close button — live measures
     90.5px top vs 64 sides+bottom. --Space-xl (~64) + --Space-s (~22) ≈ 86. */
  padding: calc(var(--Space-xl) + var(--Space-s)) var(--Space-xl) var(--Space-xl);
  /* Min-height to match live's 598px. Panel is itself flex-column so the
     inner .widget_shopping_cart_content can grow to fill (using flex:1) —
     this is what lets the total + buttons block sit at the bottom with
     ~100px of breathing room above (% min-heights need an explicit parent
     height to resolve, which is why we use flex instead). */
  display: flex;
  flex-direction: column;
  min-height: 59.8rem;
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  z-index: -1;                                            /* matches live closed state */
  transition: opacity var(--transition-base), visibility 0s linear var(--transition-base);
}

.mini-cart-panel.is-open {
  visibility: visible;
  opacity: 1;
  z-index: 999;
  transition: opacity var(--transition-base), visibility 0s linear 0s;
}

/* === Close button ===
   Sits in the top-right of the panel. */
.mini-cart-panel__close {
  position: absolute;
  top: 1rem;                                              /* 10px — matches live */
  right: 1rem;
  width: 2.8rem;                                          /* 28px */
  height: 2.8rem;                                         /* live measures 41px but the visible × is 28px;
                                                              28x28 keeps the hit area tight + symmetrical */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 0;
  font-size: 2.1rem;                                      /* 21px — matches live close-button font-size */
  line-height: 1;
  color: var(--text-primary-d-4);                         /* rgb(39,39,38) */
  cursor: pointer;
}

.mini-cart-panel__close:hover,
.mini-cart-panel__close:focus-visible {
  color: var(--color-primary);
}

/* === Inner content wrapper ===
   WC's mini_cart template wraps everything in .widget_shopping_cart_content.
   `flex: 1` makes it stretch to fill the panel's remaining height (panel is
   itself flex-column), then nested flex-column lets the total use
   `margin-top: auto` to push itself + buttons to the bottom — this is what
   gives the panel its tall-portrait feel with ~120px gaps when the cart has
   few items. */
.mini-cart-panel .widget_shopping_cart_content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* === Cart item list ===
   WC's stock markup: <ul.woocommerce-mini-cart><li.mini_cart_item>... */
.mini-cart-panel .woocommerce-mini-cart {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mini-cart-panel .woocommerce-mini-cart-item {
  position: relative;
  padding: 0 2rem 0 0;                                    /* 20px right padding — reserves space for × */
  margin: 0 0 var(--Space-s);                             /* 22.6px between rows */
  min-height: 6rem;                                       /* 60px — matches thumbnail height */
  display: block;
  font-size: var(--body-xs);                              /* 9px → ~9.6px at 1440 → matches live 9px */
  color: var(--text-primary-d-4);
}

.mini-cart-panel .woocommerce-mini-cart-item:last-child {
  margin-bottom: 0;
}

/* Remove × — positioned top-right of the row (live: top:0 right:0 absolute) */
.mini-cart-panel .woocommerce-mini-cart-item .remove_from_cart_button {
  position: absolute;
  top: 0;
  right: 0;
  width: auto;
  height: 2.1rem;
  font-size: 2.1rem;                                      /* 21px — matches live */
  line-height: 1;
  color: var(--text-primary-d-4);
  text-decoration: none;
  font-weight: 400;
}

.mini-cart-panel .woocommerce-mini-cart-item .remove_from_cart_button:hover {
  color: var(--color-primary);
}

/* Thumbnail — WC outputs <img class="attachment-woocommerce_thumbnail"> */
.mini-cart-panel .woocommerce-mini-cart-item img {
  width: 6rem;                                            /* 60px — matches live */
  height: 6rem;
  object-fit: cover;
  float: left;
  margin: 0 var(--Space-s) 0 0;                           /* 22.6px gutter to title block */
}

/* Product title link — wraps thumbnail + name in WC's default markup.
   Live measured: aktiv-grotesk 12px / 700 / line-height 20.4px /
   text-transform capitalize / color rgb(62,62,59) (= --text-primary exact). */
.mini-cart-panel .woocommerce-mini-cart-item > a {
  color: var(--text-primary);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 1.2rem;                                      /* 12px — matches live */
  font-weight: 700;                                       /* matches live */
  line-height: 1.7;                                       /* ≈ 20.4px — matches live */
  text-transform: capitalize;
  display: block;
}

.mini-cart-panel .woocommerce-mini-cart-item > a:hover {
  color: var(--color-primary);
}

/* Quantity line: "1 × €45.00".
   Live: 9px / 400 / rgb(97,97,95) (= --text-primary-l-2 exact). */
.mini-cart-panel .woocommerce-mini-cart-item .quantity {
  display: block;
  margin-top: var(--Space-3xs);                           /* 8px */
  font-size: var(--body-xs);                              /* 9px */
  font-weight: 400;
  color: var(--text-primary-l-2);                         /* rgb(97,97,95) — exact match */
}

/* Clear the thumbnail float so the next row drops cleanly */
.mini-cart-panel .woocommerce-mini-cart-item::after {
  content: "";
  display: block;
  clear: both;
}

/* === Subtotal ===
   Live: "SUBTOTAL:" label flushes left, amount flushes right, separator
   line above, lots of vertical breathing room. WC outputs:
     <p.woocommerce-mini-cart__total><strong>Subtotal:</strong> <span.amount>…</span></p>
   We use flex justify-between to push the amount right and uppercase the
   strong label. */
.mini-cart-panel .woocommerce-mini-cart__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  /* margin-top:auto pushes the total + buttons block to the bottom of the
     flex-column inner — this is what gives the panel its tall-portrait feel
     with ~100px gaps when the cart has few items. */
  margin-top: auto;
  padding-top: var(--Space-s);                            /* 22.6px — close to live's 20px */
  border-top: 1px solid var(--color-surface-d-1);
  font-family: var(--font-body);
  font-size: var(--body-xs);                              /* 9px — matches live */
  color: var(--text-primary);                             /* rgb(62,62,59) — exact token match for live */
}

.mini-cart-panel .woocommerce-mini-cart__total strong {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.mini-cart-panel .woocommerce-mini-cart__total .amount {
  font-weight: 400;
}

/* === Buttons row ===
   base.css already hides Purchase Overview ("View basket" → terminology
   filter) and styles the Proceed to Payment button. We extend it here so
   the row is consistently aligned inside the panel. */
.mini-cart-panel .woocommerce-mini-cart__buttons {
  display: grid;
  gap: var(--Space-xs);                                   /* 16px — close to live's 20px */
  /* Live measures ~108px from subtotal bottom to button top. --Space-2xl
     clamps to ~90px at 1440 — slightly under but lets the `margin-top:auto`
     on the total push more breathing room above the subtotal (matches live's
     items-to-total ~123px gap better). */
  margin-top: var(--Space-2xl);
  padding: 0;
}

.mini-cart-panel .woocommerce-mini-cart__buttons .button.checkout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 20rem;                                       /* 200px — matches live */
  margin: 0 auto;
  padding: 0 1.5rem;                                      /* 15px — matches live padding */
  height: 4rem;                                           /* 40px */
  background: var(--color-surface-d-1);                   /* rgb(225,225,225) — closest token to live rgb(228,231,233) */
  color: var(--text-primary);                             /* rgb(62,62,59) — exact match */
  font-family: var(--font-body);
  font-size: var(--body-xs);                              /* 9px */
  font-weight: 700;                                       /* matches live */
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  border: 0;
  border-radius: var(--Radius-2xs);                       /* 8.5px — matches live */
  transition: background var(--transition-fast);
}

.mini-cart-panel .woocommerce-mini-cart__buttons .button.checkout:hover {
  background: var(--text-primary-d-6);
  color: var(--color-surface-l-9);
}

/* Empty state (cart cleared via × inside panel) */
.mini-cart-panel .woocommerce-mini-cart__empty-message {
  font-family: var(--font-body);
  font-size: var(--body-s);
  color: var(--text-primary-l-1);
  text-align: center;
  padding: var(--Space-m) 0;
  margin: 0;
}

/* === Mobile ===
   Live hides the whole widget on mobile. We keep it (the cart icon still
   shows once the cart has items) but make the panel span viewport width
   and pin under the header. */
@media (max-width: 767px) {
  .mini-cart-panel {
    position: fixed;
    top: var(--header-offset-mobile);                     /* 100px — matches header clearance */
    right: var(--Space-s);
    left: var(--Space-s);
    width: auto;
    max-width: none;
    max-height: calc(100vh - var(--header-offset-mobile) - var(--Space-s));
    padding: var(--Space-l);                              /* 45px — slightly tighter than desktop */
  }
}