/* ==========================================================================
   Y Needs product page (templates/single-product.php).

   Theme variables come from the product's category (includes/product-page.php), set on .yns-pdp:
     --pdp-bg       hero + customer-service background
     --pdp-accent   pattern / gradient colour, small labels
     --pdp-text     text on --pdp-bg
     --pdp-image    background image (pattern mask or photo), --pdp-opacity its strength
     --pdp-page     light background of the lower sections (default: a tint of --pdp-bg)
   Everything else is derived from those, so one category change re-tints the whole page.
   Selectors start with "html body" where Divi / WooCommerce ship equally specific rules.
   ========================================================================== */

.yns-pdp {
	--pdp-page: color-mix(in srgb, var(--pdp-bg) 7%, #FFFFFC);
	--pdp-card: color-mix(in srgb, var(--pdp-bg) 3%, #FFFFFC);
	--pdp-tint: color-mix(in srgb, var(--pdp-bg) 11%, #FFFFFC);
	--pdp-line: color-mix(in srgb, var(--pdp-ink) 12%, transparent);
	--pdp-label: color-mix(in oklab, var(--pdp-accent) 78%, #000);
	--pdp-ink: var(--yn-heading, #1E293B);
	--pdp-body: var(--yn-text, #334155);
	--pdp-ok: #12805C;
	--pdp-radius: 2rem;
	--pdp-gutter: clamp(1rem, 2.2vw, 1.5rem);
	--pdp-ease: cubic-bezier(.33, 1, .68, 1);
	--pdp-head-offset: clamp(6.5rem, 9vw, 8rem);

	color: var(--pdp-body);
	overflow-x: clip;
}

/* ---------- Hero / top ---------- */

/* Header (orange-floux-header, transparent "hero" mode on this page): no white strip over the colour. */
html body.yns-pdp-page .ofh--hero.is-top .ofh-band { background: transparent; box-shadow: none; border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }

.yns-pdp__product {
	position: relative;
	isolation: isolate;
	background: var(--pdp-bg);
	padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

/* Pattern: the accent gradient shown through the image (mask), or the image itself (photo mode). */
.yns-pdp__pattern {
	position: absolute;
	inset: 0 0 auto;
	z-index: -1;
	height: min(100%, calc(100vh + 6rem));
	opacity: var(--pdp-opacity, 1);
	pointer-events: none;
}
.yns-pdp--pattern .yns-pdp__pattern {
	background: linear-gradient(180deg, var(--pdp-accent) 0%, var(--pdp-accent) 60%, transparent 100%);
	-webkit-mask: var(--pdp-image) center top / cover no-repeat;
	mask: var(--pdp-image) center top / cover no-repeat;
}
.yns-pdp--photo .yns-pdp__pattern {
	background: var(--pdp-image) center / cover no-repeat;
	-webkit-mask: linear-gradient(180deg, #000 45%, transparent 100%);
	mask: linear-gradient(180deg, #000 45%, transparent 100%);
}

.yns-pdp__wrap {
	position: relative;
	max-width: 1600px;
	margin: 0 auto;
	padding: var(--pdp-head-offset) var(--pdp-gutter) 0;
}
.yns-pdp__notices:empty { display: none; }
.yns-pdp__notices .woocommerce-message,
.yns-pdp__notices .woocommerce-error,
.yns-pdp__notices .woocommerce-info { border-radius: 1rem; margin-bottom: 1rem; }

.yns-pdp__head {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .75rem;
	margin-bottom: clamp(1rem, 2vw, 1.5rem);
	color: var(--pdp-text);
}
html body .yns-pdp .yns-pdp__title {
	max-width: 20ch;
	margin: 0;
	padding: 0;
	color: var(--pdp-text);
	font-size: clamp(2.1rem, 4.2vw, 4rem);
	font-weight: 800;
	line-height: 1.2;
	text-align: center;
	text-wrap: balance;
}
.yns-pdp__back {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: .3rem .85rem .3rem .65rem;
	border-radius: .6rem;
	background: var(--yn-orange, #FF7515);
	color: #FFFFFC !important;
	font-size: var(--gvid-yn-fs-xs, .85rem);
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
	transition: background-color .2s, color .2s, transform .15s var(--pdp-ease);
}
.yns-pdp__back svg { width: 1em; height: 1em; }
.yns-pdp__back:hover { background: #FFFFFC; color: var(--yn-orange, #FF7515) !important; }
.yns-pdp__back:focus-visible { outline: 2px solid var(--pdp-text); outline-offset: 3px; }
.yns-pdp__back:active { transform: scale(.96); }
@media (min-width: 981px) {
	.yns-pdp__back { position: absolute; inset-inline-start: 0; top: 0; }
}

.yns-pdp__top {
	display: grid;
	grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
	gap: var(--pdp-gutter);
	align-items: start;
}

/* ---------- Photo collage ---------- */

.yns-pdp__media { position: sticky; top: 1.25rem; }

.yns-pdp__grid {
	position: relative;
	display: grid;
	grid-template-columns: 3.1fr 1fr 1fr;
	grid-template-rows: 26fr 37fr 37fr;
	gap: .5rem;
	aspect-ratio: 27 / 40;
	border-radius: var(--pdp-radius);
	overflow: hidden;
}
.yns-pdp__tile {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: .5rem;
	background: var(--pdp-tint);
}
.yns-pdp__tile--main { grid-column: 1; grid-row: 1 / -1; }
.is-n5 .yns-pdp__tile:nth-child(2) { grid-column: 2; grid-row: 1; }
.is-n5 .yns-pdp__tile:nth-child(3) { grid-column: 3; grid-row: 1; }
.is-n5 .yns-pdp__tile:nth-child(4) { grid-column: 2 / 4; grid-row: 2; }
.is-n5 .yns-pdp__tile:nth-child(5) { grid-column: 2 / 4; grid-row: 3; }
.is-n4 .yns-pdp__tile:not(.yns-pdp__tile--main),
.is-n3 .yns-pdp__tile:not(.yns-pdp__tile--main),
.is-n2 .yns-pdp__tile:not(.yns-pdp__tile--main) { grid-column: 2 / 4; }
.is-n4 { grid-template-rows: 1fr 1fr 1fr; }
.is-n3 { grid-template-rows: 1fr 1fr; }
.is-n2 { grid-template-rows: 1fr; }
.is-n1, .is-n0 { grid-template-columns: 1fr; grid-template-rows: 1fr; aspect-ratio: 4 / 5; }

.yns-pdp__tile-pattern {
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--pdp-bg) 22%, #FFFFFC);
	-webkit-mask: var(--pdp-image) center / cover no-repeat;
	mask: var(--pdp-image) center / cover no-repeat;
	opacity: .6;
}
.yns-pdp__zoom { position: absolute; inset: 0; display: block; cursor: zoom-in; }
.yns-pdp__zoom:focus-visible { outline: 3px solid var(--yn-yellow, #FDDC00); outline-offset: -3px; }
html body .yns-pdp .yns-pdp__img {
	position: relative;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s var(--pdp-ease);
}
@media (hover: hover) {
	.yns-pdp__zoom:hover .yns-pdp__img { transform: scale(1.04); }
}

.yns-pdp__sticker {
	position: absolute;
	inset-inline-start: 1rem;
	bottom: 1rem;
	display: grid;
	place-items: center;
	min-width: 4.4rem;
	min-height: 4.4rem;
	padding: .5rem;
	border-radius: 58% 42% 55% 45% / 45% 55% 45% 55%;
	background: var(--yn-yellow, #FDDC00);
	color: var(--pdp-ink);
	font-size: .95rem;
	font-weight: 800;
	line-height: 1.15;
	text-align: center;
	transform: rotate(-8deg);
	box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--pdp-ink) 45%, transparent);
	pointer-events: none;
}

.yns-pdp__rating-badge {
	position: absolute;
	inset-inline-start: 1rem;
	top: 1rem;
	z-index: 2;
	display: grid;
	grid-template-columns: auto auto;
	align-items: center;
	gap: .1rem .5rem;
	padding: .55rem .8rem;
	border-radius: .75rem;
	background: #FFFFFC;
	color: var(--pdp-ink);
	font-size: .85rem;
	box-shadow: 0 8px 24px -10px color-mix(in srgb, var(--pdp-ink) 40%, transparent);
}
.yns-pdp__rating-badge strong { font-size: 1.1rem; }
.yns-pdp__rating-badge a { grid-column: 1 / -1; color: inherit; text-decoration: underline; }

/* ---------- Card ---------- */

.yns-pdp__card {
	min-width: 0;
	padding-bottom: .5rem;
	border-radius: var(--pdp-radius);
	background: var(--pdp-card);
	box-shadow: 0 1px 0 color-mix(in srgb, var(--pdp-ink) 4%, transparent), 0 24px 60px -32px color-mix(in srgb, var(--pdp-ink) 35%, transparent);
}

.yns-pdp__summary {
	padding: clamp(1.5rem, 2.6vw, 2.25rem) clamp(1.25rem, 3vw, 2.5rem) 1.25rem;
	text-align: center;
}
html body .yns-pdp .yns-pdp__subtitle {
	margin: 0 0 .6rem;
	padding: 0;
	color: var(--pdp-ink);
	font-size: clamp(1.6rem, 2.6vw, 2.4rem);
	font-weight: 800;
	line-height: 1.25;
}
.yns-pdp__intro { max-width: 34rem; margin: 0 auto; color: var(--pdp-body); font-size: 1rem; line-height: 1.7; }
.yns-pdp__intro p { margin: 0; padding: 0; }

/* Buy box: offers + bar + trust lines. The form is WooCommerce's own (offers.php / buy-now.php hook into it). */
.yns-pdp__buy {
	margin: 0 .5rem;
	padding: clamp(.75rem, 1.6vw, 1rem);
	border-radius: 1.75rem;
	background: var(--pdp-page);
}
html body .yns-pdp .yns-pdp__buy form.cart { margin: 0; padding: 0; }
html body .yns-pdp .yns-pdp__buy .yns-offers { gap: .9rem; margin-bottom: .75rem; }
/* Room for the badge that sits on the card's top edge, so it never covers the offer name. */
html body .yns-pdp .yns-offer:has(.yns-offer-badge) { padding-top: 1.35rem; }
html body .yns-pdp .yns-pdp__buy .yns-offers-title { color: var(--pdp-ink); text-align: center; margin-bottom: .15rem; }
html body .yns-pdp .yns-offer { border-color: var(--pdp-line); background: #FFFFFC; transition: border-color .2s, box-shadow .2s, transform .15s var(--pdp-ease); }
html body .yns-pdp .yns-offer:hover { border-color: color-mix(in srgb, var(--pdp-bg) 60%, transparent); }
html body .yns-pdp .yns-offer:active { transform: scale(.99); }
html body .yns-pdp .yns-offer.is-selected { border-color: var(--pdp-bg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pdp-bg) 18%, transparent); }
html body .yns-pdp .yns-offer.is-selected .yns-offer-radio { border-color: var(--pdp-bg); background: radial-gradient(var(--pdp-bg) 45%, transparent 50%); }
html body .yns-pdp .yns-offer input:focus-visible + .yns-offer-radio { outline-color: var(--pdp-bg); }
html body .yns-pdp .woocommerce-variation-price,
html body .yns-pdp .woocommerce-variation-description:empty { display: none; }
html body .yns-pdp .woocommerce-variation-availability p { margin: 0 0 .5rem; text-align: center; }

/* The bar: total · quantity · add to cart · buy now. */
html body .yns-pdp .woocommerce-variation-add-to-cart,
html body .yns-pdp .yns-pdp__buy form.cart:not(.variations_form) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	padding: .45rem;
	border-radius: 2rem;
	background: var(--pdp-tint);
}
html body .yns-pdp .yns-live-total {
	order: -1;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding-inline-start: .75rem;
	color: var(--pdp-body);
	font-size: .8rem;
	line-height: 1.2;
}
html body .yns-pdp .yns-live-total[hidden] { display: none; }
html body .yns-pdp .yns-live-total-amount { color: var(--pdp-ink); font-size: 1.35rem; font-weight: 800; }

html body .yns-pdp .quantity {
	display: inline-flex;
	align-items: center;
	margin: 0 !important;
	padding: .2rem;
	border-radius: 100px;
	background: #FFFFFC;
}
html body .yns-pdp .quantity input.qty {
	width: 2.4rem;
	height: 2.2rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--pdp-ink);
	font-size: 1rem;
	font-weight: 700;
	text-align: center;
	-moz-appearance: textfield;
}
html body .yns-pdp .quantity input.qty::-webkit-inner-spin-button,
html body .yns-pdp .quantity input.qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* − / + : full circles. Divi styles .quantity .minus/.plus as half-rounded bordered tabs, so this is stronger. */
html body .yns-pdp .quantity .yns-pdp__step.yns-pdp__step {
	display: grid;
	place-items: center;
	flex: none;
	width: 2.1rem;
	height: 2.1rem;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--pdp-tint);
	color: var(--pdp-ink);
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1;
	box-shadow: none;
	cursor: pointer;
	transition: background-color .2s, color .2s, transform .15s var(--pdp-ease);
}
html body .yns-pdp .quantity .yns-pdp__step.yns-pdp__step:hover { background: var(--pdp-bg); color: var(--pdp-text); }
html body .yns-pdp .quantity .yns-pdp__step.yns-pdp__step:focus-visible { outline: 2px solid var(--pdp-bg); outline-offset: 2px; }
html body .yns-pdp .quantity .yns-pdp__step.yns-pdp__step:active { transform: scale(.9); }

html body .yns-pdp .yns-pdp__buy .single_add_to_cart_button {
	flex: 1 1 auto;
	min-height: 2.9rem;
	margin: 0 !important;
	font-size: 1rem;
	white-space: nowrap;
}
html body .yns-pdp .yns-pdp__buy .yn-btn.single_add_to_cart_button:not(.yns-buy-now) { --yn-btn-main: var(--yn-primary, #0258A2); }
html body .yns-pdp .yns-pdp__buy .yn-btn.yns-buy-now {
	--yn-btn-main: var(--yn-yellow, #FDDC00);
	--yn-btn-label: var(--pdp-ink);
	--yn-btn-label-hover: var(--pdp-ink);
}

.yns-pdp__trust {
	display: grid;
	gap: .35rem;
	margin: .9rem .5rem .1rem;
	padding: 0;
	list-style: none;
	color: var(--pdp-ink);
	font-size: .92rem;
	font-weight: 600;
}
.yns-pdp__trust li { display: flex; align-items: center; gap: .5rem; padding: 0; }
.yns-pdp__trust svg { flex: none; width: 1.15rem; height: 1.15rem; color: var(--pdp-ok); }

/* Benefits (product description with «اقرأ المزيد») */
.yns-pdp__benefits { padding: clamp(1.5rem, 2.6vw, 2rem) clamp(1.25rem, 3vw, 2.5rem) 1rem; }
.yns-pdp__eyebrow {
	margin: 0 0 .35rem;
	padding: 0;
	color: var(--pdp-label);
	font-size: .85rem;
	font-weight: 800;
	line-height: 1.4;
}
html body .yns-pdp .yns-pdp__h2 {
	margin: 0 0 .75rem;
	padding: 0;
	color: var(--pdp-ink);
	font-size: clamp(1.5rem, 2.3vw, 2.15rem);
	font-weight: 800;
	line-height: 1.3;
}
html body .yns-pdp .yns-pdp__h2--xl { font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.2; }
.yns-pdp__desc {
	position: relative;
	max-height: 7.2em;
	overflow: hidden;
	color: var(--pdp-body);
	line-height: 1.7;
	-webkit-mask: linear-gradient(180deg, #000 55%, transparent);
	mask: linear-gradient(180deg, #000 55%, transparent);
}
.yns-pdp__desc.is-open { max-height: none; -webkit-mask: none; mask: none; }
.yns-pdp__desc.is-short { max-height: none; -webkit-mask: none; mask: none; }
.yns-pdp__desc p { padding: 0; margin: 0 0 .8em; }
.yns-pdp__desc img { max-width: 100%; height: auto; border-radius: 1rem; }
/* Emoji: WordPress swaps them for <img class="emoji">; keep them text-sized, not full-width photos. */
html body .yns-pdp img.emoji,
html body .yns-pdp img.wp-smiley {
	display: inline !important;
	width: 1em !important;
	height: 1em !important;
	max-width: none;
	margin: 0 .07em !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0;
	box-shadow: none !important;
	vertical-align: -.1em !important;
}
.yns-pdp__more {
	margin-top: .5rem;
	padding: .1rem 0;
	border: 0;
	border-bottom: 2px solid currentColor;
	background: none;
	color: var(--pdp-label);
	font: inherit;
	font-size: .9rem;
	font-weight: 800;
	cursor: pointer;
	transition: opacity .2s, transform .15s var(--pdp-ease);
}
/* «المميزات» label and «اقرأ المزيد»: the site's global orange (Divi global colour gcid-yn-orange). */
.yns-pdp__benefits .yns-pdp__eyebrow,
.yns-pdp__more { color: var(--yn-orange, #FF7515); }
.yns-pdp__more:focus-visible { outline-color: var(--yn-orange, #FF7515); }
.yns-pdp__more:hover { opacity: .75; }
.yns-pdp__more:focus-visible { outline: 2px solid var(--pdp-label); outline-offset: 3px; }
.yns-pdp__more:active { transform: translateY(1px); }
.yns-pdp__more[hidden] { display: none; }

/* Accordions inside the card */
.yns-pdp__specs { display: grid; gap: .4rem; margin: .5rem .5rem 0; }
.yns-pdp__acc { border-radius: .6rem; background: var(--pdp-tint); }
.yns-pdp__acc summary,
.yns-pdp__faq-item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	color: var(--pdp-ink);
	font-weight: 800;
	cursor: pointer;
	list-style: none;
}
.yns-pdp__acc summary { padding: 1.15rem 1.5rem; font-size: 1.05rem; border-radius: .6rem; }
.yns-pdp__acc summary::-webkit-details-marker,
.yns-pdp__faq-item summary::-webkit-details-marker { display: none; }
.yns-pdp__acc summary:focus-visible,
.yns-pdp__faq-item summary:focus-visible { outline: 2px solid var(--pdp-bg); outline-offset: 2px; }
.yns-pdp__acc summary:hover .yns-pdp__chev,
.yns-pdp__faq-item summary:hover .yns-pdp__chev { opacity: 1; }
.yns-pdp__chev { flex: none; width: 1.2rem; height: 1.2rem; opacity: .6; transition: transform .3s var(--pdp-ease), opacity .2s; }
details[open] > summary .yns-pdp__chev { transform: rotate(180deg); }
.yns-pdp__acc-body { padding: 0 1.5rem 1.25rem; line-height: 1.7; }
.yns-pdp__acc-body p { padding: 0; margin: 0 0 .6em; }
html body .yns-pdp .woocommerce-product-attributes { width: 100%; margin: 0; border: 0; border-collapse: collapse; }
html body .yns-pdp .woocommerce-product-attributes th,
html body .yns-pdp .woocommerce-product-attributes td { padding: .5rem 0; border: 0; border-bottom: 1px solid var(--pdp-line); background: none; text-align: start; font-weight: 400; }
html body .yns-pdp .woocommerce-product-attributes th { width: 40%; color: var(--pdp-ink); font-weight: 700; }
html body .yns-pdp .woocommerce-product-attributes p { margin: 0; padding: 0; }

/* ---------- Lower sections ---------- */

.yns-pdp__section { background: var(--pdp-page); padding: clamp(3rem, 6vw, 5.5rem) var(--pdp-gutter); }
.yns-pdp__narrow { max-width: 46rem; margin: 0 auto; }

.yns-pdp__faq-list { margin-top: clamp(1rem, 2vw, 1.75rem); }
.yns-pdp__faq-item { border-bottom: 1px solid var(--pdp-line); }
.yns-pdp__faq-item summary { padding: 1.3rem 0; font-size: 1.05rem; }
.yns-pdp__faq-a { padding: 0 0 1.25rem; line-height: 1.7; }
.yns-pdp__faq-a p { margin: 0 0 .6em; padding: 0; }
.yns-pdp__faq + .yns-pdp__best { padding-top: 0; }

.yns-pdp__best-inner {
	display: grid;
	grid-template-columns: minmax(14rem, 22rem) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 4rem);
	align-items: center;
	max-width: 1600px;
	margin: 0 auto;
}
.yns-pdp__best-head { padding-inline-start: clamp(0rem, 4vw, 4rem); }
.yns-pdp__outline {
	display: inline-flex;
	align-items: center;
	margin-top: .5rem;
	padding: .55rem 1.3rem;
	border: 2px solid var(--pdp-label);
	border-radius: 100px;
	color: var(--pdp-label) !important;
	font-weight: 800;
	text-decoration: none;
	transition: background-color .2s, color .2s, transform .15s var(--pdp-ease);
}
.yns-pdp__outline:hover { background: var(--pdp-label); color: #FFFFFC !important; }
.yns-pdp__outline:focus-visible { outline: 3px solid var(--yn-yellow, #FDDC00); outline-offset: 2px; }
.yns-pdp__outline:active { transform: scale(.96); }

.yns-pdp__rail {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-bottom: .25rem;
}
.yns-pdp__rail::-webkit-scrollbar { display: none; }
.yns-pdp__rail:focus-visible { outline: 2px solid var(--pdp-bg); outline-offset: 4px; border-radius: 1rem; }
html body .yns-pdp ul.products.yns-pdp__rail-list {
	display: flex !important;
	gap: 1rem;
	width: max-content;
	margin: 0 !important;
	padding: 0 !important;
}
html body .yns-pdp ul.products.yns-pdp__rail-list::before,
html body .yns-pdp ul.products.yns-pdp__rail-list::after { display: none !important; }
html body .yns-pdp ul.products.yns-pdp__rail-list > li.product {
	flex: none;
	width: clamp(15rem, 22vw, 18.5rem) !important;
	margin: 0 !important;
	scroll-snap-align: start;
}
.yns-pdp__rail { cursor: grab; }
.yns-pdp__rail.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.yns-pdp__rail.is-dragging li { pointer-events: none; }
/* Arrows + bar (built by product-page.js). */
.yns-pdp__rail-nav { grid-column: 2; display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; max-width: 36rem; justify-self: center; }
.yns-pdp__rail-nav.is-static { display: none; }
.yns-pdp__rail-btn {
	display: inline-flex; align-items: center; justify-content: center; flex: none;
	width: 44px; height: 44px; border: 0; border-radius: 100px;
	background: #fffffc; color: var(--yn-heading, #1E293B);
	box-shadow: 0 1px 0 rgba(30, 41, 59, .05), 0 10px 24px -14px rgba(2, 88, 162, .45), inset 0 0 0 1.5px var(--yn-border, #D1D5DB);
	cursor: pointer; transition: background-color .2s, color .2s, box-shadow .2s;
}
.yns-pdp__rail-btn svg { width: 20px; height: 20px; transition: transform .25s cubic-bezier(.22, 1, .36, 1); }
.yns-pdp__rail-btn:hover, .yns-pdp__rail-btn:focus-visible { background: var(--yn-primary, #0258A2); color: #fffffc; box-shadow: inset 0 0 0 1.5px var(--yn-primary, #0258A2); outline: none; }
.yns-pdp__rail-btn:focus-visible { outline: 3px solid var(--yn-yellow, #FDDC00); outline-offset: 2px; }
.yns-pdp__rail-btn[disabled] { opacity: .35; cursor: default; background: #fffffc; color: var(--yn-heading, #1E293B); box-shadow: inset 0 0 0 1.5px var(--yn-border, #D1D5DB); }
.yns-pdp__rail-btn--prev:hover svg { transform: translateX(2px); }
.yns-pdp__rail-btn--next:hover svg { transform: translateX(-2px); }
.yns-pdp__rail-bar {
	flex: 1 1 auto;
	cursor: pointer;
	height: 4px;
	width: 100%;
	border-radius: 4px;
	background: var(--pdp-line);
	overflow: hidden;
}
.yns-pdp__rail-bar span {
	display: block;
	width: var(--pdp-rail-size, 30%);
	height: 100%;
	border-radius: inherit;
	background: var(--pdp-label);
	transform: translateX(calc(var(--pdp-rail-pos, 0) * -1%));
	transition: transform .1s linear;
}
[dir="ltr"] .yns-pdp__rail-bar span { transform: translateX(calc(var(--pdp-rail-pos, 0) * 1%)); }

/* Customer service: brand orange on every product page (not the category colour). */
.yns-pdp__support { --pdp-text: #fffffc; background: var(--yn-orange, #FF7515); color: #fffffc; padding: clamp(3rem, 6vw, 5.5rem) var(--pdp-gutter); }
.yns-pdp__support-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	gap: 2rem;
	align-items: center;
	max-width: 1100px;
	margin: 0 auto;
}
.yns-pdp__support .yns-pdp__eyebrow { color: var(--pdp-text); opacity: .8; }
html body .yns-pdp .yns-pdp__support .yns-pdp__h2 { color: var(--pdp-text); margin: 0; }
.yns-pdp__support-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	gap: .75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.yns-pdp__support-list li { padding: 0; }
.yns-pdp__support-list a {
	display: grid;
	justify-items: center;
	gap: .3rem;
	height: 100%;
	padding: 1.25rem .75rem;
	border-radius: 1rem;
	color: var(--pdp-text) !important;
	text-align: center;
	text-decoration: none;
	transition: background-color .2s, transform .15s var(--pdp-ease);
}
.yns-pdp__support-list a:hover { background: color-mix(in srgb, var(--pdp-text) 10%, transparent); }
.yns-pdp__support-list a:focus-visible { outline: 2px solid var(--pdp-text); outline-offset: 2px; }
.yns-pdp__support-list a:active { transform: scale(.97); }
.yns-pdp__support-list strong { font-size: 1.05rem; }
.yns-pdp__support-list span:last-child { font-size: .88rem; opacity: .85; overflow-wrap: anywhere; }
.yns-pdp__support-icon {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	margin-bottom: .35rem;
	border: 2px solid color-mix(in srgb, var(--pdp-text) 55%, transparent);
	border-radius: 50%;
}
.yns-pdp__support-icon svg { width: 1.4rem; height: 1.4rem; }

/* Lightbox */
.yns-pdp__lightbox {
	width: min(92vw, 60rem);
	max-height: 92vh;
	padding: 0;
	border: 0;
	border-radius: 1.25rem;
	background: #FFFFFC;
	overflow: hidden;
}
.yns-pdp__lightbox::backdrop { background: color-mix(in srgb, var(--pdp-ink, #1E293B) 70%, transparent); }
.yns-pdp__lightbox img { display: block; width: 100%; height: auto; max-height: 92vh; object-fit: contain; }
.yns-pdp__lightbox-close {
	position: absolute;
	inset-inline-end: .75rem;
	top: .75rem;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border: 0;
	border-radius: 50%;
	background: #FFFFFC;
	color: var(--pdp-ink, #1E293B);
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 4px 14px -4px rgba(0, 0, 0, .3);
	transition: transform .15s var(--pdp-ease);
}
.yns-pdp__lightbox-close:hover { transform: scale(1.08); }
.yns-pdp__lightbox-close:focus-visible { outline: 3px solid var(--yn-yellow, #FDDC00); outline-offset: 2px; }
.yns-pdp__lightbox-close:active { transform: scale(.94); }

/* ---------- Tablet & phone ---------- */

@media (max-width: 980px) {
	.yns-pdp { --pdp-radius: 1.5rem; --pdp-head-offset: 6rem; }
	.yns-pdp__top { grid-template-columns: minmax(0, 1fr); }
	.yns-pdp__media { position: static; }

	/* Collage becomes a swipeable strip. */
	.yns-pdp__grid,
	.yns-pdp__grid.is-n1 {
		display: flex;
		gap: .5rem;
		aspect-ratio: auto;
		margin-inline: calc(var(--pdp-gutter) * -1);
		padding-inline: var(--pdp-gutter);
		border-radius: 0;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}
	.yns-pdp__grid::-webkit-scrollbar { display: none; }
	.yns-pdp__tile,
	.yns-pdp__tile--main {
		flex: none;
		width: min(82%, 26rem);
		aspect-ratio: 4 / 5;
		border-radius: var(--pdp-radius);
		scroll-snap-align: center;
	}
	.is-n1 .yns-pdp__tile--main, .is-n0 .yns-pdp__tile--main { width: 100%; }
	.yns-pdp__rating-badge { inset-inline-start: calc(var(--pdp-gutter) + .75rem); }

	.yns-pdp__best-inner,
	.yns-pdp__support-inner { grid-template-columns: minmax(0, 1fr); }
	.yns-pdp__best-head { padding: 0; }
	.yns-pdp__rail-nav { grid-column: 1; }
	.yns-pdp__rail { margin-inline: calc(var(--pdp-gutter) * -1); padding-inline: var(--pdp-gutter); scroll-padding-inline: var(--pdp-gutter); }
}

@media (max-width: 600px) {
	.yns-pdp__buy { margin: 0 .35rem; }
	html body .yns-pdp .woocommerce-variation-add-to-cart,
	html body .yns-pdp .yns-pdp__buy form.cart:not(.variations_form) { border-radius: 1.5rem; }
	html body .yns-pdp .yns-pdp__buy .single_add_to_cart_button { flex: 1 1 8rem; width: auto; padding-inline: 1rem !important; }
	/* Total on its own line above quantity + buttons. */
	html body .yns-pdp .yns-live-total { flex: 1 1 100%; flex-direction: row; align-items: baseline; gap: .4rem; padding: .3rem .75rem 0; }
	.yns-pdp__acc summary { padding: 1rem 1.15rem; }
	.yns-pdp__acc-body { padding: 0 1.15rem 1rem; }
}

@media (prefers-reduced-motion: reduce) {
	.yns-pdp *, .yns-pdp *::before, .yns-pdp *::after { transition-duration: 0s !important; }
}

/* ---------- Phones: sticky buy bar ---------- */
.yns-pdp__sticky { display: none; }
@media (max-width: 980px) {
	.yns-pdp__sticky:not([hidden]) {
		position: fixed;
		inset-inline: 0;
		bottom: 0;
		z-index: 9990;
		display: flex;
		align-items: center;
		gap: .6rem;
		padding: .65rem max(.85rem, env(safe-area-inset-left)) calc(.65rem + env(safe-area-inset-bottom));
		background: color-mix(in srgb, #FFFFFC 92%, transparent);
		-webkit-backdrop-filter: blur(14px);
		backdrop-filter: blur(14px);
		box-shadow: 0 -10px 30px -12px rgba(2, 40, 80, .28), 0 -1px 0 rgba(2, 40, 80, .06);
		animation: yns-sticky-in .45s cubic-bezier(.22, 1.2, .36, 1) both;
	}
	.yns-pdp__sticky.is-leaving { animation: yns-sticky-out .25s ease-in both; }
	.yns-pdp__sticky-info { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
	.yns-pdp__sticky-name { overflow: hidden; color: var(--pdp-body); font-size: .78rem; white-space: nowrap; text-overflow: ellipsis; }
	.yns-pdp__sticky-price { color: var(--yn-primary, #0258A2); font-size: 1.05rem; font-weight: 800; }
	.yns-pdp__sticky-price del { color: var(--pdp-body); font-size: .8rem; font-weight: 500; opacity: .7; }
	.yns-pdp__sticky-price ins { text-decoration: none; }
	.yns-pdp__sticky button { flex: none; min-height: 2.9rem; border: 0; border-radius: 999px; font: inherit; font-weight: 800; cursor: pointer; transition: opacity .2s, transform .2s cubic-bezier(.22, 1.2, .36, 1); }
	.yns-pdp__sticky button:hover { opacity: .92; }
	.yns-pdp__sticky button:active { opacity: .85; }
	.yns-pdp__sticky button:focus-visible { outline: 3px solid var(--yn-primary, #0258A2); outline-offset: 2px; }
	.yns-pdp__sticky-cart { display: inline-grid; place-items: center; width: 2.9rem; padding: 0; background: var(--yn-primary, #0258A2); color: #FFFFFC; }
	.yns-pdp__sticky-cart svg { width: 1.35rem; height: 1.35rem; }
	.yns-pdp__sticky-buy { padding: .5rem 1.35rem; background: var(--yn-yellow, #FDDC00); color: #1E293B; font-size: .98rem; }
	/* The WhatsApp button moves up while the bar is showing. */
	html.yns-sticky-on .yns-wa { transform: translateY(calc(-1 * var(--yns-sticky-h, 72px))); }
	html.yns-sticky-on body { padding-bottom: var(--yns-sticky-h, 72px); }
}
@keyframes yns-sticky-in { from { transform: translateY(100%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes yns-sticky-out { to { transform: translateY(100%); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .yns-pdp__sticky:not([hidden]), .yns-pdp__sticky.is-leaving { animation: none; } }

/* ---------- Reviews ---------- */
.yns-pdp__reviews { background: var(--pdp-page); }
.yns-pdp__reviews-avg { display: flex; align-items: center; gap: .5rem; margin: .25rem 0 1.25rem; color: var(--pdp-ink); }
.yns-pdp__reviews #reviews { margin: 0; }
.yns-pdp__reviews .woocommerce-Reviews-title { display: none; }
.yns-pdp__reviews .woocommerce-noreviews { margin: 0 0 1rem; color: var(--pdp-body); }
.yns-pdp__reviews ol.commentlist { margin: 0 0 1.5rem; padding: 0; list-style: none; display: grid; gap: .75rem; }
.yns-pdp__reviews ol.commentlist li { margin: 0; padding: 1rem 1.15rem; border-radius: 1.25rem; background: var(--pdp-card); box-shadow: 0 1px 0 var(--pdp-line); }
.yns-pdp__reviews ol.commentlist li img.avatar { display: none; }
.yns-pdp__reviews ol.commentlist li .comment-text { margin: 0 !important; padding: 0 !important; border: 0 !important; }
.yns-pdp__reviews .meta { margin: 0 0 .35rem !important; color: var(--pdp-body); font-size: .85rem; }
.yns-pdp__reviews .star-rating { float: none !important; margin: 0 0 .35rem !important; color: var(--yn-orange, #FF7515); }
.yns-pdp__reviews #review_form_wrapper { padding: 1.25rem; border-radius: 1.5rem; background: var(--pdp-card); box-shadow: 0 1px 0 var(--pdp-line); }
.yns-pdp__reviews #reply-title { display: block; margin: 0 0 .75rem; color: var(--pdp-ink); font-size: 1.1rem; font-weight: 800; }
.yns-pdp__reviews .comment-form p { margin: 0 0 .85rem; }
.yns-pdp__reviews .comment-form label { display: block; margin-bottom: .3rem; color: var(--pdp-ink); font-weight: 700; font-size: .92rem; }
.yns-pdp__reviews .comment-form input[type="text"],
.yns-pdp__reviews .comment-form input[type="email"],
.yns-pdp__reviews .comment-form textarea { width: 100%; padding: .7rem .9rem; border: 1px solid var(--pdp-line); border-radius: .85rem; background: #FFFFFC; font: inherit; }
.yns-pdp__reviews .comment-form input:focus-visible,
.yns-pdp__reviews .comment-form textarea:focus-visible { outline: none; border-color: var(--yn-primary, #0258A2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--yn-primary, #0258A2) 18%, transparent); }
.yns-pdp__reviews p.stars a { color: var(--yn-orange, #FF7515); }
html body #page-container .yns-pdp__reviews .form-submit #submit { width: auto; height: auto; line-height: 1.2; min-height: 2.9rem; padding: .6rem 1.75rem; border: 0; border-radius: 999px; background: var(--yn-primary, #0258A2); color: #FFFFFC; font: inherit; font-weight: 800; cursor: pointer; transition: opacity .2s; }
html body #page-container .yns-pdp__reviews .form-submit #submit:hover { opacity: .9; }
html body #page-container .yns-pdp__reviews .form-submit #submit:focus-visible { outline: 3px solid color-mix(in srgb, var(--yn-primary, #0258A2) 35%, transparent); outline-offset: 2px; }
html body #page-container .yns-pdp__reviews .form-submit #submit:active { opacity: .85; }
.yns-pdp__reviews .comment-form-cookies-consent { display: flex; gap: .5rem; align-items: flex-start; font-size: .85rem; }
.yns-pdp__reviews .comment-form-cookies-consent label { font-weight: 400; }

/* Headings inside the product description: sized for a card, not a page. */
html body .yns-pdp .yns-pdp__desc h2 { margin: 1.4rem 0 .5rem; padding: 0; color: var(--pdp-ink); font-size: clamp(1.15rem, 1.6vw, 1.35rem); font-weight: 800; line-height: 1.35; letter-spacing: -.01em; }
html body .yns-pdp .yns-pdp__desc h3 { margin: 1.1rem 0 .35rem; padding: 0; color: var(--pdp-ink); font-size: 1.05rem; font-weight: 800; line-height: 1.4; }
html body .yns-pdp .yns-pdp__desc ul, html body .yns-pdp .yns-pdp__desc ol { margin: 0 0 .75rem; padding-inline-start: 1.25rem; }
html body .yns-pdp .yns-pdp__desc li { margin-bottom: .25rem; }
html body .yns-pdp .yns-pdp__desc a { color: var(--yn-primary, #0258A2); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }