/*
 * product-detail.css - the single product page (PDP).
 *
 * LAYER 5. Owns the PDP shell: breadcrumb, three-column grid, gallery, summary, key facts,
 * specifications panel, enquiry aside and the related-products strip.
 *
 * It does NOT own the product card. Related products render the canonical card from
 * product-card.css; only their wrapper grid lives here.
 *
 * PROVENANCE
 *   desktop : screens/07-detail-desktop-guest.html + 09-detail-desktop-b2b.html (AR_Detail)
 *             breadcrumb 18px top, grid 470px / 1fr / 370px with 36px gap and 20px/44px
 *             block padding, 76px thumbs at 10px gap, h1 32px/700, facts cells 16px 18px,
 *             specs table 13px with 11px/18px cells, aside sticky at 16px,
 *             related grid repeat(4, 1fr) at 20px gap under a 28px-padded rule
 *   mobile  : screens/08-detail-mobile-guest.html + 10-detail-mobile-b2b.html
 *             breadcrumb 12px top, single column at 12px 16px, 44px thumbs at 8px gap,
 *             h1 23px/700, facts cells 12px 14px, specs table 12.5px with 10px/14px cells
 *
 * Every colour is a token from tokens.css - no literals were added for this component.
 *
 * Mobile-first. Logical properties throughout: no physical left/right anywhere in this file.
 *
 * NOT STYLED HERE, BECAUSE NOT RENDERED: price and the price gate. See inc/product-detail.php
 * for why. A carton-quantity stepper and an "أضف إلى الطلب"/"اطلب عبر واتساب" action pair WERE
 * added at TASK-065 (still with no price anywhere) - see the "Order actions" block below.
 */

/* ---------------------------------------------------------------------------
 * Breadcrumb
 *
 * Reuses .zahra-breadcrumb from shop-archive.css so the catalogue has one breadcrumb
 * appearance rather than two. Only the PDP-specific spacing and the mobile trimming live
 * here.
 *
 * The approved mobile screen shows «المنتجات / CATEGORY» only - no home crumb and no
 * current product name. That is a display difference, not a second markup branch, so it is
 * done in CSS. The full trail stays in the DOM for assistive technology at every width.
 * ------------------------------------------------------------------------- */

.zahra-pdp-breadcrumb {
	gap: 6px;
	padding-block-start: 12px;
}

.zahra-pdp-breadcrumb__home,
.zahra-pdp-breadcrumb__current,
.zahra-pdp-breadcrumb__sep--last {
	display: none;
}

/* ---------------------------------------------------------------------------
 * The grid
 *
 * Column order in the DOM is gallery, summary, aside. Under dir="rtl" the first column is
 * the rightmost one, which is exactly what the approved screens show - nothing needs to be
 * reversed.
 * ------------------------------------------------------------------------- */

.zahra-pdp {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	align-items: start;
	padding-block: 12px;
}

/*
 * `.summary.entry-summary` is WooCommerce's own element - it is the middle grid item, which
 * is why this page needs no content-single-product.php override.
 *
 * WooCommerce's layout stylesheet sets `div.product div.summary { float: left; width: 48% }`.
 * `float` is inert on a grid item but the width is not, and it would collapse this column.
 * The selector below is deliberately specific enough to win that rule outright rather than
 * relying on stylesheet order.
 */
.zahra-pdp-page div.product div.summary.entry-summary {
	display: flex;
	flex-direction: column;
	gap: 12px;
	inline-size: auto;
	float: none;
	min-inline-size: 0;
}

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

.zahra-pdp-gallery {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-inline-size: 0;
}

/*
 * Portrait, not square (TASK-054 parity): the real packshots this stage renders are portrait
 * (roughly 4:5, e.g. the 600x750 `woocommerce_single` output), not square - the catalogue's
 * own photography, unchanged since. The square box the original screens (07-10) show was
 * built before that was known; TASK-054 already corrected the product-card media box from
 * 1:1 to 3:4 for exactly this reason, but the PDP stage was out of that task's scope and was
 * never reconciled, so it kept letterboxing every portrait photo inside a square frame with
 * large empty bars above/below. Matches the card's own 3:4 ratio and 16px inset so the same
 * packshot reads consistently in both places.
 */
