/**
 * Whuploo Shop
 * Clean catalogue visual system
 *
 * Front-end presentation only.
 * WooCommerce remains responsible for catalogue data,
 * pricing, stock, variations, sorting and filtering.
 */

:root {
	/* Shop-only colours — never override global header/footer variables */
	--whuploo-shop-red: #C21B1B;
	--whuploo-shop-alt-red: #FF402F;
	--whuploo-shop-cream: #FFFAE8;
	--whuploo-shop-black: #1E1E1E;

	--whuploo-shop-white: #FFFFFF;
	--whuploo-shop-muted: #75695E;
	--whuploo-shop-line: rgba(30, 30, 30, 0.14);

	--whuploo-shop-width: 1360px;
	--whuploo-shop-ease: cubic-bezier(0.16, 1, 0.3, 1);
}


/* =========================================================
   SHOP CANVAS
   ========================================================= */

body.woocommerce-shop,
body.tax-product_cat {
	background: #FFFAF4;
	color: var(--whuploo-shop-black);
}


/*
 * Let the catalogue use the available page width.
 * Header/footer remain owned by the global Whuploo system.
 */
body.woocommerce-shop .site-content > .ast-container,
body.tax-product_cat .site-content > .ast-container {
	display: block;
	width: 100%;
	max-width: calc(var(--whuploo-shop-width) + 72px);
	margin-inline: auto;
	padding-left: 36px;
	padding-right: 36px;
}


/* =========================================================
   SHOP FIRST-PAINT LAYOUT
   ========================================================= */

/*
 * The Whuploo catalogue controls are now rendered by PHP,
 * so the visible Shop layout exists from first paint.
 *
 * #primary therefore keeps its final full-width geometry
 * permanently rather than changing when JavaScript enhances
 * the filter drawer.
 *
 * .whuploo-shop-pending is retained only as a safe early
 * state for the off-screen Woo sidebar/filter drawer.
 */

body.woocommerce-shop #primary,
body.tax-product_cat #primary {
	width: 100%;
	max-width: none;
	border: 0;
	margin: 0;
	padding: 0;
}


body.woocommerce-shop .ast-woocommerce-container,
body.tax-product_cat .ast-woocommerce-container {
	width: 100%;
	max-width: var(--whuploo-shop-width);
	margin: 0 auto;
	padding: 38px 0 96px;
}


/* Remove the old large page-title treatment. */
body.woocommerce-shop .woocommerce-breadcrumb,
body.tax-product_cat .woocommerce-breadcrumb,
body.woocommerce-shop .woocommerce-products-header__title,
body.tax-product_cat .woocommerce-products-header__title {
	display: none;
}


/*
 * Do not hide the full products header.
 * If category descriptions are added later,
 * WooCommerce can still render them.
 */
body.woocommerce-shop .woocommerce-products-header,
body.tax-product_cat .woocommerce-products-header {
	margin: 0;
	padding: 0;
}


/* Woo notices remain fully native and visible. */
body.woocommerce-shop .woocommerce-notices-wrapper,
body.tax-product_cat .woocommerce-notices-wrapper {
	clear: both;
}


/* =========================================================
   TOP CATALOGUE CONTROLS
   ========================================================= */

.whuploo-shop-controls {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 18px;

	width: 100%;
	min-height: 56px;

	margin: 0 0 18px;
	padding: 6px 10px 6px 12px;

	background: #F6F6F6;
	border: 0.1px solid var(--whuploo-shop-black);
	border-radius: 22px;
}


/* Category navigation */

.whuploo-shop-categories {
	display: flex;
	align-items: center;
	gap: 2px;

	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
}

.whuploo-shop-categories::-webkit-scrollbar {
	display: none;
}


.whuploo-shop-category {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 34px;
	padding: 0 14px;

	border-radius: 999px;

	color: var(--whuploo-shop-black);
	background: transparent;

	font-family: var(--whuploo-font,Poppins,Arial,Helvetica,sans-serif);
	font-size: 10px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	white-space: nowrap;

	transition:
		background-color 180ms ease,
		color 180ms ease;
}


.whuploo-shop-category:hover,
.whuploo-shop-category:focus-visible {
	background: rgba(194, 27, 27, 0.08);
	color: var(--whuploo-shop-red);
}


.whuploo-shop-category.is-active {
	background: var(--whuploo-shop-red);
	color: var(--whuploo-shop-white);
}


/* Right-side controls */

.whuploo-shop-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
}


/* Native Woo result count — moved, not recreated. */

.whuploo-shop-actions .woocommerce-result-count {
	float: none;
	margin: 0 4px 0 0;
	padding: 0;

	color: var(--whuploo-shop-muted);

	font-family: var(--whuploo-font,Poppins,Arial,Helvetica,sans-serif);
	font-size: 9px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
}


/* Filter toggle */

.whuploo-filter-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;

	min-height: 38px;
	padding: 0 15px;

	border: 1px solid rgba(30, 30, 30, 0.30);
	border-radius: 999px;

	background: var(--whuploo-shop-white);
	color: var(--whuploo-shop-black);

	font-family: var(--whuploo-font,Poppins,Arial,Helvetica,sans-serif);
	font-size: 10px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;

	cursor: pointer;

	transition:
		border-color 180ms ease,
		color 180ms ease,
		background-color 180ms ease;
}


.whuploo-filter-toggle:hover,
.whuploo-filter-toggle:focus-visible {
	border-color: var(--whuploo-shop-red);
	background: var(--whuploo-shop-red);
	color: var(--whuploo-shop-white);
}


