/**
 * OpenLabs — slide-out mini-cart drawer CONTENTS.
 *
 * Scope: everything here is nested under `.openlabs-mini-cart` (the wrapper the
 * theme prints inside the cart drawer's `aside > main`). The drawer SHELL — the
 * `.overlay` scrim, the slide-in animation, the header (title + close), and the
 * 420px width — is owned by app.css and is intentionally NOT touched here.
 *
 * This file is fully self-contained: the drawer renders in the header on every
 * page, and woocommerce.css is NOT loaded on non-WooCommerce pages, so the
 * item list, prices, buttons and empty state are all styled from scratch using
 * the global :root design tokens (resolved at runtime via var()).
 *
 * WooCommerce markup styled (standard mini-cart classes):
 *   .widget_shopping_cart_content
 *     ul.woocommerce-mini-cart.cart_list.product_list_widget
 *       li.woocommerce-mini-cart-item.mini_cart_item
 *         a.remove_from_cart_button  — the "×" remove control
 *         a > img                    — product thumbnail + name link
 *         span.quantity              — "2 × $39.99"
 *     p.woocommerce-mini-cart__total.total      — subtotal row
 *     p.woocommerce-mini-cart__buttons.buttons  — View cart / Checkout
 *     p.woocommerce-mini-cart__empty-message    — empty state
 */

/* Lay the contents out as a vertical stack inside the drawer body so the item
   list can flex/scroll while the totals + buttons stay pinned. The drawer's
   `aside main` supplies the outer 1rem margin, so we go edge-to-edge here. */
.openlabs-mini-cart,
.openlabs-mini-cart .widget_shopping_cart_content {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--ink);
}

.openlabs-mini-cart .widget_shopping_cart_content {
  display: flex;
  flex-direction: column;
  /* Fill the drawer body height (header is 68px, aside main adds 1rem×2). */
  max-height: calc(100vh - var(--header-height) - 2rem);
  min-height: 0;
}

/* ---------------------------------------------------------------- Item list */

.openlabs-mini-cart ul.woocommerce-mini-cart {
  list-style: none;
  margin: 0;
  padding: 0;
  /* The list is the only thing that scrolls; totals + buttons stay visible. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* Soften the scroll edges so rows fade rather than clip hard. */
  overscroll-behavior: contain;
}

.openlabs-mini-cart li.woocommerce-mini-cart-item {
  /* Override the shell's `.overlay aside li { margin-bottom }`.
     The product <a> wraps BOTH the thumbnail <img> and the name text, so a
     grid column can't separate the thumb from the name. Instead the li is a
     block that contains the floated thumbnail; the name and the qty/price line
     stack to its right. (`overflow:hidden` establishes a BFC so the float is
     contained and the bottom border sits below the whole row.) */
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0.9rem 0;
  /* Leave room on the right so text never slides under the remove button. */
  padding-right: 2rem;
  border-bottom: 1px solid var(--line);
}

.openlabs-mini-cart li.woocommerce-mini-cart-item:first-child {
  padding-top: 0.4rem;
}

.openlabs-mini-cart li.woocommerce-mini-cart-item:last-child {
  border-bottom: 0;
}

/* Product thumbnail: the first non-remove <a> wraps the <img>. We pin the
   image to the thumb column and let the trailing name text reflow into body. */
.openlabs-mini-cart li.woocommerce-mini-cart-item > a:not(.remove_from_cart_button) {
  display: block;
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.35;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.18s ease;
}

.openlabs-mini-cart li.woocommerce-mini-cart-item > a:not(.remove_from_cart_button):hover {
  color: var(--violet-600);
}

.openlabs-mini-cart li.woocommerce-mini-cart-item img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--mist);
  /* Float the thumb out of the name link's text flow into its own column. */
  float: left;
  margin-right: 0.85rem;
}

/* qty × price line beneath the product name. */
.openlabs-mini-cart li.woocommerce-mini-cart-item .quantity {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--muted);
}

.openlabs-mini-cart .quantity .woocommerce-Price-amount {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-weight: 600;
  color: var(--violet-600);
}

/* Remove control — icon-only Lucide "x" (CSS mask), no circle/box, pinned
   top-right of the row. WooCommerce's "×" glyph is hidden; the mask reveals
   `background-color` as the icon fill, which turns red on hover. */
.openlabs-mini-cart a.remove_from_cart_button {
  position: absolute;
  top: 0.85rem;
  right: 0;
  z-index: 1;
  /* hide WooCommerce's "×" glyph */
  font-size: 0;
  color: transparent;
  /* strip the old circle/box */
  width: 16px;
  height: 16px;
  border: 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
  text-decoration: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  background-color: var(--muted-2); /* the icon color (mask reveals this) — set AFTER `background:none` */
  transition: background-color 0.15s ease;
}

.openlabs-mini-cart a.remove_from_cart_button:hover,
.openlabs-mini-cart a.remove_from_cart_button:focus-visible {
  background-color: #d23b6f;
  color: transparent;
  outline: none;
}

/* --------------------------------------------------------------- Subtotal */

.openlabs-mini-cart p.woocommerce-mini-cart__total {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0;
  padding: 1rem 0 0.9rem;
  border-top: 1px solid var(--line);
}

.openlabs-mini-cart p.woocommerce-mini-cart__total strong {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink-2);
}

.openlabs-mini-cart p.woocommerce-mini-cart__total .woocommerce-Price-amount {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--violet-600);
}

/* ---------------------------------------------------------------- Buttons */

.openlabs-mini-cart p.woocommerce-mini-cart__buttons {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0;
  padding-bottom: 0.25rem;
}

.openlabs-mini-cart p.woocommerce-mini-cart__buttons a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.85rem 1.4rem;
  border-radius: 999px;
  border: 1.5px solid transparent;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, color 0.18s ease,
    border-color 0.18s ease, background 0.18s ease;
}

/* Primary — gradient pill (Checkout). */
.openlabs-mini-cart p.woocommerce-mini-cart__buttons a.button.checkout {
  background: var(--grad);
  color: #fff;
  box-shadow: none;
}

.openlabs-mini-cart p.woocommerce-mini-cart__buttons a.button.checkout:hover {
  transform: translateY(-2px);
  box-shadow: none;
  color: #fff;
}

/* Secondary — outline (View cart): any .button that is NOT the checkout one. */
.openlabs-mini-cart p.woocommerce-mini-cart__buttons a.button:not(.checkout) {
  background: var(--paper);
  color: var(--violet-600);
  border-color: var(--line-2);
}

.openlabs-mini-cart p.woocommerce-mini-cart__buttons a.button:not(.checkout):hover {
  transform: translateY(-2px);
  border-color: var(--violet-300);
  color: var(--violet-600);
}

.openlabs-mini-cart p.woocommerce-mini-cart__buttons a.button:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 2px;
}

/* ------------------------------------------------------------- Empty state */

.openlabs-mini-cart p.woocommerce-mini-cart__empty-message {
  margin: 0;
  padding: 3rem 1rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 500;
}