/* ==========================================================================
   Cosplay Pro — WooCommerce Styles
   LAYOUT & VISUAL STYLING ONLY

   This stylesheet themes the WooCommerce output to match the Cosplay Pro
   dark-purple design. It does NOT hide, reorder, or remove any WooCommerce
   elements. All WooCommerce hooks remain intact for plugin compatibility.

   Third-party plugin compatibility is handled via generic selectors
   at the bottom of this file.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. WooCommerce Layout Shell
   -------------------------------------------------------------------------- */
.woocommerce-main {
	padding-block: var(--space-2xl);
}

.woocommerce-main .container {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-2xl);
}

@media (min-width: 992px) {
	.woocommerce-main.has-sidebar .container {
		grid-template-columns: 1fr 280px;
	}
}

/* --------------------------------------------------------------------------
   2. Breadcrumbs
   -------------------------------------------------------------------------- */
.woocommerce-breadcrumb {
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
	padding: var(--space-md) 0;
	margin-bottom: var(--space-lg);
}

.woocommerce-breadcrumb a {
	color: var(--color-text-muted);
}

.woocommerce-breadcrumb a:hover {
	color: var(--color-primary-light);
}

.breadcrumb-sep {
	margin-inline: var(--space-sm);
	color: var(--color-border);
}

/* --------------------------------------------------------------------------
   3. Product Grid (Archive / Shop)
   -------------------------------------------------------------------------- */
.woocommerce ul.products {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--space-xl);
	margin: 0;
	padding: 0;
}

.woocommerce ul.products li.product {
	position: relative;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	padding: 0;
	margin: 0;
	width: 100% !important;
	transition: all 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.woocommerce ul.products li.product:hover {
	border-color: var(--color-primary);
	transform: translateY(-6px);
	box-shadow:
		0 12px 36px rgba(155, 89, 182, 0.3),
		0 0 0 1px rgba(155, 89, 182, 0.15);
}

/* Product Image — cosplay costume portrait */
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product > a > img {
	margin: 0;
	border-radius: 0;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),
	            filter 0.6s ease;
	filter: brightness(0.92);
}

.woocommerce ul.products li.product:hover a img {
	transform: scale(1.08);
	filter: brightness(1.05);
}

/* Spotlight glow overlay on product image hover */
.woocommerce ul.products li.product > a {
	position: relative;
	display: block;
	overflow: hidden;
}

.woocommerce ul.products li.product > a::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		transparent 50%,
		rgba(155, 89, 182, 0.08) 75%,
		rgba(155, 89, 182, 0.22) 100%
	);
	opacity: 0;
	transition: opacity 0.5s ease;
	pointer-events: none;
	z-index: 1;
}

.woocommerce ul.products li.product:hover > a::after {
	opacity: 1;
}

/* Sale Badge — styled only, not injected by theme */
.woocommerce span.onsale {
	position: absolute;
	top: var(--space-md);
	right: var(--space-md);
	left: auto;
	background: var(--color-error);
	color: #fff;
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 0.3rem 0.75rem;
	border-radius: var(--radius-sm);
	min-height: auto;
	min-width: auto;
	line-height: 1.4;
	z-index: 5;
}

/* Product Title */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--font-body);
	font-size: var(--fs-base);
	font-weight: var(--fw-semibold);
	color: var(--color-text-heading);
	padding: var(--space-md) var(--space-lg) var(--space-xs);
	margin: 0;
}

/* Product Price */
.woocommerce ul.products li.product .price {
	padding: 0 var(--space-lg);
	color: var(--color-primary-light);
	font-size: var(--fs-md);
	font-weight: var(--fw-bold);
	margin-bottom: 0;
}

.woocommerce ul.products li.product .price del {
	color: var(--color-text-muted);
	opacity: 0.6;
	font-size: var(--fs-sm);
}

.woocommerce ul.products li.product .price ins {
	text-decoration: none;
	color: var(--color-accent);
}

/* Star Rating */
.woocommerce .star-rating {
	color: var(--color-accent);
	font-size: var(--fs-sm);
	margin: var(--space-xs) var(--space-lg);
}

/* Add to Cart Button — visual style only */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.add_to_cart_button,
.woocommerce ul.products li.product a.product_type_variable,
.woocommerce ul.products li.product a.product_type_grouped {
	display: block;
	margin: var(--space-md) var(--space-lg) var(--space-lg);
	padding: 0.625rem var(--space-lg);
	background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
	color: #fff !important;
	border: none;
	border-radius: var(--radius-md);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	transition: all var(--transition-normal);
	text-decoration: none;
}

.woocommerce ul.products li.product .button:hover {
	background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
	box-shadow: var(--shadow-glow);
}

/* ==========================================================================
   4. SINGLE PRODUCT — Immersive Cosplay Layout
   ==========================================================================
   Design reference: ASOS / Nike / EZCosplay

   Structure (produced by PHP hooks, see inc/woocommerce.php):
     .cosplay-product           → block container (NOT grid)
       .cosplay-product__top    → 2-column grid (gallery 58% + summary 42%)
       .cosplay-product__extra-sections → full-width (meta, FBT, plugins)
       .cosplay-product__details        → full-width (tabs, related)

   The __top wrapper is CLOSED by a PHP hook at priority 32 inside
   woocommerce_single_product_summary. Everything at priority ≥ 33
   renders in __extra-sections (full-width).

   All WooCommerce hooks preserved — layout + style only.
   ========================================================================== */

/* --- WooCommerce Default Layout Reset -----------------------------------
   WC's woocommerce-layout.css applies float:left/right + width:48%
   to .images and .summary inside .product. We must neutralize these
   since our layout uses CSS Grid, not floats.
   ----------------------------------------------------------------------- */
.cosplay-product,
.cosplay-product .woocommerce-product-gallery,
.cosplay-product div.images,
.cosplay-product div.summary,
.cosplay-product .summary {
	float: none !important;
	width: 100% !important;
	clear: none !important;
}

/* --- Product Container (block, NOT grid) --- */
.cosplay-product {
	display: block;
	position: relative;
}

/* --- Top Section: 2-Column Grid (Gallery + Summary) --- */
.cosplay-product__top {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
}

@media (min-width: 1024px) {
	.cosplay-product__top {
		grid-template-columns: 58% 42%;
	}

	/* Summary sticks to top while user scrolls the gallery */
	.cosplay-product__summary {
		position: sticky;
		top: var(--header-height, 80px);
		align-self: start;
	}
}

/* --- Gallery Column --- */
.cosplay-product__gallery {
	position: relative;
	background: var(--color-surface);
}

/* Make gallery images stack vertically for scroll-through browsing */
.cosplay-product__gallery .woocommerce-product-gallery {
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

.cosplay-product__gallery .woocommerce-product-gallery .flex-viewport,
.cosplay-product__gallery .woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
	display: flex;
	flex-direction: column;
}

.cosplay-product__gallery .woocommerce-product-gallery__image {
	width: 100% !important;
	flex-shrink: 0;
}

.cosplay-product__gallery .woocommerce-product-gallery__image a,
.cosplay-product__gallery .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

/* Sale badge on gallery */
.cosplay-product__gallery .woocommerce span.onsale {
	top: var(--space-lg);
	left: var(--space-lg);
	right: auto;
	font-size: var(--fs-sm);
	padding: 0.4rem 1rem;
	border-radius: var(--radius-md);
	z-index: 10;
}

/* Gallery thumbnails at bottom (WC default) — styled as strip */
.cosplay-product__gallery .flex-control-thumbs {
	display: flex;
	gap: 8px;
	padding: var(--space-md) var(--space-lg);
	margin: 0;
	list-style: none;
	overflow-x: auto;
	background: var(--color-bg);
	border-top: 1px solid var(--color-border);
}

.cosplay-product__gallery .flex-control-thumbs li {
	flex: 0 0 72px;
	height: 90px;
	border-radius: var(--radius-md);
	overflow: hidden;
	border: 2px solid transparent;
	transition: border-color var(--transition-fast);
	cursor: pointer;
}

.cosplay-product__gallery .flex-control-thumbs li:hover,
.cosplay-product__gallery .flex-control-thumbs li.is-active,
.cosplay-product__gallery .flex-control-thumbs li.flex-active {
	border-color: var(--color-primary);
	box-shadow: 0 0 8px rgba(155, 89, 182, 0.35);
}

.cosplay-product__gallery .flex-control-thumbs li img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.6;
	transition: opacity var(--transition-fast);
}

