/* ============================ TOKENS ============================
     Light is the base. Dark redefines ONLY tokens, in both the
     system-preference and the explicit-stamp form, so the page holds
     in all three viewer states. */
  :root{
    --ground:#f2f4f7;
    --bg:#ffffff;
    --bg-soft:#f7f8fa;
    --ink:#15181d;
    --ink-2:#5a626e;
    --ink-3:#8b939f;
    --line:#e3e7ec;
    --line-soft:#eef1f5;
    --brand:#ffc528;
    --brand-hover:#f0b510;
    --brand-ink:#15181d;
    --action:#dc3a17;
    --action-hover:#bd2f10;
    --action-soft:#fdeeea;
    --dark:#1b2129;
    --dark-2:#252d38;
    --on-dark:#eef0f3;
    --on-dark-2:#9aa4b1;
    --ok:#1a7f4b;
    --ok-bg:#e8f5ee;
    --focus:#2563c9;
    --aside-bg:#fff8e6;
    --aside-line:#efdda6;
    --shadow:0 1px 2px rgba(21,24,29,.06), 0 4px 14px rgba(21,24,29,.05);
    --shadow-lg:0 8px 30px rgba(21,24,29,.12);
    --r:10px;
    --font:"Golos Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --ground:#0f1216;
      --bg:#181c22;
      --bg-soft:#1e232a;
      --ink:#eceef1;
      --ink-2:#a2abb7;
      --ink-3:#767f8b;
      --line:#2a313b;
      --line-soft:#232932;
      --brand:#f7c531;
      --brand-hover:#ffd451;
      --brand-ink:#15181d;
      --action:#ff6238;
      --action-hover:#ff7a55;
      --action-soft:#2c1710;
      --dark:#0b0e12;
      --dark-2:#151a21;
      --on-dark:#eceef1;
      --on-dark-2:#98a2ae;
      --ok:#4ac07f;
      --ok-bg:#12281c;
      --focus:#6ea8ff;
      --aside-bg:#241f12;
      --aside-line:#4d411f;
      --shadow:0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.3);
      --shadow-lg:0 8px 30px rgba(0,0,0,.5);
    }
  }
  :root[data-theme="dark"]{
    --ground:#0f1216;
    --bg:#181c22;
    --bg-soft:#1e232a;
    --ink:#eceef1;
    --ink-2:#a2abb7;
    --ink-3:#767f8b;
    --line:#2a313b;
    --line-soft:#232932;
    --brand:#f7c531;
    --brand-hover:#ffd451;
    --brand-ink:#15181d;
    --action:#ff6238;
    --action-hover:#ff7a55;
    --action-soft:#2c1710;
    --dark:#0b0e12;
    --dark-2:#151a21;
    --on-dark:#eceef1;
    --on-dark-2:#98a2ae;
    --ok:#4ac07f;
    --ok-bg:#12281c;
    --focus:#6ea8ff;
    --aside-bg:#241f12;
    --aside-line:#4d411f;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.3);
    --shadow-lg:0 8px 30px rgba(0,0,0,.5);
  }

  /* ============================ BASE ============================ */
  *{box-sizing:border-box;}
  html{-webkit-text-size-adjust:100%;}
  body{
    margin:0;background:var(--ground);color:var(--ink);
    font-family:var(--font);font-size:15px;line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,h4,h5{margin:0;font-weight:700;line-height:1.22;text-wrap:balance;letter-spacing:-.011em;}
  h1{font-size:clamp(1.5rem,2.6vw,2.05rem);font-weight:800;}
  h2{font-size:clamp(1.2rem,1.9vw,1.55rem);}
  h3{font-size:1rem;}
  p{margin:0;}
  ul{margin:0;padding:0;list-style:none;}
  a{color:inherit;}
  img{max-width:100%;display:block;}
  button{font:inherit;color:inherit;}
  :focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px;}
  .wrap{max-width:1280px;margin:0 auto;padding:0 20px;}
  .mono{font-family:var(--mono);font-variant-numeric:tabular-nums;}

  /* ============================ BUTTONS ============================ */
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    border:1px solid transparent;border-radius:8px;padding:.72em 1.15em;
    font-size:.9rem;font-weight:600;cursor:pointer;text-decoration:none;
    transition:background .15s,border-color .15s,color .15s;
  }
  .btn-action{background:var(--action);color:#fff;}
  .btn-action:hover{background:var(--action-hover);}
  .btn-brand{background:var(--brand);color:var(--brand-ink);}
  .btn-brand:hover{background:var(--brand-hover);}
  .btn-ghost{background:var(--bg);border-color:var(--line);color:var(--ink);}
  .btn-ghost:hover{border-color:var(--ink-3);}
  .btn-sm{padding:.5em .8em;font-size:.82rem;}
  .btn-block{width:100%;}

  /* ============================ UTILITY BAR ============================ */
  .utility{background:var(--dark);color:var(--on-dark-2);font-size:.8rem;}
  .utility .wrap{display:flex;align-items:center;gap:22px;height:38px;flex-wrap:wrap;overflow:hidden;}
  .utility a{color:var(--on-dark-2);text-decoration:none;}
  .utility a:hover{color:var(--brand);}
  .utility .u-right{margin-left:auto;display:flex;align-items:center;gap:14px;}
  .u-msg{display:flex;gap:8px;}
  .u-msg a{display:grid;place-items:center;width:24px;height:24px;border-radius:6px;background:var(--dark-2);}
  .u-msg svg{width:13px;height:13px;fill:currentColor;}
  .u-phone{display:none;font-weight:600;color:var(--brand)!important;}
  @media (max-width:900px){ .utility .u-hide{display:none;} .u-phone{display:inline;} }

  /* ============================ HEADER ============================ */
  .site-header{position:sticky;top:0;z-index:60;background:var(--bg);border-bottom:1px solid var(--line);}
  .header-row{display:flex;align-items:center;gap:16px;height:72px;}
  .brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex-shrink:0;}
  .brand-mark{width:38px;height:38px;flex-shrink:0;}
  .brand-name{font-size:1.12rem;font-weight:800;letter-spacing:-.02em;line-height:1.05;color:var(--ink);}
  .brand-sub{font-size:.7rem;color:var(--ink-3);font-weight:500;letter-spacing:.01em;}
  @media (max-width:1080px){ .brand-text{display:none;} }

  .cat-btn{
    display:inline-flex;align-items:center;gap:9px;background:var(--brand);color:var(--brand-ink);
    border:0;border-radius:8px;padding:.75em 1.1em;font-size:.92rem;font-weight:700;cursor:pointer;flex-shrink:0;
  }
  .cat-btn:hover{background:var(--brand-hover);}
  .cat-btn svg{width:16px;height:16px;}
  .cat-btn .bars line{stroke:currentColor;stroke-width:2;stroke-linecap:round;}
  @media (max-width:720px){ .cat-btn .cat-btn-label{display:none;} .cat-btn{padding:.75em .85em;} }

  /* ---- search ---- */
  .search{position:relative;flex:1;min-width:0;}
  .search-field{display:flex;align-items:center;border:2px solid var(--line);border-radius:8px;background:var(--bg-soft);transition:border-color .15s;}
  .search-field:focus-within{border-color:var(--brand);background:var(--bg);}
  .search-field input{
    flex:1;min-width:0;border:0;background:transparent;color:var(--ink);
    padding:.7em .5em .7em .9em;font-size:.92rem;font-family:inherit;
  }
  .search-field input::placeholder{color:var(--ink-3);}
  .search-field input::-webkit-search-cancel-button,
  .search-field input::-webkit-search-decoration{-webkit-appearance:none;appearance:none;}
  .search-field input:focus{outline:none;}
  .search-go{border:0;background:var(--brand);color:var(--brand-ink);margin:3px;border-radius:6px;padding:.5em .95em;cursor:pointer;display:grid;place-items:center;}
  .search-go:hover{background:var(--brand-hover);}
  .search-go svg{width:17px;height:17px;}
  .search-clear{border:0;background:transparent;color:var(--ink-3);cursor:pointer;padding:0 .5em;font-size:1.1rem;line-height:1;display:none;}
  .search-clear.show{display:block;}

  .suggest{
    position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--bg);
    border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-lg);
    max-height:min(70vh,520px);overflow-y:auto;z-index:70;display:none;padding:6px;
  }
  .suggest.open{display:block;}
  .suggest-head{font-size:.74rem;color:var(--ink-3);font-weight:600;padding:8px 10px 6px;}
  .suggest-item{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:8px;text-decoration:none;color:var(--ink);}
  .suggest-item:hover,.suggest-item.active{background:var(--bg-soft);}
  .suggest-thumb{width:40px;height:40px;border-radius:6px;background:#fff;border:1px solid var(--line-soft);flex-shrink:0;overflow:hidden;display:grid;place-items:center;}
  .suggest-thumb img{width:100%;height:100%;object-fit:cover;}
  .suggest-thumb svg{width:18px;height:18px;color:var(--ink-3);}
  .suggest-body{min-width:0;flex:1;display:block;}
  .suggest-t{display:block;font-size:.88rem;font-weight:600;line-height:1.3;}
  .suggest-t mark{background:transparent;color:var(--action);font-weight:700;}
  .suggest-p{display:block;font-size:.75rem;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .suggest-syn{font-size:.72rem;color:var(--ok);background:var(--ok-bg);border-radius:20px;padding:2px 8px;display:inline-block;margin-top:2px;}
  .suggest-empty{padding:22px 14px;text-align:center;color:var(--ink-2);font-size:.88rem;}
  .suggest-all{display:block;text-align:center;padding:10px;font-size:.85rem;font-weight:600;color:var(--action);text-decoration:none;border-top:1px solid var(--line-soft);margin-top:4px;}

  .header-contact{display:flex;flex-direction:column;align-items:flex-end;flex-shrink:0;}
  .header-phone{font-size:1.02rem;font-weight:700;text-decoration:none;color:var(--ink);white-space:nowrap;}
  .header-hours{font-size:.72rem;color:var(--ink-3);}
  @media (max-width:1180px){ .header-contact{display:none;} }
  .header-cta{flex-shrink:0;}
  @media (max-width:1320px){ .header-cta{display:none;} }

  /* ---- mega menu ---- */
  .mega{
    position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-lg);display:none;z-index:59;max-height:calc(100vh - 110px);overflow-y:auto;
  }
  .mega.open{display:block;}
  .mega-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;padding:26px 0 34px;}
  @media (max-width:940px){ .mega-grid{grid-template-columns:1fr;gap:22px;padding:18px 0 26px;} }
  .mega-dir > a.mega-dir-t{
    display:flex;align-items:center;gap:9px;font-size:.95rem;font-weight:800;color:var(--ink);
    text-decoration:none;padding-bottom:10px;margin-bottom:12px;border-bottom:2px solid var(--brand);
  }
  .mega-dir-t svg{width:19px;height:19px;color:var(--action);}
  .mega-sec{margin-bottom:15px;}
  .mega-sec > a{display:block;font-size:.84rem;font-weight:700;color:var(--ink);text-decoration:none;margin-bottom:5px;}
  .mega-sec > a:hover{color:var(--action);}
  .mega-sec ul{display:flex;flex-direction:column;gap:1px;}
  .mega-sec ul a{display:block;font-size:.83rem;color:var(--ink-2);text-decoration:none;padding:2px 0;}
  .mega-sec ul a:hover{color:var(--action);}
  .mega-backdrop{position:fixed;inset:0;background:rgba(21,24,29,.35);z-index:58;display:none;}
  /* На телефоне меню занимает весь экран и перекрывает фон — закрыть его
     нечем, поэтому нужна явная кнопка. */
  .mega-close{display:none;position:sticky;top:0;z-index:2;width:100%;text-align:right;
    background:var(--bg);border:0;padding:12px 20px 6px;font:inherit;font-size:.88rem;
    font-weight:600;color:var(--ink-2);cursor:pointer;}
  @media (max-width:940px){ .mega-close{display:block;} }
  .mega-backdrop.open{display:block;}

  /* ============================ LAYOUT ============================ */
    .page{padding:22px 0 60px;}
  .crumb{display:flex;flex-wrap:wrap;gap:7px;align-items:center;font-size:.79rem;color:var(--ink-3);margin-bottom:16px;}
  .crumb a{color:var(--ink-3);text-decoration:none;}
  .crumb a:hover{color:var(--action);}
  .crumb .sep{opacity:.5;}
  .crumb .current{color:var(--ink-2);}

  .cat-layout{display:grid;grid-template-columns:250px 1fr;gap:26px;align-items:start;}
  /* элементы grid по умолчанию не уменьшаются меньше содержимого: широкая
     таблица растягивала бы всю страницу вместо того, чтобы прокручиваться */
  .cat-layout > *{min-width:0;}
  .product > *{min-width:0;}
  .cart-layout > *{min-width:0;}
  @media (max-width:940px){ .cat-layout{grid-template-columns:1fr;} .sidebar{display:none;} }
  .sidebar{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:8px;position:sticky;top:88px;max-height:calc(100vh - 108px);overflow-y:auto;}
  .sb-dir{margin-bottom:4px;}
  .sb-dir > a{display:block;font-size:.85rem;font-weight:700;color:var(--ink);text-decoration:none;padding:8px 10px;border-radius:7px;}
  .sb-dir > a:hover{background:var(--bg-soft);}
  .sb-sec{padding:2px 0 6px 10px;}
  .sb-sec > a{display:block;font-size:.8rem;font-weight:600;color:var(--ink-2);text-decoration:none;padding:5px 8px;border-radius:6px;}
  .sb-sec > a:hover{background:var(--bg-soft);color:var(--ink);}
  .sb-sec ul{padding-left:8px;border-left:2px solid var(--line-soft);margin:2px 0 4px;}
  .sb-sec ul a{display:block;font-size:.79rem;color:var(--ink-2);text-decoration:none;padding:4px 8px;border-radius:6px;}
  .sb-sec ul a:hover{background:var(--bg-soft);color:var(--ink);}
  .sb-sec ul a.current{background:var(--action-soft);color:var(--action);font-weight:600;}

  .page-head{margin-bottom:20px;}
  .page-head p.lede{color:var(--ink-2);font-size:.92rem;margin-top:8px;max-width:70ch;}
  .count-pill{display:inline-block;font-size:.78rem;color:var(--ink-3);margin-left:10px;font-weight:500;vertical-align:middle;}

  /* ---- card grid ---- */
  .grid{display:grid;gap:14px;}
  .grid-4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));}
  .grid-3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
  .card{
    background:var(--bg);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
    display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s;
  }
  .card:hover{border-color:var(--ink-3);box-shadow:var(--shadow);}
  .card-media{aspect-ratio:4/3;background:#fff;display:grid;place-items:center;overflow:hidden;border-bottom:1px solid var(--line-soft);}
  .card-media img{width:100%;height:100%;object-fit:cover;}
  .card-media svg{width:38px;height:38px;color:var(--ink-3);}
  .card-body{padding:12px 13px 14px;display:flex;flex-direction:column;gap:5px;flex:1;}
  .card-title{font-size:.88rem;font-weight:600;line-height:1.35;}
  .card-meta{font-size:.78rem;color:var(--ink-3);margin-top:auto;padding-top:6px;}
  .card-cta{font-size:.8rem;color:var(--action);font-weight:600;margin-top:auto;padding-top:6px;}

  /* ---- section cards (catalog index) ---- */
  .dir-block{margin-bottom:34px;}
  .dir-block-head{display:flex;align-items:center;gap:11px;margin-bottom:14px;}
  .dir-block-head svg{width:22px;height:22px;color:var(--action);}
  .dir-block-head h2{font-size:1.16rem;}
  .dir-block-head .code{font-family:var(--mono);font-size:.72rem;color:var(--ink-3);background:var(--bg-soft);border:1px solid var(--line);border-radius:5px;padding:2px 7px;}
  .dir-grid{display:grid;gap:14px;grid-template-columns:1fr;}
  @media (min-width:700px){ .dir-grid{grid-template-columns:repeat(2,1fr);} }
  @media (min-width:1100px){ .dir-grid{grid-template-columns:repeat(4,1fr);} }
  .aside-card{background:var(--aside-bg);border:1px solid var(--aside-line);border-radius:var(--r);
    padding:16px;display:flex;flex-direction:column;gap:8px;}
  .aside-card .ac-ic{width:34px;height:34px;border-radius:9px;background:var(--brand);color:var(--brand-ink);display:grid;place-items:center;}
  .aside-card .ac-ic svg{width:18px;height:18px;}
  .aside-card h3{font-size:.95rem;}
  .aside-card p{font-size:.83rem;color:var(--ink-2);}
  .aside-card .btn{margin-top:auto;align-self:flex-start;}
  .sec-card{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:9px;}
  .sec-card-head{display:flex;align-items:center;gap:10px;}
  .sec-card-head svg{width:20px;height:20px;color:var(--action);flex-shrink:0;}
  .sec-card-head a{font-size:.98rem;font-weight:700;text-decoration:none;color:var(--ink);}
  .sec-card-head a:hover{color:var(--action);}
  .sec-links{display:flex;flex-direction:column;gap:3px;}
  .sec-links a{font-size:.85rem;color:var(--ink-2);text-decoration:none;padding:2px 0;display:flex;justify-content:space-between;gap:10px;}
  .sec-links a:hover{color:var(--action);}
  .sec-links a span{color:var(--ink-3);font-size:.77rem;flex-shrink:0;}

  /* ============================ HOME ============================ */
  .hero{background:var(--bg);border-bottom:1px solid var(--line);}
  .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;padding:46px 0 50px;}
  @media (max-width:940px){ .hero-grid{grid-template-columns:1fr;gap:28px;padding:30px 0 34px;} }
  .hero h1{font-size:clamp(1.75rem,3.4vw,2.6rem);font-weight:800;letter-spacing:-.022em;}
  .hero h1 em{font-style:normal;color:var(--action);}
  .hero-lede{color:var(--ink-2);font-size:1rem;margin-top:15px;max-width:56ch;}
  .hero-cta{display:flex;gap:11px;margin-top:24px;flex-wrap:wrap;}
  .hero-facts{display:flex;gap:26px;margin-top:26px;flex-wrap:wrap;}
  .hero-fact strong{display:block;font-size:1.4rem;font-weight:800;line-height:1.1;}
  .hero-fact span{font-size:.79rem;color:var(--ink-3);}
  .hero-panel{background:var(--bg-soft);border:1px solid var(--line);border-radius:14px;padding:18px;}
  .hero-panel h3{font-size:.85rem;color:var(--ink-3);font-weight:600;margin-bottom:12px;}
  .quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
  @media (max-width:520px){ .quick-grid{grid-template-columns:1fr;} }
  .quick{
    display:flex;align-items:center;gap:10px;background:var(--bg);border:1px solid var(--line);
    border-radius:9px;padding:10px 11px;text-decoration:none;color:var(--ink);font-size:.85rem;font-weight:600;
  }
  .quick:hover{border-color:var(--action);color:var(--action);}
  .quick .qi{width:30px;height:30px;border-radius:7px;overflow:hidden;flex-shrink:0;background:#fff;display:grid;place-items:center;}
  .quick .qi img{width:100%;height:100%;object-fit:cover;}

  .band{padding:44px 0;}
  .band.soft{background:var(--bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
  .band-head{margin-bottom:20px;}
  .band-head h2{margin-bottom:7px;}
  .band-head p{color:var(--ink-2);font-size:.92rem;max-width:66ch;}

  .why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;}
  .why{display:flex;gap:12px;}
  .why-ic{width:38px;height:38px;border-radius:9px;background:var(--action-soft);color:var(--action);display:grid;place-items:center;flex-shrink:0;}
  .why-ic svg{width:19px;height:19px;}
  .why h4{font-size:.92rem;font-weight:700;margin-bottom:4px;}
  .why p{font-size:.85rem;color:var(--ink-2);}

  /* ---- lead form ---- */
  .lead{background:var(--dark);color:var(--on-dark);border-radius:14px;padding:32px;display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;}
  @media (max-width:840px){ .lead{grid-template-columns:1fr;gap:22px;padding:24px;} }
  .lead h2{color:var(--on-dark);}
  .lead p{color:var(--on-dark-2);font-size:.92rem;margin-top:9px;}
  .lead-form{display:flex;flex-direction:column;gap:10px;}
  .field label{display:block;font-size:.78rem;color:var(--ink-3);margin-bottom:4px;font-weight:500;}
  .lead .field label{color:var(--on-dark-2);}
  .field input,.field textarea{
    width:100%;border:1px solid var(--line);border-radius:8px;padding:.68em .8em;
    background:var(--bg);color:var(--ink);font:inherit;font-size:.9rem;
  }
  .lead .field input,.lead .field textarea{background:var(--dark-2);border-color:#3a4552;color:var(--on-dark);}
  .field textarea{resize:vertical;min-height:78px;}
  .form-note{font-size:.75rem;color:var(--ink-3);}
  .lead .form-note{color:var(--on-dark-2);}
  .form-ok{display:none;background:var(--ok-bg);color:var(--ok);border-radius:9px;padding:16px;font-size:.9rem;font-weight:600;}
  .form-ok.show{display:block;}

  /* ============================ PRODUCT ============================ */
  .product{display:grid;grid-template-columns:440px 1fr;gap:34px;align-items:start;}
  @media (max-width:900px){ .product{grid-template-columns:1fr;gap:22px;} }
  .gallery{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;}
  .gallery-main{aspect-ratio:4/3;background:#fff;display:grid;place-items:center;overflow:hidden;}
  .gallery-main img{width:100%;height:100%;object-fit:cover;}
  .gallery-main svg{width:78px;height:78px;color:var(--ink-3);}
  .photo-note{font-size:.76rem;color:var(--ink-3);padding:10px 13px;border-top:1px solid var(--line-soft);line-height:1.45;}
  .badge-gost{display:inline-flex;align-items:center;gap:7px;font-size:.76rem;font-weight:600;color:var(--ok);background:var(--ok-bg);border-radius:20px;padding:5px 11px;margin-top:12px;}
  .badge-gost svg{width:14px;height:14px;}

  .p-eyebrow{font-size:.8rem;color:var(--ink-3);margin-bottom:7px;}
  .p-desc{color:var(--ink-2);font-size:.94rem;margin-top:13px;max-width:66ch;}
  .buy{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:18px;margin-top:20px;display:flex;flex-wrap:wrap;gap:11px;align-items:center;}
  .buy .buy-note{width:100%;font-size:.8rem;color:var(--ink-3);}
  .qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:8px;overflow:hidden;}
  .qty button{border:0;background:var(--bg-soft);width:34px;height:38px;cursor:pointer;font-size:1.05rem;}
  .qty button:hover{background:var(--line-soft);}
  .qty input{width:56px;height:38px;border:0;text-align:center;background:var(--bg);color:var(--ink);font-family:var(--mono);font-size:.9rem;}
  .qty input:focus{outline:none;}

  details.spec{border:1px solid var(--line);border-radius:var(--r);background:var(--bg);margin-top:14px;overflow:hidden;}
  details.spec > summary{cursor:pointer;padding:13px 16px;font-weight:700;font-size:.93rem;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:10px;}
  details.spec > summary::-webkit-details-marker{display:none;}
  details.spec > summary::after{content:"+";color:var(--ink-3);font-weight:600;font-size:1.15rem;}
  details.spec[open] > summary::after{content:"−";}
  details.spec > summary:hover{background:var(--bg-soft);}
  .spec-body{padding:0 16px 16px;}

  table.tbl{width:100%;border-collapse:collapse;font-size:.87rem;}
  table.tbl td,table.tbl th{padding:9px 11px;border-bottom:1px solid var(--line-soft);text-align:left;}
  table.tbl th{font-size:.78rem;color:var(--ink-3);font-weight:600;background:var(--bg-soft);}
  table.tbl td:first-child{color:var(--ink-2);}
  table.tbl .num{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right;}
  table.tbl .code{font-family:var(--mono);font-size:.83rem;}
  .tbl-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--bg);}
  tr.grp td{background:var(--bg-soft);font-weight:700;font-size:.82rem;}
  .price{color:var(--action);font-weight:700;}

  .steps{display:flex;flex-direction:column;gap:12px;}
  .step{display:flex;gap:12px;}
  .step b{width:26px;height:26px;border-radius:50%;background:var(--brand);color:var(--brand-ink);display:grid;place-items:center;font-size:.78rem;flex-shrink:0;}
  .step p{font-size:.87rem;color:var(--ink-2);}
  .step p strong{color:var(--ink);}

  .related{margin-top:30px;}
  .related h3{margin-bottom:12px;font-size:1rem;}

  /* ---- price tools ---- */
  .tools{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:14px;}
  .tools .mini-search{position:relative;flex:1;min-width:220px;max-width:340px;}
  .tools .mini-search input{width:100%;border:1px solid var(--line);border-radius:8px;padding:.6em .8em .6em 2.2em;background:var(--bg);color:var(--ink);font:inherit;font-size:.87rem;}
  .tools .mini-search svg{position:absolute;left:.7em;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--ink-3);}
  .tools .res{font-size:.8rem;color:var(--ink-3);font-family:var(--mono);}

  /* ---- info pages ---- */
  .info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:16px;}
  .info-card{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:18px;}
  .info-card h3{font-size:.95rem;margin-bottom:8px;}
  .info-card p,.info-card li{font-size:.88rem;color:var(--ink-2);}
  .info-card ul{display:flex;flex-direction:column;gap:6px;margin-top:8px;}
  .info-card ul li{padding-left:16px;position:relative;}
  .info-card ul li::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:50%;background:var(--brand);}
  .contact-row{display:flex;flex-direction:column;gap:3px;margin-bottom:14px;}
  .contact-row .lbl{font-size:.76rem;color:var(--ink-3);}
  .contact-row .val{font-size:.98rem;font-weight:600;text-decoration:none;color:var(--ink);}
  .contact-row a.val:hover{color:var(--action);}

  .about-photo{margin-top:22px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);}
  .about-photo img{width:100%;max-height:300px;object-fit:cover;}
  .about-photo p{font-size:.78rem;color:var(--ink-3);padding:10px 14px;background:var(--bg);}

  /* ============================ FOOTER ============================ */
  .site-footer{background:var(--dark);color:var(--on-dark-2);margin-top:auto;}
  .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:30px;padding:40px 0 30px;}
  @media (max-width:840px){ .footer-grid{grid-template-columns:1fr 1fr;gap:24px;} }
  @media (max-width:520px){ .footer-grid{grid-template-columns:1fr;} }
  .footer-grid h4{color:var(--on-dark);font-size:.88rem;margin-bottom:11px;}
  .footer-grid ul{display:flex;flex-direction:column;gap:7px;}
  .footer-grid a{color:var(--on-dark-2);text-decoration:none;font-size:.85rem;}
  .footer-grid a:hover{color:var(--brand);}
  .footer-blurb{font-size:.85rem;line-height:1.6;margin-top:10px;max-width:44ch;}
  .footer-bottom{border-top:1px solid var(--dark-2);padding:15px 0;display:flex;justify-content:space-between;gap:14px;font-size:.79rem;flex-wrap:wrap;}

  /* ---- floating call ---- */
  .fab{
    position:fixed;right:18px;bottom:18px;z-index:55;width:52px;height:52px;border-radius:50%;
    background:var(--action);color:#fff;display:none;place-items:center;box-shadow:var(--shadow-lg);text-decoration:none;
  }
  .fab svg{width:22px;height:22px;}
  @media (max-width:1180px){ .fab{display:grid;} }

  .toast{
    position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);background:var(--dark);color:var(--on-dark);
    font-size:.85rem;font-weight:600;padding:.8em 1.3em;border-radius:9px;opacity:0;pointer-events:none;
    transition:opacity .18s,transform .18s;z-index:99;box-shadow:var(--shadow-lg);
  }
  .toast.show{opacity:1;transform:translate(-50%,0);}

  @media (prefers-reduced-motion: reduce){ *{transition:none !important;animation:none !important;} }

  /* серверная версия */
  .pic-none{display:block;width:100%;height:100%;background:repeating-linear-gradient(45deg,#f4f5f7,#f4f5f7 8px,#eceef1 8px,#eceef1 16px);}
  .card-media img,.gallery-main img{width:100%;height:100%;object-fit:contain;padding:6%;}
  .card-media img.photo,.gallery-main img.photo{object-fit:cover;padding:0;}
  .suggest-thumb img{object-fit:contain;padding:3px;}
  .quick .qi img{object-fit:contain;padding:2px;}
  .form-err{background:#fdeeea;color:#a5301a;border:1px solid #f0c4b8;border-radius:8px;padding:11px 13px;font-size:.86rem;margin-bottom:10px;}
  .agree{display:flex;gap:9px;align-items:flex-start;font-size:.78rem;color:var(--ink-3);line-height:1.45;}
  .agree input{margin-top:2px;flex-shrink:0;width:15px;height:15px;}
  .lead .agree{color:var(--on-dark-2);}
  .agree a{color:inherit;text-decoration:underline;}
  .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
  .prose{max-width:70ch;}
  .prose h2{font-size:1.05rem;margin:22px 0 8px;}
  .prose p{margin-bottom:10px;color:var(--ink-2);font-size:.9rem;}
  .prose ul{margin:8px 0 14px;display:flex;flex-direction:column;gap:6px;}
  .prose li{position:relative;padding-left:16px;color:var(--ink-2);font-size:.9rem;}
  .prose li::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:50%;background:var(--brand);}
  .price-tag{font-size:1.25rem;font-weight:800;color:var(--action);}
  .price-tag span{font-size:.8rem;font-weight:500;color:var(--ink-3);}
  .card-price{font-size:.95rem;font-weight:700;color:var(--action);margin-top:4px;}

  /* ===== артикул, наличие, бейджи ===== */
  .card-sku{font-family:var(--mono);font-size:.72rem;color:var(--ink-3);letter-spacing:.02em;}
  .badge{position:absolute;top:8px;left:8px;z-index:2;font-size:.7rem;font-weight:700;
    border-radius:20px;padding:3px 9px;color:#fff;letter-spacing:.01em;}
  .b-hit{background:var(--action);} .b-new{background:#1a7f4b;} .b-sale{background:#8a3ffc;}
  .card-media{position:relative;}
  .stock{font-size:.76rem;font-weight:600;display:inline-flex;align-items:center;gap:5px;}
  .stock::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;}
  .s-in{color:#1a7f4b;} .s-order{color:#b8860b;} .s-soon{color:var(--ink-3);}
  .p-meta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:10px;font-size:.84rem;}
  .p-sku{font-family:var(--mono);font-size:.78rem;color:var(--ink-3);}
  .p-sku b{color:var(--ink);font-weight:600;}

  /* ===== галерея товара ===== */
  .gallery-main{position:relative;}
  .gal-thumbs{display:flex;gap:7px;padding:10px 13px 0;flex-wrap:wrap;}
  .gt{width:56px;height:46px;border:2px solid var(--line);border-radius:7px;background:#fff;
    padding:0;overflow:hidden;cursor:pointer;}
  .gt.on{border-color:var(--action);}
  .gt img{width:100%;height:100%;object-fit:contain;padding:3px;}

  /* ===== документы ===== */
  .docs{margin-top:16px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;}
  .docs h3{font-size:.92rem;margin-bottom:10px;}
  .doc{display:flex;align-items:center;gap:11px;padding:8px 0;text-decoration:none;
    border-top:1px solid var(--line-soft);color:var(--ink);}
  .doc:first-of-type{border-top:0;}
  .doc-ext{font-family:var(--mono);font-size:.65rem;font-weight:600;background:var(--action-soft);
    color:var(--action);border-radius:5px;padding:4px 6px;min-width:38px;text-align:center;}
  .doc-n{flex:1;font-size:.86rem;font-weight:500;}
  .doc-s{font-size:.76rem;color:var(--ink-3);font-family:var(--mono);}

  /* ===== спецификация в шапке ===== */
  .cart-btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);
    border-radius:8px;padding:.62em .9em;text-decoration:none;color:var(--ink);flex-shrink:0;
    font-size:.86rem;font-weight:600;position:relative;}
  .cart-btn:hover{border-color:var(--action);color:var(--action);}
  .cart-btn svg{width:19px;height:19px;}
  .cart-btn .cart-n{display:none;}
  .cart-btn.has .cart-n{display:grid;place-items:center;position:absolute;top:-7px;right:-7px;
    min-width:20px;height:20px;border-radius:20px;background:var(--action);color:#fff;
    font-size:.72rem;font-weight:700;padding:0 5px;}
  @media (max-width:1180px){ .cart-btn .cart-l{display:none;} }
  .in-cart{border-color:#1a7f4b !important;color:#1a7f4b !important;background:var(--ok-bg) !important;}
  form.inline{display:inline;}

  /* ===== страница спецификации ===== */
  .cart-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:26px;align-items:start;}
  @media (max-width:940px){ .cart-layout{grid-template-columns:1fr;} }
  .card-plain{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:16px;}
  .cart-tbl{width:100%;border-collapse:collapse;font-size:.9rem;}
  .cart-tbl th{font-size:.76rem;color:var(--ink-3);text-align:left;font-weight:600;padding:0 8px 8px;}
  .cart-tbl td{padding:9px 8px;border-top:1px solid var(--line-soft);vertical-align:middle;}
  .cart-tbl a{color:var(--ink);text-decoration:none;font-weight:500;}
  .cart-tbl a:hover{color:var(--action);}
  .cart-tbl input{width:100%;border:1px solid var(--line);border-radius:7px;padding:.5em .6em;
    background:var(--bg-soft);color:var(--ink);font:inherit;font-size:.85rem;}
  .cart-x{text-align:right;}
  .cart-acts{display:flex;gap:14px;align-items:center;margin-top:14px;flex-wrap:wrap;}
  .cart-acts .btn-plain{background:none;border:0;color:var(--ink-3);font:inherit;font-size:.82rem;
    cursor:pointer;text-decoration:underline;}
  .mini{background:var(--bg-soft);border:1px solid var(--line);border-radius:6px;width:26px;height:26px;
    cursor:pointer;font-size:.8rem;line-height:1;color:var(--ink-2);}
  .mini:hover{border-color:var(--ink-3);}
  .mini.del{color:var(--action);}
  .mini.del:hover{background:var(--action);color:#fff;border-color:var(--action);}

  /* предпросмотр спецификации */
  .spec-preview{margin-top:16px;border-top:1px solid rgba(255,255,255,.12);padding-top:14px;}
  .sp-h{font-size:.76rem;color:var(--on-dark-2);margin-bottom:8px;font-weight:600;}
  .sp-r{display:flex;justify-content:space-between;gap:14px;font-size:.83rem;color:var(--on-dark);
    padding:4px 0;border-bottom:1px solid rgba(255,255,255,.06);}
  .sp-r b{color:var(--brand);white-space:nowrap;font-weight:600;}
  .sp-r i{color:var(--on-dark-2);font-style:normal;font-weight:400;font-size:.78rem;}
  .sent-body{margin-top:12px;font-size:.82rem;}
  .sent-body pre{white-space:pre-wrap;font-family:inherit;margin-top:6px;opacity:.85;line-height:1.5;}

/* ==================================================================
   БЛОКИ КОНСТРУКТОРА
   Дизайн каждого блока задан здесь, а не в админке — поэтому
   контент-менеджер меняет содержимое, но не может испортить вид.
   ================================================================== */

  .page-top{padding-top:22px;}

  /* дополнительное меню — в верхней служебной строке */
  .topnav{display:flex;gap:16px;align-items:center;}
  .topnav a{font-size:.76rem;font-weight:600;color:var(--ink-2);white-space:nowrap;text-decoration:none;}
  .topnav a:hover{color:var(--action);}
  @media (max-width:760px){ .topnav{display:none;} }

  .prose.narrow{max-width:58ch;margin:0 auto;}

  /* плитки-ссылки отдельным блоком: шире, чем в правой колонке главной */
  .quick-grid.wide{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));}

  /* баннер с картинкой */
  .promo{display:grid;grid-template-columns:minmax(0,42%) minmax(0,1fr);gap:26px;align-items:center;
    background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:var(--shadow);}
  .promo.rev{direction:rtl;} .promo.rev > *{direction:ltr;}
  .promo-pic{border-radius:8px;overflow:hidden;background:var(--bg-soft);min-height:120px;display:grid;place-items:center;}
  .promo-pic img{width:100%;height:100%;object-fit:cover;display:block;}
  .promo-txt h2{font-size:1.25rem;margin-bottom:8px;}
  .promo-txt p{color:var(--ink-2);font-size:.92rem;margin-bottom:14px;}
  @media (max-width:760px){ .promo{grid-template-columns:1fr;} .promo.rev{direction:ltr;} }

  /* галерея */
  .gal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;}
  .gal-i{display:block;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--bg);aspect-ratio:4/3;}
  .gal-i img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s;}
  .gal-i:hover img{transform:scale(1.04);}

  /* таблица: на узком экране прокручивается сама, а не растягивает страницу */
  .tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--bg);}
  .tbl{width:100%;border-collapse:collapse;font-size:.88rem;min-width:min(100%,420px);}
  .tbl th{background:var(--bg-soft);text-align:left;font-weight:700;font-size:.78rem;
    text-transform:none;color:var(--ink-2);padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap;}
  .tbl td{padding:10px 14px;border-bottom:1px solid var(--line-soft);color:var(--ink);}
  .tbl tr:last-child td{border-bottom:0;}
  .tbl td:not(:first-child){font-family:var(--mono);font-size:.83rem;}
  .tbl-note{margin-top:10px;font-size:.8rem;color:var(--ink-3);}

  /* вопрос-ответ */
  .faq{display:flex;flex-direction:column;gap:8px;max-width:80ch;}
  .faq-i{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);}
  .faq-i summary{cursor:pointer;padding:14px 18px;font-weight:600;font-size:.94rem;list-style:none;
    display:flex;justify-content:space-between;gap:12px;align-items:center;}
  .faq-i summary::-webkit-details-marker{display:none;}
  .faq-i summary::after{content:"+";font-size:1.2rem;color:var(--ink-3);font-weight:400;flex:none;}
  .faq-i[open] summary::after{content:"–";}
  .faq-i[open] summary{border-bottom:1px solid var(--line-soft);}
  .faq-i > div{padding:12px 18px 16px;color:var(--ink-2);font-size:.9rem;line-height:1.6;}

  /* шаги */
  .steps-grid{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;counter-reset:s;}
  .steps-grid li{display:flex;gap:12px;background:var(--bg);border:1px solid var(--line);
    border-radius:var(--r);padding:16px;box-shadow:var(--shadow);}
  .steps-grid .sn{flex:none;width:28px;height:28px;border-radius:8px;background:var(--brand);
    color:var(--brand-ink);display:grid;place-items:center;font-weight:800;font-size:.86rem;}
  .steps-grid h4{font-size:.94rem;margin-bottom:4px;}
  .steps-grid p{color:var(--ink-2);font-size:.86rem;line-height:1.55;}

  /* всплывающее окно */
  .pop{position:fixed;inset:0;z-index:80;background:rgba(21,24,29,.55);
    display:grid;place-items:center;padding:20px;animation:popIn .18s ease-out;}
  .pop[hidden]{display:none;}
  @keyframes popIn{from{opacity:0}to{opacity:1}}
  .pop-box{position:relative;background:var(--bg);border-radius:14px;max-width:400px;width:100%;
    padding:26px;box-shadow:var(--shadow-lg);text-align:center;}
  .pop-img{width:100%;max-height:150px;object-fit:cover;border-radius:8px;margin-bottom:14px;}
  .pop-box h3{font-size:1.15rem;margin-bottom:8px;}
  .pop-box p{color:var(--ink-2);font-size:.9rem;line-height:1.6;margin-bottom:16px;}
  .pop-x{position:absolute;top:8px;right:8px;width:32px;height:32px;border:0;background:transparent;
    color:var(--ink-3);font-size:1rem;cursor:pointer;border-radius:8px;}
  .pop-x:hover{background:var(--bg-soft);color:var(--ink);}

