/*
 * Product sheet — alternate view.
 *
 * THE IDEA
 * A mid-century candy-counter ticket. This is a warehouse on Long Island that
 * sells Necco wafers and candy cigarettes by the case; the nostalgia is the
 * product, so the page is built like something printed rather than something
 * rendered — cream stock, condensed signage caps, a candy-stripe rule, and a
 * price stamped on a torn ticket.
 *
 * WHAT IT FIXES
 * The pricing card was a large panel holding one number and a SKU. Here the
 * price is the loudest thing on the page while the box around it is the
 * smallest it has ever been: the ticket is sized by its contents instead of
 * padding out a card. Stock becomes a live dot and a real count — "32 ready"
 * says more than "In Stock" — and the SKU drops into the ticket's fine print,
 * where the warehouse can still read it off during a phone order and nobody
 * else has to look at it.
 *
 * No webfont is added. Bebas Neue and Oswald are already self-hosted and are
 * genuinely the right faces for dime-store signage; the character comes from
 * halftone, stripe, notch and letterpress instead of a network request.
 */

.pdp {
	--pdp-paper: #fbf6ee;
	--pdp-ink: #1a1410;
	--pdp-ink-soft: #6b5f52;
	--pdp-rule: #e0d4c2;
	--pdp-red: #d21e2a;
	--pdp-teal: #00caCB;
	--pdp-teal-deep: #005f60;
	--pdp-gold: #f6b93b;

	/* Halftone: the dot screen of cheap colour printing, at an angle so it
	   reads as print rather than as a CSS pattern. */
	background-color: var(--pdp-paper);
	background-image: radial-gradient(var(--pdp-rule) 0.5px, transparent 0.5px);
	background-size: 7px 7px;
	background-position: 0 0;
	padding: clamp(1.25rem, 3vw, 2.5rem) 0 3rem;
}

.pdp-sheet {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 clamp(1rem, 3vw, 2rem);
}

/* ── the two columns ─────────────────────────────────────────────────── */

.pdp-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: start;
}

@media (max-width: 900px) {
	.pdp-grid { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
}

/* ── media ───────────────────────────────────────────────────────────── */

.pdp-media {
	position: sticky;
	top: 1.5rem;
}

@media (max-width: 900px) {
	.pdp-media { position: static; }
}

.pdp-frame {
	position: relative;
	background: #fff;
	border: 1px solid var(--pdp-rule);
	border-radius: 4px;
	padding: clamp(1rem, 3vw, 2rem);
	/* Two stacked shadows: a tight one for the card edge and a long soft one
	   for the sheet sitting on a surface. */
	box-shadow: 0 1px 2px rgba(26, 20, 16, 0.06), 0 18px 40px -24px rgba(26, 20, 16, 0.45);
}

/* A candy stripe along the top edge, the way a sweet-shop awning runs. */
.pdp-frame::before {
	content: '';
	position: absolute;
	inset: 0 0 auto 0;
	height: 5px;
	border-radius: 4px 4px 0 0;
	background: repeating-linear-gradient(
		135deg,
		var(--pdp-red) 0 10px,
		#fff 10px 20px
	);
}

.pdp-frame img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.pdp-empty {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	font-size: 4rem;
	color: var(--pdp-rule);
}

.pdp-thumbs {
	display: flex;
	gap: 0.5rem;
	margin-top: 0.75rem;
	flex-wrap: wrap;
}

.pdp-thumb {
	width: 60px;
	height: 60px;
	padding: 4px;
	background: #fff;
	border: 1px solid var(--pdp-rule);
	border-radius: 3px;
	cursor: pointer;
	transition: border-color 0.15s, transform 0.15s;
}

.pdp-thumb img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.pdp-thumb:hover { transform: translateY(-2px); }
.pdp-thumb.active { border-color: var(--pdp-red); box-shadow: inset 0 0 0 1px var(--pdp-red); }

/* ── headline ────────────────────────────────────────────────────────── */

.pdp-kicker {
	display: inline-block;
	font-family: var(--font-heading), sans-serif;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--pdp-teal-deep);
	padding-bottom: 0.4rem;
	border-bottom: 2px solid var(--pdp-teal);
}

