/* Conversion Pro — category/collection page toolbar (module 6) */

.cvp-category-toolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
}

/* Confirmed live: this bare <button> was picking up Motta's generic
   button chrome (large padding, big min-height/min-width, bold fill) —
   the exact same "bare button gets themed as a big rounded pill" issue
   already fixed for #cvp-close-filters below, #cvp-close-offers, and
   #cvp-otp-close, just not yet applied to this one. That's what made
   "Filter" render as a large boxed button rather than the compact
   toggle it's meant to be. */
#cvp-open-filters {
	height: 36px;
	min-height: 0;
	min-width: 0;
	line-height: 1;
	padding: 0 16px;
	margin: 0;
	background: #fff;
	border: 1.5px solid #C4080E;
	border-radius: 20px;
	color: #C4080E;
	font-size: 13px;
	font-weight: 600;
}

.cvp-sort-select {
	height: 36px;
	padding: 0 10px;
	border: 1px solid #ddd;
	border-radius: 20px;
	font-size: 13px;
	background: #fff;
}

.cvp-active-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 12px;
}

.cvp-chip {
	background: #fff;
	border: 1px solid #eee;
	color: #C4080E;
	padding: 4px 10px;
	border-radius: 20px;
	font-size: 12px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.cvp-chip button {
	background: none;
	border: none;
	cursor: pointer;
	color: #C4080E;
	font-weight: 700;
}

.cvp-filter-group {
	margin-bottom: 16px;
}
.cvp-filter-group input[type="number"] {
	width: 45%;
	padding: 8px;
	border: 1px solid #ddd;
	border-radius: 4px;
}

/* Reset the theme's default button chrome — same fix already applied to
   #cvp-close-offers (coupons-drawer.css) and #cvp-otp-close (otp-modal.css)
   for the exact same reason: Motta renders bare <button>s as big
   rounded/filled pills otherwise, which is why this was showing as a
   full-width red "×" button instead of a plain close glyph. */
#cvp-close-filters {
	background: none;
	border: none;
	border-radius: 0;
	width: auto;
	height: auto;
	min-width: 0;
	padding: 0 4px;
	margin: 0;
	font-size: 26px;
	line-height: 1;
	color: #000;
	cursor: pointer;
}
#cvp-close-filters:hover {
	opacity: 0.6;
}

#cvp-product-grid-sentinel {
	height: 1px;
}

/* Category/shop/tag archive pages (body.archive.woocommerce-page) AND the
   Sale page (/sale/, a Motta "Product Deals Grid" Elementor widget —
   .motta-product-deals__type-sale — that never carries the archive body
   classes since it's a plain WP Page, not a WooCommerce archive
   template) — never the front page, which has its own bespoke Best
   Sellers/Featured Products treatments. :is() lets one shared rule set
   cover both root contexts without duplicating every rule below twice.
   Explicit request to make both grids' cards match the homepage Featured
   Products widget's look: icons visible on page load instead of
   hover-only, and the wishlist button grouped into that same row instead
   of the sitewide "in Category" meta-line placement (on the category
   archive, category.js's relocateWishlistsIntoIcons() moves the real
   button here at runtime; on the Sale page it's already rendered inside
   .product-featured-icons by default, so no JS relocation is needed or
   loaded there — see class-cvp-category.php's enqueue_assets()). */
:is(body.archive.woocommerce-page, .motta-product-deals__type-sale) ul.products .product-featured-icons {
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
	justify-content: center;
	align-items: center;
}

/* Confirmed live bug: products loaded via infinite scroll (category.js's
   AJAX endpoint) render the wishlist button WITHOUT Motta's own
   "motta-button--wishlist" class — only the base wcboost-wishlist-button
   classes are present in that batch's markup (the theme only adds its
   own classes through its normal loop-template hook, which the AJAX
   response doesn't go through identically). Targeting
   `.motta-button--wishlist` alone left THAT button unsized (no 34px
   width/circle), so it kept its default wider size and squeezed the
   Add to Cart button next to it down to ~61px via flex — the "some
   sections show different cart button large/small" bug. Matching
   `.wcboost-wishlist-button` as well guarantees the same 34px circle
   regardless of which classes a given batch's markup happens to carry
   (the Sale page's own markup already carries both classes natively). */