.cosplay-product__gallery .flex-control-thumbs li:hover img,
.cosplay-product__gallery .flex-control-thumbs li.is-active img,
.cosplay-product__gallery .flex-control-thumbs li.flex-active img {
	opacity: 1;
}

/* --- Summary Column --- */
.cosplay-product__summary {
	position: relative;
}

.cosplay-product__summary-inner {
	padding: var(--space-xl) var(--container-pad);
}

@media (min-width: 1024px) {
	.cosplay-product__summary-inner {
		padding: var(--space-2xl) var(--space-2xl) var(--space-3xl);
	}
}

/* --- Category Tag (above title) --- */
.cosplay-product__cat-tag {
	margin-bottom: var(--space-sm);
}

.cosplay-product__cat-tag a {
	display: inline-block;
	padding: 0.2rem 0.75rem;
	background: rgba(155, 89, 182, 0.12);
	color: var(--color-primary-light);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	border-radius: var(--radius-full);
	text-decoration: none;
	transition: all var(--transition-fast);
}

.cosplay-product__cat-tag a:hover {
	background: var(--color-primary);
	color: #fff;
}

/* --- Title --- */
.cosplay-product .product_title {
	font-family: var(--font-heading);
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	font-weight: var(--fw-bold);
	color: var(--color-text-heading);
	line-height: var(--lh-tight);
	margin-bottom: var(--space-md);
	letter-spacing: 0.02em;
}

/* --- Rating --- */
.cosplay-product .woocommerce-product-rating {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	margin-bottom: var(--space-md);
}

.cosplay-product .star-rating {
	color: var(--color-accent);
	font-size: var(--fs-sm);
	margin: 0;
}

.cosplay-product .woocommerce-review-link {
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
}

/* --- Price --- */
.cosplay-product p.price,
.cosplay-product span.price {
	font-size: var(--fs-2xl) !important;
	color: var(--color-primary-light);
	font-weight: var(--fw-bold);
	margin-bottom: var(--space-lg);
	line-height: 1;
}

.cosplay-product p.price del {
	color: var(--color-text-muted);
	font-size: var(--fs-lg);
	font-weight: var(--fw-normal);
}

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

/* Savings indicator */
.cosplay-product p.price del + ins::after {
	content: '';
}

/* --- Short Description --- */
.cosplay-product .woocommerce-product-details__short-description {
	color: var(--color-text-muted);
	font-size: var(--fs-base);
	line-height: var(--lh-relaxed);
	margin-bottom: var(--space-xl);
	padding-bottom: var(--space-lg);
	border-bottom: 1px solid var(--color-border);
}

.cosplay-product .woocommerce-product-details__short-description p:last-child {
	margin-bottom: 0;
}

/* --- Variations Form --- */
.cosplay-product form.cart .variations {
	margin-bottom: var(--space-lg);
	width: 100%;
}

.cosplay-product form.cart .variations table {
	width: 100%;
}

.cosplay-product form.cart .variations td,
.cosplay-product form.cart .variations th {
	display: block;
	padding: 0;
	border: none;
	width: 100%;
}

.cosplay-product form.cart .variations tr {
	display: block;
	margin-bottom: var(--space-md);
}

.cosplay-product form.cart .variations label {
	display: block;
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
	color: var(--color-text);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: var(--space-xs);
}

.cosplay-product form.cart .variations select {
	width: 100%;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	color: var(--color-text);
	padding: 0.625rem var(--space-md);
	font-size: var(--fs-base);
	transition: border-color var(--transition-fast);
}

.cosplay-product form.cart .variations select:focus {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 2px rgba(155, 89, 182, 0.2);
	outline: none;
}

.cosplay-product form.cart .reset_variations {
	display: inline-block;
	margin-top: var(--space-xs);
	color: var(--color-text-muted);
	font-size: var(--fs-xs);
}

/* --- Quantity + Add to Cart --- */
.cosplay-product form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md);
	align-items: flex-end;
	margin-bottom: var(--space-xl);
	padding-bottom: var(--space-lg);
	border-bottom: 1px solid var(--color-border);
}

.cosplay-product form.cart .quantity {
	flex: 0 0 auto;
}

.cosplay-product form.cart .quantity input[type="number"] {
	width: 72px;
	height: 52px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	color: var(--color-text);
	font-size: var(--fs-md);
	font-weight: var(--fw-bold);
	text-align: center;
}

.cosplay-product form.cart .quantity input[type="number"]:focus {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 2px rgba(155, 89, 182, 0.2);
	outline: none;
}

.cosplay-product form.cart .single_add_to_cart_button {
	flex: 1;
	min-width: 200px;
	height: 52px;
	padding: 0 var(--space-xl);
	background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
	color: #fff;
	border: none;
	border-radius: var(--radius-md);
	font-family: var(--font-heading);
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	cursor: pointer;
	transition: all var(--transition-normal);
}

.cosplay-product form.cart .single_add_to_cart_button:hover {
	background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
	box-shadow: var(--shadow-glow);
	transform: translateY(-2px);
}

/* --- Product Meta --- */
.cosplay-product .product_meta {
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
	margin-bottom: var(--space-lg);
}

.cosplay-product .product_meta > span {
	display: block;
	margin-bottom: var(--space-xs);
}

.cosplay-product .product_meta a {
	color: var(--color-primary-light);
}

/* --- Trust Badges --- */
.cosplay-trust-badges {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	margin-top: var(--space-lg);
	padding-top: var(--space-lg);
	border-top: 1px solid var(--color-border);
}

.cosplay-trust-badge {
	display: flex;
	align-items: flex-start;
	gap: var(--space-md);
}

.cosplay-trust-badge svg {
	flex-shrink: 0;
	color: var(--color-primary-light);
	margin-top: 2px;
}

.cosplay-trust-badge div {
	display: flex;
	flex-direction: column;
}

.cosplay-trust-badge strong {
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	color: var(--color-text);
}

.cosplay-trust-badge span {
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
}

/* ==========================================================================
   4b. Extra Sections — Full-width zone for plugin content
   ==========================================================================
   Content from woocommerce_single_product_summary at priority ≥ 33
   (meta, sharing, FBT, bundles, etc.) renders here via PHP hooks.
   This section is a normal block, naturally 100% wide.
   ========================================================================== */
.cosplay-product__extra-sections {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
	padding-block: var(--space-2xl) 0;
}

/* Each direct child plugin section gets a separator */
.cosplay-product__extra-sections > * + * {
	margin-top: var(--space-2xl);
	padding-top: var(--space-xl);
	border-top: 1px solid var(--color-border);
}

.cosplay-product__extra-sections:empty {
	display: none;
	padding: 0;
}

/* ==========================================================================
   4c. Details Section — Tabs + Upsells + Related (full-width)
   ========================================================================== */
.cosplay-product__details {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
	padding-block: var(--space-2xl);
}

/* --------------------------------------------------------------------------
   5. Product Tabs — Redesigned for Immersive Layout
      Plugins can add tabs via woocommerce_product_tabs filter.
      All tabs (including plugin-added ones) inherit these styles.
   -------------------------------------------------------------------------- */
.cosplay-product__details .woocommerce-tabs,
.woocommerce div.product .woocommerce-tabs {
	margin-top: 0;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	overflow: hidden;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--color-border);
	list-style: none;
	background: var(--color-bg-alt);
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
	display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: none;
	border: none;
	margin: 0;
	padding: 0;
	border-radius: 0;
	flex: 1;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-lg) var(--space-md);
	color: var(--color-text-muted);
	font-weight: var(--fw-semibold);
	font-size: var(--fs-sm);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	border-bottom: 3px solid transparent;
	margin-bottom: -1px;
	transition: all var(--transition-fast);
	text-align: center;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--color-text);
	background: rgba(155, 89, 182, 0.05);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--color-primary-light);
	border-bottom-color: var(--color-primary);
	background: rgba(155, 89, 182, 0.08);
}

.woocommerce div.product .woocommerce-tabs .panel {
	padding: var(--space-2xl);
	color: var(--color-text);
	background: none;
	border: none;
	box-shadow: none;
	line-height: var(--lh-relaxed);
	font-size: var(--fs-base);
}

.woocommerce div.product .woocommerce-tabs .panel h2 {
	font-size: var(--fs-lg);
	margin-bottom: var(--space-lg);
}

.woocommerce div.product .woocommerce-tabs .panel p {
	margin-bottom: var(--space-md);
}

.woocommerce div.product .woocommerce-tabs .panel table {
	width: 100%;
	border-collapse: collapse;
}

