/** Shopify CDN: Minification failed

Line 454:14 Expected identifier but found whitespace
Line 454:15 Unexpected "\"Tajawal\""

**/

cart-drawer .cart-drawer {
  /* Just a positioning shell — no background, no transform.
     The panel itself (.drawer__inner) owns those. */
  color: var(--aeto-fg, #111);
  font-family: var(--font-body-family);
}

cart-drawer .drawer__inner {
  width: 52rem !important;
  max-width: calc(100vw - 3.2rem) !important;
  padding: 0 !important;
  background: var(--aeto-bg-cream, #f1ece1) !important;
  color: var(--aeto-fg, #111) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow:
    -1px 0 0 rgba(17, 17, 17, 0.04),
    0 0 6.4rem rgba(17, 17, 17, 0.18);
  display: flex !important;
  flex-direction: column !important;
  /* Direction-aware slide. Replaces Dawn's `transform: translateX(100%)`
     so the panel exits to whichever side is the inline-end edge for
     the current document direction — right in LTR, left in RTL.
     Cubic-bezier tuned for a calm luxury feel (slower than Dawn's). */
  transform: translateX(calc(100% * var(--aeto-dir-sign, 1))) !important;
  transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Active-state slide. Two selectors for resilience — Dawn ships
   `cart-drawer` with `class="drawer …"`, so `.drawer.active` and
   `cart-drawer.active` match the same element. */
cart-drawer.active .drawer__inner,
.drawer.active .drawer__inner {
  transform: translateX(0) !important;
}

/* ----- Backdrop ------------------------------------------------- */

cart-drawer .cart-drawer__overlay {
  /* Deeper blur + softer ink lets the storefront read through the
     backdrop just enough to suggest depth without competing for
     attention with the drawer. */
  background: rgba(17, 17, 17, 0.32) !important;
  backdrop-filter: blur(14px) saturate(108%);
  -webkit-backdrop-filter: blur(14px) saturate(108%);
  transition: opacity 380ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ----- Drawer header (title + close) ---------------------------- */

cart-drawer .drawer__header {
  /* Editorial header band — more breathing room above, less below,
     so the cart-items grid feels visually anchored to the header. */
  padding-block: 3.2rem 2rem;
  padding-inline: 3.2rem;
  background: var(--aeto-bg-cream, #f1ece1);
  border-block-end: 1px solid rgba(17, 17, 17, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  flex-shrink: 0;
}

cart-drawer .drawer__heading {
  margin: 0;
  font-family: var(--font-heading-family);
  font-size: 1.45rem;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--aeto-fg, #111);
}

cart-drawer .drawer__close,
cart-drawer .drawer__close.drawer__close {
  /* Close button — clean, centered, no Dawn corner offset. */
  position: relative !important;
  right: auto !important;
  top: auto !important;
  inset: auto !important;
  width: 4rem !important;
  height: 4rem !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 1px solid var(--aeto-line, rgba(17, 17, 17, 0.12)) !important;
  border-radius: 50%;
  color: var(--aeto-fg, #111) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background var(--aeto-dur-fast, 160ms) var(--aeto-ease, cubic-bezier(0.4, 0, 0.2, 1)),
              transform var(--aeto-dur-fast, 160ms) var(--aeto-ease, cubic-bezier(0.4, 0, 0.2, 1));
}

cart-drawer .drawer__close:hover,
cart-drawer .drawer__close:focus-visible {
  background: rgba(17, 17, 17, 0.04) !important;
  outline: 0;
  transform: rotate(90deg);
}

cart-drawer .drawer__close svg {
  width: 1.6rem;
  height: 1.6rem;
}

/* ----- Cart items area ------------------------------------------ */

cart-drawer .drawer__contents,
cart-drawer cart-drawer-items {
  background: var(--aeto-bg-cream, #f1ece1);
}

cart-drawer .drawer__cart-items-wrapper {
  padding-inline: 3.2rem;
  padding-block-start: 0.8rem;
}

cart-drawer .cart-items {
  border: 0 !important;
}

cart-drawer .cart-item {
  /* Editorial product card: bigger image, generous gap, hairline
     divider so the eye doesn't snag on the line between items. */
  display: grid !important;
  grid-template-columns: 10rem 1fr !important;
  gap: 2rem;
  padding-block: 2.4rem !important;
  padding-inline: 0 !important;
  border-block-end: 1px solid rgba(17, 17, 17, 0.05);
  align-items: start;
}

cart-drawer .cart-item:last-child {
  border-block-end: 0;
}

/* Image cell */
cart-drawer .cart-item__media,
cart-drawer .cart-item__image-container {
  width: 10rem !important;
  max-width: none !important;
}

cart-drawer .cart-item__image {
  width: 10rem !important;
  height: 12.5rem !important;
  object-fit: cover;
  background: var(--aeto-bg-thumb, #ebe5dc);
  border-radius: 0.2rem;
  transition: opacity var(--aeto-dur-med, 240ms) var(--aeto-ease, cubic-bezier(0.4, 0, 0.2, 1));
}

cart-drawer .cart-item__image:hover {
  opacity: 0.92;
}

/* Details cell */
cart-drawer .cart-item__details {
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

cart-drawer .cart-item__name,
cart-drawer .cart-item__name.h4 {
  /* Lighter weight + slightly larger size + tighter line-height
     gives an editorial label feel instead of a generic table row. */
  margin: 0 !important;
  font-family: var(--font-body-family);
  font-size: 1.55rem;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: var(--aeto-fg, #111);
  text-decoration: none;
  transition: color var(--aeto-dur-fast, 160ms) var(--aeto-ease, cubic-bezier(0.4, 0, 0.2, 1));
}

cart-drawer .cart-item__name:hover {
  color: rgba(17, 17, 17, 0.7);
  text-decoration: none;
}

/* Variant / properties / selling-plan */
cart-drawer .product-option,
cart-drawer .product-option dt,
cart-drawer .product-option dd {
  /* Variant chips — small uppercase tracked label, like a magazine
     subhead. Each variant on its own row for cleaner scan. */
  margin: 0 !important;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--aeto-fg-muted, rgba(17, 17, 17, 0.5));
}

cart-drawer .product-option {
  display: inline-flex;
  gap: 0.4rem;
}

cart-drawer .product-option dt {
  font-weight: 500;
  }

/* Price row inside item */
cart-drawer .cart-item__price-wrapper,
cart-drawer .cart-item__totals {
  padding: 0 !important;
  margin-block-start: 0.6rem;
}

cart-drawer .cart-item__price-wrapper .price,
cart-drawer .cart-item__totals .price {
  /* Item price — slightly heavier than the title to anchor each row. */
  font-family: "Tajawal", system-ui, sans-serif !important;
  font-size: 1.4rem !important;
  font-weight: 500!important;
  letter-spacing: 0.02em;
  color: var(--aeto-fg, #111);
}

/* Quantity controls — minimal pill row */
cart-drawer cart-drawer-items .cart-item__quantity,
cart-drawer .cart-item__quantity-wrapper {
  margin-block-start: 1rem;
  padding: 0 !important;
}

cart-drawer .quantity {
  /* Compact bordered pill — smaller buttons, hairline border. */
  width: auto !important;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid rgba(17, 17, 17, 0.14);
  border-radius: 999px;
  background: transparent;
  overflow: hidden;
}

cart-drawer .quantity__button {
  width: 3rem !important;
  height: 3rem !important;
  min-width: 3rem !important;
  padding: 0 !important;
  background: transparent !important;
  color: var(--aeto-fg, #111) !important;
  font-size: 1.3rem;
  border: 0 !important;
  opacity: 0.7;
  transition:
    background var(--aeto-dur-fast, 160ms) var(--aeto-ease, cubic-bezier(0.4, 0, 0.2, 1)),
    opacity   var(--aeto-dur-fast, 160ms) var(--aeto-ease, cubic-bezier(0.4, 0, 0.2, 1));
}

cart-drawer .quantity__button:hover,
cart-drawer .quantity__button:focus-visible {
  background: rgba(17, 17, 17, 0.04) !important;
  opacity: 1;
  outline: 0;
}

cart-drawer .quantity__input {
  width: 3.2rem !important;
  height: 3rem !important;
  padding: 0 !important;
  background: transparent !important;
  color: var(--aeto-fg, #111) !important;
  font-size: 1.25rem !important;
  font-family: "Tajawal", system-ui, sans-serif !important;
  font-weight: 500!important;
  text-align: center !important;
  letter-spacing: 0.02em;
  border: 0 !important;
}

cart-drawer .quantity:after,
cart-drawer .quantity:before {
  display: none !important;
}

/* Remove button — minimal, sits below quantity row */
cart-drawer cart-remove-button {
  display: inline-flex;
  margin: 0 !important;
}

cart-drawer cart-remove-button .button,
cart-drawer cart-remove-button a {
  /* Remove link — quietest text in the row. Small, tracked, lifts
     to solid on hover. Sits next to the quantity pill on its own row. */
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  padding: 0.6rem 0 !important;
  background: transparent !important;
  color: var(--aeto-fg-muted, rgba(17, 17, 17, 0.45)) !important;
  font-size: 1.1rem !important;
  font-weight: 400!important;
  font-family: "Tajawal", system-ui, sans-serif !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 0.4em;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(17, 17, 17, 0.15);
  border: 0 !important;
  border-radius: 0 !important;
  transition:
    color 240ms cubic-bezier(0.16, 1, 0.3, 1),
    text-decoration-color 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

cart-drawer cart-remove-button .button:hover,
cart-drawer cart-remove-button a:hover {
  color: var(--aeto-fg, #111) !important;
  text-decoration-color: var(--aeto-fg, #111) !important;
  background: transparent !important;
}

/* ----- Empty-state ---------------------------------------------- */

cart-drawer .drawer__inner-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-block: clamp(8rem, 18vw, 14rem);
  padding-inline: 3.2rem;
  text-align: center;
  flex-grow: 1;
}

cart-drawer .cart__empty-text {
  /* Editorial empty-state heading — larger, lighter, more tracked. */
  margin: 0 0 2.8rem !important;
  font-family: var(--font-heading-family);
  font-size: clamp(1.85rem, 1.6vw, 2.2rem);
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--aeto-fg, #111);
  max-width: 28rem;
}

cart-drawer .cart-drawer__warnings .button {
  width: auto !important;
  min-width: 22rem !important;
  height: auto !important;
  padding: 1.7rem 3.6rem !important;
  background: var(--aeto-accent-dark, #25271a) !important;
  color: var(--aeto-accent-cream, #f7f2e8) !important;
  font-size: 1.25rem !important;
  font-weight: 500!important;
  letter-spacing: 0.28em !important;
  font-family: "Tajawal", system-ui, sans-serif !important;
  text-transform: uppercase;
  border: 1px solid var(--aeto-accent-dark, #25271a) !important;
  border-radius: 0 !important;
  transition:
    background 380ms cubic-bezier(0.16, 1, 0.3, 1),
    color      380ms cubic-bezier(0.16, 1, 0.3, 1),
    letter-spacing 380ms cubic-bezier(0.16, 1, 0.3, 1);
}

cart-drawer .cart-drawer__warnings .button:hover,
cart-drawer .cart-drawer__warnings .button:focus-visible {
  background: transparent !important;
  color: var(--aeto-accent-dark, #25271a) !important;
  letter-spacing: 0.32em !important;
  outline: 0;
}

/* ----- Footer (totals + CTAs) ----------------------------------- */

cart-drawer .cart-drawer__footer {
  /* Sticky footer at the bottom of the drawer.
     `position: sticky` + `bottom: 0` pins the totals/CTAs while the
     cart-items area scrolls. The cream + frosted top border + soft
     upward shadow give it the lift of a luxury checkout footer. */
  position: sticky;
  inset-block-end: 0;
  padding: 2.4rem 3.2rem 2.8rem !important;
  background: var(--aeto-bg-cream, #f1ece1) !important;
  border-block-start: 1px solid rgba(17, 17, 17, 0.06) !important;
  box-shadow: 0 -1.2rem 2.4rem -1.6rem rgba(17, 17, 17, 0.08);
  flex-shrink: 0;
  z-index: 1;
}

cart-drawer .totals {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.2rem;
  margin: 0 0 0.6rem !important;
  padding-block-end: 1.4rem;
  border-block-end: 1px solid rgba(17, 17, 17, 0.05);
}

cart-drawer .totals__total,
cart-drawer .totals__total.h1 {
  /* Subtotal label — small, tracked, uppercase. The price next to
     it is what carries the visual weight. */
  margin: 0 !important;
  font-size: 1.2rem !important;
  font-weight: 400!important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase;
  font-family: "Tajawal", system-ui, sans-serif !important;
  color: var(--aeto-fg-muted, rgba(17, 17, 17, 0.7)) !important;
}

cart-drawer .totals__total-value,
cart-drawer .totals__total-value.h1 {
  /* Subtotal value — the largest type in the footer, dark and
     confident. Sits at the inline-end with logical text-align. */
  margin: 0 !important;
  font-size: 1.95rem !important;
  font-weight: 500!important;
  letter-spacing: 0.01em !important;
  color: var(--aeto-fg, #111) !important;
  text-align: end;
  font-family: "Tajawal", system-ui, sans-serif !important;
}

cart-drawer .tax-note,
cart-drawer .tax-note.caption-large,
cart-drawer .tax-note.rte {
  margin: 1.2rem 0 1.8rem !important;
  padding: 0 !important;
  font-size: 1.15rem !important;
  line-height: 1.6 !important;
  letter-spacing: 0.02em;
  color: var(--aeto-fg-muted, rgba(17, 17, 17, 0.55)) !important;
}

  font-family: "Tajawal", system-ui, sans-serif !important;
/* CTA cluster */
cart-drawer .aeto-cart-drawer__ctas,
cart-drawer .cart__ctas {
  display: flex !important;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  margin: 0 !important;
}

/* PRIMARY — luxury checkout. Tall, deep ink fill, generous letter-
   spacing, slow easings on hover. */
cart-drawer .aeto-cart-drawer__checkout,
cart-drawer .cart__checkout-button {
  position: relative;
  width: 100% !important;
  min-height: 6rem !important;
  padding: 1.8rem 3.2rem !important;
  background: var(--aeto-accent-dark, #25271a) !important;
  color: var(--aeto-accent-cream, #f7f2e8) !important;
  font-size: 1.3rem !important;
  font-weight: 500!important;
  letter-spacing: 0.3em !important;
  text-transform: uppercase;
  border: 1px solid var(--aeto-accent-dark, #25271a) !important;
  border-radius: 0 !important;
  cursor: pointer;
  font-family: "Tajawal", system-ui, sans-serif !important;
  overflow: hidden;
  transition:
    background 380ms cubic-bezier(0.16, 1, 0.3, 1),
    color      380ms cubic-bezier(0.16, 1, 0.3, 1),
    letter-spacing 380ms cubic-bezier(0.16, 1, 0.3, 1);
}

cart-drawer .aeto-cart-drawer__checkout:hover:not([disabled]),
cart-drawer .aeto-cart-drawer__checkout:focus-visible:not([disabled]),
cart-drawer .cart__checkout-button:hover:not([disabled]),
cart-drawer .cart__checkout-button:focus-visible:not([disabled]) {
  background: transparent !important;
  color: var(--aeto-accent-dark, #25271a) !important;
  letter-spacing: 0.34em !important;
  outline: 0;
}

cart-drawer .aeto-cart-drawer__checkout[disabled],
cart-drawer .cart__checkout-button[disabled] {
  opacity: 0.4 !important;
  cursor: not-allowed;
}

/* SECONDARY — outlined View Cart. Smaller than primary, hairline
   border, gently fills on hover. */
cart-drawer .aeto-cart-drawer__view-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 5rem;
  padding: 1.4rem 3.2rem;
  background: transparent;
  color: var(--aeto-fg, #111);
  font-family: var(--font-body-family);
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid rgba(17, 17, 17, 0.6);
  border-radius: 0;
  transition:
    background 380ms cubic-bezier(0.16, 1, 0.3, 1),
    color      380ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 380ms cubic-bezier(0.16, 1, 0.3, 1);
}

cart-drawer .aeto-cart-drawer__view-cart:hover,
cart-drawer .aeto-cart-drawer__view-cart:focus-visible {
  background: var(--aeto-fg, #111);
  color: var(--aeto-accent-cream, #f7f2e8);
  border-color: var(--aeto-fg, #111);
  outline: 0;
}

/* TERTIARY — quiet text link. Hairline underline with a wide offset,
   centered under the buttons. */
cart-drawer .aeto-cart-drawer__continue {
  align-self: center;
  margin-block-start: 0.8rem;
  padding: 0.6rem 0;
  background: transparent;
  color: var(--aeto-fg-muted, rgba(17, 17, 17, 0.55));
  font-family: var(--font-body-family);
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 0.45em;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(17, 17, 17, 0.18);
  border: 0;
  cursor: pointer;
  transition:
    color 240ms cubic-bezier(0.16, 1, 0.3, 1),
    text-decoration-color 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

cart-drawer .aeto-cart-drawer__continue:hover,
cart-drawer .aeto-cart-drawer__continue:focus-visible {
  color: var(--aeto-fg, #111);
  text-decoration-color: var(--aeto-fg, #111);
  outline: 0;
}

/* ----- Discounts row -------------------------------------------- */

cart-drawer .discounts {
  margin: 0 0 1.2rem !important;
  padding: 0 !important;
}

cart-drawer .discounts__discount {
  font-family: var(--font-body-family);
  font-size: 1.2rem;
  color: var(--aeto-fg-muted, rgba(17, 17, 17, 0.6));
}

/* ----- Cart-drawer recommended-collection block ----------------- */
/* (visible when cart is empty AND a recommended collection is set) */

cart-drawer .cart-drawer__collection {
  padding: 2.4rem;
  border-block-start: 1px solid var(--aeto-line, rgba(17, 17, 17, 0.08));
}

/* ----- Loading / disabled state --------------------------------- */

cart-drawer cart-drawer-items.is-loading .cart-item {
  opacity: 0.55;
  transition: opacity var(--aeto-dur-fast, 160ms) var(--aeto-ease, cubic-bezier(0.4, 0, 0.2, 1));
}

cart-drawer .loading-overlay__spinner {
  /* Dawn spinner — recolor and shrink to suit the drawer. */
  color: var(--aeto-fg, #111);
}

/* ----- Mobile / small viewport ---------------------------------- */

@media (max-width: 749px) {
  cart-drawer .drawer__inner {
    width: 100vw !important;
    max-width: 100vw !important;
    border-inline-start: 0 !important;
    box-shadow: none !important;
  }

  cart-drawer .drawer__header {
    padding-block: 2.4rem 1.6rem;
    padding-inline: 2rem;
  }

  cart-drawer .drawer__heading {
    font-size: 1.3rem;
    letter-spacing: 0.28em;
  }

  cart-drawer .drawer__cart-items-wrapper {
    padding-inline: 2rem;
  }

  cart-drawer .cart-item {
    grid-template-columns: 8.4rem 1fr !important;
    gap: 1.6rem;
    padding-block: 1.8rem !important;
  }

  cart-drawer .cart-item__image {
    width: 8.4rem !important;
    height: 10.5rem !important;
  }

  cart-drawer .cart-item__name {
    font-size: 1.4rem;
  }

  cart-drawer .cart-drawer__footer {
    padding: 1.8rem 2rem 2.2rem !important;
  }

  cart-drawer .totals__total {
    font-size: 1.1rem !important;
    letter-spacing: 0.28em !important;
  }

  cart-drawer .totals__total-value {
    font-size: 1.7rem !important;
  }

  cart-drawer .aeto-cart-drawer__checkout {
    min-height: 5.4rem !important;
    font-size: 1.25rem !important;
    letter-spacing: 0.26em !important;
    padding: 1.5rem 2rem !important;
  }

  cart-drawer .aeto-cart-drawer__view-cart {
    min-height: 4.6rem;
    font-size: 1.15rem;
    letter-spacing: 0.24em;
  }
}

/* ----- Scroll lock on the page when drawer is open -------------- */
/* Dawn already adds `overflow-hidden-tablet` / `overflow-hidden`
   class to body. Add a defensive rule so the scroll lock works
   on every browser. */
body:has(cart-drawer.active),
body.overflow-hidden,
body.overflow-hidden-tablet {
  overflow: hidden !important;
}

/* ----- Reduced motion ------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  cart-drawer .cart-drawer,
  cart-drawer .cart-drawer__overlay,
  cart-drawer .drawer__close,
  cart-drawer .aeto-cart-drawer__checkout,
  cart-drawer .aeto-cart-drawer__view-cart,
  cart-drawer .aeto-cart-drawer__continue {
    transition: none !important;
  }
}

/* ====================================================================
   AETO cart drawer - premium compact refinement.
   Late-cascade polish only: keeps Dawn/AJAX/quantity architecture intact.
   ==================================================================== */

cart-drawer .drawer__inner {
  width: 46rem !important;
  max-width: min(46rem, 100vw) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 24rem),
    var(--aeto-bg-cream, #f1ece1) !important;
  box-shadow:
    -1px 0 0 rgba(17, 17, 17, 0.05),
    0 2.4rem 7rem rgba(17, 17, 17, 0.2);
}

cart-drawer .cart-drawer__overlay {
  background: rgba(17, 17, 17, 0.28) !important;
  backdrop-filter: blur(10px) saturate(104%);
  -webkit-backdrop-filter: blur(10px) saturate(104%);
}

cart-drawer .drawer__header {
  min-height: 7.2rem;
  padding: 2.2rem 2.6rem 1.7rem !important;
  border-block-end: 1px solid rgba(17, 17, 17, 0.08);
}

cart-drawer .drawer__heading {
  font-size: 1.18rem !important;
  font-weight: 700!important;
  letter-spacing: 0.2em !important;
}

cart-drawer .drawer__heading::after {
  content: "";
  display: block;
  width: 3.2rem;
  height: 0.1rem;
  margin-block-start: 0.8rem;
  background: rgba(17, 17, 17, 0.24);
}

cart-drawer .drawer__close,
cart-drawer .drawer__close.drawer__close {
  width: 3.4rem !important;
  height: 3.4rem !important;
  border-color: rgba(17, 17, 17, 0.1) !important;
}

cart-drawer cart-drawer-items {
  flex: 1 1 auto;
  min-height: 0;
}

cart-drawer .cart-drawer__form,
cart-drawer .drawer__contents {
  height: 100%;
}

cart-drawer .drawer__cart-items-wrapper {
  padding-inline: 2.6rem !important;
  padding-block: 0.2rem 1rem !important;
}

cart-drawer .cart-items thead {
  display: none !important;
}

cart-drawer .cart-item {
  grid-template-columns: 7.6rem minmax(0, 1fr) !important;
  column-gap: 1.35rem !important;
  row-gap: 0 !important;
  padding-block: 1.45rem !important;
  border-block-end: 1px solid rgba(17, 17, 17, 0.075);
}

cart-drawer .cart-item__media,
cart-drawer .cart-item__image-container {
  width: 7.6rem !important;
}

cart-drawer .cart-item__image {
  width: 7.6rem !important;
  height: 9.4rem !important;
  border-radius: 0 !important;
  object-fit: cover;
}

cart-drawer .cart-item__details {
  gap: 0.32rem !important;
  min-width: 0;
}

cart-drawer .cart-item__name,
cart-drawer .cart-item__name.h4 {
  max-width: 100%;
  font-size: 1.35rem !important;
  font-weight: 500!important;
  line-height: 1.22 !important;
  letter-spacing: 0 !important;
}

cart-drawer .cart-item__details dl {
  margin: 0.15rem 0 0 !important;
}

cart-drawer .product-option,
cart-drawer .product-option dt,
cart-drawer .product-option dd {
  font-size: 1rem !important;
  line-height: 1.35 !important;
  letter-spacing: 0.095em !important;
  color: rgba(17, 17, 17, 0.52) !important;
}

cart-drawer .cart-item__price-wrapper,
cart-drawer .cart-item__totals {
  margin-block-start: 0.35rem !important;
}

cart-drawer .cart-item__price-wrapper .price,
cart-drawer .cart-item__totals .price,
cart-drawer .cart-item__final-price,
cart-drawer .cart-item__old-price {
  font-size: 1.18rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
}

cart-drawer cart-drawer-items .cart-item__quantity,
cart-drawer .cart-item__quantity-wrapper {
  margin-block-start: 0.72rem !important;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Quantity pill — moderate luxury radius. Not pill-shaped, not
   sharp; a clean 0.8rem corner reads as "considered" rather than
   "stamped out". Faint cream-tinted fill + hairline border give
   the control a soft surface so it sits naturally on the drawer's
   cream background.

   `overflow: hidden` (inherited from the base rule) clips the
   button hover fills to the container's rounded edges so the
   corners never break on interaction. */
cart-drawer .quantity {
  height: 3.4rem;
  padding: 0 0.15rem;
  border-radius: 0.8rem !important;
  border-color: rgba(17, 17, 17, 0.14) !important;
  background: rgba(255, 255, 255, 0.32);
  transition:
    border-color 240ms cubic-bezier(0.16, 1, 0.3, 1),
    background   240ms cubic-bezier(0.16, 1, 0.3, 1);
}

cart-drawer .quantity:hover,
cart-drawer .quantity:focus-within {
  border-color: rgba(17, 17, 17, 0.28) !important;
  background: rgba(255, 255, 255, 0.5);
}

cart-drawer .quantity__button {
  width: 3.2rem !important;
  height: 3.2rem !important;
  min-width: 3.2rem !important;
  border-radius: 0.65rem !important;
  margin: 0.1rem !important;
}

cart-drawer .quantity__input {
  width: 3.4rem !important;
  height: 3.2rem !important;
  font-size: 1.15rem !important;
  font-variant-numeric: tabular-nums;
}

cart-drawer cart-remove-button .button,
cart-drawer cart-remove-button a {
  padding: 0.35rem 0 !important;
  font-size: 0 !important;
  line-height: 1 !important;
  text-decoration: none !important;
}

cart-drawer cart-remove-button .button .svg-wrapper,
cart-drawer cart-remove-button a .svg-wrapper {
  width: 1.45rem;
  height: 1.45rem;
  opacity: 0.44;
  transition: opacity 180ms var(--aeto-ease, cubic-bezier(0.4, 0, 0.2, 1));
}

cart-drawer cart-remove-button .button:hover .svg-wrapper,
cart-drawer cart-remove-button a:hover .svg-wrapper {
  opacity: 1;
}

cart-drawer .cart-drawer__footer {
  padding: 1.7rem 2.6rem 1.1rem !important;
  border-block-start: 1px solid rgba(17, 17, 17, 0.09) !important;
  box-shadow: 0 -1.6rem 2.8rem -2rem rgba(17, 17, 17, 0.22);
}

cart-drawer .totals {
  margin-block-end: 0 !important;
  padding-block-end: 1rem !important;
  border-block-end-color: rgba(17, 17, 17, 0.08);
}

cart-drawer .totals__total,
cart-drawer .totals__total.h1 {
  font-size: 1.05rem !important;
  font-weight: 700!important;
  letter-spacing: 0.18em !important;
}

cart-drawer .totals__total-value,
cart-drawer .totals__total-value.h1 {
  font-size: 1.72rem !important;
  font-weight: 600 !important;
}

cart-drawer .tax-note,
cart-drawer .tax-note.caption-large,
cart-drawer .tax-note.rte {
  margin: 0.8rem 0 1.2rem !important;
  font-size: 1.02rem !important;
  line-height: 1.45 !important;
  color: rgba(17, 17, 17, 0.5) !important;
  /* RTL-aware alignment. The tax-note sits under the totals row;
     it must read in the same direction as that row's label. `start`
     resolves to left in LTR / right in Arabic RTL, so the helper
     line stays anchored under "Estimated total" in both locales
     instead of being pinned to the LTR left edge. */
  text-align: start !important;
}

cart-drawer .aeto-cart-drawer__ctas,
cart-drawer .cart__ctas {
  gap: 0.8rem !important;
  padding: 0 2.6rem 2.1rem !important;
  background: var(--aeto-bg-cream, #f1ece1);
}

cart-drawer .aeto-cart-drawer__checkout,
cart-drawer .cart__checkout-button {
  min-height: 5.05rem !important;
  padding: 1.45rem 2.4rem !important;
  background: #111 !important;
  color: #f7f2e8 !important;
  border-color: #111 !important;
  font-size: 1.12rem !important;
  font-weight: 700!important;
  letter-spacing: 0.2em !important;
}

cart-drawer .aeto-cart-drawer__checkout:hover:not([disabled]),
cart-drawer .aeto-cart-drawer__checkout:focus-visible:not([disabled]),
cart-drawer .cart__checkout-button:hover:not([disabled]),
cart-drawer .cart__checkout-button:focus-visible:not([disabled]) {
  background: transparent !important;
  color: #111 !important;
  letter-spacing: 0.22em !important;
}

cart-drawer .aeto-cart-drawer__view-cart {
  display: none !important;
}

/* Continue Shopping — promoted from a quiet text link to a proper
   secondary CTA. Hairline outlined button below Checkout, full-width
   to match the primary's footprint. Subtle by default, lifts on hover
   to a faint dark fill. Clicking still calls `cart-drawer.close()`
   via the inline onclick in the markup. */
cart-drawer .aeto-cart-drawer__continue {
  align-self: stretch !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 4.6rem !important;
  margin-block-start: 0 !important;
  padding: 1.35rem 2.4rem !important;
  background: transparent !important;
  color: var(--aeto-fg, #111) !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  border: 1px solid rgba(17, 17, 17, 0.2) !important;
  border-radius: 0 !important;
  cursor: pointer;
  font-family: "Tajawal", system-ui, sans-serif !important;
  transition:
    background 380ms cubic-bezier(0.16, 1, 0.3, 1),
    color 380ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 380ms cubic-bezier(0.16, 1, 0.3, 1),
    letter-spacing 380ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

cart-drawer .aeto-cart-drawer__continue:hover,
cart-drawer .aeto-cart-drawer__continue:focus-visible {
  background: rgba(17, 17, 17, 0.04) !important;
  color: var(--aeto-fg, #111) !important;
  border-color: rgba(17, 17, 17, 0.42) !important;
  letter-spacing: 0.22em !important;
  text-decoration: none !important;
  outline: 0 !important;
}

cart-drawer .cart__empty-text {
  margin-block-end: 2rem !important;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.4rem, 4vw, 3.2rem) !important;
  font-weight: 400!important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
}

cart-drawer .cart-drawer__warnings .button {
  min-height: 5.05rem !important;
  padding: 1.45rem 2.6rem !important;
  font-size: 1.1rem !important;
  font-weight: 700!important;
  letter-spacing: 0.18em !important;
}

/* ====================================================================
   Empty cart state — premium composition refinement.
   ------------------------------------------------------------
   This pass refines spacing, hierarchy, and the login block so the
   empty drawer reads as intentional editorial composition rather
   than "blank screen with a button in the middle".

   - Padding tightens (8-14rem → 3-6rem block) so the content sits
     in a calm proportioned column instead of floating in a void.
   - The heading already gets the Georgia serif treatment from the
     prior late-cascade rule (line ~1001); here we add a hairline
     ornament beneath it for editorial polish + tighten the
     heading→CTA rhythm.
   - The login block (only renders when accounts enabled + guest)
     becomes a quietly separated tertiary band — small tracked
     heading, body text, and an inline link with luxury underline.
   ==================================================================== */
/* Calm container — tighter than the original 8-14rem block padding.
   The empty state should sit in a compact band, not float in a void. */
cart-drawer .drawer__inner-empty {
  padding-block: clamp(2.4rem, 6vw, 4.8rem) !important;
  padding-inline: var(--aeto-cart-padding) !important;
  gap: 0;
}

cart-drawer .cart-drawer__empty-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 36rem;
  margin-inline: auto;
}

/* Duplicate close button inside the empty-content slot — Dawn /
   reverted-Liquid puts a `<button class="drawer__close">` between
   the heading and the CTA. The drawer's `.drawer__header` already
   provides the canonical close affordance, so hiding the duplicate
   here is the durable fix (an inline Liquid edit kept getting
   reverted externally). */
cart-drawer .cart-drawer__empty-content > .drawer__close {
  display: none !important;
}

/* Editorial heading — keep the Georgia serif from the late cascade,
   tighten the bottom margin so the hairline + CTA sit closer. */
cart-drawer .cart__empty-text {
  margin: 0 0 1.4rem !important;
  max-width: 22ch;
}

/* Subtle hairline ornament under the heading — feels intentional,
   not decorative. 4rem wide, centered, ink at 22% opacity. */
cart-drawer .cart__empty-text::after {
  content: "";
  display: block;
  width: 4rem;
  height: 0.1rem;
  margin: 1.6rem auto 0;
  background: rgba(17, 17, 17, 0.22);
}

/* Continue Shopping — luxury primary CTA, anchored to the
   composition with a small top margin (not a wide gap). */
cart-drawer .cart-drawer__warnings .button {
  min-width: 22rem !important;
  max-width: 30rem;
  width: 100%;
  min-height: 5.2rem !important;
  margin-block-start: 0.4rem;
  padding: 1.5rem 3rem !important;
  font-size: 1.1rem !important;
  letter-spacing: 0.22em !important;
  transition:
    background 380ms cubic-bezier(0.16, 1, 0.3, 1),
    color 380ms cubic-bezier(0.16, 1, 0.3, 1),
    letter-spacing 380ms cubic-bezier(0.16, 1, 0.3, 1);
}

cart-drawer .cart-drawer__warnings .button:hover,
cart-drawer .cart-drawer__warnings .button:focus-visible {
  letter-spacing: 0.24em !important;
}

/* Login title — small tracked uppercase label. Positioned as a
   quiet trailing tertiary band, NOT a separate divided section.
   Tighter top margin so it feels visually connected to the CTA
   (was 4rem on title + 2.4rem padding via wrapper = 6.4rem total;
   now 2.4rem total). No top border — the hairline ornament under
   the heading already provides enough visual rest. CSS targets
   the title + paragraph directly so the styling holds whether
   or not the `<div class="cart__login">` wrapper is present (the
   wrapper keeps getting reverted externally). */
cart-drawer .cart__login-title,
cart-drawer .cart__login-title.h3 {
  margin: 2.4rem 0 0.6rem !important;
  max-width: 30rem;
  font-family: var(--font-heading-family);
  font-size: 1rem !important;
  font-weight: 700!important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.55);
  text-align: center;
}

cart-drawer .cart__login-paragraph {
  margin: 0 !important;
  max-width: 30rem;
  font-family: var(--font-body-family);
  font-size: 1.15rem !important;
  font-weight: 400!important;
  line-height: 1.55 !important;
  letter-spacing: 0.01em;
  color: rgba(17, 17, 17, 0.62);
  text-align: center;
}

/* When the wrapper IS present (refactored Liquid), it takes over
   the top spacing so the title sits flush at the wrapper's start. */
cart-drawer .cart__login {
  width: 100%;
  max-width: 30rem;
  margin-block-start: 2.4rem;
  text-align: center;
}

cart-drawer .cart__login > .cart__login-title {
  margin-block-start: 0 !important;
}

cart-drawer .cart__login-paragraph a {
  color: var(--aeto-fg, #111);
  text-decoration: underline;
  text-decoration-thickness: 0.1rem;
  text-underline-offset: 0.4em;
  text-decoration-color: rgba(17, 17, 17, 0.3);
  transition: text-decoration-color var(--aeto-dur-fast, 160ms) var(--aeto-ease, cubic-bezier(0.4, 0, 0.2, 1));
}

cart-drawer .cart__login-paragraph a:hover,
cart-drawer .cart__login-paragraph a:focus-visible {
  text-decoration-color: var(--aeto-fg, #111);
  outline: 0;
}

/* ====================================================================
   Footer — premium divider + spacing rhythm.
   ------------------------------------------------------------
   The footer already had a top hairline AND a soft upward shadow, but
   the two were competing: the diffuse shadow blurred the visual edge
   and the divider read as hazy noise rather than intentional
   architecture. The inner totals border added a second divider that
   diluted the hierarchy further.

   This pass:
     - Top divider: a touch more presence (rgba @ 10%) so the line
       feels considered, not accidental. Still well below "heavy".
     - Replaces the diffuse shadow with a tighter, calmer one that
       sits closer to the edge — gives depth without competing.
     - Quiets the in-totals divider to 6% so it reads as a hairline
       field-set marker, not a second section break.
     - Tightens tax-note rhythm so subtotal → helper → CTAs flows as
       one composed band.
     - Slightly tighter CTA cluster padding-block-end so the drawer
       doesn't trail off with dead space below the Continue button.
   ==================================================================== */
cart-drawer .cart-drawer__footer {
  /* Cleaner top hairline — 10% ink reads as intentional architecture
     without crossing into "heavy". The earlier 22%-opacity shadow at
     2.8rem blur was so diffuse it blurred the line itself; the new
     shadow is tight (1.2rem blur with negative spread) so it carries
     just enough depth to suggest the items scroll behind without
     competing with the hairline. Top padding (1.7rem) stays inherited
     from the prior rule — that's the breathing room above the totals
     and shouldn't tighten. */
  border-block-start: 0.1rem solid rgba(17, 17, 17, 0.1) !important;
  box-shadow: 0 -0.4rem 1.2rem -0.8rem rgba(17, 17, 17, 0.12);
}

cart-drawer .totals {
  /* No inner divider. The footer-top hairline already provides the
     architectural break between cart items and footer; an additional
     line right under the subtotal stacks two near-parallel rules in
     the same band and reads as visual noise rather than hierarchy.
     One line per architectural break — that's the premium rhythm. */
  border-block-end: 0 !important;
  padding-block-end: 0.4rem !important;
}

/* Outer .drawer__footer wrapper — Dawn's base CSS gives this its own
   `border-top: 0.1rem solid` (component-cart-drawer.css). It sits
   directly above the inner .cart-drawer__footer which also carries a
   top hairline (AETO's intentional one). The two render as parallel
   lines a few rem apart in the same band — visual noise. Zero out
   the outer one so only the intentional inner hairline survives.
   Padding also zeroed so the inner footer/CTA cluster controls its
   own spacing rhythm without an extra 1.5rem band from the wrapper. */
cart-drawer .drawer__footer {
  border-top: 0 !important;
  padding: 0 !important;
}

cart-drawer .tax-note,
cart-drawer .tax-note.caption-large,
cart-drawer .tax-note.rte {
  /* Balanced rhythm: closer above (subtotal divider already creates
     visual rest) and a touch more breathing below (helper → CTAs). */
  margin: 0.9rem 0 1.4rem !important;
}

cart-drawer .aeto-cart-drawer__ctas,
cart-drawer .cart__ctas {
  /* Snug the cluster up to the tax-note above and trim the trailing
     space below the Continue button. */
  padding-block-end: 1.6rem !important;
}

@media (max-width: 749px) {
  cart-drawer .drawer__inner {
    width: 100vw !important;
    max-width: 100vw !important;
  }

  cart-drawer .drawer__header {
    min-height: 6.4rem;
    padding: 1.7rem 1.8rem 1.35rem !important;
  }

  cart-drawer .drawer__cart-items-wrapper {
    padding-inline: 1.8rem !important;
  }

  cart-drawer .cart-item {
    grid-template-columns: 6.8rem minmax(0, 1fr) !important;
    gap: 1.15rem !important;
    padding-block: 1.25rem !important;
  }

  cart-drawer .cart-item__media,
  cart-drawer .cart-item__image-container {
    width: 6.8rem !important;
  }

  cart-drawer .cart-item__image {
    width: 6.8rem !important;
    height: 8.4rem !important;
  }

  cart-drawer .cart-item__name,
  cart-drawer .cart-item__name.h4 {
    font-size: 1.25rem !important;
  }

  cart-drawer .product-option,
  cart-drawer .product-option dt,
  cart-drawer .product-option dd {
    font-size: 0.95rem !important;
  }

  cart-drawer .cart-drawer__footer {
    padding: 1.35rem 1.8rem 0.9rem !important;
  }

  cart-drawer .aeto-cart-drawer__ctas,
  cart-drawer .cart__ctas {
    padding: 0 1.8rem 1.6rem !important;
  }

  cart-drawer .aeto-cart-drawer__checkout,
  cart-drawer .cart__checkout-button {
    min-height: 4.8rem !important;
    font-size: 1.05rem !important;
    letter-spacing: 0.17em !important;
  }

  cart-drawer .aeto-cart-drawer__continue {
    min-height: 4.3rem !important;
    padding: 1.2rem 2rem !important;
    font-size: 1rem !important;
    letter-spacing: 0.17em !important;
  }

  cart-drawer .tax-note,
  cart-drawer .tax-note.caption-large,
  cart-drawer .tax-note.rte {
    margin-block: 0.65rem 1rem !important;
  }

  /* Empty cart — phone-specific tightening so the CTA fills the
     narrow viewport and the heading doesn't sit in cramped air. */
  cart-drawer .drawer__inner-empty {
    padding-block: clamp(2.4rem, 6vw, 4rem) !important;
    padding-inline: var(--aeto-cart-padding) !important;
  }

  cart-drawer .cart-drawer__warnings .button {
    min-width: 0 !important;
    width: 100%;
    max-width: 30rem;
    min-height: 5.05rem !important;
    font-size: 1.1rem !important;
    letter-spacing: 0.2em !important;
  }

  cart-drawer .cart__login {
    margin-block-start: 2.8rem;
    padding-block-start: 2rem;
  }
}

/* ====================================================================
   Premium line-item composition.
   ------------------------------------------------------------
   The line item before this pass was rendering with awkward gaps:
     - .cart-item__totals (line price) and .cart-item__quantity were
       both auto-flowing into the 2-col grid, creating two extra rows
       under the details cell — visually a big empty gap between
       "COULEUR: GOLD" and the [- 2 +] widget.
     - The unit price inside .cart-item__details duplicated the line
       price in .cart-item__totals, so the eye saw the same number
       twice in different sizes.

   The fix composes the four table cells into an explicit 3-col grid:

        ┌─────┐  Title                       PRICE
        │ IMG │  Color: Gold
        │     │
        └─────┘  [−] 2 [+]                    [×]

     - Col 1 / rows 1-2:  product image
     - Col 2 / row 1:     title + variants (unit price hidden)
     - Col 3 / row 1:     line price (anchored end, top)
     - Col 2-3 / row 2:   quantity widget + remove (flex justified)

   Result: every line item reads as one composed unit with consistent
   vertical rhythm and a single source of truth for price.
   ==================================================================== */
cart-drawer .cart-item {
  grid-template-columns: 7.6rem minmax(0, 1fr) auto !important;
  column-gap: 1.4rem !important;
  row-gap: 0.6rem !important;
  padding-block: 1.6rem !important;
  align-items: start;
  align-content: start;
}

cart-drawer .cart-item__media {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  align-self: start !important;
}

/* Image height matches the natural height of the content stack
   (title + variant + row-gap + quantity widget ≈ 7.6rem). When the
   image is taller than this, the grid stretches the row-gap to fit
   the image and an unwanted air pocket appears between the variant
   and the quantity widget. Keeping image height ≤ content height
   lets the row-gap stay at its declared value. */
cart-drawer .cart-item__image {
  width: 7.6rem !important;
  height: 7.6rem !important;
}

cart-drawer .cart-item__details {
  grid-column: 2 !important;
  grid-row: 1 !important;
  gap: 0.3rem !important;
}

cart-drawer .cart-item__totals {
  grid-column: 3 !important;
  grid-row: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  align-self: start;
  justify-self: end;
  text-align: end;
  display: flex !important;
  align-items: flex-start;
  justify-content: flex-end;
}

cart-drawer .cart-item__quantity {
  grid-column: 2 / 4 !important;
  grid-row: 2 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Hide the duplicate unit price inside .cart-item__details. Targets
   only the price-bearing direct children (`:has(.aeto-money)` for
   the regular-price div, and the discounted-prices wrapper for sale
   items). Variant <dl> rows are nested deeper so they're untouched,
   and a selling-plan `<p class="product-option">` survives because
   it has no money node inside. */
cart-drawer .cart-item__details > .product-option:has(.aeto-money),
cart-drawer .cart-item__details > .cart-item__discounted-prices {
  display: none !important;
}

/* Quantity + remove on one row, justified between */
cart-drawer .cart-item__quantity-wrapper {
  margin: 0 !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Line price (totals cell) — slightly heavier than body, anchors
   the row visually. */
cart-drawer .cart-item__totals .price,
cart-drawer .cart-item__price-wrapper .price {
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.2 !important;
  white-space: nowrap;
}

@media (max-width: 749px) {
  cart-drawer .cart-item {
    grid-template-columns: 6.8rem minmax(0, 1fr) auto !important;
    column-gap: 1.15rem !important;
    row-gap: 0.5rem !important;
    padding-block: 1.35rem !important;
  }

  cart-drawer .cart-item__image {
    width: 6.8rem !important;
    height: 6.8rem !important;
  }

  cart-drawer .cart-item__totals .price,
  cart-drawer .cart-item__price-wrapper .price {
    font-size: 1.15rem !important;
  }
}

/* ====================================================================
   AETO premium add-to-cart toast.
   ------------------------------------------------------------
   Fires only from product-card AJAX add-to-cart (the JS handler is
   scoped to `.aeto-quick-add-btn`). Hero buttons, editorial CTAs,
   navigation links — none reach this UI; they navigate as normal.

   The stack lives at the inline-end top corner of the viewport. The
   toast slides in horizontally from that edge, sits for ~3.8s, then
   slides back out. `--aeto-dir-sign` (1 in LTR, -1 in RTL) flips the
   slide direction so the toast always enters from the visual edge it
   anchors to.
   ==================================================================== */
.aeto-toast-stack {
  position: fixed;
  inset-block-start: 2.4rem;
  inset-inline-end: 2.4rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  pointer-events: none;
}

.aeto-cart-toast {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr) auto;
  gap: 1.4rem;
  align-items: start;
  width: min(38rem, calc(100vw - 4.8rem));
  padding: 1.4rem 1.6rem;
  background: var(--aeto-bg-cream, #f1ece1);
  color: var(--aeto-fg, #111);
  border: 1px solid rgba(17, 17, 17, 0.08);
  box-shadow: 0 2rem 5rem -1rem rgba(17, 17, 17, 0.22);
  font-family: var(--font-body-family);
  pointer-events: auto;
  opacity: 0;
  transform: translateX(calc(120% * var(--aeto-dir-sign, 1)));
  transition:
    transform 420ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 280ms ease;
}

.aeto-cart-toast.is-active {
  opacity: 1;
  transform: translateX(0);
}

.aeto-cart-toast.is-leaving {
  opacity: 0;
  transform: translateX(calc(120% * var(--aeto-dir-sign, 1)));
}

.aeto-cart-toast__media {
  width: 6rem;
  height: 6rem;
  overflow: hidden;
  background: rgba(17, 17, 17, 0.04);
  border-radius: 0.2rem;
}

.aeto-cart-toast__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.aeto-cart-toast__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.aeto-cart-toast__label {
  font-family: "Tajawal", system-ui, sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.55);
}

.aeto-cart-toast__title {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--aeto-fg, #111);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.aeto-cart-toast__variant {
  font-weight: 400;
  color: rgba(17, 17, 17, 0.6);
}

.aeto-cart-toast__cta {
  margin-block-start: 0.6rem;
  align-self: start;
  display: inline-block;
  font-family: "Tajawal", system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--aeto-fg, #111);
  text-decoration: underline;
  text-underline-offset: 0.4em;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(17, 17, 17, 0.2);
  transition: text-decoration-color 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

.aeto-cart-toast__cta:hover,
.aeto-cart-toast__cta:focus-visible {
  text-decoration-color: var(--aeto-fg, #111);
  outline: 0;
}

.aeto-cart-toast__close {
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  background: transparent;
  border: 0;
  color: rgba(17, 17, 17, 0.4);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  transition: color 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

.aeto-cart-toast__close:hover,
.aeto-cart-toast__close:focus-visible {
  color: var(--aeto-fg, #111);
  outline: 0;
}

@media (max-width: 749px) {
  .aeto-toast-stack {
    inset-block-start: 1.6rem;
    inset-inline-start: 1.6rem;
    inset-inline-end: 1.6rem;
  }

  .aeto-cart-toast {
    width: auto;
    grid-template-columns: 5.2rem minmax(0, 1fr) auto;
    gap: 1.15rem;
    padding: 1.2rem 1.4rem;
  }

  .aeto-cart-toast__media {
    width: 5.2rem;
    height: 5.2rem;
  }

  .aeto-cart-toast__title {
    font-size: 1.15rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aeto-cart-toast {
    transition: opacity 200ms ease;
    transform: none !important;
  }
  .aeto-cart-toast.is-active { opacity: 1; }
  .aeto-cart-toast.is-leaving { opacity: 0; }
}