/*!
 * pdp.css — eBike single-product page (Phase 1). Brand look.
 *
 * Restyles the EXISTING Bricks/WooCommerce single-product elements (template
 * #279) and styles the custom sections injected by inc/peb-pdp.php +
 * relocated by js/peb-pdp.js. Replaces the legacy product-ebike.css.
 *
 * Boundary (DS §9.1): real WooCommerce data/flow stays native (gallery, price,
 * variation form, add-to-cart, stock, attribute table) — we only style + move.
 *
 * Scoped under .single-product so nothing leaks; enqueued only on eBike products.
 */

/* ================================================================== *
 *  0. Layout shell — 2-column buy box (#main-container)
 * ================================================================== */

.single-product #main-container {
	/* Grid (not flex) with minmax(0,…) so wide WooCommerce content can't blow the
	   columns out past the container — flex %-bases were overflowing. */
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: 42px;
	align-items: start;
	max-width: 1180px;
	width: 100%;
	margin: 0 auto;
	padding: 22px 20px 8px;
}
.single-product #Gallery-Container {
	min-width: 0;
	max-width: 560px;
	position: sticky;
	top: 96px;
}
.single-product #Title-Container {
	min-width: 0;
	display: flex;
	flex-direction: column;
}

/* The injected sections + payload wrapper sit full-width below the buy box. */
.single-product .peb-pdp-extras { width: 100%; }
.single-product .peb-pdp-extras .wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }

/* Hide the payload wrapper's buy-box pieces *while still inside it* (pre-move,
   no flash). Once js/peb-pdp.js relocates them out, the selector stops matching
   and they show. The SEO content (.peb-pdp-extras) stays visible meanwhile. */
#peb-pdp-payload > .peb-pdp-options,
#peb-pdp-payload > .peb-pdp-trust,
#peb-pdp-payload > .pdp-sticky-buy { display: none; }

/* Leftovers from the old template that the mockup doesn't use:
   - #features-and-description-containers : the long-description prose (Overview replaces it).
     js/peb-pdp.js has already moved the real spec table (#features-list) out into
     the Specs section before this hides the now-empty container.
   - #accessories-carousel-section : the 3 legacy related-product carousels
     (Complete Your Setup / All Playa eBikes / Other Playa Accessories) — replaced by
     the cleaner "Complete your ride" cross-sell + "Compare all 3" CTA.
   - #spg-* : empty duplicate containers from an earlier template iteration. */
.single-product #features-and-description-containers,
.single-product #Description-Container,
.single-product #accessories-carousel-section,
.single-product #spg-left-cont,
.single-product #spg-right-cont { display: none !important; }

/* ================================================================== *
 *  1. Gallery (native WooCommerce gallery, restyled)
 * ================================================================== */

.single-product #product-gallery .woocommerce-product-gallery { margin: 0; }
.single-product .woocommerce-product-gallery__wrapper { margin: 0; }
.single-product .woocommerce-product-gallery__image,
.single-product .woocommerce-product-gallery .flex-viewport {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	overflow: hidden;
}
.single-product .woocommerce-product-gallery__image:first-child { /* main image */ }
.single-product .woocommerce-product-gallery__image img,
.single-product .woocommerce-product-gallery .flex-viewport img {
	aspect-ratio: 4 / 3.2;
	object-fit: contain;
	padding: 16px;
	width: 100%;
	background: #fff;
}
/* Thumbnails row */
.single-product .flex-control-thumbs,
.single-product .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:not(:first-child) { }
.single-product .flex-control-thumbs {
	display: flex; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; flex-wrap: wrap;
}
.single-product .flex-control-thumbs li { width: 74px; height: 74px; margin: 0; }
.single-product .flex-control-thumbs img {
	width: 74px; height: 74px; object-fit: cover;
	border: 2px solid var(--border); border-radius: 12px; cursor: pointer; opacity: 1;
}
.single-product .flex-control-thumbs img.flex-active,
.single-product .flex-control-thumbs .flex-active img { border-color: var(--accent); }
.single-product .woocommerce-product-gallery__trigger { display: none; } /* native zoom magnifier */

