/* OS24 skin for OpenCart 4.1: the AgriEnergy design language in Office Systems 24 colours
 * (dark #233E2F and green sampled from os24.com.ua and its logo). Generated 2026-10-30
 * from AGRITRADE/_work/site/opencart/agrienergy-skin.css by make_skin.py.
 * ------------------------------------------------------------------------------------------
 * Loaded after stylesheet.css and the vk-promo cascade. Same pattern as vkladovke-skin.css /
 * os24-skin.css on the YaPro builds.
 *
 * 2026-09-06: flipped from the dark se.net.ua-derived shell to green-on-white with warm pastel
 * bands, on Hlib's instruction. This is now WITH the grain: vk-promo is natively a light design
 * (white cards on #f3f3f3), so most of the previous file was overriding it into darkness. The
 * light version is roughly half the CSS — it mostly retints rather than inverts.
 *
 * Contrast, deliberately: #56B146 is 2.1:1 on white, which fails WCAG for text. It is used ONLY
 * for large fills and decoration. Text and links use #2E7D4F (4.6:1) and headings #233E2F (8.2:1),
 * and buttons put white on a gradient whose lightest stop is still #3F9A5A.
 */

@import url("https://fonts.googleapis.com/css2?family=Unbounded:wght@500;600&family=Manrope:wght@400;500;600;700&display=swap");

:root{
  /* grounds */
  --bg:#FAF8F3;            /* warm off-white page */
  --surface:#FFFFFF;       /* cards */
  --surface-2:#F2F9EC;     /* soft green tint */
  --warm:#FBF6EC;          /* warm pastel band */
  --warm-2:#F7EFE1;        /* deeper warm, for alternating sections */
  --hairline:rgba(23,37,30,.12);

  /* green */
  --accent:#2E7D4F;        /* text, links, values — 4.6:1 on white */
  --accent-bright:#56B146; /* fills, badges, decoration only */
  --accent-dark:#233E2F;   /* headings */
  --accent-tint:rgba(86,177,70,.14);
  --grad:linear-gradient(78deg,#2A6E45 25%,#3F9A5A 72%,#21583A 109%);
  --glow:radial-gradient(60% 70% at 0% 40%,rgba(86,177,70,.16) 0%,rgba(86,177,70,0) 70%);

  /* ink */
  --ink:#17251E;
  --ink-mute:#62706A;
  --ink-dim:#8A958F;

  --display:"Unbounded",system-ui,sans-serif;
  --body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;

  --r:12px;
  --r-lg:20px;
  --r-pill:100px;
  --shadow-card:0 1px 2px rgba(23,37,30,.05), 0 8px 24px rgba(23,37,30,.06);
  --t:.4s;

  /* vk-promo's own tokens, retinted. Its defaults are already light, so only the brand
     colours and the page ground move. --pr-dark-text-color stays dark: in vk-promo it is BOTH
     the body-text colour and the footer background, and on a light design both readings work. */
  --pr-primary-dark-color:#2E7D4F;
  --pr-primary-light-color:#3F9A5A;
  --pr-interactive-color:#56B146;
  --pr-green-color:#2E7D4F;
  --pr-links-color:#2E7D4F;
  --pr-blue-color:#2E7D4F;
  --pr-main-font:"Manrope",system-ui,sans-serif;
  --pr-bg:#FAF8F3;
  --pr-white:#FFFFFF;
  --pr-border:rgba(23,37,30,.12);
  --pr-light-grey-color:#E7EDE6;
  --pr-grey-color:#8A958F;
  --pr-light-text-color:#8A958F;
  --pr-dark-grey-color:#62706A;
  --pr-dark-text-color:#17251E;
  --pr-header-shadow:0 2px 20px rgba(23,37,30,.07);
  --pr-container:1320px;

  /* Bootstrap variables OpenCart's theme reads */
  --bs-body-bg:#FAF8F3;
  --bs-body-color:#17251E;
  --bs-body-font-family:"Manrope",system-ui,sans-serif;
  --bs-link-color:#2E7D4F;
  --bs-link-hover-color:#21583A;
  --bs-border-color:rgba(23,37,30,.12);
}

/* ---------------------------------------------------------------- ground */
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.5}
a{color:inherit;text-decoration:none;transition:color var(--t)}
/* vk-promo's own note: browsers honour only literal colour values on :visited, so var() is
   dropped and the UA blue wins. Literal hex on purpose. */
