/* Arena / Gasperi — Tailwind CDN Companion
   Only things Tailwind CDN utility classes can't handle. */

::selection { background: #0a0a0a; color: #fff; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.header-scrolled {
  background: rgba(10,10,10,0.95) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: rgba(255,255,255,0.06) !important;
}

.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* ═══════════════════════════════════════════════════════
   CART DRAWER — Gasperi theme overrides
   Restyling the global SiteCraft cart to match the
   white/black brutalist Gasperi aesthetic.
   Target: aside#cart-drawer (from cart_drawer template)
   ═══════════════════════════════════════════════════════ */

/* Backdrop */
div#cart-backdrop {
  background: rgba(0, 0, 0, 0.8) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

/* Drawer panel — white bg */
aside#cart-drawer {
  background-color: #ffffff !important;
  border-left: none !important;
  box-shadow: -8px 0 40px rgba(0, 0, 0, 0.15) !important;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* ── Header ── */
aside#cart-drawer > div:first-child {
  border-bottom: 1px solid #e5e5e5 !important;
  background-color: #ffffff !important;
  padding: 2rem !important;
}
aside#cart-drawer > div:first-child h2 {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 900 !important;
  font-size: 1.8rem !important;
  text-transform: uppercase !important;
  letter-spacing: -0.03em !important;
  color: #0a0a0a !important;
}

/* Close button */
aside#cart-drawer #cart-close-btn {
  width: 2.5rem !important;
  height: 2.5rem !important;
  border-radius: 0 !important;
  color: #0a0a0a !important;
  background: transparent !important;
  font-size: 1.5rem !important;
  transition: transform 0.3s !important;
}
aside#cart-drawer #cart-close-btn:hover {
  background: transparent !important;
  color: #0a0a0a !important;
  transform: rotate(90deg);
}

/* ── Items area ── */
aside#cart-drawer #cart-items {
  background-color: #ffffff !important;
  padding: 1.5rem 2rem !important;
}

/* Empty state text */
aside#cart-drawer #cart-items > p {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 900 !important;
  font-size: 1.2rem !important;
  text-align: center !important;
  opacity: 0.25 !important;
  color: #0a0a0a !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 6rem 1rem !important;
}

/* Item cards */
aside#cart-drawer #cart-items > div {
  background-color: #ffffff !important;
  border: none !important;
  border-bottom: 1px solid #f0f0f0 !important;
  border-radius: 0 !important;
  padding: 1.5rem 0 !important;
  gap: 1.5rem !important;
}
aside#cart-drawer #cart-items > div:last-of-type {
  border-bottom: none !important;
}

/* Item images */
aside#cart-drawer #cart-items img {
  width: 6rem !important;
  height: 8rem !important;
  border-radius: 0 !important;
  border: none !important;
  object-fit: cover !important;
  filter: grayscale(1);
  transition: filter 0.5s;
}
aside#cart-drawer #cart-items > div:hover img {
  filter: grayscale(0);
}

/* Image placeholder */
aside#cart-drawer #cart-items div.w-14 {
  width: 6rem !important;
  height: 8rem !important;
  border-radius: 0 !important;
  border: none !important;
  background-color: #f5f5f5 !important;
}

/* Item name */
aside#cart-drawer #cart-items p.font-medium {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  color: #0a0a0a !important;
  line-height: 1.3 !important;
}

/* Item price lines */
aside#cart-drawer #cart-items .text-zinc-500 {
  color: #a3a3a3 !important;
}
aside#cart-drawer #cart-items .text-zinc-400 {
  color: #a3a3a3 !important;
}
aside#cart-drawer #cart-items .text-zinc-200 {
  color: #0a0a0a !important;
}
aside#cart-drawer #cart-items .text-zinc-300 {
  color: #0a0a0a !important;
}
aside#cart-drawer #cart-items .text-zinc-100 {
  color: #0a0a0a !important;
}

/* Qty buttons */
aside#cart-drawer #cart-items [data-cart-minus],
aside#cart-drawer #cart-items [data-cart-plus] {
  width: 2rem !important;
  height: 2rem !important;
  border-radius: 0 !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  color: #0a0a0a !important;
  background-color: transparent !important;
  transition: all 0.2s !important;
}
aside#cart-drawer #cart-items [data-cart-minus]:hover,
aside#cart-drawer #cart-items [data-cart-plus]:hover {
  background-color: #0a0a0a !important;
  color: #ffffff !important;
  border-color: #0a0a0a !important;
}

/* Remove button */
aside#cart-drawer #cart-items [data-cart-remove] {
  color: #a3a3a3 !important;
  font-size: 0.6rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  text-decoration: underline !important;
}
aside#cart-drawer #cart-items [data-cart-remove]:hover {
  color: #0a0a0a !important;
  text-decoration: none !important;
}

/* ── Footer ── */
aside#cart-drawer > div:last-child {
  background-color: #fafafa !important;
  border-top: 1px solid #e5e5e5 !important;
  padding: 2rem !important;
}

/* Total row */
aside#cart-drawer > div:last-child > div:first-child {
  padding-bottom: 1.5rem !important;
  margin-bottom: 1rem !important;
  border-bottom: 2px solid #0a0a0a !important;
}
aside#cart-drawer > div:last-child > div:first-child span {
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.2em !important;
  color: #0a0a0a !important;
}
aside#cart-drawer #cart-total {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 900 !important;
  font-size: 1.8rem !important;
  color: #0a0a0a !important;
}

/* Warnings */
aside#cart-drawer #cart-min-warning {
  color: #a3a3a3 !important;
}
aside#cart-drawer #cart-phone-warning {
  color: #a3a3a3 !important;
}

/* Buttons container — stack vertically */
aside#cart-drawer > div:last-child .grid {
  display: flex !important;
  flex-direction: column-reverse !important;
  gap: 0.5rem !important;
}

/* Checkout button */
aside#cart-drawer #cart-checkout-btn {
  width: 100% !important;
  background-color: #0a0a0a !important;
  color: #ffffff !important;
  padding: 1.25rem !important;
  border-radius: 0 !important;
  border: none !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  transition: background-color 0.3s !important;
}
aside#cart-drawer #cart-checkout-btn:hover:not(:disabled) {
  background-color: #262626 !important;
}
aside#cart-drawer #cart-checkout-btn:disabled {
  opacity: 0.35 !important;
}

/* Clear button — subtle text */
aside#cart-drawer #cart-clear-btn {
  width: 100% !important;
  background-color: transparent !important;
  color: #a3a3a3 !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0.5rem !important;
  font-size: 0.6rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
}
aside#cart-drawer #cart-clear-btn:hover {
  background-color: transparent !important;
  color: #0a0a0a !important;
}

/* ═══════════════════════════════════════════════════════
   + BUTTON on product cards
   When cart system calls activateAddButtons() it removes
   the hidden class. No extra CSS needed — Tailwind's
   hidden utility + the inline classes handle it.
   ═══════════════════════════════════════════════════════ */