/* ==========================================================================
   design-v2.css — Modern refresh layer (v2)
   --------------------------------------------------------------------------
   Только визуальные оверрайды. Бренд сохранён: rose #C2187A,
   Cormorant Garamond + Montserrat, светлая тема.
   Никаких изменений вёрстки/логики — чистые CSS-свойства поверх слоёв ниже.

   ОТКАТ:
   1) Удалить строку <link rel="stylesheet" href="css/design-v2.css?v=1">
      из index.html и category.html (и коммит).
   2) Либо: git checkout pre-design-v2 -- css/design-v2.css index.html category.html
      и запушить.
   ========================================================================== */

:root {
  /* Слоистые тени — мягче и «дороже» */
  --shadow-sm: 0 1px 2px rgba(74, 34, 58, .05), 0 2px 8px rgba(74, 34, 58, .04);
  --shadow-md: 0 4px 12px rgba(74, 34, 58, .06), 0 12px 32px rgba(74, 34, 58, .08);
  --shadow-lg: 0 8px 24px rgba(74, 34, 58, .08), 0 24px 64px rgba(74, 34, 58, .12);
  --shadow-hover: 0 12px 28px rgba(194, 24, 122, .14), 0 28px 60px rgba(74, 34, 58, .10);
  --ring: 0 0 0 4px rgba(194, 24, 122, .18);
  --grad-primary: linear-gradient(135deg, #D43C92 0%, var(--primary) 55%, var(--primary-dark) 100%);
  --border-soft: rgba(194, 24, 122, .10);
}

/* --- Фон: мягкие розовые «пятна света» (декор, без вёрстки) --- */
body {
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(194, 24, 122, .06), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(230, 116, 185, .07), transparent 55%),
    var(--bg-white);
}

/* --- Выделение и скроллбар --- */
::selection { background: var(--primary); color: #fff; }
* { scrollbar-width: thin; scrollbar-color: rgba(194, 24, 122, .4) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(194, 24, 122, .45), rgba(194, 24, 122, .25));
  border-radius: 8px;
  border: 2px solid var(--bg-white);
}
::-webkit-scrollbar-track { background: transparent; }

/* --- Фокус для клавиатуры --- */
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 6px; }

/* --- Убираем синюю подсветку браузера при тапе/клике --- */
html { -webkit-tap-highlight-color: transparent; }
.category-card, .product-card, .btn, .cart-btn, .social-link, .badge {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
.category-card, .btn, .cart-btn, .social-link { user-select: none; }

/* Розовый отклик нажатия на карточке категории вместо синего выделения */
.category-card:active { transform: translateY(-2px) scale(.98); box-shadow: var(--shadow-sm); }

/* --- Навбар: стекло --- */
.navbar {
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border-bottom: 1px solid var(--border-soft);
}
.navbar.scrolled { background: rgba(255, 255, 255, .85); box-shadow: var(--shadow-sm); }

/* --- Кнопки --- */
.btn {
  transition:
    transform .2s cubic-bezier(.22, 1, .36, 1),
    box-shadow .25s ease,
    background-color .25s ease,
    color .2s ease;
}
.btn-primary {
  background: var(--grad-primary);
  box-shadow: 0 4px 14px rgba(194, 24, 122, .28), 0 1px 3px rgba(74, 34, 58, .12);
}
.btn-primary:hover {
  background: var(--grad-primary);
  filter: brightness(1.05);
  box-shadow: 0 8px 22px rgba(194, 24, 122, .38), 0 2px 6px rgba(74, 34, 58, .10);
}
.btn-outline {
  border-color: rgba(194, 24, 122, .45);
  background: rgba(255, 255, 255, .6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.btn-outline:hover { background: var(--primary); border-color: var(--primary); }

/* --- Карточки категорий и товаров --- */
.category-card, .product-card { box-shadow: var(--shadow-sm); }
.category-card {
  background: linear-gradient(180deg, #fff 0%, #FFFDFE 100%);
  border: 1px solid var(--border-soft);
}
.product-card { border: 1px solid rgba(74, 34, 58, .06); }
.category-card:hover, .product-card:hover {
  box-shadow: var(--shadow-hover);
  border-color: rgba(194, 24, 122, .25);
}

/* --- Заголовки секций: акцентная линия --- */
.section-title { position: relative; }
.section-title::after {
  content: '';
  display: block;
  width: 56px;
  height: 3px;
  margin: 14px auto 0;
  border-radius: 99px;
  background: var(--grad-primary);
}
.section-desc { color: var(--text-medium); }

/* --- Цена: пилюля --- */
.product-price {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 99px;
  background: var(--secondary);
  color: var(--primary-dark);
  font-weight: 700;
}

/* --- Бейджи («Хит», счётчик корзины) --- */
.product-badge,
.badge-text {
  background: var(--grad-primary);
  box-shadow: 0 2px 8px rgba(194, 24, 122, .3);
}

/* --- Кнопка добавления в корзину --- */
.product-card .btn-add {
  background: var(--grad-primary);
  box-shadow: 0 2px 8px rgba(194, 24, 122, .25);
}

/* --- Формы --- */
.order-form-input,
.form-input,
.login-input {
  border: 1.5px solid rgba(74, 34, 58, .14);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.order-form-input:focus,
.form-input:focus,
.login-input:focus {
  border-color: var(--primary);
  box-shadow: var(--ring);
  outline: none;
}

/* --- Тост --- */
.toast {
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-soft);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* --- Footer: градиентная кромка --- */
.footer { border-top: 3px solid transparent; border-image: linear-gradient(90deg, transparent, rgba(194, 24, 122, .35), transparent) 1; }

/* --- Модалка --- */
.modal-card { box-shadow: var(--shadow-lg); }

/* --- Плавный скролл (reduced-motion гасит его в motion.css) --- */
html { scroll-behavior: smooth; }

/* --- PIN-блок в модалке напоминаний --- */
.pin-box {
  background: linear-gradient(180deg, #fff 0%, var(--bg-light) 100%);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 20px 18px 16px;
  margin: 12px 0;
}
.pin-box-inner { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pin-icon { font-size: 28px; }
.pin-title {
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 700;
  color: var(--text-dark);
  text-align: center;
  line-height: 1.3;
}
#birthdayPin {
  width: 170px;
  text-align: center;
  font-size: 22px;
  letter-spacing: 10px;
  padding: 10px 6px;
  border: 1.5px solid rgba(194, 24, 122, .25);
  border-radius: 12px;
  background: var(--bg-white);
  color: var(--text-dark);
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
#birthdayPin:focus { border-color: var(--primary); box-shadow: var(--ring); }
.pin-btn { min-width: 190px; }
.pin-error { font-size: 12px; color: var(--primary); min-height: 16px; text-align: center; line-height: 1.4; }

/* --- Подсказка в блоке подтверждения --- */
.pin-hint { font-size: 12px; color: var(--text-medium); text-align: center; line-height: 1.5; margin: 0; }

/* --- Кнопка «Сменить номер» (заметная) --- */
.bday-change-phone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 12px;
  padding: 10px 18px;
  border: 1.5px dashed var(--primary-light);
  border-radius: 12px;
  background: var(--secondary);
  color: var(--primary-dark);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}
.bday-change-phone:hover { background: var(--primary); border-color: var(--primary); color: #fff; transform: translateY(-1px); }
.bday-change-phone:active { transform: scale(.98); }