a:visited{color:#17251E}
a:hover{color:var(--accent)}
hr{border-color:var(--hairline);opacity:1}
img{max-width:100%;height:auto}

body h1,body h2,body h3,body h4,body h5,body h6{color:var(--ink)}
h1,h2,h3,.h1,.h2,.h3{
  font-family:var(--display);font-weight:600;letter-spacing:-.02em;text-transform:uppercase}
h1,.h1{font-size:clamp(26px,4vw,36px);line-height:1.3}
h2,.h2{font-size:clamp(22px,3.4vw,32px);line-height:1.3}
h3,.h3{font-size:clamp(17px,2.2vw,22px);line-height:1.3}
h4,h5,h6{font-family:var(--body);font-weight:600}

.ae-accent{color:var(--accent)}
.ae-eyebrow{
  display:inline-flex;align-items:center;gap:10px;padding:9px 18px 9px 12px;margin-bottom:18px;
  border-radius:var(--r-pill);border:1px solid rgba(46,125,79,.30);background:var(--accent-tint);
  font:500 14px/1 var(--body);text-transform:none;letter-spacing:0;color:var(--accent-dark)}
.ae-eyebrow::before{content:"";width:16px;height:16px;border-radius:50%;
  border:2px solid var(--accent);flex:none}

/* ---------------------------------------------------------------- header */
.vk-topbar,#top{background:var(--warm);border-bottom:1px solid var(--hairline);color:var(--ink-mute)}
.vk-topbar a,.vk-topbar-links a,.vk-topbar-phone,#top a{color:var(--ink-mute)}
.vk-topbar a:hover,.vk-topbar-phone:hover,#top a:hover{color:var(--accent)}
.vk-header,.vk-hdr-row1,.vk-hdr-h,header,#header{
  background:var(--surface);border-bottom:1px solid var(--hairline);color:var(--ink)}
.vk-logo,.vk-wordmark,#logo a{
  color:var(--accent-dark);font-family:var(--display);letter-spacing:-.02em}
.vk-hdr-stack,.vk-hdr-cart,.vk-stack-label,.vk-stack-icon{color:var(--ink-mute)}
.vk-hdr-stack:hover,.vk-hdr-cart:hover{color:var(--accent)}
#cart.vk-hdr-cart .dropdown > .btn::before,
.vk-hdr-stack .vk-count,.vk-count,.vk-badge,.vk-viewed-count{
  background:var(--accent)!important;color:#fff!important;font-weight:700;border:0}

.vk-search,.vk-smart-search,.vk-search input,.vk-smart-search input,
#search .form-control,#search .input-group-text{
  background:var(--surface);border:1px solid var(--hairline);color:var(--ink);
  border-radius:var(--r-pill)}
.vk-search input::placeholder,#search .form-control::placeholder{color:var(--ink-dim)}
.vk-search-hint{color:var(--ink-dim)}

.vk-catalog-btn,.vk-catalog-toggle,.vk-btn-primary,.vk-nl-btn{
  background:var(--grad);color:#fff;border:0;border-radius:var(--r-pill)}
.vk-catalog-btn:hover,.vk-btn-primary:hover{color:#fff;box-shadow:0 10px 26px rgba(47,107,30,.28)}
.vk-btn{border-radius:var(--r-pill)}
.vk-catmenu,.vk-catmenu-panel,.vk-cat-fly,.vk-nav-drop,.vk-contacts-panel,.vk-viewed-panel,
.dropdown-menu{
  background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r);
  box-shadow:0 18px 48px rgba(23,37,30,.14);color:var(--ink)}
.vk-catmenu-backdrop{background:rgba(23,37,30,.35)}
.vk-cat-item,.vk-cat-link,.vk-nav-link,.vk-nav-item,.vk-cat-fly-item,.vk-nav-drop-link,
.dropdown-item,#menu .nav-link{color:var(--ink-mute)!important}
.vk-cat-item:hover,.vk-cat-link:hover,.vk-nav-link:hover,.vk-cat-fly-item:hover,
.vk-nav-drop-link:hover,.dropdown-item:hover,#menu .nav-link:hover{
  color:var(--accent)!important;background:var(--surface-2)}
.vk-nav-row{background:var(--surface);border-bottom:1px solid var(--hairline)}
.vk-cp-head{color:var(--ink-dim)}
.vk-cp-body,.vk-cp-link{color:var(--ink)}
.vk-cp-link:hover{color:var(--accent)}
.vk-drawer{background:var(--surface);color:var(--ink);border-left:1px solid var(--hairline)}
.vk-drawer a{color:var(--ink-mute)}
.vk-drawer a:hover{color:var(--accent)}

