/* SkyYou Home — дизайн-система по skyyou-design.md
 *
 * Подключается ПОСЛЕДНИМ в <head>, поэтому перебивает инлайновые стили шаблонов
 * без их переписывания. Старые переменные (--accent, --bd, --t…) nameренно
 * переопределены новыми значениями: так вся вёрстка, которая на них ссылается,
 * переезжает на новую палитру разом.
 *
 * Аудитория 50+: ничего мельче 16px, кнопки от 56px, контраст не ниже 7:1.
 */

:root {
  /* палитра ТЗ */
  --navy:       #1B2A5B;
  --navy-2:     #2C3E6E;
  --blue:       #2F6FE0;
  --blue-hover: #245CC2;
  --blue-light: #E8F1FF;
  --blue-mist:  #F4F8FF;
  --white:      #FFFFFF;
  --line:       #D6E2F5;
  --star:       #F5B301;

  --shadow:     0 12px 32px rgba(27, 42, 91, .10);
  --shadow-sm:  0 4px 14px rgba(27, 42, 91, .08);

  --radius-xl:  32px;
  --radius-lg:  24px;
  --radius-md:  16px;
  --radius-btn: 999px;

  /* мост со старыми именами — их использует существующая вёрстка */
  --bg:       #FFFFFF;
  --card:     #FFFFFF;
  --t:        var(--navy);
  --t2:       var(--navy-2);
  --t3:       var(--navy-2);   /* светло-серого текста на сайте больше нет */
  --accent:   var(--blue);
  --accent-h: var(--blue-hover);
  --bd:       var(--line);
  --r:        var(--radius-lg);
  --gold:     var(--blue);
  --green:    #1E9E5A;
  --red:      #D64545;
}

/* ---------- типографика ---------- */

body {
  font-size: 20px;
  line-height: 1.55;
  color: var(--navy);
  background: var(--white);
}

h1, h2, h3, .sec-title, .product-title, .hero h1 {
  color: var(--navy);
  letter-spacing: -.01em;
}

h1, .hero h1, .hero-overlay h1 { font-size: 56px; line-height: 1.1; font-weight: 600; }
h2, .sec-title                 { font-size: 40px; line-height: 1.15; font-weight: 600; }
h3, .card-name, .product-title { font-size: 26px; line-height: 1.25; font-weight: 600; }

/* нижняя граница читаемости: подписи, хинты, крошки */
.card-desc, .card-hint, .crumbs, .sec-count, .spec-label, .product-hint,
.foot-copy, small, .ph-rev-date {
  font-size: 16px;
  color: var(--navy-2);
}

/* ---------- кнопки ---------- */

.btn {
  font-size: 20px;
  font-weight: 600;
  border-radius: var(--radius-btn);
  padding: 0 32px;
  height: 60px;
  transition: background .2s, box-shadow .2s, transform .2s;
}
.btn-dark, .btn-primary {
  background: var(--blue);
  color: var(--white);
  border: none;
}
.btn-dark:hover, .btn-primary:hover {
  background: var(--blue-hover);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.btn-outline {
  background: var(--white);
  color: var(--blue);
  border: 2px solid var(--blue);
}
.btn-outline:hover { border-color: var(--blue-hover); color: var(--blue-hover); background: var(--blue-mist); }
.btn-sm { height: 56px; font-size: 18px; padding: 0 24px; }

/* ---------- карточка товара ---------- */

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 16px;
}
.card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.card-img { border-radius: var(--radius-md); aspect-ratio: 4 / 3; }
.card-name { font-size: 22px; font-weight: 600; color: var(--navy); }
.card-price, .price, .card-footer .price { font-size: 24px; font-weight: 700; color: var(--navy); }
.card-hint { color: var(--navy-2); }
.card-badge {
  background: var(--blue-light);
  color: var(--navy);
  font-size: 16px;
  font-weight: 600;
  border-radius: var(--radius-md);
  padding: 6px 14px;
}

/* ---------- формы ---------- */

.popup-field, input[type="text"], input[type="tel"], input[type="email"] {
  height: 60px;
  border-radius: var(--radius-md);
  border: 2px solid var(--line);
  font-size: 20px;
  color: var(--navy);
  padding: 0 20px;
  background: var(--white);
}
/*
 * Поля в корзине стоят парой в одной строке, и телефону не хватало 24 px:
 * общее правило выше даёт шрифт 20px и отступы по 20px, а колонки делились
 * поровну — номер «+7 (999) 995-55-44» обрезался на последних цифрах.
 * Шрифт не трогаем (по ТЗ ничего мельче 16px): отдаём телефону больше места
 * и ужимаем боковые отступы.
 */
.ph-form-row { grid-template-columns: 1fr 1.3fr !important; gap: 10px !important; }
.ph-form-row .ph-input { padding-left: 14px !important; padding-right: 14px !important; }

/* На телефоне двум полям в строке места нет: даже с ужатыми отступами номеру
   не хватало 36 px. Ставим их друг под другом — телефон получает всю ширину. */
@media (max-width: 560px) {
  .ph-form-row { grid-template-columns: 1fr !important; }
}

.popup-field:focus, input[type="tel"]:focus, input[type="text"]:focus {
  border-color: var(--blue);
  outline: none;
}
::placeholder { color: var(--navy-2); opacity: 1; }

/* ---------- шапка и секции ---------- */

header { background: var(--white); border-bottom: 1px solid var(--line); }
.hdr { min-height: 88px; }
.hdr-nav a { font-size: 18px; font-weight: 500; color: var(--navy); }
.hdr-nav a:hover { color: var(--blue); }
.hdr-phone { font-size: 24px; font-weight: 700; color: var(--navy); }
.wrap { max-width: 1280px; }
.sec { padding: 96px 0; }