.whuploo-filter-icon {
	position: relative;

	width: 15px;
	height: 12px;

	display: inline-block;
}


.whuploo-filter-icon::before,
.whuploo-filter-icon::after {
	content: "";

	position: absolute;
	left: 0;

	width: 15px;
	height: 1px;

	background: currentColor;
}


.whuploo-filter-icon::before {
	top: 3px;
}


.whuploo-filter-icon::after {
	bottom: 3px;
}


/* Native Woo sort form — moved, not recreated. */

.whuploo-shop-actions .woocommerce-ordering {
	float: none;

	display: flex;
	align-items: center;
	gap: 8px;

	min-height: 38px;
	margin: 0;
	padding: 0 11px 0 15px;

	border: 1px solid rgba(30, 30, 30, 0.30);
	border-radius: 999px;

	background: var(--whuploo-shop-white);
}


.whuploo-shop-actions .woocommerce-ordering::before {
	content: "SORT";

	color: var(--whuploo-shop-black);

	font-family: var(--whuploo-font,Poppins,Arial,Helvetica,sans-serif);
	font-size: 10px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.08em;
}


.whuploo-shop-actions .woocommerce-ordering select {
	width: auto;
	min-width: 108px;
	height: 34px;

	margin: 0;
	padding: 0 24px 0 0;

	border: 0;
	outline: 0;
	box-shadow: none;

	background-color: transparent;
	color: var(--whuploo-shop-black);

	font-family: var(--whuploo-font,Poppins,Arial,Helvetica,sans-serif);
	font-size: 10px;
	font-weight: 600;
	line-height: 1;

	cursor: pointer;
}


/* =========================================================
   MOBILE — MAKE CONTROLS QUIETER
   ========================================================= */

@media (max-width: 768px) {

	.whuploo-shop-controls {
		grid-template-columns: 1fr;
		align-items: stretch;
		gap: 10px;

		min-height: auto;
		margin: 0 0 16px;
		padding: 10px 10px 12px;

		border-radius: 20px;
	}

	.whuploo-shop-categories {
		gap: 4px;
		padding-bottom: 6px;

		border-bottom: 1px solid rgba(30, 30, 30, 0.12);
	}

	.whuploo-shop-category {
		min-height: 30px;
		padding: 0 12px;

		font-size: 9px;
		letter-spacing: 0.08em;
	}

	.whuploo-shop-actions {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
		width: 100%;
	}

	.whuploo-shop-actions .woocommerce-result-count {
		display: none;
	}

	.whuploo-filter-toggle {
		width: 100%;
		min-height: 34px;
		padding: 0 14px;

		font-size: 9px;
	}

	.whuploo-shop-actions .woocommerce-ordering {
		width: 100%;
		min-height: 34px;
		padding: 0 10px 0 14px;
	}

	.whuploo-shop-actions .woocommerce-ordering::before {
		font-size: 9px;
	}

	.whuploo-shop-actions .woocommerce-ordering select {
		width: 100%;
		min-width: 0;
		height: 30px;

		font-size: 9px;
	}
}


/* =========================================================
   PRODUCT GRID
   ========================================================= */

body.woocommerce-shop
.ast-woocommerce-container
ul.products:not(.elementor-grid),

body.tax-product_cat
.ast-woocommerce-container
ul.products:not(.elementor-grid) {
	display: grid;

	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 34px 30px;

	width: 100%;
	max-width: 1100px;

	clear: both;

	margin: 0 auto;
	padding: 0;
}


body.woocommerce-shop
.ast-woocommerce-container
ul.products:not(.elementor-grid)::before,

body.woocommerce-shop
.ast-woocommerce-container
ul.products:not(.elementor-grid)::after,

body.tax-product_cat
.ast-woocommerce-container
ul.products:not(.elementor-grid)::before,

body.tax-product_cat
.ast-woocommerce-container
ul.products:not(.elementor-grid)::after {
	display: none;
}


/* =========================================================
   PRODUCT CARD
   ========================================================= */

body.woocommerce-shop
.ast-woocommerce-container
ul.products
li.product,

body.tax-product_cat
.ast-woocommerce-container
ul.products
li.product {
	float: none;

	display: flex;
	flex-direction: column;

	width: auto;
	min-width: 0;

	margin: 0;
	padding: 0;

	position: relative;

	background: var(--whuploo-shop-white);
	border: 1px solid rgba(30, 30, 30, 0.08);
	border-radius: 18px;
	box-shadow: none;

	overflow: hidden;
	text-align: left;

	transition:
		transform 220ms var(--whuploo-shop-ease),
		border-color 220ms ease,
		box-shadow 220ms ease;
}


@media (hover: hover) {

	body.woocommerce-shop
	.ast-woocommerce-container
	ul.products
	li.product:hover,

	body.tax-product_cat
	.ast-woocommerce-container
	ul.products
	li.product:hover {
		transform: none;

		border-color: #C21B1B;

		box-shadow:
			0 0 0 1px #111111;
	}
}


/*
 * Product image:
 * the real Woo product artwork already contains its own
 * cream image background, so we do not add another frame.
 */

body.woocommerce-shop
ul.products
li.product
.astra-shop-thumbnail-wrap,

body.tax-product_cat
ul.products
li.product
.astra-shop-thumbnail-wrap {
	position: relative;

	width: 100%;

	margin: 0;
	padding: 0;

	background: transparent;
	border: 0;
	border-radius: 17px 17px 0 0;

	overflow: hidden;
}


