/* The product page (job W3, BC-046; lean layout of 20 Oct). Values come from tokens.css only (roadmap §5.1).
   WooCommerce's own CSS floats the summary, the form parts and the buttons; the selectors below that start with
   ".pp" win over it without !important. Phone (≤ 760 px): one column in the order of the lean examples. */

/* --- Layout ------------------------------------------------------------------------------------------------------ */
.site-main--product { padding-top: var(--space-6); }
.pp-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.pp-col { min-width: 0; }
.woocommerce .pp .pp-col--buy.summary, .woocommerce-page .pp .pp-col--buy.summary { float: none; width: auto; margin: 0; }
.pp-col--buy > * + * { margin-top: var(--space-4); }
.pp-hooks:empty { display: none; }
.pp-hooks { margin: 0; }

/* --- Gallery ----------------------------------------------------------------------------------------------------- */
.pp-stage { position: relative; aspect-ratio: 1; overflow: hidden; border: var(--line); border-radius: var(--radius); background: var(--color-surface); }
.pp-stage__frame { position: absolute; inset: 0; }
.pp-stage__img { width: 100%; height: 100%; padding: 8%; object-fit: contain; }
.pp-stage--space .pp-stage__img { padding: 0; object-fit: cover; }
.pp-stage--drawing .pp-stage__img { padding: 5%; }
.pp-stage__sale {
	position: absolute; left: var(--space-5); top: var(--space-5); z-index: 1; display: grid; place-items: center;
	width: var(--badge-round); height: var(--badge-round); border-radius: 50%; background: var(--color-red); color: var(--color-on-red);
	font-size: var(--text-sm); font-weight: var(--weight-bold);
}
.pp-stage__enlarge {
	position: absolute; right: var(--space-4); bottom: var(--space-4); z-index: 1; display: grid; place-items: center;
	width: var(--control-height); height: var(--control-height); padding: 0; border: var(--line); border-radius: var(--radius); background: var(--color-surface); color: var(--color-ink-strong);
}
.pp-stage__enlarge:hover { color: var(--color-red); }
.pp-stage__enlarge svg, .pp-reassure svg, .pp-help__whatsapp svg { width: var(--icon-sm); height: var(--icon-sm); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.pp-gallery__info { display: flex; justify-content: space-between; gap: var(--space-3); margin: var(--space-4) 0 var(--space-3); font-size: var(--text-sm); }
.pp-gallery__name { color: var(--color-ink-strong); font-weight: var(--weight-semibold); }
.pp-gallery__count { color: var(--color-muted); font-variant-numeric: tabular-nums; }
.pp-thumbs {
	display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * var(--space-3)) / 4); gap: var(--space-3);
	overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin;
}
.pp-thumb {
	display: flex; flex-direction: column; align-items: stretch; gap: var(--space-1); min-width: 0; padding: var(--space-2);
	scroll-snap-align: start; border: var(--line); border-radius: var(--radius); background: var(--color-surface); color: var(--color-muted);
	font-size: var(--text-sm); text-align: center;
}
.pp-thumb__img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.pp-thumb--space .pp-thumb__img { object-fit: cover; }
.pp-thumb__model { display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--radius); background: var(--color-cream); color: var(--color-ink-strong); font-size: var(--text-lg); font-weight: var(--weight-heavy); }
.pp-thumb__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-thumb[aria-pressed="true"] { border-color: var(--color-red); outline: 1px solid var(--color-red); outline-offset: -2px; color: var(--color-red); font-weight: var(--weight-bold); }
.pp-thumb:hover { color: var(--color-ink-strong); }
.pp-gallery__actions { display: flex; margin-top: var(--space-2); border-top: var(--line); border-bottom: var(--line); }
.pp-gallery__action {
	display: inline-flex; flex: 1 1 0; align-items: center; justify-content: center; gap: var(--space-2); min-height: calc(var(--control-height) + var(--space-4)); padding: var(--space-3);
	border: 0; background: none; color: var(--color-ink-strong); font-size: var(--text-sm); font-weight: var(--weight-semibold);
}
.pp-gallery__action + .pp-gallery__action { border-left: var(--line); }
.pp-gallery__action:hover { color: var(--color-red); }

/* --- Head of the purchase column ---------------------------------------------------------------------------------- */
.pp-head__links { margin: 0 0 var(--space-3); }
.pp-head__links a:hover { color: var(--color-red-dark); text-decoration: underline; }
.pp-head__dot { color: var(--color-red); }
.woocommerce .pp .pp-head__title { margin: 0; font-size: var(--text-2xl); line-height: var(--leading-tight); overflow-wrap: anywhere; }
.pp-head__tagline { margin: var(--space-2) 0 0; color: var(--color-ink-strong); font-size: var(--text-lg); font-weight: var(--weight-bold); line-height: var(--leading-tight); }
/* R22: the name in two lines (the Codex title): line 2 smaller and lighter; the H1 text is still the full name. */
.woocommerce .pp .pp-head__title .pp-head__name, .woocommerce .pp .pp-head__title .pp-head__type { display: block; }
.woocommerce .pp .pp-head__title .pp-head__type { margin-top: var(--space-1); font-size: .74em; font-weight: var(--weight-semibold); }
/* The one-sentence tagline between the name and the price (Owl, 2026-10-23; the Codex .intro). */
.pp-head__intro { margin: var(--space-3) 0 0; color: var(--color-ink); font-size: var(--text-base); line-height: var(--leading-base); }
.pp-head__rule { display: block; width: var(--space-6); height: var(--rule-weight); margin: var(--space-5) 0; background: var(--color-line); }
.pp-head__price { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.woocommerce .pp .pp-head__price .price { margin: 0; color: var(--color-ink-strong); font-size: var(--text-xl); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); }
.woocommerce .pp .pp-head__price .price del { margin-right: var(--space-2); font-size: var(--text-md); font-weight: var(--weight-regular); letter-spacing: 0; }
.pp-head__price .savings { padding: var(--space-1) var(--space-2); border-radius: var(--rule-weight); background: var(--color-red-tint); text-transform: uppercase; }
.pp-head__sku { margin: var(--space-2) 0 0; color: var(--color-muted); font-size: var(--text-xs); }
.pp-head__sku:has(.sku:empty) { display: none; } /* a variable product without its own SKU: shows after a choice */

