/**
 * Side mini-cart — Discount Pet Food
 *
 * Elementor ships an unstyled panel: raw grid, default grey buttons, no header,
 * no hierarchy. This treats it as a real checkout surface — the last thing a
 * customer sees before they commit.
 *
 * HOW THIS FILE OVERRIDES ELEMENTOR
 *
 * Elementor Pro's widget-woocommerce-menu-cart.min.css loads *after* the child
 * theme, so matching a plugin rule on specificity alone loses. Two mechanisms
 * avoid an !important storm:
 *
 *  1. Custom properties. Nearly every value in that stylesheet is a
 *     var(--name, fallback) — colours, dividers, paddings, button backgrounds,
 *     even the footer's grid-template-columns (--cart-footer-layout). Elementor
 *     declares its own values on the *widget root*
 *     (.elementor-940570 .elementor-element-2a3511b, specificity 0,3,0), so
 *     declaring the same properties on .elementor-menu-cart__main — a
 *     descendant — wins by inheritance distance, with no specificity contest at
 *     all. That is the bulk of the work and it survives Elementor updates.
 *
 *  2. For the few things with no variable (panel width, the title bar, type,
 *     focus rings, button order) real rules scoped under
 *     .elementor-menu-cart__main, which lands at (0,2,0)/(0,3,0) and clears
 *     every plugin rule it needs to.
 *
 * Deliberately NOT overridden: the
 * `body.elementor-default .elementor-widget-...:not(.elementor-menu-cart--shown)`
 * rules that hide and slide the panel. Those are the open/close mechanism.
 *
 * Browser support: no :has(), no container queries, no backdrop-filter.
 * :focus-visible is paired with :focus for older Safari.
 */

/* ------------------------------------------------------------ scrim */

/* (0,2,0) to clear the plugin's (0,1,0); the :not(--shown) hide rule above is
   (0,4,0) and still wins when closed, which is what makes the fade work. */
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__container {
	background-color: rgba(0, 25, 15, 0.55);
}

/* ------------------------------------------------------------ panel */

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main {
	/* On a 390px phone min() collapses to the full viewport. */
	width: min(390px, 100vw);
	max-width: 100%;
	box-shadow: -18px 0 50px -20px rgba(0, 30, 18, 0.5);
}

/*
 * Every custom property the panel needs, declared in one place.
 *
 * This element is a child of the widget root, so these beat Elementor's
 * per-element declarations through inheritance rather than specificity.
 */
.elementor-menu-cart__main {
	/* Padding moves to the individual regions so the title bar and the
	   subtotal band can run edge to edge. */
	--cart-padding: 0;
	--cart-background-color: #fff;
	--cart-border-style: none;

	/* Hairlines, matched to the header's --dpf-line. */
	--divider-color: var(--dpf-line);
	--divider-style: solid;
	--divider-width: 1px;
	--product-divider-gap: 0px;

	--product-price-color: var(--dpf-muted);
	--product-variations-color: var(--dpf-muted);

	/* Visual size of the remove control; the tap target is widened below. */
	--remove-item-button-size: 28px;
	--remove-item-button-color: #c2cfc7;
	--remove-item-button-hover-color: #b3261e;

	--subtotal-divider-color: var(--dpf-line);
	--subtotal-divider-style: solid;
	--subtotal-divider-top-width: 1px;
	--subtotal-divider-bottom-width: 0;
	--menu-cart-subtotal-color: var(--dpf-ink);

	/* One button per row. Elementor sets 1fr 1fr on the widget root. */
	--cart-footer-layout: 1fr;
	--space-between-buttons: 10px;
	--cart-footer-buttons-border-radius: 999px;
	--view-cart-button-padding: 0 20px;
	--checkout-button-padding: 0 20px;
	--checkout-button-background-color: var(--dpf-orange);
	--checkout-button-hover-background-color: var(--dpf-orange-dark);
	--checkout-button-text-color: #fff;
	--checkout-button-hover-text-color: #fff;
	--view-cart-button-background-color: #fff;
	--view-cart-button-hover-background-color: #eef4f0;
	--view-cart-button-text-color: var(--dpf-green);
	--view-cart-button-hover-text-color: var(--dpf-green);

	/* The X is drawn from two pseudo-element bars sized off this. */
	--cart-close-icon-size: 44px;
	--cart-close-button-color: #fff;
	--cart-close-button-hover-color: var(--dpf-yellow);

	--empty-message-color: var(--dpf-muted);
	--empty-message-alignment: center;

	/* The generic fallback matters: `Montserrat` on its own drops to the
	   browser default serif whenever the webfont fails to load. */
	font-family: "Montserrat", Sans-serif;
	font-size: 15px;
	color: var(--dpf-ink);
}

