/* ==========================================================================
   The shop sidebar: categories, price, rating.

   Loaded on the shop and product-taxonomy archives only, after ux.css
   (it depends on af-ux), by AF_Shop_Sidebar.

   Written as a list you pick from, the way a sidebar in a Mac app reads:
   quiet section labels, whole-row targets, the current place tinted green,
   counts as grey figures at the end of the row. The products stay the
   loudest thing on the page.

   Several rules below carry !important. That is not taste: ux.css sets
   the sidebar's link colour, size and padding with !important for its
   accessibility pass, and a later sheet can only refine those with the
   same weight. The floors it set (17px text, 44px rows, 4.5:1 contrast)
   are all kept.
   ========================================================================== */

:root {
	--afs-ink: #1d1d1f;
	--afs-grey: #6e6e73;
	--afs-green: #1b5e20;
	--afs-green-2: #2e7d32;
	--afs-tint: #e8f5e9;
	--afs-tint-2: #d7ecd9;
	--afs-hover: #f5f5f7;
	--afs-line: #e5e5ea;
	--afs-radius: 12px;
	--afs-ease: cubic-bezier(.25, .1, .25, 1);
}

/* --- width ---------------------------------------------------------------
   ux.css moved the column from a quarter of the row to a fifth. A fifth
   keeps growing with the screen, though: 384px at 1920, far more than a
   list of eight words needs. So a fifth, but never more than 272px; on
   a 1440 screen that is 272 instead of 288, and every pixel saved goes
   to the product grid.

   The float grid places the two columns against each other (the sidebar
   is pulled right by the grid's width, the grid pushed left by the
   sidebar's), so all four numbers are the same expression. */
@media (min-width: 992px) {
	body.post-type-archive-product .col-md-3.sidebar,
	body.tax-product_cat .col-md-3.sidebar,
	body.tax-product_tag .col-md-3.sidebar {
		width: min(20%, 272px);
		right: calc(100% - min(20%, 272px));
		padding-right: 28px;
	}

	body.post-type-archive-product .main-products-loop.col-md-9,
	body.tax-product_cat .main-products-loop.col-md-9,
	body.tax-product_tag .main-products-loop.col-md-9 {
		width: calc(100% - min(20%, 272px));
		left: min(20%, 272px);
	}
}

/* Between 992 and 1199 a fifth is barely 200px. The gutter gives some of
   that back so "Cuști de transport" and its count still share a line. */
@media (min-width: 992px) and (max-width: 1199px) {
	body.post-type-archive-product .col-md-3.sidebar,
	body.tax-product_cat .col-md-3.sidebar,
	body.tax-product_tag .col-md-3.sidebar {
		padding-right: 12px;
	}
}

/* --- phones and tablets: the sidebar as a drawer ------------------------
   Below 992px XStore turns the sidebar into an off-canvas panel (z 100)
   behind a dimming layer (.et-close-sidebar, z 99). The sticky header is
   z 1000, so the drawer opened *under* it: the logo and the search box
   sat on top of the category list. Both are lifted above the header, the
   dimming layer first so it covers the header too, as a sheet should. */
@media (max-width: 991px) {
	.et-close-sidebar {
		z-index: 1001 !important;
	}

	.sidebar.et-mini-content {
		z-index: 1002 !important;
		padding-top: calc(env(safe-area-inset-top, 0px) + 24px) !important;
		padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 24px) !important;
		box-shadow: 0 0 40px rgba(0, 0, 0, .18);
	}
}

/* --- the widgets as sections ------------------------------------------- */
.sidebar .sidebar-widget {
	display: block;
	width: 100%;
	margin: 0 0 32px;
}

/* A section label, not a headline: the category names are what you read.
   Sentence case, because shouted capitals are harder to read, and the
   label is grey so it does not compete with the rows under it. */
.sidebar .sidebar-widget .widget-title {
	margin: 0 0 6px !important;
	padding: 0 12px !important;
	border: 0 !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	letter-spacing: .01em;
	text-transform: none !important;
	color: var(--afs-grey) !important;
}

.sidebar .sidebar-widget .widget-title span {
	padding: 0 !important;
	font: inherit !important;
	text-transform: none !important;
	color: inherit !important;
}

