/* ==========================================================================
   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 legacy clearfix pseudo-elements become grid items and
   can occupy the first slot (causing a blank "first card"). */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
	content: none !important;
	display: none !important;
}

.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;
	display: flex;
	flex-direction: column;
	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.woocommerce-LoopProduct-link {
	flex: 0 0 auto;
}

.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;
	line-height: 1.35;
	display: -webkit-box;
	line-clamp: 2;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(1.35em * 2);
}

/* 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: 0;
	min-height: 1.4em;
}

.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) 0;
}

/* 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);
	line-height: 1.2;
	min-height: 44px;
	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);
}

/* --------------------------------------------------------------------------
   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);
}

.cp-cart-progress {
	margin-bottom: var(--space-lg);
	padding: var(--space-md) var(--space-lg);
	background: rgba(155, 89, 182, 0.08);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
}

.cp-cart-progress__text {
	margin: 0 0 var(--space-sm);
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
}

.cp-cart-progress__bar {
	height: 10px;
	border-radius: var(--radius-full);
	background: rgba(255, 255, 255, 0.08);
	overflow: hidden;
}

.cp-cart-progress__bar > span {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
	transition: width var(--transition-normal);
}

/* --------------------------------------------------------------------------
   8. Checkout
   -------------------------------------------------------------------------- */
.cp-checkout-reassurance {
	margin-bottom: var(--space-lg);
	padding: var(--space-lg);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
}

.cp-checkout-reassurance h2 {
	font-size: var(--fs-base);
	margin: 0 0 var(--space-sm);
}

.cp-checkout-reassurance ul {
	margin: 0 0 var(--space-sm);
	padding-left: 1rem;
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
}

.cp-checkout-reassurance li + li {
	margin-top: 0.2rem;
}

.cp-checkout-reassurance__links {
	margin: 0;
	font-size: var(--fs-sm);
}

.cp-checkout-reassurance__links a {
	color: var(--color-primary-light);
}
.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);
}

/* --------------------------------------------------------------------------
   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);
}

.cp-account-auth {
	margin: var(--space-xl) 0;
	display: grid;
	gap: var(--space-lg);
}

.cp-account-auth__intro {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-lg);
}

.cp-account-auth__intro h1 {
	margin: 0 0 var(--space-sm);
	font-size: var(--fs-2xl);
}

.cp-account-auth__intro p {
	margin: 0 0 var(--space-md);
	color: var(--color-text-muted);
}

.cp-account-auth__benefits {
	margin: 0;
	padding-left: 1.1rem;
	display: grid;
	gap: var(--space-xs);
}

.cp-account-auth__forms {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-lg);
}

.cp-account-auth__forms--single {
	grid-template-columns: minmax(0, 1fr);
}

.cp-account-auth__panel {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-lg);
}

.cp-account-auth__panel h2 {
	margin: 0 0 var(--space-sm);
	font-size: var(--fs-lg);
}

.cp-account-auth__panel-desc {
	margin: 0 0 var(--space-md);
	color: var(--color-text-muted);
}

.cp-account-auth .woocommerce-form-row label {
	display: block;
	margin-bottom: 6px;
	font-size: var(--fs-sm);
}

.cp-account-auth .input-text {
	width: 100%;
}

.cp-auth-hp-field {
	position: absolute !important;
	left: -99999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

.cp-account-auth__actions {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	flex-wrap: wrap;
}

.cp-account-auth .woocommerce-LostPassword {
	margin: 0;
}

.cp-account-auth__auto-password {
	margin: 0 0 var(--space-md);
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
}

.cp-account-quick-actions {
	margin: var(--space-lg) 0;
	padding: var(--space-lg);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
}

.cp-account-quick-actions h2 {
	margin: 0 0 var(--space-md);
	font-size: var(--fs-lg);
}

.cp-account-quick-actions__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--space-md);
}

.cp-account-quick-actions__item {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-md);
	background: rgba(255, 255, 255, 0.02);
}

.cp-account-quick-actions__item h3 {
	margin: 0 0 var(--space-xs);
	font-size: var(--fs-base);
}

.cp-account-quick-actions__item p {
	margin: 0 0 var(--space-sm);
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
	line-height: var(--lh-relaxed);
}

.cp-account-quick-actions__link {
	display: inline-flex;
	align-items: center;
	font-weight: var(--fw-semibold);
}

.cp-account-quick-actions__alt {
	display: inline-flex;
	align-items: center;
	margin-left: var(--space-sm);
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
}

@media (max-width: 992px) {
	.cp-account-auth__forms {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ==========================================================================
   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.
   ========================================================================== */