.zahra-pdp-gallery__stage {
	aspect-ratio: 3 / 4;
	background: var(--zahra-color-sand-2);
	border: 1px solid var(--zahra-color-line);
	overflow: hidden;
	padding: 16px;
}

/* contain, not cover: product packshots must never be cropped. */
.zahra-pdp-gallery__image {
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
	display: block;
}

.zahra-pdp-gallery__thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/*
 * One rule for both the <span> the server renders and the <button> the script upgrades it
 * to, so the strip looks identical with and without JavaScript.
 */
.zahra-pdp-gallery__thumb {
	inline-size: 44px;
	block-size: 44px;
	display: block;
	padding: 0;
	background: var(--zahra-color-sand-2);
	border: 1px solid var(--zahra-color-line);
	overflow: hidden;
	flex: 0 0 auto;
}

button.zahra-pdp-gallery__thumb {
	cursor: pointer;
}

.zahra-pdp-gallery__thumb.is-active {
	border: 1.5px solid var(--zahra-color-ink);
}

.zahra-pdp-gallery__thumb-img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
	display: block;
}

/* ---------------------------------------------------------------------------
 * Brand
 *
 * Renders only for products that have a real brand term - there is no empty state to style.
 * ------------------------------------------------------------------------- */

.zahra-pdp-brand {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

.zahra-pdp-brand__badge {
	font-size: 12px;
	font-weight: 600;
	color: var(--zahra-color-success-2);
	background: var(--zahra-color-success-bg);
	border: 1px solid var(--zahra-color-success-line);
	padding: 4px 9px;
}

/*
 * «جميع منتجات X ←» is DESKTOP ONLY.
 *
 * screens/07-detail-desktop-guest.html shows it beside the brand badge;
 * screens/08-detail-mobile-guest.html shows the badge ALONE and contains no such link at all.
 * Same situation, and same treatment, as the Fresh section in pages/home.css.
 *
 * It surfaced at TASK-012A rather than TASK-009 for a simple reason: until the brand base was
 * repaired, zahra_v2_term_archive_url() returned '' and the link never rendered at any width,
 * so the mobile screen's omission could not be observed. The markup is unchanged - the link is
 * still emitted for assistive technology parity with desktop only where the design shows it.
 */
.zahra-pdp-brand__link {
	display: none;
	font-size: 12.5px;
	color: var(--zahra-color-muted);
	text-decoration: none;
}

.zahra-pdp-brand__link:hover,
.zahra-pdp-brand__link:focus-visible {
	color: var(--zahra-color-brand);
	text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * Title - the page's only h1. Never truncated; long Arabic names wrap.
 * ------------------------------------------------------------------------- */

.zahra-pdp-title {
	margin: 0;
	font-size: 23px;
	font-weight: 700;
	line-height: 1.4;
	overflow-wrap: break-word;
}

/* ---------------------------------------------------------------------------
 * Key facts
 *
 * A <dl>: each cell is a label/value pair, which is what the approved grid actually is. The
 * 1px gap over a line-coloured background draws the cell separators without per-cell borders.
 * ------------------------------------------------------------------------- */

.zahra-pdp-facts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	margin: 0;
	background: var(--zahra-color-line);
	border: 1px solid var(--zahra-color-line);
}

.zahra-pdp-facts__cell {
	background: var(--zahra-color-surface);
	padding: 12px 14px;
	min-inline-size: 0;
}

/*
 * The packaging cell spans the row: it carries a full Arabic sentence rather than a short
 * value, because the catalogue has no structured pieces-per-carton number (D-016, Q-011).
 */
.zahra-pdp-facts__cell--wide {
	grid-column: 1 / -1;
	background: var(--zahra-color-sand);
}

.zahra-pdp-facts__label {
	display: block;
	font-size: 11px;
	font-weight: 600;
	color: var(--zahra-color-muted);
	margin-block-end: 4px;
}

.zahra-pdp-facts__value {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
}

.zahra-pdp-facts__link {
	color: inherit;
	text-decoration: none;
}

.zahra-pdp-facts__link:hover,
.zahra-pdp-facts__link:focus-visible {
	color: var(--zahra-color-brand);
	text-decoration: underline;
}

/*
 * Availability. The dot is decorative; the text beside it carries the state, so the cue
 * survives without colour perception (ACCESSIBILITY.md section 2).
 */
.zahra-pdp-stock {
	display: flex;
	align-items: center;
	gap: 7px;
}

.zahra-pdp-stock__dot {
	inline-size: 8px;
	block-size: 8px;
	flex: 0 0 auto;
}

.zahra-pdp-stock.is-in-stock {
	color: var(--zahra-color-success);
}

.zahra-pdp-stock.is-in-stock .zahra-pdp-stock__dot {
	background: var(--zahra-color-success);
}

.zahra-pdp-stock.is-out-of-stock {
	color: var(--zahra-color-muted);
}

.zahra-pdp-stock.is-out-of-stock .zahra-pdp-stock__dot {
	background: var(--zahra-color-muted);
}

/* ---------------------------------------------------------------------------
 * Order actions (TASK-065) - quantity, "أضف إلى الطلب", "اطلب عبر واتساب"
 *
 * Sits where the omitted price/add-to-cart block would have (inc/product-detail.php). Reuses
 * the same primary-CTA (--zahra-color-brand) and WhatsApp (--zahra-color-success, already the
 * exact token Quick Order's own WhatsApp link uses - assets/css/pages/quick-order.css) tokens
 * rather than inventing a new palette.
 * ------------------------------------------------------------------------- */

.zahra-pdp-actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-block: 4px 8px;
}

