/* ==========================================================================
   DESIGN TOKENS
   ========================================================================== */
:root {
  /* brand */
  --brand: #0000CD;
  --brand-hover: #0000FF;
  --brand-contrast: #ffffff;

  /* accents */
  --accent-pink: #E1306C;
  --accent-pink-deep: #C1205A;
  --accent-green: #22C55E;

  /* neutrals */
  --bg: #f5f5f5;
  --surface: #F8F8FF;
  --text: #1F252E;
  --muted: #6c757d;
  --shadow-1: 0 5px 25px rgba(0,0,0,.15);

  /* chip */
  --chip-bg: #fff;
  --chip-border: rgba(0,0,0,.08);
  --chip-shadow: 0 2px 10px rgba(0,0,0,.06);
  --chip-shadow-hover: 0 6px 18px rgba(0,0,0,.10);

  --ring-eps: 0.6px;
}

/* ==========================================================================
   BASE
   ========================================================================== */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

body{
  min-height: 100dvh;
  margin: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--bg);
  color: var(--text);
  font-family: "Montserrat", sans-serif;
}

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

/* container больше не растягиваем flex'ом */
.container{
  max-width: 1200px;
  width: 100%;
  margin-inline: auto;
  padding-inline: 16px;
}

main{ min-height: 0; }
main { flex: 1; display: flex; flex-direction: column; }
ul { list-style: none; padding-left: 0; margin: 0; }

h1 { font-size: 2.5rem; color: #333; text-align: center; }

/* ===========================
   HEADER (adaptive, grid)
   =========================== */
header{
  /* базовые */
  --header-radius: 16px;             /* легко поменять скругление */
  --header-border-width: 3px;        /* толщина рамки */
  --liquid-speed: 6s;                /* скорость движения градиента */
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--surface);
  box-shadow: var(--shadow-1);
  border-radius: var(--header-radius);
  isolation: isolate;                /* чтобы псевдо-элемент не смешивался */
}

/* === LIQUID BORDER (градиент течёт вправо) === */
:root{ --ring-eps: 0.6px; } /* можно 0.4–0.8px */

