/** Shopify CDN: Minification failed

Line 355:0 Unexpected "}"
Line 1518:0 Expected "}" to go with "{"

**/
/* ============================================
   GLOBAL DESIGN TOKENS — 28 Health is Wealth
   ============================================ */

:root {
  /* Colors */
  --color-accent: #333333;
  --color-brand: #BFB6A8;
  --color-bg-base: #F8F6F2;
  --color-bg-section: #EAE4DB;
  --color-text-primary: #333333;
  --color-btn-primary-bg: #333333;
  --color-btn-primary-text: #F8F6F2;
  --content-width: 1200px;


  /* Typography */
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body: 'Raleway', sans-serif;
  --font-accent: 'Anonymous Pro', monospace;

  /* Spacing — Desktop */
  --spacing-section-v: 80px;
  --spacing-section-h: 0px;
  --spacing-h1-gap: 24px;
  --spacing-h2-gap: 32px;
  --spacing-gap-20: 20px;
  --spacing-card-img: 16px;
  --spacing-card-header: 8px;
  --spacing-12: 12px;

  /* Border Radius */
  --radius-base: 12px;
  --radius-small: 4px;

  /* Transitions */
  --transition-base: 0.25s ease;
}

/* Spacing — Mobile */
@media screen and (max-width: 749px) {
  :root {
    --spacing-section-v: 64px;
    --spacing-section-h: 16px;
    --spacing-h1-gap: 20px;
    --spacing-card-img: 12px;
    --spacing-card-header: 4px;
  }
}

/* Base */
body {
  background-color: var(--color-bg-base);
  color: var(--color-text-primary);
  font-family: var(--font-body);
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--color-text-primary);
}
/* Все кнопки — заглавные */
.hero-banner__btn,
.skin-focus__card-btn,
.newsletter__btn {
  text-transform: uppercase;
}
/* Все кнопки — hover чуть светлее графита */
.hero-banner__btn:hover,
.skin-focus__card-btn:hover,
.newsletter__btn:hover {
  background-color: #555555;
  color: var(--color-btn-primary-text);
  border-color: #555555;
}


/* ============================================
   HERO BANNER
   ============================================ */

.hero-banner {
  position: relative;
  width: 100%;
  height: var(--hero-height, 600px);
  background-color: var(--hero-bg, var(--color-bg-base));
  overflow: hidden;
}

.hero-banner__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-banner__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

.hero-banner__bg--placeholder {
  background-color: var(--color-bg-section);
}

.hero-banner__container {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  align-items: flex-end;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--spacing-section-h);
}

.hero-banner__content {
  display: flex;
  flex-direction: column;
  max-width: 500px;
  padding-bottom: var(--spacing-section-v);
}

.hero-banner__heading {
  font-family: var(--font-heading);
  font-size: 48px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--color-text-primary);
  margin: 0 0 var(--spacing-h1-gap) 0;
}

.hero-banner__subheading {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text-primary);
  margin: 0 0 var(--spacing-h2-gap) 0;
  max-width: 420px;
}

.hero-banner__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 32px;
  background-color: var(--color-btn-primary-bg);
  color: var(--color-btn-primary-text);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-decoration: none;
  border-radius: var(--radius-base);
  border: 1px solid var(--color-btn-primary-bg);
  transition: background-color var(--transition-base), color var(--transition-base);
  align-self: flex-start;
}

.hero-banner__btn:hover {
  background-color: transparent;
  color: var(--color-btn-primary-bg);
}

@media screen and (max-width: 749px) {
  .hero-banner {
    height: auto;
    min-height: 500px;
  }

  .hero-banner__bg {
    position: relative;
    height: 300px;
  }

  .hero-banner__container {
    position: relative;
    height: auto;
  }

  .hero-banner__heading {
    font-size: 36px;
  }

  .hero-banner__subheading {
    font-size: 16px;
  }
}


/* ============================================
   LIMITED-TIME OFFERS
   ============================================ */

.limited-offers {
  background-color: var(--color-bg-base);
  padding: var(--spacing-section-v) 0;
}
.limited-offers__inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--spacing-section-h);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-h2-gap);
}

