:root {
	--asg-maroon: #70151b;
	--asg-maroon-dark: #4d1010;
	--asg-cream: #f7f0e6;
	--asg-border: #e5d9cf;
}

.asg-page {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 20px;
}

/* ---- Breadcrumb + Title ---- */
.asg-breadcrumb {
	font-size: 14px;
	color: #7d7d7d;
	margin: 20px 0 10px;
}

.asg-breadcrumb a {
	color: #7d7d7d;
	text-decoration: none;
}

.asg-breadcrumb-sep {
	margin: 0 8px;
}

.asg-breadcrumb-current {
	font-weight: 600;
	color: #333;
}

.asg-title-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 16px;
}

.asg-page-title {
	font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
	font-size: 40px;
	color: var(--asg-maroon);
	margin: 0;
	font-weight: 600;
	flex-shrink: 0;
}

.asg-title-row-right {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}

.asg-selected-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 20px;
}

.asg-chip {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: #fff;
	border: 1px solid var(--asg-border);
	border-radius: 8px;
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 600;
	text-transform: capitalize;
	color: #1b1c1c;
}

.asg-chip button {
	all: unset;
	cursor: pointer;
	font-weight: 700;
	line-height: 1;
}

/* ---- Layout ---- */
.asg-wrapper {
	display: flex;
	gap: 40px;
	align-items: flex-start;
	position: relative;
}

.asg-sidebar {
	width: 260px;
	flex-shrink: 0;
	background: #fff;
	padding: 32px 24px;
	border-radius: 4px;
	box-sizing: border-box;
}

.asg-main {
	flex: 1;
	min-width: 0;
}

/* ---- Category plain-list nav ---- */
.asg-filter-nav-title {
	font-size: 18px;
	font-weight: 700;
	color: #1b1c1c;
	margin: 0 0 14px;
}

.asg-filter-nav-list {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	border-bottom: 1px solid var(--asg-border);
	padding-bottom: 16px;
}

.asg-filter-nav-list li {
	margin-bottom: 12px;
}

.asg-filter-nav-list label {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	font-size: 15px;
	color: #333;
}

.asg-filter-nav-list input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.asg-nav-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--asg-maroon);
	flex-shrink: 0;
}

.asg-filter-nav-list input:checked ~ .asg-nav-label,
.asg-filter-nav-list input:checked + .asg-nav-dot + .asg-nav-label {
	color: var(--asg-maroon);
	font-weight: 700;
}

.asg-refine-heading {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 20px;
	color: var(--asg-maroon);
	font-weight: 700;
	margin-bottom: 16px;
}

/* ---- Collapsible checkbox groups ---- */
.asg-filter-group {
	border-bottom: 1px solid var(--asg-border);
	padding-bottom: 16px;
	margin-bottom: 16px;
}

.asg-filter-group-title {
	all: unset;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	box-sizing: border-box;
	cursor: pointer;
	font-size: 15px;
	font-weight: 700;
	color: #1b1c1c;
	margin-bottom: 12px;
}

.asg-filter-group-title:hover,
.asg-filter-group-title:focus {
	background-color: #fff !important;
	color: #000;
}

.asg-chevron {
	transition: transform 0.2s ease;
	flex-shrink: 0;
}

.asg-filter-group.asg-collapsed .asg-chevron {
	transform: rotate(-90deg);
}

.asg-filter-group.asg-collapsed .asg-filter-list,
.asg-filter-group.asg-collapsed .asg-price-inputs {
	display: none;
}

.asg-filter-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.asg-filter-list li {
	margin-bottom: 10px;
}

.asg-filter-list label {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	font-size: 14px;
	color: #333;
}

.asg-filter-list input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: var(--asg-maroon);
	flex-shrink: 0;
}

.asg-swatch {
	width: 18px;
	height: 18px;
	border-radius: 3px;
	border: 1px solid #ddd;
	flex-shrink: 0;
	display: inline-block;
}

.asg-price-inputs {
	display: flex;
	gap: 8px;
}