/* ---------------------------------------------------------------- buttons */
.btn{border-radius:var(--r-pill);font:600 15px/1 var(--body);padding:13px 24px;border:0;
  transition:background .3s,border .3s,box-shadow .3s,transform var(--t)}
.btn:hover{transform:translateY(-2px)}
.btn-primary,.btn-success{background:var(--grad);color:#fff;border:0}
.btn-primary:hover,.btn-success:hover{background:var(--grad);color:#fff;
  box-shadow:0 10px 26px rgba(47,107,30,.28)}
.btn-secondary,.btn-light,.btn-outline-secondary{
  background:var(--surface);color:var(--ink-mute);border:1px solid var(--hairline)}
.btn-secondary:hover,.btn-light:hover,.btn-outline-secondary:hover{
  background:var(--surface-2);color:var(--accent);border-color:var(--accent)}
.btn-danger{background:#C0483C}
.ae-btn-arrow{position:relative;padding-right:64px}
.ae-btn-arrow::after{content:"↗";position:absolute;right:-14px;top:50%;transform:translateY(-50%);
  width:52px;height:52px;border-radius:50%;background:#fff;color:var(--accent);
  display:grid;place-items:center;font-size:18px;box-shadow:0 4px 14px rgba(23,37,30,.14)}

/* ---------------------------------------------------------------- cards */
.pr-module-item,.content-block,.vk-card,.product-thumb,.card{
  background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r);
  box-shadow:var(--shadow-card);color:var(--ink);transition:transform var(--t),box-shadow var(--t)}
.pr-module-item:hover,.product-thumb:hover,.card:hover{
  transform:translateY(-4px);box-shadow:0 10px 30px rgba(23,37,30,.12)}
.pr-module-item-image{background:#fff;border-radius:var(--r) var(--r) 0 0;min-height:190px;
  display:flex;align-items:center;justify-content:center}
.pr-module-item-image img{width:100%;height:100%;object-fit:contain}
.pr-module-item-image img[src*="_ph-"]{object-fit:cover}
.pr-module-item-info{padding:16px 18px}
.pr-module-item-title,.pr-module-item-title a,.product-thumb .caption h4,.product-thumb .caption a{
  color:var(--ink)!important;font:600 15px/1.35 var(--body);text-transform:none;letter-spacing:0;
  display:block}
.pr-module-item-title a:hover{color:var(--accent)!important}
.pr-module-item-model,.pr-module-item-rating,.product-thumb .description{color:var(--ink-dim)}
.pr-module-item-price-box,.pr-module-item-price-box *,.price,.price-new{
  color:var(--accent-dark)!important;font-family:var(--display);letter-spacing:-.02em}
.pr-module-item-price-box .price-old,.pr-module-item-price-box del,.price-old{
  color:var(--ink-dim)!important;font-family:var(--body);text-decoration:line-through}
.price-tax{display:none}
.pr-module-item-bottom{padding:0 18px 18px}
.pr-module-item-sticker,.vk-label{background:var(--accent-tint);color:var(--accent-dark);border:0;
  border-radius:var(--r-pill);padding:5px 11px;font:500 12px/1 var(--body)}
.pr-module-item-buttons .button-light,.pr-module-item-buttons button{
  background:var(--surface);color:var(--ink-mute);border:1px solid var(--hairline)}
.pr-module-item-buttons button:hover{color:var(--accent);border-color:var(--accent)}

/* ---------------------------------------------------------------- the three states */
.ae-state{display:inline-flex;align-items:center;gap:7px;font:500 12px/1 var(--body);
  padding:7px 12px;border-radius:var(--r-pill);margin-bottom:10px}
.ae-state::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.ae-state--stock{color:var(--accent-dark);background:var(--accent-tint)}
.ae-state--order{color:#96690C;background:rgba(233,178,42,.18)}
.ae-state--quote{color:var(--ink-mute);background:rgba(23,37,30,.06)}
.ae-stockline{font-size:13px;color:var(--ink-dim);margin:0 0 10px}
.vk-stock-label{font-weight:600}
.vk-stock-label.in{color:var(--accent)}
.vk-stock-label.order{color:#96690C}

/* ---------------------------------------------------------------- listing page */
.breadcrumb{background:transparent;padding:18px 0;margin:0;font-size:13px}
.breadcrumb a{color:var(--ink-dim)}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb-item+.breadcrumb-item::before{color:var(--ink-dim)}

/* Flex children default to min-width:auto, so a long unbreakable product name pushes its column
   past the container and the page scrolls sideways. */
.row{flex-wrap:wrap}
.row > [class*="col"]{min-width:0}
.pr-module-item-title,.pr-module-item-title a,.product-thumb .caption h4{
  overflow-wrap:break-word}   /* not `anywhere` + hyphens: that broke names mid-syllable */
body{overflow-x:hidden}

#column-left,#column-right,.vk-filter,.pr-filter{color:var(--ink-mute)}
#column-left .card,#column-left .content-block,.pr-filter,.vk-filter{
  background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r);
  box-shadow:var(--shadow-card)}
#column-left h3,#column-left h4,#column-left .card-header,
.pr-filter-title,.vk-filter-title,.pr-filter legend{
  color:var(--ink)!important;background:transparent;border-bottom:1px solid var(--hairline)}
#column-left label,#column-left .form-check-label,.pr-filter label{
  color:var(--ink-mute)!important;font-size:14px}