.woocommerce div.product .woocommerce-tabs .panel table th,
.woocommerce div.product .woocommerce-tabs .panel table td {
	padding: var(--space-sm) var(--space-md);
	border-bottom: 1px solid var(--color-border);
	text-align: left;
}

.woocommerce div.product .woocommerce-tabs .panel table th {
	color: var(--color-text-heading);
	font-weight: var(--fw-semibold);
}

/* Reviews inside tabs */
.woocommerce #reviews #comments ol.commentlist li {
	padding: var(--space-lg) 0;
	border-bottom: 1px solid var(--color-border);
}

.woocommerce #reviews #comments ol.commentlist li .meta {
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
}

.woocommerce #review_form #respond .form-submit input {
	background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
	color: #fff;
	border: none;
	border-radius: var(--radius-md);
	padding: 0.75rem var(--space-xl);
	font-weight: var(--fw-semibold);
	cursor: pointer;
	transition: all var(--transition-normal);
}

.woocommerce #review_form #respond .form-submit input:hover {
	background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
	box-shadow: var(--shadow-glow);
}

/* --------------------------------------------------------------------------
   6. Product Meta
   -------------------------------------------------------------------------- */
.woocommerce div.product .product_meta {
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
	padding-top: var(--space-lg);
	border-top: 1px solid var(--color-border);
}

.woocommerce div.product .product_meta > span {
	display: block;
	margin-bottom: var(--space-xs);
}

.woocommerce div.product .product_meta a {
	color: var(--color-primary-light);
}

/* --------------------------------------------------------------------------
   7. Cart Page
   -------------------------------------------------------------------------- */
.woocommerce table.shop_table {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	border-collapse: separate;
}

.woocommerce table.shop_table th {
	background: var(--color-surface);
	color: var(--color-text-heading);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: var(--space-md) var(--space-lg);
	border-bottom: 1px solid var(--color-border);
}

.woocommerce table.shop_table td {
	background: var(--color-bg);
	color: var(--color-text);
	padding: var(--space-md) var(--space-lg);
	border-top: 1px solid var(--color-border);
}

.woocommerce table.shop_table .product-thumbnail img {
	width: 60px;
	height: 80px;
	object-fit: cover;
	border-radius: var(--radius-sm);
}

.woocommerce table.shop_table .product-name a {
	color: var(--color-text-heading);
	font-weight: var(--fw-medium);
}

.woocommerce table.shop_table .product-name a:hover {
	color: var(--color-primary-light);
}

/* Cart Totals */
.woocommerce .cart-collaterals .cart_totals {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-xl);
}

.woocommerce .cart-collaterals .cart_totals h2 {
	font-size: var(--fs-lg);
	margin-bottom: var(--space-lg);
}

/* --------------------------------------------------------------------------
   8. Checkout
   -------------------------------------------------------------------------- */
.woocommerce form .form-row label {
	color: var(--color-text);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
}

.woocommerce form .form-row .input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	color: var(--color-text);
	padding: 0.625rem var(--space-md);
}

.woocommerce form .form-row .input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 2px rgba(155, 89, 182, 0.2);
	outline: none;
}

.woocommerce #place_order,
.woocommerce .checkout-button {
	background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
	color: #fff;
	border: none;
	border-radius: var(--radius-md);
	padding: 1rem var(--space-2xl);
	font-family: var(--font-heading);
	font-size: var(--fs-base);
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	cursor: pointer;
	transition: all var(--transition-normal);
}

.woocommerce #place_order:hover,
.woocommerce .checkout-button:hover {
	background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
	box-shadow: var(--shadow-glow);
}

/* --------------------------------------------------------------------------
   9. Notices & Messages
   -------------------------------------------------------------------------- */
.woocommerce-message,
.woocommerce-info {
	background-color: var(--color-surface);
	border-top-color: var(--color-primary);
	color: var(--color-text);
	border-radius: var(--radius-md);
}

.woocommerce-message::before {
	color: var(--color-primary-light);
}

.woocommerce-info::before {
	color: var(--color-primary-light);
}

.woocommerce-error {
	background-color: var(--color-surface);
	border-top-color: var(--color-error);
	color: var(--color-text);
	border-radius: var(--radius-md);
}

.woocommerce-error li {
	color: var(--color-text);
}

.woocommerce-message .button,
.woocommerce-info .button {
	color: var(--color-primary-light) !important;
	background: none !important;
	border: 1px solid var(--color-primary) !important;
	border-radius: var(--radius-md);
	padding: 0.375rem 1rem;
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
}

.woocommerce-message .button:hover,
.woocommerce-info .button:hover {
	background: var(--color-primary) !important;
	color: #fff !important;
}

/* --------------------------------------------------------------------------
   10. Shop Sidebar
   -------------------------------------------------------------------------- */
.shop-sidebar {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-xl);
}

.shop-sidebar .widget-title {
	font-size: var(--fs-base);
	color: var(--color-text-heading);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding-bottom: var(--space-md);
	border-bottom: 2px solid var(--color-primary);
	margin-bottom: var(--space-lg);
}

/* Price Filter Widget */
.woocommerce .widget_price_filter .ui-slider {
	background: var(--color-border);
	border-radius: var(--radius-full);
}

.woocommerce .widget_price_filter .ui-slider .ui-slider-range {
	background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
}

.woocommerce .widget_price_filter .ui-slider .ui-slider-handle {
	background: var(--color-primary-light);
	border-color: var(--color-primary-light);
}

/* --------------------------------------------------------------------------
   11. Related & Upsell Products — inside .cosplay-product__details
   -------------------------------------------------------------------------- */
.cosplay-product__details .related.products,
.cosplay-product__details .upsells.products,
.woocommerce div.product .related.products,
.woocommerce div.product .upsells.products {
	margin-top: var(--space-3xl);
	padding-top: var(--space-2xl);
	border-top: 1px solid var(--color-border);
}

.cosplay-product__details .related.products h2,
.cosplay-product__details .upsells.products h2,
.woocommerce div.product .related.products h2,
.woocommerce div.product .upsells.products h2 {
	font-family: var(--font-heading);
	font-size: var(--fs-xl);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: var(--space-2xl);
	text-align: center;
}

.cosplay-product__details .related.products h2::after,
.cosplay-product__details .upsells.products h2::after {
	content: '';
	display: block;
	width: 60px;
	height: 3px;
	background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
	margin: var(--space-md) auto 0;
	border-radius: var(--radius-full);
}

/* --------------------------------------------------------------------------
   12. My Account
   -------------------------------------------------------------------------- */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	padding: 0;
	margin: 0;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
	display: block;
	padding: var(--space-md) var(--space-lg);
	color: var(--color-text);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	border-bottom: 1px solid var(--color-border);
	transition: all var(--transition-fast);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li:last-child a {
	border-bottom: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
	background: rgba(155, 89, 182, 0.1);
	color: var(--color-primary-light);
}

/* ==========================================================================
   13. THIRD-PARTY PLUGIN COMPATIBILITY
   ==========================================================================
   Generic styles to ensure common WooCommerce plugins look correct
   within the dark theme. These use low specificity so plugins can
   easily override them.
   ========================================================================== */

/* --- Variation Swatches (generic — works with most swatch plugins) --- */
.woocommerce div.product form.cart .tawcvs-swatches,
.woocommerce div.product form.cart .variation-swatches,
.woocommerce div.product form.cart [class*="swatch"] {
	margin-bottom: var(--space-md);
}

/* Color swatches */
.woocommerce div.product form.cart [class*="swatch"] .swatch-anchor,
.woocommerce div.product form.cart [class*="swatch"] .swatch-item-wrapper {
	border-color: var(--color-border);
	transition: border-color var(--transition-fast);
}

.woocommerce div.product form.cart [class*="swatch"] .swatch-anchor:hover,
.woocommerce div.product form.cart [class*="swatch"] .swatch-anchor.selected {
	border-color: var(--color-primary);
	box-shadow: 0 0 8px rgba(155, 89, 182, 0.3);
}

/* --- Product Add-ons / Extra Fields --- */
.woocommerce div.product .wc-pao-addon-container,
.woocommerce div.product .product-addon,
.woocommerce div.product [class*="addon"] {
	margin-bottom: var(--space-lg);
}

.woocommerce div.product .wc-pao-addon-container label,
.woocommerce div.product .product-addon label {
	color: var(--color-text);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
}