/* --- Availability, seals, About ----------------------------------------------------------------------------------- */
.pp-avail { padding: var(--space-3) var(--space-4); border-radius: var(--radius); background: var(--color-cream); font-size: var(--text-sm); }
.pp-avail--in { background: var(--color-free-tint); }
.pp-avail__line { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-1) var(--space-4); margin: 0; }
.pp-avail__time { color: var(--color-ink); }
.pp-avail__note { margin: var(--space-1) 0 0; color: var(--color-muted); font-size: var(--text-xs); }
.pp-seals { padding: var(--space-3) var(--space-4); border: var(--line); border-radius: var(--radius); background: var(--color-cream); }
.pp-about { padding: var(--space-4) var(--space-5); border: var(--line); border-radius: var(--radius); background: var(--color-cream); }
.pp-col--gallery .pp-about { margin-top: var(--space-5); }
.pp-about__title { margin: 0 0 var(--space-2); font-size: var(--text-md); letter-spacing: 0; }
.pp-about__list { margin: 0; }
.pp-about__list > div { display: grid; grid-template-columns: minmax(var(--space-9), max-content) minmax(0, 1fr); gap: var(--space-4); padding: var(--space-2) 0; border-top: var(--line); font-size: var(--text-sm); }
.pp-about__list dt { color: var(--color-ink-strong); font-weight: var(--weight-bold); }
.pp-about__list dd { margin: 0; }
.pp-about__text { font-size: var(--text-sm); }
.pp-about__text > :last-child { margin-bottom: 0; }

/* --- Purchase area ------------------------------------------------------------------------------------------------ */
.woocommerce .pp form.cart { margin: 0; }
.woocommerce .pp form.cart::before, .woocommerce .pp form.cart::after { display: none; }
/* The choices are numbered 01, 02 … (lean layout): variation attributes and composite add-ons. */
.pp-purchase { counter-reset: pp-step; }
.woocommerce .pp table.variations th.label label::before, .pp .composite_form .component_title_text::before {
	counter-increment: pp-step; content: counter(pp-step, decimal-leading-zero); margin-right: var(--space-2);
	color: var(--color-muted); font-weight: var(--weight-regular); font-variant-numeric: tabular-nums;
}
/* The add-on card numbers as on the Codex pages: small, light grey, Montserrat Black (Owl, 2026-10-22). */
.pp .composite_form .component_title_text::before { color: var(--color-step); font-size: var(--text-step); font-weight: var(--weight-black); }
/* Variable products: the attribute choices as labelled fields (WooCommerce's table, real attribute names). */
.woocommerce .pp table.variations { display: block; margin: 0 0 var(--space-4); border: 0; }
.woocommerce .pp table.variations tbody, .woocommerce .pp table.variations tr { display: block; }
.woocommerce .pp table.variations tr + tr { margin-top: var(--space-3); }
.woocommerce .pp table.variations th, .woocommerce .pp table.variations td { display: block; padding: 0; border: 0; line-height: var(--leading-base); text-align: left; }
.woocommerce .pp table.variations th.label { margin-bottom: var(--space-2); }
.woocommerce .pp table.variations label { color: var(--color-ink-strong); font-size: var(--text-sm); font-weight: var(--weight-bold); }
.woocommerce .pp table.variations select { width: 100%; max-width: none; min-width: 0; margin: 0; }
/* Choice cards (R3, the lean Hob page): radio cards; WooCommerce's select stays in the form, out of sight. */
/* WooCommerce's ".woocommerce div.product form.cart .variations select" (min-width 75%) needs these classes. */
.pp-choices-field { position: relative; }
.woocommerce div.product form.cart .pp-choices-field select[data-pp-choice-select] {
	position: absolute; top: 0; left: 0; width: 1px; min-width: 0; max-width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); border: 0;
}
.pp-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.pp-choice { position: relative; display: block; margin: 0; cursor: pointer; }
.pp-choice input { position: absolute; top: calc(var(--space-2) + var(--space-1)); left: var(--space-3); margin: 0; accent-color: var(--color-red); }
.pp-choice__body {
	display: block; height: 100%; padding: var(--space-2) var(--space-3) var(--space-2) calc(var(--space-6) + var(--space-3));
	border: 1px solid var(--color-line); border-radius: var(--radius); background: var(--color-surface); line-height: var(--leading-base);
}
.pp-choice__body strong { display: block; color: var(--color-ink-strong); font-size: var(--text-sm); font-weight: var(--weight-bold); }
.pp-choice__body small { display: block; color: var(--color-ink); font-size: var(--text-sm); }
.pp-choice input:checked + .pp-choice__body { border-color: var(--color-red); background: var(--color-red-tint); }
.pp-choice input:focus-visible { outline: none; }
.pp-choice input:focus-visible + .pp-choice__body { outline: 3px solid var(--color-focus); outline-offset: 3px; } /* as base.css */
.pp-choice input:disabled + .pp-choice__body { opacity: .5; cursor: not-allowed; }
.woocommerce .pp .reset_variations { display: inline-block; margin-top: var(--space-2); color: var(--color-muted); font-size: var(--text-xs); text-decoration: underline; }
.woocommerce .pp .single_variation_wrap .woocommerce-variation-price,
.woocommerce .pp .single_variation_wrap .woocommerce-variation-availability { display: none; }
.woocommerce .pp .woocommerce-variation-description { margin-bottom: var(--space-3); font-size: var(--text-sm); }
.woocommerce .pp .woocommerce-variation-description > :last-child { margin-bottom: 0; }

/* Composite Products: the stacked layout as compact add-on cards (its markup and script unchanged). */
.pp .composite_form .composite_navigation, .pp .composite_form .composite_pagination { display: none; }
.pp .composite_form .component { margin: 0 0 var(--space-3); padding: var(--space-3) var(--space-4); border: var(--line); border-radius: var(--radius); background: var(--color-surface); }
.pp .composite_form .component_title_wrapper .component_title { margin: 0 0 var(--space-2); color: var(--color-ink); font-size: var(--text-sm); font-weight: var(--weight-semibold); letter-spacing: 0; }
/* Lean standard V3.0: no helper sentence under an add-on; its price and quantity show only after a choice (product.js
   sets .pp-comp--chosen); "Complete your setup" over the cards; the help card beside them. */
