/* ==========================================================================
   VARILIGHT site stylesheet
   ==========================================================================
   Loaded on every page by includes/head.php, after Bootstrap 3.

   Page layout uses the Bootstrap 3 grid (row / col-*). This file only adds:
     - the full-width band pattern (.vl-band + .vl-wrap), see section 3
     - components, all prefixed "vl-" so they never clash with Bootstrap

   Contents
     1. Colours and sizes (tokens)
     2. Base
     3. Layout: bands, frame, page title bar
     4. Buttons and links
     5. Header
     6. Main navigation
     7. Footer
     8. Content: prose, tables, cards, tiles, notes, video, layout kit
     9. Home page
    10. Data sheets (configurator/product.php)
    11. Product listings (range finish pages, online catalogue)
    12. Technical pages (FAQs, leaflets, compliance documents)
    13. About, buying, stockist finder, glossary and news pages
    14. Search and type-ahead suggestions
    15. Utilities
    16. Print
    17. Dark theme (tokens swapped when <html data-theme="dark">)
   ========================================================================== */


/* ==========================================================================
   1. Colours and sizes (tokens)
   Use these variables instead of typing colours.
   ========================================================================== */

/* Stand-in for Lato while it downloads: the computer's own Arial, resized to Lato's width and line height, so the
   text doesn't move when Lato arrives. That swap caused almost all of the pages' layout shift (a Core Web Vitals
   score search engines use): 0.10 on the online catalogue, about 0.005 elsewhere (measured October 2026). Sizes
   measured against Lato 300, 400 and 700 (Arial Bold for 700). Devices without Arial (Android) use their own
   sans-serif as before. */
@font-face { font-family: 'Lato Fallback'; src: local('Arial'), local('ArialMT'); font-weight: 300; size-adjust: 95.45%; ascent-override: 103.4%; descent-override: 22.32%; line-gap-override: 0%; }
@font-face { font-family: 'Lato Fallback'; src: local('Arial'), local('ArialMT'); font-weight: 400; size-adjust: 97.49%; ascent-override: 101.24%; descent-override: 21.85%; line-gap-override: 0%; }
@font-face { font-family: 'Lato Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 700; size-adjust: 94%; ascent-override: 105%; descent-override: 22.66%; line-gap-override: 0%; }
:root {
    --vl-navy: #12165a;          /* header, dark bands */
    --vl-navy-deep: #0b0e3f;     /* footer */
    --vl-indigo: #33329a;        /* buttons, links, accents */
    --vl-indigo-hover: #4342b6;
    --vl-sky: #66b0ef;           /* highlights on navy, focus rings */
    --vl-ink: #1b1d3a;           /* body text */
    --vl-slate: #5a5f7a;         /* secondary text */
    --vl-mist: #f2f3f8;          /* light grey bands and panels */
    --vl-line: #e1e3ec;          /* borders */
    --vl-notice-bg: #fff4e0;     /* warnings */
    --vl-notice-ink: #6b4600;

    --vl-surface: #f7f8fb;       /* soft backdrop behind product pictures (between white and mist) */
    --vl-paper: #fff;            /* the page and white bands */
    --vl-card: #fff;             /* cards, inputs, chips and menus that sit on the page */
    --vl-photo: #fff;            /* behind product photos (stays light in the dark theme: photos have white backgrounds) */
    --vl-on-accent: #fff;        /* text on an indigo fill (buttons, selected chips) */
    --vl-chosen: #eef0fa;        /* pale indigo tint: chosen options, notes, filter bars */
    --vl-hover: #fafbfd;         /* table row hover, row headings */
    --vl-glass: rgba(255, 255, 255, 0.96);   /* sticky bars over the page */
    --vl-off: #8a8ea8;           /* unavailable options */
    --vl-notice-mark: #b07400;   /* warning icons and over-limit meters */
    --vl-line-soft: rgba(18, 22, 90, 0.08);   /* hairlines on white */

    --vl-font: 'Lato', 'Lato Fallback', 'Helvetica Neue', Arial, sans-serif;   /* one typeface for everything ('Lato Fallback': below) */
    --vl-display: 300;           /* weight of large headings (page titles, section titles, hero) */

    --vl-frame: 1920px;                      /* widest content width (George, Oct 2026: use wide screens) */
    --vl-gutter: clamp(20px, 4vw, 80px);     /* side padding, lines up with the header */
    --vl-band-pad: clamp(40px, 5vw, 80px);   /* space above and below each band */
    --vl-radius: 12px;
    --vl-radius-lg: 16px;

    /* Shadows: soft and layered, tinted with the navy so they sit naturally on the page */
    --vl-shadow-sm: 0 1px 2px rgba(18, 22, 90, 0.04), 0 2px 8px rgba(18, 22, 90, 0.04);
    --vl-shadow-md: 0 2px 6px rgba(18, 22, 90, 0.04), 0 14px 36px rgba(18, 22, 90, 0.10);
    --vl-shadow-lg: 0 4px 12px rgba(18, 22, 90, 0.06), 0 28px 64px rgba(18, 22, 90, 0.16);

    /* Motion: a gentle ease-out used for every hover and transition */
    --vl-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --vl-speed: .28s;
}


/* ==========================================================================
   2. Base
   ========================================================================== */
body {
    background: var(--vl-paper);
    color: var(--vl-ink);
    font-family: var(--vl-font);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--vl-font);
    font-weight: 700;
    color: var(--vl-ink);
    letter-spacing: -0.01em;
}
h1 { font-weight: var(--vl-display); letter-spacing: -0.02em; }
::selection { background: var(--vl-sky); color: var(--vl-navy); }
a { color: var(--vl-indigo); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color var(--vl-speed) var(--vl-ease); }
a:hover, a:focus { color: var(--vl-indigo-hover); }
a:focus, button:focus { outline: none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
    outline: 2px solid var(--vl-sky);
    outline-offset: 3px;
}
img { max-width: 100%; height: auto; }

/* Hover lift: cards rise a little and their pictures ease in, on devices with a mouse only */
@media (hover: hover) {
    a.vl-card:hover, .vl-tile:hover, .vl-plate:hover, .vl-pcard:hover { transform: translateY(-3px); }
    .vl-dcard:hover { transform: translateY(-4px); }
    .vl-btn--primary:hover { transform: translateY(-1px); }
    .vl-plate:hover img, .vl-pcard:hover .vl-pcard-img img, .vl-dcard:hover .vl-dcard-img img { transform: scale(1.04); }
}

/* "Skip to content" link for keyboard users, visible only when focused */
.vl-skip { position: absolute; left: -9999px; top: 8px; z-index: 2000; padding: 8px 16px; border-radius: 20px; background: #fff; color: var(--vl-navy); font-weight: 700; }
.vl-skip:focus { left: 8px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}


/* ==========================================================================
   3. Layout: bands, frame, page title bar

   Every page is a stack of full-width bands. Inside each band, .vl-wrap holds
   the content to the same 1920px frame as the header, and Bootstrap rows and
   columns go inside that:

     <section class="vl-band vl-band--mist">        full width, coloured
         <div class="vl-wrap">                       1920px frame with side padding
             <div class="row">
                 <div class="col-md-8"> ... </div>
             </div>
         </div>
     </section>

   Band colours: (none) white, --mist light grey, --navy dark blue.
   ========================================================================== */
.vl-wrap {
    width: 100%;
    max-width: var(--vl-frame);
    margin: 0 auto;
    padding-left: var(--vl-gutter);
    padding-right: var(--vl-gutter);
}
.vl-band { padding: var(--vl-band-pad) 0; background: var(--vl-paper); }
.vl-band--tight { padding: clamp(32px, 4vw, 56px) 0; }
.vl-band--mist { background: var(--vl-mist); }
.vl-band--navy { background: var(--vl-navy); color: rgba(255, 255, 255, 0.86); }
.vl-band--navy h1, .vl-band--navy h2, .vl-band--navy h3 { color: #fff; }
.vl-band--navy a { color: var(--vl-sky); }
.vl-band--navy a:hover, .vl-band--navy a:focus { color: #fff; }
/* after the band colours.
   (1) The first band under the title bar: the bar already separates it, so it needs less space above
   its content than a band between two bands (80px at 1920 read as "empty space above the text").
   Bands that set their own top padding keep it: the stockist finder (40px) and --tight bands (the data
   sheets and FAQ pages, already 56px at most).
   (2) Two grey bands in a row (a grey section, then the grey "More help" strip on
   about-us/lifetime-guarantee.php) read as one band with a double gap (2 x 80px); the second one drops
   its top padding, so the gap is the usual band spacing. */
.vl-pagehead + .vl-band:not(.vl-band--finder):not(.vl-band--tight) { padding-top: clamp(32px, 3.5vw, 56px); }
.vl-band--mist + .vl-band--mist { padding-top: 0; }


/* Section heading: title with an optional intro paragraph */
.vl-head { max-width: 760px; margin-bottom: 48px; }
.vl-head h2 { margin: 0; font-size: clamp(30px, 3vw, 44px); font-weight: var(--vl-display); line-height: 1.12; letter-spacing: -0.02em; }
.vl-head p { margin: 16px 0 0; color: var(--vl-slate); font-size: 18px; line-height: 1.6; }
.vl-head p + p { margin-top: 8px; }
.vl-band--navy .vl-head p { color: rgba(255, 255, 255, 0.78); }
.vl-head-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 48px; margin-bottom: 48px; }
.vl-head-row .vl-head { margin-bottom: 0; }

/* Page title bar: breadcrumb, h1 and an optional intro or tools, on a light grey band */
/* A little less air in the title bar on wide screens (60px above and below the title at 1920
   was more than a title needs). Phones keep their own padding (the max-width: 767px rule is unchanged). */
.vl-pagehead { padding: clamp(28px, 3vw, 48px) 0; background: var(--vl-mist); border-bottom: 1px solid var(--vl-line); }

.vl-pagehead--slim { padding: 18px 0; }
.vl-pagehead--slim .vl-crumbs { margin: 0; }
.vl-pagehead-grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 48px; }
/* In a title bar with a logo (vl-pagehead-grid), the title side takes the room and the logo
   keeps to its own size, so the logo always sits at the right edge, level with the title. */
.vl-pagehead-grid > div:first-child { flex: 1 1 420px; min-width: 0; }

.vl-pagehead h1 { margin: 0; font-size: clamp(30px, 3.4vw, 52px); line-height: 1.08; }
.vl-pagehead p { max-width: 820px; margin: 14px 0 0; color: var(--vl-slate); font-size: 18px; line-height: 1.6; }
.vl-pagehead p a { font-weight: 600; }

.vl-crumbs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; color: var(--vl-slate); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.vl-crumbs li + li::before { content: "/"; margin-right: 6px; color: #a3a7bf; }
.vl-crumbs a { color: var(--vl-slate); }
.vl-crumbs a:hover, .vl-crumbs a:focus { color: var(--vl-indigo); }

@media (max-width: 767px) {
    .vl-band--tight { padding: 28px 0; }
    .vl-head { margin-bottom: 28px; }
    .vl-head h2 { font-size: 28px; }
    .vl-head p { font-size: 16px; }
    .vl-pagehead { padding: 22px 0 24px; }
    .vl-pagehead h1 { font-size: 30px; }
    .vl-pagehead p { font-size: 15px; }
}


/* ==========================================================================
   4. Buttons and links
   Pill buttons: <a class="vl-btn vl-btn--primary">. Variants:
     --primary  solid indigo        --outline  indigo outline
     --light    white (on navy)     --ghost    see-through (on navy)
   ========================================================================== */
.vl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 46px;
    padding: 0 22px;
    border: 1px solid var(--vl-indigo);
    border-radius: 23px;
    background: transparent;
    color: var(--vl-indigo);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--vl-speed) var(--vl-ease), border-color var(--vl-speed) var(--vl-ease), color var(--vl-speed) var(--vl-ease), box-shadow var(--vl-speed) var(--vl-ease), transform var(--vl-speed) var(--vl-ease);
}
.vl-btn:hover, .vl-btn:focus { background: var(--vl-indigo); color: var(--vl-on-accent); text-decoration: none; }
.vl-btn--primary { background: var(--vl-indigo); color: var(--vl-on-accent); }
.vl-btn--primary:hover, .vl-btn--primary:focus { background: var(--vl-indigo-hover); border-color: var(--vl-indigo-hover); color: var(--vl-on-accent); box-shadow: 0 8px 22px rgba(51, 50, 154, 0.28); }
.vl-btn--outline { background: transparent; color: var(--vl-indigo); }
.vl-btn--light, .vl-band--navy .vl-btn--light { background: #fff; border-color: #fff; color: var(--vl-navy); }
.vl-btn--light:hover, .vl-btn--light:focus,
.vl-band--navy .vl-btn--light:hover, .vl-band--navy .vl-btn--light:focus { background: var(--vl-sky); border-color: var(--vl-sky); color: var(--vl-navy); }
.vl-btn--ghost, .vl-band--navy .vl-btn--ghost { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.4); color: #fff; }
.vl-btn--ghost:hover, .vl-btn--ghost:focus,
.vl-band--navy .vl-btn--ghost:hover, .vl-band--navy .vl-btn--ghost:focus { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.4); color: #fff; }
.vl-btn--small { height: 36px; padding: 0 16px; border-radius: 18px; font-size: 13px; }

.vl-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Phones: long button labels wrap instead of pushing the page sideways */
@media (max-width: 767px) {
    .vl-btn { height: auto; min-height: 46px; padding-top: 10px; padding-bottom: 10px; white-space: normal; text-align: center; line-height: 1.25; }
    .vl-header .vl-btn, .vl-btn--small { min-height: 36px; padding-top: 6px; padding-bottom: 6px; }
}
.vl-prose { overflow-wrap: break-word; }

/* Text link with an underline on hover */
.vl-link { font-weight: 700; }
.vl-link:hover, .vl-link:focus { text-decoration: underline; }


/* ==========================================================================
   5. Header (includes/site-header.php)
   ========================================================================== */
.vl-header-band { background: var(--vl-navy); }

.vl-header {
    --vl-muted: rgba(255, 255, 255, 0.72);
    --vl-hline: rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 14px;
    line-height: 1.4;
}
.vl-header a, .vl-header a:hover, .vl-header a:focus { text-decoration: none; }
.vl-header img { display: block; }

/* Header buttons are a size smaller than page buttons */
.vl-header .vl-btn { height: 36px; padding: 0 16px; border-radius: 18px; font-size: 13px; }

/* Logo. Shown at whole-pixel sizes so the edges stay crisp when scaled. */
.vl-logo img { width: 100%; height: auto; }

/* Product code search */
.vl-search { display: flex; align-items: center; height: 36px; margin: 0; padding-left: 16px; background: var(--vl-card); border-radius: 18px; transition: box-shadow .15s ease; }
.vl-search:focus-within { box-shadow: 0 0 0 2px var(--vl-sky); }
.vl-search input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; color: var(--vl-ink); font-size: 13px; outline: none; box-shadow: none; }
.vl-search input::placeholder { color: #6b6f8f; }
.vl-search button { width: 40px; height: 100%; padding: 0; border: 0; border-radius: 0 18px 18px 0; background: transparent; color: var(--vl-navy); cursor: pointer; }

/* Made in Britain mark is full colour, so it sits on a white tile */
.vl-mib img { width: auto; padding: 5px; background: #fff; border-radius: 6px; }

.vl-phone { color: #fff; font-size: 15px; font-weight: 700; white-space: nowrap; }
.vl-phone .fa { margin-right: 6px; color: var(--vl-sky); }
.vl-phone:hover, .vl-phone:focus { color: var(--vl-sky); }
.vl-hours { color: var(--vl-muted); font-size: 13px; white-space: nowrap; }

/* Second line under the header buttons: the support ticket, then the phone number and hours (phones: .vl-m-quick) */
.vl-bar .vl-tools-meta { display: flex; align-items: baseline; justify-content: flex-end; gap: 22px; padding-right: 4px; }
.vl-call { display: inline-flex; align-items: baseline; gap: 10px; }
.vl-bar .vl-tools-meta .vl-phone { font-size: 17px; }
/* Language suggestion bar above the header (varilight.eu English pages, js section 0b) */
.vl-lang-offer { background: var(--vl-mist); color: var(--vl-ink); font-size: 14px; }
.vl-lang-offer[hidden] { display: none; }
.vl-lang-offer .vl-wrap { display: flex; align-items: center; justify-content: center; gap: 10px 16px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
.vl-lang-offer p { margin: 0; font-weight: 600; }
.vl-lang-offer p .fa { margin-right: 8px; color: var(--vl-indigo); }
.vl-lang-offer-x { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--vl-slate); font-size: 22px; line-height: 1; cursor: pointer; }
.vl-lang-offer-x:hover, .vl-lang-offer-x:focus { background: rgba(0, 0, 0, .06); color: var(--vl-ink); }
.vl-compact .vl-lang-offer { display: none; }
/* varilight.eu's language menu, after the phone number (includes/i18n.php); the list is styled as "Get in touch" */
.vl-lang { position: relative; display: inline-block; flex-shrink: 0; align-self: center; }
.vl-lang-btn { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border: 1px solid rgba(255, 255, 255, .4); border-radius: 13px; background: transparent; color: rgba(255, 255, 255, .85); font-size: 12px; font-weight: 700; letter-spacing: .04em; line-height: 1; }
.vl-lang-btn:hover, .vl-lang-btn:focus, .vl-lang.open .vl-lang-btn { background: rgba(255, 255, 255, .14); color: #fff; }
.vl-header .vl-lang .vl-lang-menu { min-width: 170px; }
.vl-header .vl-lang .vl-lang-menu > li > a[aria-current] { background: var(--vl-mist); color: var(--vl-indigo); }

/* Desktop band */
.vl-bar { display: flex; align-items: center; gap: 28px; padding: 18px 0; }
.vl-bar .vl-logo { flex: 0 0 210px; }
.vl-bar .vl-badges { display: flex; align-items: center; gap: 14px; }   /* no divider line: removed on request */
.vl-bar .vl-guarantee img { height: 84px; width: auto; }
.vl-bar .vl-mib img { height: 76px; }
.vl-bar .vl-tools { display: flex; flex-direction: column; gap: 12px; min-width: 0; margin-left: auto; }
.vl-bar .vl-tools-row { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.vl-bar .vl-tools-row .vl-search { flex: 1 1 260px; min-width: 190px; }

@media (min-width: 992px) and (max-width: 1199px) {
    .vl-bar { gap: 22px; }
    .vl-bar .vl-logo { flex-basis: 170px; }
    .vl-bar .vl-badges { gap: 12px; }
    .vl-bar .vl-guarantee img { height: 70px; }
    .vl-bar .vl-mib img { height: 62px; }
    .vl-bar .vl-tools-row .vl-search { flex-basis: 200px; }
}
@media (min-width: 768px) and (max-width: 991px) {
    .vl-bar { flex-wrap: wrap; gap: 16px 20px; padding-bottom: 14px; }
    .vl-bar .vl-logo { flex-basis: 170px; }
    .vl-bar .vl-guarantee img { height: 70px; }
    .vl-bar .vl-mib img { height: 62px; }
    .vl-bar .vl-tools { flex: 1 1 100%; margin-left: 0; }
}

/* Trustpilot rating (includes/site-header.php): a plain link to our reviews, stars drawn by the site in Trustpilot's
   green. Beside the badges on wide screens (stars over the score), in the contact line on phones (one row) */
.vl-tp { display: inline-flex; gap: 3px 6px; color: #fff; line-height: 1.2; text-decoration: none; white-space: nowrap; }
.vl-tp:hover, .vl-tp:focus { color: #fff; text-decoration: none; }
.vl-tp:focus-visible { outline: 2px solid var(--vl-sky, #66b0ef); outline-offset: 3px; border-radius: 6px; }
.vl-tp-stars { display: inline-flex; gap: 2px; color: #00b67a; }
.vl-tp-text { color: rgba(255, 255, 255, 0.82); font-size: 12px; }
.vl-tp-text strong { margin-right: 1px; color: #fff; font-size: 14px; }
.vl-tp:hover .vl-tp-text { color: #fff; text-decoration: underline; }
.vl-tp--badge { flex-direction: column; align-items: flex-start; padding: 4px 2px; }
.vl-tp--badge .vl-tp-stars { font-size: 16px; }
.vl-tp--line { align-items: baseline; }
.vl-tp--line .vl-tp-stars { font-size: 13px; }
.vl-bar .vl-badges > a { flex-shrink: 0; }   /* the badges keep their shape */
@media (min-width: 992px) and (max-width: 1199px) {
    .vl-tp--badge { display: none; }   /* no room beside the badges and tools at this width; shown wider and narrower */
}

/* Phones (George, 16 Oct 2026: "the header is really crowded on mobile"): two rows instead of five, about half the
   height. Row 1: logo, the two badges, My list and Menu. Row 2: All products and search. Messages, the phone number,
   Where to buy, Trustpilot, the language and dark mode are at the top of the menu (.vl-m-quick). */
.vl-mobile, .vl-m-quick { display: none; }
@media (max-width: 767px) {
    .vl-desktop { display: none; }
    .vl-mobile { display: flex; flex-direction: column; gap: 10px; padding: 10px 0 12px; }
    .vl-m-brand { display: flex; align-items: center; gap: 10px; }
    .vl-mobile .vl-logo { flex: 0 0 auto; width: 120px; }   /* fixed whole-pixel width: no faint edge lines */
    .vl-m-badges { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
    .vl-mobile .vl-guarantee img { height: 52px; width: auto; }
    .vl-mobile .vl-mib img { height: 50px; padding: 4px; }
    .vl-m-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
    .vl-mobile .vl-m-tools .vl-btn--icon { width: 40px; min-height: 0; padding: 0; }
    .vl-mobile .vl-m-menu .fa { font-size: 17px; }
    .vl-m-row { display: flex; gap: 8px; }
    .vl-mobile .vl-btn, .vl-mobile .vl-search { height: 40px; border-radius: 20px; }
    .vl-mobile .vl-search button { border-radius: 0 20px 20px 0; }
    .vl-m-search > .vl-btn { flex: 0 0 auto; padding: 0 18px; }
    .vl-m-search > .vl-search { flex: 1 1 auto; min-width: 0; }

    /* The top of the menu */
    .vl-m-quick { display: flex; flex-direction: column; gap: 12px; margin: 0 0 12px; }
    .vl-m-quick-row { display: flex; flex-wrap: wrap; gap: 8px; }   /* side by side; one above the other when the words are long */
    .vl-m-quick-row > .vl-btn { flex: 1 1 auto; height: 40px; padding: 0 16px; border-radius: 20px; justify-content: center; white-space: nowrap; }
    .vl-m-quick-row > .vl-btn .fa { margin-right: 7px; }
    .vl-m-quick-call { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 2px 12px; margin: 0; text-align: center; }
    .vl-m-quick-call .vl-phone { font-size: 18px; }
    .vl-header .vl-m-quick-mail { color: var(--vl-sky); font-size: 13px; font-weight: 700; }
    .vl-header .vl-m-quick-mail:hover, .vl-header .vl-m-quick-mail:focus { color: #fff; }
    .vl-m-quick-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px; }
    .vl-m-quick-tools .vl-btn--icon { width: 40px; height: 40px; border-radius: 20px; }
}
@media (max-width: 374px) {
    .vl-mobile .vl-logo { width: 104px; }
    .vl-m-brand, .vl-m-badges, .vl-m-tools { gap: 6px; }
    .vl-mobile .vl-guarantee img { height: 44px; }
    .vl-mobile .vl-mib img { height: 42px; }
    .vl-m-search > .vl-btn { padding: 0 14px; }
}

/* Compact header: js/varilight.js adds .vl-compact once the full header scrolls away.
   The slot keeps the full header's height so the page doesn't jump. */
.vl-header-slot { position: relative; }
.vl-header.vl-compact {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    background: var(--vl-navy);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
    animation: vl-drop .25s ease;
}
@keyframes vl-drop { from { transform: translateY(-100%); } to { transform: none; } }
.vl-header.vl-compact .vl-nav { margin-bottom: 0; border-top: 0; }

@media (min-width: 768px) {
    .vl-header.vl-compact {
        display: flex;
        align-items: center;
        gap: 28px;
        padding: 0 max(var(--vl-gutter), calc(50vw - var(--vl-frame) / 2 + var(--vl-gutter)));
    }
    .vl-compact .vl-desktop, .vl-compact .vl-bar { display: contents; }
    .vl-compact .vl-bar .vl-badges, .vl-compact .vl-bar .vl-tools-meta { display: none; }
    .vl-compact .vl-bar .vl-logo { order: 1; flex: 0 0 110px; padding: 8px 0; }
    .vl-compact .vl-nav { order: 2; flex: 1 1 auto; min-width: 0; }
    .vl-compact .vl-nav .navbar-nav > li > a { padding-top: 22px; padding-bottom: 22px; }
    .vl-compact .vl-bar .vl-tools { order: 3; flex: 0 0 auto; margin-left: 0; }
    .vl-compact .vl-bar .vl-tools-row .vl-search { flex: 0 0 210px; min-width: 0; }
    .vl-compact .vl-bar .vl-tools-row .vl-btn:not(.vl-btn--primary) { display: none; }
}
@media (min-width: 768px) and (max-width: 1199px) {
    .vl-header.vl-compact { gap: 18px; }
    .vl-compact .vl-bar .vl-logo { flex-basis: 90px; }
    .vl-compact .vl-bar .vl-tools-row .vl-btn { display: none; }
    .vl-compact .vl-bar .vl-tools-row .vl-search { flex-basis: 170px; }
}
@media (min-width: 768px) and (max-width: 991px) {
    .vl-compact .vl-bar .vl-tools { display: none; }
}
@media (max-width: 767px) {
    .vl-header.vl-compact { padding: 0 20px; }
    .vl-compact .vl-mobile { padding: 8px 0; }
    .vl-compact .vl-mobile .vl-logo { width: 104px; }
    .vl-compact .vl-m-badges,
    .vl-compact .vl-m-search { display: none; }
    .vl-compact .vl-nav .navbar-collapse.in,
    .vl-compact .vl-nav .navbar-collapse.collapsing { max-height: calc(100vh - 70px); overflow-y: auto; }
}

/* Header tools row (October 2026): Search, All products, Where to buy, Get in touch, theme toggle */
/* Header buttons: icons a touch smaller than the text height */
.vl-header .vl-btn .fa { font-size: 14px; }

/* "Get in touch": a button to /help/ (includes/get-in-touch.php). .vl-contact-menu is varilight.eu's language menu: a
   Bootstrap 3 dropdown (data-toggle="dropdown"), so it opens on click, Enter or Space, the arrow keys move through
   the links and Esc closes it. */
.vl-contact { position: relative; flex: 0 0 auto; }
.vl-header .vl-contact-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: auto;
    z-index: 1040;
    display: none;
    min-width: 280px;
    margin: 0;
    padding: 8px;
    list-style: none;
    border: 0;
    border-radius: 10px;
    background: var(--vl-card);
    box-shadow: 0 18px 40px rgba(8, 10, 45, 0.35);
    text-align: left;
}
.vl-header .open > .vl-contact-menu { display: block; }
.vl-header .vl-contact-menu .dropdown-header { padding: 6px 12px 4px; color: var(--vl-slate); font-size: 12px; font-weight: 700; }
.vl-header .vl-contact-menu > li > a { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 6px; color: var(--vl-ink); font-size: 14px; font-weight: 600; line-height: 1.35; white-space: nowrap; transition: background-color .12s ease; }
.vl-header .vl-contact-menu > li > a .fa { flex: 0 0 18px; color: var(--vl-indigo); font-size: 15px; text-align: center; }
.vl-header .vl-contact-menu > li > a:hover,
.vl-header .vl-contact-menu > li > a:focus { background: var(--vl-mist); color: var(--vl-indigo); }
.vl-header .vl-contact-menu .divider { height: 1px; margin: 6px 12px; overflow: hidden; background: var(--vl-line); }

/* Desktop up to 1399px: drop the button icons and let the search shrink a little so the row fits beside the badges
   (at 1280px the row was 40px too wide; longer words on varilight.eu's other languages made it worse) */
@media (min-width: 992px) and (max-width: 1399px) {
    .vl-bar .vl-tools-row .vl-btn:not(.vl-btn--icon) > .fa { display: none; }
    .vl-bar .vl-tools-row .vl-search { min-width: 140px; }
}

/* Compact (scrolled) header, 1400px and up: keep Get in touch beside All products; Where to buy is in the menu.
   (The existing rule hides every button except All products; this brings Get in touch back. Below 1400px the
   compact row has no room for it without the menu wrapping.) */
@media (min-width: 1400px) {
    .vl-compact .vl-bar .vl-tools-row .vl-contact > .vl-btn { display: inline-flex; }
}

/* Dark mode toggle (to come): a small round icon button, last in .vl-tools-row (desktop) and after Menu
   (phones), e.g. <button type="button" class="vl-btn vl-btn--ghost vl-btn--icon">. Suggested size: */
.vl-header .vl-btn--icon { flex: 0 0 auto; width: 36px; padding: 0; }

/* --------------------------------------------------------------------------
   My list button in the header: a small round icon button like the theme
   button, with the number of products on the list in a badge. Desktop: in
   the tools row before the theme button; phones: at the end of the
   All products / search row. Only with JavaScript (the list lives in the
   browser). The compact (scrolled) header keeps it at 1280px and up.
   -------------------------------------------------------------------------- */
.vl-mylist-btn { display: none; }
.vl-js .vl-mylist-btn { position: relative; display: inline-flex; }
.vl-mylist-count {
    position: absolute;
    top: -5px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--vl-sky);
    box-shadow: 0 0 0 2px var(--vl-navy);
    color: var(--vl-navy);
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    letter-spacing: 0;
}
.vl-mylist-count[hidden] { display: none; }

/* Desktop 992-1199px: the row has one more button, so it closes up a little to stay on one line
   (row gaps 8 > 6px, header gaps 22 > 18px, the search may narrow to 110px; at 992px it is about 124px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .vl-bar { gap: 18px; }
    .vl-bar .vl-tools-row { gap: 6px; }
    .vl-bar .vl-tools-row .vl-search { min-width: 110px; }
    .vl-bar .vl-tools-row .vl-mylist-btn > .fa { display: inline-block; }   /* the rule hiding button icons here would leave it blank */
}

/* Compact (scrolled) header, 1280px and up: keep My list beside All products, so the count stays in view
   (1200-1279px has no room for it without the menu wrapping) */
@media (min-width: 1280px) {
    .vl-js .vl-compact .vl-bar .vl-tools-row .vl-mylist-btn { display: inline-flex; }
}



/* ==========================================================================
   6. Main navigation (menu inside the header)
   Built on Bootstrap's navbar and dropdowns. Menus open on hover and on click.
   ========================================================================== */
.vl-nav { min-height: 0; margin-bottom: 0; background: transparent; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.16); border-radius: 0; }
.vl-nav .vl-mega ul { margin: 0; padding: 0; list-style: none; }
/* The other site's products (UK products on .eu, European products on .co.uk): a small outlined pill at the end */
.vl-nav-site .fa { margin-left: 5px; font-size: 11px; opacity: .75; }
@media (min-width: 768px) {
    .vl-nav .navbar-nav > li.vl-nav-site { align-self: center; }
    .vl-nav .navbar-nav > li.vl-nav-site > a { margin: 0 12px; padding: 5px 13px; border: 1px solid rgba(255, 255, 255, .38); border-radius: 15px; font-size: 13px; }
    .vl-nav .navbar-nav > li.vl-nav-site > a::after { display: none; }
    .vl-nav .navbar-nav > li.vl-nav-site > a:hover, .vl-nav .navbar-nav > li.vl-nav-site > a:focus { background: rgba(255, 255, 255, .14); color: #fff; }
    .vl-compact .vl-nav .navbar-nav > li.vl-nav-site { display: none; }   /* the slim header has no room: the full one and the phone menu show it */
}

@media (min-width: 768px) {
    .vl-nav .navbar-collapse { padding: 0; }
    .vl-nav .navbar-nav { position: relative; float: none; display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0 -12px; }
    .vl-nav .navbar-nav > li { float: none; }
    .vl-nav .navbar-nav > li > a { padding: 15px 12px; background: transparent; color: rgba(255, 255, 255, 0.88); font-size: 14px; font-weight: 600; line-height: 20px; }
    .vl-nav .navbar-nav > li > a::after {
        content: "";
        position: absolute;
        left: 12px;
        right: 12px;
        bottom: 0;
        height: 3px;
        border-radius: 3px 3px 0 0;
        background: var(--vl-sky);
        transform: scaleX(0);
        transition: transform .15s ease;
    }
    .vl-nav .navbar-nav > li > a:hover,
    .vl-nav .navbar-nav > li > a:focus,
    .vl-nav .navbar-nav > li:hover > a,
    .vl-nav .navbar-nav > li.open > a,
    .vl-nav .navbar-nav > li.open > a:hover,
    .vl-nav .navbar-nav > li.open > a:focus { background: transparent; color: #fff; }
    .vl-nav .navbar-nav > li:hover > a::after,
    .vl-nav .navbar-nav > li.open > a::after,
    .vl-nav .navbar-nav > li > a:focus-visible::after { transform: scaleX(1); }
    .vl-nav .caret { margin-left: 5px; opacity: .7; transition: transform .15s ease; }
    .vl-nav .navbar-nav > li:hover > a .caret,
    .vl-nav .navbar-nav > li.open > a .caret { transform: rotate(180deg); }

    /* Open on hover and keyboard focus as well as click */
    .vl-nav .navbar-nav > li:hover > .dropdown-menu,
    .vl-nav .navbar-nav > li:focus-within > .dropdown-menu { display: block; }
    .vl-nav .navbar-nav > li > .dropdown-menu { min-width: 250px; margin-top: 8px; padding: 8px; border: 0; border-radius: 10px; background: var(--vl-card); box-shadow: 0 18px 40px rgba(8, 10, 45, 0.35); }
    /* Invisible bridge so the menu stays open while the pointer crosses the gap */
    .vl-nav .navbar-nav > li > .dropdown-menu::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }
    .vl-nav .navbar-nav > li:last-child > .dropdown-menu,
    .vl-nav .navbar-nav > li:nth-last-child(2) > .dropdown-menu { left: auto; right: 0; }
    .vl-nav .dropdown-menu > li > a { padding: 8px 12px; border-radius: 6px; color: var(--vl-ink); font-size: 14px; line-height: 1.35; transition: background-color .12s ease; }
    .vl-nav .dropdown-menu > li > a:hover,
    .vl-nav .dropdown-menu > li > a:focus { background: var(--vl-mist); color: var(--vl-indigo); }
    .vl-nav .dropdown-menu > li > a strong { color: var(--vl-indigo); }
    .vl-nav .dropdown-menu .divider { margin: 6px 12px; background: var(--vl-line); }

    /* Mega menus: grouped columns with a footer row of key links */
    .vl-nav .navbar-nav > li.vl-has-mega { position: static; }
    .vl-nav .navbar-nav > li > .dropdown-menu.vl-mega { left: 0; width: 720px; max-width: 100%; padding: 22px 22px 16px; }
    .vl-mega-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px; }
    .vl-nav .vl-mega-top { display: block; margin: 0 0 16px; padding: 0 10px 14px; border-bottom: 1px solid var(--vl-line); color: var(--vl-indigo); font-size: 15px; font-weight: 700; }
    .vl-nav .vl-mega-top:hover, .vl-nav .vl-mega-top:focus { color: var(--vl-indigo-hover); text-decoration: underline; text-underline-offset: 3px; }
    /* "Dimmer selection guide" and "All products" side by side at the top of Product info */
    .vl-mega-tops { display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 0 0 16px; padding: 0 0 14px; border-bottom: 1px solid var(--vl-line); }
    .vl-nav .vl-mega-tops .vl-mega-top { margin: 0; padding: 0 10px; border: 0; }
    .vl-mega-h { margin: 0 0 6px; padding: 0 10px; color: #7d829c; font-size: 12px; font-weight: 700; }
    .vl-mega ul + .vl-mega-h { margin-top: 16px; }
    .vl-nav .vl-mega ul a { display: block; padding: 6px 10px; border-radius: 6px; color: var(--vl-ink); font-size: 14px; line-height: 1.35; transition: background-color .12s ease; }
    .vl-nav .vl-mega ul a:hover, .vl-nav .vl-mega ul a:focus { background: var(--vl-mist); color: var(--vl-indigo); }
    /* Key links as buttons in the bottom right corner (Online catalogue, Dimmer selection guide, All products) */
    .vl-mega-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 16px; padding: 14px 10px 0; border-top: 1px solid var(--vl-line); }
    .vl-nav .vl-mega-actions .vl-btn .fa { margin: 0 0 0 6px; font-size: 12px; }
    .vl-mega-foot { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 14px; padding: 14px 10px 0; border-top: 1px solid var(--vl-line); }
    .vl-nav .vl-mega-foot a { color: var(--vl-indigo); font-size: 14px; font-weight: 600; }
    .vl-nav .vl-mega-foot a:hover, .vl-nav .vl-mega-foot a:focus { text-decoration: underline; text-underline-offset: 3px; }
}
@media (min-width: 768px) and (max-width: 1199px) {
    .vl-nav .navbar-nav { margin: 0 -6px; }
    .vl-nav .navbar-nav > li > a { padding: 13px 6px; font-size: 13px; }
    .vl-nav .navbar-nav > li > a::after { left: 6px; right: 6px; }
    .vl-nav .caret { margin-left: 3px; }
}

/* Phones: the menu opens as a panel under the Menu button, always light text on navy */
@media (max-width: 767px) {
    .vl-nav { border-top: 0; margin-bottom: 12px; }
    .vl-nav .navbar-collapse { padding: 0; border: 0; box-shadow: none; max-height: none; }
    .vl-nav .navbar-nav { margin: 0; padding: 6px; background: rgba(255, 255, 255, 0.06); border-radius: 10px; }
    .vl-nav .navbar-nav > li + li { border-top: 1px solid rgba(255, 255, 255, 0.10); }
    .vl-nav .navbar-nav > li > a,
    .vl-nav .navbar-nav > li > a:hover,
    .vl-nav .navbar-nav > li > a:focus,
    .vl-nav .navbar-nav > .open > a,
    .vl-nav .navbar-nav > .open > a:hover,
    .vl-nav .navbar-nav > .open > a:focus { padding: 12px 14px; background: transparent; color: #fff; font-weight: 600; }
    .vl-nav .navbar-nav .open .dropdown-menu { padding: 0 0 8px; background: transparent; border: 0; box-shadow: none; }
    .vl-nav .navbar-nav .open .dropdown-menu > li > a { padding: 8px 14px 8px 28px; color: rgba(255, 255, 255, 0.8); white-space: normal; background: transparent; }
    .vl-nav .navbar-nav .open .dropdown-menu > li > a:hover,
    .vl-nav .navbar-nav .open .dropdown-menu > li > a:focus { background: transparent; color: #fff; }
    .vl-nav .navbar-nav .open .dropdown-menu .divider { margin: 6px 14px 6px 28px; background: rgba(255, 255, 255, 0.12); }
    .vl-nav .vl-mega-top { display: block; padding: 8px 14px 8px 28px; color: #fff; font-weight: 700; }
    .vl-nav .vl-mega-h { margin: 8px 0 2px; padding: 0 14px 0 28px; color: rgba(255, 255, 255, 0.5); font-size: 12px; font-weight: 700; }
    .vl-nav .vl-mega ul a { display: block; padding: 8px 14px 8px 28px; color: rgba(255, 255, 255, 0.8); }
    .vl-nav .vl-mega ul a:hover, .vl-nav .vl-mega ul a:focus { color: #fff; text-decoration: none; }
    .vl-nav .vl-mega-foot { margin-top: 6px; }
    .vl-nav .vl-mega-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; padding: 0 14px 0 28px; }
    .vl-nav .vl-mega-actions .vl-btn .fa { margin: 0 0 0 6px; font-size: 12px; }
    .vl-nav .vl-mega-actions .vl-btn--outline { border-color: rgba(255, 255, 255, .5); background: transparent; color: #fff; }
    .vl-nav .vl-mega-foot a { display: block; padding: 8px 14px 8px 28px; color: var(--vl-sky); font-weight: 600; }
}


/* ==========================================================================
   7. Footer (includes/footer.php)
   ========================================================================== */
.vl-footer { background: var(--vl-navy-deep); color: rgba(255, 255, 255, 0.74); font-size: 14px; line-height: 1.6; }
.vl-footer > .vl-wrap { padding-top: 64px; }
.vl-footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1.5fr);
    gap: 48px;
    padding-bottom: 56px;
}
.vl-footer h2 { margin: 0 0 16px; color: #fff; font-size: 15px; letter-spacing: 0; line-height: 1.3; }
.vl-footer p { margin: 0; }
.vl-footer ul { margin: 0; padding: 0; list-style: none; }
.vl-footer li + li { margin-top: 10px; }
.vl-footer a { color: #fff; text-decoration: none; }
.vl-footer .vl-f-ticket { font-weight: 700; }
.vl-footer a:hover, .vl-footer a:focus { color: var(--vl-sky); text-decoration: none; }
.vl-footer .fa { width: 18px; margin-right: 8px; color: var(--vl-sky); text-align: center; }

.vl-f-brand img { display: block; width: 120px; max-width: 100%; height: auto; }
.vl-f-brand p { max-width: 300px; margin-top: 18px; }
.vl-f-social { display: flex; gap: 10px; margin-top: 22px; }
.vl-footer .vl-f-social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 50%; transition: background-color .15s ease, border-color .15s ease; }
.vl-footer .vl-f-social a:hover, .vl-footer .vl-f-social a:focus { background: rgba(255, 255, 255, 0.1); border-color: var(--vl-sky); }
.vl-footer .vl-f-social .fa { width: auto; margin: 0; color: #fff; font-size: 17px; }
.vl-f-phone { font-size: 17px; font-weight: 700; }
.vl-f-muted { color: rgba(255, 255, 255, 0.6); font-size: 13px; }

/* Latest news: Mailchimp writes <div class="display_archive"><div class="campaign">date - <a>title</a></div>...</div>.
   js/varilight.js moves the date above the title and hides items after the fourth until "More news" is pressed. */
.vl-f-news .campaign { padding: 9px 0; border-top: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.55); font-size: 12px; }
.vl-f-news .campaign:first-child { padding-top: 0; border-top: 0; }
.vl-f-news .campaign a { display: block; margin-top: 2px; font-size: 14px; font-weight: 600; line-height: 1.4; }
.vl-f-news .campaign.vl-more-hidden { display: none; }
.vl-f-news .vl-f-more { margin-top: 10px; padding: 0; border: 0; background: none; color: rgba(255, 255, 255, 0.8); font-size: 13px; font-weight: 600; cursor: pointer; }
.vl-f-news .vl-f-more:hover, .vl-f-news .vl-f-more:focus { color: var(--vl-sky); }
.vl-f-news .vl-f-all { display: inline-block; margin-top: 12px; color: var(--vl-sky); font-weight: 600; }
.vl-f-news .vl-f-more + .vl-f-all { margin-left: 18px; }

/* Newsletter sign-up */
.vl-f-signup p { margin-bottom: 16px; }
.vl-f-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.vl-f-wide { grid-column: 1 / -1; }
.vl-f-signup label { display: block; margin: 0 0 4px; color: rgba(255, 255, 255, 0.7); font-size: 12px; font-weight: 600; }
.vl-f-signup input[type="email"],
.vl-f-signup input[type="text"] { width: 100%; height: 42px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 8px; background: rgba(255, 255, 255, 0.06); color: #fff; font-size: 14px; box-shadow: none; }
.vl-f-signup input[type="email"]:focus,
.vl-f-signup input[type="text"]:focus { border-color: var(--vl-sky); outline: none; background: rgba(255, 255, 255, 0.1); }
.vl-f-consent { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0 0; padding: 0; border: 0; }
.vl-f-consent input { flex: 0 0 auto; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--vl-sky); }
.vl-f-signup .vl-f-consent label { margin: 0; color: rgba(255, 255, 255, 0.74); font-size: 13px; font-weight: 400; line-height: 1.5; }
.vl-f-signup .vl-f-consent a { color: var(--vl-sky); text-decoration: underline; }
.vl-f-trap { position: absolute; left: -5000px; }
.vl-f-submit { margin-top: 16px; height: 44px; padding: 0 26px; border: 0; border-radius: 22px; background: #fff; color: var(--vl-navy); font-size: 14px; font-weight: 700; cursor: pointer; transition: background-color .15s ease; }
.vl-f-submit:hover, .vl-f-submit:focus { background: var(--vl-sky); }
.vl-f-signup .response { margin-top: 10px; font-size: 13px; }

/* Bottom bar */
.vl-f-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; padding: 24px 0 32px; border-top: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.55); font-size: 13px; }
.vl-f-legal { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-left: auto; }   /* wraps: German's three links are wider than a small phone */
.vl-footer .vl-f-legal a { color: rgba(255, 255, 255, 0.8); }
.vl-footer .vl-f-legal a:hover, .vl-footer .vl-f-legal a:focus { color: var(--vl-sky); }
.vl-footer .vl-f-cookies { padding: 0; border: 0; background: none; color: rgba(255, 255, 255, 0.8); font: inherit; cursor: pointer; }
.vl-footer .vl-f-cookies:hover, .vl-footer .vl-f-cookies:focus { color: var(--vl-sky); text-decoration: underline; }

/* Cookie choice (includes/footer-scripts.php): a card in the bottom left corner; across the foot of a phone. While it
   shows, the "More below" and "Back to top" buttons stay out of its way. */
.vl-consent { position: fixed; left: 20px; bottom: 20px; z-index: 1030; width: min(440px, calc(100vw - 40px)); padding: 20px 22px 22px; border: 1px solid var(--vl-line); border-radius: var(--vl-radius); background: var(--vl-card); box-shadow: var(--vl-shadow-lg); color: var(--vl-ink); }
.vl-consent[hidden] { display: none; }
.vl-consent .vl-consent-h { margin: 0 0 6px; color: var(--vl-ink); font-size: 16px; font-weight: 700; line-height: 1.3; }
.vl-consent .vl-consent-text { margin: 0 0 16px; color: var(--vl-slate); font-size: 14px; line-height: 1.55; }
.vl-consent .vl-consent-text a { color: var(--vl-indigo); text-decoration: underline; }
.vl-consent-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.vl-consent-actions .vl-btn { flex: 1 1 0; min-width: 130px; }
.vl-consent-open .vl-more-below, .vl-consent-open .vl-totop { display: none; }
@media (max-width: 575px) { .vl-consent { left: 0; right: 0; bottom: 0; width: auto; border-width: 1px 0 0; border-radius: var(--vl-radius) var(--vl-radius) 0 0; } }
@media print { .vl-consent { display: none; } }

@media (max-width: 1199px) {
    .vl-footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .vl-f-signup { grid-column: span 2; }
}
@media (max-width: 767px) {
    .vl-footer > .vl-wrap { padding-top: 48px; }
    .vl-footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px 24px; padding-bottom: 40px; }
    .vl-f-brand, .vl-f-news, .vl-f-signup { grid-column: 1 / -1; }
    .vl-f-bottom { flex-direction: column; align-items: flex-start; gap: 6px; }
    .vl-f-legal { margin-left: 0; margin-top: 6px; }
}
@media (max-width: 420px) {
    .vl-footer-grid { grid-template-columns: minmax(0, 1fr); }
    .vl-f-fields { grid-template-columns: minmax(0, 1fr); }
}


/* ==========================================================================
   8. Content: prose, tables, cards, tiles, notes, video
   ========================================================================== */

/* Prose: wrap ordinary page text in .vl-prose for comfortable reading */
.vl-prose { max-width: 780px; font-size: 17px; line-height: 1.75; }
.vl-prose--wide { max-width: none; }
.vl-prose h2 { margin: 56px 0 14px; font-size: clamp(24px, 2.2vw, 30px); font-weight: var(--vl-display); line-height: 1.2; letter-spacing: -0.015em; }
.vl-prose h3 { margin: 36px 0 10px; font-size: 20px; line-height: 1.3; }
.vl-prose h4 { margin: 24px 0 8px; font-size: 17px; }
.vl-prose > :first-child { margin-top: 0; }
.vl-prose p, .vl-prose ul, .vl-prose ol { margin: 0 0 16px; }
.vl-prose ul, .vl-prose ol { padding-left: 22px; }
.vl-prose li + li { margin-top: 6px; }
.vl-prose img { border-radius: var(--vl-radius); }
.vl-prose img.vl-flat { border-radius: 0; }
.vl-prose figure { margin: 24px 0; }
.vl-prose figcaption { margin-top: 8px; color: var(--vl-slate); font-size: 14px; }

/* Tables: <div class="vl-table-wrap"><table class="vl-table">. The wrapper scrolls sideways on phones. */
.vl-table-wrap { position: relative; max-width: 100%; margin: 0 0 24px; overflow-x: auto; -webkit-overflow-scrolling: touch; }   /* relative: keeps screen-reader text inside the scroll area */
.vl-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.vl-table th, .vl-table td { padding: 10px 14px; border-bottom: 1px solid var(--vl-line); text-align: left; vertical-align: top; }
.vl-table thead th, .vl-table tr.vl-table-head th, .vl-table tr.vl-table-head td { background: var(--vl-mist); color: var(--vl-ink); font-weight: 700; }
.vl-table tbody tr:hover { background: var(--vl-hover); }
.vl-table .vl-num { text-align: center; white-space: nowrap; }
.vl-table img { max-width: 120px; }
/* Filter box above a long table (js/varilight.js section 15) */
.vl-filterbox { width: 100%; max-width: 420px; height: 46px; margin: 0 0 6px; padding: 0 18px; border: 1px solid var(--vl-line); border-radius: 23px; background: var(--vl-card); font-size: 15px; }
.vl-filterbox:focus { border-color: var(--vl-sky); outline: none; box-shadow: 0 0 0 2px var(--vl-sky); }
.vl-filtercount { min-height: 20px; margin: 0 0 12px; color: var(--vl-slate); font-size: 14px; }
.vl-table tr[hidden] { display: none; }
.vl-table--white { background: var(--vl-card); border-radius: var(--vl-radius); }   /* for tables on a grey band */

/* ---- Matrix page (ranges/range-matrix.php): tighter bands than the standard ones ---- */
/* Lever toggle page (ranges/lever-toggle-switches.php): the logo beside the title; a tab per faceplate style (the
   style's heading is for when the tabs can't run); the V-Pro Micro pack beside its text */
/* A range banner in the page head, beside the title (Value range): never wider than its own size */
.vl-head-banner { display: flex; align-items: center; justify-content: space-between; gap: clamp(24px, 4vw, 64px); }
.vl-head-banner > img { flex: 0 1 600px; min-width: 0; max-width: 50%; height: auto; border-radius: var(--vl-radius); }
@media (max-width: 767px) {
    .vl-head-banner { flex-direction: column; align-items: flex-start; gap: 16px; }
    .vl-head-banner > img { flex: none; width: 100%; max-width: 600px; }
}
.vl-lv-head { display: flex; align-items: center; justify-content: space-between; gap: clamp(24px, 4vw, 64px); }
.vl-lv-head > img { flex: 0 1 640px; min-width: 0; width: 640px; max-width: 46%; height: auto; border-radius: var(--vl-radius); }   /* bigger (George, 19 Oct 2026) */
.vl-js .vl-lv-panel .vl-plates-head { display: none; }
.vl-lv-panel + .vl-lv-panel { margin-top: 32px; }
.vl-js .vl-lv-panel + .vl-lv-panel { margin-top: 0; }
/* A table link that says what it opens (Matrix modules: data sheet, dimension drawing, instructions; George 19 Oct 2026) */
.vl-tlink { display: inline-flex; flex-direction: column; gap: 1px; line-height: 1.3; }
.vl-tlink small { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.vl-tlink small .fa { font-size: 12px; }

/* Meet the team: each team a section with its heading (no tabs, George 19 Oct 2026) */
.vl-team-group + .vl-team-group { margin-top: clamp(40px, 4vw, 64px); }
.vl-team-head { margin: 0 0 20px; font-size: clamp(24px, 2.2vw, 32px); font-weight: var(--vl-display); letter-spacing: -0.015em; }

/* Smart page (smart/overview.php): ideas for the Wi-Fi sockets, under their introduction */
.vl-smart-ideas { margin-top: clamp(28px, 3vw, 48px); }
/* The overview (George, 19 Oct 2026): faceplate kit + lever modules (+ V-Pro Micro) = your switch, each part a picture
   with its name and a line, linking to its section under the builder; the switch is drawn as the builder draws it */
/* Spacing (George, 19 Oct 2026: "spacing of assets is out"): each part centred in its column, the pictures one size
   (--lv-pic), the + and = signs level with the middle of the pictures */
.vl-lv-kit { --lv-pic: clamp(130px, 11vw, 220px); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: 0 clamp(10px, 1.6vw, 28px); max-width: 1500px; margin: 0 auto; padding: 0; list-style: none; text-align: center; }
.vl-lv-kit > li:not(.vl-lv-kit-op) { display: flex; flex-direction: column; align-items: center; }
.vl-lv-kit p { max-width: 260px; }
.vl-lv-kit-pic { display: block; width: var(--lv-pic); max-width: 100%; aspect-ratio: 1 / 1; overflow: hidden; border: 1px solid var(--vl-line); border-radius: var(--vl-radius); background: var(--vl-photo); }
.vl-lv-kit-pic img { display: block; width: 100%; height: 100%; object-fit: contain; }
.vl-lv-kit-result .vl-lv-kit-pic { border-color: var(--vl-indigo); box-shadow: var(--vl-shadow-md); }
.vl-lv-kit .vl-lv-preview { width: 100%; margin: 0; border-radius: 0; }
.vl-lv-kit h3 { margin: 12px 0 4px; font-size: 17px; line-height: 1.3; }
.vl-lv-kit h3 small { margin-left: 4px; color: var(--vl-slate); font-size: 13px; font-weight: 400; }
.vl-lv-kit p { margin: 0; color: var(--vl-slate); font-size: 14px; line-height: 1.45; }
.vl-lv-kit-op { align-self: start; margin-top: calc(var(--lv-pic) / 2 - 0.5em); color: var(--vl-indigo); font-size: clamp(24px, 2.4vw, 36px); font-weight: 300; line-height: 1; }
/* The sum cycles through the finishes (js/lever-cycle.js): the pictures fade as they change; the finish's name and a
   button to stop it under "Your switch" */
.vl-lv-kit [data-lv-cycle="kit"], .vl-lv-kit [data-lv-cycle="lever"], .vl-lv-cycle-switch, .vl-lv-cycle-text { transition: opacity .3s var(--vl-ease); }
.vl-lv-kit.is-changing [data-lv-cycle="kit"], .vl-lv-kit.is-changing [data-lv-cycle="lever"], .vl-lv-kit.is-changing .vl-lv-cycle-switch,
.vl-lv-kit.is-changing .vl-lv-cycle-text { opacity: 0; }
.vl-lv-kit p.vl-lv-cycle-name { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0 0 6px; color: var(--vl-ink); font-size: 13px; font-weight: 600; }
.vl-lv-cycle-btn { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 26px; height: 26px; margin-left: 4px; padding: 0; border: 1px solid var(--vl-line); border-radius: 50%; background: var(--vl-card); color: var(--vl-indigo); font-size: 10px; cursor: pointer; }
.vl-lv-cycle-btn:hover { border-color: var(--vl-indigo); }
.vl-lv-cycle-btn[hidden] { display: none; }   /* shown by js/lever-cycle.js */
@media (prefers-reduced-motion: reduce) { .vl-lv-kit [data-lv-cycle], .vl-lv-cycle-switch, .vl-lv-cycle-text { transition: none; } }
@media (max-width: 991px) {
    .vl-lv-kit { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 16px; }
    .vl-lv-kit-op { display: none; }
    .vl-lv-kit-result { grid-column: 1 / -1; display: grid !important; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 4px 20px; align-items: center; text-align: left; }
    .vl-lv-kit-result .vl-lv-kit-pic { grid-row: span 3; }
    .vl-lv-kit p.vl-lv-cycle-name { justify-content: flex-start; margin: 0; }
    .vl-lv-kit-result h3 { margin-top: 0; align-self: end; }
    .vl-lv-kit-result p { align-self: start; }
}
@media (max-width: 575px) { .vl-lv-kit { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* The parts, numbered as in the overview */
.vl-lv-part + .vl-lv-part { margin-top: clamp(40px, 4vw, 64px); }
.vl-lv-part h3 { display: flex; align-items: center; gap: 12px; }
.vl-lv-part-n { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--vl-indigo); color: var(--vl-on-accent); font-size: 15px; font-weight: 700; }
@media (max-width: 767px) {
    .vl-lv-head { flex-direction: column; align-items: flex-start; }
    .vl-lv-head > img { flex: none; width: 100%; max-width: 520px; height: auto; }   /* in a column the 420px basis was its height: the logo stretched */
    .vl-lv-dimmer { width: 96px; height: 96px; }
}
.vl-mx-band { padding: 28px 0 40px; scroll-margin-top: 72px; }   /* opened from a link (#builder): clear of the compact header */
.vl-mx-band .vl-head { margin-bottom: 18px; }
.vl-mx-band .vl-head h2 { font-size: clamp(24px, 2.2vw, 32px); }
.vl-mx-band .vl-head p { margin-top: 6px; font-size: 16px; }
.vl-mx-ref { padding: 36px 0 44px; }
.vl-mx-ref h2 { margin: 0 0 8px; font-size: clamp(22px, 2vw, 28px); line-height: 1.2; }
.vl-mx-ref .vl-acc-body > p:last-child { margin-bottom: 0; }
.vl-mx-ref .vl-table-wrap { margin-bottom: 16px; }
.vl-mx-help { max-width: 820px; margin: 0 0 18px; color: var(--vl-slate); font-size: 15px; line-height: 1.6; }
.vl-mx-facts { margin: 0 0 16px; padding-left: 20px; font-size: 15px; line-height: 1.55; }
.vl-mx-facts li + li { margin-top: 4px; }

/* ---- Matrix configurator (js section 18 "Matrix configurator") ---- */
/* Two columns: the steps, and the parts list kept in view beside them (below them on phones) */
.vl-mx-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: 24px; align-items: start; }
.vl-mx-parts { position: sticky; top: 96px; padding: 20px; border-radius: var(--vl-radius-lg); background: var(--vl-card); box-shadow: var(--vl-shadow-md); outline: none; }
@media (max-width: 991px) {
    .vl-mx-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .vl-mx-parts { position: static; }
}

/* A step: white card; its heading is a button that folds it to one line showing the answer */
.vl-mx-step { border-radius: var(--vl-radius-lg); background: var(--vl-card); }
.vl-mx-step + .vl-mx-step { margin-top: 8px; }
.vl-mx-step h3, .vl-mx-dim h4 { margin: 0; font-size: 17px; line-height: 1.3; }
.vl-mx-toggle { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 54px; margin: 0; padding: 10px 18px; border: 0; border-radius: inherit; background: none; color: var(--vl-ink); font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.vl-mx-toggle:hover .vl-mx-title, .vl-mx-toggle:hover .vl-mx-change { color: var(--vl-indigo); }
.vl-mx-toggle::after { content: "\f107"; flex: 0 0 auto; margin-left: auto; color: var(--vl-indigo); font-family: FontAwesome; font-size: 20px; font-weight: 400; transition: transform var(--vl-speed) var(--vl-ease); }
.vl-mx-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
.vl-mx-n { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--vl-indigo); color: var(--vl-on-accent); font-size: 14px; }
.vl-mx-title { flex: 0 0 auto; }
.vl-mx-ans { flex: 0 1 auto; min-width: 0; overflow: hidden; color: var(--vl-slate); font-size: 15px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.vl-mx-change { flex: 0 0 auto; margin-left: auto; color: var(--vl-indigo); font-size: 14px; font-weight: 600; }
.vl-mx-toggle[aria-expanded="true"] .vl-mx-ans, .vl-mx-toggle[aria-expanded="true"] .vl-mx-change { display: none; }
.vl-mx-toggle[aria-expanded="false"]::after { margin-left: 0; }
.vl-mx-body { padding: 0 18px 18px; }
.vl-mx-body[hidden], .vl-mx-dim-body[hidden] { display: none; }
.vl-mx-sub { margin: 14px 0 6px; color: var(--vl-slate); font-size: 14px; font-weight: 700; }
.vl-mx-hint { margin: 8px 0 0; color: var(--vl-slate); font-size: 14px; }

/* Choice buttons ("chips"): a tick on the chosen one */
.vl-mx-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.vl-mx-chips--uses { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.vl-mx-chips--num { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 380px; }
.vl-mx-chip { position: relative; display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0; padding: 7px 30px 7px 12px; border: 1px solid var(--vl-line); border-radius: 10px; background: var(--vl-card); color: var(--vl-ink); font-size: 14px; font-weight: 600; line-height: 1.3; text-align: left; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
.vl-mx-chip:hover { border-color: var(--vl-indigo); }
.vl-mx-chip[aria-pressed="true"] { border-color: var(--vl-indigo); background: var(--vl-chosen); box-shadow: 0 0 0 1px var(--vl-indigo); color: var(--vl-indigo); }
.vl-mx-chip[aria-pressed="true"]::after { content: "\f00c"; position: absolute; top: 50%; right: 10px; margin-top: -8px; font-family: FontAwesome; font-size: 13px; line-height: 16px; }
.vl-mx-chip:disabled { border-style: dashed; background: var(--vl-mist); color: var(--vl-off); box-shadow: none; cursor: not-allowed; }
.vl-mx-chip:disabled img { opacity: .5; }
.vl-mx-label { min-width: 0; }
.vl-mx-label small { display: block; margin-top: 1px; color: var(--vl-slate); font-size: 12px; font-weight: 400; }
.vl-mx-chip:disabled .vl-mx-label small { color: var(--vl-off); }
.vl-mx-thumb { flex: 0 0 auto; width: 36px; height: 36px; object-fit: contain; border-radius: 6px; background: var(--vl-card); }
.vl-mx-chips--num .vl-mx-chip { flex-direction: column; justify-content: center; gap: 0; padding: 6px; text-align: center; }
.vl-mx-chips--num .vl-mx-chip[aria-pressed="true"]::after { top: 6px; margin-top: 0; right: 7px; }
.vl-mx-big { font-family: var(--vl-font); font-size: 22px; font-weight: 700; line-height: 1.1; }
.vl-mx-chips--num .vl-mx-label { font-size: 12px; font-weight: 400; }
.vl-mx-noimg { visibility: hidden; }

/* Knobs bought separately: a fold under the kit's own knobs */
.vl-mx-more { margin-top: 12px; }
.vl-mx-more > summary { display: inline-block; margin-bottom: 8px; color: var(--vl-indigo); font-size: 14px; font-weight: 700; cursor: pointer; }
.vl-mx-more > summary:hover { color: var(--vl-indigo-hover); }

/* One card per dimmer (gang); with several dimmers each folds to one line */
.vl-mx-dim { border: 1px solid var(--vl-line); border-radius: var(--vl-radius); }
.vl-mx-dim + .vl-mx-dim { margin-top: 8px; }
.vl-mx-dim.is-open { border-color: var(--vl-indigo); }
.vl-mx-dim--one, .vl-mx-dim--one.is-open { border: 0; }
.vl-mx-toggle--dim { min-height: 46px; padding: 8px 14px; font-size: 15px; }
.vl-mx-dim.has-warn .vl-mx-toggle--dim .vl-mx-ans { color: var(--vl-notice-ink); }
.vl-mx-dim.has-warn .vl-mx-toggle--dim .vl-mx-ans::before { content: "\f071"; margin-right: 6px; color: var(--vl-notice-mark); font-family: FontAwesome; }
.vl-mx-dim-body { padding: 0 14px 14px; }
.vl-mx-dim--one .vl-mx-dim-body { padding: 0; }
.vl-mx-linkbtn { padding: 4px 0; border: 0; background: none; color: var(--vl-indigo); font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; }
.vl-mx-linkbtn:hover, .vl-mx-linkbtn:focus { color: var(--vl-indigo-hover); text-decoration: underline; text-underline-offset: 3px; }
.vl-mx-dim-notes .vl-note { margin: 12px 0 0; }
.vl-mx-dim-notes .vl-mx-linkbtn { display: block; margin-top: 4px; color: inherit; text-decoration: underline; }
.vl-mx-next { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 16px; margin-top: 12px; }
.vl-mx-next .vl-mx-linkbtn { margin-right: auto; }
.vl-mx-next .fa { margin-left: 4px; }

/* Lamp wattage box */
.vl-mx-watts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 12px; }
.vl-mx-watts label { margin: 0; font-size: 14px; font-weight: 700; }
.vl-mx-watts label span { color: var(--vl-slate); font-weight: 400; }
.vl-mx-wbox { display: inline-flex; align-items: center; height: 40px; padding-right: 12px; border: 1px solid var(--vl-line); border-radius: 10px; background: var(--vl-card); }
.vl-mx-wbox:focus-within { border-color: var(--vl-sky); box-shadow: 0 0 0 2px var(--vl-sky); }
.vl-mx-wbox input { width: 84px; height: 100%; padding: 0 6px 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--vl-ink); font-size: 16px; outline: none; }
.vl-mx-wbox span { color: var(--vl-slate); font-weight: 600; }
.vl-mx-whint { color: var(--vl-slate); font-size: 13px; }

/* Parts list */
.vl-mx-parts h3 { margin: 0 0 4px; font-size: 20px; }
.vl-mx-sum { margin: 0 0 12px; color: var(--vl-slate); font-size: 14px; }
.vl-mx-preview { display: block; max-width: 100%; max-height: 150px; width: auto; margin: 0 auto 12px; }
/* Lever builder: the plate as it will look, lever pictures laid over the plate kit picture (js section 18b) */
.vl-lv-preview { position: relative; width: min(100%, 260px); margin: 0 auto 12px; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 10px; background: var(--vl-photo); }
.vl-lv-preview img { position: absolute; display: block; max-width: none; }
.vl-lv-preview .vl-lv-plate { top: 0; left: 0; width: 100%; height: 100%; }
.vl-lv-preview .vl-lv-lever { height: auto; filter: drop-shadow(0 0.5px 0.6px rgba(0, 0, 0, 0.32)) drop-shadow(0 2px 2.5px rgba(0, 0, 0, 0.22)); }
/* PowerGrid builder (js section 18c): the modules in their grid spaces, numbered, under the plate; the engraving list */
.vl-pg-strip { display: flex; justify-content: center; gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; }
.vl-pg-strip li { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 64px; }
.vl-pg-strip-pic { display: block; width: 56px; height: 56px; padding: 3px; border: 1px solid var(--vl-line-soft); border-radius: 10px; background: #fff; object-fit: contain; }   /* white in both themes, as the parts list's pictures */
.vl-pg-strip-n { color: var(--vl-slate); font-size: 11px; font-weight: 700; }
.vl-pg-strip-code { max-width: 100%; overflow: hidden; color: var(--vl-ink); font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
/* DataGrid builder (js section 18d): how full the plate is (a block per half space), the modules chosen, the strip of
   modules in the parts list as wide as the space each takes */
.vl-dg-meter { display: flex; gap: 3px; max-width: 360px; margin: 0 0 6px; }
.vl-dg-meter span { flex: 1 1 0; height: 10px; border-radius: 3px; background: var(--vl-line); }
.vl-dg-meter span.is-used { background: var(--vl-indigo); }
.vl-dg-meter span.is-over { background: var(--vl-notice-ink); }
.vl-dg-left { margin: 0 0 14px; color: var(--vl-slate); font-size: 14px; font-weight: 600; }
.vl-dg-chosen { display: grid; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
.vl-dg-chosen li { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--vl-line-soft); border-radius: 12px; background: var(--vl-card); }
.vl-dg-chosen li.is-over { border-color: var(--vl-notice-ink); background: var(--vl-notice-bg); }
.vl-dg-chosen-pic { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 8px; background: #fff; object-fit: contain; }
.vl-dg-chosen-name { flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 600; }
.vl-dg-chosen-name small { display: block; color: var(--vl-slate); font-size: 12px; font-weight: 400; }
.vl-dg-add { margin: 0 0 8px; font-size: 14px; font-weight: 700; }
.vl-dg-strip li { flex: 1 1 0; width: auto; min-width: 0; max-width: 160px; }
.vl-dg-strip .vl-pg-strip-pic { width: 100%; max-width: 56px; }
.vl-pg-engraved { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 12px; }
.vl-pg-engraved label { margin: 0; font-size: 14px; font-weight: 700; }
.vl-pg-engraved select { min-width: 200px; padding: 7px 10px; border: 1px solid var(--vl-line); border-radius: 10px; background: var(--vl-card); color: var(--vl-ink); font-size: 15px; }
.vl-mx-lines { margin: 0 0 14px; padding: 0; list-style: none; }
.vl-mx-line { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: start; padding: 8px 0; border-top: 1px solid var(--vl-line); }
.vl-mx-linepic { width: 44px; height: 44px; object-fit: contain; }
.vl-mx-line p { margin: 0; }
.vl-mx-code { font-size: 15px; }
.vl-mx-code a { font-weight: 700; }
.vl-mx-desc { font-size: 14px; line-height: 1.4; }
.vl-mx-small { color: var(--vl-slate); font-size: 13px; }
.vl-mx-led { margin: 0 0 12px; }
.vl-mx-led p { display: flex; justify-content: space-between; margin: 0 0 6px; font-size: 14px; }
.vl-mx-meter { display: block; height: 8px; overflow: hidden; border-radius: 4px; background: var(--vl-mist); }
.vl-mx-meter span { display: block; height: 100%; border-radius: 4px; background: var(--vl-indigo); }
.vl-mx-led.is-over strong { color: var(--vl-notice-ink); }
.vl-mx-led.is-over .vl-mx-meter span { background: var(--vl-notice-mark); }
.vl-mx-parts .vl-note { margin-bottom: 10px; font-size: 14px; }
.vl-mx-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.vl-mx-status { min-height: 20px; margin: 6px 0 0; color: var(--vl-slate); font-size: 14px; }
.vl-mx-reset { margin-top: 2px; }
.vl-mx-offscreen { position: fixed; left: -9999px; top: 0; }

/* Phones and tablets: a bar that stays at the bottom while the steps are on screen */
.vl-mx-bar { display: none; }
@media (max-width: 991px) {
    .vl-mx-bar { position: sticky; bottom: 12px; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 8px 10px 8px 16px; border-radius: 14px; background: var(--vl-navy); box-shadow: var(--vl-shadow-lg); color: #fff; font-size: 14px; font-weight: 600; }
    .vl-mx-bar span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .vl-mx-bar .vl-btn { flex: 0 0 auto; }
}
@media (max-width: 767px) {
    .vl-mx-band { padding: 20px 0 28px; }
    .vl-mx-band .vl-head h2 { font-size: 24px; }
    .vl-mx-band .vl-head p { font-size: 15px; }
    .vl-mx-ref { padding: 28px 0 32px; }
    /* Closed step: title and "Change" on the first line, the answer under the title */
    .vl-mx-toggle { flex-wrap: wrap; gap: 2px 10px; min-height: 50px; padding: 10px 14px; }
    .vl-mx-toggle--dim { min-height: 44px; padding: 8px 12px; }
    .vl-mx-ans { order: 3; flex-basis: 100%; padding-left: 36px; font-size: 14px; white-space: normal; }
    .vl-mx-toggle--dim .vl-mx-ans { padding-left: 0; }
    .vl-mx-title { flex: 1 1 0; min-width: 0; }
    .vl-mx-change { order: 2; }
    .vl-mx-toggle::after { order: 2; }
    .vl-mx-body { padding: 0 12px 14px; }
    .vl-mx-chips, .vl-mx-chips--uses { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
    .vl-mx-chips--num { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .vl-mx-chip { gap: 8px; padding: 7px 26px 7px 9px; font-size: 13px; }
    .vl-mx-chip[aria-pressed="true"]::after { right: 8px; }
    .vl-mx-thumb { width: 32px; height: 32px; }
    .vl-mx-dim-body { padding: 0 10px 12px; }
    .vl-mx-parts { padding: 18px 14px; }
}


/* Cards: a grid of linked boxes with an image, title and short text */
/* Short card sets fill the row: auto-fit instead of auto-fill, so a set of 3 to 6 cards no
   longer leaves empty columns at 1920; at most six across (each at least 240px), so a long set still
   wraps into even rows. One or two cards are capped (480px / 960px) so they never stretch across the page.
   Card lists with their own columns (--2/--3/--4, team, distributors, dimmer chooser, quotes) are
   unchanged. Plain ".vl-cards" today: technical-section/wiring-diagrams.php (sets of 3 and 5). */
.vl-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(max(240px, calc((100% - 120px) / 6)), 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.vl-cards:not(:has(> :nth-child(3))) { max-width: 960px; }
.vl-cards:not(:has(> :nth-child(2))) { max-width: 480px; }

.vl-card { display: flex; flex-direction: column; height: 100%; padding: 24px; border: 1px solid var(--vl-line-soft); border-radius: var(--vl-radius-lg); background: var(--vl-card); color: var(--vl-ink); text-decoration: none; box-shadow: var(--vl-shadow-sm); transition: box-shadow var(--vl-speed) var(--vl-ease), transform var(--vl-speed) var(--vl-ease), border-color var(--vl-speed) var(--vl-ease); }
a.vl-card:hover, a.vl-card:focus { border-color: transparent; box-shadow: var(--vl-shadow-md); color: var(--vl-ink); text-decoration: none; }
a.vl-card:hover h3, a.vl-card:focus h3 { color: var(--vl-indigo); }
.vl-card-img { display: flex; align-items: center; justify-content: center; height: 180px; margin-bottom: 14px; }
.vl-card-img img { max-height: 100%; width: auto; object-fit: contain; border-radius: var(--vl-radius); }   /* rounded: product photos on dark cards are white tiles (George, 19 Oct 2026: the dummy dimmer page) */
/* Photo cards (<ul class="vl-cards vl-cards--photo">): square product photos with white margins fill the card's width
   in a 16:10 frame on the soft backdrop, so the product reads at a decent size (sockets, switches) */
.vl-cards--photo .vl-card-img { height: auto; aspect-ratio: 16 / 10; margin: -8px -8px 16px; overflow: hidden; border-radius: var(--vl-radius); background: var(--vl-surface); }
.vl-cards--photo .vl-card-img img { width: 100%; height: 100%; max-height: none; object-fit: cover; mix-blend-mode: multiply; transition: transform .5s var(--vl-ease); }
@media (hover: hover) { .vl-cards--photo .vl-card:hover .vl-card-img img { transform: scale(1.04); } }
.vl-card h3 { margin: 0; font-size: 18px; line-height: 1.3; transition: color var(--vl-speed) var(--vl-ease); }
.vl-card p { margin: 6px 0 0; color: var(--vl-slate); font-size: 15px; }
.vl-card .vl-go { margin-top: auto; padding-top: 16px; color: var(--vl-indigo); font-size: 14px; font-weight: 700; letter-spacing: .02em; }

/* Help tiles: icon + label links */
.vl-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.vl-tiles--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
/* help tiles. One or two tiles across, to fill a column of a split (about-us/quality.php:
   the certificate tile beside the four policy tiles, two by two). Below 992px the usual two across. */
.vl-tiles--1 { grid-template-columns: minmax(0, 1fr); }
.vl-tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.vl-tile { display: flex; align-items: center; gap: 14px; padding: 20px 22px; border: 1px solid var(--vl-line-soft); border-radius: var(--vl-radius); background: var(--vl-card); color: var(--vl-ink); font-size: 15px; font-weight: 700; text-decoration: none; box-shadow: var(--vl-shadow-sm); transition: box-shadow var(--vl-speed) var(--vl-ease), transform var(--vl-speed) var(--vl-ease), color var(--vl-speed) var(--vl-ease); }
.vl-tile:hover, .vl-tile:focus { box-shadow: var(--vl-shadow-md); color: var(--vl-indigo); text-decoration: none; }
.vl-tile .fa { width: 22px; color: var(--vl-indigo); font-size: 18px; text-align: center; }
.vl-helphead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 32px; margin-bottom: 24px; }
.vl-helphead h2 { margin: 0; font-size: clamp(26px, 2.4vw, 34px); font-weight: var(--vl-display); letter-spacing: -0.02em; }
.vl-helphead a { font-size: 15px; font-weight: 600; }
.vl-helphead-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; }
@media (max-width: 1199px) {
    .vl-tiles--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
    .vl-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .vl-tiles, .vl-tiles--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .vl-tile { gap: 10px; padding: 14px 12px; font-size: 14px; }
}

/* Notes: info and warning boxes */
.vl-note { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 20px; padding: 12px 16px; border-radius: 10px; background: var(--vl-chosen); color: var(--vl-ink); font-size: 15px; line-height: 1.5; }
.vl-note .fa { margin-top: 3px; color: var(--vl-indigo); }
.vl-note--notice { background: var(--vl-notice-bg); color: var(--vl-notice-ink); }
.vl-note--notice .fa { color: var(--vl-notice-mark); }

/* Side panel: a light grey box for a column of key facts or links */
.vl-panel-box { padding: clamp(22px, 2.4vw, 32px); border-radius: var(--vl-radius-lg); background: var(--vl-mist); }
.vl-panel-box h2, .vl-panel-box h3 { margin-top: 0; font-size: 18px; }
.vl-panel-box ul { margin: 0; padding-left: 20px; }

/* YouTube video with a click-to-play cover (js/varilight.js swaps in the player on click).
   <a class="vl-video" href="https://www.youtube.com/watch?v=ID" data-yt="ID"><img src="https://i.ytimg.com/vi/ID/hqdefault.jpg" alt=""><span class="vl-play"></span></a>
   Playlists: data-ytlist="LIST_ID" instead of data-yt. */
.vl-video { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--vl-radius); background: #000; }
.vl-video img { width: 100%; height: 100%; object-fit: cover; opacity: .92; transition: opacity .2s ease, transform .3s ease; }
a.vl-video:hover img, a.vl-video:focus img { opacity: 1; transform: scale(1.02); }
.vl-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.vl-video--feature .vl-play { width: 84px; height: 84px; margin: -42px 0 0 -42px; }
.vl-play { position: absolute; top: 50%; left: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgba(255, 255, 255, 0.94); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); transition: background-color .15s ease; }
.vl-play::after { content: ""; position: absolute; top: 50%; left: 50%; margin: -11px 0 0 -6px; border-top: 11px solid transparent; border-bottom: 11px solid transparent; border-left: 18px solid var(--vl-navy); }
a.vl-video:hover .vl-play, a.vl-video:focus .vl-play { background: var(--vl-sky); }
.vl-videos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
/* Videos in sections (VARILIGHT TV): a heading with its help link, then smaller cards, a line between sections */
.vl-video-group + .vl-video-group { margin-top: clamp(32px, 3.5vw, 56px); padding-top: clamp(32px, 3.5vw, 56px); border-top: 1px solid var(--vl-line); }
.vl-video-group-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 20px; }
.vl-video-group-head h2 { margin: 0; font-size: clamp(22px, 2vw, 30px); font-weight: var(--vl-display); letter-spacing: -0.015em; }
.vl-videos--small { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.vl-videos--small h3 { font-size: 15px; line-height: 1.35; }
@media (max-width: 991px) { .vl-videos--small { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vl-video-group + .vl-callout { margin-top: clamp(32px, 3.5vw, 56px); }
/* VARILIGHT TV's playlists (the home page's cards, on white): five across, the stack behind each cover in grey */
.vl-video-group .vl-videos--lists { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
.vl-video-group .vl-videos--lists h3 { font-size: 15px; line-height: 1.35; }
.vl-video-group .vl-pl-stack::before { background: var(--vl-line-soft); }
.vl-video-group .vl-pl-stack::after { background: var(--vl-line); }
.vl-video-group .vl-pl-link { display: inline-block; margin-top: 4px; font-size: 14px; }
@media (max-width: 1199px) { .vl-video-group .vl-videos--lists { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .vl-video-group .vl-videos--lists { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vl-videos h3 { margin: 14px 0 0; font-size: 17px; }
@media (max-width: 991px) {
    .vl-videos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .vl-videos { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .vl-play { width: 52px; height: 52px; margin: -26px 0 0 -26px; }
    .vl-play::after { margin: -9px 0 0 -5px; border-top-width: 9px; border-bottom-width: 9px; border-left-width: 15px; }
}

/* Accordion: <details class="vl-acc"><summary>Title</summary><div class="vl-acc-body">...</div></details>
   Uses the browser's built-in <details>, so it needs no JavaScript. */
.vl-acc { margin: 0 0 10px; border: 1px solid var(--vl-line); border-radius: var(--vl-radius); background: var(--vl-card); transition: box-shadow var(--vl-speed) var(--vl-ease), border-color var(--vl-speed) var(--vl-ease); }
.vl-acc[open] { border-color: transparent; box-shadow: var(--vl-shadow-md); }
.vl-acc > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; color: var(--vl-ink); font-size: 17px; font-weight: 700; list-style: none; cursor: pointer; }
.vl-acc > summary::-webkit-details-marker { display: none; }
.vl-acc > summary::after { content: "\f107"; font-family: FontAwesome; color: var(--vl-indigo); font-size: 20px; transition: transform var(--vl-speed) var(--vl-ease); }
.vl-acc[open] > summary::after { transform: rotate(180deg); }
.vl-acc > summary:hover { color: var(--vl-indigo); }
.vl-acc > summary small { margin-left: auto; color: var(--vl-slate); font-size: 14px; font-weight: 400; }
.vl-acc-body { padding: 0 20px 18px; }

/* Image gallery grid for page photos */
.vl-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin: 0 0 24px; padding: 0; list-style: none; }
.vl-gallery-grid img { width: 100%; border-radius: var(--vl-radius); }


/* Page banner: full-width logo strip at the top of the first content band (smart pages, primed) */
/* Banners show at their own size (they are made for it), never wider, shrinking on narrow screens */
.vl-banner { display: block; width: auto; max-width: 100%; height: auto; margin: 0 0 32px; border-radius: var(--vl-radius); }

/* Card grids with a fixed number of columns (.vl-cards alone fills as many as fit) */
.vl-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 960px; }
.vl-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Exactly four across (about-us/lifetime-guarantee.php "What's covered"); ".vl-cards" alone
   fills as many 240px columns as fit, so four cards left two empty columns at 1920. Two across on
   tablets, one on phones. */
.vl-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1199px) { .vl-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .vl-cards--4 { grid-template-columns: minmax(0, 1fr); } }
/* Five across on wide screens (Socket types), three on laptops, two on tablets, one on phones */
.vl-cards--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1599px) { .vl-cards--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 991px) { .vl-cards--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .vl-cards--5 { grid-template-columns: minmax(0, 1fr); } }
/* Photos shown whole, not zoomed to fill (non-standard sockets: George, 19 Oct 2026, the zoom cut them badly) */
.vl-cards--whole .vl-card-img { height: auto; aspect-ratio: 4 / 3; margin: -8px -8px 16px; overflow: hidden; border-radius: var(--vl-radius); background: var(--vl-photo); }
.vl-cards--whole .vl-card-img img { width: 100%; height: 100%; max-height: none; object-fit: contain; border-radius: 0; mix-blend-mode: multiply; }   /* the photo's white takes the frame's colour, as the other photo tiles (dark mode: George, 19 Oct 2026) */
.vl-card .vl-card-meta { margin-top: 10px; color: var(--vl-slate); font-size: 13px; }

/* Type guides (Socket types, Switch types): a featured pair, and a comparison table */
.vl-feature-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.5vw, 40px); }
.vl-feature-tile { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(20px, 2vw, 32px); align-items: center; padding: clamp(18px, 2vw, 28px); border-radius: var(--vl-radius-lg); background: var(--vl-mist); }
.vl-feature-tile-pic { display: block; overflow: hidden; aspect-ratio: 1 / 1; border-radius: var(--vl-radius); background: var(--vl-photo); }
.vl-feature-tile-pic img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .5s var(--vl-ease); }
@media (hover: hover) { .vl-feature-tile-pic:hover img { transform: scale(1.04); } }
.vl-feature-tile h3 { margin: 0 0 14px; font-size: clamp(20px, 1.6vw, 26px); line-height: 1.25; }
.vl-feature-tile .vl-checklist { margin-bottom: 12px; }
.vl-feature-tile .vl-muted { margin: 0 0 16px; font-size: 14px; }
@media (max-width: 1199px) { .vl-feature-pair { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 575px) { .vl-feature-tile { grid-template-columns: minmax(0, 1fr); } }
.vl-compare { margin: 0; border-radius: var(--vl-radius-lg); box-shadow: var(--vl-shadow-sm); }
.vl-compare .vl-table { min-width: 980px; }
.vl-compare .vl-table th, .vl-compare .vl-table td { padding: 14px 16px; vertical-align: middle; }
.vl-compare .vl-table thead th { background: var(--vl-card); font-size: 13px; letter-spacing: .02em; color: var(--vl-slate); }
.vl-compare tbody th { font-weight: 600; }
.vl-compare-item { display: flex; align-items: center; gap: 14px; color: var(--vl-ink); text-decoration: none; }
.vl-compare-item:hover, .vl-compare-item:focus { color: var(--vl-indigo); }
.vl-compare-item img { flex: 0 0 56px; border-radius: 8px; background: var(--vl-photo); object-fit: contain; }
.vl-compare-item small { display: block; margin-top: 2px; color: var(--vl-slate); font-size: 12px; font-weight: 400; }
/* The USB-C fast chargers (45W and 65W) in gold, as the gold display stockists (.vl-shop--gold): a gold edge and a
   light gold wash, in the table and on their featured tiles */
.vl-compare-more { margin: 20px 0 0; }
.vl-compare-gold td, .vl-compare-gold th { background: rgba(217, 165, 33, 0.10); }
.vl-compare-gold th { box-shadow: inset 4px 0 0 #d9a521; }
.vl-tag--gold { background: #d9a521; color: #1d1600; }
.vl-feature-tile--gold { border: 1px solid #e2c27a; background: rgba(217, 165, 33, 0.08); box-shadow: inset 0 4px 0 #d9a521; }
.vl-compare td .fa-check { color: var(--vl-indigo); }
.vl-tag--plain { background: var(--vl-mist); color: var(--vl-ink); }
.vl-compare-gold .vl-tag--plain { background: var(--vl-card); }

.vl-card > img { display: block; width: 100%; margin-bottom: 14px; border-radius: 8px; }   /* image straight inside a card */
.vl-gallery-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 991px) {
    .vl-cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .vl-cards--2, .vl-cards--3, .vl-gallery-grid--2 { grid-template-columns: minmax(0, 1fr); }
    .vl-gallery-grid.vl-gallery-grid--phone2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }   /* example photos stay 2 x 2 */
}


/* Dimmer and lighting pages (/dimmers/, /lighting/; markup from includes/dimmers-helpers.php) */
/* Page banner image at the top of a content band
   (v-dim, v-plus, v-plus-ir, v-pro-ir, v-pro-multi-point, v-com, grid-dimmers, oem-dimmer-modules,
   f-series-dimmers, dimmers-for-leds, v-pro, v-led, v-pro-multiway-rotary-dimmers, v-pro-micro-inline-dimmer-packs) */
.vl-dim-banner { display: block; width: 100%; height: auto; margin: 0 0 40px; border-radius: var(--vl-radius); }

/* Compatibility and data tables (vl_dim_table): row headings in the first column, notes left-aligned.
   All compatibility-*.php pages, dimmer-compatibility-guide, dimmable-transformers, replacement-dimmer-modules */
.vl-dim-table th[scope="row"] { min-width: 180px; background: var(--vl-hover); font-weight: 700; }
.vl-dim-table td, .vl-dim-table th { border: 1px solid var(--vl-line); }
.vl-dim-table thead th { vertical-align: bottom; }
.vl-dim-table img { max-height: 48px; width: auto; }
.vl-dim-tick { color: #2e7d32; font-size: 26px; }   /* "suitable" tick, compatibility-lamp-type */
@media (max-width: 767px) {
    .vl-dim-table th[scope="row"] { min-width: 130px; }
}

/* Lamp type grid: logos as column and row headings (compatibility-lamp-type, dimmer-compatibility-guide) */
.vl-dim-matrix th, .vl-dim-matrix td { text-align: center; vertical-align: middle; }
.vl-dim-matrix img { max-height: 44px; }
.vl-dim-matrix tbody th[scope="row"] img { max-height: 70px; }

/* Series logo above a compatibility table (compatibility-*.php) */
.vl-dim-logo { display: block; max-height: clamp(64px, 5.5vw, 96px); width: auto; margin: 0 0 24px; }   /* larger on wide screens (George, 19 Oct 2026: logos a bit small) */

/* Selection guide cards (vl_dim_cards): which-is-the-best-dimmer, best-dimmers-for-*.php,
   also v-pro-micro-inline-dimmer-packs (two models) and grid-dimmers (module finishes) */
.vl-dim-cards { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.vl-prose + .vl-dim-cards, .vl-dim-cards + .vl-prose { margin-top: 24px; }
.vl-dim-cards .vl-card-img { height: 120px; }
.vl-dim-badge { color: var(--vl-indigo); font-family: var(--vl-font); font-size: 34px; font-weight: 700; line-height: 1.1; text-align: center; }

/* A row of logos: guarantee / British made / 50 years (v-pro, v-led), dimmer series (oem-dimmer-modules) */
.vl-dim-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; margin: 24px 0; }
.vl-dim-side .vl-dim-logos { justify-content: center; }
.vl-dim-logos img { max-height: 80px; width: auto; }
.vl-dim-logos .vl-trust-logo { width: 120px; height: auto; max-height: none; }

/* Side column: product photo and stacked panels (v-pro, v-led, v-com, v-dim, v-plus ...) */
.vl-dim-side > * + * { margin-top: 20px; }
.vl-dim-side img.vl-dim-photo { display: block; max-height: 320px; width: auto; margin: 0 auto; border-radius: var(--vl-radius); }
.vl-panel-box .vl-dim-panel-logo { display: block; max-height: 56px; width: auto; margin: 0 0 14px; }

/* Two products side by side with a caption (v-pro-micro-inline-dimmer-packs, specialist-modules) */
.vl-dim-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.vl-dim-products img { display: block; max-height: 260px; width: auto; margin: 0 auto 12px; }

/* "PowerGrid" caption under a series logo in a table cell (dimmer-compatibility-guide) */
.vl-dim-cap { display: block; margin-top: 4px; font-size: 13px; font-weight: 700; letter-spacing: .02em; }

/* Four equal panels in a row (dimmers-for-leds) */
.vl-dim-cols { margin-bottom: 16px; }
.vl-dim-cols > [class*="col-"] { margin-bottom: 24px; }
.vl-dim-cols .vl-panel-box { height: 100%; }
.vl-dim-more { margin: 14px 0 0; }
@media (min-width: 768px) {
    .vl-dim-cols { display: flex; flex-wrap: wrap; }
}


/* Dimmer chooser (dimmers/which-is-the-best-dimmer.php; js/varilight.js section 16).
   The script draws everything inside [data-vl-dimmer-chooser]; without JavaScript only the .vl-dc-nojs
   line shows (and the "Our dimmer ranges" cards below it). */
.vl-dc { max-width: 980px; min-height: 360px; }
/* Dimmer chooser: wider on big screens so the five first answers sit in one row */
@media (min-width: 1600px) {
    .vl-dc { max-width: 1440px; }
}
.vl-js .vl-dc-nojs { display: none; }
.vl-dc-nojs { color: var(--vl-slate); }

/* Back / Start again */
.vl-dc-bar { display: flex; justify-content: space-between; margin-bottom: 6px; }
.vl-dc-bar[hidden] { display: none; }
.vl-dc-textbtn { padding: 8px 0; border: 0; background: none; color: var(--vl-indigo); font-size: 15px; font-weight: 600; cursor: pointer; }
.vl-dc-textbtn:hover, .vl-dc-textbtn:focus-visible { color: var(--vl-indigo-hover); text-decoration: underline; text-underline-offset: 3px; }

/* Each step slides in gently (switched off by the site-wide reduced-motion rule) */
.vl-dc-stage.is-new { animation: vl-dc-in .28s ease both; }
@keyframes vl-dc-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Answers so far: each chip goes back to its question */
.vl-dc-trail { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; }
.vl-dc-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 4px 14px; border: 1px solid var(--vl-line); border-radius: 17px; background: var(--vl-mist); color: var(--vl-ink); font-size: 14px; font-weight: 600; line-height: 1.3; text-align: left; cursor: pointer; transition: border-color .15s ease; }
.vl-dc-chip .fa { color: var(--vl-slate); font-size: 12px; }
.vl-dc-chip:hover, .vl-dc-chip:focus-visible { border-color: var(--vl-indigo); }

/* Question */
.vl-dc-count { margin: 0 0 6px; color: var(--vl-slate); font-size: 14px; font-weight: 700; }
.vl-dc-q { margin: 0 0 8px; font-size: clamp(24px, 3vw, 32px); line-height: 1.2; outline: none; }
.vl-dc-hint { max-width: 720px; margin: 0; color: var(--vl-slate); font-size: 17px; }
.vl-dc-small { color: var(--vl-slate); font-size: 14px; }

/* Answers: big buttons */
.vl-dc-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; margin: 22px 0 16px; }
.vl-dc-options--tiles { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.vl-dc-options--tiles .vl-dc-opt { flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px 40px 16px 16px; }
.vl-dc-options--tiles .vl-dc-opt-go { top: 26px; margin-top: 0; }
.vl-dc-opt { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 78px; padding: 14px 44px 14px 16px; border: 1px solid var(--vl-line); border-radius: var(--vl-radius); background: var(--vl-card); color: var(--vl-ink); text-align: left; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.vl-dc-opt:hover, .vl-dc-opt:focus-visible { border-color: var(--vl-indigo); box-shadow: 0 0 0 1px var(--vl-indigo); }
.vl-dc-opt.is-selected { border-color: var(--vl-indigo); box-shadow: 0 0 0 2px var(--vl-indigo); }
.vl-dc-opt[disabled] { border-color: var(--vl-line); box-shadow: none; opacity: .5; cursor: not-allowed; }
.vl-dc-opt--unsure { border-style: dashed; background: var(--vl-mist); }
.vl-dc-ico { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; background: var(--vl-mist); color: var(--vl-indigo); font-size: 21px; line-height: 44px; text-align: center; }
.vl-dc-opt--unsure .vl-dc-ico { background: var(--vl-card); }
.vl-dc-opt-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vl-dc-opt-label { font-size: 17px; font-weight: 700; line-height: 1.3; }
.vl-dc-opt-hint { color: var(--vl-slate); font-size: 14px; line-height: 1.4; }
.vl-dc-opt-meta { margin-top: 4px; color: var(--vl-indigo); font-size: 13px; font-weight: 700; }
.vl-dc-opt-go { position: absolute; top: 50%; right: 16px; margin-top: -12px; color: var(--vl-indigo); font-size: 24px; line-height: 24px; }
.vl-dc-num { flex: 0 0 46px; width: 46px; height: 46px; border-radius: 12px; background: var(--vl-navy); color: #fff; font-size: 21px; font-weight: 800; line-height: 46px; text-align: center; }

/* Plate drawings on the "how many dimmers" step */
.vl-dc-plate { display: inline-flex; flex: 0 0 auto; gap: 5px; padding: 7px; border: 2px solid var(--vl-slate); border-radius: 8px; background: var(--vl-card); }
.vl-dc-plate i { width: 14px; height: 14px; border-radius: 50%; background: var(--vl-indigo); }
.vl-dc-plate--3, .vl-dc-plate--4 { padding-left: 11px; padding-right: 11px; }

/* "How can I tell?" help */
.vl-dc-tip { margin: 6px 0 0; }
.vl-dc-tip summary { display: inline-flex; align-items: center; gap: 6px; color: var(--vl-indigo); font-weight: 600; cursor: pointer; list-style: none; }
.vl-dc-tip summary::-webkit-details-marker { display: none; }
.vl-dc-tip p { max-width: 720px; margin: 10px 0 0; padding: 14px 16px; border-radius: var(--vl-radius); background: var(--vl-mist); font-size: 15px; }

/* Lighting step: number of bulbs and watts each, with a live total */
.vl-dc-load { max-width: 680px; }
.vl-dc-field { margin: 22px 0; }
.vl-dc-label { display: block; margin-bottom: 8px; font-weight: 700; }
.vl-dc-stepper { display: inline-flex; overflow: hidden; border: 1px solid var(--vl-line); border-radius: var(--vl-radius); }
.vl-dc-stepper button { width: 54px; height: 54px; border: 0; background: var(--vl-mist); color: var(--vl-indigo); font-size: 18px; cursor: pointer; }
.vl-dc-stepper button:hover { background: var(--vl-line); }
.vl-dc-stepper input { width: 92px; height: 54px; border: 0; border-right: 1px solid var(--vl-line); border-left: 1px solid var(--vl-line); font-size: 22px; font-weight: 700; text-align: center; -moz-appearance: textfield; appearance: textfield; }
.vl-dc-stepper input::-webkit-outer-spin-button, .vl-dc-stepper input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
.vl-dc-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vl-dc-pill { min-width: 66px; height: 46px; padding: 0 16px; border: 1px solid var(--vl-line); border-radius: 23px; background: var(--vl-card); color: var(--vl-ink); font-size: 16px; font-weight: 700; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.vl-dc-pill:hover { border-color: var(--vl-indigo); }
.vl-dc-pill.is-selected { border-color: var(--vl-indigo); background: var(--vl-indigo); color: var(--vl-on-accent); }
.vl-dc-other { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 600; }
.vl-dc-other input { width: 96px; height: 46px; padding: 0 14px; border: 1px solid var(--vl-line); border-radius: 23px; font-size: 16px; }
.vl-dc-readout { margin: 6px 0 4px; padding: 14px 16px; border-left: 4px solid var(--vl-indigo); border-radius: 0 var(--vl-radius) var(--vl-radius) 0; background: var(--vl-mist); font-size: 16px; }
.vl-dc-readout:empty { display: none; }
.vl-dc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin: 22px 0; }

/* Finish step: collection buttons, then swatches with what's available */
.vl-dc-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 20px; }
.vl-dc-tab { height: 40px; padding: 0 16px; border: 1px solid var(--vl-line); border-radius: 20px; background: var(--vl-card); color: var(--vl-ink); font-size: 15px; font-weight: 600; cursor: pointer; }
.vl-dc-tab:hover { border-color: var(--vl-indigo); }
.vl-dc-tab.is-selected { border-color: var(--vl-indigo); background: var(--vl-indigo); color: var(--vl-on-accent); }
.vl-dc-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.vl-dc-swatches--small { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.vl-dc-swatch { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; height: 100%; padding: 12px 10px 14px; border: 1px solid var(--vl-line); border-radius: var(--vl-radius); background: var(--vl-card); color: var(--vl-ink); text-align: center; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.vl-dc-swatch:hover, .vl-dc-swatch:focus-visible { border-color: var(--vl-indigo); box-shadow: 0 0 0 1px var(--vl-indigo); }
.vl-dc-swatch.is-selected { border-color: var(--vl-indigo); box-shadow: 0 0 0 2px var(--vl-indigo); }
.vl-dc-swatch.is-none .vl-dc-swatch-img { opacity: .4; }
.vl-dc-swatch-img { display: block; width: 100%; max-width: 120px; aspect-ratio: 1 / 1; }
.vl-dc-swatch-img img { width: 100%; height: 100%; object-fit: contain; }
.vl-dc-swatch-name { font-size: 14px; font-weight: 700; line-height: 1.3; }
.vl-dc-badge { display: inline-block; padding: 2px 9px; border-radius: 10px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.vl-dc-badge--ready { background: var(--vl-indigo); color: var(--vl-on-accent); }
.vl-dc-badge--matrix { box-shadow: inset 0 0 0 1px var(--vl-indigo); color: var(--vl-indigo); }
.vl-dc-badge--none { background: var(--vl-mist); color: var(--vl-slate); }
.vl-dc-skip { margin: 22px 0 0; }

/* The answer */
.vl-dc-eyebrow { margin: 0 0 10px; color: var(--vl-slate); font-size: 14px; font-weight: 700; }
.vl-dc-rec { display: flex; align-items: center; gap: 24px; padding: 24px; border-radius: var(--vl-radius-lg); background: var(--vl-mist); }
.vl-dc-logo { flex: 0 0 auto; width: 150px; height: auto; border-radius: 8px; background: #fff; }
.vl-dc-rating { display: inline-block; margin-left: 4px; padding: 3px 11px; border-radius: 14px; background: var(--vl-navy); color: #fff; font-size: 15px; vertical-align: middle; white-space: nowrap; }
.vl-dc-why { margin: 0; color: var(--vl-slate); font-size: 17px; }
.vl-dc-finishbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 26px 0 0; }
.vl-dc-finishbar img { width: 48px; height: 48px; border: 1px solid var(--vl-line); border-radius: 8px; background: var(--vl-photo); object-fit: contain; }
.vl-dc-h3 { margin: 26px 0 12px; font-size: 22px; }
.vl-dc-group { margin: 0 0 18px; }
.vl-dc-group h4 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 8px; font-size: 16px; }
.vl-dc-need { padding: 2px 10px; border-radius: 12px; background: var(--vl-indigo); color: var(--vl-on-accent); font-size: 13px; }
.vl-dc-prods { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.vl-dc-prod { display: flex; align-items: center; gap: 16px; padding: 12px 16px 12px 12px; border: 1px solid var(--vl-line); border-radius: var(--vl-radius); background: var(--vl-card); }
.vl-dc-prod-img { flex: 0 0 auto; }
.vl-dc-img { display: block; width: 96px; height: 96px; }
.vl-dc-img img { width: 100%; height: 100%; object-fit: contain; }
.vl-dc-img img.is-broken, .vl-dc-swatch-img img.is-broken { visibility: hidden; }
.vl-dc-prod-body { flex: 1 1 auto; min-width: 0; }
.vl-dc-prod-code { margin: 0; font-size: 17px; font-weight: 800; }
.vl-dc-prod-desc { margin: 2px 0 10px; color: var(--vl-slate); font-size: 15px; line-height: 1.4; }
.vl-dc-prod-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0; }
.vl-dc-buy { font-size: 14px; font-weight: 600; }
.vl-dc-qty { display: inline-block; padding: 1px 8px; border-radius: 10px; background: var(--vl-mist); font-size: 13px; font-weight: 700; }
.vl-dc-more { margin-top: 8px; }
.vl-dc-more summary { color: var(--vl-indigo); font-weight: 600; cursor: pointer; }
.vl-dc-more .vl-dc-prods { margin-top: 8px; }
.vl-dc-group--others { padding: 16px; border-radius: var(--vl-radius); background: var(--vl-mist); }
.vl-dc-group--others .vl-dc-small { margin: 0 0 10px; }
/* The other switches: a dummy dimmer, a rocker, a toggle or keep the switch (radio cards), then "Add to my list" */
.vl-dc-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.vl-dc-choice { position: relative; display: flex; gap: 10px; margin: 0; padding: 12px 14px; border: 1px solid var(--vl-line); border-radius: var(--vl-radius); background: var(--vl-card); font-weight: 400; cursor: pointer; transition: border-color var(--vl-speed) var(--vl-ease), box-shadow var(--vl-speed) var(--vl-ease); }
.vl-dc-choice:hover { border-color: var(--vl-indigo); }
.vl-dc-choice.is-on { border-color: var(--vl-indigo); box-shadow: 0 0 0 1px var(--vl-indigo); }
.vl-dc-choice input { flex: 0 0 auto; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--vl-indigo); }
.vl-dc-choice-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.vl-dc-choice-body > strong { font-size: 15px; line-height: 1.35; }
.vl-dc-minis { display: flex; flex-direction: column; gap: 8px; }
.vl-dc-mini { display: flex; align-items: center; gap: 10px; }
.vl-dc-mini .vl-dc-img { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 8px; background: var(--vl-surface); }
.vl-dc-mini .vl-dc-img img { mix-blend-mode: multiply; }
.vl-dc-mini-text { min-width: 0; font-size: 14px; font-weight: 700; line-height: 1.3; }
.vl-dc-mini-text small { display: block; margin-top: 2px; color: var(--vl-slate); font-size: 13px; font-weight: 400; }
.vl-dc-addlist { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 22px 0 0; padding: 18px 20px; border-radius: var(--vl-radius); background: var(--vl-mist); }
.vl-dc-addlist .vl-dc-small { margin: 0; }
.vl-dc-added { flex: 1 1 100%; margin: 0; font-weight: 700; }
.vl-dc-added:empty { display: none; }
.vl-dc-added .fa { margin-right: 4px; color: var(--vl-green, #1a8f4c); }
.vl-dc-subhead { margin: 22px 0 10px; font-weight: 700; }
.vl-dc-alert { margin: 20px 0; padding: 18px 20px; border-radius: var(--vl-radius); background: var(--vl-notice-bg); color: var(--vl-notice-ink); }
.vl-dc-alert p { margin: 0 0 12px; }
.vl-dc-alert p:last-child { margin: 0; }
.vl-dc-notes { margin: 26px 0 18px; padding: 16px 18px 16px 36px; border-radius: var(--vl-radius); background: var(--vl-mist); font-size: 15px; }
.vl-dc-notes li + li { margin-top: 6px; }
.vl-dc-links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 18px 0; padding: 0; list-style: none; }
.vl-dc-links a { font-weight: 600; }
.vl-dc-resume { margin: 18px 0 0; }

@media (max-width: 767px) {
    .vl-dc-options { grid-template-columns: minmax(0, 1fr); }
    .vl-dc-trail { gap: 6px; margin-bottom: 18px; }
    .vl-dc-chip { min-height: 30px; padding: 3px 11px; font-size: 13px; }
    .vl-dc-options--tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vl-dc-options--tiles .vl-dc-opt { padding-right: 16px; }
    .vl-dc-options--tiles .vl-dc-opt-go { display: none; }
    .vl-dc-opt { min-height: 66px; }
    .vl-dc-rec { flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px; }
    .vl-dc-logo { width: 120px; }
    .vl-dc-prod { align-items: flex-start; gap: 12px; }
    .vl-dc-img { width: 72px; height: 72px; }
    .vl-dc-swatches { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .vl-dc-swatch { padding: 8px 6px 10px; }
}


/* --------------------------------------------------------------------------
   Feature header (includes/feature-head.php): the page title with the page's feature photo built in.
   --photo: the photo fills the header and a navy fade on the left carries the title (clean photos);
     --extend keeps it going behind the next blocks (intro, finish grid), fading to navy (Lily).
   --showcase: navy title band with the picture whole on a large card that overhangs the band below
   (collages and banners with their own lettering, which mustn't be covered or cropped); the title column
   carries the rest of a short introduction (.vl-feature-body) so it stands level with the picture.
   Phones: the photo above the title; the card under it.
   -------------------------------------------------------------------------- */
:root { --vl-fh-overlap: clamp(44px, 5vw, 96px); }   /* how far a showcase card hangs into the band below */
.vl-feature { position: relative; z-index: 1; background: var(--vl-navy); color: rgba(255, 255, 255, .88); }
.vl-feature h1 { margin: 0; color: #fff; font-size: clamp(34px, 4vw, 60px); line-height: 1.05; }
.vl-feature .vl-crumbs, .vl-feature .vl-crumbs a { color: rgba(255, 255, 255, .72); }
.vl-feature .vl-crumbs a:hover, .vl-feature .vl-crumbs a:focus { color: #fff; }
.vl-feature .vl-crumbs li + li::before { color: rgba(255, 255, 255, .45); }
.vl-feature-tag { margin: 0 0 10px; color: var(--vl-sky); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.vl-feature .vl-feature-lede { max-width: 600px; margin: 18px 0 0; color: rgba(255, 255, 255, .9); font-size: clamp(17px, 1.35vw, 20px); line-height: 1.55; }
.vl-feature-lede a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.vl-feature .vl-feature-sub { margin: 12px 0 0; color: var(--vl-sky); font-size: clamp(17px, 1.3vw, 20px); font-weight: 600; line-height: 1.45; }
.vl-feature-sub strong, .vl-feature-sub em { color: inherit; }
.vl-feature-logo { display: block; width: auto; max-width: clamp(220px, 18vw, 340px); height: clamp(56px, 4.6vw, 88px); margin: 0 0 18px; padding: 8px 12px; object-fit: contain; border-radius: 10px; background: #fff; }   /* scales with the screen (George, 19 Oct 2026) */
.vl-feature .vl-feature-actions { margin: 28px 0 0; }

/* The rest of the introduction beside the picture: paragraphs, chips, a checklist or numbered steps, on navy */
.vl-feature-body { max-width: 600px; margin-top: 20px; }
.vl-feature-body > :first-child { margin-top: 0; }
.vl-feature-body > :last-child { margin-bottom: 0; }
.vl-feature-body p { margin: 14px 0 0; color: rgba(255, 255, 255, .76); font-size: 16px; line-height: 1.65; }
.vl-feature-body a:not(.vl-btn) { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.vl-feature-body a:not(.vl-btn):hover, .vl-feature-body a:not(.vl-btn):focus { color: var(--vl-sky); }
.vl-feature-body .vl-checklist { margin: 14px 0 0; }
.vl-feature-body .vl-checklist li { padding-top: 8px; padding-bottom: 8px; border-bottom-color: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .9); font-size: 16px; }
.vl-feature-body .vl-checklist li:last-child { border-bottom: 0; }
.vl-feature-body .vl-checklist li::before { top: 9px; color: var(--vl-sky); }
.vl-feature-body .vl-steps { margin: 18px 0 0; }
.vl-feature-body .vl-steps > li { min-height: 34px; padding: 4px 0 16px 52px; }
.vl-feature-body .vl-steps > li::before { width: 34px; height: 34px; background: var(--vl-sky); color: var(--vl-navy); font-size: 15px; line-height: 34px; }
.vl-feature-body .vl-steps > li::after { top: 40px; left: 16px; background: rgba(255, 255, 255, .2); }
.vl-feature-body .vl-steps p { color: rgba(255, 255, 255, .9); font-size: 16px; line-height: 1.55; }

/* Chips: a few short facts as pills (Classic's three plate styles); on paper or on navy */
.vl-chips { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.vl-chips li { padding: 8px 16px; border: 1px solid var(--vl-line); border-radius: 999px; color: var(--vl-ink); font-size: 15px; font-weight: 600; line-height: 1.2; }
.vl-feature .vl-chips li, .vl-band--navy .vl-chips li { border-color: rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .07); color: #fff; }

.vl-feature--photo { overflow: hidden; }
.vl-feature--photo .vl-feature-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vl-feature--photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(10, 12, 52, .94) 0%, rgba(10, 12, 52, .82) 30%, rgba(10, 12, 52, .3) 60%, rgba(10, 12, 52, 0) 78%), linear-gradient(0deg, rgba(10, 12, 52, .45) 0%, rgba(10, 12, 52, 0) 40%); }
.vl-feature--photo .vl-feature-inner { position: relative; z-index: 2; display: flex; align-items: flex-end; min-height: clamp(400px, 40vw, 620px); padding-top: 56px; padding-bottom: clamp(40px, 4.5vw, 72px); }
.vl-feature--photo .vl-feature-text { max-width: 620px; }
/* --extend: the photo carries on behind the next blocks under a navy veil that thickens as it goes down */
.vl-feature--extend::before { background: linear-gradient(90deg, rgba(10, 12, 52, .92) 0%, rgba(10, 12, 52, .74) 30%, rgba(10, 12, 52, .22) 60%, rgba(10, 12, 52, 0) 78%); }
.vl-feature--extend .vl-feature-inner { min-height: clamp(380px, 34vw, 600px); padding-bottom: clamp(28px, 3vw, 48px); }
.vl-feature-more { position: relative; z-index: 2; padding: clamp(32px, 3.5vw, 56px) 0 var(--vl-band-pad); background: linear-gradient(180deg, rgba(10, 12, 52, 0) 0, rgba(10, 12, 52, .74) clamp(180px, 16vw, 320px), rgba(10, 12, 52, .88) 100%); color: rgba(255, 255, 255, .82); }
.vl-feature-more h2, .vl-feature-more h3 { color: #fff; }
.vl-feature-more p, .vl-feature-more .vl-head p { color: rgba(255, 255, 255, .8); }
.vl-feature-more a:not(.vl-btn):not(.vl-plate) { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.vl-feature-more a:not(.vl-btn):not(.vl-plate):hover, .vl-feature-more a:not(.vl-btn):not(.vl-plate):focus { color: var(--vl-sky); }
.vl-feature-more .vl-plate { box-shadow: 0 10px 30px rgba(4, 6, 30, .35); }

.vl-feature--showcase .vl-feature-inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 80px); align-items: center; padding-top: clamp(36px, 4vw, 64px); }
.vl-feature--showcase .vl-feature-text { padding-bottom: clamp(36px, 4vw, 64px); }
/* The card always sits on the foot of the band and hangs into the next one by the same amount, however long the text */
.vl-feature-card { align-self: end; margin: 0 0 calc(-1 * var(--vl-fh-overlap)); overflow: hidden; border-radius: 18px; background: #fff; box-shadow: 0 28px 60px rgba(8, 10, 45, .3), 0 4px 14px rgba(8, 10, 45, .12); }
.vl-feature-card img { display: block; width: 100%; height: auto; }
/* --narrow: a square picture on a card no wider than it needs, the text column taking the rest */
@media (min-width: 768px) { .vl-feature--narrow .vl-feature-inner { grid-template-columns: minmax(0, 1fr) minmax(0, clamp(340px, 36vw, 620px)); } }
.vl-feature--narrow .vl-feature-card { justify-self: end; width: 100%; }
.vl-feature--narrow .vl-feature-lede, .vl-feature--narrow .vl-feature-body { max-width: 760px; }
/* --wide: a wide, short picture (Multi-Point's diagram, Multiway's cartoon) runs the full width under the words; above
   it the title on the left and the words on the right, so neither column is left half empty */
.vl-feature--wide .vl-feature-inner { grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 3vw, 48px); }
.vl-feature--wide .vl-feature-text { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 clamp(28px, 4vw, 80px); align-items: start; padding-bottom: 0; }
.vl-feature--wide .vl-crumbs { grid-column: 1 / -1; }
.vl-feature--wide .vl-feature-words > :first-child { margin-top: 0; }
.vl-feature--wide .vl-feature-lede, .vl-feature--wide .vl-feature-body { max-width: 860px; }
.vl-feature--wide .vl-feature-card { justify-self: stretch; }
@media (min-width: 1200px) {
    .vl-feature--wide .vl-feature-body .vl-checklist { columns: 2; column-gap: 40px; }
    .vl-feature--wide .vl-feature-body .vl-checklist li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .12); }
}
@media (max-width: 991px) {
    .vl-feature--wide .vl-feature-text { grid-template-columns: minmax(0, 1fr); }
    .vl-feature--wide .vl-feature-words { margin-top: 18px; }
}
/* The band after a showcase starts under the card's overhang, whatever its colour */
.vl-feature--showcase + .vl-band { padding-top: calc(var(--vl-fh-overlap) + clamp(32px, 3.5vw, 56px)); }

@media (max-width: 767px) {
    :root { --vl-fh-overlap: 32px; }
    .vl-feature--photo .vl-feature-img { position: static; display: block; height: auto; aspect-ratio: 3 / 2; }
    .vl-feature--photo::before { display: none; }
    .vl-feature--photo .vl-feature-inner { display: block; min-height: 0; padding-top: 24px; padding-bottom: 32px; }
    .vl-feature--extend .vl-feature-inner { padding-bottom: 8px; }
    .vl-feature-more { padding-top: 16px; background: none; }
    .vl-feature--showcase .vl-feature-inner { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: 24px; }
    .vl-feature--showcase .vl-feature-text { padding-bottom: 0; }
    .vl-feature-card { border-radius: 12px; }
}
@media print {
    .vl-feature { background: none; color: #000; }
    .vl-feature h1, .vl-feature .vl-feature-lede, .vl-feature-body p, .vl-feature-body li, .vl-feature-more, .vl-feature-more h2, .vl-feature-more p { color: #000; }
    .vl-feature--photo .vl-feature-img, .vl-feature--photo::before, .vl-feature-card { display: none; }
    .vl-feature--photo .vl-feature-inner { min-height: 0; padding: 0 0 12pt; }
    .vl-feature-more { padding: 0; background: none; }
    .vl-feature--showcase + .vl-band { padding-top: 12pt; }
}

/* An introduction that reads as one comfortable column under a feature header */
.vl-intro { max-width: 820px; }
.vl-intro > :first-child { margin-top: 0; }
.vl-intro p { font-size: 17px; line-height: 1.7; }

/* A small set of finishes (3 or 4) beside their heading, so the tiles stay the size of the bigger grids */
.vl-finish-row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 4vw, 80px); align-items: center; }
.vl-finish-row > .vl-head { margin-bottom: 0; }
@media (max-width: 991px) {
    .vl-finish-row { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

/* How it works with a banner (Primed): the heading, the range banner at no more than its own width, the steps in a row
   under it, all on one centred column the banner's width */
.vl-howto { max-width: 1142px; margin: 0 auto; }
.vl-howto h2 { margin: 0 0 24px; font-size: clamp(30px, 3vw, 44px); font-weight: var(--vl-display); line-height: 1.12; letter-spacing: -0.02em; text-align: center; }
.vl-howto-banner { display: block; width: 100%; height: auto; margin: 0 0 36px; border-radius: var(--vl-radius-lg); box-shadow: var(--vl-shadow-md); }
/* Numbered steps in a row: the circles joined by a line, the words under each (phones: the usual column) */
.vl-steps--row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-bottom: 0; }
.vl-steps--row > li { min-height: 0; padding: 56px 0 0; }
.vl-steps--row > li::after { top: 19px; right: -18px; bottom: auto; left: 52px; width: auto; height: 2px; }
.vl-steps--row p { color: var(--vl-ink); font-size: 17px; line-height: 1.5; }
@media (max-width: 767px) {
    .vl-steps--row { display: block; }
    .vl-steps--row > li { min-height: 40px; padding: 4px 0 20px 60px; }
    .vl-steps--row > li::after { top: 46px; right: auto; bottom: 6px; left: 19px; width: 2px; height: auto; }
    .vl-howto h2 { text-align: left; }
}


/* --------------------------------------------------------------------------
   Content layout kit (October 2026)
   Building blocks for text-led pages (the old CMS content): use them to give a page shape
   instead of one long column. Wording stays as it is; these only change the layout.

   Split: picture beside text. --rev puts the picture on the left; --text-wide gives the text 7/12.
     <div class="vl-split">
         <div class="vl-split-text"> <h2>..</h2> <p>..</p> </div>
         <figure class="vl-split-media"><img src=".." alt=".."></figure>
     </div>
   Section spacing inside one band: <div class="vl-section"> .. </div><div class="vl-section"> .. </div>
   Lead paragraph (the first, most important sentence or two): <p class="vl-lede">..</p>
   Tick list (feature lists), optionally in 2 or 3 columns: <ul class="vl-checklist vl-checklist--2"><li>..</li></ul>
   Key figures, only figures already in the page's copy:
     <dl class="vl-keyfacts"><div><dt>100W</dt><dd>of dimmable LED</dd></div> .. </dl>
   Numbered steps (instructions): <ol class="vl-steps"><li><h3>..</h3><p>..</p></li></ol>  (h3 optional)
   Range logo above the text: <img class="vl-series-logo" src="/images/logos/.." alt="..">
   Picture with caption: <figure class="vl-figure"><img ..><figcaption>..</figcaption></figure>
   Callout (a link or next step worth seeing): <aside class="vl-callout"><div><h2>..</h2><p>..</p></div><a class="vl-btn vl-btn--primary" ..>..</a></aside>
   Timeline (dated history): <ol class="vl-timeline"><li><span class="vl-timeline-when">1972</span><div>..</div></li></ol>
   Long pages with a contents list that stays in view (js "Contents list" highlights where you are):
     <div class="vl-doc">
         <nav class="vl-toc" aria-label="On this page" data-vl-toc><p class="vl-toc-title">On this page</p>
             <ol><li><a href="#wiring">Wiring</a></li> ..</ol></nav>
         <div class="vl-doc-body vl-prose"> <h2 id="wiring">Wiring</h2> .. </div>
     </div>
   Logos or badges in a row: <div class="vl-logo-row"><img ..><img ..></div>
   -------------------------------------------------------------------------- */
.vl-section + .vl-section { margin-top: clamp(40px, 5vw, 72px); }
.vl-section > .vl-head:first-child { margin-bottom: 32px; }

/* Content layout kit. Tops line up by default (text centred beside a taller picture left a
   hole above and below the text), and a smaller gutter (96px at 1920 was more than the eye needs to
   separate two columns). --middle keeps the old centring for a split that really wants it; --top is now
   the default but stays valid. */
.vl-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.vl-split--middle { align-items: center; }

.vl-split--text-wide { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
/* --prose: a reading column (the width of .vl-prose, 780px) beside a side column that takes the rest,
   for a long text with a short companion (a pull quote, notes, links). The side column
   (<aside class="vl-split-aside">) stays in view while the long text is read. Used by
   about-us/queens-award-2015.php (the release beside the chairman's words and the editors' notes). */
.vl-split--prose { grid-template-columns: minmax(0, 780px) minmax(320px, 1fr); }
@media (min-width: 992px) {
    .vl-split-aside { position: sticky; top: 96px; }
}
.vl-split-aside > :first-child { margin-top: 0; }

/* --third: on wide screens (1600px and up) the second column, or the picture, takes a third and the text
   two thirds; below 1600px it is the same as --text-wide (7/12 and 5/12). At 1920 a 5/12 picture beside
   a short text is taller than the text; a third balances them. With --rev the narrow column is the
   first one (a picture moves to the left). Used by primed/index.php (both rows, so their columns line
   up) and about-us/quality.php (--rev: the certificate beside the policies). */
.vl-split--third { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
@media (min-width: 992px) {
    .vl-split--third.vl-split--rev { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
@media (min-width: 1600px) {
    .vl-split--third { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
    .vl-split--third.vl-split--rev { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
}

.vl-split--rev > .vl-split-media { order: -1; }
.vl-split--top { align-items: start; }
/* --stretch: both columns run to the same height, so their bottoms line up too. A numbered list of steps
   in a stretched split spreads its steps down the full height (the connecting line stays unbroken)
   instead of stopping short beside a taller neighbour. Used by primed/index.php (Inserts beside
   How it works). Wide screens only; stacked columns are their natural height. */
@media (min-width: 992px) {
    .vl-split--stretch { align-items: stretch; }
    .vl-split--stretch > .vl-split-text { display: flex; flex-direction: column; }
    .vl-split--stretch > .vl-split-text > .vl-steps { display: flex; flex: 1 1 auto; flex-direction: column; margin-bottom: 0; }
    .vl-split--stretch > .vl-split-text > .vl-steps > li { flex: 1 1 auto; }
    .vl-split--stretch > .vl-split-text > .vl-steps > li:last-child { flex: 0 0 auto; }
}

.vl-split-text > :first-child { margin-top: 0; }
.vl-split-text > :last-child { margin-bottom: 0; }
/* A range banner at the top of the text side of a split (primed/index.php): it lines up with the top of
   the picture beside it, instead of sitting alone above the split with an empty strip to its right.
   ".vl-banner" already shows it at its own size or smaller, never stretched. */
.vl-split-text > .vl-banner:first-child { margin-bottom: 28px; }

.vl-split-text h2 { margin: 0 0 16px; font-size: clamp(26px, 2.6vw, 38px); font-weight: var(--vl-display); line-height: 1.15; letter-spacing: -0.02em; }
/* Paragraphs beside a picture keep a readable measure (about 72 characters); at 1920 they ran
   920-970px wide (43 paragraphs on 24 pages). The lead paragraph keeps its own 820px. */
.vl-split-text p { color: var(--vl-slate); font-size: 17px; line-height: 1.7; }
.vl-split-text p:not(.vl-lede) { max-width: 72ch; }

.vl-split-text .vl-lede { color: var(--vl-ink); font-size: clamp(19px, 1.6vw, 22px); line-height: 1.55; }
.vl-band--navy .vl-split-text .vl-lede { color: #fff; }
.vl-split-media { margin: 0; }
/* Pictures are never upscaled: shown at their own width or smaller (".vl-split-media img" was
   width: 100%, so a 600px picture showed at 700-850px, news/enews-020718). A picture narrower than its
   column sits at the outer edge of the page (right, or left in a --rev split), so the text side stays
   lined up; stacked on narrow screens it sits on the left under the text. Product pictures on the soft
   backdrop (--product) are untouched (they stay centred in their box), and so are gallery grids inside a
   picture column (impulse-switches, momentary-switches, enews-080921: their photos are all larger than
   their cells, so nothing changes there). */
.vl-split-media img { display: block; width: auto; max-width: 100%; height: auto; border-radius: var(--vl-radius-lg); }
.vl-split-media:not(.vl-split-media--product) > img,
.vl-split-media:not(.vl-split-media--product) > a > img,
.vl-split-media:not(.vl-split-media--product) > .vl-figure > img { margin-left: auto; }
.vl-split--rev > .vl-split-media:not(.vl-split-media--product) > img,
.vl-split--rev > .vl-split-media:not(.vl-split-media--product) > a > img,
.vl-split--rev > .vl-split-media:not(.vl-split-media--product) > .vl-figure > img { margin-right: auto; margin-left: 0; }
@media (max-width: 991px) {
    .vl-split-media:not(.vl-split-media--product) > img,
    .vl-split-media:not(.vl-split-media--product) > a > img,
    .vl-split-media:not(.vl-split-media--product) > .vl-figure > img { margin-left: 0; }
}

.vl-split-media--product { display: flex; align-items: center; justify-content: center; padding: clamp(24px, 4vw, 56px); border-radius: var(--vl-radius-lg); background: var(--vl-surface); }
.vl-split-media--product img { width: auto; max-height: 420px; border-radius: 0; mix-blend-mode: multiply; }
/* Same step as ".vl-section + .vl-section" (clamp(40px, 5vw, 72px)), so a page has one rhythm
   (it was up to 104px). */
.vl-split + .vl-split { margin-top: clamp(40px, 5vw, 72px); }
/* --fill: the photo is exactly as tall as the text beside it, so tops AND bottoms line up and there is
   no hole on either side. The photo is cropped to fit (object-fit: cover), but never flatter than 16:9
   and never taller than 3:2, so a landscape photo only loses a strip of ceiling, floor or backdrop.
   For photos of people, rooms and events only; never for pictures with words, logos or products in them.
   Wide screens only: once the split stacks (below 992px) the photo shows whole. Only for photos at least
   as wide as their column, so the crop never enlarges them (the two used are 2331px and 2362px wide).
   Used by about-us/company-background.php and news/enews-010720 (the whole-team photo). */
@media (min-width: 992px) {
    .vl-split--fill { align-items: stretch; }
    .vl-split--fill > .vl-split-media { position: relative; container-type: inline-size; }
    .vl-split--fill > .vl-split-media::before { content: ""; display: block; padding-top: 56.25%; }
    .vl-split--fill > .vl-split-media > img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-height: calc(100cqw / 1.5); object-fit: cover; }
}



.vl-lede { max-width: 820px; margin: 0 0 24px; color: var(--vl-ink); font-size: clamp(19px, 1.6vw, 22px); line-height: 1.55; }
.vl-series-logo { display: block; width: auto; max-width: 70%; height: clamp(56px, 6vw, 104px); margin: 0 0 28px; object-fit: contain; object-position: left center; }   /* a range logo above text; larger on wide screens (George, 19 Oct 2026) */
.vl-band--navy .vl-lede { color: #fff; }

.vl-checklist { margin: 0 0 24px; padding: 0; list-style: none; }
.vl-checklist li { position: relative; padding: 9px 0 9px 32px; border-bottom: 1px solid var(--vl-line-soft); line-height: 1.5; break-inside: avoid; }
.vl-checklist li::before { content: "\f00c"; position: absolute; top: 10px; left: 2px; color: var(--vl-indigo); font-family: FontAwesome; font-size: 15px; }
.vl-checklist--2 { columns: 2; column-gap: 48px; }
.vl-checklist--3 { columns: 3; column-gap: 40px; }
.vl-prose .vl-checklist { padding-left: 0; }
.vl-prose .vl-checklist li + li { margin-top: 0; }

.vl-keyfacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px; margin: 0 0 32px; overflow: hidden; border: 1px solid var(--vl-line-soft); border-radius: var(--vl-radius-lg); background: var(--vl-line-soft); }
.vl-split + .vl-keyfacts { margin-top: clamp(24px, 2.5vw, 40px); }   /* a gap under the picture above (smart page, George 19 Oct 2026) */
.vl-keyfacts > div { padding: 22px 24px; background: var(--vl-card); }
.vl-keyfacts dt { color: var(--vl-indigo); font-size: clamp(26px, 2.4vw, 34px); font-weight: 300; line-height: 1.1; letter-spacing: -0.02em; }
.vl-keyfacts dd { margin: 6px 0 0; color: var(--vl-slate); font-size: 14px; line-height: 1.4; }
.vl-band--mist .vl-keyfacts > div { background: var(--vl-card); }

/* Key-facts strips on phones: two per row (leaflets-series) */
@media (max-width: 600px) {
    .vl-keyfacts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vl-keyfacts > div { padding: 14px 16px; }
    .vl-keyfacts dt { font-size: 22px; overflow-wrap: anywhere; }
    .vl-keyfacts dd { font-size: 13px; }
}

.vl-steps { margin: 0 0 24px; padding: 0; list-style: none; counter-reset: vl-step; }
.vl-steps > li { position: relative; min-height: 40px; padding: 4px 0 20px 60px; counter-increment: vl-step; }
.vl-steps > li::before { content: counter(vl-step); position: absolute; top: 0; left: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--vl-indigo); color: var(--vl-on-accent); font-size: 16px; font-weight: 700; line-height: 40px; text-align: center; }
.vl-steps > li::after { content: ""; position: absolute; top: 46px; bottom: 6px; left: 19px; width: 2px; background: var(--vl-line); }
.vl-steps > li:last-child { padding-bottom: 0; }
.vl-steps > li:last-child::after { display: none; }
.vl-steps h3 { margin: 6px 0 6px; font-size: 18px; }
.vl-steps p { margin: 0 0 8px; }
.vl-prose .vl-steps { padding-left: 0; }
.vl-prose .vl-steps > li + li { margin-top: 0; }

.vl-figure { margin: 32px 0; }
/* The same for a picture with a caption: own width or smaller, never upscaled. */
.vl-figure img { display: block; width: auto; max-width: 100%; height: auto; border-radius: var(--vl-radius-lg); }

.vl-figure figcaption { margin-top: 10px; color: var(--vl-slate); font-size: 14px; }
.vl-figure--product { display: flex; flex-direction: column; align-items: center; padding: clamp(20px, 3vw, 40px); border-radius: var(--vl-radius-lg); background: var(--vl-surface); }
/* Photo tile: <span class="vl-ph"><img></span>. A product photo with a white background sits on the soft backdrop;
   the multiply blend makes the photo's white take the backdrop colour. The backdrop stays light in the dark theme.
   (Use the container for the colour: an image's own background can't blend with its own white.) */
.vl-ph { display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: var(--vl-radius); background: var(--vl-surface); }
.vl-ph > img { display: block; max-width: 100%; height: auto; mix-blend-mode: multiply; }
.vl-figure--product img { width: auto; max-height: 360px; border-radius: 0; mix-blend-mode: multiply; }

/* Must stay where ".vl-callout {" is now, BEFORE ".vl-callout--light" (if it came after,
   light callouts would turn navy with invisible text).
   (1) Only the first child (the heading and text) grows; the second (buttons, a logo row, a link) keeps
   its own width and sits at the right end of the bar. ".vl-callout > div" stretched both, so button
   groups and logo rows sat in the middle of the bar (V-Dim, V-Com, V-Plus, V-Pro, V-LED, Multi-Point,
   the newsletters). When the bar wraps on a narrow screen, the second child drops below, left-aligned.
   (2) No margin above when it opens a block, none below when it ends one (it used to add 40px to the
   band's own padding at the foot of a page). */
.vl-callout { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; margin: 40px 0; padding: clamp(24px, 3vw, 40px); border-radius: var(--vl-radius-lg); background: var(--vl-navy); color: rgba(255, 255, 255, 0.84); }
.vl-callout > :first-child { flex: 1 1 380px; }
.vl-callout > :not(:first-child) { flex: 0 1 auto; }
.vl-callout:first-child { margin-top: 0; }
.vl-callout:last-child { margin-bottom: 0; }

.vl-callout h2, .vl-callout h3 { margin: 0 0 6px; color: #fff; font-size: clamp(22px, 2vw, 28px); font-weight: var(--vl-display); letter-spacing: -0.015em; }
.vl-callout p { margin: 0; color: rgba(255, 255, 255, 0.8); }
.vl-callout a:not(.vl-btn) { color: var(--vl-sky); }
.vl-callout .vl-btn--primary { background: #fff; border-color: #fff; color: var(--vl-navy); }
.vl-callout .vl-btn--primary:hover, .vl-callout .vl-btn--primary:focus { background: var(--vl-sky); border-color: var(--vl-sky); color: var(--vl-navy); box-shadow: none; }
/* A logo row in a callout keeps its own width, so the logos end at the right edge (V-Pro, V-LED) */
.vl-callout > .vl-logo-row { flex: 0 1 auto; margin: 0; }

.vl-callout--light { background: var(--vl-mist); color: var(--vl-ink); }
/* A callout under a picture (V-Pro: British made under the module photo): its words above its badges */
.vl-callout--stack { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 16px; margin-top: 16px; }
.vl-callout--stack > :first-child { flex: 0 0 auto; }   /* the row's 380px basis would be a height here */
/* Badges beside a block of text (Company background), not under it */
.vl-logo-row--side { justify-content: center; margin: 0; }
.vl-callout--light h2, .vl-callout--light h3 { color: var(--vl-ink); }
.vl-callout--light p { color: var(--vl-slate); }
.vl-callout--light a:not(.vl-btn) { color: var(--vl-indigo); }
.vl-callout--light .vl-btn--primary { background: var(--vl-indigo); border-color: var(--vl-indigo); color: var(--vl-on-accent); }

.vl-timeline { margin: 0 0 24px; padding: 0; list-style: none; }
.vl-timeline > li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 24px; padding: 20px 0; border-top: 1px solid var(--vl-line); }
.vl-timeline > li:last-child { border-bottom: 1px solid var(--vl-line); }
.vl-timeline-when { color: var(--vl-indigo); font-size: 28px; font-weight: 300; line-height: 1.1; letter-spacing: -0.02em; }
.vl-timeline p { margin: 0; }
.vl-timeline p + p { margin-top: 8px; }

.vl-doc { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.vl-toc { position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow-y: auto; font-size: 14px; }
.vl-toc-title { margin: 0 0 12px; color: var(--vl-slate); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.vl-toc ol, .vl-toc ul { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--vl-line); }
.vl-toc li a { display: block; margin-left: -1px; padding: 6px 0 6px 16px; border-left: 2px solid transparent; color: var(--vl-slate); line-height: 1.4; text-decoration: none; transition: color var(--vl-speed) var(--vl-ease), border-color var(--vl-speed) var(--vl-ease); }
.vl-toc li a:hover, .vl-toc li a:focus { color: var(--vl-indigo); }
.vl-toc li a.is-current { border-left-color: var(--vl-indigo); color: var(--vl-indigo); font-weight: 700; }
.vl-doc-body { min-width: 0; }
.vl-doc-body [id] { scroll-margin-top: 96px; }

/* Every logo in a row sits on the same white tile at the same height, whatever the shape of
   the file (a square badge, an upright Made in Britain mark and a wide ISO mark used to come out at
   three different sizes, only the trust logo on a tile). Never upscaled: 88px is well under every
   file's own height. ".vl-logo-row--trust" (V-Pro, V-LED: badges at 130px) is unchanged. */
.vl-logo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: 24px 0; }
main .vl-logo-row img { box-sizing: content-box; width: auto; height: clamp(64px, 5vw, 88px); max-height: none; max-width: 180px; padding: 12px; object-fit: contain; border-radius: var(--vl-radius); background: #fff; box-shadow: var(--vl-shadow-sm); }
main .vl-logo-row--trust .vl-trust-logo { height: auto; max-width: none; padding: 10px; }


/* ---- Kit additions from the about-us and news pages ---- */
/* --text-wide with --rev: keep the 7/12 for the text when the picture moves to the left. Today the picture
   takes the wide first column, so a reversed split shows a big picture beside narrow text.
   Used by the newsletter pages (news/enews-*). Wide screens only: below
   992px the kit stacks every split to one column. */
@media (min-width: 992px) {
    .vl-split--text-wide.vl-split--rev { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

/* A second heading inside the text of a split (after a paragraph or list) needs space above it; the kit's
   ".vl-split-text h2" sets the top margin to 0, which is right only for the first heading.
   Used by news/enews-010720 (three short sections in one split), enews-050619, enews-080921, enews-100719,
   enews-040321 and about-us/lifetime-guarantee.php. */
.vl-split-text > * + h2, .vl-split-text > * + h3 { margin-top: 32px; }

/* Caption under a picture in a split (as .vl-figure figcaption). Used by news/enews-110821, enews-130122,
   enews-290421 and enews-310321, which have a caption with product links under the picture:
     <figure class="vl-split-media"><img ..><figcaption>..</figcaption></figure> */
.vl-split-media figcaption { margin-top: 10px; color: var(--vl-slate); font-size: 14px; line-height: 1.5; }
/* A small photo (721px detail shots, Cu29 page): never stretched past what it can show sharply, even at 150% display
   scaling (George, 19 Oct 2026: "looking very pixelated"); the caption sits under it */
.vl-split-media--small img { max-width: min(100%, 480px); }
.vl-split-media--small figcaption { max-width: 480px; margin-left: auto; }
.vl-split--rev > .vl-split-media--small figcaption { margin-left: 0; }

/* Name under each picture in a gallery grid (the finish photos in news/enews-081018 and enews-290421):
     <ul class="vl-gallery-grid"><li><a href=".."><img ..><span class="vl-gallery-label">..</span></a></li></ul> */
.vl-gallery-grid img { display: block; }
.vl-gallery-label { display: block; margin-top: 8px; font-size: 14px; font-weight: 700; line-height: 1.35; }

/* Gallery grid with exactly four across (two on phones): a set of four pictures on one row instead of an
   empty fifth column, or one compact row in a narrow column (news/enews-081018, enews-290421):
     <ul class="vl-gallery-grid vl-gallery-grid--4"> */
.vl-gallery-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 767px) {
    .vl-gallery-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Cards that flow down in columns (a "masonry" wall), so short and long cards pack together instead of
   every card in a row stretching to the tallest. For card lists of very uneven length.
   Used by news/testimonials.php:  <ul class="vl-cards vl-quotes vl-cards--flow"> */
.vl-cards--flow { display: block; columns: 3 300px; column-gap: 24px; }
.vl-cards--flow > li { height: auto; margin-bottom: 24px; break-inside: avoid; }
/* With JavaScript (js section 27) a flowing card list becomes
   a masonry grid: up to four columns (at least 300px each), every card in the shortest column, columns
   ending level (news/testimonials.php). Without JavaScript the CSS columns above still apply. */
.vl-cards--flow.vl-masonry { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(300px, calc((100% - 72px) / 4)), 1fr)); grid-auto-rows: 4px; gap: 0 24px; columns: auto; }
.vl-cards--flow.vl-masonry > li { align-self: start; margin-bottom: 0; }


/* Meet the team: a group of exactly five people on one row on wide screens instead of four and one
   (about-us/meet-the-team.php adds it to the management team while it has five people). */
@media (min-width: 1200px) {
    .vl-team.vl-team--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 991px) {
    .vl-split, .vl-split--text-wide { grid-template-columns: minmax(0, 1fr); }
    .vl-split--rev > .vl-split-media { order: 0; }
    .vl-checklist--3 { columns: 2; }
    .vl-doc { grid-template-columns: minmax(0, 1fr); }
    .vl-toc { position: static; max-height: none; padding: 18px 20px; border-radius: var(--vl-radius); background: var(--vl-mist); }
    .vl-toc ol, .vl-toc ul { border-left: 0; columns: 2; column-gap: 24px; }
    .vl-toc li a { margin-left: 0; padding: 4px 0; border-left: 0; }
}
@media (max-width: 767px) {
    .vl-checklist--2, .vl-checklist--3 { columns: 1; }
    .vl-timeline > li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .vl-toc ol, .vl-toc ul { columns: 1; }
    .vl-steps > li { padding-left: 52px; }
    .vl-callout { margin: 32px 0; }
}

/* --------------------------------------------------------------------------
   Matrix builder: "Add these parts to my list" (added by js section 28)
   takes its own line under Copy parts list and Print.
   -------------------------------------------------------------------------- */
.vl-mx-addlist { flex: 1 1 100%; }


/* ==========================================================================
   9. Home page (index.php)
   ========================================================================== */
.vl-home [id] { scroll-margin-top: 90px; }
.vl-home .vl-band { padding: 88px 0; }

/* Hero with background film */
.vl-hero { position: relative; display: flex; align-items: center; min-height: clamp(520px, 72vh, 780px); overflow: hidden; }
.vl-hero > .vl-wrap { position: relative; z-index: 2; }
.vl-hero h1 { max-width: 1200px; margin: 0; color: #fff; font-size: clamp(38px, 4.8vw, 74px); line-height: 1.04; letter-spacing: -0.02em; }
.vl-hero-media { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; background: var(--vl-navy) center / cover no-repeat; }
.vl-hero-media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.vl-hero-media::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(90deg, rgba(18, 22, 90, 0.68) 0%, rgba(18, 22, 90, 0.59) 50%, rgba(18, 22, 90, 0.42) 100%); }
.vl-hero-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px 64px; margin-top: 40px; padding-top: 36px; border-top: 1px solid rgba(255, 255, 255, 0.22); }
.vl-hero-row > p { flex: 1 1 480px; max-width: 760px; margin: 0; color: rgba(255, 255, 255, 0.86); font-size: 19px; }
.vl-hero-search { display: flex; align-items: center; max-width: 460px; height: 50px; margin-top: 16px; padding-left: 20px; border-radius: 25px; background: var(--vl-card); }
.vl-hero-search:focus-within { box-shadow: 0 0 0 3px var(--vl-sky); }
.vl-hero-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--vl-ink); font-size: 16px; outline: none; }
.vl-hero-search button { width: 52px; height: 100%; border: 0; border-radius: 0 25px 25px 0; background: transparent; color: var(--vl-navy); font-size: 18px; cursor: pointer; }
/* The home film's pause button says what it does: "Pause video" / "Play video" */
.vl-hero-toggle { position: absolute; right: var(--vl-gutter); bottom: 24px; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 16px 0 14px; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 19px; background: rgba(0, 0, 0, 0.3); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .02em; cursor: pointer; }
.vl-hero-toggle:hover { background: rgba(255, 255, 255, 0.15); }
.vl-hero-toggle[hidden] { display: none; }

/* Find your finish: range tabs, then a panel per range */
.vl-tabs { display: none; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; }
.vl-js .vl-tabs { display: flex; }
.vl-tabs button { height: 42px; padding: 0 18px; border: 1px solid var(--vl-line); border-radius: 21px; background: var(--vl-card); color: var(--vl-ink); font-size: 15px; font-weight: 600; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.vl-tabs button span { margin-left: 4px; color: var(--vl-slate); font-weight: 400; }
.vl-tabs button:hover { border-color: var(--vl-indigo); }
.vl-tabs button[aria-selected="true"] { background: var(--vl-indigo); border-color: var(--vl-indigo); color: var(--vl-on-accent); }
.vl-tabs button[aria-selected="true"] span { color: inherit; opacity: .75; }

.vl-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 72px); align-items: start; }
.vl-panel + .vl-panel { margin-top: 72px; }
.vl-js .vl-panel + .vl-panel { margin-top: 0; }
.vl-panel[hidden] { display: none; }
.vl-panel-info { position: sticky; top: 24px; }
.vl-panel-info h3 { margin: 0 0 18px; font-size: 28px; }
.vl-panel-info img { display: block; width: 100%; height: auto; border-radius: 14px; }   /* height: auto keeps the 3:2 shape from the img's width and height while it loads */
.vl-panel-info p { max-width: 640px; margin: 20px 0 0; color: var(--vl-slate); font-size: 17px; }
.vl-panel-info .vl-link { display: inline-block; margin-top: 12px; }

/* Plate grid: Classic and Screwless show 4 across (--4), the others 3 */
.vl-plates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.vl-plates--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
/* Tiles sit on the soft studio backdrop; multiply lets the photo's white background take the backdrop colour */
.vl-plate { display: block; height: 100%; padding: 18px 14px 16px; border: 1px solid transparent; border-radius: var(--vl-radius); background: var(--vl-surface); color: var(--vl-ink); text-align: center; transition: background-color var(--vl-speed) var(--vl-ease), box-shadow var(--vl-speed) var(--vl-ease), transform var(--vl-speed) var(--vl-ease), color var(--vl-speed) var(--vl-ease); }
.vl-plate:hover, .vl-plate:focus { background: var(--vl-card); box-shadow: var(--vl-shadow-md); color: var(--vl-indigo); text-decoration: none; }
.vl-plate img { display: block; width: 80%; margin: 0 auto; aspect-ratio: 1 / 1; object-fit: contain; mix-blend-mode: multiply; transition: transform .5s var(--vl-ease); }
.vl-plate-name { display: block; margin-top: 12px; font-size: 15px; font-weight: 700; line-height: 1.3; }
.vl-plate-code { display: block; margin-top: 3px; color: var(--vl-slate); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
/* Finish tiles: a 1-gang switch in the same finish on mouseover (includes/plate-hover.php; js "Finish tiles"). The
   script wraps the blank's photo in .vl-plate-pic and lays the switch over it; only on screens with a mouse. */
.vl-plate-pic { position: relative; display: block; width: 80%; margin: 0 auto; }
.vl-plate .vl-plate-pic img { width: 100%; transition: opacity .35s var(--vl-ease), transform .5s var(--vl-ease); }
.vl-plate .vl-plate-pic .vl-plate-alt { position: absolute; inset: 0; height: 100%; opacity: 0; }
.vl-plate.vl-has-alt:hover .vl-plate-alt, .vl-plate.vl-has-alt:focus-visible .vl-plate-alt { opacity: 1; }
.vl-plate.vl-has-alt:hover .vl-plate-pic img:first-child, .vl-plate.vl-has-alt:focus-visible .vl-plate-pic img:first-child { opacity: 0; }
.vl-fx-tile .vl-plate-pic { width: 100%; }

/* Collection pages and the online catalogue */
/* Plate grid, 6 across on wide screens. Always used together with vl-plates--4, which stays in
   charge below 1200px:  <ul class="vl-plates vl-plates--4 vl-plates--6">
   Pages: /ranges/decorative-finishes.php, /ranges/powergrid-range.php,
          /ranges/european-fixed-range.php, /ranges/european-varigrid-range.php */
@media (min-width: 1200px) {
    .vl-plates--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
}
/* Finish grids of 13 or 14 plates: 7 across, so no plate sits alone on a last row */
@media (min-width: 1200px) {
    .vl-plates--7 { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 14px; }
}

/* Sub-heading above a plate grid, where one section holds several grids (the PowerGrid faceplate groups).
   Pages: /ranges/decorative-finishes.php, /ranges/powergrid-range.php */
.vl-plates-head { margin: 32px 0 14px; font-size: 20px; line-height: 1.3; }
.vl-plates-head:first-child { margin-top: 0; }

/* Finish explorer: the online catalogue (ranges/decorative-finishes.php, includes/finish-families.php, js section 25) */
/* Finish explorer: a filter bar that stays in view, then every finish as one grid of large tiles.
   Without JavaScript the groups stack (each a full-width grid) and the chips are links the page answers.
   With it (.is-packed on .vl-fx-results), one grid of --fx-cols columns holds every group; each group spans
   as many columns as it has finishes (up to a full row) and lines its tiles up with the columns around it
   (subgrid), so small ranges sit side by side. The script sets --fx-cols, each group's span and --fx-top. */
.vl-fx { --fx-min: 214px; --fx-gap: 14px; --fx-top: 74px; position: relative; padding-bottom: var(--vl-band-pad); background: var(--vl-paper); scroll-margin-top: var(--fx-top); }

/* The bar: Group by (Range / Colour, which are also the labels of the two rows of chips), Range chips, Colour chips */
.vl-fx-bar { position: sticky; top: var(--fx-top); z-index: 20; border-bottom: 1px solid transparent; background: var(--vl-glass); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px); transition: border-color var(--vl-speed) var(--vl-ease), box-shadow var(--vl-speed) var(--vl-ease); }
.vl-fx-bar.is-stuck { border-bottom-color: var(--vl-line); box-shadow: var(--vl-shadow-sm); }   /* script: only while it is stuck */
.vl-fx-bar-in { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; align-items: center; padding-top: 12px; padding-bottom: 12px; }
.vl-fx-by { grid-row: 1 / span 2; align-self: stretch; display: flex; flex-direction: column; gap: 2px; padding: 3px; border: 1px solid var(--vl-line); border-radius: 20px; background: var(--vl-mist); }
.vl-fx-by a { flex: 1 1 0; display: flex; align-items: center; gap: 8px; min-width: 104px; padding: 0 14px 0 11px; border-radius: 17px; color: var(--vl-slate); font-size: 12px; font-weight: 700; letter-spacing: .08em; line-height: 1; text-transform: uppercase; text-decoration: none; transition: background-color var(--vl-speed) var(--vl-ease), color var(--vl-speed) var(--vl-ease), box-shadow var(--vl-speed) var(--vl-ease); }
.vl-fx-by a::before { content: ""; flex: 0 0 auto; width: 10px; height: 10px; border: 1.5px solid currentColor; border-radius: 50%; opacity: .55; }
.vl-fx-by a:hover, .vl-fx-by a:focus { color: var(--vl-indigo); text-decoration: none; }
.vl-fx-by a[aria-current="true"] { background: var(--vl-card); color: var(--vl-ink); box-shadow: var(--vl-shadow-sm); }
.vl-fx-by a[aria-current="true"]::before { border-color: var(--vl-indigo); background: var(--vl-indigo); box-shadow: inset 0 0 0 2px var(--vl-card); opacity: 1; }

/* A row of chips scrolls sideways when it doesn't fit (below about 1800px). The script marks the edges that
   have more chips past them: touch screens fade that edge (swipe), screens with a mouse get an arrow there */
.vl-fx-chips { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 2px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.vl-fx-chips::-webkit-scrollbar { display: none; }
@media (hover: none) {
    .vl-fx-chips.is-more-right { -webkit-mask-image: linear-gradient(to right, var(--vl-ink) calc(100% - 48px), transparent); mask-image: linear-gradient(to right, var(--vl-ink) calc(100% - 48px), transparent); }
    .vl-fx-chips.is-more-left { -webkit-mask-image: linear-gradient(to left, var(--vl-ink) calc(100% - 48px), transparent); mask-image: linear-gradient(to left, var(--vl-ink) calc(100% - 48px), transparent); }
    .vl-fx-chips.is-more-left.is-more-right { -webkit-mask-image: linear-gradient(to right, transparent, var(--vl-ink) 48px, var(--vl-ink) calc(100% - 48px), transparent); mask-image: linear-gradient(to right, transparent, var(--vl-ink) 48px, var(--vl-ink) calc(100% - 48px), transparent); }
    .vl-fx-step { display: none !important; }
}
/* Arrow at an edge with more chips (script): sticks to that edge over the chips, on a fade of the bar's colour */
.vl-fx-step { position: sticky; z-index: 1; flex: 0 0 auto; display: flex; align-items: center; width: 56px; height: 34px; padding: 0; border: 0; color: var(--vl-indigo); cursor: pointer; }
.vl-fx-step[hidden] { display: none; }
.vl-fx-step--prev { left: -2px; justify-content: flex-start; margin-right: -50px; background: linear-gradient(to left, transparent, var(--vl-paper) 50%); }
.vl-fx-step--next { right: -2px; justify-content: flex-end; margin-left: -50px; background: linear-gradient(to right, transparent, var(--vl-paper) 50%); }
.vl-fx-step .fa { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid var(--vl-line); border-radius: 50%; background: var(--vl-card); font-size: 12px; box-shadow: var(--vl-shadow-sm); transition: background-color var(--vl-speed) var(--vl-ease), color var(--vl-speed) var(--vl-ease); }
.vl-fx-step:hover .fa, .vl-fx-step:focus-visible .fa { border-color: var(--vl-indigo); background: var(--vl-indigo); color: var(--vl-on-accent); }
.vl-fx-step:focus-visible { outline: none; }
.vl-fx-chips a { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border: 1px solid var(--vl-line); border-radius: 17px; background: var(--vl-card); color: var(--vl-ink); font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none; transition: background-color var(--vl-speed) var(--vl-ease), border-color var(--vl-speed) var(--vl-ease), color var(--vl-speed) var(--vl-ease), opacity var(--vl-speed) var(--vl-ease); }
.vl-fx-chips a:hover, .vl-fx-chips a:focus { border-color: var(--vl-indigo); color: var(--vl-indigo); text-decoration: none; }
.vl-fx-chips a[aria-current="true"] { border-color: var(--vl-indigo); background: var(--vl-indigo); color: var(--vl-on-accent); }
.vl-fx-chips a.is-zero:not([aria-current]) { opacity: .45; }
.vl-fx-n { color: var(--vl-slate); font-size: 12px; font-weight: 400; font-variant-numeric: tabular-nums; }
.vl-fx-chips a[aria-current="true"] .vl-fx-n { color: inherit; opacity: .75; }
.vl-fx-chips a.vl-fx-clear { margin-left: auto; border-style: dashed; color: var(--vl-slate); }
.vl-fx-chips a.vl-fx-clear[hidden] { display: none; }

/* Colour dot: the middle of up to 4 finish photos, one in each quarter (object-fit: none shows the photo at
   full size, so a 9px box shows the 9px at the centre of the plate: its colour and grain) */
.vl-fx-dot { display: inline-grid; flex: 0 0 auto; grid-template-columns: 1fr 1fr; width: 18px; height: 18px; margin-left: -5px; overflow: hidden; border-radius: 50%; background: var(--vl-photo); box-shadow: 0 0 0 1px var(--vl-line); }
.vl-fx-dot img { display: block; width: 100%; height: 100%; object-fit: none; object-position: 50% 50%; }
.vl-fx-chips a[aria-current="true"] .vl-fx-dot { box-shadow: 0 0 0 1.5px var(--vl-on-accent); }

/* Results: groups with a compact heading line (title, count, link; the intro only when one range is chosen) */
.vl-fx-results { padding-top: 6px; }
.vl-fx-results > [hidden], .vl-fx-tiles > [hidden] { display: none !important; }   /* filtered out, folded, or the other view's groups */
.vl-fx-group, .vl-fx-rhead { margin-top: 26px; }
.vl-fx-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; margin: 0 0 14px; padding-top: 14px; border-top: 1px solid var(--vl-line); }
.vl-fx-head h2 { margin: 0; font-size: clamp(18px, 1.25vw, 22px); line-height: 1.25; }
.vl-fx-head h3 { margin: 0; font-size: 16px; line-height: 1.3; }
.vl-fx-head h2 .vl-fx-dot { width: 22px; height: 22px; margin: -3px 10px 0 0; vertical-align: middle; }
.vl-fx-count { color: var(--vl-slate); font-size: 13px; white-space: nowrap; }
.vl-fx-link { margin-left: auto; font-size: 13px; font-weight: 700; white-space: nowrap; }
.vl-fx-link .fa { margin-left: 3px; }
.vl-fx-fewer { padding: 0; border: 0; background: none; color: var(--vl-indigo); font-size: 13px; font-weight: 700; cursor: pointer; }
.vl-fx-fewer:hover, .vl-fx-fewer:focus-visible { text-decoration: underline; }
/* The intro takes a line of its own (flex-basis 100%); the padding keeps its lines to about 860px */
.vl-fx-intro { display: none; flex: 0 0 100%; margin: 6px 0 0; padding-right: max(0px, calc(100% - 860px)); color: var(--vl-slate); font-size: 16px; line-height: 1.55; }
.vl-fx.is-one .vl-fx-intro { display: block; }
.vl-fx-rhead .vl-fx-head { margin-bottom: 0; }
.vl-fx-rhead + .vl-fx-group { margin-top: 12px; }
.vl-fx-head--sub { padding-top: 10px; border-top-color: var(--vl-line-soft); }
.vl-fx-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--fx-min), 1fr)); gap: var(--fx-gap); margin: 0; padding: 0; list-style: none; }

/* Packed (script running): one grid, groups side by side, every tile on the same columns and rows */
.vl-fx-results.is-packed { display: grid; grid-template-columns: repeat(var(--fx-cols, 4), minmax(0, 1fr)); gap: var(--fx-gap); }
.vl-fx-results.is-packed > .vl-fx-group { display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; margin: 0; }
.vl-fx-results.is-packed > .vl-fx-rhead { grid-column: 1 / -1; margin: 0; }
.vl-fx-results.is-packed .vl-fx-head { grid-column: 1 / -1; margin: 0; padding-top: 22px; }
.vl-fx-results.is-packed .vl-fx-head--sub { padding-top: 10px; }
.vl-fx-results.is-packed .vl-fx-tiles { grid-column: 1 / -1; grid-row: 2 / -1; grid-template-columns: subgrid; grid-template-rows: subgrid; }
.vl-fx-group.is-narrow .vl-fx-head h2, .vl-fx-group.is-narrow .vl-fx-head h3 { flex: 1 0 100%; }   /* one tile wide: title, then count and link */
.vl-fx-group.is-narrow .vl-fx-link { margin-left: 0; }
/* Phones with no filter (script: .is-rows): each range or colour is one row of tiles that swipes sideways, edge to edge */
.vl-fx.is-rows .vl-fx-results.is-packed .vl-fx-tiles { grid-template-columns: none; grid-template-rows: none; grid-auto-flow: column; grid-auto-columns: 42%; margin: 0 calc(-1 * var(--vl-gutter)); padding: 2px var(--vl-gutter) 6px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--vl-gutter); scrollbar-width: none; }
.vl-fx.is-rows .vl-fx-tiles::-webkit-scrollbar { display: none; }
.vl-fx.is-rows .vl-fx-tiles > li { scroll-snap-align: start; }

/* Tiles: the plate grid's tile, a little tighter so the photo is most of it */
.vl-fx-tiles > li { position: relative; min-width: 0; scroll-margin: 200px 0 40px; }
.vl-fx-tile .vl-plate { padding: 10px 10px 12px; }
.vl-fx-tile .vl-plate img { width: 100%; }
.vl-fx-tile .vl-plate-name { margin-top: 8px; font-size: 14px; }
.vl-fx-in { display: none; margin-top: 2px; color: var(--vl-slate); font-size: 12px; font-weight: 600; line-height: 1.3; }
.vl-fx[data-by="colour"] .vl-fx-in { display: block; }

/* Quick look button (added by the script): shows on hover with a mouse, always on touch screens */
.vl-fx-qlbtn { position: absolute; top: 8px; right: 8px; z-index: 2; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: var(--vl-photo); color: var(--vl-navy); font-size: 14px; box-shadow: var(--vl-shadow-sm); cursor: pointer; opacity: 0; transform: translateY(-3px) scale(.9); transition: opacity var(--vl-speed) var(--vl-ease), transform var(--vl-speed) var(--vl-ease), background-color var(--vl-speed) var(--vl-ease), color var(--vl-speed) var(--vl-ease); }
.vl-fx-tile:hover .vl-fx-qlbtn, .vl-fx-qlbtn:focus-visible { opacity: 1; transform: translateY(-3px); }
.vl-fx-qlbtn:hover, .vl-fx-qlbtn:focus-visible { background: var(--vl-navy); color: var(--vl-photo); }
@media (hover: none) {
    .vl-fx-qlbtn { top: 6px; right: 6px; width: 30px; height: 30px; font-size: 12px; opacity: .92; transform: none; }
}

/* "+N more" tile (script): a peek at the next finishes; opens the rest of that range or colour in place */
.vl-fx-moreli { min-width: 0; }
.vl-fx-more { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 100%; padding: 14px 10px; border: 1px solid transparent; border-radius: var(--vl-radius); background: var(--vl-chosen); color: var(--vl-indigo); font-size: 15px; font-weight: 700; line-height: 1.2; cursor: pointer; transition: border-color var(--vl-speed) var(--vl-ease), box-shadow var(--vl-speed) var(--vl-ease), transform var(--vl-speed) var(--vl-ease); }
.vl-fx-more:hover, .vl-fx-more:focus-visible { border-color: var(--vl-indigo); box-shadow: var(--vl-shadow-md); }
.vl-fx-mosaic { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; width: 62%; }
.vl-fx-mosaic img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: contain; border-radius: 8px; background: var(--vl-photo); }
.vl-fx-more small { display: block; margin-top: 4px; color: var(--vl-slate); font-size: 12px; font-weight: 600; }
@media (hover: hover) {
    .vl-fx-more:hover { transform: translateY(-3px); }
}

/* Quick look (script): <dialog> with the full-size photo, the range, links and the same finish in other ranges */
.vl-fx-dialog { width: min(1080px, calc(100vw - 48px)); max-width: none; max-height: calc(100vh - 48px); padding: 0; overflow: hidden; border: 0; border-radius: var(--vl-radius-lg); background: var(--vl-card); color: var(--vl-ink); box-shadow: var(--vl-shadow-lg); }
.vl-fx-dialog[open] { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); animation: vl-fx-in .28s var(--vl-ease); }
.vl-fx-dialog::backdrop { background: rgba(11, 14, 63, 0.55); background: color-mix(in srgb, var(--vl-navy-deep) 55%, transparent); }   /* --vl-navy-deep; the rgba is for browsers whose backdrop can't see the tokens */
@keyframes vl-fx-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.vl-fx-qlphoto { position: relative; display: flex; align-items: center; justify-content: center; min-height: min(560px, calc(100vh - 48px)); background: var(--vl-surface); }
.vl-fx-qlphoto img { display: block; width: 84%; max-height: calc(100vh - 140px); aspect-ratio: 1 / 1; object-fit: contain; mix-blend-mode: multiply; }
.vl-fx-qlnav { position: absolute; top: 50%; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-top: -22px; padding: 0; border: 0; border-radius: 50%; background: var(--vl-photo); color: var(--vl-navy); font-size: 16px; box-shadow: var(--vl-shadow-md); cursor: pointer; transition: background-color var(--vl-speed) var(--vl-ease), color var(--vl-speed) var(--vl-ease); }
.vl-fx-qlnav:hover, .vl-fx-qlnav:focus-visible { background: var(--vl-navy); color: var(--vl-photo); }
.vl-fx-qlnav--prev { left: 16px; }
.vl-fx-qlnav--next { right: 16px; }
.vl-fx-qlnav[hidden] { display: none; }
.vl-fx-qlpos { position: absolute; bottom: 14px; left: 0; right: 0; margin: 0; color: var(--vl-navy); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-align: center; opacity: .6; font-variant-numeric: tabular-nums; }
.vl-fx-qlinfo { display: flex; flex-direction: column; min-width: 0; max-height: calc(100vh - 48px); padding: clamp(28px, 3vw, 48px) clamp(24px, 3vw, 44px); overflow-y: auto; overscroll-behavior: contain; }
.vl-fx-qlrange { margin: 0 48px 8px 0; color: var(--vl-slate); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.vl-fx-qlinfo h2 { margin: 0; font-size: clamp(28px, 2.4vw, 40px); font-weight: var(--vl-display); line-height: 1.1; letter-spacing: -0.02em; }
.vl-fx-qlcode { margin: 10px 0 0; color: var(--vl-slate); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.vl-fx-qlintro { margin: 18px 0 0; color: var(--vl-slate); font-size: 16px; line-height: 1.6; }
.vl-fx-qlactions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 24px; }
.vl-fx-qlfam { margin: 18px 0 0; font-size: 14px; }
.vl-fx-qlfam a { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; }
.vl-fx-qlfam .vl-fx-dot { margin: 0; }
.vl-fx-also { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--vl-line); }
.vl-fx-also[hidden] { display: none; }
.vl-fx-also h3 { margin: 0 0 12px; color: var(--vl-slate); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.vl-fx-also ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 12px 10px; margin: 0; padding: 0; list-style: none; }
.vl-fx-also button { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; padding: 0; border: 0; background: none; color: var(--vl-ink); font-size: 12px; font-weight: 600; line-height: 1.25; text-align: center; cursor: pointer; }
.vl-fx-also img { display: block; width: 100%; aspect-ratio: 1 / 1; padding: 6px; object-fit: contain; border: 1px solid transparent; border-radius: 10px; background: var(--vl-photo); transition: border-color var(--vl-speed) var(--vl-ease); }
.vl-fx-also button:hover, .vl-fx-also button:focus-visible { color: var(--vl-indigo); outline: none; }
.vl-fx-also button:hover img, .vl-fx-also button:focus-visible img { border-color: var(--vl-indigo); }
.vl-fx-qlclose { position: absolute; top: 14px; right: 14px; z-index: 2; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--vl-mist); color: var(--vl-ink); font-size: 16px; cursor: pointer; transition: background-color var(--vl-speed) var(--vl-ease), color var(--vl-speed) var(--vl-ease); }
.vl-fx-qlclose:hover, .vl-fx-qlclose:focus-visible { background: var(--vl-indigo); color: var(--vl-on-accent); }

/* Narrower screens: a slightly smaller tile keeps 6 across at 1366-1599px (5 at 214px) */
@media (max-width: 1599px) {
    .vl-fx { --fx-min: 196px; }
    .vl-fx-chips a { padding: 0 12px; font-size: 13px; gap: 6px; }
}
@media (max-width: 991px) {
    .vl-fx { --fx-min: 150px; }   /* tablets: 4 across at 768px */
    .vl-fx-by a { min-width: 0; padding: 0 12px 0 10px; }
}
@media (max-width: 767px) {
    .vl-fx-dialog { width: calc(100vw - 16px); max-height: calc(100vh - 16px); overflow-y: auto; overscroll-behavior: contain; }
    .vl-fx-dialog[open] { display: block; }
    .vl-fx-qlphoto { height: 46vh; min-height: 0; }
    .vl-fx-qlphoto img { width: auto; height: 84%; max-width: 84%; }
    .vl-fx-qlinfo { max-height: none; overflow: visible; padding: 22px 20px 26px; }
    .vl-fx-qlinfo h2 { font-size: 28px; }
    .vl-fx-qlnav { width: 38px; height: 38px; margin-top: -19px; }
    .vl-fx-qlnav--prev { left: 10px; }
    .vl-fx-qlnav--next { right: 10px; }
}
@media (max-width: 599px) {
    .vl-fx { --fx-min: 140px; --fx-gap: 8px; --fx-top: 77px; }
    .vl-fx-bar-in { gap: 6px 10px; padding-top: 8px; padding-bottom: 8px; }
    .vl-fx-by a { padding: 0 9px 0 8px; font-size: 11px; letter-spacing: .06em; gap: 6px; }
    .vl-fx-by a::before { width: 8px; height: 8px; }
    .vl-fx-chips a { height: 32px; padding: 0 12px; font-size: 13px; }
    .vl-fx-head { gap: 0 10px; }
    .vl-fx-head h2 { font-size: 17px; }
    .vl-fx-head h3 { font-size: 15px; }
    .vl-fx-results.is-packed .vl-fx-head { padding-top: 16px; }
    .vl-fx-tile .vl-plate { padding: 8px 8px 10px; }
    .vl-fx-tile .vl-plate-name { margin-top: 6px; font-size: 13px; }
    .vl-fx-more { font-size: 14px; }
}
@media print {
    .vl-fx-bar, .vl-fx-qlbtn, .vl-fx-moreli { display: none !important; }
}

/* Colour pages (ranges/*-switches-and-sockets.php, includes/colour-page.php): every finish of one colour as the
   catalogue's tiles, in one grid. Each range starts with a card (heading, count, intro, link) in the grid's flow,
   so small ranges share a row: one grid cell on wide screens, two on tablets, a full-width heading on phones. */
.vl-cp-range { display: flex; min-width: 0; }
.vl-cp-range .vl-fx-head { flex: 1 1 auto; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 2px; margin: 0; padding: 18px 18px 16px; border-top: 0; border-radius: var(--vl-radius); background: var(--vl-chosen); }
.vl-cp-range .vl-fx-head h2 { font-size: 18px; line-height: 1.25; }
.vl-cp-range .vl-fx-intro { flex: 0 0 auto; margin-top: 8px; padding-right: 0; font-size: 14px; line-height: 1.5; }
.vl-cp-range .vl-fx-link { margin: auto 0 0; padding-top: 12px; white-space: normal; }
@media (max-width: 1199px) {
    .vl-cp-range { grid-column: span 2; }
}
@media (max-width: 599px) {
    .vl-cp-range { grid-column: 1 / -1; }
    .vl-cp-range .vl-fx-head { padding: 14px 16px; }
    .vl-cp-range .vl-fx-intro { margin-top: 4px; }
    .vl-cp-range .vl-fx-link { padding-top: 8px; }
}

/* Links to every colour's page (vl_colour_nav() in includes/finish-catalogue.php): the catalogue's colour chips,
   under the heading of a colour page and at the foot of the catalogue. They wrap onto a second line where they
   don't fit; on phones they stay one row that swipes sideways, edge to edge (five lines of chips would push the
   finishes a screen down) */
.vl-pagehead .vl-cp-nav { margin-top: 22px; }
@media (min-width: 600px) {
    .vl-cp-nav { flex-wrap: wrap; overflow: visible; }
}
@media (max-width: 599px) {
    .vl-cp-nav { margin-right: calc(-1 * var(--vl-gutter)); margin-left: calc(-1 * var(--vl-gutter)); padding: 2px var(--vl-gutter); scroll-padding-inline: var(--vl-gutter); }
}

/* The side column beside a finish grid or product list (photo and notes), on a col-lg-* layout.
   When the columns stack (below 1200px) it needs space above it.
   Pages: classic-raised-profile.php, screwless-low-profile.php, urban-range.php, urban-screwless-range.php,
          ultraflat-flat-plate.php, vogue-range.php, lily-range.php, wood-switches-and-sockets.php, essential.php,
          varilight-value.php, lever-toggle-switches.php, freestyle-range.php, bespoke.php, architrave-switches.php */
@media (max-width: 1199px) {
    .vl-collection-aside { margin-top: 40px; }
}

/* Dimmer cards: V-Pro first and largest, then four, then six smaller (ordered by sales) */
.vl-dim-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.vl-dcard { position: relative; display: flex; flex-direction: column; padding: 28px; border-radius: var(--vl-radius-lg); background: var(--vl-card); color: var(--vl-ink); box-shadow: var(--vl-shadow-sm); transition: box-shadow var(--vl-speed) var(--vl-ease), transform var(--vl-speed) var(--vl-ease); }
.vl-dcard:hover, .vl-dcard:focus { box-shadow: var(--vl-shadow-lg); color: var(--vl-ink); text-decoration: none; }
.vl-dcard-img img { transition: transform .5s var(--vl-ease); }
.vl-dcard h3 { margin: 0; font-size: 19px; line-height: 1.3; }
.vl-dlogo { align-self: flex-start; width: auto; height: 46px; max-width: 70%; object-fit: contain; object-position: left center; }
.vl-dlogo-text { display: flex; align-items: center; height: 46px; color: var(--vl-indigo); font-size: 17px; font-weight: 700; }
/* The product photo sits on a soft rounded tile: the photos have white backgrounds, and multiply lets the white take
   the tile colour (the tile stays light in the dark theme, so they never show as hard white squares) */
.vl-dcard-img { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; height: 210px; margin: 16px 0; padding: 16px; overflow: hidden; border-radius: var(--vl-radius); background: var(--vl-surface); }
.vl-dcard-img img { width: auto; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.vl-dcard p { margin: 6px 0 0; color: var(--vl-slate); font-size: 15px; }
.vl-dcard .vl-go { margin-top: 18px; color: var(--vl-indigo); font-size: 14px; font-weight: 700; letter-spacing: .02em; }
.vl-dcard:hover .vl-go { text-decoration: underline; text-underline-offset: 3px; }
.vl-dcard--hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; padding: 40px; }
.vl-dcard--hero .vl-dlogo { height: 72px; }
.vl-dcard--hero h3 { margin-top: 22px; font-size: clamp(28px, 2.6vw, 38px); font-weight: var(--vl-display); letter-spacing: -0.02em; }
.vl-dcard--hero p { font-size: 17px; }
.vl-dcard--hero .vl-dcard-img { height: auto; margin: 0; padding: 28px; }
.vl-dcard--hero .vl-dcard-img img { max-height: 440px; }
.vl-pill { position: absolute; top: 24px; right: 24px; padding: 4px 12px; border-radius: 14px; background: var(--vl-mist); color: var(--vl-indigo); font-size: 12px; font-weight: 700; }
/* A list with an icon in a circle beside each item (the smart page's socket features and ideas) */
.vl-iconlist { display: grid; gap: 10px; margin: 0 0 20px; padding: 0; list-style: none; }
.vl-iconlist > li { display: flex; align-items: center; gap: 14px; font-size: 15px; line-height: 1.45; }
.vl-iconlist > li > .fa { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--vl-line-soft); border-radius: 50%; background: var(--vl-card); color: var(--vl-indigo); font-size: 17px; }
.vl-iconlist--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; }
@media (max-width: 767px) { .vl-iconlist--2 { grid-template-columns: minmax(0, 1fr); } }
/* The smart socket's directions, apart from its features: pairing steps | ideas, in a white card */
.vl-smart-use { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px 48px; margin-top: 32px; padding: 28px 32px; border-radius: var(--vl-radius-lg); background: var(--vl-card); box-shadow: var(--vl-shadow-sm); }
.vl-smart-use h3 { margin: 0 0 16px; font-size: 18px; }
.vl-smart-use .vl-iconlist > li > .fa { background: var(--vl-mist); }
@media (max-width: 991px) { .vl-smart-use { grid-template-columns: minmax(0, 1fr); padding: 22px 18px; } }
.vl-ticks { margin: 20px 0 0; padding: 0; list-style: none; }
.vl-ticks li { position: relative; padding: 7px 0 7px 28px; font-size: 15px; }
.vl-ticks .fa { position: absolute; top: 11px; left: 2px; color: var(--vl-indigo); }

/* Videos band */
.vl-home .vl-videos h3 { font-size: 19px; }
.vl-home .vl-videos .vl-play { width: 76px; height: 76px; margin: -38px 0 0 -38px; }
.vl-home .vl-videos .vl-play::after { margin: -13px 0 0 -7px; border-top-width: 13px; border-bottom-width: 13px; border-left-width: 21px; }
.vl-videos-sub { margin: 64px 0 20px; padding-top: 32px; border-top: 1px solid rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.78); font-size: 15px; }
.vl-home .vl-videos--lists { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
.vl-home .vl-videos--lists h3 { font-size: 16px; }
.vl-home .vl-videos--lists .vl-play { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
.vl-home .vl-videos--lists .vl-play::after { margin: -10px 0 0 -5px; border-top-width: 10px; border-bottom-width: 10px; border-left-width: 16px; }
.vl-pl-stack { position: relative; padding-top: 10px; }
.vl-pl-stack::before, .vl-pl-stack::after { content: ""; position: absolute; height: 14px; border-radius: 10px 10px 0 0; }
.vl-pl-stack::before { top: 0; left: 18px; right: 18px; background: rgba(255, 255, 255, 0.16); }
.vl-pl-stack::after { top: 5px; left: 9px; right: 9px; background: rgba(255, 255, 255, 0.3); }
.vl-pl-stack .vl-video { z-index: 1; }
.vl-count { position: absolute; right: 8px; bottom: 8px; padding: 3px 8px; border-radius: 4px; background: rgba(0, 0, 0, 0.78); color: #fff; font-size: 12px; font-weight: 600; }
.vl-count .fa { margin-right: 6px; }
.vl-band--navy .vl-pl-link { display: inline-block; margin-top: 4px; color: rgba(255, 255, 255, 0.7); font-size: 14px; }
.vl-band--navy .vl-pl-link:hover, .vl-band--navy .vl-pl-link:focus { color: var(--vl-sky); }

/* Company story */
.vl-story { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 112px); align-items: start; }
.vl-story-copy { max-width: 780px; }
.vl-story-copy h2 { margin: 0 0 22px; font-size: 34px; line-height: 1.18; }
.vl-story-copy p { margin: 0; color: var(--vl-slate); font-size: 18px; }
.vl-story-copy p + p { margin-top: 16px; }
.vl-story-links { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 32px; }

@media (max-width: 1199px) {   /* five across down to 1200px: the playlists stay one row on laptops */
    .vl-home .vl-videos--lists { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1199px) {
    .vl-dim-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
    .vl-home .vl-band { padding: 64px 0; }
    .vl-story, .vl-panel { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .vl-home .vl-videos--lists { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vl-panel-info { position: static; }
    .vl-dcard--hero { grid-template-columns: minmax(0, 1fr); padding: 32px; }
    .vl-dcard--hero .vl-dcard-img { order: -1; }
    .vl-dcard--hero .vl-dcard-img img { max-height: 280px; }
}
@media (max-width: 767px) {
    .vl-home .vl-band { padding: 48px 0; }
    .vl-hero { min-height: 0; padding: 40px 0 44px; }
    .vl-hero-media::after { background: rgba(18, 22, 90, 0.62); }
    .vl-hero-row { margin-top: 24px; padding-top: 24px; gap: 24px; }
    .vl-hero-row > p { flex-basis: 100%; font-size: 16px; }
    .vl-hero-row .vl-actions .vl-btn { flex: 1 1 auto; }
    .vl-story-copy h2 { font-size: 26px; }
    .vl-story-copy p { font-size: 16px; }

    .vl-tabs { gap: 6px; margin-bottom: 28px; }
    .vl-tabs button { height: 36px; padding: 0 12px; border-radius: 18px; font-size: 14px; }
    .vl-panel-info h3 { margin-bottom: 14px; font-size: 22px; }
    .vl-panel-info p { margin-top: 14px; font-size: 15px; }
    .vl-plates { gap: 8px; }
    .vl-plates--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .vl-plate { padding: 8px 6px 10px; }
    .vl-plate img, .vl-plate-pic { width: 100%; }
    .vl-plate-name { margin-top: 6px; font-size: 12px; }
    .vl-plate-code { font-size: 11px; }

    .vl-dim-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .vl-dcard--hero { gap: 8px; padding: 24px; }
    .vl-dcard--hero .vl-dlogo { height: 56px; }
    .vl-dcard--hero h3 { margin-top: 16px; font-size: 24px; }
    .vl-dcard--hero .vl-dcard-img img { max-height: 200px; }
    .vl-pill { top: 20px; right: 20px; }
    .vl-dim-grid > .vl-dcard:not(.vl-dcard--hero) { display: grid; grid-template-columns: minmax(0, 1fr) 110px; column-gap: 16px; align-items: center; }
    .vl-dim-grid > .vl-dcard:not(.vl-dcard--hero) .vl-dcard-img { grid-column: 2; grid-row: 1 / span 3; height: auto; margin: 0; }
    .vl-dim-grid > .vl-dcard:not(.vl-dcard--hero) .vl-dcard-img img { max-height: 100px; }
    .vl-dim-grid > .vl-dcard:not(.vl-dcard--hero) .vl-dlogo { height: 34px; }
    .vl-dim-grid > .vl-dcard:not(.vl-dcard--hero) h3 { margin-top: 10px; }

    .vl-videos-sub { margin-top: 40px; padding-top: 24px; }
    .vl-home .vl-videos h3 { font-size: 17px; }
    .vl-home .vl-videos--lists { gap: 20px 12px; }
    .vl-home .vl-videos--lists h3 { font-size: 14px; }
    .vl-home .vl-videos .vl-play { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
    .vl-home .vl-videos .vl-play::after { margin: -10px 0 0 -5px; border-top-width: 10px; border-bottom-width: 10px; border-left-width: 16px; }
}

/* Home page premium pass (October 2026): trust card, framed "Build your own" cards, V-Pro feature card,
   compact "More dimmers", story photos, section labels, sideways swipe rows on phones and tablets */
/* Short label above a section title ("Finishes", "Dimmers"...) */
.vl-home p.vl-eyebrow { margin: 0 0 12px; color: var(--vl-indigo); font-size: 13px; font-weight: 700; line-height: 1.2; letter-spacing: .14em; text-transform: uppercase; }
.vl-home .vl-band--navy p.vl-eyebrow { color: var(--vl-sky); }
.vl-home .vl-head h2 { font-size: clamp(32px, 3.3vw, 50px); }

/* Hero: the trust card overlaps the foot of the hero, so the pause button moves up clear of it */
.vl-home .vl-hero-toggle { bottom: 84px; }
/* On a desktop the whole trust card shows in the first screen: the hero is the window's height less the header (about
   200px) and the part of the card below it (about 130px), between the usual limits. A 1080p screen (a 950px-high
   window) cut the card in half (21 Oct 2026); tall screens are unchanged (they reach the 780px limit). */
@media (min-width: 992px) {
    .vl-home .vl-hero { min-height: clamp(520px, calc(100vh - 350px), 780px); }
    /* "Pause video" in the film's top right corner: at the foot it met the search box on laptop screens (1024 to
       1366 wide, a short hero). Phones and tablets keep it at the foot, where it is clear. */
    .vl-home .vl-hero-toggle { top: 20px; bottom: auto; }
}

/* Trust badges: a raised white card overlapping the hero. The badge images keep the site-wide
   white tile (section 14, "Trust logos"); here they are simply made large. */
.vl-trust { position: relative; z-index: 3; margin-top: -56px; }
.vl-trust-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-radius: var(--vl-radius-lg); background: var(--vl-card); box-shadow: var(--vl-shadow-lg); }
.vl-trust-list li { display: flex; }
.vl-trust-list li + li { border-left: 1px solid var(--vl-line); }
.vl-trust-item { display: flex; align-items: center; gap: 24px; width: 100%; padding: 30px clamp(20px, 2.4vw, 40px); color: var(--vl-ink); }
.vl-trust-item:hover, .vl-trust-item:focus { color: var(--vl-ink); text-decoration: none; }
.vl-trust-badge { flex: 0 0 auto; width: 108px; height: 108px; transition: transform var(--vl-speed) var(--vl-ease); }
.vl-trust-text strong { display: block; font-size: 19px; line-height: 1.25; transition: color var(--vl-speed) var(--vl-ease); }
.vl-trust-text span { display: block; margin-top: 6px; color: var(--vl-slate); font-size: 14.5px; line-height: 1.5; }
.vl-trust-item:hover strong, .vl-trust-item:focus strong { color: var(--vl-indigo); }
@media (hover: hover) {
    .vl-trust-item:hover .vl-trust-badge { transform: scale(1.05); }
}
/* The section after the trust card needs less top space (the card already separates it) */
.vl-home .vl-trust + .vl-band { padding-top: 72px; }

/* Find your finish: quieter, more even tabs */
.vl-home .vl-tabs { gap: 10px; }
.vl-home .vl-tabs button { height: 44px; padding: 0 20px; border-radius: 22px; }
.vl-home .vl-panel-info img { box-shadow: var(--vl-shadow-md); }

/* Dimmers: the V-Pro card now sits above the grid of four (not inside it), full width at every size */
.vl-home .vl-dcard--hero { margin-bottom: 20px; }

/* Dimmers, wide screens: the V-Pro card becomes a full-width feature in three columns (words, the
   ticks, the module), with the four main cards in one row beneath it. Shorter and easier to read than
   the old tall 2 x 2 block with its narrow text column. The card's inner <div> is set to
   display: contents so its parts can sit in the card's own grid. Below 1200px the existing layout applies. */
@media (min-width: 1200px) {
    .vl-home .vl-dcard--hero { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr) minmax(0, 4fr); grid-template-rows: auto auto auto 1fr; column-gap: 56px; row-gap: 0; align-items: start; padding: 44px 56px; }
    .vl-home .vl-dcard--hero > div:first-child { display: contents; }
    .vl-home .vl-dcard--hero .vl-dlogo { grid-column: 1; grid-row: 1; }
    .vl-home .vl-dcard--hero h3 { grid-column: 1; grid-row: 2; }
    .vl-home .vl-dcard--hero > div > p:not(.vl-go) { grid-column: 1; grid-row: 3; }
    .vl-home .vl-dcard--hero .vl-go { grid-column: 1; grid-row: 4; align-self: end; }
    .vl-home .vl-dcard--hero .vl-ticks { grid-column: 2; grid-row: 1 / span 4; align-self: center; margin: 0; padding-left: 40px; border-left: 1px solid var(--vl-line); }
    .vl-home .vl-dcard--hero .vl-dcard-img { grid-column: 3; grid-row: 1 / span 4; align-self: center; }
    .vl-home .vl-dcard--hero .vl-dcard-img img { max-height: 320px; }
    .vl-home .vl-dim-grid > .vl-dcard:not(.vl-dcard--hero) .vl-dcard-img { height: 170px; }
    .vl-home .vl-dim-grid > .vl-dcard:not(.vl-dcard--hero) .vl-dcard-img img { max-height: 100%; }
}

/* Dimmers, tablets: the V-Pro card keeps its words beside the module, with the ticks in two columns
   underneath (instead of one tall column with the picture on top) */
@media (min-width: 768px) and (max-width: 1199px) {
    .vl-home .vl-dcard--hero { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); column-gap: 32px; row-gap: 0; align-items: start; padding: 36px; }
    .vl-home .vl-dcard--hero > div:first-child { display: contents; }
    .vl-home .vl-dcard--hero .vl-dlogo { grid-column: 1; grid-row: 1; }
    .vl-home .vl-dcard--hero h3 { grid-column: 1; grid-row: 2; }
    .vl-home .vl-dcard--hero > div > p:not(.vl-go) { grid-column: 1; grid-row: 3; }
    .vl-home .vl-dcard--hero .vl-ticks { grid-column: 1 / -1; grid-row: 4; columns: 2; column-gap: 32px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--vl-line); }
    .vl-home .vl-dcard--hero .vl-ticks li { break-inside: avoid; }
    .vl-home .vl-dcard--hero .vl-go { grid-column: 1; grid-row: 5; }
    .vl-home .vl-dcard--hero .vl-dcard-img { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
    .vl-home .vl-dcard--hero .vl-dcard-img img { max-height: 260px; }
}

/* Dimmers: "More dimmers" row of compact cards, picture left and words right */
.vl-row-title { margin: 56px 0 18px; color: var(--vl-slate); font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.vl-dim-small { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 0; }
.vl-dim-small .vl-dcard { display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; column-gap: 20px; padding: 18px 22px; }
.vl-dim-small .vl-dlogo, .vl-dim-small .vl-dlogo-text { display: none; }
.vl-dim-small .vl-dcard-img { grid-column: 1; grid-row: 1 / span 2; height: 96px; margin: 0; padding: 8px; border-radius: 10px; }
.vl-dim-small .vl-dcard-img img { max-height: 100%; }
.vl-dim-small h3 { grid-column: 2; align-self: end; font-size: 16px; }
.vl-dim-small p { grid-column: 2; align-self: start; margin-top: 4px; font-size: 14px; line-height: 1.5; }

/* Build your own plate: four separate cards, each with its own frame, picture and link */
.vl-build-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.vl-build-cards > li { display: flex; }
.vl-build-card { display: flex; flex-direction: column; width: 100%; overflow: hidden; border: 1px solid var(--vl-line); border-radius: var(--vl-radius-lg); background: var(--vl-card); color: var(--vl-ink); box-shadow: var(--vl-shadow-sm); transition: box-shadow var(--vl-speed) var(--vl-ease), transform var(--vl-speed) var(--vl-ease), border-color var(--vl-speed) var(--vl-ease); }
.vl-build-card:hover, .vl-build-card:focus { border-color: var(--vl-line-soft); box-shadow: var(--vl-shadow-lg); color: var(--vl-ink); text-decoration: none; }
.vl-build-media { display: block; aspect-ratio: 3 / 2; overflow: hidden; border-bottom: 1px solid var(--vl-line); background: var(--vl-surface); }
.vl-build-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--vl-ease); }
.vl-build-body { display: flex; flex: 1 1 auto; flex-direction: column; padding: 20px 20px 22px; }
.vl-build-body h3 { margin: 0; font-size: 22px; line-height: 1.25; }
.vl-build-body p { flex: 1 1 auto; margin: 8px 0 0; color: var(--vl-slate); font-size: 15px; line-height: 1.55; }
.vl-build-body .vl-go { margin-top: 18px; color: var(--vl-indigo); font-size: 14px; font-weight: 700; letter-spacing: .02em; }
.vl-build-body .vl-go::after { content: "\2192"; display: inline-block; margin-left: 8px; transition: transform var(--vl-speed) var(--vl-ease); }
@media (hover: hover) {
    .vl-build-card:hover { transform: translateY(-4px); }
    .vl-build-card:hover .vl-build-media img { transform: scale(1.04); }
    .vl-build-card:hover .vl-go::after { transform: translateX(4px); }
}
/* "More ranges": the site's chip links, with a label */
.vl-chips--ranges { align-items: center; gap: 10px; margin-top: 40px; }
.vl-home-planner { margin-top: clamp(24px, 3vw, 40px); }   /* the room planner under the switches and sockets (home page) */
.vl-home-planner h3 { margin: 0 0 6px; font-size: 20px; }
.vl-chips--ranges strong { margin-right: 6px; color: var(--vl-slate); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.vl-chips--ranges a { padding: 8px 16px; border-radius: 18px; }

/* Company story: words beside three room photos (the first large), each linking to its finish */
.vl-home .vl-story { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.vl-home .vl-story-copy h2 { font-size: clamp(30px, 3vw, 46px); font-weight: var(--vl-display); line-height: 1.12; letter-spacing: -0.02em; }
.vl-story-award { display: flex; gap: 16px; margin-top: 28px; padding: 20px 22px; border-radius: var(--vl-radius); background: var(--vl-mist); }
.vl-story-award .fa { margin-top: 2px; color: var(--vl-indigo); font-size: 24px; }
.vl-story-award h3 { margin: 0; font-size: 17px; }
.vl-story-copy .vl-story-award p { margin: 4px 0 0; font-size: 15px; }
.vl-story-photos { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); grid-template-rows: 1fr 1fr; gap: 16px; margin: 0; padding: 0; list-style: none; }
.vl-story-photos li:first-child { grid-row: span 2; }
.vl-story-photos--2 { grid-template-rows: 1fr; }   /* two pictures side by side (varilight.eu) */
.vl-story-photos--2 li:first-child { grid-row: auto; }
.vl-story-photos a { position: relative; display: block; height: 100%; overflow: hidden; border-radius: var(--vl-radius-lg); background: var(--vl-surface); }
.vl-story-photos img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform .6s var(--vl-ease); }
.vl-story-photos li:not(:first-child) img { position: absolute; top: 0; left: 0; height: 100%; aspect-ratio: auto; object-position: 75% 50%; }
.vl-story-photos span { position: absolute; left: 14px; bottom: 14px; padding: 5px 12px; border-radius: 14px; background: var(--vl-card); color: var(--vl-ink); font-size: 13px; font-weight: 700; box-shadow: var(--vl-shadow-sm); }
@media (hover: hover) {
    .vl-story-photos a:hover img { transform: scale(1.04); }
}

/* ---------- Narrower screens ---------- */
@media (max-width: 1199px) {
    .vl-dim-small { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vl-build-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .vl-trust-item { flex-direction: column; align-items: center; gap: 16px; text-align: center; }
    .vl-trust-badge { width: 92px; height: 92px; }
}
@media (max-width: 991px) {
    /* Trust card: badge and title only (the badge links to the detail) */
    .vl-trust-item { gap: 12px; padding: 22px 12px 20px; }
    .vl-trust-badge { width: 80px; height: 80px; }
    .vl-trust-text strong { font-size: 16px; line-height: 1.3; }
    .vl-trust-text span { display: none; }
    .vl-home .vl-trust + .vl-band { padding-top: 56px; }

    .vl-home .vl-story { grid-template-columns: minmax(0, 1fr); }
    .vl-story-photos { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto; gap: 12px; }
    .vl-story-photos li:first-child { grid-row: auto; }
    .vl-story-photos li:not(:first-child) img { position: static; aspect-ratio: 1 / 1; }
    .vl-story-photos img { object-position: 75% 50%; }

    /* Swipe rows: on tablets and phones the long card rows scroll sideways inside their own strip
       (the page itself never does), snapping card by card, with the next card peeking in as a hint.
       Used by: More dimmers, Build your own plate, the videos and the playlists. */
    .vl-home .vl-swipe { display: flex; gap: 16px; margin: 0 calc(-1 * var(--vl-gutter)); padding: 4px var(--vl-gutter) 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 var(--vl-gutter); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .vl-home .vl-swipe::-webkit-scrollbar { display: none; }
    .vl-home .vl-swipe > * { flex: 0 0 44%; min-width: 0; scroll-snap-align: start; }
    .vl-home .vl-videos--lists.vl-swipe > * { flex-basis: 30%; }
}
@media (max-width: 767px) {
    .vl-home .vl-hero { padding-bottom: 100px; }
    .vl-home .vl-hero-toggle { bottom: 44px; }
    .vl-trust { margin-top: -32px; }
    .vl-trust-item { gap: 10px; padding: 18px 6px 16px; }
    .vl-trust-badge { width: 60px; height: 60px; }
    .vl-trust-text strong { font-size: 13px; }
    .vl-home .vl-trust + .vl-band { padding-top: 44px; }
    .vl-home .vl-head h2 { font-size: 28px; }
    .vl-home p.vl-eyebrow { margin-bottom: 8px; font-size: 12px; }

    .vl-home .vl-dcard--hero { margin-bottom: 14px; }
    .vl-home .vl-dcard--hero .vl-ticks { margin-top: 14px; }
    .vl-home .vl-dcard--hero .vl-ticks li { padding-top: 4px; padding-bottom: 4px; font-size: 14px; }
    .vl-home .vl-dcard--hero .vl-ticks .fa { top: 8px; }
    /* The four main dimmer cards in the swipe row: picture on top again (the stacked phone layout
       in section 9 puts it at the side, which is too narrow inside a swipe card) */
    .vl-home .vl-dim-grid.vl-swipe > .vl-dcard { display: flex; flex-direction: column; padding: 20px; }
    .vl-home .vl-dim-grid.vl-swipe > .vl-dcard .vl-dcard-img { height: 130px; margin: 10px 0; }
    .vl-home .vl-dim-grid.vl-swipe > .vl-dcard .vl-dcard-img img { max-height: 100%; }
    .vl-home .vl-dim-grid.vl-swipe > .vl-dcard h3 { margin-top: 0; }

    .vl-row-title { margin: 28px 0 12px; }
    .vl-dim-small .vl-dcard { grid-template-columns: 72px minmax(0, 1fr); column-gap: 14px; padding: 14px 16px; }
    .vl-dim-small .vl-dcard-img { height: 72px; padding: 6px; }
    .vl-dim-small .vl-dcard-img img { max-height: 100%; }
    .vl-dim-small h3 { font-size: 15px; }
    .vl-dim-small p { font-size: 13px; }

    .vl-build-body { padding: 18px 18px 20px; }
    .vl-build-body h3 { font-size: 19px; }
    .vl-build-body p { font-size: 14px; }
    .vl-chips--ranges { margin-top: 28px; gap: 8px; }
    .vl-chips--ranges strong { flex-basis: 100%; }

    .vl-story-award { padding: 16px; }
    .vl-story-photos { gap: 8px; }
    .vl-story-photos a { border-radius: var(--vl-radius); }
    .vl-story-photos span { display: none; }

    .vl-home .vl-swipe { gap: 12px; padding-bottom: 14px; }
    .vl-home .vl-swipe > * { flex-basis: 80%; }
    .vl-home .vl-videos--lists.vl-swipe > * { flex-basis: 62%; }
}


/* ==========================================================================
   10. Data sheets (configurator/product.php, includes/datasheet.php, includes/leaflets.php)
   ========================================================================== */

/* Product code lookup in the title bar */
.vl-ds-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.vl-lookup { display: flex; align-items: center; width: 360px; max-width: 100%; height: 46px; margin: 0; padding-left: 18px; background: var(--vl-card); border: 1px solid var(--vl-line); border-radius: 23px; transition: box-shadow .15s ease, border-color .15s ease; }
.vl-lookup:focus-within { border-color: var(--vl-sky); box-shadow: 0 0 0 2px var(--vl-sky); }
.vl-lookup input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; color: var(--vl-ink); font-size: 15px; text-transform: uppercase; outline: none; box-shadow: none; }
.vl-lookup input::placeholder { color: #6b6f8f; text-transform: none; }
.vl-lookup button { height: 36px; margin-right: 5px; padding: 0 16px; border: 0; border-radius: 18px; background: var(--vl-indigo); color: var(--vl-on-accent); font-size: 13px; font-weight: 600; cursor: pointer; }
.vl-lookup button:hover { background: var(--vl-indigo-hover); }
.vl-suggest { margin: 0; font-size: 18px; }

/* Downloads bar */
/* Downloads box (instruction leaflets page: a product's leaflets) */
.vl-downloads { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 0 0 32px; padding: 16px 18px; border: 1px solid var(--vl-line); border-radius: 14px; background: var(--vl-mist); }
.vl-downloads > span { margin-right: 6px; color: var(--vl-ink); font-size: 15px; font-weight: 700; }
.vl-downloads a { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border: 1px solid var(--vl-line); border-radius: 10px; background: var(--vl-card); color: var(--vl-ink); font-size: 15px; font-weight: 600; text-decoration: none; transition: border-color .15s ease, color .15s ease; }
.vl-downloads a:hover, .vl-downloads a:focus { border-color: var(--vl-indigo); color: var(--vl-indigo); text-decoration: none; }
.vl-downloads .fa { color: var(--vl-indigo); font-size: 18px; }
.vl-downloads small { color: var(--vl-slate); font-size: 12px; font-weight: 400; }
/* Data sheet title bar: instruction leaflet and video buttons beside Print / PDF (includes/leaflets.php) */
.vl-ds-dl { background: var(--vl-card); }
.vl-ds-dl .fa { font-size: 17px; }
.vl-ds-dl small { color: var(--vl-slate); font-size: 12px; font-weight: 400; }

/* The sheet: images on the left, details on the right */
.vl-sheet { color: var(--vl-ink); }
.vl-sheet-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.vl-sheet h2, .vl-sheet h3 { margin: 0; font-weight: 700; }
.vl-sheet p { margin: 0; }
.vl-sheet ul { margin: 0; padding: 0; list-style: none; }
.vl-print-only { display: none; }

.vl-sheet-media { position: sticky; top: 100px; }
.vl-gallery-main { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; padding: 32px; overflow: hidden; border-radius: var(--vl-radius-lg); background: var(--vl-surface); cursor: zoom-in; }
.vl-gallery-main img { display: block; max-height: 100%; width: auto; object-fit: contain; mix-blend-mode: multiply; transition: transform .4s var(--vl-ease), opacity .25s ease; }
.vl-gallery-main.is-zoomed { cursor: zoom-out; }
.vl-gallery-main.is-zoomed img { transform: scale(2.2); }
.vl-gallery-main img.is-fading { opacity: 0; }
.vl-gallery-full { position: absolute; top: 12px; right: 12px; z-index: 2; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--vl-line); border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--vl-indigo); }
.vl-gallery-full:hover, .vl-gallery-full:focus { border-color: var(--vl-indigo); }
.vl-zoom-hint { position: absolute; bottom: 12px; left: 50%; z-index: 2; padding: 4px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.92); color: var(--vl-slate); font-size: 12px; white-space: nowrap; transform: translateX(-50%); pointer-events: none; transition: opacity .2s ease; }
.vl-zoom-hint:empty, .vl-gallery-main.is-zoomed .vl-zoom-hint { opacity: 0; }
.vl-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 12px; margin-top: 14px; }
.vl-thumb { display: block; aspect-ratio: 1 / 1; padding: 8px; border: 1px solid transparent; border-radius: 10px; background: var(--vl-surface); cursor: pointer; transition: border-color var(--vl-speed) var(--vl-ease), box-shadow var(--vl-speed) var(--vl-ease); }
.vl-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.vl-thumb:hover { border-color: var(--vl-sky); }
.vl-thumb[aria-pressed="true"] { border-color: var(--vl-indigo); box-shadow: 0 0 0 1px var(--vl-indigo); }
.vl-sheet-badges { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; margin-top: 32px; }
/* Up to 140px each, shrinking so all three stay on one row (92px = two 16px gaps + three 20px tile paddings) */
.vl-sheet-badges .vl-trust-logo { display: block; flex: 0 0 auto; width: min(140px, calc((100% - 92px) / 3)); height: auto; max-height: none; }
@media (max-width: 480px) {
    .vl-sheet-badges { gap: 10px; }
    .vl-sheet-badges .vl-trust-logo { width: min(140px, calc((100% - 80px) / 3)); }
}

.vl-sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.vl-sheet-title { flex: 1 1 auto; min-width: 0; }
.vl-sheet-kicker { margin: 0 0 6px; color: var(--vl-indigo); font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: .14em; text-transform: uppercase; }
.vl-sheet-title h1 { margin: 0; line-height: 1.2; }
.vl-sheet-code { display: block; font-size: clamp(34px, 3.4vw, 48px); font-weight: 700; line-height: 1.05; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.vl-sheet-desc { display: block; margin-top: 10px; font-size: clamp(18px, 1.6vw, 22px); font-weight: 600; line-height: 1.35; }
.vl-sheet-aka { margin: 6px 0 0; color: var(--vl-slate); font-size: 16px; line-height: 1.4; }   /* the everyday name under the heading */
/* ---- Data sheet: Where to buy panel (includes/buy-links.php vl_buy_links(..., 'panel')) ---- */
.vl-wtb { scroll-margin-top: 90px; }
.vl-wtb-title { display: none; }   /* the fold's own "Where to buy" line is the heading */

/* Where to buy, folded away at the foot of the data sheet: a quiet line until opened */
.vl-wtb-fold { max-width: 860px; margin: 48px 0 0; border: 0; border-top: 1px solid var(--vl-line); border-radius: 0; background: none; }
.vl-wtb-fold[open] { box-shadow: none; }
.vl-wtb-fold > summary { justify-content: flex-start; gap: 10px; padding: 16px 0; color: var(--vl-slate); font-size: 14px; font-weight: 700; letter-spacing: .02em; }
.vl-wtb-fold > summary::after { font-size: 16px; }
.vl-wtb-fold > summary:hover { color: var(--vl-indigo); }
.vl-wtb-fold > .vl-acc-body { padding: 0 0 8px; }
.vl-wtb-part { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--vl-line); }
.vl-wtb-title + .vl-wtb-part { margin-top: 0; padding-top: 0; border-top: 0; }   /* no Buy direct button */
.vl-wtb-part h3 { margin: 0 0 10px; font-size: 15px; }
.vl-wtb-shops { display: grid; grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.vl-wtb-shops a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 8px; height: 100%; padding: 8px 12px; border: 1px solid var(--vl-line); border-radius: 10px; color: var(--vl-ink); text-decoration: none; transition: border-color .15s ease; }
.vl-wtb-shops a:hover, .vl-wtb-shops a:focus { border-color: var(--vl-indigo); color: var(--vl-ink); text-decoration: none; }
.vl-wtb-shops strong { font-size: 15px; line-height: 1.3; }
.vl-wtb-shops span { grid-column: 1; color: var(--vl-slate); font-size: 13px; line-height: 1.3; }
.vl-wtb-shops .fa { grid-column: 2; grid-row: 1 / span 2; color: var(--vl-indigo); font-size: 13px; }
.vl-wtb-hint { margin: 8px 0 0; color: var(--vl-slate); font-size: 13px; }
.vl-wtb .vl-near-input { height: 40px; font-size: 15px; }
.vl-wtb .vl-near-row .vl-btn { height: 40px; }
.vl-wtb-more { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--vl-line); color: var(--vl-slate); font-size: 14px; }
.vl-wtb-more .fa { margin-right: 6px; color: var(--vl-indigo); }
.vl-wtb-more a { font-weight: 600; }
@media (max-width: 767px) {
    .vl-wtb { padding: 18px 16px; }
    .vl-wtb .vl-near-input { font-size: 16px; }   /* 16px stops phones zooming in on the box */
}

/* Similar products (includes/similar-products.php): one compact row. An upgrade (if any) is a single line;
   insert colours, finishes and plate styles sit behind small tabs (js "Tabs"), one scrolling row each. */
.vl-similar { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--vl-line); }
.vl-similar-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-bottom: 16px; }
.vl-similar-head h2 { margin: 0; font-size: clamp(20px, 1.8vw, 24px); font-weight: var(--vl-display); letter-spacing: -0.01em; }
.vl-tabs--small { margin: 0; gap: 6px; }
.vl-tabs--small button { height: 34px; padding: 0 14px; border-radius: 17px; font-size: 13px; }
.vl-similar-h { margin: 18px 0 10px; color: var(--vl-slate); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.vl-js .vl-similar [role="tabpanel"] .vl-similar-h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.vl-similar-panel[hidden] { display: none; }

.vl-upgrade { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 16px; }
.vl-upgrade-label { color: var(--vl-indigo); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.vl-upgrade-item { display: inline-flex; align-items: center; gap: 10px; padding: 4px 16px 4px 4px; border: 1px solid var(--vl-line); border-radius: 28px; background: var(--vl-card); color: var(--vl-slate); font-size: 13px; line-height: 1.3; transition: border-color var(--vl-speed) var(--vl-ease), box-shadow var(--vl-speed) var(--vl-ease); }
.vl-upgrade-item img { width: 44px; height: 44px; padding: 4px; border-radius: 50%; background: var(--vl-surface); object-fit: contain; }
.vl-upgrade-item strong { margin-right: 4px; color: var(--vl-ink); font-size: 14px; }
.vl-upgrade-item:hover, .vl-upgrade-item:focus { border-color: var(--vl-indigo); box-shadow: var(--vl-shadow-sm); color: var(--vl-slate); text-decoration: none; }
.vl-upgrade-item:hover strong, .vl-upgrade-item:focus strong { color: var(--vl-indigo); }

.vl-swatches { display: flex; gap: 10px; margin: 0; padding: 0 0 8px; overflow-x: auto; list-style: none; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.vl-swatches li { flex: 0 0 120px; scroll-snap-align: start; }
.vl-swatches a { display: flex; flex-direction: column; align-items: center; height: 100%; padding: 10px 8px; border-radius: var(--vl-radius); background: var(--vl-surface); color: var(--vl-ink); text-align: center; transition: background-color var(--vl-speed) var(--vl-ease), box-shadow var(--vl-speed) var(--vl-ease); }
.vl-swatches a:hover, .vl-swatches a:focus { background: var(--vl-card); box-shadow: var(--vl-shadow-md); color: var(--vl-indigo); text-decoration: none; }
.vl-swatches img { width: 64px; height: 64px; object-fit: contain; margin-bottom: 6px; mix-blend-mode: multiply; }
.vl-swatch-name { font-size: 13px; font-weight: 700; line-height: 1.25; }
.vl-swatch-sub { margin-top: 2px; color: var(--vl-slate); font-size: 11px; line-height: 1.3; }
@media (max-width: 767px) {
    .vl-swatches li { flex-basis: 104px; }
    .vl-upgrade-item { width: 100%; }
}
.vl-sheet-logo-link { flex: 0 0 auto; max-width: 38%; padding: 8px 12px; border: 1px solid var(--vl-line); border-radius: 10px; background: #fff; transition: border-color .15s ease; }
a.vl-sheet-logo-link:hover, a.vl-sheet-logo-link:focus { border-color: var(--vl-indigo); }   /* a logo with no page to open is a span */
/* A set height (the logos are all taller than this, so they look as before) keeps the logo's place while it loads:
   with the img's width and height (includes/datasheet.php) the width is known too, so the specifications don't jump */
.vl-sheet-logo { display: block; width: auto; max-width: 100%; height: 56px; object-fit: contain; }
.vl-sheet .vl-status { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; padding: 12px 16px; border-radius: 10px; background: var(--vl-chosen); font-size: 15px; line-height: 1.5; }
.vl-sheet .vl-status .fa { margin-top: 3px; color: var(--vl-indigo); }
.vl-sheet .vl-status a { font-weight: 600; }
.vl-sheet .vl-status--notice { background: var(--vl-notice-bg); color: var(--vl-notice-ink); }
.vl-sheet .vl-status--notice .fa { color: var(--vl-notice-mark); }
.vl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.vl-chips a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px solid var(--vl-line); border-radius: 16px; background: var(--vl-mist); font-size: 14px; font-weight: 600; text-decoration: none; }
.vl-chips a:hover, .vl-chips a:focus { border-color: var(--vl-indigo); text-decoration: none; }
.vl-chips span { color: var(--vl-slate); font-weight: 400; }

.vl-features { margin-top: 28px; padding: 24px; border-radius: 14px; background: var(--vl-mist); }
.vl-features h3, .vl-specs h3 { font-size: 17px; }
.vl-sheet .vl-features ul { margin-top: 12px; }
.vl-features li { position: relative; padding: 6px 0 6px 30px; font-size: 15px; line-height: 1.5; }
.vl-features li .fa { position: absolute; top: 9px; left: 2px; color: var(--vl-indigo); font-size: 16px; }
.vl-specs { margin-top: 32px; }
.vl-specs section + section { margin-top: 26px; }
.vl-specs dl { margin: 10px 0 0; }
.vl-spec { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 16px; padding: 9px 0; border-top: 1px solid var(--vl-line); font-size: 15px; line-height: 1.45; }
.vl-spec:last-child { border-bottom: 1px solid var(--vl-line); }
.vl-spec dt { color: var(--vl-slate); font-weight: 600; }
.vl-spec dd { margin: 0; }
.vl-sheet .vl-doc-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 16px; font-size: 15px; font-weight: 600; }
.vl-about { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.vl-about > div { padding: 20px; border: 1px solid var(--vl-line); border-radius: 14px; }
.vl-about h3 { font-size: 16px; }
.vl-sheet .vl-about p { margin-top: 8px; color: var(--vl-slate); font-size: 14px; line-height: 1.55; }
.vl-sheet .vl-sheet-note { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--vl-line); color: var(--vl-slate); font-size: 13px; line-height: 1.55; }

@media screen and (max-width: 991px) {
    .vl-sheet-grid { grid-template-columns: minmax(0, 1fr); }
    .vl-sheet-media { position: static; max-width: 560px; }
}
@media screen and (max-width: 767px) {
    .vl-ds-tools { width: 100%; gap: 8px; }
    .vl-lookup { flex: 1 1 auto; width: auto; min-width: 0; }
    .vl-ds-tools .vl-btn { flex: 1 1 auto; height: 42px; padding: 0 12px; font-size: 14px; }
    .vl-ds-dl small { display: none; }   /* "PDF": the icon says it; keeps the leaflet and Print / PDF on one row */
    .vl-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }   /* small, so the picture and title stay close */
    .vl-thumb { padding: 5px; }
    .vl-downloads { flex-direction: column; align-items: stretch; }
    .vl-downloads a { justify-content: flex-start; }
    .vl-gallery-main { padding: 14px; }
    .vl-sheet-head { gap: 14px; }
    .vl-sheet-logo-link { padding: 6px 8px; }
    .vl-sheet-logo { height: 38px; }
    .vl-features { padding: 18px; }
    .vl-spec { grid-template-columns: minmax(0, 1fr); gap: 2px; font-size: 14px; }
    .vl-about { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   Data sheet: the range and finish chips share a row with "Add to my list"
   (a quantity, the button, and "In my list: n" once it is listed). The
   quantity box (.vl-qty) is also used on the My list page.
   -------------------------------------------------------------------------- */
.vl-sheet-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 16px; }
/* "Replaced by": a discontinued product's replacement, under its status message (includes/datasheet.php) */
.vl-replaced { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 14px; }
.vl-replaced-label { color: var(--vl-slate); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.vl-replaced-card { display: flex; align-items: center; gap: 14px; max-width: 560px; padding: 10px 16px 10px 10px; border: 1px solid var(--vl-indigo); border-radius: 12px; background: var(--vl-card); color: var(--vl-ink); line-height: 1.35; transition: box-shadow .15s ease; }
.vl-replaced-card:hover, .vl-replaced-card:focus { box-shadow: 0 6px 18px rgba(18, 22, 90, .15); color: var(--vl-ink); text-decoration: none; }
.vl-replaced-card img { flex: 0 0 72px; width: 72px; height: 72px; border-radius: 8px; background: #fff; object-fit: contain; }
.vl-replaced-card small { display: block; margin-top: 2px; color: var(--vl-slate); font-size: 13px; }
.vl-replaced-card > .fa { flex: 0 0 auto; margin-left: auto; color: var(--vl-indigo); }
.vl-replaced-plus { color: var(--vl-slate); font-size: 20px; font-weight: 700; }

.vl-replaced-find { margin: 12px 0 0; font-size: 15px; font-weight: 700; }
.vl-replaced-find .fa { margin-right: 8px; }

.vl-sheet-bar .vl-chips { margin-top: 0; }
.vl-addbox { display: none; }
.vl-js .vl-addbox { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.vl-addbox-btn { min-width: 184px; }
/* Which room on My list (js section 28; only once the list has rooms) */
.vl-addbox-room { max-width: 180px; height: 46px; padding: 0 10px; border: 1px solid var(--vl-line); border-radius: 23px; background: var(--vl-card); color: var(--vl-ink); font-size: 14px; }
.vl-addbox-btn.is-done { background: var(--vl-indigo-hover); border-color: var(--vl-indigo-hover); }
.vl-addbox-in { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; white-space: nowrap; }
.vl-addbox-in[hidden] { display: none; }

/* Quantity: minus, the number, plus, in one pill */
.vl-qty { display: inline-flex; align-items: center; height: 46px; padding: 0 3px; border: 1px solid var(--vl-line); border-radius: 23px; background: var(--vl-card); }
.vl-qty:focus-within { border-color: var(--vl-indigo); }
.vl-qty-btn { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--vl-indigo); font-size: 12px; cursor: pointer; transition: background-color var(--vl-speed) var(--vl-ease); }
.vl-qty-btn:hover { background: var(--vl-mist); }
.vl-qty-btn:disabled { color: var(--vl-off); background: none; cursor: default; }
.vl-qty-input { width: 46px; height: 100%; padding: 0; border: 0; background: transparent; color: var(--vl-ink); font-size: 16px; font-weight: 700; text-align: center; -moz-appearance: textfield; appearance: textfield; }
.vl-qty-input::-webkit-outer-spin-button, .vl-qty-input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
.vl-qty-input:focus { outline: none; }
@media (max-width: 767px) {
    .vl-js .vl-addbox { width: 100%; }
    .vl-addbox-btn { flex: 1 1 auto; min-width: 0; }
}

/* --------------------------------------------------------------------------
   Recently viewed (includes/my-list.php vl_recent_row; js section 29): one
   row of small cards that scrolls sideways, under Similar products on data
   sheets and above Popular products on /configurator/. Printed hidden and
   shown by the script only when there is something in it.
   -------------------------------------------------------------------------- */
.vl-recent { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--vl-line); }
.vl-recent[hidden] { display: none; }
.vl-recent-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 12px; }
.vl-recent-head h2 { margin: 0; font-size: clamp(20px, 1.8vw, 24px); font-weight: var(--vl-display); letter-spacing: -0.01em; }
.vl-recent-clear { padding: 0; border: 0; background: none; color: var(--vl-slate); font-size: 13px; font-weight: 700; cursor: pointer; }
.vl-recent-clear:hover, .vl-recent-clear:focus { color: var(--vl-indigo); text-decoration: underline; text-underline-offset: 3px; }
.vl-recent-list { display: flex; gap: 10px; margin: 0; padding: 2px 2px 10px; overflow-x: auto; list-style: none; scroll-snap-type: x proximity; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.vl-recent-item { position: relative; flex: 0 0 136px; min-width: 0; scroll-snap-align: start; }
.vl-recent-card { display: flex; flex-direction: column; height: 100%; min-width: 0; padding: 6px 6px 8px; border: 1px solid var(--vl-line-soft); border-radius: var(--vl-radius); background: var(--vl-card); box-shadow: var(--vl-shadow-sm); color: var(--vl-ink); line-height: 1.35; transition: border-color .15s ease, box-shadow .15s ease; }
.vl-recent-card:hover, .vl-recent-card:focus { border-color: var(--vl-indigo); box-shadow: 0 0 0 1px var(--vl-indigo); color: var(--vl-ink); text-decoration: none; }
.vl-recent-img { display: block; height: 88px; margin-bottom: 8px; padding: 8px; overflow: hidden; border-radius: 8px; background: var(--vl-surface); }
.vl-recent-img img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.vl-recent-img img.is-broken { visibility: hidden; }
.vl-recent-card strong { padding: 0 2px; font-size: 13px; }
.vl-recent-desc { display: -webkit-box; padding: 0 2px; overflow: hidden; font-size: 12px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.vl-recent-meta { margin-top: auto; padding: 4px 2px 0; overflow: hidden; color: var(--vl-slate); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.vl-js .vl-recent-item .vl-add { top: 10px; right: 10px; width: 26px; height: 26px; font-size: 11px; }
@media (max-width: 767px) {
    .vl-recent { margin-top: 32px; padding-top: 20px; }
    .vl-recent-item { flex-basis: 124px; }
    .vl-recent-img { height: 76px; }
}
/* All products page (/configurator/): the row closes the browse band, just above Popular products */
.vl-browse-more + .vl-recent { margin-top: 32px; }


/* ==========================================================================
   11. Product listings (range finish pages, collection pages, dimmer lists)
   A sticky bar of product groups, then each group as a grid of product cards.
   ========================================================================== */
.vl-range-hero { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.vl-range-hero > img { flex: 0 0 auto; width: 160px; height: 160px; object-fit: contain; border-radius: var(--vl-radius); background: var(--vl-photo); }
/* Pictures of the range beside the heading (includes/range-page.php; js "Range pictures") */
.vl-range-pics { flex: 0 0 auto; width: clamp(260px, 30vw, 420px); }
.vl-range-pics-main { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--vl-radius-lg); background: var(--vl-photo); transition: opacity .3s ease; }
.vl-range-pics-main.is-fading { opacity: 0; }
.vl-range-pics-main.is-fallback { object-fit: contain; padding: 12px; }
.vl-range-pics-thumbs { display: flex; gap: 6px; margin-top: 8px; }
.vl-range-pics-thumbs button { flex: 0 0 auto; width: 48px; height: 36px; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: 6px; background: var(--vl-photo); cursor: pointer; opacity: .7; transition: opacity var(--vl-speed) var(--vl-ease), border-color var(--vl-speed) var(--vl-ease); }
.vl-range-pics-thumbs button:hover, .vl-range-pics-thumbs button[aria-pressed="true"] { opacity: 1; }
.vl-range-pics-thumbs button[aria-pressed="true"] { border-color: var(--vl-indigo); }
.vl-range-pics-thumbs img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 767px) {
    .vl-range-hero { flex-direction: column; align-items: stretch; }
    .vl-range-pics { width: 100%; }
}

/* Finish switcher under the title bar of a finish page: the other finishes in the same collection */
.vl-finishbar { padding: 12px 0; border-bottom: 1px solid var(--vl-line); background: var(--vl-paper); }
.vl-finishbar .vl-wrap { display: flex; align-items: center; gap: 16px; }
.vl-finishbar-label { flex: 0 0 auto; color: var(--vl-slate); font-size: 13px; font-weight: 700; }
.vl-finishbar ul { display: flex; gap: 6px; margin: 0; padding: 2px; overflow-x: auto; list-style: none; scrollbar-width: thin; }
.vl-finishbar a { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 84px; padding: 6px 4px; border: 1px solid transparent; border-radius: 10px; color: var(--vl-ink); font-size: 12px; line-height: 1.25; text-align: center; }
.vl-finishbar a:hover, .vl-finishbar a:focus { border-color: var(--vl-line); color: var(--vl-indigo); text-decoration: none; }
.vl-finishbar a.is-current { border-color: var(--vl-indigo); box-shadow: 0 0 0 1px var(--vl-indigo); font-weight: 700; }
.vl-finishbar .vl-ph { width: 48px; height: 48px; padding: 2px; border-radius: 8px; }
.vl-finishbar .vl-ph img { width: 44px; height: 44px; object-fit: contain; }
/* The finish switcher wraps onto a second row on tablets and wider instead of scrolling sideways */
@media (min-width: 768px) {
    .vl-finishbar .vl-wrap { align-items: flex-start; }
    .vl-finishbar-label { padding-top: 21px; }   /* level with the first row of swatches */
    .vl-finishbar ul { flex-wrap: wrap; overflow-x: visible; }
}
.vl-range-hint { font-size: 15px !important; }

.vl-acc { scroll-margin-top: 96px; }
@media (max-width: 767px) {
    .vl-finishbar .vl-wrap { flex-direction: column; align-items: flex-start; gap: 6px; }
    .vl-finishbar ul { width: 100%; }
}

/* Product catalogue (includes/product-list.php vl_catalogue): a "Product type" list beside the products on wide
   screens (families fold open and shut), one select on tablets and phones; product cards (js section 17) */
/* Product catalogue (includes/product-list.php vl_catalogue): a "Product type" list and the chosen view's
   cards (Most popular, All products, or one group). Wide screens: the list is a column on the left that stays
   in view, families fold open and shut. Phones and tablets: one select in a bar that stays in view (js
   section 17); without JavaScript, the list above the products. */
.vl-catalogue { position: relative; scroll-margin-top: 96px; }
.vl-catalogue-main { min-width: 0; container: vl-cat / inline-size; }

/* The list */
.vl-catnav-title { margin: 0 0 6px; padding: 0 12px; color: var(--vl-slate); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.vl-catnav-list, .vl-catnav-list ul { margin: 0; padding: 0; list-style: none; }
.vl-catnav-list a,
.vl-catnav-list summary { position: relative; display: flex; align-items: baseline; gap: 12px; padding: 7px 12px; border-radius: 10px; color: var(--vl-ink); font-size: 15px; line-height: 1.35; cursor: pointer; transition: background-color var(--vl-speed) var(--vl-ease), color var(--vl-speed) var(--vl-ease); }
.vl-catnav-list a > span:first-child,
.vl-catnav-list summary > span:first-child { flex: 1 1 auto; min-width: 0; }
.vl-catnav-n { flex: 0 0 auto; color: var(--vl-slate); font-size: 12px; font-weight: 400; font-variant-numeric: tabular-nums; }
.vl-catnav-list a::after { content: ""; flex: 0 0 12px; }   /* the counts line up with the families' (their fold arrow sits there) */
.vl-catnav-list a:hover, .vl-catnav-list a:focus,
.vl-catnav-list summary:hover { background: var(--vl-mist); color: var(--vl-indigo); text-decoration: none; }
.vl-catnav-list a.is-current { background: var(--vl-chosen); color: var(--vl-indigo); font-weight: 700; }
.vl-catnav-list a.is-current .vl-catnav-n { color: var(--vl-indigo); }
/* All products: the group on screen while scrolling (js section 17) */
.vl-catnav-list a.is-inview { color: var(--vl-indigo); font-weight: 700; }
.vl-catnav-list a.is-inview::before { content: ""; position: absolute; top: 9px; bottom: 9px; left: 0; width: 3px; border-radius: 2px; background: var(--vl-indigo); }
/* Families: a hairline under Most popular / All products, then one fold each */
.vl-catnav-list > li:not(.vl-catnav-family) + .vl-catnav-family { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--vl-line); }
.vl-catnav-family summary { font-weight: 700; list-style: none; }
.vl-catnav-family summary::-webkit-details-marker { display: none; }
.vl-catnav-family summary::after { content: "\f107"; flex: 0 0 12px; color: var(--vl-slate); font-family: FontAwesome; font-size: 15px; font-weight: 400; line-height: 1; text-align: center; transition: transform var(--vl-speed) var(--vl-ease); }
.vl-catnav-family details[open] > summary::after { transform: rotate(180deg); }
.vl-catnav-family ul { margin: 2px 0 8px 12px; border-left: 1px solid var(--vl-line); }
.vl-catnav-family ul a { padding-left: 14px; border-radius: 0 10px 10px 0; font-size: 14px; }
.vl-catnav-family ul a.is-inview::before { left: -2px; }

/* The select (phones and tablets, with JavaScript) */
.vl-catnav-pick { display: none; }
.vl-catnav-pick label { flex: 0 0 auto; margin: 0; color: var(--vl-slate); font-size: 14px; font-weight: 700; }
.vl-catnav-pick select { flex: 1 1 auto; min-width: 0; max-width: 440px; height: 44px; padding: 0 14px; border: 1px solid var(--vl-line); border-radius: 22px; background: var(--vl-card); color: var(--vl-ink); font-size: 16px; font-weight: 700; cursor: pointer; }
.vl-catnav-pick select:focus { border-color: var(--vl-indigo); outline: none; box-shadow: 0 0 0 2px var(--vl-sky); }

@media (min-width: 992px) {
    .vl-catalogue--nav { display: grid; grid-template-columns: 236px minmax(0, 1fr); align-items: start; gap: clamp(28px, 3vw, 56px); }
    .vl-catnav { position: sticky; top: 96px; max-height: calc(100vh - 116px); margin: -6px; padding: 6px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
}
@media (min-width: 1400px) {
    .vl-catalogue--nav { grid-template-columns: 260px minmax(0, 1fr); }
}
@media (max-width: 991px) {
    .vl-catnav { margin: 0 0 24px; }
    .vl-catnav-list { columns: 2 220px; column-gap: 24px; }   /* without JavaScript */
    .vl-catnav-list > li { break-inside: avoid; }
    .vl-js .vl-catnav { position: sticky; top: 64px; z-index: 20; margin: 0 0 20px; padding: 10px 0; border-bottom: 1px solid var(--vl-line); background: var(--vl-glass); }
    .vl-js .vl-catnav-title, .vl-js .vl-catnav-list { display: none; }
    .vl-js .vl-catnav-pick { display: flex; align-items: center; gap: 12px; }
}
@media (max-width: 767px) {
    .vl-js .vl-catnav { top: 76px; }   /* under the compact header (64px on tablets, 76px on phones) */
}

/* Groups */
.vl-group { margin: 0 0 40px; scroll-margin-top: 96px; }
.vl-group[hidden] { display: none; }
/* The last group showing has no bottom margin (it would add to the band's padding under it) */
.vl-group:not(:has(~ .vl-group:not([hidden]))) { margin-bottom: 0; }
/* Colour of knobs, rockers and inserts (Primed pages; js 17b) */
.vl-colours { margin: 0 0 24px; }
.vl-colours-label { margin: 0 0 8px; color: var(--vl-slate); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.vl-colours-list { display: flex; flex-wrap: wrap; gap: 8px; }
.vl-colours-list button { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 6px 14px; border: 1px solid var(--vl-line); border-radius: 19px; background: var(--vl-card); color: var(--vl-ink); font-size: 14px; font-weight: 600; cursor: pointer; }
.vl-colours-list button:hover { border-color: var(--vl-indigo); }
.vl-colours-list button[aria-pressed="true"] { border-color: var(--vl-indigo); background: var(--vl-indigo); color: var(--vl-on-accent); }
.vl-colours-list button span { color: inherit; font-weight: 400; opacity: .75; }
.vl-swatch { display: inline-block; width: 16px; height: 16px; border: 1px solid rgba(0, 0, 0, .25); border-radius: 50%; }
.vl-swatch--chrome { background: linear-gradient(135deg, #f4f5f7, #9aa0aa 55%, #e3e6ea); }
.vl-swatch--brass { background: linear-gradient(135deg, #f3dc8c, #b38b2d 55%, #e6c76a); }
.vl-swatch--iridium { background: linear-gradient(135deg, #8b8e96, #3e4047 55%, #6f727a); }
.vl-swatch--black { background: #151515; }
.vl-swatch--white { background: #fff; }
.vl-swatch--red { background: #c62828; }
.vl-group-none { margin: 0; color: var(--vl-slate); }
.vl-group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin: 0 0 16px; }
.vl-group-head h2 { margin: 0; font-size: clamp(22px, 2vw, 28px); font-weight: var(--vl-display); letter-spacing: -0.015em; }
.vl-group-head > span { color: var(--vl-slate); font-size: 14px; }
.vl-group-head .vl-link { margin-left: auto; font-size: 14px; }
/* Most popular: whole rows only, one row on wide screens. The widths match the card grid below (cards at
   least 186px, 18px gaps): 2-3 across show 6, 4 across 8, 5 across 5, 6 across 6, 7 across 7, 8 across 8. */
.vl-group--popular .vl-plist > li:nth-child(n+7) { display: none; }
@container vl-cat (min-width: 798px)  { .vl-group--popular .vl-plist > li:nth-child(n+7) { display: flex; } }
@container vl-cat (min-width: 1002px) { .vl-group--popular .vl-plist > li:nth-child(n+6) { display: none; } }
@container vl-cat (min-width: 1206px) { .vl-group--popular .vl-plist > li:nth-child(6) { display: flex; } }
@container vl-cat (min-width: 1410px) { .vl-group--popular .vl-plist > li:nth-child(7) { display: flex; } }
@container vl-cat (min-width: 1614px) { .vl-group--popular .vl-plist > li:nth-child(8) { display: flex; } }

/* Product cards (vl_product_row): picture, description (up to 3 lines) and code, all one link to the data
   sheet; the buying links in one row at the foot, lined up across the row of cards */
.vl-plist { display: grid; grid-template-columns: repeat(auto-fill, minmax(186px, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.vl-pcard { display: flex; flex-direction: column; border: 1px solid var(--vl-line-soft); border-radius: var(--vl-radius-lg); background: var(--vl-card); box-shadow: var(--vl-shadow-sm); transition: box-shadow var(--vl-speed) var(--vl-ease), transform var(--vl-speed) var(--vl-ease); container: vl-pcard / inline-size; }
.vl-pcard[hidden] { display: none; }   /* the Primed colour buttons hide cards (js 17b); display: flex above would keep them showing */
.vl-pcard:hover { box-shadow: var(--vl-shadow-md); }
.vl-pcard-link { display: flex; flex: 1 1 auto; flex-direction: column; padding: 10px 10px 0; border-radius: var(--vl-radius-lg) var(--vl-radius-lg) 0 0; color: var(--vl-ink); }
.vl-pcard-link:hover, .vl-pcard-link:focus { color: var(--vl-ink); text-decoration: none; }
.vl-pcard-img { display: block; aspect-ratio: 1 / 1; padding: 12%; overflow: hidden; border-radius: 10px; background: var(--vl-surface); }
.vl-pcard-img img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .5s var(--vl-ease); }
.vl-pcard-img img.is-broken { visibility: hidden; }   /* picture missing: keep the grey box (js 17b) */
.vl-pcard-desc { display: -webkit-box; margin: 14px 4px 0; overflow: hidden; font-size: 15px; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; }
.vl-pcard-link:hover .vl-pcard-desc, .vl-pcard-link:focus .vl-pcard-desc { color: var(--vl-indigo); }
.vl-pcard-code { margin: auto 4px 0; padding-top: 8px; color: var(--vl-slate); font-size: 12px; font-weight: 600; letter-spacing: .05em; line-height: 1.4; }
.vl-pcard-code .vl-tag { margin-left: 4px; letter-spacing: .02em; }
.vl-pcard-actions { display: flex; align-items: center; justify-content: space-between; gap: 2px 8px; margin: 10px 12px 0; padding: 9px 0 11px; border-top: 1px solid var(--vl-line-soft); font-size: 12.5px; line-height: 1.3; }
.vl-pcard-buy { display: inline-flex; align-items: center; gap: 4px; padding: 3px 0; font-weight: 700; white-space: nowrap; }
.vl-pcard-buy .fa { font-size: 9px; }
/* Narrow cards (two across on phones): the two links one above the other, with room for both kept on
   every card, so "Where to buy" lines up across the row whether or not "Buy direct" is there */
@container vl-pcard (max-width: 177px) {
    .vl-pcard-actions { flex-direction: column; align-items: flex-start; justify-content: flex-start; min-height: 64px; margin: 8px 10px 0; padding: 6px 0 8px; }
}
.vl-plist-empty { margin: 0; color: var(--vl-slate); }
@media (max-width: 767px) {
    .vl-plist { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .vl-pcard-link { padding: 8px 8px 0; }
    .vl-pcard-desc { margin-top: 10px; font-size: 14px; }
}
.vl-acc-link { margin: 0 0 6px; font-size: 14px; }

.vl-tag { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 10px; background: var(--vl-notice-bg); color: var(--vl-notice-ink); font-size: 11px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; }


@media (max-width: 767px) {
    .vl-range-hero { flex-direction: column-reverse; align-items: flex-start; gap: 16px; }
    .vl-range-hero > img { width: 112px; height: 112px; }   /* the plain picture only: the room photos (.vl-range-pics) stay full width */
}

/* --------------------------------------------------------------------------
   The "+" on product cards (includes/my-list.php vl_list_add_button): a
   small round button on the corner of the picture that becomes a tick when
   the product is on the list (pressing the tick takes it off). Used on
   range and listing cards (.vl-pcard), search and best-seller results
   (.vl-results), Popular products (.vl-toplist) and Recently viewed.
   Hidden without JavaScript.
   -------------------------------------------------------------------------- */
.vl-pcard, .vl-results > li, .vl-toplist > li { position: relative; }
.vl-add { display: none; }
.vl-js .vl-add {
    position: absolute;
    z-index: 2;
    top: 18px;
    right: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--vl-line);
    border-radius: 50%;
    background: var(--vl-card);
    box-shadow: var(--vl-shadow-sm);
    color: var(--vl-indigo);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--vl-speed) var(--vl-ease), border-color var(--vl-speed) var(--vl-ease), color var(--vl-speed) var(--vl-ease), transform var(--vl-speed) var(--vl-ease);
}
.vl-js .vl-add:hover { border-color: var(--vl-indigo); transform: scale(1.08); }
.vl-add .fa-check, .vl-add.is-added .fa-plus { display: none; }
.vl-add.is-added .fa-check { display: inline-block; }
.vl-js .vl-add.is-added { border-color: var(--vl-indigo); background: var(--vl-indigo); color: var(--vl-on-accent); }

/* Search and best-seller results: on the picture's corner (the card has 14px padding, 10px on phones) */
.vl-js .vl-results .vl-add { top: 22px; right: 22px; }
/* Popular products: a list row, so the button sits at the row's right-hand end, with room kept for it */
.vl-js .vl-toplist .vl-add { top: 50%; right: 12px; margin-top: -16px; }
.vl-js .vl-toplist-item { padding-right: 52px; }
@media (max-width: 767px) {
    .vl-js .vl-add { top: 14px; right: 14px; width: 30px; height: 30px; }
    .vl-js .vl-results .vl-add { top: 16px; right: 16px; }
    .vl-js .vl-toplist .vl-add { right: 10px; margin-top: -15px; }
    .vl-js .vl-toplist-item { padding-right: 48px; }
}


/* ==========================================================================
   12. Technical pages: FAQs, leaflets, wiring diagrams,
       compliance documents (technical-section/)
   ========================================================================== */
/* --------------------------------------------------------------------------
   FAQ help centre
   Page: technical-section/faqs.php (js "FAQ help centre"). Topic sections (.vl-faq-sec) of .vl-acc
   questions, with a search box, "Most asked", product cards and a "Still stuck?" panel.
   -------------------------------------------------------------------------- */
.vl-faq-sec + .vl-faq-sec { margin-top: 56px; }
.vl-faq .vl-faq-intro { color: var(--vl-slate); }
.vl-faq h3 { margin: 32px 0 14px; }
.vl-faq .vl-acc-body > :last-child { margin-bottom: 0; }
.vl-faq-none { margin-top: 16px; font-weight: 600; }

/* Answers and headings reached by a link (#t11, #products...) clear the fixed compact header */
.vl-faq [id] { scroll-margin-top: 96px; }
.vl-acc:target { border-color: var(--vl-indigo); box-shadow: 0 0 0 1px var(--vl-indigo); }

/* ---- Search box in the title bar ---------------------------------------- */
/* <form class="vl-faq-search"><label class="sr-only"><i class="fa fa-search"><input type="search"><button class="vl-btn"></form> */
.vl-faq-search { position: relative; display: flex; gap: 10px; max-width: 760px; margin-top: 22px; }
.vl-faq-search > .fa { position: absolute; top: 50%; left: 20px; margin-top: -9px; color: var(--vl-slate); font-size: 18px; pointer-events: none; }
.vl-faq-search input { flex: 1 1 auto; min-width: 0; height: 56px; padding: 0 20px 0 50px; border: 1px solid var(--vl-line); border-radius: 28px; background: var(--vl-card); color: var(--vl-ink); font-size: 17px; }
.vl-faq-search input:focus { border-color: var(--vl-sky); outline: none; box-shadow: 0 0 0 2px var(--vl-sky); }
.vl-faq-search .vl-btn { flex: 0 0 auto; height: 56px; border-radius: 28px; }
.vl-faq-status { min-height: 24px; margin: 10px 0 0 !important; color: var(--vl-slate); font-size: 15px !important; }
.vl-faq-status:empty { min-height: 0; margin: 0 !important; }
#vl-faq-none .vl-note { max-width: 760px; margin: 12px 0 0; }
.vl-faq-quick { margin: 18px 0 0; padding: 0; list-style: none; }
.vl-faq-quick .fa { color: var(--vl-indigo); }

/* ---- Most asked: numbered list of links, two columns ------------------- */
.vl-faq-top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; margin: 0; padding: 0; list-style: none; counter-reset: vl-faq-top; }
.vl-faq-top a { display: flex; align-items: center; gap: 14px; height: 100%; padding: 12px 16px; border: 1px solid var(--vl-line); border-radius: var(--vl-radius); background: var(--vl-card); color: var(--vl-ink); font-weight: 600; line-height: 1.35; text-decoration: none; transition: border-color .15s ease; }
.vl-faq-top a::before { counter-increment: vl-faq-top; content: counter(vl-faq-top); display: flex; flex: 0 0 32px; align-items: center; justify-content: center; height: 32px; border-radius: 50%; background: var(--vl-mist); color: var(--vl-indigo); font-weight: 700; }
.vl-faq-top a:hover, .vl-faq-top a:focus { border-color: var(--vl-indigo); color: var(--vl-indigo); text-decoration: none; }

/* ---- Browse by product: cards that filter the questions ---------------- */
.vl-faq-prods { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.vl-faq-prod { display: flex; align-items: center; gap: 14px; height: 100%; padding: 12px 14px; border: 1px solid var(--vl-line); border-radius: var(--vl-radius); background: var(--vl-card); color: var(--vl-ink); text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease; }
.vl-faq-prod:hover, .vl-faq-prod:focus { border-color: var(--vl-indigo); color: var(--vl-ink); text-decoration: none; }
.vl-faq-prod.is-current { border-color: var(--vl-indigo); box-shadow: 0 0 0 1px var(--vl-indigo); }
.vl-faq-prod img { flex: 0 0 56px; width: 56px; height: 56px; object-fit: contain; }
.vl-faq-prod-text { flex: 1 1 auto; min-width: 0; }
.vl-faq-prod strong { display: block; font-size: 16px; line-height: 1.3; }
.vl-faq-prod small { display: block; margin-top: 2px; color: var(--vl-slate); font-size: 13px; line-height: 1.35; }
.vl-faq-n { flex: 0 0 auto; min-width: 28px; padding: 2px 8px; border-radius: 12px; background: var(--vl-mist); color: var(--vl-indigo); font-size: 13px; font-weight: 700; text-align: center; }
.vl-band--mist .vl-faq-n { background: var(--vl-chosen); }

/* ---- Topics column ------------------------------------------------------ */
.vl-faq-side { margin-bottom: 32px; }
.vl-faq-side h2 { margin: 0 0 10px; font-size: 18px; }
.vl-faq-side h2 + ul { margin-bottom: 28px; }
.vl-faq-topics, .vl-faq-links { margin: 0; padding: 0; list-style: none; }
.vl-faq-topics a { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; font-weight: 600; }
.vl-faq-topics span { color: var(--vl-slate); font-weight: 400; }
.vl-faq-links li + li { margin-top: 6px; }
.vl-faq-links a { font-size: 15px; }
@media (min-width: 992px) {
    .vl-faq-side { position: sticky; top: 96px; }
}
@media (max-width: 991px) {
    /* Phones and tablets: the topics become a row of chips that scrolls sideways; the useful links are in the answers */
    .vl-faq-side h2, .vl-faq-links { display: none; }
    .vl-faq-topics { display: flex; gap: 8px; margin: 0 !important; padding: 0 0 4px; overflow-x: auto; scrollbar-width: thin; }
    .vl-faq-topics li { flex: 0 0 auto; }
    .vl-faq-topics a { gap: 6px; padding: 7px 14px; border: 1px solid var(--vl-line); border-radius: 18px; background: var(--vl-card); font-size: 14px; white-space: nowrap; }
    .vl-faq-side { margin-bottom: 24px; }
}

/* ---- Filter bar ("Showing 9 questions about V-Pro Smart  Show all") ----- */
.vl-faq-filterbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 0 24px; padding: 12px 16px; border-radius: 12px; background: var(--vl-chosen); font-size: 15px; }
.vl-faq-filterbar[hidden] { display: none; }
.vl-faq-clear { font-weight: 600; }

/* ---- Questions ---------------------------------------------------------- */
.vl-faq-q[hidden], .vl-faq-group[hidden], .vl-faq-sec[hidden], .vl-faq-browse[hidden], .vl-faq-topics li[hidden] { display: none; }
.vl-faq-sec > h2 { margin-top: 0; }
.vl-faq-qt { flex: 1 1 auto; }   /* question text inside the summary (holds the empty anchors for old addresses) */
.vl-faq .vl-acc-body .vl-table-wrap { margin-bottom: 16px; }
.vl-faq .vl-acc-body .vl-table { font-size: 14px; }
.vl-faq-cols { columns: 2 180px; column-gap: 24px; }   /* the knob list */
.vl-faq-cols li { break-inside: avoid; }
.vl-faq .vl-acc-body > p.vl-faq-foot { margin: 16px 0 0; padding-top: 10px; border-top: 1px solid var(--vl-line); font-size: 14px; }
.vl-faq-copy { color: var(--vl-slate); }
.vl-faq-copy::before { content: "\f0c1"; margin-right: 6px; font-family: FontAwesome; }
.vl-faq-copy.is-copied { color: #2e7d32; }

/* ---- Still stuck? (a navy panel at the end, on white so it stands apart from the footer) ---- */
.vl-band.vl-faq-stuck { padding-top: 0; }   /* follows the white questions band */
.vl-faq-stuck-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; padding: clamp(24px, 4vw, 48px); border-radius: var(--vl-radius-lg); background: var(--vl-navy); color: rgba(255, 255, 255, 0.86); }
.vl-faq-stuck-box > div:first-child { flex: 1 1 420px; max-width: 760px; }
.vl-faq-stuck h2 { margin: 0 0 10px; color: #fff; font-size: 28px; }
.vl-faq-stuck p { margin: 0; font-size: 17px; }
.vl-faq-stuck-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.vl-faq-stuck-actions .vl-btn .fa { margin-right: 8px; }
.vl-faq-stuck .vl-faq-hours { flex: 0 0 100%; color: rgba(255, 255, 255, 0.7); font-size: 14px; }

/* ---- Phones ------------------------------------------------------------- */
@media (max-width: 767px) {
    .vl-faq-search input { height: 50px; padding-left: 44px; font-size: 16px; }
    .vl-faq-search > .fa { left: 17px; }
    .vl-faq-search .vl-btn { height: 50px; padding: 0 18px; }
    .vl-faq-top { grid-template-columns: minmax(0, 1fr); }
    .vl-faq-top a { padding: 10px 12px; font-size: 15px; }
    .vl-faq-prods { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .vl-faq-prod { padding: 10px 12px; }
    .vl-faq-prod img { flex-basis: 44px; width: 44px; height: 44px; }
    .vl-faq-stuck h2 { font-size: 24px; }
    .vl-faq-stuck-actions .vl-btn { width: 100%; }
}


/* --------------------------------------------------------------------------
   Instruction leaflets
   Page: technical-section/leaflets.php
   Sections are cards (.vl-card inside .vl-leaf-sec) flowing in up to three
   columns, so one long section doesn't leave gaps beside it. The filter
   (here and in technical.js) hides leaflets and sections with [hidden].
   -------------------------------------------------------------------------- */
.vl-leaf-search { width: 420px; }
.vl-leaf-search input { text-transform: none; }   /* the lookup box upper-cases product codes; the filter takes words */

.vl-cards.vl-leaf-grid { display: block; columns: 3 320px; column-gap: 20px; }
.vl-leaf-sec { break-inside: avoid; margin-bottom: 20px; }
.vl-leaf-sec[hidden], .vl-leaf[hidden] { display: none; }
.vl-leaf-sec .vl-card { height: auto; }

.vl-leaf-head { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; padding-bottom: 12px; border-bottom: 1px solid var(--vl-line); font-size: 18px; line-height: 1.3; }
.vl-leaf-logo { flex: 0 0 auto; width: auto; max-width: 110px; max-height: 30px; }
.vl-leaf-list { margin: 0; padding: 0; list-style: none; }
.vl-leaf + .vl-leaf { margin-top: 2px; }
.vl-leaf-pdf { display: flex; align-items: flex-start; gap: 12px; margin: 0 -10px; padding: 8px 10px; border-radius: 10px; color: var(--vl-ink); text-decoration: none; transition: background-color .15s ease; }
.vl-leaf-pdf:hover, .vl-leaf-pdf:focus { background: var(--vl-mist); color: var(--vl-indigo); text-decoration: none; }
.vl-leaf-pdf .fa { flex: 0 0 auto; margin-top: 3px; color: var(--vl-indigo); font-size: 18px; }
.vl-leaf-title { font-weight: 600; }
.vl-leaf-code { color: var(--vl-slate); font-size: 13px; white-space: nowrap; }
.vl-leaf-note { display: block; color: var(--vl-slate); font-size: 14px; line-height: 1.45; }
.vl-leaf-video { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 6px 30px; font-size: 14px; font-weight: 600; }

.vl-leaf-product { margin-bottom: 20px; }
.vl-leaf-product > span small { display: block; color: var(--vl-slate); font-size: 13px; font-weight: 400; }
.vl-leaf-all { margin: 0 0 20px; }
.vl-leaf-more { max-width: 760px; margin-top: 12px; }
.vl-leaf-more h2 { margin-top: 0; }

@media (max-width: 767px) {
    .vl-leaf-search { width: 100%; }
}


/* --------------------------------------------------------------------------
   Wiring diagrams and VARILIGHT TV
   Pages: technical-section/wiring-diagrams.php, technical-section/tv.php
   -------------------------------------------------------------------------- */
.vl-wiring-title { margin: 40px 0 16px; font-size: 22px; }
.vl-wiring { margin-bottom: 8px; }
.vl-wiring .vl-card-img { height: 200px; }
/* Wiring by range folds: how each circuit is wired as a small card (its name above, the steps below), two or more
   across on wide screens; then warnings ("Important", the amber notice) and tips ("Check", the blue note) under the
   cards, so they don't read like one more wiring step; then the leaflet pages with the drawings as buttons */
.vl-wire { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin: 4px 0 16px; }
.vl-wire > div { margin: 0; padding: 14px 16px 15px; border-radius: var(--vl-radius); background: var(--vl-mist); }
.vl-wire dt { margin: 0 0 6px; color: var(--vl-indigo); font-size: 15px; font-weight: 700; line-height: 1.35; }
.vl-wire dd { margin: 0; color: var(--vl-ink); font-size: 15px; line-height: 1.6; }
.vl-wire-note { margin: 0 0 10px; }
.vl-wire-note strong { margin-right: 2px; }
.vl-wire-pdfs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0 2px; }
.vl-wire-pdfs-label { margin-right: 4px; color: var(--vl-slate); font-size: 13px; font-weight: 700; }
.vl-wire-pdf {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 6px 13px;
    border: 1px solid var(--vl-line);
    border-radius: 999px;
    background: var(--vl-card);
    color: var(--vl-ink);
    font-size: 13px;
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease;
}
.vl-wire-pdf .fa { color: var(--vl-indigo); }
.vl-wire-pdf small { color: var(--vl-slate); font-size: 12px; }
.vl-wire-pdf:hover { border-color: var(--vl-indigo); color: var(--vl-indigo); }
@media (max-width: 575px) {
    .vl-wiring-acc > summary { flex-wrap: wrap; gap: 2px 12px; position: relative; padding-right: 48px; }
    .vl-wiring-acc > summary::after { position: absolute; right: 20px; top: 16px; } /* chevron stays top right instead of wrapping under a long title */
    .vl-wiring-acc > summary small { order: 3; flex-basis: 100%; margin-left: 0; font-size: 13px; }
    .vl-wire { grid-template-columns: 1fr; }
}


/* --------------------------------------------------------------------------
   Compliance documents
   Pages: technical-section/doc.php (Declaration of Conformity),
          technical-section/ptsi-doc.php (PSTI statement). Body class: vl-page-doc.
   On screen the document sits on a white "sheet"; in print only the sheet
   prints (header, title bar, help strip and footer are .no-print).
   Scoped to .vl-page-doc: the content layout kit (section 8) also has a .vl-doc.
   -------------------------------------------------------------------------- */
.vl-page-doc .vl-doc { display: block; max-width: 820px; margin: 0 auto; padding: clamp(24px, 4vw, 56px); border: 1px solid var(--vl-line); border-radius: var(--vl-radius-lg); background: var(--vl-card); color: var(--vl-ink); font-size: 15px; line-height: 1.6; }
.vl-page-doc .vl-doc p { margin: 0 0 14px; }
.vl-doc-head { margin-bottom: 24px; text-align: center; }
.vl-doc-logo { width: 260px; max-width: 60%; }
.vl-doc-title { margin: 0 0 24px; font-size: 24px; line-height: 1.3; text-align: center; }
.vl-doc-code { font-size: 17px; text-align: center; }
.vl-doc-product { margin: 18px 0; padding-left: 16px; border-left: 3px solid var(--vl-indigo); }
.vl-doc-marks { display: block; width: 120px; margin: 4px 0 20px; }
.vl-doc-sign { margin-top: 28px; }
.vl-doc-sign p { margin: 0 0 6px; }
.vl-doc-signature { display: block; width: 200px; margin: 4px 0 6px; }
.vl-doc-foot { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--vl-line); }
.vl-doc-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.vl-doc-cert { justify-self: end; max-width: 220px; }
.vl-page-doc .vl-doc .vl-doc-small { color: var(--vl-slate); font-size: 12.5px; line-height: 1.5; }
/* The declaration in the EU model's numbered order (technical-section/doc.php): logo and marks, reference line,
   items 1 to 8 with small headings, tables of label and value, the signature block */
.vl-page-doc .vl-doc-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; text-align: left; }
.vl-page-doc .vl-doc-head .vl-doc-marks { margin: 0; }
.vl-page-doc .vl-doc .vl-doc-ref { margin: -14px 0 22px; color: var(--vl-slate); font-size: 13px; text-align: center; }
.vl-doc-items { margin: 0; padding-left: 1.6em; }
.vl-doc-items > li { margin: 0 0 14px; padding-left: 4px; }
.vl-doc-items > li::marker { font-weight: 700; }
.vl-doc-items h3 { margin: 0 0 6px; font-size: 15px; font-weight: 700; line-height: 1.4; }
.vl-doc-items p { margin: 0 0 6px; }
.vl-doc-id { display: flex; align-items: flex-start; gap: 18px; }
.vl-doc-id .vl-doc-table { flex: 1 1 auto; }
.vl-doc-photo { flex: 0 0 auto; width: 110px; height: 110px; object-fit: contain; border: 1px solid var(--vl-line); border-radius: 8px; background: #fff; }
.vl-doc-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.vl-doc-table th, .vl-doc-table td { padding: 5px 10px 5px 0; border-bottom: 1px solid var(--vl-line); text-align: left; vertical-align: top; }
.vl-doc-table th[scope="row"] { width: 34%; color: var(--vl-slate); font-weight: 600; }
.vl-doc-table thead th { color: var(--vl-slate); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.vl-doc-acts td { width: 50%; }
.vl-doc-standards { margin: 0 0 6px; padding-left: 1.2em; }
.vl-doc-standards li { font-weight: 700; }
.vl-doc-sign .vl-doc-table th[scope="row"] { width: 26%; }
@media (max-width: 600px) {
    .vl-doc-id { flex-direction: column-reverse; }
    .vl-doc-acts thead { display: none; }
    .vl-doc-acts tr, .vl-doc-acts td { display: block; width: auto; }
}
.vl-page-doc .vl-doc .vl-doc-legal { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--vl-line); }

@media screen and (max-width: 767px) {
    .vl-doc-cols { grid-template-columns: minmax(0, 1fr); }
    .vl-doc-cert { justify-self: start; }
}

@media print {
    .vl-page-doc .vl-band { padding: 0; }
    .vl-page-doc .vl-wrap { max-width: none; padding: 0; }
    .vl-page-doc .vl-doc { max-width: none; padding: 0; border: 0; border-radius: 0; color: #000; font-size: 10.5pt; line-height: 1.45; }
    .vl-page-doc .vl-doc p { margin-bottom: 8pt; }
    .vl-page-doc .vl-doc a { color: #000; text-decoration: none; }
    .vl-doc-head { margin-bottom: 12pt; }
    .vl-doc-logo { width: 190px; }
    .vl-doc-title { margin-bottom: 14pt; font-size: 15pt; }
    .vl-doc-product { border-left-color: #000; }
    .vl-doc-marks { width: 90px; }
    .vl-doc-signature { width: 160px; }
    .vl-doc-foot { margin-top: 18pt; padding-top: 10pt; border-top-color: #999; }
    .vl-page-doc .vl-doc .vl-doc-small { color: #333; font-size: 8.5pt; }
    .vl-page-doc .vl-doc .vl-doc-legal { border-top-color: #999; }
    .vl-doc-sign, .vl-doc-foot { break-inside: avoid; }
    .vl-page-doc .vl-doc .vl-doc-ref { margin: -8pt 0 10pt; color: #333; font-size: 9pt; }
    .vl-doc-items > li { margin-bottom: 7pt; }
    .vl-doc-items h3 { margin-bottom: 2pt; font-size: 10.5pt; }
    .vl-doc-items p { margin-bottom: 3pt; }
    .vl-doc-table { font-size: 9.5pt; }
    .vl-doc-table th, .vl-doc-table td { padding: 2.5pt 8pt 2.5pt 0; border-bottom-color: #bbb; }
    .vl-doc-table th[scope="row"], .vl-doc-table thead th { color: #333; }
    .vl-doc-photo { width: 80px; height: 80px; border-color: #bbb; }
    .vl-doc-items > li:nth-child(5), .vl-doc-items > li:nth-child(6) { break-inside: avoid; }
    /* One A4 page: smaller logo, marks, signature and type than the screen version */
    .vl-page-doc .vl-doc { font-size: 9pt; line-height: 1.35; }
    .vl-page-doc .vl-doc-head { margin-bottom: 6pt; }
    .vl-page-doc .vl-doc-logo { width: 100px; }
    .vl-page-doc .vl-doc-marks { width: 52px; }
    .vl-page-doc .vl-doc-title { margin: 0 0 6pt; font-size: 13pt; }
    .vl-doc-items > li { margin-bottom: 3.5pt; }
    .vl-doc-items h3 { font-size: 9.5pt; }
    .vl-doc-table { font-size: 8.5pt; }
    .vl-doc-table th, .vl-doc-table td { padding: 1pt 8pt 1pt 0; }
    .vl-doc-photo { width: 64px; height: 64px; }
    .vl-doc-sign { margin-top: 8pt; }
    .vl-page-doc .vl-doc-signature { width: 90px; margin: 0; }
    .vl-doc-foot { margin-top: 8pt; padding-top: 6pt; }
    .vl-doc-cert { width: 130px; height: auto; }   /* a width: Bootstrap's print styles force max-width: 100% on images */
    .vl-doc-foot { break-inside: auto; }
    .vl-doc-cols { gap: 12pt; }
    .vl-page-doc .vl-doc .vl-doc-small { margin-bottom: 4pt; font-size: 7.5pt; line-height: 1.25; }
    .vl-page-doc .vl-doc .vl-doc-legal { margin-top: 4pt; padding-top: 4pt; }
}


/* --------------------------------------------------------------------------
   Set up your dimmer: range buttons, task buttons, one procedure at a time
   (JavaScript on). Without JavaScript every range is a heading and every
   procedure a fold, styled by the normal .vl-acc rules.
   -------------------------------------------------------------------------- */
.vl-setup.vl-prose { max-width: 960px; }
/* Set up your dimmer: on wide screens steps on the left, notes and leaflet links on the right */
@media (min-width: 1400px) {
    .vl-setup.vl-prose { max-width: 1440px; }
    .vl-setup .vl-setup-task .vl-acc-body { columns: 2; column-gap: 64px; }
    .vl-setup .vl-setup-task .vl-acc-body > * { break-inside: avoid; }
    .vl-setup .vl-setup-task .vl-acc-body > .vl-steps + .vl-note,
    .vl-setup .vl-setup-task .vl-acc-body > .vl-steps + .vl-setup-source { break-before: column; }
}
.vl-setup .vl-setup-ranges { margin-bottom: 20px; }
.vl-setup .vl-setup-tasks { margin: 0 0 24px; }
.vl-setup-note { margin: 0 0 14px; color: var(--vl-slate); font-size: 15px; line-height: 1.5; }
.vl-setup-source { margin: 8px 0 0; color: var(--vl-slate); font-size: 14px; }
.vl-setup-source a { font-weight: 600; }
.vl-setup-source small { font-weight: 400; }
.vl-setup-more { margin: 32px 0 0; padding-top: 16px; border-top: 1px solid var(--vl-line-soft); color: var(--vl-slate); font-size: 14px; }
.vl-setup .vl-note { margin: 0 0 10px; }
.vl-setup .vl-acc-body > .vl-steps { margin-top: 8px; }
.vl-setup .vl-acc-body h3 { margin: 8px 0 12px; font-size: 17px; }

/* JavaScript on: the chosen range and task are already shown by the buttons, so hide the
   range heading (kept for screen readers) and show the procedure without its fold frame */
.vl-js .vl-setup-range > h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vl-js .vl-setup-task > .vl-acc { margin: 0; border: 0; box-shadow: none; background: none; }
.vl-js .vl-setup-task > .vl-acc > summary { display: none; }
.vl-js .vl-setup-task > .vl-acc > .vl-acc-body { padding: 0; }

@media (max-width: 767px) {
    .vl-setup .vl-setup-ranges { margin-bottom: 14px; }
    .vl-setup .vl-setup-tasks { margin-bottom: 18px; }
}


/* Wall box depths: the range tables two across, each heading beside a small example plate */
/* Wall box depths, compact (George, 19 Oct 2026): notes in one strip, one table for three ranges, two small tables */
.vl-depth-notes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 40px; align-items: start; margin-bottom: clamp(24px, 3vw, 40px); }
.vl-depth-matrix th[scope="col"] { vertical-align: bottom; }
.vl-depth-matrix thead th:not(:first-child) { text-align: center; }
.vl-depth-matrix tbody td { text-align: center; font-weight: 700; }
.vl-depth-matrix tbody th { font-weight: 600; }
.vl-depth-h { margin: 0 0 12px; font-size: clamp(20px, 1.8vw, 26px); }   /* text only (George, 19 Oct 2026) */
.vl-depth-more { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); margin-top: clamp(32px, 3.5vw, 56px); }
@media (max-width: 767px) { .vl-depth-notes, .vl-depth-more { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   13. About, buying, stockist finder, glossary and news pages
   ========================================================================== */
/* ---- Shared ------------------------------------------------------------- */

/* Logo or badge at the right of a page title bar (about-us/lifetime-guarantee.php) */
/* Section 13 "Shared". A logo or emblem at the right of the title bar (about-us/company-background.php,
   quality.php, queens-award-2015.php), on a white tile like the lifetime badge on lifetime-guarantee.php
   (which keeps its own size from section 14), so the About us title bars match. 108px plus the tile is
   128px; every file is taller than 108px, so nothing is upscaled. In the dark theme the logo-frame rule
   in section 17 already gives it a white frame. */
.vl-pagehead-logo { flex: 0 0 auto; box-sizing: content-box; width: auto; height: clamp(64px, 6vw, 108px); max-width: 100%; padding: 10px; object-fit: contain; border-radius: var(--vl-radius); background: #fff; box-shadow: var(--vl-shadow-sm); }


/* Row of small buttons under the page title (buy-online.php, glossary-product-terms.php) */
.vl-pagehead-actions { margin-top: 18px; }

/* Panel boxes used inside running text (about-us/lifetime-guarantee.php) */
.vl-prose .vl-panel-box { margin: 0 0 24px; }
.vl-prose .vl-panel-box h3 { margin-top: 0; }

/* Definition list: bold term, text under it (about-us/lifetime-guarantee.php) */
.vl-terms { margin: 0 0 20px; }
.vl-terms dt { margin-top: 14px; font-weight: 700; }
.vl-terms dt:first-child { margin-top: 0; }
.vl-terms dd { margin: 2px 0 0; }

/* Small flag before a heading (how-to-buy.php, buy-online.php) */
.vl-flag { display: inline-block; width: 44px; height: auto; margin-right: 12px; vertical-align: 0; border-radius: 3px; box-shadow: 0 0 0 1px var(--vl-line); }


/* ---- About us ------------------------------------------------------------ */

/* Company logo at the top of the side panel (about-us/company-background.php) */
.vl-panel-logo { display: block; max-width: 200px; height: auto; margin: 0 0 20px; }

/* ISO and Queen's Award logos beside the text (about-us/quality.php, about-us/queens-award-2015.php) */
.vl-quality-logo { display: block; max-width: 220px; margin: 0 auto 24px; }
.vl-quality-next { margin-top: 32px; }
.vl-award-logo { display: block; max-width: 200px; margin: 0 auto 24px; }

/* Editors' notes box under the press release (about-us/queens-award-2015.php) */
/* Section 13 "About us". The editors' notes now sit in the side column beside the release
   (about-us/queens-award-2015.php), so they take that column's width. */
.vl-press-notes { margin-top: 32px; }

.vl-press-notes > h2 { margin-bottom: 12px; font-size: 22px; }
.vl-press-notes .vl-prose h3 { margin-top: 20px; font-size: 17px; }

/* Meet the team: photo cards, with "More about ..." opening the person's own words (about-us/meet-the-team.php) */
.vl-team { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.vl-team-card { padding: 0 0 18px; overflow: hidden; }
.vl-team-photo { display: block; width: 100%; aspect-ratio: 3 / 2; margin-bottom: 16px; object-fit: cover; background: var(--vl-mist); }
.vl-team-photo--none { display: flex; align-items: center; justify-content: center; color: var(--vl-line); font-size: 64px; }
.vl-team-card > h3, .vl-team-card > p, .vl-team-more { margin-left: 20px; margin-right: 20px; }
.vl-team-card p.vl-team-role { margin-top: 4px; color: var(--vl-ink); font-weight: 600; }
.vl-team-card p.vl-team-start { margin-top: 2px; font-size: 14px; }
.vl-team-more { margin-top: auto; padding-top: 12px; }
.vl-team-more > summary { color: var(--vl-indigo); font-size: 15px; font-weight: 600; cursor: pointer; }
.vl-team-more > summary:hover { color: var(--vl-indigo-hover); }
.vl-team-card .vl-team-more p { margin: 10px 0 0; color: var(--vl-ink); font-size: 14px; line-height: 1.55; }


/* ---- Where to buy ------------------------------------------------------- */

/* ---- Shared: postcode / country boxes ------------------------------------ */
/* <form class="vl-near"><div class="vl-near-row"><input class="vl-near-input"><button class="vl-btn"></div></form>
   Used by: how-to-buy.php, buy-online.php, find-stockists.php, contact/international-distributors.php,
   the data sheet panel (includes/buy-links.php vl_buy_near_form) */
.vl-near-row { display: flex; gap: 8px; }
.vl-near-input { flex: 1 1 auto; min-width: 0; height: 46px; padding: 0 16px; border: 1px solid var(--vl-line); border-radius: 23px; background: var(--vl-card); color: var(--vl-ink); font-size: 16px; }
.vl-near-input:focus { border-color: var(--vl-indigo); outline: none; box-shadow: 0 0 0 2px var(--vl-sky); }
select.vl-near-input { padding-right: 12px; cursor: pointer; }
.vl-near-row .vl-btn { flex: 0 0 auto; height: 46px; min-height: 0; border-radius: 23px; }
.vl-near-locate { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 4px 0; border: 0; background: none; color: var(--vl-indigo); font-size: 14px; font-weight: 600; cursor: pointer; }
.vl-near-locate:hover, .vl-near-locate:focus { color: var(--vl-indigo-hover); text-decoration: underline; }
.vl-near-locate[hidden] { display: none; }
.vl-near-locate[disabled] { color: var(--vl-slate); cursor: progress; text-decoration: none; }

/* Nearest stockists shown under a postcode box (data sheet panel; js "Near you") */
.vl-near-results { margin-top: 12px; }
.vl-near-results:empty { display: none; }
.vl-near-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 6px; color: var(--vl-slate); font-size: 13px; }
.vl-near-head button { padding: 0; border: 0; background: none; color: var(--vl-indigo); font-size: 13px; font-weight: 600; cursor: pointer; }
.vl-near-head button:hover, .vl-near-head button:focus { text-decoration: underline; }
.vl-near-list { margin: 0; padding: 0; list-style: none; }
.vl-near-list li { padding: 8px 0; border-top: 1px solid var(--vl-line); font-size: 14px; line-height: 1.45; }
.vl-near-list strong { display: block; font-size: 15px; }
.vl-near-list .vl-near-dist { color: var(--vl-slate); }
.vl-near-list .fa-star { color: var(--vl-notice-mark); }
.vl-near-list .vl-near-links { display: flex; flex-wrap: wrap; gap: 2px 16px; margin-top: 2px; }
.vl-near-list .vl-near-links a { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.vl-near-all { display: inline-block; margin-top: 8px; font-size: 14px; font-weight: 600; }
.vl-near-msg { margin: 0; color: var(--vl-slate); font-size: 14px; }


/* ---- Where to buy hub (how-to-buy.php) ----------------------------------- */
/* Four cards: Buy online, Visit a stockist, Trade customers, International distributors */
.vl-paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
@media (min-width: 1400px) {
    .vl-paths { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .vl-paths { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
.vl-path { display: flex; flex-direction: column; padding: 28px; border: 1px solid var(--vl-line); border-radius: var(--vl-radius-lg); background: var(--vl-card); scroll-margin-top: 90px; }
.vl-path:target { border-color: var(--vl-indigo); box-shadow: 0 0 0 1px var(--vl-indigo); }
.vl-path-icon { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 16px; border-radius: 50%; background: var(--vl-mist); color: var(--vl-indigo); font-size: 24px; }
.vl-path h2 { margin: 0; font-size: 24px; line-height: 1.2; }
.vl-path > p { margin: 8px 0 0; color: var(--vl-slate); font-size: 16px; }
.vl-path-foot { margin-top: auto; padding-top: 22px; }
.vl-path-shops { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.vl-path-shops a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px solid var(--vl-line); border-radius: 16px; background: var(--vl-mist); color: var(--vl-ink); font-size: 14px; font-weight: 600; text-decoration: none; }
.vl-path-shops a:hover, .vl-path-shops a:focus { border-color: var(--vl-indigo); color: var(--vl-indigo); text-decoration: none; }
.vl-path-shops .fa-star { color: var(--vl-notice-mark); }
.vl-path-form { margin-top: 18px; }
.vl-path-label { display: block; margin: 0 0 6px; font-size: 14px; font-weight: 600; }
.vl-check { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 15px; font-weight: 400; cursor: pointer; }
.vl-check input { margin: 0; }
.vl-path-contact { margin: 18px 0 0; padding: 0; list-style: none; font-size: 16px; }
.vl-path-contact li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; overflow-wrap: anywhere; }
.vl-path-contact li + li { margin-top: 8px; }
.vl-path-contact .fa { width: 18px; color: var(--vl-indigo); text-align: center; }
.vl-path-contact a { font-weight: 700; }
.vl-path-contact span { color: var(--vl-slate); font-size: 14px; }
.vl-path-links { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: auto 0 0; padding-top: 16px; font-size: 15px; }
.vl-path-links a { font-weight: 600; }
/* Phones: smaller cards with the icon beside the heading, and jump buttons under the page title */
.vl-path-jump { display: none; }
@media (max-width: 767px) {
    .vl-path-jump { display: flex; gap: 8px; }
    .vl-path { display: block; padding: 20px; }
    .vl-path-icon { float: left; width: 40px; height: 40px; margin: -4px 12px 0 0; font-size: 18px; }
    .vl-path h2 { font-size: 21px; line-height: 32px; }
    .vl-path > p { clear: both; padding-top: 8px; }
    .vl-path-foot, .vl-path-links { padding-top: 18px; }
}

/* ---- Get in touch page (/help/, includes/get-in-touch.php) ----------------- */
/* Three of the Where to buy hub's cards: message, phone, email */
@media (min-width: 768px) {
    .vl-paths--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.vl-paths--3 .vl-btn { max-width: 100%; }
.vl-touch-notice { margin: 0 0 24px; padding: 14px 18px; border-radius: var(--vl-radius); background: var(--vl-mist); }
.vl-touch-more { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 32px; }
.vl-touch-more h2 { margin: 0 0 10px; font-size: 18px; font-weight: 700; letter-spacing: 0; line-height: 1.3; }
.vl-touch-more p { margin: 0 0 6px; color: var(--vl-slate); font-size: 15px; line-height: 1.5; }
.vl-touch-more a { font-weight: 600; }
.vl-touch-social { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 10px; }
.vl-touch-credit { padding: 0 16px 16px; color: var(--vl-slate); font-size: 12px; text-align: center; }
.vl-touch-credit p { margin: 0; }
.vl-touch-credit a { color: inherit; }
@media (max-width: 991px) {
    .vl-touch-more { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 479px) {
    .vl-touch-more { grid-template-columns: minmax(0, 1fr); }
}
/* Product search beside a heading (how-to-buy.php, buy-online.php) */
.vl-path-search { flex: 0 1 460px; width: 100%; }


/* ---- Where to buy strip (includes/buy-strip.php: range, finish and product pages, find-stockists.php) ---- */
.vl-pathtiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.vl-pathtiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vl-pathtile { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 2px; padding: 18px 20px; border: 1px solid var(--vl-line); border-radius: var(--vl-radius); background: var(--vl-card); color: var(--vl-ink); text-decoration: none; transition: border-color .15s ease; }
.vl-pathtile:hover, .vl-pathtile:focus { border-color: var(--vl-indigo); color: var(--vl-ink); text-decoration: none; }
.vl-pathtile .fa { grid-row: span 2; width: 22px; margin-top: 3px; color: var(--vl-indigo); font-size: 19px; text-align: center; }
.vl-pathtile-title { font-size: 16px; font-weight: 700; line-height: 1.3; }
.vl-pathtile:hover .vl-pathtile-title, .vl-pathtile:focus .vl-pathtile-title { color: var(--vl-indigo); }
.vl-pathtile-text { color: var(--vl-slate); font-size: 14px; line-height: 1.4; }
@media (max-width: 991px) {
    .vl-pathtiles, .vl-pathtiles--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .vl-pathtiles, .vl-pathtiles--3 { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .vl-pathtile { padding: 14px 16px; }
}


/* ---- Online retailers (buy-online.php) ----------------------------------- */
.vl-shops { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.vl-shop { display: flex; flex-direction: column; padding: 22px; border: 1px solid var(--vl-line); border-radius: var(--vl-radius-lg); background: var(--vl-card); }
.vl-shop--gold { border-color: #e2c27a; box-shadow: inset 0 4px 0 #d9a521; }
.vl-shop-top { display: flex; align-items: center; gap: 16px; }
.vl-shop-mark { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 14px; background: var(--vl-mist); color: var(--vl-indigo); font-family: var(--vl-font); font-size: 20px; font-weight: 700; letter-spacing: .02em; }
.vl-shop-mark--logo { padding: 6px; border: 1px solid var(--vl-line); background: #fff; }
.vl-shop-mark--logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.vl-shop h3 { margin: 0; font-size: 19px; line-height: 1.25; }
.vl-shop-stock { margin: 2px 0 0; color: var(--vl-slate); font-size: 15px; }
.vl-shop-badge { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; margin: 14px 0 0; padding: 4px 12px; border-radius: 14px; background: var(--vl-notice-bg); color: var(--vl-notice-ink); font-size: 13px; font-weight: 700; }
.vl-shop-badge .fa { color: var(--vl-notice-mark); }
.vl-shop-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: auto; padding-top: 18px; }
.vl-shop-link { font-size: 14px; font-weight: 600; }
.vl-gold-note { display: flex; align-items: center; gap: 24px; max-width: 860px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--vl-line); color: var(--vl-slate); font-size: 15px; }
.vl-gold-note .vl-gold-award { flex: 0 0 auto; width: 110px; }
.vl-gold-note p { margin: 0; }
@media (max-width: 767px) {
    .vl-gold-note { flex-direction: column; align-items: flex-start; gap: 14px; }
}
/* Online shops abroad and distributor cards */
.vl-dist-more { display: inline-block; margin-top: auto; padding-top: 12px; font-size: 14px; font-weight: 600; }
.vl-dist-other { margin: 24px 0 0; color: var(--vl-slate); }
.vl-disclaimer { margin: 0; color: var(--vl-slate); font-size: 14px; }


/* ---- International distributors (contact/international-distributors.php; js "Country finder") ---- */
.vl-country-form { max-width: 460px; }
.vl-pagehead .vl-country-form { margin-top: 20px; }
.vl-dist .vl-card { scroll-margin-top: 90px; }
.vl-dist .vl-card[hidden] { display: none; }
.vl-dist .vl-card.is-chosen { border-color: var(--vl-indigo); box-shadow: 0 0 0 1px var(--vl-indigo); }
.vl-card .vl-dist-item p.vl-dist-shop { color: var(--vl-slate); font-size: 14px; }
.vl-card .vl-dist-item h3.vl-dist-sub { margin-bottom: 6px; color: var(--vl-slate); font-size: 14px; }
.vl-dist-all { margin: 24px 0 0; }
.vl-dist-all[hidden] { display: none; }
.vl-note[hidden] { display: none; }   /* "Another country" note, shown by the country finder */


/* ---- Stockist finder additions (find-stockists.php; js "Stockist finder") ---- */
.vl-band--finder { padding-top: 40px; }
.vl-stockist-form > label { display: block; margin: 0 0 6px; }
/* Kind of stockist: radio buttons shown as chips */
/* stockist finder. BUG FIX: this rule is for the "Kind of stockist" fieldset on
   find-stockists.php, but the product types band (includes/product-types.php, <section class="vl-band
   vl-band--mist vl-types">, on 20 dimmer, range, smart and switch pages) has the same class, so the band
   lost all its padding (its heading sat on the band's top edge) and gained an 18px white strip above it.
   Scoped to the fieldset; the band gets the normal band spacing back. */
fieldset.vl-types { min-width: 0; margin: 18px 0 0; padding: 0; border: 0; }

.vl-types legend { width: auto; margin: 0 0 8px; padding: 0; border: 0; color: var(--vl-ink); font-size: 15px; font-weight: 600; }
.vl-type { position: relative; display: inline-block; margin: 0 4px 8px 0; font-weight: 400; }
.vl-type input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; }
.vl-type span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid var(--vl-line); border-radius: 18px; background: var(--vl-card); color: var(--vl-ink); font-size: 14px; font-weight: 600; line-height: 1.3; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.vl-type span:hover { border-color: var(--vl-indigo); }
.vl-type input:checked + span { border-color: var(--vl-indigo); background: var(--vl-indigo); color: var(--vl-on-accent); }
.vl-type input:focus-visible + span { outline: 2px solid var(--vl-sky); outline-offset: 2px; }
.vl-type .fa-star { color: var(--vl-notice-mark); }
.vl-type input:checked + span .fa-star { color: #ffd76a; }
.vl-radius { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.vl-radius label { margin: 0; font-weight: 600; }
.vl-radius .vl-near-input { flex: 0 0 auto; width: auto; height: 40px; }
/* Result lines */
.vl-stockist p.vl-stockist-display .fa { color: var(--vl-notice-mark); }
.vl-stockist p.vl-stockist-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin-top: 6px; }
.vl-stockist-links a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.vl-stockist-links .vl-stockist-show { margin-top: 0; }
.vl-stockist-legend { margin: 14px 0 0; color: var(--vl-slate); font-size: 14px; }
.vl-stockist-legend[hidden] { display: none; }
.vl-stockist-legend .fa { color: var(--vl-notice-mark); }
.vl-stockist-status a { font-weight: 600; }


/* Gold Standard badge (buy-online.php) */
.vl-gold-award { max-width: 200px; }

/* Country cards: distributors and EU online shops (contact/international-distributors.php, buy-online.php) */
.vl-dist { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.vl-dist-country { margin: 0 0 12px; font-size: 18px; line-height: 1.3; }
.vl-dist-item + .vl-dist-item { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--vl-line); }
.vl-card .vl-dist-item h3 { font-size: 16px; }
.vl-card .vl-dist-item p { margin-top: 4px; }
.vl-dist-item .fa { margin-right: 4px; color: var(--vl-indigo); }
.vl-dist-links { margin: 0; padding: 0; list-style: none; font-size: 15px; }
.vl-dist-links li + li { margin-top: 6px; }
.vl-dist-links em { color: var(--vl-slate); font-size: 14px; }


/* ---- Stockist finder (find-stockists.php; filled in by the js "Stockist finder") ---- */

/* Search and results on the left, map on the right; on phones: search, map, results */
.vl-stockist-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "search map" "results map"; align-items: start; gap: 0 40px; }
.vl-stockist-search { grid-area: search; }
.vl-stockist-mapcol { grid-area: map; position: sticky; top: 90px; }
.vl-stockist-results { grid-area: results; }
@media (max-width: 991px) {
    .vl-stockist-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "search" "map" "results"; }
    .vl-stockist-mapcol { position: static; }
}

.vl-stockist-form { padding: 24px; border-radius: 14px; background: var(--vl-mist); }
.vl-stockist-form label { font-weight: 600; }
.vl-stockist-status p { margin: 18px 0 0; color: var(--vl-slate); }

.vl-stockist-map { height: 560px; border-radius: var(--vl-radius); overflow: hidden; background: var(--vl-mist); }
.vl-stockist-map[hidden] { display: none; }
@media (max-width: 991px) {
    .vl-stockist-map { height: 380px; margin-top: 24px; }
}

/* Numbered results; the numbers match the map pins */
.vl-stockists { margin: 18px 0 0; padding: 0; list-style: none; counter-reset: vl-stockist; }
.vl-stockist { position: relative; padding: 16px 0 16px 44px; border-top: 1px solid var(--vl-line); counter-increment: vl-stockist; }
.vl-stockist::before { content: counter(vl-stockist); position: absolute; top: 16px; left: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--vl-indigo); color: var(--vl-on-accent); font-size: 13px; font-weight: 700; line-height: 28px; text-align: center; }
.vl-stockist-name { margin: 0; font-size: 17px; line-height: 1.3; }
.vl-stockist p { margin: 4px 0 0; font-size: 15px; }
.vl-stockist p.vl-stockist-dist { color: var(--vl-slate); font-size: 14px; }
.vl-stockist p.vl-stockist-display { color: var(--vl-indigo); font-weight: 600; }
.vl-stockist .fa { color: var(--vl-indigo); }
.vl-stockist-show { margin-top: 8px; padding: 0; border: 0; background: none; color: var(--vl-indigo); font-size: 14px; font-weight: 600; cursor: pointer; }
.vl-stockist-show:hover, .vl-stockist-show:focus { text-decoration: underline; }
.vl-stockist-info p { margin: 4px 0 0; }
/* Map pins (js 13b, Leaflet): numbered, gold for a stockist with a VARILIGHT display */
.vl-pin { display: flex; align-items: center; justify-content: center; border: 2px solid #fff; border-radius: 50% 50% 50% 0; background: var(--vl-indigo); box-shadow: 0 2px 6px rgba(0, 0, 0, .35); transform: rotate(-45deg); }
.vl-pin span { color: #fff; font-size: 12px; font-weight: 700; transform: rotate(45deg); }
.vl-pin--display { background: #b8860b; }
.vl-stockist-map .leaflet-popup-content { margin: 12px 14px; font-family: inherit; font-size: 14px; line-height: 1.45; }
.vl-stockist-map .leaflet-container a { color: var(--vl-indigo); }


/* ---- Glossary (glossary-product-terms.php) ----------------------------- */
/* Glossary (George, 19 Oct 2026: made useful): a find box and group buttons, then the terms as compact cards */
.vl-gloss-tools { position: sticky; top: 0; z-index: 4; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 0 0 32px; padding: 14px 0; background: var(--vl-paper); border-bottom: 1px solid var(--vl-line); }
.vl-gloss-tools .vl-filterbox { flex: 0 1 360px; margin: 0; }
.vl-gloss-groups { display: flex; flex-wrap: wrap; gap: 8px; }
.vl-chip { height: 36px; padding: 0 14px; border: 1px solid var(--vl-line); border-radius: 18px; background: var(--vl-card); color: var(--vl-ink); font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.vl-chip span { margin-left: 4px; color: var(--vl-slate); font-weight: 400; }
.vl-chip:hover { border-color: var(--vl-indigo); }
.vl-chip[aria-pressed="true"] { background: var(--vl-indigo); border-color: var(--vl-indigo); color: var(--vl-on-accent); }
.vl-chip[aria-pressed="true"] span { color: inherit; opacity: .75; }
.vl-gloss-none { flex-basis: 100%; margin: 0; color: var(--vl-slate); }
.vl-gloss-group[hidden], .vl-gloss-item[hidden] { display: none; }
.vl-gloss-group + .vl-gloss-group { margin-top: clamp(32px, 3.5vw, 48px); }
.vl-gloss-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); gap: 14px; margin: 0; }
.vl-gloss-item { padding: 16px 18px; border: 1px solid var(--vl-line-soft); border-radius: var(--vl-radius); background: var(--vl-card); }
.vl-gloss-item dt { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; font-size: 16px; font-weight: 700; line-height: 1.3; }
.vl-gloss-item dt img { flex: 0 0 56px; width: 56px; height: 56px; object-fit: contain; border-radius: 8px; background: var(--vl-photo); }
.vl-gloss-item dd { margin: 0; color: var(--vl-slate); font-size: 14.5px; line-height: 1.5; }
.vl-gloss-item dd strong { color: var(--vl-ink); }
.vl-glossary-section--next { margin-top: 48px; }
.vl-glossary-title { margin: 0 0 16px; font-size: 26px; scroll-margin-top: 90px; }
.vl-glossary th[scope="row"] { width: 220px; }
.vl-glossary th[scope="row"] img { display: block; max-width: 120px; margin-bottom: 8px; }
.vl-glossary-top { margin: 8px 0 0; font-size: 14px; }
@media (max-width: 767px) {
    .vl-glossary th[scope="row"] { width: 120px; }
    .vl-glossary th[scope="row"] img { max-width: 90px; }
}


/* ---- News --------------------------------------------------------------- */

/* News (news.php). js section 14 turns Mailchimp's campaign list into photo cards (.vl-news-cards), each with the
   newsletter's picture (an envelope until it loads) and opening words; the archive folds sit two across below. */
.vl-news-title { margin: 0 0 20px; font-size: 26px; }
.vl-news-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-bottom: 24px; }
.vl-news-head .vl-news-title { margin: 0; }
.vl-news-head .vl-filterbox { max-width: 320px; margin: 0; }
.vl-news-archive .campaign { padding: 12px 0; border-top: 1px solid var(--vl-line); }   /* before js runs */
.vl-news-archive .campaign a { display: block; margin-top: 2px; font-size: 17px; font-weight: 600; line-height: 1.4; }
.vl-news-cards > li[hidden] { display: none; }
.vl-news-cards .vl-card { padding: 20px; }
.vl-news-pic { position: relative; color: var(--vl-line); font-size: 40px; }
.vl-news-pic img { position: absolute; inset: 0; opacity: 0; mix-blend-mode: normal; transition: opacity .3s var(--vl-ease), transform .5s var(--vl-ease); }
.vl-news-pic--on img { opacity: 1; }
/* Newsletter pictures are often banners or logos with words in them: show the whole picture, not a crop */
.vl-cards--photo .vl-news-pic img { object-fit: contain; }
.vl-news-pic--on > i { visibility: hidden; }
.vl-news-cards h3 { font-size: 18px; line-height: 1.35; }
.vl-news-cards .vl-news-date { margin-bottom: 4px; }
.vl-news-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.vl-news-text:empty { display: none; }
.vl-news-foot { margin: 32px 0 0; text-align: center; }
.vl-news-none { margin: 0; color: var(--vl-slate); }
.vl-news-folds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; align-items: start; }
@media (max-width: 767px) { .vl-news-folds { grid-template-columns: minmax(0, 1fr); } }
.vl-news-date { display: block; color: var(--vl-slate); font-size: 13px; }
.vl-news-older { margin: 0; padding: 0; list-style: none; }
.vl-news-older li { padding: 8px 0; border-top: 1px solid var(--vl-line); }
.vl-news-older li:first-child { border-top: 0; }

/* Archived newsletters (news/enews-*.php): images full width of the text column, galleries of finishes */
.vl-enews figure img { display: block; }
.vl-enews .vl-enews-gallery { margin: 24px 0; }

/* Customer testimonials (news/testimonials.php) */
.vl-quotes { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.vl-stars { margin: 0 0 8px; color: #e0a100; font-size: 16px; letter-spacing: 2px; }
.vl-card .vl-quote-title { margin: 0 0 10px; font-size: 18px; }
.vl-quote blockquote { margin: 0; padding: 0; border: 0; font-size: 15px; }
.vl-quote blockquote p { margin: 0 0 8px; color: var(--vl-ink); }
.vl-card p.vl-quote-by { margin-top: auto; padding-top: 10px; color: var(--vl-slate); font-size: 14px; font-style: italic; }


/* ---- 404 page (404.php) -------------------------------------------------- */
.vl-404-help { margin: 28px 0 0; }


/* Stockist finder before the first search: the search runs across the band in one row */
@media (min-width: 992px) {
    .vl-stockist-layout:has(.vl-stockist-map[hidden]) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "search" "results"; }
    .vl-stockist-layout:has(.vl-stockist-map[hidden]) .vl-stockist-mapcol { display: none; }
    .vl-stockist-layout:has(.vl-stockist-map[hidden]) .vl-stockist-form { display: grid; grid-template-columns: minmax(300px, 460px) minmax(0, 1fr) auto; column-gap: 48px; align-items: start; }
    .vl-stockist-layout:has(.vl-stockist-map[hidden]) .vl-stockist-form > label { grid-column: 1; grid-row: 1; }
    .vl-stockist-layout:has(.vl-stockist-map[hidden]) .vl-stockist-form > .vl-near-row { grid-column: 1; grid-row: 2; }
    .vl-stockist-layout:has(.vl-stockist-map[hidden]) .vl-stockist-form > .vl-near-locate { grid-column: 1; grid-row: 3; justify-self: start; }
    .vl-stockist-layout:has(.vl-stockist-map[hidden]) .vl-stockist-form > fieldset.vl-types { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
    .vl-stockist-layout:has(.vl-stockist-map[hidden]) .vl-stockist-form > .vl-radius { grid-column: 3; grid-row: 1 / span 3; }
}

/* --------------------------------------------------------------------------
   /my-list.php: the actions sit in the title bar (right on desktop, under
   the heading on phones); the list is one row per product: picture, code,
   description with range and finish under it, quantity, remove. Phones
   fold each row into code / description / range and quantity.
   A shared list (?items=) shows the quantity as "x 2" instead of the box.
   -------------------------------------------------------------------------- */
.vl-ml-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.vl-ml-tools [hidden] { display: none; }
.vl-ml-tools .vl-btn { height: 40px; padding: 0 18px; border-radius: 20px; font-size: 14px; }
.vl-pagehead .vl-ml-sum { margin-top: 8px; font-size: 16px; }
.vl-ml-sum:empty { display: none; }
.vl-js .vl-ml-nojs { display: none; }
.vl-ml-nojs, .vl-ml-note { margin: 0; color: var(--vl-slate); }
.vl-ml-note { margin-top: 14px; font-size: 14px; }
.vl-ml-status { margin: 0 0 14px; color: var(--vl-slate); font-size: 14px; }
.vl-ml-status:empty { display: none; }
.vl-ml-linkbox { width: min(100%, 560px); height: 38px; margin-left: 6px; padding: 0 12px; border: 1px solid var(--vl-line); border-radius: 10px; background: var(--vl-card); color: var(--vl-ink); font-size: 14px; }

.vl-ml-lines { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--vl-line); }
.vl-ml-line {
    display: grid;
    grid-template-columns: 64px minmax(96px, 160px) minmax(0, 1fr) auto 36px;
    grid-template-areas: "img code desc qty remove" "img code meta qty remove";
    align-items: center;
    gap: 0 20px;
    padding: 12px 8px;
    border-bottom: 1px solid var(--vl-line);
    transition: background-color .15s ease;
}
.vl-ml-line:hover { background: var(--vl-hover); }
.vl-ml-img { grid-area: img; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; padding: 6px; overflow: hidden; border-radius: 10px; background: var(--vl-surface); }
.vl-ml-img img { width: auto; max-width: 100%; height: auto; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.vl-ml-code { grid-area: code; font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.vl-ml-desc { grid-area: desc; align-self: end; font-size: 15px; line-height: 1.4; }
.vl-ml-meta { grid-area: meta; align-self: start; margin-top: 2px; color: var(--vl-slate); font-size: 13px; line-height: 1.4; }
.vl-ml-qty { grid-area: qty; justify-self: end; }
.vl-ml-qty .vl-qty { height: 40px; border-radius: 20px; }
.vl-ml-qty .vl-qty-btn { width: 32px; height: 32px; }
.vl-ml-qty .vl-qty-input { width: 44px; font-size: 15px; }
.vl-ml-qtytext { font-size: 16px; font-weight: 700; white-space: nowrap; }
.vl-ml-x { margin-right: 4px; color: var(--vl-slate); font-weight: 400; }
.vl-ml-remove { grid-area: remove; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--vl-slate); font-size: 15px; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.vl-ml-remove:hover, .vl-ml-remove:focus-visible { background: var(--vl-mist); color: var(--vl-indigo); }
.vl-ml-foot { display: flex; justify-content: flex-end; margin-top: 12px; }
.vl-ml-clear { padding: 4px 8px; border: 0; background: none; color: var(--vl-slate); font-size: 14px; font-weight: 700; cursor: pointer; }
.vl-ml-clear:hover, .vl-ml-clear:focus { color: var(--vl-indigo); text-decoration: underline; text-underline-offset: 3px; }
.vl-ml-empty { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 0; padding: 22px 24px; border-radius: var(--vl-radius); background: var(--vl-mist); }
.vl-ml-empty p { margin: 0; }
.vl-ml-plus { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: 0 2px; border: 1px solid var(--vl-line); border-radius: 50%; background: var(--vl-card); color: var(--vl-indigo); font-size: 11px; vertical-align: middle; }
@media (max-width: 767px) {
    .vl-ml-tools { width: 100%; }
    .vl-ml-tools .vl-btn { flex: 1 1 auto; height: auto; min-height: 40px; padding: 6px 12px; }
    .vl-ml-line {
        grid-template-columns: 56px minmax(0, 1fr) auto;
        grid-template-areas: "img code remove" "img desc desc" "img meta qty";
        align-items: start;
        gap: 2px 12px;
        padding: 12px 0;
    }
    .vl-ml-line:hover { background: none; }
    .vl-ml-img { width: 56px; height: 56px; }
    .vl-ml-code { align-self: center; }
    .vl-ml-desc { align-self: start; font-size: 14px; }
    .vl-ml-meta { align-self: center; margin-top: 4px; }
    .vl-ml-qty { align-self: center; margin-top: 4px; }
    .vl-ml-remove { justify-self: end; margin: -6px -6px 0 0; }
}

/* Rooms on My list (16 Oct 2026): a heading for each room with Rename and Remove room (own list), and a room picker
   after each line's range and finish. The products in no room come first, without a heading. */
.vl-ml-room { margin-top: 28px; }
.vl-ml-roomhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0 0 8px; }
.vl-ml-roomhead h2 { margin: 0 6px 0 0; font-size: clamp(18px, 1.6vw, 22px); font-weight: 600; letter-spacing: -0.01em; }
.vl-ml-roombtn { padding: 2px 4px; border: 0; background: none; color: var(--vl-slate); font-size: 13px; font-weight: 700; cursor: pointer; }
.vl-ml-roombtn:hover, .vl-ml-roombtn:focus-visible { color: var(--vl-indigo); text-decoration: underline; text-underline-offset: 3px; }
.vl-ml-roompick { display: inline-block; }
.vl-ml-roompick select { max-width: 180px; height: 28px; margin: 2px 0 0 8px; padding: 0 6px; border: 1px solid var(--vl-line); border-radius: 8px; background: var(--vl-card); color: var(--vl-ink); font-size: 13px; }
@media (max-width: 767px) { .vl-ml-roompick { display: block; } .vl-ml-roompick select { margin-left: 0; } }
@media print {
    .vl-page-mylist .vl-ml-room { margin-top: 10pt; break-inside: avoid-page; }
    .vl-page-mylist .vl-ml-roomhead { margin: 0 0 3pt; }
    .vl-page-mylist .vl-ml-roomhead h2 { font-size: 12pt; }
}

/* "You may also need" under the list (includes/list-suggestions.php; js section 28): small cards in a grid, each with
   the reason on top, the code and description, and an "Add" button (the suggested quantity when there is one).
   Phones: one row that scrolls sideways. Hidden when there is nothing to suggest; the buttons need JavaScript. */
.vl-ml-suggest { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--vl-line); }
.vl-ml-suggest[hidden] { display: none; }
.vl-ml-suggest h2 { margin: 0 0 14px; font-size: clamp(20px, 1.8vw, 24px); font-weight: var(--vl-display); letter-spacing: -0.01em; }
.vl-sg-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 1200px) { .vl-sg-list { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); } }   /* wide screens: wider cards, so the reason fits on a line */
.vl-sg { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-width: 0; padding: 10px 12px 10px 10px; border: 1px solid var(--vl-line-soft); border-radius: var(--vl-radius); background: var(--vl-card); box-shadow: var(--vl-shadow-sm); }
.vl-sg-img { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; padding: 5px; overflow: hidden; border-radius: 8px; background: var(--vl-surface); }
.vl-sg-img img { width: auto; max-width: 100%; height: auto; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.vl-sg-text { min-width: 0; line-height: 1.35; }
.vl-sg-text p { margin: 0; }
.vl-sg-why { display: -webkit-box; overflow: hidden; color: var(--vl-indigo); font-size: 12px; font-weight: 700; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.vl-sg-text .vl-sg-name { display: -webkit-box; margin-top: 2px; overflow: hidden; color: var(--vl-ink); font-size: 13px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.vl-sg-name a { margin-right: 2px; font-weight: 700; }
.vl-sg-add { display: none; }
.vl-js .vl-sg-add { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border: 1px solid var(--vl-indigo); border-radius: 17px; background: transparent; color: var(--vl-indigo); font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer; transition: background-color var(--vl-speed) var(--vl-ease), color var(--vl-speed) var(--vl-ease); }
.vl-js .vl-sg-add:hover, .vl-js .vl-sg-add:focus-visible { background: var(--vl-indigo); color: var(--vl-on-accent); }
.vl-js .vl-sg-add.is-done, .vl-js .vl-sg-add.is-done:hover { border-color: var(--vl-line); background: none; color: var(--vl-slate); cursor: default; }
/* A card with a choice to make first (MultiGrid clips: the grid system). Without JavaScript the small form opens the
   chosen pack's data sheet ("View"); with it, the choice sets what "Add" adds. */
.vl-sg-choose { display: flex; gap: 6px; margin: 4px 0 0; }
.vl-sg-choose select { flex: 1 1 auto; min-width: 0; height: 32px; padding: 0 8px; border: 1px solid var(--vl-line); border-radius: 8px; background: var(--vl-card); color: var(--vl-ink); font-size: 13px; }
.vl-sg-choose select:focus { border-color: var(--vl-indigo); outline: none; box-shadow: 0 0 0 2px var(--vl-sky); }
.vl-sg-go { flex: 0 0 auto; height: 32px; padding: 0 12px; border: 1px solid var(--vl-indigo); border-radius: 16px; background: none; color: var(--vl-indigo); font-size: 13px; font-weight: 700; cursor: pointer; }
.vl-js .vl-sg-go { display: none; }
/* Data sheets (includes/list-suggestions.php vl_suggestion_row, under Similar products): one row that scrolls sideways */
.vl-sgrow { margin-top: 40px; }
.vl-sg-list--row { display: flex; padding: 2px 2px 10px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.vl-sg-list--row .vl-sg { flex: 0 0 360px; scroll-snap-align: start; }
@media (max-width: 767px) {
    .vl-ml-suggest { margin-top: 24px; padding-top: 18px; }
    .vl-sg-list { display: flex; padding: 2px 2px 10px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
    .vl-sg, .vl-sg-list--row .vl-sg { flex: 0 0 272px; grid-template-columns: 48px minmax(0, 1fr); grid-template-areas: "img text" "img add"; align-items: start; gap: 6px 10px; scroll-snap-align: start; }
    .vl-sgrow { margin-top: 32px; }
    .vl-sg-img { grid-area: img; width: 48px; height: 48px; }
    .vl-sg-text { grid-area: text; }
    .vl-js .vl-sg-add { grid-area: add; justify-self: start; height: 32px; }
}


/* ==========================================================================
   14. Search and type-ahead suggestions (search.php, configurator/, includes/search-results.php)
   ========================================================================== */
.vl-bigsearch { display: flex; gap: 10px; max-width: 760px; margin-top: 20px; }
.vl-bigsearch input { flex: 1 1 auto; min-width: 0; height: 52px; padding: 0 20px; border: 1px solid var(--vl-line); border-radius: 26px; background: var(--vl-card); color: var(--vl-ink); font-size: 16px; }
.vl-bigsearch input:focus { border-color: var(--vl-sky); outline: none; box-shadow: 0 0 0 2px var(--vl-sky); }
.vl-bigsearch .vl-btn { height: 52px; border-radius: 26px; }

/* Filters column */
.vl-filters { font-size: 14px; }
.vl-filter-on { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 20px; }
.vl-chip-x { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 16px; background: var(--vl-indigo); color: var(--vl-on-accent); font-weight: 600; }
.vl-chip-x:hover, .vl-chip-x:focus { background: var(--vl-indigo-hover); color: var(--vl-on-accent); text-decoration: none; }
.vl-facet { padding: 16px 0; border-top: 1px solid var(--vl-line); }
.vl-facet h2 { margin: 0 0 8px; font-size: 15px; }
.vl-facet ul { margin: 0; padding: 0; list-style: none; }
.vl-facet li a { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; color: var(--vl-ink); }
.vl-facet li a:hover, .vl-facet li a:focus { color: var(--vl-indigo); }
.vl-facet li span { color: var(--vl-slate); }
.vl-facet summary { margin-top: 4px; color: var(--vl-indigo); font-weight: 600; cursor: pointer; }
/* Filters and pages folds: always open on wide screens (no button); a button on phones and tablets (js 22b) */
.vl-narrow-fold > summary { display: none; }

/* Results */
.vl-search-pages { margin-bottom: 28px; padding: 18px 20px; border-radius: 14px; background: var(--vl-mist); }
.vl-search-pages h2 { margin: 0 0 8px; font-size: 15px; }
.vl-search-pages ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 6px 24px; margin: 0; padding: 0; list-style: none; }
.vl-search-pages a { display: flex; gap: 10px; padding: 6px 0; color: var(--vl-ink); text-decoration: none; }
.vl-search-pages a strong { color: var(--vl-indigo); font-weight: 700; }
.vl-search-pages a:hover strong, .vl-search-pages a:focus strong { text-decoration: underline; }
.vl-search-pages small { margin-left: 4px; padding: 1px 6px; border-radius: 8px; background: var(--vl-card); color: var(--vl-slate); font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.vl-search-pages .fa { margin-top: 4px; color: var(--vl-indigo); }
.vl-search-snippet { display: block; margin-top: 2px; color: var(--vl-slate); font-size: 13px; line-height: 1.45; }
.vl-search-more { margin-top: 8px; }
.vl-search-more summary { color: var(--vl-indigo); font-size: 14px; font-weight: 700; cursor: pointer; }
.vl-search-more ul { margin-top: 8px; }
.vl-results-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 16px; }
/* All products: "Show every product" (with how many) and the line over that list (configurator/index.php) */
.vl-btn-count { display: inline-block; margin-left: 4px; padding: 1px 9px; border-radius: 10px; background: var(--vl-mist); color: var(--vl-ink); font-size: 13px; font-weight: 700; }
.vl-results-every { margin: 0 0 18px; color: var(--vl-slate); font-size: 16px; }
.vl-results-head h2 { margin: 0; font-size: 20px; }
.vl-results-head p { order: 3; flex: 1 1 100%; margin: 0; color: var(--vl-slate); }
.vl-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.vl-results--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }   /* best sellers band: 4 across */
/* Product type cards ("The range" band, includes/product-types.php) */
/* Information cards (Socket types: finishes, guarantee, support): an icon or small logo, a heading, a line, a link */
.vl-info-cards .vl-card h2 { margin: 14px 0 6px; font-size: 20px; font-weight: 700; letter-spacing: 0; }
.vl-info-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--vl-mist); color: var(--vl-indigo); font-size: 24px; }
.vl-info-cards .vl-info-icon img { display: block; width: 44px; height: 44px; margin: 0; padding: 0; object-fit: contain; background: none; border: 0; box-shadow: none; }   /* the guarantee logo in the same round badge as the icons */
.vl-info-cards .vl-go a + a { margin-left: 18px; }
/* "The range" by range: compact cards, as many across as fit (dimmer family pages) */
.vl-results.vl-range-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.vl-result-go { display: block; margin-top: 8px; color: var(--vl-indigo); font-size: 13px; font-weight: 700; }   /* a product type card's "See all" */
.vl-types-intro { max-width: 760px; margin: -8px 0 20px; color: var(--vl-slate); }
/* Product types in tabs (vl_type_tabs): a heading and count per group, a short note, then the cards. With the tabs
   working, the group's name is on its tab, so the panel's own heading is hidden. */
.vl-types-panel + .vl-types-panel { margin-top: clamp(32px, 3.5vw, 48px); }
.vl-types-panel-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 20px; margin-bottom: 12px; }
.vl-types-panel-head h3 { margin: 0; font-size: 20px; }
.vl-js .vl-types [role="tabpanel"] .vl-types-panel-head h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vl-js .vl-types [role="tabpanel"] + [role="tabpanel"] { margin-top: 0; }
.vl-types-panel-note { max-width: 860px; margin-bottom: 20px; }
.vl-types-panel-note p:last-child { margin-bottom: 0; }
.vl-types .vl-tabs { margin-bottom: 24px; }
.vl-types-more { margin: 20px 0 0; color: var(--vl-slate); font-size: 15px; }
@media (max-width: 991px) { .vl-results--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* A short range: the models explained beside their cards (vl_type_band's $aside; V-Pro Micro page) */
.vl-types-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 80px); align-items: start; }
.vl-types-split .vl-result-img { aspect-ratio: 4 / 3; }
.vl-types-aside > :first-child { margin-top: 0; }
.vl-types-aside > :last-child { margin-bottom: 0; }
.vl-types-aside h3 { margin: 0 0 14px; font-size: clamp(22px, 1.8vw, 28px); font-weight: var(--vl-display); line-height: 1.25; letter-spacing: -0.015em; }
.vl-types-aside .vl-checklist { margin-bottom: 20px; }
.vl-results--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vl-results--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vl-results--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }   /* five kinds in one row (fused spurs, switches page) */
.vl-results--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }   /* 12 best sellers on a range page: two rows of six */
@media (max-width: 1399px) { .vl-results--6 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 991px) { .vl-results--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1399px) { .vl-results--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .vl-results--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 991px) {
    .vl-types-split { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 575px) { .vl-results--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vl-result { display: flex; flex-direction: column; height: 100%; padding: 14px; border: 1px solid var(--vl-line); border-radius: var(--vl-radius); background: var(--vl-card); color: var(--vl-ink); transition: border-color .15s ease, box-shadow .15s ease; }
.vl-result:hover, .vl-result:focus { border-color: var(--vl-indigo); box-shadow: 0 0 0 1px var(--vl-indigo); color: var(--vl-ink); text-decoration: none; }
/* The product photo sits on a soft rounded tile; multiply lets its white background take the tile colour
   (the tile stays light in the dark theme, so photos never show as hard white squares) */
.vl-result-img { display: block; aspect-ratio: 1 / 1; margin-bottom: 10px; padding: 8%; overflow: hidden; border-radius: 10px; background: var(--vl-surface); }
.vl-result-img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.vl-result-code { font-weight: 700; }
.vl-result-desc { margin-top: 2px; font-size: 14px; line-height: 1.4; }
.vl-result-meta { margin-top: auto; padding-top: 8px; color: var(--vl-slate); font-size: 13px; }

/* Popular products on the All products page: the real top sellers as a compact numbered list
   (includes/popular-products.php, vl_top_lines_band). Rank, photo on a rounded tile, code, description, range and finish. */
.vl-toplist { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.vl-toplist-item { display: grid; grid-template-columns: 28px 72px minmax(0, 1fr); align-items: center; gap: 12px; height: 100%; padding: 10px 14px 10px 8px; border: 1px solid var(--vl-line-soft); border-radius: var(--vl-radius); background: var(--vl-card); color: var(--vl-ink); transition: border-color var(--vl-speed) var(--vl-ease), box-shadow var(--vl-speed) var(--vl-ease); }
.vl-toplist-item:hover, .vl-toplist-item:focus { border-color: var(--vl-indigo); box-shadow: 0 0 0 1px var(--vl-indigo); color: var(--vl-ink); text-decoration: none; }
.vl-toplist-rank { color: var(--vl-indigo); font-size: 16px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.vl-toplist-img { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; padding: 6px; overflow: hidden; border-radius: 10px; background: var(--vl-surface); }
.vl-toplist-img img { width: auto; max-width: 100%; height: auto; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.vl-toplist-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.vl-toplist-text strong { font-size: 15px; }
.vl-toplist-desc { display: -webkit-box; overflow: hidden; font-size: 13px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.vl-toplist-meta { margin-top: 2px; overflow: hidden; color: var(--vl-slate); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1399px) { .vl-toplist { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 991px) { .vl-toplist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
    .vl-toplist { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .vl-toplist-item { grid-template-columns: 24px 60px minmax(0, 1fr); gap: 10px; }
    .vl-toplist-img { width: 60px; height: 60px; }
}
/* Phones: the first 8, then "Show all 20" (js section 26); without JavaScript all are listed */
.vl-toplist-more { display: none; margin-top: 12px; }
@media (max-width: 600px) {
    .vl-js .vl-toplist:not(.is-open) > li:nth-child(n+9) { display: none; }
    .vl-js .vl-toplist-more { display: inline-flex; }
}
.vl-pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 28px; color: var(--vl-slate); }
.vl-noresults h2 { margin: 0 0 8px; font-size: 22px; }

/* Browse by range (configurator/) */
.vl-browse-h { margin: 32px 0 14px; font-size: 18px; }
.vl-browse-h:first-child { margin-top: 0; }
.vl-browse { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.vl-browse .vl-tile { justify-content: space-between; }
.vl-browse .vl-tile span { color: var(--vl-slate); font-weight: 400; }
.vl-browse-more { margin: 32px 0 0; color: var(--vl-slate); }

/* Type-ahead suggestions under any search box with data-vl-suggest (js/varilight.js, section 9) */
.vl-suggest-host { position: relative; }
.vl-suggest-list { position: absolute; top: calc(100% + 6px); left: 0; z-index: 1050; width: 100%; min-width: 320px; max-width: 520px; padding: 6px; border-radius: 12px; background: var(--vl-card); box-shadow: 0 18px 40px rgba(8, 10, 45, 0.3); color: var(--vl-ink); font-size: 14px; line-height: 1.35; text-align: left; }
.vl-suggest-list[hidden] { display: none; }
.vl-suggest-list a { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; color: var(--vl-ink); }
.vl-suggest-list a:hover, .vl-suggest-list a.is-active { background: var(--vl-mist); color: var(--vl-indigo); text-decoration: none; }
.vl-suggest-list img, .vl-suggest-list .vl-sg-noimg { flex: 0 0 44px; width: 44px; height: 44px; object-fit: contain; }
.vl-suggest-list strong { display: block; }
.vl-suggest-list small { display: block; color: var(--vl-slate); }
.vl-suggest-list .vl-sg-h { margin: 6px 8px 2px; color: #7d829c; font-size: 12px; font-weight: 700; }
.vl-suggest-list .vl-sg-all { justify-content: center; margin-top: 4px; border-top: 1px solid var(--vl-line); border-radius: 0 0 8px 8px; color: var(--vl-indigo); font-weight: 700; }
.vl-suggest-list .vl-sg-other .fa { margin-right: 4px; }   /* "54 products on varilight.eu" in the search suggestions */
.vl-header .vl-suggest-list { right: 0; left: auto; }

@media (max-width: 991px) {
    .vl-filters { margin-bottom: 20px; }
    .vl-filter-on { margin-bottom: 12px; }
    .vl-narrow-fold { border: 1px solid var(--vl-line); border-radius: 12px; background: var(--vl-card); }
    .vl-narrow-fold > summary { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 16px; color: var(--vl-ink); font-size: 15px; font-weight: 700; white-space: nowrap; cursor: pointer; list-style: none; }
    .vl-narrow-fold > summary::-webkit-details-marker { display: none; }
    .vl-narrow-fold > summary .fa { color: var(--vl-indigo); }
    .vl-narrow-fold > summary small { flex: 1 1 auto; min-width: 0; overflow: hidden; color: var(--vl-slate); font-size: 13px; font-weight: 400; text-overflow: ellipsis; }
    .vl-narrow-fold > summary::after { content: "\f107"; font-family: FontAwesome; color: var(--vl-slate); }
    .vl-narrow-fold[open] > summary::after { content: "\f106"; }
    .vl-filters-fold .vl-facet { margin: 0 16px; }
    .vl-search-pages.vl-narrow-fold { margin-bottom: 20px; padding: 0; }
    .vl-search-pages > h2 { display: none; }
    .vl-search-pages > ul, .vl-search-pages > .vl-search-more { margin: 0 16px 14px; }
}
@media (max-width: 767px) {
    .vl-pagehead h1.vl-search-title { font-size: 26px; }
    .vl-bigsearch .vl-btn { padding: 0 16px; }
    .vl-results { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .vl-result { padding: 10px; }
    .vl-suggest-list, .vl-header .vl-suggest-list { left: 0; right: auto; min-width: 0; max-width: none; }
}


/* Sort order select in the results heading (includes/search-results.php) */
.vl-sort { display: flex; align-items: center; gap: 8px; margin-left: auto; font-size: 14px; }
.vl-sort label { margin: 0; color: var(--vl-slate); font-weight: 400; }
.vl-sort select { height: 38px; padding: 0 12px; border: 1px solid var(--vl-line); border-radius: 19px; background: var(--vl-card); color: var(--vl-ink); font-size: 14px; font-weight: 700; cursor: pointer; }
.vl-sort select:focus { border-color: var(--vl-indigo); outline: none; box-shadow: 0 0 0 2px var(--vl-sky); }
.vl-js .vl-sort-go { display: none; }
/* "Show more products" under the results (adds the next page; js section 22) */
.vl-more-wrap { display: flex; justify-content: center; margin: 28px 0 0; }
.vl-more.is-loading { opacity: .6; pointer-events: none; }
@media (max-width: 575px) {
    .vl-sort { flex-wrap: wrap; }
}


/* Trust logos (lifetime guarantee, British made, 50 years, EU made): the image files have white backgrounds, so
   wherever they appear they sit on their own white tile and never straight on grey or dark (George, Oct 2026).
   The header uses its own "-header" versions, made for the navy band, which this doesn't touch. */
img[src$="/logos/lifetime-guarantee.png"],
img[src$="/logos/british-made-logo.png"],
img[src$="/logos/50-years-logo.png"],
img[src$="/logos/eu-made-logo.png"] {
    box-sizing: content-box;
    padding: 10px;
    border-radius: var(--vl-radius);
    background: #fff;
    box-shadow: var(--vl-shadow-sm);
}

/* Trust logos, larger (class vl-trust-logo): V-Pro and V-LED pages, About us, lifetime guarantee page title */
.vl-logo-row--trust { gap: 16px 20px; }
.vl-logo-row .vl-trust-logo { width: 130px; height: auto; max-height: none; }
.vl-pagehead-logo.vl-trust-logo { width: 150px; height: auto; max-height: none; }
@media (max-width: 767px) {
    .vl-pagehead-logo.vl-trust-logo { width: 110px; }
}
@media (max-width: 480px) {
    .vl-logo-row .vl-trust-logo { width: 96px; }
}


/* ==========================================================================
   15. Utilities
   ========================================================================== */
.vl-mt-0 { margin-top: 0 !important; }
.vl-mb-0 { margin-bottom: 0 !important; }
.vl-center { text-align: center; }
.vl-muted { color: var(--vl-slate); }

/* Back to top (js section 32): a round button in the bottom right corner on long pages, two screens down */
.vl-totop {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1020;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--vl-navy);
    box-shadow: 0 6px 18px rgba(8, 10, 45, 0.3);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s, background-color .15s ease;
}
.vl-totop.is-shown { opacity: 1; visibility: visible; transform: none; }
.vl-totop:hover { background: var(--vl-indigo); color: var(--vl-on-accent); }
.vl-totop:focus-visible { outline: 2px solid var(--vl-sky); outline-offset: 3px; background: var(--vl-indigo); color: var(--vl-on-accent); }
:root[data-theme="dark"] .vl-totop { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18), 0 6px 18px rgba(0, 0, 0, 0.5); }
@media (prefers-reduced-motion: reduce) { .vl-totop { transition: none; } }
@media print { .vl-totop { display: none; } }

/* More below (js section 32b): a pill at the bottom of the screen on a long page, until the visitor scrolls */
.vl-more-below {
    position: fixed;
    left: 50%;
    bottom: 22px;
    z-index: 1015;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px 0 18px;
    border: 0;
    border-radius: 20px;
    background: var(--vl-navy);
    box-shadow: 0 6px 18px rgba(8, 10, 45, 0.3);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .02em;
    cursor: pointer;
    opacity: 0;
    transform: translate(-50%, 10px);
    transition: opacity .35s ease, transform .35s ease, background-color .15s ease;
}
.vl-more-below .fa { font-size: 18px; line-height: 1; }
.vl-more-below.is-shown { opacity: 1; transform: translate(-50%, 0); animation: vl-more-bob 2.4s ease-in-out 1s infinite; }
.vl-more-below:hover { background: var(--vl-indigo); }
.vl-more-below:focus-visible { outline: 2px solid var(--vl-sky); outline-offset: 3px; }
:root[data-theme="dark"] .vl-more-below { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18), 0 6px 18px rgba(0, 0, 0, 0.5); }
@keyframes vl-more-bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 5px); } }
@media (prefers-reduced-motion: reduce) { .vl-more-below, .vl-more-below.is-shown { animation: none; transition: none; } }
@media print { .vl-more-below { display: none; } }

/* --------------------------------------------------------------------------
   A short message at the foot of the screen, used only when the browser
   won't keep the list ("isn't saving") or the list is full (js section 28).
   -------------------------------------------------------------------------- */
.vl-ml-toast {
    position: fixed;
    left: 50%;
    bottom: 20px;
    z-index: 1060;
    width: max-content;
    max-width: calc(100vw - 32px);
    margin: 0;
    padding: 12px 18px;
    border-radius: 12px;
    background: var(--vl-ink);
    box-shadow: var(--vl-shadow-lg);
    color: var(--vl-paper);
    font-size: 14px;
    line-height: 1.45;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 16px);
    transition: opacity .25s ease, transform .25s var(--vl-ease);
}
.vl-ml-toast.is-on { opacity: 1; transform: translate(-50%, 0); }


/* ==========================================================================
   16. Print
   Anything with .no-print is left off. Data sheets print only #printable.
   ========================================================================== */
@media print {
    .vl-faq-search, .vl-faq-quick, .vl-faq-browse, .vl-faq-side, .vl-faq-filterbar, .vl-faq-foot, .vl-faq-stuck { display: none !important; }
}

/* Replace an old product (/technical-section/replace-an-old-product.php): two cards, the code and the questions */
.vl-rf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 24px; align-items: start; }
.vl-rf-card { padding: clamp(20px, 2vw, 32px); border: 1px solid var(--vl-line); border-radius: var(--vl-radius-lg); background: var(--vl-card); }
.vl-rf-card h2 { margin: 0 0 6px; font-size: clamp(20px, 1.8vw, 26px); font-weight: var(--vl-display); }
.vl-rf-card > p { margin: 0 0 16px; color: var(--vl-slate); }
.vl-rf-code { display: flex; flex-wrap: wrap; gap: 8px; }
.vl-rf-code input { flex: 1 1 220px; min-width: 0; height: 46px; padding: 0 14px; border: 1px solid var(--vl-line); border-radius: 23px; background: var(--vl-card); color: var(--vl-ink); font-size: 15px; }
.vl-rf-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; align-items: end; }
.vl-rf-field label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 700; }
.vl-rf-field select { width: 100%; height: 44px; padding: 0 10px; border: 1px solid var(--vl-line); border-radius: 10px; background: var(--vl-card); color: var(--vl-ink); font-size: 15px; }
.vl-rf-form .vl-btn { grid-column: 1 / -1; justify-self: start; }
@media (max-width: 991px) { .vl-rf { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 575px) { .vl-rf-form { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   Room planner (/ranges/room-planner.php, js/room-planner.js): the builder look of the Matrix configurator (.vl-mx).
   Left, the picker: one room at a time (room, range and finish, switches and sockets, what's in it, "Save room").
   Right, the saved rooms, each with its own finish and parts ("Change", "Remove"), kept in view and scrolling on its
   own on wide screens; under the picker on phones, with the bar to jump to it.
   -------------------------------------------------------------------------- */
.vl-rp-grid { grid-template-columns: minmax(0, 1fr) minmax(340px, 460px); }
@media (min-width: 992px) {
    .vl-rp-list { max-height: calc(100vh - 112px); overflow-y: auto; overscroll-behavior: contain; }
}
@media (max-width: 991px) { .vl-rp-grid { grid-template-columns: minmax(0, 1fr); } }
.vl-rp-pickhead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin: 0 0 12px; }
.vl-rp-pickhead h2, .vl-rp-list h2 { margin: 0; font-size: 22px; line-height: 1.25; }
.vl-rp-list h2 { margin-bottom: 4px; }
.vl-rp-step .vl-rp-h { display: flex; align-items: center; gap: 12px; min-height: 54px; margin: 0; padding: 10px 18px; font-size: 17px; }
.vl-rp-q { margin: 14px 0 8px; color: var(--vl-slate); font-size: 13px; font-weight: 700; }
.vl-rp-q:first-child { margin-top: 0; }
.vl-rp-chosen { display: flex; align-items: center; gap: 12px; }
.vl-rp-chosen strong { min-width: 0; font-size: 15px; }
.vl-rp-chosen .vl-mx-linkbtn { margin-left: auto; }
.vl-rp-namerow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 14px; }
.vl-rp-presets + .vl-mx-hint + .vl-rp-namerow { margin-top: 16px; }
.vl-rp-step .vl-mx-body > .vl-rp-namerow:first-child { margin-top: 0; }
.vl-rp-namerow label { margin: 0; color: var(--vl-slate); font-size: 13px; font-weight: 700; }
.vl-rp-name { flex: 1 1 200px; min-width: 0; max-width: 420px; height: 40px; padding: 0 12px; border: 1px solid var(--vl-line); border-radius: 10px; background: var(--vl-card); color: var(--vl-ink); font-size: 16px; font-weight: 700; }
.vl-rp-name:focus { border-color: var(--vl-indigo); outline: 2px solid var(--vl-indigo); outline-offset: 1px; }
/* What's in the room: two columns when the picker is wide (2560: no long gap between a thing and its + and -) */
.vl-rp-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 0 32px; margin: 0; padding: 0; list-style: none; }
.vl-rp-item { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--vl-line); }
.vl-rp-itempic { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 8px; background: #fff; object-fit: contain; }   /* white in both themes, as the parts list's pictures */
span.vl-rp-itempic { background: var(--vl-mist); }
.vl-rp-label { flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 600; line-height: 1.3; }
.vl-rp-label small { display: block; margin-top: 2px; color: var(--vl-slate); font-size: 13px; font-weight: 400; }
.vl-rp-item.is-missing .vl-rp-label small { color: var(--vl-notice-mark); }
.vl-rp-qty { flex: 0 0 auto; height: 40px; border-radius: 20px; }
.vl-rp-qty .vl-qty-btn { width: 32px; height: 32px; }
.vl-rp-n { min-width: 30px; font-size: 15px; font-weight: 700; text-align: center; }
.vl-rp-add { margin-top: 10px; }
.vl-rp-add select { width: 100%; max-width: 360px; height: 40px; padding: 0 10px; border: 1px dashed var(--vl-line); border-radius: 10px; background: var(--vl-card); color: var(--vl-ink); font-size: 14px; }
.vl-rp-presets .vl-mx-chip { padding-right: 12px; }
.vl-rp-presets .vl-mx-chip .fa { color: var(--vl-indigo); font-size: 12px; }
.vl-rp-save { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 8px; padding: 14px 18px; border-radius: var(--vl-radius-lg); background: var(--vl-card); }
.vl-rp-save .vl-mx-hint { flex: 1 1 100%; margin: 0; }
.vl-rp-saved { margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--vl-line); }
.vl-rp-saved.is-editing { margin-left: -12px; margin-right: -12px; padding: 12px; border: 1px solid var(--vl-indigo); border-radius: var(--vl-radius); background: var(--vl-chosen); }
.vl-rp-saved.is-editing + .vl-rp-saved { border-top: 0; }
.vl-rp-savedhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.vl-rp-savedact { display: flex; gap: 14px; margin-left: auto; }
.vl-rp-tag { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 10px; background: var(--vl-indigo); color: var(--vl-on-accent); font-size: 12px; font-weight: 700; vertical-align: 2px; }
.vl-rp-saved .vl-mx-sum { margin: 2px 0 6px; }
.vl-rp-saved .vl-mx-lines { margin-bottom: 0; }
.vl-rp-roomtitle { margin: 0; font-size: 16px; }
.vl-rp-missing { margin: 6px 0 0; color: var(--vl-slate); font-size: 13px; }
.vl-rp-total { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--vl-line); font-weight: 700; }
.vl-rp-whole { margin-top: 8px; }
.vl-rp-whole .vl-mx-lines { margin-bottom: 0; }
.vl-rp-reset { margin-left: auto; }
@media (max-width: 767px) {
    .vl-rp-save { padding: 12px; }
    .vl-rp-saved.is-editing { margin-left: -8px; margin-right: -8px; padding: 10px 8px; }
}

/* "Print" prints only the parts list (the script adds .vl-mx-printing and a .vl-mx-printout copy) */
.vl-mx-printout { display: none; }
@media print {
    html.vl-mx-printing body > *:not(.vl-mx-printout) { display: none !important; }
    html.vl-mx-printing .vl-mx-printout { display: block; padding: 0; color: #000; }
    .vl-mx-printout h2 { margin: 0 0 12pt; font-size: 18pt; }
    .vl-mx-printout h3 { font-size: 13pt; }
    .vl-mx-printout .vl-mx-preview { max-height: 150px; margin: 0 0 12pt; }
    .vl-mx-printout .vl-lv-preview { width: 55mm; margin: 0 0 12pt; }
    .vl-mx-printout .vl-note { border: 1px solid #999; background: none; color: #000; }
}

@media print {
    .no-print, .no-print * { display: none !important; }
    a[href]::after { content: "" !important; }   /* Bootstrap would otherwise print every link address */
    .vl-band { padding: 16px 0; }

    /* Data sheet: one compact A4 page */
    .vl-page-datasheet * { visibility: hidden; }
    .vl-page-datasheet #printable, .vl-page-datasheet #printable * { visibility: visible; }
    .vl-page-datasheet #printable { position: absolute; left: 0; top: 0; width: 100%; }
    .vl-print-only { display: block !important; }
    .vl-sheet { font-size: 10.5px; line-height: 1.3; }
    .vl-sheet-grid { grid-template-columns: 36% 1fr; gap: 18px; }
    .vl-sheet-media { position: static; }
    .vl-print-head { display: flex !important; align-items: center; justify-content: space-between; margin-bottom: 8px; padding-bottom: 5px; border-bottom: 1px solid #999; }
    .vl-print-head img { max-height: 40px; width: auto; }
    .vl-print-head h2 { font-size: 18px; }
    .vl-print-main { max-height: 260px; width: auto; margin: 0 auto; }
    .vl-sheet-badges { gap: 14px; margin-top: 16px; }
    .vl-sheet-badges .vl-trust-logo { width: 60px; padding: 0; box-shadow: none; }
    .vl-sheet-kicker { display: none; }   /* the print heading says "Data sheet" */
    .vl-sheet-code { font-size: 17px; }
    .vl-sheet-desc { margin-top: 2px; font-size: 13px; }
    .vl-features h3, .vl-specs h3 { font-size: 12px; }
    .vl-features { margin-top: 6px; padding: 6px 10px; background: none; border: 1px solid #ccc; }
    .vl-sheet .vl-features ul { margin-top: 4px; }
    .vl-features li { padding: 0 0 0 16px; font-size: 10px; line-height: 1.3; }
    .vl-features li .fa { top: 3px; font-size: 10px; }
    .vl-specs { margin-top: 6px; }
    .vl-specs dl { margin-top: 3px; }
    .vl-specs section + section { margin-top: 4px; }
    .vl-spec { grid-template-columns: 42% 1fr; gap: 8px; padding: 1px 0; font-size: 10px; line-height: 1.25; }
    .vl-about { margin-top: 6px; gap: 8px; }
    .vl-about > div { padding: 6px 10px; }
    .vl-about h3 { font-size: 11px; }
    .vl-sheet .vl-about p { margin-top: 2px; font-size: 10px; line-height: 1.35; }
    .vl-sheet .vl-sheet-note { margin-top: 8px; padding-top: 6px; font-size: 8.5px; }
    .vl-sheet a { color: #000; text-decoration: none; }
}

/* --------------------------------------------------------------------------
   /my-list-pack.php: the list's data sheets or declarations, one per page (to save as one PDF). Each sheet uses the
   data sheet's or declaration's own print styles; here they follow one another instead of one filling the page.
   -------------------------------------------------------------------------- */
.vl-pack-item + .vl-pack-item { margin-top: 40px; padding-top: 40px; border-top: 1px dashed var(--vl-line); }
@media print {
    .vl-page-pack .vl-band { padding: 0; }
    .vl-page-pack .vl-wrap { max-width: none; padding: 0; }
    .vl-pack-item + .vl-pack-item { margin-top: 0; padding-top: 0; border-top: 0; }
    .vl-pack-item { break-after: page; }
    .vl-pack-item:last-child { break-after: auto; }
}

/* --------------------------------------------------------------------------
   /my-list.php prints as a clean parts list: VARILIGHT logo, title and
   date, then Qty / Code / Description (range and finish under it), and the
   list's link at the foot. Pictures, buttons and the title bar are left off
   (header, footer and the title bar are .no-print already).
   -------------------------------------------------------------------------- */
@media print {
    .vl-page-mylist .vl-ml-band { padding: 0; }
    .vl-page-mylist .vl-ml-printhead { display: flex !important; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 12pt; padding-bottom: 6pt; border-bottom: 1px solid var(--vl-slate); }
    .vl-ml-printhead img { width: auto; max-height: 40px; }
    .vl-ml-printhead div { text-align: right; }
    .vl-ml-printhead h2 { margin: 0; font-size: 16pt; }
    .vl-ml-printhead p { margin: 2pt 0 0; font-size: 10pt; }
    .vl-page-mylist .vl-ml-status, .vl-page-mylist .vl-ml-foot, .vl-page-mylist .vl-ml-nojs, .vl-page-mylist .vl-ml-img,
    .vl-page-mylist .vl-qty, .vl-page-mylist .vl-ml-remove, .vl-page-mylist .vl-ml-x { display: none !important; }
    .vl-page-mylist .vl-ml-cols { display: grid !important; grid-template-columns: 12mm 34mm 1fr; gap: 0 4mm; margin: 0; padding: 0 0 3pt; border-bottom: 1px solid var(--vl-slate); font-size: 9pt; font-weight: 700; }
    .vl-page-mylist .vl-ml-lines { border-top: 0; }
    .vl-page-mylist .vl-ml-line { grid-template-columns: 12mm 34mm 1fr; grid-template-areas: "qty code desc" "qty code meta"; align-items: baseline; gap: 0 4mm; padding: 4pt 0; break-inside: avoid; font-size: 10pt; }
    .vl-page-mylist .vl-ml-qty { justify-self: start; }
    .vl-page-mylist .vl-ml-qtytext { display: inline !important; font-size: 10pt; }
    .vl-page-mylist .vl-ml-code, .vl-page-mylist .vl-ml-desc { color: var(--vl-ink); font-size: 10pt; text-decoration: none; }
    .vl-page-mylist .vl-ml-meta { font-size: 8.5pt; }
    .vl-page-mylist .vl-ml-printlink { display: block !important; margin: 12pt 0 0; font-size: 8pt; overflow-wrap: anywhere; }
}


/* ==========================================================================
   17. Dark theme
   --------------------------------------------------------------------------
   The page follows the visitor's device setting (light or dark) until they press the
   moon/sun button in the header, which is remembered on that device (js section 24).
   A small script in includes/head-assets.php sets <html data-theme="light|dark"> before
   the page draws, so there is no white flash. Without JavaScript the site stays light.

   Almost everything is done by swapping the colour tokens from section 1. Rules below
   that are not tokens:
     - product photos have white backgrounds, so tiles that hold a photo stay light
       ("light islands": they get the light tokens back);
     - logos, diagrams and other see-through images get a white tile so dark ink on
       them stays readable (trust logos already have one, section 14);
     - screen only: printouts are always light.
   ========================================================================== */
@media screen {
    :root[data-theme="dark"] {
        color-scheme: dark;
        --vl-indigo: #8f93ff;          /* links and accents, lifted to read on dark */
        --vl-indigo-hover: #b0b3ff;
        --vl-on-accent: #0b0d1f;       /* dark text on the lifted indigo buttons */
        --vl-ink: #e7e9f4;
        --vl-slate: #a6abc6;
        --vl-mist: #13162f;            /* alternate bands and panels */
        --vl-line: #2a2e55;
        --vl-line-soft: rgba(255, 255, 255, 0.08);
        --vl-paper: #0b0d1f;           /* the page */
        --vl-card: #171a37;            /* cards, inputs, menus */
        --vl-surface: #eceef4;         /* photo backdrops stay light */
        --vl-photo: #eceef4;
        --vl-chosen: #23275e;
        --vl-hover: #1b1e3e;
        --vl-glass: rgba(11, 13, 31, 0.94);
        --vl-off: #6f7495;
        --vl-notice-bg: #3a2d10;
        --vl-notice-ink: #f4dca6;
        --vl-notice-mark: #f0b44c;
        --vl-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.25);
        --vl-shadow-md: 0 2px 6px rgba(0, 0, 0, 0.3), 0 14px 36px rgba(0, 0, 0, 0.4);
        --vl-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.35), 0 28px 64px rgba(0, 0, 0, 0.5);
    }
    [data-theme="dark"] body { background: var(--vl-paper); }
    [data-theme="dark"] ::selection { background: var(--vl-indigo); color: var(--vl-on-accent); }

    /* Light islands: tiles that hold a product photo keep the light colours inside them */
    [data-theme="dark"] .vl-plate,
    [data-theme="dark"] .vl-swatches a,
    [data-theme="dark"] .vl-figure--product,
    [data-theme="dark"] .vl-split-media--product,
    [data-theme="dark"] .vl-gallery-main,
    [data-theme="dark"] .vl-thumb,
    [data-theme="dark"] .vl-pcard-img,
    [data-theme="dark"] .vl-cards--photo .vl-card-img {
        --vl-ink: #1b1d3a;
        --vl-slate: #5a5f7a;
        --vl-indigo: #33329a;
        --vl-indigo-hover: #4342b6;
        --vl-line: #e1e3ec;
        --vl-card: #fff;
        --vl-shadow-md: 0 2px 6px rgba(0, 0, 0, 0.3), 0 14px 36px rgba(0, 0, 0, 0.45);
        color: var(--vl-ink);
    }
    [data-theme="dark"] .vl-plate:hover, [data-theme="dark"] .vl-plate:focus,
    [data-theme="dark"] .vl-swatches a:hover, [data-theme="dark"] .vl-swatches a:focus { color: var(--vl-indigo); }

    /* See-through images (logos, diagrams, drawings) on a white tile; navy bands keep theirs as they are */
    [data-theme="dark"] main img[src$=".png"],
    [data-theme="dark"] main img[src$=".gif"],
    [data-theme="dark"] main img[src$=".svg"] { border-radius: 6px; background-color: #fff; }
    [data-theme="dark"] .vl-band--navy img,
    [data-theme="dark"] .vl-hero img,
    [data-theme="dark"] .vl-callout img,
    [data-theme="dark"] main .vl-notile,
    [data-theme="dark"] main img.vl-notile,
    [data-theme="dark"] main img.vl-lv-lever { border-radius: 0; background-color: transparent; }   /* the Lever builder's lever pictures lie over a photo */

    /* Logos (range logos, awards, accreditations): most are JPGs with a white background, so on dark they get a
       rounded white frame with a little air round them. Banners are already rounded (.vl-banner); trust logos have
       their own tile (section 14); document pages are white sheets. */
    [data-theme="dark"] main :is(.vl-dlogo, .vl-series-logo, .vl-dim-logo, .vl-dc-logo, .vl-sheet-logo, .vl-leaf-logo,
        .vl-gold-award, .vl-award-logo, .vl-quality-logo, .vl-pagehead-logo),
    [data-theme="dark"] main img[src*="/logos/"]:not(.vl-banner):not(.vl-trust-logo):not([class*="vl-doc-"]),
    [data-theme="dark"] main img[src*="logo" i]:not(.vl-banner):not(.vl-trust-logo):not([class*="vl-doc-"]) {
        box-sizing: content-box;
        padding: 6px 10px;
        border-radius: 10px;
        background-color: #fff;
    }
/* Section 17 (dark theme), inside "@media screen", straight after the logo-frame rule (the one listing
   .vl-dlogo, .vl-series-logo ...). Logos in a row keep their tile from above (same size and corners in
   both themes) instead of the smaller dark-mode frame. Same specificity as that rule, so it must come
   after it. */
    [data-theme="dark"] main .vl-logo-row img:not(.vl-banner):not(.vl-trust-logo):not([class*="vl-doc-"]) { padding: 12px; border-radius: var(--vl-radius); }


    /* Header and footer are navy in both themes; the header search keeps its white field */
    [data-theme="dark"] .vl-header .vl-search,
    [data-theme="dark"] .vl-hero-search { background: #fff; }
    [data-theme="dark"] .vl-header .vl-search input,
    [data-theme="dark"] .vl-hero-search input { color: #1b1d3a; }
    [data-theme="dark"] .vl-nav .navbar-nav > li > .dropdown-menu { border: 1px solid var(--vl-line); }

    /* Small fixed colours that need lifting on dark */
    /* Matrix parts list: its product photos sit beside text on the dark card, so each gets a rounded white tile
       (the photos have white backgrounds, so the tile and the photo meet without an edge) */
    [data-theme="dark"] .vl-mx-preview { padding: 8px; border-radius: 10px; background: #fff; }
    [data-theme="dark"] .vl-mx-linepic { padding: 3px; border-radius: 8px; background: #fff; }
    /* The same for the FAQs product picker and the photo grids on the switch pages */
    [data-theme="dark"] .vl-faq-prod img { padding: 3px; border-radius: 8px; background: #fff; }
    [data-theme="dark"] .vl-gallery-grid img { border-radius: var(--vl-radius); background: #fff; }

    [data-theme="dark"] .vl-dim-tick,
    [data-theme="dark"] .vl-faq-copy.is-copied { color: #6fcf73; }
    [data-theme="dark"] .vl-crumbs li + li::before { color: #4a4f7a; }
    [data-theme="dark"] .vl-mega-h,
    [data-theme="dark"] .vl-suggest-list .vl-sg-h { color: var(--vl-slate); }
    [data-theme="dark"] .vl-count { background: rgba(0, 0, 0, 0.85); }

    /* Theme button in the header: moon in light, sun in dark */
    .vl-theme-btn .fa-sun-o, [data-theme="dark"] .vl-theme-btn .fa-moon-o { display: none; }
    [data-theme="dark"] .vl-theme-btn .fa-sun-o { display: inline-block; }
}
/* Bespoke page: the standard engravings as small labels */
.vl-engravings { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.vl-engravings li { padding: 4px 12px; border: 1px solid var(--vl-line); border-radius: 14px; background: var(--vl-card); font-size: 13px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
/* Switches page: the range at a glance (standard example photos, shown whole) */
.vl-switch-tiles .vl-card-img { aspect-ratio: 16 / 10; }   /* three across: a shorter picture */
.vl-switch-tiles .vl-card h3 a { color: inherit; text-decoration: none; }
.vl-switch-tiles .vl-card h3 a:hover, .vl-switch-tiles .vl-card h3 a:focus { color: var(--vl-indigo); }