/*
 * Reusable UI components: buttons, form controls, badges, icon
 * buttons. Product-card, tabs, and accordion styles are added in
 * shop.css/product.css when those templates are built (Shop &
 * Single Product phases) rather than living here unused.
 */

/* ---- Buttons ---- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-6);
	border-radius: var(--radius-full);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	letter-spacing: 0.01em;
	line-height: 1;
	white-space: nowrap;
	border: 1px solid transparent;
	transition: background-color var(--duration-fast) var(--ease-standard),
		color var(--duration-fast) var(--ease-standard),
		border-color var(--duration-fast) var(--ease-standard),
		transform var(--duration-fast) var(--ease-standard);
}

.btn:active {
	transform: scale(0.97);
}

/* An SVG dropped into a .btn (e.g. the blog sidebar's "Shop Now"
   arrow) has no intrinsic CSS size of its own — without this it
   renders at the browser's raw default SVG box (300x150) and blows
   the button up to match. .icon-btn already sets its own 20px; match
   that convention here for icons inside a text button. */
.btn svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.btn--primary {
	background: var(--color-cta-bg);
	color: var(--color-cta-text);
}

.btn--primary:hover {
	background: var(--color-cta-hover-bg);
}

.btn--secondary {
	background: transparent;
	color: var(--color-ink);
	border-color: var(--color-ink);
}

.btn--secondary:hover {
	background: var(--color-ink-solid);
	color: #fff;
}

.btn--ghost {
	background: transparent;
	color: var(--color-ink);
	padding-inline: var(--space-2);
}

.btn--ghost:hover {
	color: var(--color-accent);
}

.btn--block {
	width: 100%;
}

.btn--sm {
	padding: var(--space-2) var(--space-4);
	font-size: var(--fs-xs);
}

.btn--lg {
	padding: var(--space-4) var(--space-8);
	font-size: var(--fs-md);
}

.btn:disabled,
.btn[aria-disabled="true"] {
	opacity: 0.45;
	cursor: not-allowed;
	pointer-events: none;
}

/* ---- Icon button (header search/account/wishlist/cart) ---- */
.icon-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--radius-full);
	color: var(--color-ink);
	transition: background-color var(--duration-fast) var(--ease-standard);
}

.icon-btn:hover {
	background: var(--color-bg-alt);
}

.icon-btn svg {
	width: 20px;
	height: 20px;
}

.icon-btn__count[hidden] {
	display: none;
}

.icon-btn__count {
	position: absolute;
	top: -2px;
	right: -2px;
	min-width: 17px;
	height: 17px;
	padding-inline: 3px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--color-accent);
	color: var(--color-accent-ink);
	font-size: 10px;
	font-weight: var(--fw-bold);
	border-radius: var(--radius-full);
	line-height: 1;
}

/* ---- Form controls ---- */
.form-field {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin-bottom: var(--space-4);
}

.form-label {
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	color: var(--color-ink);
}

.form-input,
.form-select,
.form-textarea {
	width: 100%;
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-sm);
	background: var(--color-surface);
	font-size: var(--fs-base);
	color: var(--color-ink);
	transition: border-color var(--duration-fast) var(--ease-standard),
		box-shadow var(--duration-fast) var(--ease-standard);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
	outline: none;
	border-color: var(--color-accent);
	box-shadow: var(--shadow-focus);
}

.form-input::placeholder,
.form-textarea::placeholder {
	color: var(--color-ink-faint);
}

.form-error {
	font-size: var(--fs-xs);
	color: var(--color-error);
}

/* ---- Form rows (WooCommerce's own field convention) ----
   Separate from .form-field/.form-input above (this theme's own form
   markup, used for things like the newsletter/search forms) — these
   style WooCommerce's native `.form-row`/`label`/`.input-text` classes
   directly, unmodified, wherever WooCommerce generates its own form
   markup: checkout billing/shipping, and every My Account screen
   (login, register, lost password, edit account, edit address). Lives
   here rather than in cart-checkout.css so it's loaded on every page
   that needs it — it used to live only in cart-checkout.css, which is
   enqueued solely on the Cart/Checkout pages, so My Account's forms
   silently never got it: labels stayed inline instead of stacking
   above their field, and inputs kept the browser's bare default
   appearance instead of this site's styled text fields. */
