/* menu-tabs.css — Main menu Option F: compact icon chips (Oct 2026; replaces Option D tiles).
   Load AFTER nav-lean.css. Applies only when partials.js adds .mm-links--tabs
   (2–5 live categories). No shadows (hard rule). Containment rule kept:
   Clearance stays inside the content edge. */

/* ===== Option F (Oct 2026): compact icon chips in a 60px row ===== */
.hdr-nav--tabs .hdr-nav__inner{min-height:60px}
.mm-links--tabs{gap:8px;margin-left:24px;align-self:center;flex:1 1 auto}
.mm-links--tabs .mm-links__spacer{display:none}

.mm-links--tabs a.mm-tab{
  flex:0 0 auto;height:40px;display:inline-flex;align-items:center;gap:8px;
  padding:0 14px 0 10px !important;border-radius:999px;
  background:var(--surface-2,#F3F4F7);color:var(--ink,#1C252C);text-decoration:none;
  transition:background .15s,color .15s;
}
.mm-tab__ico{flex:none;display:inline-flex;align-items:center;justify-content:center;color:var(--brand,#3A4FD0)}
.mm-tab__ico svg{width:18px;height:18px}
.mm-tab__tx{display:inline-flex;min-width:0;line-height:1}
.mm-tab__name{font-size:14px;font-weight:600;white-space:nowrap}
.mm-tab__sub{display:none}

.mm-links--tabs a.mm-tab:hover{background:var(--border,#E8EAEE);color:var(--ink,#1C252C);text-decoration:none}
.mm-links--tabs a.mm-tab.is-active{background:var(--brand-tint,#EFF1FB);color:var(--brand,#3A4FD0);text-decoration:none}
.mm-links--tabs a.mm-tab.is-active .mm-tab__name{color:var(--brand,#3A4FD0)}
.mm-links--tabs a.mm-tab:focus-visible{outline:2px solid var(--brand,#3A4FD0);outline-offset:2px}


/* mega-menu rail: icons only on mobile tiles */
.mm-cat__ico{display:none}

@media (max-width:1180px){
  .mm-links--tabs{gap:6px;margin-left:16px}
  .mm-links--tabs a.mm-tab{padding:0 12px 0 10px !important;gap:6px}
  .mm-tab__name{font-size:13px}
}

/* MOBILE: row is hidden by mega-menu.css; categories become a 2x2 tile grid
   at the top of the All Deals dropdown */
@media (max-width:900px){
  .hdr-nav--tabs .hdr-nav__inner{min-height:0}
  .mm-rail{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:14px}
  .mm-rail > .mm-rail__h,.mm-rail > .mm-rail__sep,.mm-rail > .mm-cat:not(.mm-cat--tile){grid-column:1/-1}
  .mm-rail > .mm-rail__h{padding:4px 2px 0}
  .mm-rail > .mm-rail__sep{margin:4px 0}
  .mm-cat--tile{
    display:flex;align-items:center;gap:10px;padding:12px !important;border-radius:12px;
    background:#fff;border:1px solid var(--border,#E8EAEE);font-size:14px;line-height:1.25;text-align:left;
  }
  .mm-cat--tile > svg{display:none}
  .mm-cat--tile .mm-cat__ico{display:inline-flex;flex:none;width:32px;height:32px;border-radius:9px;align-items:center;justify-content:center;background:var(--brand-tint,#EFF1FB);color:var(--brand,#3A4FD0)}
  .mm-cat--tile.is-active{box-shadow:none;border-color:var(--brand,#3A4FD0)}
}

/* mobile tiles: mega-menu.css fades .mm-cat svg to 0 (caret behaviour); keep tile icons visible */
.mm-cat--tile .mm-cat__ico svg{opacity:1;width:18px;height:18px;color:var(--brand,#3A4FD0)}
/* Clearance убран из шапки, мобильного меню и футера (пакет 18.10.2026) — правил под него здесь нет. */
@media (max-width:900px){ .mm-cat--tile{justify-content:flex-start} .mm-cat--tile .mm-cat__lbl{text-align:left} }
/* mega-menu panel opens directly under the tab row */
@media (min-width:901px){ .hdr-nav--tabs .mm-panel{top:calc(100% + 1px)} }

/* Brand shortcuts (Apple, Dyson): same chip as the categories, no divider.
   Hidden below 1180px to keep the row from crowding. */
@media (max-width:1180px){ .mm-links--tabs a.mm-tab--brand{display:none} }

/* ===== Мегаменю: геометрия эталона (пакет 18.10.2026) ===== */
/* Панель сужена до 1280px — ровно четыре карточки по 238.75px при 1440px.
   Сама шапка остаётся во всю ширину. */
@media (min-width:901px){
  .mm-panel{
    left: max(0px, calc((100% - 1280px) / 2)) !important;
    right: max(0px, calc((100% - 1280px) / 2)) !important;
  }
}
/* Карточки-добивка: метка «More deals» поверх фото, без лишней строки текста. */
.mm-prod__related{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:10px;font-weight:600;color:var(--ink-2,#50606C);background:#fff;border-radius:4px;padding:2px 6px}
/* Мобильный: две колонки карточек, панель в одну колонку. */
@media (max-width:900px){
  .mm-panel{grid-template-columns:minmax(0,1fr) !important}
  .mm-body{min-width:0;min-height:0;padding:16px 16px 18px}
  .mm-filter{flex-wrap:wrap}
  .mm-prods{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}