/* =============================================================================
   CBR Wheels — base layer, on every page.
   What the shared header and footer need: the two Barlow faces, the colour
   tokens, the contact strip, the phone call button, buttons and the footer.
   header.php links this on every page (index.php links it in the head instead).
   The homepage's own look lives in cbr-theme.css, which loads after this.
   ========================================================================== */

/* Barlow, self-hosted. From Google it arrived after first paint, so the hero
   headline drew in the system font, then jumped when Barlow swapped in. Local
   and preloaded it is usually there before the first frame. When it is not, the
   fallback faces below are Arial scaled to Barlow's measured width and line
   height, so the swap changes the letterforms but moves nothing. */
@font-face{font-family:'Barlow Condensed';font-weight:500;font-display:swap;src:url(../fonts/barlow-condensed-500.woff2) format('woff2');}
@font-face{font-family:'Barlow Condensed';font-weight:600;font-display:swap;src:url(../fonts/barlow-condensed-600.woff2) format('woff2');}
@font-face{font-family:'Barlow Condensed';font-weight:700;font-display:swap;src:url(../fonts/barlow-condensed-700.woff2) format('woff2');}
@font-face{font-family:'Barlow';font-weight:400;font-display:swap;src:url(../fonts/barlow-400.woff2) format('woff2');}
@font-face{font-family:'Barlow';font-weight:500;font-display:swap;src:url(../fonts/barlow-500.woff2) format('woff2');}
@font-face{font-family:'Barlow';font-weight:600;font-display:swap;src:url(../fonts/barlow-600.woff2) format('woff2');}
/* Measured in the browser: Barlow Condensed 700 is 87.5% the width of Arial
   Narrow Bold; Barlow 400 is 91.2% of Arial. Ascent 1.0em, descent 0.2em. */
@font-face{font-family:'CBR Display Fallback';src:local('Arial Narrow Bold'),local('ArialNarrow-Bold'),local('Arial Narrow');
  font-weight:700;size-adjust:87.5%;ascent-override:114.3%;descent-override:22.9%;line-gap-override:0%;}
@font-face{font-family:'CBR Body Fallback';src:local('Arial'),local('ArialMT');
  size-adjust:91.2%;ascent-override:109.6%;descent-override:21.9%;line-gap-override:0%;}

