/**
 * Supra Force — Product Category Archive page redesign.
 *
 * Scope: every selector below is prefixed with body.tax-product_cat.woocommerce
 * (the body classes WordPress/WooCommerce add on a product category
 * taxonomy archive) — deliberately NOT a bare ul.products/li.product/
 * .woocommerce-loop-product__title/.button, so nothing here can leak onto
 * the Home page, single product page, cart, or any other WooCommerce
 * context. Enqueued only when is_product_category() is true, from
 * includes/product-archive.php.
 *
 * Reuse policy: wp-content/themes/hello-commerce/assets/css/custom-home-products.css
 * is used here only as a CANONICAL REFERENCE for color/spacing/typography
 * values (colors, radii, font sizes/weights, shadow, hover treatment) —
 * this file does NOT @import or otherwise depend on it. Every rule below
 * that reproduces a Home value is marked "[Home]"; anything NOT marked that
 * way is a new addition specific to the category-archive redesign (title
 * line-clamping, promo/stock badges, extra responsive tiers, pagination,
 * breadcrumb, etc.) that Home's own card does not have.
 *
 * This is a deliberate, temporary duplication — Home's card is not being
 * migrated to this plugin in this task, so the two files currently share
 * values by copy, not by reference. If the Home card is ever moved into
 * this plugin, these two stylesheets should be reconciled into one shared
 * source at that point.
 */

/* =========================================================
   1. Page shell — main content area. Clean white background (per
   explicit request — the previous off-white #FBFCFF read as too blue).

   padding-bottom (new): WooCommerce's default global/wrapper-start.php
   (no hello-commerce case in its theme-slug switch, so the `default`
   branch applies) prints this exact element as
   <main id="main" class="site-main" role="main">, opened by the
   woocommerce_before_main_content hook and closed by
   woocommerce_after_main_content — meaning breadcrumb, products header,
   ul.products AND nav.woocommerce-pagination all render as children
   inside this one element, in that order. Adding padding-bottom here
   (rather than to ul.products or the pagination) guarantees the extra
   space always lands after the true last piece of content — pagination
   when present, the grid itself when a category has too few products to
   paginate — without touching either element directly, and without any
   risk of margin-collapse leaking into the footer below (padding belongs
   to this box, never collapses out of it). `main#content` is kept as a
   defensive alternate selector (harmless no-op if it never actually
   matches on this template) since it was already present here.
   ========================================================= */
body.tax-product_cat.woocommerce .site-main,
body.tax-product_cat.woocommerce main#content {
	background-color: #ffffff;
	padding-bottom: clamp(32px, 2.5vw, 48px);
}

/* Tablet/Mobile override, added 2026-07-24 — same reported problem as
   Home (Footer landing too close to the last card), same fix location
   (this element's own padding-bottom, already the established
   mechanism above — no second/competing rule). The base clamp() above
   only starts growing past its 32px floor once viewport > 1280px, so
   every width <=1024px was getting a flat 32px regardless of tier;
   this file has no per-item card margin-bottom on category pages
   (li.product's margin is 0 !important — grid row-gap handles between-
   row spacing only, not the space after the last row), so unlike Home
   these values are the full visible gap directly, nothing to add on
   top of. Same target numbers as home-products-responsive.css's own
   PRODUCTS SECTION -> FOOTER GAP block, kept separate/scoped here per
   explicit instruction (own selector, not shared with Home). */
@media (max-width: 767px) {
	body.tax-product_cat.woocommerce .site-main,
	body.tax-product_cat.woocommerce main#content {
		padding-bottom: 52px;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	body.tax-product_cat.woocommerce .site-main,
	body.tax-product_cat.woocommerce main#content {
		padding-bottom: 72px;
	}
}

body.tax-product_cat.woocommerce ul.products {
	max-width: 1360px;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 20px;
	padding-right: 20px;
	box-sizing: border-box;
}

/* =========================================================
   2. Breadcrumb — WooCommerce's own woocommerce_breadcrumb() output
   (<nav class="woocommerce-breadcrumb">), restyled to the brand's
   typography/color instead of the WooCommerce default plain text.
   ========================================================= */
body.tax-product_cat.woocommerce .woocommerce-breadcrumb {
	max-width: 1360px;
	margin: 20px auto 0 auto !important;
	padding: 0 20px;
	box-sizing: border-box;
	color: #6B7280;
	font-family: 'LUXE UNO', sans-serif;
	font-size: 15px; /* +2px per explicit request (was 13px, not 12px) */
	letter-spacing: 0.02em;
}

body.tax-product_cat.woocommerce .woocommerce-breadcrumb a {
	color: #425fdb;
	text-decoration: none;
}

body.tax-product_cat.woocommerce .woocommerce-breadcrumb a:hover {
	text-decoration: underline;
}

/* =========================================================
   3. Category header — title + description + results/ordering row.
   WooCommerce's default archive-description.php / products-header
   markup: <header class="woocommerce-products-header"> containing
   <h1 class="woocommerce-products-header__title page-title"> and,
   further down the loop start, .woocommerce-result-count /
   .woocommerce-ordering.
   ========================================================= */
