/* Custom AJAX mini-cart — spicefair-child */
:root {
	--spice-mc-accent: #db7256;
	--spice-mc-accent-dark: #c85f3f;
	--spice-mc-line: #ededed;
	--spice-mc-ink: #2b2b2b;
	--spice-mc-muted: #9a9a9a;
}

.spice-mc-overlay {
	position: fixed; inset: 0; background: rgba(0,0,0,.4);
	z-index: 99998; opacity: 0; transition: opacity .25s ease;
}
.spice-mc-overlay:not([hidden]) { opacity: 1; }

.spice-mc-drawer {
	position: fixed; top: 0; right: 0; height: 100%; width: 410px; max-width: 92vw;
	background: #fff; z-index: 99999; display: flex; flex-direction: column;
	transform: translateX(100%); transition: transform .32s cubic-bezier(.4,0,.2,1);
	box-shadow: -8px 0 34px rgba(0,0,0,.16); will-change: transform;
	font-family: inherit;
}
.spice-mc-drawer.is-open { transform: translateX(0); }
body.spice-mc-lock { overflow: hidden; }

/* header */
.spice-mc-head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 18px 22px; border-bottom: 1px solid var(--spice-mc-line); flex: 0 0 auto;
}
.spice-mc-title { font-size: 17px; font-weight: 800; color: var(--spice-mc-ink); text-transform: uppercase; letter-spacing: .04em; }
.spice-mc-close { background: none; border: 0; font-size: 30px; line-height: 1; cursor: pointer; color: #999; padding: 0 4px; transition: color .15s; }
.spice-mc-close:hover { color: var(--spice-mc-accent); }

/* scroll body */
.spice-mc-scroll { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; }
.spice-mc-contents { display: flex; flex-direction: column; min-height: 100%; }

/* items */
.spice-mc-items { list-style: none; margin: 0; padding: 0; flex: 1 0 auto; }
.spice-mc-item {
	display: grid; grid-template-columns: 64px 1fr auto; gap: 16px; align-items: start;
	padding: 18px 22px; border-bottom: 1px solid var(--spice-mc-line); position: relative;
	transition: opacity .15s;
}
.spice-mc-item.is-loading { opacity: .45; pointer-events: none; }
.spice-mc-thumb { display: block; }
.spice-mc-thumb img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; display: block; }
.spice-mc-info { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.spice-mc-name { color: var(--spice-mc-ink); font-weight: 700; font-size: 15px; line-height: 1.3; text-decoration: none; }
.spice-mc-name:hover { color: var(--spice-mc-accent); }
.spice-mc-price { color: var(--spice-mc-accent); font-weight: 700; font-size: 16px; }
.spice-mc-price del { color: var(--spice-mc-muted); font-weight: 400; font-size: 13px; margin-right: 5px; }
.spice-mc-price ins { text-decoration: none; }

/* qty pill (smaller, editable) */
.spice-mc-qty { display: inline-flex; align-items: center; background: var(--spice-mc-accent); border-radius: 999px; padding: 2px; align-self: flex-start; }
.spice-mc-qty button {
	flex: 0 0 auto; box-sizing: border-box;
	width: 26px; min-width: 26px; max-width: 26px; height: 26px;
	padding: 0; margin: 0; border: 0; background: transparent; color: #fff;
	font-size: 18px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
	border-radius: 999px; transition: background .15s;
}
.spice-mc-qty button:hover { background: rgba(255,255,255,.22); }
.spice-mc-qty-box {
	display: inline-flex; align-items: center; justify-content: center; gap: 1px;
	background: #fff; border-radius: 5px; margin: 0 2px; height: 26px; padding: 0 7px;
}
.spice-mc-qty-val {
	width: 20px; box-sizing: content-box; border: 0; background: transparent; text-align: center;
	font-size: 12px; font-weight: 600; color: var(--spice-mc-ink); padding: 0; margin: 0;
	line-height: 26px; -moz-appearance: textfield; appearance: textfield; box-shadow: none;
}
/* on focus: no dark border/outline/background from theme input styles */
.spice-mc-qty-val:focus, .spice-mc-qty-val:focus-visible {
	outline: none; border: 0; background: transparent; box-shadow: none; color: var(--spice-mc-ink);
}
.spice-mc-qty-val::-webkit-outer-spin-button, .spice-mc-qty-val::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.spice-mc-qty-unit { font-size: 11px; color: var(--spice-mc-muted); font-weight: 500; }

/* remove */
.spice-mc-remove,
.spice-mc-remove:hover, .spice-mc-remove:focus, .spice-mc-remove:active {
	background: none !important; background-color: transparent !important; border: 0 !important;
	box-shadow: none !important; outline: none !important;
}
.spice-mc-remove { padding: 2px; color: #c4c4c4; cursor: pointer; line-height: 0; transition: color .15s; }
.spice-mc-remove:hover { color: var(--spice-mc-accent) !important; }

.spice-mc-empty { padding: 60px 22px; text-align: center; color: var(--spice-mc-muted); font-size: 15px; flex: 1 0 auto; }

/* footer */
.spice-mc-footer { padding: 20px 22px calc(20px + env(safe-area-inset-bottom)); border-top: 1px solid var(--spice-mc-line); background: #fff; flex: 0 0 auto; position: sticky; bottom: 0; }
.spice-mc-total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; }
.spice-mc-total span { font-size: 17px; font-weight: 800; text-transform: uppercase; color: var(--spice-mc-accent); letter-spacing: .02em; }
.spice-mc-total-val { font-size: 22px; font-weight: 800; color: var(--spice-mc-accent); }
.spice-mc-total-val .woocommerce-Price-amount { font-weight: 800; }
.spice-mc-btn {
	display: block; width: 100% !important; max-width: 100%; box-sizing: border-box !important;
	text-align: center; padding: 11px 16px !important; border-radius: 999px;
	font-weight: 700; text-decoration: none; text-transform: uppercase; font-size: 12.5px;
	letter-spacing: .03em; border: 0; cursor: pointer; margin: 0 0 8px !important;
	background: var(--spice-mc-accent); color: #fff; transition: background .15s; font-family: inherit;
}
.spice-mc-btn:last-child { margin-bottom: 0; }
.spice-mc-btn:hover { background: var(--spice-mc-accent-dark); color: #fff; }
.spice-mc-btn-continue { background: #f4ede9; color: var(--spice-mc-ink); }
.spice-mc-btn-continue:hover { background: #ece2db; color: var(--spice-mc-ink); }

.single_add_to_cart_button.loading { opacity: .7; cursor: progress; }

@media (max-width: 480px) { .spice-mc-drawer { width: 100%; } }

/* ---- Single-product add-to-cart row: align stepper with the button ---- */
.woocommerce div.product form.cart .woocommerce-single-add-to-cart,
.single-product form.cart .woocommerce-single-add-to-cart {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}
form.cart .single_add_to_cart_button { margin: 0; }

/* ---- Shop/loop card: qty stepper + "В КОШИК" on one row ---- */
/* :not(.variations_form) excludes variable products (weight/size dropdown) — */
/* forcing their form into a row here squeezed the price+qty+button block down to the button's own width, */
/* clipping the price text and quantity stepper past the card edge. */
.woocommerce ul.products li.product form.cart:not(.variations_form),
li.product form.cart:not(.variations_form) {
	display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
	align-items: center; justify-content: center; gap: 10px;
	/* Reserve the row height so the JS stepper enhancement can't shift the grid (CLS) */
	min-height: 52px; box-sizing: border-box;
}
.woocommerce ul.products li.product form.cart { gap: 8px; }
li.product form.cart .quantity.spice-qty { flex: 0 0 auto; }
li.product form.cart .add_to_cart_button,
li.product form.cart button.button {
	/* min-width:0 lets flex-shrink squeeze this below its own text width when the row is a
	   hair too tight for the available card width (seen on some products where sub-pixel
	   rounding leaves it 1px short) — clipping "В кошик" by a pixel. Never shrink below
	   the button's own content so it wraps/overflows instead of silently clipping text. */
	flex: 1 1 auto; width: auto !important; min-width: max-content !important; margin: 0 !important;
	white-space: nowrap; padding-left: 20px !important; padding-right: 20px !important;
}
/* Related/upsell product sliders (owl-carousel, ~254px cards) are too narrow to fit the qty
   stepper and button side by side at the main grid's sizes — shrink the stepper itself (not
   the button's padding) to free up room, so both stay on one row without clipping. */
.products-slider ul.products li.product form.cart .quantity.spice-qty .spice-qty-btn {
	width: 22px !important; min-width: 22px !important; max-width: 22px !important; height: 22px !important;
}
.products-slider ul.products li.product form.cart .quantity.spice-qty .spice-qty-box {
	padding: 0 4px !important; margin: 0 1px !important;
}
.products-slider ul.products li.product form.cart .add_to_cart_button,
.products-slider ul.products li.product form.cart button.button {
	padding-left: 16px !important;
	padding-right: 16px !important;
}
/* The core grid gutter padding (ul.products normally sits in a padded grid) has no business
   being on the owl-carousel track — it pushes the stage's left/right edge past the visible
   .owl-stage-outer clip box (which owl already sets to overflow:hidden), causing a real
   horizontal scrollbar on the page at some viewport widths. */
.products-slider ul.products.owl-carousel {
	padding: 0 !important;
}

/* narrow shop cards: drop the "шт" suffix so the stepper is compact and the button fits */
li.product form.cart .quantity.spice-qty .spice-qty-unit { display: none; }
li.product form.cart .quantity.spice-qty .spice-qty-box { padding: 0 5px; }

/* Mobile: collapse the loop "В КОШИК" button to a cart icon so it fits the narrow card */
@media (max-width: 767px) {
	.woocommerce ul.products li.product form.cart:not(.variations_form),
	li.product form.cart:not(.variations_form) {
		justify-content: space-between !important; gap: 10px;
	}
	.woocommerce ul.products li.product form.cart .add_to_cart_button,
	li.product form.cart .add_to_cart_button,
	li.product form.cart button.button,
	li.product form.cart .single_add_to_cart_button,
	li.product .woocommerce-variation-add-to-cart .single_add_to_cart_button,
	.products-slider li.product form.cart .single_add_to_cart_button,
	.woocommerce ul.products .owl-stage-outer .owl-item li form.cart .single_add_to_cart_button {
		flex: 0 0 auto !important; width: 46px !important; min-width: 46px !important; max-width: 46px !important;
		height: 42px; padding: 0 !important; font-size: 0 !important; line-height: 0 !important; color: transparent !important;
		background-color: var(--spice-mc-accent) !important;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.4'/%3E%3Ccircle cx='19' cy='20' r='1.4'/%3E%3Cpath d='M2 3h2.2l2.3 12.2a1.6 1.6 0 0 0 1.6 1.3h8.9a1.6 1.6 0 0 0 1.6-1.3L21 7H5'/%3E%3C/svg%3E") !important;
		background-repeat: no-repeat !important; background-position: center !important; background-size: 22px 22px !important;
	}
}

/* ---- Custom qty stepper pill (our own; replaces the qib plugin) ---- */
.woocommerce .quantity.spice-qty,
.quantity.spice-qty {
	display: inline-flex !important; align-items: center !important; box-sizing: border-box !important; width: auto !important; margin: 0 !important;
	background: var(--spice-mc-accent) !important; border-radius: 999px !important; padding: 2px !important;
	height: 30px !important; min-height: 30px !important; max-height: none !important; float: none !important;
}
.quantity.spice-qty .spice-qty-btn {
	flex: 0 0 auto; box-sizing: border-box; width: 26px; min-width: 26px; max-width: 26px; height: 26px;
	padding: 0; margin: 0; border: 0; background: transparent; color: #fff; border-radius: 999px; box-shadow: none;
	font-size: 18px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
	transition: background .15s;
}
.quantity.spice-qty .spice-qty-btn:hover { background: rgba(255,255,255,.22); }

/* Remove the theme's dark button focus/active background + blue outline on the qty steppers */
.spice-mc-qty button:focus, .spice-mc-qty button:active,
.quantity.spice-qty .spice-qty-btn:focus, .quantity.spice-qty .spice-qty-btn:active {
	outline: none !important; box-shadow: none !important; color: #fff !important;
	background: rgba(255,255,255,.22) !important;
}
.spice-mc-qty button:not(:hover):not(:focus-visible),
.quantity.spice-qty .spice-qty-btn:not(:hover):not(:focus-visible) { background: transparent !important; }
/* keep a subtle ring for keyboard users only */
.spice-mc-qty button:focus-visible,
.quantity.spice-qty .spice-qty-btn:focus-visible {
	outline: 2px solid rgba(255,255,255,.8) !important; outline-offset: -3px !important; background: rgba(255,255,255,.22) !important;
}
.quantity.spice-qty .spice-qty-box {
	display: inline-flex; align-items: center; gap: 1px; background: #fff; border-radius: 5px; height: 26px; margin: 0 2px; padding: 0 7px;
}
.woocommerce .quantity.spice-qty input.qty,
.quantity.spice-qty input.qty {
	width: 22px; min-width: 16px; box-sizing: content-box; text-align: center;
	border: 0 !important; border-bottom: 0 !important; background: transparent !important; box-shadow: none !important;
	font-size: 12px !important; font-weight: 600 !important; color: var(--spice-mc-ink) !important; padding: 0; margin: 0;
	-moz-appearance: textfield; appearance: textfield; height: 26px; line-height: 26px;
}
.woocommerce .quantity.spice-qty input.qty:focus,
.quantity.spice-qty input.qty:focus, .quantity.spice-qty input.qty:focus-visible {
	outline: none !important; border: 0 !important; border-bottom: 0 !important; box-shadow: none !important; background: transparent !important; color: var(--spice-mc-ink) !important;
}
.quantity.spice-qty input.qty::-webkit-outer-spin-button,
.quantity.spice-qty input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.quantity.spice-qty .spice-qty-unit { font-size: 11px; color: var(--spice-mc-muted); font-weight: 500; }
.quantity.spice-qty label.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* hide the theme's own quantity-display overlay so only our pill shows */
.quantity.spice-qty .quantity-display,
.quantity.spice-qty .quantity-button,
.quantity.spice-qty .qty-minus,
.quantity.spice-qty .qty-plus { display: none !important; }
.quantity.spice-qty input.qty { display: inline-block !important; opacity: 1 !important; position: static !important; visibility: visible !important; }