.form-row {
	margin-bottom: var(--space-4);
}

.form-row label {
	display: block;
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	margin-bottom: var(--space-2);
}

.form-row .required {
	color: var(--color-accent);
	text-decoration: none;
}

.form-row input.input-text,
.form-row select,
.form-row textarea {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-sm);
	background: var(--color-surface);
	color: var(--color-ink);
	font-size: var(--fs-base);
	font-family: inherit;
	transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}

.form-row input.input-text:focus,
.form-row select:focus,
.form-row textarea:focus {
	outline: none;
	border-color: var(--color-accent);
	box-shadow: var(--shadow-focus);
}

.form-row-first,
.form-row-last {
	width: 48%;
}

.form-row-first {
	float: left;
}

.form-row-last {
	float: right;
}

.form-row-wide {
	clear: both;
}

/* Select2 Form Controls (State, Country, etc.) */
.select2-container .select2-selection--single {
	height: 48px !important;
	border: 1px solid var(--color-border-strong) !important;
	border-radius: var(--radius-sm) !important;
	background-color: var(--color-surface) !important;
	color: var(--color-ink) !important;
	display: flex;
	align-items: center;
	padding: 0 var(--space-4);
	transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}

.select2-container .select2-selection--single:focus,
.select2-container--open .select2-selection--single {
	border-color: var(--color-accent) !important;
	box-shadow: var(--shadow-focus) !important;
	outline: none !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--color-ink) !important;
	line-height: 46px !important;
	padding-left: 0 !important;
	font-size: var(--fs-base);
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
	color: var(--color-ink-faint) !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 46px !important;
	right: 12px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
	border-color: var(--color-ink-muted) transparent transparent transparent !important;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
	border-color: transparent transparent var(--color-ink-muted) transparent !important;
}

.select2-dropdown {
	background-color: var(--color-surface) !important;
	border: 1px solid var(--color-border-strong) !important;
	border-radius: var(--radius-md) !important;
	color: var(--color-ink) !important;
	box-shadow: var(--shadow-md) !important;
	overflow: hidden;
	z-index: 9999;
}

.select2-container--default .select2-search--dropdown {
	padding: 8px !important;
	background-color: var(--color-surface) !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
	background-color: var(--color-bg) !important;
	border: 1px solid var(--color-border-strong) !important;
	border-radius: var(--radius-sm) !important;
	color: var(--color-ink) !important;
	padding: 8px 12px !important;
	outline: none !important;
}

.select2-container--default .select2-results__option {
	padding: 10px 14px !important;
	font-size: var(--fs-sm);
	color: var(--color-ink) !important;
	background-color: transparent;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--selectable:hover {
	background-color: var(--color-accent) !important;
	color: var(--color-accent-ink, #ffffff) !important;
}

.select2-container--default .select2-results__option[aria-selected="true"] {
	background-color: var(--color-bg-alt) !important;
	color: var(--color-ink) !important;
	font-weight: var(--fw-semibold);
}

/* ---- WooCommerce Notices (Errors, Success, Info) ---- */
.woocommerce-NoticeGroup-checkout,
.woocommerce-notices-wrapper {
	width: 100%;
	margin-bottom: var(--space-6);
}

.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
	list-style: none;
	margin: 0 0 var(--space-4);
	padding: 14px 18px;
	border-radius: var(--radius-md);
	font-size: var(--fs-sm);
	line-height: var(--lh-snug);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.woocommerce-error {
	background: rgba(229, 62, 62, 0.12);
	border: 1px solid rgba(229, 62, 62, 0.35);
	color: #fc8181;
}

.woocommerce-error li {
	list-style: none;
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.woocommerce-error li::before {
	content: "⚠";
	font-weight: bold;
	color: #fc8181;
}

.woocommerce-message {
	background: rgba(47, 125, 79, 0.12);
	border: 1px solid rgba(47, 125, 79, 0.35);
	color: #68d391;
}

.woocommerce-info {
	background: rgba(66, 153, 225, 0.12);
	border: 1px solid rgba(66, 153, 225, 0.35);
	color: #63b3ed;
}

/* ---- Badges ---- */
.badge {
	display: inline-flex;
	align-items: center;
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-full);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	line-height: 1.4;
}

.badge--sale {
	background: var(--color-ink-solid);
	color: #fff;
}

.badge--new {
	background: var(--color-ink-solid);
	color: #fff;
}

.badge--soldout {
	background: var(--color-bg-alt);
	color: var(--color-ink-muted);
	border: 1px solid var(--color-border);
}

.badge--success {
	background: var(--color-success-tint);
	color: var(--color-success);
}

/* ---- Product grid ---- */
.product-grid {
	align-items: start;
	gap: var(--space-6) 10px;
}

@media (max-width: 768px) {
	.product-grid {
		gap: var(--space-5) 8px;
	}
}

@media (max-width: 600px) {
	.product-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-4) 8px;
	}
}

