/* =====================================================================================================
   WriteBest standards (2026-10-07). One place for the site's colours, type, buttons and form fields.
   Change the values in :root and the whole site follows. Loaded last on every page; remove its <link> to switch it off.
   ===================================================================================================== */
:root {
    --wb-red: #c43030;            /* the one brand red: buttons, links, accents */
    --wb-black: #000;             /* secondary colour: dark bands, secondary buttons */
    --wb-white: #fff;
    --wb-heading: #000;           /* headings */
    --wb-text: #333;              /* body copy */
    --wb-muted: #757575;          /* captions, secondary copy */
    --wb-placeholder: #909090;
    --wb-line: #e5e5e5;
    --wb-field-border: #d0d0d0;
    --wb-soft: #f9f9f9;
    --wb-wa: #25d366;             /* WhatsApp only */
    --wb-font: 'Geomanist_r', sans-serif;            /* reading text */
    --wb-font-strong: 'Geomanist', sans-serif;       /* headings, buttons */

    --wb-h1: 40px; --wb-h1-lh: 48px;                 /* page / hero heading */
    --wb-h2: 32px; --wb-h2-lh: 40px;                 /* section heading */
    --wb-h2-sub: 24px; --wb-h2-sub-lh: 32px;        /* group heading inside a list */
    --wb-faq-q: 20px; --wb-faq-q-lh: 28px;          /* Q&A question */
    --wb-h3: 18px; --wb-h3-lh: 26px;                 /* card title */
    --wb-body: 16px; --wb-body-lh: 24px;             /* body copy */
    --wb-small: 14px; --wb-small-lh: 21px;           /* card text, captions */
    --wb-caption: 13px; --wb-caption-lh: 18px;

    --wb-btn-h: 48px; --wb-btn-pad: 10px 32px; --wb-btn-radius: 999px;
    --wb-field-h: 48px; --wb-field-radius: 4px; --wb-field-size: 16px; --wb-field-lh: 24px;
}
@media (max-width: 767px) { :root { --wb-h1: 32px; --wb-h1-lh: 40px; --wb-h2: 28px; --wb-h2-lh: 36px; } }

