:root { --font: 'Inter', system-ui, sans-serif; --dark: #1c2127; }
.container{max-width:1480px;margin:0 auto;padding:0 40px}
#sideOverlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:450;display:none}
#sideOverlay.open{display:block}
.side-panel{position:fixed;top:0;right:-480px;width:460px;max-width:100vw;height:100vh;background:#fff;z-index:460;display:flex;flex-direction:column;box-shadow:-4px 0 24px rgba(0,0,0,.15);transition:right .3s}
.side-panel.open{right:0}
.side-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid #eaecf1;font-size:17px;font-weight:500}
.side-head-close{font-size:22px;color:#9ca3af;cursor:pointer;background:none;border:none}
.side-body{flex:1;overflow-y:auto;padding:16px 22px;display:flex;flex-direction:column;gap:12px}
.side-empty,.cmp-empty{text-align:center;color:#9ca3af;padding:40px 0;font-size:14px}
.side-row{display:flex;gap:12px;align-items:center;border:1px solid #eaecf1;border-radius:10px;padding:10px}
.side-row img{width:60px;height:60px;object-fit:contain;background:#f6f6f6;border-radius:6px;flex-shrink:0}
.side-info{flex:1;min-width:0}
.side-name{font-size:13px;line-height:1.4;margin-bottom:4px}
.side-name a{color:inherit;text-decoration:none}
.side-name a:hover{color:#137bc2}
.side-price{font-size:14px;font-weight:600;color:#137bc2}
.side-add-btn{background:#137bc2;color:#fff;padding:7px 12px;border-radius:8px;font-size:12px;font-weight:500;border:none;cursor:pointer}
.side-del{color:#9ca3af;font-size:20px;background:none;border:none;cursor:pointer;padding:0 4px}
.side-del:hover{color:#da020d}
.in-fav svg{fill:currentColor;color:#da020d}
#cmpPanel{position:fixed;top:0;right:0;width:min(980px,96vw);height:100vh;background:#fff;z-index:9000;display:none;flex-direction:column;box-shadow:-4px 0 40px rgba(0,0,0,.18);overflow:hidden;transform-origin:100% 0}
#cmpPanel.open{display:flex}
.cmp-head{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid #eaecf1;position:sticky;top:0;background:#fff}
.cmp-head-title{font-size:18px;font-weight:500}
.cmp-body{padding:24px;flex:1}
.cmp-grid{display:grid;gap:20px}
.cmp-col{border:1px solid #eaecf1;border-radius:14px;padding:18px;text-align:center;position:relative}
.cmp-remove{position:absolute;top:10px;right:10px;width:26px;height:26px;border-radius:50%;border:1px solid #eaecf1;background:#fff;font-size:16px;cursor:pointer;color:#9ca3af;display:flex;align-items:center;justify-content:center}
.cmp-img{height:160px;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.cmp-img img{max-height:140px;object-fit:contain}
.cmp-name{font-size:13px;font-weight:500;line-height:1.4;margin-bottom:8px}
.cmp-name a{color:inherit;text-decoration:none}
.cmp-price{font-size:17px;font-weight:600;color:#137bc2;margin-bottom:12px}
.cmp-add{width:100%;background:#137bc2;color:#fff;padding:9px;border-radius:8px;font-size:13px;border:none;cursor:pointer}
.in-cmp{color:#137bc2}
/* Попап заказа — стиль строй би */
#orderPopup{display:none;position:fixed;inset:0;z-index:500;align-items:center;justify-content:center}
#orderPopup .op-overlay{position:absolute;inset:0;background:rgba(0,0,0,.5);cursor:pointer}
.op-box{position:relative;z-index:1;background:#fff;border-radius:16px;overflow:hidden;width:100%;max-width:680px;margin:20px;box-shadow:0 12px 48px rgba(0,0,0,.18)}
.op-header{padding:18px 24px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #eaecf1}
.op-header h3{color:#1c2127;font-size:18px;font-weight:500;margin:0}
.op-close{background:none;border:none;color:#9ca3af;font-size:24px;cursor:pointer;line-height:1}
.op-close:hover{color:#1c2127}
.op-body{display:grid;grid-template-columns:220px 1fr}
.op-product{padding:20px 24px;border-right:1px solid #eaecf1;background:#f9fafb}
#opImg{width:100%;height:160px;object-fit:contain;margin-bottom:12px;display:none;border-radius:8px;border:1px solid #eaecf1}
.op-imgs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.op-imgs img{width:56px;height:56px;object-fit:contain;border:1px solid #eaecf1;border-radius:8px;background:#fff}
.op-product-name{font-weight:500;font-size:13px;margin-bottom:8px;color:#1c2127;line-height:1.4}
.op-product-sku{font-size:11px;color:#9ca3af;margin-bottom:8px}
.op-product-price{font-size:24px;font-weight:600;color:#137bc2}
.op-form{padding:20px 24px}
.op-form input,.op-form textarea{width:100%;border:1px solid #eaecf1;background:#fff;color:#1c2127;padding:11px 13px;font-size:14px;margin-bottom:10px;outline:none;box-sizing:border-box;font-family:inherit;border-radius:8px}
.op-form input::placeholder,.op-form textarea::placeholder{color:#9ca3af}
.op-form input:focus,.op-form textarea:focus{border-color:#137bc2}
.op-form textarea{resize:none;height:56px}
.op-submit{background:#137bc2;color:#fff;border:none;padding:13px 28px;font-size:14px;font-weight:500;cursor:pointer;width:100%;font-family:inherit;border-radius:8px;transition:background .2s}
.op-submit:hover{background:#0f6aad}
.op-agree{font-size:11px;color:#9ca3af;margin-top:8px;line-height:1.4}
@media(max-width:600px){.op-body{grid-template-columns:1fr}.op-product{border-right:none;border-bottom:1px solid #eaecf1}.side-panel{width:100vw}}

/* ── ZOOM АДАПТИВ (как на pласт навесе) ── */
:root { --desktop-zoom: 1; }
@media (min-width: 1441px) and (max-width: 1700px) { :root { --desktop-zoom: 0.9; } }
@media (min-width: 1281px) and (max-width: 1440px) { :root { --desktop-zoom: 0.85; } }
@media (min-width: 1025px) and (max-width: 1280px) { :root { --desktop-zoom: 0.75; } }
body { zoom: var(--desktop-zoom); }

/* ── Глобальные панели (корзина, избранное, модалки) ── */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:400;display:none;align-items:flex-start;justify-content:flex-end}
.overlay.active{display:flex}
.cart-panel{width:420px;max-width:100vw;background:#fff;display:flex;flex-direction:column;box-shadow:-4px 0 24px rgba(0,0,0,.15);animation:slideIn .25s ease;height:100vh;height:calc(100vh / var(--desktop-zoom,1))}
@keyframes slideIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
.cart-panel-head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid #e8e8e8;font-size:18px;font-weight:500}
.cart-close{cursor:pointer;color:#9ca3af;font-size:22px;line-height:1;background:none;border:none}
.cart-items{flex:1;overflow-y:auto;padding:16px 24px;display:flex;flex-direction:column;gap:14px}
.cart-empty{text-align:center;color:#9ca3af;padding:40px 0;font-size:15px}
.cart-row{display:flex;gap:12px;align-items:center;padding:12px;border:1px solid #e8e8e8;border-radius:10px}
.cart-row img{width:56px;height:56px;object-fit:contain;border-radius:6px;background:#f5f5f5;flex-shrink:0}
.cart-row-info{flex:1;min-width:0}
.cart-row-name{font-size:13px;line-height:1.4;margin-bottom:4px}
.cart-row-price{font-size:14px;font-weight:600;color:#137bc2}
.cart-qty{display:flex;align-items:center;gap:6px}
.cart-qty button{width:26px;height:26px;border:1px solid #e8e8e8;border-radius:4px;background:#fff;font-size:16px;cursor:pointer}
.cart-qty span{font-size:14px;font-weight:500;min-width:20px;text-align:center}
.cart-del{color:#9ca3af;cursor:pointer;font-size:18px;background:none;border:none}
.cart-panel-foot{padding:20px 24px;border-top:1px solid #e8e8e8}
.cart-total{display:flex;justify-content:space-between;margin-bottom:14px;font-size:16px;font-weight:500}
.cart-checkout-btn{width:100%;background:#137bc2;color:#fff;padding:14px;border-radius:8px;font-size:16px;font-weight:500;border:none;cursor:pointer}
.cart-checkout-btn:hover{background:#0f6aad}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:500;display:none;align-items:center;justify-content:center}
.modal-overlay.active{display:flex}
.modal{background:#fff;border-radius:16px;padding:32px;width:100%;max-width:480px;margin:20px;position:relative}
.modal h3{font-size:22px;font-weight:500;margin-bottom:8px}
.modal-subtitle{font-size:14px;color:#9ca3af;margin-bottom:20px}
.modal form{display:flex;flex-direction:column;gap:12px}
.modal input,.modal textarea{padding:12px 16px;border:1.5px solid #e8e8e8;border-radius:8px;font-size:15px;font-family:inherit;outline:none}
.modal input:focus,.modal textarea:focus{border-color:#137bc2}
.modal textarea{resize:vertical;min-height:80px}
.modal-submit{background:#137bc2;color:#fff;padding:14px;border-radius:8px;font-size:16px;font-weight:500;border:none;cursor:pointer}
.modal-close-btn{position:absolute;top:16px;right:20px;font-size:22px;cursor:pointer;background:none;border:none;color:#9ca3af}
.overlay.open{display:flex}
  footer {
    background: #ebebeb;
    color: #1c2127;
    padding: 60px 0 0;
  }
  .footer-grid {
    display: grid;
    grid-template-columns: 320px 1fr 320px;
    gap: 40px;
    margin-bottom: 48px;
  }
  .footer-col-title {
    font-size: 13px;
    font-weight: 300;
    color: rgba(28,33,39,0.5);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 16px;
  }
  .footer-links { display: flex; flex-direction: column; gap: 10px; }
  .footer-links a {
    font-size: 15px;
    color: #1c2127;
    transition: color var(--transition);
  }
  .footer-links a:hover { color: #137bc2; }
  .footer-catalog-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 24px;
  }
  .footer-catalog-grid a {
    font-size: 14px;
    color: #1c2127;
    transition: color var(--transition);
    line-height: 1.4;
  }
  .footer-catalog-grid a:hover { color: #137bc2; }
  
  .footer-copyright {
    font-size: 17px;
    color: rgba(28, 33, 39, 0.6);
    /* max-width: 500px; */
    text-align: center;
    padding: 12px 0px;
}
  .footer-bottom {
    border-top: 1px solid rgba(28,33,39,0.12);
        border-bottom: 1px solid rgba(28,33,39,0.12);
    padding: 24px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
  }
  .footer-copy { font-size: 14px; font-weight: 300; color: #1c2127; }
  .footer-legal { font-size: 13px; color: rgba(28,33,39,0.6); max-width: 500px; text-align: center; }
  .footer-payment { display: flex; gap: 8px; align-items: center; }
  .payment-icon {
    height: 28px;
    width: 48px;
    background: rgba(28,33,39,0.08);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: rgba(28,33,39,0.5);
    font-weight: 600;
  }

  /* ─────────── RESPONSIVE 1024px ─────────── */
  @media (max-width: 1200px) {
    :root { --max-w: 960px; }
    .container { padding: 0 32px; }
    .products-grid { grid-template-columns: repeat(4, 1fr); }
    .categories-grid { grid-template-columns: repeat(4, 1fr); gap: 12px; }
    .cat-card { height: 208px; padding: 22px; }
    .ad-banner { height: 220px; }
    .features-grid { gap: 16px; }
    .feature-card { height: 220px; }
    .contacts-bar { padding: 70px 0; }
    .footer-grid { grid-template-columns: 320px 1fr; gap: 30px; }
    .footer-grid > *:last-child { grid-column: 1/-1; }
  }

  /* ─────────── RESPONSIVE 768px ─────────── */
  @media (max-width: 1023px) {
    :root { --max-w: 720px; }
    .container { padding: 0 24px; }
    .header .container { gap: 36px; }
    .catalog-btn { font-size: 16px; }
    .products-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
    .categories-grid { grid-template-columns: repeat(4, 1fr); gap: 12px; }
    .cat-card { height: 188px; padding: 20px; }
    .cat-card-name { font-size: 16px; }
    .section-title { font-size: 28px; }
    .ad-grid { gap: 14px; }
    .ad-banner { height: 220px; }
    .news-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .features-grid { gap: 14px; }
    .feature-card { height: 190px; }
    .hero-title { font-size: 32px; }
    .hero-img-wrap { display: none; }
    .contacts-bar { padding: 60px 0; }
    .contact-value { font-size: 26px; }
    footer { padding: 50px 0 0; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
    .footer-grid > *:last-child { grid-column: 1/-1; }
  }

  /* ─────────── RESPONSIVE 590px ─────────── */
  @media (max-width: 767px) {
    :root { --max-w: 550px; }
    .container { padding: 0 20px; }
    .topbar { display: none; }
    .header .container { gap: 24px; flex-wrap: wrap; }
    .catalog-btn { padding: 10px 16px; font-size: 15px; }
    .search-wrap { order: 3; flex-basis: 100%; max-width: 100%; }
    .header-actions { margin-left: auto; }
    .action-btn { min-width: 52px; font-size: 11px; padding: 4px 6px; }
    .hero { min-height: 320px; }
    .hero .container { padding-top: 28px; padding-bottom: 28px; }
    .hero-img-wrap { display: none; }
    .hero-title { font-size: 28px; }
    .hero-desc { font-size: 14px; margin-bottom: 24px; }
    .hero-btn { padding: 14px 30px; font-size: 14px; }
    .ad-grid { grid-template-columns: 1fr; gap: 14px; }
    .ad-banner { height: 260px; }
    .categories-grid { grid-template-columns: repeat(6, 168px); overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
    .categories-grid::-webkit-scrollbar { display: none; }
    .cat-card { height: 168px; padding: 16px; }
    .cat-card-name { font-size: 14px; }
    .section-title { font-size: 24px; }
    .products-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .news-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .features-grid { grid-template-columns: 1fr; gap: 12px; }
    .feature-card { height: 190px; }
    .contacts-bar { padding: 50px 0; }
    .contacts-grid { flex-wrap: wrap; gap: 24px;
  justify-content: space-evenly;
}
    .contact-value { font-size: 22px; }
    .contact-value.small { font-size: 16px; }
    footer { padding: 50px 0 0; }
    .footer-grid { grid-template-columns: 1fr; gap: 30px; }
    .footer-catalog-grid { grid-template-columns: 1fr 1fr; }
    .footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
  }

  /* ─────────── RESPONSIVE 360px ─────────── */
  @media (max-width: 589px) {
    :root { --max-w: 328px; }
    .container { padding: 0 16px; }
    .topbar { display: none; }
    /* Хедер: лого + кнопки в ряд, поиск снизу */
    .header { padding: 14px 16px; }
    .header .container { flex-direction: column; gap: 14px; padding: 0; }
    .header .container > * { order: 0; }
    .header .container > .logo { order: 1; }
    .header .container > .catalog-btn { order: 1; }
    .header .container > .header-actions { order: 1; margin-left: auto; }
    .header .container > .search-wrap { order: 2; flex-basis: 100%; max-width: 100%; }
    /* Сгруппировать лого+каталог+actions в один ряд */
    .header .container { display: grid; grid-template-areas: "logo catalog . actions" "search search search search"; grid-template-columns: auto auto 1fr auto; }
    .logo { grid-area: logo; width: 47px; height: 58px; }
    .logo img { width: 47px; height: 58px; }
    .catalog-btn { grid-area: catalog; padding: 10px 14px; font-size: 15px; align-self: center; }
    .search-wrap { grid-area: search; }
    .header-actions { grid-area: actions; align-self: center; gap: 4px; }
    .action-btn { min-width: 40px; padding: 4px; }
    .action-btn svg { width: 22px; height: 22px; }
    /* Hero */
    .hero .container { padding: 22px; }
    .hero-title { font-size: 22px; }
    .hero-btn { padding: 12px 30px; font-size: 14px; }
    .slider-arrow { display: none; }
    /* Категории — горизонтальный скролл */
    .categories-section .container { padding: 0 16px; }
    .categories-grid { grid-template-columns: repeat(6, 148px); gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 0; }
    .categories-grid::-webkit-scrollbar { display: none; }
    .cat-card { height: 148px; padding: 14px; }
    .cat-card-name { font-size: 13px; }
    /* Товары — 2 колонки */
    .products-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .section-title { font-size: 22px; }
    /* Новости — 1 колонка */
    .news-grid { grid-template-columns: 1fr; gap: 14px; }
    /* Преимущества — вертикально */
    .features-grid { grid-template-columns: 1fr; gap: 12px; }
    .features-head { font-size: 24px; }
    /* Контакты 360: телефоны сложены, адрес отдельно */
    .contacts-bar { padding: 50px 0; }
    .contacts-grid { flex-direction: column; gap: 24px; }
    .contact-value { font-size: 20px; }
    .contact-value.small { font-size: 15px; }
    /* Футер */
    footer { padding: 50px 0 0; }
    .footer-grid { grid-template-columns: 1fr; gap: 24px; }
    .footer-catalog-grid { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
    .footer-legal { text-align: left; }

/* Переопределяем старые стили тёмной модалки на главной */
.modal-overlay { background: rgba(0,0,0,.5) !important; }
.modal { background: #fff !important; color: #1c2127 !important; }
.modal input, .modal textarea { background: #fff !important; color: #1c2127 !important; border: 1.5px solid #e8e8e8 !important; }
.modal h3 { color: #1c2127 !important; }

/* ── Categories slider (глобально) ── */
.categories-section{padding:32px 0}
.categories-inner{position:relative}
.categories-track-wrap{overflow:hidden}
.categories-grid{display:flex;gap:18px;transition:transform .35s ease;will-change:transform}
.cat-arr{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid #e8e8e8;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:3;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.cat-arr:hover{box-shadow:0 4px 16px rgba(0,0,0,.12)}
.cat-arr.left{left:-22px}
.cat-arr.right{right:-22px}
.cat-arr svg{width:14px;height:14px;color:#1c2127}
.cat-card{border:2px solid #e8e8e8;border-radius:12px;padding:20px 16px 16px;display:flex;flex-direction:column;gap:12px;cursor:pointer;transition:border-color .2s,box-shadow .2s;background:#fff;height:220px;min-width:200px;flex-shrink:0;text-decoration:none;color:#1c2127}
.cat-card:hover{border-color:#137bc2;box-shadow:0 4px 20px rgba(19,123,194,.12)}
.cat-card-name{font-size:16px;font-weight:500;line-height:1.3;flex-shrink:0}
.cat-card-img{flex:1;border-radius:8px;overflow:hidden;min-height:0;display:flex;align-items:center;justify-content:center;background:#f5f5f5}
.cat-card-img img{width:100%;height:100%;object-fit:contain}
.cat-img-ph{display:none;align-items:center;justify-content:center;width:100%;height:100%;color:#9ca3af}
.cat-img-ph svg{width:32px;height:32px}



.product-icon-btn.in-cmp{color:#137bc2!important}

.footer-badge { height: 40px; width: auto; object-fit: contain; }
.footer-copyright { width: 100%; display: block; text-align: center; font-size: 14px; font-weight: 300; color: #1c2127; padding: 16px 0 24px; border-top: 1px solid rgba(28,33,39,0.12); }