/* LIQUID-BORDER: внутри хедера с микро-наддувом */
header::before{
  content:"";
  position:absolute;

  /* чуть выходим на 0.6px наружу и компенсируем padding/радиус */
  inset: calc(-1 * var(--ring-eps));
  padding: calc(var(--header-border-width) + var(--ring-eps));
  border-radius: calc(var(--header-radius) + var(--ring-eps));

  background: linear-gradient(90deg,
    var(--brand-500,#00B0FF),
    var(--accent-500,#C1205A),
    var(--violet-500,#8A2BE2),
    var(--brand-500,#00B0FF)
  );
  background-size: 300% 100%;
  background-position: 0% 50%;

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;

  animation: border-liquid var(--liquid-speed) linear infinite;
  pointer-events:none;
  z-index:0;

  /* сглаживание */
  outline: 1px solid transparent;
  transform: translateZ(0);
  will-change: background-position;
}

/* контент над рамкой */
header > *{ position: relative; z-index: 1; }

/* Анимация движения */
@keyframes border-liquid {
  0%   { background-position:   0% 50%; }
  100% { background-position: 300% 50%; }
}

/* Убираем анимацию при reduce-motion */
@media (prefers-reduced-motion: reduce){
  header::before { animation: none; }
}

/* --------------------------------------------
   Всё остальное: твой существующий стиль
   -------------------------------------------- */

/* Equal spacing between profile, cart, logout */
header .user-interactions{
  gap: var(--actions-gap, 14px);
}

header .user-interactions .cart-button{
  margin-inline: 0 !important;
}

header .user-interactions [class*="me-"],
header .user-interactions [class*="ms-"]{
  margin: 0 !important;
}

/* адаптив */
@media (max-width: 1024px){
  header .user-interactions{ gap: 12px; }
}
@media (max-width: 520px){
  header .user-interactions{ gap: 10px; }
}

/* Grid layout */
header.d-flex{
  display: grid !important;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "brand nav actions";
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
  border-radius: var(--header-radius);
}

header .navigation-buttons{ grid-area: nav; min-width:0; }
header .user-interactions{ grid-area: actions; justify-self: end; min-width:0; }

header > .d-flex.align-items-center:not(.user-interactions){
  grid-area: brand;
  justify-self: start;
  min-width: 0;
}

header .user-interactions{
  grid-area: actions;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: .5rem;
  justify-content: flex-end !important;
  min-width: 0;
}

header .navigation-buttons{
  grid-area: nav;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:.6rem;
  margin:0 !important;
  padding:0;
}

/* убираем старые кометы */
.header-sky, .comet { display: none !important; }

/* Brand badge */
.brand-badge{
  display:inline-block; width:56px; height:56px;
  border-radius:12px; overflow:visible; text-decoration:none;
  transform:translateZ(0);
}
.brand-badge__svg{ width:56px; height:56px; display:block; }
.brand-badge:hover{ transform:translateY(-1px); }
.brand-badge:active{ transform:translateY(0); }

.brand-badge__orbit{ animation: gff-orbit 6.5s linear infinite; }
.brand-badge__dot{
  transform-origin: 32px 32px;
  animation: gff-pulse 1.6s ease-in-out infinite;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.18));
}
.brand-wordmark{
  font-weight: 800;
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1;
}
@keyframes gff-orbit{ to { transform: rotate(360deg); } }
@keyframes gff-pulse{ 0%,100% { r: 3.2; opacity: 1; } 50% { r: 4.1; opacity: .85; } }
@media (prefers-reduced-motion: reduce){
  .brand-badge__orbit, .brand-badge__dot{ animation: none; }
}
@media (max-width: 380px){
  .brand-badge, .brand-badge__svg{ width:48px; height:48px; }
}

/* Responsive (меню вниз) */
@media (max-width: 900px){
  header.d-flex{
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
  }
  header .navigation-buttons{
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 6px;
  }
}



/* ==========================================================================
   NAV
   ========================================================================== */
/* Центрируем ul по центру шапки, убираем сдвиг влево */
.navigation-buttons{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:.6rem;
  margin:0 !important;
  padding: 0;
  overflow-x: visible;
  -webkit-overflow-scrolling: touch;
}
.nav-link{
  font-weight:600;
  font-size: clamp(.95rem, 1.6vw, 1.1rem);
  padding: .55rem .7rem;
  color: var(--text) !important;
  transition: color .2s ease;
  white-space: nowrap;
}
.nav-link:hover{ color: var(--accent-pink) !important; text-decoration:none; }
.nav-link.active{ color: var(--brand-hover) !important; }

/* Брэнд-бейдж/вордмарк (можно оставить как есть) */
.brand-badge{ display:inline-block; width:56px; height:56px; border-radius:12px; text-decoration:none; }
.brand-badge__svg{ width:56px; height:56px; display:block; }
.brand-wordmark{ font-weight:800; font-size: clamp(1rem, 1.2vw, 1.15rem); line-height:1; }

/* Адаптив: на узких экранах навигацию переносим на новую строку и центрируем */
@media (max-width: 900px){
  header{
    grid-template-columns: 1fr  auto; /* слева бейдж+вордмарк, справа actions */
    grid-template-rows: auto auto;    /* вторая строка под меню */
  }
  .navigation-buttons{
    grid-column: 1 / -1;  /* на всю ширину */
    grid-row: 2;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 6px;
  }
}

@media (max-width: 1024px){
  header.d-flex{ gap:10px; padding: 12px 16px; }
  .navigation-buttons{ gap:.5rem; flex-wrap: wrap; }
}

/* Узкие: меню на вторую строку, при избытке пунктов — горизонтальный скролл */
@media (max-width: 820px){
  header.d-flex{
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand actions"
      "nav nav";
  }
  .navigation-buttons{
    justify-content:center;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
    padding-bottom: 2px;
    gap:.5rem;
  }
}

/* Совсем узкие телефоны: ужимаем размеры */
@media (max-width: 420px){
  .nav-link{ font-size: .95rem; padding:.5rem .6rem; }
  .brand-badge, .brand-badge__svg{ width:48px; height:48px; }
  header.d-flex{ padding: 10px 12px; }
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
/* Базовый primary */
.btn.btn-primary {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  background: var(--brand);
  border-color: #F0F8FF;
  color: var(--brand-contrast);
  transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}

/* Outline → делаем фирменным, но с прозрачным фоном */
.btn.btn-outline-primary {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  color: var(--brand-contrast);
  background: var(--brand);
  border-color: #F0F8FF;
  transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}

/* Подъём на hover */
.btn-primary:hover,
.btn-outline-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0,0,0,.12);
}
.btn.btn-primary:hover,
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: #C1205A !important;
  border-color: #C1205A !important;
  color: #fff !important;
}