.pp .composite_form .component_description_wrapper { display: none; }
.pp .composite_form:not(.paged) .component .component_inner { padding-bottom: 0; } /* Composite Products' own 3rem */
.pp .composite_form .component_selections > select.pp-comp-proxy { width: 100%; max-width: none; margin: 0; }
.pp .composite_form .composite_component:not(.pp-comp--chosen) .component_content { display: none; }
/* Composite Products can leave an inline "display: none" after its open animation measured the hidden box. */
.pp .composite_form .composite_component.pp-comp--chosen .component_content { display: block !important; }
.pp .composite_form select.pp-comp-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.pp .composite_form .component_options { position: relative; }
.pp-setup__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin: var(--space-2) 0 0; }
.pp-setup__title { margin: 0; color: var(--color-ink-strong); font-size: var(--text-base); font-weight: var(--weight-bold); }
/* The Codex GUIDE button: a small dark label on the right of "Complete your setup". */
.pp-setup__guide { flex: 0 0 auto; padding: var(--space-2) var(--space-3); border-radius: var(--radius); background: var(--color-ink-strong); color: var(--color-surface); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: .04em; text-decoration: none; text-transform: uppercase; }
.pp-setup__guide:hover, .pp-setup__guide:focus-visible { background: var(--color-ink); color: var(--color-surface); }
/* Codex cards: no card for an add-on with no product; the price is in the dropdown, so after a choice the card shows
   only "Quantity" on the left and the quantity box on the right (Owl, 2026-10-22: one simple flow for every brand);
   the Homefires collars are added by the page. */
