/**
 * VisionaryCue Commerce Pro - single product, gallery, variations, quick view.
 */

.vc-product {
	background: var(--vc-background);
	padding-bottom: var(--vc-space-8);
}

.vc-product__layout {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: var(--vc-space-7);
	align-items: start;
	padding-block: var(--vc-space-4) var(--vc-space-6);
}

.vc-product__summary.is-sticky {
	position: sticky;
	top: calc(var(--vc-sticky-offset) + var(--vc-space-4));
}

/* -------------------------------------------------------------- Gallery --- */

.vc-gallery {
	display: grid;
	gap: var(--vc-space-3);
}

.vc-gallery--thumbs-left { grid-template-columns: 84px minmax(0, 1fr); }
.vc-gallery--thumbs-left .vc-gallery__thumbs { order: -1; grid-row: 1; flex-direction: column; }
.vc-gallery--thumbs-bottom { grid-template-columns: minmax(0, 1fr); }

/*
 * A product with one image has no thumbnail strip, so the gallery must not
 * reserve the 84px thumbs column: the viewport is then the only child and
 * grid auto-placement drops it into that narrow track, rendering the main
 * image at thumbnail size. Must stay after the layout rules above, which
 * carry the same specificity.
 */
.vc-gallery--single { grid-template-columns: minmax(0, 1fr); }

.vc-gallery__viewport {
	position: relative;
	background: var(--vc-surface);
	border: 1px solid var(--vc-border);
	border-radius: var(--vc-card-radius);
	overflow: hidden;
}

.vc-gallery__stage {
	position: relative;
	margin: 0;
	aspect-ratio: var(--vc-gallery-ratio);
	display: grid;
	place-items: center;
	overflow: hidden;
	background: var(--vc-surface);
	cursor: zoom-in;
}

.vc-gallery__image {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform 0.35s var(--vc-ease);
	mix-blend-mode: multiply;
}

.vc-gallery__stage.is-zooming .vc-gallery__image { transform: scale(1.9); }

.vc-gallery__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border: 1px solid var(--vc-border);
	border-radius: 50%;
	background: color-mix(in srgb, var(--vc-surface) 92%, transparent);
	color: var(--vc-text);
	cursor: pointer;
	opacity: 0;
	transition: opacity var(--vc-transition) var(--vc-ease);
}

.vc-gallery__viewport:hover .vc-gallery__nav,
.vc-gallery__nav:focus-visible { opacity: 1; }

.vc-gallery__nav--prev { left: 10px; }
.vc-gallery__nav--next { right: 10px; }

.vc-gallery__expand {
	position: absolute;
	right: 10px;
	bottom: 10px;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--vc-border);
	border-radius: 50%;
	background: color-mix(in srgb, var(--vc-surface) 92%, transparent);
	color: var(--vc-muted);
	cursor: pointer;
}

.vc-gallery__expand:hover { color: var(--vc-text); }

.vc-gallery__thumbs {
	display: flex;
	gap: 8px;
	overflow: auto;
	scrollbar-width: thin;
}

.vc-gallery__thumb {
	flex: none;
	width: 74px;
	height: 74px;
	padding: 4px;
	border: 1px solid var(--vc-border);
	border-radius: var(--vc-radius-sm);
	background: var(--vc-surface);
	cursor: pointer;
	overflow: hidden;
	transition: border-color var(--vc-transition) var(--vc-ease);
}

.vc-gallery__thumb img { width: 100%; height: 100%; object-fit: contain; }
.vc-gallery__thumb.is-active { border-color: var(--vc-primary); border-width: 2px; }

.vc-gallery__stack { display: grid; gap: var(--vc-space-3); }

.vc-gallery__stack .vc-gallery__stage {
	border: 1px solid var(--vc-border);
	border-radius: var(--vc-card-radius);
}

.vc-lightbox__img { display: block; width: 100%; height: auto; }

/* -------------------------------------------------------------- Summary --- */

