/* The banner colour themes live in style.css, next to the banner
   itself, so they work on every page and not only in here. */

/* ===== CURRENT PAGE: AUTOMOTIVE ===== */
.hero-banner--automotive{
  --hero-bg:#e8f0eb;
  --hero-grad-rgb:50,86,66;
  background:var(--hero-bg);
  position:relative;
  overflow:hidden;
}

.hero-banner--automotive .hero-banner__frame{
  background:var(--hero-bg);
  position:relative;
  width:100%;
  max-width:1440px;
  margin:0 auto;
  z-index:2;
}

.hero-banner--automotive .hero-banner__link{
  background:var(--hero-bg);
  display:block;
}

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

@media (min-width: 1441px){
  .hero-banner--automotive .hero-banner__frame::before,
  .hero-banner--automotive .hero-banner__frame::after{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    width:100px;
    pointer-events:none;
    z-index:1;
  }

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

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

.catsbar__crumbs b{
  color:#000;
  font-weight:700;
}

.browsing-history-strip,
.discover-more-strip{
  background:#F5F5F5;
}

.top-ranking__tab{
  color:#111;
  background:#fff;
}

.top-ranking__tab::after{
  background:#fff;
}
.page-h1-strip{
  background:#F5F5F5;
  padding-bottom:20px;
}

.top-ranking{
  background:#F5F5F5;
}

/* ===== Automotive page: white Most popular block ===== */

.top-ranking{
  background:#F5F5F5 !important;
}

.page-h1-strip{
  background:#F5F5F5 !important;
}

/* ===== CATEGORY GRID MENU ===== */

.auto-cats-bg{
  background:#F5F5F5;
  padding:20px 0;
  margin-bottom:0;
}

.auto-cats{
background:#e5e5e5;
  max-width:1440px;
  margin:0 auto;
  padding:3px;
}

.auto-cats__grid{
  max-width:1440px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:3px;
}

.auto-cats__item{
  background:#f5f5f5;
  border:none;
  min-height:110px;

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;

  font-size:14px;
  color:#000;
  text-decoration:none;

  padding:10px;
  transition:all .15s ease;
}

.auto-cats__item:hover{
  background:#ffffff;
}

/*
 * The slot for the icon is always there, with or without a picture,
 * so the titles of every tile sit on the same line. Adding a picture
 * later changes nothing about the layout.
 */
.auto-cats__iconbox{
  display:flex;
  align-items:center;
  justify-content:center;
  width:80px;
  height:80px;
  margin:0 auto 6px;
  flex:0 0 auto;
}

/* Category icon: exactly 80 x 80, drawn at its own size. */
.auto-cats__icon{
  display:block;
  width:80px;
  height:80px;
  object-fit:none;
}

.auto-cats__title{
  display:block;
}

.auto-cats__title{
  line-height:1.3;
}

.auto-cats__empty{
  background:transparent;
  border:none;
}

/* ===== 850px breakpoint ===== */

@media (max-width:850px){

.auto-cats__grid{
  grid-template-columns:repeat(3,1fr);
}

}

/* ===== mobile ===== */

@media (max-width:560px){

.auto-cats__grid{
  grid-template-columns:1fr;
}

.auto-cats__item{
  min-height:70px;
}

.auto-cats,
.top-ranking{
  background:#f5f5f5;
}

.site-header,
.gray-strip{
  background:#ffffff;
}

.auto-cats{
  background:#e5e5e5;
  max-width:1440px;
  margin:0 auto;
  padding:3px;
}

.auto-page .top-ranking__panel {
  margin-bottom: 0 !important;
}

.auto-page .browsing-history {
  margin-top: 0 !important;
}

}

/* remove stray margins */
.top-ranking-main{
  margin:0;
}

.browsing-history-strip{
  margin:0;
}

/* spacing between blocks only */
.top-ranking-main + .browsing-history-strip{
  margin-top:0;
}

.browsing-history-strip + .browsing-history-strip{
  margin-top:0;
}

/* ===== TOP RANKING MAIN FIX ===== */

.top-ranking-main{
  background:#F5F5F5;
}

.top-ranking-main__inner{
  max-width:1440px;
  margin:0 auto;
}

.top-ranking-main__panel{
  background:#ffffff;
  border-radius:8px;
  padding:20px;
  margin-bottom:0;
}

.top-ranking-main__title{
  font-size:22px;
  font-weight:700;
  margin-bottom:20px;
  position:relative;
}

/* angled corner, same as the homepage */
.top-ranking-main__title::after{
  content:"";
  position:absolute;
  right:-20px;
  top:0;
  width:40px;
  height:100%;
  background:#fff;
  transform:skewX(-30deg);
}

/* product grid */
.top-ranking-main__grid{
  display:grid;
  grid-template-columns:repeat(6, 200px);
  justify-content:space-between;
  column-gap:0;
  row-gap:20px;
  align-items:start;
}

/* card */
.tr-card-v2{
  display:flex;
  flex-direction:column;
}

/* image */
.tr-card__image{
  width:100%;
  aspect-ratio:1/1;
  overflow:hidden;
  border-radius:6px;
}

.tr-card__image img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* title */
.tr-card__title{
  font-size:14px;
  margin:8px 0;
  color:#000;
}

/* price */
.tr-card__price{
  color:#8B0000;
  font-weight:700;
}

/* rating */
.tr-card__rating{
  font-size:12px;
  color:#c40000;
}

/* FIX ONLY THIS PAGE */

.auto-page .top-ranking{
  margin-top:22px;
}

.auto-page .top-ranking-main__panel{
  background:#fff;
  border-radius:0 14px 14px 14px;
  padding:20px;
  margin-top:-1px;
}

.auto-page .top-ranking-main{
  background:#F5F5F5;
  padding:0;
}

/* === FIX MOST POPULAR HEADER (same as Automotive Articles) === */

.auto-page .top-ranking-main__tabrow{
  position:relative;
  z-index:3;
  margin-bottom:0;
}

/* ===== FIX: spacing between blocks ===== */

.auto-page .browsing-history-strip{
  padding:0 !important;
  margin-top:0 !important;
}

.auto-page .browsing-history-strip__inner{
  padding:20px 0 0 0;
}

.auto-page .top-ranking-main + .browsing-history-strip .browsing-history-strip__inner{
  padding-top:20px;
}

.auto-page .browsing-history-strip + .browsing-history-strip .browsing-history-strip__inner{
  padding-top:20px;
}

/* ===== TOP RANKING MAIN: responsive (same as browsing-history__grid) ===== */

@media (max-width: 1439px){
  .auto-page .top-ranking-main__grid{
    grid-template-columns:repeat(6, minmax(0, 1fr));
    column-gap:12px;
    row-gap:20px;
    justify-items:center;
  }
  .auto-page .tr-card-v2{
    width:auto;
  }
  .auto-page .tr-card__image{
    width:min(100%, 200px);
    max-width:200px;
  }
}

@media (max-width: 1200px){
  .auto-page .top-ranking-main__grid{
    grid-template-columns:repeat(6, minmax(0, 1fr));
    column-gap:10px;
    row-gap:20px;
    justify-items:center;
  }
}

@media (max-width: 850px){
  .auto-page .top-ranking-main__grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    column-gap:clamp(10px, 2vw, 40px);
    row-gap:20px;
    justify-items:center;
  }
}

