:root {
  
  --cart-bar-h: 60px;

  --feed-item-h: 100vh;

  --item-image-h: 42vh;

  --card-gap: 12px;

  --tap-btn-gap: 16px;

  --tap-min: 44px;
}

@supports (height: 100dvh) {
  :root {
    --feed-item-h: 100dvh;
    --item-image-h: 42dvh;
  }
}

html {
  
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html, body,
uni-app, uni-page, uni-page-wrapper {
  height: 100%;
}

body {
  overflow-x: hidden;
}

uni-page-body {
  box-sizing: border-box;
  min-height: 100%;
}

uni-page-body:not(:has(uni-scroll-view)):not(:has(.uni-card)) {
  height: auto !important;
  min-height: 100% !important;
  display: block !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 32px) !important;
}

uni-page-body:not(:has(uni-scroll-view)):not(:has(.uni-card)) uni-button,
uni-page-body:not(:has(uni-scroll-view)):not(:has(.uni-card)) button {
  margin-left: auto !important;
  margin-right: auto !important;
  touch-action: manipulation !important;
}

@supports not selector(:has(*)) {
  uni-page-body {
    height: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  uni-page-body > * {
    flex-shrink: 0;
  }
}

uni-page-body:has(uni-scroll-view) {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

uni-page-body:has(uni-scroll-view) > uni-view {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

uni-scroll-view {
  display: block !important;
  height: var(--feed-item-h) !important;
  min-height: 0 !important;
  flex: 0 0 auto !important;
  box-sizing: border-box !important;
}

uni-scroll-view > .uni-scroll-view,
uni-scroll-view .uni-scroll-view {
  height: 100% !important;
}

.scroll-view-item_H.scroll-view-item_H,
.scroll-view-item_V.scroll-view-item_V,
uni-scroll-view .uni-scroll-view-content > uni-view {
  height: var(--feed-item-h) !important;
  min-height: var(--feed-item-h) !important;
  max-height: var(--feed-item-h) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  vertical-align: top !important;
  align-items: stretch !important;
}

.scroll-view-item_H.scroll-view-item_H {
  width: 100vw !important;
  max-width: 100vw !important;
}

.scroll-view_H.scroll-view_H,
.scroll-view_V.scroll-view_V {
  height: 100% !important;
}

.uni-card.uni-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  padding-bottom: calc(var(--cart-bar-h) + env(safe-area-inset-bottom, 0px) + 8px) !important;
  border: none !important;
  box-shadow: none !important;
}

.uni-card .uni-card__content {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.uni-card .uni-card__header,
.uni-card .uni-card__actions {
  flex: 0 0 auto !important;
}

.uni-card .uni-card__header,
.uni-card .uni-card__actions,
.uni-card .uni-card__content {
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
}

.box-side.box-side {
  height: var(--card-gap) !important;
  min-height: var(--card-gap) !important;
  max-height: var(--card-gap) !important;
  flex: 0 0 var(--card-gap) !important;
  width: 100% !important;
}

.box-side.box-side:has(uni-button),
.box-side.box-side:has(button) {
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  flex: 0 0 auto !important;
}

uni-image.item-image, uni-image.item-image-wipe,
.item-image.item-image, .item-image-wipe.item-image-wipe {
  height: var(--item-image-h) !important;
  max-height: var(--item-image-h) !important;
  flex: 0 0 var(--item-image-h) !important;
  align-self: center !important;
  box-sizing: border-box !important;
}

uni-image.item-image > div, uni-image.item-image-wipe > div,
.item-image > div, .item-image-wipe > div {
  width: 100% !important;
  height: 100% !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
}

.uni-card uni-button,
.uni-card button {
  min-height: var(--tap-min) !important;
  touch-action: manipulation !important;
}

.uni-card > uni-button,
.uni-card > button,
.uni-card > uni-view > uni-button,
.uni-card > uni-view > button,
.uni-card .uni-card__content uni-button,
.uni-card .uni-card__content button,
.uni-card .box-side uni-button,
.uni-card .box-side button {
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: var(--tap-btn-gap) !important;
  margin-bottom: var(--tap-btn-gap) !important;
  flex: 0 0 auto !important;
  align-self: center !important;
  box-sizing: border-box !important;
}

uni-page-body [class*="cart-bar"],
uni-page-body [class*="cartBar"],
uni-page-body [class*="bottom-bar"] {
  z-index: 20 !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  box-sizing: border-box !important;
}

@media (orientation: landscape) {
  :root {
    --item-image-h: 46vh;
    --card-gap: 8px;
    --tap-btn-gap: 10px;
  }

  @supports (height: 100dvh) {
    :root {
      --item-image-h: 46dvh;
    }
  }

  .uni-card.uni-card {
    padding-bottom: calc(var(--cart-bar-h) + env(safe-area-inset-bottom, 0px) + 8px) !important;
  }

  uni-page-body:not(:has(uni-scroll-view)):not(:has(.uni-card)) {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 24px) !important;
  }
}

uni-page-body:has(uni-input) uni-button,
uni-page-body:has(.uni-input) uni-button {
  height: 69px !important;
  min-height: 69px !important;
  width: fit-content !important;
  padding: 0 40px !important;
  font-size: 30px !important;
  line-height: 69px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* ============================================================
 * ХВОСТ ДЛЯ STUDY 3 — версия 3
 * ------------------------------------------------------------
 * Заменяет прежний хвост целиком.
 *
 * Чем отличается от версии 2, которая дала мелкую картинку:
 * там ширина коробки была снята (width: auto) в расчёте на
 * растяжение через align-self: stretch. Растяжение не
 * сработало, и коробка схлопнулась по содержимому. Здесь
 * растяжения нет вовсе: и ширина, и высота заданы числами,
 * поэтому результат не зависит от того, кто чей флекс-родитель.
 *
 * Высота считается вычитанием: из высоты экрана убираются
 * название, блок с сердечком и полоса под панель Collection.
 * Всё, что осталось, отдано фотографии. Поэтому линия и
 * сердечко опускаются к самому низу, а картинка забирает верх.
 *
 * ПОДКЛЮЧЕНИЕ: файл содержит базовые правила плюс этот хвост.
 * Он идёт на study 3 ВМЕСТО layout-fix.css. Если подключены
 * оба, этот обязан быть последним.
 * ============================================================ */


/* ---- A. Настройки. Правятся только эти четыре числа --------
 * Все они складываются в высоту фотографии: что не занято
 * ими, достаётся ей. Уменьшили любое — картинка выросла.
 */

:root {
  /* Высота панели Collection. Померьте в инспекторе и поставьте
     точное значение: каждый лишний пиксель здесь отнимается у
     фотографии. Именем --cart-bar-h пользуется базовый файл. */
  --cart-bar-h: 44px;

  /* Строка с названием товара сверху. */
  --title-h: 40px;

  /* Линия, сердечко и просветы вокруг него.
     10 сверху + 24 сердечко + 16 снизу. */
  --like-h: 50px;

  /* Ширина коробки под фотографию. Задана числом, а не
     растяжением — именно это чинит прошлую поломку. */
  --photo-w: 90vw;

  --photo-h: calc(100vh - var(--title-h) - var(--like-h)
                  - var(--cart-bar-h) - env(safe-area-inset-bottom, 0px) - 14px);
}

@supports (height: 100dvh) {
  :root {
    --photo-h: calc(100dvh - var(--title-h) - var(--like-h)
                    - var(--cart-bar-h) - env(safe-area-inset-bottom, 0px) - 14px);
  }
}


/* ---- B. Высота страницы и прокрутка ------------------------
 * У study 3 есть карточка, но нет ленты. В базовом файле
 * определённую высоту uni-page-body получает только в ветке
 * :has(uni-scroll-view), поэтому здесь у неё остаётся высота
 * auto. А .uni-card просит height: 100% — процент от родителя
 * с высотой auto разрешается в auto, и карточка получается
 * высотой по содержимому. Отсюда пустое поле внизу.
 *
 * :has(.uni-card) ловит любого предка карточки, так что
 * глубина вложенности значения не имеет.
 *
 * Карточке разрешено вырасти выше экрана, а странице —
 * прокрутиться. Если название окажется в две строки и всё
 * перестанет помещаться, человек доскроллит, а не потеряет
 * низ экрана.
 */

uni-page-body:has(.uni-card):not(:has(uni-scroll-view)) {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

uni-page-body:has(.uni-card):not(:has(uni-scroll-view)) uni-view:has(.uni-card) {
  flex: 0 0 auto !important;
  min-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

uni-page-body:has(.uni-card):not(:has(uni-scroll-view)) .uni-card.uni-card {
  height: auto !important;
  min-height: 100% !important;
  max-height: none !important;
  overflow: visible !important;
  flex: 0 0 auto !important;
}


/* ---- C. Фотография ----------------------------------------
 * Ширина и высота — числа, никакого растяжения. contain
 * вписывает фотографию целиком, сохраняя её собственные
 * пропорции: широкая останется широкой, квадратная —
 * квадратной. Никакой единой рамки не навязывается.
 *
 * flex: 0 1 auto разрешает сжатие. В версии базового файла
 * стояло 0 0 — нулевое сжатие, из-за которого картинка при
 * нехватке места не ужималась, а вылезала за карточку и
 * обрезалась её overflow.
 */

.uni-card .uni-card__content {
  justify-content: flex-start !important;
  padding: 4px 0 0 !important;
}

/* Распорки отнимают высоту у фотографии и здесь не нужны. */
.uni-card .box-side.box-side {
  display: none !important;
}

uni-image.item-image, uni-image.item-image-wipe,
.item-image.item-image, .item-image-wipe.item-image-wipe {
  width: var(--photo-w) !important;
  max-width: var(--photo-w) !important;
  height: var(--photo-h) !important;
  max-height: var(--photo-h) !important;
  min-height: 0 !important;
  flex: 0 1 auto !important;
  align-self: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  /* position нужен, чтобы inset вложенного блока считался от
     этой коробки. На кнопки его вешать по-прежнему нельзя —
     именно это сломало тап-кнопки в study 4. */
  position: relative !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Вложенный блок растянут через inset, а не через height: 100%.
   Процент здесь ненадёжен: браузер вправе разрешить его нулём,
   и картинка исчезает — так было на самой первой попытке. */
uni-image.item-image > div, uni-image.item-image-wipe > div,
.item-image > div, .item-image-wipe > div {
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* На случай, если внутри uni-image лежит ещё и <img>. */
uni-image.item-image > img, uni-image.item-image-wipe > img,
.item-image > img, .item-image-wipe > img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}


/* ---- D. Линия и сердечко ----------------------------------
 * Опущены к самому низу. Ниже нельзя: под сердечком остаётся
 * панель Collection и полоса жеста «домой», которую
 * перехватывает система. Попади сердечко туда — нажатие до
 * страницы не дойдёт, ровно как было с кнопкой «плюс» в
 * study 4.
 *
 * Отступ под панель уже задан карточке в базовом файле через
 * --cart-bar-h, поэтому здесь env(safe-area) второй раз не
 * добавляется — иначе просвет удвоится.
 */

.uni-card .uni-card__actions {
  flex: 0 0 auto !important;
  margin-top: auto !important;
  padding-top: 10px !important;
  padding-bottom: 16px !important;
}

.uni-card .uni-card__actions uni-button,
.uni-card .uni-card__actions button,
.uni-card .uni-card__actions [class*="like"],
.uni-card .uni-card__actions [class*="heart"] {
  min-width: 44px !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  touch-action: manipulation !important;
}





.shop-foot {
  height: auto !important;
  min-height: 60px !important;
  padding: 10px 6px !important;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
}

.shop-foot uni-button#back,
.shop-foot uni-button:not(.pop-submit):not([id^="addtocard-"]),
.shop-foot .pop-submit {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  border-radius: 20px !important;
  padding: 0 22px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

.shop-foot .pop-submit {
  min-width: 104px !important;
  width: auto !important;
  margin: 0 0 0 auto !important;
}

.shop-foot uni-button#back,
.shop-foot uni-button:not(.pop-submit):not([id^="addtocard-"]) {
  min-width: 0 !important;
  width: auto !important;
  margin: 0 auto 0 0 !important;
  left: 0 !important;
}

.pop-submit uni-text,
.pop-submit text,
.pop-submit span {
  line-height: 1 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  display: block !important;
}