/* Plumbing Products — product page layout (3 Oct 2026). Presentation only. */
:root { --pp-navy: #0a3d62; --pp-ink: #1e293b; --pp-muted: #556070; --pp-line: #e5e9ef; --pp-soft: #f6f8fb; --pp-blue: #046bd2; }

/* Summary hierarchy */
.single-product .woocommerce-breadcrumb { font-size: 13px !important; line-height: 1.5; margin-bottom: 14px; }
.single-product .pp-brand-eyebrow { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pp-navy); text-decoration: none; margin: 2px 0 6px; }
.single-product .pp-brand-eyebrow:hover { text-decoration: underline; }
.single-product .summary .product_title { font-size: clamp(24px, 2.2vw, 32px); font-weight: 700; line-height: 1.22; color: var(--pp-ink); margin: 0 0 10px; }
.single-product .summary > .price, .single-product .summary .astra-shop-summary-wrap > .price { font-size: 26px; margin: 6px 0 14px; }
.single-product .summary .price .ast-woo-shipping-text, .single-product .summary .price small { font-size: 14px; color: var(--pp-muted); }

/* Short description: headings become small labels, text easy to scan */
.single-product .woocommerce-product-details__short-description { font-size: 16px; line-height: 1.6; color: var(--pp-ink); margin: 6px 0 18px; padding: 14px 16px; background: var(--pp-soft); border-radius: 8px; }
.single-product .woocommerce-product-details__short-description :is(h1,h2,h3,h4,h5,h6) { font-size: 14px !important; line-height: 1.4; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--pp-navy); margin: 0 0 8px; }
.single-product .woocommerce-product-details__short-description p { margin: 0 0 6px; }
.single-product .woocommerce-product-details__short-description ul { margin: 0 0 0 1.1em; }

/* Add to cart: big, full width */
.single-product .summary form.cart:not(.variations_form), .single-product .summary .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
.single-product .summary .single_add_to_cart_button { flex: 1 1 140px; min-height: 52px; font-size: 17px !important; font-weight: 700; border-radius: 8px !important; }
.single-product .summary form.cart .quantity { display: flex; align-items: stretch; flex: 0 0 auto; }
.single-product .summary form.cart .quantity .qty, .single-product .summary form.cart .quantity a { min-height: 52px; }
.single-product .summary .woocommerce-variation-price .price { font-size: 22px; }

/* Trust panel */
.pp-trust { list-style: none; margin: 18px 0 8px; padding: 14px 16px; border: 1px solid var(--pp-line); border-radius: 10px; display: grid; gap: 10px; }
.pp-trust li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.45; color: var(--pp-ink); margin: 0; }
.pp-trust svg { flex: 0 0 20px; color: var(--pp-navy); margin-top: 1px; }
.pp-trust a { color: var(--pp-blue); }

/* Product meta (SKU / categories / brand): quieter */
.single-product .product_meta { font-size: 13.5px; color: var(--pp-muted); border-top: 1px solid var(--pp-line); padding-top: 12px; }

/* Description: normal heading sizes, readable line length */
.single-product .woocommerce-Tabs-panel, .single-product .ast-accordion-content { font-size: 16px; line-height: 1.7; }
.single-product .woocommerce-Tabs-panel :is(h1,h2), .single-product .ast-accordion-content :is(h1,h2) { font-size: 22px !important; line-height: 1.35; margin: 1.2em 0 .5em; }
.single-product .woocommerce-Tabs-panel :is(h3,h4), .single-product .ast-accordion-content :is(h3,h4) { font-size: 18px !important; line-height: 1.4; margin: 1.1em 0 .4em; }
.single-product .woocommerce-Tabs-panel :is(h5,h6), .single-product .ast-accordion-content :is(h5,h6) { font-size: 16px !important; }
.single-product .woocommerce-Tabs-panel > *, .single-product .ast-accordion-content > * { max-width: 78ch; }
.single-product .woocommerce-Tabs-panel img, .single-product .ast-accordion-content img { max-width: 100%; height: auto; border-radius: 6px; }

/* Spec sheets / PDFs as download buttons */
.single-product .woocommerce-Tabs-panel a[href$=".pdf"], .single-product .ast-accordion-content a[href$=".pdf"] { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; margin: 4px 0; border: 1px solid var(--pp-line); border-radius: 8px; background: var(--pp-soft); font-weight: 600; text-decoration: none; }
.single-product .woocommerce-Tabs-panel a[href$=".pdf"]::before, .single-product .ast-accordion-content a[href$=".pdf"]::before { content: "⤓"; font-weight: 700; }

/* Delivery & returns section */
.pp-delivery { margin: 0 0 12px 1.1em; } .pp-delivery li { margin-bottom: 8px; }

/* Gallery: soft frame */
.single-product .woocommerce-product-gallery .flex-viewport, .single-product .woocommerce-product-gallery__image img { border-radius: 10px; }
.single-product .woocommerce-product-gallery .flex-control-thumbs img { border-radius: 6px; border: 1px solid var(--pp-line); }

