/* =====================================================================
   VEDAGOOD — «Каталог товарів» у шапці (ПК, від 992px)
   Пара до core/vg_menu.php і assets/js/vg_menu.js
   ===================================================================== */

/* --- Зелена смуга: тепер 5 пунктів, завжди в один рядок --- */
.header-bottom2 .main-nav>ul{flex-wrap:nowrap;align-items:center}
.header-bottom2 .main-nav>ul>li:not(:last-child){padding-right:38px}
@media(max-width:1199px){.header-bottom2 .main-nav>ul>li:not(:last-child){padding-right:26px}}
.header-bottom2,.header-bottom2 .container,.header-bottom2 .row,.header-bottom2 [class*="col-"],.header-bottom2 .main-menu,.header-bottom2 .main-nav{overflow:visible}
.header-bottom2 .main-menu{position:relative}

/* Меню прив'язане до всієї ширини смуги, а не до пункту */
.main-nav>ul>li.vg-cm-li{position:static}
.header-sticky .header-nav{position:relative}
.header-sticky .main-menu,.header-sticky .main-nav,.header-sticky .main-nav>ul,.header-sticky .header-nav .row,.header-sticky .header-nav [class*="col-"]{position:static}
@media(min-width:992px){.header-sticky.sticky{z-index:1040}}

