/**
 * Classic slider only — legacy storefront design.
 * Loaded after extPS-theme-compat.css (which excludes .ext-ps-design--classic).
 */

/* Hide until Owl init (classic only — avoids vertical slide flash) */
.ext-ps-container.ext-ps-design--classic.ext-ps-container-hide {
	display: block !important;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	overflow: hidden;
}

.ext-ps-container.ext-ps-design--classic.ext-ps-container-hide.ext-ps-container-ready,
.ext-ps-container.ext-ps-design--classic.ext-ps-container-ready {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	overflow: visible;
}

.ext-ps-container.ext-ps-design--classic.ext-ps-embed-product {
	width: 100% !important;
	max-width: 100% !important;
}

.ext-ps-container.ext-ps-design--classic,
.ext-ps-container.ext-ps-design--classic .ext-ps-section,
.ext-ps-container.ext-ps-design--classic #demos {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box;
}

.ext-ps-container.ext-ps-design--classic .owl-carousel:not(.owl-loaded),
.ext-ps-container.ext-ps-design--classic #demos .owl-carousel:not(.owl-loaded) {
	display: none !important;
}

.ext-ps-container.ext-ps-design--classic .owl-carousel.owl-loaded,
.ext-ps-container.ext-ps-design--classic #demos .owl-carousel.owl-loaded {
	display: block !important;
	position: relative !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 auto !important;
	padding-bottom: 0 !important;
}

.ext-ps-container.ext-ps-design--classic .owl-carousel .owl-stage-outer {
	width: 100% !important;
	position: relative !important;
}

.ext-ps-container.ext-ps-design--classic .owl-carousel .item {
	padding: 5px !important;
	height: auto !important;
}

.ext-ps-container.ext-ps-design--classic .owl-item {
	margin-right: 0;
}

/* Legacy owl-theme navigation (rectangular grey buttons on image sides) */
.ext-ps-container.ext-ps-design--classic .owl-carousel .owl-nav,
.ext-ps-container.ext-ps-design--classic .owl-theme .owl-nav {
	position: static !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	width: auto !important;
	height: auto !important;
	margin-top: 10px !important;
	padding: 0 !important;
	transform: none !important;
	display: block !important;
	text-align: center !important;
	pointer-events: none !important;
	flex-direction: unset !important;
	justify-content: unset !important;
}

.ext-ps-container.ext-ps-design--classic .owl-nav .owl-next,
.ext-ps-container.ext-ps-design--classic .owl-carousel .owl-nav .owl-next {
	position: absolute !important;
	bottom: 50% !important;
	right: 10px !important;
	top: auto !important;
	left: auto !important;
	margin: 5px !important;
	order: unset !important;
}

.ext-ps-container.ext-ps-design--classic .owl-nav .owl-prev,
.ext-ps-container.ext-ps-design--classic .owl-carousel .owl-nav .owl-prev {
	position: absolute !important;
	bottom: 50% !important;
	left: 10px !important;
	top: auto !important;
	right: auto !important;
	margin: 5px !important;
	order: unset !important;
}

.ext-ps-container.ext-ps-design--classic .owl-theme .owl-nav [class*="owl-"],
.ext-ps-container.ext-ps-design--classic .owl-carousel .owl-nav button,
.ext-ps-container.ext-ps-design--classic .owl-carousel .owl-nav [class*="owl-"] {
	color: #fff !important;
	font-size: 14px !important;
	margin: 5px !important;
	padding: 4px 7px !important;
	background: #d6d6d6 !important;
	display: inline-block !important;
	cursor: pointer !important;
	border-radius: 3px !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	height: auto !important;
	min-height: 0 !important;
	flex: none !important;
	border: none !important;
	box-shadow: none !important;
	line-height: normal !important;
	pointer-events: auto !important;
}

.ext-ps-container.ext-ps-design--classic .owl-theme .owl-nav [class*="owl-"]:hover,
.ext-ps-container.ext-ps-design--classic .owl-carousel .owl-nav button:hover,
.ext-ps-container.ext-ps-design--classic .owl-carousel .owl-nav [class*="owl-"]:hover {
	background: #869791 !important;
	color: #fff !important;
}

