:root {
  --ok-purple: #6f42c1;
  --ok-purple-dark: #51249f;
  --ok-purple-deep: #260b66;
  --ok-purple-soft: #f2ebff;
  --ok-yellow: #ffbf00;
  --ok-green: #1fad5b;
  --ok-ink: #17131f;
  --ok-muted: #77717f;
  --ok-line: #ebe8ef;
  --ok-bg: #f7f6f9;
  --ok-white: #fff;
  --ok-shadow: 0 14px 40px rgba(45, 26, 79, .09);
  --ok-radius: 22px;
}

/* ===== OptoKAZ v30.1: guaranteed clickable desktop AI control ===== */
@media (min-width: 768px) {
  .ok-header--material .ok-header__search .ok-search-shell {
    position: relative !important;
    grid-template-columns: minmax(0, 1fr) 112px 52px !important;
  }
  .ok-header--material .ok-header__search .ok-search-shell > .ok-search {
    position: relative !important;
    z-index: 1 !important;
    grid-column: 1 !important;
  }
  .ok-header--material .ok-header__search .ok-ai-search-trigger {
    position: relative !important;
    z-index: 8 !important;
    right: auto !important;
    top: auto !important;
    grid-column: 2 !important;
    width: 112px !important;
    min-width: 112px !important;
    height: 52px !important;
    min-height: 52px !important;
    display: inline-flex !important;
    pointer-events: auto !important;
    touch-action: manipulation;
  }
  .ok-header--material .ok-header__search .ok-filter-trigger {
    position: relative !important;
    z-index: 7 !important;
    grid-column: 3 !important;
  }
  .ok-header--material .ok-header__search .ok-ai-search-results {
    z-index: 1700 !important;
    pointer-events: none;
  }
  .ok-header--material .ok-header__search .ok-ai-search-results.is-open {
    pointer-events: auto;
  }
}