.limited-offers__heading {
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 500;
  color: var(--color-text-primary);
  margin: 0;
}

.limited-offers__grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-gap-20);
}

.limited-offers__card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-card-img);
  width: 285px;
}

.limited-offers__card-image-wrap {
  display: block;
  width: 285px;
  height: 285px;
  border-radius: var(--radius-base);
  overflow: hidden;
  flex-shrink: 0;
}

.limited-offers__card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-base);
}

.limited-offers__card-image-wrap:hover .limited-offers__card-image {
  transform: scale(1.03);
}

.limited-offers__card-placeholder {
  width: 100%;
  height: 100%;
  background: var(--color-bg-section);
}

.limited-offers__card-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-card-header);
}

.limited-offers__card-info {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-card-header);
}

.limited-offers__card-title {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
}

.limited-offers__card-desc {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text-primary);
  line-height: 1.5;
  margin: 0;
}

.limited-offers__card-prices {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
}

.limited-offers__price {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.limited-offers__price--old {
  text-decoration: line-through;
  opacity: 0.5;
}

@media screen and (max-width: 749px) {
  .limited-offers__grid {
    flex-direction: column;
  }

  .limited-offers__card {
    width: 100%;
  }

  .limited-offers__card-image-wrap {
    width: 100%;
    height: 280px;
  }

  .limited-offers__heading {
    font-size: 32px;
  }
}
/* ============================================
   HEADER — Точные отступы 120px
   ============================================ */

.header-wrapper {
  background-color: #E0D8CC !important;
  border-bottom: none !important;
  width: 100% !important;
}

.header {
  height: 70px !important;
  min-height: 70px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  max-width: var(--content-width) !important;
  margin: 0 auto !important;
  padding-left: var(--spacing-section-h) !important;
  padding-right: var(--spacing-section-h) !important;
}
}

/* Остальные стили (лого, меню, иконки) остаются прежними */
.header__heading { margin: 0 !important; line-height: 0 !important; }
.header__inline-menu { justify-self: center; }
.header__icons { justify-self: end; gap: 10px; }

.header__icon {
  background-color: #EAE4DB !important;
  border-radius: 9px !important;
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
/* ============================================
   BEFORE & AFTERS
   ============================================ */

.before-afters {
  background-color: var(--color-bg-section);
  padding: var(--spacing-section-v) 0;
}
.before-afters__inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--spacing-section-h);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-h2-gap);
}

.before-afters__heading {
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 500;
  color: var(--color-text-primary);
  margin: 0;
  text-align: center;
}

/* Grid — 3 карточки в ряд */
.before-afters__grid {
  display: flex;
  gap: var(--spacing-gap-20); /* 20px */
}

/* Карточка */
.before-afters__card {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-card-img); /* 16px → 12px mobile */
}

/* Изображение */
.before-afters__card-image-wrap {
  width: 100%;
  aspect-ratio: 387 / 386; /* Почти квадратное из макета */
  border-radius: var(--radius-base); /* 12px */
  overflow: hidden;
}

.before-afters__card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-base);
}

.before-afters__card-image-wrap:hover .before-afters__card-image {
  transform: scale(1.03);
}

.before-afters__card-placeholder {
  width: 100%;
  height: 100%;
  background: var(--color-bg-base);
}

/* Текст карточки */
.before-afters__card-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-card-header); /* 8px → 4px mobile */
}

.before-afters__card-title {
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
}

.before-afters__card-meta {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-card-header); /* 8px → 4px mobile */
}

.before-afters__card-author {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text-primary);
  margin: 0;
}

.before-afters__card-quote {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text-primary);
  line-height: 1.5;
  margin: 0;
}

/* Mobile */
@media screen and (max-width: 749px) {
  .before-afters__grid {
    flex-direction: column;
  }

  .before-afters__heading {
    font-size: 32px;
  }

  .before-afters__card-title {
    font-size: 16px;
  }
}
/* ============================================
   WHAT'S YOUR SKIN FOCUS
   ============================================ */

