/* =========================================================
   LEGOFRAME — F1 THEME OVERRIDE (v2)
   Подключать ПОСЛЕДНИМ в <head>, после всех остальных CSS
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,400;0,600;0,700;0,900;1,700&family=Inter:wght@400;500;600&display=swap');

:root{
  --lf-carbon:#0c0e11;
  --lf-carbon-2:#15181d;
  --lf-carbon-3:#1e2229;
  --lf-line:#2a2f38;
  --lf-red:#e10600;
  --lf-red-dark:#a10400;
  --lf-white:#f4f5f6;
  --lf-grey:#8b929c;
  --lf-amber:#ffb400;
}

/* ---------- база ---------- */
body{
  background:var(--lf-carbon) !important;
  color:var(--lf-white) !important;
  font-family:'Inter', Arial, sans-serif !important;
}

a{ color:inherit; }
a:hover{ color:var(--lf-red); }

h1,h2,h3,h4,h5,h6,
.block-title, .page-title{
  font-family:'Titillium Web', Arial, sans-serif !important;
  font-weight:900 !important;
  font-style:italic;
  text-transform:uppercase;
  letter-spacing:.01em;
}

/* ---------- заголовки блоков "Сопутствующие товары" / "Похожие товары" ---------- */
.category-products.related .block-title,
.category-products.upsell .block-title{
  border:none !important;
  margin-bottom:22px !important;
  line-height:normal !important;
}
.category-products.related .block-title span,
.category-products.upsell .block-title span{
  font-family:'Titillium Web', sans-serif !important;
  font-weight:700 !important;
  font-style:italic;
  text-transform:uppercase;
  font-size:15px !important;
  letter-spacing:.03em;
  color:var(--lf-white) !important;
  padding-bottom:12px;
  display:inline-block;
  position:relative;
}
.category-products.related .block-title span::after,
.category-products.upsell .block-title span::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-1px;
  width:60px;
  height:2px;
  background:var(--lf-red);
}

/* ---------- шапка сайта ---------- */
#yt_header,
.yt-header-top,
.mega-horizontal-wrap{
  background:var(--lf-carbon) !important;
}
.yt-header-top,
.mega-horizontal-wrap{
  border-bottom:1px solid var(--lf-line);
}
.yt-header-bottom{
  background:var(--lf-carbon) !important;
}

.head-phonebox a,
.head-phonebox b,
.yt-header-top,
.yt-header-top a{
  color:var(--lf-white) !important;
}
.head-phonebox a:hover{ color:var(--lf-red) !important; }

#btn_categories{
  background:var(--lf-red) !important;
  border:none !important;
}
#btn_categories span{ color:var(--lf-white) !important; }

.mega-horizontal-right ul li a{
  color:var(--lf-white) !important;
  font-family:'Titillium Web', sans-serif !important;
  font-weight:600 !important;
  text-transform:uppercase;
  font-size:13px !important;
  letter-spacing:.06em;
}
.mega-horizontal-right ul li a:hover{ color:var(--lf-red) !important; }

.mini-cartpro .block-title,
.head-cart .icon,
.head-login .icon{ color:var(--lf-white) !important; }
.mini-cartpro .cart-price,
.mini-cartpro .cart-count{ color:var(--lf-red) !important; }

/* ---------- КАРТОЧКИ ТОВАРОВ (главная и каталог) ---------- */
.product-container,
.left-block,
.right-block{
  background:var(--lf-carbon-2) !important;
}

li:has(> .left-block){
  background:var(--lf-carbon-2) !important;
  border:1px solid var(--lf-line) !important;
}

.product-name,
.product-name a{
  color:var(--lf-white) !important;
  font-family:'Titillium Web', sans-serif !important;
  font-weight:700 !important;
  font-style:italic;
  text-transform:none !important;
}
.product-name a:hover{ color:var(--lf-red) !important; }

.content_price{ color:var(--lf-white) !important; }
.content_price .product-price{
  color:var(--lf-red) !important;
  font-family:'Titillium Web', sans-serif !important;
  font-weight:800 !important;
  font-size:17px !important;
}
.content_price .old-price{
  color:var(--lf-grey) !important;
  text-decoration:line-through;
}

.product-new{
  background:var(--lf-amber) !important;
  color:var(--lf-carbon) !important;
  font-family:'Titillium Web', sans-serif !important;
  font-weight:800 !important;
  font-style:italic;
  text-transform:uppercase;
  padding:3px 9px !important;
  border-radius:0 !important;
}
.price-percent-reduction{
  background:var(--lf-red) !important;
  color:var(--lf-white) !important;
  font-family:'Titillium Web', sans-serif !important;
  font-weight:800 !important;
  font-style:italic;
  padding:3px 9px !important;
  border-radius:0 !important;
}

/* кнопка "В корзину" — фикс белый-на-белом */
.add-to-cart{
  background:transparent !important;
}
.addtocart{
  display:inline-flex !important;
  align-items:center; justify-content:center;
  background:var(--lf-red) !important;
  color:var(--lf-white) !important;
  font-family:'Titillium Web', sans-serif !important;
  font-weight:700 !important;
  font-style:italic;
  text-transform:uppercase !important;
  letter-spacing:.04em;
  border:none !important;
  border-radius:0 !important;
  padding:10px 14px !important;
  transition:background .2s;
}
.addtocart:hover{
  background:var(--lf-red-dark) !important;
  color:var(--lf-white) !important;
}

/* иконки избранное/сравнение/quickview на карточке */
.quick-view a{
  background:var(--lf-carbon-3) !important;
  border:1px solid var(--lf-line) !important;
}
.quick-view a:hover{ border-color:var(--lf-red) !important; }

/* рейтинг звёзды */
.product-star .fa-star{ color:var(--lf-amber) !important; }

/* ---------- кнопки / CTA по всему сайту ---------- */
/* .lf-burger исключена: это кастомная кнопка гамбургера (см. _header.tpl),
   у button:not(.addtocart) специфичность выше, чем у .lf-burger,
   поэтому она перебивала прозрачный фон и размер 34x34 у гамбургера */
.btn,
button:not(.addtocart):not(.lf-burger),
input[type="submit"],
.button,
.yt-btn,
a.button{
  background:var(--lf-red) !important;
  border:none !important;
  border-radius:0 !important;
  color:var(--lf-white) !important;
  font-family:'Titillium Web', sans-serif !important;
  font-weight:700 !important;
  font-style:italic;
  text-transform:uppercase !important;
  letter-spacing:.05em;
  transition:background .2s, transform .15s;
}
.btn:hover,
button:not(.addtocart):not(.lf-burger):hover,
input[type="submit"]:hover,
.button:hover,
.yt-btn:hover,
a.button:hover{
  background:var(--lf-red-dark) !important;
  color:var(--lf-white) !important;
  transform:translateY(-1px);
}

/* ---------- общий фон контента ---------- */
.yt-content, .yt-content-inner,
#yt_content, #yt_wrapper,
.yt_main_inner{
  background:var(--lf-carbon) !important;
}

/* ---------- сайдбар / фильтры ---------- */
#yt_left, .yt-menu, .yt-menu-content,
.block-layered-nav, .filter-tgl{
  background:var(--lf-carbon-2) !important;
  border:1px solid var(--lf-line) !important;
  color:var(--lf-white) !important;
}
#yt_left a, .yt-menu-content a{ color:var(--lf-grey) !important; }
#yt_left a:hover, .yt-menu-content a:hover{ color:var(--lf-red) !important; }

/* хлебные крошки стилизованы ниже, в отдельном блоке */

/* ---------- ПОДВАЛ: только копирайт/юр.информация, остальное скрыто ---------- */
#yt_footer{
  background:var(--lf-carbon) !important;
  border-top:1px solid var(--lf-line) !important;
}
#yt_footer .footer-top{
  display:none !important;
}
#yt_footer .footer-bottom{
  background:var(--lf-carbon) !important;
  border-top:none !important;
  padding:14px 0;
}
#yt_footer .yt-copyright,
#yt_footer .yt-copyright p{
  color:var(--lf-grey) !important;
  font-size:11.5px;
  line-height:1.6;
  letter-spacing:.01em;
  margin:0;
}
#yt_footer .seller-info{
  color:var(--lf-grey) !important;
}
#yt_footer .block-content a,
#yt_footer a{
  color:var(--lf-grey) !important;
}
#yt_footer .block-content a:hover,
#yt_footer a:hover{ color:var(--lf-red) !important; }

/* иконки соцсетей внизу - скрыты, нужен только блок копирайта */
.social-fixed{ display:none !important; }

/* ---------- поля форм ---------- */
input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], textarea, select{
  background:var(--lf-carbon-3) !important;
  border:1px solid var(--lf-line) !important;
  color:var(--lf-white) !important;
  border-radius:0 !important;
}

/* ---------- скрыть блок "преимуществ" (иконки цены/доставка/поддержка) ---------- */
.banner-policy{
  display:none !important;
}

