/* =============================================================================
   HERO SLIDER — WordPress / Woodmart hardened
   All rules are scoped to .hs so nothing leaks into the rest of the site.
   A scoped reset + targeted !important defend against theme styles that
   target raw tags (a, p, h2, button, svg) — often with their own !important.
   ============================================================================= */

/* =========================================================== TOKENS */
.hs{
  /* Акцентный цвет. Значения ниже — запасные; реальные задаются inline
     из настройки «Акцентный цвет» в дашборде (по умолчанию #90B667). */
  --teal:#90B667;                 /* accent — свежий зелёный логотипа (кнопка, выделения) */
  --teal-lt:#a4c382;              /* светлее — акцентный текст на тёмном фото */
  --teal-dk:#7c9d59;              /* темнее — hover кнопки */
  --teal-rgb:144,182,103;         /* rgb для полупрозрачных теней */
  --brand-dark:#0E3B2E;           /* тёмно-зелёный логотипа — скрим, текст на кнопке */
  --paper:#f1f2f4;                /* светлый логотипа — основной текст */
  --ink:#0C0A09;
  --line:rgba(255,255,255,.18);
  --glass:rgba(20,22,28,.42);     /* нейтральная полупрозрачность (без тонирования фото) */
  --ease:cubic-bezier(.16,1,.3,1);
  --spring:cubic-bezier(.34,.8,.24,1);
  --dur:7000ms;
  /* ▼▼ SET THESE to match your site ▼▼ */
  --hs-container:1280px;                 /* your content column width (Woodmart ≈ 1230) */
  --hs-gutter:15px;                      /* десктоп: линия логотипа = padding контейнера WoodMart при макете 1280. Мобилка ↓ 20px */
  --hs-height:600px;                     /* ← уменьшено с 680px */
}

/* =========================================================== SCOPED RESET (theme isolation) */
.hs, .hs *, .hs *::before, .hs *::after{ box-sizing:border-box; }
.hs h1,.hs h2,.hs h3,.hs h4,.hs h5,.hs h6,
.hs p,.hs span,.hs a,.hs em,.hs i,.hs b,.hs strong,.hs small,.hs button{
  margin:0 !important; padding:0 !important; border:0 !important;
  background:transparent !important; box-shadow:none !important;
  text-decoration:none !important; text-transform:none !important;
  text-shadow:none !important; color:inherit !important;
  font-family:inherit; line-height:inherit; letter-spacing:normal;
}
.hs a,.hs button{ border-radius:0 !important; }
.hs button{ -webkit-appearance:none; appearance:none; cursor:pointer; text-align:center; }
.hs img,.hs svg{ max-width:100%; border:0 !important; box-shadow:none !important; vertical-align:middle; }
.hs *::before,.hs *::after{ content:none !important; }   /* kill theme-injected decorative pseudos */

/* =========================================================== FRAME — full width, no outer margin/radius */
/* Full-bleed: вырывается из контейнера темы (Woodmart ≈1230px) на всю ширину окна,
   при этом контент внутри по-прежнему выравнивается по колонке сайта (см. __inner). */
.hs{
  position:relative; height:var(--hs-height);
  width:100vw; max-width:100vw; margin-inline:calc(50% - 50vw);
  overflow:hidden; background:#08080a; color:var(--paper); isolation:isolate;
  font-family:"Raleway",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased; line-height:1.45; user-select:none;
}
.hs img{ display:block; }

/* =========================================================== STAGE */
.hs .hs__stage{position:absolute;inset:0;z-index:1;}
/* soft crossfade between slides (outgoing stays visible while fading) */
.hs .hs-slide{position:absolute;inset:0;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity 1.2s var(--ease),visibility 0s linear 1.2s;}
.hs .hs-slide.is-active{opacity:1;visibility:visible;pointer-events:auto;z-index:2;
  transition:opacity 1.2s var(--ease);}

