/**
 * WooCommerce Product Reels - Frontend Stylesheet (v1.0.3)
 * 
 * Aesthetic: Cute, Warm & Ultra-Readable Baby Store Design (Theme Color: #fb7010)
 * Features: High-Legibility Typography, Zero Theme-Conflict Reset, Add to Cart Visibility Fix,
 * Single Center Play Button, and 9:16 Video Player Controls.
 */

:root {
	--wc-reels-accent: #fb7010;
	--wc-reels-accent-rgb: 251, 112, 16;
	--wc-reels-accent-light: #ff8c42;
	--wc-reels-accent-soft: #fff7ed;
	--wc-reels-accent-border: #ffedd5;
	--wc-reels-bg-cream: #fefcfb;
	--wc-reels-card-bg: #ffffff;
	--wc-reels-text-dark: #0f172a;
	--wc-reels-text-muted: #64748b;
	--wc-reels-radius-lg: 20px;
	--wc-reels-radius-md: 14px;
	--wc-reels-radius-sm: 10px;
	--wc-reels-font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--wc-reels-shadow-soft: 0 10px 25px -5px rgba(251, 112, 16, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
	--wc-reels-shadow-hover: 0 20px 35px -5px rgba(251, 112, 16, 0.22), 0 10px 15px -5px rgba(0, 0, 0, 0.06);
}

/* ==========================================================================
   0. ZERO THEME CONFLICT - SCOPED RESET & HIGH-LEGIBILITY TYPOGRAPHY
   ========================================================================== */

.wc-product-reels-container,
.wc-product-reels-container *,
.wc-reels-grid-wrapper,
.wc-reels-grid-wrapper *,
.wc-reels-modal-wrapper,
.wc-reels-modal-wrapper * {
	box-sizing: border-box !important;
	font-family: var(--wc-reels-font-stack) !important;
	-webkit-font-smoothing: antialiased !important;
	-moz-osx-font-smoothing: grayscale !important;
}

.wc-product-reels-container img,
.wc-reels-grid-wrapper img,
.wc-reels-modal-wrapper img {
	max-width: 100% !important;
	height: auto;
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	box-shadow: none !important;
	vertical-align: middle !important;
}

.wc-product-reels-container video,
.wc-reels-grid-wrapper video,
.wc-reels-modal-wrapper video {
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	background: #000000 !important;
	max-width: none !important;
	max-height: none !important;
}

.wc-product-reels-container a,
.wc-reels-grid-wrapper a,
.wc-reels-modal-wrapper a {
	text-decoration: none !important;
	box-shadow: none !important;
	border: none !important;
	outline: none !important;
	transition: all 0.25s ease !important;
}

.wc-product-reels-container button,
.wc-reels-grid-wrapper button,
.wc-reels-modal-wrapper button {
	border: none !important;
	outline: none !important;
	cursor: pointer !important;
	line-height: 1 !important;
}


/* ==========================================================================
   1. SINGLE PRODUCT PAGE REELS (Below Add to Cart)
   ========================================================================== */

.wc-single-reels-section {
	margin: 22px 0 28px 0 !important;
	padding: 18px 20px !important;
	background: #ffffff !important;
	border: 1.5px solid var(--wc-reels-accent-border) !important;
	border-radius: var(--wc-reels-radius-lg) !important;
	box-shadow: var(--wc-reels-shadow-soft) !important;
	position: relative !important;
	clear: both !important;
	width: 100% !important;
}

.wc-reels-heading-wrap {
	margin-bottom: 14px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
}

.wc-reels-heading {
	font-size: 17px !important;
	font-weight: 800 !important;
	color: #0f172a !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 10px !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.3 !important;
	letter-spacing: -0.2px !important;
}

.wc-reels-heading-icon {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 28px !important;
	height: 28px !important;
	background: linear-gradient(135deg, var(--wc-reels-accent), var(--wc-reels-accent-light)) !important;
	color: #ffffff !important;
	font-size: 12px !important;
	border-radius: 50% !important;
	box-shadow: 0 4px 12px rgba(var(--wc-reels-accent-rgb), 0.35) !important;
	flex-shrink: 0 !important;
}

.wc-reels-slider-track {
	display: flex !important;
	gap: 14px !important;
	overflow-x: auto !important;
	padding: 4px 2px 10px 2px !important;
	scroll-snap-type: x mandatory !important;
	-webkit-overflow-scrolling: touch !important;
	scrollbar-width: thin !important;
	scrollbar-color: var(--wc-reels-accent-border) transparent !important;
}

.wc-reels-slider-track::-webkit-scrollbar {
	height: 5px !important;
}
.wc-reels-slider-track::-webkit-scrollbar-track {
	background: #fdf6f0 !important;
	border-radius: 10px !important;
}
.wc-reels-slider-track::-webkit-scrollbar-thumb {
	background: var(--wc-reels-accent-border) !important;
	border-radius: 10px !important;
}
.wc-reels-slider-track::-webkit-scrollbar-thumb:hover {
	background: var(--wc-reels-accent) !important;
}

/* Single Reel Card */
.wc-reel-card {
	flex: 0 0 145px !important;
	width: 145px !important;
	scroll-snap-align: start !important;
	cursor: pointer !important;
	border-radius: var(--wc-reels-radius-md) !important;
	overflow: hidden !important;
	position: relative !important;
	transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease !important;
	box-shadow: 0 4px 14px rgba(251, 112, 16, 0.12) !important;
	background: #000000 !important;
	border: 2px solid transparent !important;
	pointer-events: auto !important;
	user-select: none !important;
	-webkit-user-select: none !important;
}

@media (min-width: 768px) {
	.wc-reel-card {
		flex: 0 0 165px !important;
		width: 165px !important;
	}
}

.wc-reel-card:hover {
	transform: translateY(-5px) scale(1.03) !important;
	border-color: var(--wc-reels-accent) !important;
	box-shadow: var(--wc-reels-shadow-hover) !important;
}

/* Ensure preview card elements pass clicks directly to card */
.wc-reel-card .wc-reel-media-box,
.wc-reel-card .wc-reel-preview-video,
.wc-reel-card .wc-reel-yt-preview,
.wc-reel-card .wc-reel-yt-poster,
.wc-reel-card .wc-reel-overlay,
.wc-reel-card .wc-reel-top-bar,
.wc-reel-card .wc-reel-badge,
.wc-reel-card .wc-reel-sound-icon,
.wc-reel-card .wc-reel-play-btn-wrap,
.wc-reel-card .wc-reel-play-circle,
.wc-reel-card .wc-reel-bottom-bar,
.wc-reel-card .wc-reel-card-title,
.wc-reel-card .wc-reel-tap-hint,
.wc-grid-reel-card .wc-grid-reel-video-box,
.wc-grid-reel-card .wc-reel-preview-video,
.wc-grid-reel-card .wc-reel-yt-preview,
.wc-grid-reel-card .wc-reel-yt-poster,
.wc-grid-reel-card .wc-grid-reel-top-badge,
.wc-grid-reel-card .wc-grid-reel-play-icon {
	pointer-events: none !important;
}


/* ==========================================================================
   2. STRICT 9:16 ASPECT RATIO & UNIVERSAL VIDEO CROPPING
   ========================================================================== */

.wc-reel-media-box,
.wc-grid-reel-video-box {
	position: relative !important;
	width: 100% !important;
	aspect-ratio: 9 / 16 !important;
	overflow: hidden !important;
	background: #000000 !important;
	border-radius: inherit !important;
	display: block !important;
}

/* Fallback for older browsers without aspect-ratio */
@supports not (aspect-ratio: 9 / 16) {
	.wc-reel-media-box,
	.wc-grid-reel-video-box {
		padding-top: 177.77% !important;
		position: relative !important;
		height: 0 !important;
	}
	.wc-reel-media-box > *,
	.wc-grid-reel-video-box > * {
		position: absolute !important;
		top: 0 !important;
		left: 0 !important;
		width: 100% !important;
		height: 100% !important;
	}
}

/* Video & Poster Elements - Strict Object Fit Cover & Centering */
.wc-reel-preview-video,
.wc-reel-yt-poster,
.wc-admin-video-preview,
.wc-admin-poster-preview,
.wc-admin-yt-preview {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center center !important;
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
}

.wc-reel-yt-preview {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	overflow: hidden !important;
}

/* Overlay & Badges */
.wc-reel-overlay {
	position: absolute !important;
	inset: 0 !important;
	background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 45%, rgba(0,0,0,0.85) 100%) !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: space-between !important;
	padding: 10px !important;
	color: #ffffff !important;
	z-index: 2 !important;
	pointer-events: none !important;
}