body.woocommerce-shop
ul.products
li.product
.astra-shop-thumbnail-wrap > a,

body.tax-product_cat
ul.products
li.product
.astra-shop-thumbnail-wrap > a {
	display: block;

	width: 100%;

	border-radius: inherit;
	overflow: hidden;
}


/*
 * Keep Woo's real responsive image and srcset.
 * Only presentation changes.
 */

body.woocommerce-shop
ul.products
li.product
.astra-shop-thumbnail-wrap img,

body.tax-product_cat
ul.products
li.product
.astra-shop-thumbnail-wrap img {
	display: block;

	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;

	margin: 0;
	padding: 0;

	object-fit: cover;

	border-radius: inherit;

	transition: transform 420ms var(--whuploo-shop-ease);
}


/* Small Whuploo reaction line. */

body.woocommerce-shop
ul.products
li.product
.astra-shop-thumbnail-wrap::after,

body.tax-product_cat
ul.products
li.product
.astra-shop-thumbnail-wrap::after {
	content: "";

	position: absolute;
	left: 0;
	bottom: 0;

	width: 0;
	height: 3px;

	background: var(--whuploo-shop-red);

	pointer-events: none;

	transition: width 300ms var(--whuploo-shop-ease);
}


@media (hover: hover) {

	body.woocommerce-shop
	ul.products
	li.product:hover
	.astra-shop-thumbnail-wrap img,

	body.tax-product_cat
	ul.products
	li.product:hover
	.astra-shop-thumbnail-wrap img {
		transform: scale(1.025);
	}


	body.woocommerce-shop
	ul.products
	li.product:hover
	.astra-shop-thumbnail-wrap::after,

	body.tax-product_cat
	ul.products
	li.product:hover
	.astra-shop-thumbnail-wrap::after {
		width: 100%;
	}
}


/* Product information */

body.woocommerce-shop
ul.products
li.product
.astra-shop-summary-wrap,

body.tax-product_cat
ul.products
li.product
.astra-shop-summary-wrap {
	display: flex;
	flex-direction: column;
	align-items: flex-start;

	width: 100%;

	margin: 0;
	padding: 10px 12px 12px;

	background: transparent;

	text-align: left;
}


/* Category */

body.woocommerce-shop
ul.products
li.product
.ast-woo-product-category,

body.tax-product_cat
ul.products
li.product
.ast-woo-product-category {
	display: block;

	margin: 0 0 6px;
	padding: 0;

	color: var(--whuploo-shop-muted);

	font-family: var(--whuploo-font,Poppins,Arial,Helvetica,sans-serif);
	font-size: 8px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.11em;
	text-transform: uppercase;
}


/* Product title */

body.woocommerce-shop
ul.products
li.product
.woocommerce-loop-product__title,

body.tax-product_cat
ul.products
li.product
.woocommerce-loop-product__title {
	margin: 0;
	padding: 0;

	color: var(--whuploo-shop-black);

	font-family: var(--whuploo-font,Poppins,Arial,Helvetica,sans-serif);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.38;
	letter-spacing: -0.015em;

	text-align: left;

	transition: color 180ms ease;
}


body.woocommerce-shop
ul.products
li.product
.ast-loop-product__link:hover
.woocommerce-loop-product__title,

body.tax-product_cat
ul.products
li.product
.ast-loop-product__link:hover
.woocommerce-loop-product__title {
	color: var(--whuploo-shop-red);
}


/* Price */

body.woocommerce-shop
ul.products
li.product
.price,

body.tax-product_cat
ul.products
li.product
.price {
	display: block;

	margin: 7px 0 0;
	padding: 0;

	color: var(--whuploo-shop-black);

	font-family: var(--whuploo-font,Poppins,Arial,Helvetica,sans-serif);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.35;

	text-align: left;
}


/* =========================================================
   PRODUCT ACTION — NATIVE WOO ACTION OVER IMAGE
   ========================================================= */

/*
 * whuploo-shop.js moves WooCommerce's EXISTING Select Options /
 * Add to Cart element into .astra-shop-thumbnail-wrap.
 *
 * No commerce action is recreated.
 * Existing Woo classes, URLs, product IDs and plugin data remain intact.
 *
 * Before JS enhancement, hide the old summary-positioned action only
 * while .whuploo-shop-pending is present. If JS fails, the pending
 * safety timeout is removed and Woo's original action becomes available.
 */

html.whuploo-shop-pending
body.woocommerce-shop
.astra-shop-summary-wrap > a.button,

html.whuploo-shop-pending
body.tax-product_cat
.astra-shop-summary-wrap > a.button {
	display: none;
}


/*
 * Native Woo action after it has been moved into
 * the bottom of the product-image wrapper.
 *
 * Desktop:
 * hidden below the image until the card is hovered/focused.
 *
 * Touch:
 * permanently visible because hover is not reliable.
 */

body.woocommerce-shop
.ast-woocommerce-container
ul.products
li.product
.astra-shop-thumbnail-wrap > a.whuploo-card-action,