.hs .hs-slide__media{position:absolute;inset:0;overflow:hidden;}
.hs .hs-slide__img{position:absolute;inset:0;width:100%;height:100%;
  background-size:cover;background-position:center;background-repeat:no-repeat;
  transform:scale(1.09) translateZ(0);}
/* will-change только на активном слайде — иначе браузер держит GPU-слой под все
   слайды сразу (лишняя память, особенно на мобилках). */
.hs .hs-slide.is-active .hs-slide__img{transform:scale(1) translateZ(0);transition:transform 7.5s ease-out;will-change:transform;}
.hs .hs-slide__scrim{position:absolute;inset:0;z-index:2;
  background:
    linear-gradient(100deg,rgba(6,7,10,.84) 0%,rgba(6,7,10,.5) 40%,rgba(6,7,10,.05) 74%,transparent 100%),
    linear-gradient(0deg,rgba(6,7,10,.5),transparent 55%) !important;}

.hs::after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;
  box-shadow:inset 0 0 120px 10px rgba(0,0,0,.5);}

/* =========================================================== CONTENT (aligned to site column, not the edge) */
.hs .hs-slide__inner{position:relative;z-index:3;height:100%;
  width:100%;max-width:var(--hs-container);margin-inline:auto;padding:0 var(--hs-gutter);
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;}
.hs .hs-slide__inner>*{max-width:min(560px,100%);}

.hs .hs-mask{overflow:hidden;display:block;}
.hs .hs-mask>*{display:inline-block;transform:translateY(130%);}
.hs .hs-slide.is-active .hs-mask>*{will-change:transform;}

.hs .hs-slide__eyebrow{margin:0 0 14px !important;}
.hs .hs-slide__eyebrow>span{display:inline-block;
  font-size:.72rem;font-weight:600;letter-spacing:.24em !important;
  text-transform:uppercase !important;color:var(--paper) !important;
  padding:.5em 1em !important;border-radius:999px !important;
  border:1px solid var(--line) !important;background:var(--glass) !important;}
.hs .hs-slide__eyebrow em{font-style:normal;color:var(--teal-lt) !important;}

/* padding + compensating negative margin = clip room for tall glyphs / italic overhang, no layout shift */
.hs .hs-slide__title{margin:-.14em -.12em !important;padding:.14em .12em !important;
  font-family:"Lora",Georgia,serif;font-weight:600;
  letter-spacing:-.015em;line-height:1.12;font-size:clamp(2.4rem,4.2vw,3.8rem);color:var(--paper) !important;}
.hs .hs-slide__title i{font-style:italic;font-weight:500;color:var(--teal-lt) !important;}

.hs .hs-slide__text{margin:12px 0 0 !important;max-width:42ch;}
.hs .hs-slide__text>span{font-size:clamp(1.1rem,1.4vw,1.3rem);font-weight:400;
  color:rgba(241,242,244,.85) !important;}

/* actions row — NO overflow clip (so the pill shadow is never cut into a rectangle) */
.hs .hs-slide__actions{margin:22px 0 0 !important;opacity:0;transform:translateY(16px);
  transition:opacity .7s var(--ease) .72s,transform .7s var(--ease) .72s;}

/* staggered entrance (active slide only) */
.hs .hs-slide.is-active .hs-slide__eyebrow>span{transform:none;transition:transform .7s var(--ease) .35s;}
.hs .hs-slide.is-active .hs-slide__title>*{transform:none;transition:transform .85s var(--ease) .45s;}
.hs .hs-slide.is-active .hs-slide__text>span{transform:none;transition:transform .8s var(--ease) .6s;}
.hs .hs-slide.is-active .hs-slide__actions{opacity:1;transform:none;}

