/* Round 4 — PDP gallery, search suggestions, quiet rails.
 *
 * Built entirely on the existing Preview3 tokens (--surface, --surface-raised,
 * --line, --line-strong, --accent, --muted, --quiet, --r-*, --s*, --ease) and
 * on the type already in style.css. Nothing here restyles an existing
 * component; every rule either dresses new markup or narrows an existing rule
 * to the new markup. Motion is transform/opacity/scroll only, with a
 * prefers-reduced-motion block at the end.
 */

/* Attribute-hidden elements that this file gives a display value to must still
   obey `hidden`, otherwise a control the script has not enabled would show. */
.p3-gal-arrow[hidden],
.p3-gal-count[hidden],
.p3-gal-zoom[hidden],
.bundle-blocked[hidden],
.p3-search-list[hidden],
.p3-search-all[hidden],
.p3-lightbox[hidden] { display: none !important; }

/* ========================================================== PDP gallery ==== */

/* .big keeps its aspect ratio, border, radius and gradient from style.css /
   mobile.css, so the mobile source order (gallery, thumbs, buy panel, reports)
   and the desktop sticky column are untouched. */
.pd-gal .big.p3-gal-stage {
	display: block;
	position: relative;
	padding: 0;
}

.p3-gal-track {
	display: flex;
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
}
.p3-gal-track::-webkit-scrollbar { width: 0; height: 0; }

/* The explicit 1fr track matters: a percentage max-height on a grid item only
   resolves against a DEFINITE grid area. With an auto row the picture ignored
   max-height:100% and a square vial overflowed the 4/3 mobile frame. */
.p3-gal-slide {
	flex: 0 0 100%;
	min-width: 0;
	display: grid;
	grid-template-rows: minmax(0, 1fr);
	grid-template-columns: minmax(0, 1fr);
	place-items: center;
	padding: var(--s4);
	scroll-snap-align: center;
	scroll-snap-stop: always;
}

/* contain, never cover: the vial is not cropped and its own proportions win.
   The selector is deliberately as specific as style.css's `.pd-gal .big img`
   (which forces width:100%/height:100%); otherwise the picture box stretches to
   the frame and only object-fit keeps the pixels honest. Here the BOX itself
   keeps the picture's own ratio, so nothing overlays empty space either. */
.pd-gal .big.p3-gal-stage .p3-gal-img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.p3-gal-arrow,
.p3-gal-zoom {
	position: absolute;
	z-index: 2;
	display: grid;
	place-items: center;
	border: 1px solid var(--line-strong);
	border-radius: var(--r-pill);
	background: color-mix(in srgb, var(--void) 74%, transparent);
	backdrop-filter: blur(6px);
	color: var(--text);
	cursor: pointer;
	transition: border-color 160ms var(--ease), opacity 160ms var(--ease), transform 160ms var(--ease);
}
.p3-gal-arrow { top: 50%; width: 44px; height: 44px; transform: translateY(-50%); }
.p3-gal-prev { left: 10px; }
.p3-gal-next { right: 10px; }
.p3-gal-zoom { right: 10px; bottom: 10px; width: 40px; height: 40px; }

.p3-gal-arrow:hover:not([disabled]),
.p3-gal-zoom:hover { border-color: var(--accent); }
.p3-gal-arrow:active:not([disabled]) { transform: translateY(-50%) scale(.94); }
.p3-gal-zoom:active { transform: scale(.94); }
.p3-gal-arrow[disabled] { opacity: .3; cursor: default; }

.p3-gal-count {
	position: absolute;
	left: 12px;
	bottom: 12px;
	z-index: 2;
	padding: 4px 10px;
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	background: color-mix(in srgb, var(--void) 74%, transparent);
	color: var(--muted);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	line-height: 1.4;
}

/* Thumbnails keep the .pd-thumbs slot; the flex basis reproduces the old
   four-column rhythm for any count, so two or three images do not stretch into
   oversized tiles. */
.pd-thumbs.p3-gal-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s2);
	margin: var(--s2) 0 0;
	padding: 0;
	list-style: none;
	grid-template-columns: none;
}
.p3-gal-thumbs > li { flex: 0 1 calc(25% - var(--s2) * 0.75); min-width: 64px; }

.p3-gal-thumb {
	position: relative;
	display: block;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--surface-raised);
	overflow: hidden;
	transition: border-color 160ms var(--ease), transform 160ms var(--ease);
}
.p3-gal-thumb img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: contain;
	opacity: .68;
	transition: opacity 160ms var(--ease);
}
.p3-gal-thumb:hover img { opacity: .9; }

/* The active state has to be unmistakable: accent border, inset ring, full
   opacity and an accent bar along the bottom edge. */
.p3-gal-thumb.is-active {
	border-color: var(--accent);
	box-shadow: inset 0 0 0 1px var(--accent);
}
.p3-gal-thumb.is-active img { opacity: 1; }
.p3-gal-thumb.is-active::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 3px;
	background: var(--accent-bright);
}

.p3-gal-empty { display: grid; place-items: center; }

/* The stage becomes keyboard-operable (tabindex 0) once script runs, and the
   global focus ring in style.css only covers a/button/input/select/summary. */
.p3-gal-stage.is-enhanced:focus-visible {
	outline: 2px solid var(--accent-bright);
	outline-offset: 3px;
}
.p3-gal-thumb:focus-visible {
	outline: 2px solid var(--accent-bright);
	outline-offset: 2px;
}

/* ------------------------------------------------------------- lightbox --- */