/* ---------- скрыть ссылку на платформу Digistr в копирайте ---------- */
#yt_footer a[href*="digistr.by"]{
  display:none !important;
}

/* ---------- скрыть поиск, "Заказать звонок" и иконку пользователя в шапке ---------- */
.head-searchbox,
.user-request,
.head-login{
  display:none !important;
}

/* ---------- убрать выпадающий каталог, оставить простое меню ---------- */
.mega-horizontal-left{
  display:none !important;
}
.mega-horizontal-right{
  width:100% !important;
  float:none !important;
}
.mega-horizontal-right ul.sm-megamenu-hover{
  display:flex !important;
  gap:0;
  justify-content:flex-start;
  padding:0 !important;
}
.mega-horizontal-right ul.sm-megamenu-hover > li{
  float:none !important;
  position:relative;
}
.mega-horizontal-right ul.sm-megamenu-hover > li:not(:last-child)::after{
  content:"";
  position:absolute;
  right:0; top:50%;
  transform:translateY(-50%);
  width:1px; height:16px;
  background:var(--lf-line);
}
.mega-horizontal-right ul.sm-megamenu-hover > li > a{
  font-family:'Titillium Web', sans-serif !important;
  font-weight:600 !important;
  font-size:13px !important;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--lf-grey) !important;
  background:transparent !important;
  padding:18px 26px !important;
  display:inline-block;
  position:relative;
  transition:color .2s;
}
.mega-horizontal-right ul.sm-megamenu-hover > li > a .sm_megamenu_title{
  color:inherit !important;
  transition:color .2s;
}
.mega-horizontal-right ul.sm-megamenu-hover > li > a::before{
  content:"";
  position:absolute;
  left:26px; right:26px; bottom:12px;
  height:2px;
  background:var(--lf-red);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s ease;
}
.mega-horizontal-right ul.sm-megamenu-hover > li > a:hover{
  color:var(--lf-white) !important;
  background:transparent !important;
}
.mega-horizontal-right ul.sm-megamenu-hover > li > a:hover::before{
  transform:scaleX(1);
}
.mega-horizontal-right ul.sm-megamenu-hover > li.sm_megamenu_actived > a,
.mega-horizontal-right ul.sm-megamenu-hover > li.sm_megamenu_actived > a .sm_megamenu_title{
  color:var(--lf-white) !important;
  background:transparent !important;
}
.mega-horizontal-right ul.sm-megamenu-hover > li.sm_megamenu_actived > a::before{
  transform:scaleX(1);
}

/* ---------- убрать сайдбар-виджет каталога рядом с hero-баннером ---------- */
#yt_header_left{
  display:none !important;
}
#yt_header_right{
  width:100% !important;
  float:none !important;
}

/* ---------- объединить шапку в одну строку: логотип / меню / корзина ---------- */
.yt-header-top{ display:none !important; }
.head-phonebox{ display:none !important; }
.btn-sambar{ display:none !important; }

/* "распрямляем" обёртки конкретно внутри шапки (не трогаем .container/.row в остальном сайте) */
.yt-header-middle,
.yt-header-middle .container,
.yt-header-middle .row,
.header-middle-right,
.mega-horizontal-wrap,
.mega-horizontal-wrap .container,
.mega-horizontal-wrap .row,
.mega-horizontal-right,
.sm_megamenu_wrapper_horizontal_menu,
.sambar-inner{
  display:contents !important;
}

#yt_wrapper{
  overflow:visible !important;
}

#yt_header{
  display:flex !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  max-width:1240px !important;
  margin:0 auto !important;
  padding:12px 32px !important;
  position:fixed !important;
  top:0; left:0; right:0;
  z-index:100000;
  background:transparent !important;
}
.yt-header-bottom{
  margin-top:110px !important;
}
#yt_header::before{
  content:"";
  position:absolute;
  top:0; bottom:0;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
  background:rgba(12,14,17,.9);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  z-index:-1;
}

.logo{
  order:1;
  flex:0 0 auto !important;
  width:auto !important;
  float:none !important;
}

.mega-horizontal-right ul.sm-megamenu-hover{
  order:2;
  flex:1 1 auto !important;
  justify-content:center !important;
}

.head-cart{
  order:3;
  flex:0 0 auto !important;
  width:auto !important;
  float:none !important;
}

.yt-header-bottom{
  order:4;
  flex:0 0 100% !important;
  width:100% !important;
}

/* ---------- корзина: только иконка + бейдж количества ---------- */
/* .mcart-btn изначально скрыт темой - оставляем как есть, не показываем повторно */
.mcart-btn{
  display:none !important;
}

.btn-toggle.show-cart-button{
  display:flex !important;
  align-items:center;
  justify-content:center;
  position:relative;
  width:44px !important;
  height:44px !important;
  padding:0 !important;
  background:var(--lf-carbon-3) !important;
  border:1px solid var(--lf-line) !important;
  border-radius:50%;
  box-shadow:none !important;
  transition:background .2s, border-color .2s;
}
.btn-toggle.show-cart-button:hover{
  background:var(--lf-red) !important;
  border-color:var(--lf-red) !important;
}
.btn-toggle.show-cart-button::before{
  content:"";
  display:block;
  background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZjRmNWY2IiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8cGF0aCBkPSJNMyA0aDJsMi4yIDExLjJhMiAyIDAgMCAwIDIgMS42aDcuNmEyIDIgMCAwIDAgMi0xLjZMMjAgN0g2LjIiLz4KICA8Y2lyY2xlIGN4PSI5LjUiIGN5PSIyMCIgcj0iMS4yIiBmaWxsPSIjZTEwNjAwIiBzdHJva2U9Im5vbmUiLz4KICA8Y2lyY2xlIGN4PSIxNi41IiBjeT0iMjAiIHI9IjEuMiIgZmlsbD0iI2UxMDYwMCIgc3Ryb2tlPSJub25lIi8+Cjwvc3ZnPgo=") !important;
  background-size:20px 20px !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-color:transparent !important;
  width:20px !important;
  height:20px !important;
  position:static !important;
  flex-shrink:0;
}
/* прячем подпись "Ваша корзина" и цену - оставляем только иконку */
.detail-minicart p,
.detail-minicart .price.cart-price{
  display:none !important;
}
/* бейдж с количеством товаров поверх иконки */
.detail-minicart{
  display:contents;
}
.detail-minicart .count-item{
  position:absolute;
  top:-4px; right:-4px;
  display:none;
  align-items:center;
  justify-content:center;
  min-width:18px;
  height:18px;
  padding:0 4px;
  background:var(--lf-red) !important;
  border:2px solid var(--lf-carbon);
  border-radius:50px;
  font-family:'Titillium Web', sans-serif !important;
  font-weight:800 !important;
  font-style:normal;
  font-size:0 !important;
  line-height:1;
  color:var(--lf-white) !important;
}
.btn-toggle.show-cart-button.has-items .count-item{
  display:flex;
}
.detail-minicart .count-item .cart-count{
  color:var(--lf-white) !important;
  font-size:12px !important;
}

/* бейдж с кол-вом товаров пропадал только на мобильном (≤767px), хотя на
   планшете и десктопе виден. По Computed на мобильном display:flex уже
   применялся, но position/размеры сбрасывались темой (yt-responsive.css)
   на этом брейкпоинте - из-за этого спан тёк обычным элементом в потоке
   (auto x auto), а не сидел абсолютным бейджем поверх иконки. Перебиваем
   весь набор свойств позиционирования и размеров, а не только видимость. */
