/*
 * pdp.css — native product page (surface `pdp`), loaded only on product pages while the surface is on.
 * Everything is scoped under [data-avl-sf="pdp"]; logical properties so /en/ (dir=ltr) mirrors by itself.
 * Values ported per component from A's compiled uploads/elementor/css/post-12366.css + the kit (widget spacing 20px):
 * boxed 1250, gallery column framed (1px #EEE, inner shadow box) and sticky (N6), title 22/700 #000,
 * price 18/700 #4E4E4E, discount badge #009C30 15/700 r5, trust grid #EFF2F7 r10, payment logos 250px,
 * bands with full-width #ECECEC lines (border-image outset = ink overflow, never a horizontal scroll),
 * related cards (670609c): grid columns here; the card skin is catalog.css's (0.2.1: the inert --box-styler copy dropped).
 * 0.2.1: only body.avs-pdp-on rules touch Rey's content box (A's full-width template printed none); each summary
 * gap sits on one side of its junction, so collapsing (block) and adding (flex) margins give the same result.
 */

/* No gutter / max width (P-2), top (P-8) or bottom (P-12) padding; row + main zeroed so nothing overflows.
   Rey's bundle loads after this file: these outrank its 0,2,x rules (.single-product .rey-siteContainer). */
body.avs-pdp-on .rey-siteContent .rey-siteContainer {
	max-width: none;
	margin-block-end: 0;
	padding: 0;
}

body.avs-pdp-on .rey-siteContainer .rey-siteRow {
	margin-inline: 0;
}

body.avs-pdp-on .rey-siteRow .rey-siteMain {
	padding: 0;
}

[data-avl-sf="pdp"] {
	--avs-pdp-line: #ececec;
	--avs-pdp-din: var(--avs-din, "DINNextLTArabic", sans-serif);
	box-sizing: border-box;
	inline-size: 100%;
	max-inline-size: calc(var(--avs-pdp-max, 1250px) + 20px);
	margin-inline: auto;
}

[data-avl-sf="pdp"] *,
[data-avl-sf="pdp"] *::before,
[data-avl-sf="pdp"] *::after {
	box-sizing: border-box;
}

/* ------------------------------------------------------------------ row: gallery | summary */

.woocommerce [data-avl-sf="pdp"] div.product,
[data-avl-sf="pdp"] div.product {
	display: block;
	margin: 0;
	padding: 0;
}

[data-avl-sf="pdp"] .rey-productSummary {
	display: block;
	inline-size: 100%;
	max-inline-size: none;
	margin: 0;
	padding: 0;
}

[data-avl-sf="pdp"] .avs-pdp__row {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	inline-size: 100%;
	padding-block: 20px;
	padding-inline: 10px;
}

.woocommerce [data-avl-sf="pdp"] .avs-pdp__row > .avs-pdp__media,
.woocommerce [data-avl-sf="pdp"] .avs-pdp__row > div.images,
.woocommerce [data-avl-sf="pdp"] .avs-pdp__row > .woocommerce-product-gallery {
	flex: 0 0 100%;
	float: none;
	inline-size: 100%;
	max-inline-size: 100%;
	margin: 0;
	padding: 10px;
}

.woocommerce [data-avl-sf="pdp"] .avs-pdp__row > div.summary {
	flex: 0 0 100%;
	float: none;
	inline-size: 100%;
	max-inline-size: 100%;
	margin: 0;
	padding: 10px;
	background: transparent;
}

@media (min-width: 768px) {
	.woocommerce [data-avl-sf="pdp"] .avs-pdp__row > .avs-pdp__media,
	.woocommerce [data-avl-sf="pdp"] .avs-pdp__row > div.images,
	.woocommerce [data-avl-sf="pdp"] .avs-pdp__row > .woocommerce-product-gallery,
	.woocommerce [data-avl-sf="pdp"] .avs-pdp__row > div.summary {
		flex-basis: 50%;
		inline-size: 50%;
		max-inline-size: 50%;
		padding-inline: 25px;
	}
}