/* ==================================================================
   ПОИСК В ШАПКЕ — ширина поля и выпадающего списка

   Дополнительное меню в шапке отъедало место у поиска: поле сжималось
   до нескольких сантиметров, а список подсказок, привязанный к его
   ширине, превращался в узкую колонку с обрезанными названиями.
   ================================================================== */

  /* Поле поиска не должно сжиматься до неприличного. */
  .search{min-width:260px;}

  /* Меню прячем раньше: до 1400 точек шапка и так занята поиском,
     телефоном, спецификацией и кнопкой заявки. */
  @media (max-width:1180px){ .search{min-width:180px;} }

  /* Список подсказок живёт своей шириной, а не шириной поля: читаемость
     названий важнее выравнивания по рамке. За край экрана не выходит. */
  .suggest{
    right:auto;
    width:max(100%, 420px);
    max-width:calc(100vw - 32px);
    overflow-x:hidden;
  }
  /* Длинное название — в одну строку с многоточием, а не в три обрубка. */
  .suggest-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

  @media (max-width:900px){
    /* На узком экране поле маленькое и стоит посреди шапки: список,
       привязанный к нему, вылезал за правый край. Привязываем его к шапке
       целиком — тогда он занимает всю ширину под ней и никуда не выходит. */
    .search{position:static;}
    .suggest{left:12px;right:12px;width:auto;max-width:none;top:calc(100% + 4px);}
  }

  /* найденные страницы и статьи */
  .found-list{display:flex;flex-direction:column;gap:8px;max-width:760px;}
  .found{display:flex;align-items:center;gap:12px;background:var(--bg);border:1px solid var(--line);
    border-radius:var(--r);padding:12px 16px;text-decoration:none;color:var(--ink);}
  .found:hover{border-color:var(--brand);}
  .found-k{flex:none;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
    color:var(--ink-3);background:var(--bg-soft);border-radius:20px;padding:3px 9px;}
  .found-t{font-size:.94rem;font-weight:600;}
  .found-t mark{background:transparent;color:var(--action);font-weight:700;}