/**
 * Bella single product page — Laila Love (pos-qatar.com).
 * Isolates WoodMart single product into Bella-style layout.
 */

body.leila-bella-single {
	--color-foreground: 18, 18, 18;
	--color-background: 255, 245, 247;
	--font-body-scale: 1;
	--font-heading-scale: 1;
	background: #fff5f7;
}

body.leila-bella-single .wd-page-title,
body.leila-bella-single .woocommerce-breadcrumb,
body.leila-bella-single .wd-builder-off .entry-summary > .woocommerce-product-rating,
body.leila-bella-single .wd-single-breadcrumbs,
body.leila-bella-single .product-image-summary .wd-product-brands,
body.leila-bella-single .wd-single-product .wd-nav-product-tabs,
body.leila-bella-single .woocommerce-tabs,
body.leila-bella-single .wd-single-footer {
	display: none !important;
}

body.leila-bella-single .main-page-wrapper,
body.leila-bella-single .wd-content-area,
body.leila-bella-single .site-content,
body.leila-bella-single .content-layout-wrapper {
	background: #fff5f7 !important;
}

body.leila-bella-single .container {
	max-width: 1200px;
}

/* Hide WoodMart default gallery/summary when our Bella PDP is present */
body.leila-bella-single .product-image-summary,
body.leila-bella-single .wd-single-product:not(.leila-bella-product),
body.leila-bella-single .woocommerce-product-gallery:not(.leila-bella-pdp .woocommerce-product-gallery) {
	/* keep our template only */
}

.leila-bella-pdp {
	padding: 2rem 0 3rem;
}

.leila-bella-pdp .page-width {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

.leila-bella-pdp .product.grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	margin: 0;
}

/* Tablet + desktop only — neutralize Dawn .grid__item flex widths that shrink columns */
@media (min-width: 750px) {
	.leila-bella-pdp .product.grid {
		display: grid !important;
		grid-template-columns: minmax(0, 55%) minmax(0, 45%) !important;
		gap: 0 !important;
		align-items: start;
		flex-wrap: nowrap !important;
		column-gap: 0 !important;
		row-gap: 0 !important;
	}

	.leila-bella-pdp .product.grid > .grid__item,
	.leila-bella-pdp .product__media-wrapper,
	.leila-bella-pdp .product__info-wrapper,
	.leila-bella-pdp .product--medium:not(.product--no-media) .product__media-wrapper,
	.leila-bella-pdp .product--medium:not(.product--no-media) .product__info-wrapper {
		width: 100% !important;
		max-width: none !important;
		min-width: 0 !important;
		flex-grow: 0 !important;
		flex-shrink: 1 !important;
		flex-basis: auto !important;
	}

	.leila-bella-pdp .product__info-wrapper {
		padding: 0 0 0 3rem !important;
	}

	.leila-bella-pdp .product__column-sticky {
		position: sticky;
		top: 6rem;
		display: block;
	}

	.leila-bella-pdp .product__media {
		width: 100%;
	}

	.leila-bella-pdp form.cart,
	.leila-bella-pdp .variations_form,
	.leila-bella-pdp .leila-buy-box,
	.leila-bella-pdp .leila-power-field,
	.leila-bella-pdp .single_add_to_cart_button,
	.leila-bella-pdp .product-form__submit {
		max-width: 100%;
	}
}

@media (min-width: 990px) {
	.leila-bella-pdp .product__info-wrapper {
		padding: 0 0 0 4rem !important;
	}
}

.leila-bella-pdp .product__media-list {
	position: relative;
}

.leila-bella-pdp .product__media-item {
	display: none;
}

.leila-bella-pdp .product__media-item.is-active {
	display: block;
}

.leila-bella-pdp .product__media {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	background: #fff;
	overflow: hidden;
}

.leila-bella-pdp .product__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Thumbnail strip — override Dawn absolute/flex collapse */
.leila-bella-pdp .thumbnail-slider {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	margin-top: 1rem;
	padding: 0 !important;
}

.leila-bella-pdp .thumbnail-list {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: 0.75rem !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	flex: none !important;
	overflow: visible !important;
}

