/* ==========================================================================
   WooCommerce Single Product Isolated Styles
   --------------------------------------------------------------------------
   Extracted from legacy woocommerce.css as part of staged split.
   Scope: strictly single-product-only selectors.
   ========================================================================== */

/* ==========================================================================
   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%;
		/* align-items: stretch (default) — both columns stretch to
		   the same row height. This is essential for sticky to work:
		   the gallery column becomes as tall as the summary column,
		   giving the sticky child room to "float" within. */
	}

	/*
	 * STICKY GALLERY — correct approach:
	 *
	 * .cosplay-product__gallery (grid item) stretches to full row height.
	 * .single-image-gallery (child) is sticky inside the tall parent.
	 *
	 * When the summary is taller than the gallery:
	 *   row height = summary height
	 *   gallery grid item stretches to that height
	 *   sticky child stays in viewport while scrolling
	 */
	.cosplay-product__gallery .single-image-gallery {
		position: sticky;
		top: var(--header-height, 80px);
	}
}

/* --- Gallery Column --- */
.cosplay-product__gallery {
	position: relative;
	background: transparent;
}

/* Single Image plugin gallery — base styles */
.cosplay-product__gallery .single-image-gallery {
	width: 100%;
	margin: 0;
}

.cosplay-product__gallery .si-gallery-container {
	border-radius: var(--radius-lg, 12px);
}

/*
 * 主图下方大块深色空隙（Donki 产品页）
 *
 * 原因：
 * 1) 插件用 padding-bottom:% 做「固定纵横比」+ .si-main-image 绝对定位 + object-fit:contain；
 *    当盒子比实图更「高」时，底部会露出 .si-main-image-container 背景（深色主题下为 #111122）。
 * 2) 桌面 grid 默认拉伸画廊列，图卡比内容矮时，列内下方会透出 hero 深色底。
 *
 * 处理：在产品页画廊内改为「高度随主图自然撑开」，侧栏缩略图仍贴齐主图高度（插件 ≥1024 规则）。
 */
.cosplay-product__gallery .single-image-gallery .si-main-image-container {
	padding-bottom: 0 !important;
	height: auto !important;
	min-height: 0 !important;
}

.cosplay-product__gallery .single-image-gallery .si-main-image {
	position: relative !important;
	top: auto !important;
	left: auto !important;
	width: 100% !important;
	height: auto !important;
	max-height: none !important;
	display: block;
	object-fit: contain;
}

@media (min-width: 1024px) {
	.cosplay-product__gallery {
		/* Sticky gallery needs the grid item to stretch with row height. */
		align-self: stretch;
		min-height: 100%;
	}

	.cosplay-product__gallery .single-image-gallery {
		position: sticky;
		top: var(--header-height, 80px);
	}
}

/* Fallback: if WooCommerce default gallery is still present */
.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;
}

/* Size VA：变体选中后插件会把「当前尺码信息表」写入 #size-va-variation-info。
   勿在此处 display:none，否则会看不到产品页内联尺寸表（完整尺码仍可用「尺码表」按钮弹窗）。 */

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

.cosplay-product form.cart .single_add_to_cart_button.cp-atc-success {
	background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
	box-shadow: 0 0 0 2px rgba(187, 119, 214, 0.28), 0 10px 28px rgba(155, 89, 182, 0.42);
	transform: translateY(-1px) scale(1.015);
	animation: cpAtcPulse 0.55s ease;
}

.cosplay-product form.cart .single_add_to_cart_button.loading,
.cosplay-product form.cart .single_add_to_cart_button.cp-atc-native-pending {
	opacity: 0.92;
	cursor: wait;
	transform: translateY(0);
	box-shadow: 0 0 0 2px rgba(187, 119, 214, 0.2), 0 8px 22px rgba(155, 89, 182, 0.28);
}

@keyframes cpAtcPulse {
	0% {
		transform: translateY(0) scale(1);
	}
	40% {
		transform: translateY(-2px) scale(1.025);
	}
	100% {
		transform: translateY(-1px) scale(1.015);
	}
}

/* --- 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 --- */
/* --- Product spec (Details) + disclaimer — under add-to-cart, server-rendered --- */
.cosplay-product-spec {
	margin-top: var(--space-lg);
	contain: content;
}

.cosplay-product-spec__details + .cosplay-product-spec__disclaimer {
	margin-top: var(--space-xl);
	padding-top: var(--space-lg);
	border-top: 1px solid var(--color-border);
}

.cosplay-product-spec__title {
	font-size: clamp(15px, 1.12vw, 17px);
	font-weight: var(--fw-semibold);
	color: var(--color-text);
	margin: 0 0 var(--space-sm);
	line-height: 1.25;
}

.cosplay-product-spec__rule {
	border: 0;
	border-top: 1px solid var(--color-border);
	margin: 0 0 var(--space-md);
	opacity: 0.85;
}

.cosplay-product-spec__list {
	margin: 0;
	padding: 0;
}

.cosplay-product-spec__row {
	display: grid;
	grid-template-columns: minmax(7.5rem, 34%) 1fr;
	gap: var(--space-xs) var(--space-md);
	padding: var(--space-sm) 0;
	align-items: start;
	border-bottom: 1px solid var(--color-border);
}

.cosplay-product-spec__row:last-of-type {
	border-bottom: 0;
	padding-bottom: 0;
}

.cosplay-product-spec__row dt {
	margin: 0;
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	color: var(--color-text-muted);
	line-height: 1.45;
}

.cosplay-product-spec__row dd {
	margin: 0;
	font-size: var(--fs-sm);
	color: var(--color-text);
	line-height: 1.55;
	min-width: 0;
}

.cosplay-product-spec__row dd > p:first-child {
	margin-top: 0;
}

.cosplay-product-spec__row dd > p:last-child {
	margin-bottom: 0;
}

.cosplay-product-spec__disclaimer-body {
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
	line-height: 1.55;
}

.cosplay-product-spec__disclaimer-body > p:first-child {
	margin-top: 0;
}

.cosplay-product-spec__disclaimer-body > p:last-child {
	margin-bottom: 0;
}

/* --- Trust Badges --- */
.cosplay-trust-badges {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: clamp(8px, 1.4vw, 18px);
	margin-top: var(--space-lg);
	padding-top: var(--space-lg);
	border-top: 1px solid var(--color-border);
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	padding: clamp(12px, 1.5vw, 18px);
}

.cosplay-trust-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	flex: 1 1 0;
	min-width: 0;
}

.cosplay-trust-icon {
	width: 56px;
	height: 56px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--color-bg-alt);
	color: var(--color-text-muted);
	border: 1px solid var(--color-border);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
	margin-bottom: var(--space-sm);
}

.cosplay-trust-icon.is-highlight {
	background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
	color: #fff;
	border-color: transparent;
	box-shadow: 0 8px 20px rgba(255, 146, 28, 0.32);
}

.cosplay-trust-step strong {
	font-size: clamp(14px, 1.1vw, 15px);
	font-weight: var(--fw-semibold);
	color: var(--color-text);
	line-height: 1.2;
	margin-bottom: 2px;
}

.cosplay-trust-step span {
	font-size: clamp(12px, 0.95vw, 10px);
	color: var(--color-text-muted);
	line-height: 1.3;
}

.cosplay-trust-op {
	flex: 0 0 auto;
	align-self: center;
	font-size: clamp(24px, 2vw, 32px);
	font-weight: 700;
	line-height: 1;
	color: var(--color-text-muted);
	padding-inline: clamp(2px, 0.6vw, 8px);
}

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

.cosplay-product__extra-inner {
	width: 100%;
}

.product-fbt:empty,
.product-bundle:empty,
.product-extensions-misc:empty,
.product-related:empty {
	display: none;
}

/* Each direct child plugin section gets a separator */
.cosplay-product__extra-inner > * + * {
	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);
}

.cosplay-product__details-inner {
	width: 100%;
}

/* --------------------------------------------------------------------------
   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 核心会给 li / li.active 上浅色或 #fff，盖过上面「仅设 a」的规则。
 * 用 body.cosplay-pro-body + !important 统一成深色 Tab。
 */
body.cosplay-pro-body.woocommerce div.product .woocommerce-tabs ul.tabs li,
body.cosplay-pro-body .woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent !important;
	box-shadow: none !important;
}

body.cosplay-pro-body.woocommerce div.product .woocommerce-tabs ul.tabs li.active,
body.cosplay-pro-body .woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	background: transparent !important;
	border-color: transparent !important;
}

body.cosplay-pro-body.woocommerce div.product .woocommerce-tabs ul.tabs li a,
body.cosplay-pro-body .woocommerce div.product .woocommerce-tabs ul.tabs li a {
	background: transparent !important;
	color: var(--color-text-muted) !important;
}

body.cosplay-pro-body.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover,
body.cosplay-pro-body .woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--color-text) !important;
	background: rgba(155, 89, 182, 0.08) !important;
}

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

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

/* ==========================================================================
   13. THIRD-PARTY PLUGIN COMPATIBILITY (single product)
   ========================================================================== */

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

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

/* Better single-product recommendation card experience:
   stable card heights, cleaner text rhythm, stronger CTA affordance. */
.cosplay-product__details .related.products ul.products,
.cosplay-product__details .upsells.products ul.products,
.woocommerce div.product .related.products ul.products,
.woocommerce div.product .upsells.products ul.products {
	align-items: start;
}

.cosplay-product__details .related.products ul.products li.product,
.cosplay-product__details .upsells.products ul.products li.product,
.woocommerce div.product .related.products ul.products li.product,
.woocommerce div.product .upsells.products ul.products li.product {
	display: flex;
	flex-direction: column;
	min-height: 0;
	height: auto;
	align-self: start;
	margin-bottom: 0 !important;
}

.cosplay-product__details .related.products ul.products li.product .woocommerce-loop-product__title,
.cosplay-product__details .upsells.products ul.products li.product .woocommerce-loop-product__title,
.woocommerce div.product .related.products ul.products li.product .woocommerce-loop-product__title,
.woocommerce div.product .upsells.products ul.products li.product .woocommerce-loop-product__title {
	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);
	margin-bottom: 0;
	padding-bottom: 2px;
}

