/* tshop_3 — общие элементы подвалов (вместе с css/parts/footer_N.css).
 * Ручки дизайнера стилей (на корне .footer): --f-bg, --f-text, --f-muted, --f-line, --f-gap, --logo-h.
 */
@layer parts {
  .t3-footer {
    --f-bg: var(--surface);
    --f-text: var(--text);
    --f-muted: var(--text-2);
    --f-line: var(--line);
    --f-gap: var(--s-8);
    /* в режиме конструктора админский dashboard.css задаёт footer.footer { position: fixed; height: 25px } — сбрасываем */
    position: relative; inset: auto; height: auto; z-index: auto;
    margin-top: var(--section-gap);
    background: var(--f-bg); color: var(--f-text);
    border-top: var(--line-w) solid var(--f-line);
    font-size: var(--fs-s);
  }
  .t3-footer a:hover { color: var(--brand-text); }

  /* колонки меню подвала (footer_menu) */
  .f-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-6); }
  .f-col > summary { list-style: none; cursor: default; }
  .f-col > summary .i { display: none; }
  .f-col__title { font-size: var(--fs-s); font-weight: 600; margin-bottom: var(--s-3); }
  [data-style="editorial"] .f-col__title { text-transform: uppercase; letter-spacing: .08em; font-size: var(--fs-xs); }
  .f-col ul { list-style: none; padding: 0; display: grid; gap: 10px; color: var(--f-muted); }
  .f-col a[aria-current] { color: var(--f-text); }

  .f-phone { font-weight: 700; font-size: var(--fs-l); font-variant-numeric: tabular-nums; }

  .f-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-4); padding-block: var(--s-5); border-top: 1px solid var(--f-line); }
  .f-legal { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-5); color: var(--f-muted); font-size: var(--fs-xs); }
  .f-legal__nav { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }

  .pay { display: flex; gap: var(--s-2); list-style: none; padding: 0; }
  .pay li { display: grid; place-items: center; height: 26px; padding: 0 8px; border-radius: 4px; border: 1px solid var(--f-line); font: 700 10px/1 var(--font-body); color: var(--f-muted); letter-spacing: .04em; }

  .t3-footer .social a { background: color-mix(in srgb, var(--f-text) 8%, transparent); }
  .t3-footer .social a:hover { background: var(--brand); color: var(--brand-ink); }

  @media (max-width: 767px) {
    .f-cols { grid-template-columns: 1fr; gap: 0; }
    .f-col { border-bottom: 1px solid var(--f-line); }
    .f-col > summary { display: flex; justify-content: space-between; align-items: center; min-height: 52px; cursor: pointer; }
    .f-col > summary .i { display: block; transition: transform var(--dur) var(--ease); }
    .f-col[open] > summary .i { transform: rotate(180deg); }
    .f-col__title { margin: 0; }
    .f-col ul { padding-bottom: var(--s-4); }
  }
}