/* ===================================================================== My Direct Style D · Soft cards — build d7 Presentation only. Loads after the Core stylesheets and restyles the existing mdb- classes. No page content, prices or options change. TO UNDO EVERYTHING: WP Admin > Plugins > My Direct Style D > Deactivate. TO UNDO ONE PART: delete that numbered block below and re-upload. Selectors start with ":root body.mdb-complete-site" so they win over Core's "body.mdb-complete-site .mdb-elementor-document ..." rules. !important appears only on properties that Core's own presentation files (presentation-v13x.css, checkout-v128.css) already force with !important; without it those Core rules would still win. ===================================================================== */ /* 1. FONT — Figtree, served from this plugin (no Google request). Undo: delete this block and block 2's --sd-font line. */ @font-face{font-family:"Figtree";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/figtree-latin-400-normal.woff2") format("woff2")} @font-face{font-family:"Figtree";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/figtree-latin-500-normal.woff2") format("woff2")} @font-face{font-family:"Figtree";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/figtree-latin-600-normal.woff2") format("woff2")} @font-face{font-family:"Figtree";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/figtree-latin-700-normal.woff2") format("woff2")} @font-face{font-family:"Figtree";font-style:normal;font-weight:800;font-display:swap;src:url("fonts/figtree-latin-800-normal.woff2") format("woff2")} /* 2. TOKENS — the D palette and card shapes, plus a warmer page background. Undo: delete this block (everything below falls back to Core colours). */ :root body.mdb-complete-site{ --sd-font:"Figtree","Avenir Next",Avenir,"Segoe UI",Arial,sans-serif; --sd-bg:#F6F4EF; --sd-card:#fff; --sd-ink:#2B3240; --sd-slate:#444E60; --sd-slate-d:#3A4353; --sd-aqua:#49C3C9; --sd-aqua-d:#2F8E94; --sd-aqua-t:#E4F5F6; --sd-aqua-h:#EEF7F8; --sd-muted:#5B6776; --sd-line:#ECE9E2; --sd-r:16px; --sd-r-lg:22px; --sd-r-sm:12px; --sd-shadow:0 6px 20px rgba(43,50,64,.06); --sd-shadow-lg:0 20px 50px rgba(43,50,64,.16); --mdb-paper:#F6F4EF; --e-global-typography-text-font-family:"Figtree"; background:var(--sd-bg); } /* 3. TYPE — Figtree everywhere Core names a font; bolder headings. Undo: delete this block. */ :root body.mdb-complete-site, :root body.mdb-complete-site .mdb-main :is(h1,h2,h3), :root body.mdb-complete-site .mdb-elementor-document .mdb-main :is(h1,h2), :root body.mdb-complete-site .mdb-header :is(a,button,summary), :root body.mdb-complete-site :is(.xoo-wsc-container,.xoo-wsc-basket), :root body.mdb-complete-site .elementor-widget-text-editor{font-family:var(--sd-font)} :root body.mdb-complete-site .mdb-elementor-document .mdb-main h1{font-weight:800;letter-spacing:-.028em} :root body.mdb-complete-site .mdb-elementor-document .mdb-main h2{font-weight:800;letter-spacing:-.03em} :root body.mdb-complete-site .mdb-elementor-document .mdb-main h3{font-weight:700} /* 4. BUTTONS — aqua pill with dark text (was white on aqua, about 2:1 contrast) and an arrow. Undo: delete this block. */ :root body.mdb-complete-site .mdb-elementor-document .mdb-button{border-radius:999px;text-transform:none;letter-spacing:0;font-size:15px;font-weight:700;padding:15px 24px;font-family:var(--sd-font);transition:background .15s,box-shadow .15s} :root body.mdb-complete-site .mdb-elementor-document .mdb-button-teal{background:var(--sd-aqua);color:var(--sd-ink);border-color:transparent;box-shadow:0 6px 16px rgba(73,195,201,.35)} :root body.mdb-complete-site .mdb-elementor-document .mdb-button-teal:hover{background:#5BCDD2;color:var(--sd-ink)} :root body.mdb-complete-site .mdb-elementor-document .mdb-button-teal::after{content:"→";margin-left:8px;font-weight:700} /* 5. ANNOUNCEMENT BAR — slate strip with aqua ticks (was the aqua strip). Undo: delete this block. */ :root body.mdb-complete-site .mdb-elementor-document .mdb-announcement{background:var(--sd-slate);min-height:36px} :root body.mdb-complete-site .mdb-elementor-document .mdb-announcement>:is(a,span){color:#fff;font-weight:600;font-size:13px;text-decoration:none;white-space:nowrap} :root body.mdb-complete-site .mdb-elementor-document .mdb-announcement>:is(a,span)::before{content:"";display:inline-block;vertical-align:-2px;margin-right:7px;width:14px;height:14px;background:var(--sd-aqua);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat} /* 6. HEADER — white bar with a soft shadow, pill-shaped menu links, round cart button, aqua "Build & Order" pill. Undo: delete this block. */ :root body.mdb-complete-site .mdb-elementor-document .mdb-header{background:#fff;box-shadow:0 1px 0 var(--sd-line),0 8px 24px rgba(43,50,64,.05)} :root body.mdb-complete-site .mdb-nav :is(summary,a){border-radius:999px;padding:10px 14px;font-size:15px;font-weight:600;color:var(--sd-slate);transition:background .15s} :root body.mdb-complete-site .mdb-nav :is(summary,a):hover, :root body.mdb-complete-site .mdb-nav details[open]>summary{background:var(--sd-aqua-h);color:var(--sd-ink)} :root body.mdb-complete-site .mdb-header a.mdb-header-order{background:var(--sd-aqua)!important;color:var(--sd-ink)!important;border-radius:999px;text-transform:none;letter-spacing:0;font-size:14.5px;font-weight:700;padding:12px 20px;box-shadow:0 6px 16px rgba(73,195,201,.35)} :root body.mdb-complete-site .mdb-header a.mdb-header-order:hover{background:#5BCDD2!important} :root body.mdb-complete-site .mdb-header a.mdb-header-order::after{content:"→";margin-left:8px} :root body.mdb-complete-site .mdb-header a.mdb-header-cart{position:relative;width:44px;height:44px;border-radius:50%;background:#F3F1EC;display:inline-grid;place-items:center;padding:0;gap:0} :root body.mdb-complete-site .mdb-header a.mdb-header-cart .mdb-header-cart-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} :root body.mdb-complete-site .mdb-header a.mdb-header-cart .mdb-header-cart-count{position:absolute;right:-4px;top:-4px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;display:grid;place-items:center;background:var(--sd-slate);color:#fff;font-size:10.5px;font-weight:800;line-height:1} :root body.mdb-complete-site .mdb-header .mdb-menu-toggle{border-radius:999px;background:#F3F1EC;color:var(--sd-slate);border:0;font-weight:700} /* 7. MENU DROPDOWNS — white rounded card with roomier links. Undo: delete this block. */ :root body.mdb-complete-site .mdb-nav .mdb-nav-dropdown{border-radius:16px;padding:8px;box-shadow:0 18px 44px rgba(43,50,64,.16);border:1px solid var(--sd-line);min-width:250px} :root body.mdb-complete-site .mdb-nav .mdb-nav-dropdown a{display:block;border-radius:10px;padding:10px 12px;font-size:14.5px;font-weight:600} /* 8. PAGE HERO — the dark hero becomes a rounded card set in 32px from each edge (the width is reduced by the same amount so the page never scrolls sideways). Undo: delete this block. */ :root body.mdb-complete-site .mdb-elementor-document .mdb-page-hero{margin:24px auto 0;width:calc(100% - 64px);max-width:none;border-radius:var(--sd-r-lg);overflow:hidden;box-shadow:0 20px 50px rgba(43,50,64,.18)} :root body.mdb-complete-site .mdb-page-hero .mdb-eyebrow{display:inline-block;align-self:flex-start;background:var(--sd-aqua);color:var(--sd-ink);padding:6px 12px;border-radius:999px;font-size:11px;letter-spacing:.12em;margin-bottom:6px} :root body.mdb-complete-site .mdb-elementor-document .mdb-page-hero h1{font-weight:800} :root body.mdb-complete-site .mdb-page-hero .mdb-actions a.mdb-text-link{display:inline-flex!important;align-items:center;border-radius:999px!important;padding:15px 24px!important;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35)!important;color:#fff!important;text-decoration:none!important;font-weight:700;font-size:15px} :root body.mdb-complete-site .mdb-page-hero .mdb-actions .mdb-text-link:hover{background:rgba(255,255,255,.08)} :root body.mdb-complete-site .mdb-page-hero .mdb-check-list li::marker{content:none} :root body.mdb-complete-site .mdb-page-hero .mdb-home-caption{left:16px;right:16px;bottom:16px;width:auto;border-radius:16px;box-shadow:0 10px 30px rgba(20,25,35,.18)} :root body.mdb-complete-site .mdb-page-hero .mdb-home-slider-controls button{border-radius:999px} /* 9. PROOF STRIP — the four points become separate white cards with aqua icon tiles. Undo: delete this block. */ :root body.mdb-complete-site .mdb-elementor-document .mdb-product-proof{background:transparent;gap:16px;padding:20px 32px 0} :root body.mdb-complete-site .mdb-elementor-document .mdb-product-proof>div{background:#fff;border:0;border-radius:var(--sd-r);box-shadow:var(--sd-shadow);padding:18px!important} :root body.mdb-complete-site .mdb-product-proof svg.mdb-icon{box-sizing:content-box;width:22px!important;height:22px!important;padding:11px;border-radius:12px;background:var(--sd-aqua-t);color:var(--sd-aqua-d);stroke:var(--sd-aqua-d)} :root body.mdb-complete-site .mdb-product-proof strong{color:var(--sd-slate);font-weight:700} /* 10. SECTION TABS — a white pill that floats under the header; the current tab is slate. Undo: delete this block. */ :root body.mdb-complete-site .mdb-elementor-document .mdb-product-subnav.mdb-original-layout-yes{width:max-content;max-width:calc(100% - 24px);margin:0 auto;padding:5px;gap:4px;background:#fff;border-radius:999px;box-shadow:0 4px 14px rgba(43,50,64,.08);overflow-x:auto;scrollbar-width:none} :root body.mdb-complete-site .mdb-product-subnav a{border-radius:999px;padding:9px 18px;color:var(--sd-muted);font-weight:600;font-size:14.5px;text-decoration:none;white-space:nowrap} :root body.mdb-complete-site .mdb-product-subnav a:hover{color:var(--sd-ink);background:var(--sd-aqua-h)} /* the tab for the section you jumped to turns slate (pure CSS: it reads the #address, no script) */ :root body.mdb-complete-site .mdb-main:has(#why-ours:target) .mdb-product-subnav a[href="#why-ours"], :root body.mdb-complete-site .mdb-main:has(#controls:target) .mdb-product-subnav a[href="#controls"], :root body.mdb-complete-site .mdb-main:has(#styles:target) .mdb-product-subnav a[href="#styles"], :root body.mdb-complete-site .mdb-main:has(#details:target) .mdb-product-subnav a[href="#details"], :root body.mdb-complete-site .mdb-main:has(#delivery:target) .mdb-product-subnav a[href="#delivery"]{background:var(--sd-slate);color:#fff} /* 11. SECTION HEADINGS — aqua eyebrow labels above section headings (pale aqua on the teal bands, where full aqua would be hard to read). Undo: delete this block. */ :root body.mdb-complete-site .mdb-elementor-document .mdb-main .mdb-eyebrow{color:var(--sd-aqua-d);font-weight:800;letter-spacing:.14em} :root body.mdb-complete-site .mdb-elementor-document :is(.mdb-control-section,.mdb-comparison,.mdb-configure-cta,.mdb-final) .mdb-eyebrow{color:var(--sd-aqua)} :root body.mdb-complete-site .mdb-elementor-document :is(.mdb-measure-product,.mdb-surefit) .mdb-eyebrow{color:#CFF3F4} /* 12. INTRO PANELS ("Engineered for daily use") — soft aqua card with rounded corners. Undo: delete this block. */ :root body.mdb-complete-site .mdb-elementor-document .mdb-superiority-lead{background:linear-gradient(135deg,#E4F5F6,#EEF6F6);border-radius:20px} /* 13. NUMBERED CARDS (engineering grid, detail grid, review reasons) — separate white cards with soft shadows instead of a ruled grid. Undo: delete this block. */ :root body.mdb-complete-site .mdb-elementor-document :is(.mdb-engineering-grid,.mdb-detail-grid,.mdb-review-reasons){background:transparent;gap:16px;border:0} :root body.mdb-complete-site .mdb-elementor-document :is(.mdb-engineering-grid,.mdb-detail-grid,.mdb-review-reasons)>article{background:#fff;border:0;border-radius:18px;box-shadow:var(--sd-shadow);padding:28px} :root body.mdb-complete-site :is(.mdb-engineering-grid,.mdb-detail-grid)>article svg.mdb-icon{box-sizing:content-box;width:24px;height:24px;padding:12px;border-radius:14px;background:var(--sd-aqua-t);color:var(--sd-aqua-d);stroke:var(--sd-aqua-d)} :root body.mdb-complete-site :is(.mdb-engineering-grid,.mdb-detail-grid,.mdb-review-reasons)>article>span{color:#A5AEB9;font-weight:800;letter-spacing:.08em} /* 14. VALUE CARDS (Spend & Save, Price Beat, shipping) — the pale aqua band becomes a rounded panel; each card is white. Undo: delete this block. */ :root body.mdb-complete-site .mdb-elementor-document .mdb-value-section{background:linear-gradient(135deg,#E4F5F6,#D9F0F1);margin:40px auto;width:calc(100% - 64px);max-width:none;border-radius:24px} :root body.mdb-complete-site .mdb-elementor-document .mdb-value-cards{gap:16px;background:transparent} :root body.mdb-complete-site .mdb-elementor-document .mdb-value-cards>article{background:#fff;border:0;border-radius:18px;box-shadow:var(--sd-shadow);padding:30px} :root body.mdb-complete-site .mdb-value-cards>article>strong{color:var(--sd-aqua-d);letter-spacing:.12em} /* 15. PRODUCT AND FABRIC CARDS (home "Shop by product", roller "Choose your fabric type") — white cards, photo on top, rounded. Undo: delete this block. */ :root body.mdb-complete-site .mdb-elementor-document :is(.mdb-product-grid,.mdb-style-cards){gap:16px} :root body.mdb-complete-site .mdb-elementor-document :is(.mdb-product-card,.mdb-style-cards>article){background:#fff;border:0;border-radius:20px;overflow:hidden;box-shadow:var(--sd-shadow);transition:box-shadow .2s,transform .2s} :root body.mdb-complete-site .mdb-elementor-document .mdb-product-card>span{padding:16px 20px 20px} :root body.mdb-complete-site .mdb-elementor-document .mdb-product-card:hover{box-shadow:0 14px 34px rgba(43,50,64,.12)} :root body.mdb-complete-site .mdb-style-cards>article svg.mdb-icon{box-sizing:content-box;width:22px;height:22px;padding:10px;border-radius:12px;background:var(--sd-aqua-t);color:var(--sd-aqua-d);stroke:var(--sd-aqua-d)} /* 16. DARK AND TEAL BANDS (controls, "What you are not paying for", measure, SureFit, final and configure calls to action) — full-width bands become rounded cards set in from the edges. Undo: delete this block. */ :root body.mdb-complete-site .mdb-elementor-document :is(.mdb-control-section,.mdb-comparison,.mdb-measure-product,.mdb-surefit,.mdb-final,.mdb-configure-cta){margin:40px auto;width:calc(100% - 64px);max-width:none;border-radius:24px;overflow:hidden;box-shadow:var(--sd-shadow-lg)} :root body.mdb-complete-site .mdb-elementor-document .mdb-control-options{gap:16px;background:transparent} :root body.mdb-complete-site .mdb-elementor-document .mdb-control-options>article{background:var(--sd-slate-d);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:30px} :root body.mdb-complete-site .mdb-control-options>article svg.mdb-icon{box-sizing:content-box;width:24px;height:24px;padding:12px;border-radius:14px;background:rgba(73,195,201,.18);color:var(--sd-aqua);stroke:var(--sd-aqua)} :root body.mdb-complete-site .mdb-elementor-document .mdb-comparison p:not(.mdb-eyebrow){background:var(--sd-slate-d);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:18px 22px;margin:0 0 10px} :root body.mdb-complete-site .mdb-measure-steps article>span{background:var(--sd-aqua);color:var(--sd-ink);border-color:var(--sd-aqua);font-weight:800} /* 17. PICTURE + TEXT BLOCKS — room photos get rounded corners and a soft shadow. The full blockout cassette is a cut-out product image, so it floats on the page with no panel behind it, a little larger, with a soft shadow under the product itself (Aaron, 23 Sep). Undo: delete this block. */ :root body.mdb-complete-site .mdb-elementor-document .mdb-comparison-section{background:transparent} :root body.mdb-complete-site .mdb-elementor-document :is(.mdb-comparison-image,.mdb-split) img{border-radius:24px;box-shadow:var(--sd-shadow-lg)} :root body.mdb-complete-site .mdb-elementor-document .mdb-cassette-section .mdb-comparison-image{background:transparent;padding:0;border:0;box-shadow:none} :root body.mdb-complete-site .mdb-elementor-document .mdb-cassette-section .mdb-comparison-image img{border-radius:0;box-shadow:none;background:transparent;filter:drop-shadow(0 22px 26px rgba(43,50,64,.16))} /* 18. QUESTIONS (FAQ) — each question is its own white card with a round plus button. Undo: delete this block. */ :root body.mdb-complete-site .mdb-faq-list{display:grid;gap:12px} :root body.mdb-complete-site .mdb-faq-list details{background:#fff;border:0;border-radius:16px;padding:0 24px;box-shadow:var(--sd-shadow)} :root body.mdb-complete-site .mdb-faq-list summary{padding:20px 0;font-weight:700;color:var(--sd-slate)} /* 19. REVIEWS — the ProductReview score sits in a white rounded card. Undo: delete this block. */ :root body.mdb-complete-site .mdb-elementor-document .mdb-review-score{background:#fff;padding:28px 32px;border-radius:22px;box-shadow:var(--sd-shadow);overflow:hidden} /* 20. FOOTER — a rounded slate card lifted off the page edge. Undo: delete this block. */ :root body.mdb-complete-site .mdb-elementor-region-footer{padding:40px 32px 24px;background:var(--sd-bg)} :root body.mdb-complete-site .mdb-elementor-region-footer .mdb-footer{border-radius:24px;overflow:hidden} /* 22. PRODUCT FORM (Uni CPO options) — looks only: rounded option tiles with an aqua ring on the chosen one, rounded boxes, the measure arrows moved after the words "Width (mm)" / "Drop (mm)", and a cleaner "?" help button. Options, prices, rules and pictures are untouched. (Core's own option styles use #uni_cpo_options and some !important; these match them.) Undo: delete this block. */ :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-cpo-option-label{border-radius:14px;overflow:hidden;transition:box-shadow .15s,border-color .15s} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module-radio>input:not(:checked)+.uni-cpo-option-label{border-color:#E3DFD7!important} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module-radio>input:not(:checked)+.uni-cpo-option-label:hover{border-color:var(--sd-aqua)!important} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module-radio>input:checked+.uni-cpo-option-label{border-color:var(--sd-aqua)!important;box-shadow:0 0 0 2px var(--sd-aqua)!important;outline:0} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module-radio-text-mode>input:checked+.uni-cpo-option-label{background-color:var(--sd-aqua-h);color:var(--sd-ink);font-weight:700} :root body.mdb-complete-site.mdb-native-cpo .product :is(select.js-uni-cpo-field,textarea.js-uni-cpo-field,input.js-uni-cpo-field:not([type="radio"]):not([type="checkbox"]):not([type="hidden"])){border-radius:12px!important} :root body.mdb-complete-site.mdb-native-cpo .product :is(select.js-uni-cpo-field,textarea.js-uni-cpo-field,input.js-uni-cpo-field:not([type="radio"]):not([type="checkbox"]):not([type="hidden"])):focus{border-color:var(--sd-aqua);box-shadow:0 0 0 3px rgba(73,195,201,.25);outline:none} /* measure arrows: after the words, drawn with end stops, in the darker aqua */ :root body.mdb-complete-site.mdb-native-cpo .product :is(label[for^="uni_cpo_width_"],label[for^="uni_cpo_height_"]){display:flex;align-items:center;flex-wrap:wrap;gap:7px} :root body.mdb-complete-site.mdb-native-cpo .product :is(label[for^="uni_cpo_width_"],label[for^="uni_cpo_height_"])::before{order:1;margin:0;vertical-align:0;background-image:none;background-color:var(--sd-aqua-d)} :root body.mdb-complete-site.mdb-native-cpo .product label[for^="uni_cpo_width_"]::before{width:28px;height:13px;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 14' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 2v10M28.5 2v10M4.5 7h21M8 3.8 4.5 7 8 10.2M22 3.8l3.5 3.2-3.5 3.2'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 14' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 2v10M28.5 2v10M4.5 7h21M8 3.8 4.5 7 8 10.2M22 3.8l3.5 3.2-3.5 3.2'/%3E%3C/svg%3E") center/contain no-repeat} :root body.mdb-complete-site.mdb-native-cpo .product label[for^="uni_cpo_height_"]::before{width:12px;height:21px;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 1.5h10M2 22.5h10M7 4.5v15M3.8 8 7 4.5 10.2 8M3.8 16 7 19.5l3.2-3.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 1.5h10M2 22.5h10M7 4.5v15M3.8 8 7 4.5 10.2 8M3.8 16 7 19.5l3.2-3.5'/%3E%3C/svg%3E") center/contain no-repeat} :root body.mdb-complete-site.mdb-native-cpo .product :is(label[for^="uni_cpo_width_"],label[for^="uni_cpo_height_"]) .uni-cpo-tooltip{order:2} :root body.mdb-complete-site.mdb-native-cpo .product :is(label[for^="uni_cpo_width_"],label[for^="uni_cpo_height_"])::after{order:3} /* "?" help button: a round outline that fills slate on hover */ :root body.mdb-complete-site.mdb-native-cpo .uni-cpo-tooltip::before{width:20px;height:20px;border:1.5px solid rgba(68,78,96,.45);font:800 11px/1 var(--sd-font);color:var(--sd-slate)!important;transition:background .15s,color .15s,border-color .15s} :root body.mdb-complete-site.mdb-native-cpo .uni-cpo-tooltip:is(:hover,:focus-visible)::before{background:var(--sd-slate)!important;border-color:var(--sd-slate);color:#fff!important} /* calculate / add to cart, quantity and SureFit in the form */ :root body.mdb-complete-site.mdb-native-cpo .product :is(.single_add_to_cart_button,.uni-cpo-calculate-btn){border-radius:999px!important;text-transform:none;letter-spacing:0;font-weight:700} :root body.mdb-complete-site.mdb-native-cpo .product :is(.single_add_to_cart_button,.uni-cpo-calculate-btn):not(:disabled):not(.disabled){background:var(--sd-aqua)!important;color:var(--sd-ink)!important;box-shadow:0 6px 16px rgba(73,195,201,.35)} :root body.mdb-complete-site.mdb-native-cpo .product :is(.single_add_to_cart_button,.uni-cpo-calculate-btn):not(:disabled):not(.disabled):hover{background:#5BCDD2!important} :root body.mdb-complete-site.mdb-native-cpo .product .quantity .qty{border-radius:12px} :root body.mdb-complete-site.mdb-native-cpo .product .mdb-surefit{border-radius:16px} /* 23. HELP POPUPS (the "?" guides) — rounded card, soft aqua header, rounded pictures, an aqua "Back to my blind" pill and a round close button. Words and pictures unchanged. Undo: delete this block. */ :root body.mdb-complete-site .pum-theme-mdb-product-help .pum-container{border-radius:22px;overflow:hidden;box-shadow:0 30px 70px rgba(20,25,35,.3)} :root body.mdb-complete-site .pum-theme-mdb-product-help .mdb-guide-heading{background:linear-gradient(135deg,#E4F5F6,#F3FAFA);border-bottom:0} :root body.mdb-complete-site .pum-theme-mdb-product-help .mdb-guide-heading h2{font-family:var(--sd-font);font-weight:800;letter-spacing:-.02em} :root body.mdb-complete-site .pum-theme-mdb-product-help .mdb-guide-illustrated img{background:#F3F1EC;border-radius:14px;padding:10px;box-sizing:border-box} :root body.mdb-complete-site .pum-theme-mdb-product-help .mdb-guide-section+.mdb-guide-section{border-top:1px solid var(--sd-line)} :root body.mdb-complete-site .pum-theme-mdb-product-help .mdb-guide-footer{background:#FBFAF8;border-top:1px solid var(--sd-line)} :root body.mdb-complete-site .pum-theme-mdb-product-help .mdb-guide-back{background:var(--sd-aqua);color:var(--sd-ink);border-radius:999px;font-weight:700;padding:13px 22px;box-shadow:0 6px 16px rgba(73,195,201,.35)} :root body.mdb-complete-site .pum.pum-theme-mdb-product-help .pum-container>.pum-content+.pum-close{border-radius:50%;background:#fff;color:var(--sd-slate);box-shadow:var(--sd-shadow)} /* 24. CART — the cart, spend & save bar and totals become rounded white cards; aqua pill checkout button; rounded quantity box. Prices and totals are untouched. Undo: delete this block. */ :root body.mdb-complete-site .mdb-cart-shell form.woocommerce-cart-form{border:0;border-radius:22px;overflow:hidden;box-shadow:var(--sd-shadow-lg)} :root body.mdb-complete-site .mdb-cart-shell .mdb-spend-save__cart-bar{border-radius:14px;background:var(--sd-aqua-t);border-color:transparent} :root body.mdb-complete-site .mdb-cart-shell .cart_totals{border:0;border-radius:22px;box-shadow:var(--sd-shadow-lg)} :root body.mdb-complete-site .mdb-cart-shell .product-thumbnail img{border-radius:12px} :root body.mdb-complete-site .mdb-cart-shell input.qty{border-radius:12px} :root body.mdb-complete-site .mdb-cart-shell a.checkout-button{border-radius:999px!important;background:var(--sd-aqua)!important;color:var(--sd-ink)!important;font-weight:700;box-shadow:0 6px 16px rgba(73,195,201,.35)} :root body.mdb-complete-site .mdb-cart-shell a.checkout-button:hover{background:#5BCDD2!important} :root body.mdb-complete-site .mdb-cart-shell .button:not(.checkout-button){border-radius:999px!important} /* 25. CHECKOUT — your details and your order sit in rounded white cards; rounded fields; aqua pill "Place order". Payment and totals untouched. Undo: delete this block. */ :root body.mdb-complete-site .mdb-checkout-shell #customer_details{border:0;border-radius:22px;box-shadow:var(--sd-shadow-lg)} :root body.mdb-complete-site .mdb-checkout-shell #order_review_heading{border-radius:22px 22px 0 0} :root body.mdb-complete-site .mdb-checkout-shell #order_review{border-radius:0 0 22px 22px} :root body.mdb-complete-site .mdb-checkout-shell #payment{border-radius:16px!important} :root body.mdb-complete-site .mdb-checkout-shell :is(.input-text,select,textarea){border-radius:12px!important} :root body.mdb-complete-site .mdb-checkout-shell #place_order{border-radius:999px!important;background:var(--sd-aqua)!important;color:var(--sd-ink)!important;font-weight:700;box-shadow:0 6px 16px rgba(73,195,201,.35)} :root body.mdb-complete-site .mdb-checkout-shell #place_order:hover{background:#5BCDD2!important} /* 26. FREE SAMPLES PAGE (the old three-click version) — collection, range and colour cards become rounded white cards with soft shadows; the pricing note is a soft aqua panel. Once the Core Free Samples update (build s1) is installed these classes are no longer on the page and this block does nothing; the new page brings its own styles (Core assets/sample-library.css). Undo: delete this block. */ :root body.mdb-complete-site .mdb-samples .mdb-sample-policy{border-radius:16px;background:var(--sd-aqua-t)} :root body.mdb-complete-site .mdb-samples :is(.mdb-sample-family,.mdb-sample-range,.mdb-sample-card){border:0;border-radius:18px;overflow:hidden;box-shadow:var(--sd-shadow);transition:box-shadow .2s} :root body.mdb-complete-site .mdb-samples :is(.mdb-sample-family,.mdb-sample-range,.mdb-sample-card):hover{box-shadow:0 14px 34px rgba(43,50,64,.12)} /* 27. HEADER MENU FIT (d3) — tighter spacing between the menu pills so the header no longer runs off the right edge between 1051px and 1240px wide, and no underline or teal text on the pill you point at (Core's presentation-v140.css forces both with !important, which fought the aqua pill). Undo: delete this block. */ :root body.mdb-complete-site .mdb-header .mdb-nav{gap:6px} :root body.mdb-complete-site .mdb-header .mdb-nav :is(a,summary):is(:hover,:focus-visible), :root body.mdb-complete-site .mdb-header .mdb-nav details[open]>summary{color:var(--sd-ink)!important;text-decoration:none!important} @media (min-width:1051px) and (max-width:1240px){ :root body.mdb-complete-site .mdb-elementor-document .mdb-header{padding-left:24px;padding-right:24px} :root body.mdb-complete-site .mdb-header .mdb-nav :is(summary,a){padding:9px 11px;font-size:14.5px} :root body.mdb-complete-site .mdb-header a.mdb-header-order{padding:11px 16px} } /* 28. LANDING PAGE FIXES (d4) — Aaron's notes, 23 Sep. a) The four proof cards had a thin line above and below them and the section tabs sat right on top of them: lines removed, 18px gap added. b) A thin line sat above the first question card in "Common questions": removed. c) The dark and teal bands (Configure & Order, measure, SureFit, final) now line their two buttons up in a row, and the text link becomes an outline pill like the hero's. Undo: delete this block. */ :root body.mdb-complete-site .mdb-elementor-document .mdb-product-proof{border-top:0;border-bottom:0;padding-bottom:18px} :root body.mdb-complete-site .mdb-elementor-document .mdb-faq-list{border-top:0} :root body.mdb-complete-site .mdb-elementor-document :is(.mdb-configure-cta,.mdb-measure-product,.mdb-final,.mdb-surefit) .mdb-actions{flex-direction:row;flex-wrap:wrap;align-items:stretch;gap:14px 16px} :root body.mdb-complete-site .mdb-elementor-document :is(.mdb-configure-cta,.mdb-measure-product,.mdb-final,.mdb-surefit) .mdb-actions a.mdb-text-link{display:inline-flex!important;align-items:center;min-height:0;padding:15px 24px!important;border:0!important;border-radius:999px!important;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4)!important;color:#fff!important;text-decoration:none!important;font-size:15px;font-weight:700;line-height:1.2;transition:background .15s} :root body.mdb-complete-site .mdb-elementor-document :is(.mdb-configure-cta,.mdb-measure-product,.mdb-final,.mdb-surefit) .mdb-actions a.mdb-text-link:hover{background:rgba(255,255,255,.1)} :root body.mdb-complete-site .mdb-elementor-document .mdb-button-light{border-radius:999px;text-transform:none;letter-spacing:0;font-weight:700;padding:15px 24px;border-color:transparent} /* 29. PRODUCT PAGE FORM (d4, redone in d5 to match the mockup) — looks only. No option, price, rule, condition or picture in Uni CPO is changed; hidden options stay hidden (every rule below that touches an option skips inputs Uni CPO has hidden). a) Photo, title and the two small teal headings. b) Step headings "1 Fabric", "2 Size & fit", "3 Control", "4 Finish" above Window Name, Mount Type, Blind Control and Component Colour (drawn by CSS from the field's own id; a product without those fields simply shows no step heading). c) Field names smaller and bold like the mockup; the red "*" is hidden (Uni CPO still stops the order and shows its message if a field is missing). d) The chosen option's name shows at the right end of the field name ("Fabric Type ... Blockout"), read from the option's own name by CSS, so it changes the moment another option is picked. e) Picture options: the picture is the white rounded card, the name sits underneath, an aqua ring and a round tick mark the chosen one. Tile sizes and columns stay Core's (the visualiser product's). f) Fabric ranges: the fabric strip is the rounded card, the range name and colour count sit underneath, aqua ring + tick on the chosen range. The "Thermally Insulated" badge stays. g) Yes/No style options: white rounded buttons, aqua ring on the chosen one. Undo: delete this block (block 22 then gives the d2 look back). */ :root body.mdb-complete-site.mdb-native-cpo .product .woocommerce-product-gallery{border-radius:22px;overflow:hidden;box-shadow:0 20px 50px rgba(43,50,64,.14)} :root body.mdb-complete-site.mdb-native-cpo .product .summary h1.product_title{font-size:clamp(28px,2.6vw,38px);font-weight:700;line-height:1.12;letter-spacing:-.02em} :root body.mdb-complete-site.mdb-native-cpo .product .mdb-config-heading h2{margin:10px 0 6px;font-family:var(--sd-font);font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--sd-aqua-d)} :root body.mdb-complete-site.mdb-native-cpo .product .mdb-config-heading p{color:var(--sd-muted);font-size:16px;line-height:1.6} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module-text{background:transparent!important;border:0!important;border-top:1px solid var(--sd-line)!important;border-radius:0!important;padding:22px 0 4px!important;color:var(--sd-aqua-d)!important;font-family:var(--sd-font);font-size:13px!important;font-weight:800!important;letter-spacing:.14em!important;text-transform:uppercase} /* the header's "Build & Order" (Core patch p3) jumps to the options; stop them landing under the sticky header */ :root body.mdb-complete-site.mdb-native-cpo #uni_cpo_options{scroll-margin-top:130px} /* b) step headings */ :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module:is([id^="uni_cpo_roomname"],[id^="uni_cpo_mounttype"],[id^="uni_cpo_blind_control_"],[id^="uni_cpo_bracket_and_component_colour"]){margin-top:30px} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module[id^="uni_cpo_roomname"]{margin-top:18px} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module:is([id^="uni_cpo_roomname"],[id^="uni_cpo_mounttype"],[id^="uni_cpo_blind_control_"],[id^="uni_cpo_bracket_and_component_colour"])::before{display:flex;align-items:center;box-sizing:border-box;height:28px;margin:0 0 18px;padding-left:40px;background:no-repeat left center/28px 28px;font:700 19px/1.2 var(--sd-font);letter-spacing:-.01em;color:var(--sd-slate);clear:both} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module[id^="uni_cpo_roomname"]::before{content:"Fabric";background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='14' fill='%2349C3C9'/%3E%3Ctext x='14' y='18.6' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-size='13' font-weight='700' fill='%232B3240'%3E1%3C/text%3E%3C/svg%3E")} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module[id^="uni_cpo_mounttype"]::before{content:"Size & fit";background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='14' fill='%2349C3C9'/%3E%3Ctext x='14' y='18.6' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-size='13' font-weight='700' fill='%232B3240'%3E2%3C/text%3E%3C/svg%3E")} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module[id^="uni_cpo_blind_control_"]::before{content:"Control";background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='14' fill='%2349C3C9'/%3E%3Ctext x='14' y='18.6' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-size='13' font-weight='700' fill='%232B3240'%3E3%3C/text%3E%3C/svg%3E")} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module[id^="uni_cpo_bracket_and_component_colour"]::before{content:"Finish";background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='14' fill='%2349C3C9'/%3E%3Ctext x='14' y='18.6' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-size='13' font-weight='700' fill='%232B3240'%3E4%3C/text%3E%3C/svg%3E")} /* c) field names */ :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module>label:not(.uni-cpo-option-label){margin:0 0 10px;font-family:var(--sd-font);font-size:14px!important;font-weight:800!important;line-height:24px;letter-spacing:.01em;color:var(--sd-slate)!important} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module>label.uni_cpo_field_required::after{content:none!important;display:none!important} /* d) chosen option's name at the right of the field name */ :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module-radio-image-mode{position:relative} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module-radio-image-mode>label.uni-cpo-option-label{position:static;transform:none!important} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module-radio-image-mode:has(>input:checked:not([hidden])+label.uni-cpo-option-label:not(.mdb-badge-popular))>label.uni-cpo-module-radio-label{padding-right:41%} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module-radio-image-mode>input:checked:not([hidden])+label.uni-cpo-option-label:not(.mdb-badge-popular)>.uni-cpo-option-label__image-wrap::before{content:attr(data-tip)!important;display:block!important;position:absolute!important;top:0;right:0;bottom:auto;left:auto;z-index:1;box-sizing:border-box;width:auto;max-width:40%;height:24px;margin:0!important;padding:0!important;border:0;border-radius:0;background:none!important;box-shadow:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:700 13.5px/24px var(--sd-font);letter-spacing:0;text-transform:none;text-align:right;color:var(--sd-aqua-d)!important;pointer-events:none} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module-radio-image-mode:is([id^="uni_cpo_mounttype"],[id^="uni_cpo_blind_control_"],[id^="uni_cpo_bracket_and_component_colour"])>input:checked:not([hidden])+label.uni-cpo-option-label>.uni-cpo-option-label__image-wrap::before{top:46px} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module-radio-image-mode.mdb-native-range>input:checked:not([hidden])+label.uni-cpo-option-label:not(.mdb-badge-popular)>.uni-cpo-option-label__image-wrap::before{top:12px} /* e) picture options */ :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module-radio-image-mode:not(.mdb-native-range)>label.uni-cpo-option-label{padding:0!important;border:0!important;border-radius:0!important;outline:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important;min-height:0} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module-radio-image-mode:not(.mdb-native-range)>label.uni-cpo-option-label>.uni-cpo-option-label__image-wrap{min-height:0!important;background:transparent!important;border:0!important} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module-radio-image-mode:not(.mdb-native-range)>label.uni-cpo-option-label img.uni-cpo-option-label__image{border-radius:14px!important;background-color:#fff!important;box-shadow:0 0 0 1px #E6E2DA,0 4px 14px rgba(43,50,64,.07);transition:box-shadow .15s} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module-radio-image-mode:not(.mdb-native-range)>input:not(:checked):not(:disabled)+label.uni-cpo-option-label:hover img.uni-cpo-option-label__image{box-shadow:0 0 0 1.5px var(--sd-aqua),0 4px 14px rgba(43,50,64,.07)} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module-radio-image-mode:not(.mdb-native-range)>input:checked+label.uni-cpo-option-label img.uni-cpo-option-label__image{box-shadow:0 0 0 2.5px var(--sd-aqua),0 6px 16px rgba(43,50,64,.1)} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module-radio-image-mode:not(.mdb-native-range)>label.uni-cpo-option-label>.uni-cpo-option-label__image-wrap::after{display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;box-sizing:border-box;width:100%!important;height:40px;min-height:0!important;margin:0;padding:7px 2px 0!important;border:0;background:none!important;font:700 12.5px/1.3 var(--sd-font);color:var(--sd-slate);text-align:center} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module-radio-image-mode:not(.mdb-native-range)>input:checked:not([hidden])+label.uni-cpo-option-label:not(.mdb-badge-clearance)::after{content:""!important;display:block!important;position:relative!important;top:auto!important;right:auto!important;order:-1;flex:0 0 auto;align-self:flex-end;z-index:2;width:18px!important;height:18px!important;margin:6px 6px -24px 0!important;border:0!important;border-radius:50%!important;transform:none!important;background:var(--sd-aqua) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/11px no-repeat!important;box-shadow:0 2px 6px rgba(43,50,64,.25)!important;pointer-events:none} /* f) fabric ranges */ :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .mdb-native-range>label.uni-cpo-option-label, :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .mdb-native-range>input:checked+label.uni-cpo-option-label{row-gap:7px;border:0!important;border-radius:0!important;outline:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .mdb-native-range.mdb-native-range .uni-cpo-option-label__image-wrap img{border-radius:14px!important;box-shadow:0 0 0 1px #E6E2DA,0 4px 14px rgba(43,50,64,.07);transition:box-shadow .15s} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .mdb-native-range>input:not(:checked):not(:disabled)+label.uni-cpo-option-label:hover img{box-shadow:0 0 0 1.5px var(--sd-aqua),0 4px 14px rgba(43,50,64,.07)} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .mdb-native-range>input:checked+label.uni-cpo-option-label img{box-shadow:0 0 0 2.5px var(--sd-aqua),0 6px 16px rgba(43,50,64,.1)} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .mdb-native-range.mdb-native-range>label.uni-cpo-option-label .uni-cpo-option-label__image-wrap::after{min-height:0!important;padding:0 2px!important;background:none!important;font:700 13.5px/1.3 var(--sd-font);color:var(--sd-slate);justify-content:flex-start} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .mdb-native-range>label.uni-cpo-option-label .uni-cpo-option-label__description{padding:0 2px!important;background:none;font-size:12.5px;line-height:1.3;color:var(--sd-muted)} :root body.mdb-complete-site.mdb-native-cpo.mdb-choice-badges.mdb-choice-badge-thermal-on .product #uni_cpo_options .mdb-native-range>label.uni-cpo-option-label.mdb-badge-thermal::before{padding:3px 9px;border:0;border-radius:999px;background:var(--sd-aqua-t);color:var(--sd-aqua-d);font:700 11px/1.3 var(--sd-font);letter-spacing:0;text-transform:none} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .mdb-native-range>input:checked:not([hidden])+label.uni-cpo-option-label:not(.mdb-badge-clearance)::after{content:""!important;display:block!important;position:relative!important;top:auto!important;right:auto!important;grid-area:1/1/2/-1;justify-self:end;align-self:start;z-index:2;width:18px!important;height:18px!important;margin:8px!important;border:0!important;border-radius:50%!important;transform:none!important;background:var(--sd-aqua) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/11px no-repeat!important;box-shadow:0 2px 6px rgba(43,50,64,.25)!important;pointer-events:none} /* g) yes/no style options */ :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module-radio-text-mode>label.uni-cpo-option-label{min-height:44px;border:0!important;border-radius:12px!important;background:#fff!important;box-shadow:0 0 0 1px #E6E2DA,0 4px 14px rgba(43,50,64,.06)!important;color:var(--sd-slate);font-weight:700} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module-radio-text-mode>input:not(:checked):not(:disabled)+label.uni-cpo-option-label:hover{box-shadow:0 0 0 1.5px var(--sd-aqua),0 4px 14px rgba(43,50,64,.06)!important} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module-radio-text-mode>input:checked+label.uni-cpo-option-label{background:#fff!important;box-shadow:0 0 0 2.5px var(--sd-aqua),0 6px 16px rgba(43,50,64,.1)!important;color:var(--sd-ink)} /* the image status under the picture ("Shade Ice", "Updating image…") as a small slate chip */ :root body.mdb-complete-site.mdb-native-cpo #bpv-status{display:inline-block;margin:0;padding:6px 12px;border-radius:999px;background:var(--sd-slate);color:#fff;font:700 12.5px/1.3 var(--sd-font)} :root body.mdb-complete-site.mdb-native-cpo #bpv-status:empty{display:none} /* 30. PURCHASE BAR ON THE PRODUCT PAGE (d4, desktop look redone in d5) — the bar belongs to the visualiser plugin; only its looks change here, never its behaviour. a) All sizes: Calculate / Add to cart as an aqua pill, quantity as one rounded control. b) Desktop only (the plugin's own desktop mode, i.e. not .bpv-bar-mobile): the bar floats as a white rounded card 16px above the bottom edge, the width of the page content, like the mockup; "Your price" as a small label over the price; SureFit, View blind, View fabric and Show configuration as quiet pills instead of underlined links. The phone bar keeps its full-width position (the iPhone bottom-bar rules in the visualiser plugin stay in charge). Undo: delete this block. */ :root body.mdb-complete-site #bpv-purchase-bar #bpv-check{border:0!important;border-radius:999px;background:var(--sd-aqua);color:var(--sd-ink);font-family:var(--sd-font);font-weight:700;text-transform:none;letter-spacing:0;box-shadow:0 6px 16px rgba(73,195,201,.35)} :root body.mdb-complete-site #bpv-purchase-bar #bpv-check:hover{background:#5BCDD2;color:var(--sd-ink)} :root body.mdb-complete-site #bpv-purchase-bar #bpv-bar-quantity{border:1px solid #D9D4CA;border-radius:999px;overflow:hidden;background:#fff} :root body.mdb-complete-site #bpv-purchase-bar #bpv-bar-quantity :is(#bpv-qty-minus,#bpv-qty-plus,#bpv-qty-input){border:0;background:#fff;border-radius:0} :root body.mdb-complete-site #bpv-purchase-bar.bpv-bar-mobile{border-top:1px solid var(--sd-line);box-shadow:0 -10px 30px rgba(43,50,64,.08)} :root body.mdb-complete-site #bpv-purchase-bar:not(.bpv-bar-mobile){left:calc(var(--bpv-viewport-left,0px) + max(24px,(var(--bpv-viewport-width,100%) - 1240px)/2));bottom:calc(var(--bpv-bar-bottom,0px) + 16px);width:min(1240px,calc(var(--bpv-viewport-width,100%) - 48px));padding:10px 12px calc(10px + var(--bpv-safe-bottom,0px)) 30px;border:1px solid var(--sd-line);border-radius:999px;box-shadow:0 18px 44px rgba(43,50,64,.16),0 2px 6px rgba(43,50,64,.05);font-family:var(--sd-font)} :root body.mdb-complete-site #bpv-purchase-bar:not(.bpv-bar-mobile) .bpv-bar-price{grid-template-columns:minmax(0,1fr);row-gap:1px} :root body.mdb-complete-site #bpv-purchase-bar:not(.bpv-bar-mobile) .bpv-bar-price>span:first-child{display:block;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--sd-muted)} :root body.mdb-complete-site #bpv-purchase-bar:not(.bpv-bar-mobile) #bpv-bar-price{font-size:19px;font-weight:800;line-height:1.25;color:var(--sd-slate)} :root body.mdb-complete-site #bpv-purchase-bar:not(.bpv-bar-mobile) #bpv-bar-price .bpv-price-message{font-size:17px;font-weight:800;color:var(--sd-slate)} :root body.mdb-complete-site #bpv-purchase-bar:not(.bpv-bar-mobile) #bpv-bar-savings{font-size:12px;color:var(--sd-muted)} :root body.mdb-complete-site #bpv-purchase-bar:not(.bpv-bar-mobile) :is(#bpv-bar-protection,.bpv-desktop-actions>button){display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:0 14px;border:0;border-radius:999px;background:#F3F1EC;color:var(--sd-slate);font:600 13px/1.2 var(--sd-font);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background .15s} :root body.mdb-complete-site #bpv-purchase-bar:not(.bpv-bar-mobile) :is(#bpv-bar-protection,.bpv-desktop-actions>button):hover{background:var(--sd-aqua-h);color:var(--sd-ink)} :root body.mdb-complete-site #bpv-purchase-bar:not(.bpv-bar-mobile) #bpv-bar-protection{background:var(--sd-aqua-t);font-weight:700} :root body.mdb-complete-site #bpv-purchase-bar:not(.bpv-bar-mobile) .bpv-desktop-actions{display:flex;align-items:center;justify-content:center;gap:6px} :root body.mdb-complete-site #bpv-purchase-bar:not(.bpv-bar-mobile) #bpv-mini-proof{width:22px;height:22px;border-radius:50%;object-fit:cover} /* 31. HELP POPUPS (d4, fixed in d5) — the guide's heading and its "Back to my blind" bar stay put and only the middle scrolls; the popup is never taller than the screen. d5 fix: the layout now applies only while the popup is showing. In d4 it also forced the box to show while Popup Maker was closing it, so clicking outside made it flash off, on, off. d5: the "Back to my blind" button lost its thin charcoal border. Undo: delete this block. */ :root body.mdb-complete-site .pum-theme-mdb-product-help .pum-container{max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px)} :root body.mdb-complete-site .pum-theme-mdb-product-help .pum-container:not([style*="display: none"]):not([style*="display:none"]){display:flex!important;flex-direction:column} :root body.mdb-complete-site .pum-theme-mdb-product-help .pum-content{flex:1 1 auto;min-height:0;max-height:none;display:flex;flex-direction:column;overflow:hidden} :root body.mdb-complete-site .pum-theme-mdb-product-help .pum-content>.mdb-roller-guide{flex:1 1 auto;min-height:0;display:flex;flex-direction:column} :root body.mdb-complete-site .pum-theme-mdb-product-help .mdb-roller-guide>:is(.mdb-guide-heading,.mdb-guide-footer){flex:0 0 auto} :root body.mdb-complete-site .pum-theme-mdb-product-help .mdb-roller-guide>.mdb-guide-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain} :root body.mdb-complete-site .pum-theme-mdb-product-help .mdb-guide-footer .mdb-guide-back{border:0!important} /* d5: on screens wider than a phone the popup is centred with 24px clear above and below, so its bottom bar never runs off the screen (Popup Maker measured the height before the pictures loaded and placed it 13px too low on an 800px-tall window). */ @media (min-width:681px){ :root body.mdb-complete-site .pum-theme-mdb-product-help .pum-container:not([style*="display: none"]):not([style*="display:none"]){top:24px!important;bottom:24px!important;height:fit-content!important;margin-top:auto!important;margin-bottom:auto!important} } /* 32. MINI CART (side cart, d4) — rounded item card, quantity as one rounded control, round remove button, and clear buttons at the bottom: View Cart (outline pill), Continue Shopping (text link), Checkout (aqua pill). Undo: delete this block. */ :root body.mdb-complete-site .xoo-wsc-container{font-family:var(--sd-font);background:var(--sd-bg)} :root body.mdb-complete-site .xoo-wsc-container .xoo-wsc-product{margin:12px 16px 0;padding:14px;border:0;border-radius:18px;background:#fff;box-shadow:var(--sd-shadow)} :root body.mdb-complete-site .xoo-wsc-container .xoo-wsc-img-col img{border-radius:12px} :root body.mdb-complete-site .xoo-wsc-container .xoo-wsc-pname a{font-weight:700;color:var(--sd-ink)} :root body.mdb-complete-site .xoo-wsc-container .xoo-wsc-qty-box{border:1px solid #D9D4CA!important;border-radius:999px!important;overflow:hidden;background:#fff} :root body.mdb-complete-site .xoo-wsc-container .xoo-wsc-qty-box :is(.xoo-wsc-minus,.xoo-wsc-plus,input.xoo-wsc-qty){border:0!important;background:#fff!important;color:var(--sd-slate)} :root body.mdb-complete-site .xoo-wsc-container .xoo-wsc-smr-del{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#F3F1EC;color:var(--sd-slate);cursor:pointer} :root body.mdb-complete-site .xoo-wsc-container .xoo-wsc-smr-del:hover{background:var(--sd-aqua-h)} :root body.mdb-complete-site .xoo-wsc-container .xoo-wsc-footer{background:#fff;border-top:1px solid var(--sd-line);box-shadow:0 -10px 30px rgba(43,50,64,.06)} :root body.mdb-complete-site .xoo-wsc-container .xoo-wsc-ft-buttons-cont{gap:10px} :root body.mdb-complete-site .xoo-wsc-container a.xoo-wsc-ft-btn{border:0!important;border-radius:999px!important;font-family:var(--sd-font);font-weight:700!important;text-transform:none!important;letter-spacing:0!important;min-height:46px} :root body.mdb-complete-site .xoo-wsc-container a.xoo-wsc-ft-btn-cart{background:#fff!important;color:var(--sd-ink)!important;box-shadow:inset 0 0 0 1.5px #D9D4CA} :root body.mdb-complete-site .xoo-wsc-container a.xoo-wsc-ft-btn-continue{background:transparent!important;color:var(--sd-slate)!important;text-decoration:underline!important;text-underline-offset:4px} :root body.mdb-complete-site .xoo-wsc-container a.xoo-wsc-ft-btn-checkout{background:var(--sd-aqua)!important;color:var(--sd-ink)!important;box-shadow:0 6px 16px rgba(73,195,201,.35)} :root body.mdb-complete-site .xoo-wsc-container a.xoo-wsc-ft-btn-checkout:hover{background:#5BCDD2!important} /* 33. CART PAGE (d4) — Spend & Save bar: readable aqua % badge and a progress line under the message (the line needs Core patch p2); remove and edit as round icon buttons; "Proceed to checkout" in normal case; coupon link as a small pill; the two review quotes stacked in one column and shortened to three lines each so the box is not so tall. Undo: delete this block. */ :root body.mdb-complete-site .mdb-spend-save__cart-bar-icon{width:34px!important;height:34px!important;flex:none;background:var(--sd-aqua)!important;color:var(--sd-ink)!important;font-size:13px!important;font-weight:800!important} :root body.mdb-complete-site .mdb-spend-save__cart-bar-summary{font-size:14.5px!important;font-weight:600;color:var(--sd-ink)!important} :root body.mdb-complete-site .mdb-spend-save__cart-bar-meter{display:block;flex:0 0 calc(100% - 44px);height:6px;margin:8px 0 2px 44px;border-radius:999px;background:rgba(43,50,64,.1);overflow:hidden} :root body.mdb-complete-site .mdb-spend-save__cart-bar-meter>i{display:block;height:100%;border-radius:inherit;background:var(--sd-aqua-d)} :root body.mdb-complete-site .mdb-spend-save__cart-bar-toggle{flex-wrap:wrap;font-family:var(--sd-font)} :root body.mdb-complete-site .mdb-cart-shell table.shop_table tr.cart_item .product-remove :is(a.remove,.uni-cpo-action-edit){width:40px!important;height:40px!important;border-radius:50%!important;border:1px solid #E3DFD7!important;background:#fff!important;color:var(--sd-slate)!important;display:inline-flex!important;align-items:center;justify-content:center;transition:background .15s} :root body.mdb-complete-site .mdb-cart-shell table.shop_table tr.cart_item .product-remove :is(a.remove,.uni-cpo-action-edit):hover{background:var(--sd-aqua-h)!important;border-color:var(--sd-aqua)!important} :root body.mdb-complete-site .mdb-cart-shell a.checkout-button{text-transform:none!important;letter-spacing:0!important;font-size:16px!important} :root body.mdb-complete-site .mdb-cart-shell .mdb-cart-coupon-disclosure>summary{display:inline-flex;align-items:center;padding:10px 16px!important;border-radius:999px;background:#fff;box-shadow:var(--sd-shadow);color:var(--sd-ink);font-weight:700;text-decoration:none!important} :root body.mdb-complete-site .mdb-checkout-review-grid{grid-template-columns:1fr!important;gap:0!important} :root body.mdb-complete-site .mdb-checkout-review{padding:12px 0!important;background:transparent!important;border:0!important;border-top:1px solid var(--sd-line)!important;border-radius:0!important} :root body.mdb-complete-site .mdb-checkout-review blockquote{margin:0;font-size:14px;line-height:1.5;font-style:italic;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} :root body.mdb-complete-site .mdb-checkout-review-author{margin:4px 0 0;font-size:12.5px;color:var(--sd-muted)} /* 34. CART AND CHECKOUT HEADINGS (d4) — the sentence under "Your cart" ("Review the measurements…") and under "Checkout" ("Confirm your delivery and payment details…") is hidden to save height, and the space under the page title is tightened. Both sentences are Elementor text on those pages, so they can also be deleted there. Undo: delete this block. */ :root body.mdb-complete-site :is(.mdb-cart-page,.mdb-checkout-page) .mdb-commerce-heading p{display:none} :root body.mdb-complete-site :is(.mdb-cart-page,.mdb-checkout-page) .mdb-commerce-heading{padding-bottom:8px} :root body.mdb-complete-site :is(.mdb-cart-page,.mdb-checkout-page) .mdb-commerce-heading h1{margin-bottom:0} /* 35. PRODUCT CATEGORY PAGES (e.g. /product-category/roller-blinds/, d4) — intro as a white rounded card with a rounded photo, quick links as pills, buttons as pills, products as white rounded cards with an aqua "Choose options" pill, rounded sort box. Selectors start with .mdb-main.mdb-category-v138 to outrank Core's category-v138.css; !important only on the button colours that Core's source-v133.css already forces. Undo: delete this block. */ :root body.mdb-complete-site .mdb-main.mdb-category-v138 .mdb-catalogue-tools a{display:inline-flex;align-items:center;padding:8px 14px;border-radius:999px;background:#fff;box-shadow:var(--sd-shadow);color:var(--sd-slate);font-weight:600;font-size:14px;text-decoration:none} :root body.mdb-complete-site .mdb-main.mdb-category-v138 .mdb-catalogue-tools a:hover{background:var(--sd-aqua-h)} :root body.mdb-complete-site .mdb-main.mdb-category-v138 .mdb-catalogue-intro{background:#fff;border-radius:var(--sd-r-lg);box-shadow:var(--sd-shadow-lg);overflow:hidden} :root body.mdb-complete-site .mdb-main.mdb-category-v138 .mdb-catalogue-intro .mdb-catalogue-image{border-radius:18px} :root body.mdb-complete-site .mdb-main.mdb-category-v138 :is(.mdb-catalogue-intro,.mdb-catalogue-help) .mdb-button{border-radius:999px;text-transform:none;letter-spacing:0;font-weight:700;padding:15px 24px} :root body.mdb-complete-site .mdb-main.mdb-category-v138 :is(.mdb-catalogue-intro,.mdb-catalogue-help) .mdb-button-dark{background:var(--sd-aqua)!important;color:var(--sd-ink)!important;border-color:transparent;box-shadow:0 6px 16px rgba(73,195,201,.35)} :root body.mdb-complete-site .mdb-main.mdb-category-v138 :is(.mdb-catalogue-intro,.mdb-catalogue-help) .mdb-button-dark:hover{background:#5BCDD2!important;color:var(--sd-ink)!important} :root body.mdb-complete-site .mdb-main.mdb-category-v138 .mdb-catalogue-help .mdb-button-light{background:#fff!important;color:var(--sd-ink)!important;box-shadow:inset 0 0 0 1.5px #D9D4CA} :root body.mdb-complete-site .mdb-main.mdb-category-v138 .mdb-catalogue-toolbar select{border-radius:999px;border:1px solid #D9D4CA;padding:10px 38px 10px 16px;background-color:#fff} :root body.mdb-complete-site .mdb-main.mdb-category-v138 .woocommerce ul.products li.mdb-catalogue-product{border:0;border-radius:var(--sd-r-lg);background:#fff;box-shadow:var(--sd-shadow);overflow:hidden;transition:box-shadow .2s} :root body.mdb-complete-site .mdb-main.mdb-category-v138 .woocommerce ul.products li.mdb-catalogue-product:hover{box-shadow:0 14px 34px rgba(43,50,64,.12)} :root body.mdb-complete-site .mdb-main.mdb-category-v138 .woocommerce ul.products li.mdb-catalogue-product .mdb-catalogue-product-media img{border-radius:0} :root body.mdb-complete-site .mdb-main.mdb-category-v138 .woocommerce ul.products li.mdb-catalogue-product .woocommerce-loop-product__title{font-family:var(--sd-font);font-weight:800;letter-spacing:-.01em;color:var(--sd-slate)} :root body.mdb-complete-site .mdb-main.mdb-category-v138 .woocommerce ul.products li.mdb-catalogue-product a.mdb-catalogue-configure{border-radius:999px!important;background:var(--sd-aqua)!important;color:var(--sd-ink)!important;text-transform:none!important;letter-spacing:0!important;font-weight:700;box-shadow:0 6px 16px rgba(73,195,201,.35)} :root body.mdb-complete-site .mdb-main.mdb-category-v138 .woocommerce ul.products li.mdb-catalogue-product a.mdb-catalogue-configure:hover{background:#5BCDD2!important} @media (max-width:680px){ :root body.mdb-complete-site .mdb-main.mdb-category-v138 .mdb-catalogue-intro{width:auto;margin-left:12px;margin-right:12px;border-radius:18px} } /* 36. CHARCOAL OUTLINES (d5) — Aaron: "are my buttons meant to have this charcoal outline?" No. a) "Add to cart" / "Calculate" in the purchase bar: the visualiser's own 1px charcoal border is now removed for certain (block 30 uses !important). b) The "?" next to "Spend & Save available" drew a thick charcoal ring on hover: now it fills slate instead, and shows an aqua ring only when reached with the keyboard. c) Cart remove / edit buttons: same, no charcoal ring on hover; aqua ring for keyboard use. d) The popup's "Back to my blind" border is in block 31. Undo: delete this block. */ :root body.mdb-complete-site .mdb-as-low-help button:hover{outline:0;background:var(--sd-slate);color:#fff;border-color:var(--sd-slate)} :root body.mdb-complete-site .mdb-as-low-help button:focus-visible{outline:2px solid var(--sd-aqua-d);outline-offset:3px} :root body.mdb-complete-site .mdb-cart-shell table.shop_table tr.cart_item .product-remove :is(a.remove,.uni-cpo-action-edit):hover{outline:0} :root body.mdb-complete-site .mdb-cart-shell table.shop_table tr.cart_item .product-remove :is(a.remove,.uni-cpo-action-edit):focus-visible{outline:2px solid var(--sd-aqua-d);outline-offset:3px} /* 37. OLD-SITE LEFTOVERS (d5) — found by checking every page linked from the header and footer. a) The header "Build & Order" button and the measuring / installation guide pages were still set to "Avenir Next", a font the site never loads, so each computer showed its own fallback (Segoe UI on Windows). They now use Figtree like the rest of the site. Elementor's global fonts (Roboto / Roboto Slab) point to Figtree too, for any widget that still uses them. b) The measuring guide pages (Core's separate guide template, a square white sheet) get the D card look: rounded white panel with a soft shadow. c) The contact form's "Send enquiry" button (Gravity Forms) was a square slate button: now the aqua pill used everywhere else. (!important only on the installation guide, where Core's installation-v3-native.css forces it.) Undo: delete this block. */ :root body.mdb-complete-site{--e-global-typography-primary-font-family:"Figtree";--e-global-typography-secondary-font-family:"Figtree";--e-global-typography-accent-font-family:"Figtree";--e-global-typography-text-font-family:"Figtree"} :root body.mdb-complete-site .mdb-header a.mdb-header-order, :root body.mdb-complete-site :is(.mdb-measuring,.mdb-install-guide){font-family:var(--sd-font)} :root body.mdb-complete-site .mdb-elementor-document .mdb-install-guide.e-con, :root body.mdb-complete-site .mdb-install-guide :is(.elementor-heading-title,.elementor-widget-text-editor,.elementor-widget-text-editor *){font-family:var(--sd-font)!important} :root body.mdb-complete-site .mdb-elementor-document main.mdb-measuring{margin-top:24px;margin-bottom:40px;border-radius:24px;box-shadow:var(--sd-shadow-lg);overflow:hidden} :root body.mdb-complete-site .gform_wrapper :is(.gform_button,input[type="submit"]){border:0!important;border-radius:999px!important;background:var(--sd-aqua)!important;color:var(--sd-ink)!important;font-family:var(--sd-font);font-weight:700;text-transform:none;letter-spacing:0;padding:15px 28px!important;box-shadow:0 6px 16px rgba(73,195,201,.35);cursor:pointer} :root body.mdb-complete-site .gform_wrapper :is(.gform_button,input[type="submit"]):hover{background:#5BCDD2!important} @media (max-width:680px){ :root body.mdb-complete-site .mdb-elementor-document main.mdb-measuring{margin:12px;border-radius:18px} } /* 38. RULED GRIDS AND SQUARE CARDS ON THE INFORMATION PAGES (d6) — Aaron, 24 Sep: "dont think this part looks proper" (Vertical Blinds, "Why choose vertical blinds"). Core draws these grids as a teal or grey block with 1px gaps, so the gaps showed as thick coloured bars and every card was square and stretched to a fixed tall height. Found on Vertical, Panel Glide, the three Venetian pages, Curtains, Plantation Shutters, Delivery, Why My Direct, Warranty & SureFit, Spend & Save and the new landing pages. Now: separate white rounded cards with a soft shadow and a real gap, only as tall as their words; the small number sits top right in grey. a) "Why choose" grids (.mdb-benefit-grid), Spend & Save steps and programmes, Warranty cards. b) "Everyday operation" cards on the slate band: white rounded cards, no grey border. c) "Before you order" band: was a full-width square mist strip; now a rounded pale-aqua panel set in from the edges like the other bands, with the right-hand column as a white card. d) Shutter help centre side panel: rounded pale-aqua card. Undo: delete this block. */ :root body.mdb-complete-site .mdb-elementor-document :is(.mdb-benefit-grid,.mdb-spend-steps){background:transparent;border:0;gap:18px} :root body.mdb-complete-site .mdb-elementor-document :is(.mdb-benefit-grid,.mdb-spend-steps)>article, :root body.mdb-complete-site .mdb-elementor-document :is(.mdb-spend-program,.mdb-path-grid>article){position:relative;min-height:0;background:#fff;border:0;border-radius:18px;box-shadow:var(--sd-shadow);padding:28px 28px 30px} :root body.mdb-complete-site .mdb-elementor-document .mdb-benefit-grid>article>span{top:26px;right:26px;font-size:13px;font-weight:800;letter-spacing:.08em;color:#A5AEB9} :root body.mdb-complete-site .mdb-elementor-document .mdb-benefit-grid>article>h3{padding-right:34px} :root body.mdb-complete-site .mdb-elementor-document .mdb-discovery-controls .mdb-control-card{border:0;border-radius:18px;box-shadow:none} :root body.mdb-complete-site .mdb-elementor-document .mdb-discovery-help{margin:40px auto;width:calc(100% - 64px);max-width:none;box-sizing:border-box;border-radius:24px;background:linear-gradient(135deg,#E4F5F6,#EEF6F6);padding:56px clamp(28px,5vw,72px)!important} :root body.mdb-complete-site .mdb-elementor-document .mdb-discovery-help>div:last-child{align-self:start;background:#fff;border-radius:18px;padding:28px;box-shadow:var(--sd-shadow)} :root body.mdb-complete-site .mdb-guide aside{border-radius:18px;background:var(--sd-aqua-t)} @media (max-width:680px){ :root body.mdb-complete-site .mdb-elementor-document :is(.mdb-benefit-grid,.mdb-spend-steps)>article, :root body.mdb-complete-site .mdb-elementor-document :is(.mdb-spend-program,.mdb-path-grid>article){padding:22px} :root body.mdb-complete-site .mdb-elementor-document .mdb-discovery-help{margin:16px auto;width:calc(100% - 24px);border-radius:20px;padding:28px 18px!important} :root body.mdb-complete-site .mdb-elementor-document .mdb-discovery-help>div:last-child{padding:22px} } /* 39. EVERY PRODUCT PAGE, NOT ONLY THE ROLLER (d6) — the curtain, vertical, venetian, panel glide and shutter product pages still showed old pieces the roller page no longer has. a) The story sections under the form ("Engineered for daily use", the numbered cards and the three control cards) get the same look as on the landing pages (blocks 12, 13 and 16 only reached pages built in Elementor; product pages are built by WooCommerce). b) The small proof box under the photos and the teal notices inside the form ("Measurement notice", "Price", "Expert Review") are rounded. c) "Check required options" (the button shown until every option is picked) was a square white button with a charcoal outline: now a pale pill that matches the aqua Add to cart. d) The option names, notes and drop-down menus were set to "Avenir Next" by Core's native-cpo.css (a font the site never loads): now Figtree like the rest of the page. (!important only where Core's native-cpo.css already uses it.) Undo: delete this block. */ :root body.mdb-complete-site main.mdb-woocommerce .mdb-superiority-lead{background:linear-gradient(135deg,#E4F5F6,#EEF6F6);border-radius:20px} :root body.mdb-complete-site main.mdb-woocommerce .mdb-engineering-grid{background:transparent;gap:16px;border:0} :root body.mdb-complete-site main.mdb-woocommerce .mdb-engineering-grid>article{background:#fff;border:0;border-radius:18px;box-shadow:var(--sd-shadow);padding:28px;min-height:0} :root body.mdb-complete-site main.mdb-woocommerce .mdb-engineering-grid>article svg.mdb-icon{box-sizing:content-box;width:24px;height:24px;padding:12px;border-radius:14px;background:var(--sd-aqua-t);color:var(--sd-aqua-d);stroke:var(--sd-aqua-d)} :root body.mdb-complete-site main.mdb-woocommerce .mdb-engineering-grid>article>span{color:#A5AEB9;font-weight:800;letter-spacing:.08em} :root body.mdb-complete-site main.mdb-woocommerce :is(.mdb-control-section,.mdb-final){margin:40px auto;width:calc(100% - 64px);max-width:none;border-radius:24px;overflow:hidden;box-shadow:var(--sd-shadow-lg)} :root body.mdb-complete-site main.mdb-woocommerce .mdb-control-options{gap:16px;background:transparent} :root body.mdb-complete-site main.mdb-woocommerce .mdb-control-options>article{background:var(--sd-slate-d);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:30px} :root body.mdb-complete-site main.mdb-woocommerce .mdb-control-options>article svg.mdb-icon{box-sizing:content-box;width:24px;height:24px;padding:12px;border-radius:14px;background:rgba(73,195,201,.18);color:var(--sd-aqua);stroke:var(--sd-aqua)} :root body.mdb-complete-site.mdb-native-cpo .mdb-product-media-proof{border:0;border-radius:16px;box-shadow:var(--sd-shadow)} :root body.mdb-complete-site.mdb-native-cpo .product .uni-module-dynamic_notice .js-uni-cpo-field-dynamic_notice:not(:empty){border-radius:14px;border-color:transparent;background:var(--sd-aqua-t)} :root body.mdb-complete-site.mdb-native-cpo .product :is([data-mdb-purchase='price'],.mdb-native-price){border-radius:16px 16px 0 0!important} :root body.mdb-complete-site.mdb-native-cpo .product :is([data-mdb-purchase='protection'],.mdb-native-protection){border-radius:0 0 16px 16px!important} :root body.mdb-complete-site.mdb-native-cpo .product .mdb-cpo-validation-notice{border-radius:12px} :root body.mdb-complete-site.mdb-native-cpo #uni_cpo_options .uni-module-dynamic_notice:is([id*="_pricedisplay_"],[id*="_price_display_"]){border-radius:16px;box-shadow:var(--sd-shadow)} :root body.mdb-complete-site.mdb-native-cpo .product form.cart .mdb-cpo-invalid-trigger{border:0!important;border-radius:999px!important;background:var(--sd-aqua-h)!important;color:var(--sd-slate)!important;font-family:var(--sd-font);font-weight:700;text-transform:none;letter-spacing:0;box-shadow:inset 0 0 0 1.5px rgba(73,195,201,.55)} :root body.mdb-complete-site.mdb-native-cpo .product form.cart .mdb-cpo-invalid-trigger:hover{background:var(--sd-aqua-t)!important} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options{font-family:var(--sd-font)} :root body.mdb-complete-site.mdb-native-cpo .product select.js-uni-cpo-field{font-family:var(--sd-font)!important} @media (max-width:680px){ :root body.mdb-complete-site main.mdb-woocommerce :is(.mdb-control-section,.mdb-final){margin:16px auto;width:calc(100% - 24px);border-radius:20px} :root body.mdb-complete-site main.mdb-woocommerce :is(.mdb-engineering-grid,.mdb-control-options)>article{padding:22px} } /* 40. INSTALLATION GUIDES (d6) — the product installation pages (Roller, Motorised, Linked, Cassette, Fascia, Timber and PVC shutters, curtains, venetians, panel glide, vertical ...). "Download the PDF" was a square slate button; the PDF / video cards, safety panels, contents box and step pictures were square boxes; picture captions were still in "Avenir Next". Now: slate pill button, rounded panels, rounded picture cards, Figtree throughout. (Core's installation-v3-native.css squares every corner on these pages with "border-radius:0!important", so the rounded corners here need !important too.) Undo: delete this block. */ :root body.mdb-complete-site .mdb-install-guide a.ig-download{border-radius:999px!important;padding:13px 22px;background:var(--sd-slate);font-weight:700;gap:8px;align-items:center} :root body.mdb-complete-site .mdb-install-guide a.ig-download:hover{background:var(--sd-aqua-d)} :root body.mdb-complete-site .mdb-install-guide .ig-resource-card{border:0!important;border-radius:16px!important;background:var(--sd-aqua-t)} :root body.mdb-complete-site .mdb-install-guide :is(.ig-safety-alert,.ig-safety){border-left:0!important;border-radius:16px!important;overflow:hidden;background:var(--sd-aqua-t)!important} :root body.mdb-complete-site .mdb-install-guide .ig-toc{border-radius:16px!important} :root body.mdb-complete-site .mdb-install-guide :is(.ig-native-figure,figure){border:0;border-radius:18px!important;box-shadow:var(--sd-shadow);overflow:hidden} :root body.mdb-complete-site .mdb-install-guide :is(.ig-native-figure,figure) img{border-radius:10px!important} :root body.mdb-complete-site .mdb-install-guide :is(.ig-native-figure,.ig-native-figure *,figcaption){font-family:var(--sd-font)!important} /* 41. MEASURING GUIDES (d6) — the measuring pages' pictures sat in square bordered boxes, and the /measure/ and /measure-guides/ directories and their product cards were square white sheets. Now rounded white cards with a soft shadow (the measuring pages themselves are block 37b). Undo: delete this block. */ :root body.mdb-complete-site .mdb-measuring :is(.mdb-measuring-figures figure,.mdb-measuring-figure){border:0;border-radius:16px;box-shadow:0 2px 12px rgba(43,50,64,.07)} :root body.mdb-complete-site .mdb-measuring .mdb-measuring-figures img{border-radius:10px} :root body.mdb-complete-site .mdb-elementor-document section.mdb-measuring-directory{margin-top:24px;margin-bottom:40px;border-radius:24px;box-shadow:var(--sd-shadow-lg);overflow:hidden} :root body.mdb-complete-site .mdb-measure-family{border:0!important;border-radius:18px;box-shadow:var(--sd-shadow);overflow:hidden} /* 42. FORMS (d6) — Aaron: "are the field and buttons there normal? i think it hasnt been restyled". The contact form (Gravity Forms), the login / account forms and the shop sort menu still had Core's square beige boxes. Now: white rounded fields with a light warm border, a clear aqua ring while typing, bold field names, and a drawn arrow on drop-downs. The shutter help centre search box gets the same rounded field. Undo: delete this block. */ /* fields: text, e-mail, phone, number, password and big text boxes */ :root body.mdb-complete-site :is(.gform_wrapper,.woocommerce form .form-row,.mdb-guide-search) :is(input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="image"]),textarea){box-sizing:border-box;min-height:50px;background:#fff;border:1px solid #D9D4CA!important;border-radius:12px!important;padding:13px 15px!important;font-family:var(--sd-font);font-size:15.5px;line-height:1.4;color:var(--sd-ink);box-shadow:none;transition:border-color .15s,box-shadow .15s} /* drop-down menus: the same box with a drawn arrow */ :root body.mdb-complete-site :is(.gform_wrapper,.woocommerce form .form-row,.woocommerce-ordering) select{box-sizing:border-box;min-height:50px;-webkit-appearance:none;appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23444E60' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center/16px 16px;border:1px solid #D9D4CA!important;border-radius:12px!important;padding:12px 42px 12px 15px!important;font-family:var(--sd-font);font-size:15.5px;line-height:1.4;color:var(--sd-ink);box-shadow:none;cursor:pointer} :root body.mdb-complete-site :is(.gform_wrapper,.woocommerce form .form-row,.woocommerce-ordering,.mdb-guide-search) :is(input,textarea,select):focus{border-color:var(--sd-aqua)!important;box-shadow:0 0 0 3px rgba(73,195,201,.25);outline:none} :root body.mdb-complete-site .gform_wrapper textarea{min-height:140px} :root body.mdb-complete-site .woocommerce-ordering select{width:auto;min-width:230px} :root body.mdb-complete-site :is(.gform_wrapper .gfield_label,.woocommerce form .form-row>label){font-family:var(--sd-font);font-size:14px;font-weight:700;color:var(--sd-slate)} :root body.mdb-complete-site .gform_wrapper{--gf-local-font-family:var(--sd-font)} :root body.mdb-complete-site .mdb-guide-search input{width:auto} /* 43. WOOCOMMERCE BUTTONS, SHOP AND CHECKOUT (d6) — Core's site.css forces every WooCommerce button (shop "Select options", account "Log in", order buttons ...) to a square navy block with !important. Now: rounded slate pill (the aqua pills set in blocks 22, 24, 25 and 30 stay aqua). The /shop/ product tiles become white rounded cards, and the payment method box at checkout (WooCommerce's default lavender grey) turns warm white. Undo: delete this block. */ :root body.mdb-complete-site .woocommerce :is(a.button,button.button,input.button,#respond input#submit){border-radius:999px!important;font-family:var(--sd-font);font-weight:700;text-transform:none;letter-spacing:0} :root body.mdb-complete-site .woocommerce.mdb-shop ul.products li.product{background:#fff;border-radius:18px;box-shadow:var(--sd-shadow);padding:14px 14px 18px;box-sizing:border-box} :root body.mdb-complete-site .woocommerce.mdb-shop ul.products li.product img{border-radius:12px} :root body.mdb-complete-site .woocommerce.mdb-shop ul.products li.product .button{background:var(--sd-slate)!important;color:#fff!important;padding:11px 18px!important} :root body.mdb-complete-site .woocommerce.mdb-shop ul.products li.product .button:hover{background:var(--sd-aqua-d)!important} :root body.mdb-complete-site .woocommerce-checkout #payment :is(ul.payment_methods,div.payment_box){background:#FBFAF8;border-radius:14px} :root body.mdb-complete-site .woocommerce-checkout #payment li.wc_payment_method{background:transparent} :root body.mdb-complete-site .woocommerce-checkout #payment div.payment_box::before{border-bottom-color:#FBFAF8} /* 44. MY ACCOUNT (d6) — once Core patch p4's "Use the site layout on My Account" has been run, the account page uses the site's header and footer instead of the default WordPress theme. This block gives the login form and the account menu the same cards as the rest of the site. Undo: delete this block. */ :root body.mdb-complete-site .mdb-account-page :is(form.woocommerce-form-login,form.woocommerce-form-register,form.woocommerce-ResetPassword,.woocommerce-MyAccount-content){background:#fff;border:0;border-radius:22px;box-shadow:var(--sd-shadow-lg);padding:clamp(22px,3vw,36px);margin:0 0 24px} :root body.mdb-complete-site .mdb-account-page .woocommerce-MyAccount-navigation ul{list-style:none;margin:0 0 24px;padding:8px;background:#fff;border-radius:18px;box-shadow:var(--sd-shadow)} :root body.mdb-complete-site .mdb-account-page .woocommerce-MyAccount-navigation a{display:block;padding:11px 14px;border-radius:12px;color:var(--sd-slate);font-weight:600;text-decoration:none} :root body.mdb-complete-site .mdb-account-page .woocommerce-MyAccount-navigation :is(a:hover,.is-active a){background:var(--sd-aqua-h);color:var(--sd-ink)} :root body.mdb-complete-site .mdb-account-page .woocommerce :is(button.button,a.button){background:var(--sd-aqua)!important;color:var(--sd-ink)!important;border:0!important;padding:14px 26px!important} /* 45. HELP POPUP FONT (d6) — the product "?" guides were set to "Avenir Next" by Core's roller-guides.css; now Figtree (sizes and weights unchanged). Undo: delete this block. */ :root body.mdb-complete-site .mdb-roller-guide, :root body.mdb-complete-site .mdb-roller-guide h2, :root body.mdb-complete-site .pum.mdb-guide-popup .pum-container>.pum-content+.pum-close{font-family:var(--sd-font)} /* 46. NEW LANDING PAGES (d6, with Core patch p4) — the 34 room, colour and product pages reuse the existing page parts, so they are styled by the blocks above. Only two things are new: a) the colour pages' live grid of free samples (Core's sample cards, a little smaller here); b) the hero picture on these pages is a room photo, so it keeps a soft shadow like block 17. Undo: delete this block. */ :root body.mdb-complete-site .mdb-colour-samples-section .mdb-colour-samples{margin-top:8px} :root body.mdb-complete-site .mdb-colour-samples .mdb-fs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px} :root body.mdb-complete-site .mdb-colour-samples .mdb-colour-samples__more{display:inline-flex;margin-top:22px} @media (max-width:680px){ :root body.mdb-complete-site .mdb-colour-samples .mdb-fs-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} } /* 47. HERO: "BLEND B" (d6) — Aaron, 24 Sep: keep D's soft card, but "apply gradient and blend image across" (mockup hero-blend-mockup.html, option B). The photo now runs under the whole card; a slate fade sits behind the words on the left; the bottom of the photo dissolves into the page colour and the proof cards lift up over it. Wide screens no longer show a half-empty slate panel. The hero stops growing at 2400px wide so ultrawide screens do not crop the photo to a thin strip. Phones and portrait tablets (up to 900px): the photo sits clear at the top (300-370px tall, product fully visible, no tint), and only its bottom edge fades into the slate panel behind the words (Aaron 24 Sep: "images sell the product" - the first d6 draft started the fade at the top and put the heading over the blind). --sd-hp is the photo height; the fade and the text start follow it. Applies to every photo hero (product family pages, the new landing pages and the home page slides); text-only heroes (Contact, Products ...) are unchanged. Photos: 3:1 files with the product right of centre crop best (see the Spacely brief in the project notes). (!important only where Core's homepage-v13916.css and elementor.css size the photo with it.) Undo: delete this block (block 8's split card comes back). */ @media (min-width:901px){ :root body.mdb-complete-site .mdb-elementor-document .mdb-product-hero.mdb-page-hero{position:relative;isolation:isolate;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:clamp(470px,31vw,700px);max-width:2400px;background:transparent;box-shadow:none} :root body.mdb-complete-site .mdb-elementor-document .mdb-product-hero.mdb-page-hero>.mdb-product-hero-copy{position:relative;z-index:1;background:transparent;padding-bottom:clamp(128px,10vw,170px)} } :root body.mdb-complete-site .mdb-elementor-document .mdb-product-hero.mdb-page-hero>:is(.mdb-product-hero-photo,.mdb-home-gallery){position:absolute!important;inset:0;z-index:-3;width:100%!important;height:100%!important;min-height:0!important;max-height:none!important;margin:0;border-radius:0} :root body.mdb-complete-site .mdb-elementor-document .mdb-product-hero.mdb-page-hero>.mdb-product-hero-photo{object-fit:cover;object-position:68% 50%} :root body.mdb-complete-site .mdb-elementor-document .mdb-product-hero.mdb-page-hero::before, :root body.mdb-complete-site .mdb-elementor-document .mdb-product-hero.mdb-page-hero::after{content:"";position:absolute;inset:0;pointer-events:none} :root body.mdb-complete-site .mdb-elementor-document .mdb-product-hero.mdb-page-hero::before{z-index:-2;background:linear-gradient(90deg,rgba(58,67,83,.97) 0%,rgba(58,67,83,.92) 26%,rgba(58,67,83,.6) 44%,rgba(58,67,83,.16) 62%,rgba(58,67,83,0) 78%)} :root body.mdb-complete-site .mdb-elementor-document .mdb-product-hero.mdb-page-hero::after{z-index:-1;background:linear-gradient(0deg,var(--sd-bg) 0,rgba(246,244,239,.82) 44px,rgba(246,244,239,0) 124px)} :root body.mdb-complete-site .mdb-elementor-document .mdb-product-hero.mdb-page-hero+.mdb-product-proof{position:relative;z-index:2;margin-top:-96px;max-width:2464px;margin-left:auto;margin-right:auto;box-sizing:border-box} :root body.mdb-complete-site .mdb-elementor-document .mdb-product-hero.mdb-page-hero+.mdb-product-proof>div{box-shadow:0 12px 30px rgba(43,50,64,.12)} /* home page slides: the product caption moves to the top right, the slide buttons stay clear of the fade */ :root body.mdb-complete-site .mdb-home-hero .mdb-home-gallery .mdb-home-caption{left:auto!important;right:24px!important;top:24px!important;bottom:auto!important;width:min(400px,34%)!important;padding:14px 18px!important} :root body.mdb-complete-site .mdb-home-hero .mdb-home-gallery .mdb-home-slider-ui{margin:0 24px 200px 0!important} @media (max-width:900px){ :root body.mdb-complete-site .mdb-elementor-document .mdb-product-hero.mdb-page-hero{--sd-hp:clamp(300px,42vw,370px);position:relative;isolation:isolate;display:block;min-height:0;background:transparent;box-shadow:none} :root body.mdb-complete-site .mdb-elementor-document .mdb-product-hero.mdb-page-hero>:is(.mdb-product-hero-photo,.mdb-home-gallery){inset:0 0 auto 0;height:var(--sd-hp)!important} :root body.mdb-complete-site .mdb-elementor-document .mdb-product-hero.mdb-page-hero>.mdb-product-hero-photo{object-position:70% 50%} :root body.mdb-complete-site .mdb-elementor-document .mdb-product-hero.mdb-page-hero::before{background:linear-gradient(180deg,rgba(58,67,83,0) 0,rgba(58,67,83,0) calc(var(--sd-hp) - 110px),rgba(58,67,83,.72) calc(var(--sd-hp) - 54px),rgba(58,67,83,.95) calc(var(--sd-hp) - 18px),#3A4353 calc(var(--sd-hp) + 6px))} :root body.mdb-complete-site .mdb-elementor-document .mdb-product-hero.mdb-page-hero::after{background:linear-gradient(0deg,var(--sd-bg) 0,rgba(246,244,239,0) 96px)} :root body.mdb-complete-site .mdb-elementor-document .mdb-product-hero.mdb-page-hero>.mdb-product-hero-copy{position:relative;z-index:1;background:transparent;padding:calc(var(--sd-hp) - 50px) 22px 104px} :root body.mdb-complete-site .mdb-elementor-document .mdb-product-hero.mdb-page-hero+.mdb-product-proof{margin-top:-72px} :root body.mdb-complete-site .mdb-home-hero .mdb-home-gallery .mdb-home-caption{display:none!important} :root body.mdb-complete-site .mdb-home-hero .mdb-home-gallery .mdb-home-slider-ui{align-self:start!important;margin:12px 12px 0 0!important} } /* 48. PRODUCT FORM TIDY-UP (d7) — Aaron, 24 Sep, on the visualiser product page. Looks only; no Uni CPO option, price, rule or picture changes. a) The "?" sat right against the field name ("Rubber Insert?"): 6px gap. Width and Drop already have a 7px gap (they are laid out in a row), so they are left out. b) The Width / Drop arrow icon now comes before the words ("↔ Width (mm)") instead of after. c) Fabric ranges and the Yes/No fields had an extra 12px above and below them (Uni CPO's invisible clearfix pieces count as rows once d5 lays those fields out in a row), so the gaps between fields jumped between 20 and 44px. Those pieces are switched off there, and every field now ends 24px above the next field name. d) Phones: picture tiles three to a row (chain colour, control, mount type were two to a row and too big). The wide base-rail pictures keep two to a row. e) The Calculate button in the form had a black 1.6px "outset" border from the theme: removed. f) "As low as $284.70 with Spend & Save*": the dollar figure in brand aqua, a little larger. Undo: delete this block. */ :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module>label:not(.uni-cpo-option-label):not([for^="uni_cpo_width_"]):not([for^="uni_cpo_height_"]) .uni-cpo-tooltip{margin-left:6px} :root body.mdb-complete-site.mdb-native-cpo .product :is(label[for^="uni_cpo_width_"],label[for^="uni_cpo_height_"])::before{order:-1} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module:is(.mdb-native-range,.uni-module-radio-text-mode):not([id^="uni_cpo_roomname"]):not([id^="uni_cpo_mounttype"]):not([id^="uni_cpo_blind_control_"]):not([id^="uni_cpo_bracket_and_component_colour"])::before, :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module:is(.mdb-native-range,.uni-module-radio-text-mode)::after{content:none!important;display:none!important} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module-radio-image-mode.mdb-native-range>input:checked:not([hidden])+label.uni-cpo-option-label:not(.mdb-badge-popular)>.uni-cpo-option-label__image-wrap::before{top:0} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module:not(.uni-module-text):not(.uni-module-dynamic_notice){margin-bottom:24px} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module-radio-image-mode:not(.mdb-native-range){margin-bottom:18px} :root body.mdb-complete-site.mdb-native-cpo .product .uni-cpo-calculate-btn{border:0!important;outline:0} :root body.mdb-complete-site.mdb-native-cpo .product .uni-cpo-calculate-btn:focus-visible{outline:2px solid var(--sd-aqua-d);outline-offset:3px} :root body.mdb-complete-site .mdb-as-low>strong, :root body.mdb-complete-site #bpv-purchase-bar #bpv-bar-savings>strong{color:var(--sd-aqua-d)!important;font-weight:800!important} :root body.mdb-complete-site #bpv-purchase-bar #bpv-bar-savings>strong{font-size:14px!important} @media (max-width:680px){ :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module-radio-image-mode:not(.mdb-native-range):not([id^="uni_cpo_base_rail_colour"])>label.uni-cpo-option-label{width:calc(100%/3 - 6px)!important;max-width:none!important;flex:0 0 auto!important;margin:4px 6px 4px 0!important} } /* 49. PICTURE, VIEWS AND POPUPS ON THE PRODUCT PAGE (d7) — looks only; the visualiser plugin's own behaviour is not changed. a) The colour name chip ("Opulence Cobalt") and the "Fully closed / Partly open" view buttons sat under the picture, where the floating price bar could cover them when the window was resized. They now sit on the picture itself, along its top edge (chip left, view buttons right; the curtain open/closed views will use the same spot). Top rather than bottom: on laptop-height screens the bottom of the picture runs under the floating price bar. The picture and those controls share one grid cell; nothing else moves. d10: block 59 d) moves them to the bottom left (Aaron: the top shows the blind's hardware). b) View fabric, Show configuration and SureFit windows: rounded card, soft aqua header, round close button, rounded fabric photo, the configuration as tidy rows (they were square with a grey box). c) Phones: the "Views" tab on the right edge becomes a rounded white tab with an aqua icon, and the View blind / View fabric / Show configuration buttons it opens are pills. d) "View blind": the full-screen picture now opens at once instead of zooming out of the small picture (the zoom played while the large image was still being prepared, which read as a flicker). PhotoSwipe's own fade/zoom only; the picture itself is the visualiser's. e) Help popups: fabric swatches with rounded corners like the rest of the site (they were square with a grey line), and choice pictures (base rails, etc.) as small rounded cards on a warm grey background with the name underneath, like the first mockup (white rails were invisible on white). Undo: delete this block. */ :root body.mdb-complete-site.mdb-native-cpo .mdb-product-media-sticky:has(>#bpv-tools){display:grid;grid-template-columns:minmax(0,1fr)} :root body.mdb-complete-site.mdb-native-cpo .mdb-product-media-sticky:has(>#bpv-tools)>*{grid-area:1/1} :root body.mdb-complete-site.mdb-native-cpo .mdb-product-media-sticky>#bpv-tools{position:relative;z-index:4;align-self:start;justify-self:center;display:flex!important;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:8px;box-sizing:border-box;width:var(--bpv-stage-size,100%)!important;max-width:100%!important;margin:14px 0 0!important;padding:0 14px;pointer-events:none} :root body.mdb-complete-site.mdb-native-cpo .mdb-product-media-sticky>#bpv-tools>*{pointer-events:auto;min-width:0} :root body.mdb-complete-site.mdb-native-cpo .mdb-product-media-sticky>#bpv-tools>[hidden], :root body.mdb-complete-site.mdb-native-cpo .mdb-product-media-sticky>#bpv-tools .bpv-proof-feedback:not(:has(:not([hidden]))){display:none!important} :root body.mdb-complete-site.mdb-native-cpo #bpv-tools #bpv-status{max-width:100%;padding:7px 13px;background:rgba(58,67,83,.88);box-shadow:0 4px 14px rgba(20,25,35,.2);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);line-height:1.35;white-space:normal} :root body.mdb-complete-site.mdb-native-cpo #bpv-tools :is(#bpv-retry-scene,#bpv-retry-proof,#bpv-proof-status){padding:6px 12px;border:0;border-radius:999px;background:rgba(255,255,255,.92);color:var(--sd-slate);font:700 12px/1.3 var(--sd-font);text-decoration:none} :root body.mdb-complete-site.mdb-native-cpo #bpv-tools .bpv-cassette-views{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:rgba(255,255,255,.9);box-shadow:0 4px 14px rgba(20,25,35,.16);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} :root body.mdb-complete-site.mdb-native-cpo #bpv-tools .bpv-cassette-views>button{min-height:32px;padding:0 13px;border:0!important;border-radius:999px!important;background:transparent;color:var(--sd-slate);font:700 12.5px/1 var(--sd-font)} :root body.mdb-complete-site.mdb-native-cpo #bpv-tools .bpv-cassette-views>button[aria-pressed="true"]{background:var(--sd-slate);color:#fff} :root body.mdb-complete-site .bpv-dialog{padding:0 22px 22px;border:0;border-radius:22px;background:#fff;color:var(--sd-slate);font-family:var(--sd-font);box-shadow:0 30px 80px rgba(20,25,35,.3)} :root body.mdb-complete-site .bpv-dialog::backdrop{background:rgba(43,50,64,.55)} :root body.mdb-complete-site .bpv-dialog .bpv-dialog-header{top:0;align-items:center;margin:0 -22px 18px;padding:18px 22px 16px;border-bottom:0;background:linear-gradient(180deg,var(--sd-aqua-t),#F2FAFA)} :root body.mdb-complete-site .bpv-dialog .bpv-dialog-header h2{margin:0;font:800 21px/1.25 var(--sd-font);letter-spacing:-.01em;color:var(--sd-ink)} :root body.mdb-complete-site .bpv-dialog .bpv-dialog-header>button{border:0;border-radius:50%;background:#fff;color:var(--sd-slate);font-size:24px;box-shadow:0 4px 14px rgba(43,50,64,.14)} :root body.mdb-complete-site .bpv-dialog .bpv-dialog-header>button:is(:hover,:focus-visible){background:var(--sd-slate);color:#fff} :root body.mdb-complete-site .bpv-dialog img#bpv-full-proof{display:block;width:100%;height:auto;border-radius:16px;box-shadow:0 0 0 1px var(--sd-line)} :root body.mdb-complete-site .bpv-dialog #bpv-configuration-list{margin:0} :root body.mdb-complete-site .bpv-dialog #bpv-configuration-list>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;padding:11px 2px;border-bottom:1px solid var(--sd-line)} :root body.mdb-complete-site .bpv-dialog #bpv-configuration-list>div:last-child{border-bottom:0} :root body.mdb-complete-site .bpv-dialog #bpv-configuration-list dt{color:var(--sd-muted);font-weight:600;font-size:14.5px} :root body.mdb-complete-site .bpv-dialog #bpv-configuration-list dd{margin:0;color:var(--sd-ink);font-weight:700;font-size:14.5px;text-align:right} :root body.mdb-complete-site .bpv-dialog #bpv-bar-details strong{display:block;margin:0 0 6px;font-size:17px;color:var(--sd-ink)} :root body.mdb-complete-site .bpv-dialog #bpv-bar-details span{display:block;color:var(--sd-muted);font-size:14.5px;line-height:1.6} :root body.mdb-complete-site .bpv-dialog #bpv-bar-details a{display:inline-flex;margin-top:14px;padding:11px 18px;border-radius:999px;background:var(--sd-aqua);color:var(--sd-ink);font-weight:700;text-decoration:none} :root body.mdb-complete-site #bpv-edge-menu>summary{border:0!important;border-radius:16px 0 0 16px;background:#fff;color:var(--sd-slate);box-shadow:0 6px 20px rgba(43,50,64,.16);font-family:var(--sd-font)} :root body.mdb-complete-site #bpv-edge-menu>summary svg{color:var(--sd-aqua-d)} :root body.mdb-complete-site #bpv-edge-menu>summary>span{font-weight:800;font-size:10.5px;letter-spacing:.02em} :root body.mdb-complete-site #bpv-edge-menu[open]>summary{background:var(--sd-aqua-t)} :root body.mdb-complete-site #bpv-edge-menu .bpv-edge-actions{gap:6px;padding:8px;border:0!important;border-radius:18px 0 0 18px;background:#fff;box-shadow:0 10px 30px rgba(43,50,64,.18)} :root body.mdb-complete-site #bpv-edge-menu .bpv-edge-actions>button{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border:0!important;border-radius:999px!important;background:#F3F1EC;color:var(--sd-slate);font:600 13px/1.2 var(--sd-font)} :root body.mdb-complete-site #bpv-edge-menu .bpv-edge-actions>button:is(:hover,:focus-visible){background:var(--sd-aqua-h)} :root body.mdb-complete-site #bpv-edge-menu .bpv-edge-actions>button img{width:22px;height:22px;border-radius:50%;object-fit:cover} :root body.mdb-complete-site.mdb-native-cpo .pswp :is(.pswp__bg,.pswp__zoom-wrap,.pswp__img){transition:none!important} :root body.mdb-complete-site.mdb-native-cpo .pswp.pswp--animate_opacity{transition:none!important} :root body.mdb-complete-site .mdb-guide-swatches img{border:0!important;border-radius:12px!important;box-shadow:0 0 0 1px #E6E2DA,0 4px 12px rgba(43,50,64,.07)} :root body.mdb-complete-site .mdb-help-choices{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(140px,1fr))!important;gap:14px 12px!important;margin-top:12px} :root body.mdb-complete-site .mdb-help-choices>figure{display:flex;flex-direction:column;gap:8px;margin:0} :root body.mdb-complete-site .mdb-help-choices>figure>img{box-sizing:border-box;width:100%!important;height:auto!important;aspect-ratio:2/1!important;object-fit:contain;padding:12px;border:0!important;border-radius:14px!important;background:#EFECE6;box-shadow:inset 0 0 0 1px #E6E2DA} :root body.mdb-complete-site .mdb-help-choices>figure>figcaption{margin:0;padding:0 2px;font:700 13.5px/1.35 var(--sd-font)!important;color:var(--sd-slate);text-align:left!important} @media (max-width:680px){ :root body.mdb-complete-site .mdb-help-choices{grid-template-columns:repeat(2,minmax(0,1fr))!important} } /* 50. SPEND & SAVE "?" TIP (d7, with Core patch p6) — Aaron: "needs to be more like the live site in the tooltip". Core p6 writes the live site's wording (tiers based on the category subtotal, "Tier 1: Spend $1,000+ (Save up to 15.5%)" …); this block gives the floating tip the site's font, a rounded card and a heading above the tier list (it used the browser's plain sans-serif). Undo: delete this block. */ :root body.mdb-complete-site .mdb-floating-tooltip, :root body.mdb-complete-site .mdb-as-low-help [role="tooltip"]{width:min(320px,calc(100vw - 24px));padding:16px 18px;border:0;border-radius:16px;background:#fff;color:var(--sd-slate);font:400 13.5px/1.55 var(--sd-font)!important;box-shadow:0 16px 40px rgba(20,25,35,.2)} :root body.mdb-complete-site :is(.mdb-floating-tooltip,.mdb-as-low-help [role="tooltip"]) .mdb-ss-tip-p{margin:0 0 10px;color:var(--sd-muted)} :root body.mdb-complete-site :is(.mdb-floating-tooltip,.mdb-as-low-help [role="tooltip"]) .mdb-ss-tip-h{margin:12px 0 6px;padding-top:12px;border-top:1px solid var(--sd-line);font-weight:800;color:var(--sd-ink)} :root body.mdb-complete-site :is(.mdb-floating-tooltip,.mdb-as-low-help [role="tooltip"]) .mdb-ss-tip-tier{position:relative;padding:2px 0 2px 16px;color:var(--sd-slate)} :root body.mdb-complete-site :is(.mdb-floating-tooltip,.mdb-as-low-help [role="tooltip"]) .mdb-ss-tip-tier::before{content:"";position:absolute;left:2px;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--sd-aqua)} :root body.mdb-complete-site :is(.mdb-floating-tooltip,.mdb-as-low-help [role="tooltip"]) .mdb-ss-tip-tier b{color:var(--sd-aqua-d)} :root body.mdb-complete-site :is(.mdb-floating-tooltip,.mdb-as-low-help [role="tooltip"]) .mdb-ss-tip-note{margin-top:10px;font-size:12.5px;color:var(--sd-muted)} /* 51. CART, SIDE CART AND CHECKOUT (d7) — Aaron's cart notes, 24 Sep. a) Two Spend & Save notices (e.g. Roller Blinds and Plantation Shutters) touched each other: 10px apart. b) Coupon on the cart page: the code field is now the same rounded field as on the checkout (it was square with a grey line); the button was already the checkout's slate pill. c) Free samples can only be ordered one at a time, so WooCommerce shows no quantity box and the "Quantity" column looked empty: it now reads "1". d) Side cart: the price lines ("1 × $2.00 $0.00 each / Item total") ran off the right edge; they now sit on their own line under the bin and "Save" badge. e) Checkout "Back to Cart": one underline on hover (it gained the theme's underline on top of its own). Undo: delete this block. */ :root body.mdb-complete-site .mdb-spend-save__cart-bar+.mdb-spend-save__cart-bar{margin-top:10px} :root body.mdb-complete-site .woocommerce-cart-form .coupon input#coupon_code{box-sizing:border-box;height:48px;padding:13px 15px!important;border:1px solid #D9D4CA!important;border-radius:12px!important;background:#fff;font-family:var(--sd-font);font-size:15px} :root body.mdb-complete-site .woocommerce-cart-form .coupon input#coupon_code:focus{border-color:var(--sd-aqua)!important;box-shadow:0 0 0 3px rgba(73,195,201,.25);outline:none} :root body.mdb-complete-site .woocommerce-cart-form .product-quantity .quantity:has(>input[type="hidden"])::before{content:"1";font-weight:700;color:var(--sd-ink)} :root body.mdb-complete-site .xoo-wsc-product .xoo-wsc-sm-right{flex-wrap:wrap;align-items:center;row-gap:6px} :root body.mdb-complete-site .xoo-wsc-product .xoo-wsc-smr-ptotal{flex:1 0 100%;min-width:0;white-space:normal!important;text-align:left} :root body.mdb-complete-site .xoo-wsc-product :is(.mdb-mini-pricing,.mdb-mini-unit,.mdb-mini-line-total){white-space:normal!important} :root body.mdb-complete-site a.mdb-header-return:is(:hover,:focus-visible){text-decoration:none!important;color:var(--sd-aqua-d);border-bottom-color:var(--sd-aqua-d)} /* 52. SAMPLE CARDS (Free Samples page and the colour pages, d7, with Core patch p6) a) Every card picture is the same square (some Aluminium Venetian cards were taller because their picture had not loaded yet and fell back to its own height). b) "In your bag" shows once: Core p6 drops the second "In your bag" badge on the picture and makes the button a plain label, not a link to the cart. A sample added a moment ago says "✓ In your bag" and cannot be pressed again (one of each sample per order), and WooCommerce's extra "View cart" link under it is hidden (the sample bag bar has Checkout). c) Free Samples page: space between the step line and the "Your first 10 samples are free" note. d) Colour pages: "See every colour in the sample library →" no longer touches the cards above. Undo: delete this block. */ :root body.mdb-complete-site .mdb-fs-page .mdb-fs-card__photo{min-height:0;overflow:hidden} :root body.mdb-complete-site .mdb-fs-page .mdb-fs-card__photo>img{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:cover} :root body.mdb-complete-site .mdb-fs-page .mdb-fs-card__in{display:none} :root body.mdb-complete-site .mdb-fs-page .mdb-fs-card span.mdb-fs-add--in{cursor:default} :root body.mdb-complete-site .mdb-fs-page .mdb-fs-card .mdb-fs-add.added{pointer-events:none} :root body.mdb-complete-site .mdb-fs-page .mdb-fs-card .mdb-fs-add.added::before{content:"\2713 In your bag"} :root body.mdb-complete-site .mdb-fs-page .mdb-fs-card .added_to_cart{display:none!important} :root body.mdb-complete-site .mdb-fs-page>.mdb-sample-policy{margin-top:24px} :root body.mdb-complete-site .mdb-colour-samples a.mdb-colour-samples__more{display:inline-flex!important;margin-top:26px} /* 53. NEW LANDING PAGES, LOWER SECTIONS (d7) a) "Before you order" card: the second item ("Compare in your own light") started straight after the first item's link; it now has space and a thin line above it. b) Last band (e.g. "See the whites in your light"): its Build & Order button was slate on the slate band, so only its words showed; now the aqua pill. Undo: delete this block. */ :root body.mdb-complete-site .mdb-elementor-document .mdb-discovery-help>div:last-child>a{display:inline-flex} :root body.mdb-complete-site .mdb-elementor-document .mdb-discovery-help>div:last-child>a+:is(h3,h4){margin-top:24px!important;padding-top:22px!important;border-top:1px solid var(--sd-line)!important} :root body.mdb-complete-site .mdb-elementor-document .mdb-landing-page .mdb-final .mdb-button-dark{background:var(--sd-aqua)!important;color:var(--sd-ink)!important;border-color:transparent!important;box-shadow:0 6px 16px rgba(73,195,201,.35)} :root body.mdb-complete-site .mdb-elementor-document .mdb-landing-page .mdb-final .mdb-button-dark:hover{background:#5BCDD2!important} /* 54. PAGE HERO DETAILS (d7) — Aaron, 24 Sep. a) "Order free samples" pill: a clear hover (lighter fill and a white ring). b) The ProductReview badge is not a link any more ("i want them to stay on my website"): Core p6 changes the stored pages; until its button is pressed the badge simply cannot be clicked. c) Phones: Build & Order and Order free samples side by side, so the ProductReview badge and stars show on the first screen. On very narrow phones (under 350px) they may wrap as before. d) Very wide screens: the words sat far right in a narrow column (one word per line on an ultrawide) because Core lines them up with the page content using the screen width, but the hero stops growing at 2400px. The line-up now uses the hero's width. Undo: delete this block. */ :root body.mdb-complete-site .mdb-page-hero .mdb-actions a.mdb-text-link{transition:background .15s,box-shadow .15s} :root body.mdb-complete-site .mdb-page-hero .mdb-actions a.mdb-text-link:is(:hover,:focus-visible){background:rgba(255,255,255,.16)!important;box-shadow:inset 0 0 0 1.5px #fff!important} :root body.mdb-complete-site .mdb-elementor-document .mdb-product-hero .mdb-hero-reviews{pointer-events:none;cursor:default} :root body.mdb-complete-site .mdb-elementor-document .mdb-product-hero .mdb-hero-reviews:hover strong{text-decoration:none} @media (max-width:680px){ :root body.mdb-complete-site .mdb-elementor-document .mdb-product-hero .mdb-actions{flex-wrap:nowrap!important;gap:8px!important} :root body.mdb-complete-site .mdb-elementor-document .mdb-product-hero .mdb-actions>a{flex:1 1 auto!important;justify-content:center;min-width:0;width:auto!important;padding:13px 10px!important;font-size:clamp(12.5px,3.6vw,14px)!important;white-space:nowrap} :root body.mdb-complete-site .mdb-elementor-document .mdb-product-hero .mdb-actions>a.mdb-button-teal::after{margin-left:6px} } @media (max-width:349px){ :root body.mdb-complete-site .mdb-elementor-document .mdb-product-hero .mdb-actions{flex-wrap:wrap!important} } @media (min-width:901px){ :root body.mdb-complete-site .mdb-elementor-document .mdb-product-hero.mdb-page-hero>.mdb-product-hero-copy{padding-left:max(4vw,calc((min(100vw,2400px) - 1325px)/2))} } /* 55. PHONE MENU DRAWER (d7) — Aaron: "i see a white background on them in a square". The icon tiles are meant to be there (they match the desktop menu), but their very pale aqua read as white on the drawer's warm background: now a clear aqua tint. The rows without a sub-list (Double Roller, Vertical, Panel Glide …) also had a curved grey line under them from Core's old drawer style; gone, so every row looks the same. Undo: delete this block. */ :root body.mdb-complete-site #mdb-mobile-menu .mdb-mnav .mdb-mnav__icon{background:rgba(73,195,201,.17)} :root body.mdb-complete-site #mdb-mobile-menu .mdb-mnav .mdb-mnav__help .mdb-mnav__icon{background:#EAE6DE} :root body.mdb-complete-site #mdb-mobile-menu .mdb-mnav a.mdb-mnav__row{border-bottom:0!important} /* 56. PICTURE OPTIONS: THE SELECTED RING WAS CUT OFF (d8) — Aaron: "still got this issue, with the outlines of uni cpo radios with images". The aqua ring (and the hover ring) is drawn just outside each picture, but Uni CPO's own stylesheet clips the picture's frame (overflow:hidden), so only the bottom of the ring showed, where the frame runs on under the picture for the name. Checked on the roller page: 35 of 36 chosen pictures were clipped, none with this rule; nothing inside a frame is larger than the frame, so nothing else becomes visible. Undo: delete this block. */ :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options :is(.uni-module-radio-image-mode,.uni-module-checkbox-image-mode)>label.uni-cpo-option-label>.uni-cpo-option-label__image-wrap{overflow:visible!important} /* 57. SHUTTER HELP CENTRE HEADING (d8, stop-gap for Core p8) — the "Shutter help centre" line above each guide title uses the heading box's ::before, which Elementor also uses (absolutely placed, full size) for background overlays, so the line floated over the top edge of the card. Placed back in the flow, inside the card. The same fix goes into Core's shutter-guide-p10.css in the next Core patch; this block can then be deleted. Undo: delete this block. */ :root body.mdb-complete-site .mdb-guide-library .mdb-guide-heading:not(:has(.mdb-eyebrow))::before{position:static!important;inset:auto!important;width:auto!important;height:auto!important;background:none!important;border-radius:0!important;opacity:1!important;mix-blend-mode:normal!important;z-index:auto!important} /* 58. THE OTHER PRODUCT PAGES IN THE VISUALISER PAGE'S LAYOUT (d9) — Aaron: "make the other products in the same layout as the visualiser". Looks only: no option, price, condition or picture changes. Pages where the visualiser runs are left alone (their body carries a bpv- class and the visualiser plugin lays them out itself). a) Desktop (1051px and wider), every product: the picture column takes two thirds and the form one third, 24px apart, as on the visualiser page. The product photo fills the column in the white rounded card and is never taller than the screen allows (a tall curtain photo is shown whole). The two reassurance cards sit side by side under it. The picture column stays in view while the form scrolls. b) Desktop, products whose price updates by itself (a price display in the form: curtains, double curtains, double roller, PVC and timber shutters): quantity and Add to cart / Check required options float at the bottom in the same white rounded bar as the visualiser page, with "Your price" and that price display at its left. Products with a Calculate button keep Calculate, price and Add to cart together in the form, so the order of steps does not change. c) Phones and tablets (1050px and narrower) keep everything in the form. A bar pinned to the bottom of an iPhone needs the measured-toolbar script (claude/ios-sticky-bars.md), which a stylesheet cannot provide; the visualiser has it, so these pages get the phone bar when they get the visualiser. Undo: delete this block. */ @media (min-width:1051px){ :root body.mdb-complete-site.mdb-native-cpo.single-product:not([class*="bpv-"]) .mdb-woocommerce .product.mdb-product-shell{grid-template-columns:minmax(0,2fr) minmax(400px,1fr)!important;column-gap:24px!important} :root body.mdb-complete-site.mdb-native-cpo.single-product:not([class*="bpv-"]) .mdb-product-media-sticky{top:calc(130px + var(--mdb-admin-offset,0px))} :root body.mdb-complete-site.mdb-native-cpo.single-product:not([class*="bpv-"]) .product .mdb-product-media-sticky>.woocommerce-product-gallery{padding:0!important;border:0!important;background:#fff} :root body.mdb-complete-site.mdb-native-cpo.single-product:not([class*="bpv-"]) .woocommerce-product-gallery .woocommerce-product-gallery__image img{display:block;width:100%!important;height:auto!important;max-height:calc(100vh - 250px);min-height:300px;object-fit:contain;background:#fff} :root body.mdb-complete-site.mdb-native-cpo.single-product:not([class*="bpv-"]) .woocommerce-product-gallery .woocommerce-product-gallery__image--placeholder img{aspect-ratio:3/2;object-fit:contain;padding:12%;background:#F7F6F2} :root body.mdb-complete-site.mdb-native-cpo.single-product:not([class*="bpv-"]) .woocommerce-product-gallery .flex-control-thumbs{display:flex;gap:10px;margin:0;padding:10px 12px 12px;background:#fff} :root body.mdb-complete-site.mdb-native-cpo.single-product:not([class*="bpv-"]) .woocommerce-product-gallery .flex-control-thumbs li{width:84px!important;float:none;margin:0!important} :root body.mdb-complete-site.mdb-native-cpo.single-product:not([class*="bpv-"]) .woocommerce-product-gallery .flex-control-thumbs img{border-radius:10px;aspect-ratio:3/2;object-fit:cover} :root body.mdb-complete-site.mdb-native-cpo.single-product:not([class*="bpv-"]) .mdb-product-media-proof{display:grid!important;grid-template-columns:1fr 1fr;gap:0;margin-top:16px} /* b) the floating purchase bar, only where a price display exists and the buttons are in .mdb-buy-row */ :root body.mdb-complete-site.mdb-native-cpo.single-product:not([class*="bpv-"]):has(#uni_cpo_options .uni-module:is([id*="price_display"],[id*="pricedisplay"])):has(form.cart .mdb-buy-row) .mdb-main{padding-bottom:112px} :root body.mdb-complete-site.mdb-native-cpo.single-product:not([class*="bpv-"]):has(#uni_cpo_options .uni-module:is([id*="price_display"],[id*="pricedisplay"])):has(form.cart .mdb-buy-row) .woocommerce-product-gallery .woocommerce-product-gallery__image img{max-height:calc(100vh - 340px)} :root body.mdb-complete-site.mdb-native-cpo.single-product:not([class*="bpv-"]):has(#uni_cpo_options .uni-module:is([id*="price_display"],[id*="pricedisplay"])) form.cart .mdb-buy-row{position:fixed!important;z-index:60;left:50%;bottom:16px;transform:translateX(-50%);box-sizing:border-box;width:min(1240px,calc(100% - 48px))!important;min-height:76px;margin:0!important;padding:12px 14px 12px 380px;align-items:center!important;justify-content:flex-end;gap:10px;background:#fff;border-radius:20px;box-shadow:0 18px 50px rgba(43,50,64,.16),0 0 0 1px rgba(43,50,64,.05)} :root body.mdb-complete-site.mdb-native-cpo.single-product:not([class*="bpv-"]):has(#uni_cpo_options .uni-module:is([id*="price_display"],[id*="pricedisplay"])) form.cart .mdb-buy-row>.quantity{flex:0 0 96px!important;width:96px!important} :root body.mdb-complete-site.mdb-native-cpo.single-product:not([class*="bpv-"]):has(#uni_cpo_options .uni-module:is([id*="price_display"],[id*="pricedisplay"])) form.cart .mdb-buy-row .quantity input{height:48px!important;border:1px solid #D9D4CA!important;border-radius:999px!important;background:#fff;text-align:center;font:700 16px var(--sd-font)} :root body.mdb-complete-site.mdb-native-cpo.single-product:not([class*="bpv-"]):has(#uni_cpo_options .uni-module:is([id*="price_display"],[id*="pricedisplay"])) form.cart .mdb-buy-row>:is(.single_add_to_cart_button,.mdb-cpo-invalid-trigger){flex:0 0 300px!important;width:300px!important;height:auto!important;min-height:52px!important;border:0!important;border-radius:999px!important;background:var(--sd-aqua)!important;color:var(--sd-ink)!important;font:700 16px/1.2 var(--sd-font)!important;text-transform:none!important;letter-spacing:0!important;box-shadow:0 6px 16px rgba(73,195,201,.35)} :root body.mdb-complete-site.mdb-native-cpo.single-product:not([class*="bpv-"]):has(#uni_cpo_options .uni-module:is([id*="price_display"],[id*="pricedisplay"])) form.cart .mdb-buy-row>:is(.single_add_to_cart_button,.mdb-cpo-invalid-trigger):hover{background:#5BCDD2!important} :root body.mdb-complete-site.mdb-native-cpo.single-product:not([class*="bpv-"]):has(form.cart .mdb-buy-row) .product #uni_cpo_options .uni-module:is([id*="price_display"],[id*="pricedisplay"]){position:fixed!important;z-index:61;left:calc(50% - min(620px, 50% - 24px) + 26px)!important;bottom:28px!important;box-sizing:border-box;width:340px!important;max-width:none!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important} :root body.mdb-complete-site.mdb-native-cpo.single-product:not([class*="bpv-"]):has(form.cart .mdb-buy-row) .product #uni_cpo_options .uni-module:is([id*="price_display"],[id*="pricedisplay"])::before{content:"Your price"!important;display:block!important;margin:0 0 1px!important;font:800 10.5px/1.4 var(--sd-font)!important;letter-spacing:.08em!important;text-transform:uppercase!important;color:var(--sd-muted)!important} :root body.mdb-complete-site.mdb-native-cpo.single-product:not([class*="bpv-"]):has(form.cart .mdb-buy-row) .product #uni_cpo_options .uni-module:is([id*="price_display"],[id*="pricedisplay"])>.js-uni-cpo-field{padding:0!important;border:0!important;background:transparent!important;font:800 22px/1.2 var(--sd-font)!important;color:var(--sd-slate)!important} :root body.mdb-complete-site.mdb-native-cpo.single-product:not([class*="bpv-"]):has(form.cart .mdb-buy-row) .product #uni_cpo_options .uni-module:is([id*="price_display"],[id*="pricedisplay"])>.js-uni-cpo-field::before{content:none!important;display:none!important} } /* 59. PRODUCT PAGE DETAILS (d10) — Aaron, 24 Sep, on the product pages. Looks only: no option, price, condition, picture or visualiser behaviour changes. a) "random divider under made in aus": the two reassurance points ("Made in Australia", "Australia-wide delivery") sit side by side, but the first still had the line Core draws between them when they are stacked. No line when they are side by side (visualiser page above 600px, other product pages from 1051px). b) "the price having its own mini bubble background colour": the price in the form ("Your configured price", curtain and shutter price displays) sat on a pale aqua patch inside its white card. The figure now sits straight on the card, like the price in the floating bar, at one size (32px; the curtain one was 50px). c) "linked blind config perhaps leave it as 3 tiles per width": the Linked Blind Configuration pictures are three to a row (were two, larger) from 681px; phones were already three to a row (block 48). d) "the bubble on the visualiser image for fabric name should be at bottom left. also same for the toggler": the colour name chip and the view buttons (e.g. Fully closed / Partly open) move from the top of the picture to its bottom left, side by side; the top shows the blind's hardware. Replaces the top placement of block 49 a). While the bottom of the picture is still under the floating price bar (at the top of the page on laptop-height screens), the chip rides just above the bar and settles on the picture's edge as the page scrolls. e) "'product description' is square like the old design": a white rounded card with a round plus button, like the question cards. f) "the choose options buttons all have this weird charcoal outline": pointing at a choice drew Core's thin dark teal outline, and the keyboard focus ring was dark teal too. No outline on pointing (the aqua ring stays); the keyboard focus ring is aqua. g) "views on mobile is a bit scuffed, right edge is harsh": the Views tab now floats 10px in from the screen edge with rounded corners, and its menu is a rounded card beside it with the three choices as plain rows (they were grey pills pressed together). Phone bar: the show-more button is round, SureFit™ protection a small pill. Undo: delete this block. */ @media (min-width:601px){ :root body.mdb-complete-site.mdb-native-cpo .mdb-product-media-proof.bpv-fulfilment-below>div{border-bottom:0!important} } @media (min-width:1051px){ :root body.mdb-complete-site.mdb-native-cpo.single-product:not([class*="bpv-"]) .mdb-product-media-proof>div{border-bottom:0!important} } :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module:is([id*="price_display"],[id*="pricedisplay"])>.js-uni-cpo-field{padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;font-size:32px!important;font-weight:800!important;line-height:1.15!important} @media (min-width:681px){ :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module-radio-image-mode[id^="uni_cpo_linked_configuration_"]>label.uni-cpo-option-label{width:calc(33.333% - .5rem)!important;max-width:none!important} } :root body.mdb-complete-site.mdb-native-cpo .mdb-product-media-sticky>#bpv-tools{position:sticky!important;bottom:14px;align-self:end!important;justify-content:flex-start!important;align-items:flex-end!important;margin:0 0 14px!important} :root body.mdb-complete-site.mdb-native-cpo.bpv-bar-visible .mdb-product-media-sticky>#bpv-tools{bottom:calc(var(--bpv-bar-height,88px) + 30px)} :root body.mdb-complete-site.mdb-native-cpo .product .mdb-product-description{border:0!important;border-radius:16px!important;background:#fff;box-shadow:var(--sd-shadow);overflow:hidden} :root body.mdb-complete-site.mdb-native-cpo .product .mdb-product-description>summary{min-height:60px;padding:14px 16px 14px 20px;font:700 16px/1.3 var(--sd-font);color:var(--sd-slate)} :root body.mdb-complete-site.mdb-native-cpo .product .mdb-product-description>summary:focus-visible{outline:2px solid var(--sd-aqua-d);outline-offset:-2px;border-radius:16px} :root body.mdb-complete-site.mdb-native-cpo .product .mdb-product-description-toggle{width:32px;height:32px;flex:0 0 32px;border-radius:50%;background:var(--sd-aqua-h);color:var(--sd-slate)} :root body.mdb-complete-site.mdb-native-cpo .product .mdb-product-description-toggle::before{width:12px;height:2px;left:10px;top:15px;border-radius:2px} :root body.mdb-complete-site.mdb-native-cpo .product .mdb-product-description-toggle::after{width:2px;height:12px;left:15px;top:10px;border-radius:2px} :root body.mdb-complete-site.mdb-native-cpo .product .mdb-product-description>summary:hover .mdb-product-description-toggle{background:var(--sd-aqua);color:var(--sd-ink)} :root body.mdb-complete-site.mdb-native-cpo .product .mdb-product-description-content{padding:0 20px 20px;color:var(--sd-muted);font-size:15px} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options :is(.uni-module-radio,.uni-module-checkbox)>input:not(:focus-visible)+.uni-cpo-option-label:hover{outline:0!important} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options :is(.uni-module-radio,.uni-module-checkbox)>input:focus-visible+.uni-cpo-option-label{outline:2px solid var(--sd-aqua-d)!important;outline-offset:3px!important} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options input:focus-visible+.mdb-range-card{outline-color:var(--sd-aqua-d)!important} :root body.mdb-complete-site #bpv-edge-menu{right:calc(var(--bpv-edge-right,0px) + 10px)!important} :root body.mdb-complete-site #bpv-edge-menu>summary{border-radius:16px!important;box-shadow:0 8px 22px rgba(43,50,64,.18),0 0 0 1px rgba(43,50,64,.05)!important} :root body.mdb-complete-site #bpv-edge-menu .bpv-edge-actions{display:grid!important;gap:2px!important;right:calc(100% + 8px)!important;width:min(220px,calc(100vw - 84px))!important;padding:6px!important;border-radius:18px!important;box-shadow:0 12px 32px rgba(43,50,64,.2),0 0 0 1px rgba(43,50,64,.05)!important} :root body.mdb-complete-site #bpv-edge-menu .bpv-edge-actions>button{width:100%;min-height:44px!important;padding:0 12px!important;border-radius:12px!important;background:transparent!important;font:600 14.5px/1.25 var(--sd-font)!important;text-align:left} :root body.mdb-complete-site #bpv-edge-menu .bpv-edge-actions>button:is(:hover,:focus-visible){background:var(--sd-aqua-h)!important;outline:0} :root body.mdb-complete-site #bpv-purchase-bar.bpv-bar-mobile #bpv-bar-toggle{border:0!important;border-radius:50%!important;background:#F3F1EC!important;color:var(--sd-slate)!important} :root body.mdb-complete-site #bpv-purchase-bar.bpv-bar-mobile #bpv-bar-protection{min-height:32px!important;padding:0 12px!important;border:0!important;border-radius:999px!important;background:var(--sd-aqua-t)!important;color:var(--sd-slate)!important;font:700 12.5px/1.2 var(--sd-font)!important;text-decoration:none!important} /* 60. PRODUCT CATEGORY PAGES (d10) — Aaron: "those two tiles u got samples/measure guide at top look out of place, or some layouts broken", and the charcoal outline on the "Choose options" buttons. a) "Order free samples" and "Measuring guide" sit at the right end of the breadcrumb line as small links (they floated on their own between the breadcrumbs and the heading card). Phones: under the breadcrumbs, as before, with a gap before the heading card (they touched it). b) "Choose options" on the product cards and "Choose samples" at the bottom: no dark outline, like every other pill button on the site. c) "A little preparation makes choosing easier": the two buttons sit side by side at their own width (each stretched across the whole page, one above the other) and the thin line above the section is gone. Undo: delete this block. */ @media (min-width:901px){ :root body.mdb-complete-site .mdb-main.mdb-category-v138 .mdb-catalogue-breadcrumbs{padding-right:360px!important} :root body.mdb-complete-site .mdb-main.mdb-category-v138 .mdb-catalogue-tools{display:flex!important;justify-content:flex-end;gap:8px;margin-top:-45px!important;padding-bottom:20px!important;pointer-events:none} :root body.mdb-complete-site .mdb-main.mdb-category-v138 .mdb-catalogue-tools a{pointer-events:auto;margin:0!important;padding:7px 14px!important;font-size:13px!important;font-weight:700!important} } @media (max-width:900px){ :root body.mdb-complete-site .mdb-main.mdb-category-v138 .mdb-catalogue-tools{padding-bottom:14px!important} } :root body.mdb-complete-site .mdb-main.mdb-category-v138 .mdb-catalogue-tools a{box-shadow:0 2px 10px rgba(43,50,64,.06),0 0 0 1px rgba(43,50,64,.05)!important;text-decoration:none} :root body.mdb-complete-site .mdb-main.mdb-category-v138 .mdb-catalogue-tools a:hover{color:var(--sd-ink)} :root body.mdb-complete-site .woocommerce ul.products li.product :is(a.button,a.mdb-catalogue-configure){border:0!important} :root body.mdb-complete-site .mdb-main.mdb-category-v138 .mdb-catalogue-help{border-top:0!important} :root body.mdb-complete-site .mdb-main.mdb-category-v138 .mdb-catalogue-help .mdb-button{border:0!important} :root body.mdb-complete-site .mdb-main.mdb-category-v138 .mdb-catalogue-links{flex-direction:row!important;flex-wrap:wrap!important;align-items:center!important;gap:12px!important} :root body.mdb-complete-site .mdb-main.mdb-category-v138 .mdb-catalogue-links>.mdb-button{width:auto!important;max-width:100%;flex:0 0 auto!important;margin:0!important} /* 61. HOME HERO SLIDESHOW CONTROLS (d10) — Aaron: "pause slideshow button spacing and wrong colour against bg on hero banner". The previous/next arrows and "Pause slideshow" become one frosted white pill in a single row (the pause words sat loose under the arrows in slate text straight on the photo). The pause button gets a pause sign, and a play sign while the slideshow is paused. Undo: delete this block. */ :root body.mdb-complete-site .mdb-home-hero .mdb-home-gallery .mdb-home-slider-ui{width:auto!important;max-width:calc(100% - 24px)} :root body.mdb-complete-site .mdb-home-slider-controls{display:inline-flex!important;align-items:center;gap:2px!important;padding:4px;border-radius:999px;background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 6px 18px rgba(20,25,35,.16)} :root body.mdb-complete-site .mdb-home-slider-controls button{min-width:36px!important;min-height:36px!important;padding:0!important;border:0!important;border-radius:999px!important;background:transparent!important;color:var(--sd-slate)!important;font:700 16px/1 var(--sd-font)!important} :root body.mdb-complete-site .mdb-home-slider-controls .mdb-home-pause{grid-area:auto!important;display:inline-flex!important;align-items:center;gap:7px;padding:0 12px!important;font:700 12.5px/1 var(--sd-font)!important;white-space:nowrap} :root body.mdb-complete-site .mdb-home-slider-controls .mdb-home-pause::before{content:"";flex:0 0 auto;box-sizing:border-box;width:9px;height:10px;border-left:3px solid currentColor;border-right:3px solid currentColor} :root body.mdb-complete-site .mdb-home-slider-controls .mdb-home-pause[aria-pressed="true"]::before{width:0;height:0;border-style:solid;border-width:5px 0 5px 9px;border-color:transparent transparent transparent currentColor} :root body.mdb-complete-site .mdb-home-slider-controls button:hover{background:var(--sd-slate)!important;color:#fff!important} :root body.mdb-complete-site .mdb-home-slider-controls button:focus-visible{outline:2px solid var(--sd-aqua-d)!important;outline-offset:2px} /* 62. HOME AND LANDING PAGE PICTURES AND BANDS (d11) — Aaron, 24 Sep. Looks only. a) "What you are not paying for": the showroom items in the left column ("In-home appointment", "Sales commission", "Showroom rent", "Measure-and-install package") are crossed out again, with a soft line. b) Picture-beside-words sections ("Decide. Sample. Measure. Order. Install." on the home page, the curtain and shutter pages): the picture used to stretch to the height of the words, so on a very wide screen, where the words wrap more, a normal landscape photo was cut into a tall narrow strip and the product disappeared. Now the picture keeps one shape whatever the screen width: square beside the words (desktop), 4:3 when it sits above the words (tablets and phones). The side padding of the words stops growing past 72px. Photo brief that always works: a normal 3:2 or 4:3 photo with the product in the middle two thirds. c) "Order Free Samples" in the last dark band of the home page: the same hover as the one in the hero (it had none). Undo: delete this block. */ :root body.mdb-complete-site .mdb-comparison p>span{text-decoration:line-through;text-decoration-thickness:1.5px;text-decoration-color:rgba(189,200,207,.75)} :root body.mdb-complete-site .mdb-elementor-document .mdb-split>img{height:auto!important;min-height:0!important;aspect-ratio:1/1;align-self:center;object-fit:cover;object-position:50% 50%} :root body.mdb-complete-site .mdb-elementor-document .mdb-split>div{padding:clamp(28px,5vw,72px)!important} @media (max-width:1050px){ :root body.mdb-complete-site .mdb-elementor-document .mdb-split>img{aspect-ratio:4/3} } :root body.mdb-complete-site :is(.mdb-final,.mdb-product-final-cta) .mdb-actions a.mdb-text-link{transition:background .15s,box-shadow .15s} :root body.mdb-complete-site :is(.mdb-final,.mdb-product-final-cta) .mdb-actions a.mdb-text-link:is(:hover,:focus-visible){background:rgba(255,255,255,.16)!important;box-shadow:inset 0 0 0 1.5px #fff!important;color:#fff!important} /* 63. NO DARK OUTLINE ON THE AQUA BUTTONS (d11) — Aaron: "product category explore range button still has this weird outline?" It was not meant to be there: pointing at "Explore the range", "Choose options" and the other pill buttons on the category pages gave them Core's old dark teal border. They now keep no border in every state; the keyboard focus ring is aqua. Undo: delete this block. */ :root body.mdb-complete-site .mdb-main.mdb-category-v138 :is(a.mdb-button,.woocommerce a.button):is(:hover,:focus,:focus-visible,:active){border-color:transparent!important} :root body.mdb-complete-site .mdb-main :is(a,button).mdb-button:focus-visible, :root body.mdb-complete-site .mdb-main.mdb-category-v138 a:focus-visible{outline:2px solid var(--sd-aqua-d)!important;outline-offset:3px} /* 64. FREE SAMPLES: THE FIRST RANGE CARD WAS CUT OFF (d11) — Aaron: "the 'all ranges' tile is cutoff at starting point on slider". The range slider snapped its first card to the very edge of the scroll area, so the card's left side and its aqua ring were clipped. The slider now keeps its 6px inner margin when it snaps. Undo: delete this block. */ :root body.mdb-complete-site .mdb-fs-rail{scroll-padding-inline:6px} /* 65. HELP POPUP PICTURES (d11) — Aaron: "the product image is too small" (cassette help). The cassette picture was held to a 124px box beside the words; it now spans the popup above the words. Undo: delete this block. */ :root body.mdb-complete-site .mdb-roller-guide .mdb-guide-illustrated:has(img.mdb-cassette-explainer){display:block!important} :root body.mdb-complete-site .mdb-roller-guide img.mdb-cassette-explainer{display:block;width:100%!important;max-width:560px!important;height:auto!important;max-height:none!important;margin:0 auto 18px;padding:12px!important;border-radius:16px;background:#F3F1EC;object-fit:contain} /* 66. EMPTY SIDE CART, ON BRAND (d12) — Aaron, 25 Sep: "when minicart is empty, we need to fix this. its not on brand and that icon cart picture isnt either." The side-cart plugin's cartoon trolley (its own picture, not ours) is hidden (Core's site.css also hid this spot with !important, hence the !important here); in its place a round warm tile with a slate bag drawing in the house colours. "Your cart is empty" is set in the site's heading style with one line of help under it, and "Return to Shop" is the aqua pill used for every main button. The white and grey cart itself is unchanged. Undo: delete this block. */ :root body.mdb-complete-site .xoo-wsc-empty-cart{padding:56px 28px 36px;text-align:center;font-family:var(--sd-font)} :root body.mdb-complete-site .xoo-wsc-empty-cart>*{margin-bottom:0} :root body.mdb-complete-site .xoo-wsc-empty-cart img.xoo-wsc-emp-img{display:none!important} :root body.mdb-complete-site .xoo-wsc-empty-cart::before{content:""!important;display:block!important;width:84px;height:84px;margin:0 auto 20px;border-radius:50%;background:var(--sd-aqua-t) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23444E60' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.5 17.5h27l-2.1 21.2a3 3 0 0 1-3 2.8H15.6a3 3 0 0 1-3-2.8z' fill='%23fff'/%3E%3Cpath d='M18 17.5v-3.2a6 6 0 0 1 12 0v3.2'/%3E%3Cpath d='M18 27.5h12' stroke='%23A9B2C0'/%3E%3C/svg%3E") center/42px no-repeat;box-shadow:0 8px 22px rgba(43,50,64,.08)} :root body.mdb-complete-site .xoo-wsc-empty-cart .xoo-wsc-emp-txt{display:block;margin:0 0 22px;font:800 19px/1.3 var(--sd-font);letter-spacing:-.01em;color:var(--sd-ink)} :root body.mdb-complete-site .xoo-wsc-empty-cart .xoo-wsc-emp-txt::after{content:"Browse blinds, curtains and shutters, or start with free samples.";display:block;margin:8px auto 0;max-width:31ch;font:500 14.5px/1.5 var(--sd-font);letter-spacing:0;color:var(--sd-muted)} :root body.mdb-complete-site .xoo-wsc-empty-cart a.xoo-wsc-btn{display:inline-flex!important;align-items:center;justify-content:center;width:auto!important;min-height:46px;margin:0 auto!important;padding:0 26px!important;border:0!important;border-radius:999px!important;background:var(--sd-aqua)!important;box-shadow:0 8px 20px rgba(73,195,201,.28);color:var(--sd-ink)!important;font:700 15px/1.2 var(--sd-font)!important;text-transform:none!important;text-decoration:none!important;transition:background .15s,box-shadow .15s} :root body.mdb-complete-site .xoo-wsc-empty-cart a.xoo-wsc-btn:is(:hover,:focus-visible){background:#5BCDD2!important;box-shadow:0 10px 24px rgba(73,195,201,.36);color:var(--sd-ink)!important;border:0!important} /* 67. FOOTER LINKS HAVE A HOVER (d12) — Aaron: "check on hover effects on footer links, i cant notice any atm?" There were none: the footer's text links (the product, help and company lists) now turn white with a thin underline when pointed at, and show the aqua ring for the keyboard. Undo: delete this block. */ :root body.mdb-complete-site .mdb-elementor-region-footer a:not(.mdb-button):not(:has(img)){transition:color .15s,text-decoration-color .15s;text-decoration:underline 1px transparent;text-underline-offset:4px} :root body.mdb-complete-site .mdb-elementor-region-footer a:not(.mdb-button):not(:has(img)):hover{color:#fff!important;text-decoration-color:rgba(255,255,255,.7)!important} :root body.mdb-complete-site .mdb-elementor-region-footer a:focus-visible{outline:2px solid var(--sd-aqua);outline-offset:3px;border-radius:4px} /* 68. PRODUCT FORM "ADD TO CART" WITHOUT THE DARK OUTLINE (d12) — Aaron: "the add to cart on product page (not the one in sticky bar) has the pixel outline again." Core's native-cpo.css gives it a 1px navy border; Style D removed it only on pages without the visualiser (block 58), so the visualiser page still showed it. Now removed on every product page. Undo: delete this block. */ :root body.mdb-complete-site.mdb-native-cpo .product form.cart :is(.single_add_to_cart_button,.uni-cpo-calculate-btn){border:0!important} /* 69. EVERY CHOSEN OPTION SHOWS THE TICK (d12) — Aaron: "some items on the product page ... they dont put the tick like others do when selected? please check all, that they are consistent." Checked on every product: picture options, fabric types, ranges and colour swatches carry the aqua tick; the Yes / No style options (Linked blinds, Tube upgrade, Base rail type, Number of panels, Track colour, Shutter type ...) and the tick-box options (hold-down clips) had only the ring. They now get the same aqua tick, at the right end of the box. Undo: delete this block. */ :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options :is(.uni-module-radio-text-mode,.uni-module-checkbox-text-mode)>input:checked:not([hidden])+label.uni-cpo-option-label{position:relative;padding-left:34px!important;padding-right:34px!important} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options :is(.uni-module-radio-text-mode,.uni-module-checkbox-text-mode)>input:checked:not([hidden])+label.uni-cpo-option-label::after{content:""!important;display:block!important;position:absolute!important;top:50%!important;right:10px!important;left:auto!important;bottom:auto!important;width:18px!important;height:18px!important;margin:-9px 0 0!important;padding:0!important;border:0!important;border-radius:50%!important;transform:none!important;opacity:1!important;box-shadow:none!important;background:var(--sd-aqua) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/11px no-repeat!important} /* 70. WIDTH AND DROP ON EVERY PRODUCT LIKE THE ROLLER (d12) — Aaron: "width//height on other products like shutters arent properly consistent and on one row like the roller blind version. needs the same arrows in the field also." a) The width and drop arrows (block 48) only matched the roller's field names. They now appear on every product's width, drop and height fields: double roller, vertical, panel glide, venetians, shutters, curtains, lined, box and bay, curved. Cut-out fields are left alone. b) Where a product has width and height in two separate rows (timber and PVC shutters), the two rows sit side by side, as on the roller. No Uni CPO setting changes; each field keeps its own messages. c) Every text field's name (Width, Drop, Height, Window name ...) uses the roller's style: bold, not capitals, no red asterisk (some products printed them as small-caps headings). Undo: delete this block. */ :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module-text_input:is([id*="width"],[id*="height"],[id*="drop"]):not([id*="cutout"]):not([id*="roomname"])>.uni-cpo-module-text_input-label{display:flex!important;align-items:center;flex-wrap:wrap;gap:7px} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module-text_input:is([id*="width"],[id*="height"],[id*="drop"]):not([id*="cutout"]):not([id*="roomname"])>.uni-cpo-module-text_input-label::before{content:""!important;display:block!important;flex:0 0 auto;order:-1;margin:0!important;background:var(--sd-aqua-d)!important} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module-text_input:is([id*="width"],[id*="height"],[id*="drop"]):not([id*="cutout"]):not([id*="roomname"])>.uni-cpo-module-text_input-label .uni-cpo-tooltip{order:2} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module-text_input[id*="width"]:not([id*="cutout"]):not([id*="roomname"])>.uni-cpo-module-text_input-label::before{width:28px;height:13px;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 14' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 2v10M28.5 2v10M4.5 7h21M8 3.8 4.5 7 8 10.2M22 3.8l3.5 3.2-3.5 3.2'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 14' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 2v10M28.5 2v10M4.5 7h21M8 3.8 4.5 7 8 10.2M22 3.8l3.5 3.2-3.5 3.2'/%3E%3C/svg%3E") center/contain no-repeat} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module-text_input:is([id*="height"],[id*="drop"]):not([id*="width"]):not([id*="cutout"])>.uni-cpo-module-text_input-label::before{width:12px;height:21px;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 1.5h10M2 22.5h10M7 4.5v15M3.8 8 7 4.5 10.2 8M3.8 16 7 19.5l3.2-3.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 1.5h10M2 22.5h10M7 4.5v15M3.8 8 7 4.5 10.2 8M3.8 16 7 19.5l3.2-3.5'/%3E%3C/svg%3E") center/contain no-repeat} /* c) one style for every text field's name */ :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module-text_input>.uni-cpo-module-text_input-label{margin:0 0 10px!important;font-family:var(--sd-font)!important;font-size:14px!important;font-weight:800!important;line-height:24px!important;letter-spacing:.01em!important;text-transform:none!important;color:var(--sd-slate)!important} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module-text_input>.uni-cpo-module-text_input-label.uni_cpo_field_required::after{content:none!important;display:none!important} /* b) a width row directly followed by a height/drop row: left and right halves */ :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options>[id^="uni_row_"]:has(.uni-module-text_input[id*="_width_"]:not([id*="cutout"])):has(+ [id^="uni_row_"] .uni-module-text_input:is([id*="_height_"],[id*="_drop_"]):not([id*="cutout"])){float:left;width:calc(50% - 6px);clear:none} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options>[id^="uni_row_"]:has(.uni-module-text_input[id*="_width_"]:not([id*="cutout"]))+[id^="uni_row_"]:has(.uni-module-text_input:is([id*="_height_"],[id*="_drop_"]):not([id*="cutout"])){float:right;width:calc(50% - 6px);clear:none} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options>[id^="uni_row_"]:has(.uni-module-text_input[id*="_width_"]:not([id*="cutout"]))+[id^="uni_row_"]:has(.uni-module-text_input:is([id*="_height_"],[id*="_drop_"]):not([id*="cutout"]))+*{clear:both} /* 71. STICKY BAR: BUTTONS LEFT, PRICE BESIDE QUANTITY (d12, visualiser page) — Aaron: "'show configuration' button needs a better look at, as the text is overflowing the button. Also I think you should be moving the price part next to the qty bar, and put those other buttons on the far left instead." a) Every bar button sizes to its own words (they were given equal thirds of a fixed width, so "Show configuration" ran past its edges). b) From 1100px wide: SureFit, View blind, View fabric and Show configuration sit at the far left; the price sits on the right, next to the quantity and the Calculate / Add to cart button. Narrower screens keep the old order (there is not room for the price beside the buttons); the phone bar is unchanged. CSS only; the visualiser's own files are untouched. Undo: delete this block. */ :root body.mdb-complete-site #bpv-purchase-bar:not(.bpv-bar-mobile) :is(#bpv-bar-protection,.bpv-desktop-actions>button){flex:0 0 auto!important;width:auto!important;min-width:0;white-space:nowrap} @media (min-width:1100px){ :root body.mdb-complete-site #bpv-purchase-bar:not(.bpv-bar-mobile):not(.bpv-bar-collapsed){grid-template-columns:auto auto minmax(170px,1fr) minmax(274px,350px)} :root body.mdb-complete-site #bpv-purchase-bar:not(.bpv-bar-mobile):not(.bpv-bar-collapsed) #bpv-bar-protection{grid-area:1/1} :root body.mdb-complete-site #bpv-purchase-bar:not(.bpv-bar-mobile):not(.bpv-bar-collapsed) .bpv-desktop-actions{grid-area:1/2;justify-content:flex-start} :root body.mdb-complete-site #bpv-purchase-bar:not(.bpv-bar-mobile):not(.bpv-bar-collapsed) .bpv-bar-price{grid-area:1/3;justify-items:end;text-align:right} :root body.mdb-complete-site #bpv-purchase-bar:not(.bpv-bar-mobile):not(.bpv-bar-collapsed) #bpv-bar-price{justify-content:flex-end} :root body.mdb-complete-site #bpv-purchase-bar:not(.bpv-bar-mobile):not(.bpv-bar-collapsed) .bpv-bar-purchase{grid-area:1/4} } /* 72. "VIEW FABRIC" WINDOW FITS THE SWATCH (d12, visualiser page) — Aaron: "the fabric popup from bottom sticky bar is scuffed." The window was 850px wide while the square swatch photo was shrunk to fit 65% of the screen height, so it sat in a wide white box with empty strips at both sides, and the visualiser's stylesheet squared the close button. The window is now as wide as the swatch (up to 600px, and never taller than the screen), the photo fills it with rounded corners, and the close button is round like the other windows. Undo: delete this block. */ :root body.mdb-complete-site #bpv-proof-dialog{width:min(600px,calc(100vw - 24px),calc(100dvh - 100px))} :root body.mdb-complete-site #bpv-proof-dialog img#bpv-full-proof{width:100%!important;max-width:100%;height:auto!important;max-height:none!important;aspect-ratio:1/1;margin:0!important;object-fit:cover;border-radius:16px} :root body.mdb-complete-site #bpv-proof-dialog .bpv-dialog-header>button{border-radius:50%!important} :root body.mdb-complete-site #bpv-proof-dialog #bpv-proof-caption:empty{display:none} /* 73. SECTION NAV PILL: A GAP UNDER THE HEADER (d12) — Aaron: "im not sure where that progress/location/section bar for landing pages pill at the top is placed, there isnt any gap between the top bar and it, looks a bit wierd." The pill ("Why ours · Controls · Fabric types …") sticks at the header's bottom edge; it now floats 12px below it. Undo: delete this block. */ @media (min-width:681px){ :root body.mdb-complete-site .mdb-main .mdb-product-subnav{top:calc(var(--mdb-header-bottom,calc(116px + var(--mdb-admin-offset,0px))) + 12px)!important} } /* 74. CASSETTE SECTION ON VERY WIDE SCREENS (d12) — Aaron: "check the cassette section when screen is massively stretched it kind of becomes hugenormas." It was the one section with no width limit: at 2400px its picture was 1312px tall. It now stops at 1440px like the sections around it, the picture at 560px tall, and the words' side padding (6% of the screen) and heading size stop growing past 72px and 54px, so the heading no longer wraps into a tall narrow block. Undo: delete this block. */ :root body.mdb-complete-site .mdb-elementor-document .mdb-cassette-section{max-width:1440px!important;margin-left:auto!important;margin-right:auto!important;box-sizing:border-box} :root body.mdb-complete-site .mdb-elementor-document .mdb-cassette-section .mdb-comparison-image{justify-content:center} :root body.mdb-complete-site .mdb-elementor-document .mdb-cassette-section .mdb-comparison-image img{width:auto!important;max-width:100%!important;max-height:560px!important;margin:0 auto} :root body.mdb-complete-site .mdb-elementor-document .mdb-cassette-section .mdb-comparison-copy{padding:clamp(48px,6vw,96px) clamp(28px,4.5vw,72px)!important} :root body.mdb-complete-site .mdb-elementor-document .mdb-main .mdb-cassette-section h2{font-size:clamp(2.25rem,4vw,3.4rem)!important} /* 21. PHONES AND SMALL TABLETS (680px and narrower, Core's own phone width) — tighter edges, one announcement item, proof points two per row (was one tall column, 513px). Undo: delete this block. */ @media (max-width:680px){ :root body.mdb-complete-site .mdb-elementor-document .mdb-announcement>:is(.mdb-announcement-surefit,.mdb-announcement-delivery){display:none} :root body.mdb-complete-site .mdb-elementor-document .mdb-announcement>.mdb-announcement-reviews{font-size:12px} :root body.mdb-complete-site .mdb-page-hero .mdb-eyebrow{font-size:10px;letter-spacing:.08em;padding:6px 10px} :root body.mdb-complete-site .mdb-elementor-document .mdb-page-hero{margin:12px auto 0;width:calc(100% - 24px);border-radius:18px} :root body.mdb-complete-site .mdb-elementor-document .mdb-product-proof{gap:10px;padding:12px 12px 0;grid-template-columns:1fr 1fr!important} :root body.mdb-complete-site .mdb-elementor-document .mdb-product-proof>div{padding:14px!important;border-radius:14px} :root body.mdb-complete-site .mdb-product-subnav a{padding:8px 14px;font-size:14px} :root body.mdb-complete-site .mdb-elementor-document :is(.mdb-value-section,.mdb-control-section,.mdb-comparison,.mdb-measure-product,.mdb-surefit,.mdb-final,.mdb-configure-cta){margin:16px auto;width:calc(100% - 24px);border-radius:20px} :root body.mdb-complete-site .mdb-elementor-document :is(.mdb-engineering-grid,.mdb-detail-grid,.mdb-review-reasons,.mdb-value-cards,.mdb-control-options)>article{padding:22px} :root body.mdb-complete-site .mdb-header a.mdb-header-order{font-size:12.5px;padding:10px 13px} :root body.mdb-complete-site .mdb-header a.mdb-header-order::after{content:none} :root body.mdb-complete-site .mdb-header a.mdb-header-cart{width:38px;height:38px} :root body.mdb-complete-site .mdb-elementor-region-footer{padding:24px 12px 12px} :root body.mdb-complete-site .mdb-elementor-document .mdb-review-score{padding:22px} } /* 75. PRODUCT OPTIONS POLISH ON EVERY PRODUCT (d13) — Aaron, 25 Sep, on Double Curtains: "polish the options on all products"; notices neat; the "?" not on its own row; the chosen option on the same row as the field name; curtain swatches, ranges and picture tiles the same size as the roller's; colour tiles filling their tile; track type tiles not bigger than the rest. Looks only. No Uni CPO option, price, rule, condition, picture or wording is changed. Measured on staging, 1440 wide: the roller's tiles are 98px squares 4 to a row, its fabric colours 98px 4 to a row, its range banners 429 x 76. Curtains, Double, Lined, Curved and Box & Bay used Core's specialty-curtains.css sizes instead (136-220px tall tiles, 76px colours 5 to a row, 120px range banners). This block gives every product the roller's sizes. a) Field names (label or h4, both kinds are used): name, "?" and chosen option on one row, the same 14px bold everywhere (the shutters, venetians, panel glide, vertical and lined used 16px). The "?" stays beside the words; a long name wraps under its own first line, and that first line lines up with the chosen option on the right. b) Picture tiles on the curtain products: roller size (4 to a row, square picture), 3 to a row on phones like every other product. c) Drawings keep a thin white margin inside the tile (so nothing at the edge of a drawing is cut off); colour tiles (track colours, ladder tape colours, fabric colours) and photos fill the whole tile. d) Fabric colour swatches on the curtain products: roller size, 4 to a row (3 on phones) - done by b. e) Fabric range banners on the curtain products: roller height (76px). f) Notice boxes: no empty first line, the heading in normal case (not capitals), one text weight, even padding, links in aqua and underlined. g) Double Curtains' empty "zerorisk_pvc" box (an empty notice left from My DIY) is not shown. Undo: delete this block. */ /* a) field names */ :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module>:is(label,h3,h4,h5,h6):is(.uni-cpo-module-radio-label,.uni-cpo-module-checkbox-label,.uni-cpo-module-select-label){display:flex!important;align-items:flex-start;gap:6px;min-height:24px;margin:0 0 10px!important;padding-top:0!important;font-family:var(--sd-font)!important;font-size:14px!important;font-weight:800!important;line-height:24px!important;letter-spacing:.01em;text-align:left!important;color:var(--sd-ink)!important} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module>:is(label,h3,h4,h5,h6):not(.uni-cpo-option-label) .uni-cpo-tooltip{flex:0 0 22px;width:22px!important;height:22px!important;min-width:22px!important;min-height:22px!important;margin:1px 0 0!important;top:auto!important;left:auto!important;vertical-align:top} @media (pointer:coarse){ :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module>:is(label,h3,h4,h5,h6):not(.uni-cpo-option-label) .uni-cpo-tooltip{flex-basis:44px;width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;margin:-10px -11px -10px -11px!important} } /* the chosen option on the right: same 24px line as the name's first line (curtain products; the others already line up, including the roller's step-heading fields) */ :root body.mdb-complete-site.mdb-native-cpo:is(.mdb-specialty-curtain,.mdb-imported-curtain) .product #uni_cpo_options .uni-module-radio-image-mode>input:checked:not([hidden])+label.uni-cpo-option-label>.uni-cpo-option-label__image-wrap::before{top:0!important;line-height:24px!important} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module-radio-image-mode:has(>input:checked:not([hidden])+label.uni-cpo-option-label:not(.mdb-badge-popular))>.uni-cpo-module-radio-label{padding-right:38%!important} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module-radio-image-mode>input:checked:not([hidden])+label.uni-cpo-option-label:not(.mdb-badge-popular)>.uni-cpo-option-label__image-wrap::before{max-width:37%!important;overflow:hidden;text-overflow:ellipsis} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module-radio-image-mode{padding-top:0!important} /* b) picture tiles on the curtain products: the roller's size */ :root body.mdb-complete-site.mdb-native-cpo:is(.mdb-specialty-curtain,.mdb-imported-curtain) .product #uni_cpo_options .uni-module-radio-image-mode:not(.mdb-native-range){display:flex;flex-wrap:wrap;gap:12px 8px!important;align-items:flex-start!important} :root body.mdb-complete-site.mdb-native-cpo:is(.mdb-specialty-curtain,.mdb-imported-curtain) .product #uni_cpo_options .uni-module-radio-image-mode:not(.mdb-native-range)>:not(label.uni-cpo-option-label):not(input){flex:0 0 100%;width:100%} :root body.mdb-complete-site.mdb-native-cpo:is(.mdb-specialty-curtain,.mdb-imported-curtain) .product #uni_cpo_options .uni-module-radio-image-mode:not(.mdb-native-range)>label.uni-cpo-option-label{flex:0 0 auto!important;width:calc(25% - .6rem)!important;max-width:none!important;margin:0!important} :root body.mdb-complete-site.mdb-native-cpo:is(.mdb-specialty-curtain,.mdb-imported-curtain) .product #uni_cpo_options .uni-module-radio-image-mode:not(.mdb-native-range)>label.uni-cpo-option-label .uni-cpo-option-label__image-wrap{min-height:0!important} :root body.mdb-complete-site.mdb-native-cpo:is(.mdb-specialty-curtain,.mdb-imported-curtain) .product #uni_cpo_options .uni-module-radio-image-mode:not(.mdb-native-range)>label.uni-cpo-option-label .uni-cpo-option-label__image-wrap img{width:100%!important;max-width:100%!important;height:auto!important;max-height:none!important;aspect-ratio:1/1!important;box-sizing:border-box!important;padding:6px!important;object-fit:contain!important;background:#fff!important} :root body.mdb-complete-site.mdb-native-cpo:is(.mdb-specialty-curtain,.mdb-imported-curtain) .product #uni_cpo_options .uni-module-radio-image-mode:not(.mdb-native-range)>label.uni-cpo-option-label .uni-cpo-option-label__image-wrap::after{min-height:0!important;padding:8px 2px 0!important;font-size:13px!important;line-height:1.35!important;background:none!important} /* the clearfix Uni CPO puts before and after each field became an empty first row in the curtain products' grid, pushing the field name 12px below the chosen option; not needed in a grid */ :root body.mdb-complete-site.mdb-native-cpo:is(.mdb-specialty-curtain,.mdb-imported-curtain) .product #uni_cpo_options .uni-module-radio-image-mode:not(.mdb-native-range)::before, :root body.mdb-complete-site.mdb-native-cpo:is(.mdb-specialty-curtain,.mdb-imported-curtain) .product #uni_cpo_options .uni-module-radio-image-mode:not(.mdb-native-range)::after{display:none!important} /* the roller's Chain Colour field had the same 12px step */ :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module-radio-image-mode.mdb-chain-four::before, :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module-radio-image-mode.mdb-chain-four::after{display:none!important} @media (max-width:680px){ :root body.mdb-complete-site.mdb-native-cpo:is(.mdb-specialty-curtain,.mdb-imported-curtain) .product #uni_cpo_options .uni-module-radio-image-mode:not(.mdb-native-range)>label.uni-cpo-option-label{width:calc(33.3333% - 6px)!important} } /* c) colour tiles and photos fill the tile; drawings keep their thin white margin (b) */ :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module-radio-image-mode:is([id*="track_colour"],[id*="trackcolour"],[id*="_colour_double_difftrack"],[id*="laddertape_colour"],.mdb-native-colour-swatch,.mdb-curtain-swatch,.mdb-curtain-photo-choice)>label.uni-cpo-option-label .uni-cpo-option-label__image-wrap img{padding:0!important;object-fit:cover!important} /* the same on the curtain products, where the tile rule in b is more specific */ :root body.mdb-complete-site.mdb-native-cpo:is(.mdb-specialty-curtain,.mdb-imported-curtain) .product #uni_cpo_options .uni-module-radio-image-mode:not(.mdb-native-range):is([id*="track_colour"],[id*="trackcolour"],[id*="_colour_double_difftrack"],[id*="laddertape_colour"],.mdb-native-colour-swatch,.mdb-curtain-swatch,.mdb-curtain-photo-choice)>label.uni-cpo-option-label .uni-cpo-option-label__image-wrap img{padding:0!important;object-fit:cover!important} /* e) fabric range banners on the curtain products: the roller's 76px */ :root body.mdb-complete-site.mdb-native-cpo:is(.mdb-specialty-curtain,.mdb-imported-curtain) .product #uni_cpo_options .mdb-native-range .uni-cpo-option-label__image-wrap img{height:76px!important;min-height:0!important;max-height:76px!important;object-fit:cover!important;padding:0!important} /* f) notice boxes (not the price or SureFit boxes) */ :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module-dynamic_notice:not(.mdb-native-price):not(.mdb-native-protection):not([data-mdb-purchase]):not([id*="pricedisplay"]):not([id*="price_display"])>.js-uni-cpo-field-dynamic_notice:not(:empty){padding:14px 16px!important;border:0!important;border-radius:14px!important;background:var(--sd-aqua-t)!important;font:500 14.5px/1.55 var(--sd-font)!important;letter-spacing:0!important;text-transform:none!important;color:var(--sd-ink)!important} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module-dynamic_notice>.js-uni-cpo-field-dynamic_notice>br:first-child, :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module-dynamic_notice>.js-uni-cpo-field-dynamic_notice :is(h1,h2,h3,h4,h5,h6)+br{display:none} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module-dynamic_notice>.js-uni-cpo-field-dynamic_notice :is(h1,h2,h3,h4,h5,h6){margin:0 0 2px!important;padding:0!important;font:800 14.5px/1.5 var(--sd-font)!important;letter-spacing:0!important;text-transform:none!important;color:var(--sd-ink)!important} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module-dynamic_notice>.js-uni-cpo-field-dynamic_notice :is(p,ul,ol){margin:0 0 6px!important} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module-dynamic_notice>.js-uni-cpo-field-dynamic_notice>:last-child{margin-bottom:0!important} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module-dynamic_notice:not(.mdb-native-price):not(.mdb-native-protection)>.js-uni-cpo-field-dynamic_notice a{font-weight:700;color:var(--sd-aqua-d)!important;text-decoration:underline!important;text-underline-offset:3px} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module-dynamic_notice:not(.mdb-native-price):not(.mdb-native-protection)>.js-uni-cpo-field-dynamic_notice a:is(:hover,:focus-visible){color:var(--sd-slate)!important} /* g) the empty notice left from My DIY on Double Curtains */ :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module-dynamic_notice[id*="zerorisk_pvc"]:not(.mdb-native-protection){display:none!important} /* 76. STICKY BAR BETWEEN 1100 AND ~1250PX WIDE (d14, visualiser page) — Aaron's screenshot, 25 Sep: "Show configuration" ran over "Calculate your price" (and "Spend & Save available" was cut off). Block 71's columns let the button column shrink below its buttons when the screen is just over 1100px, so the buttons slid under the price. Now SureFit and the three buttons always keep their full width (max-content), the price keeps at least 176px (room for "Calculate your price" and the Spend & Save line), and the quantity + Calculate column gives way instead (350px down to 250px). Measured on staging at 1100, 1130, 1180, 1240, 1367 and 1600: no overlap, the bar stays one row (88px). Wider screens look exactly as before. CSS only. Undo: delete this block. */ @media (min-width:1100px){ :root body.mdb-complete-site #bpv-purchase-bar:not(.bpv-bar-mobile):not(.bpv-bar-collapsed){grid-template-columns:max-content max-content minmax(176px,1fr) minmax(250px,350px)} :root body.mdb-complete-site #bpv-purchase-bar:not(.bpv-bar-mobile):not(.bpv-bar-collapsed) .bpv-bar-price{min-width:0} } /* 77. STICKY BAR: THE VIEW BUTTONS MOVE INTO THE "VIEWS" TAB WHEN THE BAR IS TIGHT (d15, visualiser page) — Aaron, 26 Sep: "i notice these issues at some sizes where text overflows and button overflows.. when the buttons overflow into the price area, put those buttons on the side menu thing 'views' the one thats on mobile, thats it." From 1001px (where the visualiser switches to its desktop bar) to 1439px, View blind, View fabric and Show configuration leave the bar and the phone's "Views" tab shows at the right edge instead. That tab holds the visualiser's own copies of the same three buttons (#bpv-open-view, #bpv-bar-proof, Show configuration), so they work the same. The bar keeps SureFit, the price (right-aligned, next to the quantity) and quantity + Calculate / Add to cart. The tab shows only while the bar shows (the visualiser hides the bar outside the form and while its own viewer is open) and never over the photo viewer. From 1440px everything sits in the bar as in blocks 71/76. CSS only; the visualiser's files are untouched. Undo: delete this block. */ @media (min-width:1001px) and (max-width:1439px){ :root body.mdb-complete-site #bpv-purchase-bar:not(.bpv-bar-mobile) .bpv-desktop-actions{display:none!important} :root body.mdb-complete-site #bpv-purchase-bar:not(.bpv-bar-mobile):not(.bpv-bar-collapsed){grid-template-columns:max-content minmax(0,1fr) minmax(250px,350px)!important} :root body.mdb-complete-site #bpv-purchase-bar:not(.bpv-bar-mobile):not(.bpv-bar-collapsed) #bpv-bar-protection{grid-area:1/1} :root body.mdb-complete-site #bpv-purchase-bar:not(.bpv-bar-mobile):not(.bpv-bar-collapsed) .bpv-bar-price{grid-area:1/2;min-width:0;justify-items:end;text-align:right} :root body.mdb-complete-site #bpv-purchase-bar:not(.bpv-bar-mobile):not(.bpv-bar-collapsed) #bpv-bar-price{justify-content:flex-end} :root body.mdb-complete-site #bpv-purchase-bar:not(.bpv-bar-mobile):not(.bpv-bar-collapsed) .bpv-bar-purchase{grid-area:1/3} :root body.mdb-complete-site:not(:has(.pswp--open)):has(#bpv-purchase-bar:not([hidden])) #bpv-edge-menu[hidden]{display:block!important} } /* 78. THE TICK ON CLEARANCE OPTIONS (d15, redone in d16) — Aaron, 26 Sep: "im still not getting any 'tick' selection on elegance and allure only these 2." Those two ranges carry both badges (Thermally Insulated and Clearance), and Core's choice-badges.css draws the badges with the option's ::before and ::after, so the tick (also an ::after, blocks 29f/37) had nowhere to go and was switched off for Clearance options. The tick is drawn on the option's small colour-count line instead (.uni-cpo-option-label__description::before). d16 — Aaron: "for somereason i can see the text inside the tile" (Elegance ticked). d15 made the ticked tile the positioning box for the tick, and that also pulled the chosen range's name (block 29d, shown at the right of the field name) down into the tile. The tile is no longer a positioning box. Instead the colour-count line's own box now runs from the top of the picture to the bottom of the tile, in the last column. The tick sits at its top, 8px in from the picture's top right corner, where the tick sits on the other ranges. The words stay at its bottom, where they were, and the tile keeps its height. Only on fabric ranges with the Clearance badge. Undo: delete this block. */ :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .mdb-native-range>label.uni-cpo-option-label.mdb-badge-clearance>.uni-cpo-option-label__description{grid-row:1/span 2;align-self:stretch;display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end;z-index:3;padding:0 2px 2px!important} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .mdb-native-range>input:checked:not([hidden])+label.uni-cpo-option-label.mdb-badge-clearance>.uni-cpo-option-label__description::before{content:"";display:block;flex:0 0 auto;box-sizing:border-box;width:18px;height:18px;margin:8px 6px auto 0;border-radius:50%;background:var(--sd-aqua) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/11px no-repeat;box-shadow:0 2px 6px rgba(43,50,64,.25);pointer-events:none} /* 79. CASSETTE HELP POPUP: SPACE ABOVE THE PICTURE (d16) — Aaron, 26 Sep: "top of this tile should have some small gap, its just touching the top part looks wrong." Core's help-p10.css (block 4) takes the space off the top of the first section, so the picture tile sat right on the aqua heading band. It gets the same 24px the other help popups have above their first section. Undo: delete this block. */ :root body.mdb-complete-site .pum-theme-mdb-product-help .mdb-cassette-guide .mdb-guide-body>.mdb-guide-section:first-child{padding-top:24px} /* 80. CASSETTE HELP POPUP: NO UNDERLINE ON THE "MEASURING GUIDE" BUTTON (d16) — Aaron, 26 Sep: "the middle button on this popup has a wierd underline?" An older Core rule (presentation-v134.css) underlines, darkens and clears the background of every product-page link whose address contains "measuring" when it is hovered or focused. The cassette popup's footer links are pills, so "Open the cassette measuring guide" now hovers like the pill next to it (aqua ring and light aqua fill from help-p10.css block 5, dark words, no underline). Undo: delete this block. */ :root body.mdb-complete-site .pum-theme-mdb-product-help .mdb-cassette-guide .mdb-guide-footer a[href]:is(:hover,:focus-visible){color:var(--sd-ink,#2B3240)!important;background:var(--sd-aqua-h,#EEF7F8)!important;text-decoration:none!important} /* 81. NO PAGE JUMP WHEN A POPUP OPENS OR CLOSES (d17) — Aaron, 26 Sep: "when you click a popup the slider scroll bar on the browser disappears so it shifts the whole screen behind by that same amount, so it looks like the website behind is twitching every time you open or close a popup." Popup Maker stops the page scrolling behind a popup by hiding the page's scroll bar, and the page then widened into that space. The scroll bar's strip is now always kept (scrollbar-gutter), so the page never changes width. While one of our help popups is open, that strip takes the same dimmed colour as the page behind the popup (the page colour under the popup's rgba(48,55,68,.55) overlay), so it does not show as a light stripe. Phones and Macs with hidden scroll bars have no strip, so nothing changes there. Undo: delete this block. */ html{scrollbar-gutter:stable} html.pum-open-overlay:has(.pum-theme-mdb-product-help.pum-active){background:rgb(137,140,145)} /* 82. CURTAIN DRAWINGS LARGER ON THE PRODUCT FORM (d18) — Aaron, 26 Sep: "i think the tiles may be a bit too small on all of the drawings that have curtain stack diagrams on the uni cpo products that have them, its hard to see the detail in them. perhaps they should be made like double size for those options or maybe not double but slightly larger?" On the five curtain products, the room drawings (Fitting Type, Curtain Position, Curtain Stack, Curtain Splits, Custom Splits, Track Flow, Wand / Control Type, Type of Window, Corner Type, Double Curtain Type) show two to a row instead of four, so each is about twice as wide (94px to 204px on a desktop form). The close-ups of the curtain's bottom (Bottom Finish, Bottom Hem) show three to a row. Heading, track, bracket, colour and motor tiles keep the four-a-row size. Picked by the fields' own names (ids), so a field added later with the same kind of name follows. Phones: the room drawings two to a row (instead of three), the close-ups stay three. Overrides the four- a-row width in "b) picture tiles on the curtain products". Undo: delete this block. */ :root body.mdb-complete-site.mdb-native-cpo:is(.mdb-specialty-curtain,.mdb-imported-curtain) .product #uni_cpo_options .uni-module-radio-image-mode:not(.mdb-native-range):is([id*="fitting_type"],[id*="fittingtype"],[id*="curtainposition"],[id*="curtain_stack"],[id*="curtainstack"],[id*="curtain_splits"],[id*="curtainsplit"],[id*="curtanisplits"],[id*="trackflow"],[id*="wand"],[id*="typeofwindow"],[id*="typeofcorner"],[id*="choosetype_doublecurtain"])>label.uni-cpo-option-label{width:calc(50% - 4px)!important} :root body.mdb-complete-site.mdb-native-cpo:is(.mdb-specialty-curtain,.mdb-imported-curtain) .product #uni_cpo_options .uni-module-radio-image-mode:not(.mdb-native-range):is([id*="curtain_bottom_finish"],[id*="curtainfinish"],[id*="curtainbottom_hem"],[id*="curtainhem"])>label.uni-cpo-option-label{width:calc((100% - 16px) / 3)!important} /* 83. NUMBERED SECTION HEADINGS ON THE OTHER PRODUCTS + PANEL GLIDE DIAGRAMS LARGER (d19, curtains chat) — Aaron, 26 Sep: "all of these products need the section titles with the numbers to split it up a bit like how the roller blinds have" and, for Panel Glide, "the tiles need to be made larger ... we cant see the diagram details". Same design as block 29b (aqua numbered circle + 19px title), drawn by CSS on one always-visible field per section (or the row holding the width field). Titles suit each product: Vertical 1 Fabric / 2 Slats & control / 3 Size & fit / 4 Finish; Panel Glide 1 Fabric / 2 Panels & opening / 3 Size & fit / 4 Finish (on whichever Select Bottom Rail shows); 25mm Venetian 1 Fit & colour / 2 Size / 3 Control / 4 Extras; Timber Venetian 1 Slats & colour / 2 Size & fit / 3 Control / 4 Extras; PVC and Timber Shutters 1 Colour / 2 Size & fit / 3 Shutter style (on whichever Mid Rail shows) / 4 Layout & finish. :not(#mdb-sd-steps) lifts these above block 75's clearfix rule (which hides ::before on text-mode radios). Panel Opening diagrams: two to a row, drawn at their own 600x236 shape. Looks only - no option changed. d22 (header chat): the shared ::before rule below uses background longhands, so each step's own number picture is not reset (see block 86a). Undo: delete this block. */ :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options :is(.uni-module[id="uni_cpo_mdb_vb_im_option_room_name_verticals_p2568"],.uni-module[id="uni_cpo_mdb_vb_im_option_slat127_89_p2568"],.uni-module[id="uni_cpo_mdb_vb_im_option_mount_type_vert_p2568"],.uni-module[id="uni_cpo_mdb_vb_im_option_chain_type_p2568"],.uni-module[id="uni_cpo_mdb_pg_im_option_roomname_panelglides2_p2294"],.uni-module[id="uni_cpo_mdb_pg_im_option_numberofpanels2_p2294"],.uni-row-content-wrap:has(> .uni-row-content [id="uni_cpo_mdb_pg_im_option_width_panels2_p2294"]),.uni-module[id^="uni_cpo_mdb_pg_im_bottomrail_"]:not([id$="-field"]),.uni-module[id="uni_cpo_mdb_av_im_option_roomname_25mm_p1646"],.uni-row-content-wrap:has(> .uni-row-content [id="uni_cpo_mdb_av_im_option_width_25mm_p1646"]),.uni-module[id="uni_cpo_mdb_av_im_option_control_25mm_p1646"],.uni-module[id="uni_cpo_mdb_av_im_option_cutout_25mm_left_p1646"],.uni-module[id="uni_cpo_mdb_tv_im_option_room_name_paris_p2530"],.uni-module[id="uni_cpo_mdb_tv_im_option_mount_type_paris_p2530"],.uni-module[id="uni_cpo_mdb_tv_im_option_control_paris_p2530"],.uni-module[id="uni_cpo_mdb_tv_im_option_cutout_paris_left_p2530"],.uni-module[id="uni_cpo_mdb_ps_im_roomname_pvcshutters_p2366"],.uni-row-content-wrap:has(> .uni-row-content [id="uni_cpo_mdb_ps_im_width_pvc_p2366"]),.uni-module[id^="uni_cpo_mdb_ps_im_option_divider_rail_"]:not([id$="-field"]),.uni-module[id="uni_cpo_mdb_ps_im_option_pvc_tiltbar_position_p2366"],.uni-module[id="uni_cpo_mdb_ts_im_roomname_timbershutters_p2448"],.uni-row-content-wrap:has(> .uni-row-content [id="uni_cpo_mdb_ts_im_width_timber_p2448"]),.uni-module[id^="uni_cpo_mdb_ts_im_option_divider_rail_"]:not([id$="-field"]),.uni-module[id="uni_cpo_mdb_ts_im_option_timber_tiltbar_position_p2448"]){margin-top:30px} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options :is(.uni-module[id="uni_cpo_mdb_vb_im_option_room_name_verticals_p2568"],.uni-module[id="uni_cpo_mdb_pg_im_option_roomname_panelglides2_p2294"],.uni-module[id="uni_cpo_mdb_av_im_option_roomname_25mm_p1646"],.uni-module[id="uni_cpo_mdb_tv_im_option_room_name_paris_p2530"],.uni-module[id="uni_cpo_mdb_ps_im_roomname_pvcshutters_p2366"],.uni-module[id="uni_cpo_mdb_ts_im_roomname_timbershutters_p2448"]){margin-top:18px} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options :is(.uni-module[id="uni_cpo_mdb_vb_im_option_room_name_verticals_p2568"],.uni-module[id="uni_cpo_mdb_vb_im_option_slat127_89_p2568"],.uni-module[id="uni_cpo_mdb_vb_im_option_mount_type_vert_p2568"],.uni-module[id="uni_cpo_mdb_vb_im_option_chain_type_p2568"],.uni-module[id="uni_cpo_mdb_pg_im_option_roomname_panelglides2_p2294"],.uni-module[id="uni_cpo_mdb_pg_im_option_numberofpanels2_p2294"],.uni-row-content-wrap:has(> .uni-row-content [id="uni_cpo_mdb_pg_im_option_width_panels2_p2294"]),.uni-module[id^="uni_cpo_mdb_pg_im_bottomrail_"]:not([id$="-field"]),.uni-module[id="uni_cpo_mdb_av_im_option_roomname_25mm_p1646"],.uni-row-content-wrap:has(> .uni-row-content [id="uni_cpo_mdb_av_im_option_width_25mm_p1646"]),.uni-module[id="uni_cpo_mdb_av_im_option_control_25mm_p1646"],.uni-module[id="uni_cpo_mdb_av_im_option_cutout_25mm_left_p1646"],.uni-module[id="uni_cpo_mdb_tv_im_option_room_name_paris_p2530"],.uni-module[id="uni_cpo_mdb_tv_im_option_mount_type_paris_p2530"],.uni-module[id="uni_cpo_mdb_tv_im_option_control_paris_p2530"],.uni-module[id="uni_cpo_mdb_tv_im_option_cutout_paris_left_p2530"],.uni-module[id="uni_cpo_mdb_ps_im_roomname_pvcshutters_p2366"],.uni-row-content-wrap:has(> .uni-row-content [id="uni_cpo_mdb_ps_im_width_pvc_p2366"]),.uni-module[id^="uni_cpo_mdb_ps_im_option_divider_rail_"]:not([id$="-field"]),.uni-module[id="uni_cpo_mdb_ps_im_option_pvc_tiltbar_position_p2366"],.uni-module[id="uni_cpo_mdb_ts_im_roomname_timbershutters_p2448"],.uni-row-content-wrap:has(> .uni-row-content [id="uni_cpo_mdb_ts_im_width_timber_p2448"]),.uni-module[id^="uni_cpo_mdb_ts_im_option_divider_rail_"]:not([id$="-field"]),.uni-module[id="uni_cpo_mdb_ts_im_option_timber_tiltbar_position_p2448"]):not(#mdb-sd-steps)::before{display:flex!important;flex:0 0 100%;width:100%;order:-1;align-items:center;box-sizing:border-box;height:28px;margin:0 0 18px;padding-left:40px;background-repeat:no-repeat;background-position:left center;background-size:28px 28px;font:700 19px/1.2 var(--sd-font);letter-spacing:-.01em;color:var(--sd-slate);clear:both} /* Vertical Blinds 2568 */ :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module[id="uni_cpo_mdb_vb_im_option_room_name_verticals_p2568"]:not(#mdb-sd-steps)::before{content:"Fabric"!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='14' fill='%2349C3C9'/%3E%3Ctext x='14' y='18.6' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-size='13' font-weight='700' fill='%232B3240'%3E1%3C/text%3E%3C/svg%3E")} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module[id="uni_cpo_mdb_vb_im_option_slat127_89_p2568"]:not(#mdb-sd-steps)::before{content:"Slats & control"!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='14' fill='%2349C3C9'/%3E%3Ctext x='14' y='18.6' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-size='13' font-weight='700' fill='%232B3240'%3E2%3C/text%3E%3C/svg%3E")} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module[id="uni_cpo_mdb_vb_im_option_mount_type_vert_p2568"]:not(#mdb-sd-steps)::before{content:"Size & fit"!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='14' fill='%2349C3C9'/%3E%3Ctext x='14' y='18.6' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-size='13' font-weight='700' fill='%232B3240'%3E3%3C/text%3E%3C/svg%3E")} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module[id="uni_cpo_mdb_vb_im_option_chain_type_p2568"]:not(#mdb-sd-steps)::before{content:"Finish"!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='14' fill='%2349C3C9'/%3E%3Ctext x='14' y='18.6' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-size='13' font-weight='700' fill='%232B3240'%3E4%3C/text%3E%3C/svg%3E")} /* Panel Glide 2294 */ :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module[id="uni_cpo_mdb_pg_im_option_roomname_panelglides2_p2294"]:not(#mdb-sd-steps)::before{content:"Fabric"!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='14' fill='%2349C3C9'/%3E%3Ctext x='14' y='18.6' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-size='13' font-weight='700' fill='%232B3240'%3E1%3C/text%3E%3C/svg%3E")} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module[id="uni_cpo_mdb_pg_im_option_numberofpanels2_p2294"]:not(#mdb-sd-steps)::before{content:"Panels & opening"!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='14' fill='%2349C3C9'/%3E%3Ctext x='14' y='18.6' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-size='13' font-weight='700' fill='%232B3240'%3E2%3C/text%3E%3C/svg%3E")} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-row-content-wrap:has(> .uni-row-content [id="uni_cpo_mdb_pg_im_option_width_panels2_p2294"]):not(#mdb-sd-steps)::before{content:"Size & fit"!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='14' fill='%2349C3C9'/%3E%3Ctext x='14' y='18.6' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-size='13' font-weight='700' fill='%232B3240'%3E3%3C/text%3E%3C/svg%3E")} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module[id^="uni_cpo_mdb_pg_im_bottomrail_"]:not([id$="-field"]):not(#mdb-sd-steps)::before{content:"Finish"!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='14' fill='%2349C3C9'/%3E%3Ctext x='14' y='18.6' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-size='13' font-weight='700' fill='%232B3240'%3E4%3C/text%3E%3C/svg%3E")} /* 25mm Aluminium Venetian 1646 */ :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module[id="uni_cpo_mdb_av_im_option_roomname_25mm_p1646"]:not(#mdb-sd-steps)::before{content:"Fit & colour"!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='14' fill='%2349C3C9'/%3E%3Ctext x='14' y='18.6' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-size='13' font-weight='700' fill='%232B3240'%3E1%3C/text%3E%3C/svg%3E")} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-row-content-wrap:has(> .uni-row-content [id="uni_cpo_mdb_av_im_option_width_25mm_p1646"]):not(#mdb-sd-steps)::before{content:"Size"!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='14' fill='%2349C3C9'/%3E%3Ctext x='14' y='18.6' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-size='13' font-weight='700' fill='%232B3240'%3E2%3C/text%3E%3C/svg%3E")} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module[id="uni_cpo_mdb_av_im_option_control_25mm_p1646"]:not(#mdb-sd-steps)::before{content:"Control"!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='14' fill='%2349C3C9'/%3E%3Ctext x='14' y='18.6' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-size='13' font-weight='700' fill='%232B3240'%3E3%3C/text%3E%3C/svg%3E")} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module[id="uni_cpo_mdb_av_im_option_cutout_25mm_left_p1646"]:not(#mdb-sd-steps)::before{content:"Extras"!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='14' fill='%2349C3C9'/%3E%3Ctext x='14' y='18.6' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-size='13' font-weight='700' fill='%232B3240'%3E4%3C/text%3E%3C/svg%3E")} /* Timber Venetian 2530 */ :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module[id="uni_cpo_mdb_tv_im_option_room_name_paris_p2530"]:not(#mdb-sd-steps)::before{content:"Slats & colour"!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='14' fill='%2349C3C9'/%3E%3Ctext x='14' y='18.6' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-size='13' font-weight='700' fill='%232B3240'%3E1%3C/text%3E%3C/svg%3E")} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module[id="uni_cpo_mdb_tv_im_option_mount_type_paris_p2530"]:not(#mdb-sd-steps)::before{content:"Size & fit"!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='14' fill='%2349C3C9'/%3E%3Ctext x='14' y='18.6' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-size='13' font-weight='700' fill='%232B3240'%3E2%3C/text%3E%3C/svg%3E")} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module[id="uni_cpo_mdb_tv_im_option_control_paris_p2530"]:not(#mdb-sd-steps)::before{content:"Control"!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='14' fill='%2349C3C9'/%3E%3Ctext x='14' y='18.6' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-size='13' font-weight='700' fill='%232B3240'%3E3%3C/text%3E%3C/svg%3E")} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module[id="uni_cpo_mdb_tv_im_option_cutout_paris_left_p2530"]:not(#mdb-sd-steps)::before{content:"Extras"!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='14' fill='%2349C3C9'/%3E%3Ctext x='14' y='18.6' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-size='13' font-weight='700' fill='%232B3240'%3E4%3C/text%3E%3C/svg%3E")} /* PVC Shutters 2366 */ :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module[id="uni_cpo_mdb_ps_im_roomname_pvcshutters_p2366"]:not(#mdb-sd-steps)::before{content:"Colour"!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='14' fill='%2349C3C9'/%3E%3Ctext x='14' y='18.6' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-size='13' font-weight='700' fill='%232B3240'%3E1%3C/text%3E%3C/svg%3E")} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-row-content-wrap:has(> .uni-row-content [id="uni_cpo_mdb_ps_im_width_pvc_p2366"]):not(#mdb-sd-steps)::before{content:"Size & fit"!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='14' fill='%2349C3C9'/%3E%3Ctext x='14' y='18.6' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-size='13' font-weight='700' fill='%232B3240'%3E2%3C/text%3E%3C/svg%3E")} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module[id^="uni_cpo_mdb_ps_im_option_divider_rail_"]:not([id$="-field"]):not(#mdb-sd-steps)::before{content:"Shutter style"!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='14' fill='%2349C3C9'/%3E%3Ctext x='14' y='18.6' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-size='13' font-weight='700' fill='%232B3240'%3E3%3C/text%3E%3C/svg%3E")} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module[id="uni_cpo_mdb_ps_im_option_pvc_tiltbar_position_p2366"]:not(#mdb-sd-steps)::before{content:"Layout & finish"!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='14' fill='%2349C3C9'/%3E%3Ctext x='14' y='18.6' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-size='13' font-weight='700' fill='%232B3240'%3E4%3C/text%3E%3C/svg%3E")} /* Timber Shutters 2448 */ :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module[id="uni_cpo_mdb_ts_im_roomname_timbershutters_p2448"]:not(#mdb-sd-steps)::before{content:"Colour"!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='14' fill='%2349C3C9'/%3E%3Ctext x='14' y='18.6' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-size='13' font-weight='700' fill='%232B3240'%3E1%3C/text%3E%3C/svg%3E")} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-row-content-wrap:has(> .uni-row-content [id="uni_cpo_mdb_ts_im_width_timber_p2448"]):not(#mdb-sd-steps)::before{content:"Size & fit"!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='14' fill='%2349C3C9'/%3E%3Ctext x='14' y='18.6' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-size='13' font-weight='700' fill='%232B3240'%3E2%3C/text%3E%3C/svg%3E")} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module[id^="uni_cpo_mdb_ts_im_option_divider_rail_"]:not([id$="-field"]):not(#mdb-sd-steps)::before{content:"Shutter style"!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='14' fill='%2349C3C9'/%3E%3Ctext x='14' y='18.6' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-size='13' font-weight='700' fill='%232B3240'%3E3%3C/text%3E%3C/svg%3E")} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module[id="uni_cpo_mdb_ts_im_option_timber_tiltbar_position_p2448"]:not(#mdb-sd-steps)::before{content:"Layout & finish"!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='14' fill='%2349C3C9'/%3E%3Ctext x='14' y='18.6' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-size='13' font-weight='700' fill='%232B3240'%3E4%3C/text%3E%3C/svg%3E")} /* Panel Glide: the Panel Opening diagrams two to a row, wide enough to read */ :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module:is([id^="uni_cpo_mdb_pg_im_option_3track2_"],[id^="uni_cpo_mdb_pg_im_option_4track2_"],[id^="uni_cpo_mdb_pg_im_option_track52_"])>label.uni-cpo-option-label{width:calc(50% - .5rem)!important;max-width:none!important} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module:is([id^="uni_cpo_mdb_pg_im_option_3track2_"],[id^="uni_cpo_mdb_pg_im_option_4track2_"],[id^="uni_cpo_mdb_pg_im_option_track52_"])>label.uni-cpo-option-label .uni-cpo-option-label__image-wrap{aspect-ratio:auto!important;height:auto!important} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module:is([id^="uni_cpo_mdb_pg_im_option_3track2_"],[id^="uni_cpo_mdb_pg_im_option_4track2_"],[id^="uni_cpo_mdb_pg_im_option_track52_"])>label.uni-cpo-option-label img{width:100%!important;height:auto!important;aspect-ratio:600/236!important;object-fit:contain!important;padding:6px!important} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options [id^="uni_cpo_mdb_pg_im_option_image_config_"] img{display:block;width:100%;max-width:560px;height:auto} /* ===== Block 84 (d20, 26 Sep): Panel Glide diagram key = its own white rounded card (no aqua notice box) ===== */ :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options #uni_cpo_mdb_pg_im_option_image_config_p2294>.js-uni-cpo-field-dynamic_notice:not(:empty){background:transparent!important;padding:0!important;border:0!important;box-shadow:none!important} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options #uni_cpo_mdb_pg_im_option_image_config_p2294 img{display:block;width:100%;max-width:580px;height:auto} /* ===== Block 85 (d21, 27 Sep): numbered section headings on the two new products - Urbanwood Fauxwood Venetians (mdb_fw_im_*_fw) and Bonded Pelmets (mdb_bp_im_*_bp); keyed on field ids, so no product number needed ===== */ :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options :is(.uni-module[id="uni_cpo_mdb_fw_im_option_room_name_fw"],.uni-module[id="uni_cpo_mdb_fw_im_option_mount_type_fw"],.uni-module[id="uni_cpo_mdb_fw_im_option_control_fw"],.uni-module[id="uni_cpo_mdb_fw_im_option_cutout_left_fw"],.uni-module[id="uni_cpo_mdb_bp_im_option_room_name_bp"],.uni-module[id="uni_cpo_mdb_bp_im_option_width_bp"],.uni-module[id="uni_cpo_mdb_bp_im_option_projection_bp"],.uni-module[id="uni_cpo_mdb_bp_im_option_returns_bp"]){margin-top:30px} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options :is(.uni-module[id="uni_cpo_mdb_fw_im_option_room_name_fw"],.uni-module[id="uni_cpo_mdb_bp_im_option_room_name_bp"]){margin-top:18px} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options :is(.uni-module[id="uni_cpo_mdb_fw_im_option_room_name_fw"],.uni-module[id="uni_cpo_mdb_fw_im_option_mount_type_fw"],.uni-module[id="uni_cpo_mdb_fw_im_option_control_fw"],.uni-module[id="uni_cpo_mdb_fw_im_option_cutout_left_fw"],.uni-module[id="uni_cpo_mdb_bp_im_option_room_name_bp"],.uni-module[id="uni_cpo_mdb_bp_im_option_width_bp"],.uni-module[id="uni_cpo_mdb_bp_im_option_projection_bp"],.uni-module[id="uni_cpo_mdb_bp_im_option_returns_bp"]):not(#mdb-sd-steps)::before{display:flex!important;flex:0 0 100%;width:100%;order:-1;align-items:center;box-sizing:border-box;height:28px;margin:0 0 18px;padding-left:40px;background:no-repeat left center/28px 28px;font:700 19px/1.2 var(--sd-font);letter-spacing:-.01em;color:var(--sd-slate);clear:both} /* Urbanwood Fauxwood Venetians (new) */ :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module[id="uni_cpo_mdb_fw_im_option_room_name_fw"]:not(#mdb-sd-steps)::before{content:"Slats & colour"!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='14' fill='%2349C3C9'/%3E%3Ctext x='14' y='18.6' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-size='13' font-weight='700' fill='%232B3240'%3E1%3C/text%3E%3C/svg%3E")} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module[id="uni_cpo_mdb_fw_im_option_mount_type_fw"]:not(#mdb-sd-steps)::before{content:"Size & fit"!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='14' fill='%2349C3C9'/%3E%3Ctext x='14' y='18.6' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-size='13' font-weight='700' fill='%232B3240'%3E2%3C/text%3E%3C/svg%3E")} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module[id="uni_cpo_mdb_fw_im_option_control_fw"]:not(#mdb-sd-steps)::before{content:"Control"!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='14' fill='%2349C3C9'/%3E%3Ctext x='14' y='18.6' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-size='13' font-weight='700' fill='%232B3240'%3E3%3C/text%3E%3C/svg%3E")} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module[id="uni_cpo_mdb_fw_im_option_cutout_left_fw"]:not(#mdb-sd-steps)::before{content:"Extras"!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='14' fill='%2349C3C9'/%3E%3Ctext x='14' y='18.6' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-size='13' font-weight='700' fill='%232B3240'%3E4%3C/text%3E%3C/svg%3E")} /* Bonded Pelmets (new) */ :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module[id="uni_cpo_mdb_bp_im_option_room_name_bp"]:not(#mdb-sd-steps)::before{content:"Fabric"!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='14' fill='%2349C3C9'/%3E%3Ctext x='14' y='18.6' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-size='13' font-weight='700' fill='%232B3240'%3E1%3C/text%3E%3C/svg%3E")} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module[id="uni_cpo_mdb_bp_im_option_width_bp"]:not(#mdb-sd-steps)::before{content:"Size"!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='14' fill='%2349C3C9'/%3E%3Ctext x='14' y='18.6' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-size='13' font-weight='700' fill='%232B3240'%3E2%3C/text%3E%3C/svg%3E")} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module[id="uni_cpo_mdb_bp_im_option_projection_bp"]:not(#mdb-sd-steps)::before{content:"Projection & face"!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='14' fill='%2349C3C9'/%3E%3Ctext x='14' y='18.6' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-size='13' font-weight='700' fill='%232B3240'%3E3%3C/text%3E%3C/svg%3E")} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module[id="uni_cpo_mdb_bp_im_option_returns_bp"]:not(#mdb-sd-steps)::before{content:"Returns"!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='14' fill='%2349C3C9'/%3E%3Ctext x='14' y='18.6' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-size='13' font-weight='700' fill='%232B3240'%3E4%3C/text%3E%3C/svg%3E")} /* 86. VISUALISER PRODUCTS LOOK LIKE THE ROLLER (d22, header chat) — Aaron, 28 Sep: the visualiser that was added to most products "has ruined our layout of that visualiser ... it needs to be fixed", match the Roller, "remember we agreed to create product specific numbered steps". Found (staging, 28 Sep): a) the numbered circles were missing on most steps of Vertical, Panel Glide, the Venetians and the Shutters: block 83's shared rule set `background` as a shorthand at a higher weight than each step's own picture rule (its list includes a row selector), so the picture was reset to none. Fixed in block 83 itself (longhands). Each product keeps its own step titles. b) PVC and Timber Shutters: "Size & fit" is drawn on the Width row, and the Height row beside it started at the top, so the heading sat next to the Height field. The Height row now starts level with Width (checked: 0px). Panel Glide and 25mm Venetian keep Width and Drop in one row, so they were already right. c) (undone in d24, block 88: the reference page roller-visualiser-review-2 shows the product name, so every product now shows it.) d) the picture: no "Your selection" title, no grey card round it; rounded like the Roller's. e) "View larger" on the picture is hidden where the bar has "View blind" (the same larger view). Visualiser files untouched; CSS only. Undo: delete this block (and put block 83's `background:no-repeat left center/28px 28px` back). */ :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options > [id^="uni_row_"]:is(:has([id="uni_cpo_mdb_ps_im_width_pvc_p2366"]),:has([id="uni_cpo_mdb_ts_im_width_timber_p2448"])) + [id^="uni_row_"]{padding-top:46px} :root body.mdb-complete-site .bpv-family .bpv-family-title{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important} :root body.mdb-complete-site .bpv-family{background:transparent!important;padding:0!important;border:0!important;border-radius:0!important;box-shadow:none!important} :root body.mdb-complete-site .bpv-family .bpv-family-stage{border-radius:18px!important;overflow:hidden} :root body.mdb-complete-site:has(#bpv-open-image) .bpv-family .bpv-family-stage > button[data-zoom]{display:none!important} /* 87. ADDING TO CART SAYS "ADDING TO CART" (d23, header chat) — Aaron, 29 Sep: "during adding to cart we should be saying 'adding to cart' in the popup notice and at the bottom animation not configuring. configuring is when we are changing options or calculating." While the cart request runs, the visualiser keeps its price-request wording ("Updating your configuration..." on the picture, "Updating price..." in the bar). Its bar button carries the phase (data-bpv-action-feedback starts "Adding"), so for that moment both lines read "Adding to cart...". d24: keyed to Core p32's body.mdb-cart-adding instead, which ends when the cart request has finished (the visualiser's own phase could stay on "Adding" after a failed handler, and these words with it). Changing an option or calculating keeps the configuring words. Words drawn by CSS: screen readers still hear the visualiser's own words (a visualiser change can fix that for them too). Undo: delete this block. */ :root body.mdb-complete-site.mdb-cart-adding #bpv-loading-label{font-size:0!important;letter-spacing:0!important} :root body.mdb-complete-site.mdb-cart-adding #bpv-loading-label::after{content:"Adding to cart\2026";font-size:14px;font-weight:600;line-height:1.4;letter-spacing:normal} :root body.mdb-complete-site.mdb-cart-adding #bpv-bar-price .bpv-price-message{position:relative;display:inline-block;color:transparent!important;white-space:nowrap} :root body.mdb-complete-site.mdb-cart-adding #bpv-bar-price .bpv-price-message::after{content:"Adding to cart\2026";position:absolute;left:0;top:0;color:var(--sd-slate,#444E60);white-space:nowrap} /* 88. EVERY PRODUCT SHOWS ITS NAME, LIKE THE REFERENCE PAGE (d24, header chat) — Aaron, 29 Sep: "check that the layout format of all products currently on staging match our original .../product/roller-visualiser-review-2/". Checked on staging at 1440px: all visualiser products already share its two columns (858 + 429px) and pinned picture; the one difference was the product name above "Build your …", which review-2 shows and the others hid (the Roller through its page's "hide title" setting, the others through d22's block 86 c, now removed). Undo: delete this block. */ :root body.mdb-complete-site.mdb-native-cpo .product .summary h1.product_title{display:block} /* 89. DOUBLE, VERTICAL, SHUTTERS, VENETIANS: THE NOTE SITS UNDER THE PICTURE (d24, header chat) — Aaron: "bugged out tile below visualiser type, or text?". Since d22 took the grey card off the picture, the picture frame's tinted inner band showed under it and the note ("Style and colour illustration ...") ran into its rounded left corner (cut off on phones). The frame is now clear and the note is a small caption under the picture. Undo: delete this block. */ :root body.mdb-complete-site .woocommerce-product-gallery:has(> .woocommerce-product-gallery__wrapper > .bpv-family){background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;overflow:visible!important} :root body.mdb-complete-site .woocommerce-product-gallery__wrapper:has(> .bpv-family){background:transparent!important} :root body.mdb-complete-site .bpv-family .bpv-family-note{margin:12px 0 0!important;padding:0 6px!important;font-size:13px!important;line-height:1.5!important;color:#5b6475!important;text-align:left} /* 90. CHAIN COLOUR TILES ARE SQUARE (d24, header chat) — Aaron: chain tiles "too tall vertically". Core drew the chain pictures 166px tall in a tile about 132px wide (206px with the name). Now the picture is square like the other picture tiles, three to a row at every width. Undo: delete this block. */ :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options :is([data-mdb-artwork="chain"],.mdb-choice-chain) > .uni-cpo-option-label{width:calc((100% - 32px)/3)!important;max-width:150px!important} :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options :is([data-mdb-artwork="chain"],.mdb-choice-chain) img{width:100%!important;max-width:none!important;height:auto!important;aspect-ratio:1/1!important} /* 91. A TEXT CHOICE NO LONGER SHIFTS WHEN PICKED (d24, header chat) — Aaron: "explain why the text is indented once selected" (e.g. the chargers choice). Why: block 69 made room for the tick by widening a picked choice's sides from 12px to 34px, so a two-line label's lines jumped 22px to the right. Now every text choice keeps the same 30px sides whether picked or not, so nothing moves; the tick (10px from the right, 18px wide) sits in the right-hand space. Amends block 69. Undo: delete this block. */ :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options :is(.uni-module-radio-text-mode,.uni-module-checkbox-text-mode)>input:is(:checked,:not(:checked)):not([hidden])+label.uni-cpo-option-label{padding-left:30px!important;padding-right:30px!important} /* 92. "SHOW CONFIGURATION" WINDOW: THE LIST SCROLLS, NOT THE WINDOW (d24, header chat) — Aaron: the Show configuration popup's scroll bar "needs a visual fix". On a short screen the whole window scrolled, so a full-height grey scroll bar ran down its rounded right edge beside the title. Now the title stays put and only the list scrolls, with a slim bar inside the window. Visualiser files untouched. Undo: delete this block. */ :root body.mdb-complete-site dialog#bpv-configuration[open]{display:flex!important;flex-direction:column;overflow:hidden!important} :root body.mdb-complete-site dialog#bpv-configuration[open]>.bpv-dialog-header{flex:none;position:relative!important;top:auto!important} :root body.mdb-complete-site dialog#bpv-configuration[open]>#bpv-configuration-list{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;margin-right:-14px!important;padding-right:14px!important;scrollbar-width:thin;scrollbar-color:#b8c5c8 transparent} :root body.mdb-complete-site dialog#bpv-configuration[open]>#bpv-configuration-list::-webkit-scrollbar{width:6px} :root body.mdb-complete-site dialog#bpv-configuration[open]>#bpv-configuration-list::-webkit-scrollbar-thumb{background:#b8c5c8;border-radius:6px} :root body.mdb-complete-site dialog#bpv-configuration[open]>#bpv-configuration-list::-webkit-scrollbar-track{background:transparent} /* 93. PHONES: NO STUCK NAME BUBBLE OVER THE OPTIONS (d24, header chat) — Aaron's phone screenshot (IMG_1591): after tapping a colour picture, its hover name bubble ("White") stayed on screen over the "Component Colour" heading. On touch screens the bubble is not shown (each picture already has its name under it). Undo: delete this block. */ @media (hover:none){ :root body.mdb-complete-site.mdb-native-cpo .ui-tooltip{display:none!important} } /* 94. "START AGAIN" LINK (d24, with Core p32) — Aaron: "perhaps we also need a 'reset config' button somewhere". Core p32 adds a plain "Start again" link beside "Build your …" (it reloads the product with every option back to its default). Small and quiet, so it is not pressed by mistake. Undo: delete this block (and the link in Core). */ :root body.mdb-complete-site .mdb-config-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;align-items:baseline} :root body.mdb-complete-site .mdb-config-heading>*{grid-column:1/-1} :root body.mdb-complete-site .mdb-config-heading>h2{grid-column:1} :root body.mdb-complete-site .mdb-config-heading>.mdb-config-reset{grid-column:2;grid-row:1;justify-self:end;display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:600;line-height:1.3;color:#21858b;text-decoration:none;white-space:nowrap} :root body.mdb-complete-site .mdb-config-heading>.mdb-config-reset::before{content:"\21BA";font-size:15px;line-height:1} :root body.mdb-complete-site .mdb-config-heading>.mdb-config-reset:is(:hover,:focus-visible){text-decoration:underline;text-underline-offset:3px} /* 95. LANDING PAGES (d24, header chat) — Aaron's phone screenshots, 29 Sep. a) "Everyday operation" on Vertical, Panel Glide and the Venetian pages (IMG_1585): the cards were white with white words, so they looked empty. They are now the dark cards used on the Roller pages, with the words showing. b) the numbered steps ("Choose the visual rhythm", Curtains, IMG_1590): long lines squeezed the number circles narrower, so the numbers and lines did not line up. The circles keep their size. c) phones: two plain sections in a row left about 150px of empty page between them (IMG_1594, "Round out your blockout blind"). Each section now has 52px above and below on phones (was 72px). Undo: delete this block. */ :root body.mdb-complete-site .mdb-discovery-controls .mdb-control-card{background:var(--mdb-navy2,#505b6e)!important;border-color:#586375!important;color:#fff} :root body.mdb-complete-site .mdb-split li b{flex:none} @media (max-width:767px){ :root body.mdb-complete-site .mdb-main>.mdb-section{padding-top:52px;padding-bottom:52px} } /* 96. CHECKOUT: THE PAYMENT CARD SITS INSIDE ITS PANEL (d24, header chat) — Aaron, 29 Sep: "not sure if checkout payment area tile is meant to overlap like this or not". It was not: block 43's warm-white payment card ran edge to edge over the mint payment panel, so its rounded top corners and square-looking bottom edge sat on the panel's own edges. The panel now has an even 14px border of mint round the card; the bank-transfer note is a white inner box (its little pointer removed), and the privacy line, tick box and Place order keep the card's left edge. Undo: delete this block. */ :root body.mdb-complete-site .woocommerce-checkout #payment{padding:14px!important;box-sizing:border-box} :root body.mdb-complete-site .woocommerce-checkout #payment ul.payment_methods{margin:0!important;padding:18px 20px!important;border:1px solid #E3E9E8!important;border-radius:14px!important;background:#FBFAF8!important} :root body.mdb-complete-site .woocommerce-checkout #payment div.payment_box{margin:12px 0 0!important;padding:14px 16px!important;border:1px solid #ECE9E2;border-radius:12px!important;background:#fff!important} :root body.mdb-complete-site .woocommerce-checkout #payment div.payment_box::before{display:none!important} :root body.mdb-complete-site .woocommerce-checkout #payment div.payment_box p:last-child{margin-bottom:0} :root body.mdb-complete-site .woocommerce-checkout #payment div.form-row.place-order{padding:18px 6px 6px!important;margin:0!important} /* 97. ORDER RECEIVED PAGE IN THE SITE'S ROUNDED CARDS (d24, with Core p32) — Aaron, 29 Sep: "is the order received page in the right style? i see square boxes, we have the rounded edge tile design on new site". WooCommerce's own square table, dotted list and bordered addresses become the site's white rounded cards: the thank-you line is a mint notice, the order number / date / email / total / payment row is one card, "Order details", the bank details and the addresses are cards, and the headings are section size instead of page size. Core p32 changes the page heading from "Checkout" to "Order received". Words and order data unchanged. Undo: delete this block. */ :root body.mdb-complete-site.woocommerce-order-received .woocommerce-order{display:flex;flex-direction:column;gap:22px} :root body.mdb-complete-site.woocommerce-order-received .woocommerce-order>*{margin:0!important} :root body.mdb-complete-site.woocommerce-order-received .woocommerce-thankyou-order-received{padding:16px 22px 16px 54px;border-radius:16px;background:#EAF6F4;color:var(--sd-ink,#2B3240);font-size:18px;font-weight:600;position:relative} :root body.mdb-complete-site.woocommerce-order-received .woocommerce-thankyou-order-received::before{content:"";position:absolute;left:20px;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;background:#2A9D95 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/14px no-repeat} :root body.mdb-complete-site.woocommerce-order-received :is(ul.woocommerce-order-overview,ul.bacs_details){display:grid!important;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px 0;margin:0!important;padding:20px 8px!important;list-style:none;border-radius:22px;background:#fff;box-shadow:var(--sd-shadow,0 6px 20px rgba(43,50,64,.06))} :root body.mdb-complete-site.woocommerce-order-received :is(ul.woocommerce-order-overview,ul.bacs_details)>li{float:none!important;margin:0!important;padding:4px 18px!important;border:0!important;border-left:1px solid #ECE9E2!important;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#6B7382;line-height:1.5} :root body.mdb-complete-site.woocommerce-order-received :is(ul.woocommerce-order-overview,ul.bacs_details)>li:first-child{border-left:0!important} :root body.mdb-complete-site.woocommerce-order-received :is(ul.woocommerce-order-overview,ul.bacs_details)>li strong{display:block;margin-top:4px;font-size:16px;letter-spacing:0;text-transform:none;color:var(--sd-ink,#2B3240);overflow-wrap:anywhere} :root body.mdb-complete-site.woocommerce-order-received .woocommerce-order :is(h2,.woocommerce-order-details__title,.woocommerce-column__title,.wc-bacs-bank-details-heading){margin:14px 0 12px!important;font-size:clamp(24px,2.4vw,30px)!important;line-height:1.2!important;letter-spacing:-.01em} :root body.mdb-complete-site.woocommerce-order-received .woocommerce-order h3.wc-bacs-bank-details-account-name{margin:0 0 10px;font-size:16px} :root body.mdb-complete-site.woocommerce-order-received table.woocommerce-table--order-details{border:0!important;border-collapse:separate!important;border-spacing:0;border-radius:22px;overflow:hidden;background:#fff;box-shadow:var(--sd-shadow,0 6px 20px rgba(43,50,64,.06));margin:0!important} :root body.mdb-complete-site.woocommerce-order-received table.woocommerce-table--order-details :is(th,td){padding:16px 22px!important;border:0!important;border-top:1px solid #ECE9E2!important;background:transparent!important;vertical-align:top} :root body.mdb-complete-site.woocommerce-order-received table.woocommerce-table--order-details thead :is(th,td){border-top:0!important;background:#F6F4EF!important;font-size:13px;letter-spacing:.06em;text-transform:uppercase} :root body.mdb-complete-site.woocommerce-order-received table.woocommerce-table--order-details :is(th,td):last-child{text-align:right} :root body.mdb-complete-site.woocommerce-order-received table.woocommerce-table--order-details tfoot tr:last-child :is(th,td){font-size:17px;font-weight:700} :root body.mdb-complete-site.woocommerce-order-received table.woocommerce-table--order-details ul.wc-item-meta{margin:10px 0 0!important;padding:0!important;list-style:none;font-size:14px;line-height:1.6;color:#5b6475} :root body.mdb-complete-site.woocommerce-order-received table.woocommerce-table--order-details ul.wc-item-meta li{margin:0!important} :root body.mdb-complete-site.woocommerce-order-received table.woocommerce-table--order-details ul.wc-item-meta :is(strong,p){display:inline;margin:0} :root body.mdb-complete-site.woocommerce-order-received table.woocommerce-table--order-details td.product-name>a{color:var(--sd-ink,#2B3240);font-weight:700;text-decoration:none} :root body.mdb-complete-site.woocommerce-order-received .woocommerce-customer-details address p:last-child{margin-bottom:0} :root body.mdb-complete-site.woocommerce-order-received .woocommerce-customer-details address{padding:20px 22px!important;border:0!important;border-radius:22px!important;background:#fff;box-shadow:var(--sd-shadow,0 6px 20px rgba(43,50,64,.06));font-style:normal;line-height:1.7} :root body.mdb-complete-site.woocommerce-order-received .woocommerce-customer-details .woocommerce-columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px} :root body.mdb-complete-site.woocommerce-order-received .woocommerce-customer-details .woocommerce-columns>.woocommerce-column{float:none!important;width:auto!important;max-width:none!important;margin:0!important} :root body.mdb-complete-site.woocommerce-order-received .woocommerce-customer-details .woocommerce-columns::before,:root body.mdb-complete-site.woocommerce-order-received .woocommerce-customer-details .woocommerce-columns::after{display:none!important} @media (max-width:680px){ :root body.mdb-complete-site.woocommerce-order-received :is(ul.woocommerce-order-overview,ul.bacs_details){grid-template-columns:1fr 1fr;padding:16px 4px!important} :root body.mdb-complete-site.woocommerce-order-received :is(ul.woocommerce-order-overview,ul.bacs_details)>li{border-left:0!important;padding:4px 14px!important} :root body.mdb-complete-site.woocommerce-order-received table.woocommerce-table--order-details :is(th,td){padding:14px 16px!important} } /* 98. CURTAINS' NEW PICTURE LOOKS LIKE THE BLINDS' (d24, header chat) — Aaron, 29 Sep: "claudes updated products just recently so check again all of them the visualiser tile its busted" (Curtains screenshot). The curtain picture added today (section.curtain-r38, on the curtain products) filled the whole 858px column, so on a laptop it ran down behind the price bar, with a "Your curtain" title on a tinted band above it. Like the blind pictures (blocks 86 and 89): no title band or card, the picture is sized to the screen (about 640px square on a 900px-high window, never wider than the column), rounded, and centred with its notes under it. Rechecked the blinds the same day: their pictures and bars are as before. Curtain picture files untouched; CSS only. Undo: delete this block. */ :root body.mdb-complete-site .woocommerce-product-gallery:has(> .woocommerce-product-gallery__wrapper > .curtain-r38){background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;overflow:visible!important} :root body.mdb-complete-site .woocommerce-product-gallery__wrapper:has(> .curtain-r38){background:transparent!important} :root body.mdb-complete-site .curtain-r38{width:min(100%,max(420px,calc(100vh - 260px)));margin:0 auto!important;padding:0!important;background:transparent!important} :root body.mdb-complete-site .curtain-r38>h2{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important} :root body.mdb-complete-site .curtain-r38 .curtain-r38-stage{border-radius:18px!important;overflow:hidden} :root body.mdb-complete-site .curtain-r38 .curtain-r38-toolbar{margin-top:10px} :root body.mdb-complete-site .curtain-r38>p{margin:8px 6px 0!important;padding:0!important;font-size:13px!important;line-height:1.5!important;color:#5b6475!important;text-align:left} :root body.mdb-complete-site .curtain-r38>p:first-of-type{font-weight:600;color:var(--sd-ink,#2B3240)!important} /* 99. THE PRICE BAR ON PRODUCTS WITHOUT THE VISUALISER BAR MATCHES THE APPROVED ONE (d25, header chat) — Aaron, 30 Sep, Lined Curtains: the price bar is "not following the layout of our approved base model on visualiser". Block 58 b (d9) put "Your price" at the left of a square-cornered bar with a 300px button. It now copies the bar on /product/roller-visualiser-review-2/ as measured there at 1440px: a pill-shaped bar 88px high with a thin edge; "Your price", the price and the Spend & Save line right-aligned just left of the quantity; quantity 132 x 50 pill; the button 208 x 48; 13px from the bar's right end, 10px between them; the price lines centred in the bar's height. The price reads 19px like the approved bar, and before it is worked out it reads "Calculate your price" (was "Choose your options to calculate your price."; screen readers still hear the full sentence). Applies to the curtains, Bonded Pelmets and Fauxwood (the products without the visualiser's own bar). Desktop only, as block 58. Undo: delete this block. */ @media (min-width:1051px){ :root body.mdb-complete-site.mdb-native-cpo.single-product:not([class*="bpv-"]):has(#uni_cpo_options .uni-module:is([id*="price_display"],[id*="pricedisplay"])) form.cart .mdb-buy-row{min-height:88px!important;padding:0 13px!important;gap:10px!important;border:1px solid #ECE9E2!important;border-radius:999px!important} :root body.mdb-complete-site.mdb-native-cpo.single-product:not([class*="bpv-"]):has(#uni_cpo_options .uni-module:is([id*="price_display"],[id*="pricedisplay"])) form.cart .mdb-buy-row>.quantity{flex:0 0 132px!important;width:132px!important} :root body.mdb-complete-site.mdb-native-cpo.single-product:not([class*="bpv-"]):has(#uni_cpo_options .uni-module:is([id*="price_display"],[id*="pricedisplay"])) form.cart .mdb-buy-row .quantity input{width:132px!important;height:50px!important;font-weight:600!important} :root body.mdb-complete-site.mdb-native-cpo.single-product:not([class*="bpv-"]):has(#uni_cpo_options .uni-module:is([id*="price_display"],[id*="pricedisplay"])) form.cart .mdb-buy-row>:is(.single_add_to_cart_button,.mdb-cpo-invalid-trigger){flex:0 0 208px!important;width:208px!important;min-height:48px!important;height:48px!important;padding:0 16px!important} :root body.mdb-complete-site.mdb-native-cpo.single-product:not([class*="bpv-"]):has(form.cart .mdb-buy-row) .product #uni_cpo_options .uni-module:is([id*="price_display"],[id*="pricedisplay"]){left:auto!important;right:calc(50% - min(620px, 50% - 24px) + 376px)!important;bottom:16px!important;width:300px!important;height:88px!important;display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:flex-end!important;text-align:right!important} :root body.mdb-complete-site.mdb-native-cpo.single-product:not([class*="bpv-"]):has(form.cart .mdb-buy-row) .product #uni_cpo_options .uni-module:is([id*="price_display"],[id*="pricedisplay"])::before{color:#5B6776!important;text-align:right} :root body.mdb-complete-site.mdb-native-cpo.single-product:not([class*="bpv-"]):has(form.cart .mdb-buy-row) .product #uni_cpo_options .uni-module:is([id*="price_display"],[id*="pricedisplay"])>.js-uni-cpo-field{font:800 19px/1.25 var(--sd-font)!important;text-align:right!important} :root body.mdb-complete-site.mdb-native-cpo.single-product:not([class*="bpv-"]):has(form.cart .mdb-buy-row) .product #uni_cpo_options .uni-module:is([id*="price_display"],[id*="pricedisplay"])>.mdb-cpo-price-prompt:not([hidden]){display:block;font-size:0!important;line-height:0;text-align:right} :root body.mdb-complete-site.mdb-native-cpo.single-product:not([class*="bpv-"]):has(form.cart .mdb-buy-row) .product #uni_cpo_options .uni-module:is([id*="price_display"],[id*="pricedisplay"])>.mdb-cpo-price-prompt:not([hidden])::after{content:"Calculate your price";font:800 17px/1.4 var(--sd-font);color:var(--sd-slate,#444E60)} :root body.mdb-complete-site.mdb-native-cpo.single-product:not([class*="bpv-"]):has(form.cart .mdb-buy-row) .product #uni_cpo_options .uni-module:is([id*="price_display"],[id*="pricedisplay"])>.mdb-as-low{margin:2px 0 0!important;font-size:12px!important;line-height:1.5!important;text-align:right!important;justify-content:flex-end} :root body.mdb-complete-site.mdb-native-cpo.single-product:not([class*="bpv-"]):has(form.cart .mdb-buy-row) .product #uni_cpo_options .uni-module:is([id*="price_display"],[id*="pricedisplay"])>.mdb-as-low strong{font-size:14px!important;font-weight:800!important;color:#2F8E94!important} } /* 100. THE TICK SITS ON THE PICTURE'S CORNER AT EVERY WIDTH (d26, header chat) — Aaron, 30 Sep: "ticks not lining up with the tile? idk if its the size of my browser". It was the width: Core caps some pictures (Component Colour) at 112px, and when the tile is wider than that (narrow windows, where the form goes full width) the picture stopped short of the tile while the tick (block 29 e) stayed at the tile's corner. Pictures now fill their tile, so the tick is always on the picture's corner. Undo: delete this block. */ :root body.mdb-complete-site.mdb-native-cpo .product #uni_cpo_options .uni-module-radio-image-mode:not(.mdb-native-range)>label.uni-cpo-option-label img.uni-cpo-option-label__image{max-width:100%!important;width:100%!important} /* 101. ONE LOADER ON VISUALISER PRODUCTS (d26, header chat) — Aaron: "we still have 2 duplicate animation loaders, the original 3 rectangle loader plus the visualiser loader, we only need the visualiser loader." Core's three-bar loader (presentation-v136, over the options while Uni CPO works) is hidden where the visualiser shows its own. Products without the visualiser keep Core's. Undo: delete this block. */ :root body.mdb-complete-site:is(.bpv-family-ui,.bpv-bar-visible,.bpv-loading-presenter,.bpv-review-draft) .mdb-options-progress{display:none!important} /* 102. "CALCULATING YOUR PRICE..." WHILE CALCULATING (d26, with Core p34) — Aaron: "the animation still says updating your configuration when im pressing the calculate button? it should say calculating your price". While a Calculate price request runs (Core p34 puts .mdb-calculating on the page), the picture's notice and the bar's price line read "Calculating your price..."; changing an option still says "Updating your configuration...", adding to cart still says "Adding to cart..." (block 87). Words drawn by CSS. Undo: delete this block. */ :root body.mdb-complete-site.mdb-calculating:not(.mdb-cart-adding) #bpv-loading-label{font-size:0!important;letter-spacing:0!important} :root body.mdb-complete-site.mdb-calculating:not(.mdb-cart-adding) #bpv-loading-label::after{content:"Calculating your price\2026";font-size:14px;font-weight:600;line-height:1.4;letter-spacing:normal} :root body.mdb-complete-site.mdb-calculating:not(.mdb-cart-adding) #bpv-bar-price .bpv-price-message{font-size:0!important;letter-spacing:0!important} :root body.mdb-complete-site.mdb-calculating:not(.mdb-cart-adding) #bpv-bar-price .bpv-price-message::after{content:"Calculating your price\2026";font-size:17px;font-weight:800;line-height:1.4;letter-spacing:normal;color:var(--sd-slate,#444E60)} /* 103. THE BOTTOM BAR STEPS ASIDE AT THE FORM'S OWN BUTTONS, AND HAS NO DOWN ARROW (d26, with Core p34) — Aaron: "the bottom sticky bar should disappear once you get to the add to cart area on the product page as its the same thing and re appear as u scroll away from it, also the down arrow on the bottom sticky bar should not be there just remove that it serves no real function". While the form's quantity + Calculate / Add to cart row is on screen (Core p34 puts .mdb-buyrow-visible on the page) the bar slides down out of view and fades; it slides back as soon as the row leaves the screen. It moves with `translate`, so its position on iPhones (claude/ios-sticky-bars.md) is untouched. The phone bar's minimise arrow is gone; the bar always shows its buttons. Undo: delete this block. */ :root body.mdb-complete-site #bpv-purchase-bar{transition:translate .25s ease,opacity .2s ease!important} :root body.mdb-complete-site.mdb-buyrow-visible #bpv-purchase-bar{translate:0 calc(100% + 40px);opacity:0;pointer-events:none} :root body.mdb-complete-site #bpv-bar-toggle{display:none!important} @media (prefers-reduced-motion:reduce){:root body.mdb-complete-site #bpv-purchase-bar{transition:none!important}} /* 104. EVERY POPUP HIDES THE BOTTOM BAR (d26, header chat) — Aaron: "surefit popup doesnt get rid of mini hover bar at bottom on product pages, but view fabric and show config do, which way to do for all?" All of them now hide it: the help popups ("?", SureFit and the rest, Popup Maker) do what View fabric and Show configuration already did, so no popup ever has the bar across its lower edge. The bar comes back when the popup closes. Undo: delete this block. */ html.pum-open-overlay:root body.mdb-complete-site #bpv-purchase-bar, html.pum-open-overlay:root body.mdb-complete-site:has(#bpv-purchase-bar) #bpv-edge-menu#bpv-edge-menu{display:none!important} html.pum-open-overlay:root body.mdb-complete-site.mdb-native-cpo.single-product:not([class*="bpv-"]) form.cart .mdb-buy-row, html.pum-open-overlay:root body.mdb-complete-site.mdb-native-cpo.single-product:not([class*="bpv-"]) .product #uni_cpo_options .uni-module:is([id*="price_display"],[id*="pricedisplay"]){visibility:hidden!important} /* 105. ROOM UNDER "BUILD YOUR ..." BEFORE STEP 1 (d26, header chat) — Aaron: "check spacing here" (Roller: "Choose your size, fabric and finish." sat right on top of "1 Fabric"). 26px under the intro, like the gaps elsewhere in the form. Undo: delete this block. */ :root body.mdb-complete-site.mdb-native-cpo .product .mdb-config-heading{margin-bottom:26px!important} /* 106. SIDE CART (d26, with Core p34) — Aaron: "no animation on minicart icon? mini cart empty icon should be the same as the header icon? when miincart is empty check this gap for the slider... is that normal?" a) Adding to the cart makes the header's cart give a short bump (Core p34 adds .mdb-cart-bump for 0.7s). b) The empty cart shows the header's own cart drawing (was a shopping bag), in the same round tile (block 66). c) No "Applicable discounts ... / Continue Shopping" footer while the cart is empty. d) The light strip at the right edge while the cart is open: it is the space kept for the page's scroll bar (block 81, so the page never jumps). It now takes the cart's own colours, so the cart reads edge to edge. Undo: delete this block. */ @keyframes mdb-cart-bump{0%{transform:scale(1)}30%{transform:scale(1.16) rotate(-8deg)}60%{transform:scale(.96) rotate(4deg)}100%{transform:scale(1) rotate(0)}} :root body.mdb-complete-site .mdb-header-cart.mdb-cart-bump .mdb-icon-cart{animation:mdb-cart-bump .7s cubic-bezier(.3,.7,.4,1.3);transform-origin:50% 60%} :root body.mdb-complete-site .mdb-header-cart.mdb-cart-bump .mdb-header-cart-count{animation:mdb-cart-bump .7s ease} @media (prefers-reduced-motion:reduce){:root body.mdb-complete-site .mdb-header-cart.mdb-cart-bump :is(.mdb-icon-cart,.mdb-header-cart-count){animation:none}} :root body.mdb-complete-site .xoo-wsc-empty-cart::before{background:var(--sd-aqua-t) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23444E60' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 4h3l2 12h12M6 7h15l-2 6H7M11 7v6M16 7v6'/%3E%3Ccircle cx='9' cy='20' r='1.5'/%3E%3Ccircle cx='18' cy='20' r='1.5'/%3E%3C/svg%3E") center/38px no-repeat!important} :root body.mdb-complete-site .xoo-wsc-container:has(.xoo-wsc-empty-cart) .xoo-wsc-footer{display:none!important} html.xoo-wsc-cart-active{background:linear-gradient(#F6F4EF 0 67px,#F8F9FA 67px) fixed!important} /* 107. EVEN SPACE BETWEEN PAGE SECTIONS (d26, header chat) — Aaron, 30 Sep, home page: "this gap seems extra than nessecery" (between the product cards and "The My Direct difference") and "on this section gap is huge above but small below, its not concsistent ... i want whats best aesthetically". Measured at 1600px: two plain sections in a row left 285px of empty page (142px each), the dark "What you are not paying for" card had 183px above it and 69px under it. Now every section boundary is about 128px, on the home page and the landing pages: plain sections 64px above and below (the "Measure first" help band too), the dark and teal cards 64px outside, the picture-and-steps section 36px (its own 29px inset makes it match); the first section after the hero's four reassurance cards keeps 40px more. Inside the cards is unchanged. Tablets and computers (768px and wider); phones keep block 95 c. Undo: delete this block. */ @media (min-width:768px){ :root body.mdb-complete-site .mdb-main>:is(.mdb-section,.mdb-value-section,.mdb-reviews){padding-top:64px!important;padding-bottom:64px!important} :root body.mdb-complete-site .mdb-main>:is(.mdb-value-section,.mdb-discovery-help){margin-top:0!important;margin-bottom:0!important} :root body.mdb-complete-site .mdb-main>.mdb-discovery-help{padding-top:64px!important;padding-bottom:64px!important} :root body.mdb-complete-site .mdb-main>.mdb-product-proof+:is(.mdb-section,.mdb-value-section){margin-top:40px!important} :root body.mdb-complete-site .mdb-main>.mdb-split{padding-top:36px!important;padding-bottom:36px!important} :root body.mdb-complete-site .mdb-main>:is(.mdb-comparison,.mdb-surefit,.mdb-final){margin-top:64px!important;margin-bottom:64px!important} } /* 108. PHONES AND TABLETS: THE PICTURE'S BUTTONS SIT UNDER IT (d26, header chat) — Aaron: "issue with these buttons overlaying important product in some resolutions and scenes" (Panel Glide on a phone: "Shade Ice", "Fully closed / Stacked back" over the bottom of the panels). Up to 1050px wide, the colour chip and the view buttons of the Double, Vertical, Panel Glide, Venetian and Shutter pictures sit in a row just under the picture instead of on it; the picture keeps its rounded corners. Computers keep them on the picture (it is large there). Undo: delete this block. */ @media (max-width:1050px){ :root body.mdb-complete-site .bpv-family .bpv-family-stage{overflow:visible!important;margin-bottom:60px!important} :root body.mdb-complete-site .bpv-family .bpv-family-stage>canvas{border-radius:18px} :root body.mdb-complete-site .bpv-family .bpv-family-stage>.bpv-family-overlay{top:calc(100% + 10px)!important;bottom:auto!important;left:0!important;right:0!important} } /* 109. "START AGAIN": THE UNDERLINE RUNS UNDER THE ICON TOO (d26, header chat) — Aaron, 30 Sep: "this start again underline looks like shit because it doesnt go across the entire length". The hover underline (block 94) was the text's own, so it stopped short of the ↺ icon. It is now one line drawn under the whole link, arrow and words, and it draws in from the left on hover or keyboard focus. Undo: delete this block. */ :root body.mdb-complete-site .mdb-config-heading>.mdb-config-reset{padding-bottom:3px;background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;transition:background-size .2s ease} :root body.mdb-complete-site .mdb-config-heading>.mdb-config-reset:is(:hover,:focus-visible){text-decoration:none!important;background-size:100% 1.5px} @media (prefers-reduced-motion:reduce){:root body.mdb-complete-site .mdb-config-heading>.mdb-config-reset{transition:none}} /* 110. EVEN SPACE AROUND THE PICTURE-AND-STEPS SECTION ON TABLETS (d27, header chat) — found in the d26 check at 816px: between 768 and 1050px the picture-and-steps section stacks (picture on top), so block 107's 36px left 100px above the picture instead of about 128px like every other gap. Stacked, it gets 64px above; below, 64px less the text's own 5vw inset, so the gap under the steps is also about 128px. Undo: delete this block. */ @media (min-width:768px) and (max-width:1050px){ :root body.mdb-complete-site .mdb-main>.mdb-split{padding-top:64px!important;padding-bottom:max(0px,calc(64px - 5vw))!important} } /* 111. EVEN SPACE BETWEEN SECTIONS, SECOND PASS (d28, header chat) — the d27 check measured the gaps the eye sees (from the last text or picture of one section to the first of the next, or to a card's or band's edge) on the home page, landing pages, the family pages and Why My Direct at 900, 1100, 1440, 1600 and 1920px. Block 107 got most to about 128px; these were still off: a) under the hero's four reassurance cards: 104-124px (now 48px extra above the first section: 125-132px); b) after a three-card "benefit" row (its own 40px bottom margin): 163-171px. A section's last item has no bottom margin now, so the section's own 64px is the gap; c) the white "how it works" band, the control and measuring bands and the "Configure" band: 64 or 104px. They get 64px outside like the dark and teal cards; two cards or bands in a row get 128px between them (was 64px); d) the picture-and-steps section beside its text (1051px and wider): 120-152px depending on the width, because the square picture sat centred next to taller padded text. The text keeps its side padding only, so the taller of the two sets the height and the section's own 64px is the gap: 128px at every width; e) the cassette section on the Roller page: 148px beside the picture (text padding 85px, now 64px) and 64px above the picture when stacked (now 64px margin above). Measured after, by injection: 123-134px between every pair of sections on /, 5 landing pages, /curtains/, /plantation-shutters/, /roller-blinds/, /venetian-blinds/, /why-my-direct/. Phones keep block 95 c. Undo: delete this block. */ @media (min-width:768px){ :root body.mdb-complete-site .mdb-main>.mdb-product-proof+:is(.mdb-section,.mdb-value-section){margin-top:48px!important} :root body.mdb-complete-site .mdb-main>:is(.mdb-section,.mdb-value-section,.mdb-discovery-help)>:last-child{margin-bottom:0!important} :root body.mdb-complete-site .mdb-main>:is(.mdb-process,.mdb-control-section,.mdb-measure-product,.mdb-configure-cta){margin-top:64px!important;margin-bottom:64px!important} :root body.mdb-complete-site .mdb-main>:is(.mdb-comparison,.mdb-surefit,.mdb-final,.mdb-process,.mdb-control-section,.mdb-measure-product,.mdb-configure-cta):has(+:is(.mdb-comparison,.mdb-surefit,.mdb-final,.mdb-process,.mdb-control-section,.mdb-measure-product,.mdb-configure-cta)){margin-bottom:0!important} :root body.mdb-complete-site .mdb-main>:is(.mdb-comparison,.mdb-surefit,.mdb-final,.mdb-process,.mdb-control-section,.mdb-measure-product,.mdb-configure-cta)+:is(.mdb-comparison,.mdb-surefit,.mdb-final,.mdb-process,.mdb-control-section,.mdb-measure-product,.mdb-configure-cta){margin-top:128px!important} } @media (min-width:768px) and (max-width:1050px){ :root body.mdb-complete-site .mdb-main>.mdb-comparison-section{margin-top:64px!important} } @media (min-width:1051px){ :root body.mdb-complete-site .mdb-main>.mdb-split{padding-top:64px!important;padding-bottom:64px!important} :root body.mdb-complete-site .mdb-main>.mdb-split>div{padding-top:0!important;padding-bottom:0!important} :root body.mdb-complete-site .mdb-main>.mdb-comparison-section>.mdb-comparison-copy{padding-top:64px!important;padding-bottom:64px!important} } /* 112. CART BUTTON CHANGES COLOUR ON HOVER (d29, header chat) — Aaron, 1 Oct: "there's also currently no animation on the minicart icon (not animation i mean on mouse hover colour change)". The old hover only darkened the link colour and underlined it, but the cart icon has its own fixed colour and the round button has no words to underline, so nothing visible happened. Now the round cart button fills aqua and the icon turns ink (the same pair as the Build & Order button), with a short fade. The round Menu button next to it on tablets does the same. Hover only applies on devices with a mouse, so phones never get a stuck colour after a tap; keyboard focus shows it too. Undo: delete this block. */ @media (hover:hover){ :root body.mdb-complete-site .mdb-header :is(a.mdb-header-cart,button.mdb-menu-toggle):hover{background:var(--sd-aqua)!important;color:var(--sd-ink)!important;text-decoration:none!important} :root body.mdb-complete-site .mdb-header a.mdb-header-cart:hover .mdb-icon{color:var(--sd-ink)!important} } :root body.mdb-complete-site .mdb-header :is(a.mdb-header-cart,button.mdb-menu-toggle):focus-visible{background:var(--sd-aqua)!important;color:var(--sd-ink)!important} :root body.mdb-complete-site .mdb-header a.mdb-header-cart:focus-visible .mdb-icon{color:var(--sd-ink)!important} :root body.mdb-complete-site .mdb-header :is(a.mdb-header-cart,button.mdb-menu-toggle){transition:background-color .17s ease,color .17s ease} :root body.mdb-complete-site .mdb-header a.mdb-header-cart .mdb-icon{transition:color .17s ease} @media (prefers-reduced-motion:reduce){:root body.mdb-complete-site .mdb-header :is(a.mdb-header-cart,button.mdb-menu-toggle,a.mdb-header-cart .mdb-icon){transition:none}} /* 113. TINTED BANDS NO LONGER TOUCH (d30, header chat) — Aaron, 1 Oct: "spacing between tiles they are stuckl together? bad" (Blockout roller page: the pale teal band with Spend & Save, Price Beat and shipping sat directly on the "Before you order" band). Block 107 treated the value band (.mdb-value-section) and the "Before you order" band (.mdb-discovery-help) as plain sections with no outside margin, but both are pale rounded bands. The d27 and d28 spacing checks missed it because Elementor only paints these tints once the band scrolls into view (e-lazyloaded) and then fades them in, so the hidden test tab saw no band edge. Now they follow block 111's band rule: 64px outside and 128px between two bands in a row. Under the home page hero's reassurance cards the band sits 110px down, which looks like 128px because the cards end 18px above their box. Measured after, by injection (tints forced on): 123-134px between every pair on /, /blockout-roller-blinds/, /s-fold-curtains/, /roller-blinds/, /venetian-blinds/ and /plantation-shutters/ at 1540px, and on / and /blockout-roller-blinds/ at 900px (was 0px band to band, 59-66px band to section). Tablets and computers only; phones keep block 95 c. Undo: delete this block. */ @media (min-width:768px){ :root body.mdb-complete-site .mdb-main>:is(.mdb-value-section,.mdb-discovery-help){margin-top:64px!important;margin-bottom:64px!important} :root body.mdb-complete-site .mdb-main>.mdb-product-proof+.mdb-value-section{margin-top:110px!important} :root body.mdb-complete-site .mdb-main>:is(.mdb-comparison,.mdb-surefit,.mdb-final,.mdb-process,.mdb-control-section,.mdb-measure-product,.mdb-configure-cta,.mdb-value-section,.mdb-discovery-help):has(+:is(.mdb-comparison,.mdb-surefit,.mdb-final,.mdb-process,.mdb-control-section,.mdb-measure-product,.mdb-configure-cta,.mdb-value-section,.mdb-discovery-help)){margin-bottom:0!important} :root body.mdb-complete-site .mdb-main>:is(.mdb-comparison,.mdb-surefit,.mdb-final,.mdb-process,.mdb-control-section,.mdb-measure-product,.mdb-configure-cta,.mdb-value-section,.mdb-discovery-help)+:is(.mdb-comparison,.mdb-surefit,.mdb-final,.mdb-process,.mdb-control-section,.mdb-measure-product,.mdb-configure-cta,.mdb-value-section,.mdb-discovery-help){margin-top:128px!important} } /* 114. THE BLOG: ITS INDEX, TOPIC AND SEARCH PAGES, AND ITS ARTICLES (d31, header chat) — the new My Direct Blinds blog (pages built by the blog plugin inside main.mdb-blog-main, body class mdb-blog-view), styled to the look Aaron approved in the blog mock-up: soft white cards, aqua accents, Figtree, the same pills and rounded shapes as the rest of Style D. Every rule is inside .mdb-blog-main, so the site header and footer, the shop and every other page are untouched. No pictures, fonts or scripts are loaded; the small icons are drawn by CSS. a) Page shell: the blog column (1240px of content, 32px gutters; 24px on tablets, 16px on phones), Figtree, and the screen-reader-only label that stays hidden but readable aloud. b) Breadcrumbs: small grey trail; links go aqua on hover and show a ring from the keyboard. c) Buttons (.mdb-blog-btn): primary is the aqua pill with ink text and an arrow (the Build & Order look); ghost is an outline. On the dark CTA and band the ghost is a white outline that fills softly on hover. All have a hover and a keyboard focus look. d) Index, topic and search heading card: the white rounded card with the small "Blog" tag, the big title, the intro and the round search box (the box shows a ring while you type in it). e) Topic pills: a wrapping row on computers; on phones one row that scrolls sideways inside itself, not the page. The current topic is the slate pill. f) Sections and grids: a section heading with an "All N ... articles" link; 3 cards across on computers (1051px and wider), 2 on tablets (640 to 1050px), 1 on phones. g) Cards: white, rounded, soft shadow; 16:9 picture; on hover or keyboard focus the card lifts 3px, the shadow deepens, the picture eases in and the title goes aqua. With no photo yet, a calm tinted gradient with a faint pattern per topic (blinds, curtains, shutters, measuring, comparisons, rooms, care). Still cards under reduced motion. h) The dark band at the foot of the index pages and the pager (page numbers) and the "nothing found" message. i) Article: centred heading (topic tag, read time, title, intro), wide rounded hero picture, and from 1051px wide a two-column layout with the "In this guide" list sticking on the left under the site header (top 110px) beside a 720px reading column. On tablets and phones the list becomes a compact box above the text, not sticky. j) Article text: 17px/1.7 (16px on phones), sentence-case headings, aqua check-mark bullets, numbered circles for steps, underlined aqua links with a hover fill, tables that scroll sideways inside their own box, rounded photos and diagrams with centred captions. k) Boxes: "In short" (pale aqua with an aqua left edge), tip (pale aqua with a bulb), note (pale sand with an info mark), FAQ (questions split by hairlines). l) Foot of an article: the slate "Build your ..." card with its two buttons, and the "Keep reading" cards. Spacing follows the rest of Style D: about 64px between big sections on computers, 40px on phones. Undo: delete this block. */ /* a) page shell */ :root body.mdb-complete-site .mdb-blog-main{display:block;width:100%;max-width:1304px;margin:0 auto;padding:0 32px 64px;box-sizing:border-box;font-family:var(--sd-font);color:var(--sd-ink);-webkit-font-smoothing:antialiased} :root body.mdb-complete-site .mdb-blog-main *, :root body.mdb-complete-site .mdb-blog-main *::before, :root body.mdb-complete-site .mdb-blog-main *::after{box-sizing:border-box} :root body.mdb-complete-site .mdb-blog-main :is(h1,h2,h3,p,ul,ol,figure,blockquote){margin-top:0} :root body.mdb-complete-site .mdb-blog-main :is(input,button){font-family:var(--sd-font)} :root body.mdb-complete-site .mdb-blog-main img{display:block;max-width:100%;height:auto} :root body.mdb-complete-site .mdb-blog-main .screen-reader-text{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important} /* b) breadcrumbs */ :root body.mdb-complete-site .mdb-blog-main .mdb-blog-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:2px 4px;margin-left:-8px;padding:20px 0 0;font-size:13.5px;line-height:1.4;font-weight:500;color:var(--sd-muted)} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-crumbs a{padding:4px 8px;border-radius:8px;color:var(--sd-muted);text-decoration:none;transition:background-color .15s ease,color .15s ease} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-crumbs a:is(:hover,:focus-visible){background:var(--sd-aqua-t);color:var(--sd-aqua-d);text-decoration:none} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-crumbs a:focus-visible{outline:2px solid var(--sd-aqua-d);outline-offset:1px} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-crumbs span[aria-hidden]{color:#9AA3B0} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-crumbs span:not([aria-hidden]){padding:4px 8px;color:var(--sd-ink);font-weight:600} /* c) buttons */ :root body.mdb-complete-site .mdb-blog-main .mdb-blog-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:12px 22px;border:0;border-radius:999px;font:700 15px/1.2 var(--sd-font);letter-spacing:0;text-transform:none;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .18s ease,box-shadow .18s ease,color .18s ease,transform .18s ease} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-btn:is(:hover,:focus-visible){text-decoration:none} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-btn:focus-visible{outline:2px solid var(--sd-aqua-d);outline-offset:3px} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-btn:active{transform:translateY(1px)} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-btn--primary{background:var(--sd-aqua);color:var(--sd-ink);box-shadow:0 6px 16px rgba(73,195,201,.35)} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-btn--primary::after{content:"→";display:inline-block;transition:transform .18s ease} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-btn--primary:is(:hover,:focus-visible){background:#5BCDD2;color:var(--sd-ink);box-shadow:0 10px 24px rgba(73,195,201,.48)} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-btn--primary:is(:hover,:focus-visible)::after{transform:translateX(3px)} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-btn--ghost{background:transparent;color:var(--sd-slate);box-shadow:inset 0 0 0 1.5px #D9D5CC} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-btn--ghost:is(:hover,:focus-visible){background:#fff;color:var(--sd-ink);box-shadow:inset 0 0 0 1.5px var(--sd-aqua-d)} /* on the dark CTA card and band: white text, a light outline that fills softly on hover, white focus ring */ :root body.mdb-complete-site .mdb-blog-main :is(.mdb-blog-cta,.mdb-blog-band) .mdb-blog-btn--ghost{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4)} :root body.mdb-complete-site .mdb-blog-main :is(.mdb-blog-cta,.mdb-blog-band) .mdb-blog-btn--ghost:is(:hover,:focus-visible){background:rgba(255,255,255,.14);color:#fff;box-shadow:inset 0 0 0 1.5px #fff} :root body.mdb-complete-site .mdb-blog-main :is(.mdb-blog-cta,.mdb-blog-band) .mdb-blog-btn:focus-visible{outline-color:#fff} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-cta-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0} /* d) the heading card of the index, topic and search pages */ :root body.mdb-complete-site .mdb-blog-main .mdb-blog-hero{position:relative;margin:24px 0 0;padding:56px 56px 52px;background:radial-gradient(ellipse 60% 120% at 100% 0,var(--sd-aqua-t) 0,rgba(228,245,246,0) 70%),#fff;border-radius:var(--sd-r-lg);box-shadow:var(--sd-shadow);overflow:hidden} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-hero>*{position:relative;z-index:1} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-hero::after{content:"";position:absolute;z-index:0;top:0;right:0;bottom:0;width:38%;background:repeating-linear-gradient(180deg,rgba(73,195,201,.13) 0 11px,rgba(73,195,201,0) 11px 24px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 70%);mask-image:linear-gradient(90deg,transparent,#000 70%);pointer-events:none} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-crumbs+.mdb-blog-hero{margin-top:14px} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-hero--topic{padding-top:44px;padding-bottom:44px} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-eyebrow{display:inline-block;margin:0 0 16px;padding:6px 12px;border-radius:999px;background:var(--sd-aqua);color:var(--sd-ink);font-size:11px;font-weight:800;line-height:1.3;letter-spacing:.12em;text-transform:uppercase} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-hero h1{max-width:760px;margin:0 0 14px;color:var(--sd-slate);font-size:clamp(32px,4.2vw,48px);font-weight:800;line-height:1.08;letter-spacing:-.028em} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-hero h1:has(+form){margin-bottom:24px} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-lede{max-width:600px;margin:0 0 26px;color:var(--sd-muted);font-size:18px;line-height:1.6} :root body.mdb-complete-site .mdb-blog-main form.mdb-blog-search{display:flex;align-items:center;gap:10px;width:100%;max-width:520px;margin:0;padding:6px 6px 6px 48px;border-radius:999px;background:var(--sd-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6776' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") 19px center/20px no-repeat;box-shadow:inset 0 0 0 1px #E2DED5;transition:box-shadow .18s ease,background-color .18s ease} :root body.mdb-complete-site .mdb-blog-main form.mdb-blog-search:hover{box-shadow:inset 0 0 0 1.5px var(--sd-aqua)} :root body.mdb-complete-site .mdb-blog-main form.mdb-blog-search:focus-within{background-color:#fff;box-shadow:inset 0 0 0 2px var(--sd-aqua-d),0 0 0 4px rgba(73,195,201,.25)} :root body.mdb-complete-site .mdb-blog-main form.mdb-blog-search input[type=search]{flex:1 1 auto;min-width:0;height:44px;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;outline:0;color:var(--sd-ink);font:500 16px/1.3 var(--sd-font);text-overflow:ellipsis;-webkit-appearance:none;appearance:none} :root body.mdb-complete-site .mdb-blog-main form.mdb-blog-search input[type=search]::placeholder{color:var(--sd-muted);opacity:1} :root body.mdb-complete-site .mdb-blog-main form.mdb-blog-search .mdb-blog-btn{flex:none;min-height:44px;padding:10px 20px;font-size:14.5px} :root body.mdb-complete-site .mdb-blog-main form.mdb-blog-search .mdb-blog-btn::after{content:none} /* e) topic pills */ :root body.mdb-complete-site .mdb-blog-main nav.mdb-blog-topics{display:flex;flex-wrap:wrap;gap:8px;margin:32px 0 32px;padding:0} :root body.mdb-complete-site .mdb-blog-main nav.mdb-blog-topics a{display:inline-flex;flex:none;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;background:#fff;box-shadow:0 2px 8px rgba(43,50,64,.06);color:var(--sd-slate);font-size:14.5px;font-weight:600;line-height:1;text-decoration:none;white-space:nowrap;transition:background-color .15s ease,color .15s ease,box-shadow .15s ease} :root body.mdb-complete-site .mdb-blog-main nav.mdb-blog-topics a:is(:hover,:focus-visible){background:var(--sd-aqua-h);color:var(--sd-ink);box-shadow:0 2px 8px rgba(43,50,64,.06),inset 0 0 0 1.5px var(--sd-aqua);text-decoration:none} :root body.mdb-complete-site .mdb-blog-main nav.mdb-blog-topics a:focus-visible{outline:2px solid var(--sd-aqua-d);outline-offset:2px} :root body.mdb-complete-site .mdb-blog-main nav.mdb-blog-topics a.is-current{background:var(--sd-slate);color:#fff;box-shadow:0 2px 8px rgba(43,50,64,.12)} :root body.mdb-complete-site .mdb-blog-main nav.mdb-blog-topics a.is-current:is(:hover,:focus-visible){background:var(--sd-slate-d);color:#fff;box-shadow:0 4px 12px rgba(43,50,64,.2)} /* f) sections and grids */ :root body.mdb-complete-site .mdb-blog-main .mdb-blog-section{margin:0 0 64px} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-section:last-child{margin-bottom:0} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-section-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 16px;margin:0 0 20px} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-section-head h2{margin:0;color:var(--sd-ink);font-size:28px;font-weight:800;line-height:1.2;letter-spacing:-.03em} :root body.mdb-complete-site .mdb-blog-main a.mdb-blog-more{display:inline-flex;align-items:center;gap:6px;margin:0 -12px -6px 0;padding:8px 14px;border-radius:999px;color:var(--sd-aqua-d);font-size:15px;font-weight:700;line-height:1.3;text-decoration:none;transition:background-color .15s ease,color .15s ease} :root body.mdb-complete-site .mdb-blog-main a.mdb-blog-more::after{content:"→";display:inline-block;transition:transform .18s ease} :root body.mdb-complete-site .mdb-blog-main a.mdb-blog-more:is(:hover,:focus-visible){background:var(--sd-aqua-t);color:var(--sd-ink);text-decoration:none} :root body.mdb-complete-site .mdb-blog-main a.mdb-blog-more:is(:hover,:focus-visible)::after{transform:translateX(3px)} :root body.mdb-complete-site .mdb-blog-main a.mdb-blog-more:focus-visible{outline:2px solid var(--sd-aqua-d);outline-offset:2px} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-section-intro{max-width:760px;margin:-8px 0 22px;color:var(--sd-muted);font-size:16.5px;line-height:1.6} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:0;padding:0} /* g) cards */ :root body.mdb-complete-site .mdb-blog-main a.mdb-blog-card{position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden;border-radius:var(--sd-r);background:var(--sd-card);box-shadow:var(--sd-shadow);color:var(--sd-ink);text-decoration:none;transition:transform .18s ease,box-shadow .18s ease} :root body.mdb-complete-site .mdb-blog-main a.mdb-blog-card:is(:hover,:focus-visible){transform:translateY(-3px);box-shadow:0 16px 40px rgba(43,50,64,.15);text-decoration:none} :root body.mdb-complete-site .mdb-blog-main a.mdb-blog-card:focus-visible{outline:3px solid var(--sd-aqua-d);outline-offset:3px} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-card-img{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;background:#DDE3E6} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-card-img .mdb-blog-img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease} :root body.mdb-complete-site .mdb-blog-main a.mdb-blog-card:is(:hover,:focus-visible) .mdb-blog-card-img .mdb-blog-img{transform:scale(1.035)} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-card-body{display:flex;flex:1 1 auto;flex-direction:column;gap:10px;padding:20px 22px 22px} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-chip{display:inline-block;align-self:flex-start;padding:5px 11px;border-radius:999px;background:var(--sd-aqua-t);color:var(--sd-aqua-d);font-size:12px;font-weight:700;line-height:1.3;letter-spacing:0;text-decoration:none;transition:background-color .15s ease,color .15s ease} :root body.mdb-complete-site .mdb-blog-main a.mdb-blog-chip:is(:hover,:focus-visible){background:var(--sd-aqua);color:var(--sd-ink);text-decoration:none} :root body.mdb-complete-site .mdb-blog-main a.mdb-blog-chip:focus-visible{outline:2px solid var(--sd-aqua-d);outline-offset:2px} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-card-title{display:block;color:var(--sd-ink);font-size:20px;font-weight:700;line-height:1.25;letter-spacing:-.02em;transition:color .15s ease} :root body.mdb-complete-site .mdb-blog-main a.mdb-blog-card:is(:hover,:focus-visible) .mdb-blog-card-title{color:var(--sd-aqua-d)} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-card-ex{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;color:var(--sd-muted);font-size:15px;line-height:1.55} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-card-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:6px;color:var(--sd-muted);font-size:13.5px;font-weight:500;line-height:1.4} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-card-meta::after{content:"Read →";content:"Read →"/"";color:var(--sd-aqua-d);font-weight:700;transition:transform .18s ease} :root body.mdb-complete-site .mdb-blog-main a.mdb-blog-card:is(:hover,:focus-visible) .mdb-blog-card-meta::after{transform:translateX(3px)} /* cards with no photo yet: a calm tinted gradient and a faint pattern for each topic (no text, no pictures) */ :root body.mdb-complete-site .mdb-blog-main .mdb-blog-card-ph{display:block;width:100%;height:100%;background:radial-gradient(circle at 20% 15%,rgba(255,255,255,.55),rgba(255,255,255,0) 55%),linear-gradient(135deg,var(--sd-aqua-t),#A9DCDF)} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-card-ph--blinds{background:repeating-linear-gradient(180deg,rgba(255,255,255,.3) 0 9px,rgba(255,255,255,0) 9px 20px),linear-gradient(135deg,#D3F0F1 0%,#7CCDD2 100%)} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-card-ph--curtains{background:repeating-linear-gradient(90deg,rgba(255,255,255,.2) 0 14px,rgba(68,78,96,.05) 14px 28px),linear-gradient(135deg,#DFE4EE 0%,#8F9CB6 100%)} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-card-ph--plantation-shutters{background:repeating-linear-gradient(165deg,rgba(255,255,255,.42) 0 8px,rgba(255,255,255,0) 8px 22px),linear-gradient(135deg,#F5ECDC 0%,#D5BF98 100%)} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-card-ph--measuring-and-fitting{background:repeating-linear-gradient(90deg,rgba(43,50,64,.11) 0 2px,rgba(43,50,64,0) 2px 18px),linear-gradient(180deg,rgba(255,255,255,0) 55%,rgba(255,255,255,.38)),linear-gradient(135deg,#DDEEE6 0%,#93C7B5 100%)} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-card-ph--comparisons{background:linear-gradient(90deg,rgba(255,255,255,0) calc(50% - 1.5px),rgba(255,255,255,.8) calc(50% - 1.5px) calc(50% + 1.5px),rgba(255,255,255,0) calc(50% + 1.5px)),linear-gradient(90deg,#C6D8E6 0 50%,#E4D8C4 50% 100%)} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-card-ph--room-ideas{background:radial-gradient(circle at 78% 28%,rgba(255,255,255,.55) 0 17%,rgba(255,255,255,0) 17.5%),radial-gradient(circle at 26% 74%,rgba(255,255,255,.3) 0 25%,rgba(255,255,255,0) 25.5%),linear-gradient(135deg,#F7E6D8 0%,#DDB9A0 100%)} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-card-ph--care-and-cleaning{background:radial-gradient(circle at 72% 26%,rgba(255,255,255,.85) 0 2.5%,rgba(255,255,255,0) 3%),radial-gradient(circle at 30% 62%,rgba(255,255,255,.7) 0 1.8%,rgba(255,255,255,0) 2.3%),radial-gradient(circle at 20% 15%,rgba(255,255,255,.5),rgba(255,255,255,0) 55%),linear-gradient(135deg,#E8EFF1 0%,#AFC8D0 100%)} /* h) the dark band, pager and empty result */ :root body.mdb-complete-site .mdb-blog-main section.mdb-blog-band{margin:0;padding:72px 32px;border-radius:var(--sd-r-lg);background:radial-gradient(ellipse 55% 90% at 100% 0,rgba(73,195,201,.2) 0,rgba(73,195,201,0) 70%),var(--sd-slate);color:#fff;text-align:center} :root body.mdb-complete-site .mdb-blog-main section.mdb-blog-band .mdb-blog-eyebrow{margin:0;padding:0;background:transparent;color:var(--sd-aqua);letter-spacing:.14em} :root body.mdb-complete-site .mdb-blog-main section.mdb-blog-band h2{margin:12px 0;color:#fff;font-size:clamp(28px,3.4vw,40px);font-weight:800;line-height:1.1;letter-spacing:-.028em} :root body.mdb-complete-site .mdb-blog-main section.mdb-blog-band p:not(.mdb-blog-eyebrow):not(.mdb-blog-cta-actions){max-width:560px;margin:0 auto 28px;color:#C9D6DC;font-size:17px;line-height:1.6} :root body.mdb-complete-site .mdb-blog-main section.mdb-blog-band .mdb-blog-cta-actions{justify-content:center} :root body.mdb-complete-site .mdb-blog-main nav.mdb-blog-pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;margin:40px 0 0} :root body.mdb-complete-site .mdb-blog-main nav.mdb-blog-pager .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 16px;border-radius:999px;background:#fff;box-shadow:0 2px 8px rgba(43,50,64,.06);color:var(--sd-slate);font-size:15px;font-weight:700;line-height:1;text-decoration:none;transition:background-color .15s ease,color .15s ease,box-shadow .15s ease} :root body.mdb-complete-site .mdb-blog-main nav.mdb-blog-pager a.page-numbers:is(:hover,:focus-visible){background:var(--sd-aqua-h);color:var(--sd-ink);box-shadow:0 2px 8px rgba(43,50,64,.06),inset 0 0 0 1.5px var(--sd-aqua);text-decoration:none} :root body.mdb-complete-site .mdb-blog-main nav.mdb-blog-pager a.page-numbers:focus-visible{outline:2px solid var(--sd-aqua-d);outline-offset:2px} :root body.mdb-complete-site .mdb-blog-main nav.mdb-blog-pager .page-numbers.current{background:var(--sd-slate);color:#fff;box-shadow:0 2px 8px rgba(43,50,64,.12)} :root body.mdb-complete-site .mdb-blog-main nav.mdb-blog-pager .page-numbers.dots{min-width:0;padding:0 6px;background:transparent;box-shadow:none;color:var(--sd-muted)} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-empty{margin:0 0 64px;padding:40px 28px;border-radius:var(--sd-r);background:#fff;box-shadow:var(--sd-shadow);color:var(--sd-muted);font-size:17px;line-height:1.6;text-align:center} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-empty:last-child{margin-bottom:0} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-empty a{color:var(--sd-aqua-d);font-weight:700;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-empty a:is(:hover,:focus-visible){color:var(--sd-ink);background:var(--sd-aqua-t);border-radius:4px} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-empty a:focus-visible{outline:2px solid var(--sd-aqua-d);outline-offset:2px} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-search-page .mdb-blog-grid+.mdb-blog-pager{margin-top:44px} /* i) article: heading, hero picture, two-column layout with the sticking "In this guide" list */ :root body.mdb-complete-site .mdb-blog-main .mdb-blog-post{display:block} :root body.mdb-complete-site .mdb-blog-main header.mdb-blog-head{max-width:880px;margin:0 auto;padding:30px 0 0;text-align:center} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 12px;margin:0 0 16px;color:var(--sd-muted);font-size:13.5px;font-weight:500;line-height:1.4} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-meta .mdb-blog-chip+span::before{content:"·";margin-right:12px;color:#B8BEC7} :root body.mdb-complete-site .mdb-blog-main header.mdb-blog-head h1{margin:0 0 16px;color:var(--sd-slate);font-size:clamp(32px,4.2vw,48px);font-weight:800;line-height:1.08;letter-spacing:-.028em} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-dek{max-width:700px;margin:0 auto;color:var(--sd-muted);font-size:20px;line-height:1.55} :root body.mdb-complete-site .mdb-blog-main figure.mdb-blog-hero-img{max-width:1180px;margin:36px auto 0;aspect-ratio:21/9;overflow:hidden;border-radius:var(--sd-r-lg);background:#DDE3E6;box-shadow:var(--sd-shadow-lg)} :root body.mdb-complete-site .mdb-blog-main figure.mdb-blog-hero-img img{width:100%;height:100%;object-fit:cover} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-layout{display:block;max-width:720px;margin:36px auto 0} :root body.mdb-complete-site .mdb-blog-main nav.mdb-blog-toc{margin:0 0 28px;padding:14px 16px 8px;border-radius:var(--sd-r);background:#fff;box-shadow:var(--sd-shadow)} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-toc-title{margin:0 0 6px 4px;color:var(--sd-muted);font-size:12px;font-weight:800;line-height:1.3;letter-spacing:.12em;text-transform:uppercase} :root body.mdb-complete-site .mdb-blog-main nav.mdb-blog-toc ol{margin:0;padding:0;list-style:none} :root body.mdb-complete-site .mdb-blog-main nav.mdb-blog-toc li{margin:0;padding:0;break-inside:avoid} :root body.mdb-complete-site .mdb-blog-main nav.mdb-blog-toc li::before{content:none} :root body.mdb-complete-site .mdb-blog-main nav.mdb-blog-toc a{display:block;margin:0 0 2px;padding:7px 12px;border-left:3px solid transparent;border-radius:10px;color:var(--sd-slate);font-size:14.5px;font-weight:600;line-height:1.4;text-decoration:none;transition:background-color .15s ease,border-color .15s ease,color .15s ease} :root body.mdb-complete-site .mdb-blog-main nav.mdb-blog-toc a:is(:hover,:focus-visible){border-left-color:var(--sd-aqua);background:var(--sd-aqua-h);color:var(--sd-ink);text-decoration:none} :root body.mdb-complete-site .mdb-blog-main nav.mdb-blog-toc a:focus-visible{outline:2px solid var(--sd-aqua-d);outline-offset:1px} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-body{min-width:0} /* j) article text */ :root body.mdb-complete-site .mdb-blog-main .mdb-blog-body{color:var(--sd-ink);font-size:17px;line-height:1.7} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-body p{margin:0 0 20px} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-body h2{margin:48px 0 16px;color:var(--sd-ink);font-size:30px;font-weight:800;line-height:1.2;letter-spacing:-.03em;scroll-margin-top:calc(110px + var(--mdb-admin-offset,0px))} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-body h3{margin:32px 0 10px;color:var(--sd-ink);font-size:21px;font-weight:700;line-height:1.3;letter-spacing:-.02em;scroll-margin-top:calc(110px + var(--mdb-admin-offset,0px))} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-body>:first-child{margin-top:0} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-body strong{color:var(--sd-ink);font-weight:700} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-body a:not(.mdb-blog-btn){color:var(--sd-aqua-d);font-weight:600;text-decoration:underline;text-decoration-color:rgba(47,142,148,.45);text-decoration-thickness:1.5px;text-underline-offset:3px;border-radius:3px;transition:background-color .15s ease,color .15s ease,text-decoration-color .15s ease} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-body a:not(.mdb-blog-btn):is(:hover,:focus-visible){background:var(--sd-aqua-t);color:var(--sd-ink);text-decoration-color:var(--sd-aqua)} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-body a:not(.mdb-blog-btn):focus-visible{outline:2px solid var(--sd-aqua-d);outline-offset:2px} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-body :is(ul,ol){margin:0 0 22px;padding:0;list-style:none} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-body :is(ul,ol) :is(ul,ol){margin:10px 0 0} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-body li{position:relative;margin:0 0 10px;padding-left:32px} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-body ul>li::before{content:"";position:absolute;left:0;top:.28em;width:20px;height:20px;border-radius:50%;background:var(--sd-aqua-t) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l3.8 3.8L18 8' fill='none' stroke='%232F8E94' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-body ol{counter-reset:mdb-blog-step} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-body ol>li{counter-increment:mdb-blog-step;padding-left:40px} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-body ol>li::before{content:counter(mdb-blog-step);position:absolute;left:0;top:.14em;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--sd-aqua-t);color:var(--sd-aqua-d);font-size:14px;font-weight:800;line-height:1} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-body .mdb-blog-table{margin:8px 0 28px;overflow-x:auto;border-radius:var(--sd-r);background:#fff;box-shadow:var(--sd-shadow);-webkit-overflow-scrolling:touch} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-table table{width:100%;margin:0;border-collapse:separate;border-spacing:0;font-size:15.5px;line-height:1.5} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-table th{padding:13px 16px;border:0;background:var(--sd-slate);color:#fff;font-weight:700;text-align:left;vertical-align:bottom} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-table td{padding:13px 16px;border:0;border-top:1px solid var(--sd-line);color:var(--sd-ink);text-align:left;vertical-align:top} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-table tbody tr:nth-child(even) td{background:#FBFAF7} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-table td:first-child{font-weight:700} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-table td:first-child:not(:last-child){min-width:7.5em} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-body figure.mdb-blog-figure{margin:8px 0 30px} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-figure img{width:100%;height:auto;border-radius:var(--sd-r);background:#DDE3E6} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-figure--photo img{aspect-ratio:3/2;object-fit:cover} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-figure--diagram img{padding:14px;border-radius:var(--sd-r);background:#fff;box-shadow:var(--sd-shadow);object-fit:contain} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-figure figcaption{margin:12px 8px 0;color:var(--sd-muted);font-size:14px;line-height:1.5;text-align:center} /* k) boxes: in short, tip, note, FAQ */ :root body.mdb-complete-site .mdb-blog-main .mdb-blog-body .mdb-blog-short{margin:0 0 36px;padding:22px 26px 12px;border-left:5px solid var(--sd-aqua);border-radius:var(--sd-r);background:var(--sd-aqua-t)} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-short .mdb-blog-box-label{margin:0 0 12px;color:var(--sd-aqua-d);font-size:13px;font-weight:800;line-height:1.3;letter-spacing:.12em;text-transform:uppercase} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-body .mdb-blog-short ul{margin:0} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-body .mdb-blog-short ul>li::before{background-color:#fff} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-body :is(.mdb-blog-tip,.mdb-blog-note){position:relative;margin:0 0 28px;padding:20px 22px 20px 74px;border-radius:var(--sd-r);font-size:16px;line-height:1.6} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-body :is(.mdb-blog-tip,.mdb-blog-note)>:last-child{margin-bottom:0} :root body.mdb-complete-site .mdb-blog-main :is(.mdb-blog-tip,.mdb-blog-note)::before{content:"";position:absolute;left:22px;top:18px;width:36px;height:36px;border-radius:10px;background:#fff center/20px no-repeat} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-tip{background:var(--sd-aqua-t)} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-tip::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F8E94' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.5 10.9c.6.5 1 1.2 1 2.1h5c0-.9.4-1.6 1-2.1A6 6 0 0 0 12 3z'/%3E%3C/svg%3E")} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-note{background:#FBF3E1;box-shadow:inset 0 0 0 1px #F0E2BE} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-note::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A6B12' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E")} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-body section.mdb-blog-faq{margin:56px 0 0} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-faq h2{margin:0 0 14px} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-body .mdb-blog-faq h3{margin:20px 0 0;padding:20px 0 8px;border-top:1px solid var(--sd-line);font-size:18px;line-height:1.35} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-body .mdb-blog-faq h3+p{margin:0;padding:0 0 4px} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-body .mdb-blog-faq>p:last-child{padding-bottom:22px;border-bottom:1px solid var(--sd-line)} /* l) foot of an article: the CTA card and the related cards */ :root body.mdb-complete-site .mdb-blog-main section.mdb-blog-cta{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px 40px;margin:64px 0 0;padding:44px 48px;border-radius:var(--sd-r-lg);background:radial-gradient(ellipse 50% 110% at 100% 0,rgba(73,195,201,.2) 0,rgba(73,195,201,0) 70%),var(--sd-slate);color:#fff} :root body.mdb-complete-site .mdb-blog-main section.mdb-blog-cta h2{grid-column:1;margin:0;color:#fff;font-size:clamp(26px,3vw,32px);font-weight:800;line-height:1.15;letter-spacing:-.028em} :root body.mdb-complete-site .mdb-blog-main section.mdb-blog-cta p:not(.mdb-blog-cta-actions){grid-column:1;max-width:600px;margin:0;color:#C9D6DC;font-size:17px;line-height:1.6} :root body.mdb-complete-site .mdb-blog-main section.mdb-blog-cta .mdb-blog-cta-actions{grid-column:2;grid-row:1/span 2;justify-content:flex-end} :root body.mdb-complete-site .mdb-blog-main section.mdb-blog-related{margin:64px 0 0} :root body.mdb-complete-site .mdb-blog-main section.mdb-blog-related h2{margin:0 0 20px;color:var(--sd-ink);font-size:28px;font-weight:800;line-height:1.2;letter-spacing:-.03em} /* m) wide screens: the list sticks on the left of the reading column */ @media (min-width:1051px){ :root body.mdb-complete-site .mdb-blog-main .mdb-blog-layout{display:grid;grid-template-columns:260px minmax(0,720px);justify-content:center;align-items:start;gap:56px;max-width:none;margin-top:56px} :root body.mdb-complete-site .mdb-blog-main nav.mdb-blog-toc{position:sticky;top:calc(110px + var(--mdb-admin-offset,0px));align-self:start;max-height:calc(100vh - 140px);margin:0;padding:20px 16px 12px;overflow-y:auto} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-toc-title{margin:0 0 10px 4px} } /* n) tablets: two cards across, the list is a compact two-column box above the text, 24px gutters */ @media (max-width:1050px){ :root body.mdb-complete-site .mdb-blog-main{padding-right:24px;padding-left:24px} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-hero{padding:44px 40px 40px} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-hero::after{width:30%} :root body.mdb-complete-site .mdb-blog-main figure.mdb-blog-hero-img{aspect-ratio:16/9} } @media (min-width:640px) and (max-width:1050px){ :root body.mdb-complete-site .mdb-blog-main nav.mdb-blog-toc ol{columns:2;column-gap:12px} } /* o) phones: one card across, 16px gutters, topic pills scroll sideways inside their own row, 40px between sections */ @media (max-width:639px){ :root body.mdb-complete-site .mdb-blog-main{padding:0 16px 40px} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-grid{grid-template-columns:minmax(0,1fr);gap:20px} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-crumbs{padding-top:14px} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-hero{margin-top:14px;padding:30px 20px 26px} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-hero::after{display:none} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-hero--topic{padding-top:28px;padding-bottom:26px} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-lede{margin-bottom:22px;font-size:16.5px} :root body.mdb-complete-site .mdb-blog-main form.mdb-blog-search{padding-left:42px;background-position:15px center} :root body.mdb-complete-site .mdb-blog-main nav.mdb-blog-topics{flex-wrap:nowrap;margin:20px -16px 24px;padding:4px 16px 12px;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-section{margin-bottom:40px} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-section-head h2, :root body.mdb-complete-site .mdb-blog-main section.mdb-blog-related h2{font-size:24px} :root body.mdb-complete-site .mdb-blog-main section.mdb-blog-band{padding:48px 22px} :root body.mdb-complete-site .mdb-blog-main section.mdb-blog-band p:not(.mdb-blog-eyebrow):not(.mdb-blog-cta-actions){font-size:16px;margin-bottom:24px} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-empty{margin-bottom:40px;padding:32px 20px} :root body.mdb-complete-site .mdb-blog-main header.mdb-blog-head{padding-top:18px;text-align:left} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-meta{justify-content:flex-start} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-dek{margin-left:0} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-dek{font-size:17.5px} :root body.mdb-complete-site .mdb-blog-main figure.mdb-blog-hero-img{margin-top:26px;border-radius:var(--sd-r)} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-layout{margin-top:26px} :root body.mdb-complete-site .mdb-blog-main nav.mdb-blog-toc{margin-bottom:24px;padding:12px 12px 6px} :root body.mdb-complete-site .mdb-blog-main nav.mdb-blog-toc a{padding:6px 10px;font-size:14px} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-body{font-size:16px} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-body h2{margin-top:40px;font-size:26px} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-body h3{margin-top:28px;font-size:19px} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-body .mdb-blog-short{margin-bottom:28px;padding:18px 18px 8px} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-body :is(.mdb-blog-tip,.mdb-blog-note){padding:16px 16px 16px 62px;font-size:15.5px} :root body.mdb-complete-site .mdb-blog-main :is(.mdb-blog-tip,.mdb-blog-note)::before{left:16px;top:14px;width:32px;height:32px} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-table table{min-width:100%;font-size:15px} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-table table:has(th:nth-child(3)){min-width:560px} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-table :is(th,td){padding:12px 14px} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-body section.mdb-blog-faq{margin-top:44px} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-body .mdb-blog-faq h3{padding-top:18px;font-size:17px} :root body.mdb-complete-site .mdb-blog-main section.mdb-blog-cta{display:block;margin-top:40px;padding:32px 22px} :root body.mdb-complete-site .mdb-blog-main section.mdb-blog-cta h2{margin-bottom:8px} :root body.mdb-complete-site .mdb-blog-main section.mdb-blog-cta p:not(.mdb-blog-cta-actions){font-size:16px;margin-bottom:22px} :root body.mdb-complete-site .mdb-blog-main :is(section.mdb-blog-cta,section.mdb-blog-band) .mdb-blog-cta-actions .mdb-blog-btn{flex:1 1 100%} :root body.mdb-complete-site .mdb-blog-main section.mdb-blog-related{margin-top:40px} } /* p) people who ask for less movement: the cards and buttons still change colour and shadow, but nothing slides or zooms */ @media (prefers-reduced-motion:reduce){ :root body.mdb-complete-site .mdb-blog-main :is(.mdb-blog-card,.mdb-blog-card-img .mdb-blog-img,.mdb-blog-card-meta::after,.mdb-blog-btn,.mdb-blog-btn::after,.mdb-blog-more::after){transition:none} :root body.mdb-complete-site .mdb-blog-main a.mdb-blog-card:is(:hover,:focus-visible){transform:none} :root body.mdb-complete-site .mdb-blog-main a.mdb-blog-card:is(:hover,:focus-visible) .mdb-blog-card-img .mdb-blog-img{transform:none} :root body.mdb-complete-site .mdb-blog-main a.mdb-blog-card:is(:hover,:focus-visible) .mdb-blog-card-meta::after, :root body.mdb-complete-site .mdb-blog-main .mdb-blog-btn--primary:is(:hover,:focus-visible)::after, :root body.mdb-complete-site .mdb-blog-main a.mdb-blog-more:is(:hover,:focus-visible)::after{transform:none} :root body.mdb-complete-site .mdb-blog-main .mdb-blog-btn:active{transform:none} }