#column-left a{color:var(--ink-mute)}
#column-left a:hover{color:var(--accent)}
.pr-filter-count,.vk-count-badge{background:var(--accent-tint);color:var(--accent-dark)}

.form-control,.form-select,.input-group-text{
  background:var(--surface);border:1px solid var(--hairline);color:var(--ink);border-radius:var(--r)}
.form-control:focus,.form-select:focus{
  background:var(--surface);color:var(--ink);border-color:var(--accent);
  box-shadow:0 0 0 .2rem rgba(86,177,70,.22)}
.form-control::placeholder{color:var(--ink-dim)}
.form-check-input{background-color:#fff;border-color:var(--hairline)}
.form-check-input:checked{background-color:var(--accent);border-color:var(--accent)}

.pagination .page-link{background:var(--surface);border:1px solid var(--hairline);
  color:var(--ink-mute);border-radius:var(--r-pill);margin:0 3px;min-width:40px;text-align:center}
.pagination .page-item.active .page-link{background:var(--grad);border-color:transparent;color:#fff}
.pagination .page-link:hover{border-color:var(--accent);color:var(--accent)}
#button-grid,#button-list,.btn-group .btn.active{background:var(--grad);color:#fff;border:0}

/* ---------------------------------------------------------------- product page */
.ae-trust{display:flex;gap:18px;flex-wrap:wrap;padding:14px 0;margin-bottom:18px;
  border-block:1px solid var(--hairline);font-size:13px;color:var(--ink-mute)}
.ae-trust span{display:inline-flex;align-items:center;gap:8px}
.ae-trust span::before{content:"✓";color:var(--accent);font-weight:700}
.nav-tabs{border-bottom:1px solid var(--hairline)}
.nav-tabs .nav-link{color:var(--ink-mute);border:0;border-bottom:2px solid transparent;
  border-radius:0;font-weight:600}
.nav-tabs .nav-link.active{background:transparent;color:var(--accent);border-bottom-color:var(--accent)}
.tab-content{padding-top:22px}
.table{color:var(--ink-mute);--bs-table-bg:transparent;--bs-table-color:var(--ink-mute)}
.table>:not(caption)>*>*{background:transparent;border-color:var(--hairline);padding:12px 14px}
.table thead th{color:var(--ink);font-family:var(--body);font-weight:600}

/* spec "leader" rows */
.vk-leader-name{color:var(--ink-mute)!important}
.vk-leader-val{color:var(--ink)!important;font-weight:600}
.vk-spec-group{color:var(--accent-dark)!important;font-size:15px;margin:22px 0 10px}
.vk-sec-head h2{color:var(--ink)}
.ae-desc h3{font-size:18px;margin:26px 0 12px}
.ae-desc ul{padding-left:20px;margin-bottom:18px}
.ae-desc li,.ae-desc p{color:var(--ink-mute)}

/* ---------------------------------------------------------------- home bands */
.ae-band{padding-block:clamp(56px,7vw,104px);position:relative;overflow:clip;
  background:var(--bg);color:var(--ink)}
.ae-band--light{background:var(--surface)}
.ae-band--warm{background:var(--warm)}
.ae-band--tint{background:var(--surface-2)}
.ae-band::before{content:"";position:absolute;inset:0;background:var(--glow);pointer-events:none}
.ae-band > *{position:relative}

.ae-tile{position:relative;display:block;border-radius:var(--r);overflow:hidden;aspect-ratio:16/10;
  background:var(--surface-2);border:1px solid var(--hairline);
  box-shadow:var(--shadow-card);transition:transform var(--t),box-shadow var(--t)}
.ae-tile:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(23,37,30,.14)}
.ae-tile img{width:100%;height:100%;object-fit:cover}
.ae-tile::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,0) 35%,rgba(255,255,255,.72) 100%)}
.ae-tile__label{position:absolute;left:18px;top:26%;z-index:2;padding:14px 22px;max-width:78%;
  border:2px solid var(--accent);border-radius:var(--r);background:rgba(255,255,255,.88);
  backdrop-filter:blur(2px);
  font:600 22px/1.25 var(--display);letter-spacing:-.02em;text-transform:uppercase;
  color:var(--accent-dark)}
