/**
 * Sticky PDP: full-bleed gallery | scrollable extras | sticky summary.
 * Composition inspired by luxury full-width PDPs (equal image cols + right rail).
 */

:root {
	--dc-sticky-stack-height: calc(var(--dinc-announce-h, 1.85rem) + var(--dinc-header-h-compact, 3.75rem));
	--dc-pdp-sticky-top: calc(var(--dc-sticky-stack-height) + 0.35rem);
	--dc-pdp-col-height: calc(100svh - var(--dc-sticky-stack-height) - 0.75rem);
	--dc-pdp-gutter: clamp(0.5rem, 1.1vw, 0.85rem);
	--dc-pdp-gap: clamp(0.55rem, 0.9vw, 0.85rem);
}

body.admin-bar {
	--dc-sticky-stack-height: calc(32px + var(--dinc-announce-h, 1.85rem) + var(--dinc-header-h-compact, 3.75rem));
}

@media (max-width: 782px) {
	body.admin-bar {
		--dc-sticky-stack-height: calc(46px + var(--dinc-announce-h, 1.85rem) + var(--dinc-header-h-compact, 3.75rem));
	}
}

/* Full-bleed product shell — break Storefront container on large screens */
html body.single-product,
html body.single-product #page,
html body.single-product .site {
	overflow-x: clip;
	max-width: 100%;
}

/* Hide page + column scrollbars (scroll still works) — cleaner luxury rail */
html:has(body.single-product),
html body.single-product,
html body.single-product #page {
	scrollbar-width: none;
	-ms-overflow-style: none;
}

html:has(body.single-product)::-webkit-scrollbar,
html body.single-product::-webkit-scrollbar,
html body.single-product #page::-webkit-scrollbar {
	display: none;
	width: 0 !important;
	height: 0 !important;
}

html body.single-product .col-full,
html body.single-product .site-content > .col-full,
html body.single-product .woocommerce-breadcrumb,
html body.single-product #primary,
html body.single-product .content-area,
html body.single-product .site-main {
	max-width: 100% !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

html body.single-product .col-full {
	padding-left: var(--dc-pdp-gutter) !important;
	padding-right: var(--dc-pdp-gutter) !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Kill Storefront breadcrumb band — red-box white gap above gallery */
html body.single-product .storefront-breadcrumb {
	margin: 0 !important;
	padding: 0.4rem 0 0.55rem !important;
	min-height: 0 !important;
	border: 0 !important;
	background: transparent !important;
}

html body.single-product .storefront-breadcrumb .col-full {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	margin: 0 !important;
}

html body.single-product .woocommerce-breadcrumb {
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.3;
}

html body.single-product .woocommerce-product-gallery:not(.dinc-pdp-media) {
	display: none !important;
}

/*
 * Storefront sets .single-product div.product { overflow:hidden }.
 * That makes sticky `top` act inside the product box and creates a large
 * white gap under the breadcrumb. Force visible so sticky uses the viewport.
 * Grid lives on .dinc-pdp-pin-scope so related products are outside sticky scope.
 */
html body.single-product div.product.dinc-product {
	display: block !important;
	margin-top: 0 !important;
	padding-top: 0 !important;
	width: 100% !important;
	max-width: none !important;
	overflow: visible !important;
}

html body.single-product .dinc-pdp-pin-scope {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	align-items: start;
	width: 100%;
	margin: 0;
	padding: 0;
	position: relative;
	z-index: 1;
	isolation: isolate;
}

html body.single-product .dinc-pdp-media {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
}

html body.single-product .dinc-pdp-stage {
	display: none;
}

html body.single-product .dinc-pdp-mobile {
	display: block;
	position: relative;
	margin: 0;
	padding: 0;
}

html body.single-product .dinc-pdp-mobile__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

html body.single-product .dinc-pdp-mobile__track::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
}

html body.single-product .dinc-pdp-mobile__slide {
	flex: 0 0 100%;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

html body.single-product .dinc-pdp-mobile__img,
html body.single-product .dinc-pdp-primary__img,
html body.single-product .dinc-pdp-gallery__img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	aspect-ratio: var(--dinc-product-aspect, 3 / 4);
	object-fit: cover;
	background: #f3f3f3;
	transition: transform 0.28s ease;
}

html body.single-product .dinc-pdp-gallery__item:not(.dinc-pdp-gallery__item--video) {
	overflow: hidden;
}

@media (hover: hover) and (pointer: fine) {
	html body.single-product .dinc-pdp-primary:hover .dinc-pdp-primary__img,
	html body.single-product .dinc-pdp-gallery__item:not(.dinc-pdp-gallery__item--video):hover .dinc-pdp-gallery__img {
		transform: scale(1.08);
	}
}

@media (prefers-reduced-motion: reduce) {
	html body.single-product .dinc-pdp-mobile__img,
	html body.single-product .dinc-pdp-primary__img,
	html body.single-product .dinc-pdp-gallery__img {
		transition: none;
		transform: none;
	}
}

/* End-of-rail product video cell */
html body.single-product .dinc-pdp-video {
	position: relative;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	aspect-ratio: var(--dinc-product-aspect, 3 / 4);
	background: #111;
	overflow: hidden;
	line-height: 0;
}

html body.single-product .dinc-pdp-video__frame,
html body.single-product .dinc-pdp-video__native {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	margin: 0;
	padding: 0;
	object-fit: cover;
	background: #111;
}

/* Instagram official embed + iframe fallback (no theme poster). */
html body.single-product .dinc-pdp-video__ig {
	position: absolute;
	inset: 0;
	z-index: 2;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}

html body.single-product .dinc-pdp-video.is-ig-ready .dinc-pdp-video__ig {
	opacity: 1;
	pointer-events: auto;
}

html body.single-product .dinc-pdp-video.is-ig-ready .dinc-pdp-video__ig-fallback {
	visibility: hidden;
	pointer-events: none;
}

html body.single-product .dinc-pdp-video__ig .instagram-media,
html body.single-product .dinc-pdp-video__ig .instagram-media-rendered {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	max-width: none !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	background: #111 !important;
	border: 0 !important;
	box-shadow: none !important;
}

html body.single-product .dinc-pdp-video__ig iframe {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	border: 0 !important;
}

html body.single-product .dinc-pdp-video__fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	inset: 0;
	color: #fff;
	text-decoration: underline;
	font-size: 0.9rem;
	line-height: 1.4;
	padding: 1rem;
	text-align: center;
}