.pp .composite_form .composite_component.pp-comp--empty { display: none !important; }
.pp .composite_form .composite_component .component_content .price,
.pp .composite_form .composite_component .component_content .woocommerce-variation-price { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pp .composite_form .composite_component .component_content .component_wrap { display: block; }
.pp .composite_form .composite_component .composited_product_details_wrapper .details.component_data { width: 100%; margin: 0; padding: 0; float: none; }
.pp .composite_form .composite_component .component_content .component_wrap { width: 100%; margin: 0; padding: 0; }
/* Only the quantity row: the part's own description, delivery text, buttons and stock line never show in a card
   (Owl, 2026-10-22: "This must never show"). */
.pp .composite_form .composited_product_details_wrapper .details > :not(.component_wrap):not(.variations):not(.single_variation_wrap),
.pp .composite_form .composite_component .component_content .woocommerce-variation-description,
.pp .composite_form .composite_component .component_content .stock:not(.out-of-stock) { display: none; }
/* A variable part: the page sets its variation from the dropdown (one option per variation), so its own fields hide. */
.pp .composite_form .pp-comp--varmap .variations, .pp .composite_form .pp-comp--varmap .reset_variations { display: none; }
.pp .composite_form .composite_component .pp-comp__qty-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); width: 100%; margin: 0; padding: 0; }
.pp .composite_form .composite_component .pp-comp__qty-row::before, .pp .composite_form .composite_component .pp-comp__qty-row::after { display: none; content: none; }
.pp-comp__qty-label { color: var(--color-ink); font-size: var(--text-sm); font-weight: var(--weight-bold); }
/* Composite Products puts 1.5em above a quantity that follows its price (.component_wrap * + .quantity_button). */
.pp .composite_form .composite_component .component_wrap .pp-comp__qty-row .quantity.quantity--steps { height: var(--control-height-sm); margin: 0 0 0 auto; }
.pp .composite_form .composite_component .pp-comp__qty-row .quantity--steps .qty { font-size: var(--text-sm); }
.pp .composite_form .composite_component .component_content .component_wrap::before, .pp .composite_form .composite_component .component_content .component_wrap::after { display: none; content: none; } /* clearfix boxes would take flex cells */
.pp .composite_form .composite_component .component_content .composited_product_details_wrapper, .pp .composite_form .composite_component .component_content .product.content { width: 100%; }
.pp .composite_form .composite_component .component_content .component_wrap .quantity { margin: 0; }
.pp .composite_form .pp-comp--auto select, .pp .composite_form .pp-comp--auto .quantity { pointer-events: none; }
.pp .composite_form .pp-comp--auto .quantity button { display: none; }
.pp-comp__auto-note { margin: var(--space-2) 0 0; color: var(--color-muted); font-size: var(--text-xs); }
.pp .composite_form.single > .pp-setup__help { grid-column: auto; display: flex; flex-direction: column; justify-content: center; gap: var(--space-1); margin: 0; padding: var(--space-3) var(--space-4); border: var(--line); border-radius: var(--radius); background: var(--color-cream); }
.pp-setup__help-title { margin: 0; color: var(--color-ink-strong); font-size: var(--text-sm); font-weight: var(--weight-bold); }
.pp-setup__help-link { color: var(--color-ink-strong); font-size: var(--text-sm); text-decoration: underline; }
/* Variable products with two or more choice groups: one "Choose your …" panel, plain labels (the Elegance reference). */
.pp-choose__title { margin: 0 0 var(--space-3); color: var(--color-ink-strong); font-size: var(--text-base); font-weight: var(--weight-bold); }
.woocommerce .pp .pp-choose__title ~ table.variations th.label label::before { content: none; counter-increment: none; }
/* Required choice: Add to Cart took the customer here (product.js). */
.pp .pp-needs-choice { outline: 2px solid var(--color-red); outline-offset: 3px; border-radius: var(--radius); }
.pp .composite_form .component_description { margin: 0 0 var(--space-2); color: var(--color-muted); font-size: var(--text-xs); }
.pp .composite_form .component_description > :last-child { margin-bottom: 0; }
.pp .composite_form .component_options select { width: 100%; max-width: none; margin: 0; }
/* The add-on dropdowns in the Codex size, so "1.2 m segment — R2,999 each" fits the card. */
.pp .composite_form .composite_component select.component_options_select, .pp .composite_form .composite_component select.pp-comp-proxy { height: var(--control-height-card); min-height: 0; padding-left: var(--space-card-row); font-size: var(--text-link); }
.pp .composite_form .component_options_select_wrapper { margin: 0; }
/* "Available options:" stays the select's label for screen readers only (the card title says the same). */
.pp .composite_form .component_section_title { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
/* The add-on cards in two columns where the column has room; neighbouring cards share one height. */
.pp .composite_form.single { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.woocommerce .pp form.composite_form.single::before, .woocommerce .pp form.composite_form.single::after { display: none; content: none; }
.pp .composite_form.single > * { grid-column: 1 / -1; }
.pp .composite_form.single > .composite_component { grid-column: auto; margin: 0; }
.pp .composite_form .component_content { padding-top: var(--space-card-row); font-size: var(--text-sm); } /* its margin-top is 0 !important */
.pp .composite_form .composited_product_images, .pp .composite_form .composited_product_title_wrapper { display: none; }
.pp .composite_form .composited_product_details_wrapper { display: block; }
.pp .composite_form .composited_product_details_wrapper .details { width: auto; float: none; padding: 0; }
.pp .composite_form .component_wrap .price { margin: 0 0 var(--space-2); color: var(--color-ink-strong); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.pp .composite_form .component_wrap .quantity { margin: 0; }
.pp .composite_form .component_wrap .stock { margin: 0 0 var(--space-2); font-size: var(--text-xs); }
/* Composite Products' own price line stays for its script (which shows it inline), but out of sight: "Your total". */
.pp .composite_form .composite_price { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.pp .composite_form .composite_availability:empty, .pp .composite_form .composite_availability .stock.in-stock { display: none; }
/* "Available on backorder" and the like already show in the stock bar at the top: only a real stop (out of stock)
   shows here (Owl, 2026-10-22). */
.pp .composite_form .composite_availability:not(:has(.out-of-stock)) { display: none !important; } /* its script sets display: block inline */
/* The space under the add-on cards as on the Codex pages: Composite Products' own 32 px above its total area goes. */
.pp .composite_form:not(.paged) .composite_wrap { padding-top: 0; } /* its own rule: .composite_form:not(.paged) .composite_wrap */
.pp .composite_form .composite_wrap > .pp-total, .pp .composite_form .composite_wrap > .bc-delivery { margin-top: var(--space-2); }
.pp .composite_form .composite_message .woocommerce-info { margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-3); font-size: var(--text-xs); }
.pp .composite_form .composite_message .woocommerce-info::before { display: none; }
.pp .composite_form .composite_message ul.msg { margin: 0; padding: 0; list-style: none; }
.pp .composite_form .cp_no_js_msg { display: none; }

/* "Your total" with the delivery line beside it. */
.pp-total { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-1) var(--space-4); align-items: baseline; margin: var(--space-4) 0 var(--space-3); padding-top: var(--space-4); border-top: var(--line); }
.pp-total__label { color: var(--color-ink); font-size: var(--text-sm); }
.pp-total__value { justify-self: end; color: var(--color-ink-strong); font-size: var(--text-lg); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); }
.pp-total__delivery { grid-column: 1 / -1; justify-self: end; margin: 0; color: var(--color-ink); font-size: var(--text-sm); text-align: right; }
.pp-total__delivery--free { color: var(--color-free-ink); font-weight: var(--weight-bold); }
.pp-total__delivery--free-from strong { color: var(--color-free-ink); }

/* The purchase row: quantity · Add to Cart · Get a Quote (the same controls dock at the bottom of the screen). */
.pp-actions { position: relative; }
.pp .pp-purchase .pp-actions__row { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3); align-items: stretch; margin: 0; }
/* Composite Products' clearfix boxes on .composite_button would take grid cells. */
.pp .pp-purchase .pp-actions__row::before, .pp .pp-purchase .pp-actions__row::after { display: none; }
.pp-actions--quote-only { display: block; }
/* No quantity field (WooCommerce prints only a hidden input for a product sold one at a time, e.g. #25675): the two
   buttons share the row equally (Owl, 2026-10-23). */
.pp .pp-purchase .pp-actions__row:not(.is-docked):not(:has(.quantity)) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
/* Stage 3: a refused add shows its notice above the row (product.js); WooCommerce's "View cart" link after the button
   does not show (W5's toast confirms the add). */
.pp-notice { margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-warn-line); border-radius: var(--radius); background: var(--color-warn-tint); color: var(--color-warn-ink); font-size: var(--text-sm); }
.woocommerce .pp .pp-purchase a.added_to_cart { display: none; }
.pp-actions__price { display: none; align-self: center; padding: 0 var(--space-2); color: var(--color-ink-strong); font-size: var(--text-sm); font-weight: var(--weight-bold); white-space: nowrap; }
.woocommerce .pp .pp-actions__row .single_add_to_cart_button, .woocommerce .pp .pp-actions a.shipping-details.button {
	min-height: var(--control-height-lg); margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius);
	font-size: var(--text-sm); font-weight: var(--weight-bold); white-space: normal;
}
.woocommerce .pp .pp-actions__row .single_add_to_cart_button { background: var(--color-red); color: var(--color-on-red); }
.woocommerce .pp .pp-actions__row .single_add_to_cart_button:hover { background: var(--color-red-dark); }
.woocommerce .pp .pp-actions__row .single_add_to_cart_button.disabled, .woocommerce .pp .pp-actions__row .single_add_to_cart_button:disabled,
.woocommerce .pp .pp-actions__row .single_add_to_cart_button.disabled:hover { background: var(--color-red); color: var(--color-on-red); opacity: .55; }
/* "Get a Quote" is the site plugin's button (its classes); here it takes the outline look of the lean row. */
.woocommerce .pp .pp-actions a.shipping-details.button { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--color-ink-strong); background: var(--color-surface); color: var(--color-ink-strong); text-transform: none; }
.woocommerce .pp .pp-actions a.shipping-details.button:hover { background: var(--color-cream); color: var(--color-ink-strong); }
/* "How delivery works" under the delivery line: a small text link (the plugin's button markup). */
.pp-total__how { grid-column: 1 / -1; justify-self: end; margin: 0; }
.woocommerce .pp .pp-total__how a.shipping-details.button {
	display: inline; min-height: 0; margin: 0; padding: 0; border: 0; background: none; color: var(--color-muted);
	font-size: var(--text-xs); font-weight: var(--weight-semibold); text-decoration: underline; text-underline-offset: var(--rule-weight);
}
.woocommerce .pp .pp-total__how a.shipping-details.button:hover { background: none; color: var(--color-red); }
.woocommerce .pp .pp-actions--quote-only a.shipping-details.button { width: 100%; }
.pp .pp-actions__row .quantity.quantity--steps { height: auto; min-height: var(--control-height-lg); }
.pp-actions__row input[type="hidden"] { display: none; }
/* Docked: fixed at the bottom while the row's own place is below the screen (product.js sets left and width). */
.pp .pp-purchase .pp-actions__row.is-docked {
	position: fixed; bottom: 0; z-index: 60; padding: var(--space-3); border: var(--line); border-bottom: 0;
	border-radius: var(--radius) var(--radius) 0 0; background: var(--color-surface); box-shadow: var(--shadow-dock);
}
.pp .pp-purchase .pp-actions__row.is-docked .quantity { display: none; }
.pp .pp-purchase .pp-actions__row.is-docked .pp-actions__price { display: block; }

