/* "Quick basket" nav-cart dropdown redesign. Styles WooCommerce's
   default WC_Widget_Cart output (templates/cart/mini-cart.php) inside
   Hestia's existing .nav-cart-content wrapper - see
   mini-cart-redesign.php for why no template override was needed.
   Deliberately does NOT touch .nav-cart-content's own position/display -
   an existing dynamically generated theme style already handles the
   show-on-hover behaviour, confirmed live before writing this file. */

.nav-cart-content {
	--hmc-accent: var( --hestia-primary-color, #c2185b );
	--hmc-accent-soft: color-mix( in srgb, var( --hmc-accent ) 12%, #fff );
	--hmc-accent-deep: color-mix( in srgb, var( --hmc-accent ) 75%, #000 );
	--hmc-success: #1b8a5a;
	--hmc-success-soft: #e6f6ee;
	--hmc-ink: #3c4858;
	--hmc-muted: #8b95a1;
	--hmc-border: #ececf1;
}

.nav-cart-content .widget_shopping_cart_content {
	/* Fixed width, deliberately - .nav-cart-content (the dropdown
	   "window") turned out to have no fixed size of its own, it
	   auto-sizes to fit whatever's inside it. width:100% here created
	   a feedback loop (shrink content → container shrinks to match →
	   content has to shrink further...) that ended up squeezing
	   everything down to ~190px and broke text wrapping again.
	   A fixed width breaks that loop: this becomes the one true
	   "window size" and .nav-cart-content just wraps around it. */
	box-sizing: border-box;
	width: 335px;
	padding: 18px 20px 20px;
}

/* speech-bubble pointer, connecting the dropdown back to the cart icon
   it hangs off - matches the original concept mockup. */
.nav-cart-content::before {
	content: "";
	position: absolute;
	z-index: 5;
	top: -7px;
	right: 26px;
	width: 14px;
	height: 14px;
	background: #fff;
	border-left: 1px solid var( --hmc-border );
	border-top: 1px solid var( --hmc-border );
	transform: rotate( 45deg );
	border-radius: 3px 0 0 0;
}

/* ---------- header (hestia_mini_cart_render_header()) ---------- */

.hestia-mc-header {
	margin: 0 0 12px;
}

.hestia-mc-header h3 {
	margin: 0;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var( --hmc-ink );
}

/* ---------- free shipping progress (hestia_mini_cart_render_shipping_progress()) ---------- */

.hestia-mc-shipping {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var( --hmc-success-soft );
	border-radius: 12px;
	padding: 10px 12px;
	margin: 0 0 14px;
}

.hestia-mc-ring {
	--pct: 0%;
	flex: none;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: conic-gradient( var( --hmc-success ) var( --pct ), rgba( 0, 0, 0, 0.08 ) 0 );
	display: flex;
	align-items: center;
	justify-content: center;
}

.hestia-mc-ring span {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var( --hmc-success-soft );
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 8.5px;
	font-weight: 800;
	color: var( --hmc-success );
}

.hestia-mc-shipping-copy {
	font-size: 12px;
	line-height: 1.35;
	color: var( --hmc-success );
}

.hestia-mc-shipping-copy strong {
	font-weight: 700;
}

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

.nav-cart-content ul.woocommerce-mini-cart {
	list-style: none;
	margin: 0 0 14px;
	padding: 2px;
	max-height: 260px;
	overflow-y: auto;
	overflow-x: hidden;
	box-sizing: border-box;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Matches the concept mockup's item grid exactly: thumb (52px) |
   name+stepper | price+remove, as a 3-column x 2-row grid. The
   quantity/price split into two separate top-level elements
   (hestia_mini_cart_split_quantity_price() in mini-cart-redesign.php)
   is what makes the stepper and price placeable into different grid
   cells - WooCommerce's own single "N × price" span could only ever
   be one grid item, not independently positioned pieces. */
.nav-cart-content li.woocommerce-mini-cart-item {
	/* !important needed on display/padding: two of this theme's own
	   pre-existing rules both out-rank this selector -
	   ".nav-cart .nav-cart-content ul li{display:block}" wins the
	   display fight on element-count (2 elements vs this selector's 1,
	   with class counts tied), and
	   ".nav-cart .nav-cart-content .widget li{padding-left:2em}" wins
	   the padding fight on class count (3 classes vs this selector's
	   2) - confirmed via CDP CSS.getMatchedStylesForNode, not guessed. */
	display: grid !important;
	/* minmax(0, 1fr), not bare 1fr: a bare 1fr track still carries an
	   automatic minimum size based on its content (same "won't shrink
	   below min-content" behaviour as flex items' default min-width:auto),
	   so with a long product name this track was refusing to shrink
	   and pushing the whole row 22px past its own container's edge -
	   confirmed via bounding boxes, not assumed. minmax(0, 1fr)
	   explicitly allows the name column to shrink to fit. */
	grid-template-columns: 52px minmax( 0, 1fr ) auto;
	grid-template-rows: auto auto;
	column-gap: 12px;
	row-gap: 6px;
	align-items: start;
	text-align: left !important;
	padding: 0 !important;
	/* This li is ALSO a flex item of ul.woocommerce-mini-cart
	   (flex-direction:column below), which by default won't shrink a
	   flex item below its content's min-size either - the same
	   min-width:auto behaviour as the grid tracks above, just one
	   level up. */
	min-width: 0;
	/* !important: found via CDP that this theme hardcodes
	   ".nav-cart .nav-cart-content .widget li{width:320px}" - a
	   leftover from the dropdown's original design, wider than this
	   redesign's container - and it out-specifies this selector on
	   class count. That, not the flex/grid min-width defaults above,
	   was the actual remaining cause of the row overflowing its own
	   container after everything else was fixed. */
	width: 100% !important;
}

.nav-cart-content li.woocommerce-mini-cart-item > a:not( .remove ) {
	/* Back to the narrow column (same width as the stepper below it),
	   per explicit direction - long names will wrap again, that's
	   the accepted trade-off of this choice. */
	grid-column: 2;
	grid-row: 1;
	display: block;
	overflow: hidden;
	text-align: center !important;
	text-decoration: none;
	color: var( --hmc-ink );
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	/* Without these, a pre-existing theme-wide "word-break:break-word"
	   wraps a long single-word name one character per line once this
	   column gets narrow (confirmed earlier in this file's history -
	   don't drop this again on the next rewrite). */
	word-break: normal !important;
	overflow-wrap: break-word !important;
	/* Another old-design leftover, found while adding the price's
	   remove-button clearance below: the theme's dynamically generated
	   ".nav-cart .nav-cart-content ul li a:not(.remove){padding-left:70px}"
	   (inc/addons/views/class-hestia-compatibility-style-addon.php) -
	   clearance for the ORIGINAL dropdown's float:left thumbnail inside
	   this anchor. The redesign already reserves grid column 1 for the
	   (absolutely positioned) image, so that 70px was dead space inside
	   column 2: it pushed the name text ~35px right of the column's
	   (and stepper's) center and left "Testproduct" only ~93px of the
	   163px column, making it break mid-word ("Testprodu / ct") the
	   moment the price clearance narrowed the column - measured via
	   getBoundingClientRect line boxes + getComputedStyle (padding
	   "0 0 0 70px"), not guessed. !important because that selector
	   out-ranks this one on class count (4 vs 3, counting :not()'s
	   argument). */
	padding: 0 !important;
}

.nav-cart-content li.woocommerce-mini-cart-item > a:not( .remove ) img {
	/* grid-column/grid-row do nothing here: this <img> is nested
	   inside the <a> (a grandchild of the grid container, not a
	   direct child), and CSS Grid placement only applies to direct
	   children - confirmed via bounding-box measurements after the
	   first attempt rendered the image on its own line above the
	   name instead of beside it. The grid still reserves column 1's
	   52px as empty space even with no direct-child item in it, so
	   absolutely positioning the image into that reserved space
	   (top:0/left:0 relative to the li, which is already
	   position:relative via WooCommerce core's own
	   ".widget_shopping_cart .cart_list li{position:relative}") lines
	   it up exactly, without needing to touch the <a>'s own layout at
	   all. */
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	float: none !important;
	margin: 0 !important;
	width: 52px !important;
	height: 52px !important;
	aspect-ratio: 1 / 1 !important;
	border-radius: 10px;
	object-fit: cover;
	background: #f6f5f8;
}

/* stepper - buttons are wired to the hestia_mini_cart_qty AJAX
   endpoint by assets/js/hestia-mini-cart.js (see
   hestia_mini_cart_split_quantity_price() in mini-cart-redesign.php). */
.nav-cart-content li.woocommerce-mini-cart-item .hestia-mc-stepper {
	/* Back to just column 2, matching the name above it now that the
	   name is narrow again too - both share column 2's own center. */
	grid-column: 2;
	grid-row: 2;
	justify-self: center;
	display: flex;
	align-items: center;
	width: fit-content;
	border: 1px solid var( --hmc-border );
	border-radius: 999px;
	overflow: hidden;
}

.nav-cart-content li.woocommerce-mini-cart-item .hestia-mc-qty-btn {
	/* !important on width/height/padding: this theme has a bare
	   "button{padding:12px 30px}" rule (element selector, applies to
	   every <button> site-wide) that was inflating these to 60px wide
	   - confirmed via CDP that my un-!important width:22px wasn't
	   enough to override it, even though these buttons don't use the
	   theme's .btn class at all. */
	width: 22px !important;
	height: 22px !important;
	min-width: 22px !important;
	padding: 0 !important;
	margin: 0 !important;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	line-height: 1;
	color: var( --hmc-muted );
	background: transparent;
	border: none;
	cursor: pointer;
}

.nav-cart-content li.woocommerce-mini-cart-item .hestia-mc-qty-btn:hover {
	background: var( --hmc-accent-soft );
	color: var( --hmc-accent-deep );
}

.nav-cart-content li.woocommerce-mini-cart-item .hestia-mc-qty-val {
	width: 22px;
	text-align: center;
	font-size: 11.5px;
	font-weight: 700;
	color: var( --hmc-ink );
}

.nav-cart-content li.woocommerce-mini-cart-item .hestia-mc-price {
	/* Back to its original spot: row 1, column 3, beside the (narrow
	   again) name. */
	grid-column: 3;
	grid-row: 1;
	align-self: center;
	text-align: right;
	font-size: 13.5px;
	font-weight: 800;
	color: var( --hmc-ink );
	white-space: nowrap;
	/* Clearance for the remove button: a.remove below is NOT a grid
	   item - it's an absolute overlay pinned to the li's top-right
	   corner (top:0/right:0, 20px round body), so the grid can't
	   reserve space for it and the price (right-aligned in the same
	   corner) rendered underneath it, clipping the last characters
	   ("$24.9..." on QA Wireless Mouse) - confirmed via screenshot.
	   26px = the button's 20px footprint + 6px breathing room. */
	padding-right: 26px;
}

.nav-cart-content li.woocommerce-mini-cart-item a.remove {
	/* Small round × button (the theme's own remove link already
	   contains a literal "×" character - see
	   templates/cart/mini-cart.php - so no content override needed
	   here, just sizing/position).
	   Now an absolute corner overlay instead of a grid item - once
	   price moved into grid-column:3/row:2, that cell was needed for
	   price alone, so remove no longer has its own grid cell to sit
	   in. li is already position:relative (WooCommerce core's own
	   ".widget_shopping_cart .cart_list li{position:relative}"), so
	   this positions cleanly against the li's own box instead. */
	position: absolute !important;
	top: 0 !important;
	right: 0 !important;
	left: auto !important;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #f4f2f6;
	/* !important: WooCommerce core also ships ".woocommerce a.remove{color:red !important}" -
	   same specificity pattern as everywhere else in this file,
	   confirmed via computed style rather than assumed. */
	color: var( --hmc-muted ) !important;
	font-size: 13px !important;
	line-height: 1;
	text-decoration: none;
}

.nav-cart-content li.woocommerce-mini-cart-item a.remove:hover {
	background: var( --hmc-accent-soft );
	color: var( --hmc-accent-deep ) !important;
}

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

.nav-cart-content p.woocommerce-mini-cart__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin: 14px 0;
	padding-top: 14px;
	border-top: 1px solid var( --hmc-border );
}

.nav-cart-content p.woocommerce-mini-cart__total strong {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var( --hmc-muted );
}

.nav-cart-content p.woocommerce-mini-cart__total .amount {
	font-size: 17px;
	font-weight: 800;
	color: var( --hmc-ink );
}

/* ---------- buttons ---------- */

.nav-cart-content p.woocommerce-mini-cart__buttons {
	display: flex !important;
	gap: 8px;
	margin: 0 !important;
}

/* !important on padding/border-radius: this theme has a dynamically
   generated customizer style that specifically lists
   ".nav-cart .nav-cart-content .widget .buttons .button" among a large
   compound selector for button padding/radius - same class of conflict
   hit repeatedly elsewhere in this build (checkout labels, shop-card
   buttons), confirmed each time via computed styles rather than
   assumed, so pre-empting it here. */
.nav-cart-content p.woocommerce-mini-cart__buttons a.button {
	display: flex !important;
	flex: 1;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 11px 12px !important;
	border-radius: 999px !important;
	font-size: 12.5px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.nav-cart-content p.woocommerce-mini-cart__buttons a.button:not( .checkout ) {
	background: var( --hmc-accent-soft );
	color: var( --hmc-accent-deep );
}

/* This theme deliberately hides the checkout button here by default
   (inc/addons/views/class-hestia-compatibility-style-addon.php:
   ".nav-cart .nav-cart-content .widget .buttons .button.checkout{display:none}",
   presumably to funnel customers through the cart page first) - found
   via CDP after wrongly assuming this was a pre-existing WooCommerce
   quirk outside my control. Overriding it since showing both actions
   is part of what was asked for here. */
.nav-cart-content p.woocommerce-mini-cart__buttons a.button.checkout {
	display: flex !important;
	background: var( --hmc-accent );
	color: #fff;
}

/* ---------- empty state ---------- */

.nav-cart-content p.woocommerce-mini-cart__empty-message {
	margin: 0;
	padding: 20px 4px;
	text-align: center;
	font-size: 13px;
	color: var( --hmc-muted );
}

/* ---------- in-flight AJAX state (hestia-mini-cart.js) ---------- */

/* Dim + lock the interactive bits while a quantity update is
   round-tripping; the class lives on .widget_shopping_cart_content and
   disappears with it when the fresh fragment swaps in. */
.nav-cart-content .widget_shopping_cart_content.hestia-mc-updating .hestia-mc-stepper,
.nav-cart-content .widget_shopping_cart_content.hestia-mc-updating a.remove {
	opacity: 0.45;
	pointer-events: none;
}