/* ===== base ===== */
*{ box-sizing:border-box; }
html, body{ height:100%; }

body{
  margin:0;
  background:#fff;
  color:#000;
  font-family: Tahoma, Arial, Helvetica, sans-serif;
}

a{ color:inherit; text-decoration:none; }

/* ===== header layout (NO tables) ===== */
.site-header{ width:100%; }

.site-header__inner{
  width:100%;
  max-width:1440px;
  height:126px;
  margin:0 auto;
  display:flex;
}

.site-header__logo{
  width:275px;
  flex:0 0 275px;
  height:126px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.site-header__right{
  width:auto;
  flex:1 1 auto;
  height:126px;
  display:flex;
  flex-direction:column;
  min-width:0;
}

/* ===== delivery row ===== */
.delivery-row{
  height:46px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  font-size:13px;
}

.delivery-country{
  position:relative;
  display:inline-flex;
  align-items:center;
  vertical-align:middle;
}

.delivery-country__toggle{
  position:absolute;
  opacity:0;
  pointer-events:none;
  width:0;
  height:0;
  margin:0;
  padding:0;
}

.delivery-country__trigger{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  line-height:1;
  text-decoration:none;
  cursor:pointer;
  vertical-align:middle;
  appearance:none;
  -webkit-appearance:none;
}

.delivery-row__flag{
  display:inline-flex;
  align-items:center;
  line-height:1;
}

.delivery-row__flag img{
  display:block;
  width:30px;
  height:auto;
}

.delivery-country__code{
  display:inline-block;
  font-family:Tahoma, Arial, Helvetica, sans-serif;
  font-size:13px;
  line-height:1;
  font-weight:700;
  color:#000;
  text-decoration:none;
}

/* A country with no flag picture yet: its code in the same slot, so
   the row keeps its height and nothing jumps. */
.delivery-row__code{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:20px;
  border:1px solid #cfcfcf;
  border-radius:3px;
  background:#fff;
  font-family:Tahoma, Arial, Helvetica, sans-serif;
  font-size:11px;
  line-height:1;
  font-weight:700;
  color:#444;
  letter-spacing:.02em;
}

/* Nothing settled yet - the visitor is asked instead of being guessed at. */
.delivery-country__ask{
  display:inline-block;
  font-family:Tahoma, Arial, Helvetica, sans-serif;
  font-size:11px;
  line-height:13px;
  font-weight:700;
  color:#0b7285;
  text-align:left;
  text-decoration:none;
}

.delivery-country__trigger--ask:hover .delivery-country__ask{
  text-decoration:underline;
}

.delivery-country__trigger:hover .delivery-country__code{
  text-decoration:underline;
}

.delivery-country__menu{
  position:absolute;
  top:100%;
  right:0;
  z-index:50;
  width:250px;
  min-width:250px;
  margin-top:8px;
  background:#fff;
  border:1px solid #cfcfcf;
  box-shadow:0 8px 24px rgba(0,0,0,.14);
  display:none;
}

.delivery-country__toggle:checked + .delivery-country__trigger + .delivery-country__menu{
  display:block;
}

.delivery-country__scroll{
  max-height:320px;
  overflow-y:auto;
  padding:8px 0;
}

.delivery-country__item{
  display:block;
  padding:8px 14px;
  font-size:13px;
  line-height:18px;
  color:#222;
  text-decoration:none;
}

.delivery-country__item:hover{
  background:#f3f3f3;
}

.delivery-country__item.is-active{
  font-weight:700;
}

.delivery-country__divider{
  height:1px;
  margin:8px 0;
  background:#e3e3e3;
}

/* ===== TOP BAR (47px) ===== */
.topbar{
  height:47px;
  display:flex;
  align-items:stretch;
  flex-wrap:nowrap;
  overflow:visible;
  min-width:0;
}

/* left piece = 15px */
.topbar__bkg-left{
  width:15px;
  height:47px;
  background: url("../pics/top-search-bkg1.gif") repeat-x;
}

/* middle gray area */
.topbar__bkg-mid{
  width:auto;
  flex:1 1 auto;
  height:47px;
  background: url("../pics/top-search-bkg.gif") repeat-x;
  display:flex;
  align-items:center;
  padding:0; /* no padding */
  min-width:0;
}

/* ? 9px spacer like your table cell (NO white gap) */
.topbar__gap9{
  width:9px;
  height:47px;
  background: url("../pics/top-search-bkg.gif") repeat-x;
}

/* group that keeps input+select+Search button together */
.topbar-searchgroup{
  display:flex;
  align-items:stretch;
  flex:1 1 auto;
  min-width:0;
}
/* ===== SEARCH ===== */
.topbar-search{
  width:100%;
  display:flex;
  align-items:center;
  gap:12px;
  margin:0;
  min-width:0;
}

.topbar-search__input{
  flex:1 1 0;
  min-width:120px;
  height:27px;
  padding:0; /* no padding */
  font-family: Tahoma, Arial, Helvetica, sans-serif;
  font-size:14px;
  color:#333;
  border:0;
  outline:none;
  box-shadow:none;
  background: url("../pics/bar-reash.gif") repeat-x;
  border-radius:0;
}

.topbar-search__select{
  width:auto;
  flex:0 1 280px;
  max-width:280px;
  min-width:140px;
  height:28px;
  padding:0 10px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size:12px;
  color:#333;
  border:0;
  outline:none;
  box-shadow:none;
  background:#d0d0d0;
  border-radius:0;
  -webkit-appearance: menulist;
  appearance: auto;
}

/* gap 8px */
.topbar__gap{
  width:8px;
  height:47px;
}

/* ===== separators ===== */
.sep{
  width:1px;
  height:47px;
  flex:0 0 1px;
  position:relative;
  background:transparent;
}

.sep::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:1px;
  background: url("../pics/but-separ.gif") repeat-y;
}

.sep::after{
  content:"";
  position:absolute;
  left:1px;
  top:10%;
  bottom:10%;
  width:2px;
  background: linear-gradient(to right,
    rgba(255,255,255,.80) 0%,
    rgba(255,255,255,.35) 100%
  );
  pointer-events:none;
}

/* ===== buttons ===== */
.topbtn{
  height:47px;
  min-height:47px;
  max-height:47px;
  flex:0 0 auto;
  border:0;
  border-radius:0;
  padding:0 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  background: url("../pics/btn-bkg.png") repeat-x;
  background-size:auto 47px;
  box-shadow:none;
  position:relative;
  overflow:hidden;
}

.topbtn--search{ width:135px; min-width:135px; max-width:135px; flex:0 0 135px; }
.topbtn--fav{ width:92px; min-width:92px; max-width:92px; flex:0 0 92px; }
.topbtn--login{ width:135px; min-width:135px; max-width:135px; flex:0 0 135px; }
.topbtn--cart{ width:125px; min-width:125px; max-width:125px; flex:0 0 125px; }

.topbtn__text{
  white-space:nowrap;
  font-family: Tahoma, Arial, Helvetica, sans-serif;
  font-weight:700;
  font-size:18px;
  line-height:1;
  color:#111;
  text-shadow: 0 1px 0 rgba(255,255,255,.70);
}

.topbtn__icon{
  width:23px;
  height:23px;
  display:inline-block;
  background-repeat:no-repeat;
  background-position:center center;
  background-size:23px 23px;
}
.topbtn--search .topbtn__icon{ background-image: url("../pics/ico-search.png"); }
.topbtn--fav    .topbtn__icon{ background-image: url("../pics/ico-heart.png"); }
.topbtn--login  .topbtn__icon{ background-image: url("../pics/ico-login.png"); }
.topbtn--cart   .topbtn__icon{ background-image: url("../pics/ico-cart.png"); }

.topbtn::before{
  content:"";
  position:absolute;
  left:0;
  top:10%;
  bottom:10%;
  width:3px;
  background: linear-gradient(to right,
    rgba(255,255,255,.65) 0%,
    rgba(255,255,255,.12) 100%
  );
  pointer-events:none;
}

.topbtn::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(255,255,255,0);
  pointer-events:none;
}

.topbtn .topbtn__shine-right{
  position:absolute;
  right:0;
  top:10%;
  bottom:10%;
  width:3px;
  background: linear-gradient(to left,
    rgba(255,255,255,.65) 0%,
    rgba(255,255,255,.12) 100%
  );
  pointer-events:none;
}

.topbtn:hover::after{
  background: rgba(255,255,255,.32);
}

.topbtn:active{
  transform: translateY(1px);
}
.topbtn:active::after{
  background: rgba(255,255,255,.12);
}

/* ===== responsive shrink (desktop) ===== */

/* ===== adaptive (mobile) ===== */

/* ? gray strip below header (43px, exact color) */
/*
 * The strip is 43px tall while its content fits on one line, and grows
 * instead of spilling when it does not. A fixed height here used to
 * push a wrapped line straight through the bottom edge.
 */
.gray-strip{
  width:100%;
  min-height:43px;
  background-color:#e9e9e9;
}

/* ===== gray strip content =====
   width, not max-width, was the reason a long breadcrumb ran off the
   right of the browser on anything narrower than 1440: the strip kept
   its full 1440 and simply hung outside the window. */
.gray-strip__inner{
  width:100%;
  max-width:1440px;
  min-height:43px;
  margin:0 auto;
  display:flex;
  align-items:center;
}

/*
 * The button keeps its place on the left and the trail sits beside it
 * while there is room. Once the trail needs less than 420px it drops
 * onto a line of its own, full width, instead of being squeezed into
 * a narrow column and falling apart into a staircase of short lines.
 */
.catsbar{
  width:100%;
  min-height:43px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap: 8px;
}