.pp-reassure { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--space-2) var(--space-5); margin: var(--space-3) 0 0; color: var(--color-muted); font-size: var(--text-xs); }
.pp-reassure__item { display: inline-flex; align-items: center; gap: var(--space-2); }
.pp-reassure__returns span { text-decoration: underline dotted; text-underline-offset: var(--rule-weight); }
.pp-reassure__returns:hover { color: var(--color-red-dark); }
.pp-reassure__returns:hover span { text-decoration-style: solid; }

.pp-unavailable__text { margin: 0 0 var(--space-3); color: var(--color-muted); font-size: var(--text-sm); }

/* "See it in your space." and WhatsApp. */
.woocommerce .pp .pp-help { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); margin-top: var(--space-6); }
.pp-help__text { margin: 0; font-size: var(--text-sm); }
.pp-help__text strong { display: block; color: var(--color-ink-strong); }
.woocommerce .pp a.pp-help__whatsapp { flex: 0 0 auto; background: var(--color-whatsapp); color: var(--color-whatsapp-ink); font-size: var(--text-sm); }
.woocommerce .pp a.pp-help__whatsapp:hover { background: var(--color-whatsapp-dark); color: var(--color-whatsapp-ink); }
.pp-help__whatsapp svg { width: var(--icon-md); height: var(--icon-md); fill: currentColor; stroke: none; }

/* --- Sections ----------------------------------------------------------------------------------------------------- */
.pp-sections { margin-top: var(--space-8); }
.pp-secnav { border-top: var(--line); border-bottom: var(--line); }
.pp-secnav__list { display: flex; gap: var(--space-5); margin-block: 0; padding: 0; overflow-x: auto; list-style: none; scrollbar-width: none; }
.pp-secnav__list::-webkit-scrollbar { display: none; }
.pp-secnav__list a { display: block; padding: var(--space-5) 0; color: var(--color-ink-strong); font-size: var(--text-sm); font-weight: var(--weight-bold); letter-spacing: var(--tracking-label); text-transform: uppercase; white-space: nowrap; }
.pp-secnav__list a:hover { color: var(--color-red); }
.pp-section { padding: var(--space-8) 0 0; scroll-margin-top: var(--space-4); }
.pp-section__title { margin: 0 0 var(--space-5); font-size: var(--text-xl); }
/* The small red capitals line over each section heading (the Codex overline; Owl, 2026-10-23). */
.pp-section__eyebrow { margin-bottom: var(--space-3); color: var(--color-red); }
/* A section heading with an action on the right (the Codex .section-heading-large). */
.pp-section__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-5); margin-bottom: var(--space-5); }
.pp-section__head .pp-section__title { margin: 0; }
/* Divider lines between A closer look, Will it fit and Plan your setup (the Codex pages). */
.pp-section--features + .pp-section--dimensions > .wrap, .pp-section--dimensions + .pp-section--plan > .wrap,
.pp-section--features + .pp-section--plan > .wrap { padding-top: var(--space-8); border-top: var(--line); }
/* The white outline button ("Open dimension drawing ↗"): black outline and text, red on hover (Owl, 2026-10-23). */
.pp-outline-button {
	display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--control-height);
	padding: var(--space-3) var(--space-4); border: 1px solid var(--color-ink-strong); border-radius: var(--radius); background: var(--color-surface);
	color: var(--color-ink-strong); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-label); text-decoration: none; text-transform: uppercase;
}
.pp-outline-button:hover, .pp-outline-button:focus-visible { border-color: var(--color-red); color: var(--color-red); }
.pp-section .accordion { margin: 0; max-width: var(--measure); }

.pp-included { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--space-9); }
.pp-included__text { max-width: 410px; color: var(--color-ink); font-size: var(--text-sm); }
.pp-included__note { max-width: 410px; margin: var(--space-3) 0 0; color: var(--color-muted); font-size: var(--text-sm); }
.pp-included__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-6); margin: 0; padding: 0; list-style: none; align-content: start; }
.pp-included__list li { display: flex; gap: var(--space-3); padding: var(--space-4) 0; border-bottom: var(--line); color: var(--color-ink-strong); font-size: var(--text-sm); }
.pp-included__num { color: var(--color-step); font-variant-numeric: tabular-nums; }
.pp-included__item small { display: block; margin-top: var(--space-1); color: var(--color-muted); font-size: var(--text-xs); }

/* In your space: full width (no container), the picture fills its side with no radius, the copy beside it (the Codex
   .space-section; Owl, 2026-10-23). */
