/*
 * Shop archive pagination.
 *
 * Astra draws a 1px border on every pagination item and colours it with its
 * global Link Color:
 *   themes/astra/assets/css/minified/compatibility/woocommerce/woocommerce-grid.min.css
 *     .woocommerce-js nav.woocommerce-pagination ul li{border:1px solid var(--ast-border-color)}
 *   themes/astra/inc/compatibility/woocommerce/class-astra-woocommerce.php:1677
 *     '.woocommerce nav.woocommerce-pagination ul,... ul li' => array('border-color' => $link_color)
 *
 * Elementor Pro cannot address this: its pagination_border_color control only
 * writes border-right-color and border-left-color on the item
 * (elementor-pro/modules/woocommerce/widgets/products-base.php:794-806), so the
 * top and bottom edges remain visible whatever that control is set to.
 *
 * The colour is neutralised rather than the width removed, so the 1px box is
 * still occupied and nothing shifts. Setting border-width to 0 would reclaim
 * 2px per item and change the spacing.
 *
 * Specificity: 3 classes + 4 types (0,3,4) beats Astra's (0,2,3), so no
 * !important is required even though Astra's dynamic CSS is printed later in
 * the document than this stylesheet.
 *
 * The focus indicator is untouched: Astra applies it to the anchor
 * (ul.page-numbers li a:focus), not to the list item styled here.
 */
body.woocommerce-shop .elementor-wc-products nav.woocommerce-pagination ul li,
body.tax-product_cat .elementor-wc-products nav.woocommerce-pagination ul li,
body.tax-product_brand .elementor-wc-products nav.woocommerce-pagination ul li {
	border-color: transparent;
}

/* ---------------------------------------------------------------------------
 * Character archive sidebar navigation.
 *
 * Visual polish only for WooCommerce's native Product Categories widget on
 * Character (product category) archives. Widget, settings, markup, hierarchy,
 * counts, links and taxonomy behaviour are all untouched. Structure emitted:
 *   ul.product-categories > li.cat-item        = Brand  (navigation group)
 *   li.cat-parent > ul.children > li.cat-item  = Character (nav item)
 *   li.current-cat / li.current-cat-parent     = active states
 *   span.count                                 = product count badge
 *
 * Scoped to body.tax-product_cat so the Shop archive cannot be affected.
 * Specificity sits just above WooCommerce's own widget rules, so no !important.
 * span.count is a SIBLING of the anchor, so the anchor is the row and the badge
 * is positioned against the list item. The badge is therefore top-anchored, not
 * centred with translateY: a Brand <li> also contains the expanded children
 * list, so 50% would drop the badge into the middle of the whole group.
 * --------------------------------------------------------------------------- */

body.tax-product_cat .widget_product_categories > h5,
body.tax-product_brand .widget_product_categories > h5 {
	margin: 0 0 22px;
	padding-bottom: 12px;
	position: relative;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 26px;
	color: #111222;
	border-bottom: 1px solid #ECEDEF;
}

body.tax-product_cat .widget_product_categories > h5::after,
body.tax-product_brand .widget_product_categories > h5::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 28px;
	height: 2px;
	border-radius: 1px;
	background-color: #FF9C00;
}