/* --- 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.
   ========================================================================== */

/* ══════════════════════════════════════════════════════════════════════════
   13a.  Bulk Discount — Wrapper, Summary, Table, Variation Buttons
         (add-to-cart plugin → frontend.css overrides)
   ══════════════════════════════════════════════════════════════════════════ */

/* --- Wrapper --- */
.cosplay-pro-body .bulk-discount-wrapper {
	margin: var(--space-md) 0 !important;
}

/* --- Price Display (top) --- */
.cosplay-pro-body .bulk-discount-price-display {
	display: none !important;  /* Theme already shows price via WooCommerce hook */
}

/* --- Summary bar ("1 × Product Name … $80.00") --- */
.cosplay-pro-body .bulk-discount-summary {
	background: var(--color-surface) !important;
	border: 1px solid var(--color-border) !important;
	border-radius: var(--radius-md) !important;
	padding: 12px 16px !important;
	color: var(--color-text) !important;
}

.cosplay-pro-body .bulk-discount-summary .total-price {
	color: var(--color-primary-light) !important;
	font-weight: 700 !important;
	font-size: 1.1em !important;
}

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

.cosplay-pro-body .bulk-discount-summary .quantity-display {
	color: var(--color-text-heading) !important;
	font-weight: 600 !important;
}

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

/* --- Variation notice --- */
.cosplay-pro-body .variation-notice {
	background: rgba(155, 89, 182, 0.1) !important;
	color: var(--color-primary-light) !important;
	border: 1px solid rgba(155, 89, 182, 0.25) !important;
	border-radius: var(--radius-md) !important;
}

/* --- Discount Table (the tier rows) --- */
.cosplay-pro-body .bulk-discount-table-wrapper {
	margin-top: 0 !important;
}

.cosplay-pro-body .bulk-discount-table {
	background: transparent !important;
	border: 1px solid var(--color-border) !important;
	border-radius: var(--radius-md) !important;
	overflow: hidden !important;
	margin-bottom: var(--space-md) !important;
}

.cosplay-pro-body .bulk-discount-table td {
	background: var(--color-surface) !important;
	color: var(--color-text-muted) !important;
	border: none !important;
	border-bottom: 1px solid var(--color-border) !important;
	padding: 10px 16px !important;
	font-size: 0.9em !important;
	transition: all 0.2s ease !important;
}

.cosplay-pro-body .bulk-discount-table tr:last-child td {
	border-bottom: none !important;
}

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

.cosplay-pro-body .bulk-discount-table .bulk-rule:hover td:before {
	color: var(--color-primary-light) !important;
}

/* Don't override active row with generic hover */
.cosplay-pro-body .bulk-discount-table .bulk-rule.active:hover td {
	background: transparent !important;
}

/* Active discount tier */
.cosplay-pro-body .bulk-discount-table .bulk-rule.active {
	background: linear-gradient(135deg, rgba(155, 89, 182, 0.3), rgba(128, 0, 255, 0.18)) !important;
	border-left: 3px solid var(--color-primary) !important;
	border-radius: 4px !important;
}

.cosplay-pro-body .bulk-discount-table .bulk-rule.active td {
	background: transparent !important;
	color: var(--color-primary-light) !important;
	border-bottom-color: rgba(155, 89, 182, 0.2) !important;
}

