/* =====================================================================
   SOLPOWER — Header (адаптивная шапка)
   Чистый HTML + CSS, без фреймворков. Подходит для шаблона Joomla 2.5.
   Брейкпоинты:
     desktop : >= 1025px
     tablet  : 641px – 1024px
     mobile  : <= 640px
   Шрифт: Nunito (подключите <link> из header.html или локально).
   Префикс классов: .sp-  (чтобы не конфликтовать со стилями Joomla/шаблона)
   ===================================================================== */

:root{
  --sp-orange:#F47B20;
  --sp-orange-dark:#E0680F;
  --sp-orange-soft:rgba(244,123,32,.10);
  --sp-grad:linear-gradient(135deg,#FF9A3D,#F47B20);
  --sp-ink:#222A37;
  --sp-ink-2:#2A3140;
  --sp-text:#3A4150;
  --sp-text-2:#5A6273;
  --sp-muted:#6B7280;
  --sp-muted-2:#9AA1AD;
  --sp-border:#E6E9ED;
  --sp-border-2:#ECEEF1;
  --sp-border-3:#EAEDF0;
  --sp-bg-soft:#F7F8FA;
}

/* base ---------------------------------------------------------------- */
.sp-header *{box-sizing:border-box;}
.sp-header{font-family:'Nunito',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased;background:#fff;color:var(--sp-ink);}
.sp-header a{text-decoration:none;}
.sp-inner{max-width:1234px;margin:0 auto;padding:0 32px;}

.sp-icon{display:block;}
.sp-divider{width:1px;height:34px;background:var(--sp-border-2);}

/* ===================== TOPBAR ===================== */
.sp-topbar{background:var(--sp-bg-soft);border-bottom:1px solid var(--sp-border-2);}
.sp-topbar .sp-inner{height:42px;display:flex;align-items:center;justify-content:space-between;}
.sp-topbar__left{display:flex;align-items:center;gap:26px;}
.sp-topbar__right{display:flex;align-items:center;gap:20px;}

.sp-phone{display:flex;align-items:center;gap:8px;color:#39414F;font-size:13.5px;font-weight:600;transition:color .15s;}
.sp-phone:hover{color:var(--sp-orange);}
.sp-email{display:flex;align-items:center;gap:8px;color:var(--sp-muted);font-size:13.5px;font-weight:500;transition:color .15s;}
.sp-email:hover{color:var(--sp-orange);}
.sp-faq{display:flex;align-items:center;gap:7px;color:var(--sp-muted);font-size:13.5px;font-weight:500;transition:color .15s;}
.sp-faq:hover{color:var(--sp-orange);}

/* мини-кнопка Telegram возле телефона */
.sp-tg-mini{width:27px;height:27px;border-radius:8px;background:var(--sp-orange);display:flex;align-items:center;justify-content:center;flex:none;transition:background .15s;}
.sp-tg-mini:hover{background:var(--sp-orange-dark);}

/* переключатель языка */
.sp-lang{display:flex;align-items:center;gap:2px;background:#fff;border:1px solid #E3E6EA;border-radius:8px;padding:3px;}
.sp-lang a{font-size:12.5px;font-weight:600;color:#8A92A3;padding:3px 9px;border-radius:5px;}
.sp-lang a.is-active{color:#fff;background:var(--sp-orange);font-weight:700;}

/* плашка бесплатной доставки */
.sp-delivery{display:flex;align-items:center;gap:8px;background:var(--sp-orange-soft);color:#D9620E;font-size:13px;font-weight:700;padding:6px 13px;border-radius:8px;}

/* ===================== MAIN BAR ===================== */
.sp-main .sp-inner{height:88px;display:flex;align-items:center;justify-content:space-between;}

.sp-logo{display:flex;align-items:center;gap:14px;line-height:1;}
.sp-logo__mark{width:50px;height:50px;border-radius:14px;background:var(--sp-grad);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px -8px rgba(244,123,32,.7);flex:none;}
.sp-logo__text{font-size:27px;font-weight:800;letter-spacing:-.02em;color:var(--sp-ink);}
.sp-logo__text .o{color:var(--sp-orange);}
.sp-logo__tag{display:block;font-size:12px;font-weight:600;color:var(--sp-muted-2);letter-spacing:.06em;margin-top:5px;text-transform:uppercase;}
.sp-logo__col{display:flex;flex-direction:column;}

.sp-main__actions{display:flex;align-items:center;gap:22px;}
.sp-socials{display:flex;align-items:center;gap:9px;}
.sp-socials a{width:38px;height:38px;border-radius:11px;border:1px solid var(--sp-border);color:#7A828F;display:flex;align-items:center;justify-content:center;transition:all .15s;}
.sp-socials a:hover{background:var(--sp-orange);color:#fff;border-color:var(--sp-orange);}

.sp-cart{display:flex;align-items:center;gap:11px;background:var(--sp-orange);padding:11px 18px 11px 16px;border-radius:12px;transition:background .15s;}
.sp-cart:hover{background:var(--sp-orange-dark);}
.sp-cart__ico{position:relative;display:flex;}
.sp-cart__badge{position:absolute;top:-7px;right:-8px;background:#fff;color:var(--sp-orange);font-size:11px;font-weight:800;min-width:17px;height:17px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px;}
.sp-cart__txt{line-height:1.2;text-align:left;}
.sp-cart__txt b{display:block;font-size:14px;font-weight:700;color:#fff;}
.sp-cart__txt span{font-size:11.5px;font-weight:600;color:rgba(255,255,255,.85);}

/* кнопка-бургер (планшет/мобайл) */
.sp-burger{width:46px;height:46px;border-radius:12px;border:1px solid var(--sp-border);background:#fff;cursor:pointer;display:none;align-items:center;justify-content:center;flex:none;}
.sp-burger svg{stroke:#3A4150;}

/* иконка-корзина (компактная, мобайл) */
.sp-cart--icon{padding:0;width:42px;height:42px;border-radius:11px;justify-content:center;}
.sp-cart--icon .sp-cart__txt{display:none;}

/* ===================== NAV ===================== */
.sp-nav{border-top:1px solid var(--sp-border-2);border-bottom:1px solid var(--sp-border-2);}
.sp-nav .sp-inner{height:54px;display:flex;align-items:center;gap:34px;}
.sp-nav a{color:var(--sp-text-2);font-size:14.5px;font-weight:600;height:54px;display:flex;align-items:center;transition:color .15s;}
.sp-nav a:hover{color:var(--sp-orange);}
.sp-nav a.is-active{color:var(--sp-orange);font-weight:700;box-shadow:inset 0 -3px 0 var(--sp-orange);gap:6px;}

/* ===================== CATEGORY CARDS ===================== */
.sp-cats .sp-inner{padding-top:20px;padding-bottom:24px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.sp-cat{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid var(--sp-border-3);border-radius:14px;background:#fff;transition:all .18s;}
.sp-cat:hover{border-color:var(--sp-orange);box-shadow:0 8px 24px -10px rgba(244,123,32,.45);}
.sp-cat__ico{width:44px;height:44px;flex:none;border-radius:12px;background:var(--sp-orange-soft);display:flex;align-items:center;justify-content:center;}
.sp-cat__body{flex:1;}
.sp-cat__title{display:block;font-size:14.5px;font-weight:700;color:var(--sp-ink-2);line-height:1.25;}
.sp-cat__sub{display:block;font-size:12px;font-weight:600;color:var(--sp-muted-2);margin-top:3px;}
.sp-cat__chev{display:none;color:#C2C8D0;flex:none;}

/* ===================== MOBILE PHONE STRIP ===================== */
.sp-phonestrip{display:none;align-items:center;justify-content:space-between;padding:10px 16px;border-top:1px solid #F1F2F4;}
.sp-phonestrip .sp-phone{font-size:15px;font-weight:700;color:var(--sp-ink-2);}
.sp-tg-icon{width:36px;height:36px;border-radius:10px;background:var(--sp-orange);display:flex;align-items:center;justify-content:center;flex:none;}

/* ===================== DRAWER (mobile/tablet) ===================== */
/* z-index очень высокий: на странице есть декор-элементы (.shadow) с z-index ~65557,
   которые иначе «протекают» поверх меню (фиолетовый треугольник у «Частые вопросы») */
.sp-overlay{position:fixed;inset:0;background:rgba(20,24,32,.45);opacity:0;visibility:hidden;transition:opacity .25s;z-index:99998;}
.sp-overlay.is-open{opacity:1;visibility:visible;}
.sp-drawer{position:fixed;top:0;left:0;height:100%;width:330px;max-width:88vw;background:#fff;z-index:99999;transform:translateX(-101%);transition:transform .28s ease;display:flex;flex-direction:column;overflow-y:auto;}
/* тень только когда меню открыто — иначе она «протекает» на левый край экрана */
.sp-drawer.is-open{transform:translateX(0);box-shadow:0 0 40px rgba(0,0,0,.25);}
.sp-drawer__head{display:flex;align-items:center;justify-content:space-between;height:64px;padding:0 16px;border-bottom:1px solid #F1F2F4;}
.sp-drawer__close{width:42px;height:42px;border-radius:11px;background:var(--sp-orange-soft);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.sp-drawer__close svg{stroke:var(--sp-orange);}
.sp-drawer__nav{padding:8px 12px;}
.sp-drawer__nav a{display:flex;align-items:center;justify-content:space-between;padding:14px 12px;border-radius:11px;color:var(--sp-text);font-size:15px;font-weight:600;}
.sp-drawer__nav a.is-active{background:var(--sp-orange-soft);color:#D9620E;font-weight:700;}
.sp-subcats{padding:4px 0 4px 12px;margin-left:8px;border-left:2px solid #F3E2D4;}
.sp-subcats a{display:flex;align-items:center;gap:10px;padding:11px 10px;color:var(--sp-text-2);font-size:13.5px;font-weight:600;}
.sp-subcats a::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--sp-orange);flex:none;}
/* активная (открытая) категория — подсветка, чтобы было видно где находимся */
.sp-subcats a.is-active{color:#D9620E;font-weight:700;background:var(--sp-orange-soft);border-radius:8px;}
.sp-drawer__foot{margin:auto 16px 18px;padding:16px;background:var(--sp-bg-soft);border-radius:14px;display:flex;flex-direction:column;gap:13px;}
.sp-drawer__foot .sp-phone{font-size:15px;}
.sp-drawer__foot-row{display:flex;align-items:center;justify-content:space-between;padding-top:4px;}
.sp-drawer__foot-row .sp-socials a{width:36px;height:36px;border-radius:10px;background:#fff;}

/* mobile orange delivery strip (replaces topbar) */
.sp-mobistrip{display:none;height:34px;background:var(--sp-orange);align-items:center;justify-content:center;gap:8px;}
.sp-mobistrip span{color:#fff;font-size:12.5px;font-weight:700;}

/* =====================================================================
   TABLET  (<= 1024px)
   ===================================================================== */
@media (max-width:1024px){
  .sp-inner{padding:0 22px;}
  /* topbar: телефон+TG слева, доставка+язык справа; email и FAQ скрыты */
  .sp-email,.sp-faq{display:none;}
  .sp-topbar .sp-inner{height:40px;}
  /* main: показываем бургер, прячем соцсети */
  .sp-burger{display:flex;}
  .sp-socials,.sp-divider{display:none;}
  /* …но email и соцсети ВНУТРИ drawer должны остаться видимыми */
  .sp-drawer .sp-email,.sp-drawer .sp-socials{display:flex;}
  .sp-main .sp-inner{height:74px;}
  .sp-logo__mark{width:44px;height:44px;border-radius:12px;}
  .sp-logo__text{font-size:23px;}
  .sp-logo__tag{font-size:10.5px;}
  /* main actions order: бургер слева в начало бара */
  .sp-main__actions{order:3;gap:10px;}
  /* nav сжимается и скроллится по горизонтали */
  .sp-nav .sp-inner{gap:24px;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .sp-nav a{font-size:14px;white-space:nowrap;}
  /* категории — без подзаголовка */
  .sp-cat__sub{display:none;}
  .sp-cats .sp-inner{gap:12px;}
}

/* =====================================================================
   MOBILE  (<= 640px)
   ===================================================================== */
@media (max-width:640px){
  .sp-inner{padding:0 16px;}
  /* верхний светлый topbar заменяется оранжевой полосой доставки */
  .sp-topbar{display:none;}
  .sp-mobistrip{display:flex;}
  /* main bar: бургер | лого по центру | корзина-иконка */
  .sp-main .sp-inner{height:64px;}
  .sp-logo{gap:9px;}
  .sp-logo__mark{width:34px;height:34px;border-radius:10px;}
  .sp-logo__text{font-size:19px;}
  .sp-logo__tag{display:none;}
  .sp-burger{width:42px;height:42px;border-radius:11px;}
  /* корзина — компактная иконка без надписи «Корзина» */
  .sp-main__actions .sp-cart{padding:0;width:42px;height:42px;border-radius:11px;justify-content:center;}
  .sp-main__actions .sp-cart .sp-cart__txt{display:none;}
  /* nav (горизонтальное меню) прячем — оно в drawer */
  .sp-nav{display:none;}
  /* на главной показываем «ХИТЫ ПРОДАЖ» (bootstrap visible-*/span классы его прятали и схлопывали ширину) */
  .homepage .oBottomBlock{display:block !important;}
  .homepage .oBottomBlock .oPosBlock.bottom1{display:block !important;width:100% !important;}
  .homepage .oBottomBlock .oPos.bottom1-1{display:block !important;width:100% !important;float:none !important;margin-left:0 !important;}
  .homepage .oBottomBlock #mod_rand,
  .homepage .oBottomBlock .mod-content{width:100% !important;}
  /* #mod_rand в селекторе — чтобы перебить mobil.css (#mod_rand .mod_rand_product{width:100%}) → 2 в ряд */
  .homepage .oBottomBlock #mod_rand .mod_rand_product{width:50% !important;float:left !important;}
  /* phone strip показываем */
  .sp-phonestrip{display:flex;}
  /* категории — вертикальный список со стрелкой */
  .sp-cats .sp-inner{grid-template-columns:1fr;gap:9px;padding-top:14px;padding-bottom:16px;border-top:1px solid #F1F2F4;}
  .sp-cat{padding:13px 14px;border-radius:13px;}
  .sp-cat__ico{width:42px;height:42px;border-radius:11px;}
  .sp-cat__sub{display:none;}
  .sp-cat__chev{display:block;}
}