/* ================================================================== *
 *  2. Info column — eyebrow, title, price, options, key features, cart
 * ================================================================== */

.single-product .crumbcat {
	order: -2;
	font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
	color: var(--accent-strong); margin: 0 0 4px;
}
.single-product #product-title,
.single-product #Title-Container h1.product_title {
	order: -1;
	font-size: 30px; line-height: 1.14; margin: 0 0 10px; color: var(--ink);
	font-family: var(--hfont);
}

/* Hide the native range price + native variation price/availability — our
   .pdp-price (driven by the rent/buy cards) is the single source shown. */
.single-product #single_product_page_price,
.single-product .woocommerce-variation-price,
.single-product .woocommerce-variation-availability,
.single-product .single_variation .price { display: none !important; }

/* Our price block */
.single-product .pdp-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 4px; }
.single-product .pdp-price .now { font-size: 36px; font-weight: 900; font-family: var(--hfont); color: var(--ink); }
.single-product .pdp-price .was { font-size: 18px; color: var(--muted); text-decoration: line-through; }
.single-product .pdp-price .save {
	font-size: 13px; font-weight: 800; color: var(--ok); background: var(--ok-bg);
	padding: 3px 9px; border-radius: 999px;
}
.single-product .pdp-price .save:empty { display: none; }
.single-product .p-unit { color: var(--muted); font-size: 13.5px; font-weight: 600; margin: 0 0 18px; }

/* Option group (rent/buy cards) */
.single-product .opt-group { margin: 0 0 18px; }
.single-product .opt-group .lab {
	font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
	color: var(--muted); margin-bottom: 8px; display: flex; gap: 8px;
}
.single-product .opt-group .lab .sel { color: var(--ink); text-transform: none; letter-spacing: 0; }
.single-product .opt-cards { display: flex; gap: 10px; flex-wrap: wrap; }
.single-product .opt-card {
	flex: 1 1 0; min-width: 150px;
	border: 1.5px solid var(--border); background: var(--surface); border-radius: 12px;
	padding: 11px 16px; cursor: pointer; font-weight: 700; font-size: 14.5px; min-height: 50px;
	display: flex; flex-direction: column; justify-content: center; gap: 1px; text-align: left;
	font-family: var(--bfont); color: var(--ink); transition: border-color .12s, background .12s;
}
.single-product .opt-card small { font-weight: 600; color: var(--muted); font-size: 12px; }
.single-product .opt-card.active {
	border-color: var(--accent);
	background: color-mix(in srgb, var(--accent) 10%, var(--surface));
	box-shadow: 0 0 0 1px var(--accent) inset;
}
.single-product .opt-card:hover { border-color: var(--ink); }

/* Native key features (short description = ACF single_product_features) */
.single-product #product_opener {
	order: 3;
	background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius);
	padding: 12px 16px; margin: 0 0 16px; font-size: 15px; line-height: 1.7;
}
.single-product #product_opener p { margin: 0; }

/* ----- WooCommerce variation form / add-to-cart ----- */
.single-product form.variations_form { order: 4; margin: 0; }
.single-product .variations,
.single-product .variations_form .reset_variations,
.single-product .single_variation_wrap .woocommerce-variation-description { display: none !important; }
.single-product .woocommerce-variation-add-to-cart {
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; opacity: 1 !important;
}
.single-product .woocommerce-variation-add-to-cart.woocommerce-variation-add-to-cart-disabled { opacity: .55 !important; }
/* Assembly add-on (real WooCommerce add-on) — full-width row above qty+button */
.single-product .product-addon-field {
	flex: 1 1 100%; order: -1; display: flex; align-items: center; gap: 8px;
	background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius);
	padding: 10px 14px; font-size: 14px; font-weight: 600; margin: 0;
}
.single-product .product-addon-field label { margin: 0; cursor: pointer; }
.single-product .product-addon-field br { display: none; }
/* hidden form plumbing must not occupy the flex row */
.single-product .woocommerce-variation-add-to-cart > input[type="hidden"],
.single-product .woocommerce-variation-add-to-cart .variation_id { display: none; }
/* native qty +/- spans (we add our own .peb-qbtn) */
.single-product .quantity .action.plus,
.single-product .quantity .action.minus { display: none; }

