/*
 * Moto Equip: the Demon Tweeks manner - charcoal chrome, a yellow strip,
 * white cards on a light grey page, and prices shown both ex and inc VAT.
 * Loaded after shop_style.css, so it only has to say what differs.
 */
:root{
  --me-dark:#363636;      /* header, headings, buttons */
  --me-nav:#404040;       /* the department tabs */
  --me-yellow:#f5e003;    /* shipping strip, tile captions */
  --me-red:#d0021b;       /* sale, required, offers */
  --me-line:#e3e3e3;
  --me-grey:#f4f4f4;
  --me-text:#363636;
  --me-muted:#767676;
}
body.me{ font-family:Roboto,Arial,Helvetica,sans-serif; color:var(--me-text); background:#fff; margin:0; }
body.me .me-main a, body.me .me-side a{ color:var(--me-text); }
.me-wrap{ max-width:1280px; margin:0 auto; padding:0 16px; }

/* ---- the thin strip above everything */
.me-util{ background:#2b2b2b; color:#cfcfcf; font-size:11px; letter-spacing:.04em; }
.me-util-in{ display:flex; align-items:center; gap:14px; height:26px; }
.me-util a{ color:#cfcfcf; text-decoration:none; }
.me-util a:hover{ color:#fff; text-decoration:underline; }
.me-or{ color:#8c8c8c; }
.me-util-cur{ margin-left:auto; }

/* ---- logo, promos, basket */
.me-top{ background:var(--me-dark); color:#fff; }
.me-top-in{ display:flex; align-items:center; gap:24px; min-height:62px; }
/* shop_style.css colours every <a> red; the dark chrome says otherwise */
body.me .me-logo, body.me .me-logo-text, body.me .me-basket, body.me .me-basket-t,
body.me .me-tabs a, body.me .me-util a{ color:#fff; }
body.me .me-util a{ color:#cfcfcf; }
body.me .me-tabs a.is-on{ color:var(--me-dark); }
body.me .me-strip a{ color:#2b2b2b; }
.me-logo{ text-decoration:none; color:#fff; }
.me-logo img{ max-height:42px; width:auto; display:block; }
.me-logo-text{ font-size:30px; font-weight:300; letter-spacing:-.02em; }
.me-logo-text b{ font-weight:700; }
.me-promos{ display:flex; gap:22px; margin-left:18px; }
.me-promo{ display:grid; grid-template-columns:auto auto; column-gap:9px; align-items:center; line-height:1.25; }
.me-promo svg{ grid-row:span 2; color:#cfcfcf; }
.me-promo b{ font-size:11px; letter-spacing:.03em; }
.me-promo i{ font-size:10px; color:#b5b5b5; font-style:normal; }
.me-basket{ margin-left:auto; display:flex; align-items:center; gap:8px; color:#fff; text-decoration:none;
            background:#2b2b2b; padding:8px 14px; border-radius:3px; }
.me-basket:hover{ background:#1f1f1f; }
.me-basket-n{ font-size:11px; color:#c9c9c9; }
.me-basket-t{ font-size:15px; }

/* ---- search */
.me-searchbar{ background:var(--me-dark); padding-bottom:12px; }
.me-search{ display:flex; max-width:760px; }
.me-search input{ flex:1; border:0; padding:9px 12px; font:14px Roboto,Arial,sans-serif; border-radius:2px 0 0 2px; }
.me-search button{ border:0; background:#5a5a5a; color:#fff; width:46px; border-radius:0 2px 2px 0; cursor:pointer; }
.me-search button:hover{ background:#6d6d6d; }

/* ---- department tabs */
.me-tabs{ background:var(--me-nav); border-top:2px solid #2b2b2b; border-bottom:2px solid #2b2b2b; }
/* Demon Tweeks' bar: the tabs share the full width, big and boxed */
.me-tabs-in{ display:flex; }
.me-tab{ position:relative; flex:1 1 auto; border-right:2px solid #2b2b2b; }
.me-tab:first-child{ border-left:2px solid #2b2b2b; }
.me-tab > a{ display:block; color:#fff; text-decoration:none; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
            font-size:17px; font-weight:500; letter-spacing:.03em; padding:15px 16px 12px; border-bottom:3px solid transparent; }
.me-tab > a:hover, .me-tab.has-drop:hover > a, .me-tab.has-drop:focus-within > a{ background:#4f4f4f; border-bottom-color:var(--me-yellow); }
body.me .me-tabs .me-tab > a.is-on{ background:#2b2b2b; color:#fff; border-bottom-color:var(--me-yellow); }
/* drop-down: the pages under a tab, as on the old Shopify menu */
.me-drop{ display:none; position:absolute; left:-2px; top:100%; z-index:50; min-width:260px; background:#fff; border:1px solid #d9d9d9;
          border-top:0; box-shadow:0 10px 24px rgba(0,0,0,.2); padding:12px 0; }
.me-tab:nth-last-child(-n+2) .me-drop{ left:auto; right:-2px; }
.me-drop.is-wide{ width:560px; column-count:2; column-gap:0; }
.me-drop-col{ break-inside:avoid; }
.me-tab.has-drop:hover .me-drop, .me-tab.has-drop:focus-within .me-drop{ display:block; }
body.me .me-drop a{ display:block; color:#2b2b2b; text-decoration:none; font-size:14px; padding:7px 20px; white-space:nowrap; }
body.me .me-drop a:hover{ background:#f2f2f2; color:#000; box-shadow:inset 3px 0 0 var(--me-yellow); }
.me-drop-col{ padding:2px 0 6px; }
body.me .me-drop a.me-drop-head{ font-weight:700; }
body.me .me-drop-col a:not(.me-drop-head){ padding-left:30px; color:#555; }

/* ---- yellow strip */
.me-strip{ background:var(--me-yellow); color:#2b2b2b; font-size:12px; font-weight:500; text-align:center; padding:6px 0; }
.me-strip a{ color:#2b2b2b; }

/* ---- breadcrumb */
.me-crumbs{ font-size:12px; color:var(--me-muted); padding-top:10px; padding-bottom:10px; }
.me-crumbs a{ color:var(--me-muted); text-decoration:none; }
.me-crumbs a:hover{ text-decoration:underline; }
.me-sep{ margin:0 7px; color:#c3c3c3; }

/* ---- the page itself */
.me-body{ padding-bottom:40px; }
.me-main{ min-width:0; }
body.me.me-home .me-body{ padding-top:0; }
body.me .title h1{ font-size:28px; font-weight:700; color:var(--me-dark); margin:0 0 4px; }

/* the left menu, in this site's colours */
body.me .nav h3{ font-size:13px; font-weight:500; color:var(--me-dark); border-bottom:1px solid var(--me-line); }
body.me .nav h3.ui-accordion-header-active{ color:#000; font-weight:700; }
body.me #accordion div{ border-bottom:1px solid var(--me-line); }
body.me a.activelink{ color:#000; font-weight:700; }

/* ---- product cards */
body.me .product-card{ background:#fff; border:1px solid var(--me-line); border-radius:3px; padding:14px;
                       display:flex; flex-direction:column; }
body.me .product-card:hover{ border-color:#bdbdbd; box-shadow:0 2px 6px rgba(0,0,0,.07); }
body.me .product-image img{ max-height:180px; object-fit:contain; }
body.me .product-name{ order:2; font-size:13px; font-weight:500; line-height:1.35; color:var(--me-dark);
                       text-decoration:none; margin:12px 0 6px; }
body.me .product-name:hover{ text-decoration:underline; }
body.me .product-image{ order:1; }
body.me .product-price{ order:3; margin-top:auto; }
body.me .product-subtitle{ order:4; color:var(--me-muted); font-size:11px; font-style:normal; }
body.me .me-price{ display:flex; align-items:flex-end; justify-content:space-between; gap:10px; margin-top:8px; }
body.me .me-price-ex{ font-size:20px; font-weight:700; color:var(--me-dark); line-height:1.1; }
body.me .me-price-inc{ font-size:15px; color:#5c5c5c; line-height:1.1; text-align:right; }
body.me .me-vat{ display:block; font-size:10px; letter-spacing:.06em; color:var(--me-muted); font-weight:400; }
body.me .me-was{ font-size:12px; color:var(--me-muted); text-align:right; }
body.me .me-save{ font-size:12px; font-weight:700; color:var(--me-red); }
body.me .product-nett b{ color:var(--me-red) !important; }

/* ---- buttons, the Demon Tweeks shape */
body.me input[type=submit], body.me button.btn, body.me .btn{
  background:var(--me-dark); color:#fff; border:0; border-radius:5px; padding:11px 22px;
  font:500 15px Roboto,Arial,sans-serif; cursor:pointer; }
body.me input[type=submit]:hover, body.me .btn:hover{ background:#000; }
body.me .btn-secondary{ background:#fff; color:var(--me-dark); border:1px solid #bdbdbd; }

/* ---- category tiles get the yellow caption */
body.me .category-tile{ border:1px solid var(--me-line); border-radius:0; overflow:hidden; background:#fff; padding:0; }
body.me a.category-tile:hover{ border-color:#c9c9c9; box-shadow:0 3px 12px rgba(0,0,0,.12); }
body.me .category-tile-image{ position:relative; height:170px; margin:0; background:#fff; overflow:hidden; }
body.me .category-tile-name{ display:block; background:#fff; color:#2b2b2b; font-weight:700; text-align:center;
                             font-size:14px; letter-spacing:.04em; text-transform:uppercase; padding:11px 12px;
                             border-top:1px solid var(--me-line); }
body.me .category-tile-name:after{ content:"\203A"; margin-left:8px; font-size:17px; line-height:1; }
body.me .category-tile:hover .category-tile-name{ background:var(--me-yellow); border-top-color:var(--me-yellow); }

/* ---- footer */
.me-footer{ background:var(--me-dark); color:#d2d2d2; margin-top:30px; }
.me-foot-in{ display:flex; gap:40px; padding-top:28px; padding-bottom:24px; }
.me-foot-col{ flex:1; display:flex; flex-direction:column; gap:7px; }
.me-foot-col h4{ color:#fff; font-size:13px; letter-spacing:.06em; text-transform:uppercase; margin:0 0 6px; }
.me-foot-col a{ color:#d2d2d2; font-size:13px; text-decoration:none; }
.me-foot-col a:hover{ color:#fff; text-decoration:underline; }
.me-foot-say p{ margin:0 0 6px; font-size:13px; }
.me-foot-say a{ color:#fff; }
.me-foot-pay img{ max-width:190px; }
.me-foot-legal{ background:#2b2b2b; color:#9a9a9a; font-size:11px; padding:10px 0; }
.me-foot-legal a{ color:#9a9a9a; }

/* ---- narrow screens */
@media (max-width:1000px){
  .me-promos{ display:none; }
  .me-body{ flex-direction:column; }
  .me-side{ width:100%; flex:none; }
  .me-tabs-in{ flex-wrap:nowrap; overflow-x:auto; }
  .me-tab > a{ white-space:nowrap; padding:12px 16px; }
  .me-drop{ display:none !important; }   /* phones: the tab's own page lists what is under it */
}
@media (max-width:620px){
  .me-util-in{ gap:10px; }
  .me-top-in{ flex-wrap:wrap; gap:12px; min-height:0; padding:10px 0; }
  .me-basket{ margin-left:auto; }
}

/* ---- home page ------------------------------------------------------- */
.me-hero{ position:relative; margin:0 0 26px; background:#1d1d1d; border-radius:3px; overflow:hidden; }
.me-slide{ display:none; position:relative; }
.me-slide-offer{ min-height:340px; }   /* a special offer (online/shop/views/products/offer_promo.php) */
@media (max-width:760px){ .me-slide-offer{ min-height:0; } }
.me-slide.is-on{ display:block; }
.me-slide img{ width:100%; height:auto; display:block; }
.me-slide-say{ position:absolute; left:6%; top:50%; transform:translateY(-50%); max-width:46%; color:#fff;
               text-shadow:0 2px 14px rgba(0,0,0,.65); }
.me-slide-say b{ display:block; font-size:34px; line-height:1.08; font-weight:700; color:var(--me-yellow);
                 text-transform:uppercase; letter-spacing:-.01em; }
.me-slide-say i{ display:block; font-style:normal; font-size:15px; margin-top:8px; color:#f0f0f0; }
.me-hero-arrow{ position:absolute; top:50%; transform:translateY(-50%); width:38px; height:54px; border:0;
                background:rgba(0,0,0,.42); color:#fff; font-size:26px; line-height:1; cursor:pointer; }
.me-hero-arrow:hover{ background:rgba(0,0,0,.68); }
.me-prev{ left:0; } .me-next{ right:0; }
.me-hero-dots{ position:absolute; left:0; right:0; bottom:12px; text-align:center; }
.me-hero-dots button{ width:9px; height:9px; margin:0 4px; padding:0; border:0; border-radius:50%;
                      background:rgba(255,255,255,.5); cursor:pointer; }
.me-hero-dots button.is-on{ background:var(--me-yellow); }

.me-h2{ font-size:20px; font-weight:700; color:var(--me-dark); text-align:center; text-transform:uppercase;
        letter-spacing:.04em; margin:30px 0 16px; }
.me-h2-mid{ margin-top:38px; }

.me-tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.me-tile{ display:block; border:1px solid var(--me-line); overflow:hidden; background:#fff; text-decoration:none; }
.me-tile:hover{ border-color:#c9c9c9; box-shadow:0 3px 12px rgba(0,0,0,.12); }
.me-tile-pic{ position:relative; display:block; height:170px; background:#ececec; overflow:hidden; }
.me-tile-pic img{ width:100%; height:170px; object-fit:cover; display:block; }
.me-tile-name{ display:block; background:#fff; color:#2b2b2b; font-weight:700; font-size:15px; text-align:center;
               letter-spacing:.03em; text-transform:uppercase; padding:12px; border-top:1px solid var(--me-line); }
.me-tile-name i{ font-style:normal; margin-left:8px; font-size:18px; line-height:1; }
.me-tile:hover .me-tile-name{ background:var(--me-yellow); border-top-color:var(--me-yellow); }

.me-banners{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:22px; }
.me-banner{ position:relative; display:block; overflow:hidden; background:#1d1d1d; }
.me-banner img{ width:100%; height:auto; display:block; transition:transform .8s ease; }
.me-banner:hover img{ transform:scale(1.04); }
.me-banner-say{ position:absolute; left:22px; bottom:20px; color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.7); }
.me-banner-say b{ display:block; font-size:34px; line-height:1.05; font-weight:700; text-transform:uppercase; color:var(--me-yellow); }
.me-banner-say i{ font-style:normal; font-size:13px; }

.me-intro{ margin:26px auto 0; max-width:900px; text-align:center; color:#4a4a4a; font-size:14px; line-height:1.6; }
.me-row{ margin-top:4px; }

.me-brands{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:14px 30px;
            padding:18px 10px; border-top:1px solid var(--me-line); border-bottom:1px solid var(--me-line); }
.me-brand img{ max-height:34px; max-width:120px; width:auto; filter:grayscale(1); opacity:.72; }
.me-brand img:hover{ filter:none; opacity:1; }

@media (max-width:1000px){
  .me-tiles{ grid-template-columns:repeat(2,1fr); }
  .me-banners{ grid-template-columns:1fr; }
  .me-slide-say{ max-width:70%; }
  .me-slide-say b{ font-size:24px; }
}
@media (max-width:620px){
  .me-tiles{ grid-template-columns:1fr 1fr; gap:10px; }
  .me-tile-pic, .me-tile-pic img{ height:120px; }
  .me-slide-say b{ font-size:18px; }
  .me-slide-say i{ display:none; }
}

/* a plain opener while the slider has nothing in it */
.me-hero-plain{ background:linear-gradient(135deg,#363636 0%,#1d1d1d 100%); }
.me-hero-plain-in{ padding:46px 6%; max-width:760px; }
.me-hero-plain b{ display:block; font-size:32px; line-height:1.1; font-weight:700; color:var(--me-yellow);
                  text-transform:uppercase; }
.me-hero-plain i{ display:block; font-style:normal; font-size:15px; color:#dcdcdc; margin:10px 0 18px; }
.me-hero-go a{ display:inline-block; background:var(--me-yellow); color:#2b2b2b !important; font-weight:700;
               font-size:13px; letter-spacing:.04em; text-transform:uppercase; text-decoration:none;
               padding:10px 18px; border-radius:4px; margin-right:10px; }
.me-hero-go a:hover{ background:#ffe924; }
body.me .me-intro{ max-width:none; text-align:left; }
body.me .me-intro img{ max-width:100%; height:auto; }
@media (max-width:620px){ .me-hero-plain b{ font-size:21px; } .me-hero-plain-in{ padding:28px 18px; } }

/* ---- Demon Tweeks' layout: the featured products sit on a grey band the
   full width of the window, as white cards without borders */
.me-band{ background:#ececec; box-shadow:0 0 0 100vmax #ececec; clip-path:inset(0 -100vmax); padding:6px 0 30px; margin-top:34px; }
.me-band .me-h2{ margin-top:22px; text-transform:none; font-size:24px; letter-spacing:0; }
body.me .me-band .product-card{ border-color:#fff; border-radius:0; padding:18px; }
body.me .me-band .product-card:hover{ border-color:#fff; box-shadow:0 4px 16px rgba(0,0,0,.12); }
body.me .product-name{ font-size:15px; font-weight:700; }
.me-h2{ font-size:22px; }

/* ---- pictures that change and zoom under the mouse (js/motoequip.js) */
body.me .product-card .product-image{ position:relative; display:block; height:190px; overflow:hidden; background:#fff; }
body.me .product-card .product-image img{ max-width:100%; max-height:100%; margin:0 auto; display:block; }
.me-pics{ position:relative; overflow:hidden; }
.me-pics img{ position:absolute; left:0; top:0; width:100%; height:100%; object-fit:contain; display:block; opacity:0;
              transform:scale(1); transition:opacity .5s ease, transform .5s ease; }
.me-tile-pic.me-pics img, .category-tile-image.me-pics img{ object-fit:cover; }
.me-pics img.is-on{ opacity:1; }
.me-pics.is-live img.is-on{ transform:scale(1.08); transition:opacity .5s ease, transform 2.6s ease-out; }
body.me .category-tile-image img{ max-width:100%; max-height:100%; }

/* ---- the Category and Brand lists down the left of a listing */
.me-listing{ display:flex; gap:26px; align-items:flex-start; }
.me-facets{ flex:0 0 220px; }
.me-listing-main{ flex:1; min-width:0; }
.me-facet{ margin-bottom:22px; }
.me-facet h3{ font-size:14px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--me-dark);
              border-bottom:2px solid var(--me-dark); padding-bottom:7px; margin:0 0 8px; }
.me-facet ul{ list-style:none; margin:0; padding:0; }
.me-facet ul.is-long li.me-more{ display:none; }
.me-facet ul.is-open li.me-more{ display:list-item; }
body.me .me-facet a{ display:flex; align-items:flex-start; gap:9px; padding:4px 0; font-size:14px; color:var(--me-text); text-decoration:none; line-height:1.3; }
body.me .me-facet a:hover{ color:#000; text-decoration:underline; }
.me-facet a i{ font-style:normal; color:var(--me-muted); margin-left:auto; padding-left:6px; }
.me-tick{ flex:0 0 14px; height:14px; margin-top:1px; border:2px solid #4a4a4a; border-radius:2px; background:#fff; }
body.me .me-facet a.is-on{ color:#c8001b; font-weight:700; }
.me-facet a.is-on .me-tick{ background:#363636; box-shadow:inset 0 0 0 2px #fff; }
.me-facet-more{ border:0; background:none; padding:6px 0 0; font:700 13px Roboto,Arial,sans-serif; color:var(--me-dark); text-decoration:underline; cursor:pointer; }
body.me .me-facet-clear{ display:inline-block; margin-bottom:14px; font-size:13px; font-weight:700; color:var(--me-dark); }

@media (max-width:1000px){
  .me-tabs-in{ flex-wrap:nowrap; overflow-x:auto; }
  .me-tab{ flex:0 0 auto; }
  .me-tab > a{ font-size:15px; padding:12px 16px 10px; }
  .me-listing{ display:block; }
  .me-facets{ display:flex; flex-wrap:wrap; gap:0 24px; }
  .me-facet{ flex:1 1 220px; }
}
@media (max-width:620px){
  body.me .product-card .product-image{ height:150px; }
  .me-banner-say b{ font-size:22px; }
}