/**
 * GDT — Elementor Menu Cart (off-canvas fly-out) overrides
 * Loads site-wide: the Menu Cart widget renders in the header on every page,
 * so this is NOT gated behind is_cart() / is_singular('product').
 *
 * Scope: side-cart (off-canvas) type only; the mini-cart dropdown variant is
 * excluded. The widget-wrapper prefix (0,0,3,0) beats Elementor's single-class
 * rule, so no !important is needed.
 *
 * NOTE: the sticky-header clip fix does NOT live here — it belongs in
 * Appearance > Customize > Additional CSS, alongside the backdrop-filter rule
 * that causes it (single source of truth).
 */

/* Mini cart background blur */
.elementor-menu-cart__main {
   background: linear-gradient(rgb(26 26 26 / 86%), rgb(28 28 28 / 92%)) !important;
   -webkit-backdrop-filter: saturate(180%) blur(25px);
           backdrop-filter: saturate(180%) blur(25px);
   transition: opacity 0.2s linear;
}

/* Inner prodcut list styling overrides */
.elementor-menu-cart__product {
    margin-right: 8px;
}

/* Button styling overrides */
.elementor-menu-cart__footer-buttons > a {
    line-height: 1em !important;
}

/* ── Panel width ─────────────────────────────────────────────────────────
   Elementor hard-codes width:350px on .elementor-menu-cart__main.

   Desktop + tablet (>=768px): static width, a modest bump over 350px.
   Tweak the single value below to taste (380 / 400 / 420...). */
.elementor-widget-woocommerce-menu-cart:not(.elementor-menu-cart--cart-type-mini-cart) .elementor-menu-cart__main {
    width: 480px;
    max-width: 100%;
}

/* Mobile (<=767px): dynamic — wide, but never full-screen. */
@media (max-width: 767px) {
    .elementor-widget-woocommerce-menu-cart:not(.elementor-menu-cart--cart-type-mini-cart) .elementor-menu-cart__main {
        width: 80vw;
        max-width: 85vw;  /* hard guard: never fully cover the viewport */
    }
}