.asg-price-inputs input {
	width: 50%;
	height: 40px;
	border: 1px solid #ddd;
	border-radius: 6px;
	padding: 0 10px;
	box-sizing: border-box;
}

.asg-filter-actions {
	display: flex;
	gap: 10px;
	margin-top: 20px;
}

.asg-filter-actions button {
	flex: 1;
	height: 46px;
	border-radius: 8px;
	border: none;
	cursor: pointer;
	font-weight: 700;
	font-size: 14px;
}

.asg-apply-filters {
	background: linear-gradient(180deg, #af1b24 0%, var(--asg-maroon) 100%);
	color: #fff;
}

.asg-clear-filters {
	background: #fff;
	border: 1px solid #ddd !important;
	color: #333;
}

/* ---- Mobile filter drawer controls (hidden on desktop) ---- */
.asg-mobile-filter-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px !important;
	height: 44px !important;
	min-width: 44px;
	padding: 0 !important;
	background: #fff;
	color: var(--asg-maroon);
	border: 1px solid var(--asg-border);
	border-radius: 6px;
	cursor: pointer;
	flex-shrink: 0;
}

/* Some plugins (e.g. ShopBuilder) ship a global svg reset that forces
   fill/color/size on every svg on the page. !important is needed here
   to reliably win against that, since it isn't scoped to this icon. */
