/*
 * WooHoo catalog: filter sidebar layout and mobile filter drawer.
 *
 * Almost all of the geometry already exists in assets/css/storefront.css, which
 * was carried from the live theme: the .secondary-wrapper / #secondary widget
 * column, the .mobile-filter toggle, the .filters.close-drawer button, the
 * .mobile-overlay scrim and the body.filter-open drawer transition.
 *
 * This file only supplies what the theme shell suppresses or what the carried
 * rules did not cover:
 *   1. The two-column catalog layout. shell.css sets
 *      ".woohoo .content-area { width:100%; }", which outranks the
 *      carried brand.css ".content-area { width:76% }" on specificity. Widths
 *      below match the live rendering.
 *   2. Drawer geometry for the shop page, which the carried rule keys on
 *      ".woocommerce.archive" and therefore misses (post-type-archive-product).
 *   3. Hiding the drawer controls on desktop, where the carried rules leave the
 *      close button and the overlay visible and focusable.
 *
 * Every rule is scoped to .woohoo-catalog-filters, the body class the module
 * adds only when it renders the sidebar, so no other surface is affected.
 */

/* 1. Two-column catalog layout on desktop.
   Live values: content 76%, sidebar 17%. */
@media (min-width: 993px) {
	.woohoo.woohoo-catalog-filters .content-area {
		width: 76%;
	}

	.woohoo.woohoo-catalog-filters #secondary {
		float: left;
		width: 17%;
	}
}

/* 2. Mobile filter drawer.
   storefront.css positions #secondary as a fixed off-canvas drawer for
   ".woocommerce.archive", which covers category, tag and brand archives but not
   the shop page. These two rules mirror that geometry under this module's own
   body class so every catalog surface behaves the same. Values are identical to
   the carried rule. */
@media (max-width: 992px) {
	.woohoo-catalog-filters #secondary {
		visibility: hidden;
		overflow-y: auto;
		position: fixed;
		z-index: 102;
		top: 0;
		left: -300px;
		width: 300px !important;
		height: 100%;
		padding: 1.5rem;
		opacity: 0;
		background: #fff;
		-webkit-overflow-scrolling: touch;
		transition: 0.35s;
		transition-delay: 0.1s;
	}

	.woohoo-catalog-filters.filter-open #secondary {
		visibility: visible;
		left: 0;
		opacity: 1;
	}

	/* The sticky filter bar clears the sticky mobile header, which stays 61px
	   tall: the opened search overlays the header rather than adding a row. */
	.woohoo-catalog-filters .mobile-filter {
		top: 61px;
		cursor: pointer;
	}

	/* The overlay is a real button so it can be focused and announced. The
	   carried rule supplies its position, size and scrim colour. */
	.woohoo-catalog-filters button.mobile-overlay {
		margin: 0;
		padding: 0;
		border: 0;
		cursor: pointer;
	}

}

/* 3. Desktop must not leave the drawer controls in the tab order.
   storefront.css only hides .filters.close-drawer and .mobile-overlay inside its
   max-width:992px block, so on desktop they would render unstyled and
   focusable. */
@media (min-width: 993px) {
	.woohoo-catalog-filters .filters.close-drawer,
	.woohoo-catalog-filters .mobile-overlay {
		display: none;
	}
}

/* Catalog cards: discount circle on the photo, custom badge at the bottom. */
.woohoo ul.products li.product .woocommerce-image__wrapper {
	position: relative;
}
.woohoo ul.products li.product .woocommerce-image__wrapper .sale-item.product-label.type-circle {
	position: absolute;
	top: -5px;
	left: 10px;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 5px 7px;
	border-radius: 35px;
	background: #ec008c;
	color: #fff;
	font-size: 12px;
	font-weight: 400;
	line-height: 18px;
}
ul.products .sale-item.product-label { z-index: 3; display: flex; }
@media (max-width: 992px) {
	.mobile-filter.woohoo-mobile-toggle { z-index: 4; }
}
.woohoo ul.products li.product .onsale {
	display: none;
}

/* Category/brand title stays plain. The buying guide sits under the grid.
   Live prints the h1 outside this header, so the header is empty there;
   WooCommerce core keeps the h1 inside it, so on every taxonomy archive the
   header is a flow root instead of storefront.css's flex row: the h1 is full
   width and left-aligned at every width, with no beige background, and its
   bottom margin stays inside the header, adding to the top margin of what
   follows, as after live's empty flex header. */