@media (max-width:767px){
  .mini-cartpro.sm-cartpro .block-title .btn-toggle.show-cart-button.has-items .count-item,
  .btn-toggle.show-cart-button.has-items .count-item{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
    position:absolute !important;
    top:-4px !important;
    right:-4px !important;
    left:auto !important;
    bottom:auto !important;
    align-items:center !important;
    justify-content:center !important;
    width:auto !important;
    min-width:18px !important;
    height:18px !important;
    padding:0 4px !important;
    margin:0 !important;
    background:var(--lf-red) !important;
    border:2px solid var(--lf-carbon) !important;
    border-radius:50px !important;
    line-height:1 !important;
    z-index:5 !important;
    flex:none !important;
  }
  /* без .has-items бейдж должен оставаться скрытым - как на планшете/десктопе */
  .btn-toggle.show-cart-button:not(.has-items) .count-item{
    display:none !important;
  }
  .mini-cartpro.sm-cartpro .block-title .btn-toggle.show-cart-button.has-items .count-item .cart-count{
    display:inline !important;
    font-size:12px !important;
    visibility:visible !important;
    opacity:1 !important;
    color:var(--lf-white) !important;
  }

  /* если размеры/позиция бейджа применялись, а он всё равно не виден —
     значит его обрезает overflow:hidden на каком-то родителе по цепочке
     (кнопка-иконка, .head-cart или сама шапка), который тема включает
     именно на этом брейкпоинте. Бейдж сидит за пределами круга кнопки
     (top:-4px;right:-4px), поэтому обрезание любого родителя полностью
     его скрывает, хотя в Styles всё выглядит применённым. Открываем
     overflow по всей цепочке родителей до шапки включительно - это не
     затрагивает горизонтальный скролл страницы, т.к. #yt_header зафиксирован
     (position:fixed) и не участвует в потоке контента. */
  #yt_header,
  .yt-header-top,
  .yt-header-middle,
  .yt-header-bottom,
  .mega-horizontal-wrap,
  .mega-horizontal-right,
  .head-cart,
  .mini-cartpro,
  .mini-cartpro.sm-cartpro,
  .mini-cartpro.sm-cartpro .block-title,
  .btn-toggle.show-cart-button,
  .detail-minicart{
    overflow:visible !important;
  }

  /* НАЙДЕНА РЕАЛЬНАЯ ПРИЧИНА (по getBoundingClientRect из консоли):
     у .count-item рект был 0,0,0,0, хотя у родительской кнопки .btn-toggle -
     нормальный 336,8,36,36. Ребёнок с нулевым рект-ом при нормальном родителе
     = у *родителя* .detail-minicart стоит display:none из темы именно на
     этом брейкпоинте (наше display:contents для него было объявлено без
     !important и не в мобильном медиа-запросе, поэтому тема его перебивала).
     Форсируем display:contents именно здесь. */
  .mini-cartpro.sm-cartpro .block-title .btn-toggle.show-cart-button.has-items .detail-minicart,
  .btn-toggle.show-cart-button .detail-minicart,
  .detail-minicart{
    display:contents !important;
  }
}
.mini-cartpro .block-title,
.mini-cartpro.sm-cartpro{
  background:transparent !important;
  border:none !important;
}

@media (max-width:991px){
  #yt_header{
    display:grid !important;
    grid-template-columns:1fr auto 1fr !important;
    grid-template-rows:1fr !important;
    align-items:center !important;
    padding:8px 16px !important;
    position:fixed !important;
    top:0;
    z-index:100000;
  }

  /* СТРАХОВКА: какой бы "невидимый"/нулевой элемент ни затесался в шапку и ни сдвигал
     авто-размещение грида на другие строки (это и было причиной "не в одну линию"
     на скринах — линии строк 3→6, а не 1→2) — принудительно прибиваем ВСЕ прямые
     дети #yt_header к первой строке. На абсолютно спозиционированные и display:none
     элементы (например ul.sm-megamenu-hover) это не влияет, они не участвуют в гриде. */
  #yt_header > *{
    grid-row:1 !important;
  }

  /* шапка на мобильном/планшете тоже position:fixed (см. выше) - тот же принцип,
     что и на десктопе: контенту нужен компенсирующий отступ, чтобы не залезать
     под неё. Только высота мобильной шапки другая (34px контент + 8+8 паддинг = 50px),
     а не 110px как на десктопе - раньше отступ был просто обнулён, из-за чего
     контент лез под фиксированную шапку. Ставим отступ под реальную высоту. */
  .yt-header-bottom{
    margin-top:50px !important;
  }

  /* у базовой темы есть своё правило @media(max-width:767px){ #yt_content{margin-top:53px} }
     (styles.css:900) - оно не наше, срабатывает только на ширинах ≤767px (поэтому
     на планшете 768px всё было ровно), и на страницах БЕЗ класса no-mtb на #yt_content
     (каталог, конструкторы, главная) суммируется с нашим отступом у .yt-header-bottom,
     давая двойной отступ. На страницах с no-mtb (рамки) той 53px-надбавки нет, поэтому
     они и были "эталоном". Глушим родное правило темы - у нас уже есть своя компенсация. */
  #yt_content{
    margin-top:0 !important;
  }

  /* гамбургер - слева, с отступом (button.lf-burger, см. _header.tpl:191) */
  #yt_header button.lf-burger{
    grid-column:1;
    grid-row:1 !important;
    justify-self:start;
    align-self:center;
    margin-left:2px !important;
    display:flex !important;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:5px !important;
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    min-height:34px !important;
    max-width:34px !important;
    padding:0 !important;
    margin-top:0 !important;
    margin-bottom:0 !important;
    background:transparent !important;
    background-color:transparent !important;
    border:none !important;
    border-radius:0 !important;
    box-sizing:border-box !important;
    line-height:normal !important;
    text-transform:none !important;
    font-style:normal !important;
    box-shadow:none !important;
    cursor:pointer;
  }
  #yt_header button.lf-burger span{
    display:block !important;
    width:20px !important;
    height:2px !important;
    background:var(--lf-white) !important;
    transition:transform .2s ease, opacity .2s ease;
  }
  body.lf-menu-open #yt_header button.lf-burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  body.lf-menu-open #yt_header button.lf-burger span:nth-child(2){ opacity:0; }
  body.lf-menu-open #yt_header button.lf-burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  /* лого строго по центру */
  .logo{
    grid-column:2;
    grid-row:1 !important;
    justify-self:center;
    flex:0 0 auto !important;
  }
  .logo img{
    width:120px !important;
  }

  /* только корзина справа, с отступом от края, поиск прячем */
  .head-searchbox{ display:none !important; }
  .head-cart{
    grid-column:3;
    grid-row:1 !important;
    justify-self:end;
    margin-right:2px;
  }
  .btn-toggle.show-cart-button{
    width:36px !important;
    height:36px !important;
  }
  .btn-toggle.show-cart-button::before{
    background-size:17px 17px !important;
    width:17px !important;
    height:17px !important;
  }

  /* сама выпадающая панель меню - скрыта по умолчанию */
  .mega-horizontal-right ul.sm-megamenu-hover{
    display:none !important;
    position:absolute;
    top:100%;
    left:0; right:0;
    flex-direction:column;
    gap:0;
    background:var(--lf-carbon) !important;
    border-top:1px solid var(--lf-line);
    max-height:calc(100vh - 100%);
    overflow-y:auto;
    padding:8px 16px 16px;
  }
  body.lf-menu-open .mega-horizontal-right ul.sm-megamenu-hover{
    display:flex !important;
  }
  .mega-horizontal-right ul.sm-megamenu-hover > li{
    width:100%;
  }
  .mega-horizontal-right ul.sm-megamenu-hover > li:not(:last-child)::after{
    display:none !important;
  }
  .mega-horizontal-right ul.sm-megamenu-hover > li > a{
    width:100%;
    padding:14px 4px !important;
    border-bottom:1px solid var(--lf-line) !important;
  }
  .mega-horizontal-right ul.sm-megamenu-hover > li > a::before{
    left:4px; right:4px;
  }

  /* на мобильном/планшете у .container нет своих отступов — хлебные крошки
     и сетка товаров упираются прямо в край экрана. Добавляем небольшой паддинг,
     тот же, что и у шапки (16px), чтобы контент был вровень с лого/бургером/корзиной */
  #yt_pathway .container,
  #yt_content .container{
    padding-left:16px !important;
    padding-right:16px !important;
    box-sizing:border-box !important;
  }

  /* хлебные крошки лежат прямо внутри .row (без обёртки в колонку col-*),
     поэтому стандартный отрицательный margin строки Bootstrap (-15px) съедает
     почти весь паддинг выше. Компенсируем его отдельно именно для этого блока,
     чтобы отступ реально был виден и совпадал с шапкой (16px) */
  #yt_pathway{
    padding-left:15px !important;
    padding-right:15px !important;
    box-sizing:border-box !important;
  }

  /* небольшой отступ сверху у хлебных крошек - без него на части внутренних
     страниц (категории товаров, "Оплата и доставка" и т.д.) крошки упираются
     прямо в шапку. На странице каталога такой отступ откуда-то уже есть
     (свой шаблон), но лишним он не будет - дублирующий margin просто не
     увеличит уже имеющийся визуальный зазор заметно */
  #yt_pathway{
    margin-top:14px !important;
  }
}

/* ---------- убрать пустой блок над hero-баннером ---------- */
#custom_popular_search{
  display:none !important;
}

/* ---------- убрать боковой блок фильтров на всех внутренних страницах ---------- */
#yt_left{
  display:none !important;
}
.columns-w .col-main,
.columns-w [class*="col-lg-9"],
.columns-w [class*="col-md-9"]{
  width:100% !important;
  float:none !important;
}