.pp-section--in-your-space { margin-top: var(--space-8); padding-top: 0; }
.pp-space { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); background: var(--color-cream); }
.pp-space__picture { position: relative; min-height: 100%; margin: 0; }
.pp-space__picture img { display: block; width: 100%; height: 100%; min-height: 420px; object-fit: cover; border-radius: 0; }
.pp-space__copy { align-self: center; padding: var(--space-9) 13% var(--space-8) 12%; }
.pp-space__copy .pp-section__title { font-size: var(--text-2xl); }
.pp-space__copy .prose { color: var(--color-ink); font-size: var(--text-sm); }
.pp-space__note { max-width: 320px; margin: var(--space-5) 0 0; color: var(--color-muted); font-size: var(--text-xs); }

.pp-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.pp-features--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pp-features--1 { grid-template-columns: minmax(0, 1fr); max-width: var(--measure); }
.pp-feature__eyebrow { margin-bottom: var(--space-2); }
.pp-feature { padding: var(--space-5); border: var(--line); border-radius: var(--radius); }
.pp-feature__title { margin-bottom: var(--space-2); }
.pp-feature p:last-child { margin: 0; font-size: var(--text-sm); }

.pp-dimensions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-7); align-items: start; }
.pp-dimensions__drawing { margin: 0; padding: var(--space-4); border: var(--line); border-radius: var(--radius); background: var(--color-surface); }
.pp-dimensions__drawing img { width: 100%; height: auto; }
.pp-dimensions__drawing figcaption { margin-top: var(--space-3); }
.pp-measure { margin: 0 0 var(--space-4); }
.pp-measure > div { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: var(--line); font-size: var(--text-sm); }
/* The description light, the measurement bold (Owl, 2026-10-23; the Codex fit table). */
.pp-measure dt { color: var(--color-ink); font-weight: var(--weight-regular); }
.pp-measure dd { margin: 0; color: var(--color-ink-strong); font-weight: var(--weight-semibold); text-align: right; }
/* The helper box under the table (the Codex .fit-note). */
.pp-fit-help { margin: var(--space-5) 0 0; padding: var(--space-4) var(--space-5); border-left: 2px solid var(--color-fit-line); border-radius: var(--radius); background: var(--color-fit-tint); font-size: var(--text-sm); }
.pp-fit-help__title { margin: 0; color: var(--color-ink-strong); font-weight: var(--weight-bold); }
.pp-fit-help__text { color: var(--color-fit-ink); }
.pp-fit-help__text p { margin: var(--space-1) 0 0; }

.pp-video { position: relative; max-width: var(--measure); aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: var(--color-ink-strong); }
.pp-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.pp-description { max-width: var(--measure); }
.pp-specs { max-width: var(--measure); }
.woocommerce .pp .pp-specs table.shop_attributes { margin: 0; border: 0; border-top: var(--line); }
.woocommerce .pp .pp-specs table.shop_attributes th, .woocommerce .pp .pp-specs table.shop_attributes td {
	padding: var(--space-3) var(--space-4) var(--space-3) 0; border: 0; border-bottom: var(--line); background: none; font-size: var(--text-sm); font-style: normal; text-align: left; vertical-align: top;
}
.woocommerce .pp .pp-specs table.shop_attributes th { width: 34%; color: var(--color-ink-strong); font-weight: var(--weight-bold); }
.woocommerce .pp .pp-specs table.shop_attributes td p { margin: 0; padding: 0; }
.woocommerce .pp .pp-specs table.shop_attributes tr { display: table-row; }
.woocommerce .pp .pp-specs table.shop_attributes th, .woocommerce .pp .pp-specs table.shop_attributes td { display: table-cell; }

.pp-related { margin-top: var(--space-8); }
.pp-related .related.products > h2, .pp-related .upsells.products > h2 { margin: 0 0 var(--space-5); font-size: var(--text-xl); }
.pp-related .upsells.products { margin-bottom: var(--space-7); }
.woocommerce .pp-related ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* --- Package content (Stage 5): About sentence, included text, drawing as text, links ------------------------------ */
.pp-about__summary { margin: 0 0 var(--space-3); color: var(--color-ink); font-size: var(--text-sm); }
.pp-included__text { margin-top: var(--space-3); }
.pp-dimensions__text { margin-top: var(--space-3); font-size: var(--text-sm); }
.pp-dimensions__text summary { cursor: pointer; color: var(--color-ink-strong); font-weight: var(--weight-semibold); }
.pp-dimensions__text ul { margin: var(--space-2) 0 0; padding-left: var(--space-4); color: var(--color-muted); }
/* Plan your setup in two columns (the Codex .questions: 1fr 1.2fr, the questions on the right). */
.pp-plan { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--space-9); align-items: start; }
.pp-plan .pp-accordion { max-width: none; }
.pp-plan__intro { margin: 0; max-width: 410px; color: var(--color-ink); font-size: var(--text-sm); }
.pp-plan__manual { margin: var(--space-4) 0 0; }
.pp-plan__links { margin: var(--space-4) 0 0; font-size: var(--text-sm); }
.pp-plan__links > span { margin-right: var(--space-1); color: var(--color-ink-strong); font-weight: var(--weight-semibold); }
.pp-thumb--model .pp-thumb__img { background: var(--color-cream); }

/* --- 360° viewer dialog (R20: the viewer bundle in a frame, loaded on open) -------------------------------------------- */
.pp-viewer { position: relative; aspect-ratio: 4 / 3; max-height: 70vh; border-radius: var(--radius); overflow: hidden; background: var(--color-cream); }
.pp-viewer__frame { display: block; width: 100%; height: 100%; border: 0; }
.pp-viewer__help, .pp-viewer__open { margin: var(--space-3) 0 0; color: var(--color-muted); font-size: var(--text-xs); }
.pp-viewer__fallback { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--color-muted); }
.pp-viewer__fallback summary { cursor: pointer; color: var(--color-ink-strong); }

