/* Eva+Avo cart — drawer (Figma 626:28293) + shared line/coupon/total styles
   reused by the cart page. */

/* ---------- Drawer shell ---------- */
.eva-cart {
  width: 480px;
  max-width: 100vw;
  height: 100%;
  background: var(--eva-crema);
  color: var(--eva-bosque);
  font-family: var(--eva-sans);
}
@media (max-width: 959px) { .eva-cart { width: min(480px, 92vw); } }

.eva-cart__header {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px;
}
.eva-cart__header::after { background-color: var(--eva-line); }
.eva-cart__title {
  flex: 1;
  margin: 0;
  font-family: var(--eva-serif);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: 0;
}
.eva-cart .eva-cart__close {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  color: var(--eva-bosque);
}
.eva-cart .eva-cart__close svg { width: 14px; height: 14px; }

.eva-cart__inner { flex: 1; overflow-y: auto; padding: 10px 20px 30px; }
.eva-cart__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 60px 0 48px;
  text-align: center;
}

/* ---------- Rewards progress (Figma 626:28297 / 625:13440) ---------- */
.eva-progress {
  padding: 15px 20px 26px;
  border-bottom: 1px solid var(--eva-line);
}
.eva-progress__msg {
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 30px;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
}
.eva-progress__msg strong { font-weight: 700; }
.eva-progress.is-complete .eva-progress__msg { color: var(--eva-green); }
.eva-progress__track {
  position: relative;
  height: 4px;
  margin: 44px 9px 40px 0;
  background: rgba(43, 70, 51, 0.2);
}
/* Fill animates from the previous cart total (eva.js sets --eva-progress-from). */
.eva-progress__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--eva-progress, 0%);
  background: var(--eva-bosque);
  transition: width 0.7s var(--eva-ease);
}
.eva-progress__stop {
  position: absolute;
  top: 50%;
  left: var(--eva-stop);
  z-index: 1;
  width: 14px;
  height: 14px;
  border: 2px solid var(--eva-crema);
  border-radius: 50%;
  background: #f0b656;
  transform: translate(-50%, -50%);
  transition: transform 0.3s var(--eva-ease), box-shadow 0.3s var(--eva-ease);
}
.eva-progress__stop.is-end { width: 18px; height: 18px; border: 0; }
.eva-progress__stop.is-done { box-shadow: 0 0 0 3px rgba(240, 182, 86, 0.35); }
.eva-progress__label {
  position: absolute;
  top: 18px;
  left: 50%;
  color: var(--eva-bosque);
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transform: translateX(-50%);
}
.eva-progress__label::before {
  content: "";
  position: absolute;
  bottom: calc(100% - 2px);
  left: 50%;
  width: 1px;
  height: 8px;
  background: rgba(43, 70, 51, 0.2);
}
.eva-progress__stop.is-done .eva-progress__label { font-weight: 600; }
.eva-progress__badge {
  position: absolute;
  bottom: 30px;
  right: -9px;
  padding: 2px 16px;
  background: #f0b656;
  color: var(--eva-bosque);
  font-weight: 600;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.eva-progress__badge::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 17px;
  width: 1px;
  height: 9px;
  background: rgba(43, 70, 51, 0.2);
}

/* ---------- Line items ---------- */
.eva-line {
  display: flex;
  gap: 22px;
  padding-block: 20px;
}
.eva-cart__items .eva-line:first-child { padding-top: 30px; }
.eva-line__media { flex: none; display: block; width: 80px; height: 80px; }
.eva-line__media img,
.eva-line__media svg { width: 100%; height: 100%; object-fit: contain; }
.eva-line__body { display: flex; flex: 1; flex-direction: column; gap: 10px; min-width: 0; }
.eva-line__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.eva-line__title {
  margin: 0;
  font-family: var(--eva-serif);
  font-weight: 700;
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: 0;
}
.eva-line__title a { color: inherit; }
.eva-line__gift {
  flex: none;
  padding: 4px 6px;
  background: var(--eva-bosque);
  color: var(--eva-crema);
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0.01em;
}
.eva-line__meta { display: flex; flex-direction: column; gap: 2px; margin: 0; font-size: 14px; line-height: 24px; letter-spacing: 0.01em; }
.eva-line__meta > div { display: flex; gap: 7px; }
.eva-line__meta dt { font-weight: 700; }
.eva-line__meta dd { margin: 0; }
.eva-line__plan {
  display: inline-flex;
  align-self: flex-start;
  margin: 0;
  padding: 10px 11px;
  background: rgba(43, 70, 51, 0.05);
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0.01em;
}
.eva-line__price {
  display: flex;
  gap: 10px;
  margin: 10px 0 0;
  font-size: 18px;
  line-height: 30px;
  letter-spacing: 0.05em;
  opacity: 0.8;
}
.eva-line__price s { color: rgba(43, 70, 51, 0.5); }
.eva-line__discounts { display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 24px; letter-spacing: 0.01em; }
.eva-line__discounts li { display: flex; align-items: center; gap: 4px; }
.eva-line.cart-item__disabled { opacity: 0.55; pointer-events: none; }

