/* =====================================================================
   SAREEGENZ CATEGORY PAGE REDESIGN
   Same visual language as the Shop Redesign plugin's CSS (same class
   names) — deliberately duplicated rather than shared, so this plugin
   works standalone even if the Shop Redesign plugin is ever
   deactivated. The two never load on the same page (Shop Redesign only
   enqueues on the Shop page; this only enqueues on category archive
   pages), so reusing identical class names across the two files causes
   no conflict.
   ===================================================================== */

:root {
	--sg-primary: #d6336c;
	--sg-primary-dark: #b0255a;
	--sg-purple: #9c6bd1;
	--sg-peach: #f6b99d;
	--sg-text: #2b2b2b;
	--sg-muted: #8a8a8a;
	--sg-border: #f1dde6;
	--sg-bg: #fdf7fa;
	--sg-white: #ffffff;
	--sg-radius: 14px;
}

.woocommerce.archive,
.woocommerce-page.archive {
	background: var(--sg-bg);
}

/* Belt-and-braces: PHP already unhooks the breadcrumb and the empty
   title header, but if the theme renders either through a different
   code path, hide them here too so no gap is left behind above the
   hero. */
.woocommerce-breadcrumb,
.woocommerce-products-header {
	display: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Pull the hero up flush under the navbar — Astra's content wrapper
   normally reserves top padding/margin for the page title/breadcrumb
   area we've just removed, which is what was pushing the hero down. */
.woocommerce-page.archive #primary,
.woocommerce-page.archive .site-main,
.woocommerce-page.archive .ast-container {
	padding-top: 0 !important;
	margin-top: 0 !important;
}

/* ---------- HERO ---------- */
.sg-shop-hero {
	position: relative;
	padding: 48px 32px;
	margin: 0 0 24px;
	border-radius: var(--sg-radius);
	overflow: hidden;
	background: linear-gradient(120deg, #f3d9ea 0%, #e6d3f0 35%, #f7dfd0 100%);
}
.sg-shop-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 85% 40%, rgba(255,255,255,0.35), transparent 60%);
	pointer-events: none;
}
.sg-shop-title {
	position: relative;
	font-size: 34px;
	font-weight: 700;
	color: var(--sg-text);
	margin: 0 0 8px;
}
.sg-shop-subtitle {
	position: relative;
	font-size: 15px;
	color: var(--sg-muted);
	margin: 0;
}

/* ---------- FILTER TOGGLE (tablet/mobile) ---------- */
.sg-filter-toolbar { display: none; margin-bottom: 16px; }
.sg-filter-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	background: var(--sg-white);
	border: 1.5px solid var(--sg-primary);
	color: var(--sg-primary);
	border-radius: 999px;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
}

.sg-filter-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.4);
	z-index: 998;
}
.sg-filter-overlay.active { display: block; }

/* ---------- FILTER BAR (desktop: horizontal row of 4) ---------- */
.sg-filter-bar {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-end;
	gap: 20px;
	background: var(--sg-white);
	border: 1px solid var(--sg-border);
	border-radius: var(--sg-radius);
	padding: 20px 24px;
	margin-bottom: 28px;
}
.sg-filter-panel-head { display: none; }

.sg-filter-group { flex: 1; min-width: 0; }
.sg-filter-price { flex: 1.4; }

.sg-filter-label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--sg-muted);
	margin-bottom: 8px;
}
.sg-filter-select {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--sg-border);
	border-radius: 10px;
	background: var(--sg-white);
	color: var(--sg-text);
	font-size: 14px;
}
.sg-filter-select:focus { outline: none; border-color: var(--sg-primary); }