.skin-focus {
  background-color: var(--color-bg-base);
  padding: var(--spacing-section-v) 0;
}
.skin-focus__inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--spacing-section-h);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-h2-gap);
}

.skin-focus__heading {
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 500;
  color: var(--color-text-primary);
  margin: 0;
  text-align: center;
}

/* Grid — 4 карточки в ряд */
.skin-focus__grid {
  display: flex;
  gap: var(--spacing-gap-20); /* 20px */
}

/* Карточка */
.skin-focus__card {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-card-img); /* 16px → 12px mobile */
  justify-content: space-between;
}

/* Верхняя часть: изображение + текст */
.skin-focus__card-top {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-card-img); /* 16px → 12px mobile */
}

/* Изображение */
.skin-focus__card-image-wrap {
  width: 100%;
  aspect-ratio: 1 / 1; /* 285x285 — квадрат */
  border-radius: var(--radius-small); /* 4px — из макета r:4 */
  overflow: hidden;
}

.skin-focus__card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-base);
}

.skin-focus__card-image-wrap:hover .skin-focus__card-image {
  transform: scale(1.03);
}

.skin-focus__card-placeholder {
  width: 100%;
  height: 100%;
  background: var(--color-bg-section);
}

/* Текст */
.skin-focus__card-text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-card-header); /* 8px → 4px mobile */
}

.skin-focus__card-title {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
}

.skin-focus__card-desc {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text-primary);
  line-height: 1.5;
  margin: 0;
}

/* Кнопка */
.skin-focus__card-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: var(--spacing-12) 32px; /* pt/pb: 12px, pl/pr: 32px */
  background-color: var(--color-btn-primary-bg);
  color: var(--color-btn-primary-text);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--radius-base); /* 12px */
  border: 1px solid var(--color-btn-primary-bg);
  transition: background-color var(--transition-base), color var(--transition-base);
}

.skin-focus__card-btn:hover {
  background-color: transparent;
  color: var(--color-btn-primary-bg);
}

/* Mobile */
@media screen and (max-width: 749px) {
  .skin-focus__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .skin-focus__heading {
    font-size: 32px;
  }

  .skin-focus__card-title {
    font-size: 14px;
  }

  .skin-focus__card-desc {
    font-size: 11px;
  }

  /* ВОТ ЗДЕСЬ ИЗМЕНЕНИЯ ДЛЯ КНОПКИ НА МОБИЛКЕ */
  .skin-focus__card-btn {
    font-size: 12px; /* Сделали сильно меньше */
    padding: 4px 8px; /* Сильно ужали боковые отступы */
    white-space: nowrap; /* Строго запретили переноситься на новую строку */
  }
}

/* ============================================
   THE SKIN SCIENCE JOURNAL
   ============================================ */

.skin-journal {
  background-color: var(--color-bg-base);
  padding: var(--spacing-section-v) 0; /* 80px сверху/снизу, фон на всю ширину */
}

.skin-journal__inner {
  max-width: var(--content-width); /* 1200px */
  margin: 0 auto;
  padding: 0 var(--spacing-section-h); /* 120px → 16px mobile */
  display: flex;
  flex-direction: column;
  gap: var(--spacing-h2-gap); /* 32px */
}

.skin-journal__heading {
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 500;
  color: var(--color-text-primary);
  margin: 0;
  text-align: center;
}

/* Grid — 3 карточки */
.skin-journal__grid {
  display: flex;
  gap: var(--spacing-gap-20); /* 20px */
}

/* Карточка */
.skin-journal__card {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-card-img); /* 16px → 12px mobile */
}

/* Изображение */
.skin-journal__card-image-wrap {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1; /* 387x387 — квадрат */
  border-radius: var(--radius-base); /* 12px */
  overflow: hidden;
}

.skin-journal__card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-base);
}

.skin-journal__card-image-wrap:hover .skin-journal__card-image {
  transform: scale(1.03);
}

.skin-journal__card-placeholder {
  width: 100%;
  height: 100%;
  background: var(--color-bg-section);
}