.leila-bella-pdp .thumbnail-list__item {
	position: relative !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	aspect-ratio: 1 / 1;
	list-style: none !important;
}

.leila-bella-pdp .thumbnail-list__item::before {
	content: none !important;
	display: none !important;
	padding: 0 !important;
}

.leila-bella-pdp .thumbnail {
	position: relative !important;
	inset: auto !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	min-height: 0 !important;
	padding: 0 !important;
	border: 1px solid transparent !important;
	background: #fff !important;
	cursor: pointer;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	color: inherit;
}

.leila-bella-pdp .thumbnail img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
	pointer-events: none;
}

.leila-bella-pdp .thumbnail-list__item.is-active .thumbnail,
.leila-bella-pdp .thumbnail[aria-current="true"] {
	box-shadow: 0 0 0 1px #121212 !important;
	border-color: #121212 !important;
}

.leila-bella-pdp .product__text.caption-with-letter-spacing {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.75rem;
	margin: 0 0 0.5rem;
	color: #121212;
}

.leila-bella-pdp .product__title h1 {
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(2rem, 4vw, 2.75rem);
	font-weight: 500;
	margin: 0 0 1.25rem;
	line-height: 1.15;
	color: #121212;
}

.leila-bella-pdp .product__inventory.out-of-stock {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0 0 1.25rem;
	padding: 0.45rem 0.85rem;
	border-radius: 999px;
	background: #111;
	color: #fff;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.leila-bella-pdp .price {
	margin: 0 0 1.35rem;
	font-size: 1.15rem;
	letter-spacing: 0.05em;
}

.leila-bella-pdp .price del,
.leila-bella-pdp .price .price-item--regular {
	opacity: 0.7;
	font-size: 0.95rem;
}

.leila-bella-pdp .badge.price__badge-sale,
.leila-bella-pdp .onsale {
	display: inline-block;
	margin-left: 0.5rem;
	padding: 0.2rem 0.55rem;
	background: #f4c2c2 !important;
	color: #000 !important;
	border-radius: 4px;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
}

.leila-bella-pdp .product__tax,
.leila-bella-pdp .icon-with-text,
.leila-bella-pdp .product__description {
	display: none !important;
}

.leila-bella-pdp .leila-accent-teal {
	color: #098b62;
}

.leila-bella-pdp .leila-accent-purple {
	color: #53409c;
}

/* Accordions */
.leila-bella-pdp .accordion {
	margin-top: 1.5rem;
	border-top: 1px solid rgba(18, 18, 18, 0.08);
	border-bottom: 1px solid rgba(18, 18, 18, 0.08);
}

.leila-bella-pdp .accordion + .accordion {
	border-top: none;
	margin-top: 0;
}

.leila-bella-pdp .accordion summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.25rem 0;
	cursor: pointer;
	list-style: none;
}

.leila-bella-pdp .accordion summary::-webkit-details-marker {
	display: none;
}

.leila-bella-pdp .accordion .summary__title {
	display: flex;
	align-items: center;
	flex: 1;
	gap: 0.75rem;
}

.leila-bella-pdp .accordion__title {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
}