.woocommerce div.product .wc-pao-addon-container input,
.woocommerce div.product .wc-pao-addon-container select,
.woocommerce div.product .wc-pao-addon-container textarea,
.woocommerce div.product .product-addon input,
.woocommerce div.product .product-addon select,
.woocommerce div.product .product-addon textarea {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	color: var(--color-text);
	padding: 0.5rem var(--space-md);
}

.woocommerce div.product .wc-pao-addon-container input:focus,
.woocommerce div.product .wc-pao-addon-container select:focus,
.woocommerce div.product .product-addon input:focus,
.woocommerce div.product .product-addon select:focus {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 2px rgba(155, 89, 182, 0.2);
	outline: none;
}

/* --- Size Guide / Size Chart Popups (generic) --- */
[class*="size-guide"],
[class*="size-chart"],
[class*="sizeguide"] {
	color: var(--color-primary-light);
}

[class*="size-guide"]:hover,
[class*="size-chart"]:hover,
[class*="sizeguide"]:hover {
	color: var(--color-primary);
}

/* --- Wishlist Buttons (YITH, TI, etc.) --- */
.woocommerce ul.products li.product .yith-wcwl-add-to-wishlist,
.woocommerce ul.products li.product .tinvwl_add_to_wishlist_button,
.woocommerce ul.products li.product [class*="wishlist"] a {
	color: var(--color-text-muted);
	transition: color var(--transition-fast);
}

.woocommerce ul.products li.product [class*="wishlist"] a:hover {
	color: var(--color-primary-light);
}

/* --- Quick View Modals --- */
.woocommerce .quick-view-content,
.woocommerce [class*="quickview"] {
	background: var(--color-bg);
	color: var(--color-text);
}

/* --- Cart Drawers / Mini Carts (plugin-injected) --- */
[class*="cart-drawer"],
[class*="mini-cart"],
[class*="side-cart"] {
	/* Ensure plugin drawers render above the header */
	z-index: 9999;
}

/* --- Generic WooCommerce Buttons (covers all plugins) --- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
	color: #fff;
	border: none;
	border-radius: var(--radius-md);
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	transition: all var(--transition-normal);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
	box-shadow: var(--shadow-glow);
	color: #fff;
}

.woocommerce a.button.disabled,
.woocommerce button.button.disabled,
.woocommerce a.button.alt.disabled,
.woocommerce button.button.alt.disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ==========================================================================
   13b–13e.  DARK-THEME OVERRIDES — add-to-cart & size-va Plugins
   ==========================================================================
   The .cosplay-pro-body prefix (added to <body> via body_class) gives us
   the specificity we need to beat the plugins' hardcoded light-mode styles.
   ========================================================================== */

/* ══════════════════════════════════════════════════════════════════════════
   13b.  Bundle Purchase  (add-to-cart plugin)
   NOTE: The plugin's bundle-purchase.css now uses CSS variables with
   .cosplay-pro-body overrides, so only LAYOUT and VISUAL EFFECT
   overrides are needed here. Color theming is handled by the plugin.
   ══════════════════════════════════════════════════════════════════════════ */

/* --- Container — flush with page, no "card" box --- */
.cosplay-pro-body .bundle-purchase-container {
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: var(--space-xl) 0 !important;
	max-width: none !important;
	overflow: visible !important;
}

/* Remove the top decorative bar */
.cosplay-pro-body .bundle-purchase-container::before {
	display: none !important;
}

/* Section divider — subtle top border instead of card wrapper */
.cosplay-pro-body .bundle-purchase-header {
	border-bottom: 1px solid var(--color-border) !important;
	padding-bottom: var(--space-md) !important;
	margin-bottom: var(--space-lg) !important;
}

.cosplay-pro-body .bundle-purchase-header::after {
	background: linear-gradient(90deg, var(--color-primary), transparent) !important;
	height: 2px !important;
	border-radius: 0 !important;
}

/* --- Product Cards — cosplay proportions & spotlight effects --- */
.cosplay-pro-body .bundle-product-content {
	padding: 14px !important;
	transition: all 0.45s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.cosplay-pro-body .bundle-product-content:hover {
	box-shadow:
		0 10px 30px rgba(155, 89, 182, 0.25),
		0 0 0 1px rgba(155, 89, 182, 0.12) !important;
	transform: translateY(-3px) !important;
}

/* Bundle product image — taller to show full costume */
.cosplay-pro-body .bundle-product-image {
	min-height: 130px !important;
	overflow: hidden !important;
	position: relative !important;
}

/* Spotlight glow overlay */
.cosplay-pro-body .bundle-product-image::after {
	content: '' !important;
	position: absolute !important;
	inset: 0 !important;
	background: linear-gradient(
		180deg,
		transparent 40%,
		rgba(155, 89, 182, 0.08) 70%,
		rgba(155, 89, 182, 0.2) 100%
	) !important;
	opacity: 0 !important;
	transition: opacity 0.45s ease !important;
	pointer-events: none !important;
	z-index: 1 !important;
}

.cosplay-pro-body .bundle-product-content:hover .bundle-product-image::after {
	opacity: 1 !important;
}

.cosplay-pro-body .bundle-product-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),
	            filter 0.6s ease !important;
	filter: brightness(0.92) !important;
}

.cosplay-pro-body .bundle-product-content:hover .bundle-product-image img {
	transform: scale(1.06) !important;
	filter: brightness(1.05) !important;
}

/* Product title text — cosplay proportions */
.cosplay-pro-body .bundle-product-title {
	font-size: 13px !important;
	line-height: 1.35 !important;
}

.cosplay-pro-body .bundle-product-price del {
	font-size: 12px !important;
}

/* Plus connector — theme accent */
.cosplay-pro-body .bundle-product-plus {
	box-shadow: 0 2px 8px rgba(155, 89, 182, 0.4) !important;
	border-color: var(--color-bg) !important;
}

/* --- Layout Overrides --- */
.cosplay-pro-body .layout-vertical .bundle-purchase-actions {
	background: transparent !important;
}

.cosplay-pro-body .layout-vertical .bundle-purchase-products {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

/* --- Messages & Warnings (specific dark-theme colors) --- */
.cosplay-pro-body .bundle-message-success {
	background: rgba(46, 204, 113, 0.12) !important;
	color: var(--color-success) !important;
	border-color: rgba(46, 204, 113, 0.3) !important;
}

.cosplay-pro-body .bundle-message-error {
	background: rgba(231, 76, 60, 0.12) !important;
	color: var(--color-error) !important;
	border-color: rgba(231, 76, 60, 0.3) !important;
}

.cosplay-pro-body .bundle-message-warning,
.cosplay-pro-body .bundle-moq-warning {
	background: rgba(243, 156, 18, 0.12) !important;
	color: var(--color-warning) !important;
	border-color: rgba(243, 156, 18, 0.3) !important;
}

.cosplay-pro-body .bundle-quantity-error {
	background: rgba(231, 76, 60, 0.15) !important;
	color: var(--color-error) !important;
}

/* --- Desktop Modal — enhanced shadow/glass effect --- */
.cosplay-pro-body .bundle-modal-content,
.cosplay-pro-body #bundleModal .bundle-modal-content {
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6) !important;
}

.cosplay-pro-body .bundle-modal-close:hover {
	background: var(--color-primary) !important;
	border-color: var(--color-primary) !important;
	color: #fff !important;
}

.cosplay-pro-body .bundle-modal-add-btn {
	border-radius: var(--radius-md) !important;
}

.cosplay-pro-body .bundle-modal-add-btn:hover {
	background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary)) !important;
}

