/* =========================
   Header / Logo base
========================= */

/* НЕ делаем глобально width:200px на custom-logo (ломает центрирование)
   Вместо этого ограничиваем логотип только в навбаре */
.st-navbar .custom-logo-link img,
.st-navbar .st-logo img{
	max-height: 80px;
	width: auto;
	max-width: 250px;
	height: auto;
}

/* ===== Soultree header ===== */
.st-header { z-index: 1030; }

/* TOPBAR */
.st-topbar{
	background:#cb7d50;
	color: rgba(255,255,255,.92);
}
.st-topbar__link{
	color: #cb7d50;
	text-decoration:none;
	font-size: 20px;
}
.st-topbar__link:hover{
	color:#cb7d50;
	text-decoration:underline;
}
.st-ico{
	display:inline-block;
	margin-right:.35rem;
	opacity:.9;
}

/* WPML flags (TOPBAR) */
.st-flags{
	display:inline-flex;
	flex-direction:row-reverse;
	align-items:center;
	gap:8px;
	margin-left:6px;
}
.st-flag{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:36px;
	height:26px;
	border-radius:999px;
	text-decoration:none;
	border:1px solid rgba(255,255,255,.22);
	background:rgba(255,255,255,.08);
}
.st-flag:hover{ background:rgba(255,255,255,.16); }
.st-flag img{
	display:block;
	width:22px;
	height:auto;
	border-radius:2px;
}
.st-flag.is-active{
	box-shadow:0 0 0 2px rgba(255,255,255,.45);
}
.st-flag__fallback{
	color:#fff;
	font-weight:700;
	font-size:12px;
	letter-spacing:.4px;
}

/* NAVBAR */
.st-navbar{
	border-bottom:1px solid rgba(0,0,0,.06);
}
.st-brand{
	font-weight:700;
	letter-spacing:.2px;
}
.st-desc{ max-width:42ch; }

/* =========================
   Layout: burger left / logo center / tools right
========================= */
.st-navgrid{
	display:grid;
	grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
	align-items:center;
	min-height:64px;
}

.st-nav-left{ justify-self:start; }
.st-nav-center{ justify-self:center; }
.st-nav-right{
	justify-self:end;
	display:flex;
	align-items:center;
	gap:.5rem;
}

/* Toggler */
.st-menutoggler{
	border:0;
	padding:.25rem .5rem;
}

/* Если вдруг где-то остался global width на .custom-logo — перекроем в центре */
header .st-nav-center .custom-logo-link img{
	width:auto;
}

/* =========================
   Buttons / icons (оставляем ТВОЙ “красивый” стиль)
========================= */
.st-iconbtn{
	border-radius:999px;
	border:1px solid rgba(0,0,0,.10);
	background:#fff;
	position:relative;
	padding:.55rem .75rem;

	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:.35rem;
}

.st-cartbtn{ position:relative; }

.st-cart-count{
	position:absolute;
	top:-6px;
	right:-6px;
	min-width:18px;
	height:18px;
	border-radius:999px;
	background:#d08470;
	color:#fff;
	font-size:11px;
	line-height:18px;
	text-align:center;
	padding:0 5px;
}

/* =========================
   Menu links (на случай, если WP не добавляет .nav-link)
========================= */
#primary-menu a,
#primary-menu .nav-link{
	font-weight:600;
	padding:.65rem .85rem;
	border-radius:999px;
	text-decoration:none;
	color: #d08470;
	text-transform: uppercase;
}
#primary-menu a:hover,
#primary-menu .nav-link:hover{
	background: rgba(13,110,253,.08);
}

/* Offcanvas menu spacing */
.st-offcanvas .navbar-nav > li > a{
	display:block;
	padding:.6rem 0;
	border-radius:12px; /* в offcanvas приятнее */
}
.st-offcanvas .navbar-nav > li > a:hover{
	background: rgba(13,110,253,.06);
}

/* Search */
.st-search{
	border-radius:999px;
	background:rgba(0,0,0,.03);
	padding:4px;
}
.st-search__input{
	border:0;
	background:transparent;
	width:220px;
	padding-left:.8rem;
}
.st-search__input:focus{ box-shadow:none; }
.st-search__btn{
	border-radius:999px;
	background:#fff;
	border:1px solid rgba(0,0,0,.08);
}

/* CTA (если используется где-то) */
.st-btn-cta{
	border-radius:999px;
	font-weight:800;
	padding:.6rem 1.05rem;
	box-shadow:0 10px 22px rgba(13,110,253,.18);
}
.st-btn-cta:hover{ transform:translateY(-1px); }
.st-cta-arrow{ margin-left:.35rem; }