.ae-tile__label b{display:block;color:var(--accent);font-weight:600}
.ae-tile__count{position:absolute;right:16px;bottom:14px;z-index:2;
  font:500 13px/1 var(--body);color:var(--ink-mute)}

.ae-stat{padding:26px;border-radius:var(--r);background:var(--surface);
  border:1px solid var(--hairline);box-shadow:var(--shadow-card);height:100%}
.ae-stat__n{font:600 clamp(26px,3.4vw,38px)/1 var(--display);letter-spacing:-.02em;
  color:var(--accent-dark)}
.ae-stat__l{margin-top:10px;font-size:14px;color:var(--ink-mute)}

.accordion-item{background:transparent;border:0;border-top:1px solid var(--hairline)}
.accordion-button{background:transparent;color:var(--ink);font-weight:600;padding:22px 4px;
  box-shadow:none}
.accordion-button:not(.collapsed){background:var(--grad);color:#fff;border-radius:var(--r);
  padding-inline:22px;box-shadow:none}
.accordion-button:not(.collapsed)::after{filter:brightness(0) invert(1)}
.accordion-body{color:var(--ink-mute);padding:0 4px 22px}

/* ---------------------------------------------------------------- footer */
.vk-footer,footer{background:var(--warm-2);border-top:1px solid var(--hairline);color:var(--ink-mute)}
.vk-f-brand,.vk-f-head,.vk-f-title,footer h4,footer h5{color:var(--accent-dark)}
.vk-f-brand{font-family:var(--display);letter-spacing:-.02em}
.vk-f-body,.vk-f-links a,.vk-f-legal,.vk-f-muted,.vk-f-phone,.vk-f-mail,footer a{color:var(--ink-mute)}
.vk-f-links a:hover,.vk-f-phone:hover,.vk-f-mail:hover,footer a:hover{color:var(--accent)}
.vk-f-socials a{color:var(--ink-mute)}
.vk-f-socials a:hover{color:var(--accent)}
.vk-bottombar{background:var(--surface);border-top:1px solid var(--hairline)}
.vk-bottombar a{color:var(--ink-mute)}
.vk-bottombar a:hover{color:var(--accent)}

/* ---------------------------------------------------------------- misc chrome */
.alert{border-radius:var(--r);border:1px solid var(--hairline);background:var(--surface);
  color:var(--ink)}
.alert-success{border-color:rgba(46,125,79,.35);background:var(--accent-tint);color:var(--accent-dark)}
#back-to-top,.back-to-top{background:var(--grad);border:0}
.modal-content{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-lg);
  color:var(--ink)}
.modal-header,.modal-footer{border-color:var(--hairline)}
[class*="cookie"]{background:var(--warm-2)!important;border-top:1px solid var(--hairline);
  color:var(--ink-mute)}