/* --- Mobile Modal — cosplay image proportions --- */
.cosplay-pro-body .bundle-modal-product-image img {
	object-fit: cover !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   13b-2.  Smart Recommendations  (add-to-cart plugin)
   ══════════════════════════════════════════════════════════════════════════ */

/* --- Container — flush with page, no "card" box --- */
.cosplay-pro-body .smart-recommendations-container {
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	color: var(--color-text) !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: var(--space-xl) 0 !important;
	max-width: none !important;
	overflow: visible !important;
}

/* Remove the top decorative bar */
.cosplay-pro-body .smart-recommendations-container::before {
	display: none !important;
}

/* Remove inner content padding */
.cosplay-pro-body .smart-recommendations-content {
	padding: 0 !important;
}

.cosplay-pro-body .smart-recommendations-header {
	background: transparent !important;
	border-bottom: 1px solid var(--color-border) !important;
	padding: 0 0 var(--space-md) 0 !important;
	margin-bottom: var(--space-lg) !important;
}

/* Nav buttons — cosplay themed */
.cosplay-pro-body .smart-rec-nav-btn {
	background: var(--color-surface) !important;
	border: 2px solid var(--color-border) !important;
	color: var(--color-text) !important;
}

.cosplay-pro-body .smart-rec-nav-btn:hover {
	background: var(--color-primary) !important;
	border-color: var(--color-primary) !important;
	color: #fff !important;
	box-shadow: 0 4px 16px rgba(155, 89, 182, 0.4) !important;
}

/* Large left/right arrows — match dark theme */
.cosplay-pro-body .smart-rec-nav-arrow {
	background: var(--color-surface) !important;
	border: 1px solid var(--color-border) !important;
	color: var(--color-text) !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
	backdrop-filter: blur(8px) !important;
}

.cosplay-pro-body .smart-rec-nav-arrow:hover {
	background: var(--color-primary) !important;
	border-color: var(--color-primary) !important;
	color: #fff !important;
	box-shadow: 0 6px 24px rgba(155, 89, 182, 0.45) !important;
}

.cosplay-pro-body .smart-rec-nav-arrow:disabled {
	background: var(--color-bg-alt) !important;
	color: var(--color-text-muted) !important;
	border-color: var(--color-border) !important;
	box-shadow: none !important;
}

/* ══════════════════════════════════════════════════════════════════════
   COSPLAY-STYLE PRODUCT CARDS
   Cosplay is about transformation, stage presence, and spotlight.
   The hover effect should feel like a costume stepping onto the stage.
   ══════════════════════════════════════════════════════════════════════ */

.cosplay-pro-body .smart-recommendation-item {
	flex: 0 0 200px !important;
	min-width: 200px !important;
	background: var(--color-surface) !important;
	border: 1px solid var(--color-border) !important;
	border-radius: var(--radius-md) !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
	transition: all 0.45s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* Hover — spotlight stage effect */
.cosplay-pro-body .smart-recommendation-item:hover {
	border-color: var(--color-primary) !important;
	box-shadow:
		0 12px 36px rgba(155, 89, 182, 0.3),
		0 0 0 1px rgba(155, 89, 182, 0.15),
		inset 0 0 20px rgba(155, 89, 182, 0.03) !important;
	transform: translateY(-6px) !important;
}

/* Image — taller portrait ratio for cosplay costumes */
.cosplay-pro-body .smart-rec-item-image {
	background: var(--color-bg-alt) !important;
	height: 240px !important;
	padding: 0 !important;
	border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
	overflow: hidden !important;
	position: relative !important;
	transition: height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* When hover-expanded (plugin uses position:fixed for the floating card),
   use a generous image height to showcase cosplay costumes.
   The 260px height is set in the plugin's own CSS; here we just ensure
   no conflicting theme rules override it. */
.cosplay-pro-body .smart-recommendation-item:hover .smart-rec-item-image {
	height: 260px !important;
	padding: 0 !important;
}

/* Spotlight overlay — purple gradient glow on hover */
.cosplay-pro-body .smart-rec-item-image::after {
	content: '' !important;
	position: absolute !important;
	inset: 0 !important;
	background: linear-gradient(
		180deg,
		transparent 40%,
		rgba(155, 89, 182, 0.08) 70%,
		rgba(155, 89, 182, 0.25) 100%
	) !important;
	opacity: 0 !important;
	transition: opacity 0.5s ease !important;
	pointer-events: none !important;
	z-index: 1 !important;
	border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
}

.cosplay-pro-body .smart-recommendation-item:hover .smart-rec-item-image::after {
	opacity: 1 !important;
}

.cosplay-pro-body .smart-rec-item-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	object-position: center center !important;
	border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
	transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),
	            filter 0.6s ease !important;
	filter: brightness(0.92) !important;
}

/* Hover — costume "steps onto stage": brighten + subtle zoom */
.cosplay-pro-body .smart-recommendation-item:hover .smart-rec-item-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	object-position: center center !important;
	transform: scale(1.05) !important;
	filter: brightness(1.05) !important;
}

/* Content area */
.cosplay-pro-body .smart-rec-item-content {
	background: var(--color-surface) !important;
	min-height: auto !important;
}

.cosplay-pro-body .smart-rec-item-info {
	background: transparent !important;
	padding: 12px 14px !important;
}

/* ── Hover Expanded Card — Cosplay Enhancements ──────────────────────
   The floating detail card on desktop hover. Wider (280px) with
   generous image height (260px) for cosplay costume showcase.  */

/* Expanded card — enhanced shadow glow */
.cosplay-pro-body .smart-recommendations-container.has-hover .smart-recommendation-item:hover .smart-rec-item-content {
	background: var(--color-surface) !important;
	border: 1px solid var(--color-primary) !important;
	box-shadow:
		0 20px 60px rgba(0, 0, 0, 0.5),
		0 0 0 1px rgba(155, 89, 182, 0.2),
		0 0 40px rgba(155, 89, 182, 0.1) !important;
}

/* Expanded card image — spotlight effect */
.cosplay-pro-body .smart-recommendations-container.has-hover .smart-recommendation-item:hover .smart-rec-item-image::after {
	content: '' !important;
	position: absolute !important;
	inset: 0 !important;
	background: linear-gradient(
		180deg,
		transparent 50%,
		rgba(155, 89, 182, 0.06) 75%,
		rgba(155, 89, 182, 0.15) 100%
	) !important;
	opacity: 1 !important;
	pointer-events: none !important;
	z-index: 1 !important;
	border-radius: 12px 12px 0 0 !important;
}

/* ── Hover & Color Overrides ──────────────────────────────────────────
   Most color overrides are now handled by CSS variables injected into
   the plugin's own CSS (see .cosplay-pro-body block in smart-recommendations.css).
   Below we keep only proportional / layout tweaks specific to cosplay.  */

/* Title — compact for card layout */
.cosplay-pro-body .smart-rec-item-title {
	font-size: 13px !important;
	line-height: 1.35 !important;
}

/* Price — slightly smaller on cards */
.cosplay-pro-body .smart-rec-item-price {
	font-size: 16px !important;
}

/* Quick View — cosplay-specific enhancements only.
   Colors are handled by CSS variables in the plugin CSS. */
.cosplay-pro-body .smart-rec-qv-close:hover {
	background: var(--color-primary) !important;
	color: #fff !important;
}

.cosplay-pro-body .smart-rec-qv-images {
	min-height: 400px !important;
}

.cosplay-pro-body .smart-rec-spinner {
	border-color: var(--color-border) !important;
	border-top-color: var(--color-primary) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   13c.  Cart Sidebar / Drawer  (add-to-cart plugin)
   ══════════════════════════════════════════════════════════════════════════ */

.cosplay-pro-body .cart-sidebar {
	background: var(--color-bg) !important;
	box-shadow: -4px 0 30px rgba(0, 0, 0, 0.5) !important;
}

.cosplay-pro-body .cart-sidebar-header {
	background: var(--color-surface) !important;
	border-bottom: 1px solid var(--color-border) !important;
}

.cosplay-pro-body .cart-sidebar-title {
	color: var(--color-text-heading) !important;
}

.cosplay-pro-body .item-count {
	color: var(--color-text-muted) !important;
}

.cosplay-pro-body .cart-sidebar-close {
	color: var(--color-text-muted) !important;
}

.cosplay-pro-body .cart-sidebar-close:hover {
	color: var(--color-text) !important;
}

.cosplay-pro-body .mini-cart-item {
	background: var(--color-surface) !important;
	border-bottom: 1px solid var(--color-border) !important;
}

.cosplay-pro-body .mini-cart-title,
.cosplay-pro-body .mini-cart-title a {
	color: var(--color-text) !important;
}

.cosplay-pro-body .mini-cart-image img {
	background: var(--color-bg-alt) !important;
	border: 1px solid var(--color-border) !important;
	border-radius: var(--radius-sm) !important;
	object-fit: cover !important;
}

.cosplay-pro-body .mini-cart-total-price,
.cosplay-pro-body .mini-cart-final-price {
	color: var(--color-primary-light) !important;
}

.cosplay-pro-body .mini-cart-original-price {
	color: var(--color-text-muted) !important;
}

.cosplay-pro-body .mini-cart-save-info {
	color: var(--color-success) !important;
}

.cosplay-pro-body .mini-cart-bulk-hint {
	background: rgba(243, 156, 18, 0.1) !important;
	color: var(--color-accent) !important;
}

.cosplay-pro-body .mini-cart-remove {
	color: var(--color-text-muted) !important;
}

.cosplay-pro-body .mini-cart-remove:hover {
	color: var(--color-error) !important;
}

.cosplay-pro-body .mini-cart-quantity .quantity .qty {
	background: var(--color-surface) !important;
	border: 1px solid var(--color-border) !important;
	color: var(--color-text) !important;
}

.cosplay-pro-body .mini-cart-quantity .quantity .plus,
.cosplay-pro-body .mini-cart-quantity .quantity .minus {
	background: var(--color-surface) !important;
	border: 1px solid var(--color-border) !important;
	color: var(--color-text) !important;
}

.cosplay-pro-body .mini-cart-quantity .quantity .plus:hover,
.cosplay-pro-body .mini-cart-quantity .quantity .minus:hover {
	background: var(--color-primary) !important;
	border-color: var(--color-primary) !important;
	color: #fff !important;
}

.cosplay-pro-body .cart-sidebar-moq-warning,
.cosplay-pro-body .moq-warning {
	background: rgba(243, 156, 18, 0.12) !important;
	border-color: rgba(243, 156, 18, 0.3) !important;
	color: var(--color-warning) !important;
}

.cosplay-pro-body .shipping-progress {
	background: var(--color-surface) !important;
	border-bottom: 1px solid var(--color-border) !important;
	color: var(--color-text) !important;
}

.cosplay-pro-body .shipping-info {
	color: var(--color-text-muted) !important;
}

.cosplay-pro-body .progress-bar {
	background: var(--color-border) !important;
}

.cosplay-pro-body .progress-fill {
	background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light)) !important;
}

