/*
   NIOS product page: upper hero section (breadcrumb, gallery, product facts,
   benefits, "התחילו לעצב" button). Rendered by template-parts/product/hero.php.
   Figma file 3NPoCFTKy8AnB4vWaHLQRM: "Product hero / Desktop 1440" (2:2),
   "Product hero / Mobile 424" (2:3).

   Everything is scoped to .pph, so nothing here reaches the configurator,
   the summary or any other page. Colors reuse the product page tokens
   (--pp-*, defined on .pp-page); the two tones the design adds are local.

   Composition: one DOM, two layouts.
   - Below 1200px (mobile and tablet): a single column in the mobile order
     of the Figma frame; .pph__info and .pph__intro are display:contents so
     their children can be ordered individually.
   - 1200px and up: two equal-height columns (gallery on the right, facts on
     the left in RTL). Reference 1440 frame: content 1200, columns 624 / 512,
     gap 64, image box 3:2, thumbnails 4 across.
*/

.pph {
	--pph-cat: #8a7050;
	--pph-benefit: #49443d;
	--pph-gap: 12px;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	row-gap: 20px;
	max-width: 720px;
	margin-inline: auto;
	padding: 24px 24px 0;
	color: var(--pp-ink, #171717);
	font-family: var(--nios-font);
}
.pph h1,
.pph p,
.pph ul,
.pph ol { margin: 0; padding: 0; }
.pph ul,
.pph ol { list-style: none; }
.pph a { text-decoration: none; }
.pph [hidden] { display: none !important; }

/* ---- Mobile order ---- */
.pph__info,
.pph__intro { display: contents; }
.pph__crumbs { order: 1; }
.pph__title { order: 2; }
.pph__gallery { order: 3; }
.pph__buy { order: 4; }
.pph__tax { order: 5; }
.pph__included { order: 6; }
.pph__desc { order: 7; }
.pph__action { order: 8; }
.pph__benefits { order: 9; }
.pph__cat { display: none; }

/* ---- Breadcrumb ---- */
.pph__crumbs ol { display: block; font: 400 12px/20px var(--nios-font); color: var(--pp-muted, #6b655d); }
.pph__crumbs li { display: inline; }
.pph__crumbs li + li::before { content: "/"; margin-inline: 12px; }
.pph__crumbs a { color: inherit; }
.pph__crumbs a:hover { text-decoration: underline; }

/* ---- Title, description ---- */
.pph__title { font: 700 28px/38px var(--nios-font); color: var(--pp-ink, #171717); text-wrap: balance; overflow-wrap: anywhere; }
.pph__desc { font: 400 16px/26px var(--nios-font); color: var(--pp-muted, #6b655d); }
.pph__desc p + p { margin-top: 8px; }

/* ---- Price and availability ---- */
.pph__buy { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; }
.pph__price { font: 700 32px/48px var(--nios-font); color: var(--pp-ink, #171717); font-variant-numeric: tabular-nums; }
.pph__price ins { text-decoration: none; }
.pph__price del { font-weight: 400; font-size: 20px; color: #a39a8f; margin-inline-end: 8px; }
.pph__stock { flex: none; font: 400 13px/20px var(--nios-font); color: var(--pp-ok, #5a883c); }
.pph__stock::before { content: "●"; content: "●" / ""; margin-inline-end: 8px; }
.pph__stock--out-of-stock { color: var(--pp-error, #b3261e); }
.pph__stock--available-on-backorder { color: #8a5f08; }
.pph__tax { font: 400 12px/18px var(--nios-font); color: var(--pp-muted, #6b655d); }
.pph__included { font: 500 13px/20px var(--nios-font); color: var(--pp-muted, #6b655d); }

/* A family whose colors cost different amounts shows the range ("X עד Y")
   before a color is chosen. That text is too wide for .pph__price's 32px at
   phone width and wraps mid phrase; shrink only this case, only on phones. */
@media (max-width: 767px) {
	.pph__price[data-pc-price-range] { font-size: 22px; line-height: 30px; }
}

/* ---- Benefits ---- */
.pph__benefits { display: flex; flex-direction: column; font: 400 13px/26px var(--nios-font); color: var(--pph-benefit); }
.pph__benefits li { display: flex; gap: 8px; align-items: baseline; }
.pph__tick { flex: none; }
.pph__benefit-text small { display: block; font-size: 12px; line-height: 18px; color: var(--pp-muted, #6b655d); }

/* ---- Action ---- */
.pph__action { display: flex; flex-direction: column; gap: 12px; }
.pph__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 56px;
	padding: 0 20px;
	border-radius: 12px;
	background: var(--pp-ink, #171717);
	color: #fff;
	font: 700 16px/24px var(--nios-font);
	text-align: center;
}
.pph__cta:hover { background: #2e2a25; }
.pph__note { font: 400 12px/20px var(--nios-font); color: var(--pp-muted, #6b655d); text-align: center; }

/* ---- Purchase box of a product without the engraving editor (template-parts/product/buy.php) ---- */
.pph-buy { display: flex; flex-direction: column; gap: 14px; }
.pph-buy__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 18px; border-top: 1px solid var(--pp-border, #e5ddd3); }
.pph-qty { display: inline-flex; align-items: center; height: 48px; border: 1px solid var(--pp-border, #e5ddd3); border-radius: 12px; background: #fff; }
.pph-qty__btn { width: 46px; height: 46px; padding: 0; border: 0; border-radius: 12px; background: none; color: var(--pp-ink, #171717); font: 400 22px/1 var(--nios-font); cursor: pointer; }
.pph-qty__btn:disabled { color: #c7bcae; cursor: default; }
.pph-qty__btn:focus-visible,
.pph-qty__input:focus-visible { outline: 2px solid var(--pp-ink, #171717); outline-offset: -2px; }
.pph-qty__input { width: 44px; height: 46px; padding: 0; border: 0; background: none; text-align: center; color: var(--pp-ink, #171717); font: 600 16px/1 var(--nios-font); font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.pph-qty__input::-webkit-outer-spin-button,
.pph-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pph-buy__total { display: flex; align-items: baseline; gap: 12px; margin-inline-start: auto; }
.pph-buy__total-label { font: 500 14px/1 var(--nios-font); color: var(--pp-muted, #6b655d); }
.pph-buy__total-amount { font: 700 24px/1 var(--nios-font); color: var(--pp-ink, #171717); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pph-buy__add { border: 0; cursor: pointer; }
.pph-buy__add:disabled { opacity: .7; cursor: progress; }
.pph-buy__status { font: 500 14px/22px var(--nios-font); color: var(--pp-muted, #6b655d); text-align: center; }
.pph-buy__status:empty { display: none; }
.pph-buy__status[data-state="success"] { color: var(--pp-ok, #5a883c); }
.pph-buy__status[data-state="error"] { color: var(--pp-error, #b3261e); }
.pph-buy__offer { display: flex; align-items: center; justify-content: center; gap: 8px; font: 400 14px/22px var(--nios-font); color: var(--pp-muted, #6b655d); text-align: center; }
.pph-buy__offer-icon { flex: none; color: var(--pph-cat); }
.pph .pph-buy__offer a { color: var(--pph-cat); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

/* ---- Gallery ---- */
.pph__gallery { display: flex; flex-direction: column; gap: var(--pph-gap); min-width: 0; }
/* The stage is a fixed frame (3:2 of the column, stretched on desktop so the
   thumbnail row ends level with the information column). The visible picture
   box inside it takes the shape of each photo and can never be taller or
   wider than the frame, so a large or unusual photo does not distort, spill
   over or push anything around it. */
.pph__stage {
	position: relative;
	aspect-ratio: 3 / 2;
	display: grid;
	place-items: center;
	min-width: 0;
}
.pph__pic {
	position: relative;
	width: 100%;
	aspect-ratio: 3 / 2;
	border-radius: 16px;
	overflow: hidden;
	background: var(--pp-media, #f7f2eb);
}
@supports (width: 1cqw) {
	.pph__stage { container-type: size; }
	.pph__pic {
		width: min(100cqw, calc(100cqh * var(--pph-r, 1.5)));
		aspect-ratio: var(--pph-r, 1.5);
	}
}
.pph__stage-btn {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: zoom-in;
}
/* The whole product stays visible: contain, never crop. The theme's global
   img rules are overridden by specificity, not with !important. */
.pph .pph__img,
.pph .pph__placeholder { display: block; width: 100%; height: 100%; max-width: 100%; object-fit: contain; }
.pph .pph__placeholder { border-radius: 16px; background: var(--pp-media, #f7f2eb); }
.pph__expand {
	position: absolute;
	left: 12px;
	top: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 20px;
	background: #fff;
	cursor: pointer;
	box-shadow: 0 1px 4px rgba(23, 23, 23, 0.12);
}
.pph__expand::after { content: ""; position: absolute; inset: -4px; }
.pph__expand:hover { box-shadow: 0 2px 8px rgba(23, 23, 23, 0.22); }
.pph__expand img { width: 20px; height: 20px; }

.pph__thumbs-wrap { position: relative; min-width: 0; }
.pph__thumbs {
	display: flex;
	gap: var(--pph-gap);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.pph__thumbs::-webkit-scrollbar { display: none; }
.pph__thumbs li { flex: 0 0 calc((100% - 3 * var(--pph-gap)) / 4); scroll-snap-align: start; min-width: 0; }
.pph__thumb {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 85 / 76;
	padding: 0;
	border: 0;
	border-radius: 12px;
	overflow: hidden;
	background: var(--pp-media, #f7f2eb);
	cursor: pointer;
}
.pph .pph__thumb img { display: block; width: 100%; height: 100%; max-width: 100%; object-fit: cover; }
.pph__thumb::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 12px;
	border: 2px solid var(--pp-ink, #171717);
	opacity: 0;
	pointer-events: none;
}
.pph__thumb.is-selected::after { opacity: 1; }
.pph__thumb:not(.is-selected):hover::after { opacity: 0.35; }

.pph__scroll {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 18px;
	background: #fff;
	color: var(--pp-ink, #171717);
	font: 400 24px/1 var(--nios-font);
	box-shadow: 0 1px 6px rgba(23, 23, 23, 0.25);
	cursor: pointer;
	transform: translateY(-50%);
}
.pph__scroll--prev { inset-inline-start: 6px; }
.pph__scroll--next { inset-inline-end: 6px; }
.pph__scroll[aria-disabled="true"] { opacity: 0.35; cursor: default; }

/* Keyboard focus. Inside the clipped areas the ring sits inside the box. */
.pph a:focus-visible,
.pph button:focus-visible { outline: 2px solid var(--pp-gold, #cfa66b); outline-offset: 2px; }
.pph .pph__stage-btn:focus-visible,
.pph .pph__thumb:focus-visible { outline-offset: -3px; }

/* ---- Enlarged view ---- */
.pph__lightbox {
	width: 100vw;
	max-width: 100vw;
	height: 100dvh;
	max-height: 100dvh;
	margin: 0;
	padding: 0;
	border: 0;
	background: rgba(23, 23, 23, 0.94);
	color: #fff;
	overflow: hidden;
}
.pph__lightbox[open] { display: flex; flex-direction: column; }
.pph__lightbox::backdrop { background: rgba(23, 23, 23, 0.94); }
.pph__lb-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; flex: none; }
.pph__lb-count { font: 500 14px/20px var(--nios-font); font-variant-numeric: tabular-nums; }
.pph__lb-close,
.pph__lb-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 22px;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	font: 400 30px/1 var(--nios-font);
	cursor: pointer;
}
.pph__lb-close:hover,
.pph__lb-nav:hover { background: rgba(255, 255, 255, 0.26); }
.pph__lightbox button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pph__lb-stage { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 0 12px 16px; }
.pph__lb-nav { flex: none; }
.pph .pph__lb-img { flex: 1 1 auto; min-width: 0; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.pph__lb-stage { position: relative; }
.pph__lb-stage .pph__lb-img { max-height: calc(100dvh - 92px); }
html.pph-lb-lock { overflow: hidden; }

/* ================= Tablet 768px and up ================= */
@media (min-width: 768px) {
	.pph { padding-top: 32px; row-gap: 24px; --pph-gap: 16px; }
	.pph__title { font-size: 32px; line-height: 42px; }
	.pph__pic,
	.pph .pph__placeholder { border-radius: 20px; }
	.pph__expand { left: 16px; top: 16px; }
}

/* ================= Desktop 1200px and up (Figma 1440) ================= */
@media (min-width: 1200px) {
	.pph {
		--pph-gap: 24px;
		max-width: 1248px;
		grid-template-columns: minmax(0, 624fr) minmax(0, 512fr);
		grid-template-areas:
			"crumbs crumbs"
			"gallery info";
		column-gap: 64px;
		row-gap: 32px;
		padding-top: 48px;
	}
	.pph__crumbs { grid-area: crumbs; }
	/* The gallery stretches to the height of the information column; the
	   image box takes the extra height so the thumbnail row (or the box
	   itself, with one image) ends level with the button note. */
	.pph__gallery { grid-area: gallery; align-self: stretch; }
	.pph__stage { flex: 1 1 auto; }
	.pph__info {
		grid-area: info;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		gap: 24px;
		min-width: 0;
	}
	.pph__intro { display: flex; flex-direction: column; gap: 14px; }
	.pph__crumbs,
	.pph__title,
	.pph__buy,
	.pph__tax,
	.pph__included,
	.pph__desc,
	.pph__action,
	.pph__benefits,
	.pph__gallery { order: 0; }
	.pph__cat { display: block; font: 500 13px/20px var(--nios-font); color: var(--pph-cat); }
	.pph__title { font-size: 36px; line-height: 48px; }
	.pph__benefits { font-size: 15px; line-height: 30px; }
	.pph__benefit-text small { font-size: 13px; line-height: 20px; }
	.pph__thumb { aspect-ratio: 138 / 120; }
	.pph-buy__total-amount { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
	.pph *,
	.pph *::before,
	.pph *::after { transition: none !important; scroll-behavior: auto !important; }
}