/* =========================
   Beauty benefits bar
========================= */
.st-benefits{
	background:#fff;
	border-bottom:1px solid rgba(0,0,0,.06);
}

.st-benefits__row{
	display:grid;
	grid-template-columns: repeat(4, 1fr);
}

.st-benefit{
	display:flex;
	align-items:center;
	gap:14px;
	padding:18px 18px;
	min-height:82px;
}

.st-benefit:not(:last-child){
	border-right:1px solid rgba(0,0,0,.08);
}

.st-benefit__icon{
	color: rgba(208, 132, 112, .95);
	display:inline-flex;
}
.st-benefit__text{
	display:inline-flex;
	flex-direction:column;
	line-height:1.15;
}
.st-benefit__title{
	font-weight:700;
	color:rgba(0,0,0,.82);
}
.st-benefit__sub{
	font-size:13px;
	color:rgba(0,0,0,.55);
	margin-top:4px;
}

/* Responsive */
@media (max-width: 1199.98px){
	.st-benefits__row{ grid-template-columns: repeat(2, 1fr); }
	.st-benefit:nth-child(2){ border-right:none; }
	.st-benefit{ border-bottom:1px solid rgba(0,0,0,.08); }
	.st-benefit:nth-last-child(-n+2){ border-bottom:none; }
}

@media (max-width: 991.98px){
	.st-desc{ display:none; }
	/* чтобы меню в offcanvas выглядело мягче */
	#primary-menu a,
	#primary-menu .nav-link{ border-radius:12px; }
}

#site-navigation {
	background: #fff;
}

/* гамбургер всегда видим */
.st-menutoggler{
  display: inline-flex !important;
}

/* если вдруг где-то остался navbar-expand-lg — принудительно показываем и там */
@media (min-width: 992px){
  .navbar-expand-lg .navbar-toggler{
    display: inline-flex !important;
  }
}


/* FIX: search form layout (input + button in one line) */
.st-search{
  display: flex;
  align-items: center;
  gap: 6px;
}

/* чтобы инпут не выталкивал кнопку и не вылазил за пределы */
.st-search__input{
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}

/* кнопка аккуратная и не переносится */
.st-search__btn{
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* заголовок: оставляем твою фикс-ширину (если нужна именно такая) */
.st-search--header .st-search__input{
  flex: 0 0 220px;
  width: 220px;
  display: none;
}

.st-search--header:hover .st-search__input{
  flex: 0 0 220px;
  width: 220px;
  display: block;
}

/* offcanvas: на всю ширину */
.st-offcanvas .st-search{
  width: 100%;
}

.st-topbar__usp {
	 text-transform: uppercase;
}
.st-topbar__usp a{
	 text-transform: uppercase;
}
header svg {
	color: #cb7d50;
}

.navbar-toggler{

    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, .10);
    background: #fff;
    position: relative;
    padding: .55rem .75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
}

/* =========================
   MOBILE FIX: header fit
========================= */
@media (max-width: 767px){

  /* 1) Уменьшаем логотип на телефонах */
  .st-navbar .custom-logo-link img,
  .st-navbar .st-logo img{
    max-height: 46px;
    max-width: 140px; /* было 250px -> из-за этого всё не влезает */
  }

  /* 2) Даем центру “дышать” и уменьшаем высоту */
  .st-navgrid{
    grid-template-columns: auto 1fr auto;
    min-height: 56px;
    column-gap: 8px;
  }

  /* 3) Слева оставляем только иконку телефона (текст прячем) */
 .st-nav-left .st-topbar__link{
    font-size: 0;       
    line-height: 0;
    padding: 0;
    white-space: nowrap;
  }
  .st-nav-left .st-ico{ margin-right: 0; } 

  /* 4) Ужимаем кнопки справа */
  /* .st-nav-right{ gap: 6px; }
  .st-iconbtn,
  .navbar-toggler{
    padding: .45rem .55rem;
  } */
  .st-iconbtn svg,
  .navbar-toggler svg{
    width: 18px;
    height: 18px;
  } 

  /* 5) Бейдж корзины чуть меньше */
   .st-cart-count{
    top: -5px;
    right: -5px;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    font-size: 10px;
  } 

  /* 6) ВАЖНО: у тебя “лупа” и “бургер” открывают одно и то же offcanvas.
        Чтобы не было 4 кнопок — скрываем лупу на совсем узких экранах. */
   .st-nav-right > .st-iconbtn.d-lg-none{
    display: none !important;
  } 



.st-topbar__delivery {
	font-size: 11px;
}
}
@media (min-width: 768px) {
	

.desc-hide {
display: none;
}
}