/**
 * PRO Quick View — marker button + modal styles.
 */

/* "Quick view" text link above the Add to cart button in an open marker box. */
.lookbook-box .lookbook-quickview {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: auto;
	margin: 6px 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font-size: 12px;
	text-align: center;
	cursor: pointer;
	opacity: 0;
    outline:none;
	visibility: hidden;
    text-decoration: none;
	transform: translateY(-10px);
	transition: all .25s ease;
}
.is-active .lookbook-box .lookbook-quickview {
    opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition-duration: 0.3s;
	transition-delay: 0.2s;
}
.is-active .lookbook-box .lookbook-quickview .material-icons {
	font-size: 18px;
}
.lookbook-box .lookbook-quickview:hover {
	opacity: .7;
	text-decoration: none;
	background: none;
}
/* Base link colour + theme variants (moved from the free stylesheet). */
.lookbook-quickview {
	font-weight: 500;
	color: #1d2327;
	line-height: 1.3;
}
.dark .lookbook-quickview { color: #fff; }
.yellow .lookbook-quickview { color: #000; }
/* Tag layout: sit side by side with the Add to cart button, sized to
   content (the tag box centres the pair with a flex gap). */
.lookbook-layout-3 .lookbook-quickview {
	display: inline-flex !important;
	align-items: center;
	gap: 4px;
	width: auto;
	margin: 0;
}

/* Desktop card grid (layouts 0 and 4): sits under the thumbnail — without
   an explicit area the link would be auto-placed into the first empty cell. */
@media (min-width: 769px) {
	:is(.lookbook-layout-0, .lookbook-layout-4) .lookbook-box .lookbook-quickview {
		grid-area: qv;
		align-self: end;
		margin: 6px 0 0;
	}
}

/* Mobile bottom sheet: the link is always visible (the sheet itself animates)
   and sits in the "qv" grid area — the flexible row of the right column —
   bottom-aligned so it hugs the Add to cart button below it. */
@media (max-width: 768px) {
	.lookbook-box .lookbook-quickview {
		grid-area: qv;
		align-self: end;
		visibility: inherit !important;
		transform: none !important;
		width: auto !important;
		display: flex !important;
		justify-content: flex-start;
		gap: 0;
        margin: 0;
        font-size: 8px;
        position: absolute;
        bottom: 12px;
        text-shadow: 0.5px 1px rgba(0, 0, 0, 0.8);
		transition: all .3s ease;
	}
	.is-active .lookbook-box .lookbook-quickview {
		bottom: 0px;
	}
	.lookbook-box .lookbook-quickview .material-icons {
		font-size: 15px !important;
	}
}

.lbqv-overlay {
	display: none;
	position: fixed;
	inset: 0;
	/* Above the mobile bottom-sheet box (z-index 100001). */
	z-index: 100005;
	background: rgba(0, 0, 0, .78);
	align-items: center;
	justify-content: center;
	overflow: auto;
	padding: 40px 16px;
	box-sizing: border-box;
}
body.lbqv-open { overflow: hidden; }
.lbqv-modal {
	position: relative;
	background: #fff;
	width: 100%;
	max-width: 820px;
	border-radius: 8px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .4);
	animation: lbqvIn .2s ease;
}
@keyframes lbqvIn {
	from { transform: translateY(12px); opacity: 0; }
	to   { transform: translateY(0); opacity: 1; }
}
.lbqv-close {
	position: absolute;
	top: -14px;
	right: -14px;
	width: 30px;
	height: 30px;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: #1d2327;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
	z-index: 2;
}
.lbqv-body { padding: 28px; }
.lbqv-loading { min-height: 120px; }
.lbqv-product { display: flex; gap: 28px; flex-wrap: wrap; }
.lbqv-gallery { flex: 1 1 280px; min-width: 0; }
.lbqv-gallery img { width: 100%; height: auto; border-radius: 6px; display: block; }
.lbqv-summary { flex: 1 1 280px; min-width: 0; }
.lbqv-title { margin: 0 0 8px; font-size: 22px; }
.lbqv-price { font-size: 18px; font-weight: 600; color: #1d1f23; margin-bottom: 12px; }
.lbqv-price del { font-weight: 400; color: #9a9ea6; margin-right: 6px; }
.lbqv-price ins { text-decoration: none; }
.lbqv-excerpt { font-size: 16px; margin-bottom: 16px; color: #555; }
.lbqv-details { display: inline-block; margin-top: 18px; font-size: 13px; color: #666; transition: color .15s ease; }
.lbqv-details:hover { color: #000; }

/* ── WooCommerce add-to-cart form inside the modal ─────────────────────────
   woocommerce_template_single_add_to_cart() prints the theme-less default
   markup, so the whole purchase row is styled here (scoped to .lbqv-body). */

/* One row: [ − 1 + ] [ Add to cart ]. Simple products put qty + button
   straight in form.cart; variable products nest them one div deeper. */
.lbqv-body form.cart,
.lbqv-body .woocommerce-variation-add-to-cart {
	display: flex;
	align-items: stretch;
	gap: 12px;
	margin: 20px 0 0;
}
/* The variable form itself stacks: variations, then price, then the row. */
.lbqv-body form.cart.variations_form {
	display: block;
}

/* Quantity pill with the JS-added − / + steppers. */
.lbqv-body .quantity {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	height: 46px;
	border: 1px solid #e2e4e8;
	border-radius: 999px;
	background: #fff;
	overflow: hidden;
}
.lbqv-body .quantity input.qty {
	width: 44px;
	height: 100%;
	padding: 0;
	border: 0;
	outline: none;
	background: none;
	text-align: center;
	font-size: 15px;
	font-weight: 600;
	color: #1d1f23;
	-moz-appearance: textfield;
	appearance: textfield;
}
.lbqv-body .quantity input.qty::-webkit-inner-spin-button,
.lbqv-body .quantity input.qty::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.lbqv-qty-btn {
	width: 38px;
	height: 100%;
	border: 0;
	padding: 0;
	background: none;
	font-size: 18px;
	line-height: 1;
	color: #555;
	cursor: pointer;
	transition: color .15s ease;
}
.lbqv-qty-btn:hover { color: #000; }
/* Sold individually: WC renders a hidden qty input — collapse the pill. */
.lbqv-body .quantity:not(:has(input.qty:not([type=hidden]))) { display: none; }

.lbqv-body .single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex: 1 1 auto;
	height: 46px;
	border: 0;
	border-radius: 999px;
	padding: 0 28px;
	background: #1d1f23;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .01em;
	cursor: pointer;
	transition: opacity .15s ease, background .15s ease;
}
.lbqv-body .single_add_to_cart_button:hover { opacity: .85; }
.lbqv-body .single_add_to_cart_button.disabled,
.lbqv-body .single_add_to_cart_button.wc-variation-selection-needed,
.lbqv-body .single_add_to_cart_button:disabled {
	opacity: .45;
	cursor: default;
}
.lbqv-body .single_add_to_cart_button.loading {
	opacity: .85;
	cursor: wait;
}
.lbqv-body .single_add_to_cart_button.loading::before {
	content: "";
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	border: 2px solid rgba(255, 255, 255, .35);
	border-top-color: #fff;
	border-radius: 50%;
	animation: lbqvSpin .6s linear infinite;
}
@keyframes lbqvSpin {
	to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
	.lbqv-body .single_add_to_cart_button.loading::before {
		animation: none;
	}
}
.lbqv-body .single_add_to_cart_button.added {
	background: #3858e9;
	opacity: 1;
}

/* Variations: flatten WooCommerce's table into "LABEL  [ select ]" flex
   rows — label left, select filling the rest, vertically centred. */
.lbqv-body table.variations,
.lbqv-body table.variations tbody,
.lbqv-body table.variations th,
.lbqv-body table.variations td {
	display: block;
	padding: 0;
	border: 0;
	margin: 0;
	text-align: left;
}
.lbqv-body table.variations { border-collapse: collapse; width: 100%; }
.lbqv-body table.variations tr {
	display: flex;
	align-items: center;
	gap: 14px;
}
.lbqv-body table.variations tr + tr { margin-top: 12px; }
.lbqv-body table.variations th.label {
	/* Shared width so the selects line up across rows. */
	flex: 0 0 auto;
	min-width: 72px;
}
.lbqv-body table.variations th.label label {
	display: block;
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #777;
}
.lbqv-body table.variations td.value {
	flex: 1 1 auto;
	min-width: 0;
}
.lbqv-body table.variations select {
	width: 100%;
	max-width: 100%;
	padding: 10px 14px;
	border: 1px solid #e2e4e8;
	border-radius: 10px;
	background-color: #fff;
	font-size: 14px;
	color: #1d1f23;
}
/* Selected variation: the modal only shows the price — the description
   would push the add-to-cart row around on every selection. (The reset
   "Clear" link is removed server-side in quick-view.php.) */
.lbqv-body .woocommerce-variation.single_variation {
	margin: 14px 0 0;
}
.lbqv-body .woocommerce-variation-description {
	display: none;
}
.lbqv-body .woocommerce-variation-price {
	font-size: 16px;
	font-weight: 600;
	color: #1d1f23;
}
.lbqv-body .woocommerce-variation-price del { font-weight: 400; color: #9a9ea6; margin-right: 6px; }
.lbqv-body .woocommerce-variation-price ins { text-decoration: none; }

/* Stock notices. */
.lbqv-body .stock { font-size: 13px; margin: 8px 0 0; }
.lbqv-body .stock.in-stock { color: #16a34a; }
.lbqv-body .stock.out-of-stock { color: #dc2626; }

@media (max-width: 600px) {
	.lbqv-product { flex-direction: column; gap: 20px; }
	.lbqv-close { top: 8px; right: 8px; }
	.lbqv-body { padding: 20px; }
	.lbqv-title { font-size: 19px; }
}

/* Content Color override: the "Preview" link follows the explicit
   content colour chosen in the editor (Box > Content Color). */
.lb-content-light .lookbook-quickview { color: #FFF !important; }
.lb-content-dark  .lookbook-quickview { color: #000 !important; }

@media (max-width: 600px) {
	.lbqv-modal {
		width: 90%;
	}
	.lbqv-price {     
		font-size: 16px;
    	font-weight: 500; 
	}
	.lbqv-body table.variations tr {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.lbqv-body table.variations tr {
		flex: 1 1 100%;
	}
}