/**
 * Out-N-Out Single Product / Product Detail. Token-driven; loaded only on
 * product pages. The first section (gallery + purchase summary) reproduces the
 * live product page: a vertical-thumbnail gallery + large main image on the left,
 * and title / wishlist / price / viewer-count / quantity + add-to-cart / WhatsApp /
 * COD on the right. Product Information (accordion), Before/After, related products
 * and reviews keep their existing styling.
 */

.oon-pdp-wrap {
	padding-block: 20px 70px;
}

/* Breadcrumb is centred within the product container (matches live). */
.oon-pdp-wrap .oon-breadcrumbs {
	margin-bottom: 26px;
	text-align: center;
}
.oon-pdp-wrap .oon-breadcrumbs ol,
.oon-pdp-wrap .oon-breadcrumbs ul,
.oon-pdp-wrap .oon-breadcrumbs .oon-breadcrumbs__list {
	justify-content: center;
}
/* Live keeps the current crumb the same neutral grey as the rest (not the brand
   heading purple), so it reads lighter. */
.oon-pdp-wrap .oon-breadcrumbs__current {
	color: var(--oon-color-text-secondary, #666);
}

/* ---- Main layout: gallery + summary ----
   Live is a 50/50 split (.m-main-product--media is md:w-1/2). Equal columns keep
   the gallery from dominating and start the info column at the container midpoint,
   like live; the visual channel between them is the grid gap. */
.oon-pdp {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 0;
	align-items: start;
	margin-bottom: 48px;
}
/* The channel between the columns is padding on the info block (as on live),
   so each column stays a true 50% and the main image keeps live's ~480px width. */
.oon-pdp__summary {
	padding-left: clamp(24px, 3.4vw, 44px);
}

/* =========================================================================
   GALLERY — vertical thumbnails + large main image
   ========================================================================= */
.oon-pdp__gallery {
	position: relative;
}
.oon-pgal {
	display: grid;
	grid-template-columns: 70px minmax(0, 1fr);
	gap: 20px;
	align-items: start;
}
.oon-pgal--single {
	grid-template-columns: minmax(0, 1fr);
}

/* Thumbnail rail */
.oon-pgal__thumbs {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.oon-pgal__thumb-item {
	margin: 0;
}
.oon-pgal__thumb {
	display: block;
	width: 70px;
	height: 70px;
	padding: 0;
	overflow: hidden;
	background: #f6f6f6;
	border: 1px solid var(--oon-color-border, #e5e5e5);
	border-radius: 6px;
	cursor: pointer;
	opacity: 0.85;
	transition: opacity var(--oon-transition, 0.25s ease), border-color var(--oon-transition, 0.25s ease);
}
.oon-pgal__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.oon-pgal__thumb:hover,
.oon-pgal__thumb:focus-visible {
	opacity: 1;
}
.oon-pgal__thumb.is-active {
	opacity: 1;
	border-color: #1a1a1a;
}

/* Main image */
.oon-pgal__main {
	position: relative;
	overflow: hidden;
	background: #f5f5f5;
	border-radius: 8px;
	aspect-ratio: 1 / 1;
}
.oon-pgal__main .oon-pgal__img,
.oon-pgal__main img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.oon-pgal__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 3;
}
.oon-pgal__zoom {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: #1a1a1a;
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 50%;
	cursor: pointer;
	transition: background-color var(--oon-transition, 0.25s ease);
}
.oon-pgal__zoom svg {
	width: 18px;
	height: 18px;
}
.oon-pgal__zoom:hover {
	background: #fff;
}

/* Lightbox */
.oon-pgal__lightbox {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px;
	background: rgba(0, 0, 0, 0.85);
}
.oon-pgal__lightbox[hidden] {
	display: none;
}
.oon-pgal__lightbox-img {
	max-width: min(92vw, 900px);
	max-height: 90vh;
	object-fit: contain;
	border-radius: 6px;
}
.oon-pgal__lightbox-close {
	position: absolute;
	top: 20px;
	right: 24px;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: transparent;
	border: none;
	cursor: pointer;
}
.oon-pgal__lightbox-close svg {
	width: 26px;
	height: 26px;
}

/* =========================================================================
   SUMMARY — purchase panel
   ========================================================================= */
.oon-pdp__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}
.oon-pdp__title {
	margin: 0;
	font-family: var(--oon-font-heading);
	font-weight: var(--oon-fw-heading, 500);
	/* Live product title is 50px (per-section override). Clamp maxes at 50px and
	   scales down on smaller screens; still wraps like live ("Ultimate White Skin"
	   on line 1) within the summary column — no hardcoded <br>. */
	font-size: clamp(2rem, 3.4vw, 3.125rem);
	line-height: 1.15;
	color: var(--oon-color-text, #212121);
}

/* Wishlist — circular heart */
.oon-pdp__wishlist {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-top: 4px;
	color: #1a1a1a;
	background: #fff;
	border: 1px solid var(--oon-color-border, #e5e5e5);
	border-radius: 50%;
	cursor: pointer;
	transition: background-color var(--oon-transition, 0.25s ease), color var(--oon-transition, 0.25s ease), border-color var(--oon-transition, 0.25s ease);
}
.oon-pdp__wishlist svg {
	width: 20px;
	height: 20px;
}
.oon-pdp__wishlist:hover,
.oon-pdp__wishlist:focus-visible {
	border-color: #1a1a1a;
}
.oon-pdp__wishlist.is-active {
	color: var(--oon-color-price-sale, #e84e4e);
	border-color: var(--oon-color-price-sale, #e84e4e);
}
.oon-pdp__wishlist.is-active svg {
	fill: currentColor;
}

/* Price — sale first (accent), original struck after */
.oon-pdp__price {
	margin: 22px 0 0;
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 12px;
	font-family: var(--oon-font-body);
}
.oon-pdp__price-sale,
.oon-pdp__price-now {
	font-size: 1.6rem;
	font-weight: var(--oon-fw-bold, 700);
	/* Live sale-price colour (#f86a55) — verified from the live product CSS. */
	color: #f86a55;
}
.oon-pdp__price-now {
	color: var(--oon-color-text, #212121);
}
.oon-pdp__price-was {
	font-size: 1.1rem;
	font-weight: var(--oon-fw-regular, 400);
	color: #9a9a9a;
	text-decoration: line-through;
}
.oon-pdp__price .woocommerce-Price-amount {
	font-weight: inherit;
}

/* Viewer count */
.oon-pdp__viewers {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 20px 0 26px;
	color: var(--oon-color-text-secondary, #666);
	font-size: 14px;
	line-height: 1.6;
}
.oon-pdp__viewers-ico {
	display: inline-flex;
	color: #1a1a1a;
}
.oon-pdp__viewers-ico svg {
	width: 20px;
	height: 20px;
}
.oon-pdp__viewers-text strong {
	font-weight: var(--oon-fw-medium, 600);
	color: #1a1a1a;
}

/* Quantity + Add to cart row */
.oon-pdp__cart {
	margin-bottom: 14px;
}
.oon-pdp__qty-label {
	display: block;
	margin-bottom: 10px;
	font-family: var(--oon-font-body);
	font-weight: var(--oon-fw-medium, 500);
	font-size: 1rem;
	color: #1a1a1a;
}
.oon-pdp__cart form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 16px;
	margin: 0;
}
.oon-pdp__cart .quantity {
	display: inline-flex;
	align-items: stretch;
	height: 56px;
	border: 1px solid var(--oon-color-border, #dcdcdc);
	border-radius: 8px;
	overflow: hidden;
}
.oon-qty__btn {
	flex: 0 0 auto;
	width: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	line-height: 1;
	color: #1a1a1a;
	background: #fff;
	border: none;
	cursor: pointer;
	transition: background-color var(--oon-transition, 0.25s ease);
}
.oon-qty__btn:hover {
	background: #f4f4f4;
}
.oon-qty__btn[disabled] {
	opacity: 0.4;
	cursor: not-allowed;
}
.oon-pdp__cart .quantity input.qty {
	width: 48px;
	height: 100%;
	padding: 0;
	text-align: center;
	border: none;
	background: #fff;
	font-family: var(--oon-font-body);
	font-size: 1rem;
	-moz-appearance: textfield;
}
.oon-pdp__cart .quantity input.qty::-webkit-outer-spin-button,
.oon-pdp__cart .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
/* White outlined pill Add-to-cart (matches live; not the purple default).
   The selector is intentionally specific enough (.woocommerce … .alt = 4 classes)
   to beat WooCommerce core's `.woocommerce button.button.alt` without !important. */
.woocommerce .oon-pdp__cart .single_add_to_cart_button.alt,
.oon-pdp__cart .single_add_to_cart_button {
	flex: 1 1 auto;
	min-width: 220px;
	min-height: 56px;
	padding: 12px 34px;
	font-family: var(--oon-font-body);
	font-weight: var(--oon-fw-medium, 500);
	font-size: 1rem;
	color: #1a1a1a;
	background: #fff;
	border: 1px solid #1a1a1a;
	border-radius: 40px;
	box-shadow: none;
	text-shadow: none;
	cursor: pointer;
	transition: background-color var(--oon-transition, 0.25s ease), color var(--oon-transition, 0.25s ease);
}
.woocommerce .oon-pdp__cart .single_add_to_cart_button.alt:hover,
.woocommerce .oon-pdp__cart .single_add_to_cart_button.alt:focus,
.oon-pdp__cart .single_add_to_cart_button:hover,
.oon-pdp__cart .single_add_to_cart_button:focus {
	background: #1a1a1a;
	color: #fff;
}

/* Full-width action buttons (WhatsApp, COD) stacked below */
.oon-pdp__actions {
	margin-top: 16px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.oon-pdp__whatsapp,
.oon-pdp__cod {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 15px 20px;
	font-family: var(--oon-font-body);
	font-weight: var(--oon-fw-medium, 600);
	font-size: 1rem;
	border: none;
	border-radius: 30px;
	text-decoration: none;
	transition: background-color var(--oon-transition, 0.25s ease), opacity var(--oon-transition, 0.25s ease);
}
.oon-pdp__whatsapp {
	color: #fff;
	background: #25d366;
}
.oon-pdp__whatsapp:hover,
.oon-pdp__whatsapp:focus {
	background: #1fb955;
	color: #fff;
}
.oon-pdp__cod {
	color: #fff;
	background: #111;
}
.oon-pdp__cod:hover,
.oon-pdp__cod:focus {
	background: #000;
	color: #fff;
}
.oon-pdp__whatsapp-ico,
.oon-pdp__cod-ico {
	display: inline-flex;
}
.oon-pdp__whatsapp-ico svg,
.oon-pdp__cod-ico svg {
	width: 20px;
	height: 20px;
}

/* Trust badges reuse feature-cards; allow dynamic column count */
.oon-pdp__badges {
	grid-template-columns: repeat(var(--oon-cols, 3), minmax(0, 1fr));
	margin: 40px 0;
	padding: 34px 0;
	border-block: 1px solid var(--oon-color-border, #eee);
}

/* ---- "You May Also Like" — image-with-text recommendation section ----
   Reproduces the live Shopify "image with text" block: a full-bleed light-gray
   band (footer colour scheme #f5f5f5), a left-aligned section heading, then a
   two-column row — a square promotional image beside an eyebrow / marketing
   heading / benefit list / Shop Now pill. Measurements mirror the live theme:
   fluid container max 1620px, columns ~50% (image ≈760px on wide screens),
   ~100px inter-column gap. Shared and reusable — no product-specific values. */
.oon-yml {
	/* Full-bleed: percentages resolve against the .oon-container content box, so
	   these negative margins expand the band symmetrically to the viewport. */
	margin: 60px calc(50% - 50vw) 0;
	padding-block: clamp(44px, 6vw, 84px);
	background: var(--oon-color-bg-secondary, #f5f5f5);
}
/* Inner content re-constrained to the live fluid container. Live uses
   max-width: calc(1620px content + 60px padding * 2) = 1740px, so the two 50%
   columns reach ~760px each (matching the live 760×760 image) on wide screens. */
.oon-yml__container {
	max-width: var(--oon-yml-width, 1740px);
	margin-inline: auto;
	padding-inline: clamp(15px, 4vw, 60px);
}
.oon-yml__header {
	text-align: left; /* live section header uses m:text-left */
	margin-bottom: clamp(24px, 3vw, 40px);
}
.oon-yml__heading {
	margin: 0;
	font-family: var(--oon-font-heading);
	font-weight: var(--oon-fw-heading, 500);
	font-size: clamp(1.4375rem, 1rem + 1.8vw, 2.125rem); /* live .h3 23→34px */
	line-height: 1.2;
	color: var(--oon-color-heading, #332d55);
}
.oon-yml__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(28px, 5vw, 96px); /* ≈100px between image and content on wide */
}
.oon-yml__media {
	flex: 1 1 calc(50% - 48px);
	min-width: 0;
	display: block;
	line-height: 0;
}
.oon-yml__img,
.oon-yml__media img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
	border-radius: 10px; /* live image uses the theme blocks-radius */
}
.oon-yml__content {
	flex: 1 1 calc(50% - 48px);
	min-width: 0;
}
.oon-yml__eyebrow {
	margin: 0 0 20px; /* live --subheading-margin-bottom: 20px */
	font-family: var(--oon-font-body);
	font-weight: var(--oon-fw-medium, 500);
	font-size: 1rem; /* live .h6 = 16px */
	line-height: 1.5;
	color: var(--oon-color-text, #212121); /* live footer-scheme foreground */
}
.oon-yml__title {
	margin: 0;
	font-family: var(--oon-font-heading);
	font-weight: var(--oon-fw-heading, 500);
	font-size: clamp(1.75rem, 1rem + 2.2vw, 2.5rem); /* live .h2 28→40px */
	line-height: 1.238; /* measured live */
	color: var(--oon-color-heading, #332d55);
}
.oon-yml__title a {
	color: inherit;
	text-decoration: none;
}
.oon-yml__title a:hover {
	text-decoration: underline;
}
.oon-yml__list {
	margin: 24px 0 0; /* live --text-margin-top: 24px */
	padding-left: 1.15em;
	list-style: disc;
	color: var(--oon-color-text-secondary, #666); /* live description colour */
}
.oon-yml__list li {
	margin: 0 0 10px;
	font-family: var(--oon-font-body);
	font-size: 1rem; /* live .h6 = 16px */
	line-height: 1.55;
}
.oon-yml__list li:last-child {
	margin-bottom: 0;
}
.oon-yml__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 28px;
	min-height: 48px;
	padding: 10px 30px; /* live .m-button primary padding */
	/* Live section sits in the footer colour scheme: the primary button is
	   near-black (rgb 34,34,34), not the global brand purple. Scoped to this
	   button only — global/theme buttons are untouched. */
	background: #222222;
	color: #ffffff;
	border-radius: 78px; /* live --btn-border-radius: 78px (pill) */
	font-family: var(--oon-font-body);
	font-weight: var(--oon-fw-medium, 500);
	font-size: 1rem; /* live --font-btn-size: 16px */
	line-height: 1.25;
	text-decoration: none;
	transition: opacity var(--oon-transition, 0.25s ease);
}
.oon-yml__btn:hover {
	opacity: 0.85;
	color: #ffffff;
}

/* ---- Reviews ---- */
.oon-pdp__reviews {
	margin-top: 60px;
	padding-top: 40px;
	border-top: 1px solid var(--oon-color-border, #eee);
}
.oon-pdp__reviews .comment-reply-title,
.oon-pdp__reviews #reviews h2 {
	font-family: var(--oon-font-heading);
	color: var(--oon-color-heading, #332d55);
}

/* ---- Sticky Add-to-Cart bar ----
   Reveals when the main purchase form scrolls out of view (all breakpoints, like
   live). Fixed, full-width, white, subtle shadow; hidden below the viewport via a
   translateY transform. On mobile only the Add-to-Cart button shows (the image /
   title / price block and the quantity are hidden — matching live). */
.oon-sticky-atc {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: var(--oon-z-header, 100);
	background: var(--oon-color-bg, #fff);
	color: var(--oon-color-text, #212121);
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.09);
	transform: translateY(100%);
	transition: transform var(--oon-transition, 0.25s) cubic-bezier(0.4, 0, 0.2, 1);
}
.oon-sticky-atc.is-visible {
	transform: translateY(0);
}
.oon-sticky-atc__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.oon-sticky-atc__left {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}
.oon-sticky-atc__media {
	flex: 0 0 auto;
	display: block;
	width: 52px;
	height: 52px;
	overflow: hidden;
	border-radius: 6px;
	background: #f6f6f6;
}
.oon-sticky-atc__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.oon-sticky-atc__info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.oon-sticky-atc__name {
	font-family: var(--oon-font-body);
	font-weight: var(--oon-fw-medium, 500);
	font-size: 1rem;
	color: var(--oon-color-text, #212121);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 340px;
}
.oon-sticky-atc__price {
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-size: 15px;
}
.oon-sticky-atc__price .oon-pdp__price-sale,
.oon-sticky-atc__price .oon-pdp__price-now {
	font-size: 15px;
	font-weight: var(--oon-fw-bold, 700);
	color: #f86a55;
}
.oon-sticky-atc__price .oon-pdp__price-now {
	color: var(--oon-color-text, #212121);
}
.oon-sticky-atc__price .oon-pdp__price-was {
	font-size: 13px;
	color: #9a9a9a;
	text-decoration: line-through;
}
.oon-sticky-atc__right {
	display: flex;
	align-items: center;
	gap: 16px;
	flex: 0 0 auto;
	padding: 12px 0;
}
.oon-sticky-atc__qty {
	display: inline-flex;
	align-items: stretch;
	height: 46px;
	border: 1px solid var(--oon-color-border, #dcdcdc);
	border-radius: 8px;
	overflow: hidden;
}
.oon-sticky-atc__qty .qty {
	width: 44px;
	height: 100%;
	padding: 0;
	text-align: center;
	border: none;
	background: #fff;
	font-family: var(--oon-font-body);
	-moz-appearance: textfield;
}
.oon-sticky-atc__qty .qty::-webkit-outer-spin-button,
.oon-sticky-atc__qty .qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
/* White outlined pill, matching the main Add-to-Cart button. */
.oon-sticky-atc__btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 11px 34px;
	font-family: var(--oon-font-body);
	font-weight: var(--oon-fw-medium, 500);
	font-size: 1rem;
	color: #1a1a1a;
	background: #fff;
	border: 1px solid #1a1a1a;
	border-radius: 40px;
	cursor: pointer;
	text-decoration: none;
	transition: background-color var(--oon-transition, 0.25s ease), color var(--oon-transition, 0.25s ease);
}
.oon-sticky-atc__btn:hover,
.oon-sticky-atc__btn:focus {
	background: #1a1a1a;
	color: #fff;
}
.oon-sticky-atc__btn--disabled {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
	.oon-sticky-atc {
		transition: none;
	}
}
/* Mobile: only the Add-to-Cart button (hide the left block + quantity), like live. */
@media (max-width: 767px) {
	.oon-sticky-atc__left,
	.oon-sticky-atc__qty {
		display: none;
	}
	.oon-sticky-atc__right {
		width: 100%;
		padding: 10px 0;
	}
	.oon-sticky-atc__btn {
		flex: 1 1 auto;
	}
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1024px) {
	.oon-pdp {
		gap: 34px;
	}
	.oon-pgal {
		grid-template-columns: 68px minmax(0, 1fr);
		gap: 12px;
	}
	.oon-pgal__thumb {
		width: 68px;
		height: 68px;
	}
}

@media (max-width: 768px) {
	.oon-pdp {
		grid-template-columns: 1fr;
		gap: 26px;
	}
	.oon-pdp__summary {
		padding-left: 0;
	}
	/* Mobile: thumbnails move below the main image, in a horizontal row (live). */
	.oon-pgal {
		grid-template-columns: minmax(0, 1fr);
	}
	.oon-pgal__thumbs {
		order: 2;
		flex-direction: row;
		flex-wrap: wrap;
		margin-top: 12px;
	}
	.oon-pgal__main {
		order: 1;
	}
	/* Stack image over content below 768px (live base m:w-full), left-aligned. */
	.oon-yml__inner {
		flex-direction: column;
		align-items: stretch;
		gap: 28px;
	}
	.oon-yml__media,
	.oon-yml__content {
		flex: 1 1 100%;
		width: 100%;
	}
	.oon-pdp__badges {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	.oon-pdp__cart form.cart {
		gap: 10px;
	}
	.oon-pdp__cart .single_add_to_cart_button {
		flex: 1 1 60%;
		min-width: 0;
		padding: 12px 20px;
	}
	.oon-pdp__title {
		font-size: clamp(1.7rem, 7vw, 2rem);
	}
}