/** Shopify CDN: Minification failed

Line 2425:20 Unexpected "{"
Line 2425:29 Expected ":"
Line 2437:20 Unexpected "{"
Line 2437:29 Expected ":"
Line 2449:22 Unexpected "{"
Line 2449:31 Expected ":"
Line 2456:22 Unexpected "{"
Line 2456:31 Expected ":"
Line 2463:18 Unexpected "{"
Line 2463:27 Expected ":"
... and 62 more hidden warnings

**/
/* --- ================================== --- */
/* --- СТИЛИ ДЛЯ ПРОЗРАЧНОГО ХЕДЕРА (v80 - ФИКС БЕЛОЙ КОРЗИНЫ) --- */
/* --- ТОЛЬКО НА ГЛАВНОЙ СТРАНИЦЕ (index) --- */
/* --- ================================== --- */

/* --- 1. СТАНДАРТНОЕ СОСТОЯНИЕ (Прозрачный, наверху) --- */
.template-index header.jd-header {
  position: fixed !important; 
  width: 100%;
  background-color: transparent !important;
  box-shadow: none !important; /* Убираем тень */
  border-bottom: none !important; /* Убираем белую линию */
  z-index: 100 !important; 
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* 1b. ССЫЛКИ - белые */
.template-index header.jd-header .jd-header__desktop-nav a {
  color: #ffffff !important;
  transition: color 0.3s ease;
}

/* 1c. [ИСПРАВЛЕНИЕ v80] ИКОНКИ (User И Cart) - белые */
.template-index header.jd-header .jd-header__icon {
  filter: brightness(0) invert(1) !important; /* Делаем ВСЕ иконки белыми */
  transition: filter 0.3s ease;
}

/* 1d. "Бургер" на мобильном - белый */
.template-index header.jd-header .jd-header__burger-btn span {
   background-color: #ffffff !important;
   transition: background-color 0.3s ease;
}

/* 1e. [ИСПРАВЛЕНИЕ v80] КРУЖОК КОРЗИНЫ: "Отменяем" фильтр, чтобы он остался красным */
.template-index header.jd-header .cart-count-bubble {
    /* Этот "двойной" фильтр отменяет родительский:
      brightness(0) invert(1) <-- родитель
      invert(1) brightness(1) <-- отмена
    */
    filter: invert(1) brightness(1) !important; 
    
    /* И на всякий случай, принудительно ставим цвета */
    background-color: #D92E2E !important; /* Ваш красный */
    color: #ffffff !important; /* Белая цифра */
}


/* --- 2. СОСТОЯНИЕ "ПОСЛЕ СКРОЛЛА" (Непрозрачный, белый) --- */
header.jd-header.jd-header--solid {
  background-color: #ffffff !important; 
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05) !important; 
  border-bottom: none !important;
}

/* 2b. Возвращаем ССЫЛКИ к темному цвету */
header.jd-header.jd-header--solid .jd-header__desktop-nav a {
  color: #111111 !important; 
}

/* 2c. Возвращаем ИКОНКИ к оригиналу */
header.jd-header.jd-header--solid .jd-header__icon {
  filter: none !important;
}

/* 2d. Возвращаем "бургер" к темному цвету */
header.jd-header.jd-header--solid .jd-header__burger-btn span {
   background-color: #111111 !important; 
}

/* 2e. КРУЖОК КОРЗИНЫ: Остается красным */
header.jd-header.jd-header--solid .cart-count-bubble {
    background-color: #D92E2E !important; 
    color: #ffffff !important;
    filter: none !important; 
}