/* ---------- buttons: one shape (pill), one size, no arrows ---------- */
.btn-slider, .btn-slider-education, .btn-slider-custom, .enquire-btn, .enquire2-btn, .request-btn, .request-btn-whatsapp, .modal-btn, .contact-page-send-btn, .contact-page-send-btn-c, .backtoproduct_btn, .e3_benefits_btn, .wb-drawer-wa, .wbb-btn, .wb-btn {
    display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px;
    box-sizing: border-box !important; min-height: var(--wb-btn-h) !important; height: auto !important;
    padding: var(--wb-btn-pad) !important; border: 2px solid transparent !important; border-radius: var(--wb-btn-radius) !important;
    font-family: var(--wb-font-strong) !important; font-size: 16px !important; line-height: 24px !important; font-weight: normal !important;
    letter-spacing: 0 !important; text-transform: none !important; text-decoration: none !important; box-shadow: none !important;
    cursor: pointer; transition: filter .15s;
}
.btn-slider, .btn-slider-education, .btn-slider-custom, .enquire2-btn, .request-btn, .modal-btn, .contact-page-send-btn, .contact-page-send-btn-c, .backtoproduct_btn { background: var(--wb-red) !important; border-color: var(--wb-red) !important; color: #fff !important; }
.enquire-btn { background: #fff !important; border-color: #fff !important; color: var(--wb-red) !important; }
.request-btn-whatsapp, .wb-drawer-wa, .wbb-btn--wa { background: var(--wb-wa) !important; border-color: var(--wb-wa) !important; color: #fff !important; }
/* hover: darken the button's background only (a filter would grey the white text too); the old hover filters from other stylesheets are switched off */
:is(.btn-slider, .btn-slider-education, .btn-slider-custom, .enquire-btn, .enquire2-btn, .request-btn, .request-btn-whatsapp, .modal-btn, .contact-page-send-btn, .contact-page-send-btn-c, .backtoproduct_btn, .e3_benefits_btn, .wb-drawer-wa, .wbb-btn, .wb-btn):hover { filter: none !important; }
:is(.btn-slider, .btn-slider-education, .btn-slider-custom, .enquire2-btn, .request-btn, .modal-btn, .contact-page-send-btn, .contact-page-send-btn-c, .backtoproduct_btn):hover { background: #ab2929 !important; border-color: #ab2929 !important; }
.enquire-btn:hover { background: #f2f2f2 !important; border-color: #f2f2f2 !important; }
:is(.request-btn-whatsapp, .wb-drawer-wa, .wbb-btn--wa):hover { background: #1fb457 !important; border-color: #1fb457 !important; }
.wb-btn:hover { background: #333 !important; border-color: #333 !important; }
.contacts_button, .contacts_button.waze { display: inline-flex !important; align-items: center; justify-content: center; min-height: 40px !important; height: auto !important; padding: 8px 20px !important; border-radius: var(--wb-btn-radius) !important; font-family: var(--wb-font-strong) !important; font-size: 14px !important; line-height: 21px !important; }
.post-filter { border-radius: var(--wb-btn-radius) !important; font-size: 16px !important; line-height: 24px !important; }
/* no arrow inside any button (a leftover icon or a generated one) */
:is(.btn-slider, .btn-slider-education, .btn-slider-custom, .enquire-btn, .enquire2-btn, .request-btn, .request-btn-whatsapp, .modal-btn, .contact-page-send-btn, .contact-page-send-btn-c, .backtoproduct_btn, .e3_benefits_btn, .wb-drawer-wa, .wbb-btn, .wb-btn) i[class*="arrow"], :is(.btn-slider, .btn-slider-education, .btn-slider-custom, .enquire-btn, .enquire2-btn, .request-btn, .request-btn-whatsapp, .modal-btn, .contact-page-send-btn, .contact-page-send-btn-c, .backtoproduct_btn, .e3_benefits_btn, .wb-drawer-wa, .wbb-btn, .wb-btn) i[class*="angle"], :is(.btn-slider, .btn-slider-education, .btn-slider-custom, .enquire-btn, .enquire2-btn, .request-btn, .request-btn-whatsapp, .modal-btn, .contact-page-send-btn, .contact-page-send-btn-c, .backtoproduct_btn, .e3_benefits_btn, .wb-drawer-wa, .wbb-btn, .wb-btn) i[class*="chevron"] { display: none !important; }
:is(.btn-slider, .btn-slider-education, .btn-slider-custom, .enquire-btn, .enquire2-btn, .request-btn, .request-btn-whatsapp, .modal-btn, .contact-page-send-btn, .contact-page-send-btn-c, .backtoproduct_btn, .e3_benefits_btn, .wb-drawer-wa, .wbb-btn, .wb-btn)::after, :is(.btn-slider, .btn-slider-education, .btn-slider-custom, .enquire-btn, .enquire2-btn, .request-btn, .request-btn-whatsapp, .modal-btn, .contact-page-send-btn, .contact-page-send-btn-c, .backtoproduct_btn, .e3_benefits_btn, .wb-drawer-wa, .wbb-btn, .wb-btn)::before { content: none !important; }

/* ---------- form fields: one height, font, border and focus ---------- */
.input_contact, .select_contact, .textarea_modal, .contacts_form textarea, .contacts_form input, .wb-drawer input[type=text], .wb-drawer input[type=email],
.wb-drawer input[type=tel], .wb-drawer select, .wb-drawer textarea, #myModal input[type=text], #myModal input[type=email], #myModal input[type=tel],
#myModal select, #myModal textarea, .wb-product-search-input {
    box-sizing: border-box !important; border: 1px solid var(--wb-field-border) !important; border-radius: var(--wb-field-radius) !important;
    background-color: #fff; font-family: var(--wb-font) !important; font-size: var(--wb-field-size) !important; line-height: var(--wb-field-lh) !important;
    color: #000 !important; box-shadow: none;
}
.input_contact, .select_contact, .wb-drawer input[type=text], .wb-drawer input[type=email], .wb-drawer input[type=tel], .wb-drawer select,
#myModal input[type=text], #myModal input[type=email], #myModal input[type=tel], #myModal select, .wb-product-search-input { height: var(--wb-field-h) !important; }
.input_contact, .wb-drawer input[type=text], .wb-drawer input[type=email], .wb-drawer input[type=tel], #myModal input[type=text], #myModal input[type=email], #myModal input[type=tel] { padding: 0 16px !important; }
.select_contact, .wb-drawer select, #myModal select { padding: 0 12px !important; }
.textarea_modal, .contacts_form textarea, .wb-drawer textarea, #myModal textarea { min-height: 120px; padding: 12px 16px !important; }
.input_contact::placeholder, .textarea_modal::placeholder, .contacts_form textarea::placeholder, .wb-drawer input::placeholder, .wb-drawer textarea::placeholder,
#myModal input::placeholder, #myModal textarea::placeholder, .wb-product-search-input::placeholder { color: var(--wb-placeholder); opacity: 1; }
.input_contact:focus, .select_contact:focus, .textarea_modal:focus, .contacts_form textarea:focus, .wb-drawer input:focus, .wb-drawer select:focus,
.wb-drawer textarea:focus, #myModal input:focus, #myModal select:focus, #myModal textarea:focus, .wb-product-search-input:focus {
    outline: 0; border-color: var(--wb-red) !important; box-shadow: 0 0 0 3px rgba(196, 48, 48, .15);
}

/* ---------- headings ---------- */
.slider__text45_h1, .caption_product_text, .caption_e3_text, [class*="slider__text-"] h1, [class*="slider__text-"] h2, .section-title h1, .accordions h1, body h1:not([class]):not(header *):not(footer *):not(#footer *):not(nav *):not(.ab2 *):not(.mega-menu *):not(.wb-drawer *):not(#myModal *):not(.article-body *):not(.features_items.cd-section *):not([class*="slider__text"] *):not(#contact *):not(#newsletter *):not(.wb-news *):not(.section-title *):not(.wbb-hero *):not(.accordions *) { font-family: var(--wb-font-strong); font-size: var(--wb-h1) !important; line-height: var(--wb-h1-lh) !important; font-weight: normal; letter-spacing: -.01em; }
h2.articles_headline2, h2.whywb_h2, h2.h2-black, h2.card-body-actircle-text, .wb-cats-head h2, .wbb-head h2, .wbd-head h2, h2.prouctdetails_h2, h2.productdetails_h2s, body h2:not([class]):not(header *):not(footer *):not(#footer *):not(nav *):not(.ab2 *):not(.mega-menu *):not(.wb-drawer *):not(#myModal *):not(.article-body *):not(.features_items.cd-section *):not([class*="slider__text"] *):not(#contact *):not(#newsletter *):not(.wb-news *):not(.section-title *):not(.wbb-hero *):not(.accordions *) { font-family: var(--wb-font-strong); font-size: var(--wb-h2) !important; line-height: var(--wb-h2-lh) !important; font-weight: normal; }
.features_items.cd-section > h2 { font-size: var(--wb-h2-sub) !important; line-height: var(--wb-h2-sub-lh) !important; color: var(--wb-heading) !important; }
/* product listing, category groups (Option A): no hairline, the space between groups separates them.
   Heading row = category name + small muted count. */
.features_items.cd-section { padding-top: 96px !important; }
.features_items.cd-section > h2 { display: flex; align-items: baseline; gap: 12px; margin: 0 0 32px !important; padding: 0 !important; border: 0 !important; }
.features_items.cd-section > h2[data-count]::after { content: attr(data-count); font-family: var(--wb-font); font-size: var(--wb-small); line-height: var(--wb-small-lh); color: var(--wb-muted); }
@media (max-width: 767px) { .features_items.cd-section { padding-top: 72px !important; } }
.product_card_h3, .sl-header-wrapper h3, .industry_leader_h3, .prouctdetails_h3 { font-family: var(--wb-font-strong); font-size: var(--wb-h3) !important; line-height: var(--wb-h3-lh) !important; color: var(--wb-heading) !important; }
[class*="slider__text"] h3 { font-size: var(--wb-body) !important; line-height: var(--wb-body-lh) !important; }

/* ---------- body copy ---------- */
body p:not([class]):not(header *):not(footer *):not(#footer *):not(nav *):not(.ab2 *):not(.mega-menu *):not(.wb-drawer *):not(#myModal *):not(.article-body *):not(.features_items.cd-section *):not([class*="slider__text"] *):not(#contact *):not(#newsletter *):not(.wb-news *):not(.section-title *):not(.wbb-hero *):not(.accordions *) { font-family: var(--wb-font); font-size: var(--wb-body); line-height: var(--wb-body-lh); }
.product_card_p, .sl-header-wrapper p, .wbd-addr { font-size: var(--wb-small) !important; line-height: var(--wb-small-lh) !important; color: var(--wb-muted) !important; }
.left_sidebar_p, .left_sidebar_p p { font-size: var(--wb-body) !important; line-height: var(--wb-body-lh) !important; color: var(--wb-heading) !important; }
.wbd-city { font-size: var(--wb-h3) !important; line-height: var(--wb-h3-lh) !important; color: var(--wb-heading) !important; }
.wbd-tag { font-size: var(--wb-caption) !important; line-height: var(--wb-caption-lh) !important; color: var(--wb-muted) !important; }
p.card-body-actircle-text { font-size: var(--wb-body) !important; line-height: var(--wb-body-lh) !important; color: var(--wb-text) !important; }
/* headings that were a grey: all black */
.accordion-header h2, .accordions h1, .wbd-head h2, .wb-cats-head h2, .wbb-head h2, .wb-qp-head h1, .wb-qp-head h2 { color: var(--wb-heading) !important; }

/* ---------- Q&A (FAQ) accordion: one look on every page, taken from the Writing Board category page ----------
   Markup: <div class="accordions"> [h1|h2.accordions-title] + one <div class="accordion"> per question
           (<div class="accordion-header"><h2>Question</h2></div><div class="accordion-item"><p>Answer</p></div>).
   js/wb-faq.js opens and closes them (click, Enter or Space). Change the look here, nowhere else. */
.accordions { clear: both; margin: 70px 0 130px; }
.accordions > h1, .accordions > .accordions-title { margin: 0 0 30px !important; font-family: var(--wb-font-strong) !important; font-size: var(--wb-h1) !important; line-height: var(--wb-h1-lh) !important; font-weight: normal !important; letter-spacing: -.01em; color: var(--wb-heading) !important; }
.accordions .accordion-header h2 { position: relative; margin: 0 0 15px !important; padding: 10px 20px 10px 30px !important; background: var(--wb-soft); cursor: pointer; font-family: var(--wb-font-strong) !important; font-size: var(--wb-faq-q) !important; line-height: var(--wb-faq-q-lh) !important; font-weight: normal !important; letter-spacing: 0; color: var(--wb-heading) !important; }
.accordions .accordion-header h2::before { content: ""; position: absolute; top: 19px; left: 10px; width: 10px; height: 10px; background: url('/images/arrow_right.png') center / contain no-repeat; transition: transform .2s ease; }
.accordions .accordion.is-open .accordion-header h2::before { transform: rotate(90deg); }
.accordions .accordion-header:focus-visible { outline: 2px solid var(--wb-red); outline-offset: 2px; }
.accordions .accordion-item { display: none; padding: .5rem; line-height: 1.5; }
.accordions .accordion.is-open > .accordion-item { display: block; }
.accordions .accordion-item p { margin: 0 0 1em !important; font-family: var(--wb-font) !important; font-size: var(--wb-small) !important; line-height: var(--wb-small-lh) !important; color: var(--wb-text) !important; }
.accordions .accordion-item a { color: var(--wb-red); }
.accordions--flush { margin: 0; }            /* inside a section that has its own spacing */
.accordions--article { margin: 56px 0 0; }   /* at the end of a blog article */
.accordions--article .accordion-header h2, .accordions--on-soft .accordion-header h2 { background: var(--wb-white); }   /* page background is already the soft grey: bars go white */
@media (prefers-reduced-motion: reduce) { .accordions .accordion-header h2::before { transition: none; } }

/* ---------- product cards: the picture grows a little when you point at the card ---------- */
.single-products .productinfo img { transition: transform .4s ease !important; transform-origin: center center; }
@media (hover: hover) { .single-products:hover .productinfo img { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .single-products .productinfo img { transition: none !important; } .single-products:hover .productinfo img { transform: none; } }