/* ---------- современные хлебные крошки ---------- */
#yt_pathway{
  border-bottom:1px solid var(--lf-line) !important;
  background:transparent !important;
}
.breadcrumbs{
  background:transparent !important;
  border:none !important;
  padding:14px 0 !important;
  list-style:none;
}
.breadcrumbs-content{
  display:flex !important;
  align-items:center;
  flex-wrap:wrap;
}
.breadcrumbs li{
  display:flex !important;
  align-items:center;
  list-style:none;
  background:transparent !important;
  border:none !important;
  border-bottom:none !important;
  box-shadow:none !important;
  clip-path:none !important;
  padding:0 !important;
  margin:0 !important;
  font-family:'Titillium Web', sans-serif !important;
  font-size:11.5px !important;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.breadcrumbs li::before,
.breadcrumbs li::after,
.breadcrumbs a::before,
.breadcrumbs a::after{
  display:none !important;
  content:none !important;
}
.breadcrumbs li:not(:last-child)::after{
  display:inline-block !important;
  content:"" !important;
  width:5px;
  height:5px;
  margin:0 10px !important;
  border-top:2px solid var(--lf-red) !important;
  border-right:2px solid var(--lf-red) !important;
  transform:rotate(45deg);
  flex-shrink:0;
}
.breadcrumbs a, .breadcrumbs span{
  display:inline-block !important;
  height:auto !important;
  line-height:1 !important;
  padding:0 !important;
  margin:0 !important;
  float:none !important;
  position:static !important;
  color:var(--lf-grey) !important;
  background:transparent !important;
  border:none !important;
  border-bottom:none !important;
  text-decoration:none !important;
  transition:color .15s;
}
.breadcrumbs li, .breadcrumbs li *{
  line-height:1 !important;
}
.breadcrumbs a:hover, .breadcrumbs a:focus{
  color:var(--lf-red) !important;
  border:none !important;
  border-bottom:none !important;
  text-decoration:none !important;
}
.breadcrumbs li.last, .breadcrumbs li.last *{
  color:var(--lf-white) !important;
  font-weight:600;
}

/* ---------- плитки категорий на странице каталога ---------- */
.category-products .toolbar-top,
.category-products .toolbar-bottom{
  display:none !important;
}
.hotcate-wrap{
  padding:12px 0 18px;
  margin-top:0 !important;
  background:transparent !important;
}
.hotcate-wrap .block-title{
  display:none !important;
}
.sm-categories,
.sm-categories .cat-wrap{
  background:transparent !important;
}
.hotcate-wrap .block-title{
  margin-bottom:22px;
}
.hotcate-wrap .block-title span{
  font-family:'Titillium Web', sans-serif !important;
  font-weight:900 !important;
  font-style:italic;
  text-transform:uppercase;
  font-size:20px !important;
  color:var(--lf-white) !important;
  letter-spacing:.02em;
}
.sm-categories .cat-wrap{
  display:grid !important;
  grid-template-columns:repeat(2, 1fr) !important;
  gap:16px !important;
}
.sm-categories .content-box{
  float:none !important;
  width:auto !important;
  min-height:96px !important;
  display:block !important;
  background:var(--lf-carbon-2) !important;
  border:1px solid var(--lf-line) !important;
  border-left:3px solid var(--lf-line) !important;
  padding:0 !important;
  line-height:normal !important;
  overflow:hidden !important;
  position:relative !important;
  transition:border-color .2s, background .2s, transform .2s;
}
.sm-categories .content-box:hover{
  border-color:var(--lf-red) !important;
  border-left-color:var(--lf-red) !important;
  background:var(--lf-carbon-3) !important;
  transform:translateY(-3px);
}
.sm-categories .image-cat{
  height:auto !important;
  position:absolute; inset:0;
}
.sm-categories .image-cat img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.sm-categories .image-cat::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(12,14,17,.9), rgba(12,14,17,.15) 60%);
}
.sm-categories .btn-viewmore{
  display:none !important;
}
.sm-categories .inner{
  position:relative !important;
  z-index:1;
  float:none !important;
  width:100% !important;
  height:100% !important;
  min-height:96px;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  padding:20px !important;
  box-sizing:border-box;
}
.sm-categories .content-box:has(.image-cat) .inner{
  align-items:flex-start;
  justify-content:flex-end;
  text-align:left;
  padding:22px;
}
.sm-categories .cat-title{
  width:auto;
  max-width:100%;
  text-align:center;
}
.sm-categories .content-box:has(.image-cat) .cat-title{
  text-align:left;
}
.sm-categories .cat-title a{
  display:inline-block;
  padding:0;
  line-height:1;
  font-family:'Titillium Web', sans-serif !important;
  font-weight:800 !important;
  font-style:italic;
  font-size:20px !important;
  text-transform:uppercase;
  letter-spacing:.01em;
  color:var(--lf-white) !important;
  transition:color .2s;
}
.sm-categories .content-box:has(.image-cat) .cat-title a{
  padding:0;
}
.sm-categories .content-box:hover .cat-title a{
  color:var(--lf-red) !important;
}
.sm-categories .child-cat{
  display:none;
}

@media (max-width:767px){
  .sm-categories .cat-wrap{
    grid-template-columns:1fr !important;
  }
  #mtoobar{
    display:none !important;
  }
}

/* ---------- сетка товаров каталога (реальная структура .item/.item-inner) ---------- */
.yt_main_inner,
.yt-products-container,
.yt-products-container .products-grid,
.yt-products-container .row,
.yt-products-container .item{
  background:transparent !important;
}
.yt-products-container .products-grid{
  margin:5px;
}
.yt-products-container .products-grid .item{
  padding:10px;
}
.yt-products-container .item-inner{
  background:var(--lf-carbon-2) !important;
  border:1px solid var(--lf-line) !important;
  height:100%;
  display:flex;
  flex-direction:column;
  transition:border-color .2s, transform .2s;
}
.yt-products-container .item-inner:hover{
  border-color:var(--lf-red) !important;
  transform:translateY(-4px);
}
.yt-products-container .product-image,
.category-products .item .product-image{
  display:block !important;
  background:var(--lf-carbon-2) !important;
  aspect-ratio:1/1 !important;
  overflow:hidden !important;
  padding-top:0 !important;
  flex-shrink:0 !important;
}
.yt-products-container .product-image img,
.category-products .item .product-image img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  position:static !important;
}
.yt-products-container .product-info{
  padding:16px 18px 18px;
  display:flex;
  flex-direction:column;
  flex:1;
  text-align:center;
}
.yt-products-container .product-name a{
  font-family:'Titillium Web', sans-serif !important;
  font-weight:700 !important;
  font-style:italic;
  font-size:14.5px !important;
  color:var(--lf-white) !important;
  line-height:1.35;
  display:block;
  margin-bottom:6px;
  min-height:2.72em;
}
.yt-products-container .product-name a:hover{
  color:var(--lf-red) !important;
}
.yt-products-container .product-status{
  margin-bottom:6px;
}
.yt-products-container .product-code{
  font-size:11px;
  color:var(--lf-grey) !important;
  margin-bottom:8px;
}
#yt_content .yt-products-container .product-price{
  margin-top:0;
  margin-bottom:8px;
  display:flex;
  align-items:center;
  justify-content:center;
}
#yt_content .yt-products-container .product-price .price-box{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
}
#yt_content .yt-products-container .product-price .old-price{
  order:-1;
}
#yt_content .yt-products-container .product-price .price{
  font-family:'Titillium Web', sans-serif !important;
  font-weight:800 !important;
  font-style:italic;
  font-size:19px !important;
  color:var(--lf-red) !important;
}
#yt_content .yt-products-container .product-price .old-price,
#yt_content .yt-products-container .product-price .old-price .price{
  border:none !important;
  box-shadow:none !important;
  outline:none !important;
  text-shadow:none !important;
}
#yt_content .yt-products-container .product-price .old-price{
  text-decoration:none !important;
  color:var(--lf-grey) !important;
}
#yt_content .yt-products-container .product-price .old-price .price{
  font-weight:400 !important;
  font-style:normal !important;
  font-size:13px !important;
  color:var(--lf-grey) !important;
  text-decoration:line-through !important;
  text-decoration-color:var(--lf-grey) !important;
  -webkit-text-decoration-color:var(--lf-grey) !important;
}
.yt-products-container .product-addto-wrap{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.yt-products-container .product-addto-wrap .product-addcart{
  float:none !important;
  width:auto !important;
}
.yt-products-container .product-addto-wrap .btn-cart.addtocart{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  min-width:150px;
  margin:0 auto;
  text-align:center;
  background:var(--lf-red) !important;
  color:var(--lf-white) !important;
  font-family:'Titillium Web', sans-serif !important;
  font-weight:700 !important;
  font-style:italic;
  text-transform:uppercase;
  font-size:12.5px !important;
  letter-spacing:.04em;
  padding:11px 20px !important;
  border:none !important;
  transition:background .2s;
}
.yt-products-container .product-addto-wrap .btn-cart.addtocart:hover{
  background:var(--lf-red-dark) !important;
  color:var(--lf-white) !important;
}
.yt-products-container .product-addto-wrap .btn-cart.addtocart::before{
  position:static !important;
  left:auto !important;
  top:auto !important;
  display:inline-block;
  margin-right:8px;
  flex-shrink:0;
}

/* ---------- бейджи "новинка"/скидка на карточке товара ---------- */
.yt-products-container .product-image{
  position:relative;
}
.yt-products-container .sale-product,
.yt-products-container .new-product{
  position:absolute;
  top:10px; left:10px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  height:22px;
  padding:0 9px;
  background:var(--lf-red) !important;
  color:var(--lf-white) !important;
  font-family:'Titillium Web', sans-serif !important;
  font-weight:700 !important;
  font-style:italic;
  font-size:10.5px !important;
  letter-spacing:.04em;
  text-transform:uppercase;
  border:none !important;
  border-radius:0 !important;
}
.yt-products-container .new-product{
  background:var(--lf-carbon-3) !important;
  border:1px solid var(--lf-line) !important;
  color:var(--lf-white) !important;
}

/* ---------- быстрый просмотр ---------- */
.yt-products-container .quick-view-button{
  position:absolute;
  left:10px; right:10px; bottom:10px;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  height:0;
  overflow:hidden;
  background:var(--lf-carbon) !important;
  color:var(--lf-white) !important;
  font-family:'Titillium Web', sans-serif !important;
  font-weight:700 !important;
  font-style:italic;
  font-size:11.5px !important;
  text-transform:uppercase;
  letter-spacing:.04em;
  opacity:0;
  transition:opacity .2s, height .2s;
  text-decoration:none !important;
}
.yt-products-container .item-inner:hover .quick-view-button{
  height:38px;
  opacity:1;
}
.yt-products-container .quick-view-button:hover{
  background:var(--lf-red) !important;
  color:var(--lf-white) !important;
}

/* ---------- рейтинг ---------- */
.yt-products-container .ratings{
  margin-bottom:8px;
}
.yt-products-container .rating-box{
  background:var(--lf-carbon-3) !important;
  width:80px;
  height:11px;
  margin:0 auto;
}
.yt-products-container .rating-box .rating{
  background:var(--lf-red) !important;
  height:11px;
}

/* ---------- избранное / сравнение ---------- */
.yt-products-container .wishlist-compare{
  display:flex;
  gap:6px;
  margin-top:10px;
}
.yt-products-container .wishlist-compare a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:30px; height:30px;
  background:var(--lf-carbon-3) !important;
  border:1px solid var(--lf-line) !important;
  color:var(--lf-grey) !important;
  transition:border-color .2s, color .2s;
  text-decoration:none;
}
.yt-products-container .wishlist-compare a:hover{
  border-color:var(--lf-red) !important;
  color:var(--lf-red) !important;
  background:var(--lf-carbon-3) !important;
}
.yt-products-container .wishlist-compare a i{
  font-size:13px;
}