html body.single-product .dinc-pdp-mobile__slide--video {
	position: relative;
}

html body.single-product .dinc-pdp-primary__link,
html body.single-product .dinc-pdp-gallery__link {
	display: block;
	margin: 0;
	padding: 0;
	line-height: 0;
}

html body.single-product .dinc-pdp-mobile__dots {
	display: flex;
	justify-content: center;
	gap: 0.4rem;
	margin-top: 0.75rem;
}

html body.single-product .dinc-pdp-mobile__dot {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	border: 1px solid #111;
	background: transparent;
	padding: 0;
	cursor: pointer;
}

html body.single-product .dinc-pdp-mobile__dot.is-active {
	background: #111;
}

/* Hidden scrollbars — keep scroll, hide chrome */
html body.single-product .dinc-pdp-gallery,
html body.single-product div.product.dinc-product .summary {
	scrollbar-width: none;
	-ms-overflow-style: none;
}

html body.single-product .dinc-pdp-gallery::-webkit-scrollbar,
html body.single-product div.product.dinc-product .summary::-webkit-scrollbar {
	display: none;
	width: 0 !important;
	height: 0 !important;
}

@media (min-width: 1024px) {
	html body.single-product .dinc-pdp-mobile {
		display: none !important;
	}

	/* Fixed-height band: columns scroll inside; page scroll moves whole band (no related overlap) */
	html body.single-product .dinc-pdp-pin-scope {
		grid-template-columns: minmax(0, 2.35fr) minmax(17.5rem, 0.9fr);
		column-gap: var(--dc-pdp-gap);
		row-gap: 0;
		align-items: stretch;
		height: var(--dc-pdp-col-height);
		max-height: var(--dc-pdp-col-height);
		min-height: var(--dc-pdp-col-height);
		margin-bottom: 2rem;
	}

	html body.single-product div.product.dinc-product {
		overflow: visible !important;
		padding-top: 0 !important;
	}

	html body.single-product .dinc-pdp-media {
		grid-column: 1;
		grid-row: 1;
		align-self: stretch;
		min-width: 0;
		position: relative;
		top: auto;
		height: 100%;
		max-height: 100%;
		overflow: hidden;
		z-index: 1;
	}

	html body.single-product .dinc-pdp-stage {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--dc-pdp-gap);
		align-items: stretch;
		align-content: start;
		margin: 0;
		padding: 0;
		min-width: 0;
		height: 100%;
		max-height: 100%;
		overflow: hidden;
	}

	html body.single-product .dinc-pdp-stage--single {
		grid-template-columns: 1fr;
	}

	html body.single-product .dinc-pdp-primary {
		display: block;
		margin: 0 !important;
		padding: 0 !important;
		position: relative;
		align-self: stretch;
		height: 100%;
		max-height: 100%;
		overflow: hidden;
	}

	html body.single-product .dinc-pdp-primary__img {
		width: 100%;
		height: 100%;
		max-height: 100%;
		object-fit: cover;
		aspect-ratio: auto;
	}

	html body.single-product .dinc-pdp-gallery {
		display: block;
		margin: 0 !important;
		padding: 0 !important;
		align-self: stretch;
		height: 100%;
		max-height: 100%;
		overflow-y: auto;
		overscroll-behavior-y: contain;
		-webkit-overflow-scrolling: touch;
		outline: none;
	}

	html body.single-product .dinc-pdp-gallery:focus-visible {
		box-shadow: inset 0 0 0 2px #111;
	}

	html body.single-product .dinc-pdp-gallery__list {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: var(--dc-pdp-gap);
	}

	html body.single-product .dinc-pdp-gallery__item {
		margin: 0;
		padding: 0;
		line-height: 0;
	}

	html body.single-product .dinc-pdp-gallery__img {
		aspect-ratio: var(--dinc-product-aspect, 3 / 4);
	}

	html body.single-product .dinc-pdp-gallery__item--video .dinc-pdp-video {
		aspect-ratio: var(--dinc-product-aspect, 3 / 4);
	}

	html body.single-product .dinc-pdp-pin-scope .summary,
	html body.single-product div.product.dinc-product .summary {
		grid-column: 2 !important;
		grid-row: 1 !important;
		position: relative !important;
		top: auto !important;
		align-self: stretch !important;
		height: 100% !important;
		max-height: 100% !important;
		overflow-y: auto;
		width: 100% !important;
		float: none !important;
		margin: 0 !important;
		padding: 0 !important;
		z-index: 2;
		background: #ffffff;
	}

	html body.single-product .dinc-pdp-pin-scope > .onsale,
	html body.single-product div.product.dinc-product > .onsale {
		grid-column: 2;
		grid-row: 1;
		justify-self: start;
		align-self: start;
		z-index: 3;
		margin: 0;
	}

	html body.single-product div.product.dinc-product .related.products,
	html body.single-product div.product.dinc-product .upsells.products,
	html body.single-product div.product.dinc-product .woocommerce-tabs,
	html body.single-product .dinc-related,
	html body.single-product .dinc-recently-viewed,
	html body.single-product .dinc-product-pagination {
		position: relative !important;
		z-index: 10 !important;
		background: #ffffff !important;
		width: 100% !important;
		max-width: 100% !important;
		clear: both !important;
		margin-top: 2.5rem !important;
	}
}

