/* 05 — Бумажные эскизы. Local SVG artwork, no icon font or CDN. */
.category-sketch {
  --sketch-size: 98px;
  --sketch-glyph: 60px;
  --sketch-angle: -4deg;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--sketch-size);
  height: var(--sketch-size);
  border-radius: 4px;
  background-color: #f4f0e7;
  background-image: linear-gradient(#e4e1d6 1px, transparent 1px), linear-gradient(90deg, #e4e1d6 1px, transparent 1px);
  background-size: 13px 13px;
  box-shadow: 3px 4px 0 #ebe7db;
  transform: rotate(var(--sketch-angle));
  pointer-events: none;
}
.category-sketch::after {
  content: "";
  position: absolute;
  width: 34%;
  height: 11%;
  top: -5%;
  left: 33%;
  background: #e6eccbcc;
  transform: rotate(8deg);
}
.category-sketch img {
  position: relative;
  display: block;
  width: var(--sketch-glyph);
  height: var(--sketch-glyph);
  object-fit: contain;
  transform: rotate(calc(-1 * var(--sketch-angle)));
}
.category:nth-child(even) .category-sketch,
.catalog-category:nth-child(even) .category-sketch { --sketch-angle: 3deg; }
.category-grid .category {
  min-width: 0;
  padding: 25px 12px 20px;
  text-align: center;
}
.category-grid .category-sketch { margin: 0 auto 21px; }
.category-grid .category strong { line-height: 1.45; overflow-wrap: anywhere; }
.category-grid .category small { display: block; margin-top: 5px; }
.catalog-category { gap: 15px; padding: 12px; }
.catalog-category .category-sketch {
  --sketch-size: 42px;
  --sketch-glyph: 30px;
  background-size: 9px 9px;
  box-shadow: 2px 2px 0 #ebe7db;
}
.subcategory-title-row h3 { display: flex; align-items: center; gap: 18px; }
.subcategory-title-row .category-sketch { --sketch-size: 58px; --sketch-glyph: 40px; }
.category:focus-visible, .catalog-category:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
.catalog-category-tree [data-catalog-category] { display: flex; align-items: center; gap: 12px; }
.catalog-category-tree .category-sketch {
  --sketch-size: 32px;
  --sketch-glyph: 24px;
  background-size: 8px 8px;
  margin: 3px 0;
  box-shadow: 1px 2px 0 #ebe7db;
}
@media (max-width: 600px) {
  .category-mega-layout { grid-template-rows: max-content minmax(0, 1fr); }
  .category-sidebar { align-items: center; }
  .category-grid .category-sketch { --sketch-size: 88px; --sketch-glyph: 54px; }
  .subcategory-title-row { flex-wrap: wrap; gap: 16px; }
  .subcategory-title-row h3 { font-size: 20px; gap: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .category { transition: none; }
  .category:hover, .category.active { transform: none; }
}