/* category multi-select dropdown (checkbox list) */
.sg-multiselect { position: relative; }
.sg-multiselect-toggle {
	width: 100%;
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
	padding: 10px 12px;
	border: 1px solid var(--sg-border);
	border-radius: 10px;
	background: var(--sg-white);
	color: var(--sg-text);
	font-size: 14px;
	text-align: left;
	cursor: pointer;
}
.sg-multiselect-toggle:focus { outline: none; border-color: var(--sg-primary); }
.sg-multiselect-toggle svg { flex: 0 0 auto; color: var(--sg-muted); transition: transform .2s ease; }
.sg-multiselect.active .sg-multiselect-toggle { border-color: var(--sg-primary); }
.sg-multiselect.active .sg-multiselect-toggle svg { transform: rotate(180deg); }
.sg-multiselect-label {
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.sg-multiselect-panel {
	display: none;
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	min-width: 240px;
	max-height: 280px;
	overflow-y: auto;
	background: var(--sg-white);
	border: 1px solid var(--sg-border);
	border-radius: 12px;
	box-shadow: 0 14px 32px rgba(0,0,0,0.14);
	padding: 8px;
	z-index: 60;
}
.sg-multiselect.active .sg-multiselect-panel { display: block; }

.sg-multiselect-option {
	display: flex; align-items: center; gap: 10px;
	padding: 9px 8px;
	border-radius: 8px;
	font-size: 14px;
	color: var(--sg-text);
	cursor: pointer;
}
.sg-multiselect-option:hover { background: var(--sg-bg); }
.sg-multiselect-option input[type="checkbox"] {
	width: 16px; height: 16px; flex: 0 0 auto;
	accent-color: var(--sg-primary);
	cursor: pointer;
}
.sg-multiselect-option em { font-style: normal; color: var(--sg-muted); font-size: 12.5px; margin-left: 2px; }

/* price dual-range slider */
.sg-price-slider { position: relative; height: 22px; margin-bottom: 6px; }
.sg-range-track {
	position: absolute; top: 50%; left: 0; right: 0; height: 4px;
	background: var(--sg-border); border-radius: 4px; transform: translateY(-50%);
}
.sg-range-fill {
	position: absolute; height: 4px; background: var(--sg-primary); border-radius: 4px;
}
.sg-range {
	position: absolute; width: 100%; top: 0; margin: 0;
	-webkit-appearance: none; appearance: none;
	background: transparent; pointer-events: none;
}
.sg-range::-webkit-slider-thumb {
	-webkit-appearance: none; pointer-events: all;
	width: 18px; height: 18px; border-radius: 50%;
	background: var(--sg-primary); border: 3px solid #fff;
	box-shadow: 0 2px 6px rgba(214,51,108,0.45); cursor: pointer; margin-top: 1px;
	transition: transform .15s ease;
}
.sg-range::-webkit-slider-thumb:hover,
.sg-range::-webkit-slider-thumb:active { transform: scale(1.15); }
.sg-range::-webkit-slider-runnable-track {
	background: transparent; height: 4px; /* the coloured track is the separate
		.sg-range-track / .sg-range-fill divs underneath — the native track
		itself must stay invisible, or the browser's own default (blue in
		Chrome) shows through as a second, wrong-coloured bar/ring. */
}
.sg-range::-moz-range-track { background: transparent; height: 4px; border: none; }
.sg-range::-moz-range-thumb {
	pointer-events: all; width: 18px; height: 18px; border-radius: 50%;
	background: var(--sg-primary); border: 3px solid #fff;
	box-shadow: 0 2px 6px rgba(214,51,108,0.45); cursor: pointer;
}
.sg-range::-moz-focus-outer { border: 0; } /* Firefox's own dotted focus box on the thumb */
.sg-range:focus {
	outline: none; /* Chrome/Edge draw a blue focus ring around range inputs by
		default — with two sliders stacked on top of each other, that ring is
		exactly the stray blue circle seen on the live site. */
}
.sg-price-values { display: flex; justify-content: space-between; font-size: 13px; color: var(--sg-text); font-weight: 600; }

.sg-filter-actions { display: flex; gap: 10px; flex: 0 0 auto; }
.sg-btn-apply, .sg-btn-clear {
	padding: 11px 20px; border-radius: 999px; font-size: 14px; font-weight: 600;
	white-space: nowrap; cursor: pointer; text-decoration: none; text-align: center;
}
.sg-btn-apply { background: var(--sg-primary); color: #fff; border: none; }
.sg-btn-apply:hover { background: var(--sg-primary-dark); }
.sg-btn-clear { background: transparent; color: var(--sg-primary); border: 1.5px solid var(--sg-primary); }

/* ---------- SORT / RESULT COUNT ROW ---------- */
.woocommerce-result-count, .woocommerce-ordering {
	margin: 0 0 20px;
	color: var(--sg-muted);
	font-size: 14px;
}
.woocommerce-ordering select {
	border: 1px solid var(--sg-border);
	border-radius: 8px;
	padding: 8px 10px;
}

/* ---------- PRODUCT GRID ---------- */
.woocommerce ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 24px !important;
	margin: 0 !important;
}
.woocommerce ul.products li.product {
	position: relative;
	width: 100% !important;
	margin: 0 !important;
	background: var(--sg-white);
	border-radius: var(--sg-radius);
	overflow: hidden;
	border: 1px solid var(--sg-border);
	display: flex;
	flex-direction: column;
	transition: box-shadow .2s ease, transform .2s ease;
}
.woocommerce ul.products li.product:hover {
	box-shadow: 0 12px 24px rgba(214,51,108,0.12);
	transform: translateY(-3px);
}
.woocommerce ul.products li.product a img {
	border-radius: 0 !important;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	padding: 12px 14px 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--sg-text);
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.7em; /* keeps footers aligned across cards with 1- vs 2-line titles */
}
.woocommerce ul.products li.product .star-rating {
	margin: 6px 14px 0 !important;
	font-size: 13px;
	color: var(--sg-primary);
}
.woocommerce ul.products li.product .onsale {
	background: var(--sg-primary) !important;
	border-radius: 999px !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	top: 10px !important; left: 10px !important;
	min-height: unset !important; min-width: unset !important;
	padding: 4px 10px !important; line-height: 1.4 !important;
}