.zahra-pdp-actions__qty-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.zahra-pdp-actions__qty-label {
	font-size: 11.5px;
	font-weight: 600;
	color: var(--zahra-color-ink-2);
}

.zahra-pdp-actions__stepper {
	display: inline-flex;
	block-size: 44px;
	inline-size: 140px;
	border: 1px solid var(--zahra-color-field);
}

.zahra-pdp-actions__stepper-btn {
	inline-size: 42px;
	flex: 0 0 auto;
	background: var(--zahra-color-sand);
	border: 0;
	font-size: 16px;
	font-family: inherit;
	cursor: pointer;
}

.zahra-pdp-actions__stepper-btn--decrement {
	border-inline-end: 1px solid var(--zahra-color-line);
}

.zahra-pdp-actions__stepper-btn--increment {
	border-inline-start: 1px solid var(--zahra-color-line);
}

.zahra-pdp-actions__qty-input {
	flex: 1 1 0;
	min-inline-size: 0;
	border: 0;
	text-align: center;
	font-size: 13.5px;
	font-weight: 600;
	font-family: inherit;
	color: var(--zahra-color-ink);
	background: var(--zahra-color-surface);
	/* Removes the native up/down spinner so the custom stepper buttons are the only control. */
	appearance: textfield;
}

.zahra-pdp-actions__qty-input::-webkit-outer-spin-button,
.zahra-pdp-actions__qty-input::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}

