/* ============================================================
   Productos Personalizados – Frontend Styles (configurator)

   Everything is scoped under .pp-product. Retheme by overriding the
   custom properties below, e.g.:
   .pp-product { --pp-primary: #c2185b; }
   ============================================================ */

/* ---------- Tokens ---------- */
.pp-product {
	--pp-primary: var(--ast-global-color-0, #000ac0);
	--pp-primary-hover: #00078a;
	--pp-primary-tint: rgba(0, 10, 192, 0.06);
	--pp-on-primary: #ffffff;
	--pp-text: #111827;          /* 17.7:1 on white */
	--pp-muted: #4b5563;         /* 7.6:1 on white */
	--pp-surface: #ffffff;
	--pp-surface-alt: #f5f6fa;
	--pp-border: #e3e5ec;        /* decorative card borders */
	--pp-control-border: #6b7280; /* 4.8:1 on white: UI boundaries (WCAG 1.4.11) */
	--pp-success: #047857;       /* 5.5:1 on white */
	--pp-success-bg: #ecfdf5;
	--pp-error: #b91c1c;         /* 6.5:1 on white, 5.9:1 on --pp-error-bg */
	--pp-error-bg: #fef2f2;
	--pp-focus: var(--pp-primary);
	--pp-radius: 16px;
	--pp-radius-sm: 10px;
	--pp-radius-btn: 10px;
	--pp-shadow: 0 1px 2px rgba(17, 24, 39, 0.04), 0 8px 24px rgba(17, 24, 39, 0.06);
	--pp-gap: 24px;
	--pp-sticky-top: 24px;
	--pp-max-width: 1140px;
	--pp-bar-end-gap: 76px;      /* room for floating chat buttons on mobile */
	--pp-transition: 0.2s ease;
}

@supports (color: color-mix(in srgb, red, blue)) {
	.pp-product {
		--pp-primary-hover: color-mix(in srgb, var(--pp-primary) 82%, #000000);
		--pp-primary-tint: color-mix(in srgb, var(--pp-primary) 7%, transparent);
	}
}

/* ---------- Container ----------
   Astra's ".entry-content[data-ast-blocks-layout] > *" (0,2,0) forces the theme
   content width on direct children; the selectors below are more specific. */
.pp-product,
.entry-content .pp-product,
.entry-content[data-ast-blocks-layout] > .pp-product {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--pp-max-width);
	margin: 32px auto;
	padding: 0;
	color: var(--pp-text);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.6;
	text-align: left;
	container-type: inline-size;
	container-name: pp;
}

.pp-product *,
.pp-product *::before,
.pp-product *::after {
	box-sizing: border-box;
}

.pp-product [hidden] {
	display: none !important;
}

/* Reset theme spacing inside the component; layout spacing comes from gaps. */
.pp-product .pp-product__layout :is(p, h2, h3, h4, ul, ol) {
	margin: 0;
}

.pp-product .pp-product__layout :is(h2, h3, h4) {
	color: var(--pp-text);
	font-family: inherit;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
}

.pp-product img {
	max-width: 100%;
	height: auto;
}

.pp-product a {
	color: var(--pp-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.pp-product .pp-visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.pp-product .pp-icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
}

/* ---------- Focus (WCAG 2.4.7 / 2.4.11) ---------- */
.pp-product :focus-visible {
	outline: 3px solid var(--pp-focus);
	outline-offset: 2px;
}

.pp-product .pp-upload__input:focus-visible + .pp-upload__choose {
	outline: 3px solid var(--pp-focus);
	outline-offset: 3px;
}

.pp-product [tabindex="-1"]:focus:not(:focus-visible) {
	outline: none;
}

/* ---------- Layout ---------- */
.pp-product .pp-product__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--pp-gap);
	align-items: start;
}

.pp-product .pp-product__main {
	display: flex;
	flex-direction: column;
	gap: var(--pp-gap);
	min-width: 0;
}