.leila-bella-pdp .accordion .svg-wrapper,
.leila-bella-pdp .accordion .icon-accordion {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.leila-bella-pdp .accordion .icon-caret {
	width: 10px;
	height: 6px;
	transition: transform 0.2s ease;
}

.leila-bella-pdp .accordion details[open] > summary .icon-caret {
	transform: rotate(180deg);
}

.leila-bella-pdp .accordion__content {
	padding: 0 0.5rem 1.25rem;
}

.leila-bella-pdp .product-specs,
.leila-bella-pdp .data-table {
	width: 100%;
	border-collapse: collapse;
}

.leila-bella-pdp .product-specs td,
.leila-bella-pdp .data-table td {
	padding: 0.45rem 0;
	border-bottom: 1px solid rgba(18, 18, 18, 0.06);
	font-size: 0.9rem;
}

.leila-bella-pdp .spec-name {
	font-weight: 600;
	letter-spacing: 0.04em;
	width: 45%;
}

/* WooCommerce form — Bella look */
.leila-bella-pdp form.cart,
.leila-bella-pdp .variations_form {
	margin: 1.5rem 0;
	max-width: 28rem;
}

.leila-bella-pdp .variations {
	width: 100%;
	margin-bottom: 1rem;
}

.leila-bella-pdp .variations td,
.leila-bella-pdp .variations th {
	display: block;
	padding: 0;
	border: none;
	text-align: left;
}

.leila-bella-pdp .variations label,
.leila-bella-pdp .form__label,
.leila-bella-pdp .quantity__label {
	display: block;
	margin-bottom: 0.4rem;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.leila-bella-pdp .variations select,
.leila-bella-pdp .select__select {
	width: 100%;
	min-height: 48px;
	padding: 0.75rem 2.5rem 0.75rem 1rem;
	border: 1px solid rgba(18, 18, 18, 0.2);
	border-radius: 0;
	background: #fff;
	font-size: 1rem;
	appearance: none;
	-webkit-appearance: none;
}

.leila-bella-pdp .quantity {
	display: inline-flex;
	align-items: center;
	border: 1px solid rgba(18, 18, 18, 0.2);
	margin: 0.75rem 0 1rem;
}

.leila-bella-pdp .quantity .qty {
	width: 3.5rem;
	border: none;
	text-align: center;
	height: 44px;
	background: transparent;
	box-shadow: none !important;
}

.leila-bella-pdp .single_add_to_cart_button,
.leila-bella-pdp .product-form__submit,
.leila-bella-pdp button.button.alt,
.leila-bella-pdp form.cart .single_add_to_cart_button.button,
body.leila-bella-single .leila-bella-pdp .single_add_to_cart_button {
	display: block !important;
	width: 100% !important;
	max-width: 28rem;
	min-height: 52px;
	padding: 0.9rem 1.5rem !important;
	background: #121212 !important;
	background-color: #121212 !important;
	color: #fff !important;
	border: none !important;
	border-radius: 0 !important;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 600;
	font-size: 0.95rem;
}

.leila-bella-pdp .single_add_to_cart_button:hover,
.leila-bella-pdp button.button.alt:hover,
body.leila-bella-single .leila-bella-pdp .single_add_to_cart_button:hover {
	background: #2a2a2a !important;
	background-color: #2a2a2a !important;
	color: #fff !important;
	opacity: 1;
}

/* Related products */
body.leila-bella-single .related.products {
	padding: 3rem 1.5rem 4rem;
	max-width: 1200px;
	margin: 0 auto;
}

body.leila-bella-single .related.products > h2 {
	font-family: Georgia, "Times New Roman", serif;
	text-align: center;
	font-size: 1.75rem;
	margin-bottom: 2rem;
}

body.leila-bella-single .related.products ul.products {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 750px) {
	body.leila-bella-single .related.products ul.products {
		grid-template-columns: repeat(4, 1fr);
	}
}

body.leila-bella-single .related.products ul.products li.product {
	width: 100% !important;
	margin: 0 !important;
	float: none !important;
}

/* Related carousel — restore visible Add to cart (WoodMart wd-add-btn-replace) */
body.leila-bella-single .related-products .wd-add-btn,
body.leila-bella-single .wd-carousel-container.related-products .wd-add-btn {
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
}

body.leila-bella-single .related-products .wd-add-btn-replace .add-to-cart-loop,
body.leila-bella-single .wd-carousel-container.related-products .wd-add-btn-replace .add-to-cart-loop {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	min-height: 40px !important;
	padding: 0.55rem 0.75rem !important;
	overflow: hidden;
	font-size: 0.75rem !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	background-color: #f1ede1 !important;
	background-image: none !important;
	color: #000 !important;
	border: none !important;
	box-shadow: none !important;
}

body.leila-bella-single .related-products .wd-add-btn-replace .add-to-cart-loop span,
body.leila-bella-single .wd-carousel-container.related-products .wd-add-btn-replace .add-to-cart-loop span {
	display: flex !important;
	align-items: center;
	justify-content: center;
	min-height: inherit !important;
	transform: none !important;
	opacity: 1 !important;
}

body.leila-bella-single .related-products .wd-add-btn-replace .add-to-cart-loop::before,
body.leila-bella-single .wd-carousel-container.related-products .wd-add-btn-replace .add-to-cart-loop::before {
	display: none !important;
	content: none !important;
}

body.leila-bella-single .related-products .wd-add-btn-replace .add-to-cart-loop:hover,
body.leila-bella-single .wd-carousel-container.related-products .wd-add-btn-replace .add-to-cart-loop:hover {
	background-color: #e8e2d4 !important;
	color: #000 !important;
}

@media (max-width: 749px) {
	.leila-bella-pdp {
		padding-top: 1rem;
	}

	.leila-bella-pdp .page-width {
		padding: 0 1rem;
	}
}

/* —— Try On 3 Eye Types (Bella scroll button) —— */
.leila-tryon-scroll-section {
	display: flex;
	justify-content: center;
	padding: 1.25rem 1rem 0.5rem;
	background: #fff5f7;
}

.leila-tryon-scroll-btn,
body.leila-bella-single .leila-tryon-scroll-btn,
body.leila-bella-single button.leila-tryon-scroll-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.65rem !important;
	width: 65% !important;
	max-width: 280px !important;
	min-height: 48px !important;
	padding: 0.7rem 1.25rem !important;
	border: none !important;
	border-radius: 999px !important;
	background: #4d1b7e !important;
	background-color: #4d1b7e !important;
	background-image: none !important;
	color: #fff !important;
	font-family: Assistant, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
	font-size: 0.95rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.02em !important;
	text-transform: none !important;
	cursor: pointer !important;
	box-shadow: 0 4px 14px rgba(77, 27, 126, 0.28) !important;
	transition: transform 0.2s ease, background 0.2s ease !important;
}

@media (min-width: 750px) {
	.leila-tryon-scroll-btn,
	body.leila-bella-single .leila-tryon-scroll-btn {
		width: 25% !important;
		max-width: 320px !important;
	}
}

.leila-tryon-scroll-btn:hover,
body.leila-bella-single .leila-tryon-scroll-btn:hover {
	background: #3a1460 !important;
	background-color: #3a1460 !important;
	color: #fff !important;
	transform: translateY(-1px);
}

.leila-tryon-scroll-label,
.leila-tryon-scroll-btn span {
	color: #fff !important;
}

.leila-tryon-scroll-icon {
	display: inline-flex;
	animation: leila-tryon-bounce 1.4s ease-in-out infinite;
}

@keyframes leila-tryon-bounce {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(4px);
	}
}

