/* =============================================
   БРЕНДБУК — СУШИ С ЛЮБОВЬЮ
   Версия 1.0
   Используется во всех проектах компании.
   ============================================= */

/* ------------------------------------------
   ЦВЕТА
------------------------------------------ */
:root {
  /* Фоны */
  --ssl-bg-page:       #FFFFFF;      /* Фон страницы — чистый белый */
  --ssl-bg-card:       #FDFAF6;      /* Фон карточек — молочный */
  --ssl-bg-card-hover: #FFF9F2;      /* Фон карточки при hover */

  /* Основные цвета бренда */
  --ssl-bordeau:       #8B2635;      /* Бордо — кнопки, шапка, акценты */
  --ssl-bordeau-dark:  #6B1B28;      /* Тёмное бордо — hover на кнопках */
  --ssl-bordeau-light: #F5E8EA;      /* Светлое бордо — фон тегов/бейджей */

  /* Золото — базовый цвет (для fallback и статичных мест) */
  --ssl-gold:          #D4AF37;
  --ssl-gold-light:    #FFE566;
  --ssl-gold-dark:     #7A5200;

  /* Текст */
  --ssl-text-primary:  #000000;      /* Заголовки, названия — чистый чёрный */
  --ssl-text-secondary:#444444;      /* Состав, описания */
  --ssl-text-muted:    #999999;      /* Граммы, штуки, второстепенное */

  /* Утилиты */
  --ssl-border:        rgba(0,0,0,0.07);
  --ssl-shadow-card:   0 2px 12px rgba(0,0,0,0.06);
  --ssl-shadow-hover:  0 8px 24px rgba(0,0,0,0.10);
  --ssl-radius-card:   14px;
  --ssl-radius-btn:    22px;
  --ssl-radius-sm:     8px;
}


/* ------------------------------------------
   ЗОЛОТО С ПЕРЕЛИВАНИЕМ
   3 луча, только в одну сторону,
   медленно с периодическим ускорением.
   Тёмно-золотой контур для чёткости букв.
------------------------------------------ */

/* Анимация — медленно с двумя всплесками */
@keyframes ssl-gold-flow {
  0%   { background-position: 0% 0%; }
  25%  { background-position: 30% 0%; }
  35%  { background-position: 50% 0%; }
  42%  { background-position: 62% 0%; }
  60%  { background-position: 72% 0%; }
  80%  { background-position: 90% 0%; }
  88%  { background-position: 110% 0%; }
  92%  { background-position: 130% 0%; }
  100% { background-position: 200% 0%; }
}

