/* Rogue re-brand for the MP13 Cart drawer (theme-side override — no plugin edits).
   The plugin styles everything via --mp13c-c-* CSS vars, so remapping them re-skins
   the whole drawer to the dark Rogue palette. */
/* Remap the vars at :root (that's where the plugin defines them) so the whole
   drawer re-skins. Do NOT paint .mp13-cart itself — it's the FULLSCREEN inset:0
   container; painting it filled the empty left side (green/charcoal). */
:root {
	--mp13c-c-bg:     #121212;   /* drawer surface — charcoal */
	--mp13c-c-ink:    #FFFFFF;   /* primary text */
	--mp13c-c-ink-2:  #B8B8B8;   /* secondary text */
	--mp13c-c-accent: #A9CF3F;   /* volt green — buttons/accents */
	--mp13c-c-sage:   #A9CF3F;   /* success/progress → volt */
	--mp13c-c-brick:  #DB1E79;   /* remove/alert → pink */
	--mp13c-c-shadow: rgba(0, 0, 0, 0.5);
}

/* FONT: the plugin uses Yammy --ff-body/--ff-display. Force Montserrat everywhere
   in the cart so type matches the rest of the site. */
.mp13-cart,
.mp13-cart * { font-family: "Montserrat", sans-serif !important; }

/* Paint ONLY the drawer panel, never the fullscreen wrapper. */
.mp13-cart__drawer {
	background: #121212 !important;
	color: #fff !important;
	border-left: 1px solid rgba(169,207,63,0.25);
}

/* Reward / points badge — volt star + text (plugin has an inline Yammy amber
   gradient + rgba fills; override them). */
.mp13-cart__reward {
	background: rgba(169,207,63,0.10) !important;
	border: 1px solid rgba(169,207,63,0.35) !important;
	color: #fff !important;
	box-shadow: none !important;
}
/* icon holds the Rogue green logo mark (rg-points-mascot) — transparent holder so the
   mark reads as itself, not sitting on a green disc. */