/* ---- Wishlist heart icon — floats top-right over the thumbnail ---- */
.sg-wishlist-btn {
	position: absolute;
	top: 10px; right: 10px;
	z-index: 5;
	width: 30px; height: 30px;
	border-radius: 50%;
	background: rgba(255,255,255,0.92);
	border: none;
	display: flex; align-items: center; justify-content: center;
	color: var(--sg-text);
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(0,0,0,0.14);
	transition: color .2s ease, transform .15s ease;
}
.sg-wishlist-btn svg { width: 16px; height: 16px; flex: 0 0 auto; }
.sg-wishlist-btn:hover { transform: scale(1.08); }
.sg-wishlist-btn.is-active { color: var(--sg-primary); }
.sg-wishlist-btn.is-active svg { fill: var(--sg-primary); }

/* ---- Discount % chip, sits right after the price ---- */
.sg-discount-badge {
	display: inline-block;
	background: #fde7ee;
	color: var(--sg-primary);
	font-size: 11px;
	font-weight: 700;
	padding: 3px 8px;
	border-radius: 999px;
	white-space: nowrap;
}

/* ---- Card footer — price (+ discount chip) on the left, a small
   icon-only cart button on the right. Built by JS: it moves the price
   and Add to Cart button (which WooCommerce prints in two different,
   non-adjacent places in the DOM) into one flex row, pinned to the
   bottom of the card via margin-top:auto so footers line up across
   cards even when titles wrap differently. ---- */
.sg-card-footer {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 14px 16px;
}
.sg-card-price-wrap {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px;
	min-width: 0;
}
.sg-card-price-wrap .price {
	padding: 0 !important;
	margin: 0 !important;
	font-size: 15px;
	font-weight: 700;
	color: var(--sg-text);
}
.sg-card-price-wrap .price del {
	color: var(--sg-muted);
	font-weight: 400;
	font-size: 12.5px;
	margin-right: 4px;
}
.sg-card-price-wrap .price ins {
	text-decoration: none;
	color: var(--sg-primary);
}