/* ---- Product card ---- */
.product-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	position: relative;
}

.product-card__media {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--radius-md);
	background: var(--color-bg-alt);
	margin-bottom: var(--space-3);
	flex-shrink: 0;
}

.product-card__media-link {
	display: block;
	width: 100%;
	height: 100%;
}

.product-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	transition: transform var(--duration-slow) var(--ease-standard);
}

.product-card__image--placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--color-bg-alt), var(--color-border));
}

/* Secondary gallery image stays in the markup (product/card.php) for
   potential future use, but is never shown — hover zooms the primary
   image in place instead of swapping to a second photo. */
.product-card__image--secondary {
	display: none;
}

.product-card:hover .product-card__image--primary {
	transform: scale(1.08);
}

.product-card__badges {
	position: absolute;
	top: var(--space-3);
	left: var(--space-3);
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	z-index: 1;
}

.product-card__wishlist {
	position: absolute;
	top: var(--space-2);
	right: var(--space-2);
	z-index: 1;
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-full);
	background: rgba(255, 255, 255, 0.9);
	color: var(--color-ink-solid);
	backdrop-filter: blur(2px);
	transition: transform var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}

.product-card__wishlist:hover {
	transform: scale(1.08);
}

.product-card__wishlist svg {
	width: 17px;
	height: 17px;
}

.product-card__wishlist.is-active {
	color: var(--color-accent);
}

.product-card__wishlist.is-active svg path {
	fill: currentColor;
}

.product-card--soldout .product-card__media {
	opacity: 0.6;
}

.product-card__quick-view {
	position: absolute;
	left: var(--space-2);
	right: var(--space-2);
	bottom: var(--space-2);
	z-index: 1;
	padding: var(--space-2);
	background: rgba(255, 255, 255, 0.94);
	color: var(--color-ink-solid);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	text-align: center;
	border-radius: var(--radius-sm);
	opacity: 0;
	transform: translateY(6px);
	transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}

.product-card:hover .product-card__quick-view,
.product-card:focus-within .product-card__quick-view {
	opacity: 1;
	transform: translateY(0);
}

@media (hover: none) {
	.product-card__quick-view {
		display: none;
	}
}

