/* BtTop Design System 3.0 — mobile-first production polish */
:root{--bt-primary:#1769ff;--bt-primary-dark:#0f52d6;--bt-primary-soft:#edf4ff;--bt-accent:#ff6b35;--bt-ink:#101828;--bt-text:#344054;--bt-muted:#667085;--bt-bg:#f4f6f9;--bt-card:#fff;--bt-line:#e4e7ec;--bt-success:#12b76a;--bt-danger:#f04438;--bt-radius:16px;--bt-shadow:0 8px 28px rgba(16,24,40,.07)}
body{background:var(--bt-bg);color:var(--bt-ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
button,input,select,textarea{font:inherit}button{touch-action:manipulation}.container{max-width:1400px}.header{z-index:1000}.nav{z-index:900}.mobile-cat-scroll{z-index:850}.header-action{position:relative}.header-action svg{width:22px;height:22px}.badge{background:var(--bt-accent)!important;box-shadow:0 0 0 2px #fff;font-size:10px!important;min-width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;border-radius:99px}
.header .container{min-height:68px}.header-search{min-width:240px}.header-search input{height:48px!important;border:1px solid var(--bt-line)!important;background:#f8fafc!important;border-radius:14px!important}.header-search button{width:46px!important;height:46px!important;border-radius:12px!important;background:var(--bt-primary)!important}.header-actions{gap:8px!important}.header-action{min-width:68px;padding:8px 9px!important;border-radius:12px!important}.header-action:hover{background:var(--bt-primary-soft)}.nav{background:#fff;border-bottom:1px solid var(--bt-line)}.nav .container{min-height:48px}.nav-catalog-btn{background:var(--bt-primary)!important;border-radius:10px!important;padding:10px 18px!important}.nav-links a{font-weight:600!important;color:#475467!important}.nav-links a:hover{color:var(--bt-primary)!important}.nav-build-set{color:var(--bt-accent)!important}
main,.page-content{min-height:40vh}.section{margin:40px 0}.section-header{display:flex;align-items:end;justify-content:space-between;gap:16px}.section-title{font-weight:800}.product-grid{align-items:stretch}.product-card{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease!important}.product-card:hover{transform:translateY(-4px)!important}.product-card-img{object-fit:contain!important}.product-card-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.product-card-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}.product-card-price .current{font-weight:800;color:var(--bt-ink)}.btn-cart,.btn-add-cart,.btn-primary{min-height:46px;background:var(--bt-primary)!important}.btn-cart:hover,.btn-add-cart:hover,.btn-primary:hover{background:var(--bt-primary-dark)!important}.badge-sale{background:#fff1eb!important;color:#d9481d!important}
.product-page{align-items:start}.product-gallery-main{background:#fff!important;border:1px solid var(--bt-line)!important}.product-gallery-main img{object-fit:contain!important}.product-thumbnails img{border:2px solid transparent!important;border-radius:12px!important}.product-thumbnails img.active{border-color:var(--bt-primary)!important}.product-info{min-width:0}.product-info h1{font-weight:800!important;line-height:1.12!important}.product-price-block{background:#fff;border:1px solid var(--bt-line);border-radius:18px;padding:18px!important}.product-benefits{display:grid;gap:8px}.product-benefit{border-radius:12px!important;background:#f8fafc!important}.product-tabs{background:#fff;border:1px solid var(--bt-line);border-radius:18px!important}
.catalog-sidebar{position:sticky;top:94px}.filter-accordion-header{min-height:46px!important}.filter-btn-mobile{background:var(--bt-primary)!important}.mobile-chips{gap:8px!important}.mobile-chips a,.mobile-chips button{border:1px solid var(--bt-line)!important;background:#fff!important;border-radius:99px!important;padding:8px 12px!important}.catalog-toolbar{box-shadow:none!important}
.cart-item{background:#fff!important}.cart-item img{object-fit:contain!important;background:#fff}.cart-qty-control{border:1px solid var(--bt-line)!important;border-radius:12px!important;overflow:hidden}.cart-summary{background:#fff!important}.cart-summary-total{font-size:30px!important;font-weight:800!important}.checkout-page,.checkout-container{padding-bottom:30px}.checkout-page button[type=submit],.checkout-container button[type=submit]{min-height:50px}
.footer{margin-top:56px!important}.footer-grid{gap:34px!important}.footer-logo{font-size:30px!important;font-weight:900!important}.footer-bottom{border-top-color:rgba(255,255,255,.12)!important}
@media(max-width:760px){
body{padding-bottom:82px!important}.container{padding-left:12px!important;padding-right:12px!important}
.header{position:sticky!important;top:0!important;padding:8px 0 10px!important}.header .container{display:flex!important;align-items:center!important;gap:10px!important;min-height:0!important;flex-wrap:wrap!important}.header .container>div:first-child{min-width:0!important;display:flex!important;align-items:center!important;flex:1 1 auto!important}.logo{font-size:22px!important;line-height:1!important;flex:0 0 auto!important}.logo-tagline{display:block!important;font-size:9px!important;line-height:1.15!important;margin-left:7px!important;white-space:nowrap!important}.mobile-work-hours{display:flex!important;align-items:center!important;gap:5px!important;flex:0 0 auto!important;white-space:nowrap!important}.mobile-phone-btn{display:flex!important;align-items:center!important;justify-content:center!important;width:auto!important;min-width:42px!important;height:42px!important;padding:0 9px!important;border-radius:12px!important;background:var(--bt-primary)!important;color:#fff!important;font-size:12px!important;font-weight:700!important;gap:5px!important;flex:0 0 auto!important}.mobile-phone-btn svg{width:18px!important;height:18px!important;fill:#fff!important}
.header-actions{display:none!important}.header-search{order:5!important;flex:0 0 100%!important;width:100%!important;max-width:none!important}.header-search input{height:44px!important;padding-left:15px!important;padding-right:52px!important;font-size:14px!important;border-radius:13px!important}.header-search button{width:40px!important;height:40px!important;right:2px!important;top:2px!important;border-radius:11px!important}.nav{display:none!important}
.mobile-cat-scroll{display:block!important;padding:8px 12px!important;background:#fff!important;border-bottom:1px solid var(--bt-line)!important;overflow-x:auto!important;white-space:nowrap!important;position:sticky!important;top:106px!important}.mobile-cat-scroll a{display:inline-block!important;padding:7px 11px!important;border-radius:999px!important;background:#f7f8fa!important;border:1px solid var(--bt-line)!important;color:#475467!important;font-size:12px!important;font-weight:650!important;margin-right:6px!important}.mobile-cat-scroll a:first-child{background:var(--bt-primary)!important;color:#fff!important;border-color:var(--bt-primary)!important}
.section{margin:28px 0!important}.section-header{align-items:center!important}.section-title{font-size:21px!important;letter-spacing:-.4px!important}.section-header>a{font-size:12px!important;font-weight:700!important;color:var(--bt-primary)!important}.hero-banner-new{min-height:330px!important;border-radius:16px!important}.hero-banner-new [style*="font-size:"]{max-width:85vw}
.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}.product-card{border-radius:14px!important}.product-card-img{height:155px!important;padding:10px!important}.product-card-body{padding:10px!important}.product-card-name{font-size:13px!important;line-height:1.35!important;min-height:35px!important}.product-card-rating{font-size:11px!important}.product-card-price{margin-top:7px!important;gap:4px!important}.product-card-price .current{font-size:18px!important}.product-card-price .old{font-size:11px!important}.btn-cart{min-height:40px!important;font-size:12px!important;padding:8px!important}.stock-warning{font-size:10px!important}
.product-page{display:block!important}.product-gallery{margin-bottom:16px!important}.product-gallery-main{border-radius:16px!important}.product-gallery-main img{height:330px!important;padding:12px!important}.product-thumbnails{gap:7px!important;padding-top:8px!important}.product-thumbnails img{width:58px!important;height:58px!important;border-radius:10px!important}.product-info h1{font-size:25px!important;margin-bottom:10px!important}.product-price-block{padding:14px!important;border-radius:16px!important}.product-price .current{font-size:30px!important}.btn-add-cart{width:100%!important;min-height:52px!important;font-size:16px!important}.product-actions{display:grid!important;grid-template-columns:1fr 1fr;gap:8px!important}.product-actions button{min-height:44px!important}.product-tabs{border-radius:16px!important}.tabs-header{overflow-x:auto!important;display:flex!important}.tab-btn{flex:0 0 auto!important;padding:12px 14px!important}
.catalog-layout{display:block!important}.catalog-sidebar{display:none!important}.mobile-catalog-title{font-size:22px!important}.desktop-sort-bar{display:none!important}.mobile-sort-filters{display:flex!important;gap:8px!important;margin-bottom:10px!important}.filter-btn-mobile{flex:1!important;min-height:42px!important;border-radius:12px!important}.mobile-chips-wrapper{display:block!important;overflow:hidden!important;margin-bottom:10px!important}.catalog-content{width:100%!important}
.cart-page{display:block!important}.cart-item{grid-template-columns:68px minmax(0,1fr)!important;padding:10px!important;border-radius:14px!important}.cart-item img{width:68px!important;height:68px!important}.cart-item-name{font-size:14px!important}.cart-summary{margin-top:12px!important;border-radius:16px!important}.cart-summary-total{font-size:27px!important}
.footer{margin-top:36px!important;padding-bottom:10px!important}.footer-grid{grid-template-columns:1fr!important;gap:24px!important}.footer-col:not(:first-child){border-top:1px solid rgba(255,255,255,.12);padding-top:18px}.footer-bottom{display:block!important;font-size:11px!important;line-height:1.5!important}.footer-payments{margin-top:8px!important}
.mobile-nav{display:grid!important;grid-template-columns:repeat(5,1fr)!important;position:fixed!important;left:0!important;right:0!important;bottom:0!important;height:72px!important;padding:6px 5px calc(6px + env(safe-area-inset-bottom))!important;background:rgba(255,255,255,.96)!important;backdrop-filter:blur(18px)!important;border-top:1px solid var(--bt-line)!important;box-shadow:0 -8px 30px rgba(16,24,40,.08)!important;z-index:2000!important}.mobile-nav a{position:relative!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:3px!important;border-radius:12px!important;color:#98a2b3!important;font-size:10px!important;font-weight:650!important}.mobile-nav a svg{width:21px!important;height:21px!important;fill:currentColor!important}.mobile-nav a.active{color:var(--bt-primary)!important;background:var(--bt-primary-soft)!important}.mobile-nav a:active{transform:scale(.96)}
}
@media(max-width:380px){.logo{font-size:21px!important}.logo-tagline{font-size:8px!important}.mobile-work-hours .work-hours-text{font-size:9px!important}.mobile-phone-btn{min-width:40px!important;width:40px!important;padding:0!important;font-size:0!important}.mobile-phone-btn svg{width:19px!important;height:19px!important}.product-card-img{height:140px!important}.product-card-name{font-size:12px!important}.product-card-price .current{font-size:17px!important}.mobile-cat-scroll{top:106px!important}}
@media(min-width:761px){.mobile-nav,.mobile-phone-btn{display:none!important}.mobile-cat-scroll{display:none!important}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* =========================================================
   BtTop canonical responsive header — 2026-09-22
   One source of truth for mobile header layout.
   ========================================================= */
.header .container{box-sizing:border-box}
.header-search{position:relative}
.mobile-phone-btn{box-sizing:border-box}

@media (max-width:760px){
  .header{position:sticky!important;top:0!important;z-index:1000!important;padding:8px 0 10px!important;background:#fff!important}
  .header .container{
    width:100%!important;
    max-width:none!important;
    padding:0 12px!important;
    margin:0!important;
    box-sizing:border-box!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto 42px!important;
    grid-template-rows:42px 44px!important;
    grid-template-areas:"brand hours phone" "search search search"!important;
    column-gap:8px!important;
    row-gap:8px!important;
    align-items:center!important;
  }
  .header .container > div:first-child{
    grid-area:brand!important;
    min-width:0!important;
    width:auto!important;
    max-width:100%!important;
    display:flex!important;
    align-items:center!important;
    overflow:hidden!important;
  }
  .logo{
    display:block!important;
    flex:0 0 auto!important;
    font-size:22px!important;
    line-height:1!important;
    letter-spacing:-.7px!important;
    white-space:nowrap!important;
  }
  .logo-tagline{display:none!important}

  .mobile-work-hours{
    grid-area:hours!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:auto!important;
    min-width:0!important;
    height:42px!important;
    padding:0!important;
    margin:0!important;
    background:transparent!important;
    border:0!important;
    gap:4px!important;
    white-space:nowrap!important;
    overflow:hidden!important;
  }
  .mobile-work-hours .work-hours-icon{font-size:14px!important;line-height:1!important;flex:0 0 auto!important}
  .mobile-work-hours .work-hours-text{font-size:10px!important;line-height:1.15!important;font-weight:700!important;white-space:nowrap!important;color:var(--bt-text)!important}

  .mobile-phone-btn{
    grid-area:phone!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:42px!important;
    min-width:42px!important;
    height:42px!important;
    padding:0!important;
    margin:0!important;
    border-radius:11px!important;
    background:var(--bt-primary)!important;
    color:#fff!important;
    font-size:0!important;
    gap:0!important;
    white-space:nowrap!important;
    overflow:hidden!important;
  }
  .mobile-phone-btn svg{width:20px!important;height:20px!important;display:block!important;fill:none!important;stroke:currentColor!important;flex:0 0 auto!important}
  .mobile-phone-btn span{display:none!important}

  .header-actions{display:none!important}
  .header-search{
    grid-area:search!important;
    display:block!important;
    position:relative!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:44px!important;
    margin:0!important;
    padding:0!important;
  }
  .header-search input{
    display:block!important;
    width:100%!important;
    height:44px!important;
    min-width:0!important;
    box-sizing:border-box!important;
    margin:0!important;
    padding:0 52px 0 14px!important;
    border:1px solid var(--bt-line)!important;
    border-radius:12px!important;
    background:#f8fafc!important;
    font-size:14px!important;
    line-height:44px!important;
  }
  .header-search button{
    position:absolute!important;
    right:2px!important;
    top:2px!important;
    transform:none!important;
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
    border-radius:10px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }
  .header-search button:hover{transform:none!important}
  .header-search button svg{width:20px!important;height:20px!important}
  .header-search .search-results{left:0!important;right:0!important;width:100%!important;top:calc(100% + 4px)!important;box-sizing:border-box!important}

  .nav{display:none!important}
  .mobile-cat-scroll{top:102px!important}
}

@media (max-width:380px){
  .header .container{grid-template-columns:minmax(0,1fr) auto 40px!important;column-gap:6px!important;padding:0 10px!important}
  .logo{font-size:21px!important}
  .mobile-work-hours{gap:3px!important}
  .mobile-work-hours .work-hours-text{font-size:9px!important}
  .mobile-phone-btn{width:40px!important;min-width:40px!important;height:40px!important}
}

@media (min-width:761px){
  .mobile-phone-btn,.mobile-work-hours{display:none!important}
}
