/* KLUMBA — shared shell (header, footer, confirm dialog). Figma header component
   658:1134, footer instance 677:1466 (identical across главная/карточка/корзина/контакты). */

/* ---------- header ---------- */
/* Mobile header per Figma nodes 682:20818 (375) / 682:20065 (600): fixed
   header height + side padding, logo shrinks, nav links collapse into a
   burger-triggered dropdown below 1024px. Desktop (>=1024px, node 658:1134)
   is unchanged: horizontal nav, no burger. */

.site-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 64px;
  padding: 0 16px;
  background: var(--bg);
}

.site-header__logo {
  flex-shrink: 0;
  height: 32px;
  width: auto;
}

.site-header__nav {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.site-header__nav-links {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.site-header__link {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.site-header__cart {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 12px;
  color: var(--ink);
}

.site-header__cart svg {
  width: 24px;
  height: 24px;
}

.cart-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 8px;
  background: var(--green);
  color: var(--bg);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  line-height: 1;
}

/* [hidden] is an author-vs-author tie against `display: inline-flex` above
   (both 0,1,0,0 specificity) — the UA `[hidden] { display: none }` rule alone
   won't win, so force it explicitly (same issue/fix as .katalog__grid[hidden]
   in home.css and .product-not-found[hidden] in product.css). Surfaced by
   cart.js driving the badge from a count back down to 0/hidden — every other
   page only ever showed it, never re-hid it, so this was latent until now. */
.cart-badge[hidden] {
  display: none;
}

/* Burger button — sits to the right of the cart icon, 12px gap comes from
   .site-header__nav's own `gap`. Hidden entirely on desktop. */
.site-header__burger {
  display: none;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.site-header__burger svg {
  width: 24px;
  height: 24px;
}

@media (min-width: 600px) {
  .site-header {
    height: 72px;
    padding: 0 24px;
  }

  .site-header__logo {
    height: 40px;
  }
}

/* Below 1024px: nav links move off-canvas into a dropdown panel toggled by
   the burger button (js/shell.js). Panel reuses .site-header__nav-links
   itself (no duplicate markup) — absolutely positioned below the header,
   full width, off-white bg, links stacked with >=44px tap targets. Closes
   on link tap / outside tap / Escape (see js/shell.js). */
@media (max-width: 1023px) {
  .site-header__burger {
    display: inline-flex;
  }

  .site-header__nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg);
    border-top: 1px solid var(--line);
    box-shadow: 0 12px 24px rgba(47, 26, 1, 0.12);
    z-index: 30;
  }

  .site-header__nav-links.is-open {
    display: flex;
  }

  .site-header__link {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 14px 16px;
  }
}

@media (min-width: 600px) and (max-width: 1023px) {
  .site-header__link {
    padding: 14px 24px;
  }
}

/* Desktop (>=1024px): restore the original padding-derived header height —
   logo (40px) + 16px top/bottom padding — burger/dropdown never apply here. */
@media (min-width: 1024px) {
  .site-header {
    height: auto;
    padding: 16px 24px;
  }
}

/* ---------- footer ---------- */

.site-footer {
  background: var(--ink);
  color: var(--bg);
  overflow: hidden;
}

.site-footer__content {
  max-width: 1272px;
  margin: 0 auto;
  padding: 40px 84px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* lets .site-footer__marquee size itself off this element's own content
     width (via cqw) instead of raw viewport width, so the fit stays
     correct once the 1272px max-width caps this container on wide screens. */
  container-type: inline-size;
}

.site-footer__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.site-footer__row + .site-footer__row {
  margin-top: 8px;
}

.site-footer__link {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  color: var(--bg);
  text-decoration: none;
}

.site-footer__divider {
  color: var(--bg);
  opacity: 0.5;
}

.site-footer__social {
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bg);
}

.site-footer__social svg {
  width: 24px;
  height: 24px;
}

.site-footer__marquee {
  margin-top: 8px;
  width: 100%;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1;
  color: #f069ba;
  /* Sized to the phrase's own container (not raw viewport width) so
     "ВНЕСИ КРЕАТИВ В ЖИЗНЬ" always fits on one line, full-width,
     left-to-right — never truncated mid-word. First declaration is a
     vw-based fallback for browsers without container-query support;
     the cqw declaration overrides it where supported. */
  font-size: clamp(14px, 3.6vw, 64px);
  font-size: clamp(16px, 5.2cqw, 64px);
  white-space: nowrap;
}

@media (max-width: 599px) {
  .site-footer__content {
    padding: 24px 16px;
  }
}

/* ---------- confirm dialog ----------
   Shares the bottom-sheet/modal shell with .sheet-dialog in base.css (same
   pattern as .notify in placeholder.css). When this dialog's markup is
   added, every structural element must carry both classes, e.g.:
     <dialog class="confirm-dialog sheet-dialog">
       <div class="confirm-dialog__grabber sheet-dialog__grabber">
       <div class="confirm-dialog__body">              <!-- own wrapper -->
         <header class="confirm-dialog__header sheet-dialog__header">
           <h2 class="confirm-dialog__title sheet-dialog__title">
           <p class="confirm-dialog__text sheet-dialog__text">
           <button class="confirm-dialog__close sheet-dialog__close">
         <div class="confirm-dialog__actions sheet-dialog__actions">
   Only confirm-dialog-specific rules (the __body wrapper and the actions'
   .btn width) live here — everything else comes from .sheet-dialog. */

.confirm-dialog__body {
  padding: 16px 24px 24px;
}

.confirm-dialog__actions .btn {
  width: 100%;
}

@media (min-width: 600px) {
  .confirm-dialog__body {
    padding: 24px;
  }
}

/* ---------- cart error ----------
   Inline failure message for a failed add-to-cart, inserted right after the
   triggering button by js/cart-state.js's addToCart. No red token exists in
   base.css — --orange is the closest attention color available. */

.cart-error {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--orange);
}