/* REMONTARY — final shared UI layer. Loaded after legacy page styles. */
:root{
  --ui-nav-font:13.5px;
  --ui-mobile-nav-font:14px;
  --ui-footer-font:12.5px;
  --ui-control-height:44px;
  --ui-page-gutter:32px;
}

/* One typography scale for every desktop header. */
.site-header .main-nav,
.blog-header .blog-top-nav{
  align-items:center;
  gap:clamp(8px,.85vw,15px);
}
.site-header .main-nav>a,
.blog-header .blog-top-nav>a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:8px 9px;
  border-radius:9px;
  color:#34483c!important;
  font-size:var(--ui-nav-font)!important;
  font-weight:700!important;
  line-height:1.2!important;
  letter-spacing:0!important;
  text-decoration:none!important;
  white-space:nowrap;
}
.site-header .main-nav>a:hover,
.blog-header .blog-top-nav>a:hover{
  background:#f0f7f2;
  color:#087a52!important;
}
.site-header .main-nav>a[aria-current="page"],
.blog-header .blog-top-nav>a[aria-current="page"]{
  background:#edf6f0;
  color:#087a52!important;
}

/* The word Магазин uses exactly the same size and weight as sibling links;
   only the Demo qualifier is intentionally smaller. */
.site-header .main-nav>a.nav-shop-link,
.blog-header .blog-top-nav>a.nav-shop-link{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1px;
  min-height:40px;
  font-size:var(--ui-nav-font)!important;
  font-weight:700!important;
  line-height:1.08!important;
}
.site-header .nav-shop-label,
.blog-header .nav-shop-label{
  display:block;
  margin:0;
  font-size:inherit!important;
  font-weight:inherit!important;
  line-height:1.15!important;
  letter-spacing:inherit!important;
  color:inherit!important;
}
.site-header .nav-shop-demo,
.blog-header .nav-shop-demo{
  display:block;
  margin:0;
  font-size:9.5px!important;
  font-weight:600!important;
  line-height:1.05!important;
  letter-spacing:.015em!important;
  color:#829187!important;
}
.site-header .main-nav>a.nav-catalog-link{
  background:#edf6f0;
  color:#087a52!important;
}
.site-header .nav-wrap{gap:clamp(10px,1.2vw,20px)}
.site-header .main-nav{flex:1 1 auto;min-width:0}
.site-header .nav-actions{flex:0 0 auto}

/* The shop header reuses the exact same nav rhythm. */
.shop-page .shop-header .main-nav>a{font-size:var(--ui-nav-font)!important;font-weight:700!important;line-height:1.2!important}
.shop-page .shop-header .main-nav>a.nav-catalog-link{font-size:var(--ui-nav-font)!important}