:is(body.archive.woocommerce-page, .motta-product-deals__type-sale) ul.products .product-featured-icons .motta-button--wishlist,
:is(body.archive.woocommerce-page, .motta-product-deals__type-sale) ul.products .product-featured-icons .wcboost-wishlist-button {
	position: static !important;
	inset: auto !important;
	display: inline-flex !important;
	flex: 0 0 auto !important;
	width: 34px !important;
	height: 34px !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	color: #D91C22 !important;
	border: 2px solid #D91C22 !important;
	border-radius: 50% !important;
	align-items: center;
	justify-content: center;
	opacity: 1 !important;
	transform: none !important;
}
:is(body.archive.woocommerce-page, .motta-product-deals__type-sale) ul.products .product-featured-icons .motta-button--wishlist svg,
:is(body.archive.woocommerce-page, .motta-product-deals__type-sale) ul.products .product-featured-icons .motta-button--wishlist path,
:is(body.archive.woocommerce-page, .motta-product-deals__type-sale) ul.products .product-featured-icons .wcboost-wishlist-button svg,
:is(body.archive.woocommerce-page, .motta-product-deals__type-sale) ul.products .product-featured-icons .wcboost-wishlist-button path {
	fill: #D91C22;
}
:is(body.archive.woocommerce-page, .motta-product-deals__type-sale) ul.products .product-featured-icons .motta-button--wishlist.added,
:is(body.archive.woocommerce-page, .motta-product-deals__type-sale) ul.products .product-featured-icons .wcboost-wishlist-button.added {
	background: #D91C22 !important;
}
:is(body.archive.woocommerce-page, .motta-product-deals__type-sale) ul.products .product-featured-icons .motta-button--wishlist.added svg,
:is(body.archive.woocommerce-page, .motta-product-deals__type-sale) ul.products .product-featured-icons .motta-button--wishlist.added path,
:is(body.archive.woocommerce-page, .motta-product-deals__type-sale) ul.products .product-featured-icons .wcboost-wishlist-button.added svg,
:is(body.archive.woocommerce-page, .motta-product-deals__type-sale) ul.products .product-featured-icons .wcboost-wishlist-button.added path {
	fill: #fff;
}
/* Confirmed live: without this, the AJAX-batch wishlist button's own
   text label ("Wishlist"/"Add to wishlist") rendered next to the icon
   inside the now-34px circle, overflowing it — the theme normally hides
   this label via its own CSS class, which (per the same root cause
   above) isn't present on this batch's button. Visually hidden here
   instead of relying on a theme class that may or may not be there. */
:is(body.archive.woocommerce-page, .motta-product-deals__type-sale) ul.products .product-featured-icons .wcboost-wishlist-button__text,
:is(body.archive.woocommerce-page, .motta-product-deals__type-sale) ul.products .product-featured-icons .motta-button__text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

/* Now that wishlist has moved back into the icon row, the "in Category"
   meta line it used to occupy on this page type would otherwise sit
   empty (margin-left:auto with nothing to push) — hide it here rather
   than leave a dead gap. Category text itself is still shown earlier in
   the same line (this only removes the trailing wishlist slot). */
:is(body.archive.woocommerce-page, .motta-product-deals__type-sale) ul.products li.product .meta-cat .motta-button--wishlist,
:is(body.archive.woocommerce-page, .motta-product-deals__type-sale) ul.products li.product .meta-cat .wcboost-wishlist-button {
	display: none;
}

/* 5 products per row per explicit request (was 4/25% on the category
   archive's own "columns-4" class, 6/16.6% on the Sale page's
   "columns-6" — dropping the column-count class from the selector
   entirely covers both regardless of which one a given context uses).
   Confirmed live: ul.products here is a flexbox row (flex-wrap, no CSS
   grid), and li.product's width came from a theme rule tucked inside an
   @media block that a flat stylesheet-rule scan didn't surface —
   !important on a plain, unambiguous selector sidesteps needing to
   find/out-specificity that exact rule. */
@media (min-width: 783px) {
	:is(body.archive.woocommerce-page, .motta-product-deals__type-sale) ul.products li.product {
		width: 20% !important;
	}
}

/* Per explicit request, make the category grid's products "look bigger,
   like Featured Products" — Featured Products' cards read larger mainly
   because that section's own row isn't boxed to the theme's fixed
   ~1172px content width (it's an Elementor widget that renders its own
   wider/scrolling row), while this page's grid sits inside the theme's
   standard boxed .site-content-container (confirmed live: explicit
   width:1171.99px, centered via auto margins, not a max-width — a plain
   "max-width" override wouldn't beat that explicit width without
   !important). Widening that container only on archive pages (not
   touching any other page's layout) lets all 5 columns grow
   proportionally — bigger images, bigger card, same 14px type scale
   already shared with Featured Products. Capped at 1600px so it doesn't
   look absurd on very wide/ultrawide monitors, and never exceeds 94vw so
   there's still a visible page margin. */
@media (min-width: 1200px) {
	body.archive.woocommerce-page .site-content-container {
		width: 94vw !important;
		max-width: 1600px !important;
	}
}