/* Каталог товаров (/katalog, плитки на главной): aa/pages/catalog.php, aa/goods.js. Сначала телефон, с 721px — десктоп. */

.aa-i--droplet{--aa-i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M12 22a7 7 0 0 0 7-7c0-2-1-3.9-3-5.5s-3.5-4-4-6.5c-.5 2.5-2 4.9-4 6.5C6 11.1 5 13 5 15a7 7 0 0 0 7 7z%22 /%3E%3C/svg%3E")}
.aa-i--zap{--aa-i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z%22 /%3E%3C/svg%3E")}
.aa-i--spray-can{--aa-i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M3 3h.01M7 5h.01M11 7h.01M3 7h.01M7 9h.01M3 11h.01%22 /%3E%3Crect width=%224%22 height=%224%22 x=%2215%22 y=%225%22 /%3E%3Cpath d=%22m19 9 2 2v10c0 .6-.4 1-1 1h-6c-.6 0-1-.4-1-1V11l2-2M13 14l8-2M13 19l8-2%22 /%3E%3C/svg%3E")}

.aa-goods__head { display: flex; flex-direction: column; gap: var(--space-2); }
.aa-goods__head .aa-muted { font-size: 14px; line-height: 20px; }

/* Плитки разделов */
.aa-goods-tiles { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
.aa-goods-tile { position: relative; display: flex; flex-direction: column; gap: 2px; padding: var(--space-4) 52px var(--space-4) 64px; min-height: 72px; justify-content: center; box-sizing: border-box; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); color: var(--ink) !important; text-decoration: none !important; }
a.aa-goods-tile:hover { border-color: var(--ink); }
.aa-goods-tile__icon { position: absolute; left: 20px; top: 50%; margin-top: -12px; width: 24px; height: 24px; }
.aa-goods-tile__name { font: 600 17px/22px var(--font-sans); }
.aa-goods-tile__hint { display: none; font: 400 13px/18px var(--font-sans); color: var(--ink-muted); }
.aa-goods-tile__meta { font: 500 13px/18px var(--font-sans); color: var(--ink-muted); }
.aa-goods-tile__arrow { position: absolute; right: 20px; top: 50%; margin-top: -10px; }
.aa-goods-tile.is-soon { color: var(--ink-subtle) !important; background: transparent; border-style: dashed; }
.aa-goods-tile.is-soon .aa-goods-tile__meta { display: inline-flex; align-self: flex-start; padding: 0 var(--space-2); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); font: 500 11px/18px var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }

/* Подкатегории */
.aa-goods-subs { display: grid; grid-template-columns: 1fr; gap: var(--space-2); }

/* Фильтры: на телефоне — раскрывающаяся кнопка над списком */
.aa-goods__layout { display: flex; flex-direction: column; gap: var(--space-4); }
.aa-goods-filters > summary { list-style: none; cursor: pointer; width: 100%; justify-content: center; }
.aa-goods-filters > summary::-webkit-details-marker { display: none; }
.aa-goods-filters[open] > summary { margin-bottom: var(--space-3); }
.aa-goods-filters__form { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.aa-goods-filter { margin: 0; padding: 0; border: 0; min-width: 0; }
.aa-goods-filter legend { margin-bottom: var(--space-2); padding: 0; font: 600 14px/20px var(--font-sans); color: var(--ink); }
.aa-goods-filter__opts { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.aa-goods-chip { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 var(--space-3); box-sizing: border-box; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); font: 500 14px/20px var(--font-sans); color: var(--ink); cursor: pointer; }
.aa-goods-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.aa-goods-chip small { font-size: 12px; color: var(--ink-subtle); }
.aa-goods-chip.is-on, .aa-goods-chip:has(input:checked) { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.aa-goods-chip.is-on small, .aa-goods-chip:has(input:checked) small { color: inherit; opacity: .7; }
.aa-goods-chip:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.aa-goods-filter__range { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-2); }
.aa-goods-filter__range .aa-input { height: 44px; }
.aa-goods-filters__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.aa-goods-filters__actions .aa-btn { flex: 1 1 auto; justify-content: center; text-decoration: none; }

/* Список товаров */
.aa-goods__list { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.aa-goods-item { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border-top: 1px solid var(--line); }
.aa-goods-item:first-child { border-top: 0; }
.aa-goods-item__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.aa-goods-item__name { font: 600 16px/22px var(--font-sans); }
.aa-goods-item__meta { font: 500 13px/18px var(--font-sans); color: var(--ink-muted); }
.aa-goods-item__props { font: 400 13px/18px var(--font-sans); color: var(--ink-subtle); }
.aa-goods-item__buy { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); min-height: 40px; }
.aa-goods-item__price { display: flex; flex-direction: column; gap: 2px; }
.aa-goods-item__price b { font: 700 20px/24px var(--font-sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.aa-goods-item__buy .aa-btn { text-decoration: none; }
.aa-goods-item__err { flex-basis: 100%; font: 500 13px/18px var(--font-sans); color: var(--danger); }
.aa-goods-skel { display: block; width: 100%; height: 40px; border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--surface-sunken) 0%, var(--line) 50%, var(--surface-sunken) 100%); background-size: 200% 100%; animation: aa-goods-shimmer 1.4s ease-in-out infinite; }
@keyframes aa-goods-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .aa-goods-skel { animation: none; } }

.aa-goods-pager { display: flex; align-items: center; justify-content: center; gap: var(--space-3); }
.aa-goods-pager .aa-btn { text-decoration: none; }

@media (min-width: 721px) {
  .aa-goods-tiles { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4); }
  .aa-goods-tile { justify-content: flex-start; gap: var(--space-2); min-height: 188px; padding: var(--space-6); }
  .aa-goods-tile__icon { position: static; margin: 0 0 var(--space-4); width: 32px; height: 32px; }
  .aa-goods-tile__name { font: 600 20px/26px var(--font-display); }
  .aa-goods-tile__hint { display: block; }
  .aa-goods-tile__meta { margin-top: auto; padding-top: var(--space-2); }
  .aa-goods-tile__arrow { top: auto; bottom: var(--space-6); margin-top: 0; }
  .aa-goods-tiles--home { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .aa-goods-tiles--home .aa-goods-tile__hint { display: none; }

  .aa-goods-subs { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-3); }

  .aa-goods__layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--space-6); align-items: start; }
  .aa-goods__layout--nofilters { grid-template-columns: minmax(0, 1fr); }
  .aa-goods-filters > summary { display: none; }
  .aa-goods-filters:not([open]) > .aa-goods-filters__form { display: flex; }

  .aa-goods-item { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) 20px; }
  .aa-goods-item__buy { flex: none; flex-wrap: nowrap; justify-content: flex-end; min-width: 260px; }
  .aa-goods-item__price { align-items: flex-end; text-align: right; }
}
@media (min-width: 721px) and (max-width: 1100px) {
  .aa-goods-tiles--home { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}