/* --- Кнопка «Каталог товарів» --- */
.main-nav>ul>li.vg-cm-li>a.vg-cm-trig{display:inline-flex;align-items:center;gap:9px;height:40px;line-height:1;margin:5px 0;padding:0 15px 0 13px;border-radius:10px;background:rgba(0,0,0,.17);font-weight:500;letter-spacing:.02em;white-space:nowrap;transition:background .15s ease}
.main-nav>ul>li.vg-cm-li>a.vg-cm-trig:before{display:none}
.main-nav>ul>li.vg-cm-li:hover>a.vg-cm-trig,.main-nav>ul>li.vg-cm-li.is-open>a.vg-cm-trig{background:rgba(0,0,0,.3)}
.vg-cm-trig svg{flex:none;display:block}
.vg-cm-chev{transition:transform .2s ease;opacity:.85}
.vg-cm-li.is-open .vg-cm-chev{transform:rotate(180deg)}
/* у білій «липкій» шапці — оливкова кнопка */
/* по центру з рештою пунктів (у темі вони мають відступи 25px зверху і 20px знизу) */
.header-sticky .main-nav>ul>li.vg-cm-li>a.vg-cm-trig{background:var(--vg-olive,#4d6a22);color:#fff;padding-top:0;padding-bottom:0;margin:30px 0 25px}
.header-sticky .main-nav>ul>li.vg-cm-li:hover>a.vg-cm-trig,.header-sticky .main-nav>ul>li.vg-cm-li.is-open>a.vg-cm-trig{background:var(--vg-olive-d,#3d551b);color:#fff}

/* «Акції» в смузі — маленький значок */
.vg-nav-sale{display:inline-flex!important;align-items:center;gap:7px}
.vg-nav-sale svg{flex:none;display:block}

/* --- Сам випадаючий блок --- */
.vg-cm{position:absolute;left:0;right:0;top:100%;z-index:1060;display:flex;text-align:left;background:#fff;border-radius:0 0 18px 18px;box-shadow:0 24px 50px rgba(32,40,20,.2),0 3px 8px rgba(32,40,20,.07);overflow:hidden;opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s;font-size:15px;line-height:1.4;color:var(--vg-ink,#3a3f35);text-transform:none;letter-spacing:0}
.vg-cm-li:not(.vg-js):hover>.vg-cm,.vg-cm-li:not(.vg-js):focus-within>.vg-cm,.vg-cm-li.is-open>.vg-cm{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:opacity .16s ease,transform .16s ease,visibility 0s}
.header-sticky .vg-cm{border-top:1px solid var(--vg-sage,#e3e8d6)}
.vg-cm ul{list-style:none;margin:0;padding:0}
.vg-cm li{display:block;margin:0;padding:0}
.main-nav .vg-cm a{color:var(--vg-ink,#3a3f35);text-decoration:none;text-transform:none;letter-spacing:0;line-height:1.35;transition:color .12s,background .12s,border-color .12s,box-shadow .12s}
.vg-cm small{display:block;font-size:12.5px;line-height:1.3;color:var(--vg-mute,#7b8270);font-weight:400;margin-top:2px}

/* Ліва колонка — розділи */
.vg-cm-side{flex:0 0 306px;display:flex;flex-direction:column;background:var(--vg-tint,#f3f6ec);padding:14px 10px 10px;max-height:var(--vg-cm-max,72vh);overflow-y:auto}
.vg-cm-cats li+li{margin-top:2px}
.main-nav .vg-cm .vg-cm-ca{display:flex;align-items:center;gap:12px;padding:8px 10px 8px 8px;border-radius:13px;font-size:15px;font-weight:500}
.vg-cm-ic{flex:0 0 38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff;color:var(--vg-olive,#4d6a22);box-shadow:0 1px 3px rgba(32,40,20,.09);transition:background .12s,color .12s}
.vg-cm-nm{flex:1;min-width:0}
.vg-cm-ar{flex:none;opacity:.3;transition:transform .15s ease,opacity .15s ease}
.main-nav .vg-cm .vg-cm-ca:hover{background:rgba(255,255,255,.6)}
.main-nav .vg-cm .vg-cm-ca.is-on{background:#fff;color:var(--vg-olive-dd,#2f4115);box-shadow:0 2px 10px rgba(32,40,20,.08)}
.vg-cm-ca.is-on .vg-cm-ic{background:var(--vg-olive,#4d6a22);color:#fff;box-shadow:none}
.vg-cm-ca.is-on .vg-cm-ar{opacity:.85;transform:translateX(2px)}
.vg-cm-ca.vg-cm-sale .vg-cm-ic{color:#a0722c}
.vg-cm-ca.vg-cm-sale.is-on .vg-cm-ic{background:var(--vg-gold,#b98a3c);color:#fff}
.vg-cm-foot{margin-top:auto;padding:12px 10px 4px;border-top:1px solid var(--vg-sage,#e3e8d6);display:flex;flex-direction:column;gap:4px}
.vg-cm-cats+.vg-cm-foot{margin-top:14px}
.main-nav .vg-cm .vg-cm-foot a{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:500;color:var(--vg-olive,#4d6a22);padding:3px 0}
.main-nav .vg-cm .vg-cm-foot a:hover{color:var(--vg-olive-dd,#2f4115)}

/* Права частина — підкатегорії */
.vg-cm-main{flex:1;min-width:0;max-height:var(--vg-cm-max,72vh);overflow-y:auto;padding:24px 32px 28px}
.vg-cm-pane{display:none}
.vg-cm-pane.is-on{display:block;animation:vgCmIn .18s ease}
@keyframes vgCmIn{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:none}}
.vg-cm-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--vg-sage,#e3e8d6)}
.main-nav .vg-cm .vg-cm-title{display:inline-block;font-size:20px;font-weight:600;line-height:1.25;color:var(--vg-olive-dd,#2f4115)}
.main-nav .vg-cm .vg-cm-title:hover{color:var(--vg-olive,#4d6a22)}
.vg-cm-teaser{margin:5px 0 0;max-width:640px;font-size:14px;line-height:1.5;color:var(--vg-mute,#7b8270)}
.main-nav .vg-cm .vg-cm-all{flex:none;display:inline-flex;align-items:center;gap:8px;padding:10px 16px 10px 18px;border-radius:999px;background:var(--vg-olive,#4d6a22);color:#fff;font-size:14px;font-weight:500;white-space:nowrap}
.main-nav .vg-cm .vg-cm-all:hover{background:var(--vg-olive-d,#3d551b);color:#fff}

.vg-cm-subs{columns:4 200px;column-gap:30px}
.vg-cm-subs li{break-inside:avoid;-webkit-column-break-inside:avoid}
.main-nav .vg-cm .vg-cm-subs a{display:block;position:relative;padding:5px 0 5px 15px;font-size:14.5px}
.vg-cm-subs a:before{content:"";position:absolute;left:1px;top:12px;width:5px;height:5px;border-radius:50%;background:#c9d2b6;transition:background .12s,transform .12s}
.main-nav .vg-cm .vg-cm-subs a:hover{color:var(--vg-olive,#4d6a22)}
.vg-cm-subs a:hover:before{background:var(--vg-olive,#4d6a22);transform:scale(1.25)}

/* Коротка підкатегорія (до 6) — картками */
.vg-cm-subs.vg-cm-tiles{columns:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.main-nav .vg-cm .vg-cm-tiles a{height:100%;padding:14px 16px;border:1px solid var(--vg-sage,#e3e8d6);border-radius:14px;font-size:15px;font-weight:500}
.vg-cm-tiles a:before{display:none}
.main-nav .vg-cm .vg-cm-tiles a:hover{border-color:var(--vg-olive,#4d6a22);background:var(--vg-tint,#f3f6ec);color:var(--vg-olive-dd,#2f4115)}

/* Розділ з однією підкатегорією — промо-картка */
.vg-cm-promo{display:flex;align-items:flex-start;gap:22px;padding:26px 28px;border-radius:18px;background:linear-gradient(135deg,var(--vg-tint,#f3f6ec),#fff 75%);border:1px solid var(--vg-sage,#e3e8d6)}
.vg-cm-promo-ic{flex:0 0 64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--vg-olive,#4d6a22);color:#fff}
.vg-cm-promo-ic svg{width:32px;height:32px}
.vg-cm-promo .vg-cm-teaser{margin-bottom:16px}
.vg-cm-promo-sale{background:linear-gradient(135deg,#fbf3e3,#fff 75%);border-color:#efdfbf}
.vg-cm-promo-sale .vg-cm-promo-ic{background:var(--vg-gold,#b98a3c)}

@media(min-width:1400px){.vg-cm-side{flex-basis:322px}}
@media(max-width:1199px){
  .vg-cm-side{flex-basis:258px}
  .vg-cm-main{padding:20px 22px 24px}
  .vg-cm-subs{columns:3 190px;column-gap:22px}
  .vg-cm-head{flex-direction:column;gap:12px}
}
/* видимий фокус для клавіатури */
.main-nav>ul>li.vg-cm-li>a.vg-cm-trig:focus-visible{outline:2px solid #fff;outline-offset:2px}
.header-sticky .main-nav>ul>li.vg-cm-li>a.vg-cm-trig:focus-visible{outline-color:var(--vg-olive,#4d6a22)}
.main-nav .vg-cm a:focus-visible{outline:2px solid var(--vg-olive,#4d6a22);outline-offset:2px;border-radius:8px}
@media(prefers-reduced-motion:reduce){.vg-cm,.vg-cm-pane.is-on,.vg-cm-chev{transition:none;animation:none}}