/* Текстовая часть */
.skin-journal__card-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-card-header); /* 8px → 4px mobile */
}

.skin-journal__card-title {
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
}

.skin-journal__card-title a {
  color: inherit;
  text-decoration: none;
}

.skin-journal__card-meta {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-card-header); /* 8px → 4px mobile */
}

.skin-journal__card-excerpt {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text-primary);
  line-height: 1.5;
  margin: 0;
}

.skin-journal__card-readmore {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-primary);
  text-decoration: none;
  transition: opacity var(--transition-base);
}

.skin-journal__card-readmore:hover {
  opacity: 0.7;
}

/* Mobile */
@media screen and (max-width: 749px) {
  .skin-journal__grid {
    flex-direction: column;
  }

  .skin-journal__heading {
    font-size: 32px;
  }

  .skin-journal__card-title {
    font-size: 16px;
  }
}
/* ============================================
   NEWSLETTER
   ============================================ */

.newsletter {
  background-color: var(--color-bg-section); /* #EAE4DB */
  padding: var(--spacing-section-v) 0; /* 80px top/bottom */
}

.newsletter__inner {
  max-width: var(--content-width); /* 1200px */
  margin: 0 auto;
  padding: 0 var(--spacing-section-h); /* 120px → 16px mobile */
}

.newsletter__content {
  max-width: 582px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-h2-gap); /* 32px */
}

.newsletter__heading {
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 500;
  color: var(--color-text-primary);
  margin: 0;
}

.newsletter__form-area {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-h1-gap); /* 24px */
}

.newsletter__subheading {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 400;
  color: var(--color-text-primary);
  line-height: 1.4;
  margin: 0;
}

.newsletter__form-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12); /* 12px */
}

.newsletter__form-row {
  display: flex;
  gap: var(--spacing-12); /* 12px */
}

.newsletter__input {
  flex: 1;
  height: 46px;
  padding: var(--spacing-12) 18px; /* 12px 18px */
  background-color: var(--color-bg-base); /* #F8F6F2 */
  border: none;
  border-radius: var(--radius-base); /* 12px */
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text-primary);
  outline: none;
}

.newsletter__input::placeholder {
  color: rgba(184, 184, 184, 1);
  font-weight: 500;
}

.newsletter__btn {
  height: 46px;
  padding: var(--spacing-12) 32px; /* 12px 32px */
  background-color: var(--color-btn-primary-bg); /* #333333 */
  color: var(--color-btn-primary-text); /* #F8F6F2 */
  border: 1px solid var(--color-btn-primary-bg);
  border-radius: var(--radius-base); /* 12px */
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--transition-base), color var(--transition-base);
}

.newsletter__btn:hover {
  background-color: transparent;
  color: var(--color-btn-primary-bg);
}

.newsletter__disclaimer {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
  line-height: 1.5;
  margin: 0;
}

/* Mobile */
@media screen and (max-width: 749px) {
  .newsletter {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }

  .newsletter__content {
    max-width: 100%;
    gap: 12px !important; /* Отступ между заголовком и полем ввода */
  }

  .newsletter__heading {
    font-size: 28px !important; /* В макете (Node 25:1442) размер заголовка на телефоне 28px, а не 32px */
  }

  .newsletter__subheading {
    font-size: 16px;
  }

  .newsletter__form-row {
    flex-direction: column;
    gap: 20px !important; /* Отступ между самой формой и нижним текстом / кнопкой */
  }

  .newsletter__disclaimer {
    font-size: 12px;
  }
}


/* ============================================
   FOOTER
   ============================================ */

.footer-custom__main {
  background-color: var(--color-bg-section);
  padding: 40px 0;
}

.footer-custom__inner {
  max-width: var(--content-width); /* 1200px */
  margin: 0 auto;
  padding: 0 var(--spacing-section-h); /* 120px → 16px mobile */
}

/* Скруглённая карточка */
.footer-custom__card {
  background-color: #E0D8CC;
  border-radius: 24px;
  padding: 40px;
  display: grid;
  grid-template-columns: 4fr auto 1fr;
  align-items: start;
}
.footer-custom__card::after {
  content: '';
  grid-column: 3;
}