/* --- Dialogs: lightbox, output calculator ------------------------------------------------------------------------- */
.pp-lightbox .dialog__body { display: flex; flex-direction: column; gap: var(--space-4); }
.pp-lightbox__stage { display: grid; place-items: center; min-height: 0; background: var(--color-surface); }
.pp-lightbox__img { max-width: 100%; max-height: var(--lightbox-height); object-fit: contain; }
.pp-lightbox__nav { display: flex; justify-content: center; align-items: center; gap: var(--space-4); }
.pp-lightbox__count { color: var(--color-muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }

.pp-output__intro, .pp-output__help, .pp-output__limit { font-size: var(--text-sm); }
.pp-output__help, .pp-output__limit { color: var(--color-muted); }
.pp-output__room { margin: 0 0 var(--space-4); padding: 0; border: 0; }
.pp-output__room legend { margin-bottom: var(--space-2); color: var(--color-ink-strong); font-size: var(--text-sm); font-weight: var(--weight-bold); }
.pp-output__inputs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.pp-output__inputs label { display: flex; flex-direction: column; gap: var(--space-1); }
.pp-output__label { display: block; margin-bottom: var(--space-2); color: var(--color-ink-strong); font-weight: var(--weight-bold); }
.pp-output__form .button { width: 100%; margin-top: var(--space-2); }
.pp-output__result { margin: var(--space-5) 0; padding: var(--space-4); border-radius: var(--radius); background: var(--color-cream); }
.pp-output__result[data-fit="covers"] { background: var(--color-free-tint); }
.pp-output__numbers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin-bottom: var(--space-3); }
.pp-output__numbers span { display: block; color: var(--color-muted); font-size: var(--text-xs); }
.pp-output__numbers strong { color: var(--color-ink-strong); font-size: var(--text-lg); }
.pp-output__result h3 { margin: 0 0 var(--space-2); }
.pp-output__method summary { cursor: pointer; font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.pp-output__method p { margin-top: var(--space-2); color: var(--color-muted); font-size: var(--text-sm); }

/* --- Tablet and phone --------------------------------------------------------------------------------------------- */
@media (max-width: 1100px) {
	.pp-top { gap: var(--space-6); }
	.pp-included, .pp-dimensions, .pp-plan { gap: var(--space-6); }
	.pp-included__list { grid-template-columns: 1fr; }
	.pp-space__copy { padding: var(--space-7) 10%; }
	.pp-features--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pp .composite_form.single { grid-template-columns: 1fr; }
	.woocommerce .pp-related ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
	.site-main--product { padding-top: var(--space-4); }
	/* One column, one DOM: the columns and the gallery become "contents", so their parts take the lean order. */
	.pp-top { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
	.pp-col, .pp-gallery { display: contents; }
	.pp-col--buy > * + * { margin-top: 0; }
	/* A long thumbnail row scrolls inside its box; it must not widen the page (min-width of flex items). */
	.pp-gallery__rest, .pp-head, .pp-avail, .pp-about, .pp-purchase, .pp-help, .pp-seals { min-width: 0; max-width: 100%; }
	.pp-stage { order: 1; }
	/* The main image full width, straight under the header (the Codex phone pages; Owl, 2026-10-23). */
	.pp-stage { width: 100vw; max-width: 100vw; margin: calc(-1 * var(--space-4)) 0 0 calc(50% - 50vw); border: 0; border-radius: 0; }
	.pp-seals { order: 2; margin-top: var(--space-3); }
	.pp-gallery__rest { order: 3; }
	.pp-head { order: 4; margin-top: var(--space-5); }
	.pp-avail { order: 5; margin-top: var(--space-4); }
	.pp-about { order: 6; margin-top: var(--space-4); }
	.pp-col--gallery .pp-about { margin-top: var(--space-4); }
	.pp-purchase { order: 7; margin-top: var(--space-4); }
	.pp-help { order: 8; }
	.pp-hooks { order: 9; }
	.pp-seals { padding: var(--space-3); }
	.pp-gallery__actions { flex-wrap: wrap; }
	.pp-gallery__action { min-height: calc(var(--control-height) + var(--space-2)); }
	.pp-thumbs { grid-auto-columns: calc((100% - var(--space-3)) / 2.4); }
	.pp-stage__sale { left: var(--space-3); top: var(--space-3); width: var(--badge-round-phone); height: var(--badge-round-phone); font-size: var(--text-xs); }
	.woocommerce .pp .pp-help { flex-direction: column; align-items: stretch; margin-top: var(--space-5); }
	.pp .pp-help__whatsapp { width: 100%; }
	.pp-sections { margin-top: var(--space-7); }
	.pp-secnav__list { gap: var(--space-4); }
	.pp-secnav__list a { padding: var(--space-4) 0; font-size: var(--text-xs); }
	.pp-section { padding-top: var(--space-7); }
	.pp-included, .pp-space, .pp-dimensions, .pp-plan { grid-template-columns: 1fr; }
	.pp-included, .pp-plan { gap: var(--space-4); }
	.pp-section--in-your-space { margin-top: var(--space-7); }
	.pp-space__picture img { height: auto; min-height: 0; aspect-ratio: 1.5; }
	.pp-space__copy { padding: var(--space-6) 6% var(--space-7); }
	.pp-space__note { max-width: none; }
	.pp-section__head { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
	.pp-features, .pp-features--2, .pp-features--3 { grid-template-columns: 1fr; }
	.woocommerce .pp-related ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pp-output__inputs { grid-template-columns: 1fr; }
	.pp .pp-purchase .pp .pp-purchase .pp-actions__row.is-docked { border-radius: 0; border-inline: 0; }
}
@media (max-width: 480px) {
	.pp .pp-purchase .pp-actions__row { gap: var(--space-2); }
	.woocommerce .pp .pp-actions__row .single_add_to_cart_button, .woocommerce .pp .pp-actions a.shipping-details.button { padding-inline: var(--space-2); }
	.pp-reassure { column-gap: var(--space-4); }
	.pp-about { padding: var(--space-3) var(--space-4); }
	.pp-about__list > div { grid-template-columns: 1fr; gap: 0; }
}

/* --- Get a Quote in the Codex design (template-parts/product/quote.php; Ninja Form 19 inside; Owl, 22 and 23 Oct) -- */
/* The head: the small red line over "Get a Quote" (product.js moves it there), no line under the head. */
.pp-quote .dialog__head { align-items: flex-start; padding: var(--space-6) var(--space-6) 0; border-bottom: 0; }
.pp-quote__heading { flex: 1 1 auto; min-width: 0; }
.pp-quote .dialog__title { font-size: var(--text-xl); }
.pp-quote .dialog__body { padding: var(--space-3) var(--space-6) var(--space-6); }
.pp-quote__eyebrow { margin: 0 0 var(--space-2); color: var(--color-red); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; }
.pp-quote__intro { margin: 0 0 var(--space-5); color: var(--color-muted); font-size: var(--text-sm); }
.pp-quote .nf-form-cont .nf-form-title, .pp-quote .nf-form-cont .nf-before-form-content { display: none; }
/* Every field full width, its label above it (also the postal code or city field). */
.pp-quote .nf-form-cont .nf-field-container { margin: 0 0 var(--space-4); }
.pp-quote .nf-form-cont .field-wrap { display: block; }
.pp-quote .nf-form-cont .nf-field-label, .pp-quote .nf-form-cont .nf-field-element { width: 100%; max-width: none; margin: 0; padding: 0; float: none; text-align: left; }
.pp-quote .nf-form-cont .nf-field-label { margin-bottom: var(--space-2); }
.pp-quote .nf-form-cont .nf-field-label label { color: var(--color-ink-strong); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.pp-quote .nf-form-cont input[type="text"], .pp-quote .nf-form-cont input[type="email"], .pp-quote .nf-form-cont input[type="tel"], .pp-quote .nf-form-cont textarea {
	width: 100%; max-width: none; min-height: var(--control-height-lg); padding: 0 var(--space-3); border: var(--line); border-radius: var(--radius); background: var(--color-surface); color: var(--color-ink-strong); font-size: var(--text-sm);
}
.pp-quote .nf-form-cont input[type="button"], .pp-quote .nf-form-cont input[type="submit"] {
	width: 100%; min-height: var(--control-height-lg); border: 0; border-radius: var(--radius); background: var(--color-red); color: var(--color-on-red); font-size: var(--text-sm); font-weight: var(--weight-bold); cursor: pointer;
}
.pp-quote .nf-form-cont input[type="button"]:hover, .pp-quote .nf-form-cont input[type="submit"]:hover { background: var(--color-red-dark); }
/* The site plugin lays the form out in two columns from 768 px (name, email, postal code at half width each). The
   postal code or city field takes the full width, as on the Codex dialog (Owl, 2026-10-23); its ID keeps it above the
   plugin's rule. Hidden fields take no space. */
.pp-quote #nf-form-19-cont nf-fields-wrap nf-field:nth-child(3) { width: 100%; }
.pp-quote .nf-form-cont .hidden-container { margin: 0; }
.pp-quote #nf-form-19-cont .nf-form-content { margin-top: 0; }
/* No space under the submit button: the hidden fields' empty limit lines (5 px each) and the field gap went before the
   "OR" line's own gap (60 px on desktop; Owl, 2026-10-23). */
.pp-quote .nf-form-cont .submit-container { margin-bottom: 0; }
.pp-quote .nf-form-cont .nf-input-limit { margin: 0; }
/* From 768 px the plugin's flex rows put the hidden fields (the click ID) on a new row with a 10 px gap. Their values
   still go with the form: Ninja Forms reads them from its field models. */
.pp-quote #nf-form-19-cont nf-fields-wrap nf-field:has(> .hidden-container) { display: none; }
/* "Your selected setup": open, between two lines (the Codex .quote-configuration). */
.pp-quote__setup { margin: 0 0 var(--space-5); padding: var(--space-4) 0; border-top: var(--line); border-bottom: var(--line); }
.pp-quote__setup-title { cursor: pointer; color: var(--color-muted); font-size: var(--text-sm); }
.pp-quote__setup-list { margin: var(--space-3) 0 0; padding: 0; list-style: none; color: var(--color-ink); font-size: var(--text-sm); }
.pp-quote__setup-name { color: var(--color-ink-strong); font-weight: var(--weight-bold); }
/* The Codex gap: 18 px from the submit button to the "OR" line and from the line to WhatsApp (.quote-divider). */
.pp-quote__or { display: flex; align-items: center; gap: var(--space-4); margin: 18px 0; color: var(--color-muted); font-size: var(--text-xs); text-transform: uppercase; }
.pp-quote__or::before, .pp-quote__or::after { content: ""; flex: 1; border-top: var(--line); }
.woocommerce .pp a.pp-quote__chat { display: flex; width: 100%; min-height: var(--control-height-lg); justify-content: center; }
.pp-quote__note { margin: var(--space-3) 0 0; color: var(--color-muted); font-size: var(--text-xs); text-align: center; }
@media (max-width: 760px) {
	/* A centred panel with a 16 px gap at each side and round corners, as the Codex dialog (width: calc(100% - 32px)),
	   not the shared bottom sheet (Owl, 2026-10-23). */
	.pp-quote.dialog { width: calc(100% - 2 * var(--space-4)); max-width: 640px; max-height: 90dvh; margin: auto; border-radius: var(--radius); }
	.pp-quote .dialog__panel { max-height: 90dvh; }
	.pp-quote .dialog__head { padding: var(--space-5) var(--space-5) 0; }
	.pp-quote .dialog__body { padding: var(--space-3) var(--space-5) var(--space-6); }
	.pp-quote .nf-form-cont input[type="text"], .pp-quote .nf-form-cont input[type="email"], .pp-quote .nf-form-cont input[type="tel"] { font-size: var(--text-input); }
}
@media (max-width: 520px) {
	/* The Codex padding on phones (#quote { padding: 30px 22px }). */
	.pp-quote .dialog__head { padding: 30px 22px 0; }
	.pp-quote .dialog__body { padding: var(--space-3) 22px 30px; }
}

/* Zendesk's Help button (its launcher frame) sits just above the floating purchase row while the row floats, and goes
   back to its corner when the row settles (product.js sets the class and the row's height; Owl, 2026-10-22). */
iframe#launcher { transition: bottom .2s ease; }
html.pp-docked iframe#launcher { bottom: var(--pp-dock-h, 0px) !important; }