/* ---------- красные hover-акценты взамен удалённой зелёной схемы ---------- */
.toolbar .pagination-wrap .pagination .pages ol li a:hover,
.toolbar .pagination-wrap .pagination .pages ol li.current a{
  border-color:var(--lf-red) !important;
  color:var(--lf-red) !important;
}
.toolbar .view-mode-wrap .view-mode a:hover,
.toolbar .view-mode-wrap .view-mode strong{
  color:var(--lf-red) !important;
}
.hotcate-wrap .btn-viewmore{
  color:var(--lf-red) !important;
}
#nav li.active > a,
#nav li ul li a:hover{
  color:var(--lf-red) !important;
}

/* ---------- дизайн-оверлей поверх слайдера с фото из админки ---------- */
#yt_header_left{
  display:none !important;
}
#yt_header_right{
  width:100% !important;
  float:none !important;
  padding-left:0 !important;
  padding-right:0 !important;
}
.yt-header-bottom .container{
  overflow:visible;
}
.lf-hero-wrap{
  position:relative;
  overflow:hidden;
  background:var(--lf-carbon) !important;
  width:100% !important;
  max-width:100% !important;
  left:auto !important;
  right:auto !important;
  margin-left:0 !important;
  margin-right:0 !important;
  float:none !important;
}
#rev_slider_1_wrapper,
#rev_slider_1{
  width:100% !important;
}
@media (max-width:991px){
  /* .lf-hero-overlay - абсолютный, растягивается на высоту .lf-hero-wrap (inset:0).
     А высоту .lf-hero-wrap раньше диктовал только #rev_slider_1_wrapper (плагин
     RevSlider ставит ему inline height ~160px через JS) - контента (заголовок в
     2 строки + кнопка) в это не помещалось и обрезалось через overflow:hidden.
     Задаём секции собственную высоту под контент и тянем слайдер под неё - ниже
     по цепочке (ul/li/.slotholder/.tp-bgimg) уже везде height:100%, само подтянется. */
  .lf-hero-wrap{
    height:clamp(360px, 62vw, 560px) !important;
    min-height:clamp(360px, 62vw, 560px) !important;
  }
  #rev_slider_1_wrapper,
  #rev_slider_1{
    height:100% !important;
    max-height:none !important;
  }
}
.lf-hero-wrap::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(12,14,17,.96) 0%, rgba(12,14,17,.88) 32%, rgba(12,14,17,.15) 62%, transparent 78%);
  z-index:2;
  pointer-events:none;
}
.lf-hero-overlay{
  position:absolute;
  inset:0;
  z-index:3;
  display:flex;
  align-items:center;
  pointer-events:none;
}
.lf-hero-overlay-inner{
  max-width:1240px;
  width:100%;
  margin:0 auto;
  padding:0 32px;
  box-sizing:border-box;
}
.lf-hero-content{
  max-width:520px;
}
.lf-hero-overlay .lf-btn{
  pointer-events:auto;
}
.lf-hero-eyebrow{
  font-family:'Titillium Web', sans-serif;
  font-size:12px; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--lf-red);
  display:flex; align-items:center; gap:10px;
  margin-bottom:18px;
}
.lf-hero-eyebrow::before{ content:""; width:24px; height:2px; background:var(--lf-red); }
.lf-hero-title{
  font-family:'Titillium Web', sans-serif !important;
  font-weight:900 !important;
  font-style:italic;
  text-transform:uppercase;
  font-size:clamp(26px, 3.2vw, 42px);
  line-height:1.0;
  color:#f4f5f6;
  margin:0 0 22px;
}
.lf-hero-title em{
  font-style:italic;
  color:transparent;
  -webkit-text-stroke:1.5px #f4f5f6;
}
.lf-hero-ctas{ margin-bottom:34px; }
.lf-btn{
  display:inline-block;
  background:var(--lf-red) !important;
  color:#fff !important;
  font-family:'Titillium Web', sans-serif;
  font-weight:700; font-style:italic;
  text-transform:uppercase;
  font-size:13px; letter-spacing:.05em;
  padding:12px 24px;
  border:none;
  transition:background .2s, transform .2s;
}
.lf-btn:hover{ background:var(--lf-red-dark) !important; transform:translateY(-1px); }

.lf-lights{ display:flex; gap:12px; }
.lf-lights span{
  width:14px; height:14px; border-radius:50%;
  background:var(--lf-carbon-3);
  border:1px solid var(--lf-line);
  display:inline-block;
  animation:lf-light-on 4.5s ease-in-out infinite;
}
.lf-lights span:nth-child(1){animation-delay:0s;}
.lf-lights span:nth-child(2){animation-delay:.35s;}
.lf-lights span:nth-child(3){animation-delay:.7s;}
.lf-lights span:nth-child(4){animation-delay:1.05s;}
.lf-lights span:nth-child(5){animation-delay:1.4s;}
@keyframes lf-light-on{
  0%, 40%{ background:var(--lf-carbon-3); }
  46%, 64%{ background:var(--lf-red); box-shadow:0 0 12px 2px rgba(225,6,0,.7); }
  72%, 100%{ background:var(--lf-carbon-3); box-shadow:none; }
}
.lf-lights-label{
  font-family:Arial, sans-serif;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--lf-grey);
  margin-top:8px;
}

@media (max-width:767px){
  .lf-hero-overlay{ width:100%; max-width:none; padding:0 24px; }
  .lf-hero-wrap::before{ background:linear-gradient(180deg, rgba(12,14,17,.55) 0%, rgba(12,14,17,.92) 65%, rgba(12,14,17,.96) 100%); }
}

@media (prefers-reduced-motion: reduce){
  .lf-lights span{ animation:none; }
}

/* ---------- телеметрия (преимущества) ---------- */
.lf-telemetry{
  background:var(--lf-carbon-2) !important;
  border-top:1px solid var(--lf-line);
  border-bottom:1px solid var(--lf-line);
  margin:30px 0;
}
.lf-tele-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  max-width:1240px;
  margin:0 auto;
}
.lf-tele-item{
  padding:36px 28px;
  border-left:1px solid var(--lf-line);
  text-align:left;
}
.lf-tele-item:first-child{ border-left:none; }
.lf-tele-val{
  font-family:'Titillium Web', sans-serif !important;
  font-weight:900 !important;
  font-style:italic;
  font-size:32px;
  color:var(--lf-red) !important;
  margin-bottom:6px;
}
.lf-tele-lab{
  font-family:Arial, sans-serif;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--lf-grey) !important;
}