.wc-reel-top-bar {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	width: 100% !important;
}

/* Cute Baby Pill Badges */
.wc-reel-badge,
.wc-reel-badge-pill {
	display: inline-flex !important;
	align-items: center !important;
	gap: 5px !important;
	background: rgba(255, 255, 255, 0.94) !important;
	color: var(--wc-reels-accent) !important;
	font-size: 10.5px !important;
	font-weight: 800 !important;
	padding: 3px 9px !important;
	border-radius: 20px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.4px !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

.wc-reel-dot,
.wc-pulse-circle {
	width: 7px !important;
	height: 7px !important;
	border-radius: 50% !important;
	background: var(--wc-reels-accent) !important;
	box-shadow: 0 0 8px var(--wc-reels-accent) !important;
	animation: wcPulse 1.5s infinite !important;
	flex-shrink: 0 !important;
}

@keyframes wcPulse {
	0%, 100% { transform: scale(1); opacity: 1; }
	50% { transform: scale(1.4); opacity: 0.6; }
}

.wc-reel-sound-icon {
	font-size: 11px !important;
	background: rgba(0, 0, 0, 0.55) !important;
	backdrop-filter: blur(4px) !important;
	-webkit-backdrop-filter: blur(4px) !important;
	padding: 2px 6px !important;
	border-radius: 6px !important;
}

.wc-reel-play-btn-wrap {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	opacity: 0.92 !important;
	transition: transform 0.25s, opacity 0.25s !important;
}

.wc-reel-card:hover .wc-reel-play-btn-wrap {
	transform: scale(1.15) !important;
	opacity: 1 !important;
}

.wc-reel-play-circle {
	width: 42px !important;
	height: 42px !important;
	background: linear-gradient(135deg, rgba(251, 112, 16, 0.95), rgba(255, 140, 66, 0.98)) !important;
	backdrop-filter: blur(8px) !important;
	-webkit-backdrop-filter: blur(8px) !important;
	border: 2px solid #ffffff !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: #ffffff !important;
	box-shadow: 0 6px 18px rgba(251, 112, 16, 0.45) !important;
}

.wc-reel-card-title {
	font-size: 12px !important;
	font-weight: 700 !important;
	color: #ffffff !important;
	margin: 0 !important;
	line-height: 1.3 !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
	text-shadow: 0 1px 3px rgba(0,0,0,0.8) !important;
}

.wc-reel-tap-hint {
	font-size: 9.5px !important;
	color: rgba(255, 255, 255, 0.85) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.4px !important;
	font-weight: 600 !important;
}


/* ==========================================================================
   3. MULTI-PRODUCT 5-COLUMN HOMEPAGE GRID (Cute & Responsive)
   ========================================================================== */

.wc-reels-grid-wrapper {
	margin: 36px 0 !important;
	width: 100% !important;
	clear: both !important;
}

.wc-reels-grid-heading-wrap {
	margin-bottom: 24px !important;
	text-align: center !important;
}

.wc-reels-grid-heading {
	font-size: 26px !important;
	font-weight: 800 !important;
	color: #0f172a !important;
	letter-spacing: -0.4px !important;
	margin: 0 0 6px 0 !important;
	line-height: 1.25 !important;
}

.wc-reels-grid-container {
	display: grid !important;
	gap: 18px !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Default 5 Columns */
.wc-reels-cols-5 .wc-reels-grid-container {
	grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

.wc-reels-cols-4 .wc-reels-grid-container {
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.wc-reels-cols-3 .wc-reels-grid-container {
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.wc-reels-cols-6 .wc-reels-grid-container {
	grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}

/* Responsive Grid Breakpoints */
@media (max-width: 1200px) {
	.wc-reels-cols-5 .wc-reels-grid-container,
	.wc-reels-cols-6 .wc-reels-grid-container {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 992px) {
	.wc-reels-cols-5 .wc-reels-grid-container,
	.wc-reels-cols-4 .wc-reels-grid-container,
	.wc-reels-cols-6 .wc-reels-grid-container {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		gap: 14px !important;
	}
}

@media (max-width: 768px) {
	.wc-reels-cols-5 .wc-reels-grid-container,
	.wc-reels-cols-4 .wc-reels-grid-container,
	.wc-reels-cols-3 .wc-reels-grid-container,
	.wc-reels-cols-6 .wc-reels-grid-container {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 12px !important;
	}
}

@media (max-width: 480px) {
	.wc-reels-grid-container {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 10px !important;
	}
}

/* Grid Card */
.wc-grid-reel-card {
	background: #ffffff !important;
	border-radius: var(--wc-reels-radius-lg) !important;
	overflow: hidden !important;
	box-shadow: 0 6px 20px rgba(251, 112, 16, 0.08) !important;
	border: 1.5px solid var(--wc-reels-accent-border) !important;
	display: flex !important;
	flex-direction: column !important;
	transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.3s ease !important;
	cursor: pointer !important;
	position: relative !important;
}

.wc-grid-reel-card:hover {
	transform: translateY(-6px) scale(1.02) !important;
	box-shadow: var(--wc-reels-shadow-hover) !important;
	border-color: var(--wc-reels-accent) !important;
}

.wc-grid-reel-video-box {
	position: relative !important;
	border-radius: var(--wc-reels-radius-lg) var(--wc-reels-radius-lg) 0 0 !important;
	cursor: pointer !important;
}

.wc-grid-reel-top-badge {
	position: absolute !important;
	top: 10px !important;
	left: 10px !important;
	z-index: 2 !important;
}

.wc-grid-reel-play-icon {
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) scale(0.8) !important;
	width: 48px !important;
	height: 48px !important;
	background: linear-gradient(135deg, rgba(251, 112, 16, 0.95), rgba(255, 140, 66, 0.98)) !important;
	backdrop-filter: blur(8px) !important;
	-webkit-backdrop-filter: blur(8px) !important;
	border: 2px solid #ffffff !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: #ffffff !important;
	opacity: 0 !important;
	transition: all 0.25s ease !important;
	z-index: 3 !important;
	box-shadow: 0 8px 22px rgba(251, 112, 16, 0.5) !important;
}

.wc-grid-reel-card:hover .wc-grid-reel-play-icon {
	opacity: 1 !important;
	transform: translate(-50%, -50%) scale(1) !important;
}

/* Product Info Card Below Grid Reel */
.wc-grid-reel-product-footer {
	padding: 10px 12px !important;
	background: #ffffff !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 8px !important;
	border-top: 1px solid #fff3e6 !important;
}

.wc-grid-reel-product-meta {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	min-width: 0 !important;
	flex: 1 !important;
}

.wc-grid-reel-prod-img-wrap {
	width: 38px !important;
	height: 38px !important;
	border-radius: 8px !important;
	overflow: hidden !important;
	flex-shrink: 0 !important;
	border: 1px solid var(--wc-reels-accent-border) !important;
	background: #fffaf5 !important;
}

.wc-grid-reel-prod-thumb {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

.wc-grid-reel-prod-details {
	min-width: 0 !important;
	flex: 1 !important;
}

.wc-grid-reel-prod-name {
	font-size: 12px !important;
	font-weight: 700 !important;
	color: #0f172a !important;
	margin: 0 0 2px 0 !important;
	line-height: 1.3 !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

.wc-grid-reel-prod-price {
	font-size: 13px !important;
	font-weight: 800 !important;
	color: var(--wc-reels-accent) !important;
	line-height: 1 !important;
}

.wc-grid-reel-prod-price ins {
	text-decoration: none !important;
}

.wc-grid-reel-prod-price del {
	font-size: 10px !important;
	color: #94a3b8 !important;
	margin-right: 4px !important;
}

/* Cute View Button */
.wc-grid-reel-buy-btn {
	display: inline-flex !important;
	align-items: center !important;
	gap: 4px !important;
	padding: 6px 12px !important;
	background: #fff5eb !important;
	color: var(--wc-reels-accent) !important;
	font-size: 11.5px !important;
	font-weight: 700 !important;
	border-radius: 20px !important;
	text-decoration: none !important;
	transition: all 0.2s ease !important;
	flex-shrink: 0 !important;
	border: 1px solid var(--wc-reels-accent-border) !important;
}

.wc-grid-reel-buy-btn:hover {
	background: var(--wc-reels-accent) !important;
	color: #ffffff !important;
	box-shadow: 0 4px 10px rgba(var(--wc-reels-accent-rgb), 0.35) !important;
}


/* ==========================================================================
   4. SHOPPABLE SPLIT LIGHTBOX MODAL (Ultra-Clean & Bug-Free)
   ========================================================================== */

.wc-reels-modal-wrapper {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100vw !important;
	height: 100vh !important;
	z-index: 999999999 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
	transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s ease !important;
	padding: 20px !important;
	box-sizing: border-box !important;
	margin: 0 !important;
}

.wc-reels-modal-wrapper.wc-modal-open {
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
}

.wc-reels-modal-backdrop {
	position: absolute !important;
	inset: 0 !important;
	background: rgba(15, 23, 42, 0.88) !important;
	backdrop-filter: blur(14px) !important;
	-webkit-backdrop-filter: blur(14px) !important;
}

.wc-reels-modal-dialog {
	position: relative !important;
	width: 100% !important;
	max-width: 880px !important;
	height: 90vh !important;
	max-height: 720px !important;
	background: #ffffff !important;
	border-radius: 24px !important;
	overflow: hidden !important;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
	transform: scale(0.95) !important;
	transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
	display: flex !important;
}

.wc-reels-modal-wrapper.wc-modal-open .wc-reels-modal-dialog {
	transform: scale(1) !important;
}

/* High-Contrast Close Button */
.wc-reels-modal-close {
	position: absolute !important;
	top: 14px !important;
	right: 14px !important;
	width: 42px !important;
	height: 42px !important;
	border-radius: 50% !important;
	background: #ffffff !important;
	color: #0f172a !important;
	border: 2px solid #ffedd5 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	z-index: 1000 !important;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
	transition: all 0.25s ease !important;
}

.wc-reels-modal-close svg {
	stroke: #0f172a !important;
	transition: stroke 0.2s !important;
}

.wc-reels-modal-close:hover {
	background: var(--wc-reels-accent) !important;
	border-color: var(--wc-reels-accent) !important;
	transform: rotate(90deg) scale(1.08) !important;
}

.wc-reels-modal-close:hover svg {
	stroke: #ffffff !important;
}

/* Nav Buttons */
.wc-reels-nav-btn {
	position: absolute !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	width: 46px !important;
	height: 46px !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, 0.95) !important;
	backdrop-filter: blur(10px) !important;
	-webkit-backdrop-filter: blur(10px) !important;
	color: #0f172a !important;
	border: 1.5px solid #ffedd5 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	z-index: 100 !important;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
	transition: all 0.2s !important;
}

.wc-reels-nav-prev { left: -60px !important; }
.wc-reels-nav-next { right: -60px !important; }

.wc-reels-nav-btn:hover {
	background: var(--wc-reels-accent) !important;
	color: #ffffff !important;
	transform: translateY(-50%) scale(1.1) !important;
}

@media (max-width: 1040px) {
	.wc-reels-nav-prev { left: 10px !important; }
	.wc-reels-nav-next { right: 10px !important; }
}

/* Split Layout */
.wc-reels-modal-split {
	display: flex !important;
	width: 100% !important;
	height: 100% !important;
}

/* Left: 9:16 Video Player Column */
.wc-reels-video-column {
	flex: 0 0 54% !important;
	height: 100% !important;
	background: #000000 !important;
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-right: 1px solid #ffedd5 !important;
}

.wc-reels-player-frame {
	position: relative !important;
	width: 100% !important;
	height: 100% !important;
	overflow: hidden !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
}

.wc-reels-active-video {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center !important;
	background: #000000 !important;
	cursor: pointer !important;
}

.wc-reels-yt-player-box {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
}

.wc-reels-yt-player-box iframe {
	width: 100% !important;
	height: 100% !important;
	border: 0 !important;
}

/* Single Big Central Play Button */
.wc-reels-center-play-button {
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) scale(1) !important;
	width: 66px !important;
	height: 66px !important;
	background: linear-gradient(135deg, rgba(251, 112, 16, 0.95), rgba(255, 140, 66, 0.98)) !important;
	backdrop-filter: blur(10px) !important;
	-webkit-backdrop-filter: blur(10px) !important;
	border: 3px solid #ffffff !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: #ffffff !important;
	z-index: 15 !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
	cursor: pointer !important;
	opacity: 1 !important;
	visibility: visible !important;
	transition: transform 0.25s ease, opacity 0.25s ease, visibility 0.25s !important;
	pointer-events: auto !important;
}

.wc-reels-player-frame.wc-is-playing .wc-reels-center-play-button {
	opacity: 0 !important;
	visibility: hidden !important;
	transform: translate(-50%, -50%) scale(0.6) !important;
	pointer-events: none !important;
}

/* Player Overlays */
.wc-reels-player-controls {
	position: absolute !important;
	inset: 0 !important;
	pointer-events: none !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: space-between !important;
	padding: 16px !important;
	z-index: 10 !important;
	background: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.85) 100%) !important;
}

.wc-reels-ctrl-top {
	display: flex !important;
	align-items: flex-start !important;
	justify-content: space-between !important;
	gap: 12px !important;
	pointer-events: auto !important;
}

/* Frosted Video Title Badge Container for High Legibility */
.wc-reels-header-info {
	background: rgba(0, 0, 0, 0.6) !important;
	backdrop-filter: blur(10px) !important;
	-webkit-backdrop-filter: blur(10px) !important;
	padding: 8px 12px !important;
	border-radius: 14px !important;
	border: 1px solid rgba(255, 255, 255, 0.2) !important;
	max-width: 78% !important;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

.wc-reels-modal-subtitle {
	display: inline-block !important;
	background: var(--wc-reels-accent) !important;
	color: #ffffff !important;
	font-size: 10px !important;
	font-weight: 800 !important;
	padding: 2px 8px !important;
	border-radius: 10px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.4px !important;
	margin-bottom: 4px !important;
}

.wc-reels-modal-title {
	font-size: 13.5px !important;
	font-weight: 700 !important;
	color: #ffffff !important;
	margin: 0 !important;
	line-height: 1.35 !important;
	white-space: normal !important;
	word-break: break-word !important;
}

.wc-reels-top-actions {
	display: flex !important;
	gap: 8px !important;
}

.wc-reels-ctrl-btn {
	width: 38px !important;
	height: 38px !important;
	border-radius: 50% !important;
	background: rgba(0, 0, 0, 0.55) !important;
	backdrop-filter: blur(8px) !important;
	-webkit-backdrop-filter: blur(8px) !important;
	border: 1px solid rgba(255, 255, 255, 0.25) !important;
	color: #ffffff !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	transition: all 0.2s !important;
}

.wc-reels-ctrl-btn:hover {
	background: var(--wc-reels-accent) !important;
	transform: scale(1.08) !important;
}

.wc-reels-ctrl-bottom {
	pointer-events: auto !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 6px !important;
}

/* Scrubber */
.wc-reels-progress-wrap {
	width: 100% !important;
	height: 6px !important;
	background: rgba(255, 255, 255, 0.3) !important;
	border-radius: 6px !important;
	cursor: pointer !important;
	position: relative !important;
	transition: height 0.15s !important;
}

.wc-reels-progress-wrap:hover {
	height: 10px !important;
}

.wc-reels-progress-filled {
	height: 100% !important;
	width: 0% !important;
	background: linear-gradient(90deg, var(--wc-reels-accent), var(--wc-reels-accent-light)) !important;
	border-radius: 6px !important;
	position: relative !important;
}

.wc-reels-progress-thumb {
	position: absolute !important;
	top: 50% !important;
	transform: translate(-50%, -50%) scale(0) !important;
	left: 0% !important;
	width: 14px !important;
	height: 14px !important;
	background: #ffffff !important;
	border-radius: 50% !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
	transition: transform 0.15s !important;
}

.wc-reels-progress-wrap:hover .wc-reels-progress-thumb {
	transform: translate(-50%, -50%) scale(1) !important;
}

.wc-reels-time-display {
	display: flex !important;
	justify-content: flex-end !important;
	font-size: 11px !important;
	color: rgba(255, 255, 255, 0.85) !important;
	font-family: monospace !important;
}

/* Right: Shoppable Product Info Column */
.wc-reels-product-column {
	flex: 0 0 46% !important;
	height: 100% !important;
	background: #ffffff !important;
	color: #0f172a !important;
	overflow-y: auto !important;
	padding: 28px 24px !important;
	box-sizing: border-box !important;
	display: flex !important;
	flex-direction: column !important;
}

.wc-reels-product-panel {
	display: flex !important;
	flex-direction: column !important;
	gap: 16px !important;
	height: 100% !important;
}

.wc-modal-prod-header {
	display: flex !important;
	gap: 14px !important;
	align-items: flex-start !important;
	padding-bottom: 14px !important;
	border-bottom: 1.5px solid #ffedd5 !important;
}

.wc-modal-prod-img-box {
	width: 68px !important;
	height: 68px !important;
	border-radius: 12px !important;
	overflow: hidden !important;
	border: 1.5px solid var(--wc-reels-accent-border) !important;
	flex-shrink: 0 !important;
	background: #fffaf5 !important;
}

.wc-modal-prod-img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

.wc-modal-prod-title-group {
	min-width: 0 !important;
	flex: 1 !important;
}

.wc-modal-prod-sku-tag {
	font-size: 10.5px !important;
	color: #94a3b8 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
	display: block !important;
	margin-bottom: 2px !important;
	font-weight: 600 !important;
}

.wc-modal-prod-name {
	font-size: 17px !important;
	font-weight: 800 !important;
	margin: 0 0 4px 0 !important;
	line-height: 1.35 !important;
}

.wc-modal-prod-name a {
	color: #0f172a !important;
	text-decoration: none !important;
	transition: color 0.2s !important;
	font-weight: 800 !important;
}

.wc-modal-prod-name a:hover {
	color: var(--wc-reels-accent) !important;
}

.wc-modal-prod-rating .star-rating {
	font-size: 13px !important;
	color: #fbbf24 !important;
}

.wc-modal-prod-price-box {
	display: flex !important;
	align-items: baseline !important;
	gap: 8px !important;
}

.wc-modal-price-label {
	font-size: 12px !important;
	color: #64748b !important;
	text-transform: uppercase !important;
	font-weight: 800 !important;
	letter-spacing: 0.5px !important;
}

.wc-modal-prod-price {
	font-size: 24px !important;
	font-weight: 900 !important;
	color: var(--wc-reels-accent) !important;
}

.wc-modal-prod-price ins {
	text-decoration: none !important;
}

.wc-modal-prod-price del {
	font-size: 14px !important;
	color: #94a3b8 !important;
	margin-right: 6px !important;
}

.wc-modal-prod-desc-box {
	font-size: 13.5px !important;
	line-height: 1.6 !important;
	color: #475569 !important;
	background: #fffaf5 !important;
	padding: 14px !important;
	border-radius: 12px !important;
	border: 1px solid #ffedd5 !important;
}

.wc-modal-prod-desc {
	margin: 0 !important;
}

/* Actions */
.wc-modal-prod-actions {
	display: flex !important;
	gap: 10px !important;
	margin-top: 4px !important;
}

.wc-modal-qty-picker {
	display: flex !important;
	align-items: center !important;
	background: #fff5eb !important;
	border: 1.5px solid var(--wc-reels-accent-border) !important;
	border-radius: 30px !important;
	overflow: hidden !important;
	width: 104px !important;
	flex-shrink: 0 !important;
}

.wc-qty-btn {
	width: 34px !important;
	height: 46px !important;
	background: transparent !important;
	border: none !important;
	color: var(--wc-reels-accent) !important;
	font-size: 18px !important;
	font-weight: 800 !important;
	cursor: pointer !important;
	transition: background 0.15s !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.wc-qty-btn:hover {
	background: rgba(251, 112, 16, 0.12) !important;
}

.wc-modal-qty-val {
	width: 36px !important;
	background: transparent !important;
	border: none !important;
	color: #0f172a !important;
	text-align: center !important;
	font-weight: 800 !important;
	font-size: 15px !important;
	padding: 0 !important;
	-moz-appearance: textfield !important;
}

.wc-modal-qty-val::-webkit-outer-spin-button,
.wc-modal-qty-val::-webkit-inner-spin-button {
	-webkit-appearance: none !important;
	margin: 0 !important;
}

/* Add to Cart Button (Guaranteed Visible Orange Gradient) */
.wc-modal-add-to-cart-btn {
	flex: 1 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	background: linear-gradient(135deg, #fb7010, #ff8c42) !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 30px !important;
	font-size: 15px !important;
	font-weight: 800 !important;
	height: 46px !important;
	padding: 0 18px !important;
	cursor: pointer !important;
	box-shadow: 0 6px 20px rgba(var(--wc-reels-accent-rgb), 0.45) !important;
	transition: all 0.25s ease !important;
	text-align: center !important;
}

.wc-modal-add-to-cart-btn:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 8px 25px rgba(var(--wc-reels-accent-rgb), 0.6) !important;
}

.wc-modal-add-to-cart-btn.wc-loading {
	opacity: 0.75 !important;
	pointer-events: none !important;
}

.wc-modal-add-to-cart-btn.wc-added {
	background: #10b981 !important;
	box-shadow: 0 6px 18px rgba(16, 185, 129, 0.45) !important;
}

.wc-cart-btn-icon {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: #ffffff !important;
}

.wc-cart-btn-icon svg {
	stroke: #ffffff !important;
}

.wc-cart-btn-text {
	color: #ffffff !important;
	font-size: 15px !important;
	font-weight: 800 !important;
}

.wc-modal-view-details-btn {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	width: 100% !important;
	padding: 11px !important;
	border-radius: 12px !important;
	background: #fffaf5 !important;
	border: 1px solid var(--wc-reels-accent-border) !important;
	color: var(--wc-reels-accent) !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	transition: all 0.2s ease !important;
}

.wc-modal-view-details-btn:hover {
	background: #fff0e0 !important;
	color: #e05e08 !important;
}

/* Playlist Inside Modal */
.wc-modal-playlist-section {
	margin-top: 6px !important;
	padding-top: 14px !important;
	border-top: 1.5px solid #ffedd5 !important;
}

.wc-modal-playlist-title {
	font-size: 11.5px !important;
	color: #64748b !important;
	margin: 0 0 10px 0 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
	font-weight: 800 !important;
}

.wc-modal-playlist-thumbs {
	display: flex !important;
	gap: 8px !important;
	overflow-x: auto !important;
	padding-bottom: 4px !important;
}

.wc-modal-playlist-item {
	width: 52px !important;
	height: 72px !important;
	border-radius: 8px !important;
	overflow: hidden !important;
	border: 2px solid transparent !important;
	cursor: pointer !important;
	flex-shrink: 0 !important;
	position: relative !important;
	transition: all 0.2s !important;
}

.wc-modal-playlist-item.wc-active-playlist-item {
	border-color: var(--wc-reels-accent) !important;
	transform: scale(1.05) !important;
}

.wc-modal-playlist-item img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

/* Toast Notification */
.wc-reels-toast {
	position: fixed !important;
	bottom: 30px !important;
	right: 30px !important;
	background: #10b981 !important;
	color: #ffffff !important;
	padding: 13px 22px !important;
	border-radius: 30px !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25) !important;
	z-index: 1000000000 !important;
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	animation: wcToastIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

@keyframes wcToastIn {
	from { transform: translateY(20px); opacity: 0; }
	to { transform: translateY(0); opacity: 1; }
}


/* ==========================================================================
   5. RESPONSIVE MODAL FOR MOBILE & TABLETS
   ========================================================================== */

@media (max-width: 768px) {
	.wc-reels-modal-wrapper {
		padding: 0 !important;
	}

	.wc-reels-modal-dialog {
		max-width: 100% !important;
		height: 100vh !important;
		max-height: 100vh !important;
		border-radius: 0 !important;
	}

	.wc-reels-modal-split {
		flex-direction: column !important;
	}

	.wc-reels-video-column {
		flex: 1 !important;
		height: 56vh !important;
		border-right: none !important;
		border-bottom: 1px solid #ffedd5 !important;
	}

	.wc-reels-product-column {
		flex: 0 0 44vh !important;
		height: 44vh !important;
		padding: 16px 18px !important;
	}

	.wc-reels-modal-close {
		top: 10px !important;
		right: 10px !important;
		width: 36px !important;
		height: 36px !important;
	}

	.wc-reels-nav-btn {
		width: 38px !important;
		height: 38px !important;
	}

	.wc-reels-nav-prev { left: 8px !important; }
	.wc-reels-nav-next { right: 8px !important; }
}