/* —— Before / After try-on blocks —— */
.leila-tryon-eyes {
	background: #fff5f7;
	padding: 1rem 0 2rem;
}

.leila-tryon-block {
	padding: 1.25rem;
	box-sizing: border-box;
}

.leila-tryon-container {
	position: relative;
	margin: 0 auto;
	max-width: 800px;
	padding: 10px 25px;
	border-radius: 30px;
	border: 1px solid #888;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
	background-image: var(--leila-tryon-grad);
}

@media (max-width: 800px) {
	.leila-tryon-container {
		padding: 10px 20px;
	}
}

.leila-tryon-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 0;
}

@media (max-width: 900px) {
	.leila-tryon-grid {
		display: block;
	}
}

.leila-tryon-headline {
	padding: 0 0 15px;
	text-align: center;
}

.leila-tryon-heading {
	margin: 0 0 10px;
	font-size: 35px;
	line-height: 1.15;
	color: #111;
	font-family: Georgia, "Times New Roman", serif;
	font-weight: 400;
}

.leila-tryon-sub {
	margin: 0;
	font-size: 30px;
	line-height: 1.2;
	color: #111;
	font-weight: 400;
}

@media (max-width: 800px) {
	.leila-tryon-heading {
		font-size: 28px;
	}
	.leila-tryon-sub {
		font-size: 22px;
	}
}

.leila-tryon-feature-wrap {
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
	border-radius: 16px;
}

.leila-tryon-feature {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 16px;
}

.leila-tryon-feature img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.leila-tryon-slider {
	position: absolute;
	inset: 10px;
	width: calc(100% - 20px);
	height: calc(100% - 20px);
	margin: 0;
	padding: 0;
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	outline: none;
	cursor: ew-resize;
	z-index: 5;
}