body.tax-product_cat.woocommerce .woocommerce-products-header {
	max-width: 1360px;
	margin: 32px auto 24px auto !important;
	padding: 0 20px;
	box-sizing: border-box;
	text-align: left;
}

/* Font: GUNTERZ Bold Italic (was Black Italic — weight lightened to Bold
   per follow-up request, italic kept). "Gunterz" is the name inferred from
   the uploaded font files (wp-content/uploads/fonts/Gunterz-Bold.ttf,
   Gunterz-BoldItalic.ttf, etc. — same wp-content/uploads/2026/07/ folder
   pattern already used by LOFT/LUXE UNO) — no @font-face rule for it was
   found in any cached CSS on the site (Elementor only generates one once
   a widget actually uses the font), so this name could NOT be verified
   against a real @font-face declaration. A genuine BoldItalic .ttf file
   does exist on disk, so IF "Gunterz" is the name Elementor has it
   registered under, font-style:italic below renders that real italic
   face, not a synthesized slant.
   Color switched to the brand blue used for the logo/price (#2F65F2, same
   value as ul.products li.product .price below), was the dark navy
   #050A55. (The prior version of this comment said "38px -> 36px" — that
   never matched the actual declared value below, 38px; corrected here,
   2026-07-24, no font-size regression involved, just a stale note.)
   letter-spacing reduced (0.02em -> 0.01em) to suit this bolder/condensed
   display face better.

   RESPONSIVE TYPOGRAPHY — added 2026-07-24. Confirmed via direct read (no
   theme/Elementor-kit rule anywhere targets .woocommerce-products-header__
   title or .page-title — grepped both, zero matches) that 38px, flat, was
   genuinely the only rule in effect at every width, Mobile through Desktop
   — not scaled at all before this pass.
   font-size below is the Desktop amplo (>=1200px) baseline — REVERTED
   2026-07-24 back to the original flat 38px (an earlier version of this
   round briefly extended the fluid curve up through Desktop amplo too,
   per an explicit request that was then retracted as a mistake — "ficou
   gigantesca" — so Desktop amplo goes back to exactly its pre-existing,
   approved value). The actual fluid scaling now lives in the <=1199px
   override block right below this rule, restoring the original plan:
   Mobile/Tablet/Desktop-estreito grow smoothly, Desktop amplo is
   untouched. line-height/word-break/overflow-wrap/hyphens/text-wrap
   stay unconditional (not part of what "ficou gigantesca" was about —
   only size); text-wrap:balance lets 2-line titles distribute evenly
   where supported (progressive enhancement, harmless fallback elsewhere).
   max-width/margin explicit below per this round's own instruction, even
   though inherited values already matched — makes the "no compensating
   width tricks" guarantee explicit rather than implicit. */
body.tax-product_cat.woocommerce .woocommerce-products-header__title.page-title {
	margin: 0 0 12px 0 !important;
	margin-left: 0;
	margin-right: 0;
	padding: 0 !important;
	max-width: 100%;
	color: #425fdb;
	font-family: "Gunterz", sans-serif;
	font-size: 38px;
	font-weight: 700;
	font-style: italic;
	letter-spacing: 0.01em;
	line-height: 0.98;
	text-transform: uppercase;
	text-align: left;
	word-break: normal;
	overflow-wrap: normal;
	hyphens: none;
	text-wrap: balance;
}

/* Fluid scale, Mobile through Desktop estreito only — Desktop amplo
   (>=1200px) is excluded here entirely, so it falls through to the
   38px baseline above, unchanged. Single source for this range: no
   other rule sets font-size for this selector inside <=1199px.
   REBUILT 2026-07-24: the curve is now anchored TO the 38px Desktop
   baseline instead of an independent ceiling — solves the jump the
   previous version had at 1199->1200px (66px -> 38px) by making the
   curve arrive at exactly 38px on its own, right where Desktop amplo
   takes over, so there is nothing left to jump.
   Two anchor points solved as a straight line, same technique used
   elsewhere in this project (Hero welcome text, header icons):
     - 1199px -> 38px (matches the Desktop amplo baseline above, zero
       discontinuity at 1200px)
     - 320px  -> 26px (floor: legible but visibly smaller than Desktop,
       ratio 26/38 ≈ 0.68 — a common, balanced fluid-type proportion,
       not so small it reads as an afterthought, not so close to 38px
       it feels unscaled)
   slope = (38-26)/(1199-320) = 12/879 ≈ 0.01365 -> 1.365vw (rounded to
   1.37vw below); base = 26 - 0.01365*320 ≈ 21.6px. Verified: 320px->
   ~26px, 767px->~32.1px, 1024px->~35.6px, 1199px->~38px (exact anchor,
   confirms no residual gap before Desktop amplo's own flat 38px). */
@media (max-width: 1199px) {
	body.tax-product_cat.woocommerce .woocommerce-products-header__title.page-title {
		font-size: clamp(26px, calc(21.6px + 1.37vw), 38px);
	}
}

