/* Optom navigation v1: mobile bottom bar and restrained header chrome. */
:root { --optom-nav-height: 56px; }

.optom-cart-target { position:relative;overflow:visible!important; }
.optom-cart-status { position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0; }
.optom-cart-badge { position:absolute;z-index:2;top:3px;right:2px;display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:18px;height:18px;padding:0 2px;border:2px solid #fff;border-radius:999px;background:#2563eb;color:#fff;font:650 9.5px/14px Manrope,Arial,sans-serif;white-space:nowrap;pointer-events:none; }
.optom-cart-badge .optom-cart-badge-plus { margin-left:1px;font-size:7px;line-height:1;transform:translateY(-1px); }
.optom-mobile-nav .optom-cart-badge { top:0;right:auto;left:calc(50% + 2px);font-size:10px;line-height:14px; }

.optom-mobile-nav { display: none; }
.ops-page header .logo-word { height: 20px !important; font-size: 19px !important; line-height: 20px !important; }

/* The longer price-list label must fit narrow screens without widening them. */
@media (max-width: 359px) {
  .ops-page > footer .flex.items-center.gap-5.whitespace-nowrap {
    display:grid;grid-template-columns:repeat(2,max-content);justify-content:center;
    gap:10px 24px;max-width:100%;white-space:normal;
  }
}

@media (max-width: 767px) {
  /* Approved compact shell: preserve icon size and touch areas. */
  .ops-page > header { height: 52px !important; border-bottom-color: transparent !important; box-shadow: 0 2px 12px rgb(20 40 70 / 5%); }
  .ops-page > header a:has(.logo-word) { min-height: 44px; display: flex; align-items: center; }
  html:has(#site-root) { scroll-padding-top: 68px; }
  .ops-page { padding-bottom: calc(var(--optom-nav-height) + env(safe-area-inset-bottom)); }
  .ops-page header .optom-nav-header-icon,
  .ops-page header [aria-label="Поиск"],
  .ops-page header [aria-label="Корзина"],
  .ops-page header [aria-label="Меню"] {
    width: 44px !important;
    height: 44px !important;
    padding: 10px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #16283d !important;
  }
  .ops-page header .optom-nav-header-icon svg,
  .ops-page header [aria-label="Поиск"] svg,
  .ops-page header [aria-label="Корзина"] svg,
  .ops-page header [aria-label="Меню"] svg { width: 20px !important; height: 20px !important; stroke-width: 1.65 !important; }
  .ops-page header .logo-word { height: 20px !important; font-size: 19px !important; line-height: 20px !important; }
  .ops-page header [aria-label="Войти"],
  .ops-page header [aria-label="Кабинет"] { display: none !important; }

  .optom-mobile-nav {
    position: fixed;
    z-index: 90;
    inset: auto 0 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    min-height: var(--optom-nav-height);
    padding: 3px 4px max(3px, env(safe-area-inset-bottom));
    border-top: 1px solid transparent;
    background: #fff;
    box-shadow: 0 -3px 14px rgb(20 40 70 / 6%);
    font-family: Manrope, Arial, sans-serif;
  }
  .optom-mobile-nav a {
    position: relative;
    display: flex;
    min-width: 44px;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 3px;
    isolation: isolate;
    color: #64738a;
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1.1;
    text-decoration: none;
  }
  .optom-mobile-nav a:focus-visible { outline: 2px solid #1768bd; outline-offset: -2px; border-radius: 10px; }
  .optom-mobile-nav svg { width: 20px; height: 20px; flex: none; }
  .optom-mobile-nav a[aria-current="page"] { color: #1165bc; font-weight: 650; }
  .optom-mobile-nav a[data-nav-order][aria-current="page"] { color: #1165bc; }
  .optom-mobile-nav a[aria-current="page"]::before {
    position: absolute;
    z-index: -1;
    inset: 4px 12px 20px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgb(55 143 247 / 23%), rgb(55 143 247 / 0) 72%);
    content: "";
  }
  .optom-mobile-nav a[data-nav-order] { color: #23415c; font-weight: 600; }
  .optom-mobile-nav a[data-nav-order] svg { color: #135ea8; }
  body:has(.ops-overlay, .v8-sheet, [data-v8-sheet]) .optom-mobile-nav { visibility: hidden; pointer-events: none; }
  #site-toast { bottom: calc(var(--optom-nav-height) + env(safe-area-inset-bottom) + 12px) !important; z-index: 110 !important; }
}

@media (min-width: 768px) {
  .ops-page header nav a.optom-nav-active { position: relative; isolation: isolate; color: #1165bc !important; text-decoration: none !important; }
  .ops-page header nav a.optom-nav-active::before { position: absolute; z-index: -1; inset: 1px -10px; border-radius: 18px; background: radial-gradient(ellipse, rgb(55 143 247 / 17%), rgb(55 143 247 / 0) 72%); content: ""; pointer-events: none; }
  .ops-page header [aria-label="Поиск"],
  .ops-page header [aria-label="Корзина"],
  .ops-page header [aria-label="Меню"] { width: 44px !important; height: 44px !important; padding: 10px !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
  .ops-page header [aria-label="Поиск"] svg,
  .ops-page header [aria-label="Корзина"] svg,
  .ops-page header [aria-label="Меню"] svg { width: 20px !important; height: 20px !important; stroke-width: 1.65 !important; }
}