/* Gallery box: section 8e2ba63 (white, 1px #EEE, sticky top) > column d2a3352 (padding 10, shadow). */
[data-avl-sf="pdp"] .avs-pdp__frame {
	background: #fff;
	border: 1px solid #eee;
}

[data-avl-sf="pdp"][data-sticky="css"] .avs-pdp__frame {
	position: sticky;
	inset-block-start: var(--avs-pdp-sticky-top, 0px);
	z-index: 1;
}

[data-avl-sf="pdp"] .avs-pdp__frame-in {
	display: flow-root;
	padding: 0;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
}

.woocommerce [data-avl-sf="pdp"] .avs-pdp__frame-in .woocommerce-product-gallery,
.woocommerce [data-avl-sf="pdp"] .avs-pdp__frame-in div.images {
	float: none;
	inline-size: 100%;
	max-inline-size: 100%;
	margin: 0;
}

/* ------------------------------------------------------------------ summary (column 31fa8dc) */

/* Rey's summary_padding / summary_bg_color (theme mods 50 / #fff) were A's Elementor column padding 10 instead. */
.woocommerce [data-avl-sf="pdp"] div.product .summary .rey-innerSummary,
[data-avl-sf="pdp"] .summary .rey-innerSummary {
	padding: 0;
	background: transparent;
}

.woocommerce [data-avl-sf="pdp"] div.product .summary .product_title,
[data-avl-sf="pdp"] .summary .product_title {
	margin-block: 0 20px;
	color: #000;
	font-family: var(--avs-pdp-din);
	font-size: 22px;
	font-weight: 700;
}

/* P-5 guard (the callback is removed in PHP). */
[data-avl-sf="pdp"] .summary > .rey-postNav {
	display: none;
}

/* H1 20 + A's title widget spacing 20 (A printed no empty rating widget). */
[data-avl-sf="pdp"] .summary .rey-productTitle-wrapper {
	display: flow-root;
	margin: 0 0 20px;
}

[data-avl-sf="pdp"] .summary .woocommerce-product-rating {
	margin-block: 0 20px;
}

[data-avl-sf="pdp"] .summary .woocommerce-product-rating .woocommerce-review-link {
	display: inline-block;
}

[data-avl-sf="pdp"] .summary .avs-pdp-tags {
	margin-block: 0 10px;
}

.woocommerce [data-avl-sf="pdp"] div.product .summary p.price,
[data-avl-sf="pdp"] .summary p.price {
	margin-block: 0 30px;
	color: #4e4e4e;
	font-family: var(--avs-pdp-din);
	font-size: 18px;
	font-weight: 700;
}

.woocommerce [data-avl-sf="pdp"] div.product .summary .rey-productTitle-wrapper + p.price {
	margin-block-start: -10px;
}

/* P-1: Rey's red discount colour outranked the old rule. */
.woocommerce [data-avl-sf="pdp"] div.product .summary p.price .rey-discount,
[data-avl-sf="pdp"] .summary p.price .rey-discount {
	background-color: #009c30 !important;
	font-family: var(--avs-pdp-din) !important;
	font-size: 15px !important;
	font-weight: 700;
	border-radius: 5px;
}

[data-avl-sf="pdp"] .summary .woocommerce-product-details__short-description {
	margin-block: 0 0;
}

[data-avl-sf="pdp"] .summary .woocommerce-product-details__short-description > :last-child {
	margin-block-end: 20px;
}

/* Rey's form.cart 20 (simple products were 10 short). */
[data-avl-sf="pdp"] .summary form.cart {
	margin-block: 0 20px;
}

/* A's ATC widget custom CSS (09d7dad). */
[data-avl-sf="pdp"] .tamara-summary-widget__container {
	margin-bottom: 20px !important;
}

/* Wishlist → share: A 20 − 10 + 20, + 20 when its (invisible) SKU widget printed (data-sku). Share → trust 40. */
[data-avl-sf="pdp"] .summary .rey-after-atcForm {
	margin-block-end: 30px;
}

