/* Product pages: overrides on top of product.css (loaded after it from ctrl/ctrl_head.php) */
/* product name in its written case instead of all capitals */
.prouctdetails_h2 { text-transform: none; }
/* "Products may interest you" cards: names in their written case too */
#productdetails12 .product_card_h3 { text-transform: none; letter-spacing: normal; }
/* phones: 2 per row, same look as the cards on the category pages (css/product-listing.css) */
@media (max-width: 767px) {
    #productdetails12 .productdetails_h2s { font-size: 22px; line-height: 1.3; }
    #productdetails12 .container { padding-left: 7px; padding-right: 7px; }
    #productdetails12 .container > [class*="col-"] { float: left; width: 50%; padding-left: 8px; padding-right: 8px; }
    #productdetails12 .container > [class*="col-"]:nth-child(2n+1) { clear: left; }
    #productdetails12 .card_education2 { height: auto; margin-bottom: 20px; }
    #productdetails12 .img-productmays { width: 100%; height: auto; }
    #productdetails12 .product_card_h3 { margin-top: 12px; font-size: 15px; }
}
/* Breadcrumbs (all pages): the whole trail in the regular weight */
a.left-sidebar-text1, a.left-sidebar-text2 { font-family: 'Geomanist_r', sans-serif; }

/* ===== Product page layout v2 (only on pages with <body class="... pp-v2">; js/product-enquiry.js) ===== */
/* html/body have "overflow: hidden auto" site-wide, which stops position:sticky working; "clip" hides
   sideways overflow the same way without breaking it, so the right-hand panel can stay in view */
html:has(body.pp-v2), body.pp-v2 { overflow-x: clip !important; overflow-y: visible !important; }
@media (min-width: 901px) {
    .pp-v2 .wrapper.row { align-items: flex-start; }
    .pp-v2 .sidenav_right_productdetails { align-self: flex-start; height: auto; top: calc(var(--wb-nav-h, 100px) + 10px); max-height: calc(100vh - var(--wb-nav-h, 100px) - 20px);
        overflow-y: auto; padding-top: 56px; }
}
/* the old four trust icons (under the photos) are replaced by the two short lines in the right-hand panel / under the buttons on phones */
.pp-v2 .productdetails-left-frame > .product_details_icon_frame { display: none; }
/* photo gallery: the main photo is a plain square (no wider white box around it), arrows sit either side of
   the thumbnail strip (moved there by js/product-enquiry.js), thumbnails are squares too and scroll if many */