@media (max-width:767px){
  .lf-tele-grid{ grid-template-columns:repeat(2, 1fr); }
  .lf-tele-item:nth-child(2n+1){ border-left:none; }
  .lf-tele-item:nth-child(1), .lf-tele-item:nth-child(2){ border-top:none; }
  .lf-tele-item:nth-child(n+3){ border-top:1px solid var(--lf-line); }
}

/* ---------- скроллбар ---------- */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--lf-carbon); }
::-webkit-scrollbar-thumb{ background:var(--lf-line); }
::-webkit-scrollbar-thumb:hover{ background:var(--lf-red); }

/* ---------- текстовый блок на главной: убрать узкий инлайн max-width у абзацев ---------- */
.rte-text.text-indent p{
  max-width:none !important;
}


/* =========================================================
   СТРАНИЦА ТОВАРА (карточка отдельного товара)
   ========================================================= */

.yt-product-detail{
  background:transparent !important;
}
.product-essential{
  background:transparent !important;
  padding-top:8px;
}

/* ---------- галерея слева ---------- */
.yt-detail-left .product-img-box{
  background:var(--lf-carbon-2) !important;
  border:1px solid var(--lf-line) !important;
}

/* Галерея карточки товара - виджет-карусель (moto-widget), у него в теме
   зашит фиксированный max-width:470px на картинке и JS сам расставляет
   пиксельные ширины блокам под конкретный экран - отсюда на разных
   брейкпоинтах то обрезание, то пустые тёмные поля по бокам. Заставляем
   картинку и все обёртки тянуться на 100% ширины блока, высота - по
   картинке (без обрезки, без пустых полей). !important нужен, чтобы
   перебить в том числе инлайновые пиксельные размеры, которые ставит JS. */
.product-img-box.moto-widget-store-product-media-gallery .connected-carousels,
.product-img-box.moto-widget-store-product-media-gallery .stage,
.product-img-box.moto-widget-store-product-media-gallery .carousel-stage,
.product-img-box.moto-widget-store-product-media-gallery .carousel-stage ul,
.product-img-box.moto-widget-store-product-media-gallery li.moto-widget-store-image-block,
.product-img-box.moto-widget-store-product-media-gallery a.moto-widget-image-link{
  width:100% !important;
  height:auto !important;
  max-width:100% !important;
  transform:none !important;
}
.product-img-box.moto-widget-store-product-media-gallery img.moto-widget-image-picture{
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-width:100% !important;
  object-fit:contain !important;
}

/* стрелки листания и полоска миниатюр снизу - не нужны (фото одно, либо
   листать незачем), плюс из-за них оставался лишний тёмный отступ снизу */
.product-img-box.moto-widget-store-product-media-gallery .navigation-wrap{
  display:none !important;
}
.yt-detail-left .navigation-wrap{
  margin-top:14px;
}
.yt-detail-left .prev-navigation,
.yt-detail-left .next-navigation{
  background:var(--lf-carbon-3) !important;
  border:1px solid var(--lf-line) !important;
}

/* ---------- правая колонка: название / цена / статус ---------- */
.yt-detail-right .product-name h1{
  font-family:'Titillium Web', sans-serif !important;
  font-weight:900 !important;
  font-style:italic;
  text-transform:uppercase;
  color:var(--lf-white) !important;
  font-size:26px !important;
  line-height:1.25;
  margin:0 0 14px;
}
.yt-detail-right .price-stock-row{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:18px;
}
.yt-detail-right .price-stock-row .price-box,
.yt-detail-right .price-stock-row .availability{
  float:none !important;
  margin:0 !important;
}
.yt-detail-right .price-box .price.cprice{
  font-family:'Titillium Web', sans-serif !important;
  font-weight:900 !important;
  font-style:italic;
  color:var(--lf-red) !important;
  font-size:28px !important;
}
#yt_content .yt-detail-right .price-box{
  display:flex;
  flex-direction:column;
  gap:2px;
}
#yt_content .yt-detail-right .price-box .old-price{
  order:-1;
}
#yt_content .yt-detail-right .price-box .old-price,
#yt_content .yt-detail-right .price-box .old-price .price{
  border:none !important;
  box-shadow:none !important;
  outline:none !important;
  text-shadow:none !important;
}
#yt_content .yt-detail-right .price-box .old-price{
  text-decoration:none !important;
  color:var(--lf-grey) !important;
}
#yt_content .yt-detail-right .price-box .old-price .price{
  font-weight:400 !important;
  font-style:normal !important;
  font-size:13px !important;
  color:var(--lf-grey) !important;
  text-decoration:line-through !important;
  text-decoration-color:var(--lf-grey) !important;
  -webkit-text-decoration-color:var(--lf-grey) !important;
}

/* ---------- единая плашка "наличие" (страница товара, каталог, сопутствующие/похожие товары) ---------- */
.availability,
.product-status{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:'Titillium Web', sans-serif !important;
  font-weight:700 !important;
  font-size:11px !important;
  letter-spacing:.05em;
  text-transform:uppercase;
  padding:5px 11px 5px 9px;
  border-radius:100px;
  line-height:1.3;
  background:rgba(62,207,106,.12) !important;
  border:1px solid rgba(62,207,106,.35) !important;
  color:var(--lf-green,#3ecf6a) !important;
}
.availability::before,
.product-status::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:currentColor;
  box-shadow:0 0 0 3px rgba(62,207,106,.18);
  flex-shrink:0;
}
.availability span,
.availability span *{
  color:inherit !important;
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:none !important;
  padding:0 !important;
  margin:0 !important;
}
.availability link{
  display:none;
}
/* товар недоступен - любой статус, кроме "в наличии" (alias "ok") */
.product-status:not(.product-status-ok),
.availability:not(.status-ok){
  background:rgba(225,6,0,.1) !important;
  border-color:rgba(225,6,0,.35) !important;
  color:#ff6b63 !important;
}
.product-status:not(.product-status-ok)::before,
.availability:not(.status-ok)::before{
  box-shadow:0 0 0 3px rgba(225,6,0,.16);
}

.yt-detail-right .short-description{
  border-top:1px solid var(--lf-line);
  border-bottom:1px solid var(--lf-line);
  padding:16px 0;
  margin-bottom:20px;
  color:var(--lf-grey) !important;
  font-size:14px;
  line-height:1.6;
}
.yt-detail-right .short-description .std{
  color:var(--lf-grey) !important;
  margin-top:6px;
}

/* ---------- кнопка "в корзину" (без блока количества) ---------- */
.add-to-box{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
}
.wrap-qty{
  display:none !important;
}

.add-to-cart{
  flex:1 1 auto;
  min-width:180px;
}
button.btn-cart.btn-cart-single.addtocart{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--lf-red) !important;
  color:var(--lf-white) !important;
  border:none !important;
  padding:14px 20px !important;
  font-family:'Titillium Web', sans-serif !important;
  font-weight:700 !important;
  font-style:italic;
  text-transform:uppercase;
  font-size:14px !important;
  letter-spacing:.04em;
  transition:background .2s;
}
button.btn-cart.btn-cart-single.addtocart:hover{
  background:var(--lf-red-dark) !important;
}

/* ---------- блок преимуществ справа ---------- */
.yt-custom-block .banner-policy{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:24px;
}
.yt-custom-block .policy{
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--lf-carbon-2) !important;
  border:1px solid var(--lf-line) !important;
  padding:12px 14px;
}
.yt-custom-block .policy a{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--lf-grey) !important;
  font-family:'Titillium Web', sans-serif !important;
  font-weight:600 !important;
  font-size:12.5px !important;
  text-transform:uppercase;
  letter-spacing:.02em;
}
.yt-custom-block .ico-policy{
  width:16px; height:16px;
  flex-shrink:0;
  filter:invert(30%) sepia(90%) saturate(3000%) hue-rotate(-10deg);
}

