:root{
  --blue:#1e3a8a;
  --blue-light:#3b82f6;
  --text:#111827;
  --muted:#6b7280;
  --bg:#f8fafc;
  --card:#ffffff;
  --green:#10b981;
  --yellow:#f59e0b;
  --red:#ef4444;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,'Noto Sans',sans-serif;color:var(--text);background:var(--bg)}
a{color:var(--blue-light);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1200px;margin:0 auto;padding:0 16px}
.header{background:#fff;border-bottom:1px solid #e5e7eb;position:sticky;top:0;z-index:30}
.header-top{display:flex;justify-content:space-between;align-items:center;padding:8px 0;gap:16px}
.city-select{position:relative}
.city-button{padding:8px 12px;border:1px solid #e5e7eb;border-radius:10px;background:#fff;cursor:pointer}
.city-dropdown{position:absolute;top:100%;left:0;background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 10px 20px rgba(0,0,0,.06);padding:12px;width:320px;display:none}
.city-dropdown.open{display:block}
.city-search{width:100%;padding:8px;border:1px solid #e5e7eb;border-radius:8px;margin-bottom:8px}
.city-list{max-height:240px;overflow:auto;margin:0;padding:0;list-style:none}
.city-item{padding:8px;border-radius:8px;cursor:pointer}
.city-item:hover{background:#f3f4f6}

.brand{padding:18px 0;font-size:28px;font-weight:700;text-align:center}
.breadcrumbs{font-size:14px;color:var(--muted);padding:6px 0 16px}
.breadcrumbs a{color:inherit;text-decoration:none}
.breadcrumbs a:hover{text-decoration:underline}

.hero{display:grid;grid-template-columns:1fr 3fr;gap:16px;align-items:stretch}
.catalog-card{background:var(--blue);color:#fff;border-radius:18px;padding:24px;display:flex;flex-direction:column;justify-content:space-between}
.catalog-card h2{margin:0 0 8px 0}
.catalog-card a{display:inline-block;margin-top:12px;background:#fff;color:var(--blue);padding:8px 12px;border-radius:10px;text-decoration:none;font-weight:600}
.slider{position:relative;background:#000;border-radius:18px;overflow:hidden;min-height:300px}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .5s ease}
.slide.active{opacity:1}
.slide img{width:100%;height:100%;object-fit:cover}
.slide-nav{position:absolute;top:50%;transform:translateY(-50%);width:100%;display:flex;justify-content:space-between}
.slide-btn{background:rgba(255,255,255,.8);border:none;border-radius:9999px;padding:8px 12px;cursor:pointer}

.section{padding:28px 0}
.section-title{font-size:22px;font-weight:700;margin-bottom:12px}
.grid{display:grid;gap:12px}
.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.card{background:var(--card);border:1px solid #e5e7eb;border-radius:14px;overflow:hidden}
.card-body{padding:12px}
.product-title{font-weight:600;margin:6px 0}
.price{font-weight:700}
.btn{display:inline-flex;align-items:center;gap:6px;border-radius:10px;border:1px solid #e5e7eb;background:#fff;padding:8px 12px;cursor:pointer}
.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.block{display:block;width:100%;text-align:center;justify-content:center}
.btn.danger{background:var(--red);border-color:var(--red);color:#fff}
.qty{display:inline-flex;align-items:center;border:1px solid #e5e7eb;border-radius:10px;overflow:hidden}
.qty button{border:none;background:#fff;padding:6px 10px;cursor:pointer}
.qty input{width:42px;text-align:center;border:none;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb}

.footer{background:#ffffff;border-top:1px solid #e5e7eb;margin-top:24px}
.footer-inner{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;padding:24px 0}
.footer h4{margin:0 0 10px 0}
.footer ul{margin:0;padding:0;list-style:none}
.icon-row{display:flex;flex-direction:column;gap:10px}
.icon-line{display:flex;align-items:center;gap:10px;color:var(--muted)}
.icon{width:18px;height:18px;display:inline-block}
.socials a{margin-right:10px}

.page{max-width:880px;margin:0 auto}
.page p{line-height:1.6}
.limit{max-width:880px}

.stock{font-weight:700}
.stock.green{color:var(--green)}
.stock.yellow{color:var(--yellow)}
.stock.red{color:var(--red)}
.badge{display:inline-block;background:#eef2ff;color:var(--blue);padding:2px 8px;border-radius:100px;font-size:12px}

.table{width:100%;border-collapse:collapse}
.table th,.table td{border:1px solid #e5e7eb;padding:8px;text-align:left}
.table th{background:#f9fafb}

.badge-cat{background:#e0f2fe;color:#0369a1;padding:6px 10px;border-radius:10px;font-weight:600}

.navbar{display:flex;gap:8px;justify-content:flex-end;padding:8px 0}
.navbar a{padding:8px 12px;border:1px solid #e5e7eb;border-radius:10px;background:#fff;color:var(--text);text-decoration:none}


/* --- header brand + search in top bar --- */
.header-top{display:grid;grid-template-columns:1fr 1fr 1.2fr;align-items:center;padding:8px 0;gap:12px}
.header-brand{font-size:20px;font-weight:800;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.header-brand a{color:var(--text);text-decoration:none}
.header-actions{display:flex;gap:8px;justify-content:flex-end;align-items:center}
.search-wrap{position:relative;min-width:280px;flex:1}
.search-input{width:100%;padding:8px 12px;border:1px solid #e5e7eb;border-radius:10px}
.search-dropdown{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #e5e7eb;border-top:none;border-radius:0 0 12px 12px;box-shadow:0 10px 20px rgba(0,0,0,.06);z-index:40;display:none;max-height:260px;overflow:auto}
.search-dropdown.open{display:block}
.search-item{display:block;padding:8px 12px;color:var(--text);text-decoration:none}
.search-item:hover{background:#f3f4f6}


/* --- square images --- */
.square{position:relative;width:100%;aspect-ratio:1/1;border-radius:14px;overflow:hidden;border:1px solid #e5e7eb;background:#fff}
.square img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* card image spacing */
.card .square{margin:0}
/* product detail square container */
.product-square{max-width:420px;margin:0 auto}


.btn.success{background:var(--green);border-color:var(--green);color:#fff}

/* === Адаптивные правки. Десктоп (>=1024px) остаётся как есть === */

/* базовые страховки от переполнений */
html, body { overflow-x: hidden; }
img, video { max-width:100%; height:auto; display:block; }
* { min-width:0; }  /* чтобы флекс/грид-дети не выталкивали контейнер */
a, button, input, textarea { word-break: break-word; }

/* выпадающие панели не шире экрана */
.city-dropdown { max-width: min(480px, calc(100vw - 32px)); right: 0; left: auto; }
.search-dropdown { max-width: min(420px, calc(100vw - 32px)); }

/* кнопки/ряды могут переноситься на новую строку */
.header-actions, .icon-row, .qty { flex-wrap: wrap; }

/* ===== Планшеты: 768–1023px ===== */
@media (max-width: 1023px) {
  .container { padding-left:12px; padding-right:12px; }

  /* шапка: из 3 колонок -> 2, блок действий на всю строку */
  .header-top { grid-template-columns: 1fr 1fr; gap:12px; }
  .header-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .search-wrap { min-width: 0; }

  /* главный блок (слева карточка каталога + справа слайдер) -> одна колонка */
  .hero { grid-template-columns: 1fr; }

  /* карточки: уменьшаем число колонок у готовых сеток */
  .grid-cols-5 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .grid-cols-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }

  /* футер: 3 -> 2 колонки */
  .footer-inner { grid-template-columns: 1fr 1fr; }

  /* таблицы характеристик не распирают ширину */
  .table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
}

/* ===== Телефоны: до 767px ===== */
@media (max-width: 767px) {
  .container { padding-left:10px; padding-right:10px; }

  /* шапка в одну колонку, элементы на всю ширину */
  .header-top { grid-template-columns: 1fr; }
  .header-brand { text-align:left; }
  .header-actions { justify-content: stretch; gap:8px; }
  .header-actions > * { flex:1 1 auto; }           /* кнопки не слипаются */
  .search-wrap { width: 100%; }

  /* главный блок и товары — всё в одну колонку */
  .hero { grid-template-columns: 1fr; }
  .grid, .grid-cols-4, .grid-cols-5 { grid-template-columns: 1fr !important; gap: 12px; }

  /* изображения карточек/товара всегда вписываются */
  .product-square { max-width: 100%; }

  /* футер в одну колонку */
  .footer-inner { grid-template-columns: 1fr; }

  /* чуть меньше типографика, чтобы не «выпирала» */
  .section-title { font-size: 20px; }
  .price { font-size: 18px; }

  /* таблицы и широкие блоки скроллятся внутри, а не весь экран */
  .table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .slider {
      min-height: 180px;
      max-height: 220px;
      aspect-ratio: 16/9;
  }

    .slide img {
     object-fit: cover;
     object-position: center;
    }
}

/* узкие экраны: мелкие косметические правки */
@media (max-width: 420px) {
  .badge { font-size:12px;}
  .slider {
      min-height: 160px;
      max-height: 200px;
  }
}

  :root {
    --background: 248 250 252;
    --foreground: 17 24 39;
    --card: 255 255 255;
    --card-foreground: 17 24 39;
    --popover: 255 255 255;
    --popover-foreground: 17 24 39;
    --primary: 30 58 138;
    --primary-foreground: 248 250 252;
    --secondary: 224 242 254;
    --secondary-foreground: 30 58 138;
    --muted: 243 244 246;
    --muted-foreground: 107 114 128;
    --accent: 59 130 246;
    --accent-foreground: 255 255 255;
    --destructive: 239 68 68;
    --destructive-foreground: 255 255 255;
    --success: 16 185 129;
    --success-foreground: 255 255 255;
    --warning: 245 158 11;
    --border: 229 231 235;
    --input: 229 231 235;
    --ring: 59 130 246;
    --radius: 0.75rem;
  }

  .dark {
    --background: 17 24 39;
    --foreground: 248 250 252;
    --card: 31 41 55;
    --card-foreground: 248 250 252;
    --popover: 31 41 55;
    --popover-foreground: 248 250 252;
    --primary: 59 130 246;
    --primary-foreground: 17 24 39;
    --secondary: 55 65 81;
    --secondary-foreground: 248 250 252;
    --muted: 55 65 81;
    --muted-foreground: 156 163 175;
    --accent: 30 58 138;
    --accent-foreground: 248 250 252;
    --destructive: 220 38 38;
    --destructive-foreground: 248 250 252;
    --success: 5 150 105;
    --success-foreground: 248 250 252;
    --warning: 217 119 6;
    --border: 55 65 81;
    --input: 55 65 81;
    --ring: 59 130 246;
  }


  html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
  }

  body {
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  }

  img, video {
    max-width: 100%;
    height: auto;
    display: block;
  }

  a {
    color: hsl(var(--accent));
    text-decoration: none;
  }

  a:hover {
    text-decoration: underline;
  }
  .slider {
    position: relative;
    background: var(--bg);
    border-radius: 18px;
    overflow: hidden;
    min-height: 300px;
    width: 100%;
  }

  .slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
  }

  .slide.active {
    opacity: 1;
  }

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

  /* Mobile: уменьшаем высоту слайдера и меняем object-fit */
  @media (max-width: 767px) {
    .slider {
      min-height: 180px;
      max-height: 220px;
      aspect-ratio: 16/9;
    }

    .slide img {
      object-fit: contain;
      object-position: center;
    }
  }

  /* Для очень узких экранов */
  @media (max-width: 420px) {
    .slider {
      min-height: 160px;
      max-height: 200px;
    }
  }