/* ==========================================================================
   Queenie-B Honey — Cart drawer, variant selector, cart page
   ========================================================================== */

/* ---- Backdrop (shared by drawer + modal) ---------------------------------- */

.backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  background: rgba(30, 23, 18, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-primary);
}

.backdrop.is-visible { opacity: 1; pointer-events: auto; }

/* ---- Cart drawer ------------------------------------------------------------ */

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-drawer);
  width: min(44rem, 100vw);
  background: var(--color-stone);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--duration-base) var(--ease-primary);
}

.cart-drawer.is-open { transform: translateX(0); }

.cart-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border-bottom: var(--border-thin) solid var(--color-line);
}

.cart-drawer__items { flex: 1; overflow-y: auto; padding: var(--space-5) var(--space-6); }

.cart-line {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: var(--space-4);
  padding-block: var(--space-5);
  border-bottom: var(--border-thin) solid var(--color-line);
}

.cart-line__image {
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--color-accent-pale), var(--color-cream));
  overflow: hidden;
}
.cart-line__image img { width: 100%; height: 100%; object-fit: cover; }

.cart-line__variant { font-size: var(--text-sm); color: var(--color-ink-soft); }
.cart-line__footer { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-3); }

.qty-stepper { display: inline-flex; align-items: center; border: var(--border-thin) solid var(--color-line); border-radius: var(--radius-sm); }
.qty-stepper button { width: 3rem; height: 3rem; font-size: var(--text-md); }
.qty-stepper__value { min-width: 3rem; text-align: center; font-family: var(--font-sans); font-size: var(--text-sm); }

.cart-line__remove { font-family: var(--font-sans); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-ink-faint); }
.cart-line__remove:hover { color: var(--color-error); }

.cart-empty { text-align: center; padding-block: var(--space-8); color: var(--color-ink-soft); }

.cart-drawer__footer { padding: var(--space-6); border-top: var(--border-thin) solid var(--color-line); }
.cart-subtotal { display: flex; justify-content: space-between; font-family: var(--font-sans); font-size: var(--text-md); margin-bottom: var(--space-4); }
.cart-shipping-note { font-size: var(--text-2xs); color: var(--color-ink-soft); margin-bottom: var(--space-4); }

/* ---- "You Might Also Like" upsell strip ---------------------------------------------- */

.cart-drawer__upsell:empty { display: none; }
.cart-drawer__upsell {
  padding: var(--space-4) var(--space-6);
  border-top: var(--border-thin) solid var(--color-line);
  flex-shrink: 0;
}

.cart-upsell__title { color: var(--color-ink-soft); margin-bottom: var(--space-3); }
.cart-upsell__list { display: flex; gap: var(--space-3); overflow-x: auto; padding-bottom: var(--space-1); }

.cart-upsell__item { flex: 0 0 9.6rem; position: relative; }
.cart-upsell__link { display: block; }

.cart-upsell__image {
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-accent-pale), var(--color-cream));
  margin-bottom: var(--space-2);
  transition: box-shadow var(--duration-base) var(--ease-primary);
}
.cart-upsell__item:hover .cart-upsell__image { box-shadow: var(--shadow-sm); }
.cart-upsell__image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-primary); }
.cart-upsell__item:hover .cart-upsell__image img { transform: scale(1.05); }

.cart-upsell__name {
  font-size: var(--text-2xs);
  line-height: var(--leading-normal);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.cart-upsell__price { font-family: var(--font-sans); font-size: var(--text-2xs); color: var(--color-ink-soft); margin-top: 0.2rem; }

.cart-upsell__add {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--color-stone);
  color: var(--color-ink);
  border: var(--border-thin) solid var(--color-line);
  font-size: var(--text-md);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  transition: background var(--duration-fast) var(--ease-primary), color var(--duration-fast) var(--ease-primary);
}
.cart-upsell__add:hover { background: var(--color-accent); color: var(--color-white); border-color: var(--color-accent); }

/* ---- Variant selector (reused on product.html) ------------------------------------ */

#pdp-variant-block { margin-top: var(--space-6); }
.pdp-variant-group__label { color: var(--color-ink-soft); }
.variant-pills { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block: var(--space-3) var(--space-5); }
.variant-pill {
  padding: var(--space-2) var(--space-4);
  border: var(--border-thin) solid var(--color-line);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  transition: border-color var(--duration-fast) var(--ease-primary), background var(--duration-fast) var(--ease-primary);
}
.variant-pill.is-selected { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-stone); }

/* ---- Thank-you confirmation panel --------------------------------------------------- */

.thankyou-modal {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.96);
  z-index: var(--z-modal);
  width: min(52rem, 92vw);
  background: var(--color-stone);
  border-radius: var(--radius-sm);
  padding: var(--space-8);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-primary), transform var(--duration-base) var(--ease-primary);
}

.thankyou-modal.is-open { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; }
.thankyou-modal__icon { font-size: 4rem; margin-bottom: var(--space-4); }
.thankyou-modal__order { font-family: var(--font-sans); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); color: var(--color-accent); margin-block: var(--space-4); }

/* ---- Checkout upsell popup (shown when heading from the cart drawer to the
   full cart/checkout page) --------------------------------------------------- */
.checkout-upsell-modal {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.96);
  z-index: var(--z-modal);
  width: min(56rem, 92vw);
  max-height: 86vh;
  overflow-y: auto;
  background: var(--color-stone);
  border-radius: var(--radius-sm);
  padding: var(--space-7);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-primary), transform var(--duration-base) var(--ease-primary);
}
.checkout-upsell-modal.is-open { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; }
.checkout-upsell-modal__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-ink-soft);
  transition: background var(--duration-fast) var(--ease-primary);
}
.checkout-upsell-modal__close:hover { background: var(--color-cream); }
.checkout-upsell-modal .cart-upsell__list { justify-content: center; overflow-x: visible; flex-wrap: wrap; margin-top: var(--space-6); margin-bottom: var(--space-7); }
.checkout-upsell-modal .cart-upsell__item { flex-basis: 13rem; }

/* ---- Cart page (cart.html) ----------------------------------------------------------- */

.cart-page-grid { display: grid; grid-template-columns: 1fr 38rem; gap: var(--space-8); align-items: start; }
@media (max-width: 900px) { .cart-page-grid { grid-template-columns: 1fr; } }

.cart-summary {
  border: var(--border-thin) solid var(--color-line);
  border-radius: var(--radius-sm);
  padding: var(--space-6);
  position: sticky;
  top: 10rem;
  box-shadow: var(--shadow-sm);
}
.cart-summary form { margin-top: var(--space-6); padding-top: var(--space-6); border-top: var(--border-thin) solid var(--color-line); }
.cart-summary__trust {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: var(--border-thin) solid var(--color-line);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.cart-summary__trust .trust-item { display: flex; align-items: center; gap: var(--space-3); }
.cart-summary__trust .trust-item svg { width: 2rem; height: 2rem; flex-shrink: 0; stroke: var(--color-accent); }
.cart-summary__trust .trust-item__label { font-family: var(--font-sans); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-ink-soft); }

.cart-page-upsell:empty { display: none; }
.cart-page-upsell {
  margin-top: var(--space-8);
  padding-top: var(--space-7);
  border-top: var(--border-thin) solid var(--color-line);
}
.cart-page-upsell .cart-upsell__item { flex-basis: 16rem; }
.cart-page-upsell .cart-upsell__title { font-size: var(--text-sm); margin-bottom: var(--space-5); }