/* ---------- вкладки: описание / характеристики / отзывы ---------- */
.yt-product-detail .tab-product-detail{
  border:none !important;
  margin-top:48px !important;
  margin-bottom:0;
  border-top:1px solid var(--lf-line) !important;
  padding-top:24px;
  float:none !important;
}
.yt-product-detail .tab-product-detail .yt-tab-navi{
  float:none !important;
  width:100% !important;
  display:flex;
  gap:8px;
  border-bottom:1px solid var(--lf-line);
  margin:0 0 24px !important;
}
.yt-product-detail .tab-product-detail .yt-tab-navi > li{
  position:relative;
}
.yt-product-detail .tab-product-detail .yt-tab-navi > li > a{
  display:inline-block;
  width:auto !important;
  padding:10px 18px !important;
  font-family:'Titillium Web', sans-serif !important;
  font-weight:700 !important;
  font-style:italic;
  text-transform:uppercase;
  font-size:15px !important;
  line-height:normal !important;
  letter-spacing:.03em;
  color:var(--lf-grey) !important;
  background:transparent !important;
  border:none !important;
  border-bottom:2px solid transparent !important;
  transition:color .2s, border-color .2s;
}
.yt-product-detail .tab-product-detail .yt-tab-navi > li > a:before{
  display:none !important;
  content:none !important;
}
.yt-product-detail .tab-product-detail .yt-tab-navi > li > a:hover{
  color:var(--lf-white) !important;
}
.yt-product-detail .tab-product-detail .yt-tab-navi > li.active > a{
  color:var(--lf-white) !important;
  border-bottom-color:var(--lf-red) !important;
}
.yt-product-detail .tab-product-detail .yt-tab-content{
  margin-left:0 !important;
  border-left:none !important;
  padding:0 !important;
  overflow:visible !important;
  min-height:0 !important;
}
.tab-product-detail .rte-text,
.tab-product-detail .rte-text p{
  color:var(--lf-grey) !important;
  font-size:14.5px;
  line-height:1.7;
}

/* ---------- таблица характеристик ---------- */
.attributes table.attribute{
  width:100%;
  border-collapse:collapse;
}
.attributes table.attribute tr{
  border-bottom:1px solid var(--lf-line);
}
.attributes table.attribute td{
  padding:12px 10px;
  color:var(--lf-grey) !important;
  font-size:13.5px;
}
.attributes table.attribute td:first-child{
  color:var(--lf-white) !important;
  font-weight:600;
  width:35%;
}

/* ---------- форма отзыва ---------- */
.testimonial-name input,
.testimonial-email input,
.testimonial-phone input,
.testimonial-site input,
.testimonial-message textarea{
  background:var(--lf-carbon-2) !important;
  border:1px solid var(--lf-line) !important;
  color:var(--lf-white) !important;
}
#sForm .button{
  background:var(--lf-red) !important;
  color:var(--lf-white) !important;
  border:none !important;
  font-family:'Titillium Web', sans-serif !important;
  font-weight:700 !important;
  font-style:italic;
  text-transform:uppercase;
  padding:11px 22px !important;
}
#sForm .button:hover{
  background:var(--lf-red-dark) !important;
}

/* ==========================================================================
   Адаптивные "таблицы"-сетки в CMS-блоках (главная, /delivery, /about)
   Вешаются на классы, которые нужно проставлять прямо в HTML CMS-блока
   рядом с существующим style="" (сам style трогать не нужно — он отвечает
   за десктоп/планшет, эти классы работают только на мобильном).

     lf-grid-3       — сетка карточек в 3 колонки (repeat(3, 1fr))
     lf-grid-2       — сетка карточек в 2 колонки (repeat(2, 1fr))
     lf-grid-sidebar — сетка "контент + сайдбар/медиа" (1fr 320px и т.п.)

   Только мобильный диапазон, планшет (>=768px) не трогаем.
   ========================================================================== */
@media (max-width:767px){

  .lf-grid-3,
  .lf-grid-2,
  .lf-grid-sidebar{
    display:grid !important;
    grid-template-columns:1fr !important;
  }

  /* видео/медиа внутри lf-grid-sidebar — не даёт задавать минимальную
     ширину блока, когда сетка становится однoколоночной */
  .lf-grid-sidebar video,
  .lf-grid-sidebar img{
    width:100% !important;
    max-width:100% !important;
  }
}

/* ==========================================================================
   Лайтбокс (Magnific Popup) для увеличения фото в карточке товара уезжал
   под шапку - у шапки #yt_header z-index:100000 (специально высокий, чтобы
   всегда быть поверх контента), а у попапа по умолчанию гораздо ниже.
   Поднимаем попап выше шапки, чтобы фото и кнопка закрытия были видны
   полностью на всех разрешениях.
   ========================================================================== */
.mfp-wrap{
  z-index:100001 !important;
}
.mfp-bg{
  z-index:100001 !important;
}

/* кнопка закрытия лайтбокса - была старомодной красной полосой на всю
   ширину фото, делаем аккуратную плавающую круглую кнопку в углу экрана
   в стиле тёмной темы сайта.
   ВАЖНО: у сайта есть общий сброс всех кнопок (button:not(.addtocart)
   :not(.lf-burger)) с более высокой специфичностью, чем просто ".mfp-close" -
   поэтому здесь селектор специально усилен (.mfp-content .mfp-figure
   button.mfp-close), чтобы гарантированно победить в каскаде. */
/* кнопка закрытия лайтбокса - была старомодной красной полосой на всю
   ширину фото, делаем аккуратную круглую кнопку, приклеенную к углу самой
   картинки (а не к углу экрана) - так она всегда рядом с фото на любом
   разрешении, без подбора отступов под каждый брейкпоинт.
   ВАЖНО: у сайта есть общий сброс всех кнопок (button:not(.addtocart)
   :not(.lf-burger)) с более высокой специфичностью, чем просто ".mfp-close" -
   поэтому здесь селектор специально усилен (.mfp-content .mfp-figure
   button.mfp-close), чтобы гарантированно победить в каскаде. */
.mfp-content .mfp-figure{
  position:relative !important;
}
.mfp-content .mfp-figure button.mfp-close,
.mfp-image-holder .mfp-figure button.mfp-close,
.mfp-iframe-holder button.mfp-close,
.mfp-container button.mfp-close{
  position:absolute !important;
  top:12px !important;
  right:12px !important;
  left:auto !important;
  bottom:auto !important;
  width:36px !important;
  height:36px !important;
  min-width:36px !important;
  line-height:34px !important;
  font-family:Arial, sans-serif !important;
  font-size:18px !important;
  font-weight:400 !important;
  color:var(--lf-white) !important;
  background:rgba(20,20,20,.65) !important;
  border:1px solid rgba(255,255,255,.25) !important;
  border-radius:50% !important;
  text-align:center !important;
  text-decoration:none !important;
  padding:0 !important;
  margin:0 !important;
  opacity:1 !important;
  z-index:5 !important;
  box-shadow:0 4px 16px rgba(0,0,0,.4) !important;
  backdrop-filter:blur(2px) !important;
  transition:background .2s, border-color .2s, transform .2s !important;
}
.mfp-content .mfp-figure button.mfp-close:hover,
.mfp-content .mfp-figure button.mfp-close:focus{
  background:var(--lf-red) !important;
  border-color:var(--lf-red) !important;
  transform:rotate(90deg) !important;
}
@media (max-width:767px){
  .mfp-content .mfp-figure button.mfp-close,
  .mfp-image-holder .mfp-figure button.mfp-close,
  .mfp-iframe-holder button.mfp-close,
  .mfp-container button.mfp-close{
    top:8px !important;
    right:8px !important;
    width:30px !important;
    height:30px !important;
    min-width:30px !important;
    line-height:28px !important;
    font-size:16px !important;
  }
}

/* =========================================================
   КОРЗИНА И ОФОРМЛЕНИЕ ЗАКАЗА (/cart)
   Разметку (.cart-count-changer, .cart-delete, .field-*,
   #contactForm, #submitBut и т.д.) не трогаем - на неё завязан
   JS показа/скрытия полей и пересчёта сумм. Меняем только вид.
   ========================================================= */

.cart-isnotempty .rte-text,
.cart-isnotempty > p{
  color:var(--lf-grey) !important;
  font-size:13.5px;
  line-height:1.7;
}

/* ---------- уведомления (успех/ошибка заказа) ---------- */
.info-success,
.info-warning{
  background:var(--lf-carbon-2) !important;
  border:1px solid var(--lf-line) !important;
  border-left:3px solid var(--lf-green) !important;
  color:var(--lf-white) !important;
  padding:16px 18px !important;
  font-size:13.5px;
  line-height:1.7;
  margin-bottom:20px;
}
.info-warning{
  border-left-color:var(--lf-red) !important;
}

/* ---------- заголовок "Оформить заказ" (и другие h2 в корзине) ---------- */
.cart-isnotempty h2,
#yt_main h2{
  font-size:15px !important;
  font-weight:700 !important;
  font-style:italic;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:var(--lf-white) !important;
  padding-bottom:12px;
  margin:32px 0 18px !important;
  position:relative;
  display:inline-block;
}
.cart-isnotempty h2::after,
#yt_main h2::after{
  content:"";
  position:absolute;
  left:0; bottom:-1px;
  width:60px; height:2px;
  background:var(--lf-red);
}