/* Title bar, so the panel announces itself. ::before on a flex column becomes
   the first flex item, ahead of the close button and the content. */
.elementor-menu-cart__main::before {
	content: "Your basket";
	flex: none;
	padding: 18px 20px;
	background: var(--dpf-green);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
}

/* ------------------------------------------------------- close button */

/* Lifted out of the flex flow and parked on the title bar. */
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__close-button {
	position: absolute;
	top: 6px;
	/* Logical, to stay correct if the panel is ever flipped to the left. */
	inset-inline-end: 8px;
	margin: 0;
	z-index: 2;
}

/* The button is 44px for the tap target, but a 44px-wide X is a brand. Pin the
   bars to 18px about the centre instead of the plugin's width:100%. */
.elementor-menu-cart__main .elementor-menu-cart__close-button::before,
.elementor-menu-cart__main .elementor-menu-cart__close-button::after {
	left: 50%;
	width: 18px;
	height: 2px;
	margin-left: -9px;
}

/* ------------------------------------------------------- content box */

/* The plugin sets height:100%, which ignores the title bar and overflows the
   panel. Let it flex instead, and allow it to shrink below its content so the
   product list is what scrolls. */
.elementor-menu-cart__main .widget_shopping_cart_content {
	flex: 1 1 auto;
	height: auto;
	min-height: 0;
}

/*
 * Empty state.
 *
 * Verified by opening the panel with an empty basket: Elementor does show it,
 * and WooCommerce's own .woocommerce-mini-cart__empty-message is present with
 * the text "No products in the cart." So styling that element is all that is
 * needed.
 *
 * An earlier version also carried a full-bleed ::before message plus opaque
 * backgrounds and z-index on four sibling regions to cover it, written when
 * the panel appeared not to open while empty. That cost four regions that could
 * never stop being opaque in order to insure against a state the real message
 * already handles, and it has been removed.
 *
 * Note the plugin's own wording stays in the accessibility tree — font-size:0
 * hides it visually but screen readers still read it. Both strings say the same
 * thing, so this is left alone; replacing the string through a gettext filter
 * would be the tidier fix if it ever matters.
 */
/* Show one wording rather than two: blank the plugin's text and reuse ours. */
.elementor-menu-cart__main .woocommerce-mini-cart__empty-message {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: #fff;
	font-size: 0;
}

.elementor-menu-cart__main .woocommerce-mini-cart__empty-message::after {
	content: "Your basket is empty";
	color: var(--dpf-muted);
	font-size: 15px;
	text-align: center;
}

/* --------------------------------------------------------- item list */

.elementor-menu-cart__main .elementor-menu-cart__products {
	flex: 1 1 auto;
	/* The plugin pins this to calc(100vh - 250px), which is unrelated to the
	   real header and footer heights. Flex already sizes it. */
	max-height: none;
	min-height: 0;
	padding: 0 20px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	background: #fff;
}

.elementor-menu-cart__main .elementor-menu-cart__product {
	/* Fixed thumbnail column rather than the plugin's 28%, so the image box is
	   the same size whatever the panel width. 44px of right padding keeps the
	   text clear of the remove control. */
	grid-template-columns: 68px minmax(0, 1fr);
	grid-template-rows: auto auto;
	padding: 16px 44px 16px 0;
}

.elementor-menu-cart__main .elementor-menu-cart__product-image {
	grid-row: 1 / 3;
	width: 68px;
}

/* The box is sized here, not by the image, because uploads can be missing and
   a broken image must not collapse the row. */
.elementor-menu-cart__main .elementor-menu-cart__product-image a,
.elementor-menu-cart__main .elementor-menu-cart__product-image img {
	display: block;
	width: 68px;
	height: 68px;
	border-radius: 8px;
}

.elementor-menu-cart__main .elementor-menu-cart__product-image img {
	object-fit: cover;
	border: 1px solid var(--dpf-line);
	background: #f7faf8;
}

.elementor-menu-cart__main .elementor-menu-cart__product-name {
	align-self: end;
	padding-inline-start: 14px;
	font-size: 14.5px;
	line-height: 1.35;
}

.elementor-menu-cart__main .elementor-menu-cart__product-name a {
	color: var(--dpf-ink);
	font-weight: 600;
	text-decoration: none;
}