/* Cart button — hide WooCommerce's own "Add to cart" text, show a
   small square icon button instead (matches the reference design). */
.sg-card-footer .add_to_cart_button,
.sg-card-footer .button.product_type_simple,
.sg-card-footer .button.product_type_variable,
.sg-card-footer .added_to_cart {
	flex: 0 0 auto;
	width: 36px; height: 36px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 9px;
	background: var(--sg-primary) !important;
	border: none !important;
	color: transparent !important; /* hides the text node without removing it (a11y label stays) */
	font-size: 0 !important;
	line-height: 0 !important;
	padding: 0 !important;
	position: relative;
	transition: background .2s ease, transform .15s ease;
}
.sg-card-footer .add_to_cart_button:hover,
.sg-card-footer .button.product_type_simple:hover,
.sg-card-footer .button.product_type_variable:hover {
	background: var(--sg-primary-dark) !important;
	transform: scale(1.06);
}
.sg-card-footer .add_to_cart_button::before,
.sg-card-footer .button.product_type_simple::before,
.sg-card-footer .button.product_type_variable::before,
.sg-card-footer .added_to_cart::before {
	content: '';
	position: absolute; inset: 0; margin: auto;
	width: 16px; height: 16px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ---------- PAGINATION ---------- */
.woocommerce-pagination { margin-top: 36px; }
.woocommerce-pagination ul.page-numbers {
	display: flex; justify-content: center; gap: 8px;
	list-style: none; padding: 0; margin: 0; background: none; border: none;
}
.woocommerce-pagination ul.page-numbers li { border: none !important; }
.woocommerce-pagination .page-numbers li a.page-numbers,
.woocommerce-pagination .page-numbers li span.page-numbers {
	display: flex; align-items: center; justify-content: center;
	width: 40px; height: 40px;
	border-radius: 50%;
	border: 1px solid var(--sg-border);
	color: var(--sg-text);
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
}
.woocommerce-pagination .page-numbers li a.page-numbers:hover,
.woocommerce-pagination .page-numbers li span.page-numbers.current {
	background: var(--sg-primary);
	border-color: var(--sg-primary);
	color: #fff;
}

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

/* Tablet: 3 columns, filter becomes sidebar */
@media (max-width: 1024px) {
	.sg-filter-toolbar { display: block; }
	.woocommerce ul.products { grid-template-columns: repeat(3, 1fr) !important; }

	.sg-filter-bar {
		position: fixed;
		top: 0; right: -100%;
		width: 320px; max-width: 85vw; height: 100vh;
		flex-direction: column;
		align-items: stretch;
		border-radius: 0;
		z-index: 999;
		overflow-y: auto;
		transition: right .3s ease;
	}
	.sg-filter-bar.active { right: 0; }
	.sg-filter-panel-head {
		display: flex; align-items: center; justify-content: space-between;
		font-weight: 700; font-size: 16px; padding-bottom: 12px;
		border-bottom: 1px solid var(--sg-border); margin-bottom: 6px;
	}
	.sg-filter-close { background: none; border: none; font-size: 24px; line-height: 1; cursor: pointer; color: var(--sg-muted); }
	.sg-filter-actions { flex-direction: column; }
}

/* Mobile: 2 columns */
@media (max-width: 640px) {
	.woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }
	.sg-shop-hero { padding: 32px 20px; }
	.sg-shop-title { font-size: 24px; }
	.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 13px; padding: 10px 10px 0; min-height: 2.4em; }
	.sg-card-footer { padding: 6px 10px 12px; }
	.sg-card-price-wrap .price { font-size: 13px; }
	.sg-discount-badge { font-size: 10px; padding: 2px 6px; }
	.sg-wishlist-btn { width: 26px; height: 26px; top: 8px; right: 8px; }
	.sg-wishlist-btn svg { width: 14px; height: 14px; }
	.sg-card-footer .add_to_cart_button,
	.sg-card-footer .button.product_type_simple,
	.sg-card-footer .button.product_type_variable {
		width: 30px; height: 30px; border-radius: 8px;
	}
}