/**
 * WooCommerce Shoppable Videos - Frontend Styles
 * Instagram Reels / YouTube Shorts style vertical feed.
 */

.wcsv-feed-wrapper {
	position: relative;
	width: 100%;
	max-width: 480px;
	margin: 0 auto;
	background: #000;
	overflow: hidden;
	border-radius: 12px;
}

.wcsv-feed-wrapper .swiper.wcsv-swiper {
	width: 100%;
	height: 100%;
}

.wcsv-slide {
	position: relative;
	width: 100%;
	height: 100%;
	background: #000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.wcsv-video-container {
	position: relative;
	width: 100%;
	height: 100%;
}

.wcsv-video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: #000;
	display: block;
}

.wcsv-video-tap-overlay {
	position: absolute;
	inset: 0;
	z-index: 5;
	cursor: pointer;
}

.wcsv-play-indicator {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 6;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	animation: wcsv-fade-out 0.6s ease forwards;
}

.wcsv-play-icon {
	font-size: 24px;
	color: #fff;
}

@keyframes wcsv-fade-out {
	0% { opacity: 1; }
	70% { opacity: 1; }
	100% { opacity: 0; }
}

/* Used as a fallback when autoplay genuinely fails (bad source, blocked,
   etc.) so the manual play button stays visible instead of fading out. */
.wcsv-play-indicator-persist {
	animation: none !important;
	opacity: 1 !important;
}

/* Caption */
.wcsv-video-caption {
	position: absolute;
	left: 16px;
	right: 90px;
	bottom: 24px;
	z-index: 4;
	color: #fff;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.wcsv-video-title {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
}

/* Mute / fullscreen controls */
.wcsv-mute-toggle,
.wcsv-fullscreen-toggle {
	position: absolute;
	right: 14px;
	z-index: 20;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.45);
	border: none;
	color: #fff;
	font-size: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.wcsv-mute-toggle {
	top: 16px;
}

.wcsv-fullscreen-toggle {
	top: 66px;
}

.d-none {
	display: none !important;
}

/* Product overlay toggle button */
.wcsv-product-overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 10;
}

.wcsv-products-toggle {
	position: absolute;
	bottom: 24px;
	right: 14px;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #fff;
	border: none;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	cursor: pointer;
	pointer-events: auto;
}

.wcsv-bag-icon {
	font-size: 18px;
	line-height: 1;
}

.wcsv-products-count {
	position: absolute;
	top: -4px;
	right: -4px;
	background: #d63638;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	min-width: 16px;
	height: 16px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 3px;
}

/* Bottom sliding product panel */
.wcsv-products-panel {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	max-height: 70%;
	background: #fff;
	border-radius: 16px 16px 0 0;
	transform: translateY(100%);
	transition: transform 0.3s ease;
	pointer-events: auto;
	display: flex;
	flex-direction: column;
	z-index: 15;
}

.wcsv-product-overlay.wcsv-panel-open .wcsv-products-panel {
	transform: translateY(0);
}

.wcsv-products-panel-handle {
	width: 40px;
	height: 4px;
	background: #d0d0d0;
	border-radius: 2px;
	margin: 10px auto;
	flex-shrink: 0;
}

.wcsv-products-list {
	overflow-y: auto;
	padding: 0 14px 14px;
}

/* Product card */
.wcsv-product-card {
	border-bottom: 1px solid #eee;
	padding: 12px 0;
}

.wcsv-product-card:last-child {
	border-bottom: none;
}

.wcsv-product-card-inner {
	display: flex;
	gap: 12px;
}

.wcsv-product-image-link {
	flex-shrink: 0;
}

.wcsv-product-image {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 8px;
	background: #f5f5f5;
}

.wcsv-product-info {
	flex: 1;
	min-width: 0;
}

.wcsv-product-name {
	margin: 0 0 4px;
	font-size: 14px;
	font-weight: 600;
	color: #111;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wcsv-product-price {
	margin: 0 0 8px;
	font-size: 13px;
}

.wcsv-price-regular del {
	color: #999;
	margin-right: 6px;
}

.wcsv-price-sale,
.wcsv-price-current {
	color: #d63638;
	font-weight: 600;
}

.wcsv-variation-selectors {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-bottom: 8px;
}

.wcsv-variation-select {
	font-size: 12px;
	padding: 4px 6px;
	border-radius: 6px;
	border: 1px solid #ddd;
}