.vc-product-summary {
	display: flex;
	flex-direction: column;
	gap: var(--vc-space-3);
	background: var(--vc-surface);
	border: 1px solid var(--vc-border);
	border-radius: var(--vc-card-radius);
	padding: var(--vc-space-5);
}

.vc-product-summary__category {
	font-size: 0.78em;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 700;
	color: var(--vc-muted);
}

.vc-product-summary__category a { color: inherit; text-decoration: none; }
.vc-product-summary__category a:hover { color: var(--vc-primary); }

.vc-product-summary__title.vc-product-summary__title {
	margin: 0;
	font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem);
	font-weight: var(--vc-heading-weight);
	line-height: 1.22;
	letter-spacing: -0.015em;
}

.vc-product-summary__title--sm { font-size: 1.25rem; }
.vc-product-summary__title a { color: inherit; text-decoration: none; }

.vc-product-summary__rating {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.vc-product-summary__reviews {
	font-size: 0.82em;
	color: var(--vc-muted);
	text-decoration: none;
	border-bottom: 1px dotted currentColor;
}

.vc-product-summary__reviews:hover { color: var(--vc-primary); }

.vc-product-summary__excerpt {
	color: var(--vc-muted);
	font-size: 0.93em;
}

.vc-product-summary__excerpt p:last-child { margin-bottom: 0; }

.vc-product-summary__pricing {
	display: flex;
	align-items: center;
	gap: var(--vc-space-3);
	flex-wrap: wrap;
}

.vc-product-summary__price { font-size: 1.5em; }
.vc-product-summary__price del { font-size: 0.62em; }
.vc-product-summary__price ins { text-decoration: none; }

.vc-product-summary__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vc-space-2) var(--vc-space-4);
	padding-block: var(--vc-space-2);
	border-block: 1px solid var(--vc-border);
	font-size: 0.85em;
}

.vc-product-summary__stock,
.vc-product-summary__delivery,
.vc-product-summary__sku {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--vc-muted);
}

.vc-product-summary__stock { font-weight: 600; }
.vc-product-summary__stock--instock { color: var(--vc-success); }
.vc-product-summary__stock--lowstock { color: var(--vc-warning); }
.vc-product-summary__stock--onbackorder { color: var(--vc-info); }
.vc-product-summary__stock--outofstock { color: var(--vc-error); }
.vc-product-summary__delivery { color: var(--vc-primary); font-weight: 600; }

/* ----------------------------------------------------------- Variations --- */

.vc-variations { display: flex; flex-direction: column; gap: var(--vc-space-3); }
.vc-variations__row { display: flex; flex-direction: column; gap: 8px; }
.vc-variations__options { display: flex; flex-wrap: wrap; gap: 8px; }

.vc-variations__option {
	min-height: 40px;
	padding: 8px 16px;
	border: 1px solid var(--vc-border-strong);
	border-radius: var(--vc-button-radius);
	background: var(--vc-surface);
	color: var(--vc-text);
	font: inherit;
	font-size: 0.88em;
	font-weight: 600;
	cursor: pointer;
	transition: border-color var(--vc-transition) var(--vc-ease),
		background var(--vc-transition) var(--vc-ease),
		color var(--vc-transition) var(--vc-ease);
}

.vc-variations__option:hover:not(:disabled) { border-color: var(--vc-primary); color: var(--vc-primary); }

.vc-variations__option.is-selected {
	background: var(--vc-primary);
	border-color: var(--vc-primary);
	color: var(--vc-on-primary);
}

.vc-variations__option.is-unavailable {
	opacity: 0.42;
	cursor: not-allowed;
	text-decoration: line-through;
}

.vc-variations__message { margin: 0; font-size: 0.85em; color: var(--vc-muted); }
.vc-variations__reset { align-self: flex-start; padding-inline: 0; }

/* ------------------------------------------------------------- Grouped --- */

.vc-grouped { display: flex; flex-direction: column; gap: var(--vc-space-2); }