.cosplay-product__details .related.products ul.products li.product .button,
.cosplay-product__details .upsells.products ul.products li.product .button,
.woocommerce div.product .related.products ul.products li.product .button,
.woocommerce div.product .upsells.products ul.products li.product .button {
	margin-top: var(--space-sm);
	margin-bottom: var(--space-sm);
}

.product-related .related.products ul.products li.product .price:empty,
.product-related .related.products ul.products li.product .star-rating:empty {
	display: none;
}

.product-related .related.products ul.products li.product .star-rating {
	margin-bottom: 0;
}

.product-related .related.products ul.products li.product .price {
	margin-bottom: 0;
}

.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-lg);
	text-align: center;
}

.cosplay-product__details .related.products h2::after,
.cosplay-product__details .upsells.products h2::after,
.product-related .related.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);
}

/* --------------------------------------------------------------------------
  Single product recommendations: desktop 6 cols, mobile 2 cols
  -------------------------------------------------------------------------- */
.cosplay-product__details .related.products ul.products,
.cosplay-product__details .upsells.products ul.products,
.woocommerce div.product .related.products ul.products,
.woocommerce div.product .upsells.products ul.products {
	grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}

/* --------------------------------------------------------------------------
   Product cards (single product related/upsells) — desktop + mobile unified
   -------------------------------------------------------------------------- */
.product-related .related.products ul.products,
.cosplay-product__details .upsells.products ul.products {
	gap: 14px !important;
}

.product-related .related.products ul.products li.product,
.cosplay-product__details .upsells.products ul.products li.product {
	border-radius: 12px;
	overflow: hidden;
}

.product-related .related.products ul.products li.product > a.woocommerce-LoopProduct-link,
.cosplay-product__details .upsells.products ul.products li.product > a.woocommerce-LoopProduct-link {
	display: flex;
	flex-direction: column;
	gap: 0;
	text-decoration: none;
	margin-bottom: 0 !important;
}

.product-related .related.products ul.products li.product > a.woocommerce-LoopProduct-link > img,
.cosplay-product__details .upsells.products ul.products li.product > a.woocommerce-LoopProduct-link > img,
.product-related .related.products ul.products li.product > a.woocommerce-LoopProduct-link picture img,
.cosplay-product__details .upsells.products ul.products li.product > a.woocommerce-LoopProduct-link picture img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.product-related .related.products ul.products li.product .woocommerce-loop-product__title,
.cosplay-product__details .upsells.products ul.products li.product .woocommerce-loop-product__title {
	font-size: 15px;
	line-height: 1.28;
	min-height: calc(1.28em * 2);
	margin: 0 !important;
	padding: 10px 12px 4px;
}

.product-related .related.products ul.products li.product .star-rating,
.cosplay-product__details .upsells.products ul.products li.product .star-rating {
	margin: 0 12px 2px !important;
}

.product-related .related.products ul.products li.product .price,
.cosplay-product__details .upsells.products ul.products li.product .price {
	margin: 0 12px 4px !important;
	padding: 0 !important;
	min-height: 0 !important;
}

.product-related .related.products ul.products li.product .button,
.cosplay-product__details .upsells.products ul.products li.product .button {
	margin: 8px 12px 10px !important;
	padding: 0.5rem 0.7rem !important;
	min-height: 38px !important;
	font-size: 13px !important;
	letter-spacing: 0.03em !important;
}

.product-related .cp-related-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-top: 14px;
}