@media (min-width: 960px) and (max-width: 1023px) {
	html body.single-product .dinc-pdp-pin-scope,
	html body.single-product div.product.dinc-product {
		grid-template-columns: 1fr !important;
	}

	html body.single-product .dinc-pdp-media {
		position: static;
		max-height: none;
	}

	html body.single-product div.product.dinc-product .summary {
		position: static !important;
		height: auto !important;
		max-height: none !important;
		overflow: visible !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	html body.single-product .dinc-pdp-mobile__track {
		scroll-behavior: auto;
	}
}

/* On-page product image lightbox */
html.dinc-lb-open,
html.dinc-lb-open body {
	overflow: hidden;
}

.dinc-lb {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin: 0;
}

.dinc-lb[hidden] {
	display: none !important;
}

.dinc-lb__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(8, 8, 8, 0.92);
	border: 0;
	cursor: pointer;
}

.dinc-lb__panel {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	max-width: 100vw;
	max-height: 100vh;
	padding: 3.5rem 3.25rem 2.5rem;
	box-sizing: border-box;
	pointer-events: none;
}

.dinc-lb__figure {
	margin: 0;
	padding: 0;
	max-width: min(96vw, 1100px);
	max-height: calc(100vh - 5rem);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	pointer-events: auto;
}

.dinc-lb__img {
	display: block;
	max-width: 100%;
	max-height: calc(100vh - 6.5rem);
	width: auto;
	height: auto;
	object-fit: contain;
	background: transparent;
}

.dinc-lb__counter {
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	line-height: 1;
}

.dinc-lb__close,
.dinc-lb__nav {
	pointer-events: auto;
	position: absolute;
	appearance: none;
	border: 0;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	cursor: pointer;
	margin: 0;
	padding: 0;
}

.dinc-lb__close {
	top: 0.85rem;
	right: 0.85rem;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 0;
	font-size: 1.75rem;
	line-height: 1;
	z-index: 2;
}

.dinc-lb__nav {
	top: 50%;
	width: 2.75rem;
	height: 2.75rem;
	margin-top: -1.375rem;
	border-radius: 0;
}

.dinc-lb__nav--prev {
	left: 0.65rem;
}

.dinc-lb__nav--next {
	right: 0.65rem;
}

.dinc-lb__nav::before {
	content: '';
	display: block;
	width: 0.65rem;
	height: 0.65rem;
	margin: 0 auto;
	border-style: solid;
	border-color: #fff;
	border-width: 0 0 2px 2px;
	transform: rotate(45deg);
}

.dinc-lb__nav--next::before {
	border-width: 2px 2px 0 0;
}

.dinc-lb__nav:disabled {
	opacity: 0.35;
	cursor: default;
}

.dinc-lb__close:focus-visible,
.dinc-lb__nav:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

@media (max-width: 719px) {
	.dinc-lb__panel {
		padding: 3.25rem 0.5rem 2rem;
	}

	.dinc-lb__nav {
		width: 2.5rem;
		height: 2.5rem;
	}
}

html body.single-product .dinc-pdp-mobile__link {
	display: block;
	margin: 0;
	padding: 0;
	line-height: 0;
}