.vc-grouped__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--vc-space-3);
	padding: var(--vc-space-2) 0;
	border-bottom: 1px solid var(--vc-border);
}

.vc-grouped__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vc-grouped__info a { color: var(--vc-text); text-decoration: none; font-weight: 600; font-size: 0.92em; }
.vc-grouped__info a:hover { color: var(--vc-primary); }

/* ------------------------------------------------------------- Actions --- */

.vc-product-summary__actions {
	display: flex;
	align-items: stretch;
	gap: var(--vc-space-2);
	flex-wrap: wrap;
}

.vc-product-summary__qty { flex: none; }
.vc-product-summary__qty .vc-qty__btn { width: 44px; height: 52px; }
.vc-product-summary__qty .vc-qty__input { width: 52px; height: 52px; }
.vc-product-summary__add { flex: 1 1 200px; }
.vc-product-summary__buy { flex: 1 1 160px; }

.vc-product-summary__secondary { display: flex; gap: var(--vc-space-2); flex-wrap: wrap; }
.vc-wishlist-btn--text { min-height: 42px; }
.vc-wishlist-btn.is-active .vc-icon { fill: var(--vc-sale); color: var(--vc-sale); }
.vc-wishlist-btn--text.is-active { border-color: var(--vc-sale); color: var(--vc-sale); }

.vc-product-summary__trust {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vc-space-2) var(--vc-space-4);
	margin: 0;
	padding: var(--vc-space-3) 0 0;
	border-top: 1px solid var(--vc-border);
	list-style: none;
	font-size: 0.82em;
	color: var(--vc-muted);
}

.vc-product-summary__trust li { display: inline-flex; align-items: center; gap: 7px; }

/* --------------------------------------------------------- Tabs/panels --- */

.vc-product-info {
	background: var(--vc-surface);
	border: 1px solid var(--vc-border);
	border-radius: var(--vc-card-radius);
	overflow: hidden;
	margin-bottom: var(--vc-space-6);
}

/*
 * Desktop: the inner wrapper is a wrapping flex row. Triggers keep their
 * natural width and sit on the first line; panels are forced to 100% width so
 * they wrap below, producing a tab bar without moving any nodes in the DOM.
 */
.vc-product-info__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}

.vc-product-info__tab {
	position: relative;
	flex: 0 0 auto;
	order: 0;
	padding: 14px 20px;
	border: 0;
	border-bottom: 2px solid var(--vc-border);
	background: none;
	color: var(--vc-muted);
	font: inherit;
	font-weight: 600;
	font-size: 0.92em;
	white-space: nowrap;
	cursor: pointer;
	transition: color var(--vc-transition) var(--vc-ease), border-color var(--vc-transition) var(--vc-ease);
}

.vc-product-info__tab:hover { color: var(--vc-text); }
.vc-product-info__tab.is-active { color: var(--vc-primary); border-bottom-color: var(--vc-primary); }
.vc-product-info__chevron { display: none; }

/* Filler so the underline runs the full width of the tab row. */
.vc-product-info__inner::after {
	content: "";
	order: 0;
	flex: 1 1 auto;
	border-bottom: 2px solid var(--vc-border);
}

.vc-product-info__panel {
	order: 1;
	flex: 0 0 100%;
	width: 100%;
	padding: var(--vc-space-5);
}

.vc-product-info__panel[hidden] { display: none; }
.vc-product-info__panel > :first-child { margin-top: 0; }
.vc-product-info__panel > :last-child { margin-bottom: 0; }

.vc-specs { width: 100%; border-collapse: collapse; font-size: 0.92em; }
.vc-specs th,
.vc-specs td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--vc-border); vertical-align: top; }
.vc-specs th { width: 34%; color: var(--vc-muted); font-weight: 600; }
.vc-specs tr:last-child th,
.vc-specs tr:last-child td { border-bottom: 0; }