.cosplay-pro-body .bulk-discount-table .bulk-rule.active td:before {
	color: var(--color-primary-light) !important;
}

.cosplay-pro-body .bulk-discount-table .bulk-rule.active td .price-amount,
.cosplay-pro-body .bulk-discount-table .bulk-rule.active td .save-text {
	color: #e74c3c !important;
	text-shadow: 0 0 6px rgba(231, 76, 60, 0.3) !important;
}

/* Price highlight in discount rows */
.cosplay-pro-body .bulk-discount-table .woocommerce-Price-amount {
	color: var(--color-primary-light) !important;
	font-weight: 600 !important;
}

/* "save X%" text */
.cosplay-pro-body .bulk-discount-table .save-text,
.cosplay-pro-body .bulk-discount-table td strong {
	color: #e74c3c !important;
	font-weight: 600 !important;
}

/* Disabled overlay for variable products */
.cosplay-pro-body .bulk-discount-table[style*="pointer-events: none"]::after {
	background: rgba(13, 13, 13, 0.5) !important;
}

/* --- Variation Buttons (Gender, Size selectors) --- */
.cosplay-pro-body .variation-button {
	background: var(--color-surface) !important;
	border: 1px solid var(--color-border) !important;
	color: var(--color-text) !important;
	border-radius: var(--radius-md) !important;
	transition: all 0.25s ease !important;
}

.cosplay-pro-body .variation-button:hover:not(.selected):not(.disabled) {
	border-color: rgba(155, 89, 182, 0.5) !important;
	background: var(--color-surface-hover) !important;
	color: var(--color-text-heading) !important;
}

.cosplay-pro-body .variation-button.selected {
	background: rgba(155, 89, 182, 0.15) !important;
	border-color: var(--color-primary) !important;
	color: var(--color-primary-light) !important;
	box-shadow: 0 0 8px rgba(155, 89, 182, 0.2) !important;
}

.cosplay-pro-body .variation-button.selected::after {
	color: var(--color-primary-light) !important;
}

.cosplay-pro-body .variation-button.selected .price-diff {
	color: var(--color-primary-light) !important;
}

.cosplay-pro-body .variation-button .price-diff {
	color: var(--color-accent, #e74c3c) !important;
}

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

/* --- Discount info text (cart/mini-cart) --- */
.cosplay-pro-body .bulk-discount-info {
	color: var(--color-primary-light) !important;
}

/* 13b / 13b-2 single-product plugin visual rules moved to woocommerce-single.css */

/* ══════════════════════════════════════════════════════════════════════════
   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::before {
	color: var(--color-text-muted) !important;
}

.cosplay-pro-body .mini-cart-remove:hover {
	background: rgba(255, 80, 80, 0.12) !important;
}
.cosplay-pro-body .mini-cart-remove:hover::before {
	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;
}

/* --- Custom Size / Use Date / Special Instruction in cart sidebar --- */
.cosplay-pro-body .shipping-info .custom-size-info,
.cosplay-pro-body .shipping-info .use-date-info,
.cosplay-pro-body .shipping-info .special-instruction-info {
	background: var(--color-surface) !important;
	border: 1px solid var(--color-border) !important;
	border-radius: 6px !important;
	padding: 8px 10px !important;
	margin: 6px 0 !important;
	font-size: 0.82em !important;
	line-height: 1.5 !important;
	color: var(--color-text) !important;
	word-break: break-word !important;
}

.cosplay-pro-body .shipping-info .custom-size-info strong,
.cosplay-pro-body .shipping-info .use-date-info strong,
.cosplay-pro-body .shipping-info .special-instruction-info strong {
	color: var(--color-primary-light) !important;
	font-weight: 600 !important;
	display: block !important;
	margin-bottom: 3px !important;
	font-size: 0.95em !important;
}

.cosplay-pro-body .shipping-info .special-instruction-info {
	border-left: 3px solid var(--color-primary) !important;
}

.cosplay-pro-body .mini-cart-title .variation-attributes {
	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 styles consolidated into section below) */

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

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

/* Use Date & Special Instruction — Container */
.cosplay-pro-body .size-va-use-date-field-wrapper {
	color: var(--color-text) !important;
}

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

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

/* Use Date — Date Input */
.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,
.cosplay-pro-body #size_va_use_date {
	background: var(--color-bg-alt) !important;
	background-color: 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 input[type="date"]:focus,
.cosplay-pro-body #size_va_use_date:focus {
	border-color: var(--color-primary) !important;
	box-shadow: 0 0 0 2px rgba(155, 89, 182, 0.2) !important;
}