.product-related .cp-related-load-more {
	padding: 8px 14px;
	border-radius: 999px;
	border: 1px solid var(--color-border, #3b3e56);
	background: var(--color-surface, #15182b);
	color: var(--color-text, #fff);
	font-size: 13px;
	cursor: pointer;
	min-width: 128px;
}

.product-related .cp-related-load-more[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
}

.product-related .cp-related-page-indicator {
	font-size: 13px;
	color: var(--color-text-muted, #b6b8ca);
}

@media (min-width: 1025px) and (max-width: 1399px) {
	.cosplay-product__details .related.products ul.products,
	.cosplay-product__details .upsells.products ul.products,
	.woocommerce div.product .related.products ul.products,
	.woocommerce div.product .upsells.products ul.products {
		grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 768px) {
	.cosplay-product__details .related.products ul.products,
	.cosplay-product__details .upsells.products ul.products,
	.woocommerce div.product .related.products ul.products,
	.woocommerce div.product .upsells.products ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.product-related .related.products ul.products li.product .woocommerce-loop-product__title,
	.cosplay-product__details .upsells.products ul.products li.product .woocommerce-loop-product__title {
		font-size: 13px;
		padding: 8px 10px 4px;
	}

	.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-wrap: wrap;
		justify-content: center;
		gap: var(--space-sm);
		padding: var(--space-md);
	}

	.cosplay-trust-step {
		flex: 1 1 calc(33.333% - 24px);
		min-width: 150px;
	}

	.cosplay-trust-op {
		padding-inline: 0;
	}
}

@media (max-width: 640px) {
	.cosplay-trust-badges {
		flex-direction: column;
		align-items: stretch;
	}

	.cosplay-trust-step {
		flex: 1 1 auto;
	}

	.cosplay-trust-op {
		display: none;
	}
}

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

	/* Single Image plugin — switch to bottom thumbnails on tablet/mobile */
	.cosplay-product__gallery .single-image-gallery .si-gallery-container {
		flex-direction: column;
		border-radius: 0;
	}

	.cosplay-product__gallery .single-image-gallery .si-thumbnails-container {
		width: 100%;
		order: 1;
		border-right: none !important;
		border-top: 1px solid #2A2A4A;
	}

	.cosplay-product__gallery .single-image-gallery .si-main-image-container {
		width: 100%;
		order: 0;
	}

	.cosplay-product__gallery .single-image-gallery .si-thumbnails {
		flex-direction: row;
		overflow-x: auto;
		overflow-y: hidden;
	}

	.cosplay-product__gallery .single-image-gallery .si-thumbnail {
		width: 64px;
		height: 64px;
		padding-bottom: 0;
		margin-bottom: 0;
		margin-right: 8px;
	}

	/* Fallback: WooCommerce default gallery on mobile */
	.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);
	}
}

/* Single-product-only smart-rec overflow safeguard (desktop hover) */
@media (hover: hover) and (pointer: fine) {
	.single-product .smart-recommendations-container,
	.single-product .smart-recommendations-content,
	.single-product .smart-recommendations-grid,
	.single-product .smart-recommendations-track {
		overflow: visible !important;
	}

	.single-product .smart-recommendations-container {
		content-visibility: visible !important;
		contain: none !important;
		contain-intrinsic-size: auto !important;
	}
}

/* --------------------------------------------------------------------------
   16. Structured Product Page (PHP wrappers) + Mobile Layout
   -------------------------------------------------------------------------- */
.product-page,
.product-hero,
.product-extensions,
.product-tabs {
	width: 100%;
}

.product-extensions .cosplay-product__extra-inner {
	width: 100%;
}

/* --------------------------------------------------------------------------
   Mobile fallback by body class
   Some environments set mobile body class but keep wide viewport.
   Force mobile structure when .shirtzero-mobile exists.
   -------------------------------------------------------------------------- */
body.shirtzero-mobile .product-hero {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

body.shirtzero-mobile .product-hero .product-gallery,
body.shirtzero-mobile .product-hero .product-summary {
	width: 100%;
}

body.shirtzero-mobile .product-hero .cosplay-product__summary-inner {
	padding: var(--space-md) var(--container-pad) var(--space-lg);
}

body.shirtzero-mobile .product-extensions .cosplay-product__extra-inner > section {
	margin-top: var(--space-lg);
	padding-top: var(--space-md);
	border-top: 1px solid var(--color-border);
}

body.shirtzero-mobile .product-extensions .cosplay-product__extra-inner > section:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

body.shirtzero-mobile .product-fbt .bundle-purchase-main,
body.shirtzero-mobile .product-bundle .bundle-purchase-main,
body.shirtzero-mobile .product-fbt .bundle-purchase-main.layout-horizontal,
body.shirtzero-mobile .product-bundle .bundle-purchase-main.layout-horizontal {
	display: flex !important;
	flex-direction: column !important;
	gap: var(--space-md) !important;
}

body.shirtzero-mobile .product-fbt .bundle-purchase-actions,
body.shirtzero-mobile .product-bundle .bundle-purchase-actions,
body.shirtzero-mobile .product-fbt .bundle-total-price,
body.shirtzero-mobile .product-fbt .bundle-add-all-btn,
body.shirtzero-mobile .product-bundle .bundle-total-price,
body.shirtzero-mobile .product-bundle .bundle-add-all-btn {
	width: 100% !important;
	max-width: 100% !important;
	position: static !important;
}

body.shirtzero-mobile .product-related ul.products,
body.shirtzero-mobile .product-related .products {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: var(--space-sm) !important;
}

@media (max-width: 768px) {
	/* Hero keeps semantic wrapper but stacks naturally on mobile */
	.product-hero {
		display: flex;
		flex-direction: column;
		gap: var(--space-md);
	}

	.product-hero .product-gallery,
	.product-hero .product-summary {
		width: 100%;
	}

	.product-hero .cosplay-product__summary-inner {
		padding: var(--space-md) var(--container-pad) var(--space-lg);
	}

	/* Extensions section spacing tuned for mobile scanability */
	.product-extensions {
		padding-top: var(--space-lg) !important;
	}

	.product-extensions .cosplay-product__extra-inner > section {
		margin-top: var(--space-lg);
		padding-top: var(--space-md);
		border-top: 1px solid var(--color-border);
	}

	.product-extensions .cosplay-product__extra-inner > section:first-child {
		margin-top: 0;
		padding-top: 0;
		border-top: 0;
	}

	/* Bundle/FBT: force summary box below cards on mobile */
	.product-fbt .bundle-purchase-main,
	.product-bundle .bundle-purchase-main,
	.product-fbt .bundle-purchase-main.layout-horizontal,
	.product-bundle .bundle-purchase-main.layout-horizontal {
		display: flex !important;
		flex-direction: column !important;
		gap: var(--space-md) !important;
	}

	.product-fbt .bundle-purchase-products,
	.product-bundle .bundle-purchase-products {
		width: 100% !important;
		max-width: 100% !important;
	}

	.product-fbt .bundle-purchase-actions,
	.product-bundle .bundle-purchase-actions {
		width: 100% !important;
		max-width: 100% !important;
		position: static !important;
	}

	.product-fbt .bundle-total-price,
	.product-fbt .bundle-add-all-btn,
	.product-bundle .bundle-total-price,
	.product-bundle .bundle-add-all-btn {
		width: 100% !important;
	}

	/* Related section grid is controlled separately from tabs now */
	.product-related .related.products ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: var(--space-sm) !important;
	}

	.product-related .related.products ul.products li.product .button {
		margin-inline: var(--space-sm) !important;
	}

	/* Smart recommendations in extensions: avoid clipped controls */
	.product-extensions .smart-recommendations-container {
		overflow: visible !important;
	}

	.product-extensions .smart-rec-nav-arrow {
		top: auto !important;
		bottom: -14px !important;
		transform: none !important;
	}
}

@media (max-width: 480px) {
	.product-related .related.products ul.products {
		grid-template-columns: repeat(2, minmax(0, 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;
	}
}

/* --------------------------------------------------------------------------
   18. Mobile Viewport Unlock Fallback
   Force mobile flow when plugin body class exists but viewport
   is still reported wide (e.g. 1280).
   -------------------------------------------------------------------------- */
html body.shirtzero-mobile {
	max-width: 100% !important;
	overflow-x: clip !important;
}

html body.cosplay-force-mobile-layout {
	max-width: 100% !important;
	overflow-x: clip !important;
}

body.shirtzero-mobile #page,
body.shirtzero-mobile .site,
body.shirtzero-mobile .site-main,
body.shirtzero-mobile .woocommerce-main,
body.shirtzero-mobile .woocommerce-main .container,
body.shirtzero-mobile .cosplay-product,
body.shirtzero-mobile .product-page,
body.shirtzero-mobile .product-hero,
body.shirtzero-mobile .product-hero .product-gallery,
body.shirtzero-mobile .product-hero .product-summary,
body.shirtzero-mobile .cosplay-product__extra-sections,
body.shirtzero-mobile .cosplay-product__details {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	margin-left: auto !important;
	margin-right: auto !important;
	box-sizing: border-box !important;
}

body.cosplay-force-mobile-layout #page,
body.cosplay-force-mobile-layout .site,
body.cosplay-force-mobile-layout .site-main,
body.cosplay-force-mobile-layout .woocommerce-main,
body.cosplay-force-mobile-layout .woocommerce-main .container,
body.cosplay-force-mobile-layout .cosplay-product,
body.cosplay-force-mobile-layout .product-page,
body.cosplay-force-mobile-layout .product-hero,
body.cosplay-force-mobile-layout .product-hero .product-gallery,
body.cosplay-force-mobile-layout .product-hero .product-summary,
body.cosplay-force-mobile-layout .cosplay-product__extra-sections,
body.cosplay-force-mobile-layout .cosplay-product__details {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	margin-left: auto !important;
	margin-right: auto !important;
	box-sizing: border-box !important;
}

body.shirtzero-mobile .woocommerce-main .container,
body.cosplay-force-mobile-layout .woocommerce-main .container {
	padding-left: 8px !important;
	padding-right: 8px !important;
}

body.shirtzero-mobile .cosplay-product__extra-sections,
body.shirtzero-mobile .cosplay-product__details,
body.cosplay-force-mobile-layout .cosplay-product__extra-sections,
body.cosplay-force-mobile-layout .cosplay-product__details {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Hard stop: disable desktop 2-col grid when body is mobile */
body.shirtzero-mobile .product-hero.cosplay-product__top {
	display: block !important;
	grid-template-columns: 1fr !important;
}

body.cosplay-force-mobile-layout .product-hero.cosplay-product__top {
	display: block !important;
	grid-template-columns: 1fr !important;
}

body.shirtzero-mobile .product-hero .product-gallery,
body.shirtzero-mobile .product-hero .product-summary {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
}

body.cosplay-force-mobile-layout .product-hero .product-gallery,
body.cosplay-force-mobile-layout .product-hero .product-summary {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
}

/* --------------------------------------------------------------------------
   19. add-to-cart -c Mobile Overrides (force show sections)
   Plugin mobile CSS hides bundle blocks by default. We keep full sections.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
	body.shirtzero-mobile .product-fbt .bundle-purchase-main,
	body.shirtzero-mobile .product-bundle .bundle-purchase-main,
	body.cosplay-force-mobile-layout .product-fbt .bundle-purchase-main,
	body.cosplay-force-mobile-layout .product-bundle .bundle-purchase-main {
		display: flex !important;
		flex-direction: column !important;
	}

	body.shirtzero-mobile .product-fbt .bundle-purchase-products,
	body.shirtzero-mobile .product-fbt .bundle-purchase-actions,
	body.shirtzero-mobile .product-bundle .bundle-purchase-products,
	body.shirtzero-mobile .product-bundle .bundle-purchase-actions,
	body.cosplay-force-mobile-layout .product-fbt .bundle-purchase-products,
	body.cosplay-force-mobile-layout .product-fbt .bundle-purchase-actions,
	body.cosplay-force-mobile-layout .product-bundle .bundle-purchase-products,
	body.cosplay-force-mobile-layout .product-bundle .bundle-purchase-actions {
		display: block !important;
	}

	/* Market-style mobile bundle layout: horizontal cards + sticky summary bar */
	body.shirtzero-mobile .product-fbt .bundle-purchase-main,
	body.shirtzero-mobile .product-bundle .bundle-purchase-main,
	body.cosplay-force-mobile-layout .product-fbt .bundle-purchase-main,
	body.cosplay-force-mobile-layout .product-bundle .bundle-purchase-main {
		background: rgba(13, 13, 26, 0.94) !important;
		border: 1px solid var(--color-border) !important;
		border-radius: 12px !important;
		padding: 8px 8px 0 !important;
		box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
		overflow: hidden !important;
	}

	body.shirtzero-mobile .product-fbt .bundle-purchase-products,
	body.shirtzero-mobile .product-bundle .bundle-purchase-products,
	body.cosplay-force-mobile-layout .product-fbt .bundle-purchase-products,
	body.cosplay-force-mobile-layout .product-bundle .bundle-purchase-products {
		display: flex !important;
		flex-direction: row !important;
		gap: 10px !important;
		overflow-x: auto !important;
		overflow-y: visible !important;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
		padding: 8px 2px 12px !important;
		background: transparent !important;
	}

	body.shirtzero-mobile .product-fbt .bundle-product-item,
	body.shirtzero-mobile .product-bundle .bundle-product-item,
	body.cosplay-force-mobile-layout .product-fbt .bundle-product-item,
	body.cosplay-force-mobile-layout .product-bundle .bundle-product-item {
		flex: 0 0 36vw !important;
		min-width: 138px !important;
		max-width: 162px !important;
		scroll-snap-align: start;
		position: relative !important;
		padding-right: 0 !important;
	}

	body.shirtzero-mobile .product-fbt .bundle-product-plus,
	body.shirtzero-mobile .product-bundle .bundle-product-plus,
	body.cosplay-force-mobile-layout .product-fbt .bundle-product-plus,
	body.cosplay-force-mobile-layout .product-bundle .bundle-product-plus {
		position: absolute !important;
		left: -22px !important;
		right: auto !important;
		top: 50% !important;
		transform: translateY(-50%) !important;
		flex: 0 0 auto !important;
		align-self: auto !important;
		margin: 0 !important;
		z-index: 5 !important;
	}

	body.shirtzero-mobile .product-fbt .bundle-purchase-actions,
	body.shirtzero-mobile .product-bundle .bundle-purchase-actions,
	body.cosplay-force-mobile-layout .product-fbt .bundle-purchase-actions,
	body.cosplay-force-mobile-layout .product-bundle .bundle-purchase-actions {
		position: sticky !important;
		bottom: 0 !important;
		z-index: 8 !important;
		display: grid !important;
		grid-template-columns: 1fr auto;
		align-items: center !important;
		gap: 10px !important;
		padding: 10px 8px 8px !important;
		margin-top: 0 !important;
		background: rgba(13, 13, 26, 0.96) !important;
		backdrop-filter: blur(10px) !important;
		-webkit-backdrop-filter: blur(10px) !important;
		border: none !important;
		border-top: 1px solid rgba(155, 89, 182, 0.22) !important;
		border-radius: 0 !important;
		box-shadow: none !important;
	}

	body.shirtzero-mobile .product-fbt .bundle-total-price,
	body.shirtzero-mobile .product-bundle .bundle-total-price,
	body.cosplay-force-mobile-layout .product-fbt .bundle-total-price,
	body.cosplay-force-mobile-layout .product-bundle .bundle-total-price {
		margin: 0 !important;
		width: 100% !important;
		padding: 10px 12px !important;
	}

	body.shirtzero-mobile .product-fbt .bundle-add-all-btn,
	body.shirtzero-mobile .product-bundle .bundle-add-all-btn,
	body.cosplay-force-mobile-layout .product-fbt .bundle-add-all-btn,
	body.cosplay-force-mobile-layout .product-bundle .bundle-add-all-btn {
		margin: 0 !important;
		width: auto !important;
		min-width: 138px !important;
	}

	/* Disable plugin's simplified mobile trigger mode on product page */
	body.shirtzero-mobile .product-fbt .bundle-mobile-trigger,
	body.shirtzero-mobile .product-fbt .bundle-mobile-preview,
	body.shirtzero-mobile .product-bundle .bundle-mobile-trigger,
	body.shirtzero-mobile .product-bundle .bundle-mobile-preview,
	body.cosplay-force-mobile-layout .product-fbt .bundle-mobile-trigger,
	body.cosplay-force-mobile-layout .product-fbt .bundle-mobile-preview,
	body.cosplay-force-mobile-layout .product-bundle .bundle-mobile-trigger,
	body.cosplay-force-mobile-layout .product-bundle .bundle-mobile-preview {
		display: none !important;
	}

	/* Ensure related recommendations section is visible */
	body.shirtzero-mobile .product-related,
	body.shirtzero-mobile .product-related .smart-recommendations-container,
	body.cosplay-force-mobile-layout .product-related,
	body.cosplay-force-mobile-layout .product-related .smart-recommendations-container {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
	}

	/* Related products: stable 2-column card grid on mobile */
	body.shirtzero-mobile .product-related .related.products ul.products,
	body.cosplay-force-mobile-layout .product-related .related.products ul.products {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 10px !important;
	}
}

@media (max-width: 480px) {
	body.shirtzero-mobile .product-fbt .bundle-product-item,
	body.shirtzero-mobile .product-bundle .bundle-product-item,
	body.cosplay-force-mobile-layout .product-fbt .bundle-product-item,
	body.cosplay-force-mobile-layout .product-bundle .bundle-product-item {
		flex-basis: 52vw !important;
		min-width: 132px !important;
		max-width: 168px !important;
	}

	body.shirtzero-mobile .product-fbt .bundle-purchase-actions,
	body.shirtzero-mobile .product-bundle .bundle-purchase-actions,
	body.cosplay-force-mobile-layout .product-fbt .bundle-purchase-actions,
	body.cosplay-force-mobile-layout .product-bundle .bundle-purchase-actions {
		grid-template-columns: 1fr !important;
	}

	body.shirtzero-mobile .product-fbt .bundle-add-all-btn,
	body.shirtzero-mobile .product-bundle .bundle-add-all-btn,
	body.cosplay-force-mobile-layout .product-fbt .bundle-add-all-btn,
	body.cosplay-force-mobile-layout .product-bundle .bundle-add-all-btn {
		width: 100% !important;
	}

	body.shirtzero-mobile .product-related .related.products ul.products,
	body.cosplay-force-mobile-layout .product-related .related.products ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

/* Single product: keep related cards 2 columns on mobile (below reviews). */
@media (max-width: 480px) {
	.single-product .product-related .related.products ul.products,
	.single-product .cosplay-product__details .related.products ul.products,
	.single-product.woocommerce div.product .related.products ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

/* --------------------------------------------------------------------------
   15. Mobile Hardening (WooCommerce + plugin surfaces)
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
	.cosplay-product__top {
		gap: var(--space-md);
	}

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

	.cosplay-product form.cart {
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-sm);
	}

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

	.cosplay-product form.cart .quantity input[type='number'] {
		width: 100%;
		max-width: 120px;
		height: 46px;
	}

	.cosplay-product form.cart .single_add_to_cart_button {
		width: 100%;
		min-width: 0;
		height: 48px;
		padding-inline: var(--space-lg);
	}

	.cosplay-product .woocommerce-product-details__short-description {
		font-size: var(--fs-sm);
		padding-bottom: var(--space-md);
		margin-bottom: var(--space-lg);
	}

	.cosplay-product .woocommerce-tabs .panel,
	.cosplay-pro-body .bulk-discount-table-wrapper,
	.cosplay-pro-body .size-va-variation-info,
	.cosplay-pro-body #size-va-variation-info {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.cosplay-pro-body .bundle-modal-content,
	.cosplay-pro-body #bundleModal .bundle-modal-content {
		width: min(94vw, 640px) !important;
		max-height: 88vh !important;
	}
}

@media (max-width: 768px) {
	.cosplay-pro-body .bundle-product-content {
		padding: 10px !important;
	}

	.cosplay-pro-body .bundle-product-title {
		font-size: 12px !important;
		line-height: 1.4 !important;
	}

	.cosplay-pro-body .smart-recommendations-header {
		margin-bottom: var(--space-md) !important;
	}

	.cosplay-pro-body .smart-rec-nav-arrow {
		width: 32px !important;
		height: 32px !important;
	}

	.cosplay-pro-body .floating-cart-panel {
		padding-bottom: calc(env(safe-area-inset-bottom) + 8px) !important;
	}
}

@media (max-width: 480px) {
	.cosplay-product .woocommerce-tabs .panel {
		padding: var(--space-md) !important;
	}

	.cosplay-pro-body .bundle-modal .size-va-custom-fields {
		grid-template-columns: 1fr !important;
	}

	.cosplay-pro-body .bundle-modal .size-va-custom-unit-toggle {
		justify-content: flex-start !important;
	}
}

/* Single product top spacing trim:
   avoid stacked blank area from shell padding + breadcrumb + empty notices. */
.single-product .woocommerce-main {
	padding-top: var(--space-lg);
}

.single-product .woocommerce-main .container {
	gap: var(--space-lg);
}

.single-product .woocommerce-breadcrumb {
	padding: var(--space-xs) 0;
	margin-bottom: var(--space-sm);
}

.single-product .woocommerce-notices-wrapper:empty {
	display: none;
}

@media (max-width: 768px) {
	.single-product .woocommerce-main {
		padding-top: var(--space-md);
	}

	.single-product .woocommerce-main .container {
		gap: var(--space-sm);
	}

	.single-product .woocommerce-breadcrumb {
		padding: 4px 0;
		margin-bottom: 6px;
	}

	.cosplay-product__details .related.products h2,
	.cosplay-product__details .upsells.products h2,
	.woocommerce div.product .related.products h2,
	.woocommerce div.product .upsells.products h2 {
		margin-bottom: var(--space-md);
	}
}

/* Product page render budget: isolate below-the-fold sections */
@supports (content-visibility: auto) {
	.single-product .cosplay-product__extra-sections,
	.single-product .cosplay-product__details,
	.single-product .product-fbt,
	.single-product .product-bundle,
	.single-product .product-related,
	.single-product .smart-recommendations-container,
	.single-product .csp-social-wall,
	.single-product #crp-reviews {
		content-visibility: auto;
		contain-intrinsic-size: 1px 900px;
	}
}

/* --------------------------------------------------------------------------
   Review modal viewport safety
   防止产品页评论弹窗在底部被裁切（尤其是小屏/低视口高度）
   -------------------------------------------------------------------------- */
.single-product #crp-reviews {
	/* 评论插件弹层可能挂在该容器内，避免被 contain/content-visibility 裁切 */
	overflow: visible !important;
	content-visibility: visible !important;
	contain: none !important;
	contain-intrinsic-size: auto !important;
}

.single-product #crp-reviews [class*="review"][class*="modal"][role="dialog"],
.single-product #crp-reviews [class*="review"][class*="popup"][role="dialog"],
.single-product #crp-reviews [class*="review"][class*="dialog"][role="dialog"] {
	position: fixed !important;
	inset: 0 !important;
	display: flex !important;
	align-items: flex-start !important;
	justify-content: center !important;
	padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
		max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)) !important;
	overflow-y: auto !important;
	z-index: 2147483644 !important;
}

