/* Бланки — каталог (план §7.5): плитки 3:4 вплотную, 4 в ряд / 2 на телефоне. */
.blanks { padding: 88px 0 96px; }
.blanks__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 32px;
  padding: 0 var(--gutter) 28px;
}
.cats { display: flex; flex-wrap: wrap; gap: 6px; }
.cats button {
  min-height: 32px;
  padding: 0 14px;
  border-radius: 0;
  font-size: var(--fs-s);
  line-height: 1;
  color: var(--ink);
  background: var(--tone-2);
  transition: color var(--dur-state), background var(--dur-state);
}
.cats button:hover,
.cats button:active { border-radius: 0; background: #deded8; }
.cats button[aria-pressed="true"],
.cats button[aria-pressed="true"]:hover,
.cats button[aria-pressed="true"]:active { color: #fff; background: #000; border-radius: 0; }
.blanks__mine { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-s); color: var(--ink); }
.blanks__mine i { width: 34px; height: 20px; border-radius: 0; background: var(--tone-2); position: relative; transition: background var(--dur-state); }
.blanks__mine i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 0; background: #fff; box-shadow: 0 1px 3px rgba(11, 11, 11, .2); transition: transform var(--dur-state) var(--ease-out); }
.blanks__mine[aria-pressed="true"] i { background: var(--ink); }
.blanks__mine[aria-pressed="true"] i::after { transform: translateX(14px); }

.tiles { display: grid; grid-template-columns: repeat(4, 1fr); }
.tiles:empty::after { content: "В этом разделе пока пусто"; grid-column: 1 / -1; padding: 48px var(--gutter); color: var(--mute); font-size: var(--fs-s); }

.tile { display: block; min-width: 0; position: relative; }
.tile__media {
  position: relative;
  aspect-ratio: 3 / 4;
  background: var(--tone);
  overflow: hidden;
  cursor: pointer;
}
.tile__media .gm { position: absolute; left: 6%; top: 6%; width: 88%; height: 88%; }
.tile__art {
  position: absolute;
  pointer-events: none;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity var(--dur-state);
}
.tile__art.is-on { opacity: 1; }
.tile__art > * { max-width: 100%; max-height: 100%; }
.tile__tag {
  position: absolute;
  top: 12px; left: 12px;
  font-size: var(--fs-s);
  line-height: 1;
  color: var(--mute);
}
.tile__tag[data-tag="New"] { color: var(--sig); }
.tile__cap {
  padding: 14px var(--gutter) 24px var(--gutter);
  font-size: var(--fs-s);
  line-height: var(--lh-s);
  display: grid;
  gap: 2px;
  min-height: 86px;
}
.tile__name { display: flex; justify-content: space-between; gap: 12px; }
.tile__name b { font-weight: 500; }
.tile__name .t-mute { white-space: nowrap; }
.tile__row { position: relative; min-height: 18px; }
.tile__price, .tile__sizes { transition: opacity var(--dur-state), transform var(--dur-state) var(--ease-out); }
.tile__sizes {
  position: absolute; inset: 0 auto auto 0;
  display: flex; gap: 2px 14px;
  opacity: 0; transform: translateY(4px);
  pointer-events: none;
}
.tile__sizes button { min-height: 18px; padding: 0 2px; font-size: var(--fs-s); color: var(--ink); }
.tile__sizes button { padding: 0 8px; border-radius: 0; min-height: 22px; }
.tile__sizes button:hover,
.tile__sizes button:active { border-radius: 0; background: var(--tone-2); }
@media (hover: hover) and (pointer: fine) {
  .tile:hover .tile__price { opacity: 0; transform: translateY(-4px); }
  .tile:hover .tile__sizes { opacity: 1; transform: none; pointer-events: auto; }
}
.tile__sw { --bg: var(--paper); margin: 2px 0 0 -8px; }
.tile__stock { color: var(--mute); }

/* Смена категории: уход влево, приход справа, лесенка 25 мс (main ставит --i) */
.tiles.is-swap .tile { animation: tileIn var(--dur-state) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 25ms); }
@keyframes tileIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }

@media (max-width: 1023px) {
  .blanks { padding: 48px 0 56px; }
  .blanks__head {
    position: sticky;
    top: calc(var(--hdr-h) + env(safe-area-inset-top, 0px));
    z-index: 20;
    background: var(--paper);
    padding: 8px var(--gutter) 10px;
    gap: 8px 16px;
  }
  .cats { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); max-width: 100vw; }
  .cats::-webkit-scrollbar { display: none; }
  .cats button { flex: none; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .tile__cap { padding: 8px 12px 0; min-height: 80px; }
  .tile__tag { top: 8px; left: 8px; }
  .tile__sizes { display: none; }
}