.cosplay-pro-body .size-va-use-date-field input[type="date"]::-webkit-calendar-picker-indicator {
	filter: invert(1) !important;
}

/* Use Date — Calendar icon SVG（深色主题上保持可见，接近白色） */
.cosplay-pro-body .size-va-date-icon {
	color: rgba(255, 255, 255, 0.9) !important;
}

.cosplay-pro-body .size-va-date-icon svg path {
	stroke: currentColor !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,
.cosplay-pro-body #size_va_special_instruction {
	background: var(--color-bg-alt) !important;
	background-color: 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,
.cosplay-pro-body #size_va_special_instruction: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-hover) !important;
	background-color: var(--color-surface-hover) !important;
	color: var(--color-text-muted) !important;
}

.cosplay-pro-body .size-va-tooltip-popup {
	background: var(--color-surface) !important;
	background-color: var(--color-surface) !important;
	color: var(--color-text) !important;
	border: 1px solid var(--color-border) !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
}

/* Error state */
.cosplay-pro-body .size-va-use-date-error {
	color: var(--color-error, #e74c3c) !important;
}

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

/* Required asterisk */
.cosplay-pro-body .size-va-use-date-field .required {
	color: var(--color-error, #e74c3c) !important;
}

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

/* 初始化时空容器不占位、无框（插件会输出空 #size-va-variation-info 作注入锚点） */
.cosplay-pro-body #size-va-variation-info:empty {
	display: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	background: transparent !important;
	min-height: 0 !important;
	box-shadow: none !important;
}

.cosplay-pro-body .size-va-variation-info h4,
.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-info-header {
	border-bottom-color: var(--color-border) !important;
}

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

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

.cosplay-pro-body .size-va-variation-info table th,
.cosplay-pro-body #size-va-variation-info table th,
.cosplay-pro-body .size-va-info-table th {
	background: var(--color-surface-hover) !important;
	background-color: var(--color-surface-hover) !important;
	color: var(--color-text-heading) !important;
	border: 1px solid var(--color-border) !important;
	border-color: var(--color-border) !important;
}

.cosplay-pro-body .size-va-variation-info table td,
.cosplay-pro-body #size-va-variation-info table td,
.cosplay-pro-body .size-va-info-table td {
	background: var(--color-bg-alt) !important;
	background-color: var(--color-bg-alt) !important;
	color: var(--color-text) !important;
	border: 1px solid var(--color-border) !important;
	border-color: var(--color-border) !important;
}

/* ---- Custom Size Form: outer wrappers — transparent on product page too ---- */
.cosplay-pro-body .custom-size-form-container,
.cosplay-pro-body .size-va-form-container {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
}

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

/* When custom size form is INSIDE variation-info, remove inner decoration */
.cosplay-pro-body .size-va-variation-info .size-va-custom-size-form {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 10px 0 0 !important;
	border-radius: 0 !important;
}

.cosplay-pro-body .size-va-custom-size-form h4,
.cosplay-pro-body .size-va-custom-form-title {
	color: var(--color-text-heading) !important;
	border-bottom: 1px solid var(--color-border) !important;
	padding-bottom: 10px !important;
	margin-bottom: 8px !important;
	font-size: 15px !important;
	font-weight: 600 !important;
}

.cosplay-pro-body .size-va-custom-form-desc {
	color: var(--color-text-muted) !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
}

.cosplay-pro-body .size-va-custom-form-hint {
	background: rgba(155, 89, 182, 0.08) !important;
	border: 1px solid rgba(155, 89, 182, 0.15) !important;
	color: var(--color-text-muted) !important;
	border-radius: 6px !important;
	padding: 10px 14px !important;
}

.cosplay-pro-body .size-va-custom-fields {
	background: var(--color-bg-alt) !important;
	border: 1px solid var(--color-border) !important;
	border-radius: 8px !important;
	padding: 16px !important;
}

/* Field labels */
.cosplay-pro-body .size-va-field-group label {
	color: var(--color-text) !important;
	font-size: 12px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
	font-weight: 600 !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;
	text-transform: none !important;
	font-weight: 400 !important;
}

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

/* Input fields */
.cosplay-pro-body .size-va-custom-input {
	background: var(--color-surface) !important;
	border: 1px solid var(--color-border) !important;
	color: var(--color-text) !important;
	border-radius: 6px !important;
	padding: 10px 12px !important;
	font-size: 14px !important;
	transition: all 0.2s ease !important;
}

.cosplay-pro-body .size-va-custom-input::placeholder {
	color: var(--color-text-muted) !important;
	opacity: 0.5 !important;
}

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

.cosplay-pro-body .size-va-custom-input:hover:not(:focus) {
	border-color: rgba(155, 89, 182, 0.4) !important;
}

/* Unit toggle — compact, right-aligned */
.cosplay-pro-body .size-va-custom-unit-toggle {
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 8px 0 4px !important;
	display: flex !important;
	justify-content: flex-end !important;
	align-items: center !important;
	gap: 4px !important;
}

.cosplay-pro-body .size-va-custom-unit-toggle label {
	color: var(--color-text-muted) !important;
	cursor: pointer !important;
	font-size: 11px !important;
	font-weight: 500 !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 4px !important;
	padding: 4px 10px !important;
	border-radius: 20px !important;
	border: 1px solid var(--color-border) !important;
	background: transparent !important;
	transition: all 0.2s ease !important;
}

.cosplay-pro-body .size-va-custom-unit-toggle label:hover {
	color: var(--color-primary-light) !important;
	border-color: rgba(155, 89, 182, 0.4) !important;
}

/* Active label (has checked radio inside) */
.cosplay-pro-body .size-va-custom-unit-toggle label:has(input:checked) {
	background: var(--color-primary) !important;
	border-color: var(--color-primary) !important;
	color: #fff !important;
}

/* Hide radio buttons — labels act as toggle pills */
.cosplay-pro-body .size-va-custom-unit-toggle input[type="radio"] {
	-webkit-appearance: none !important;
	appearance: none !important;
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	position: absolute !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* Fallback for browsers without :has() — style the radio itself */
.cosplay-pro-body .size-va-unit-switch input[type="radio"],
.cosplay-pro-body .size-va-unit-switch-inline input[type="radio"] {
	-webkit-appearance: none !important;
	appearance: none !important;
	width: 12px !important;
	height: 12px !important;
	border: 2px solid var(--color-border) !important;
	border-radius: 50% !important;
	background: var(--color-bg-alt) !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
	position: relative !important;
}

.cosplay-pro-body .size-va-unit-switch input[type="radio"]:checked,
.cosplay-pro-body .size-va-unit-switch-inline input[type="radio"]:checked {
	border-color: var(--color-primary) !important;
	background: var(--color-primary) !important;
	box-shadow: inset 0 0 0 2px var(--color-surface) !important;
}

/* Measure guide link */
.cosplay-pro-body .size-va-measure-guide {
	color: var(--color-primary-light) !important;
	text-decoration: underline !important;
}

.cosplay-pro-body .size-va-measure-guide:hover {
	color: var(--color-primary) !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;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !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-form-body {
	background: var(--color-bg) !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;
	background-color: 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;
	box-shadow: 0 0 0 3px rgba(155, 89, 182, 0.15) !important;
}

.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;
}

.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); }
}