/* --- category list ------------------------------------------------------ */
.sidebar .product-categories,
.sidebar .product-categories .children {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sidebar .product-categories li {
	position: relative;
	margin: 0 0 2px;
	padding: 0;
}

.sidebar .product-categories li > a {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	/* XStore caps the link at calc(100% - 30px) to leave room for its
	   arrow; the arrow is placed over the row's padding instead (below). */
	max-width: none !important;
	min-height: 44px;
	padding: 10px 12px !important;
	border-radius: 10px;
	font-size: 17px !important;
	font-weight: 400;
	line-height: 1.3 !important;
	text-transform: none !important;
	text-decoration: none !important;
	color: var(--afs-ink) !important;
	transition: background-color .2s var(--afs-ease), color .2s var(--afs-ease);
}

/* The theme draws an underline under the current category's parent with
   a pseudo-element. The tint and weight say "you are here" already. */
.sidebar .product-categories li > a::before,
.sidebar .product-categories li > a::after {
	content: none !important;
}

.sidebar .product-categories li > a:hover {
	background: var(--afs-hover);
	color: var(--afs-ink) !important;
}

.sidebar .product-categories li > a:focus-visible {
	outline: 2px solid var(--afs-green-2);
	outline-offset: 2px;
}

/* 15px is under ux.css's 17px floor for informative text on purpose: the
   figure is secondary to the name beside it and is read out in full, with
   its noun, to screen readers. #6e6e73 on white is 5.0:1. */
.af-shopcats__count {
	flex: none;
	font-size: 15px;
	font-variant-numeric: tabular-nums;
	color: var(--afs-grey);
}

/* Where you are. The page you are on, and on a subcategory the parent it
   belongs to, in a lighter hand, so the path through the tree is visible. */
.sidebar .product-categories li.current-cat > a {
	background: var(--afs-tint);
	color: var(--afs-green) !important;
	font-weight: 600;
}

.sidebar .product-categories li.current-cat > a .af-shopcats__count {
	color: var(--afs-green-2);
}

.sidebar .product-categories li.current-cat-parent > a {
	color: var(--afs-green) !important;
	font-weight: 600;
}

/* Subcategories: indented under the parent, a size down. */
.sidebar .product-categories .children {
	margin: 2px 0 6px 12px !important;
	padding: 0 0 0 8px !important;
	border-left: 1px solid var(--afs-line);
}

.sidebar .product-categories .children li > a {
	font-size: 16px !important;
	min-height: 40px;
	padding-top: 8px !important;
	padding-bottom: 8px !important;
}

/* XStore's open/close arrow on a category with subcategories. Its own
   script inserts it and handles the tap, so only its place and size are
   ours: a 44px target at the end of the row, with the row's text and
   count moved clear of it. */
.sidebar .product-categories li.cat-parent > a {
	padding-right: 48px !important;
}

.sidebar .product-categories li.cat-parent > .et-icon {
	position: absolute !important;
	top: 0 !important;
	right: 0 !important;
	left: auto !important;
	z-index: 1;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 44px !important;
	height: 44px !important;
	margin: 0 !important;
	border-radius: 10px;
	font-size: 10px !important;
	line-height: 1 !important;
	color: var(--afs-grey) !important;
	cursor: pointer;
	transform: none !important;
	transition: background-color .2s var(--afs-ease), color .2s var(--afs-ease);
}

.sidebar .product-categories li.cat-parent > .et-icon::before {
	display: inline-block;
	transition: transform .25s var(--afs-ease);
}

.sidebar .product-categories li.cat-parent > .et-icon:hover {
	background: rgba(0, 0, 0, .05);
	color: var(--afs-ink) !important;
}

/* --- price -------------------------------------------------------------- */
.sidebar .widget_price_filter form {
	padding: 4px 12px 0;
}

.sidebar .widget_price_filter .price_slider {
	height: 4px !important;
	margin: 14px 0 18px !important;
	border: 0 !important;
	border-radius: 2px !important;
	background: var(--afs-line) !important;
}

.sidebar .widget_price_filter .ui-slider-range {
	top: 0 !important;
	height: 4px !important;
	border-radius: 2px !important;
	background: var(--afs-green-2) !important;
}

/* The thumb from a Mac slider: white, round, lifted by a shadow rather
   than outlined. 24px drawn; the ::before below makes the target 44px. */
.sidebar .widget_price_filter .ui-slider-handle {
	top: 50% !important;
	width: 24px !important;
	height: 24px !important;
	margin: -12px 0 0 -12px !important;
	border: .5px solid rgba(0, 0, 0, .06) !important;
	border-radius: 50% !important;
	background: #fff !important;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .22), 0 0 0 0 rgba(46, 125, 50, 0);
	/* The theme lifts the handle with a translate of its own; the margin
	   above already centres it on the track. */
	transform: none !important;
	cursor: grab;
	transition: box-shadow .2s var(--afs-ease), scale .2s var(--afs-ease);
}

.sidebar .widget_price_filter .ui-slider-handle::before {
	content: "";
	position: absolute;
	inset: -10px;
	border-radius: 50%;
}

.sidebar .widget_price_filter .ui-slider-handle:focus-visible,
.sidebar .widget_price_filter .ui-slider-handle.ui-state-active {
	outline: none;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .22), 0 0 0 4px rgba(46, 125, 50, .22);
}