.elementor-menu-cart__main .elementor-menu-cart__product-name a:hover {
	color: var(--dpf-green-mid);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.elementor-menu-cart__main .elementor-menu-cart__product-price {
	align-self: start;
	padding-inline-start: 14px;
	padding-top: 5px;
	font-size: 14px;
	font-weight: 400;
}

/*
 * (0,6,0). Elementor writes the quantity colour at
 * `.elementor-940570 .elementor-element.elementor-element-2a3511b
 *  .elementor-menu-cart__product-price .product-quantity` — five classes,
 * (0,5,0) — and loads after this file, so a (0,5,0) rule here ties and loses
 * on order. Walking the full ancestor chain buys the extra class and keeps
 * this out of !important territory. Measured, not assumed.
 */
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .elementor-menu-cart__products .elementor-menu-cart__product .elementor-menu-cart__product-price .product-quantity {
	color: var(--dpf-muted);
	font-weight: 500;
}

.elementor-menu-cart__main .elementor-menu-cart__product-price .woocommerce-Price-amount {
	color: var(--dpf-green);
	font-weight: 700;
}

/* ----------------------------------------------------- remove control */

/* Centred on the row rather than the plugin's bottom:20px. */
.elementor-menu-cart__main .elementor-menu-cart__product-remove {
	top: 50%;
	bottom: auto;
	transform: translateY(-50%);
	border-radius: 50%;
	transition: background-color var(--dpf-speed) ease, border-color var(--dpf-speed) ease;
}

.elementor-menu-cart__main .elementor-menu-cart__product-remove:hover {
	background: #fdeaea;
}

/* The anchor is an opacity:0 overlay — the visible X is the wrapper's two
   pseudo-elements. Spreading the overlay past the 28px circle gives a 44px
   target without a 44px blob on screen. overflow:hidden on the wrapper would
   clip it, so that is released here too. */
.elementor-menu-cart__main .elementor-menu-cart__product-remove {
	overflow: visible;
}

.elementor-menu-cart__main .elementor-menu-cart__product-remove > a.remove_from_cart_button {
	/* -9px, not -8px: the inset resolves against the content box inside the
	   circle's 1px border, so 26 + 2*9 = 44px. */
	inset: -9px;
	width: auto;
	height: auto;
	border-radius: 50%;
}

/* ------------------------------------------------------------ subtotal */

.elementor-menu-cart__main .elementor-menu-cart__subtotal {
	flex: none;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 20px;
	background: #f4f8f5;
	font-size: 14px;
	font-weight: 700;
	text-align: start;
}

.elementor-menu-cart__main .elementor-menu-cart__subtotal .woocommerce-Price-amount {
	color: var(--dpf-green);
	font-size: 22px;
	font-weight: 800;
	white-space: nowrap;
}

/* -------------------------------------------------------------- footer */

.elementor-menu-cart__main .elementor-menu-cart__footer-buttons {
	flex: none;
	padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px));
	background: #fff;
	border-top: 1px solid var(--dpf-line);
	font-size: 15px;
}

/* Collection-only is a real constraint for this business; say so before the
   commitment, not after. order:-2 puts it above the reordered Checkout. */
.elementor-menu-cart__main .elementor-menu-cart__footer-buttons::before {
	content: "Collection only — we do not deliver";
	order: -2;
	padding-bottom: 4px;
	color: var(--dpf-muted);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
}

.elementor-menu-cart__main .elementor-menu-cart__footer-buttons .elementor-button {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	height: auto;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
}

/* Checkout is the one action that matters, so it leads. There is no per-widget
   order control in Elementor — this has to be CSS. */
.elementor-menu-cart__main .elementor-menu-cart__footer-buttons .elementor-button--checkout {
	order: -1;
	border: 0;
}

.elementor-menu-cart__main .elementor-menu-cart__footer-buttons .elementor-button--view-cart {
	border: 2px solid var(--dpf-green);
}

/* --------------------------------------------------------------- focus */

.elementor-menu-cart__main a:focus,
.elementor-menu-cart__main .elementor-menu-cart__close-button:focus,
.elementor-menu-cart__main a:focus-visible,
.elementor-menu-cart__main .elementor-menu-cart__close-button:focus-visible {
	outline: 3px solid var(--dpf-green-mid);
	outline-offset: -3px;
}

.elementor-menu-cart__main a:focus:not(:focus-visible),
.elementor-menu-cart__main .elementor-menu-cart__close-button:focus:not(:focus-visible) {
	outline: 0;
}

/* The remove anchor is invisible, so its own ring would be too. Ring the
   circle instead. */
.elementor-menu-cart__main .elementor-menu-cart__product-remove > a.remove_from_cart_button:focus,
.elementor-menu-cart__main .elementor-menu-cart__product-remove > a.remove_from_cart_button:focus-visible {
	outline: 3px solid var(--dpf-green-mid);
	outline-offset: -11px;
}

/* ---------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
	.elementor-menu-cart__container,
	.elementor-menu-cart__main,
	.elementor-menu-cart__main * {
		transition: none !important;
	}
}