[class*="cookie"] a{color:var(--accent)}
[class*="cookie"] .btn,[class*="cookie"] button{background:var(--grad);color:#fff;border:0}

@media (max-width:640px){
  .ae-btn-arrow{padding-right:24px}
  .ae-btn-arrow::after{display:none}
  .ae-tile__label{left:12px;padding:11px 16px;max-width:86%;font-size:18px}
}

/* ---------------------------------------------------------------------------
   Quick-links category carousel (.vk-ql). vk-promo assigns six hardcoded pastels
   — peach, cornflower, salmon, olive, magenta, mint — which read as a rainbow
   against a green-and-white palette. Retinted to warm sand → sage, so the strip
   reads as one family with the brand rather than six unrelated hues.
   -------------------------------------------------------------------------- */
.vk-ql-c0{background:#F7EBD9}   /* warm sand   */
.vk-ql-c1{background:#EFF3E4}   /* pale olive  */
.vk-ql-c2{background:#FBEEE4}   /* soft peach  */
.vk-ql-c3{background:#E4F0DC}   /* light sage  */
.vk-ql-c4{background:#F5EFE2}   /* warm cream  */
.vk-ql-c5{background:#DCEBD3}   /* sage green  */
.vk-ql{border:1px solid var(--hairline);border-radius:var(--r);
  box-shadow:var(--shadow-card);transition:transform var(--t),box-shadow var(--t)}
.vk-ql:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(23,37,30,.12)}
.vk-ql-name{color:var(--ink)!important;font-weight:700}
.vk-ql-price{color:var(--accent-dark)!important;font-weight:600}

/* The featured module emits bare Bootstrap `.col` children with no row-cols-* class, so eight
   products split the row eight ways — 141 px each, which hyphenates «Сонячний кабель» into
   «Соня-чний ка-бель». Give product columns a floor and let the row wrap. */
.row > .col:has(> .pr-module-item){flex:1 0 240px;max-width:25%}
@media (max-width:1200px){ .row > .col:has(> .pr-module-item){max-width:33.333%} }
@media (max-width:820px){  .row > .col:has(> .pr-module-item){max-width:50%} }
@media (max-width:520px){  .row > .col:has(> .pr-module-item){max-width:100%} }

/* AI consultant widget (os24-advisor.css, inherited). Its own stylesheet handles layout;
   this only brings its colours into the green/warm palette. */
.os24-advisor,.os24-advisor-panel,[class*="advisor"]{
  background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r);
  box-shadow:0 18px 48px rgba(23,37,30,.14);color:var(--ink)}
.os24-advisor-toggle,[class*="advisor"] button[type="submit"],[class*="advisor"] .send{
  background:var(--grad);color:#fff;border:0;border-radius:var(--r-pill)}
[class*="advisor"] input,[class*="advisor"] textarea{
  background:var(--surface);border:1px solid var(--hairline);color:var(--ink);border-radius:var(--r)}
[class*="advisor"] a{color:var(--accent)}

/* ===========================================================================
   Smart-search panel — ported out of 99-brand-vseoptef.css
   ---------------------------------------------------------------------------
   That file was quarantined as `.NOT-OURS` because it carries VSEOPTEF's red-and-gold
   brand layer. Correct call on the branding — but the whole `.vk-smart-*` component's
   STRUCTURE lived in it too, including `.vk-smart-overlay{position:fixed}`. Without that
   one rule the panel rendered in normal document flow: the page grew 283 px and the
   browser scrolled to the bottom, which is exactly the reported symptom.
   Ported here with AgriEnergy colours instead of restoring the file.
   ========================================================================== */

/* the trigger sat on top of the submit icon: both were position:absolute, z-index:5,
   anchored to the same right edge (smart 918–1066, icon 1022–1066). Move it left of
   the icon and give the input room for both. */
.vk-search .vk-smart-btn,.os24-ls-wrap .vk-smart-btn{right:52px!important}
.vk-search input[name="search"],.os24-ls-wrap input[name="search"]{padding-right:206px!important}
@media (max-width:900px){
  .vk-search .vk-smart-btn,.os24-ls-wrap .vk-smart-btn{right:48px!important}
  .vk-search input[name="search"],.os24-ls-wrap input[name="search"]{padding-right:104px!important}
}
@media (max-width:767px){
  .vk-smart-btn span{display:none}
  .vk-smart-btn{padding-left:12px;padding-right:12px}
  .vk-search input[name="search"],.os24-ls-wrap input[name="search"]{padding-right:96px!important}
}

.vk-smart-btn{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  border:1px solid rgba(46,125,79,.35)!important;background:var(--surface-2)!important;
  color:var(--accent-dark)!important;font-weight:700;font-size:13px}
.vk-smart-btn:hover{background:#E7F3DD!important}
.vk-smart-btn i{color:var(--accent)}

/* the rule whose absence caused the scroll-to-bottom */
.vk-smart-overlay{position:fixed;inset:0;z-index:1200;background:rgba(23,37,30,.55);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:flex;align-items:flex-start;justify-content:center;padding:8vh 16px 24px;overflow:auto}
.vk-smart-open{overflow:hidden}
.vk-smart-card{position:relative;width:100%;max-width:680px;background:var(--surface);
  border-radius:18px;box-shadow:0 30px 80px rgba(23,37,30,.30);padding:26px 28px 24px;
  animation:vk-smart-in .18s ease-out}
@keyframes vk-smart-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.vk-smart-close{position:absolute;top:12px;right:14px;border:0;background:transparent;
  font-size:20px;color:var(--ink-dim);cursor:pointer;padding:6px}
.vk-smart-head{display:flex;align-items:center;gap:10px}
.vk-smart-head i{color:var(--accent);font-size:22px}
.vk-smart-head h3{margin:0;font-size:24px;color:var(--ink)}
.vk-smart-lead{margin:6px 0 14px;color:var(--ink-mute);font-size:14px}
.vk-smart-steps{list-style:none;display:flex;gap:6px;margin:0 0 14px;padding:0;counter-reset:s}
.vk-smart-steps li{flex:1;font-size:12px;color:var(--ink-dim);padding:6px 0;
  border-top:3px solid #E7EDE6;counter-increment:s}
.vk-smart-steps li::before{content:counter(s) ". ";font-weight:700}
.vk-smart-steps li.is-current{color:var(--ink);border-top-color:var(--accent)}
.vk-smart-steps li.is-done{color:var(--accent);border-top-color:var(--accent)}
.vk-smart-input{display:flex;align-items:center;gap:10px;border:2px solid rgba(46,125,79,.35);
  border-radius:12px;padding:10px 14px;background:var(--surface-2)}
.vk-smart-input:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(86,177,70,.22)}
.vk-smart-input i{color:var(--accent)}
.vk-smart-input input{flex:1;border:0;outline:0;font-size:18px;background:transparent;
  color:var(--ink);padding-right:0!important}
.vk-smart-crumbs{margin:12px 0 0;font-size:13px;color:var(--ink-mute)}
.vk-smart-crumbs span{color:var(--accent);margin:0 4px}
.vk-smart-back{border:0;background:transparent;color:var(--accent);cursor:pointer;
  font-size:13px;margin-left:8px}
.vk-smart-body{margin-top:12px}
.vk-smart-q{font-weight:700;font-size:15px;margin:6px 0 10px;color:var(--ink)}
.vk-smart-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
.vk-smart-tile{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;
  padding:10px 12px;border:1px solid rgba(46,125,79,.28);border-radius:12px;
  background:var(--surface);cursor:pointer;font:inherit;line-height:1.3}
.vk-smart-tile:hover{background:var(--surface-2);border-color:var(--accent)}
.vk-smart-tile b{font-size:14px;color:var(--ink)}
.vk-smart-tile span{font-size:12px;color:var(--ink-mute)}
.vk-smart-link{display:inline-block;margin-top:12px;color:var(--accent);font-weight:600}
.vk-smart-link:hover{text-decoration:underline}
.vk-smart-go{display:flex;justify-content:center;align-items:center;margin-top:8px;
  padding:13px 18px;border-radius:12px;background:var(--grad);color:#fff;font-weight:700;
  font-size:16px;text-decoration:none}
.vk-smart-go:hover{color:#fff;box-shadow:0 10px 26px rgba(47,107,30,.28)}
.vk-smart-loading,.vk-smart-none{color:var(--ink-mute);font-size:14px;padding:8px 0}

/* ===========================================================================
   The rest of what the VSEOPTEF quarantine stranded
   ---------------------------------------------------------------------------
   Auditing 99-brand-vseoptef.css.NOT-OURS after the smart-search bug showed the file
   mixed brand colour with load-bearing layout. The colour stays quarantined; these
   rules are structure and come back, in AgriEnergy's palette.
   ========================================================================== */

/* the header is position:sticky and 153 px tall (measured at 1440, 2026-09-07). vk-promo's
   sticky components park themselves against this variable; unset, the product buy card and
   the tabs bar slide under the header while scrolling — the bug Hlib screenshotted on
   VSEOPTEF, which this store inherits verbatim. */
:root{--pr-sticky-offset:153px}
.vk-buy-rail{top:calc(var(--pr-sticky-offset,0px) + 16px)}
@media (max-width:991px){.vk-buy-rail{position:static}}

/* the search field is a Bootstrap input-group holding an input and two absolute buttons;
   without nowrap it wraps onto a second line at narrow desktop widths */
.vk-search .input-group{flex-wrap:nowrap}
.vk-logo img{border-radius:8px;max-height:56px;width:auto}

/* best-sellers: the golden frame Hlib asked for, in green */
.product-thumb.pr-module-item.os24-hit{border:2px solid var(--accent-bright);
  box-shadow:0 0 0 3px rgba(86,177,70,.16),0 6px 18px rgba(46,125,79,.18)}
.product-thumb.pr-module-item.os24-hit .pr-module-item-sticker.st-hit{
  background:linear-gradient(180deg,#8FD45C,#3F9A5A);color:#0F2113;font-weight:800}
.vk-sold{display:inline-flex;align-items:center;gap:5px;margin-top:6px;font-size:12px;
  color:var(--accent-dark);background:var(--surface-2);border:1px solid rgba(46,125,79,.28);
  border-radius:999px;padding:2px 9px}
.vk-sold i{color:var(--accent)}

/* the «хіт» flame — kept, recoloured off amber so it does not read as a second brand colour */
@keyframes vk-flame{
  0%  {transform:scale(1) rotate(-4deg);color:#7CB342;filter:drop-shadow(0 0 0 rgba(86,177,70,0))}
  35% {transform:scale(1.12) rotate(3deg);color:#8FD45C;filter:drop-shadow(0 0 3px rgba(86,177,70,.55))}
  60% {transform:scale(1.04) rotate(-2deg);color:#56B146;filter:drop-shadow(0 0 1px rgba(86,177,70,.3))}
  100%{transform:scale(1.15) rotate(4deg);color:#3F9A5A;filter:drop-shadow(0 0 4px rgba(92,166,55,.6))}
}
.vk-nav-best > i:first-child,.vk-catmenu-best i,.vk-best-title i{display:inline-block;
  transform-origin:50% 90%;animation:vk-flame 1.15s ease-in-out infinite alternate;will-change:transform}
.vk-nav-best > i:first-child{color:#7CB342}
.vk-best-title i{animation-duration:1.4s}
@media (prefers-reduced-motion:reduce){
  .vk-nav-best > i:first-child,.vk-catmenu-best i,.vk-best-title i{animation:none;color:#7CB342}}

/* AI advisor — os24-advisor.css is fully token-driven, so it only needs its tokens set.
   Its defaults are a terracotta-and-oak palette that read as a second brand on a green site. */
:root{
  --terra:#2E7D4F; --terra-d:#21583A;
  --adv-terra:#2E7D4F; --adv-oak:#56B146; --adv-cream:#F2F9EC;
  --adv-line:rgba(46,125,79,.22); --adv-ink:#17251E;
  --adv-shadow:0 18px 44px rgba(23,37,30,.18);
  --paper:#FFFFFF; --oak:#56B146; --line:rgba(46,125,79,.22); --ink:#17251E;
}

/* ---------------------------------------------------------------- OS24 additions */
.vk-logo img{background:#233E2F;padding:7px 12px;border-radius:12px;max-height:60px;width:auto}
.vk-hero .swiper-slide.os24-slide{position:relative;display:flex;align-items:center;min-height:clamp(340px,38vw,520px);
  background-size:cover!important;background-position:center right!important;border-radius:var(--r-lg);overflow:hidden}
.vk-hero .swiper-slide.os24-slide::before{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(250,248,243,.97) 0%,rgba(250,248,243,.9) 42%,rgba(250,248,243,.35) 68%,rgba(250,248,243,0) 85%)}
.os24-slide .vk-hero-text{position:relative;z-index:1;max-width:560px;padding:clamp(24px,4vw,56px);color:var(--ink)}
.os24-slide .vk-hero-title{font-family:var(--display);font-weight:600;font-size:clamp(26px,3.4vw,44px);line-height:1.2;
  letter-spacing:-.02em;text-transform:uppercase;color:var(--accent-dark)}
.os24-slide .vk-hero-eyebrow{color:var(--accent-dark)!important}
.os24-slide p{color:#33413A;font-size:17px}
/* long furniture names: the AE display caps were sized for short SKU names */
#product-info h1,.pr-product-title,.product-info h1{font-family:var(--body);font-weight:700;text-transform:none;
  letter-spacing:-.01em;font-size:clamp(20px,2vw,26px);line-height:1.3}
@media (max-width:767px){
  .vk-logo img{max-height:44px;padding:5px 9px;border-radius:9px}
  .vk-hero .swiper-slide.os24-slide{background-position:70% center!important;min-height:440px;align-items:flex-start}
  .vk-hero .swiper-slide.os24-slide::before{content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(250,248,243,.94) 0%,rgba(250,248,243,.78) 55%,rgba(250,248,243,0) 100%)}
}