body.tax-product_cat .widget_product_categories ul.product-categories,
body.tax-product_brand .widget_product_categories ul.product-categories,
body.tax-product_cat .widget_product_categories ul.children,
body.tax-product_brand .widget_product_categories ul.children {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.tax-product_cat .woocommerce ul.product-categories > li ul li::before,
body.tax-product_brand .woocommerce ul.product-categories > li ul li::before {
	content: none;
}

body.tax-product_cat .widget_product_categories li.cat-item,
body.tax-product_brand .widget_product_categories li.cat-item {
	position: relative;
	margin: 0;
	padding: 0;
	border: 0;
}

body.tax-product_cat .widget_product_categories li.cat-item > a,
body.tax-product_brand .widget_product_categories li.cat-item > a {
	display: block;
	padding: 9px 52px 9px 12px;
	border-radius: 6px;
	text-decoration: none;
	transition: background-color .22s cubic-bezier(.4, 0, .2, 1), color .22s cubic-bezier(.4, 0, .2, 1), padding-left .22s cubic-bezier(.4, 0, .2, 1);
}

body.tax-product_cat .widget_product_categories > ul.product-categories > li.cat-item > a,
body.tax-product_brand .widget_product_categories > ul.product-categories > li.cat-item > a {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	line-height: 1.5;
	color: #111222;
}

/* Nested indent only. On the Brand Archive this list is the top level of the
 * widget, not a sub-list, so it is deliberately left out of this rule. */
body.tax-product_cat .widget_product_categories ul.children {
	margin: 4px 0 0;
	padding-left: 12px;
}

body.tax-product_cat .widget_product_categories ul.children > li.cat-item > a,
body.tax-product_brand .widget_product_categories ul.children > li.cat-item > a {
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.5;
	color: #5A6069;
}

body.tax-product_cat .woocommerce ul.product-categories > li ul li a,
body.tax-product_brand .woocommerce ul.product-categories > li ul li a {
	margin-left: 0;
}

body.tax-product_cat .widget_product_categories li.cat-item > a:hover,
body.tax-product_brand .widget_product_categories li.cat-item > a:hover,
body.tax-product_cat .widget_product_categories li.cat-item > a:focus-visible,
body.tax-product_brand .widget_product_categories li.cat-item > a:focus-visible {
	background-color: rgba(255, 156, 0, 0.06);
	color: #111222;
	padding-left: 15px;
}

body.tax-product_cat .widget_product_categories li.current-cat > a,
body.tax-product_brand .widget_product_categories li.current-cat > a {
	background-color: rgba(255, 156, 0, 0.10);
	color: #111222;
	font-weight: 600;
	border-radius: 8px;
	box-shadow: inset 3px 0 0 #FF9C00;
}

body.tax-product_cat .widget_product_categories li.current-cat-parent > a,
body.tax-product_brand .widget_product_categories li.current-cat-parent > a {
	color: #111222;
}

body.tax-product_cat .widget_product_categories .count,
body.tax-product_brand .widget_product_categories .count {
	position: absolute;
	top: 8px;
	right: 12px;
	float: none;
	min-width: 24px;
	height: 22px;
	padding: 0 8px;
	font-size: 12px;
	font-weight: 600;
	line-height: 22px;
	letter-spacing: 0;
	text-align: center;
	color: #5A6069;
	background-color: #F1F2F4;
	border-radius: 11px;
	transition: background-color .22s cubic-bezier(.4, 0, .2, 1), color .22s cubic-bezier(.4, 0, .2, 1);
}

body.tax-product_cat .widget_product_categories > ul.product-categories > li.cat-item + li.cat-item,
body.tax-product_brand .widget_product_categories > ul.product-categories > li.cat-item + li.cat-item {
	margin-top: 18px;
}

body.tax-product_cat .widget_product_categories li.cat-item > a:hover ~ .count,
body.tax-product_brand .widget_product_categories li.cat-item > a:hover ~ .count,
body.tax-product_cat .widget_product_categories li.cat-item > a:focus-visible ~ .count,
body.tax-product_brand .widget_product_categories li.cat-item > a:focus-visible ~ .count {
	color: #111222;
	background-color: rgba(255, 156, 0, 0.16);
}

body.tax-product_cat .widget_product_categories li.current-cat > a ~ .count,
body.tax-product_brand .widget_product_categories li.current-cat > a ~ .count {
	color: #111222;
	background-color: rgba(255, 156, 0, 0.18);
}

/* ---------------------------------------------------------------------------
 * Character archive vertical rhythm.
 * Tightens the toolbar row above the grid and the container's trailing space so
 * the page reads denser without touching card width, image ratio, column count
 * or any breakpoint. Grid gaps themselves are set through the widget's own
 * native Columns/Rows Gap controls, not here.
 * --------------------------------------------------------------------------- */

body.tax-product_cat .woocommerce-result-count,
body.tax-product_brand .woocommerce-result-count {
	margin: 0 0 20px;
	font-size: 14px;
	color: #5A6069;
	line-height: 40px;
}

body.tax-product_cat .woocommerce-ordering,
body.tax-product_brand .woocommerce-ordering {
	margin: 0 0 20px;
}

/* Sidebar block starts flush with the grid column's top edge, so the widget
 * title (26 + 12 + 22 = 60px) and the toolbar row (40 + 20 = 60px) occupy the
 * same vertical space and the first category lines up with the first product
 * row. Both numbers are set here, so the alignment is deterministic. */

body.tax-product_cat .widget_product_categories,
body.tax-product_brand .widget_product_categories {
	margin: 0;
	padding: 0;
}

/* Character archive only: fix the toolbar row at 40px so the 60px block above
 * ul.products is exact. The Shop archive keeps its own select sizing. */

body.tax-product_cat .woocommerce-ordering select,
body.tax-product_brand .woocommerce-ordering select {
	height: 40px;
	padding-top: 0;
	padding-bottom: 0;
	line-height: 38px;
	font-size: 14px;
}

/* Brand archive only: the sorting control sat high because the form is an
 * inline formatting context. Astra sets vertical-align: baseline on select, so
 * the control hangs from the line box baseline and the strut's descender is
 * added underneath it, leaving the form taller than the 40px result-count line
 * and the control itself positioned by inherited font metrics rather than by
 * the toolbar row. Making the form a 40px flex row removes the strut, so the
 * control is centred in a box exactly as tall as the result count and the two
 * share one centre line. Width, border, colours, type and spacing are all set
 * elsewhere and are untouched. */

body.tax-product_brand .woocommerce-ordering {
	display: flex;
	align-items: center;
	height: 40px;
}