.single-product #crp-reviews [class*="review"][class*="modal"] [class*="modal-content"],
.single-product #crp-reviews [class*="review"][class*="popup"] [class*="popup-content"],
.single-product #crp-reviews [class*="review"][class*="dialog"] [class*="dialog-content"] {
	max-height: calc(100dvh - 24px) !important;
	overflow-y: auto !important;
}

@media (max-width: 768px) {
	.single-product #crp-reviews [class*="review"][class*="modal"][role="dialog"],
	.single-product #crp-reviews [class*="review"][class*="popup"][role="dialog"],
	.single-product #crp-reviews [class*="review"][class*="dialog"][role="dialog"] {
		padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right))
			max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)) !important;
	}

	.single-product #crp-reviews [class*="review"][class*="modal"] [class*="modal-content"],
	.single-product #crp-reviews [class*="review"][class*="popup"] [class*="popup-content"],
	.single-product #crp-reviews [class*="review"][class*="dialog"] [class*="dialog-content"] {
		max-height: calc(100dvh - 16px) !important;
	}
}

/* Desktop top-layer guard (bundle/smart-rec hover panels) */
@media (hover: hover) and (pointer: fine) {
	.single-product .product-extensions,
	.single-product .cosplay-product__extra-sections,
	.single-product .cosplay-product__extra-inner,
	.single-product .product-fbt,
	.single-product .product-bundle,
	.single-product .bundle-purchase-container,
	.single-product .bundle-purchase-main,
	.single-product .bundle-purchase-products {
		position: relative;
		overflow: visible !important;
		content-visibility: visible !important;
		contain: none !important;
		contain-intrinsic-size: auto !important;
		z-index: 1;
	}

	.single-product .product-bundle .bundle-product-item,
	.single-product .product-bundle .bundle-product-content,
	.single-product .product-fbt .bundle-product-item,
	.single-product .product-fbt .bundle-product-content {
		position: relative;
		overflow: visible !important;
	}

	.single-product .product-bundle .bundle-product-content:hover,
	.single-product .product-fbt .bundle-product-content:hover {
		/* Keep hover above sibling cards, but never above modal layers. */
		z-index: 30 !important;
	}

	/* Keep image crop while allowing the card itself to overflow. */
	.single-product .product-bundle .bundle-product-image,
	.single-product .product-fbt .bundle-product-image {
		overflow: hidden !important;
	}
}

/* =================================================================
   Unified Quantity UI (Product page + Bundle modal)
   ================================================================= */