/* Equal Alignment Body Container */
.product-card__body {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.product-card__title {
	font-family: var(--font-display);
	font-size: var(--fs-base);
	font-weight: var(--fw-medium);
	margin-bottom: 4px;
	line-height: var(--lh-snug);
	min-height: calc(var(--fs-base) * var(--lh-snug));
	max-height: calc(var(--fs-base) * var(--lh-snug) * 2);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.product-card__title a::after {
	content: '';
	position: absolute;
	inset: 0;
}

.product-card__title a {
	position: relative;
}

.product-card__rating {
	margin-bottom: 4px;
	display: flex;
	align-items: center;
}

.product-card__rating .star-rating {
	font-size: var(--fs-xs);
	color: var(--color-ink-faint);
	width: 5.4em;
	height: 1.2em;
	position: relative;
	line-height: 1.2em;
}

.product-card__rating .star-rating::before {
	content: '\2605\2605\2605\2605\2605';
	color: var(--color-border-strong);
	letter-spacing: 2px;
}

.product-card__rating .star-rating span {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	overflow: hidden;
	text-indent: -9999px;
}

.product-card__rating .star-rating span::before {
	content: '\2605\2605\2605\2605\2605';
	color: var(--color-accent);
	letter-spacing: 2px;
}

.product-card__price {
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	color: var(--color-ink);
	margin-bottom: var(--space-3);
	display: flex;
	align-items: baseline;
}

.product-card__price ins {
	text-decoration: none;
	color: var(--color-accent);
}

.product-card__price del {
	color: var(--color-ink-faint);
	font-weight: var(--fw-regular);
	margin-right: var(--space-2);
}

/* Actions stick to the bottom in equal alignment */
.product-card__actions {
	position: relative;
	z-index: 1;
	margin-top: auto;
}

.product-card__actions .btn {
	min-height: 42px;
}

.product-card__actions .added_to_cart {
	display: none !important;
}

.product-card__actions .button.loading {
	opacity: 0.6;
	pointer-events: none;
}

/* ==========================================================================
   All products Add to Cart button: Black text, White background site-wide
   ========================================================================== */
.add_to_cart_button,
.single_add_to_cart_button,
.single_add_to_cart_button.disabled,
.single_add_to_cart_button.wc-variation-selection-needed,
.product-card .add_to_cart_button,
.product-card__actions .btn--primary,
.woocommerce div.product form.cart .button.single_add_to_cart_button,
.woocommerce div.product form.cart .button.single_add_to_cart_button.disabled,
.woocommerce .woocommerce-variation-add-to-cart .button,
.woocommerce .woocommerce-variation-add-to-cart .button.disabled,
.quick-view .single_add_to_cart_button {
	background: #FFFFFF !important;
	color: #000000 !important;
	border: 1px solid #FFFFFF !important;
	font-weight: var(--fw-semibold, 600) !important;
	letter-spacing: 0.01em !important;
	opacity: 1 !important;
	transition: background-color var(--duration-fast, 150ms) ease, color var(--duration-fast, 150ms) ease, border-color var(--duration-fast, 150ms) ease, transform var(--duration-fast, 150ms) ease !important;
}

[data-theme="light"] .add_to_cart_button,
[data-theme="light"] .single_add_to_cart_button,
[data-theme="light"] .single_add_to_cart_button.disabled,
[data-theme="light"] .single_add_to_cart_button.wc-variation-selection-needed,
[data-theme="light"] .product-card .add_to_cart_button,
[data-theme="light"] .product-card__actions .btn--primary,
[data-theme="light"] .woocommerce div.product form.cart .button.single_add_to_cart_button,
[data-theme="light"] .woocommerce div.product form.cart .button.single_add_to_cart_button.disabled,
[data-theme="light"] .woocommerce .woocommerce-variation-add-to-cart .button,
[data-theme="light"] .woocommerce .woocommerce-variation-add-to-cart .button.disabled,
[data-theme="light"] .quick-view .single_add_to_cart_button {
	background: #FFFFFF !important;
	color: #000000 !important;
	border: 1.5px solid #000000 !important;
	opacity: 1 !important;
}

.add_to_cart_button:hover,
.single_add_to_cart_button:hover,
.single_add_to_cart_button.disabled:hover,
.single_add_to_cart_button.wc-variation-selection-needed:hover,
.product-card .add_to_cart_button:hover,
.product-card__actions .btn--primary:hover,
.woocommerce div.product form.cart .button.single_add_to_cart_button:hover,
.woocommerce div.product form.cart .button.single_add_to_cart_button.disabled:hover,
.woocommerce .woocommerce-variation-add-to-cart .button:hover,
.woocommerce .woocommerce-variation-add-to-cart .button.disabled:hover,
.quick-view .single_add_to_cart_button:hover {
	background: #EAEAEA !important;
	color: #000000 !important;
	border-color: #EAEAEA !important;
}

.add_to_cart_button:active,
.single_add_to_cart_button:active,
.single_add_to_cart_button.disabled:active,
.single_add_to_cart_button.wc-variation-selection-needed:active,
.product-card .add_to_cart_button:active,
.product-card__actions .btn--primary:active,
.woocommerce div.product form.cart .button.single_add_to_cart_button:active,
.woocommerce div.product form.cart .button.single_add_to_cart_button.disabled:active,
.woocommerce .woocommerce-variation-add-to-cart .button:active,
.woocommerce .woocommerce-variation-add-to-cart .button.disabled:active,
.quick-view .single_add_to_cart_button:active {
	background: #D5D5D5 !important;
	color: #000000 !important;
	transform: scale(0.98);
}

/* ==========================================================================
   Product Card Quantity Stepper (Appears on Add to Cart click)
   ========================================================================== */
.product-card__qty-stepper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-height: 42px;
	padding: 4px 6px;
	background: #FFFFFF;
	color: #000000;
	border: 1px solid #FFFFFF;
	border-radius: var(--radius-full);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
	user-select: none;
	box-sizing: border-box;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

[data-theme="light"] .product-card__qty-stepper {
	border: 1.5px solid #000000;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.product-card__qty-stepper.is-loading {
	opacity: 0.7;
	pointer-events: none;
}

.product-card__qty-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: none;
	border-radius: 50%;
	background: #EEEEEE;
	color: #000000;
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.product-card__qty-btn:hover {
	background: #DDDDDD;
}

.product-card__qty-btn:active {
	transform: scale(0.92);
}

.product-card__qty-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.product-card__qty-count {
	font-size: 15px;
	font-weight: 700;
	color: #000000;
	min-width: 28px;
	text-align: center;
	display: inline-block;
}

/* ---- Carousel (homepage New Arrivals/Best Sellers, single-product
   Recently Viewed — shared so it only needs defining once) ---- */
.carousel-nav {
	display: flex;
	gap: var(--space-2);
}

.carousel-nav__prev,
.carousel-nav__next {
	border: 1px solid var(--color-border);
}

.carousel-nav__prev:disabled,
.carousel-nav__next:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.carousel {
	--carousel-gap: 10px;
	display: flex;
	gap: var(--carousel-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	padding-bottom: var(--space-2);
	scrollbar-width: none;
	contain: layout;
	cursor: grab;
	user-select: none;
}

.carousel.is-dragging {
	cursor: grabbing;
	scroll-behavior: auto;
	scroll-snap-type: none;
}

.carousel::-webkit-scrollbar {
	display: none;
}

/* 4 cards visible across the container on desktop, matching categories */
.carousel__item {
	flex: 0 0 calc((100% - (3 * var(--carousel-gap))) / 4);
	width: calc((100% - (3 * var(--carousel-gap))) / 4);
	scroll-snap-align: start;
}

@media (max-width: 1024px) {
	.carousel__item {
		flex: 0 0 calc((100% - (2 * var(--carousel-gap))) / 3);
		width: calc((100% - (2 * var(--carousel-gap))) / 3);
	}
}

@media (max-width: 768px) {
	.carousel {
		--carousel-gap: 8px;
	}
	.carousel__item {
		flex: 0 0 calc((100% - (1 * var(--carousel-gap))) / 2);
		width: calc((100% - (1 * var(--carousel-gap))) / 2);
	}
}

@media (max-width: 480px) {
	.carousel {
		--carousel-gap: 8px;
	}
	.carousel__item {
		flex: 0 0 min(240px, 72vw);
		width: min(240px, 72vw);
	}
}

/* ---- Quantity stepper (single product, Quick View, cart page —
   shared so it only needs defining once) ---- */
.quantity {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-sm);
	overflow: hidden;
}

.quantity .qty {
	width: 52px;
	border: none;
	text-align: center;
	-moz-appearance: textfield;
}

.quantity .qty::-webkit-inner-spin-button,
.quantity .qty::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.quantity__btn {
	width: 36px;
	font-size: var(--fs-md);
	color: var(--color-ink-muted);
	background: var(--color-bg-alt);
}

.quantity__btn:hover {
	color: var(--color-ink);
}

/* ---- Empty state (no posts/products/results — blog, search, the
   Shop's filtered-to-empty grid, Wishlist) ----
   Lives here rather than in blog.css because the Wishlist page is a
   plain WP Page: it never matches is_home()/is_archive()/is_search(),
   so it never enqueues blog.css. This is a sitewide component, so it
   belongs in the sitewide stylesheet. */
.empty-state {
	text-align: center;
	max-width: 440px;
	margin: var(--space-12) auto;
	padding: var(--space-10) var(--space-6);
}

.empty-state__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: var(--radius-full);
	background: var(--color-bg-alt);
	color: var(--color-ink-faint);
	margin-bottom: var(--space-5);
}

.empty-state__icon svg {
	width: 26px;
	height: 26px;
}

.empty-state__title {
	margin-bottom: var(--space-3);
}

.empty-state__text {
	color: var(--color-ink-muted);
	line-height: var(--lh-relaxed);
	margin-bottom: var(--space-6);
}

/* ---- Quick View modal (global — triggered from any product card) ---- */
.quick-view-modal {
	position: fixed;
	inset: 0;
	z-index: 300;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-4);
}