.cosplay-pro-body .cart-sidebar-footer {
	background: var(--color-surface) !important;
	border-top: 1px solid var(--color-border) !important;
}

.cosplay-pro-body .cart-sidebar-footer .subtotal-row {
	border-top: 1px solid var(--color-border) !important;
}

.cosplay-pro-body .cart-sidebar-footer .subtotal-label {
	color: var(--color-text) !important;
}

.cosplay-pro-body .cart-sidebar-footer .amount,
.cosplay-pro-body .subtotal-row .amount ins,
.cosplay-pro-body .subtotal-row .amount > .amount {
	color: var(--color-primary-light) !important;
}

.cosplay-pro-body .subtotal-row .amount del {
	color: var(--color-text-muted) !important;
}

.cosplay-pro-body .cart-sidebar-footer .checkout-button {
	background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)) !important;
	border-radius: var(--radius-md) !important;
	border: none !important;
}

.cosplay-pro-body .cart-sidebar-footer .checkout-button:hover {
	background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary)) !important;
	box-shadow: 0 4px 16px rgba(155, 89, 182, 0.35) !important;
}

.cosplay-pro-body .cart-sidebar-footer .checkout-button.disabled {
	background: var(--color-border) !important;
	opacity: 0.5 !important;
}

.cosplay-pro-body .cart-recommendations-column {
	background: var(--color-surface) !important;
	border-left: 1px solid var(--color-border) !important;
}

.cosplay-pro-body .recommendations-header {
	background: var(--color-surface) !important;
	border-bottom: 1px solid var(--color-border) !important;
}

.cosplay-pro-body .recommendation-title,
.cosplay-pro-body .cart-recommendations-column .rec-product-title {
	color: var(--color-text) !important;
}

.cosplay-pro-body .recommendation-price,
.cosplay-pro-body .cart-recommendations-column .rec-product-price {
	color: var(--color-primary-light) !important;
}

.cosplay-pro-body .cart-recommendations-column .rec-product {
	background: var(--color-bg-alt) !important;
	border: 1px solid var(--color-border) !important;
}

.cosplay-pro-body .cart-recommendations-column .rec-product-image {
	background: var(--color-surface) !important;
}

.cosplay-pro-body .cart-recommendations-column .rec-product-variant select {
	background: var(--color-surface) !important;
	border: 1px solid var(--color-border) !important;
	color: var(--color-text) !important;
}

.cosplay-pro-body .cart-recommendations-column .rec-add-to-cart,
.cosplay-pro-body .cart-sidebar .add-to-cart-button,
.cosplay-pro-body .cart-sidebar .select-options-button {
	background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)) !important;
	border: none !important;
}

.cosplay-pro-body .cart-recommendations-column .rec-add-to-cart:hover,
.cosplay-pro-body .cart-sidebar .add-to-cart-button:hover,
.cosplay-pro-body .cart-sidebar .select-options-button:hover {
	background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary)) !important;
}

.cosplay-pro-body .cart-discount-table-wrapper {
	background: var(--color-surface) !important;
	border-top: 1px solid var(--color-border) !important;
}

.cosplay-pro-body .cart-discount-table-wrapper h3 {
	color: var(--color-text-heading) !important;
}

.cosplay-pro-body .discount-rule {
	background: var(--color-bg-alt) !important;
	border: 1px solid var(--color-border) !important;
}

.cosplay-pro-body .discount-rule.active {
	background: rgba(155, 89, 182, 0.08) !important;
	border-color: var(--color-primary) !important;
}

.cosplay-pro-body .cart-discount-table th {
	background: var(--color-surface) !important;
	color: var(--color-text-heading) !important;
	border-bottom-color: var(--color-border) !important;
}

.cosplay-pro-body .cart-discount-table td {
	color: var(--color-text) !important;
	border-bottom-color: var(--color-border) !important;
}

.cosplay-pro-body .cart-sidebar-content .empty-cart-message {
	color: var(--color-text-muted) !important;
}

/* New Recommendations Sidebar */
.cosplay-pro-body .new-recommendations-sidebar {
	background: var(--color-bg) !important;
}

.cosplay-pro-body .new-recommendations-toggle {
	background: var(--color-surface) !important;
	border: 1px solid var(--color-border) !important;
}

.cosplay-pro-body .new-recommendations-sidebar .recommendation-product {
	border-bottom: 1px solid var(--color-border) !important;
}

.cosplay-pro-body .new-recommendations-sidebar .recommendation-add {
	background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)) !important;
}

/* Variation Buttons & Discount Table (frontend.css) */
.cosplay-pro-body .variation-button {
	background: var(--color-surface) !important;
	border: 1px solid var(--color-border) !important;
	color: var(--color-text) !important;
}

.cosplay-pro-body .variation-button:hover {
	border-color: var(--color-primary) !important;
	background: rgba(155, 89, 182, 0.08) !important;
}

.cosplay-pro-body .variation-button.selected {
	background: rgba(155, 89, 182, 0.12) !important;
	border-color: var(--color-primary) !important;
	color: var(--color-primary-light) !important;
}

.cosplay-pro-body .variation-button.disabled {
	background: var(--color-bg-alt) !important;
	color: var(--color-text-muted) !important;
	opacity: 0.5 !important;
}

.cosplay-pro-body .variation-name {
	color: var(--color-text-muted) !important;
}

.cosplay-pro-body .variation-notice {
	background: rgba(243, 156, 18, 0.12) !important;
	color: var(--color-accent) !important;
}

.cosplay-pro-body .bulk-discount-summary {
	background: var(--color-surface) !important;
	color: var(--color-text) !important;
}

.cosplay-pro-body .total-price {
	color: var(--color-primary-light) !important;
}

.cosplay-pro-body .bulk-discount-badge {
	background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   13d.  size-va Plugin — Size Chart, Custom Size Form, Date Picker
   ══════════════════════════════════════════════════════════════════════════ */

/* Size Chart Button */
.cosplay-pro-body .size-va-chart-button-container .size-va-chart-button {
	background: var(--color-surface) !important;
	border: 1px solid var(--color-border) !important;
	color: var(--color-primary-light) !important;
}

.cosplay-pro-body .size-va-chart-button-container .size-va-chart-button:hover {
	background: var(--color-surface-hover) !important;
	border-color: var(--color-primary) !important;
}

/* Size Chart Popup */
.cosplay-pro-body .size-va-popup-overlay {
	background-color: rgba(0, 0, 0, 0.75) !important;
}

.cosplay-pro-body .size-va-popup {
	background: var(--color-bg) !important;
	color: var(--color-text) !important;
	border: 1px solid var(--color-border) !important;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6) !important;
}

.cosplay-pro-body .size-va-popup-header {
	background: var(--color-surface) !important;
	border-bottom: 1px solid var(--color-border) !important;
}

