/* Hardvance shop filters */ .filters-area:not(.custom-content) .filters-inner-area { --wd-gap-lg: 16px !important; --wd-gap-md: 14px !important; --wd-gap-sm: 12px !important; align-items: start; } .filters-area:not(.custom-content) .widget { min-width: 0; margin-bottom: 0; padding: 10px 12px; border: 1px solid rgba(16, 16, 16, 0.08); border-radius: 6px; background: #fff; } .filters-area:not(.custom-content) .widget-title, .filters-area:not(.custom-content) .widgettitle { margin-bottom: 8px; font-size: 13px; font-weight: 700; line-height: 1.25; letter-spacing: 0; } .filters-area:not(.custom-content) .wd-filter-form { display: grid; gap: 8px; } .filters-area:not(.custom-content) .select2-container, .filters-area:not(.custom-content) select { width: 100% !important; } .filters-area:not(.custom-content) .select2-container--default .select2-selection--single, .filters-area:not(.custom-content) .select2-container--default .select2-selection--multiple { min-height: 42px; border-radius: 6px; border-color: rgba(16, 16, 16, 0.16); } .filters-area:not(.custom-content) .select2-container--default .select2-selection--multiple .select2-selection__rendered { max-height: 74px; overflow-y: auto; } .filters-area:not(.custom-content) .wd-widget-layered-nav-dropdown__submit, .filters-area:not(.custom-content) .wd-product-category-filter-submit, .filters-area:not(.custom-content) .widget_price_filter .button { width: 100%; min-height: 38px; border-radius: 6px; } .filters-area:not(.custom-content) .price_slider_wrapper { padding-top: 4px; } .filters-area:not(.custom-content) .widget_price_filter .price_slider_amount { display: grid; gap: 8px; } .filters-area:not(.custom-content) .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 40px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .filters-area:not(.custom-content) .select2-container--default .select2-selection--single .select2-selection__arrow { min-height: 40px; } /* End Hardvance shop filters */ /* HV article design system (Hardvance) — brand-editorial 2026-06-25 */ body.single-post .elementor h2{scroll-margin-top:90px} /* Verdict / bottom-line panel */ .hv-box{background:#f6f8fa;border:1px solid #e1e4e8;border-top:3px solid #c81818;border-radius:0;padding:16px 20px 6px;margin:1.6em 0} .hv-box h2{margin-top:.15em} /* Tip / key point — grey panel + blue bar (no pastel amber/green) */ .hv-tip{background:#f6f8fa;border:1px solid #e1e4e8;border-left:3px solid #c81818;border-radius:0;padding:13px 18px;margin:1.4em 0;color:#33373d} .hv-tips li{margin-bottom:.6em} /* TOC */ .hv-toc{background:#f6f8fa;border:1px solid #e1e4e8;border-radius:0;padding:16px 20px;margin:0 0 1.4em} .hv-toc ol{margin:.4em 0 0;padding-left:1.2em}.hv-toc li{margin:.25em 0} .hv-toc a{color:#16191f;text-decoration:none} .hv-toc a:hover{color:#c81818;text-decoration:underline} /* Related — hairline rule, not a pastel box */ .hv-related{background:transparent;border:0;border-top:2px solid #16191f;border-radius:0;padding:16px 0 0;margin:2.2em 0 0} .hv-related ul{list-style:none;margin:.4em 0 0;padding-left:0} .hv-related li{padding:.5em 0;border-bottom:1px solid #e1e4e8} .hv-related a{color:#c81818;font-weight:600;text-decoration:none} .hv-related a:hover{text-decoration:underline} /* Spec tables — fully bordered, grey header (tech look) */ .hv-tbl,.hv-comparison-table{width:100%;border-collapse:collapse;margin:1.4em 0;font-size:.95em;border:1px solid #e1e4e8} .hv-tbl th,.hv-tbl td,.hv-comparison-table th,.hv-comparison-table td{border:1px solid #e1e4e8;padding:10px 13px;text-align:left;vertical-align:top;color:#33373d} .hv-tbl thead th,.hv-comparison-table thead th{background:#f6f8fa;color:#16191f;font-weight:700} .hv-tbl tbody tr td:first-child,.hv-comparison-table tbody tr td:first-child{color:#16191f;font-weight:600} .hv-meta{color:#5b626b;font-size:.9em;margin:0 0 1em} /* HV product FAQ accordion (Hardvance) */ .hv-faq{border:1px solid #e1e4e8;border-radius:6px;margin:0 0 .5em;background:#fff;overflow:hidden} .hv-faq summary{cursor:pointer;padding:11px 42px 11px 15px;font-weight:600;list-style:none;position:relative} .hv-faq summary::-webkit-details-marker{display:none} .hv-faq summary::after{content:"+";position:absolute;right:15px;top:50%;transform:translateY(-50%);font-size:1.25em;line-height:1;color:rgb(200,24,24)} .hv-faq[open] summary::after{content:"\2212"} .hv-faq summary:hover{color:rgb(200,24,24)} .hv-faq > div{padding:2px 15px 13px;color:#444} /* HV mobile tweaks (2026-06-17): tighter side gap + scrollable wide tables */ @media (max-width:767px){ .wd-content-layout.container{padding-left:10px;padding-right:10px} .single-post .hv-tbl,.single-post .hv-comparison-table,.woocommerce-Tabs-panel table,.woocommerce-product-attributes{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch} } /* === HV blog grid fix START === */ /* uniform 16:9 image crop */ .wd-blog-holder .wd-post-img > img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block} /* clamp title to 2 lines, excerpt to 3 lines -> equal-height rows, buttons align */ .wd-blog-holder .wd-entities-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em} .wd-blog-holder .wd-post-excerpt{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:4.4em} /* tablet (incl. portrait iPad at/under 768): 2 columns = 2 rows; phones a{background:#e62222 !important;color:#fff !important;border-radius:22px;padding:8px 20px !important;margin-left:12px;font-weight:600;line-height:1.4;letter-spacing:.2px;transition:background .2s ease} li.hv-blog-btn > a:hover{background:#a51414 !important;color:#fff !important} li.hv-blog-btn.menu-item-has-children > a::after{display:none !important} .whb-mobile-nav li.hv-blog-btn > a{background:#e62222 !important;color:#fff !important;border-radius:8px} /* HV header nav no-wrap fit (laptop/zoom) */ @media (min-width:1025px){ .whb-row .wd-nav-main, .whb-header .wd-nav-main, ul.wd-nav-main{flex-wrap:nowrap !important;} .wd-nav-main > li > a{white-space:nowrap;} } @media (min-width:1025px) and (max-width:1540px){ .wd-nav-main > li{margin-left:0 !important;margin-right:0 !important;} .wd-nav-main > li > a{padding-left:10px !important;padding-right:10px !important;font-size:13.5px !important;letter-spacing:0 !important;} li.hv-blog-btn > a{margin-left:8px !important;padding:7px 15px !important;} } @media (min-width:1025px) and (max-width:1300px){ .wd-nav-main > li > a{padding-left:8px !important;padding-right:8px !important;font-size:13px !important;} } /* HV article headings — brand-editorial (2026-06-25) */ body.single-post .elementor-widget-text-editor h2{font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-size:1.52em;font-weight:800;line-height:1.25;letter-spacing:-.012em;color:#16191f;margin:2em 0 .7em;padding-bottom:.34em;border-bottom:2px solid #e1e4e8;position:relative} body.single-post .elementor-widget-text-editor h2::after{content:'';position:absolute;left:0;bottom:-2px;width:56px;height:2px;background:#e62222} body.single-post .elementor-widget-text-editor h3{font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-size:1.16em;font-weight:700;line-height:1.3;color:#16191f;margin:1.5em 0 .4em} /* never put the rule/segment on a heading inside the verdict/box panels */ body.single-post .hv-box h2,body.single-post .hv-tip h2,body.single-post .hv-related h2,body.single-post .hv-toc h2{border-bottom:0;padding-bottom:0} body.single-post .hv-box h2::after,body.single-post .hv-tip h2::after,body.single-post .hv-related h2::after,body.single-post .hv-toc h2::after{display:none} /* HV article body — brand-editorial (2026-06-25) */ body.single-post .elementor-widget-text-editor{font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-size:1.02rem;line-height:1.72;color:#33373d} body.single-post .elementor-widget-text-editor p{margin:0 0 1.1em;font-size:1em} body.single-post .elementor-widget-text-editor strong{color:#16191f;font-weight:600} body.single-post .elementor-widget-text-editor a{color:#c81818;text-decoration:underline;text-decoration-color:rgba(200,24,24,.32);text-underline-offset:2px;text-decoration-thickness:1px} body.single-post .elementor-widget-text-editor a:hover{text-decoration-color:#c81818} body.single-post .elementor-widget-text-editor ul,body.single-post .elementor-widget-text-editor ol{color:#33373d;line-height:1.6} body.single-post .elementor-widget-text-editor li{margin:.35em 0} /* HV category FAQ (2026-06-26) */ .hv-cat-faq{max-width:1000px;margin:34px auto 6px;} .hv-cat-faq>h2{font-family:'Lexend Deca',Arial,Helvetica,sans-serif;font-size:1.85em;font-weight:500;letter-spacing:normal;color:#161616;margin:0 0 .5em;} .hv-cat-faq>p{color:#33373d;font-size:1.02em;line-height:1.65;margin:0 0 1.3em;} .hv-cat-faq .hv-faq{margin:0 0 9px;border:1px solid #e1e4e8;border-radius:8px;} .hv-cat-faq .hv-faq summary{font-size:1.02em;} .hv-cat-faq .hv-faq>div{color:#33373d;line-height:1.62;font-size:.98em;} .hv-cat-faq .hv-faq>div ul{margin:.3em 0 .2em;padding-left:1.2em;} .hv-cat-faq .hv-faq>div li{margin:.3em 0;} .hv-cat-faq .hv-faq>div a{color:#c81818;font-weight:600;} /* HV answer-key rows (answer-first rollout 2026-07-05) */ body.single-post .hv-ans{list-style:none;margin:.7em 0 .2em;padding:0} body.single-post .hv-ans li{display:flex;gap:16px;align-items:baseline;padding:.6em 0;border-top:1px solid #e1e4e8;margin:0} body.single-post .hv-ans li>span:first-child{flex:0 0 190px;font-size:.7em;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:#c81818} body.single-post .hv-ans em{font-style:normal;color:#16191f;font-weight:600;font-size:.97em;line-height:1.55} body.single-post .hv-ans a{color:#c81818} body.single-post .hv-ans-lead{margin:1em 0 0;font-weight:700;color:#16191f} body.single-post .hv-ans-close{margin:.8em 0 0;color:#5b626b;font-size:.95em} @media(max-width:600px){body.single-post .hv-ans li{flex-direction:column;gap:3px}body.single-post .hv-ans li>span:first-child{flex:none}} /* inc VAT suffix: smaller on single product (2026-07-05) */ .single-product .price .woocommerce-price-suffix{font-size:14px !important;font-weight:400} /* SKU line: smaller on single product (2026-07-05) */ .single-product .product_meta .sku_wrapper{font-size:14px !important;font-weight:400} /* === HV product mobile START === */ @media (max-width:767px){ /* Breadcrumb trail was 738px wide inside a 376px column (nowrap, centred) so it was clipped off-screen on both sides. Make it a left-aligned swipeable strip. */ body.single-product .wd-breadcrumbs{ display:flex;flex-wrap:nowrap;justify-content:flex-start; max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch; scrollbar-width:none;font-size:12px; } body.single-product .wd-breadcrumbs::-webkit-scrollbar{display:none} /* Touch targets: buy button and quantity stepper were 42px with 13px text. */ body.single-product .single_add_to_cart_button{ min-height:52px;font-size:15px;padding-inline:16px; } body.single-product form.cart .quantity, body.single-product form.cart .quantity input.qty{min-height:52px} body.single-product form.cart .quantity input.qty{width:44px;font-size:15px} body.single-product form.cart .quantity .wd-buttons>span, body.single-product form.cart .quantity .minus, body.single-product form.cart .quantity .plus{min-width:34px;min-height:26px} /* Compare / wishlist / share links: give them a real tap area. */ body.single-product .wd-action-btn>a{min-height:44px;display:inline-flex;align-items:center} /* Reviews rendered in Woodmart's two-column layout on a 370px screen. */ body.single-product .wd-single-reviews.wd-layout-two-column, body.single-product .wd-layout-two-column .commentlist{ display:block; } body.single-product .wd-layout-two-column .commentlist>li{width:100%;float:none;margin-inline:0} /* Sticky buy bar must clear the iPhone home indicator. */ .wd-sticky-btn{padding-bottom:env(safe-area-inset-bottom)} /* reCAPTCHA badge is fixed at bottom:14px and sat on top of the sticky bar. */ body.single-product .grecaptcha-badge{bottom:76px!important} } /* === HV product mobile END === */ /* === HV article image radius START === */ /* featured image + every image widget inside the post body (.wd-single-post-content keeps this off the header and footer image widgets) */ body.single-post .wd-post-image img, body.single-post .wd-single-post-content .elementor-widget-image img{ border-radius:12px; } body.single-post .wd-post-image{ border-radius:12px; overflow:hidden; } /* === HV article image radius END === */ /* === HV unified article identity START === */ body.single-post{--font:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;--ink:#16191f;--body:#33373d;--muted:#5b626b;--line:#e1e4e8;--panel:#f6f8fa;--blue:#c81818} body.single-post .elementor-widget-text-editor{font-family:var(--font);font-size:1.02rem;line-height:1.72;color:var(--body)} body.single-post .elementor-widget-text-editor p{margin:0 0 1.1em} body.single-post .elementor-widget-text-editor strong{color:var(--ink);font-weight:600} body.single-post .elementor-widget-text-editor a{color:var(--blue);text-decoration:underline;text-decoration-color:rgba(200,24,24,.32);text-underline-offset:2px;text-decoration-thickness:1px} body.single-post .elementor-widget-text-editor a:hover{text-decoration-color:var(--blue)} body.single-post .hv-ed-intro>p:first-of-type::first-letter{all:unset} body.single-post .hv-ed-byline{font-family:var(--font);color:var(--muted);font-size:.78em;letter-spacing:.1em;text-transform:uppercase;font-weight:600;margin:.5em 0 1.9em} body.single-post .elementor-widget-text-editor h2{font-family:var(--font);font-size:1.52em;font-weight:800;line-height:1.25;letter-spacing:-.012em;color:var(--ink);margin:2em 0 .7em;padding-bottom:.34em;border-bottom:2px solid var(--line);position:relative} body.single-post .elementor-widget-text-editor h2::after{content:'';position:absolute;left:0;bottom:-2px;width:56px;height:2px;background:var(--blue)} body.single-post .elementor-widget-text-editor h3{font-family:var(--font);font-size:1.16em;font-weight:700;line-height:1.3;color:var(--ink);margin:1.5em 0 .4em} body.single-post .hv-ed-standfirst{font-family:var(--font);font-style:normal;font-size:1.04em;line-height:1.65;color:var(--body);background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--blue);padding:15px 20px 17px;margin:.4em 0 2em} body.single-post .hv-ed-standfirst::before{content:'The bottom line';display:block;font-size:.72em;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--blue);margin:0 0 .55em} body.single-post .hv-ed-toc{font-family:var(--font);background:var(--panel);border:1px solid var(--line);padding:16px 20px;margin:0 0 2em} body.single-post .hv-ed-toc .lbl,body.single-post .hv-ed-note .lbl,body.single-post .hv-ed-related .lbl{display:block;font-size:.72em;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--blue);margin:0 0 .6em} body.single-post .hv-ed-toc ol{columns:2;column-gap:36px;margin:0;padding-left:1.3em;font-size:.96em;line-height:1.5} body.single-post .hv-ed-toc li{margin:.3em 0} body.single-post .hv-ed-toc a{color:var(--ink);text-decoration:none} body.single-post .hv-ed-toc a:hover{color:var(--blue);text-decoration:underline} body.single-post .hv-ed-pull{font-family:var(--font);font-style:normal;font-size:1.06em;font-weight:600;line-height:1.55;color:var(--ink);border:0;border-left:4px solid var(--blue);background:var(--panel);padding:13px 18px;margin:1.9em 0;max-width:none} body.single-post .hv-ed-pull::before{content:'Key point';display:block;font-size:.68em;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--blue);margin:0 0 .35em} body.single-post .hv-ed-note{font-family:var(--font);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;margin:2em 0 1.2em} body.single-post .hv-ed-note p{margin:0;color:var(--body);font-size:1em;line-height:1.7} body.single-post .hv-ed-note ul{margin:.2em 0 0;padding-left:1.25em;color:var(--body);line-height:1.6} body.single-post .hv-ed-note li{margin:.4em 0} body.single-post .hv-ed-note a{color:var(--blue)} body.single-post .hv-ed-mistakes{counter-reset:m;margin:.8em 0 0} body.single-post .hv-ed-mistakes h3{counter-increment:m;position:relative;padding-left:2.7em;border-top:1px solid var(--line);padding-top:1.15em;margin:1.5em 0 .4em;font-size:1.16em;min-height:1.4em} body.single-post .hv-ed-mistakes h3::before{content:counter(m,decimal-leading-zero);position:absolute;left:0;top:1.53em;width:1.8em;height:1.8em;display:inline-flex;align-items:center;justify-content:center;background:var(--ink);color:#fff;font-size:.74em;font-weight:700;border-radius:3px;line-height:1} body.single-post .hv-ed-mistakes p{margin:0 0 .5em} body.single-post .hv-ed-tbl{font-family:var(--font);width:100%;border-collapse:collapse;margin:1.6em 0;font-size:.95em;border:1px solid var(--line)} body.single-post .hv-ed-tbl th{background:var(--panel);border:1px solid var(--line);padding:10px 14px;text-align:left;font-size:.71em;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);font-weight:700} body.single-post .hv-ed-tbl td{border:1px solid var(--line);padding:11px 14px;vertical-align:top;color:var(--body);line-height:1.5} body.single-post .hv-ed-tbl tr td:first-child{color:var(--ink);font-weight:600} body.single-post .hv-ed-related{font-family:var(--font);border-top:2px solid var(--ink);padding-top:18px;margin-top:2.4em} body.single-post .hv-ed-related ul{list-style:none;margin:0;padding:0} body.single-post .hv-ed-related li{padding:.6em 0;border-bottom:1px solid var(--line)} body.single-post .hv-ed-related a{color:var(--blue);text-decoration:none;font-weight:600} body.single-post .hv-ed-related a:hover{text-decoration:underline} body.single-post .elementor-widget-image figcaption,body.single-post .elementor-widget-image .widget-image-caption{font-family:var(--font);font-size:.86em;color:var(--muted);margin-top:.55em;text-align:center;line-height:1.5} body.single-post .elementor-widget-wd_accordion .wd-accordion-item{border:0!important;border-bottom:1px solid var(--line)!important;box-shadow:none!important;background:transparent!important;margin:0!important;border-radius:0!important} body.single-post .elementor-widget-wd_accordion .wd-accordion-title{font-family:var(--font);padding:15px 0;font-weight:700;font-size:1.02em;color:var(--ink)} body.single-post .elementor-widget-wd_accordion .wd-accordion-inner{font-family:var(--font);padding:0 0 15px;color:var(--body);line-height:1.7} @media(max-width:600px){body.single-post .hv-ed-toc ol{columns:1}body.single-post .hv-ed-tbl{display:block;overflow-x:auto}body.single-post .elementor-widget-text-editor h2{font-size:1.35em}} body.single-post .hv-ed-standfirst .hv-ans{list-style:none;margin:.7em 0 .2em;padding:0}body.single-post .hv-ed-standfirst .hv-ans li{display:flex;gap:16px;align-items:baseline;padding:.6em 0;border-top:1px solid var(--line);margin:0}body.single-post .hv-ed-standfirst .hv-ans span{flex:0 0 190px;font-size:.7em;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--blue)}body.single-post .hv-ed-standfirst .hv-ans em{font-style:normal;color:var(--ink);font-weight:600;font-size:.97em;line-height:1.55}body.single-post .hv-ed-standfirst .hv-ans a{color:var(--blue);text-decoration:underline;text-decoration-color:rgba(200,24,24,.32)}body.single-post .hv-ed-standfirst .hv-ans-lead{margin:1em 0 0;font-weight:700;color:var(--ink)}body.single-post .hv-ed-standfirst .hv-ans-close{margin:.8em 0 0;color:var(--muted);font-size:.95em}@media(max-width:600px){body.single-post .hv-ed-standfirst .hv-ans li{flex-direction:column;gap:3px}body.single-post .hv-ed-standfirst .hv-ans span{flex:none}} /* the legacy "HV article body" block styles `.elementor-widget-text-editor p` with a higher specificity than the component classes, so components that sit inside a text-editor widget (the migrated articles) need this to match the native ones */ body.single-post .elementor-widget-text-editor p.hv-ed-byline, body.single-post p.hv-ed-byline{ font-size:.78rem;line-height:1.4;margin:.5em 0 1.9em; } /* === HV unified article identity END === */ /* === HV article product-card image radius START === */ body.single-post .elementor-widget-wd_products .wd-product-img-link, body.single-post .elementor-widget-wd_products .product-image-link{border-radius:12px;overflow:hidden;} body.single-post .elementor-widget-wd_products .wd-product-img-link img, body.single-post .elementor-widget-wd_products .product-image-link img{border-radius:12px;} /* === HV article product-card image radius END === */ /* === HV header fit 1025-1600px START === The 8-department nav plus the tools column (account+compare+wishlist+cart) needed ~1660px on one line but the container maxes at 1500px, so below ~1600px the tools were pushed off-screen and silently clipped by body{overflow-x:clip} - the CART was unreachable on any 13-15in laptop. Fix: keep the bar at its designed 60px height and fit the menu INSIDE it, by reclaiming space from the nav gaps, the link padding and the tool icons - progressively, only as far as each width actually needs. The header height is NOT changed. */ @media (min-width:1025px) and (max-width:1600px){ :root{ --wd-header-bottom-h:60px !important; --wd-header-bottom-sm-h:60px !important; } .whb-header-bottom, .whb-header-bottom .whb-flex-row{ height:60px !important; min-height:0 !important; } .whb-header-bottom .whb-flex-row{ flex-wrap:nowrap !important; } .whb-header-bottom .whb-col-left{ flex:0 1 auto !important; min-width:0 !important; justify-content:flex-start !important; } .whb-header-bottom .whb-col-right{ flex:0 0 auto !important; } } /* 1281-1600px: closing the gaps is enough */ @media (min-width:1281px) and (max-width:1600px){ .whb-header-bottom .wd-nav-main{ column-gap:12px !important; } .whb-header-bottom .wd-nav-main > li > a{ padding-inline:8px !important; } } /* 1121-1280px: also drop the cart total text and tighten the icons */ @media (min-width:1121px) and (max-width:1280px){ .whb-header-bottom .wd-nav-main{ column-gap:8px !important; } .whb-header-bottom .wd-nav-main > li > a{ padding-inline:6px !important; } .whb-header-bottom .wd-header-cart .wd-tools-text{ display:none !important; } .whb-header-bottom .whb-col-right .wd-tools-element > a{ padding-inline:7px !important; } } /* 1025-1120px: smallest laptops, tighten the type as well */ @media (min-width:1025px) and (max-width:1120px){ .whb-header-bottom .wd-nav-main{ column-gap:4px !important; } .whb-header-bottom .wd-nav-main > li > a{ padding-inline:4px !important; font-size:12px !important; letter-spacing:-.1px !important; } .whb-header-bottom .wd-header-cart .wd-tools-text{ display:none !important; } .whb-header-bottom .whb-col-right .wd-tools-element > a{ padding-inline:5px !important; } .whb-header-bottom .whb-col-right .wd-tools-element{ --wd-tools-icon-base-width:18px !important; } } /* the mega-menu dropdown is a fixed 1400px, wider than a 1366px screen */ @media (max-width:1600px){ .whb-header .wd-nav-main .wd-dropdown{ max-width:calc(100vw - 40px) !important; } } /* === HV header fit 1025-1600px END === */ /* === HV single product 2026-09-01 START === Audited on a 1440x900 desktop and a 390px phone. */ /* Woodmart draws the collapsed "Read More" fade as a :after on the container with z-index 10 and no pointer-events, so it sat on top of the last ~100px of the short description and swallowed text selection there. */ .single-product .wd-collapsible-content:not(.wd-opened):after{pointer-events:none} /* Nothing to expand: no short description at all (18 products), or the text already fits inside the 180px collapsed height. */ .single-product .hv-rm-empty{display:none !important} .single-product .hv-rm-fits .wd-collapsible-button{display:none} .single-product .hv-rm-fits:after{display:none !important} body.hv-no-short-desc.single-product .wd-collapsible-content{display:none} /* The full product description was clipped on desktop. base.css caps .wd-scroll-content at var(--wd-scroll-h, 50dvh) with an inner scrollbar that --wd-scroll-w:.001px renders invisible, so a 1787px description showed 450px with no affordance. The theme already lifts this below 1025px. */ .single-product .wd-single-tabs .wd-scroll-content{ max-height:none !important; overflow:visible; padding-inline-end:0; } /* Heading scale. Measured before: product H1 28px, accordion titles 22px/800, the description's own h2 24px, and the two section headings ("More Ways to Pay", "About This Item") 18px with line-height 18px. The content h2 inside the Description panel therefore outranked every heading around it - on a phone it rendered at 24px against a 22px product title. Ladder now: H1 28 > accordion 22 > section 20 > description h2 19 > body 16. */ .single-product .elementor-widget-heading h4.elementor-heading-title{ font-size:20px;line-height:1.35;font-weight:600; } .single-product .woocommerce-Tabs-panel--description h2{ font-size:19px;line-height:1.4;font-weight:600;margin:1.7em 0 .5em; } .single-product .woocommerce-Tabs-panel--description h2:first-child{margin-top:0} .single-product .woocommerce-Tabs-panel--description h3{ font-size:17px;line-height:1.45;font-weight:600;margin:1.4em 0 .4em; } .single-product .woocommerce-Tabs-panel--description :is(p,li){line-height:1.7} .single-product .woocommerce-Tabs-panel--description ul{margin-bottom:1.2em} @media(max-width:767px){ .single-product .elementor-widget-heading h4.elementor-heading-title{font-size:18px} .single-product .woocommerce-Tabs-panel--description h2{font-size:18px} .single-product .woocommerce-Tabs-panel--description h3{font-size:16px} } /* === HV single product 2026-09-01 END === */ /* === HV sale badge 2026-09-02 === */ /* The badge prints the cash saving ("SAVE £13", mu-plugin hv-sale-label-amount.php), so it is set larger and in the brand red instead of the primary blue. The `.wd ` prefix is required to beat Woodmart's own "Sale label background" theme setting, which is `.wd .product-label.onsale`. */ .wd .product-label.onsale{ background-color:#cf2e22; font-size:14px; padding:6px 12px; letter-spacing:.02em; white-space:nowrap; word-break:normal; } @media(max-width:576px){ .wd .product-label.onsale{font-size:12px;padding:5px 9px} } /* === HV sale badge 2026-09-02 END === */ /* === HV VAT toggle 2026-09-02 === */ /* "Inc VAT ( ) Ex VAT" in the menu bar's right column, box.co.uk style. Markup + behaviour: mu-plugin hv-vat-toggle.php (plain links, no JS). */ .hv-vat{display:inline-flex;align-items:center;gap:8px;font-size:12px;line-height:1;white-space:nowrap} .hv-vat a{text-decoration:none;color:var(--wd-title-color,#333)} .hv-vat a:hover{text-decoration:none} /* The inactive label used opacity:.5, which rendered #161616 as #8b8b8b on white = 3.4:1 and failed the WCAG AA contrast check. Same visual weight, expressed as a real colour (5.3:1). The `.hv-vat a` selector above is (0,1,1), so the class alone would lose - hence a.hv-vat-lbl. */ .hv-vat a.hv-vat-lbl{font-weight:500;color:#6b6b6b;transition:color .15s ease} .hv-vat a.hv-vat-lbl:hover{color:#161616} .hv-vat a.hv-vat-lbl.is-on{font-weight:700;color:#c81818} .hv-vat-sw{position:relative;display:inline-block;flex:0 0 auto;width:34px;height:18px;border-radius:999px;background:#c6ccd4;transition:background .18s ease} .hv-vat-sw:hover{background:#aeb6c0} .hv-vat-knob{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.28);transition:transform .18s ease} .hv-vat[data-hv-vat="excl"] .hv-vat-sw{background:#e62222} .hv-vat[data-hv-vat="excl"] .hv-vat-knob{transform:translateX(16px)} /* desktop: hard right of the menu bar */ .whb-header-bottom .whb-col-right .wd-header-text.hv-vat-header{margin-inline-start:auto} /* Under 1400px the menu bar has no room for both words: keep the active label plus the switch, label always first so the control never jumps sides when it flips. Measured clearance to the last menu item: 28px at 1025, 56px at 1200, 73px at 1366. */ /* Shortening the Audio label freed ~112px, so both words fit again down to 1280. Below that only the active label survives beside the Refurbished pill. */ @media(max-width:1279px){ .hv-vat{font-size:11px;gap:6px} .hv-vat-lbl:not(.is-on){display:none} .hv-vat-lbl{order:1} .hv-vat-sw{order:2;width:30px;height:16px} .hv-vat-knob{width:12px;height:12px} .hv-vat[data-hv-vat="excl"] .hv-vat-knob{transform:translateX(14px)} } /* mobile: inline at the right of the search field. The row is a fixed 60px, so the toggle must never wrap onto a second line — it would spill over the breadcrumb. */ @media(max-width:1024px){ .whb-header-bottom .whb-col-mobile{flex-wrap:nowrap;gap:10px} .wd-header-text.hv-vat-mobile{width:auto;margin-top:0;flex:0 0 auto;text-align:right} .whb-header-bottom .whb-col-mobile .wd-search-form{flex:1 1 auto;min-width:0} } /* === HV VAT toggle 2026-09-02 END === */ /* === HV refurbished pill 2026-09-03 === */ /* Sits in the menu bar beside the Inc/Ex VAT switch. Green rather than the primary blue so it reads as a shortcut, not another nav item, and does not fight the toggle next to it. */ .hv-refurb{display:inline-flex;align-items:center;font-size:12px;font-weight:600;line-height:1;white-space:nowrap;color:#17683A;text-decoration:none;padding:5px 9px;border:1px solid #DCEEE3;background:#F5FBF7;border-radius:999px} .hv-refurb:hover{border-color:#17683A;background:#EAF6EE;color:#0F5230;text-decoration:none} .whb-header-bottom .whb-col-right .wd-header-text.hv-refurb-wrap{margin-inline-end:12px} .whb-header-bottom .whb-col-mobile .wd-header-text.hv-refurb-wrap{flex:0 0 auto;margin-inline-end:10px} /* Shortening the "Audio & Communication" label to "Audio" freed ~123px in the bar, which is what makes room for this pill beside the VAT switch on a 1366 laptop. Below 1200 the menu is tight even without it, so it steps aside there. */ @media(min-width:1025px) and (max-width:1199px){ .whb-header-bottom .whb-col-right .wd-header-text.hv-refurb-wrap{display:none} } @media(max-width:480px){ .whb-header-bottom .whb-col-mobile .wd-header-text.hv-refurb-wrap{display:none} } /* 1280-1439: only ~11px separated the pill from "Cables & Power"; a little off its own padding and margin buys the gap back without touching the menu again. */ @media(min-width:1280px) and (max-width:1439px){ .hv-refurb{padding:5px 7px;font-size:11.5px} .whb-header-bottom .whb-col-right .wd-header-text.hv-refurb-wrap{margin-inline-end:8px} } /* === HV refurbished pill 2026-09-03 END === */ /* === HV mobile breadcrumb 2026-09-03 === */ /* On a phone the breadcrumb had zero side padding and 676px of text in a 390px box, so it ran off both edges. Padded to match the content, and allowed to wrap instead of clip. */ @media(max-width:767px){ .wd-breadcrumbs,.woodmart-breadcrumbs,nav.woocommerce-breadcrumb{padding-inline:10px;line-height:1.5} .wd-breadcrumbs a,.woodmart-breadcrumbs a{word-break:break-word} } /* === HV mobile breadcrumb 2026-09-03 END === */ /* === HV mobile product card titles 2026-09-03 === */ /* Two cards a row on a phone leaves each title ~160px. At 16px that is about 18 characters a line, so almost every name ran to the theme's two-line clamp. 14px fits roughly a quarter more per line, so more names finish inside one or two lines without an ellipsis. */ @media(max-width:767px){ .wd-products-element .product-grid-item .wd-entities-title, .products .product-grid-item .wd-entities-title, .wd-product .wd-entities-title{font-size:14px;line-height:1.35} } /* === HV mobile product card titles 2026-09-03 END === */ /* === HV mobile price wrap 2026-09-03 === */ /* A sale card shows the old and new price side by side. Measured at 390px: the pair needs 132px at 14.4px and the card has 160px, but .price shrink-wrapped to 123px and broke the number onto a second line. Let it use the full card width and keep each figure intact. */ @media(max-width:767px){ .product-grid-item .price,.wd-product .price{display:block;width:100%;white-space:nowrap;font-size:13px} .product-grid-item .price del,.wd-product .price del, .product-grid-item .price ins,.wd-product .price ins, .product-grid-item .price bdi,.wd-product .price bdi{white-space:nowrap} .product-grid-item .price .woocommerce-price-suffix,.wd-product .price .woocommerce-price-suffix{display:none} } /* === HV mobile price wrap 2026-09-03 END === */ /* === HV mobile category labels 2026-09-03 === */ /* The theme forces .wd-cat .wd-entities-title to uppercase. Measured at 390px in the 140px card slot: "Accessories & Services" needs 168px uppercase but only 136px in normal case, so dropping the transform is what puts these names back on one line. */ @media(max-width:767px){ /* the theme rule is .wd-cat .wd-entities-title (0,2,0) and is printed after the customizer, so the override needs one more class to win */ .wd-cat.cat-design-alt .wd-entities-title, .wd-cat.cat-design-default .wd-entities-title, .category-grid-item.wd-cat .wd-entities-title, .wd-cat .wd-entities-title a{text-transform:none;letter-spacing:0} } /* === HV mobile category labels 2026-09-03 END === */ /* === HV mobile category label width 2026-09-03 === */ /* Two cards a row gives a 140px label on the shop and category pages. Trimming the card's own side padding hands the name back ~15px, which is the difference between one line and two for names like "iiyama G-Master Monitors". */ @media(max-width:767px){ .wd-cat .wd-cat-content, .wd-cat .wd-entities-title{padding-inline:2px} .wd-cat .wd-entities-title{font-size:11.5px;line-height:1.3;word-break:normal;overflow-wrap:normal} } /* === HV mobile category label width 2026-09-03 END === */ /* === HV heading scale 2026-09-03 === */ /* Before this the same level of heading was a different size on every template: H1 was 24/39/39/30/42/28/34px across home, shop, category, product, blog, post and pages, at weights 500, 700 and 800. One scale per level, two breakpoints. Deliberately NOT touched: card titles (.wd-entities-title - product and category cards are component labels, not document headings) and the article body, which has its own editorial scale. */ .wd-page-content h1:not(.wd-entities-title), .wd-page-content .wd-page-title h1, h1.entry-title:not(.wd-entities-title), h1.woocommerce-products-header__title{font-size:30px;font-weight:700;line-height:1.2} body:not(.single-post) .wd-page-content h2:not(.wd-entities-title), body:not(.single-post) .wd-page-content .wd-title-wrapp h2{font-size:24px;font-weight:700;line-height:1.25} body:not(.single-post) .wd-page-content h3:not(.wd-entities-title):not(.wd-product-title), body:not(.single-post) .wd-page-content .wd-title-wrapp h3{font-size:19px;font-weight:600;line-height:1.3} body:not(.single-post) .wd-page-content h4:not(.wd-entities-title){font-size:18px;font-weight:600;line-height:1.3} @media(max-width:767px){ .wd-page-content h1:not(.wd-entities-title), .wd-page-content .wd-page-title h1, h1.entry-title:not(.wd-entities-title), h1.woocommerce-products-header__title{font-size:22px} body:not(.single-post) .wd-page-content h2:not(.wd-entities-title){font-size:20px} body:not(.single-post) .wd-page-content h3:not(.wd-entities-title):not(.wd-product-title){font-size:17px} body:not(.single-post) .wd-page-content h4:not(.wd-entities-title){font-size:16px} } /* the theme sizes ordinary page titles with a wd-fontsize-* class, which outranks a bare h1 */ /* each page's title widget carries its own Elementor typography (0,3,0), so this needs to be more specific again to keep every page title on the same scale */ body .wd-page-content h1.woodmart-title-container.title, body .title-wrapper h1.title.woodmart-title-container{font-size:30px;font-weight:700} @media(max-width:767px){ body .wd-page-content h1.woodmart-title-container.title, body .title-wrapper h1.title.woodmart-title-container{font-size:22px} } /* === HV heading scale 2026-09-03 END === */ /* HV mobile category card padding — shop/category carousels wrap the card in .wd-cat-wrap with 10px each side (the homepage variant has no such wrapper), which costs 20px of label width and is the only reason the longest names wrap */ @media(max-width:767px){ .wd-cat.cat-design-alt .wd-cat-wrap{padding-left:2px;padding-right:2px} } /* HV small-phone category label — at 360-400px the slot is 157px and the longest names ("Intel Core Ultra 5 Laptops") need ~166px at 12px. One step down keeps every label on a single line. Specificity must beat the Elementor widget rule. */ @media(max-width:400px){ body .wd-cat.cat-design-alt.category-grid-item div.wd-cat-content .wd-entities-title{font-size:11px} } /* HV homepage H1 — the hero is a banner image with its text baked in, so the page carried no H1 at all. This one is real text for search engines and screen readers without touching the visible design. */ .hv-home-h1{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} /* HV category cards with no image — WooCommerce prints its placeholder with the class .woocommerce-placeholder, so hide the whole thumb block and let the card be its title. Pointing the term at a broken URL instead leaves a broken-image icon AND the empty box, which is why this is done in CSS. Applies to any category with no image, not just L3. */ .wd-cat .wd-cat-thumb:has(img.woocommerce-placeholder){display:none} .wd-cat img.woocommerce-placeholder{display:none} .wd-cat .wd-cat-thumb:has(img.woocommerce-placeholder) .wd-cat-image{min-height:0;padding:0} /* HV article page ground — the same language as the product page: a grey page with white cards on it. The product page does exactly this via .single-product :is(.wd-page-content, .whb-header). The article components inside the card (.hv-ed-standfirst, .hv-ed-toc, .hv-ed-note, .hv-tbl) are deliberately untouched. */ .single-post :is(.wd-page-content, .whb-header){background:#f6f6f6} .single-post .wd-single-post-image img, .single-post .wd-post-featured-img img{border-radius:12px} /* === HV article modern identity 2026-09-05 START === Three things made the old article read like a Word document: a system-ui font stack, filled grey panels stacked before the prose, and an h2 with a rule under it plus a blue segment. All three go. Class names are untouched — 86 published articles carry this markup — and the per-post `.hv-ed-standfirst::before` label hook still works. */ body.single-post{ --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --hv-display:'Lexend Deca','Inter',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace; --ink:#0b1220; --body:#39414d; --muted:#6b7480; --line:#e6e9ee; --panel:#f4f7fb; --blue:#c81818; --accent:#c81818; } /* a full-card-width column is itself a document tell; cap the measure */ body.single-post .elementor-widget-text-editor{ font-family:var(--font);font-size:1.075rem;line-height:1.75;color:var(--body); font-feature-settings:'kern' 1,'liga' 1,'calt' 1;-webkit-font-smoothing:antialiased} body.single-post .elementor-widget-text-editor p{margin:0 0 1.15em} body.single-post .elementor-widget-text-editor > :is(p,ul,ol):last-child{margin-bottom:0} body.single-post .elementor-widget-text-editor strong{color:var(--ink);font-weight:600} /* hierarchy by size and weight, never by a rule under the text */ body.single-post .elementor-widget-text-editor h2{ font-family:var(--hv-display);font-size:1.78em;font-weight:700;line-height:1.18; letter-spacing:-.022em;color:var(--ink);margin:1.3em 0 .5em; padding-bottom:0;border-bottom:0} body.single-post .elementor-widget-text-editor h2::after{content:none;display:none} body.single-post .elementor-widget-text-editor h3{ font-family:var(--hv-display);font-size:1.22em;font-weight:600;letter-spacing:-.012em; color:var(--ink);margin:1.9em 0 .45em} body.single-post .wd-single-post-title, body.single-post h1.entry-title{font-family:var(--hv-display);letter-spacing:-.024em} /* the standfirst panel becomes a rule and larger type */ body.single-post .hv-ed-standfirst{ background:none;border:0;border-left:3px solid var(--accent); padding:2px 0 2px 22px;margin:.2em 0 2.4em; font-family:var(--font);font-size:1.14em;line-height:1.62;color:var(--ink)} body.single-post .hv-ed-standfirst::before{ font-family:var(--mono);font-size:.64em;letter-spacing:.14em;font-weight:500; color:var(--accent);margin:0 0 .7em} body.single-post .hv-ans-lead{color:var(--ink)} body.single-post .hv-ans li>span:first-child{ font-family:var(--mono);font-weight:500;letter-spacing:.06em;font-size:.68em;color:var(--accent)} /* the contents block becomes an index, not a box */ body.single-post .hv-ed-toc{ background:none;border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line); padding:18px 0;margin:0 0 1.2em} body.single-post .hv-ed-toc .lbl, body.single-post .hv-ed-note .lbl, body.single-post .hv-ed-related .lbl{ font-family:var(--mono);font-size:.64em;letter-spacing:.14em;font-weight:500;color:var(--accent)} body.single-post .hv-ed-toc ul,body.single-post .hv-ed-toc ol{ columns:2;column-gap:40px;list-style:none;margin:0;padding:0;font-size:.97em;line-height:1.5} body.single-post .hv-ed-toc li{margin:.42em 0;padding-left:1.15em;position:relative;break-inside:avoid} body.single-post .hv-ed-toc li::before{ content:'\2192';position:absolute;left:0;top:0;color:var(--muted);font-size:.9em} body.single-post .hv-ed-pull{ background:none;border:0;border-left:3px solid var(--accent);padding:2px 0 2px 20px} body.single-post .hv-ed-pull::before{ font-family:var(--mono);letter-spacing:.14em;font-weight:500;color:var(--accent)} /* model numbers, dial codes and port names should look like specs */ body.single-post .elementor-widget-text-editor :is(code,kbd,samp), body.single-post .hv-ed-standfirst :is(code,kbd,samp), body.single-post .hv-tbl :is(code,kbd,samp){ font-family:var(--mono);font-size:.87em;background:var(--panel);border:1px solid var(--line); border-radius:5px;padding:.1em .4em;color:var(--ink)} /* tables keep display:block/overflow-x (that is what stops them breaking the card) and lose the grid */ body.single-post .hv-tbl,body.single-post .hv-comparison-table{border:0;font-size:.94em} body.single-post .hv-tbl :is(th,td), body.single-post .hv-comparison-table :is(th,td){ border:0;border-bottom:1px solid var(--line);padding:11px 14px} body.single-post .hv-tbl thead th,body.single-post .hv-comparison-table thead th{ background:none;border-bottom:2px solid var(--ink);font-family:var(--mono); font-size:.74em;letter-spacing:.08em;font-weight:500;color:var(--muted)} /* reading progress, drawn from the scroll timeline with no JavaScript */ .hv-progress{position:fixed;top:0;left:0;height:3px;width:100%;z-index:9999; transform:scaleX(0);transform-origin:0 50%; background:linear-gradient(90deg,#c81818,#ff3131)} @supports (animation-timeline:scroll()){ .hv-progress{animation:hv-progress linear both;animation-timeline:scroll(root block)} @keyframes hv-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}} } @media(max-width:767px){ body.single-post .elementor-widget-text-editor{font-size:1.02rem} body.single-post .elementor-widget-text-editor h2{font-size:1.5em} body.single-post .hv-ed-toc ul,body.single-post .hv-ed-toc ol{columns:1} body.single-post .hv-ed-standfirst{padding-left:16px;font-size:1.06em} } /* === HV article modern identity 2026-09-05 END === */ /* === HV article editorial grid + spec tables 2026-09-05 START === Two real faults in the first pass: a 54ch cap left the prose pinned to the left of an 825px card with dead space beside it, and the tables kept a solid blue header block that reads as Office. Both are fixed here. */ /* An editorial grid: prose sits in a centred measure, while tables, figures and images are allowed to break out to the full column. This is the pattern every modern docs site uses, and it is what stops a capped measure looking like a mistake. */ html body.single-post .wd-single-post-content .elementor-widget-text-editor{display:block} /* the standfirst and the contents index follow the same measure so the page has one spine */ html body.single-post .hv-ed-standfirst, html body.single-post .hv-ed-toc{max-width:none} /* --- section numbering: the one piece of chrome worth keeping, and it reads as documentation --- */ html body.single-post .wd-single-post-content{counter-reset:hvsec} html body.single-post .wd-single-post-content .elementor-widget-text-editor h2{ counter-increment:hvsec;position:relative} html body.single-post .wd-single-post-content .elementor-widget-text-editor h2::before{ content:counter(hvsec,decimal-leading-zero); display:block;margin:0 0 .5em; font-family:var(--mono);font-size:.44em;font-weight:500;letter-spacing:.14em; color:var(--accent);opacity:.8} /* --- spec tables: no fill, hairlines only, mono column labels --- */ html body.single-post .hv-tbl-wrap{ border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:2em 0;background:#fff} html body.single-post .hv-tbl, html body.single-post .hv-comparison-table{ border:0;border-collapse:collapse;width:100%;font-size:.95em;margin:0} html body.single-post .hv-tbl :is(th,td), html body.single-post .hv-comparison-table :is(th,td){ border:0;border-bottom:1px solid var(--line);padding:14px 18px;vertical-align:top; background:none;color:var(--body)} html body.single-post .hv-tbl th, html body.single-post .hv-comparison-table th{ background:none;color:var(--muted); font-family:var(--mono);font-size:.72em;font-weight:500;letter-spacing:.1em;text-transform:uppercase; border-bottom:1px solid var(--ink);padding-top:16px;padding-bottom:12px;white-space:nowrap} html body.single-post .hv-tbl tbody tr:last-child :is(th,td), html body.single-post .hv-comparison-table tbody tr:last-child :is(th,td){border-bottom:0} html body.single-post .hv-tbl tbody tr:nth-child(even) :is(th,td){background:none} html body.single-post .hv-tbl tbody tr:hover :is(th,td){background:#f7f9fc} html body.single-post .hv-tbl tbody td:first-child, html body.single-post .hv-comparison-table tbody td:first-child{ color:var(--ink);font-weight:600} @media(max-width:900px){ html body.single-post .hv-tbl :is(th,td){padding:12px 14px} /* let the table keep readable column widths and scroll, instead of crushing the first column to five words a line */ html body.single-post :is(.hv-tbl,.hv-comparison-table){min-width:600px} html body.single-post .hv-tbl-wrap{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch} } /* === HV article editorial grid + spec tables 2026-09-05 END === */ /* === HV table no-wrap 2026-09-05 === The first column carries the label the reader scans down, so breaking it over three lines is the worst place to save space. The table now sizes to its content and scrolls if that pushes past the card, instead of wrapping. The cap stops one very long label exploding the width. */ html body.single-post :is(.hv-tbl,.hv-comparison-table){width:auto;min-width:100%} html body.single-post :is(.hv-tbl,.hv-comparison-table) :is(th,td):first-child{ white-space:nowrap;width:1%} html body.single-post :is(.hv-tbl,.hv-comparison-table) th{white-space:nowrap} /* a column that holds only a code chip or a single short word should never take two lines */ html body.single-post :is(.hv-tbl,.hv-comparison-table) td:has(> code:only-child){ white-space:nowrap;width:1%} /* keep words whole everywhere else */ html body.single-post :is(.hv-tbl,.hv-comparison-table) :is(th,td){ overflow-wrap:normal;word-break:normal;hyphens:none;text-wrap:pretty} html body.single-post .hv-tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch} @media(max-width:767px){ } /* === HV table no-wrap END === */ /* === HV article cards + tables + mobile edge 2026-09-06 START === */ /* 1. Product cards inside an article were the only text still set in the theme's Open Sans, so one article carried three typefaces. Only the TYPE is aligned here — the per-count layouts the user tuned (list for 1 and 2, carousel for 3-5, grid beyond) are not touched. */ body.single-post .elementor-widget-wd_products :is(.price,.stock,.wd-product-desc,.woocommerce-product-details__short-description,.wd-entities-title a,p,li,.button,.wd-buy-now-btn){ font-family:var(--font)} body.single-post .elementor-widget-wd_products .wd-entities-title{font-family:var(--hv-display);font-weight:600} body.single-post .elementor-widget-wd_products :is(.wd-product-desc,.woocommerce-product-details__short-description) li{ color:var(--body);line-height:1.6} /* 2. Table copy set consistently: one typeface, one alignment, labels centred against the row rather than floating at the top of a three-line neighbour. */ html body.single-post :is(.hv-tbl,.hv-comparison-table) :is(th,td){ font-family:var(--font);text-align:left;vertical-align:middle;line-height:1.55} html body.single-post :is(.hv-tbl,.hv-comparison-table) th{vertical-align:bottom} html body.single-post :is(.hv-tbl,.hv-comparison-table) tbody td:first-child{color:var(--ink);font-weight:600} html body.single-post :is(.hv-tbl,.hv-comparison-table) tbody td:not(:first-child){color:var(--body);font-weight:400} html body.single-post :is(.hv-tbl,.hv-comparison-table) :is(th,td) :is(p,ul,ol){margin:0} html body.single-post :is(.hv-tbl,.hv-comparison-table) :is(th,td) p + p{margin-top:.5em} /* 3. On a phone the article card sat 10px inside the screen and then held 16px of its own padding, so the text started 26px in. Card goes edge to edge instead. */ @media(max-width:767px){ /* three separate wrappers were each adding a side gutter: the page content, the negative-gap wrapper inside the post content widget, and the container inner. The card keeps its own 12px. */ /* the last gutter is the theme container itself: main.wd-content-layout.container has 10px */ body.single-post main.wd-content-layout{padding-inline:0} body.single-post .wd-page-content{padding-inline:0} body.single-post .wd-single-post-content :is(.e-con,.e-con-inner,.elementor-widget-container,.wd-negative-gap){ padding-inline:0;margin-inline:0} body.single-post .wd-single-post-content{padding-inline:0} } /* === HV article cards + tables + mobile edge END === */ /* === HV a11y contrast 2026-09-08 === */ /* Two WCAG AA failures found with axe-core on the home page: - blog-loop meta (category links + date) was #a5a5a5 on white = 2.46:1 at 15.2px; - the "New" product badge was #ffffff on #438e44 = 4.04:1 at 12px. Both now clear 4.5:1. The badge keeps the same green family, one step darker. `.wd ` prefixes the badge rule because Woodmart's own label setting emits `.wd .product-label`. */ .wd-post-entry-meta, .wd-post-entry-meta a, .wd-post-entry-meta time, .wd-post-entry-meta .wd-post-cat a, .wd-post-entry-meta .wd-post-date{color:#6b6b6b} .wd-post-entry-meta a:hover{color:#c81818} .wd .product-label.new{background-color:#3a7d3b} /* === HV a11y contrast 2026-09-08 END === */ /* === HV page headers 2026-09-23 === Page title bars and the About Us / Delivery hero boxes are white with dark text and a red underline on the active checkout step (the red side strip was removed at his request). */ .wd-page-title .wd-checkout-steps li>:is(a,span),.wd-page-title .wd-checkout-steps li:after{color:#0e0f12 !important} .wd-page-title .wd-checkout-steps .step-active>:is(a,span){text-decoration-color:#e62222 !important} /* === HV page title icons 2026-09-23 === Each page title bar carries a faint line icon for its subject (a "shadow" of the title): one large on the right, one smaller on the left, light red (#e62222 at 16%) so the title stays the focus. Files: uploads/hv-page-title-icons/*.svg. A page without a mapping shows no icon. */ .wd-page-title{overflow:hidden} .page-id-35715 .wd-page-title{--hv-pti:url(/wp-content/uploads/hv-page-title-icons/faq.svg?v=2)} .page-id-35702 .wd-page-title{--hv-pti:url(/wp-content/uploads/hv-page-title-icons/returns.svg?v=2)} .page-id-35695 .wd-page-title{--hv-pti:url(/wp-content/uploads/hv-page-title-icons/privacy.svg?v=2)} .page-id-35649 .wd-page-title{--hv-pti:url(/wp-content/uploads/hv-page-title-icons/terms.svg?v=2)} .page-id-47456 .wd-page-title{--hv-pti:url(/wp-content/uploads/hv-page-title-icons/warranty.svg?v=2)} .page-id-262869 .wd-page-title{--hv-pti:url(/wp-content/uploads/hv-page-title-icons/editorial.svg?v=2)} .page-id-89040 .wd-page-title{--hv-pti:url(/wp-content/uploads/hv-page-title-icons/deals.svg?v=2)} .page-id-118 .wd-page-title{--hv-pti:url(/wp-content/uploads/hv-page-title-icons/wishlist.svg?v=2)} .page-id-108 .wd-page-title{--hv-pti:url(/wp-content/uploads/hv-page-title-icons/compare.svg?v=2)} .page-id-29 .wd-page-title{--hv-pti:url(/wp-content/uploads/hv-page-title-icons/contacts-chat.svg?v=3)} .page-id-29 .wd-page-title .wd-page-title-bg{background-image:url(/wp-content/uploads/hv-page-title-icons/contacts-chat.svg?v=3),url(/wp-content/uploads/hv-page-title-icons/contacts-mail.svg?v=3) !important} /* 2026-10-21: chat (large, right) and email (small, left) replace the phone icon */ .page-id-13 .wd-page-title{--hv-pti:url(/wp-content/uploads/hv-page-title-icons/basket.svg?v=2)} .page-id-14 .wd-page-title{--hv-pti:url(/wp-content/uploads/hv-page-title-icons/checkout.svg?v=2)} .wd-page-title .wd-page-title-bg{background-image:var(--hv-pti),var(--hv-pti) !important;background-repeat:no-repeat !important;background-size:auto 170%,auto 95% !important;background-position:right 7% center,left 9% center !important} @media(max-width:768px){.wd-page-title .wd-page-title-bg{background-size:auto 130%,0 0 !important;background-position:right -10px center,left center !important}} /* === HV outline buttons 2026-09-23 === One outline system for every button: white fill, 2px border, ink text, 6px corners, 44px tall. - Other buttons: ink border, fill red #e62222 on hover (white text, 4.55:1). - Buy buttons (Add to basket, Checkout, Proceed to checkout, Place order): green #017d50 border, fill a darker green #006440 on hover (white text, 7:1). */ .wd :is(.btn.btn-style-default,.btn-default,.btn-accent:not(.checkout-button),.woocommerce-form-register__submit,button[name="update_cart"],.woocommerce-mini-cart__buttons .button:not(.checkout),.comment-form .submit,.single_add_to_cart_button,.add_to_cart_button,.add-to-cart-loop,.wd-add-btn>a,.wd-sticky-add-to-cart,.checkout-button,#place_order,.woocommerce-mini-cart__buttons .checkout){background-color:#fff !important;color:#0e0f12 !important;border:2px solid #0e0f12 !important;border-radius:6px !important;box-shadow:none !important;--btn-accented-color:#0e0f12;--btn-accented-color-hover:#fff;--btn-color:#0e0f12;--btn-color-hover:#fff} .wd :is(.btn.btn-style-default,.btn-default,.btn-accent:not(.checkout-button),.woocommerce-form-register__submit,button[name="update_cart"],.woocommerce-mini-cart__buttons .button:not(.checkout),.comment-form .submit,.single_add_to_cart_button,.add_to_cart_button,.add-to-cart-loop,.wd-add-btn>a,.wd-sticky-add-to-cart,.checkout-button,#place_order,.woocommerce-mini-cart__buttons .checkout):not(.btn-size-small){min-height:44px !important} .wd :is(.btn.btn-style-default,.btn-default,.btn-accent:not(.checkout-button),.woocommerce-form-register__submit,button[name="update_cart"],.woocommerce-mini-cart__buttons .button:not(.checkout),.comment-form .submit,.single_add_to_cart_button,.add_to_cart_button,.add-to-cart-loop,.wd-add-btn>a,.wd-sticky-add-to-cart,.checkout-button,#place_order,.woocommerce-mini-cart__buttons .checkout):focus-visible{outline:2px solid #0e0f12 !important;outline-offset:3px} .wd :is(.btn.btn-style-default,.btn-default,.btn-accent:not(.checkout-button),.woocommerce-form-register__submit,button[name="update_cart"],.woocommerce-mini-cart__buttons .button:not(.checkout),.comment-form .submit,.single_add_to_cart_button,.add_to_cart_button,.add-to-cart-loop,.wd-add-btn>a,.wd-sticky-add-to-cart,.checkout-button,#place_order,.woocommerce-mini-cart__buttons .checkout).loading{color:transparent !important} .wd :is(.btn.btn-style-default,.btn-default,.btn-accent:not(.checkout-button),.woocommerce-form-register__submit,button[name="update_cart"],.woocommerce-mini-cart__buttons .button:not(.checkout),.comment-form .submit,#hv-x):hover{background-color:#e62222 !important;border-color:#e62222 !important;color:#fff !important} .wd .wd-page-content :is(.single_add_to_cart_button,.add_to_cart_button,.add-to-cart-loop,.wd-add-btn>a,.wd-sticky-add-to-cart,.checkout-button,#place_order,.woocommerce-mini-cart__buttons .checkout),.wd :is(.single_add_to_cart_button,.add_to_cart_button,.add-to-cart-loop,.wd-add-btn>a,.wd-sticky-add-to-cart,.checkout-button,#place_order,.woocommerce-mini-cart__buttons .checkout){border-color:#017d50 !important} .wd .wd-page-content :is(.single_add_to_cart_button,.add_to_cart_button,.add-to-cart-loop,.wd-add-btn>a,.wd-sticky-add-to-cart,.checkout-button,#place_order,.woocommerce-mini-cart__buttons .checkout):hover,.wd :is(.single_add_to_cart_button,.add_to_cart_button,.add-to-cart-loop,.wd-add-btn>a,.wd-sticky-add-to-cart,.checkout-button,#place_order,.woocommerce-mini-cart__buttons .checkout):hover{background-color:#006440 !important;border-color:#006440 !important;color:#fff !important} .wd :is(.btn.btn-style-default,.btn-default,.btn-accent:not(.checkout-button),.woocommerce-form-register__submit,button[name="update_cart"],.woocommerce-mini-cart__buttons .button:not(.checkout),.comment-form .submit,.single_add_to_cart_button,.add_to_cart_button,.add-to-cart-loop,.wd-add-btn>a,.wd-sticky-add-to-cart,.checkout-button,#place_order,.woocommerce-mini-cart__buttons .checkout):is(.disabled,:disabled,[disabled]){background-color:#fff !important;color:#8a8d93 !important;border-color:#d4d4d8 !important;cursor:not-allowed} /* the chevron icons in Elementor buttons are blue demo SVGs: ink on white, white on hover */ .wd .btn.btn-style-default .wd-btn-icon img{filter:brightness(0)} .wd .btn.btn-style-default:hover .wd-btn-icon img{filter:brightness(0) invert(1)} /* round icon buttons match the ink cart circle in the header */ .wd .searchform[class*=wd-style-with-bg] .searchsubmit{background-color:#0e0f12 !important} .wd .searchform[class*=wd-style-with-bg] .searchsubmit:hover{background-color:#e62222 !important} /* quantity -/+ hover in ink instead of red */ .wd div.quantity .btn{--btn-bgcolor-hover:#0e0f12;--btn-brd-color-hover:#0e0f12} /* buy buttons: green text as well as the green border (#017d50 is 5.2:1 on white); white on the hover fill */ .wd :is(.single_add_to_cart_button,.add_to_cart_button,.add-to-cart-loop,.wd-add-btn>a,.wd-sticky-add-to-cart,.checkout-button,#place_order,.woocommerce-mini-cart__buttons .checkout,#hv-y){color:#017d50 !important;--btn-accented-color:#017d50;--btn-color:#017d50} /* stock status: green everywhere (the card tick used the red primary colour) */ .wd p.stock.in-stock,.wd p.stock.wd-style-default.in-stock:before{color:#017d50 !important} /* header Blog pill follows the outline button system */ .wd li.hv-blog-btn>a{background:#fff !important;color:#0e0f12 !important;box-shadow:inset 0 0 0 2px #0e0f12;border-radius:6px} .wd li.hv-blog-btn>a:hover{background:#e62222 !important;color:#fff !important;box-shadow:inset 0 0 0 2px #e62222} /* === HV card buy buttons + mobile scale 2026-09-23 === 1. Add to basket inside PRODUCT CARDS (home, category, related): green border + green text, dark-green fill on hover, same as the product page button (unified 2026-09-23 on request). (.wd.wd.wd + #hv-z lift the rule above the green buy-button rules.) 2. Google sign-in follows the outline system; the white square keeps Google's G visible. 3. Phones (a,#hv-z){border-color:#017d50 !important;color:#017d50 !important;--btn-accented-color:#017d50;--btn-color:#017d50} .wd.wd.wd :is(.add-to-cart-loop,.add_to_cart_button,.wd-add-btn>a,#hv-z):hover{background-color:#006440 !important;border-color:#006440 !important;color:#fff !important} .wd .wd-social-login .login-goo-link{--wd-social-btn-bg:#fff;background-color:#fff !important;color:#0e0f12 !important;border:2px solid #0e0f12 !important;border-radius:6px !important} .wd .wd-social-login .login-goo-link:hover{background-color:#e62222 !important;border-color:#e62222 !important;color:#fff !important} @media (max-width:768px){ :root{--wd-text-font-size:15px} .wd :is(.btn.btn-style-default,.btn-default,.btn-accent:not(.checkout-button),.woocommerce-form-register__submit,button[name="update_cart"],.woocommerce-mini-cart__buttons .button:not(.checkout),.comment-form .submit,.wd-social-login .login-goo-link,.single_add_to_cart_button,.add_to_cart_button,.add-to-cart-loop,.wd-add-btn>a,.wd-sticky-add-to-cart,.checkout-button,#place_order,.woocommerce-mini-cart__buttons .checkout,#hv-m):not(.btn-size-small){min-height:40px !important;font-size:13px !important} .wd.wd.wd :is(.add-to-cart-loop,.add_to_cart_button,.wd-add-btn>a,#hv-m){min-height:36px !important;height:36px !important;font-size:12.5px !important;padding-inline:8px !important} .wd .btn.btn-style-default:not(.btn-size-small){padding-inline:14px !important} .wd.wd.wd :is(.single_add_to_cart_button,#hv-p){min-height:44px !important;height:44px !important;font-size:14px !important} .single-product :is(.summary-inner,.wd-single-add-cart) div.quantity :is(input,.btn){height:44px !important;min-height:44px !important} .wd.wd.wd :is(.checkout-button,#place_order,#hv-p){min-height:44px !important;font-size:14px !important} .single-product .summary-inner>.price,.single-product .wd-single-price .price{font-size:24px !important} .single-product .product_title{font-size:20px !important;line-height:1.25} .wd :is(h2.elementor-heading-title,.wd-page-content h2){font-size:18px} .wd :is(.cart_totals,.woocommerce-checkout-review-order,.e-cart-totals,.shop_table){font-size:14px} .wd .cart_totals h2,.wd .e-cart-totals h2{font-size:17px !important} .wd :is(input[type=text],input[type=email],input[type=tel],input[type=password],input[type=search],input[type=number],select,textarea){font-size:16px} } /* HV OOS ETA 2026-09-23: no "get it by" promise on products we cannot ship */ .product.outofstock .hv-eta-line,.product.onbackorder .hv-eta-line{display:none!important} /* hv-cookie-banner-compact-phone */ /* Cookie banner (CookieYes) on phones, 13 Oct 2026 at the owner's request: same text and the same three choices with equal-size buttons in one row, about 160px tall instead of 342px. */ @media (max-width:767px){ .cky-consent-container .cky-consent-bar{padding:10px 0 12px !important} .cky-consent-container .cky-title{font-size:15px !important;line-height:1.3 !important;margin:0 0 4px !important;padding:0 16px !important} .cky-consent-container .cky-notice-des{padding:0 16px !important} .cky-consent-container .cky-notice-des,.cky-consent-container .cky-notice-des p{font-size:12.5px !important;line-height:1.4 !important;margin:0 !important} .cky-consent-container .cky-notice-btn-wrapper{flex-direction:row !important;flex-wrap:nowrap !important;gap:6px !important;padding:0 16px !important;margin-top:8px !important} .cky-consent-container .cky-notice-btn-wrapper .cky-btn{flex:1 1 0 !important;width:auto !important;min-width:0 !important;margin:0 !important;padding:6px 4px !important;font-size:13px !important;min-height:38px !important;line-height:1.2 !important} /* while the banner is open, lift the chat button above it so it does not cover "Accept All" */ html body:has(.cky-consent-container:not(.cky-hide)) #zsiq_float,html body:has(.cky-consent-container:not(.cky-hide)) .zsiq_floatmain{bottom:158px !important;transition:bottom .2s} } /* 18 Oct 2026: phone tables as stacked rows. Tables with class hv-stack show each row as a block on phones; every cell after the first carries data-label with its column name. Built by the 18 Oct fix pass. */ @media (max-width:600px){ html body.single-post .hv-tbl-wrap .hv-tbl.hv-stack{display:block;min-width:0;width:100%;overflow:visible} html body.single-post .hv-tbl-wrap .hv-tbl.hv-stack :is(thead,tbody,tr,th,td){display:block;width:auto;max-width:none;white-space:normal} html body.single-post .hv-tbl-wrap .hv-tbl.hv-stack :is(thead,tr.hv-head){display:none} html body.single-post .hv-tbl-wrap .hv-tbl.hv-stack tr{padding:14px 16px;border-bottom:1px solid #e6e9f0} html body.single-post .hv-tbl-wrap .hv-tbl.hv-stack tbody tr:last-child{border-bottom:0} html body.single-post .hv-tbl-wrap .hv-tbl.hv-stack :is(th,td){padding:0;border:0;background:none} html body.single-post .hv-tbl-wrap .hv-tbl.hv-stack :is(th,td):first-child{font-size:1.06em;font-weight:700;color:var(--ink,#16191f);margin-bottom:6px} html body.single-post .hv-tbl-wrap .hv-tbl.hv-stack :is(th,td):not(:first-child){margin-top:8px} html body.single-post .hv-tbl-wrap .hv-tbl.hv-stack [data-label]:not(:first-child)::before{content:attr(data-label);display:block;font-size:.7em;letter-spacing:.08em;text-transform:uppercase;color:#6b7480;font-weight:700;margin-bottom:2px} /* charts: readable on phones, swipe sideways; the minimum width is set per chart in --hv-chart-w */ html body.single-post .hv-chart-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch} html body.single-post .hv-chart-scroll svg{min-width:var(--hv-chart-w,640px);height:auto} } /* 18 Oct 2026: a small hint under charts that scroll sideways on phones */ @media (max-width:600px){ html body.single-post .hv-chart-scroll::after{content:"Swipe sideways to see all of it \2192";position:sticky;left:0;display:block;width:max-content;font-size:12px;letter-spacing:.02em;color:#6b7480;margin:6px 0 4px;padding:0 2px} } /* 18 Oct 2026: house tables whose first column holds sentences, not labels (class hv-wrap1) */ html body.single-post .hv-tbl.hv-wrap1 :is(th,td):first-child{white-space:normal;width:auto} /* 18 Oct 2026 (2): calmer, consistent type in stacked rows: one weight per role, values at body size, no bold inside values */ @media (max-width:600px){ html body.single-post .hv-tbl-wrap .hv-tbl.hv-stack{font-size:1em} html body.single-post .hv-tbl-wrap .hv-tbl.hv-stack :is(th,td){line-height:1.6;color:var(--body,#39414d)} html body.single-post .hv-tbl-wrap .hv-tbl.hv-stack :is(th,td):first-child{font-size:1.04em;font-weight:600;color:var(--ink,#16191f);line-height:1.4;margin-bottom:8px} html body.single-post .hv-tbl-wrap .hv-tbl.hv-stack [data-label]:not(:first-child)::before{font-size:.72em;font-weight:500;letter-spacing:.1em;color:#6b7480;margin-bottom:3px} html body.single-post .hv-tbl-wrap .hv-tbl.hv-stack [data-label]:not(:first-child) :is(strong,b){font-weight:inherit;color:inherit} } /* 18 Oct 2026 (3): short-value stacked tables (class hv-kv) read like a spec sheet: label left, value right; row headings in ink, links included */ @media (max-width:600px){ html body.single-post .hv-tbl-wrap .hv-tbl.hv-stack.hv-kv [data-label]:not(:first-child){position:relative;padding-left:40%;margin-top:7px;min-height:1.5em} html body.single-post .hv-tbl-wrap .hv-tbl.hv-stack.hv-kv [data-label]:not(:first-child)::before{position:absolute;left:0;top:.42em;width:37%;margin:0;line-height:1.35} html body.single-post .hv-tbl-wrap .hv-tbl.hv-stack :is(th,td):first-child a{color:inherit} }