.quick-view-modal[hidden] {
	display: none;
}

.quick-view-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(23, 23, 23, 0.5);
}

.quick-view-modal__panel {
	position: relative;
	z-index: 1;
	background: var(--color-bg);
	border-radius: var(--radius-lg);
	max-width: 880px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	animation: sls-modal-in var(--duration-base) var(--ease-standard);
}

@keyframes sls-modal-in {
	from { opacity: 0; transform: translateY(12px) scale(0.98); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

.quick-view-modal__close {
	position: absolute;
	top: var(--space-4);
	right: var(--space-4);
	z-index: 2;
	background: var(--color-bg);
	box-shadow: var(--shadow-sm);
}

.quick-view {
	display: grid;
	/* minmax(0, 1fr), not bare 1fr — same grid-blowout trap documented
	   in product.css's .single-product-layout: bare 1fr carries an
	   implicit `auto` minimum, so once .quick-view__summary holds the
	   real single-product-summary markup (a variations <table>, long
	   product titles, etc.) instead of the old short hand-written
	   block, that column's min-content width can force the whole grid
	   wider than the modal panel — pushing content off to the right
	   instead of wrapping/shrinking within it. */
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.quick-view__media {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	min-width: 0;
	/* No explicit height: .quick-view's default align-items: stretch
	   already grows this grid item to match .quick-view__body's
	   natural height — the image below then fills whatever that turns
	   out to be via flex: 1, instead of a fixed aspect-ratio dictating
	   the height itself. Without this, a tall 4:5 image forced the
	   whole modal taller than the (now shorter, since meta/trust were
	   dropped) summary column actually needs, leaving a block of empty
	   space under "View full details". */
}

.quick-view__image {
	display: block;
	width: 100%;
	flex: 1 1 auto;
	/* A real floor, not 0 — guards against the summary column ever
	   being short enough (a simple product with a one-line title and
	   no description) to squash the photo down to nothing. */
	min-height: 260px;
	object-fit: cover;
	background: var(--color-bg-alt);
}

/* .product-card__image--placeholder normally sizes itself to a
   parent that already has the aspect ratio (the product-card grid);
   here it instead fills whatever height .quick-view__media ends up
   with, same as .quick-view__image above. */
.quick-view__media .product-card__image--placeholder {
	flex: 1 1 auto;
	min-height: 260px;
	height: auto;
}

/* ---- Thumbnail strip below the main image — a simplified stand-in
   for the real product page's flexslider gallery (click-to-swap the
   main image, wired in assets/js/quick-view.js); no slider/zoom
   needed for a quick peek. ---- */
.quick-view__thumbs {
	display: flex;
	gap: var(--space-2);
	overflow-x: auto;
}

.quick-view__thumb {
	flex: 0 0 auto;
	width: 64px;
	padding: 0;
	border: 2px solid var(--color-border);
	border-radius: var(--radius-sm);
	overflow: hidden;
	opacity: 0.7;
	transition: opacity var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}

.quick-view__thumb img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.quick-view__thumb:hover {
	opacity: 1;
}

.quick-view__thumb.is-active {
	border-color: var(--color-accent);
	opacity: 1;
}

.quick-view__body {
	padding: var(--space-8);
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* Quick View now reuses the real woocommerce_single_product_summary
   markup (title/rating/price/variations-form/Buy Now+Wishlist/meta/
   trust — see template-parts/product/quick-view-content.php), styled
   by product.css's .single-product-layout__summary-scoped rules. That
   selector also caps width at 520px for the actual product page's
   wider two-column layout — irrelevant to this narrower modal column,
   so it's neutralized here rather than fighting it. */
.quick-view__summary {
	min-width: 0;
	max-width: none;
}

/* product.css sizes .product_title for the real product page's wider
   (520px) summary column — .quick-view__summary is noticeably
   narrower, so at that same size the title wraps to two oversized
   lines and dominates the popup. Scoped down here rather than
   changed globally. */
.quick-view__summary .product_title {
	font-size: var(--fs-xl);
	margin-bottom: var(--space-1);
}

.quick-view__title {
	margin-bottom: var(--space-2);
}

.quick-view__price {
	font-size: var(--fs-lg);
	font-weight: var(--fw-semibold);
	margin-bottom: var(--space-4);
}

.quick-view__price ins {
	text-decoration: none;
	color: var(--color-accent);
}

.quick-view__price del {
	color: var(--color-ink-faint);
	font-weight: var(--fw-regular);
	margin-right: var(--space-2);
}

.quick-view__excerpt {
	color: var(--color-ink-muted);
	font-size: var(--fs-sm);
	margin-bottom: var(--space-6);
}

.quick-view__qty-row {
	display: flex;
	gap: var(--space-3);
	align-items: stretch;
}

.quick-view__qty-row .quantity {
	display: flex;
}

.quick-view__qty-row .qty {
	width: 64px;
	text-align: center;
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-sm);
}

.quick-view__qty-row button[type="submit"] {
	flex: 1;
}

.quick-view__full-link {
	display: inline-block;
	margin-top: var(--space-4);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	border-bottom: 1px solid currentColor;
	align-self: flex-start;
}

.quick-view__loading {
	padding: var(--space-12);
	text-align: center;
	color: var(--color-ink-muted);
}

@media (max-width: 700px) {
	.quick-view {
		grid-template-columns: 1fr;
	}

	.quick-view__media {
		aspect-ratio: 4 / 3;
	}

	.quick-view__body {
		padding: var(--space-6);
	}
}

/* ==========================================================================
   Global WooCommerce BlockUI & Loading Overlay Override
   Removes white overlay and adds sleek circular spinner loader
   ========================================================================== */

.blockUI.blockOverlay {
	background: rgba(0, 0, 0, 0.28) !important;
	opacity: 1 !important;
	backdrop-filter: blur(2px) !important;
	-webkit-backdrop-filter: blur(2px) !important;
	border-radius: var(--radius-md, 8px) !important;
	cursor: wait !important;
	transition: opacity 0.2s ease !important;
	z-index: 1000 !important;
}

[data-theme="light"] .blockUI.blockOverlay {
	background: rgba(255, 255, 255, 0.45) !important;
}

/* Round Loader Spinner (Single clean circular spinner, no top line) */
.blockUI.blockOverlay::after {
	content: '' !important;
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	width: 34px !important;
	height: 34px !important;
	margin: -17px 0 0 -17px !important;
	border: 3px solid rgba(255, 255, 255, 0.18) !important;
	border-top-color: #FFFFFF !important;
	border-right-color: #FFFFFF !important;
	border-radius: 50% !important;
	animation: sls-loader-spin 0.72s linear infinite !important;
	box-shadow: 0 0 16px rgba(255, 255, 255, 0.25) !important;
	z-index: 1005 !important;
	pointer-events: none !important;
}

[data-theme="light"] .blockUI.blockOverlay::after {
	border-color: rgba(0, 0, 0, 0.12) !important;
	border-top-color: #000000 !important;
	border-right-color: #000000 !important;
	box-shadow: 0 0 16px rgba(0, 0, 0, 0.1) !important;
}

@keyframes sls-loader-spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

.blockUI.blockMsg {
	border: none !important;
	background: transparent !important;
}