/**
 * DrugsGeneral Style Patch
 * Fixes cascading !important conflicts and compact_list layout breakage.
 * Load AFTER main.min.css (dependency: dg-style).
 */

/* ════════════════════════════════════════════════════════════════
   COUNTER / STATS BAR — Stable color restoration
   main.min.css v100 accidentally compiled a white-background +
   dark-text version as the last rule, making text invisible on the
   teal gradient. This file loads AFTER main.min.css so these rules win.
════════════════════════════════════════════════════════════════ */
.dg-counter-bar {
    background: linear-gradient(135deg, #005F6B 0%, #008296 40%, #003038 100%) !important;
    background-image: linear-gradient(135deg, #005F6B 0%, #008296 40%, #003038 100%) !important;
    color: #FFFFFF !important;
    border-bottom: none !important;
}

/* Savings/orders number — amber so it pops on teal */
.dg-counter-bar .dg-counter-num,
.dg-counter-bar .dg-savings-live {
    color: #FFB800 !important;
    -webkit-text-fill-color: #FFB800 !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
}

/* Supporting text — white at varying opacities */
.dg-counter-bar .dg-counter-sub      { color: rgba(255,255,255,.75) !important; }
.dg-counter-bar .dg-stat-num         { color: #FFFFFF !important;
                                        -webkit-text-fill-color: #FFFFFF !important; }
.dg-counter-bar .dg-stat-label       { color: rgba(255,255,255,.6) !important; }
.dg-counter-bar .dg-orders-label     { color: rgba(255,255,255,.5) !important; }
.dg-counter-bar .dg-orders-sub       { color: rgba(255,255,255,.5) !important; }
.dg-counter-bar .dg-live-badge,
.dg-counter-bar .dg-live-stats-label { color: rgba(255,255,255,.6) !important; }
.dg-counter-bar .dg-counter-live     { color: rgba(255,255,255,.65) !important; }
.dg-counter-bar .dg-counter-live-dot { background: #93D5DF !important;
                                        box-shadow: 0 0 6px #93D5DF !important; }
.dg-counter-bar .dg-digit-sep        { color: rgba(255,255,255,.4) !important; }

/* Digit boxes — translucent white on teal */
.dg-counter-bar .dg-odometer .dg-digit,
.dg-counter-bar .dg-counter-hero-dollar {
    background: rgba(255,255,255,.12) !important;
    color: #FFFFFF !important;
    border-color: rgba(255,255,255,.15) !important;
}

/* ── Ribbon: restore stable navy-deep background (was accidentally compiled
   as orange gradient in main.min.css v100). */
.dg-ribbon, .dg-ribbon--static {
    background: #005F6B !important;
    background-image: none !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.15) !important;
}

/* ── compact_list A/B variant: fix position:absolute bleedthrough ──────
   main.min.css sets position:absolute!important on .dg-product-img a/img.
   Without overriding position here, the compact grid collapses. */
[data-layout="compact_list"] .dg-product-img {
    height: 100% !important;
    min-height: 100px !important;
    aspect-ratio: unset !important;
    border-radius: 0 !important;
}
[data-layout="compact_list"] .dg-product-img a {
    position: relative !important;
    inset: unset !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: inherit !important;
    overflow: hidden !important;
}
[data-layout="compact_list"] .dg-product-img img {
    position: relative !important;
    inset: unset !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}
[data-layout="compact_list"] .dg-product-img svg {
    position: relative !important;
    top: unset !important;
    left: unset !important;
    transform: none !important;
    display: block !important;
    margin: auto !important;
    width: 60px !important;
    height: 60px !important;
    max-width: none !important;
}

/* ════════════════════════════════════════════════════════════════
   CART DRAWER — Complete layout fix
   Root cause: main.min.css sets height:100% on .dg-cart-drawer but
   a fixed-position element has no containing block for %, so it
   collapses to 0 when dg-cart-critical.css fails to load (CDN cache,
   plugin optimisers, etc.). These rules are placed here so they load
   AFTER main.min.css and survive any optimisation pipeline.
════════════════════════════════════════════════════════════════ */

/* ── Core drawer shell ── */
#dg-cart-drawer,
.dg-cart-drawer {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    width: min(420px, 100vw) !important;
    height: 100dvh !important;          /* dvh = viewport minus mobile browser chrome */
    max-height: 100vh !important;       /* safe fallback for browsers without dvh */
    background: #fff !important;
    z-index: 9950 !important;
    transform: translateX(100%) !important;
    transition: transform .3s cubic-bezier(.4,0,.2,1) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-shadow: -10px 0 35px rgba(0,0,0,.16) !important;
    box-sizing: border-box !important;
}

#dg-cart-drawer.open,
.dg-cart-drawer.open {
    transform: translateX(0) !important;
}

/* ── Scrollable body — must be flex:1 with min-height:0 ── */
#dg-cart-drawer .dg-cart-drawer-body,
.dg-cart-drawer-body {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: #F7F8F8 !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    display: block !important;
    padding: 0 !important;
}

/* ── Head — never grows or shrinks ── */
#dg-cart-drawer .dg-cart-drawer-head,
.dg-cart-drawer-head {
    flex-shrink: 0 !important;
    background: var(--navy-deep, #005F6B) !important;
}

/* ── Foot — pinned to bottom ── */
#dg-cart-drawer .dg-cart-drawer-foot,
.dg-cart-drawer-foot {
    flex-shrink: 0 !important;
    background: #fff !important;
    border-top: 1px solid #D5D9D9 !important;
    padding: 10px 14px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
}

/* ── Overlay ── */
#dg-cart-overlay,
.dg-cart-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(15,17,17,.42) !important;
    z-index: 9940 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity .25s ease, visibility .25s ease !important;
    pointer-events: none !important;
}
#dg-cart-overlay.open,
.dg-cart-overlay.open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* ── Shimmer skeleton (shown before AJAX loads) ── */
.dg-cart-skeleton {
    padding: 16px 14px !important;
}
.shimmer {
    background: linear-gradient(
        90deg,
        #EAEDED 25%,
        #F7F8F8 50%,
        #EAEDED 75%
    ) !important;
    background-size: 200% 100% !important;
    animation: dg-shimmer 1.4s ease-in-out infinite !important;
}
/* Hide skeleton once real content arrives */
.dg-cart-drawer-body.dg-cart-loaded .dg-cart-skeleton {
    display: none !important;
}

/* ── Items ── */
#dg-cart-drawer .dg-cart-item,
.dg-cart-item {
    display: block !important;
    margin: 14px 14px 0 !important;
    background: #fff !important;
    border: 1px solid #D5D9D9 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}
#dg-cart-drawer .dg-cart-item-top,
.dg-cart-item-top {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 14px !important;
}
#dg-cart-drawer .dg-cart-item-img,
.dg-cart-item-img {
    width: 68px !important;
    height: 68px !important;
    border-radius: 10px !important;
    flex: 0 0 68px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    background: #fff !important;
    border: 1px solid #D5D9D9 !important;
}
#dg-cart-drawer .dg-cart-item-info,
.dg-cart-item-info {
    flex: 1 !important;
    min-width: 0 !important;
}
#dg-cart-drawer .dg-cart-item-meta-strip,
.dg-cart-item-meta-strip {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 7px 12px 8px !important;
    border-top: 1px solid #F0F1F1 !important;
    background: #F7F8F8 !important;
    gap: 8px !important;
}
#dg-cart-drawer .dg-cart-item-price-row,
.dg-cart-item-price-row {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
}

/* ── Price breakdown card (foot of item list) ── */
.dg-cart-price-breakdown {
    margin: 12px 14px 18px !important;
    background: #fff !important;
    border: 1px solid #D5D9D9 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}
.dg-cart-price-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 14px !important;
    border-bottom: 1px solid #F0F1F1 !important;
    font-size: 12.5px !important;
}
.dg-cart-price-row:last-child {
    border-bottom: none !important;
    background: #F7F8F8 !important;
}

/* ── Checkout button ── */
#dg-cart-drawer .dg-cart-checkout-btn,
.dg-cart-checkout-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    width: 100% !important;
    min-height: 46px !important;
    background: #FFB800 !important;
    color: #0F1111 !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    border: 1.5px solid #D49A00 !important;
    box-sizing: border-box !important;
}

/* DG quantity control — one component across product + cart */
.dg-qty-input,
#dg-cart-drawer .dg-qty-control,
.dg-cart-item-meta-strip .dg-qty-control {
    display: inline-flex !important;
    align-items: stretch !important;
    width: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;
    height: 34px !important;
    border: 1.5px solid var(--border, #D5D9D9) !important;
    border-radius: var(--radius-sm, 8px) !important;
    overflow: hidden !important;
    background: var(--white, #FFFFFF) !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}
.dg-qty-input button,
#dg-cart-drawer .dg-qty-control .dg-qty-btn,
.dg-cart-item-meta-strip .dg-qty-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 30px !important;
    width: 30px !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: var(--bg2, #EAEDED) !important;
    color: var(--navy, #005F6B) !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}
.dg-qty-input button:hover,
#dg-cart-drawer .dg-qty-control .dg-qty-btn:hover,
.dg-cart-item-meta-strip .dg-qty-btn:hover {
    background: var(--border, #D5D9D9) !important;
}
.dg-qty-input input,
.dg-qty-input .dg-qty-val,
#dg-cart-drawer .dg-qty-control .dg-qty-val,
.dg-cart-item-meta-strip .dg-qty-val {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-left: 1px solid var(--border, #D5D9D9) !important;
    border-right: 1px solid var(--border, #D5D9D9) !important;
    background: var(--white, #FFFFFF) !important;
    color: var(--ink, #0F1111) !important;
    text-align: center !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    user-select: none !important;
}

/* ── Shipping progress bar ── */
.dg-cart-ship-wrap {
    margin: 12px 14px 0 !important;
    background: #fff !important;
    border: 1px solid #D5D9D9 !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
}
.dg-cart-ship-bar {
    height: 6px !important;
    background: #fff !important;
    border-radius: 99px !important;
    overflow: hidden !important;
    margin-top: 6px !important;
}
.dg-cart-ship-fill {
    height: 100% !important;
    background: #067D62 !important;
    border-radius: 99px !important;
    transition: width .5s ease !important;
}

/* ── Coupon toggle ── */
.dg-cart-coupon-row {
    margin: 10px 14px 0 !important;
    padding: 0 !important;
}
#dg-coupon-toggle,
.dg-coupon-toggle {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 13px 14px !important;
    background: linear-gradient(135deg, #EDF7F9 0%, #E8F5EE 100%) !important;
    border: 1.5px solid #C8EBF0 !important;
    border-radius: 12px !important;
    text-align: left !important;
    cursor: pointer !important;
    font-family: inherit !important;
    box-sizing: border-box !important;
}
.dg-coupon-toggle-text {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-width: 0 !important;
}
.dg-coupon-toggle-icon {
    width: 36px !important;
    height: 36px !important;
    background: linear-gradient(135deg, #008296, #077) !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    color: #fff !important;
}
.dg-coupon-input-row {
    display: flex !important;
    border: 1.5px solid #ADBAC5 !important;
    border-radius: 9px !important;
    overflow: hidden !important;
}
#dg-coupon-code {
    flex: 1 !important;
    border: 0 !important;
    padding: 11px 14px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    outline: 0 !important;
    background: #F7F8F8 !important;
    min-width: 0 !important;
}
#dg-coupon-apply {
    flex-shrink: 0 !important;
    background: #005F6B !important;
    color: #fff !important;
    border: 0 !important;
    padding: 11px 20px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

/* ── Donation widget ── */
.dg-donation-wrap {
    margin: 12px 14px 0 !important;
    background: #fff !important;
    border: 1.5px solid #D5D9D9 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}
.dg-donation-inner {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 11px 13px !important;
}
.dg-donation-checkbox-outer {
    position: relative !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 6px !important;
    border: 2px solid #D5D9D9 !important;
    background: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}
.dg-donation-checkbox-outer.dg-donation-checked {
    border-color: #067D62 !important;
    background: #067D62 !important;
}
.dg-donation-checkmark {
    pointer-events: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
}
.dg-donation-checked .dg-donation-checkmark {
    opacity: 1 !important;
}

/* ── Tip widget ── */
.dg-tip-wrap {
    margin: 10px 14px 0 !important;
    background: #fff !important;
    border: 1.5px solid #D5D9D9 !important;
    border-radius: 14px !important;
    padding: 14px 14px 12px !important;
}
.dg-tip-chips {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 7px !important;
    margin-bottom: 10px !important;
    padding-top: 10px !important; /* room for .dg-tip-popular badge that sits at top:-8px */
    overflow: visible !important;
}
.dg-tip-chip {
    position: relative !important;
    background: #F7F8F8 !important;
    border: 1.5px solid #D5D9D9 !important;
    border-radius: 10px !important;
    padding: 10px 4px 8px !important;
    cursor: pointer !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 3px !important;
    overflow: visible !important; /* allow .dg-tip-popular to render above the chip */
}
.dg-tip-applied-row {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    background: #E8F5EE !important;
    border: 1px solid #7FC09F !important;
    border-radius: 7px !important;
    padding: 7px 10px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: #045242 !important;
}
.dg-tip-applied-row span { flex: 1 !important; }

/* ── Savings bar ── */
.dg-cart-savings-bar {
    background: linear-gradient(90deg, #005F6B, #006D7E) !important;
    padding: 10px 20px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    flex-shrink: 0 !important;
}

/* ── Trust strip in head ── */
.dg-cart-trust-strip {
    display: flex !important;
    gap: 12px !important;
    padding: 10px 20px 16px !important;
    border-top: 1px solid rgba(255,255,255,.1) !important;
    overflow: hidden !important;
}
.dg-cart-trust-badge {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 9px !important;
    color: rgba(255,255,255,.72) !important;
    white-space: nowrap !important;
}

/* ── Empty cart ── */
.dg-cart-empty {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 34px 22px !important;
    text-align: center !important;
}
.dg-cart-browse-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 12px !important;
    background: #005F6B !important;
    color: #fff !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

/* ── Auto-coupon banner ── */
.dg-cart-auto-coupon {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: linear-gradient(135deg, #005F6B 0%, #008296 100%) !important;
    border-radius: 8px !important;
    padding: 7px 10px !important;
    margin: 6px 14px 0 !important;
}
.dg-cart-auto-coupon-icon {
    flex-shrink: 0 !important;
    width: 26px !important;
    height: 26px !important;
    background: rgba(255,255,255,.18) !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.dg-cart-auto-coupon-text { flex: 1 !important; min-width: 0 !important; }
.dg-cart-auto-coupon-title {
    font-size: 11.5px !important;
    font-weight: 800 !important;
    color: #fff !important;
}
.dg-cart-auto-coupon-badge {
    flex-shrink: 0 !important;
    background: rgba(255,255,255,.2) !important;
    color: #fff !important;
    border-radius: 20px !important;
    padding: 3px 9px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
}

/* ── Applied coupon row ── */
.dg-cart-coupon-applied {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 10px 14px 0 !important;
    padding: 10px 13px !important;
    background: #E8F5EE !important;
    border: 1.5px solid #7FC09F !important;
    border-radius: 10px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: #045242 !important;
}
.dg-cart-coupon-applied span { flex: 1 !important; }
.dg-remove-coupon {
    background: transparent !important;
    border: 0 !important;
    cursor: pointer !important;
    font-size: 18px !important;
    color: #045242 !important;
    opacity: .55 !important;
    padding: 0 2px !important;
}

/* ── Cross-sell / upsell cards in cart ── */
.dg-cs-drawer-wrap,
.dg-cart-recs-wrap {
    margin: 10px 14px 4px !important;
}
.dg-cs-drawer-slider,
.dg-cart-recs-scroll {
    display: flex !important;
    gap: 10px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding-bottom: 4px !important;
}
.dg-cs-drawer-slider::-webkit-scrollbar,
.dg-cart-recs-scroll::-webkit-scrollbar { display: none !important; }

/* ── Mobile: full-width drawer ── */
@media (max-width: 480px) {
    #dg-cart-drawer,
    .dg-cart-drawer {
        width: 100vw !important;
        max-width: 100vw !important;
    }
    .dg-cart-drawer-head-top {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    .dg-cart-trust-strip {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    .dg-cart-item {
        margin-left: 10px !important;
        margin-right: 10px !important;
    }
    .dg-cart-drawer-foot {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

/* ── Force box-sizing inside entire drawer ── */
#dg-cart-drawer,
#dg-cart-drawer * {
    box-sizing: border-box !important;
}

/* ================================================================
   CART DRAWER — v100.0.4 rendering fix
   Root causes identified:
   1. main.min.css adds contain:strict to .dg-cart-drawer-body which
      breaks the flex:1 min-height:0 layout pattern entirely.
   2. main.min.css sets height:100% on .dg-cart-drawer (no fixed
      reference), causing the drawer to collapse on some browsers.
   3. Multiple conflicting !important rules on .dg-cart-drawer-foot
      padding from dg-cart-critical.css vs main.min.css tail.
   4. .dg-last-minute / LAST-MINUTE ADD section missing display rules.
   These rules load LAST so they win all specificity wars.
================================================================ */

/* ── 1. Drawer shell: explicit dvh height, proper flex column ── */
#dg-cart-drawer,
.dg-cart-drawer {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    width: min(420px, 100vw) !important;
    height: 100dvh !important;
    height: 100vh !important; /* safe fallback */
    max-height: 100svh !important;
    background: #fff !important;
    z-index: 9950 !important;
    transform: translateX(100%) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-shadow: -10px 0 35px rgba(0,0,0,.16) !important;
    box-sizing: border-box !important;
    /* Reset properties that collapse the drawer */
    contain: none !important;
    will-change: transform !important;
}

#dg-cart-drawer.open,
.dg-cart-drawer.open {
    transform: translateX(0) !important;
}

/* ── 2. Body: MUST have contain:none so flex:1 works correctly ── */
#dg-cart-drawer .dg-cart-drawer-body,
.dg-cart-drawer .dg-cart-drawer-body,
.dg-cart-drawer-body {
    contain: none !important;      /* ← THE KEY FIX: overrides contain:strict */
    flex: 1 1 0px !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: #F7F8F8 !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    display: block !important;
    padding: 0 !important;
    padding-bottom: 14px !important;
}

/* ── 3. Head: never shrinks ── */
#dg-cart-drawer .dg-cart-drawer-head,
.dg-cart-drawer .dg-cart-drawer-head,
.dg-cart-drawer-head {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    background: #005F6B !important;
}

/* ── 4. Foot: pinned, safe-area-aware, no double padding ── */
#dg-cart-drawer .dg-cart-drawer-foot,
.dg-cart-drawer .dg-cart-drawer-foot,
.dg-cart-drawer-foot {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    background: #fff !important;
    border-top: 1px solid #D5D9D9 !important;
    padding: 10px 14px !important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-y: auto !important;
    max-height: 50vh !important;
}

/* ── 5. "LAST MINUTE ADD" / cross-sell section layout fix ── */
.dg-last-minute,
#dg-cart-body .dg-last-minute {
    display: block !important;
    background: #fff !important;
    border-top: 1px solid #EAEDED !important;
    padding: 14px !important;
    margin: 0 !important;
}

.dg-last-minute-title,
#dg-cart-body .dg-last-minute-title {
    font-size: 10.5px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .07em !important;
    color: #008296 !important;
    margin-bottom: 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.dg-last-minute-grid,
#dg-cart-body .dg-last-minute-grid {
    display: flex !important;
    gap: 10px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding-bottom: 4px !important;
}
.dg-last-minute-grid::-webkit-scrollbar { display: none !important; }

.dg-last-minute-card,
#dg-cart-body .dg-last-minute-card {
    flex: 0 0 130px !important;
    min-width: 130px !important;
    max-width: 140px !important;
    background: #fff !important;
    border: 1px solid #D5D9D9 !important;
    border-radius: 10px !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

.dg-last-minute-card img {
    width: 100% !important;
    height: 80px !important;
    object-fit: contain !important;
    display: block !important;
    background: #F7F8F8 !important;
}

/* ── 6. Price breakdown section ── */
.dg-cart-price-breakdown {
    display: block !important;
    margin: 12px 14px 18px !important;
    background: #fff !important;
    border: 1px solid #D5D9D9 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

.dg-cart-price-rows {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}

.dg-cart-price-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 14px !important;
    border-bottom: 1px solid #F0F1F1 !important;
    font-size: 12.5px !important;
    color: #565959 !important;
    gap: 10px !important;
}
.dg-cart-price-row:last-child {
    border-bottom: none !important;
    background: #F7F8F8 !important;
    padding: 12px 14px !important;
}

.dg-cart-price-lbl    { color: #565959 !important; font-weight: 500 !important; }
.dg-cart-price-val    { font-weight: 600 !important; color: #0F1111 !important; }
.dg-cart-price-val-green { font-weight: 700 !important; color: #067D62 !important; }
.dg-cart-price-val-big {
    font-family: 'Outfit', sans-serif !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #005F6B !important;
}

/* Total row label */
.dg-cart-price-lbl-bold {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #0F1111 !important;
}

/* ── 7. Bag discount row (shown in footer summary) ── */
.dg-cart-discount-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 8px 0 !important;
    border-bottom: none !important;
    font-size: 13px !important;
    color: #565959 !important;
}

/* ── 8. Shipping progress bar ── */
.dg-cart-ship-wrap {
    display: block !important;
    margin: 12px 14px 0 !important;
    background: #fff !important;
    border: 1px solid #D5D9D9 !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
}

.dg-cart-ship-label {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: 11px !important;
    margin-bottom: 8px !important;
}

.dg-ship-unlocked {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    color: #067D62 !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
}

/* ── 9. Donation widget ── */
.dg-donation-wrap {
    display: block !important;
    margin: 12px 14px 0 !important;
    background: #fff !important;
    border: 1.5px solid #D5D9D9 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}
.dg-donation-inner {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 11px 13px !important;
}

/* ── 10. Tip widget ── */
.dg-tip-wrap {
    display: block !important;
    margin: 10px 14px 0 !important;
    background: #fff !important;
    border: 1.5px solid #D5D9D9 !important;
    border-radius: 14px !important;
    padding: 14px 14px 12px !important;
    overflow: visible !important;
}
/* (second pass — redundant block kept for cascade safety) */
.dg-tip-chip {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    overflow: visible !important;
}

/* ── 11. Checkout button ── */
#dg-cart-drawer .dg-cart-checkout-btn,
.dg-cart-drawer .dg-cart-checkout-btn,
.dg-cart-checkout-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    width: 100% !important;
    min-height: 48px !important;
    padding: 14px 20px !important;
    background: #FFB800 !important;
    color: #0F1111 !important;
    border: 1.5px solid #D49A00 !important;
    border-radius: 12px !important;
    font-size: 14.5px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    margin-top: 10px !important;
    margin-bottom: 0 !important;
}

/* ── 12. Mobile: full-width ── */
@media (max-width: 480px) {
    #dg-cart-drawer,
    .dg-cart-drawer {
        width: 100vw !important;
        max-width: 100vw !important;
    }
}


/* ================================================================
   OPTIONAL FEE ROW VISIBILITY — donation/tip must be absent when unset.
   The base .dg-cart-price-row uses !important for flex layout, which can
   override PHP's inline display:none.
================================================================ */
#dg-cart-drawer #dg-donation-price-row[style*="display:none"],
#dg-cart-drawer #dg-donation-price-row[style*="display: none"],
#dg-cart-drawer #dg-tip-price-row[style*="display:none"],
#dg-cart-drawer #dg-tip-price-row[style*="display: none"] {
    display: none !important;
}

/* Strong component reset for AJAX-injected drawer content. */
#dg-cart-drawer .dg-cart-item,
#dg-cart-drawer .dg-cart-price-breakdown,
#dg-cart-drawer .dg-cart-ship-wrap,
#dg-cart-drawer .dg-cart-coupon-row,
#dg-cart-drawer .dg-donation-wrap,
#dg-cart-drawer .dg-tip-wrap {
    box-sizing: border-box !important;
    font-family: Inter, Arial, sans-serif !important;
}
#dg-cart-drawer .dg-cart-item-top {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
}
#dg-cart-drawer .dg-cart-item-img {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 68px !important;
    width: 68px !important;
    min-width: 68px !important;
    height: 68px !important;
    overflow: hidden !important;
    position: relative !important;
    border-radius: 10px !important;
    background: #fff !important;
    border: 1px solid #e1e4e4 !important;
}
#dg-cart-drawer .dg-cart-item-img img,
#dg-cart-drawer .dg-cart-product-image {
    display: block !important;
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center !important;
    visibility: visible !important;
    opacity: 1 !important;
}
#dg-cart-drawer .dg-cart-item-info {
    display: block !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
}
#dg-cart-drawer .dg-cart-item-header,
#dg-cart-drawer .dg-cart-item-price-row,
#dg-cart-drawer .dg-cart-item-meta-strip {
    display: flex !important;
}
#dg-cart-drawer .dg-cart-item-header {
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 8px !important;
}
#dg-cart-drawer .dg-cart-item-name {
    display: block !important;
    color: #0F1111 !important;
    font-family: Outfit, Inter, Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}
#dg-cart-drawer .dg-cart-item-brand {
    display: block !important;
    color: #8F9191 !important;
    font-size: 10.5px !important;
    margin-top: 3px !important;
}
#dg-cart-drawer .dg-cart-item-price-row {
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-top: 8px !important;
}
#dg-cart-drawer .dg-cart-item-price {
    color: #008296 !important;
    font-family: Outfit, Inter, Arial, sans-serif !important;
    font-size: 17px !important;
    font-weight: 800 !important;
}
#dg-cart-drawer .dg-cart-item-reg {
    color: #8F9191 !important;
    font-size: 11px !important;
    text-decoration: line-through !important;
}
#dg-cart-drawer .dg-cart-item-meta-strip {
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
}
#dg-cart-drawer .dg-cart-price-breakdown {
    display: block !important;
}
#dg-cart-drawer .dg-cart-price-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
}
#dg-cart-drawer .dg-cart-price-row > span {
    min-width: 0 !important;
}
#dg-cart-drawer .dg-cart-price-lbl,
#dg-cart-drawer .dg-cart-price-lbl-bold {
    display: block !important;
}
#dg-cart-drawer .dg-cart-price-val,
#dg-cart-drawer .dg-cart-price-val-green,
#dg-cart-drawer .dg-cart-price-val-big {
    display: block !important;
    white-space: nowrap !important;
}


/* ================================================================
   TIP SECTION — collapsed/expanded state (v100.0.5)
   Tip section collapses to a single tappable row when no tip active.
   Expands on click; collapses + returns to collapsed row when removed.
================================================================ */

/* Collapsed row button */
.dg-tip-collapsed-row {
    padding: 0 14px;
}
.dg-tip-collapsed-btn {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    background: #fff !important;
    border: 1px solid #D5D9D9 !important;
    border-radius: 10px !important;
    text-align: left !important;
    cursor: pointer !important;
    color: #0F1111 !important;
}
.dg-tip-collapsed-icon {
    font-size: 17px !important;
    flex-shrink: 0 !important;
}
.dg-tip-collapsed-label {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #0F1111 !important;
    flex-shrink: 0 !important;
}
.dg-tip-collapsed-sub {
    font-size: 10.5px !important;
    color: #8F9191 !important;
    flex: 1 !important;
    min-width: 0 !important;
}
.dg-tip-chevron {
    flex-shrink: 0 !important;
    color: #8F9191 !important;
    transition: transform .2s !important;
}
.dg-tip-collapsed-btn[aria-expanded="true"] .dg-tip-chevron {
    transform: rotate(180deg) !important;
}

/* Expanded area — padding matches rest of cart body */
.dg-tip-expanded-area {
    padding: 0 0 4px !important;
}


/* ════════════════════════════════════════════════════════════════
   EMPTY CART + RECENTLY VIEWED — FINAL ALIGNMENT
   The empty-cart markup is injected by AJAX. Keep its visual layout
   independent of global theme flex/button rules.
════════════════════════════════════════════════════════════════ */
#dg-cart-drawer .dg-cart-empty {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    padding: 34px 22px 22px !important;
    margin: 0 !important;
}
#dg-cart-drawer .dg-cart-empty-icon {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    flex: 0 0 64px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 12px !important;
    padding: 0 !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    float: none !important;
}
#dg-cart-drawer .dg-cart-empty-icon svg {
    display: block !important;
    width: 36px !important;
    height: 36px !important;
    margin: 0 auto !important;
    position: static !important;
    transform: none !important;
}
#dg-cart-drawer .dg-cart-empty h3,
#dg-cart-drawer .dg-cart-empty p,
#dg-cart-drawer .dg-cart-empty .dg-cart-browse-btn,
#dg-cart-drawer .dg-cart-empty .dg-cart-empty-divider,
#dg-cart-drawer .dg-cart-empty .dg-cart-empty-trust {
    width: 100% !important;
}
#dg-cart-drawer .dg-cart-empty h3,
#dg-cart-drawer .dg-cart-empty p {
    text-align: center !important;
}

