.cart-drawer {
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100%;
  display: flex;
  justify-content: flex-end;
  background-color: rgba(var(--color-mask), 0.5);
  /* 2026-06-29 (Step 5): prevent background scroll while drawer is open */
  overscroll-behavior: contain;
}

/* 2026-06-30: add-to-cart confirmation banner.
   Lives in snippets/cart-drawer.html directly under
   .cart-drawer__header. The class name `after-add-cart-title`
   matches the SHOPLINE-system-provided one (see the
   data-v-c06773fc trace).

   2026-06-30 (per customer request): the
   `cart-drawer-success-fadeout 5s 0.3s forwards` animation
   that previously auto-faded the banner after 5s is
   REMOVED. The customer wants the banner to stay visible
   permanently while the drawer is open — no countdown, no
   auto-hide. The keyframes are still defined below in case
   a future call wants them, but no rule references them.

   2026-06-30 (per customer request): text colour is BLACK
   (#000) instead of the previous green (#2e7d32) so the
   banner reads as a neutral confirmation, not a success
   state. The green tick SVG already provides the "success"
   semantic; black text is calmer. */
.after-add-cart-title {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  margin: 0 0 8px;
  color: #000;
  font-size: 13px;
  font-weight: 500;
}

.after-add-cart-title__icon {
  flex: 0 0 auto;
  /* 2026-06-30: 20x20 → 26x26 per customer request.
     The SVG's intrinsic viewBox is 1024x1024, so the path
     scales cleanly to any size. */
  width: 26px;
  height: 26px;
  color: #000;
}

.after-add-cart-title__text {
  flex: 1 1 auto;
  line-height: 1.4;
}

@keyframes cart-drawer-success-fadeout {
  0%   { opacity: 1; visibility: visible; }
  85%  { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; height: 0; padding: 0; margin: 0; border: 0; }
}

/* 2026-06-29 (Step 5): rebuild the drawer's vertical rhythm
   after we removed the legacy cart-drawer__checkout-container.
   The drawer is now: top progress bar (sticky) -> tabs (sticky) ->
   product grid (scrollable) -> bottom VIEW CART (sticky). */
.cart-drawer__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* 2026-06-30: same change — moved overflow to .cart-recommend__tabs-panels. */
.cart-drawer__recommend {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}

.cart-drawer {
  visibility: hidden;
}

.cart-drawer.active {
  visibility: visible;
}

.cart-drawer__inner {
  height: 100%;
  overflow: hidden;
  transform: translateX(100%);
  transition: transform 200ms ease;
  display: flex;
  flex-direction: column;
  padding: 20px 20px 0 20px;
  background-color: rgb(var(--color-page-background));
}

.cart-drawer__fixed-checkout {
  transform: translateX(100%);
  transition: transform 200ms ease;
}

.cart-drawer__inner .cart-drawer__inner-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.cart-drawer__warnings {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: center;
}

.cart-drawer.active .cart-drawer__inner,
.cart-drawer.active .cart-drawer__fixed-checkout {
  transform: translateX(0);
}

.cart-drawer__header {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20px;
}

.cart-drawer__header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -20px;
  width: calc(100% + 40px);
  height: 1px;
  background-color: rgb(var(--color-entry-line));
}

.cart-drawer__close {
  color: rgb(var(--color-text));
  cursor: pointer;
  width: 24px;
  height: 24px;
  line-height: 0;
  top: 2px;
  right: -4px;
  padding: 6px;
  position: absolute;
}

cart-drawer {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
}

.cart-drawer-container {
  width: 440px;
}

.cart-drawer__overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.cart-drawer__overlay:empty {
  display: block;
}

/* cart-drawer-items {
  overflow: auto;
  flex: 1;
} */

.cart-drawer__inner {
  /* !important guarantees this wins over any later rule in the
     cascade (and any future plugin/theme override) so the
     inner element never grows its own scrollbar. The actual
     scrollable area is .cart-drawer__recommend (overflow-y: auto). */
  overflow-y: hidden !important;
}

@media screen and (max-height: 650px) {
  cart-drawer-items {
    overflow: visible;
  }

  .cart-drawer__inner {
    overflow-y: hidden !important;
  }
}

@media (max-width: 959px) {
  .cart-drawer-container {
    width: 90%;
  }
}

cart-drawer-items::-webkit-scrollbar {
  width: 3px;
}

cart-drawer-items::-webkit-scrollbar-thumb {
  background-color: rgba(18, 18, 18, 0.7);
  border-radius: 100px;
}

cart-drawer-items::-webkit-scrollbar-track-piece {
  margin-top: 20px;
}

/* cart-drawer-footer */

.cart-drawer__footer__container {
  display: flex;
  justify-content: flex-end;
  padding-top: 40px;
  padding-bottom: 40px;
}

.cart-drawer__checkout-container {
  width: 100%;
  position: relative;
  padding: 40px 0;
}

.cart-drawer__checkout-container::after {
  content: "";
  position: absolute;
  top: 0;
  left: -20px;
  width: calc(100% + 40px);
  height: 1px;
  background-color: rgb(var(--color-entry-line));
}

.cart-drawer__amount-wrapper {
  margin: 0;
  padding: 0;
}

.cart-drawer__amount-wrapper li {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: rgb(var(--color-text));
  margin-bottom: 8px;
}

.cart-drawer__amount-wrapper li em {
  font-style: normal;
  margin-right: 12px;
}

.cart-drawer__amount-wrapper .cart__discount span {
  color: rgb(var(--color-discount));
}

.cart-drawer__discount span {
  color: rgb(var(--color-discount));
}

#checkout {
  width: 100%;
}

.cart-drawer__checkout {
  margin-top: 15px;
}

.cart-drawer__taxes__desc {
  text-align: center;
}

.cart-drawer__body {
  position: relative;
  display: flex;
  height: 100%;
  flex-direction: column;
}

.cart-drawer__body .cart-drawer__inner {
  flex: 1;
}

.cart-drawer__body .cart-fixed-checkout {
  position: static;
}

/* The ipad end responds to the mobile end in vertical screen */

/* @custom-media --tablet (max-width: 959px); */

/* @custom-media --gt-mobile (min-width: 751px); */

/* detectingScreen need to consider the configuration of the tablet */

/* 2026-06-29: cart-drawer redesign layout.
   The legacy drawer had a tall <cart-drawer-items> list; the new
   drawer replaces that with a free-shipping bar (sticky top) +
   a recommend-products grid (scrollable middle) + the existing
   subtotal/coupon block + the existing bottom-sticky checkout
   footer.

   - cart-free-shipping-bar    -> position: sticky; top: 0;
   - .cart-drawer__recommend    -> flex: 1; overflow-y: auto;
   - .cart-drawer__checkout-container -> keep flex-shrink: 0;
*/
.cart-drawer__inner-wrapper > .cart-free-shipping-bar {
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: rgb(var(--color-page-background));
}

/* 2026-06-30: duplicate of the L59 rule (cascade tie-breaker).
   The earlier fix switched overflow to `hidden` and made
   this a flex container so .cart-recommend__tabs-panels
   could own the scrollbar. The second rule still had the
   old `overflow-y: auto` which would override — kept the
   same here for consistency. */
.cart-drawer__recommend {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}

.cart-drawer__checkout-container {
  flex-shrink: 0;
}