/* Адаптация стандартных блоков WooCommerce к дизайну «Комфортснаб» (app.css) */

/* WooCommerce сбрасывает img{height:auto} с более высокой специфичностью (.woocommerce-page img),
   возвращаем размерам темы правильные значения на страницах магазина */
.logo-img, .woocommerce .logo-img, .woocommerce-page .logo-img { height: clamp(34px, 4vw, 44px); }
.woocommerce .p-media img, .woocommerce-page .p-media img { width: 100%; height: 100%; }
.woocommerce .pm-img img, .woocommerce-page .pm-img img { width: 100%; height: 100%; max-height: 340px; }
.woocommerce .hits-track .p-card, .woocommerce-page .hits-track .p-card { flex: 0 0 calc(25% - 12px); min-width: calc(25% - 12px); }

/* ============ НАВИГАЦИЯ: полоса меню 2 + мега-панель меню 3 ============ */
/* Полоса 1 (catnav) — меню 1. Полоса 2 (subnav) — меню 2 текущего/наведённого
   направления. Выбранный пункт (.picked — ставит theme.js: первый пункт при
   наведении на меню 1, либо пункт под курсором) открывает полноширинную панель
   с колонками меню 3 по 7 строк + картинка раздела. */
nav.catnav{position:relative}
nav.catnav .drop{position:static}
/* Полоса меню 2: в каталоге — в потоке (резервирует место), вне каталога —
   оверлей под полосой меню 1, чтобы её появление не сдвигало страницу */
