/* ==========================================================================
   UniShop2 Modern Custom CSS (mobile-first)
   Цель: современный вид + удобство + стабильная сетка (без поломки темы)
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  --ui-font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, "Apple Color Emoji","Segoe UI Emoji";
  --ui-font-size: 16px;

  --ui-text: #111827;
  --ui-muted: #6b7280;

  --ui-bg: #ffffff;
  --ui-surface: #ffffff;

  --ui-border: #e5e7eb;
  --ui-border-2: #d1d5db;

  --ui-primary: #0ea5e9;
  --ui-primary-2: #0284c7;

  --ui-danger: #ef4444;
  --ui-success: #10b981;

  --ui-radius: 14px;
  --ui-radius-sm: 10px;

  --ui-shadow: 0 10px 22px rgba(17,24,39,.10);

  --ui-tap: 44px;
}

/* ---------- Base ---------- */
html{ font-size: var(--ui-font-size); }
body{
  font-family: var(--ui-font);
  color: var(--ui-text);
  background: var(--ui-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img{ max-width:100%; height:auto; }

a{ color: var(--ui-primary); text-decoration:none; }
a:hover{ color: var(--ui-primary-2); text-decoration:underline; }

/* Доступность/клавиатура */
:focus-visible{
  outline: 3px solid rgba(14,165,233,.35);
  outline-offset: 2px;
  border-radius: 10px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
}

/* ---------- Typography ---------- */
h1,h2,h3,h4,h5{
  color: var(--ui-text);
  line-height: 1.25;
  letter-spacing: -0.01em;
}
h1{ font-size: clamp(1.25rem, 2.6vw, 1.85rem); }
h2{ font-size: clamp(1.15rem, 2.2vw, 1.55rem); }
h3{ font-size: clamp(1.05rem, 1.9vw, 1.35rem); }

p{ line-height: 1.62; color: var(--ui-text); }
small,.text-muted{ color: var(--ui-muted)!important; }

/* ---------- Forms (безопасно, только в контенте) ---------- */
#content input[type="text"],
#content input[type="search"],
#content input[type="email"],
#content input[type="tel"],
#content input[type="password"],
#content select,
#content textarea{
  border: 1px solid var(--ui-border);
  border-radius: 12px;
  padding: 10px 12px;
  min-height: var(--ui-tap);
  transition: border-color .15s ease, box-shadow .15s ease;
}

#content input:focus,
#content select:focus,
#content textarea:focus{
  border-color: rgba(14,165,233,.55);
  box-shadow: 0 0 0 4px rgba(14,165,233,.15);
}

/* ---------- Buttons (не трогаем всё подряд) ---------- */
#content .btn,
#content button,
.product-thumb .btn,
.product-thumb button{
  min-height: var(--ui-tap);
  border-radius: 12px;
  font-weight: 700;
  letter-spacing: .01em;
  transition: transform .08s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
}

#content .btn:active,
#content button:active,
.product-thumb .btn:active,
.product-thumb button:active{
  transform: translateY(1px);
}

#content .btn-primary,
.product-thumb .btn-primary{
  background: var(--ui-primary);
  border-color: var(--ui-primary);
  color: #fff;
}
#content .btn-primary:hover,
.product-thumb .btn-primary:hover{
  background: var(--ui-primary-2);
  border-color: var(--ui-primary-2);
  color:#fff;
  text-decoration:none;
  box-shadow: 0 10px 20px rgba(2,132,199,.20);
}

#content .btn-default,
.product-thumb .btn-default{
  background:#fff;
  border-color: var(--ui-border);
  color: var(--ui-text);
}
#content .btn-default:hover,
.product-thumb .btn-default:hover{
  border-color: rgba(14,165,233,.35);
  box-shadow: 0 10px 20px rgba(17,24,39,.08);
  text-decoration:none;
}

/* ---------- Breadcrumbs ---------- */
.breadcrumb{
  background: transparent;
  padding: 10px 0;
  margin-bottom: 10px;
}
.breadcrumb a{ color: var(--ui-muted); }
.breadcrumb > .active{ color: var(--ui-text); }

/* ---------- Product Cards (категория/главная) ---------- */
.product-thumb,
.product-layout .product-thumb,
.product-grid .product-thumb{
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  overflow: hidden;
  box-shadow: none;
  transition: transform .16s ease, box-shadow .22s ease, border-color .22s ease;
}

.product-thumb:hover{
  border-color: rgba(14,165,233,.25);
  box-shadow: var(--ui-shadow);
  transform: translateY(-2px);
}

/* Стабильная зона изображения (чтобы сетка не “прыгала”) */
.product-thumb .image{
  background:#fff;
  padding: 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  aspect-ratio: 1 / 1;     /* квадрат */
  overflow:hidden;
}
.product-thumb .image img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 12px;
}

/* Заголовок товара: максимум 2 строки, одинаковая высота */
.product-thumb h4,
.product-thumb .caption h4{
  font-size: 0.98rem;
  margin: 12px 12px 8px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.35em * 2);
}

/* Цена */
.product-thumb .price{
  margin: 0 12px 12px;
  font-weight: 800;
  color: var(--ui-text);
}
.product-thumb .price .price-new{ color: var(--ui-danger); }
.product-thumb .price .price-old{
  color: var(--ui-muted);
  font-weight: 700;
}

/* Кнопки в карточке */
.product-thumb .button-group{
  border-top: 1px solid var(--ui-border);
}
.product-thumb .button-group button{
  height: var(--ui-tap);
  font-weight: 800;
}
.product-thumb .button-group button:hover{
  background: rgba(14,165,233,.08);
}

/* ---------- Badges / Labels (если есть) ---------- */
.label, .badge{
  border-radius: 999px;
  padding: 4px 10px;
  font-weight: 800;
}

/* ---------- Menu icons (важно: оба варианта классов) ---------- */
.menu__level-1-img,
.menu_level-1-img{
  width: 28px !important;
  height: 28px !important;
  object-fit: contain !important;
  margin: 0 10px 0 0 !important;
  flex: 0 0 28px;
  vertical-align: middle !important;
}

@media (min-width: 992px){
  .menu__level-1-img,
  .menu_level-1-img{
    width: 34px !important;
    height: 34px !important;
    flex-basis: 34px;
  }
}

@media (max-width: 480px){
  .menu__level-1-img,
  .menu_level-1-img{
    width: 24px !important;
    height: 24px !important;
    flex-basis: 24px;
    margin-right: 8px !important;
  }
}

/* Строка меню: удобный клик */
.menu__level-1-a,
.menu_level-1-a{
  min-height: var(--ui-tap);
  display:flex;
  align-items:center;
  gap: 8px;
}

/* ---------- Mobile tweaks ---------- */
@media (max-width: 768px){
  .product-thumb h4,
  .product-thumb .caption h4{ margin: 10px 10px 6px; }

  .product-thumb .price{ margin: 0 10px 10px; }

  #content .btn,
  #content button,
  .product-thumb .btn,
  .product-thumb button{
    border-radius: 14px;
  }
}

/* ---------- Footer ---------- */
footer, .footer{
  color: var(--ui-muted);
}