body.tax-product_cat
.ast-woocommerce-container
ul.products
li.product
.astra-shop-thumbnail-wrap > a.whuploo-card-action {
	position: absolute;

	left: 0;
	right: 0;
	bottom: 0;

	z-index: 6;

	display: flex;
	align-items: center;
	justify-content: space-between;

	width: 100%;
	min-height: 32px;

	margin: 0;
	padding: 0 14px;

	border: 0;
	border-radius: 0;
	box-shadow: none;

	background: #111111;
	color: #FFFFFF;

	font-family: var(--whuploo-font,Poppins,Arial,Helvetica,sans-serif);
	font-size: 9px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.045em;
	text-transform: uppercase;

	opacity: 0;
	transform: translateY(100%);
	pointer-events: none;

	transition:
		opacity 180ms ease,
		transform 260ms var(--whuploo-shop-ease),
		background-color 180ms ease;
}


/* Up-right action arrow */

body.woocommerce-shop
.ast-woocommerce-container
ul.products
li.product
.astra-shop-thumbnail-wrap > a.whuploo-card-action::after,

body.tax-product_cat
.ast-woocommerce-container
ul.products
li.product
.astra-shop-thumbnail-wrap > a.whuploo-card-action::after {
	content: "↗";

	margin-left: auto;

	color: #FFFFFF;

	font-size: 16px;
	font-weight: 600;
	line-height: 1;

	transition: transform 180ms var(--whuploo-shop-ease);
}


/* Desktop hover/focus reveal */

@media (hover: hover) and (pointer: fine) {

	body.woocommerce-shop
	.ast-woocommerce-container
	ul.products
	li.product:hover
	.astra-shop-thumbnail-wrap > a.whuploo-card-action,

	body.woocommerce-shop
	.ast-woocommerce-container
	ul.products
	li.product:focus-within
	.astra-shop-thumbnail-wrap > a.whuploo-card-action,

	body.tax-product_cat
	.ast-woocommerce-container
	ul.products
	li.product:hover
	.astra-shop-thumbnail-wrap > a.whuploo-card-action,

	body.tax-product_cat
	.ast-woocommerce-container
	ul.products
	li.product:focus-within
	.astra-shop-thumbnail-wrap > a.whuploo-card-action {
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto;
	}


	body.woocommerce-shop
	.ast-woocommerce-container
	ul.products
	li.product
	.astra-shop-thumbnail-wrap > a.whuploo-card-action:hover,

	body.tax-product_cat
	.ast-woocommerce-container
	ul.products
	li.product
	.astra-shop-thumbnail-wrap > a.whuploo-card-action:hover {
		background: #0D0D0D;
		color: #FFFFFF;
	}


	body.woocommerce-shop
	.ast-woocommerce-container
	ul.products
	li.product
	.astra-shop-thumbnail-wrap > a.whuploo-card-action:hover::after,

	body.tax-product_cat
	.ast-woocommerce-container
	ul.products
	li.product
	.astra-shop-thumbnail-wrap > a.whuploo-card-action:hover::after {
		transform: translate(2px, -2px);
	}
}


/*
 * Mobile / touch:
 * remove the desktop hover CTA.
 * Product image and title remain the primary links.
 */

@media (hover: none), (pointer: coarse), (max-width: 768px) {

	body.woocommerce-shop
	.ast-woocommerce-container
	ul.products
	li.product
	.astra-shop-thumbnail-wrap > a.whuploo-card-action,

	body.tax-product_cat
	.ast-woocommerce-container
	ul.products
	li.product
	.astra-shop-thumbnail-wrap > a.whuploo-card-action {
		display: none;
	}
}


/* =========================================================
   FILTER DRAWER
   ========================================================= */

/*
 * IMPORTANT:
 * These drawer rules activate only after whuploo-shop.js
 * successfully enhances the page.
 *
 * If JS fails, Astra's normal Woo sidebar remains available.
 */

html.whuploo-shop-pending body.woocommerce-shop #secondary,
html.whuploo-shop-pending body.tax-product_cat #secondary,
html.whuploo-shop-enhanced body.woocommerce-shop #secondary,
html.whuploo-shop-enhanced body.tax-product_cat #secondary {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: auto;

	z-index: 100002;

	display: block;

	width: min(430px, 100%);
	height: 100dvh;

	margin: 0;
	padding: 0;

	background: var(--whuploo-shop-cream);
	border: 0;

	overflow-y: auto;
	overscroll-behavior: contain;

	transform: translateX(105%);

	transition: transform 360ms var(--whuploo-shop-ease);
}


html.whuploo-shop-enhanced
body.whuploo-filter-open
#secondary {
	transform: translateX(0);
}


html.whuploo-shop-enhanced
body.whuploo-filter-open {
	overflow: hidden;
}


html.whuploo-shop-enhanced
#secondary .sidebar-main {
	width: 100%;

	margin: 0;
	padding: 0 32px 40px;
}


html.whuploo-shop-enhanced
#secondary .ast-filter-wrap {
	display: block;

	width: 100%;

	margin: 0;
	padding: 0;
}


/* Drawer heading inserted by JS */

.whuploo-filter-drawer-head {
	position: sticky;
	top: 0;
	z-index: 3;

	display: flex;
	align-items: center;
	justify-content: space-between;

	min-height: 82px;

	padding: 0 30px;

	background: var(--whuploo-shop-cream);
	border-bottom: 1px solid var(--whuploo-shop-line);
}


.whuploo-filter-drawer-title {
	color: var(--whuploo-shop-black);

	font-family: var(--whuploo-font,Poppins,Arial,Helvetica,sans-serif);
	font-size: 24px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.035em;
}


