/* Mugs Printing: colourful kitchen-shelf skin in mosaic tiles. Warm stone page, ink headline tiles, six bright tile
   colours (blue, pink, yellow, cyan, green, orange) on a 10px gutter, 6px tile corners, Red Hat Display 900 headings +
   Red Hat Text body, yellow primary buttons. Loaded on every page; on shop pages after fp.css, whose tokens are
   re-pointed here so its components follow. Text on blue tiles is white, on every other colour it is ink (AA). */
@font-face{font-family:"Red Hat Display";src:url("../fonts/rh-display.woff2?v=1") format("woff2");font-weight:300 900;font-display:swap}
@font-face{font-family:"Red Hat Text";src:url("../fonts/rh-text.woff2?v=1") format("woff2");font-weight:300 700;font-display:swap}
:root{
  --page:#f2f0ea;--page2:#e8e4da;--card:#fff;--ink:#101418;--ink2:#2a2f35;--mute:#4b5259;--line:#dcd8cd;--line2:#8a8f94;
  --blue:#2d5bff;--blue-d:#1d43d6;--blue4:#dbe3ff;--pink:#ff2e8b;--pink-d:#c0135f;--pink4:#ffd6e8;--yellow:#ffd60a;--yellow4:#fff3b0;
  --cyan:#00d4e0;--cyan4:#c8f5f8;--green:#48e05a;--green-d:#1d7a2b;--green4:#d4f7d9;--orange:#ff6a13;--orange4:#ffdcc7;--wa:#00773a;
  --display:"Red Hat Display","Segoe UI",Arial,sans-serif;
  --body:"Red Hat Text","Segoe UI",Arial,sans-serif;
  --r:6px;--rS:5px;--rL:8px;--gap:10px;
  --lift:0 18px 30px -18px rgba(16,20,24,.55);
  --mg-gut:24px;
  --mg-key:linear-gradient(90deg,#2d5bff 0 12px,transparent 12px 15px,#ff2e8b 15px 27px,transparent 27px 30px,#ffd60a 30px 42px,transparent 42px 45px,#00d4e0 45px 57px,transparent 57px 60px,#48e05a 60px 72px,transparent 72px 75px,#ff6a13 75px 87px,transparent 87px);
  /* fp.css + fp-shop.css tokens, re-pointed to the mosaic palette */
  --fp-navy:#101418;--fp-navy-deep:#0a0d10;--fp-navy-2:#2a2f35;--fp-navy-3:#4b5259;
  --fp-red:#101418;--fp-red-deep:#000;--fp-paper:#f2f0ea;--fp-ink:#101418;
  --fp-mustard:#ffd60a;--fp-mustard-deep:#7a6200;--fp-sky:#1d43d6;--fp-sky-soft:#dbe3ff;--fp-mist:#e8e4da;
  --fp-card:#fff;--fp-line:#dcd8cd;--fp-line-strong:#8a8f94;--fp-muted:#4b5259;--fp-on-dark:#fff;--fp-on-dark-muted:#cfd2d5;
  --fp-f-display:"Red Hat Display","Segoe UI",Arial,sans-serif;
  --fp-f-body:"Red Hat Text","Segoe UI",Arial,sans-serif;
  --fp-r:6px;--fp-r-sm:5px;--fp-r-blob:8px;
  --fp-shadow:0 1px 2px rgba(16,20,24,.06),0 12px 24px -18px rgba(16,20,24,.4);
  --fp-mascot-shadow:none;
  --paper:#f2f0ea;--tint:#e8e4da;--ink-soft:#2a2f35;--muted:#4b5259;--line-strong:#8a8f94;
  --brand:#101418;--brand-dark:#000;--brand-soft:#fff3b0;--marker:#ffd60a;
  --f-display:"Red Hat Display","Segoe UI",Arial,sans-serif;
  --f-body:"Red Hat Text","Segoe UI",Arial,sans-serif;
  --f-mono:"Red Hat Text","Segoe UI",Arial,sans-serif;
}
@media (max-width:759px){:root{--mg-gut:16px;--gap:8px}}
/* tile colours: --c the tile, --on the text on it, --c4 a light tint of it */
.c-blue{--c:#2d5bff;--on:#fff;--c4:#dbe3ff}
.c-pink{--c:#ff2e8b;--on:#101418;--c4:#ffd6e8}
.c-yellow{--c:#ffd60a;--on:#101418;--c4:#fff3b0}
.c-cyan{--c:#00d4e0;--on:#101418;--c4:#c8f5f8}
.c-green{--c:#48e05a;--on:#101418;--c4:#d4f7d9}
.c-orange{--c:#ff6a13;--on:#101418;--c4:#ffdcc7}
.c-ink{--c:#101418;--on:#fff;--c4:#e8e4da}

/* ---------------- base ---------------- */
html{-webkit-text-size-adjust:100%}
body.mg-site{margin:0;background:var(--page);color:var(--ink);font:400 17px/1.55 var(--body);overflow-x:hidden}
.mg-front *,.mg-front *::before,.mg-front *::after,:where(.mg-util,.mg-hd,.mg-drawer,.mg-ft,.mg-cookie) :where(*,*::before,*::after){box-sizing:border-box}
:where(.mg-util,.mg-hd,.mg-drawer,.mg-ft,.mg-cookie,.mg-front main,.mg-404,.mg-404-dir,.mg-emptycart) :is(h1,h2,h3,p,ul,ol,li,figure,form,details,summary){margin:0;padding:0}
:where(.mg-util,.mg-hd,.mg-drawer,.mg-ft,.mg-cookie,.mg-front main,.mg-404,.mg-404-dir,.mg-emptycart) :is(ul,ol){list-style:none}
:where(.mg-util,.mg-hd,.mg-drawer,.mg-ft,.mg-cookie,.mg-front main,.mg-404,.mg-404-dir,.mg-emptycart) :is(a){color:inherit;text-decoration:none}
:where(.mg-util,.mg-hd,.mg-drawer,.mg-ft,.mg-cookie,.mg-front main) :is(img,svg){display:block;max-width:100%;height:auto}
:where(.mg-util,.mg-hd,.mg-drawer,.mg-ft,.mg-cookie,.mg-front main,.mg-404) :is(button,input){font:inherit;color:inherit;margin:0}
:where(.mg-hd,.mg-drawer,.mg-ft,.mg-cookie,.mg-404) button{background:none;border:0;padding:0;cursor:pointer}
body.mg-site :focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.mg-wrap{width:100%;max-width:1440px;margin-inline:auto;padding-inline:var(--mg-gut)}
.fp-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.mg-skip{position:absolute;left:-9999px;top:8px;z-index:1000;background:var(--ink);color:#fff;padding:10px 14px;font-weight:700;border-radius:var(--rS)}
.mg-skip:focus{left:8px}
.fp-ui{width:22px;height:22px;flex:none}
.mg-code{font:700 12.5px/1.2 var(--body);letter-spacing:.04em;text-transform:uppercase}
.mg-kick{display:flex;align-items:center;gap:12px;font:700 13px/1 var(--body);color:var(--ink);letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px!important}
.mg-kick::before{content:"";width:87px;height:12px;flex:none;background:var(--mg-key) left center/87px 12px no-repeat}

/* ---------------- buttons: 5px corners, yellow primary ---------------- */
.mg-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border:2px solid var(--ink);border-radius:var(--rS);background:#fff;color:var(--ink);font:800 15.5px/1 var(--display);text-decoration:none;cursor:pointer;transition:transform .15s ease,background .15s,color .15s,border-color .15s;white-space:nowrap}
.mg-btn:hover{transform:translateY(-2px)}
.mg-btn .fp-ui{width:19px;height:19px}
.mg-btn--lg{min-height:52px;padding:0 22px;font-size:16.5px}
.mg-btn--block{display:flex;width:100%}
.mg-btn--y{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
.mg-btn--y:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.mg-btn--k{background:var(--ink);color:#fff}
.mg-btn--k:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.mg-btn--w{background:#fff;border-color:#fff;color:var(--ink)}
.mg-btn--w:hover{background:var(--cyan);border-color:var(--cyan)}
.mg-btn--line{background:transparent}
.mg-btn--line:hover{background:var(--ink);color:#fff}
.mg-btn--line-w{background:transparent;border-color:#fff;color:#fff}
.mg-btn--line-w:hover{background:#fff;color:var(--ink)}
.mg-btn--wa{background:var(--wa);border-color:var(--wa);color:#fff}
.mg-btn--wa:hover{background:#00924a;border-color:#00924a;color:#fff}
@media (prefers-reduced-motion:reduce){.mg-btn,.mg-btn:hover{transition:none;transform:none}}

/* ---------------- utility bar ---------------- */
.mg-util{background:var(--ink);color:#fff;font:600 13.5px/1 var(--body)}
.mg-util-in{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:38px}
.mg-util p{display:flex;align-items:center;flex-wrap:nowrap;gap:0;min-width:0}
.mg-util a,.mg-util span{padding:10px 0;white-space:nowrap}
.mg-util a:hover{text-decoration:underline;text-underline-offset:3px}
.mg-util-x{border-left:1px solid #3a4047;margin-left:14px;padding-left:14px!important;color:#cfd2d5}
.mg-util-r{gap:14px!important}
.mg-util-r a+a{border-left:1px solid #3a4047;padding-left:14px!important}
@media (max-width:1180px){.mg-util-x2{display:none}}
@media (max-width:1000px){.mg-util-x{display:none}}
@media (max-width:759px){.mg-util-in{justify-content:center}.mg-util-r{display:none!important}.mg-util{font-size:12.5px}}

/* ---------------- header ---------------- */
.mg-hd{background:#fff;position:relative;z-index:50;border-bottom:1px solid var(--line)}
.mg-hd-main{display:flex;align-items:center;gap:20px;min-height:72px}
.mg-logo{display:flex;align-items:center;flex:none}
.mg-logo svg{width:227px;height:auto}
.mg-hd-search{flex:1;min-width:0;max-width:600px}
.mg-search{display:flex;align-items:center;background:var(--page);border:2px solid transparent;border-radius:var(--r);height:48px;padding:0 4px 0 2px}
.mg-search:focus-within{border-color:var(--ink);background:#fff}
.mg-search input{flex:1;min-width:0;height:100%;border:0;background:transparent;padding:0 14px;font:400 15.5px var(--body);color:var(--ink)}
.mg-search input::placeholder{color:#5f666d}
.mg-search input:focus{outline:none}
.mg-search button{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--rS);background:var(--ink);color:#fff;flex:none}
.mg-search button .fp-ui{width:18px;height:18px}
.mg-act{display:flex;align-items:center;gap:4px;margin-left:auto}
.mg-act a{display:flex;align-items:center;gap:7px;min-height:44px;padding:0 10px;border-radius:var(--rS);font:700 15px var(--display);color:var(--ink);white-space:nowrap}
.mg-act a:hover{background:var(--page)}
.mg-act-wa .fp-ui{color:var(--wa)}
.mg-bask{background:var(--yellow)!important;color:var(--ink)!important;padding:0 14px!important}
.mg-bask:hover{background:var(--ink)!important;color:#fff!important}
.mg-bask .fp-count{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border-radius:4px;background:var(--ink);color:#fff;font:800 12.5px/1 var(--display)}
.mg-bask:hover .fp-count{background:var(--yellow);color:var(--ink)}
.mg-bask .fp-count:empty{display:none}
.mg-burger{display:none;place-items:center;width:44px;height:44px;border-radius:var(--rS);background:var(--page);color:var(--ink)}
.mg-msearch{display:none;padding-bottom:10px}
@media (max-width:1280px){.mg-act-wa span,.mg-act-acc span{display:none}}
@media (max-width:1100px){.mg-act-tel span{display:none}.mg-hd-main{gap:12px}}
@media (max-width:759px){
  .mg-hd-main{min-height:62px;gap:6px}
  .mg-burger{display:grid}
  .mg-logo svg{width:172px}
  .mg-hd-search,.mg-act-acc,.mg-act-wa{display:none!important}
  .mg-msearch{display:block}
  .mg-bask-l{display:none}
  .mg-act a{padding:0 8px}
  .mg-bask{padding:0 10px!important}
}
@media (max-width:359px){.mg-logo svg{width:146px}.mg-act-tel{display:none!important}}

/* nav: a row of colour tiles + "All mugs" mega panel */
.mg-nav{position:relative;background:var(--page);padding:10px 0}
.mg-nav-in{display:flex;align-items:center;gap:var(--gap)}
.mg-mm-btn{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 18px;border-radius:var(--r);background:var(--ink);color:#fff;font:800 15.5px var(--display);white-space:nowrap}
.mg-mm-btn .fp-ui{width:18px;height:18px}
.mg-mm-btn[aria-expanded="true"]{background:var(--blue)}
.mg-nav-links{display:flex;flex-wrap:nowrap;gap:var(--gap);min-width:0;flex:1}
.mg-nav-links li{flex:1 1 auto;min-width:0}
.mg-nav-links a{display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 14px;border-radius:var(--r);background:var(--c);color:var(--on);font:800 15px/1.15 var(--display);white-space:nowrap;transition:transform .15s ease}
.mg-nav-links a:hover{transform:translateY(-3px)}
.mg-nav-q{display:inline-flex;align-items:center;min-height:48px;padding:0 18px;border-radius:var(--r);background:#fff;border:2px solid var(--ink);color:var(--ink)!important;font:800 15.5px var(--display);white-space:nowrap}
.mg-nav-q:hover{background:var(--ink);color:#fff!important}
.mg-mega{position:absolute;left:0;right:0;top:100%;z-index:60;padding:0 var(--mg-gut)}
.mg-mega[hidden]{display:none}
.mg-mega-in{max-width:1392px;margin:0 auto;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--gap);background:var(--page);border-radius:0 0 var(--rL) var(--rL);padding:0 0 var(--gap);box-shadow:0 40px 50px -30px rgba(16,20,24,.5)}
.mg-mega-col{border-radius:var(--r);padding:18px;display:flex;flex-direction:column}
.mg-mega-col--personal{background:var(--pink4)}.mg-mega-col--mugs{background:var(--blue4)}.mg-mega-col--travel{background:var(--green4)}.mg-mega-col--cups{background:var(--orange4)}.mg-mega-col--bottles{background:var(--cyan4)}.mg-mega-col--cta{background:var(--ink);color:#fff}
.mg-mega-h{font:900 21px/1.1 var(--display);letter-spacing:-.01em;margin-bottom:10px!important}
.mg-mega-col ul a{display:flex;flex-direction:column;justify-content:center;min-height:50px;padding:5px 10px;border-radius:var(--rS)}
.mg-mega-help{margin-top:6px!important;display:grid;gap:0}.mg-mega-help a{min-height:40px!important;color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:3px}.mg-mega-help a:hover{background:#2a2f35!important}
.mg-mega-col ul a:hover{background:rgba(255,255,255,.75)}
.mg-mega-col a b{font:800 16px/1.2 var(--display)}
.mg-mega-col a small{font-size:14px;color:var(--mute)}
.mg-mega-col--cta p:not(.mg-mega-h){color:#cfd2d5;font-size:15.5px;margin-bottom:14px!important}
.mg-mega-col--cta .mg-btn{display:flex;margin-top:8px}
.mg-mega-all{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:auto;padding:0 10px;font:800 15px var(--display);color:var(--ink)}
.mg-mega-all .fp-ui{width:17px}
@media (max-width:1440px){.mg-nav-links li:nth-child(n+7){display:none}}
@media (max-width:1300px){.mg-nav-links li:nth-child(n+6){display:none}}
@media (max-width:1180px){.mg-nav-links li:nth-child(n+5){display:none}}
@media (max-width:1180px){.mg-mega-in{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:1040px){.mg-nav-links li:nth-child(n+4){display:none}.mg-mega-in{grid-template-columns:1fr 1fr}}
@media (max-width:900px){.mg-nav-links li:nth-child(n+3){display:none}}
@media (max-width:759px){.mg-nav{display:none}}

/* ---------------- drawer ---------------- */
.mg-drawer{position:fixed;inset:0;z-index:1000;background:rgba(16,20,24,.55)}
.mg-drawer[hidden]{display:none}
.mg-drawer-in{position:absolute;left:0;top:0;bottom:0;width:min(370px,90vw);background:var(--page);display:flex;flex-direction:column;overflow:hidden}
.mg-drawer-top{display:flex;align-items:center;justify-content:space-between;padding:10px 12px 10px 20px;background:var(--ink);color:#fff}
.mg-drawer-t{font:900 22px var(--display)}
.mg-drawer-x{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--rS);background:#2a2f35;color:#fff}
.mg-drawer-body{flex:1;overflow:auto;padding:14px 14px 18px}
.mg-drawer-h{display:flex;align-items:center;gap:10px;font:800 13px/1 var(--body);color:var(--ink);text-transform:uppercase;letter-spacing:.08em;margin:18px 4px 8px!important}
.mg-drawer-h::before{content:"";width:40px;height:10px;background:var(--mg-key) left center/72px 10px no-repeat}
.mg-drawer-h:first-child{margin-top:4px!important}
.mg-drawer-list{display:grid;gap:6px}
.mg-drawer-list a{display:flex;flex-direction:column;justify-content:center;min-height:54px;padding:8px 14px;border-radius:var(--r);background:#fff;border-left:6px solid var(--line)}
.mg-drawer-list--personal a{border-left-color:var(--pink)}.mg-drawer-list--mugs a{border-left-color:var(--blue)}.mg-drawer-list--travel a{border-left-color:var(--green)}.mg-drawer-list--bottles a{border-left-color:var(--cyan)}
.mg-drawer-list a b{font:800 16px/1.2 var(--display)}
.mg-drawer-list a small{font-size:14px;color:var(--mute)}
.mg-drawer-list--help{grid-template-columns:1fr 1fr}
.mg-drawer-list--help a{min-height:46px;font-weight:700;border-left-color:var(--yellow)}
.mg-drawer-all{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin:6px 4px 0;font:800 15px var(--display);color:var(--ink);text-decoration:underline!important;text-underline-offset:3px}
.mg-drawer-all .fp-ui{width:18px}
.mg-drawer-foot{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px 14px;background:#fff;border-top:1px solid var(--line)}
.mg-drawer-foot .mg-btn{padding:0 10px;font-size:14.5px}
.mg-drawer-foot .mg-btn--y{grid-column:1/-1}
html.fp-lock,html.mg-lock{overflow:hidden}

/* ---------------- footer: mega footer in tiles ---------------- */
.mg-ft{background:var(--page);color:var(--ink);margin-top:56px}
.mg-ft-trust{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);margin-bottom:var(--gap)}
.mg-ft-trust li{display:flex;gap:12px;align-items:flex-start;padding:18px;border-radius:var(--r);background:var(--c);color:var(--on)}
.mg-ft-trust .fp-ui{color:var(--on)}
.mg-ft-trust b{display:block;font:900 18px/1.2 var(--display);margin-bottom:3px;color:inherit}
.mg-ft-trust span{font-size:15px;line-height:1.35}
.mg-ft-main{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:30px 22px;background:var(--ink);color:#fff;border-radius:var(--rL);padding:34px 30px;position:relative;overflow:hidden}
.mg-ft-main::before{content:"";position:absolute;left:30px;top:0;width:87px;height:8px;background:var(--mg-key) left top/87px 8px no-repeat}
.mg-ft-brand{grid-column:1/-1;display:grid;grid-template-columns:1.3fr 1fr 1.2fr;gap:0 32px;padding:0 0 26px;border-bottom:1px solid #2f353c}.mg-ft-brand>a,.mg-ft-brand>p{grid-column:1}.mg-ft-contact{grid-column:2;grid-row:1/3;margin:0!important;align-content:start}.mg-ft-points{grid-column:3;grid-row:1/3;margin:0!important;align-content:start;grid-template-columns:1fr 1fr;gap:12px 18px!important}
.mg-ft-brand svg{width:249px;height:auto;margin-bottom:14px}
.mg-ft-brand>p{color:#cfd2d5;font-size:15.5px;max-width:40ch}
.mg-ft-contact{margin-top:14px!important;display:grid;gap:2px}
.mg-ft-contact li{display:flex;align-items:center;gap:10px}
.mg-ft-contact .fp-ui{width:18px;height:18px;color:var(--yellow)}
.mg-ft-contact a{display:inline-flex;align-items:center;min-height:40px;color:#fff;font-weight:700;text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:4px}
.mg-ft-contact a:hover{text-decoration-color:#fff}
.mg-ft-points{margin-top:14px!important;display:grid;gap:8px}
.mg-ft-points li{position:relative;padding-left:22px;font-size:14.5px;color:#cfd2d5}
.mg-ft-points li::before{content:"";position:absolute;left:0;top:5px;width:12px;height:12px;border-radius:2px;background:var(--green)}
.mg-ft-points li:nth-child(2)::before{background:var(--pink)}.mg-ft-points li:nth-child(3)::before{background:var(--yellow)}.mg-ft-points li:nth-child(4)::before{background:var(--cyan)}
.mg-ft-col{min-width:0}
.mg-ft-col summary{display:flex;align-items:center;justify-content:space-between;list-style:none;cursor:default}
.mg-ft-col summary::-webkit-details-marker{display:none}
.mg-ft-col summary .fp-ui{display:none}
.mg-ft-col h2{font:900 19px/1.2 var(--display);color:#fff;margin-bottom:12px}
.mg-ft-col a{display:inline-flex;align-items:center;min-height:36px;padding:3px 0;color:#cfd2d5;font-size:14.5px;line-height:1.3}
.mg-ft-col a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.mg-ft-col a.mg-ft-all{color:var(--yellow);font-weight:700}
.mg-ft-pay{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:16px 4px}
.mg-ft-secure{display:flex;align-items:center;gap:8px;font:500 14.5px var(--body);color:var(--mute)}
.mg-ft-secure .fp-ui{width:18px;color:var(--green-d)}
.mg-pays{display:flex;gap:8px;flex-wrap:wrap}
.mg-pays li{display:grid;place-items:center;width:58px;height:36px;background:#fff;color:var(--ink);padding:5px 8px;border-radius:var(--rS);border:1px solid var(--line)}
.mg-pays svg{width:100%;height:100%}
.mg-ft-base{border-top:1px solid var(--line);color:var(--mute);font-size:14px}
.mg-ft-base-in{display:flex;justify-content:space-between;align-items:center;gap:8px 24px;flex-wrap:wrap;padding-block:14px 18px}
.mg-ft-base p{max-width:92ch;line-height:1.5}
.mg-ft-legal{display:flex;gap:4px 18px;flex-wrap:wrap}
.mg-ft-legal a,.mg-ft-legal button{display:inline-flex;align-items:center;min-height:40px;color:var(--ink);font:700 14px var(--body);text-decoration:underline;text-underline-offset:3px}
@media (max-width:1180px){.mg-ft-main{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:28px}.mg-ft-col:last-child{grid-column:span 2}.mg-ft-col:last-child ul{columns:2;column-gap:22px}.mg-ft-points{grid-template-columns:1fr!important}}
@media (max-width:1180px) and (min-width:760px){.mg-ft-trust{grid-template-columns:1fr 1fr}}
@media (max-width:900px) and (min-width:760px){.mg-ft-main{grid-template-columns:1fr 1fr 1fr}.mg-ft-col:last-child{grid-column:span 3}.mg-ft-col:last-child ul{columns:3}.mg-ft-brand{grid-template-columns:1fr 1fr}.mg-ft-points{grid-column:1/-1;grid-row:auto;margin-top:16px!important;grid-template-columns:1fr 1fr!important}}
@media (max-width:759px){
  .mg-ft{margin-top:40px}
  .mg-ft-trust{grid-template-columns:1fr 1fr}
  .mg-ft-trust li{padding:14px 12px;gap:8px;flex-direction:column}.mg-ft-trust b{font-size:16px}.mg-ft-trust span{font-size:13.5px}
  .mg-ft-main{grid-template-columns:1fr;gap:0;padding:28px 18px 12px}
  .mg-ft-main::before{left:18px}
  .mg-ft-brand{display:block;margin-bottom:16px;padding-bottom:18px}
  .mg-ft-points{grid-template-columns:1fr!important}
  .mg-ft-col:last-child{grid-column:auto}.mg-ft-col:last-child ul{columns:1}
  .mg-ft-brand svg{width:220px}
  .mg-ft-contact,.mg-ft-points{margin-top:14px!important}
  .mg-ft-col{border-top:1px solid #2f353c}
  .mg-ft-col summary{min-height:52px;cursor:pointer}
  .mg-ft-col summary .fp-ui{display:block;width:18px;color:#fff;transition:transform .15s}
  .mg-ft-col[open] summary .fp-ui{transform:rotate(180deg)}
  .mg-ft-col h2{margin:0;font-size:18px}
  .mg-ft-col ul{padding-bottom:12px!important}
  .mg-ft-col a{min-height:44px}
  .mg-ft-base-in{flex-direction:column;align-items:flex-start}
}

/* ---------------- cookie bar ---------------- */
.fp-cathead-in.fp-wrap,.fp-arthead-in.fp-wrap{width:calc(100% - 2 * var(--mg-gut));max-width:1392px}
.mg-cookie{position:fixed;left:12px;right:12px;bottom:12px;z-index:900;background:#fff;border-radius:var(--rL);border-top:6px solid var(--ink);box-shadow:0 20px 50px -12px rgba(16,20,24,.5),0 0 0 1px var(--line)}
.mg-cookie[hidden]{display:none}
.mg-cookie-in{display:flex;align-items:center;gap:20px;padding-block:14px}
.mg-cookie p{font-size:15px;color:var(--ink);flex:1}
.mg-cookie p a{text-decoration:underline;color:var(--blue-d)}
.mg-cookie-btns{display:flex;gap:8px;flex:none}
@media (max-width:759px){.fp-cathead-in.fp-wrap,.fp-arthead-in.fp-wrap{width:calc(100% - 2 * var(--mg-gut));max-width:1392px}
.mg-cookie{left:8px;right:8px;bottom:8px}.mg-cookie-in{flex-direction:column;align-items:stretch;gap:10px}.mg-cookie p{font-size:14px}.mg-cookie-btns .mg-btn{flex:1;padding:0 8px;font-size:14px}}

/* ---------------- floating help: one dock in this shop's style (quote wizard + smart WhatsApp) ----------------
   Below 1600 px there is no free margin beside the content, so the help sits in a slim ink dock across the bottom and the
   page is padded by the dock's height: nothing is ever hidden under it (the viewport just ends above it). On product
   pages on phones it stacks above the add-to-basket bar. From 1600 px it becomes two buttons in the empty right margin.
   The engine's own floating buttons are hidden; its quote wizard is what the Quote button opens. */
html body a.fp-wa.wa-float,html body .fpqc-btn{display:none!important}
.mg-dock{position:fixed;left:0;right:0;bottom:var(--mg-mbar,0px);z-index:880;background:var(--ink);color:#fff;border-top:4px solid transparent;border-image:linear-gradient(90deg,#2d5bff 0 16.6%,#ff2e8b 0 33.3%,#ffd60a 0 50%,#00d4e0 0 66.6%,#48e05a 0 83.3%,#ff6a13 0) 1;padding-bottom:env(safe-area-inset-bottom,0px);transition:transform .2s}
.mg-dock-in{display:flex;align-items:center;gap:8px;max-width:1440px;margin-inline:auto;padding:7px var(--mg-gut)}
.mg-dock-t{flex:1;font-size:15px;line-height:1.35;color:#e9ebed;min-width:0}
.mg-dock-t b{color:#fff;font-family:var(--display);font-weight:800}
.mg-dock-q,.mg-dock-wa{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:var(--r);font:800 15.5px/1 var(--display);text-decoration:none;white-space:nowrap;flex:none}
.mg-dock-q{background:var(--yellow);color:var(--ink)}
.mg-dock-wa{background:var(--wa);color:#fff;box-shadow:inset 0 0 0 2px #2fa463}
.mg-dock-q:hover{background:#fff}.mg-dock-wa:hover{background:#00612f}
.mg-dock a:focus-visible{outline:3px solid #fff;outline-offset:2px}
.mg-dock .fp-ui{width:20px;height:20px;flex:none}
body.mg-site{padding-bottom:var(--mg-dock-h,62px)}
html.mg-ck .mg-dock,html.mg-qc-open .mg-dock{visibility:hidden}
/* the quote wizard panel sits at the bottom on phones: the product page's add-to-basket bar steps aside while it is open */
html.fpqc-open .fp-mbar,html.fpqc-open .mg-dock{visibility:hidden!important}
@media (max-width:899px){.mg-dock-t{display:none}.mg-dock-q,.mg-dock-wa{flex:1}}
@media (max-width:359px){.mg-dock-q,.mg-dock-wa{padding:0 10px;font-size:14.5px;gap:6px}}
@media (min-width:1600px){
  body.mg-site{padding-bottom:0}
  .mg-dock{left:auto;right:16px;bottom:24px;background:none;border:0;padding:0}
  .mg-dock-in{flex-direction:column;align-items:stretch;padding:0;gap:10px}
  .mg-dock-t{display:none}
  .mg-dock-q,.mg-dock-wa{width:58px;height:58px;padding:0;border-radius:50%;box-shadow:0 0 0 3px #fff,0 12px 26px -10px rgba(16,20,24,.6)}
  .mg-dock-q span,.mg-dock-wa span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .mg-dock .fp-ui{width:26px;height:26px}
}
@media (min-width:1800px){
  .mg-dock-q,.mg-dock-wa{width:auto;height:52px;padding:0 20px;border-radius:var(--r)}
  .mg-dock-q span,.mg-dock-wa span{position:static;width:auto;height:auto;overflow:visible;clip:auto}
  .mg-dock .fp-ui{width:20px;height:20px}
}
@media print{.mg-dock{display:none}}


/* ---------------- sidebar (inc/side.php): every page type except home and single products ----------------
   Desktop: a 300 px right column (article pages keep their 320 px .fp-art column); below 1200 px (articles 1024 px) it
   moves under the content, in two columns of cards on tablets. Self-contained: category, blog and search pages do not
   load the article sheet. */
.mg-withside{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
.mg-main{min-width:0}
@media (min-width:1200px){
  .mg-withside{grid-template-columns:minmax(0,1fr) 300px;gap:32px;align-items:start}
  .mg-withside .fp-pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mg-withside .fp-fill-c4{display:none}.mg-withside .fp-fill.fp-fill-c3{display:flex}
  .mg-withside .fp-cat-end{grid-template-columns:minmax(0,1fr)}
}
.mg-withside>.mg-side{padding-top:24px}
/* beside the sidebar the content column is too narrow for the two-column guide copy: one readable column */
.mg-withside .fp-prose--cols{columns:auto;max-width:76ch}
.mg-side{display:flex;flex-direction:column;gap:12px;min-width:0}
.mg-side .fp-side-flow{display:flex;flex-direction:column;gap:12px}
.mg-side .fp-sc{display:block;background:#fff;border-radius:var(--rL);box-shadow:0 0 0 1px var(--line);padding:18px;color:var(--ink);margin:0}
.mg-side .fp-sc-h{display:block;font:900 19px/1.2 var(--display);color:var(--ink);margin:0 0 12px;letter-spacing:-.01em}
.mg-side ul,.mg-side ol{list-style:none;margin:0;padding:0}
.mg-side a{color:var(--ink)}
.mg-side a.mg-btn--wa{color:#fff}.mg-side a.mg-btn--y{color:var(--ink)}
.mg-sc-help{position:relative;background:var(--ink)!important;color:#fff!important;box-shadow:none!important;padding-top:24px!important;overflow:hidden}
.mg-sc-help::before{content:"";position:absolute;left:18px;top:0;width:87px;height:6px;background:var(--mg-key) left top/87px 6px no-repeat}
.mg-side .mg-sc-help .fp-sc-h{color:#fff;font-size:21px}
.mg-sc-help p{color:#e3e6e9;font-size:15px;line-height:1.5;margin:0 0 14px}
.mg-sc-btns{display:grid;gap:8px}
.mg-sc-btns .mg-btn{width:100%}
.mg-side .mg-sc-call{display:flex;align-items:center;gap:8px;margin:12px 0 0;font-size:15px}
.mg-sc-call .fp-ui{width:18px;height:18px;color:var(--yellow)}
.mg-side .mg-sc-call a{color:#fff;font-weight:800;text-decoration:underline;text-underline-offset:3px;min-height:40px;display:inline-flex;align-items:center}
.mg-sc-ranges li+li{margin-top:6px}
.mg-sc-ranges a{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:46px;padding:6px 12px 6px 14px;border-radius:var(--rS);background:var(--c4);border-left:6px solid var(--c);font:800 15.5px/1.25 var(--display);text-decoration:none}
.mg-sc-ranges a:hover{background:var(--c)}
.mg-sc-ranges small{flex:none;min-width:28px;text-align:center;padding:3px 7px;border-radius:99px;background:#fff;font:800 13px/1.2 var(--body);color:var(--ink)}
.mg-sc-pop li+li{margin-top:8px}
.mg-sc-pop a{display:grid;grid-template-columns:56px minmax(0,1fr);gap:12px;align-items:center;min-height:56px;text-decoration:none}
.mg-sc-pop img{width:56px;height:56px;object-fit:cover;border-radius:var(--rS);background:var(--page2)}
.mg-sc-pop b{display:block;font:800 15.5px/1.25 var(--display)}
.mg-sc-pop small{display:block;font-size:14px;color:var(--mute);margin-top:2px}
.mg-sc-pop a:hover b{text-decoration:underline}
.mg-sc-posts li{border-top:1px solid var(--line)}
.mg-sc-posts li:first-child{border-top:0}
.mg-sc-posts li a{display:flex;align-items:center;min-height:46px;padding:6px 0;font-weight:700;font-size:15px;line-height:1.35;text-decoration:none}
.mg-sc-posts li a:hover{text-decoration:underline;color:var(--blue-d)}
.mg-side .fp-side-more{display:inline-flex;align-items:center;gap:6px;min-height:44px;font:800 15px var(--display);color:var(--blue-d);text-decoration:underline;text-underline-offset:3px}
.mg-side .fp-side-more .fp-ui{width:16px;height:16px}
.mg-sc-trust li{display:flex;gap:12px;align-items:flex-start;padding:8px 0}
.mg-sc-trust li .fp-ui{flex:none;width:34px;height:34px;padding:7px;border-radius:var(--rS);background:var(--c);color:var(--on)}
.mg-sc-trust b{display:block;font:800 15.5px/1.25 var(--display)}
.mg-sc-trust span{font-size:14.5px;line-height:1.4;color:var(--mute)}
@media (max-width:1199px){.mg-withside>.mg-side{display:block;columns:2 300px;column-gap:12px;padding-top:0}.mg-withside>.mg-side .fp-side-flow{display:contents}.mg-withside>.mg-side .fp-sc{break-inside:avoid;margin:0 0 12px}}
.mg-sx .mg-sx-in{width:100%}
.mg-sx .sx-head{border-radius:var(--rL);overflow:hidden;margin-top:12px}
.mg-sx .sx-head-in{padding:26px 28px 22px}
@media (max-width:759px){.mg-sx .sx-head-in{padding:20px 18px 18px}}


/* blog index before the first guide goes live: a finished page, not "Nothing found" */
.mg-blogempty h2{font:900 24px/1.2 var(--display);margin:30px 0 12px;letter-spacing:-.01em}
.mg-blogempty-t{background:#fff;border-radius:var(--rL);border-left:8px solid var(--yellow);padding:18px 20px;font-size:17px;line-height:1.55;margin:0}
.mg-blogempty-t b{font-family:var(--display);font-weight:800}
.mg-blogempty ul{list-style:none;margin:0;padding:0}
.mg-blogempty-next{display:grid;gap:8px}
.mg-blogempty-next li{display:flex;gap:14px;align-items:center;background:#fff;border-radius:var(--r);padding:12px 16px;box-shadow:0 0 0 1px var(--line)}
.mg-blogempty-next span{flex:none;min-width:58px;text-align:center;padding:6px 8px;border-radius:var(--rS);background:var(--ink);color:#fff;font:800 14px/1.1 var(--display)}
.mg-blogempty-next b{font:700 16px/1.35 var(--body)}
.mg-blogempty-ranges{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.mg-blogempty-ranges a{display:flex;flex-direction:column;justify-content:space-between;gap:16px;min-height:104px;padding:16px;border-radius:var(--r);background:var(--c);color:var(--on);text-decoration:none}
.mg-blogempty-ranges a:hover{transform:translateY(-2px)}
.mg-blogempty-ranges b{font:900 19px/1.15 var(--display)}
.mg-blogempty-ranges span{font:700 14px var(--body)}
.fp-prose .mg-blogempty-ranges a,.fp-prose .mg-blogempty-ranges a b,.fp-prose .mg-blogempty-ranges a span{color:var(--on);text-decoration:none}
.fp-prose .mg-blogempty-help a{color:var(--ink)}.fp-prose .mg-blogempty-help a span{color:var(--mute)}
.mg-blogempty-help{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.mg-blogempty-help a{display:block;height:100%;background:#fff;border-radius:var(--r);padding:16px 18px;box-shadow:0 0 0 1px var(--line);color:var(--ink);text-decoration:none}
.mg-blogempty-help a:hover{box-shadow:0 0 0 2px var(--ink)}
.mg-blogempty-help b{display:block;font:800 17px/1.25 var(--display);margin-bottom:4px;text-decoration:underline;text-underline-offset:3px}
.mg-blogempty-help span{font-size:15px;line-height:1.45;color:var(--mute)}


/* prose tables on narrow phones (product options / specs, delivery speeds): stacked rows instead of a cramped
   sideways-scrolling grid whose last column sits off screen */
@media (max-width:520px){
  .fp-prose table:not(.fp-ptable){display:block;width:auto;overflow:visible;border:0}
  .fp-prose table:not(.fp-ptable) thead{display:none}
  .fp-prose table:not(.fp-ptable) tbody,.fp-prose table:not(.fp-ptable) tr,.fp-prose table:not(.fp-ptable) td,.fp-prose table:not(.fp-ptable) tbody th{display:block;width:auto;text-align:left}
  .fp-prose table:not(.fp-ptable) tr{padding:10px 2px;border-bottom:1px solid var(--line);background:none!important}
  .fp-prose table:not(.fp-ptable) td,.fp-prose table:not(.fp-ptable) tbody th{padding:2px 0!important;border:0!important;background:none!important;color:var(--ink)}
  .fp-prose table:not(.fp-ptable) tr>:first-child{font:800 16px/1.3 var(--display)}
  .fp-prose table:not(.fp-ptable) tr>:nth-child(3){color:var(--mute);font-size:14.5px}
}


/* quote page (page-get-a-quote.php) */
.mg-quotepage{padding-top:24px;padding-bottom:40px}
.mg-qstart{display:flex;align-items:center;justify-content:space-between;gap:20px;background:var(--ink);color:#fff;border-radius:var(--rL);padding:28px 30px;position:relative;overflow:hidden}
.mg-qstart::before{content:"";position:absolute;left:30px;top:0;width:87px;height:8px;background:var(--mg-key) left top/87px 8px no-repeat}
.mg-qstart h2{font:900 30px/1.1 var(--display);margin:0 0 8px;color:#fff;letter-spacing:-.02em}
.mg-qstart p{margin:0;color:#e3e6e9;font-size:16.5px;line-height:1.5;max-width:52ch}
.mg-qstart .mg-btn{flex:none;border:0}
.mg-qways{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.mg-qways li{display:flex;gap:12px;align-items:center;background:var(--c);color:var(--on);border-radius:var(--r);padding:16px 18px}
.mg-qways .fp-ui{width:26px;height:26px;flex:none}
.mg-qways b{display:block;font:900 18px/1.2 var(--display)}
.mg-qways a{color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px;word-break:break-word}
.mg-qh{font:900 26px/1.2 var(--display);margin:34px 0 12px;letter-spacing:-.015em}
.mg-qnext{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;counter-reset:q}
.mg-qnext li{background:#fff;border-radius:var(--r);box-shadow:0 0 0 1px var(--line);padding:18px;counter-increment:q}
.mg-qnext li::before{content:counter(q);display:grid;place-items:center;width:34px;height:34px;border-radius:var(--rS);background:var(--yellow);color:var(--ink);font:900 17px var(--display);margin-bottom:10px}
.mg-qnext b{display:block;font:800 17px/1.25 var(--display);margin-bottom:4px}
.mg-qnext span{font-size:15px;line-height:1.5;color:var(--mute)}
.mg-qfaq details{background:#fff;border-radius:var(--r);box-shadow:0 0 0 1px var(--line);margin-bottom:8px}
.mg-qfaq summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:10px 18px;font:800 17px/1.3 var(--display);cursor:pointer;list-style:none}
.mg-qfaq summary::-webkit-details-marker{display:none}
.mg-qfaq summary .fp-ui{width:18px;height:18px;flex:none;transition:transform .15s}
.mg-qfaq details[open] summary .fp-ui{transform:rotate(180deg)}
.mg-qfaq details>div{padding:0 18px 16px}
.mg-qfaq p{margin:0;font-size:16px;line-height:1.55;color:var(--ink2)}
@media (max-width:899px){.mg-qstart{flex-direction:column;align-items:stretch}.mg-qways,.mg-qnext{grid-template-columns:1fr}}

/* ---------------- shared pieces ---------------- */
.mg-ctas{display:flex;flex-wrap:wrap;gap:10px}
.mg-more{display:inline-flex;align-items:center;gap:6px;min-height:44px;font:800 15.5px var(--display);color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.mg-more .fp-ui{width:17px}

/* ---------------- 404 + empty basket ---------------- */
.mg-404{padding-block:24px 8px}
.mg-404-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--gap)}
.mg-404-art{background:var(--yellow);border-radius:var(--rL);display:grid;place-items:center;min-height:320px;position:relative;overflow:hidden}
.mg-404-mug{position:relative;width:46%;aspect-ratio:1/1.05;background:#fff;border-radius:6px 6px 30px 30px/6px 6px 18px 18px;box-shadow:0 26px 30px -18px rgba(16,20,24,.5);display:grid;place-items:center;transform:rotate(-6deg)}
.mg-404-mug::after{content:"";position:absolute;right:-30%;top:22%;width:36%;height:46%;border:14px solid #fff;border-left:0;border-radius:0 50% 50% 0}
.mg-404-mug span{font:900 clamp(48px,7vw,84px)/1 var(--display);color:var(--ink);letter-spacing:-.04em}
.mg-404-txt{background:#fff;border-radius:var(--rL);padding:34px}
.mg-404 h1{font:900 clamp(30px,4vw,46px)/1.06 var(--display);letter-spacing:-.025em;margin:6px 0 12px}
.mg-404-txt>p{color:var(--mute);max-width:52ch}
.mg-search--big{max-width:520px;margin:18px 0 12px;height:54px;border-color:var(--line)}
.mg-404-dym{margin-bottom:12px!important}.mg-404-dym a{color:var(--blue-d);font-weight:700;text-decoration:underline}
.mg-404-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--gap)}
.mg-404-cols>div{background:#fff;border-radius:var(--rL);padding:20px;border-top:8px solid var(--pink)}
.mg-404-cols>div:nth-child(2){border-top-color:var(--blue)}.mg-404-cols>div:nth-child(3){border-top-color:var(--green)}.mg-404-cols>div:nth-child(4){border-top-color:var(--cyan)}.mg-404-cols>div:nth-child(5){border-top-color:var(--yellow)}
.mg-404-cols h2,.mg-404-cols h3{font:900 22px var(--display);margin-bottom:8px}
.mg-404-cols a{display:flex;align-items:center;justify-content:space-between;min-height:46px;border-bottom:1px solid var(--line);font-weight:700;color:var(--ink);text-decoration:none}
.mg-404-cols li:last-child a{border-bottom:0}
.mg-404-cols a .fp-ui{width:16px;color:var(--ink)}
.mg-404-cols a:hover{color:var(--blue-d)}
.mg-emptycart{padding:8px 0 24px}
.mg-emptycart h2{font:900 30px var(--display);margin-bottom:6px}
.mg-emptycart>p{color:var(--mute);margin-bottom:20px}
.mg-emptycart .mg-404-cols{grid-template-columns:repeat(2,1fr)}
.mg-emptycart .mg-404-cols>div{background:var(--page)}
@media (max-width:759px){.mg-404-in,.mg-404-cols,.mg-emptycart .mg-404-cols{grid-template-columns:1fr}.mg-404-art{min-height:220px}.mg-404-txt{padding:24px 18px}}

/* ---------------- sections ---------------- */
.mg-sec{padding-block:52px}
.mg-sec-h{max-width:780px;margin-bottom:24px}
.mg-sec-h h2{font:900 clamp(30px,3.4vw,48px)/1.04 var(--display);letter-spacing:-.03em;color:var(--ink);margin-bottom:10px}
.mg-sec-h p:not(.mg-kick){color:var(--mute);font-size:17px;max-width:66ch}
@media (max-width:759px){.mg-sec{padding-block:36px}.mg-sec-h{margin-bottom:18px}}