/* Legacy plugin did not show pagination dots on the storefront carousel */
.ext-ps-container.ext-ps-design--classic .owl-dots,
.ext-ps-container.ext-ps-design--classic .owl-carousel .owl-dots {
	display: none !important;
	margin-top: -10px !important;
	height: 0 !important;
	padding: 0 !important;
	visibility: hidden !important;
}

.ext-ps-container.ext-ps-design--classic #item-inner-wrapper {
	padding: 20px 20px 0 20px !important;
	height: auto !important;
}

.ext-ps-container.ext-ps-design--classic .thumbnail-container {
	display: block;
	position: relative;
}

.ext-ps-container.ext-ps-design--classic .thumbnail-container img,
.ext-ps-container.ext-ps-design--classic .owl-carousel .owl-item img {
	max-width: 100% !important;
	width: 300px !important;
	height: 300px !important;
	object-fit: cover !important;
	margin: 0 auto !important;
	display: block !important;
}

/* Block themes give classic-design items the full computed item width (see
   extPS-theme-compat.css); the fixed 300px image then leaves dead space
   around it, so scale the image to fill the item instead. Storefront/classic
   themes keep the legacy fixed 300x300 sizing above untouched. */
.ext-ps-container.ext-ps-block-theme.ext-ps-design--classic .thumbnail-container img,
.ext-ps-container.ext-ps-block-theme.ext-ps-design--classic .owl-carousel .owl-item img {
	width: 100% !important;
	height: 100% !important;
	aspect-ratio: 1 / 1;
}

.ext-ps-container.ext-ps-design--classic #btn-addtocart {
	display: flex !important;
	justify-content: center !important;
	text-decoration: none;
}

.ext-ps-container.ext-ps-design--classic #btn-addtocart button {
	max-width: none !important;
	width: auto !important;
	font-size: 13px !important;
	padding: 6px 14px !important;
	margin-bottom: 0 !important;
	border-radius: 3px;
}

.ext-ps-container.ext-ps-design--classic .enlarge-thumbnail,
.ext-ps-container.ext-ps-design--classic .ext-ps-lightbox-trigger {
	position: absolute;
	z-index: 5;
	bottom: 15px;
	right: 15px;
	opacity: 1 !important;
	background: transparent !important;
	border-radius: 0 !important;
	width: auto !important;
	height: auto !important;
	padding: 0 !important;
	border: none !important;
	color: inherit !important;
}

.ext-ps-container.ext-ps-design--classic .ext-ps-atc-wrapper br {
	display: none !important;
}

.ext-ps-container.ext-ps-design--classic .ext-ps-atc-wrapper > p {
	display: contents;
}

.ext-ps-container.ext-ps-design--classic .owl-carousel button.owl-dot,
.ext-ps-container.ext-ps-design--classic .owl-carousel .owl-nav button,
.ext-ps-container.ext-ps-design--classic #btn-addtocart button,
.ext-ps-container.ext-ps-design--classic .ext-ps-atc-btn button {
	appearance: none;
	-webkit-appearance: none;
}

.ext-ps-container.ext-ps-design--classic #btn-addtocart button,
.ext-ps-container.ext-ps-design--classic .ext-ps-atc-btn button {
	white-space: normal !important;
	text-align: center !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 4px !important;
}

.ext-ps-container.ext-ps-design--classic #details-layer-title,
.ext-ps-container.ext-ps-design--classic #details-layer-title a {
	color: var(--ext-ps-title-color, #1a1a1a);
}

.ext-ps-container.ext-ps-design--classic #product-price,
.ext-ps-container.ext-ps-design--classic #product-price #regular-price,
.ext-ps-container.ext-ps-design--classic #product-price ins {
	color: var(--ext-ps-price-color, inherit);
}

.ext-ps-container.ext-ps-design--classic #product-price del {
	color: var(--ext-ps-price-color, inherit);
	opacity: 0.65;
}