/* Single product page. Mobile first; desktop at 64rem (same as navbar). Cards, crumbs and swatches come from shop.css. */
.pdp .crumbs { padding-block-start: 1.25rem; }
.pdp__top { display: grid; gap: 0.5rem; padding-block: 0.75rem 0; }
.pdp__info { min-inline-size: 0; }

/* gallery: full-bleed slider on phones, thumbnails + rounded stage on desktop */
.pdp-gallery { margin-inline: calc(-1 * var(--gutter)); }
.pdp-stage { position: relative; }
.pdp-slider {
	position: relative; display: flex; aspect-ratio: 5 / 6; background: var(--surface-soft); overflow-x: auto; overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory; scrollbar-width: none;
}
.pdp-slider::-webkit-scrollbar { display: none; }
.pdp-slider__slide { flex: 0 0 100%; min-inline-size: 0; scroll-snap-align: start; }
.pdp-slider__slide img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.pdp-dots { display: flex; justify-content: center; }
.pdp-dots__btn { position: relative; inline-size: 1.5rem; block-size: 2.75rem; padding: 0; border: 0; background: none; cursor: pointer; }
.pdp-dots__btn::before {
	content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; translate: -50% -50%;
	inline-size: 0.375rem; block-size: 0.375rem; border-radius: var(--radius-pill); background: var(--control-border);
	transition: background-color 0.3s;
}
.pdp-dots__btn[aria-current="true"]::before { inline-size: 1.125rem; background: var(--ink); }
.pdp-thumbs { display: none; }