.btn-primary:active,
.btn-outline-primary:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}




/* ==========================================================================
   PROFILE CHIP — Modern compact pill (only avatar + indicator)
   ========================================================================== */

/* Сбрасываем ссылку */
.profile-chip,
.profile-chip:hover,
.profile-chip:focus,
.profile-chip:active {
  text-decoration: none;
  color: inherit;
}

/* === Основной вид чипа === */
.profile-chip.profile-chip--hero {
  --avatar-size: 42px;
  --chip-bg: #fff;
  --chip-border: rgba(0,0,0,.08);
  --chip-pad: .15rem;

  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  padding: var(--chip-pad);
  gap: 0;

  background: var(--chip-bg);
  border: 1px solid var(--chip-border);
  border-radius: 9999px;

  box-shadow: 0 4px 10px rgba(0,0,0,.06);
  transition: box-shadow .2s ease, transform .15s ease;
}

/* Hover */
.profile-chip.profile-chip--hero:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}

/* Подсветка состояния Active */
.profile-chip.profile-chip--active-glow {
  border-color: rgba(34,197,94,.45);
  box-shadow:
    0 10px 26px rgba(0,0,0,.14),
    0 0 0 3px rgba(34,197,94,.25);
}

/* ==========================================================================
   АВАТАРКА — заполняет круг ДО КРАЁВ (без белых полей)
   ========================================================================== */

/* Обёртка остаётся в потоке, фиксированного размера-круга */
.profile-chip.profile-chip--hero .chip-avatar-wrap{
  position: relative;
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: 50%;
  overflow: hidden;
  background: #efefef;
  flex: 0 0 var(--avatar-size);
}

/* Любая картинка/фоллбек внутри обёртки — на весь круг */
.profile-chip.profile-chip--hero .chip-avatar-wrap > img,
.profile-chip.profile-chip--hero .chip-avatar,
.profile-chip.profile-chip--hero .chip-avatar-fallback{
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;     /* ключ к отсутствию белых полей */
}

/* Фоллбек-инициалы */
.profile-chip.profile-chip--hero .chip-avatar-fallback{
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  background: #9ca3af;
  text-transform: uppercase;
}

/* На случай, если аватар — прямой <img> без обёртки */
.profile-chip.profile-chip--hero > img{
  display: block;
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 var(--avatar-size);
}

/* ==========================================================================
   ИНДИКАТОР АКТИВНОСТИ (как в мессенджерах)
   ========================================================================== */