.footer-custom__left {
  justify-self: start;
  align-self: flex-start !important;
}

.footer-custom__right {
  justify-self: center;
}

/* Левая часть: логотип + соцсети */
.footer-custom__left {
  display: flex;
  flex-direction: column;
  gap: 75px;
}

.footer-custom__logo-img {
  width: 64px;
  height: auto;
  display: block;
}

.footer-custom__logo-text {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  color: var(--color-text-primary);
}

.footer-custom__socials {
  display: flex;
  gap: 9px;
}

.footer-custom__social-icon {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-bg-section); /* #EAE4DB */
  border-radius: 9px;
  color: var(--color-text-primary);
  transition: background-color var(--transition-base);
}

.footer-custom__social-icon:hover {
  background-color: var(--color-brand);
}

/* Правая часть: колонки навигации */
.footer-custom__right {
  display: flex;
  gap: 60px;
  align-self: flex-start !important;
}

.footer-custom__col {
  display: flex;
  align-items: flex-start; /* Не растягиваем по высоте больше, чем нужно */
}

/* Скрываем старый отдельный блок разделителя, он больше не нужен */
.footer-custom__col-divider {
  display: none !important; 
}

/* Рисуем линию прямо на блоке с текстом! Она всегда будет точно по высоте блока */
.footer-custom__col-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12); /* 12px — Variable "12" */
  min-width: 131px;
  border-left: 1px solid rgb(191, 182, 168); /* Линия слева */
  padding-left: 8px; /* Вы просили отступ 8px до текста на ПК */
}

.footer-custom__col-title {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
  text-transform: uppercase;
}

.footer-custom__col-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-custom__col-links li {
  margin: 0;
  padding: 0;
  line-height: 1;
}

.footer-custom__col-links li a {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
  text-decoration: none;
  transition: opacity var(--transition-base);
}

.footer-custom__col-links li a:hover {
  opacity: 0.7;
}

/* Нижняя полоска */
.footer-custom__bottom {
  background-color: #E0D8CC;
}

.footer-custom__bottom-inner {
  max-width: var(--content-width); /* 1200px */
  margin: 0 auto;
  padding: var(--spacing-12) var(--spacing-section-h); /* 12px 120px */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-custom__bottom-inner span,
.footer-custom__bottom-inner a {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text-primary);
  text-decoration: none;
}

.footer-custom__bottom-inner a:hover {
  opacity: 0.7;
}

/* Скрываем стандартный футер Dawn */
.footer {
  display: none !important;
}