.cosplay-pro-body .size-va-popup-header h2 {
	color: var(--color-text-heading) !important;
}

.cosplay-pro-body .size-va-popup-close {
	background: var(--color-bg-alt) !important;
	color: var(--color-text-muted) !important;
}

.cosplay-pro-body .size-va-popup-close:hover {
	background: var(--color-primary) !important;
	color: #fff !important;
}

.cosplay-pro-body .size-va-popup-content {
	background: var(--color-bg) !important;
}

.cosplay-pro-body .size-va-popup-footer {
	border-top: 1px solid var(--color-border) !important;
}

/* Size Chart Tables */
.cosplay-pro-body .size-va-table th,
.cosplay-pro-body .size-va-table td,
.cosplay-pro-body .size-va-chart-table th,
.cosplay-pro-body .size-va-chart-table td {
	border-color: var(--color-border) !important;
}

.cosplay-pro-body .size-va-table th,
.cosplay-pro-body .size-va-chart-table th {
	background: var(--color-surface) !important;
	color: var(--color-text-heading) !important;
}

.cosplay-pro-body .size-va-table td,
.cosplay-pro-body .size-va-chart-table td {
	background: var(--color-bg-alt) !important;
	color: var(--color-text) !important;
}

.cosplay-pro-body .size-va-table td:first-child {
	background: var(--color-surface) !important;
}

.cosplay-pro-body .size-va-table tr:hover td,
.cosplay-pro-body .size-va-chart-table tr:hover td {
	background: rgba(155, 89, 182, 0.08) !important;
}

.cosplay-pro-body .size-va-highlight {
	background: rgba(155, 89, 182, 0.2) !important;
	color: var(--color-text-heading) !important;
}

/* Highlight row — also override td backgrounds */
.cosplay-pro-body .size-va-highlight td,
.cosplay-pro-body tr.size-va-highlight td,
.cosplay-pro-body td.size-va-highlight {
	background: rgba(155, 89, 182, 0.18) !important;
	color: var(--color-text-heading) !important;
}

.cosplay-pro-body .size-va-info-table th,
.cosplay-pro-body .size-va-info-table td {
	border-color: var(--color-border) !important;
}

.cosplay-pro-body .size-va-info-table th {
	background: var(--color-surface) !important;
	color: var(--color-text-heading) !important;
}

.cosplay-pro-body .size-va-info-table td {
	background: var(--color-bg-alt) !important;
	color: var(--color-text) !important;
}

/* Shoes chart */
.cosplay-pro-body .size-va-shoes-chart .size-va-chart-table th {
	background: var(--color-surface) !important;
	color: var(--color-text-heading) !important;
}

.cosplay-pro-body .size-va-shoes-chart .size-va-chart-table td:first-child {
	background: var(--color-surface) !important;
}

.cosplay-pro-body .size-va-shoes-chart .size-va-row:hover td {
	background: rgba(155, 89, 182, 0.08) !important;
}

.cosplay-pro-body .size-va-shoes-chart .size-va-table-wrapper {
	background: var(--color-bg-alt) !important;
}

.cosplay-pro-body .size-va-shoes-chart .size-va-chart-notes {
	background: var(--color-surface) !important;
	border-radius: var(--radius-sm) !important;
}

.cosplay-pro-body .size-va-shoes-chart .size-va-chart-notes strong {
	color: var(--color-text-heading) !important;
}

.cosplay-pro-body .size-va-shoes-chart .size-va-notes-content {
	color: var(--color-text-muted) !important;
}

.cosplay-pro-body .size-va-shoes-chart .size-va-cell:hover {
	background: rgba(155, 89, 182, 0.15) !important;
}

/* Sections */
.cosplay-pro-body .size-va-section-title {
	color: var(--color-text-heading) !important;
	border-bottom-color: var(--color-border) !important;
}

.cosplay-pro-body .size-va-section-notes,
.cosplay-pro-body .size-va-chart-notes,
.cosplay-pro-body .size-va-chart-description {
	color: var(--color-text-muted) !important;
}

.cosplay-pro-body .size-va-chart-notes {
	border-top-color: var(--color-border) !important;
	background: var(--color-surface) !important;
	border-radius: var(--radius-sm) !important;
}

/* Chart title */
.cosplay-pro-body .size-va-chart-title {
	color: var(--color-text-heading) !important;
}

/* Unit Switch (in popup header area) */
.cosplay-pro-body .size-va-unit-switch {
	color: var(--color-text) !important;
}

.cosplay-pro-body .size-va-unit-switch label {
	color: var(--color-text) !important;
}

/* Style radio buttons in dark theme */
.cosplay-pro-body .size-va-unit-switch input[type="radio"],
.cosplay-pro-body .size-va-unit-switch-inline input[type="radio"],
.cosplay-pro-body .size-va-custom-unit-toggle input[type="radio"] {
	accent-color: var(--color-primary) !important;
}

/* Table wrapper */
.cosplay-pro-body .size-va-table-wrapper {
	background: transparent !important;
	box-shadow: none !important;
}

/* Custom unit toggle in custom size form */
.cosplay-pro-body .size-va-custom-unit-toggle label {
	color: var(--color-text-muted) !important;
}

/* Variation Size Info */
.cosplay-pro-body .size-va-variation-info {
	background: var(--color-surface) !important;
	border: 1px solid var(--color-border) !important;
	color: var(--color-text) !important;
}

.cosplay-pro-body .size-va-variation-info h4 {
	color: var(--color-text-heading) !important;
	border-bottom-color: var(--color-border) !important;
}

.cosplay-pro-body .size-va-variation-info li {
	border-bottom-color: var(--color-border) !important;
}

.cosplay-pro-body .size-va-info-label {
	color: var(--color-text-muted) !important;
}

.cosplay-pro-body .size-va-info-value {
	color: var(--color-text) !important;
}

.cosplay-pro-body .size-va-size-info {
	color: var(--color-text) !important;
}

.cosplay-pro-body .size-va-view-full-chart {
	color: var(--color-primary-light) !important;
}

.cosplay-pro-body .size-va-view-full-chart:hover {
	background: rgba(155, 89, 182, 0.08) !important;
	color: var(--color-primary) !important;
}

/* Size Guide Link */
.cosplay-pro-body .size-va-view-guide-link {
	color: var(--color-primary-light) !important;
}

.cosplay-pro-body .size-va-view-guide-link:hover {
	color: var(--color-primary) !important;
}

/* Custom Size Form */
.cosplay-pro-body .size-va-custom-size-form {
	background: var(--color-surface) !important;
	border: 1px solid var(--color-border) !important;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3) !important;
}

.cosplay-pro-body .size-va-custom-size-form h4 {
	color: var(--color-text-heading) !important;
	border-bottom-color: var(--color-border) !important;
}

.cosplay-pro-body .size-va-field-group label {
	color: var(--color-text) !important;
}

.cosplay-pro-body .size-va-field-group label .unit-text,
.cosplay-pro-body .size-va-field-group label .weight-unit-text {
	color: var(--color-text-muted) !important;
}

.cosplay-pro-body .size-va-custom-input {
	background: var(--color-bg-alt) !important;
	border: 1px solid var(--color-border) !important;
	color: var(--color-text) !important;
}

.cosplay-pro-body .size-va-custom-input:focus {
	border-color: var(--color-primary) !important;
	box-shadow: 0 0 0 2px rgba(155, 89, 182, 0.2) !important;
	background: var(--color-surface) !important;
}

.cosplay-pro-body .size-va-error {
	background: rgba(231, 76, 60, 0.08) !important;
	border-color: var(--color-error) !important;
}

.cosplay-pro-body .size-va-measure-guide {
	color: var(--color-primary-light) !important;
}

/* Unit Switch */
.cosplay-pro-body .size-va-unit-switch-inline {
	background: var(--color-surface) !important;
	border: 1px solid var(--color-border) !important;
}

.cosplay-pro-body .size-va-unit-switch-inline label {
	color: var(--color-text-muted) !important;
}

/* Use Date */
.cosplay-pro-body .size-va-use-date-field {
	background: var(--color-surface) !important;
	border: 1px solid var(--color-border) !important;
}

.cosplay-pro-body .size-va-use-date-field label {
	color: var(--color-text) !important;
}

.cosplay-pro-body .size-va-use-date-field input[type="date"],
.cosplay-pro-body .size-va-use-date-input,
.cosplay-pro-body .size-va-date-input-wrapper input {
	background: var(--color-bg-alt) !important;
	border: 1px solid var(--color-border) !important;
	color: var(--color-text) !important;
}

