/*!
 * Mobile 2026 — theme stylesheet
 * Mobile-first. Breakpoints: 640 / 782 / 1024 / 1280 / 1440
 * Colour + type tokens are printed by inc/dynamic-css.php from Theme Settings,
 * so every value below has a safe fallback.
 */

/* ============================================================
   1. Tokens
   ============================================================ */
:root{--m26-tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  --m26-red:#dc1c29;
  --m26-red-dark:#b3141f;
  --m26-red-soft:#ff4a55;
  --m26-dark:#181c1d;
  --m26-footer:#1c1d1f;
  --m26-light:#f5f5f5;
  --m26-line:#e6e6e6;
  --m26-text:#55585a;
  --m26-text-soft:#6a6d70;
  --m26-white:#fff;
  --m26-radius:18px;
  --m26-radius-sm:12px;
  --m26-shadow:0 10px 30px rgba(0,0,0,.06);
  --m26-shadow-lg:0 20px 50px rgba(0,0,0,.14);
  --m26-font:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --m26-font-head:var(--m26-font);
  --m26-maxw:1440px;
  --m26-gutter:20px;
  --m26-section-y:56px;
  --m26-h1:34px;
  --m26-h2:29px;
  --m26-body:15.5px;
}

/* ============================================================
   2. Reset / base
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
body{margin:0;font-family:var(--m26-font);font-size:var(--m26-body);line-height:1.75;color:var(--m26-text);background:var(--m26-white);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,video,iframe{max-width:100%;height:auto}
img{display:block}
a{color:var(--m26-red);text-decoration:none}
a:hover{color:var(--m26-red-dark)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--m26-red);outline-offset:2px;border-radius:4px}
h1,h2,h3,h4,h5,h6{margin:0 0 .6em;font-family:var(--m26-font-head);font-weight:800;line-height:1.22;color:var(--m26-dark);letter-spacing:-.01em;text-wrap:balance}
h1{font-size:var(--m26-h1)}h2{font-size:var(--m26-h2)}h3{font-size:20px;font-weight:700}h4{font-size:17px;font-weight:700}
p{margin:0 0 1.1em}
p:last-child,ul:last-child,ol:last-child{margin-bottom:0}
ul,ol{padding-left:1.25em}
li{margin-bottom:.45em}
blockquote{margin:1.6em 0;padding:18px 24px;border-left:4px solid var(--m26-red);background:var(--m26-light);border-radius:0 var(--m26-radius-sm) var(--m26-radius-sm) 0}
hr{height:1px;background:var(--m26-line);border:0;margin:2em 0}
table{width:100%;border-collapse:collapse;margin:1.4em 0}
th,td{padding:12px 14px;border:1px solid var(--m26-line);text-align:left}
th{background:var(--m26-light);color:var(--m26-dark);font-weight:700}
code,kbd,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em}
pre{background:var(--m26-dark);color:#f2f2f2;padding:18px;border-radius:var(--m26-radius-sm);overflow:auto}
::selection{background:var(--m26-red);color:#fff}
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.m26-skip{position:absolute;left:-9999px;top:0;z-index:9999;background:var(--m26-red);color:#fff;padding:12px 20px;border-radius:0 0 8px 0;font-weight:700}
.m26-skip:focus{left:0;color:#fff}

/* ============================================================
   3. Layout helpers
   ============================================================ */
