/*
 * «О компании» — адаптив ≤900px
 *
 * Герой + халяль — как на главной (без zoom): читаемая типографика, фото на ширину экрана.
 * Масштаб Codia-макета — только .pokiza-scale-sheet (не весь .main-container), подвал в потоке
 * с full-bleed как в home-adaptive (100vw).
 * На десктопе в o-kompanii.css: .pokiza-scale-sheet { display: contents }.
 */

@media (max-width: 900px) {
  /*
   * Запасной масштаб без CSS zoom (старый Firefox и др.): обёртка + transform на листе — задаёт home-layout.js.
   */
  html.pokiza-about-doc body.pokiza-page-inner.pokiza-page-about .pokiza-about-transform-wrap {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
    align-self: stretch !important;
  }

  html.pokiza-about-doc
    body.pokiza-page-inner.pokiza-page-about
    .pokiza-about-transform-wrap
    > .pokiza-scale-sheet {
    display: block !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  html.pokiza-about-doc {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }

  html.pokiza-about-doc body.pokiza-page-inner.pokiza-page-about {
    /* Как в home-layout.js: вписать макет 1918px в ширину экрана */
    --sheet-zoom: min(1, calc(100vw / 1918));
    /* Во всю ширину экрана, без боковых полей 16+16px */
    /* Высота блока героя (masthead + фото) */
    --about-hero-h: calc(env(safe-area-inset-top, 0px) + 72px + min(48vh, 380px));
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /*
   * Не тянуть обёртку на 100vh и не давать .main-container flex-grow:1 — иначе подвал визуально
   * «прилипает» к низу экрана и едет вместе с вьюпортом при скролле (как нижняя панель).
   * Как в home-adaptive для .pokiza-viewport: высота по контенту.
   */
  html.pokiza-about-doc body.pokiza-page-inner.pokiza-page-about .pokiza-viewport {
    display: block !important;
    zoom: 1 !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* padding-top:0 — один отступ под masthead у .site-header; иначе дублируется с home-adaptive (72px на .main-container) */
  html.pokiza-about-doc body.pokiza-page-inner.pokiza-page-about .main-container {
    position: relative !important;
    padding-top: 0 !important;
    background: #ffffff !important;
    zoom: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    height: auto !important;
    flex: none !important;
    min-height: 0 !important;
  }

  html.pokiza-about-doc body.pokiza-page-inner.pokiza-page-about .about-company-1 {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* ——— Герой: как body.pokiza-home на главной (без масштаба всей страницы) ——— */
  html.pokiza-about-doc body.pokiza-page-inner.pokiza-page-about .about-company-1 > .site-header {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-top: calc(72px + env(safe-area-inset-top, 0px)) !important;
    background-color: rgb(47, 12, 8) !important;
    box-sizing: border-box !important;
    position: relative !important;
    /* site-chrome: белый лист перекрывает низ фото; герой ниже .pokiza-scale-sheet */
    z-index: 1 !important;
    overflow: hidden !important;
    isolation: isolate !important;
    border-radius: 0 0 var(--pokiza-radius-hero, 28px) var(--pokiza-radius-hero, 28px) !important;
  }

  html.pokiza-about-doc
    body.pokiza-page-inner.pokiza-page-about
    .about-company-1
    > .site-header
    .mask-group {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: min(48vh, 380px) !important;
    left: 0 !important;
    top: 0 !important;
    z-index: 0 !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    mask-size: unset !important;
    -webkit-mask-size: unset !important;
    border-radius: 0 0 var(--pokiza-radius-hero, 28px) var(--pokiza-radius-hero, 28px) !important;
    overflow: hidden !important;
  }

  html.pokiza-about-doc body.pokiza-page-inner.pokiza-page-about .about-company-1 > .site-header .flex-row-faf .group-2 {
    display: none !important;
  }

  html.pokiza-about-doc body.pokiza-page-inner.pokiza-page-about .about-company-1 > .site-header .flex-row-faf {
    width: 100% !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html.pokiza-about-doc body.pokiza-page-inner.pokiza-page-about .about-company-1 > .site-header .group-1 {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    height: auto !important;
    min-height: min(48vh, 380px) !important;
  }

  html.pokiza-about-doc body.pokiza-page-inner.pokiza-page-about .about-company-1 > .site-header .img {
    position: relative !important;
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: min(48vh, 380px) !important;
    min-height: 240px !important;
    left: 0 !important;
    top: 0 !important;
    z-index: 0 !important;
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
  }

  html.pokiza-about-doc
    body.pokiza-page-inner.pokiza-page-about
    .about-company-1
    > .halal-production.halal-production--over-hero {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    top: calc(env(safe-area-inset-top, 0px) + 72px + min(48vh, 380px) - 7.75rem) !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    padding: 0 1.25rem !important;
    max-width: min(920px, calc(100% - 32px)) !important;
    z-index: 22 !important;
    pointer-events: none !important;
    text-align: center !important;
    font-size: clamp(0.82rem, 3.2vw, 0.98rem) !important;
    line-height: 1.35 !important;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.65) !important;
    color: #ffffff !important;
    height: auto !important;
    width: auto !important;
    white-space: normal !important;
  }

  /*
   * Лист с zoom: absolute-слои не задают высоту потока.
   * Большой min-height в CSS давал огромную белую полосу между галереей и подвалом.
   * На ≤900px высоту листа задаёт js/home-layout.js (syncAboutMobileFooter) по низу галереи.
   */
  /*
   * Нельзя overflow-x: hidden на листе: тогда по спецификации overflow-y перестаёт быть visible
   * и абсолютные слои (CB — .about-company-1), частично вне padding-box листа, обрезаются —
   * пропадают заголовок «Качество…», круги, таймлайн (flex-row-edf). Горизонталь режем у .about-company-1 / .main-container.
   */
  html.pokiza-about-doc body.pokiza-page-inner.pokiza-page-about .about-company-1 > .pokiza-scale-sheet {
    /* relative — контекст для absolute-слоёв; ширина макета 1918px + zoom = мини-десктоп */
    position: relative !important;
    width: var(--layout-page-width, 1918px) !important;
    max-width: var(--layout-page-width, 1918px) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    /* !important ломает min() в zoom (WebKit) — задаём без него; перебивает только zoom на .main-container */
    zoom: min(1, calc(100vw / 1918));
    overflow: visible !important;
    touch-action: pan-y;
    box-sizing: border-box !important;
    display: block !important;
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    /* Как .site-main на продукции/контактах — белый лист поверх низа героя */
    z-index: 18 !important;
    isolation: isolate !important;
    min-height: 0 !important;
    height: auto !important;
    transform-origin: top center !important;
  }

  /* Процентные height в o-kompanii.css (0.59% / 1.3%) при height:0 у листа дают top:0 — всё наезжает. Только px, как на десктопе. */
  html.pokiza-about-doc
    body.pokiza-page-inner.pokiza-page-about
    .about-company-1
    > .pokiza-scale-sheet
    :is(.quality-felt, .own-production) {
    height: auto !important;
    min-height: 0 !important;
  }

  html.pokiza-about-doc
    body.pokiza-page-inner.pokiza-page-about
    .about-company-1
    .pokiza-scale-sheet
    .quality-felt {
    position: absolute !important;
    top: calc(var(--white-sheet-top) + var(--pokiza-primary-headline-from-white-top)) !important;
    left: calc(var(--white-sheet-left) + 548px) !important;
    right: auto !important;
    transform: none !important;
    width: 782px !important;
    max-width: 782px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 63.84px !important;
    font-size: 48px !important;
    white-space: nowrap !important;
    text-align: center !important;
  }

  html.pokiza-about-doc
    body.pokiza-page-inner.pokiza-page-about
    .about-company-1
    .pokiza-scale-sheet
    .group-a {
    position: absolute !important;
    top: calc(
      var(--white-sheet-top) + var(--pokiza-primary-headline-from-white-top) + 67px + 5px
    ) !important;
    left: 37.21% !important;
    width: 25.02% !important;
    height: 131px !important;
  }

  html.pokiza-about-doc
    body.pokiza-page-inner.pokiza-page-about
    .about-company-1
    .pokiza-scale-sheet
    .own-production {
    position: absolute !important;
    top: calc(
      var(--white-sheet-top) + var(--pokiza-primary-headline-from-white-top) + 67px + 5px + 53px +
        48px + 40px
    ) !important;
    left: calc(var(--white-sheet-left) + 378px) !important;
    width: 1160px !important;
    max-width: 1160px !important;
    font-size: 20px !important;
    line-height: 26.6px !important;
    text-align: center !important;
  }

  /* Белый лист — десктопные размеры; масштаб через --sheet-zoom на .pokiza-scale-sheet */
  html.pokiza-about-doc
    body.pokiza-page-inner.pokiza-page-about
    .about-company-1
    > .pokiza-scale-sheet
    > .rectangle-9 {
    display: block !important;
    left: 0 !important;
    width: var(--layout-page-width, 1918px) !important;
    max-width: var(--layout-page-width, 1918px) !important;
    top: var(--white-sheet-top) !important;
    height: 7193px !important;
    border-radius: var(--pokiza-radius-sheet, 36px) var(--pokiza-radius-sheet, 36px) 0 0 !important;
    box-shadow: 0 -20px 48px rgba(0, 0, 0, 0.12) !important;
    z-index: 17 !important;
  }

  /* Запасной масштаб без CSS zoom — только через js/home-layout.js (transform-wrap) */

  /* Позиционирование intro-блока — o-kompanii-mini-desktop.css (как на десктопе) */

  /* Абзац перед «преимуществами» (.group-2a): без фикс. высоты */
  html.pokiza-about-doc
    body.pokiza-page-inner.pokiza-page-about
    .about-company-1
    > .pokiza-scale-sheet
    .span-29 {
    height: auto !important;
    min-height: 0 !important;
  }

  /*
   * Блок «медалей» .group-2a — top как на десктопе (o-kompanii-mini-desktop.css).
   */

  /* Декоративные «медали» в .group-2a: квадрат при zoom */
  html.pokiza-about-doc
    body.pokiza-page-inner.pokiza-page-about
    .about-company-1
    > .pokiza-scale-sheet
    .group-2a
    :is(.ellipse, .ellipse-2b, .ellipse-30, .ellipse-35) {
    width: 41.384px !important;
    min-width: 41.384px !important;
    max-width: 41.384px !important;
    height: 41.384px !important;
    min-height: 41.384px !important;
    max-height: 41.384px !important;
    box-sizing: border-box !important;
    aspect-ratio: 1 / 1 !important;
    flex: 0 0 41.384px !important;
    border-radius: 50% !important;
  }

  /* «ваш лучший выбор» — абсолют как на десктопе (o-kompanii-mini-desktop.css) */

  /*
   * Подвал в потоке (не site-chrome: absolute + top:6120px — иначе перекрывает контент).
   * Селектор как в site-chrome.css, иначе :not(:has()) перебивает короткий .flex-row-dde.
   */
  /*
   * Подвал должен быть над абсолютным макетом (group-18 z-index 86, карточки до ~172).
   * z-index: 5 оставлял футер ПОД контентом — «наезжали» история и блоки на галерею и подвал.
   * Как на десктопе: site-chrome .about-company-1 > .flex-row-dde { z-index: 200 }.
   */
  /*
   * Подвал — последний ребёнок .about-company-1 сразу после .pokiza-scale-sheet (галерея внутри листа).
   * site-chrome: .about-company-1 > .flex-row-dde — на мобилке в потоке под листом, не сосед .main-container.
   */
  body.pokiza-page-inner.pokiza-page-about .about-company-1 > .flex-row-dde {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    z-index: auto !important;
    flex: 0 0 auto !important;
    align-self: stretch !important;
  }

  html.pokiza-about-doc
    body.pokiza-page-inner.pokiza-page-about
    .about-company-1
    > .flex-row-dde:not(:has(.mask-group-13)) {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: none !important;
    margin: 0 !important;
    padding: 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 0) !important;
    /* как на продукции / home-adaptive: не поднимаем отдельный композитный слой — иначе на iOS визуально «приклеивается» к вьюпорту */
    z-index: auto !important;
    align-self: stretch !important;
  }

  html.pokiza-about-doc
    body.pokiza-page-inner.pokiza-page-about
    .about-company-1
    > .flex-row-dde:not(:has(.mask-group-13))
    #contacts.rectangle-14.site-footer {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    transform: none !important;
  }

  html.pokiza-about-doc
    body.pokiza-page-inner.pokiza-page-about
    .main-container.pokiza-height-synced
    .about-company-1 {
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
  }

  html.pokiza-about-doc
    body.pokiza-page-inner.pokiza-page-about
    .about-company-1
    .flex-row-dde:not(:has(.mask-group-13))
    .rectangle-14.site-footer
    .flex-column-ef,
  html.pokiza-about-doc
    body.pokiza-page-inner.pokiza-page-about
    .about-company-1
    .flex-row-dde:not(:has(.mask-group-13))
    .rectangle-14.site-footer
    .flex-column-d {
    padding-top: 0 !important;
    transform: none !important;
  }

  html.pokiza-about-doc
    body.pokiza-page-inner.pokiza-page-about
    .about-company-1
    .flex-row-dde:not(:has(.mask-group-13))
    .rectangle-14.site-footer
    .pn-pt {
    margin: 0 !important;
  }

  html.pokiza-about-doc
    body.pokiza-page-inner.pokiza-page-about
    .about-company-1
    .flex-row-dde:not(:has(.mask-group-13))
    .rectangle-14 {
    top: auto !important;
    height: auto !important;
  }

  html.pokiza-about-doc
    body.pokiza-page-inner.pokiza-page-about
    .about-company-1
    :is(.own-production, .vector-3d, .pokiza-description, .halal-global-standard-70, .modern-production-complex) {
    white-space: normal !important;
  }

  /*
   * Лист: переносы заголовков, clamp шрифтов — см. блоки :is ниже.
   * Не сужаем .rectangle-9 до 100% — ломает координаты макета 1918px.
   */

  html.pokiza-about-doc
    body.pokiza-page-inner.pokiza-page-about
    .pokiza-scale-sheet
    :is(
      .quality-felt,
      .categories,
      .products-3b,
      .our-products,
      .your-best-choice,
      .flex-column-c,
      .production-proud,
      .span-26,
      .span-29,
      .team,
      .professionals,
      .natural-composition,
      .verified-recipes,
      .own-production-56,
      .wide-assortment
    ) {
    white-space: normal !important;
  }

  html.pokiza-about-doc
    body.pokiza-page-inner.pokiza-page-about
    .pokiza-scale-sheet
    :is(
      .own-production,
      .span,
      .span-24,
      .pokiza-description,
      .halal-global-standard-70,
      .modern-production-complex,
      .vector-3d,
      .verified-suppliers,
      .traditional-technologies,
      .quality-control,
      .gourmet-selection,
      .quality-control-64,
      .group-61,
      .product-types,
      .flex-column-c
    ) {
    white-space: normal !important;
  }

  html.pokiza-about-doc
    body.pokiza-page-inner.pokiza-page-about
    .pokiza-scale-sheet
    :is(
      .quality-felt,
      .categories,
      .products-3b,
      .production-proud,
      .span-26,
      .span-29
    ) {
    white-space: nowrap !important;
  }

  /* Удалены clamp-шрифты — масштаб zoom сохраняет пропорции десктопа */

  /* Галерея: absolute + 3 колонки как на десктопе (масштаб через zoom) */
  html.pokiza-about-doc body.pokiza-page-inner.pokiza-page-about .pokiza-about-gallery {
    position: absolute !important;
    top: 5960px !important;
    left: 96px !important;
    right: auto !important;
    width: 1726px !important;
    max-width: 1726px !important;
    margin: 0 !important;
    transform: translateY(-55px) !important;
    padding: 0.75rem 0 4px !important;
    box-sizing: border-box !important;
    z-index: 190 !important;
    isolation: isolate !important;
  }

  html.pokiza-about-doc body.pokiza-page-inner.pokiza-page-about .pokiza-about-gallery__inner {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 18px !important;
  }

  html.pokiza-about-doc body.pokiza-page-inner.pokiza-page-about .pokiza-about-gallery__col {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  html.pokiza-about-doc
    body.pokiza-page-inner.pokiza-page-about
    .pokiza-about-gallery__figure--tall {
    flex: 0 0 auto !important;
    height: 800px !important;
    min-height: 0 !important;
    aspect-ratio: unset !important;
  }

  html.pokiza-about-doc
    body.pokiza-page-inner.pokiza-page-about
    .pokiza-about-gallery__col:nth-child(2)
    .pokiza-about-gallery__figure--tall {
    height: 720px !important;
  }

  html.pokiza-about-doc
    body.pokiza-page-inner.pokiza-page-about
    .pokiza-about-gallery__figure--wide {
    flex: 0 0 auto !important;
    height: 471px !important;
    aspect-ratio: unset !important;
    min-height: 0 !important;
  }

  html.pokiza-about-doc body.pokiza-page-inner.pokiza-page-about .pokiza-about-gallery__figure,
  html.pokiza-about-doc body.pokiza-page-inner.pokiza-page-about .pokiza-about-gallery__figure--square,
  html.pokiza-about-doc body.pokiza-page-inner.pokiza-page-about .pokiza-about-gallery__figure--strip,
  html.pokiza-about-doc body.pokiza-page-inner.pokiza-page-about .pokiza-about-gallery__figure--strip-tall {
    height: auto !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
    border-radius: 12px !important;
  }
}

/* Очень узкие экраны: full-bleed zoom, галерея — те же координаты десктопа */
@media (max-width: 480px) {
  html.pokiza-about-doc body.pokiza-page-inner.pokiza-page-about .pokiza-about-gallery {
    left: 96px !important;
    right: auto !important;
  }
}

/* Планшет / средние окна: зазор в колонках галереи */
@media (max-width: 900px) and (min-width: 481px) {
  html.pokiza-about-doc body.pokiza-page-inner.pokiza-page-about .pokiza-about-gallery__col {
    gap: 12px !important;
  }
}

/* ============================================================================
 * О КОМПАНИИ — polish-слой адаптива (герой, лента «халяль», галерея, подвал)
 * Дополняет базовые правила выше; содержит только улучшения визуала, типографики
 * и плавных анимаций. DOM-структуру/скрипты не трогаем.
 * ========================================================================== */

/* Плавное появление секций (только если ОС не запрашивает reduced motion) */
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  html.pokiza-about-doc body.pokiza-page-inner.pokiza-page-about .pokiza-about-gallery__figure {
    opacity: 0;
    transform: translateY(8px);
    animation: pokizaAboutFadeUp 520ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
  html.pokiza-about-doc body.pokiza-page-inner.pokiza-page-about .pokiza-about-gallery__figure:nth-child(2) {
    animation-delay: 80ms;
  }
  html.pokiza-about-doc body.pokiza-page-inner.pokiza-page-about .pokiza-about-gallery__figure:nth-child(3) {
    animation-delay: 160ms;
  }
  html.pokiza-about-doc body.pokiza-page-inner.pokiza-page-about .pokiza-about-gallery__figure:nth-child(4) {
    animation-delay: 220ms;
  }
  @keyframes pokizaAboutFadeUp {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

@media (max-width: 900px) {
  /* Плавный скролл и отключение «резинки» у корня — чище ощущается на iOS */
  html.pokiza-about-doc {
    scroll-behavior: smooth;
  }

  /* ——— Лента «Халяль» над героем: стеклянная плашка вместо голого текста ——— */
  html.pokiza-about-doc
    body.pokiza-page-inner.pokiza-page-about
    .about-company-1
    > .halal-production.halal-production--over-hero {
    padding: 0.55rem 1rem !important;
    border-radius: 999px !important;
    background: rgba(24, 6, 4, 0.42) !important;
    -webkit-backdrop-filter: blur(8px) saturate(140%) !important;
    backdrop-filter: blur(8px) saturate(140%) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    letter-spacing: 0.01em !important;
    font-weight: 500 !important;
  }

  /* ——— Герой: мягкая тень по низу фото, чтобы отделить от белого листа ——— */
  html.pokiza-about-doc
    body.pokiza-page-inner.pokiza-page-about
    .about-company-1
    > .site-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 80px;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.35) 100%);
    border-radius: 0 0 28px 28px;
    z-index: 1;
  }

  /* Ленту «халяль» поднимаем над тенью героя */
  html.pokiza-about-doc
    body.pokiza-page-inner.pokiza-page-about
    .about-company-1
    > .halal-production.halal-production--over-hero {
    z-index: 24 !important;
  }

  /* ——— Галерея: аккуратные скруглённые кадры с тенью и плавным hover ——— */
  html.pokiza-about-doc body.pokiza-page-inner.pokiza-page-about .pokiza-about-gallery__figure {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 14px !important;
    box-shadow: 0 6px 18px rgba(47, 12, 8, 0.12), 0 1px 2px rgba(47, 12, 8, 0.08) !important;
    background: #f6efe9 !important;
    transition: transform 260ms ease, box-shadow 260ms ease !important;
  }
  html.pokiza-about-doc body.pokiza-page-inner.pokiza-page-about .pokiza-about-gallery__figure > img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 520ms ease !important;
  }
  html.pokiza-about-doc
    body.pokiza-page-inner.pokiza-page-about
    .pokiza-about-gallery__figure:hover,
  html.pokiza-about-doc
    body.pokiza-page-inner.pokiza-page-about
    .pokiza-about-gallery__figure:focus-within {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(47, 12, 8, 0.18), 0 2px 4px rgba(47, 12, 8, 0.12) !important;
  }
  html.pokiza-about-doc
    body.pokiza-page-inner.pokiza-page-about
    .pokiza-about-gallery__figure:hover
    > img {
    transform: scale(1.04);
  }

  /* Одинаковый ритм зазоров в колонках */
  html.pokiza-about-doc body.pokiza-page-inner.pokiza-page-about .pokiza-about-gallery__col {
    gap: clamp(10px, 2.4vw, 14px) !important;
  }
  html.pokiza-about-doc body.pokiza-page-inner.pokiza-page-about .pokiza-about-gallery__inner {
    gap: clamp(12px, 2.8vw, 16px) !important;
  }

  /* ——— Типографика листа: чище и воздушнее ——— */
  html.pokiza-about-doc
    body.pokiza-page-inner.pokiza-page-about
    .pokiza-scale-sheet
    :is(.quality-felt, .categories, .products-3b, .production-proud, .span-26, .span-29, .team, .professionals) {
    letter-spacing: 0.01em !important;
  }

  /* ——— Подвал: читаемая типографика и аккуратные расстояния ——— */
  html.pokiza-about-doc
    body.pokiza-page-inner.pokiza-page-about
    .about-company-1
    > .flex-row-dde
    .rectangle-14.site-footer {
    padding: clamp(1.25rem, 5vw, 2rem) clamp(1rem, 5vw, 2rem) calc(1.25rem + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 24px 24px 0 0 !important;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.08) !important;
  }

  html.pokiza-about-doc
    body.pokiza-page-inner.pokiza-page-about
    .about-company-1
    > .flex-row-dde
    .rectangle-14.site-footer
    .pn-pt,
  html.pokiza-about-doc
    body.pokiza-page-inner.pokiza-page-about
    .about-company-1
    > .flex-row-dde
    .rectangle-14.site-footer
    .russia-moscow-permskaya,
  html.pokiza-about-doc
    body.pokiza-page-inner.pokiza-page-about
    .about-company-1
    > .flex-row-dde
    .rectangle-14.site-footer
    .moscow-leningradsky-prospekt {
    font-size: clamp(0.9rem, 3.6vw, 1.02rem) !important;
    line-height: 1.45 !important;
  }

  html.pokiza-about-doc
    body.pokiza-page-inner.pokiza-page-about
    .about-company-1
    > .flex-row-dde
    .rectangle-14.site-footer
    .phone-number,
  html.pokiza-about-doc
    body.pokiza-page-inner.pokiza-page-about
    .about-company-1
    > .flex-row-dde
    .rectangle-14.site-footer
    .info-email {
    font-size: clamp(1rem, 4.2vw, 1.2rem) !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    text-decoration: none !important;
    transition: opacity 200ms ease !important;
    display: inline-block !important;
  }

  html.pokiza-about-doc
    body.pokiza-page-inner.pokiza-page-about
    .about-company-1
    > .flex-row-dde
    .rectangle-14.site-footer
    .phone-number:hover,
  html.pokiza-about-doc
    body.pokiza-page-inner.pokiza-page-about
    .about-company-1
    > .flex-row-dde
    .rectangle-14.site-footer
    .info-email:hover {
    opacity: 0.82 !important;
  }
}

/* Планшет (601–900px): галерея — те же 3 колонки, масштаб через zoom */
@media (min-width: 601px) and (max-width: 900px) {
  html.pokiza-about-doc body.pokiza-page-inner.pokiza-page-about .pokiza-about-gallery {
    left: 96px !important;
    right: auto !important;
  }
}

/* ——— Очень узкие (≤380): компактнее отступы и типографика ——— */
@media (max-width: 380px) {
  html.pokiza-about-doc body.pokiza-page-inner.pokiza-page-about .about-company-1 > .halal-production.halal-production--over-hero {
    padding: 0.45rem 0.75rem !important;
    font-size: clamp(0.75rem, 3.6vw, 0.92rem) !important;
  }
  html.pokiza-about-doc body.pokiza-page-inner.pokiza-page-about .pokiza-about-gallery {
    left: 96px !important;
    right: auto !important;
  }
}

/* ——— Пейзажная ориентация телефона: уменьшаем высоту героя ——— */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 540px) {
  html.pokiza-about-doc body.pokiza-page-inner.pokiza-page-about {
    --about-hero-h: calc(env(safe-area-inset-top, 0px) + 64px + 56vh);
  }
  html.pokiza-about-doc body.pokiza-page-inner.pokiza-page-about .about-company-1 > .site-header .mask-group,
  html.pokiza-about-doc body.pokiza-page-inner.pokiza-page-about .about-company-1 > .site-header .group-1,
  html.pokiza-about-doc body.pokiza-page-inner.pokiza-page-about .about-company-1 > .site-header .img {
    min-height: min(56vh, 320px) !important;
    height: min(56vh, 320px) !important;
  }
  html.pokiza-about-doc body.pokiza-page-inner.pokiza-page-about .about-company-1 > .halal-production.halal-production--over-hero {
    top: calc(env(safe-area-inset-top, 0px) + 64px + min(56vh, 320px) - 6rem) !important;
  }
}