.zahra-pdp-actions__buttons {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.zahra-pdp-actions__add,
.zahra-pdp-actions__whatsapp {
	display: flex;
	align-items: center;
	justify-content: center;
	block-size: 46px;
	padding-inline: 16px;
	font-size: 13px;
	font-weight: 700;
	font-family: inherit;
	text-decoration: none;
	border: 0;
	cursor: pointer;
}

.zahra-pdp-actions__add {
	background: var(--zahra-color-brand);
	color: #fff;
}

.zahra-pdp-actions__add:hover {
	background: var(--zahra-color-brand-dark);
}

.zahra-pdp-actions__whatsapp {
	background: var(--zahra-color-success);
	color: #fff;
}

.zahra-pdp-actions__whatsapp:hover {
	background: var(--zahra-color-success-2);
}

.zahra-pdp-actions__status {
	margin: 0;
	font-size: 12px;
	color: var(--zahra-color-brand);
}

.zahra-pdp-actions__status:empty {
	display: none;
}

.zahra-pdp-actions__unavailable {
	margin: 0;
	font-size: 12.5px;
	color: var(--zahra-color-muted);
}

@media (min-width: 1024px) {
	.zahra-pdp-actions__buttons {
		flex-direction: row;
	}

	.zahra-pdp-actions__add,
	.zahra-pdp-actions__whatsapp {
		flex: 1 1 0;
	}
}

/* ---------------------------------------------------------------------------
 * Specifications panel
 *
 * The bar is the approved tab strip; the heading is its active face. There is only ever one
 * section today, so no toggle is rendered - see template-parts/product/information.php.
 * ------------------------------------------------------------------------- */

.zahra-pdp-info {
	border: 1px solid var(--zahra-color-line);
}

.zahra-pdp-info__bar {
	display: flex;
	background: var(--zahra-color-sand);
	border-block-end: 1px solid var(--zahra-color-line);
}

.zahra-pdp-info__bar--stacked {
	border-block-start: 1px solid var(--zahra-color-line);
}

.zahra-pdp-info__heading {
	margin: 0;
	padding: 12px 16px;
	font-size: 13.5px;
	font-weight: 600;
	background: var(--zahra-color-surface);
	box-shadow: inset 0 -2.5px 0 var(--zahra-color-brand);
}

.zahra-pdp-info__description {
	padding: 12px 14px;
	font-size: 13px;
	line-height: 1.9;
	color: var(--zahra-color-ink-2);
}

.zahra-pdp-specs {
	inline-size: 100%;
	border-collapse: collapse;
	font-size: 12.5px;
}

.zahra-pdp-specs__label,
.zahra-pdp-specs__value {
	padding: 10px 14px;
	text-align: start;
	border-block-end: 1px solid var(--zahra-color-line-3);
	vertical-align: top;
}

.zahra-pdp-specs__label {
	font-weight: 400;
	color: var(--zahra-color-ink-2);
}

.zahra-pdp-specs__value {
	font-weight: 600;
}

.zahra-pdp-specs__row:last-child .zahra-pdp-specs__label,
.zahra-pdp-specs__row:last-child .zahra-pdp-specs__value {
	border-block-end: 0;
}

.zahra-pdp-specs__value a {
	color: inherit;
	text-decoration: none;
}

.zahra-pdp-specs__value a:hover,
.zahra-pdp-specs__value a:focus-visible {
	color: var(--zahra-color-brand);
	text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * Enquiry aside
 *
 * The approved aside's first card - the price / action card - is not rendered at all, so
 * this column holds the enquiry card alone.
 * ------------------------------------------------------------------------- */

.zahra-pdp-aside {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-inline-size: 0;
}

.zahra-pdp-enquiry {
	border: 1px solid var(--zahra-color-line);
	padding: 18px 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.zahra-pdp-enquiry__title {
	margin: 0;
	font-size: 12.5px;
	font-weight: 600;
}

.zahra-pdp-enquiry__body {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.9;
	color: var(--zahra-color-ink-2);
}

.zahra-pdp-enquiry__contact {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 12.5px;
	line-height: 1.9;
}

/*
 * text-align: end keeps the isolated LTR values aligned to the reading edge, as the approved
 * card does. .zahra-isolate (utilities.css) supplies direction + unicode-bidi isolation, so
 * the Arabic labels above are untouched - RTL.md section 3.
 */
.zahra-pdp-enquiry__contact a {
	color: var(--zahra-color-ink-2);
	text-decoration: none;
	text-align: end;
}

.zahra-pdp-enquiry__contact a:hover,
.zahra-pdp-enquiry__contact a:focus-visible {
	color: var(--zahra-color-brand);
	text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * Related products
 *
 * The wrapper only. Every tile is the canonical Product Card; PDP spacing never forks it.
 *
 * The approved MOBILE screens stop before this strip - they also stop before the footer,
 * which the site plainly has, so they are truncated captures rather than a statement that
 * the strip is desktop-only. It therefore renders at every width, two-up on mobile. That
 * placement is IMPLEMENTATION PROVISIONAL; only the desktop arrangement is design-approved.
 * ------------------------------------------------------------------------- */

.zahra-pdp-related {
	padding-block-end: 24px;
}

.zahra-pdp-related__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 16px;
	margin-block-end: 16px;
	border-block-start: 1px solid var(--zahra-color-line);
	padding-block-start: 20px;
}

.zahra-pdp-related__title {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
}

.zahra-pdp-related__more {
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}

.zahra-pdp-related__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

/*
 * The archive turns cards into compact rows below the breakpoint through the body class
 * .zahra-shop--*. The PDP carries no such class, so its related tiles stay grid cards at
 * every width - which is what the approved desktop strip shows.
 */

/* ---------------------------------------------------------------------------
 * Desktop - IMPLEMENTATION PROVISIONAL breakpoint (Q-013)
 *
 * The approved desktop reference is 1440px wide. Between the breakpoint and that width the
 * three columns are proportional rather than fixed, so the layout stays usable at 1024px
 * without claiming design approval for any intermediate width (Q-014).
 * ------------------------------------------------------------------------- */

@media (min-width: 1024px) {

	.zahra-pdp-breadcrumb {
		gap: 8px;
		padding-block-start: 18px;
	}

	.zahra-pdp-breadcrumb__home,
	.zahra-pdp-breadcrumb__current,
	.zahra-pdp-breadcrumb__sep--last {
		display: inline;
	}

	/*
	 * The approved desktop grid is `470px 1fr 370px` at a 1440px shell.
	 *
	 * Taken literally that breaks below roughly 1330px: the two fixed columns plus the gaps
	 * need 912px, so at 1024px the 1fr summary is squeezed to ZERO and the page loses its
	 * middle column entirely. Measured, not predicted - it happened here at 1024px, the same
	 * class of bug TASK-008 hit with its 5-column archive grid.
	 *
	 * The floor on the middle track is what fixes it: the summary can never drop below 280px,
	 * and below that point the two outer tracks give up width proportionally instead. At the
	 * 1440px reference there is room for everything, so the outer columns resolve to exactly
	 * the approved 470px and 370px and only the flexible middle absorbs the difference -
	 * which is what `1fr` means in the design.
	 *
	 * 280px is a robustness floor, not an approved value. No tablet design exists (Q-014).
	 */
	.zahra-pdp {
		grid-template-columns: minmax(0, 470px) minmax(280px, 1fr) minmax(0, 370px);
		gap: 36px;
		padding-block: 20px 44px;
	}

	.zahra-pdp-page div.product div.summary.entry-summary {
		gap: 16px;
	}

	.zahra-pdp-gallery__thumbs {
		gap: 10px;
	}

	.zahra-pdp-gallery__thumb {
		inline-size: 76px;
		block-size: 76px;
	}

	/* The approved desktop screen (07) shows the brand's «جميع منتجات X ←» link. */
	.zahra-pdp-brand__link {
		display: inline;
	}

	.zahra-pdp-title {
		font-size: 32px;
	}

	.zahra-pdp-facts__cell {
		padding: 16px 18px;
	}

	.zahra-pdp-facts__label {
		font-size: 11.5px;
		margin-block-end: 5px;
	}

	.zahra-pdp-facts__value {
		font-size: 14.5px;
	}

	.zahra-pdp-facts__cell--wide .zahra-pdp-facts__value {
		font-size: 17px;
	}

	.zahra-pdp-specs {
		font-size: 13px;
	}

	.zahra-pdp-specs__label,
	.zahra-pdp-specs__value {
		padding: 11px 18px;
		border-block-end: 1px solid var(--zahra-color-line-2);
	}

	.zahra-pdp-specs__label {
		inline-size: 40%;
		background: var(--zahra-color-sand-3);
	}

	.zahra-pdp-info__description {
		padding: 14px 18px;
	}

	/* The aside follows the summary while the long specification column scrolls. */
	.zahra-pdp-aside {
		position: sticky;
		inset-block-start: 16px;
	}

	.zahra-pdp-related {
		padding-block-end: 44px;
	}

	.zahra-pdp-related__head {
		padding-block-start: 28px;
	}

	.zahra-pdp-related__title {
		font-size: 22px;
	}

	.zahra-pdp-related__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 20px;
	}
}