.pdp-title {
	font-family: var(--font-display), sans-serif;
	font-size: clamp(2.1rem, 5.2vw, 3.35rem);
	line-height: 0.94;
	letter-spacing: 0.005em;
	color: var(--pdp-ink);
	margin: 0.85rem 0 0;
	/* A hair of letterpress: ink pressed into paper catches a highlight. */
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* ── the ticket ──────────────────────────────────────────────────────── */

.pdp-ticket {
	position: relative;
	display: inline-flex;
	align-items: stretch;
	gap: 0;
	margin: 1.4rem 0 0;
	background: var(--pdp-ink);
	color: #fff;
	border-radius: 3px;
	/* Notches punched out of both ends, as a torn stub would have. */
	-webkit-mask-image:
		radial-gradient(circle 6px at 0 50%, transparent 6px, #000 6.5px),
		radial-gradient(circle 6px at 100% 50%, transparent 6px, #000 6.5px);
	-webkit-mask-composite: source-in;
	mask-image:
		radial-gradient(circle 6px at 0 50%, transparent 6px, #000 6.5px),
		radial-gradient(circle 6px at 100% 50%, transparent 6px, #000 6.5px);
	mask-composite: intersect;
}

.pdp-ticket-price {
	display: flex;
	align-items: baseline;
	gap: 0.15rem;
	padding: 0.7rem 1.1rem 0.6rem;
}

.pdp-currency {
	font-family: var(--font-heading), sans-serif;
	font-size: 1rem;
	font-weight: 600;
	transform: translateY(-0.55em);
	opacity: 0.8;
}

.pdp-amount {
	font-family: var(--font-display), sans-serif;
	font-size: clamp(2.4rem, 6vw, 3.1rem);
	line-height: 0.8;
	letter-spacing: 0.01em;
}

.pdp-cents { font-family: var(--font-display), sans-serif; font-size: 1.4rem; line-height: 0.8; transform: translateY(-0.9em); }

/* The stub: everything that is true but not worth shouting. */
.pdp-ticket-stub {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.2rem;
	padding: 0.55rem 1.1rem 0.55rem 0.9rem;
	border-left: 1px dashed rgba(255, 255, 255, 0.28);
	font-family: var(--font-body), sans-serif;
	font-size: 0.68rem;
	line-height: 1.35;
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.72);
	white-space: nowrap;
}

.pdp-stock {
	display: inline-flex;
	align-items: center;
	gap: 0.38rem;
	font-weight: 600;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* A live dot. It breathes, so the page has one thing that is not still. */
.pdp-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #35d07f;
	box-shadow: 0 0 0 0 rgba(53, 208, 127, 0.7);
	animation: pdp-pulse 2.6s ease-out infinite;
}

.pdp-dot.is-low { background: var(--pdp-gold); box-shadow: 0 0 0 0 rgba(246, 185, 59, 0.7); }
.pdp-dot.is-out { background: #b9b2a8; animation: none; box-shadow: none; }

@keyframes pdp-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(53, 208, 127, 0.65); }
	70%  { box-shadow: 0 0 0 7px rgba(53, 208, 127, 0); }
	100% { box-shadow: 0 0 0 0 rgba(53, 208, 127, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.pdp-dot { animation: none; }
}

/* The SKU. Present for the warehouse and for phone orders, and sized so that
   nobody browsing has to read it. */
.pdp-sku { font-size: 0.62rem; letter-spacing: 0.1em; opacity: 0.55; }

/* ── buy ─────────────────────────────────────────────────────────────── */

.pdp-buy {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 1.5rem 0 0;
}

.pdp-qty {
	display: inline-flex;
	align-items: center;
	background: #fff;
	border: 1.5px solid var(--pdp-ink);
	border-radius: 3px;
	overflow: hidden;
}

.pdp-qty button {
	width: 40px;
	height: 48px;
	border: 0;
	background: transparent;
	font-size: 1.25rem;
	line-height: 1;
	color: var(--pdp-ink);
	cursor: pointer;
	transition: background 0.12s;
}

.pdp-qty button:hover { background: #f1e9dc; }

.pdp-qty input {
	width: 50px;
	height: 48px;
	border: 0;
	border-left: 1px solid var(--pdp-rule);
	border-right: 1px solid var(--pdp-rule);
	text-align: center;
	font-family: var(--font-heading), sans-serif;
	font-size: 1rem;
	background: #fff;
	color: var(--pdp-ink);
	-moz-appearance: textfield;
}

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

.pdp-add {
	flex: 1 1 220px;
	min-height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	padding: 0 1.5rem;
	border: 1.5px solid var(--pdp-ink);
	border-radius: 3px;
	background: var(--pdp-red);
	color: #fff;
	font-family: var(--font-heading), sans-serif;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	/* A hard offset shadow, the way a printed sticker sits proud of the page.
	   It collapses on press, so the button physically depresses. */
	box-shadow: 3px 3px 0 var(--pdp-ink);
	transition: transform 0.1s, box-shadow 0.1s, background 0.15s;
}

.pdp-add:hover { background: #b8171f; }
.pdp-add:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--pdp-ink); }

.pdp-add[disabled] {
	background: #d8d0c4;
	color: #7c736a;
	border-color: #b9b0a4;
	box-shadow: 3px 3px 0 #b9b0a4;
	cursor: not-allowed;
}

/* ── the three promises ──────────────────────────────────────────────── */

.pdp-promises {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	margin: 1.5rem 0 0;
	border: 1px solid var(--pdp-rule);
	border-radius: 3px;
	background: #fff;
	overflow: hidden;
}

.pdp-promise {
	padding: 0.8rem 0.7rem;
	text-align: center;
	border-right: 1px solid var(--pdp-rule);
}

.pdp-promise:last-child { border-right: 0; }

.pdp-promise b {
	display: block;
	font-family: var(--font-heading), sans-serif;
	font-size: 0.74rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pdp-ink);
}

.pdp-promise span {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.68rem;
	line-height: 1.35;
	color: var(--pdp-ink-soft);
}

@media (max-width: 480px) {
	.pdp-promises { grid-template-columns: 1fr; }
	.pdp-promise { border-right: 0; border-bottom: 1px solid var(--pdp-rule); text-align: left; display: flex; gap: 0.5rem; align-items: baseline; }
	.pdp-promise:last-child { border-bottom: 0; }
	.pdp-promise span { margin-top: 0; }
}

/* ── prose ───────────────────────────────────────────────────────────── */

.pdp-section { margin: 2.5rem 0 0; }

.pdp-section-title {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 0.9rem;
	font-family: var(--font-display), sans-serif;
	font-size: 1.4rem;
	letter-spacing: 0.02em;
	color: var(--pdp-ink);
}

/* The rule runs out from the heading and stops at the edge, so the heading
   reads as a label on a printed sheet rather than a web heading. */
.pdp-section-title::after {
	content: '';
	flex: 1;
	height: 3px;
	background: repeating-linear-gradient(90deg, var(--pdp-rule) 0 6px, transparent 6px 12px);
}

.pdp-prose {
	font-size: 0.95rem;
	line-height: 1.72;
	color: #3d342c;
	max-width: 62ch;
}

.pdp-prose > *:first-child { margin-top: 0; }
.pdp-prose > *:last-child { margin-bottom: 0; }
.pdp-prose a { color: var(--pdp-teal-deep); }

.pdp-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-top: 1.75rem; }

.pdp-tag {
	display: inline-block;
	padding: 0.3rem 0.7rem;
	background: #fff;
	border: 1px solid var(--pdp-rule);
	border-radius: 999px;
	font-size: 0.75rem;
	color: var(--pdp-ink-soft);
	text-decoration: none;
	transition: border-color 0.15s, color 0.15s;
}

.pdp-tag:hover { border-color: var(--pdp-teal); color: var(--pdp-teal-deep); }

/* ── the sticky bar ──────────────────────────────────────────────────── */
/*
 * Appears only once the real button has scrolled away, and only on the narrow
 * screens where that actually happens. Driven by an IntersectionObserver
 * toggling one class, so there is no scroll handler running per frame.
 */
.pdp-sticky {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 60;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom));
	background: rgba(251, 246, 238, 0.97);
	border-top: 1px solid var(--pdp-rule);
	box-shadow: 0 -6px 24px -12px rgba(26, 20, 16, 0.35);
	transform: translateY(110%);
	transition: transform 0.22s ease-out;
}

.pdp-sticky.is-shown { transform: translateY(0); }

.pdp-sticky-price {
	font-family: var(--font-display), sans-serif;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--pdp-ink);
}

.pdp-sticky-name {
	flex: 1;
	min-width: 0;
	font-size: 0.72rem;
	line-height: 1.3;
	color: var(--pdp-ink-soft);
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.pdp-sticky .pdp-add { flex: 0 0 auto; min-height: 42px; padding: 0 1.1rem; font-size: 0.85rem; }

@media (min-width: 901px) {
	.pdp-sticky { display: none; }
}

/* ── arrival ─────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
	.pdp-reveal {
		opacity: 0;
		transform: translateY(10px);
		animation: pdp-rise 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
	}
	.pdp-reveal:nth-child(1) { animation-delay: 0.02s; }
	.pdp-reveal:nth-child(2) { animation-delay: 0.07s; }
	.pdp-reveal:nth-child(3) { animation-delay: 0.12s; }
	.pdp-reveal:nth-child(4) { animation-delay: 0.17s; }
	.pdp-reveal:nth-child(5) { animation-delay: 0.22s; }
	.pdp-reveal:nth-child(6) { animation-delay: 0.27s; }
}

@keyframes pdp-rise {
	to { opacity: 1; transform: none; }
}