/* Dynamic term description (only rendered by WooCommerce when the category
   actually has one set in wp-admin — absent otherwise, so this rule simply
   never applies on categories with no description). */
body.tax-product_cat.woocommerce .term-description {
	margin: 0 !important;
	max-width: 720px;
	color: #444a5e;
	font-family: 'LUXE UNO', sans-serif;
	font-size: 15px;
	line-height: 1.6;
}

/* Result count ("Mostrando X de Y resultados") — now hidden entirely per
   explicit request (previously visible/restyled; kept the rule instead of
   deleting it so the reasoning/history stays documented). */
body.tax-product_cat.woocommerce .woocommerce-result-count {
	display: none !important;
}

/* Ordering ("sort by") select — [Home] border/radius/padding/font values. */
body.tax-product_cat.woocommerce .woocommerce-ordering select {
	border: 1px solid #DCE8F8 !important;
	border-radius: 8px !important;
	padding: 10px 16px !important;
	background-color: #ffffff !important;
	color: #0D233A !important;
	font-family: 'LUXE UNO', sans-serif !important;
	font-size: 14px !important;
}

/* Result-count + ordering share one row, spaced apart from the grid below.
   margin-bottom raised 20px -> 40px per explicit request (more breathing
   room before the product grid starts). */
body.tax-product_cat.woocommerce .woocommerce-result-count,
body.tax-product_cat.woocommerce .woocommerce-ordering {
	display: inline-block;
	margin-bottom: 40px !important;
}

/* Mobile — hidden entirely, added 2026-07-24. The dropdown had no
   responsive treatment at all below Tablet (no width constraint, no
   alignment rule, nothing) and rendered as a loose, unstyled-looking
   box floating under the title, per explicit request/screenshot.
   Sorting itself (the underlying <select>/form submission) is
   untouched — WooCommerce still renders and processes it normally,
   this only removes it from view on narrow widths. Scoped to this
   file's own selector, does not touch .woocommerce-result-count
   (already display:none everywhere, section above) or any other
   page's ordering control. */
@media (max-width: 767px) {
	body.tax-product_cat.woocommerce .woocommerce-ordering {
		display: none !important;
	}

	/* Title -> grid breathing room, added 2026-07-24. Hiding .woocommerce-
	   ordering above also removed the 40px margin-bottom it used to
	   contribute (section 3 below), leaving only the header's own 24px
	   before the grid's own 20px margin-top (section 4) — title read as
	   too close to the cards once the dropdown's space was gone.
	   Consolidated into the SAME element or margin-bottom is already
	   set on for every width (see .woocommerce-products-header above) —
	   only the value changes here, Mobile only; Tablet/Desktop keep
	   their existing 24px untouched. */
	body.tax-product_cat.woocommerce .woocommerce-products-header {
		margin-bottom: 48px !important;
	}
}

/* =========================================================
   4. Grid — CSS Grid (was flex + explicit percentage widths). Fixed
   3-column desktop grid, ALWAYS — no wide-screen tier bumping to 4
   anymore, per explicit request. minmax(0,1fr) is what lets a category
   with only 1-2 products sit in the first slot(s) at their normal column
   width instead of stretching to fill the row (auto/1fr alone would
   stretch; minmax(0, 1fr) with no auto-placement stretch keeps every
   track the same size regardless of how many items actually fill it).
   Desktop (>1023px):    3 per row, fixed — never 4, at any width.
   ≤1023px:              2 per row (tablet + larger phones).
   ≤480px:                1 per row (avoids cramped titles/buttons).
   These two breakpoints are unchanged from the previous flex version
   (already tested/working) — only the desktop tier and the technique
   itself changed.
   ========================================================= */
body.tax-product_cat.woocommerce ul.products {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	column-gap: 28px;
	row-gap: 32px;
	margin-top: 20px !important;
	list-style: none !important;
}

body.tax-product_cat.woocommerce ul.products li.product {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	float: none !important;
	clear: none !important;
}

/* WooCommerce core's own clearfix rule (woocommerce.css):
   "ul.products::after, .woocommerce ul.products::before{content:" ";
   display:table}" — content is a literal space, not "none", so once
   ul.products became a grid container these two pseudo-elements were
   generated-content boxes and CSS Grid placed them as real grid items:
   ::before took the first cell, pushing real products into columns 2/3+.
   Neutralized here, strictly scoped to category pages only. */
body.tax-product_cat.woocommerce ul.products::before,
body.tax-product_cat.woocommerce ul.products::after {
	content: none !important;
	display: none !important;
}

/* Defensive variant for the columns-N class WooCommerce sometimes adds to
   ul.products — no such pseudo-element rule was found in WooCommerce's
   current CSS, but covering it costs nothing and guards against a future
   WooCommerce update reintroducing one under this more specific selector. */
body.tax-product_cat.woocommerce ul.products[class*="columns-"]::before,
body.tax-product_cat.woocommerce ul.products[class*="columns-"]::after {
	content: none !important;
	display: none !important;
}