.mp13-cart__reward-icon { background: transparent !important; color: #000 !important; padding: 0 !important; }
.mp13-cart__reward-icon .rg-points-mascot { width: 1.15em !important; height: 1.15em !important; }
.mp13-cart__reward-num { background: #A9CF3F !important; color: #000 !important; }
.mp13-cart__reward-text { color: #fff !important; }
/* fee / bulk pills also use the old Yammy sage rgba(175,205,133) — retint volt */
.mp13-cart__fee, .mp13-cart__bulk-pill {
	background: rgba(169,207,63,0.14) !important;
	color: #fff !important;
}

/* The plugin dims the whole body to opacity .55 during AJAX (is-loading) AND sets
   `pointer-events: none` on it. The opacity was already neutralised here; the
   pointer-events was not — so any time `is-loading` lingered (it is added on open and
   on every REST call) the scroll container could not receive touch or wheel events at
   all. THAT is why the drawer would not scroll. Reset both. */
.mp13-cart.is-loading .mp13-cart__body {
	opacity: 1 !important;
	pointer-events: auto !important;
}

/* KILL THE GREYS: the plugin fills item cards, footer & related panels with
   hsla(0,0%,100%,.55/.35) (white-alpha → reads GREY on dark). Repaint them dark. */
.mp13-cart__item,
.mp13-cart__related-toggle {
	background: rgba(255,255,255,0.05) !important;   /* subtle dark card, not grey */
	border: 1px solid rgba(255,255,255,0.08) !important;
}
.mp13-cart__foot,
.mp13-cart__related {
	background: #121212 !important;                  /* solid charcoal, no grey wash */
	border-top: 1px solid rgba(255,255,255,0.08) !important;
}
.mp13-cart__thumb, .mp13-cart__related-thumb { background: rgba(255,255,255,0.06) !important; }

/* Cart text on dark */
.mp13-cart__line, .mp13-cart__row { border-color: rgba(255,255,255,0.08) !important; }
.mp13-cart__item-name, .mp13-cart__title, .mp13-cart h2, .mp13-cart h3 { color: #fff !important; }
.mp13-cart__item-price, .mp13-cart__subtotal, .mp13-cart__total { color: #A9CF3F !important; }
.mp13-cart__muted, .mp13-cart small { color: #B8B8B8 !important; }

/* Quantity steppers */
.mp13-cart__qty, .mp13-cart__qty-num { color: #fff !important; }
.mp13-cart__qty button, [data-mp13-cart-qty-up], [data-mp13-cart-qty-down] {
	background: rgba(255,255,255,0.08) !important; color: #fff !important; border: 0 !important;
}
.mp13-cart__qty button:hover { background: var(--rg-volt) !important; color: #000 !important; }

/* Remove / close controls */
[data-mp13-cart-remove], .mp13-cart__remove { color: #DB1E79 !important; }
[data-mp13-cart-close], .mp13-cart__close {
	color: #fff !important; background: rgba(255,255,255,0.08) !important;
}
[data-mp13-cart-close]:hover { background: var(--rg-volt) !important; color: #000 !important; }

/* Free-shipping progress: VIOLET track (back), VOLT fill. */
.mp13-cart__shipping-bar,
.mp13-cart__progress, .mp13-cart__bar-track {
	background: #7B4AA8 !important;                 /* purple back */
}
.mp13-cart__shipping-fill,
.mp13-cart__bar, .mp13-cart__bar-fill, .mp13-cart__progress-fill {
	background: #A9CF3F !important;                 /* volt fill */
}
/* shipping message text → violet; "free shipping" span keeps volt for emphasis */
.mp13-cart__shipping-msg { color: #7B4AA8 !important; }
.mp13-cart__shipping-msg span { color: #A9CF3F !important; }
.mp13-cart__shipping-msg--unlocked { color: #A9CF3F !important; }

/* Checkout / view-cart buttons → volt pill; PURPLE on hover */
.mp13-cart__checkout, .mp13-cart__cta, .mp13-cart a.button, .mp13-cart .checkout-button {
	background: var(--rg-volt) !important; color: #000 !important;
	font-weight: 800 !important; text-transform: uppercase; letter-spacing: 0.02em;
	border-radius: 999px !important; border: 0 !important;
	transition: background 240ms ease, color 240ms ease !important;
}
.mp13-cart__checkout:hover, .mp13-cart__cta:hover,
.mp13-cart a.button:hover, .mp13-cart .checkout-button:hover {
	background: #7B4AA8 !important; color: #fff !important;   /* brand violet */
}
.mp13-cart__view-cart, .mp13-cart__secondary {
	background: transparent !important; color: var(--rg-volt) !important;
	border: 1px solid rgba(169,207,63,0.5) !important; border-radius: 999px !important;
}

/* Scrim / backdrop — force a neutral dark tint (was tahini-brown; a stray volt
   fill showed on the empty left side). High specificity to beat the plugin. */
.mp13-cart .mp13-cart__scrim,
.mp13-cart__scrim, .mp13-cart-backdrop, .mp13-cart__backdrop, [data-mp13-cart-backdrop] {
	background: rgba(0, 0, 0, 0.6) !important;
	background-color: rgba(0, 0, 0, 0.6) !important;
	background-image: none !important;
}
/* Keep the custom cursor working over the cart; just don't let its glow read as a
   solid wash — the dark scrim above handles the backdrop. (cursor left visible) */

/* Remove the empty-cart mascot / fallback icon — just text + CTA. */
.mp13-cart__empty-mascot, .mp13-cart__empty > svg { display: none !important; }

/* Empty-cart "Go to shop" now uses our .rg-btn--grad (magnetic + arrow, from the
   homepage CTAs). Just ensure the plugin's own styles don't fight it. */
.mp13-cart__empty-cta.rg-btn--grad { border: 0 !important; box-shadow: 0 1vh 3vh rgba(219,30,121,0.35) !important; }
.mp13-cart__empty-cta.rg-btn--grad:hover { background: linear-gradient(120deg, var(--rg-pink) 0%, var(--rg-violet) 100%) !important; }




/* Clip the overlay wrappers. Each drawer parks at translateX(100%) — a full panel width
   beyond the right edge — and neither plugin clips its wrapper, so that off-screen box
   widened the document and gave the page a horizontal scrollbar whenever a drawer was
   opened (and made the panel look half-open as the page shifted under it).
   `clip`, not `hidden`: hidden turns these into scroll containers and would fight the
   drawer's own vertical scrolling. */
.mp13-cart,
.mp13-search {
	overflow: clip;
}