/* чередование белого и туманно-голубого фона секций */
.sec:nth-of-type(even) { background: var(--blue-mist); }

/* ---------- правки под ТЗ ---------- */

/* телефон — одной строкой, иначе на 24px рвётся посреди номера */
.hdr-phone, .hdr-phone a { white-space: nowrap; }

/* «Чего нет на сайте»: wishlist-сердечки убраны с карточек */
.ph-fav-toggle, [data-fav-toggle] { display: none !important; }

/* верхняя полоса преимуществ: голубая подложка вместо чёрной, высота 48 по ТЗ */
#phDeliveryStrip {
  background: var(--blue-light) !important;
  color: var(--navy) !important;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px !important;
  font-weight: 600;
}
#phDeliveryStrip * { color: var(--navy) !important; font-size: 16px !important; }

/* ---------- логотип ---------- */

/* было 22px + капс 9px — вдвое мельче рендера и против ТЗ (ничего мельче 16px) */
/* flex-shrink:0 и nowrap обязательны: в шапке лого зажимается меню и рвётся
   на строки — «SkyYou / Home», «Текстиль / для уюта и / сна» */
.logo {
  display: inline-flex !important; flex-direction: row !important;
  align-items: center; gap: 12px; flex-shrink: 0; white-space: nowrap;
}
/* Домик опущен на строку УТП, а не по центру двух строк.
   Отрицательный margin-bottom гасит прирост высоты: без него шапка
   раздувается на величину сдвига и разъезжается вся её сетка. */
/* Плашки под знаком больше нет: зебра сама сине-белая, на синем квадрате
   её полосы сливались бы с фоном. Домик там был обобщённой иконкой. */
/* Знак ровно по высоте текстового блока: верх — по названию, низ — по строке
   УТП. Прежде он был опущен на середину УТП и свисал ниже подписи на 19 px,
   отчего логотип выглядел съехавшим. */
.logo-badge {
  width: 46px; height: 46px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--blue-light); border-radius: 13px; padding: 4px;
}
.logo-badge img { width: 100%; height: 100%; object-fit: contain; display: block; }
.logo-text { display: flex; flex-direction: column; line-height: 1.1; white-space: nowrap; }
.logo-mark {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 26px !important; font-weight: 600; letter-spacing: -.01em;
  color: var(--navy) !important; text-transform: none !important;
}
.logo-sub {
  font-size: 13px !important; font-weight: 400; letter-spacing: 0 !important;
  text-transform: none !important; color: var(--navy-2) !important; margin-top: 3px;
}

@media (max-width: 640px) {
  /* на мобильной УТП скрыт — опускать домик не подо что */
  .logo { align-items: center; }
  .logo-badge { width: 42px; height: 42px; margin-top: 0; margin-bottom: 0; padding: 4px; }
  .logo-mark { font-size: 21px !important; }
  .logo-sub { display: none; }
}

/* ---------- подвал ---------- */

/* светло-голубая подложка вместо заливки акцентом: подвал перестаёт спорить
   с синими кнопками и попадает в общую светлую гамму */
footer {
  background: var(--blue-light) !important;
  color: var(--navy) !important;
  border-top: 1px solid var(--line);
}
footer a { color: var(--navy) !important; }
footer a:hover { color: var(--blue) !important; }
footer p, footer span, footer div { color: var(--navy-2) !important; }
footer h3, footer h4, footer strong, footer b { color: var(--navy) !important; }

/* логотип был перекрашен в белый под тёмный фон — на светлом он бы исчез */
/* Подвальный логотип — та же эмблема, что в шапке, но по синему фону.
   Домик здесь не опускаем: строки УТП в подвале нет, опускать не подо что. */
.foot-logo {
  display: inline-flex !important; align-items: center; gap: 12px;
  text-decoration: none;
}
/* Подвал светло-голубой, а не тёмный: белый логотип на нём не читался.
   Оставляем ту же синюю плашку и тёмное название, что в шапке. */
.foot-logo .logo-badge { width: 52px; height: 52px; margin: 0; background: #fff; }
/* В шаблоне у подвального логотипа висит filter: brightness(0) invert(1) —
   он перекрашивал прежнюю тёмную картинку в белую. Новый знак от него
   становился белым на белой плашке, то есть исчезал. */
.foot-logo .logo-badge img { filter: none !important; height: 100%; width: 100%; }
.foot-logo .logo-mark { color: var(--navy) !important; font-size: 24px !important; }

.foot-copy {
  color: var(--navy-2) !important;
  border-top: 1px solid rgba(27, 42, 91, .12) !important;
  font-size: 14px !important;
}

/* ---------- отзывы, FAQ ---------- */

.ph-rev-card, .review-card { border-radius: var(--radius-lg); padding: 24px; background: var(--white); border: 1px solid var(--line); }
.ph-rev-text, .review-text { font-size: 18px; color: var(--navy); }
.faq-q, .faq-item summary { min-height: 64px; font-size: 20px; font-weight: 600; color: var(--navy); }
.faq-a { font-size: 18px; color: var(--navy-2); }

/* ---------- мобила ---------- */

@media (max-width: 768px) {
  body { font-size: 18px; }
  h1, .hero h1, .hero-overlay h1 { font-size: 36px; line-height: 1.15; }
  h2, .sec-title                 { font-size: 30px; }
  h3, .card-name, .product-title { font-size: 22px; }
  .btn { height: 56px; font-size: 18px; width: 100%; }
  .btn-sm { height: 52px; font-size: 16px; }
  .sec { padding: 56px 0; }
  .card-price, .price { font-size: 22px; }
}