.cosplay-pro-body .cosplay-product form.cart .quantity.qty-theme-styled,
.cosplay-pro-body .bundle-modal .quantity.qty-theme-styled,
.cosplay-pro-body .bundle-mobile-modal .quantity.qty-theme-styled,
.cosplay-pro-body .bundle-modal-quantity .quantity.qty-theme-styled,
.cosplay-pro-body .bundle-purchase-container .bundle-quantity-input-container,
.cosplay-pro-body .bundle-mobile-modal .bundle-quantity-input-container {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 0 !important;
	height: 44px !important;
	width: 134px !important;
	min-width: 134px !important;
	max-width: 134px !important;
	flex: 0 0 134px !important;
	background: rgba(18, 16, 32, 0.92) !important;
	border: 1px solid rgba(155, 89, 182, 0.42) !important;
	border-radius: 12px !important;
	overflow: hidden !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 6px 16px rgba(0, 0, 0, 0.2) !important;
}

.cosplay-pro-body .quantity.qty-theme-styled .qty-theme-btn,
.cosplay-pro-body .quantity.qty-theme-styled .plus,
.cosplay-pro-body .quantity.qty-theme-styled .minus,
.cosplay-pro-body .bundle-purchase-container .bundle-quantity-minus,
.cosplay-pro-body .bundle-purchase-container .bundle-quantity-plus,
.cosplay-pro-body .bundle-mobile-modal .bundle-quantity-minus,
.cosplay-pro-body .bundle-mobile-modal .bundle-quantity-plus {
	width: 38px !important;
	flex: 0 0 38px !important;
	min-width: 38px !important;
	max-width: 38px !important;
	height: 44px !important;
	border: none !important;
	border-radius: 0 !important;
	background: rgba(155, 89, 182, 0.14) !important;
	color: rgba(238, 228, 255, 0.96) !important;
	font-size: 20px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
}

.cosplay-pro-body .quantity.qty-theme-styled .qty-theme-btn:hover,
.cosplay-pro-body .quantity.qty-theme-styled .plus:hover,
.cosplay-pro-body .quantity.qty-theme-styled .minus:hover,
.cosplay-pro-body .bundle-purchase-container .bundle-quantity-minus:hover,
.cosplay-pro-body .bundle-purchase-container .bundle-quantity-plus:hover,
.cosplay-pro-body .bundle-mobile-modal .bundle-quantity-minus:hover,
.cosplay-pro-body .bundle-mobile-modal .bundle-quantity-plus:hover {
	background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)) !important;
	color: #fff !important;
}

.cosplay-pro-body .quantity.qty-theme-styled .qty-theme-btn:active,
.cosplay-pro-body .quantity.qty-theme-styled .plus:active,
.cosplay-pro-body .quantity.qty-theme-styled .minus:active,
.cosplay-pro-body .bundle-purchase-container .bundle-quantity-minus:active,
.cosplay-pro-body .bundle-purchase-container .bundle-quantity-plus:active,
.cosplay-pro-body .bundle-mobile-modal .bundle-quantity-minus:active,
.cosplay-pro-body .bundle-mobile-modal .bundle-quantity-plus:active {
	transform: scale(0.96) !important;
}

.cosplay-pro-body .quantity.qty-theme-styled .qty,
.cosplay-pro-body .quantity.qty-theme-styled input.qty,
.cosplay-pro-body .bundle-modal-quantity .quantity input.qty,
.cosplay-pro-body .cosplay-product form.cart .quantity input.qty,
.cosplay-pro-body .bundle-purchase-container .bundle-quantity-input,
.cosplay-pro-body .bundle-mobile-modal .bundle-quantity-input {
	width: 58px !important;
	flex: 0 0 58px !important;
	min-width: 58px !important;
	max-width: 58px !important;
	height: 44px !important;
	border: none !important;
	border-left: 1px solid rgba(255, 255, 255, 0.06) !important;
	border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
	border-radius: 0 !important;
	background: rgba(10, 9, 20, 0.86) !important;
	color: #f3ebff !important;
	text-align: center !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	box-shadow: none !important;
	appearance: textfield !important;
	-moz-appearance: textfield !important;
	-webkit-appearance: none !important;
}

@media (max-width: 768px) {
	.cosplay-pro-body .cosplay-product form.cart .quantity.qty-theme-styled,
	.cosplay-pro-body .bundle-modal .quantity.qty-theme-styled,
	.cosplay-pro-body .bundle-mobile-modal .quantity.qty-theme-styled,
	.cosplay-pro-body .bundle-modal-quantity .quantity.qty-theme-styled,
	.cosplay-pro-body .bundle-purchase-container .bundle-quantity-input-container,
	.cosplay-pro-body .bundle-mobile-modal .bundle-quantity-input-container {
		width: 126px !important;
		min-width: 126px !important;
		max-width: 126px !important;
		flex-basis: 126px !important;
	}

	.cosplay-pro-body .quantity.qty-theme-styled .qty-theme-btn,
	.cosplay-pro-body .quantity.qty-theme-styled .plus,
	.cosplay-pro-body .quantity.qty-theme-styled .minus,
	.cosplay-pro-body .bundle-purchase-container .bundle-quantity-minus,
	.cosplay-pro-body .bundle-purchase-container .bundle-quantity-plus,
	.cosplay-pro-body .bundle-mobile-modal .bundle-quantity-minus,
	.cosplay-pro-body .bundle-mobile-modal .bundle-quantity-plus {
		width: 36px !important;
		min-width: 36px !important;
		max-width: 36px !important;
		flex-basis: 36px !important;
	}

	.cosplay-pro-body .quantity.qty-theme-styled .qty,
	.cosplay-pro-body .quantity.qty-theme-styled input.qty,
	.cosplay-pro-body .bundle-modal-quantity .quantity input.qty,
	.cosplay-pro-body .cosplay-product form.cart .quantity input.qty,
	.cosplay-pro-body .bundle-purchase-container .bundle-quantity-input,
	.cosplay-pro-body .bundle-mobile-modal .bundle-quantity-input {
		width: 54px !important;
		min-width: 54px !important;
		max-width: 54px !important;
		flex-basis: 54px !important;
	}
}

.cosplay-pro-body .quantity.qty-theme-styled .qty:focus,
.cosplay-pro-body .quantity.qty-theme-styled input.qty:focus,
.cosplay-pro-body .bundle-modal-quantity .quantity input.qty:focus,
.cosplay-pro-body .cosplay-product form.cart .quantity input.qty:focus,
.cosplay-pro-body .bundle-purchase-container .bundle-quantity-input:focus,
.cosplay-pro-body .bundle-mobile-modal .bundle-quantity-input:focus {
	outline: none !important;
	box-shadow: inset 0 0 0 1px rgba(155, 89, 182, 0.7) !important;
}

.cosplay-pro-body .quantity.qty-theme-styled .qty::-webkit-outer-spin-button,
.cosplay-pro-body .quantity.qty-theme-styled .qty::-webkit-inner-spin-button,
.cosplay-pro-body .bundle-modal-quantity .quantity input.qty::-webkit-outer-spin-button,
.cosplay-pro-body .bundle-modal-quantity .quantity input.qty::-webkit-inner-spin-button,
.cosplay-pro-body .cosplay-product form.cart .quantity input.qty::-webkit-outer-spin-button,
.cosplay-pro-body .cosplay-product form.cart .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none !important;
	margin: 0 !important;
}

/* --------------------------------------------------------------------------
   Mobile Bundle Modal: larger viewport usage + tighter spacing
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
	.cosplay-pro-body .bundle-mobile-modal.active,
	.cosplay-pro-body #bundleModal.bundle-mobile-modal.active,
	.cosplay-pro-body #bundleModal.active {
		display: flex !important;
		align-items: flex-end !important;
		justify-content: center !important;
	}

	.cosplay-pro-body .bundle-modal .bundle-modal-content,
	.cosplay-pro-body .bundle-mobile-modal .bundle-modal-content,
	.cosplay-pro-body #bundleModal .bundle-modal-content {
		width: min(98vw, 780px) !important;
		max-width: min(98vw, 780px) !important;
		height: 96dvh !important;
		max-height: 96dvh !important;
		border-radius: 14px 14px 0 0 !important;
		left: 50% !important;
		right: auto !important;
		bottom: max(0px, env(safe-area-inset-bottom)) !important;
		transform: translateX(-50%) !important;
		margin: 0 !important;
		overflow: hidden !important;
	}

	.cosplay-pro-body .bundle-modal .bundle-modal-header,
	.cosplay-pro-body #bundleModal .bundle-modal-header {
		padding: 12px 14px !important;
	}

	.cosplay-pro-body .bundle-modal .bundle-modal-products,
	.cosplay-pro-body #bundleModal .bundle-modal-products,
	.cosplay-pro-body .bundle-modal .bundle-modal-body,
	.cosplay-pro-body #bundleModal .bundle-modal-body {
		padding-left: 10px !important;
		padding-right: 10px !important;
	}

	.cosplay-pro-body .bundle-modal .bundle-modal-product-item,
	.cosplay-pro-body #bundleModal .bundle-modal-product-item {
		padding: 10px 8px !important;
		gap: 10px !important;
	}

	.cosplay-pro-body .bundle-modal .bundle-modal-variations,
	.cosplay-pro-body #bundleModal .bundle-modal-variations {
		margin-bottom: 8px !important;
	}

	.cosplay-pro-body .bundle-modal .variation-row,
	.cosplay-pro-body #bundleModal .variation-row {
		margin-bottom: 10px !important;
	}

	.cosplay-pro-body .bundle-modal .bundle-modal-actions,
	.cosplay-pro-body #bundleModal .bundle-modal-actions {
		padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) !important;
	}
}

@media (max-width: 480px) {
	.cosplay-pro-body .bundle-modal .bundle-modal-content,
	.cosplay-pro-body .bundle-mobile-modal .bundle-modal-content,
	.cosplay-pro-body #bundleModal .bundle-modal-content {
		width: 99vw !important;
		max-width: 99vw !important;
		height: 97dvh !important;
		max-height: 97dvh !important;
		border-radius: 12px 12px 0 0 !important;
	}

	.cosplay-pro-body .bundle-modal .bundle-modal-header,
	.cosplay-pro-body #bundleModal .bundle-modal-header {
		padding: 10px 12px !important;
	}

	.cosplay-pro-body .bundle-modal .bundle-modal-product-item,
	.cosplay-pro-body #bundleModal .bundle-modal-product-item {
		padding: 8px 6px !important;
		gap: 8px !important;
	}
}

/* --------------------------------------------------------------------------
   Bundle / combo modal: 桌面 — 属性名在左、选项同行（多行选项时名称顶对齐，不垂直居中）
   插件 .bundle-mobile-modal 全屏抽屉 — 始终名在上、选项在下（与默认一致）
   窄屏 .bundle-modal — 同上纵向堆叠
   -------------------------------------------------------------------------- */
