@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Poppins:wght@400;500;600;700;800&display=swap');

:root{
  --page-bg:#fff;
  --heading-font:'Manrope',Arial,sans-serif;
  --base-size:16px;
  --content-width:1320px;
  --radius:10px;
  --product-columns:4;
  --heading-scale:1;
  --on-primary:#fff;
}
body{font-size:var(--base-size);background:var(--page-bg)}
.wrap{max-width:var(--content-width)}
h1,h2,h3,.price,.logo{font-family:var(--heading-font)}
.topbar,.topbar a,.primary{color:var(--on-primary)}
.primary.light{color:var(--blue-dark)}
.products{grid-template-columns:repeat(var(--product-columns),minmax(0,1fr))}
.hero-main,.hero-side,.bottom-banner,.product-card,.category,.search,.help-box,dialog{border-radius:var(--radius)}
.hero-main{background:color-mix(in srgb,var(--pale) 78%,white)}
.hero-side,footer{background:color-mix(in srgb,var(--pale) 45%,white)}
.brand-logo-image{display:block;max-width:220px;width:auto;height:54px;object-fit:contain}
#footer-logo .brand-logo-image{height:42px;max-width:190px}
.hero-product>img,.hero-side>img{flex-shrink:0}
.hero-caption strong{max-width:240px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.featured-section{padding:34px 0 40px;border-top:1px solid var(--line)}
.featured-section .section-title h2{margin-top:7px;font-size:calc(27px * var(--heading-scale))}
.featured-products{grid-template-columns:repeat(4,minmax(0,1fr))}
h1{font-size:calc(45px * var(--heading-scale))}
.hero-side h2{font-size:calc(27px * var(--heading-scale))}
.categories-section h2{font-size:calc(20px * var(--heading-scale))}
.catalog>.section-title h2{font-size:calc(29px * var(--heading-scale))}
.bottom-banner h2{font-size:calc(29px * var(--heading-scale))}

@media(max-width:1100px){
  .products,.featured-products{grid-template-columns:repeat(3,minmax(0,1fr))}
  h1{font-size:calc(37px * var(--heading-scale))}
  .hero-side h2{font-size:calc(23px * var(--heading-scale))}
}
@media(max-width:760px){
  .brand-logo-image{height:43px;max-width:175px}
  .products,.featured-products{grid-template-columns:repeat(2,minmax(0,1fr))}
  h1{font-size:calc(36px * var(--heading-scale))}
  .categories-section h2{font-size:calc(18px * var(--heading-scale))}
  .catalog>.section-title h2,.featured-section .section-title h2{font-size:calc(26px * var(--heading-scale))}
  .bottom-banner h2{font-size:calc(26px * var(--heading-scale))}
  .featured-section{padding:26px 0 30px}
}