.leila-tryon-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 20px;
	height: 800px;
	background: transparent;
	border: none;
	box-shadow: none;
	cursor: ew-resize;
}

.leila-tryon-slider::-moz-range-thumb {
	width: 20px;
	height: 800px;
	background: transparent;
	border: none;
	box-shadow: none;
	cursor: ew-resize;
}

.leila-tryon-bar {
	position: absolute;
	top: 0;
	width: 5px;
	height: 100%;
	transform: translateX(-2.5px);
	pointer-events: none;
	background: #fff;
	opacity: 0.35;
	z-index: 3;
}

.leila-tryon-icon {
	position: absolute;
	top: 50%;
	width: 50px;
	height: 50px;
	transform: translate(-25px, -25px);
	pointer-events: none;
	background: #fff;
	opacity: 0.5;
	border-radius: 50%;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
}

.leila-tryon-icon svg {
	width: 25px;
	height: 25px;
	fill: #111;
}

.leila-tryon-tag {
	position: absolute;
	top: 10px;
	display: inline-block;
	background: rgba(255, 255, 255, 0.75);
	padding: 5px 10px;
	border-radius: 5px;
	font-size: 13px;
	color: #111;
	z-index: 4;
	pointer-events: none;
}

.leila-tryon-tag--before {
	left: 10px;
}

.leila-tryon-tag--after {
	right: 10px;
}

/* POWER field */
.leila-bella-pdp .leila-power-field {
	margin: 0 0 1rem;
	max-width: 28rem;
}

.leila-bella-pdp .leila-power-field .form__label {
	display: block;
	margin: 0 0 0.5rem;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.leila-bella-pdp .leila-power-field .select__select {
	width: 100%;
	min-height: 48px;
	padding: 0.6rem 2rem 0.6rem 0.85rem;
	border: 1px solid rgba(18, 18, 18, 0.2);
	border-radius: 0;
	background: #fff;
	font-size: 1rem;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%23121212' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.85rem center;
}

/* Simplified buy box */
.leila-bella-pdp .leila-buy-box {
	max-width: 28rem;
	margin: 1.25rem 0 1.75rem;
}

.leila-bella-pdp .leila-box-note {
	margin: 0 0 1rem;
	font-size: 0.95rem;
	line-height: 1.4;
	color: #121212;
}

.leila-bella-pdp .leila-box-note-sep {
	margin: 0 0.4rem;
	opacity: 0.5;
}

.leila-bella-pdp .leila-power-tip {
	margin: 0.85rem 0 0;
	font-size: 0.85rem;
	line-height: 1.4;
	color: rgba(18, 18, 18, 0.65);
}

.leila-bella-pdp form.cart .quantity,
.leila-bella-pdp .leila-buy-box .quantity,
body.leila-bella-single .leila-bella-pdp .cart .qty {
	display: none !important;
}

.leila-bella-pdp form.cart .stock,
.leila-bella-pdp .leila-buy-box .stock {
	display: none !important;
}

.leila-bella-pdp .leila-buy-box .single_add_to_cart_button {
	margin-top: 0.25rem !important;
	width: 100% !important;
	min-height: 48px !important;
	padding: 0.95rem 1.25rem !important;
	border: none !important;
	border-radius: 10px !important;
	background: #111 !important;
	color: #fff !important;
	font-family: Georgia, "Times New Roman", serif !important;
	font-size: 0.95rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18) !important;
}

.leila-bella-pdp .leila-buy-box .single_add_to_cart_button:hover,
.leila-bella-pdp .leila-buy-box .single_add_to_cart_button:focus {
	background: #000 !important;
	color: #fff !important;
	opacity: 1 !important;
}

/* Hide WoodMart extras on Bella PDP */
body.leila-bella-single .wd-product-brands,
body.leila-bella-single .woocommerce-product-rating,
body.leila-bella-single .product_meta,
body.leila-bella-single .wd-compare-btn,
body.leila-bella-single .leila-bella-product > .summary:not(.leila-bella-pdp *),
body.leila-bella-single .wd-single-add-img {
	display: none !important;
}