/* title block */
.pdp-head { display: grid; gap: 0.375rem; }
.pdp .pdp-head__cat { justify-self: start; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal-ink); }
.pdp-head__title { margin: 0; font-size: clamp(2rem, 1.6rem + 1.4vw, 2.5rem); line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
.pdp-head__sub { margin: 0; color: var(--ink-muted); font-size: 1rem; line-height: 1.5; text-wrap: pretty; }
.pdp-head__price { margin: 0.375rem 0 0; font-size: 1.375rem; font-weight: 700; }
.pdp-head__price small { font-size: 0.9375rem; font-weight: 500; }

/* colour + size */
.pdp-buy { display: grid; gap: 1.75rem; margin-block-start: 1.75rem; }
.pdp-opt { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.pdp-opt__legend:has(.pdp-opt__guide) { display: flex; align-items: center; gap: 0.25rem; inline-size: 100%; margin-block: -0.75rem 0; }
.pdp-opt__guide {
	margin-inline-start: auto; min-block-size: 2.75rem; padding: 0; border: 0; background: none;
	color: var(--teal-ink); font: inherit; font-size: 0.9375rem; font-weight: 600; text-decoration: underline; text-underline-offset: 0.25em; cursor: pointer;
}
.pdp-opt__guide:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.pdp-opt__legend { margin-block-end: 0.75rem; padding: 0; color: var(--ink-muted); font-size: 0.9375rem; }
.pdp-opt__legend strong { color: var(--ink); font-weight: 600; }
.pdp-opt__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
.pdp-opt--color .pdp-opt__list { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.pdp-opt__item { position: relative; display: block; }
.pdp-opt__item input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pdp-opt__item input:disabled { cursor: not-allowed; }
.pdp-opt--color .pdp-opt__item { inline-size: 2.75rem; block-size: 2.75rem; padding: 0.1875rem; border: 2px solid transparent; border-radius: var(--radius-pill); transition: transform 0.2s var(--ease); }
.pdp-opt--color .pdp-opt__item:has(input:checked) { border-color: var(--teal); }
.pdp-opt--color .pdp-opt__item:has(input:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.pdp-opt--color .pdp-opt__item:has(input:disabled) { opacity: 0.35; }
.pdp-opt__all { font: inherit; cursor: pointer; background: none; }
.pdp-opt--color .pdp-opt__item.pdp-opt__all { border-color: var(--fabric-light-blue); }
.pdp-opt--color .pdp-opt__item.pdp-opt__all[aria-pressed="true"] { border-color: var(--teal); }
.pdp-opt__all:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.pdp-opt__dot.swatch { inline-size: 100%; block-size: 100%; }
.pdp-opt__chip {
	display: flex; align-items: center; justify-content: center; block-size: 3rem; border: 1px solid var(--control-border); border-radius: var(--radius-sm);
	background: var(--surface); font-size: 0.9375rem; font-weight: 600; transition: transform 0.2s var(--ease);
}
.pdp-opt__item input:checked + .pdp-opt__chip { border-color: var(--action); background: var(--action); color: var(--on-action); }
.pdp-opt__item input:focus-visible + .pdp-opt__chip { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.pdp-opt__item input:disabled + .pdp-opt__chip { border-color: var(--hairline); color: var(--ink-muted); text-decoration: line-through; }
.pdp-opt__item:active { transform: scale(0.96); }

/* buttons */
.pdp-buy__actions { display: grid; gap: 0.625rem; }
.pdp .pdp-cta {
	display: flex; align-items: center; justify-content: center; gap: 0.5rem; min-block-size: 3.375rem; padding-inline: 1.5rem; border: 0; border-radius: var(--radius-pill);
	background: var(--action); color: var(--on-action); font: inherit; font-size: 1.0625rem; font-weight: 600; cursor: pointer; transition: transform 0.2s var(--ease);
}
.pdp .pdp-cta:active { transform: scale(0.98); }
.pdp .pdp-cta[aria-disabled="true"] { background: var(--action-pending); }
.pdp-opt.is-missing .pdp-opt__legend, .pdp-opt.is-missing .pdp-opt__legend strong { color: var(--danger); }
.pdp-opt.is-missing .pdp-opt__chip { border-color: var(--danger); }
.pdp-opt.is-missing .pdp-opt__list { animation: pdp-nudge 0.4s var(--ease); }
@keyframes pdp-nudge { 20%, 60% { translate: -0.375rem 0; } 40%, 80% { translate: 0.375rem 0; } }
.pdp .pdp-cta[aria-busy="true"] { opacity: 0.7; }
.pdp .pdp-cta--ghost { min-block-size: 3.125rem; background: var(--whatsapp); color: var(--on-whatsapp); font-size: 0.9375rem; }
.pdp-buy__error { margin: 0; color: var(--danger); font-size: 0.9375rem; }

/* details */
.pdp-details { margin-block-start: 1.5rem; }
.pdp-details__item { border-block-end: 1px solid var(--hairline); }
.pdp-details summary { display: flex; align-items: center; justify-content: space-between; min-block-size: 3.5rem; font-size: 1.0625rem; font-weight: 600; cursor: pointer; list-style: none; }
.pdp-details summary::-webkit-details-marker { display: none; }
.pdp-details summary svg { color: var(--ink-muted); transition: transform 0.3s var(--ease); }
.pdp-details__item[open] summary svg { transform: rotate(45deg); }
.pdp-details ul { padding: 0 0 1.125rem 1.25rem; list-style: disc; color: var(--ink-muted); line-height: 1.5; }
.pdp-details li { margin-block-end: 0.375rem; padding-inline-start: 0.25rem; }

/* complete the look + more */
.pdp-related { margin-block-start: 3rem; padding-block: 2.5rem 0.5rem; }
.pdp-related--tinted { background: var(--surface-soft); }
.pdp-related__title { margin: 0; font-size: 1.5rem; line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; }
.pdp-related .shop-grid { padding-block-start: 1.25rem; }

@media (min-width: 64rem) {
	.pdp__top { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 3.5rem; align-items: start; padding-block-start: 2.5rem; }
	.pdp-gallery { display: flex; gap: 0.875rem; margin-inline: 0; }
	.pdp-thumbs { display: flex; flex-direction: column; gap: 0.625rem; }
	.pdp-thumbs__btn { inline-size: 4.75rem; block-size: 6rem; padding: 0; border: 2px solid transparent; border-radius: var(--radius-md); overflow: hidden; background: var(--surface-soft); cursor: pointer; }
	.pdp-thumbs__btn[aria-current="true"] { border-color: var(--teal); }
	.pdp-thumbs__btn img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
	.pdp-stage { flex: 1; min-inline-size: 0; border-radius: 1.75rem; overflow: hidden; }
	.pdp-slider { aspect-ratio: 3 / 4; }
	.pdp-dots { display: none; }
	.pdp .crumbs { padding-block-start: 3.125rem; }
	.pdp-head__sub { font-size: 1.0625rem; }
	.pdp-head__price { margin-block-start: 0.75rem; font-size: 1.625rem; }
	.pdp-opt__list { grid-template-columns: repeat(7, minmax(0, 1fr)); }
	.pdp-related { margin-block-start: 6rem; padding-block: 3.5rem 1.5rem; }
	.pdp-related__title { font-size: 2rem; }
	.pdp-related .shop-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* last, so it beats the display rules above */
.pdp [hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
	.pdp .pdp-cta, .pdp-opt__item, .pdp-opt__chip, .pdp-details summary svg, .pdp-dots__btn::before { transition: none; }
	.pdp-opt.is-missing .pdp-opt__list { animation: none; }
}