.p3-lightbox {
	position: fixed;
	inset: 0;
	z-index: 260;
	display: grid;
	place-items: center;
	padding: clamp(16px, 4vw, 56px);
	background: rgba(4, 6, 8, .96);
	backdrop-filter: blur(12px);
	opacity: 0;
	transition: opacity 160ms var(--ease);
}
.p3-lightbox.on { opacity: 1; }
.p3-lightbox-figure { margin: 0; max-width: min(1080px, 100%); }
.p3-lightbox img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 80vh;
	object-fit: contain;
	border-radius: var(--r-md);
}
.p3-lightbox-close {
	position: absolute;
	top: clamp(12px, 3vw, 28px);
	right: clamp(12px, 3vw, 28px);
	width: 44px;
	height: 44px;
	border: 0;
	background: transparent;
	color: var(--muted);
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
}
.p3-lightbox-close:hover { color: var(--text); }

/* ================================================ product search overlay ==== */

#peptSearch .p3-search-form {
	flex-direction: column;
	align-items: stretch;
	gap: var(--s3);
}
.p3-search-row { display: flex; gap: var(--s2); }
.p3-search-row .p3-search-input { flex: 1; min-width: 0; }

.p3-search-panel { display: grid; gap: var(--s2); }

.p3-search-list {
	display: grid;
	gap: 6px;
	max-height: min(46vh, 400px);
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.p3-search-option {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--s3);
	padding: 10px 12px;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--surface);
	color: var(--text);
	text-decoration: none;
	transition: border-color 140ms var(--ease), background-color 140ms var(--ease);
}
.p3-search-option:hover,
.p3-search-option[aria-selected="true"] {
	border-color: var(--accent);
	background: var(--surface-raised);
}
.p3-search-shot {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	background: var(--surface-raised);
	overflow: hidden;
}
.p3-search-shot img { width: 100%; height: 100%; object-fit: contain; }
.p3-search-body { display: grid; gap: 2px; min-width: 0; }
.p3-search-name { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.p3-search-meta {
	color: var(--quiet);
	font-size: 12px;
	line-height: 1.4;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.p3-search-tail { display: grid; justify-items: end; gap: 2px; text-align: right; }
.p3-search-price { font-size: 14px; font-variant-numeric: tabular-nums; }
.p3-search-stock { color: var(--quiet); font-size: 11px; }

.p3-search-all {
	justify-self: start;
	padding: 8px 14px;
	border: 1px solid var(--line-strong);
	border-radius: var(--r-pill);
	color: var(--text);
	font-size: 13px;
	text-decoration: none;
}
.p3-search-all:hover { border-color: var(--accent); }

.p3-search-hint { margin: 0; color: var(--quiet); font-size: 12px; line-height: 1.5; }

@media (max-width: 680px) {
	/* Match the stacked field/button the overlay already used on mobile. */
	.p3-search-row { flex-direction: column; }
	.p3-search-list { max-height: min(52vh, 420px); }
	.p3-search-option { grid-template-columns: 40px minmax(0, 1fr); }
	.p3-search-tail { grid-column: 1 / -1; justify-items: start; text-align: left; }
}

/* ============================== R10/R11 — the honestly disabled selector ==== */

/* No opacity trick on the block itself: a shopper must be able to read the
   quantities and the reason. Only the tiles read as inactive. */
.bundle-blocked {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: var(--s3) 0 0;
	padding: 10px 12px;
	border: 1px dashed var(--line-strong);
	border-radius: var(--r-md);
	color: var(--muted);
	font-size: 13px;
	line-height: 1.55;
}
.bundle-blocked .ring { margin-top: 6px; }

.bundle-option[disabled] {
	border-style: dashed;
	opacity: .68;
	cursor: not-allowed;
}
.bundle-option[disabled]:hover { border-color: var(--line); }
.bo-unit-pending { color: var(--quiet); font-variant-numeric: normal; }

/* ================================================ R9 — the PDP pen picture == */

.pdp-gift .pdp-gift-figure { align-content: center; }
.pdp-gift .promo-media { width: min(100%, 300px); margin-bottom: var(--s3); }
.pdp-gift .promo-amount { font-size: clamp(38px, 5vw, 62px); }

@media (max-width: 980px) {
	.pdp-gift .pdp-gift-figure { justify-items: start; text-align: left; }
	.pdp-gift .promo-media { justify-self: start; width: min(100%, 300px); }
}

/* ==================================================== R7/R8 — quiet rails == */

/* The rails carry no control markup at all now, so the only signal that focus
   has stopped the motion is the focus ring itself. Make sure both the region
   and the individual cells have one. */
.pharma-rail .rail-cell:focus-visible {
	outline: 2px solid var(--accent-bright);
	outline-offset: 3px;
}

/* Claim the horizontal axis for the rail's own drag. Without this the browser
   treats a sideways touch drag over the (overflow:hidden) viewport as the start
   of a page pan, fires pointercancel after the touch slop, and the swipe dies
   about 17px in — measured, not assumed. Vertical panning and pinch-zoom stay
   with the page, so page scrolling and accessibility zoom are untouched. */
.pharma-rail-viewport { touch-action: pan-y pinch-zoom; }
.pharma-rail.is-static .pharma-rail-viewport { touch-action: auto; }

/* ------------------------------------------------------------ reduced motion */

@media (prefers-reduced-motion: reduce) {
	.p3-gal-track { scroll-behavior: auto; }
	.p3-gal-arrow,
	.p3-gal-zoom,
	.p3-gal-thumb,
	.p3-gal-thumb img,
	.p3-search-option,
	.p3-lightbox { transition: none !important; }
	.p3-gal-arrow:active:not([disabled]) { transform: translateY(-50%); }
	.p3-gal-zoom:active { transform: none; }
}