.pp-product .pp-section,
.pp-product .pp-summary {
	background: var(--pp-surface);
	border: 1px solid var(--pp-border);
	border-radius: var(--pp-radius);
	box-shadow: var(--pp-shadow);
	padding: 20px;
}

.pp-product .pp-section {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.pp-product .pp-product__layout .pp-section__title {
	font-size: 1.25rem;
}

/* ---------- Buttons ---------- */
.pp-product .pp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	margin: 0;
	padding: 12px 20px;
	border: 2px solid transparent;
	border-radius: var(--pp-radius-btn);
	background: transparent;
	color: var(--pp-text);
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: normal;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	box-shadow: none;
	cursor: pointer;
	transition: background-color var(--pp-transition), border-color var(--pp-transition), color var(--pp-transition);
	-webkit-tap-highlight-color: transparent;
}

.pp-product .pp-btn--block {
	display: flex;
	width: 100%;
}

.pp-product .pp-btn--lg {
	min-height: 56px;
	font-size: 1.0625rem;
}

.pp-product .pp-btn--primary,
.pp-product .pp-btn--primary:focus {
	background: var(--pp-primary);
	border-color: var(--pp-primary);
	color: var(--pp-on-primary);
}

.pp-product .pp-btn--primary:hover {
	background: var(--pp-primary-hover);
	border-color: var(--pp-primary-hover);
	color: var(--pp-on-primary);
}

.pp-product .pp-btn--secondary,
.pp-product .pp-btn--secondary:focus {
	background: var(--pp-surface);
	border-color: var(--pp-primary);
	color: var(--pp-primary);
}

.pp-product .pp-btn--secondary:hover {
	background: var(--pp-primary-tint);
	color: var(--pp-primary);
}

.pp-product .pp-btn--ghost,
.pp-product .pp-btn--ghost:focus {
	background: transparent;
	border-color: var(--pp-control-border);
	color: var(--pp-text);
}

.pp-product .pp-btn--ghost:hover {
	background: var(--pp-primary-tint);
	border-color: var(--pp-primary);
	color: var(--pp-primary);
}

.pp-product .pp-btn--danger,
.pp-product .pp-btn--danger:focus {
	background: var(--pp-error);
	border-color: var(--pp-error);
	color: #ffffff;
}

.pp-product .pp-btn--danger:hover {
	background: #991b1b;
	border-color: #991b1b;
	color: #ffffff;
}

.pp-product .pp-btn[aria-disabled="true"] {
	cursor: not-allowed;
	opacity: 0.7;
}

/* ---------- Summary (value proposition, price, what's included) ---------- */
.pp-product .pp-summary {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.pp-product .pp-summary__media {
	overflow: hidden;
	border-radius: var(--pp-radius-sm);
	background: var(--pp-surface-alt);
}

.pp-product .pp-summary__media img {
	display: block;
	width: 100%;
	max-height: 220px;
	object-fit: cover;
}

.pp-product .pp-product__layout .pp-summary__kind {
	color: var(--pp-primary);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.pp-product .pp-product__layout .pp-summary__title {
	font-size: 1.5rem;
}

.pp-product .pp-summary__lead {
	color: var(--pp-muted);
}

.pp-product .pp-summary__price-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
}

.pp-product .pp-summary__price {
	color: var(--pp-text);
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.2;
}

.pp-product .pp-summary__price .woocommerce-price-suffix {
	color: var(--pp-muted);
	font-size: 0.875rem;
	font-weight: 400;
}

.pp-product .pp-summary__badge {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--pp-success-bg);
	color: #065f46;
	font-size: 0.8125rem;
	font-weight: 600;
}

.pp-product .pp-summary__description {
	color: var(--pp-muted);
	font-size: 0.9375rem;
}

.pp-product .pp-product__layout .pp-summary__description > * + *,
.pp-product .pp-product__layout .pp-tips__extra > * + * {
	margin-top: 0.6em;
}