.whuploo-filter-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 44px;
	height: 44px;

	padding: 0;

	border: 0;
	border-radius: 50%;

	background: transparent;
	color: var(--whuploo-shop-black);

	font-family: Arial, sans-serif;
	font-size: 28px;
	font-weight: 300;
	line-height: 1;

	cursor: pointer;
}


.whuploo-filter-close:hover,
.whuploo-filter-close:focus-visible {
	background: rgba(30, 30, 30, 0.06);
	color: var(--whuploo-shop-red);
}


/* Drawer overlay */

.whuploo-filter-overlay {
	position: fixed;
	inset: 0;

	z-index: 100001;

	display: block;

	width: 100%;
	height: 100%;

	margin: 0;
	padding: 0;

	border: 0;
	border-radius: 0;
	box-shadow: none;

	appearance: none;
	-webkit-appearance: none;

	background: rgba(17, 17, 17, 0.46) !important;
	background-color: rgba(17, 17, 17, 0.46) !important;

	opacity: 0;
	visibility: hidden;
	pointer-events: none;

	cursor: default;

	transition:
		opacity 240ms ease,
		visibility 240ms ease;
}


body.whuploo-filter-open
.whuploo-filter-overlay {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}


/* Native Woo filter widgets */

html.whuploo-shop-enhanced
#secondary .ast-woo-sidebar-widget {
	margin: 0;
	padding: 28px 0;

	border-bottom: 1px solid var(--whuploo-shop-line);
}


html.whuploo-shop-enhanced
#secondary .widget-title,

html.whuploo-shop-enhanced
#secondary .wc-block-price-filter__title {
	margin: 0 0 20px;
	padding: 0;

	color: var(--whuploo-shop-black);

	font-family: var(--whuploo-font,Poppins,Arial,Helvetica,sans-serif);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}


/* Woo product categories inside drawer */

html.whuploo-shop-enhanced
#secondary ul.product-categories {
	margin: 0;
	padding: 0;

	list-style: none;
}


html.whuploo-shop-enhanced
#secondary ul.product-categories li {
	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 20px;

	margin: 0;
	padding: 11px 0;

	border: 0;
}


html.whuploo-shop-enhanced
#secondary ul.product-categories a {
	color: var(--whuploo-shop-black);

	font-family: var(--whuploo-font,Poppins,Arial,Helvetica,sans-serif);
	font-size: 13px;
	font-weight: 600;

	transition: color 180ms ease;
}


html.whuploo-shop-enhanced
#secondary ul.product-categories a:hover {
	color: var(--whuploo-shop-red);
}


html.whuploo-shop-enhanced
#secondary ul.product-categories .count {
	margin-left: auto;

	color: var(--whuploo-shop-muted);

	font-size: 11px;
}


/* Native Woo price filter */

html.whuploo-shop-enhanced
#secondary .wc-block-price-filter {
	color: var(--whuploo-shop-black);
}


html.whuploo-shop-enhanced
#secondary input[type="range"] {
	accent-color: var(--whuploo-shop-red);
}


html.whuploo-shop-enhanced
#secondary .wc-block-price-filter__range-input-progress,
html.whuploo-shop-enhanced
#secondary .wc-block-components-price-slider__range-input-progress {
	background: var(--whuploo-shop-red);
}


html.whuploo-shop-enhanced
#secondary .wc-block-price-filter__range-text,
html.whuploo-shop-enhanced
#secondary .wc-block-components-price-slider__range-text {
	color: var(--whuploo-shop-black);

	font-family: var(--whuploo-font,Poppins,Arial,Helvetica,sans-serif);
	font-size: 12px;
	font-weight: 600;
}


/*
 * Keep the real Woo Apply button,
 * but prevent another giant red CTA.
 */

html.whuploo-shop-enhanced
#secondary .wc-block-filter-submit-button {
	min-height: 42px;

	margin-top: 18px;
	padding: 0 18px;

	border: 1px solid var(--whuploo-shop-black);
	border-radius: 999px;

	background: transparent;
	color: var(--whuploo-shop-black);

	font-family: var(--whuploo-font,Poppins,Arial,Helvetica,sans-serif);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}


html.whuploo-shop-enhanced
#secondary .wc-block-filter-submit-button:hover {
	border-color: var(--whuploo-shop-red);

	background: var(--whuploo-shop-red);
	color: var(--whuploo-shop-white);
}


/*
 * Native Woo Reset control.
 * Presentation only — WooCommerce retains all reset behaviour.
 */

html.whuploo-shop-enhanced
#secondary .wc-block-components-filter-reset-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: auto;
	min-width: 0;
	min-height: 42px;

	margin-top: 18px;
	padding: 0 18px;

	border: 1px solid var(--whuploo-shop-black);
	border-radius: 999px;
	box-shadow: none;

	appearance: none;
	-webkit-appearance: none;

	background: transparent !important;
	background-color: transparent !important;
	color: var(--whuploo-shop-black);

	font-family: var(--whuploo-font,Poppins,Arial,Helvetica,sans-serif);
	font-size: 10px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;

	cursor: pointer;

	transition:
		border-color 180ms ease,
		background-color 180ms ease,
		color 180ms ease;
}


html.whuploo-shop-enhanced
#secondary .wc-block-components-filter-reset-button:hover,
html.whuploo-shop-enhanced
#secondary .wc-block-components-filter-reset-button:focus-visible {
	border-color: var(--whuploo-shop-red);

	background: var(--whuploo-shop-red) !important;
	background-color: var(--whuploo-shop-red) !important;
	color: var(--whuploo-shop-white);

	text-decoration: none;
}