.cosplay-pro-body .bundle-modal .variation-row,
.cosplay-pro-body #bundleModal .variation-row,
.cosplay-pro-body .bundle-mobile-modal .bundle-modal .variation-row {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	/* 多行变体按钮时：标签与第一行选项顶部对齐，避免整块居中显得「飘在中间」 */
	align-items: flex-start !important;
	gap: 8px 14px !important;
}

.cosplay-pro-body .bundle-modal .variation-label,
.cosplay-pro-body #bundleModal .variation-label {
	flex: 0 0 auto !important;
	align-self: flex-start !important;
	width: auto !important;
	max-width: min(42%, 10rem) !important;
	margin-bottom: 0 !important;
	line-height: 1.35 !important;
	text-align: left !important;
	/* 与常见 min-height 变体按钮的第一行文字大致齐平 */
	padding-top: 0.35em !important;
}

.cosplay-pro-body .bundle-modal .variation-radios,
.cosplay-pro-body #bundleModal .variation-radios {
	flex: 1 1 160px !important;
	min-width: 0 !important;
	margin-bottom: 0 !important;
}

/* 插件移动端抽屉（#bundleModal 等元素会带 .bundle-mobile-modal）：始终纵向，与默认一致 */
.cosplay-pro-body .bundle-mobile-modal .variation-row,
.cosplay-pro-body #bundleModal.bundle-mobile-modal .variation-row,
.cosplay-pro-body .bundle-modal.bundle-mobile-modal .variation-row {
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	align-items: stretch !important;
	gap: 6px !important;
}

.cosplay-pro-body .bundle-mobile-modal .variation-label,
.cosplay-pro-body #bundleModal.bundle-mobile-modal .variation-label,
.cosplay-pro-body .bundle-modal.bundle-mobile-modal .variation-label {
	width: 100% !important;
	max-width: none !important;
	margin: 0 0 2px !important;
	padding-top: 0 !important;
}

.cosplay-pro-body .bundle-mobile-modal .variation-radios,
.cosplay-pro-body #bundleModal.bundle-mobile-modal .variation-radios,
.cosplay-pro-body .bundle-modal.bundle-mobile-modal .variation-radios {
	flex: 0 1 auto !important;
	width: 100% !important;
}

@media (max-width: 768px) {
	/* 桌面弹窗在窄屏上也改为纵向，与手机默认一致 */
	.cosplay-pro-body .bundle-modal:not(.bundle-mobile-modal) .variation-row,
	.cosplay-pro-body #bundleModal:not(.bundle-mobile-modal) .variation-row {
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		align-items: stretch !important;
		align-content: flex-start !important;
		gap: 6px !important;
	}

	.cosplay-pro-body .bundle-modal:not(.bundle-mobile-modal) .variation-label,
	.cosplay-pro-body #bundleModal:not(.bundle-mobile-modal) .variation-label {
		width: 100% !important;
		max-width: none !important;
		margin: 0 0 2px !important;
		padding-top: 0 !important;
	}

	.cosplay-pro-body .bundle-modal:not(.bundle-mobile-modal) .variation-radios,
	.cosplay-pro-body #bundleModal:not(.bundle-mobile-modal) .variation-radios {
		flex: 0 1 auto !important;
		width: 100% !important;
	}
}

/* --------------------------------------------------------------------------
   Mobile Bundle Modal Typography + Variation + Custom Size polish
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
	.cosplay-pro-body .bundle-modal,
	.cosplay-pro-body #bundleModal {
		font-size: 14px !important;
		line-height: 1.45 !important;
	}

	.cosplay-pro-body .bundle-modal .bundle-modal-title,
	.cosplay-pro-body #bundleModal .bundle-modal-title {
		font-size: 18px !important;
		line-height: 1.25 !important;
		letter-spacing: 0.01em !important;
	}

	.cosplay-pro-body .bundle-modal .bundle-modal-product-title,
	.cosplay-pro-body #bundleModal .bundle-modal-product-title {
		font-size: 15px !important;
		line-height: 1.35 !important;
		margin-bottom: 4px !important;
	}

	.cosplay-pro-body .bundle-modal .bundle-modal-product-price,
	.cosplay-pro-body #bundleModal .bundle-modal-product-price {
		font-size: 15px !important;
		line-height: 1.2 !important;
	}

	.cosplay-pro-body .bundle-modal .bundle-modal-product-info p,
	.cosplay-pro-body #bundleModal .bundle-modal-product-info p,
	.cosplay-pro-body .bundle-modal .woocommerce-variation-description p,
	.cosplay-pro-body #bundleModal .woocommerce-variation-description p {
		font-size: 13px !important;
		line-height: 1.45 !important;
		color: rgba(235, 226, 250, 0.82) !important;
		margin: 0 0 8px !important;
	}

	.cosplay-pro-body .bundle-modal .variation-label,
	.cosplay-pro-body #bundleModal .variation-label {
		font-size: 13px !important;
		font-weight: 600 !important;
		color: rgba(245, 236, 255, 0.95) !important;
		margin: 0 0 4px !important;
		width: 100% !important;
	}

	.cosplay-pro-body .bundle-modal .variation-radios,
	.cosplay-pro-body #bundleModal .variation-radios {
		gap: 6px !important;
	}

	.cosplay-pro-body .bundle-modal .variation-button,
	.cosplay-pro-body #bundleModal .variation-button {
		min-height: 34px !important;
		padding: 7px 10px !important;
		border-radius: 8px !important;
		font-size: 12px !important;
		line-height: 1.2 !important;
		letter-spacing: 0.02em !important;
	}

	.cosplay-pro-body .bundle-modal .bundle-modal-variations select,
	.cosplay-pro-body #bundleModal .bundle-modal-variations select,
	.cosplay-pro-body .bundle-modal .variation-row select,
	.cosplay-pro-body #bundleModal .variation-row select {
		height: 38px !important;
		padding: 7px 10px !important;
		border-radius: 8px !important;
		font-size: 13px !important;
	}

	.cosplay-pro-body .bundle-modal .size-va-custom-size-form,
	.cosplay-pro-body #bundleModal .size-va-custom-size-form,
	.cosplay-pro-body .bundle-modal .custom-size-form-container,
	.cosplay-pro-body #bundleModal .custom-size-form-container {
		padding: 5px !important;
		margin: 3px 0 !important;
		border-radius: 10px !important;
	}

	.cosplay-pro-body .bundle-modal .size-va-custom-form-title,
	.cosplay-pro-body #bundleModal .size-va-custom-form-title,
	.cosplay-pro-body .bundle-modal .size-va-custom-size-form h4,
	.cosplay-pro-body #bundleModal .size-va-custom-size-form h4 {
		font-size: 14px !important;
		padding-bottom: 8px !important;
		margin-bottom: 6px !important;
	}

	.cosplay-pro-body .bundle-modal .size-va-custom-form-desc,
	.cosplay-pro-body #bundleModal .size-va-custom-form-desc,
	.cosplay-pro-body .bundle-modal .size-va-custom-form-hint,
	.cosplay-pro-body #bundleModal .size-va-custom-form-hint {
		font-size: 12px !important;
		line-height: 1.4 !important;
		padding: 8px 10px !important;
	}

	.cosplay-pro-body .bundle-modal .size-va-custom-fields,
	.cosplay-pro-body #bundleModal .size-va-custom-fields {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		padding: 10px !important;
		gap: 8px !important;
		border-radius: 8px !important;
	}

	.cosplay-pro-body .bundle-modal .size-va-field-group label,
	.cosplay-pro-body #bundleModal .size-va-field-group label {
		font-size: 11px !important;
		font-weight: 600 !important;
		text-transform: none !important;
		letter-spacing: 0 !important;
	}

	.cosplay-pro-body .bundle-modal .size-va-custom-input,
	.cosplay-pro-body #bundleModal .size-va-custom-input,
	.cosplay-pro-body .bundle-modal #size_va_use_date,
	.cosplay-pro-body #bundleModal #size_va_use_date,
	.cosplay-pro-body .bundle-modal input[name="size_va_use_date"],
	.cosplay-pro-body #bundleModal input[name="size_va_use_date"],
	.cosplay-pro-body .bundle-modal .size-va-use-date-input,
	.cosplay-pro-body #bundleModal .size-va-use-date-input,
	.cosplay-pro-body .bundle-modal #size_va_special_instruction,
	.cosplay-pro-body #bundleModal #size_va_special_instruction {
		font-size: 13px !important;
		min-height: 38px !important;
		padding: 8px 10px !important;
		border-radius: 8px !important;
	}

	.cosplay-pro-body .bundle-modal .size-va-custom-unit-toggle label,
	.cosplay-pro-body #bundleModal .size-va-custom-unit-toggle label {
		font-size: 11px !important;
		padding: 6px 10px !important;
		min-height: 30px !important;
	}

	.cosplay-pro-body .bundle-modal .size-va-variation-info table th,
	.cosplay-pro-body .bundle-modal .size-va-variation-info table td,
	.cosplay-pro-body #bundleModal .size-va-variation-info table th,
	.cosplay-pro-body #bundleModal .size-va-variation-info table td {
		font-size: 12px !important;
		padding: 6px 8px !important;
	}
}

@media (max-width: 480px) {
	.cosplay-pro-body .bundle-modal .bundle-modal-title,
	.cosplay-pro-body #bundleModal .bundle-modal-title {
		font-size: 16px !important;
	}

	.cosplay-pro-body .bundle-modal .bundle-modal-product-title,
	.cosplay-pro-body #bundleModal .bundle-modal-product-title {
		font-size: 14px !important;
	}

	.cosplay-pro-body .bundle-modal .bundle-modal-product-price,
	.cosplay-pro-body #bundleModal .bundle-modal-product-price {
		font-size: 14px !important;
	}

	.cosplay-pro-body .bundle-modal .variation-button,
	.cosplay-pro-body #bundleModal .variation-button {
		font-size: 11px !important;
		padding: 6px 8px !important;
		min-height: 32px !important;
	}

	.cosplay-pro-body .bundle-modal .size-va-custom-input,
	.cosplay-pro-body #bundleModal .size-va-custom-input,
	.cosplay-pro-body .bundle-modal #size_va_use_date,
	.cosplay-pro-body #bundleModal #size_va_use_date,
	.cosplay-pro-body .bundle-modal input[name="size_va_use_date"],
	.cosplay-pro-body #bundleModal input[name="size_va_use_date"] {
		font-size: 12px !important;
		min-height: 36px !important;
		padding: 7px 9px !important;
	}

	.cosplay-pro-body .bundle-modal .size-va-custom-fields,
	.cosplay-pro-body #bundleModal .size-va-custom-fields {
		grid-template-columns: 1fr !important;
	}
}

/* --------------------------------------------------------------------------
   Final conflict guard: avoid theme CSS overriding plugin modal fields
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
	.cosplay-pro-body .bundle-modal .size-va-custom-fields,
	.cosplay-pro-body #bundleModal .size-va-custom-fields,
	.cosplay-pro-body .bundle-mobile-modal .size-va-custom-fields {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 390px) {
	.cosplay-pro-body .bundle-modal .size-va-custom-fields,
	.cosplay-pro-body #bundleModal .size-va-custom-fields,
	.cosplay-pro-body .bundle-mobile-modal .size-va-custom-fields {
		grid-template-columns: 1fr !important;
	}
}

/* Related-products quick view: attribute label left, select same row */
html body.cosplay-pro-body .smart-rec-quick-view-overlay .smart-rec-variation-option {
	flex-direction: row !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	gap: 8px 14px !important;
}