.single-product .quantity {
	display: inline-flex; align-items: center;
	border: 1.5px solid var(--border); border-radius: 999px; overflow: hidden; background: var(--surface);
}
.single-product .quantity .qty {
	width: 46px; text-align: center; border: 0; background: transparent;
	font-size: 16px; font-weight: 800; color: var(--ink); -moz-appearance: textfield;
}
.single-product .quantity .qty::-webkit-outer-spin-button,
.single-product .quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* +/- buttons injected by js/peb-pdp.js */
.single-product .quantity .peb-qbtn {
	width: 44px; height: 50px; border: 0; background: var(--surface);
	font-size: 22px; line-height: 1; cursor: pointer; color: var(--ink);
}
.single-product .quantity .peb-qbtn:hover { background: var(--surface-2); }

/* The Bricks "Product Add to Cart" ELEMENT wrapper (div#single_add_to_cart_button,
   which confusingly also carries the .single_add_to_cart_button class) had an
   orange background + padding from the old design — neutralise it. */
.single-product div.brxe-product-add-to-cart {
	background: transparent !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
}
/* The REAL add-to-cart button (tag selector beats the wrapper div). */
.single-product button.single_add_to_cart_button {
	flex: 1; display: inline-flex; align-items: center; justify-content: center;
	background: var(--accent) !important; color: var(--accent-ink) !important; border: 0; border-radius: 999px;
	font-weight: 800; font-size: 16.5px; padding: 14px 28px; cursor: pointer; min-height: 50px;
	font-family: var(--bfont); transition: filter .15s; float: none; text-transform: none; width: auto;
}
.single-product button.single_add_to_cart_button:hover { filter: brightness(1.06); }
.single-product button.single_add_to_cart_button:disabled { opacity: .5; cursor: not-allowed; }

/* Native stock line — hidden; our .avail chip carries the real quantity. */
.single-product #single_product_stock_left { display: none; }
.single-product .woocommerce-variation .wc-no-matching-variations { font-size: 13px; color: var(--muted); }

/* ================================================================== *
 *  3. Trust block (availability, confirm, pickup, assurance, policy)
 * ================================================================== */

.single-product .peb-pdp-trust { order: 6; margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.single-product .avail {
	display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
	font-size: 13px; font-weight: 700; color: var(--ok); background: var(--ok-bg);
	padding: 6px 12px; border-radius: 999px; margin: 0;
}
.single-product .avail .d { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }

.single-product .reserve-confirm {
	display: none; align-items: center; gap: 12px;
	background: var(--ok-bg); border: 1px solid var(--ok); border-radius: var(--radius);
	padding: 12px 16px; font-size: 14px;
}
.single-product .reserve-confirm.show { display: flex; }
.single-product .reserve-confirm .rc-ico {
	width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--ok); color: #fff;
	display: grid; place-items: center; font-weight: 900;
}
.single-product .reserve-confirm .rc-body { display: flex; flex-direction: column; line-height: 1.35; }
.single-product .reserve-confirm .rc-sub { color: var(--muted); font-size: 12.5px; }
.single-product .reserve-confirm .rc-link { margin-left: auto; color: var(--accent-strong); font-weight: 700; text-decoration: none; white-space: nowrap; }

.single-product .fulfill {
	border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; background: var(--surface);
}
.single-product .fulfill-row { display: flex; gap: 10px; font-size: 13.5px; line-height: 1.5; }
.single-product .fulfill-row .fi { flex: none; }
.single-product .fulfill-row .muted { color: var(--muted); }

.single-product .assurance { display: flex; flex-wrap: wrap; gap: 8px; }
.single-product .assurance .chip {
	background: var(--surface-2); border: 1px solid var(--border); padding: 7px 12px;
	border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--ink);
}
.single-product .policy-link { font-size: 13px; font-weight: 700; color: var(--accent-strong); text-decoration: none; align-self: flex-start; }
.single-product .policy-link:hover { text-decoration: underline; }