.pp-product .pp-product__layout .pp-summary__description :is(ul, ol),
.pp-product .pp-product__layout .pp-tips__extra :is(ul, ol) {
	padding-left: 1.25em;
}

.pp-product .pp-product__layout .pp-summary__subtitle {
	font-size: 1rem;
}

.pp-product .pp-checklist,
.pp-product .pp-tips__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 0;
	list-style: none;
}

.pp-product .pp-checklist li,
.pp-product .pp-tips__list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	font-size: 0.9375rem;
}

.pp-product .pp-checklist .pp-icon,
.pp-product .pp-tips__do .pp-icon {
	margin-top: 2px;
	color: var(--pp-success);
}

.pp-product .pp-tips__dont .pp-icon {
	margin-top: 2px;
	color: var(--pp-error);
}

.pp-product .pp-summary__note {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 14px;
	border-radius: var(--pp-radius-sm);
	background: var(--pp-surface-alt);
	color: var(--pp-text);
	font-size: 0.875rem;
}

.pp-product .pp-summary__note .pp-icon {
	margin-top: 1px;
	color: var(--pp-primary);
}

/* The step-aware action only shows in the two-column layout. */
.pp-product .pp-summary__action {
	display: none;
}

.pp-product .pp-product__layout .pp-summary__action-hint {
	margin-top: 8px;
	color: var(--pp-muted);
	font-size: 0.8125rem;
	text-align: center;
}

/* ---------- How it works ---------- */
.pp-product .pp-how__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.pp-product .pp-how__item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
}

.pp-product .pp-how__num {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--pp-primary);
	color: var(--pp-on-primary);
	font-weight: 700;
	font-size: 0.9375rem;
}

.pp-product .pp-product__layout .pp-how__title {
	font-size: 1rem;
}

.pp-product .pp-how__item p {
	color: var(--pp-muted);
	font-size: 0.9375rem;
}

/* ---------- Studio ---------- */
.pp-product .pp-studio {
	container-type: inline-size;
	container-name: pp-studio;
}

.pp-product .pp-panel {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.pp-product .pp-panel:focus {
	outline: none;
}

.pp-product .pp-product__layout .pp-panel__hint {
	margin-top: -6px;
	color: var(--pp-muted);
	font-size: 0.875rem;
	text-align: center;
}

/* Upload */
.pp-product .pp-upload {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
}

.pp-product .pp-upload__dropzone {
	position: relative;
	border: 2px dashed var(--pp-control-border);
	border-radius: var(--pp-radius);
	background: var(--pp-surface-alt);
	transition: border-color var(--pp-transition), background-color var(--pp-transition);
}

.pp-product .pp-upload__dropzone:hover,
.pp-product .pp-upload__dropzone:focus-within,
.pp-product .pp-upload__dropzone.pp-is-dragover {
	border-color: var(--pp-primary);
	background: var(--pp-primary-tint);
}

.pp-product .pp-upload__dropzone.pp-is-dragover {
	border-style: solid;
}

.pp-product .pp-upload__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 28px 20px;
	text-align: center;
	cursor: pointer;
}

.pp-product .pp-upload__icon {
	color: var(--pp-primary);
}

.pp-product .pp-upload__text {
	font-weight: 600;
}

.pp-product .pp-upload__text--coarse {
	display: none;
}

@media (pointer: coarse) {
	.pp-product .pp-upload__text--fine {
		display: none;
	}

	.pp-product .pp-upload__text--coarse {
		display: inline;
	}
}

.pp-product .pp-upload__hint {
	color: var(--pp-muted);
	font-size: 0.875rem;
}

.pp-product .pp-upload__selected {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px;
}

.pp-product .pp-upload__thumb {
	flex-shrink: 0;
	width: 96px;
	height: 96px;
	border-radius: var(--pp-radius-sm);
	background: var(--pp-surface);
	object-fit: cover;
}

