:root{
  --bg:#f6f8fb;
  --text:#0f172a;
  --muted:#64748b;
  --brand:#e52037;
  --brand-2:#c2172d;
  --card:#ffffff;
  --shadow:0 6px 18px rgba(16,24,40,.07);
}

*{box-sizing:border-box}
html,body{height:100%}
body{font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--text); background:var(--bg)}

.container-xl{max-width:1280px}

.logo-dot{width:12px;height:12px;border-radius:50%;background:linear-gradient(90deg,var(--brand),var(--brand-2));box-shadow:0 0 0 3px rgba(229,32,55,.15)}

.breadcrumb a{text-decoration:none}

#grid .card{
  border:0;background:var(--card);
  box-shadow:var(--shadow);
  transition:transform .2s ease, box-shadow .2s ease;
}
#grid .card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(16,24,40,.12)}

.square{
  position:relative; overflow:hidden; background:#eef1f6;
  aspect-ratio:1/1; /* поддержка современных браузеров */
}
.square img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .35s ease;
}
#grid .card:hover img{transform:scale(1.04)}

.price{
  font-weight:800;
}

.product-gallery{overflow:hidden}
.product-gallery img{display:block; object-fit:cover}
#thumbs img{
  width:84px; height:84px; object-fit:cover; border-radius:.5rem; cursor:pointer; opacity:.8; border:2px solid transparent;
}
#thumbs img.active{opacity:1; border-color:#222}
#thumbs img:hover{opacity:1}

/* skeleton */
.skel{
  background:linear-gradient(90deg, #e9edf3 25%, #f5f7fb 37%, #e9edf3 63%);
  background-size:400% 100%; animation:shimmer 1.4s ease infinite;
}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}

.btn-dark{border-radius:.8rem}
.card{border-radius:1rem}