/* CL-PC1-L7-APHELON-COUNCIL-4331 (R62.6.18, правки владельца к R62.6.16/17 по iPhone 09.10). Только каталог и подвал витрины.
   Оформление заказа, статус, «Мои заказы» и цвета палитры V9 не меняются. Подключён ПОСЛЕДНИМ в <head> (после storefront-look-r62616.css).
   Приёмы из skills:
   · mobile-native: видимый размер кнопки и область нажатия — разные вещи; цель ≥44 px достигается прозрачной рамкой или ::after,
     а не высотой картинки; :active даёт отклик сразу; без отключения масштабирования;
   · apple-design: край прокручиваемой строки затухает (маска), подсказывая, что она листается; отклик на нажатие мгновенный;
   · impeccable: режим Operate — плотность и сканируемость важнее украшений; один акцент (розовый V9), ничего нового по цвету;
   · ui-ux-pro-max: контраст ≥4.5:1 (#1A1714 на розовом), зазор между целями, reduced-motion уважается. */

/* ── Строка «показано N из M» и сброс всех фильтров (все ширины) ── */
.catalog__filter-note { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 14px; font-size: 13px; line-height: 1.3; color: #5E534C; text-align: center; }
.catalog__filter-note[hidden] { display: none; }
.catalog__filter-reset { position: relative; height: 30px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--sf-pink-line, #E1B9BF); background: var(--sf-pink-soft, #F7E7E8); color: var(--sf-ink, #1A1714); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; touch-action: manipulation; }
.catalog__filter-reset::after { content: ""; position: absolute; inset: -9px -4px; }
.catalog__filter-reset:active { transform: scale(.97); transition: transform 90ms ease-out; }
@media (hover: hover) and (pointer: fine) { .catalog__filter-reset:hover { background: var(--sf-pink-sel, #EDCBD0); border-color: var(--sf-pink, #CF818A); } }

/* mobile-native: подпись кнопки не выделяется долгим нажатием на iOS, тап без задержки (контент карточек остаётся выделяемым) */
body .catalog__tab, body .catalog__price-pill, body .product-card__size, body .product-card__buy-btn, .catalog__filter-reset { touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

@media (max-width: 767px) {
  /* ── 2. Категории: одна строка целиком, без прокрутки; ниже и мельче; область нажатия ≥44 через ::after ── */
  body .catalog .catalog__tabs { display: flex !important; flex-wrap: nowrap !important; justify-content: center !important; gap: 6px !important; overflow: visible !important;
    margin: 0 0 12px !important; padding: 0 8px !important; -webkit-mask-image: none !important; mask-image: none !important; }
  body .catalog .catalog__tabs .catalog__tab { position: relative; flex: 0 1 auto; min-width: 0; min-height: 0 !important; height: 34px; padding: 0 clamp(10px, 3.4vw, 14px) !important;
    font-size: 13px !important; line-height: 1 !important; letter-spacing: .02em !important; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; }
  body .catalog .catalog__tabs .catalog__tab::after { content: ""; position: absolute; inset: -6px -2px; }

  /* ── 2. Цены: одна строка с прокруткой; край затухает, пока есть что листать ── */
  body .catalog .catalog__price-filter { margin-bottom: 10px !important; }
  body .catalog .catalog__price-pills { gap: 6px !important; padding: 6px 16px !important; }
  body .catalog .catalog__price-pills.has-more-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); }
  body .catalog .catalog__price-pills.has-more-l { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 44px), transparent); }
  body .catalog .catalog__price-pills.has-more-l.has-more-r { -webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 44px), transparent); }
  body .catalog .catalog__price-pills .catalog__price-pill { position: relative; min-height: 0 !important; height: 34px; padding: 0 13px !important; font-size: 13px !important; line-height: 1 !important; display: inline-flex; align-items: center; }
  body .catalog .catalog__price-pills .catalog__price-pill::after { content: ""; position: absolute; inset: -6px -3px; }

  /* ── 3. Размеры S/M/L/XL: видимо 34×34, нажимаемая область 44×44 (прозрачная рамка 5 px) ── */
  body .product-card__sizes { gap: 0; margin-bottom: 4px; }
  body .product-card__sizes .product-card__size { box-sizing: border-box; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; font-size: 12px; line-height: 1;
    border: 5px solid transparent !important; background-clip: padding-box !important; border-radius: 16px !important; box-shadow: inset 0 0 0 1px var(--sf-pink-line, #E1B9BF); }
  body .product-card__sizes .product-card__size[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--sf-pink, #CF818A); }
  /* ── 3. «В корзину»: ниже и ровнее, область нажатия 44 через ::after ── */
  body .product-card .product-card__buy-btn { position: relative; min-height: 0 !important; height: 38px; padding: 0 12px; font-size: 13px !important; border-radius: 12px !important; display: flex; align-items: center; justify-content: center; }
  body .product-card .product-card__buy-btn::after { content: ""; position: absolute; inset: -4px; }

  /* ── 4. Подвал на телефоне: плотно, без больших пробелов ── */
  body .footer { padding: 20px 16px calc(72px + env(safe-area-inset-bottom)) !important; border-radius: 22px 22px 0 0; }
  body .footer .footer__top { gap: 14px 16px !important; padding-bottom: 14px !important; }
  body .footer .footer__brand { margin: 0; }
  body .footer .footer__about { font-size: 13px; line-height: 1.35; margin: 4px 0 0; }
  body .footer .footer__col-toggle { min-height: 0 !important; padding: 0 !important; margin: 0 0 2px !important; }
  body .footer .footer__col-title { margin: 0 !important; font-size: 11px !important; line-height: 1.3; }
  body .footer .footer__col-body { margin: 0 !important; padding: 0 !important; }
  body .footer .footer__link { min-height: 32px !important; padding: 0 !important; margin: 0 !important; font-size: 14px !important; line-height: 1.25 !important; }
  body .footer .footer__hours { font-size: 13px !important; line-height: 1.35 !important; margin: 4px 0 0 !important; }
  body .footer .footer__bottom { padding: 12px 0 0 !important; gap: 2px; }
  body .footer .footer__bottom > span:first-child { font-size: 10.5px; line-height: 1.3; }
  body .footer .footer__bottom-links { gap: 0 8px; row-gap: 0; }
  body .footer .footer__bottom-links a { min-height: 28px; padding: 0 2px !important; font-size: 10.5px !important; line-height: 1.25; position: relative; }
  body .footer .footer__bottom-links a::after { content: ""; position: absolute; inset: -2px -4px; }
  body .footer .footer__requisites { font-size: 10px !important; line-height: 1.35 !important; margin: 2px 0 0; }
  body .footer .footer__requisites a { display: inline !important; min-height: 0 !important; font-size: inherit !important; padding: 8px 2px; margin: -8px -2px; }
}