[data-avl-sf="pdp"] .summary .product_meta {
	margin: 0;
	padding: 0;
}

[data-avl-sf="pdp"][data-sku] .summary .product_meta {
	padding-block-start: 20px;
}

[data-avl-sf="pdp"] .summary .product_meta .sku_wrapper {
	display: none !important;
}

[data-avl-sf="pdp"] .summary .rey-productShare {
	margin-block: 0 40px;
}

/* ------------------------------------------------------------------ trust grid (section f4ece19) */

[data-avl-sf="pdp"] .avs-trust {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding-block: 15px;
	padding-inline: 0;
	list-style: none;
	background-color: #eff2f7;
	border-radius: 10px;
}

[data-avl-sf="pdp"] .avs-trust__item {
	display: flex;
	flex: 0 0 25%;
	align-items: center;
	justify-content: center;
	gap: 5px;
	max-inline-size: 25%;
	margin: 0;
	padding: 0;
	font-family: var(--avs-pdp-din);
	font-size: 14px;
	line-height: 1.4;
	text-align: center;
}

[data-avl-sf="pdp"] .avs-trust__icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	inline-size: 25px;
	block-size: 25px;
	line-height: 1;
}

[data-avl-sf="pdp"] .avs-trust__icon svg {
	display: block;
	inline-size: 25px;
	block-size: 25px;
}

/* The truck replaces A's AVL-SHIP-ICON mask (1.08em of the 25px icon size). */
[data-avl-sf="pdp"] .avs-trust__item--shipping .avs-trust__icon,
[data-avl-sf="pdp"] .avs-trust__item--shipping .avs-trust__icon svg {
	inline-size: 27px;
	block-size: 27px;
}

[data-avl-sf="pdp"] .avs-trust__img {
	display: block;
	inline-size: 25px;
	block-size: 25px;
	object-fit: contain;
}

@media (max-width: 1024px) {
	[data-avl-sf="pdp"] .avs-trust {
		padding-block: 10px;
	}

	[data-avl-sf="pdp"] .avs-trust__item {
		flex-basis: 50%;
		max-inline-size: 50%;
	}

	[data-avl-sf="pdp"] .avs-trust__item:nth-child(n + 3) {
		margin-block-start: 10px;
	}
}

/* ------------------------------------------------------------------ payment (52991d9 + 65ace6d) */

[data-avl-sf="pdp"] .avs-pay {
	margin-block-start: 20px;
	text-align: center;
}

[data-avl-sf="pdp"] .avs-pay__title {
	margin-block: 0 20px;
	font-family: var(--avs-pdp-din);
	font-weight: 400;
	text-align: center;
}

[data-avl-sf="pdp"] .avs-pay__logos img {
	display: inline-block;
	inline-size: var(--avs-pdp-pay-w, 250px);
	max-inline-size: 100%;
	block-size: auto;
}

/* ------------------------------------------------------------------ bands (f6e888d / 3fe7aad / b4b7387) */

[data-avl-sf="pdp"] .avs-pdp-band {
	position: relative;
	background-color: #fff;
}

[data-avl-sf="pdp"] .avs-pdp-band__in {
	inline-size: 100%;
	max-inline-size: var(--avs-pdp-max, 1250px);
	margin-inline: auto;
	padding: 10px;
}

[data-avl-sf="pdp"] .avs-pdp-band .avs-pdp-band__title {
	margin-block: 0 20px;
	color: #000;
	font-family: var(--avs-pdp-din);
	font-weight: 600;
}

[data-avl-sf="pdp"] .avs-pdp-specs,
[data-avl-sf="pdp"] .avs-pdp-related,
[data-avl-sf="pdp"] .avs-pdp-tab,
[data-avl-sf="pdp"] .avs-pdp-reviews {
	border-block: 1px solid var(--avs-pdp-line);
	border-inline: 0;
	border-image: linear-gradient(var(--avs-pdp-line), var(--avs-pdp-line)) 1 / 1px 0 / 0 100vw;
}