html body.cosplay-pro-body .smart-rec-quick-view-overlay .smart-rec-variation-option label {
	flex: 0 0 auto !important;
	max-width: min(42%, 10rem) !important;
	margin: 0 !important;
	white-space: normal !important;
}

html body.cosplay-pro-body .smart-rec-quick-view-overlay .smart-rec-variation-select {
	flex: 1 1 160px !important;
	min-width: 0 !important;
}

/* --------------------------------------------------------------------------
   Mobile Quick View redesign (smart recommendations)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
	html body .smart-rec-quick-view-overlay {
		padding: 10px !important;
		align-items: center !important;
		justify-content: center !important;
		background: rgba(8, 8, 18, 0.74) !important;
		backdrop-filter: blur(4px) !important;
	}

	/* 变体：手机端标签在上、下拉/选项整宽在下，避免多行选项旁标签垂直居中 */
	html body.cosplay-pro-body .smart-rec-quick-view-overlay .smart-rec-variation-option {
		flex-direction: column !important;
		align-items: stretch !important;
		flex-wrap: nowrap !important;
		gap: 6px !important;
	}

	html body.cosplay-pro-body .smart-rec-quick-view-overlay .smart-rec-variation-option label {
		max-width: none !important;
		width: 100% !important;
		flex: 0 0 auto !important;
	}

	html body.cosplay-pro-body .smart-rec-quick-view-overlay .smart-rec-variation-select {
		flex: 0 1 auto !important;
		width: 100% !important;
		min-width: 0 !important;
	}

	html body .smart-rec-quick-view-modal {
		width: 100% !important;
		max-width: min(94vw, 720px) !important;
		margin: 0 !important;
		border-radius: 14px !important;
		background: var(--color-surface, #16162b) !important;
		border: 1px solid var(--color-border, #2b2b49) !important;
		box-shadow: 0 14px 44px rgba(0, 0, 0, 0.48) !important;
		max-height: 92dvh !important;
		transform: none !important;
	}

	html body .smart-rec-quick-view-content {
		display: block !important;
		max-height: calc(92dvh - 44px) !important;
		overflow-y: auto !important;
		overflow-x: hidden !important;
		-webkit-overflow-scrolling: touch !important;
		overscroll-behavior: contain !important;
		background: transparent !important;
	}

	html body .smart-rec-qv-images {
		padding: 10px 10px 8px !important;
		min-height: 0 !important;
		max-height: none !important;
		background: var(--color-bg-alt, #0f1022) !important;
		border-radius: 12px 12px 0 0 !important;
		overflow: visible !important;
	}

	html body .smart-rec-qv-main-image {
		aspect-ratio: auto !important;
		min-height: 0 !important;
		height: auto !important;
		max-height: 42dvh !important;
		padding: 8px !important;
		background: var(--color-surface, #16162b) !important;
		border: 1px solid var(--color-border, #2b2b49) !important;
		border-radius: 10px !important;
		overflow: hidden !important;
		touch-action: pan-y pinch-zoom !important;
	}

	html body .smart-rec-qv-main-image img {
		width: 100% !important;
		height: auto !important;
		max-height: 40dvh !important;
		object-fit: contain !important;
		object-position: center center !important;
	}

	html body .smart-rec-qv-gallery {
		display: flex !important;
		gap: 8px !important;
		padding: 8px 2px 2px !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		-webkit-overflow-scrolling: touch !important;
		scroll-snap-type: x proximity !important;
		touch-action: pan-x !important;
	}

	html body .smart-rec-qv-thumb {
		flex: 0 0 46px !important;
		width: 46px !important;
		height: 46px !important;
		border-radius: 8px !important;
		scroll-snap-align: start !important;
	}

	html body .smart-rec-qv-info {
		padding: 12px 12px calc(12px + env(safe-area-inset-bottom)) !important;
		overflow: visible !important;
		background: var(--color-surface, #16162b) !important;
	}

	html body .smart-rec-qv-title {
		font-size: 15px !important;
		line-height: 1.32 !important;
		margin: 0 0 6px !important;
		color: var(--color-text-heading, #f2efff) !important;
	}

	html body .smart-rec-qv-price {
		color: var(--color-primary-light, #be86df) !important;
		font-size: 18px !important;
		margin-bottom: 10px !important;
	}

	html body .smart-rec-qv-description {
		line-clamp: 4 !important;
		-webkit-line-clamp: 4 !important;
		line-height: 1.45 !important;
		color: var(--color-text-muted, #a4a2c4) !important;
	}

	html body .smart-rec-qv-actions {
		position: sticky !important;
		bottom: 0 !important;
		z-index: 3 !important;
		padding-top: 10px !important;
		background: linear-gradient(180deg, rgba(22, 22, 43, 0), rgba(22, 22, 43, 0.94) 28%, rgba(22, 22, 43, 1) 100%) !important;
	}

	html body .smart-rec-qv-add-to-cart,
	html body .smart-rec-qv-select-options,
	html body .smart-rec-qv-view-product {
		min-height: 36px !important;
		font-size: 12px !important;
		border-radius: 8px !important;
	}
}

/* ══════════════════════════════════════════════════════════════════════════
   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 — 与插件 3:4 框一致，完整显示竖版商品图 */
.cosplay-pro-body .bundle-product-image {
	min-height: 0 !important;
	overflow: hidden !important;
	position: relative !important;
	max-height: 340px !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 picture {
	display: contents !important;
}

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

/* 单品页 FBT：再抬一层特异性，防止其它表对 .woocommerce img / picture 的 cover 规则偶发压过 */
body.single-product.cosplay-pro-body .product-fbt .bundle-product-image img,
body.single-product.cosplay-pro-body .product-fbt .bundle-product-image picture img,
body.single-product.cosplay-pro-body .product-bundle .bundle-purchase-container .bundle-product-image img,
body.single-product.cosplay-pro-body .product-bundle .bundle-purchase-container .bundle-product-image picture img {
	object-fit: contain !important;
	object-position: center center !important;
	aspect-ratio: unset !important;
}

.cosplay-pro-body .bundle-product-content:hover .bundle-product-image img,
.cosplay-pro-body .bundle-product-content:hover .bundle-product-image picture 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 — 与 FBT 卡片一致，避免 cover 裁切全身图 --- */
.cosplay-pro-body .bundle-modal-product-image img {
	object-fit: contain !important;
	object-position: center center !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 236px !important;
	min-width: 236px !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;
	aspect-ratio: 3 / 4 !important;
	height: auto !important;
	min-height: 300px !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. */
.cosplay-pro-body .smart-recommendation-item:hover .smart-rec-item-image {
	aspect-ratio: 3 / 4 !important;
	height: auto !important;
	min-height: 320px !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;
}

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

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

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

/* --- Bundle Modal: Custom Size Data Display (main product) --- */
.cosplay-pro-body .bundle-modal .custom-size-data-display {
	background: var(--color-surface) !important;
	border: 1px solid var(--color-border) !important;
	border-radius: 8px !important;
	color: var(--color-text) !important;
}

.cosplay-pro-body .bundle-modal .custom-size-data-display strong {
	color: var(--color-primary-light) !important;
}

.cosplay-pro-body .bundle-modal .custom-size-data-display .custom-size-variation-id {
	color: var(--color-text-muted) !important;
}

/* --- Bundle Modal: Size VA forms (custom size input) --- */
.cosplay-pro-body .bundle-modal .custom-size-form-container,
.cosplay-pro-body .bundle-modal .size-va-form-container {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 0 !important;
}

.cosplay-pro-body .bundle-modal .size-chart-button {
	background: var(--color-surface) !important;
	color: var(--color-text) !important;
	border-color: var(--color-border) !important;
}

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

.cosplay-pro-body .bundle-modal .bundle-modal-header-warning {
	background: rgba(155, 89, 182, 0.12) !important;
	color: var(--color-primary-light) !important;
	border-color: rgba(155, 89, 182, 0.3) !important;
	border-left-color: var(--color-primary) !important;
}

.cosplay-pro-body .bundle-modal .custom-size-form label {
	color: var(--color-text) !important;
}

.cosplay-pro-body .bundle-modal .custom-size-form input[type="text"],
.cosplay-pro-body .bundle-modal .custom-size-form input[type="number"] {
	background: var(--color-bg-alt) !important;
	border-color: var(--color-border) !important;
	color: var(--color-text) !important;
}

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

.cosplay-pro-body .bundle-modal .custom-size-form .unit-switch {
	background: var(--color-surface-hover) !important;
	border-color: var(--color-border) !important;
	color: var(--color-text) !important;
}

.cosplay-pro-body .bundle-modal .custom-size-form .unit-switch.active {
	background: var(--color-primary) !important;
	border-color: var(--color-primary) !important;
	color: #fff !important;
}

.cosplay-pro-body .bundle-modal .use-date-field {
	background: var(--color-surface) !important;
	border-color: var(--color-border) !important;
}

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

.cosplay-pro-body .bundle-modal .use-date-field input[type="text"],
.cosplay-pro-body .bundle-modal .use-date-field input[type="date"] {
	background: var(--color-bg-alt) !important;
	border-color: var(--color-border) !important;
	color: var(--color-text) !important;
}

.cosplay-pro-body .bundle-modal .use-date-field input:focus {
	border-color: var(--color-primary) !important;
	box-shadow: 0 0 0 2px rgba(155, 89, 182, 0.2) !important;
}

.cosplay-pro-body .bundle-modal .use-date-field input::-webkit-calendar-picker-indicator {
	filter: invert(1) !important;
}

.cosplay-pro-body .bundle-modal .size-va-variation-info,
.cosplay-pro-body .bundle-modal #size-va-variation-info {
	background: var(--color-surface) !important;
	border: 1px solid var(--color-border) !important;
	border-radius: 8px !important;
	color: var(--color-text) !important;
}

.cosplay-pro-body .bundle-modal .size-va-variation-info table {
	border-collapse: collapse !important;
	width: 100% !important;
}

.cosplay-pro-body .bundle-modal .size-va-variation-info table th {
	background: var(--color-surface-hover) !important;
	color: var(--color-text-heading) !important;
	border: 1px solid var(--color-border) !important;
	padding: 8px 12px !important;
	font-weight: 600 !important;
}

.cosplay-pro-body .bundle-modal .size-va-variation-info table td {
	background: var(--color-surface) !important;
	color: var(--color-text) !important;
	border: 1px solid var(--color-border) !important;
	padding: 8px 12px !important;
}

.cosplay-pro-body .bundle-modal .size-va-variation-info table tr:hover td {
	background: var(--color-surface-hover) !important;
}

.cosplay-pro-body .bundle-modal .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 .bundle-modal .size-va-custom-size-form {
	background: var(--color-surface) !important;
	border: 1px solid var(--color-border) !important;
	border-radius: 12px !important;
	color: var(--color-text) !important;
	padding: 20px !important;
	margin: 12px 0 !important;
}

.cosplay-pro-body .bundle-modal .size-va-custom-size-form h4,
.cosplay-pro-body .bundle-modal .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 .bundle-modal .size-va-custom-form-desc {
	color: var(--color-text-muted) !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
}

.cosplay-pro-body .bundle-modal .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 .bundle-modal .size-va-measure-guide {
	color: var(--color-primary-light) !important;
	text-decoration: underline !important;
}

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

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

.cosplay-pro-body .bundle-modal .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 .bundle-modal .size-va-field-group label .unit-text,
.cosplay-pro-body .bundle-modal .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 .bundle-modal .size-va-field-group label .required {
	color: var(--color-primary-light) !important;
}

.cosplay-pro-body .bundle-modal .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 .bundle-modal .size-va-custom-input::placeholder {
	color: var(--color-text-muted) !important;
	opacity: 0.5 !important;
}

.cosplay-pro-body .bundle-modal .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 .bundle-modal .size-va-custom-input:hover:not(:focus) {
	border-color: rgba(155, 89, 182, 0.4) !important;
}

.cosplay-pro-body .bundle-modal .size-va-use-date-field {
	background: var(--color-surface) !important;
	border: 1px solid var(--color-border) !important;
	border-radius: 8px !important;
	padding: 14px 16px !important;
	margin-top: 12px !important;
}

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

.cosplay-pro-body .bundle-modal .size-va-use-date-field .required {
	color: var(--color-primary-light) !important;
}

/*
 * 组合产品弹窗里的 Use Date：HTML 需与 Size VA 一致（wrapper → field → use-date-input →
 * date-input-wrapper → input + 图标 + overlay），但插件/主题各自给 wrapper、field 加了卡片边框，
 * 叠在「整个定制尺寸」大卡片上就会像三层盒子。以下仅针对 .size-va-use-date-bundle 去掉中间层视觉边框，
 * 只保留最外层 .size-va-custom-size-form 与真正的 input 各一圈。
 */
.cosplay-pro-body .bundle-modal .size-va-use-date-field-wrapper.size-va-use-date-bundle,
.cosplay-pro-body #bundleModal .size-va-use-date-field-wrapper.size-va-use-date-bundle {
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 16px 0 0 !important;
}

.cosplay-pro-body .bundle-modal .size-va-use-date-field-wrapper.size-va-use-date-bundle .size-va-use-date-field,
.cosplay-pro-body #bundleModal .size-va-use-date-field-wrapper.size-va-use-date-bundle .size-va-use-date-field {
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

.cosplay-pro-body .bundle-modal .size-va-use-date-field-wrapper.size-va-use-date-bundle .size-va-use-date-input,
.cosplay-pro-body #bundleModal .size-va-use-date-field-wrapper.size-va-use-date-bundle .size-va-use-date-input {
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
}

.cosplay-pro-body .bundle-modal .size-va-date-input-overlay,
.cosplay-pro-body #bundleModal .size-va-date-input-overlay {
	display: block !important;
	pointer-events: auto !important;
	z-index: 4 !important;
}

/* 与 Size VA 一致：原生日历控件铺满输入区（WebKit），点击任意处打开；图标用右侧 SVG */
.cosplay-pro-body .bundle-modal .size-va-use-date-field input[type="date"],
.cosplay-pro-body #bundleModal .size-va-use-date-field input[type="date"] {
	cursor: pointer !important;
	position: relative !important;
	z-index: 1 !important;
	direction: ltr !important;
	-webkit-appearance: textfield !important;
	appearance: textfield !important;
}

.cosplay-pro-body .bundle-modal .size-va-use-date-field input[type="date"]::-webkit-datetime-edit,
.cosplay-pro-body #bundleModal .size-va-use-date-field input[type="date"]::-webkit-datetime-edit {
	direction: ltr !important;
}

.cosplay-pro-body .bundle-modal .size-va-use-date-field input[type="date"]::-webkit-inner-spin-button,
.cosplay-pro-body .bundle-modal .size-va-use-date-field input[type="date"]::-webkit-calendar-picker-indicator,
.cosplay-pro-body #bundleModal .size-va-use-date-field input[type="date"]::-webkit-inner-spin-button,
.cosplay-pro-body #bundleModal .size-va-use-date-field input[type="date"]::-webkit-calendar-picker-indicator {
	direction: ltr !important;
	width: 100% !important;
	height: 100% !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	margin: 0 !important;
	opacity: 0 !important;
	cursor: pointer !important;
}

.cosplay-pro-body .bundle-modal .size-va-date-icon,
.cosplay-pro-body #bundleModal .size-va-date-icon {
	color: rgba(255, 255, 255, 0.92) !important;
	z-index: 3 !important;
	pointer-events: none !important;
}

.cosplay-pro-body .bundle-modal .size-va-date-icon svg path,
.cosplay-pro-body #bundleModal .size-va-date-icon svg path {
	stroke: currentColor !important;
}

.cosplay-pro-body .bundle-modal #size_va_use_date,
.cosplay-pro-body .bundle-modal .size-va-use-date-input,
.cosplay-pro-body .bundle-modal .size-va-date-input-wrapper input,
.cosplay-pro-body #bundleModal #size_va_use_date,
.cosplay-pro-body #bundleModal .size-va-use-date-input,
.cosplay-pro-body #bundleModal .size-va-date-input-wrapper input {
	background: var(--color-bg-alt) !important;
	border: 1px solid var(--color-border) !important;
	color: var(--color-text) !important;
	border-radius: 6px !important;
	padding: 10px 40px 10px 12px !important;
	font-size: 14px !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.cosplay-pro-body .bundle-modal #size_va_use_date:focus,
.cosplay-pro-body .bundle-modal .size-va-use-date-input:focus,
.cosplay-pro-body .bundle-modal .size-va-date-input:focus,
.cosplay-pro-body .bundle-modal .size-va-date-input-wrapper input[type="date"]:focus,
.cosplay-pro-body #bundleModal #size_va_use_date:focus,
.cosplay-pro-body #bundleModal .size-va-use-date-input:focus,
.cosplay-pro-body #bundleModal .size-va-date-input:focus,
.cosplay-pro-body #bundleModal .size-va-date-input-wrapper input[type="date"]:focus {
	border-color: var(--color-primary) !important;
	box-shadow: 0 0 0 3px rgba(155, 89, 182, 0.15) !important;
}

.cosplay-pro-body .bundle-modal .size-va-field-error-msg {
	color: var(--color-error, #e74c3c) !important;
	font-size: 12px !important;
}

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

.cosplay-pro-body .bundle-modal .size-va-special-instruction-field {
	background: var(--color-surface) !important;
	border: 1px solid var(--color-border) !important;
	border-radius: 8px !important;
	padding: 14px 16px !important;
}

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

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

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

/* Single-product mobile card hardening: related + plugin cards */
@media (max-width: 768px) {
	.product-related .related.products ul.products li.product {
		margin: 0 !important;
		float: none !important;
		clear: none !important;
		width: 100% !important;
	}

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

}


@media (max-width: 480px) {
	.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;
	}
}