.vc-faq { display: flex; flex-direction: column; gap: var(--vc-space-4); }
.vc-faq__q { margin: 0 0 4px; font-size: 0.98em; font-weight: 700; }
.vc-faq__a { margin: 0; color: var(--vc-muted); }

.vc-reviews { font-size: 0.95em; }

/* ------------------------------------------------------- Sticky mobile --- */

.vc-product-sticky {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: var(--vc-z-floating);
	display: none;
	align-items: center;
	gap: var(--vc-space-3);
	padding: 10px var(--vc-space-3);
	padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
	background: var(--vc-surface);
	border-top: 1px solid var(--vc-border);
	box-shadow: 0 -4px 20px rgba(16, 24, 40, 0.1);
	transform: translateY(110%);
	transition: transform 0.24s var(--vc-ease);
}

.vc-product-sticky.is-visible { transform: none; }
.vc-product-sticky__price { flex: none; font-size: 1.05em; }
.vc-product-sticky__price del { display: none; }
.vc-product-sticky__actions { display: flex; gap: 8px; flex: 1 1 auto; }
.vc-product-sticky__actions .vc-btn { flex: 1 1 0; min-height: 46px; padding-inline: 10px; }

/* ----------------------------------------------------------- Quick view --- */

.vc-quickview__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--vc-space-5);
}

.vc-quickview__summary .vc-product-summary {
	border: 0;
	padding: 0;
	background: transparent;
}

.vc-quickview__link {
	display: inline-block;
	margin-top: var(--vc-space-3);
	font-size: 0.88em;
	font-weight: 700;
	color: var(--vc-primary);
	text-decoration: none;
}

.vc-quickview__link:hover { text-decoration: underline; }
.vc-modal__loading { display: grid; place-items: center; min-height: 240px; }

/* --------------------------------------------------------- Responsive --- */

@media (max-width: 1023px) {
	.vc-product__layout { grid-template-columns: minmax(0, 1fr); gap: var(--vc-space-5); }
	.vc-product__summary.is-sticky { position: static; }
	.vc-gallery--thumbs-left { grid-template-columns: minmax(0, 1fr); }
	.vc-gallery--thumbs-left .vc-gallery__thumbs { order: 1; flex-direction: row; }
	.vc-quickview__layout { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
	.vc-product-summary { padding: var(--vc-space-4); border-radius: var(--vc-radius); }
	.vc-product-summary__actions { flex-direction: column; }
	.vc-product-summary__qty { align-self: flex-start; }
	.vc-product-summary__add,
	.vc-product-summary__buy { flex: 1 1 auto; width: 100%; }

	.vc-product-sticky { display: flex; bottom: var(--vc-mobilenav-height); }
	body:not(.vc-has-mobilenav) .vc-product-sticky { bottom: 0; }

	.vc-gallery__stage { cursor: default; }
	.vc-gallery__nav { opacity: 1; width: 34px; height: 34px; }

	/*
	 * Accordion mode: drop the flex ordering so each panel falls back to its
	 * document position, directly beneath its own trigger.
	 */
	.vc-product-info__inner { display: block; }
	.vc-product-info__inner::after { content: none; }

	.vc-product-info__tab {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--vc-space-2);
		width: 100%;
		padding: 15px var(--vc-space-4);
		border-bottom: 1px solid var(--vc-border);
		color: var(--vc-text);
		white-space: normal;
		text-align: left;
	}

	.vc-product-info__tab.is-active { border-bottom-color: var(--vc-border); }

	.vc-product-info__chevron {
		display: inline-grid;
		place-items: center;
		flex: none;
		transition: transform var(--vc-transition) var(--vc-ease);
	}

	.vc-product-info__tab[aria-expanded="true"] .vc-product-info__chevron { transform: rotate(180deg); }

	.vc-product-info__panel {
		padding: var(--vc-space-4);
		border-bottom: 1px solid var(--vc-border);
		background: var(--vc-background);
	}
}