.catsbar__left{
  width:273px; /* matches original table cell */
  flex:0 0 auto;
  display:flex;
  align-items:center;
}

.catsbar__rightlinks{
  display:none;
}

.catsbar__quicklink{
  color:#000;
  text-decoration:none;
}

.catsbar__quicklink:hover{
  text-decoration:underline;
}

.catsbar__quicksep{
  color:#000;
}

/*
/* One step of the trail. */
.crumb-link{ color:inherit; text-decoration:none; }
.crumb-link:hover{ text-decoration:underline; }

/* ===========================================================
   PAGE STRIP
   A second band under the menu, two thirds of its height and a
   shade darker. It carries what belongs to the page itself - the
   breadcrumb on an inner page, the heading on the front page -
   across the full width, instead of squeezing it in beside the
   All Categories button.
   =========================================================== */
.page-strip{
  width:100%;
  min-height:34px;          /* two thirds of the 43px menu strip, plus 5 */
  background-color:#dcdcdc; /* a shade darker than the #e9e9e9 above */
}

.page-strip__inner{
  width:100%;
  max-width:1440px;
  min-height:34px;
  margin:0 auto;
  display:flex;
  align-items:center;
}

.page-strip__crumbs{
  flex:1 1 auto;
  min-width:0;
  margin:0;
  padding:5px 0;
  font-family: Tahoma, Arial, Helvetica, sans-serif;
  font-size:12px;
  line-height:1.5;
  font-weight:400;
  color:#5f5f5f;
  white-space:normal;
}

