/* ============================================================
   ДБМ — Детали Больших Машин — design system
   Brandbook palette: чёрный #131E26 + синий #2A5C87 + голубой #4D8FC8 + серый #ADB6BF
   Шрифт: Montserrat (self-hosted woff2, latin+cyrillic, 5 весов)
   ============================================================ */

/* ---------- Self-hosted Montserrat (woff2 only, latin + cyrillic) ----------
   Files in assets/fonts/montserrat, weights 400/500/600/700/800.
   `font-display: swap` paints fallback (system-ui) immediately, then
   re-renders once Montserrat loads. unicode-range copies fontsource so
   the browser only fetches the subset that the page actually uses. */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/montserrat/montserrat-cyrillic-400.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/montserrat/montserrat-latin-400.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/montserrat/montserrat-cyrillic-500.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/montserrat/montserrat-latin-500.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/montserrat/montserrat-cyrillic-600.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/montserrat/montserrat-latin-600.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/montserrat/montserrat-cyrillic-700.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/montserrat/montserrat-latin-700.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:800;font-display:swap;
  src:url('../fonts/montserrat/montserrat-cyrillic-800.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:800;font-display:swap;
  src:url('../fonts/montserrat/montserrat-latin-800.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

:root{
    /* === Брендбук ДБМ === */
    --brand-black:#131E26;        /* основной (заголовки, тексты, hero, footer) */
    --brand-blue:#2A5C87;         /* основной CTA, бренд-плашки */
    --brand-blue-bright:#0C75CC;  /* совпадает с цветом самого лого, для акцентов/hover */
    --brand-blue-light:#4D8FC8;   /* hover, ссылки, доп. акценты */
    --brand-blue-dark:#1d3f5c;    /* darker hover state для синих кнопок */
    --brand-gray:#ADB6BF;         /* серый текст, бордюры */
    --brand-white:#FFFFFF;

    /* === Алиасы tp-* для обратной совместимости =====================
       Старая палитра (navy/graphite/amber) маппится на брендбук.
       Амбер заменён ярким синим #0C75CC (цвет лого ДБМ).
       Старые имена остаются — переписывать каждый class необязательно. */
    --tp-navy:var(--brand-black);
    --tp-navy-deep:var(--brand-black);
    --tp-navy-soft:var(--brand-blue);
    --tp-graphite:#1f2937;
    --tp-steel:#475569;
    --tp-steel-soft:#94a3b8;
    --tp-line:#e2e8f0;
    --tp-bg:#f6f8fb;
    --tp-bg-warm:#f4f7fb;

    /* Бывший «амбер» теперь яркий синий из лого; сохранены имена ради
       совместимости с inline-стилями в шаблонах. */
    --tp-amber:var(--brand-blue-bright);
    --tp-amber-dark:var(--brand-blue);

    --tp-red:#dc2626;
    --tp-green:#16a34a;
    --tp-green-soft:#dcfce7;

    /* typography */
    --tp-font:'Montserrat','Segoe UI',system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
    --tp-font-head:'Montserrat','Segoe UI',system-ui,sans-serif;

    /* shape */
    --tp-radius:10px;
    --tp-radius-sm:6px;
    --tp-shadow-sm:0 1px 2px rgba(19,30,38,.06), 0 1px 3px rgba(19,30,38,.04);
    --tp-shadow:0 4px 14px rgba(19,30,38,.08);
    --tp-shadow-lg:0 18px 40px -14px rgba(19,30,38,.25);
}

/* ---------- base ---------- */
html{scroll-behavior:smooth;}
body{
    font-family:var(--tp-font);
    color:var(--tp-graphite);
    background:var(--tp-bg);
    -webkit-font-smoothing:antialiased;
    line-height:1.55;
}
h1,h2,h3,h4,h5,h6{font-family:var(--tp-font-head);font-weight:700;color:var(--brand-black);letter-spacing:-.01em;}
h1{font-size:1.9rem;font-weight:800;}
h2{font-size:1.5rem;font-weight:700;}
a{color:var(--brand-blue);transition:color .15s;}
a:hover{color:var(--brand-blue-bright);}
hr{border-color:var(--tp-line);}
.text-muted{color:var(--tp-steel) !important;}

/* ---------- top meta strip ---------- */
.tp-topbar{
    background:var(--brand-black);
    color:#cbd5e1;
    font-size:.82rem;
    padding:.45rem 0;
    letter-spacing:.01em;
}
.tp-topbar a{color:#fff;text-decoration:none;}
.tp-topbar a:hover{color:var(--brand-blue-light);}
.tp-topbar .tp-pill{display:inline-flex;align-items:center;gap:.35rem;}

/* ---------- header ---------- */
.tp-header{
    background:#fff;
    border-bottom:1px solid var(--tp-line);
    box-shadow:var(--tp-shadow-sm);
    position:sticky;top:0;z-index:1020;
}
.tp-logo{
    display:inline-flex;align-items:center;
    color:var(--brand-black);text-decoration:none;
}
.tp-logo img{display:block;height:44px;width:auto;}
@media (max-width:768px){
    .tp-logo img{height:36px;}
}

/* search bar */
.tp-search{flex:1;max-width:640px;}
.tp-search .input-group{box-shadow:var(--tp-shadow-sm);border-radius:var(--tp-radius);overflow:hidden;}
.tp-search .form-control{
    border-color:var(--tp-line);
    border-right:0;padding:.6rem .9rem;font-size:.95rem;
}
.tp-search .form-control:focus{box-shadow:none;border-color:var(--brand-blue);}
.tp-search .btn{
    background:var(--brand-blue);color:#fff;border:0;padding:0 1.2rem;font-weight:600;
}
.tp-search .btn:hover{background:var(--brand-blue-bright);color:#fff;}

/* quick action buttons */
.tp-quick{
    display:inline-flex;align-items:center;gap:.4rem;
    padding:.5rem .85rem;border-radius:var(--tp-radius-sm);
    font-size:.85rem;font-weight:600;color:var(--tp-graphite);
    border:1px solid var(--tp-line);background:#fff;
    text-decoration:none;transition:all .15s;
}
.tp-quick:hover{border-color:var(--brand-blue);color:var(--brand-blue);background:#f4f8fc;}
.tp-quick .bi{color:var(--brand-blue);}
.tp-quick--cart{background:var(--brand-blue);color:#fff;border-color:var(--brand-blue);position:relative;}
.tp-quick--cart:hover{background:var(--brand-blue-bright);color:#fff;}
.tp-quick--cart .bi{color:#fff;}
.tp-quick--cart .cart-count{
    position:absolute;top:-6px;right:-6px;
    background:var(--brand-blue-bright);color:#fff;
    font-size:.7rem;font-weight:800;line-height:1;
    padding:3px 6px;border-radius:999px;
    box-shadow:0 0 0 2px #fff;
}
/* Гараж — компактная иконка-кнопка с бейджем выбранной марки */
.tp-quick--garage{cursor:pointer;position:relative;}
.tp-quick--garage .garage-badge{
    position:absolute;top:-7px;right:-8px;max-width:120px;
    background:var(--brand-blue-bright);color:#fff;
    font-size:.62rem;font-weight:800;line-height:1;letter-spacing:.02em;
    padding:3px 6px;border-radius:999px;
    box-shadow:0 0 0 2px #fff;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* Garage modal */
.tp-garage-overlay{
    position:fixed;inset:0;z-index:1100;
    background:rgba(19,30,38,.55);backdrop-filter:blur(2px);
    display:flex;align-items:center;justify-content:center;
    padding:1rem;
}
.tp-garage-overlay[hidden]{display:none;}
.tp-garage-modal{
    background:#fff;border-radius:var(--tp-radius);
    width:100%;max-width:920px;max-height:90vh;
    padding:1.4rem 1.6rem;position:relative;overflow-y:auto;
    box-shadow:0 20px 60px rgba(0,0,0,.4);
}
.tp-garage-modal h3{
    margin:0 0 .35rem;font-size:1.3rem;color:var(--brand-black);
    display:flex;align-items:center;gap:.5rem;
}
.tp-garage-modal h3 .bi{color:var(--brand-blue);}
.tp-garage-lead{color:var(--tp-steel);margin:0 0 1rem;font-size:.92rem;}
.tp-garage-close{
    position:absolute;top:.7rem;right:.9rem;
    background:transparent;border:0;font-size:1.7rem;line-height:1;
    color:var(--tp-steel);cursor:pointer;padding:0 .4rem;
}
.tp-garage-close:hover{color:var(--brand-black);}
.tp-garage-current{
    display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
    background:#f4f8fc;border:1px solid var(--brand-blue-light);
    padding:.55rem .8rem;border-radius:var(--tp-radius-sm);
    margin-bottom:1rem;font-size:.9rem;
}
.tp-garage-current strong{color:var(--brand-blue);font-weight:700;}
.tp-garage-clear{
    margin-left:auto;background:transparent;border:1px solid var(--tp-line);
    padding:.25rem .65rem;border-radius:999px;font-size:.78rem;color:var(--tp-steel);
    cursor:pointer;
}
.tp-garage-clear:hover{border-color:var(--brand-blue);color:var(--brand-blue);}
.tp-garage-section{margin-bottom:1rem;}
.tp-garage-section-title{
    font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
    color:var(--tp-steel);margin-bottom:.5rem;
}
.tp-garage-grid{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:.5rem;
}
.tp-garage-item{
    display:flex;flex-direction:column;align-items:center;gap:.35rem;
    background:#fff;border:1px solid var(--tp-line);border-radius:var(--tp-radius-sm);
    padding:.55rem .35rem;cursor:pointer;transition:all .15s;
    min-height:90px;
}
.tp-garage-item:hover{border-color:var(--brand-blue);background:#f4f8fc;transform:translateY(-1px);}
.tp-garage-item.is-active{border-color:var(--brand-blue);background:#f4f8fc;box-shadow:0 0 0 2px var(--brand-blue-light) inset;}
.tp-garage-item img{max-width:60px;max-height:36px;object-fit:contain;}
.tp-garage-item-name{font-size:.78rem;font-weight:600;color:var(--brand-black);line-height:1.2;text-align:center;}
.tp-garage-mono{
    width:36px;height:36px;border-radius:50%;background:var(--brand-blue);color:#fff;
    display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem;
}

/* catalog dropdown button (mega menu trigger) */
.tp-catalog-btn{
    background:var(--brand-blue);color:#fff;
    border:0;font-weight:700;padding:.6rem 1rem;border-radius:var(--tp-radius-sm);
    display:inline-flex;align-items:center;gap:.45rem;
}
.tp-catalog-btn:hover,.tp-catalog-btn:focus{background:var(--brand-blue-bright);color:#fff;}
.tp-catalog-btn .bi{font-size:1.1rem;}

/* ---------- mega menu ---------- */
.tp-mega{
    min-width:760px;max-width:960px;padding:1.25rem 1.25rem 1rem;
    border:0;border-radius:var(--tp-radius);box-shadow:var(--tp-shadow-lg);
}
.tp-mega .tp-mega-col{padding:0 .5rem;}
.tp-mega h6{
    font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
    color:var(--tp-steel);margin-bottom:.55rem;font-weight:700;
}
.tp-mega ul{list-style:none;padding:0;margin:0 0 .75rem;}
.tp-mega li a{
    display:flex;align-items:center;gap:.5rem;
    padding:.25rem .5rem;border-radius:6px;
    color:var(--tp-graphite);text-decoration:none;font-size:.9rem;
}
.tp-mega li a:hover{background:#eef4fa;color:var(--brand-blue);}
.tp-mega li a .bi{color:var(--tp-steel-soft);font-size:.85rem;}
.tp-mega li a:hover .bi{color:var(--brand-blue-bright);}
.tp-mega .tp-mega-footer{
    margin-top:.75rem;padding-top:.85rem;border-top:1px solid var(--tp-line);
    display:flex;justify-content:space-between;align-items:center;
}
.tp-mega .tp-mega-footer a{font-weight:600;color:var(--brand-blue);}

/* ---------- hero ---------- */
.tp-hero{
    position:relative;overflow:hidden;
    background:
        radial-gradient(1200px 400px at 80% -40%, rgba(12,117,204,.22), transparent 60%),
        linear-gradient(135deg,var(--brand-black) 0%,#0a131a 100%);
    color:#fff;
    padding:3rem 0 2.5rem;
}
.tp-hero::before{
    content:"";position:absolute;right:-80px;bottom:-40px;
    width:560px;height:220px;
    background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 560 220" fill="none"><path d="M20 170 h380 l40 -50 h80 v50 h20" stroke="%23ffffff14" stroke-width="2"/><rect x="20" y="110" width="380" height="60" rx="6" fill="%23ffffff10"/><rect x="400" y="120" width="80" height="50" rx="4" fill="%23ffffff10"/><circle cx="110" cy="185" r="22" stroke="%23ffffff30" stroke-width="3"/><circle cx="110" cy="185" r="8" fill="%230C75CC"/><circle cx="330" cy="185" r="22" stroke="%23ffffff30" stroke-width="3"/><circle cx="330" cy="185" r="8" fill="%230C75CC"/><circle cx="450" cy="185" r="22" stroke="%23ffffff30" stroke-width="3"/><circle cx="450" cy="185" r="8" fill="%230C75CC"/></svg>') no-repeat right bottom;
    opacity:.7;pointer-events:none;
}
.tp-hero h1{color:#fff;font-size:2.4rem;line-height:1.15;margin-bottom:.6rem;letter-spacing:-.02em;font-weight:800;}
.tp-hero .tp-hero-lead{color:#cbd5e1;font-size:1.05rem;max-width:560px;}
.tp-hero .tp-hero-tabs{display:flex;gap:.3rem;margin-top:1.4rem;margin-bottom:.6rem;flex-wrap:wrap;}
.tp-hero .tp-hero-tab{
    background:rgba(255,255,255,.08);color:#fff;border:0;
    padding:.42rem .9rem;border-radius:999px;font-size:.85rem;font-weight:500;
    cursor:pointer;transition:all .15s;
}
.tp-hero .tp-hero-tab.is-active{background:var(--brand-blue-bright);color:#fff;font-weight:700;}
.tp-hero .tp-hero-tab:hover:not(.is-active){background:rgba(255,255,255,.16);}
.tp-hero .tp-hero-search .form-control{
    border:0;padding:1rem 1.1rem;font-size:1.05rem;
    border-radius:var(--tp-radius) 0 0 var(--tp-radius);
}
.tp-hero .tp-hero-search .btn{
    background:var(--brand-blue-bright);color:#fff;font-weight:800;
    padding:0 1.6rem;border-radius:0 var(--tp-radius) var(--tp-radius) 0;border:0;
}
.tp-hero .tp-hero-search .btn:hover{background:#fff;color:var(--brand-blue);}
.tp-hero-hints{margin-top:.6rem;font-size:.8rem;color:#93a3b8;}
.tp-hero-hints a{color:#fff;text-decoration:none;margin-right:.9rem;border-bottom:1px dashed rgba(255,255,255,.35);}
.tp-hero-hints a:hover{color:var(--brand-blue-light);border-color:var(--brand-blue-light);}

.tp-hero-stats{display:flex;gap:2rem;margin-top:2rem;flex-wrap:wrap;}
.tp-hero-stats .tp-stat{min-width:130px;}
.tp-hero-stats .tp-stat strong{color:var(--brand-blue-light);font-size:1.7rem;display:block;line-height:1;font-weight:800;}

/* ---------- Светлый вариант hero-search (страница /search) ---------- */
.tp-search-page-hero{background:#fff;border-bottom:1px solid var(--tp-line);padding:2rem 0 1.6rem;}
.tp-search-page-hero .tp-eyebrow{color:var(--brand-blue);}
.tp-search-page-hero h1{font-size:2rem;font-weight:800;letter-spacing:-.01em;color:var(--brand-black);}
.tp-hero-search--light{max-width:780px;}
.tp-hero-search--light .tp-hero-tabs{display:flex;gap:.4rem;margin-top:0;margin-bottom:.7rem;flex-wrap:wrap;}
.tp-hero-search--light .tp-hero-tab{background:#f1f5f9;color:var(--tp-graphite);border:1px solid var(--tp-line);text-decoration:none;padding:.4rem .9rem;font-size:.85rem;border-radius:999px;font-weight:500;transition:all .15s;}
.tp-hero-search--light .tp-hero-tab.is-active{background:var(--brand-blue-bright);color:#fff;border-color:var(--brand-blue-bright);font-weight:700;}
.tp-hero-search--light .tp-hero-tab:hover:not(.is-active){background:#e2e8f0;color:var(--brand-black);}
.tp-hero-search--light .input-group{box-shadow:var(--tp-shadow-sm);border-radius:var(--tp-radius);overflow:hidden;}
.tp-hero-search--light .form-control{border:1px solid var(--tp-line);border-right:0;padding:1rem 1.1rem;font-size:1.05rem;border-radius:var(--tp-radius) 0 0 var(--tp-radius);}
.tp-hero-search--light .form-control:focus{box-shadow:none;border-color:var(--brand-blue);}
.tp-hero-search--light .btn{background:var(--brand-blue);color:#fff;font-weight:700;padding:0 1.6rem;border-radius:0 var(--tp-radius) var(--tp-radius) 0;border:0;}
.tp-hero-search--light .btn:hover{background:var(--brand-blue-bright);color:#fff;}
.tp-search-page-hint{display:block;margin-top:.6rem;color:var(--tp-graphite-light);font-size:.82rem;}

/* ---------- Weekly Deal (товар недели в hero справа) ---------- */
.tp-weekly-deal{
    display:flex;flex-direction:column;width:100%;
    background:#fff;border-radius:var(--tp-radius);
    overflow:hidden;color:var(--brand-black);text-decoration:none;
    box-shadow:0 4px 20px rgba(19,30,38,.18);
    transition:transform .2s,box-shadow .2s;
}
.tp-weekly-deal:hover{transform:translateY(-3px);box-shadow:0 8px 28px rgba(12,117,204,.22);color:var(--brand-black);}
.tp-weekly-deal__head{
    display:flex;justify-content:space-between;align-items:center;
    padding:.55rem .9rem;background:var(--brand-blue);color:#fff;
}
.tp-weekly-deal__eyebrow{
    font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
    display:inline-flex;align-items:center;gap:.35rem;
}
.tp-weekly-deal__pct{
    background:#dc2626;color:#fff;font-weight:800;font-size:.85rem;
    padding:.15rem .5rem;border-radius:999px;line-height:1;
}
.tp-weekly-deal__photo{
    aspect-ratio:4/3;background:#fff;
    display:flex;align-items:center;justify-content:center;padding:.6rem;
    border-bottom:1px solid var(--tp-line);
}
.tp-weekly-deal__photo img{max-width:100%;max-height:100%;object-fit:contain;}
.tp-weekly-deal__photo .bi{font-size:2.4rem;color:var(--tp-steel-soft);}
.tp-weekly-deal__body{padding:.7rem .9rem;display:flex;flex-direction:column;gap:.3rem;flex:1;}
.tp-weekly-deal__brand{font-size:.7rem;font-weight:700;color:var(--brand-blue);letter-spacing:.04em;text-transform:uppercase;}
.tp-weekly-deal__name{
    font-size:.88rem;line-height:1.3;font-weight:600;color:var(--brand-black);
    display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.tp-weekly-deal__price-row{display:flex;align-items:baseline;gap:.45rem;margin-top:auto;}
.tp-weekly-deal__old{color:var(--tp-steel);font-size:.8rem;text-decoration:line-through;font-weight:600;}
.tp-weekly-deal__new{color:#dc2626;font-size:1.15rem;font-weight:800;}
.tp-weekly-deal__timer{
    display:flex;align-items:center;justify-content:center;gap:.4rem;
    padding:.55rem .9rem;background:#f8fafc;
    border-top:1px solid var(--tp-line);
    color:var(--brand-black);font-weight:700;font-size:.88rem;
    font-variant-numeric:tabular-nums;
}
.tp-weekly-deal__timer .bi{color:var(--brand-blue-bright);}
.tp-hero-stats .tp-stat span{color:#cbd5e1;font-size:.82rem;}

/* ---------- section + blocks ---------- */
.tp-section{padding-top:2.5rem;padding-bottom:2.5rem;}
.tp-section-title{display:flex;align-items:end;justify-content:space-between;margin-bottom:1.2rem;gap:1rem;flex-wrap:wrap;}
.tp-section-title h2{margin:0;font-size:1.5rem;}
.tp-section-title .tp-more{font-size:.88rem;font-weight:600;color:var(--brand-blue);}
.tp-section-title .tp-more:hover{color:var(--brand-blue-bright);}
.tp-eyebrow{display:inline-block;color:var(--brand-blue);font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:.35rem;}

/* ---------- cards ---------- */
.hover-card{transition:transform .2s, box-shadow .2s, border-color .2s;}
.hover-card:hover{transform:translateY(-2px);box-shadow:var(--tp-shadow-lg);}

.tp-cat-tile{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    background:#fff;border:1px solid var(--tp-line);border-radius:var(--tp-radius);
    padding:.65rem;height:100%;text-align:center;
    text-decoration:none;color:var(--tp-graphite);
    transition:all .2s;position:relative;overflow:hidden;
}
.tp-cat-tile-cover{
    width:100%;aspect-ratio:4/3;overflow:hidden;border-radius:calc(var(--tp-radius) - 2px);
    margin-bottom:.45rem;background:#f8fafc;
}
.tp-cat-tile-cover img{
    width:100%;height:100%;object-fit:contain;display:block;
    transition:transform .25s;
}
.tp-cat-tile:hover .tp-cat-tile-cover img{transform:scale(1.04);}
.tp-cat-tile::before{
    content:"";position:absolute;right:-12px;bottom:-12px;
    width:80px;height:80px;border-radius:50%;
    background:radial-gradient(var(--brand-blue-bright) 0%, transparent 60%);
    opacity:0;transition:opacity .2s;
}
.tp-cat-tile:hover::before{opacity:.18;}
.tp-cat-tile:hover{border-color:var(--brand-blue);transform:translateY(-2px);box-shadow:var(--tp-shadow);color:var(--brand-blue);}
.tp-cat-tile .bi{font-size:1.4rem;color:var(--brand-blue);margin-bottom:.4rem;}
.tp-cat-tile strong{font-size:.8rem;line-height:1.2;}
.tp-cat-tile small{color:var(--tp-steel);margin-top:.15rem;font-size:.7rem;}

.tp-pill-brand{
    display:inline-flex;align-items:center;gap:.35rem;
    padding:.38rem .7rem;border-radius:999px;
    background:#fff;border:1px solid var(--tp-line);
    font-size:.82rem;font-weight:600;color:var(--tp-graphite);
    text-decoration:none;transition:all .15s;
}
.tp-pill-brand:hover{border-color:var(--brand-blue);color:var(--brand-blue);background:#f4f8fc;}
.tp-pill-brand .tp-count{color:var(--tp-steel);font-weight:500;font-size:.75rem;}

.tp-make-card{
    position:relative;display:block;border:1px solid var(--tp-line);border-radius:var(--tp-radius);
    overflow:hidden;background:#fff;color:var(--tp-graphite);text-decoration:none;
    height:100%;transition:all .2s;
}
.tp-make-card:hover{border-color:var(--brand-blue);transform:translateY(-2px);box-shadow:var(--tp-shadow);}
.tp-make-card .tp-make-photo{height:70px;display:flex;align-items:center;justify-content:center;background:#f8fafc;padding:.3rem .8rem;}
.tp-make-card .tp-make-photo img{max-height:54px;max-width:90%;object-fit:contain;}
.tp-make-card .tp-make-mono{
    width:40px;height:40px;border-radius:50%;
    background:var(--brand-blue);color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-size:.9rem;font-weight:700;letter-spacing:-.02em;
}
.tp-make-card .tp-make-photo--bare{
    color:#fff;font-weight:800;font-size:1.25rem;letter-spacing:.05em;
    text-shadow:0 1px 2px rgba(0,0,0,.3);
}
.tp-make-card .tp-make-body{padding:.45rem .65rem;display:flex;align-items:center;justify-content:space-between;gap:.4rem;}
.tp-make-card .tp-make-body strong{color:var(--brand-black);font-size:.82rem;}
.tp-make-card .tp-make-body small{color:var(--tp-steel);display:block;font-size:.72rem;}
.tp-make-card .tp-make-count{
    background:var(--brand-blue);color:#fff;font-weight:700;font-size:.78rem;
    padding:.2rem .5rem;border-radius:999px;
}

/* product card in grid — единый стандарт ритма
 *
 * Цель: одинаковая высота всех карточек в строке независимо от длины
 * имени, бренда, наличия скидки. Достигается фиксированной aspect-ratio
 * у фото (1/1 квадрат), фиксированным числом строк имени (2 line-clamp),
 * фиксированным min-height у блоков под фото.
 */
.tp-product-card{
    background:#fff;border:1px solid var(--tp-line);border-radius:var(--tp-radius);
    overflow:hidden;height:100%;display:flex;flex-direction:column;transition:all .2s;
    position:relative;
    cursor:pointer; /* подсказка что вся карточка кликабельная — обрабатывается JS */
}
/* Текст внутри карточки не выделяется при свайпе (мобила) — это сбивает с тапа */
.tp-product-card{user-select:none;}
.tp-product-card a{cursor:pointer;}
.tp-analog-badge{
    position:absolute;top:.5rem;left:.5rem;z-index:2;
    background:var(--brand-blue-bright);color:#fff;
    font-size:.7rem;font-weight:700;line-height:1;
    padding:.3rem .5rem;border-radius:4px;
    display:inline-flex;align-items:center;gap:.25rem;
}
.tp-product-card:hover{transform:translateY(-2px);border-color:var(--brand-blue);box-shadow:var(--tp-shadow);}
.tp-product-card .tp-product-photo{
    aspect-ratio:1/1;background:#fff;display:flex;align-items:center;justify-content:center;
    border-bottom:1px solid var(--tp-line);padding:.75rem;
    position:relative;overflow:hidden;
}
.tp-product-card .tp-product-photo img{
    /* Фото никогда не выходит за рамки и не растягивается. Большие фото
     * пропорционально уменьшаются, маленькие центрируются с пустым полем. */
    max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
    display:block;
}
/* Когда у товара нет своего фото — показываем лого бренда. Меньшего размера
 * чтобы не выглядеть как товарный рендер. */
.tp-product-card .tp-product-photo-brand{
    max-width:60%;max-height:50%;opacity:.8;
}
/* Универсальная SVG-заглушка — занимает всё пространство карточки. */
.tp-product-card .tp-product-photo-empty{
    width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;opacity:.85;
}
.tp-product-card .tp-product-photo .bi{font-size:2rem;color:var(--tp-steel-soft);}
.tp-product-card .tp-product-body{
    padding:.75rem .85rem .85rem;display:flex;flex-direction:column;flex:1;
    gap:.45rem;
}
.tp-product-card .tp-product-meta{
    display:flex;justify-content:space-between;align-items:center;
    margin-bottom:0;gap:.4rem;min-width:0;min-height:1.5em;
}
.tp-product-card .tp-product-meta .tp-product-brand{
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
}
.tp-product-card .tp-product-meta .tp-stock-pill{flex-shrink:0;}
.tp-product-card .tp-product-brand{
    font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
    color:var(--brand-blue);
}
.tp-product-card .tp-product-art{font-size:.72rem;color:var(--tp-steel);font-family:'Courier New',monospace;text-transform:uppercase;}
.tp-product-card .tp-product-name{
    color:var(--tp-graphite);text-decoration:none;
    font-size:.88rem;line-height:1.35;font-weight:500;
    margin:0;
    /* Фикс. 2 строки = 2.7em минимум — карточки в одной сетке выравниваются. */
    display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;
    min-height:2.7em;max-height:2.7em;
}
.tp-product-card .tp-product-name:hover{color:var(--brand-blue);}
.tp-product-card .tp-product-shipping{
    font-size:.72rem;color:var(--tp-steel);
    min-height:1.4em;display:flex;align-items:center;gap:.25rem;
}
.tp-product-card .tp-product-footer{
    display:flex;justify-content:space-between;align-items:center;
    border-top:1px solid var(--tp-line);padding-top:.6rem;margin-top:auto;
    gap:.5rem;
}
.tp-product-card .tp-price{font-size:1.05rem;font-weight:800;color:var(--brand-black);}
.tp-product-card .tp-price small{font-weight:500;color:var(--tp-steel);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;}

/* Discount price block on listing card: stacked old/new + small percent pill */
.tp-product-card .tp-price-block{display:flex;flex-direction:column;align-items:flex-end;line-height:1;gap:.18rem;}
.tp-product-card .tp-price-row{display:inline-flex;align-items:baseline;gap:.4rem;}
.tp-product-card .tp-price--sale{color:#dc2626;font-size:1.1rem;font-weight:800;}
.tp-product-card .tp-price--old{color:var(--tp-steel);font-size:.78rem;text-decoration:line-through;font-weight:600;}
.tp-product-card .tp-discount-pill{
    background:linear-gradient(135deg, #dc2626, #991b1b);color:#fff;
    font-weight:800;font-size:.66rem;line-height:1;padding:.18rem .4rem;
    border-radius:999px;letter-spacing:.04em;
}
.tp-stock-pill{
    display:inline-flex;align-items:center;gap:.25rem;
    font-size:.68rem;font-weight:700;padding:.18rem .42rem;border-radius:999px;
    line-height:1.1;white-space:nowrap;
}
.tp-stock-pill--in{background:var(--tp-green-soft);color:#166534;}
.tp-stock-pill--out{background:#f1f5f9;color:var(--tp-steel);}
.tp-stock-pill--in::before{content:"";width:5px;height:5px;background:var(--tp-green);border-radius:50%;flex-shrink:0;}

/* ---------- feature strip ---------- */
.tp-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;}
.tp-feature{
    background:#fff;border:1px solid var(--tp-line);border-radius:var(--tp-radius);
    padding:1.2rem 1.25rem;display:flex;gap:.9rem;align-items:flex-start;
}
.tp-feature .tp-feat-icon{
    width:42px;height:42px;border-radius:10px;flex-shrink:0;
    background:linear-gradient(135deg,#dbeafe,#bfdbfe);
    color:var(--brand-blue);display:flex;align-items:center;justify-content:center;font-size:1.2rem;
}
.tp-feature strong{display:block;color:var(--brand-black);margin-bottom:.2rem;font-size:.97rem;}
.tp-feature span{color:var(--tp-steel);font-size:.82rem;line-height:1.4;display:block;}

/* ---------- breadcrumbs ---------- */
.tp-breadcrumb-wrap{
    background:#fff;border-bottom:1px solid var(--tp-line);
    padding:.55rem 0;font-size:.82rem;
}
.tp-breadcrumb{background:transparent;padding:0;margin:0;}
.tp-breadcrumb .breadcrumb-item{color:var(--tp-steel);}
.tp-breadcrumb .breadcrumb-item a{color:var(--brand-blue);text-decoration:none;}
.tp-breadcrumb .breadcrumb-item a:hover{color:var(--brand-blue-bright);}
.tp-breadcrumb .breadcrumb-item+.breadcrumb-item::before{content:"›";color:var(--tp-steel-soft);}

/* ---------- product page ---------- */
.tp-product-header{background:#fff;border-bottom:1px solid var(--tp-line);padding:1.2rem 0 1rem;margin-bottom:1.2rem;}
.tp-product-title{font-size:1.4rem;color:var(--brand-black);font-weight:700;line-height:1.3;margin-bottom:.35rem;}
.tp-product-sub{display:flex;gap:.6rem;flex-wrap:wrap;font-size:.88rem;color:var(--tp-steel);align-items:center;}
.tp-badge-brand{background:var(--brand-blue);color:#fff;font-size:.78rem;padding:.22rem .55rem;border-radius:6px;font-weight:600;}
.tp-badge-art{font-family:'Courier New',monospace;font-weight:700;color:var(--tp-graphite);}

.tp-offers-table{background:#fff;border-radius:var(--tp-radius);overflow:hidden;border:1px solid var(--tp-line);}
.tp-offers-table thead th{background:#f8fafc;color:var(--brand-black);font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700;padding:.55rem .75rem;border:0;}
.tp-offers-table tbody td{padding:.7rem .75rem;border-top:1px solid var(--tp-line);vertical-align:middle;font-size:.9rem;}
.tp-offers-table .tp-stock-qty{color:var(--tp-green);font-weight:700;}
.tp-offers-table .tp-price-cell{color:var(--brand-black);font-weight:800;font-size:1.02rem;}

/* Compact discount in tabular price cells */
.tp-price-cell .tp-cell-price-sale{color:#dc2626;font-weight:800;}
.tp-price-cell .tp-cell-price-old{color:var(--tp-steel);font-size:.78rem;font-weight:600;text-decoration:line-through;margin-left:.25rem;}
.tp-price-cell .tp-discount-pill{display:inline-block;margin-left:.3rem;font-size:.66rem;}
.tp-btn-cart{
    background:var(--brand-blue);color:#fff;border:0;
    font-weight:700;padding:.4rem .8rem;border-radius:var(--tp-radius-sm);
    display:inline-flex;align-items:center;gap:.35rem;font-size:.85rem;
}
.tp-btn-cart:hover{background:var(--brand-blue-bright);color:#fff;}

/* info sidebar cards */
.tp-info-card{
    background:#fff;border:1px solid var(--tp-line);border-radius:var(--tp-radius);
    margin-bottom:1rem;overflow:hidden;
}
.tp-info-card-head{
    padding:.55rem .85rem;background:#f8fafc;border-bottom:1px solid var(--tp-line);
    font-size:.8rem;font-weight:700;color:var(--brand-black);text-transform:uppercase;letter-spacing:.04em;
    display:flex;align-items:center;gap:.4rem;
}
.tp-info-card-body{padding:.8rem .85rem;}
.tp-chip{
    display:inline-flex;align-items:center;gap:.3rem;
    background:#f1f5f9;color:var(--brand-black);border:1px solid var(--tp-line);
    padding:.2rem .55rem;border-radius:6px;font-size:.78rem;font-weight:500;
    text-decoration:none;margin:0 .25rem .3rem 0;
    font-family:'Courier New',monospace;
}
.tp-chip:hover{background:var(--brand-blue);color:#fff;border-color:var(--brand-blue-bright);}
.tp-chip--ghost{background:#fff;border-color:var(--brand-blue);color:var(--brand-blue);text-decoration:none;}
.tp-chip--ghost:hover{background:var(--brand-blue);color:#fff;}
.tp-chip-brand{color:var(--brand-blue);font-weight:700;margin-right:.25rem;font-family:var(--tp-font);font-size:.72rem;text-transform:uppercase;}

/* cross-link sections on product page */
.tp-xlinks{margin-top:1.8rem;}
.tp-xlinks h3{font-size:1.05rem;margin-bottom:.75rem;color:var(--brand-black);}
.tp-xlinks h3 .bi{color:var(--brand-blue);margin-right:.35rem;}

/* ---------- footer ---------- */
.tp-footer{
    background:var(--brand-black);color:#94a3b8;
    padding:3rem 0 1.25rem;margin-top:3rem;
    position:relative;overflow:hidden;
}
.tp-footer::before{
    content:"";position:absolute;left:0;right:0;top:0;height:3px;
    background:linear-gradient(90deg, var(--brand-blue-bright) 0%, transparent 60%);
}
.tp-footer h6{
    color:#fff;font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;
    margin-bottom:.9rem;font-weight:700;
}
.tp-footer ul{list-style:none;padding:0;margin:0;}
.tp-footer ul li{margin-bottom:.35rem;}
.tp-footer a{color:#cbd5e1;text-decoration:none;font-size:.85rem;}
.tp-footer a:hover{color:var(--brand-blue-light);}
.tp-footer-brand{display:flex;align-items:center;margin-bottom:.6rem;}
.tp-footer-brand img{display:block;height:42px;width:auto;}
.tp-footer-copy{border-top:1px solid #1e293b;padding-top:1rem;margin-top:2rem;font-size:.78rem;color:#64748b;}

/* ---------- tables (fronts) ---------- */
.tp-table{width:100%;background:#fff;border:1px solid var(--tp-line);border-radius:var(--tp-radius);overflow:hidden;border-collapse:separate;border-spacing:0;}
.tp-table thead th{background:#f8fafc;color:var(--brand-black);font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700;padding:.6rem .85rem;text-align:left;border-bottom:1px solid var(--tp-line);}
.tp-table tbody td{padding:.7rem .85rem;border-top:1px solid var(--tp-line);vertical-align:middle;font-size:.9rem;}
.tp-table tbody tr:hover{background:#f8fafc;}
.tp-table a{color:var(--brand-blue);text-decoration:none;font-weight:500;}
.tp-table a:hover{color:var(--brand-blue-bright);}

/* ---------- exact-match card on /search ---------- */
.tp-exact-match{
    background:linear-gradient(135deg,#f0fdf4 0%,#ffffff 60%);
    border:1px solid #86efac;border-left:4px solid var(--tp-green);
    border-radius:var(--tp-radius);padding:1rem 1.15rem;margin-bottom:1.5rem;
    display:flex;gap:1rem;align-items:center;flex-wrap:wrap;
}
.tp-exact-match-tag{
    font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;
    color:var(--tp-green);font-weight:800;
    display:flex;align-items:center;gap:.3rem;margin-bottom:.35rem;
}

/* ---------- pagination ---------- */
.pagination .page-link{color:var(--brand-blue);border-color:var(--tp-line);}
.pagination .page-item.active .page-link{background:var(--brand-blue);border-color:var(--brand-blue);}
.pagination .page-link:hover{background:#eef4fa;color:var(--brand-blue-bright);}

/* ---------- buttons overrides ---------- */
.btn-primary{background:var(--brand-blue);border-color:var(--brand-blue);font-weight:600;}
.btn-primary:hover,.btn-primary:focus{background:var(--brand-blue-bright);border-color:var(--brand-blue-bright);}
.btn-outline-primary{color:var(--brand-blue);border-color:var(--brand-blue);}
.btn-outline-primary:hover{background:var(--brand-blue);color:#fff;}
.btn-warning{background:var(--brand-blue-bright);border-color:var(--brand-blue-bright);color:#fff;font-weight:700;}
.btn-warning:hover{background:var(--brand-blue);border-color:var(--brand-blue);color:#fff;}

/* ---------- utilities ---------- */
.tp-divider{height:1px;background:var(--tp-line);margin:1.5rem 0;}
.tp-mono{font-family:'Courier New',monospace;font-weight:700;}
.tp-link-cluster a{
    display:inline-block;margin:0 .4rem .35rem 0;
    color:var(--brand-blue);text-decoration:none;font-size:.88rem;
    padding:.18rem .4rem;border-radius:4px;
}
.tp-link-cluster a:hover{background:#eef4fa;color:var(--brand-blue-bright);}

/* admin small-box stays compatible */
.small-box{border-radius:var(--tp-radius);padding:1.25rem;margin-bottom:1rem;position:relative;overflow:hidden;color:#fff;}
.small-box .inner h3{font-size:2rem;font-weight:700;margin:0;}
.small-box .inner p{margin:.25rem 0 0;opacity:.85;}
.small-box-footer{display:block;margin-top:.75rem;color:rgba(255,255,255,.85);text-decoration:none;font-size:.82rem;}
.small-box-footer:hover{color:#fff;}

/* ---------- responsive ---------- */
@media (max-width:991px){
    .tp-hero h1{font-size:1.7rem;}
    .tp-mega{min-width:auto;}
}
@media (max-width:768px){
    .tp-hero{padding:2rem 0 1.5rem;}
    .tp-hero h1{font-size:1.4rem;}
    .tp-hero .tp-hero-lead{font-size:.92rem;}
    .tp-hero-stats{gap:1.2rem;}
    .tp-hero-stats .tp-stat strong{font-size:1.3rem;}
    .tp-section{padding-top:2rem;padding-bottom:2rem;}
    .tp-product-header{padding:.8rem 0;}
    .tp-product-title{font-size:1.15rem;}
}


/* ============================================================
   Promotions & bulk pricing on product page
   ============================================================ */
.tp-promo-banner{
    display:flex;gap:.85rem;align-items:center;
    background:linear-gradient(135deg, #eff6fc 0%, #f7fbfe 100%);
    border:1px solid #c7dcef;border-left:4px solid var(--brand-blue-bright);
    border-radius:var(--tp-radius);padding:.85rem 1rem;
    position:relative;overflow:hidden;
}
.tp-promo-banner::before{
    content:"";position:absolute;right:-30px;top:-30px;width:140px;height:140px;
    background:radial-gradient(var(--brand-blue-bright) 0%, transparent 65%);opacity:.15;pointer-events:none;
}
.tp-promo-tag{
    flex-shrink:0;background:var(--brand-blue-bright);color:#fff;
    font-weight:800;font-size:.78rem;padding:.4rem .65rem;border-radius:6px;
    display:inline-flex;align-items:center;gap:.3rem;letter-spacing:.04em;text-transform:uppercase;
}
.tp-promo-tag .bi{font-size:.95rem;}
.tp-promo-body{flex:1;min-width:0;}
.tp-promo-name{font-weight:700;color:var(--brand-black);font-size:1rem;line-height:1.3;}
.tp-promo-timer{
    font-size:.82rem;color:var(--brand-blue);font-weight:600;margin-top:.2rem;
    display:inline-flex;align-items:center;gap:.4rem;
}
.tp-promo-countdown{
    font-family:'Courier New',monospace;font-weight:800;color:var(--brand-black);
    background:#fff;padding:.1rem .45rem;border-radius:4px;border:1px solid #c7dcef;
    font-size:.88rem;letter-spacing:.02em;
}
.tp-promo-countdown.is-expired{color:var(--tp-steel);background:#f1f5f9;border-color:var(--tp-line);}

.tp-promo-discount-pill{
    display:inline-flex;align-items:center;
    background:linear-gradient(135deg, #dc2626, #991b1b);color:#fff;
    font-weight:800;font-size:.78rem;padding:.2rem .55rem;border-radius:999px;letter-spacing:.04em;
}

/* FAQ section (FAQPage rich snippet) */
.tp-faq{background:#fff;border:1px solid var(--tp-line);border-radius:var(--tp-radius);padding:1.5rem;}
.tp-faq-title{
    font-size:1.4rem;font-weight:800;color:var(--brand-black);margin-bottom:1rem;
    display:flex;align-items:center;gap:.5rem;
}
.tp-faq-title .bi{color:var(--brand-blue);}
.tp-faq .accordion-item{border-color:var(--tp-line);}
.tp-faq .accordion-button{
    font-weight:600;color:var(--brand-black);background:#fafbfd;
}
.tp-faq .accordion-button:not(.collapsed){
    background:#eef4fa;color:var(--brand-blue);box-shadow:none;
}
.tp-faq .accordion-button:focus{box-shadow:none;border-color:var(--tp-line);}
.tp-faq .accordion-body{color:var(--tp-graphite);line-height:1.6;}

/* Bulk tiers */
.tp-bulk-tiers{
    background:#f8fafc;border:1px solid var(--tp-line);
    border-radius:var(--tp-radius);padding:.85rem 1rem;
}
.tp-bulk-title{
    font-size:.78rem;font-weight:700;color:var(--brand-black);
    text-transform:uppercase;letter-spacing:.06em;margin-bottom:.55rem;
    display:inline-flex;align-items:center;gap:.4rem;
}
.tp-bulk-title .bi{color:var(--brand-blue);}
.tp-bulk-grid{display:flex;gap:.6rem;flex-wrap:wrap;}
.tp-bulk-item{
    flex:1;min-width:130px;background:#fff;border:1px solid var(--tp-line);
    border-radius:var(--tp-radius-sm);padding:.55rem .75rem;text-align:center;
    transition:all .15s;
}
.tp-bulk-item:hover{border-color:var(--brand-blue);transform:translateY(-1px);box-shadow:var(--tp-shadow-sm);}
.tp-bulk-qty{font-size:.72rem;color:var(--tp-steel);text-transform:uppercase;letter-spacing:.06em;font-weight:600;}
.tp-bulk-price{font-weight:800;color:var(--brand-black);font-size:1.1rem;line-height:1.1;margin:.2rem 0;}
.tp-bulk-disc{font-size:.72rem;font-weight:700;color:var(--brand-blue);}

/* Компактная плашка-ссылка на /opt вместо громоздких bulk-tiers */
.tp-opt-link{
    display:flex;align-items:center;gap:.6rem;
    background:rgba(12,117,204,.06);border:1px solid rgba(12,117,204,.18);
    border-radius:var(--tp-radius-sm);padding:.65rem .85rem;
    font-size:.88rem;color:var(--brand-black);text-decoration:none;
    margin-bottom:1rem;transition:all .15s;
}
.tp-opt-link:hover{
    background:rgba(12,117,204,.1);border-color:var(--brand-blue);
    color:var(--brand-black);
}
.tp-opt-link > .bi:first-child{color:var(--brand-blue);font-size:1.1rem;}
.tp-opt-link span{flex:1;}
.tp-opt-link strong{color:var(--brand-blue);}
.tp-opt-link .bi-chevron-right{color:var(--tp-steel);font-size:.85rem;}


/* Shipment promise on product card (above offers table) */
.tp-ship-promise{
    display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;
    padding:.7rem .9rem;border-radius:var(--tp-radius);
    font-size:.92rem;font-weight:600;line-height:1.2;
}
.tp-ship-promise .bi{font-size:1.05rem;flex-shrink:0;}
.tp-ship-promise__text{flex:1;}
.tp-ship-promise__countdown{
    font-variant-numeric:tabular-nums;font-weight:700;font-size:.85rem;
    background:rgba(255,255,255,.55);padding:.18rem .5rem;border-radius:.4rem;
}
.tp-ship-promise--today{
    background:linear-gradient(90deg,#e6f0fa,#d0e3f4);
    color:var(--brand-blue);border:1px solid var(--brand-blue-light);
}
.tp-ship-promise--next{
    background:#ecfeff;color:#155e75;border:1px solid #67e8f7;
}

/* Shipment promise inside offers table */
.tp-ship-cell--today{color:var(--brand-blue);font-weight:700;}
.tp-ship-cell--next{color:var(--brand-black);font-weight:600;}

/* Shipment promise on listing cards — компактная плашка под футером цены.
 * Не добавляет своих границ — карточка управляет ритмом через flex gap. */
.tp-product-card .tp-card-ship{
    display:flex;align-items:center;gap:.3rem;
    font-size:.72rem;font-weight:600;line-height:1.2;
    min-height:1.4em;
    color:var(--tp-steel);
}
.tp-product-card .tp-card-ship .bi{font-size:.82rem;flex-shrink:0;}
.tp-product-card .tp-card-ship--today{color:var(--brand-blue);}
.tp-product-card .tp-card-ship--next{color:var(--tp-steel);}


/* Vehicle type tabs on /vehicles */
.tp-veh-types{display:flex;flex-wrap:wrap;gap:.5rem;}
.tp-veh-type{
    display:inline-flex;align-items:center;gap:.45rem;
    padding:.45rem .9rem;border-radius:999px;
    background:#f1f5f9;color:var(--tp-graphite);
    font-size:.88rem;font-weight:600;text-decoration:none;
    border:1px solid transparent;transition:all .15s;
}
.tp-veh-type:hover{background:#e2e8f0;color:var(--brand-blue);}
.tp-veh-type.is-active{background:var(--brand-blue);color:#fff;}
.tp-veh-type__count{
    background:rgba(0,0,0,.08);padding:.05rem .45rem;border-radius:999px;
    font-size:.74rem;font-weight:700;font-variant-numeric:tabular-nums;
}
.tp-veh-type.is-active .tp-veh-type__count{background:rgba(255,255,255,.18);color:#fff;}


/* Home page collections (tabs NEW / HIT / SALE / SEASON) */
.tp-collections{background:#fff;border:1px solid var(--tp-line);border-radius:var(--tp-radius);overflow:hidden;}
.tp-collections__tabs{
    display:flex;flex-wrap:wrap;gap:0;
    background:#f8fafc;border-bottom:1px solid var(--tp-line);
}
.tp-collections__tab{
    flex:1 1 auto;min-width:0;
    background:transparent;border:0;border-right:1px solid var(--tp-line);
    padding:.85rem 1rem;cursor:pointer;
    display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
    font-weight:600;font-size:.92rem;color:var(--tp-steel);
    transition:all .15s;letter-spacing:.01em;
}
.tp-collections__tab:last-child{border-right:0;}
.tp-collections__tab .bi{color:var(--brand-blue);font-size:1rem;}
.tp-collections__tab:hover{color:var(--brand-blue);background:#eef4fa;}
.tp-collections__tab.is-active{
    color:var(--brand-black);background:#fff;
    box-shadow:inset 0 -3px 0 var(--brand-blue-bright);
}
.tp-collections__count{
    background:#e2e8f0;color:var(--tp-steel);font-size:.72rem;font-weight:800;
    padding:.05rem .42rem;border-radius:999px;line-height:1.4;
}
.tp-collections__tab.is-active .tp-collections__count{background:var(--brand-blue-bright);color:#fff;}
.tp-collections__panel{display:none;padding:1.25rem;}
.tp-collections__panel.is-active{display:block;}
@media (max-width:576px){
    .tp-collections__tab{padding:.7rem .55rem;font-size:.82rem;}
    .tp-collections__tab span:not(.tp-collections__count){display:none;}
    .tp-collections__tab .bi{font-size:1.15rem;}
}


/* =================== Reviews (UGC) =================== */
.tp-stars{display:inline-flex;gap:1px;color:var(--brand-blue-bright);}
.tp-stars .bi{font-size:.95rem;}
.tp-card-rating{display:flex;align-items:center;gap:.35rem;margin-top:.35rem;font-size:.78rem;color:var(--tp-graphite);}
.tp-card-rating-count{color:#6b7280;}
.tp-rating-summary{display:inline-flex;align-items:center;gap:.4rem;font-size:.95rem;}
.tp-rating-summary .tp-stars .bi{font-size:1.1rem;}

.tp-reviews{background:#fff;border:1px solid var(--tp-line);border-radius:var(--tp-radius);padding:1.5rem;}
.tp-reviews-list{display:flex;flex-direction:column;gap:1rem;}
.tp-review{
    background:#f8fafc;border:1px solid var(--tp-line);border-radius:var(--tp-radius-sm);
    padding:1rem 1.1rem;
}
.tp-review-head{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:.5rem;margin-bottom:.5rem;}
.tp-review-author strong{color:var(--brand-black);}
.tp-review-text{margin:0 0 .5rem 0;line-height:1.55;color:#1f2937;}
.tp-review-photo img{max-width:160px;max-height:160px;border-radius:6px;border:1px solid var(--tp-line);}

/* Review form (one-time token landing) */
.tp-review-form{background:#fff;border:1px solid var(--tp-line);border-radius:var(--tp-radius);}
.tp-review-products{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:.5rem;}
.tp-review-product{cursor:pointer;display:block;}
.tp-review-product input[type=radio]{position:absolute;opacity:0;}
.tp-review-product-card{
    display:flex;gap:.75rem;align-items:center;
    border:2px solid var(--tp-line);border-radius:var(--tp-radius-sm);
    padding:.6rem;background:#fff;transition:border-color .15s,background .15s;
}
.tp-review-product input[type=radio]:checked + .tp-review-product-card{
    border-color:var(--brand-blue);background:#eef4fa;
}
.tp-review-product-photo{
    width:60px;height:60px;flex-shrink:0;border:1px solid var(--tp-line);border-radius:6px;
    overflow:hidden;display:flex;align-items:center;justify-content:center;background:#f3f4f6;color:#9ca3af;
}
.tp-review-product-photo img{width:100%;height:100%;object-fit:cover;}
.tp-review-product-info{flex:1;min-width:0;}

/* 5-star input — кликабельные звёзды на форме отзыва.
   Рисуем reverse, чтобы CSS-селектор `~` подсвечивал звезду слева. */
.tp-rating-input{display:inline-flex;flex-direction:row-reverse;font-size:2rem;}
.tp-rating-input input{display:none;}
.tp-rating-input label{color:#d1d5db;cursor:pointer;padding:0 2px;transition:color .1s;}
.tp-rating-input input:checked ~ label,
.tp-rating-input label:hover,
.tp-rating-input label:hover ~ label{color:var(--brand-blue-bright);}


/* =========== Spec table (карточка товара) =========== */
.tp-spec-table{width:100%;border-collapse:collapse;font-size:.9rem;}
.tp-spec-table tr{border-bottom:1px solid var(--tp-line);}
.tp-spec-table tr:last-child{border-bottom:0;}
.tp-spec-table .tp-spec-key{padding:.55rem 1rem;color:#6b7280;width:40%;background:#f8fafc;}
.tp-spec-table .tp-spec-val{padding:.55rem 1rem;color:var(--tp-graphite);}
.tp-spec-table .tp-mono{font-family:'JetBrains Mono','Courier New',monospace;font-size:.86rem;}
@media (max-width: 576px){
    .tp-spec-table .tp-spec-key{width:50%;font-size:.82rem;}
    .tp-spec-table .tp-spec-val{font-size:.82rem;}
}


/* ============================================================
   Phase 2 — карточка товара (armtek + ATI эталон)
   ============================================================ */

/* --- Длинный H1 + sub-line вместо плашек-бейджей --- */
.tp-product-head{
    background:#fff;border-bottom:1px solid var(--tp-line);
    padding:1.4rem 0 1rem;margin-bottom:1.2rem;
}
.tp-product-head h1{
    font-size:1.4rem;line-height:1.35;font-weight:700;color:var(--brand-black);
    margin:0 0 .6rem;letter-spacing:-.005em;
    max-width:980px;
}
/* Внутри H1 артикул и бренд рендерятся текстом — выделим их подсветкой,
   чтобы в длинной строке глаз сразу цеплялся за нужное. */
.tp-product-head h1 .h1-brand{color:var(--brand-blue);font-weight:700;}
.tp-product-head h1 .h1-article{
    font-family:var(--tp-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-weight:700;color:var(--brand-blue-bright);text-transform:uppercase;
    background:rgba(12,117,204,.06);padding:.05em .35em;border-radius:4px;
    font-size:.95em;letter-spacing:.01em;
}
@media (max-width:768px){
    .tp-product-head h1{font-size:1.1rem;line-height:1.3;}
}

/* Шильдики марок над H1 */
.tp-product-makes{
    display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:.7rem;
}
.tp-product-make{
    display:inline-flex;align-items:center;gap:.4rem;
    background:#fff;border:1px solid var(--tp-line);border-radius:999px;
    padding:.25rem .65rem .25rem .3rem;
    font-size:.8rem;font-weight:600;color:var(--brand-black);
    text-decoration:none;line-height:1.1;
    transition:border-color .15s,box-shadow .15s;
}
.tp-product-make:hover{
    color:var(--brand-blue-bright);border-color:var(--brand-blue-light);
    box-shadow:0 1px 4px rgba(12,117,204,0.12);
}
.tp-product-make img{
    width:24px;height:24px;object-fit:contain;flex-shrink:0;
}
.tp-product-make-mono{
    width:24px;height:24px;border-radius:50%;flex-shrink:0;
    background:var(--brand-blue);color:#fff;
    display:inline-flex;align-items:center;justify-content:center;
    font-size:.65rem;font-weight:700;letter-spacing:-.02em;
}
.tp-product-meta-row{
    margin-bottom:.4rem;
    display:flex;flex-wrap:wrap;gap:.5rem .9rem;align-items:center;
    font-size:.85rem;color:var(--tp-steel);
}
.tp-product-meta-row .tp-meta-item{
    display:inline-flex;align-items:baseline;gap:.4rem;
}
.tp-product-meta-row .tp-meta-label{
    color:var(--tp-steel);font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;
}
.tp-product-meta-row .tp-meta-val{color:var(--brand-black);font-weight:700;}
.tp-product-meta-row .tp-meta-val.tp-mono{
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.tp-product-meta-row a.tp-meta-val{color:var(--brand-blue);text-decoration:none;}
.tp-product-meta-row a.tp-meta-val:hover{color:var(--brand-blue-bright);text-decoration:underline;}
.tp-product-meta-row .tp-rating-summary{cursor:pointer;}

/* --- Tabs (Описание / Применимость / Аналоги / Отзывы) --- */
.tp-product-tabs{
    display:flex;gap:0;flex-wrap:wrap;
    border-bottom:1px solid var(--tp-line);
    margin:0 0 1.5rem;
}
.tp-product-tabs a{
    padding:.7rem 1.1rem;color:var(--tp-steel);font-weight:600;font-size:.92rem;
    text-decoration:none;border-bottom:2px solid transparent;transition:all .15s;
    display:inline-flex;align-items:center;gap:.4rem;
}
.tp-product-tabs a:hover{color:var(--brand-blue);}
.tp-product-tabs a.is-active{
    color:var(--brand-black);
    border-bottom-color:var(--brand-blue-bright);
}
.tp-product-tabs .tp-tab-count{
    background:#e2e8f0;color:var(--tp-steel);
    font-size:.7rem;font-weight:800;padding:.05rem .4rem;border-radius:999px;
    line-height:1.4;font-variant-numeric:tabular-nums;
}
.tp-product-tabs a.is-active .tp-tab-count{background:var(--brand-blue);color:#fff;}

/* --- Sticky правая колонка с ценой/CTA --- */
.tp-buy-rail{
    position:sticky;top:90px;
}
@media(max-width:991.98px){
    .tp-buy-rail{position:static !important;}
}
.tp-buy-sticky{
    background:#fff;border:1px solid var(--tp-line);border-radius:var(--tp-radius);
    padding:1.1rem 1.15rem;
    box-shadow:var(--tp-shadow-sm);
}
.tp-buy-sticky .tp-buy-price{
    font-size:1.85rem;font-weight:800;color:var(--brand-black);line-height:1;
}
.tp-buy-sticky .tp-buy-price--sale{color:#dc2626;}
.tp-buy-sticky .tp-buy-old{
    color:var(--tp-steel);text-decoration:line-through;font-size:.95rem;font-weight:600;
    margin-left:.4rem;
}
.tp-buy-sticky .tp-buy-discount{
    background:linear-gradient(135deg,#dc2626,#991b1b);color:#fff;
    font-weight:800;font-size:.72rem;line-height:1;padding:.18rem .42rem;
    border-radius:999px;letter-spacing:.04em;margin-left:.45rem;
    display:inline-block;vertical-align:middle;
}
.tp-buy-sticky .tp-buy-stock{margin:.55rem 0 .9rem;font-size:.88rem;}
.tp-buy-sticky .tp-buy-stock strong{color:var(--tp-green);}

/* qty stepper */
.tp-qty{
    display:inline-flex;align-items:center;border:1px solid var(--tp-line);
    border-radius:var(--tp-radius-sm);overflow:hidden;background:#fff;
}
.tp-qty button{
    background:#f8fafc;border:0;width:36px;height:38px;cursor:pointer;
    color:var(--tp-graphite);font-size:1.1rem;font-weight:700;
}
.tp-qty button:hover{background:var(--brand-blue);color:#fff;}
.tp-qty input{
    border:0;width:54px;height:38px;text-align:center;font-weight:700;
    font-size:1rem;color:var(--brand-black);outline:none;
    -moz-appearance:textfield;
}
.tp-qty input::-webkit-outer-spin-button,
.tp-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}

/* large primary CTA in sticky rail */
.tp-buy-cta{
    display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;
    background:var(--brand-blue);color:#fff;border:0;
    padding:.85rem 1.1rem;border-radius:var(--tp-radius-sm);
    font-size:1rem;font-weight:700;cursor:pointer;
    transition:background .15s;letter-spacing:.01em;
}
.tp-buy-cta:hover,.tp-buy-cta:focus{background:var(--brand-blue-bright);color:#fff;}
.tp-buy-cta .bi{font-size:1.1rem;}

/* secondary buttons (избранное/поделиться) under CTA */
.tp-buy-aux{display:flex;gap:.5rem;margin-top:.7rem;}
.tp-buy-aux .tp-aux-btn{
    flex:1;display:inline-flex;align-items:center;justify-content:center;gap:.35rem;
    background:#f8fafc;border:1px solid var(--tp-line);
    padding:.55rem .65rem;border-radius:var(--tp-radius-sm);
    font-size:.82rem;font-weight:600;color:var(--tp-steel);cursor:pointer;
    text-decoration:none;
}
.tp-buy-aux .tp-aux-btn:hover{border-color:var(--brand-blue);color:var(--brand-blue);background:#f4f8fc;}

/* "Best offer" callout — карточка лучшего предложения сразу после H1 + tabs */
.tp-best-offer{
    background:#fff;border:1px solid var(--tp-line);border-left:4px solid var(--brand-blue-bright);
    border-radius:var(--tp-radius);padding:1rem 1.15rem;margin-bottom:1rem;
}
.tp-best-offer-head{
    font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;
    color:var(--brand-blue);font-weight:800;margin-bottom:.35rem;
    display:inline-flex;align-items:center;gap:.35rem;
}
.tp-best-offer-row{display:flex;align-items:center;justify-content:space-between;gap:.85rem;flex-wrap:wrap;}
.tp-best-offer-warehouse{font-weight:700;color:var(--brand-black);font-size:.95rem;line-height:1.3;}
.tp-best-offer-warehouse small{color:var(--tp-steel);font-weight:500;display:block;}
.tp-best-offer-price{font-size:1.6rem;font-weight:800;color:var(--brand-black);line-height:1;}
.tp-best-offer-price--sale{color:#dc2626;}

/* "Показать ещё N предложений" toggle */
.tp-offers-toggle{
    background:transparent;border:0;color:var(--brand-blue);font-weight:600;
    padding:.5rem 0;cursor:pointer;font-size:.9rem;display:inline-flex;align-items:center;gap:.35rem;
}
.tp-offers-toggle:hover{color:var(--brand-blue-bright);}
.tp-offers-extra{display:none;}
.tp-offers-extra.is-open{display:block;}

/* "Основная информация" — два столбца key/value (armtek-style) */
.tp-key-info{
    background:#fff;border:1px solid var(--tp-line);border-radius:var(--tp-radius);
    overflow:hidden;
}
.tp-key-info table{width:100%;border-collapse:collapse;}
.tp-key-info th,.tp-key-info td{
    padding:.6rem .95rem;font-size:.88rem;text-align:left;
    border-bottom:1px solid var(--tp-line);vertical-align:middle;
}
.tp-key-info tr:last-child th,
.tp-key-info tr:last-child td{border-bottom:0;}
.tp-key-info th{
    color:var(--tp-steel);font-weight:500;width:42%;background:#fafbfd;
    text-transform:none;letter-spacing:0;font-size:.85rem;
}
.tp-key-info td{color:var(--brand-black);font-weight:600;}
.tp-key-info td a{color:var(--brand-blue);font-weight:600;}
@media (max-width:576px){
    .tp-key-info th{width:50%;font-size:.8rem;}
    .tp-key-info td{font-size:.82rem;}
}

/* --- Big analogues table (ATI-style) --- */
.tp-analogues-table{width:100%;background:#fff;border:1px solid var(--tp-line);border-radius:var(--tp-radius);overflow:hidden;border-collapse:separate;border-spacing:0;}
.tp-analogues-table thead th{
    background:#f8fafc;color:var(--brand-black);
    font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700;
    padding:.65rem .75rem;text-align:left;border-bottom:1px solid var(--tp-line);
    white-space:nowrap;
}
.tp-analogues-table tbody td{padding:.65rem .75rem;border-top:1px solid var(--tp-line);vertical-align:middle;font-size:.88rem;}
.tp-analogues-table tbody tr:hover{background:#f8fafc;}
.tp-analogues-table .tp-an-photo{width:60px;height:60px;flex-shrink:0;border:1px solid var(--tp-line);border-radius:6px;background:#f8fafc;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.tp-analogues-table .tp-an-photo img{width:100%;height:100%;object-fit:contain;padding:2px;}
.tp-analogues-table .tp-an-photo .bi{font-size:1.4rem;color:var(--tp-steel-soft);}
.tp-analogues-table .tp-an-brand{font-weight:700;color:var(--brand-blue);font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;}
.tp-analogues-table .tp-an-art{font-family:'Courier New',monospace;font-weight:700;color:var(--tp-graphite);font-size:.85rem;}
.tp-analogues-table .tp-an-price{font-weight:800;color:var(--brand-black);font-size:1rem;white-space:nowrap;}
.tp-analogues-table .tp-an-price--sale{color:#dc2626;}
.tp-analogues-table .tp-an-old{color:var(--tp-steel);text-decoration:line-through;font-weight:600;font-size:.78rem;margin-left:.25rem;}
.tp-analogues-table .tp-an-stock{font-size:.78rem;color:var(--tp-green);font-weight:700;}
.tp-analogues-table .tp-an-stock--out{color:var(--tp-steel);font-weight:600;}
.tp-analogues-table .tp-an-name{color:var(--tp-graphite);font-weight:500;line-height:1.35;text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.tp-analogues-table .tp-an-name:hover{color:var(--brand-blue);}
@media (max-width:768px){
    .tp-analogues-table .tp-an-photo{width:48px;height:48px;}
    .tp-analogues-table thead th,
    .tp-analogues-table tbody td{padding:.5rem .55rem;font-size:.82rem;}
}

/* --- Ratings histogram (5/4/3/2/1 prog bars) --- */
.tp-rating-overview{
    background:#fff;border:1px solid var(--tp-line);border-radius:var(--tp-radius);
    padding:1.1rem 1.25rem;margin-bottom:1.25rem;
    display:grid;grid-template-columns:160px 1fr;gap:1.5rem;align-items:center;
}
@media (max-width:576px){
    .tp-rating-overview{grid-template-columns:1fr;gap:1rem;}
}
.tp-rating-big{text-align:center;}
.tp-rating-big-num{font-size:3rem;font-weight:800;color:var(--brand-black);line-height:1;}
.tp-rating-big-stars{margin:.4rem 0;}
.tp-rating-big-count{font-size:.82rem;color:var(--tp-steel);}
.tp-rating-bars{display:flex;flex-direction:column;gap:.35rem;}
.tp-rating-bar{display:grid;grid-template-columns:24px 1fr 32px;gap:.5rem;align-items:center;font-size:.82rem;}
.tp-rating-bar-label{color:var(--tp-steel);font-weight:600;text-align:right;}
.tp-rating-bar-track{
    height:8px;background:#e2e8f0;border-radius:999px;overflow:hidden;
}
.tp-rating-bar-fill{
    height:100%;background:var(--brand-blue-bright);border-radius:999px;
    transition:width .3s;min-width:0;
}
.tp-rating-bar-count{color:var(--tp-steel);font-size:.78rem;text-align:left;font-variant-numeric:tabular-nums;}

/* --- Related tags (сопутствующие категории) --- */
.tp-related-tags{
    display:flex;flex-wrap:wrap;gap:.4rem;margin:.5rem 0 0;
}
.tp-related-tag{
    display:inline-flex;align-items:center;gap:.3rem;
    background:#fff;border:1px solid var(--tp-line);
    padding:.35rem .75rem;border-radius:999px;
    font-size:.82rem;font-weight:600;color:var(--tp-graphite);
    text-decoration:none;transition:all .15s;
}
.tp-related-tag:hover{border-color:var(--brand-blue);background:var(--brand-blue);color:#fff;}
.tp-related-tag .bi{font-size:.82rem;color:var(--brand-blue);}
.tp-related-tag:hover .bi{color:#fff;}

/* --- Section anchor target offset (sticky header compensation) --- */
.tp-section-anchor{scroll-margin-top:80px;}


/* ============================================================
   Phase 3 — главная (ATI tab-bar + truckdrive USP + brand tiles)
   ============================================================ */

/* --- Tab-bar по типу техники + сетка лого марок --- */
.tp-vehicle-bar{
    background:#fff;border:1px solid var(--tp-line);
    border-radius:var(--tp-radius);overflow:hidden;
    box-shadow:var(--tp-shadow-sm);
}
.tp-vehicle-bar__tabs{
    display:flex;flex-wrap:wrap;gap:0;
    background:linear-gradient(135deg,var(--brand-black) 0%,#1c2c38 100%);
    border-bottom:1px solid var(--tp-line);
}
.tp-vehicle-bar__tab{
    flex:1 1 auto;min-width:120px;
    background:transparent;border:0;border-right:1px solid rgba(255,255,255,.08);
    padding:.85rem 1rem;cursor:pointer;
    display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
    font-weight:600;font-size:.9rem;color:#cbd5e1;
    transition:all .15s;letter-spacing:.01em;
}
.tp-vehicle-bar__tab:last-child{border-right:0;}
.tp-vehicle-bar__tab .bi{color:var(--brand-blue-light);font-size:1.1rem;}
.tp-vehicle-bar__tab:hover{color:#fff;background:rgba(255,255,255,.04);}
.tp-vehicle-bar__tab.is-active{
    color:#fff;background:rgba(12,117,204,.18);
    box-shadow:inset 0 -3px 0 var(--brand-blue-bright);
}
.tp-vehicle-bar__tab.is-active .bi{color:var(--brand-blue-bright);}
.tp-vehicle-bar__count{
    background:rgba(255,255,255,.12);color:#fff;
    font-size:.7rem;font-weight:800;padding:.05rem .42rem;border-radius:999px;
    line-height:1.4;font-variant-numeric:tabular-nums;
}
.tp-vehicle-bar__panel{display:none;padding:1.25rem;}
.tp-vehicle-bar__panel.is-active{display:block;}
.tp-vehicle-bar__grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
    gap:.65rem;
}
.tp-vehicle-bar__item{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    background:#fff;border:1px solid var(--tp-line);border-radius:var(--tp-radius-sm);
    padding:.85rem .5rem;text-decoration:none;color:var(--brand-black);
    transition:all .15s;text-align:center;min-height:90px;
    position:relative;
}
.tp-vehicle-bar__item:hover{
    border-color:var(--brand-blue);background:#f4f8fc;
    transform:translateY(-1px);box-shadow:var(--tp-shadow-sm);
}
.tp-vehicle-bar__item-logo{
    height:50px;display:flex;align-items:center;justify-content:center;
    margin-bottom:.4rem;
}
.tp-vehicle-bar__item-logo img{max-height:50px;max-width:90%;object-fit:contain;}
.tp-vehicle-bar__item-fallback{
    width:44px;height:44px;border-radius:50%;
    background:var(--brand-blue);color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-weight:700;font-size:.95rem;letter-spacing:-.02em;
}
.tp-vehicle-bar__item-name{font-weight:700;font-size:.85rem;line-height:1.2;color:var(--brand-black);}
.tp-vehicle-bar__item-cnt{
    color:var(--tp-steel);font-size:.72rem;font-weight:600;margin-top:.2rem;
}
@media (max-width:576px){
    .tp-vehicle-bar__tab{padding:.7rem .55rem;font-size:.78rem;}
    .tp-vehicle-bar__tab span:not(.tp-vehicle-bar__count){display:none;}
    .tp-vehicle-bar__tab .bi{font-size:1.2rem;}
    .tp-vehicle-bar__grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:.5rem;}
    .tp-vehicle-bar__panel{padding:1rem;}
}

/* --- KPI band: «4 цифры на брендовом синем фоне» (truckdrive USP) --- */
.tp-kpi-band{
    background:linear-gradient(135deg,var(--brand-blue) 0%,#234b6f 100%);
    color:#fff;
    padding:2.4rem 0;
    position:relative;overflow:hidden;
}
.tp-kpi-band::before{
    content:"";position:absolute;inset:0;
    background:radial-gradient(800px 200px at 80% 10%, rgba(12,117,204,.4), transparent 70%);
    pointer-events:none;
}
.tp-kpi-grid{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:1.5rem;position:relative;z-index:1;
}
.tp-kpi{
    display:flex;align-items:flex-start;gap:.9rem;
}
.tp-kpi-icon{
    flex-shrink:0;
    width:50px;height:50px;border-radius:var(--tp-radius-sm);
    background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);
    display:flex;align-items:center;justify-content:center;
    color:#fff;font-size:1.4rem;
}
.tp-kpi-num{font-size:2rem;font-weight:800;line-height:1;letter-spacing:-.02em;}
.tp-kpi-lbl{color:#cbd5e1;font-size:.88rem;font-weight:500;margin-top:.3rem;line-height:1.35;}
@media (max-width:576px){
    .tp-kpi-band{padding:1.6rem 0;}
    .tp-kpi-num{font-size:1.5rem;}
}

/* --- Большие плашки брендов запчастей 6×2 (вместо мелких pill'ов) --- */
.tp-brand-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
    gap:.75rem;
}
.tp-brand-tile{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    background:#fff;border:1px solid var(--tp-line);border-radius:var(--tp-radius);
    padding:1.1rem .8rem;text-decoration:none;
    transition:all .15s;min-height:110px;text-align:center;
    position:relative;
}
.tp-brand-tile:hover{
    border-color:var(--brand-blue);background:#f8fbff;
    transform:translateY(-2px);box-shadow:var(--tp-shadow);
}
.tp-brand-tile-logo{
    height:56px;margin-bottom:.5rem;
    display:flex;align-items:center;justify-content:center;
}
.tp-brand-tile-logo img{max-height:56px;max-width:100%;object-fit:contain;}
.tp-brand-tile-name{font-weight:800;font-size:.92rem;color:var(--brand-black);letter-spacing:.02em;line-height:1.2;}
.tp-brand-tile-cnt{
    color:var(--tp-steel);font-size:.74rem;font-weight:600;margin-top:.25rem;
}
.tp-brand-tile-fallback{
    font-weight:800;font-size:1.15rem;color:var(--brand-blue);letter-spacing:.04em;
    line-height:1;
}

/* --- Сертификаты на главной (компактная плашка) и /certificates --- */
.tp-cert-strip{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.75rem;
}
.tp-cert-mini{
    display:flex;flex-direction:column;align-items:center;gap:.4rem;
    background:#fff;border:1px solid var(--tp-line);border-radius:var(--tp-radius-sm);
    padding:.6rem .5rem;text-decoration:none;color:var(--brand-black);
    transition:all .18s;
}
.tp-cert-mini:hover{
    border-color:var(--brand-blue);transform:translateY(-2px);
    box-shadow:var(--tp-shadow);color:var(--brand-blue);
}
.tp-cert-mini img{
    width:100%;aspect-ratio:3/4;object-fit:contain;
    background:#f8fafc;border-radius:4px;
}
.tp-cert-mini .bi{font-size:2.4rem;color:var(--brand-blue);}
.tp-cert-mini__brand{
    font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
    text-align:center;line-height:1.2;
}

/* /certificates — большая сетка */
.tp-cert-grid{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.2rem;
}
.tp-cert-card{
    background:#fff;border:1px solid var(--tp-line);border-radius:var(--tp-radius);
    overflow:hidden;display:flex;flex-direction:column;
    transition:all .2s;
}
.tp-cert-card:hover{transform:translateY(-3px);box-shadow:var(--tp-shadow);border-color:var(--brand-blue-light);}
.tp-cert-card__photo{
    display:block;background:#f8fafc;
    aspect-ratio:3/4;overflow:hidden;
}
.tp-cert-card__photo img{
    width:100%;height:100%;object-fit:contain;
    transition:transform .25s;
}
.tp-cert-card:hover .tp-cert-card__photo img{transform:scale(1.04);}
.tp-cert-card__body{padding:.85rem 1rem 1rem;display:flex;flex-direction:column;gap:.4rem;flex:1;}
.tp-cert-card__brand{
    font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
    color:var(--brand-blue);
}
.tp-cert-card__title{
    font-size:1rem;font-weight:700;line-height:1.3;color:var(--brand-black);margin:0;
}
.tp-cert-card__desc{
    font-size:.85rem;color:var(--tp-steel);margin:0;line-height:1.4;
}
.tp-cert-card__valid{
    font-size:.78rem;color:var(--tp-steel);display:inline-flex;align-items:center;gap:.3rem;
    margin-top:auto;
}
.tp-cert-card__btn{
    display:inline-flex;align-items:center;gap:.4rem;
    background:var(--brand-blue);color:#fff;text-decoration:none;
    padding:.45rem .85rem;border-radius:999px;
    font-size:.82rem;font-weight:600;align-self:flex-start;
    transition:background .15s;
}
.tp-cert-card__btn:hover{background:var(--brand-blue-bright);color:#fff;}

/* --- Длинный SEO-текст под футером главной --- */
.tp-home-seo{
    background:#fff;border-top:1px solid var(--tp-line);
    padding:2.5rem 0;
}
.tp-home-seo-body{
    max-width:920px;margin:0 auto;color:var(--tp-graphite);line-height:1.7;
}
.tp-home-seo-body h2{
    font-size:1.35rem;color:var(--brand-black);margin:0 0 1rem;font-weight:800;
}
.tp-home-seo-body h3{
    font-size:1.1rem;color:var(--brand-black);margin:1.4rem 0 .6rem;font-weight:700;
}
.tp-home-seo-body p{margin:0 0 .9rem;}
.tp-home-seo-body ul{padding-left:1.2rem;margin:0 0 1rem;}
.tp-home-seo-body ul li{margin-bottom:.3rem;}
.tp-home-seo-body a{color:var(--brand-blue);}
.tp-home-seo-body a:hover{color:var(--brand-blue-bright);}


/* ============================================================
   Phase 4 — категория (armtek-style фильтры + list-view)
   ============================================================ */

/* --- Top hub: «Подбор по вашему грузовику» --- */
.tp-cat-hub{
    background:linear-gradient(135deg,var(--brand-blue) 0%,#234b6f 100%);
    color:#fff;
    border-radius:var(--tp-radius);
    padding:1.1rem 1.35rem;
    display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
    margin-bottom:1.25rem;
    position:relative;overflow:hidden;
    text-decoration:none;
}
.tp-cat-hub:hover{text-decoration:none;color:#fff;}
.tp-cat-hub::before{
    content:"";position:absolute;right:-30px;top:-30px;width:200px;height:200px;
    background:radial-gradient(var(--brand-blue-bright) 0%, transparent 65%);
    opacity:.25;pointer-events:none;
}
.tp-cat-hub__icon{
    flex-shrink:0;
    width:44px;height:44px;border-radius:var(--tp-radius-sm);
    background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);
    display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.4rem;
}
.tp-cat-hub__body{flex:1;min-width:200px;}
.tp-cat-hub__title{font-weight:800;font-size:1rem;line-height:1.25;color:#fff;}
.tp-cat-hub__sub{color:#cbd5e1;font-size:.85rem;margin-top:.15rem;}
.tp-cat-hub__cta{
    display:inline-flex;align-items:center;gap:.4rem;
    background:#fff;color:var(--brand-blue);
    padding:.55rem 1rem;border-radius:var(--tp-radius-sm);
    font-weight:700;font-size:.88rem;text-decoration:none;
    transition:all .15s;
}
.tp-cat-hub__cta:hover{background:var(--brand-blue-bright);color:#fff;}

/* VIN-вариант — синий брендовый градиент. Текст и CTA уже инвертированы. */
.tp-cat-hub--vin{
    background:linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-blue-dark, #0a5ea3) 100%);
    border-color:var(--brand-blue);
}
.tp-cat-hub--vin .tp-cat-hub__icon{background:rgba(255,255,255,.15);color:#fff;border-color:rgba(255,255,255,.18);}
.tp-cat-hub--vin .tp-cat-hub__title{color:#fff;}
.tp-cat-hub--vin .tp-cat-hub__sub{color:rgba(255,255,255,.85);}
.tp-cat-hub--vin .tp-cat-hub__cta{background:#fff;color:var(--brand-blue);}
.tp-cat-hub--vin .tp-cat-hub__cta:hover{background:var(--brand-blue-bright);color:#fff;}

/* Mobile (≤720px): сжимаем до одной полоски — две кнопки-иконки в ряд.
   Описание и большие CTA скрываются, остаются только иконка + короткая
   подпись + chevron справа. Высота полоски ~52px вместо двух блоков по
   ~280px каждый. */

/* Desktop (≥721px): wrap раскладывается двумя колонками 7:5 как было раньше */
@media (min-width: 721px){
    .tp-cat-hub-wrap{
        display:grid;
        grid-template-columns: 7fr 5fr;
        gap:1rem;
    }
    .tp-cat-hub-wrap .tp-cat-hub{margin-bottom:0;}
}

@media (max-width: 720px){
    /* Контейнер двух плашек — на мобиле оставляем ТОЛЬКО VIN-кнопку.
       Кнопка «По марке» дублирует сайдбарный фильтр «Марка техники»
       (он показывает марки именно этой категории + counts), поэтому на
       мобиле её прячем — иначе тавтология. На десктопе обе видны как раньше. */
    .tp-cat-hub-wrap{
        display:block;
        margin-bottom:1rem;
    }
    .tp-cat-hub-wrap .tp-cat-hub--vehicles{display:none;}
    /* Сами плашки — компактные, иконка + название + chevron */
    .tp-cat-hub{
        padding:.7rem .85rem;
        margin-bottom:0;
        display:flex;align-items:center;gap:.65rem;flex-wrap:nowrap;
        border-radius:var(--tp-radius-sm);
    }
    .tp-cat-hub::before{display:none;} /* убираем декоративный radial overlay */
    .tp-cat-hub__icon{
        width:34px;height:34px;font-size:1.05rem;flex-shrink:0;
    }
    .tp-cat-hub__title{
        font-size:.85rem;font-weight:700;
        line-height:1.2;
        white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    }
    /* Описание и большая CTA-плашка скрываются — переход осуществляется
       по клику на всю карточку (.tp-cat-hub это <a>). */
    .tp-cat-hub__sub,
    .tp-cat-hub__cta{display:none;}
    /* На месте CTA выводим маленький chevron-индикатор */
    .tp-cat-hub::after{
        content:"\f285"; /* bi-chevron-right из Bootstrap Icons font */
        font-family:'bootstrap-icons';font-weight:400;
        font-size:.85rem;color:rgba(255,255,255,.85);
        margin-left:auto;flex-shrink:0;
    }
    /* VIN-вариант: тот же иконочный paзмер, цвет уже белый */
    .tp-cat-hub--vin::after{color:rgba(255,255,255,.95);}
}

/* --- Filter sidebar --- */
.tp-filters{position:sticky;top:80px;}
.tp-filter-card{
    background:#fff;border:1px solid var(--tp-line);border-radius:var(--tp-radius);
    margin-bottom:1rem;overflow:hidden;
}
.tp-filter-card__head{
    padding:.6rem .9rem;background:#f8fafc;border-bottom:1px solid var(--tp-line);
    font-size:.75rem;font-weight:700;color:var(--brand-black);
    text-transform:uppercase;letter-spacing:.06em;
    display:flex;align-items:center;justify-content:space-between;gap:.4rem;
}
.tp-filter-card__head .bi{color:var(--brand-blue);margin-right:.3rem;}
.tp-filter-card__body{padding:.5rem .9rem .85rem;max-height:340px;overflow-y:auto;}
.tp-filter-list{list-style:none;padding:0;margin:0;}
.tp-filter-list li{margin:0;}
.tp-filter-list a{
    display:flex;align-items:center;justify-content:space-between;gap:.5rem;
    padding:.32rem 0;color:var(--tp-graphite);text-decoration:none;font-size:.85rem;
    border-bottom:1px solid #f1f5f9;
    transition:color .15s;
}
.tp-filter-list li:last-child a{border-bottom:0;}
.tp-filter-list a:hover{color:var(--brand-blue);}
.tp-filter-list a.is-active{color:var(--brand-blue);font-weight:700;}
.tp-filter-list a.is-active::before{content:"✓";color:var(--brand-blue-bright);margin-right:.35rem;}
.tp-filter-list .tp-filter-count{
    color:var(--tp-steel);font-size:.74rem;font-weight:600;font-variant-numeric:tabular-nums;
}
.tp-filter-list a.is-active .tp-filter-count{color:var(--brand-blue);}

/* Active filter pills with × on top of result list */
.tp-filter-pills{
    display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.85rem;align-items:center;
}
.tp-filter-pills__label{font-size:.78rem;font-weight:600;color:var(--tp-steel);}
.tp-filter-pill{
    display:inline-flex;align-items:center;gap:.35rem;
    background:var(--brand-blue);color:#fff;
    padding:.25rem .55rem .25rem .65rem;border-radius:999px;
    font-size:.78rem;font-weight:600;text-decoration:none;
}
.tp-filter-pill:hover{background:var(--brand-blue-bright);color:#fff;}
.tp-filter-pill .bi{font-size:.85rem;}
.tp-filter-pill__clear{
    color:var(--tp-steel);font-size:.78rem;font-weight:600;text-decoration:none;
    margin-left:auto;
}
.tp-filter-pill__clear:hover{color:var(--tp-red);}

/* In-stock chip toggle (one-click) */
.tp-in-stock-chip{
    display:inline-flex;align-items:center;gap:.4rem;
    background:#fff;border:1px solid var(--tp-line);
    padding:.45rem .85rem;border-radius:var(--tp-radius-sm);
    font-size:.85rem;font-weight:600;color:var(--tp-graphite);
    text-decoration:none;cursor:pointer;
}
.tp-in-stock-chip:hover{border-color:var(--brand-blue);color:var(--brand-blue);}
.tp-in-stock-chip.is-active{
    background:var(--tp-green-soft);border-color:var(--tp-green);color:#166534;
}
.tp-in-stock-chip .bi{font-size:.95rem;}

/* --- Toolbar (sort + view-switch) --- */
.tp-cat-toolbar{
    display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.6rem;
    margin-bottom:1rem;
}
.tp-cat-toolbar__count{
    font-size:.85rem;color:var(--tp-steel);
}
.tp-cat-toolbar__count strong{color:var(--brand-black);}
.tp-cat-toolbar__right{display:flex;gap:.5rem;align-items:center;}

.tp-sort-select{
    border:1px solid var(--tp-line);border-radius:var(--tp-radius-sm);
    background:#fff;padding:.4rem .7rem;font-size:.85rem;font-weight:600;
    color:var(--brand-black);cursor:pointer;
}
.tp-sort-select:focus{border-color:var(--brand-blue);outline:none;box-shadow:0 0 0 .2rem rgba(42,92,135,.18);}

.tp-view-switch{
    display:inline-flex;border:1px solid var(--tp-line);border-radius:var(--tp-radius-sm);
    overflow:hidden;background:#fff;
}
.tp-view-switch a{
    padding:.42rem .65rem;color:var(--tp-steel);font-size:1rem;text-decoration:none;
    border-right:1px solid var(--tp-line);
    transition:all .15s;
}
.tp-view-switch a:last-child{border-right:0;}
.tp-view-switch a.is-active{background:var(--brand-blue);color:#fff;}
.tp-view-switch a:hover:not(.is-active){background:#f4f8fc;color:var(--brand-blue);}

/* --- List view: armtek-style horizontal product row --- */
.tp-product-row{
    background:#fff;border:1px solid var(--tp-line);border-radius:var(--tp-radius);
    padding:.85rem 1.1rem;
    display:grid;
    grid-template-columns:96px 1fr 220px;gap:1rem;
    align-items:center;margin-bottom:.6rem;
    transition:border-color .15s,box-shadow .15s;
}
.tp-product-row:hover{border-color:var(--brand-blue);box-shadow:var(--tp-shadow-sm);}
.tp-product-row__photo{
    width:96px;height:96px;flex-shrink:0;border:1px solid var(--tp-line);
    border-radius:var(--tp-radius-sm);background:#f8fafc;
    display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.tp-product-row__photo img{max-width:100%;max-height:100%;object-fit:contain;padding:4px;}
.tp-product-row__photo .bi{font-size:1.7rem;color:var(--tp-steel-soft);}
.tp-product-row__info{min-width:0;display:flex;flex-direction:column;gap:.25rem;}
.tp-product-row__brand{
    font-size:.7rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
    color:var(--brand-blue);
}
.tp-product-row__art{
    font-family:'Courier New',monospace;font-weight:700;font-size:.78rem;color:var(--tp-graphite);
    margin-left:.5rem;
}
.tp-product-row__name{
    color:var(--tp-graphite);text-decoration:none;font-size:.95rem;font-weight:600;line-height:1.35;
    display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.tp-product-row__name:hover{color:var(--brand-blue);}
.tp-product-row__meta{
    display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;
    font-size:.8rem;color:var(--tp-steel);
}
.tp-product-row__meta .tp-stock-pill{font-size:.7rem;}
.tp-product-row__buy{
    text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:.5rem;
}
.tp-product-row__price{font-size:1.25rem;font-weight:800;color:var(--brand-black);line-height:1;}
.tp-product-row__price--sale{color:#dc2626;}
.tp-product-row__old{color:var(--tp-steel);text-decoration:line-through;font-size:.78rem;font-weight:600;margin-left:.3rem;}
.tp-product-row__cta{
    display:inline-flex;align-items:center;gap:.35rem;
    background:var(--brand-blue);color:#fff;border:0;
    padding:.45rem .9rem;border-radius:var(--tp-radius-sm);
    font-size:.85rem;font-weight:700;cursor:pointer;text-decoration:none;
}
.tp-product-row__cta:hover{background:var(--brand-blue-bright);color:#fff;}

@media (max-width:768px){
    .tp-product-row{
        grid-template-columns:72px 1fr;
        gap:.7rem;padding:.7rem .85rem;
    }
    .tp-product-row__photo{width:72px;height:72px;}
    .tp-product-row__buy{
        grid-column:1 / -1;
        flex-direction:row;justify-content:space-between;align-items:center;
        border-top:1px solid var(--tp-line);padding-top:.55rem;text-align:left;
    }
}

/* --- SEO body card with иконка H2 --- */
.tp-seo-body-card{
    background:#fff;border:1px solid var(--tp-line);border-radius:var(--tp-radius);
    padding:1.5rem 1.75rem;margin-top:1.5rem;
    box-shadow:var(--tp-shadow-sm);
}
.tp-seo-body-card h2{
    font-size:1.3rem;color:var(--brand-black);font-weight:800;margin:0 0 .85rem;
    display:flex;align-items:center;gap:.5rem;
}
.tp-seo-body-card h2 .bi{color:var(--brand-blue-bright);}
.tp-seo-body-card h3{font-size:1.05rem;color:var(--brand-black);margin:1.2rem 0 .55rem;font-weight:700;}
.tp-seo-body-card p{margin:0 0 .85rem;line-height:1.7;color:var(--tp-graphite);}
.tp-seo-body-card ul,.tp-seo-body-card ol{padding-left:1.2rem;margin:0 0 .85rem;}
.tp-seo-body-card a{color:var(--brand-blue);}
.tp-seo-body-card a:hover{color:var(--brand-blue-bright);}
@media (max-width:576px){
    .tp-seo-body-card{padding:1.1rem 1.15rem;}
}


/* ============================================================
   Phase 5 — каталог-листинг (ATI-style grid 5-в-ряд с большими фото)
   ============================================================ */

.tp-cat-photo-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
    gap:1rem;
}
.tp-cat-photo-tile{
    background:#fff;border:1px solid var(--tp-line);border-radius:var(--tp-radius);
    overflow:hidden;text-decoration:none;color:var(--brand-black);
    display:flex;flex-direction:column;height:100%;
    transition:all .2s;
}
.tp-cat-photo-tile:hover{
    border-color:var(--brand-blue);transform:translateY(-2px);
    box-shadow:var(--tp-shadow);color:var(--brand-blue);
}
.tp-cat-photo-tile__photo{
    aspect-ratio:5/3;background:#f4f7fa;
    display:flex;align-items:center;justify-content:center;overflow:hidden;
    border-bottom:1px solid var(--tp-line);
    position:relative;
}
.tp-cat-photo-tile__photo img{
    width:100%;height:100%;object-fit:contain;
    transition:transform .3s;
}
.tp-cat-photo-tile:hover .tp-cat-photo-tile__photo img{transform:scale(1.04);}
.tp-cat-photo-tile__photo .bi{font-size:2.4rem;color:var(--brand-blue-light);}
.tp-cat-photo-tile__photo--bg{
    background:linear-gradient(135deg,var(--brand-black) 0%,#1c2c38 100%);
    color:#fff;
}
.tp-cat-photo-tile__photo--bg .bi{color:var(--brand-blue-light);font-size:3rem;}
.tp-cat-photo-tile__body{
    padding:.85rem 1rem;display:flex;flex-direction:column;gap:.2rem;flex:1;
    align-items:center;text-align:center;
}
.tp-cat-photo-tile__name{
    font-weight:700;font-size:.97rem;color:var(--brand-black);line-height:1.3;
}
.tp-cat-photo-tile__cnt{
    color:var(--tp-steel);font-size:.78rem;font-weight:600;
}
.tp-cat-photo-tile:hover .tp-cat-photo-tile__name{color:var(--brand-blue);}
@media (max-width:576px){
    .tp-cat-photo-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.6rem;}
    .tp-cat-photo-tile__name{font-size:.88rem;}
}


/* ============================================================
   Phase 6 — sticky promo banner + scroll-top
   ============================================================ */

/* Sticky home banner — узкая плашка под top-strip с акцией */
.tp-promo-strip{
    background:linear-gradient(90deg,var(--brand-blue) 0%,var(--brand-blue-bright) 100%);
    color:#fff;
    padding:.45rem 0;
    font-size:.86rem;font-weight:600;
    position:relative;
    box-shadow:0 1px 0 rgba(0,0,0,.05);
}
.tp-promo-strip__inner{
    display:flex;align-items:center;justify-content:center;gap:.6rem;flex-wrap:wrap;
    padding-right:2rem;
}
.tp-promo-strip__emoji{font-size:1rem;flex-shrink:0;}
.tp-promo-strip a{
    color:#fff;text-decoration:underline;text-decoration-thickness:1px;
    text-underline-offset:2px;font-weight:700;
}
.tp-promo-strip a:hover{color:#fff;text-decoration-thickness:2px;}
.tp-promo-strip__close{
    position:absolute;top:50%;right:.85rem;transform:translateY(-50%);
    background:transparent;border:0;color:#fff;
    font-size:1.1rem;cursor:pointer;line-height:1;padding:.25rem;opacity:.8;
}
.tp-promo-strip__close:hover{opacity:1;}

/* Scroll-to-top button — встроена в helpbar справа.
   Место под кнопку зарезервировано всегда (display:inline-flex), чтобы появление
   не сдвигало соседние кнопки. Видимость управляется через opacity/visibility. */
.tp-scroll-top{
    width:42px;height:42px;border-radius:50%;
    border:1px solid var(--brand-blue);background:var(--brand-blue);color:#fff;
    display:inline-flex;align-items:center;justify-content:center;
    cursor:pointer;font-size:1.05rem;flex-shrink:0;
    opacity:0;visibility:hidden;pointer-events:none;
    transition:background .15s,color .15s,border-color .15s,opacity .18s ease,visibility .18s ease;
}
.tp-scroll-top.is-visible{opacity:1;visibility:visible;pointer-events:auto;}
.tp-scroll-top:hover{background:#fff;color:var(--brand-blue);border-color:var(--brand-blue);}

@media (max-width:576px){
    .tp-scroll-top{width:38px;height:38px;font-size:1rem;}
}


/* ---------- long-tail SEO pages (help / glossary / guides / static) ---------- */
.tp-static-page{font-size:1rem;line-height:1.6;color:var(--tp-graphite);}
.tp-static-page p{margin-bottom:1rem;}
.tp-static-page h2{font-size:1.4rem;margin:2rem 0 .8rem;color:var(--brand-black);font-weight:700;}
.tp-static-page h3{font-size:1.15rem;margin:1.5rem 0 .6rem;color:var(--brand-black);font-weight:700;}
.tp-static-page ul,.tp-static-page ol{margin:0 0 1rem 1.2rem;}
.tp-static-page li{margin-bottom:.4rem;}
.tp-static-page a{color:var(--brand-blue);text-decoration:underline;}
.tp-static-page a:hover{color:var(--brand-blue-bright);}

.tp-help-card{
    display:block;background:#fff;border:1px solid var(--tp-line);border-radius:var(--tp-radius);
    padding:1.2rem;text-decoration:none;color:inherit;height:100%;transition:all .15s;
}
.tp-help-card:hover{border-color:var(--brand-blue);box-shadow:var(--tp-shadow-sm);transform:translateY(-1px);}
.tp-help-card__title{font-size:1.05rem;font-weight:700;color:var(--brand-black);margin:0 0 .5rem;line-height:1.3;}
.tp-help-card__intro{color:var(--tp-graphite);font-size:.88rem;margin:0 0 .7rem;}
.tp-help-card__more{color:var(--brand-blue);font-size:.85rem;font-weight:600;}

.tp-glossary-list{list-style:none;padding:0;margin:0 0 1.5rem;column-count:2;column-gap:2rem;}
.tp-glossary-list li{margin-bottom:.5rem;break-inside:avoid;}
.tp-glossary-list li a{color:var(--brand-blue);text-decoration:none;}
.tp-glossary-list li a:hover{text-decoration:underline;}
@media (max-width:768px){
    .tp-glossary-list{column-count:1;}
}


/* Лендинг /opt — CTA-блок */
.tp-opt-cta{
    max-width:760px;background:linear-gradient(135deg, rgba(12,117,204,.04), rgba(42,92,135,.06));
    border:1px solid rgba(12,117,204,.18);border-radius:var(--tp-radius);
    padding:1.4rem 1.5rem;
}
.tp-opt-cta h3{font-size:1.15rem;font-weight:700;color:var(--brand-black);margin:0;}
.tp-opt-cta h3 .bi{color:var(--brand-blue);}


/* ========================================================================
   Sticky help-bar (внизу на всех страницах)
   ======================================================================== */
.tp-helpbar{
    position:fixed;left:0;right:0;bottom:0;z-index:1030;
    background:#fff;border-top:1px solid var(--tp-line);
    box-shadow:0 -8px 24px rgba(13,52,86,.10);
    padding:.55rem 0;
}
.tp-helpbar__inner{
    max-width:1320px;margin:0 auto;padding:0 1rem;
    display:flex;align-items:center;gap:.75rem;flex-wrap:nowrap;
}
.tp-helpbar__status{
    display:inline-flex;align-items:center;gap:.45rem;
    font-size:.85rem;color:var(--tp-steel);font-weight:500;white-space:nowrap;
    flex-shrink:1;min-width:0;
}
.tp-helpbar__status-text{overflow:hidden;text-overflow:ellipsis;}
.tp-helpbar__dot{
    width:9px;height:9px;border-radius:50%;flex-shrink:0;
    box-shadow:0 0 0 0 currentColor;animation:tp-pulse 2s infinite;
}
.tp-helpbar__status.is-on{color:#10b981;}
.tp-helpbar__status.is-on .tp-helpbar__dot{background:#10b981;}
.tp-helpbar__status.is-off{color:var(--tp-steel);}
.tp-helpbar__status.is-off .tp-helpbar__dot{background:var(--tp-steel-soft);animation:none;}
@keyframes tp-pulse{
    0%   { box-shadow: 0 0 0 0 rgba(16,185,129,.5); }
    70%  { box-shadow: 0 0 0 8px rgba(16,185,129,0); }
    100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}

.tp-helpbar__btn{
    display:inline-flex;align-items:center;gap:.5rem;
    padding:.6rem 1.1rem;border-radius:var(--tp-radius);
    font-weight:600;font-size:.95rem;text-decoration:none;
    border:none;cursor:pointer;white-space:nowrap;transition:transform .12s,box-shadow .12s,background .12s,color .12s;
}
.tp-helpbar__btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(13,52,86,.18);text-decoration:none;}

/* Синяя кнопка «Перезвоним» — белый текст всегда */
.tp-helpbar__btn--call,
.tp-helpbar__btn--call:link,
.tp-helpbar__btn--call:visited{
    background:var(--brand-blue);color:#fff;margin-left:auto;
}
.tp-helpbar__btn--call:hover,
.tp-helpbar__btn--call:focus,
.tp-helpbar__btn--call:active{
    background:var(--brand-blue-dark);color:#fff;
}
.tp-helpbar__btn--call .bi{color:#fff;}

/* Outline «Подбор по VIN» — синий текст и рамка, на hover заливается синим */
.tp-helpbar__btn--vin,
.tp-helpbar__btn--vin:link,
.tp-helpbar__btn--vin:visited{
    background:#fff;color:var(--brand-blue);border:2px solid var(--brand-blue);
}
.tp-helpbar__btn--vin:hover,
.tp-helpbar__btn--vin:focus,
.tp-helpbar__btn--vin:active{
    background:var(--brand-blue);color:#fff;border-color:var(--brand-blue);
}
.tp-helpbar__btn--vin .bi{transition:color .12s;}

.tp-helpbar__btn .bi{font-size:1.1rem;}

.tp-helpbar__close{
    width:32px;height:32px;border-radius:50%;border:1px solid var(--tp-line);
    background:#fff;color:var(--tp-steel);font-size:1.4rem;line-height:1;
    display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
    flex-shrink:0;transition:all .12s;
}
.tp-helpbar__close:hover{background:#fef2f2;border-color:#fecaca;color:#dc2626;}

/* На мобильных: компактнее, текст у кнопок прячется, остаются иконки.
   Текст статуса оставляем видимым (короткий, важный) — обрезается ellipsis'ом
   если не помещается. Без него рядом с серой точкой выглядит как пустое поле. */
@media (max-width: 640px){
    .tp-helpbar{padding:.45rem 0;}
    .tp-helpbar__inner{gap:.5rem;padding:0 .5rem;}
    .tp-helpbar__status{flex:1;min-width:0;}
    .tp-helpbar__status-text{
        display:inline-block;
        font-size:.78rem;line-height:1.2;
        white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
        max-width:100%;
    }
    .tp-helpbar__btn{padding:.55rem .8rem;font-size:.85rem;flex-shrink:0;}
    .tp-helpbar__btn span{display:none;} /* кнопки превращаются в иконки */
    .tp-helpbar__btn .bi{font-size:1.25rem;}
}

/* Очень узкие экраны (≤360px) — вот тогда уже текст приходится прятать */
@media (max-width: 360px){
    .tp-helpbar__status-text{display:none;}
}

/* Чтобы фиксированная плашка не закрывала контент в самом низу страницы */
body{padding-bottom:64px;}
@media (max-width: 640px){
    body{padding-bottom:56px;}
}


/* ========================================================================
   Yandex SmartCaptcha — выравниваем под наши формы
   ======================================================================== */
.smart-captcha{
    margin:.75rem 0;
}
.smart-captcha:empty{display:none;} /* в invisible-режиме виджет может быть пустым */
.smart-captcha iframe{
    border-radius:var(--tp-radius);
    max-width:100%;
}


/* ============================================================
   ALT HOMEPAGE V2 — «Рабочий стол снабженца»
   Префикс tp2-* чтобы не пересекаться с текущим фронтом.
   Используется только на /v2.
   ============================================================ */

.text-muted-light { color: rgba(255,255,255,.7); }

/* ----- 1. HERO-КОНСОЛЬ ----- */
.tp2-hero {
    position: relative;
    color: #fff;
    padding: 4.5rem 0 3.5rem;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(135deg, #0a131a 0%, #131E26 55%, #1a3148 100%);
}
.tp2-hero__bg {
    position: absolute; inset: 0; z-index: -1;
    background:
        radial-gradient(ellipse 60% 50% at 80% 20%, rgba(12,117,204,.18), transparent 60%),
        radial-gradient(ellipse 40% 30% at 20% 100%, rgba(42,92,135,.25), transparent 70%);
    pointer-events: none;
}
.tp2-hero__container { position: relative; }

.tp2-hero__badge {
    display: inline-flex; align-items: center; gap: .5rem;
    background: rgba(255,255,255,.08); backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.14);
    padding: .35rem .8rem; border-radius: 999px;
    font-size: .85rem; color: rgba(255,255,255,.92); font-weight: 500;
    margin-bottom: 1.25rem;
}
.tp2-hero__badge-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #10b981; box-shadow: 0 0 0 0 rgba(16,185,129,.6);
    animation: tp2-pulse 2s infinite;
}
@keyframes tp2-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(16,185,129,.6); }
    70%  { box-shadow: 0 0 0 12px rgba(16,185,129,0); }
    100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}

.tp2-hero__title {
    font-size: clamp(2.4rem, 5vw, 4rem);
    font-weight: 800; line-height: 1.05; letter-spacing: -0.02em;
    margin: 0 0 1rem;
    color: #fff;
}
.tp2-hero__title-accent {
    background: linear-gradient(135deg, #4D8FC8 0%, #0C75CC 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.tp2-hero__title-sub {
    display: block;
    font-size: clamp(1rem, 1.6vw, 1.4rem);
    font-weight: 500;
    color: rgba(255,255,255,.78);
    letter-spacing: 0;
    margin-top: .35rem;
    line-height: 1.25;
}

.tp2-hero__sub {
    font-size: 1.05rem; line-height: 1.55;
    color: rgba(255,255,255,.85);
    max-width: 760px; margin: 0 0 2rem;
    font-weight: 400;
}

/* ----- search component ----- */
.tp2-search {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 16px;
    padding: 1.25rem;
    backdrop-filter: blur(12px);
    box-shadow: 0 20px 60px rgba(0,0,0,.3);
    max-width: 920px;
}
.tp2-search__modes {
    display: flex; flex-wrap: wrap; gap: .35rem;
    margin-bottom: .9rem;
}
.tp2-search__mode {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    color: rgba(255,255,255,.85);
    padding: .5rem .95rem; border-radius: 10px;
    font-size: .9rem; font-weight: 500;
    display: inline-flex; align-items: center; gap: .4rem;
    cursor: pointer; transition: all .15s; text-decoration: none;
    white-space: nowrap;
}
.tp2-search__mode:hover { background: rgba(255,255,255,.12); color: #fff; }
.tp2-search__mode.is-active {
    background: #fff; color: #131E26; border-color: #fff;
    box-shadow: 0 4px 14px rgba(0,0,0,.2);
}
.tp2-search__mode--vin { margin-left: auto; }
.tp2-search__mode--vin:not(.is-active) {
    background: rgba(12,117,204,.18);
    border-color: rgba(12,117,204,.4);
    color: #fff;
}
.tp2-search__mode--vin:hover { background: rgba(12,117,204,.3); }

.tp2-search__row {
    display: flex; gap: .5rem;
}
.tp2-search__input {
    flex: 1; min-width: 0;
    background: #fff; color: #131E26;
    border: 0; border-radius: 12px;
    padding: 1.05rem 1.25rem; font-size: 1.1rem; font-weight: 500;
    box-shadow: inset 0 1px 0 rgba(0,0,0,.06);
}
.tp2-search__input:focus { outline: 3px solid #4D8FC8; outline-offset: 0; }
.tp2-search__input::placeholder { color: #93a3b3; font-weight: 400; }

.tp2-search__submit {
    background: #0C75CC; color: #fff; border: 0;
    padding: 1.05rem 1.75rem; border-radius: 12px;
    font-size: 1rem; font-weight: 700;
    display: inline-flex; align-items: center; gap: .5rem;
    cursor: pointer; transition: background .15s, transform .1s;
    white-space: nowrap;
}
.tp2-search__submit:hover { background: #2A5C87; }
.tp2-search__submit:active { transform: translateY(1px); }
.tp2-search__submit .bi { font-size: 1.15rem; }

.tp2-search__hints {
    margin-top: .85rem; display: flex; align-items: center;
    gap: .5rem; flex-wrap: wrap; font-size: .9rem;
}
.tp2-search__hints a {
    color: rgba(255,255,255,.85); text-decoration: none;
    border-bottom: 1px dashed rgba(255,255,255,.3);
    padding-bottom: 1px;
}
.tp2-search__hints a:hover { color: #fff; border-bottom-color: #fff; }

/* ----- KPI inline ----- */
.tp2-hero__kpi {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255,255,255,.12);
}
.tp2-hero__kpi-item {
    display: flex; flex-direction: column; gap: .15rem;
}
.tp2-hero__kpi-item strong {
    font-size: 2rem; font-weight: 800; line-height: 1;
    color: #fff; letter-spacing: -.02em;
}
.tp2-hero__kpi-item span {
    font-size: .88rem; color: rgba(255,255,255,.7);
}

@media (max-width: 768px) {
    .tp2-hero { padding: 2.5rem 0; }
    .tp2-hero__title { font-size: 2.2rem; }
    .tp2-hero__sub { font-size: .95rem; }
    .tp2-search { padding: .85rem; border-radius: 14px; }
    .tp2-search__row { flex-direction: column; }
    .tp2-search__submit { width: 100%; justify-content: center; padding: .95rem; }
    .tp2-search__mode--vin { margin-left: 0; }
    .tp2-search__mode span:not(.tp2-search__mode--vin span) { display: none; }
    .tp2-search__mode { padding: .55rem .7rem; }
    .tp2-hero__kpi { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    .tp2-hero__kpi-item strong { font-size: 1.5rem; }
}

/* ----- 2. LIVE-ПОЛОСА ----- */
.tp2-live {
    background: #fff; border-bottom: 1px solid var(--tp-line);
    padding: 1.25rem 0;
}
.tp2-live__row {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem;
}
.tp2-live__item {
    display: flex; align-items: flex-start; gap: .75rem;
    font-size: .9rem;
}
.tp2-live__item .bi {
    flex: 0 0 32px; font-size: 1.5rem; color: var(--brand-blue);
    margin-top: 2px;
}
.tp2-live__item strong {
    display: block; color: #131E26; font-weight: 700; margin-bottom: 2px;
}
.tp2-live__item span { color: var(--tp-steel); line-height: 1.35; }

.tp2-live__pulse {
    flex: 0 0 14px; width: 14px; height: 14px; border-radius: 50%;
    margin-top: 4px;
}
.tp2-live__pulse.is-on {
    background: #10b981;
    box-shadow: 0 0 0 0 rgba(16,185,129,.5);
    animation: tp2-pulse-soft 2.5s infinite;
}
.tp2-live__pulse.is-off { background: #cbd5e1; }
@keyframes tp2-pulse-soft {
    0%   { box-shadow: 0 0 0 0 rgba(16,185,129,.5); }
    70%  { box-shadow: 0 0 0 10px rgba(16,185,129,0); }
    100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}

@media (max-width: 992px) {
    .tp2-live__row { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
}
@media (max-width: 540px) {
    .tp2-live__row { grid-template-columns: 1fr; gap: .75rem; }
}

/* ----- ОБЩИЕ КЛАССЫ СЕКЦИЙ ----- */
.tp2-section { padding: 2.25rem 0; }
.tp2-section--alt { background: #f8fafc; }

.tp2-head {
    display: flex; align-items: end; justify-content: space-between;
    flex-wrap: wrap; gap: 1rem;
    margin-bottom: 2rem;
}
.tp2-head h2 {
    font-size: clamp(1.65rem, 2.5vw, 2.25rem);
    font-weight: 800; line-height: 1.15; letter-spacing: -.01em;
    color: #131E26; margin: .15rem 0 .35rem;
}
.tp2-head__lead {
    color: var(--tp-steel); font-size: .98rem; line-height: 1.5;
    max-width: 720px; margin: 0;
}
.tp2-head__lead a { color: var(--brand-blue); font-weight: 600; }

.tp2-eyebrow {
    display: inline-block; font-size: .78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em;
    color: var(--brand-blue); margin-bottom: .25rem;
}

.tp2-more {
    display: inline-flex; align-items: center; gap: .35rem;
    color: var(--brand-blue); font-weight: 600; text-decoration: none;
    font-size: .95rem; padding: .5rem .9rem; border-radius: 8px;
    background: rgba(12,117,204,.08); transition: background .15s;
}
.tp2-more:hover { background: rgba(12,117,204,.16); color: var(--brand-blue-dark); }

/* «Весь каталог →» под сеткой категорий — выровнено вправо */
.tp2-section__more {
    margin-top: 1rem;
    display: flex; justify-content: flex-end;
}

/* ----- 3. КАТЕГОРИИ ----- */
.tp2-cats {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
}
.tp2-cat {
    position: relative;
    background: #fff; border: 1px solid var(--tp-line);
    border-radius: 14px; overflow: hidden;
    text-decoration: none; color: inherit;
    transition: transform .2s, box-shadow .2s, border-color .2s;
    display: flex; flex-direction: column;
}
.tp2-cat:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(13,52,86,.12);
    border-color: var(--brand-blue);
}
.tp2-cat__photo {
    aspect-ratio: 5 / 3; overflow: hidden;
    background: linear-gradient(135deg, #131E26, #2A5C87);
    position: relative;
}
.tp2-cat__photo img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .35s;
}
.tp2-cat:hover .tp2-cat__photo img { transform: scale(1.05); }
.tp2-cat__photo-fallback {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.6); font-size: 3rem;
}
.tp2-cat__body {
    padding: .9rem 1rem;
}
.tp2-cat__name {
    font-size: 1rem; font-weight: 700; color: #131E26;
    line-height: 1.25; margin-bottom: .15rem;
}
.tp2-cat__count {
    font-size: .85rem; color: var(--tp-steel);
}
.tp2-cat__arrow {
    position: absolute; bottom: 1rem; right: 1rem;
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--brand-blue); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; opacity: 0; transform: translateX(-4px);
    transition: opacity .2s, transform .2s;
}
.tp2-cat:hover .tp2-cat__arrow { opacity: 1; transform: translateX(0); }

@media (max-width: 992px) { .tp2-cats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .tp2-cats { grid-template-columns: repeat(2, 1fr); } }

/* ----- 4. ПО ТИПУ ТЕХНИКИ ----- */
.tp2-vehrow { margin-bottom: 2rem; }
.tp2-vehrow:last-child { margin-bottom: 0; }
.tp2-vehrow__head {
    display: flex; align-items: center; gap: .75rem;
    padding-bottom: .75rem; margin-bottom: 1rem;
    border-bottom: 1px solid var(--tp-line);
}
.tp2-vehrow__head .bi {
    font-size: 1.5rem; color: var(--brand-blue);
}
.tp2-vehrow__head h3 {
    font-size: 1.2rem; font-weight: 700; color: #131E26;
    margin: 0; flex: 1;
}
.tp2-vehrow__count {
    background: var(--brand-blue); color: #fff;
    padding: .15rem .55rem; border-radius: 999px;
    font-size: .78rem; font-weight: 700;
}

.tp2-vehrow__list {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: .75rem;
}
.tp2-veh {
    background: #fff; border: 1px solid var(--tp-line);
    border-radius: 10px; padding: .85rem;
    text-decoration: none; color: inherit;
    display: flex; flex-direction: column; align-items: center; gap: .5rem;
    /* min-height сохраняет визуальный размер плитки даже без счётчика снизу */
    min-height: 130px;
    justify-content: center;
    transition: transform .15s, border-color .15s, box-shadow .15s;
    text-align: center;
}
.tp2-veh:hover {
    transform: translateY(-2px);
    border-color: var(--brand-blue);
    box-shadow: 0 6px 16px rgba(13,52,86,.1);
}
.tp2-veh__logo {
    width: 64px; height: 40px;
    display: flex; align-items: center; justify-content: center;
}
.tp2-veh__logo img {
    max-width: 100%; max-height: 100%; object-fit: contain;
}
.tp2-veh__fallback {
    width: 40px; height: 40px; border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-bright));
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 1.1rem;
}
.tp2-veh__name {
    font-size: .85rem; font-weight: 600; color: #131E26;
    line-height: 1.2;
}
.tp2-veh__cnt {
    font-size: .75rem; color: var(--tp-steel);
    background: #f1f5f9; padding: .1rem .45rem; border-radius: 4px;
}

@media (max-width: 992px) { .tp2-vehrow__list { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 600px) { .tp2-vehrow__list { grid-template-columns: repeat(3, 1fr); } }

/* ----- 5. ГОРЯЧАЯ ЛЕНТА ТОВАРОВ ----- */
.tp2-hot {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
}
.tp2-prod {
    position: relative;
    background: #fff; border: 1px solid var(--tp-line); border-radius: 12px;
    text-decoration: none; color: inherit; overflow: hidden;
    display: flex; flex-direction: column;
    transition: transform .2s, border-color .2s, box-shadow .2s;
}
.tp2-prod:hover {
    transform: translateY(-3px);
    border-color: var(--brand-blue);
    box-shadow: 0 12px 24px rgba(13,52,86,.12);
}
.tp2-prod__badge {
    position: absolute; top: .65rem; left: .65rem; z-index: 2;
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .25rem .55rem; border-radius: 999px;
    font-size: .75rem; font-weight: 700; letter-spacing: .02em;
    color: #fff;
}
.tp2-prod__badge--hit  { background: linear-gradient(135deg, #f59e0b, #d97706); }
.tp2-prod__badge--sale { background: linear-gradient(135deg, #ef4444, #dc2626); }
.tp2-prod__badge--new  { background: linear-gradient(135deg, #10b981, #059669); }
/* Уценка — оранжевый с предупреждающим оттенком, отличается от sale-красного */
.tp2-prod__badge--clearance { background: linear-gradient(135deg, #fb923c, #c2410c); }

.tp2-prod__photo {
    aspect-ratio: 1; background: #f8fafc;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.tp2-prod__photo img {
    max-width: 88%; max-height: 88%; object-fit: contain;
    transition: transform .3s;
}
.tp2-prod:hover .tp2-prod__photo img { transform: scale(1.06); }

.tp2-prod__body {
    padding: .85rem .9rem 1rem;
    display: flex; flex-direction: column; gap: .35rem;
    flex: 1;
}
.tp2-prod__brand {
    font-size: .78rem; font-weight: 600; color: var(--brand-blue);
    text-transform: uppercase; letter-spacing: .04em;
}
.tp2-prod__name {
    font-size: .92rem; font-weight: 600; line-height: 1.3;
    color: #131E26;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.tp2-prod__spec {
    font-size: .8rem; color: var(--tp-steel);
    line-height: 1.3;
}
.tp2-prod__price-row {
    margin-top: auto; padding-top: .35rem;
    display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
}
.tp2-prod__price {
    font-size: 1.15rem; font-weight: 800; color: #131E26;
    line-height: 1;
}
.tp2-prod__price-old {
    font-size: .85rem; color: var(--tp-steel);
    text-decoration: line-through;
}
.tp2-prod__discount-pill {
    background: linear-gradient(135deg, #dc2626, #991b1b);
    color: #fff;
    font-size: .72rem; font-weight: 800;
    padding: .15rem .4rem;
    border-radius: 4px;
    line-height: 1.2;
    letter-spacing: .02em;
}

@media (max-width: 992px) { .tp2-hot { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .tp2-hot { grid-template-columns: repeat(2, 1fr); } }

/* ----- 6. БРЕНДЫ ----- */
.tp2-brands {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: .75rem;
}
.tp2-brand {
    background: #fff; border: 1px solid var(--tp-line);
    border-radius: 10px; padding: 1rem;
    height: 80px; display: flex; align-items: center; justify-content: center;
    transition: transform .15s, border-color .15s, box-shadow .15s;
}
.tp2-brand:hover {
    transform: translateY(-2px);
    border-color: var(--brand-blue);
    box-shadow: 0 6px 14px rgba(13,52,86,.08);
}
.tp2-brand img {
    max-width: 100%; max-height: 100%; object-fit: contain;
    filter: grayscale(.3);
    transition: filter .15s;
}
.tp2-brand:hover img { filter: none; }

@media (max-width: 992px) { .tp2-brands { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 720px) { .tp2-brands { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 480px) { .tp2-brands { grid-template-columns: repeat(3, 1fr); } }

/* ----- 7. B2B ----- */
.tp2-b2b {
    padding: 4rem 0;
    background: linear-gradient(135deg, #131E26 0%, #1a3148 50%, #0C75CC 130%);
    color: #fff;
}
.tp2-b2b__inner {
    display: grid; grid-template-columns: 1.4fr 1fr; gap: 3rem; align-items: center;
}
.tp2-b2b__eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    background: rgba(255,255,255,.12);
    padding: .35rem .85rem; border-radius: 999px;
    font-size: .82rem; font-weight: 700; color: #fff;
    margin-bottom: 1rem;
}
.tp2-b2b h2 {
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 800; line-height: 1.1; letter-spacing: -.01em;
    margin: 0 0 1.25rem; color: #fff;
}
.tp2-b2b p {
    font-size: 1.02rem; line-height: 1.55;
    color: rgba(255,255,255,.85); margin: 0 0 1.5rem;
}
.tp2-b2b__list {
    list-style: none; padding: 0; margin: 0 0 2rem;
    display: grid; gap: .55rem;
}
.tp2-b2b__list li {
    display: flex; align-items: flex-start; gap: .65rem;
    color: rgba(255,255,255,.95); font-size: .95rem;
}
.tp2-b2b__list .bi {
    color: #4D8FC8; font-size: 1.05rem; flex-shrink: 0; margin-top: 2px;
}
.tp2-b2b__cta {
    display: flex; gap: .75rem; flex-wrap: wrap;
}

.tp2-b2b__right {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
}
.tp2-b2b__stat {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    padding: 1.5rem 1.25rem;
    backdrop-filter: blur(8px);
    text-align: center;
}
.tp2-b2b__stat strong {
    display: block; font-size: 2.2rem; font-weight: 800;
    line-height: 1; letter-spacing: -.02em; color: #fff;
    margin-bottom: .35rem;
}
.tp2-b2b__stat span {
    font-size: .85rem; color: rgba(255,255,255,.75);
    line-height: 1.3;
}

@media (max-width: 900px) {
    .tp2-b2b__inner { grid-template-columns: 1fr; gap: 2rem; }
}

/* ----- кнопки v2 ----- */
.tp2-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: .55rem; padding: .85rem 1.4rem; border-radius: 10px;
    font-weight: 700; font-size: .95rem;
    text-decoration: none; cursor: pointer; border: 0;
    transition: transform .1s, box-shadow .15s, background .15s, color .15s;
    white-space: nowrap;
}
.tp2-btn:active { transform: translateY(1px); }
.tp2-btn--primary { background: #0C75CC; color: #fff; }
.tp2-btn--primary:hover { background: #2A5C87; color: #fff; box-shadow: 0 6px 14px rgba(12,117,204,.35); }
.tp2-btn--ghost {
    background: transparent; color: #fff;
    border: 2px solid rgba(255,255,255,.4);
}
.tp2-btn--ghost:hover { background: rgba(255,255,255,.12); color: #fff; }
.tp2-btn--block { width: 100%; }

/* На светлом фоне (FAQ aside) ghost-кнопка должна быть тёмной */
.tp2-guides .tp2-btn--ghost,
.tp2-section .tp2-btn--ghost {
    color: var(--brand-blue); border-color: var(--brand-blue);
}
.tp2-section .tp2-btn--ghost:hover { background: var(--brand-blue); color: #fff; }

/* ----- 8. TRUST ----- */
.tp2-trust {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
}
.tp2-trust__cell {
    background: #fff;
    border: 1px solid var(--tp-line);
    border-radius: 14px;
    padding: 1.5rem 1.25rem;
    text-align: left;
}
.tp2-trust__num {
    font-size: 2.1rem; font-weight: 800; line-height: 1.05;
    color: var(--brand-blue); letter-spacing: -.02em;
    margin-bottom: .65rem;
}
.tp2-trust__num-sm { font-size: 1.3rem; font-weight: 600; color: var(--tp-steel); }
.tp2-trust__lbl {
    font-size: .92rem; line-height: 1.45; color: var(--tp-steel);
}
.tp2-trust__lbl strong { color: #131E26; font-weight: 700; }

.tp2-certs {
    display: flex; gap: .75rem; flex-wrap: wrap;
    justify-content: center; margin-top: 2.5rem;
}
.tp2-cert {
    background: #fff; border: 1px solid var(--tp-line);
    border-radius: 10px; padding: .75rem;
    width: 110px; height: 130px;
    display: flex; flex-direction: column; align-items: center;
    gap: .4rem; text-decoration: none; color: inherit;
    transition: transform .15s, border-color .15s;
}
.tp2-cert:hover { transform: translateY(-2px); border-color: var(--brand-blue); }
.tp2-cert img {
    max-width: 100%; max-height: 80px; object-fit: contain;
}
.tp2-cert .bi {
    font-size: 2.5rem; color: var(--brand-blue);
}
.tp2-cert span {
    font-size: .75rem; font-weight: 600; color: var(--tp-steel);
    text-align: center; line-height: 1.2;
    margin-top: auto;
}

@media (max-width: 900px) { .tp2-trust { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .tp2-trust { grid-template-columns: 1fr; } }

/* ----- 9. HELP — 3 пути ----- */
.tp2-help {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem;
}
.tp2-help__card {
    background: #fff; border: 2px solid var(--tp-line);
    border-radius: 14px; padding: 1.75rem 1.5rem;
    display: flex; flex-direction: column; align-items: flex-start; gap: .5rem;
    text-decoration: none; color: inherit; cursor: pointer;
    text-align: left; font-family: inherit;
    transition: transform .2s, border-color .2s, box-shadow .2s;
}
.tp2-help__card:hover {
    transform: translateY(-3px);
    border-color: var(--brand-blue);
    box-shadow: 0 10px 24px rgba(13,52,86,.12);
}
.tp2-help__icon {
    width: 56px; height: 56px; border-radius: 14px;
    background: linear-gradient(135deg, rgba(12,117,204,.12), rgba(42,92,135,.12));
    color: var(--brand-blue);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.65rem;
    margin-bottom: .25rem;
}
.tp2-help__card h3 {
    font-size: 1.2rem; font-weight: 700; color: #131E26;
    margin: 0; line-height: 1.2;
}
.tp2-help__card p {
    font-size: .92rem; color: var(--tp-steel); line-height: 1.5; margin: 0;
}
.tp2-help__when {
    font-size: .82rem; color: var(--tp-steel);
    background: #f1f5f9; padding: .35rem .7rem; border-radius: 6px;
    align-self: flex-start;
}
.tp2-help__cta {
    margin-top: auto; color: var(--brand-blue); font-weight: 700;
    font-size: .92rem; display: inline-flex; align-items: center; gap: .35rem;
}

@media (max-width: 900px) { .tp2-help { grid-template-columns: 1fr; } }

/* ----- 10. FAQ ----- */
.tp2-faq-grid {
    display: grid; grid-template-columns: 2fr 1fr; gap: 2.5rem;
}
.tp2-faq__item {
    border-bottom: 1px solid var(--tp-line);
    padding: 1.1rem 0;
}
.tp2-faq__item:first-of-type { border-top: 1px solid var(--tp-line); }
.tp2-faq__item summary {
    cursor: pointer; font-weight: 700; font-size: 1rem; color: #131E26;
    list-style: none; display: flex; justify-content: space-between; gap: 1rem;
    padding-right: 1rem;
}
.tp2-faq__item summary::-webkit-details-marker { display: none; }
.tp2-faq__item summary::after {
    content: '+'; font-size: 1.5rem; font-weight: 400; line-height: 1;
    color: var(--brand-blue); flex-shrink: 0;
    transition: transform .2s;
}
.tp2-faq__item[open] summary::after { content: '−'; }
.tp2-faq__item > div {
    padding-top: .75rem; color: var(--tp-steel); font-size: .95rem;
    line-height: 1.6; max-width: 720px;
}
.tp2-faq__item > div a { color: var(--brand-blue); font-weight: 600; }

.tp2-guides {
    background: #f8fafc; border: 1px solid var(--tp-line);
    border-radius: 14px; padding: 1.75rem 1.5rem;
    align-self: start; position: sticky; top: 90px;
}
.tp2-guides h3 {
    font-size: 1.05rem; font-weight: 700; margin: 0 0 1rem;
    color: #131E26;
}
.tp2-guides ul {
    list-style: none; padding: 0; margin: 0 0 1.5rem;
}
.tp2-guides li { margin-bottom: .55rem; }
.tp2-guides li a {
    display: inline-flex; align-items: center; gap: .55rem;
    color: #131E26; font-size: .92rem; text-decoration: none;
    font-weight: 500;
}
.tp2-guides li a:hover { color: var(--brand-blue); }
.tp2-guides li .bi { color: var(--brand-blue); font-size: 1rem; flex-shrink: 0; }

.tp2-guides__cta {
    background: #fff; border: 1px solid var(--tp-line);
    border-radius: 10px; padding: 1rem;
}
.tp2-guides__cta strong {
    display: block; font-size: .95rem; color: #131E26; margin-bottom: .25rem;
}
.tp2-guides__cta p {
    font-size: .85rem; color: var(--tp-steel);
    margin: 0 0 .85rem; line-height: 1.45;
}

@media (max-width: 900px) {
    .tp2-faq-grid { grid-template-columns: 1fr; }
    .tp2-guides { position: static; }
}

/* ----- FAQ-аккордеон в правом sidebar (рядом с галереей склада) ----- */
.tp2-faq-aside {
    background: #f8fafc; border: 1px solid var(--tp-line);
    border-radius: 14px; padding: 1.5rem;
    align-self: start; position: sticky; top: 90px;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
}
.tp2-faq-aside h3 {
    font-size: 1.05rem; font-weight: 700; margin: 0 0 1rem;
    color: #131E26;
}
.tp2-faq-aside__links {
    list-style: none; padding: 0; margin: 0 0 1.5rem;
}
.tp2-faq-aside__links li { margin-bottom: .55rem; }
.tp2-faq-aside__links li a {
    display: inline-flex; align-items: center; gap: .55rem;
    color: #131E26; font-size: .92rem; text-decoration: none;
    font-weight: 500;
}
.tp2-faq-aside__links li a:hover { color: var(--brand-blue); }
.tp2-faq-aside__links li .bi { color: var(--brand-blue); font-size: 1rem; flex-shrink: 0; }

.tp2-faq-aside__faq-title {
    margin-top: 1.5rem !important;
    padding-top: 1.25rem;
    border-top: 1px solid var(--tp-line);
}

.tp2-faq-list .tp2-faq__item:first-of-type { border-top: 0; padding-top: 0; }
.tp2-faq-aside .tp2-faq__item summary { font-size: .92rem; }
.tp2-faq-aside .tp2-faq__item > div { padding-top: .5rem; font-size: .88rem; line-height: 1.5; }
.tp2-faq-aside__cta {
    background: #fff; border: 1px solid var(--tp-line);
    border-radius: 10px; padding: 1rem;
    margin-top: 1.25rem;
}

@media (max-width: 900px) {
    .tp2-faq-aside { position: static; max-height: none; overflow: visible; }
}

/* ----- Sklad carousel (галерея склада в FAQ-сетке) ----- */
.tp2-sklad {
    position: relative;
    background: #131E26;
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    user-select: none;
}
.tp2-sklad__viewport {
    position: absolute; inset: 0;
}
.tp2-sklad__track {
    position: absolute; inset: 0;
}
.tp2-sklad__slide {
    position: absolute; inset: 0;
    opacity: 0; transition: opacity .45s ease;
    pointer-events: none;
}
.tp2-sklad__slide.is-active {
    opacity: 1; pointer-events: auto;
}
.tp2-sklad__slide img {
    width: 100%; height: 100%; object-fit: cover;
    display: block;
}

.tp2-sklad__nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 42px; height: 42px; border-radius: 50%;
    background: rgba(255,255,255,.92); color: #131E26;
    border: 0; cursor: pointer; z-index: 2;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem;
    box-shadow: 0 4px 14px rgba(0,0,0,.18);
    transition: background .15s, transform .12s;
}
.tp2-sklad__nav:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.tp2-sklad__nav--prev { left: .85rem; }
.tp2-sklad__nav--next { right: .85rem; }

.tp2-sklad__dots {
    position: absolute; bottom: .85rem; left: 0; right: 0;
    display: flex; justify-content: center; gap: .4rem;
    z-index: 2;
}
.tp2-sklad__dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: rgba(255,255,255,.45); border: 0; cursor: pointer;
    padding: 0; transition: background .15s, transform .15s;
}
.tp2-sklad__dot:hover { background: rgba(255,255,255,.7); }
.tp2-sklad__dot.is-active {
    background: #fff; transform: scale(1.25);
}

@media (max-width: 540px) {
    .tp2-sklad__nav { width: 36px; height: 36px; font-size: 1.05rem; }
    .tp2-sklad__nav--prev { left: .5rem; }
    .tp2-sklad__nav--next { right: .5rem; }
}

/* ----- 11. SEO BODY ----- */
.tp2-seo {
    padding: 3rem 0 4rem;
    background: #f8fafc;
    border-top: 1px solid var(--tp-line);
}
.tp2-seo .container { max-width: 880px; }
.tp2-seo h2 {
    font-size: 1.6rem; font-weight: 800; color: #131E26;
    margin: 0 0 1rem; line-height: 1.25;
}
.tp2-seo h3 {
    font-size: 1.15rem; font-weight: 700; color: #131E26;
    margin: 1.75rem 0 .65rem; line-height: 1.3;
}
.tp2-seo p {
    font-size: .95rem; line-height: 1.7; color: var(--tp-steel);
    margin: 0 0 1rem;
}
.tp2-seo p strong { color: #131E26; font-weight: 700; }
.tp2-seo ul {
    margin: .5rem 0 1rem; padding-left: 1.4rem;
}
.tp2-seo ul li {
    font-size: .95rem; line-height: 1.65; color: var(--tp-steel);
    margin-bottom: .35rem;
}
.tp2-seo a { color: var(--brand-blue); font-weight: 600; }


/* ============================================================
   PRODUCT V2 — карточка товара /p2/{brand}/{article}
   Префикс tp2p-* (tp2 product) чтобы не пересекаться с tp2-*
   и существующими tp-product-*
   ============================================================ */

/* ----- 1. STICKY-HEADER при скролле ----- */
.tp2p-stickybar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1029;
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--tp-line);
    box-shadow: 0 4px 12px rgba(13,52,86,.06);
    transform: translateY(-100%);
    transition: transform .25s ease;
}
.tp2p-stickybar.is-visible { transform: translateY(0); }
.tp2p-stickybar__inner {
    display: grid;
    grid-template-columns: 48px 1fr auto auto;
    gap: 1rem; align-items: center;
    padding: .65rem 1rem;
}
.tp2p-stickybar__photo img {
    width: 40px; height: 40px; object-fit: contain;
    border-radius: 6px; background: #f8fafc; padding: 4px;
}
.tp2p-stickybar__info { min-width: 0; }
.tp2p-stickybar__name {
    font-size: .92rem; font-weight: 700; color: #131E26;
    line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tp2p-stickybar__meta {
    font-size: .8rem; color: var(--tp-steel);
    margin-top: 2px;
}
.tp2p-stickybar__price strong {
    font-size: 1.2rem; font-weight: 800; color: #131E26;
    line-height: 1;
}
.tp2p-stickybar__old {
    display: block; font-size: .78rem; color: var(--tp-steel);
    text-decoration: line-through; margin-top: 2px;
}
@media (max-width: 720px) {
    .tp2p-stickybar__photo { display: none; }
    .tp2p-stickybar__inner { grid-template-columns: 1fr auto auto; gap: .65rem; padding: .55rem .75rem; }
    .tp2p-stickybar__name { font-size: .85rem; }
    .tp2p-stickybar__meta { display: none; }
    .tp2p-stickybar__old { display: none; }
}

/* ----- 2. HERO ----- */
.tp2p-hero {
    background: #fff;
    padding: 1.25rem 0 2.5rem;
    border-bottom: 1px solid var(--tp-line);
}
.tp2p-crumbs {
    font-size: .85rem; color: var(--tp-steel);
    margin-bottom: 1.25rem;
    display: flex; align-items: center; gap: .35rem; flex-wrap: wrap;
}
.tp2p-crumbs a { color: var(--tp-steel); text-decoration: none; }
.tp2p-crumbs a:hover { color: var(--brand-blue); text-decoration: underline; }
.tp2p-crumbs__current { color: #131E26; font-weight: 600; }

.tp2p-hero__grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 2.5rem;
    align-items: start;
}
@media (max-width: 992px) {
    .tp2p-hero__grid { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ----- Галерея ----- */
.tp2p-gallery {
    display: flex; flex-direction: column; gap: .75rem;
}
.tp2p-gallery__main {
    position: relative;
    background: #f8fafc;
    border: 1px solid var(--tp-line);
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 1;
    display: flex; align-items: center; justify-content: center;
}
.tp2p-gallery__main img {
    max-width: 86%; max-height: 86%;
    object-fit: contain;
    transition: transform .3s;
}
.tp2p-gallery__main:hover img { transform: scale(1.04); }
.tp2p-gallery__badge {
    position: absolute; top: 1rem; left: 1rem;
    padding: .35rem .8rem; border-radius: 999px;
    font-size: .82rem; font-weight: 700; color: #fff;
    display: inline-flex; align-items: center; gap: .35rem;
    box-shadow: 0 4px 10px rgba(0,0,0,.12);
}
.tp2p-gallery__badge--sale { background: linear-gradient(135deg, #ef4444, #dc2626); }
.tp2p-gallery__badge--hit  { background: linear-gradient(135deg, #f59e0b, #d97706); }
.tp2p-gallery__badge--new  { background: linear-gradient(135deg, #10b981, #059669); }
.tp2p-gallery__badge--clearance { background: linear-gradient(135deg, #fb923c, #c2410c); }

/* ----- Блок «Уценка» под ценой на карточке товара ----- */
.tp2p-clearance {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 10px;
    padding: .85rem 1rem;
    margin: .85rem 0 1rem;
}
.tp2p-clearance__head { display:flex; align-items:center; gap:.5rem; color:#c2410c; font-size:.95rem; margin-bottom:.4rem; }
.tp2p-clearance__head .bi { font-size:1.1rem; }
.tp2p-clearance__pct { background:#fb923c; color:#fff; padding:.1rem .4rem; border-radius:4px; font-size:.78rem; font-weight:600; margin-left:auto; }
.tp2p-clearance__body { display:flex; align-items:baseline; gap:.55rem; flex-wrap:wrap; }
.tp2p-clearance__old { color:#94a3b8; text-decoration:line-through; font-size:.9rem; }
.tp2p-clearance__price { color:#c2410c; font-weight:700; font-size:1.4rem; }
.tp2p-clearance__stock { color:#64748b; font-size:.82rem; margin-left:auto; }
.tp2p-clearance__reason { font-size:.85rem; color:#475569; margin-top:.5rem; padding-top:.5rem; border-top:1px solid #fed7aa; display:flex; gap:.4rem; align-items:flex-start; }
.tp2p-clearance__reason .bi { color:#fb923c; flex-shrink:0; margin-top:.15rem; }
.tp2p-clearance__hint { font-size:.78rem; color:#78716c; margin-top:.4rem; line-height:1.4; }

/* ----- Список активных акций под ценой ----- */
.tp2p-promos { display:flex; flex-direction:column; gap:.4rem; margin:.85rem 0 1rem; }
.tp2p-promos__item {
    display:flex; align-items:center; gap:.55rem;
    padding:.55rem .8rem;
    background: #fef3c7; border:1px solid #fde68a;
    border-radius:8px;
    color:#92400e; text-decoration:none;
    font-size:.9rem;
    transition:background .12s;
}
.tp2p-promos__item:hover { background:#fde68a; color:#78350f; }
.tp2p-promos__item .bi { font-size:1rem; }
.tp2p-promos__name { font-weight:600; }
.tp2p-promos__until { margin-left:auto; font-size:.78rem; color:#a16207; }

.tp2p-gallery__thumbs {
    display: flex; gap: .5rem; overflow-x: auto; padding-bottom: 4px;
}
.tp2p-thumb {
    width: 64px; height: 64px; flex: 0 0 64px;
    border: 2px solid var(--tp-line);
    border-radius: 8px; padding: 4px;
    background: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: border-color .15s;
}
.tp2p-thumb:hover { border-color: var(--brand-blue-light); }
.tp2p-thumb.is-active { border-color: var(--brand-blue); }
.tp2p-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* ----- Info блок (правая колонка hero) ----- */
.tp2p-eyebrow {
    display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
    margin-bottom: .75rem;
}
.tp2p-eyebrow__brand {
    display: inline-flex; align-items: center; gap: .5rem;
    background: #f1f5f9; color: #131E26;
    padding: .35rem .75rem; border-radius: 8px;
    font-weight: 700; font-size: .9rem;
    text-decoration: none; transition: background .15s;
}
.tp2p-eyebrow__brand:hover { background: #e2e8f0; color: var(--brand-blue); }
.tp2p-eyebrow__brand img { max-height: 20px; width: auto; }
.tp2p-eyebrow__cat {
    color: var(--brand-blue); font-size: .88rem; font-weight: 500;
    text-decoration: none; padding: .35rem .65rem;
    border: 1px solid rgba(12,117,204,.25); border-radius: 8px;
    transition: background .15s;
}
.tp2p-eyebrow__cat:hover { background: rgba(12,117,204,.08); }

.tp2p-title {
    font-size: clamp(1.5rem, 2.5vw, 2.1rem);
    font-weight: 800;
    line-height: 1.18;
    color: #131E26;
    letter-spacing: -.01em;
    margin: 0 0 1rem;
}

.tp2p-meta {
    display: flex; align-items: center; gap: 1.25rem;
    flex-wrap: wrap;
    padding-bottom: 1.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--tp-line);
}
.tp2p-meta__art {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: .92rem;
}
.tp2p-meta__lbl { color: var(--tp-steel); }
.tp2p-meta__art code {
    background: #f1f5f9; padding: .25rem .55rem; border-radius: 6px;
    font-family: 'SF Mono','Menlo','Consolas',monospace;
    font-size: .92rem; font-weight: 700; color: #131E26;
}
.tp2p-copy {
    background: transparent; border: 0; cursor: pointer;
    padding: .35rem; border-radius: 6px; color: var(--tp-steel);
    transition: background .15s, color .15s;
    font-size: .9rem; line-height: 1;
}
.tp2p-copy:hover { background: #f1f5f9; color: var(--brand-blue); }
.tp2p-copy.is-done { color: #10b981; }

.tp2p-meta__rating {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: .9rem;
}
.tp2p-meta__rating .tp-stars { color: #f59e0b; font-size: .95rem; }
.tp2p-meta__rating span { font-weight: 700; color: #131E26; }
.tp2p-meta__rating a {
    color: var(--brand-blue); text-decoration: none;
    border-bottom: 1px dashed var(--brand-blue-light);
}
.tp2p-meta__rating--empty { color: var(--tp-steel); }
.tp2p-meta__rating--empty .bi { color: #cbd5e1; }

/* ----- Stock indicator ----- */
.tp2p-stock {
    background: #f8fafc;
    border-radius: 12px;
    padding: 1rem 1.15rem;
    margin-bottom: 1.25rem;
}
.tp2p-stock__row {
    display: flex; align-items: center; gap: .75rem;
    margin-bottom: .35rem;
}
.tp2p-stock__bar {
    flex: 0 0 80px; height: 6px;
    background: #e2e8f0; border-radius: 3px; overflow: hidden;
}
.tp2p-stock__fill {
    height: 100%; border-radius: 3px;
    transition: width .3s;
}
.tp2p-stock--high .tp2p-stock__fill   { width: 100%; }
.tp2p-stock--medium .tp2p-stock__fill { width: 65%; }
.tp2p-stock--low .tp2p-stock__fill    { width: 25%; }
.tp2p-stock--out .tp2p-stock__fill    { width: 0; }
.tp2p-stock__row strong {
    font-size: .98rem; font-weight: 700; color: #131E26;
}
/* CTA в одной строке с количеством: «более 25 шт. — Заказывайте смело». */
.tp2p-stock__cta {
    font-size: .9rem;
    color: var(--tp-steel);
    font-weight: 500;
}
.tp2p-stock__detail {
    font-size: .85rem; color: var(--tp-steel);
    margin-left: calc(80px + .75rem);
}
.tp2p-stock__ship {
    display: flex; align-items: center; gap: .5rem;
    margin-top: .75rem; padding-top: .75rem;
    border-top: 1px solid #e2e8f0;
    font-size: .88rem; color: #131E26;
}
.tp2p-stock__ship .bi { color: var(--brand-blue); font-size: 1.05rem; }

/* ----- Price ----- */
.tp2p-price {
    display: flex; align-items: baseline; gap: .75rem;
    flex-wrap: wrap; margin-bottom: 1.25rem;
}
.tp2p-price__main {
    font-size: 2.4rem; font-weight: 800; color: #131E26;
    letter-spacing: -.02em; line-height: 1;
}
.tp2p-price__old {
    font-size: 1.15rem; color: var(--tp-steel);
    text-decoration: line-through;
}
.tp2p-price__pct {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff; padding: .2rem .55rem; border-radius: 6px;
    font-size: .85rem; font-weight: 700;
}
.tp2p-price__hint {
    flex-basis: 100%; font-size: .85rem; color: var(--tp-steel);
    margin-top: -.35rem;
}

/* ----- BUY ROW ----- */
.tp2p-buy {
    display: flex; gap: .75rem;
    margin-bottom: 1.25rem;
}
.tp2p-qty {
    display: inline-flex; align-items: stretch;
    border: 1px solid var(--tp-line); border-radius: 10px;
    overflow: hidden; height: 56px; flex-shrink: 0;
}
.tp2p-qty__btn {
    width: 44px; background: #fff; border: 0; cursor: pointer;
    color: #131E26; font-size: 1.25rem; font-weight: 600;
    transition: background .15s;
}
.tp2p-qty__btn:hover { background: #f1f5f9; }
.tp2p-qty__input {
    width: 60px; border: 0; border-left: 1px solid var(--tp-line);
    border-right: 1px solid var(--tp-line);
    text-align: center; font-size: 1.05rem; font-weight: 700;
    color: #131E26; background: #fff;
    -moz-appearance: textfield;
}
.tp2p-qty__input::-webkit-outer-spin-button,
.tp2p-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ----- Кнопки v2-product (наследуют tp2-btn-* из главной) ----- */
.tp2p-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: .5rem; padding: .85rem 1.4rem; border-radius: 10px;
    font-weight: 700; font-size: .95rem;
    text-decoration: none; cursor: pointer; border: 0;
    transition: transform .1s, box-shadow .15s, background .15s, color .15s;
    white-space: nowrap; line-height: 1.2;
}
.tp2p-btn:active:not(:disabled) { transform: translateY(1px); }
.tp2p-btn:disabled { opacity: .5; cursor: not-allowed; }
.tp2p-btn--primary { background: #0C75CC; color: #fff; }
.tp2p-btn--primary:hover:not(:disabled) {
    background: #2A5C87; color: #fff;
    box-shadow: 0 8px 20px rgba(12,117,204,.35);
}
.tp2p-btn--ghost {
    background: transparent; color: var(--brand-blue);
    border: 1px solid var(--brand-blue);
}
.tp2p-btn--ghost:hover { background: var(--brand-blue); color: #fff; }
.tp2p-btn--lg { padding: 1rem 1.5rem; font-size: 1rem; flex: 1; min-width: 200px; }
.tp2p-btn--sm { padding: .45rem .85rem; font-size: .82rem; }

/* ----- Trust mini-row под кнопкой ----- */
.tp2p-trust {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem;
    margin-bottom: 1rem;
    padding: .85rem 0;
    border-top: 1px solid var(--tp-line);
    border-bottom: 1px solid var(--tp-line);
}
.tp2p-trust__item {
    display: flex; align-items: center; gap: .5rem;
    font-size: .82rem; color: var(--tp-steel); line-height: 1.2;
}
.tp2p-trust__item .bi {
    color: var(--brand-blue); font-size: 1.2rem; flex-shrink: 0;
}

/* ----- Aux actions ----- */
.tp2p-aux {
    display: flex; gap: .5rem; flex-wrap: wrap;
}
.tp2p-aux__btn {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .55rem .85rem; border-radius: 8px;
    background: #f1f5f9; color: #131E26; border: 0;
    font-size: .88rem; font-weight: 500; cursor: pointer;
    text-decoration: none; transition: background .15s;
}
.tp2p-aux__btn:hover { background: #e2e8f0; color: var(--brand-blue); }
.tp2p-aux__btn .bi { color: var(--brand-blue); }

@media (max-width: 540px) {
    .tp2p-buy { flex-direction: column; }
    .tp2p-qty { align-self: start; }
    .tp2p-btn--lg { width: 100%; }
    .tp2p-trust { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   ANCHOR TABS — sticky под header'ом
   ============================================================ */
.tp2p-tabs {
    position: sticky; top: 0; z-index: 100;
    background: #fff;
    border-bottom: 1px solid var(--tp-line);
    box-shadow: 0 2px 8px rgba(13,52,86,.04);
}
.tp2p-tabs__inner {
    display: flex; gap: .25rem; overflow-x: auto;
    padding: 0;
    scrollbar-width: thin;
}
.tp2p-tab {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: 1rem 1rem;
    color: var(--tp-steel); font-weight: 600; font-size: .92rem;
    text-decoration: none; white-space: nowrap;
    border-bottom: 3px solid transparent;
    transition: color .15s, border-color .15s;
}
.tp2p-tab:hover { color: #131E26; }
.tp2p-tab.is-active { color: var(--brand-blue); border-bottom-color: var(--brand-blue); }
.tp2p-tab__count {
    background: #f1f5f9; color: var(--tp-steel);
    padding: .1rem .45rem; border-radius: 999px;
    font-size: .75rem; font-weight: 700;
}
.tp2p-tab.is-active .tp2p-tab__count {
    background: var(--brand-blue); color: #fff;
}

/* ============================================================
   CONTENT SECTIONS
   ============================================================ */
.tp2p-content { background: #fafbfc; padding: 2rem 0 3rem; }
.tp2p-section {
    background: #fff;
    border: 1px solid var(--tp-line);
    border-radius: 16px;
    padding: 1.75rem;
    margin-bottom: 1.5rem;
    position: relative;
}
.tp2p-section__anchor {
    position: absolute; top: -80px; height: 1px;
    visibility: hidden;
}
.tp2p-section__title {
    font-size: 1.35rem; font-weight: 800; color: #131E26;
    margin: 0 0 .5rem; line-height: 1.2;
    display: inline-flex; align-items: center; gap: .5rem;
}
.tp2p-section__count {
    background: #f1f5f9; color: var(--brand-blue);
    padding: .15rem .55rem; border-radius: 6px;
    font-size: .85rem; font-weight: 700;
}
.tp2p-section__lead {
    color: var(--tp-steel); font-size: .92rem; line-height: 1.5;
    margin: 0 0 1.25rem;
    max-width: 720px;
}

@media (max-width: 720px) {
    .tp2p-section { padding: 1.25rem; }
}

/* ----- Описание ----- */
.tp2p-spec-summary {
    display: flex; align-items: flex-start; gap: .65rem;
    background: rgba(12,117,204,.06);
    border: 1px solid rgba(12,117,204,.18);
    border-radius: 10px;
    padding: .85rem 1rem;
    font-size: .92rem;
    color: #131E26; font-weight: 500;
    margin-bottom: 1.25rem;
}
.tp2p-spec-summary .bi {
    color: var(--brand-blue); font-size: 1.1rem;
    flex-shrink: 0; margin-top: 1px;
}
.tp2p-prose {
    font-size: .98rem; line-height: 1.65; color: #131E26;
}
.tp2p-prose p { margin-bottom: .85rem; }
.tp2p-empty {
    color: var(--tp-steel); font-size: .92rem; line-height: 1.6;
    background: #f8fafc; border-radius: 10px; padding: 1rem 1.25rem;
}
.tp2p-empty a { color: var(--brand-blue); font-weight: 600; }

/* ----- Specs table ----- */
.tp2p-specs {
    width: 100%; border-collapse: collapse;
    background: #fff;
}
.tp2p-specs tr { border-bottom: 1px solid var(--tp-line); }
.tp2p-specs tr:last-child { border-bottom: 0; }
.tp2p-specs th, .tp2p-specs td {
    padding: .75rem 0; vertical-align: top;
    font-size: .92rem; line-height: 1.4;
}
.tp2p-specs th {
    color: var(--tp-steel); font-weight: 500;
    width: 40%; text-align: left;
}
.tp2p-specs td { color: #131E26; font-weight: 500; }
.tp2p-mono {
    font-family: 'SF Mono','Menlo','Consolas',monospace;
    background: #f8fafc; padding: .15rem .45rem;
    border-radius: 5px; font-size: .9rem;
}

/* ----- Применимость ----- */
.tp2p-fitment {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
    margin-bottom: 1.25rem;
}
.tp2p-fit {
    background: #f8fafc; border: 1px solid var(--tp-line);
    border-radius: 12px; padding: 1rem 1.1rem;
    text-decoration: none; color: inherit;
    transition: transform .15s, border-color .15s, box-shadow .15s;
    display: block;
}
a.tp2p-fit:hover {
    transform: translateY(-2px); border-color: var(--brand-blue);
    box-shadow: 0 8px 18px rgba(13,52,86,.08);
    background: #fff;
}
.tp2p-fit__head {
    display: flex; align-items: center; gap: .65rem;
    margin-bottom: .65rem;
}
.tp2p-fit__head img { max-height: 32px; max-width: 56px; object-fit: contain; }
.tp2p-fit__head strong {
    font-size: 1rem; color: #131E26; font-weight: 700;
}
.tp2p-fit__nologo {
    width: 40px; height: 40px; border-radius: 8px;
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-bright));
    color: #fff; font-weight: 800; font-size: .9rem;
    display: flex; align-items: center; justify-content: center;
}
.tp2p-fit__models {
    display: flex; flex-wrap: wrap; gap: .35rem;
}
.tp2p-fit__model {
    background: #fff; color: var(--tp-steel);
    padding: .2rem .55rem; border-radius: 5px;
    font-size: .82rem; border: 1px solid var(--tp-line);
}
.tp2p-fit__more {
    color: var(--brand-blue); font-size: .82rem; font-weight: 700;
    padding: .2rem .25rem;
}
.tp2p-fitment-cta {
    background: rgba(245,158,11,.08);
    border: 1px solid rgba(245,158,11,.25);
    border-radius: 10px;
    padding: .85rem 1rem;
    font-size: .92rem; color: #131E26;
    display: flex; align-items: flex-start; gap: .65rem;
}
.tp2p-fitment-cta .bi { color: #d97706; flex-shrink: 0; margin-top: 2px; font-size: 1.05rem; }
.tp2p-fitment-cta a { color: var(--brand-blue); font-weight: 600; }

@media (max-width: 900px) { .tp2p-fitment { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .tp2p-fitment { grid-template-columns: 1fr; } }

/* ----- Аналоги таблица ----- */
.tp2p-analogs-wrap { overflow-x: auto; }
.tp2p-analogs {
    width: 100%; border-collapse: collapse;
    font-size: .92rem;
}
.tp2p-analogs thead th {
    background: #f8fafc;
    color: var(--tp-steel);
    font-weight: 600; font-size: .82rem;
    text-transform: uppercase; letter-spacing: .04em;
    padding: .65rem .85rem;
    border-bottom: 1px solid var(--tp-line);
    text-align: left;
}
.tp2p-analogs tbody td {
    padding: .85rem;
    border-bottom: 1px solid var(--tp-line);
    vertical-align: middle;
}
.tp2p-analogs tbody tr:hover { background: #fafbfc; }
.tp2p-analogs__photo {
    display: block; width: 48px; height: 48px;
    background: #f8fafc; border-radius: 6px; padding: 4px;
    border: 1px solid var(--tp-line);
}
.tp2p-analogs__photo img {
    width: 100%; height: 100%; object-fit: contain;
}
.tp2p-analogs__brand {
    color: var(--brand-blue); font-weight: 700;
    font-size: .82rem; letter-spacing: .03em;
    margin-bottom: 2px;
}
.tp2p-analogs__name {
    color: #131E26; font-weight: 500; text-decoration: none;
    line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.tp2p-analogs__name:hover { color: var(--brand-blue); }
.tp2p-analogs__price {
    font-size: 1rem; color: #131E26; font-weight: 800;
}
.tp2p-analogs__old {
    font-size: .8rem; color: var(--tp-steel);
    text-decoration: line-through; margin-bottom: 2px;
}

.tp2p-pill {
    display: inline-block; padding: .2rem .6rem;
    border-radius: 999px; font-size: .8rem; font-weight: 700;
    white-space: nowrap;
}
.tp2p-pill--in  { background: rgba(16,185,129,.12); color: #047857; }
.tp2p-pill--out { background: #f1f5f9; color: var(--tp-steel); }

@media (max-width: 720px) {
    .tp2p-analogs thead { display: none; }
    .tp2p-analogs, .tp2p-analogs tbody, .tp2p-analogs tr, .tp2p-analogs td {
        display: block; width: 100%;
    }
    .tp2p-analogs tr {
        border: 1px solid var(--tp-line);
        border-radius: 10px; margin-bottom: .75rem;
        padding: .75rem; position: relative;
    }
    .tp2p-analogs td { border: 0; padding: .25rem 0; }
}

/* ----- Кросс-номера / OEM — компактные inline-полоски в секции «Характеристики».
   В свёрнутом виде показано первые 24 чипа (~2-3 строки), остальные раскрываются
   по кнопке. is-expanded на родителе — переключает видимость скрытых. ----- */
.tp2p-numrow {
    margin-top: 1.25rem; padding-top: 1.25rem;
    border-top: 1px solid var(--tp-line);
}
.tp2p-numrow:first-of-type { margin-top: 1.5rem; }
.tp2p-numrow__head {
    display: flex; align-items: center; gap: .5rem;
    margin-bottom: .65rem;
}
.tp2p-numrow__head .bi { color: var(--brand-blue); font-size: 1.05rem; }
.tp2p-numrow__head strong {
    font-size: .98rem; color: #131E26; font-weight: 700;
}
.tp2p-numrow__cnt {
    background: #f1f5f9; color: var(--tp-steel);
    padding: .12rem .55rem; border-radius: 999px;
    font-size: .76rem; font-weight: 700; line-height: 1;
}
.tp2p-numrow__list {
    display: flex; flex-wrap: wrap; gap: .35rem;
}
.tp2p-numinline {
    display: inline-flex; align-items: baseline; gap: .35rem;
    padding: .3rem .65rem; border-radius: 6px;
    background: #f8fafc; color: #131E26;
    font-size: .85rem; line-height: 1.2;
    text-decoration: none;
    transition: background .15s, color .15s;
    max-width: 100%;
}
.tp2p-numinline:hover { background: rgba(12,117,204,.1); color: var(--brand-blue); }
.tp2p-numinline__brand {
    color: var(--tp-steel); font-weight: 600;
    font-size: .76rem; letter-spacing: .03em;
    text-transform: uppercase;
}
.tp2p-numinline:hover .tp2p-numinline__brand { color: var(--brand-blue); }
.tp2p-numinline__art {
    font-family: 'SF Mono','Menlo','Consolas',monospace;
    font-size: .85rem; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; max-width: 200px;
}

/* Скрытые до раскрытия */
.tp2p-numinline--hidden { display: none; }
.tp2p-numrow.is-expanded .tp2p-numinline--hidden { display: inline-flex; }

/* Кнопка раскрытия */
.tp2p-numrow__toggle {
    background: transparent; border: 0;
    color: var(--brand-blue); font-size: .85rem; font-weight: 600;
    padding: .35rem 0; margin-top: .5rem;
    cursor: pointer; display: inline-flex; align-items: center; gap: .35rem;
}
.tp2p-numrow__toggle::before {
    content: '+'; font-size: 1.05rem; line-height: 1;
    transition: transform .15s;
}
.tp2p-numrow.is-expanded .tp2p-numrow__toggle::before { content: '−'; }
.tp2p-numrow__toggle:hover { color: var(--brand-blue-dark); text-decoration: underline; }

.tp2p-numrow__toggle-show { display: inline; }
.tp2p-numrow__toggle-hide { display: none; }
.tp2p-numrow.is-expanded .tp2p-numrow__toggle-show { display: none; }
.tp2p-numrow.is-expanded .tp2p-numrow__toggle-hide { display: inline; }

@media (max-width: 540px) {
    .tp2p-numinline__art { max-width: 140px; }
}

/* ----- Все предложения (offers) ----- */
.tp2p-offers {
    width: 100%; border-collapse: collapse; font-size: .92rem;
}
.tp2p-offers thead th {
    background: #f8fafc; color: var(--tp-steel);
    font-weight: 600; font-size: .82rem;
    text-transform: uppercase; letter-spacing: .04em;
    padding: .65rem .85rem;
    border-bottom: 1px solid var(--tp-line);
    text-align: left;
}
.tp2p-offers tbody td {
    padding: .75rem .85rem;
    border-bottom: 1px solid var(--tp-line);
    color: #131E26;
}
.tp2p-offers tbody tr:first-child td {
    background: rgba(16,185,129,.04);
}

/* ----- Отзывы ----- */
.tp2p-reviews-summary {
    display: grid; grid-template-columns: 220px 1fr;
    gap: 2rem; align-items: center;
    background: #f8fafc; border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
.tp2p-reviews-summary__main { text-align: center; }
.tp2p-reviews-summary__num {
    font-size: 3.5rem; font-weight: 800;
    color: #131E26; line-height: 1; letter-spacing: -.02em;
}
.tp2p-reviews-summary__stars {
    color: #f59e0b; font-size: 1.25rem; margin: .35rem 0;
}
.tp2p-reviews-summary__cnt {
    color: var(--tp-steel); font-size: .9rem;
}
.tp2p-reviews-summary__bars {
    display: flex; flex-direction: column; gap: .35rem;
}
.tp2-rbar, .tp2p-rbar {
    display: grid; grid-template-columns: 40px 1fr 36px;
    gap: .65rem; align-items: center;
    font-size: .85rem;
}
.tp2p-rbar__lbl { color: var(--tp-steel); font-weight: 600; }
.tp2p-rbar__track {
    height: 8px; background: #e2e8f0; border-radius: 4px; overflow: hidden;
}
.tp2p-rbar__fill {
    height: 100%; background: linear-gradient(90deg, #f59e0b, #fbbf24);
    border-radius: 4px;
}
.tp2p-rbar__cnt { color: var(--tp-steel); text-align: right; }

@media (max-width: 720px) {
    .tp2p-reviews-summary { grid-template-columns: 1fr; }
}

.tp2p-reviews { display: flex; flex-direction: column; gap: 1rem; }
.tp2p-review {
    background: #fafbfc; border: 1px solid var(--tp-line);
    border-radius: 10px; padding: 1rem 1.15rem;
}
.tp2p-review header {
    display: flex; align-items: center; gap: .75rem;
    flex-wrap: wrap; margin-bottom: .5rem;
}
.tp2p-review header strong { color: #131E26; }
.tp2p-review__date { color: var(--tp-steel); font-size: .85rem; }
.tp2p-review__stars { color: #f59e0b; font-size: .92rem; }
.tp2p-review p { margin: 0; color: #131E26; line-height: 1.55; font-size: .95rem; }

.tp2p-empty-reviews {
    background: #f8fafc; border-radius: 12px;
    padding: 2.5rem 1.5rem; text-align: center;
}
.tp2p-empty-reviews .bi {
    font-size: 3rem; color: #cbd5e1; margin-bottom: .75rem;
}
.tp2p-empty-reviews h3 {
    font-size: 1.15rem; font-weight: 700; color: #131E26;
    margin: 0 0 .5rem;
}
.tp2p-empty-reviews p {
    color: var(--tp-steel); font-size: .92rem; line-height: 1.5;
    max-width: 440px; margin: 0 auto;
}

/* ----- С этим товаром покупают ----- */
.tp2p-related {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: .85rem;
}
.tp2p-rel {
    background: #fff; border: 1px solid var(--tp-line);
    border-radius: 10px; overflow: hidden;
    /* Чтобы абсолютный бейдж позиционировался относительно карточки */
    position: relative;
    text-decoration: none; color: inherit;
    transition: transform .15s, border-color .15s, box-shadow .15s;
    display: flex; flex-direction: column;
}
.tp2p-rel:hover {
    transform: translateY(-2px); border-color: var(--brand-blue);
    box-shadow: 0 8px 18px rgba(13,52,86,.08);
}
.tp2p-rel__photo {
    aspect-ratio: 1; background: #f8fafc;
    display: flex; align-items: center; justify-content: center;
    padding: .75rem;
}
.tp2p-rel__photo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.tp2p-rel__body {
    padding: .65rem .75rem .85rem; flex: 1;
    display: flex; flex-direction: column; gap: .25rem;
}
.tp2p-rel__brand {
    font-size: .72rem; font-weight: 700;
    color: var(--brand-blue); text-transform: uppercase;
    letter-spacing: .03em;
}
.tp2p-rel__name {
    font-size: .82rem; color: #131E26;
    line-height: 1.3; font-weight: 500;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.tp2p-rel__price {
    margin-top: auto; font-size: .92rem; color: #131E26;
    display: flex; align-items: baseline; gap: .35rem; flex-wrap: wrap;
}
.tp2p-rel__price strong { font-weight: 800; font-size: .95rem; }
.tp2p-rel__old {
    font-size: .75rem; color: var(--tp-steel); text-decoration: line-through;
}

/* Бейдж «Аналог» в углу карточки в блоке «Похожие товары». */
.tp2p-rel__badge {
    position: absolute;
    top: .5rem; left: .5rem;
    z-index: 2;
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    padding: .18rem .45rem;
    border-radius: 4px;
    display: inline-flex; align-items: center; gap: .25rem;
    text-transform: uppercase; letter-spacing: .03em;
    line-height: 1;
}
.tp2p-rel__badge--analogue {
    background: linear-gradient(135deg, #0c75cc, #0958a4);
    box-shadow: 0 2px 4px rgba(12,117,204,.25);
}
.tp2p-rel__badge .bi { font-size: .8rem; }

@media (max-width: 992px) { .tp2p-related { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 720px) { .tp2p-related { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .tp2p-related { grid-template-columns: repeat(2, 1fr); } }

/* ----- «Показать ещё» внизу блока похожих товаров -----
   Длинная плашка во всю ширину секции, прилипает к нижней границе.
   Эргономика: визуально продолжает контейнер вниз, не выглядит «оторванной». */
.tp2p-related-section {
    /* убираем нижний padding секции — плашка-кнопка стоит к самому краю */
    padding-bottom: 0 !important;
    overflow: hidden;
}
.tp2p-related-more {
    /* На всю ширину родительской секции — компенсируем боковые padding */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    width: calc(100% + 3.5rem);
    margin: 1.5rem -1.75rem 0;
    padding: 1rem 1.5rem;
    background: #f8fafc;
    border: 0;
    border-top: 1px solid var(--tp-line);
    color: var(--tp-graphite);
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.tp2p-related-more:hover {
    background: var(--brand-blue);
    color: #fff;
}
.tp2p-related-more .bi {
    font-size: 1.05rem;
    transition: transform .2s;
}
.tp2p-related-more:hover .bi {
    transform: translateY(2px);
}

@media (max-width: 720px) {
    .tp2p-related-more {
        width: calc(100% + 2.5rem);
        margin: 1.25rem -1.25rem 0;
    }
}


/* ============================================================
   FALLBACK для отсутствующих фото товаров (как armtek):
   .is-brand-fallback — лого бренда вместо фото товара (центрировано, ужато до 60%).
   .is-placeholder    — универсальная заглушка no-photo.svg (растягивается).
   ============================================================ */
.tp2-prod__photo.is-brand-fallback img,
.tp2p-gallery__main.is-brand-fallback img,
.tp2p-analogs__photo.is-brand-fallback img,
.tp2p-rel__photo.is-brand-fallback img {
    max-width: 60% !important;
    max-height: 60% !important;
    object-fit: contain;
    opacity: .85;
}
.tp2-prod__photo.is-brand-fallback,
.tp2p-rel__photo.is-brand-fallback {
    background: #f1f5f9;
}
.tp2p-gallery__main.is-brand-fallback {
    background: linear-gradient(135deg, #f8fafc 0%, #eef2f7 100%);
}
.tp2p-analogs__photo.is-brand-fallback {
    background: #f8fafc;
}

/* Универсальная заглушка no-photo.svg — растягивается чтобы было видно
   что товар «без фото пока что», а не просто пустой квадрат */
.tp2-prod__photo.is-placeholder img,
.tp2p-gallery__main.is-placeholder img,
.tp2p-rel__photo.is-placeholder img {
    opacity: .65;
    max-width: 70% !important;
    max-height: 70% !important;
}


/* ============================================================
   PROMO-CARDS на /sale и /promo/{slug}
   ============================================================ */
.tp-promo-card {
    display: block;
    background: #fff;
    border: 1px solid var(--tp-line);
    border-radius: var(--tp-radius);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    height: 100%;
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.tp-promo-card:hover {
    transform: translateY(-2px);
    border-color: var(--brand-blue);
    box-shadow: var(--tp-shadow);
    color: inherit;
}
.tp-promo-card__cover {
    aspect-ratio: 16/9;
    background-size: cover; background-position: center;
    background-color: #f1f5f9;
}
.tp-promo-card__cover--placeholder {
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #b45309;
    font-size: 3rem;
}
.tp-promo-card__body { padding: 1rem 1.25rem 1.25rem; }
.tp-promo-card__head { display:flex; gap:.5rem; align-items:center; margin-bottom:.5rem; }
.tp-promo-card__discount {
    background: #dc2626; color: #fff;
    font-weight: 800; font-size: 1rem;
    padding: .2rem .55rem; border-radius: 4px;
    line-height: 1;
}
.tp-promo-card__badge {
    background: #fef3c7; color: #b45309;
    border: 1px solid #fde68a;
    font-size: .7rem; font-weight: 700;
    padding: .2rem .5rem; border-radius: 4px;
    text-transform: uppercase; letter-spacing: .04em;
}
.tp-promo-card__name {
    font-size: 1.15rem; font-weight: 700;
    margin: 0 0 .55rem;
    color: var(--tp-graphite);
    line-height: 1.3;
}
.tp-promo-card__meta {
    display: flex; gap: 1rem; flex-wrap: wrap;
    font-size: .82rem; color: var(--tp-steel);
}
.tp-promo-card__meta .bi { color: var(--brand-blue); margin-right: .2rem; }


/* ============================================================
   PROMO PAGE — /promo/{slug}
   ============================================================ */
.tp-promo-hero {
    position: relative;
    color: #fff;
    background: linear-gradient(135deg, #0c75cc 0%, #0a5da4 100%);
    background-size: cover; background-position: center;
    padding: 3.5rem 0 3rem;
    margin-bottom: 1.5rem;
    overflow: hidden;
}
.tp-promo-hero.has-cover .tp-promo-hero__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(12,117,204,.85), rgba(15,23,42,.75));
}
.tp-promo-hero__content { position: relative; }
.tp-promo-hero__badges { display: flex; gap: .55rem; margin-bottom: 1rem; flex-wrap: wrap; }
.tp-promo-hero__discount {
    background: #dc2626;
    font-size: 1.5rem; font-weight: 800;
    padding: .35rem .85rem; border-radius: 6px;
    line-height: 1;
}
.tp-promo-hero__badge {
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.4);
    padding: .35rem .75rem; border-radius: 6px;
    font-size: .8rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em;
}
.tp-promo-hero h1 {
    font-size: 2.5rem; font-weight: 800;
    margin: 0 0 .5rem;
    line-height: 1.1;
}
.tp-promo-hero__until {
    font-size: 1rem; opacity: .9; margin: .75rem 0 0;
}
.tp-promo-hero__until .bi { margin-right: .3rem; }

.tp-promo-desc {
    max-width: 920px;
    color: var(--tp-graphite);
    line-height: 1.7;
    font-size: 1rem;
}
.tp-promo-desc h2 { font-size: 1.4rem; margin: 1.5rem 0 .75rem; }
.tp-promo-desc h3 { font-size: 1.15rem; margin: 1.25rem 0 .5rem; }
.tp-promo-desc p  { margin-bottom: 1rem; }
.tp-promo-desc ul, .tp-promo-desc ol { margin-bottom: 1rem; padding-left: 1.3rem; }
.tp-promo-desc a  { color: var(--brand-blue); }

/* Бейдж в углу карточки товара (внутри tp-product-card) */
.tp-product-card__badge {
    position: absolute; top: .55rem; left: .55rem;
    z-index: 2;
    color: #fff; font-size: .7rem; font-weight: 700;
    padding: .22rem .55rem; border-radius: 4px;
    display: inline-flex; align-items: center; gap: .25rem;
    text-transform: uppercase; letter-spacing: .04em;
    line-height: 1;
}
.tp-product-card__badge--hit       { background: linear-gradient(135deg, #f59e0b, #d97706); }
.tp-product-card__badge--sale      { background: linear-gradient(135deg, #ef4444, #dc2626); }
.tp-product-card__badge--new       { background: linear-gradient(135deg, #10b981, #059669); }
.tp-product-card__badge--clearance { background: linear-gradient(135deg, #fb923c, #c2410c); }

@media (max-width: 768px) {
    .tp-promo-hero { padding: 2rem 0; }
    .tp-promo-hero h1 { font-size: 1.6rem; }
    .tp-promo-hero__discount { font-size: 1.2rem; }
}


/* ============================================================
   ROWS — Хиты / Новинки / Акции (три горизонтальные карусели)
   ============================================================ */
.tp2-row {}

/* Компактные секции с рядами — меньше вертикального воздуха,
   чтобы три ряда подряд не растягивали страницу. */
.tp2-section--rows { padding: 1.25rem 0; }
.tp2-head--compact { margin-bottom: 1rem; }
.tp2-head--compact h2 {
    font-size: clamp(1.3rem, 1.9vw, 1.6rem);
    margin: 0 0 .15rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}
.tp2-head--compact .tp2-head__lead {
    font-size: .88rem;
    color: var(--tp-steel);
    margin: 0;
}
/* Иконка в заголовке вместо отдельного eyebrow */
.tp2-row__title-icon { font-size: .85em; vertical-align: -.05em; }
.tp2-row__title-icon--sale { color: #dc2626; }
.tp2-row__title-icon--hit  { color: #d97706; }
.tp2-row__title-icon--new  { color: #059669; }

/* eyebrow окрашиваем под смысл секции (на случай если где-то ещё используется) */
.tp2-eyebrow--sale .bi { color: #dc2626; }
.tp2-eyebrow--hit  .bi { color: #d97706; }
.tp2-eyebrow--new  .bi { color: #059669; }

/* ----- Viewport ----- */
.tp2-row__viewport {
    position: relative;
    overflow: hidden;
}
.tp2-row__track {
    display: flex;
    gap: 1rem;
    transition: transform .35s ease;
}
.tp2-row__track > .tp2-prod {
    flex: 0 0 calc((100% - 3rem) / 4); /* 4 карточки + 3 gap'а */
    min-width: 0;
}

/* ----- Стрелки навигации ----- */
.tp2-row__nav {
    position: absolute;
    top: 35%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--tp-line);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--tp-graphite);
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    z-index: 5;
    transition: background .15s, color .15s, opacity .15s;
}
.tp2-row__nav:hover { background: var(--brand-blue); color: #fff; border-color: var(--brand-blue); }
.tp2-row__nav:disabled { opacity: .35; cursor: default; }
.tp2-row__nav:disabled:hover { background: #fff; color: var(--tp-graphite); border-color: var(--tp-line); }
.tp2-row__nav .bi { font-size: 1.2rem; }
.tp2-row__nav--prev { left: -8px; }
.tp2-row__nav--next { right: -8px; }

/* ----- Адаптив ----- */
@media (max-width: 992px) {
    .tp2-row__track > .tp2-prod {
        flex: 0 0 calc((100% - 2rem) / 3); /* 3 карточки */
    }
}
@media (max-width: 720px) {
    .tp2-row__track > .tp2-prod {
        flex: 0 0 calc((100% - 1rem) / 2); /* 2 карточки */
    }
    .tp2-row__nav { display: none; }
    .tp2-row__viewport {
        scroll-snap-type: x mandatory;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .tp2-row__viewport::-webkit-scrollbar { display: none; }
    .tp2-row__track {
        transition: none;
    }
    .tp2-row__track > .tp2-prod {
        scroll-snap-align: start;
    }
}


/* CTA-subtitle под H1 категории — короткий призыв к действию контекстный к категории */
.tp-cta-subtitle{
    display:inline-flex;align-items:center;gap:.25rem;
    color:var(--brand-blue);font-weight:600;font-size:.92rem;
    margin-bottom:.4rem;
}
.tp-cta-subtitle .bi{font-size:1.05rem;line-height:1;}


/* ============================================================
   MOBILE APP-LIKE — bottom-nav, drawers, sticky CTA, header.
   Активно только на mobile (≤720px). Десктоп никаких изменений.
   ============================================================ */

/* Bottom navigation: фикс снизу, 5 пунктов */
.tp-mnav{
    display:none;
    position:fixed;left:0;right:0;bottom:0;z-index:1110;
    background:#fff;
    border-top:1px solid var(--tp-line, #e5e7eb);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom)) 4px;
    box-shadow:0 -8px 16px -8px rgba(15,23,42,.08);
    -webkit-tap-highlight-color:transparent;
}
.tp-mnav__item{
    flex:1;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    background:transparent;border:0;padding:6px 4px;
    color:#64748b;font-size:.7rem;font-weight:500;line-height:1;
    text-decoration:none;cursor:pointer;
    border-radius:10px;
    transition:color .15s ease, background .15s ease, transform .12s ease;
    min-height:54px;
    position:relative;
}
.tp-mnav__item .bi{font-size:1.35rem;line-height:1;}
.tp-mnav__item span{display:block;font-size:.68rem;letter-spacing:.01em;}
.tp-mnav__item.is-active{color:var(--brand-blue, #0C75CC);background:rgba(12,117,204,.08);}
.tp-mnav__item:active{transform:scale(.94);}
.tp-mnav__item:hover{color:var(--brand-blue, #0C75CC);}
.tp-mnav__icon-wrap{position:relative;display:inline-flex;}
.tp-mnav__cart-badge{
    position:absolute;top:-6px;right:-9px;
    background:#ef4444;color:#fff;font-size:.65rem;font-weight:700;
    padding:2px 5px;border-radius:8px;line-height:1;min-width:16px;text-align:center;
    box-shadow:0 0 0 2px #fff;
}

/* Drawer: full-screen modal с slide-in справа.
   bottom оставляет место для bottom-nav (60px + safe-area), чтобы юзер
   мог между drawer'ами переключаться без закрытия — единый паттерн как
   в мобильных приложениях. */
.tp-mdrawer{
    position:fixed;
    top:0;left:0;right:0;
    bottom:calc(60px + env(safe-area-inset-bottom));
    z-index:1100;
    background:#fff;
    display:flex;flex-direction:column;
    transform:translateX(100%);
    transition:transform .22s cubic-bezier(.4,0,.2,1);
    overflow:hidden;
    overscroll-behavior:contain;
    box-shadow:0 -8px 24px rgba(15,23,42,.12);
}
.tp-mdrawer.is-open{transform:translateX(0);}
.tp-mdrawer[hidden]{display:none;}
.tp-mdrawer__head{
    display:flex;align-items:center;gap:.5rem;
    padding:calc(.65rem + env(safe-area-inset-top)) 1rem .65rem;
    border-bottom:1px solid var(--tp-line, #e5e7eb);
    background:#fff;
    position:sticky;top:0;z-index:2;
}
.tp-mdrawer__close{
    background:#f1f5f9;border:0;
    width:38px;height:38px;border-radius:10px;
    display:flex;align-items:center;justify-content:center;
    color:var(--brand-black, #131E26);font-size:1.2rem;cursor:pointer;
    transition:background .12s ease;
}
.tp-mdrawer__close:active{background:#e2e8f0;transform:scale(.94);}
.tp-mdrawer__title{font-size:1.1rem;font-weight:700;color:var(--brand-black, #131E26);}
.tp-mdrawer__body{
    flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding:1rem 0 calc(1rem + env(safe-area-inset-bottom));
}
.tp-mdrawer-section{margin-bottom:1rem;}
.tp-mdrawer-section__head{
    font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
    color:#64748b;padding:.5rem 1rem .35rem;
}
.tp-mdrawer-list{list-style:none;margin:0;padding:0;}
.tp-mdrawer-list li{margin:0;}
.tp-mdrawer-list a, .tp-mdrawer-list button{
    display:flex;align-items:center;gap:.85rem;
    width:100%;padding:.85rem 1rem;
    background:transparent;border:0;text-align:left;
    color:var(--brand-black, #131E26);font-size:.95rem;font-weight:500;
    text-decoration:none;cursor:pointer;
    border-bottom:1px solid #f1f5f9;
    transition:background .12s ease;
    -webkit-tap-highlight-color:transparent;
}
.tp-mdrawer-list a:active, .tp-mdrawer-list button:active{background:#f8fafc;}
.tp-mdrawer-list .bi:first-child{
    flex-shrink:0;font-size:1.15rem;color:var(--brand-blue, #0C75CC);
    width:24px;text-align:center;
}
.tp-mdrawer-list span{flex:1;}
.tp-mdrawer-list .bi-chevron-right{font-size:.85rem;color:#cbd5e1;}

/* Search drawer */
.tp-mdrawer-search{padding:.5rem 1rem 0;}
.tp-mdrawer-search__input{
    position:relative;
    background:#f1f5f9;border-radius:12px;
    display:flex;align-items:center;
    padding:0 .85rem;
}
.tp-mdrawer-search__input .bi{font-size:1.1rem;color:#64748b;flex-shrink:0;}
.tp-mdrawer-search__input input{
    flex:1;border:0;background:transparent;
    padding:.85rem .65rem;font-size:1rem;
    color:var(--brand-black, #131E26);
    outline:none;
}
.tp-mdrawer-search__input input::placeholder{color:#94a3b8;}
.tp-mdrawer-search__hint{
    font-size:.78rem;color:#64748b;
    margin:.6rem .25rem 0;line-height:1.45;
}
.tp-mdrawer-search__hint code{
    background:#f1f5f9;padding:1px 6px;border-radius:4px;
    font-size:.8rem;color:var(--brand-black, #131E26);
}
.tp-mdrawer-search__submit{
    width:calc(100% - 2rem);margin:1rem 1rem 0;
    background:var(--brand-blue, #0C75CC);color:#fff;
    border:0;border-radius:12px;
    padding:.95rem 1rem;font-size:1rem;font-weight:600;
    cursor:pointer;transition:background .12s ease;
}
.tp-mdrawer-search__submit:active{background:var(--brand-blue-dark, #0a5ea3);transform:scale(.99);}

/* CTA-блок в Меню (звонок) */
.tp-mdrawer-cta{padding:1rem;}
.tp-mdrawer-cta__btn{
    display:flex;align-items:center;justify-content:center;gap:.5rem;
    background:var(--brand-blue, #0C75CC);color:#fff;
    border-radius:12px;padding:.95rem;
    font-size:1rem;font-weight:600;text-decoration:none;
}
.tp-mdrawer-cta__btn .bi{font-size:1.15rem;}

/* Body lock когда drawer открыт */
body.tp-mdrawer-locked{overflow:hidden;}

/* ============================================================
   Mobile only — активация bottom-nav и компактного header'а.
   Шире 720px ничего не меняем.
   ============================================================ */
@media (max-width: 720px){
    /* Показываем bottom-nav */
    .tp-mnav{display:flex;}

    /* Резервируем место под bottom-nav под main и helpbar */
    main{padding-bottom:calc(60px + env(safe-area-inset-bottom));}

    /* Helpbar поднимается над bottom-nav */
    .tp-helpbar{bottom:calc(60px + env(safe-area-inset-bottom)) !important;}

    /* Top-strip убираем на мобиле — занимает 40px и не несёт ценности
       (телефон уже в шапке + в Меню drawer есть). */
    .tp-topbar{display:none;}

    /* Promo-strip оставляем — но компактный */
    .tp-promo-strip{font-size:.78rem;padding:.4rem 0;}

    /* Шапка app-style: компактная, лого слева, поиск-иконка справа.
       Catalog-button и quick-actions прячем (они в bottom-nav и drawer). */
    .tp-header{padding:0;}
    .tp-header > .container{padding-top:.5rem;padding-bottom:.5rem;}
    .tp-header .tp-catalog-btn,
    .tp-header .tp-quick:not(.tp-quick--cart),
    .tp-header .tp-search.d-none.d-lg-flex{display:none !important;}
    .tp-header .d-flex.gap-2.ms-auto{margin-left:auto;}
    /* Корзину в шапке тоже скрываем — в bottom-nav уже есть */
    .tp-header .tp-quick--cart{display:none !important;}
    /* Гараж в шапке оставляем как иконку */
    .tp-header .tp-quick--garage{padding:.45rem .55rem;}
    .tp-header .tp-quick--garage .d-none.d-sm-inline{display:none !important;}

    /* Mobile поиск под шапкой (form .d-lg-none) — оставляем,
       но делаем компактнее */
    .tp-header .tp-search.d-lg-none{margin-top:.5rem !important;}
    .tp-header .tp-search.d-lg-none .form-control{padding:.55rem .85rem;font-size:.9rem;}

    /* Лого ужимаем */
    .tp-header .tp-logo img{height:38px;width:auto;}

    /* Footer — оставляем для SEO, но компактный */
    .tp-footer{padding-bottom:calc(60px + env(safe-area-inset-bottom)) !important;}
}

/* ============================================================
   Sticky-bars на карточке товара на мобиле.
   Существующие sticky-элементы поднимаются над bottom-nav.
   ============================================================ */
@media (max-width: 720px){
    /* Phase 2 sticky-header (приклеивается сверху при скролле) — не трогаем,
       у него top:0 и работает поверх контента. */

    /* Phase 2 sticky buy-rail (правая колонка sticky на десктопе) — на
       мобилке он рендерится inline в left col. Без правок. */

    /* Если в будущем добавим bottom buy-bar для карточки — он должен
       лежать над bottom-nav: */
    .tp2p-buybar-mobile{
        position:fixed;left:0;right:0;
        bottom:calc(60px + env(safe-area-inset-bottom));
        z-index:1095;
        background:#fff;
        border-top:1px solid var(--tp-line, #e5e7eb);
        box-shadow:0 -8px 16px -8px rgba(15,23,42,.08);
        padding:.65rem .85rem calc(.65rem + 0px);
    }
}

/* ============================================================
   PWA-режим (standalone) — когда сайт открыт как приложение с homescreen.
   Можно делать ещё native-feel: hide some elements, full-bleed hero и т.п.
   ============================================================ */
@media (display-mode: standalone){
    /* В standalone-режиме helpbar скрываем — bottom-nav уже есть и фон не закрывает контент */
    .tp-helpbar{display:none !important;}
    main{padding-bottom:calc(60px + env(safe-area-inset-bottom)) !important;}

    /* iOS standalone не имеет браузерной шапки — давайте добавим safe-area сверху */
    .tp-header{padding-top:env(safe-area-inset-top);}
}


/* ============================================================
   Сворачиваемые секции на мобиле — только содержимое схлопывается,
   на десктопе разворачиваются JS'ом (см. layout.php).
   ============================================================ */
.tp-collapse-section{
    background:#fff;border:1px solid var(--tp-line, #e5e7eb);
    border-radius:var(--tp-radius-sm, 8px);
    padding:0;
}
.tp-collapse-section[open]{padding-bottom:.5rem;}
.tp-collapse-section__summary{
    display:flex;align-items:center;gap:.5rem;
    padding:.75rem 1rem;cursor:pointer;
    list-style:none;
    font-weight:600;font-size:.95rem;color:var(--brand-black, #131E26);
    user-select:none;-webkit-tap-highlight-color:transparent;
}
.tp-collapse-section__summary::-webkit-details-marker{display:none;}
.tp-collapse-section__summary > .bi:first-child{color:var(--brand-blue, #0C75CC);font-size:1.05rem;}
.tp-collapse-section__summary > span:nth-of-type(1){flex:1;}
.tp-collapse-section__count{
    background:#f1f5f9;color:#64748b;
    font-size:.78rem;font-weight:600;
    padding:2px 8px;border-radius:10px;
}
.tp-collapse-section__chevron{
    color:#94a3b8;font-size:.95rem;
    transition:transform .2s ease;
}
.tp-collapse-section[open] .tp-collapse-section__chevron{transform:rotate(180deg);}
.tp-collapse-section > .row{padding:0 .85rem;}

/* Filter-card в сайдбаре в свёрнутом варианте — повторяем логику */
.tp-filter-card--collapsible > summary{
    display:flex;align-items:center;gap:.5rem;
    padding:.75rem 1rem;cursor:pointer;
    list-style:none;
    user-select:none;-webkit-tap-highlight-color:transparent;
}
.tp-filter-card--collapsible > summary::-webkit-details-marker{display:none;}
.tp-filter-card--collapsible > summary > span:first-child{flex:1;}
.tp-filter-card__count{
    background:#f1f5f9;color:#64748b;
    font-size:.78rem;font-weight:600;
    padding:2px 8px;border-radius:10px;
}
.tp-filter-card__chevron{
    color:#94a3b8;font-size:.85rem;
    transition:transform .2s ease;
}
.tp-filter-card--collapsible[open] .tp-filter-card__chevron{transform:rotate(180deg);}

/* На десктопе summary можно сделать менее «кнопочным»,
   chevron'ы и счётчики не нужны — JS откроет details, пользователь
   увидит просто заголовок-секцию + список. Скрывать chevron на десктопе
   тоже не критично — он остаётся повёрнутым и читается как «открыто». */
@media (min-width: 721px){
    .tp-collapse-section__chevron,
    .tp-filter-card--collapsible .tp-filter-card__chevron{display:none;}
    /* Курсор на summary тоже логично оставить только на мобиле */
    .tp-collapse-section__summary,
    .tp-filter-card--collapsible > summary{cursor:default;}
}


/* ============================================================
   Совмещение tp2-vehrow с tp-collapse-section.
   Сохраняем оригинальную вёрстку секции «Запчасти под вашу марку»,
   но добавляем сворачиваемый <details>.
   ============================================================ */

/* Базовые стили tp-collapse-section убираем когда совмещён с tp2-vehrow,
   чтобы рамка/паддинги секции не дублировались. */
.tp2-vehrow.tp-collapse-section{
    background:transparent;border:0;padding:0;
}
.tp2-vehrow.tp-collapse-section[open]{padding-bottom:0;}

/* Шапка vehrow: оставляем оригинальные стили, но делаем её summary-кликабельной.
   Прячем default-маркер, добавляем chevron справа на мобиле. */
.tp2-vehrow.tp-collapse-section > .tp2-vehrow__head{
    list-style:none;cursor:pointer;
    user-select:none;-webkit-tap-highlight-color:transparent;
}
.tp2-vehrow.tp-collapse-section > .tp2-vehrow__head::-webkit-details-marker{display:none;}

/* Счётчик марок в шапке — тот же стиль что и в общем .tp-collapse-section__count */
.tp2-vehrow.tp-collapse-section > .tp2-vehrow__head .tp-collapse-section__count{
    margin-left:auto;
}

/* Chevron на мобиле — справа после счётчика */
.tp2-vehrow.tp-collapse-section > .tp2-vehrow__head .tp-collapse-section__chevron{
    margin-left:.4rem;
}

/* На десктопе chevron и счётчик скрываем — секция всегда раскрыта */
@media (min-width: 721px){
    .tp2-vehrow.tp-collapse-section > .tp2-vehrow__head .tp-collapse-section__count,
    .tp2-vehrow.tp-collapse-section > .tp2-vehrow__head .tp-collapse-section__chevron{
        display:none;
    }
    .tp2-vehrow.tp-collapse-section > .tp2-vehrow__head{cursor:default;}
}


/* ============================================================
   Mobile: внутренний gutter контейнера. По дефолту Bootstrap
   ставит --bs-gutter-x: 1.5rem (12px / 12px), на мобиле увеличиваем
   чтобы карточки не прижимались к краю экрана и были видны их обводки.
   ============================================================ */
@media (max-width: 720px){
    .container{
        --bs-gutter-x: 1.5rem;  /* было 1.5rem (12+12), оставляем — но ниже не меньше */
        padding-left:14px;
        padding-right:14px;
    }
}


/* Кнопка сброса фильтра внутри развёрнутой секции */
.tp-filter-card__reset{
    padding:.4rem .85rem;
    font-size:.82rem;
}
.tp-filter-card__reset a{color:#dc2626;font-weight:500;text-decoration:underline;}
.tp-filter-card__reset a:hover{color:#b91c1c;}


/* ============================================================
   Infinite scroll — кнопка «Показать ещё» + sentinel
   ============================================================ */
.tp-inf-controls{
    display:flex;flex-direction:column;align-items:center;gap:.6rem;
    margin:1.5rem 0 .5rem;
}
.tp-inf-loadmore{
    background:#fff;border:1px solid var(--brand-blue);
    color:var(--brand-blue);font-weight:600;font-size:.95rem;
    padding:.75rem 1.75rem;border-radius:var(--tp-radius-sm);
    cursor:pointer;display:inline-flex;align-items:center;gap:.5rem;
    transition:all .15s;min-width:200px;justify-content:center;
}
.tp-inf-loadmore:hover{background:var(--brand-blue);color:#fff;}
.tp-inf-loadmore:disabled{opacity:.6;cursor:wait;}
.tp-inf-spinner .bi{display:inline-block;animation:tp-inf-spin .8s linear infinite;}
@keyframes tp-inf-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.tp-inf-status{font-size:.85rem;color:var(--tp-steel);}
.tp-inf-sentinel{height:1px;width:100%;}
/* Когда infinite-list активен, прячем стандартную пагинацию (она для ботов и noscript) */
html.tp-inf-active .tp-inf-fallback-pagination{display:none;}
/* Анимация появления новых карточек */
.tp-inf-fade-in{
    opacity:0;transform:translateY(8px);
    animation:tp-inf-fadein .35s ease forwards;
}
@keyframes tp-inf-fadein{to{opacity:1;transform:translateY(0)}}


/* ============================================================
   Cart page (mobile-first cards + desktop table)
   ============================================================ */

.tp-cart-page__title{margin-bottom:1.25rem;}

/* Empty state */
.tp-cart-empty{
    background:#fff;border:1px solid var(--tp-line);border-radius:var(--tp-radius);
    padding:2.5rem 1.5rem;text-align:center;
    display:flex;flex-direction:column;align-items:center;gap:.75rem;
}
.tp-cart-empty .bi{font-size:3rem;color:var(--tp-steel);}
.tp-cart-empty p{font-size:1.05rem;color:var(--tp-steel);margin:0;}

.tp-cart-link{color:var(--brand-black, #131E26);text-decoration:none;}
.tp-cart-link:hover{color:var(--brand-blue, #0C75CC);}

/* ============================================================
   Mobile: stack of cart-cards
   ============================================================ */
.tp-cart-cards{
    display:flex;flex-direction:column;gap:.65rem;
    margin-bottom:1rem;
}
.tp-cart-card{
    background:#fff;border:1px solid var(--tp-line);border-radius:var(--tp-radius-sm);
    padding:.85rem;
    display:grid;grid-template-columns:80px 1fr auto;gap:.85rem;align-items:start;
    position:relative;
}
.tp-cart-card__photo{
    width:80px;height:80px;
    background:#fff;border:1px solid var(--tp-line);border-radius:6px;
    overflow:hidden;
    display:flex;align-items:center;justify-content:center;
    padding:4px;
}
.tp-cart-card__photo img{
    max-width:100%;max-height:100%;width:auto;height:auto;
    object-fit:contain;display:block;
}
.tp-cart-card__body{min-width:0;display:flex;flex-direction:column;gap:.4rem;}
.tp-cart-card__meta{
    font-size:.78rem;color:var(--tp-steel);
    line-height:1.3;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tp-cart-card__meta strong{color:var(--brand-black, #131E26);font-weight:700;}
.tp-cart-card__name{
    font-size:.92rem;font-weight:500;line-height:1.3;
    color:var(--brand-black, #131E26);text-decoration:none;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;
}
a.tp-cart-card__name:hover{color:var(--brand-blue, #0C75CC);}
.tp-cart-card__row{
    display:flex;align-items:center;justify-content:space-between;gap:.65rem;
    margin-top:.25rem;
}
.tp-cart-card__qty{
    display:inline-flex;align-items:center;
    background:#f1f5f9;border-radius:8px;
    overflow:hidden;
}
.tp-cart-card__qty button{
    width:34px;height:34px;border:0;background:transparent;
    color:var(--brand-black, #131E26);font-size:1.1rem;font-weight:600;cursor:pointer;
    display:inline-flex;align-items:center;justify-content:center;
    -webkit-tap-highlight-color:transparent;
}
.tp-cart-card__qty button:active{background:#e2e8f0;}
.tp-cart-card__qty input{
    width:38px;height:34px;border:0;background:transparent;
    text-align:center;font-size:.92rem;font-weight:600;
    color:var(--brand-black, #131E26);
    outline:none;
    -moz-appearance:textfield;
}
.tp-cart-card__qty input::-webkit-outer-spin-button,
.tp-cart-card__qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.tp-cart-card__price{text-align:right;}
.tp-cart-card__sum{
    font-size:1rem;font-weight:800;
    color:var(--brand-black, #131E26);
    line-height:1.1;
}
.tp-cart-card__unit{
    font-size:.72rem;color:var(--tp-steel);margin-top:2px;
}
.tp-cart-card__remove{
    position:absolute;top:.5rem;right:.5rem;
    width:28px;height:28px;border-radius:6px;
    border:0;background:transparent;color:#94a3b8;
    font-size:1.15rem;line-height:1;cursor:pointer;
    display:inline-flex;align-items:center;justify-content:center;
    -webkit-tap-highlight-color:transparent;
}
.tp-cart-card__remove:hover{background:#fef2f2;color:#dc2626;}
.tp-cart-card__remove:active{transform:scale(.92);}

/* Mobile: sticky bottom bar with total + checkout button.
   Висит над bottom-nav (60px) с safe-area-inset-bottom. */
.tp-cart-bar{
    position:sticky;
    bottom:calc(60px + env(safe-area-inset-bottom));
    background:#fff;
    border-top:1px solid var(--tp-line);
    box-shadow:0 -8px 16px -8px rgba(15,23,42,.1);
    padding:.75rem .9rem;
    display:flex;align-items:center;gap:.85rem;
    z-index:50;
    margin:0 -14px;  /* Растянуть на ширину контейнера до экрана */
    padding-left:14px;padding-right:14px;
}
.tp-cart-bar__total{
    flex:1;display:flex;flex-direction:column;line-height:1.1;
}
.tp-cart-bar__total span{font-size:.78rem;color:var(--tp-steel);}
.tp-cart-bar__total strong{font-size:1.15rem;color:var(--brand-black, #131E26);font-weight:800;}
.tp-cart-bar__checkout{
    background:var(--brand-blue, #0C75CC);color:#fff;
    padding:.75rem 1.25rem;border-radius:10px;
    font-weight:600;font-size:.95rem;text-decoration:none;
    display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;
}
.tp-cart-bar__checkout:hover{background:var(--brand-blue-bright, #0058a3);color:#fff;}
.tp-cart-bar__checkout:active{transform:scale(.98);}

/* Маленькая кнопка "Очистить корзину" — внизу под карточками на мобиле */
.tp-cart-clear{margin-top:.5rem;text-align:center;}
.tp-cart-clear button{
    background:transparent;border:0;
    color:#dc2626;font-size:.85rem;font-weight:500;
    padding:.5rem;cursor:pointer;
    display:inline-flex;align-items:center;gap:.35rem;
}
.tp-cart-clear button:hover{text-decoration:underline;}


/* ============================================================
   Cart layout — two columns on desktop, single column on mobile.
   Карточки и summary одинаковые везде, меняется только раскладка.
   ============================================================ */

.tp-cart-layout{
    display:grid;
    grid-template-columns: 1fr 320px;
    gap:1.5rem;
    align-items:flex-start;
}
@media (max-width: 900px){
    .tp-cart-layout{
        grid-template-columns: 1fr;
        gap:0;
    }
}

/* На десктопе карточки крупнее: фото 100×100, читаемее текст */
@media (min-width: 901px){
    .tp-cart-card{
        grid-template-columns: 100px 1fr auto;
        padding:1rem 1.25rem;
        gap:1.25rem;
    }
    .tp-cart-card__photo{width:100px;height:100px;}
    .tp-cart-card__name{font-size:1rem;}
    .tp-cart-card__meta{font-size:.85rem;}
    .tp-cart-card__sum{font-size:1.15rem;}
}

/* Сводка — sticky-aside на десктопе, sticky-bottom-bar на мобиле */
.tp-cart-summary{
    background:#fff;border:1px solid var(--tp-line);border-radius:var(--tp-radius);
    padding:1.25rem;
    position:sticky;top:90px;
    display:flex;flex-direction:column;gap:.65rem;
}
.tp-cart-summary__head{
    font-size:1.05rem;font-weight:700;color:var(--brand-black, #131E26);
    margin-bottom:.5rem;
}
.tp-cart-summary__row{
    display:flex;justify-content:space-between;align-items:baseline;
    font-size:.92rem;color:var(--tp-steel);
    padding:.4rem 0;
}
.tp-cart-summary__row--total{
    border-top:1px solid var(--tp-line);
    padding-top:.85rem;margin-top:.25rem;
    font-size:1rem;color:var(--brand-black, #131E26);
    font-weight:600;
}
.tp-cart-summary__row--total strong{
    font-size:1.4rem;font-weight:800;
}
.tp-cart-summary__checkout{
    display:flex;align-items:center;justify-content:center;gap:.4rem;
    background:var(--brand-blue, #0C75CC);color:#fff;
    padding:.95rem 1.25rem;border-radius:var(--tp-radius-sm);
    font-weight:600;font-size:1rem;text-decoration:none;
    margin-top:.65rem;
    transition:background .12s;
}
.tp-cart-summary__checkout:hover{background:var(--brand-blue-bright, #0058a3);color:#fff;}
.tp-cart-summary__clear{
    background:transparent;border:0;color:#dc2626;
    font-size:.85rem;font-weight:500;
    padding:.5rem;cursor:pointer;
    display:inline-flex;align-items:center;justify-content:center;gap:.35rem;
    margin:0 auto;
}
.tp-cart-summary__clear:hover{text-decoration:underline;}
.tp-cart-summary__hint{
    font-size:.78rem;color:var(--tp-steel);
    text-align:center;margin-top:.5rem;line-height:1.4;
}
.tp-cart-summary__hint .bi{color:#10b981;margin-right:.2rem;}

/* На мобиле — sticky-bottom-bar вместо sidebar */
@media (max-width: 900px){
    .tp-cart-summary{
        position:sticky;top:auto;
        bottom:calc(60px + env(safe-area-inset-bottom));
        margin:.5rem -14px 0;
        border-radius:0;
        border-left:0;border-right:0;border-bottom:0;
        padding:.75rem .9rem;
        gap:.4rem;
        box-shadow:0 -8px 16px -8px rgba(15,23,42,.1);
        z-index:50;
    }
    .tp-cart-summary__head,
    .tp-cart-summary__hint,
    .tp-cart-summary__row:not(.tp-cart-summary__row--total){
        display:none; /* На мобиле компактнее: только итог + кнопка */
    }
    .tp-cart-summary__row--total{
        border-top:0;padding:0;margin:0;
        font-size:.92rem;
    }
    .tp-cart-summary__row--total strong{font-size:1.15rem;}
    .tp-cart-summary__checkout{
        margin-top:0;padding:.7rem 1rem;font-size:.9rem;
    }
    .tp-cart-summary__clear{
        font-size:.78rem;padding:.25rem;
    }
}