/* Градиент — 3 луча, золото почти всегда светлое */
.ssl-gold-text {
  background: linear-gradient(105deg,
    #C8960C 0%,
    #FFE566 12%,
    #FFF8CC 18%,
    #FFE566 24%,
    #C8960C 32%,
    #FFE566 44%,
    #FFF8CC 50%,
    #FFE566 56%,
    #C8960C 64%,
    #FFE566 76%,
    #FFF8CC 82%,
    #FFE566 88%,
    #C8960C 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  /* Тёплая гравировка — тёмно-золотой контур, без чёрного */
  filter:
    drop-shadow(0.5px  0.5px 0 #7A5200)
    drop-shadow(-0.5px -0.5px 0 #7A5200);
  animation: ssl-gold-flow 6s ease-in-out infinite;
}

/* Статичное золото — для мест без анимации */
.ssl-gold-static {
  background: linear-gradient(135deg, #7A5500, #C8960C, #FFE566, #C8960C, #7A5500);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  filter:
    drop-shadow(0.5px  0.5px 0 #7A5200)
    drop-shadow(-0.5px -0.5px 0 #7A5200);
}


/* ------------------------------------------
   КАРТОЧКА ТОВАРА
   - Фото приближается при hover
   - Цена оживает (статичное → анимированное)
------------------------------------------ */
.ssl-card {
  background: var(--ssl-bg-card);
  border-radius: var(--ssl-radius-card);
  border: 0.5px solid var(--ssl-border);
  padding: 12px;
  cursor: pointer;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
  overflow: hidden;
}

.ssl-card:hover {
  box-shadow: var(--ssl-shadow-hover);
  border-color: rgba(212, 175, 55, 0.35);
}

/* Обёртка фото — обрезает при zoom */
.ssl-card-img-wrap {
  overflow: hidden;
  border-radius: var(--ssl-radius-sm);
  margin-bottom: 10px;
}

/* Само фото — плавно приближается */
.ssl-card-img-wrap img {
  width: 100%;
  display: block;
  transition: transform 0.4s ease;
}

.ssl-card:hover .ssl-card-img-wrap img {
  transform: scale(1.12);
}

/* Название ролла — крупно, чёрный */
.ssl-card-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--ssl-text-primary);
  line-height: 1.2;
  margin-bottom: 4px;
}

/* Состав — средний, тёмно-серый */
.ssl-card-comp {
  font-size: 13px;
  font-weight: 600;
  color: var(--ssl-text-secondary);
  line-height: 1.4;
  margin-bottom: 8px;
}

/* Граммы и штуки — мелко, серо */
.ssl-card-weight {
  font-size: 11px;
  color: var(--ssl-text-muted);
  margin-top: 2px;
}

/* Цена — статичная до hover */
.ssl-card-price {
  font-size: 19px;
  font-weight: 700;
  /* Статичное золото */
  background: linear-gradient(135deg, #7A5500, #C8960C, #FFE566, #C8960C, #7A5500);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  filter:
    drop-shadow(0.5px  0.5px 0 #7A5200)
    drop-shadow(-0.5px -0.5px 0 #7A5200);
  transition: filter 0.3s;
}

/* Цена при hover — оживает */
.ssl-card:hover .ssl-card-price {
  background: linear-gradient(105deg,
    #C8960C 0%,
    #FFE566 12%, #FFF8CC 18%, #FFE566 24%,
    #C8960C 32%,
    #FFE566 44%, #FFF8CC 50%, #FFE566 56%,
    #C8960C 64%,
    #FFE566 76%, #FFF8CC 82%, #FFE566 88%,
    #C8960C 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: ssl-gold-flow 6s ease-in-out infinite;
  filter:
    drop-shadow(0.5px  0.5px 0 #7A5200)
    drop-shadow(-0.5px -0.5px 0 #7A5200)
    drop-shadow(0 0 6px rgba(200,150,0,0.3));
}


/* ------------------------------------------
   КНОПКИ
------------------------------------------ */

/* Основная — бордо */
.ssl-btn {
  display: inline-block;
  background: var(--ssl-bordeau);
  color: #ffffff;
  font-size: 13px;
  font-weight: 500;
  padding: 9px 20px;
  border-radius: var(--ssl-radius-btn);
  border: none;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
  text-decoration: none;
}

.ssl-btn:hover {
  background: var(--ssl-bordeau-dark);
  transform: translateY(-1px);
}

.ssl-btn:active {
  transform: scale(0.97);
}

/* Маленькая кнопка «В корзину» */
.ssl-btn-sm {
  font-size: 11px;
  padding: 5px 12px;
  border-radius: 12px;
}

/* Золотая кнопка — акции, спецпредложения */
.ssl-btn-gold {
  background: linear-gradient(105deg,
    #C8960C 0%, #FFE566 30%, #FFF8CC 50%,
    #FFE566 70%, #C8960C 100%
  );
  background-size: 200% auto;
  color: #1A0A0D;
  font-weight: 700;
  animation: ssl-gold-flow 6s ease-in-out infinite;
}

.ssl-btn-gold:hover {
  background: linear-gradient(105deg,
    #C8960C 0%, #FFE566 30%, #FFF8CC 50%,
    #FFE566 70%, #C8960C 100%
  );
  background-size: 200% auto;
  filter: brightness(1.05);
  transform: translateY(-1px);
}


/* ------------------------------------------
   ТИПОГРАФИКА — ИЕРАРХИЯ
   ДЕСКТОП (≥768px) — базовые размеры
   МОБИЛЬНЫЙ (<768px) — уменьшенные через @media

   ПРИНЦИП:
   ВАЖНОЕ  → крупно + жирно (название, состав)
   СРЕДНЕЕ → читаемо (цена, кнопка)
   ТИХОЕ   → мелко + серо (граммы, рубли, штуки)
------------------------------------------ */

/* Главный заголовок страницы — герой, слоган */
.ssl-h1 {
  font-size: 42px;
  font-weight: 700;
  color: var(--ssl-text-primary);
  line-height: 1.15;
  letter-spacing: -0.5px;
}

/* Заголовок секции — "Роллы", "Сеты", "Акции" */
.ssl-h2 {
  font-size: 28px;
  font-weight: 700;
  color: var(--ssl-text-primary);
  line-height: 1.2;
}

/* Заголовок блока — подзаголовки внутри секций */
.ssl-h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--ssl-text-primary);
  line-height: 1.3;
}

/* *** НАЗВАНИЕ РОЛЛА — самый важный текст в карточке *** */
.ssl-card-name,
.ssl-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--ssl-text-primary);
  line-height: 1.2;
  letter-spacing: -0.2px;
}

/* *** СОСТАВ — второй по важности *** */
.ssl-card-comp,
.ssl-body {
  font-size: 14px;
  font-weight: 600;
  color: var(--ssl-text-secondary);
  line-height: 1.5;
}

/* *** ЦЕНА — важная, золотая, крупная *** */
.ssl-card-price {
  font-size: 22px;
  font-weight: 700;
}

/* *** ВТОРОСТЕПЕННОЕ — граммы, штуки, знак ₽ рядом с ценой *** */
.ssl-card-weight,
.ssl-caption {
  font-size: 11px;
  font-weight: 400;
  color: var(--ssl-text-muted);
  line-height: 1.4;
}

/* Знак ₽ и "г", "шт" — ещё тише чем само число */
.ssl-unit {
  font-size: 13px;
  font-weight: 400;
  color: var(--ssl-text-muted);
}

/* Навигация, лейблы */
.ssl-nav-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--ssl-text-secondary);
}

/* Описательный текст — о нас, доставка */
.ssl-text {
  font-size: 15px;
  font-weight: 400;
  color: var(--ssl-text-secondary);
  line-height: 1.7;
}


/* ------------------------------------------
   АДАПТИВ — МОБИЛЬНЫЙ (<768px)
------------------------------------------ */
@media (max-width: 767px) {

  .ssl-h1         { font-size: 28px; letter-spacing: -0.3px; }
  .ssl-h2         { font-size: 22px; }
  .ssl-h3         { font-size: 17px; }

  .ssl-card-name,
  .ssl-title      { font-size: 16px; }

  .ssl-card-comp,
  .ssl-body       { font-size: 12px; }

  .ssl-card-price { font-size: 18px; }

  .ssl-card-weight,
  .ssl-caption    { font-size: 10px; }

  .ssl-unit       { font-size: 11px; }
  .ssl-nav-link   { font-size: 13px; }
  .ssl-text       { font-size: 14px; line-height: 1.6; }

  .ssl-btn        { font-size: 14px; padding: 10px 20px; }
  .ssl-btn-sm     { font-size: 12px; padding: 7px 14px; }
}


/* ------------------------------------------
   АДАПТИВ — МАЛЕНЬКИЙ МОБИЛЬНЫЙ (<380px)
------------------------------------------ */
@media (max-width: 379px) {

  .ssl-h1         { font-size: 24px; }
  .ssl-h2         { font-size: 19px; }
  .ssl-h3         { font-size: 15px; }

  .ssl-card-name,
  .ssl-title      { font-size: 14px; }

  .ssl-card-comp,
  .ssl-body       { font-size: 11px; }

  .ssl-card-price { font-size: 16px; }

  .ssl-card-weight,
  .ssl-caption    { font-size: 10px; }
}


/* Второстепенное (граммы, категории) — алиас для совместимости */
.ssl-caption {
  font-size: 11px;
  font-weight: 400;
  color: var(--ssl-text-muted);
}


/* ------------------------------------------
   ЛОГОТИП / НАЗВАНИЕ БРЕНДА
------------------------------------------ */
.ssl-logo {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: linear-gradient(105deg,
    #C8960C 0%, #FFE566 20%, #FFF8CC 30%,
    #FFE566 40%, #C8960C 55%,
    #FFE566 70%, #FFF8CC 80%,
    #FFE566 90%, #C8960C 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  filter:
    drop-shadow(0.5px  0.5px 0 #7A5200)
    drop-shadow(-0.5px -0.5px 0 #7A5200);
  animation: ssl-gold-flow 8s ease-in-out infinite;
}


/* ------------------------------------------
   БЕЙДЖИ
------------------------------------------ */
.ssl-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
}

.ssl-badge-sale {
  background: var(--ssl-bordeau-light);
  color: var(--ssl-bordeau);
}

.ssl-badge-new {
  background: #EAF3DE;
  color: #3B6D11;
}

.ssl-badge-hit {
  background: linear-gradient(105deg, #C8960C, #FFE566, #C8960C);
  background-size: 200% auto;
  color: #1A0A0D;
  animation: ssl-gold-flow 4s ease-in-out infinite;
}