[data-avl-sf="pdp"] .avs-pdp-specs {
	padding: 10px;
}

/* P-3: full-bleed white specs / related (ink overflow, clipped to the band), description on the page grey. */
[data-avl-sf="pdp"] .avs-pdp-specs,
[data-avl-sf="pdp"] .avs-pdp-related {
	box-shadow: 0 0 0 100vmax #fff;
	clip-path: inset(0 -100vmax);
}

[data-avl-sf="pdp"] .avs-pdp-band.avs-pdp-desc {
	background-color: transparent;
}

[data-avl-sf="pdp"] .avs-pdp-band + .avs-pdp-related {
	margin-block-start: -1px;
}

/* P-4: «المواصفات» stays in the markup, hidden as on A. */
[data-avl-sf="pdp"] .avs-pdp-specs__body > h2 {
	display: none;
}

/* 0.2.1-hf2: shipping weight/dimensions rows («16 جرام», «غير محدد») — specs live in the description. */
[data-avl-sf="pdp"] :is(.woocommerce-product-attributes-item--weight, .woocommerce-product-attributes-item--dimensions) {
	display: none;
}

.woocommerce [data-avl-sf="pdp"] .avs-pdp-specs .shop_attributes {
	font-size: 18px;
}

[data-avl-sf="pdp"] .avs-pdp-desc {
	padding-block: 20px;
	padding-inline: 0;
}

[data-avl-sf="pdp"] .avs-pdp-desc__body {
	font-family: var(--avs-pdp-din);
}

[data-avl-sf="pdp"] .avs-pdp-related {
	padding-block: 35px;
	padding-inline: 10px;
}

@media (max-width: 1024px) {
	[data-avl-sf="pdp"] .avs-pdp-band__in {
		padding-inline: 0;
	}

	[data-avl-sf="pdp"] .avs-pdp-desc {
		padding-block: 35px;
		padding-inline: 10px;
	}
}

/* ------------------------------------------------------------------ related cards (670609c) */

[data-avl-sf="pdp"] .avs-pdp-related ul.products {
	--woocommerce-grid-columns: var(--avs-pdp-cols, 5);
	--woocommerce-products-gutter: 10px;
}

/* The card itself (border 0 3px 3px 0 #E5E5E5 → #000, r10, shadow, white details) is catalog.css's body.avs-skin
   .rey-productInner rule (Skin::here() is true on the native PDP); the contract's cards carry no --box-styler. */

@media (max-width: 1024px) {
	[data-avl-sf="pdp"] .avs-pdp-related ul.products {
		--woocommerce-grid-columns: var(--avs-pdp-cols-t, 3);
	}
}

@media (max-width: 767px) {
	[data-avl-sf="pdp"] .avs-pdp-related ul.products {
		--woocommerce-grid-columns: var(--avs-pdp-cols-m, 2);
		--woocommerce-products-gutter: 8px;
	}

	/* P-11: two whole cards (Splide writes its padding inline). */
	[data-avl-sf="pdp"] .avs-pdp-related .avs-pdp-band__in {
		padding: 0;
	}

	[data-avl-sf="pdp"] .avs-pdp-related .splide .splide__track {
		overflow: hidden;
		padding-inline: 0 !important;
	}
}

/* Fallback strip ([products] without the listing renderer): one row, scroll-snap, 5 / 3 / 2 per view. */
[data-avl-sf="pdp"] .avs-strip {
	--avs-strip-n: var(--avs-pdp-cols, 5);
	--avs-strip-gap: 10px;
	position: relative;
}

@media (max-width: 1024px) {
	[data-avl-sf="pdp"] .avs-strip {
		--avs-strip-n: var(--avs-pdp-cols-t, 3);
	}
}