/* ================================================================== *
 *  4. Sticky reserve bar (desktop/tablet only, >760px)
 * ================================================================== */

.pdp-sticky-buy {
	position: fixed; left: 0; right: 0; top: 0; z-index: 950;
	background: color-mix(in srgb, var(--surface) 96%, transparent);
	backdrop-filter: saturate(140%) blur(8px);
	border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm);
	transform: translateY(-105%); transition: transform .22s ease;
}
.pdp-sticky-buy.show { transform: translateY(0); }
.pdp-sticky-buy .in {
	max-width: 1180px; margin: 0 auto; padding: 10px 20px;
	display: flex; align-items: center; gap: 14px;
}
.pdp-sticky-buy .sb-thumb img { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; display: block; }
.pdp-sticky-buy .sb-name { font-weight: 800; font-size: 15px; color: var(--ink); }
.pdp-sticky-buy .sb-price { color: var(--muted); font-weight: 600; font-size: 14px; }
.pdp-sticky-buy .sb-price strong { color: var(--ink); font-weight: 900; }
.pdp-sticky-buy .sb-cta { margin-left: auto; }

/* ================================================================== *
 *  5. Sticky in-page TOC
 * ================================================================== */

.single-product .pdp-toc {
	position: sticky; top: 64px; z-index: 80; margin: 6px 0 0;
	background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(6px);
	border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.single-product .pdp-toc .in {
	max-width: 1180px; margin: 0 auto; padding: 0 20px;
	display: flex; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.single-product .pdp-toc a {
	padding: 14px 12px; font-weight: 700; font-size: 14.5px; color: var(--muted);
	white-space: nowrap; text-decoration: none; border-bottom: 3px solid transparent;
}
.single-product .pdp-toc a:hover { color: var(--ink); }
.single-product .pdp-toc a.active { color: var(--ink); border-bottom-color: var(--accent); }

/* ================================================================== *
 *  6. Content sections (Overview / Specs / Included / FAQ / Cross-sell)
 * ================================================================== */

.single-product .pdp-section { padding: 36px 0; border-bottom: 1px solid var(--border); scroll-margin-top: 120px; }
.single-product .pdp-section h2 { font-size: 24px; margin: 0 0 16px; color: var(--ink); font-family: var(--hfont); }
.single-product .pdp-section .lead { color: var(--muted); font-size: 16px; max-width: 62ch; }
.single-product .pdp-section .lead p { margin: 0 0 10px; }

/* Overview callouts */
.single-product .feat-callouts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 20px; }
.single-product .callout { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; }
.single-product .callout .ic { font-size: 22px; }
.single-product .callout h3 { font-size: 16px; margin: 8px 0 4px; color: var(--ink); }
.single-product .callout p { font-size: 14px; color: var(--muted); margin: 0; }

/* Spec table (real WooCommerce attributes, restyled to a 2-col definition grid) */
.single-product .spec-host .woocommerce-product-attributes {
	width: 100%; border: 0; border-collapse: collapse;
	display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px;
}
.single-product .spec-host .woocommerce-product-attributes tbody { display: contents; }
.single-product .spec-host .woocommerce-product-attributes-item {
	display: grid; grid-template-columns: 1fr auto; gap: 0 16px; align-items: baseline;
	border-bottom: 1px solid var(--border);
}
.single-product .spec-host .woocommerce-product-attributes-item th,
.single-product .spec-host .woocommerce-product-attributes-item td {
	border: 0; padding: 11px 2px; font-size: 14.5px; background: transparent;
}
.single-product .spec-host .woocommerce-product-attributes-item th { color: var(--muted); font-weight: 600; text-align: left; }
.single-product .spec-host .woocommerce-product-attributes-item td { font-weight: 700; text-align: right; color: var(--ink); }
.single-product .spec-host .woocommerce-product-attributes-item p { margin: 0; }
/* The buy-or-rent variation attribute is not a real spec — hide it. */
.single-product .spec-host .woocommerce-product-attributes-item--attribute_pa_buy-or-rent { display: none; }

/* What's included */
.single-product .incl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px; }
.single-product .incl li { display: flex; gap: 12px; align-items: flex-start; }
.single-product .incl .incl-ic {
	width: 34px; height: 34px; flex: none; border-radius: 9px; background: var(--ok-bg); color: var(--ok);
	display: grid; place-items: center; font-weight: 900; font-size: 16px;
}
.single-product .incl .incl-tx { display: flex; flex-direction: column; line-height: 1.4; }
.single-product .incl .incl-tx strong { color: var(--ink); font-size: 14.5px; }
.single-product .incl .incl-tx .muted { color: var(--muted); font-size: 13px; }