.sidebar .widget_price_filter .ui-slider-handle.ui-state-active {
	cursor: grabbing;
	scale: 1.08;
}

.sidebar .widget_price_filter .price_slider_amount {
	display: flex;
	flex-direction: column;
	gap: 12px;
	text-align: left !important;
}

/* The two ends of the range under the two ends of the slider. See
   woocommerce/content-widget-price-filter.php for why there is no word
   or dash between them. */
.sidebar .widget_price_filter .price_label {
	display: flex !important;
	justify-content: space-between;
	gap: 8px;
	margin: 0 !important;
	font-size: 16px !important;
	font-variant-numeric: tabular-nums;
	color: var(--afs-ink) !important;
}

.sidebar .widget_price_filter .price_label[style*="display:none"],
.sidebar .widget_price_filter .price_label[style*="display: none"] {
	display: none !important;
}

.sidebar .widget_price_filter .price_slider_amount .button {
	float: none !important;
	width: 100%;
	min-height: 44px;
	margin: 0 !important;
	padding: 0 16px !important;
	border: 0 !important;
	border-radius: var(--afs-radius) !important;
	background: var(--afs-tint) !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--afs-green) !important;
	box-shadow: none !important;
	transition: background-color .2s var(--afs-ease);
}

.sidebar .widget_price_filter .price_slider_amount .button:hover {
	background: var(--afs-tint-2) !important;
}

.sidebar .widget_price_filter .price_slider_amount .button:focus-visible {
	outline: 2px solid var(--afs-green-2);
	outline-offset: 2px;
}

/* --- rating ------------------------------------------------------------- */
.sidebar .widget_rating_filter ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sidebar .widget_rating_filter li {
	margin: 0 0 2px;
	padding: 0;
}

.sidebar .widget_rating_filter li a {
	display: flex !important;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 10px 12px !important;
	border-radius: 10px;
	font-size: 15px !important;
	text-decoration: none !important;
	color: var(--afs-grey) !important;
	transition: background-color .2s var(--afs-ease);
}

/* The theme marks the chosen rating with a tick drawn in the left edge,
   outside the row. The tint and weight mark it here, inside the row. */
.sidebar .widget_rating_filter li::before,
.sidebar .widget_rating_filter li::after,
.sidebar .widget_rating_filter li a::before,
.sidebar .widget_rating_filter li a::after {
	content: none !important;
	display: none !important;
}

.sidebar .widget_rating_filter li a:hover {
	background: var(--afs-hover);
}

.sidebar .widget_rating_filter li.chosen a {
	background: var(--afs-tint);
	color: var(--afs-green) !important;
	font-weight: 600;
}

.sidebar .widget_rating_filter .star-rating {
	margin: 0 !important;
	float: none !important;
}

/* --- motion ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.sidebar .product-categories li > a,
	.sidebar .product-categories li.cat-parent > .et-icon,
	.sidebar .product-categories li.cat-parent > .et-icon::before,
	.sidebar .widget_price_filter .ui-slider-handle,
	.sidebar .widget_price_filter .price_slider_amount .button,
	.sidebar .widget_rating_filter li a {
		transition: none !important;
	}

	.sidebar .widget_price_filter .ui-slider-handle.ui-state-active {
		scale: none;
	}
}