/*
 * GPDStore side-cart shell.
 * Tiny, render-immediate frame so the drawer is correctly sized/positioned/coloured
 * before the full (delayed) skin (side-cart.css + gpd-sidecart.css) loads. side-cart.js
 * is NOT delayed and auto-opens the drawer on add-to-cart, so an early open before the
 * skin arrives must not flash an unstyled/mispositioned panel. Dark frame matches the
 * final gpd-sidecart overlay (--bg-1). Keep ONLY closed/open frame rules here.
 */
.shoptimizer-mini-cart-wrap {
  width: 420px !important;
  max-width: 100vw !important;
  height: 100%;
  display: flex !important;
  flex-direction: column;
  background: var(--bg-1, #111518);
  overflow: hidden;
  box-sizing: border-box;
  z-index: 10020 !important;
}

body.drawer-open::before,
body.drawer-open .mobile-overlay {
  z-index: 10010;
}

body.drawer-open #chat-widget-container {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (max-width: 480px) {
  .shoptimizer-mini-cart-wrap {
    width: 100% !important;
  }

  body.drawer-open .shoptimizer-mini-cart-wrap {
    max-width: 100% !important;
  }
}

/* Closed drawer must be pushed fully off-screen by its own width before the parent
   theme (loaded after the full skin) offsets it by only -420px — otherwise a 500px
   drawer peeks ~80px in at iPad-portrait / fold-tablet widths on first paint. */
@media (min-width: 600px) and (max-width: 900px) {
  .shoptimizer-mini-cart-wrap {
    width: 500px !important;
    right: -500px !important;
  }

  body.drawer-open .shoptimizer-mini-cart-wrap {
    right: 0 !important;
  }
}