@media (max-width: 1023px) {
	body.tax-product_cat.woocommerce ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 480px) {
	body.tax-product_cat.woocommerce ul.products {
		grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
	}
}

/* Neutralize WooCommerce's legacy float/clear — irrelevant to grid items
   anyway, kept as a defensive no-op belt-and-suspenders rule. */
body.tax-product_cat.woocommerce ul.products li.product.first,
body.tax-product_cat.woocommerce ul.products li.product.last {
	float: none !important;
	clear: none !important;
}

/* =========================================================
   5. Card — [Home] background/border/radius/shadow/hover-lift values.
   position:relative added (new) as the positioning anchor for the promo/
   stock badges in section 8.
   ========================================================= */
body.tax-product_cat.woocommerce ul.products li.product {
	position: relative;
	display: flex !important;
	flex-direction: column !important;
	min-width: 0;
	padding: 20px !important;
	box-sizing: border-box !important;
	text-align: left !important;
	overflow: hidden !important;
	background: linear-gradient(180deg, #ffffff 0%, #FCFDFF 100%) !important;
	border: 1px solid #425fdb !important;
	border-radius: 28px !important;
	box-shadow: none !important;
	opacity: 1 !important;
	transition: all 0.2s ease-in-out !important;
}

body.tax-product_cat.woocommerce ul.products li.product:hover {
	transform: translateY(-6px) !important;
	background: #000b5e !important;
	border-color: #000b5e !important;
}

body.tax-product_cat.woocommerce ul.products li.product > a.woocommerce-loop-product__link {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	margin: 0 !important;
}

/* =========================================================
   6. Image frame — [Home] aspect-ratio/background/border/radius values,
   applied to span.supra-product-image-frame (created by
   supra_force_archive_wrap_loop_image() in includes/product-archive.php).
   ========================================================= */
body.tax-product_cat.woocommerce ul.products li.product .supra-product-image-frame {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	aspect-ratio: 4 / 5 !important;
	width: 100% !important;
	margin: 0 0 18px 0 !important;
	padding: 22px !important;
	background-color: #FFFFFF !important;
	border: 1px solid #E8EDFF !important;
	border-radius: 22px !important;
	box-sizing: border-box !important;
	transition: all 0.2s ease-in-out !important;
}

body.tax-product_cat.woocommerce ul.products li.product:hover .supra-product-image-frame {
	background-color: #FFFFFF !important;
	border-color: #E8EDFF !important;
}

body.tax-product_cat.woocommerce ul.products li.product .supra-product-image-frame img {
	height: auto !important;
	max-height: 80% !important;
	max-width: 85% !important;
	width: auto !important;
	object-fit: contain !important;
	object-position: center !important;
	background: transparent !important;
	display: block !important;
	margin: 0 auto !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 0 !important;
}

/* =========================================================
   7. Title, price — [Home] color/font/size/weight values. Title height is
   NEW here: Home only sets a min-height (77px), which does not stop a
   long title from making its OWN card taller than its neighbors. Clamping
   to 2 lines with a matching fixed height keeps every card in a row the
   same height regardless of title length.
   ========================================================= */
body.tax-product_cat.woocommerce ul.products li.product .woocommerce-loop-product__title {
	display: -webkit-box !important;
	-webkit-box-orient: vertical !important;
	-webkit-line-clamp: 2 !important;
	overflow: hidden !important;
	height: 52px !important; /* 2 lines at 16px / line-height 1.6 (16*1.6*2 = 51.2, rounded up) */
	margin: 0 0 14px 0 !important;
	padding: 0 !important;
	color: #050A55 !important;
	font-family: 'LOFT', sans-serif !important;
	font-size: 16px !important;
	line-height: 1.6 !important;
	letter-spacing: .05em !important;
	font-weight: 900 !important;
	text-transform: uppercase !important;
	transition: all 0.2s ease-in-out !important;
}

body.tax-product_cat.woocommerce ul.products li.product:hover .woocommerce-loop-product__title {
	color: #FFFFFF !important;
}

body.tax-product_cat.woocommerce ul.products li.product .price {
	display: block !important;
	margin: auto 0 20px 0 !important;
	color: #2F65F2 !important;
	font-family: 'LOFT', sans-serif !important;
	font-size: 24px !important;
	line-height: 1 !important;
	font-weight: 900 !important;
	font-style: normal !important;
	transition: all 0.2s ease-in-out !important;
}

body.tax-product_cat.woocommerce ul.products li.product .price .woocommerce-Price-amount {
	font-weight: 900 !important;
	font-style: normal !important;
}

body.tax-product_cat.woocommerce ul.products li.product:hover .price,
body.tax-product_cat.woocommerce ul.products li.product:hover .price .woocommerce-Price-amount {
	color: #8AB4F8 !important;
}

/* =========================================================
   8. Buttons — [Home] shared pill layout + per-button colors. Extended
   (new) to also give the plain "Leia mais" link WooCommerce renders for
   out-of-stock products (a .button with neither add_to_cart_button nor
   yith-wcqv-button) the same pill shape/size, so an out-of-stock card
   keeps the same button-row height as every other card instead of
   collapsing to a smaller default link.
   ========================================================= */
body.tax-product_cat.woocommerce ul.products li.product .button {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	min-height: 48px !important;
	margin: 0 !important;
	padding: 12px 16px !important;
	border: none !important;
	border-radius: 999px !important;
	font-family: 'LOFT', sans-serif !important;
	font-size: 11px !important;
	line-height: 1.05 !important;
	font-weight: 900 !important;
	letter-spacing: .07em !important;
	text-transform: uppercase !important;
	text-align: center !important;
	white-space: normal !important;
	transition: all 0.2s ease-in-out !important;
}

/* Primary action — "Adicionar Ao Pedido" on simple products, or the
   equivalent loop button on variable products (WooCommerce keeps the same
   add_to_cart_button class either way; only its href/behavior differs,
   untouched here). [Home] colors. */
body.tax-product_cat.woocommerce ul.products li.product > a.add_to_cart_button {
	background: #425fdb !important;
	color: #ffffff !important;
	border: 1px solid transparent !important;
	margin-bottom: 4px !important;
}

body.tax-product_cat.woocommerce ul.products li.product:hover > a.add_to_cart_button {
	background: #FFFFFF !important;
	color: #000b5e !important;
}

body.tax-product_cat.woocommerce ul.products li.product:hover > a.add_to_cart_button:hover {
	background-color: #E8EDFF !important;
	transition: background-color 0.2s ease-in-out !important;
}

/* WooCommerce's own "Ver pedido" link (a.added_to_cart.wc-forward), inserted
   as a sibling right after the button on AJAX success — hidden purely
   visually, strictly scoped to the category grid only (never globally,
   never on cart/single-product pages). Not removed via PHP, not unbound —
   WooCommerce's own handlers on it, if any, still work; it just takes up
   no visual space here, so it can't grow the card or shift "Ver Produto".
   See supra-is-added below for the actual success feedback the user sees
   instead (on the button itself). */
body.tax-product_cat.woocommerce ul.products li.product a.added_to_cart.wc-forward {
	display: none !important;
}

/* Redundant, more aggressive safety net for the same element — in case
   any other rule ever wins and forces display back on, this still stops
   it from occupying layout space. Still strictly scoped to the category
   grid only. */
body.tax-product_cat.woocommerce ul.products li.product .added_to_cart.wc-forward,
body.tax-product_cat.woocommerce ul.products li.product a.added_to_cart.wc-forward {
	display: none !important;
	visibility: hidden !important;
	position: absolute !important;
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
}

/* WooCommerce's own native checkmark on .added (woocommerce.css:
   ".added::after{font-family:WooCommerce;content:'\e017';...}") — this is
   what was actually producing the "✓" seen next to the unchanged button
   text. Neutralized here, strictly scoped to the category grid, so our
   own supra-is-added text swap is the only success indicator shown. The
   .added class itself is left completely alone — WooCommerce owns it. */
body.tax-product_cat.woocommerce ul.products li.product > a.add_to_cart_button.added::after {
	content: none !important;
	display: none !important;
}

/* Success state (assets/js/product-archive.js adds/removes this class on
   WooCommerce's native added_to_cart event) — same button, same size,
   same border-radius, same position; only background/text color and the
   text itself change, briefly. Combined :hover variant included so this
   wins regardless of whether the pointer happens to be over the card at
   the moment of success (same specificity as the :hover rule above,
   source order alone isn't a reliable enough guarantee). */
body.tax-product_cat.woocommerce ul.products li.product > a.add_to_cart_button.supra-is-added,
body.tax-product_cat.woocommerce ul.products li.product:hover > a.add_to_cart_button.supra-is-added {
	background: #0e0e66 !important;
	color: #ffffff !important;
	/* +70% brightness only while this class is present, for more contrast
	   against a dark (hovered) card and against the white background —
	   reverts to plain #0e0e66 automatically once .supra-is-added is
	   removed, nothing else to undo. */
	filter: brightness(1.7);
	transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, filter 0.2s ease-in-out !important;
}

/* Secondary action — "Ver Produto" (YITH Quick View). [Home] colors. */
body.tax-product_cat.woocommerce ul.products li.product > a.yith-wcqv-button {
	background: #E8EDFF !important;
	color: #425fdb !important;
	border: 1px solid transparent !important;
}

body.tax-product_cat.woocommerce ul.products li.product:hover > a.yith-wcqv-button {
	background: transparent !important;
	border-color: #FFFFFF !important;
	color: #FFFFFF !important;
}

body.tax-product_cat.woocommerce ul.products li.product:hover > a.yith-wcqv-button:hover {
	background-color: #0a1b8c !important;
	transition: background-color 0.2s ease-in-out !important;
}

/* New: out-of-stock fallback link — same pill shape as the buttons above,
   muted gray/navy instead of brand blue, so it visually reads as
   "unavailable" while keeping the card's button-row height consistent. */
body.tax-product_cat.woocommerce ul.products li.product > a.button:not(.add_to_cart_button):not(.yith-wcqv-button) {
	background: #E5E7EB !important;
	color: #4B5563 !important;
	border: 1px solid transparent !important;
}

body.tax-product_cat.woocommerce ul.products li.product:hover > a.button:not(.add_to_cart_button):not(.yith-wcqv-button) {
	background: #FFFFFF !important;
	color: #000b5e !important;
}

/* =========================================================
   9. Badges — new. WooCommerce's native <span class="onsale"> (promo) and
   this plugin's own <span class="supra-stock-badge"> (out-of-stock, from
   supra_force_archive_stock_badge() in includes/product-archive.php) share
   one small pill treatment, positioned over the image frame's top-left
   corner. li.product needs position:relative for this (set in section 5).
   ========================================================= */
body.tax-product_cat.woocommerce ul.products li.product span.onsale,
body.tax-product_cat.woocommerce ul.products li.product span.supra-stock-badge {
	position: absolute !important;
	top: 32px;
	left: 32px;
	z-index: 2;
	margin: 0 !important;
	padding: 6px 14px !important;
	border-radius: 999px !important;
	font-family: 'LOFT', sans-serif !important;
	font-size: 10px !important;
	font-weight: 900 !important;
	letter-spacing: .06em !important;
	text-transform: uppercase !important;
	line-height: 1 !important;
	min-height: 0 !important;
	min-width: 0 !important;
	width: auto !important;
	height: auto !important;
}

body.tax-product_cat.woocommerce ul.products li.product span.onsale {
	background: #425fdb !important;
	color: #ffffff !important;
}

body.tax-product_cat.woocommerce ul.products li.product span.supra-stock-badge {
	background: #4B5563 !important;
	color: #ffffff !important;
}

/* =========================================================
   10. Pagination — WooCommerce's default <nav class="woocommerce-pagination">
   with a <ul class="page-numbers"> list. New — Home has no pagination.
   ========================================================= */
body.tax-product_cat.woocommerce nav.woocommerce-pagination {
	max-width: 1360px;
	margin: 12px auto 40px auto !important;
	padding: 0 20px;
	box-sizing: border-box;
	text-align: center;
}

body.tax-product_cat.woocommerce nav.woocommerce-pagination ul.page-numbers {
	display: inline-flex !important;
	gap: 8px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

body.tax-product_cat.woocommerce nav.woocommerce-pagination .page-numbers {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border-radius: 999px;
	background: #ffffff;
	border: 1px solid #DCE8F8;
	color: #0D233A;
	font-family: 'LUXE UNO', sans-serif;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.2s ease-in-out;
}

body.tax-product_cat.woocommerce nav.woocommerce-pagination a.page-numbers:hover {
	background: #425fdb;
	border-color: #425fdb;
	color: #ffffff;
}

body.tax-product_cat.woocommerce nav.woocommerce-pagination .page-numbers.current {
	background: #425fdb;
	border-color: #425fdb;
	color: #ffffff;
}

/* =========================================================
   11. CARD SCALE — Tablet/Mobile, added 2026-07-24.

   Deliberately independent from section 4's grid column breakpoints
   (max-width:1023px for 2 columns, max-width:480px for 1 column) —
   this section touches zero column/grid-template-columns rules and adds
   its own three width tiers (768-1024 / 480-767 / <=479) purely for
   card-internal scale, matching the same tier boundaries and the same
   --supra-card-* values as home-products-responsive.css for visual
   coherence between Home and the category grid (per explicit request),
   without requiring the two files' actual COLUMN counts to match — they
   don't (this file: 3 desktop / 2 up to 1023px / 1 up to 480px; Home: 4
   desktop / 3 tablet / 2 mobile-amplo / 1 mobile-estreito), and that
   column contract is untouched here, exactly as instructed.

   Same reasoning as the Home file for every property touched: aspect-
   ratio 4:5 -> 1:1 is the largest single height reduction; title goes
   from a fixed 2-line clamp (height:52px, set in section 7) to a 3-line
   clamp with a min-height sized to roughly 3 lines of each tier's own
   font-size × line-height; buttons shrink with a matching, smaller
   vertical padding; row-gap/column-gap (this file's actual "card gap" —
   li.product itself has margin:0 !important, spacing comes from the
   grid's own row-gap/column-gap in section 4) are reduced per tier.
   Desktop (>=1025px) is untouched — none of these rules reach it.
   ========================================================= */
@media (min-width: 768px) and (max-width: 1024px) {
	body.tax-product_cat.woocommerce ul.products {
		row-gap: 16px;
		column-gap: 16px;
	}

	body.tax-product_cat.woocommerce ul.products li.product {
		--supra-card-padding: 14px;
		--supra-card-image-ratio: 1 / 1;
		--supra-card-image-padding: 16px;
		--supra-card-title-size: 14px;
		--supra-card-title-line-height: 1.3;
		--supra-card-title-min-height: 54px;
		--supra-card-price-size: 22px;
		--supra-card-button-height: 46px;
		--supra-card-button-size: 11px;
		--supra-card-gap: 10px;
		--supra-card-radius: 20px;
		/* Same rationale as home-products-responsive.css's own Tablet
		   block: dedicated variable, applied to title's margin-bottom
		   (not price's margin-top, which stays "auto" — load-bearing for
		   row alignment across cards with different title lengths).
		   --supra-card-buttons-gap REMOVED 2026-07-24 — see the button
		   rules below for why (same real cause confirmed on Home; not yet
		   independently re-confirmed via live DevTools on a category page
		   specifically, since the theme's own gap:1em rule that causes it
		   — .woocommerce ul.products li.product{gap:1em} — is unscoped
		   and applies here too, on the same li.product markup, but flag
		   this to re-run the diagnostic here too if the fix doesn't hold). */
		--supra-card-price-top-gap: 13px;
		padding: var(--supra-card-padding) !important;
		border-radius: var(--supra-card-radius) !important;
	}

	body.tax-product_cat.woocommerce ul.products li.product .supra-product-image-frame {
		aspect-ratio: var(--supra-card-image-ratio) !important;
		padding: var(--supra-card-image-padding) !important;
		margin: 0 0 calc(var(--supra-card-gap) + 2px) 0 !important;
		border-radius: var(--supra-card-radius) !important;
	}

	body.tax-product_cat.woocommerce ul.products li.product .woocommerce-loop-product__title {
		-webkit-line-clamp: 3 !important;
		height: auto !important;
		min-height: var(--supra-card-title-min-height) !important;
		font-size: var(--supra-card-title-size) !important;
		line-height: var(--supra-card-title-line-height) !important;
		margin: 0 0 var(--supra-card-price-top-gap) 0 !important;
	}

	body.tax-product_cat.woocommerce ul.products li.product .price {
		font-size: var(--supra-card-price-size) !important;
		margin: auto 0 calc(var(--supra-card-gap) + 2px) 0 !important;
	}

	body.tax-product_cat.woocommerce ul.products li.product .button {
		min-height: var(--supra-card-button-height) !important;
		padding: 10px 14px !important;
		font-size: var(--supra-card-button-size) !important;
	}

	/* Real cause + fix — see home-products-responsive.css's own Tablet
	   block for the full explanation (li.product's own gap:1em/16px). */
	body.tax-product_cat.woocommerce ul.products li.product > a.add_to_cart_button {
		margin-bottom: 0 !important;
	}

	body.tax-product_cat.woocommerce ul.products li.product > a.yith-wcqv-button {
		margin-top: calc(3px - 16px) !important;
	}
}

@media (min-width: 480px) and (max-width: 767px) {
	body.tax-product_cat.woocommerce ul.products {
		row-gap: 14px;
		column-gap: 12px;
	}

	body.tax-product_cat.woocommerce ul.products li.product {
		--supra-card-padding: 12px;
		--supra-card-image-ratio: 1 / 1;
		--supra-card-image-padding: 12px;
		--supra-card-title-size: 13px;
		--supra-card-title-line-height: 1.25;
		--supra-card-title-min-height: 50px;
		--supra-card-price-size: 20px;
		--supra-card-button-height: 44px;
		--supra-card-button-size: 10px;
		--supra-card-gap: 8px;
		--supra-card-radius: 18px;
		--supra-card-price-top-gap: 11px;
		padding: var(--supra-card-padding) !important;
		border-radius: var(--supra-card-radius) !important;
	}

	body.tax-product_cat.woocommerce ul.products li.product .supra-product-image-frame {
		aspect-ratio: var(--supra-card-image-ratio) !important;
		padding: var(--supra-card-image-padding) !important;
		margin: 0 0 calc(var(--supra-card-gap) + 2px) 0 !important;
		border-radius: var(--supra-card-radius) !important;
	}

	body.tax-product_cat.woocommerce ul.products li.product .woocommerce-loop-product__title {
		-webkit-line-clamp: 3 !important;
		height: auto !important;
		min-height: var(--supra-card-title-min-height) !important;
		font-size: var(--supra-card-title-size) !important;
		line-height: var(--supra-card-title-line-height) !important;
		margin: 0 0 var(--supra-card-price-top-gap) 0 !important;
	}

	body.tax-product_cat.woocommerce ul.products li.product .price {
		font-size: var(--supra-card-price-size) !important;
		margin: auto 0 calc(var(--supra-card-gap) + 2px) 0 !important;
	}

	body.tax-product_cat.woocommerce ul.products li.product .button {
		min-height: var(--supra-card-button-height) !important;
		padding: 9px 12px !important;
		font-size: var(--supra-card-button-size) !important;
	}

	body.tax-product_cat.woocommerce ul.products li.product > a.add_to_cart_button {
		margin-bottom: 0 !important;
	}

	body.tax-product_cat.woocommerce ul.products li.product > a.yith-wcqv-button {
		margin-top: calc(3px - 16px) !important;
	}
}

@media (max-width: 479px) {
	body.tax-product_cat.woocommerce ul.products {
		row-gap: 16px;
	}

	/* Compacted further 2026-07-24 (isolated 1-column card only) —
	   identical reductions and reasoning as home-products-responsive.css's
	   own <=479px block: gap 10->8px, title 15->14px, price 23->20px,
	   button 46->44px/11->10px, radius 20->18px, image-frame padding
	   16->13px. Price still reads clearly larger than the title and the
	   primary button keeps its existing dominance — size only. */
	body.tax-product_cat.woocommerce ul.products li.product {
		--supra-card-padding: 14px;
		--supra-card-image-ratio: 1 / 1;
		--supra-card-image-padding: 13px;
		--supra-card-title-size: 14px;
		--supra-card-title-line-height: 1.3;
		--supra-card-title-min-height: 54px;
		--supra-card-price-size: 20px;
		--supra-card-button-height: 44px;
		--supra-card-button-size: 10px;
		--supra-card-gap: 8px;
		--supra-card-radius: 18px;
		--supra-card-price-top-gap: 11px;
		padding: var(--supra-card-padding) !important;
		border-radius: var(--supra-card-radius) !important;
	}

	body.tax-product_cat.woocommerce ul.products li.product .supra-product-image-frame {
		aspect-ratio: var(--supra-card-image-ratio) !important;
		padding: var(--supra-card-image-padding) !important;
		margin: 0 0 calc(var(--supra-card-gap) + 2px) 0 !important;
		border-radius: var(--supra-card-radius) !important;
	}

	body.tax-product_cat.woocommerce ul.products li.product .woocommerce-loop-product__title {
		-webkit-line-clamp: 3 !important;
		height: auto !important;
		min-height: var(--supra-card-title-min-height) !important;
		font-size: var(--supra-card-title-size) !important;
		line-height: var(--supra-card-title-line-height) !important;
		margin: 0 0 var(--supra-card-price-top-gap) 0 !important;
	}

	body.tax-product_cat.woocommerce ul.products li.product .price {
		font-size: var(--supra-card-price-size) !important;
		margin: auto 0 calc(var(--supra-card-gap) + 2px) 0 !important;
	}

	body.tax-product_cat.woocommerce ul.products li.product .button {
		min-height: var(--supra-card-button-height) !important;
		padding: 9px 12px !important;
		font-size: var(--supra-card-button-size) !important;
	}

	body.tax-product_cat.woocommerce ul.products li.product > a.add_to_cart_button {
		margin-bottom: 0 !important;
	}

	body.tax-product_cat.woocommerce ul.products li.product > a.yith-wcqv-button {
		margin-top: calc(3px - 16px) !important;
	}
}

/* ====================================================================
 * IMAGE-BOX STANDARDIZATION — added 2026-07-24
 * ====================================================================
 * Same fix and same reasoning as home-products-responsive.css's own
 * block of this name: the frame (.supra-product-image-frame) already
 * shares one aspect-ratio (1/1) across all three <=1024px tiers above,
 * but the <img> itself was still governed by section 6's base rule
 * (width:auto;height:auto;max-width:85%;max-height:80%) — letting each
 * product photo's own intrinsic ratio decide how much of the identical
 * frame it fills, which reads as inconsistent card-to-card even though
 * every frame is the same shape. Standardized here to width:100%/
 * height:100% + object-fit:contain, so object-fit alone does the
 * proportional scaling/centering and every product fills the same
 * predictable box. No cropping (contain). The frame's own padding (set
 * per tier above) already keeps the image off its edges, so no
 * additional max-width/max-height cap is layered on top. One shared
 * rule for all three tiers — nothing here varies by tier. Desktop
 * (>=1025px) keeps section 6's original rule untouched.
 */
@media (max-width: 1024px) {
	body.tax-product_cat.woocommerce ul.products li.product .supra-product-image-frame img {
		width: 100% !important;
		height: 100% !important;
		max-width: 100% !important;
		max-height: 100% !important;
		object-fit: contain !important;
		object-position: center !important;
	}
}

/* ====================================================================
 * DESKTOP BUTTON-TO-BUTTON GAP — added 2026-07-24
 * ====================================================================
 * Same confirmed cause/technique as the Mobile/Tablet fix above (see
 * those blocks for the full explanation) and the same fix just applied
 * to home-products-responsive.css. Before this block, Desktop fell
 * through to this file's own unconditional margin-bottom:4px !important
 * on the first button (section 8 above) — total 16(li.product's own
 * gap:1em)+4=20px. Same single source, same two selectors, only target
 * and breakpoint change: margin-top on the second button = 5 - 16 =
 * -11px. Mobile/Tablet's own three tiers above are untouched — this
 * only ever matches >=1025px, so their approved/frozen 3px is unaffected.
 */
@media (min-width: 1025px) {
	body.tax-product_cat.woocommerce ul.products li.product > a.add_to_cart_button {
		margin-bottom: 0 !important;
	}

	body.tax-product_cat.woocommerce ul.products li.product > a.yith-wcqv-button {
		margin-top: calc(5px - 16px) !important;
	}
}