.active-room-indicator {
  position: absolute;
  width: 15px;
  height: 15px;
  bottom: -1px;
  right: 4px;
  background: #9CA3AF;
  border-radius: 50%;
  border: 2px solid #fff;
  pointer-events: none;
  z-index: 2;
}
.active-room-indicator.active {
  background: #22C55E;
  animation:
    dotPulse 1.6s ease-in-out infinite,
    ringPulse 1.6s ease-out infinite;
}
@keyframes dotPulse {
  0%,100% { transform: scale(1); opacity: 1; }
  50%     { transform: scale(1.10); opacity: .93; }
}
@keyframes ringPulse {
  0%   { box-shadow: 0 0 0 2px #fff, 0 0 0   0 rgba(34,197,94,.35); }
  70%  { box-shadow: 0 0 0 2px #fff, 0 0 0 10px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 2px #fff, 0 0 0   0 rgba(34,197,94,0); }
}

/* ==========================================================================
   Прячем имя и каретку (DOM остаётся)
   ========================================================================== */
.profile-chip .label,
.profile-chip .username,
.profile-chip .caret { display: none !important; }

/* ==========================================================================
   Адаптивность
   ========================================================================== */
@media (max-width: 460px) {
  .profile-chip.profile-chip--hero {
    --avatar-size: 38px;
    --chip-pad: .12rem;
  }
}
@media (min-width: 1440px) {
  .profile-chip.profile-chip--hero {
    --avatar-size: 48px;
    --chip-pad: .18rem;
  }
}



/* === Global gradient title === */
.gradient-title{
  font-weight:900;
  letter-spacing:.3px;
  line-height:1.2;

  background:linear-gradient(90deg,#0000CD,#C1205A,#00B0FF,#8A2BE2);
  background-size:300% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;

  animation:titleGradient 8s ease infinite;
}

/* Модификатор: тонкая градиентная полоска под заголовком */
.gradient-title--underline::after{
  content:"";
  display:block;
  width:60px; height:3px;
  margin:8px auto 0;
  border-radius:2px;
  background:linear-gradient(90deg,rgba(0,0,205,.35),rgba(193,32,90,.45));
}

@keyframes titleGradient{
  0%{ background-position:0% 50% }
  50%{ background-position:100% 50% }
  100%{ background-position:0% 50% }
}

/* Доступность */
@media (prefers-reduced-motion:reduce){
  .gradient-title{ animation:none; }
}

/* ==========================================================================
   CART BADGE
   ========================================================================== */
/* ===== Modern Cart Button ===== */
.cart-button{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .7rem;
  border-radius: 9999px;
  background: var(--chip-bg);
  border: 1.5px solid var(--chip-border);
  color: var(--text);
  text-decoration: none;
  box-shadow: var(--chip-shadow);
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
  margin-inline-end: 16px; /* зазор до профиля */
}

.cart-button:hover{
  transform: translateY(-1px);
  box-shadow: var(--chip-shadow-hover);
  border-color: rgba(0,0,0,.12);
}

.cart-button:active{ transform: translateY(0); box-shadow: var(--chip-shadow); }

.cart-button:focus-visible{
  outline: 3px solid rgba(0,0,255,.3);
  outline-offset: 2px;
}

/* Иконка */
.cart-icon{
  display: inline-grid; place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 2px 7px rgba(0,0,0,.06);
  transition: transform .15s ease;
}
.cart-button:hover .cart-icon{ transform: scale(1.05); }
.cart-icon i{ font-size: 1rem; }

/* Надпись — прячем на очень узких экранах */
.cart-label{
  font-weight: 700;
  font-size: .95rem;
}
@media (max-width: 520px){
  .cart-label{ display: none; }
  .cart-button{ padding: .45rem; } /* компактнее без текста */
}

/* Бейдж количества */
.cart-badge{
  position: absolute;
  top: -6px;
  inset-inline-end: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .92rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--accent-pink), #ff6b6b);
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
  border: 2px solid #fff;
  line-height: 1;
  transform: translateZ(0);
}

/* Пульс, когда >0 */
.cart-badge.pulse{
  animation: cartPulse 1.4s ease-in-out infinite;
}
@keyframes cartPulse{
  0%,100%{ transform: scale(1); box-shadow: 0 4px 12px rgba(0,0,0,.18); }
  50%    { transform: scale(1.08); box-shadow: 0 6px 16px rgba(0,0,0,.22); }
}

/* Reduce motion уважение */
@media (prefers-reduced-motion: reduce){
  .cart-button, .cart-icon, .cart-badge{ transition: none !important; animation: none !important; }
}

/* ==========================================================================
   FLASH / ALERTS
   ========================================================================== */
.flash-container{
  position: fixed;
  top: 110px;
  left: 50%;
  transform: translateX(-50%);
  width: auto; max-width: 80%;
  z-index: 1040;
  pointer-events: none;
  display: flex;
}

.alert{
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 12px 20px; border-radius: 20px;
  font-size: 1rem; font-weight: 600;
  max-width: 500px; min-width: 250px;
  box-shadow: 0 4px 10px rgba(0,0,0,.1);
  position: relative;
  border: 2px solid rgba(0,0,0,.2);
  opacity: 0; transform: translateY(-20px);
  transition: opacity .5s ease, transform .5s ease !important;
  pointer-events: auto;
}
.alert.fade-in { opacity: 1 !important; transform: translateY(0) !important; }
.alert.fade-out { opacity: 0 !important; transform: translateY(-20px) !important; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
/* ===== Classic Footer ===== */
.site-footer{
  background: var(--surface);
  color: var(--text);
  margin-top: auto;                 /* липнет к низу на коротких страницах */
  border-top: 1px solid rgba(0,0,0,.06);
}

/* тонкая бренд-полоса сверху (не кричащая) */
.site-footer::before{
  content:"";
  display:block;
  height:3px;
  background: linear-gradient(90deg,#0000CD,#C1205A,#00B0FF,#8A2BE2);
  background-size:300% 100%;
  animation: footerBar 12s ease infinite;
}
@keyframes footerBar{
  0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%}
}
@media (prefers-reduced-motion:reduce){ .site-footer::before{ animation:none; } }

/* Grid */
.footer-grid{
  display: grid;
  gap: 28px;
  padding: 28px 0 18px;
}

/* Desktop: бренд + 4 колонки */
@media (min-width: 1024px){
  .footer-grid{
    grid-template-columns: 2fr repeat(4, 1fr);
    align-items: start;
  }
}

/* Tablet: 2 колонки */
@media (min-width: 600px) and (max-width: 1023px){
  .footer-grid{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

/* Mobile: одна колонка */
@media (max-width: 599px){
  .footer-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 768px){
  .footer-grid{
    padding: 24px 16px 16px;  /* сверху / слева+справа / снизу */
  }

  .footer-bottom .footer-bottom-inner{
    padding: 10px 16px 16px;  /* добавили 16px слева+справа */
  }
}

@media (max-width: 480px){
  .footer-grid{
    padding-inline: 20px;
  }
  .footer-bottom .footer-bottom-inner{
    padding-inline: 20px;
  }
}

/* Brand block */
.footer-brand{
  display: flex; align-items: center; gap: 14px;
}
.footer-logo{
  display:inline-grid; place-items:center;
  width: 44px; height: 44px; border-radius: 12px;
  background: #0000CD;
  box-shadow: 0 4px 14px rgba(0,0,0,.10);
  overflow: hidden;
}
.footer-logo img{ width:100%; height:100%; object-fit: cover; }
.footer-brand-text{ line-height: 1.25; }
.footer-name{ font-weight: 900; letter-spacing: .2px; }
.footer-tagline{ color: var(--muted); margin: 2px 0 0; font-size: .92rem; }

/* Columns */
.footer-col{ min-width: 0; }
.footer-title{
  font-weight: 800;
  font-size: 1rem;
  margin: 0 0 10px;
  color: var(--text);
}
.footer-links{ margin: 0; padding: 0; list-style: none; }
.footer-links a{
  display: inline-block;
  padding: 6px 0;
  color: var(--muted);
  text-decoration: none;
  transition: color .2s ease, transform .12s ease;
}
.footer-links a:hover{ color: var(--accent-pink); transform: translateX(2px); }

/* ===== Footer bottom (responsive) ===== */
.footer-bottom{
  display:flex;
  border-top: 1px solid rgba(0,0,0,.06);
  background: rgba(0,0,0,.02);
  overflow-x: auto;
}
.footer-bottom .footer-bottom-inner{
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:center;
  gap:12px;
  flex-wrap:nowrap;
  white-space:nowrap;
  padding:12px 0 22px;
}

@media (max-width:420px){
  .footer-bottom .footer-bottom-inner{
    flex-wrap:wrap; white-space:normal; row-gap:6px;
  }
}

.footer-bottom .legal{ display:flex; gap:8px; align-items:center; }
.footer-bottom .copyright{ margin:0; font-weight:600; color:var(--muted); }
.footer-bottom .legal a{ flex-shrink:0; text-decoration:none; color:var(--muted); }
.footer-bottom .legal a:hover{ color:var(--accent-pink); }
.footer-bottom .legal span[aria-hidden="true"]{ opacity: .6; }

/* ===== Tablet (<= 768px): компактнее, всё ещё в одну строку ===== */
@media (max-width: 768px){
  .footer-bottom-inner{ gap: 8px; padding: 10px 0 12px; }
  .footer-bottom .legal{ gap: 6px; }
  .footer-bottom .copyright{ font-size: .95rem; }
}

/* ===== Mobile narrow (<= 480px): складываем в колонку ===== */
@media (max-width: 480px){
  .footer-bottom{ overflow-x: visible; }          /* скролл больше не нужен */
  .footer-bottom-inner{
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: normal;                           /* разрешаем перенос текста */
    min-width: 0;
    text-align: center;
  }
  .footer-bottom .legal{
    flex-wrap: wrap;
    gap: 6px 10px;
  }
  /* точки-разделители прячем, когда ссылки переносятся */
  .footer-bottom .legal span[aria-hidden="true"]{ display: none; }
}

/* ==========================================================================
   ACCESSIBILITY / POLISH
   ========================================================================== */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid rgba(0,0,255,.35);
  outline-offset: 2px;
  border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* Доп. утилита: сделать ссылку жирной (напр., для username) */
.bold-username { font-weight: 700; }
.bold-username:hover { color: var(--accent-pink) !important; text-decoration: none; }

/* ===========================================================
   RESPONSIVE (TABLET → ULTRAWIDE). Add at the end of main.css
   =========================================================== */

/* Tablet: 768–1023 */
@media (min-width: 768px) and (max-width: 1023px) {
  .container { max-width: 900px; padding-inline: 16px; }

  header { padding: 10px 12px; }
  .navigation-buttons {
    margin-left: 2%;
    gap: .35rem;
  }

  .nav-link { font-size: 1.0rem; padding: 8px; }

  /* Профиль-чип: компактнее, убираем Hello */
  .profile-chip { padding: .35rem .6rem; gap: .5rem; }
  .profile-chip .hello { display: none; }
  .profile-chip .username { font-size: .92rem; }
  .profile-chip .caret { width: 12px; height: 12px; }

  /* Корзина */
  .bi-cart-fill { font-size: 1.15rem; }
  #cart-count.badge { font-size: .6rem; padding: 3px 6px; }

  /* Алёрты ниже, чтоб не налезали на хедер */
  .flash-container { top: 96px; }
}

/* Small laptop: 1024–1279 */
@media (min-width: 1024px) and (max-width: 1279px) {
  .container { max-width: 1080px; padding-inline: 18px; }

  .navigation-buttons { margin-left: 6%; gap: .5rem; }
  .nav-link { font-size: 1.05rem; }

  .profile-chip { padding: .38rem .62rem; }
  .profile-chip .hello { display: inline; font-size: .84rem; }
  .profile-chip .username { font-size: .95rem; }
}

/* Laptop: 1280–1439 */
@media (min-width: 1280px) and (max-width: 1439px) {
  .container { max-width: 1200px; padding-inline: 20px; }

  .navigation-buttons { margin-left: 8%; gap: .6rem; }
  .nav-link { font-size: 1.08rem; }

  .profile-chip { padding: .4rem .65rem; gap: .55rem; }
  .profile-chip .username { font-size: .98rem; }
}

/* Desktop: 1440–1919 */
@media (min-width: 1440px) and (max-width: 1919px) {
  .container { max-width: 1320px; padding-inline: 22px; }

  .navigation-buttons { margin-left: 10%; gap: .7rem; }
  .nav-link { font-size: 1.1rem; }

  .profile-chip { transform: translateY(0); }
  .profile-chip .username { font-size: 1rem; }
  .bi-cart-fill { font-size: 1.25rem; }
}

/* Ultrawide: ≥1920 */
@media (min-width: 1920px) {
  .container { max-width: 1600px; padding-inline: 24px; }

  header { padding: 12px 24px; }
  .navigation-buttons { margin-left: 12%; gap: .8rem; }
  .nav-link { font-size: 1.12rem; }

  .profile-chip { padding: .45rem .7rem; gap: .6rem; }
  .profile-chip .hello { font-size: .9rem; }
  .profile-chip .username { font-size: 1.02rem; }
  .profile-chip .caret { width: 14px; height: 14px; }

  .flash-container { top: 120px; }
}


/* --- Cross-document page transition (Chrome View Transitions) --- */
@keyframes vt-fade-out {
  to { opacity: 0; transform: scale(.985) }
}
@keyframes vt-fade-in  {
  from { opacity: 0; transform: scale(1.01) }
  to   { opacity: 1; transform: none }
}

/* Снимки старой/новой страницы */
::view-transition-old(root) {
  animation: vt-fade-out .28s cubic-bezier(.2,.8,.2,1) both;
}
::view-transition-new(root) {
  animation: vt-fade-in  .38s cubic-bezier(.25,.1,.25,1) both;
}


/* ===== DEMO CTA (soft gradient drift + star sparkle) ===== */
.btn-demo{
  position:relative;
  display:inline-flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:2px;
  min-width:260px;
  padding:14px 22px;
  border:0;
  border-radius:16px;
  color:#fff!important;
  line-height:1.1;
  text-align:center;
  font-weight:700;
  box-shadow:
    0 10px 24px rgba(140,82,255,.30),
    0  2px  8px rgba(0,0,0,.12);

  /* базовый градиент */
  background:linear-gradient(100deg,#ff7a59 0%,#ff3d77 40%,#8c52ff 75%,#5ec6ff 100%);
  background-size:180% 180%;
  /* плавное «переливание» без резких переходов и без пробега по швам */
  animation:gff-demo-breath 10s ease-in-out infinite;
  transform:translateZ(0);
  backface-visibility:hidden;
  isolation:isolate;

  transition:transform .22s ease, box-shadow .28s ease;
}

/* аккуратная амплитуда, чтобы цвета мягко двигались и ничего не «заливало» */
@keyframes gff-demo-breath{
  0%   { background-position: 35% 50%; }
  50%  { background-position: 65% 50%; }
  100% { background-position: 35% 50%; }
}

.btn-demo__title{font-size:1.25rem;letter-spacing:.2px;font-weight:600;}
.btn-demo__sub{font-size:.8rem;font-weight:500;opacity:.92;}

/* hover/focus */
.btn-demo:hover{
  transform:translateY(-1px);
  box-shadow:
    0 14px 30px rgba(140,82,255,.35),
    0  4px 12px rgba(0,0,0,.14);
}
.btn-demo:active{ transform:translateY(0); }
.btn-demo:focus-visible{
  outline:3px solid rgba(94,198,255,.9);
  outline-offset:2px;
  box-shadow:
    0 0 0 6px rgba(94,198,255,.25),
    0 14px 30px rgba(140,82,255,.35);
}

/* --------- Star sparkle (как «сияние зуба» в рекламе) ---------
   Маленькая звезда: крест + диагональный крест.
   Появляется и исчезает мягко, без заливки всей площади. */

/* позицию звезды можно менять из JS, если захочешь */
.btn-demo{
  --sparkle-x: 72%;
  --sparkle-y: 38%;
}

/* горизонтально-вертикальные лучи */
.btn-demo::before{
  content:"";
  position:absolute;
  left:var(--sparkle-x); top:var(--sparkle-y);
  width:22px; height:22px;
  transform:translate(-50%,-50%) scale(.6);
  pointer-events:none;
  z-index:2;
  background:
    radial-gradient(circle, rgba(255,255,255,.95) 0 26%, rgba(255,255,255,0) 27%),
    linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.85), rgba(255,255,255,0)),
    linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.85), rgba(255,255,255,0));
  background-repeat:no-repeat;
  background-position:center, center, center;
  background-size:6px 6px, 100% 2px, 2px 100%;
  filter:drop-shadow(0 2px 6px rgba(255,255,255,.45));
  opacity:0;
  animation:gff-sparkle 3.8s ease-in-out infinite;
}

/* диагональные лучи — с микрозадержкой */
.btn-demo::after{
  content:"";
  position:absolute;
  left:var(--sparkle-x); top:var(--sparkle-y);
  width:22px; height:22px;
  transform:translate(-50%,-50%) rotate(45deg) scale(.6);
  pointer-events:none;
  z-index:2;
  background:
    linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.85), rgba(255,255,255,0)),
    linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.85), rgba(255,255,255,0));
  background-repeat:no-repeat;
  background-position:center, center;
  background-size:100% 2px, 2px 100%;
  filter:drop-shadow(0 2px 6px rgba(255,255,255,.45));
  opacity:0;
  animation:gff-sparkle 3.8s ease-in-out infinite .06s;
}

@keyframes gff-sparkle{
  0%, 68%   { opacity:0;   transform:translate(-50%,-50%) scale(.55) rotate(.001deg); }
  72%       { opacity:.95; transform:translate(-50%,-50%) scale(1.05) rotate(.001deg); }
  78%       { opacity:.70; transform:translate(-50%,-50%) scale(.90) rotate(.001deg); }
  85%       { opacity:0;   transform:translate(-50%,-50%) scale(.70) rotate(.001deg); }
  100%      { opacity:0; }
}

/* по желанию — «подталкивание» через JS */
.btn-demo.nudge{ animation:gff-demo-nudge .52s ease; }
@keyframes gff-demo-nudge{
  0%{transform:translateY(0) scale(1);}
  30%{transform:translateY(-2px) scale(1.02);}
  60%{transform:translateY(0) scale(.995);}
  100%{transform:translateY(0) scale(1);}
}

/* уважение reduced motion */
@media (prefers-reduced-motion:reduce){
  .btn-demo,
  .btn-demo::before,
  .btn-demo::after{ animation:none!important; }
  .btn-demo{ transition:none; }
}