@media (max-width: 560px){
  .auto-page .top-ranking-main__grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    column-gap:12px;
    row-gap:16px;
    justify-items:center;
  }
}

/* ===== INDUSTRIAL MACHINERY BANNER ===== */
.hero-banner--industrial{
  --hero-bg:#f0e6cc;
  --hero-grad-rgb:140,100,15;
  background:var(--hero-bg);
  position:relative;
  overflow:hidden;
}

.hero-banner--industrial .hero-banner__frame{
  background:var(--hero-bg);
  position:relative;
  width:100%;
  max-width:1440px;
  margin:0 auto;
  z-index:2;
}

.hero-banner--industrial .hero-banner__link{
  background:var(--hero-bg);
  display:block;
}

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

@media (min-width: 1441px){
  .hero-banner--industrial .hero-banner__frame::before,
  .hero-banner--industrial .hero-banner__frame::after{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    width:100px;
    pointer-events:none;
    z-index:1;
  }

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

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

/* ===== HERO BANNER: H1 overlay ===== */

.hero-banner--industrial .hero-banner__frame{
  position:relative;
}

/*
 * The subcategory tiles sit flush against the banner above them.
 *
 * This used to be written out for the two decorated banners only, so a
 * section whose banner is plain kept the 20px gap and its tiles hung
 * away from the picture. The base class is on every banner, so one
 * rule now covers all of them.
 */
.hero-banner + .auto-cats-bg{
  padding-top:0;
}

/* When the listings block is the first thing under the menu, it needs
   the same breathing room the other blocks on the page have: the
   articles strip uses 21px, the subcategory tiles 20px. */
.auto-page .top-ranking-main--lead{
  padding-top:20px;
}

/* The block that carries the page H1 sits on the same rhythm. */
.auto-cats .top-ranking-main__tabrow{
  margin-bottom:14px;
}

/* ===========================================================
   SIDE GUTTER BELOW THE SITE WIDTH
   The section page containers, kept in step with the rest of the
   site: flush at 1440 and wider, a gutter once the window is
   narrower than the layout.
   =========================================================== */

@media (max-width: 1439px){
  .auto-cats-bg,
  .top-ranking-main__inner{
    padding-left:16px;
    padding-right:16px;
  }
}

@media (max-width: 560px){
  .auto-cats-bg,
  .top-ranking-main__inner{
    padding-left:12px;
    padding-right:12px;
  }
}