.pp-product .pp-upload__meta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	min-width: 0;
}

.pp-product .pp-upload__filename {
	max-width: 100%;
	overflow: hidden;
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pp-product .pp-upload__filesize {
	color: var(--pp-muted);
	font-size: 0.875rem;
}

.pp-product .pp-upload__change {
	margin-top: 4px;
	min-height: 44px;
	padding: 8px 16px;
	font-size: 0.9375rem;
}

/* Photo tips */
.pp-product .pp-tips {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px;
	border-radius: var(--pp-radius-sm);
	background: var(--pp-surface-alt);
}

.pp-product .pp-product__layout .pp-tips__title {
	font-size: 1rem;
}

.pp-product .pp-tips__extra {
	padding-top: 12px;
	border-top: 1px solid var(--pp-border);
	color: var(--pp-muted);
	font-size: 0.9375rem;
}

@container pp-studio (min-width: 600px) {
	.pp-product .pp-tips__list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Consent */
.pp-product .pp-consent {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: 4px 12px;
	font-size: 0.9375rem;
}

.pp-product .pp-consent--notice {
	grid-template-columns: minmax(0, 1fr);
	color: var(--pp-muted);
	font-size: 0.875rem;
}

.pp-product .pp-consent__checkbox {
	width: 22px;
	height: 22px;
	margin: 2px 0 0;
	accent-color: var(--pp-primary);
	cursor: pointer;
}

.pp-product .pp-consent__checkbox[aria-invalid="true"] {
	outline: 2px solid var(--pp-error);
	outline-offset: 2px;
}

.pp-product .pp-consent__label {
	display: block;
	min-height: 24px;
	color: var(--pp-text);
	cursor: pointer;
}

.pp-product .pp-consent--notice .pp-consent__label {
	color: var(--pp-muted);
	cursor: auto;
}

.pp-product .pp-consent__policy {
	grid-column: 2;
	font-size: 0.875rem;
}

.pp-product .pp-consent--notice .pp-consent__policy {
	grid-column: 1;
}

/* Alerts (inline errors) */
.pp-product .pp-alert {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 14px 16px;
	border: 1px solid #fca5a5;
	border-left: 4px solid var(--pp-error);
	border-radius: var(--pp-radius-sm);
	background: var(--pp-error-bg);
}

.pp-product .pp-alert__text {
	color: var(--pp-error);
	font-size: 0.9375rem;
	font-weight: 500;
}

.pp-product .pp-alert__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.pp-product .pp-alert__actions .pp-btn {
	min-height: 44px;
	padding: 8px 16px;
	font-size: 0.9375rem;
}

/* Progress */
.pp-product .pp-progress {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px;
	border-radius: var(--pp-radius);
	background: var(--pp-surface-alt);
}

.pp-product .pp-progress__thumb {
	flex-shrink: 0;
	width: 80px;
	height: 80px;
	border-radius: var(--pp-radius-sm);
	object-fit: cover;
	background: var(--pp-surface);
}

.pp-product .pp-progress__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

.pp-product .pp-progress__stage {
	min-height: 1.6em;
	font-weight: 600;
}

.pp-product .pp-progress__track {
	position: relative;
	width: 100%;
	height: 8px;
	overflow: hidden;
	border-radius: 999px;
	background: #d1d5db;
}

.pp-product .pp-progress__fill {
	width: 0;
	height: 100%;
	border-radius: 999px;
	background: var(--pp-primary);
	transition: width 0.3s ease;
}

.pp-product .pp-progress--indeterminate .pp-progress__fill {
	position: absolute;
	top: 0;
	left: 0;
	width: 35% !important;
	transition: none;
	animation: pp-indeterminate 1.6s ease-in-out infinite;
}

@keyframes pp-indeterminate {
	0% {
		transform: translateX(-100%);
	}

	100% {
		transform: translateX(300%);
	}
}

.pp-product .pp-progress__meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 4px 12px;
	color: var(--pp-muted);
	font-size: 0.875rem;
}

.pp-product .pp-progress__percent {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	color: var(--pp-text);
}

/* Result */
.pp-product .pp-product__layout .pp-result__title {
	font-size: 1.25rem;
	text-align: center;
}

.pp-product .pp-view-toggle {
	display: flex;
	align-self: center;
	gap: 4px;
	padding: 4px;
	border: 1px solid var(--pp-control-border);
	border-radius: 999px;
	background: var(--pp-surface);
}

.pp-product .pp-view-toggle__btn,
.pp-product .pp-view-toggle__btn:focus {
	min-height: 44px;
	margin: 0;
	padding: 8px 16px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--pp-text);
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: normal;
	line-height: 1.2;
	text-transform: none;
	box-shadow: none;
	cursor: pointer;
}