.m26-container{width:100%;max-width:var(--m26-maxw);margin:0 auto;padding-inline:var(--m26-gutter)}
.m26-container--narrow{max-width:900px}
.m26-container--mid{max-width:1180px}
.m26-section{padding-block:var(--m26-section-y);position:relative}
.m26-section--light{background:var(--m26-light)}
.m26-section--dark{background:var(--m26-dark);color:rgba(255,255,255,.78)}
.m26-section--dark h1,.m26-section--dark h2,.m26-section--dark h3{color:#fff}
.m26-section--red{background:var(--m26-red);color:#fff}
.m26-section--red h2{color:#fff}
.m26-section--flush{padding-block:0}
.m26-center{text-align:center}
.m26-stack{display:flex;flex-direction:column;gap:22px}
.m26-stack--center{align-items:center;text-align:center}
.m26-grid{display:grid;gap:18px}
.m26-hidden{display:none!important}
.m26-sec-head{max-width:940px;margin-inline:auto}
.m26-eyebrow{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--m26-red);margin-bottom:10px}
.m26-h2{font-size:var(--m26-h2);font-weight:800;line-height:1.2;margin:0}
.m26-h2 .accent{color:var(--m26-red)}
.m26-lead{font-size:var(--m26-body);line-height:1.85;color:var(--m26-text);text-wrap:pretty;margin:0}
.m26-section--dark .m26-lead{color:rgba(255,255,255,.75)}
.m26-pill{display:inline-block;border-radius:999px;padding:8px 20px;font-size:12.5px;font-weight:700;background:var(--m26-red);color:#fff}
.m26-divider{height:1px;background:var(--m26-line);border:0;margin:0}
.m26-icon-circle{width:56px;height:56px;border-radius:50%;background:var(--m26-red);display:flex;align-items:center;justify-content:center;color:#fff;flex:0 0 auto}
.m26-stars{display:inline-flex;gap:3px;line-height:0}

/* ============================================================
   4. Buttons + forms
   ============================================================ */
.m26-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:999px;padding:14px 26px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;border:1.5px solid transparent;font-family:inherit;line-height:1.2;transition:background .2s,color .2s,border-color .2s,transform .12s;text-align:center}
.m26-btn:active{transform:translateY(1px)}
/* Every button colour is written with its own class doubled up — .m26-btn.m26-btn--red
   rather than .m26-btn--red. That is deliberate, not a typo.

   Elementor's kit puts a global link colour on the body class:
       .elementor-kit-471 a { color: #dc1c29 }      specificity 0,1,1
   A button is an <a>, so a single class at 0,1,0 loses to it, and every red
   button on the site rendered red-on-red — solid pills with no readable label.
   Two classes score 0,2,0 and win. Keep them doubled. */
.m26-btn.m26-btn--red{background:var(--m26-red);color:#fff}
.m26-btn.m26-btn--red:hover{background:var(--m26-red-dark);color:#fff}
.m26-btn.m26-btn--outline{background:transparent;color:var(--m26-dark);border-color:var(--m26-dark)}
.m26-btn.m26-btn--outline:hover{background:var(--m26-dark);color:#fff}
.m26-section--dark .m26-btn.m26-btn--outline{color:#fff;border-color:rgba(255,255,255,.6)}
.m26-section--dark .m26-btn.m26-btn--outline:hover{background:#fff;color:var(--m26-dark)}
.m26-btn.m26-btn--white{background:#fff;color:var(--m26-red);font-size:15px;padding:16px 30px}
.m26-btn.m26-btn--white:hover{background:var(--m26-dark);color:#fff}
.m26-btn--block{display:flex;width:100%}
.m26-btn--lg{padding:17px 34px;font-size:14px}
.m26-btn-row{display:flex;gap:14px;flex-wrap:wrap}
.m26-btn-row--center{justify-content:center}

input[type=text],input[type=email],input[type=tel],input[type=url],input[type=number],input[type=date],input[type=time],input[type=search],input[type=password],select,textarea{
  width:100%;font-family:inherit;font-size:16px;color:var(--m26-dark);background:#fff;border:1.5px solid var(--m26-line);border-radius:var(--m26-radius-sm);padding:13px 15px;line-height:1.4;transition:border-color .18s,box-shadow .18s}
input:focus,select:focus,textarea:focus{border-color:var(--m26-red);box-shadow:0 0 0 3px rgba(220,28,41,.12);outline:none}
textarea{min-height:140px;resize:vertical}
label{display:block;font-size:13.5px;font-weight:700;color:var(--m26-dark);margin-bottom:7px}
select{appearance:none;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2355585a' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}

/* ============================================================
   5. Top bar + header + nav
   ============================================================ */
.m26-topbar{background:var(--m26-red);color:#fff;font-size:13px}
.m26-topbar__inner{display:flex;align-items:center;justify-content:center;gap:16px;padding:9px var(--m26-gutter);max-width:var(--m26-maxw);margin:0 auto;flex-wrap:wrap}
.m26-topbar__left{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:center}
.m26-topbar__item{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:#fff}
.m26-topbar__item:hover{color:#fff;opacity:.85}
.m26-topbar__social{display:none;align-items:center;gap:16px}
.m26-topbar__social a{display:inline-flex}
.m26-topbar__social.m26-topbar__social a{color:#fff}
.m26-topbar__social a:hover{opacity:.8}

.m26-header{background:#fff;position:relative;z-index:60;box-shadow:0 1px 0 rgba(0,0,0,.06)}
.m26-header.is-sticky{position:sticky;top:0}
body.admin-bar .m26-header.is-sticky{top:32px}
.m26-header__inner{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px var(--m26-gutter);max-width:var(--m26-maxw);margin:0 auto;min-width:0}
.m26-header__logo{display:inline-flex;align-items:center;flex:0 0 auto}
.m26-header__logo img{height:46px;width:auto;object-fit:contain}
.m26-header__actions{display:flex;align-items:center;gap:10px;flex:0 0 auto;margin-left:auto}
.m26-header__cta{display:none}
.m26-burger{width:44px;height:44px;border-radius:10px;border:1.5px solid var(--m26-line);background:#fff;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0;flex:0 0 auto}
.m26-burger span{width:18px;height:2px;background:var(--m26-dark);border-radius:2px;transition:transform .2s,opacity .2s}
.m26-burger span:last-child{width:12px;background:var(--m26-red);align-self:flex-start;margin-left:13px}
.m26-burger[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.m26-burger[aria-expanded=true] span:nth-child(2){opacity:0}
.m26-burger[aria-expanded=true] span:nth-child(3){width:18px;margin-left:0;transform:translateY(-7px) rotate(-45deg)}

.m26-nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;box-shadow:0 20px 40px rgba(0,0,0,.14);max-height:78vh;overflow-y:auto}
.m26-nav.is-open{display:block}
.m26-nav ul{list-style:none;margin:0;padding:6px 0}
.m26-nav li{margin:0;border-bottom:1px solid #f1f1f1;position:relative}
/* COLOUR ONLY is written with the class doubled — .m26-nav.m26-nav a — while
   layout stays on a single class. Both halves of that matter.

   Why doubled at all: Elementor's kit can emit .elementor-kit-N a { color: … }
   on the body class at specificity 0,1,1, which ties with a single class and
   wins on source order because theme.css loads first. That turned the
   navigation, the footer, the breadcrumbs and every button label brand red —
   red on red in the top bar and on the buttons, which reads as blank.

   Why colour only: a @media block does not add specificity. Doubling a rule
   that also carries padding and font-size made the *mobile* nav padding
   outrank the desktop override in @media (min-width:1024px), so every link
   kept its full-width gutter padding, the menu grew far too wide and printed
   over the logo and the callback button. Layout belongs in the single-class
   rule so the breakpoints can still reach it. */
.m26-nav a{display:block;padding:14px var(--m26-gutter);font-size:15px;font-weight:600;text-wrap:nowrap}
.m26-nav.m26-nav a{color:var(--m26-dark)}
.m26-nav.m26-nav a:hover,.m26-nav .current-menu-item>a,.m26-nav .current_page_item>a{color:var(--m26-red)}
.m26-nav .sub-menu{display:none;padding:0;background:#fafafa}
.m26-nav .sub-menu a{padding-left:calc(var(--m26-gutter) + 18px);font-size:14.5px;font-weight:500}
.m26-nav li.is-open>.m26-menu--cols,
.m26-nav .m26-menu--tall.is-open>.sub-menu,
.m26-nav .m26-menu--wide.is-open>.sub-menu{display:grid;grid-template-columns:1fr 1fr;padding:4px 0}
.m26-nav .m26-menu--tall>.sub-menu a,.m26-nav .m26-menu--wide>.sub-menu a{padding-left:calc(var(--m26-gutter) + 10px)}
.m26-nav .m26-menu--tall>.sub-menu li:nth-child(odd),
.m26-nav .m26-menu--wide>.sub-menu li:nth-child(odd){border-right:1px solid #f1f1f1}
.m26-nav li.is-open>.sub-menu{display:block}
.m26-subtoggle{position:absolute;top:0;right:0;width:52px;height:50px;border:0;background:transparent;color:var(--m26-dark);cursor:pointer;display:flex;align-items:center;justify-content:center}
.m26-subtoggle svg{transition:transform .2s}
.m26-nav li.is-open>.m26-subtoggle svg{transform:rotate(180deg)}

/* ============================================================
   6. Hero
   ============================================================ */
.m26-hero{position:relative;background:#050505;color:#fff;overflow:hidden}
/* The photograph's box is anchored to the VIEWPORT, never to this section's
   own height.

   It used to be inset:0 / height:100%, which ties it to the content. The hero
   holds the tyre search, and opening a registration result adds ~475px to that
   card. The section grew, height:100% grew, object-fit:cover re-ran, and the
   van was redrawn 64% larger and 844px further left on a desktop — 93% larger
   on a phone. Measured, both ends, in hero-run.mjs. Switching tabs did the
   same thing on a smaller scale; equalising the two panels in 6.13 hid that
   one symptom without touching the cause, which was here.

   vh does not move when a section grows, and browsers freeze vh against the
   largest viewport so a retracting mobile URL bar does not move it either.
   The clamp keeps the crop sane on a very short or very tall window, and the
   value is tuned to land within a few pixels of the height the hero settles at
   with the result closed, so the framing is the one that is on the site today.

   Below the photograph the hero's own #050505 takes over. The overlay ends on
   exactly that colour, and ::after keeps the join with the next section black
   whichever of the two is taller, so neither edge shows a seam. */
.m26-hero__media{position:absolute;top:0;left:0;bottom:auto;width:100%;height:var(--m26-bg-h,clamp(560px,94vh,1000px));object-fit:cover;object-position:32% center}
.m26-hero__overlay{position:absolute;top:0;left:0;right:0;bottom:auto;height:var(--m26-bg-h,clamp(560px,94vh,1000px));background:linear-gradient(180deg,rgba(5,5,5,.35) 0%,rgba(5,5,5,.45) 38%,rgba(5,5,5,.93) 76%,#050505 100%)}
/* The hero's own bottom edge, wherever it lands. Without this the join with
   the next section would show photograph on a tall window and a hard line on a
   short one. */
/* Where the photograph's box ends and the section carries on.

   Only once the section has actually outgrown it. With the result closed the
   two are exactly the same height, so there is nothing to blend and painting a
   fade here would change a hero that was fine — measured: it repainted 6.3% of
   the desktop hero. The widget adds .m26-bg-grown when a result opens and
   takes it off again when the result closes.

   It is an inset shadow on the photograph's own layer rather than an element
   of its own. A separate absolutely-positioned fade needs a z-index to sit
   above the photo, and z-index:1 beats Elementor's container, which is
   z-index:auto — the fade painted over the search card and cut a dark band
   straight through the results. Inside the photo layer it cannot reach the
   content, and the card's backdrop-filter still samples it, which is what
   makes the blend work at all.

   The second rule is for a page where the script did not run: the photo's box
   then comes from the clamp rather than a measurement, so it can fall short of
   the section, and the join wants covering. */
.m26-bg-grown:not(.m26-hero)::before,.m26-hero.m26-bg-grown .m26-hero__overlay{box-shadow:inset 0 -110px 80px -40px #050505}
.m26-hero:not(.m26-bg-pinned)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;background:linear-gradient(180deg,rgba(5,5,5,0),#050505);pointer-events:none;z-index:1}
/* The same fault, in Elementor's markup rather than ours.

   A section with a photo is painted with background-size:cover, so the photo
   is sized by the section, and the section is as tall as its content. The home
   page hero is an Elementor section holding the tyre search; opening a result
   grew it by ~500px and the photograph was redrawn 51.7% larger — measured on
   the live page at 1512px wide.

   The widget's JS measures the section while the result is closed, writes that
   height to --m26-bg-h and adds .m26-bg-pinned. The section then keeps its
   image (Elementor's editor and its own responsive background rules still work
   on it) but stops painting it, and a pseudo-element paints it into a box of
   the pinned height instead. background-image:inherit picks up whichever image
   Elementor resolved, so a per-breakpoint background is respected.

   Under the photo is the section's own background colour, which this design
   already sets to the same near-black the overlay fades to. */
.m26-bg-pinned{overflow:hidden}
/* background-image:none, not background-size:0 0. A zero-sized background
   layer stops Chromium painting the whole background box — the COLOUR goes
   with it, and the hero turned white the moment a result opened. Measured at
   rgb(255,255,255) where rgb(5,5,5) was expected. The image is handed to the
   pseudo-element through --m26-bg-img instead, which the script reads off the
   section before it takes over, so whichever image Elementor picked for this
   breakpoint is the one that gets painted. */
.m26-bg-pinned:not(.m26-hero){background-image:none}
.m26-bg-pinned:not(.m26-hero)::before{content:"";position:absolute;top:0;left:0;right:0;height:var(--m26-bg-h,100%);background-image:var(--m26-bg-img);background-position:inherit;background-repeat:no-repeat;background-size:cover;z-index:0;pointer-events:none}
.m26-hero__inner{position:relative;z-index:2;max-width:var(--m26-maxw);margin:0 auto;padding:190px var(--m26-gutter) 44px;display:flex;flex-direction:column;gap:22px}
.m26-hero__title{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin:0}
.m26-hero__title .l1{font-size:52px;font-weight:800;font-style:italic;color:var(--m26-red);line-height:.92;letter-spacing:-.02em}
.m26-hero__title .l2{font-size:40px;font-weight:800;line-height:1;text-transform:uppercase;color:#fff}
.m26-hero__title .l3{font-size:31px;font-weight:800;line-height:1.05;text-transform:uppercase;color:#fff}
.m26-hero__tag{margin-top:12px;display:inline-block;background:var(--m26-red);color:#fff;font-size:15px;font-weight:800;font-style:italic;letter-spacing:.04em;text-transform:uppercase;padding:7px 16px;transform:skewX(-8deg);border-radius:4px}
.m26-hero__sub{font-size:15.5px;line-height:1.7;color:rgba(255,255,255,.85);max-width:640px;margin:0}
.m26-hero__badge{position:absolute;top:18px;right:0;z-index:3;display:flex;align-items:center;gap:9px;max-width:min(62vw,260px);background:var(--m26-red);border-radius:12px 0 0 12px;padding:9px 13px 9px 10px;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;line-height:1.4;color:#fff}
.m26-hero__badge .dot{width:30px;height:30px;border-radius:50%;background:#fff;color:var(--m26-red);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.m26-hero__feats{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.m26-feat{display:flex;align-items:center;gap:11px}
.m26-feat__ring{width:46px;height:46px;border-radius:50%;border:2px solid rgba(255,255,255,.8);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;flex:0 0 auto;color:#fff}
.m26-feat__label{font-size:12px;font-weight:700;text-transform:uppercase;line-height:1.35;color:#fff}
.m26-hero__reviews{display:inline-flex;align-items:center;gap:12px;align-self:flex-start;border:1.5px solid rgba(220,28,41,.8);border-radius:999px;padding:9px 16px;background:rgba(0,0,0,.5);font-size:12px;font-weight:700;letter-spacing:.04em;color:#fff;flex-wrap:wrap}
.m26-hero__reviews .accent{color:var(--m26-red-soft)}
.m26-callnow{display:inline-flex;align-items:center;gap:14px;align-self:flex-start;color:#fff}
.m26-callnow:hover{color:#fff}
.m26-callnow__circle{width:50px;height:50px;border-radius:50%;background:#fff;color:var(--m26-red);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.m26-callnow__label{font-size:11px;font-weight:700;letter-spacing:.18em;color:rgba(255,255,255,.85);display:block}
.m26-callnow__num{font-size:25px;font-weight:800;line-height:1.15;display:block}

/* ============================================================
   7. Page hero (inner pages)
   ============================================================ */
.m26-phero{position:relative;background:var(--m26-dark);color:#fff;overflow:hidden}
.m26-phero__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42}
.m26-phero__inner{position:relative;z-index:2;max-width:var(--m26-maxw);margin:0 auto;padding:44px var(--m26-gutter);display:flex;flex-direction:column;gap:12px}
.m26-phero h1{color:#fff;margin:0;font-size:var(--m26-h1)}
.m26-phero__sub{color:rgba(255,255,255,.8);margin:0;font-size:15px}
.m26-crumbs{font-size:13px;color:rgba(255,255,255,.7);display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.m26-crumbs.m26-crumbs a{color:rgba(255,255,255,.9)}
.m26-crumbs.m26-crumbs a:hover{color:var(--m26-red-soft)}
.m26-crumbs .sep{opacity:.5}

/* ============================================================
   8. Cards / features / services
   ============================================================ */
.m26-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.m26-card{background:#fff;border-radius:var(--m26-radius);padding:20px 18px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--m26-shadow);text-align:left}
.m26-card h3{font-size:16px;font-weight:700;line-height:1.35;margin:0}
.m26-card p{font-size:13.5px;line-height:1.65;color:var(--m26-text-soft);margin:0}
.m26-card .m26-icon-circle{width:48px;height:48px}

.m26-svc-head{display:flex;flex-direction:column;gap:16px;margin-bottom:28px;text-align:center;align-items:center}
.m26-svc-head .m26-pill{background:#fff;color:var(--m26-red)}
.m26-svc-grid{display:grid;grid-template-columns:1fr;gap:16px}
.m26-svc-card{background:#fff;border-radius:var(--m26-radius);padding:22px 20px;display:flex;flex-direction:column;gap:14px;color:var(--m26-dark)}
.m26-svc-card h3{font-size:19px;font-weight:700;line-height:1.35;margin:0}
.m26-svc-card h3 a{color:inherit}
.m26-svc-card h3 a:hover{color:var(--m26-red)}
.m26-svc-card p{font-size:14px;line-height:1.65;color:var(--m26-text-soft);flex-grow:1;margin:0}
.m26-svc-card img{border-radius:var(--m26-radius-sm);width:100%;aspect-ratio:16/10;object-fit:cover}
.m26-svc-card__more{display:inline-flex;align-items:center;gap:9px;font-size:14.5px;font-weight:700;color:var(--m26-dark)}
.m26-svc-card__more:hover{color:var(--m26-red)}
.m26-svc-card__more .dot{width:22px;height:22px;border-radius:50%;background:var(--m26-dark);color:#fff;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.m26-svc-card__more:hover .dot{background:var(--m26-red)}

/* About / checks */
.m26-about{display:grid;grid-template-columns:1fr;gap:24px;align-items:center}
.m26-about>img,.m26-about__img img{border-radius:var(--m26-radius);width:100%}
.m26-about__text{display:flex;flex-direction:column;gap:14px}
.m26-about__text p{margin:0;font-size:15.5px;line-height:1.75;color:var(--m26-text)}
.m26-about__text strong{color:var(--m26-dark)}
.m26-checks{display:flex;flex-direction:column;gap:12px}
.m26-check{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;line-height:1.6;color:#3c3f41}
.m26-check svg{flex:0 0 auto;margin-top:3px;color:var(--m26-red)}
.m26-section--dark .m26-check{color:rgba(255,255,255,.8)}

/* Tyre size */
.m26-size{display:grid;grid-template-columns:1fr;gap:24px;align-items:center}
.m26-size img{border-radius:var(--m26-radius);width:100%}
.m26-size__text{display:flex;flex-direction:column;gap:16px}
.m26-size__example{font-size:16px;line-height:1.6;font-weight:700;color:var(--m26-dark);margin:0}

/* CTA band */
.m26-cta{display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px}
.m26-cta h2{font-size:24px;font-weight:800;line-height:1.3;margin:0;color:#fff;text-wrap:pretty}

/* Brands */
.m26-brands{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:center}
.m26-brand{background:#fff;border:1px solid var(--m26-line);border-radius:var(--m26-radius-sm);min-height:72px;display:flex;align-items:center;justify-content:center;padding:12px;font-weight:800;color:var(--m26-dark);font-size:14px;letter-spacing:.02em;text-align:center}
.m26-brand img{max-height:40px;width:auto;object-fit:contain}

/* Locations */
.m26-locations{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.m26-loc{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--m26-line);border-radius:999px;padding:11px 16px;font-size:13.5px;font-weight:700;color:var(--m26-dark)}
.m26-loc svg{color:var(--m26-red);flex:0 0 auto}
.m26-loc:hover{border-color:var(--m26-red);color:var(--m26-red)}

/* Steps */
.m26-steps{display:grid;grid-template-columns:1fr;gap:14px;counter-reset:m26step}
.m26-step{background:#fff;border-radius:var(--m26-radius);padding:22px 20px;box-shadow:var(--m26-shadow);position:relative}
.m26-step__num{width:42px;height:42px;border-radius:50%;background:var(--m26-red);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.m26-step h3{font-size:18px;margin:0 0 8px}
.m26-step p{margin:0;font-size:14px;color:var(--m26-text-soft)}

/* FAQ */
.m26-faq{display:flex;flex-direction:column;gap:10px;max-width:900px;margin-inline:auto;width:100%}
.m26-faq__item{background:#fff;border:1px solid var(--m26-line);border-radius:var(--m26-radius-sm);overflow:hidden}
.m26-faq__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;background:transparent;border:0;padding:17px 18px;font-family:inherit;font-size:15.5px;font-weight:700;color:var(--m26-dark);text-align:left;cursor:pointer;line-height:1.45}
.m26-faq__q svg{flex:0 0 auto;color:var(--m26-red);transition:transform .2s}
.m26-faq__item.is-open .m26-faq__q svg{transform:rotate(45deg)}
.m26-faq__a{padding:0 18px;max-height:0;overflow:hidden;transition:max-height .28s ease,padding .28s ease;font-size:14.5px;line-height:1.75;color:var(--m26-text)}
.m26-faq__item.is-open .m26-faq__a{padding:0 18px 18px;max-height:900px}

/* Reviews / testimonials */
.m26-testimonials{display:grid;grid-template-columns:1fr;gap:28px;align-items:center}
.m26-greviews{background:#fff;border-radius:var(--m26-radius);padding:18px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--m26-shadow)}
.m26-greviews__head{background:#f7f7f7;border-radius:var(--m26-radius-sm);padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.m26-google{font-size:19px;font-weight:700}
.m26-google .g1{color:#4285F4}.m26-google .g2{color:#EA4335}.m26-google .g3{color:#FBBC05}.m26-google .g4{color:#34A853}.m26-google .rest{color:#3c4043;font-weight:600}
.m26-greviews__score{display:inline-flex;align-items:center;gap:8px;font-size:18px;font-weight:800;color:var(--m26-dark);margin-top:6px}
.m26-greviews__cta{background:#4285F4;color:#fff;font-size:13px;font-weight:600;border-radius:8px;padding:11px 16px;text-align:center}
.m26-greviews__cta:hover{background:#2b6cd9;color:#fff}
.m26-greviews__grid{display:grid;grid-template-columns:1fr;gap:14px}
.m26-review{background:#f7f7f7;border-radius:var(--m26-radius-sm);padding:20px 18px;display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center}
.m26-review p{font-size:13.5px;line-height:1.65;color:#555;margin:0}
.m26-review .meta{font-size:12px;color:#9aa0a6}
.m26-review .name{font-size:13.5px;font-weight:700;color:var(--m26-dark)}
.m26-review .avatar{width:40px;height:40px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;background:var(--m26-red)}
.m26-testimonials__side{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.m26-testimonials__count{display:flex;align-items:center;gap:18px}
.m26-testimonials__count .num{font-size:38px;font-weight:800;color:var(--m26-red);line-height:1}
.m26-testimonials__count .sep{width:1px;height:36px;background:#dcdcdc}
.m26-avatars{display:inline-flex}
.m26-avatars span{width:38px;height:38px;border-radius:50%;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;border:2.5px solid var(--m26-light);margin-left:-10px;background:var(--m26-red)}

/* Gallery */
.m26-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;width:100%}
.m26-gallery a,.m26-gallery img{border-radius:var(--m26-radius-sm);width:100%;display:block}
.m26-gallery img{aspect-ratio:1/1;object-fit:cover}

/* News */
.m26-news{display:grid;grid-template-columns:1fr;gap:16px;width:100%}
.m26-post-card{background:#fff;border-radius:var(--m26-radius);padding:14px 14px 20px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--m26-shadow);text-align:left;height:100%}
.m26-post-card__img{position:relative}
.m26-post-card__img img{border-radius:var(--m26-radius-sm);width:100%;aspect-ratio:16/9;object-fit:cover}
.m26-post-card__date{position:absolute;top:12px;left:12px;background:var(--m26-red);color:#fff;font-size:11.5px;font-weight:600;border-radius:999px;padding:5px 12px}
.m26-post-card__body{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 6px;flex-grow:1}
.m26-post-card__body h3{font-size:18px;font-weight:700;line-height:1.3;margin:0}
.m26-post-card__body h3 a{color:var(--m26-dark)}
.m26-post-card__body h3 a:hover{color:var(--m26-red)}
.m26-post-card__body p{font-size:14px;line-height:1.6;color:var(--m26-text-soft);margin:8px 0 0}
.m26-post-card__body .go{color:var(--m26-red);flex:0 0 auto}

/* Map */
.m26-map{line-height:0}
.m26-map img{width:100%;display:block;border:0;min-height:240px;object-fit:cover}
/* Google's embed dialog hands out width="600" height="450" whatever you are
   embedding into. In a full-bleed band that is a small box floating in a wide
   strip, so the height is set here rather than trusting the pasted attribute. */
.m26-map iframe{width:100%;display:block;border:0;height:clamp(300px,40vw,480px)}

/* Arrows */
.m26-arrows{display:flex;justify-content:center;gap:12px;margin-top:22px}
.m26-arrows button{width:44px;height:44px;border-radius:50%;background:var(--m26-red);color:#fff;border:0;display:flex;align-items:center;justify-content:center;cursor:pointer}
.m26-arrows button:hover{background:var(--m26-red-dark)}
.m26-arrows button[disabled]{opacity:.35;cursor:default}

/* Rail (horizontal scroll on mobile) */
.m26-rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:6px;scrollbar-width:thin}
.m26-rail>*{scroll-snap-align:start;flex:0 0 84%}
.m26-rail::-webkit-scrollbar{height:6px}
.m26-rail::-webkit-scrollbar-thumb{background:var(--m26-red);border-radius:3px}

/* ============================================================
   9. Tyre search widget (styles shipped with the theme so the
      plugin looks right out of the box; plugin also ships a copy)
   ============================================================ */
.m26-search{width:100%;max-width:620px;background:#fff;border-radius:var(--m26-radius);padding:10px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--m26-shadow-lg);color:var(--m26-dark)}
/* Frosted glass on the search card.
   Theme Settings → Colours & type sets --m26-search-alpha / --m26-search-blur;
   the fallbacks here are what the plugin uses on its own, so the widget looks
   the same with or without the theme.

   Only the CARD goes translucent. The reg field, the selects and the buttons
   stay solid: they carry the text somebody is reading and typing into, and a
   hero photograph behind them is the one thing guaranteed to make that
   unreadable.

   backdrop-filter is not universal. Where it is missing the blur silently does
   nothing, and a 72% card over a busy photo without it is a mess — so the
   @supports block below puts the card back to nearly solid instead. */
.m26-search{
  background:rgba(255,255,255,var(--m26-search-alpha,1));
  border:1px solid var(--m26-search-edge,transparent);
  -webkit-backdrop-filter:blur(var(--m26-search-blur,0)) saturate(140%);
  backdrop-filter:blur(var(--m26-search-blur,0)) saturate(140%);
}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .m26-search{background:rgba(255,255,255,.94)}
}
.m26-search--inline{-webkit-backdrop-filter:none;backdrop-filter:none;background:#fff}
.m26-search__tabs{display:flex;gap:6px;padding:2px 2px 0}
.m26-search__tab{flex:1;border:0;background:transparent;color:var(--m26-search-ink-soft,var(--m26-text-soft));border-radius:999px;padding:9px 10px;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;font-family:inherit}
.m26-search__tab.is-active{background:var(--m26-red);color:#fff}
/* Stacked in one grid cell so the card keeps a constant height and the hero
   does not resize when you switch tabs; align-items:center keeps the shorter
   panel in the middle of that space. Mirrors the plugin's own stylesheet —
   either may be the one that loads, so they have to agree. */
.m26-search__panels{display:grid;grid-template-columns:1fr;align-items:center}
.m26-search__panel{grid-area:1/1;display:flex;flex-direction:column;gap:8px;margin:0}
.m26-search__panel:not(.is-active){visibility:hidden;opacity:0;pointer-events:none}
.m26-search__panel.is-active{visibility:visible;opacity:1;pointer-events:auto}
.m26-search__row{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap}
.m26-search__field{flex:1 1 100%;display:flex;align-items:stretch;border:1.5px solid var(--m26-line);border-radius:var(--m26-radius-sm);overflow:hidden;background:#fff;min-width:0}
.m26-search__field.is-reg{background:#ffd60a;border-color:#e8c200}
.m26-search__plate{background:#003fa3;color:#fff;display:flex;align-items:center;justify-content:center;padding:0 12px;font-size:13px;font-weight:800;flex:0 0 auto}
.m26-search__input{flex:1;border:0;background:transparent;padding:0 14px;font-family:inherit;font-size:16px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--m26-dark);height:50px;outline:none;min-width:0}
.m26-search__input::placeholder{color:rgba(24,28,29,.45);font-weight:600;letter-spacing:.02em}
.m26-search__btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--m26-red);color:#fff;border:0;border-radius:var(--m26-radius-sm);padding:0 22px;height:50px;font-size:13px;font-weight:700;letter-spacing:.07em;cursor:pointer;font-family:inherit;flex:1 1 100%;text-transform:uppercase}
.m26-search__btn:hover{background:var(--m26-red-dark)}
.m26-search__btn[disabled]{opacity:.6;cursor:progress}
.m26-search__selects{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;flex:1 1 100%}
.m26-search__selects select{height:50px;padding-block:0;font-size:15px;font-weight:700}
.m26-search__note{font-size:11.5px;color:var(--m26-search-ink-soft,var(--m26-text-soft));padding:0 4px 4px;line-height:1.5;margin:0}
.m26-search__result{border-top:1px solid var(--m26-line);margin-top:2px;padding:14px 6px 6px;font-size:14px;line-height:1.7;color:var(--m26-text);display:none}
.m26-search__result.is-visible{display:block}
.m26-search__result h4{margin:0 0 8px;font-size:17px}
.m26-search__result .m26-spec{display:grid;grid-template-columns:1fr;gap:6px;margin:10px 0 0;padding:0;list-style:none}
.m26-search__result .m26-spec li{display:flex;gap:10px;align-items:baseline;background:var(--m26-light);border-radius:8px;padding:9px 12px;margin:0;font-size:13.5px}
.m26-search__result .m26-spec b{color:var(--m26-dark);min-width:74px;flex:0 0 auto}
.m26-search__error{color:var(--m26-red);font-weight:700;font-size:13.5px}
.m26-search--inline{box-shadow:none;border:1px solid var(--m26-line);max-width:100%}

/* ============================================================
   10. Forms plugin
   ============================================================ */
.m26-form{display:flex;flex-direction:column;gap:14px;background:#fff;border-radius:var(--m26-radius);padding:20px;box-shadow:var(--m26-shadow)}
.m26-form--bare{box-shadow:none;padding:0;background:transparent}
.m26-form__row{display:grid;grid-template-columns:1fr;gap:14px}
.m26-form__field{display:flex;flex-direction:column}
.m26-form__field .req{color:var(--m26-red)}
.m26-form__hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.m26-form__consent{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.6;color:var(--m26-text-soft);font-weight:500}
.m26-form__consent input{width:18px;height:18px;flex:0 0 auto;margin-top:2px;accent-color:var(--m26-red)}
.m26-form__consent label{font-weight:500;font-size:13px;margin:0;color:inherit}
.m26-form__msg{border-radius:var(--m26-radius-sm);padding:14px 16px;font-size:14.5px;font-weight:600;line-height:1.6;display:none}
.m26-form__msg.is-visible{display:block}
.m26-form__msg--ok{background:#e8f6ec;color:#17692f;border:1px solid #bfe4c9}
.m26-form__msg--err{background:#fdecec;color:#a51520;border:1px solid #f5c3c6}
.m26-form__err{font-size:12.5px;color:var(--m26-red);margin-top:5px;font-weight:600}
.m26-form input.has-error,.m26-form textarea.has-error,.m26-form select.has-error{border-color:var(--m26-red)}

/* ============================================================
   11. Blog / archive / single / comments
   ============================================================ */
.m26-layout{display:grid;grid-template-columns:1fr;gap:34px;padding-block:var(--m26-section-y)}
.m26-entry{max-width:100%}
.m26-entry__meta{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13px;color:var(--m26-text-soft);margin-bottom:18px}
.m26-entry__meta span{display:inline-flex;align-items:center;gap:6px}
.m26-entry__thumb img{border-radius:var(--m26-radius);width:100%;margin-bottom:22px}
.m26-entry__content{font-size:15.5px;line-height:1.85}
.m26-entry__content h2{font-size:23px;margin:1.6em 0 .6em}
.m26-entry__content h3{font-size:19px;margin:1.4em 0 .5em}
.m26-entry__content img{border-radius:var(--m26-radius-sm);margin:1.2em 0;height:auto}
.m26-entry__content figure{margin:1.4em 0}
.m26-entry__content figcaption{font-size:13px;color:var(--m26-text-soft);margin-top:8px;text-align:center}
.m26-entry__content ul,.m26-entry__content ol{margin:0 0 1.2em;padding-left:1.3em}
.m26-entry__content a{text-decoration:underline;text-underline-offset:3px}
.m26-entry__share{display:flex;gap:10px;align-items:center;margin-top:28px;padding-top:22px;border-top:1px solid var(--m26-line);flex-wrap:wrap}
.m26-entry__share span{font-size:13px;font-weight:700;color:var(--m26-dark)}
.m26-entry__share a{width:38px;height:38px;border-radius:50%;background:var(--m26-light);display:inline-flex;align-items:center;justify-content:center}
.m26-entry__share.m26-entry__share a{color:var(--m26-dark)}
.m26-entry__share a:hover{background:var(--m26-red)}
.m26-entry__share.m26-entry__share a:hover{color:#fff}
.m26-postnav{display:grid;grid-template-columns:1fr;gap:12px;margin-top:26px}
.m26-postnav a{background:#fff;border:1px solid var(--m26-line);border-radius:var(--m26-radius-sm);padding:16px 18px;font-weight:700;font-size:14.5px;line-height:1.4}
.m26-postnav.m26-postnav a{color:var(--m26-dark)}
.m26-postnav a small{display:block;font-size:12px;color:var(--m26-text-soft);font-weight:600;margin-bottom:5px;text-transform:uppercase;letter-spacing:.08em}
.m26-postnav a:hover{border-color:var(--m26-red)}
.m26-postnav.m26-postnav a:hover{color:var(--m26-red)}

.m26-sidebar{display:flex;flex-direction:column;gap:20px}
.m26-widget{background:#fff;border:1px solid var(--m26-line);border-radius:var(--m26-radius);padding:20px}
.m26-widget h2,.m26-widget .widget-title{font-size:17px;margin:0 0 14px;padding-bottom:12px;border-bottom:2px solid var(--m26-red);display:inline-block}
.m26-widget ul{list-style:none;padding:0;margin:0}
.m26-widget li{margin-bottom:10px;font-size:14.5px}
.m26-widget.m26-widget a{color:var(--m26-dark)}
.m26-widget.m26-widget a:hover{color:var(--m26-red)}
.m26-widget--cta{background:var(--m26-dark);color:#fff;text-align:center;border-color:var(--m26-dark)}
.m26-widget--cta h2{color:#fff}

.m26-pagination{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.m26-pagination .page-numbers{min-width:42px;height:42px;padding:0 12px;border-radius:10px;background:#fff;border:1px solid var(--m26-line);display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:var(--m26-dark)}
.m26-pagination .page-numbers.current,.m26-pagination .page-numbers:hover{background:var(--m26-red);border-color:var(--m26-red);color:#fff}

.m26-comments{margin-top:40px}
.m26-comments ol{list-style:none;padding:0;margin:0}
.m26-comments .children{list-style:none;padding-left:18px;margin-top:14px}
.m26-comment{background:#fff;border:1px solid var(--m26-line);border-radius:var(--m26-radius-sm);padding:18px;margin-bottom:14px}
.m26-comment .avatar{border-radius:50%;float:left;margin-right:12px}
.m26-comment cite{font-style:normal;font-weight:700;color:var(--m26-dark)}
.m26-comment time{font-size:12.5px;color:var(--m26-text-soft);display:block}

.m26-404{text-align:center;padding-block:64px}
.m26-404 .code{font-size:80px;font-weight:800;color:var(--m26-red);line-height:1}

/* Search results */
.m26-searchform{display:flex;gap:8px}
.m26-searchform input[type=search]{flex:1}

/* ============================================================
   12. Footer + sticky mobile bar
   ============================================================ */
.m26-footer{background:var(--m26-footer);color:rgba(255,255,255,.8);padding:44px 0 26px}
.m26-footer__grid{display:grid;grid-template-columns:1fr;gap:30px}
.m26-footer__brand{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.m26-footer__brand img{height:62px;width:auto}
.m26-footer__about{font-size:14px;line-height:1.75;color:rgba(255,255,255,.65);margin:0}
.m26-footer__social{display:flex;gap:12px}
.m26-footer__social a{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center}
.m26-footer__social.m26-footer__social a{color:#fff}
.m26-footer__social a:hover{border-color:var(--m26-red)}
.m26-footer__social.m26-footer__social a:hover{color:var(--m26-red-soft)}
.m26-footer__contacts{display:grid;grid-template-columns:1fr;gap:16px}
.m26-contact{display:flex;align-items:center;gap:14px}
/* The contact block started life inside the dark footer, so its label and value
   were simply white. [m26_contact] then put the same markup on ordinary white
   pages, where white text on white reads as nothing at all — the Contact page
   showed three pink squares and no phone number.

   Light is now the default and the footer opts into white, rather than the
   other way round. */
.m26-contact .m26-icon-circle{width:44px;height:44px;border-radius:12px;background:rgba(220,28,41,.12);color:var(--m26-red)}
.m26-contact .label{font-size:13px;color:var(--m26-text-soft);display:block}
.m26-contact .value{font-size:16px;font-weight:700;color:var(--m26-dark);word-break:break-word}
.m26-contact a.value:hover{color:var(--m26-red)}

.m26-footer .m26-contact .m26-icon-circle,
.m26-section--dark .m26-contact .m26-icon-circle,
.m26-widget--cta .m26-contact .m26-icon-circle{background:rgba(220,28,41,.18);color:var(--m26-red-soft)}
.m26-footer .m26-contact .label,
.m26-section--dark .m26-contact .label,
.m26-widget--cta .m26-contact .label{color:rgba(255,255,255,.6)}
.m26-footer .m26-contact .value,
.m26-section--dark .m26-contact .value,
.m26-widget--cta .m26-contact .value{color:#fff}
.m26-footer .m26-contact a.value:hover,
.m26-section--dark .m26-contact a.value:hover,
.m26-widget--cta .m26-contact a.value:hover{color:var(--m26-red-soft)}
.m26-footer__cols{display:grid;grid-template-columns:1fr;gap:24px;margin-top:26px}
.m26-footer__col h3{color:#fff;font-size:16px;margin:0 0 12px}
.m26-footer__col ul{list-style:none;padding:0;margin:0;columns:2;column-gap:18px}
.m26-footer__col li{margin-bottom:9px;break-inside:avoid}
.m26-footer__col a{font-size:14px}
.m26-footer__col.m26-footer__col a{color:rgba(255,255,255,.75)}
.m26-footer__col.m26-footer__col a:hover{color:var(--m26-red-soft)}
.m26-footer__rule{height:1px;background:rgba(255,255,255,.1);border:0;margin:26px 0}
.m26-footer__nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 20px;justify-content:center}
.m26-footer__nav a{font-size:14px;font-weight:600}
.m26-footer__nav.m26-footer__nav a{color:rgba(255,255,255,.85)}
.m26-footer__nav.m26-footer__nav a:hover{color:var(--m26-red-soft)}
.m26-copyright{background:var(--m26-red);color:#fff;text-align:center;font-size:12.5px;padding:15px var(--m26-gutter);line-height:1.6}
.m26-copyright a{text-decoration:underline}
.m26-copyright.m26-copyright a{color:#fff}

.m26-stickybar{position:fixed;left:0;right:0;bottom:0;z-index:90;display:grid;grid-template-columns:repeat(3,1fr);background:var(--m26-dark);box-shadow:0 -6px 20px rgba(0,0,0,.18);padding-bottom:env(safe-area-inset-bottom)}
.m26-stickybar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:10px 6px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border-right:1px solid rgba(255,255,255,.1)}
.m26-stickybar.m26-stickybar a{color:#fff}
.m26-stickybar a:last-child{border-right:0}
.m26-stickybar a.is-primary{background:var(--m26-red)}
.m26-stickybar a:hover{opacity:.9}
.m26-stickybar.m26-stickybar a:hover{color:#fff}
body.has-stickybar{padding-bottom:64px}
.m26-totop{position:fixed;right:14px;bottom:76px;z-index:80;width:44px;height:44px;border-radius:50%;background:var(--m26-dark);color:#fff;border:0;display:none;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--m26-shadow-lg)}
.m26-totop.is-visible{display:flex}
.m26-whatsapp{position:fixed;right:14px;bottom:130px;z-index:80;width:50px;height:50px;border-radius:50%;background:#25d366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--m26-shadow-lg)}
.m26-whatsapp:hover{color:#fff;filter:brightness(.95)}

/* ============================================================
   12b. Popup forms
   ============================================================ */
.m26-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:flex-end;justify-content:center;padding:0}
.m26-modal[hidden]{display:none!important}
.m26-modal__backdrop{position:absolute;inset:0;background:rgba(10,12,13,.72);opacity:0;transition:opacity .24s ease;backdrop-filter:blur(2px)}
.m26-modal.is-open .m26-modal__backdrop{opacity:1}
.m26-modal__dialog{position:relative;z-index:1;width:100%;max-width:var(--m26-modal-w,560px);max-height:92vh;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:#fff;color:var(--m26-text);border-radius:var(--m26-radius) var(--m26-radius) 0 0;padding:26px 20px calc(24px + env(safe-area-inset-bottom));box-shadow:0 -10px 60px rgba(0,0,0,.4);transform:translateY(24px);opacity:0;transition:transform .26s cubic-bezier(.2,.8,.3,1),opacity .2s ease}
.m26-modal.is-open .m26-modal__dialog{transform:none;opacity:1}
/* The way out has to stay on screen.

   The dialog is the scroller (overflow-y:auto, max-height:92vh). The close
   button was position:absolute inside it, so it scrolled away with the
   content: on a phone, opening the quote popup and scrolling down to fill the
   form put the X 1,248px above the top of the screen. The backdrop is only a
   thin strip above a 92vh dialog, body scrolling is locked, and a phone has no
   Escape key — so there was no way out of the form at all short of reloading
   the page.

   Sticky instead of absolute: it sits in the flow at the top of the dialog and
   stays pinned there however far the content scrolls. Floated so it does not
   take a row of its own, and pulled back by its own margin so nothing below it
   moves. It gets a filled circle because once the dialog is scrolled it sits
   over form fields, and a transparent glyph over an input reads as an
   accident. 44px, which is the smallest a thumb should have to find. */
.m26-modal__close{position:sticky;top:0;z-index:5;float:right;width:44px;height:44px;margin:-8px -8px 0 0;border:1px solid var(--m26-line);background:#fff;color:var(--m26-text-soft);font-size:28px;line-height:1;cursor:pointer;border-radius:50%;box-shadow:0 2px 10px rgba(0,0,0,.08)}
.m26-modal__close:hover{background:var(--m26-light);color:var(--m26-dark)}
.m26-modal__close:focus-visible{outline:3px solid rgba(220,28,41,.45);outline-offset:2px}
.m26-modal__head{margin-bottom:18px;padding-right:38px}
.m26-modal__title{font-size:23px;font-weight:800;color:var(--m26-dark);margin:0 0 8px;line-height:1.25}
.m26-modal__sub{font-size:14.5px;line-height:1.65;color:var(--m26-text-soft);margin:0}
.m26-modal__phone{margin:12px 0 0;font-size:14px;font-weight:700;color:var(--m26-dark)}
.m26-modal__phone a{color:var(--m26-red);text-decoration:underline;text-underline-offset:3px}
.m26-modal__body .m26-form{box-shadow:none;padding:0;background:transparent}
body.m26-modal-open{overflow:hidden}
@media (prefers-reduced-motion:reduce){
  .m26-modal__dialog{transition:none;transform:none}
  .m26-modal__backdrop{transition:none}
}
@media (min-width:640px){
  .m26-modal{align-items:center;padding:24px}
  .m26-modal__dialog{border-radius:var(--m26-radius);padding:30px 30px 28px;max-height:88vh;box-shadow:0 30px 80px rgba(0,0,0,.45);transform:translateY(14px) scale(.985)}
  .m26-modal.is-open .m26-modal__dialog{transform:none}
  .m26-modal__title{font-size:26px}
}

/* A value carried in from the tyre search, shown so the customer can see we
   already know it rather than wondering why the field is filled. */
.m26-modal__carried{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 16px}
.m26-modal__prefilled{flex:1 1 100%;margin:0;font-size:13.5px;color:var(--m26-text-soft);display:flex;align-items:flex-start;gap:7px}
.m26-modal__prefilled::before{content:"";flex:0 0 auto;width:16px;height:16px;margin-top:1px;border-radius:50%;background:var(--m26-red);-webkit-mask:var(--m26-tick) center/11px no-repeat;mask:var(--m26-tick) center/11px no-repeat}
/* A field we filled in: quietly marked, so it reads as done rather than as an error. */
.m26-form input.is-prefilled,.m26-form textarea.is-prefilled,.m26-form select.is-prefilled{background:#fbfbfb;border-color:#d8d8d8}
.m26-modal__chip{display:inline-flex;align-items:center;gap:7px;background:var(--m26-light);border:1px solid var(--m26-line);border-radius:999px;padding:7px 14px;font-size:13px;font-weight:700;color:var(--m26-dark)}
.m26-modal__chip b{color:var(--m26-red);font-weight:800}

/* ============================================================
   13. WordPress core / editor classes
   ============================================================ */
.alignleft{float:left;margin:0 1.4em 1em 0}
.alignright{float:right;margin:0 0 1em 1.4em}
.aligncenter{margin-inline:auto}
.alignwide{width:100%}
.alignfull{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw)}
.wp-caption{max-width:100%}
.wp-caption-text{font-size:13px;color:var(--m26-text-soft);text-align:center;margin-top:8px}
.sticky,.bypostauthor{}
.wp-block-image img{border-radius:var(--m26-radius-sm)}
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.gallery-item{margin:0!important;width:auto!important}
.gallery img{border-radius:var(--m26-radius-sm);width:100%}
.m26-entry__content .wp-block-button__link{background:var(--m26-red);border-radius:999px;padding:14px 26px;font-weight:700;color:#fff;text-decoration:none}

/* Elementor: neutralise theme container padding inside builder content */
.elementor-page .m26-page-body>.m26-container{max-width:100%;padding:0}
.elementor-widget-container p:last-child{margin-bottom:0}

/* ============================================================
   14. Breakpoints (progressive enhancement upward)
   ============================================================ */
@media (min-width:640px){
  :root{--m26-gutter:24px;--m26-section-y:64px;--m26-h1:38px;--m26-h2:32px}
  .m26-cards{gap:16px}
  .m26-svc-grid{grid-template-columns:repeat(2,1fr)}
  .m26-gallery{grid-template-columns:repeat(3,1fr)}
  .m26-locations{grid-template-columns:repeat(3,1fr)}
  .m26-brands{grid-template-columns:repeat(4,1fr)}
  .m26-steps{grid-template-columns:repeat(2,1fr)}
  .m26-form__row--2{grid-template-columns:1fr 1fr}
  .m26-search__row{flex-wrap:nowrap}
  .m26-search__field{flex:1 1 auto}
  /* flex:1 1 100% made the three selects claim a whole row and pushed the
     button onto a second line, so the size tab stood 166px tall against the
     reg tab's 50px. They fit beside the button on a 620px card. */
  .m26-search__selects{flex:1 1 auto}
  .m26-search__btn{flex:0 0 auto}
  .m26-greviews__grid{grid-template-columns:1fr 1fr}
  .m26-greviews__head{flex-direction:row;align-items:center;justify-content:space-between}
  .m26-postnav{grid-template-columns:1fr 1fr}
  .m26-footer__contacts{grid-template-columns:1fr 1fr}
  .m26-footer__cols{grid-template-columns:repeat(2,1fr)}
  .m26-hero__feats{grid-template-columns:repeat(4,1fr)}
  .m26-feat{flex-direction:column;text-align:center;gap:8px}
  .m26-search__result .m26-spec{grid-template-columns:1fr 1fr}
}
@media (min-width:782px){
  :root{--m26-section-y:76px;--m26-h1:42px;--m26-h2:36px;--m26-body:16px}
  .m26-topbar__social{display:flex}
  .m26-topbar__inner{justify-content:space-between}
  .m26-news{grid-template-columns:1fr 1fr}
  .m26-cards{grid-template-columns:repeat(2,1fr);gap:20px}
  .m26-card{padding:28px 24px}
  .m26-card h3{font-size:19px}
  .m26-about{grid-template-columns:1fr 1fr;gap:40px}
  .m26-size{grid-template-columns:1fr 1fr;gap:40px}
  .m26-cta{flex-direction:row;justify-content:space-between;text-align:left;gap:40px}
  .m26-cta h2{font-size:30px}
  .m26-hero__inner{padding-top:240px}
  .m26-hero__title .l1{font-size:70px}
  .m26-hero__title .l2{font-size:56px}
  .m26-hero__title .l3{font-size:43px}
  .m26-hero__tag{font-size:20px;padding:9px 22px}
  .m26-callnow__num{font-size:31px}
  .m26-phero__inner{padding-block:60px}
  .m26-steps{grid-template-columns:repeat(4,1fr)}
  .m26-locations{grid-template-columns:repeat(4,1fr)}
  .m26-gallery{grid-template-columns:repeat(4,1fr)}
  .m26-rail>*{flex:0 0 46%}
}
@media (min-width:1024px){
  :root{--m26-section-y:88px;--m26-h1:48px;--m26-h2:40px}
  .m26-header__cta{display:inline-flex}
  .m26-burger{display:none}
  .m26-nav{display:block;position:static;box-shadow:none;max-height:none;overflow:visible;background:transparent;flex:1 1 auto;min-width:0}
  /* A long menu shrinks its gaps before it ever wraps to a second row. */
  .m26-nav ul{display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;gap:clamp(12px,1.6vw,26px);padding:0}
  .m26-nav li{border:0;flex:0 0 auto}
  .m26-nav a{padding:6px 0;font-size:clamp(13px,1.05vw,15px)}
  /* The corner badge belongs to the phone layout — on desktop the headline
     already says it, and an absolutely positioned badge overhangs the edge. */
  .m26-hero__badge{display:none}
  .m26-nav .sub-menu{display:none;position:absolute;top:100%;left:0;min-width:230px;background:#fff;box-shadow:var(--m26-shadow-lg);border-radius:0 0 var(--m26-radius-sm) var(--m26-radius-sm);padding:8px 0;z-index:70}
  .m26-nav li:hover>.sub-menu,.m26-nav li:focus-within>.sub-menu{display:block}
  .m26-nav .sub-menu li{border-bottom:1px solid #f3f3f3}
  .m26-nav .sub-menu li:last-child{border-bottom:0}
  .m26-nav .sub-menu a{padding:11px 18px;font-weight:600}
  /* Fifteen locations in one 230px column is taller than most laptop screens.
     The count comes from the menu itself, so this scales if areas are added. */
  /* max-content, not 1fr. The labels are nowrap, and a 1fr track takes an
     equal share of a width that was never measured against them — so
     "24 Hour Emergency Call Out" overflowed its 178px column and printed on
     top of the item beside it.

     width:max-content matters as much as the track definition. The dropdown is
     absolutely positioned inside a narrow <li>, so its shrink-to-fit width was
     resolved against that ~132px containing block; the tracks were then sized
     to fit the container and both collapsed to their 178px minimum, max-content
     or not. Sizing the container to its content first is what lets the tracks
     grow. */
  .m26-nav .m26-menu--tall>.sub-menu,
  .m26-nav .m26-menu--wide>.sub-menu{display:none;grid-template-columns:repeat(2,minmax(178px,max-content));gap:0 4px;padding:10px 8px;border-radius:0 0 var(--m26-radius-sm) var(--m26-radius-sm);width:max-content;max-width:min(92vw,760px)}
  .m26-nav .m26-menu--wide>.sub-menu{grid-template-columns:repeat(3,minmax(168px,max-content))}
  .m26-nav .m26-menu--tall:hover>.sub-menu,.m26-nav .m26-menu--tall:focus-within>.sub-menu,
  .m26-nav .m26-menu--wide:hover>.sub-menu,.m26-nav .m26-menu--wide:focus-within>.sub-menu{display:grid}
  .m26-nav .m26-menu--tall>.sub-menu li,.m26-nav .m26-menu--wide>.sub-menu li{border-bottom:0}
  .m26-nav .m26-menu--tall>.sub-menu a,.m26-nav .m26-menu--wide>.sub-menu a{padding:9px 12px;border-radius:8px;white-space:nowrap}
  .m26-nav .m26-menu--tall>.sub-menu a:hover,.m26-nav .m26-menu--wide>.sub-menu a:hover{background:var(--m26-light)}
  /* Near the right-hand end of the menu a wide panel would run off screen. */
  .m26-nav .sub-menu.is-flipped{left:auto;right:0}
  .m26-subtoggle{display:none}
  .m26-header__logo img{height:58px}
  /* Wide: the photograph sits in the right 64% and the darkening runs sideways
     instead of down. Its height is still viewport-anchored, for the same
     reason — and here it matters more, because with a 64%-wide box it is the
     HEIGHT that drives object-fit:cover, so the section growing was the only
     thing deciding how big the van was drawn. */
  .m26-hero__media{width:64%;left:auto;right:0;object-position:right center;height:var(--m26-bg-h,clamp(600px,82vh,900px))}
  .m26-hero__overlay{height:var(--m26-bg-h,clamp(600px,82vh,900px));background:linear-gradient(90deg,#050505 0%,#050505 30%,rgba(5,5,5,.75) 46%,rgba(5,5,5,0) 64%)}
  .m26-hero__inner{padding:80px var(--m26-gutter);gap:30px}
  .m26-svc-grid{grid-template-columns:repeat(4,1fr)}
  .m26-cards{grid-template-columns:repeat(4,1fr)}
  .m26-svc-head{flex-direction:row;justify-content:space-between;align-items:flex-end;text-align:left;gap:60px;margin-bottom:46px}
  .m26-svc-head__right{display:flex;flex-direction:column;gap:22px;max-width:620px;align-items:flex-start}
  .m26-testimonials{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:50px}
  .m26-gallery{grid-template-columns:repeat(5,1fr)}
  .m26-footer__grid{grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:60px;align-items:center}
  .m26-footer__cols{grid-template-columns:repeat(4,1fr)}
  .m26-footer__col ul{columns:1}
  .m26-layout--sidebar{grid-template-columns:minmax(0,1fr) 330px;gap:44px}
  .m26-stickybar{display:none}
  body.has-stickybar{padding-bottom:0}
  .m26-totop{bottom:20px}
  .m26-whatsapp{bottom:76px}
  .m26-rail{display:grid;overflow:visible}
  .m26-rail>*{flex:none}
}
@media (min-width:1280px){
  :root{--m26-section-y:96px;--m26-h1:54px;--m26-h2:44px;--m26-gutter:28px}
  .m26-hero__title .l1{font-size:96px}
  .m26-hero__title .l2{font-size:80px}
  .m26-hero__title .l3{font-size:62px}
  .m26-hero__tag{font-size:24px;padding:10px 26px}
  .m26-callnow__num{font-size:34px}
  .m26-about{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:80px}
  .m26-size{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:80px}
  .m26-icon-circle{width:66px;height:66px}
  .m26-hero__feats{gap:30px}
  .m26-feat__ring{width:62px;height:62px;font-size:28px}
}

/* ============================================================
   15. Print
   ============================================================ */
@media print{
  .m26-topbar,.m26-nav,.m26-burger,.m26-stickybar,.m26-totop,.m26-whatsapp,.m26-footer__social,.m26-search,.m26-arrows{display:none!important}
  body{color:#000;background:#fff;font-size:12pt}
  .m26-section{padding-block:12pt}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
}

/* The tyre size picker inside a popup, when the vehicle has several options. */
.m26-size-pick{width:100%;font:inherit;font-size:16px;padding:14px 40px 14px 16px;border:1px solid var(--m26-line);border-radius:var(--m26-radius-sm);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355585a' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") right 14px center/16px no-repeat;-webkit-appearance:none;appearance:none;color:var(--m26-dark);font-weight:600}
.m26-size-pick:focus{border-color:var(--m26-red);box-shadow:0 0 0 3px rgba(220,28,41,.12);outline:none}

/* ------------------------------------------------------------------
   The theme's own <button> chrome, defended against Elementor's kit.

   Elementor turns the kit's button settings into

     .elementor-kit-N button,
     .elementor-kit-N input[type="button"],
     .elementor-kit-N input[type="submit"],
     .elementor-kit-N .elementor-button { background; padding; radius; colour }

   at specificity 0,1,1 — and that `button` matches EVERY button on the page,
   not just an Elementor button widget. Measured on the live site: the burger,
   the submenu chevrons, back-to-top, the modal close, the FAQ questions and
   both search controls were all wearing a red pill with 16px 32px of padding.
   The icon buttons became red blobs with their icon lost inside, which is what
   "the arrows are missing" was.

   Each class is doubled to score 0,2,0 and win. Only the four properties the
   kit sets are restated, and none of these has a breakpoint override of those
   properties — css-specificity.php enforces that, because a doubled rule that
   carries something @media changes is how the navigation broke in 6.4.
   ------------------------------------------------------------------ */
.m26-burger.m26-burger{background:#fff;padding:0;border-radius:10px;color:var(--m26-dark)}
.m26-subtoggle.m26-subtoggle{background:transparent;padding:0;border-radius:0;color:var(--m26-dark)}
.m26-totop.m26-totop{background:var(--m26-dark);padding:0;border-radius:50%;color:#fff}
.m26-modal__close.m26-modal__close{background:#fff;padding:0;border-radius:50%;color:var(--m26-text-soft);border:1px solid var(--m26-line)}
.m26-faq__q.m26-faq__q{background:transparent;padding:17px 18px;border-radius:0;color:var(--m26-dark)}
.m26-search__tab.m26-search__tab{background:transparent;padding:9px 10px;border-radius:999px;color:var(--m26-search-ink-soft,var(--m26-text-soft))}
.m26-search__tab.m26-search__tab.is-active{background:var(--m26-red);color:#fff}
.m26-search__btn.m26-search__btn{background:var(--m26-red);padding:0 22px;border-radius:var(--m26-radius-sm);color:#fff}
.m26-search__btn.m26-search__btn:hover{background:var(--m26-red-dark)}

/* ============================================================
   Tyre size picker (quote popup)

   The customer used to get a text box with one size already in it and no way
   of knowing the car came with three. A size is also four numbers that mean
   nothing as one string — "225/50R17 94W" is only checkable against a sidewall
   once it is laid out under Width, Profile and Rim.

   Doubled throughout: these are <button> elements, and Elementor's kit styles
   every button on the page at 0,1,1. See the kit note further up.
   ============================================================ */
/* The size fields sit in a two-column row, so the picker was inserted into
   that grid and took one column — half width, with the box it replaces beside
   it. It spans the row instead. Harmless where there is no grid. */
.m26-sizepick{margin:0 0 18px;grid-column:1/-1}
.m26-sizepick__title{margin:0 0 4px;font-size:15px;font-weight:700;color:var(--m26-dark)}
.m26-sizepick__hint{margin:0 0 10px;font-size:13px;line-height:1.55;color:var(--m26-text)}
/* align-items:start, or every card in a row is as tall as the tallest — a
   staggered option carries two rows of numbers and left the single-size cards
   beside it with a hole in the bottom half. */
/* Front / Rear. A segmented control, big enough to hit with a thumb, and told
   apart by fill as well as colour so it survives a colourblind reader. */
.m26-sizepick__axles{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:0 0 10px;padding:4px;background:var(--m26-light);border-radius:999px}
.m26-sizepick__axletab{cursor:pointer}
.m26-sizepick__axletab.m26-sizepick__axletab{background:transparent;color:var(--m26-dark);border:0;border-radius:999px;padding:11px 14px;margin:0;font:inherit;font-size:14px;font-weight:800;letter-spacing:.02em;text-transform:none}
.m26-sizepick__axletab.m26-sizepick__axletab.is-active{background:var(--m26-dark);color:#fff}
.m26-sizepick__axletab:focus-visible{outline:3px solid rgba(220,28,41,.45);outline-offset:2px}
/* The end that is not on the card right now. Never hidden: the van carries it. */
.m26-sizepick__pair{font-size:12px;font-weight:700;color:var(--m26-text)}
.m26-sizepick__list{display:grid;gap:10px;grid-template-columns:1fr;align-items:start}
@media (min-width:560px){.m26-sizepick__list{grid-template-columns:1fr 1fr}}
/* Layout in a single class, so a breakpoint can still override it. A doubled
   rule carrying layout beats this file's own @media blocks, because @media adds
   no specificity — that is the 1.7.3 regression that put mobile nav padding on
   the desktop menu. Only what Elementor's kit takes off a <button> is doubled. */
.m26-sizepick__card{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:7px;width:100%;text-align:left;cursor:pointer;transition:border-color .12s,box-shadow .12s}
.m26-sizepick__card:focus-visible{outline:3px solid rgba(220,28,41,.45);outline-offset:2px}
/* The right-hand padding is reserved whether or not this card is the chosen
   one, so the numbers do not shift sideways when the tick appears. */
.m26-sizepick__card.m26-sizepick__card{background:#fff;color:var(--m26-dark);border:1.5px solid var(--m26-line);border-radius:14px;padding:14px 32px 12px 14px;margin:0;font:inherit;letter-spacing:normal;text-transform:none}
.m26-sizepick__card.m26-sizepick__card:hover{border-color:var(--m26-red)}
.m26-sizepick__card.m26-sizepick__card.is-active{border-color:var(--m26-red);box-shadow:inset 0 0 0 1.5px var(--m26-red)}
/* The chosen card is marked by more than colour: a tick, for anyone who cannot
   see the red ring. */
.m26-sizepick__card.is-active::after{content:"✓";position:absolute;top:10px;right:12px;font-size:15px;font-weight:800;color:var(--m26-red);line-height:1}
.m26-sizepick__flag{align-self:flex-start;background:var(--m26-dark);color:#fff;border-radius:999px;padding:3px 10px;font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;line-height:1.5}
/* The numbers on a grid so front and rear line up column for column — the only
   reason to show both ends is that they can be compared, and as a flex row the
   labelled line ran wider than the bare one. */
.m26-sizepick__grid{display:grid;grid-template-columns:auto auto auto auto 1fr;align-items:baseline;column-gap:7px;row-gap:1px}
.m26-sizepick__grid--axled{grid-template-columns:auto auto auto auto auto 1fr}
.m26-sizepick__head{font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--m26-text);line-height:1.4}
/* Front and Rear read as labels on the choice, not as small print beside it:
   a solid chip for the front, an outlined one for the rear, so which end is
   which is legible at a glance and without relying on colour. */
.m26-sizepick__axle{align-self:center;justify-self:start;min-width:52px;text-align:center;font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;line-height:1.6;border-radius:999px;padding:2px 8px;margin-right:4px;background:var(--m26-dark);color:#fff;border:1.5px solid var(--m26-dark)}
.m26-sizepick__axle--rear{background:transparent;color:var(--m26-dark)}
/* The blank cell that holds the column open on the labelled row. */
.m26-sizepick__grid--axled .m26-sizepick__head:first-child{min-width:52px}
.m26-sizepick__num{font-size:20px;font-weight:800;color:var(--m26-dark);line-height:1.2}
.m26-sizepick__sep{font-size:18px;font-weight:700;color:var(--m26-line);line-height:1.2}
.m26-sizepick__whole{grid-column:span 4;font-size:18px;font-weight:800;color:var(--m26-dark);line-height:1.2}
.m26-sizepick__spacer{display:none}
/* The load and speed rating: present, ordered from, and not competing with the
   three numbers a customer reads off a sidewall. */
.m26-sizepick__rating{font-size:12.5px;font-weight:700;color:var(--m26-text);line-height:1.2;justify-self:start}
/* A staggered option carries two axles and needs the width. */
@media (min-width:560px){.m26-sizepick__card--wide{grid-column:1/-1}}
/* A drawn sidewall, so Width, Profile and Rim mean something before the
   customer has looked at the tyre. */
/* The supplied sidewall illustration. White rather than the light grey the
   panel used to be: the drawing's own background is white and the two did not
   meet cleanly. */
.m26-sizepick__walls{display:flex;flex-direction:column;align-items:center;gap:4px;margin:12px 0 0;padding:10px 12px 8px;border:1px solid var(--m26-line);border-radius:14px;background:#fff}
.m26-sizepick__wall{display:block;width:100%;max-width:440px;height:auto}
/* The drawn stand-in, used only if the image cannot be fetched. */
.m26-sizepick__wallfallback{width:100%;max-width:340px;color:var(--m26-dark)}
.m26-sizepick__wallfallback svg{display:block;width:100%;height:auto}
.m26-sizepick__wallnote{font-size:11.5px;line-height:1.5;text-align:center;color:var(--m26-text)}
.m26-sizepick__note{font-size:11.5px;letter-spacing:.03em;text-transform:uppercase;color:var(--m26-text)}
.m26-sizepick__check{margin:10px 0 0;font-size:12.5px;line-height:1.5;color:var(--m26-text)}
.m26-sizepick__other{display:inline-block;cursor:pointer;text-underline-offset:3px}
.m26-sizepick__other.m26-sizepick__other{background:none;border:0;padding:6px 0 0;margin:0;font:inherit;font-size:13px;font-weight:700;letter-spacing:normal;text-transform:none;color:var(--m26-red);text-decoration:underline}
.m26-sizepick__other.m26-sizepick__other:hover{color:var(--m26-red-dark,#b3141f)}
.m26-sizepick.is-typing .m26-sizepick__other{display:none}
@media (prefers-reduced-motion:reduce){.m26-sizepick__card{transition:none}}