/* Orion quantity widget inside an Eva line */
.eva-line .cart-item__amount { margin-top: 10px; }
.eva-line .cart-item__amount-operator { display: flex; align-items: center; gap: 20px; }

.eva-line .cart-item__remove { display: inline-flex; color: rgba(43, 70, 51, 0.6); cursor: pointer; }
.eva-line .cart-item__remove svg { width: 20px; height: 20px; }
/* Delete icon sits top-right, level with the title, on every line (gift lines have none and
   keep their badge there). */
.eva-line__body { position: relative; }
.eva-line:not(.eva-line--gift) .eva-line__head { padding-right: 32px; }
.eva-line .cart-item__remove { position: absolute; top: 2px; right: 0; }
/* "pack" products: quantity is shown in the line details instead of the stepper. */
.eva-line--pack .cart-item__amount-operator theme-input-number { display: none; }
.eva-line--pack .cart-item__amount { margin-top: 0; }
.eva-line .cart-item__fail-tip { color: var(--eva-error); font-size: 13px; }

/* ---------- Upsell ---------- */
.eva-upsell { display: flex; flex-direction: column; align-items: center; gap: 30px; padding-top: 60px; }
.eva-upsell__title {
  margin: 0;
  font-family: var(--eva-serif);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.2;
  text-align: center;
}
.eva-upsell__carousel { width: 100%; padding-inline: 20px; }
.eva-upsell__track { --eva-slide-w: 170px; --eva-slide-gap: 16px; justify-content: start; scroll-padding-inline: 0; }
.eva-upsell__prev,
.eva-upsell__next { position: absolute; top: 75px; z-index: 2; }
.eva-upsell__prev { left: -12px; }
.eva-upsell__next { right: -12px; }
.eva-upsell__prev svg,
.eva-upsell__next svg { width: 14px; height: 26px; }
.eva-upsell__item { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.eva-upsell__media { position: relative; width: 100%; aspect-ratio: 1; }
.eva-upsell__media > a,
.eva-upsell__media img,
.eva-upsell__media svg { display: block; width: 100%; height: 100%; object-fit: contain; }
.eva-upsell__add {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 50%;
  background: #fff;
  color: var(--eva-text);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.eva-upsell__add:hover { background: var(--eva-bosque); color: var(--eva-crema); }
.eva-cart a.eva-upsell__name {
  margin-top: 4px;
  color: var(--eva-bosque);
  font-family: var(--eva-serif);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
}
.eva-upsell__price { font-size: 14px; line-height: 24px; opacity: 0.8; }

/* ---------- Shopline "You may also like" (product-recommend app) ----------
   The app injects .product-recommend > .product-list-title + .recommend-grid > .col
   into the drawer as a 2-column grid. Restyle it as one row with native scroll-snap
   (like the Bestsellers carousel) so it doesn't stack a long list on mobile. */
:is(.eva-cart, theme-cart-drawer, cart-drawer) .product-recommend {
  width: 100%;
  margin: 0;
  padding: 48px 0 8px;
  background: transparent;
}
:is(.eva-cart, theme-cart-drawer, cart-drawer) .product-recommend .product-list-title {
  margin: 0 0 24px;
  padding: 0 20px;
  color: var(--eva-bosque);
  font-family: var(--eva-serif);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: center;
  text-transform: none;
}
:is(.eva-cart, theme-cart-drawer, cart-drawer) .product-recommend .recommend-grid {
  display: flex !important;
  flex-wrap: nowrap !important;
  grid-template-columns: none !important;
  gap: 16px;
  margin: 0;
  padding: 0 20px 4px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 20px;
  scrollbar-width: none;
}
:is(.eva-cart, theme-cart-drawer, cart-drawer) .product-recommend .recommend-grid::-webkit-scrollbar { display: none; }
:is(.eva-cart, theme-cart-drawer, cart-drawer) .product-recommend .recommend-grid > .col {
  flex: 0 0 150px !important;
  width: 150px !important;
  max-width: 150px !important;
  margin: 0;
  padding: 0;
  scroll-snap-align: start;
}
:is(.eva-cart, theme-cart-drawer, cart-drawer) .product-recommend .recommend-product-item { display: flex; flex-direction: column; gap: 8px; color: var(--eva-bosque); text-align: center; }
:is(.eva-cart, theme-cart-drawer, cart-drawer) .product-recommend :is(.recommend-product-item-image-wrapper, .recommend-product-item-image-media) { background: transparent !important; }
/* Cream behind the photo itself: Swiper's transformed track isolates the images from
   the drawer background, so multiply needs a backdrop inside the same layer. */
:is(.eva-cart, theme-cart-drawer, cart-drawer) .product-recommend .recommend-product-item-image { background: var(--eva-crema) !important; }
:is(.eva-cart, theme-cart-drawer, cart-drawer) .product-recommend .recommend-product-item-image img { width: 100%; height: 100%; object-fit: contain; }
.eva-blend :is(.eva-cart, theme-cart-drawer, cart-drawer) .product-recommend .recommend-product-item-image img { mix-blend-mode: multiply; }
:is(.eva-cart, theme-cart-drawer, cart-drawer) .product-recommend .recommend-product-item-info { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0; }
:is(.eva-cart, theme-cart-drawer, cart-drawer) .product-recommend .recommend-product-item-title {
  display: -webkit-box !important;
  height: auto !important;
  max-height: none !important;
  overflow: hidden;
  white-space: normal !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  margin: 0;
  color: var(--eva-bosque);
  font-family: var(--eva-serif);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
}
:is(.eva-cart, theme-cart-drawer, cart-drawer) .product-recommend .recommend-product-item-price { font-family: var(--eva-sans); font-size: 14px; line-height: 22px; }
:is(.eva-cart, theme-cart-drawer, cart-drawer) .product-recommend .recommend-product-item-price .origin-price { margin-right: 6px; opacity: 0.6; }
:is(.eva-cart, theme-cart-drawer, cart-drawer) .product-recommend .save-price { display: none; }

/* ---------- Footer: coupon / total / checkout ---------- */
.eva-cart__footer {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 20px 40px;
  border-top: 1px solid var(--eva-line);
  background: var(--eva-crema);
}
.eva-cart .cart-coupon__form,
.eva-cart-page .cart-coupon__form { gap: 4px; }
.eva-cart .cart-coupon .field,
.eva-cart-page .cart-coupon .field { flex: 1; margin: 0; }
.eva-cart .cart-coupon .field__input,
.eva-cart-page .cart-coupon .field__input {
  height: 46px;
  padding: 8px 16px;
  border: 1px solid var(--eva-line);
  border-radius: 0;
  background: transparent;
  color: var(--eva-bosque);
  font-size: 14px;
  box-shadow: none;
}
.eva-cart .cart-coupon .field__label,
.eva-cart-page .cart-coupon .field__label { display: none; }
.eva-cart .cart-coupon__button,
.eva-cart-page .cart-coupon__button {
  min-width: 75px;
  height: 46px;
  padding: 9px 18px;
  border: 0;
  border-radius: 0;
  background: var(--eva-bosque);
  color: #fff;
  font-family: var(--eva-sans);
  font-size: 14px;
  letter-spacing: 0.01em;
}
.eva-cart .cart-coupon__list,
.eva-cart-page .cart-coupon__list { gap: 10px 8px; margin: 0; }
.eva-cart .cart-coupon__list-item,
.eva-cart-page .cart-coupon__list-item {
  margin: 8px 0 0;
  padding: 4px 6px;
  border-radius: 0;
  background: rgba(43, 70, 51, 0.05);
  font-family: var(--eva-link-font);
  font-size: 14px;
  letter-spacing: 0.1em;
}
.eva-cart__total { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.eva-cart__total-label {
  margin: 0;
  font-family: var(--eva-serif);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.2;
}
.eva-cart__total-values { text-align: right; }
.eva-cart__saved,
.eva-cart__total-price {
  margin: 0;
  font-weight: 500;
  font-size: 18px;
  line-height: 30px;
  letter-spacing: 0.05em;
}
.eva-cart__checkout { min-height: 48px; font-size: 18px; }
.eva-cart__note { margin: -6px 0 0; font-size: 12px; line-height: 24px; letter-spacing: 0.01em; text-align: center; }
.eva-cart__payments { display: flex; justify-content: center; }
.eva-cart__payments img { width: 149px; height: auto; }



/* ---------- Drawer loading state ---------- */
/* Orion shows an opaque "Loading" panel that hides the cart. Instead: keep the
   content visible under a soft cream overlay with a centred spinner. Driven by
   the .cart-drawer__inner--loading class Orion's drawer JS already toggles.
   (The drawer body is position: fixed via Orion's modal @layer CSS, which also
   anchors these pseudo-elements — don't override its position here.) */
.eva-cart .cart-drawer__loading { display: none !important; }
.eva-cart:has(.cart-drawer__inner--loading)::after {
  content: "";
  position: absolute;
  inset: 69px 0 0;
  z-index: 20;
  background: rgba(255, 248, 236, 0.7);
  animation: eva-fade 0.2s ease;
}
.eva-cart:has(.cart-drawer__inner--loading)::before {
  content: "";
  position: absolute;
  top: calc(50% + 34px);
  left: 50%;
  z-index: 21;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  border: 2px solid rgba(43, 70, 51, 0.18);
  border-top-color: var(--eva-bosque);
  border-radius: 50%;
  animation: eva-spin 0.8s linear infinite;
}
@keyframes eva-spin { to { transform: rotate(360deg); } }
@keyframes eva-fade { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 959px) { .eva-line__title { font-size: 19px; } }