.navwrap{position:relative}
.subnav-zone{position:relative}
body:not(.cs-in-catalog) .subnav-zone{position:absolute;top:100%;left:0;right:0;z-index:65;box-shadow:0 18px 36px rgba(14,34,66,.14)}
.subnav{align-items:stretch;padding-top:0;padding-bottom:0}
.drop2{position:static;display:flex;align-items:center;height:100%}
.drop2 > .subnav-a{border-bottom:2px solid transparent;border-top:3px solid transparent;transition:background .15s,color .15s,border-color .15s}
/* базовая подсветка (раздел 1): зелёная полоска снизу — и при наведении, и у выбранного */
.drop2:hover > .subnav-a,.drop2.picked > .subnav-a,.subnav-a.active{border-bottom-color:var(--lime);color:var(--navy)}
/* панель открывается только у выбранного пункта */
.drop2.picked .mega2-panel{display:block}
.mega2-panel{display:none;position:absolute;top:100%;left:0;right:0;
  /* мягкий серо-голубой градиент: светлее к низу и к боковым краям */
  background:
    linear-gradient(to right, #ffffff 0%, rgba(255,255,255,0) 20%, rgba(255,255,255,0) 80%, #ffffff 100%),
    linear-gradient(180deg, #f5f8fc 0%, #e9eef5 55%, #ffffff 100%);
  border-top:1px solid var(--line);box-shadow:0 24px 48px rgba(14,34,66,.18);z-index:70}
.mega2-in{display:flex;gap:36px;padding:26px 22px 30px;align-items:flex-start}
.mega2-cols{flex:1 1 auto;min-width:0;display:flex;flex-wrap:wrap;gap:12px 44px}
.mega2-col{flex:1 1 0;min-width:170px}
.mega2-col a{display:block;padding:6px 0;font-size:14.5px;color:var(--ink);text-decoration:none;line-height:1.35}
.mega2-col a:hover{color:var(--navy);text-decoration:underline}
.mega2-col .soon-tag{pointer-events:none}
.mega2-img{flex:0 0 320px;height:240px;border:2px dashed var(--line);border-radius:10px;background:#f6f8fb;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:14px;text-align:center;padding:10px}
/* с картинкой блок без рамки: логотип лежит прямо на градиенте панели */
.mega2-img.has-img{border:0;background:transparent;padding:0;display:flex}
.mega2-img img{max-width:100%;max-height:100%;object-fit:contain}
@media(max-width:1280px){.mega2-in{gap:24px}.mega2-cols{gap:10px 28px}.mega2-img{flex-basis:240px;height:200px}}

/* подсветка пунктов меню 2 единая для всех разделов: зелёная полоска снизу
   (:hover, .picked — открытая панель, .active — текущий раздел); правило выше */

/* кнопка «Не нашли нужное?» — по вертикальному центру шапки */
.head-cta { justify-content: center; }

/* уведомления WooCommerce */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  border-radius: var(--r); border-top-color: var(--lime);
  background: #fff; box-shadow: var(--sh); font-size: 14px;
  list-style: none; padding: 14px 18px;
}
.woocommerce-error { border-top-color: var(--bad); }
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { display: none; }

/* пагинация в стиле .pager старого сайта */
.woocommerce nav.woocommerce-pagination { display: none; } /* своя пагинация в шаблоне */
.nav-links { display: flex; gap: 6px; justify-content: center; margin: 26px 0 8px; flex-wrap: wrap; }
.nav-links .page-numbers {
  min-width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff;
  color: var(--navy); font: 700 13px var(--body); text-decoration: none;
}
.nav-links .page-numbers:hover { border-color: var(--navy); }
.nav-links .page-numbers.current { background: var(--navy); color: #fff; border-color: var(--navy); }
.nav-links .page-numbers.dots { border: 0; background: none; }

/* подгрузка каталога при скролле (вместо пагинации в каталоге) */
.cat-loader { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 28px 0 10px; color: var(--muted); font-size: 13.5px; }
.cat-loader .spinner { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--lime); animation: catSpin .8s linear infinite; }
@keyframes catSpin { to { transform: rotate(360deg); } }

/* цена внутри карточки */
.p-card .woocommerce-Price-amount { font-size: 19px; font-weight: 900; color: var(--navy); }
.pm-price .woocommerce-Price-amount { font-size: 24px; font-weight: 900; color: var(--navy); }

/* стандартный вывод галереи/вариаций не используется — шаблоны свои,
   глушим лишние отступы хуков на всякий случай */
.woocommerce-before-single-product, .woocommerce-after-single-product-summary { display: none; }

/* страница корзины/оформления — базовая вписка в дизайн (этап 4 доведёт) */
.woocommerce-cart-form table { border-collapse: collapse; width: 100%; }

/* корзина: без купона, компактные колонки «удалить + фото» */
.woocommerce-cart .coupon { display: none; }
@media (min-width: 783px) {
  .woocommerce-cart .woocommerce-cart-form table { table-layout: fixed; }
  .woocommerce-cart .woocommerce-cart-form table th.product-remove,
  .woocommerce-cart .woocommerce-cart-form table td.product-remove { width: 44px; padding-right: 0; }
  .woocommerce-cart .woocommerce-cart-form table th.product-thumbnail,
  .woocommerce-cart .woocommerce-cart-form table td.product-thumbnail { width: 64px; padding-left: 0; padding-right: 14px; }
  .woocommerce-cart .woocommerce-cart-form table td.product-thumbnail img { width: 56px; height: auto; margin: 0; }
  .woocommerce-cart .woocommerce-cart-form table th.product-price,
  .woocommerce-cart .woocommerce-cart-form table td.product-price { width: 110px; }
  .woocommerce-cart .woocommerce-cart-form table th.product-quantity,
  .woocommerce-cart .woocommerce-cart-form table td.product-quantity { width: 130px; }
  .woocommerce-cart .woocommerce-cart-form table th.product-subtotal,
  .woocommerce-cart .woocommerce-cart-form table td.product-subtotal { width: 110px; }
}

/* Мобильная шапка: логотип уменьшается и занимает остаток первой строки,
   корзина остаётся справа на той же строке (иначе на ≤720px логотип
   уводит корзину на отдельную строку). Файл грузится последним —
   перекрывает clamp-высоты .logo-img из app.css и строки выше. */
@media(max-width:720px){
  .logo { flex: 1 1 0; min-width: 0; }
  .logo-img, .woocommerce .logo-img, .woocommerce-page .logo-img { height: auto; max-height: 34px; }
  .logo .custom-logo { height: auto; max-height: 34px; }
}

/* Слайдер фото на карточке каталога: кадры лежат стопкой (абсолютно),
   ведя курсором по горизонтали карточки, theme.js листает их зонами, точки
   внизу слева — индикатор. ВАЖНО: правила БЕЗ .woocommerce/.woocommerce-page —
   их нет у body на главной («Хиты продаж») и в поиске, стопка там разваливалась
   в ряд (12.10.2026). Специфичности хватает против .p-media img из app.css
   и строки 6 этого файла: файл грузится последним. */
.p-card .p-media img.p-img {
  position: absolute; left: 8px; top: 8px;
  width: calc(100% - 16px); height: calc(100% - 16px);
  opacity: 0; transition: opacity .25s ease, transform .3s ease;
  /* кадры не перехватывают курсор: события всегда уходят карточке (theme.js),
     и невидимый верхний кадр не мешает наведению и нативному drag фото */
  pointer-events: none;
}
.p-card .p-media img.p-img.is-active { opacity: 1; }
/* у «нет в наличии» кадр приглушён и серый (как было для одиночного фото) */
.p-card.is-out .p-media img.p-img.is-active { opacity: .7; }
.p-dots { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 6px; opacity: 0; transition: opacity .2s; z-index: 3; }
.p-card:hover .p-dots { opacity: 1; }
.p-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(23, 43, 77, .28); cursor: pointer; transition: background .15s; }
.p-dot.is-active, .p-dot:hover { background: var(--navy); }
/* тач-устройства: наведения нет — точки не показываем, карточка ведёт на товар */
@media (hover: none) { .p-dots { display: none; } }