/* Mobile */
@media screen and (max-width: 749px) {
  .footer-custom__inner {
    padding: 0 16px !important; 
  }

  .footer-custom__card {
    display: grid !important; 
    grid-template-columns: 1fr 1fr !important; /* Разделяем на 2 равные колонки */
    row-gap: 32px !important; /* Вертикальный отступ между блоками */
    column-gap: 16px !important; /* Горизонтальный отступ между 2 колонками ссылок */
    padding: 32px 16px 34px !important; /* Отступ сверху 32px по макету */
    border-radius: 20px !important; 
  }

  /* Распаковываем левый и правый контейнеры, чтобы сетка управляла их содержимым напрямую */
  .footer-custom__left,
  .footer-custom__right {
    display: contents !important;
  }

  /* 1. Логотип: 1-й ряд, на всю ширину */
  .footer-custom__logo {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }

  /* 2. Колонка Explore: 2-й ряд, левая половина */
  .footer-custom__right .footer-custom__col:nth-child(1) {
    grid-column: 1 / 2 !important;
    grid-row: 2 !important;
  }

  /* 3. Колонка Support: 2-й ряд, правая половина */
  .footer-custom__right .footer-custom__col:nth-child(2) {
    grid-column: 2 / 3 !important;
    grid-row: 2 !important;
  }

  .footer-custom__col {
    display: flex !important;
    flex-direction: column !important;
    align-self: start !important; /* Не растягиваем высоту колонки на мобилках */
  }

  .footer-custom__col-content {
    min-width: 0 !important; /* Чтобы текст не разрывал колонку */
    gap: 16px !important;
    padding-left: 10px !important; /* Отступ на мобильных 10px (как просили ранее) */
    border-left: 1px solid rgb(191, 182, 168) !important;
  }

  /* Скрываем старую сплошную линию-разделитель ПК */
  .footer-custom__col-divider {
    display: none !important; 
  }

  /* 4. Соцсети: 3-й ряд, сдвинуты вниз, на всю ширину */
  .footer-custom__socials {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    justify-content: flex-start !important;
    margin-top: 8px !important;
  }

  /* Тексты в самом низу (копирайт, Terms, Privacy) в столбик по центру */
  .footer-custom__bottom-inner {
    display: flex !important;
    flex-direction: column !important;
    padding: 32px 16px 64px !important; /* Большие отступы как в макете */
    gap: 8px !important;               /* Огромный отступ между строками */
    text-align: center !important;
    align-items: center !important;
  }

  /* Задаем нужный порядок прямо через CSS без изменения HTML! */
  .footer-custom__bottom-inner span {
    order: 1 !important; /* Копирайт (28 health is wealth...) идет ПЕРВЫМ */
  }

  .footer-custom__bottom-inner a:nth-of-type(1) {
    order: 2 !important; /* Terms & conditions идет ВТОРЫМ */
  }

  .footer-custom__bottom-inner a:nth-of-type(2) {
    order: 3 !important; /* Privacy policy идет ТРЕТЬИМ */
  }

  /* Делаем шрифт как в макете */
  .footer-custom__bottom-inner span,
  .footer-custom__bottom-inner a {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--color-text-primary) !important;
  }
}




/* Hover для всех кнопок */
.hero-banner__btn:hover,
.skin-focus__card-btn:hover,
.newsletter__btn:hover {
  background-color: #444444 !important;
  color: #F8F6F2 !important;
  border-color: #444444 !important;
}








/* ============================================
   WHAT'S INCLUDED / SPECIFICATION
   ============================================ */

.included {
  padding: var(--spacing-section-v) 0;
}

.included__inner {
  max-width: var(--content-width); /* 1200px */
  margin: 0 auto;
  padding: 0 var(--spacing-section-h);
}

.included__card {
  background-color: #C7BEB0;
  border-radius: 32px;
  padding: 40px;
}

.included__content {
  display: flex;
  flex-direction: column;
  gap: 32px; /* Variable H2-text */
}

/* Tabs */
.included__tabs {
  display: flex;
  gap: 40px;
}

.included__tab {
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 500;
  color: var(--color-text-primary);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 0.3s ease;
}

.included__tab--active {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 8px;
  text-decoration-thickness: 2px;
}


.included__tab:hover {
  opacity: 0.8;
}

/* Panels */
.included__panel {
  display: none;
}

.included__panel--active {
  display: block;
}

.included__panel-row {
  display: flex;
  gap: 20px;
  align-items: center;
}


.included__panel-img {
  width: 600px;
  height: 500px;
  border-radius: 20px;
  overflow: hidden;
  flex-shrink: 0;
}

.included__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.included__panel-list,
.included__panel-spec {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 500;
  color: var(--color-text-primary);
  line-height: 1.6;
}

.included__panel-list p,
.included__panel-spec p {
  margin: 0;
}

/* Mobile */
@media screen and (max-width: 749px) {
  .included__card {
    padding: 24px;
    border-radius: 20px;
  }

  .included__tabs {
    gap: 20px;
  }

  .included__tab {
    font-size: 24px;
  }

  .included__panel-row {
    flex-direction: column;
  }

  .included__panel-img {
    width: 100%;
    height: auto;
    aspect-ratio: 698 / 600;
  }

  .included__panel-list,
  .included__panel-spec {
    font-size: 18px;
  }
}

/* ============================================
   STICKY ADD TO BAG BAR
   ============================================ */

.sticky-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
    background-color: #C7BEB0;
  padding: 17px 0;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.sticky-bar--visible {
  transform: translateY(0);
}