/* 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
   -------------------------------------------------------------------------- */

/* --- Product Grid Mobile --- */
@media (max-width: 768px) {
	/* Override WooCommerce mobile columns fallback (margin-bottom: 2.992em, float/clear).
	   We use CSS grid for cards, so these legacy float rules create large blank gaps. */
	.woocommerce ul.products[class*="columns-"] li.product,
	.woocommerce-page ul.products[class*="columns-"] li.product {
		margin: 0 !important;
		float: none !important;
		clear: none !important;
		width: 100% !important;
	}

	.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);
		min-height: calc(1.35em * 2);
	}

	.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);
		letter-spacing: 0.04em;
		min-height: 40px;
	}

}

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

/* ══════════════════════════════════════════════════════════════════════════
   13e.  Floating Cart Panel  (add-to-cart plugin → floating-cart.css)
         The plugin now uses CSS variables; these are enhancements only.
   ══════════════════════════════════════════════════════════════════════════ */

/* --- Panel — glass-morphism for dark theme --- */
.cosplay-pro-body .floating-cart-panel {
	background: rgba(13, 13, 26, 0.92) !important;
	backdrop-filter: blur(16px) !important;
	-webkit-backdrop-filter: blur(16px) !important;
	border-top: 1px solid rgba(155, 89, 182, 0.2) !important;
	box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.4) !important;
}