.pp-product .pp-view-toggle__btn:hover {
	background: var(--pp-primary-tint);
	color: var(--pp-primary);
}

.pp-product .pp-view-toggle__btn[aria-pressed="true"] {
	background: var(--pp-primary);
	color: var(--pp-on-primary);
}

.pp-product .pp-stage {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

/* Constrained so the buy button stays close: never taller than 70vh / 560px. */
.pp-product .pp-stage__single,
.pp-product .pp-compare {
	position: relative;
	width: min(100%, 560px, 70vh);
	aspect-ratio: 1 / 1;
	margin: 0 auto;
	overflow: hidden;
	border-radius: var(--pp-radius);
	background: #eef0f4;
}

.pp-product .pp-stage__img,
.pp-product .pp-compare__before,
.pp-product .pp-compare__after {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
	pointer-events: none;
	user-select: none;
}

.pp-product .pp-compare {
	cursor: ew-resize;
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
}

.pp-product .pp-compare__after-wrapper {
	position: absolute;
	inset: 0;
	clip-path: inset(0 0 0 50%);
}

.pp-product .pp-compare__tag {
	position: absolute;
	top: 10px;
	z-index: 2;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(17, 24, 39, 0.82);
	color: #ffffff;
	font-size: 0.8125rem;
	font-weight: 600;
	pointer-events: none;
}

.pp-product .pp-compare__tag--before {
	left: 10px;
}

.pp-product .pp-compare__tag--after {
	right: 10px;
}

.pp-product .pp-compare__handle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	z-index: 3;
	width: 0;
	pointer-events: none;
}

.pp-product .pp-compare__handle-line {
	position: absolute;
	top: 0;
	bottom: 0;
	left: -1px;
	width: 2px;
	background: #ffffff;
	box-shadow: 0 0 0 1px rgba(17, 24, 39, 0.35);
}

.pp-product .pp-compare__handle-knob {
	position: absolute;
	top: 50%;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 2px solid var(--pp-primary);
	border-radius: 50%;
	background: #ffffff;
	color: var(--pp-primary);
	box-shadow: 0 2px 10px rgba(17, 24, 39, 0.25);
	transform: translate(-50%, -50%);
}

.pp-product .pp-compare:focus-within .pp-compare__handle-knob {
	outline: 3px solid var(--pp-focus);
	outline-offset: 3px;
	box-shadow: 0 0 0 6px #ffffff, 0 2px 10px rgba(17, 24, 39, 0.25);
}

/* Keyboard-operable range; pointer input is handled on the image itself. */
.pp-product .pp-compare__range {
	position: absolute;
	inset: 0;
	z-index: 4;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
}

.pp-product .pp-compare__hint,
.pp-product .pp-result__note {
	color: var(--pp-muted);
	font-size: 0.875rem;
	text-align: center;
}

/* Buy */
.pp-product .pp-buy {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px;
	border: 1px solid var(--pp-border);
	border-radius: var(--pp-radius);
	background: var(--pp-surface-alt);
}

.pp-product .pp-buy__status {
	color: var(--pp-text);
	font-size: 0.9375rem;
	text-align: center;
}

