/* Storefront theme of the KBT shop.
   The look comes from the approved redesign; the interaction styles the design tool kept in
   attributes are generated into classes at the bottom of this file.
   Developer: Site Done · https://sitedone.tech */

@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@400;500;600;700;800&display=swap');

* { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; background: #f2f3f4; }
  body { font-family: 'Exo 2', system-ui, sans-serif; -webkit-font-smoothing: antialiased; color: #15181c; }
  a { color: #15181c; text-decoration: none; transition: color .18s ease; }
  a:hover { color: #c33d21; }

  #m-drawer, #m-overlay { display: none; }
  @media (max-width: 880px) {
    #m-drawer, #m-overlay { display: block; }
    #top-utility { display: none !important; }
    #cat-nav { display: none !important; }
    #hdr-actions { display: none !important; }
    #m-burger { display: flex !important; }
    #m-bottom { display: grid !important; }
    body { padding-bottom: 72px; }
  }
  @media (max-width: 880px) {
    #catalog { grid-template-columns: minmax(0, 1fr) !important; }
    #catalog > aside { position: static !important; max-width: none !important; }
  }
  @media (max-width: 700px) {
    #catalog > aside { padding: 18px !important; }
  }

  /* ---------- форми: шрифт сайту ---------- */
  input, textarea, select, button { font-family: inherit; }
  input::placeholder, textarea::placeholder { font-family: inherit; opacity: 1; }


  /* ---------- якірна навігація по секціях ---------- */
  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  .jump-sec { scroll-margin-top: 104px; }
  .jump-pill {
    display: flex; align-items: center; height: 44px; padding: 0 20px;
    background: #fff; border: 1px solid rgba(21,24,28,.12); border-radius: 999px;
    font-size: 13.5px; font-weight: 700; color: #15181c; white-space: nowrap;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
  }
  .jump-pill:hover { background: #15181c; border-color: #15181c; color: #fff; }

  /* ---------- плитки: заголовок синій, "Перейти" — акцент ---------- */
  .t-title, .t-go { transition: color .2s ease; }
  a:hover .t-title { color: #2d3f88; }
  a.t-title:hover { color: #2d3f88; }
  a:hover .t-go { color: #c33d21; }

  /* мобільні елементи за замовчуванням приховані */
  #m-ticker, #m-fab { display: none; }
  #flt, #m-menu { display: none !important; }
  @keyframes fabIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

  /* сортування: на десктопі виглядає як раніше (підпис + пігулки в рядок) */
  #sort-dd { display: contents; }
  #sort-cap { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(21,24,28,.45); }
  .sc-m { display: none; }
  #sort-list { display: flex; gap: 8px; flex-wrap: wrap; }
  #active-chips { display: none; }

  /* характеристики і кнопка притиснуті до низу картки — щоб «Отримати ціну» стояли на одній лінії */
  #prod-grid [style*="gap: 7px"][style*="padding-top: 14px"] { margin-top: auto !important; }

  /* ціна в картках */
  .p-price { font-size: 19px; font-weight: 700; letter-spacing: -.02em; margin-top: 14px; white-space: nowrap; color: #c33d21; }

  /* ---------- живий пошук у шапці ---------- */
  .hdr-search { position: relative; }
  .search-drop {
    position: absolute; top: calc(100% + 10px); left: 0; right: 0; z-index: 90;
    display: flex; flex-direction: column; gap: 2px; padding: 10px;
    background: #fff; border: 1px solid rgba(21,24,28,.1); border-radius: 16px;
    box-shadow: 0 18px 44px -14px rgba(21,24,28,.28);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    cursor: default;
  }
  .hdr-search:focus-within .search-drop, .search-drop:hover {
    opacity: 1; visibility: visible; transform: none;
  }
  .sd-cap {
    font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: rgba(21,24,28,.38); padding: 6px 10px 8px;
  }
  .sd-item {
    display: flex; align-items: center; gap: 12px; padding: 8px 10px;
    border-radius: 10px; transition: background .15s ease;
  }
  .sd-item:hover { background: #f7f8f9; }
  .sd-pic {
    width: 48px; height: 48px; flex-shrink: 0; border-radius: 8px; background: #f7f8f9;
    display: flex; align-items: center; justify-content: center;
  }
  .sd-pic img { max-width: 78%; max-height: 78%; mix-blend-mode: multiply; display: block; }
  .sd-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
  .sd-name { font-size: 14px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sd-meta { font-size: 12px; color: rgba(21,24,28,.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sd-price { font-size: 14px; font-weight: 700; color: #c33d21; white-space: nowrap; flex-shrink: 0; }
  .sd-all {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-top: 6px; padding: 11px; border-top: 1px solid rgba(21,24,28,.08);
    font-size: 13px; font-weight: 700;
  }
  .sd-all span { opacity: .5; }

  /* ---------- МЕНЮ КАТЕГОРІЙ ---------- */
  #cat-nav .ng {
    display: flex; flex-direction: column; justify-content: center; gap: 4px;
    margin: 8px 0; padding: 9px 13px; border-radius: 10px;
    background: transparent; transition: background .22s ease;
  }
  #cat-nav .ng:hover { background: #f7f8f9; }

  #cat-nav .ng-p {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
    color: #15181c; white-space: nowrap; transition: color .18s ease;
  }
  #cat-nav .ng-p::before {
    content: ""; flex: 0 0 5px; width: 5px; height: 5px; border-radius: 1.5px;
    background: #d3d6d9; transition: background .22s ease, transform .22s ease;
  }
  #cat-nav .ng:hover .ng-p::before { background: #c33d21; transform: scale(1.3); }
  /* every group title reddens under the pointer, the ones that are only a title as well */
  #cat-nav .ng-p:hover { color: #c33d21; }
  #cat-nav span.ng-p { cursor: default; }

  #cat-nav .ng-c {
    display: flex; gap: 13px; padding-left: 13px;
    font-size: 14px; font-weight: 600;
  }
  #cat-nav .ng-c > a {
    color: rgba(21,24,28,.62); white-space: nowrap; padding-bottom: 2px;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: left calc(100% - 1px);
    background-size: 0% 1px;
    transition: background-size .28s cubic-bezier(.22,.72,.2,1), color .18s ease;
  }
  #cat-nav .ng-c > a:hover { background-size: 100% 1px; color: #15181c; }
  #cat-nav .ng-note {
    color: rgba(21,24,28,.4); font-weight: 500; white-space: nowrap; padding-bottom: 2px;
  }

  #cat-nav .ng-actions {
    display: flex; align-items: center; gap: 10px; margin-left: auto; padding: 12px 0;
  }
  #cat-nav .ng-pill {
    display: flex; align-items: center; height: 34px; padding: 0 15px;
    background: #f2f3f4; border-radius: 999px; font-size: 12.5px; font-weight: 700;
    transition: background .2s ease, color .2s ease;
  }
  #cat-nav .ng-pill:hover { background: #15181c; color: #fff; }

  @media (max-width: 1180px) {
    #cat-nav .ng { padding: 8px 10px; }
    #cat-nav .ng-c { gap: 10px; font-size: 13.5px; }
  }

  #cat-nav .ng-c > a.is-active {
    color: #0a4fb0;
    background-size: 100% 1px;
  }

  /* ---------- мобільні правки ---------- */
  @media (max-width: 880px) {
    /* смуга прокрутки на мобільних оверлейна — резервувати місце не треба */
    html { overflow-y: auto !important; }
    /* зверху нічого не липне — великий відступ якоря не потрібен */
    .jump-sec { scroll-margin-top: 16px; }
    /* фото в цих блоках широкі й низькі — фіксована висота панелі давала дірки */
    .feat-row > .feat-img { min-height: 0 !important; padding: 30px 16px !important; }
    .feat-row > .feat-img img { max-height: 150px !important; max-width: 100% !important; }
    /* фото завжди першим, інакше другий рядок читається навпаки */
    .feat-row > .feat-img { order: -1; }
    /* бічні картки були 250px і тиснулись праворуч — на вузькому це дірка зліва */
    .side-cards { justify-content: stretch; }
    .side-card { width: 100% !important; }
    /* поле пошуку прибираємо — воно є в нижній панелі ("Підбір") */
    .hdr-search { display: none !important; }
    /* бургер праворуч, в один рядок з логотипом */
    #m-burger { margin-left: auto !important; }
    /* ---- герой цілком в один екран: 100svh мінус шапка 79 і нижня панель 69 ---- */
    #top > div {
      min-height: calc(100vh - 124px);
      min-height: calc(100svh - 124px);
      /* the height of the screen measured once by sd.js - see there why not the viewport units */
      min-height: calc(var(--sd-screen, 100svh) - 124px);
      /* the picture stays right under the header: Chrome on a phone reports a taller screen than it
         shows, and centring put that difference above the picture as an empty band */
      align-content: start;
      padding-top: 14px !important;
      padding-bottom: 16px !important;
      gap: 16px !important;
    }
    #hero-media {
      order: -1;
      min-height: calc(var(--sd-screen, 100svh) * .25) !important;
      max-height: calc(var(--sd-screen, 100svh) * .3);
      padding: 16px !important;
    }
    /* the slide wraps the picture and grew with it, so max-height: 100% had nothing to hold on to and the
       picture climbed out of the box: the box gets a real height and the slide fills it */
    #hero-media { height: calc(var(--sd-screen, 100svh) * .3); }
    #hero-media > [data-slide] { height: 100%; min-height: 0; }
    #hero-media img { max-height: 100% !important; max-width: 88% !important; }
    /* плашка з лічильником — компактно в кут, під фото відведена смуга */
    #hero-media { padding: 14px 14px 46px !important; }
    #hero-badge {
      bottom: 10px !important; left: 12px !important;
      height: 30px !important; padding: 0 12px !important;
      gap: 6px !important; font-size: 11.5px !important; border-radius: 7px !important;
      box-shadow: 0 1px 8px rgba(21,24,28,.10) !important;
    }
    #top h1 { font-size: clamp(26px, 8.4vw, 36px) !important; margin-top: 12px !important; min-height: 0 !important; }
    #hero-lead {
      font-size: 14px !important; line-height: 1.5 !important;
      margin-top: 10px !important; min-height: calc(4.5 * 1.5em) !important;
    }
    #hero-actions { margin-top: 16px !important; flex-wrap: nowrap !important; gap: 10px !important; }
    #hero-actions > a {
      height: 48px !important; padding: 0 14px !important; font-size: 13.5px !important;
      flex: 1 1 0; justify-content: center; white-space: nowrap;
    }
    #hero-controls { margin-top: 14px !important; }
    #hero-stats { display: none !important; }
    /* ---- синя стрічка з бігучим рядком ---- */
    #top-utility { display: block !important; background: #2d3f88; }
    #top-utility > div:not(#m-ticker) { display: none !important; }
    #m-ticker { display: block; overflow: hidden; }
    #m-ticker > div { display: flex; width: max-content; animation: mTick 24s linear infinite; }
    #m-ticker span {
      padding: 0 20px; line-height: 32px; white-space: nowrap;
      font-size: 10.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
      color: rgba(255,255,255,.85);
    }
    /* шапка з логотипом і бургером прилипає, синя стрічка їде вгору */
    /* ---- кошик запиту в шапці: логотип ліворуч, кошик і бургер праворуч ---- */
    #hdr-actions { display: flex !important; order: 4 !important; margin-left: auto; gap: 8px; }
    #hdr-actions > a { display: none !important; }
    /* only the cart and the phone are left; the word "cart" does not fit next to them */
    #hdr-actions .x4 {
      height: 44px !important; padding: 0 13px !important;
      font-size: 12.5px !important; gap: 8px !important; white-space: nowrap;
    }
    #hdr-actions .x4-label { display: none; }
    /* бургер завжди останній справа, кошик — перед ним */
    #m-burger { order: 5 !important; margin-left: 0 !important; }
    /* ---- нижню панель прибрано, замість неї плаваюча кнопка ---- */
    #m-bottom { display: none !important; }
    body { padding-bottom: 0 !important; }
    #m-fab { display: block; position: fixed; right: 14px; bottom: 14px; z-index: 60; }
    body.sd-panel-open #m-fab { display: none; }
    #m-fab > summary {
      list-style: none; width: 54px; height: 54px; border-radius: 999px;
      background: #c33d21; color: #fff; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 6px 20px -6px rgba(21,24,28,.45);
    }
    #m-fab > summary::-webkit-details-marker { display: none; }
    #m-fab > summary svg { width: 24px; height: 24px; display: block; }
    #m-fab[open] > summary { background: #15181c; }
    .m-fab-list {
      position: absolute; right: 0; bottom: 64px;
      display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
      animation: fabIn .22s cubic-bezier(.22,.72,.2,1) both;
    }
    .m-fab-item {
      display: flex; align-items: center; height: 40px; padding: 0 16px;
      border-radius: 999px; color: #fff !important; font-size: 13px; font-weight: 700;
      white-space: nowrap; box-shadow: 0 4px 14px -4px rgba(21,24,28,.4);
    }
    /* ---- перемикач мов у шторці ---- */
    #m-lang { display: flex; align-items: center; gap: 9px; margin-left: auto; font-size: 12.5px; font-weight: 700; }
    #m-lang .on { color: #15181c; }
    #m-lang a { color: rgba(21,24,28,.38); }
    #m-hdr {
      position: sticky; top: 0; z-index: 45;
      /* solid white on purpose: a backdrop-filter here would make the header the frame of
         reference for everything fixed inside it, and the cart panel is one of those - it was
         landing under the header instead of on the screen. Over an almost opaque white the blur
         was invisible anyway. */
      background: #fff;
    }
  }

  @keyframes mTick { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  @media (prefers-reduced-motion: reduce) { #m-ticker > div { animation: none !important; } }

  /* ---- шторка меню на category/product: у них рідні біндінги порожні ---- */
  /* без !important: там, де інлайн-стиль є (головна), він виграє і працює як раніше */
  @media (max-width: 880px) {
    #m-menu ~ #m-drawer {
      position: fixed; top: 0; right: 0; bottom: 0; z-index: 80;
      width: min(340px, 86vw); overflow-y: auto; background: #fff; padding: 22px;
      box-shadow: -8px 0 40px rgba(21,24,28,.18);
      transform: translateX(103%);
      transition: transform .3s cubic-bezier(.22,.7,.2,1);
    }
    #m-menu ~ #m-overlay {
      position: fixed; inset: 0; z-index: 70; background: rgba(21,24,28,.45);
      opacity: 0; pointer-events: none; transition: opacity .25s ease;
    }
    #m-menu:checked ~ #m-drawer { transform: translateX(0); }
    #m-menu:checked ~ #m-overlay { opacity: 1; pointer-events: auto; }
  }

  /* ---- «Схожі моделі» у дві колонки ---- */
  @media (max-width: 880px) {
    #related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
    #related-grid > a > span:first-child { height: 132px !important; padding: 10px !important; }
    #related-grid > a > span:first-child img { max-height: 100% !important; max-width: 88% !important; }
    #related-grid > a > span:last-child { padding: 12px !important; }
    #related-grid > a > span:last-child > span:first-child { font-size: 15px !important; }
  }
  /* ---- бренди: заголовок зверху, логотипи одним рядом ---- */
  @media (max-width: 880px) {
    #brands > div {
      flex-direction: column !important; align-items: stretch !important;
      gap: 12px !important; padding-top: 20px !important; padding-bottom: 20px !important;
    }
    #brands > div > div {
      margin-left: 0 !important; flex-wrap: nowrap !important;
      justify-content: space-between; gap: 10px !important;
    }
    #brands > div > div > a { font-size: 17px !important; white-space: nowrap; }
  }
  /* ---- картка товару: мініатюри під головним фото ---- */
  @media (max-width: 880px) {
    #gallery { grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; }
    /* By class, not by position: a product with a single picture has no row of thumbs, the stage
       became the first child, and the rule for thumbs squeezed its row of pictures to 66px. */
    #gallery > .pr-thumbs {
      order: 2; flex-direction: row !important; gap: 8px !important;
      overflow-x: auto; padding-bottom: 2px;
    }
    #gallery > .pr-stage { order: 1; min-height: 44vh !important; }
  }
  /* ---- каталог: фільтр і режими показу ---- */
  #flt-open, #flt-veil, #flt-done, .vw-m { display: none; }
  @media (max-width: 880px) {
    .vw-d { display: none; }
    .vw-m { display: inline; }

    #flt-open {
      display: inline-flex; align-items: center; gap: 9px;
      height: 44px; padding: 0 12px;
      background: #15181c; color: #fff; border-radius: 999px;
      font-size: 13.5px; font-weight: 700; cursor: pointer; width: fit-content;
    }
    #flt-open svg { width: 17px; height: 17px; }

    #catalog > aside {
      position: fixed !important; top: 0 !important; left: 0 !important; bottom: 0 !important; z-index: 70;
      width: min(320px, 88vw); max-width: none !important;
      margin: 0 !important; border: none !important; border-radius: 0 !important;
      padding: 20px 20px 28px !important; overflow-y: auto;
      transform: translateX(-102%); transition: transform .3s cubic-bezier(.22,.7,.2,1);
      box-shadow: 8px 0 40px rgba(21,24,28,.2);
    }
    #flt:checked ~ aside { transform: translateX(0); }

    #flt-veil {
      display: block; position: fixed; inset: 0; z-index: 65;
      background: rgba(21,24,28,.45); opacity: 0; pointer-events: none;
      transition: opacity .25s ease;
    }
    #flt:checked ~ #flt-veil { opacity: 1; pointer-events: auto; }

    #flt-done {
      display: flex; align-items: center; justify-content: center;
      height: 48px; margin-top: 20px; border-radius: 999px;
      background: #c33d21; color: #fff; font-size: 13.5px; font-weight: 700; cursor: pointer;
    }

    /* ---- сортування як кастомний дропдаун поруч з кнопкою фільтра ---- */
    #sort-dd { display: block; position: relative; line-height: 0; }
    #sort-cap {
      display: inline-flex; align-items: center; gap: 9px;
      height: 44px; padding: 0 16px; cursor: pointer; white-space: nowrap;
      background: #fff; border: 1px solid rgba(21,24,28,.14); border-radius: 999px;
      font-size: 13px; font-weight: 700; color: #15181c; line-height: normal;
      text-transform: none; letter-spacing: 0;
    }
    .sc-d { display: none; }
    .sc-m { display: inline; }
    #sort-cap::after {
      content: ""; width: 7px; height: 7px; margin-top: -3px; flex-shrink: 0;
      border-right: 2px solid rgba(21,24,28,.4); border-bottom: 2px solid rgba(21,24,28,.4);
      transform: rotate(45deg); transition: transform .2s ease;
    }
    #sort-t:checked ~ #sort-cap::after { transform: rotate(225deg); margin-top: 3px; }
    #sort-list { line-height: normal;
      position: absolute; top: 50px; left: 0; z-index: 30; min-width: 226px;
      flex-direction: column; gap: 4px; padding: 8px;
      background: #fff; border: 1px solid rgba(21,24,28,.12); border-radius: 14px;
      box-shadow: 0 14px 34px -12px rgba(21,24,28,.3);
      opacity: 0; pointer-events: none; transform: translateY(-6px);
      transition: opacity .18s ease, transform .18s ease;
    }
    #sort-t:checked ~ #sort-list { opacity: 1; pointer-events: auto; transform: none; }

    /* the toolbar in one row: the filter and the sort on the left, the views on the right. The number
       of models is hidden - the header of the page already says it. The sort gives way first: its
       caption is cut with an ellipsis rather than pushing the views to a second line. */
    /* #catalog: the base rules of the toolbar come later in this file and would win otherwise */
    #catalog .cat-toolbar { flex-wrap: nowrap; gap: 8px; }
    #catalog .cat-toolbar .found { display: none; }
    #catalog .cat-toolbar-end { flex-shrink: 0; gap: 0 !important; flex-wrap: nowrap !important; }
    #flt-open { flex-shrink: 0; gap: 7px; padding: 0 14px; }
    #sort-dd { flex: 0 1 auto; min-width: 0; }
    #sort-cap { max-width: 100%; padding: 0 12px; gap: 6px; font-size: 12.5px; }
    #sort-cap .sc-m { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    #catalog .cat-views button { padding: 0 9px; }
    /* ---- the chosen filters under the toolbar, a tap takes one off ---- */
    .cat-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: -6px 0 16px; }
    .cat-chip {
      display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 34px; padding: 0 8px 0 13px;
      background: #fff; border: 1px solid rgba(21,24,28,.12); border-radius: 999px;
      font-size: 13px; font-weight: 600; color: #15181c; white-space: nowrap;
      transition: border-color .18s ease, color .18s ease;
    }
    .cat-chip small { font-size: 12px; font-weight: 500; color: rgba(21,24,28,.48); }
    .cat-chip i { position: relative; width: 18px; height: 18px; margin-left: 2px; flex-shrink: 0; border-radius: 999px; background: #f2f3f4; transition: background .18s ease; }
    .cat-chip i::before, .cat-chip i::after { content: ""; position: absolute; left: 5px; top: 8.25px; width: 8px; height: 1.5px; border-radius: 1px; background: rgba(21,24,28,.55); }
    .cat-chip i::before { transform: rotate(45deg); }
    .cat-chip i::after { transform: rotate(-45deg); }
    .cat-chip:hover, .cat-chip:active { border-color: rgba(195,61,33,.45); color: #c33d21; }
    .cat-chip:hover i, .cat-chip:active i { background: rgba(195,61,33,.1); }
    .cat-chip.is-reset { padding: 0 6px; background: transparent; border-color: transparent; color: #2d3f88; font-weight: 700; }

    /* ---- режим списку: компактно ---- */
    #prod-grid > div[style*="flex-direction: row"] > div[style*="170px"] { width: 104px !important; padding: 8px !important; }
    #prod-grid > div[style*="flex-direction: row"] > div:last-child { padding: 14px !important; }
    #prod-grid > div[style*="flex-direction: row"] a[style*="19px"] { font-size: 16px !important; }
    /* кнопка «Отримати ціну» була absolute (під неї резервувалось 220px праворуч) —
       на вузькому екрані ставимо її в потік, інакше налазить на характеристики */
    #prod-grid > div[style*="flex-direction: row"] div[style*="bottom: 24px"] {
      position: static !important; margin-top: 12px !important;
    }
    /* у мініатюрі 104px підпис бренду і бейдж не вміщаються — ховаємо */
    #prod-grid > div[style*="flex-direction: row"] > div:first-child > span { display: none !important; }
    #prod-grid > div[style*="flex-direction: row"] div[style*="line-height: 1.55"] {
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    /* «3» -> дві колонки, «4» -> одна */
    #prod-grid[style*="240px"] { grid-template-columns: minmax(0, 1fr) !important; }
    #prod-grid[style*="262px"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    /* у двох колонках картка компактніша (інлайн-стилі нормалізовані з пробілами) */
    /* дві колонки: фото не має налазити на підпис бренду і бейдж */
    #prod-grid[style*="262px"] > div > div[style*="232px"] {
      height: 170px !important; padding: 34px 10px 12px !important;
    }
    #prod-grid[style*="262px"] > div > div[style*="232px"] img {
      max-height: 100% !important; max-width: 82% !important;
    }
    #prod-grid[style*="262px"] > div > div[style*="padding: 20px"] { padding: 14px !important; }
  }

  /* ---- дуже вузькі екрани: підпис кнопки не має вилазити за її межі ---- */
  @media (max-width: 400px) {
    #prod-grid [style*="rgb(195, 61, 33)"] {
      font-size: 11.5px !important; padding: 0 6px !important;
      letter-spacing: -0.01em; min-width: 0;
    }
  }

  /* ---------- HERO: анімація перелистування ---------- */
  @keyframes heroInA { from { opacity: 1; } to { opacity: 1; } }
  @keyframes heroInB { from { opacity: 1; } to { opacity: 1; } }
  @keyframes heroRiseA { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  @keyframes heroRiseB { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  @keyframes heroImgA { from { opacity: 0; transform: translateX(44px) scale(.955); } to { opacity: 1; transform: none; } }
  @keyframes heroImgB { from { opacity: 0; transform: translateX(44px) scale(.955); } to { opacity: 1; transform: none; } }

  [style*="heroInA"] > *, [style*="heroInB"] > * {
    animation-duration: .64s;
    animation-timing-function: cubic-bezier(.22,.72,.2,1);
    animation-fill-mode: both;
  }
  [style*="heroInA"] > * { animation-name: heroRiseA; }
  [style*="heroInB"] > * { animation-name: heroRiseB; }
  [style*="heroInA"] > *:nth-child(2), [style*="heroInB"] > *:nth-child(2) { animation-delay: .07s; }
  [style*="heroInA"] > *:nth-child(3), [style*="heroInB"] > *:nth-child(3) { animation-delay: .14s; }
  [style*="heroInA"] > *:nth-child(4), [style*="heroInB"] > *:nth-child(4) { animation-delay: .21s; }

  /* ---------- HERO: вміщення в перший екран ---------- */
  @media (min-width: 900px) {
    #top > div {
      min-height: calc(100vh - 204px);
      min-height: calc(100svh - 204px);
      align-content: center;
      padding-top: clamp(16px, 2.2vh, 44px) !important;
      padding-bottom: clamp(18px, 2.6vh, 56px) !important;
    }
    #top h1 {
      font-size: clamp(30px, min(4.6vw, 6vh), 62px) !important;
      margin-top: clamp(12px, 2vh, 26px) !important;
    }
    #hero-lead {
      font-size: clamp(14.5px, min(1.35vw, 2.05vh), 18.5px) !important;
      margin-top: clamp(10px, 1.7vh, 22px) !important;
    }
    #hero-actions { margin-top: clamp(16px, 2.8vh, 38px) !important; }
    #hero-actions > a { height: clamp(46px, 6vh, 58px) !important; }
    #hero-controls { margin-top: clamp(14px, 2.4vh, 34px) !important; }
    #hero-stats {
      margin-top: clamp(16px, 3vh, 44px) !important;
      padding-top: clamp(14px, 2.2vh, 34px) !important;
    }
    #hero-stats .hs-num { font-size: clamp(24px, min(2.4vw, 3.8vh), 40px) !important; }
    #hero-media { min-height: clamp(240px, 52vh, 520px) !important; }
  }
  /* на низьких екранах прибираємо цифри, щоб слайдер завжди був видимий */
  @media (min-width: 900px) and (max-height: 840px) {
    #hero-stats { display: none !important; }
  }
  @media (prefers-reduced-motion: reduce) {
    [style*="heroInA"] > *, [style*="heroInB"] > *,
    [style*="heroImgA"], [style*="heroImgB"] { animation: none !important; }
  }