.wcsv-product-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.wcsv-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 600;
	padding: 7px 12px;
	border-radius: 20px;
	border: none;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
}

.wcsv-btn-view {
	background: #f0f0f1;
	color: #111;
}

.wcsv-btn-add-cart {
	background: #111;
	color: #fff;
}

.wcsv-btn-add-cart:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.wcsv-btn-disabled {
	background: #f0f0f1;
	color: #999;
}

.wcsv-btn-add-cart.wcsv-added {
	background: #1a7f37;
}

/* Toast */
.wcsv-toast {
	position: fixed;
	left: 50%;
	bottom: 30px;
	transform: translate(-50%, 20px);
	background: #111;
	color: #fff;
	padding: 10px 18px;
	border-radius: 24px;
	font-size: 13px;
	z-index: 999999;
	opacity: 0;
	transition: all 0.25s ease;
	pointer-events: none;
}

.wcsv-toast.wcsv-toast-visible {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* Empty state */
.wcsv-empty-state {
	text-align: center;
	padding: 40px 20px;
	color: #666;
}

.wcsv-loading-more {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

/* Fullscreen mode */
.wcsv-feed-wrapper:fullscreen,
.wcsv-feed-wrapper:-webkit-full-screen {
	max-width: 100%;
	border-radius: 0;
}

/* Responsive */
@media (max-width: 576px) {
	.wcsv-feed-wrapper {
		max-width: 100%;
		border-radius: 0;
	}
}

/* ==========================================================================
   Carousel layout (horizontal thumbnail strip)
   ========================================================================== */

.wcsv-carousel-wrapper {
	position: relative;
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	padding: 0 40px;
	box-sizing: border-box;
}

.wcsv-carousel-title {
	text-align: center;
	font-size: 28px;
	font-weight: 700;
	margin: 0 0 24px;
}

.wcsv-carousel-swiper {
	width: 100%;
	padding-bottom: 4px;
}

.wcsv-carousel-slide {
	width: 220px;
	aspect-ratio: 9 / 16;
}

.wcsv-carousel-item {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	border: none;
	padding: 0;
	margin: 0;
	border-radius: 14px;
	overflow: hidden;
	cursor: pointer;
	background: #000;
}

.wcsv-carousel-thumb {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.wcsv-carousel-thumb-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(160deg, #2b2b2b, #101010);
}

.wcsv-carousel-play-icon {
	font-size: 32px;
	color: rgba(255, 255, 255, 0.6);
}

.wcsv-carousel-item::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 45%);
	pointer-events: none;
}

.wcsv-carousel-play-badge {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	color: #111;
	font-size: 11px;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
}

.wcsv-carousel-caption {
	position: absolute;
	left: 10px;
	right: 10px;
	bottom: 10px;
	z-index: 2;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	text-align: left;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wcsv-carousel-prev,
.wcsv-carousel-next {
	color: #111;
	background: #fff;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.wcsv-carousel-prev::after,
.wcsv-carousel-next::after {
	font-size: 13px;
	font-weight: 700;
}

@media (max-width: 576px) {
	.wcsv-carousel-wrapper {
		padding: 0 30px;
	}
	.wcsv-carousel-slide {
		width: 150px;
	}
}

/* ==========================================================================
   Fullscreen video modal (opened from carousel)
   ========================================================================== */

.wcsv-modal-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 999998;
	background: rgba(0, 0, 0, 0.92);
	align-items: center;
	justify-content: center;
}

.wcsv-modal-overlay.wcsv-modal-open {
	display: flex;
}

.wcsv-modal-inner {
	position: relative;
	width: 100%;
	max-width: 480px;
	height: 100%;
	max-height: 100vh;
}

.wcsv-modal-inner .wcsv-feed-wrapper {
	border-radius: 0;
	max-width: 100%;
}

.wcsv-modal-close {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 999999;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
	border: none;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

body.wcsv-modal-active {
	overflow: hidden;
}

@media (max-width: 576px) {
	.wcsv-modal-inner {
		max-width: 100%;
	}
}

/* ==========================================================================
   Theme-conflict shield (popup / feed controls, video, product buttons)

   Many themes and page builders (Elementor kits, Astra, Divi ...) style EVERY
   <button> with big padding, min-widths, uppercase text, square corners and
   their own colours. That squashed the round controls into ovals with clipped
   icons. The rules below pin the plugin's own controls to their intended
   size and look, whatever the active theme does.
   ========================================================================== */

.wcsv-mute-toggle,
.wcsv-fullscreen-toggle,
.wcsv-modal-close,
.wcsv-products-toggle {
	box-sizing: border-box !important;
	padding: 0 !important;
	margin: 0 !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none !important;
	border: none !important;
	border-radius: 50% !important;
	box-shadow: none !important;
	text-shadow: none !important;
	text-transform: none !important;
	text-decoration: none !important;
	letter-spacing: normal !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	overflow: visible !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.wcsv-mute-toggle,
.wcsv-fullscreen-toggle {
	width: 40px !important;
	height: 40px !important;
	background: rgba(0, 0, 0, 0.45) !important;
	color: #fff !important;
}
.wcsv-mute-toggle:hover,
.wcsv-mute-toggle:focus,
.wcsv-mute-toggle:active,
.wcsv-fullscreen-toggle:hover,
.wcsv-fullscreen-toggle:focus,
.wcsv-fullscreen-toggle:active {
	background: rgba(0, 0, 0, 0.65) !important;
	color: #fff !important;
}

.wcsv-modal-close {
	width: 40px !important;
	height: 40px !important;
	background: rgba(255, 255, 255, 0.15) !important;
	color: #fff !important;
	font-size: 24px !important;
}
.wcsv-modal-close:hover,
.wcsv-modal-close:focus,
.wcsv-modal-close:active {
	background: rgba(255, 255, 255, 0.3) !important;
	color: #fff !important;
}

.wcsv-products-toggle {
	width: 48px !important;
	height: 48px !important;
	flex-direction: column !important;
	background: #fff !important;
	color: #111 !important;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}
.wcsv-products-toggle:hover,
.wcsv-products-toggle:focus,
.wcsv-products-toggle:active {
	background: #fff !important;
	color: #111 !important;
}

/* SVG icons (used instead of emoji so no font / theme can break them) */
.wcsv-icon-svg {
	display: block;
	width: 20px;
	height: 20px;
	fill: currentColor;
	pointer-events: none;
}
.wcsv-bag-icon,
.wcsv-icon-muted,
.wcsv-icon-unmuted,
.wcsv-icon-expand {
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}
.wcsv-bag-icon .wcsv-icon-svg {
	width: 22px;
	height: 22px;
	fill: #111;
}
.wcsv-icon-muted.d-none,
.wcsv-icon-unmuted.d-none {
	display: none !important;
}
.wcsv-play-icon {
	display: flex;
}
.wcsv-play-icon .wcsv-icon-svg {
	width: 30px;
	height: 30px;
	margin-left: 3px;
	fill: #fff;
}

/* Product panel buttons (View Product / Add to Cart) */
.wcsv-product-actions .wcsv-btn {
	box-sizing: border-box !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: auto !important;
	height: auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 7px 12px !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-decoration: none !important;
	border: none !important;
	border-radius: 20px !important;
	box-shadow: none !important;
}
.wcsv-product-actions .wcsv-btn-view {
	background: #f0f0f1 !important;
	color: #111 !important;
}
.wcsv-product-actions .wcsv-btn-view:hover {
	background: #e2e2e4 !important;
	color: #111 !important;
}
.wcsv-product-actions .wcsv-btn-add-cart {
	background: #111 !important;
	color: #fff !important;
}
.wcsv-product-actions .wcsv-btn-add-cart:hover:not(:disabled) {
	background: #333 !important;
	color: #fff !important;
}
.wcsv-product-actions .wcsv-btn-add-cart.wcsv-added {
	background: #1a7f37 !important;
}
.wcsv-product-actions .wcsv-btn-disabled {
	background: #f0f0f1 !important;
	color: #999 !important;
}

/* The <video> itself: always fills its slide and is never hidden / resized by theme rules */
.wcsv-video-container video.wcsv-video {
	position: absolute !important;
	inset: 0 !important;
	z-index: 1;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	object-fit: cover !important;
	visibility: visible !important;
	opacity: 1 !important;
	transform: none !important;
}

/* Loading spinner (instead of a silent black screen) */
.wcsv-video-loading {
	position: absolute;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 4;
	pointer-events: none;
}
.wcsv-slide.wcsv-video-buffering .wcsv-video-loading {
	display: flex;
}
.wcsv-video-spinner {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 3px solid rgba(255, 255, 255, 0.25);
	border-top-color: #fff;
	animation: wcsv-spin 0.8s linear infinite;
}
@keyframes wcsv-spin {
	to { transform: rotate(360deg); }
}

/* Shown if the browser cannot decode / load the file */
.wcsv-video-error-msg {
	position: absolute;
	left: 16px;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 6;
	padding: 12px 14px;
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.65);
	color: #fff;
	font-size: 14px;
	line-height: 1.4;
	text-align: center;
	pointer-events: none;
}

/* ==========================================================================
   Grid layout (Pinterest / masonry shoppable grid)
   ========================================================================== */

.wcsv-grid-wrapper {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.wcsv-grid-title {
	text-align: center;
	font-size: 28px;
	font-weight: 700;
	margin: 0 0 24px;
}

.wcsv-grid-columns {
	column-count: 3;
	column-gap: 14px;
}

.wcsv-grid-item {
	break-inside: avoid;
	margin-bottom: 14px;
	background: #fff;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
	display: inline-block;
	width: 100%;
}

.wcsv-grid-thumb-btn {
	position: relative;
	display: block;
	width: 100%;
	border: none;
	padding: 0;
	margin: 0;
	cursor: pointer;
	background: #000;
}

.wcsv-grid-thumb-img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}

.wcsv-grid-thumb-placeholder {
	aspect-ratio: 3 / 4;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(160deg, #2b2b2b, #101010);
}

.wcsv-grid-thumb-btn::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 40%);
	pointer-events: none;
}

.wcsv-grid-play-badge {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	color: #111;
	font-size: 11px;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
}

.wcsv-grid-caption {
	position: absolute;
	left: 10px;
	right: 10px;
	bottom: 10px;
	z-index: 2;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	text-align: left;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wcsv-grid-product {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px;
	text-decoration: none;
	color: inherit;
}

.wcsv-grid-product-img {
	width: 34px;
	height: 34px;
	border-radius: 6px;
	object-fit: cover;
	flex-shrink: 0;
	background: #f5f5f5;
}

.wcsv-grid-product-info {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.wcsv-grid-product-name {
	font-size: 13px;
	font-weight: 600;
	color: #111;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wcsv-grid-product-price {
	font-size: 13px;
	font-weight: 700;
	color: #111;
}

.wcsv-grid-price-regular {
	font-weight: 400;
	color: #999;
	margin-right: 4px;
}

@media (max-width: 768px) {
	.wcsv-grid-columns {
		column-count: 2;
	}
}

@media (max-width: 400px) {
	.wcsv-grid-columns {
		column-count: 2;
		column-gap: 8px;
	}
	.wcsv-grid-item {
		margin-bottom: 8px;
	}
}

/* ==========================================================================
   Thumbnail autoplay video previews (Instagram / TikTok grid style)
   ========================================================================== */

/**
 * Both the grid and carousel thumbnail buttons use the same stacking model:
 *
 *   [button]
 *     ├── <video.…-thumb-preview>   position:absolute, full cover, z-index 1
 *     ├── <img.…-thumb> / placeholder   position relative (normal flow)
 *     ├── .…-play-badge              z-index 2
 *     └── .…-caption                 z-index 2
 *
 * The <img> establishes the button's natural height.
 * The <video> is stacked on top via absolute positioning.
 * When the video is playing (.wcsv-preview-active) it fades in over the img.
 * When the play badge is visible it sits above the video.
 */

/* ---- Grid preview video ---- */
.wcsv-grid-thumb-btn {
	/* Needed so the absolute-positioned preview video is contained */
	position: relative;
}

.wcsv-grid-thumb-preview {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
	opacity: 0;
	transition: opacity 0.35s ease;
	display: block;
	background: #000;
	/* Keep pointer-events off so button clicks pass through cleanly */
	pointer-events: none;
}

/* Fade the preview in once it is actually playing */
.wcsv-grid-thumb-preview.wcsv-preview-active {
	opacity: 1;
}

/* Hide the static play badge while the live preview is running */
.wcsv-grid-thumb-btn:has(.wcsv-grid-thumb-preview.wcsv-preview-active) .wcsv-grid-play-badge {
	opacity: 0;
	transition: opacity 0.25s ease;
}

/* ---- Carousel preview video ---- */
.wcsv-carousel-item {
	position: relative;
}

.wcsv-carousel-thumb-preview {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
	opacity: 0;
	transition: opacity 0.35s ease;
	display: block;
	background: #000;
	pointer-events: none;
}

.wcsv-carousel-thumb-preview.wcsv-preview-active {
	opacity: 1;
}

/* Hide the static play badge while the live preview is running */
.wcsv-carousel-item:has(.wcsv-carousel-thumb-preview.wcsv-preview-active) .wcsv-carousel-play-badge {
	opacity: 0;
	transition: opacity 0.25s ease;
}

/* Make sure captions and gradient overlay stay above the preview video */
.wcsv-grid-thumb-btn::after,
.wcsv-carousel-item::after {
	z-index: 2;
}

.wcsv-grid-play-badge,
.wcsv-grid-caption,
.wcsv-carousel-play-badge,
.wcsv-carousel-caption {
	z-index: 3;
}

/* Restore the play badge transition default */
.wcsv-grid-play-badge,
.wcsv-carousel-play-badge {
	transition: opacity 0.25s ease;
}

/* ==========================================================================
   Instagram-style Story Bar  +  Story Lightbox
   ========================================================================== */

/* ---------- Story bar wrapper ---------- */
/* ==========================================================================
   Instagram-style Story Bar  +  Story Lightbox
   ========================================================================== */

/* ---------- Story bar wrapper ---------- */
.wcsv-story-bar-wrapper {
	width: 100%;
	padding: 12px 0;
}
.wcsv-story-bar-title {
	font-size: 1.1rem;
	font-weight: 600;
	margin: 0 0 10px 4px;
}

/* Horizontal scrollable row of bubbles */
.wcsv-story-bar {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	padding: 4px 8px 12px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.wcsv-story-bar::-webkit-scrollbar { display: none; }

/* ---------- Story bubble button ---------- */
.wcsv-story-bubble {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 6px;
	background: none !important;
	background-color: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0;
	cursor: pointer;
	flex-shrink: 0;
	transition: transform 0.18s ease;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
	text-align: center;
	color: inherit;
}
.wcsv-story-bubble:hover  { transform: scale(1.07); }
.wcsv-story-bubble:active { transform: scale(0.96); }
.wcsv-story-bubble:focus-visible {
	outline: 2px solid #0073aa;
	outline-offset: 4px;
	border-radius: 50%;
}

/* Gradient ring */
.wcsv-story-ring {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	padding: 3px;
	background: linear-gradient(135deg, #f58529, #dd2a7b, #8134af, #515bd4);
	box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.wcsv-story-bubble.wcsv-story-seen .wcsv-story-ring {
	background: #c8c8c8;
}

/* Avatar image */
.wcsv-story-avatar {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid #fff;
	background: #f0f0f0;
	box-sizing: border-box;
}
/* Keep the avatar photo a perfect circle even if the theme / page builder
   resets <img> (height:auto, border-radius:0, max-width, etc.). */
img.wcsv-story-avatar {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	border-radius: 50% !important;
	object-fit: cover !important;
	border: 3px solid #fff !important;
	box-shadow: none !important;
	margin: 0 !important;
}
.wcsv-story-avatar-initials {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.6rem;
	font-weight: 700;
	color: #fff;
	background: linear-gradient(135deg, #f58529, #dd2a7b);
	border: 3px solid #fff;
	border-radius: 50%;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
}

/* Label */
.wcsv-story-label {
	font-size: 0.72rem;
	font-weight: 500;
	color: #333;
	max-width: 72px;
	text-align: center;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* ==========================================================================
   Story Lightbox — full-screen overlay with centered phone-shape card
   ========================================================================== */

/* Backdrop */
.wcsv-story-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999999;
	background: rgba(0, 0, 0, 0.92);
	display: flex;
	align-items: center;
	justify-content: center;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.22s ease, visibility 0.22s;
}
.wcsv-story-lightbox.wcsv-story-open {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}

/*
 * Phone-shaped card — everything lives inside this single container.
 * On mobile  : fills the whole screen (100vw × 100dvh).
 * On desktop : centred column, max 420px wide, max 92vh tall, rounded.
 */
.wcsv-story-card {
	position: relative;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	max-width: 420px;
	max-height: 92vh;
	background: #000;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 0;
}
@media (min-width: 600px) {
	.wcsv-story-card {
		border-radius: 16px;
		box-shadow: 0 8px 48px rgba(0, 0, 0, 0.6);
	}
}

/* ---------- Progress bar (inside card) ---------- */
.wcsv-story-progress-track {
	position: absolute;
	top: 10px;
	left: 10px;
	right: 10px;
	height: 3px;
	background: rgba(255, 255, 255, 0.35);
	border-radius: 3px;
	z-index: 20;
}
.wcsv-story-progress-bar {
	height: 100%;
	width: 0;
	background: #fff;
	border-radius: 3px;
	transition: width linear;
}

/* ---------- Header (inside card) ---------- */
.wcsv-story-header {
	position: absolute;
	top: 22px;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 14px;
	z-index: 20;
}
.wcsv-story-header-left {
	display: flex;
	align-items: center;
	gap: 10px;
}
.wcsv-story-header-avatar {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	overflow: hidden;
	border: 2px solid #fff;
	flex-shrink: 0;
	background: #333;
}
.wcsv-story-header-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.wcsv-story-header-title {
	font-size: 0.92rem;
	font-weight: 600;
	color: #fff;
	text-shadow: 0 1px 4px rgba(0,0,0,0.7);
}
.wcsv-story-close {
	background: rgba(0, 0, 0, 0.4);
	border: none !important;
	color: #fff !important;
	font-size: 1.1rem;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.18s;
	flex-shrink: 0;
	line-height: 1;
	padding: 0 !important;
}
.wcsv-story-close:hover { background: rgba(255,255,255,0.2); }

/* ---------- Video fills the card ---------- */
.wcsv-story-stage {
	flex: 1;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: #000;
}
.wcsv-story-video {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	background: #000;
}

/* ---------- Tap zones: left 35% = prev, right 35% = next, middle = pause ---------- */
.wcsv-story-tap {
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 10;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	/* visible debug hint: uncomment to test zones
	   background: rgba(255,0,0,0.15); */
}
.wcsv-story-tap-prev  { left: 0;   width: 35%; }
.wcsv-story-tap-pause { left: 35%; width: 30%; }
.wcsv-story-tap-next  { right: 0;  width: 35%; }

/* ---------- Mute button (inside card, bottom-right) ---------- */
.wcsv-story-mute-btn {
	position: absolute;
	bottom: 80px;
	right: 14px;
	z-index: 20;
	background: rgba(0, 0, 0, 0.45) !important;
	border: none !important;
	color: #fff !important;
	font-size: 1.2rem;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 !important;
	transition: background 0.18s;
	line-height: 1;
}
.wcsv-story-mute-btn:hover { background: rgba(255,255,255,0.2) !important; }

/* ---------- Footer: Shop Now CTA (inside card, bottom) ---------- */
.wcsv-story-footer {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 20;
	padding: 32px 20px 24px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	background: linear-gradient(transparent, rgba(0,0,0,0.75));
	pointer-events: none;
}
.wcsv-story-shop-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 13px 36px;
	background: #fff;
	color: #111 !important;
	font-size: 0.95rem;
	font-weight: 700;
	border-radius: 30px;
	text-decoration: none !important;
	letter-spacing: 0.02em;
	box-shadow: 0 4px 16px rgba(0,0,0,0.3);
	transition: transform 0.18s, background 0.18s;
	pointer-events: auto;
}
.wcsv-story-shop-btn:hover {
	background: #f0f0f0;
	transform: scale(1.04);
}

/* ---------- Prev / Next arrow hints (desktop only) ---------- */
.wcsv-story-arrow {
	display: none;
}
@media (min-width: 600px) {
	.wcsv-story-arrow {
		display: flex;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		z-index: 9999999;
		background: rgba(255,255,255,0.15);
		border: none;
		color: #fff;
		width: 44px;
		height: 44px;
		border-radius: 50%;
		align-items: center;
		justify-content: center;
		font-size: 1.4rem;
		cursor: pointer;
		transition: background 0.18s;
		backdrop-filter: blur(4px);
	}
	.wcsv-story-arrow:hover { background: rgba(255,255,255,0.3); }
	.wcsv-story-arrow-prev { right: calc(50% + 230px); }
	.wcsv-story-arrow-next { left:  calc(50% + 230px); }
}

/* ---------- Reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.wcsv-story-progress-bar,
	.wcsv-story-bubble { transition: none; }
}

/* Body scroll lock */
body.wcsv-story-active {
	overflow: hidden !important;
}