/* ---------- таблица товаров -> карточные строки ---------- */
.cart-table.data-table{
  width:100%;
  border-collapse:separate !important;
  border-spacing:0 !important;
  background:var(--lf-carbon-2);
  border:1px solid var(--lf-line) !important;
  color:var(--lf-white);
  margin-bottom:0;
}
/* border-collapse наследует границы старой таблицы через отдельный от каскада
   механизм "border conflict resolution", где border:none на ячейке не побеждает,
   а просто уступает границе строки/таблицы выше. Поэтому полностью уходим от
   border у строк/ячеек и рисуем разделители через box-shadow - его этот
   механизм вообще не касается */
.cart-table.data-table,
.cart-table.data-table tbody,
.cart-table.data-table tr,
.cart-table.data-table td,
.cart-table.data-table th{
  border:none !important;
}
.cart-table.data-table{
  border:1px solid var(--lf-line) !important;
}
.cart-table tr:has(th){
  display:none;
}
.cart-table tr:not(:has(th)){
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px 14px;
  padding:14px 16px;
  box-shadow:inset 0 -1px 0 var(--lf-line);
}
.cart-table tr:last-child{
  box-shadow:none;
}
.cart-table tr:has(> .noborder){
  justify-content:space-between;
  flex-wrap:wrap;
}
.cart-table.data-table td,
.cart-table.data-table th{
  padding:0 !important;
  font-family:'Titillium Web', sans-serif;
  vertical-align:middle;
}

.cart-table .td-img{
  flex:0 0 auto;
  width:56px !important;
}
.cart-table .td-img img{
  width:56px !important;
  max-width:56px !important;
  height:56px !important;
  object-fit:cover;
  background:#fff;
  display:block;
}
.cart-table .td-info{
  flex:1 1 180px;
  min-width:0;
  order:1;
}
.cart-table .td-info .lnk-title{
  font-weight:700;
  font-style:italic;
  font-size:13.5px;
  color:var(--lf-white) !important;
  text-decoration:none;
  display:block;
  overflow-wrap:break-word;
}
.cart-table .td-info .lnk-title:hover{
  color:var(--lf-red) !important;
}
.cart-table tr:has(.td-total) .td-price{
  display:none !important;
}
.cart-table .td-input{
  flex:0 0 auto;
  order:3;
  display:flex;
  align-items:stretch;
  border:1px solid var(--lf-line);
}
.cart-table .td-input input.cart-count-changer{
  width:38px;
  text-align:center;
  background:var(--lf-carbon-3) !important;
  border:none !important;
  border-left:1px solid var(--lf-line) !important;
  border-right:1px solid var(--lf-line) !important;
  color:var(--lf-white) !important;
  font-family:inherit !important;
  font-size:13px !important;
  padding:7px 4px !important;
}
.cart-table .td-input input.cart-count-changer:focus{
  outline:none;
}
.cart-table .lf-qty-minus,
.cart-table .lf-qty-plus{
  display:flex;
  align-items:center;
  justify-content:center;
  width:28px;
  background:var(--lf-carbon-3);
  color:var(--lf-grey);
  font-size:15px;
  line-height:1;
  cursor:pointer;
  user-select:none;
  transition:color .15s, background .15s;
}
.cart-table .lf-qty-minus:hover,
.cart-table .lf-qty-plus:hover{
  background:var(--lf-carbon);
  color:var(--lf-white);
}
.cart-table td.td-total{
  display:flex !important;
  flex-direction:column;
  align-items:flex-end;
  flex:0 0 auto;
  order:4;
  margin-left:auto;
  font-weight:800 !important;
  font-style:italic;
  color:var(--lf-red) !important;
  font-size:15px !important;
  line-height:1.3;
}
.cart-table td.td-total .lf-old-total{
  color:var(--lf-grey) !important;
  font-weight:400 !important;
  font-style:normal;
  font-size:11px !important;
  text-decoration:line-through;
}
.cart-table .td-del{
  flex:0 0 auto;
  order:5;
}
.cart-table .td-del a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
}
.cart-table .td-del img{
  filter:invert(1);
  opacity:.55;
  transition:opacity .2s;
}
.cart-table .td-del a:hover img{
  opacity:1;
}

/* на маленьком экране всё остаётся в одну строку: название переносится
   в 2 строки и освобождает место для количества/суммы/удаления */
@media (max-width:767px){
  .cart-table tr:not(:has(th)){
    flex-wrap:nowrap;
    gap:8px;
    padding:12px 10px;
  }
  .cart-table .td-img{
    flex:0 0 auto;
  }
  .cart-table .td-img img{
    width:44px;
    height:44px;
  }
  .cart-table .td-info{
    flex:1 1 auto;
    min-width:0;
  }
  .cart-table .td-info .lnk-title{
    font-size:12px !important;
    white-space:normal;
    line-height:1.3;
  }
  .cart-table .td-input{
    flex:0 0 auto;
  }
  .cart-table .td-input input.cart-count-changer{
    width:26px;
    padding:6px 2px !important;
    font-size:12px !important;
  }
  .cart-table .lf-qty-minus,
  .cart-table .lf-qty-plus{
    width:20px;
    font-size:12px;
  }
  .cart-table td.td-total{
    font-size:12px !important;
    margin-left:4px;
  }
  .cart-table td.td-total .lf-old-total{
    font-size:9.5px !important;
  }
  .cart-table .td-del{
    margin-left:0;
  }
  .cart-table .td-del a{
    width:22px;
    height:22px;
  }
}

/* ---------- строка "способ доставки" и "итого" ---------- */
.cart-table td.noborder{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.cart-table td.noborder.ta-r{
  color:var(--lf-grey) !important;
  font-size:13px;
}
.cart-table tr:has(> .info-total){
  justify-content:flex-end;
  gap:14px;
}
.cart-table td.info-total.ta-r{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
  color:var(--lf-white) !important;
  font-weight:700;
  text-transform:uppercase;
  font-size:13.5px;
}
.cart-table select.select{
  background:var(--lf-carbon-3) !important;
  border:1px solid var(--lf-line) !important;
  color:var(--lf-white) !important;
  font-family:'Titillium Web', sans-serif !important;
  font-size:13px !important;
  padding:9px 30px 9px 12px !important;
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238b929c'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat:no-repeat;
  background-position:right 8px center;
  background-size:18px;
  max-width:100%;
  text-overflow:ellipsis;
  white-space:nowrap;
  overflow:hidden;
}
.cart-delivery-price{
  color:var(--lf-white) !important;
  font-weight:700;
  font-size:13px;
  text-transform:uppercase;
}
.cart-price{
  font-size:21px !important;
  font-weight:900 !important;
  font-style:italic;
  color:var(--lf-red) !important;
  white-space:nowrap;
}
.cart-table td.info-total.price.noborder{
  flex-shrink:0;
}
.cart-table p.small{
  margin:0;
  font-size:12px;
  font-weight:400;
  text-transform:none;
}
.discount-code-trigger{
  color:var(--lf-grey) !important;
  text-decoration:underline dotted;
}
.discount-code-trigger:hover{
  color:var(--lf-red) !important;
}

/* ---------- форма "Оформить заказ" ---------- */
#contactForm{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 16px;
  background:var(--lf-carbon-2);
  border:1px solid var(--lf-line);
  padding:22px;
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box;
}
#contactForm > div{
  margin-bottom:16px;
}
#contactForm .field-address,
#contactForm .field-fullname,
#contactForm > div:has(textarea),
#contactForm > div:has(input[type="submit"]){
  grid-column:1 / -1;
}
@media (max-width:520px){
  #contactForm{
    grid-template-columns:1fr;
  }
}
#contactForm label{
  display:block;
  font-size:11.5px;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:var(--lf-grey) !important;
  margin-bottom:6px;
  font-weight:400 !important;
}
#contactForm input[type="text"],
#contactForm textarea{
  width:100%;
  background:var(--lf-carbon-3) !important;
  border:1px solid var(--lf-line) !important;
  color:var(--lf-white) !important;
  font-family:'Titillium Web', sans-serif !important;
  font-size:14px !important;
  padding:11px 12px !important;
  box-sizing:border-box;
}
#contactForm input[type="text"]:focus,
#contactForm textarea:focus{
  outline:none;
  border-color:var(--lf-red) !important;
}
#contactForm textarea{
  min-height:80px;
  resize:vertical;
}
#contactForm input[type="submit"],
#submitBut{
  display:block;
  width:100%;
  background:var(--lf-red) !important;
  color:var(--lf-white) !important;
  border:none !important;
  padding:15px !important;
  font-family:'Titillium Web', sans-serif !important;
  font-weight:700 !important;
  font-style:italic;
  text-transform:uppercase;
  font-size:13.5px !important;
  letter-spacing:.04em;
  cursor:pointer;
  margin-top:4px;
}
#contactForm input[type="submit"]:hover{
  background:var(--lf-red-dark) !important;
}

/* ---------- заголовок "Заказ №... оформлен!" на странице подтверждения ---------- */
.lf-order-title{
  text-align:center;
}
.lf-order-title h1{
  color:var(--lf-red) !important;
  margin-bottom:8px !important;
}