/* Hover and focus styles the design kept in attributes. Generated by to-theme.js. */
/* the links of the dark bands carry their colour in the attribute, which outweighs any rule, so the
   hover has to insist; in the footer an underline makes the pointer obvious on the blue */
.x1 { transition: color .15s ease; }
.x1:hover, .x1:focus-visible { color: #fff !important; }
#footer a.x1:hover, #footer a.x1:focus-visible { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.x2:focus-within { border-color: #0a4fb0; }
.x3:hover { border-color: rgba(21,24,28,.16); box-shadow: 0 2px 6px -3px rgba(21,24,28,.10), 0 22px 44px -20px rgba(21,24,28,.24); transform: translateY(-3px); }
.x4:hover { background: #15181c; color: #fff; }
.x5:hover { color: #c33d21; }
.x6:hover { background: #f2f3f4; }
.x7:hover { background: #c33d21; color: #fff; }
.x8:hover { background: #eceef0; }

/* ---------- category page ----------
   The design kept these styles inline and hooked its media queries on the inline values.
   Our markup uses classes instead, so the rules below carry the same look in a form that
   survives an edit. */

.cat-head { background: #fff; border-bottom: 1px solid rgba(21,24,28,.09); }
.cat-head-inner { max-width: 1440px; margin: 0 auto; padding: 22px clamp(18px, 3vw, 40px) 38px; }

.cat-crumbs { display: flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 500; color: rgba(21,24,28,.45); flex-wrap: wrap; }
.cat-crumbs a { color: rgba(21,24,28,.45); }
.cat-crumbs .sep { opacity: .5; }
.cat-crumbs .current { color: rgba(21,24,28,.75); font-weight: 600; }

.cat-intro { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); gap: clamp(24px, 3vw, 48px); align-items: center; margin-top: 20px; }
.cat-intro h1 { font-size: clamp(32px, 4vw, 54px); font-weight: 800; line-height: 1.04; letter-spacing: -.035em; margin: 0; }
.cat-intro p { font-size: 16px; line-height: 1.62; color: rgba(21,24,28,.62); max-width: 560px; margin: 16px 0 0; text-wrap: pretty; }

.cat-stats { display: flex; gap: 28px; margin-top: 24px; flex-wrap: wrap; }
.cat-stats .value { font-size: 28px; font-weight: 700; letter-spacing: -.03em; }
.cat-stats .note { font-size: 12px; font-weight: 600; color: rgba(21,24,28,.5); letter-spacing: .04em; text-transform: uppercase; margin-top: 2px; }

.cat-cards { display: flex; align-items: center; justify-content: flex-end; gap: 14px; flex-wrap: wrap; }
.cat-card { width: 250px; min-height: 178px; padding: 22px; border-radius: 14px; display: flex; flex-direction: column; justify-content: space-between; }
.cat-card-cta { background: #2d3f88; color: #fff; }
.cat-card-cta:hover { background: #15181c; color: #fff; }
.cat-card-cta .cap { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.cat-card-cta .title { display: block; font-size: 21px; font-weight: 700; letter-spacing: -.02em; line-height: 1.16; }
.cat-card-cta .go { display: inline-flex; gap: 8px; font-size: 13px; font-weight: 700; margin-top: 12px; color: rgba(255,255,255,.7); }
.cat-card-pic { background: #f4f5f6; align-items: center; justify-content: center; padding: 16px; }
.cat-card-pic img { max-width: 100%; max-height: 150px; width: auto; mix-blend-mode: multiply; }

/* ---- the two column layout ---- */
#catalog { max-width: 1440px; margin: 0 auto; padding: 32px clamp(18px, 3vw, 40px) 80px; display: grid; grid-template-columns: minmax(0, 268px) minmax(0, 1fr); gap: 26px; align-items: start; }

.cat-filter { max-width: 300px; position: sticky; top: 18px; background: #fff; border: 1px solid rgba(21,24,28,.09); border-radius: 14px; padding: 22px; }
.cat-filter-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cat-filter-head .title { font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.cat-filter-head a { font-size: 12px; font-weight: 600; color: #0a4fb0; }
.cat-filter-found { font-size: 12px; font-weight: 600; color: rgba(21,24,28,.45); margin-top: 6px; }

.cat-group { margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(21,24,28,.08); }
.cat-group-title { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(21,24,28,.55); }
.cat-options { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; }
.cat-option { display: flex; align-items: center; gap: 11px; padding: 7px 8px; margin: 0 -8px; border-radius: 8px; color: inherit; }
.cat-option:hover { background: #f2f3f4; color: inherit; }
.cat-option .box { width: 17px; height: 17px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 1.5px solid rgba(21,24,28,.2); border-radius: 5px; font-size: 11px; color: #fff; }
.cat-option.is-active .box { background: #c33d21; border-color: #c33d21; }
.cat-option .label { flex: 1; font-size: 13.5px; font-weight: 600; }
.cat-option .count { font-size: 12px; font-weight: 600; color: rgba(21,24,28,.35); }

.cat-filter-cta { display: flex; align-items: center; justify-content: center; gap: 10px; height: 48px; margin-top: 24px; background: #f4f5f6; border-radius: 10px; font-size: 13px; font-weight: 700; }
.cat-filter-cta:hover { background: #15181c; color: #fff; }

/* ---- toolbar ---- */
.cat-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 0 2px 18px; }
.cat-toolbar .found { font-size: 13px; font-weight: 600; color: rgba(21,24,28,.5); }
.cat-views { display: flex; align-items: center; gap: 4px; padding: 4px; background: #fff; border: 1px solid rgba(21,24,28,.1); border-radius: 999px; }
.cat-views button { height: 30px; padding: 0 12px; border: none; background: none; border-radius: 999px; font: inherit; font-size: 12.5px; font-weight: 700; color: rgba(21,24,28,.5); cursor: pointer; }
.cat-views button.is-active { background: #15181c; color: #fff; }

.sort-pill { display: flex; align-items: center; height: 38px; padding: 0 18px; background: #fff; border: 1px solid rgba(21,24,28,.12); border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap; transition: background .2s, color .2s, border-color .2s; }
.sort-pill:hover { border-color: rgba(21,24,28,.3); color: inherit; }
.sort-pill.is-active { background: #15181c; border-color: #15181c; color: #fff; }
.sd-empty { padding: 14px 10px; font-size: 13px; color: rgba(21,24,28,.55); }

/* ---- product grid ---- */
#prod-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(288px, 100%), 1fr)); }
#prod-grid.g4 { grid-template-columns: repeat(auto-fill, minmax(min(228px, 100%), 1fr)); }
#prod-grid.glist { grid-template-columns: minmax(0, 1fr); }

.p-card { display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(21,24,28,.1); border-radius: 14px; overflow: hidden; transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.p-card:hover { border-color: rgba(21,24,28,.16); box-shadow: 0 2px 6px -3px rgba(21,24,28,.10), 0 22px 44px -20px rgba(21,24,28,.24); transform: translateY(-3px); }

.p-media { position: relative; display: flex; align-items: center; justify-content: center; height: 232px; padding: 20px; background: #f7f8f9; }
/* A mop is long and flat, a vacuum cleaner is tall: limiting the width alone left the flat ones
   tiny in the middle of the tile. Letting the picture fill the tile and keep its shape makes both
   look the size they should. */
.p-media img { width: 100%; height: 100%; object-fit: contain; display: block; mix-blend-mode: multiply; }
.p-brand { position: absolute; top: 14px; left: 14px; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(21,24,28,.42); }
/* the marker is written by hand and can be long, so it wraps instead of leaving the card */
.p-badge { position: absolute; top: 12px; right: 12px; max-width: calc(100% - 24px); padding: 6px 12px; background: #15181c; color: #fff; border-radius: 14px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; line-height: 1.3; text-align: right; text-transform: uppercase; }

.p-body { display: flex; flex-direction: column; flex: 1; padding: 20px; }
.p-name { font-size: 19px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.p-sub { font-size: 12.5px; font-weight: 600; color: #0a4fb0; margin-top: 6px; }
.p-text { font-size: 13px; line-height: 1.55; color: rgba(21,24,28,.58); margin-top: 10px; }
.p-specs { display: flex; flex-direction: column; gap: 7px; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(21,24,28,.08); }
/* Some categories name their facts in three words ("Тип приміщення для збирання"), so the line
   has to wrap instead of being cut off. The leader lines up with the last line of the name. */
.p-spec { display: flex; align-items: flex-end; gap: 8px; font-size: 12.5px; }
.p-spec .k { color: rgba(21,24,28,.5); font-weight: 500; min-width: 0; line-height: 1.35; }
.p-spec .dots { flex: 1 1 auto; min-width: 14px; height: 1px; border-bottom: 1px dotted rgba(21,24,28,.28); margin-bottom: .3em; }
.p-spec .v { font-weight: 700; flex-shrink: 0; max-width: 58%; text-align: right; line-height: 1.35; }
/* in the narrowest grid a single long word still has to fit somehow */
.p-spec .k, .p-spec .v, .pr-spec-row .k, .pr-spec-row .v { overflow-wrap: anywhere; }
#prod-grid.g4 .p-spec { font-size: 12px; }
#prod-grid.g4 .p-spec .v { max-width: 64%; }
.p-spec-plain .k { white-space: normal; color: rgba(21,24,28,.62); }

.p-foot { margin-top: auto; padding-top: 16px; }
.p-price { font-size: 21px; font-weight: 700; letter-spacing: -.02em; color: #c33d21; }
/* no price on the site: a small quiet label rather than grey text the size of a price */
.p-price.on-request {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 7px;
  background: rgba(45,63,136,.07); border-radius: 999px;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0; color: #2d3f88; white-space: nowrap;
}
.p-price.on-request::before {
  content: "i"; width: 15px; height: 15px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  border-radius: 999px; background: #2d3f88; color: #fff; font-size: 10px; font-weight: 800; font-style: italic; line-height: 1;
}
.p-foot .p-actions { padding-top: 14px; }

.p-actions { display: flex; gap: 7px; }
.p-buy { flex: 1; display: flex; align-items: center; justify-content: center; height: 44px; padding: 0 16px; background: #c33d21; color: #fff; border-radius: 10px; font-size: 13px; font-weight: 700; }
.p-buy:hover { background: #15181c; color: #fff; }
button.p-buy { border: none; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.p-buy.is-done { background: #1f8a4c; }
.p-buy[disabled] { cursor: default; }
.p-compare { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 1.5px solid rgba(21,24,28,.12); border-radius: 10px; background: #fff; font-size: 15px; color: rgba(21,24,28,.6); cursor: pointer; }
.p-compare:hover, .p-compare.is-active { border-color: #c33d21; color: #c33d21; }

/* list mode: the picture moves to the left, price and buttons share the bottom row */
#prod-grid.glist .p-card { flex-direction: row; }
#prod-grid.glist .p-media { width: 260px; height: auto; flex-shrink: 0; }
#prod-grid.glist .p-body { padding: 24px 26px; }
#prod-grid.glist .p-specs { max-width: 620px; }
#prod-grid.glist .p-text { max-width: 780px; }
#prod-grid.glist .p-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
#prod-grid.glist .p-foot .p-actions { padding-top: 0; }
#prod-grid.glist .p-buy { flex: 0 0 auto; padding: 0 30px; }

.cat-empty { background: #fff; border: 1px dashed rgba(21,24,28,.18); border-radius: 14px; padding: 44px; text-align: center; }
.cat-empty .title { font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.cat-empty .text { font-size: 14px; color: rgba(21,24,28,.55); margin-top: 8px; }

.cat-more { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 22px; padding: 22px; background: #fff; border: 1px solid rgba(21,24,28,.09); border-radius: 14px; }
.cat-more .shown { font-size: 14px; font-weight: 600; color: rgba(21,24,28,.6); }
.cat-more a { display: flex; align-items: center; height: 46px; padding: 0 24px; background: #f4f5f6; border-radius: 10px; font-size: 13.5px; font-weight: 700; }
.cat-more a:hover { background: #15181c; color: #fff; }

.cat-text { max-width: 1440px; margin: 0 auto 60px; padding: 0 clamp(18px, 3vw, 40px); }
.cat-text-inner { background: #fff; border: 1px solid rgba(21,24,28,.09); border-radius: 14px; padding: clamp(22px, 3vw, 40px); font-size: 15px; line-height: 1.7; color: rgba(21,24,28,.72); }
.cat-text-inner h2 { font-size: 22px; line-height: 1.3; font-weight: 700; letter-spacing: -.02em; margin: 26px 0 12px; color: #15181c; }
/* like the headings of a product description: a line height of their own, not the 1.7 of the text */
.cat-text-inner h3 { font-size: 17px; line-height: 1.4; font-weight: 700; margin: 20px 0 8px; color: #15181c; }
.cat-text-inner > :first-child { margin-top: 0; }
@media (max-width: 880px) { .cat-text-inner h2 { font-size: 19px; } .cat-text-inner h3 { font-size: 16px; } }
.cat-text-inner img { max-width: 100%; height: auto; }
.cat-text-inner p:first-child { margin-top: 0; }
.cat-text-inner p:last-child { margin-bottom: 0; }
/* the words a landing page opens with sit above the goods, not under them */
.cat-text.is-intro { margin: 0 auto 18px; }

/* ---- the band of landing pages of a category ----
   Internal links, and they have to look like links a person would use: a row of pills under the
   goods, not a list of keywords in a footer. */
.cat-lands { max-width: 1440px; margin: 0 auto 34px; padding: 0 clamp(18px, 3vw, 40px); }
.cat-lands-inner { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; }
.cat-lands-cap { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(21,24,28,.42); }
.cat-lands-row { display: flex; flex-wrap: wrap; gap: 8px; }
.cat-lands-row a {
  display: inline-flex; align-items: center; height: 32px; padding: 0 14px;
  background: #fff; border: 1px solid rgba(21,24,28,.12); border-radius: 999px;
  font-size: 13px; font-weight: 600; color: rgba(21,24,28,.72);
}
.cat-lands-row a:hover { border-color: #2d3f88; color: #2d3f88; }

@media (max-width: 980px) {
  #catalog { grid-template-columns: minmax(0, 1fr); }
  .cat-filter { max-width: none; }
  #prod-grid.glist .p-media { width: 128px; }
}

/* The design switches the two grid buttons to "2 in a row" and "1 in a row" on a phone,
   which is what their labels say there. */
@media (max-width: 880px) {
  #catalog { padding: 20px clamp(14px, 4vw, 24px) 60px; gap: 0; }
  .cat-head-inner { padding-bottom: 26px; }
  /* one column: the gap of the grid is the whole distance from the numbers to the cards */
  .cat-cards { justify-content: stretch; margin-top: 0; }
  .cat-card { width: 100%; min-height: 0; }
  .cat-card-cta { min-height: 150px; }
  .cat-card-pic { display: none; }

  #prod-grid { gap: 10px; }
  #prod-grid.g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #prod-grid.g4 { grid-template-columns: minmax(0, 1fr); }
  #prod-grid.g3 .p-media { height: 168px; padding: 14px; }
  #prod-grid.g3 .p-body { padding: 14px; }
  #prod-grid.g3 .p-name { font-size: 16px; }
  #prod-grid.g3 .p-text { display: none; }
  #prod-grid.g3 .p-spec { font-size: 11.5px; }
  /* two narrow columns leave no room for a name, the dots and a value on one line: the name was
     broken in the middle of a word. The name goes above its value and wraps by whole words. */
  #prod-grid.g3 .p-spec { flex-direction: column; align-items: flex-start; gap: 1px; }
  #prod-grid.g3 .p-spec .dots { display: none; }
  #prod-grid.g3 .p-spec .k { overflow-wrap: normal; word-break: normal; }
  #prod-grid.g3 .p-spec .v { max-width: 100%; text-align: left; }
  #prod-grid.g3 .p-specs { gap: 9px; }
  #prod-grid.g3 .p-price { font-size: 17px; }
  #prod-grid.g3 .p-buy { font-size: 12px; padding: 0 10px; }
  #prod-grid.g3 .p-compare { display: none; }
  #prod-grid.g3 .p-badge { max-width: calc(100% - 20px); font-size: 9.5px; padding: 5px 9px; }
  #prod-grid.g3 .p-brand { max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .cat-toolbar { gap: 10px; }
  .cat-toolbar .found { order: 3; }
  .cat-views { order: 4; }
  .cat-more { padding: 18px; }
}

@media (max-width: 560px) {
  #prod-grid.glist .p-card { flex-direction: column; }
  #prod-grid.glist .p-media { width: auto; }
}

/* ---------- product page ---------- */

.pr-head { background: #fff; border-bottom: 1px solid rgba(21,24,28,.09); }
.pr-head-inner { max-width: 1440px; margin: 0 auto; padding: 22px clamp(18px, 3vw, 40px) 48px; }

.pr-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: clamp(28px, 3.5vw, 56px); margin-top: 22px; align-items: start; }

#gallery { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px; align-items: start; }
#gallery:has(.pr-stage:only-child) { grid-template-columns: minmax(0, 1fr); }

.pr-thumbs { display: flex; flex-direction: column; gap: 10px; }
.pr-thumb { width: 84px; height: 84px; display: flex; align-items: center; justify-content: center; padding: 8px; background: #f7f8f9; border: 1.5px solid transparent; border-radius: 10px; cursor: pointer; }
.pr-thumb.is-active { border-color: #15181c; }
.pr-thumb img { max-width: 100%; max-height: 100%; mix-blend-mode: multiply; }

.pr-stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: clamp(340px, 40vw, 540px); background: #f7f8f9; border-radius: 16px; padding: 20px; }
/* the photo takes the whole width of the stage and keeps its proportions: a wide shot of a machine
   at work no longer sits in the middle of an empty field, a tall one is held by its height */
.pr-stage img { width: 100%; height: auto; max-height: clamp(320px, 40vw, 540px); object-fit: contain; display: block; mix-blend-mode: multiply; cursor: zoom-in; }

/* ---------- the photo opened full size ---------- */
.lb { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: clamp(16px, 4vw, 48px); background: rgba(12,14,17,.92); opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility .22s; }
.lb.is-open { opacity: 1; visibility: visible; }
.lb-figure { position: relative; display: flex; align-items: center; justify-content: center; max-width: min(1200px, 100%); max-height: 100%; }
.lb-figure img { max-width: 100%; max-height: calc(100vh - clamp(96px, 14vw, 170px)); width: auto; height: auto; display: block; background: #fff; border-radius: 12px; transform: scale(.98); transition: transform .22s ease; }
.lb.is-open .lb-figure img { transform: scale(1); }
/* dark, not translucent white: the buttons sit over a photo as often as over the backdrop */
.lb-close, .lb-prev, .lb-next { position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; background: rgba(12,14,17,.62); border: 0; border-radius: 999px; color: #fff; font-size: 20px; line-height: 1; cursor: pointer; transition: background .18s ease; }
.lb-close:hover, .lb-prev:hover, .lb-next:hover { background: rgba(12,14,17,.85); }
.lb-close { top: clamp(12px, 2vw, 22px); right: clamp(12px, 2vw, 22px); }
.lb-prev { left: clamp(12px, 2vw, 22px); top: 50%; transform: translateY(-50%); }
.lb-next { right: clamp(12px, 2vw, 22px); top: 50%; transform: translateY(-50%); }
.lb-count { position: absolute; left: 50%; bottom: clamp(12px, 2vw, 22px); transform: translateX(-50%); font-size: 13px; font-weight: 600; color: rgba(255,255,255,.7); }
.lb[data-single] .lb-prev, .lb[data-single] .lb-next, .lb[data-single] .lb-count { display: none; }
/* the viewer locks the scroll on the root (see sdViewer), never on the body: that would move the sticky gallery */

@media (max-width: 600px) {
  /* on a phone the photo fills the width, so the arrows move down next to the counter */
  .lb-prev, .lb-next { width: 42px; height: 42px; top: auto; bottom: 14px; transform: none; }
  .lb-prev { left: calc(50% - 94px); }
  .lb-next { right: calc(50% - 94px); }
  .lb-count { bottom: 27px; }
  .lb-figure img { max-height: calc(100vh - 160px); }
}
.pr-brand { position: absolute; top: 18px; left: 20px; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(21,24,28,.4); }

.pr-offer { min-width: 0; }
.pr-offer h1 { font-size: clamp(30px, 3.4vw, 46px); font-weight: 800; line-height: 1.06; letter-spacing: -.03em; margin: 10px 0 0; }
.pr-lead { font-size: 16px; line-height: 1.6; color: rgba(21,24,28,.62); margin: 14px 0 0; text-wrap: pretty; }

.pr-adv { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.pr-adv-row { display: flex; gap: 11px; font-size: 14px; line-height: 1.5; }
.pr-adv-row .dash { color: #c33d21; font-weight: 800; flex-shrink: 0; }

.pr-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 1px; margin-top: 26px; background: rgba(21,24,28,.1); border: 1px solid rgba(21,24,28,.1); border-radius: 12px; overflow: hidden; }
.pr-figures > div { background: #fff; padding: 16px 18px; }
.pr-figures .value { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.pr-figures .name { font-size: 11.5px; font-weight: 600; color: rgba(21,24,28,.5); margin-top: 3px; }

.pr-buy { margin-top: 24px; padding: 24px; background: #f4f5f6; border-radius: 14px; }
.pr-buy-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pr-price { font-size: 34px; font-weight: 700; letter-spacing: -.03em; white-space: nowrap; color: #c33d21; }
.pr-price.on-request { font-size: 24px; color: #15181c; }
.pr-price-note { font-size: 13px; color: rgba(21,24,28,.55); margin-top: 4px; max-width: 420px; }
.pr-stock { display: flex; align-items: center; height: 28px; padding: 0 12px; background: #fff; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: #0a4fb0; white-space: nowrap; }

.pr-actions { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.pr-actions .p-buy { flex: 0 0 auto; height: 50px; padding: 0 28px; font-size: 14px; }
.pr-phone { display: flex; align-items: center; height: 50px; padding: 0 24px; background: #fff; border: 1.5px solid rgba(21,24,28,.16); border-radius: 10px; font-size: 14px; font-weight: 700; transition: border-color .25s, box-shadow .25s, transform .25s; }
.pr-phone:hover { border-color: rgba(21,24,28,.16); box-shadow: 0 2px 6px -3px rgba(21,24,28,.10), 0 22px 44px -20px rgba(21,24,28,.24); transform: translateY(-3px); color: inherit; }
.pr-actions .p-compare { width: 50px; height: 50px; background: #fff; }

.pr-trust { display: flex; gap: 18px; margin-top: 18px; flex-wrap: wrap; font-size: 12.5px; font-weight: 600; color: rgba(21,24,28,.55); }

/* ---- the sections below ---- */
.pr-body { max-width: 1440px; margin: 0 auto; padding: 34px clamp(18px, 3vw, 40px) 0; }
.pr-jump { display: flex; gap: 10px; flex-wrap: wrap; }
.jump-pill { display: flex; align-items: center; height: 40px; padding: 0 20px; background: #fff; border: 1px solid rgba(21,24,28,.1); border-radius: 999px; font-size: 13.5px; font-weight: 700; }
.jump-pill:hover { background: #15181c; color: #fff; }
.jump-sec { scroll-margin-top: 90px; }

.pr-card { background: #fff; border: 1px solid rgba(21,24,28,.09); border-radius: 14px; padding: clamp(20px, 3vw, 30px); margin-top: 20px; }
.pr-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pr-card-head h2 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin: 0; }
.pr-source { font-size: 12.5px; font-weight: 600; color: rgba(21,24,28,.45); }

.pr-text { font-size: 15px; line-height: 1.7; color: rgba(21,24,28,.72); }
.pr-text h2, .pr-text h3 { color: #15181c; letter-spacing: -.02em; }
/* The headings inside a description come with the imported text. They took the line height of the
   running text (1.7) at a heading size, so a two line heading read as two loose lines: a smaller
   size with a line height of its own. */
.pr-text h2 { font-size: 18px; line-height: 1.35; font-weight: 700; margin: 22px 0 10px; }
.pr-text h3 { font-size: 16px; line-height: 1.4; font-weight: 700; margin: 18px 0 8px; }
.pr-text > :first-child { margin-top: 0; }
@media (max-width: 880px) { .pr-text h2 { font-size: 17px; } }
.pr-text img { max-width: 100%; height: auto; }
.pr-text table { width: 100%; border-collapse: collapse; }
.pr-text td, .pr-text th { padding: 8px 10px; border-bottom: 1px solid rgba(21,24,28,.08); text-align: left; }

.pr-spec-list { display: flex; flex-direction: column; margin-top: 20px; }
.pr-spec-row { display: flex; align-items: flex-end; gap: 10px; padding: 12px 0; border-bottom: 1px solid rgba(21,24,28,.07); font-size: 14px; }
.pr-spec-row .k { color: rgba(21,24,28,.55); min-width: 0; line-height: 1.4; }
.pr-spec-row .dots { flex: 1 1 auto; min-width: 14px; height: 1px; border-bottom: 1px dotted rgba(21,24,28,.26); margin-bottom: .35em; }
.pr-spec-row .v { font-weight: 700; flex-shrink: 0; text-align: right; max-width: 55%; line-height: 1.4; }

.pr-spec-scroll { margin-top: 20px; overflow-x: auto; }
.pr-spec-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pr-spec-table th { padding: 10px 12px; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: rgba(21,24,28,.5); text-align: left; border-bottom: 1px solid rgba(21,24,28,.12); white-space: nowrap; }
.pr-spec-table td { padding: 12px; border-bottom: 1px solid rgba(21,24,28,.07); font-weight: 700; white-space: nowrap; }
.pr-spec-table td.k { color: rgba(21,24,28,.55); font-weight: 400; white-space: normal; min-width: 220px; }
.pr-spec-note { margin-top: 14px; font-size: 12.5px; color: rgba(21,24,28,.5); }

.pr-video { margin-top: 18px; }
.pr-video iframe, .pr-video video { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 12px; background: #0e1116; }
.pr-video-link { display: inline-block; margin-top: 14px; font-weight: 600; }

/* ---------- brands index ---------- */
.brands-grid { max-width: 1440px; margin: 0 auto; padding: 34px clamp(18px, 3vw, 40px) clamp(34px, 4vw, 56px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(390px, 100%), 1fr)); gap: 14px; }
.brand-tile { display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(21,24,28,.09); border-radius: 14px; padding: 20px; }
.brand-tile-pic { display: flex; align-items: center; justify-content: center; height: 116px; margin: -20px -20px 16px; padding: 14px; background: #f7f8f9; border-radius: 13px 13px 0 0; }
.brand-tile-pic img { max-width: 100%; max-height: 100%; width: auto; height: auto; mix-blend-mode: multiply; }
.brand-tile-pic.is-plain span { font-size: 26px; font-weight: 700; letter-spacing: -.03em; color: rgba(21,24,28,.28); }
.brand-tile-top { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.brand-tile-name { font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.brand-tile-count { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: rgba(21,24,28,.45); white-space: nowrap; }
/* two lines whatever the text, so the cards in a row keep the same rhythm */
.brand-tile-text { font-size: 13.5px; line-height: 1.55; color: rgba(21,24,28,.62); margin: 10px 0 0; min-height: calc(2 * 1.55em); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.brand-tile-cats { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 14px; }
.brand-tile-cats .brand-cat { height: 32px; padding: 0 12px; gap: 7px; font-size: 12px; }
.brand-tile-cats .brand-cat.is-rest { color: rgba(21,24,28,.45); border-style: dashed; }
.brand-tile-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 18px; }
.brand-tile-go { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; background: #15181c; color: #fff; border-radius: 10px; font-size: 13px; font-weight: 700; }
.brand-tile-go span { opacity: .55; }
.brand-tile-go:hover { background: #2d3f88; color: #fff; }
.brand-tile-pdf { display: flex; align-items: center; height: 40px; padding: 0 16px; background: #f4f5f6; border-radius: 10px; font-size: 12.5px; font-weight: 700; }
.brand-tile-pdf:hover { background: #e8eaec; }

/* ---------- brand page ---------- */
/* the cover sits inside the article card, edge to edge with its top corners */
.brand-cover { margin: calc(-1 * clamp(22px, 3vw, 40px)) calc(-1 * clamp(22px, 3vw, 40px)) clamp(20px, 2.4vw, 32px); }
.brand-cover img { display: block; width: 100%; height: auto; max-height: 420px; object-fit: cover; border-radius: 13px 13px 0 0; }
.brand-article { margin: 34px auto 0; }
.brand-list { max-width: 1440px; margin: 0 auto; padding: 30px clamp(18px, 3vw, 40px) 80px; }
.brand-cats { display: flex; gap: 10px; flex-wrap: wrap; }
.brand-cat { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 22px; background: #fff; border: 1px solid rgba(21,24,28,.1); border-radius: 999px; font-size: 13.5px; font-weight: 700; }
.brand-cat:hover { background: #15181c; border-color: #15181c; color: #fff; }
.brand-cat .count { font-size: 12px; font-weight: 700; color: rgba(21,24,28,.45); }
.brand-cat:hover .count { color: rgba(255,255,255,.6); }
.brand-list-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin: 0 0 18px; }
.brand-list-head h2 { font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; letter-spacing: -.03em; margin: 0; }
.brand-list-head .found { font-size: 13.5px; font-weight: 600; color: rgba(21,24,28,.55); }

/* documentation and service: the catalogue, the service request, the article about the brand */
.pr-docs { max-width: 1440px; margin: 0 auto; padding: 34px clamp(18px, 3vw, 40px) 0; }
.pr-docs h2 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin: 0; }
.pr-docs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 14px; margin-top: 20px; }
.pr-doc { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; min-height: 170px; padding: 26px; background: #fff; border: 1px solid rgba(21,24,28,.09); border-radius: 14px; transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.pr-doc:hover { border-color: rgba(21,24,28,.22); box-shadow: 0 14px 34px rgba(21,24,28,.08); transform: translateY(-2px); }
.pr-doc .cap { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(21,24,28,.45); }
.pr-doc .title { display: block; font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.pr-doc .note { display: block; font-size: 13.5px; line-height: 1.5; color: rgba(21,24,28,.55); margin-top: 6px; }
.pr-doc .arrow { white-space: nowrap; }
.pr-doc.dark { background: #2d3f88; border-color: #2d3f88; color: #fff; }
.pr-doc.dark:hover { box-shadow: 0 14px 34px rgba(45,63,136,.28); }
.pr-doc.dark .cap { color: rgba(255,255,255,.5); }
.pr-doc.dark .note { color: rgba(255,255,255,.6); }

.pr-related { max-width: 1440px; margin: 44px auto 70px; padding: 0 clamp(18px, 3vw, 40px); }
.pr-related-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.pr-related-head h2 { font-size: clamp(24px, 2.6vw, 32px); font-weight: 700; letter-spacing: -.03em; margin: 0; }
.pr-related-head a { font-size: 13.5px; font-weight: 700; }
.pr-related-head a span { opacity: .5; }
#related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 14px; margin-top: 22px; }
#related-grid .p-type { display: block; font-size: 12.5px; font-weight: 600; color: #0a4fb0; margin-top: 5px; }
#related-grid .p-sub { font-size: 13px; font-weight: 400; color: rgba(21,24,28,.55); margin-top: 10px; }
#related-grid .p-card { display: flex; }
#related-grid .p-media { height: 190px; }
#related-grid .p-media img { width: 100%; height: 100%; object-fit: contain; }

@media (max-width: 880px) {
  #gallery { grid-template-columns: minmax(0, 1fr); }
  .pr-thumbs { flex-direction: row; order: 2; overflow-x: auto; }
  .pr-thumb { width: 64px; height: 64px; flex-shrink: 0; }
  /* the main button and the comparison share the first row - alone on its own row the small square
     button stood in empty space; the phone takes the whole second row */
  .pr-actions .p-buy { flex: 1 1 0; min-width: 0; justify-content: center; order: 1; }
  .pr-actions .p-compare { flex: 0 0 50px; order: 2; }
  .pr-phone { flex: 1 1 100%; justify-content: center; order: 3; }
  #related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #related-grid .p-media { height: 150px; }
}

/* ---------- the cart that drops out of the header ---------- */

.mini-cart { position: relative; }
.mini-cart.is-open > a { background: #15181c; }

.mc-panel {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 95;
  width: min(400px, calc(100vw - 32px));
  background: #fff; border: 1px solid rgba(21,24,28,.1); border-radius: 16px;
  box-shadow: 0 18px 44px -14px rgba(21,24,28,.28);
  padding: 16px;
  opacity: 0; transform: translateY(-8px);
  transition: opacity .18s ease, transform .18s ease;
}
.mc-panel.is-in { opacity: 1; transform: none; }

/* the cross is the way out that is always there - the sheet on a phone has nothing around it to
   click past, and on a desktop a panel without one reads as stuck */
.mc-close {
  margin-left: auto; width: 30px; height: 30px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(21,24,28,.12); border-radius: 999px; background: #fff;
  font: inherit; font-size: 12px; color: rgba(21,24,28,.45); cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.mc-close:hover { background: #15181c; border-color: #15181c; color: #fff; }
.mc-grip { display: none; }

/* dimmed page behind the sheet; it sits on the body so that a tap on it counts as a tap outside */
.mc-veil {
  position: fixed; inset: 0; z-index: 44;
  background: rgba(21,24,28,.42);
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility .3s;
}
.mc-veil.is-in { opacity: 1; visibility: visible; }

@media (min-width: 881px) { .mc-veil { display: none; } }

.mc-head { display: flex; align-items: center; gap: 10px; padding: 0 2px 12px; border-bottom: 1px solid rgba(21,24,28,.08); }
.mc-title { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.mc-count { min-width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; padding: 0 7px; background: #f2f3f4; border-radius: 999px; font-size: 11.5px; font-weight: 700; }

.mc-items { display: flex; flex-direction: column; max-height: min(46vh, 380px); overflow-y: auto; margin: 0 -4px; padding: 4px; }
.mc-item { display: flex; gap: 12px; padding: 12px 4px; border-bottom: 1px solid rgba(21,24,28,.06); }
.mc-item:last-child { border-bottom: none; }

.mc-pic { width: 56px; height: 56px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #f7f8f9; border-radius: 10px; }
.mc-pic img { max-width: 80%; max-height: 80%; mix-blend-mode: multiply; }

.mc-info { flex: 1; min-width: 0; }
.mc-name { display: block; font-size: 13.5px; font-weight: 700; line-height: 1.3; }
.mc-option { font-size: 11.5px; color: rgba(21,24,28,.5); margin-top: 3px; }
.mc-price { font-size: 12px; color: rgba(21,24,28,.5); margin-top: 4px; }

.mc-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }
.mc-remove { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border: none; background: none; color: #b6c0cc; font-size: 13px; cursor: pointer; border-radius: 6px; }
.mc-remove:hover { color: #c33d21; background: #f7f8f9; }

.mc-qty { display: flex; align-items: center; border: 1px solid rgba(21,24,28,.12); border-radius: 999px; overflow: hidden; }
.mc-qty button { width: 28px; height: 28px; border: none; background: #fff; font: inherit; font-size: 14px; font-weight: 700; color: rgba(21,24,28,.6); cursor: pointer; }
.mc-qty button:hover { background: #f2f3f4; color: #15181c; }
.mc-qty input { width: 34px; height: 28px; border: none; outline: none; text-align: center; font: inherit; font-size: 13px; font-weight: 700; background: #fff; }

.mc-total { font-size: 13.5px; font-weight: 700; white-space: nowrap; }

.mc-totals { padding: 12px 2px 0; border-top: 1px solid rgba(21,24,28,.08); margin-top: 4px; }
.mc-total-row { display: flex; justify-content: space-between; gap: 16px; font-size: 13px; color: rgba(21,24,28,.6); padding: 4px 0; }
.mc-total-row.is-final { font-size: 16px; font-weight: 700; color: #15181c; padding-top: 8px; }

.mc-actions { display: flex; gap: 8px; margin-top: 14px; }
.mc-btn { flex: 1; display: flex; align-items: center; justify-content: center; height: 46px; padding: 0 16px; background: #f2f3f4; border-radius: 10px; font-size: 13px; font-weight: 700; }
.mc-btn:hover { background: #e4e8ec; color: inherit; }
.mc-btn-primary { background: #c33d21; color: #fff; }
.mc-btn-primary:hover { background: #15181c; color: #fff; }

.mc-empty { padding: 26px 6px 10px; text-align: center; }
.mc-empty-title { font-size: 15px; font-weight: 700; }
.mc-empty-text { font-size: 13px; color: rgba(21,24,28,.55); margin: 6px 0 16px; }

/* the article next to a category */
.cat-card-article { background: #f4f5f6; }
.cat-card-article:hover { background: #eceef0; color: inherit; }
.cat-card-article .cap { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(21,24,28,.4); }
.cat-card-article .title { display: block; font-size: 19px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }

@media (max-width: 880px) {
  /* The panel stands on the bottom edge of the screen and grows upwards, so a long list used to
     run off the top of it - behind the address bar of the browser. It is kept inside the visible
     part of the window and it is the list of products that scrolls, never the totals or the
     button: those are what the panel is opened for. */
  /* on a phone it is a sheet that comes up from the bottom edge and stays inside the window */
  .mc-panel {
    position: fixed; top: auto; bottom: 0; left: 0; right: 0; width: auto;
    display: flex; flex-direction: column;
    max-height: calc(100vh - 56px);
    max-height: calc(100dvh - 56px);
    padding: 6px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    border-radius: 20px 20px 0 0; border-left: 0; border-right: 0; border-bottom: 0;
    box-shadow: 0 -16px 40px -12px rgba(21,24,28,.32);
    opacity: 1; transform: translateY(101%);
    transition: transform .32s cubic-bezier(.22,.72,.2,1);
  }
  .mc-panel.is-in { transform: none; }
  .mc-grip { display: block; width: 40px; height: 4px; margin: 6px auto 6px; border-radius: 999px; background: rgba(21,24,28,.16); }
  /* the panel is closed by the hidden attribute, and a display of its own would outshout it */
  .mc-panel[hidden] { display: none; }
  .mc-items { max-height: none; flex: 1 1 auto; min-height: 0; }
  .mc-head, .mc-totals, .mc-actions { flex-shrink: 0; }
  .cat-card-article { min-height: 0; }
}

/* the list fades while the new one is on its way, so the swap does not blink */
#catalog { transition: opacity .18s ease; }
#catalog.is-loading { opacity: .45; pointer-events: none; }
#catalog.is-loading .cat-filter { pointer-events: none; }
.cat-more a.is-busy { opacity: .6; pointer-events: none; }

/* ---------- cart page and checkout ---------- */
.co { max-width: 1440px; margin: 0 auto; padding: 34px clamp(18px, 3vw, 40px) 80px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 20px; align-items: start; }
.co-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.co-card { background: #fff; border: 1px solid rgba(21,24,28,.09); border-radius: 14px; padding: clamp(20px, 2.4vw, 28px); }
.co-step { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.co-step .n { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: #15181c; color: #fff; border-radius: 999px; font-size: 13px; font-weight: 700; flex-shrink: 0; }
.co-step h2 { font-size: 19px; font-weight: 700; letter-spacing: -.02em; margin: 0; }

.co-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 14px; }
.co-fields[hidden] { display: none; }
/* the fields of a delivery way follow the choice cards, they must not stick to them */
.co-fields[data-delivery-fields] { margin-top: 22px; }
.co-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.co-field.co-wide { grid-column: 1 / -1; }
.co-label { font-size: 12.5px; font-weight: 600; color: rgba(21,24,28,.55); }
.co-label i { color: #c33d21; font-style: normal; }
.co-field input, .co-field textarea { width: 100%; padding: 0 14px; height: 48px; background: #fff; border: 1px solid rgba(21,24,28,.14); border-radius: 10px; font: inherit; font-size: 14.5px; color: #15181c; }
.co-field textarea { height: auto; padding: 13px 14px; resize: vertical; }
.co-field input:focus, .co-field textarea:focus { outline: none; border-color: #2d3f88; box-shadow: 0 0 0 3px rgba(45,63,136,.12); }
.co-field.has-error input, .co-field.has-error textarea { border-color: #c33d21; }
.co-error { font-size: 12.5px; color: #c33d21; }
.co-error:empty { display: none; }
.co-error-top { font-size: 13px; color: #c33d21; text-align: center; }
.co-error-top:empty { display: none; }

.co-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 10px; }
.co-choice { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; border: 1px solid rgba(21,24,28,.14); border-radius: 12px; cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.co-choice[hidden] { display: none; }
.co-choice:hover { border-color: rgba(21,24,28,.3); }
.co-choice input { margin: 2px 0 0; width: 18px; height: 18px; accent-color: #2d3f88; flex-shrink: 0; }
.co-choice:has(input:checked) { border-color: #2d3f88; background: rgba(45,63,136,.04); }
.co-choice-name { display: block; font-size: 14.5px; font-weight: 700; }
.co-choice-note { display: block; font-size: 12.5px; line-height: 1.45; color: rgba(21,24,28,.55); margin-top: 4px; }
.co-hint { font-size: 13.5px; line-height: 1.5; color: rgba(21,24,28,.6); margin-top: 14px; }
.co-hint[hidden] { display: none; }

.co-side { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 12px; }
.co-summary { background: #fff; border: 1px solid rgba(21,24,28,.09); border-radius: 14px; padding: 20px; transition: opacity .18s ease; }
.co-summary.is-loading { opacity: .5; pointer-events: none; }
.co-sum-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid rgba(21,24,28,.08); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: rgba(21,24,28,.5); }
.co-sum-count { display: flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; background: #15181c; color: #fff; border-radius: 999px; font-size: 11.5px; }
.co-sum-items { display: flex; flex-direction: column; }
.co-sum-item { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid rgba(21,24,28,.07); }
.co-sum-pic { width: 60px; height: 60px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #f7f8f9; border-radius: 8px; overflow: hidden; }
.co-sum-pic img { max-width: 100%; max-height: 100%; }
.co-sum-info { flex: 1; min-width: 0; }
.co-sum-name { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.co-sum-price { font-size: 12.5px; color: rgba(21,24,28,.5); margin-top: 3px; }
.co-sum-side { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 8px; }
.co-sum-remove { width: 24px; height: 24px; border: 0; background: none; color: rgba(21,24,28,.35); font-size: 13px; cursor: pointer; }
.co-sum-remove:hover { color: #c33d21; }
.co-sum-total { font-size: 14px; font-weight: 700; white-space: nowrap; }
.co-qty { display: inline-flex; align-items: center; gap: 2px; margin-top: 8px; border: 1px solid rgba(21,24,28,.14); border-radius: 8px; overflow: hidden; }
.co-qty button { width: 28px; height: 30px; border: 0; background: none; font-size: 15px; line-height: 1; color: rgba(21,24,28,.65); cursor: pointer; }
.co-qty button:hover { background: #f4f5f6; color: #15181c; }
.co-qty input { width: 34px; height: 30px; border: 0; text-align: center; font: inherit; font-size: 13px; font-weight: 700; }
.co-qty input:focus { outline: none; }
.co-sum-totals { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; }
.co-sum-row { display: flex; justify-content: space-between; gap: 14px; font-size: 13.5px; color: rgba(21,24,28,.62); }
.co-sum-row.is-final { padding-top: 10px; border-top: 1px solid rgba(21,24,28,.08); font-size: 17px; font-weight: 700; color: #15181c; }

.co-submit { display: flex; align-items: center; justify-content: center; height: 54px; padding: 0 24px; background: #c33d21; color: #fff; border: 0; border-radius: 12px; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; transition: background .2s ease; }
.co-submit:hover { background: #a53318; color: #fff; }
.co-submit.is-busy { opacity: .6; pointer-events: none; }
.co-back { display: flex; align-items: center; justify-content: center; height: 46px; background: #f4f5f6; border-radius: 10px; font-size: 13.5px; font-weight: 700; }
.co-back:hover { background: #e8eaec; }
.co-note { font-size: 12px; line-height: 1.5; color: rgba(21,24,28,.5); text-align: center; }

.ct { max-width: 1440px; margin: 0 auto; padding: 34px clamp(18px, 3vw, 40px) 80px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 20px; align-items: start; }
.ct-list { display: flex; flex-direction: column; gap: 10px; }
.ct-item { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto auto auto; align-items: center; gap: 18px; background: #fff; border: 1px solid rgba(21,24,28,.09); border-radius: 14px; padding: 16px; }
.ct-pic { width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; background: #f7f8f9; border-radius: 10px; overflow: hidden; }
.ct-pic img { max-width: 100%; max-height: 100%; }
.ct-name { display: block; font-size: 15.5px; font-weight: 700; line-height: 1.35; }
.ct-model { font-size: 12.5px; color: rgba(21,24,28,.45); margin-top: 4px; }
.ct-price { font-size: 13.5px; color: rgba(21,24,28,.6); margin-top: 6px; }
.ct-item .co-qty { margin-top: 0; }
.ct-total { font-size: 17px; font-weight: 700; white-space: nowrap; }
.ct-remove { width: 34px; height: 34px; border: 1px solid rgba(21,24,28,.12); border-radius: 999px; background: #fff; color: rgba(21,24,28,.4); cursor: pointer; }
.ct-remove:hover { border-color: #c33d21; color: #c33d21; }
.ct-side { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 12px; background: #fff; border: 1px solid rgba(21,24,28,.09); border-radius: 14px; padding: 20px; }
.ct-empty { grid-column: 1 / -1; text-align: center; padding: 60px 20px; background: #fff; border: 1px solid rgba(21,24,28,.09); border-radius: 14px; }
.ct-empty .title { font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.ct-empty .p-buy { display: inline-flex; margin-top: 18px; }

.co-done { max-width: 760px; margin: 0 auto; padding: 34px clamp(18px, 3vw, 40px) 90px; }
.co-done-card { background: #fff; border: 1px solid rgba(21,24,28,.09); border-radius: 14px; padding: clamp(26px, 4vw, 44px); text-align: center; }
.co-done-mark { width: 56px; height: 56px; margin: 0 auto; display: flex; align-items: center; justify-content: center; background: rgba(45,63,136,.08); color: #2d3f88; border-radius: 999px; font-size: 26px; }
.co-done-number { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin-top: 18px; }
.co-done-text { font-size: 14.5px; line-height: 1.6; color: rgba(21,24,28,.62); margin: 12px 0 0; }
.co-done-rows { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; text-align: left; }
.co-done-rows > div { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; padding-bottom: 10px; border-bottom: 1px solid rgba(21,24,28,.07); }
.co-done-rows > div span:first-child { color: rgba(21,24,28,.55); }
.co-done-rows .is-final { border: 0; font-size: 18px; font-weight: 700; }
.co-done-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
.co-done-actions .co-submit, .co-done-actions .co-back { padding: 0 28px; }

@media (max-width: 980px) {
  .co, .ct { grid-template-columns: minmax(0, 1fr); }
  .co-side, .ct-side { position: static; }
  /* one column: the order comes first, so the buyer sees what they are ordering before the forms;
     the button that confirms stays under the forms, where it is pressed after filling them in */
  .co-side { display: contents; }
  .co-summary { order: -1; }
  .co-side > .co-error-top, .co-side > .co-note, .co-side > .co-back { margin-top: -8px; }
  .ct-item { grid-template-columns: 72px minmax(0, 1fr) auto; row-gap: 12px; }
  .ct-pic { width: 72px; height: 72px; }
  .ct-item .co-qty { grid-column: 2; }
  .ct-total { grid-column: 3; }
  .ct-remove { grid-row: 1; grid-column: 3; }
}

/* the address fields that ask Nova Poshta */
/* the list hangs off the input itself, not off the whole field - the error line below it must
   not push the list up over the input */
.co-pick-box { position: relative; }
.co-pick.is-loading input { background-image: linear-gradient(90deg, rgba(45,63,136,.08), rgba(45,63,136,0)); }
.co-drop {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40;
  max-height: 280px; overflow-y: auto;
  background: #fff; border: 1px solid rgba(21,24,28,.12); border-radius: 12px;
  box-shadow: 0 18px 40px -14px rgba(21,24,28,.28); padding: 6px;
}
.co-drop[hidden] { display: none; }
.co-drop-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; width: 100%;
  padding: 10px 12px; border: 0; border-radius: 8px; background: none;
  font: inherit; font-size: 13.5px; text-align: left; color: #15181c; cursor: pointer;
}
.co-drop-item span { font-size: 12px; color: rgba(21,24,28,.45); white-space: nowrap; }
.co-drop-item:hover, .co-drop-item.is-active { background: #f4f5f6; }

/* ---------- the page after the order ---------- */
.ok-mark { display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px 7px 8px; background: rgba(45,63,136,.08); color: #2d3f88; border-radius: 999px; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.ok-mark span { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; background: #2d3f88; color: #fff; border-radius: 999px; font-size: 12px; }
.cat-intro .ok-mark + h1 { margin-top: 14px; }
.ok-head-side { display: flex; gap: 10px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.ok-copy, .ok-print { height: 42px; padding: 0 20px; background: #fff; border: 1px solid rgba(21,24,28,.14); border-radius: 10px; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; transition: background .18s ease, border-color .18s ease; }
.ok-copy:hover, .ok-print:hover { background: #f4f5f6; border-color: rgba(21,24,28,.26); }
.ok-copy.is-done { background: #2d3f88; border-color: #2d3f88; color: #fff; }

.ok { max-width: 1440px; margin: 0 auto; padding: 34px clamp(18px, 3vw, 40px) 80px; }
.ok-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 12px; }
.ok-step { display: grid; grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 18px 20px; background: #fff; border: 1px solid rgba(21,24,28,.09); border-radius: 14px; }
.ok-step .n { grid-row: 1 / 3; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: #f4f5f6; color: rgba(21,24,28,.5); border-radius: 999px; font-size: 13px; font-weight: 700; }
.ok-step .t { font-size: 14.5px; font-weight: 700; }
.ok-step .s { font-size: 12.5px; line-height: 1.45; color: rgba(21,24,28,.55); margin-top: 2px; }
.ok-step.is-active { border-color: #2d3f88; box-shadow: 0 0 0 3px rgba(45,63,136,.08); }
.ok-step.is-active .n { background: #2d3f88; color: #fff; }

.ok-card { background: #fff; border: 1px solid rgba(21,24,28,.09); border-radius: 14px; padding: clamp(20px, 2.4vw, 28px); margin-top: 14px; }
/* one block, two columns inside: what was bought on the left, the details on the right */
.ok-cols { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px; }
.ok-col { min-width: 0; display: flex; flex-direction: column; }
.ok-col-side { padding-left: 32px; border-left: 1px solid rgba(21,24,28,.08); }
.ok-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.ok-card-head h2 { font-size: 18px; font-weight: 700; letter-spacing: -.02em; margin: 0; }
.ok-card-head span { font-size: 12.5px; color: rgba(21,24,28,.45); }

.ok-items { display: flex; flex-direction: column; }
.ok-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 16px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid rgba(21,24,28,.07); }
.ok-item-main a { font-size: 14.5px; font-weight: 600; }
.ok-item-model { display: block; font-size: 12px; color: rgba(21,24,28,.45); margin-top: 3px; }
.ok-item-qty { font-size: 13px; color: rgba(21,24,28,.55); white-space: nowrap; }
.ok-item-total { font-size: 14.5px; font-weight: 700; white-space: nowrap; }
.ok-totals { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; }
.ok-total { display: flex; justify-content: space-between; gap: 14px; font-size: 13.5px; color: rgba(21,24,28,.62); }
.ok-total.is-final { padding-top: 10px; border-top: 1px solid rgba(21,24,28,.08); font-size: 19px; font-weight: 700; color: #15181c; }

/* label over value: nothing is stretched across the width, so there are no holes in the middle */
.ok-facts { display: flex; flex-direction: column; gap: 13px; }
.ok-facts > div { display: flex; flex-direction: column; gap: 3px; padding-bottom: 11px; border-bottom: 1px solid rgba(21,24,28,.07); }
.ok-facts > div:last-child { border-bottom: 0; padding-bottom: 0; }
.ok-facts .k { font-size: 12px; font-weight: 600; letter-spacing: .02em; color: rgba(21,24,28,.45); }
.ok-facts .v { font-size: 14px; font-weight: 600; line-height: 1.45; }
.ok-rows > div span:first-child { color: rgba(21,24,28,.5); flex-shrink: 0; }
.ok-rows > div span:last-child { text-align: right; font-weight: 600; }
.ok-note { margin-top: 18px; padding: 14px 16px; background: rgba(45,63,136,.06); border-radius: 10px; font-size: 13px; line-height: 1.5; color: #2d3f88; }
.ok-sent { margin-top: 12px; font-size: 12.5px; color: rgba(21,24,28,.5); }

.ok-contact { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 24px; padding-top: 22px; border-top: 1px solid rgba(21,24,28,.08); }
.ok-contact-title { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgba(21,24,28,.45); }
.ok-phone { display: inline-block; font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin-top: 8px; }
.ok-links { display: flex; gap: 8px; flex-wrap: wrap; }
.ok-link { display: flex; align-items: center; height: 36px; padding: 0 14px; background: #f4f5f6; border-radius: 999px; font-size: 12.5px; font-weight: 700; }
.ok-link:hover { background: #15181c; color: #fff; }

.ok-foot { display: flex; justify-content: center; margin-top: 22px; }
.ok-foot .co-submit { padding: 0 40px; }

@media (max-width: 980px) {
  .ok-head-side { justify-content: flex-start; }
  .ok-cols { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .ok-col-side { padding-left: 0; padding-top: 24px; border-left: 0; border-top: 1px solid rgba(21,24,28,.08); }
  .ok-contact { margin-top: 24px; }
}

@media print {
  #top-utility, #m-hdr, #cat-nav, #footer, #m-bottom, #m-fab, .ok-head-side, .ok-foot, .ok-contact, .cat-crumbs { display: none !important; }
  .ok, .cat-head-inner { padding: 0; }
  .ok-card, .ok-step { border-color: #ccc; box-shadow: none; }
}

/* ---------- the search of the header ----------
   The markup used to carry its own inline styles; they are here now, because the button and the
   magnifier need states the design had no room for. */
.hdr-search {
  position: relative; flex: 1 1 260px; min-width: 200px;
  display: flex; align-items: center; gap: 12px;
  height: 52px; padding: 0 6px 0 18px;
  background: #f4f5f6; border: 1.5px solid rgba(21,24,28,.09); border-radius: 999px;
  transition: border-color .18s ease, background .18s ease;
}
.hdr-search:focus-within { background: #fff; border-color: rgba(21,24,28,.22); }
.hdr-search-icon { width: 21px; height: 21px; flex-shrink: 0; color: rgba(21,24,28,.42); }
.hdr-search:focus-within .hdr-search-icon { color: #15181c; }
.hdr-search input {
  flex: 1; min-width: 0; height: 100%;
  border: 0; background: transparent; outline: none;
  font: inherit; font-size: 14px; font-weight: 500; color: #15181c;
}
.hdr-search input::placeholder { color: rgba(21,24,28,.45); font-weight: 500; }
.hdr-search-go {
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; padding: 0 22px; flex-shrink: 0;
  background: #2d3f88; border: 0; border-radius: 999px;
  font: inherit; font-size: 13px; font-weight: 700; line-height: 1; color: #fff; cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
.hdr-search-go:hover { background: #15181c; }
.hdr-search-go:active { transform: scale(.97); }

@media (max-width: 1100px) {
  .hdr-search-go { padding: 0 16px; }
}

/* ---------- the contacts that drop from the phone in the header ---------- */
.hdr-phone { position: relative; padding-left: 12px; border-left: 1px solid rgba(21,24,28,.1); }
.hdr-phone-main { display: flex; flex-direction: column; justify-content: center; line-height: 1.25; }
.hdr-phone-main .number { font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.hdr-phone-main .note { font-size: 11px; font-weight: 600; color: #0a4fb0; letter-spacing: .04em; }

.hdr-phone-drop {
  position: absolute; top: calc(100% + 14px); right: 0; z-index: 90; width: 320px;
  padding: 8px; background: #fff;
  border: 1px solid rgba(21,24,28,.1); border-radius: 16px;
  box-shadow: 0 20px 48px -16px rgba(21,24,28,.3);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
/* the gap between the phone and the panel would break the hover, so it is bridged */
.hdr-phone-drop::before { content: ''; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.hdr-phone:hover .hdr-phone-drop,
.hdr-phone:focus-within .hdr-phone-drop { opacity: 1; visibility: visible; transform: translateY(0); }

.hdr-phone-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 10px 12px; border-radius: 10px; }
.hdr-phone-row:hover { background: #f4f5f6; }
.hdr-phone-row .k { font-size: 12px; font-weight: 600; color: rgba(21,24,28,.5); }
.hdr-phone-row .v { font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }

.hdr-phone-apps { display: flex; gap: 6px; padding: 10px 12px 4px; }
.hdr-phone-app {
  flex: 1; display: flex; align-items: center; justify-content: center; height: 34px;
  background: color-mix(in srgb, var(--app) 12%, #fff); color: var(--app);
  border-radius: 9px; font-size: 12px; font-weight: 700;
  transition: background .18s ease, color .18s ease;
}
.hdr-phone-app:hover { background: var(--app); color: #fff; }

.hdr-phone-mail { display: block; padding: 10px 12px 4px; font-size: 13px; font-weight: 600; }
.hdr-phone-address { display: flex; gap: 8px; margin-top: 6px; padding: 12px; background: #f7f8f9; border-radius: 12px; font-size: 12.5px; line-height: 1.45; color: rgba(21,24,28,.62); }
.hdr-phone-address .pin { color: #c33d21; }
.hdr-phone-address:hover { background: #f0f2f4; color: #15181c; }

.hdr-phone.is-open .hdr-phone-drop { opacity: 1; visibility: visible; transform: translateY(0); }

.hdr-phone-head { display: none; }

@media (min-width: 881px) and (max-width: 900px) {
  /* a touch screen just wider than a phone: the block opens on a tap and takes the width of the
     screen, because anchoring a 320px panel to a header that narrow pushes it off the edge */
  .hdr-phone-drop { position: fixed; left: 12px; right: 12px; width: auto; transform: translateY(-6px); }
  .hdr-phone-drop::before { display: none; }
  .hdr-phone:hover .hdr-phone-drop { opacity: 0; visibility: hidden; }
  .hdr-phone.is-open .hdr-phone-drop { opacity: 1; visibility: visible; transform: none; }
}

@media (max-width: 880px) {
  /* On a phone the contacts are a sheet that slides up from the bottom edge, the same way the cart
     does: a tap on the number in the header brings it, and every line in it dials. */
  .hdr-phone-drop {
    position: fixed; top: auto !important; right: 0; bottom: 0; left: 0; width: auto; z-index: 95;
    max-height: calc(100vh - 56px); max-height: calc(100dvh - 56px);
    overflow-y: auto; overscroll-behavior: contain;
    padding: 4px 16px calc(18px + env(safe-area-inset-bottom, 0px));
    border: 0; border-radius: 20px 20px 0 0;
    box-shadow: 0 -16px 40px -12px rgba(21,24,28,.32);
    opacity: 1; visibility: hidden; transform: translateY(101%);
    transition: transform .34s cubic-bezier(.22,.72,.2,1), visibility .34s;
  }
  .hdr-phone-drop::before { display: none; }
  /* a finger leaves :hover behind, and it must not pull the sheet out on its own */
  .hdr-phone:hover .hdr-phone-drop,
  .hdr-phone:focus-within .hdr-phone-drop { opacity: 1; visibility: hidden; transform: translateY(101%); }
  .hdr-phone.is-open .hdr-phone-drop { visibility: visible; transform: none; }

  .hdr-phone-head { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 0 4px 8px; }
  .hdr-phone-head .mc-grip { grid-column: 1 / -1; justify-self: center; display: block; }
  .hdr-phone-head b { font-size: 17px; font-weight: 800; letter-spacing: -.02em; }

  .hdr-phone-row { padding: 13px 12px; }
  .hdr-phone-row .k { font-size: 13px; }
  .hdr-phone-row .v { font-size: 16px; }
  .hdr-phone-apps { gap: 8px; padding: 12px 12px 6px; }
  .hdr-phone-app { height: 44px; font-size: 13px; border-radius: 11px; }
  .hdr-phone-mail { padding: 12px 12px 6px; font-size: 14.5px; }
  .hdr-phone-address { margin-top: 10px; font-size: 13.5px; }
}

/* ---------- search results ---------- */
.sr-form { display: flex; align-items: center; gap: 12px; max-width: 640px; height: 56px; margin-top: 22px; padding: 0 8px 0 20px; background: #fff; border: 1.5px solid rgba(21,24,28,.12); border-radius: 999px; transition: border-color .18s ease, box-shadow .18s ease; }
.sr-form:focus-within { border-color: #2d3f88; box-shadow: 0 0 0 4px rgba(45,63,136,.1); }
.sr-form svg { width: 21px; height: 21px; flex-shrink: 0; color: rgba(21,24,28,.42); }
.sr-form input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; outline: none; font: inherit; font-size: 15px; font-weight: 500; color: #15181c; }
.sr-form button { display: inline-flex; align-items: center; justify-content: center; height: 42px; padding: 0 26px; flex-shrink: 0; background: #2d3f88; border: 0; border-radius: 999px; font: inherit; font-size: 13.5px; font-weight: 700; line-height: 1; color: #fff; cursor: pointer; transition: background .18s ease; }
.sr-form button:hover { background: #15181c; }

/* nothing has been asked yet: there is nothing to narrow down, so the column is not drawn */
#catalog.is-plain { grid-template-columns: minmax(0, 1fr); }
#catalog.is-plain .cat-filter { display: none; }
.sr-popular { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgba(21,24,28,.45); margin-bottom: 14px; }
.sr-empty-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 20px; }
.sr-empty-actions .p-buy { display: inline-flex; width: auto; flex: 0 0 auto; padding: 0 26px; }
.sr-empty-call { display: inline-flex; align-items: center; height: 46px; padding: 0 22px; background: #f4f5f6; border-radius: 10px; font-size: 14px; font-weight: 700; }
.sr-empty-call:hover { background: #15181c; color: #fff; }

/* ---------- the veil of the first paint ----------
   Taken from the approved design. It hides itself: the script removes it when the page is ready,
   and an animation does the same a few seconds later, so a failed script can never lock the site.

   Leaving is a move of its own: the bar runs from wherever it stands to the end and only then does
   the veil fade, so a page that arrives in a blink still reads as a finished loading and not as a
   flash. Where the bar stands is handed over in --sd-at. */
#sd-pre {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: #f2f3f4;
  animation: sd-pre-out .42s ease 4.5s forwards;
}
#sd-pre.is-done { animation: sd-pre-out .42s cubic-bezier(.4,0,.6,1) .26s forwards; }
.sd-pre-box { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.sd-pre-box img { width: 152px; height: auto; display: block; animation: sd-pre-in .5s cubic-bezier(.22,.72,.2,1) both; }
.sd-pre-box .track { position: relative; width: 172px; height: 2px; border-radius: 2px; background: rgba(21,24,28,.11); overflow: hidden; animation: sd-pre-in .5s cubic-bezier(.22,.72,.2,1) .08s both; }
.sd-pre-box .track i { display: block; width: 100%; height: 100%; border-radius: 2px; background: #c33d21; transform: scaleX(0); transform-origin: left center; animation: sd-pre-fill 2.4s cubic-bezier(.08,.72,.28,1) both; }
#sd-pre.is-done .track i { animation: sd-pre-done .3s cubic-bezier(.32,.72,.24,1) forwards; }
#sd-pre.is-done .sd-pre-box img { animation: sd-pre-lift .34s cubic-bezier(.32,.72,.24,1) .12s forwards; }
.sd-pre-note { position: fixed; left: 50%; bottom: 34px; transform: translateX(-50%); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(21,24,28,.3); white-space: nowrap; }

@keyframes sd-pre-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@keyframes sd-pre-fill { from { transform: scaleX(0); } to { transform: scaleX(.55); } }
@keyframes sd-pre-done { from { transform: scaleX(var(--sd-at, .55)); } to { transform: scaleX(1); } }
@keyframes sd-pre-lift { to { transform: translateY(-6px) scale(1.015); } }
@keyframes sd-pre-out { to { opacity: 0; visibility: hidden; } }

@media (prefers-reduced-motion: reduce) {
  .sd-pre-box img, .sd-pre-box .track { animation: none; }
  .sd-pre-box .track i { animation: none; transform: scaleX(.4); }
  #sd-pre.is-done .sd-pre-box img, #sd-pre.is-done .track i { animation: none; }
  #sd-pre.is-done { animation: sd-pre-out .3s ease forwards; }
}

/* ---------- contacts ----------
   The channels come first as a row of cards - a visitor on this page wants a number, not a form -
   and under them the place and the letter stand side by side. */
.cn { max-width: 1440px; margin: 34px auto 60px; padding: 0 clamp(18px, 3vw, 40px); }
.cn-channels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.cn-card {
  display: flex; flex-direction: column; gap: 6px;
  background: #fff; border: 1px solid rgba(21,24,28,.09); border-radius: 14px;
  padding: 18px 20px 16px; min-height: 108px;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
a.cn-card:hover { border-color: rgba(45,63,136,.45); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(21,24,28,.07); }
.cn-card .k { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(21,24,28,.42); }
.cn-card .v { font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: #15181c; }
.cn-card .v.mail { font-size: 16px; letter-spacing: -.01em; word-break: break-all; }
.cn-card .n { font-size: 12.5px; color: rgba(21,24,28,.5); margin-top: auto; }
.cn-card.is-apps { gap: 10px; }
.cn-apps { display: flex; gap: 8px; flex-wrap: wrap; }
.cn-app {
  display: inline-flex; align-items: center; height: 32px; padding: 0 13px;
  border-radius: 999px; background: var(--app); color: #fff;
  font-size: 12.5px; font-weight: 700; white-space: nowrap;
  transition: transform .2s ease, filter .2s ease;
}
.cn-app:hover { color: #fff; transform: translateY(-1px); filter: brightness(1.08); }

/* both cards to the same height: the map takes whatever the form leaves over */
.cn-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; margin-top: 18px; align-items: stretch; }
.cn-place { display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(21,24,28,.09); border-radius: 14px; overflow: hidden; }
.cn-map { position: relative; flex: 1 1 auto; aspect-ratio: 16 / 10; background: #e9eaec; }
.cn-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; filter: saturate(.82); }
.cn-place-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; padding: 20px clamp(18px, 2vw, 26px) 22px; }
.cn-fact { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.cn-fact .k { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(21,24,28,.42); }
.cn-fact .v { font-size: 15px; font-weight: 600; line-height: 1.5; color: #15181c; }
.cn-fact .n { font-size: 12.5px; color: rgba(21,24,28,.5); }
.cn-link { font-size: 13px; font-weight: 700; color: #2d3f88; border-bottom: 1.5px solid rgba(45,63,136,.25); }
.cn-link:hover { color: #15181c; border-bottom-color: rgba(21,24,28,.35); }
.cn-note { grid-column: 1 / -1; margin: 0; font-size: 13.5px; line-height: 1.6; color: rgba(21,24,28,.6); }

.cn-form-card { background: #fff; border: 1px solid rgba(21,24,28,.09); border-radius: 14px; padding: clamp(20px, 2.4vw, 30px); }
.cn-form-card h2 { font-size: 22px; font-weight: 800; letter-spacing: -.025em; margin: 0; }
.cn-form-note { font-size: 13.5px; line-height: 1.6; color: rgba(21,24,28,.55); margin: 8px 0 20px; }
.cn-form { display: flex; flex-direction: column; gap: 14px; }
.cn-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.cn-field { display: flex; flex-direction: column; gap: 7px; }
.cn-field > span { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(21,24,28,.42); }
.cn-field input, .cn-field textarea {
  width: 100%; padding: 13px 15px; background: #fff;
  border: 1.5px solid rgba(21,24,28,.13); border-radius: 10px;
  font: inherit; font-size: 14.5px; color: #15181c;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.cn-field textarea { resize: vertical; min-height: 118px; line-height: 1.55; }
.cn-field input:focus, .cn-field textarea:focus { outline: none; border-color: #2d3f88; box-shadow: 0 0 0 3px rgba(45,63,136,.12); }
.cn-field input::placeholder, .cn-field textarea::placeholder { color: rgba(21,24,28,.32); }
.cn-field.is-bad input, .cn-field.is-bad textarea { border-color: #c33d21; }
.cn-field em { font-style: normal; font-size: 12.5px; font-weight: 600; color: #c33d21; }
.cn-send { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.cn-send .p-buy { flex: 0 0 auto; height: 48px; padding: 0 30px; background: #2d3f88; font-size: 14px; }
.cn-send .p-buy:hover { background: #15181c; }
.cn-send span { font-size: 12.5px; line-height: 1.5; color: rgba(21,24,28,.45); max-width: 280px; }

.cn-done { display: flex; gap: 13px; align-items: flex-start; background: rgba(31,138,76,.08); border: 1px solid rgba(31,138,76,.25); border-radius: 12px; padding: 15px 17px; margin-bottom: 20px; }
.cn-done .tick { width: 26px; height: 26px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: #1f8a4c; color: #fff; font-size: 14px; font-weight: 700; }
.cn-done b { display: block; font-size: 14.5px; color: #15181c; }
.cn-done p { margin: 3px 0 0; font-size: 13px; line-height: 1.55; color: rgba(21,24,28,.6); }

.cn-aside { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(21,24,28,.09); }
.cn-aside b { display: block; font-size: 14.5px; color: #15181c; }
.cn-aside span { display: block; font-size: 12.5px; color: rgba(21,24,28,.5); margin-top: 2px; }
.cn-link-btn { display: inline-flex; align-items: center; height: 42px; padding: 0 20px; background: #f2f3f4; border-radius: 10px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.cn-link-btn:hover { background: #15181c; color: #fff; }

@media (max-width: 1000px) {
  .cn-channels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .cn-main { grid-template-columns: minmax(0, 1fr); }
  .cn-map { flex: 0 0 auto; aspect-ratio: 16 / 11; }
}

@media (max-width: 560px) {
  .cn-channels { grid-template-columns: minmax(0, 1fr); }
  .cn-card { min-height: 0; }
}

/* ---------- comparison ----------
   The names of the lines stay on the left while the models scroll sideways, and the heads of the
   columns stay under the top bar while the specification scrolls down: at any moment the visitor
   can see which line and which machine a cell belongs to. */
.cp { max-width: 1440px; margin: 26px auto 60px; padding: 0 clamp(18px, 3vw, 40px); }
.cp.is-busy { opacity: .5; pointer-events: none; transition: opacity .2s ease; }
.cp-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.cp-bar-facts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cp-chip { display: inline-flex; align-items: center; height: 30px; padding: 0 13px; border-radius: 999px; background: #fff; border: 1px solid rgba(21,24,28,.1); font-size: 12.5px; font-weight: 600; color: rgba(21,24,28,.62); }
.cp-chip.is-diff { border-color: rgba(195,61,33,.3); background: rgba(195,61,33,.07); color: #a8331b; }
.cp-bar-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cp-switch {
  display: inline-flex; align-items: center; gap: 9px; height: 38px; padding: 0 15px;
  background: #fff; border: 1.5px solid rgba(21,24,28,.12); border-radius: 999px;
  font: inherit; font-size: 13px; font-weight: 700; color: rgba(21,24,28,.7); cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.cp-switch .dot { width: 30px; height: 17px; border-radius: 999px; background: rgba(21,24,28,.16); position: relative; transition: background .2s ease; }
.cp-switch .dot::after { content: ''; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 999px; background: #fff; transition: transform .2s cubic-bezier(.3,.7,.2,1); }
.cp-switch[aria-pressed="true"] { border-color: #2d3f88; color: #2d3f88; }
.cp-switch[aria-pressed="true"] .dot { background: #2d3f88; }
.cp-switch[aria-pressed="true"] .dot::after { transform: translateX(13px); }
.cp-ghost { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; background: #fff; border: 1.5px solid rgba(21,24,28,.12); border-radius: 999px; font: inherit; font-size: 13px; font-weight: 700; color: rgba(21,24,28,.7); cursor: pointer; white-space: nowrap; }
.cp-ghost:hover, .cp-switch:hover { border-color: rgba(21,24,28,.3); color: #15181c; }

.cp-scroll { overflow-x: auto; overscroll-behavior-x: contain; background: #fff; border: 1px solid rgba(21,24,28,.09); border-radius: 14px; }
.cp-table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: calc(230px + var(--cols) * 230px); }
.cp-table th, .cp-table td { text-align: left; vertical-align: top; }

.cp-corner, .cp-row > th { position: sticky; left: 0; z-index: 2; background: #fff; }
/* the band of a section is as wide as the table, so it is its text that stays in sight */
.cp-group > th > span { position: sticky; left: 18px; display: inline-block; }
.cp-corner { width: 230px; min-width: 230px; padding: 16px 18px; font-size: 11.5px; font-weight: 600; line-height: 1.45; color: rgba(21,24,28,.42); vertical-align: bottom; }

.cp-head { width: 230px; min-width: 230px; padding: 18px 16px 20px; border-left: 1px solid rgba(21,24,28,.07); position: relative; }
.cp-drop { position: absolute; right: 10px; top: 10px; width: 28px; height: 28px; border: 1px solid rgba(21,24,28,.12); border-radius: 999px; background: #fff; color: rgba(21,24,28,.4); font-size: 16px; line-height: 1; cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.cp-drop:hover { background: #c33d21; border-color: #c33d21; color: #fff; }
.cp-shot { display: flex; align-items: center; justify-content: center; height: 150px; background: #f7f8f9; border-radius: 10px; overflow: hidden; }
.cp-shot img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cp-brand { display: block; margin-top: 12px; font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: rgba(21,24,28,.4); }
.cp-name { display: block; margin-top: 4px; font-size: 14.5px; font-weight: 700; line-height: 1.35; color: #15181c; }
.cp-name:hover { color: #2d3f88; }
.cp-price { margin-top: 10px; font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.cp-price s { display: block; font-size: 13px; font-weight: 600; color: rgba(21,24,28,.38); }
.cp-price .on-request { font-size: 14px; font-weight: 700; color: rgba(21,24,28,.5); }
.cp-stock { margin: 5px 0 12px; font-size: 12.5px; font-weight: 600; color: rgba(21,24,28,.5); }
.cp-stock.is-in { color: #1f8a4c; }
.cp-head .p-buy { width: 100%; }

.cp-group > th { padding: 14px 18px 8px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(21,24,28,.45); background: #fbfbfc; border-top: 1px solid rgba(21,24,28,.07); }
.cp-row > th { width: 230px; min-width: 230px; padding: 12px 18px; font-size: 13.5px; font-weight: 600; color: rgba(21,24,28,.58); border-top: 1px solid rgba(21,24,28,.06); }
.cp-row > td { padding: 12px 16px; font-size: 14px; line-height: 1.45; color: #15181c; border-top: 1px solid rgba(21,24,28,.06); border-left: 1px solid rgba(21,24,28,.07); }
.cp-row:hover > th, .cp-row:hover > td { background: #fafbfc; }
.cp-row.is-diff > th { color: #15181c; }
.cp-row.is-diff > th::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 7px; border-radius: 999px; background: #c33d21; vertical-align: 2px; }
.cp-table.only-diff .cp-row.is-same { display: none; }
.cp-table.only-diff .cp-group { display: none; }

.cp-empty { background: #fff; border: 1px solid rgba(21,24,28,.09); border-radius: 14px; padding: clamp(34px, 5vw, 64px) 24px; text-align: center; }
.cp-empty-mark { width: 58px; height: 58px; margin: 0 auto 18px; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: #f2f3f4; font-size: 24px; color: rgba(21,24,28,.35); }
.cp-empty h2 { font-size: 22px; font-weight: 800; letter-spacing: -.025em; margin: 0; }
.cp-empty p { max-width: 460px; margin: 10px auto 22px; font-size: 14.5px; line-height: 1.6; color: rgba(21,24,28,.55); }
.cp-empty .p-buy { display: inline-flex; width: auto; flex: 0 0 auto; height: 46px; padding: 0 28px; background: #2d3f88; }
.cp-empty .p-buy:hover { background: #15181c; }

@media (max-width: 700px) {
  /* the left column gives way: on a phone the name of the line matters less than the values */
  .cp-table { min-width: calc(140px + var(--cols) * 200px); }
  .cp-corner, .cp-row > th { width: 140px; min-width: 140px; padding-left: 14px; padding-right: 12px; font-size: 12.5px; }
  .cp-head { width: 200px; min-width: 200px; padding: 14px 12px 16px; }
  .cp-shot { height: 110px; }
  .cp-row > td { padding: 11px 12px; font-size: 13.5px; }
  .cp-corner { font-size: 11px; }
  .cp-bar-acts { width: 100%; }
  .cp-ghost, .cp-switch { height: 36px; font-size: 12.5px; }
}

/* the strip of names, shown once the heads of the columns have scrolled off */
.cp-mini {
  position: sticky; z-index: 5; overflow: hidden;
  display: flex; align-items: stretch; padding-left: var(--gap, 230px);
  isolation: isolate;
  background: rgba(255,255,255,.94); backdrop-filter: blur(12px);
  border: 1px solid rgba(21,24,28,.09); border-radius: 12px; margin-bottom: -1px;
  box-shadow: 0 8px 20px rgba(21,24,28,.06);
}
/* the names slide under the column of line names, exactly as the table does */
.cp-mini::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: var(--gap, 230px); background: #fff; border-right: 1px solid rgba(21,24,28,.07); z-index: 2; }
.cp-mini[hidden] { display: none; }
.cp-mini-track { display: flex; will-change: transform; }
.cp-mini-cell {
  display: flex; align-items: center; flex-shrink: 0;
  padding: 12px 16px; border-left: 1px solid rgba(21,24,28,.07);
  font-size: 12.5px; font-weight: 700; line-height: 1.3; color: #15181c;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

@media (max-width: 700px) {
  .cp-mini-cell { padding: 8px 12px; font-size: 11.5px; }
}

@media print {
  .cp-mini, .cp-bar, .cp-drop { display: none !important; }
  .cp-scroll { overflow: visible; }
}

/* ---------- the header of a phone fits in one line ----------
   Logo, cart, phone and the burger were wrapping onto a second line and the header ate a quarter
   of the screen. Nothing is dropped - everything simply scales with the width of the window. */
@media (max-width: 640px) {
  #m-hdr > div { flex-wrap: nowrap !important; gap: clamp(6px, 2vw, 14px) !important; padding: 12px clamp(12px, 3.4vw, 18px) !important; }
  #m-hdr > div > a:first-child { min-width: 0; }
  #m-hdr > div > a:first-child img { height: clamp(29px, 8.6vw, 40px) !important; }

  #hdr-actions { gap: 6px !important; min-width: 0; }
  #hdr-actions .x4 { height: clamp(36px, 10.2vw, 44px) !important; padding: 0 clamp(9px, 2.8vw, 13px) !important; gap: clamp(5px, 1.6vw, 8px) !important; }
  #hdr-actions .x4 svg { width: clamp(14px, 4.2vw, 17px) !important; height: clamp(14px, 4.2vw, 17px) !important; }
  #hdr-actions [data-cart-total] { min-width: clamp(17px, 5vw, 22px) !important; height: clamp(17px, 5vw, 22px) !important; font-size: clamp(10px, 2.9vw, 11.5px) !important; }

  .hdr-phone { padding-left: clamp(8px, 2.4vw, 12px); min-width: 0; }
  .hdr-phone-main .number { font-size: clamp(11.5px, 3.4vw, 15.5px); }
  .hdr-phone-main .note { font-size: clamp(8.5px, 2.6vw, 11px); }

  #m-burger { width: clamp(36px, 10.2vw, 46px) !important; height: clamp(36px, 10.2vw, 46px) !important; font-size: clamp(17px, 5vw, 20px) !important; }
}

/* ---------- the page that was not found ----------
   It is built like the head of a catalogue section on purpose: the visitor is not told off, they
   are put back where they were going. */
.nf-code { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 999px; background: rgba(195,61,33,.1); color: #a8331b; font-size: 11.5px; font-weight: 800; letter-spacing: .12em; }
.cat-intro .nf-code + h1 { margin-top: 14px; }
.nf { max-width: 1440px; margin: 30px auto 60px; padding: 0 clamp(18px, 3vw, 40px); }

.nf-ways { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.nf-ways-cap { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(21,24,28,.42); }
.nf-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.nf-chip {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px;
  background: #fff; border: 1px solid rgba(21,24,28,.1); border-radius: 999px;
  font-size: 13.5px; font-weight: 700; color: #15181c;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.nf-chip span { font-size: 11.5px; font-weight: 700; color: rgba(21,24,28,.4); }
.nf-chip:hover { border-color: rgba(45,63,136,.45); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(21,24,28,.07); color: #15181c; }
.nf-chip.is-plain { background: #f2f3f4; border-color: transparent; }

.nf-guess { margin-top: 30px; }
.nf-guess h2 { font-size: clamp(19px, 2vw, 23px); font-weight: 800; letter-spacing: -.025em; margin: 0 0 16px; }

.nf-help {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  margin-top: 30px; padding: clamp(20px, 2.4vw, 28px);
  background: #fff; border: 1px solid rgba(21,24,28,.09); border-radius: 14px;
}
.nf-help b { display: block; font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
.nf-help span { display: block; font-size: 13.5px; line-height: 1.55; color: rgba(21,24,28,.55); margin-top: 4px; max-width: 520px; }
.nf-help-acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nf-call { display: inline-flex; align-items: center; height: 46px; padding: 0 24px; background: #2d3f88; color: #fff; border-radius: 10px; font-size: 15px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.nf-call:hover { background: #15181c; color: #fff; }
.nf-back { display: inline-flex; align-items: center; height: 46px; padding: 0 22px; background: #f2f3f4; border-radius: 10px; font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.nf-back:hover { background: #15181c; color: #fff; }

@media (max-width: 640px) {
  .nf-help-acts { width: 100%; }
  .nf-call, .nf-back { flex: 1; justify-content: center; }
}

/* ---------- blocks of a built page ----------
   Every block is a full-width band with the same inner width as the rest of the site, so a page
   put together out of them lines up with the pages that were written by hand. */
.blk { padding: clamp(34px, 4vw, 56px) 0; }
.blk + .blk { padding-top: 0; }
/* a built block right under the section of its page keeps the rhythm of two blocks, not the gap of
   the section and its own padding at once: brands, contacts, an editorial page */
.brands-grid + .blk, .cn + .blk, .cat-text + .blk { padding-top: 0; }
.blk-inner { max-width: 1440px; margin: 0 auto; padding: 0 clamp(18px, 3vw, 40px); }
.blk-inner.is-narrow { max-width: 860px; }

/* A catalogue page keeps a column of filters beside the grid, so its four cards fill the row. A
   block has the whole width, and the same grid opened as many tracks as would fit and left the
   empty ones as a hole on the right. Here the row is four, always: a fixed number of columns
   makes the cards grow into the width, and a block holding two of them shows two normal cards
   rather than two enormous ones. */
.blk-products #prod-grid.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1100px) { .blk-products #prod-grid.g4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 880px) { .blk-products #prod-grid.g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .blk-products #prod-grid.g4 { grid-template-columns: minmax(0, 1fr); } }

/* The offers of the shop. Most of them open a pdf, so the card says which it is before it is
   clicked - a link that turns out to be a download is a small betrayal. */
.blk-offer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 16px; margin-top: 26px; }
.blk-offer { display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(21,24,28,.1); border-radius: 14px; overflow: hidden; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.blk-offer:hover { border-color: rgba(21,24,28,.2); transform: translateY(-2px); box-shadow: 0 18px 36px -22px rgba(21,24,28,.32); }
.blk-offer-pic { position: relative; display: block; aspect-ratio: 4 / 3; background: #f7f8f9; }
.blk-offer-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.blk-offer-tag { position: absolute; left: 14px; top: 14px; padding: 6px 12px; border-radius: 999px; background: rgba(21,24,28,.72); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.blk-offer-body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 20px 22px 24px; }
.blk-offer-name { font-size: 18px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; color: #15181c; }
.blk-offer-text { font-size: 14px; line-height: 1.55; color: rgba(21,24,28,.58); }
.blk-offer-go { margin-top: auto; padding-top: 12px; font-size: 13.5px; font-weight: 700; color: #2d3f88; }

/* Several offers side by side: each says what it includes, and the one the client recommends is
   lifted out of the row rather than dressed differently - the difference has to be legible in a
   glance, not read. */
.blk-plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 16px; align-items: stretch; margin-top: 26px; }
.blk-plan { display: flex; flex-direction: column; padding: 30px 28px 32px; background: #fff; border: 1px solid rgba(21,24,28,.1); border-radius: 14px; }
.blk-plan.is-featured { background: #2d3f88; border-color: #2d3f88; color: #fff; box-shadow: 0 22px 44px -22px rgba(45,63,136,.5); }
.blk-plan-note { align-self: flex-start; margin-bottom: 14px; padding: 5px 12px; border-radius: 999px; background: #c33d21; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.blk-plan-name { font-size: 25px; font-weight: 700; letter-spacing: -.025em; line-height: 1.16; }
.blk-plan-list { list-style: none; margin: 20px 0 26px; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.blk-plan-list li { position: relative; padding-left: 26px; font-size: 14.5px; line-height: 1.5; color: rgba(21,24,28,.66); }
.blk-plan-list li::before { content: ''; position: absolute; left: 0; top: 6px; width: 15px; height: 9px; border-left: 2px solid #1f9254; border-bottom: 2px solid #1f9254; transform: rotate(-45deg); }
.blk-plan.is-featured .blk-plan-list li { color: rgba(255,255,255,.78); }
.blk-plan.is-featured .blk-plan-list li::before { border-color: #7fd6a3; }
.blk-plan-btn { display: inline-flex; align-items: center; justify-content: center; height: 48px; margin-top: auto; padding: 0 22px; border-radius: 10px; background: #c33d21; color: #fff; font-size: 14px; font-weight: 700; }
.blk-plan-btn:hover { background: #a93419; color: #fff; }

/* A group of the catalogue, laid out as the approved design has it: a grid of tiles where a wide
   one takes the whole row and a card without a picture leads somewhere else. */
/* The general rule takes the top padding off a block that follows another, so that two bands do
   not add up to a gap. A group of the catalogue keeps its air: the design spaces them apart. */
.blk-group,
.blk + .blk-group { padding: clamp(48px, 5vw, 84px) 0 0; }
.blk + .blk-services { padding-top: clamp(48px, 5vw, 84px); }
.blk-services { margin-top: clamp(48px, 5vw, 88px); padding-bottom: clamp(48px, 5vw, 84px); }
.grp-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.grp-title { font-size: clamp(28px, 3.3vw, 44px); font-weight: 700; line-height: 1.06; letter-spacing: -.03em; margin: 14px 0 0; }
.grp-lead { font-size: 15.5px; line-height: 1.6; color: rgba(21,24,28,.6); max-width: 420px; margin: 0; }

.grp-row { display: grid; gap: 14px; margin-top: 14px; }
.grp-row:first-of-type { margin-top: 34px; }
.grp-row:not(.is-wide) { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }

.grp-tile { display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(21,24,28,.1); border-radius: 12px; overflow: hidden; transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.grp-pic { display: flex; align-items: center; justify-content: center; height: 230px; background: #f7f8f9; padding: 20px; }
.grp-pic img { max-height: 100%; max-width: 78%; width: auto; display: block; mix-blend-mode: multiply; }
.grp-pic svg { width: 96px; height: 96px; }
.grp-body { display: flex; flex-direction: column; flex: 1; padding: 26px; }
.grp-count { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #c33d21; }
.grp-name { font-size: 23px; font-weight: 700; letter-spacing: -.025em; margin-top: 8px; line-height: 1.16; }
.grp-text { font-size: 14px; line-height: 1.55; color: rgba(21,24,28,.58); margin-top: 10px; }
.grp-go { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; margin-top: auto; padding-top: 18px; }
.grp-go span { opacity: .5; }

/* the tile that takes the whole row: a picture on one side, the words on the other */
.grp-wide { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); background: #fff; border: 1px solid rgba(21,24,28,.1); border-radius: 12px; overflow: hidden; transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.grp-wide:hover { border-color: rgba(21,24,28,.16); box-shadow: 0 2px 6px -3px rgba(21,24,28,.10), 0 22px 44px -20px rgba(21,24,28,.24); transform: translateY(-3px); }
.grp-wide-pic { display: flex; align-items: center; justify-content: center; background: #f7f8f9; padding: 34px; min-height: 288px; }
.grp-wide-pic img { max-height: 220px; max-width: 94%; width: auto; display: block; mix-blend-mode: multiply; }
.grp-wide-body { display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 3vw, 46px); }
.grp-wide-name { font-size: clamp(24px, 2.1vw, 30px); font-weight: 700; letter-spacing: -.03em; margin-top: 10px; line-height: 1.14; }
.grp-wide-text { font-size: 14.5px; line-height: 1.62; color: rgba(21,24,28,.58); margin-top: 14px; max-width: 560px; }
.grp-wide.is-right .grp-wide-pic { order: 2; }

/* a card with no picture: an article, a brand, an offer */
.grp-note { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 30px; border-radius: 12px; background: #f7f8f9; overflow: hidden; transition: background .25s ease; }
.grp-note:hover { background: #eceef0; }
.grp-note-tag { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(21,24,28,.42); }
.grp-note-name { display: block; font-size: 25px; font-weight: 700; letter-spacing: -.025em; line-height: 1.16; }
.grp-note-text { display: block; font-size: 14px; line-height: 1.55; color: rgba(21,24,28,.58); }

.grp-note.is-navy { background: #2d3f88; color: #fff; }
.grp-note.is-navy:hover { background: #c33d21; color: #fff; }
.grp-note.is-navy .grp-note-tag { color: rgba(255,255,255,.5); }
.grp-note.is-navy .grp-note-text { color: rgba(255,255,255,.6); }

.grp-note.is-tall { gap: 0; padding: clamp(30px, 2.5vw, 40px); min-height: 320px; }
.grp-note.is-tall .grp-note-tag { color: #c33d21; }
.grp-note.is-tall .grp-note-name { font-size: clamp(24px, 1.9vw, 28px); letter-spacing: -.03em; line-height: 1.18; margin-top: 28px; }
.grp-note.is-tall .grp-note-text { font-size: 14.5px; line-height: 1.65; color: rgba(21,24,28,.55); margin-top: 18px; max-width: 340px; }
.grp-chips { display: block; position: relative; font-size: 13px; line-height: 1.75; color: rgba(21,24,28,.38); margin-top: 22px; }
.grp-note-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 32px; font-size: 13px; font-weight: 600; color: rgba(21,24,28,.42); }
.grp-note-foot .t-go { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: #15181c; }
.grp-note-foot .t-go span { opacity: .5; }
.grp-mark { position: absolute; right: 26px; bottom: 74px; width: 172px; height: 172px; pointer-events: none; color: rgba(21,24,28,.11); }
.grp-mark svg { width: 100%; height: 100%; display: block; }

/* the words of a card have to sit above the mark behind them */
.grp-note > *:not(.grp-mark) { position: relative; }

@media (max-width: 880px) {
  .grp-wide-pic { min-height: 220px; padding: 22px; }
  .grp-wide.is-right .grp-wide-pic { order: 0; }
}

/* What the company does besides selling: the intro on the left, the list on the right, exactly
   as the approved design has it. */
.blk-services { background: #fff; border-top: 1px solid rgba(21,24,28,.09); border-bottom: 1px solid rgba(21,24,28,.09); }
.blk-serv-row { display: flex; flex-wrap: wrap; gap: clamp(40px, 5vw, 76px); }
.blk-serv-intro { flex: 0 1 360px; min-width: 286px; }
.blk-kicker { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #c33d21; }
.blk-serv-head { font-size: clamp(28px, 3.3vw, 44px); font-weight: 700; line-height: 1.06; letter-spacing: -.03em; margin: 14px 0 0; }
.blk-serv-lead { font-size: 15.5px; line-height: 1.65; color: rgba(21,24,28,.6); margin: 22px 0 0; max-width: 360px; }
.blk-serv-btn { display: inline-flex; align-items: center; gap: 12px; height: 54px; margin-top: 30px; padding: 0 26px; background: #2d3f88; color: #fff; border-radius: 8px; font-size: 14.5px; font-weight: 700; transition: background .25s ease; }
.blk-serv-btn:hover { background: #c33d21; color: #fff; }
.blk-serv-btn span { opacity: .6; }

.blk-serv-list { flex: 1 1 560px; min-width: 288px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(272px, 100%), 1fr)); gap: 0 44px; }
.blk-serv { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 18px; align-items: start; padding: 22px 0; border-top: 1px solid rgba(21,24,28,.09); color: #15181c; }
.blk-serv img { width: 42px; height: 42px; display: block; opacity: .85; }
.blk-serv-dot { width: 42px; height: 42px; border-radius: 999px; background: #f2f3f4; display: block; }
.blk-serv b { display: block; font-size: 16px; font-weight: 700; letter-spacing: -.015em; line-height: 1.3; }
.blk-serv b + span { display: block; font-size: 13.5px; line-height: 1.6; color: rgba(21,24,28,.55); margin-top: 6px; }

/* The band that closes a page: a heading across the top and the text under it in two columns. */
.blk-text.is-band { background: #f7f8f9; padding: clamp(46px, 5vw, 76px) 0; }
.blk-band-head { font-size: clamp(26px, 3vw, 38px); font-weight: 700; line-height: 1.08; letter-spacing: -.03em; margin: 0 0 6px; }
.blk-band-body { columns: 2; column-gap: clamp(28px, 3vw, 56px); font-size: 15px; color: rgba(21,24,28,.62); }
.blk-band-body p { break-inside: avoid; margin: 16px 0 0; }

@media (max-width: 820px) { .blk-band-body { columns: 1; } }

/* Cards that lead to the pages explaining something - what to look at when choosing a machine,
   how a system of mops is put together. The picture is the half a reader looks at first, so it
   carries the card and the words sit under it. */
.blk-art-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 440px)); gap: clamp(16px, 2vw, 24px); justify-content: start; }
.blk-art { display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(21,24,28,.09); border-radius: 14px; overflow: hidden; transition: border-color .16s ease, transform .16s ease; }
.blk-art:hover { border-color: rgba(21,24,28,.24); transform: translateY(-2px); }
/* The picture keeps its shape whatever the file is: a box of the right proportion with the
   image laid inside it. Left in the flow, a tall photo would stretch the box and the cards in a
   row would stop matching. */
.blk-art-pic { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #f2f3f4; }
.blk-art-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.blk-art-body { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 24px; }
.blk-art-tag { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #2d3f88; }
.blk-art-name { font-size: 19px; font-weight: 700; letter-spacing: -.02em; line-height: 1.3; color: #15181c; }
.blk-art-text { font-size: 14px; line-height: 1.6; color: rgba(21,24,28,.66); }

@media (max-width: 620px) { .blk-art-grid { grid-template-columns: minmax(0, 1fr); } }

/* Text stands in a card of its own, the way it did when it was the description of the page:
   a band of running text needs an edge, or it reads as a caption of whatever is under it. */
.blk-card { background: #fff; border: 1px solid rgba(21,24,28,.09); border-radius: 14px; padding: clamp(22px, 3vw, 40px); }
.blk-card.is-narrow { max-width: 860px; }

/* Two texts side by side: one band, one grid, so both cards keep the page grid. */
.blk-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: clamp(18px, 2vw, 26px); align-items: stretch; }

/* A narrow block sits among blocks that all start at the same left edge, so "narrow" here means
   a shorter line, not a column floating in the middle of the page: the box keeps the width of
   the page and the content inside it stops early. */
.blk-text .blk-inner.is-narrow,
.blk-faq .blk-inner.is-narrow { max-width: 1440px; }

.blk-text .blk-inner.is-narrow > * { max-width: 860px; }
.blk-head { font-size: clamp(22px, 2.6vw, 32px); font-weight: 800; letter-spacing: -.03em; margin: 0 0 10px; color: #15181c; }
.blk-lead { font-size: 15.5px; line-height: 1.6; color: rgba(21,24,28,.6); margin: 0 0 22px; max-width: 680px; }
.blk-head + .blk-lead { margin-top: -4px; }
.blk-tag { display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: 999px; background: rgba(195,61,33,.1); color: #a8331b; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.blk-btn { display: inline-flex; align-items: center; height: 50px; padding: 0 28px; background: #c33d21; color: #fff; border-radius: 12px; font-size: 14.5px; font-weight: 700; white-space: nowrap; }
.blk-btn:hover { background: #15181c; color: #fff; }

/* ---- the first screen ---- */
.blk-hero .blk-hero-inner { position: relative; max-width: 1440px; margin: 0 auto; padding: 0 clamp(18px, 3vw, 40px); }
.blk-slide { display: none; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: clamp(24px, 3vw, 48px); align-items: center; }
.blk-slide.is-on { display: grid; animation: blk-in .45s ease both; }
@keyframes blk-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.blk-slide-text h2 { font-size: clamp(30px, 4vw, 52px); font-weight: 800; line-height: 1.05; letter-spacing: -.035em; margin: 14px 0 0; }
.blk-slide-text p { font-size: 16px; line-height: 1.62; color: rgba(21,24,28,.62); margin: 16px 0 0; max-width: 560px; }
.blk-slide-text .blk-btn { margin-top: 26px; }
.blk-slide-shot { background: #f2f3f4; border-radius: 18px; overflow: hidden; aspect-ratio: 3 / 2; }
.blk-slide-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blk-dots { display: flex; gap: 8px; margin-top: 22px; }
.blk-dot { width: 26px; height: 4px; border: 0; border-radius: 999px; background: rgba(21,24,28,.16); cursor: pointer; padding: 0; transition: background .2s ease, width .2s ease; }
.blk-dot.is-on { background: #c33d21; width: 40px; }

/* ---- figures ---- */
/* Figures in one band, each in a cell of its own. The lines between them are the gaps of the
   grid showing the colour behind it: with a border on every cell the ones that wrap to a second
   row would double up, and a row of numbers with nothing between them reads as one long line. */
.blk-stat-band { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 1px; background: rgba(21,24,28,.1); border: 1px solid rgba(21,24,28,.1); border-radius: 14px; overflow: hidden; }
.blk-stat { background: #fff; padding: clamp(20px, 2.2vw, 28px) clamp(18px, 2vw, 26px); }
.blk-stat b { display: block; font-size: clamp(28px, 3vw, 40px); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.blk-stat span { display: block; margin-top: 10px; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(21,24,28,.45); }

/* ---- tiles of sections ---- */
.blk-cats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.blk-cat { display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(21,24,28,.09); border-radius: 14px; overflow: hidden; transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease; }
.blk-cat:hover { border-color: rgba(45,63,136,.4); transform: translateY(-3px); box-shadow: 0 14px 30px rgba(21,24,28,.08); }
.blk-cat-shot { display: block; aspect-ratio: 7 / 5; background: #f7f8f9; }
.blk-cat-shot img { width: 100%; height: 100%; object-fit: contain; display: block; mix-blend-mode: multiply; }
.blk-cat-name { display: block; padding: 16px 18px 0; font-size: 16px; font-weight: 700; letter-spacing: -.02em; color: #15181c; }
.blk-cat-total { display: block; padding: 4px 18px 18px; font-size: 12.5px; color: rgba(21,24,28,.45); }

/* ---- brands ---- */
.blk-brands-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.blk-brand { display: flex; align-items: center; justify-content: center; height: 96px; padding: 16px; background: #fff; border: 1px solid rgba(21,24,28,.09); border-radius: 12px; transition: border-color .2s ease, transform .2s ease; }
.blk-brand:hover { border-color: rgba(45,63,136,.4); transform: translateY(-2px); }
.blk-brand img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.blk-brand span { font-size: 15px; font-weight: 700; color: #15181c; }

/* ---- why buy here ---- */
.blk-feats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; align-items: stretch; }
.blk-feats-grid.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.blk-feats-grid.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.blk-feats-grid.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .blk-feats-grid.g4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 880px) { .blk-feats-grid.g3, .blk-feats-grid.g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .blk-feats-grid.g2, .blk-feats-grid.g3, .blk-feats-grid.g4 { grid-template-columns: minmax(0, 1fr); } }
.blk-feat { background: #fff; border: 1px solid rgba(21,24,28,.09); border-radius: 14px; padding: clamp(20px, 2.2vw, 26px); }
.blk-feat img { width: 40px; height: 40px; object-fit: contain; display: block; margin-bottom: 14px; }
.blk-feat b { display: block; font-size: 16px; font-weight: 700; letter-spacing: -.02em; color: #15181c; }
.blk-feat p { margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: rgba(21,24,28,.6); }

/* Sections under a row of buttons. The row sticks under the category bar and slides sideways when it
   does not fit; a section stops below both, so its title is never hidden when a button scrolls to it. */
/* the height of the sticky category bar, bottom border included */
.blk-secs { --secs-top: 75px; }
.blk-secs-nav { position: sticky; top: var(--secs-top); z-index: 30; margin: 0 calc(-1 * clamp(18px, 3vw, 40px)) 16px; padding: 10px clamp(18px, 3vw, 40px); background: rgba(242,243,244,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
/* on a wide screen a row that does not fit wraps, so no button is ever cut at the edge */
.blk-secs-track { position: relative; display: flex; flex-wrap: wrap; gap: 8px; }
.blk-secs-track::-webkit-scrollbar { display: none; }
.blk-secs-pill { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 18px 0 14px; background: #fff; border: 1px solid rgba(21,24,28,.1); border-radius: 999px; font-size: 13.5px; font-weight: 700; color: #15181c; white-space: nowrap; transition: background .2s ease, border-color .2s ease, color .2s ease; }
.blk-secs-pill img { width: 22px; height: 22px; object-fit: contain; display: block; transition: filter .2s ease; }
.blk-secs-pill:hover { border-color: rgba(21,24,28,.28); color: #15181c; }
.blk-secs-pill.is-current { background: #15181c; border-color: #15181c; color: #fff; }
.blk-secs-pill.is-current img { filter: brightness(0) invert(1); }
.blk-secs-list { display: flex; flex-direction: column; gap: 14px; }
.blk-sec { display: grid; grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); gap: clamp(18px, 3vw, 56px); align-items: start; background: #fff; border: 1px solid rgba(21,24,28,.09); border-radius: 14px; padding: clamp(22px, 3vw, 38px); scroll-margin-top: calc(var(--secs-top) + 84px); }
.blk-sec-side img { width: 48px; height: 48px; object-fit: contain; display: block; margin-bottom: 16px; }
.blk-sec-title { margin: 0; font-size: clamp(19px, 1.9vw, 24px); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: #15181c; }
.blk-sec-body { font-size: 15px; line-height: 1.7; color: rgba(21,24,28,.72); }
.blk-sec-body > :first-child { margin-top: 0; }
.blk-sec-body > :last-child { margin-bottom: 0; }
.blk-sec-body ul { padding-left: 20px; }
.blk-sec-body li + li { margin-top: 6px; }
/* below 880px the category bar is gone and the phone header sticks instead; the script measures the
   real height of whichever bar is on screen, these are only the values to start from */
@media (max-width: 880px) { .blk-secs { --secs-top: 66px; } }
@media (max-width: 760px) {
  /* on a phone two rows of buttons would eat the screen: one row that slides sideways instead */
  .blk-secs-track { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .blk-sec { grid-template-columns: minmax(0, 1fr); }
  .blk-sec-side { display: flex; align-items: center; gap: 14px; }
  .blk-sec-side img { width: 40px; height: 40px; margin: 0; }
}

/* ---- plain text ---- */
.blk-body { font-size: 16px; line-height: 1.7; color: rgba(21,24,28,.74); }
.blk-body p { margin: 0 0 14px; }
.blk-body h2 { font-size: 22px; line-height: 1.3; font-weight: 700; letter-spacing: -.02em; color: #15181c; margin: 32px 0 12px; }
.blk-body h3 { font-size: 17px; line-height: 1.4; font-weight: 700; color: #15181c; margin: 22px 0 8px; }
@media (max-width: 880px) { .blk-body h2 { font-size: 19px; } .blk-body h3 { font-size: 16px; } }
.blk-body h2:first-child { margin-top: 0; }
.blk-body h3 { font-size: 19px; font-weight: 700; letter-spacing: -.02em; color: #15181c; margin: 24px 0 10px; }
.blk-body h4 { font-size: 16px; font-weight: 700; color: #15181c; margin: 20px 0 8px; }
.blk-body blockquote { margin: 0 0 18px; padding: 0 0 0 18px; border-left: 3px solid rgba(45,63,136,.3); font-size: 17px; color: rgba(21,24,28,.82); }
.blk-body table { width: 100%; margin: 0 0 18px; border-collapse: collapse; }
.blk-body th, .blk-body td { padding: 10px 12px; border: 1px solid rgba(21,24,28,.1); text-align: left; }
.blk-body th { font-weight: 700; color: #15181c; background: #f7f8fa; }
.blk-body ul, .blk-body ol { margin: 0 0 14px; padding-left: 22px; }
.blk-body li { margin-bottom: 6px; }
/* A link in running text is told apart by its colour and weight; the rule under it was one mark
   too many. It appears on hover, where it says the word is about to be clicked. */
.blk-body a { color: #2d3f88; font-weight: 600; }
.blk-body a:hover { border-bottom: 1.5px solid rgba(45,63,136,.35); }
.blk-body img { max-width: 100%; height: auto; border-radius: 12px; }

/* ---- a selection of models ---- */
.blk-more { display: inline-flex; align-items: center; height: 48px; padding: 0 26px; margin-top: 20px; background: #fff; border: 1.5px solid rgba(21, 24, 28, .12); border-radius: 12px; font-size: 14px; font-weight: 700; }
.blk-more:hover { background: #15181c; border-color: #15181c; color: #fff; }

/* ---- call to action ---- */
.blk-cta-box { display: flex; align-items: center; justify-content: space-between; gap: clamp(18px, 3vw, 40px); flex-wrap: wrap; padding: clamp(26px, 3.4vw, 44px); background: #2d3f88; border-radius: 18px; color: #fff; }
.blk-cta-box h2 { font-size: clamp(22px, 2.6vw, 32px); font-weight: 800; letter-spacing: -.03em; margin: 12px 0 0; }
.blk-cta-box p { margin: 10px 0 0; font-size: 15.5px; line-height: 1.6; color: rgba(255,255,255,.75); max-width: 560px; }
.blk-cta-box .blk-tag { background: rgba(255,255,255,.16); color: #fff; }
.blk-cta-box.is-light { background: #f2f3f4; color: #15181c; }
.blk-cta-box.is-light p { color: rgba(21,24,28,.6); }
.blk-cta-box.is-light .blk-tag { background: rgba(195,61,33,.1); color: #a8331b; }

/* ---- questions ---- */
.blk-faq-list { display: flex; flex-direction: column; gap: 10px; }
.blk-q { background: #fff; border: 1px solid rgba(21,24,28,.09); border-radius: 14px; overflow: hidden; }
.blk-q summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; font-size: 16px; font-weight: 700; letter-spacing: -.015em; color: #15181c; cursor: pointer; list-style: none; }
.blk-q summary::-webkit-details-marker { display: none; }
.blk-q summary i { width: 12px; height: 12px; flex-shrink: 0; position: relative; }
.blk-q summary i::before, .blk-q summary i::after { content: ''; position: absolute; background: rgba(21,24,28,.4); transition: transform .25s ease; }
.blk-q summary i::before { left: 0; top: 5px; width: 12px; height: 2px; }
.blk-q summary i::after { left: 5px; top: 0; width: 2px; height: 12px; }
.blk-q[open] summary i::after { transform: rotate(90deg); }
.blk-q[open] summary { color: #2d3f88; }
.blk-a { padding: 0 22px 20px; font-size: 15px; line-height: 1.65; color: rgba(21,24,28,.66); }

/* ---- photographs ---- */
.blk-shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.blk-shot { margin: 0; }
/* The whole photograph, not the middle of it: these are machines and diagrams with labels, and
   cropping to a tidy rectangle cuts the very thing the picture is there for. The tile keeps its
   proportion, the image sits inside it. */
.blk-shot img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; border-radius: 12px; display: block; cursor: zoom-in; background: #f7f8f9; padding: 10px; }
.blk-shot figcaption { margin-top: 8px; font-size: 12.5px; line-height: 1.45; color: rgba(21,24,28,.5); }

/* ---- the drawer on a phone: the groups of the category bar, folded under their titles ---- */
.md-nav { display: flex; flex-direction: column; padding: 6px 0 18px; }
.md-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 16px 0; margin: 0; background: none; border: 0;
  border-bottom: 1px solid rgba(21,24,28,.07); border-radius: 0;
  font: inherit; font-size: 14px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: #15181c; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.md-head > span { display: inline-flex; align-items: center; gap: 10px; }
.md-head > span::before {
  content: ""; flex: 0 0 5px; width: 5px; height: 5px; border-radius: 1.5px;
  background: #d3d6d9; transition: background .22s ease;
}
.md-head small { font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: rgba(21,24,28,.4); white-space: nowrap; }
.md-head i { width: 12px; height: 12px; flex-shrink: 0; position: relative; }
.md-head i::before, .md-head i::after { content: ''; position: absolute; background: rgba(21,24,28,.4); transition: transform .25s ease; }
.md-head i::before { left: 0; top: 5px; width: 12px; height: 2px; }
.md-head i::after { left: 5px; top: 0; width: 2px; height: 12px; }
.md-group.open .md-head { color: #2d3f88; }
.md-group.open .md-head > span::before { background: #c33d21; }
.md-group.open .md-head i::after { transform: rotate(90deg); }

/* the rows unfold to their own height: a grid track from 0fr to 1fr animates where height: auto cannot */
.md-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s cubic-bezier(.22,.72,.2,1); }
.md-group.open .md-body { grid-template-rows: 1fr; }
.md-body > div { min-height: 0; overflow: hidden; display: flex; flex-direction: column; padding-left: 15px; }
.md-body a { padding: 12px 0; font-size: 15px; font-weight: 600; color: rgba(21,24,28,.66); border-bottom: 1px solid rgba(21,24,28,.05); }
.md-body a:last-child { border-bottom: 0; margin-bottom: 6px; }
.md-body .md-all { color: #2d3f88; font-weight: 700; }

.md-pills { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 18px; }
.md-pills a { display: flex; align-items: center; height: 38px; padding: 0 16px; background: #f2f3f4; border-radius: 999px; font-size: 13px; font-weight: 700; }

/* ---- the comparison: the lit button and the note that confirms it ---- */
.p-compare { transition: background .22s ease, border-color .22s ease, color .22s ease; }
.p-compare.is-active, .pr-actions .p-compare.is-active { background: #c33d21; border-color: #c33d21; color: #fff; }
.p-compare.is-active:hover, .pr-actions .p-compare.is-active:hover { background: #a8331b; border-color: #a8331b; color: #fff; }
.p-compare.is-pop { animation: pCompare .45s cubic-bezier(.3,.7,.2,1.3); }
@keyframes pCompare { 0% { transform: scale(1); } 35% { transform: scale(.84); } 100% { transform: scale(1); } }

#sd-toast {
  position: fixed; z-index: 95; right: 24px; bottom: 24px;
  display: flex; align-items: center; gap: 14px;
  width: max-content; max-width: min(440px, calc(100vw - 32px));
  padding: 12px 12px 12px 14px;
  background: rgba(21,24,28,.94); color: #fff;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.08); border-radius: 16px;
  box-shadow: 0 22px 48px -16px rgba(21,24,28,.6), 0 2px 8px rgba(21,24,28,.18);
  opacity: 0; transform: translateY(16px) scale(.98); pointer-events: none;
  transition: opacity .26s ease, transform .4s cubic-bezier(.22,.72,.2,1);
}
#sd-toast.is-shown { opacity: 1; transform: none; pointer-events: auto; }
#sd-toast .st-mark {
  width: 34px; height: 34px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  border-radius: 999px; background: #c33d21; color: #fff; font-size: 15px; font-weight: 800;
  box-shadow: 0 0 0 5px rgba(195,61,33,.18);
}
#sd-toast.is-off .st-mark { background: rgba(255,255,255,.14); box-shadow: none; }
#sd-toast.is-error .st-mark { background: #f0b429; color: #15181c; box-shadow: 0 0 0 5px rgba(240,180,41,.16); }
#sd-toast .st-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#sd-toast .st-text b { font-size: 14px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }
#sd-toast .st-text small { font-size: 12.5px; line-height: 1.35; color: rgba(255,255,255,.58); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
#sd-toast .st-go {
  flex-shrink: 0; display: flex; align-items: center; height: 38px; padding: 0 15px; margin-left: 4px;
  background: #fff; color: #15181c; border-radius: 10px; font-size: 13px; font-weight: 700; white-space: nowrap;
  transition: background .2s ease, color .2s ease;
}
#sd-toast .st-go:hover { background: #c33d21; color: #fff; }
@media (max-width: 880px) {
  /* above the bottom bar of the phone and clear of the home indicator */
  #sd-toast { left: 12px; right: 12px; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); width: auto; max-width: none; }
  #sd-toast .st-text { flex: 1; }
  #sd-toast .st-text small { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  #sd-toast { transform: none; transition: opacity .2s ease; }
  .p-compare.is-pop { animation: none; }
}

/* the chips of the chosen filters belong to the phone: on a wide screen the filter is always in sight */
@media (min-width: 881px) { .cat-chips { display: none; } }

/* ---- the request for a price: a card in the middle, a sheet from the bottom edge on a phone ---- */
/* only the root is locked: a body with overflow hidden becomes a scroll box of its own, and the sticky
   gallery of a product jumped to its place in that unscrolled box as the dialog opened */
html.rq-lock { overflow: hidden; }
.rq {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(21,24,28,.46); opacity: 0; transition: opacity .3s ease;
}
.rq[hidden] { display: none; }
.rq.is-in { opacity: 1; }
.rq-box {
  position: relative; width: min(440px, 100%); max-height: calc(100vh - 40px); overflow-y: auto;
  padding: 26px; background: #fff; border-radius: 20px;
  box-shadow: 0 30px 70px -20px rgba(21,24,28,.45);
  transform: translateY(16px) scale(.98); transition: transform .4s cubic-bezier(.22,.72,.2,1);
}
.rq.is-in .rq-box { transform: none; }
.rq .mc-grip { display: none; }
.rq-close { position: absolute; top: 18px; right: 18px; margin: 0; }
.rq-head { display: flex; align-items: center; gap: 14px; padding-right: 40px; }
.rq-pic { width: 64px; height: 64px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 6px; background: #f4f5f6; border-radius: 12px; }
.rq-pic[hidden] { display: none; }
.rq-pic img { max-width: 100%; max-height: 100%; mix-blend-mode: multiply; }
.rq-intro { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rq-intro b { font-size: 21px; font-weight: 800; letter-spacing: -.025em; line-height: 1.15; }
.rq-product { font-size: 13.5px; line-height: 1.35; color: rgba(21,24,28,.6); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rq-lead { margin: 16px 0 18px; font-size: 14px; line-height: 1.55; color: rgba(21,24,28,.62); }
.rq-form[hidden], .rq-done[hidden] { display: none; }
.rq-form .co-field + .co-field { margin-top: 12px; }
.rq-form label { font-size: 12.5px; font-weight: 700; color: rgba(21,24,28,.72); }
/* 16px or more: below that a phone zooms the page in as soon as the field gets the cursor */
.rq-form .co-field input { font-size: 16px; }
.rq-err { font-size: 12px; font-weight: 600; color: #c33d21; }
.rq-err:empty { display: none; }
.rq-err-form { display: block; margin-top: 12px; text-align: center; }
.rq-submit { width: 100%; margin-top: 18px; }
.rq-submit.is-busy { opacity: .65; pointer-events: none; }
.rq .co-note { margin: 10px 0 0; }
.rq-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rq-done { padding: 10px 0 0; text-align: center; }
.rq-done-mark {
  width: 62px; height: 62px; margin: 8px auto 18px; display: flex; align-items: center; justify-content: center;
  border-radius: 999px; background: #c33d21; color: #fff; font-size: 26px; font-weight: 800;
  box-shadow: 0 0 0 9px rgba(195,61,33,.13);
}
.rq-done b { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.025em; }
.rq-done p { max-width: 320px; margin: 8px auto 22px; font-size: 14.5px; line-height: 1.55; color: rgba(21,24,28,.62); }
.rq-done .co-back { width: 100%; border: 0; font: inherit; font-size: 14px; font-weight: 700; color: #15181c; cursor: pointer; }
@media (max-width: 880px) {
  .rq { align-items: flex-end; padding: 0; }
  .rq-box {
    width: 100%; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px);
    padding: 6px 18px calc(20px + env(safe-area-inset-bottom, 0px)); border-radius: 20px 20px 0 0;
    transform: translateY(101%); transition: transform .36s cubic-bezier(.22,.72,.2,1);
  }
  .rq .mc-grip { display: block; }
  .rq-close { top: 20px; right: 16px; }
  .rq-head { margin-top: 10px; }
}
@media (prefers-reduced-motion: reduce) { .rq-box { transition: none; } }

/* the three promises under the buttons: on a narrow screen they wrapped into one grey run of words,
   so there they become a short list, each line with its own mark */
@media (max-width: 880px) {
  .pr-trust { flex-direction: column; gap: 10px; margin-top: 20px; font-size: 13.5px; color: rgba(21,24,28,.7); }
  .pr-trust span { display: flex; align-items: center; gap: 10px; }
  .pr-trust span::before {
    content: ""; width: 18px; height: 18px; flex-shrink: 0; border-radius: 999px;
    background: rgba(195,61,33,.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5.2 9.3l2.4 2.4 5-5.2' fill='none' stroke='%23c33d21' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
  }
}

/* A phone zooms the page in when a field that gets the cursor has type smaller than 16px, and does
   not zoom back out. Every field of the site is kept at 16px on a narrow screen for that reason. */
@media (max-width: 880px) {
  input[type="text"], input[type="tel"], input[type="email"], input[type="search"], input[type="number"],
  input[type="password"], input:not([type]), textarea, select { font-size: 16px !important; }
}

/* ---- the sticker over the picture: an icon with its name, only the icon on a phone ---- */
.p-badge { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 9px; }
.p-badge svg { width: 15px; height: 15px; flex-shrink: 0; }
@media (max-width: 880px) {
  .p-badge, #prod-grid.g3 .p-badge {
    width: 34px; height: 34px; max-width: none; padding: 0; justify-content: center; gap: 0;
    border-radius: 999px; box-shadow: 0 4px 12px -4px rgba(21,24,28,.45);
  }
  .p-badge svg { width: 18px; height: 18px; }
  .p-badge > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* figures of one width wherever a number counts to a new value (window.sdCount in sd.js): with
   proportional figures a running total shakes sideways on every frame */
.mc-count, .mc-total, .mc-total-row > span:last-child, .co-sum-count, .co-sum-total, .co-sum-row > span:last-child,
[data-cart-total], [data-compare-total], [data-stat] { font-variant-numeric: tabular-nums; }

/* ---- pictures that page a frame at a time: the browser scrolls the row, a frame snaps into place ---- */
.pr-stage:has(.pr-track) { padding-left: 0; padding-right: 0; }
.pr-track { flex: 1 1 auto; align-self: stretch; min-width: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
.pr-track::-webkit-scrollbar { display: none; }
.pr-slide { flex: 0 0 100%; display: flex; align-items: center; justify-content: center; padding: 0 20px; scroll-snap-align: center; scroll-snap-stop: always; }
/* The white of a product photo melts into the grey by multiply, which blends with what lies right
   behind the picture. Inside a scrolling row that is the row, not the stage, so each frame carries
   the grey itself. */
.pr-slide { background: #f7f8f9; }
.pr-stage:has(.pr-track) { overflow: hidden; }
/* a photograph with surroundings of its own spans the whole block and keeps its colours */
/* two pixels of grey at the sides: the row is a fraction of a pixel wide, and a snapped frame let the
   edge of the next photograph show as a thin line */
.pr-slide.is-photo { padding: 0 2px; }
.pr-slide.is-photo img { width: 100%; height: auto; max-height: none; mix-blend-mode: normal; }

.lb-track { display: flex; width: 100%; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior: contain; scrollbar-width: none; }
.lb-track::-webkit-scrollbar { display: none; }
.lb-slide { flex: 0 0 100%; display: flex; align-items: center; justify-content: center; scroll-snap-align: center; scroll-snap-stop: always; }
.lb-slide img { max-width: 100%; max-height: calc(100vh - clamp(96px, 14vw, 170px)); width: auto; height: auto; display: block; background: #fff; border-radius: 12px; }
.lb.at-first .lb-prev, .lb.at-last .lb-next { opacity: .3; pointer-events: none; }
@media (max-width: 880px) { .lb-slide img { max-height: calc(100vh - 160px); } }
.pr-stage img, .lb img { -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; }

/* two narrow columns on a phone: the label keeps its own size (the price rule there is 17px) and
   stands closer to the specification */
@media (max-width: 880px) {
  #prod-grid.g3 .p-price.on-request { font-size: 12px; }
  #prod-grid.g3 .p-foot { padding-top: 10px; }
  #prod-grid.g3 .p-foot .p-actions { padding-top: 10px; }
}

/* ---- the search that comes down over the catalogue on a phone ---- */
.cat-sticky { display: none; }
@media (max-width: 880px) {
  /* under the header of the phone (z-index 45): it slides out from beneath its lower edge */
  .cat-sticky {
    display: block; position: fixed; top: 0; left: 0; right: 0; z-index: 44;
    padding: 8px 12px 10px;
    background: rgba(255,255,255,.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(21,24,28,.08); box-shadow: 0 10px 26px -18px rgba(21,24,28,.4);
    transform: translateY(-110%); visibility: hidden;
    transition: transform .34s cubic-bezier(.22,.72,.2,1), visibility .34s;
  }
  .cat-sticky.is-in { transform: none; visibility: visible; }
  .cat-sticky-form {
    position: relative; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 16px;
    background: #f2f3f4; border: 1px solid transparent; border-radius: 999px;
    transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
  }
  .cat-sticky-form:focus-within { background: #fff; border-color: rgba(45,63,136,.35); box-shadow: 0 0 0 3px rgba(45,63,136,.1); }
  .cat-sticky-form svg { width: 19px; height: 19px; flex-shrink: 0; color: rgba(21,24,28,.45); }
  .cat-sticky-form input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; outline: none; font: inherit; font-weight: 500; color: #15181c; }
  .cat-sticky-form input::placeholder { color: rgba(21,24,28,.45); }
  .cat-sticky .search-drop { top: calc(100% + 8px); max-height: calc(100vh - 96px); max-height: calc(100dvh - 96px); overflow-y: auto; }
  .cat-sticky-form:focus-within .search-drop { opacity: 1; visibility: visible; transform: none; }
}

/* ---- product page on a wide screen: the gallery as tall as the offer next to it ----
   The grey block grows to the height of the right column, so its bottom meets the price, but never
   past the screen; when the column is taller than that, the gallery stays in view under the menu
   while the column is read. A short column keeps the usual height. */
@media (min-width: 981px) {
  .pr-top { align-items: stretch; }
  .pr-top > #gallery {
    position: sticky; top: 96px; align-self: start;
    height: min(100%, calc(100vh - 116px)); min-height: clamp(340px, 40vw, 540px);
    grid-template-rows: minmax(0, 1fr); align-items: stretch;
  }
  #gallery .pr-thumbs { align-self: start; max-height: 100%; overflow-y: auto; scrollbar-width: none; }
  #gallery .pr-thumbs::-webkit-scrollbar { display: none; }
  #gallery .pr-stage { height: 100%; min-height: 0; }
  /* a product on white grows with the block; a photograph keeps spanning the width */
  #gallery .pr-slide:not(.is-photo) img { width: 100%; height: 100%; max-height: none; }
}

/* A dialog or a viewer stops the page from scrolling, and a scrollbar that disappears gives its width
   back to the page: everything jumped sideways as a window opened. The place of the scrollbar is kept
   whether it is shown or not. A phone draws its scrollbar over the page, so there is nothing to keep. */
@media (min-width: 881px) {
  html { scrollbar-gutter: stable; }
}