.woohoo.tax-product_cat header.woocommerce-products-header,
.woohoo.tax-product_brand header.woocommerce-products-header {
	display: flow-root;
	margin-bottom: 0;
	overflow: visible;
	background: transparent;
}
.woohoo.tax-product_cat header.woocommerce-products-header .term-description,
.woohoo.tax-product_brand header.woocommerce-products-header .term-description {
	display: none;
}
.below-woocommerce-category.bimaco-category-guide {
	clear: both;
	margin: 2rem 0 0;
	padding: 1.5rem 0 0;
	border: 0;
	border-top: 1px solid #e5e7eb;
	background: transparent;
	color: #444;
	font-size: clamp(0.875rem, 0.8115rem + 0.2033vw, 0.9375rem);
	line-height: 1.5;
}
/* Shoptimizer's own rule for these category links: the global
   `a{color:#2c2d33;text-decoration:none}` reset would otherwise leave them
   plain and undecorated. */
.below-woocommerce-category a {
	color: #444;
	text-decoration: underline;
	text-decoration-thickness: 0.75px;
	text-underline-offset: 0.18em;
}
.bimaco-category-guide > :first-child {
	margin-top: 0;
}
.bimaco-category-guide > p:first-child {
	max-width: 900px;
	margin-top: 0;
	line-height: 1.55;
}
.bimaco-category-guide p {
	line-height: 1.55;
}
.bimaco-category-guide > p {
	line-height: 1.5;
}
.bimaco-category-guide h2 {
	margin: 1.290683em 0 16px;
	color: #444;
	font-size: 30px;
	font-weight: 600;
	line-height: 1.25;
}
.bimaco-category-guide h3 {
	margin: 1.290683em 0 8px;
	color: #444;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.45;
}
.bimaco-category-guide .bimaco-cat-faq {
	margin-top: 1.75rem;
}
.bimaco-category-guide .bimaco-cat-faq h2 {
	margin-top: 0;
	margin-bottom: 0.65rem;
}
.bimaco-category-guide .bimaco-cat-faq h3 {
	margin: 1em 0 0.3em;
	font-size: 1.05em;
	line-height: 1.45;
}
/* No font-size or line-height here: the inherited values (unitless 1.5, and
   16px above 768px against storefront.css's `.site{font-size:15px}` at and
   below it) already step down at tablet and mobile, as on live. */
nav.bimaco-cat-links {
	margin: 1.5em 0;
	color: #444;
}
nav.bimaco-cat-links h2 {
	margin: 0 0 16px;
	color: #444;
	font-size: 1.1em;
	font-weight: 600;
}
nav.bimaco-cat-links ul {
	columns: 2;
	padding-left: 1.2em;
	list-style: disc;
}
nav.bimaco-cat-links li {
	margin: 0;
}
nav.bimaco-cat-links a {
	color: #444;
	text-decoration: none;
}
@media (max-width: 768px) {
	.below-woocommerce-category.bimaco-category-guide {
		margin: 1.5rem 0 0;
		padding: 1.25rem 0 0;
	}
	.bimaco-category-guide h2 {
		font-size: clamp(1.375rem, 0.9939rem + 1.2195vw, 1.75rem);
		letter-spacing: -0.01em;
	}
	.bimaco-category-guide table {
		display: block;
		width: 100%;
		margin: 1.25rem 0 1.5rem;
		border: 0;
		font-size: 16px;
		line-height: 1.45;
	}
	.bimaco-category-guide table thead {
		display: none;
	}
	.bimaco-category-guide table tbody,
	.bimaco-category-guide table tr,
	.bimaco-category-guide table td {
		display: block;
		width: 100%;
	}
	.bimaco-category-guide table tr {
		padding: 1rem 0;
		border-bottom: 1px solid #e5e7eb;
	}
	.bimaco-category-guide table td {
		padding: 0;
		border: 0;
		color: #444;
	}
	.bimaco-category-guide table td + td {
		margin-top: 0.65rem;
	}
	.bimaco-category-guide table td::before {
		content: attr(data-label);
		display: block;
		margin-bottom: 0.15rem;
		color: #6b7280;
		font-size: 0.78rem;
		font-weight: 600;
		line-height: 1.25;
	}
	.bimaco-category-guide table td:first-child {
		color: #2c2d33;
		font-weight: 600;
	}
}

@media (min-width: 993px) {
	.woohoo.woohoo-catalog-filters form.woocommerce-ordering {
		display: inline-flex;
		width: 258px;
		margin: 0;
	}
	.woohoo.woohoo-catalog-filters form.woocommerce-ordering select.orderby {
		width: 258px;
		max-width: 100%;
	}
}
@media (max-width: 992px) {
	/* No width override: both dropdowns inherit storefront.css's
	   `select.orderby{width:100%}` inside `.woohoo-sorting`'s auto-sized grid
	   tracks, which gives the two instances their different widths, as on live;
	   a flat width or "auto" here would force both to the same size. */
}

@media (max-width: 770px) {
	/* Live's fluid clamp(): 13px at its floor on narrow viewports, up to 14px. */
	.woohoo ul.products li.product .woocommerce-loop-product__title,
	.woohoo ul.products li.product h2.woocommerce-loop-product__title {
		color: #444;
		font-size: clamp(0.8125rem, 0.749rem + 0.2033vw, 0.875rem);
		font-weight: 600;
		line-height: 1.3;
		margin: 0;
	}
}

