/* Mini cart popup — pure CSS hover.
   2026-06-30: hover driven by .cart-icon-wrapper (a plain <div>)
   which safely contains both the <a> trigger and the popup as
   siblings, avoiding the browser auto-close issue when <a>
   contains <div>. Mobile (< 960px) hides the popup entirely. */

.cart-icon-wrapper {
  position: relative;
  display: inline-flex;
}

.cart-mini-popup {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 380px;
  background: rgb(var(--color-background));
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border-radius: 4px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s 0.2s;
  z-index: 1000;
}

/* 2026-06-30: hover container changed from #cart-icon-bubble
   to .cart-icon-wrapper. The wrapper is a plain <div> that
   safely contains both the <a> trigger and .cart-mini-popup
   as siblings — no browser auto-close issue (block elements
   inside <a> cause the <a> to close prematurely). The .is-open
   class is kept for any future JS-driven fallback. */
.cart-icon-wrapper:hover .cart-mini-popup,
.cart-icon-wrapper:focus-within .cart-mini-popup,
.cart-mini-popup.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
}

.cart-mini-popup::before {
  content: '';
  position: absolute;
  top: -6px;
  right: 16px;
  width: 12px;
  height: 12px;
  background: rgb(var(--color-background));
  transform: rotate(45deg);
  box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.04);
  z-index: -1;
}

.cart-mini-popup__inner {
  display: flex;
  padding-top: 20px;
  border-radius: 8px;
  flex-direction: column;
  max-height: 70vh;
  background: rgb(var(--color-background, 255 255 255));
}

.cart-mini-popup__items {
  flex: 1;
  overflow-y: auto;
  padding: 4px 16px;
  min-height: 80px;
  max-height: 320px;
}

.cart-mini-popup__item {
  display: flex;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid rgb(var(--color-border, 235 235 235));
  gap: 12px;
  position: relative;
  /* 2026-07-01: slide-left removal animation. transform + opacity
     so the row glides out and fades in a single 250ms transition.
     max-height + padding are also collapsed so the surrounding
     rows reflow smoothly while the row is on its way out. */
  transition:
    transform 0.25s ease-in,
    opacity 0.25s ease-in,
    max-height 0.25s ease-in,
    padding 0.25s ease-in,
    margin 0.25s ease-in;
  max-height: 200px;
  overflow: hidden;
  will-change: transform, opacity;
}
.cart-mini-popup__item:last-child {
  border-bottom: none;
}
.cart-mini-popup__item.is-removing {
  transform: translateX(-110%);
  opacity: 0;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin: 0;
  pointer-events: none;
  border-bottom-color: transparent;
}

/* 2026-07-01: trash icon in the top-right of each line item.
   Uses the existing snippets/icon-delete.html (16x16 SVG that
   honors currentColor). */
.cart-mini-popup__item-remove {
  position: absolute;
  top: 8px;
  right: 0;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: none;
  color: rgb(var(--color-light-text, 130 130 130));
  cursor: pointer;
  transition: color 0.15s ease, opacity 0.15s ease;
}
.cart-mini-popup__item-remove:hover {
  color: rgb(var(--color-text));
}
.cart-mini-popup__item-remove:focus-visible {
  outline: 2px solid rgb(var(--color-text));
  outline-offset: 2px;
}
.cart-mini-popup__item-remove.is-loading {
  opacity: 0.4;
  pointer-events: none;
}
.cart-mini-popup__item-remove .icon {
  display: block;
}

.cart-mini-popup__item-image {
  width: 64px;
  flex-shrink: 0;
  background: rgb(var(--color-image-background));
  border-radius: 2px;
  overflow: hidden;
}
.cart-mini-popup__item-image img {
  width: 100%;
  display: block;
  height: auto;
}

.cart-mini-popup__item-details {
  flex: 1;
  min-width: 0;
}
.cart-mini-popup__item-name {
  margin-bottom: 4px;
  word-break: break-word;
  color: rgb(var(--color-text));
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cart-mini-popup__item-options {
  color: rgb(var(--color-light-text, 130 130 130));
  margin-bottom: 4px;
  line-height: 1.3;
}
.cart-mini-popup__item-qty {
  color: rgb(var(--color-light-text, 130 130 130));
  margin-bottom: 4px;
}
.cart-mini-popup__item-price {
  color: rgb(var(--color-text));
}

.cart-mini-popup__empty {
  padding: 24px 0;
  text-align: center;
  color: rgb(var(--color-light-text, 130 130 130));
  /* 2026-07-01: slide in from the RIGHT while the last item
     slides out LEFT. Both animations share the same 250ms
     timing so they play simultaneously — the empty text
     enters from the right as the row exits to the left. */
  animation: cart-mini-popup-empty-slidein 0.25s ease-out 0.1s both;
  will-change: transform, opacity;
}

@keyframes cart-mini-popup-empty-slidein {
  from {
    opacity: 0;
    transform: translateX(60px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.cart-mini-popup__footer {
  border-top: 1px solid rgb(var(--color-border, 235 235 235));
  padding: 12px 16px 16px;
}

.cart-mini-popup__subtotal-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.cart-mini-popup__subtotal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
  text-align: left;
}

/* 2026-07-01: subtotal redesign.
   - Label is "Subtotal:" with uppercase + colon.
   - Amounts sit on the right: optional strikethrough original
     total followed by the bold final total. */
.cart-mini-popup__subtotal-label {
  color: rgb(var(--color-text));
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-style: normal;
}
.cart-mini-popup__subtotal-label::after {
  content: ':';
}

.cart-mini-popup__subtotal-amounts {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  color: rgb(var(--color-text));
}
.cart-mini-popup__subtotal-strike {
  text-decoration: line-through;
  color: rgb(var(--color-light-text, 130 130 130));
}
.cart-mini-popup__subtotal-final {
  color: rgb(var(--color-text));
}

.cart-mini-popup__buttons {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.cart-mini-popup__button {
  flex: 1;
  text-align: center;
  font-size: 12px;
  padding: 10px 8px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* VIEW CART (first button) — black bg, white text */
.cart-mini-popup__buttons .button--secondary {
  background: #000;
  color: #fff;
  border-color: #000;
}
.cart-mini-popup__buttons .button--secondary:hover {
  background: #333;
  border-color: #333;
}

@media (max-width: 959px) {
  /* On touch devices, no hover. Popup hidden entirely; the cart icon
     still navigates to /cart. */
  .cart-mini-popup {
    display: none !important;
  }
}

/* 2026-07-01: cart-line-items is now also rendered inside the
   cart drawer. The drawer has more vertical space, so relax
   the max-height cap and let it grow to fill the drawer's
   middle region. The line items keep their default mini-popup
   look (the cart-drawer reuses the same class names) — the
   drawer just gives them more room. */
.cart-drawer .cart-mini-popup__items {
  max-height: none;
  padding: 4px 20px;
  flex: 1 1 auto;
  min-height: 0;
}
.cart-drawer .cart-mini-popup__item {
  padding: 14px 0;
}
.cart-drawer .cart-mini-popup__item-image {
  width: 72px;
}