/* FAQ accordions */
.single-product .pdp-faq details { border-bottom: 1px solid var(--border); }
.single-product .pdp-faq summary {
	cursor: pointer; list-style: none; padding: 16px 30px 16px 2px; position: relative;
	font-weight: 700; font-size: 16px; color: var(--ink);
}
.single-product .pdp-faq summary::-webkit-details-marker { display: none; }
.single-product .pdp-faq summary::after {
	content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
	font-size: 22px; font-weight: 400; color: var(--accent-strong);
}
.single-product .pdp-faq details[open] summary::after { content: "−"; }
.single-product .pdp-faq .ans { padding: 0 2px 16px; color: var(--muted); font-size: 15px; max-width: 70ch; }
.single-product .pdp-faq .ans p { margin: 0 0 8px; }

/* Cross-sell "Complete your ride" */
.single-product .acc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.single-product .acc {
	background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
	overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-sm);
}
.single-product .acc-img { display: block; aspect-ratio: 1 / 1; background: #fff; }
.single-product .acc-img img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.single-product .acc-body { padding: 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.single-product .acc-body h3 { font-size: 14.5px; margin: 0; line-height: 1.3; }
.single-product .acc-body h3 a { text-decoration: none; color: var(--ink); }
.single-product .acc-body .pr { font-size: 16px; font-weight: 900; font-family: var(--hfont); color: var(--ink); }
.single-product .acc-body .pr del { color: var(--muted); font-weight: 600; font-size: 13px; }
.single-product .acc-body .pr ins { text-decoration: none; }
.single-product .acc-body .btn { margin-top: auto; }

.single-product .compare-cta {
	margin-top: 22px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg);
	padding: 24px; display: flex; gap: 18px; align-items: center; justify-content: space-between; flex-wrap: wrap;
}
.single-product .compare-cta h3 { font-size: 19px; margin: 0 0 4px; color: var(--ink); }
.single-product .compare-cta p { font-size: 14px; color: var(--muted); margin: 0; }

/* ================================================================== *
 *  7. Responsive
 * ================================================================== */

@media (max-width: 1000px) {
	.single-product #main-container { grid-template-columns: 1fr; gap: 24px; }
	.single-product #Gallery-Container { position: static; max-width: 560px; margin: 0 auto; width: 100%; }
	.single-product .woocommerce-product-gallery__image img { aspect-ratio: 16 / 11; max-width: 560px; margin: 0 auto; }
	.single-product .feat-callouts { grid-template-columns: repeat(2, 1fr); }
	.single-product .acc-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 761px) {
	/* On the PDP, the top sticky reserve bar carries the CTA above 760 — hide the
	   global bottom mobile CTA so there's never a double CTA. */
	body.single-product .mobile-cta { display: none !important; }
}

@media (max-width: 760px) {
	.single-product #product-title { font-size: 24px; }
	.single-product .pdp-price .now { font-size: 30px; }
	.single-product .pdp-section { padding: 28px 0; }
	.single-product .feat-callouts { grid-template-columns: 1fr; }
	.single-product .incl { grid-template-columns: 1fr; }
	.single-product .spec-host .woocommerce-product-attributes { grid-template-columns: 1fr; gap: 0; }
	.single-product .acc-grid { grid-template-columns: repeat(2, 1fr); }
	.single-product .pdp-toc { top: 60px; }
	.pdp-sticky-buy { display: none !important; } /* mobile uses the bottom CTA */
	.single-product .compare-cta { flex-direction: column; align-items: flex-start; }
	.single-product .compare-cta .btn { width: 100%; }
}