.woohoo ul.products li.product .woocommerce-loop-product__title,
.woohoo ul.products li.product h2.woocommerce-loop-product__title {
	margin: 0;
}
.woohoo ul.products li.product .product__categories {
	color: #444;
	font-size: clamp(0.625rem, 0.5615rem + 0.2033vw, 0.6875rem);
	font-weight: 400;
	letter-spacing: 0.7px;
	line-height: 1.4;
	text-transform: uppercase;
}
.woohoo-catalog-filters .widget_archive,
.woohoo-catalog-filters #secondary > .widget_categories {
	display: none !important;
}
.woohoo-catalog-filters #secondary .widget ul li.bimaco-brand-filter-heading {
	display: block;
	list-style: none;
	margin: 12px 0 6px;
	padding: 0;
}
.woohoo-catalog-filters #secondary .widget ul li.bimaco-brand-filter-heading > span {
	display: block;
	color: #777;
	font-size: 13px;
	font-weight: 700;
	line-height: 16.25px;
}
.woohoo-catalog-filters #secondary .widget ul li.bimaco-brand-filter-toggle-row {
	margin: 14px 0 8px;
}
.woohoo-catalog-filters .bimaco-brand-filter-heading::before,
.woohoo-catalog-filters .bimaco-brand-filter-letter::before {
	content: none;
	display: none;
}
.woohoo-catalog-filters .bimaco-brand-filter-toggle {
	display: flex;
	align-items: center;
	width: 100%;
	padding: 4px 0;
	border: 0;
	background: transparent;
	color: #222;
	font-size: 13px;
	font-weight: 700;
	line-height: 16.25px;
	text-align: left;
	cursor: pointer;
}
.woohoo-catalog-filters .wc-brand-list-layered-nav-product_brand .bimaco-brand-filter-promoted > a {
	font-weight: 700;
}
.woohoo-catalog-filters .bimaco-brand-filter-toggle-icon {
	position: relative;
	width: 16px;
	height: 16px;
	margin-left: 10px;
	color: #777;
}
.woohoo-catalog-filters .bimaco-brand-filter-toggle-icon::before {
	content: "";
	position: absolute;
	top: 2px;
	left: 4px;
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
}
.woohoo-catalog-filters .bimaco-brand-filter-expanded .bimaco-brand-filter-toggle-icon::before {
	top: 6px;
	transform: rotate(225deg);
}
.woohoo-catalog-filters .wc-brand-list-layered-nav-product_brand.bimaco-brand-filter-collapsible:not(.bimaco-brand-filter-expanded) .bimaco-brand-filter-all {
	display: none;
}
.woohoo-catalog-filters .bimaco-brand-filter-letter {
	margin: 12px 0 4px;
	color: #999;
	font-size: 12px;
	font-weight: 700;
}
.woohoo ul.products li.product .product__categories a {
	color: #444;
	text-decoration: none;
}

/* Category intro banner (catalog-mobile-filters.php), ported
   verbatim from live's #bimaco-arrival-offer-entry-inline-css. */
.bimaco-arrival-offer-entry {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	margin: 18px 0;
	padding: 14px 18px;
	border: 1px solid #eadfe6;
	border-radius: 12px;
	background: #fbf5f9;
	color: #3f3740;
	line-height: 1.45;
	font-size: 14px;
}
.bimaco-arrival-offer-entry span {
	display: block;
	min-width: 0;
}
.bimaco-arrival-offer-entry a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	flex-shrink: 0;
	color: #ec008c;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.bimaco-arrival-offer-entry a:hover {
	color: #790049;
}
.bimaco-arrival-offer-entry a:focus-visible {
	outline: 2px solid #a50063;
	outline-offset: 4px;
	border-radius: 2px;
}
@media (max-width: 767px) {
	.bimaco-arrival-offer-entry {
		display: block;
		margin: 16px 0 18px;
		padding: 12px 16px;
	}
	.bimaco-arrival-offer-entry a {
		margin-top: 4px;
		max-width: 100%;
		overflow-wrap: anywhere;
	}
}
@media (min-width: 993px) {
	body.bimaco-dynamic-product-archive .filters.close-drawer {
		display: none !important;
		visibility: hidden !important;
	}
}
@media (max-width: 992px) {
	body.woocommerce.archive.bimaco-dynamic-product-archive #secondary {
		left: -100vw !important;
		max-width: 100vw;
		width: 100vw !important;
	}
	body.woocommerce.archive.bimaco-dynamic-product-archive.filter-open #secondary {
		left: 0 !important;
	}
	body.bimaco-dynamic-product-archive.filter-open .filters.close-drawer {
		display: block;
		left: auto;
		right: 12px;
		visibility: visible;
	}
}