/* Глобальные элементы (design-document.md §3.3, R04-09): уведомление над шапкой, попап, плашка cookies, «наверх». Шаблоны — template/shop3/chrome/globals/*,
   поведение — js/chrome/globals.js. Без globals в документе разметки нет, и эти правила ничего не задевают: всё под своими классами.
   Слой: плашка и «наверх» — над нижней панелью телефона (z dropdown > sticky) и над ней по высоте, попап — верхний слой <dialog> */

/* ---------- уведомление: строка над шапкой, палитра — scheme-<слот> на узле ---------- */
.s3-announce { position: relative; color: var(--s3-text); background: var(--s3-surface); font-size: var(--s3-font-size-sm); }
.s3-announce-off .s3-announce { display: none; } /* закрыто раньше: класс ставит скрипт перед узлом, до отрисовки */
.s3-announce__in { display: flex; align-items: center; gap: var(--s3-notice-gap); padding-block: var(--s3-notice-padding-block); }
.s3-announce--wide .s3-announce__in { max-width: var(--s3-container-wide); }
.s3-announce--full .s3-announce__in { max-width: none; }
.s3-announce__text { flex: 1; min-inline-size: 0; margin: 0; text-align: center; }
.s3-announce__link, .s3-announce__link:hover, .s3-announce__link:focus { color: inherit; text-decoration: underline; }
.s3-announce__end { white-space: nowrap; }
.s3-announce__clock { font-variant-numeric: tabular-nums; font-weight: var(--s3-font-weight-bold); white-space: nowrap; }
.s3-announce__close {
  display: inline-flex; flex: none; align-items: center; justify-content: center; inline-size: var(--s3-size-control-sm); block-size: var(--s3-size-control-sm);
  padding: 0; border: 0; border-radius: var(--s3-radius-sm); background: none; color: inherit; cursor: pointer;
}

/* ---------- попап: <dialog> по showModal(); положение — центр, угол, низ во всю ширину ---------- */
.s3-popup {
  box-sizing: border-box; inline-size: min(var(--s3-layout-narrow), var(--s3-viewport-dialog)); max-inline-size: var(--s3-viewport-dialog); max-block-size: var(--s3-viewport-dialog-height);
  padding: 0; border: 0; border-radius: var(--s3-popup-radius); color: var(--s3-text); background: var(--s3-surface); box-shadow: var(--s3-popup-shadow); overflow: auto;
}
.s3-popup::backdrop { background: var(--s3-overlay); }
.s3-popup--end { margin-block: auto var(--s3-space-4); margin-inline: auto var(--s3-space-4); }
.s3-popup--bottom { inline-size: 100%; max-inline-size: none; margin-block-end: 0; margin-inline: 0; border-end-start-radius: 0; border-end-end-radius: 0; }
.s3-popup__box { position: relative; display: flex; flex-direction: column; }
.s3-popup__img { display: block; inline-size: 100%; block-size: auto; max-block-size: var(--s3-viewport-dropdown-height); object-fit: cover; } /* высокая картинка не выталкивает текст за экран */
.s3-popup__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3-popup-gap); padding-block: var(--s3-popup-padding-block); padding-inline: var(--s3-popup-padding-inline); }
.s3-popup__title { margin: 0; padding-inline-end: var(--s3-size-control-md); font-size: var(--s3-font-size-xl); font-weight: var(--s3-font-weight-bold); }
.s3-popup__text { margin: 0; }
.s3-popup__close {
  position: absolute; inset-block-start: var(--s3-space-2); inset-inline-end: var(--s3-space-2); z-index: var(--s3-z-raised); display: inline-flex; align-items: center; justify-content: center;
  inline-size: var(--s3-size-control-md); block-size: var(--s3-size-control-md); padding: 0; border: 0; border-radius: var(--s3-radius-pill); background: var(--s3-surface); color: var(--s3-text); cursor: pointer;
}
html:has(.s3-popup[open]) { overflow: hidden; } /* страница под подложкой не прокручивается */
@media (prefers-reduced-motion: no-preference) {
  .s3-popup[open] { animation: s3-popup-in var(--s3-popup-duration) var(--s3-easing-standard); }
}
@keyframes s3-popup-in { from { opacity: 0; transform: translateY(var(--s3-space-4)); } }

/* ---------- плашка cookies: внизу, над нижней панелью; показывает скрипт ---------- */
.s3-cookies { position: fixed; inset-block-end: var(--s3-space-4); inset-inline: var(--s3-container-gutter); z-index: var(--s3-z-dropdown); display: flex; justify-content: center; pointer-events: none; }
.s3-cookies[hidden] { display: none; }
.s3-cookies__in {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s3-cookies-gap); max-inline-size: var(--s3-layout-measure);
  padding-block: var(--s3-cookies-padding-block); padding-inline: var(--s3-cookies-padding-inline); border: var(--s3-border-width-thin) solid var(--s3-border-subtle); border-radius: var(--s3-cookies-radius);
  color: var(--s3-text); background: var(--s3-surface); box-shadow: var(--s3-cookies-shadow); font-size: var(--s3-font-size-sm); pointer-events: auto;
}
.s3-cookies__text { flex: 1; min-inline-size: 0; margin: 0; }
.s3-cookies__link, .s3-cookies__link:hover, .s3-cookies__link:focus { color: inherit; text-decoration: underline; }

/* ---------- «наверх»: ссылка-якорь; с JS — после одного экрана прокрутки (is-shown), над плашкой cookies ---------- */
.s3-to-top {
  position: fixed; inset-block-end: var(--s3-space-4); inset-inline-end: var(--s3-space-4); z-index: var(--s3-z-dropdown); display: inline-flex; align-items: center; justify-content: center;
  inline-size: var(--s3-to-top-height); block-size: var(--s3-to-top-height); border: var(--s3-border-width-thin) solid var(--s3-border-subtle); border-radius: var(--s3-to-top-radius);
  color: var(--s3-text); background: var(--s3-surface); box-shadow: var(--s3-to-top-shadow); text-decoration: none; transition: opacity var(--s3-to-top-duration), visibility var(--s3-to-top-duration);
}
.s3-to-top:hover, .s3-to-top:focus { color: var(--s3-text); text-decoration: none; }
.s3-to-top .s3-i { transform: rotate(180deg); }
.s3-to-top-js .s3-to-top:not(.is-shown) { visibility: hidden; opacity: 0; }
html.s3-cookies-open .s3-to-top { inset-block-end: calc(var(--s3x-cookies-height) + var(--s3-space-2)); } /* высота плашки от низа окна — globals.js */

/* ---------- телефон и планшет: над нижней панелью (H3), она есть до шага desktop ---------- */
@media (max-width: 991.98px) {
  .s3-has-tabbar .s3-cookies, .s3-has-tabbar .s3-to-top { inset-block-end: calc(var(--s3-tabbar-height) + env(safe-area-inset-bottom) + var(--s3-space-4)); }
  html.s3-has-tabbar.s3-cookies-open .s3-to-top { inset-block-end: calc(var(--s3x-cookies-height) + var(--s3-space-2)); }
  .s3-popup--end { inline-size: 100%; max-inline-size: none; margin-block-end: 0; margin-inline: 0; border-end-start-radius: 0; border-end-end-radius: 0; }
}

@media print {
  .s3-announce__close, .s3-cookies, .s3-to-top, .s3-popup { display: none; }
}