/* ══════════════════════════════════════════════════════════════════════════
   SERVICE MENU — единый источник стилей правого выдвигающегося сервис-меню.
   Бургер → меню (Доставка / Оплата / Оферта / Профиль).

   GC-42: вынесено из style.css в отдельный файл, чтобы один источник стилей
   обслуживал И сайт магазина (base.html, через токены был --w/--txt/--txt2/--bd),
   И автономный личный кабинет (static/profile.html, который НЕ грузит style.css).
   Значения цветов — литеральные (равны токенам style.css :root: --w #FFF,
   --txt #2D3436, --txt2 #6B7B8D, --bd #E8EDF0), чтобы файл не зависел от :root
   и работал идентично на обеих поверхностях (RULES §12 — один концепт, один
   визуал везде).

   id-контракт (JS — static/auth-ui.js, static/overlay-swipe.js):
     serviceOverlay / serviceMenu / serviceClose / serviceAccountLink
   ══════════════════════════════════════════════════════════════════════════ */
.c-service-overlay { display: none; position: fixed; inset: 0; z-index: 250; background: rgba(0,0,0,0.5); }
.c-service-overlay.open { display: block; }
.c-service-menu { display: none; position: fixed; top: 0; right: 0; width: 260px; height: 100%; z-index: 251; background: #FFF; padding: 20px; box-shadow: -4px 0 20px rgba(0,0,0,0.1); flex-direction: column; }
.c-service-menu.open { display: flex; }
.c-service-header { display: flex; justify-content: space-between; align-items: center; font-size: 16px; font-weight: 600; margin-bottom: 16px; color: #2D3436; }
.c-service-header button { width: 32px; height: 32px; border: none; background: none; font-size: 20px; cursor: pointer; border-radius: 6px; color: #6B7B8D; }
.c-service-link { display: block; padding: 12px 0; font-size: 14px; font-weight: 500; border-bottom: 1px solid #E8EDF0; color: #2D3436; text-decoration: none; }

/* ══════════════════════════════════════════════════════════════════════════
   GC-12: СКИН v4 правого сервис-меню (бургер) — перенос дизайна из утверждённого
   превью static/preview/app-home-v4.html (органик-тон v4: иконки у пунктов,
   выезд справа transform-анимацией, затемняющий оверлей с fade, блок «Скачать
   приложение» + поддержка). Namespace gcv4-svc-* (RULES §15 — не плодим generic
   классы, чтобы не задеть каталог/чекаут). Цвета — литеральные (как и базовые
   .c-service-* выше: файл self-contained, не зависит от :root, RULES §12).

   ТОЛЬКО мобильная (≤768px): бургер виден лишь на .c-mobile-header (style.css:
   display:none ≥769px) → drawer на десктоп не выводится. Скин заскоплен в media,
   десктоп физически не трогается. Один бургер, один визуал на всех страницах
   магазина (home/catalog/checkout/contacts) — service_menu.html единый партиал.

   JS-контракт сохранён без изменений: класс .open (auth-ui.js openServiceMenu/
   closeServiceMenu, overlay-swipe.js свайп вправо). Анимация — чистый CSS на
   transform по .open, со свайпом не конфликтует (overlay-swipe.js inline-transform
   во время жеста не ставит, только снимает .open).
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* ── Оверлей: затемнение с плавным появлением (вместо display:none/block) ── */
  .c-service-overlay.gcv4-svc-overlay {
    display: block; background: rgba(20, 25, 20, 0.42);
    opacity: 0; visibility: hidden;
    transition: opacity .28s ease, visibility .28s ease;
  }
  .c-service-overlay.gcv4-svc-overlay.open { opacity: 1; visibility: visible; }

  /* ── Drawer: всегда в потоке, уведён за правый край; выезд по .open ── */
  .c-service-menu.gcv4-svc {
    display: flex; flex-direction: column;
    width: 266px; padding: 22px 22px 26px;
    background: #FAFBF8; box-shadow: -6px 0 28px rgba(20, 25, 20, 0.14);
    transform: translateX(100%);
    transition: transform .32s cubic-bezier(.2, .8, .2, 1);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  .c-service-menu.gcv4-svc.open { transform: translateX(0); }

  /* ── Шапка drawer ── */
  .gcv4-svc .gcv4-svc-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
  .gcv4-svc .gcv4-svc-ttl { font-family: 'Source Serif 4', 'Georgia', serif; font-size: 19px; font-weight: 600; letter-spacing: -.01em; color: #1E231F; }
  .gcv4-svc .gcv4-svc-close {
    width: 34px; height: 34px; border: 1px solid #E7EBE6; background: #fff; border-radius: 50%;
    font-size: 18px; line-height: 1; cursor: pointer; color: #5C645E;
    display: flex; align-items: center; justify-content: center; padding: 0;
    transition: background .2s ease;
  }
  .gcv4-svc .gcv4-svc-close:active { background: #E4EDE6; }

  /* ── Пункты меню с иконкой слева ── */
  .gcv4-svc .gcv4-svc-link {
    display: flex; align-items: center; gap: 12px; padding: 14px 2px;
    font-size: 14.5px; font-weight: 500; color: #1E231F; text-decoration: none;
    border-bottom: 1px solid #E7EBE6; letter-spacing: -.005em;
    transition: color .18s ease;
  }
  .gcv4-svc .gcv4-svc-link:active { color: #3E5F4E; }
  .gcv4-svc .gcv4-svc-ico {
    width: 20px; height: 20px; flex: 0 0 auto; color: #4F7A63;
    display: flex; align-items: center; justify-content: center;
  }
  .gcv4-svc .gcv4-svc-ico svg { display: block; }

  /* Пункт аккаунта (serviceAccountLink): auth-ui.js перезаписывает textContent,
     поэтому иконку рисуем псевдоэлементом ::before (не дочерний узел). */
  .gcv4-svc .gcv4-svc-link--account::before {
    content: ""; width: 20px; height: 20px; flex: 0 0 auto; color: #4F7A63;
    background-color: currentColor;
    -webkit-mask: var(--gcv4-svc-account-ico) center / 18px 18px no-repeat;
    mask: var(--gcv4-svc-account-ico) center / 18px 18px no-repeat;
    --gcv4-svc-account-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 3.6-6.5 8-6.5s8 2.5 8 6.5'/%3E%3C/svg%3E");
  }

  /* ── Блок «Скачать приложение» ── */
  .gcv4-svc .gcv4-svc-appdl {
    display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 13px 14px;
    border: 1px solid #E7EBE6; border-radius: 13px; background: #fff;
    text-decoration: none; transition: background .2s ease, border-color .2s ease;
  }
  .gcv4-svc .gcv4-svc-appdl:active { background: #E4EDE6; border-color: #6A9B7E; }
  .gcv4-svc .gcv4-svc-appdl-ic { width: 26px; height: 26px; flex: 0 0 auto; color: #2F5E47; display: flex; align-items: center; justify-content: center; }
  .gcv4-svc .gcv4-svc-appdl-ic svg { display: block; }
  .gcv4-svc .gcv4-svc-appdl-tx { display: flex; flex-direction: column; line-height: 1.2; }
  .gcv4-svc .gcv4-svc-appdl-k { font-size: 9px; text-transform: uppercase; letter-spacing: .12em; color: #9AA29C; font-weight: 600; margin-bottom: 1px; }
  .gcv4-svc .gcv4-svc-appdl-v { font-family: 'Source Serif 4', 'Georgia', serif; font-size: 14.5px; font-weight: 600; color: #1E231F; letter-spacing: -.01em; }

  /* ── Подвал «Поддержка» ── */
  .gcv4-svc .gcv4-svc-foot { margin-top: auto; padding-top: 18px; }
  .gcv4-svc .gcv4-svc-foot-lbl { font-size: 9.5px; text-transform: uppercase; letter-spacing: .14em; color: #9AA29C; font-weight: 600; margin-bottom: 8px; }
  .gcv4-svc .gcv4-svc-foot-soc { display: flex; gap: 11px; }
  .gcv4-svc .gcv4-svc-foot-soc a {
    width: 38px; height: 38px; border-radius: 50%; border: 1px solid #E7EBE6; background: #fff;
    display: flex; align-items: center; justify-content: center; color: #3E5F4E; text-decoration: none;
    transition: background .2s ease, border-color .2s ease;
  }
  .gcv4-svc .gcv4-svc-foot-soc a:active { background: #E4EDE6; border-color: #6A9B7E; }
  .gcv4-svc .gcv4-svc-foot-soc a svg { display: block; }

  @media (prefers-reduced-motion: reduce) {
    .c-service-overlay.gcv4-svc-overlay, .c-service-menu.gcv4-svc { transition: none; }
  }
}