.page-strip__crumbs b{ color:#000; }

/* The little house that opens the front page, first in the trail. */
.page-strip__home{
  display:inline-block;
  font-size:18px;
  line-height:1;
  vertical-align:middle;
  text-decoration:none;
}

.page-strip__home:hover{ opacity:.7; }

/*
 * The slash between steps. The space around it is set here rather
 * than with hard spaces in the markup, so it is one number to change,
 * and the colour is light enough to separate without competing with
 * the names either side of it.
 */
.page-strip__sep{
  margin:0 10px;
  color:#b4b4b4;
}

/*
 * The front page heading, beside the All Categories button. A quiet
 * line on purpose: it names the page for a reader and for a search
 * engine without competing with the banner right underneath it.
 */
.catsbar__h1{
  flex:1 1 auto;
  min-width:0;
  margin:0;
  font-family: Tahoma, Arial, Helvetica, sans-serif;
  font-size:14px;
  line-height:1.25;
  font-weight:400;
  color:#5a5a5a;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

@media (max-width: 1100px){
  .catsbar__h1{
    white-space:normal;
    padding:4px 0;
  }
}

@media (max-width: 820px){
  .catsbar__h1{
    flex:0 0 100%;
    width:100%;
    padding:2px 12px 8px;
  }
}

@media (max-width: 560px){
  .catsbar__h1{
    padding:4px 12px 10px;
    font-size:13px;
    line-height:1.35;
  }
}

@media (max-width: 560px){
  .page-strip__crumbs{ padding:7px 0; }
}

/* ===== All Categories button (DIV, pixel style) ===== */
.allcats-btn{
  width:259px;
  height:41px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:19px;
  padding:0 13px 0 19px; /* left to burger / right to arrow */
  border:1px solid #9d9d9d;
  border-radius:4px;
  background:#ffffff;
  cursor:pointer;
  user-select:none;
  font-family: Tahoma, Arial, Helvetica, sans-serif;
  font-size:16px;
  color:#000000;
}

.allcats-btn__burger{
  width:18px;
  height:14px;
  display:inline-flex;
  flex-direction:column;
  justify-content:space-between;
}
.allcats-btn__burger i{
  display:block;
  height:2px;
  background:#000;
  border-radius:1px;
}

.allcats-btn__text{
  flex:1 1 auto;
  text-align:left;
  line-height:1;
}

 .allcats-btn__arrow{
  width:12px;
  height:12px;
  flex:0 0 12px;
  position:relative;
}
.allcats-btn__arrow::before{
  content:"";
  position:absolute;
  left:2px;
  top:2px; /* arrow nudged up */
  width:7px;
  height:7px;
  border-right:1.6px solid #000;
  border-bottom:1.6px solid #000;
  transform: rotate(45deg);
}

.allcats-btn:hover{ background:#fbfbfb; }



/* ===========================================================
   BANNER COLOUR THEMES
   The fill either side of a banner, and the gradient that fades
   into it. A theme sets two values and nothing else, so the same
   two rules below paint every banner on the site.
     --hero-bg        the flat colour beside the picture
     --hero-grad-rgb  the gradient colour, as r,g,b
   The class is stored per section in the admin.
   =========================================================== */
.hero-theme-01{ --hero-bg:#f0dbdb; --hero-grad-rgb:110,0,0; }
.hero-theme-02{ --hero-bg:#f7e0d8; --hero-grad-rgb:140,52,28; }
.hero-theme-03{ --hero-bg:#f6eadf; --hero-grad-rgb:142,78,20; }
.hero-theme-04{ --hero-bg:#f7f0d9; --hero-grad-rgb:138,105,12; }
.hero-theme-05{ --hero-bg:#eaf0d8; --hero-grad-rgb:86,104,26; }
.hero-theme-06{ --hero-bg:#e8f0eb; --hero-grad-rgb:50,86,66; }
.hero-theme-07{ --hero-bg:#dceae0; --hero-grad-rgb:24,74,46; }
.hero-theme-08{ --hero-bg:#daeeee; --hero-grad-rgb:16,88,92; }
.hero-theme-09{ --hero-bg:#dceef4; --hero-grad-rgb:20,88,110; }
.hero-theme-10{ --hero-bg:#dfe9f6; --hero-grad-rgb:32,66,118; }
.hero-theme-11{ --hero-bg:#d9e2f2; --hero-grad-rgb:22,44,98; }
.hero-theme-12{ --hero-bg:#e2e2f4; --hero-grad-rgb:52,52,124; }
.hero-theme-13{ --hero-bg:#ebe2f4; --hero-grad-rgb:92,54,126; }
.hero-theme-14{ --hero-bg:#f0e0f0; --hero-grad-rgb:106,40,106; }
.hero-theme-15{ --hero-bg:#f6dfe9; --hero-grad-rgb:122,28,74; }
.hero-theme-16{ --hero-bg:#f8e2e8; --hero-grad-rgb:136,44,70; }
.hero-theme-17{ --hero-bg:#ece2da; --hero-grad-rgb:92,62,40; }
.hero-theme-18{ --hero-bg:#f2ece0; --hero-grad-rgb:118,98,58; }
.hero-theme-19{ --hero-bg:#e5e5e5; --hero-grad-rgb:58,58,58; }
.hero-theme-20{ --hero-bg:#d8dadc; --hero-grad-rgb:34,38,42; }

/* The same twenty hues in a muted dark tone, for banners whose
   picture is dark and would otherwise sit on a bright strip. */
.hero-theme-21{ --hero-bg:#5e3a3a; --hero-grad-rgb:38,16,16; }
.hero-theme-22{ --hero-bg:#64423a; --hero-grad-rgb:42,20,14; }
.hero-theme-23{ --hero-bg:#64493a; --hero-grad-rgb:44,26,12; }
.hero-theme-24{ --hero-bg:#635434; --hero-grad-rgb:42,33,10; }
.hero-theme-25{ --hero-bg:#4f5634; --hero-grad-rgb:30,36,12; }
.hero-theme-26{ --hero-bg:#3d5646; --hero-grad-rgb:18,40,26; }
.hero-theme-27{ --hero-bg:#33513f; --hero-grad-rgb:12,38,22; }
.hero-theme-28{ --hero-bg:#33524f; --hero-grad-rgb:10,40,40; }
.hero-theme-29{ --hero-bg:#35505c; --hero-grad-rgb:10,38,50; }
.hero-theme-30{ --hero-bg:#3a4a63; --hero-grad-rgb:14,30,56; }
.hero-theme-31{ --hero-bg:#364260; --hero-grad-rgb:10,22,50; }
.hero-theme-32{ --hero-bg:#414163; --hero-grad-rgb:22,22,56; }
.hero-theme-33{ --hero-bg:#4c3f63; --hero-grad-rgb:30,18,52; }
.hero-theme-34{ --hero-bg:#563d56; --hero-grad-rgb:36,14,36; }
.hero-theme-35{ --hero-bg:#5c3849; --hero-grad-rgb:40,12,28; }
.hero-theme-36{ --hero-bg:#5e3b45; --hero-grad-rgb:42,16,24; }
.hero-theme-37{ --hero-bg:#54443a; --hero-grad-rgb:34,24,16; }
.hero-theme-38{ --hero-bg:#57503f; --hero-grad-rgb:36,30,18; }
.hero-theme-39{ --hero-bg:#4a4a4a; --hero-grad-rgb:26,26,26; }
.hero-theme-40{ --hero-bg:#3c4044; --hero-grad-rgb:18,20,22; }

/* ===== promo banner under gray strip ===== */
/*
 * With no theme chosen a banner falls back to Graphite - the same
 * values as .hero-theme-20. Most banner pictures are dark, so a light
 * strip beside them reads as a mistake.
 */
.hero-banner{
  width:100%;
  background:var(--hero-bg, #d8dadc);
  position:relative;
  overflow:hidden;
}

.hero-banner__frame{
  width:100%;
  max-width:1440px;
  margin:0 auto;
  position:relative;
  z-index:2;
}

@media (min-width: 1441px){
  .hero-banner::before,
  .hero-banner::after{
    display:none;
  }

  .hero-banner__frame::before,
  .hero-banner__frame::after{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    width:100px;
    pointer-events:none;
    z-index:1;
  }

  .hero-banner__frame::before{
    left:-100px;
    background:linear-gradient(
      to right,
      rgba(var(--hero-grad-rgb, 34,38,42),0.00) 0%,
      rgba(var(--hero-grad-rgb, 34,38,42),0.08) 35%,
      rgba(var(--hero-grad-rgb, 34,38,42),0.18) 68%,
      rgba(var(--hero-grad-rgb, 34,38,42),0.30) 100%
    );
  }

  .hero-banner__frame::after{
    right:-100px;
    background:linear-gradient(
      to left,
      rgba(var(--hero-grad-rgb, 34,38,42),0.00) 0%,
      rgba(var(--hero-grad-rgb, 34,38,42),0.08) 35%,
      rgba(var(--hero-grad-rgb, 34,38,42),0.18) 68%,
      rgba(var(--hero-grad-rgb, 34,38,42),0.30) 100%
    );
  }
}

.hero-banner picture,
.hero-banner img{
  display:block;
  width:100%;
  height:auto;
}

.hero-slider__frame{
  position:relative;
}

.hero-slider__viewport{
  width:100%;
  overflow:hidden;
}

.hero-slider__track{
  display:flex;
  width:100%;
  transform:translateX(-100%);
  transition:transform .6s ease;
  will-change:transform;
}

.hero-slider__track.is-no-transition{
  transition:none;
}

.hero-slide{
  flex:0 0 100%;
  min-width:100%;
  display:block;
  position:relative;
  overflow:hidden;
}

/* ===========================================================
   TEXT LAID OVER A BANNER
   One set of rules for every banner on the site: the slider on the
   front page and the single banner of a section. They used to live
   in the section stylesheet, which the front page never loads, so
   the slider text was left unstyled.
   =========================================================== */
/*
 * The text block is centred on the banner, and stays centred whether
 * it holds one line or two: the gap lives here rather than as a margin
 * under the heading, so a heading standing alone is not nudged upward
 * by a margin with nothing below it.
 */
.hero-banner__overlay{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:8px;
  padding:0 40px;
  pointer-events:none;
  z-index:2;
}

/*
 * The heading on a banner. Capped at 600px so a long line wraps into a
 * block instead of running the width of the picture, the same way the
 * line under it is capped at 700px.
 */
.hero-banner__h1,
h1.hero-banner__h1,
h2.hero-banner__h1{
  margin:0;
  max-width:600px;
  font-family:Tahoma, Arial, Helvetica, sans-serif;
  font-size:34px !important;
  font-weight:700;
  color:#ffffff !important;
  text-shadow:0 2px 8px rgba(0,0,0,0.45);
  line-height:1.25;
}

/*
 * The line under the heading. Capped at 700px so a longer sentence
 * wraps into a block instead of running across the whole picture - the
 * width is the limit, not a word count, so any text behaves the same.
 */
.hero-banner__sub{
  margin:0;
  max-width:700px;
  font-family:Tahoma, Arial, Helvetica, sans-serif;
  font-size:20px !important;
  line-height:1.3;
  font-weight:700;
  color:#fff !important;
  text-shadow:0 1px 4px rgba(0,0,0,0.55);
}

.hero-slide picture,
.hero-slide img{
  display:block;
  width:100%;
  height:auto;
}

.hero-slider__dots{
  position:absolute;
  left:50%;
  bottom:14px;
  transform:translateX(-50%);
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.hero-slider__dot{
  width:12px;
  height:12px;
  padding:0;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.72);
  box-shadow:0 0 0 1px rgba(0,0,0,.18);
  cursor:pointer;
}

.hero-slider__dot.is-active{
  background:#d71919;
}

.hero-slider__dot:hover{
  background:#ffffff;
}

@media (max-width: 560px){
  .hero-slider__dots{
    bottom:10px;
    gap:8px;
  }

  .hero-slider__dot{
    width:10px;
    height:10px;
  }
}

/* ===== overlay + mega menu ===== */
body.cats-open{ overflow:hidden; }

.cats-overlay{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  top:169px; /* will be updated by JS to exact gray-strip bottom */
  background: rgba(0,0,0,.28);
  z-index:2000;
  display:none;
}

body.cats-open .cats-overlay{ display:block; }

/* max-width, not width: a fixed 1440 hung the whole menu outside the
   right of a narrower window, the same fault the grey strip had. */
.cats-mega{
  width:100%;
  max-width:1440px;
  margin:0 auto;
  background:#ffffff;
  height:420px; /* adjust when you tell me exact height */
  display:flex;
  border-top:1px solid #d6d6d6;
}

.cats-mega__col{ height:100%; }

.cats-mega__col--lvl1{
  width:345px;
  border-right:1px solid #e3e3e3;
}

.cats-mega__col--lvl2{
  width:405px;
  border-right:1px solid #e3e3e3;
}

.cats-mega__col--lvl3{
  flex:1 1 auto;
  background:#e6e6e6;
}

.cats-mega__scroll{
  height:100%;
  overflow:auto;
  padding:10px 0;
}

.cats-item{
  width:100%;
  border:0;
  background:transparent;
  text-align:left;
  padding:10px 16px;
  font-family: Tahoma, Arial, Helvetica, sans-serif;
  font-size:14px;
  color:#111;
  cursor:pointer;
}

.cats-item:hover{ background:#f5f5f5; }
.cats-item.is-active{
  background:#f7efe2;
  font-weight:700;
}

.cats-tiles{
  height:100%;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 130px;
  gap:0;
  padding:0;
}

 .cats-tile{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  text-align:center;
  background:#f4f4f4;
  border:1px solid #dcdcdc;
  border-left:0;
  border-top:0;
  padding:0 10px 18px; /* text sits at the bottom */
  font-family: Tahoma, Arial, Helvetica, sans-serif;
  font-size:14px;
  color:#111;
}

.cats-tile:hover{ background:#ffffff; }

.cats-tile--active{
  background:#ffffff;
  font-weight:700;
}

.cats-tile__icon,
.cats-tile__icon2{
  display:block;
  width:52px;
  height:38px;
  margin:0 auto 10px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}

.cats-tile__icon{ background-image:url("../pics/ico-plug.png"); }
.cats-tile__icon2{ background-image:url("../pics/ico-bumper.png"); }

/* ===== narrow layout: logo centered, delivery centered, controls full width ===== */
@media (max-width: 820px){

.site-header__inner{
  width:100%;
  max-width:100%;
  margin:0 auto;
  height:auto;
  min-height:118px;
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-rows:auto auto;
  align-items:center;
  row-gap:10px;
  padding:12px 0 8px;
  box-sizing:border-box;
}

.site-header__logo{
  grid-column:2;
  grid-row:1;
  width:auto;
  flex:none;
  height:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0;
  padding:0;
}

  .site-header__right{
    display:contents;
  }

.delivery-row{
  grid-column:4;
  grid-row:1;
  width:auto;
  height:auto;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  margin:0;
  padding:0;
  white-space:nowrap;
}

  .topbar{
    grid-column:1 / span 5;
    grid-row:2;
    width:100%;
    max-width:none;
    min-width:0;
    margin:0;
    height:auto;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    align-items:stretch;
    gap:10px;
    padding:0;
  }
/* keep left rounded cap + separators */
  .topbar__bkg-left{ display:none; }
  .sep{ display:inline-block !important; }
  .topbar__gap{ display:none; }

  /* ROW 1: SEARCH (keep Search on the right, shrink only input width) */
.topbar-searchgroup{
  order:1;
  display:flex;
  align-items:stretch;
  flex:1 1 100%;
  width:100%;
  max-width:none;
  min-width:0;
}

  /* keep the left rounded cap INSIDE the search row (prevents wrapping above) */
  .topbar-searchgroup:before{
    content:"";
    display:block;
    width:15px;
    height:47px;
    background:url("../pics/top-search-bkg1.gif") repeat-x;
    flex:0 0 15px;
  }

  .topbar__bkg-mid{ flex:1 1 auto; min-width:0; }

  .topbar-search{
    width:100%;
    min-width:0;
    flex-wrap:nowrap;
  }

  .topbar-search__input{
    flex:1 1 auto;
    min-width:80px;
  }

  .topbar-search__select{
    flex:0 1 280px;
    max-width:280px;
    min-width:120px;
  }

  .topbar-actions .topbtn{ flex:0 0 auto; }
  .topbar-actions .sep{ display:inline-block !important; }

  .topbar__gap9{ order:2; display:block; flex:0 0 9px; width:9px; }
  .topbar__gap9 + .sep{ order:3; display:inline-block !important; }
  .topbtn--search{ order:4; flex:0 0 auto; }
  .topbtn--search + .sep{ order:5; display:inline-block !important; }

  /* hide old glossy buttons row under 820 */
  .topbar-actions{
    display:none !important;
  }

  /* ===== 820: gray strip + ALL CATEGORIES + text links ===== */
  .gray-strip{
    height:auto;
    background:transparent;
  }

  .gray-strip__inner{
    width:100%;
    height:auto;
    margin:0 auto;
    display:block;
  }

.catsbar{
  height:auto;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:6px 12px;
}

  .catsbar__left{
    width:auto;
    flex:0 0 auto;
    display:flex;
    justify-content:flex-start;
    align-items:center;
  }

.catsbar__rightlinks{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  padding-right:12px;
  font-family:Tahoma, Arial, Helvetica, sans-serif;
  font-size:14px;
  line-height:1;
  font-weight:700;
  color:#000;
  white-space:nowrap;
}

.catsbar__quicklink{
  color:#000;
  text-decoration:none;
}

.catsbar__quicklink:hover{
  text-decoration:underline;
}

.catsbar__quicklink--fav{
  display:inline-flex;
  align-items:center;
  gap:5px;
}

.catsbar__favcount{
  color:#000;
}

.catsbar__favicon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:14px;
  height:14px;
  line-height:1;
}

.catsbar__favicon::before{
  content:"\2665";
  display:block;
  color:#e53935;
  font-family:"Segoe UI Symbol","Arial Unicode MS",Arial,Helvetica,sans-serif;
  font-size:20px;
  line-height:1;
}

.catsbar__quicksep{
  color:#d0d0d0;
  opacity:1;
  font-weight:400;
}


}
/* ===== very narrow: stack search controls ===== */
@media (max-width: 560px){
  .new-arrivals{
    margin-top:14px;
    padding-left:0;
    padding-right:0;
  }

  .new-arrivals__tabrow{
    padding-left:0;
    margin-bottom:-1px;
  }

  .catsbar__left{
    width:220px;
    flex:0 0 220px;
    justify-content:flex-start;
  }

  .allcats-btn{
    width:220px;
  }

  .topbtn--search{
    width:45px !important;
    min-width:45px !important;
    max-width:45px !important;
    flex:0 0 45px !important;
    padding:0 !important;
    gap:0 !important;
  }

  .topbtn--search .topbtn__text{
    display:none !important;
  }

  .topbtn--search .topbtn__icon{
    width:23px;
    height:23px;
    margin:0 auto;
  }

  .topbar-search__input{
    flex:1 1 50%;
    width:50%;
    min-width:0;
  }

  .topbar-search__select{
    flex:1 1 50%;
    width:50%;
    min-width:0;
    max-width:none;
  }

  .new-arrivals__tab{
    font-size:20px;
    line-height:20px;
    padding:8px 22px 7px 12px;
    border-radius:12px 0 0 0;
  }

  .new-arrivals__tab::after{
    right:-20px;
    width:20px;
  }

.new-arrivals__panel{
  padding:18px 20px 20px;
}

.new-arrivals__grid{
  grid-template-columns:repeat(6, minmax(0, 1fr));
  column-gap:clamp(12px, 2vw, 40px);
  row-gap:10px;
}

  .na-card{
    width:auto;
  }

  .na-card__image,
  .na-card__title,
  .na-card__price{
    width:100%;
    max-width:none;
  }

  .na-card__image{
    border-radius:12px;
  }

  .na-card__image img{
    width:100%;
    height:auto;
    aspect-ratio:1 / 1;
    border-radius:12px;
  }

  .na-card__title{
    margin-top:8px;
    min-height:0;
    font-size:13px;
    line-height:16px;
  }

  .na-card__price{
    font-size:13px;
    line-height:16px;
  }
}
/* ===== responsive fixes v3: keep search group intact + move right buttons as a group ===== */

.topbar-actions{
  display:flex;
  align-items:stretch;
  flex-wrap:nowrap;
  min-width:0;
}

.topbar-searchgroup{
  flex-wrap:nowrap; /* never let Search jump before inputs */
}

.topbar-search{
  flex-wrap:nowrap;
}

.topbar-search__input{
  line-height:27px; /* keep text vertically centered when shrinking */
  min-width:0;
}

.topbar-search__select{
  min-width:110px;
}

/* when blocks start to collide: center logo, then delivery, then controls */

/* keep search (input + select + Search) on one line; move fav/login/cart to next line as a group */

/* very narrow: still keep order input -> select -> Search, shrink widths only */

/* smallest: allow select to shrink further but keep the group intact */

/* ===== FIX: mid-breakpoint layout (logo centered) =====
   Goal: keep search row exactly like desktop; move Fav/Login/Cart to a new row below.
   IMPORTANT: Do NOT change button sizes in this range.
*/
@media (max-width: 1200px) and (min-width: 821px){
  .site-header__inner{
    width:100%;
    max-width:1440px;
    margin:0 auto;
    height:auto;
    min-height:126px;
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-rows:auto auto;
    align-items:center;
    row-gap:10px;
    padding:14px 0 8px;
    box-sizing:border-box;
  }

  .site-header__logo{
    grid-column:2;
    grid-row:1;
    width:auto;
    flex:none;
    height:auto;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    margin:0;
  }

  .site-header__right{
    display:contents;
  }

  .delivery-row{
    grid-column:4;
    grid-row:1;
    width:auto;
    height:auto;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:10px;
    margin:0;
    padding:0;
    white-space:nowrap;
    align-self:center;
  }

  .topbar{
    grid-column:1 / span 5;
    grid-row:2;
    width:min(100%, 915px);
    margin:0 auto;
    align-content:flex-start;
    flex-wrap:wrap;
    height:auto;
    justify-content:center;
    align-items:stretch;
  }


  .topbar__bkg-left{
    flex:0 0 auto;
  }

  .topbar-searchgroup{
    order:1;
    flex:1 1 auto;
    width:auto;
    max-width:900px;
    min-width:260px;
  }

  .topbar-search{
    width:100%;
    flex-wrap:nowrap;
  }

  .topbar__gap9{
    order:2;
    display:block;
  }

  .topbar__gap9 + .sep{
    order:3;
    display:inline-block !important;
  }

  .topbtn--search{
    order:4;
  }

  .topbtn--search + .sep{
    order:5;
    display:inline-block !important;
  }

  .topbar__gap{
    order:6;
    display:block;
    flex:0 0 100%;
    width:100%;
    height:10px;
    background:transparent;
  }

  .topbar-actions{
    order:7;
    display:flex;
    justify-content:center;
    align-items:stretch;
    flex:0 0 auto;
    width:auto;
    margin:0 auto;
  }

  .topbar-actions .sep{
    display:inline-block !important;
  }
}

/* ===== Keep original button sizes + separators for all widths down to 620px ===== */

/* At truly narrow widths, still keep Search on the right within its row */
@media (max-width: 560px){
  .topbar-search{ flex-wrap:nowrap; }
  .topbtn--search{ order:4; }
}


/* BUYARO MENU: remove default active highlight (no yellow, no bold) */
.cats-mega .cats-item.is-active{
  background: transparent !important;
  font-weight: normal !important;
}
.cats-mega .cats-tile--active{
  background: inherit !important;
  font-weight: normal !important;
}


/* CRUMBS560 FIX START */
/* Mobile <=560: breadcrumbs must behave like a paragraph (inline flow), not like flex columns.
   Goal:
   Automotive & Motorcycle / Vehicle Parts & Accessories /
   Tuning Exhausted Systems
   Only affects gray crumbs strip and its text. */
@media (max-width: 560px){

  /* IMPORTANT: stop flex layout for the crumbs row so text wraps normally */


  /* keep the gray strip itself in place - only thicken for 2 lines */
  .gray-strip{
    height:auto !important;
  }
  .gray-strip__inner{
    height:auto !important;
  }
}
/* CRUMBS560 FIX END */


/* ===== BUYARO MENU FIX: text-only cascading categories ===== */
.cats-overlay{
  overflow-x:auto;
}

.cats-mega{
  min-width:1440px;
}

.cats-mega__scroll{
  padding:14px 0;
}

.cats-item{
  display:block;
  width:100%;
  border:0;
  outline:none;
  box-shadow:none;
  background:transparent;
  text-align:left;
  padding:8px 16px;
  font-family:Tahoma, Arial, Helvetica, sans-serif;
  font-size:14px;
  line-height:1.35;
  color:#111;
  cursor:pointer;
  border-radius:0;
  appearance:none;
  -webkit-appearance:none;
}

.cats-item:hover,
.cats-item:focus{
  background:transparent;
}

.cats-item--lvl1{
  padding-left:16px;
}

.cats-item--lvl2{
  padding-left:18px;
}

.cats-item.is-open{
  font-weight:400 !important;
  background:transparent !important;
}

.cats-empty{
  height:100%;
  min-height:40px;
}

.cats-tiles{
  align-content:start;
}

.cats-tiles--empty{
  display:block;
  background:#e6e6e6;
}

.cats-tile{
  justify-content:flex-end;
  gap:0;
}

.cats-tile__text{
  display:block;
  line-height:1.25;
}

@media (max-width: 1200px){
  .cats-overlay{
    overflow-x:auto;
  }

  .cats-mega{
    min-width:1440px;
  }
}


/* ===== BUYARO MENU FIX v2: desktop hidden panels + mobile single accordion ===== */
.cats-item:hover,
.cats-item:focus{
  background:#e3e3e3 !important;
}

.cats-mega{
  height:420px;
}

.cats-mega__col--lvl2,
.cats-mega__col--lvl3{
  display:none;
}

.cats-mega.show-lvl2 .cats-mega__col--lvl2{
  display:block;
}

.cats-mega.show-lvl3 .cats-mega__col--lvl3{
  display:block;
}

.cats-mega.show-lvl2 .cats-mega__col--lvl1{
  width:345px;
}

.cats-mega.show-lvl2 .cats-mega__col--lvl2{
  width:405px;
}

.cats-mega.show-lvl3 .cats-mega__col--lvl3{
  flex:1 1 auto;
}

.cats-mega.show-lvl3 .cats-mega__col--lvl1{
  width:345px;
  flex-shrink:0;
}

.cats-mega.show-lvl3 .cats-mega__col--lvl2{
  width:405px;
  flex-shrink:0;
}

.cats-tile__text{
  text-align:center;
}

@media (min-width: 1441px){
  .cats-overlay{
    overflow-x:auto;
  }

  .cats-mega{
    min-width:1440px;
  }

  .cats-mega__col--lvl1{
    width:345px;
    border-right:1px solid #e3e3e3;
    display:block;
  }
  .cats-mega__col--lvl2{
    border-right:1px solid #e3e3e3;
    background:#fff;
  }

  .cats-mega__col--lvl3{
    background:#e6e6e6;
  }
}

@media (max-width: 1440px){
  .cats-overlay{
    position:absolute;
    left:0;
    right:0;
    bottom:auto;
    top:100%;
    background:transparent;
    overflow:visible;
  }

  body.cats-open{
    overflow:auto;
  }

  .gray-strip{
    position:relative;
  }

  .cats-mega{
    min-width:0;
    width:100%;
    height:auto;
    display:block;
    border-top:1px solid #d6d6d6;
    background:#fff;
  }

  .cats-mega__col--lvl1{
    width:100%;
    border-right:0;
    display:block;
  }

  .cats-mega__col--lvl2,
  .cats-mega__col--lvl3{
    display:none !important;
  }

  .cats-mega__scroll{
    height:auto;
    overflow:visible;
    padding:8px 0;
  }

  .cats-item{
    padding:10px 16px;
  }

  .cats-item.mobile-nested{
    padding-left:34px;
  }

  .cats-item.mobile-nested-2{
    padding-left:52px;
  }
}


/* ===== PAGE H1 STRIP ===== */
.page-h1-strip{
  width:100%;
  height:43px;
  background:#f5f5f5;
}

.page-h1-strip__inner{
  width:100%;
  max-width:1440px;
  height:43px;
  margin:0 auto;
  display:flex;
  align-items:center;
  padding:0 20px;
  box-sizing:border-box;
}

.page-h1{
  margin:0;
  font-family:Tahoma, Arial, Helvetica, sans-serif;
  font-size:22px;
  line-height:1;
  font-weight:700;
  color:#000;
}

@media (max-width: 1439px){
  .page-h1-strip__inner{
    padding:0 20px;
    box-sizing:border-box;
  }

  .page-h1{
    font-size:clamp(18px, 2vw, 22px);
  }
}

@media (max-width: 560px){
  .page-h1-strip{
    height:auto;
    min-height:43px;
  }

  .page-h1-strip__inner{
    height:auto;
    min-height:43px;
    padding:8px 12px;
    box-sizing:border-box;
  }

  .page-h1{
    font-size:clamp(14px, 4.2vw, 18px);
    line-height:1.2;
  }
}


/* ===== NEW ARRIVALS (DIV ONLY) ===== */
.new-arrivals{
  width:100%;
  margin-top:22px;
}

.new-arrivals__inner{
  width:100%;
  max-width:1440px;
  margin:0 auto;
  position:relative;
}

/* title tab */
.new-arrivals__tabrow{
  position:relative;
  z-index:3;
  padding-left:0;
  margin-bottom:-1px;
}

.new-arrivals__tab{
  position:relative;
  display:inline-flex;
  align-items:flex-end;
  margin:0;
  padding:10px 18px 8px 18px;
  background:#f2fafa;
  border-radius:14px 0 0 0;
  font-family:Tahoma, Arial, Helvetica, sans-serif;
  font-size:24px;
  line-height:24px;
  font-weight:700;
  color:#009f94;
}

.new-arrivals__tab::after{
  content:"";
  position:absolute;
  top:0;
  right:-40px;
  width:40px;
  height:100%;
  background:#f2fafa;
  clip-path:polygon(0 0, 100% 100%, 0 100%);
}

/* main rounded panel */
.new-arrivals__panel{
  margin-top:-1px;
  background:#f2fafa;
  border-radius:0 14px 14px 14px;
  padding:18px 20px 20px;
}

/* desktop exact geometry */
.new-arrivals__grid{
  display:grid;
  grid-template-columns:repeat(6, 200px);
  justify-content:space-between;
  column-gap:0;
  row-gap:10px;
  align-items:start;
}

.na-card{
  width:200px;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.na-card__image{
  display:block;
  width:200px;
  max-width:200px;
  text-decoration:none;
  border-radius:9px;
  overflow:hidden;
}

.na-card__image img{
  display:block;
  width:200px;
  height:200px;
  object-fit:cover;
  border-radius:9px;
}

.na-card__title{
  width:200px;
  margin:15px 0 0;
  min-height:34px;
  font-family:Tahoma, Arial, Helvetica, sans-serif;
  font-size:14px;
  line-height:16px;
  font-weight:400;
  color:#000000;
  letter-spacing:0;
}

.na-card__price{
  width:200px;
  margin-top:0;
  min-height:18px;
  font-family:Tahoma, Arial, Helvetica, sans-serif;
  font-size:18px;
  line-height:20px;
  font-weight:700;
  color:#950002;
}

/* proportional shrink before reflow */
@media (max-width: 1439px){
  .new-arrivals{
    padding-left:0;
    padding-right:0;
  }

  .new-arrivals__tabrow{
    padding-left:0;
    margin-bottom:-1px;
  }

  .new-arrivals__panel{
    padding:18px 20px 20px;
  }

  .new-arrivals__grid{
    grid-template-columns:repeat(6, minmax(0, 1fr));
    column-gap:12px;
    row-gap:10px;
    justify-items:center;
  }

  .na-card{
    width:auto;
  }

  .na-card__link{
    width:min(100%, 200px);
  }

  .na-card__image,
  .na-card__title,
  .na-card__price{
    width:min(100%, 200px);
    max-width:200px;
  }

  .na-card__image img{
    width:100%;
    height:auto;
    aspect-ratio:1 / 1;
  }

  .na-card__title{
    font-size:13px;
    line-height:16px;
  }

  .na-card__price{
    font-size:18px;
    line-height:20px;
  }
}

@media (max-width: 1200px){
  .new-arrivals{
    padding-left:0;
    padding-right:0;
  }

  .new-arrivals__tabrow{
    padding-left:0;
    margin-bottom:-1px;
  }

  .new-arrivals__panel{
    padding:16px 20px 18px;
  }

  .new-arrivals__grid{
    grid-template-columns:repeat(6, minmax(0, 1fr));
    column-gap:10px;
    row-gap:10px;
    justify-items:center;
  }

  .na-card{
    width:auto;
  }

  .na-card__link{
    width:min(100%, 200px);
  }

  .na-card__image,
  .na-card__title,
  .na-card__price{
    width:min(100%, 200px);
    max-width:200px;
  }

  .na-card__image img{
    width:100%;
    height:auto;
    aspect-ratio:1 / 1;
  }

  .na-card__title{
    font-size:12px;
    line-height:15px;
  }

  .na-card__price{
    font-size:18px;
    line-height:20px;
  }
}

/* 3 cards x 2 rows */
@media (max-width: 850px){
  .new-arrivals{
    margin-top:18px;
    padding-left:0;
    padding-right:0;
  }

  .new-arrivals__tabrow{
    padding-left:0;
    margin-bottom:-1px;
  }

  .new-arrivals__tab{
    font-size:22px;
    line-height:22px;
    padding:9px 28px 7px 16px;
  }

  .new-arrivals__tab::after{
    right:-28px;
    width:28px;
  }

.new-arrivals__panel{
  padding:18px 20px 16px;
}

.new-arrivals__grid{
  grid-template-columns:repeat(3, minmax(0, 1fr));
  column-gap:clamp(10px, 2vw, 40px);
  row-gap:18px;
  justify-items:center;
}

  .na-card{
    width:auto;
  }

.na-card__link{
  width:min(100%, 200px);
}

.na-card__image,
.na-card__title,
.na-card__price{
  width:min(100%, 200px);
  max-width:200px;
}

  .na-card__image img{
    width:100%;
    height:auto;
    aspect-ratio:1 / 1;
  }

  .na-card__title{
    min-height:0;
    margin-top:8px;
    font-size:12px;
    line-height:15px;
  }

  .na-card__price{
    font-size:18px;
    line-height:20px;
  }
}

/* 2 cards x 3 rows */
@media (max-width: 560px){
  .new-arrivals{
    margin-top:14px;
    padding-left:0;
    padding-right:0;
  }

  .new-arrivals__tabrow{
    padding-left:0;
    margin-bottom:-1px;
  }

  .new-arrivals__tab{
    font-size:20px;
    line-height:20px;
    padding:8px 22px 7px 12px;
    border-radius:12px 0 0 0;
  }

  .new-arrivals__tab::after{
    right:-20px;
    width:20px;
  }

.new-arrivals__panel{
  border-radius:0 12px 12px 12px;
  padding:14px 20px 12px;
}

.new-arrivals__grid{
  grid-template-columns:repeat(2, minmax(0, 1fr));
  column-gap:12px;
  row-gap:16px;
  justify-items:center;
}

  .na-card{
    width:auto;
  }

.na-card__link{
  width:min(100%, 200px);
}

.na-card__image,
.na-card__title,
.na-card__price{
  width:min(100%, 200px);
  max-width:200px;
}

.na-card__image{
  border-radius:9px;
}

.na-card__image img{
  width:100%;
  height:auto;
  aspect-ratio:1 / 1;
  border-radius:9px;
}

  .na-card__title{
    margin-top:8px;
    min-height:0;
    font-size:12px;
    line-height:15px;
  }

  .na-card__price{
    font-size:16px;
    line-height:18px;
  }
}

/* ===== TOP RANKING (DIV ONLY) ===== */
.top-ranking{
  width:100%;
  margin-top:22px;
}

.top-ranking__inner{
  width:100%;
  max-width:1440px;
  margin:0 auto;
  position:relative;
}

.top-ranking__tabrow{
  position:relative;
  z-index:3;
  padding-left:0;
  margin-bottom:-1px;
}

.top-ranking__tab{
  position:relative;
  display:inline-flex;
  align-items:flex-end;
  margin:0;
  padding:10px 18px 8px 18px;
  background:#fef6eb;
  border-radius:14px 0 0 0;
  font-family:Tahoma, Arial, Helvetica, sans-serif;
  font-size:24px;
  line-height:24px;
  font-weight:700;
  color:#f59f1d;
}

.top-ranking__tab::after{
  content:"";
  position:absolute;
  top:0;
  right:-40px;
  width:40px;
  height:100%;
  background:#fef6eb;
  clip-path:polygon(0 0, 100% 100%, 0 100%);
}

.top-ranking__panel{
  margin-top:-1px;
  background:#fef6eb;
  border-radius:0 14px 14px 14px;
  padding:18px 20px 20px;
}

.top-ranking__grid{
  display:grid;
  grid-template-columns:repeat(6, 200px);
  justify-content:space-between;
  column-gap:0;
  row-gap:26px;
  align-items:start;
}

.tr-card{
  width:200px;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.tr-card__link{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  width:100%;
  color:inherit;
  text-decoration:none;
}

.tr-card__image{
  display:block;
  width:200px;
  max-width:200px;
  border-radius:9px;
  overflow:hidden;
  transition:filter .18s ease;
}

.tr-card__image img{
  display:block;
  width:200px;
  height:200px;
  object-fit:cover;
  border-radius:9px;
}

.tr-card__title{
  width:200px;
  margin:15px 0 0;
  min-height:34px;
  font-family:Tahoma, Arial, Helvetica, sans-serif;
  font-size:14px;
  line-height:16px;
  font-weight:400;
  color:#000000;
  letter-spacing:0;
  text-decoration:none;
}

.tr-card__price{
  margin-top:0;
  min-height:20px;
  font-family:Tahoma, Arial, Helvetica, sans-serif;
  font-size:18px;
  line-height:20px;
  font-weight:700;
  color:#950002;
  white-space:nowrap;
}

.tr-card__meta{
  width:200px;
  margin-top:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
}

.tr-card__rating{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:1px;
  min-height:16px;
  white-space:nowrap;
}

.tr-card__star{
  display:inline-block;
  font-size:16px;
  line-height:1;
  color:#b8b8b8;
}

.tr-card__star--on{
  color:#d71919;
}

/* 1440 */
@media (max-width: 1439px){
  .top-ranking{
    padding-left:0;
    padding-right:0;
  }

  .top-ranking__tabrow{
    padding-left:0;
    margin-bottom:-1px;
  }

  .top-ranking__panel{
    padding:18px 20px 20px;
  }

  .top-ranking__grid{
    grid-template-columns:repeat(6, minmax(0, 1fr));
    column-gap:12px;
    row-gap:26px;
    justify-items:center;
  }

  .tr-card{
    width:auto;
  }

  .tr-card__link{
    width:min(100%, 200px);
  }

.tr-card__image,
.tr-card__title,
.tr-card__meta,
.tr-card__price{
  width:min(100%, 200px);
  max-width:200px;
}

  .tr-card__image img{
    width:100%;
    height:auto;
    aspect-ratio:1 / 1;
  }

  .tr-card__title{
    font-size:13px;
    line-height:16px;
  }

  .tr-card__price{
    font-size:18px;
    line-height:20px;
  }
}

/* 1200 */
@media (max-width: 1200px){
  .top-ranking{
    padding-left:0;
    padding-right:0;
  }

  .top-ranking__tabrow{
    padding-left:0;
    margin-bottom:-1px;
  }

  .top-ranking__panel{
    padding:16px 20px 18px;
  }

  .top-ranking__grid{
    grid-template-columns:repeat(6, minmax(0, 1fr));
    column-gap:10px;
    row-gap:26px;
    justify-items:center;
  }

  .tr-card{
    width:auto;
  }

  .tr-card__link{
    width:min(100%, 200px);
  }

.tr-card__image,
.tr-card__title,
.tr-card__meta,
.tr-card__price{
  width:min(100%, 200px);
  max-width:200px;
}

  .tr-card__image img{
    width:100%;
    height:auto;
    aspect-ratio:1 / 1;
  }

  .tr-card__title{
    font-size:12px;
    line-height:15px;
  }

  .tr-card__price{
    font-size:18px;
    line-height:20px;
  }
}

/* 850 */
@media (max-width: 850px){
  .top-ranking{
    margin-top:18px;
    padding-left:0;
    padding-right:0;
  }

  .top-ranking__tabrow{
    padding-left:0;
    margin-bottom:-1px;
  }

  .top-ranking__tab{
    font-size:22px;
    line-height:22px;
    padding:9px 28px 7px 16px;
  }

  .top-ranking__tab::after{
    right:-28px;
    width:28px;
  }

  .top-ranking__panel{
    padding:18px 20px 16px;
  }

  .top-ranking__grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    column-gap:clamp(10px, 2vw, 40px);
    row-gap:26px;
    justify-items:center;
  }

  .tr-card{
    width:auto;
  }

  .tr-card__link{
    width:min(100%, 200px);
  }

.tr-card__image,
.tr-card__title,
.tr-card__meta,
.tr-card__price{
  width:min(100%, 200px);
  max-width:200px;
}

  .tr-card__image img{
    width:100%;
    height:auto;
    aspect-ratio:1 / 1;
  }

  .tr-card__title{
    min-height:0;
    margin-top:8px;
    font-size:12px;
    line-height:15px;
  }

  .tr-card__price{
    font-size:18px;
    line-height:20px;
  }
}

/* 560 */
@media (max-width: 560px){
  .top-ranking{
    margin-top:14px;
    padding-left:0;
    padding-right:0;
  }

  .top-ranking__tabrow{
    padding-left:0;
    margin-bottom:-1px;
  }

  .top-ranking__tab{
    font-size:20px;
    line-height:20px;
    padding:8px 22px 7px 12px;
    border-radius:12px 0 0 0;
  }

  .top-ranking__tab::after{
    right:-20px;
    width:20px;
  }

  .top-ranking__panel{
    border-radius:0 12px 12px 12px;
    padding:14px 20px 12px;
  }

  .top-ranking__grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    column-gap:12px;
    row-gap:26px;
    justify-items:center;
  }

  .tr-card{
    width:auto;
  }

  .tr-card__link{
    width:min(100%, 200px);
  }

.tr-card__image,
.tr-card__title,
.tr-card__meta,
.tr-card__price{
  width:min(100%, 200px);
  max-width:200px;
}

.tr-card__image{
  border-radius:9px;
}

.tr-card__image img{
  width:100%;
  height:auto;
  aspect-ratio:1 / 1;
  border-radius:9px;
}

  .tr-card__title{
    margin-top:8px;
    min-height:0;
    font-size:12px;
    line-height:15px;
  }

  .tr-card__price{
    font-size:16px;
    line-height:18px;
  }
}


/* ===== interactive hover states ===== */
.hero-banner__link{
  display:block;
  transition:filter .18s ease;
}

.hero-banner__link:hover{
  filter:brightness(1.5);
}

.na-card__link{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  width:100%;
  color:inherit;
  text-decoration:none;
}

.na-card__image{
  display:block;
  border-radius:9px;
  overflow:hidden;
  transition:filter .18s ease;
}

.na-card__link:hover .na-card__image{
  filter:brightness(1.5);
}

.na-card__title{
  text-decoration:none;
}

.na-card__link:hover .na-card__title{
  text-decoration:underline;
}

.tr-card__link{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  width:100%;
  color:inherit;
  text-decoration:none;
}

.tr-card__image{
  transition:filter .18s ease;
}

.tr-card__link:hover .tr-card__image{
  filter:brightness(1.5);
}

.tr-card__title{
  text-decoration:none;
}

.tr-card__link:hover .tr-card__title{
  text-decoration:underline;
}

/* ===== BROWSING HISTORY ===== */
.browsing-history-spacer{
  display:none;
}

.browsing-history-strip{
  width:100%;
  background:#f5f5f5;
  padding:20px 0;
}

.top-ranking,
.browsing-history-strip,
.new-arrivals{
  margin-top:22px;
}

.browsing-history-strip__inner{
  width:100%;
  max-width:1440px;
  margin:0 auto;
}

.browsing-history{
  width:100%;
}

.browsing-history__tabrow{
  position:relative;
  z-index:3;
  padding-left:0;
  margin-bottom:-1px;
}

.browsing-history__tab{
  position:relative;
  display:inline-flex;
  align-items:flex-end;
  margin:0;
  padding:10px 18px 8px 18px;
  background:#fff;
  border-radius:14px 0 0 0;
  font-family:Tahoma, Arial, Helvetica, sans-serif;
  font-size:24px;
  line-height:24px;
  font-weight:700;
  color:#111;
}

.browsing-history__tab::after{
  content:"";
  position:absolute;
  top:0;
  right:-40px;
  width:40px;
  height:100%;
  background:#fff;
  clip-path:polygon(0 0, 100% 100%, 0 100%);
}

.browsing-history__panel{
  margin-top:-1px;
  background:#fff;
  border-radius:0 14px 14px 14px;
  padding:18px 20px 20px;
}

.browsing-history__grid{
  display:grid;
  grid-template-columns:repeat(6, 200px);
  justify-content:space-between;
  column-gap:0;
  row-gap:26px;
  align-items:start;
}

.bh-card{
  width:200px;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.bh-card__link{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  width:100%;
  color:inherit;
  text-decoration:none;
}

.bh-card__image{
  display:block;
  width:200px;
  max-width:200px;
  border-radius:9px;
  overflow:hidden;
  transition:filter .18s ease;
}

.bh-card__image img{
  display:block;
  width:200px;
  height:200px;
  object-fit:cover;
  border-radius:9px;
}

.bh-card__title{
  width:200px;
  margin:15px 0 0;
  min-height:34px;
  font-family:Tahoma, Arial, Helvetica, sans-serif;
  font-size:14px;
  line-height:16px;
  font-weight:400;
  color:#222;
}

.bh-card__price{
  width:200px;
  margin-top:6px;
  font-family:Tahoma, Arial, Helvetica, sans-serif;
  font-size:16px;
  line-height:18px;
  font-weight:700;
  color:#000;
}

.bh-card__link:hover .bh-card__image{
  filter:brightness(1.5);
}

.bh-card__link:hover .bh-card__title{
  text-decoration:underline;
}

@media (max-width: 1439px){
  .browsing-history-strip__inner{
    padding:0;
  }

  .browsing-history__panel{
    padding:18px 20px 20px;
  }

  .browsing-history__grid{
    grid-template-columns:repeat(6, minmax(0, 1fr));
    column-gap:12px;
    row-gap:26px;
    justify-items:center;
  }

  .bh-card{
    width:auto;
  }

  .bh-card__link{
    width:min(100%, 200px);
  }

  .bh-card__image,
  .bh-card__title,
  .bh-card__price{
    width:min(100%, 200px);
    max-width:200px;
  }

  .bh-card__image img{
    width:100%;
    height:auto;
    aspect-ratio:1 / 1;
  }

  .bh-card__title{
    font-size:13px;
    line-height:16px;
  }

  .bh-card__price{
    font-size:18px;
    line-height:20px;
  }
}

@media (max-width: 1200px){
  .browsing-history-strip__inner{
    padding:0;
  }

  .browsing-history__panel{
    padding:16px 20px 18px;
  }

  .browsing-history__grid{
    grid-template-columns:repeat(6, minmax(0, 1fr));
    column-gap:10px;
    row-gap:26px;
    justify-items:center;
  }

  .bh-card{
    width:auto;
  }

  .bh-card__link{
    width:min(100%, 200px);
  }

  .bh-card__image,
  .bh-card__title,
  .bh-card__price{
    width:min(100%, 200px);
    max-width:200px;
  }

  .bh-card__image img{
    width:100%;
    height:auto;
    aspect-ratio:1 / 1;
  }

  .bh-card__title{
    font-size:12px;
    line-height:15px;
  }

  .bh-card__price{
    font-size:18px;
    line-height:20px;
  }
}

@media (max-width: 850px){
  .browsing-history-spacer{
    height:21px;
  }

  .browsing-history-strip{
    padding:21px 0;
  }

  .browsing-history__tab{
    font-size:22px;
    line-height:22px;
    padding:9px 28px 7px 16px;
  }

  .browsing-history__tab::after{
    right:-28px;
    width:28px;
  }

  .browsing-history__panel{
    padding:18px 20px 16px;
  }

  .browsing-history__grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    column-gap:clamp(10px, 2vw, 40px);
    row-gap:26px;
    justify-items:center;
  }

  .bh-card{
    width:auto;
  }

  .bh-card__link{
    width:min(100%, 200px);
  }

  .bh-card__image,
  .bh-card__title,
  .bh-card__price{
    width:min(100%, 200px);
    max-width:200px;
  }

  .bh-card__image img{
    width:100%;
    height:auto;
    aspect-ratio:1 / 1;
  }

  .bh-card__title{
    min-height:0;
    margin-top:8px;
    font-size:12px;
    line-height:15px;
  }

  .bh-card__price{
    font-size:18px;
    line-height:20px;
  }
}

@media (max-width: 560px){
  .browsing-history-spacer{
    height:21px;
  }

  .browsing-history-strip{
    padding:21px 0;
  }

  .browsing-history__tab{
    padding:8px 22px 7px 12px;
    font-size:20px;
    line-height:20px;
  }

  .browsing-history__tab::after{
    right:-20px;
    width:20px;
  }

  .browsing-history__panel{
    border-radius:0 12px 12px 12px;
    padding:14px 20px 12px;
  }

  .browsing-history__grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    column-gap:12px;
    row-gap:16px;
    justify-items:center;
  }

  .bh-card{
    width:auto;
  }

  .bh-card__link{
    width:min(100%, 200px);
  }

  .bh-card__image,
  .bh-card__title,
  .bh-card__price{
    width:min(100%, 200px);
    max-width:200px;
  }

  .bh-card__image img{
    width:100%;
    height:auto;
    aspect-ratio:1 / 1;
  }

  .bh-card__title{
    margin-top:8px;
    min-height:0;
    font-size:12px;
    line-height:15px;
  }

  .bh-card__price{
    font-size:16px;
    line-height:18px;
  }
}

/* ===== DISCOVER MORE ===== */
.discover-more-strip{
  width:100%;
  background:#eee;
}

/*
 * The footer bands keep the same 22px rhythm as the content blocks, so
 * a coloured panel never runs straight into the grey strip below it.
 *
 * The gap belongs above the FIRST grey band only. Two grey bands that
 * follow each other stay joined - a gap between them would show the
 * white page through as a stripe.
 */
.discover-more-strip,
.footer-links-strip{
  margin-top:22px;
}

.browsing-history-strip + .discover-more-strip,
.browsing-history-strip + .footer-links-strip,
.discover-more-strip + .footer-links-strip,
.footer-links-strip + .footer-bottom-strip{
  margin-top:0;
}

.discover-more-strip__inner{
  width:100%;
  max-width:1440px;
  margin:0 auto;
}

.discover-more{
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:14px;
  align-items:start;
  padding:16px 0;
}

.discover-more__label{
  font-family:Tahoma, Arial, Helvetica, sans-serif;
  font-size:12px;
  line-height:22px;
  font-weight:400;
  color:#9a9a9a;
  white-space:nowrap;
}

.discover-more__links{
  min-width:0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  row-gap:0;
  column-gap:0;
  font-family:Tahoma, Arial, Helvetica, sans-serif;
  font-size:12px;
  line-height:22px;
}

.discover-more__link{
  color:#3a3a3a;
  font-weight:700;
  text-decoration:none;
}

.discover-more__link:hover{
  text-decoration:underline;
}

.discover-more__sep{
  display:inline-block;
  margin:0 10px;
  color:#8d8d8d;
  user-select:none;
}

@media (max-width: 1439px){
  .discover-more-strip__inner{
    padding:0 20px;
  }
}

@media (max-width: 560px){
  .discover-more{
    grid-template-columns:auto 1fr;
    column-gap:10px;
    padding:14px 12px;
  }

  .discover-more__label,
  .discover-more__links{
    font-size:12px;
    line-height:20px;
  }

  .discover-more__sep{
    margin:0 8px;
  }
}

/* ===== FOOTER LINKS STRIP ===== */
.footer-links-strip{
  width:100%;
  background:#e3e3e3;
}

.footer-links-strip__inner{
  width:100%;
  max-width:1440px;
  margin:0 auto;
  padding:22px 20px 28px;
  box-sizing:border-box;
}

.footer-links-grid{
  display:grid;
  grid-template-columns: 1.05fr 1.45fr 1.25fr 1.15fr 1.3fr 0.95fr;
  column-gap:34px;
  align-items:start;
}

.footer-links-col{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.footer-links-col__title{
  display:inline-block;
  margin:0 0 20px;
  font-family:Tahoma, Arial, Helvetica, sans-serif;
  font-size:14px;
  line-height:20px;
  font-weight:700;
  color:#111;
  text-decoration:none;
  cursor:default;
}

.footer-links-col__link{
  display:inline-block;
  margin:0 0 4px;
  font-family:Tahoma, Arial, Helvetica, sans-serif;
  font-size:14px;
  line-height:20px;
  font-weight:400;
  color:#222;
  text-decoration:none;
}

.footer-links-col__link--top{
  margin-bottom:4px;
}

.footer-links-col__title:hover{
  text-decoration:none;
}

.footer-links-col__link:hover{
  text-decoration:underline;
}

@media (max-width: 1400px){
  .footer-links-grid{
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    row-gap:24px;
    column-gap:24px;
  }
}

@media (max-width: 820px){
  .footer-links-strip__inner{
    padding:20px 16px 24px;
  }

  .footer-links-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap:22px;
    column-gap:20px;
  }
}

@media (max-width: 560px){
  .footer-links-strip__inner{
    padding:18px 12px 22px;
  }

  .footer-links-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap:18px;
    column-gap:18px;
  }

  .footer-links-col__title{
    margin-bottom:10px;
    font-size:14px;
    line-height:20px;
  }

  .footer-links-col__link{
    font-size:14px;
    line-height:20px;
  }

  .footer-links-col__link--top{
    margin-bottom:4px;
  }
}

/* ===== FOOTER PAYMENTS ===== */
.footer-links-col--payments{
  align-items:flex-start;
}

.footer-links-col__payments-title{
  margin:0 0 10px;
  font-family:Tahoma, Arial, Helvetica, sans-serif;
  font-size:14px;
  line-height:20px;
  font-weight:400;
  color:#222;
}

.footer-payments{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:4px;
  max-width:222px;
}

.footer-payments__item{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  line-height:0;
  flex:0 0 auto;
}

.footer-payments__item img{
  display:block;
  max-width:none;
  height:auto;
}

@media (max-width: 560px){
  .footer-links-col--payments{
    align-items:flex-start;
  }

  .footer-payments{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
    gap:4px;
    max-width:222px;
  }
}


/* ===== FOOTER BOTTOM STRIP ===== */
.footer-bottom-strip{
  width:100%;
  background:#d7d7d7;
}

.footer-bottom-strip__inner{
  width:100%;
  max-width:1440px;
  margin:0 auto;
  min-height:47px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 20px;
  box-sizing:border-box;
}

.footer-bottom-strip__text{
  font-family:Tahoma, Arial, Helvetica, sans-serif;
  font-size:12px;
  line-height:16px;
  font-weight:400;
  color:#222;
  text-align:center;
}

.footer-bottom-strip__text strong{
  font-weight:700;
}

@media (max-width: 560px){
  .footer-bottom-strip__inner{
    min-height:47px;
    padding:8px 12px;
  }

  .footer-bottom-strip__text{
    font-size:12px;
    line-height:16px;
  }
}

/* ===== favorite heart: first New Arrivals card ===== */
.na-card__image-wrap{
  position:relative;
  display:block;
  width:200px;
  max-width:200px;
}

.na-fav-toggle{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.na-fav-btn{
  position:absolute;
  top:10px;
  right:10px;
  z-index:3;
  width:22px;
  height:22px;
  border:0;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  background:transparent;
  box-shadow:none;
  transition:none;
}

.na-fav-btn::before{
  content:"\2661";
  font-family:"Segoe UI Symbol","Arial Unicode MS",Arial,Helvetica,sans-serif;
  font-size:26px;
  line-height:1;
  color:rgba(255,255,255,.82);
  -webkit-text-stroke:0;
  text-shadow:
    1px 0 0 rgba(120,120,120,.55),
   -1px 0 0 rgba(120,120,120,.55),
    0 1px 0 rgba(120,120,120,.55),
    0 -1px 0 rgba(120,120,120,.55);
  transition:none;
}

.na-fav-btn:hover::before{
  color:rgba(255,255,255,.96);
}

.na-fav-toggle:checked + .na-fav-btn::before{
  content:"\2665";
  font-family:"Segoe UI Symbol","Arial Unicode MS",Arial,Helvetica,sans-serif;
  font-size:26px;
  color:#e53935;
  -webkit-text-stroke:0;
  text-shadow:
    1px 0 0 rgba(120,120,120,.45),
   -1px 0 0 rgba(120,120,120,.45),
    0 1px 0 rgba(120,120,120,.45),
    0 -1px 0 rgba(120,120,120,.45);
  transform:none;
}

.na-fav-btn:active{
  transform:none;
}

@media (max-width: 1439px){
  .na-card__image-wrap{
    width:min(100%, 200px);
    max-width:200px;
  }
}

@media (max-width: 560px){
  .na-fav-btn{
    top:8px;
    right:8px;
    width:20px;
    height:20px;
  }

  .na-fav-btn::before{
    font-size:24px;
  }
}

/* ===== BUYARO MENU: link text + separate [+] toggle ===== */
.cats-item{
  display:flex;
  align-items:flex-start;
  gap:8px;
  width:100%;
  border:0;
  outline:none;
  box-shadow:none;
  background:transparent;
  text-align:left;
  padding:10px 16px;
  font-family:Tahoma, Arial, Helvetica, sans-serif;
  font-size:14px;
  line-height:1.35;
  color:#111;
  border-radius:0;
  appearance:none;
  -webkit-appearance:none;
}

.cats-item:hover,
.cats-item:focus{
  background:#f5f5f5 !important;
}

.cats-toggle{
  flex:0 0 auto;
  width:28px;
  min-width:28px;
  border:0;
  padding:0;
  margin:0;
  background:transparent;
  font-family:Tahoma, Arial, Helvetica, sans-serif;
  font-size:14px;
  line-height:1.35;
  color:#111;
  cursor:pointer;
  text-align:left;
}

.cats-toggle:hover,
.cats-toggle:focus{
  text-decoration:underline;
  outline:none;
}

.cats-toggle-placeholder{
  flex:0 0 auto;
  width:28px;
  min-width:28px;
  visibility:hidden;
  font-size:14px;
  line-height:1.35;
}

.cats-link{
  flex:1 1 auto;
  min-width:0;
  color:#111;
  text-decoration:none;
  line-height:1.35;
}

.cats-link:hover,
.cats-link:focus{
  text-decoration:underline;
  outline:none;
}

.cats-item.is-open .cats-link{
  font-weight:700;
}

.cats-item--lvl1{
  padding-left:16px;
}

.cats-item--lvl2{
  padding-left:18px;
}

.cats-item--lvl3{
  padding-left:18px;
}

@media (max-width: 1440px){
  .cats-item{
    padding:10px 16px;
  }

  .cats-item.mobile-nested{
    padding-left:34px;
  }

  .cats-item.mobile-nested-2{
    padding-left:52px;
  }
}



/* ===== NEWS LIST BLOCK ===== */

.news-list{
  display:flex;
  flex-direction:column;
}

.news-card{
  border-bottom:1px solid #e5e5e5;
}

.news-card:last-child{
  border-bottom:none;
}

.news-card__link{
  display:flex;
  align-items:center;
  gap:18px;
  padding:16px 20px 16px 0;
  text-decoration:none;
  color:#000;
}

.news-card__image{
  flex-shrink:0;
  display:block;
  width:200px;
  height:100px;
  border-radius:9px;
  overflow:hidden;
}

.news-card__image img{
  display:block;
  width:200px;
  height:100px;
  object-fit:cover;
  border-radius:9px;
  transition:filter .18s ease;
}

.news-card__body{
  display:flex;
  flex-direction:column;
  gap:6px;
  flex:1;
  min-width:0;
  padding-right:20px;
}

.news-card__date{
  font-family:Tahoma, Arial, Helvetica, sans-serif;
  font-size:13px;
  color:#888;
}

.news-card__title{
  font-family:Tahoma, Arial, Helvetica, sans-serif;
  font-size:15px;
  font-weight:700;
  line-height:1.4;
  color:#111;
}

.news-card__link:hover .news-card__image img{
  filter:brightness(1.5);
}

.news-card__link:hover .news-card__title{
  text-decoration:underline;
}


/* ===== STATIC PAGES (info pages, 404) ===== */

.static-page__inner{
  width:100%;
  max-width:1440px;
  margin:0 auto;
  padding:20px 20px 32px;
  box-sizing:border-box;
  font-family:Tahoma, Arial, Helvetica, sans-serif;
  font-size:15px;
  line-height:1.7;
  color:#222;
}

.static-page__inner p{
  margin:0 0 14px;
  max-width:900px;
}

.static-page__inner h2{
  margin:26px 0 12px;
  font-size:19px;
  line-height:1.35;
  font-weight:700;
  color:#111;
}

.static-page__inner h3{
  margin:20px 0 10px;
  font-size:17px;
  line-height:1.35;
  font-weight:700;
  color:#111;
}

.static-page__inner ul,
.static-page__inner ol{
  margin:0 0 16px;
  padding-left:22px;
  max-width:900px;
}

.static-page__inner li{
  margin:0 0 6px;
}

.static-page__inner a{
  color:#111;
}

.article-hero{
  display:block;
  max-width:100%;
  height:auto;
  border-radius:8px;
}

/* Heading strip that also carries a line of text under the H1.
   The plain strip is a fixed 43px tall and would clip it. */
.page-h1-strip--tall{
  height:auto;
}

.page-h1-strip--tall .page-h1-strip__inner{
  height:auto;
  min-height:43px;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  padding-top:10px;
  padding-bottom:10px;
  gap:3px;
}

.page-h1-strip--tall .hero-banner__sub{
  margin:0;
  position:static;
  max-width:none;
  font-family:Tahoma, Arial, Helvetica, sans-serif;
  font-size:13px;
  line-height:1.4;
  font-weight:400;
  color:#555;
  text-shadow:none;
}

@media (max-width: 560px){
  .static-page__inner{
    padding:16px 12px 26px;
  }
}

/* Tile icon in the categories menu: a picture chosen in the admin,
   not the two fixed background images this used to rely on. */
/*
 * The slot for the icon is always present, with or without a picture,
 * so every tile title sits on the same line.
 */
.cats-tile__iconbox{
  display:flex;
  align-items:center;
  justify-content:center;
  width:80px;
  height:80px;
  margin:0 auto 6px;
  flex:0 0 auto;
}

/* Category icons are drawn at their own size: 80 x 80, never scaled. */
.cats-tile__pic{
  display:block;
  width:80px;
  height:80px;
  object-fit:none;
}

@media (max-width: 560px){
  .cats-tile__iconbox{
    margin:0 auto 6px;
  }
}

/* ===========================================================
   SIDE GUTTER BELOW THE SITE WIDTH

   The layout is built for 1440. At 1440 and wider every container
   sits flush with the edge of the page, which is how it is meant to
   look and what the desktop design asks for.

   Once the window is narrower than that, the same containers would
   run straight into the edge of the browser - so a gutter appears,
   and only then. It is written as padding-left / padding-right on
   purpose: the vertical padding each block sets for itself stays
   untouched.

   This block sits at the end of the file so it wins over the older,
   scattered rules that set padding:0 on some of these containers.
   =========================================================== */

@media (max-width: 1439px){
  .site-header__inner,
  .gray-strip__inner,
  .page-strip__inner,
  .page-h1-strip__inner,
  .new-arrivals__inner,
  .top-ranking__inner,
  .browsing-history-strip__inner,
  .discover-more-strip__inner,
  .footer-links-strip__inner,
  .footer-bottom-strip__inner,
  .static-page__inner{
    padding-left:16px;
    padding-right:16px;
  }
}

@media (max-width: 560px){
  .site-header__inner,
  .gray-strip__inner,
  .page-strip__inner,
  .page-h1-strip__inner,
  .new-arrivals__inner,
  .top-ranking__inner,
  .browsing-history-strip__inner,
  .discover-more-strip__inner,
  .footer-links-strip__inner,
  .footer-bottom-strip__inner,
  .static-page__inner{
    padding-left:12px;
    padding-right:12px;
  }
}