.pp-product .pp-product__layout .pp-buy__next-title {
	font-size: 0.9375rem;
}

.pp-product .pp-product__layout .pp-buy__next {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-left: 1.25rem;
	color: var(--pp-muted);
	font-size: 0.875rem;
	list-style: decimal;
}

.pp-product .pp-buy__next li {
	margin: 0;
}

.pp-product .pp-result__secondary {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.pp-product .pp-result__secondary .pp-btn {
	flex: 1 1 200px;
}

/* ---------- FAQ ---------- */
.pp-product .pp-faq {
	gap: 0;
}

.pp-product .pp-product__layout .pp-faq .pp-section__title {
	margin-bottom: 8px;
}

.pp-product .pp-faq__item {
	margin: 0;
	border-bottom: 1px solid var(--pp-border);
}

.pp-product .pp-faq__item:last-child {
	border-bottom: 0;
}

.pp-product .pp-faq__item summary {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 48px;
	padding: 12px 36px 12px 0;
	font-weight: 600;
	list-style: none;
	cursor: pointer;
}

.pp-product .pp-faq__item summary::-webkit-details-marker {
	display: none;
}

.pp-product .pp-faq__item summary::after {
	content: "+";
	position: absolute;
	right: 4px;
	top: 50%;
	color: var(--pp-primary);
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1;
	transform: translateY(-50%);
}

.pp-product .pp-faq__item[open] summary::after {
	content: "\2212";
}

.pp-product .pp-faq__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 0 0 16px;
	color: var(--pp-muted);
	font-size: 0.9375rem;
}

/* ---------- Mobile action bar ---------- */
.pp-product .pp-bar {
	position: sticky;
	bottom: 0;
	z-index: 20;
	margin-top: 16px;
	padding: 12px var(--pp-bar-end-gap) calc(12px + env(safe-area-inset-bottom, 0px)) 16px;
	border-top: 1px solid var(--pp-border);
	background: rgba(255, 255, 255, 0.97);
	box-shadow: 0 -6px 18px rgba(17, 24, 39, 0.08);
	transition: opacity var(--pp-transition), visibility var(--pp-transition);
}

.pp-product .pp-bar--hidden {
	visibility: hidden;
	opacity: 0;
}

/* ---------- Wider screens ---------- */
@container pp (min-width: 560px) {
	.pp-product .pp-section,
	.pp-product .pp-summary {
		padding: 28px;
	}

	.pp-product .pp-how__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px 24px;
	}
}

/* Two columns: studio on the left, sticky buy panel on the right. */
@container pp (min-width: 900px) {
	.pp-product .pp-product__layout {
		grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr);
		gap: 32px;
	}

	.pp-product .pp-product__main {
		grid-column: 1;
		grid-row: 1;
	}

	.pp-product .pp-product__summary {
		grid-column: 2;
		grid-row: 1;
	}

	.pp-product .pp-summary__media img {
		max-height: 160px;
	}

	.pp-product .pp-summary__action {
		display: block;
	}

	.pp-product .pp-bar {
		display: none;
	}
}

@media (min-height: 720px) {
	@container pp (min-width: 900px) {
		.pp-product .pp-product__summary {
			position: sticky;
			top: var(--pp-sticky-top);
		}
	}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.pp-product *,
	.pp-product *::before,
	.pp-product *::after {
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.pp-product .pp-progress--indeterminate .pp-progress__fill {
		width: 100% !important;
		opacity: 0.55;
		animation: none;
		transform: none;
	}
}

/* ---------- Forced colors (Windows high contrast) ---------- */
@media (forced-colors: active) {
	.pp-product .pp-btn,
	.pp-product .pp-view-toggle__btn,
	.pp-product .pp-upload__dropzone {
		border: 2px solid ButtonText;
	}

	.pp-product .pp-view-toggle__btn[aria-pressed="true"] {
		outline: 2px solid Highlight;
	}
}