/* =========================================================
   PAGINATION — FUTURE SAFE
   ========================================================= */

body.woocommerce-shop .woocommerce-pagination,
body.tax-product_cat .woocommerce-pagination {
	margin-top: 52px;
}


body.woocommerce-shop .woocommerce-pagination ul.page-numbers,
body.tax-product_cat .woocommerce-pagination ul.page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;

	border: 0;
}


body.woocommerce-shop .woocommerce-pagination ul.page-numbers li,
body.tax-product_cat .woocommerce-pagination ul.page-numbers li {
	border: 0;
}


body.woocommerce-shop .woocommerce-pagination .page-numbers a,
body.woocommerce-shop .woocommerce-pagination .page-numbers span,
body.tax-product_cat .woocommerce-pagination .page-numbers a,
body.tax-product_cat .woocommerce-pagination .page-numbers span {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-width: 42px;
	height: 42px;

	padding: 0 10px;

	border: 1px solid var(--whuploo-shop-line);
	border-radius: 999px;

	background: var(--whuploo-shop-white);
	color: var(--whuploo-shop-black);
}


body.woocommerce-shop .woocommerce-pagination .page-numbers .current,
body.tax-product_cat .woocommerce-pagination .page-numbers .current {
	border-color: var(--whuploo-shop-red);

	background: var(--whuploo-shop-red);
	color: var(--whuploo-shop-white);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1180px) {

	.whuploo-shop-controls {
		grid-template-columns: 1fr;
		gap: 9px;

		padding: 12px;
	}


	.whuploo-shop-actions {
		justify-content: space-between;

		padding-top: 10px;

		border-top: 1px solid var(--whuploo-shop-line);
	}
}


@media (max-width: 980px) {

	body.woocommerce-shop
	.ast-woocommerce-container
	ul.products:not(.elementor-grid),

	body.tax-product_cat
	.ast-woocommerce-container
	ul.products:not(.elementor-grid) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 32px 18px;
	}
}


@media (max-width: 767px) {

	body.woocommerce-shop
	.ast-woocommerce-container
	ul.products
	li.product
	.astra-shop-thumbnail-wrap > a.whuploo-card-action,

	body.tax-product_cat
	.ast-woocommerce-container
	ul.products
	li.product
	.astra-shop-thumbnail-wrap > a.whuploo-card-action {
		left: 8px;
		right: 8px;
		bottom: 8px;

		min-height: 34px;
		padding: 0 10px;

		border-radius: 9px;

		font-size: 8px;
		letter-spacing: 0.02em;

		opacity: 1;
		transform: none;
		pointer-events: auto;
	}


	body.woocommerce-shop
	.ast-woocommerce-container
	ul.products
	li.product
	.astra-shop-thumbnail-wrap > a.whuploo-card-action::after,

	body.tax-product_cat
	.ast-woocommerce-container
	ul.products
	li.product
	.astra-shop-thumbnail-wrap > a.whuploo-card-action::after {
		margin-left: 6px;
		font-size: 11px;
	}


	body.woocommerce-shop .site-content > .ast-container,
	body.tax-product_cat .site-content > .ast-container {
		padding-left: 17px;
		padding-right: 17px;
	}


	body.woocommerce-shop .ast-woocommerce-container,
	body.tax-product_cat .ast-woocommerce-container {
		padding-top: 22px;
		padding-bottom: 70px;
	}


	.whuploo-shop-controls {
		margin-bottom: 18px;

		border-radius: 19px;
	}


	.whuploo-shop-categories {
		padding-bottom: 1px;
	}


	.whuploo-shop-category {
		min-height: 40px;

		padding-left: 13px;
		padding-right: 13px;
	}


	.whuploo-shop-actions {
		gap: 7px;
	}


	.whuploo-shop-actions .woocommerce-result-count {
		display: none;
	}


	.whuploo-filter-toggle {
		min-height: 44px;
	}


	.whuploo-shop-actions .woocommerce-ordering {
		min-height: 44px;

		padding-left: 14px;
	}


	.whuploo-shop-actions .woocommerce-ordering::before {
		display: none;
	}


	.whuploo-shop-actions .woocommerce-ordering select {
		min-width: 102px;
		height: 40px;

		font-size: 9px;
	}


	body.woocommerce-shop
	.ast-woocommerce-container
	ul.products:not(.elementor-grid),

	body.tax-product_cat
	.ast-woocommerce-container
	ul.products:not(.elementor-grid) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 30px 12px;
	}


	body.woocommerce-shop
	ul.products
	li.product
	.astra-shop-thumbnail-wrap,

	body.tax-product_cat
	ul.products
	li.product
	.astra-shop-thumbnail-wrap {
		border-radius: 13px 13px 0 0;
	}


	body.woocommerce-shop
	ul.products
	li.product
	.astra-shop-summary-wrap,

	body.tax-product_cat
	ul.products
	li.product
	.astra-shop-summary-wrap {
		padding: 9px 10px 10px;
	}


	body.woocommerce-shop
	ul.products
	li.product
	.woocommerce-loop-product__title,

	body.tax-product_cat
	ul.products
	li.product
	.woocommerce-loop-product__title {
		font-size: 12px;
	}


	body.woocommerce-shop
	ul.products
	li.product
	.price,

	body.tax-product_cat
	ul.products
	li.product
	.price {
		font-size: 12px;
	}


	html.whuploo-shop-pending
	body.woocommerce-shop
	#secondary,

	html.whuploo-shop-pending
	body.tax-product_cat
	#secondary,

	html.whuploo-shop-enhanced
	body.woocommerce-shop
	#secondary,

	html.whuploo-shop-enhanced
	body.tax-product_cat
	#secondary {
		width: min(390px, 100%);
	}


	html.whuploo-shop-enhanced
	#secondary .sidebar-main {
		padding-left: 24px;
		padding-right: 24px;
	}


	.whuploo-filter-drawer-head {
		padding-left: 22px;
		padding-right: 18px;
	}
}


