/* Accent colour: JS copies it from the checkout button; falls back to the Elementor global accent. */
:root {
	--qcqs-c: var(--qcqs-accent, var(--e-global-color-accent, currentColor));
}

.qcqs-sr {
	position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Stepper block ---------- */
.qcqs { margin: 4px 0 0; font: inherit; color: inherit; text-align: left; width: 100%; }
.qcqs__unit { margin: 0 0 6px; font: inherit; }
.qcqs__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.qcqs__total { margin-left: auto; font-weight: 600; white-space: nowrap; }
.qcqs__max, .qcqs__error { margin: 6px 0 0; font-size: .85em; line-height: 1.3; }
.qcqs__max[hidden], .qcqs__error[hidden] { display: none; }
.qcqs__error { color: inherit; font-weight: 600; }

/* ---------- Quantity pill (your design), scoped to the Quick Cart ---------- */
.qcqs .quantity-wrap {
	width: fit-content;            /* the product-card version uses 49%, too narrow inside the drawer */
	min-width: 120px;
	max-height: 60px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-evenly;
	border-radius: 50px;
	background: var(--Brand-Secondary-Orange-100, #FAF9F7);
}
.qcqs .quantity-wrap button.qty-btn {
	line-height: unset;
	padding: 13px;
	color: var(--Greyscale-Grey-900, #181A1B);
	text-align: center;
	font-feature-settings: 'liga' off, 'clig' off;
	font-family: Sora;
	font-size: 18px;
	font-style: normal;
	font-weight: 700;
	border: unset;
	background: transparent;       /* stops theme button hover colours from leaking in */
	box-shadow: none;
	cursor: pointer;
}
.qcqs .quantity-wrap button.qty-btn:hover,
.qcqs .quantity-wrap button.qty-btn:active,
.qcqs .quantity-wrap button.qty-btn:focus { background: transparent; color: var(--Greyscale-Grey-900, #181A1B); }
.qcqs .quantity-wrap button.qty-btn:hover:not(:disabled) { opacity: .7; }
/* Hover colours (your .quantity-wrap.both rule) */
.qcqs .quantity-wrap.both button.minus:hover:not(:disabled),
.qcqs .quantity-wrap.both button.plus:hover:not(:disabled) {
	background-color: #495F48;
	border-color: #495F48;
	color: #fff;                   /* keeps the - / + readable on the dark green */
	opacity: 1;
}
.qcqs .quantity-wrap input.input-qty {
	max-width: 52px;
	color: var(--Greyscale-Grey-900, #181A1B);
	border: unset;
	text-align: center;
	font-feature-settings: 'liga' off, 'clig' off;
	font-family: Sora;
	font-size: 18px;
	font-style: normal;
	font-weight: 600;
	height: 34px;
	background: unset;
	padding: unset;
	box-shadow: none;
	-moz-appearance: textfield;
	appearance: textfield;
}
.qcqs .quantity-wrap input.input-qty::-webkit-outer-spin-button,
.qcqs .quantity-wrap input.input-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qcqs .qty-btn:disabled { opacity: .35; cursor: not-allowed; }
.qcqs .qty-btn:focus-visible,
.qcqs .input-qty:focus-visible { outline: 2px solid var(--qcqs-c); outline-offset: 2px; }

/* ---------- Loading state ---------- */
.qcqs-loading { opacity: .5; pointer-events: none; transition: opacity .15s ease; }

/* ---------- Product row layout (Elementor Menu Cart) ----------
   image | name ................ trash
         | qty ................. line total
   Selectors are deliberately specific + !important: Elementor's widget CSS would otherwise win. */
.elementor-menu-cart__products .elementor-menu-cart__product,
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product {
	display: grid !important;
	grid-template-columns: var(--qcqs-img, var(--product-image-width, 80px)) minmax(0, 1fr) 32px !important;
	grid-template-rows: auto auto !important;
	grid-template-areas: "image name remove" "image price price" !important;
	column-gap: 12px !important; row-gap: 6px !important; align-items: start !important;
	position: relative;
}
.elementor-menu-cart__products .elementor-menu-cart__product > * { min-width: 0; box-sizing: border-box; }

.elementor-menu-cart__products .elementor-menu-cart__product-image {
	grid-area: image !important; grid-column: 1 !important; grid-row: 1 / span 2 !important;
	width: 100% !important; margin: 0 !important; padding: 0 !important; align-self: start !important;
}
.elementor-menu-cart__products .elementor-menu-cart__product-name {
	grid-area: name !important; grid-column: 2 !important; grid-row: 1 !important;
	width: auto !important; margin: 0 !important; padding: 0 !important; align-self: center !important;
}
.elementor-menu-cart__products .elementor-menu-cart__product-price {
	grid-area: price !important; grid-column: 2 / -1 !important; grid-row: 2 !important;   /* spans name + trash columns */
	display: block !important; width: 100% !important; max-width: none !important;
	margin: 0 !important; padding: 0 !important; text-align: left !important; align-self: start !important;
}
.elementor-menu-cart__products .elementor-menu-cart__product-remove {
	grid-area: remove !important; grid-column: 3 !important; grid-row: 1 !important;
	position: relative !important; inset: auto !important; top: auto !important; right: auto !important; left: auto !important;
	transform: none !important; margin: 0 !important; padding: 0 !important;
	width: 32px !important; height: 32px !important; min-width: 30px; min-height: 30px;
	align-self: center !important; justify-self: end !important;
}

/* ---------- Trash icon (replaces the X) ----------
   Elementor draws the X on the remove container; we draw the trash there instead.
   The two links inside stay as invisible click areas, so removing keeps working as before. */
.elementor-menu-cart__product-remove { color: var(--qcqs-c); }
.elementor-menu-cart__product-remove::after { display: none !important; }
.elementor-menu-cart__product-remove::before {
	content: '' !important; display: block !important; position: absolute !important;
	top: 50% !important; left: 50% !important; width: 20px !important; height: 20px !important;
	margin: 0 !important; border: 0 !important; transform: translate(-50%, -50%) !important;
	background: currentColor !important;
	-webkit-mask: var(--qcqs-trash) center / contain no-repeat; mask: var(--qcqs-trash) center / contain no-repeat;
}
.elementor-menu-cart__product-remove a {
	position: absolute !important; top: 0; left: 0; width: 100%; height: 100%;
	display: block; font-size: 0; background: transparent !important; border-radius: 50%;
}
.elementor-menu-cart__product-remove a:focus-visible { outline: 2px solid var(--qcqs-c); outline-offset: 2px; }
.elementor-menu-cart__product-remove:hover { opacity: .75; }

:root {
	--qcqs-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'/%3E%3Cpath d='M10 11v6M14 11v6'/%3E%3Cpath d='M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2'/%3E%3C/svg%3E");
}

.elementor-menu-cart__product{
    padding-inline-end: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
	.qcqs-loading { transition: none; }
}

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
	.elementor-menu-cart__products .elementor-menu-cart__product,
	.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product {
		grid-template-columns: var(--qcqs-img-m, var(--product-image-width, 60px)) minmax(0, 1fr) 30px !important;
		column-gap: 10px !important;
	}
	.elementor-menu-cart__products .elementor-menu-cart__product-remove { width: 30px !important; height: 30px !important; }
	.elementor-menu-cart__product-remove::before { width: 18px !important; height: 18px !important; }

	.qcqs__row { gap: 6px 8px; }
	.qcqs__total { font-size: .95em; }

	.qcqs .quantity-wrap { min-width: 0; width: fit-content; }
	.qcqs .quantity-wrap button.qty-btn {
		padding: 8px 11px; font-size: 16px; min-width: 30px; min-height: 30px;
	}
	.qcqs .quantity-wrap input.input-qty { max-width: 34px; font-size: 16px; height: 30px; }
}

.qcqs .quantity-wrap button.qty-btn.plus{
    border-radius: 0px 50px 50px 0px;
}

.qcqs .quantity-wrap button.qty-btn.minus{
    border-radius: 50px 0px 0px 50px;
}