/* Иконка корзины в слайдере — фиолетовая */
.revolution-slider .tp-caption .icon-shop24 {
  color: var(--brand-purple, #8A2BE2) !important;  /* фиолетовый цвет */
  background: #fff !important;  /* белый фон */
  border: 2px solid var(--brand-purple, #8A2BE2) !important; /* фиолетовая рамка */
  border-radius: 50% !important;  /* круглая форма */
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* При наведении иконка корзины в слайдере — фиолетовая */
.revolution-slider .tp-caption .icon-shop24:hover {
  color: var(--brand-purple, #8A2BE2) !important;  /* фиолетовый цвет */
  background: #fff !important;  /* белый фон */
  border: 2px solid var(--brand-purple, #8A2BE2) !important; /* фиолетовая рамка */
}

/* Revolution Slider: делаем корзинку фиолетовой */
.rev_slider .icon-shop24::before,
.rs-module .icon-shop24::before,
.tp-caption .icon-shop24::before,
.rs-layer .icon-shop24::before {
  color: #8A2BE2 !important; /* фиолетовый вместо оранжевого */
}

/* на всякий случай фиксируем и при hover/focus */
.rev_slider .icon-shop24:hover::before,
.rs-module .icon-shop24:hover::before,
.tp-caption .icon-shop24:hover::before,
.rs-layer .icon-shop24:hover::before,
.rev_slider .icon-shop24:focus::before,
.rs-module .icon-shop24:focus::before,
.tp-caption .icon-shop24:focus::before,
.rs-layer .icon-shop24:focus::before {
  color: #8A2BE2 !important;
}

/* === Slider cart icon: default white, on hover purple === */
.rev_slider .icon-shop24,
.rs-module .icon-shop24,
.tp-caption .icon-shop24,
.rs-layer .icon-shop24 {
  transition: color .2s ease;              /* плавность */
}

/* по умолчанию — белая иконка */
.rev_slider .icon-shop24::before,
.rs-module .icon-shop24::before,
.tp-caption .icon-shop24::before,
.rs-layer .icon-shop24::before {
  color: #ffffff !important;
}

/* при наведении — фиолетовая */
.rev_slider .icon-shop24:hover::before,
.rs-module .icon-shop24:hover::before,
.tp-caption .icon-shop24:hover::before,
.rs-layer .icon-shop24:hover::before {
  color: var(--brand-purple, #8A2BE2) !important;
}

/* === RS6 Uranus arrows: default white, hover purple === */

/* базовые цвета контейнера */
.tparrows.uranus {
  color: #ffffff !important;                  /* по умолчанию белые */
  background: transparent !important;         /* на всякий */
  box-shadow: none !important;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}

/* сама «стрелка» — треугольник из бордеров */
.tparrows.uranus::before {
  /* берём цвет из родителя */
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
  /* ниже важное: у правой — левый бордер, у левой — правый */
}

/* RIGHT */
.tp-rightarrow.tparrows.uranus::before {
  border-left-color: currentColor !important;
}
/* LEFT */
.tp-leftarrow.tparrows.uranus::before {
  border-right-color: currentColor !important;
}

/* hover → фиолетовые */
.tparrows.uranus:hover {
  color: var(--brand-purple, #8A2BE2) !important;
}
.tp-rightarrow.tparrows.uranus:hover::before {
  border-left-color: currentColor !important;
}
.tp-leftarrow.tparrows.uranus:hover::before {
  border-right-color: currentColor !important;
}

/* если тема ещё подмешивает цвет через ::after — подстрахуемся */
.tparrows.uranus::after,
.tparrows.uranus:hover::after {
  border-color: currentColor !important;
  color: currentColor !important;
  background: transparent !important;
}

/* === RS Slider – Skin "Uranus" – purple hover === */

/* убираем любые фоновые цвета на ховере (иногда тема кладёт overlay) */
.tparrows.uranus,
.tparrows.uranus:hover {
  background: transparent !important;
  box-shadow: none !important;
}

/* БАЗА: белые стрелки (видимый бордер только нужной стороны) */
.tp-rightarrow.tparrows.uranus::before,
.tp-leftarrow.tparrows.uranus::before {
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
  color: #ffffff !important;               /* на случай шрифтовых вариантов */
}

/* RIGHT: по умолчанию белая «стрелка» за счёт ЛЕВОГО бордера */
.tp-rightarrow.tparrows.uranus::before {
  border-left-color: #ffffff !important;
}
/* LEFT: по умолчанию белая «стрелка» за счёт ПРАВОГО бордера */
.tp-leftarrow.tparrows.uranus::before {
  border-right-color: #ffffff !important;
}

/* HOVER: фиолетовые бордеры нужной стороны */
.tp-rightarrow.tparrows.uranus:hover::before {
  border-left-color: var(--brand-purple, #8A2BE2) !important;
}
.tp-leftarrow.tparrows.uranus:hover::before {
  border-right-color: var(--brand-purple, #8A2BE2) !important;
}

/* На случай, если стрелка сделана шрифтом/иконкой внутри */
.tparrows.uranus:hover::before,
.tparrows.uranus:hover::after {
  color: var(--brand-purple, #8A2BE2) !important;
  border-color: var(--brand-purple, #8A2BE2) !important;
}

/* На случай SVG-иконок в этом же скине */
.tparrows.uranus:hover svg,
.tparrows.uranus:hover svg * {
  fill: var(--brand-purple, #8A2BE2) !important;
  stroke: var(--brand-purple, #8A2BE2) !important;
}

/* ===== FOOTER: белый фон, читабельный текст, фиолетовая кнопка ===== */
#shopify-section-footer,
footer.site-footer,
.footer{background:#fff!important;color:#222!important;border-top:1px solid #eee!important}

/* заголовки/текст */
#shopify-section-footer :is(h1,h2,h3,h4,h5,h6),
footer.site-footer :is(h1,h2,h3,h4,h5,h6){color:#111!important}
#shopify-section-footer :is(p,li,small),
footer.site-footer :is(p,li,small){color:#444!important}

/* ссылки */
#shopify-section-footer a,
footer.site-footer a{color:#111!important;transition:color .2s}
#shopify-section-footer a:hover,
footer.site-footer a:hover{color:var(--brand-purple,#8A2BE2)!important}

/* newsletter: инпут + кнопка */
#shopify-section-footer input[type="email"],
footer.site-footer input[type="email"]{
  background:#fff!important;border:1px solid #ddd!important;color:#111!important;border-radius:8px!important
}
#shopify-section-footer input[type="email"]::placeholder,
footer.site-footer input[type="email"]::placeholder{color:#999!important}

/* кнопка Subscribe в футере */
#shopify-section-footer :is(.btn,.button,button[type="submit"],.newsletter__submit),
footer.site-footer :is(.btn,.button,button[type="submit"],.newsletter__submit){
  background:var(--brand-purple,#8A2BE2)!important;
  border-color:var(--brand-purple,#8A2BE2)!important;
  color:#fff!important;border-radius:8px!important;transition:transform .15s ease,opacity .2s
}
#shopify-section-footer :is(.btn,.button,button[type="submit"],.newsletter__submit):hover,
footer.site-footer :is(.btn,.button,button[type="submit"],.newsletter__submit):hover{transform:translateY(-1px)}

/* соц-иконки: светлые круги, при ховере фиолетовые */
#shopify-section-footer .social-icons a,
footer.site-footer .social-icons a{background:#f2f2f2!important;color:var(--brand-purple,#8A2BE2)!important;border-radius:9999px!important}
#shopify-section-footer .social-icons a:hover,
footer.site-footer .social-icons a:hover{background:var(--brand-purple,#8A2BE2)!important;color:#fff!important}
#shopify-section-footer .social-icons a svg,#shopify-section-footer .social-icons a svg *,
footer.site-footer .social-icons a svg,footer.site-footer .social-icons a svg *{fill:currentColor!important;stroke:currentColor!important}

/* копирайт чуть светлее */
#shopify-section-footer .copyright,
footer.site-footer .copyright{color:#777!important}

/* === FOOTER: белый фон + фикс кнопки Subscribe === */

/* фон футера — накрываем все частые обёртки тем */
#shopify-section-footer,
#shopify-section-footer .tt-footer,
#shopify-section-footer .tt-footer__layout,
#shopify-section-footer .tt-footer__holder,
footer.site-footer,
.footer{
  background:#fff !important;
  color:#222 !important;
  border-top:1px solid #eee !important;
}

/* Заголовок/текст в правом блоке, чтобы читалось на белом */
#shopify-section-footer :is(h1,h2,h3,h4,h5,h6){color:#111 !important;}
#shopify-section-footer :is(p,li,small){color:#444 !important;}

/* Поле ввода */
#shopify-section-footer input[type="email"]{
  background:#fff !important;
  border:1px solid #ddd !important;
  color:#111 !important;
}

/* Кнопка Subscribe — фиолетовая, не прыгает, текст всегда белый */
#shopify-section-footer :is(.newsletter__submit,.btn,button[type="submit"]){
  background:#8A2BE2 !important;
  border-color:#8A2BE2 !important;
  color:#fff !important;
  transform:none !important;
  top:0 !important;
  box-shadow:none !important;
}
#shopify-section-footer :is(.newsletter__submit,.btn,button[type="submit"]):hover,
#shopify-section-footer :is(.newsletter__submit,.btn,button[type="submit"]):focus,
#shopify-section-footer :is(.newsletter__submit,.btn,button[type="submit"]):active{
  background:#7A1FD9 !important;          /* чуть темнее на hover */
  border-color:#7A1FD9 !important;
  color:#fff !important;
  transform:none !important;
  top:0 !important;
  box-shadow:none !important;
}

/* Subscribe: текст ВСЕГДА белый во всех состояниях */
#shopify-section-footer :is(.newsletter__submit,.btn,button[type="submit"]),
#shopify-section-footer :is(.newsletter__submit,.btn,button[type="submit"]) *{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important; /* на всякий случай для webkit */
}
#shopify-section-footer :is(.newsletter__submit,.btn,button[type="submit"]):hover,
#shopify-section-footer :is(.newsletter__submit,.btn,button[type="submit"]):focus,
#shopify-section-footer :is(.newsletter__submit,.btn,button[type="submit"]):active{
  color:#fff !important;
}
#shopify-section-footer :is(.newsletter__submit,.btn,button[type="submit"]):focus{outline:none!important}

/* Newsletter в футере: принудительно тёмный текст */
#shopify-section-footer .tt-newsletter,
#shopify-section-footer .tt-newsletter *,
#shopify-section-footer .newsletter,
#shopify-section-footer .newsletter *,
#shopify-section-footer .footer-newsletter,
#shopify-section-footer .footer-newsletter *{
  color:#111 !important;
}

/* абзацы чуть светлее, чтобы не «кричали» */
#shopify-section-footer .tt-newsletter p,
#shopify-section-footer .newsletter p,
#shopify-section-footer .footer-newsletter p{
  color:#444 !important;
}

/* плейсхолдер в инпуте */
#shopify-section-footer input[type="email"]::placeholder{color:#999 !important;}

/* Footer newsletter — тёмные цвета */
#shopify-section-footer .tt-footer__title{color:#111!important}

#shopify-section-footer .tt-footer__newsletter p{color:#444!important}

/* "15% discount" и прочий bold/italic — не жёлтый */
#shopify-section-footer .tt-footer__newsletter :is(strong,b,em,i){
  color:#111!important;         /* или #444 если хочешь мягче */
}

/* На всякий случай, если там ссылка внутри strong */
#shopify-section-footer .tt-footer__newsletter :is(strong,b) a{
  color:#111!important;
}

/* FOOTER – LINKS (правый логотип) */
.footer-links__col--logo img{
  display: block;
  max-height: inherit !important; /* ← берём из inline-стиля секции */
  height: auto !important;
  width: auto !important;         /* убираем возможный width:100% */
  object-fit: contain;
}

/* Когда секция с логотипом: сетка = 3 колонки + автоматическая под логотип */
.footer-links.has-logo .footer-links__grid{
  grid-template-columns: 1fr 1fr 1fr auto;
  align-items: start;
  gap: 24px;
}

/* Чтобы «About us» точно переносился и не был в одну строку */
.footer-links .rte{
  white-space: normal !important;
  word-break: break-word;
}

/* Чуть меньшая типографика, спокойнее визуально */
.footer-links__title{
  font-size: 16px;        /* было 18 */
  color:#222;
  margin: 0 0 12px;
}
.footer-links__list{       /* пункты меню */
  font-size: 14px;
  line-height: 1.7;
}
.footer-links__list a{
  color:#555;
}
.footer-links__list a:hover{
  color: var(--brand-purple, #8A2BE2);
}
.footer-links__col--about .rte{
  font-size: 14px;        /* текст About us поменьше */
  line-height: 1.8;
  color:#555;
}

/* Чуть больше внутренний отступ всей секции, чтобы слева не липло к краю */
.footer-links{
  padding: 48px 24px;
}

/* Контейнер логотипа — держит высоту слайдера */
.footer-links__logo{
  display:flex;
  align-items:center;          /* по вертикали по центру */
  justify-content:flex-end;    /* прижать вправо */
  /* высота задаётся инлайном из Liquid, см. style="height: ..." */
}

/* Картинка логотипа масштабируется ВНУТРЬ контейнера по высоте */
.footer-links__logo-img{
  height: 100% !important;
  width: auto !important;
  max-height: 100% !important;
  object-fit: contain;
}

/* Чтобы сетка не ломалась и логотип занимал «авто»-колонку */
.footer-links.has-logo .footer-links__grid{
  grid-template-columns: 1fr 1fr 1fr auto;
  align-items: start;
  gap: 24px;
}

/* типографика, переносы и отступ секции — как раньше советовал */
.footer-links{ padding:48px 24px; }
.footer-links__title{ font-size:16px; color:#222; margin:0 0 12px; }
.footer-links__list{ font-size:14px; line-height:1.7; }
.footer-links__list a{ color:#555; }
.footer-links__list a:hover{ color: var(--brand-purple,#8A2BE2); }
.footer-links .rte{ white-space: normal !important; word-break: break-word; }
.footer-links__col--about .rte{ font-size:14px; line-height:1.8; color:#555; }

/* ===== Footer – links: логотип справа ===== */
.footer-links__col--logo{
  display:flex;
  align-items:center;
  justify-content:flex-end;
}

/* Контейнер-«рамка», высота которой задаётся из Liquid через --h */
.footer-links__logo{
  display:inline-flex;
  align-items:center;
  /* --h задаётся инлайн: style="--h: 28px" */
}

/* Жёсткий колпак по высоте + отключаем любые width/height темы */
.footer-links__logo-img{
  height:auto !important;
  max-height: var(--h, 28px) !important; /* <= меняется ползунком */
  width:auto !important;
  max-width: 100% !important;
  object-fit: contain;
}

/* На всякий случай сброс возможных глобальных правил темы */
.footer-links__col--logo img{
  height:auto !important;
  width:auto !important;
  max-height: var(--h, 28px) !important;
}

/* ===== Footer – links: адаптация под мобильные ===== */

/* Базово не даём колонкам «упираться» и рвать слова */
.footer-links__grid { 
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;   /* desktop: три колонки */
  gap: 24px;
}
.footer-links__col{ min-width: 0; }     /* важно для нормального переноса текста */
.footer-links__title{
  font-size: 18px;
  line-height: 1.3;
  margin: 0 0 12px;
}

/* Текст «About» — читаемо переносим, не по буквам */
.footer-links__col--about .rte{
  word-break: normal;
  overflow-wrap: anywhere;
  hyphens: auto;
  line-height: 1.6;
  color: #555;
}
.footer-links__list{
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-links__link{
  color: #555;
  text-decoration: none;
}
.footer-links__link:hover{
  color: var(--brand-purple, #8A2BE2);
}

/* Блок с логотипом справа (desktop) */
.footer-links__col--logo{
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Лого ограничиваем переменной --h (приходит из Liquid) */
.footer-links__logo{ display:inline-flex; align-items:center; }
.footer-links__logo-img{
  height: auto !important;
  width: auto !important;
  max-width: 100% !important;
  max-height: var(--h, 28px) !important;
  object-fit: contain;
}

/* ===== Breakpoints ===== */

/* Планшеты: делаем две колонки */
@media (max-width: 992px){
  .footer-links__grid{
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .footer-links__col--logo{
    justify-content: flex-start;   /* можно поменять на center по желанию */
  }
}

/* Мобильные: всё в один столбик, центр вверху, аккуратные отступы */
@media (max-width: 768px){
  .footer-links{
    padding: 24px 16px;            /* равные поля слева/справа, чтобы не «липло» к краю */
  }
  .footer-links__grid{
    grid-template-columns: 1fr;    /* одна колонка */
    gap: 16px;
  }
  .footer-links__title{
    font-size: 16px;
    margin-bottom: 10px;
    text-align: left;              /* можно center, если хочется как на референсе */
  }
  .footer-links__col--about .rte{
    font-size: 14px;
    line-height: 1.55;
  }
  .footer-links__col--logo{
    justify-content: center;       /* логотип по центру */
    margin-top: 4px;
  }
  .footer-links__logo-img{
    max-height: calc(var(--h, 28px) * 0.9) !important; /* чуть меньше на мобилке */
  }
}

/* Совсем маленькие экраны: чуть компактнее */
@media (max-width: 360px){
  .footer-links__title{ font-size: 15px; }
  .footer-links__col--about .rte{ font-size: 13.5px; }
}




/* ====== SHOP PAGE THEME (как в мокапе) ====== */
:root{
  --violet:#6d28d9;            /* акцент */
  --radius-xxl: 24px;
  --shadow-sm: 0 4px 16px rgba(0,0,0,.06);
  --shadow-lg: 0 10px 30px rgba(0,0,0,.10);
}

/* Типографика хедера */
.shop-eyebrow{ text-transform:uppercase; letter-spacing:.18em; font-size:12px; color:#6b7280; }
.shop-h2{ font-size:clamp(28px,3.2vw,40px); font-weight:700; letter-spacing:-.02em; margin:.25rem 0 .5rem; }
.shop-muted{ color:#6b7280; }

/* Поисковая строка и панель сортировки */
.shop-input{ height:44px; border:1px solid #e5e7eb; border-radius:18px; padding:0 14px; width:100%; }
.shop-control{ border:1px solid #e5e7eb; border-radius:18px; padding:10px 12px; font-size:14px; color:#374151; }

/* ЧИПСЫ-фильтры */
.chips{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{ border-radius:14px; background:#f3f4f6; padding:7px 12px; font-size:14px; transition:all .2s; }
.chip:hover{ background:#e5e7eb; }
.chip.is-active{ background:#111; color:#fff; }

/* Карточка товара */
.pcard{ position:relative; overflow:hidden; border:1px solid #e5e7eb; border-radius:var(--radius-xxl);
  box-shadow:var(--shadow-sm); transition:box-shadow .25s ease, transform .25s ease; background:#fff; }
.pcard:hover{ box-shadow:var(--shadow-lg); transform:translateY(-2px); }
.pcard-img{ aspect-ratio:4/3; width:100%; object-fit:cover; transition:transform .5s ease; }
.pcard:hover .pcard-img{ transform:scale(1.05); }
.pcard-body{ padding:20px; }
.pcard-title{ font-size:18px; font-weight:600; line-height:1.25; }
.pcard-rating{ display:flex; align-items:center; gap:6px; color:#6b7280; font-size:14px; margin-top:4px; }
.pcard-price{ display:flex; align-items:flex-end; gap:8px; margin-top:10px; }
.pcard-price .now{ font-size:24px; font-weight:700; }
.pcard-price .old{ font-size:14px; color:#6b7280; text-decoration:line-through; }

/* Бэйджи */
.badge-violet{ position:absolute; left:16px; top:16px; background:var(--violet); color:#fff;
  padding:4px 10px; border-radius:999px; font-size:12px; box-shadow:0 4px 10px rgba(109,40,217,.3); }
.badge-sold{ position:absolute; right:16px; top:16px; background:#fff; color:#111; border:1px solid #e5e7eb;
  padding:4px 10px; border-radius:999px; font-size:12px; }

/* Свотчи (если понадобятся) */
.swatches{ display:flex; gap:8px; margin-top:8px; }
.swatch{ width:20px; height:20px; border-radius:50%; border:1px solid rgba(0,0,0,.06); }

/* Кнопки */
.btn-primary{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px;
  padding:0 16px; border-radius:18px; background:var(--violet); color:#fff; font-weight:600; }
.btn-primary:hover{ filter:brightness(.95); }
.btn-ghost{ height:44px; padding:0 12px; border-radius:18px; background:transparent; color:#111; }

/* Грид товаров */
.shop-grid{ display:grid; gap:24px; grid-template-columns:repeat(1,minmax(0,1fr)); }
@media (min-width:640px){ .shop-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px){ .shop-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

/* Полоса преимуществ */
.benefits{ margin-top:56px; border:1px solid #e5e7eb; border-radius:24px; padding:24px; display:grid; gap:16px; background:#fff; }
@media (min-width:768px){ .benefits{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.benefit{ display:flex; gap:12px; align-items:center; background:#f9fafb; padding:16px; border-radius:16px; }
.benefit .icon{ width:40px; height:40px; display:flex; align-items:center; justify-content:center; background:#fff;
  border-radius:12px; box-shadow:var(--shadow-sm); }

.template-page .page-title,
.page-header__title { display:none; }



/* ===== SHOP PAGE — финальный стиль ===== */
:root{
  --violet:#6d28d9;
  --radius-xxl:24px;
  --shadow-sm:0 4px 16px rgba(0,0,0,.06);
  --shadow-lg:0 10px 30px rgba(0,0,0,.10);
}

/* типографика секции */
.shop-eyebrow{ text-transform:uppercase; letter-spacing:.18em; font-size:12px; color:#6b7280; }
.shop-h2{ font-size:clamp(28px,3.2vw,40px); font-weight:700; letter-spacing:-.02em; margin:.25rem 0 .5rem; }
.shop-muted{ color:#6b7280; }

/* RIGHT PANEL (поиск/сорт/ценовой ползунок) */
.shop-panel{ display:flex; flex-direction:column; gap:12px; min-width:320px; width:100%; max-width:420px; }
.shop-input{ height:44px; border:1px solid #e5e7eb; border-radius:18px; padding:0 14px; width:100%; }
.shop-control{ border:1px solid #e5e7eb; border-radius:18px; padding:10px 12px; font-size:14px; color:#374151; }
.shop-range{ border:1px solid #e5e7eb; border-radius:18px; padding:12px; }
.shop-range-head{ display:flex; justify-content:space-between; font-size:14px; color:#374151; }
.shop-range input[type=range]{ width:100%; margin-top:10px; }

/* chips */
.chips{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{ border-radius:14px; background:#f3f4f6; padding:7px 12px; font-size:14px; transition:all .2s; }
.chip:hover{ background:#e5e7eb; }
.chip.is-active{ background:#111; color:#fff; }

/* карточки */
.pcard{
  position:relative; overflow:hidden; border:1px solid #e5e7eb; border-radius:var(--radius-xxl);
  background:#fff; box-shadow:var(--shadow-sm); transition:box-shadow .25s ease, transform .25s ease;
  text-decoration:none; color:inherit;
}
.pcard *, .pcard:hover *{ text-decoration:none; }             /* убираем подчёркивания */
.pcard:hover{ box-shadow:var(--shadow-lg); transform:translateY(-2px); }
.pcard-img{ aspect-ratio:4/3; width:100%; object-fit:cover; transition:transform .5s ease; }
.pcard:hover .pcard-img{ transform:scale(1.05); }
.pcard-body{ padding:20px; }
.pcard-title{ font-size:18px; font-weight:600; line-height:1.25; color:#111; }
.pcard:hover .pcard-title{ color:#111; }                      /* текст НЕ перекрашиваем */
.pcard-rating{ display:flex; align-items:center; gap:6px; color:#6b7280; font-size:14px; margin-top:4px; }
.pcard-price{ display:flex; align-items:flex-end; gap:8px; margin-top:10px; }
.pcard-price .now{ font-size:24px; font-weight:700; }
.pcard-price .old{ font-size:14px; color:#6b7280; text-decoration:line-through; }

/* badges */
.badge-violet{ position:absolute; left:16px; top:16px; background:var(--violet); color:#fff;
  padding:4px 10px; border-radius:999px; font-size:12px; box-shadow:0 4px 10px rgba(109,40,217,.3); }
.badge-sold{ position:absolute; right:16px; top:16px; background:#fff; color:#111; border:1px solid #e5e7eb;
  padding:4px 10px; border-radius:999px; font-size:12px; }

/* buttons */
.btn-primary{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px;
  padding:0 16px; border-radius:18px; background:var(--violet); color:#fff; font-weight:600; }
.btn-primary:hover{ filter:brightness(.95); }
.btn-ghost{ height:44px; padding:0 12px; border-radius:18px; background:transparent; color:#111; }

/* grid */
.shop-grid{ display:grid; gap:24px; grid-template-columns:repeat(1,minmax(0,1fr)); }
@media (min-width:640px){ .shop-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px){ .shop-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

/* скрыть дефолтный заголовок страницы только на /pages/shop */
.page-header__title, .main-page-title, .page-title{ display:none!important; }



/* ======= SHOP — alignment, range, select, card hover fixes ======= */

/* Шапка секции: слева текст, справа панель на одной линии */
.shop-header{
  display:flex; flex-wrap:wrap; gap:24px;
  align-items:flex-end; justify-content:space-between;
}
.shop-header .shop-panel{
  flex:0 0 360px; min-width:320px; max-width:420px;
  margin-top:8px;        /* подстройка, чтобы совпасть по высоте со строкой слева */
}

/* Поиск/блоки управления (косметика) */
.shop-input{ height:44px; border:1px solid #e5e7eb; border-radius:18px; padding:0 14px; width:100%; }
.shop-control{ border:1px solid #e5e7eb; border-radius:18px; padding:10px 12px; font-size:14px; color:#374151; }

/* ===== Ползунок цены: ЧЁРНЫЙ трек и нормальный «шарик» ===== */
.shop-range{ border:1px solid #e5e7eb; border-radius:18px; padding:12px; }
.shop-range-head{ display:flex; justify-content:space-between; font-size:14px; color:#374151; }
.shop-range input[type=range]{ width:100%; margin-top:10px; -webkit-appearance:none; appearance:none; height:4px; background:#111; border-radius:999px; }
.shop-range input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:18px; height:18px; background:#fff; border:2px solid #111; border-radius:50%; box-shadow:0 2px 8px rgba(0,0,0,.15); }
.shop-range input[type=range]::-moz-range-thumb{ width:18px; height:18px; background:#fff; border:2px solid #111; border-radius:50%; box-shadow:0 2px 8px rgba(0,0,0,.15); }
.shop-range input[type=range]::-moz-range-track{ height:4px; background:#111; border-radius:999px; }

/* ===== Сортировка: аккуратный селект с собственной стрелкой ===== */
.shop-select{ position:relative; }
.shop-select select{
  width:100%; height:42px; padding:0 34px 0 10px; border:none; background:transparent; font:inherit; color:#374151;
  -webkit-appearance:none; appearance:none; outline:none; cursor:pointer;
}
.shop-select::after{ /* стрелка */
  content:""; position:absolute; right:12px; top:50%; transform:translateY(-50%);
  width:10px; height:6px; pointer-events:none;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6" fill="none"><path d="M1 1l4 4 4-4" stroke="%236b7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center/contain;
}

/* ===== Карточка: только тень + zoom, без перекраски текста/цены ===== */
.pcard{
  position:relative; overflow:hidden; border:1px solid #e5e7eb; border-radius:24px;
  background:#fff; box-shadow:0 4px 16px rgba(0,0,0,.06);
  transition:box-shadow .25s ease, transform .25s ease; color:inherit; text-decoration:none;
}
.pcard *, .pcard:hover *{ text-decoration:none; }
.pcard:hover{ box-shadow:0 10px 30px rgba(0,0,0,.10); transform:translateY(-2px); }
.pcard-img{ aspect-ratio:4/3; width:100%; object-fit:cover; transition:transform .5s ease; }
.pcard:hover .pcard-img{ transform:scale(1.05); }

.pcard-title{ color:#111; }            /* фиксируем */
.pcard .now{ color:#111; }             /* цена всегда чёрная */
.pcard:hover .pcard-title,
.pcard:hover .now,
.pcard:hover .old{ color:inherit; }    /* не менять при ховере */

/* Кнопки: в линию, одинаковая высота, нормальный ховер */
.btn-primary{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px; padding:0 16px; border-radius:18px; background:#6d28d9; color:#fff; font-weight:600; }
.btn-primary:hover{ filter:brightness(.95); }
.btn-ghost{ display:inline-flex; align-items:center; height:44px; padding:0 12px; border-radius:18px; background:transparent; color:#111; }
.btn-ghost:hover{ background:#f3f4f6; }


/* ===== FIXES EXACTLY AS IN MOCKUP ===== */

/* 0) Секция ближе к хедеру */
.shop-top { padding: 12px 24px 32px !important; } /* было больше отступа */

/* 1) Шапка: выравнивание панели справа в линию со слева-текстом */
.shop-header{ display:flex; flex-wrap:wrap; gap:24px; align-items:flex-end; justify-content:space-between; }
.shop-header .shop-panel{ flex:0 0 360px; min-width:320px; max-width:420px; margin-top:6px; }

/* 2) Чёрный ползунок цены + круглый бегунок */
.shop-range{ border:1px solid #e5e7eb; border-radius:18px; padding:12px; }
.shop-range-head{ display:flex; justify-content:space-between; font-size:14px; color:#374151; }
.shop-range input[type=range]{ width:100%; margin-top:10px; -webkit-appearance:none; appearance:none; height:4px; background:#111; border-radius:999px; }
.shop-range input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:18px; height:18px; background:#fff; border:2px solid #111; border-radius:50%; box-shadow:0 2px 8px rgba(0,0,0,.15); }
.shop-range input[type=range]::-moz-range-thumb{ width:18px; height:18px; background:#fff; border:2px solid #111; border-radius:50%; box-shadow:0 2px 8px rgba(0,0,0,.15); }
.shop-range input[type=range]::-moz-range-track{ height:4px; background:#111; border-radius:999px; }

/* 3) Красивый дропдаун сортировки (вместо нативного select) */
.sort-ctrl{ position:relative; }
.sort-ctrl summary{
  list-style:none; cursor:pointer; outline:none;
  border:1px solid #e5e7eb; border-radius:18px; padding:10px 40px 10px 12px; font-size:14px; color:#374151;
  background:#fff; user-select:none;
}
.sort-ctrl summary::-webkit-details-marker{ display:none; }
.sort-ctrl summary:after{
  content:""; position:absolute; right:14px; top:50%; transform:translateY(-50%);
  width:10px; height:6px; background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6" fill="none"><path d="M1 1l4 4 4-4" stroke="%236b7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center/contain;
}
.sort-ctrl[open] summary{ border-bottom-left-radius:12px; border-bottom-right-radius:12px; }
.sort-menu{
  position:absolute; right:0; top:100%; margin-top:6px; min-width:240px;
  background:#fff; border:1px solid #e5e7eb; border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,.10); z-index:50; padding:6px;
}
.sort-menu a{
  display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:12px; color:#374151; text-decoration:none;
}
.sort-menu a:hover{ background:#f3f4f6; }

/* 4) Карточка: при ховере НЕ менять цвета текста и цены (глобальные стили темы могли красить ссылки) */
.pcard, .pcard * { text-decoration:none !important; }
.pcard-title{ color:#111 !important; }
.pcard .now{ color:#111 !important; }
.pcard .old{ color:#6b7280 !important; }
.pcard:hover .pcard-title,
.pcard:hover .now,
.pcard:hover .old{ color:inherit !important; }  /* сохраняем */

/* 5) Ховер по карточке — только тень и zoom картинки */
.pcard{ border:1px solid #e5e7eb; border-radius:24px; background:#fff; box-shadow:0 4px 16px rgba(0,0,0,.06); transition:box-shadow .25s, transform .25s; color:inherit; }
.pcard:hover{ box-shadow:0 10px 30px rgba(0,0,0,.10); transform:translateY(-2px); }
.pcard-img{ aspect-ratio:4/3; width:100%; object-fit:cover; transition:transform .5s; }
.pcard:hover .pcard-img{ transform:scale(1.05); }

/* 6) Кнопки: одна линия, корректный ховер, БЕЗ синего */
.btn-primary{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px; padding:0 16px; border-radius:18px; background:#6d28d9 !important; color:#fff !important; font-weight:600; }
.btn-primary:hover{ background:#5a21b6 !important; filter:none !important; }
.btn-ghost{ display:inline-flex; align-items:center; height:44px; padding:0 12px; border-radius:18px; background:transparent; color:#111; }
.btn-ghost:hover{ background:#f3f4f6; }

/* 7) Контейнер секции (вровень со «стенкой» справа) */
.shop-container{ max-width:1200px; margin:0 auto; padding:0 24px; }


/* === FINAL TWEAKS — alignment + anti-hover-color === */

/* 1) Подтягиваем правую панель на уровень с "OUR COLLECTION" */
.shop-top{ padding-top: 8px !important; }          /* секция ближе к хедеру */
.shop-header{ align-items: flex-start !important; }/* выравниваем по верхней строчке */
.shop-header .shop-panel{ padding-top: 22px !important; } /* тонкая подгонка (можно 20–24px) */

/* 2) Глушим цвет ссылок темы внутри карточки (жёлтый при hover) */
.pcard, .pcard:link, .pcard:visited, .pcard:hover{ color: inherit !important; }
.pcard a, .pcard a:link, .pcard a:visited, .pcard a:hover{ color: inherit !important; text-decoration: none !important; }

/* Чётко фиксируем цвета заголовка и цены и при hover тоже */
.pcard .pcard-title{ color:#111 !important; }
.pcard .now{ color:#111 !important; }
.pcard .old{ color:#6b7280 !important; }
.pcard:hover .pcard-title,
.pcard:hover .now,
.pcard:hover .old{ color: inherit !important; }

/* На всякий случай перехватываем возможные системные классы темы для цены */
.pcard .price, 
.pcard .price__regular, 
.pcard .price__sale, 
.pcard .price-item, 
.pcard .price-item--regular, 
.pcard .price-item--sale{ color:#111 !important; }
.pcard:hover .price, 
.pcard:hover .price__regular, 
.pcard:hover .price-item, 
.pcard:hover .price-item--regular{ color:#111 !important; }

/* Кнопка "В корзину" — без синего при hover */
.btn-primary{ background:#6d28d9 !important; }
.btn-primary:hover{ background:#5a21b6 !important; filter:none !important; }

/* === ALIGN TO MOCKUP — header spacing + right panel level === */

/* вернём комфортный отступ секции от хедера (как на рендере) */
.shop-top { padding-top: 28px !important; }  /* при желании 22–28px */

/* выравниваем: левый текст остаётся на месте, ПРАВАЯ панель чуть ниже */
.shop-header { align-items: flex-start !important; }
.shop-header .shop-panel { margin-top: 34px !important; }  /* опускает панель; подстрой: 30–36px */

/* === LAYOUT FIX — панель вне потока + плотнее к левому краю === */

/* компактнее отступы контейнера (левый/правый) */
.shop-container{ max-width:1200px; margin:0 auto; padding:0 18px !important; }

/* на мобильном всё как было; на десктопе панель позиционируем поверх справа */
@media (min-width: 1024px){
  .shop-header{ position:relative !important; align-items:flex-start !important; }
  .shop-header .shop-panel{
    position:absolute !important;
    right:0; top:0;              /* ровно в уровень с OUR COLLECTION */
    width:360px; max-width:420px; min-width:340px;
    margin:0 !important; padding-top:0 !important;
  }
  /* чтобы слева текст не «заезжал» под панель — дадим правый «запас» */
  .shop-header > div:first-child{ padding-right:380px; }
}

/* расстояние между шапкой и гридом — как в макете (чуть плотнее) */
.chips{ margin-top: 8px; }            /* если используешь чипсы */
.shop-grid{ margin-top: 18px !important; }

/* защитим цвета в карточке от любых ховеров темы (жёлтый) — финт двойной */
.pcard, .pcard *{ color:inherit !important; text-decoration:none !important; }
.pcard .pcard-title{ color:#111 !important; }
.pcard .now{ color:#111 !important; }
.pcard .old{ color:#6b7280 !important; }

/* кнопка — без синего при ховере */
.btn-primary{ background:#6d28d9 !important; }
.btn-primary:hover{ background:#5a21b6 !important; }



/* === PIXEL-PERFECT PATCH — spacing + right panel + cart button === */

/* компактнее поля контейнера (левый/правый) */
.shop-container{ max-width:1200px; margin:0 auto; padding:0 14px !important; }

/* секция ближе к хедеру */
.shop-top{ padding-top:18px !important; }

/* Шапка: панель вынесена из потока и выровнена по строке OUR COLLECTION */
@media (min-width:1024px){
  .shop-header{ position:relative !important; align-items:flex-start !important; }
  .shop-header .shop-panel{
    position:absolute !important;
    right:0; top:2px;             /* подстройка к базовой линии — можно 0–4px */
    width:360px; min-width:340px; max-width:420px;
    margin:0 !important; padding-top:0 !important;
  }
  /* чтобы текст слева не заезжал под панель — даём «запас» справа */
  .shop-header > div:first-child{ padding-right:392px !important; } /* 360 + 32 */
}

/* уменьшаем зазор между шапкой и карточками */
.chips{ margin-top:6px !important; }
.shop-grid{ margin-top:12px !important; }
/* если тема навешивает верхние маргины элементам грида — обнулим их */
.shop-grid > *{ margin-top:0 !important; }

/* Кнопка «В корзину»: всегда фиолетовая, без серого/синего, ровный hover */
.pcard .btn-primary{
  background:#6d28d9 !important; color:#fff !important;
  opacity:1 !important; filter:none !important;
}
.pcard .btn-primary:not([disabled]):hover{ background:#5a21b6 !important; }
.pcard .btn-primary[disabled]{ background:#e5e7eb !important; color:#9ca3af !important; }

/* На всякий случай глушим любые перекраски текста/цены в карточке */
.pcard, .pcard *{ color:inherit !important; text-decoration:none !important; }
.pcard .pcard-title{ color:#111 !important; }
.pcard .now{ color:#111 !important; }
.pcard .old{ color:#6b7280 !important; }


/* === SHOP — FINAL LAYOUT PATCH === */

/* 1) Контейнер компактнее, без гигантского правого поля */
.shop-container{ max-width:1200px; margin:0 auto; padding-left:14px !important; padding-right:14px !important; }

/* 2) Весь блок ниже от header, как на рендере */
.shop-top{ padding-top:40px !important; }      /* при необходимости +/- 2–4px */

/* 3) Шапка: панель выведена из потока и выровнена по OUR COLLECTION */
@media (min-width:1024px){
  .shop-header{ position:relative !important; align-items:flex-start !important; }
  .shop-header .shop-panel{
    position:absolute !important;
    right:0; top:2px;             /* 0–4px — тонкая подгонка к базовой линии */
    width:356px; min-width:340px; max-width:420px;
    margin:0 !important; padding:0 !important;
  }
  /* Ровно рассчитанный «запас» справа, чтобы текст/карточки не залезали под панель */
  .shop-header > div:first-child{ padding-right:372px !important; } /* 356 + 16 */
}

/* 4) Чуть плотнее вертикальные интервалы под шапкой */
.chips{ margin-top:8px !important; }
.shop-grid{ margin-top:14px !important; }
.shop-grid > *{ margin-top:0 !important; }  /* на всякий случай глушим маргины темы */

/* 5) Кнопка “В корзину” — всегда фиолетовая, как на макете */
.pcard .btn-primary{
  background:#6d28d9 !important; color:#fff !important; opacity:1 !important; filter:none !important;
}
.pcard .btn-primary:not([disabled]):hover{ background:#5a21b6 !important; }
.pcard .btn-primary[disabled]{ background:#e5e7eb !important; color:#9ca3af !important; } /* только если товар реально недоступен */

/* 6) На всякий случай фикс цвета внутри карточки — никакой перекраски при hover */
.pcard, .pcard *{ color:inherit !important; text-decoration:none !important; }
.pcard .pcard-title{ color:#111 !important; }
.pcard .now{ color:#111 !important; }
.pcard .old{ color:#6b7280 !important; }


/* === FULL-WIDTH LAYOUT FOR SHOP PAGE === */

/* 1) Контейнер шире и ближе к краям */
.shop-container{
  max-width: 1368px !important;   /* было 1200 — теперь почти во всю страницу */
  margin: 0 auto;
  padding-left: 12px !important;  /* минимальные внутренние поля */
  padding-right: 12px !important;
}

/* 2) Секцию опускаем ниже хедера (чуть больше воздуха сверху) */
.shop-top{ padding-top: 42px !important; }  /* подстрой: 38–46px если нужно */

/* 3) Шапка: правая панель прижата к правому краю и выровнена по "OUR COLLECTION" */
@media (min-width:1024px){
  .shop-header{ position: relative !important; align-items: flex-start !important; }

  /* Ширина панели + прижатие вправо */
  .shop-header .shop-panel{
    position: absolute !important;
    top: 2px;                     /* тонкая подгонка строки; 0–4px */
    right: 12px;                  /* прямо у правого края контейнера */
    width: 384px;                 /* фикс ширины, как в макете */
    max-width: 420px;
    min-width: 340px;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Запас справа у левой колонки = ширина панели + небольшой отступ */
  .shop-header > div:first-child{
    padding-right: 400px !important;  /* 384 + 16 */
  }
}

/* 4) Плотнее сетка под шапкой, без «дыры» */
.chips{ margin-top: 8px !important; }
.shop-grid{ margin-top: 14px !important; }
.shop-grid > *{ margin-top: 0 !important; }

/* 5) Кнопка "В корзину" — фиолетовая, без серого/синего */
.pcard .btn-primary{
  background:#6d28d9 !important; color:#fff !important;
  opacity:1 !important; filter:none !important;
}
.pcard .btn-primary:not([disabled]):hover{ background:#5a21b6 !important; }

/* 6) На всякий случай фикс цвета внутри карточки */
.pcard, .pcard *{ color:inherit !important; text-decoration:none !important; }
.pcard .pcard-title{ color:#111 !important; }
.pcard .now{ color:#111 !important; }
.pcard .old{ color:#6b7280 !important; }

.shop-container{ max-width:1600px !important; padding-left:10px !important; padding-right:10px !important; }

@media (min-width:1024px){
  .shop-header .shop-panel{ width:420px; right:10px; }
  .shop-header > div:first-child{ padding-right:436px !important; } /* 420 + ~16 */
}


/* ===== GRID: не лезем под правую панель ===== */
@media (min-width:1024px){
  /* отступ справа = ширина панели + небольшой зазор */
  .shop-grid{ padding-right: 416px !important; } /* если у панели width 400px → 400 + 16 */
}

/* чтобы карточки начинались сразу под заголовком и ровно шли по строке */
.shop-grid{ margin-top:14px !important; }

/* ===== CTA в карточке: ровно и одинаковой высоты ===== */
.pcard .pcard-body{ display:flex; flex-direction:column; }
.pcard .pcard-cta{
  display:flex; gap:12px; align-items:center; margin-top:auto;
}
.pcard .btn-primary,
.pcard .btn-ghost{
  height:44px; line-height:44px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:18px;
}
.pcard .btn-primary{ background:#6d28d9 !important; color:#fff !important; }
.pcard .btn-primary:hover{ background:#5a21b6 !important; }
.pcard .btn-ghost{ background:transparent; color:#111; padding:0 12px; }
.pcard .btn-ghost:hover{ background:#f3f4f6; }


/* ===== 1) Хедер каталога + правая панель ===== */

/* ширина контейнера и поля у краёв (оставь как у тебя, если уже ок) */
.shop-container{max-width:1440px;margin:0 auto;padding:0 12px}

/* панель справа: фиксированная ширина и прижата к правому краю */
@media (min-width:1024px){
  .shop-header{position:relative;align-items:flex-start}
  .shop-header .shop-panel{
    position:absolute;top:2px;right:12px;width:400px; /* ВАЖНО: ширина панели */
    margin:0;padding:0
  }
  /* «запас» справа у левой колонки = ширина панели + 16px */
  .shop-header>div:first-child{padding-right:416px}
}

/* ===== 2) Сетка товаров: не «залезать» под панель и ровные отступы ===== */
@media (min-width:1024px){
  .shop-grid{padding-right:416px !important} /* то же число, что выше */
}
.shop-grid{margin-top:14px}
.shop-grid>*{margin-top:0}

/* Сортировка: выровнять высоту и ширину триггера */
.sort-ctrl summary,.shop-sort{height:44px;border-radius:18px}
.shop-sort{display:block;min-width:220px}

/* ===== 3) Карточки: ровные CTA и без «плясок» текста ===== */
.pcard{border:1px solid #e5e7eb;border-radius:24px;background:#fff;box-shadow:0 4px 16px rgba(0,0,0,.06);transition:.25s}
.pcard:hover{box-shadow:0 10px 30px rgba(0,0,0,.10);transform:translateY(-2px)}
.pcard-img{aspect-ratio:4/3;width:100%;object-fit:cover;transition:transform .5s}
.pcard:hover .pcard-img{transform:scale(1.05)}

/* фикс цвета внутри карточки: никакого перекрашивания при hover */
.pcard,.pcard *{color:inherit !important;text-decoration:none !important}
.pcard .pcard-title{color:#111 !important}
.pcard .now{color:#111 !important}
.pcard .old{color:#6b7280 !important}

/* блок контента в карточке должен тянуться, а кнопки — прижаты к низу */
.pcard .pcard-body{display:flex;flex-direction:column;min-height:1px}
.pcard .pcard-cta{margin-top:auto;display:flex;gap:12px;align-items:center}

/* кнопки одного размера и на одной линии */
.pcard .btn-primary,.pcard .btn-ghost{
  height:44px;line-height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:18px
}
.pcard .btn-primary{background:#6d28d9 !important;color:#fff !important;padding:0 16px}
.pcard .btn-primary:hover{background:#5a21b6 !important}
.pcard .btn-ghost{background:transparent;color:#111;padding:0 12px}
.pcard .btn-ghost:hover{background:#f3f4f6}

/* значки «Sold out»/бейджи не должны прыгать */
.badge-violet,.badge-sold{position:absolute;padding:4px 10px;border-radius:999px;font-size:12px;line-height:1}


/************* LAYOUT: ширина, панель справа, сетка *************/
.shop-container{ max-width:1440px !important; margin:0 auto; padding:0 12px !important; }
.shop-top{ padding-top:42px !important; }

@media (min-width:1024px){
  .shop-header{ position:relative; align-items:flex-start; }
  .shop-header .shop-panel{
    position:absolute; top:2px; right:12px; width:400px; margin:0; padding:0;
  }
  .shop-header > div:first-child{ padding-right:416px !important; } /* 400 + 16 */
  .shop-grid{ padding-right:416px !important; }                     /* чтобы карточки не лезли под панель */
}
.shop-grid{ margin-top:14px !important; }
.shop-grid > *{ margin-top:0 !important; }

/************* SORT / INPUT: ровные высоты *************/
.shop-sort, .sort-ctrl summary{ height:44px; border-radius:18px; }
.shop-input{ height:44px; border-radius:18px; }

/************* CARD: базовые эффекты и ховеры *************/
.pcard{ border:1px solid #e5e7eb; border-radius:24px; background:#fff;
        box-shadow:0 4px 16px rgba(0,0,0,.06); transition:box-shadow .25s, transform .25s; }
.pcard:hover{ box-shadow:0 10px 30px rgba(0,0,0,.1); transform:translateY(-2px); }
.pcard-img{ width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .5s; }
.pcard:hover .pcard-img{ transform:scale(1.05); }

/* никакой перекраски текста/цен при hover темы */
.pcard, .pcard *{ color:inherit !important; text-decoration:none !important; }
.pcard .pcard-title{ color:#111 !important; }
.pcard .now{ color:#111 !important; }
.pcard .old{ color:#6b7280 !important; }

/* тело карточки тянется, CTA — к низу */
.pcard .pcard-body{ display:flex; flex-direction:column; }
.pcard .pcard-cta{ margin-top:auto; display:flex; gap:12px; align-items:center; }

/************* CTA: кнопки как в макете *************/
.pcard .btn-primary,
.pcard .btn-ghost{
  height:44px; line-height:44px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:18px; font-weight:600;
}

/* ФИОЛЕТОВАЯ КНОПКА, аккуратный hover, без «синего»/«серого» темы */
.pcard .btn-primary{
  background:#6d28d9 !important; color:#fff !important; padding:0 16px !important;
  box-shadow:0 6px 16px rgba(109,40,217,.25); transition:background .2s, box-shadow .2s, transform .2s;
  border:0 !important; opacity:1 !important; filter:none !important;
}
.pcard .btn-primary:hover{
  background:#5a21b6 !important;
  box-shadow:0 10px 24px rgba(109,40,217,.35);
  transform:translateY(-1px);
}
.pcard .btn-primary:active{ transform:translateY(0); }

/* «Подробнее» — аккуратный ghost */
.pcard .btn-ghost{ background:transparent !important; color:#111 !important; padding:0 12px !important; }
.pcard .btn-ghost:hover{ background:#f3f4f6 !important; }

/* бейджи */
.badge-violet,.badge-sold{ position:absolute; padding:4px 10px; border-radius:999px; font-size:12px; line-height:1; }
.badge-violet{ left:16px; top:16px; background:#6d28d9; color:#fff; }
.badge-sold{ right:16px; top:16px; background:#fff; border:1px solid #e5e7eb; color:#111; }


/* ====== ШАПКА СЕКЦИИ: панель справа, сверху от сетки ====== */
@media (min-width: 1200px){
  /* делаем шапку секции гридом из двух колонок */
  .shop-header{
    display:grid !important;
    grid-template-columns: 1fr 400px !important; /* левая колонка + правая панель */
    column-gap: 32px !important;
    align-items: end !important;         /* панель выровнена по низу, как в макете */
    margin-bottom: 24px !important;      /* небольшой отступ до сетки карточек */
    position: static !important;
  }
  /* панель — обычный блок, без absolute */
  .shop-header .shop-panel{
    position: static !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* контейнер ширины — как в макете (можешь поднять до 1440, если нужно) */
.shop-container{ max-width: 1280px !important; margin:0 auto; padding:0 16px !important; }
.shop-top{ padding-top: 40px !important; }

/* ====== СЕТКА ТОВАРОВ: начинается строго под шапкой ====== */
.shop-grid{
  padding-right: 0 !important;  /* убираем старый «запас» под панель */
  margin-top: 0 !important;     /* сетка вплотную к нижней кромке шапки */
}

/* ====== КАРТОЧКИ: ровные CTA и аккуратные ховеры (оставляем как в макете) ====== */
.pcard{ border:1px solid #e5e7eb; border-radius:24px; background:#fff;
        box-shadow:0 4px 16px rgba(0,0,0,.06); transition:box-shadow .25s, transform .25s; }
.pcard:hover{ box-shadow:0 10px 30px rgba(0,0,0,.1); transform:translateY(-2px); }
.pcard-img{ width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .5s; }
.pcard:hover .pcard-img{ transform:scale(1.05); }

/* тексты/цены стабильные */
.pcard, .pcard *{ color:inherit !important; text-decoration:none !important; }
.pcard .pcard-title{ color:#111 !important; }
.pcard .now{ color:#111 !important; }
.pcard .old{ color:#6b7280 !important; }

/* тело тянется, кнопки прижаты к низу */
.pcard .pcard-body{ display:flex; flex-direction:column; }
.pcard .pcard-cta{ margin-top:auto; display:flex; gap:12px; align-items:center; }

/* кнопки «как в макете» */
.pcard .btn-primary,
.pcard .btn-ghost{
  height:44px; line-height:44px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:18px; font-weight:600;
}
.pcard .btn-primary{
  background:#6d28d9 !important; color:#fff !important; padding:0 16px !important;
  box-shadow:0 6px 16px rgba(109,40,217,.25); transition:background .2s, box-shadow .2s, transform .2s;
  border:0 !important;
}
.pcard .btn-primary:hover{
  background:#5a21b6 !important; box-shadow:0 10px 24px rgba(109,40,217,.35); transform:translateY(-1px);
}
.pcard .btn-ghost{ background:transparent !important; color:#111 !important; padding:0 12px !important; }
.pcard .btn-ghost:hover{ background:#f3f4f6 !important; }

/* бейджи */
.badge-violet,.badge-sold{ position:absolute; padding:4px 10px; border-radius:999px; font-size:12px; line-height:1; }
.badge-violet{ left:16px; top:16px; background:#6d28d9; color:#fff; }
.badge-sold{ right:16px; top:16px; background:#fff; border:1px solid #e5e7eb; color:#111; }


/* ===== Home cards grid (только главная) ===== */
.home-cards .container-shop{
  max-width: 1200px; /* подгони при желании */
  margin: 0 auto;
  padding: 0 24px;
}

.home-cards__grid{
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 24px;
}

@media (min-width: 640px){
  .home-cards__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px){
  .home-cards__grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* карточка растягивается по высоте, чтобы кнопки были ровно */
.home-cards .pcard{ height: 100%; }

/* === Slider CTA: прозрачная кнопка по умолчанию, белая при ховере === */

/* убираем оранжевый фон у самой кнопки и у псевдо-слоя круга */
.revolution-slider .tt-btn.colorize-btn,
.revolution-slider .tt-btn.colorize-btn:before,
.revolution-slider .tt-btn.colorize-btn:after,
.revolution-slider .tt-btn--hover-effect.colorize-btn,
.revolution-slider .tt-btn--hover-effect.colorize-btn:before,
.revolution-slider .tt-btn--hover-effect.colorize-btn:after {
  background: transparent !important;
  box-shadow: none !important;
  border: 2px solid rgba(255,255,255,.6) !important; /* тонкий белый контур */
}

/* цвет иконки/текста по умолчанию */
.revolution-slider .tt-btn.colorize-btn,
.revolution-slider .tt-btn.colorize-btn i,
.revolution-slider .tt-btn.colorize-btn span {
  color: #fff !important;
}

/* ховер: белый круг (через :after) и фиолетовая иконка */
.revolution-slider .tt-btn.colorize-btn:hover {
  border-color: #fff !important;
}

.revolution-slider .tt-btn.colorize-btn:hover:after,
.revolution-slider .tt-btn--hover-effect.colorize-btn:hover:after {
  background: #fff !important;
  opacity: 1 !important;
  transform: none !important; /* если тема анимирует масштаб */
}

.revolution-slider .tt-btn.colorize-btn:hover,
.revolution-slider .tt-btn.colorize-btn:hover i,
.revolution-slider .tt-btn.colorize-btn:hover span {
  color: var(--brand-purple, #8A2BE2) !important;
}

/* на всякий случай глушим возможные «бренд-заливки» у colorize-btn */
.revolution-slider a.colorize-btn { background-color: transparent !important; }

/* --- CTA-кружок на слайдере: по умолчанию прозрачный, на ховере белый --- */
/* Глушим любые colorize-версии и сам hover-слой */
.revolution-slider a[class*="colorize-btn"],
.revolution-slider a[class*="colorize-btn"]::before,
.revolution-slider a[class*="colorize-btn"]::after,
.revolution-slider a.tt-btn--hover-effect[class*="colorize-btn"],
.revolution-slider a.tt-btn--hover-effect[class*="colorize-btn"]::before,
.revolution-slider a.tt-btn--hover-effect[class*="colorize-btn"]::after {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 2px solid rgba(255,255,255,.65) !important; /* тонкое белое кольцо */
}

/* Цвет иконки по умолчанию */
.revolution-slider a[class*="colorize-btn"],
.revolution-slider a[class*="colorize-btn"] i { color: #fff !important; }

/* На ховере: белая заливка круга + фиолетовая иконка */
.revolution-slider a[class*="colorize-btn"]:hover { border-color: #fff !important; }
.revolution-slider a[class*="colorize-btn"]:hover::after {
  background: #fff !important;
  opacity: 1 !important;
  transform: none !important; /* если тема масштабирует псевдо-слой */
}
.revolution-slider a[class*="colorize-btn"]:hover i { color: var(--brand-purple,#8A2BE2) !important; }
.revolution-slider a[class*="colorize-btn"]:active::after { background: #fff !important; }

/* Добиваем оранжевую заливку у псевдо-элементов кнопки в слайдере */
.revolution-slider a.tt-btn.tt-btn--big.tt-btn--hover-effect.colorize-btn::after,
.revolution-slider a.tt-btn.tt-btn--big.tt-btn--hover-effect.colorize-btn::before,
.revolution-slider a.tt-btn.tt-btn--hover-effect[class*="colorize-"]::after,
.revolution-slider a.tt-btn.tt-btn--hover-effect[class*="colorize-"]::before {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;            /* чтобы без полупрозрачной “пленки” */
  transform: none !important;        /* если тема масштабирует pseudo-layer */
}

/* Сам круг — прозрачный с белым кольцом; иконка белая */
.revolution-slider a.tt-btn.tt-btn--big.tt-btn--hover-effect[class*="colorize-"] {
  border: 2px solid rgba(255,255,255,.65) !important;
  background: transparent !important;
}
.revolution-slider a.tt-btn.tt-btn--big.tt-btn--hover-effect[class*="colorize-"] i {
  color: #fff !important;
}

/* На ховере — белая заливка + фиолетовая иконка (как было) */
.revolution-slider a.tt-btn.tt-btn--big.tt-btn--hover-effect[class*="colorize-"]:hover {
  border-color: #fff !important;
}
.revolution-slider a.tt-btn.tt-btn--big.tt-btn--hover-effect[class*="colorize-"]:hover::after {
  background: #fff !important;
}
.revolution-slider a.tt-btn.tt-btn--big.tt-btn--hover-effect[class*="colorize-"]:hover i {
  color: var(--brand-purple,#8A2BE2) !important;
}

/* Кнопка в слайдере: по умолчанию прозрачная, на ховере белая */
.revolution-slider .tt-btn.tt-btn--big.tt-btn--hover-effect.tt-btn--outline{
  background: transparent !important;
  border: 2px solid rgba(255,255,255,0.65) !important;
  box-shadow: none !important;
}
.revolution-slider .tt-btn.tt-btn--big.tt-btn--hover-effect.tt-btn--outline i{
  color: #fff !important;
}
.revolution-slider .tt-btn.tt-btn--big.tt-btn--hover-effect.tt-btn--outline:hover{
  background: #fff !important;
  border-color: #fff !important;
}
.revolution-slider .tt-btn.tt-btn--big.tt-btn--hover-effect.tt-btn--outline:hover i{
  color: var(--brand-purple, #8A2BE2) !important;
}

/* На всякий случай сносим любые остаточные слои */
.revolution-slider .tt-btn.tt-btn--big.tt-btn--hover-effect.tt-btn--outline::before,
.revolution-slider .tt-btn.tt-btn--big.tt-btn--hover-effect.tt-btn--outline::after{
  content: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* === Slider CTA: прозрачный по умолчанию, белый при ховере === */
.tt-btn.tt-btn--big.tt-btn--hover-effect.colorize-btn{
  width:100px;
  height:100px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent !important;      /* прозрачный по умолчанию */
  border:2px solid rgba(255,255,255,.7);  /* белая рамка */
  box-shadow:none;
  transition:background .25s, border-color .25s, box-shadow .25s;
}

/* отключаем псевдо-элементы темы, подкрашивающие круг */
.tt-btn.tt-btn--big.tt-btn--hover-effect.colorize-btn::before,
.tt-btn.tt-btn--big.tt-btn--hover-effect.colorize-btn::after{
  content:none !important;
}

/* иконка — фиолетовая сразу */
.tt-btn.tt-btn--big.tt-btn--hover-effect.colorize-btn i{
  font-size:28px;
  color:#8a2be2; /* твой фиолетовый */
  transition:color .2s ease;
}

/* при наведении круг белый, иконка остаётся фиолетовой */
.tt-btn.tt-btn--big.tt-btn--hover-effect.colorize-btn:hover{
  background:#fff !important;
  border-color:#fff !important;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}
.tt-btn.tt-btn--big.tt-btn--hover-effect.colorize-btn:hover i{
  color:#8a2be2;
}

/* размер на мобилках (если нужно) */
@media (max-width:768px){
  .tt-btn.tt-btn--big.tt-btn--hover-effect.colorize-btn{width:80px;height:80px}
  .tt-btn.tt-btn--big.tt-btn--hover-effect.colorize-btn i{font-size:24px}
}

/* страховка от других цепочек селекторов темы */
[class*="tt-btn--big"].colorize-btn{ background:transparent !important; }
[class*="tt-btn--big"].colorize-btn::before,
[class*="tt-btn--big"].colorize-btn::after{ background:transparent !important; }

/* Всегда белая обводка у кнопки-круга */
.tt-btn.tt-btn--big.tt-btn--hover-effect.colorize-btn{
  border: 2px solid #fff !important;      /* белая рамка принудительно */
}

.tt-btn.tt-btn--big.tt-btn--hover-effect.colorize-btn:hover{
  border-color: #fff !important;           /* остаётся белой при ховере */
}

/* На всякий случай глушим возможные оранжевые пресеты темы */
.colorize-btn{ border-color:#fff !important; }
.colorize-btn:hover{ border-color:#fff !important; }


/* --- Сжать отступы футера --- */
#shopify-section-footer,
#shopify-section-footer .footer,
#shopify-section-footer .tt-footer {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

/* Убрать внутренние «воздушные» отступы у рядов футера */
#shopify-section-footer .footer__container,
#shopify-section-footer .tt-footer__top,
#shopify-section-footer .tt-footer__middle,
#shopify-section-footer .tt-footer__bottom,
#shopify-section-footer .row {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Сжать копирайт-строку */
#shopify-section-footer .copyright,
#shopify-section-footer .tt-copyright,
#shopify-section-footer .site-footer__content {
  padding: 8px 0 !important;
  margin: 0 !important;
}

/* Если в футере стоит «спейсер» – скрыть его */
#shopify-section-footer .spacer,
#shopify-section-footer .tt-spacer {
  display: none !important;
}

/* Кнопку "Back to top" вынести позиционированием и не занимать высоту блока */
#shopify-section-footer .tt-back-to-top,
#shopify-section-footer .tt-to-top {
  position: fixed !important;
  right: 20px;
  bottom: 20px;
  margin: 0 !important;
  transform: none !important;
  z-index: 50;
}

/* На мобильных чуть больше «воздуха» (чтобы не было тесно) */
@media (max-width: 768px) {
  #shopify-section-footer,
  #shopify-section-footer .tt-footer {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
}

/* компактный футер: убираем огромные отступы */
#shopify-section-footer .tt-footer__03 .tt-footer__content,
#shopify-section-footer .tt-footer__05 .tt-footer__content,
#shopify-section-footer .tt-footer__content {
  padding-top: 22px !important;
  padding-bottom: 22px !important;
}

/* копирайт — тонкая полоса */
#shopify-section-footer .tt-footer__copyright {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* на всякий случай уберём псевдо-элементы, если они добавляли пустое пространство */
#shopify-section-footer .tt-footer__content::before,
#shopify-section-footer .tt-footer__content::after {
  display: none !important;
  content: none !important;
}

/* колонки футера — минимальные внешние отступы снизу */
#shopify-section-footer .tt-footer__content .row > [class*="col"] {
  margin-bottom: 8px !important;
}

/* кнопка “back to top” не растягивает футер */
#shopify-section-footer .tt-footer__to_top-desktop,
#shopify-section-footer .tt-footer__to_top {
  margin: 0 !important;
  padding: 0 !important;
}

/* мобильная версия – ещё компактнее */
@media (max-width: 768px) {
  #shopify-section-footer .tt-footer__content {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
  #shopify-section-footer .tt-footer__copyright {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
}

/* ещё компактнее футер-контент */
#shopify-section-footer .tt-footer__content{
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

/* копирайт — тонкая серая полоска в цвет блока выше */
#shopify-section-footer .tt-footer__copyright{
  padding: 6px 0 !important;            /* ниже ещё на минимум */
  background-color: inherit !important; /* тот же серый, что у футера сверху */
  border: 0 !important;                 /* убираем любые бордеры */
  font-size: 12px !important;           /* поменьше текст */
  line-height: 1.3 !important;
  color: #8a8a8a !important;            /* спокойный серый текст */
}

/* если тема рисует разделитель через псевдо-элементы — отключаем */
#shopify-section-footer .tt-footer__copyright::before,
#shopify-section-footer .tt-footer__copyright::after{
  content: none !important;
  display: none !important;
}

/* ссылки в копирайте — таким же серым, без лишнего акцента */
#shopify-section-footer .tt-footer__copyright a{
  color: inherit !important;
  text-decoration: none;
  opacity: .9;
}
#shopify-section-footer .tt-footer__copyright a:hover{
  opacity: 1;
  text-decoration: underline;
}

/* мобильная версия — ещё компактнее */
@media (max-width: 768px){
  #shopify-section-footer .tt-footer__content{
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
  #shopify-section-footer .tt-footer__copyright{
    padding: 5px 0 !important;
    font-size: 11.5px !important;
  }
}

/* ===== FOOTER: высота пониже + одна и та же серая подложка ===== */

/* выбери нужный оттенок серого! */
:root { --footer-gray:#f5f5f5; }  /* если нужно темнее/светлее — поменяй здесь */

/* делаем фон одинаковым у контента футера */
#shopify-section-footer .tt-footer_03,
#shopify-section-footer .tt-footer_03 .tt-footer__content{
  background: var(--footer-gray) !important;
}

/* и у полосы копирайта + всех её контейнеров */
#shopify-section-footer .tt-footer_03 .tt-footer__copyright,
#shopify-section-footer .tt-footer_03 .tt-footer__copyright > .container,
#shopify-section-footer .tt-footer_03 .tt-footer__copyright > .container-fluid{
  background: var(--footer-gray) !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 6px 0 !important;   /* пониже */
  line-height: 1.3 !important;
  font-size: 12px !important;
  color: #888 !important;
}

/* вдруг тема рисует белые псевдо-элементы */
#shopify-section-footer .tt-footer_03 .tt-footer__copyright::before,
#shopify-section-footer .tt-footer_03 .tt-footer__copyright::after{
  content: none !important;
  display: none !important;
}

/* ссылки в копирайте ненавязчивые */
#shopify-section-footer .tt-footer_03 .tt-footer__copyright a{
  color: inherit !important;
  text-decoration: none;
  opacity: .9;
}
#shopify-section-footer .tt-footer_03 .tt-footer__copyright a:hover{
  opacity: 1;
  text-decoration: underline;
}

/* на мобилке ещё компактнее */
@media (max-width: 768px){
  #shopify-section-footer .tt-footer_03 .tt-footer__content{ padding: 12px 0 !important; }
  #shopify-section-footer .tt-footer_03 .tt-footer__copyright{ padding: 5px 0 !important; font-size: 11.5px !important; }
}

/* === FOOTER: подложка и компактная полоса копирайта === */

/* выбери оттенок серого (как у блока с линками). 
   Если у тебя используется другой – просто поменяй #f4f4f4 */
:root{ --footer-gray:#f4f4f4; }

/* фон верхней части футера (где USEFUL LINKS / LEGAL / About us) */
#shopify-section-footer .tt-footer__content{
  background: var(--footer-gray) !important;
  padding-top: 16px !important;
  padding-bottom: 12px !important;   /* ← уменьшаем низ, чтобы не было «подушки» */
}

/* сама полоса копирайта */
#shopify-section-footer .tt-footer__copyright{
  background: var(--footer-gray) !important;  /* тот же серый */
  margin-top: 0 !important;
  padding: 6px 0 !important;                  /* ← делаем низкую полоску */
  border: 0 !important;
  box-shadow: none !important;
  line-height: 1.3 !important;
  font-size: 12px !important;
  color: #888 !important;
}

/* убираем возможные внутренние отступы контейнеров внутри копирайта */
#shopify-section-footer .tt-footer__copyright > .container,
#shopify-section-footer .tt-footer__copyright > .container-fluid{
  padding: 0 !important;
  min-height: 0 !important;
}

/* убираем лишние псевдо-элементы/границы, если тема рисует */
#shopify-section-footer .tt-footer__copyright::before,
#shopify-section-footer .tt-footer__copyright::after{
  content: none !important;
  display: none !important;
}

/* ссылки в копирайте — спокойные */
#shopify-section-footer .tt-footer__copyright a{
  color: inherit !important;
  text-decoration: none;
  opacity: .9;
}
#shopify-section-footer .tt-footer__copyright a:hover{
  opacity: 1;
  text-decoration: underline;
}

/* на мобилке ещё компактнее */
@media (max-width: 768px){
  #shopify-section-footer .tt-footer__content{ padding-bottom: 10px !important; }
  #shopify-section-footer .tt-footer__copyright{ padding: 5px 0 !important; font-size: 11.5px !important; }
}

/* --- Footer: убрать разрыв и привести фон/линию к одному виду --- */
/* Один фон и для секции, и для контента футера */
#shopify-section-footer,
#shopify-section-footer .tt-footer,
#shopify-section-footer .tt-footer__content,
#shopify-section-footer .tt-footer__03{
  background:#f7f7f7 !important; /* тот же серый, что у блока с ссылками выше */
}

/* Убрать белую прослойку над футером */
#shopify-section-footer{
  margin-top:0 !important;
}
#shopify-section-footer .tt-footer__content{
  margin-top:0 !important;
  padding-top:12px !important;
  padding-bottom:12px !important;
}

/* Убрать разделительную линию/тень */
#shopify-section-footer .tt-footer__content,
#shopify-section-footer .tt-footer__03,
#shopify-section-footer .tt-footer__content::before,
#shopify-section-footer .tt-footer__content::after,
#shopify-section-footer .tt-footer::before,
#shopify-section-footer hr{
  border:0 !important;
  box-shadow:none !important;
  background:none !important;
  display:block;
}

/* ===== Newsletter Bar (JOYDOMO) ===== */
.jd-newsletter{
  background: var(--nl-bg);
  color: var(--nl-text);
  border-radius: 16px;
  padding: 28px 20px;
  margin: 24px 0;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}
.jd-newsletter .jd-wrap{
  display: grid;
  gap: 18px;
  align-items: center;
}
@media (min-width: 768px){
  .jd-newsletter .jd-wrap{
    grid-template-columns: 1.2fr 1fr;
    gap: 32px;
  }
  .jd-newsletter{ padding: 36px 32px; }
}

.jd-kicker{
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--nl-accent);
  opacity: .9;
}
.jd-title{
  margin: 0 0 8px;
  line-height: 1.1;
  font-weight: 800;
  font-size: clamp(22px, 3.6vw, 40px);
}
.jd-subtext{
  margin: 0 0 12px;
  opacity: .85;
  font-size: 15px;
}
.jd-benefits{
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  display: grid;
  gap: 8px 18px;
  grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (max-width: 480px){
  .jd-benefits{ grid-template-columns: 1fr; }
}
.jd-benefits li{
  position: relative;
  padding-left: 20px;
}
.jd-benefits li::before{
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--nl-accent);
  font-weight: 800;
}

.jd-form .jd-input{
  display: flex;
  align-items: center;
  gap: 10px;
}
.jd-email{
  flex: 1;
  height: 52px;
  border-radius: 999px;
  border: 1px solid #e4e4e7;
  background: #fff;
  padding: 0 18px;
  font-size: 16px;
  outline: none;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.jd-email:focus{
  border-color: var(--nl-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--nl-accent) 20%, transparent);
}

.jd-btn{
  height: 52px;
  border-radius: 999px;
  padding: 0 22px;
  border: 0;
  background: var(--nl-accent);
  color: #fff;
  font-weight: 800;
  letter-spacing: .01em;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
  white-space: nowrap;
}
.jd-btn:hover{ transform: translateY(-1px); filter: brightness(1.04); box-shadow: 0 8px 16px rgba(0,0,0,.08); }
.jd-btn:active{ transform: translateY(0); }

.jd-gdpr{
  margin: 10px 0 0;
  font-size: 12px;
  opacity: .8;
}
.jd-check{ display: flex; align-items: center; gap: 8px; }
.jd-check input{ accent-color: var(--nl-accent); }

.jd-success{
  background: #e8fff0;
  color: #0a7a3b;
  padding: .8rem 1rem;
  border-radius: 12px;
  font-weight: 700;
  text-align: center;
}
.jd-error{ color:#b00020; margin-top:.5rem; font-size: 13px; }


/* Newsletter: сужаем и центрируем */
div[id^="shopify-section-newsletter_bar"] .jd-nl,
div[id^="shopify-section-newsletter_bar"] .jd-newsletter {
  max-width: 1100px;      /* нужная ширина блока */
  margin: 0 auto;         /* по центру */
  padding-left: 24px;     /* боковые отступы */
  padding-right: 24px;
}

/* вертикальные отступы поменьше */
div[id^="shopify-section-newsletter_bar"] .jd-nl,
div[id^="shopify-section-newsletter_bar"] .jd-newsletter {
  padding-top: 24px;
  padding-bottom: 24px;
}

/* на мобильном:
   шире не делаем, но чуть меньше боковой паддинг, чтобы не «липло» */
@media (max-width: 767px) {
  div[id^="shopify-section-newsletter_bar"] .jd-nl,
  div[id^="shopify-section-newsletter_bar"] .jd-newsletter {
    max-width: 100%;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 20px;
    padding-bottom: 20px;
  }
}

div[id^="shopify-section-newsletter_bar"] .jd-nl,
div[id^="shopify-section-newsletter_bar"] .jd-newsletter {
  max-width: 1200px;   /* ↑ было 1100px — увеличили, чтобы совпасть с FAQ */
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}


/* === Newsletter Bar — фиксируем инпут всегда с чёрной рамкой === */

/* 0) На всякий — глушим любые фокус-тени у всех контейнеров вокруг инпута */
[id^="shopify-section"][id*="newsletter"] .tt-input,
[id^="shopify-section"][id*="newsletter"] .tt-field,
[id^="shopify-section"][id*="newsletter"] .tt-input-group,
[id^="shopify-section"][id*="newsletter"] .tt-form__control,
[id^="shopify-section"][id*="newsletter"] .tt-input:before,
[id^="shopify-section"][id*="newsletter"] .tt-input:after,
[id^="shopify-section"][id*="newsletter"] .tt-field:before,
[id^="shopify-section"][id*="newsletter"] .tt-field:after {
  box-shadow: none !important;
  outline: none !important;
  border-color: transparent !important;
  background-image: none !important;
}

/* 1) Сам e-mail инпут — постоянная чёрная рамка */
[id^="shopify-section"][id*="newsletter"] input[type="email"],
[id^="shopify-section"][id*="newsletter"] input[type="email"].tt-newsletter__input {
  border: 2px solid #111 !important;
  background: #fff !important;
  color: #111 !important;
  box-shadow: none !important;
  outline: none !important;
  border-radius: 14px !important;
  padding: 14px 18px !important;
  -webkit-appearance: none;
}

/* 2) На :hover / :focus — остаётся чёрным, без свечения */
[id^="shopify-section"][id*="newsletter"] input[type="email"]:hover,
[id^="shopify-section"][id*="newsletter"] input[type="email"]:focus,
[id^="shopify-section"][id*="newsletter"] input[type="email"]:focus-visible {
  border-color: #111 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* 3) Плейсхолдер мягче */
[id^="shopify-section"][id*="newsletter"] input[type="email"]::placeholder {
  color: #757575 !important;
  opacity: 1;
}

/* 4) Если оранжевый «ободок» рисуется через :focus-within на оболочке */
[id^="shopify-section"][id*="newsletter"] .tt-input:focus-within,
[id^="shopify-section"][id*="newsletter"] .tt-field:focus-within,
[id^="shopify-section"][id*="newsletter"] .tt-input-group:focus-within {
  box-shadow: none !important;
  border-color: #111 !important;
}

[id^="shopify-section"][id*="newsletter"] { background:#f7f7f7; padding:36px 0; }
[id^="shopify-section"][id*="newsletter"] .newsletter-bar,
[id^="shopify-section"][id*="newsletter"] .newsletter,
[id^="shopify-section"][id*="newsletter"] .ttg-cont > * {
  background:transparent!important; box-shadow:none!important; border-radius:0!important;
}


/* Отступы для секции каталога (только на этой странице) */
#shopify-section-shop-grid .section-shop-container.shop-top {
  margin-bottom: 32px; /* зазор между фильтрами и сеткой */
}

#shopify-section-shop-grid .shop-grid {
  padding-top: 24px;   /* добавляем сверху, чтобы не спорить с inline margin-top */
  padding-bottom: 72px; /* основной отступ снизу перед футером */
  margin-bottom: 0;     /* на всякий случай обнулим внешние */
}

/* Мобилки — чуть компактнее */
@media (max-width: 768px) {
  #shopify-section-shop-grid .section-shop-container.shop-top { margin-bottom: 20px; }
  #shopify-section-shop-grid .shop-grid { padding-top: 16px; padding-bottom: 56px; }
}



/* ===== JOYDOMO PDP restyle (targeted selectors from your DOM) ===== */
:root{
  --brand-purple: #7B61FF;      /* фиолетовый */
  --brand-purple-dark: #5d45e6; /* hover */
}

/* 1) Add to Cart → фиолетовая (точно по твоему anchor: a.tt-product-head__cart.tt-btn.tt-btn--cart...) */
a.tt-product-head__cart.tt-btn.tt-btn--cart,
a.tt-product-head__cart.tt-btn.tt-btn--cart.colorize-btn6,
a.prdbut_cart_toggle.tt-btn--cart {
  background: var(--brand-purple) !important;
  border-color: var(--brand-purple) !important;
  color: #fff !important;
}
a.tt-product-head__cart.tt-btn.tt-btn--cart:hover,
a.tt-product-head__cart.tt-btn.tt-btn--cart.colorize-btn6:hover,
a.prdbut_cart_toggle.tt-btn--cart:hover {
  background: var(--brand-purple-dark) !important;
  border-color: var(--brand-purple-dark) !important;
  color: #fff !important;
}

/* 2) "Add Your Review" → фиолетовый */
.tt-product-head__review a,
.tt-product__review a,
a[href*="review"] {
  color: var(--brand-purple) !important;
}
.tt-product-head__review a:hover,
.tt-product__review a:hover,
a[href*="review"]:hover {
  color: var(--brand-purple-dark) !important;
}

/* 3) Убрать хлебные крошки (домик + Mini Flame...) */
.tt-product-page__breadcrumbs,
.tt-breadcrumbs,
.tt-product-page .tt-breadcrumbs {
  display: none !important;
}

/* 4) Нижняя линия активной вкладки → фиолетовая
   (у тебя активный таб — div.tt-tabs__btn.active) */
.tt-tabs__btn.active,
.tt-tabs__btn.is-active {
  color: var(--brand-purple) !important;
  border-bottom-color: var(--brand-purple) !important;
}
.tt-tabs__btn.active::after,
.tt-tabs__btn.is-active::after {
  background: var(--brand-purple) !important;
}

/* На случай, если линия — отдельным элементом внутри */
.tt-tabs__btn.active > span,
.tt-tabs__btn.is-active > span {
  color: var(--brand-purple) !important;
  border-bottom-color: var(--brand-purple) !important;
}

/* Тонкие линии-подчеркивания/HR под блоком описания */
.tt-tabs__bn.active,
.tt-tabs__bn--active,
hr, .section-border, .tab-underline {
  border-color: var(--brand-purple) !important;
  background-color: var(--brand-purple) !important;
}


/* === JOYDOMO PDP final adjustments === */
:root{
  --brand-purple: #7B61FF;
  --brand-purple-dark: #5d45e6;
}

/* 1) Add to Cart — фиолетовая, при наведении фон белый, текст фиолетовый */
a.tt-product-head__cart.tt-btn.tt-btn--cart,
a.tt-product-head__cart.tt-btn.tt-btn--cart.colorize-btn6,
a.prdbut_cart_toggle.tt-btn--cart {
  background: var(--brand-purple) !important;
  border-color: var(--brand-purple) !important;
  color: #fff !important;
  transition: all .25s ease;
}
a.tt-product-head__cart.tt-btn.tt-btn--cart:hover,
a.tt-product-head__cart.tt-btn.tt-btn--cart.colorize-btn6:hover,
a.prdbut_cart_toggle.tt-btn--cart:hover {
  background: #fff !important;
  color: var(--brand-purple) !important;
  border-color: var(--brand-purple) !important;
}

/* 2) “Add Your Review” — фиолетовый */
.tt-product-head__review a,
.tt-product__review a,
a[href*="review"] {
  color: var(--brand-purple) !important;
}
.tt-product-head__review a:hover,
.tt-product__review a:hover,
a[href*="review"]:hover {
  color: var(--brand-purple-dark) !important;
}

/* 3) Убрать хлебные крошки (домик + Mini Flame...) */
.tt-product-page__breadcrumbs,
.tt-breadcrumbs,
.tt-product-page .tt-breadcrumbs {
  display: none !important;
}

/* 4) Под DESCRIPTION — только линия фиолетовая, текст оставляем оригинальный */
.tt-tabs__btn.active,
.tt-tabs__btn.is-active {
  border-bottom-color: var(--brand-purple) !important;
  color: inherit !important; /* сохраняем оригинальный цвет текста */
}
.tt-tabs__btn.active::after,
.tt-tabs__btn.is-active::after {
  background: var(--brand-purple) !important;
}


/* — Fix: hover text/icon on Add to Cart should be BLACK — */
a.tt-product-head__cart.tt-btn.tt-btn--cart:hover,
a.tt-product-head__cart.tt-btn.tt-btn--cart.colorize-btn6:hover,
a.prdbut_cart_toggle.tt-btn--cart:hover {
  background: #fff !important;
  border-color: var(--brand-purple) !important;
  color: #111 !important;             /* текст внутри ссылки */
}

/* перечёркиваем наследование цвета у внутренних узлов */
a.tt-product-head__cart.tt-btn.tt-btn--cart:hover span,
a.tt-product-head__cart.tt-btn.tt-btn--cart:hover strong,
a.tt-product-head__cart.tt-btn.tt-btn--cart:hover i,
a.tt-product-head__cart.tt-btn.tt-btn--cart:hover svg,
a.tt-product-head__cart.tt-btn.tt-btn--cart:hover .icon,
a.tt-product-head__cart.tt-btn.tt-btn--cart:hover .icon-shop24 {
  color: #111 !important;
  fill: #111 !important;
  stroke: #111 !important;
}

/* — Fix: нижняя «скользящая» линия под табами — именно этот элемент — */
.tt-tabs__border {
  border-bottom-color: var(--brand-purple) !important;
}


/* === Fix: orange hover underline on tabs → purple === */

/* сам бегунок-полоска под табами */
.tt-tabs__border {
  border-bottom-color: var(--brand-purple) !important;
}

/* когда наводишь на таб — некоторые темы красят псевдоэлемент */
.tt-tabs__btn:hover::after,
.tt-tabs__btn:focus::after {
  background: var(--brand-purple) !important;
  border-bottom-color: var(--brand-purple) !important;
}

/* на случай, если тема использует альтернативный класс */
.tt-tabs__bn:hover,
.tt-tabs__bn:focus {
  border-bottom-color: var(--brand-purple) !important;
}


/* === Fix: orange underline on tabs (high specificity) === */
#theme .tt-tabs__border {
  border-bottom-color: var(--brand-purple) !important;
  border-color: var(--brand-purple) !important;
}

/* когда наводишь на любой таб — слайдер-бордер тоже фиолетовый */
#theme .tt-tabs__btn:hover ~ .tt-tabs__border,
#theme .tt-tabs__btn:focus ~ .tt-tabs__border {
  border-bottom-color: var(--brand-purple) !important;
  border-color: var(--brand-purple) !important;
}

/* на десктопных брейкпоинтах тема снова красит — переопределим и там */
@media (min-width: 1025px){
  #theme .tt-tabs__border {
    border-bottom-color: var(--brand-purple) !important;
    border-color: var(--brand-purple) !important;
  }
}


/* === Fix: small orange underline on tab hover === */
/* Псевдо-элемент на самой кнопке таба */
#theme .tt-tabs__btn::after,
#theme .tt-tabs__btn:hover::after,
#theme .tt-tabs__btn:focus::after,
#theme .tt-tabs__btn.is-active::after {
  background: var(--brand-purple) !important;
  border-color: var(--brand-purple) !important;
}

/* Альтернативная разметка некоторых билдов темы — отдельный элемент внутри кнопки */
#theme .tt-tabs__btn .tt-tabs__bn,
#theme .tt-tabs__btn:hover .tt-tabs__bn,
#theme .tt-tabs__btn:focus .tt-tabs__bn,
#theme .tt-tabs__btn.is-active .tt-tabs__bn {
  background: var(--brand-purple) !important;
  border-color: var(--brand-purple) !important;
}

/* Сохраняем цвет текста как в теме, чтобы не перекрашивался при hover */
#theme .tt-tabs__btn:hover,
#theme .tt-tabs__btn:focus {
  color: inherit !important;
}


/* === Final kill for orange border on tabs === */

/* универсально для всех ширин */
.tt-tabs__head .tt-tabs__border {
  border-color: var(--brand-purple) !important;
  border-bottom-color: var(--brand-purple) !important;
  background-color: var(--brand-purple) !important;
}

/* перебиваем именно то правило из theme.scss.css на десктопе */
@media only screen and (min-width: 1025px) {
  body#theme .tt-tabs__head > .tt-tabs__border,
  #theme .tt-tabs__head > .tt-tabs__border,
  body#theme div.tt-tabs__head > div.tt-tabs__border {
    border-color: var(--brand-purple) !important;
    border-bottom-color: var(--brand-purple) !important;
    background-color: var(--brand-purple) !important;
  }
}

/* когда "ползунок" сдвигается при hover — тоже фиолетовый */
#theme .tt-tabs__btn:hover ~ .tt-tabs__border,
#theme .tt-tabs__btn:focus ~ .tt-tabs__border {
  border-color: var(--brand-purple) !important;
  background-color: var(--brand-purple) !important;
}


/* === Tabs hover underline — force purple for ALL markers === */

/* бегунок-лента */
.tt-tabs__head .tt-tabs__border { 
  border-color: var(--brand-purple) !important;
  background-color: var(--brand-purple) !important;
}

/* короткий штрих внутри самой кнопки (именно он у тебя желтый) */
.tt-tabs__btn .tt-tabs__bn,
.tt-tabs__btn:hover .tt-tabs__bn,
.tt-tabs__btn:focus .tt-tabs__bn,
.tt-tabs__btn.is-active .tt-tabs__bn {
  background-color: var(--brand-purple) !important;
  border-color: var(--brand-purple) !important;
}

/* если штрих рисуется через псевдоэлемент */
.tt-tabs__btn::after,
.tt-tabs__btn:hover::after,
.tt-tabs__btn:focus::after,
.tt-tabs__btn.is-active::after {
  background-color: var(--brand-purple) !important;
  border-color: var(--brand-purple) !important;
}

/* правило с более высокой специфичностью — перебивает theme.scss.css */
#theme .tt-tabs__btn .tt-tabs__bn,
body#theme .tt-tabs__btn .tt-tabs__bn {
  background-color: var(--brand-purple) !important;
}

/* при наведении по любому табу — и бегунок, и штрих фиолетовые */
#theme .tt-tabs__btn:hover ~ .tt-tabs__border {
  border-color: var(--brand-purple) !important;
  background-color: var(--brand-purple) !important;
}

/* не трогаем цвет текста табов */
.tt-tabs__btn:hover, .tt-tabs__btn:focus { color: inherit !important; }


/* === Tabs underline: force purple on ALL layers === */
:root{ --brand-purple:#7B61FF; }

/* Базовый бегунок */
#theme .tt-tabs__head .tt-tabs__border {
  border-bottom: 4px solid var(--brand-purple) !important;
  border-color: var(--brand-purple) !important;
  background: var(--brand-purple) !important;
  background-color: var(--brand-purple) !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Псевдо-элементы, которыми тема рисует короткий штрих */
#theme .tt-tabs__head .tt-tabs__border::before,
#theme .tt-tabs__head .tt-tabs__border::after {
  border-color: var(--brand-purple) !important;
  background: var(--brand-purple) !important;
  background-color: var(--brand-purple) !important;
  background-image: none !important;
  box-shadow: none !important;
  content: "" !important; /* на случай, если тема включает/выключает */
}

/* Когда двигается бегунок при hover по любому табу */
#theme .tt-tabs__btn:hover ~ .tt-tabs__border,
#theme .tt-tabs__btn:hover ~ .tt-tabs__border::before,
#theme .tt-tabs__btn:hover ~ .tt-tabs__border::after,
#theme .tt-tabs__btn:focus ~ .tt-tabs__border,
#theme .tt-tabs__btn:focus ~ .tt-tabs__border::before,
#theme .tt-tabs__btn:focus ~ .tt-tabs__border::after {
  border-color: var(--brand-purple) !important;
  background: var(--brand-purple) !important;
  background-color: var(--brand-purple) !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Перебиваем правило темы на десктопе (оно у тебя из theme.scss.css) */
@media only screen and (min-width: 1025px){
  #theme .tt-tabs[data-tt-type="horizontal"] .tt-tabs__border,
  body#theme .tt-tabs[data-tt-type="horizontal"] .tt-tabs__border {
    border-bottom: 4px solid var(--brand-purple) !important;
    border-color: var(--brand-purple) !important;
    background: var(--brand-purple) !important;
    background-image: none !important;
    box-shadow: none !important;
  }
}

:root { --brand-purple:#7B61FF; }

/* Бегунок-лента под табами */
#theme .tt-tabs__head .tt-tabs__border{
  border-bottom:4px solid var(--brand-purple) !important;
  border-color:var(--brand-purple) !important;
  background:var(--brand-purple) !important;
  background-image:none !important;
  box-shadow:none !important;
}
/* Иногда лента дорисовывается псевдоэлементами */
#theme .tt-tabs__head .tt-tabs__border::before,
#theme .tt-tabs__head .tt-tabs__border::after{
  content:"" !important;
  background:var(--brand-purple) !important;
  border-color:var(--brand-purple) !important;
  box-shadow:none !important;
}

/* Короткий штрих внутри активного/hover таба */
#theme .tt-tabs__btn .tt-tabs__bn,
#theme .tt-tabs__btn:hover .tt-tabs__bn,
#theme .tt-tabs__btn.is-active .tt-tabs__bn{
  background-color:var(--brand-purple) !important;
  border-color:var(--brand-purple) !important;
}
/* Если штрих рисуется через ::after */
#theme .tt-tabs__btn::after,
#theme .tt-tabs__btn:hover::after,
#theme .tt-tabs__btn.is-active::after{
  background-color:var(--brand-purple) !important;
  border-color:var(--brand-purple) !important;
}

/* Перебиваем ровно то же медиаправило темы (desktop) */
@media only screen and (min-width:1025px){
  #theme .tt-tabs[data-tt-type="horizontal"] .tt-tabs__border{
    border-bottom:4px solid var(--brand-purple) !important;
    border-color:var(--brand-purple) !important;
    background:var(--brand-purple) !important;
  }
}

/* Не даём ссылкам в шапке табов получать оранжевый ховер */
#theme .tt-tabs__head a:hover{ color: inherit !important; }

  /* ===== Full-bleed для этой конкретной секции ===== */
  #shopify-section-{{ section.id }} .container-shop{
    max-width: none !important;
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important; /* выравниваем по центру окна */
    margin-right: calc(50% - 50vw) !important;
    padding-left: clamp(20px, 4vw, 48px) !important;  /* внутренние поля у краёв */
    padding-right: clamp(20px, 4vw, 48px) !important;
    box-sizing: border-box;
    background: #fff; /* тот же фон, что у блока выше */
  }

  /* Сетка карточек без ограничений по ширине */
  #shopify-section-{{ section.id }} .home-cards__grid{
    max-width: none !important;
    width: 100% !important;
    margin: 0 auto !important;
    display: grid !important;
    gap: clamp(16px, 2vw, 32px) !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    align-items: stretch;
  }

  /* Чуть шире карточки на очень больших экранах */
  @media (min-width: 1440px){
    #shopify-section-{{ section.id }} .home-cards__grid{
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
    }
  }

  /* Мобилка — компактные поля */
  @media (max-width: 768px){
    #shopify-section-{{ section.id }} .container-shop{
      padding-left: 16px !important;
      padding-right: 16px !important;
    }
  }

/* === Compact card height fix === */
#shopify-section-{{ section.id }} .shop-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: auto;
  min-height: 420px; /* было около 500-550, делаем чуть ниже */
  transition: transform 0.25s ease;
}

#shopify-section-{{ section.id }} .shop-card:hover {
  transform: translateY(-4px);
}

/* уменьшаем изображения внутри карточки */
#shopify-section-{{ section.id }} .shop-card img {
  max-height: 240px; /* ранее ~320px */
  object-fit: cover;
  border-radius: 12px 12px 0 0;
}

/* адаптация под мобильные устройства */
@media (max-width: 768px) {
  #shopify-section-{{ section.id }} .shop-card {
    min-height: 360px;
  }
  #shopify-section-{{ section.id }} .shop-card img {
    max-height: 200px;
  }
}


/* === Compact product cards v2 — reduced image height === */
#shopify-section-{{ section.id }} .shop-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: auto;
  min-height: 360px; /* было 420, делаем ниже */
  transition: transform 0.25s ease;
  padding-bottom: 8px;
}

#shopify-section-{{ section.id }} .shop-card:hover {
  transform: translateY(-3px);
}

/* Уменьшаем высоту изображений внутри карточек */
#shopify-section-{{ section.id }} .shop-card img {
  max-height: 190px; /* было 240 */
  object-fit: cover;
  border-radius: 12px 12px 0 0;
}

/* Слегка уменьшаем кнопки, чтобы всё было визуально сбалансировано */
#shopify-section-{{ section.id }} .shop-card .button,
#shopify-section-{{ section.id }} .shop-card button,
#shopify-section-{{ section.id }} .shop-card a.button {
  font-size: 14px;
  padding: 8px 20px;
  border-radius: 10px;
}

/* Мобильная адаптация */
@media (max-width: 768px) {
  #shopify-section-{{ section.id }} .shop-card {
    min-height: 300px;
  }
  #shopify-section-{{ section.id }} .shop-card img {
    max-height: 160px;
  }
}

/* === Make product images shorter in this section === */
#shopify-section-{{ section.id }} .pcard-img{
  /* фиксируем компактную высоту картинки */
  height: clamp(160px, 22vw, 220px) !important; /* подстройка размера: мобила → десктоп */
  max-height: 220px !important;
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
}

/* Обязательно растягиваем саму картинку на контейнер */
#shopify-section-{{ section.id }} .pcard-img img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;    /* равномерное кадрирование */
  display: block !important;
}

/* Чуть компактнее карточка в целом */
#shopify-section-{{ section.id }} .shop-card{
  min-height: unset !important;
  padding-bottom: 10px;
}

/* Текстовый блок не даём растягиваться из-за большого фото */
#shopify-section-{{ section.id }} .pcard-body{
  padding-top: 14px !important;
  padding-bottom: 12px !important;
}

/* Мобильная настройка: ещё ниже изображение */
@media (max-width: 768px){
  #shopify-section-{{ section.id }} .pcard-img{
    height: clamp(140px, 38vw, 180px) !important;
    max-height: 180px !important;
  }
}


/* === Product image proportional fix (no stretching) === */
#shopify-section-{{ section.id }} .pcard-img {
  aspect-ratio: 4 / 3; /* фиксируем соотношение сторон */
  width: 100%;
  overflow: hidden;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f7f7f7; /* нейтральный фон на случай, если фото меньше */
}

/* изображение внутри — заполняет контейнер без искажения */
#shopify-section-{{ section.id }} .pcard-img img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* сохраняем пропорции и аккуратную обрезку */
  display: block;
  border-radius: 18px 18px 0 0;
  transition: transform 0.3s ease;
}

/* добавим небольшой hover-эффект для визуальной динамики */
#shopify-section-{{ section.id }} .pcard-img:hover img {
  transform: scale(1.04);
}

/* мобильная адаптация */
@media (max-width: 768px) {
  #shopify-section-{{ section.id }} .pcard-img {
    aspect-ratio: 1 / 1; /* квадратнее для мобильных */
  }
}


/* === Square media for product cards (no distortion) === */
#shopify-section-{{ section.id }} .pcard-media{
  display: block !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;             /* квадрат; можно 5/4 или 4/3 */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  margin: 0 !important;
}

/* само изображение заполняет контейнер пропорционально */
#shopify-section-{{ section.id }} .pcard-media > img.pcard-img{
  width: 100% !important;
  height: 100% !important;                    /* критично: заполняем квадрат */
  max-height: none !important;                /* снимаем прежние ограничения */
  object-fit: cover !important;               /* без искажений, аккуратная обрезка */
  object-position: center center !important;
  display: block !important;
  border-radius: 18px 18px 0 0 !important;
}

/* карточку держим колонкой — медиа сверху, текст ниже */
#shopify-section-{{ section.id }} article.pcard{
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

/* мобилка: можно сделать чуть прямоугольней, чтобы больше фото влезало */
@media (max-width: 768px){
  #shopify-section-{{ section.id }} .pcard-media{
    aspect-ratio: 4 / 3 !important;          /* выше на телефоне; хочешь — оставь 1/1 */
  }
}

/* === Reduce product card height (≈30% smaller) === */
#shopify-section-{{ section.id }} .pcard-media {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 5 / 4 !important; /* раньше было 1/1 (квадрат), теперь немного шире */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
}

#shopify-section-{{ section.id }} .pcard-media > img.pcard-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  border-radius: 18px 18px 0 0 !important;
}

/* На мобильных — немного выше, чтобы не обрезалось */
@media (max-width: 768px) {
  #shopify-section-{{ section.id }} .pcard-media {
    aspect-ratio: 4 / 3 !important;
  }
}

/* === Align product grid gutters with section above === */
#shopify-section-{{ section.id }} .container-shop{
  /* такой же full-bleed контейнер, как у секции выше */
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;  /* тянем к краям окна и центрируем */
  margin-right: calc(50% - 50vw) !important;

  /* те же внутренние поля-гаттеры, что у "About Us — Teaser" */
  padding-left: clamp(24px, 4vw, 48px) !important;
  padding-right: clamp(24px, 4vw, 48px) !important;
  box-sizing: border-box !important;
  background: #fff;
}

/* сама сетка — без доп. ограничений */
#shopify-section-{{ section.id }} .home-cards__grid{
  max-width: 1800px !important;              /* можно увеличить/уменьшить при желании */
  margin: 0 auto !important;
  display: grid !important;
  gap: clamp(16px, 2vw, 28px) !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
}

/* мобильные — гаттеры чуть уже */
@media (max-width: 768px){
  #shopify-section-{{ section.id }} .container-shop{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}


/* ===== JOYDOMO – Newsletter popup restyle ===== */

/* затемнение + лёгкий blur */
.mfp-bg{
  background: rgba(17,24,39,.48) !important;
  backdrop-filter: blur(4px);
}

/* контейнер по центру — Magnific уже центрирует, просто ограничим ширину карточки */
.mfp-content .tt-newsletter-popup{
  width: min(560px, 92vw) !important;
  margin: 0 auto !important;
  background: #ffffff !important;          /* белая карта вместо оранжевого */
  border-radius: 24px !important;
  box-shadow: 0 18px 40px rgba(2,6,23,.16) !important;
  overflow: hidden !important;
  padding: clamp(20px, 4vw, 32px) !important;
  color: #111827 !important;               /* основной цвет текста */
}

/* заголовок/подзаголовок */
.mfp-content .tt-newsletter-popup__text h2,
.mfp-content .tt-newsletter-popup h2{
  margin: 0 0 8px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  font-size: clamp(24px, 3.4vw, 36px) !important;
  color: #111827 !important;
}
.mfp-content .tt-newsletter-popup__text-02,
.mfp-content .tt-newsletter-popup p{
  margin: 0 0 16px !important;
  font-size: clamp(14px, 1.2vw, 16px) !important;
  color: #6b7280 !important;               /* muted */
}

/* форма: инпут + кнопка в одну линию */
.mfp-content .tt-newsletter-popup form{
  display: flex !important;
  gap: 10px !important;
  margin: 10px 0 12px !important;
}
.mfp-content .tt-newsletter-popup input[type="email"]{
  flex: 1 1 auto !important;
  padding: 12px 14px !important;
  border-radius: 12px !important;
  border: 1px solid #e5e7eb !important;
  background: #fff !important;
  color: #111827 !important;
  outline: none !important;
}
.mfp-content .tt-newsletter-popup input[type="email"]:focus{
  border-color: color-mix(in srgb, #6b4eff 40%, #e5e7eb) !important;
  box-shadow: 0 0 0 3px rgba(107,78,255,.15) !important;
}

/* кнопка = как Add to cart */
.mfp-content .tt-newsletter-popup button,
.mfp-content .tt-newsletter-popup .btn,
.mfp-content .tt-newsletter-popup .subscribe,
.mfp-content .tt-newsletter-popup input[type="submit"]{
  border: 0 !important;
  border-radius: 12px !important;
  padding: 12px 18px !important;
  font-weight: 600 !important;
  color: #fff !important;
  background: #6b4eff !important;
  box-shadow: 0 6px 16px rgba(107,78,255,.35) !important;
  cursor: pointer !important;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease !important;
  white-space: nowrap !important;
}
.mfp-content .tt-newsletter-popup button:hover,
.mfp-content .tt-newsletter-popup .btn:hover,
.mfp-content .tt-newsletter-popup input[type="submit"]:hover{
  background: #5a3ce0 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 24px rgba(107,78,255,.45) !important;
}

/* чекбокс «Don’t show again» и легалка */
.mfp-content .tt-newsletter-popup__optin,
.mfp-content .tt-newsletter-popup .tt-newsletter-popup__show_popup .tt-checkbox,
.mfp-content .tt-newsletter-popup .tt-newsletter-popup__show_popup{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 8px !important;
  color: #6b7280 !important;
  font-size: 14px !important;
}
.mfp-content .tt-newsletter-popup a{ color:#6b7280 !important; text-decoration: underline !important; }

/* соц-ссылки — круглые чипы */
.mfp-content .tt-newsletter-popup__social{
  display: flex !important;
  gap: 8px !important;
  margin-top: 14px !important;
}
.mfp-content .tt-newsletter-popup__social a{
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: #f3f4f6 !important; color: #374151 !important;
  border-radius: 999px !important; font-weight: 700 !important; font-size: 12px !important;
}

/* крестик Magnific */
.mfp-content .mfp-close{
  position: absolute !important;
  top: 10px !important; right: 10px !important;
  width: 36px !important; height: 36px !important;
  border-radius: 999px !important;
  border: 1px solid #e5e7eb !important;
  background: #fff !important; color: #111827 !important;
  opacity: 1 !important;
  line-height: 34px !important; font-size: 20px !important;
}
.mfp-content .mfp-close:hover{ background:#f9fafb !important; }

/* мобильная адаптация: кнопка под инпутом */
@media (max-width: 520px){
  .mfp-content .tt-newsletter-popup form{ flex-direction: column !important; }
  .mfp-content .tt-newsletter-popup button,
  .mfp-content .tt-newsletter-popup input[type="submit"]{ width: 100% !important; }
}

/* ============ JOYDOMO newsletter popup — clean fix ============ */

/* фон */
.mfp-bg{
  background: rgba(17,24,39,.48) !important;
  backdrop-filter: blur(4px);
}

/* карточка */
.mfp-content .tt-newsletter-popup{
  width: min(540px, 92vw) !important;
  margin: 0 auto !important;
  background: #fff !important;
  border-radius: 24px !important;
  box-shadow: 0 18px 40px rgba(2,6,23,.16) !important;
  padding: clamp(22px, 4vw, 32px) !important;
  color: #111827 !important;
  text-align: center !important;
  position: relative;
}

/* заголовок/подзаголовок */
.mfp-content .tt-newsletter-popup h2{
  margin: 0 0 8px !important;
  font-weight: 800 !important;
  letter-spacing: -.02em;
  font-size: clamp(22px, 3.1vw, 30px) !important;
  color: #111827 !important;
}
.mfp-content .tt-newsletter-popup p{
  margin: 0 0 16px !important;
  font-size: 15px !important;
  color: #6b7280 !important;
}

/* форма в одну линию; на мобилке — в столбик */
.mfp-content .tt-newsletter-popup form{
  display: flex !important;
  gap: 10px !important;
  margin: 10px 0 12px !important;
  align-items: center !important;
  justify-content: center !important;
}
.mfp-content .tt-newsletter-popup input[type="email"]{
  flex: 1 1 auto !important;
  height: 46px !important;
  padding: 0 14px !important;
  border-radius: 12px !important;
  border: 1px solid #e5e7eb !important;
  background: #fff !important;
  color: #111827 !important;
  outline: none !important;
}
.mfp-content .tt-newsletter-popup input[type="email"]:focus{
  border-color: #c9c2ff !important;
  box-shadow: 0 0 0 3px rgba(107,78,255,.15) !important;
}

/* кнопка как Add to cart, без «выпуклой пилюли» */
.mfp-content .tt-newsletter-popup input[type="submit"],
.mfp-content .tt-newsletter-popup .btn,
.mfp-content .tt-newsletter-popup button.subscribe{
  height: 46px !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  color: #fff !important;
  background: #6b4eff !important;
  box-shadow: 0 6px 16px rgba(107,78,255,.35) !important;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease !important;
}
.mfp-content .tt-newsletter-popup input[type="submit"]:hover,
.mfp-content .tt-newsletter-popup .btn:hover,
.mfp-content .tt-newsletter-popup button.subscribe:hover{
  background: #5a3ce0 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 24px rgba(107,78,255,.45) !important;
}

/* убираем социалки/иконки */
.mfp-content .tt-newsletter-popup__social,
.mfp-content .tt-newsletter-popup_social,
.mfp-content .tt-newsletter-popup__icons,
.mfp-content .tt-newsletter-popup .icons,
.mfp-content .tt-newsletter-popup .soc,
.mfp-content .tt-newsletter-popup .tt-newsletter-popup__media{
  display: none !important;
}

/* чекбокс «Don’t show this popup again» */
.mfp-content .tt-newsletter-popup .tt-newsletter-popup__show_popup,
.mfp-content .tt-newsletter-popup .tt-newsletter-popup__optin{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 6px !important;
  color: #6b7280 !important;
  font-size: 14px !important;
}

/* крестик — ровный, без фиолетового фона/свечения */
.mfp-content .mfp-close{
  position: absolute !important;
  top: 10px !important; right: 10px !important;
  width: 36px !important; height: 36px !important;
  border-radius: 999px !important;
  border: 1px solid #e5e7eb !important;
  background: #fff !important;
  color: #111827 !important;
  opacity: 1 !important;
  line-height: 34px !important; 
  font-size: 20px !important;
  box-shadow: none !important;
}
.mfp-content .mfp-close:hover{ background:#f9fafb !important; }

/* мобилка */
@media (max-width: 520px){
  .mfp-content .tt-newsletter-popup form{ flex-direction: column !important; }
  .mfp-content .tt-newsletter-popup input[type="submit"],
  .mfp-content .tt-newsletter-popup .btn,
  .mfp-content .tt-newsletter-popup button.subscribe{ width: 100% !important; }
}


/* ============ JOYDOMO newsletter popup — final polished version ============ */

/* фон */
.mfp-bg{
  background: rgba(17,24,39,.48) !important;
  backdrop-filter: blur(4px);
}

/* карточка */
.mfp-content .tt-newsletter-popup{
  width: min(520px, 92vw) !important;
  margin: 0 auto !important;
  background: #fff !important;
  border-radius: 24px !important;
  box-shadow: 0 18px 40px rgba(2,6,23,.16) !important;
  padding: clamp(26px, 4vw, 36px) !important;
  color: #111827 !important;
  text-align: center !important;
  position: relative;
  font-family: inherit !important;
}

/* ——— добавляем надпись скидки ——— */
.mfp-content .tt-newsletter-popup::before{
  content: "10% OFF";
  display: block;
  font-weight: 800;
  font-size: clamp(32px, 5vw, 42px);
  color: #6b4eff;
  margin-bottom: 8px;
}

/* заголовок/подзаголовок */
.mfp-content .tt-newsletter-popup h2{
  margin: 0 0 8px !important;
  font-weight: 700 !important;
  font-size: clamp(18px, 2.6vw, 22px) !important;
  color: #111827 !important;
}
.mfp-content .tt-newsletter-popup p{
  margin: 0 0 18px !important;
  font-size: 15px !important;
  color: #6b7280 !important;
}

/* форма */
.mfp-content .tt-newsletter-popup form{
  display: flex !important;
  gap: 10px !important;
  margin: 10px 0 18px !important;
  align-items: center !important;
  justify-content: center !important;
}
.mfp-content .tt-newsletter-popup input[type="email"]{
  flex: 1 1 auto !important;
  height: 46px !important;
  padding: 0 14px !important;
  border-radius: 12px !important;
  border: 1px solid #e5e7eb !important;
  background: #fff !important;
  color: #111827 !important;
  outline: none !important;
}
.mfp-content .tt-newsletter-popup input[type="email"]:focus{
  border-color: #c9c2ff !important;
  box-shadow: 0 0 0 3px rgba(107,78,255,.15) !important;
}

/* кнопка */
.mfp-content .tt-newsletter-popup input[type="submit"],
.mfp-content .tt-newsletter-popup .btn,
.mfp-content .tt-newsletter-popup button.subscribe{
  height: 46px !important;
  padding: 0 20px !important;
  border: 0 !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  color: #fff !important;
  background: #6b4eff !important;
  box-shadow: 0 6px 16px rgba(107,78,255,.35) !important;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease !important;
}
.mfp-content .tt-newsletter-popup input[type="submit"]:hover{
  background: #5a3ce0 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 24px rgba(107,78,255,.45) !important;
}

/* крестик — квадрат, центрированный крест */
.mfp-content .mfp-close{
  position: absolute !important;
  top: 12px !important; right: 12px !important;
  width: 34px !important; height: 34px !important;
  border-radius: 10px !important;
  border: 1px solid #e5e7eb !important;
  background: #ffffff !important;
  color: #111827 !important;
  font-size: 18px !important;
  line-height: 32px !important;
  font-weight: 600 !important;
  text-align: center !important;
  opacity: 1 !important;
  box-shadow: none !important;
}
.mfp-content .mfp-close:hover{
  background: #f3f4f6 !important;
}

/* чекбокс "Don't show" — квадратный */
.mfp-content .tt-newsletter-popup .tt-newsletter-popup__show_popup,
.mfp-content .tt-newsletter-popup .tt-newsletter-popup__optin{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-top: 6px !important;
  color: #6b7280 !important;
  font-size: 14px !important;
}
.mfp-content .tt-newsletter-popup input[type="checkbox"]{
  appearance: none !important;
  width: 16px !important;
  height: 16px !important;
  border: 1.5px solid #d1d5db !important;
  border-radius: 4px !important;
  position: relative;
  cursor: pointer;
}
.mfp-content .tt-newsletter-popup input[type="checkbox"]:checked{
  background-color: #6b4eff !important;
  border-color: #6b4eff !important;
}
.mfp-content .tt-newsletter-popup input[type="checkbox"]:checked::after{
  content: "✓";
  position: absolute;
  top: -1px; left: 2px;
  color: white;
  font-size: 12px;
}

/* скрываем иконки соцсетей */
.mfp-content .tt-newsletter-popup__social,
.mfp-content .tt-newsletter-popup_social,
.mfp-content .tt-newsletter-popup .icons{
  display: none !important;
}

/* мобильная адаптация */
@media (max-width: 520px){
  .mfp-content .tt-newsletter-popup form{ flex-direction: column !important; }
  .mfp-content .tt-newsletter-popup input[type="submit"]{ width: 100% !important; }
}

/* ===== JOYDOMO newsletter popup — fix spacing, close, checkbox ===== */

/* фон */
.mfp-bg{ background:rgba(17,24,39,.48)!important; backdrop-filter:blur(4px); }

/* карточка */
.mfp-content .tt-newsletter-popup{
  width:min(520px,92vw)!important;
  margin:0 auto!important;
  background:#fff!important;
  border-radius:24px!important;
  box-shadow:0 18px 40px rgba(2,6,23,.16)!important;
  padding:24px 26px 22px!important;   /* компактнее */
  color:#111827!important;
  text-align:center!important;
  position:relative;
}

/* крупная скидка */
.mfp-content .tt-newsletter-popup::before{
  content:"10% OFF";
  display:block;
  font-weight:800;
  font-size:clamp(30px,5vw,40px);
  color:#6b4eff;
  margin-bottom:6px;                  /* меньше воздуха сверху */
}

/* заголовок/подзаголовок */
.mfp-content .tt-newsletter-popup h2{
  margin:0 0 6px!important;
  font-weight:700!important;
  font-size:clamp(18px,2.5vw,22px)!important;
  color:#111827!important;
}
.mfp-content .tt-newsletter-popup p{
  margin:0 0 14px!important;
  font-size:15px!important;
  color:#6b7280!important;
}

/* форма — строгая высота и выравнивание */
.mfp-content .tt-newsletter-popup form{
  display:flex!important;
  gap:10px!important;
  align-items:center!important;
  justify-content:center!important;
  margin:8px 0 14px!important;
}
.mfp-content .tt-newsletter-popup input[type="email"]{
  flex:1 1 auto!important;
  height:46px!important;
  padding:0 14px!important;
  border:1px solid #e5e7eb!important;
  border-radius:12px!important;
  background:#fff!important;
  color:#111827!important;
  outline:none!important;
}
.mfp-content .tt-newsletter-popup input[type="email"]:focus{
  border-color:#c9c2ff!important;
  box-shadow:0 0 0 3px rgba(107,78,255,.15)!important;
}
.mfp-content .tt-newsletter-popup input[type="submit"],
.mfp-content .tt-newsletter-popup .btn,
.mfp-content .tt-newsletter-popup button.subscribe{
  height:46px!important;
  padding:0 20px!important;
  border:0!important;
  border-radius:12px!important;
  font-weight:600!important;
  color:#fff!important;
  background:#6b4eff!important;
  box-shadow:0 6px 16px rgba(107,78,255,.35)!important;
  transition:transform .18s, box-shadow .18s, background-color .18s!important;
}
.mfp-content .tt-newsletter-popup input[type="submit"]:hover{ background:#5a3ce0!important; transform:translateY(-1px)!important; box-shadow:0 10px 24px rgba(107,78,255,.45)!important; }

/* крестик — КВАДРАТ, без фиолетовой таблетки и с точным позиционированием */
.mfp-content .mfp-close{
  position:absolute!important;
  top:12px!important; right:12px!important;
  width:34px!important; height:34px!important;
  border-radius:8px!important;
  border:1px solid #e5e7eb!important;
  background:#fff!important;
  color:#111827!important;
  line-height:32px!important; text-align:center!important;
  font-size:18px!important; font-weight:700!important;
  opacity:1!important;
  box-shadow:none!important;
  transform:none!important;           /* убираем любые смещения плагина */
}
.mfp-content .mfp-close::before,
.mfp-content .mfp-close::after{ display:none!important; } /* гасим любые псевдо-декоры */
.mfp-content .mfp-close:hover{ background:#f3f4f6!important; }

/* чекбокс — видно и кликается */
.mfp-content .tt-newsletter-popup .tt-newsletter-popup__show_popup,
.mfp-content .tt-newsletter-popup .tt-newsletter-popup__optin{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  margin-top:6px!important;
  color:#6b7280!important;
  font-size:14px!important;
}
.mfp-content .tt-newsletter-popup input[type="checkbox"]{
  display:inline-block!important;        /* принудительно показываем */
  opacity:1!important;
  position:static!important;
  appearance:none!important;
  width:16px!important; height:16px!important;
  border:1.5px solid #d1d5db!important;
  border-radius:4px!important;
  background:#fff!important;
  cursor:pointer!important;
}
.mfp-content .tt-newsletter-popup input[type="checkbox"]:checked{
  background:#6b4eff!important; border-color:#6b4eff!important;
}
.mfp-content .tt-newsletter-popup input[type="checkbox"]:checked::after{
  content:"✓"; position:relative; top:-2px; left:3px; color:#fff; font-size:12px; font-weight:700;
}

/* соц-иконки — скрыть, чтобы не смещали верстку */
.mfp-content .tt-newsletter-popup__social,
.mfp-content .tt-newsletter-popup_social,
.mfp-content .tt-newsletter-popup .icons{ display:none!important; }

/* мобильная адаптация */
@media (max-width:520px){
  .mfp-content .tt-newsletter-popup{ padding:20px 18px 18px!important; }
  .mfp-content .tt-newsletter-popup form{ flex-direction:column!important; }
  .mfp-content .tt-newsletter-popup input[type="submit"]{ width:100%!important; }
}


/* ===== POPUP FINAL PATCH (targeting real button: button.mfp-close.icon-cancel) ===== */

/* карточка компактнее */
.mfp-content .tt-newsletter-popup{
  width:min(520px,92vw) !important;
  padding:18px 20px 16px !important;             /* меньше воздуха */
  border-radius:20px !important;
  text-align:center !important;
}

/* 10% OFF — плотнее к заголовку */
.mfp-content .tt-newsletter-popup::before{
  content:"10% OFF";
  display:block;
  font-weight:800;
  font-size:clamp(28px,4.6vw,36px);
  color:#6b4eff;
  margin:0 0 6px;                                /* сжали отступ */
}

/* заголовок и подзаголовок компактнее */
.mfp-content .tt-newsletter-popup h2{ margin:0 0 6px !important; font-size:clamp(18px,2.5vw,22px) !important; }
.mfp-content .tt-newsletter-popup p{  margin:0 0 10px !important; font-size:15px !important; color:#6b7280 !important; }

/* форма: высоты ровные */
.mfp-content .tt-newsletter-popup form{
  display:flex !important; gap:10px !important; align-items:center !important; justify-content:center !important;
  margin:8px 0 12px !important;
}
.mfp-content .tt-newsletter-popup input[type="email"]{
  flex:1 1 auto !important; height:44px !important; padding:0 14px !important;
  border:1px solid #e5e7eb !important; border-radius:10px !important; background:#fff !important;
}
.mfp-content .tt-newsletter-popup input[type="submit"],
.mfp-content .tt-newsletter-popup .btn,
.mfp-content .tt-newsletter-popup button.subscribe{
  height:44px !important; padding:0 18px !important; border-radius:10px !important;
  border:0 !important; font-weight:600 !important; color:#fff !important; background:#6b4eff !important;
  box-shadow:0 6px 16px rgba(107,78,255,.35) !important;
}

/* ================== КРЕСТИК — точечный таргет ================== */
/* сам button */
.mfp-wrap .mfp-content button.mfp-close.icon-cancel{
  position:absolute !important;
  top:10px !important; right:10px !important;
  width:34px !important; height:34px !important;
  padding:0 !important;
  line-height:32px !important; text-align:center !important;
  border:1px solid #e5e7eb !important;
  border-radius:8px !important;
  background:#ffffff !important;
  color:#111827 !important;
  font-size:18px !important; font-weight:700 !important;
  box-shadow:none !important;
  opacity:1 !important;
  transform:none !important;
  z-index:10 !important;
}
/* гасим любые декоративные круги/псевдоиконки у кнопки */
.mfp-wrap .mfp-content button.mfp-close.icon-cancel::before,
.mfp-wrap .mfp-content button.mfp-close.icon-cancel::after{
  content:none !important; display:none !important;
}
/* иногда тема рисует второй фиолетовый кружок отдельным элементом — убьём его */
.mfp-wrap .mfp-content .mfp-close-btn-in,
.mfp-wrap .mfp-content .mfp-close-circle,
.mfp-wrap .mfp-content .mfp-close-bg{ display:none !important; }

/* ================== ЧЕКБОКС — квадратный и кликаемый ================== */
.mfp-content .tt-newsletter-popup .tt-newsletter-popup__show_popup,
.mfp-content .tt-newsletter-popup .tt-newsletter-popup__optin{
  display:flex !important; align-items:center !important; justify-content:center !important;
  gap:8px !important; margin-top:4px !important; color:#6b7280 !important; font-size:14px !important;
}
.mfp-content .tt-newsletter-popup input[type="checkbox"]{
  appearance:none !important; display:inline-block !important;
  width:16px !important; height:16px !important; margin:0 !important; transform:translateY(1px);
  border:1.5px solid #d1d5db !important; border-radius:4px !important; background:#fff !important; cursor:pointer !important;
}
.mfp-content .tt-newsletter-popup input[type="checkbox"]:checked{
  background:#6b4eff !important; border-color:#6b4eff !important;
}
.mfp-content .tt-newsletter-popup input[type="checkbox"]:checked::after{
  content:"✓"; position:relative; top:-2px; left:3px; color:#fff; font-size:12px; font-weight:700;
}

/* скрыть соц-иконки, чтобы не ломали сетку */
.mfp-content .tt-newsletter-popup__social,
.mfp-content .tt-newsletter-popup_social,
.mfp-content .tt-newsletter-popup .icons{ display:none !important; }

/* мобилка */
@media (max-width:520px){
  .mfp-content .tt-newsletter-popup{ padding:16px 14px 14px !important; }
  .mfp-content .tt-newsletter-popup form{ flex-direction:column !important; }
  .mfp-content .tt-newsletter-popup input[type="submit"]{ width:100% !important; }
}

/* поверх всего */
.mfp-wrap,.mfp-bg{ z-index:99999 !important; }

/* ===== POPUP FINAL PATCH (точечно по button.mfp-close.icon-cancel) ===== */

/* компактная карточка и отступы */
.mfp-content .tt-newsletter-popup{
  width:min(520px,92vw) !important;
  padding:18px 20px 16px !important;      /* меньше воздуха */
  border-radius:20px !important;
  text-align:center !important;
}

/* скидка плотнее */
.mfp-content .tt-newsletter-popup::before{
  content:"10% OFF";
  display:block;
  font-weight:800;
  font-size:clamp(28px,4.6vw,36px);
  color:#6b4eff;
  margin:0 0 6px;
}

/* заголовки компактнее */
.mfp-content .tt-newsletter-popup h2{ margin:0 0 6px !important; font-size:clamp(18px,2.5vw,22px) !important; }
.mfp-content .tt-newsletter-popup p{  margin:0 0 10px !important; font-size:15px !important; color:#6b7280 !important; }

/* форма */
.mfp-content .tt-newsletter-popup form{
  display:flex !important; gap:10px !important; align-items:center !important; justify-content:center !important;
  margin:8px 0 12px !important;
}
.mfp-content .tt-newsletter-popup input[type="email"]{
  flex:1 1 auto !important; height:44px !important; padding:0 14px !important;
  border:1px solid #e5e7eb !important; border-radius:10px !important; background:#fff !important;
}
.mfp-content .tt-newsletter-popup input[type="submit"],
.mfp-content .tt-newsletter-popup .btn,
.mfp-content .tt-newsletter-popup button.subscribe{
  height:44px !important; padding:0 18px !important; border-radius:10px !important; border:0 !important;
  font-weight:600 !important; color:#fff !important; background:#6b4eff !important; box-shadow:0 6px 16px rgba(107,78,255,.35) !important;
}

/* ——— КРЕСТИК: прижимаем к правому верхнему, убираем «таблетку» ——— */
.mfp-wrap .mfp-content button.mfp-close.icon-cancel{
  position:absolute !important;
  top:10px !important; right:10px !important; left:auto !important;        /* на всякий */
  width:34px !important; height:34px !important; padding:0 !important;
  border:1px solid #e5e7eb !important; border-radius:8px !important;
  background:#fff !important; background-image:none !important;
  color:#111827 !important; line-height:32px !important; text-align:center !important;
  font-size:18px !important; font-weight:700 !important; box-shadow:none !important; opacity:1 !important; transform:none !important; z-index:10 !important;
}
/* Глушим псевдоэлементы/декоры, которыми тема рисует «таблетку» */
.mfp-wrap .mfp-content button.mfp-close.icon-cancel::before,
.mfp-wrap .mfp-content button.mfp-close.icon-cancel::after{ content:none !important; display:none !important; }
.mfp-wrap .mfp-content .mfp-close-circle,
.mfp-wrap .mfp-content .mfp-close-bg,
.mfp-wrap .mfp-content .mfp-close-pill{ display:none !important; }

/* ——— ЧЕКБОКС: квадрат, ровно по базовой линии ——— */
.mfp-content .tt-newsletter-popup .tt-newsletter-popup__show_popup,
.mfp-content .tt-newsletter-popup .tt-newsletter-popup__optin{
  display:flex !important; align-items:center !important; justify-content:center !important;
  gap:8px !important; margin-top:4px !important; color:#6b7280 !important; font-size:14px !important;
}
.mfp-content .tt-newsletter-popup input[type="checkbox"]{
  appearance:none !important; display:inline-block !important;
  width:16px !important; height:16px !important; margin:0 !important; transform:translateY(1px);
  border:1.5px solid #d1d5db !important; border-radius:4px !important; background:#fff !important; cursor:pointer !important;
}
.mfp-content .tt-newsletter-popup input[type="checkbox"]:checked{
  background:#6b4eff !important; border-color:#6b4eff !important;
}
.mfp-content .tt-newsletter-popup input[type="checkbox"]:checked::after{
  content:"✓"; position:relative; top:-2px; left:3px; color:#fff; font-size:12px; font-weight:700;
}

/* соц-иконки на всякий скрываем */
.mfp-content .tt-newsletter-popup__social,
.mfp-content .tt-newsletter-popup_social,
.mfp-content .tt-newsletter-popup .icons{ display:none !important; }

/* всегда поверх */
.mfp-wrap, .mfp-bg{ z-index:99999 !important; }

.marquee-container {
  width: 100%;
  overflow: hidden;
  background-color: #fff;  /* или выбери другой цвет */
}

.marquee {
  display: inline-block;
  white-space: nowrap;
  padding-left: 100%;  /* Начинаем с того, чтобы текст был за пределами */
  animation: marquee 10s linear infinite; /* Двигается с постоянной скоростью */
}

@keyframes marquee {
  0% {
    transform: translateX(100%); /* Начало за пределами справа */
  }
  100% {
    transform: translateX(-100%); /* Конец за пределами слева */
  }
}

.marquee-container {
  width: 100%;
  overflow: hidden;
  background-color: #fff; /* Можно изменить на нужный фон */
}

.marquee {
  display: inline-block;
  white-space: nowrap;
  padding-left: 100%; /* Начинаем с того, чтобы текст был за пределами */
  font-size: 24px; /* Размер шрифта, можно настроить */
  font-weight: bold;
  animation: marquee 20s linear infinite; /* Увеличиваем время анимации */
}

@keyframes marquee {
  0% {
    transform: translateX(100%); /* Начало за пределами справа */
  }
  100% {
    transform: translateX(-100%); /* Конец за пределами слева */
  }
}

/* Мобильная адаптация */
@media (max-width: 768px) {
  .marquee {
    font-size: 18px; /* Уменьшаем размер шрифта на мобильных устройствах */
    animation: marquee 15s linear infinite; /* Уменьшаем скорость на мобильных */
  }
}

/* Контейнер для полоски */
.marquee-container {
  width: 100%;
  overflow: hidden;
  background-color: #f3f3f3; /* Мягкий фон, подходящий под стиль */
  padding: 10px 0;  /* Добавим немного отступов сверху и снизу */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Легкая тень для выделения */
}

/* Стиль для текста */
.marquee {
  display: inline-block;
  white-space: nowrap;
  padding-left: 100%; /* Начало за пределами экрана */
  font-size: 24px; /* Размер шрифта */
  font-weight: bold; /* Жирное начертание */
  color: #1a1a1a; /* Темный цвет текста для контраста */
  animation: marquee 20s linear infinite; /* Плавное движение текста */
}

/* Анимация для движения текста */
@keyframes marquee {
  0% {
    transform: translateX(100%); /* Начало справа */
  }
  100% {
    transform: translateX(-100%); /* Конец слева */
  }
}

/* Мобильная адаптация */
@media (max-width: 768px) {
  .marquee {
    font-size: 18px; /* Уменьшаем шрифт на мобильных устройствах */
    animation: marquee 15s linear infinite; /* Ускоряем анимацию на мобильных */
  }
}


/* Контейнер с полосой */
.marquee-container {
  width: 100%;
  overflow: hidden;
  background-color: #fff; /* Фон контейнера */
  padding: 10px 0;  /* Отступы сверху и снизу */
  position: relative; /* Чтобы позиционировать линию внутри */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Тень для выделения */
}

/* Контейнер для текста */
.marquee {
  display: inline-block;
  white-space: nowrap;
  font-size: 24px; /* Размер шрифта */
  font-weight: bold; /* Жирное начертание */
  color: #000; /* Черный текст */
  animation: marquee 30s linear infinite; /* Плавное движение текста */
  position: relative;
}

/* Для повторения текста */
.bestseller-text {
  margin-right: 50px; /* Отступы между повторяющимися блоками */
}

/* Анимация для движения текста */
@keyframes marquee {
  0% {
    transform: translateX(100%); /* Начало справа */
  }
  100% {
    transform: translateX(-100%); /* Конец слева */
  }
}

/* Анимация линии внутри */
.marquee:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px; /* Высота линии */
  background-color: #8a2be2; /* Фиолетовая линия */
  animation: line-animation 2s linear infinite; /* Плавное движение линии */
}

/* Анимация для плавного движения линии */
@keyframes line-animation {
  0% {
    transform: scaleX(0);
  }
  50% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}

/* Мобильная адаптация */
@media (max-width: 768px) {
  .marquee {
    font-size: 18px; /* Уменьшение размера шрифта для мобильных */
    animation: marquee 25s linear infinite;
  }
  .marquee:before {
    height: 2px; /* Меньше линия на мобильных */
  }
}

:root{
  --ticker-gap: 56px;
  --ticker-speed: 16s;
}

/* Контейнер */
.jd-ticker{
  position: relative;
  background:#fff;
  border-radius:12px;
  box-shadow:0 4px 14px rgba(0,0,0,.06);
  overflow:hidden;
}

/* Область прокрутки */
.jd-ticker__viewport{
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 12px 0 18px;
}

/* Дорожка */
.jd-ticker__track{
  display:inline-flex;
  align-items:center;
  gap:var(--ticker-gap);
  white-space:nowrap;
  will-change:transform;
  animation: jd-move var(--ticker-speed) linear infinite;
}

.jd-ticker__item{
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.02em;
  color:#000;
  font-size:clamp(16px,2vw,22px);
}

/* Волна: base64 SVG (фиолетовая #8C4BFF) */
.jd-ticker__wave{
  position:absolute;
  left:0; right:0;
  bottom:6px;
  height:6px;
  pointer-events:none;
  background:
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMjAnIGhlaWdodD0nNicgdmlld0JveD0nMCAwIDEyMCA2Jz48cGF0aCBkPSdNMCwzIFEgMTUsMCAzMCwzIFQgNjAsMyBUIDkwLDMgTCAxMjAsMycgc3Ryb2tlPSIjOEM0QkZGIiBzdHJva2Utd2lkdGg9JzQnIGZpbGw9J25vbmUnIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcvPjwvc3ZnPg==")
    repeat-x 0 0 / 120px 6px;
  animation: jd-wave 2.4s linear infinite;
  filter: drop-shadow(0 1px 0 rgba(140,75,255,.2));
}

/* Разделительная тонкая линия сверху (опц.) */
.jd-ticker::before{
  content:"";
  position:absolute; left:0; right:0; top:0;
  height:1px; background:rgba(0,0,0,.06);
}

/* Анимации */
@keyframes jd-move{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); }
}
@keyframes jd-wave{
  from{ background-position-x: 0; }
  to  { background-position-x: -120px; }
}

/* Мобилка */
@media (max-width:768px){
  .jd-ticker__viewport{ padding:10px 0 14px; }
  .jd-ticker__wave{ height:4px; background-size:120px 4px; bottom:4px; }
  :root{ --ticker-gap: 40px; --ticker-speed: 14s; }
}

/* Контейнер */
.jd-ticker{
  position: relative;
  background:#fff;
  border-radius:12px;
  box-shadow:0 4px 14px rgba(0,0,0,.06);
  overflow:hidden;
}

/* Область прокрутки (с отступами по бокам) */
.jd-ticker__viewport{
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 12px 30px 18px; /* Добавлены отступы с боков (30px) */
}

/* Дорожка */
.jd-ticker__track{
  display:inline-flex;
  align-items:center;
  gap:var(--ticker-gap);
  white-space:nowrap;
  will-change:transform;
  animation: jd-move var(--ticker-speed) linear infinite;
}

.jd-ticker__item{
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.02em;
  color:#000;
  font-size:clamp(16px,2vw,22px);
}

/* Волна: base64 SVG (фиолетовая #8C4BFF) */
.jd-ticker__wave{
  position:absolute;
  left:0; right:0;
  bottom:6px;
  height:6px;
  pointer-events:none;
  background:
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMjAnIGhlaWdodD0nNicgdmlld0JveD0nMCAwIDEyMCA2Jz48cGF0aCBkPSdNMCwzIFEgMTUsMCAzMCwzIFQgNjAsMyBUIDkwLDMgTCAxMjAsMycgc3Ryb2tlPSIjOEM0QkZGIiBzdHJva2Utd2lkdGg9JzQnIGZpbGw9J25vbmUnIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcvPjwvc3ZnPg==")
    repeat-x 0 0 / 120px 6px;
  animation: jd-wave 2.4s linear infinite;
  filter: drop-shadow(0 1px 0 rgba(140,75,255,.2));
}

/* Разделительная тонкая линия сверху (опц.) */
.jd-ticker::before{
  content:"";
  position:absolute; left:0; right:0; top:0;
  height:1px; background:rgba(0,0,0,.06);
}

/* Анимации */
@keyframes jd-move{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); }
}
@keyframes jd-wave{
  from{ background-position-x: 0; }
  to  { background-position-x: -120px; }
}

/* Мобилка */
@media (max-width:768px){
  .jd-ticker__viewport{ padding:10px 30px 14px; }
  .jd-ticker__wave{ height:4px; background-size:120px 4px; bottom:4px; }
  :root{ --ticker-gap: 40px; --ticker-speed: 14s; }
}

/* Контейнер для всего блока, чтобы линия не выходила за пределы карточек */
.jd-ticker {
  position: relative;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  margin-left: 15px;  /* Отступ слева, чтобы линия не выходила за пределы */
  margin-right: 15px; /* Отступ справа */
}

/* Область прокрутки с отступами для карточек */
.jd-ticker__viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 12px 30px 18px; /* Установлены отступы по бокам (30px) */
}

/* Дорожка для текста */
.jd-ticker__track {
  display: inline-flex;
  align-items: center;
  gap: var(--ticker-gap);
  white-space: nowrap;
  will-change: transform;
  animation: jd-move var(--ticker-speed) linear infinite;
}

/* Текст */
.jd-ticker__item {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #000;
  font-size: clamp(16px, 2vw, 22px);
}

/* Волна (фоновая анимация) */
.jd-ticker__wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  height: 6px;
  pointer-events: none;
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMjAnIGhlaWdodD0nNicgdmlld0JveD0nMCAwIDEyMCA2Jz48cGF0aCBkPSdNMCwzIFEgMTUsMCAzMCwzIFQgNjAsMyBUIDkwLDMgTCAxMjAsMycgc3Ryb2tlPSIjOEM0QkZGIiBzdHJva2Utd2lkdGg9JzQnIGZpbGw9J25vbmUnIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcvPjwvc3ZnPg==")
    repeat-x 0 0 / 120px 6px;
  animation: jd-wave 2.4s linear infinite;
  filter: drop-shadow(0 1px 0 rgba(140, 75, 255, 0.2));
}

/* Разделительная линия */
.jd-ticker::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: rgba(0, 0, 0, 0.06);
}

/* Анимация для движения текста */
@keyframes jd-move {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* Анимация для движения волны */
@keyframes jd-wave {
  from {
    background-position-x: 0;
  }
  to {
    background-position-x: -120px;
  }
}

/* Мобилка */
@media (max-width: 768px) {
  .jd-ticker__viewport {
    padding: 10px 30px 14px;
  }
  .jd-ticker__wave {
    height: 4px;
    background-size: 120px 4px;
    bottom: 4px;
  }
  :root {
    --ticker-gap: 40px;
    --ticker-speed: 14s;
  }
}


/* --- ================================== --- */
/* --- BESTSELLER MARQUEE v58 (ФИНАЛ-2) --- */
/* --- Полная ширина + Отступ + Шрифт + Волна --- */
/* --- ================================== --- */

/* Переменные для быстрой подгонки */
:root {
  --ticker-gap: 80px;    /* Расстояние между словами */
  --ticker-speed: 18s;   /* Скорость движения текста */
}

/* 1. Контейнер: Полная ширина + Отступ снизу */
.jd-ticker {
  position: relative;
  background: #fff;
  overflow: hidden;
  
  /* РАСТЯГИВАЕМ НА ВСЮ ШИРИНУ ЭКРАНА */
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  
  /* ДОБАВЛЯЕМ ОТСТУП СНИЗУ */
  margin-bottom: 15px; 
}

/* 2. Область прокрутки (с горизонтальными отступами) */
.jd-ticker__viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* УВЕЛИЧИВАЕМ ВЕРТИКАЛЬНЫЕ ПАДДИНГИ */
  padding: 18px 20px 24px; /* Было: 12px 20px 18px */
}

/* 3. Дорожка для текста */
.jd-ticker__track {
  display: inline-flex;
  align-items: center;
  gap: var(--ticker-gap);
  white-space: nowrap;
  will-change: transform;
  animation: jd-move var(--ticker-speed) linear infinite;
}

/* 4. Текст ("Силовой" Уменьшенный размер) */
.jd-ticker__item {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #000;
  /* УВЕЛИЧИВАЕМ РАЗМЕР ШРИФТА (ближе к референсу) */
  font-size: clamp(24px, 3vw, 31px) !important; /* Было: clamp(14px, 1.6vw, 18px) */
  white-space: nowrap;
}

/* 5. Волна (ВОЗВРАЩАЕМ!) */
.jd-ticker__wave {
  position: absolute;
  left: 0; /* Растягиваем на всю ширину */
  right: 0;
  bottom: 6px; /* Позиционируем снизу */
  height: 6px;
  pointer-events: none;
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMjAnIGhlaWdodD0nNicgdmlld0JveD0nMCAwIDEyMCA2Jz48cGF0aCBkPSdNMCwzIFEgMTUsMCAzMCwzIFQgNjAsMyBUIDkwLDMgTCAxMjAsMycgc3Ryb2tlPSIjOEM0QkZGIiBzdHJva2Utd2lkdGg9JzQnIGZpbGw9J25vbmUnIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcvPjwvc3ZnPg==")
    repeat-x 0 0 / 120px 6px;
  animation: jd-wave 2.4s linear infinite;
  filter: drop-shadow(0 1px 0 rgba(140, 75, 255, 0.2));
}

/* 6. Разделительная линия (УДАЛЯЕМ) */
.jd-ticker::before {
  display: none; /* Убираем статическую линию */
}

/* Анимация для движения текста */
@keyframes jd-move {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Анимация для волны */
@keyframes jd-wave {
  from { background-position-x: 0; }
  to { background-position-x: -120px; }
}

/* 7. Мобильная адаптация */
@media (max-width: 768px) {
  :root {
    --ticker-gap: 60px;
    --ticker-speed: 14s;
  }

  .jd-ticker__viewport {
    padding: 14px 20px 18px; 
  }

  /* Уменьшенный шрифт для мобильных (с !important) */
  .jd-ticker__item {
    font-size: clamp(19px, 3.4vw, 26px) !important; 
  }
  
  /* Уменьшаем волну на мобилке */
  .jd-ticker__wave {
    height: 4px;
    background-size: 120px 4px;
    bottom: 4px;
  }
}

/* --- ================================== --- */
/* --- ПОЛНЫЙ CSS для хедера "JD Header"  --- */
/* --- Версия 7.1 (Фикс: Широкий контейнер) --- */
/* --- ================================== --- */

/* --- 1. База хедера --- */
body > header.jd-header {
  padding: 12px 0;
  background-color: #fff;
  border-bottom: 1px solid #f0f0f0;
  position: sticky !important;
  top: var(--jd-announcement-bar-height, 0px) !important; 
  z-index: 100;
  transition: transform 0.3s ease-in-out !important;
}

body > header.jd-header.jd-header--hidden {
  /* "Уезжает" вверх на свою высоту */
  transform: translateY(-100%) !important; 
}
.jd-header__container {
  /* !!! === КЛЮЧЕВОЙ ФИКС === !!! */
  /* Увеличиваем ширину, чтобы "прижать" к краям */
  width: 95%; /* Было 90% */
  max-width: 1800px; /* Было 1400px */
  margin: 0 auto;
}

/* --- 2. Иконки (Общее) --- */
.jd-header__icon {
  display: block;
  width: 28px;
  height: 28px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  color: #333;
  transition: transform 0.2s ease-out;
}
.jd-header__icon:hover {
  color: #000;
  transform: scale(1.15); /* Иконка "подрастет" на 15% */
}

/* --- 3. DESKTOP Хедер (Скрыт по умолчанию) --- */
.jd-header__desktop {
  display: none;
}

/* --- 4. MOBILE Хедер (Виден по умолчанию) --- */
.jd-header__mobile {
  display: flex; 
  justify-content: space-between;
  align-items: center;
}
.jd-header__mobile-left,
.jd-header__mobile-right {
  flex: 1 1 0%;
}
.jd-header__mobile-center {
  flex: 0 0 auto;
  text-align: center;
}
.jd-header__mobile-left {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.jd-header__mobile-right .jd-header__icon {
  margin-left: 15px;
}
.jd-header__mobile-right {
  display: flex;
  justify-content: flex-end;
}
.jd-header__mobile-logo img {
  max-height: 48px;
  width: auto;
  max-width: 120px;
}
    
/* --- 5. MOBILE: Бургер-кнопка --- */
.jd-header__burger-btn {
  width: 28px;
  height: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  cursor: pointer;
  padding: 4px;
  box-sizing: border-box;
}
.jd-header__burger-btn span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: #333;
  transition: all 0.3s ease;
}
body.mobile-nav-open .jd-header__burger-btn span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
body.mobile-nav-open .jd-header__burger-btn span:nth-child(2) {
  opacity: 0;
}
body.mobile-nav-open .jd-header__burger-btn span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* --- 6. MOBILE: Панель навигации (меню) --- */
.jd-header__nav-mobile {
  position: fixed;
  top: 0;
  left: 0;
  width: 300px;
  max-width: 80%;
  height: 100vh;
  background-color: #fff;
  z-index: 1000;
  padding: 80px 30px 30px;
  border-right: 1px solid #f0f0f0;
  transform: translateX(-100%);
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  overflow-y: auto;
}
body.mobile-nav-open .jd-header__nav-mobile {
  transform: translateX(0);
  box-shadow: 5px 0 25px rgba(0,0,0,0.1);
}
.jd-header__overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.4);
  z-index: 999;
}
body.mobile-nav-open .jd-header__overlay {
  display: block;
}
.jd-header__nav-mobile ul {
  list-style: none; margin: 0; padding: 0;
}
.jd-header__nav-mobile li {
  margin-bottom: 10px;
}
.jd-header__nav-mobile a {
  display: block; text-decoration: none; color: #333;
  font-size: 1.5rem; font-weight: 600; padding: 10px 0;
}

/* --- ========================================= --- */
/* --- 7. АДАПТИВНОСТЬ (Breakpoint > 990px)    --- */
/* --- ========================================= --- */
@media (min-width: 991px) {
  
  /* ...и скрываем все мобильное */
  .jd-header__mobile,
  .jd-header__nav-mobile,
  .jd-header__overlay {
    display: none !important;
  }
  
  /* --- Стили для "Плоского" DESKTOP хедера --- */
  
  .jd-header__desktop {
    display: flex;
    align-items: center;
  }
  
  /* [Лого (Слева)] */
  .jd-header__desktop-logo {
    flex-shrink: 0; /* Не сжиматься */
  }
  .jd-header__desktop-logo img {
    max-height: 60px; 
    width: auto; 
    max-width: 150px;
  }
  
  /* [Навигация] */
  .jd-header__desktop-nav {
    margin-left: 40px; 
  }
  
  .jd-header__desktop-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
  }
  .jd-header__desktop-nav li {
    margin: 0 15px;
  }
  .jd-header__desktop-nav a {
    text-decoration: none;
    color: #333;
    font-weight: 700;
    font-size: 15px;
    text-transform: capitalize;
    position: relative;
    padding: 6px 0;
  }
  /* Hover-эффект */
  .jd-header__desktop-nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #333;
    transform: scaleX(0);
    transition: transform 0.3s ease;
  }
  .jd-header__desktop-nav a:hover::after {
    transform: scaleX(1);
  }
  
  /* [Иконки (Справа)] */
  .jd-header__desktop-icons {
    margin-left: auto; 
    display: flex;
    align-items: center;
  }
  .jd-header__desktop-icons .jd-header__icon {
    margin-left: 20px;
  }
}

/* --- ================================== --- */
/* --- ФИКС v11: "Силовой" фикс Sticky-скролла --- */
/* --- ================================== --- */

/* 1. Заставляем родительские элементы "выпустить" наш хедер */
/* MOGO "убивает" sticky с помощью overflow: hidden */
html,
body {
  overflow-x: visible !important;
  overflow-y: visible !important;
}

/* MOGO использует эти "обертки" */
.tt-layout, 
.tt-content, 
.tt-layout-page {
   overflow: visible !important;
}

/* 2. Повторно "силой" включаем sticky для нашего хедера */
/* (Этот код у вас уже есть, но мы его "усиливаем") */
.jd-header {
  position: -webkit-sticky !important; /* Для Safari */
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
}

/* --- ================================== --- */
/* --- ФИКС v14: Выравнивание страницы Shop (по коду) --- */
/* --- ================================== --- */

/* 1. "Поднимаем" контент, убирая "дыру" от "телепорта" */
.main-content,
.tt-content {
  padding-top: 0px !important;
}

/* 2. Выравниваем "Shop Grid" (класс .shop-container)
   Он должен совпадать с шириной хедера (v7.1) */
.shop-container {
  width: 95% !important;
  max-width: 1800px !important;
  margin: 0 auto !important;
}

/* 3. Выравниваем "Shop Tiles" (у которого inline-style)
   Этот "хак" находит секцию с max-width: 1200px
   и "силой" применяет к ней ширину хедера. */
section[style*="max-width:1200px"] {
  max-width: 1800px !important; /* Должен быть равен .jd-header__container */
  width: 95% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* --- ================================== --- */
/* --- ФИКС v15: "Силовое" обнуление отступа --- */
/* --- ================================== --- */

/* "Убиваем" и padding, и margin, 
   которые MOGO JS добавляет к "обертке" сайта */
.main-content,
.tt-content,
main {
  padding-top: 0px !important; 
  margin-top: 0px !important;
}

/* --- ================================== --- */
/* --- ФИКС v16: "Снайперский" фикс отступа --- */
/* --- ================================== --- */

/* "Убиваем" отступ, который MOGO JS вешает 
   на ПЕРВУЮ секцию Shopify внутри <main> */
main .shopify-section:first-child {
   margin-top: 0px !important;
   padding-top: 0px !important; /* На всякий случай, "убиваем" и padding */
}

/* --- ================================== --- */
/* --- ФИКС v17: "Силовой" фикс MOGO-оберток --- */
/* --- ================================== --- */

/* "Убиваем" отступ, который MOGO JS вешает
   на свои "обертки" ВНУТРИ <main> */

main > .tt-layout,
main > .tt-layout.tt-sticky-block__parent,
.tt-layout__content {
   margin-top: 0px !important;
   padding-top: 0px !important;
}

/* --- ================================== --- */
/* --- ФИКС v22: "Убиваем" *внутренний* отступ секции --- */
/* --- ================================== --- */

/* Мы "убили" внешний margin (v21),
   теперь "убиваем" внутренний padding (v22) */

/* Находим ПЕРВУЮ секцию И "силой" обнуляем 
   ее ВНУТРЕННИЙ padding-top */
main .shopify-section:first-child > section {
   padding-top: 0px !important;
}

/* --- ================================== --- */
/* --- ФИКС v23: "Убиваем" *внутренний* padding --- */
/* --- ================================== --- */

/* "Убиваем" внутренний padding-top (24px) 
   у секции "Плитки" (shop-tiles),
   сохраняя боковые (24px) и нижний (24px) отступы. */

#shopify-section-shop-tiles > section.mx-auto {
   padding: 0px 24px 24px 24px !important;
}

/* "На всякий случай" - обнуляем отступы
   и для секции "Сетка" (shop-grid), если она окажется первой */
#shopify-section-shop-grid > section.shop-container {
   padding-top: 0px !important;
}

/* --- ================================== --- */
/* --- ФИКС v27: Отменяем скрытие страницы (FOUC Fix) --- */
/* --- ================================== --- */

/* MOGO использует класс, который скрывает всю страницу,
   чтобы избежать "мигания" (FOUC). Мы "силой" отменяем это. */

.tt-layout.tt-sticky-block__parent,
.tt-layout {
  visibility: visible !important;
  opacity: 1 !important;
}

/* --- ================================== --- */
/* --- ФИКС v24: ЧИНИМ КЛИКАБЕЛЬНОСТЬ БУРГЕРА --- */
/* --- ================================== --- */

/* Делаем левый блок МОБИЛЬНОГО хедера кликабельным 
   на всю высоту, чтобы избежать перекрытия */
.jd-header__mobile-left {
    z-index: 150 !important; /* Убеждаемся, что он поверх всего */
    cursor: pointer !important;
    /* Убеждаемся, что область клика широкая */
    min-width: 50px !important; 
}

/* Делаем саму кнопку бургера более надежной */
.jd-header__burger-btn {
    pointer-events: auto !important;
    z-index: 160 !important;
}

/* --- ================================== --- */
/* --- ФИКС v27: Отменяем скрытие страницы (FOUC Fix) --- */
/* --- ================================== --- */

/* "Силой" отменяем скрытие страницы (visibility: hidden),
   которое MOGO добавляет при переключении страниц. */
.tt-layout.tt-sticky-block__parent,
.tt-layout,
.tt-content {
  visibility: visible !important;
  opacity: 1 !important;
}

/* Дополнительно: Скрываем сам контейнер предзагрузчика MOGO */
.tt-preloader {
  display: none !important;
  z-index: -1 !important;
}


/* --- ================================== --- */
/* --- ФИКС v29: Фикс растянутого изображения на iOS --- */
/* --- (Применяем Aspect Ratio к About Us) --- */
/* --- ================================== --- */

/* Целимся в контейнер изображения на мобильных устройствах 
   (предположительный класс about-hero-image) */
@media (max-width: 990px) {
    .about-hero-image {
        /* Задаем фиксированное соотношение сторон 4:3 
           (Высота 75% от ширины) */
        aspect-ratio: 4 / 3 !important;
        
        /* Убеждаемся, что изображение внутри заполняет контейнер */
        object-fit: cover !important; 
    }
    
    /* Если контейнер не называется .about-hero-image,
       используйте селектор, который мы видим на скриншоте Liquid (например, .proc-card) */
    .jd-about-us-joydomo .proc-card {
        aspect-ratio: 4 / 3 !important;
    }

    /* Целимся в само изображение, чтобы оно не растягивалось, 
       если оно не заполнено: */
    .jd-about-us-joydomo .proc-card img {
        object-fit: cover !important;
        width: 100% !important;
        height: 100% !important;
    }
}


/* Мобильные отступы для блока shop-header и shop-panel */
@media (max-width: 768px) {
  .shop-header {
    padding: 0 !important;
    margin: 0 !important;
  }

  .shop-panel {
    padding: 0 !important;
    margin: 0 !important;
  }

  .shop-header-text-block,
  .shop-grid,
  .shop-panel > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Если контейнеры внутри .container или .tt-layout добавляют отступы */
  .tt-layout_content,
  .container,
  .shopify-section {
    padding: 0 !important;
    margin: 0 !important;
  }
}

@media (max-width: 768px) {
  /* === Убираем отступ между заголовком и блоком фильтров === */
  .shop-header {
    margin: 0 !important;
    padding: 0 !important;
  }

  .shop-header-text-block {
    margin-bottom: 0 !important; /* убираем лишний промежуток */
  }

  /* === Выравниваем панель фильтров по ширине и по центру контента === */
  .shop-panel {
    margin: 0 auto !important;
    padding: 0 !important;
    max-width: 340px;              /* ограничиваем ширину под текст */
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;                     /* равномерное расстояние между полями */
    align-items: stretch;
  }

  /* === Поля поиска и фильтры без лишних отступов === */
  .shop-panel > * {
    margin: 0 !important;
  }

  .shop-input,
  .shop-range,
  .sort-ctrl {
    width: 100% !important;
  }

  /* === Добавляем аккуратный отступ между блоком сортировки и карточками === */
  .shop-grid {
    margin-top: 16px !important;
  }

  /* === Корректируем внешний вид блока Sort By === */
  details.sort-ctrl summary {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 10px 12px;
    background: #fff;
    font-weight: 500;
  }
}

@media (max-width: 768px) {
  /* 1) Убираем лишний отступ над Search catalog */
  .shop-header-text-block {
    margin-bottom: 6px !important;        /* был большой — делаем минимальный */
    padding-bottom: 0 !important;
  }
  /* если у панели есть свой верхний margin — обнуляем */
  .shop-panel {
    margin-top: 0 !important;
  }

  /* 2) Панель фильтров строго под левый край текста (НЕ по центру) */
  .shop-panel {
    /* убираем центровку из предыдущего правила */
    margin-left: 0 !important;
    margin-right: auto !important;

    /* контролируем ширину, чтобы форма не расползалась */
    max-width: 340px;          /* при необходимости подгони 320–360px */
    width: 100%;

    /* компактные интервалы внутри панели */
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
  }

  /* поля во всю доступную ширину панели */
  .shop-input,
  .shop-range,
  details.sort-ctrl {
    width: 100% !important;
    margin: 0 !important;
  }

  /* аккуратный отступ между Sort by и карточками товаров */
  .shop-grid {
    margin-top: 16px !important;
  }
}

@media (max-width: 768px) {
  .shop-panel { margin: 0 0 0 0 !important; } /* полностью сбросить авто-центровку */
}

/* MOBILE — фиксы отступа и выравнивания */
@media (max-width: 768px) {
  /* 1) .shop-header не флексом — тогда панель станет ровно под текст и по левому краю */
  .shop-header {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 2) Убираем зазор над Search catalog и даём минимальный (6px) */
  .shop-header-text-block {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  .shop-header-text-block + .shop-panel {
    margin-top: 6px !important;   /* минимальный отступ между текстом и панелью */
  }

  /* 3) Гасим любые ранее заданные margin/padding панели (включая те самые 34px) */
  .shopify-section .shop-container .shop-header .shop-panel,
  .shop-container .shop-header .shop-panel,
  .shop-header .shop-panel,
  .shop-panel {
    margin-top: 0 !important;     /* перекрывает старые 34px */
    padding-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 340px;             /* ширина панели = ширине текстовой колонки */
    width: 100%;
  }

  /* 4) Внутри панели — ровный вертикальный ритм */
  .shop-panel {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    align-items: stretch !important;
  }
  .shop-panel > * { margin: 0 !important; }

  /* 5) «Sort by» — аккуратный зазор до сетки карточек */
  .shop-grid { margin-top: 16px !important; }

  /* 6) Поля на всю ширину панели */
  .shop-input,
  .shop-range,
  details.sort-ctrl { width: 100% !important; }
}


/* --- PRODUCT DESCRIPTION ACCORDION (JOYDOMO STYLE) --- */

/* Контейнер */
.ProductDesc {
  position: relative;
  padding-bottom: 2.6rem; /* место под кнопку */
}

/* Состояние "сжато" — показываем только 3 строки */
.ProductDesc[data-clamped="true"] .ProductDesc__content {
  display: -webkit-box;
  -webkit-line-clamp: 3;           /* ← можно поменять на 2, если нужно */
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 6.2em;
  transition: max-height .3s ease;
  position: relative;
}

/* Градиент внизу (эффект плавного обреза текста) */
.ProductDesc[data-clamped="true"] .ProductDesc__content::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2.2rem;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
  pointer-events: none;
}

/* Состояние "раскрыто" — показываем весь текст */
.ProductDesc[data-clamped="false"] .ProductDesc__content {
  -webkit-line-clamp: unset;
  max-height: none;
}
.ProductDesc[data-clamped="false"] .ProductDesc__content::after {
  display: none;
}

/* --- КНОПКА Read more / Collapse (Joydomo style) --- */
.ProductDesc__toggle {
  display: inline-block;
  margin-top: .75rem;
  padding: .55rem 1.2rem;
  border-radius: 8px;
  border: 1px solid #7C3AED;         /* фиолетовая рамка */
  background: #7C3AED;               /* фиолетовый фон */
  color: #fff;                       /* белый текст */
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 3px 6px rgba(124,58,237,0.25); /* лёгкая тень под цвет */
}

/* Hover */
.ProductDesc__toggle:hover {
  background: #fff;
  color: #7C3AED;
  border-color: #7C3AED;
  box-shadow: 0 4px 10px rgba(124,58,237,0.35);
}

/* Focus (для клавиатуры/тача) */
.ProductDesc__toggle:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(124,58,237,0.4);
}

/* Контейнеры-колонки внутри описания */
.ProductDesc__content .desc-columns{
  display: grid;
  gap: 24px;
}
@media (min-width: 980px){
  .ProductDesc__content .desc-columns{ grid-template-columns: 1fr 1fr; }
}

/* Заголовки и базовая типографика */
.ProductDesc__content h3{ margin: 0.5rem 0 0.5rem; font-size: 1.05rem; }
.ProductDesc__content p{ margin: 0.5rem 0 0.75rem; line-height: 1.6; }

/* Маркированные списки */
.ProductDesc__content ul{ margin: 0.25rem 0 1rem 1.25rem; }
.ProductDesc__content li{ margin: 0.25rem 0; }

/* Спецификации в виде таблицы без таблицы */
.ProductDesc__content .specs{
  display: grid; gap: 8px; margin: 0.5rem 0 1rem;
  grid-template-columns: 180px 1fr;
}
@media (max-width: 520px){ .ProductDesc__content .specs{ grid-template-columns: 1fr; } }
.ProductDesc__content .specs dt{
  font-weight: 600; color: #111; opacity: .9;
}
.ProductDesc__content .specs dd{
  margin: 0; color: #444;
}

/* Callout (подсказка/примечание) */
.ProductDesc__content .note{
  margin: 1rem 0; padding: .75rem .9rem;
  border-left: 4px solid #7C3AED; background: #F7F5FF;
  border-radius: 6px;
}

/* Единый цвет текста внутри описания */
.ProductDesc__content,
.ProductDesc__content p,
.ProductDesc__content li,
.ProductDesc__content dd,
.ProductDesc__content dt,
.ProductDesc__content strong,
.ProductDesc__content em {
  color: #111;            /* единый тёмный цвет */
}

/* Заголовки и подписи спецификаций */
.ProductDesc__content h3 { color: #111; }
.ProductDesc__content .specs dt { color: #111; opacity: 1; }

/* Текст в примечании (фон оставляем фирменный) */
.ProductDesc__content .note { color: #111; }

/* Более выразительные заголовки внутри описания товара */
.ProductDesc__content h3 {
  font-size: 1.2rem;       /* увеличиваем размер шрифта */
  font-weight: 700;        /* делаем жирнее */
  color: #111;             /* тёмный, чтобы контрастировал */
  margin-top: 1rem;
  margin-bottom: 0.75rem;
}

/* Дополнительно: немного расстояния между колонками */
.ProductDesc__content .desc-columns {
  gap: 32px;
}

/* Заголовки секций с иконками (например 🌿 или 📦) */
.ProductDesc__content h3::first-letter {
  font-size: 1.3rem;       /* чуть крупнее сам символ/иконка */
}

/* --- Mobile spacing fix for product page --- */
@media (max-width: 768px) {
  /* Отступы по бокам для описания */
  .ProductDesc__content {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Чтобы заголовки и кнопки тоже не прилипали */
  .ProductDesc,
  .ProductDesc__toggle {
    margin-left: 12px;
    margin-right: 12px;
  }

  /* Если у тебя описание идёт сразу после цены — даём общий отступ */
  .tt-product-head_info,
  .tt-product-head_name,
  .tt-product-head_price {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* --- MOBILE SIDE PADDING FOR PRODUCT PAGE (≤768px) --- */
@media (max-width: 768px) {

  /* ключевые секции хедера продукта */
  .tt-product-head__availability,
  .tt-product-head__name,
  .tt-product-head__price,
  .ProductDesc,
  .tt-product-head__options,
  .tt-product-head__control {
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }

  /* само текстовое описание + кнопка */
  .ProductDesc__content { padding-left: 0; padding-right: 0; } /* уже внутри .ProductDesc */
  .ProductDesc__toggle { margin-left: 0; margin-right: 0; }

  /* блок опций (цвет, склад и т.п.) */
  .prdbut_options.prdbut_options--page,
  .prdbut__title,
  .prdbut__option {
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }

  /* крошки/виджеты (на всякий случай) */
  .tt-product-page_breadcrumbs,
  .yotpo-widget-instance {
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }
}

/* --- MOBILE: unify side paddings in the right column --- */
@media (max-width: 768px) {

  /* даём отступы всем прямым детям правой колонки */
  .tt-product-head__info > * {
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }

  /* заголовок и цена иногда завернуты глубже — продублируем */
  .tt-product-head__name,
  .tt-product-head__price,
  .tt-product-head__availability {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* сам бейдж "In Stock" — делаем блочным и выравниваем по сетке */
  .tt-product-head__availability span {
    display: inline-block;
  }

  /* описание: внешнему блоку — отступы, внутри — без доп. паддингов */
  .ProductDesc { padding-left: 16px; padding-right: 16px; }
  .ProductDesc__content { padding-left: 0; padding-right: 0; }
  .ProductDesc__toggle { margin-left: 0; margin-right: 0; }

  /* блок опций */
  .prdbut_options.prdbut_options--page,
  .prdbut__title,
  .prdbut__option {
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }

  /* на всякий: хлебные крошки + виджеты */
  .tt-product-page_breadcrumbs,
  .yotpo-widget-instance {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* --- MOBILE: fix paddings for Availability / Title / Price --- */
@media (max-width: 768px) {

  /* сам контейнер "шапки" правой колонки */
  .tt-product-head__info-head {
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box;
  }

  /* на случай, если тема сбрасывает паддинги у внутренних блоков */
  .tt-product-head__info-head .tt-product-head__availability,
  .tt-product-head__info-head .tt-product-head__name,
  .tt-product-head__info-head .tt-product-head__price {
    padding-left: 0 !important;   /* паддинги уже на родителе */
    padding-right: 0 !important;
    margin-left: 0 !important;    /* убираем возможные отрицательные маргины темы */
    margin-right: 0 !important;
    box-sizing: border-box;
    width: 100%;
  }

  /* чтобы сам текст заголовка не упирался */
  .tt-product-head__info-head .tt-product-head__name h1 {
    margin-left: 0;
    margin-right: 0;
  }

  /* цена: иногда внутри только span.tt-price — добавим внутренний отступ визуально */
  .tt-product-head__info-head .tt-product-head__price .tt-price {
    display: inline-block;
    padding-left: 0;
    padding-right: 0;
  }
}

/* === MOBILE: убрать большой зазор перед отзывами, выключить sticky и скрыть "share" пустышки === */
@media (max-width: 768px) {

  /* sticky-контейнер и плейсхолдеры — выключаем и сбрасываем высоты */
  .tt-product-head_sticky,
  .tt-product-head_sticky-block {
    position: static !important;
    top: auto !important;
    transform: none !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* родитель правой колонки */
  .tt-product-head__sticky-block__parent,
  .tt-product-head__sticky-block__parent.prdbut__product.prdbut__product--page {
    height: auto !important;
    min-height: 0 !important;
    margin-bottom: 12px !important;   /* поставь 0, если нужно вплотную */
    padding-bottom: 0 !important;
  }

  /* внутренние иннер-обёртки sticky */
  .tt-sticky-block__inner,
  .tt-sticky-block_inner {
    position: static !important;
    transform: none !important;
  }

  /* скрываем пустой share-блок и возможный <object> */
  .tt-product-head__sticky-block__parent > .addthis_toolbox,
  .tt-product-head__sticky-block__parent > object[type="text/html"],
  .tt-product-head__sticky-block__parent .addthis_toolbox,
  .tt-product-head__sticky-block__parent .addthis_toolbox *,
  .tt-product-head__sticky-block__parent object[type="text/html"] {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  /* на некоторых темах рисуются разделители before/after — убираем */
  .tt-product-head__sticky-block__parent::before,
  .tt-product-head__sticky-block__parent::after {
    content: none !important;
    display: none !important;
    height: 0 !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* контролируемый небольшой отступ перед отзывами */
  .yotpo-widget-instance {
    margin-top: 8px !important;
  }
}

/* --- ================================== --- */
/* --- Стили для звезд Yotpo на карточках --- */
/* --- ================================== --- */

/* 1. Делаем звезды желтыми */
.pcard-rating .yotpo-icon-star {
  color: #facc15 !important; /* Наш фирменный желтый цвет (как у Yotpo) */
  font-size: 16px; /* Чуть-чуть увеличим, если нужно */
}

/* 2. Прячем текст "X Review(s)" */
.pcard-rating .yotpo .reviews-text,
.pcard-rating .yotpo .text-m {
  display: none !important;
}

/* 3. (На всякий случай) Убираем скобки, если они есть */
.pcard-rating .yotpo .yotpo-reviews-link::before,
.pcard-rating .yotpo .yotpo-reviews-link::after {
  display: none !important;
}

/* --- ================================== --- */
/* --- Выравнивание карточек (v3 - Финал) --- */
/* --- ================================== --- */

/* 1. Делаем ВСЮ карточку flex-колонкой, 
      чтобы все карточки были одной высоты. */
.pcard {
  display: flex;
  flex-direction: column;
  height: 100%; 
}

/* 2. "Тело" карточки "растет", чтобы занять 
      все место, оставшееся ПОСЛЕ картинки. */
.pcard-body {
  flex-grow: 1; /* <-- "съест" все свободное место */
  display: flex;
  flex-direction: column; 
}

/* 3. [НОВЫЙ ФИКС] Задаем заголовку мин. высоту 
      (примерно 2 строки), чтобы цены не "прыгали". */
.pcard-title {
  /* Можете поменять 2.6em на 2.8em или 40px, 
     если 2 строки не поместятся. */
  min-height: 2.6em; 
}

/* 4. Блок рейтинга должен иметь мин. высоту,
      чтобы цены не "прыгали" из-за отсутствия звезд. */
.pcard-rating {
  min-height: 22px; /* ~Высота одной строки звезд */
}

/* 5. "Прибиваем" блок с кнопками к самому низу. */
.pcard-cta {
  margin-top: auto;
}


/* --- ================================== --- */
/* --- Фикс ширины Newsletter в футере --- */
/* --- ================================== --- */

/* Этот код нацелен на .jd-wrap (внутренний контейнер)
  ТОЛЬКО в том случае, если он находится
  внутри секции .jd-newsletter, которая, в свою очередь,
  находится внутри <footer>.
  
  Это не затронет ваш newsletter на главной странице.
*/
footer .jd-newsletter .jd-wrap {
  /* ВАЖНО: Поставьте здесь ту же ширину, 
    что и у основного контейнера вашего сайта.
    (1200px, 1300px, 1340px, 1440px...)
  */
  max-width: 1300px;  
  
  margin-left: auto;  /* Центрирование */
  margin-right: auto; /* Центрирование */
  
  /* Стандартные отступы по бокам */
  padding-left: 24px;  
  padding-right: 24px;
  
  width: 100%;
  box-sizing: border-box;
}

.pcard-cta {
  display: flex;       /* Располагаем форму и ссылку "Learn more" в ряд */
  align-items: center; /* Выравниваем их по центру */
  gap: 12px;           /* Пробел между кнопками */
}

/* Убираем лишние отступы у новой формы */
.pcard-form {
  margin: 0;
}

/* --- ================================== --- */
/* --- Cчетчик товаров ("пузырь") в хедере --- */
/* --- ================================== --- */

/* 1. Делаем иконку "контейнером" для позиционирования */
.jd-header__icon[href*="/cart"] {
  position: relative;
  display: inline-flex; /* Используем flex для центровки */
  align-items: center;
  justify-content: center;
}

/* 2. Стилизуем сам "пузырь" */
.cart-count-bubble {
  position: absolute;
  top: -5px;     /* Сдвиг вверх */
  right: -8px;   /* Сдвиг вправо */
  
  /* Вы можете поменять #ff0000 (красный) на свой фиолетовый */
  background-color: #7c3aed; 
  color: white;
  
  font-size: 11px;
  font-weight: bold;
  font-family: Arial, sans-serif;
  
  /* Круглая форма */
  min-width: 18px;
  height: 18px;
  line-height: 18px; /* Выравниваем цифру по центру */
  padding: 0 3px; 
  border-radius: 10px;
  text-align: center;
  box-sizing: border-box;
  
  display: block;
  transition: transform 0.2s ease;
}

/* 3. Прячем "пузырь", если он пустой ИЛИ содержит "0" */
.cart-count-bubble:empty,
.cart-count-bubble[data-count="0"] {
  display: none;
}

#footer-links {
  border-top: none !important;
}
.jd-newsletter {
  border-bottom: none !important;
}

/* --- ================================== --- */
/* --- Фикс Newsletter на мобильных --- */
/* --- ================================== --- */

/* Применяем на мобильных (например, до 767px) */
@media (max-width: 767px) {

  /* Находим обертку .jd-input 
     внутри секции newsletter */
  .jd-newsletter .jd-input {
    display: flex; /* Убедимся, что это flex */
    flex-direction: column; /* Ставим в столбик */
    gap: 10px; /* Отступ между полем и кнопкой */
  }

  /* Поле email и кнопка теперь 
     должны быть на 100% ширины */
  .jd-newsletter .jd-email,
  .jd-newsletter .jd-btn {
    width: 100%;
    margin: 0; /* Сбрасываем лишние отступы */
  }
}

/* --- ================================== --- */
/* --- Стили для сетки "You may also like" --- */
/* --- ================================== --- */

.jd-recommendations-wrapper .shop-grid {
  display: grid;
  gap: 20px; /* Отступ между карточками */
  
  /* 4 колонки на десктопе */
  grid-template-columns: repeat(4, 1fr); 
}

/* 2 колонки на мобильных */
@media (max-width: 768px) {
  .jd-recommendations-wrapper .shop-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

/* --- ================================== --- */
/* --- Мобильная адаптация: You may also like (ОБЪЕДИНЕНО v11) --- */
/* --- ================================== --- */

@media (max-width: 768px) { 
  
  /* --- Стили для заголовка и отступов --- */
  .jd-recommendations-wrapper h2 {
    font-size: 24px !important; 
    margin-top: 30px !important; 
    margin-bottom: 20px !important; 
  }

  .jd-recommendations-wrapper {
    margin-bottom: 30px !important; 
    padding: 0 16px !important; 
  }

  /* --- АГРЕССИВНОЕ ВЫРАВНИВАНИЕ КАРТОЧЕК ВНУТРИ ЭТОГО БЛОКА --- */
  
  /* 1. Карточка - flex-колонка */
  .jd-recommendations-wrapper .pcard {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
  }

  /* 2. "Тело" карточки "растет" */
  .jd-recommendations-wrapper .pcard-body {
    flex-grow: 1 !important; 
    display: flex !important;
    flex-direction: column !important;
  }

  /* 3. [ФИКС] Задаем заголовку МИН. ВЫСОТУ (100px — для выравнивания) */
  .jd-recommendations-wrapper .pcard-title {
    min-height: 100px !important; 
  }

  /* 4. Задаем блоку звезд мин. высоту */
  .jd-recommendations-wrapper .pcard-rating {
    min-height: 22px !important; 
  }
  
  /* 5. "Прибиваем" блок с кнопками к низу */
  .jd-recommendations-wrapper .pcard-cta {
    margin-top: auto !important; 
    
    /* [КЛЮЧЕВОЕ ИЗМЕНЕНИЕ] Делаем контейнер вертикальным */
    display: flex !important; 
    flex-direction: column !important; /* Ставим элементы в столбик */
    gap: 8px !important; /* Небольшой отступ между кнопками */
    width: 100%; /* Контейнер занимает всю ширину */
  }

  /* 6. Обе кнопки занимают всю ширину контейнера */
  .jd-recommendations-wrapper .pcard-cta .btn-primary,
  .jd-recommendations-wrapper .pcard-cta .btn-ghost {
    width: 100% !important; /* Обе кнопки - 100% ширины */
    min-width: 100% !important; 
    margin: 0 !important;
    white-space: normal !important; /* Разрешаем тексту переноситься, если не влезло (на всякий случай) */
    text-align: center !important;
  }
  
  /* 7. Возвращаем "Learn more" (если он был скрыт) */
  .jd-recommendations-wrapper .pcard-cta .btn-ghost {
    display: block !important;
    text-decoration: none !important;
  }
}

/* --- ================================== --- */
/* --- Стилизация кнопок вариантов (prdbut__val) --- */
/* --- ================================== --- */

/* Стили для всех кнопок */
.prdbut__option--design-bg-n-bd .prdbut__val {
    border: 2px solid #e0e0e0 !important; /* Легкая серая рамка */
    border-radius: 25px !important;
    padding: 8px 16px !important;
    font-weight: 500 !important;
}

/* Стили для ВЫБРАННОЙ активной кнопки */
.prdbut__option--design-bg-n-bd .prdbut__val.active {
    border-color: #7c3aed !important; /* Толстая черная рамка для активной */
    background: #ffffff !important;
    font-weight: 700 !important;
}

/* --- ================================== --- */
/* --- Убираем оранжевый крестик (X) при наведении на вариант --- */
/* --- ================================== --- */

/* Нацеливаемся на крестик, который появляется в MOGO-темах */
.prdbut__option .prdbut__val.active::after,
.prdbut__option .prdbut__val:hover::after {
  content: none !important; /* Удаляем сам крестик */
  border: none !important; /* Убираем оранжевую рамку (если она есть) */
  background: transparent !important; /* Убираем оранжевый фон */
}

/* На всякий случай, если крестик использует другой селектор: */
.prdbut__option .prdbut__val.disabled::before,
.prdbut__option .prdbut__val::before {
    content: none !important;
}

/* --- ================================== --- */
/* --- ФИНАЛЬНЫЙ ФИКС: Убираем крестик при наведении --- */
/* --- ================================== --- */

/* Нацеливаемся на псевдоэлемент :before, который рисует крестик */
.prdbut__val.active::before,
.prdbut__val:hover::before {
    content: none !important; /* Гарантированно убираем символ/рамку */
    border: none !important; /* Убираем рамку, если крестик на ней */
    display: none !important; /* Скрываем элемент полностью */
}


/* --- ================================== --- */
/* --- Read more / Collapse (Joydomo style - как кнопки вариантов) ФИКС --- */
/* --- ================================== --- */

.ProductDesc__toggle {
    /* Основные стили */
    display: inline-block;
    margin-top: 1.5rem;
    padding: .55rem 1.25rem;
    border-radius: 25px !important; /* Очень скругленные углы, как у вариантов */
    
    /* ФИКС: Делаем как кнопки вариантов */
    border: 1px solid #7C3AED !important; /* Фиолетовая рамка */
    background: #ffffff !important; /* Белый фон */
    color: #000 !important; /* Фиолетовый текст */
    
    font-weight: 600 !important;
    font-size: 14px !important;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: none !important; /* Убираем тени */
    text-transform: none !important; /* Убираем Caps Lock */
}

.ProductDesc__toggle:hover {
    /* ФИКС: При наведении - чуть темнее фиолетовый текст */
    background: #f0e6ff !important; /* Светло-фиолетовый фон при наведении */
    border-color: #7C3AED !important;
    color: #000 !important;
    box-shadow: none !important; /* Без тени */
}

/* Стили для фокуса (клавиатуры/тача) */
.ProductDesc__toggle:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.4) !important; /* Фиолетовая обводка при фокусе */
}

/* --- ================================== --- */
/* --- Стилизация "Continue Shopping" (Исправлено v2) --- */
/* --- ================================== --- */

/* Нацеливаемся на правильный класс .tt-empty__btn */
.tt-empty__btn .btn {
  background-color: #7c3aed !important; /* Ваш фиолетовый */
  color: #ffffff !important; /* Белый текст */
  border: 1px solid #7c3aed !important;
  
  /* Скругление, как у других кнопок */
  border-radius: 25px !important; 
  
  padding: 10px 24px !important; /* Отступы */
  font-weight: 600 !important;
  text-decoration: none !important; 
  transition: all 0.3s ease !important;
  
  /* Тень, как у кнопки "Read more" */
  box-shadow: 0 3px 6px rgba(124, 58, 237, 0.35) !important;
}

/* Стиль при наведении (чтобы она НЕ исчезала) */
.tt-empty__btn .btn:hover {
  background-color: #6a2ecf !important; /* Чуть темнее фиолетовый */
  border-color: #6a2ecf !important;
  color: #ffffff !important; /* Текст остается белым */
  box-shadow: 0 4px 10px rgba(124, 58, 237, 0.5) !important;
}




/* ---------------------------------------------------------------------------- */
/* ДОПОЛНИТЕЛЬНО: Если у вас на других страницах хедер начинается с цвета (не прозрачный) */
/* ---------------------------------------------------------------------------- */
/* Если хедер на других страницах по умолчанию белый, этот блок не нужен.
   Если он прозрачный, но не должен быть, добавьте классы,
   чтобы исключить их из .template-index
*/
/* .template-collection header.jd-header,
.template-product header.jd-header,
.template-page header.jd-header {
    background-color: #ffffff !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05) !important;
    position: sticky !important; 
    top: var(--jd-announcement-bar-height, 0px) !important;
}
.template-collection header.jd-header .jd-header__desktop-logo img,
.template-product header.jd-header .jd-header__desktop-logo img {
    filter: none !important;
}
.template-collection header.jd-header .jd-header__desktop-nav a,
.template-product header.jd-header .jd-header__desktop-nav a {
    color: #111111 !important; 
}
.template-collection header.jd-header .jd-header__icon,
.template-product header.jd-header .jd-header__icon {
    filter: none !important;
}
.template-collection header.jd-header .jd-header__burger-btn span,
.template-product header.jd-header .jd-header__burger-btn span {
    background-color: #111111 !important;
}
*/