/* Static pages, blog and posts. The page elements below mirror the few building blocks the pages were composed with;
   each element reads its saved sizes and colours from custom properties set on the element. */
html{overflow-y:scroll;scrollbar-gutter:stable}
/* Base text settings live on <body>, as weak as a plain element rule: page blocks that restyle body still win. */
body:where(.zr-content-page){background:#fff;color:#767676;font:500 14px/1.6 Inter,Arial,Helvetica,sans-serif}
body.zr-content-page :is(.zr-reference-header,.zr-site-footer,.zr-mobile-drawer){font-size:16px;font-weight:400;line-height:normal}
.zr-page{display:flow-root;padding:0 15px 40px;background:#fff}
.zr-page *,.zr-page *::before,.zr-page *::after{box-sizing:border-box}
.zr-page img{max-width:100%;height:auto}
.zr-page button{font-family:inherit}

/* Base typography for page content (the values the page blocks were written against).
   :where() keeps these as weak as plain element rules, so every block's own styles win. */
:where(.zr-page) :is(h1,h2,h3,h4,h5,h6){margin:0 0 20px;color:#242424;font-family:Inter,Arial,Helvetica,sans-serif;font-weight:800;line-height:1.4}
:where(.zr-page) h1{font-size:28px}:where(.zr-page) h2{font-size:24px}:where(.zr-page) h3{font-size:22px}
:where(.zr-page) h4{font-size:18px}:where(.zr-page) h5{font-size:16px}:where(.zr-page) h6{font-size:12px}
:where(.zr-page) p{margin:0 0 20px}
:where(.zr-page) a{color:#333;text-decoration:none}:where(.zr-page) a:hover{color:#242424}
:where(.zr-page) :is(ul,ol){margin:0 0 20px;padding:0 0 0 17px}
:where(.zr-page) li{margin-bottom:10px}:where(.zr-page) li:last-child{margin-bottom:0}
:where(.zr-page) :is(strong,b){font-weight:600}
:where(.zr-page) small{font-size:80%}
:where(.zr-page) blockquote{margin:0 0 20px;padding:0 0 0 30px;border-left:2px solid #fe4800;font-size:110%}
:where(.zr-page) table{width:100%;margin:0 0 35px;border-collapse:collapse;line-height:1.4}
:where(.zr-page) label{display:block;margin:0 0 5px;color:#242424;font-weight:400}
:where(.zr-page) :is(input[type=text],input[type=email],input[type=tel],input[type=number],input[type=url],input[type=search],input[type=password],input[type=date],select,textarea){width:100%;height:42px;padding:0 15px;border:2px solid rgba(0,0,0,.1);border-radius:0;background:transparent;color:#333;font:inherit;transition:border-color .4s}
:where(.zr-page) textarea{height:auto;min-height:190px;padding:10px 15px;resize:vertical}
:where(.zr-page) :is(input,select,textarea):focus{border-color:rgba(0,0,0,.15);outline:0}
:where(.zr-page) :is(.btn,.button,button,[type=submit],[type=button]){display:inline-flex;min-height:42px;align-items:center;justify-content:center;gap:5px;padding:5px 20px;border:0;border-radius:0;background:#f3f3f3;color:#3e3e3e;font-size:13px;font-weight:600;line-height:1.2;text-align:center;text-decoration:none;text-transform:uppercase;cursor:pointer;transition:box-shadow .25s,color .25s,background-color .25s}
:where(.zr-page) :is(.btn,.button,button,[type=submit],[type=button]):hover{color:#3e3e3e;box-shadow:inset 0 0 0 1000px rgba(0,0,0,.1)}

/* Headings on dark panels. Headings have their own dark colour, so inside a dark panel they need to be told to
   use the panel's light text colour. The first two rules were in the old theme's Additional CSS; the third panel
   (Leather care, "Remember these four") was dark-on-dark on the old site as well. pages.js applies the same
   correction to any other heading it finds unreadable. */
.zr-page #security h2,.zr-page .quote-section .guide-container h2{color:#fff}
.zr-page .rules-section :is(h1,h2,h3,h4,h5,h6){color:inherit}
.zr-page .is-on-dark{color:inherit}

/* Containers. Each box starts from its own saved values: custom properties would otherwise be inherited from the box around it. */
.zr-el-con{--bg:initial;--p:initial;--pm:initial;--m:initial;--mm:initial;--gap:initial;--bw:initial;--bc:initial;--cols:initial;--colsm:initial}
.zr-el-con{display:flex;min-width:0;flex-direction:column;margin:var(--m,0);padding:var(--p,10px);border:solid var(--bc,transparent);border-width:var(--bw,0);background:var(--bg,transparent)}
.zr-el-con.is-stretched{width:100vw;max-width:100vw;margin-right:calc(50% - 50vw);margin-left:calc(50% - 50vw)}
.zr-el-inner{display:flex;width:100%;min-width:0;flex-direction:column;gap:var(--gap,20px)}
.zr-el-con.is-row>.zr-el-inner{flex-direction:row}
.zr-el-con.is-row>.zr-el-inner>.zr-el-con{flex:1 1 0}
.zr-el-con.is-grid>.zr-el-inner{display:grid;height:100%;grid-template-columns:var(--cols,minmax(0,1fr));align-items:center}
.zr-el-con.is-row>.zr-el-inner{gap:var(--gap,0px)}
.zr-el-con.is-flexbox>.zr-el-inner{gap:var(--gap,0px)}

/* Elements. */
.zr-el-widget{min-width:0;margin:var(--wm,0);padding:var(--wp,0)}
.zr-el-spacer{height:var(--h,50px)}
.zr-el-anchor{height:0}
.zr-el-heading{text-align:var(--ta,left)}
.zr-el-heading>*{margin:0;color:var(--t-c,#242424);font-size:var(--t-fs,24px);font-weight:var(--t-fw,800);line-height:var(--t-lh,1);letter-spacing:var(--t-ls,normal);text-transform:var(--t-tt,none)}
.zr-el-image{text-align:var(--ta,left)}
.zr-el-image img{width:var(--w,auto);border-radius:var(--r,0);vertical-align:top}
.zr-el-button{text-align:var(--ta,left)}
.zr-el-button a{display:inline-flex;align-items:center;justify-content:center;padding:var(--b-p,12px 24px);border-radius:var(--b-r,3px);background:var(--b-bg,#111);color:var(--b-c,#fff);font-size:var(--t-fs,13px);font-weight:var(--t-fw,600);line-height:1;letter-spacing:var(--t-ls,normal);text-decoration:none;transition:background-color .3s,color .3s}
.zr-el-button a:hover{background:var(--b-bh,var(--b-bg,#111))}

.zr-el-textblock{text-align:var(--ta,left)}
.zr-el-textblock-inner{display:inline-block;max-width:var(--mw,100%);color:var(--x-c,inherit);font-size:var(--x-fs,14px);font-weight:var(--x-fw,inherit);line-height:var(--x-lh,1.6);text-align:var(--ta,left)}
.zr-el-textblock-inner>:last-child{margin-bottom:0}

/* Section title: small label, heading, supporting text. */
.zr-el-title{text-align:center}
.zr-el-title.is-left{text-align:left}.zr-el-title.is-right{text-align:right}
.zr-el-title-sub{display:inline-block;max-width:var(--mw,100%);margin:0 0 10px;color:var(--s-c,#fe4800);font-size:var(--s-fs,14px);font-weight:var(--s-fw,500);line-height:var(--s-lh,inherit);text-transform:var(--s-tt,none)}
.zr-el-title-main{margin:0 0 10px;padding:0 0 10px}
.zr-el-title-main>*{display:inline-block;max-width:var(--mw,100%);margin:0;color:var(--t-c,#242424);font-size:var(--t-fs,28px);font-weight:var(--t-fw,800);line-height:var(--t-lh,1.4);letter-spacing:var(--t-ls,normal);text-transform:var(--t-tt,none)}
.zr-el-title-main>* h1{display:inline;margin:0;font:inherit;color:inherit}
.zr-el-title-after{display:inline-block;max-width:var(--mw,100%);color:var(--x-c,inherit);font-size:var(--x-fs,14px);font-weight:var(--x-fw,500);line-height:var(--x-lh,1.6);letter-spacing:var(--x-ls,normal)}
.zr-el-title-after p{margin:0 0 20px}.zr-el-title-after p:last-child{margin-bottom:0}
.zr-el-title-main:last-child{margin-bottom:0;padding-bottom:0}.zr-el-title-sub:last-child{margin-bottom:0}

@media(max-width:767px){
 .zr-el-con{margin:var(--mm,var(--m,0));padding:var(--pm,var(--p,10px))}
 .zr-el-con.is-row>.zr-el-inner{flex-direction:column}
 .zr-el-con.is-grid>.zr-el-inner{grid-template-columns:var(--colsm,minmax(0,1fr))}
 .zr-el-widget{margin:var(--wmm,var(--wm,0));padding:var(--wpm,var(--wp,0))}
 .zr-el-spacer{height:var(--hm,var(--h,50px))}
 .zr-el-heading>*{font-size:var(--t-fsm,var(--t-fs,24px))}
 .zr-el-image img{width:var(--wmob,var(--w,auto))}
 .zr-el-title-sub{max-width:var(--mwm,100%);font-size:var(--s-fsm,var(--s-fs,14px))}
 .zr-el-title-main>*{max-width:var(--mwm,100%);font-size:var(--t-fsm,var(--t-fs,22px));line-height:var(--t-lhm,var(--t-lh,1.4))}
 .zr-el-title-after{max-width:var(--mwm,100%);font-size:var(--x-fsm,var(--x-fs,14px));line-height:var(--x-lhm,var(--x-lh,1.6))}
 .zr-el-title.is-center .zr-el-title-after>p{max-width:100%;margin-inline:auto;padding-inline:22px}
}

/* Blog page: post grid. */
.zr-blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:20px;margin-top:40px}
.zr-post-card{background:#fff;box-shadow:0 0 4px rgba(0,0,0,.12);color:#767676;font-size:14px;line-height:1.6}
.zr-post-card-thumb{position:relative;overflow:hidden}
.zr-post-card-thumb img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;transition:transform .5s cubic-bezier(0,0,.44,1.18)}
.zr-post-card:hover .zr-post-card-thumb>img{transform:scale(1.05)}
.zr-post-card-thumb::after{content:"";position:absolute;right:0;bottom:0;left:0;height:45%;background:linear-gradient(transparent,rgba(0,0,0,.55));pointer-events:none}
.zr-post-card-cover{position:absolute;inset:0;z-index:1}
.zr-post-card-author{position:absolute;right:0;bottom:0;left:0;z-index:2;display:flex;align-items:center;gap:5px;padding:15px 20px;font-size:13.3px;pointer-events:none}
.zr-post-card-author img{width:22px;height:22px;border-radius:50%;aspect-ratio:1;transform:none!important}
.zr-post-card-author a{color:rgba(255,255,255,.9);pointer-events:auto}
.zr-post-card-author a:hover{color:#fff}
.zr-post-card-body{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:25px}
.zr-post-card-meta{display:flex;gap:6px;color:#a5a5a5;font-size:13.3px}
.zr-post-card-meta a{color:inherit}.zr-post-card-meta a:hover{color:#767676}
.zr-post-card h3{margin:0;font-size:22px;font-weight:800;line-height:1.4}
.zr-post-card h3 a{color:#333}.zr-post-card h3 a:hover{color:#fe4800}
.zr-post-card-more{color:#fe4800;font-size:12.6px;font-weight:600;text-transform:uppercase}
.zr-post-card-more:hover{color:#242424}

/* Single post. */
.zr-post{margin:0 0 40px}
.zr-post-header{display:flex;flex-direction:column;align-items:center;gap:15px;margin:0 0 30px;text-align:center}
.zr-post-cat{padding:0 10px;background:#fe4800;color:#fff;font-size:11.2px;font-weight:600;line-height:22.4px;text-transform:uppercase}
.zr-post-cat:hover{color:#fff;background:#242424}
.zr-post-header .zr-post-title{margin:0;color:#333;font-size:28px;font-weight:800;line-height:1.4}
.zr-post-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px}
.zr-post-meta img{display:inline-block;width:22px;height:22px;margin:0 3px;border-radius:50%;vertical-align:middle}
.zr-post-image{width:100%}
.zr-post-image img{display:block;width:100%;height:auto}
.zr-post-share{display:flex;max-width:1200px;align-items:center;justify-content:space-between;gap:20px;margin:32px auto 20px;padding:24px 32px;border:1px solid #e8e8e8;border-radius:12px;background:#fff}
.zr-share{display:flex;flex-wrap:wrap;gap:10px}
.zr-share a{display:flex;width:40px;height:40px;align-items:center;justify-content:center;border-radius:50%;color:#fff;transition:opacity .25s}
.zr-share a:hover{color:#fff;opacity:.8}
.zr-share svg{width:16px;height:16px;fill:currentColor}
.zr-share-facebook{background:#365493}.zr-share-x{background:#000}.zr-share-pinterest{background:#cb2027}.zr-share-linkedin{background:#0274b3}.zr-share-telegram{background:#37aee2}
.zr-post-nav{display:flex;align-items:center;margin:0 0 40px;border-top:2px solid rgba(0,0,0,.105);border-bottom:2px solid rgba(0,0,0,.105)}
.zr-post-nav>div{flex:1 1 50%;min-width:0}
.zr-post-nav a{display:block;color:#333}
.zr-post-nav-prev a{padding:25px 20px 25px 55px}
.zr-post-nav-next a{padding:25px 55px 25px 20px;text-align:right}
.zr-post-nav span{display:block;color:#a5a5a5;font-size:12px}
.zr-post-nav strong{display:block;color:#333;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zr-post-nav a:hover strong{color:#fe4800}
.zr-post-nav .zr-post-nav-list{display:grid;flex:0 0 40px;width:40px;height:40px;grid-template-columns:8px 8px;place-content:center;gap:3px;padding:0}
.zr-post-nav-list i{width:8px;height:8px;background:#bbb;transition:background .2s}
.zr-post-nav-list:hover i{background:#333}
.zr-comments{max-width:1200px;margin:0 auto 40px;padding:32px;border:1px solid #e8e8e8;border-radius:12px;background:#fff}
.zr-comments-title,.zr-comments .comment-reply-title{display:block;margin:0 0 20px;color:#242424;font-size:22px;font-weight:800;line-height:1.4}
.zr-comment-list{margin:0 0 30px;padding:0;list-style:none}
.zr-comment-list .comment-body{margin:0 0 20px;padding:0 0 20px;border-bottom:1px solid rgba(0,0,0,.105)}
.zr-comment-list .avatar{float:left;margin-right:15px;border-radius:50%}
.zr-comments .comment-form{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.zr-comments .comment-form>*{grid-column:1/-1;margin:0 0 20px}
.zr-comments .comment-form-author{grid-column:1}.zr-comments .comment-form-email{grid-column:2}
.zr-comments .comment-form-cookies-consent{display:flex;align-items:flex-start;gap:8px}
.zr-comments .comment-form-cookies-consent label{margin:0}
.zr-comments .form-submit{margin-bottom:0}
.zr-page .zr-comments .submit{background:#fe4800;color:#fff}
.zr-page .zr-comments .submit:hover{background:#242424}

@media(max-width:1024px){
 .zr-blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:767px){
 .zr-blog-grid{grid-template-columns:1fr}
 .zr-post-share{padding:20px}
 .zr-post-nav-prev a{padding:20px 10px 20px 0}.zr-post-nav-next a{padding:20px 0 20px 10px}
 .zr-comments{padding:20px}
 .zr-comments .comment-form{grid-template-columns:1fr}
 .zr-comments .comment-form-email{grid-column:1}
}

/* ---- Page hero: every page shows its small label, main heading, description and button at the same
   sizes and widths, whatever was saved for the individual page. ---- */
.zr-el-con:has(>.zr-el-inner>.zr-el-title.is-hero){margin-top:0;padding:0 0 95px}
.zr-el-con:has(>.zr-el-inner>.zr-el-title.is-hero)>.zr-el-inner>.zr-el-spacer:first-child{height:100px}
.zr-el-title.is-hero .zr-el-title-sub{max-width:1000px;margin:0 0 10px;color:#fe5a00;font-size:14px;font-weight:500;line-height:22px;letter-spacing:normal;text-transform:uppercase}
.zr-el-title.is-hero .zr-el-title-main{margin:0 0 10px;padding:0 0 10px}
.zr-el-title.is-hero .zr-el-title-main>*{max-width:1200px;color:#242424;font-size:78px;font-weight:800;line-height:90px;letter-spacing:normal;text-transform:uppercase}
.zr-el-title.is-hero .zr-el-title-after{width:1000px;max-width:100%;color:#666;font-size:17px;font-weight:500;line-height:26px;letter-spacing:-.4px}
/* The short line under a heading. */
.zr-el-title.is-lined .zr-el-title-main{position:relative}
.zr-el-title.is-lined .zr-el-title-main::after{content:"";position:absolute;bottom:-2px;left:calc(50% - 20px);width:40px;height:2px;background:rgba(0,0,0,.105)}
.zr-el-title.is-lined.is-left .zr-el-title-main::after{left:0}
.zr-el-title.is-lined.is-right .zr-el-title-main::after{right:0;left:auto}
/* The two guide pages build their hero differently; these bring it to the same sizes. */
.zr-page :is(.guide-hero,.safety-hero){padding:100px 0 95px}
.zr-page :is(.guide-hero,.safety-hero) .eyebrow{display:block;margin:0 auto 10px;color:#fe5a00;font-size:14px;font-weight:500;line-height:22px;letter-spacing:normal;text-transform:uppercase}
.zr-page :is(.guide-hero,.safety-hero) h1{max-width:1200px;margin:0 auto 12px;color:#242424;font-size:78px;font-weight:800;line-height:90px;letter-spacing:normal;text-transform:uppercase}
.zr-page :is(.guide-hero,.safety-hero) p{width:1000px;max-width:100%;margin:0 auto 32px;color:#666;font-size:17px;font-weight:500;line-height:26px;letter-spacing:-.4px}
.zr-page :is(.guide-hero,.safety-hero) a:is(.guide-button,.button){display:inline-flex;box-sizing:border-box;min-height:53px;border:0;align-items:center;justify-content:center;padding:20px 30px;border-radius:8px;background:#111;color:#fff;font-size:13px;font-weight:600;line-height:1;letter-spacing:.4px;text-transform:uppercase}
@media(min-width:768px) and (max-width:1024px){
 .zr-el-title.is-hero .zr-el-title-main>*,.zr-page :is(.guide-hero,.safety-hero) h1{font-size:56px;line-height:64px}
 .zr-el-title.is-hero .zr-el-title-after,.zr-page :is(.guide-hero,.safety-hero) p{width:calc(100% - 60px)}
}
@media(max-width:767px){
 .zr-el-con:has(>.zr-el-inner>.zr-el-title.is-hero){margin-top:10px;padding:0 0 65px}
 .zr-el-title.is-hero{margin-inline:0;padding-inline:0}
 .zr-el-title.is-hero .zr-el-title-sub,.zr-page :is(.guide-hero,.safety-hero) .eyebrow{max-width:calc(100% - 40px);font-size:12px;line-height:19px}
 .zr-el-title.is-hero .zr-el-title-main>*,.zr-page :is(.guide-hero,.safety-hero) h1{max-width:calc(100% - 40px);font-size:34px;line-height:40px}
 .zr-el-title.is-hero .zr-el-title-after,.zr-page :is(.guide-hero,.safety-hero) p{width:calc(100vw - 55px);max-width:min(100%,520px);font-size:14px;line-height:22px}
 .zr-el-title.is-hero.is-center .zr-el-title-after>p{padding-inline:0}
 .zr-page :is(.guide-hero,.safety-hero){margin-top:10px;padding:100px 0 65px}
 .zr-page :is(.guide-hero,.safety-hero)>*{width:100%!important;max-width:none!important}
 .zr-page :is(.guide-hero,.safety-hero) a:is(.guide-button,.button){min-height:53px;padding:20px 30px}
}

/* Size guide: the selected category buttons and the "Talk To Fit Specialists" button are orange,
   so their text is white (the page's own styles made it near-black). On hover the button turns
   to an outline with orange text, which is left as it is. */
.zr-page .pill[aria-pressed="true"],.zr-page .cta:not(:hover){color:#fff}