/* ===== OptoKAZ v30: desktop AI search and catalogue consultant ===== */
@media (min-width: 768px) {
  .ok-header--material .ok-header__search .ok-search-shell {
    grid-template-columns: minmax(0, 1fr) 112px 52px !important;
  }
  .ok-ai-search-trigger {
    height: 52px;
    min-width: 112px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 0;
    border-radius: 19px;
    background: linear-gradient(135deg, #704be6, #875ff1);
    color: #fff;
    font: 850 13px/1 var(--ok-font, Arial, sans-serif);
    box-shadow: 0 9px 24px rgba(105, 69, 216, .2);
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
  }
  .ok-ai-search-trigger:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(105, 69, 216, .27); }
  .ok-ai-search-trigger:disabled { opacity: .68; cursor: wait; }
  .ok-ai-search-trigger svg { width: 18px; height: 18px; fill: currentColor; }
  .ok-ai-search-trigger.is-loading svg { animation: ok-ai-spin 1.1s linear infinite; }

  .ok-ai-search-results {
    position: absolute;
    z-index: 1600;
    top: calc(100% + 11px);
    right: 60px;
    left: 0;
    max-height: min(560px, calc(100vh - 150px));
    padding: 17px;
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-7px);
    border: 1px solid #dfd5ee;
    border-radius: 22px;
    background: rgba(255,255,255,.985);
    box-shadow: 0 25px 65px rgba(42,27,77,.18);
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  }
  .ok-ai-search-results.is-open { visibility: visible; opacity: 1; transform: translateY(0); }
  .ok-ai-search-results__head { margin-bottom: 13px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
  .ok-ai-search-results__head > div { display: grid; gap: 3px; }
  .ok-ai-search-results__head b { color: #241f31; font-size: 16px; }
  .ok-ai-kicker { color: #704be6; font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
  .ok-ai-close { width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 12px; background: #f1ecfb; color: #685d78; font: 500 24px/1 Arial, sans-serif; cursor: pointer; }
  .ok-ai-search-results__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ok-ai-product { min-width: 0; padding: 9px; display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 10px; align-items: center; border: 1px solid #ebe4f5; border-radius: 16px; background: #fcfbff; color: inherit; text-decoration: none !important; transition: border-color .16s ease, background .16s ease; }
  .ok-ai-product:hover { border-color: #cfc0ef; background: #f7f3ff; }
  .ok-ai-product__image { width: 62px; height: 62px; object-fit: contain; border-radius: 12px; background: #fff; }
  .ok-ai-product__body { min-width: 0; display: grid; gap: 3px; }
  .ok-ai-product__name { overflow: hidden; color: #292335; font-size: 12px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
  .ok-ai-product__meta { overflow: hidden; color: #898194; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
  .ok-ai-product__price { color: #6544dd; font-size: 13px; }
  .ok-ai-search-all { min-height: 40px; margin-top: 12px; display: flex; align-items: center; justify-content: center; border-radius: 13px; background: #f0eafe; color: #6544dd !important; font-size: 12px; font-weight: 850; text-decoration: none !important; }
  .ok-ai-search-status, .ok-ai-search-error, .ok-ai-search-empty { padding: 22px; color: #71697c; text-align: center; }
  .ok-ai-notice { margin: 10px 0 0; color: #8a8195; font-size: 11px; }

  .ok-ai-assistant { position: fixed; z-index: 5000; right: 24px; bottom: 24px; display: flex; align-items: flex-end; flex-direction: column; gap: 12px; font-family: var(--ok-font, Arial, sans-serif); }
  .ok-ai-assistant__toggle { min-width: 190px; min-height: 58px; padding: 8px 16px 8px 10px; display: flex; align-items: center; gap: 10px; border: 0; border-radius: 20px; background: linear-gradient(135deg, #6843db, #835cf0); color: #fff; box-shadow: 0 15px 38px rgba(75, 45, 153, .3); cursor: pointer; }
  .ok-ai-assistant__toggle > span:last-child { display: grid; gap: 3px; text-align: left; }
  .ok-ai-assistant__toggle b { font-size: 13px; }
  .ok-ai-assistant__toggle small { color: rgba(255,255,255,.78); font-size: 10px; }
  .ok-ai-assistant__spark { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 14px; background: rgba(255,255,255,.17); font-size: 21px; animation: ok-ai-pulse 2.2s ease-in-out infinite; }
  .ok-ai-assistant__panel { width: 370px; height: min(540px, calc(100vh - 120px)); display: none; grid-template-rows: auto minmax(0, 1fr) auto auto; overflow: hidden; border: 1px solid #ded4ec; border-radius: 25px; background: rgba(255,255,255,.99); box-shadow: 0 28px 80px rgba(37,24,66,.25); }
  .ok-ai-assistant.is-open .ok-ai-assistant__panel { display: grid; animation: ok-ai-rise .2s ease both; }
  .ok-ai-assistant.is-open .ok-ai-assistant__toggle { display: none; }
  .ok-ai-assistant__head { min-height: 68px; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #eee8f5; background: linear-gradient(135deg, #fbf9ff, #f4efff); }
  .ok-ai-assistant__head > div { display: flex; align-items: center; gap: 10px; }
  .ok-ai-assistant__head > div > span:last-child { display: grid; gap: 3px; }
  .ok-ai-assistant__head b { color: #252030; font-size: 14px; }
  .ok-ai-assistant__head small { color: #8b8296; font-size: 10px; }
  .ok-ai-assistant__avatar { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 14px; background: linear-gradient(135deg, #6e49df, #8b67ed); color: #fff; font-size: 12px; font-weight: 900; }
  .ok-ai-assistant__messages { padding: 15px; display: flex; flex-direction: column; gap: 11px; overflow-y: auto; background: #fdfcff; }
  .ok-ai-message { max-width: 88%; display: grid; gap: 7px; }
  .ok-ai-message--user { align-self: flex-end; }
  .ok-ai-message--assistant { align-self: flex-start; }
  .ok-ai-message__bubble { padding: 10px 12px; border-radius: 15px 15px 15px 5px; background: #f0ebfa; color: #3d3648; font-size: 12px; line-height: 1.45; white-space: pre-wrap; }
  .ok-ai-message--user .ok-ai-message__bubble { border-radius: 15px 15px 5px 15px; background: linear-gradient(135deg, #704be6, #835def); color: #fff; }
  .ok-ai-message--loading .ok-ai-message__bubble { color: #766d81; animation: ok-ai-fade 1.1s ease-in-out infinite; }
  .ok-ai-message__products { display: grid; gap: 6px; }
  .ok-ai-message__products .ok-ai-product { grid-template-columns: 48px minmax(0, 1fr); background: #fff; }
  .ok-ai-message__products .ok-ai-product__image { width: 48px; height: 48px; }
  .ok-ai-assistant__suggestions { padding: 0 12px 10px; display: flex; gap: 6px; overflow-x: auto; background: #fdfcff; }
  .ok-ai-assistant__suggestions button { min-width: max-content; padding: 7px 9px; border: 1px solid #ddd3ef; border-radius: 999px; background: #fff; color: #6544dd; font-size: 10px; font-weight: 750; cursor: pointer; }
  .ok-ai-assistant__form { padding: 11px; display: grid; grid-template-columns: minmax(0, 1fr) 42px; gap: 7px; border-top: 1px solid #eee8f5; background: #fff; }
  .ok-ai-assistant__form textarea { height: 42px; max-height: 96px; padding: 11px 13px; resize: none; border: 1px solid #ddd4ea; border-radius: 14px; outline: 0; color: #312a3d; font: 12px/1.45 var(--ok-font, Arial, sans-serif); }
  .ok-ai-assistant__form textarea:focus { border-color: #8b6bea; box-shadow: 0 0 0 3px rgba(112,75,230,.1); }
  .ok-ai-assistant__form button { width: 42px; height: 42px; border: 0; border-radius: 14px; background: linear-gradient(135deg, #704be6, #835def); color: #fff; font-size: 18px; cursor: pointer; }
  .ok-ai-assistant__form button:disabled { opacity: .55; cursor: wait; }
}

@media (max-width: 767px) {
  .ok-ai-search-trigger,
  .ok-ai-search-results,
  .ok-ai-assistant { display: none !important; }
}

@keyframes ok-ai-spin { to { transform: rotate(360deg); } }
@keyframes ok-ai-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes ok-ai-rise { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes ok-ai-fade { 0%,100% { opacity: .55; } 50% { opacity: 1; } }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.ok-body { margin: 0; min-height: 100vh; padding: 0; background: var(--ok-bg); color: var(--ok-ink); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.45; }
body.ok-body button, body.ok-body input, body.ok-body select { font: inherit; }
body.ok-body img { max-width: 100%; }
body.ok-body a { transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease; }
.ok-container { width: min(1440px, calc(100% - 48px)); margin-inline: auto; }

/* Header */
.ok-header { background: rgba(255,255,255,.97); box-shadow: 0 7px 25px rgba(31,16,55,.07); backdrop-filter: blur(14px); }
.ok-header.header-fixed { position: fixed; inset: 0 0 auto; z-index: 45; }
.ok-topbar { background: #fbfaff; border-bottom: 1px solid var(--ok-line); color: #625b6a; font-size: 12px; }
.ok-topbar__inner { min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.ok-topbar__links { display: flex; align-items: center; gap: 25px; }
.ok-topbar__item { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.ok-topbar__item:hover { color: var(--ok-purple); }
.ok-topbar__item svg { width: 15px; height: 15px; fill: currentColor; }
.ok-topbar__phone { color: var(--ok-ink); font-weight: 700; }
.ok-header__main { min-height: 94px; display: grid; grid-template-columns: 230px minmax(300px, 1fr) auto; align-items: center; gap: 34px; }
.ok-logo { display: inline-grid; grid-template-columns: 54px auto; grid-template-rows: auto auto; align-items: center; column-gap: 12px; width: max-content; color: var(--ok-ink); }
.ok-logo__mark { grid-row: 1 / 3; width: 54px; height: 54px; display: grid; place-items: center; color: white; border-radius: 18px; background: linear-gradient(145deg, #8251d5, #5d2eb3); box-shadow: 0 10px 24px rgba(111,66,193,.28); }
.ok-logo__mark svg { width: 29px; height: 29px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ok-logo__text { align-self: end; font-size: 29px; font-weight: 800; letter-spacing: -.7px; line-height: 1; }
.ok-logo__text b { color: var(--ok-purple); }
.ok-logo__tagline { align-self: start; margin-top: 5px; color: var(--ok-muted); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ok-header__search { min-width: 0; }
.ok-search { position: relative; width: 100%; height: 54px; display: flex; align-items: center; overflow: hidden; border: 1px solid #e5e0ec; border-radius: 18px; background: #faf9fc; transition: border-color .2s, box-shadow .2s, background .2s; }
.ok-search:focus-within { border-color: rgba(111,66,193,.55); background: #fff; box-shadow: 0 0 0 4px rgba(111,66,193,.09); }
.ok-search__icon { width: 54px; display: grid; place-items: center; color: #77717f; flex: 0 0 auto; }
.ok-search__icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.ok-search__input { height: 100%; min-width: 0; flex: 1; border: 0 !important; outline: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--ok-ink); font-size: 15px; }
.ok-search__input::placeholder { color: #aaa4b0; }
.ok-search__button { height: 42px; margin-right: 6px; padding: 0 25px; border: 0; border-radius: 13px; background: var(--ok-purple); color: #fff; font-weight: 750; cursor: pointer; }
.ok-search__button:hover { background: var(--ok-purple-dark); }
.ok-header__actions { display: flex; align-items: center; gap: 7px; }
.ok-action { position: relative; min-width: 76px; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 10px; border: 0; background: transparent; color: #5e5864; cursor: pointer; }
.ok-action:hover { color: var(--ok-purple); }
.ok-action__icon { position: relative; height: 27px; display: inline-grid; place-items: center; }
.ok-action__icon svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ok-action__text { font-size: 11px; font-weight: 650; }
.ok-badge { position: absolute; right: -10px; top: -7px; min-width: 19px; height: 19px; padding-inline: 4px; display: grid; place-items: center; border: 2px solid white; border-radius: 99px; background: var(--ok-purple); color: white; font-size: 9px; font-weight: 800; line-height: 1; }
.ok-icon-button { width: 42px; height: 42px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 13px; background: #f4f0fa; color: var(--ok-purple); cursor: pointer; }
.ok-icon-button svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.ok-menu-trigger { display: none; }
.ok-mobile-search { display: none; }

/* Navigation */
.ok-nav { min-height: 58px; display: flex; align-items: center; gap: 28px; border-top: 1px solid var(--ok-line); }
.ok-catalog-menu { position: relative; align-self: stretch; display: flex; align-items: center; }
.ok-catalog-metis, .ok-catalog-metis > li { position: relative; margin: 0; padding: 0; list-style: none; }
.ok-catalog-menu__button { height: 44px; min-width: 205px; display: flex; align-items: center; gap: 12px; padding: 0 22px; border: 0; border-radius: 14px; background: linear-gradient(135deg, #7745ca, #6130b6); color: white; font-weight: 750; cursor: pointer; box-shadow: 0 8px 22px rgba(111,66,193,.2); }
.ok-catalog-menu__button svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.ok-catalog-dropdown { position: absolute !important; top: calc(100% - 2px); left: 0; z-index: 25; width: 285px; max-height: 70vh; margin: 0; padding: 10px; overflow: visible; border: 1px solid var(--ok-line); border-radius: 0 0 18px 18px; background: white; box-shadow: var(--ok-shadow); }
.ok-catalog-dropdown:not(.mm-show) { display: none; }
.ok-catalog-dropdown__item { position: relative; }
.ok-catalog-dropdown__link { min-height: 42px; display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-radius: 11px; color: #403a46; }
.ok-catalog-dropdown__link:hover { background: var(--ok-purple-soft); color: var(--ok-purple-dark); }
.ok-catalog-dropdown__link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.ok-catalog-submenu { position: absolute; top: -10px; left: calc(100% + 10px); width: 580px; min-height: 200px; padding: 24px; visibility: hidden; opacity: 0; transform: translateX(-6px); border: 1px solid var(--ok-line); border-radius: 18px; background: white; box-shadow: var(--ok-shadow); transition: .18s ease; }
.ok-catalog-dropdown__item:hover .ok-catalog-submenu { visibility: visible; opacity: 1; transform: translateX(0); }
.ok-catalog-submenu__title { margin-bottom: 16px; font-size: 18px; font-weight: 800; }
.ok-catalog-submenu__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px 24px; }
.ok-catalog-submenu__grid a { color: #655e6b; }
.ok-catalog-submenu__grid a:hover { color: var(--ok-purple); }
.ok-nav__links { display: flex; align-items: center; gap: 29px; min-width: 0; overflow: hidden; }
.ok-nav__links a { white-space: nowrap; color: #3d3743; font-size: 13px; font-weight: 700; }
.ok-nav__links a:hover { color: var(--ok-purple); }
.ok-nav__promo { margin-left: auto; color: var(--ok-purple); font-size: 13px; font-weight: 800; white-space: nowrap; }
.ok-mobile-menu { width: min(88vw, 360px); height: 100%; display: flex; flex-direction: column; background: #fff; }
.ok-mobile-menu__head { min-height: 82px; display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--ok-line); }
.ok-mobile-menu__head .ok-logo { grid-template-columns: 42px auto; }
.ok-mobile-menu__head .ok-logo__mark { width: 42px; height: 42px; border-radius: 13px; }
.ok-mobile-menu__head .ok-logo__text { font-size: 23px; }
.ok-mobile-menu__body { padding: 16px 18px 30px; overflow-y: auto; }
.ok-mobile-menu__home, .ok-mobile-menu__category { display: block; padding: 13px 3px; border-bottom: 1px solid var(--ok-line); color: #312b36; font-size: 15px; font-weight: 750; }
.ok-mobile-menu__title { margin-top: 20px; color: #a29aa8; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.ok-mobile-menu__children { padding: 6px 8px 12px 15px; }
.ok-mobile-menu__children a { display: block; padding: 9px 0; color: #68616d; }

/* Homepage */
.ok-hero { padding-top: 24px; }
.ok-hero__slider { position: relative; overflow: hidden; border-radius: 28px; background: var(--ok-purple-deep); box-shadow: 0 18px 40px rgba(51,16,112,.16); }
.ok-hero__link { display: block; aspect-ratio: 2.72 / 1; min-height: 290px; }
.ok-hero__image { width: 100%; height: 100%; display: block; object-fit: cover; }
.ok-hero__arrow { position: absolute; z-index: 4; top: 50%; width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; background: rgba(255,255,255,.2); color: #fff; font-size: 32px; line-height: 1; transform: translateY(-50%); backdrop-filter: blur(8px); cursor: pointer; }
.ok-hero__arrow:hover { background: #fff; color: var(--ok-purple); }
.ok-hero__arrow--prev { left: 18px; }
.ok-hero__arrow--next { right: 18px; }
.ok-hero .swiper-pagination-bullet { background: white; opacity: .45; }
.ok-hero .swiper-pagination-bullet-active { width: 24px; border-radius: 8px; opacity: 1; }
.ok-benefits { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 17px; padding: 16px 8px; border: 1px solid var(--ok-line); border-radius: 19px; background: #fff; box-shadow: 0 8px 25px rgba(45,26,79,.04); }
.ok-benefit { min-height: 50px; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 4px 18px; border-right: 1px solid var(--ok-line); }
.ok-benefit:last-child { border-right: 0; }
.ok-benefit__icon { min-width: 40px; height: 40px; display: grid; place-items: center; padding: 0 7px; border-radius: 13px; background: var(--ok-purple-soft); color: var(--ok-purple); font-size: 11px; font-weight: 850; }
.ok-benefit__icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.ok-benefit div { display: grid; gap: 2px; }
.ok-benefit b { font-size: 12px; }
.ok-benefit small { color: var(--ok-muted); font-size: 10px; }
.ok-section { padding-top: 42px; }
.ok-section__head { margin-bottom: 20px; display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.ok-eyebrow { display: block; margin-bottom: 5px; color: var(--ok-purple); font-size: 10px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.ok-section__title { margin: 0; color: var(--ok-ink); font-size: clamp(24px, 2vw, 32px); font-weight: 850; letter-spacing: -.5px; }
.ok-section__link { color: var(--ok-purple); font-weight: 750; }
.ok-section__link span { font-size: 20px; vertical-align: -1px; }
.ok-slider-actions { display: flex; gap: 8px; }
.ok-slider-actions button { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--ok-line); border-radius: 13px; background: #fff; color: var(--ok-purple); font-size: 27px; line-height: 1; cursor: pointer; }
.ok-slider-actions button:hover { border-color: var(--ok-purple); background: var(--ok-purple); color: white; }
.ok-categories-slider, .ok-products-slider { overflow: hidden; padding: 2px 2px 18px; }
.ok-category-slide, .ok-product-slide { height: auto; }
.ok-category-card { position: relative; min-height: 155px; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 18px; overflow: hidden; border: 1px solid var(--ok-line); border-radius: 20px; background: #fff; box-shadow: 0 8px 22px rgba(45,26,79,.04); }
.ok-category-card:hover { border-color: rgba(111,66,193,.32); transform: translateY(-3px); box-shadow: 0 15px 30px rgba(70,37,118,.1); }
.ok-category-card__image { height: 88px; display: grid; place-items: center; }
.ok-category-card__image img { width: 100%; height: 100%; object-fit: contain; }
.ok-category-card__name { padding-right: 20px; color: #29232f; font-size: 13px; font-weight: 750; }
.ok-category-card__arrow { position: absolute; right: 15px; bottom: 14px; color: var(--ok-purple); font-size: 20px; }

/* Product cards */
.ok-product-card { position: relative; height: 100%; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--ok-line); border-radius: 22px; background: #fff; box-shadow: 0 8px 22px rgba(45,26,79,.045); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.ok-product-card:hover { border-color: rgba(111,66,193,.3); transform: translateY(-4px); box-shadow: 0 18px 38px rgba(55,28,98,.11); }
.ok-product-card__image { height: 250px; display: grid; place-items: center; padding: 22px; background: linear-gradient(180deg, #fff, #fdfcff); }
.ok-product-card__image img { width: 100%; height: 100%; object-fit: contain; transition: transform .25s ease; }
.ok-product-card:hover .ok-product-card__image img { transform: scale(1.035); }
.ok-product-card__body { flex: 1; display: flex; flex-direction: column; padding: 0 17px 17px; }
.ok-product-card__name { min-height: 45px; display: -webkit-box; overflow: hidden; color: #29232e; font-size: 14px; font-weight: 720; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.ok-product-card__name:hover { color: var(--ok-purple); }
.ok-product-card__meta { min-height: 22px; display: flex; align-items: center; gap: 6px; margin: 5px 0 8px; color: #8c8490; font-size: 10px; }
.ok-stock-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--ok-green); box-shadow: 0 0 0 3px rgba(31,173,91,.1); }
.ok-product-card__pack { margin-left: auto; white-space: nowrap; }
.ok-product-card__prices { margin-top: auto; padding-top: 6px; }
.ok-unit-price { color: var(--ok-purple); font-size: 20px; font-weight: 850; letter-spacing: -.3px; }
.ok-unit-price small { color: var(--ok-purple); font-size: 11px; font-weight: 700; }
.ok-pack-price { margin-top: 3px; color: #a099a4; font-size: 12px; }
.ok-pack-price small { margin-left: 4px; }
.ok-wishlist { position: absolute; z-index: 3; top: 13px; right: 13px; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.94); color: #8e8792; box-shadow: 0 6px 18px rgba(46,30,67,.1); cursor: pointer; }
.ok-wishlist svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.ok-wishlist svg.is-active, .ok-wishlist .fill-current { fill: #e85269; stroke: #e85269; }
.ok-sale-badge { position: absolute; z-index: 3; top: 15px; left: 15px; padding: 5px 9px; border-radius: 9px; background: #ee4e65; color: white; font-size: 11px; font-weight: 800; }
.ok-product-card__buy { display: grid; grid-template-columns: 1fr 1.05fr; gap: 8px; margin-top: 13px; }
.ok-quantity-control { height: 42px; display: grid; grid-template-columns: 35px minmax(34px, 1fr) 35px; overflow: hidden; border: 1px solid #e4deea; border-radius: 13px; background: #faf8fc; }
.ok-quantity-control button { display: grid; place-items: center; border: 0; background: transparent; color: var(--ok-purple); font-size: 20px; font-weight: 800; cursor: pointer; }
.ok-quantity-control button:hover { background: var(--ok-purple-soft); }
.ok-quantity-control input { min-width: 0; width: 100%; padding: 0; border: 0 !important; border-inline: 1px solid #ece7f0 !important; background: #fff !important; box-shadow: none !important; text-align: center; font-weight: 750; -moz-appearance: textfield; }
.ok-quantity-control input::-webkit-outer-spin-button, .ok-quantity-control input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
.ok-buy-button { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; padding: 0 18px; border: 0; border-radius: 13px; background: linear-gradient(135deg, #7543c8, #6030b3); color: #fff !important; font-weight: 800; text-align: center; cursor: pointer; box-shadow: 0 7px 18px rgba(111,66,193,.18); }
.ok-buy-button:hover { background: linear-gradient(135deg, #6332b9, #4e1e9a); transform: translateY(-1px); }
.ok-buy-button--full { width: 100%; min-height: 50px; }

/* Category page */
.ok-breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-top: 25px; color: #9a929e; font-size: 12px; }
.ok-breadcrumbs a:hover { color: var(--ok-purple); }
.ok-catalog-page { padding-block: 32px 70px; }
.ok-catalog-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 25px; }
.ok-catalog-heading h1 { margin: 0; color: var(--ok-ink); font-size: clamp(30px, 4vw, 46px); font-weight: 880; letter-spacing: -1.1px; }
.ok-category-description { max-width: 760px; margin-top: 10px; color: var(--ok-muted); }
.ok-catalog-result { color: #928a96; white-space: nowrap; }
.ok-subcategories { display: flex; gap: 10px; margin-bottom: 22px; overflow-x: auto; scrollbar-width: none; }
.ok-subcategories::-webkit-scrollbar { display: none; }
.ok-subcategories a { flex: 0 0 auto; display: flex; align-items: center; gap: 15px; padding: 11px 15px; border: 1px solid var(--ok-line); border-radius: 14px; background: #fff; color: #514a56; font-size: 12px; font-weight: 700; }
.ok-subcategories a:hover { border-color: var(--ok-purple); color: var(--ok-purple); }
.ok-catalog-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-bottom: 22px; padding: 13px; border: 1px solid var(--ok-line); border-radius: 17px; background: #fff; }
.ok-toolbar-field { display: flex; align-items: center; gap: 9px; }
.ok-toolbar-field label { color: #958e9a; font-size: 11px; }
.ok-toolbar-field select { height: 40px; max-width: 230px; padding: 0 35px 0 12px; border: 1px solid #e7e2eb; border-radius: 11px; background-color: #fbfafd; color: #49424e; outline: none; }
.ok-catalog-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.ok-pagination-wrap { display: flex; justify-content: center; padding-top: 40px; }
.ok-pagination { display: flex; align-items: center; gap: 6px; padding: 7px; border: 1px solid var(--ok-line); border-radius: 15px; background: #fff; }
.ok-pagination a, .ok-pagination span { min-width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; }
.ok-pagination a:hover, .ok-pagination .is-current { background: var(--ok-purple); color: #fff; }
.ok-pagination .is-disabled { color: #c2bcc5; }
.ok-empty-state { display: grid; place-items: center; gap: 15px; min-height: 330px; padding: 40px; border-radius: 24px; background: #fff; text-align: center; }

/* Product page */
.ok-product-page { padding-block: 25px 70px; }
.ok-product-detail { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr); gap: 28px; }
.ok-product-gallery, .ok-product-info, .ok-product-description { border: 1px solid var(--ok-line); border-radius: 26px; background: #fff; box-shadow: 0 10px 30px rgba(45,26,79,.05); }
.ok-product-gallery { min-height: 620px; display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 15px; padding: 20px; overflow: hidden; }
.ok-product-gallery__main { width: 100%; min-width: 0; height: 575px; order: 2; overflow: hidden; border-radius: 18px; background: #fdfcff; }
.ok-product-gallery__main figure { height: 100%; display: grid; place-items: center; padding: 25px; }
.ok-product-gallery__main img { width: 100%; height: 100%; object-fit: contain; }
.ok-product-gallery__thumbs { width: 78px; height: 575px; order: 1; overflow: hidden; }
.ok-product-gallery__thumbs .swiper-slide { width: 74px; height: 74px !important; display: grid; place-items: center; padding: 6px; border: 1px solid var(--ok-line); border-radius: 13px; background: #fff; cursor: pointer; }
.ok-product-gallery__thumbs .swiper-slide-thumb-active { border-color: var(--ok-purple); }
.ok-product-gallery__thumbs img { width: 100%; height: 100%; object-fit: contain; }
.ok-gallery-arrow { position: absolute; z-index: 5; top: 50%; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--ok-line); border-radius: 50%; background: rgba(255,255,255,.92); color: var(--ok-purple); font-size: 28px; transform: translateY(-50%); cursor: pointer; }
.ok-gallery-arrow--prev { left: 14px; }
.ok-gallery-arrow--next { right: 14px; }
.ok-product-info { padding: 34px; }
.ok-product-info__status { width: max-content; display: flex; align-items: center; gap: 8px; padding: 7px 11px; border-radius: 99px; background: #effaf3; color: #168246; font-size: 11px; font-weight: 750; }
.ok-product-info h1 { margin: 17px 0 10px; font-size: clamp(26px, 3vw, 38px); font-weight: 850; line-height: 1.18; letter-spacing: -.8px; }
.ok-product-info__code { display: flex; justify-content: space-between; gap: 15px; color: #a099a4; font-size: 11px; }
.ok-product-pricebox { margin: 25px 0; padding: 20px; border-radius: 19px; background: linear-gradient(135deg, #f7f0ff, #fcfaff); }
.ok-product-pricebox__unit { color: var(--ok-purple); font-size: clamp(29px, 3vw, 39px); font-weight: 880; letter-spacing: -.7px; }
.ok-product-pricebox__unit small { font-size: 13px; font-weight: 720; }
.ok-product-pricebox__pack { margin-top: 5px; display: flex; align-items: center; gap: 8px; color: #716a76; }
.ok-product-pricebox__pack small { color: #a29aa7; }
.ok-option-group { margin-bottom: 20px; }
.ok-option-values { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px; }
.ok-option-values label { padding: 9px 14px; border: 1px solid var(--ok-line); border-radius: 11px; background: #fff; cursor: pointer; }
.ok-option-values input:checked + label { border-color: var(--ok-purple); background: var(--ok-purple-soft); color: var(--ok-purple); }
.ok-product-purchase { display: grid; grid-template-columns: 170px 1fr; gap: 10px; }
.ok-quantity-control--large { height: 54px; grid-template-columns: 46px 1fr 46px; }
.ok-buy-button--large { min-height: 54px; font-size: 15px; }
.ok-checkout-button { width: 100%; min-height: 48px; margin-top: 10px; border: 1px solid var(--ok-purple); border-radius: 13px; background: #fff; color: var(--ok-purple); font-weight: 800; cursor: pointer; }
.ok-checkout-button:hover { background: var(--ok-purple-soft); }
.ok-product-wishlist { display: flex; align-items: center; gap: 9px; margin-top: 19px; padding: 0; border: 0; background: transparent; color: #655e69; cursor: pointer; }
.ok-product-wishlist:hover { color: var(--ok-purple); }
.ok-product-wishlist svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.ok-product-wishlist svg.is-active { fill: #e85269; stroke: #e85269; }
.ok-product-assurances { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--ok-line); }
.ok-product-assurances div { display: grid; gap: 3px; }
.ok-product-assurances b { font-size: 10px; }
.ok-product-assurances span { color: #99919d; font-size: 9px; }
.ok-product-description { margin-top: 25px; padding: 30px; color: #625b66; line-height: 1.7; }
.ok-product-description h2 { margin: 0 0 15px; color: var(--ok-ink); font-size: 22px; font-weight: 820; }
.ok-product-description h2:not(:first-child) { margin-top: 30px; }
.ok-attributes { display: grid; gap: 1px; overflow: hidden; border: 1px solid var(--ok-line); border-radius: 14px; background: var(--ok-line); }
.ok-attributes div { display: grid; grid-template-columns: 35% 1fr; gap: 15px; padding: 11px 14px; background: #fff; }
.ok-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 25px; }
.ok-tags a { padding: 5px 10px; border-radius: 9px; background: var(--ok-purple-soft); color: var(--ok-purple); font-size: 11px; }

/* Cart */
.ok-cart-drawer { width: min(94vw, 480px); height: 100%; display: flex; flex-direction: column; background: #fff; }
.ok-cart-drawer__head { min-height: 90px; display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--ok-line); }
.ok-cart-drawer__head h3 { margin: 0; font-size: 27px; font-weight: 850; }
.ok-cart-drawer__body { flex: 1; overflow-y: auto; padding: 20px; }
.ok-cart-items { display: grid; gap: 12px; }
.ok-cart-item { display: grid; grid-template-columns: 67px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--ok-line); border-radius: 16px; }
.ok-cart-item__image { width: 67px; height: 67px; display: grid; place-items: center; padding: 5px; border-radius: 12px; background: #faf9fc; }
.ok-cart-item__image img { width: 100%; height: 100%; object-fit: contain; }
.ok-cart-item__info { min-width: 0; display: grid; gap: 5px; }
.ok-cart-item__name { display: -webkit-box; overflow: hidden; font-size: 12px; font-weight: 750; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.ok-cart-item__quantity { color: #99919d; font-size: 10px; }
.ok-cart-item__right { display: grid; justify-items: end; gap: 7px; white-space: nowrap; }
.ok-cart-item__right b { font-size: 12px; }
.ok-cart-item__right button { padding: 0; border: 0; background: transparent; color: #dd4d62; font-size: 9px; cursor: pointer; }
.ok-cart-summary { display: grid; gap: 10px; margin-top: 22px; padding: 18px; border-radius: 16px; background: #faf8fc; }
.ok-cart-summary__row { display: flex; justify-content: space-between; color: #6e6772; font-size: 12px; }
.ok-cart-summary__row.is-total { padding-top: 11px; border-top: 1px solid var(--ok-line); color: var(--ok-ink); font-size: 16px; }
.ok-minimum-order { margin: 18px 0; }
.ok-minimum-order__top { display: flex; justify-content: space-between; gap: 10px; color: #6d6571; font-size: 10px; }
.ok-minimum-order__top span { color: #d65063; text-align: right; }
.ok-minimum-order__bar { height: 9px; margin-top: 9px; overflow: hidden; border-radius: 99px; background: #eee9f1; }
.ok-minimum-order__bar span { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, #8150d2, #6633b8); }
.ok-cart-empty { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.ok-cart-empty__icon { width: 88px; height: 88px; display: grid; place-items: center; border-radius: 50%; background: var(--ok-purple-soft); color: var(--ok-purple); }
.ok-cart-empty__icon svg { width: 43px; height: 43px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.ok-cart-empty h3 { margin: 20px 0 5px; font-size: 22px; }
.ok-cart-empty p { max-width: 260px; margin: 0 0 20px; color: var(--ok-muted); }

/* Footer */
.ok-footer { margin-top: 65px; padding-top: 50px; background: #21152f; color: #cfc6d8; }
.ok-footer__grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 60px; padding-bottom: 40px; }
.ok-logo--footer { color: #fff; }
.ok-footer__brand p { max-width: 360px; margin: 20px 0; color: #aca1b7; line-height: 1.7; }
.ok-footer__whatsapp { display: inline-flex; padding: 10px 15px; border: 1px solid rgba(255,255,255,.18); border-radius: 12px; color: #fff; font-weight: 750; }
.ok-footer__whatsapp:hover { border-color: #35c56f; background: #35c56f; }
.ok-footer__column { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; }
.ok-footer__column h4 { margin: 0 0 8px; color: #fff; font-size: 15px; font-weight: 800; }
.ok-footer__column a:hover { color: #fff; }
.ok-footer__bottom { min-height: 65px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.1); color: #8e8199; font-size: 11px; }
.ok-mobile-bottom { display: none; }

/* Improve existing modal framework */
.modal-overlay { background: rgba(25, 14, 36, .48); backdrop-filter: blur(2px); }
.scroll-up { background: var(--ok-purple) !important; }

@media (max-width: 1279px) {
  .ok-container { width: min(1180px, calc(100% - 36px)); }
  .ok-header__main { grid-template-columns: 205px minmax(260px, 1fr) auto; gap: 20px; }
  .ok-logo__tagline { display: none; }
  .ok-logo { grid-template-rows: auto; }
  .ok-logo__mark { grid-row: auto; }
  .ok-action { min-width: 62px; padding-inline: 6px; }
  .ok-nav__links { gap: 18px; }
  .ok-catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ok-product-card__image { height: 225px; }
}

@media (max-width: 1023px) {
  body.ok-body { padding-bottom: 74px; }
  .ok-container { width: min(100% - 28px, 900px); }
  .ok-topbar, .ok-action__text, .ok-action--account, .ok-nav { display: none; }
  .ok-header__main { min-height: 74px; display: flex; flex-wrap: wrap; gap: 13px; padding-block: 12px; }
  .ok-menu-trigger { display: grid; flex: 0 0 auto; }
  .ok-logo { grid-template-columns: 43px auto; margin-right: auto; column-gap: 9px; }
  .ok-logo__mark { width: 43px; height: 43px; border-radius: 14px; }
  .ok-logo__mark svg { width: 24px; height: 24px; }
  .ok-logo__text { font-size: 25px; }
  .ok-header__actions { gap: 2px; }
  .ok-action { min-width: 42px; width: 42px; height: 42px; padding: 6px; border-radius: 13px; background: #f6f2fb; }
  .ok-action__icon svg { width: 23px; height: 23px; }
  .ok-header__search { order: 3; width: 100%; flex: 0 0 100%; }
  .ok-header__search .ok-search { height: 48px; }
  .ok-header__search .ok-search__button { display: none; }
  .ok-hero { padding-top: 16px; }
  .ok-hero__link { aspect-ratio: 2 / 1; min-height: auto; }
  .ok-benefits { grid-template-columns: repeat(2, 1fr); }
  .ok-benefit:nth-child(2) { border-right: 0; }
  .ok-benefit:nth-child(-n+2) { padding-bottom: 12px; border-bottom: 1px solid var(--ok-line); }
  .ok-benefit:nth-child(n+3) { padding-top: 12px; }
  .ok-catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ok-product-detail { grid-template-columns: 1fr; }
  .ok-product-gallery { min-height: auto; }
  .ok-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 35px; }
  .ok-footer__column:last-child { grid-column: 2 / 4; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .ok-footer__column:last-child h4 { width: 100%; }
  .ok-mobile-bottom { position: fixed; z-index: 40; inset: auto 0 0; height: 68px; display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--ok-line); background: rgba(255,255,255,.98); box-shadow: 0 -8px 25px rgba(45,26,79,.08); backdrop-filter: blur(12px); }
  .ok-mobile-bottom a, .ok-mobile-bottom button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 4px; border: 0; background: transparent; color: #9b959f; font-size: 9px; font-weight: 700; cursor: pointer; }
  .ok-mobile-bottom a.is-active { color: var(--ok-purple); }
  .ok-mobile-bottom svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
  .ok-mobile-bottom span { pointer-events: none; }
}

@media (max-width: 767px) {
  .ok-container { width: calc(100% - 24px); }
  .ok-logo__text { font-size: 22px; }
  .ok-header__actions .ok-action:first-child { display: none; }
  .ok-hero__slider { border-radius: 20px; }
  .ok-hero__link { aspect-ratio: 1.72 / 1; }
  .ok-hero__arrow { display: none; }
  .ok-benefits { display: flex; overflow-x: auto; padding: 10px; scroll-snap-type: x mandatory; }
  .ok-benefit { min-width: 210px; justify-content: flex-start; border: 0 !important; padding: 5px 10px !important; scroll-snap-align: start; }
  .ok-section { padding-top: 31px; }
  .ok-section__head { margin-bottom: 15px; }
  .ok-eyebrow { display: none; }
  .ok-section__title { font-size: 25px; }
  .ok-slider-actions { display: none; }
  .ok-category-card { min-height: 135px; padding: 14px; border-radius: 17px; }
  .ok-category-card__image { height: 73px; }
  .ok-product-card { border-radius: 18px; }
  .ok-product-card__image { height: 205px; padding: 15px; }
  .ok-product-card__body { padding: 0 13px 13px; }
  .ok-product-card__name { min-height: 41px; font-size: 13px; }
  .ok-unit-price { font-size: 18px; }
  .ok-product-card__buy { grid-template-columns: 1fr; }
  .ok-catalog-heading { align-items: flex-start; }
  .ok-catalog-heading h1 { font-size: 32px; }
  .ok-catalog-result { font-size: 10px; }
  .ok-catalog-toolbar { justify-content: space-between; overflow-x: auto; }
  .ok-toolbar-field label { display: none; }
  .ok-toolbar-field select { max-width: 145px; font-size: 10px; }
  .ok-catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ok-catalog-grid .ok-product-card__image { height: 180px; }
  .ok-catalog-grid .ok-product-card__meta { display: none; }
  .ok-catalog-grid .ok-product-card__buy { grid-template-columns: 1fr; }
  .ok-product-gallery { grid-template-columns: 1fr; padding: 12px; border-radius: 20px; }
  .ok-product-gallery__main { height: 420px; order: 1; }
  .ok-product-gallery__thumbs { width: 100%; height: 66px; order: 2; }
  .ok-product-gallery__thumbs .swiper-slide { width: 62px !important; height: 62px !important; }
  .ok-product-info { padding: 22px; border-radius: 20px; }
  .ok-product-info h1 { font-size: 27px; }
  .ok-product-pricebox { margin: 18px 0; }
  .ok-product-purchase { grid-template-columns: 1fr; }
  .ok-product-assurances { grid-template-columns: 1fr; }
  .ok-product-assurances div { grid-template-columns: 1fr 1fr; }
  .ok-product-description { padding: 22px; border-radius: 20px; }
  .ok-footer { display: none; }
}

@media (max-width: 430px) {
  .ok-header__main { gap: 8px; }
  .ok-menu-trigger { width: 38px; height: 38px; }
  .ok-logo { grid-template-columns: 38px auto; column-gap: 7px; }
  .ok-logo__mark { width: 38px; height: 38px; border-radius: 12px; }
  .ok-logo__text { font-size: 20px; }
  .ok-action { width: 38px; height: 38px; min-width: 38px; }
  .ok-hero__link { aspect-ratio: 1.5 / 1; }
  .ok-product-card__image, .ok-catalog-grid .ok-product-card__image { height: 155px; }
  .ok-product-card__body { padding-inline: 10px; }
  .ok-unit-price { font-size: 16px; }
  .ok-unit-price small, .ok-pack-price small { display: block; margin: 0; }
  .ok-quantity-control { grid-template-columns: 31px minmax(26px, 1fr) 31px; }
  .ok-buy-button { padding-inline: 10px; font-size: 12px; }
  .ok-product-gallery__main { height: 330px; }
}


/* OptoKAZ v2 refinements */
.ok-unit-price { color: var(--ok-purple); font-size: 17px; font-weight: 900; line-height: 1.15; letter-spacing: -.2px; }
.ok-unit-price small { font-size: 11px; font-weight: 700; color: inherit; }
.ok-pack-price { margin-top: 4px; color: #8f8696; font-size: 12px; font-weight: 500; }
.ok-pack-price small { font-weight: 500; color: #a79eae; }
.ok-header__actions { justify-content: flex-end; }
.ok-topbar__links:last-child { justify-content: flex-end; }
@media (max-width: 991px) {
  .ok-mobile-bottom a, .ok-mobile-bottom button { width: 20%; }
}


/* ===== OptoKAZ Material You Redesign v3 ===== */
:root {
  --ok-bg: #f5f2fb;
  --ok-surface: #ffffff;
  --ok-surface-2: #f9f6ff;
  --ok-text: #1f1b2d;
  --ok-muted-2: #6f6a7d;
  --ok-outline: #e6dff2;
  --ok-primary: #6f4de6;
  --ok-primary-2: #8e77f1;
  --ok-primary-soft: #efe9ff;
  --ok-green-soft: #e9f3ec;
}
.ok-body--material { background: linear-gradient(180deg, #faf7ff 0%, #f6f4fb 100%); color: var(--ok-text); }
.ok-body--material .ok-container { max-width: 1360px; }
.ok-body--material .header.sticky { display:none; }
.ok-header--material { padding-bottom: 18px; background: rgba(250,247,255,.88); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(111,77,230,.08); }
.ok-topbar--material { background: transparent; border-bottom: 1px solid rgba(111,77,230,.08); }
.ok-topbar--material .ok-topbar__inner { min-height: 38px; }
.ok-topbar--material .ok-topbar__item { color: #5f5a71; font-size: 13px; }
.ok-topbar--material .ok-topbar__item svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.ok-topbar__wa { color: #17a34a !important; font-weight: 700; }
.ok-logo--material .ok-logo__text { font-size: 28px; letter-spacing: -.8px; }
.ok-logo--material .ok-logo__text b { color: #18152a; font-weight: 900; }
.ok-logo--material .ok-logo__text { color: var(--ok-primary); font-weight: 900; }
.ok-header--material .ok-header__main { grid-template-columns: auto auto minmax(280px,1fr) auto; gap: 18px; padding-top: 14px; align-items: center; }
.ok-header__catalog-btn { min-width: 240px; }
.ok-nav--material { display:block; }
.ok-nav--material .ok-catalog-menu { width:100%; }
.ok-nav--material .ok-catalog-menu__button { width: 100%; min-height: 52px; justify-content: center; border: 0; border-radius: 20px; background: linear-gradient(135deg, var(--ok-primary), #7c61eb); color: #fff; box-shadow: 0 12px 26px rgba(111,77,230,.22); }
.ok-nav--material .ok-catalog-metis, .ok-nav--material .ok-nav__links, .ok-nav--material .ok-nav__promo { display:block; }
.ok-nav--material .ok-nav__links, .ok-nav--material .ok-nav__promo { display:none !important; }
.ok-catalog-dropdown { top: calc(100% + 14px); border-radius: 24px; border:1px solid var(--ok-outline); box-shadow: 0 18px 60px rgba(43,24,91,.12); }
.ok-catalog-dropdown__link, .ok-catalog-submenu a { border-radius: 14px; }
.ok-search--material { height: 56px; border: 1px solid var(--ok-outline); border-radius: 24px; background: rgba(255,255,255,.92); box-shadow: inset 0 1px 0 rgba(255,255,255,.7); }
.ok-search--material .ok-search__input { padding: 0 64px 0 22px; font-size: 16px; color: #2d2840; }
.ok-search--material .ok-search__button { position: absolute; right: 8px; top: 8px; width: 40px; height: 40px; border: 0; border-radius: 16px; background: var(--ok-primary-soft); color: var(--ok-primary); }
.ok-search--material .ok-search__button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; }
.ok-action { min-width: 126px; min-height: 56px; border-radius: 24px; background: rgba(255,255,255,.92); border: 1px solid var(--ok-outline); box-shadow: none; }
.ok-action__icon { width: 22px; height: 22px; }
.ok-badge { top: -5px; right: -8px; min-width: 18px; height: 18px; background: var(--ok-primary); color:#fff; font-size:10px; }
.ok-hero--material { padding-top: 8px; }
.ok-hero-material { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 24px; min-height: 370px; padding: 34px 42px 34px 42px; border-radius: 32px; border:1px solid rgba(111,77,230,.08); background: linear-gradient(135deg, #f7f3ff 0%, #fffaf4 100%); box-shadow: 0 20px 50px rgba(109,76,226,.08); }
.ok-hero-material:before, .ok-hero-material:after { content:''; position:absolute; border-radius:50%; background: rgba(164,136,255,.14); filter: blur(2px); }
.ok-hero-material:before { width: 320px; height: 320px; left: 42%; top: -30px; }
.ok-hero-material:after { width: 400px; height: 220px; right: -70px; top: 20px; }
.ok-hero-material__content { position:relative; z-index:2; max-width: 520px; }
.ok-hero-material__eyebrow { display:inline-flex; margin-bottom: 14px; padding: 9px 16px; border-radius: 999px; background: rgba(255,255,255,.72); color: var(--ok-primary); font-weight: 800; font-size: 12px; }
.ok-hero-material h1 { margin:0 0 16px; font-size: clamp(42px,4vw,58px); line-height: 1.06; letter-spacing:-1.8px; font-weight: 950; color: #1d1a2b; }
.ok-hero-material h1 span { color: var(--ok-primary); }
.ok-hero-material p { margin:0; font-size: 22px; line-height: 1.45; color: #4d485d; }
.ok-hero-material__actions { display:flex; gap:14px; margin-top: 28px; }
.ok-hero-button { display:inline-flex; align-items:center; justify-content:center; min-width: 196px; min-height: 54px; padding:0 22px; border-radius: 18px; font-weight: 800; }
.ok-hero-button--primary { background: linear-gradient(135deg, var(--ok-primary), #866cf0); color: #fff; box-shadow: 0 14px 28px rgba(111,77,230,.2); }
.ok-hero-button--ghost { background: rgba(255,255,255,.92); color: #403a4d; border: 1px solid var(--ok-outline); }
.ok-hero-material__badge { position:absolute; left: 50%; top: 86px; z-index:2; padding: 18px 22px; border-radius: 24px; background: #ecf4ec; color:#4f5660; font-size: 18px; box-shadow: 0 12px 30px rgba(77,104,86,.08); }
.ok-hero-material__badge b { display:block; margin-top: 6px; color: #2f2d7a; font-size: 26px; font-weight: 900; }
.ok-hero-material__visual { position:relative; z-index:1; align-self: stretch; display:flex; align-items:flex-end; justify-content:flex-end; }
.ok-hero-material__banner { width:100%; max-width: 670px; object-fit: contain; border-radius: 28px; }
.ok-hero-material__dots { position:absolute; left:50%; bottom: 18px; transform:translateX(-50%); display:flex; gap:8px; z-index:2; }
.ok-hero-material__dots span { width: 10px; height: 10px; border-radius:999px; background:#d6d0e8; }
.ok-hero-material__dots .is-active { width: 28px; background: var(--ok-primary); }
.ok-categories-section--material { padding-top: 20px; }
.ok-chip-grid { display:grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 16px; }
.ok-chip-card { display:flex; align-items:center; gap:12px; min-height: 80px; padding: 14px 18px; border-radius: 22px; background: rgba(255,255,255,.88); border:1px solid var(--ok-outline); box-shadow: 0 8px 26px rgba(95,70,149,.04); }
.ok-chip-card__image { width: 42px; height: 42px; flex:0 0 42px; display:grid; place-items:center; border-radius: 14px; background: #f5f1ff; overflow:hidden; }
.ok-chip-card__image img { width:100%; height:100%; object-fit:contain; }
.ok-chip-card__name { font-size: 15px; line-height: 1.25; font-weight: 700; color: #2b2539; }
.ok-section--material { padding-top: 28px; }
.ok-section__head--material { margin-bottom: 18px; }
.ok-section__head--material .ok-section__title { margin:0; font-size: 38px; font-weight: 930; letter-spacing: -1px; }
.ok-section__link { color: var(--ok-primary); font-weight: 700; }
.ok-products-slider--material .swiper-slide { height:auto; }
.ok-product-card--material { height:100%; padding: 14px; border:1px solid var(--ok-outline); border-radius: 28px; background: rgba(255,255,255,.92); box-shadow: 0 10px 30px rgba(59,37,112,.05); }
.ok-product-card--material .ok-product-card__image { height: 190px; border-radius: 20px; background: #fbfaff; }
.ok-product-card--material .ok-product-card__image img { object-fit: contain; }
.ok-product-card--material .ok-wishlist { top: 14px; right: 14px; width: 42px; height: 42px; border-radius: 16px; background: rgba(255,255,255,.96); border:1px solid var(--ok-outline); }
.ok-product-card--material .ok-product-card__body { padding-top: 14px; }
.ok-product-card--material .ok-product-card__name { min-height: 50px; font-size: 18px; font-weight: 750; line-height: 1.35; color:#241f32; }
.ok-product-card--material .ok-product-card__meta { margin-top: 10px; gap: 5px; color:#817b8e; font-size: 13px; }
.ok-stars { color: #f5b100; font-size: 15px; }
.ok-product-card--material .ok-product-card__prices { margin-top: 12px; }
.ok-unit-price { color:#201c2d; font-size: 22px; font-weight: 950; line-height: 1.1; letter-spacing:-.4px; }
.ok-unit-price small { color:#201c2d; font-size: 15px; font-weight: 850; }
.ok-pack-price { margin-top: 8px; color:#847e91; font-size: 16px; font-weight: 500; }
.ok-pack-price small { font-size: 14px; color:#a39cb0; font-weight: 500; }
.ok-product-card--material .ok-product-card__buy { margin-top: 16px; display:grid; grid-template-columns: 1fr 1.15fr; gap: 10px; }
.ok-quantity-control { min-height: 48px; border-radius: 16px; border:1px solid var(--ok-outline); background: #faf8ff; }
.ok-quantity-control button { color:#6e6781; }
.ok-quantity-control input { font-weight: 800; color:#2b2538; }
.ok-buy-button { min-height: 48px; border-radius: 16px; background: linear-gradient(135deg, var(--ok-primary), #8568ef); color:#fff; font-weight: 850; box-shadow: none; }
.ok-buy-button:hover { opacity: .95; transform: none; }
.ok-benefits-strip { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; margin-top: 30px; margin-bottom: 26px; }
.ok-benefit-card { display:flex; align-items:center; gap: 16px; padding: 18px 22px; border-radius: 24px; border:1px solid var(--ok-outline); background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(245,241,255,.9)); }
.ok-benefit-card__icon { width: 56px; height: 56px; flex: 0 0 56px; display:grid; place-items:center; border-radius: 18px; background: var(--ok-primary-soft); color:var(--ok-primary); font-size: 24px; }
.ok-benefit-card b { display:block; margin-bottom:4px; color:#252132; font-size: 20px; font-weight: 850; }
.ok-benefit-card span { color:#6f697c; font-size: 15px; line-height:1.35; }
.ok-footer--material { margin-top: 6px; padding: 28px 0 16px; border-top: 1px solid rgba(111,77,230,.09); background: transparent; }
.ok-footer__grid--material { grid-template-columns: 1.2fr .9fr .9fr .9fr 1fr; gap: 32px; padding:0; }
.ok-footer--material .ok-footer__brand p, .ok-footer--material .ok-footer__column a, .ok-footer--material .ok-footer__column span { color:#615b6f; font-size: 14px; line-height: 1.55; }
.ok-footer--material .ok-footer__column h4 { margin-bottom: 14px; color:#262131; font-size: 18px; font-weight: 850; }
.ok-footer__contacts-inline { display:flex; flex-direction:column; gap:8px; margin-top:16px; }
.ok-footer__bottom { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(111,77,230,.08); color:#7d7688; }
.ok-footer__bottom a { color: inherit; }
.ok-catalog-page, .ok-product-page { padding-top: 24px; }
.ok-catalog-heading h1, .ok-product-info h1 { color:#221e31; }
.ok-catalog-toolbar, .ok-product-gallery, .ok-product-info, .ok-product-description { border-color: var(--ok-outline); border-radius: 28px; background: rgba(255,255,255,.94); box-shadow: 0 10px 32px rgba(69,47,125,.05); }
.ok-catalog-toolbar select { border-radius: 16px; background:#faf8ff; }
.ok-subcategories a, .ok-pagination { border-radius: 18px; border-color: var(--ok-outline); }
.ok-product-pricebox { border-radius: 24px; background: linear-gradient(135deg, #f2ecff, #fbf9ff); }
.ok-product-pricebox__unit { font-weight: 950; }
.ok-product-pricebox__pack { color:#7f788b; }
.ok-checkout-button { border-radius:16px; }
.ok-cart-drawer, .ok-cart-item, .ok-cart-summary { border-color: var(--ok-outline); }
@media (max-width: 1199px) {
  .ok-header--material .ok-header__main { grid-template-columns: auto minmax(0,1fr) auto; }
  .ok-header__catalog-btn { order:3; grid-column: 1 / -1; min-width: auto; }
  .ok-chip-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .ok-benefits-strip { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ok-footer__grid--material { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 991px) {
  .ok-header--material .ok-header__main { grid-template-columns: auto 1fr auto; gap: 12px; }
  .ok-header__catalog-btn { display:none; }
  .ok-header__actions .ok-action { min-width: 52px; width:52px; }
  .ok-action__text, .ok-topbar--material .ok-topbar__links:first-child { display:none; }
  .ok-hero-material { grid-template-columns: 1fr; min-height: auto; padding: 26px 20px 44px; }
  .ok-hero-material__badge { position: static; margin-top: 16px; width: max-content; }
  .ok-hero-material h1 { font-size: 34px; }
  .ok-hero-material p { font-size: 18px; }
  .ok-chip-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ok-benefits-strip { grid-template-columns: 1fr; }
  .ok-section__head--material .ok-section__title { font-size: 28px; }
}
@media (max-width: 767px) {
  .ok-body--material .ok-container { width: min(100% - 24px, 1360px); }
  .ok-header--material { padding-bottom: 12px; }
  .ok-logo--material .ok-logo__text { font-size: 22px; }
  .ok-search--material { height: 50px; }
  .ok-search--material .ok-search__input { font-size: 14px; }
  .ok-hero-material { border-radius: 24px; }
  .ok-hero-material__actions { flex-direction: column; }
  .ok-hero-button { width: 100%; }
  .ok-product-card--material .ok-product-card__name { font-size: 16px; min-height: 44px; }
  .ok-unit-price { font-size: 18px; }
  .ok-unit-price small { font-size: 13px; }
  .ok-pack-price { font-size: 13px; }
  .ok-footer__grid--material { grid-template-columns: 1fr; }
  .ok-mobile-bottom { background: rgba(255,255,255,.96); border-top:1px solid var(--ok-outline); backdrop-filter: blur(12px); }
  .ok-mobile-bottom a, .ok-mobile-bottom button { color:#6b6680; }
  .ok-mobile-bottom .is-active { color: var(--ok-primary); }
}


/* ===== OptoKAZ Visual Fix Pack v4 ===== */
.ok-home-hero { padding-top: 18px; }
.ok-header--material .ok-header__main { grid-template-columns: 180px 220px minmax(340px,1fr) auto; }
.ok-logo--material { min-width: 170px; }
.ok-logo--material .ok-logo__text { white-space: nowrap; }
.ok-product-grid--material { display:grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap:24px; }
.ok-benefits-strip--module { margin-top: 28px; }
.ok-benefit-card__icon--img { background:#fff; padding:10px; }
.ok-benefit-card__icon--img img { width:26px; height:26px; object-fit:contain; }
.ok-footer--material { background: #4863e9 !important; color: #fff; padding-top: 22px; margin-top: 40px; }
.ok-footer--material .ok-benefits-strip--footer { background:#fff; border-radius: 28px; padding: 22px; margin-bottom: 26px; }
.ok-footer--material .ok-benefit-card { background: transparent; border:none; border-right:1px solid #e8e1f4; border-radius:0; padding: 0 18px; }
.ok-footer--material .ok-benefit-card:last-child { border-right:none; }
.ok-footer__grid--simple { padding: 18px 0 12px; gap: 26px; grid-template-columns: 1.4fr 1fr 1fr 1fr; }
.ok-footer--material .ok-footer__brand p,
.ok-footer--material .ok-footer__column a,
.ok-footer--material .ok-footer__column span,
.ok-footer--material .ok-footer__column h4,
.ok-footer--material .ok-footer__bottom { color:#fff !important; }
.ok-footer--material .ok-footer__bottom { border-top:1px solid rgba(255,255,255,.28); min-height:auto; padding-bottom: 6px; }
.ok-footer--material .ok-logo__text b, .ok-footer--material .ok-logo__text { color:#fff; }
.ok-mobile-bottom { background: rgba(255,255,255,.98); }
.phone-call, .modal-wa { display:none !important; }
.ok-catalog-heading, .ok-product-detail, .ok-product-description, .ok-subcategories, .ok-catalog-toolbar { margin-bottom: 18px; }
.ok-product-gallery, .ok-product-info, .ok-product-description { padding: 26px; }
.ok-product-gallery__main figure { display:flex; align-items:center; justify-content:center; min-height: 520px; }
.ok-product-gallery__main img { max-height: 420px; width: auto; object-fit: contain; }
.ok-product-gallery__thumbs .swiper-slide { border-radius: 18px; overflow:hidden; }
.ok-product-gallery__thumbs img { object-fit: contain; }
.ok-product-pricebox__unit { font-size: 54px; font-weight: 950; color: var(--ok-primary); }
.ok-product-pricebox__pack { font-size: 18px; }
.ok-product-info h1 { font-size: 58px; line-height: 1.08; letter-spacing: -1.5px; }
.ok-catalog-grid { gap: 26px; }
.ok-catalog-grid .ok-product-card { background: rgba(255,255,255,.95); }
.ok-section__title { letter-spacing:-.8px; }
@media (max-width: 1199px) {
  .ok-header--material .ok-header__main { grid-template-columns: 180px minmax(0,1fr) auto; }
  .ok-product-grid--material { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .ok-footer__grid--simple { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 991px) {
  .ok-product-grid--material { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .ok-footer--material .ok-benefits-strip--footer { grid-template-columns: 1fr 1fr; }
  .ok-footer--material .ok-benefit-card { border-right:none; border-bottom:1px solid #e8e1f4; padding: 8px 0; }
}
@media (max-width: 767px) {
  .ok-home-hero { padding-top: 10px; }
  .ok-product-grid--material { grid-template-columns: 1fr; }
  .ok-product-info h1 { font-size: 32px; }
  .ok-product-pricebox__unit { font-size: 36px; }
  .ok-footer--material .ok-benefits-strip--footer { grid-template-columns: 1fr; }
  .ok-footer__grid--simple { grid-template-columns: 1fr; }
}


/* ===== OptoKAZ Material You v5 final repair ===== */
.swiper-hero, .ok-hero:not(.ok-home-hero) { display:none !important; }
.phone-call, .modal-wa, .scroll-up { display:none !important; }
.ok-home-hero { display:block !important; padding-top:24px; }
.ok-hero-material--home { min-height:390px; }
.ok-hero-material__visual { overflow:hidden; }
.ok-hero-material__banner { width:100%; max-width:700px; height:auto; object-fit:contain; mix-blend-mode:multiply; }
.ok-product-grid--material, .ok-catalog-grid { display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:24px !important; align-items:stretch; }
.ok-product-card, .ok-product-card--material { position:relative; min-width:0; height:100%; display:flex; flex-direction:column; overflow:hidden; padding:14px; border:1px solid var(--ok-outline); border-radius:28px; background:#fff; box-shadow:0 10px 30px rgba(59,37,112,.06); }
.ok-product-card__image { flex:0 0 220px; width:100%; height:220px !important; display:flex !important; align-items:center; justify-content:center; overflow:hidden; border-radius:20px; background:#fbfaff; }
.ok-product-card__image img { display:block; width:100%; height:100%; max-width:100%; object-fit:contain !important; }
.ok-product-card__body { flex:1; display:flex; flex-direction:column; min-width:0; padding:14px 2px 2px; }
.ok-product-card__name { min-height:50px; display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; font-size:18px; line-height:1.35; font-weight:800; color:#211d30; }
.ok-product-card__meta { min-height:24px; margin-top:8px; }
.ok-product-card__prices { margin-top:auto; padding-top:14px; }
.ok-unit-price { font-size:24px !important; font-weight:950 !important; color:#201c2d !important; }
.ok-unit-price small { font-size:14px !important; font-weight:850 !important; color:#201c2d !important; }
.ok-pack-price { margin-top:7px; font-size:15px !important; font-weight:500 !important; color:#8b8497 !important; }
.ok-pack-price small { font-size:13px !important; font-weight:500 !important; color:#aaa2b5 !important; }
.ok-product-card__buy { margin-top:16px; min-height:50px; display:grid !important; grid-template-columns:minmax(112px,.9fr) minmax(120px,1.1fr); gap:10px; align-items:stretch; }
.ok-product-card__buy > span:empty { display:block; }
.ok-quantity-control { min-width:0; height:50px; }
.ok-buy-button { border:0; cursor:pointer; }
.ok-buy-button--full { width:100%; margin-top:16px; display:flex; align-items:center; justify-content:center; }
.ok-wishlist { z-index:3; }
.ok-catalog-page { min-height:55vh; }
.ok-footer--clean { margin-top:50px; padding:34px 0 28px; background:#fff !important; border-top:1px solid var(--ok-outline); color:#2c2738; }
.ok-footer--clean .ok-benefits-strip--footer { margin:0 0 34px; padding:0; }
.ok-footer--clean .ok-benefit-card { background:#f8f5ff; border:1px solid var(--ok-outline); border-radius:22px; }
.ok-footer__grid--clean { display:grid; grid-template-columns:1.35fr 1fr 1fr 1fr; gap:38px; padding-top:24px; }
.ok-footer--clean .ok-footer__brand p, .ok-footer--clean .ok-footer__column a, .ok-footer--clean .ok-footer__column span { color:#6d6679; }
.ok-footer--clean .ok-footer__column h4 { color:#241f30; }
.ok-footer--clean .ok-logo__text b { color:#1e1a2b; }
.ok-footer--clean .ok-logo__text { color:var(--ok-primary); }
.ok-wishlist-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; }
.ok-wishlist-grid > * { min-width:0; }
#wishlist-container > div { height:auto !important; min-width:0; padding:14px !important; border:1px solid var(--ok-outline) !important; border-radius:28px !important; background:#fff !important; box-shadow:0 10px 30px rgba(59,37,112,.06) !important; }
#wishlist-container img { width:100%; height:240px; object-fit:contain; border-radius:18px; background:#fbfaff; }
#wishlist-container button, #wishlist-container a[class*="bg-primary"] { border-radius:15px !important; }
/* Hide legacy Bootstrap/Tailwind product layouts left in cached templates. */
.product-thumb, .product-layout .product-thumb { border:1px solid var(--ok-outline) !important; border-radius:24px !important; background:#fff !important; box-shadow:none !important; overflow:hidden; }
.product-thumb .image img { width:100%; height:220px; object-fit:contain; }
.product-thumb .button-group button { background:var(--ok-primary) !important; color:#fff !important; border:0 !important; }
.modal-cart .modal-content { z-index:1001; }
.ok-action--cart *, [data-target=".modal-cart"] * { pointer-events:none; }
@media (max-width:1199px) { .ok-product-grid--material, .ok-catalog-grid, .ok-wishlist-grid { grid-template-columns:repeat(3,minmax(0,1fr)) !important; } .ok-footer__grid--clean { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:899px) { .ok-product-grid--material, .ok-catalog-grid, .ok-wishlist-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; } .ok-hero-material--home { min-height:auto; } }
@media (max-width:559px) { .ok-product-grid--material, .ok-catalog-grid, .ok-wishlist-grid { grid-template-columns:1fr !important; } .ok-product-card__image { height:250px !important; flex-basis:250px; } .ok-footer__grid--clean { grid-template-columns:1fr; } }

/* ===== OptoKAZ Material You v6 interface fixes ===== */

/* Keep the catalogue flyout above the home hero, but below OpenCart modals. */
.ok-header--material {
  position: relative;
  z-index: 40 !important;
  overflow: visible !important;
}
.ok-header--material.header-fixed { z-index: 44 !important; }
.ok-header--material .ok-header__main,
.ok-header--material .ok-header__catalog-btn,
.ok-header--material .ok-nav--material,
.ok-header--material .ok-catalog-menu,
.ok-header--material .ok-catalog-metis {
  position: relative;
  overflow: visible !important;
}
.ok-header--material .ok-catalog-dropdown {
  z-index: 42 !important;
  isolation: isolate;
  box-shadow: 0 24px 60px rgba(45, 31, 82, .18) !important;
}
.ok-header--material .ok-catalog-submenu { z-index: 43 !important; }
.ok-home-hero,
.ok-hero-material--home { position: relative; z-index: 1; }

/* Equal category tiles and predictable two-line labels. */
.ok-chip-grid {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  grid-auto-rows: 1fr;
  gap: 16px !important;
  align-items: stretch;
}
.ok-chip-card {
  min-width: 0;
  min-height: 94px !important;
  height: 100%;
  padding: 14px 16px !important;
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px !important;
  align-items: center;
}
.ok-chip-card__image {
  width: 48px !important;
  height: 48px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ok-chip-card__image img { width: 48px !important; height: 48px !important; object-fit: contain; }
.ok-chip-card__name {
  min-width: 0;
  min-height: 40px;
  display: flex !important;
  align-items: center;
  overflow: hidden;
  font-size: 15px !important;
  line-height: 1.32 !important;
  font-weight: 800 !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

/* Quantity controls: one Material style before and after an AJAX refresh. */
.ok-product-card [data-btns-product-id],
.ok-product-info [data-btns-product-id] { min-width: 0; }
.ok-product-card [data-btns-product-id] .btn-cart-minus,
.ok-product-card [data-btns-product-id] .btn-cart-plus,
.ok-product-card [data-btns-product-id] .btn-buy,
.ok-product-info [data-btns-product-id] .btn-cart-minus-product,
.ok-product-info [data-btns-product-id] .btn-cart-plus-product,
.ok-product-info [data-btns-product-id] .btn-buy-product {
  width: 40px !important;
  min-width: 40px !important;
  height: 48px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border: 0 !important;
  border-radius: 14px !important;
  background: #f0eafe !important;
  color: #6544dd !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  box-shadow: none !important;
  cursor: pointer;
}
.ok-product-card [data-btns-product-id] input[data-count-product-id],
.ok-product-info [data-btns-product-id] input[data-count-product-id] {
  min-width: 42px !important;
  height: 48px !important;
  padding: 0 6px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  color: #211d30 !important;
  font: 800 15px/1 var(--ok-font, Arial, sans-serif) !important;
  text-align: center !important;
  box-shadow: none !important;
  appearance: textfield;
  -moz-appearance: textfield;
}
.ok-product-card [data-btns-product-id] input[data-count-product-id]::-webkit-outer-spin-button,
.ok-product-card [data-btns-product-id] input[data-count-product-id]::-webkit-inner-spin-button,
.ok-product-info [data-btns-product-id] input[data-count-product-id]::-webkit-outer-spin-button,
.ok-product-info [data-btns-product-id] input[data-count-product-id]::-webkit-inner-spin-button { margin: 0; appearance: none; -webkit-appearance: none; }
.ok-product-card [data-btns-product-id] .ok-quantity-control,
.ok-product-info [data-btns-product-id] .ok-quantity-control,
.ok-product-card [data-btns-product-id] .ok-legacy-quantity,
.ok-product-info [data-btns-product-id] .ok-legacy-quantity {
  min-width: 0;
  height: 50px !important;
  display: grid !important;
  grid-template-columns: 40px minmax(42px, 1fr) 40px !important;
  gap: 0 !important;
  align-items: center;
  overflow: hidden;
  border: 1px solid #e3daf3 !important;
  border-radius: 17px !important;
  background: #fff !important;
}
.ok-product-card [data-btns-product-id] .ok-quantity-control > *,
.ok-product-info [data-btns-product-id] .ok-quantity-control > *,
.ok-product-card [data-btns-product-id] .ok-legacy-quantity > *,
.ok-product-info [data-btns-product-id] .ok-legacy-quantity > * { grid-column: auto !important; }
.ok-product-card [data-btns-product-id] .ok-buy-button,
.ok-product-card [data-btns-product-id] .btn-add,
.ok-product-info [data-btns-product-id] .ok-buy-button,
.ok-product-info [data-btns-product-id] .btn-add-product {
  min-width: 0;
  min-height: 50px !important;
  padding: 0 14px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border: 0 !important;
  border-radius: 17px !important;
  background: linear-gradient(135deg, #6f4de6, #805bea) !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 850 !important;
  text-align: center;
  box-shadow: none !important;
  cursor: pointer;
}

/* Legacy AJAX fragments are normalised instead of flashing the old blue UI. */
.ok-product-card [data-btns-product-id].ok-legacy-controls,
.ok-product-info [data-btns-product-id].ok-legacy-controls {
  display: grid !important;
  grid-template-columns: minmax(112px, .9fr) minmax(120px, 1.1fr) !important;
  gap: 10px !important;
  align-items: stretch;
}
.ok-product-card [data-btns-product-id] .ok-legacy-quantity,
.ok-product-info [data-btns-product-id] .ok-legacy-quantity { width: 100% !important; }
.ok-product-card [data-btns-product-id] .ok-legacy-checkout,
.ok-product-info [data-btns-product-id] .ok-legacy-checkout {
  grid-column: 1 / -1 !important;
  min-height: 42px !important;
  border: 1px solid #6f4de6 !important;
  border-radius: 14px !important;
  background: #fff !important;
  color: #6544dd !important;
  font-weight: 800 !important;
}

/* Compact Material You wishlist, including cards injected by OpenCart. */
.ok-wishlist-page { min-height: 55vh; padding-top: 6px; padding-bottom: 56px; }
.ok-wishlist-heading {
  margin: 12px 0 22px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}
.ok-wishlist-heading h1 { margin: 8px 0 0; font-size: clamp(34px, 4vw, 50px); line-height: 1; }
.ok-wishlist-hint { max-width: 430px; margin: 0; color: #777083; font-size: 14px; line-height: 1.5; text-align: right; }
.ok-wishlist-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: stretch;
}
#wishlist-container > *,
#wishlist-container .ok-wishlist-card-shell {
  grid-column: auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
}
#wishlist-container > div,
#wishlist-container .ok-wishlist-card {
  position: relative;
  min-width: 0 !important;
  height: 100% !important;
  padding: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  overflow: hidden;
  border: 1px solid var(--ok-outline) !important;
  border-radius: 22px !important;
  background: #fff !important;
  box-shadow: 0 8px 24px rgba(59, 37, 112, .055) !important;
}
#wishlist-container a:has(> img),
#wishlist-container .ok-wishlist-image {
  width: 100% !important;
  height: 152px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 16px !important;
  background: #fbfaff !important;
}
#wishlist-container img {
  width: 100% !important;
  height: 152px !important;
  max-height: 152px !important;
  object-fit: contain !important;
  border-radius: 16px !important;
  background: #fbfaff !important;
}
#wishlist-container h2,
#wishlist-container h3,
#wishlist-container .ok-wishlist-name {
  min-height: 40px;
  margin: 2px 0 0 !important;
  display: -webkit-box !important;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: #282235 !important;
  font-size: 15px !important;
  line-height: 1.32 !important;
  font-weight: 800 !important;
}
#wishlist-container p { margin: 0 !important; font-size: 13px !important; line-height: 1.4 !important; }
#wishlist-container [class*="text-2xl"],
#wishlist-container [class*="text-3xl"] { font-size: 20px !important; line-height: 1.15 !important; }
#wishlist-container button,
#wishlist-container a[class*="bg-primary"],
#wishlist-container .ok-wishlist-buy {
  min-height: 42px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #6f4de6, #805bea) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}
#wishlist-container .ok-wishlist-remove {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  z-index: 3;
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: #6544dd !important;
  box-shadow: 0 5px 18px rgba(39, 26, 72, .18) !important;
}
.ok-wishlist-empty {
  grid-column: 1 / -1;
  padding: 48px 24px;
  border: 1px dashed #dcd2ef;
  border-radius: 24px;
  background: rgba(255, 255, 255, .7);
  color: #777083;
  text-align: center;
}

@media (max-width: 1250px) {
  .ok-chip-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .ok-wishlist-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 900px) {
  .ok-chip-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .ok-wishlist-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .ok-wishlist-heading { align-items: flex-start; flex-direction: column; }
  .ok-wishlist-hint { text-align: left; }
}
@media (max-width: 620px) {
  .ok-chip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .ok-chip-card { min-height: 84px !important; padding: 12px !important; grid-template-columns: 42px minmax(0, 1fr); gap: 10px !important; }
  .ok-chip-card__image,
  .ok-chip-card__image img { width: 42px !important; height: 42px !important; }
  .ok-chip-card__name { font-size: 13px !important; }
  .ok-wishlist-grid { grid-template-columns: 1fr !important; }
  #wishlist-container > div,
  #wishlist-container .ok-wishlist-card { display: grid !important; grid-template-columns: 112px minmax(0, 1fr) !important; align-content: start; }
  #wishlist-container a:has(> img),
  #wishlist-container .ok-wishlist-image,
  #wishlist-container img { height: 112px !important; max-height: 112px !important; }
}

/* ===== OptoKAZ v6.1: stable cart controls after OpenCart AJAX ===== */
[data-btns-product-id].ok-cart-controls {
  width: 100%;
  min-height: 50px;
  margin-top: 16px;
  display: grid !important;
  grid-template-columns: minmax(132px, .9fr) minmax(126px, 1.1fr) !important;
  gap: 10px !important;
  align-items: stretch;
}
[data-btns-product-id].ok-cart-controls > .ok-quantity-control {
  width: 100% !important;
  min-width: 0 !important;
  height: 50px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 44px minmax(44px, 1fr) 44px !important;
  gap: 0 !important;
  align-items: center !important;
  overflow: hidden !important;
  border: 1px solid #e3daf3 !important;
  border-radius: 17px !important;
  background: #fff !important;
  box-shadow: none !important;
}
[data-btns-product-id].ok-cart-controls > .ok-quantity-control > button {
  width: 44px !important;
  min-width: 44px !important;
  height: 50px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #f0eafe !important;
  color: #6544dd !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  box-shadow: none !important;
  cursor: pointer !important;
}
[data-btns-product-id].ok-cart-controls > .ok-quantity-control > input[data-count-product-id] {
  width: 100% !important;
  min-width: 44px !important;
  height: 50px !important;
  margin: 0 !important;
  padding: 0 5px !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: #fff !important;
  color: #211d30 !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-align: center !important;
  box-shadow: none !important;
  appearance: textfield !important;
  -moz-appearance: textfield !important;
}
[data-btns-product-id].ok-cart-controls > .ok-quantity-control > input::-webkit-outer-spin-button,
[data-btns-product-id].ok-cart-controls > .ok-quantity-control > input::-webkit-inner-spin-button {
  margin: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}
[data-btns-product-id].ok-cart-controls > .ok-cart-action {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 50px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 17px !important;
  background: linear-gradient(135deg, #6f4de6, #805bea) !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  text-align: center !important;
  box-shadow: none !important;
  cursor: pointer !important;
}
[data-btns-product-id].ok-cart-controls > .ok-cart-action.is-checkout {
  background: #fff !important;
  color: #6544dd !important;
  border: 2px solid #7653e8 !important;
}
@media (max-width: 380px) {
  [data-btns-product-id].ok-cart-controls {
    grid-template-columns: minmax(126px, .95fr) minmax(108px, 1.05fr) !important;
    gap: 8px !important;
  }
  [data-btns-product-id].ok-cart-controls > .ok-quantity-control {
    grid-template-columns: 38px minmax(42px, 1fr) 38px !important;
  }
  [data-btns-product-id].ok-cart-controls > .ok-quantity-control > button {
    width: 38px !important;
    min-width: 38px !important;
  }
}

/* v17 definitive mobile filter cascade guard (must remain last). */
@media (max-width: 767px) {
  .ok-header--material .ok-header__search .ok-search-shell {
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 40px !important;
    gap: 6px !important;
    align-items: center !important;
  }
  .ok-header--material .ok-header__search .ok-search-shell .ok-search {
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
  }
  .ok-header--material .ok-header__search .ok-search-shell .ok-search__input {
    width: 100% !important;
    height: 42px !important;
    padding: 0 47px 0 15px !important;
  }
  .ok-header--material .ok-header__search .ok-search-shell .ok-search__button {
    position: absolute !important;
    top: 4px !important;
    right: 4px !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .ok-header--material .ok-header__search .ok-filter-trigger {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
  }
  .ok-header--material .ok-header__search .ok-filter-popover {
    position: fixed !important;
    top: 112px !important;
    right: 10px !important;
    width: calc(100vw - 20px) !important;
    max-width: none !important;
  }
}

/* ===== OptoKAZ v17 FINAL: compact mobile filter bottom sheet ===== */
@media (max-width: 767px) {
  .ok-header--material .ok-header__search .ok-filter-popover {
    position: fixed !important;
    z-index: 1500 !important;
    top: auto !important;
    right: 0 !important;
    bottom: calc(64px + env(safe-area-inset-bottom)) !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 120px) !important;
    margin: 0 !important;
    padding: 14px 14px calc(14px + env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
    border: 1px solid #ddd3ed !important;
    border-bottom: 0 !important;
    border-radius: 24px 24px 0 0 !important;
    background: rgba(255,255,255,.99) !important;
    box-shadow: 0 -18px 55px rgba(42,27,77,.17) !important;
    transform: translateY(14px) !important;
  }
  .ok-header--material .ok-header__search .ok-filter-popover.is-open {
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
  .ok-header--material .ok-header__search .ok-filter-popover__head {
    min-height: 34px !important;
    margin: 0 0 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    color: #252031 !important;
    font-size: 17px !important;
    line-height: 1.2 !important;
  }
  .ok-header--material .ok-header__search .ok-filter-popover .ok-filter-close {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: #eee8ff !important;
    color: #6f4de6 !important;
    font-size: 20px !important;
    line-height: 1 !important;
  }
  .ok-header--material .ok-header__search .ok-filter-popover .ok-filter-sort {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }
  .ok-header--material .ok-header__search .ok-filter-popover .ok-filter-sort button {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #ded5ed !important;
    border-radius: 13px !important;
    background: #faf8ff !important;
    color: #4f485d !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
  }
  .ok-header--material .ok-header__search .ok-filter-popover .ok-filter-sort button.is-selected {
    border-color: #7554e3 !important;
    background: #eee8ff !important;
    color: #6543d8 !important;
  }
  .ok-header--material .ok-header__search .ok-filter-popover .ok-filter-prices {
    width: 100% !important;
    margin: 10px 0 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .ok-header--material .ok-header__search .ok-filter-popover .ok-filter-prices label {
    min-width: 0 !important;
    display: grid !important;
    gap: 5px !important;
  }
  .ok-header--material .ok-header__search .ok-filter-popover .ok-filter-prices label span {
    color: #777083 !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: 750 !important;
  }
  .ok-header--material .ok-header__search .ok-filter-popover .ok-filter-prices input {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 11px !important;
    border: 1px solid #ded5ed !important;
    border-radius: 13px !important;
    background: #fff !important;
    color: #282235 !important;
    font-size: 16px !important;
    line-height: 42px !important;
  }
  .ok-header--material .ok-header__search .ok-filter-popover .ok-filter-actions {
    width: 100% !important;
    margin: 11px 0 0 !important;
    display: grid !important;
    grid-template-columns: .85fr 1.15fr !important;
    gap: 8px !important;
  }
  .ok-header--material .ok-header__search .ok-filter-popover .ok-filter-actions button {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 41px !important;
    min-height: 41px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 13px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 850 !important;
    white-space: nowrap !important;
  }
  .ok-header--material .ok-header__search .ok-filter-popover .ok-filter-reset {
    background: #f2eef8 !important;
    color: #5f586c !important;
  }
  .ok-header--material .ok-header__search .ok-filter-popover .ok-filter-apply {
    background: linear-gradient(135deg, #6f4de6, #805eea) !important;
    color: #fff !important;
  }
}

/* ===== OptoKAZ v17: polished mobile filter bottom sheet ===== */
@media (max-width: 767px) {
  .ok-header--material .ok-header__search .ok-filter-popover {
    position: fixed !important;
    z-index: 1500 !important;
    top: auto !important;
    right: 0 !important;
    bottom: calc(64px + env(safe-area-inset-bottom)) !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 120px) !important;
    margin: 0 !important;
    padding: 14px 14px calc(14px + env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
    border: 1px solid #ddd3ed !important;
    border-bottom: 0 !important;
    border-radius: 24px 24px 0 0 !important;
    background: rgba(255,255,255,.99) !important;
    box-shadow: 0 -18px 55px rgba(42,27,77,.17) !important;
    transform: translateY(14px) !important;
  }
  .ok-header--material .ok-header__search .ok-filter-popover.is-open {
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
  .ok-header--material .ok-header__search .ok-filter-popover__head {
    min-height: 34px !important;
    margin: 0 0 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    color: #252031 !important;
    font-size: 17px !important;
    line-height: 1.2 !important;
  }
  .ok-header--material .ok-header__search .ok-filter-popover .ok-filter-close {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: #eee8ff !important;
    color: #6f4de6 !important;
    font-size: 20px !important;
    line-height: 1 !important;
  }
  .ok-header--material .ok-header__search .ok-filter-popover .ok-filter-sort {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }
  .ok-header--material .ok-header__search .ok-filter-popover .ok-filter-sort button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #ded5ed !important;
    border-radius: 13px !important;
    background: #faf8ff !important;
    color: #4f485d !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
  }
  .ok-header--material .ok-header__search .ok-filter-popover .ok-filter-sort button.is-selected {
    border-color: #7554e3 !important;
    background: #eee8ff !important;
    color: #6543d8 !important;
  }
  .ok-header--material .ok-header__search .ok-filter-popover .ok-filter-prices {
    width: 100% !important;
    margin: 10px 0 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .ok-header--material .ok-header__search .ok-filter-popover .ok-filter-prices label {
    min-width: 0 !important;
    display: grid !important;
    gap: 5px !important;
  }
  .ok-header--material .ok-header__search .ok-filter-popover .ok-filter-prices label span {
    color: #777083 !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: 750 !important;
  }
  .ok-header--material .ok-header__search .ok-filter-popover .ok-filter-prices input {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 11px !important;
    border: 1px solid #ded5ed !important;
    border-radius: 13px !important;
    background: #fff !important;
    color: #282235 !important;
    font-size: 16px !important;
    line-height: 42px !important;
  }
  .ok-header--material .ok-header__search .ok-filter-popover .ok-filter-actions {
    width: 100% !important;
    margin: 11px 0 0 !important;
    display: grid !important;
    grid-template-columns: .85fr 1.15fr !important;
    gap: 8px !important;
  }
  .ok-header--material .ok-header__search .ok-filter-popover .ok-filter-actions button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 41px !important;
    min-height: 41px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 13px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 850 !important;
    white-space: nowrap !important;
  }
  .ok-header--material .ok-header__search .ok-filter-popover .ok-filter-reset {
    background: #f2eef8 !important;
    color: #5f586c !important;
  }
  .ok-header--material .ok-header__search .ok-filter-popover .ok-filter-apply {
    background: linear-gradient(135deg, #6f4de6, #805eea) !important;
    color: #fff !important;
  }
}

/* ===== OptoKAZ v15: stable desktop catalogue and header price filter ===== */
.ok-search-shell {
  position: relative;
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 52px;
  gap: 8px;
  align-items: center;
}
.ok-search-shell .ok-search {
  width: 100% !important;
  min-width: 0;
  overflow: hidden !important;
}
.ok-search-shell .ok-search__input {
  width: 100% !important;
  min-width: 0 !important;
  padding-right: 60px !important;
}
.ok-search-shell .ok-search__button {
  position: absolute !important;
  top: 7px !important;
  right: 7px !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center;
  border-radius: 16px !important;
}
.ok-search-shell .ok-search__button svg {
  width: 21px;
  height: 21px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.ok-filter-trigger {
  width: 52px;
  height: 52px;
  min-width: 52px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--ok-outline);
  border-radius: 19px;
  background: rgba(255,255,255,.94);
  color: #6f4de6;
  box-shadow: none;
  cursor: pointer;
}
.ok-filter-trigger:hover,
.ok-filter-trigger.is-active {
  border-color: #cfc1ef;
  background: #eee8ff;
}
.ok-filter-trigger svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.ok-filter-popover {
  position: absolute;
  z-index: 1300;
  top: calc(100% + 10px);
  right: 0;
  width: min(360px, calc(100vw - 24px));
  padding: 16px;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-7px);
  border: 1px solid #e0d7ef;
  border-radius: 22px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 20px 55px rgba(42,27,77,.16);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.ok-filter-popover.is-open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}
.ok-filter-popover__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  color: #252031;
  font-size: 17px;
}
.ok-filter-close {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: #f3effa;
  color: #6f6879;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.ok-filter-sort {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.ok-filter-sort button {
  min-height: 42px;
  padding: 7px 9px;
  border: 1px solid #ded5ed;
  border-radius: 13px;
  background: #faf8ff;
  color: #4f485d;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}
.ok-filter-sort button.is-selected {
  border-color: #7554e3;
  background: #eee8ff;
  color: #6543d8;
}
.ok-filter-prices {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.ok-filter-prices label { min-width: 0; display: grid; gap: 5px; }
.ok-filter-prices label span { color: #777083; font-size: 11px; font-weight: 700; }
.ok-filter-prices input {
  width: 100%;
  min-width: 0;
  height: 44px;
  padding: 0 12px;
  border: 1px solid #ded5ed;
  border-radius: 13px;
  outline: 0;
  background: #fff;
  color: #282235;
  font-size: 14px;
  font-weight: 750;
}
.ok-filter-prices input:focus {
  border-color: #8063e8;
  box-shadow: 0 0 0 3px rgba(111,77,230,.09);
}
.ok-filter-actions {
  margin-top: 13px;
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 8px;
}
.ok-filter-actions button {
  min-height: 43px;
  border: 0;
  border-radius: 13px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.ok-filter-reset { background: #f2eef8; color: #5f586c; }
.ok-filter-apply { background: linear-gradient(135deg, #6f4de6, #805eea); color: #fff; }

/* This class is controlled independently of MetisMenu and can be toggled repeatedly. */
.ok-catalog-dropdown.ok-desktop-catalog-open {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.ok-catalog-menu__button.is-open { box-shadow: 0 12px 30px rgba(111,77,230,.28) !important; }

@media (max-width: 767px) {
  .ok-search-shell {
    grid-template-columns: minmax(0, 1fr) 40px;
    gap: 6px;
  }
  .ok-search-shell .ok-search__input { padding-right: 47px !important; }
  .ok-search-shell .ok-search__button {
    top: 4px !important;
    right: 4px !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
  }
  .ok-filter-trigger {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 14px;
  }
  .ok-filter-trigger svg { width: 20px; height: 20px; }
  .ok-filter-popover {
    position: fixed;
    z-index: 1400;
    top: 112px;
    right: 10px;
    width: calc(100vw - 20px);
    padding: 13px;
    border-radius: 19px;
  }
  .ok-filter-popover__head { margin-bottom: 9px; font-size: 16px; }
  .ok-filter-sort button { min-height: 40px; font-size: 11px; }
  .ok-filter-prices input { height: 42px; font-size: 16px !important; }
  .ok-filter-actions { margin-top: 10px; }
  .ok-filter-actions button { min-height: 41px; }
}

/* ===== OptoKAZ v6.3: clear-cart action ===== */
.ok-clear-cart {
  width: 100%;
  min-height: 42px;
  margin: 0 0 14px;
  padding: 9px 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid #f0c9ce;
  border-radius: 14px;
  background: #fff5f6;
  color: #b3261e;
  font: 800 14px/1.2 var(--ok-font, Arial, sans-serif);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.ok-clear-cart span {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #b3261e;
  color: #fff;
  font-size: 17px;
  line-height: 1;
}
.ok-clear-cart:hover {
  border-color: #e19aa3;
  background: #ffe9ec;
  transform: translateY(-1px);
}
.ok-clear-cart:disabled,
.ok-clear-cart.is-loading {
  opacity: .65;
  pointer-events: none;
  transform: none;
}

/* OptoKAZ v6.5: hide only the legacy wholesale banner after categories. */
.ok-categories-section + div > .container.mx-auto.my-10 {
  display: none !important;
}

/* OptoKAZ v6.6: hide the fixed legacy blue copyright footer. */
body > footer.bg-primary-500.fixed.bottom-0.left-0.w-full {
  display: none !important;
}

/* ===== OptoKAZ v7: approved product hero ===== */
.ok-hero-material--home {
  min-height: 450px;
  isolation: isolate;
  background: #fbf8ff;
}
.ok-hero-material--home::before,
.ok-hero-material--home::after {
  display: none;
}
.ok-hero-material__background {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  user-select: none;
}
.ok-hero-material--home .ok-hero-material__content {
  position: relative;
  z-index: 2;
  max-width: 560px;
}
.ok-hero-material--home .ok-hero-material__badge {
  left: 51%;
  top: 68px;
  z-index: 3;
}

@media (max-width: 991px) {
  .ok-hero-material--home {
    display: flex;
    flex-direction: column;
    min-height: auto;
    padding-bottom: 0;
  }
  .ok-hero-material--home .ok-hero-material__content { order: 1; }
  .ok-hero-material--home .ok-hero-material__badge {
    order: 2;
    position: static;
    align-self: flex-start;
  }
  .ok-hero-material__background {
    order: 3;
    position: relative;
    inset: auto;
    z-index: 1;
    width: calc(100% + 40px);
    height: 250px;
    margin: 22px -20px 0;
    object-fit: cover;
    object-position: right center;
  }
}

@media (max-width: 559px) {
  .ok-hero-material__background { height: 210px; }
}

/* ===== OptoKAZ v7.1: guaranteed hero image rendering ===== */
.ok-hero-material--home {
  background-color: #fbf8ff !important;
  background-image: url('/catalog/view/theme/default/assets/img/banner/optokaz-hero-products-v71.jpg?v=7.1.0') !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
}
.ok-hero-material__background { display: none !important; }
.ok-hero-material__mobile-art { display: none; }

@media (max-width: 991px) {
  .ok-hero-material--home { background-image: none !important; }
  .ok-hero-material__mobile-art {
    order: 3;
    display: block;
    width: calc(100% + 40px);
    height: 250px;
    margin: 22px -20px 0;
    border-radius: 0 0 24px 24px;
    background-color: #fbf8ff;
    background-image: url('/catalog/view/theme/default/assets/img/banner/optokaz-hero-products-v71.jpg?v=7.1.0');
    background-repeat: no-repeat;
    background-position: right center;
    background-size: cover;
  }
}

@media (max-width: 559px) {
  .ok-hero-material__mobile-art { height: 210px; }
}

/* ===== OptoKAZ v7.2: compact search results ===== */
.ok-search-page .ok-catalog-grid {
  grid-template-columns: repeat(auto-fill, minmax(240px, 270px)) !important;
  align-items: start !important;
  justify-content: start;
  gap: 18px !important;
}
.ok-search-page .ok-product-card {
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  padding: 12px !important;
  border-radius: 24px;
}
.ok-search-page .ok-product-card__image {
  flex: 0 0 170px !important;
  height: 170px !important;
  padding: 12px;
  border-radius: 18px;
}
.ok-search-page .ok-product-card__body {
  flex: 0 0 auto !important;
  padding: 12px 2px 2px !important;
}
.ok-search-page .ok-product-card__name {
  min-height: 44px;
  font-size: 16px;
}
.ok-search-page .ok-product-card__meta {
  min-height: 22px;
  margin: 6px 0 4px;
}
.ok-search-page .ok-product-card__prices {
  margin-top: 8px !important;
  padding-top: 0 !important;
}
.ok-search-page .ok-unit-price { font-size: 21px !important; }
.ok-search-page .ok-pack-price { margin-top: 5px; font-size: 14px !important; }
.ok-search-page .ok-product-card__buy {
  width: 100%;
  min-height: 46px;
  margin-top: 12px;
  grid-template-columns: minmax(105px, .95fr) minmax(100px, 1.05fr) !important;
  gap: 8px !important;
}
.ok-search-page .ok-product-card__buy--single {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
}
.ok-search-page .ok-product-card__buy--single .ok-buy-button {
  width: 100% !important;
  min-height: 46px !important;
}
.ok-search-page [data-btns-product-id].ok-cart-controls {
  grid-template-columns: minmax(105px, .95fr) minmax(100px, 1.05fr) !important;
  gap: 8px !important;
}

@media (max-width: 899px) {
  .ok-search-page .ok-catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 559px) {
  .ok-search-page .ok-catalog-grid { grid-template-columns: 1fr !important; }
  .ok-search-page .ok-product-card { max-width: 100%; }
}

/* ===== OptoKAZ v7.3: compact search heading and filters ===== */
.ok-search-page {
  padding-top: 16px;
}
.ok-search-page .ok-catalog-heading {
  align-items: center;
  gap: 16px;
  margin-bottom: 10px;
}
.ok-search-page .ok-catalog-heading > div {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
}
.ok-search-page .ok-catalog-heading .ok-eyebrow {
  margin: 0;
  padding: 6px 10px;
  border-radius: 999px;
  background: #eee8ff;
  font-size: 10px;
  line-height: 1;
}
.ok-search-page .ok-catalog-heading h1 {
  margin: 0;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.08;
  letter-spacing: -.8px;
}
.ok-search-page .ok-catalog-result {
  flex: 0 0 auto;
  font-size: 12px;
  line-height: 1.3;
}
.ok-search-page .ok-catalog-toolbar {
  width: max-content;
  max-width: 100%;
  min-height: 0;
  margin: 0 0 16px auto;
  padding: 7px 9px;
  gap: 10px;
  border-radius: 16px;
  box-shadow: none;
}
.ok-search-page .ok-toolbar-field {
  gap: 7px;
}
.ok-search-page .ok-toolbar-field label {
  font-size: 10px;
  white-space: nowrap;
}
.ok-search-page .ok-toolbar-field select {
  height: 36px;
  padding: 0 32px 0 11px;
  border-radius: 12px;
  font-size: 12px;
}
.ok-search-page .ok-toolbar-field:first-child select { width: 76px; }
.ok-search-page .ok-toolbar-field:last-child select { width: 220px; }

@media (max-width: 767px) {
  .ok-search-page .ok-catalog-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }
  .ok-search-page .ok-catalog-heading h1 { font-size: 28px; }
  .ok-search-page .ok-catalog-result { white-space: normal; }
  .ok-search-page .ok-catalog-toolbar {
    width: 100%;
    margin-left: 0;
    justify-content: space-between;
  }
  .ok-search-page .ok-toolbar-field { min-width: 0; }
  .ok-search-page .ok-toolbar-field label { display: none; }
  .ok-search-page .ok-toolbar-field:first-child select { width: 76px; }
  .ok-search-page .ok-toolbar-field:last-child select { width: min(210px, 58vw); }
}

/* ===== OptoKAZ v8: Material You quick checkout ===== */
.ok-quickorder {
  width: min(100% - 32px, 1360px) !important;
  max-width: 1360px !important;
  margin: 0 auto;
  padding: 24px 0 64px !important;
}
.ok-quickorder__layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1.55fr) minmax(340px, .85fr) !important;
  gap: 24px !important;
  align-items: start;
  margin: 0 !important;
}
.ok-quickorder__layout > * { grid-column: auto !important; }
.ok-quickorder__section-head {
  min-height: 46px;
  margin: 0 0 14px !important;
  padding: 0 !important;
  border: 0 !important;
}
.ok-quickorder__section-head h2 {
  margin: 0 !important;
  display: flex;
  align-items: center;
  gap: 11px;
  color: #211c30 !important;
  font-size: 26px !important;
  line-height: 1.15;
  font-weight: 900 !important;
  letter-spacing: -.5px;
}
.ok-quickorder__section-head h2::before {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #eee8ff;
  color: #6f4de6;
  font-size: 15px;
  font-weight: 900;
}
.ok-quickorder__section-head--cart h2::before { content: '1'; }
.ok-quickorder__section-head--contact h2::before { content: '2'; }
.ok-quickorder__section-head h2::after { display: none !important; }

.ok-quickorder__cart,
.ok-quickorder__form {
  border: 1px solid #e6dff2;
  border-radius: 28px !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: 0 14px 38px rgba(64,42,116,.07);
}
.ok-quickorder__cart {
  gap: 10px !important;
  padding: 14px !important;
}
.ok-quickorder__item {
  grid-template-columns: 76px minmax(150px, 1fr) minmax(230px, 280px) minmax(105px, auto) !important;
  grid-template-areas: 'image info controls price';
  gap: 16px !important;
  align-items: center !important;
  padding: 12px !important;
  border: 1px solid #eee8f7;
  border-radius: 20px !important;
  background: #fbf9ff !important;
  box-shadow: none !important;
  transition: border-color .2s ease, background .2s ease;
}
.ok-quickorder__item:hover {
  border-color: #d8cdf0;
  background: #f9f6ff !important;
  box-shadow: none !important;
}
.ok-quickorder__item > * { grid-column: auto !important; }
.ok-quickorder__image { grid-area: image; }
.ok-quickorder__info { grid-area: info; min-width: 0; }
.ok-quickorder__controls { grid-area: controls; min-width: 0; }
.ok-quickorder__price { grid-area: price; justify-content: flex-end !important; }
.ok-quickorder__image img {
  width: 72px !important;
  height: 72px !important;
  max-width: 72px !important;
  padding: 5px;
  border: 1px solid #eee8f7;
  border-radius: 16px;
  background: #fff;
  object-fit: contain !important;
}
.ok-quickorder__info a {
  margin: 0 !important;
  color: #282235 !important;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 800;
}
.ok-quickorder__info a:hover { color: #6f4de6 !important; }
.ok-quickorder__controls > .grid { display: block !important; }
.ok-quickorder__controls .grid-cols-5 {
  display: grid !important;
  grid-template-columns: 42px minmax(54px, 1fr) 42px 42px !important;
  gap: 7px !important;
  align-items: center !important;
}
.ok-quickorder__controls button,
.ok-quickorder__controls .btn-add-cart {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: #eee8ff !important;
  color: #6847dc !important;
  font-size: 19px;
  font-weight: 900;
  box-shadow: none !important;
  cursor: pointer;
}
.ok-quickorder__controls button:hover,
.ok-quickorder__controls .btn-add-cart:hover {
  background: #dfd4ff !important;
}
.ok-quickorder__controls .btn-add-cart {
  background: #6f4de6 !important;
  color: #fff !important;
}
.ok-quickorder__controls input[data-count-product-id] {
  grid-column: auto !important;
  width: 100% !important;
  min-width: 0;
  height: 42px !important;
  margin: 0 !important;
  padding: 0 6px !important;
  border: 1px solid #ddd4ef !important;
  border-radius: 14px !important;
  outline: 0;
  background: #fff !important;
  color: #251f32;
  font-size: 15px;
  font-weight: 850;
  text-align: center;
  box-shadow: none !important;
  appearance: textfield;
  -moz-appearance: textfield;
}
.ok-quickorder__controls input::-webkit-outer-spin-button,
.ok-quickorder__controls input::-webkit-inner-spin-button {
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
}
.ok-quickorder__price span {
  color: #6544dd !important;
  font-size: 18px !important;
  line-height: 1.2;
  font-weight: 950 !important;
  white-space: nowrap;
}
.ok-quickorder__total {
  min-height: 58px;
  margin: 4px 2px 0 !important;
  padding: 16px 4px 2px !important;
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 28px !important;
  border-top: 1px solid #e8e1f2 !important;
  color: #4c4658 !important;
  font-size: 14px !important;
}
.ok-quickorder__total > * { grid-column: auto !important; text-align: right !important; }
.ok-quickorder__total #formatted-totals {
  color: #6544dd !important;
  font-size: 24px;
  font-weight: 950;
}

.ok-quickorder__form {
  position: sticky;
  top: 110px;
  padding: 20px;
}
.ok-quickorder__fields {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}
.ok-quickorder__field { grid-column: auto !important; }
.ok-quickorder__input {
  width: 100%;
  height: 58px !important;
  padding: 20px 16px 7px !important;
  border: 1px solid #e2daef !important;
  border-radius: 18px !important;
  outline: 0 !important;
  background: #fbf9ff !important;
  color: #292334 !important;
  font-size: 15px !important;
  font-weight: 650;
  box-shadow: none !important;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.ok-quickorder__input:focus {
  border-color: #8a6bea !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(111,77,230,.09) !important;
}
.ok-quickorder__label {
  left: 16px !important;
  top: 18px !important;
  color: #8a8296 !important;
  font-size: 13px !important;
}
.ok-quickorder__input:focus + .ok-quickorder__label { color: #6f4de6 !important; }
.ok-quickorder__submit-wrap {
  margin-top: 14px !important;
  gap: 0 !important;
}
.ok-quickorder__submit {
  min-height: 54px;
  padding: 0 20px !important;
  border: 0;
  border-radius: 18px !important;
  background: linear-gradient(135deg, #6f4de6, #8569ed) !important;
  color: #fff !important;
  font-size: 15px;
  font-weight: 900 !important;
  box-shadow: 0 12px 24px rgba(111,77,230,.18);
  cursor: pointer;
}
.ok-quickorder__submit:hover {
  background: linear-gradient(135deg, #6543dd, #795ce7) !important;
  transform: translateY(-1px);
}

@media (max-width: 1100px) {
  .ok-quickorder__layout { grid-template-columns: 1fr !important; }
  .ok-quickorder__form { position: static; }
}

@media (max-width: 767px) {
  .ok-quickorder { width: min(100% - 24px, 1360px) !important; padding-top: 16px !important; }
  .ok-quickorder__section-head h2 { font-size: 22px !important; }
  .ok-quickorder__item {
    grid-template-columns: 68px minmax(0, 1fr) auto !important;
    grid-template-areas: 'image info price' 'controls controls controls';
    gap: 10px !important;
  }
  .ok-quickorder__image img { width: 64px !important; height: 64px !important; max-width: 64px !important; }
  .ok-quickorder__controls { margin-top: 2px; }
  .ok-quickorder__price span { font-size: 16px !important; }
}

@media (max-width: 520px) {
  .ok-quickorder__cart,
  .ok-quickorder__form { padding: 12px !important; border-radius: 22px !important; }
  .ok-quickorder__item {
    grid-template-columns: 62px minmax(0, 1fr) !important;
    grid-template-areas: 'image info' 'price price' 'controls controls';
  }
  .ok-quickorder__price { justify-content: flex-start !important; }
  .ok-quickorder__controls .grid-cols-5 { grid-template-columns: 38px minmax(48px, 1fr) 38px 38px !important; }
  .ok-quickorder__controls button,
  .ok-quickorder__controls .btn-add-cart { width: 38px !important; min-width: 38px; }
  .ok-quickorder__total { justify-content: space-between; gap: 12px !important; }
  .ok-quickorder__total #formatted-totals { font-size: 20px; }
}

/* ===== OptoKAZ v9: complete mobile polish ===== */
@media (max-width: 767px) {
  html { overflow-x: hidden; }
  body.ok-body--material {
    overflow-x: hidden;
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }
  .ok-body--material .ok-container {
    width: calc(100% - 24px) !important;
    max-width: 100% !important;
  }
  .ok-body--material img,
  .ok-body--material svg { max-width: 100%; }
  .ok-body--material input,
  .ok-body--material select,
  .ok-body--material textarea { font-size: 16px !important; }
  .ok-topbar--material { display: none !important; }

  /* Compact two-row mobile header. */
  .ok-header--material {
    padding: 0 0 10px !important;
    border-bottom: 1px solid rgba(224, 216, 239, .8);
  }
  .ok-header--material .ok-header__main {
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) 44px !important;
    grid-template-rows: 44px 48px !important;
    gap: 8px !important;
    padding: 10px 0 0 !important;
  }
  .ok-header--material .ok-menu-trigger {
    grid-column: 1;
    grid-row: 1;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    border-radius: 15px !important;
  }
  .ok-header--material .ok-menu-trigger svg { width: 22px; height: 22px; }
  .ok-header--material .ok-logo {
    grid-column: 2;
    grid-row: 1;
    min-width: 0 !important;
    width: auto !important;
    justify-self: start;
    align-self: center;
  }
  .ok-header--material .ok-logo__text {
    font-size: 25px !important;
    line-height: 1;
    letter-spacing: -.8px;
  }
  .ok-header--material .ok-header__catalog-btn { display: none !important; }
  .ok-header--material .ok-header__search {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  .ok-header--material .ok-header__search form,
  .ok-header--material .ok-header__search .ok-search { width: 100% !important; }
  .ok-header--material .ok-header__search input { height: 48px !important; }
  .ok-header--material .ok-header__search button {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px;
  }
  .ok-header--material .ok-header__actions {
    grid-column: 3;
    grid-row: 1;
    width: 44px !important;
    min-width: 44px !important;
    gap: 0 !important;
    justify-self: end;
  }
  .ok-header--material .ok-header__actions .ok-action:not(.ok-action--cart) { display: none !important; }
  .ok-header--material .ok-header__actions .ok-action--cart {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border-radius: 15px !important;
  }
  .ok-header--material .ok-action__text { display: none !important; }
  .ok-header--material .ok-action__icon { margin: 0 !important; }

  /* Home page. */
  .ok-home-hero { padding-top: 12px !important; }
  .ok-hero-material,
  .ok-hero-material--home {
    min-height: 0 !important;
    padding: 22px 16px 0 !important;
    gap: 14px !important;
    border-radius: 24px !important;
  }
  .ok-hero-material__content { max-width: 100% !important; }
  .ok-hero-material__eyebrow {
    margin-bottom: 12px !important;
    padding: 8px 12px !important;
    font-size: 11px !important;
  }
  .ok-hero-material h1 {
    margin-bottom: 12px !important;
    font-size: clamp(30px, 9vw, 38px) !important;
    line-height: 1.04 !important;
    letter-spacing: -1px !important;
  }
  .ok-hero-material p {
    font-size: 16px !important;
    line-height: 1.45 !important;
  }
  .ok-hero-material__actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px !important;
    margin-top: 18px !important;
  }
  .ok-hero-material__actions > * {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    padding: 0 9px !important;
    font-size: 12px !important;
    white-space: nowrap;
  }
  .ok-hero-material--home .ok-hero-material__badge,
  .ok-hero-material__badge {
    width: max-content !important;
    max-width: 100%;
    margin: 0 !important;
    padding: 12px 15px !important;
    border-radius: 18px !important;
    font-size: 14px !important;
  }
  .ok-hero-material__badge b { margin-top: 3px !important; font-size: 20px !important; }
  .ok-hero-material__mobile-art {
    width: calc(100% + 32px) !important;
    height: 180px !important;
    margin: 2px -16px 0 !important;
    object-fit: cover !important;
    object-position: center !important;
  }
  .ok-hero-material__dots { bottom: 10px !important; }

  .ok-chip-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .ok-chip-grid > * { min-width: 0; }
  .ok-category-chip,
  .ok-chip-card {
    min-height: 74px !important;
    padding: 10px !important;
    gap: 8px !important;
    border-radius: 18px !important;
  }
  .ok-category-chip img,
  .ok-chip-card__image { width: 42px !important; height: 42px !important; flex: 0 0 42px; }
  .ok-category-chip span,
  .ok-category-chip b,
  .ok-chip-card__name {
    min-width: 0;
    font-size: 12px !important;
    line-height: 1.25 !important;
    overflow-wrap: anywhere;
  }

  /* Catalog, search and product cards. */
  .ok-catalog-page,
  .ok-search-page,
  .ok-product-page,
  .ok-wishlist-page { padding-top: 14px !important; padding-bottom: 28px !important; }
  .ok-catalog-heading { margin-bottom: 12px !important; }
  .ok-catalog-heading h1 { font-size: clamp(30px, 9vw, 40px) !important; line-height: 1.05 !important; }
  .ok-catalog-toolbar,
  .ok-search-page .ok-catalog-toolbar {
    min-height: 0 !important;
    margin-bottom: 14px !important;
    padding: 10px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    border-radius: 18px !important;
    overflow: visible !important;
  }
  .ok-catalog-toolbar > *,
  .ok-search-page .ok-catalog-toolbar > * { min-width: 0 !important; }
  .ok-catalog-toolbar select,
  .ok-search-page .ok-catalog-toolbar select { height: 44px !important; max-width: 100%; }
  .ok-product-grid--material,
  .ok-catalog-grid,
  .ok-wishlist-grid { gap: 12px !important; }
  .ok-product-card,
  .ok-product-card--material {
    min-width: 0 !important;
    height: auto !important;
    padding: 10px !important;
    border-radius: 22px !important;
  }
  .ok-product-card__body { min-width: 0; padding: 12px 2px 2px !important; }
  .ok-product-card__name {
    min-height: 40px !important;
    font-size: 15px !important;
    line-height: 1.3 !important;
    overflow-wrap: anywhere;
  }
  .ok-product-card__price,
  .ok-unit-price { font-size: 22px !important; }
  .ok-product-card__pack-price,
  .ok-pack-price { font-size: 13px !important; }
  .ok-product-card__buy,
  .ok-product-card [data-btns-product-id] {
    width: 100% !important;
    min-width: 0 !important;
    gap: 8px !important;
  }
  .ok-product-card button,
  .ok-product-card input,
  .ok-product-card a.ok-buy-button { min-height: 44px; }
  .ok-product-card button,
  .ok-product-card a { touch-action: manipulation; }
  .ok-pagination,
  .pagination { max-width: 100%; overflow-x: auto; }

  /* Product page. */
  .ok-product-detail { gap: 14px !important; margin-bottom: 14px !important; }
  .ok-product-gallery,
  .ok-product-info,
  .ok-product-description {
    min-width: 0 !important;
    padding: 15px !important;
    border-radius: 22px !important;
  }
  .ok-product-gallery__main,
  .ok-product-gallery__main figure { height: 290px !important; min-height: 290px !important; }
  .ok-product-gallery__main img { max-height: 270px !important; }
  .ok-product-gallery__thumbs { height: 60px !important; }
  .ok-product-gallery__thumbs .swiper-slide { width: 56px !important; height: 56px !important; }
  .ok-product-info h1 {
    margin-bottom: 14px !important;
    font-size: clamp(28px, 8vw, 36px) !important;
    line-height: 1.08 !important;
    overflow-wrap: anywhere;
  }
  .ok-product-info__code { flex-wrap: wrap; gap: 7px !important; }
  .ok-product-pricebox { padding: 14px !important; border-radius: 18px !important; }
  .ok-product-pricebox__unit { font-size: 32px !important; }
  .ok-product-pricebox__pack { font-size: 16px !important; }
  .ok-product-purchase { grid-template-columns: 1fr !important; gap: 8px !important; }
  .ok-product-purchase > *,
  .ok-product-info [data-btns-product-id] { width: 100% !important; min-width: 0 !important; }
  .ok-product-info [data-btns-product-id] button,
  .ok-product-info [data-btns-product-id] input,
  .ok-product-info [data-btns-product-id] a { min-height: 48px !important; }
  .ok-product-assurances { grid-template-columns: 1fr !important; gap: 10px !important; }
  .ok-product-assurances div { grid-template-columns: 1fr !important; gap: 3px !important; }
  .ok-product-description,
  .ok-product-description * { max-width: 100%; overflow-wrap: anywhere; }

  /* Wishlist. */
  .ok-wishlist-heading {
    margin-bottom: 16px !important;
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  .ok-wishlist-heading h1 { margin-top: 4px !important; font-size: 34px !important; }
  .ok-wishlist-hint { font-size: 13px !important; text-align: left !important; }
  #wishlist-container .ok-wishlist-card-shell,
  #wishlist-container .ok-wishlist-card { min-width: 0 !important; }
  #wishlist-container .ok-wishlist-name { overflow-wrap: anywhere; }
  #wishlist-container button,
  #wishlist-container a { touch-action: manipulation; }

  /* Full-height mobile drawers. */
  .modal-cart .ok-cart-drawer,
  .modal-menu .ok-mobile-menu {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }
  .ok-cart-drawer__head,
  .ok-mobile-menu__head {
    min-height: 68px !important;
    padding: 12px 16px !important;
  }
  .ok-cart-drawer__body,
  .ok-mobile-menu__body {
    padding: 14px 12px calc(84px + env(safe-area-inset-bottom)) !important;
  }
  .ok-cart-items { gap: 8px !important; }
  .ok-cart-item {
    grid-template-columns: 58px minmax(0, 1fr) auto !important;
    gap: 8px !important;
    padding: 9px !important;
    border-radius: 15px !important;
  }
  .ok-cart-item__image { width: 58px !important; height: 58px !important; }
  .ok-cart-item__name { font-size: 12px !important; }
  .ok-cart-item__right { gap: 5px !important; }
  .ok-cart-item__right button { min-height: 32px; padding: 5px !important; font-size: 10px !important; }
  .ok-cart-drawer__foot { padding-bottom: calc(14px + env(safe-area-inset-bottom)) !important; }

  /* Order form and standard OpenCart content. */
  .ok-quickorder { width: calc(100% - 24px) !important; padding-bottom: 28px !important; }
  .ok-quickorder__layout { gap: 16px !important; }
  .ok-quickorder__input { font-size: 16px !important; }
  .ok-quickorder__submit { min-height: 52px !important; }
  .table-responsive { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .form-control { max-width: 100%; }

  /* Four real items = four equal mobile navigation cells. */
  .ok-mobile-bottom {
    z-index: 1000 !important;
    height: calc(64px + env(safe-area-inset-bottom)) !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    padding: 0 4px env(safe-area-inset-bottom) !important;
  }
  .ok-mobile-bottom a,
  .ok-mobile-bottom button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 60px;
    padding: 4px 2px !important;
    font-size: 10px !important;
    touch-action: manipulation;
  }
  .ok-mobile-bottom svg { width: 22px !important; height: 22px !important; }
}

@media (min-width: 560px) and (max-width: 767px) {
  .ok-product-grid--material,
  .ok-catalog-grid,
  .ok-wishlist-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .ok-product-card__image,
  .ok-catalog-grid .ok-product-card__image {
    height: 180px !important;
    flex-basis: 180px !important;
  }
}

@media (max-width: 559px) {
  .ok-product-grid--material,
  .ok-catalog-grid,
  .ok-wishlist-grid { grid-template-columns: 1fr !important; }
  .ok-product-card__image,
  .ok-catalog-grid .ok-product-card__image,
  .ok-search-page .ok-product-card__image {
    height: 195px !important;
    flex-basis: 195px !important;
  }
}

@media (max-width: 420px) {
  .ok-body--material .ok-container { width: calc(100% - 20px) !important; }
  .ok-hero-material,
  .ok-hero-material--home { padding-inline: 14px !important; }
  .ok-hero-material__actions { grid-template-columns: 1fr !important; }
  .ok-hero-material__mobile-art {
    width: calc(100% + 28px) !important;
    height: 160px !important;
    margin-inline: -14px !important;
  }
  .ok-category-chip,
  .ok-chip-card { min-height: 68px !important; padding: 8px !important; }
  .ok-category-chip img,
  .ok-chip-card__image { width: 38px !important; height: 38px !important; flex-basis: 38px; }
  .ok-product-gallery__main,
  .ok-product-gallery__main figure { height: 250px !important; min-height: 250px !important; }
  .ok-product-gallery__main img { max-height: 232px !important; }
  .ok-quickorder { width: calc(100% - 20px) !important; }
  .ok-quickorder__controls .grid-cols-5 {
    grid-template-columns: 42px minmax(50px, 1fr) 42px 42px !important;
    gap: 6px !important;
  }
  .ok-quickorder__controls button,
  .ok-quickorder__controls .btn-add-cart {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
  }
}

/* ===== OptoKAZ v10: approved compact mobile design ===== */
@media (max-width: 767px) {
  body.ok-body--material { background: #f8f6ff !important; }

  /* Header from the approved mockup. */
  .ok-header--material {
    padding-bottom: 12px !important;
    background: rgba(255,255,255,.98) !important;
    box-shadow: 0 7px 22px rgba(64,42,116,.04) !important;
  }
  .ok-header--material .ok-header__main {
    grid-template-columns: 44px minmax(0, 1fr) 44px !important;
    grid-template-rows: 48px 50px !important;
    row-gap: 10px !important;
  }
  .ok-header--material .ok-logo {
    justify-self: center !important;
    text-align: center;
  }
  .ok-header--material .ok-logo__text {
    font-size: 27px !important;
    letter-spacing: -1px !important;
  }
  .ok-header--material .ok-menu-trigger,
  .ok-header--material .ok-header__actions .ok-action--cart {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .ok-header--material .ok-menu-trigger svg,
  .ok-header--material .ok-action--cart svg {
    width: 25px !important;
    height: 25px !important;
    color: #242031;
  }
  .ok-header--material .ok-header__search .ok-search,
  .ok-header--material .ok-header__search .ok-search--material {
    height: 50px !important;
    border-radius: 21px !important;
    border: 1px solid #ddd5ed !important;
    background: #fff !important;
    box-shadow: none !important;
  }
  .ok-header--material .ok-header__search input {
    height: 48px !important;
    padding: 0 54px 0 18px !important;
    color: #2b2638 !important;
    font-size: 15px !important;
  }
  .ok-header--material .ok-header__search button,
  .ok-header--material .ok-header__search .ok-search__button {
    right: 5px !important;
    top: 5px !important;
    width: 40px !important;
    height: 40px !important;
    display: grid !important;
    place-items: center;
    border-radius: 16px !important;
    background: #eee8ff !important;
    color: #6f4de6 !important;
  }

  /* Short mobile hero with products on the right. */
  .ok-home-hero { padding-top: 12px !important; }
  .ok-hero-material,
  .ok-hero-material--home {
    position: relative !important;
    min-height: 315px !important;
    height: 315px !important;
    display: block !important;
    overflow: hidden !important;
    padding: 22px 18px !important;
    border-radius: 24px !important;
    background: #f7f1ff !important;
  }
  .ok-hero-material--home::before {
    content: '' !important;
    position: absolute !important;
    z-index: 1 !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: inherit;
    background: linear-gradient(90deg, #f8f3ff 0%, rgba(248,243,255,.98) 43%, rgba(248,243,255,.70) 61%, rgba(248,243,255,.08) 100%) !important;
    filter: none !important;
    pointer-events: none;
  }
  .ok-hero-material--home::after { display: none !important; }
  .ok-hero-material__mobile-art {
    position: absolute !important;
    z-index: 0 !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    border-radius: inherit !important;
    background-position: 72% center !important;
    background-size: auto 100% !important;
    background-repeat: no-repeat !important;
  }
  .ok-hero-material--home .ok-hero-material__content {
    position: relative !important;
    z-index: 2 !important;
    width: 68% !important;
    max-width: 255px !important;
  }
  .ok-hero-material__eyebrow,
  .ok-hero-material--home p { display: none !important; }
  .ok-hero-material h1 {
    max-width: 255px !important;
    margin: 4px 0 0 !important;
    font-size: clamp(27px, 7.5vw, 32px) !important;
    line-height: 1.05 !important;
    letter-spacing: -.9px !important;
  }
  .ok-hero-material--home .ok-hero-material__badge {
    position: absolute !important;
    z-index: 3 !important;
    left: 18px !important;
    top: 132px !important;
    width: auto !important;
    max-width: 225px !important;
    min-height: 54px;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    padding: 9px 13px !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,.86) !important;
    font-size: 11px !important;
    box-shadow: 0 8px 22px rgba(71,49,120,.08) !important;
    backdrop-filter: blur(6px);
  }
  .ok-hero-material--home .ok-hero-material__badge b {
    margin: 1px 0 0 !important;
    font-size: 17px !important;
  }
  .ok-hero-material__actions {
    position: absolute !important;
    z-index: 3 !important;
    left: 18px !important;
    bottom: 20px !important;
    width: 178px !important;
    display: block !important;
    margin: 0 !important;
  }
  .ok-hero-material__actions .ok-hero-button--ghost { display: none !important; }
  .ok-hero-material__actions .ok-hero-button--primary {
    width: 178px !important;
    min-width: 0 !important;
    min-height: 48px !important;
    border-radius: 15px !important;
    font-size: 13px !important;
  }

  /* Compact category tiles. */
  .ok-categories-section--material,
  .ok-section--material { padding-top: 22px !important; }
  .ok-section__head--material { margin-bottom: 12px !important; }
  .ok-section__head--material .ok-section__title {
    font-size: 25px !important;
    line-height: 1.1 !important;
    letter-spacing: -.5px !important;
  }
  .ok-chip-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .ok-chip-card {
    min-height: 70px !important;
    padding: 9px 10px !important;
    gap: 8px !important;
    border-radius: 17px !important;
    background: #fff !important;
    box-shadow: none !important;
  }
  .ok-chip-card__image {
    width: 38px !important;
    height: 38px !important;
    flex-basis: 38px !important;
    border-radius: 12px !important;
  }
  .ok-chip-card__name {
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  /* Two genuinely compact product cards, as in the mockup. */
  .ok-product-grid--material,
  .ok-catalog-grid,
  .ok-search-page .ok-catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }
  .ok-product-card,
  .ok-product-card--material {
    padding: 8px !important;
    border-radius: 19px !important;
    box-shadow: 0 8px 24px rgba(69,47,125,.045) !important;
  }
  .ok-product-card__image,
  .ok-catalog-grid .ok-product-card__image,
  .ok-search-page .ok-product-card__image {
    height: 140px !important;
    flex: 0 0 140px !important;
    padding: 8px !important;
    border-radius: 15px !important;
  }
  .ok-product-card .ok-wishlist {
    top: 9px !important;
    right: 9px !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 12px !important;
  }
  .ok-product-card__body { padding: 9px 1px 1px !important; }
  .ok-product-card__name {
    min-height: 34px !important;
    font-size: 13px !important;
    line-height: 1.28 !important;
  }
  .ok-product-card__meta {
    min-height: 0 !important;
    margin-top: 4px !important;
    font-size: 10px !important;
  }
  .ok-product-card__prices {
    margin-top: auto !important;
    padding-top: 8px !important;
  }
  .ok-product-card .ok-unit-price {
    font-size: 17px !important;
    line-height: 1.15 !important;
  }
  .ok-product-card .ok-unit-price small {
    display: inline !important;
    margin: 0 !important;
    font-size: 10px !important;
  }
  .ok-product-card .ok-pack-price {
    min-height: 28px;
    margin-top: 4px !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
  }
  .ok-product-card .ok-pack-price small {
    display: inline !important;
    margin: 0 !important;
    font-size: 9px !important;
  }
  .ok-product-card__buy,
  .ok-catalog-grid .ok-product-card__buy,
  .ok-product-card [data-btns-product-id] {
    min-height: 0 !important;
    margin-top: 8px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
  .ok-product-card .ok-quantity-control {
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    grid-template-columns: 38px minmax(30px, 1fr) 38px !important;
    border-radius: 13px !important;
  }
  .ok-product-card .ok-quantity-control button {
    width: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    font-size: 18px !important;
  }
  .ok-product-card .ok-quantity-control input {
    width: 100% !important;
    min-width: 0 !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 2px !important;
    font-size: 14px !important;
  }
  .ok-product-card .ok-buy-button,
  .ok-product-card .btn-add {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 41px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 6px !important;
    border-radius: 13px !important;
    font-size: 11px !important;
    white-space: nowrap;
  }
  .ok-product-card__buy--single .ok-buy-button { min-height: 44px !important; }

  .ok-catalog-heading h1 { font-size: 29px !important; }
  .ok-catalog-result { font-size: 10px !important; }
  .ok-catalog-toolbar,
  .ok-search-page .ok-catalog-toolbar {
    padding: 8px !important;
    border-radius: 16px !important;
  }

  /* Bottom navigation visible only on mobile. */
  .ok-mobile-bottom {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    background: rgba(255,255,255,.98) !important;
    box-shadow: 0 -7px 24px rgba(49,33,83,.08) !important;
  }
  .ok-mobile-bottom a,
  .ok-mobile-bottom button { font-size: 9px !important; }
  .ok-mobile-bottom svg { width: 21px !important; height: 21px !important; }

  /* Wishlist stays one-column because it uses a horizontal compact card. */
  .ok-wishlist-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 359px) {
  .ok-product-grid--material,
  .ok-catalog-grid,
  .ok-search-page .ok-catalog-grid { grid-template-columns: 1fr !important; }
  .ok-product-card__image,
  .ok-catalog-grid .ok-product-card__image,
  .ok-search-page .ok-product-card__image {
    height: 180px !important;
    flex-basis: 180px !important;
  }
  .ok-hero-material,
  .ok-hero-material--home { height: 300px !important; min-height: 300px !important; }
  .ok-hero-material h1 { font-size: 25px !important; }
  .ok-hero-material--home .ok-hero-material__badge { top: 122px !important; }
}

/* ===== OptoKAZ v11: compact hero, search and reliable category drawer ===== */
@media (max-width: 767px) {
  .ok-body--material .ok-container { width: calc(100% - 20px) !important; }

  /* Shorter header and search row. */
  .ok-header--material { padding-bottom: 8px !important; }
  .ok-header--material .ok-header__main {
    grid-template-columns: 40px minmax(0, 1fr) 40px !important;
    grid-template-rows: 44px 44px !important;
    gap: 6px 8px !important;
    padding-top: 8px !important;
  }
  .ok-header--material .ok-menu-trigger,
  .ok-header--material .ok-header__actions .ok-action--cart {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    pointer-events: auto !important;
    touch-action: manipulation;
  }
  .ok-header--material .ok-menu-trigger {
    position: relative;
    z-index: 5;
    cursor: pointer;
  }
  .ok-header--material .ok-menu-trigger svg,
  .ok-header--material .ok-action--cart svg {
    width: 23px !important;
    height: 23px !important;
  }
  .ok-header--material .ok-logo__text { font-size: 24px !important; }
  .ok-header--material .ok-header__search .ok-search,
  .ok-header--material .ok-header__search .ok-search--material {
    height: 44px !important;
    border-radius: 18px !important;
  }
  .ok-header--material .ok-header__search input {
    width: 100% !important;
    height: 42px !important;
    padding: 0 48px 0 15px !important;
    overflow: hidden;
    color: #2b2638 !important;
    font-size: 14px !important;
    line-height: 42px !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ok-header--material .ok-header__search input::placeholder {
    color: #9b95a5 !important;
    opacity: 1;
  }
  .ok-header--material .ok-header__search button,
  .ok-header--material .ok-header__search .ok-search__button {
    right: 4px !important;
    top: 4px !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 14px !important;
  }
  .ok-header--material .ok-header__search .ok-search__button svg {
    width: 19px !important;
    height: 19px !important;
    display: block !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
  }

  /* The action now stays in normal document flow and cannot cover the title. */
  .ok-home-hero { padding-top: 10px !important; }
  .ok-hero-material,
  .ok-hero-material--home {
    min-height: 245px !important;
    height: 245px !important;
    padding: 17px 15px !important;
    border-radius: 21px !important;
  }
  .ok-hero-material--home::before {
    background: linear-gradient(90deg, #f8f3ff 0%, rgba(248,243,255,.98) 48%, rgba(248,243,255,.74) 65%, rgba(248,243,255,.08) 100%) !important;
  }
  .ok-hero-material__mobile-art {
    background-position: 77% center !important;
    background-size: auto 100% !important;
  }
  .ok-hero-material--home .ok-hero-material__content {
    width: 64% !important;
    max-width: 225px !important;
  }
  .ok-hero-material h1 {
    max-width: 225px !important;
    margin: 0 !important;
    font-size: clamp(23px, 6.8vw, 27px) !important;
    line-height: 1.03 !important;
    letter-spacing: -.7px !important;
  }
  .ok-hero-material__actions {
    position: static !important;
    width: 158px !important;
    margin: 11px 0 0 !important;
  }
  .ok-hero-material__actions .ok-hero-button--primary {
    width: 158px !important;
    min-height: 42px !important;
    height: 42px !important;
    padding: 0 10px !important;
    border-radius: 14px !important;
    font-size: 12px !important;
  }
  .ok-hero-material--home .ok-hero-material__badge {
    left: 15px !important;
    top: auto !important;
    bottom: 16px !important;
    min-height: 45px !important;
    max-width: 185px !important;
    padding: 7px 11px !important;
    border-radius: 14px !important;
    font-size: 10px !important;
  }
  .ok-hero-material--home .ok-hero-material__badge b {
    font-size: 15px !important;
    line-height: 1.1 !important;
  }

  /* A real left-side category drawer instead of a full-screen panel. */
  .modal-menu { z-index: 1200 !important; }
  .modal-menu .ok-mobile-menu {
    width: min(88vw, 340px) !important;
    max-width: 88vw !important;
    height: 100dvh !important;
    border-radius: 0 22px 22px 0 !important;
    box-shadow: 18px 0 45px rgba(31,20,55,.18) !important;
  }
  .ok-mobile-menu__head { min-height: 66px !important; padding: 11px 14px !important; }
  .ok-mobile-menu__body { padding: 12px 14px calc(24px + env(safe-area-inset-bottom)) !important; }
  .ok-mobile-menu__home,
  .ok-mobile-menu__category {
    padding: 12px 4px !important;
    font-size: 14px !important;
  }
}

/* ===== OptoKAZ v32: AI inside search + complete mobile AI ===== */
.ok-header--material .ok-header__search .ok-search-shell {
  grid-template-columns: minmax(0, 1fr) 52px !important;
  gap: 8px !important;
}
.ok-header--material .ok-header__search .ok-search-shell > .ok-search {
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
}
.ok-header--material .ok-header__search .ok-search-shell .ok-search__input {
  padding-right: 132px !important;
}
.ok-header--material .ok-header__search .ok-search-shell .ok-ai-search-trigger {
  position: absolute !important;
  z-index: 4 !important;
  top: 50% !important;
  right: 57px !important;
  width: 62px !important;
  min-width: 62px !important;
  height: 36px !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 0 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  border: 1px solid rgba(112,75,230,.14) !important;
  border-radius: 13px !important;
  background: linear-gradient(135deg, #f2edff, #e9e1ff) !important;
  color: #6b48df !important;
  box-shadow: none !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  transform: translateY(-50%) !important;
  cursor: pointer !important;
}
.ok-header--material .ok-header__search .ok-search-shell .ok-ai-search-trigger:hover {
  border-color: rgba(112,75,230,.28) !important;
  background: linear-gradient(135deg, #ebe3ff, #dfd3ff) !important;
  transform: translateY(-50%) scale(1.02) !important;
}
.ok-header--material .ok-header__search .ok-search-shell .ok-ai-search-trigger:focus-visible {
  outline: 3px solid rgba(112,75,230,.18) !important;
  outline-offset: 2px !important;
}
.ok-header--material .ok-header__search .ok-search-shell .ok-ai-search-trigger svg {
  width: 15px !important;
  height: 15px !important;
  flex: 0 0 15px !important;
  fill: currentColor !important;
}
.ok-header--material .ok-header__search .ok-search-shell .ok-ai-search-trigger span {
  display: inline !important;
  color: inherit !important;
  white-space: nowrap !important;
}
.ok-header--material .ok-header__search .ok-search-shell .ok-ai-search-trigger:disabled {
  opacity: .58 !important;
  cursor: wait !important;
}
.ok-header--material .ok-header__search .ok-ai-search-results {
  position: absolute !important;
  z-index: 4900 !important;
  top: calc(100% + 10px) !important;
  left: 0 !important;
  right: 60px !important;
  width: auto !important;
  max-height: min(610px, calc(100vh - 150px)) !important;
  padding: 15px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  border: 1px solid #ded5ec !important;
  border-radius: 20px !important;
  background: rgba(255,255,255,.99) !important;
  box-shadow: 0 24px 65px rgba(42,25,76,.2) !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(-6px) !important;
}
.ok-header--material .ok-header__search .ok-ai-search-results.is-open {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
}

@media (max-width: 767px) {
  body.ok-ai-mobile-chat-open { overflow: hidden !important; }
  .ok-header--material .ok-header__search .ok-search-shell {
    grid-template-columns: minmax(0, 1fr) 40px !important;
    gap: 6px !important;
  }
  .ok-header--material .ok-header__search .ok-search-shell > .ok-search {
    height: 44px !important;
  }
  .ok-header--material .ok-header__search .ok-search-shell .ok-search__input {
    height: 42px !important;
    padding: 0 96px 0 15px !important;
    font-size: 13px !important;
  }
  .ok-header--material .ok-header__search .ok-search-shell .ok-ai-search-trigger {
    top: 50% !important;
    right: 45px !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 6px !important;
    gap: 3px !important;
    border-radius: 10px !important;
    font-size: 9px !important;
  }
  .ok-header--material .ok-header__search .ok-search-shell .ok-ai-search-trigger svg {
    width: 12px !important;
    height: 12px !important;
    flex-basis: 12px !important;
  }
  .ok-header--material .ok-header__search .ok-ai-search-results {
    display: block !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-height: calc(100dvh - 155px) !important;
    padding: 12px !important;
    border-radius: 17px !important;
  }
  .ok-header--material .ok-header__search .ok-ai-search-results:not(.is-open) {
    display: none !important;
  }
  .ok-ai-search-results__head { margin-bottom: 10px !important; }
  .ok-ai-search-results__head b { font-size: 14px !important; }
  .ok-ai-search-results__grid { grid-template-columns: 1fr !important; gap: 7px !important; }
  .ok-ai-product {
    padding: 7px !important;
    grid-template-columns: 52px minmax(0, 1fr) !important;
    gap: 9px !important;
    border-radius: 14px !important;
  }
  .ok-ai-product__image { width: 52px !important; height: 52px !important; border-radius: 10px !important; }
  .ok-ai-search-all { min-height: 38px !important; margin-top: 9px !important; }

  .ok-ai-assistant {
    z-index: 5200 !important;
    right: 12px !important;
    bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    display: flex !important;
    gap: 8px !important;
  }
  .ok-ai-assistant__toggle {
    width: 52px !important;
    min-width: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
    padding: 6px !important;
    justify-content: center !important;
    border-radius: 18px !important;
    box-shadow: 0 12px 30px rgba(75,45,153,.3) !important;
  }
  .ok-ai-assistant__toggle > span:last-child { display: none !important; }
  .ok-ai-assistant__spark {
    width: 40px !important;
    height: 40px !important;
    border-radius: 14px !important;
  }
  .ok-ai-assistant__panel {
    width: calc(100vw - 24px) !important;
    max-width: 430px !important;
    height: min(620px, calc(100dvh - 24px - env(safe-area-inset-bottom))) !important;
    max-height: calc(100dvh - 24px - env(safe-area-inset-bottom)) !important;
    border-radius: 21px !important;
    box-shadow: 0 24px 65px rgba(37,24,66,.28) !important;
  }
  .ok-ai-assistant__head { min-height: 58px !important; padding: 9px 11px !important; }
  .ok-ai-assistant__avatar { width: 36px !important; height: 36px !important; border-radius: 12px !important; }
  .ok-ai-assistant__messages { padding: 11px !important; gap: 8px !important; }
  .ok-ai-message { max-width: 92% !important; }
  .ok-ai-message__bubble { padding: 9px 10px !important; font-size: 12px !important; }
  .ok-ai-assistant__suggestions { padding: 0 9px 8px !important; }
  .ok-ai-assistant__form { padding: 9px !important; grid-template-columns: minmax(0, 1fr) 40px !important; }
  .ok-ai-assistant__form textarea { height: 40px !important; padding: 10px 11px !important; }
  .ok-ai-assistant__form button { width: 40px !important; height: 40px !important; border-radius: 12px !important; }
}

@media (max-width: 359px) {
  .ok-header--material .ok-header__search .ok-search-shell .ok-search__input {
    padding-right: 88px !important;
    font-size: 12px !important;
  }
  .ok-header--material .ok-header__search .ok-search-shell .ok-ai-search-trigger {
    right: 43px !important;
    width: 38px !important;
    min-width: 38px !important;
    padding-inline: 4px !important;
  }
}

@media (max-width: 359px) {
  .ok-hero-material,
  .ok-hero-material--home { min-height: 232px !important; height: 232px !important; }
  .ok-hero-material h1 { font-size: 22px !important; }
  .ok-hero-material__actions { margin-top: 9px !important; }
  .ok-hero-material--home .ok-hero-material__badge { bottom: 12px !important; }
}

/* ===== OptoKAZ v12: visible category drawer and mobile wishlist ===== */
@media (max-width: 767px) {
  /* The rendered menu contains both desktop navigation and the mobile drawer.
     Keep its wrapper alive, hide only the desktop navigation inside it. */
  .ok-header--material .ok-header__catalog-btn {
    position: fixed !important;
    z-index: 1200 !important;
    top: 0 !important;
    left: 0 !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    display: block !important;
    overflow: visible !important;
    pointer-events: none !important;
  }
  .ok-header--material .ok-header__catalog-btn > .ok-nav--material {
    display: none !important;
  }
  .ok-header--material .ok-header__catalog-btn .modal-menu {
    display: flex !important;
    pointer-events: auto !important;
  }

  /* Menu, centred logo, wishlist and cart in one clean row. */
  .ok-header--material .ok-header__main {
    grid-template-columns: 40px minmax(0, 1fr) 40px 40px !important;
    column-gap: 6px !important;
  }
  .ok-header--material .ok-logo {
    grid-column: 2 !important;
    min-width: 0 !important;
    justify-self: center !important;
  }
  .ok-header--material .ok-header__search {
    grid-column: 1 / -1 !important;
  }
  .ok-header--material .ok-header__actions {
    grid-column: 3 / 5 !important;
    grid-row: 1 !important;
    width: 86px !important;
    min-width: 86px !important;
    display: grid !important;
    grid-template-columns: repeat(2, 40px) !important;
    gap: 6px !important;
    align-items: center;
    justify-content: end;
  }
  .ok-header--material .ok-header__actions .ok-action,
  .ok-header--material .ok-header__actions .ok-action:first-child,
  .ok-header--material .ok-header__actions .ok-action:not(.ok-action--cart),
  .ok-header--material .ok-header__actions .ok-action--cart {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 13px !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .ok-header--material .ok-header__actions .ok-action__icon {
    width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
  }
  .ok-header--material .ok-header__actions .ok-action__icon svg {
    width: 23px !important;
    height: 23px !important;
    display: block !important;
    fill: none !important;
    stroke: #242031 !important;
    stroke-width: 1.8 !important;
  }
  .ok-header--material .ok-header__actions .ok-action__text { display: none !important; }
  .ok-header--material .ok-header__actions .ok-badge {
    top: -7px !important;
    right: -8px !important;
  }
}

@media (max-width: 390px) {
  .ok-header--material .ok-header__main {
    grid-template-columns: 38px minmax(0, 1fr) 38px 38px !important;
    column-gap: 4px !important;
  }
  .ok-header--material .ok-header__actions {
    width: 80px !important;
    min-width: 80px !important;
    grid-template-columns: repeat(2, 38px) !important;
    gap: 4px !important;
  }
  .ok-header--material .ok-header__actions .ok-action,
  .ok-header--material .ok-header__actions .ok-action:first-child,
  .ok-header--material .ok-header__actions .ok-action:not(.ok-action--cart),
  .ok-header--material .ok-header__actions .ok-action--cart {
    width: 38px !important;
    min-width: 38px !important;
  }
  .ok-header--material .ok-logo__text { font-size: 22px !important; }
}

/* ===== OptoKAZ v14: category picker from hero and denser wishlist ===== */
@media (max-width: 620px) {
  .ok-wishlist-page {
    padding-top: 4px !important;
    padding-bottom: 22px !important;
  }
  .ok-wishlist-heading {
    margin: 7px 0 14px !important;
    gap: 5px !important;
  }
  .ok-wishlist-heading h1 {
    margin: 0 !important;
    font-size: 30px !important;
    line-height: 1.05 !important;
    letter-spacing: -.6px;
  }
  .ok-wishlist-hint {
    max-width: 100% !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
  }
  .ok-wishlist-grid { gap: 8px !important; }

  #wishlist-container > div,
  #wishlist-container .ok-wishlist-card {
    min-height: 0 !important;
    height: auto !important;
    padding: 8px !important;
    grid-template-columns: 88px minmax(0, 1fr) !important;
    gap: 5px 9px !important;
    border-radius: 17px !important;
    box-shadow: 0 5px 17px rgba(59,37,112,.045) !important;
  }
  #wishlist-container a:has(> img),
  #wishlist-container .ok-wishlist-image,
  #wishlist-container img {
    width: 88px !important;
    height: 88px !important;
    min-height: 88px !important;
    max-height: 88px !important;
    border-radius: 13px !important;
  }
  #wishlist-container h2,
  #wishlist-container h3,
  #wishlist-container .ok-wishlist-name {
    min-height: 30px !important;
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
  }
  #wishlist-container p {
    font-size: 11px !important;
    line-height: 1.25 !important;
  }
  #wishlist-container [class*="text-2xl"],
  #wishlist-container [class*="text-3xl"] {
    font-size: 16px !important;
    line-height: 1.1 !important;
  }
  #wishlist-container button,
  #wishlist-container a[class*="bg-primary"],
  #wishlist-container .ok-wishlist-buy {
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 10px !important;
    border-radius: 11px !important;
    font-size: 12px !important;
    line-height: 36px !important;
  }
  #wishlist-container .ok-wishlist-remove {
    top: 6px !important;
    right: 6px !important;
    width: 29px !important;
    min-width: 29px !important;
    height: 29px !important;
    min-height: 29px !important;
    padding: 0 !important;
    line-height: 29px !important;
  }
}

/* ===== OptoKAZ v19: unit price is primary on every product card ===== */
.ok-product-card .ok-product-card__prices .ok-unit-price,
.ok-product-card--material .ok-product-card__prices .ok-unit-price,
.ok-catalog-grid .ok-product-card .ok-unit-price,
.ok-product-grid .ok-product-card .ok-unit-price,
.ok-search-page .ok-product-card .ok-unit-price,
.ok-wishlist-card .ok-unit-price {
  color: #5f3fd8 !important;
  font-size: 22px !important;
  line-height: 1.08 !important;
  font-weight: 950 !important;
  letter-spacing: -.35px !important;
}
.ok-product-card .ok-product-card__prices .ok-unit-price small,
.ok-product-card--material .ok-product-card__prices .ok-unit-price small,
.ok-catalog-grid .ok-product-card .ok-unit-price small,
.ok-product-grid .ok-product-card .ok-unit-price small,
.ok-search-page .ok-product-card .ok-unit-price small,
.ok-wishlist-card .ok-unit-price small {
  display: inline !important;
  margin: 0 0 0 3px !important;
  color: #3b3349 !important;
  font-size: 12px !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
}
.ok-product-card .ok-product-card__prices .ok-pack-price,
.ok-product-card--material .ok-product-card__prices .ok-pack-price,
.ok-catalog-grid .ok-product-card .ok-pack-price,
.ok-product-grid .ok-product-card .ok-pack-price,
.ok-search-page .ok-product-card .ok-pack-price,
.ok-wishlist-card .ok-pack-price,
.ok-product-card [data-price-product-id] {
  min-height: 0 !important;
  margin-top: 5px !important;
  color: #888191 !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}
.ok-product-card .ok-product-card__prices .ok-pack-price small,
.ok-product-card--material .ok-product-card__prices .ok-pack-price small,
.ok-catalog-grid .ok-product-card .ok-pack-price small,
.ok-product-grid .ok-product-card .ok-pack-price small,
.ok-search-page .ok-product-card .ok-pack-price small,
.ok-wishlist-card .ok-pack-price small,
.ok-product-card [data-price-product-id] small {
  display: inline !important;
  margin: 0 0 0 3px !important;
  color: #aaa3b1 !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  font-weight: 500 !important;
}
.ok-product-pricebox__unit {
  color: #5f3fd8 !important;
  font-weight: 950 !important;
}
.ok-product-pricebox__pack,
.ok-product-pricebox__pack span,
.ok-product-pricebox__pack small {
  color: #888191 !important;
  font-weight: 500 !important;
}
@media (max-width: 767px) {
  .ok-product-card .ok-product-card__prices .ok-unit-price,
  .ok-product-card--material .ok-product-card__prices .ok-unit-price,
  .ok-catalog-grid .ok-product-card .ok-unit-price,
  .ok-product-grid .ok-product-card .ok-unit-price,
  .ok-search-page .ok-product-card .ok-unit-price,
  .ok-wishlist-card .ok-unit-price {
    font-size: 18px !important;
    font-weight: 950 !important;
  }
  .ok-product-card .ok-product-card__prices .ok-unit-price small,
  .ok-product-card--material .ok-product-card__prices .ok-unit-price small,
  .ok-catalog-grid .ok-product-card .ok-unit-price small,
  .ok-product-grid .ok-product-card .ok-unit-price small,
  .ok-search-page .ok-product-card .ok-unit-price small,
  .ok-wishlist-card .ok-unit-price small {
    font-size: 10px !important;
    font-weight: 800 !important;
  }
  .ok-product-card .ok-product-card__prices .ok-pack-price,
  .ok-product-card--material .ok-product-card__prices .ok-pack-price,
  .ok-catalog-grid .ok-product-card .ok-pack-price,
  .ok-product-grid .ok-product-card .ok-pack-price,
  .ok-search-page .ok-product-card .ok-pack-price,
  .ok-wishlist-card .ok-pack-price,
  .ok-product-card [data-price-product-id] {
    margin-top: 4px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
  }
  .ok-product-card .ok-product-card__prices .ok-pack-price small,
  .ok-product-card--material .ok-product-card__prices .ok-pack-price small,
  .ok-catalog-grid .ok-product-card .ok-pack-price small,
  .ok-product-grid .ok-product-card .ok-pack-price small,
  .ok-search-page .ok-product-card .ok-pack-price small,
  .ok-wishlist-card .ok-pack-price small,
  .ok-product-card [data-price-product-id] small {
    font-size: 9px !important;
    font-weight: 500 !important;
  }
}

/* ===== OptoKAZ v22: compact price-list action inside the mobile hero ===== */
@media (max-width: 767px) {
  .ok-hero-material--home .ok-hero-material__actions {
    width: min(225px, 67vw) !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr) !important;
    align-items: stretch !important;
    gap: 6px !important;
  }
  .ok-hero-material--home .ok-hero-material__actions .ok-hero-button--primary,
  .ok-hero-material--home .ok-hero-material__actions .ok-hero-button--price {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 7px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 14px !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 850 !important;
    white-space: nowrap !important;
  }
  .ok-hero-material--home .ok-hero-material__actions .ok-hero-button--price {
    border: 1px solid rgba(111,77,230,.22) !important;
    background: rgba(255,255,255,.91) !important;
    color: #6543d8 !important;
    box-shadow: 0 7px 18px rgba(71,49,120,.08) !important;
    backdrop-filter: blur(7px);
  }
}

@media (max-width: 359px) {
  .ok-hero-material--home .ok-hero-material__actions {
    width: min(205px, 68vw) !important;
    gap: 5px !important;
  }
  .ok-hero-material--home .ok-hero-material__actions .ok-hero-button--primary,
  .ok-hero-material--home .ok-hero-material__actions .ok-hero-button--price {
    padding-inline: 5px !important;
    font-size: 10px !important;
  }
}

/* ===== OptoKAZ v23: mobile price list beside the minimum-order card ===== */
.ok-hero-material__bottom-row { display: contents; }
.ok-hero-mobile-price { display: none; }

@media (max-width: 767px) {
  .ok-hero-material--home .ok-hero-material__actions {
    width: 158px !important;
    display: block !important;
    grid-template-columns: 1fr !important;
  }
  .ok-hero-material--home .ok-hero-material__actions .ok-hero-button--price-desktop {
    display: none !important;
  }
  .ok-hero-material--home .ok-hero-material__bottom-row {
    position: absolute !important;
    z-index: 4 !important;
    left: 15px !important;
    right: auto !important;
    bottom: 16px !important;
    width: auto !important;
    max-width: calc(100% - 30px) !important;
    display: flex !important;
    align-items: stretch !important;
    gap: 7px !important;
  }
  .ok-hero-material--home .ok-hero-material__bottom-row .ok-hero-material__badge {
    position: static !important;
    inset: auto !important;
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 180px !important;
    min-height: 45px !important;
    margin: 0 !important;
    padding: 7px 11px !important;
  }
  .ok-hero-material--home .ok-hero-mobile-price {
    flex: 0 0 auto !important;
    min-width: 88px !important;
    min-height: 45px !important;
    height: auto !important;
    padding: 0 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(111,77,230,.22) !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.91) !important;
    color: #6543d8 !important;
    box-shadow: 0 7px 18px rgba(71,49,120,.08) !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 850 !important;
    white-space: nowrap !important;
    backdrop-filter: blur(7px);
  }
}

@media (max-width: 359px) {
  .ok-hero-material--home .ok-hero-material__bottom-row {
    left: 13px !important;
    bottom: 12px !important;
    max-width: calc(100% - 26px) !important;
    gap: 5px !important;
  }
  .ok-hero-material--home .ok-hero-material__bottom-row .ok-hero-material__badge {
    padding-inline: 9px !important;
    font-size: 9px !important;
  }
  .ok-hero-material--home .ok-hero-material__bottom-row .ok-hero-material__badge b {
    font-size: 14px !important;
  }
  .ok-hero-material--home .ok-hero-mobile-price {
    min-width: 80px !important;
    padding-inline: 9px !important;
    font-size: 10px !important;
  }
}

/* v23 mobile filter cascade guard. */
@media (max-width: 767px) {
  .ok-header--material .ok-header__search .ok-search-shell {
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 40px !important;
    gap: 6px !important;
    align-items: center !important;
  }
  .ok-header--material .ok-header__search .ok-search-shell .ok-search {
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
  }
  .ok-header--material .ok-header__search .ok-search-shell .ok-search__input {
    width: 100% !important;
    height: 42px !important;
    padding: 0 47px 0 15px !important;
  }
  .ok-header--material .ok-header__search .ok-search-shell .ok-search__button {
    position: absolute !important;
    top: 4px !important;
    right: 4px !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .ok-header--material .ok-header__search .ok-filter-trigger {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
  }
  .ok-header--material .ok-header__search .ok-filter-popover {
    position: absolute !important;
    z-index: 1500 !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 170px) !important;
    margin: 0 !important;
    padding: 14px !important;
    overflow-y: auto !important;
    border: 1px solid #ddd3ed !important;
    border-radius: 20px !important;
    background: rgba(255,255,255,.99) !important;
    box-shadow: 0 18px 45px rgba(42,27,77,.17) !important;
    transform: translateY(-6px) !important;
  }
  .ok-header--material .ok-header__search .ok-filter-popover.is-open {
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
  .ok-header--material .ok-header__search .ok-filter-popover__head {
    min-height: 34px !important;
    margin: 0 0 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    color: #252031 !important;
    font-size: 17px !important;
    line-height: 1.2 !important;
  }
  .ok-header--material .ok-header__search .ok-filter-popover .ok-filter-close {
    position: static !important;
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: #eee8ff !important;
    color: #6f4de6 !important;
    font-size: 20px !important;
    line-height: 1 !important;
  }
  .ok-header--material .ok-header__search .ok-filter-popover .ok-filter-sort,
  .ok-header--material .ok-header__search .ok-filter-popover .ok-filter-prices,
  .ok-header--material .ok-header__search .ok-filter-popover .ok-filter-actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .ok-header--material .ok-header__search .ok-filter-popover .ok-filter-prices {
    margin: 10px 0 0 !important;
  }
  .ok-header--material .ok-header__search .ok-filter-popover .ok-filter-actions {
    grid-template-columns: .85fr 1.15fr !important;
    margin: 11px 0 0 !important;
  }
  .ok-header--material .ok-header__search .ok-filter-popover .ok-filter-sort button,
  .ok-header--material .ok-header__search .ok-filter-popover .ok-filter-actions button {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #ded5ed !important;
    border-radius: 13px !important;
    background: #faf8ff !important;
    color: #4f485d !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
  }
  .ok-header--material .ok-header__search .ok-filter-popover .ok-filter-sort button.is-selected {
    border-color: #7554e3 !important;
    background: #eee8ff !important;
    color: #6543d8 !important;
  }
  .ok-header--material .ok-header__search .ok-filter-popover .ok-filter-prices label {
    min-width: 0 !important;
    display: grid !important;
    gap: 5px !important;
  }
  .ok-header--material .ok-header__search .ok-filter-popover .ok-filter-prices label span {
    color: #777083 !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: 750 !important;
  }
  .ok-header--material .ok-header__search .ok-filter-popover .ok-filter-prices input {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 11px !important;
    border: 1px solid #ded5ed !important;
    border-radius: 13px !important;
    background: #fff !important;
    color: #282235 !important;
    font-size: 16px !important;
    line-height: 42px !important;
  }
  .ok-header--material .ok-header__search .ok-filter-popover .ok-filter-reset {
    border-color: transparent !important;
    background: #f2eef8 !important;
    color: #5f586c !important;
  }
  .ok-header--material .ok-header__search .ok-filter-popover .ok-filter-apply {
    border-color: transparent !important;
    background: linear-gradient(135deg, #6f4de6, #805eea) !important;
    color: #fff !important;
  }
}

/* ===== OptoKAZ v24: WhatsApp contact and mobile contact pill ===== */
.ok-topbar__wa {
  min-height: 28px;
  padding: 4px 11px 4px 8px;
  gap: 6px;
  border: 1px solid rgba(24, 168, 79, .18);
  border-radius: 999px;
  background: rgba(37, 211, 102, .09);
  color: #139447 !important;
  font-weight: 850 !important;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.ok-topbar__wa:hover {
  border-color: rgba(24, 168, 79, .34);
  background: rgba(37, 211, 102, .15);
  color: #0e7f3a !important;
  transform: translateY(-1px);
}
.ok-topbar--material .ok-topbar__wa .ok-whatsapp-icon {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ok-whatsapp-label {
  display: inline-block;
  transform-origin: center;
  animation: okWhatsAppPulse 1.9s ease-in-out infinite;
}
.ok-mobile-whatsapp-wrap { display: none; }

@keyframes okWhatsAppPulse {
  0%, 100% { transform: scale(1); opacity: 1; text-shadow: 0 0 0 rgba(19,148,71,0); }
  50% { transform: scale(1.045); opacity: .82; text-shadow: 0 0 10px rgba(19,148,71,.22); }
}

@media (max-width: 767px) {
  .ok-mobile-whatsapp-wrap {
    display: block !important;
    margin-top: 8px;
  }
  .ok-mobile-whatsapp {
    width: 100%;
    min-height: 48px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto 18px;
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    overflow: hidden;
    border: 1px solid rgba(24, 168, 79, .18);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(232,250,239,.96), rgba(247,255,250,.98));
    color: #126b36 !important;
    box-shadow: 0 7px 20px rgba(21,128,61,.07);
  }
  .ok-mobile-whatsapp:active { transform: scale(.985); }
  .ok-mobile-whatsapp__icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: #25d366;
    color: #fff;
    box-shadow: 0 6px 14px rgba(37,211,102,.22);
  }
  .ok-mobile-whatsapp__icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .ok-mobile-whatsapp__content {
    min-width: 0;
    display: grid;
    gap: 1px;
    line-height: 1.1;
  }
  .ok-mobile-whatsapp__content strong {
    width: max-content;
    color: #109348;
    font-size: 13px;
    font-weight: 900;
  }
  .ok-mobile-whatsapp__content small {
    color: #678170;
    font-size: 9px;
    font-weight: 650;
  }
  .ok-mobile-whatsapp__number {
    color: #24352a;
    font-size: 11px;
    font-weight: 850;
    white-space: nowrap;
  }
  .ok-mobile-whatsapp__arrow {
    color: #16a34a;
    font-size: 24px;
    line-height: 1;
  }
}

@media (max-width: 380px) {
  .ok-mobile-whatsapp {
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: 7px;
    padding-inline: 8px;
  }
  .ok-mobile-whatsapp__icon { width: 32px; height: 32px; }
  .ok-mobile-whatsapp__number { font-size: 10px; }
  .ok-mobile-whatsapp__arrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ok-whatsapp-label { animation: none; }
}

/* ===== OptoKAZ v25: automatic 30-day new-product badge ===== */
.ok-new-badge {
  position: absolute;
  z-index: 4;
  top: 14px;
  left: 14px;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 11px;
  border: 1px solid rgba(255,255,255,.52);
  border-radius: 10px;
  background: linear-gradient(135deg, #6f4de6, #956ff1);
  color: #fff;
  box-shadow: 0 8px 18px rgba(111,77,230,.24);
  font-size: 10px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: .075em;
}
.ok-sale-badge--under-new { top: 50px !important; }
.ok-home-latest + .ok-home-recommended { padding-top: 34px; }

@media (max-width: 767px) {
  .ok-home-latest,
  .ok-home-recommended { width: calc(100% - 24px) !important; }
  .ok-home-latest .ok-section__head,
  .ok-home-recommended .ok-section__head { margin-bottom: 12px !important; }
  .ok-home-latest .ok-section__title,
  .ok-home-recommended .ok-section__title {
    font-size: 25px !important;
    line-height: 1.08 !important;
  }
  .ok-home-latest .ok-eyebrow { font-size: 9px !important; }
  .ok-new-badge {
    top: 10px;
    left: 10px;
    min-height: 24px;
    padding-inline: 8px;
    border-radius: 8px;
    font-size: 8px;
  }
  .ok-sale-badge--under-new { top: 40px !important; }
  .ok-home-latest + .ok-home-recommended { padding-top: 25px; }
}

/* ===== OptoKAZ v29: compact mobile hero ===== */
.ok-hero-material h1 .ok-hero-title-main { color: #1d1a2b !important; }
.ok-hero-material h1 .ok-hero-title-accent { color: var(--ok-primary) !important; }

@media (max-width: 767px) {
  .ok-home-hero { padding-top: 8px !important; }
  .ok-hero-material--home {
    min-height: 210px !important;
    height: 210px !important;
    padding: 13px 12px !important;
    border-radius: 19px !important;
  }
  .ok-hero-material--home .ok-hero-material__content {
    width: 64% !important;
    max-width: 212px !important;
  }
  .ok-hero-material--home h1 {
    max-width: 212px !important;
    font-size: 23px !important;
    line-height: .99 !important;
    letter-spacing: -.7px !important;
    font-weight: 950 !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.42);
  }
  .ok-hero-material--home h1 .ok-hero-title-main {
    display: block;
    white-space: nowrap;
  }
  .ok-hero-material--home h1 .ok-hero-title-accent {
    display: block;
    margin-top: 5px;
  }
  .ok-hero-material--home .ok-hero-material__actions {
    width: 134px !important;
    margin-top: 27px !important;
  }
  .ok-hero-material--home .ok-hero-material__actions .ok-hero-button--primary {
    width: 134px !important;
    min-height: 35px !important;
    height: 35px !important;
    padding: 0 8px !important;
    border-radius: 12px !important;
    font-size: 10px !important;
  }
  .ok-hero-material--home .ok-hero-material__bottom-row {
    left: 12px !important;
    bottom: 10px !important;
    max-width: calc(100% - 24px) !important;
    gap: 5px !important;
  }
  .ok-hero-material--home .ok-hero-mobile-price {
    order: 1;
    min-width: 74px !important;
    min-height: 38px !important;
    padding: 0 8px !important;
    border-radius: 12px !important;
    font-size: 9px !important;
  }
  .ok-hero-material--home .ok-hero-material__bottom-row .ok-hero-material__badge {
    order: 2;
    max-width: 132px !important;
    min-height: 38px !important;
    padding: 5px 8px !important;
    border-radius: 12px !important;
    font-size: 8px !important;
    line-height: 1.05 !important;
  }
  .ok-hero-material--home .ok-hero-material__bottom-row .ok-hero-material__badge b {
    margin-top: 2px !important;
    font-size: 12px !important;
    line-height: 1.05 !important;
  }
}

@media (max-width: 359px) {
  .ok-hero-material--home {
    min-height: 202px !important;
    height: 202px !important;
    padding-inline: 11px !important;
  }
  .ok-hero-material--home .ok-hero-material__content {
    width: 66% !important;
    max-width: 198px !important;
  }
  .ok-hero-material--home h1 {
    max-width: 198px !important;
    font-size: 21px !important;
  }
  .ok-hero-material--home .ok-hero-material__actions { margin-top: 24px !important; }
  .ok-hero-material--home .ok-hero-material__actions,
  .ok-hero-material--home .ok-hero-material__actions .ok-hero-button--primary {
    width: 128px !important;
  }
  .ok-hero-material--home .ok-hero-material__actions .ok-hero-button--primary {
    min-height: 33px !important;
    height: 33px !important;
    font-size: 9px !important;
  }
  .ok-hero-material--home .ok-hero-material__bottom-row {
    left: 11px !important;
    bottom: 9px !important;
  }
  .ok-hero-material--home .ok-hero-mobile-price {
    min-width: 69px !important;
    min-height: 36px !important;
    font-size: 8px !important;
  }
  .ok-hero-material--home .ok-hero-material__bottom-row .ok-hero-material__badge {
    max-width: 124px !important;
    min-height: 36px !important;
    padding-inline: 7px !important;
  }
  .ok-hero-material--home .ok-hero-material__bottom-row .ok-hero-material__badge b {
    font-size: 11px !important;
  }
}

/* ===== OptoKAZ v33: animated AI mode in desktop and mobile search ===== */
.ok-header--material .ok-header__search .ok-search-shell .ok-search__input {
  padding-right: 194px !important;
}

.ok-header--material .ok-header__search .ok-search-shell .ok-ai-search-trigger {
  isolation: isolate !important;
  overflow: hidden !important;
  right: 57px !important;
  width: 120px !important;
  min-width: 120px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 13px !important;
  gap: 7px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #fff !important;
  box-shadow: 0 7px 17px rgba(32,29,43,.2), inset 0 0 0 1px rgba(255,255,255,.15) !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  letter-spacing: -.01em !important;
}

.ok-header--material .ok-header__search .ok-search-shell .ok-ai-search-trigger::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: 190%;
  aspect-ratio: 1;
  background: conic-gradient(from 0deg, #39d7ff, #6b54ff, #ef4fd2, #ffd73f, #24dc8d, #39d7ff);
  filter: saturate(1.12);
  transform: translate(-50%, -50%) rotate(0deg);
  animation: ok-ai-border-orbit 2.8s linear infinite;
}

.ok-header--material .ok-header__search .ok-search-shell .ok-ai-search-trigger::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 2px;
  border-radius: inherit;
  background: linear-gradient(180deg, #656970 0%, #4e5159 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
}

.ok-header--material .ok-header__search .ok-search-shell .ok-ai-search-trigger > svg,
.ok-header--material .ok-header__search .ok-search-shell .ok-ai-search-trigger > span {
  position: relative !important;
  z-index: 2 !important;
}

.ok-header--material .ok-header__search .ok-search-shell .ok-ai-search-trigger svg {
  width: 17px !important;
  height: 17px !important;
  flex: 0 0 17px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.ok-header--material .ok-header__search .ok-search-shell .ok-ai-search-trigger:hover {
  color: #fff !important;
  background: transparent !important;
  box-shadow: 0 9px 22px rgba(66,48,121,.27), inset 0 0 0 1px rgba(255,255,255,.18) !important;
  transform: translateY(-50%) scale(1.025) !important;
}

.ok-header--material .ok-header__search .ok-search-shell .ok-ai-search-trigger:focus-visible {
  outline: 3px solid rgba(112,75,230,.24) !important;
  outline-offset: 2px !important;
}

@keyframes ok-ai-border-orbit {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@media (max-width: 767px) {
  .ok-header--material .ok-header__search .ok-search-shell .ok-search__input {
    padding-right: 148px !important;
  }
  .ok-header--material .ok-header__search .ok-search-shell .ok-ai-search-trigger {
    right: 45px !important;
    width: 91px !important;
    min-width: 91px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 9px !important;
    gap: 5px !important;
    font-size: 9px !important;
  }
  .ok-header--material .ok-header__search .ok-search-shell .ok-ai-search-trigger svg {
    width: 14px !important;
    height: 14px !important;
    flex-basis: 14px !important;
  }
  .ok-ai-assistant {
    display: flex !important;
    visibility: visible !important;
  }
}

@media (max-width: 359px) {
  .ok-header--material .ok-header__search .ok-search-shell .ok-search__input {
    padding-right: 137px !important;
  }
  .ok-header--material .ok-header__search .ok-search-shell .ok-ai-search-trigger {
    right: 43px !important;
    width: 81px !important;
    min-width: 81px !important;
    padding-inline: 7px !important;
    gap: 4px !important;
    font-size: 8px !important;
  }
  .ok-header--material .ok-header__search .ok-search-shell .ok-ai-search-trigger svg {
    width: 13px !important;
    height: 13px !important;
    flex-basis: 13px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ok-header--material .ok-header__search .ok-search-shell .ok-ai-search-trigger::before {
    animation: none !important;
  }
}

/* ===== OptoKAZ v34: mobile AI chat repair + AI magnifier ===== */
.ok-header--material .ok-header__search .ok-search-shell .ok-ai-search-trigger.is-loading svg {
  animation: ok-ai-spin 1.1s linear infinite !important;
}

@media (max-width: 767px) {
  .ok-ai-assistant,
  .ok-ai-assistant * {
    box-sizing: border-box !important;
  }

  .ok-ai-assistant {
    position: fixed !important;
    z-index: 5200 !important;
    right: 12px !important;
    bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    display: flex !important;
    align-items: flex-end !important;
    flex-direction: column !important;
    gap: 8px !important;
    visibility: visible !important;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  .ok-ai-assistant__toggle {
    width: 50px !important;
    min-width: 50px !important;
    height: 50px !important;
    min-height: 50px !important;
    margin: 0 !important;
    padding: 5px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 17px !important;
    background: linear-gradient(135deg, #6843db, #875ff1) !important;
    color: #fff !important;
    box-shadow: 0 12px 30px rgba(75,45,153,.32) !important;
    cursor: pointer !important;
  }
  .ok-ai-assistant__toggle > span:last-child { display: none !important; }
  .ok-ai-assistant__spark {
    width: 40px !important;
    height: 40px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 13px !important;
    background: rgba(255,255,255,.16) !important;
    color: #fff !important;
    font-size: 20px !important;
    line-height: 1 !important;
    animation: ok-ai-pulse 2.2s ease-in-out infinite !important;
  }

  .ok-ai-assistant__panel {
    width: calc(100vw - 24px) !important;
    max-width: 430px !important;
    height: min(520px, calc(100dvh - 92px - env(safe-area-inset-bottom))) !important;
    min-height: min(360px, calc(100dvh - 92px - env(safe-area-inset-bottom))) !important;
    margin: 0 !important;
    padding: 0 !important;
    display: none !important;
    grid-template-rows: 58px minmax(0, 1fr) auto 60px !important;
    overflow: hidden !important;
    border: 1px solid #ded4ec !important;
    border-radius: 21px !important;
    background: #fff !important;
    box-shadow: 0 24px 65px rgba(37,24,66,.28) !important;
  }
  .ok-ai-assistant.is-open .ok-ai-assistant__panel {
    display: grid !important;
    animation: ok-ai-rise .2s ease both !important;
  }
  .ok-ai-assistant.is-open .ok-ai-assistant__toggle { display: none !important; }

  .ok-ai-assistant__head {
    grid-row: 1 !important;
    min-width: 0 !important;
    min-height: 58px !important;
    padding: 9px 11px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    border-bottom: 1px solid #eee8f5 !important;
    background: linear-gradient(135deg, #fbf9ff, #f4efff) !important;
  }
  .ok-ai-assistant__head > div {
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
  }
  .ok-ai-assistant__head > div > span:last-child {
    min-width: 0 !important;
    display: grid !important;
    gap: 2px !important;
  }
  .ok-ai-assistant__head b {
    overflow: hidden !important;
    color: #252030 !important;
    font-size: 13px !important;
    line-height: 1.15 !important;
    font-weight: 850 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .ok-ai-assistant__head small {
    overflow: hidden !important;
    color: #8b8296 !important;
    font-size: 9px !important;
    line-height: 1.15 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .ok-ai-assistant__avatar {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #6e49df, #8b67ed) !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 900 !important;
  }
  .ok-ai-assistant .ok-ai-close {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: #eee8fa !important;
    color: #665b75 !important;
    font: 500 22px/1 Arial, sans-serif !important;
  }

  .ok-ai-assistant__messages {
    grid-row: 2 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 11px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: #fdfcff !important;
  }
  .ok-ai-message {
    width: auto !important;
    max-width: 92% !important;
    display: grid !important;
    gap: 6px !important;
  }
  .ok-ai-message--assistant { align-self: flex-start !important; }
  .ok-ai-message--user { align-self: flex-end !important; }
  .ok-ai-message__bubble {
    padding: 9px 10px !important;
    border-radius: 14px 14px 14px 5px !important;
    background: #f0ebfa !important;
    color: #3d3648 !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
  }
  .ok-ai-message--user .ok-ai-message__bubble {
    border-radius: 14px 14px 5px 14px !important;
    background: linear-gradient(135deg, #704be6, #835def) !important;
    color: #fff !important;
  }
  .ok-ai-message__products { display: grid !important; gap: 6px !important; }

  .ok-ai-assistant__suggestions {
    grid-row: 3 !important;
    min-width: 0 !important;
    padding: 0 9px 8px !important;
    display: flex !important;
    gap: 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    background: #fdfcff !important;
    scrollbar-width: none !important;
  }
  .ok-ai-assistant__suggestions[hidden] { display: none !important; }
  .ok-ai-assistant__suggestions button {
    min-width: max-content !important;
    min-height: 30px !important;
    padding: 6px 9px !important;
    border: 1px solid #ddd3ef !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #6544dd !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
    font-weight: 750 !important;
  }

  .ok-ai-assistant__form {
    grid-row: 4 !important;
    min-width: 0 !important;
    min-height: 60px !important;
    margin: 0 !important;
    padding: 9px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 40px !important;
    align-items: center !important;
    gap: 7px !important;
    border-top: 1px solid #eee8f5 !important;
    background: #fff !important;
  }
  .ok-ai-assistant__form textarea {
    width: 100% !important;
    min-width: 0 !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 82px !important;
    margin: 0 !important;
    padding: 10px 11px !important;
    resize: none !important;
    border: 1px solid #ddd4ea !important;
    border-radius: 12px !important;
    outline: 0 !important;
    background: #fff !important;
    color: #312a3d !important;
    box-shadow: none !important;
    font: 12px/1.4 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  }
  .ok-ai-assistant__form textarea::placeholder { color: #9a93a3 !important; opacity: 1 !important; }
  .ok-ai-assistant__form button {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #704be6, #835def) !important;
    color: #fff !important;
    font-size: 18px !important;
    line-height: 1 !important;
  }

  .ok-ai-assistant .ok-ai-product,
  .ok-ai-search-results .ok-ai-product {
    min-width: 0 !important;
    padding: 7px !important;
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) !important;
    gap: 9px !important;
    align-items: center !important;
    border: 1px solid #ebe4f5 !important;
    border-radius: 14px !important;
    background: #fff !important;
    color: inherit !important;
    text-decoration: none !important;
  }
  .ok-ai-assistant .ok-ai-product__image,
  .ok-ai-search-results .ok-ai-product__image {
    width: 52px !important;
    height: 52px !important;
    object-fit: contain !important;
    border-radius: 10px !important;
    background: #fff !important;
  }
  .ok-ai-product__body { min-width: 0 !important; display: grid !important; gap: 2px !important; }
  .ok-ai-product__name { overflow: hidden !important; font-size: 11px !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
  .ok-ai-product__meta { overflow: hidden !important; color: #898194 !important; font-size: 9px !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
  .ok-ai-product__price { color: #6544dd !important; font-size: 12px !important; }

  .ok-ai-search-results__head {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }
  .ok-ai-search-results__head > div { min-width: 0 !important; display: grid !important; gap: 2px !important; }
  .ok-ai-kicker { color: #704be6 !important; font-size: 9px !important; font-weight: 900 !important; }
  .ok-ai-search-status,
  .ok-ai-search-error,
  .ok-ai-search-empty { padding: 18px 10px !important; color: #71697c !important; font-size: 12px !important; text-align: center !important; }
}

@media (max-width: 359px) {
  .ok-ai-assistant__panel {
    height: min(470px, calc(100dvh - 82px - env(safe-area-inset-bottom))) !important;
    grid-template-rows: 54px minmax(0, 1fr) auto 56px !important;
    border-radius: 18px !important;
  }
  .ok-ai-assistant__head { min-height: 54px !important; padding: 8px 9px !important; }
  .ok-ai-assistant__form { min-height: 56px !important; padding: 7px !important; }
}

/* ===== OptoKAZ v35: exact magnifier-and-star AI icon ===== */
.ok-header--material .ok-header__search .ok-search-shell .ok-ai-search-trigger {
  font-weight: 650 !important;
}
.ok-header--material .ok-header__search .ok-search-shell .ok-ai-search-trigger svg.ok-ai-mode-icon {
  width: 22px !important;
  min-width: 22px !important;
  height: 22px !important;
  flex: 0 0 22px !important;
  overflow: visible !important;
  fill: none !important;
  stroke: none !important;
}
.ok-header--material .ok-header__search .ok-search-shell .ok-ai-search-trigger .ok-ai-mode-icon__glass {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.8 !important;
}
.ok-header--material .ok-header__search .ok-search-shell .ok-ai-search-trigger .ok-ai-mode-icon__handle {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 3.2 !important;
  stroke-linecap: square !important;
  stroke-linejoin: round !important;
}
.ok-header--material .ok-header__search .ok-search-shell .ok-ai-search-trigger .ok-ai-mode-icon__star {
  fill: currentColor !important;
  stroke: none !important;
}

@media (max-width: 767px) {
  .ok-header--material .ok-header__search .ok-search-shell .ok-ai-search-trigger {
    gap: 4px !important;
    font-weight: 650 !important;
  }
  .ok-header--material .ok-header__search .ok-search-shell .ok-ai-search-trigger svg.ok-ai-mode-icon {
    width: 18px !important;
    min-width: 18px !important;
    height: 18px !important;
    flex-basis: 18px !important;
  }
}

@media (max-width: 359px) {
  .ok-header--material .ok-header__search .ok-search-shell .ok-ai-search-trigger svg.ok-ai-mode-icon {
    width: 16px !important;
    min-width: 16px !important;
    height: 16px !important;
    flex-basis: 16px !important;
  }
}

/* ===== OptoKAZ v36: clean AI stars without magnifier ===== */
.ok-header--material .ok-header__search .ok-search-shell .ok-ai-search-trigger svg.ok-ai-mode-icon--stars {
  fill: none !important;
  stroke: none !important;
}
.ok-header--material .ok-header__search .ok-search-shell .ok-ai-search-trigger .ok-ai-mode-icon--stars .ok-ai-mode-icon__star {
  fill: currentColor !important;
  stroke: none !important;
}
.ok-header--material .ok-header__search .ok-search-shell .ok-ai-search-trigger .ok-ai-mode-icon__star--small {
  opacity: .88 !important;
}

/* ===== OptoKAZ v38: branded purple AI mode button ===== */
.ok-header--material .ok-header__search .ok-search-shell .ok-ai-search-trigger {
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(105,71,223,.26), inset 0 0 0 1px rgba(255,255,255,.15) !important;
}
.ok-header--material .ok-header__search .ok-search-shell .ok-ai-search-trigger::after {
  background: linear-gradient(135deg, #6847dc 0%, #7952e8 52%, #895ff0 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(61,32,145,.16) !important;
}
.ok-header--material .ok-header__search .ok-search-shell .ok-ai-search-trigger:hover {
  color: #fff !important;
  box-shadow: 0 10px 25px rgba(105,71,223,.36), inset 0 0 0 1px rgba(255,255,255,.18) !important;
}
.ok-header--material .ok-header__search .ok-search-shell .ok-ai-search-trigger:active {
  box-shadow: 0 5px 14px rgba(105,71,223,.27), inset 0 0 0 1px rgba(255,255,255,.16) !important;
}

/* ===== OptoKAZ v39: header overlays above display settings bar ===== */
/*
   Fixes the desktop category dropdown (and other header popovers) being
   covered by the "Настройки отображения" accessibility strip.
   The header is raised only while a popup is open, so normal modals/cart
   keep their own stacking behavior when the header is idle.
*/
@supports selector(:has(*)) {
  .ok-header--material:has(.ok-catalog-dropdown.ok-desktop-catalog-open),
  .ok-header--material:has(.ok-filter-popover.is-open),
  .ok-header--material:has(.ok-ai-search-results.is-open) {
    z-index: 12000 !important;
  }
}

.ok-header--material .ok-catalog-dropdown.ok-desktop-catalog-open {
  z-index: 12020 !important;
}
.ok-header--material .ok-catalog-submenu {
  z-index: 12030 !important;
}
.ok-header--material .ok-header__search .ok-filter-popover.is-open {
  z-index: 12040 !important;
}
.ok-header--material .ok-header__search .ok-ai-search-results.is-open {
  z-index: 12050 !important;
}

/* Mobile category drawer is moved to <body> by header.twig, so it needs
   its own stacking level above the display-settings strip. */
@media (max-width: 767px) {
  body > .modal-menu.modal-container.modal-overlay_active,
  .modal-menu.modal-container.modal-overlay_active {
    z-index: 12050 !important;
  }

  body > .modal-menu.modal-container.modal-overlay_active .modal-content,
  body > .modal-menu.modal-container.modal-overlay_active .ok-mobile-menu,
  .modal-menu.modal-container.modal-overlay_active .modal-content,
  .modal-menu.modal-container.modal-overlay_active .ok-mobile-menu {
    z-index: 12060 !important;
  }
}

/* ===== OptoKAZ v40: cart drawer above floating UI ===== */
/*
   When the side cart is open, the cart overlay/drawer must be above
   accessibility controls, AI assistant and other fixed helpers.
   No cart layout or behavior is changed.
*/
.modal-cart.modal-overlay_active {
  z-index: 20000 !important;
}

.modal-cart.modal-overlay_active .modal-content,
.modal-cart.modal-overlay_active .ok-cart-drawer {
  z-index: 20010 !important;
}

/* Keep page helpers out of the cart while it is open. */
@supports selector(body:has(*)) {
  body:has(.modal-cart.modal-overlay_active) #ok-accessibility-toolbar-v14,
  body:has(.modal-cart.modal-overlay_active) .ok-ai-assistant {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* Fallback for browsers where the modal locks body scrolling. */
body.overflow-hidden #ok-accessibility-toolbar-v14,
body.overflow-hidden .ok-ai-assistant {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#ok-accessibility-toolbar-v14,
.ok-ai-assistant {
  transition: opacity .16s ease, visibility .16s ease !important;
}