/* Product cards (related / upsells / archives) */
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 15px; line-height: 1.35; }
.woocommerce ul.products li.product .price { font-weight: 700; }

/* Stop the gallery jumping while WooCommerce's slider initialises (CLS):
   before init (no .flex-viewport yet) show only the first image and reserve the thumbnail row. */
.woocommerce-product-gallery:not(:has(.flex-viewport)) > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:nth-child(n+2) { display: none !important; } /* !important: WooCommerce's no-JS thumbnail rule is more specific */
/* Reserve the thumbnail rows before the slider builds them: 4 thumbs per row, row = 25% of gallery width + 4px (padding % = width) */
.woocommerce-product-gallery:not(:has(.flex-viewport)):has(.woocommerce-product-gallery__image + .woocommerce-product-gallery__image)::after { content: ""; display: block; height: 0; padding-top: calc(25% + 4px); }
.woocommerce-product-gallery:not(:has(.flex-viewport)):has(.woocommerce-product-gallery__image:nth-child(5))::after { padding-top: calc(50% + 8px); }
.woocommerce-product-gallery:not(:has(.flex-viewport)):has(.woocommerce-product-gallery__image:nth-child(9))::after { padding-top: calc(75% + 12px); }
.pp-trust a { text-decoration: underline; text-underline-offset: 2px; }
/* Thumbnails are injected by JS without width/height: fix their box so the row doesn't grow as they load. */
.woocommerce-product-gallery .flex-control-thumbs img { aspect-ratio: 1 / 1; width: 100%; height: auto; object-fit: contain; background: #fff; }
/* Never show the trust panel inside Astra's floating sticky add-to-cart bar. */
.ast-sticky-add-to-cart .pp-trust { display: none !important; }

/* Sticky bar: cart button with item count + "Added ✓" flash */
.ast-sticky-add-to-cart .ast-sticky-add-to-cart-action-wrap { display: flex; align-items: center; gap: 10px; }
.ast-sticky-add-to-cart .pp-sticky-cart { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 46px; width: 46px; height: 44px; padding: 0; border: 1px solid #c9d3df; border-radius: 8px; background: #fff; color: #0a3d62; cursor: pointer; }
.ast-sticky-add-to-cart .pp-sticky-cart:hover, .ast-sticky-add-to-cart .pp-sticky-cart:focus-visible { border-color: #0a3d62; outline: none; box-shadow: 0 0 0 2px rgba(10,61,98,.2); }
.ast-sticky-add-to-cart .pp-sticky-cart-count { position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #0a7a3d; color: #fff; font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; }
.ast-sticky-add-to-cart .single_add_to_cart_button.pp-added { background: #0a7a3d !important; border-color: #0a7a3d !important; }

/* Puretec enrichment: key features list + specifications table + download link */
.single-product .woocommerce-product-details__short-description .pp-key-features-title { margin: 0 0 6px; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: var(--pp-navy); }
.single-product .pp-key-features { list-style: none; margin: 0; padding: 0; }
.single-product .pp-key-features li { position: relative; padding-left: 26px; margin: 0 0 8px; }
.single-product .pp-key-features li::before { content: ""; position: absolute; left: 2px; top: .35em; width: 14px; height: 8px; border-left: 2.5px solid #0a7a3d; border-bottom: 2.5px solid #0a7a3d; transform: rotate(-45deg); }
.single-product table.pp-specs { width: 100%; max-width: 760px; border-collapse: collapse; margin: .5em 0 1.4em; font-size: 15px; }
.single-product table.pp-specs th, .single-product table.pp-specs td { padding: 10px 12px; border-bottom: 1px solid var(--pp-line); text-align: left; vertical-align: top; }
.single-product table.pp-specs th { width: 38%; font-weight: 600; color: var(--pp-ink); background: var(--pp-soft); }
.single-product a.pp-download { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--pp-line); border-radius: 8px; background: var(--pp-soft); font-weight: 600; text-decoration: none; }
.single-product a.pp-download::before { content: "⤓"; font-weight: 700; }

/* Compact desktop header (4 Oct 2026): smaller logo -> shorter header; mobile untouched */
@media (min-width: 922px) {
  #masthead .site-logo-img img.custom-logo { width: 190px !important; max-width: 190px !important; height: auto !important; }
  #masthead .ast-primary-header-bar .site-primary-header-wrap { min-height: 0; }
  #masthead .ast-primary-header-bar { padding-top: 0; padding-bottom: 0; }
}

/* Desktop product gallery: keep the image column at ~560px (Puretec photos at 50% felt oversized) */
@media (min-width: 922px) {
  .woocommerce div.product div.images, .woocommerce-page .ast-woocommerce-container div.product div.images { width: 42% !important; }
  .woocommerce div.product div.summary, .woocommerce-page .ast-woocommerce-container div.product div.summary { width: 54% !important; }
  .single-product .woocommerce-product-gallery__image img { max-height: 560px; object-fit: contain; }
}

/* Category buying guide + FAQs (below the product grid) */
.pp-cat-guide { max-width: 860px; margin: 48px auto 24px; padding-top: 32px; border-top: 1px solid var(--pp-line, #e2e8f0); font-size: 16px; line-height: 1.7; }
.pp-cat-guide h2 { font-size: clamp(21px, 2vw, 26px); margin: 0 0 .6em; }
.pp-cat-guide h3 { font-size: 18px; margin: 1.4em 0 .4em; }
.pp-cat-guide ul { margin: 0 0 1.2em 1.2em; }
.pp-cat-guide .pp-faqs { border-top: 1px solid var(--pp-line, #e2e8f0); }
.pp-faq { border-bottom: 1px solid var(--pp-line, #e2e8f0); }
.pp-faq summary { cursor: pointer; padding: 14px 32px 14px 0; font-weight: 600; list-style: none; position: relative; }
.pp-faq summary::-webkit-details-marker { display: none; }
.pp-faq summary::after { content: "+"; position: absolute; right: 6px; top: 12px; font-size: 20px; font-weight: 400; }
.pp-faq[open] summary::after { content: "–"; }
.pp-faq > div { padding: 0 0 14px; }
.pp-faq > div p:last-child { margin-bottom: 0; }

/* Key features as <div class="pp-key-features"><h3>…</h3><ul>…</ul></div> (supplier imports: Englefield, Nero, Kohler, Oliveri) */
.single-product div.pp-key-features ul { list-style: none; margin: 0; padding: 0; }
.single-product div.pp-key-features > h3 { margin: 0 0 6px; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: var(--pp-navy); }

/* Water Guides pages */
.pp-guide { max-width: 820px; font-size: 17px; line-height: 1.75; }
.pp-guide h2 { font-size: clamp(22px, 2.1vw, 27px); margin: 1.6em 0 .5em; }
.pp-guide h3 { font-size: 19px; margin: 1.3em 0 .4em; }
.pp-guide table { width: 100%; border-collapse: collapse; margin: .6em 0 1.4em; font-size: 15px; }
.pp-guide th, .pp-guide td { border: 1px solid var(--pp-line, #e2e8f0); padding: 9px 12px; text-align: left; vertical-align: top; }
.pp-guide thead th { background: var(--pp-soft, #f1f5f9); }
@media (max-width: 600px) { .pp-guide table { display: block; overflow-x: auto; } }
.pp-guide-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin: .4em 0 1.6em; }
.pp-guide-card { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border: 1px solid var(--pp-line, #e2e8f0); border-radius: 10px; text-decoration: none; color: inherit; background: #fff; transition: border-color .15s, box-shadow .15s; }
.pp-guide-card:hover, .pp-guide-card:focus-visible { border-color: #0b6bcb; box-shadow: 0 2px 10px rgba(15, 23, 42, .08); }
.pp-guide-card strong { color: #0b4f8a; line-height: 1.35; }
.pp-guide-card span { font-size: 14px; line-height: 1.5; color: #475569; }
.pp-guide a.pp-guide-card, .pp-guide a.pp-guide-card * { text-decoration: none; }
.pp-guide a.pp-guide-card:hover strong { text-decoration: underline; }
.pp-guide-hero { float: right; width: 360px; max-width: 42%; margin: 4px 0 18px 28px; }
.pp-guide-hero img { width: 100%; height: auto; border-radius: 12px; display: block; }
@media (max-width: 700px) { .pp-guide-hero { float: none; width: 100%; max-width: 100%; margin: 0 0 18px; } }
.pp-guide h2 { clear: both; }
.pp-guide-card img { width: calc(100% + 36px); max-width: none; margin: -16px -18px 6px; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px 10px 0 0; display: block; height: auto; }
.pp-guide-card { overflow: hidden; }
.pp-guide-products { margin: 8px 0 24px; }
.pp-guide-products ul.products { margin-bottom: 0; }

/* Show the main product image straight away. WooCommerce keeps the gallery at opacity:0 until its slider script runs,
   which on phones waits behind all other JS and delays LCP by seconds. The CLS guards above keep the layout stable. */
.single-product .woocommerce-product-gallery { opacity: 1 !important; }
.single-product .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image img { width: 100%; max-width: 100%; height: auto; }
/* Thumbnails are inserted by the slider script: fade them in so their insertion is not a visible layout shift. */
.woocommerce-product-gallery .flex-control-thumbs { animation: pp-thumbs-in .25s ease .35s both; }
@keyframes pp-thumbs-in { from { opacity: 0; } to { opacity: 1; } }
/* "Sale!" badge: anchor to the product before Astra's sticky-image wrapper exists (it otherwise jumps when the wrapper is built). */
.single-product div.product { position: relative; }