/* Purpose: Off-canvas cart drawer + free-shipping bar + drawer cross-sells. BEM, tokens only. */

.cart-drawer {
  position: fixed; inset: 0; z-index: var(--z-drawer);
  visibility: hidden; pointer-events: none;
}
.cart-drawer[aria-hidden="false"] { visibility: visible; pointer-events: auto; }

.cart-drawer__overlay {
  position: absolute; inset: 0;
  background: rgba(20,32,27,0.45);
  opacity: 0; transition: opacity var(--duration-base) var(--ease-out);
}
.cart-drawer[aria-hidden="false"] .cart-drawer__overlay { opacity: 1; }

.cart-drawer__panel {
  position: absolute; top: 0; right: 0; height: 100%;
  width: min(420px, 90vw);
  background: var(--color-surface);
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-xl);
  transform: translateX(100%);
  transition: transform var(--duration-slow) var(--ease-inout);
}
.cart-drawer[aria-hidden="false"] .cart-drawer__panel { transform: translateX(0); }

.cart-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-5); border-bottom: var(--border-thin);
}
.cart-drawer__title { font-size: var(--text-lg); }
.cart-drawer__close { font-size: var(--text-2xl); line-height: 1; color: var(--color-text-muted); }
.cart-drawer__close:hover { color: var(--color-text); }

.cart-drawer__items { flex: 1; overflow-y: auto; padding: var(--space-5); }
.cart-drawer__crosssell { padding: 0 var(--space-5) var(--space-4); }
.cart-drawer__crosssell-title { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-3); }
.cart-drawer__crosssell-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }

.cart-drawer__foot { padding: var(--space-5); border-top: var(--border-thin); display: grid; gap: var(--space-3); }
.cart-drawer__subtotal { display: flex; justify-content: space-between; font-weight: var(--weight-semibold); }
.cart-drawer__viewcart { text-align: center; font-size: var(--text-sm); color: var(--color-text-muted); }
.cart-drawer__viewcart:hover { color: var(--color-primary); }

/* Free-shipping progress bar — width driven by --pct data property */
.cart-drawer__shipping { padding: var(--space-4) var(--space-5) 0; }
.shipping-bar__msg { font-size: var(--text-sm); margin-bottom: var(--space-2); }
.shipping-bar { height: 6px; border-radius: var(--radius-full); background: var(--color-border); overflow: hidden; }
.shipping-bar__fill {
  display: block; height: 100%;
  width: var(--pct, 0%);
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  transition: width var(--duration-slow) var(--ease-out);
}

.crosssell-mini { display: grid; gap: var(--space-1); text-align: center; font-size: var(--text-xs); }
.crosssell-mini img { border-radius: var(--radius-md); }
.crosssell-mini__name { color: var(--color-text); }
.crosssell-mini__price { color: var(--color-text-muted); }

/* Mini-cart items (themed) — sitewide so the drawer is identical on every page */
.cart-drawer .woocommerce-mini-cart, .cart-drawer ul.cart_list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.cart-drawer .woocommerce-mini-cart__empty-message { color: var(--color-text-muted); }
.cart-drawer .mini_cart_item { position: relative; display: grid; grid-template-columns: 56px 1fr auto; gap: var(--space-3); align-items: center; padding-bottom: var(--space-4); border-bottom: var(--border-thin); }
.cart-drawer .mini_cart_item a:not(.remove) { font-weight: var(--weight-medium); color: var(--color-text); grid-column: 2; }
.cart-drawer .mini_cart_item img { grid-row: 1; grid-column: 1; width: 56px; height: 56px; border-radius: var(--radius-md); object-fit: cover; margin: 0; float: none; }
.cart-drawer .mini_cart_item .quantity { grid-column: 2; font-size: var(--text-sm); color: var(--color-text-muted); }
.cart-drawer .mini_cart_item a.remove { position: static; grid-column: 3; grid-row: 1; width: 1.6rem; height: 1.6rem; display: grid; place-items: center; border-radius: var(--radius-full); background: var(--color-surface-alt); color: var(--color-text-muted) !important; font-size: var(--text-md); }
.cart-drawer .mini_cart_item a.remove:hover { background: var(--color-error); color: var(--color-text-invert) !important; }
.cart-drawer .woocommerce-mini-cart__total { display: flex; justify-content: space-between; padding-top: var(--space-2); font-weight: var(--weight-semibold); }
.cart-drawer .woocommerce-mini-cart__buttons { display: none; }

/* Checkout order bump */
.order-bump {
  margin: var(--space-4) 0; padding: var(--space-4);
  border: 2px dashed var(--color-accent-dark); border-radius: var(--radius-md);
  background: var(--color-accent-soft);
}
.order-bump__label { display: flex; gap: var(--space-3); align-items: center; cursor: pointer; }