/* --- Add to cart button in floating bar --- */
.cosplay-pro-body .floating-cart-panel .single_add_to_cart_button {
	background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light)) !important;
	color: #fff !important;
	border: none !important;
	border-radius: var(--radius-md) !important;
	font-weight: 600 !important;
	transition: all 0.3s ease !important;
}

.cosplay-pro-body .floating-cart-panel .single_add_to_cart_button:hover {
	box-shadow: 0 0 16px rgba(155, 89, 182, 0.4) !important;
	transform: translateY(-1px) !important;
}

/* --- Quantity controls --- */
.cosplay-pro-body .floating-cart-panel .quantity {
	border-color: var(--color-border) !important;
	border-radius: var(--radius-md) !important;
}

.cosplay-pro-body .floating-cart-panel .quantity button {
	background: var(--color-surface-hover) !important;
	color: var(--color-text) !important;
	border-color: var(--color-border) !important;
}

.cosplay-pro-body .floating-cart-panel .quantity button:hover {
	background: var(--color-primary) !important;
	color: #fff !important;
}

/* --- Contact icons pill --- */
.cosplay-pro-body .floating-contact-icons {
	background: rgba(13, 13, 26, 0.88) !important;
	backdrop-filter: blur(12px) !important;
	-webkit-backdrop-filter: blur(12px) !important;
	border: 1px solid var(--color-border) !important;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3) !important;
}

/* --- Product image in floating bar --- */
.cosplay-pro-body .floating-cart-panel .product-image {
	border-color: var(--color-border) !important;
	border-radius: var(--radius-sm) !important;
}

/* --- Variation label --- */
.cosplay-pro-body .floating-cart-panel .variation-header .label {
	color: var(--color-text-muted) !important;
}

/* --- Lightbox dark overlay --- */
.cosplay-pro-body .floating-cart-lightbox .lightbox-overlay {
	background: rgba(0, 0, 0, 0.9) !important;
}

/* --- Mobile: floating bar add-to-cart button --- */
@media (max-width: 768px) {
	.cosplay-pro-body .mobile-layout .single_add_to_cart_button {
		background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light)) !important;
		color: #fff !important;
		border: none !important;
	}
}

/* Single-product plugin/mobile modal overrides moved to woocommerce-single.css */