/* =========================================================== BUTTON (self-contained pill) */
.hs a.hs-btn{
  display:inline-flex;align-items:center;gap:.6em;cursor:pointer;
  margin:0 !important;padding:.5em .5em .5em 1.35em !important;
  border:1.5px solid transparent !important;border-radius:999px !important;
  font:600 1.1rem/1 "Raleway",sans-serif;letter-spacing:.01em;
  text-decoration:none !important;text-transform:none !important;background-clip:padding-box;
  background:var(--teal) !important;color:var(--brand-dark) !important;
  box-shadow:0 8px 22px rgba(var(--teal-rgb),.42) !important;
  -webkit-appearance:none;appearance:none;min-height:0;width:auto;
  transition:transform .45s var(--spring),box-shadow .45s var(--spring),background .3s;
}
.hs a.hs-btn .hs-btn__ico{width:32px;height:32px;flex:0 0 auto;border-radius:50% !important;display:grid;
  place-items:center;background:rgba(14,59,46,.18) !important;color:var(--brand-dark) !important;
  transition:transform .45s var(--spring);}
.hs a.hs-btn:hover{transform:translateY(-2px);background:var(--teal-dk) !important;box-shadow:0 14px 32px rgba(var(--teal-rgb),.5) !important;}
.hs a.hs-btn:hover .hs-btn__ico{transform:translate(3px,0);}
.hs a.hs-btn:active{transform:translateY(0) scale(.98);}
.hs a.hs-btn:focus-visible{outline:3px solid #fff;outline-offset:3px;}

/* =========================================================== DOCK (dots + arrows) */
.hs .hs-dock{position:absolute;left:50%;transform:translateX(-50%);bottom:clamp(16px,4vh,24px);z-index:5;
  width:100%;max-width:var(--hs-container);padding:0 var(--hs-gutter);
  display:flex;align-items:center;justify-content:space-between;gap:16px;pointer-events:none;}
.hs .hs-dock>*{pointer-events:auto;}

.hs .hs-dots{display:flex;align-items:center;gap:10px;}
.hs .hs-dot{padding:8px 0 !important;cursor:pointer;line-height:0;}
.hs .hs-dot__bar{display:block;width:30px;height:3px;border-radius:3px !important;
  background:rgba(255,255,255,.28) !important;overflow:hidden;
  transition:width .45s var(--ease),background .3s;}
.hs .hs-dot[aria-current="true"] .hs-dot__bar{width:56px;background:rgba(255,255,255,.32) !important;}
.hs .hs-dot__fill{display:block;height:100%;width:0;background:var(--teal-lt) !important;}
.hs .hs-dot[aria-current="true"] .hs-dot__fill{width:100%;transition:width var(--dur) linear;}
.hs .hs-dot:focus-visible{outline:2px solid var(--teal-lt);outline-offset:4px;border-radius:6px;}

.hs .hs-controls{display:flex;align-items:center;gap:14px;}
.hs .hs-counter{font-family:"Lora",serif;font-variant-numeric:tabular-nums;
  font-size:.86rem;letter-spacing:.06em;color:rgba(241,242,244,.8) !important;}
.hs .hs-counter b{font-weight:600;color:var(--paper) !important;}
.hs .hs-counter span{opacity:.5;}
.hs .hs-arrows{display:flex;gap:8px;}
.hs .hs-arrow{width:42px;height:42px;border-radius:50% !important;flex:0 0 auto;cursor:pointer;
  border:1px solid var(--line) !important;background:var(--glass) !important;color:var(--paper) !important;
  display:grid;place-items:center;min-height:0;
  transition:background .3s,color .3s,transform .45s var(--spring),border-color .3s;}
.hs .hs-arrow:hover{background:var(--teal) !important;color:var(--brand-dark) !important;transform:scale(1.08);border-color:var(--teal) !important;}
.hs .hs-arrow:active{transform:scale(.94);}
.hs .hs-arrow:focus-visible{outline:3px solid var(--teal-lt);outline-offset:3px;}

/* =========================================================== RESPONSIVE */
@media(max-width:900px){
  .hs{--hs-height:460px;--hs-gutter:20px;}   /* мобилка/планшет: отступ как в идеале */
  .hs .hs-slide__text{display:none;}
  /* На узком экране фото кадрируется по центру и продукт (справа) уходит за край.
     Сдвигаем фокус вправо, чтобы была видна «вкусная» часть. Текст слева всё равно
     лежит на затемнении. Значение задаётся из дашборда (--hs-pos-mobile), запас 80%. */
  .hs .hs-slide__img{background-position:var(--hs-pos-mobile,80%) center;}
}
@media(max-width:560px){
  .hs{--hs-height:400px;}
  .hs .hs-counter{display:none;}
}

/* =========================================================== REDUCED MOTION */
@media(prefers-reduced-motion:reduce){
  .hs *{animation:none !important;}
  .hs .hs-slide__media{clip-path:none !important;}
  .hs .hs-slide__img{transform:none !important;transition:none !important;}
  .hs .hs-mask>*{transform:none !important;transition:none !important;}
  .hs .hs-slide__actions{opacity:1 !important;transform:none !important;}
  .hs .hs-dot__fill{display:none;}
}

/* =========================================================== BENEFITS BAR (1.4.0)
   Полоса преимуществ вплотную под баннером. Как и .hs, выходит на всю ширину окна,
   контент внутри выровнен по колонке сайта. Классы с префиксом .hs-bar — в стили
   баннера не лезут. Ряд из четырёх ячеек НИКОГДА не переносится: на узком экране
   ячейки ужимаются, на телефоне ряд листается пальцем вбок. */
.hs-bar{
  width:100vw; max-width:100vw; margin-inline:calc(50% - 50vw);
  background:#fff; border-bottom:1px solid #ebeee8;
  font-family:"Raleway",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:#14181b; box-sizing:border-box;
}
.hs-bar *,.hs-bar *::before,.hs-bar *::after{ box-sizing:border-box; }
.hs-bar__in{
  max-width:var(--hs-container,1280px); margin-inline:auto; padding:0 15px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:nowrap;
  overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
}
.hs-bar__in::-webkit-scrollbar{ display:none; }
.hs-bar__i{ display:flex; align-items:center; gap:14px; flex:0 0 auto;
  padding:20px clamp(12px,2.2vw,30px); position:relative; }
.hs-bar__i + .hs-bar__i::before{ content:""; position:absolute; left:0; top:50%;
  transform:translateY(-50%); width:1px; height:42px; background:#e4e8e0; }
.hs-bar__ic{ flex:0 0 auto; display:grid; place-items:center; color:#0E3B2E; }
.hs-bar svg{ display:block; max-width:none !important; border:0 !important; box-shadow:none !important; }
.hs-bar__line{ width:34px; height:34px; }
.hs-bar__mark{ width:38px; height:38px; }
.hs-bar__mark--veg{ width:80px; height:auto; }
.hs-bar__k{ display:block; margin:0; font-size:.87rem; font-weight:700; letter-spacing:.02em;
  text-transform:uppercase; line-height:1.25; white-space:nowrap; color:#14181b; }
.hs-bar__s{ display:block; margin:3px 0 0; font-size:.78rem; color:#7c857f; white-space:nowrap; }

@media(max-width:1180px){
  .hs-bar__k{ font-size:.8rem; }
  .hs-bar__s{ font-size:.72rem; }
  .hs-bar__line{ width:30px; height:30px; }
  .hs-bar__mark{ width:34px; height:34px; }
  .hs-bar__mark--veg{ width:72px; }
  .hs-bar__i{ gap:11px; }
}
@media(max-width:900px){
  .hs-bar__k{ font-size:.74rem; letter-spacing:.01em; }
  .hs-bar__s{ font-size:.68rem; }
  .hs-bar__line{ width:26px; height:26px; }
  .hs-bar__mark{ width:30px; height:30px; }
  .hs-bar__mark--veg{ width:62px; }
  .hs-bar__i{ gap:9px; padding:14px 12px; }
  .hs-bar__i + .hs-bar__i::before{ height:34px; }
}
@media(max-width:680px){
  .hs-bar__in{ justify-content:flex-start; padding-right:0; }
  .hs-bar__i{ padding:13px 16px; }
}