@media (max-width: 420px) {

	.whuploo-filter-toggle {
		padding-left: 14px;
		padding-right: 14px;
	}


	.whuploo-shop-actions .woocommerce-ordering {
		padding-right: 9px;
	}
}


/* =========================================================
   SIMPLIFIED CATALOGUE CONTROLS — TEST
   ========================================================= */

/*
 * Category navigation now lives inside the Filter drawer.
 *
 * Desktop:
 * Filter sits left; result count and Sort sit right.
 *
 * Mobile:
 * Filter and Sort share one quiet utility row.
 */

.whuploo-shop-controls {
	display: block;

	width: 100%;
	max-width: 1100px;
	min-height: 0;

	margin: 0 auto 18px;
	padding: 0;

	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}


/*
 * Temporarily hide the duplicated top category navigation.
 * The real Woo category links remain present in the markup
 * and inside the native Filter drawer.
 */

.whuploo-shop-categories {
	display: none;
}


/* Desktop control arrangement */

.whuploo-shop-actions {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;

	width: 100%;

	padding: 0;
	border: 0;
}


/*
 * Desktop order:
 * Sort and result count sit together on the left.
 * Filter sits alone at the far right beside its drawer.
 */

.whuploo-shop-actions .woocommerce-ordering {
	order: 1;
	margin-left: 0;
}


.whuploo-shop-actions .woocommerce-result-count {
	order: 2;
	margin: 0;
}


.whuploo-filter-toggle {
	order: 3;
	margin-left: auto;
}


/* Mobile order: Sort left, Filter right. */

@media (max-width: 768px) {

	.whuploo-shop-actions {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 10px;

		width: 100%;
	}

	.whuploo-shop-actions .woocommerce-result-count {
		display: none;
		margin: 0;
	}

	.whuploo-shop-actions .woocommerce-ordering {
		order: 1;
		margin-left: 0;
	}

	.whuploo-filter-toggle {
		order: 2;
		margin-left: 0;
	}
}


/* =========================================================
   WHUPLOO SHOP INTRO
   Main Shop only
   ========================================================= */

body.woocommerce-shop .whuploo-shop-intro {
	position: relative;

	width: 100%;
	max-width: 1100px;
	min-height: 230px;

	margin: 0 auto 22px;
	padding: 30px 36px 28px;

	overflow: hidden;
	isolation: isolate;

	background: var(--whuploo-cream);

	border: 1px solid rgba(30, 30, 30, 0.08);
	border-radius: 22px;

	box-shadow:
		0 14px 34px rgba(58, 31, 13, 0.035);
}


/*
 * Very quiet Whuploo geometry.
 * These should remain background details.
 */

body.woocommerce-shop .whuploo-shop-intro::before {
	content: "";

	position: absolute;

	width: 190px;
	height: 190px;

	right: -62px;
	top: -74px;

	border: 2px solid rgba(194, 27, 27, 0.075);
	border-radius: 50%;

	pointer-events: none;
}


body.woocommerce-shop .whuploo-shop-intro::after {
	content: "";

	position: absolute;

	left: 34px;
	bottom: 23px;

	width: 70px;
	height: 7px;

	background: rgba(194, 27, 27, 0.12);

	transform: rotate(-5deg);

	pointer-events: none;
}


/* =========================================================
   INTRO STAGE
   ========================================================= */

body.woocommerce-shop .whuploo-shop-intro-stage {
	position: relative;
	z-index: 2;

	width: 100%;
	min-height: 170px;
}


body.woocommerce-shop .whuploo-shop-intro-copy {
	position: relative;
	z-index: 3;

	width: min(900px, 88%);
}


/*
 * Static fallback:
 * if the Shop animation never enhances, the final message
 * remains readable once the early pending safety state clears.
 */

body.woocommerce-shop .whuploo-shop-intro-mask {
	width: 100%;
	overflow: hidden;
}


/* =========================================================
   SHOP TITLE COMPOSITION
   Typography identity comes from global .whuploo-display-title
   ========================================================= */

body.woocommerce-shop .whuploo-shop-intro-title {
	margin: 0;

	color: var(--whuploo-dark-red);

	font-size: clamp(58px, 5.5vw, 86px);
}


body.woocommerce-shop .whuploo-shop-intro-title-line {
	display: block;

	white-space: nowrap;
}


body.woocommerce-shop .whuploo-shop-intro-title-accent {
	display: inline-block;

	color: var(--whuploo-red);

	transform: translateX(42px);
}


/* =========================================================
   SUBLINE
   ========================================================= */

body.woocommerce-shop .whuploo-shop-intro-subline {
	max-width: 640px;

	margin: 17px 0 0 2px;

	color: #3E3229;

	font-family: var(--whuploo-font,Poppins,Arial,Helvetica,sans-serif);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.65;

	opacity: 1;
}


/* =========================================================
   FLYING LOGO
   Matches permanent header logo size
   ========================================================= */