@media (max-width: 767px) {
	[data-avl-sf="pdp"] .avs-strip {
		--avs-strip-n: var(--avs-pdp-cols-m, 2);
		--avs-strip-gap: 8px;
	}
}

.woocommerce [data-avl-sf="pdp"] .avs-strip ul.products {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--avs-strip-gap);
	margin: 0;
	padding: 0 0 10px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

.woocommerce [data-avl-sf="pdp"] .avs-strip ul.products::before,
.woocommerce [data-avl-sf="pdp"] .avs-strip ul.products::after {
	content: none;
	display: none;
}

.woocommerce [data-avl-sf="pdp"] .avs-strip ul.products li.product {
	flex: 0 0 calc((100% - (var(--avs-strip-n) - 1) * var(--avs-strip-gap)) / var(--avs-strip-n));
	float: none;
	inline-size: auto;
	max-inline-size: none;
	margin: 0;
	scroll-snap-align: start;
}

[data-avl-sf="pdp"] .avs-strip__nav {
	position: absolute;
	inset-block-start: -52px;
	inset-inline-end: 0;
	display: flex;
	gap: 6px;
}

[data-avl-sf="pdp"] .avs-strip__nav[hidden] {
	display: none;
}

[data-avl-sf="pdp"] .avs-strip__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 36px;
	block-size: 36px;
	margin: 0;
	padding: 0;
	color: #000;
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 50%;
	cursor: pointer;
}

[data-avl-sf="pdp"] .avs-strip__btn:hover {
	border-color: #000;
}

[data-avl-sf="pdp"] .avs-strip__btn[disabled] {
	opacity: 0.4;
	cursor: default;
}

/* The chevron points right (">"). Next = towards the inline end: ">" in LTR, "<" in RTL. */
[data-avl-sf="pdp"] .avs-strip__btn--prev svg {
	transform: scaleX(-1);
}

[dir="rtl"] [data-avl-sf="pdp"] .avs-strip__btn--prev svg {
	transform: none;
}

[dir="rtl"] [data-avl-sf="pdp"] .avs-strip__btn--next svg {
	transform: scaleX(-1);
}

/* ------------------------------------------------------------------ focus + motion */

[data-avl-sf="pdp"] a:focus-visible,
[data-avl-sf="pdp"] button:focus-visible,
[data-avl-sf="pdp"] [tabindex]:focus-visible {
	outline: 2px solid #0071e3;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce [data-avl-sf="pdp"] .avs-strip ul.products {
		scroll-behavior: auto;
	}
}

/* ------------------------------------------------------------------ /en/ (TranslatePress) — port of the
   Customizer's AVL-EN-LTR rules that targeted A's .elementor-widget-reycore-woo-pdp-description. The product
   descriptions carry inline physical RTL styles, so these overrides are physical on purpose. */

body.translatepress-en_US [data-avl-sf="pdp"] .avs-pdp-desc__body {
	direction: ltr;
	text-align: left;
}

body.translatepress-en_US [data-avl-sf="pdp"] .avs-pdp-desc__body [dir="rtl"] {
	direction: ltr !important;
	text-align: left !important;
}

body.translatepress-en_US [data-avl-sf="pdp"] .avs-pdp-desc__body :is([style*="text-align: right"], [style*="text-align:right"]) {
	text-align: left !important;
}

body.translatepress-en_US [data-avl-sf="pdp"] .avs-pdp-desc__body [dir="rtl"] h2[style*="border-right"] {
	border-right: 0 !important;
	border-left: 5px solid #0071e3 !important;
	padding-right: 0 !important;
	padding-left: 12px !important;
}

body.translatepress-en_US [data-avl-sf="pdp"] .avs-pdp-desc__body [dir="rtl"] :is(ul, ol)[style*="padding-right"] {
	padding-right: 0 !important;
	padding-left: 22px !important;
}

body.translatepress-en_US [data-avl-sf="pdp"] .avs-pdp-desc__body [dir="rtl"] table :is(td, th) {
	text-align: left !important;
}