.asg-mobile-filter-toggle svg {
	width: 18px !important;
	height: 18px !important;
	fill: none !important;
	stroke: var(--asg-maroon, #70151b) !important;
	stroke-width: 2 !important;
	display: block !important;
}

.asg-sidebar-close {
	display: none;
}

.asg-sidebar-backdrop {
	display: none;
}

/* ---- Sort dropdown ---- */
.asg-sort-select {
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	height: 44px !important;
	min-width: 190px;
	width: auto;
	flex-shrink: 0;
	border-radius: 6px !important;
	border: none !important;
	padding: 0 36px 0 18px !important;
	background: var(--asg-maroon) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23fff' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center !important;
	color: #fff !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	cursor: pointer;
	box-sizing: border-box;
}

.asg-sort-select option {
	background: #fff;
	color: #1b1c1c;
}

/* ---- Grid: native WooCommerce ul.products / li.product ---- */
.asg-columns-2 .asg-grid ul.products,
.asg-columns-3 .asg-grid ul.products,
.asg-columns-4 .asg-grid ul.products {
	display: grid !important;
	justify-content: start !important;
}

.asg-columns-2 .asg-grid ul.products { grid-template-columns: repeat(2, 1fr) !important; }
.asg-columns-3 .asg-grid ul.products { grid-template-columns: repeat(3, 1fr) !important; }
.asg-columns-4 .asg-grid ul.products { grid-template-columns: repeat(4, 1fr) !important; }

/* The theme's own default WooCommerce styling gives li.product a
   percentage width + float + margin, computed for ITS OWN column count -
   left in place, this fights our grid's own sizing and is what caused
   cards to look distorted/inconsistent whenever there were fewer
   products than columns (1-2 products, an incomplete last row, etc.).
   Resetting it here lets the grid be the only thing controlling card
   size, so every card is always the same size regardless of how many
   products are in the row. */
.asg-grid ul.products li.product {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	float: none !important;
}

.asg-grid ul.products li.product {
	border: 1px solid var(--asg-border) !important;
	border-radius: 4px;
	position: relative;
	overflow: hidden;
	text-align: center;
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

/* Your site has two conflicting pre-existing CSS rules for this button
   (one forcing a fixed 129px width, another forcing 100%) which fight each
   other unpredictably card-to-card. This settles it consistently within
   this grid specifically. */
.asg-grid ul.products li.product .button,
.asg-grid ul.products li.product .add_to_cart_button {
	width: 100% !important;
	box-sizing: border-box !important;
	margin: 0 !important;
}

.asg-grid ul.products li.product:hover {
	box-shadow: 0 16px 32px rgba(0, 0, 0, 0.12);
	transform: translateY(-4px);
}

.asg-grid ul.products li.product img {
	width: 100% !important;
	aspect-ratio: 3 / 4 !important;
	object-fit: cover !important;
	display: block !important;
	transition: transform 0.4s ease;
}

.asg-grid ul.products li.product:hover img {
	transform: scale(1.06);
}

/* Wishlist / compare / badge icons injected by active loop plugins - force
   into a clean circular top-right slot regardless of which plugin's markup
   it is, and hide any text label so it matches the icon-only Figma look. */
.asg-grid ul.products li.product [class*="wishlist" i],
.asg-grid ul.products li.product [class*="wishsuite" i] {
	position: absolute !important;
	top: 12px;
	right: 12px;
	z-index: 3;
	width: 36px;
	height: 36px;
	border-radius: 50% !important;
	background: #fff !important;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
	display: flex !important;
	align-items: center;
	justify-content: center;
	color: var(--asg-maroon) !important;
	border: none !important;
	left: auto !important;
	bottom: auto !important;
}

.asg-grid ul.products li.product [class*="wishlist" i] svg,
.asg-grid ul.products li.product [class*="wishsuite" i] svg {
	width: 16px;
	height: 16px;
	overflow: visible;
}

/* SVG icons need `fill` set explicitly - CSS `color` alone does not
   automatically color SVG shapes unless the icon's own stylesheet uses
   fill:currentColor. Without this, the heart can render nearly invisible
   (a "white dot") in its default/unwishlisted state. */
.asg-grid ul.products li.product [class*="wishlist" i] svg *,
.asg-grid ul.products li.product [class*="wishsuite" i] svg * {
	fill: currentColor !important;
	stroke: currentColor !important;
}

.asg-grid ul.products li.product [class*="-text" i],
.asg-grid ul.products li.product [class*="btn-text" i] {
	display: none !important;
}

/* Astra theme's built-in hover "quick action" icon (select-options / quick
   add) fires automatically now that we use the native loop template - it's
   redundant since every card already has a persistent Add to Cart button
   below it, and it was overlapping the wishlist icon on hover. */
.asg-grid ul.products li.product .ast-on-card-button,
.asg-grid ul.products li.product .ast-select-options-trigger {
	display: none !important;
}

.asg-no-products {
	text-align: center;
	padding: 40px 0;
	color: #777;
}

/* ---- Pagination ---- */
.asg-pagination-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 40px;
	gap: 12px;
}

.asg-numbers-pagination {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	justify-content: center;
}

.asg-page-btn {
	width: 38px;
	height: 38px;
	border-radius: 6px;
	border: none;
	background: transparent;
	cursor: pointer;
	font-weight: 600;
	color: #333;
}

.asg-page-btn.active {
	background: var(--asg-maroon);
	color: #fff;
}

.asg-page-nav {
	background: none;
	border: none;
	cursor: pointer;
	font-weight: 600;
	font-size: 14px;
	color: #333;
	padding: 0 10px;
}

.asg-page-nav:disabled {
	color: #bbb;
	cursor: default;
}

.asg-load-more {
	background: var(--asg-maroon);
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 14px 36px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.asg-infinite-sentinel {
	height: 1px;
	width: 100%;
}

.asg-infinite-loading {
	text-align: center;
	width: 100%;
	color: #777;
	padding: 16px 0;
}

.asg-error-msg {
	text-align: center;
	width: 100%;
	color: #b42318;
	background: #fef3f2;
	border: 1px solid #fda29b;
	border-radius: 8px;
	padding: 10px 16px;
}

/* ---- Spinner: a real element (not a CSS pseudo-element), so it always
   renders even if a caching/minify/optimizer plugin mangles ::before /
   ::after rules. Used inline (loading text, buttons) and, larger, inside
   the grid overlay below. ---- */
.asg-spinner {
	display: inline-block;
	vertical-align: middle;
	width: 18px;
	height: 18px;
	margin-right: 8px;
	border: 2.5px solid rgba(112, 21, 27, 0.2);
	border-top-color: var(--asg-maroon);
	border-radius: 50%;
	animation: asg-spin 0.7s linear infinite;
}

/* White spinner on the solid maroon Load More button. */
.asg-load-more .asg-spinner {
	border-color: rgba(255, 255, 255, 0.35);
	border-top-color: #fff;
	margin-right: 0;
}

.asg-btn-spinner {
	display: none;
}

.asg-wrapper.asg-loading .asg-load-more .asg-btn-text {
	display: none;
}

.asg-wrapper.asg-loading .asg-load-more .asg-btn-spinner {
	display: inline-block;
}

/* Grid dims slightly while a fetch is in flight - the spinner shown
   next to "Loading more..." / on the Load More button is the loading
   indicator; this just signals the current items are stale. */
.asg-grid {
	min-height: 80px;
}

.asg-wrapper.asg-loading .asg-grid {
	opacity: 0.5;
	pointer-events: none;
}

@keyframes asg-spin {
	to {
		transform: rotate(360deg);
	}
}


/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 900px) {

	.asg-page-title {
		font-size: 28px;
	}

	.asg-mobile-filter-toggle {
		display: inline-flex !important;
	}

	.asg-wrapper {
		flex-direction: column;
	}

	/* Off-canvas filter drawer */
	.asg-sidebar {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: 85%;
		max-width: 340px;
		background: #fff;
		z-index: 1000;
		padding: 24px;
		box-sizing: border-box;
		overflow-y: auto;
		transform: translateX(-100%);
		transition: transform 0.25s ease;
	}

	.asg-sidebar-open .asg-sidebar {
		transform: translateX(0);
	}

	.asg-sidebar-close {
		display: block;
		position: absolute;
		top: 16px;
		right: 16px;
		width: 32px;
		height: 32px;
		border: none;
		background: none;
		font-size: 24px;
		cursor: pointer;
	}

	.asg-sidebar-backdrop {
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.4);
		z-index: 999;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.25s ease;
	}

	.asg-sidebar-open .asg-sidebar-backdrop {
		display: block;
		opacity: 1;
		pointer-events: auto;
	}

	/* Tablet width: 2 columns fits comfortably regardless of the
	   desktop Columns setting (3-4 columns get cramped here). */
	.asg-columns-2 .asg-grid ul.products,
	.asg-columns-3 .asg-grid ul.products,
	.asg-columns-4 .asg-grid ul.products {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

/* Phone width: back down to a single column - 2 columns is too tight
   once the screen itself is this narrow. */
@media (max-width: 600px) {
	.asg-columns-2 .asg-grid ul.products,
	.asg-columns-3 .asg-grid ul.products,
	.asg-columns-4 .asg-grid ul.products {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

/* Match count beside a filter option while a search is narrowing the
   sidebar (see ASG_Render::render_filters). */
.asg-filter-count {
	margin-left: auto;
	padding-left: 8px;
	font-size: 12px;
	font-weight: 500;
	color: #9a8f95;
}

.asg-filters--searching .asg-filter-list label,
.asg-filters--searching .asg-filter-nav-list label {
	display: flex;
	align-items: center;
	width: 100%;
}

/* The active search, shown as a removable chip in the same row as the
   category/attribute chips. */
.asg-chip--search {
	background: #f6ecec;
	border-color: #d8b9b9;
}

.asg-chip-key {
	font-weight: 600;
	color: #7B1E1E;
}

/* ---- Small phones (320-400px) ----
   Two columns below 600px leaves a 136px card at 320px, which isn't
   enough for the title, price and Add to Cart button - the button text
   wraps or overflows. One column below 400px. */

@media (max-width: 400px) {
	.asg-columns-2 .asg-grid ul.products,
	.asg-columns-3 .asg-grid ul.products,
	.asg-columns-4 .asg-grid ul.products {
		grid-template-columns: 1fr !important;
	}

	.asg-filters {
		padding: 14px 12px;
	}

	.asg-filter-nav-title,
	.asg-filter-group-title {
		font-size: 14px;
	}

	.asg-chip {
		font-size: 11px;
		padding: 4px 8px;
	}

	.asg-load-more {
		width: 100%;
	}

	/* The sort control and the results row stack rather than squeezing
	   onto one line. */
	.asg-header {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}

	.asg-sort {
		width: 100%;
	}
}