/* Recently Viewed is part of the AJAX cart response, so explicitly style
   every element here instead of relying on the large main stylesheet. */
#dg-cart-drawer .dg-cart-recent {
    display: block !important;
    width: 100% !important;
    margin: 2px 0 0 !important;
    padding: 12px 14px 18px !important;
    border-top: 1px solid #D5D9D9 !important;
    box-sizing: border-box !important;
}
#dg-cart-drawer .dg-cart-recent-title {
    display: block !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    text-align: left !important;
    font-size: 10px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    color: #8F9191 !important;
}
#dg-cart-drawer .dg-cart-recent-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
}
#dg-cart-drawer .dg-cart-recent-item {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 58px !important;
    gap: 10px !important;
    padding: 8px 10px !important;
    background: #F7F8F8 !important;
    border: 1px solid #D5D9D9 !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
}
#dg-cart-drawer .dg-cart-recent-item img {
    display: block !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    flex: 0 0 40px !important;
    object-fit: contain !important;
    object-position: center !important;
    border-radius: 6px !important;
    background: #fff !important;
}
#dg-cart-drawer .dg-cart-recent-info {
    display: flex !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 2px !important;
}
#dg-cart-drawer .dg-cart-recent-name {
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
    color: #0F1111 !important;
}
#dg-cart-drawer .dg-cart-recent-price {
    display: block !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    color: #008296 !important;
}
#dg-cart-drawer .dg-cart-recent-atc {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 32px !important;
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #008296 !important;
    color: #FFFFFF !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    z-index: 5 !important;
    overflow: visible !important;
    cursor: pointer !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.14) !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}
#dg-cart-drawer .dg-cart-recent-atc svg {
    display: block !important;
    width: 14px !important;
    height: 14px !important;
    margin: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    stroke: currentColor !important;
    color: inherit !important;
    position: static !important;
}
#dg-cart-drawer .dg-cart-recent-atc:hover,
#dg-cart-drawer .dg-cart-recent-atc:focus-visible {
    background: #005F6B !important;
    color: #FFFFFF !important;
}