body.woocommerce-shop .whuploo-shop-intro-logo {
	position: absolute;

	left: -110px;
	top: 56px;

	z-index: 6;

	display: block;

	width: 54px;
	height: 54px;

	margin: 0;
	padding: 0;

	object-fit: contain;

	pointer-events: none;

	will-change: left, transform;
}


body.woocommerce-shop .whuploo-shop-intro-logo-shadow {
	position: absolute;

	left: -102px;
	top: 103px;

	z-index: 5;

	display: block;

	width: 44px;
	height: 6px;

	border-radius: 50%;

	background: rgba(30, 30, 30, 0.10);

	filter: blur(3px);

	opacity: 0;

	pointer-events: none;

	will-change: left, opacity;
}


/* =========================================================
   FIRST-PAINT + JS MOTION STATE
   ========================================================= */

/*
 * functions.php adds .whuploo-shop-pending in <head>, before
 * first paint. Hide the animated message only while the Shop
 * has not yet been enhanced.
 *
 * Once whuploo-shop.js adds .whuploo-shop-enhanced, these
 * pending selectors stop matching automatically. At that point
 * .whuploo-shop-intro-motion already owns the animation start
 * state, giving us a clean hand-off without a completed-title flash.
 */

html.whuploo-shop-pending:not(.whuploo-shop-enhanced)
body.woocommerce-shop
.whuploo-shop-intro-mask {
	width: 0;
}


html.whuploo-shop-pending:not(.whuploo-shop-enhanced)
body.woocommerce-shop
.whuploo-shop-intro-subline {
	opacity: 0;
}


body.woocommerce-shop
.whuploo-shop-intro.whuploo-shop-intro-motion
.whuploo-shop-intro-mask {
	width: 0;
}


body.woocommerce-shop
.whuploo-shop-intro.whuploo-shop-intro-motion
.whuploo-shop-intro-subline {
	opacity: 0;
}


/* =========================================================
   SUBLINE FLICKER
   Original sequence x2, pause, original sequence x2, stays on
   ========================================================= */

body.woocommerce-shop
.whuploo-shop-intro-subline.is-flickering {
	animation:
		whuploo-shop-subline-flicker .44s linear 0s 2 forwards,
		whuploo-shop-subline-flicker .44s linear 1.23s 2 forwards;
}


@keyframes whuploo-shop-subline-flicker {

	0% {
		opacity: 0;
	}

	13% {
		opacity: 1;
	}

	25% {
		opacity: .06;
	}

	39% {
		opacity: 1;
	}

	52% {
		opacity: .20;
	}

	67% {
		opacity: 1;
	}

	79% {
		opacity: .62;
	}

	100% {
		opacity: 1;
	}
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

	body.woocommerce-shop .whuploo-shop-intro {
		min-height: 214px;

		margin-bottom: 20px;
		padding: 27px 24px 25px;

		border-radius: 20px;
	}


	body.woocommerce-shop .whuploo-shop-intro-stage {
		min-height: 160px;
	}


	body.woocommerce-shop .whuploo-shop-intro-copy {
		width: 94%;
	}


	body.woocommerce-shop .whuploo-shop-intro-title {
		font-size: 50px;
	}


	body.woocommerce-shop .whuploo-shop-intro-title-accent {
		transform: translateX(28px);
	}


	body.woocommerce-shop .whuploo-shop-intro-logo {
		width: 46px;
		height: 46px;

		top: 55px;
	}


	body.woocommerce-shop .whuploo-shop-intro-logo-shadow {
		width: 38px;

		top: 95px;
	}


	body.woocommerce-shop .whuploo-shop-intro::after {
		left: 24px;
		bottom: 20px;
	}

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

	body.woocommerce-shop .whuploo-shop-intro {
		min-height: 202px;

		margin-bottom: 18px;
		padding: 24px 18px 22px;

		border-radius: 18px;
	}


	body.woocommerce-shop .whuploo-shop-intro-stage {
		min-height: 150px;
	}


	body.woocommerce-shop .whuploo-shop-intro-copy {
		width: 100%;
	}


	body.woocommerce-shop .whuploo-shop-intro-title {
		font-size: 47px;
	}


	body.woocommerce-shop .whuploo-shop-intro-title-line {
		white-space: nowrap;
	}


	body.woocommerce-shop .whuploo-shop-intro-title-accent {
		transform: translateX(8px);
	}


	body.woocommerce-shop .whuploo-shop-intro-subline {
		max-width: 30ch;

		margin-top: 13px;

		font-size: 13px;
		line-height: 1.6;
	}


	body.woocommerce-shop .whuploo-shop-intro-logo {
		width: 46px;
		height: 46px;

		top: 50px;
	}


	body.woocommerce-shop .whuploo-shop-intro-logo-shadow {
		width: 38px;

		top: 90px;
	}


	body.woocommerce-shop .whuploo-shop-intro::before {
		width: 145px;
		height: 145px;

		right: -52px;
		top: -58px;
	}


	body.woocommerce-shop .whuploo-shop-intro::after {
		left: 18px;
		bottom: 17px;

		width: 54px;
		height: 6px;
	}

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	body.woocommerce-shop *,
	body.woocommerce-shop *::before,
	body.woocommerce-shop *::after,
	body.tax-product_cat *,
	body.tax-product_cat *::before,
	body.tax-product_cat *::after {
		scroll-behavior: auto !important;
		transition-duration: 0.001ms !important;
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
	}
}