/* Footer links share the same scale across the main site, blog and shop. */
.unified-footer-col>a,
.shop-footer-nav>a{
  display:block;
  font-size:var(--ui-footer-font)!important;
  font-weight:600!important;
  line-height:1.5!important;
  letter-spacing:0!important;
  text-decoration:none;
}
.unified-footer-col>a:hover,
.shop-footer-nav>a:hover{text-underline-offset:3px}
.shop-footer-nav{display:flex;flex-direction:column;align-items:flex-start;gap:9px}
.shop-footer-nav>a{color:#d5e5d9!important}
.shop-footer-nav>a:hover{color:#fff!important;text-decoration:underline}

/* Mobile navigation: every row has the same touch target and type scale. */
@media(max-width:1100px){
  .site-header .nav-wrap{position:relative;min-height:68px}
  .site-header .menu-toggle,
  .global-menu-toggle{
    display:flex;
    width:42px;height:42px;min-width:42px;min-height:42px;
    align-items:center;justify-content:center;
    border:1px solid #dbe6dd;border-radius:11px;background:#fff;
  }
  .site-header .main-nav{
    display:none!important;position:absolute;top:calc(100% + 1px);left:0;right:0;z-index:800;
    max-height:calc(100dvh - 90px);overflow-y:auto;overscroll-behavior:contain;
    flex-direction:column;align-items:stretch;justify-content:flex-start;gap:3px;
    padding:10px 12px 14px;border:1px solid #e1e9e2;border-top:0;
    border-radius:0 0 15px 15px;background:#fff;
    box-shadow:0 16px 35px rgba(17,48,29,.14)
  }
  .site-header .main-nav.is-open{display:flex!important}
  .site-header .main-nav>a,
  .blog-header .blog-top-nav>a{
    display:flex!important;align-items:center!important;justify-content:flex-start!important;
    width:100%;min-height:46px;height:auto;padding:12px 13px;
    border-bottom:1px solid #eef2ee;border-radius:8px;
    font-size:var(--ui-mobile-nav-font)!important;font-weight:650!important;
    line-height:1.25!important;white-space:normal;
  }
  .site-header .main-nav>a.nav-shop-link,
  .blog-header .blog-top-nav>a.nav-shop-link{
    align-items:flex-start!important;justify-content:center!important;
    min-height:48px;gap:2px;font-size:var(--ui-mobile-nav-font)!important;
  }
  .site-header .nav-shop-label,
  .blog-header .nav-shop-label{font-size:var(--ui-mobile-nav-font)!important;font-weight:650!important;line-height:1.2!important}
  .site-header .nav-shop-demo,
  .blog-header .nav-shop-demo{font-size:9px!important;line-height:1.1!important}
  .blog-header .blog-header-inner{position:relative}
  .blog-header .blog-top-nav{
    display:none!important;position:absolute;top:calc(100% + 7px);left:0;right:0;z-index:820;
    max-height:calc(100dvh - 100px);overflow-y:auto;overscroll-behavior:contain;
    flex-direction:column;align-items:stretch;gap:3px;margin:0;
    padding:10px 12px 14px;border:1px solid #e1e9e2;border-radius:0 0 15px 15px;
    background:#fff;box-shadow:0 16px 35px rgba(17,48,29,.14)
  }
  .blog-header .blog-top-nav.is-open{display:flex!important}
  .blog-header .global-menu-toggle{flex:0 0 42px;order:2}
  .blog-header .blog-header-cta{order:3;margin-left:auto}
}
@media(max-width:520px){
  .site-header .nav-wrap{gap:8px}
  .site-header .brand,.site-header .nav-wrap>.brand{flex:0 1 152px!important;width:152px!important}
  .site-header .brand img,.site-header .nav-wrap>.brand img{width:152px!important}
  .site-header .main-nav{left:-2px;right:-2px}
  .blog-header .blog-header-inner{width:calc(100% - 24px);gap:8px}
  .blog-header .blog-brand{flex:0 1 154px!important;width:154px!important}
  .blog-header .blog-brand img{width:154px!important}
  .blog-header .blog-header-cta{padding:9px 10px;font-size:10px}
  .unified-footer-col>a,.shop-footer-nav>a{font-size:12px!important}
}

/* Shop filter/sort toolbar. Explicit block sizes prevent Grid/Flex stretch in
   iOS webviews and embedded browsers with non-standard viewport reporting. */
.shop-page .shop-catalog-head-actions{
  display:flex;align-items:center;justify-content:flex-end;gap:10px;
  min-width:0;min-height:44px;box-sizing:border-box;
}
.shop-page .shop-filter-toggle{
  display:none;box-sizing:border-box;align-self:center;
  height:var(--ui-control-height);min-height:var(--ui-control-height);max-height:var(--ui-control-height);
  flex:0 0 auto;align-items:center;justify-content:center;white-space:nowrap;
}
.shop-page .shop-sort-label{
  display:flex;flex-direction:row;align-items:center;justify-content:flex-end;gap:8px;
  min-width:0;min-height:var(--ui-control-height);height:var(--ui-control-height);max-height:var(--ui-control-height);
  white-space:nowrap;line-height:1.1;
}
.shop-page .shop-sort-label select{
  display:block;box-sizing:border-box;align-self:center;
  flex:0 1 210px;width:210px;max-width:210px;min-width:0;
  height:var(--ui-control-height);min-height:var(--ui-control-height);max-height:var(--ui-control-height);
  margin:0;padding:0 30px 0 12px;line-height:1.2;
}

@media(max-width:980px){
  .shop-page .shop-catalog-head-actions{
    display:grid!important;grid-template-columns:minmax(100px,112px) minmax(0,1fr)!important;
    grid-auto-rows:var(--ui-control-height);align-items:center!important;justify-content:stretch!important;
    gap:8px;width:100%;height:var(--ui-control-height)!important;
    min-height:var(--ui-control-height)!important;max-height:var(--ui-control-height)!important;
    overflow:hidden;
  }
  .shop-page .shop-filter-toggle{
    display:inline-flex!important;box-sizing:border-box;align-self:center!important;justify-self:stretch;
    width:100%!important;min-width:0!important;max-width:none!important;
    height:var(--ui-control-height)!important;min-height:var(--ui-control-height)!important;max-height:var(--ui-control-height)!important;
    flex:none!important;padding:0 9px!important;font-size:12px!important;line-height:1!important;
  }
  .shop-page .shop-sort-label{
    display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;
    align-self:center!important;justify-self:stretch;gap:6px;
    width:100%;height:var(--ui-control-height)!important;min-height:var(--ui-control-height)!important;max-height:var(--ui-control-height)!important;
    overflow:hidden;font-size:10px!important;line-height:1.1!important;
  }
  .shop-page .shop-sort-label select{
    display:block!important;box-sizing:border-box;align-self:center;justify-self:stretch;
    width:100%!important;min-width:0!important;max-width:none!important;
    height:var(--ui-control-height)!important;min-height:var(--ui-control-height)!important;max-height:var(--ui-control-height)!important;
    flex:none!important;margin:0!important;padding:0 21px 0 8px!important;
    font-size:10px!important;line-height:1.1!important;
  }
}
@media(max-width:620px){
  .shop-page .shop-catalog-head-actions{grid-template-columns:minmax(96px,108px) minmax(0,1fr)!important;gap:7px}
  .shop-page .shop-filter-toggle{font-size:11px!important;padding-inline:7px!important}
  .shop-page .shop-sort-label{grid-template-columns:auto minmax(0,1fr)!important;gap:4px;font-size:9px!important}
  .shop-page .shop-sort-label select{font-size:9px!important;padding-left:7px!important;padding-right:19px!important}
}
@media(max-width:360px){
  .shop-page .shop-catalog-head-actions{grid-template-columns:96px minmax(0,1fr)!important;gap:6px}
  .shop-page .shop-sort-label{grid-template-columns:53px minmax(0,1fr)!important;gap:3px;font-size:8px!important}
  .shop-page .shop-sort-label select{font-size:8px!important;padding-left:5px!important;padding-right:16px!important}
  .shop-page .shop-filter-toggle{font-size:10px!important}
}

/* Search and result summary remain separate, centered and never overlap. */
.shop-page .shop-search-sticky{z-index:330}
.shop-page .shop-result-meta{position:static;min-width:0}
.shop-page .shop-catalog-section{margin-inline:auto}

@media(prefers-reduced-motion:reduce){
  .site-header .main-nav,.blog-header .blog-top-nav,.shop-page .shop-filter-panel{scroll-behavior:auto;transition:none!important}
}

/* Mobile hero: keep the key visual prominent without pushing categories below the fold. */
@media(max-width:620px){
  .shop-page .shop-hero-premium{
    height:clamp(480px,128vw,520px)!important;
    min-height:clamp(480px,128vw,520px)!important;
    max-height:clamp(480px,128vw,520px)!important;
  }
  .shop-page .shop-hero-premium .shop-hero-inner{
    display:flex!important;flex-direction:column!important;align-items:stretch!important;
    justify-content:flex-end!important;gap:8px!important;
    height:100%!important;min-height:0!important;max-height:100%!important;
    padding:clamp(148px,40vw,174px) 14px 43px!important;
  }
  .shop-page .shop-hero-premium .shop-hero-copy{max-width:100%;align-self:stretch}
  .shop-page .shop-hero-premium .shop-hero-copy h1{font-size:clamp(28px,7.8vw,34px);line-height:1.02;margin:7px 0}
  .shop-page .shop-hero-premium .shop-hero-description{font-size:11px;line-height:1.38;max-width:40ch}
  .shop-page .shop-hero-premium .shop-hero-proof{font-size:8px;gap:6px 10px;margin-top:9px}
  .shop-page .shop-hero-premium .shop-hero-actions{gap:7px;margin-top:11px;flex-wrap:wrap}
  .shop-page .shop-hero-premium .shop-hero-primary,
  .shop-page .shop-hero-premium .shop-secondary-btn{min-height:38px;padding:9px 11px;font-size:10px}
  .shop-page .shop-hero-premium .shop-hero-note{display:none!important}
  .shop-page .shop-hero-premium .shop-hero-arrow{width:32px;height:32px}
}
@media(max-width:370px){
  .shop-page .shop-hero-premium .shop-hero-inner{padding:150px 12px 42px!important}
  .shop-page .shop-hero-premium .shop-hero-copy h1{font-size:27px}
  .shop-page .shop-hero-premium .shop-hero-description{font-size:10px}
}

/* Footer navigation in the main site and blog follows the same link scale too. */
.site-footer .footer-links>a,
.site-footer .footer-contacts>a,
.site-footer .footer-static-link,
.blog-footer-inner a,
.blog-footer-inner>div>a{
  font-size:var(--ui-footer-font)!important;
  font-weight:600!important;
  line-height:1.5!important;
  letter-spacing:0!important;
}
@media(max-width:520px){
  .site-footer .footer-links>a,
  .site-footer .footer-contacts>a,
  .site-footer .footer-static-link,
  .blog-footer-inner a,
  .blog-footer-inner>div>a{font-size:12px!important}
}
@media(min-width:621px) and (max-width:980px){
  .shop-page .shop-catalog-head-actions{width:min(420px,100%);max-width:420px;margin-left:auto}
}
@media(max-width:620px){
  .shop-page .shop-catalog-head-actions{width:100%;max-width:100%;margin-left:0}
  .shop-page .shop-header .main-nav>a{font-size:var(--ui-mobile-nav-font)!important}
}
@media(max-width:620px){
  .shop-page .shop-header nav.main-nav>a{font-size:var(--ui-mobile-nav-font)!important}
}
@media(max-width:620px){
  .shop-page .shop-header nav.main-nav>a.nav-catalog-link{font-size:var(--ui-mobile-nav-font)!important}
}

/* Keep the two-line Магазин / Демо item on exactly the same row rhythm. */
.site-header .main-nav>a.nav-shop-link,
.blog-header .blog-top-nav>a.nav-shop-link{
  min-height:40px!important;
  padding-block:5px!important;
  gap:0!important;
  line-height:1.05!important;
}
.site-header .nav-shop-label,
.blog-header .nav-shop-label{line-height:1.05!important}
.site-header .nav-shop-demo,
.blog-header .nav-shop-demo{line-height:1!important}
@media(max-width:1100px){
  .site-header .main-nav>a.nav-shop-link,
  .blog-header .blog-top-nav>a.nav-shop-link{
    min-height:46px!important;
    padding:7px 13px!important;
    gap:0!important;
  }
  .site-header .nav-shop-label,
  .blog-header .nav-shop-label{line-height:1.08!important}
  .site-header .nav-shop-demo,
  .blog-header .nav-shop-demo{line-height:1!important}
}

/* Cashback promo tile: complete photographic card in the same system as tools,
   finishing and flooring campaigns. The image deliberately leaves dark space
   on the left for legible copy and places the gift/coins on the right. */
.shop-page .shop-promo-cashback{
  background-color:#073b2a!important;
  background-image:url('/assets/images/shop/banners/promo-cashback.webp')!important;
  background-size:cover!important;
  background-position:center 52%!important;
  color:#fff!important;
  isolation:isolate;
}
.shop-page .shop-promo-cashback:before{display:none!important;content:none!important}
.shop-page .shop-promo-cashback:after{
  background:linear-gradient(90deg,rgba(3,30,21,.88) 0%,rgba(4,42,29,.70) 38%,rgba(4,42,29,.16) 76%,rgba(4,42,29,.08) 100%)!important;
}
.shop-page .shop-promo-cashback span{color:#f5d991!important}
.shop-page .shop-promo-cashback b{max-width:58%;color:#fff!important;text-shadow:0 2px 12px rgba(0,0,0,.16)}
.shop-page .shop-promo-cashback small{color:rgba(255,255,255,.94)!important}
@media(max-width:620px){
  .shop-page .shop-promo-cashback{background-position: center 51%!important}
  .shop-page .shop-promo-cashback b{max-width:62%;font-size:15px;line-height:1.16}
  .shop-page .shop-promo-cashback small{font-size:9px}
}