.pp-v2 .product_slide_container { background: none; }
.pp-v2 .product_slide22_img { display: block; width: 100%; max-width: none; height: auto; aspect-ratio: 1 / 1; object-fit: contain; background: #fff; }
.pp-v2 .wb-thumbrow { display: flex; align-items: center; gap: 10px; margin: 12px 0 40px; }
.pp-v2 .wb-thumbrow > .product_prev22, .pp-v2 .wb-thumbrow > .product_next22 { float: none; flex: none; margin: 0; width: 36px; height: 36px;
    background-size: contain; background-position: center; }
.pp-v2 .wb-thumbrow.wb-single-photo > .product_prev22, .pp-v2 .wb-thumbrow.wb-single-photo > .product_next22 { visibility: hidden; }
.pp-v2 .wb-thumbs { display: flex; gap: 10px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; }
.pp-v2 .wb-thumbs::-webkit-scrollbar { display: none; }
.pp-v2 .wb-thumbs .dot_product { flex: 0 0 calc((100% - 30px) / 4); width: auto; height: auto; margin: 0; padding-bottom: 0; border-bottom: 3.5px solid transparent; }
.pp-v2 .wb-thumbs .dot_product.product_active22, .pp-v2 .wb-thumbs .dot_product:hover { border-bottom-color: #c43030; }
.pp-v2 .wb-thumbs .dot_product_img { display: block; width: 100%; max-width: none; height: auto; aspect-ratio: 1 / 1; object-fit: contain; background: #fff; }
/* breadcrumb starts where the gallery and size table start (the left column is indented 50px from 997px up) */
@media (min-width: 997px) {
    .pp-v2 .breadcrumb2 { margin-left: 50px; }
}
/* product video: its own section under the photo gallery, 16:9, full width of the left column */
.pp-v2 .wb-video { position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 40px 0 30px; background: #000; }
.pp-v2 .wb-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* gallery = thumbnails + main photo (wrapped by js/product-enquiry.js). Phones: thumbnails under the photo. */
.pp-v2 .wb-gallery { display: flex; flex-direction: column; }
.pp-v2 .wb-gallery > .wb-thumbrow { order: 2; }
/* narrow desktop windows (901-1199px): thumbnails stay under the photo; photo + thumbnails fit in the first screen
   (the thumbnail row is ~1/4 of the photo's width tall, so the photo's side is 80% of screen height - ~150px) */
@media (min-width: 901px) and (max-width: 1199px) {
    .pp-v2 .wb-gallery > .product_slide_container, .pp-v2 .wb-gallery > .wb-thumbrow { width: 100%; max-width: min(100%, calc((100vh - var(--wb-nav-h, 100px) - 50px) * 0.8));
        margin-left: auto; margin-right: auto; }
    .pp-v2 .wb-video { max-width: min(100%, calc((100vh - var(--wb-nav-h, 100px) - 50px) * 0.8)); margin-left: auto; margin-right: auto; }   /* lines up with the photo + thumbnails */
}
/* desktop from 1200px (like knoll.com): a column of thumbnails on the left, as tall as the photo, with up/down arrows;
   the photo fills the rest of the width but is never taller than the first screen (screen height - menu/breadcrumb
   ~170px); the pair is centred in the column */
@media (min-width: 1200px) {
    /* the left column runs to the edge of the grey panel, so the photo can sit centred between the thumbnails and
       the right-hand panel (old rules capped it at 90% width with extra right padding; its 50px left indent is taken off its width) */
    .pp-v2 .productdetails-left-frame { max-width: none; width: calc(100% - 50px); margin-right: 0; padding-right: 0; }
    .pp-v2 .wb-gallery { display: grid; grid-template-columns: 70px minmax(0, 1fr); column-gap: 0; align-items: start; margin: 10px 0 40px; }   /* thumbnails 70px wide, then the photo centred between them and the right-hand panel */
    .pp-v2 .wb-gallery > .wb-thumbrow { order: 0; flex-direction: column; align-self: center; margin: 0; gap: 10px; }      /* vertically centred on the photo */      /* as tall as its content: arrow, ~5 thumbnails, arrow, counter (Knoll) */
    .pp-v2 .wb-gallery > .product_slide_container { margin: 0 -70px 0 0; justify-self: center; width: min(100%, calc(100vh - var(--wb-nav-h, 100px) - 92px)); }   /* (-70px: the column's 20px right padding + the panel's 50px left padding, so the photo is centred between the thumbnails and the panel's text) */
    /* video: from the left edge of the thumbnails to the right edge of the photo (thumbnails 70px + 40px gap, then the photo) */
    .pp-v2 .wb-video { width: calc(70px + (100% + min(100% - 70px, 100vh - var(--wb-nav-h, 100px) - 92px)) / 2); margin: 10px 0 40px; }
    .pp-v2 .wb-thumbrow > .product_prev22, .pp-v2 .wb-thumbrow > .product_next22 { transform: rotate(90deg); width: 30px; height: 30px; }
    .pp-v2 .wb-thumbs { flex-direction: column; width: 100%; max-height: 410px; overflow-x: hidden; overflow-y: auto; }      /* ~5 thumbnails, the rest scroll */
    .pp-v2 .wb-thumb-count { text-align: center; font-family: 'Geomanist_r', sans-serif; font-size: 13px; line-height: 1; color: #555; }
    .pp-v2 .wb-single-photo .wb-thumb-count { display: none; }
    .pp-v2 .wb-thumbs .dot_product { flex: 0 0 auto; width: 100%; }
}
.pp-v2 .wb-thumb-count { display: none; }
@media (min-width: 1200px) { .pp-v2 .wb-thumb-count { display: block; } }
/* Size + Surface/Colour/Type dropdowns (replace "Spaces"): tick boxes; the choices go into the WhatsApp message and quote form */
/* WhatsApp + quote buttons: smaller (were 50-53px tall, 18-20px text) */
.pp-v2 .sidenav_right_productdetails .request-btn-whatsapp, .pp-v2 .sidenav_right_productdetails .request-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px; width: 210px; height: 42px; padding: 0 16px;
    font-size: 16px; line-height: 1; }
.pp-v2 .sidenav_right_productdetails .request-btn-whatsapp { margin: 0 0 8px; }
.pp-v2 .sidenav_right_productdetails .request-btn-whatsapp img { width: 26px; height: 26px; }
/* "Get a free quote" block (js/product-enquiry.js): heading, what's ticked, WhatsApp and quote form side by side */
.pp-v2 .sidenav_right_productdetails > br, .pp-v2 .mobile_product_details > br { display: none; }   /* (spacing above/below the quote block is set below) */
.pp-v2 .wb-quote { margin-top: 28px; }
.pp-v2 .wb-quote-title { margin-bottom: 12px; font-family: 'Geomanist', sans-serif; font-size: 18px; line-height: 1.3; color: #111; }
.pp-v2 .wb-quote-summary { display: flex; align-items: flex-start; gap: 7px; margin: 0 0 12px; padding: 8px 10px; border-radius: 6px;
    background: #f5f5f5; font-family: 'Geomanist_r', sans-serif; font-size: 13px; line-height: 1.45; color: #444; }
.pp-v2 .wb-quote-summary[hidden] { display: none; }
.pp-v2 .wb-quote-summary .fa { margin-top: 3px; color: #c43030; }
.pp-v2 .wb-quote-ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pp-v2 .wb-quote-way { display: flex; flex-direction: column; min-width: 0; }
.pp-v2 .wb-quote-way > a { display: block; text-decoration: none; }
.pp-v2 .wb-quote .request-btn-whatsapp, .pp-v2 .wb-quote .request-btn { display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100% !important; height: 42px; margin: 0 !important; padding: 0 10px; font-size: 15px; line-height: 1; white-space: nowrap; }
/* WhatsApp and Add to enquiry (and Send enquiry / Send via WhatsApp in the drawer) hover the same way: white with the button's colour as text and outline */
.pp-v2 .wb-quote .request-btn, .pp-v2 .wb-quote .request-btn-whatsapp, #myModal.wb-drawer .wb-drawer-actions > * { border: 0; transition: background-color .2s ease, color .2s ease, box-shadow .2s ease; }
.pp-v2 .wb-quote .request-btn:hover, #myModal.wb-drawer .wb-drawer-actions #send-message-modal:hover { border: 0; background: #fff; color: #c43030; box-shadow: inset 0 0 0 2px #c43030; }
.pp-v2 .wb-quote .request-btn-whatsapp:hover, #myModal.wb-drawer .wb-drawer-wa:hover { border: 0; background: #fff; color: #2ab540; box-shadow: inset 0 0 0 2px #2ab540; }
.pp-v2 .wb-quote .request-btn-whatsapp i, .pp-v2 .wb-quote .request-btn i { flex: none; width: 22px; margin: 0; font-size: 21px; line-height: 1; text-align: center; }   /* both icons the same size */
/* Enquiry list: the quote form as a slide-out drawer (js/enquiry-list.js) */
#myModal.wb-drawer { display: block !important; position: fixed; top: 0; right: 0; bottom: 0; left: auto; width: min(460px, 100vw); max-width: none;
    height: 100%; margin: 0; padding: 0; float: none; background: #fff; border: 0; border-radius: 0; box-shadow: -10px 0 34px rgba(0, 0, 0, .2);
    z-index: 2100; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; animation: none !important; opacity: 1 !important;
    visibility: hidden !important; transform: translateX(104%); transition: transform .32s cubic-bezier(.22, .8, .25, 1), visibility 0s linear .32s; }
#myModal.wb-drawer.wb-open { visibility: visible !important; transform: none; transition-delay: 0s; }
#myModal.wb-drawer > div { padding: 26px 26px 34px; }
#myModal.wb-drawer .close { position: absolute; top: 14px; right: 18px; z-index: 2; font-size: 30px; font-weight: normal; line-height: 1; opacity: .55; cursor: pointer; }
#myModal.wb-drawer .close:hover { opacity: 1; }
#myModal.wb-drawer br { display: none; }
#myModal.wb-drawer h2 { margin: 0 0 4px; font-size: 24px; outline: none; }
#myModal.wb-drawer .wb-drawer-note { margin: 0 0 16px; font-family: 'Geomanist_r', sans-serif; font-size: 13px; line-height: 1.45; color: #777; }
#myModal.wb-drawer .wb-hidden-row { display: none; }
/* the Size / Surface dropdowns fill the panel, same width as the title and the enquiry buttons (the old rule fixed them at 400px) */
.pp-v2 .sidenav_right_productdetails details.details1234 { width: 100%; max-width: none; box-sizing: border-box; }
/* form boxes: every box runs from the left to the right edge of the form (same edge as the buttons), 12px between boxes both ways */
#myModal.wb-drawer .colums:not(.wb-hidden-row) { display: flex; gap: 12px; margin: 0 0 12px; }
#myModal.wb-drawer .colums .item_modal { flex: 1 1 0; min-width: 0; }
#myModal.wb-drawer .item_modal { float: none; width: auto; margin: 0 0 12px; padding: 0; }
#myModal.wb-drawer .colums .item_modal { margin: 0; }
#myModal.wb-drawer .item_modal input, #myModal.wb-drawer .item_modal textarea { display: block; box-sizing: border-box; width: 100%; max-width: 100%; margin: 0; }
#myModal.wb-drawer .item_modal textarea { height: 96px; padding: 12px 10px; resize: vertical; }
#myModal.wb-drawer .g-recaptcha { margin: 6px 0 12px; }
.wb-backdrop { position: fixed; inset: 0; z-index: 2090; background: rgba(0, 0, 0, .42); opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s; }
.wb-backdrop.wb-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.wb-items { margin: 0 0 4px; }
.wb-items-empty { margin: 0 0 12px; padding: 14px; border: 1px dashed #ccc; border-radius: 8px; font-family: 'Geomanist_r', sans-serif; font-size: 14px; color: #666; }
.wb-item { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 8px; padding: 11px 12px; border: 1px solid #e3e3e3; border-radius: 8px; background: #fff; }
.wb-item--flash { animation: wb-flash 1.4s ease-out; }
@keyframes wb-flash { 0% { background: #fde9e9; border-color: #c43030; } 100% { background: #fff; border-color: #e3e3e3; } }
.wb-item-main { min-width: 0; flex: 1 1 auto; }
.wb-item-name { display: block; font-family: 'Geomanist', sans-serif; font-size: 15px; line-height: 1.35; color: #111; text-decoration: none; }
a.wb-item-name:hover { color: #c43030; }
.wb-item-spec { margin-top: 2px; font-family: 'Geomanist_r', sans-serif; font-size: 12.5px; line-height: 1.45; color: #777; overflow-wrap: anywhere; }
.wb-item-side { display: flex; align-items: center; gap: 8px; flex: none; }
.wb-item-side label { display: flex; align-items: center; gap: 6px; margin: 0; font-family: 'Geomanist_r', sans-serif; font-size: 12.5px; font-weight: normal; color: #777; }
.wb-item-side input { width: 58px; height: 32px; padding: 0 6px; border: 1px solid #ccc; border-radius: 6px; font-size: 14px; text-align: center; }
.wb-item-side input:focus { border-color: #c43030; outline: 0; box-shadow: inset 0 0 0 1px #c43030; }
.wb-item-del { padding: 4px 2px; border: 0; background: none; font-size: 17px; line-height: 1; color: #999; cursor: pointer; }
.wb-item-del:hover { color: #c43030; }
.wb-add-more { display: inline-block; margin: 2px 0 18px; font-family: 'Geomanist_r', sans-serif; font-size: 14px; color: #c43030; text-decoration: none; }
.wb-add-more:hover { text-decoration: underline; color: #c43030; }
#myModal.wb-drawer .wb-drawer-actions { display: flex; gap: 12px; clear: both; }
#myModal.wb-drawer .wb-drawer-actions > * { flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 8px; height: 42px; margin: 0; padding: 0 10px;
    border: 0; border-radius: 50px; float: none; font-family: 'Geomanist', sans-serif; font-size: 15px; line-height: 1; color: #fff; text-decoration: none; white-space: nowrap; cursor: pointer; }
#myModal.wb-drawer .wb-drawer-actions #send-message-modal { background: #c43030; }
#myModal.wb-drawer .wb-drawer-wa { background: #2ab540; }
#myModal.wb-drawer .wb-drawer-wa i { font-size: 21px; }
#myModal.wb-drawer .wb-drawer-clear { display: block; margin: 14px auto 0; padding: 0; border: 0; background: none; font-family: 'Geomanist_r', sans-serif; font-size: 13px; color: #888; text-decoration: underline; cursor: pointer; }
#myModal.wb-drawer #mail-status { margin: 8px 0 10px; }
.wb-chip { position: fixed; left: 16px; bottom: 16px; z-index: 1500; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 0; border-radius: 50px;
    background: #252525; color: #fff; font-family: 'Geomanist', sans-serif; font-size: 14px; line-height: 1; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }
.wb-chip[hidden] { display: none; }
.wb-chip:hover { background: #111; }
.wb-chip .fa { font-size: 17px; }
.wb-chip-n { display: inline-flex; align-items: center; justify-content: center; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 50px; background: #c43030; font-size: 11px; font-weight: normal; }
.wb-chip-n[hidden], .wb-chip-dot[hidden] { display: none; }
.wb-chip-dot { width: 8px; height: 8px; border-radius: 50%; background: #2ab540; }
@media (max-width: 900px) { .wb-chip { bottom: 30px; } .pp-v2 .whats-app { bottom: 20px !important; right: 15px !important; margin: 0 !important; } }      /* chip centred on the round WhatsApp button */
@media (prefers-reduced-motion: reduce) { #myModal.wb-drawer, .wb-backdrop { transition: none; } .wb-item--flash { animation: none; } }
/* Layout v3 (js/product-page-v3.js): Description | Features tabs (+ the video) become a full-width section under the photos and the right-hand
   panel, set off from them by a hairline across the screen */
.pp-v3 .wb-top { padding-bottom: 56px; }
.pp-v3 .wb-top .productdetails-frame { padding-bottom: 0; }
.pp-v3 .wb-top .wb-gallery { margin-bottom: 0; }
.pp-v3 .wb-info { padding: 24px 0 44px; border-top: 1px solid #e3e3e3; background: #fff; }
.pp-v3 .wb-info--video { padding: 36px 0 44px; }
.pp-v3 .wb-info--photo { padding: 36px 0 44px; }
.pp-v3 .wb-lifestyle img { display: block; width: 100%; max-width: 900px; height: auto; margin: 0 auto; }
.pp-v3 .wb-info--about { padding-bottom: 140px; }      /* room before "You may also like" */
/* the whole top part (photos + right-hand panel) scrolls together with the page: no pinned panel, no scrollbar of its own */
.pp-v3 .sidenav_right_productdetails { position: static !important; max-height: none !important; overflow: visible !important; padding-top: 65px; }      /* (65px: a static panel starts 9px higher than the pinned one did) */
.pp-v3 .wb-info .wb-about { width: auto; max-width: none; margin: 0; }      /* the tab row (and its hairline) runs across the whole content width, starting at the left content edge */
.pp-v3 .wb-info .wb-tabpanel { max-width: 860px; }      /* ...while the text keeps a comfortable line length */
.pp-v3 .wb-info .wb-video { width: 100%; max-width: 900px; margin: 0 auto; }
.pp-v3 .wb-about { margin: 34px 0 0; font-family: 'Geomanist_r', sans-serif; color: #333; }
.pp-v3 .wb-tabs { display: flex; gap: 28px; margin: 0 0 16px; border-bottom: 1.5px solid #dcdcdc; }
.pp-v3 .wb-tab { margin: 0 0 -1.5px; padding: 0 0 10px; border: 0; border-bottom: 3px solid transparent; background: none; font-family: 'Geomanist', sans-serif; font-size: 16px;
    line-height: 1.3; color: #777; cursor: pointer; }
.pp-v3 .wb-tab:hover { color: #111; }
.pp-v3 .wb-tab[aria-selected="true"] { color: #111; border-bottom-color: #c43030; }
.pp-v3 .wb-tab:focus-visible { outline: 2px solid #c43030; outline-offset: 3px; }
.pp-v3 .wb-tabpanel[hidden] { display: none; }
.pp-v3 .wb-about p { margin: 0 0 12px; font-size: 15px; line-height: 1.65; color: #444; }
.pp-v3 .wb-about ul { margin: 0; padding-left: 20px; list-style: disc outside !important; }
.pp-v3 .wb-about li { display: list-item; list-style: disc outside !important; margin: 0 0 4px; font-size: 15px; line-height: 1.65; color: #444; }
.pp-v3 .wb-video { margin: 36px 0 40px; }
@media (min-width: 1200px) { .pp-v3 .wb-about { width: calc(70px + (100% + min(100% - 70px, 100vh - var(--wb-nav-h, 100px) - 92px)) / 2); } }
@media (min-width: 901px) and (max-width: 1199px) { .pp-v3 .wb-about { width: 100%; max-width: min(100%, calc((100vh - var(--wb-nav-h, 100px) - 50px) * 0.8)); margin-left: auto; margin-right: auto; } }
@media (max-width: 900px) { .pp-v3 .wb-about { width: 100%; margin: 8px 0 26px; } .pp-v3 .wb-video { margin: 0 0 30px; } }
/* white behind the photos (user's choice over the old light grey panel) */
.pp-v2 .productdetails-frame { background: #fff; }
/* layout v3: make it clear a selection can go out by WhatsApp or the enquiry form */
.pp-v3 .wb-quote-hint { display: none; margin: -4px 0 12px; font-family: 'Geomanist_r', sans-serif; font-size: 13px; line-height: 1.45; color: #666; }
.pp-v3 .wb-quote-summary:not([hidden]) + .wb-quote-hint { display: block; }
.pp-v3 .wb-quote.wb-nudge .wb-quote-summary { animation: wb-sum-flash 1.4s ease-out; }
@keyframes wb-sum-flash { 0% { background: #fbdcdc; } 100% { background: #f5f5f5; } }
@media (prefers-reduced-motion: reduce) { .pp-v3 .wb-quote.wb-nudge .wb-quote-summary { animation: none; } }
/* Product pages share the site-wide 1400px width (css/site-width.css): capped and centred; converted pages (pp-v2) also line up with
   the menu bar: the breadcrumb and photo thumbnails start under the logo, the right panel ends under "Get a Quote" */
@media (min-width: 1200px) {
    .ProductPG .main_right_productdetails { max-width: 1400px; margin-left: auto; margin-right: auto; }
    .pp-v2 .main_right_productdetails { margin-left: auto !important; margin-right: auto !important; padding: 0 15px !important; }
    .pp-v2 .productdetails-frame { padding-left: 0; padding-right: 20px; }
    .pp-v2 .productdetails-left-frame { margin-left: 0 !important; padding-left: 0 !important; width: 100% !important; }
    .pp-v2 .sidenav_right_productdetails { padding-right: 0; padding-left: 50px; }
    .pp-v2 .breadcrumb2 { margin-left: 0 !important; }
}
/* converted product pages: the breadcrumb gets a little more air under the menu bar; the floating "Enquiry list" button sits next to the
   WhatsApp button on desktop (at the bottom-left it covered the thumbnail strip's down arrow) */
.pp-v2 .breadcrumb2 { margin-top: 29px; }      /* ~40px under the menu bar (Knoll: ~58px under a 102px header) */
@media (min-width: 901px) { .wb-chip { left: auto; right: 87px; bottom: 70px; } }
/* product name first, then the subtitle in regular weight (build_pp_test.py swaps the two headings) */
.pp-v2 .prouctdetails_h2 { margin: 20px 0 6px; }
.pp-v2 .prouctdetails_h3 { margin: 0 0 16px; font-family: 'Geomanist_r', sans-serif; font-weight: normal; }
.pp-v2 .wb-opt-details { height: auto !important; overflow: visible; }
.pp-v2 .wb-opt-count { margin-left: 8px; margin-right: auto; font-family: 'Geomanist_r', sans-serif; font-size: 13px; color: #c43030; letter-spacing: 0; text-transform: none; }
.pp-v2 .wb-opt-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; padding: 6px 0 18px; }
/* dropdown labels (Size, Surface, Description, Details...) centred between their dividing lines
   (product.css gives summaries 20px padding above but 5px below, so the label sat low) */
.pp-v2 .sidenav_right_productdetails details > summary, .pp-v2 .mobile_product_details details > summary { padding-top: 12px; padding-bottom: 12px; }
/* a dividing line between the option dropdowns (the first one sits under the product name, like "Spaces" did) */
.pp-v2 .wb-opt-details + .wb-opt-details { border-top: 1.5px solid #e8e8e8; }
/* a line above the first dropdown (Size) and below the last (Details), same as the lines between them */
.pp-v2 .sidenav_right_productdetails > details:first-of-type, .pp-v2 .mobile_product_details > details:first-of-type { border-top: 1.5px solid #e8e8e8; }
.pp-v2 .sidenav_right_productdetails > details:last-of-type, .pp-v2 .mobile_product_details > details:last-of-type { border-bottom: 1.5px solid #e8e8e8; }
.pp-v2 .wb-opt-options--list { grid-template-columns: minmax(0, 1fr); }   /* add-ons: longer labels, one per line */
.pp-v2 .wb-opt { display: flex; align-items: center; gap: 9px; margin: 0; font-family: 'Geomanist_r', sans-serif; font-size: 15px;
    font-weight: normal; color: #252525; cursor: pointer; }
.pp-v2 .wb-opt input { width: 17px; height: 17px; margin: 0; flex: none; accent-color: #c43030; cursor: pointer; }
.pp-v2 .wb-opt--2line { align-items: flex-start; }
.pp-v2 .wb-opt--2line input { margin-top: 4px; }   /* centred on the first line (24px line height) */
.pp-v2 .wb-opt-sub { display: block; margin-top: 2px; font-size: 13px; line-height: 18px; color: #8a8a8a; }
.pp-v2 .wb-opt-clear { grid-column: 1 / -1; justify-self: start; padding: 0; border: 0; background: none; font-family: 'Geomanist_r', sans-serif;
    font-size: 13px; color: #757575; text-decoration: underline; cursor: pointer; }
.pp-v2 .wb-opt-clear[hidden] { display: none; }
.pp-v2 .wb-opt[hidden] { display: none; }
.pp-v2 .wb-opt--na { opacity: .45; cursor: not-allowed; }
.pp-v2 .wb-opt--na input { cursor: not-allowed; }
/* a size / surface with only one option isn't a choice: shown as a plain row (title left, value right), no plus sign, no tick box */
.pp-v2 .wb-opt-details--fixed > summary { cursor: default; pointer-events: none; }
.pp-v2 .wb-opt-details--fixed [data-css-icon] > i { display: none; }
.pp-v2 .wb-fixed-value { margin-left: auto; text-align: left; font-family: 'Geomanist_r', sans-serif; font-size: 15px; font-weight: normal; letter-spacing: 0; text-transform: none; color: #252525; }
.pp-v2 .wb-fixed-value small { display: block; margin-top: 2px; font-size: 13px; line-height: 18px; color: #8a8a8a; }
/* colour swatches (Colour dropdown of the panels / notice boards) */
/* 3-4 big swatches per row: the swatch on top, tick box and code under it */
.pp-v2 .wb-opt-options--swatches { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 14px 12px; }
.pp-v2 .wb-opt-options--swatches .wb-opt { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px 8px; align-items: center; }
.pp-v2 .wb-swatch { width: 24px; height: 24px; flex: none; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); }
.pp-v2 .wb-opt-options--swatches .wb-swatch { grid-column: 1 / -1; grid-row: 1; width: 100%; height: 52px; border-radius: 6px; }
.pp-v2 .wb-opt-options--swatches .wb-opt input { grid-column: 1; grid-row: 2; }
.pp-v2 .wb-opt-options--swatches .wb-swatch-code { grid-column: 2; grid-row: 2; font-size: 14px; }
.pp-v2 .wb-opt-head { grid-column: 1 / -1; margin-top: 6px; font-family: 'Geomanist', sans-serif; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: #8a8a8a; }
.pp-v2 .wb-opt-head:first-child { margin-top: 0; }
.pp-v2 .wb-opt-head[hidden] { display: none; }
.pp-v2 .wb-opt-note { grid-column: 1 / -1; font-family: 'Geomanist_r', sans-serif; font-size: 14px; color: #8a8a8a; }
.pp-v2 .wb-opt-note[hidden] { display: none; }
.pp-v2 .wb-opt-options--swatches .wb-opt[hidden] { display: none; }      /* (the tile layout above would otherwise show hidden colours) */
.pp-v2 .wb-opt-details[hidden] { display: none; }
.pp-v2 .product_detailstable tr.wb-row-selected td { background: #fbecec; color: #c43030; }
/* compact trust icons in the right-hand panel */
.pp-v2 .wb-trust { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 28px; padding-top: 20px; border-top: 1.5px solid #e8e8e8; }
.pp-v2 .wb-trust-item { display: flex; align-items: center; gap: 10px; font-family: 'Geomanist_r', sans-serif; font-weight: normal; font-size: 13px; line-height: 1.3; color: #252525; }
.pp-v2 .wb-trust-item img { width: 36px; height: 24px; object-fit: contain; flex: none; }   /* both icons drawn 24px tall (the truck is wide, the tools square) */
/* the size/code table is hidden (sizes are in the Size dropdown); it stays in the page as the dropdown's source */
.pp-v2 .wb-code-table { display: none; }
/* lifestyle photos in the gallery fill the square (cropped) instead of sitting in white bars */
.pp-v2 .product_slide22_img.wb-lifestyle, .pp-v2 .wb-thumbs .dot_product_img.wb-lifestyle { object-fit: cover; }
/* the two "in use" photos as a compact pair instead of a long stack */
.pp-v2 .wb-inuse { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding-top: 40px; }
.pp-v2 .wb-inuse > div { padding-top: 0 !important; }
.pp-v2 .wb-inuse img { display: block; width: 100%; height: auto; }
/* phones/tablets: no bottom bar - the same round floating WhatsApp button as on desktop (the "Enquiry form" button stays in the product panel) */
.pp-v2 .wb-enquiry-bar { display: none !important; }
@media (max-width: 900px) {
    /* wide size tables scroll sideways instead of squashing */
    .pp-v2 .product_detailstable { display: block; overflow-x: auto; }
}

/* ===== Quote list: drawer links, the "Get a Quote" page (quotation.php) and the header count (2026-10-06) ===== */
#myModal.wb-drawer .wb-drawer-links { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
#myModal.wb-drawer .wb-drawer-links .wb-drawer-clear { margin: 0 0 0 auto; }
#myModal.wb-drawer .wb-drawer-full { display: inline-flex !important; align-items: center; gap: 6px; font-family: 'Geomanist', sans-serif; font-size: 14px; color: #c43030 !important; text-decoration: none; }
#myModal.wb-drawer .wb-drawer-full:hover { text-decoration: underline; }
/* the page: same form, same parts, laid out wide */
.wb-qp { padding: 132px 0 80px; background: #f5f5f5; }
.wb-qp-head { max-width: 640px; margin: 0 0 28px; }
.wb-qp-head h1 { margin: 0 0 8px; font-family: 'Geomanist', sans-serif; font-size: 40px; line-height: 1.15; font-weight: normal; color: #1a1a1a; text-transform: none; }
.wb-qp-head p { margin: 0; font-family: 'Geomanist_r', sans-serif; font-size: 17px !important; line-height: 1.5 !important; color: #666; }
#myModal.wb-drawer.wb-page { position: static; width: auto; height: auto; max-width: none; transform: none; transition: none; box-shadow: none; z-index: auto;
    overflow: visible; border: 1px solid #e6e6e6; border-radius: 16px; }
#myModal.wb-drawer.wb-page > div { padding: 36px 40px 40px; }
#myModal.wb-drawer.wb-page .close { display: none; }
#myModal.wb-drawer.wb-page h2 { font-size: 28px; }
.wb-qp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; margin-top: 8px; }
.wb-step { display: flex; align-items: center; gap: 10px; margin: 0 0 14px !important; font-family: 'Geomanist', sans-serif; font-size: 16px !important; line-height: 1.3 !important; color: #1a1a1a; }
.wb-step b { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: #1a1a1a; color: #fff; font-weight: normal; font-size: 13px; }
#myModal.wb-page .wb-qp-col .item_modal textarea { height: 120px; }
.wb-qp-next { display: flex; align-items: center; gap: 10px; margin: 22px 4px 0 !important; font-family: 'Geomanist_r', sans-serif; font-size: 15px !important; line-height: 1.5 !important; color: #555; }
.wb-qp-next .fa { font-size: 18px; color: #2ab540; }
@media (max-width: 900px) {
    .wb-qp { padding: 112px 0 56px; }
    .wb-qp-head h1 { font-size: 30px; }
    .wb-qp-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    #myModal.wb-drawer.wb-page > div { padding: 24px 18px 28px; }
}
/* "Get a Quote" in the menu: how many products are on the list (ctrl/footer_body.php) */
.nav-button { position: relative; }
.nav-button .wb-quote-n { position: absolute; top: -7px; right: -7px; display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px;
    padding: 0 5px; border: 2px solid #fff; border-radius: 50px; background: #1a1a1a; color: #fff; font-family: 'Geomanist', sans-serif; font-size: 11px; line-height: 1; box-sizing: border-box; }
.wb-items .wb-items-empty { margin: 0 0 12px !important; }                 /* (the site gives <p> a left margin) */
#myModal.wb-drawer .wb-drawer-clear[hidden] { display: none !important; }  /* nothing saved: no "Clear" link */
#myModal.wb-drawer.wb-page #frmContact { padding: 0; }                     /* (the site pads the form 20px; the card has its own padding) */
#myModal.wb-drawer .wb-drawer-actions { flex-wrap: wrap; }                 /* narrow screens: WhatsApp drops under Send instead of overflowing */
#myModal.wb-drawer .wb-drawer-actions > * { flex: 1 1 170px; }

/* ===== Buttons: the WriteBest Design System (Desktop\Claude\WriteBest Design System, 2026-09-18) =====
   One shape for every action: a fully-rounded pill in brand red, Geomanist Medium 16/24, 10x32 padding, optional trailing arrow.
   primary = brand-600 #c43030 with a 2px brand-700 #c43030 border (the main action of a page/section)
   secondary = brand-500 #c43030 (the nav bar's Get a Quote only) . ghost = text-only, black . hover = slightly darker */
.wb-btn { display: inline-flex !important; align-items: center; justify-content: center; gap: 10px; padding: 10px 32px; border: 2px solid transparent; border-radius: 999px;
    font-family: 'Geomanist', sans-serif; font-weight: normal; font-size: 16px; line-height: 24px; text-decoration: none !important; white-space: nowrap; cursor: pointer; transition: filter .15s ease; }
.wb-btn:hover, .wb-btn:focus-visible { filter: brightness(.92); text-decoration: none !important; }
.wb-btn--sm { padding: 8px 20px; font-size: 14px; line-height: 20px; }
.wb-btn--primary, .wb-btn--primary:hover, .wb-btn--primary:focus { background: #c43030; border-color: #c43030; color: #fff !important; }
.wb-btn--secondary, .wb-btn--secondary:hover, .wb-btn--secondary:focus { background: #c43030; border-color: #c43030; color: #fff !important; }
.wb-btn--ghost, .wb-btn--ghost:hover, .wb-btn--ghost:focus { background: transparent; border-color: transparent; padding-left: 10px; padding-right: 10px; color: #000 !important; }
.wb-btn .fa { font-size: 18px; line-height: 1; }
.wb-btn--inverse, .wb-btn--inverse:hover, .wb-btn--inverse:focus { background: #fff; border-color: #fff; color: #c43030 !important; }   /* (on brand-red / dark bands only) */

/* ===== The site's existing buttons, brought in line with the design system (2026-10-06) ===== */
/* primary actions: brand-600 pill, 2px brand-700 border, Geomanist 16px; hover just darkens (no colour flip) */
.request-btn, .pp-v2 .wb-quote .request-btn, #myModal.wb-drawer .wb-drawer-actions #send-message-modal, .contact-page-send-btn-c, .contact-page-send-btn,
.wb-enquiry-bar .wb-bar-quote {
    background: #c43030 !important; border: 2px solid #c43030 !important; color: #fff !important; border-radius: 999px !important; box-shadow: none !important;
    font-family: 'Geomanist', sans-serif !important; font-size: 16px !important; transition: filter .15s ease !important; }
.request-btn:hover, .pp-v2 .wb-quote .request-btn:hover, #myModal.wb-drawer .wb-drawer-actions #send-message-modal:hover, .contact-page-send-btn-c:hover,
.contact-page-send-btn:hover, .wb-enquiry-bar .wb-bar-quote:hover {
    background: #c43030 !important; border-color: #c43030 !important; color: #fff !important; box-shadow: none !important; filter: brightness(.92); }
.contact-page-send-btn-c, .contact-page-send-btn { min-height: 44px; padding: 10px 32px !important; }
/* WhatsApp: its own brand green (#25d366, success-600: WhatsApp only), same pill */
.request-btn-whatsapp, .pp-v2 .wb-quote .request-btn-whatsapp, #myModal.wb-drawer .wb-drawer-wa, .wb-enquiry-bar .wb-bar-wa {
    background: #25d366 !important; border: 2px solid #25d366 !important; color: #fff !important; border-radius: 999px !important; box-shadow: none !important;
    font-family: 'Geomanist', sans-serif !important; font-size: 16px !important; transition: filter .15s ease !important; }
.request-btn-whatsapp:hover, .pp-v2 .wb-quote .request-btn-whatsapp:hover, #myModal.wb-drawer .wb-drawer-wa:hover, .wb-enquiry-bar .wb-bar-wa:hover {
    background: #25d366 !important; border-color: #25d366 !important; color: #fff !important; box-shadow: none !important; filter: brightness(.92); }
/* the red / dark call-to-action bands ("Contact us - ENQUIRE NOW", "START BROWSING"): standard pill, inverse colours */
.enquire-btn { width: auto !important; height: auto !important; min-height: 0 !important; padding: 10px 32px !important; background: #fff !important; border: 2px solid #fff !important;
    border-radius: 999px !important; color: #c43030 !important; font-family: 'Geomanist', sans-serif !important; font-size: 16px !important; line-height: 24px !important;
    box-shadow: none !important; transition: filter .15s ease !important; }
.enquire-btn:hover { background: #fff !important; color: #c43030 !important; filter: brightness(.94); }
/* secondary buttons on the branch contact card: pills like everything else */
.contacts_button { border-radius: 999px !important; }

/* ===== Cards: one radius site-wide (8px) ===== */
.card, .card_education, .card_education2, .card_contacts, .card_locations, .contacts_form, .details.col-md-9, .company_div1,
.card_home123, .blog-card, .blog-card123, .blog-card1234, .blog-card-e3, .blog-card-actircle, .panel,
#wb-cats .wb-cat-card, .wbb-tile, .wbb-card, .product-image-wrapper, .product-image-wrapper:hover, .sl-header-wrapper, .pp-v2 .wb-quote-summary { border-radius: 8px !important; }
.card_home123 .info_home123 { border-radius: 0 0 8px 8px !important; }
.card_home123:before { border-radius: 0 0 8px 8px !important; }
.sl-header-wrapper { overflow: hidden; }
.sl-header-wrapper .img-curve, .card_home123 img, .wbb-item-img { border-radius: 0 !important; }

/* ===== Quote list chip: desktop has the header button + count badge, so the chip is for phones and tablets only ===== */
@media (min-width: 951px) { .wb-chip { display: none !important; } }

/* quote form: "I also need" Delivery / Installation tick boxes, and the "* Required" note */
#myModal .wb-checks { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin: 4px 0 14px; }
#myModal .wb-checks-label { font-family: 'Geomanist_r', sans-serif; font-size: 14px; line-height: 21px; color: #757575; }
#myModal .wb-check { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-family: 'Geomanist_r', sans-serif; font-size: 15px; line-height: 22px; color: #333; cursor: pointer; }
#myModal .wb-check input[type=checkbox] { width: 18px !important; height: 18px !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; accent-color: #c43030; cursor: pointer; }
#myModal .wb-field-error { margin: 4px 0 0 !important; font-family: 'Geomanist_r', sans-serif; font-size: 13px; line-height: 18px; color: #c43030; }
#myModal .item_modal input.wb-invalid, #myModal .item_modal input.wb-invalid:focus { border-color: #c43030 !important; box-shadow: 0 0 0 3px rgba(196, 48, 48, .12); }

/* frame / stand colours (4 choices): two per row, so they sit as a 2 x 2 block instead of 3 + 1 */
.pp-v2 .wb-opt-details[data-group="framecol"] .wb-opt-options--swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ===== Product page on tablets (2026-10-08): 700-991px wide shows the photo and the details side by side
   (the old rule dropped to the phone layout: a huge photo with the details far below). Phones (under 700px) are unchanged. ===== */
@media (min-width: 700px) and (max-width: 991px) {
    .pp-v2 .wrapper.row { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 24px; margin: 0; }
    .pp-v2 .productdetails-frame { flex: 0 0 54%; width: 54%; max-width: 54%; padding-left: 0; padding-right: 0; }
    .pp-v2 .sidenav_right_productdetails { display: block !important; float: none; flex: 1 1 0; min-width: 0; width: auto; padding: 30px 15px 0 0 !important; position: static; }
    .pp-v2 .mobile_product_details { display: none !important; }
    .pp-v2 .sidenav_right_productdetails .wb-quote-ways { grid-template-columns: minmax(0, 1fr); }
    .pp-v2 .sidenav_right_productdetails .wb-quote-way .request-btn,
    .pp-v2 .sidenav_right_productdetails .wb-quote-way .request-btn-whatsapp { width: 100%; }
}

/* "Browse products" (left) and "Clear products" (right) share one row right under the product list (2026-10-12) */
.wb-list-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 0 18px; }
.wb-list-foot .wb-add-more { margin: 0; }
#myModal.wb-drawer .wb-list-foot .wb-drawer-clear { display: inline-block; margin: 0 0 0 auto; font-size: 14px; color: #666; }
#myModal.wb-drawer .wb-list-foot .wb-drawer-clear:hover { color: #c43030; }
#myModal.wb-drawer .wb-list-foot .wb-drawer-clear[hidden] { display: none !important; }
#myModal.wb-drawer .wb-drawer-links:empty { display: none; }