.sticky-bar__inner {
  max-width: var(--content-width); /* 1200px */
  margin: 0 auto;
  padding: 0 var(--spacing-section-h); /* 120px */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sticky-bar__info {
  display: flex;
  flex-direction: column;
  gap: 4px !important;
  line-height: 1.2;
}

.sticky-bar__name,
.sticky-bar__price {
  margin: 0 !important;
  padding: 0 !important;
}


.sticky-bar__name {
  font-family: var(--font-body); /* Raleway */
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text-primary); /* #333 */
}

.sticky-bar__price {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-primary);
}

.sticky-bar__btn {
  width: 400px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #333333;
  color: #F8F6F2;
  border: none;
  border-radius: 12px;
  font-family: var(--font-body); /* Raleway */
  font-size: 16px;
  font-weight: 500;
   text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.sticky-bar__btn:hover {
  background-color: #555555 !important;
  color: #F8F6F2 !important;
}

@media screen and (max-width: 749px) {
  .sticky-bar__btn {
    width: auto;
    flex: 1;
    margin-left: 20px;
  }
}

@media screen and (max-width: 749px) {
  .clinically__heading,
  .clinical__heading {
    text-align: center !important;
  }
}

/* ====================================================
   АДАПТИВНАЯ ШАПКА ДЛЯ ТЕЛЕФОНА (Строго по Figma)
   ВЕРСИЯ 2: Исправлены отступы и размер корзины
   ==================================================== */
@media screen and (max-width: 989px) {
  /* 1. Главная обертка */
  .header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 14px 16px 17px 16px !important;
    background-color: #E0D8CC !important;
    flex-wrap: nowrap !important;
  }

  /* 2. Ломаем стандартный грид */
  .header--mobile-center, .header--mobile-left {
    grid-template-columns: auto 1fr auto !important;
  }

  /* 3. Логотип налево */
  .header__heading {
    margin: 0 !important;
    padding: 0 !important;
    order: 1 !important;
    justify-self: start !important;
    flex: 1 !important;
    text-align: left !important;
  }

  /* 4. Обертка (контейнер) для всех ТРЕХ иконок справа */
  .header__icons {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 9px !important; /* РАВНОЦЕННОЕ расстояние между ВСЕМИ иконками (Поиск и Корзина) */
    order: 2 !important; 
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
  }

  /* Вытаскиваем Гамбургер направо и тоже даем ему отступ */
  header-drawer {
    display: flex !important;
    order: 3 !important; 
    margin: 0 0 0 9px !important; /* Отступ 9px СЛЕВА от меню, такой же как gap */
    padding: 0 !important;
  }

  /* 5. Квадраты 40x40 для всех кнопок (Поиск, Корзина, Гамбургер) */
  .header__icon,
  .header__drawer-toggle {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 40px !important;      /* Жесткая ширина */
    min-width: 40px !important;  /* Запрещаем сжиматься */
    height: 40px !important;
    background-color: #EAE4DB !important;
    border-radius: 9px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* ================= РЕШЕНИЕ ПРОБЛЕМЫ С КРОШЕЧНОЙ КОРЗИНОЙ ================= */
  
  /* 6. Поиск и Меню - остаются стандартного размера */
  .header__icon--search svg,
  .header__drawer-toggle svg {
    width: 20px !important; 
    height: 20px !important;
  }

  /* 7. Корзина - принудительно увеличиваем её масштаб! */
  .header__icon--cart {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .header__icon--cart svg {
    width: 100% !important;     /* Забираем всё место внутри квадрата 40x40 */
    height: 100% !important; 
    transform: scale(1.6) !important; /* Увеличиваем в 1.6 раза, игнорируя пустые поля! */
  }

  /* Центрируем кружок с количеством товаров (если в корзине что-то есть) */
  .cart-count-bubble {
    top: 5px !important;
    right: 5px !important;
    left: auto !important;
    bottom: auto !important;
    transform: scale(0.8); /* Уменьшаем "пузырек", чтобы он не перекрывал саму корзину */
  }