:root{
  --cbr-ink:#111316;
  --cbr-ink-2:#1B1F24;
  --cbr-ink-soft:#5A626D;
  --cbr-rule:#D8D4D0;
  --cbr-bay:#F1EFEE;
  --cbr-red:var(--aq-common-red,#DE1518);
  --cbr-red-deep:var(--aq-common-red-deep,#C0070A);
  --cbr-hivis:#FF9C05;
  --cbr-ease:cubic-bezier(.22,.61,.36,1);
  --cbr-ease-out:cubic-bezier(.16,1,.3,1);
  --cbr-display:'Barlow Condensed','CBR Display Fallback',sans-serif;
  --cbr-body:'Barlow','CBR Body Fallback',sans-serif;
}


/* --- Contact strip -------------------------------------------------------
   Was flush to the right edge and clipped the address. Now it sits on the same
   container as the rest of the site, address left, call detail right. */
.cbr-callbar{background:var(--cbr-ink);color:#C8CDD4;font-family:var(--cbr-body);
  font-size:13px;line-height:1.2;border-bottom:1px solid rgba(255,255,255,.06);}
.cbr-callbar-inner{max-width:1750px;margin:0 auto;padding:10px 40px;
  display:flex;flex-wrap:wrap;gap:8px 26px;align-items:center;justify-content:space-between;}
.cbr-callbar a{color:#C8CDD4;text-decoration:none;}
.cbr-callbar-left{display:flex;align-items:center;gap:26px;min-width:0;}
.cbr-callbar-right{display:flex;align-items:center;gap:18px;flex-shrink:0;}
.cbr-callbar-addr{display:inline-flex;align-items:center;gap:7px;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cbr-callbar-addr:hover{color:#fff;}
.cbr-callbar-item{opacity:.9;white-space:nowrap;}
.cbr-callbar-phone{display:inline-flex;align-items:center;gap:8px;color:#fff !important;
  font-weight:600;font-size:14.5px;letter-spacing:.01em;transition:color .18s var(--cbr-ease);}
.cbr-callbar-phone:hover{color:var(--cbr-red) !important;}
.cbr-callbar-phone svg{color:var(--cbr-red);}
.cbr-callbar-sep{width:1px;height:14px;background:rgba(255,255,255,.14);}
@media (max-width:1199px){ .cbr-callbar-addr{display:none;} }
@media (max-width:767px){
  .cbr-callbar-inner{justify-content:center;padding:8px 16px;gap:6px 14px;font-size:12.5px;}
  .cbr-callbar-left{display:none;}
  .cbr-callbar-sep{display:none;}
}

/* Fixed call button, phones only */
.cbr-call-fab{display:none;}
@media (max-width:767px){
  .cbr-call-fab{display:inline-flex;align-items:center;gap:8px;position:fixed;z-index:1000;
    left:50%;transform:translateX(-50%);bottom:calc(14px + env(safe-area-inset-bottom,0px));
    background:var(--cbr-red);color:#fff;font-family:var(--cbr-body);font-weight:600;font-size:15px;
    text-decoration:none;padding:13px 26px;border-radius:999px;
    box-shadow:0 8px 26px rgba(222,21,24,.42);}
  .cbr-call-fab:active{transform:translateX(-50%) scale(.97);}
  .cbr-call-fab:focus-visible{outline:3px solid #fff;outline-offset:2px;}
}


.cbr-eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--cbr-body);
  font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--cbr-red);margin-bottom:10px;}
.cbr-eyebrow::before{content:"";width:26px;height:2px;background:var(--cbr-red);}

.cbr-btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--cbr-body);
  font-weight:600;font-size:15px;letter-spacing:.02em;text-decoration:none;padding:15px 30px;
  border-radius:99px;transition:transform .18s var(--cbr-ease),background-color .18s var(--cbr-ease),
  color .18s var(--cbr-ease),box-shadow .18s var(--cbr-ease);}
.cbr-btn-red{background:var(--cbr-red);color:#fff;box-shadow:0 8px 24px rgba(222,21,24,.3);}
.cbr-btn-red:hover{background:var(--cbr-red-deep);color:#fff;transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(222,21,24,.4);}
.cbr-btn-ghost{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.38);
  backdrop-filter:blur(6px);}
.cbr-btn-ghost:hover{background:#fff;color:var(--cbr-ink);transform:translateY(-2px);}
.cbr-btn:active{transform:translateY(0);}

.cbr-btn-dark{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.3);}
.cbr-btn-dark:hover{background:#fff;color:var(--cbr-ink);}

/* =============================================================================
   Footer
   ========================================================================== */
.cbr-footer{position:relative;background:var(--cbr-ink);color:#A8B0BA;
  font-family:var(--cbr-body);overflow:hidden;}
.cbr-footer-grid{position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 65%);
          mask-image:linear-gradient(180deg,#000,transparent 65%);}
.cbr-footer .container{position:relative;z-index:2;}

.cbr-footer-call{border-bottom:1px solid rgba(255,255,255,.08);
  background:linear-gradient(90deg,rgba(222,21,24,.14),transparent 62%);}
.cbr-footer-call-inner{display:flex;flex-wrap:wrap;gap:22px;align-items:center;
  justify-content:space-between;padding:40px 0;}
.cbr-footer-call-title{font-family:var(--cbr-display) !important;color:#fff;font-weight:700;
  text-transform:uppercase;font-size:clamp(23px,3vw,38px);line-height:1.02;margin:0;max-width:18ch;}
.cbr-footer-call-actions{display:flex;flex-wrap:wrap;gap:12px;}

.cbr-footer-main{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:44px;padding:56px 0 40px;}
.cbr-footer-logo{max-width:150px;height:auto;margin-bottom:18px;}
.cbr-footer-blurb{font-size:14.5px;line-height:1.65;max-width:34ch;margin:0 0 20px;color:#98A0AA;}
.cbr-footer-social{display:flex;gap:10px;}
.cbr-footer-social a{width:38px;height:38px;display:grid;place-items:center;color:#C6CCD4;
  border:1px solid rgba(255,255,255,.14);border-radius:2px;
  transition:background-color .2s var(--cbr-ease),color .2s var(--cbr-ease),transform .2s var(--cbr-ease);}
.cbr-footer-social a:hover{background:var(--cbr-red);border-color:var(--cbr-red);color:#fff;transform:translateY(-2px);}

.cbr-footer-head{font-family:var(--cbr-body);font-size:11.5px;font-weight:600;letter-spacing:.17em;
  text-transform:uppercase;color:#fff;margin:0 0 18px;padding-bottom:12px;position:relative;}
.cbr-footer-head::after{content:"";position:absolute;left:0;bottom:0;width:26px;height:2px;background:var(--cbr-red);}
.cbr-footer-links{list-style:none;padding:0;margin:0;display:grid;gap:11px;}
.cbr-footer-links a{color:#A8B0BA;text-decoration:none;font-size:14.5px;
  display:inline-block;transition:color .18s var(--cbr-ease),transform .18s var(--cbr-ease);}
.cbr-footer-links a:hover{color:#fff;transform:translateX(4px);}

.cbr-footer-phone{display:inline-block;font-family:var(--cbr-display);font-size:29px;font-weight:700;
  color:#fff;text-decoration:none;letter-spacing:.01em;font-variant-numeric:tabular-nums;margin-bottom:10px;}
.cbr-footer-phone:hover{color:var(--cbr-red);}
.cbr-footer-line{display:block;font-size:14.5px;color:#98A0AA;text-decoration:none;margin-bottom:7px;max-width:30ch;}
a.cbr-footer-line:hover{color:#fff;}
.cbr-footer-map{border-bottom:1px solid transparent;}
.cbr-footer-map:hover{border-bottom-color:rgba(255,255,255,.3);}

.cbr-footer-base{display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:space-between;
  align-items:center;padding:20px 0 26px;border-top:1px solid rgba(255,255,255,.08);
  font-size:13px;color:#79818C;}
.cbr-footer-base a{color:#79818C;text-decoration:none;}
.cbr-footer-base a:hover{color:#fff;}

@media (max-width:991px){
  .cbr-footer-main{grid-template-columns:1fr 1fr;gap:34px;padding:42px 0 30px;}
  .cbr-footer-brand{grid-column:1/-1;}
  .cbr-footer-call-inner{padding:30px 0;}
  .cbr-footer-call-actions .cbr-btn{flex:1 1 auto;justify-content:center;}
}
@media (max-width:575px){
  .cbr-footer-main{grid-template-columns:1fr;}
  .cbr-footer{padding-bottom:78px;}   /* clear of the fixed call button */
}


/* --- Footer wordmark -------------------------------------------------------- */
.cbr-footer-mark{position:relative;z-index:1;font-family:var(--cbr-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(64px,17.5vw,300px);line-height:.78;letter-spacing:-.02em;text-align:center;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.14);margin:10px 0 -.08em;user-select:none;
  overflow:hidden;}
.cbr-footer-mark > span{display:block;will-change:transform;}
.cbr-footer-mark b{font-weight:700;color:rgba(255,255,255,.06);-webkit-text-stroke:0;}


/* main.css forces Lato !important onto every a, p, span and li, and its heading
   face onto anything whose class contains "title". Inside the shared header
   strip and footer, the theme's faces win instead. */
.cbr-callbar a,.cbr-callbar span,.cbr-footer a,.cbr-footer p,.cbr-footer span,.cbr-footer li,
.cbr-footer button,.cbr-call-fab,.cbr-btn{font-family:var(--cbr-body) !important;}
.cbr-footer .cbr-footer-call-title,.cbr-footer .cbr-footer-phone{font-family:var(--cbr-display) !important;}
.cbr-footer-mark span,.cbr-footer-mark b{font-family:inherit !important;}
.cbr-footer-head{font-family:var(--cbr-body) !important;}

/* --- Tyre size picker -------------------------------------------------------
   Width / profile / rim, laid out the way it reads on the sidewall. Dark by
   default (the homepage search band); --stack is the light sidebar version. */
.cbr-size{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 14px;width:100%;font-family:var(--cbr-body);}
.cbr-size-fields{display:flex;align-items:flex-end;gap:8px;flex:1 1 420px;min-width:0;}
.cbr-size-field{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0;margin:0;}
.cbr-size-field > span{font:600 11px/1 var(--cbr-body) !important;letter-spacing:.16em;text-transform:uppercase;color:#98A0AA;}
.cbr-size-field select{height:52px;width:100%;border-radius:10px;border:1px solid rgba(255,255,255,.18);
  background:#1B1F24;color:#fff;padding:0 12px;font:600 17px var(--cbr-body);font-variant-numeric:tabular-nums;
  appearance:auto;cursor:pointer;}
.cbr-size-field select:focus-visible{outline:2px solid var(--cbr-red);outline-offset:2px;}
.cbr-size-sep{font-family:var(--cbr-display);font-size:28px;font-weight:700;line-height:52px;color:var(--cbr-red);}
.cbr-size-go{height:52px;justify-content:center;flex:0 0 auto;border:0;cursor:pointer;}
.cbr-size-go:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none;}
.cbr-size-hint{flex-basis:100%;margin:0;font-size:13px;color:#98A0AA;}
.cbr-size-hint b{color:#fff;font-weight:600;letter-spacing:.02em;}
.cbr-size-empty{margin:0;font-size:14.5px;line-height:1.55;color:#98A0AA;}
.cbr-size-empty a{color:inherit;font-weight:600;}
.cbr-size--stack .cbr-size-fields{flex-direction:column;align-items:stretch;flex-basis:100%;gap:12px;}
.cbr-size--stack .cbr-size-sep{display:none;}
.cbr-size--stack .cbr-size-field select{background:#fff;color:var(--cbr-ink);border-color:var(--cbr-rule);height:46px;font-size:16px;}
.cbr-size--stack .cbr-size-field > span{color:var(--cbr-ink-soft);}
.cbr-size--stack .cbr-size-go{width:100%;height:48px;}
.cbr-size--stack .cbr-size-hint{color:var(--cbr-ink-soft);}
.cbr-size--stack .cbr-size-hint b{color:var(--cbr-ink);}
.cbr-size-widget .cbr-size-empty{color:var(--cbr-ink-soft);}
@media (max-width:575px){
  .cbr-size-fields{flex-basis:100%;}
  .cbr-size-go{width:100%;}
  .cbr-size-sep{display:none;}
}

/* =============================================================================
   Shared by every page: type, header, cards, section headings, filters, motion
   hooks. Moved here from the homepage layer when the theme went site-wide.
   ========================================================================== */
/* --- Type ---------------------------------------------------------------- */
.aq-section-title,.aq-product-title,.cbr-display{
  font-family:var(--cbr-display) !important;letter-spacing:.004em;}
.aq-section-title{line-height:1.02;}
/* The template shouts every product name and then clamps the box to 56px to
   contain the overflow, cutting long wheel names in half. */
.aq-product-title{text-transform:none !important;height:auto !important;min-height:2.5em;
  font-size:19px !important;font-weight:600;letter-spacing:.005em;}

.cbr-spec{font-family:var(--cbr-body);font-variant-numeric:tabular-nums;
  font-size:12.5px;letter-spacing:.03em;color:var(--cbr-ink-soft);}

/* Section heading with a rule that draws itself */
.cbr-rule-draw{position:relative;padding-bottom:16px;}
.cbr-rule-draw::after{content:"";position:absolute;left:50%;transform:translateX(-50%) scaleX(0);
  bottom:0;height:3px;width:64px;background:var(--cbr-red);transform-origin:center;
  transition:transform .6s var(--cbr-ease-out) .1s;}
.cbr-rule-draw.text-start::after{left:0;transform:scaleX(0);transform-origin:left;}
.is-in .cbr-rule-draw::after,.cbr-rule-draw.is-in::after{transform:translateX(-50%) scaleX(1);}
.is-in .cbr-rule-draw.text-start::after{transform:scaleX(1);}

/* --- Product cards ------------------------------------------------------- */
.aq-product-item{position:relative;background:#fff;
  transition:transform .32s var(--cbr-ease-out),box-shadow .32s var(--cbr-ease-out);}
.aq-product-item::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--cbr-red);transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--cbr-ease-out);}
.aq-product-item:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(17,19,22,.13);}
.aq-product-item:hover::after{transform:scaleX(1);}
.aq-product-thumb{overflow:hidden;}
.aq-product-thumb img{transition:transform .6s var(--cbr-ease-out);}
.aq-product-item:hover .aq-product-thumb img{transform:scale(1.06);}

/* Spec strip that slides up over the image on hover */
.cbr-card-specs{position:absolute;left:0;right:0;bottom:0;z-index:3;
  background:linear-gradient(0deg,rgba(17,19,22,.94),rgba(17,19,22,.72));
  color:#fff;padding:10px 12px;display:flex;flex-wrap:wrap;gap:6px 14px;
  font-family:var(--cbr-body);font-size:12px;font-variant-numeric:tabular-nums;
  transform:translateY(101%);transition:transform .34s var(--cbr-ease-out);}
.aq-product-thumb{position:relative;}
.aq-product-item:hover .cbr-card-specs{transform:translateY(0);}
.cbr-card-specs b{color:var(--cbr-hivis);font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;font-size:10.5px;margin-right:4px;}

/* --- Motion -------------------------------------------------------------- */
/* Hidden only when the motion script is running, so the page is complete without JS. */
.cbr-motion [data-cbr-reveal]{opacity:0;transition:opacity .7s var(--cbr-ease-out),transform .7s var(--cbr-ease-out);}
.cbr-motion [data-cbr-reveal="up"]{transform:translate3d(0,34px,0);}
.cbr-motion [data-cbr-reveal="left"]{transform:translate3d(-38px,0,0);}
.cbr-motion [data-cbr-reveal="right"]{transform:translate3d(38px,0,0);}
.cbr-motion [data-cbr-reveal="scale"]{transform:scale(.94);}
.cbr-motion [data-cbr-reveal="mask"]{clip-path:inset(0 100% 0 0);opacity:1;
  transition:clip-path .85s var(--cbr-ease-out);}
.cbr-motion [data-cbr-reveal].is-in{opacity:1;transform:none;clip-path:inset(0 0 0 0);}

/* Headline words lift in one after another */
.cbr-motion .cbr-word{display:inline-block;opacity:0;transform:translate3d(0,.5em,0);
  transition:opacity .6s var(--cbr-ease-out),transform .6s var(--cbr-ease-out);}
.cbr-motion .cbr-word.is-in{opacity:1;transform:none;}

/* Call band that arrives once the hero is behind you */
.cbr-sticky-cta{position:fixed;z-index:998;right:24px;bottom:24px;max-width:min(300px,42vw);display:none;
  align-items:center;gap:14px;background:var(--cbr-ink);color:#fff;padding:14px 18px;
  border-radius:3px;box-shadow:0 14px 40px rgba(0,0,0,.34);
  transform:translateY(130%);transition:transform .45s var(--cbr-ease-out);
  font-family:var(--cbr-body);}
@media (min-width:768px){ .cbr-sticky-cta{display:flex;} }
.cbr-sticky-cta.is-in{transform:translateY(0);}
.cbr-sticky-cta-label{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#98A0AA;}
.cbr-sticky-cta-phone{display:block;font-size:19px;font-weight:600;color:#fff;text-decoration:none;
  font-variant-numeric:tabular-nums;}
.cbr-sticky-cta-phone:hover{color:var(--cbr-red);}
.cbr-sticky-cta-x{background:none;border:0;color:#6A727C;font-size:17px;line-height:1;cursor:pointer;padding:4px;}
.cbr-sticky-cta-x:hover{color:#fff;}

/* Buttons answer faster than the template's blanket 0.3s on everything */
.aq-btn-black,.download-btn,.aq-btn-subscribe{
  transition:background-color .18s var(--cbr-ease),color .18s var(--cbr-ease),
  transform .18s var(--cbr-ease) !important;}
.aq-btn-black:active,.download-btn:active{transform:translateY(1px);}

/* Anyone whose system asks for less motion gets a still page, everything visible */
@media (prefers-reduced-motion:reduce){
  .cbr-motion [data-cbr-reveal],
  .cbr-motion [data-cbr-reveal].is-in,
  .cbr-motion .cbr-word{opacity:1 !important;transform:none !important;clip-path:none !important;
    transition:none !important;}
  .cbr-hero .carousel-item img,.aq-product-thumb img,.cbr-feature-section img{transition:none !important;transform:none !important;}
  .aq-product-item:hover{transform:none;}
  .cbr-rule-draw::after{transform:translateX(-50%) scaleX(1);}
  .cbr-sticky-cta{transition:none;}
}

/* On a phone the hero image is only a couple of hundred pixels tall, so copy
   positioned over it spills up across the header. Below 992px the copy becomes a
   normal block under the image instead. */
@media (max-width:991px){
  .cbr-hero{min-height:clamp(480px,78vh,640px);}
  .cbr-hero-veil{background:linear-gradient(0deg,rgba(10,11,13,.92) 12%,rgba(10,11,13,.25) 62%);}
  .cbr-hero-title{font-size:clamp(30px,8.4vw,44px);max-width:none;margin-bottom:12px;}
  .cbr-hero-sub{font-size:15px;margin-bottom:20px;}
  .cbr-hero-actions .cbr-btn{flex:1 1 auto;justify-content:center;}
}
/* With the copy inside the carousel element, Bootstrap's arrows and dots centre
   themselves over the text on a phone. Keep them on the image only. */
@media (max-width:991px){
  .cbr-hero .carousel-control-prev,
  .cbr-hero .carousel-control-next{height:200px;top:0;bottom:auto;}
  .cbr-hero .carousel-indicators{top:170px;bottom:auto;margin-bottom:0;}
}

/* Facet counts in the filter sidebar */
.cbr-facet-count{display:inline-block;margin-left:6px;color:var(--cbr-ink-soft);font-size:11.5px;
  font-variant-numeric:tabular-nums;}
.cbr-facet-list{max-height:280px;overflow-y:auto;}
.cbr-facet-list li{transition:background-color .15s var(--cbr-ease);}
.cbr-facet-list li:hover{background:rgba(0,0,0,.03);}

/* --- Product card hover: specs slide up, image lifts, quick actions appear -- */
.aq-product-thumb::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(120deg,transparent 40%,rgba(255,255,255,.22) 50%,transparent 60%);
  transform:translateX(-120%);transition:transform .7s var(--cbr-ease-out);}
.aq-product-item:hover .aq-product-thumb::after{transform:translateX(120%);}
.cbr-quick{position:absolute;top:10px;right:10px;z-index:4;display:flex;flex-direction:column;gap:7px;
  opacity:0;transform:translateX(10px);transition:opacity .28s var(--cbr-ease),transform .28s var(--cbr-ease);}
.aq-product-item:hover .cbr-quick{opacity:1;transform:none;}
.cbr-quick a{width:38px;height:38px;display:grid;place-items:center;background:#fff;color:var(--cbr-ink);
  border-radius:2px;box-shadow:0 4px 14px rgba(17,19,22,.18);transition:background-color .18s,color .18s;}
.cbr-quick a:hover{background:var(--cbr-red);color:#fff;}

/* =============================================================================
   Homepage sections. Four different shapes instead of four identical carousels.
   ========================================================================== */
.cbr-sec-head{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;justify-content:space-between;
  padding:0 0 30px;}
.cbr-sec-title{font-family:var(--cbr-display) !important;font-weight:700;text-transform:uppercase;
  font-size:clamp(28px,4.2vw,56px);line-height:.96;margin:0;color:var(--cbr-ink);letter-spacing:-.005em;}
.cbr-sec-link{display:inline-flex;align-items:center;gap:8px;font-family:var(--cbr-body);font-weight:600;
  font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--cbr-ink);text-decoration:none;
  border-bottom:2px solid var(--cbr-red);padding-bottom:4px;transition:gap .2s var(--cbr-ease);}
.cbr-sec-link:hover{gap:14px;color:var(--cbr-red);}

/* --- Card -----------------------------------------------------------------
   Softer corners, a light neutral stage for the photograph, and the spec line
   as a chip rather than loose grey text. The photo does the selling, so it gets
   most of the card; the name, price and action sit quietly underneath. */
.cbr-card{background:#fff;border:1px solid var(--cbr-rule);border-radius:16px;
  display:flex;flex-direction:column;overflow:hidden;
  transition:transform .3s var(--cbr-ease-out),box-shadow .3s var(--cbr-ease-out),
  border-color .3s var(--cbr-ease-out);}
.cbr-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(17,19,22,.12);
  border-color:#C9CFD6;}
.cbr-card-media{position:relative;display:block;aspect-ratio:4/3.6;overflow:hidden;background:#fff;}
.cbr-card-media img{width:100%;height:100%;object-fit:contain;padding:2%;
  transition:transform .55s var(--cbr-ease-out);}
.cbr-card:hover .cbr-card-media img{transform:scale(1.06);}
.cbr-card-sweep{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.5) 50%,transparent 58%);
  transform:translateX(-130%);transition:transform .75s var(--cbr-ease-out);}
.cbr-card:hover .cbr-card-sweep{transform:translateX(130%);}
.cbr-card-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:7px;flex:1;
  border-top:1px solid var(--cbr-rule);}
.cbr-card-brand{font-family:var(--cbr-body);font-size:10.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cbr-red);}
.cbr-card-name{font-family:var(--cbr-display) !important;font-size:20px;font-weight:600;
  line-height:1.08;margin:0;letter-spacing:.004em;}
.cbr-card-name a{color:var(--cbr-ink);text-decoration:none;}
.cbr-card-name a:hover{color:var(--cbr-red);}
.cbr-card-spec{display:inline-block;align-self:flex-start;font-family:var(--cbr-body);
  font-size:11.5px;color:var(--cbr-ink-soft);font-variant-numeric:tabular-nums;margin:0;
  background:var(--cbr-bay);border-radius:99px;padding:4px 10px;}
.cbr-card-foot{margin-top:auto;padding-top:12px;display:flex;align-items:center;
  justify-content:space-between;gap:10px;}
.cbr-card-price{font-family:var(--cbr-display);font-size:21px;font-weight:700;color:var(--cbr-ink);
  font-variant-numeric:tabular-nums;}
.cbr-card-price-call{font-size:13px;font-family:var(--cbr-body);font-weight:600;
  color:var(--cbr-ink-soft);letter-spacing:.02em;}
.cbr-card-enquire{border:1px solid var(--cbr-ink);background:transparent;color:var(--cbr-ink);
  font-family:var(--cbr-body);font-weight:600;font-size:13px;letter-spacing:.02em;
  padding:9px 18px;border-radius:99px;cursor:pointer;
  transition:background-color .18s var(--cbr-ease),color .18s var(--cbr-ease);}
.cbr-card-enquire:hover{background:var(--cbr-ink);color:#fff;}

/* --- Filters on a phone ---------------------------------------------------
   The filter column was display:none below 768px and the Filter button was
   commented out, so a phone could not filter at all. It now slides up as a
   sheet over the results. */
.cbr-toolbar-left{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.cbr-filter-btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--cbr-ink);
  background:var(--cbr-ink);color:#fff;font-family:var(--cbr-body);font-weight:600;font-size:14px;
  padding:11px 18px;border-radius:2px;cursor:pointer;}
.cbr-filter-btn:active{transform:translateY(1px);}
.cbr-filter-badge{background:var(--cbr-red);color:#fff;font-size:11.5px;border-radius:99px;
  padding:1px 7px;font-variant-numeric:tabular-nums;}
.cbr-result-count{font-family:var(--cbr-body);font-size:14.5px;color:var(--cbr-ink-soft);}
.cbr-result-count strong{color:var(--cbr-ink);font-variant-numeric:tabular-nums;}

@media (max-width:767px){
  .cbr-filter-col{position:fixed;inset:auto 0 0 0;z-index:1002;max-height:86dvh;
    transform:translateY(101%);transition:transform .35s var(--cbr-ease-out);
    background:#fff;box-shadow:0 -14px 40px rgba(0,0,0,.28);width:100%;max-width:none;
    display:flex;flex-direction:column;}
  .cbr-filter-col.is-open{transform:translateY(0);}
  .cbr-filter-col .aq-sidebar-bg{height:auto;overflow-y:auto;padding:18px 18px 88px;}
  .cbr-filter-scrim{position:fixed;inset:0;z-index:1001;background:rgba(10,11,13,.55);
    opacity:0;pointer-events:none;transition:opacity .3s var(--cbr-ease);}
  .cbr-filter-scrim.is-open{opacity:1;pointer-events:auto;}
  .cbr-filter-apply{position:fixed;left:0;right:0;bottom:0;z-index:1003;display:none;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));background:#fff;
    border-top:1px solid var(--cbr-rule);}
  .cbr-filter-col.is-open ~ .cbr-filter-apply,
  .cbr-filter-apply.is-open{display:block;}
  .cbr-filter-apply button{width:100%;border:0;background:var(--cbr-red);color:#fff;
    font-family:var(--cbr-body);font-weight:600;font-size:16px;padding:14px;border-radius:2px;}
  /* the call button would sit on top of the Apply bar */
  body.cbr-filters-open .cbr-call-fab{display:none;}
}
@media (min-width:768px){
  .cbr-filter-col .aq-sidebar-bg{position:sticky;top:96px;}
}

/* --- Testimonials: bring the stock dark block into the same language ------ */
.aqf-testimonial-area{background:var(--cbr-ink) !important;}
.aqf-testimonial-area .aq-section-title{font-family:var(--cbr-display) !important;
  text-transform:uppercase;letter-spacing:-.005em;}

/* A product whose photo is missing should read as "not photographed yet",
   not as a blank hole in the grid. */
.cbr-card-media .cbr-card-noimg{display:none;}
.cbr-card-media.is-missing{background:var(--cbr-bay);}
.cbr-card-media.is-missing .cbr-card-noimg{display:grid;place-items:center;position:absolute;inset:0;
  color:#969EA9;font-family:var(--cbr-body);font-size:13px;letter-spacing:.06em;text-transform:uppercase;}

/* --- Header: one black, the same one used everywhere else ----------------
   The nav sat on rgba(0,0,0,.9) and the strip above it on #111111, so the
   header read as two different blacks next to the footer's --cbr-ink. */
.cbr-callbar,
.aq-header-top-area,
.aq-marquee-wrapper,
.aq-header-area,
.aq-header-area.header-sticky,
header .aq-header-area{background-color:var(--cbr-ink) !important;}
.aq-header-area{border-bottom:1px solid rgba(255,255,255,.06);}
.aq-marquee-wrapper{border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);}

/* --- Scroll choreography support ----------------------------------------- */
.cbr-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:1200;
  background:var(--cbr-red);transform:scaleX(0);transform-origin:left center;pointer-events:none;}
/* Headings are split into letters for the reveal; the words must still wrap
   as words and each letter needs a box to rise out of. */
.cbr-w{display:inline-block;white-space:nowrap;}
.cbr-c{display:inline-block;will-change:transform;}
.cbr-sec-title,.cbr-fitment-title,.cbr-footer-call-title{overflow:hidden;padding-bottom:.08em;}
/* If the reveal never runs, the words must still be readable. */
.cbr-c{opacity:1;}
.aq-marquee-track{will-change:transform;}

/* --- Cards: the photo is the product, so it fills the stage ---------------- */
.cbr-card-media{background:#fff;}
.cbr-card-media img{padding:3%;}
.cbr-card-alt{position:absolute;inset:0;opacity:0;
  transition:opacity .45s var(--cbr-ease),transform .55s var(--cbr-ease-out) !important;}
.cbr-card.has-alt .cbr-card-media img:not(.cbr-card-alt){transition:opacity .45s var(--cbr-ease),transform .55s var(--cbr-ease-out);}
.cbr-card.has-alt:hover .cbr-card-media img:not(.cbr-card-alt){opacity:0;}
.cbr-card.has-alt:hover .cbr-card-alt{opacity:1;}
.cbr-card-desc{margin:0;font-family:var(--cbr-body);font-size:13.5px;line-height:1.5;color:#59616B;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.cbr-card-wide .cbr-card-desc{-webkit-line-clamp:1;}
.cbr-card-tall .cbr-card-desc{-webkit-line-clamp:3;font-size:15px;max-width:52ch;}
/* the tall mosaic card grows its photo, not an empty body */
.cbr-mosaic .cbr-card:first-child .cbr-card-media{flex:1;aspect-ratio:auto;min-height:320px;}
.cbr-mosaic .cbr-card:first-child .cbr-card-body{flex:0 0 auto;}
.cbr-editorial .cbr-card-tall .cbr-card-media{flex:1;aspect-ratio:auto;min-height:340px;}
.cbr-editorial .cbr-card-tall .cbr-card-body{flex:0 0 auto;}

/* A follower that says what a click does, over photos only */
.cbr-cursor{position:fixed;left:0;top:0;z-index:1300;width:86px;height:86px;margin:-43px 0 0 -43px;
  border-radius:50%;background:var(--cbr-red);color:#fff;display:grid;place-items:center;pointer-events:none;
  font:600 11.5px/1 var(--cbr-body);letter-spacing:.16em;text-transform:uppercase;
  box-shadow:0 10px 30px rgba(222,21,24,.35);}

/* --- Hooks for the scroll script ------------------------------------------ */
/* Lenis does the smoothing; the template's native smooth scroll would fight it */
html.lenis,html.lenis body{height:auto;}
.lenis.lenis-smooth{scroll-behavior:auto !important;}
.lenis.lenis-stopped{overflow:hidden;}
/* Photos that also zoom on hover move with translate/rotate, which stack with it */
.cbr-rail-track .cbr-card-media img{translate:var(--px,0) 0;}
.cbr-stack-shot img{translate:var(--tx,0) 0;rotate:var(--rot,0deg);}
.cbr-mosaic .cbr-card,.cbr-review{translate:0 var(--gy,0px);}
/* Split headings: each word is a mask its letters rise out of */
.cbr-split .cbr-w{overflow:hidden;vertical-align:top;padding:.05em .02em .08em;margin:-.05em -.02em -.08em;}
/* Steps wait in shadow until the line reaches them */
.cbr-motion .cbr-step{opacity:.38;transition:opacity .5s var(--cbr-ease);}
.cbr-motion .cbr-step.is-in{opacity:1;}

@media (prefers-reduced-motion:reduce){
  .cbr-motion .cbr-hero-title .cbr-c{transform:none !important;transition:none !important;}
  .cbr-motion .cbr-roll-copy .cbr-fw{opacity:1 !important;}
  .cbr-hero-cue i::after{animation:none;}
}

/* --- Type, enforced ---------------------------------------------------------
   main.css forces its faces with !important: Lato on every p, a, span, li and
   button and on any class containing "desc" or "content"; Konexy on every
   heading, everything inside one, and any class containing "title". Those beat
   the theme's fonts. It is why the hero headline flipped to Lato the moment its
   letters (spans) were split, and why card names, prices and buttons were never
   in Barlow. Same weapon, same specificity, loaded later. Icons keep their own
   higher-specificity rule in main.css. */
body,p,a,li,span,label,input,button,select,textarea,
.body-font,[class*="desc"],[class*="content"]{font-family:var(--cbr-body) !important;}
h1,h2,h3,h4,h5,h6,.heading-font,[class*="heading"],[class*="title"]{font-family:var(--cbr-display) !important;}
h1 *,h2 *,h3 *,h4 *,h5 *,h6 *{font-family:inherit !important;}
.cbr-c,.cbr-w,.cbr-fw,.cbr-reel,.cbr-reel span,.cbr-ribbon-num span,
.cbr-footer-mark span,.cbr-footer-mark b{font-family:inherit !important;}
.cbr-card-price:not(.cbr-card-price-call),.cbr-stack-code,.cbr-step-num,.cbr-roll-copy,
.cbr-footer-phone,.cbr-rail-end,.cbr-rail-end span{font-family:var(--cbr-display) !important;}
.cbr-footer-head{font-family:var(--cbr-body) !important;}

/* main.css gives every a, p, li and button "transition: all .3s". On anything the
   scroll script drives, that makes the element trail the scroll by a third of a
   second. These keep only the transitions they actually use. */
.cbr-stack-card{transition:box-shadow .3s var(--cbr-ease);}
.cbr-roll-tag{transition:color .2s var(--cbr-ease);}
.cbr-card-media{transition:none;}
.aqf-banner-2-area .roh-item{transition:border-color .3s ease,transform .5s ease;}

/* --- Scroll stability ---------------------------------------------------------
   1. main.css sets scroll-behavior:smooth on html. ScrollTrigger jumps to the top
      to measure the page, and a smooth jump lands late, so every re-measure made
      mid-page put the pinned sections hundreds of pixels out. Lenis smooths the
      wheel instead.
   2. The template switches the header to position:fixed after 60px. That takes
      97px out of the page mid-scroll: a visible jerk, and every trigger below
      moves. Sticky keeps its space. The thin top bar scrolls away; the nav row
      stays. --cbr-topbar is set by cbr-scroll.js. */
html.cbr-motion{scroll-behavior:auto !important;}
body > header{position:sticky;top:calc(-1 * var(--cbr-topbar, 59px));z-index:999;}
.aq-header-area.header-sticky{position:static !important;animation:none !important;}


/* --- Enquiry forms --------------------------------------------------------------
   Name, then phone: most customers would rather be rung. Inputs are 16px so a phone
   does not zoom into them. --light is for forms on white pages. */
.cbr-modal .modal-dialog{max-width:480px;}
.cbr-modal .modal-content{position:relative;background:var(--cbr-ink);color:#C8CDD4;border:1px solid #262C34;
  border-radius:18px;padding:28px 26px 22px;box-shadow:0 30px 80px rgba(0,0,0,.5);}
.cbr-modal-x{position:absolute;top:12px;right:14px;width:36px;height:36px;border-radius:50%;border:0;
  background:rgba(255,255,255,.07);color:#fff;font-size:22px;line-height:1;cursor:pointer;transition:background-color .18s;}
.cbr-modal-x:hover{background:var(--cbr-red);}
.cbr-modal-title{font-family:var(--cbr-display) !important;color:#fff;font-size:32px;font-weight:700;
  text-transform:uppercase;line-height:1;margin:2px 0 8px;}
.cbr-modal-product{margin:0 0 14px;color:#fff;font-weight:600;font-size:15px;}
.cbr-lead{display:grid;gap:12px;}
.cbr-lead-field{display:grid;gap:6px;margin:0;}
.cbr-lead-field > span{font:600 11px/1.3 var(--cbr-body) !important;letter-spacing:.14em;text-transform:uppercase;color:#98A0AA;}
.cbr-lead-field em{font-style:normal;letter-spacing:.03em;text-transform:none;color:#737B85;margin-left:6px;}
.cbr-lead-field input,.cbr-lead-field textarea,.cbr-lead-field select{width:100%;background:#1B1F24;border:1px solid #2C333C;
  border-radius:10px;color:#fff;padding:12px 14px;font:500 16px/1.4 var(--cbr-body);transition:border-color .18s,box-shadow .18s;}
.cbr-lead-field textarea{resize:vertical;min-height:72px;}
.cbr-lead-field input:focus,.cbr-lead-field textarea:focus,.cbr-lead-field select:focus{outline:none;border-color:var(--cbr-red);
  box-shadow:0 0 0 3px rgba(222,21,24,.22);}
.cbr-lead-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.cbr-lead-go{justify-content:center;width:100%;border:0;cursor:pointer;margin-top:4px;}
.cbr-lead-note{margin:2px 0 0;text-align:center;font-size:13.5px;color:#98A0AA;}
.cbr-lead-note a{color:#fff;font-weight:600;text-decoration:none;}
.cbr-lead-trap{position:absolute !important;left:-9999px;width:1px;height:1px;overflow:hidden;}
.cbr-lead-error{margin:0;padding:12px 14px;border-radius:10px;background:rgba(222,21,24,.12);
  border:1px solid rgba(222,21,24,.4);color:#fff;font-size:14.5px;}
.cbr-lead--light .cbr-lead-field input,.cbr-lead--light .cbr-lead-field textarea,.cbr-lead--light .cbr-lead-field select{
  background:#fff;border-color:var(--cbr-rule);color:var(--cbr-ink);}
.cbr-lead--light .cbr-lead-field > span{color:var(--cbr-ink-soft);}
.cbr-lead--light .cbr-lead-note{color:var(--cbr-ink-soft);}
.cbr-lead--light .cbr-lead-note a{color:var(--cbr-ink);}
.cbr-lead--light .cbr-lead-error{color:var(--cbr-ink);}
@media (max-width:575px){.cbr-lead-row{grid-template-columns:1fr;}}

/* --- Header: nav, call button, mobile menu ---------------------------------- */
.aq-header-menu .submenu li a{text-transform:none !important;letter-spacing:.01em;font-weight:500;}
.aq-header-menu .submenu li.cbr-menu-rule{border-top:1px solid rgba(17,19,22,.1);margin-top:6px;padding-top:6px;}
.cbr-head-call{vertical-align:middle;margin-left:6px;}
.cbr-head-call-btn{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:99px;
  background:var(--cbr-red);color:#fff !important;font:600 14px/1 var(--cbr-body) !important;letter-spacing:.02em;
  text-decoration:none;white-space:nowrap;box-shadow:0 6px 18px rgba(222,21,24,.3);
  transition:background-color .18s var(--cbr-ease),transform .18s var(--cbr-ease);}
.cbr-head-call-btn:hover{background:var(--cbr-red-deep);transform:translateY(-1px);}
.cbr-offcanvas-cta{display:grid;gap:10px;}
.cbr-offcanvas-cta .cbr-btn{justify-content:center;width:100%;}
.cbr-offcanvas-cta .cbr-btn-ghost{color:var(--cbr-ink);border-color:var(--cbr-rule);background:transparent;}
.cbr-offcanvas-meta{margin:6px 0 0;font-size:13.5px;line-height:1.55;color:var(--cbr-ink-soft);}
.cbr-offcanvas-account{font-size:14px;}
.cbr-offcanvas-account a{color:var(--cbr-ink);font-weight:600;text-decoration:none;}


/* =============================================================================
   Final pass, 8 October 2026: readability, keyboard use, alignment. One block so
   it can be read as a list of fixes.
   ========================================================================== */

/* Skip straight to the page for keyboard and screen reader users */
.cbr-skip{position:absolute;left:12px;top:-80px;z-index:3000;background:#fff;color:var(--cbr-ink);
  padding:12px 18px;border-radius:10px;font:600 15px/1 var(--cbr-body);text-decoration:none;box-shadow:0 8px 24px rgba(0,0,0,.25);}
.cbr-skip:focus{top:12px;}

/* Keyboard focus. The template took every outline away; this puts a clear one back
   for keyboard use only (a mouse click shows nothing). */
:where(a,button,input,select,textarea,summary,[role="button"],[tabindex]):focus-visible{
  outline:2px solid var(--cbr-red) !important;outline-offset:3px;}
/* Desktop menus open from the keyboard as well as on hover */
.aq-header-dropdown nav ul li:focus-within > .aq-submenu{visibility:visible;opacity:1;transform:scale(1);}

/* Small red labels: brighter where the ground is dark, deeper where it is light, so
   11px capitals pass contrast on both (were 3.7:1 on black). */
.cbr-eyebrow,.cbr-way-label{color:var(--cbr-eyebrow,var(--cbr-red-deep));}
.cbr-hero,.cbr-page-hero,.cbr-lead-band,.cbr-section.is-ink,.cbr-thanks,.cbr-footer,.cbr-roll,.cbr-process,
.cbr-reviews,.cbr-search,.cbr-ribbon,.cbr-fitment-panel,.cbr-modal .modal-content,.cbr-acl,.cbr-way--call,
.cbr-tyres-section,.cbr-sticky-cta{--cbr-eyebrow:#FF5457;}
.cbr-lead-band.is-light{--cbr-eyebrow:var(--cbr-red-deep);}
.cbr-tyres-section .cbr-eyebrow{opacity:1;}
.cbr-hero .cbr-eyebrow,.cbr-page-hero .cbr-eyebrow{text-shadow:0 1px 12px rgba(0,0,0,.6);}

/* The template makes every paragraph 22px and black. Inside the site's own dark
   blocks that made the text invisible (black on black). Text follows its block. */
/* :where() keeps this as weak as the template's own p rule, so any colour a block sets
   on its paragraphs still wins. */
:where(.cbr-lead-band-copy,.cbr-acl,.cbr-thanks,.cbr-modal,.cbr-sticky-cta,.cbr-fitment-panel,.cbr-footer) p{color:inherit;}
.cbr-acl p{font-size:inherit;line-height:inherit;}
.cbr-lead-field em{color:#9AA2AC;}
.cbr-lead--light .cbr-lead-field em{color:var(--cbr-ink-soft);}

/* Quote popup fits a phone screen (ran 8px off the right edge) */
@media (max-width:575px){
  .cbr-modal .modal-dialog{width:auto;max-width:calc(100% - 20px);margin:10px auto;}
}

/* Jump links (#enquire) land below the sticky header, not under it */
[id]{scroll-margin-top:calc(var(--cbr-head,96px) + 16px);}

/* Top strip on the same edges as the header and page */
.cbr-callbar-inner{max-width:none;padding-left:0;padding-right:0;}
/* The announcement strip loops without a gap, fades at its edges, and stands still
   for anyone who has asked their device for less motion. */
.aq-marquee-wrapper{-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
@media (prefers-reduced-motion:reduce){
  .aq-marquee-track{animation:none !important;}
  html{scroll-behavior:auto !important;}
}

/* Phones: less fixed chrome above the content. The announcement strip goes (the call
   button and contact strip carry the same news), the menu button gets a real tap target. */
@media (max-width:767px){
  .aq-header-top-area{display:none !important;}
  .aq-header-bar{width:44px;height:44px;display:inline-flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:0 8px;}
  .aq-header-bar span{flex:0 0 3px;margin:3px 0;}
  .aq-header-logo img{width:118px;height:auto;}
  .progress-wrap{display:none !important;}   /* the call button already owns that corner */
}
.cbr-head-enquire a{display:inline-grid;place-items:center;width:44px;height:44px;}

/* Sticky "Talk to a fitter" card: same corners as everything else, and the back to top
   button moves up while it is showing instead of hiding behind it. */
.cbr-sticky-cta{border-radius:16px;}
.cbr-sticky-cta-x{min-width:32px;min-height:32px;}
body.cbr-cta-on .progress-wrap{bottom:118px !important;}

/* Footer */
.cbr-footer-mark{line-height:.84;margin-bottom:0;padding-bottom:.04em;}
.cbr-footer-social a{width:44px;height:44px;}
.cbr-footer a[href^="mailto:"]{text-transform:none;letter-spacing:0;}
@media (max-width:575px){
  .cbr-footer-main{grid-template-columns:1fr 1fr;column-gap:20px;}
  .cbr-footer-brand,.cbr-footer-visit{grid-column:1 / -1;}
}

/* Product cards */
.cbr-card-price-call{white-space:nowrap;}

/* Opening hours, live: "Open now" or when it opens next */
.cbr-open{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;}
.cbr-open::before{content:"";width:8px;height:8px;border-radius:50%;background:#8F98A3;}
.cbr-open.is-open::before{background:#2BB673;box-shadow:0 0 0 3px rgba(43,182,115,.18);}
a.cbr-card-price-call{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:var(--cbr-ink-soft);}
a.cbr-card-price-call::before{content:"";width:12px;height:12px;flex:0 0 12px;background:var(--cbr-red);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .7-.2 1l-2.3 2.2Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .7-.2 1l-2.3 2.2Z'/%3E%3C/svg%3E") center/contain no-repeat;}
a.cbr-card-price-call:hover{color:var(--cbr-red);}

/* Top strip on phones: the live open/closed note and the number; the hours are one tap away */
@media (max-width:575px){ .cbr-callbar .cbr-callbar-item{display:none;} }
/* Product pages have their own call button and sticky bar; the round one would sit on them */
.cbr-pd-page .cbr-call-fab{display:none !important;}
/* The floating call card only where there is gutter room beside the content */
@media (max-width:1279px){ .cbr-sticky-cta{display:none !important;} }