.cosplay-pro-body .size-va-use-date-field-wrapper {
	color: var(--color-text) !important;
}

/* Special Instruction */
.cosplay-pro-body .size-va-special-instruction-field label {
	color: var(--color-text) !important;
}

.cosplay-pro-body .size-va-special-instruction-field textarea {
	background: var(--color-bg-alt) !important;
	border: 1px solid var(--color-border) !important;
	color: var(--color-text) !important;
}

.cosplay-pro-body .size-va-special-instruction-field textarea:focus {
	border-color: var(--color-primary) !important;
	box-shadow: 0 0 0 2px rgba(155, 89, 182, 0.2) !important;
}

/* Tooltip */
.cosplay-pro-body .size-va-tooltip {
	background: var(--color-surface) !important;
	color: var(--color-text-muted) !important;
}

/* Inline Edit Form (Cart/Checkout) */
.cosplay-pro-body .size-va-inline-edit-form {
	background: var(--color-surface) !important;
	border: 1px solid var(--color-border) !important;
}

.cosplay-pro-body .size-va-edit-form-header {
	background: var(--color-bg-alt) !important;
	border-bottom: 1px solid var(--color-border) !important;
}

.cosplay-pro-body .size-va-edit-form-header-title {
	color: var(--color-text-heading) !important;
}

.cosplay-pro-body .size-va-edit-form-header-subtitle {
	color: var(--color-text-muted) !important;
}

.cosplay-pro-body .size-va-edit-field-row label {
	color: var(--color-text) !important;
}

.cosplay-pro-body .size-va-edit-unit {
	color: var(--color-text-muted) !important;
}

.cosplay-pro-body .size-va-edit-input {
	background: var(--color-bg-alt) !important;
	border: 1px solid var(--color-border) !important;
	color: var(--color-text) !important;
}

.cosplay-pro-body .size-va-edit-input:focus {
	background: var(--color-surface) !important;
	border-color: var(--color-primary) !important;
}

.cosplay-pro-body .size-va-edit-unit-toggle {
	border-top: 1px solid var(--color-border) !important;
}

.cosplay-pro-body .size-va-edit-unit-toggle label {
	color: var(--color-text-muted) !important;
}

.cosplay-pro-body .size-va-edit-actions {
	border-top: 1px solid var(--color-border) !important;
}

.cosplay-pro-body .size-va-edit-cancel {
	background: var(--color-surface) !important;
	color: var(--color-text-muted) !important;
	border: 1px solid var(--color-border) !important;
}

.cosplay-pro-body .size-va-edit-cancel:hover {
	background: var(--color-surface-hover) !important;
	color: var(--color-text) !important;
}

.cosplay-pro-body .size-va-edit-hint {
	color: var(--color-text-muted) !important;
}

/* Edit trigger button — match purple theme */
.cosplay-pro-body .size-va-edit-trigger {
	background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)) !important;
	box-shadow: 0 2px 6px rgba(155, 89, 182, 0.35) !important;
}

.cosplay-pro-body .size-va-edit-trigger:hover {
	background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary)) !important;
	box-shadow: 0 3px 10px rgba(155, 89, 182, 0.5) !important;
}

/* Edit save button */
.cosplay-pro-body .size-va-edit-save {
	background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)) !important;
	box-shadow: 0 2px 6px rgba(155, 89, 182, 0.3) !important;
}

.cosplay-pro-body .size-va-edit-save:hover {
	background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary)) !important;
	box-shadow: 0 3px 10px rgba(155, 89, 182, 0.4) !important;
}

/* Pulse animation — purple */
.cosplay-pro-body .size-va-edit-trigger.size-va-pulse {
	animation: cosplayProPulse 2s ease-in-out 3 !important;
}

@keyframes cosplayProPulse {
	0%   { box-shadow: 0 2px 6px rgba(155, 89, 182, 0.35); }
	50%  { box-shadow: 0 2px 14px rgba(155, 89, 182, 0.65); }
	100% { box-shadow: 0 2px 6px rgba(155, 89, 182, 0.35); }
}

/* Edit form body */
.cosplay-pro-body .size-va-edit-form-body {
	background: var(--color-bg) !important;
}

/* Special instruction textarea in form */
.cosplay-pro-body .size-va-edit-instruction {
	background: var(--color-bg-alt) !important;
	border: 1px solid var(--color-border) !important;
	color: var(--color-text) !important;
}

/* Date input in popup - dark theme calendar icon */
.cosplay-pro-body .size-va-use-date-field input[type="date"]::-webkit-calendar-picker-indicator {
	filter: invert(1) !important;
}

/* Mobile popup close button */
@media screen and (max-width: 600px) {
	.cosplay-pro-body .size-va-popup-close {
		background: var(--color-bg-alt) !important;
		color: var(--color-text-muted) !important;
	}
}

/* --------------------------------------------------------------------------
   14. Responsive
   -------------------------------------------------------------------------- */

/* --- Single Product Mobile --- */
@media (max-width: 1023px) {
	.cosplay-product__gallery {
		border-radius: 0;
	}

	/* On mobile: horizontal swipe gallery */
	.cosplay-product__gallery .woocommerce-product-gallery .flex-viewport,
	.cosplay-product__gallery .woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
		flex-direction: row;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
	}

	.cosplay-product__gallery .woocommerce-product-gallery__image {
		flex: 0 0 100%;
		scroll-snap-align: start;
	}

	.cosplay-product__gallery .flex-control-thumbs {
		padding: var(--space-sm) var(--space-md);
	}

	.cosplay-product__gallery .flex-control-thumbs li {
		flex: 0 0 56px;
		height: 70px;
	}

	.cosplay-product form.cart .single_add_to_cart_button {
		width: 100%;
		min-width: unset;
	}

	.cosplay-product__details,
	.cosplay-product__extra-sections {
		padding-inline: var(--container-pad);
	}
}

/* --- Product Grid Mobile --- */
@media (max-width: 768px) {
	.woocommerce ul.products {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: var(--space-md);
	}

	.woocommerce ul.products li.product .woocommerce-loop-product__title {
		font-size: var(--fs-sm);
		padding: var(--space-sm) var(--space-md) var(--space-xs);
	}

	.woocommerce ul.products li.product .price {
		padding: 0 var(--space-md);
		font-size: var(--fs-sm);
	}

	.woocommerce ul.products li.product .button {
		margin: var(--space-sm) var(--space-md) var(--space-md);
		padding: 0.5rem var(--space-md);
		font-size: var(--fs-xs);
	}

	.woocommerce div.product .woocommerce-tabs ul.tabs {
		flex-direction: column;
	}

	.woocommerce div.product .woocommerce-tabs ul.tabs li {
		flex: none;
	}

	.woocommerce div.product .woocommerce-tabs ul.tabs li a {
		justify-content: flex-start;
		padding: var(--space-md) var(--space-lg);
		font-size: var(--fs-xs);
		border-bottom: none;
		border-left: 3px solid transparent;
		margin-bottom: 0;
	}

	.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
		border-bottom-color: transparent;
		border-left-color: var(--color-primary);
	}

	.woocommerce div.product .woocommerce-tabs .panel {
		padding: var(--space-lg);
	}

	.cosplay-trust-badges {
		flex-direction: column;
		gap: var(--space-sm);
	}
}

/* --- Plugin Product Cards — Tablet --- */
@media (max-width: 768px) {
	.cosplay-pro-body .smart-recommendation-item {
		flex: 0 0 170px !important;
		min-width: 170px !important;
	}

	.cosplay-pro-body .smart-rec-item-image {
		height: 200px !important;
	}

	.cosplay-pro-body .smart-rec-item-info {
		padding: 10px 12px !important;
	}

	.cosplay-pro-body .smart-rec-item-title {
		font-size: 12px !important;
	}

	.cosplay-pro-body .bundle-product-image {
		height: 120px !important;
	}
}

@media (max-width: 480px) {
	.woocommerce ul.products {
		grid-template-columns: 1fr !important;
	}

	.cosplay-product .product_title {
		font-size: var(--fs-xl);
	}

	.cosplay-product p.price,
	.cosplay-product span.price {
		font-size: var(--fs-xl) !important;
	}

	/* Plugin cards on small phones */
	.cosplay-pro-body .smart-recommendation-item {
		flex: 0 0 155px !important;
		min-width: 155px !important;
	}

	.cosplay-pro-body .smart-rec-item-image {
		height: 180px !important;
	}
}