/* === HEADER CSS (auto-ekstrakt z index.html) START === */
/* ===== ALIBABA-STYLE HERO ===== */
  :root{
    --o-grad-1: oklch(0.92 0.08 165);
    --o-grad-2: oklch(0.85 0.08 200);
    --o-orange: #FE5504;
    --o-orange-soft: #FFF0E5;
  }
/* Promo gradient strip at very top */
  .promo-strip-top{
    background: linear-gradient(90deg, #6FE8B6 0%, #5FB8D4 50%, #4A8DC2 100%);
    padding: 10px 0; font-size: 13px;
    display: flex; align-items: center;
  }
.promo-strip-top .wrap{ display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.promo-strip-top .accio-logo{
    font-weight: 800; color: var(--ink); display: inline-flex; align-items: center; gap: 6px;
    font-size: 13.5px;
  }
.promo-strip-top .accio-logo i{ color: var(--o-orange); font-size: 16px; }
.promo-strip-top .promo-txt{ color: rgba(13,30,24,.75); font-weight: 500; }
.promo-strip-top .promo-txt strong{ color: var(--ink); }
.promo-strip-top .avatars{ display: inline-flex; margin: 0 6px; }
.promo-strip-top .avatars span{
    width: 22px; height: 22px; border-radius: 50%; margin-left: -6px;
    border: 2px solid #fff; display: inline-block;
    background: linear-gradient(135deg, #FFB088, var(--o-orange));
  }
.promo-strip-top .avatars span:nth-child(2){ background: linear-gradient(135deg, #88D0FF, #4A90E2); }
.promo-strip-top .avatars span:nth-child(3){ background: linear-gradient(135deg, #FFD688, #E8A500); }
.promo-strip-top .avatars span:nth-child(4){ background: linear-gradient(135deg, #88FFAA, #2EA84F); }
.promo-strip-top .promo-cta{
    margin-left: auto; background: var(--ink); color: #fff;
    padding: 7px 16px 7px 18px; border-radius: 999px; font-weight: 700; font-size: 12.5px;
    text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
  }
.promo-strip-top .promo-cta:hover{ background: #000; color: #fff; }
.promo-strip-top .promo-cta i{ font-size: 14px; }
/* Theme picker inline in promo strip */
  .promo-theme-pick{ display: inline-flex; align-items: center; gap: 10px; }
.promo-theme-pick .ptp-label{ font-size: 12px; color: rgba(13,30,24,.75); font-weight: 600; }
.promo-theme-pick .ptp-cycle{
    background: transparent; border: 0; padding: 0; cursor: pointer;
    display: inline-flex; align-items: center;
  }
.promo-theme-pick .ptp-cycle .dot{
    width: 22px; height: 22px; border-radius: 50%;
    border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.15);
    margin-left: -11px; position: relative;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
  }
.promo-theme-pick .ptp-cycle .dot:first-child{ margin-left: 0; }
.promo-theme-pick .ptp-cycle:hover .dot{ transform: scale(1.04); }
.promo-theme-pick .ptp-cycle .dot:hover{
    transform: scale(1.3) !important;
    z-index: 5;
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
  }
.promo-theme-pick .ptp-cycle .dot.active{
    transform: scale(1.18);
    z-index: 4;
    box-shadow: 0 0 0 2px var(--ink), 0 2px 6px rgba(0,0,0,.2);
  }
.promo-theme-pick .ptp-cycle .dot.active:hover{
    transform: scale(1.3) !important;
  }
@media (max-width: 991.98px){
.promo-theme-pick .ptp-label{ display: none; }
}
@media (max-width: 991.98px){
.promo-theme-pick .ptp-label{ display: none; }
}
/* Make black/dark CTA in promo strip */
  .promo-strip-top .promo-cta{
    background: var(--ink); color: #fff;
    padding: 7px 14px 7px 16px;
    font-weight: 700; font-size: 12px;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(0,0,0,.12);
    transition: background .15s, transform .1s;
  }
.promo-strip-top .promo-cta:hover{ background: #000; color: #fff; transform: translateY(-1px); }
.promo-strip-top .promo-cta i{ font-size: 13px; }
@media (max-width: 767.98px){
.promo-strip-top .promo-txt{ display: none; }
.promo-strip-top .promo-cta{ margin-left: auto; padding: 6px 12px; font-size: 11.5px; }
}
/* New header — clean, no bottom border */
  .topbar{ padding: 14px 0; background: #fff; border-bottom: 0; }
.topbar-inner{ height: auto !important; min-height: 56px; }
/* Logo redesign — Ubuntu font, large 1G with small .pl tucked at bottom */
  .logo{ flex-direction: column; align-items: center; gap: 0 !important; line-height: 1; text-decoration: none; }
.logo-mark{
    font-family: 'Ubuntu', system-ui, sans-serif !important;
    font-weight: 700; letter-spacing: -0.02em;
    display: inline-flex; align-items: flex-end; gap: 0;
    line-height: 1;
  }
.logo-mark .b{
    font-size: 38px; color: var(--o-orange) !important;
    font-family: 'Ubuntu', sans-serif; font-weight: 700;
    line-height: .9;
  }
.logo-mark .d{
    font-size: 16px; line-height: 1;
    color: #FF8A45 !important; background: transparent !important;
    width: auto; height: auto; border-radius: 0; display: inline;
    margin: 0; padding: 0 1px 0 1px;
    font-family: 'Ubuntu', sans-serif; font-weight: 700;
  }
.logo-mark .t{
    font-size: 16px; line-height: 1;
    color: #FF8A45 !important;
    font-family: 'Ubuntu', sans-serif; font-weight: 700;
    padding-bottom: 1px;
  }
.logo-tag{
    font-family: 'Ubuntu', system-ui, sans-serif;
    font-size: 10px; font-weight: 500;
    color: #8a948f; letter-spacing: 0.04em;
    margin-top: 3px; padding-left: 2px;
  }
@media (max-width: 575.98px){
.logo-mark .b{ font-size: 30px; }
.logo-mark .d, .logo-mark .t{ font-size: 13px; }
.logo-tag{ font-size: 9px; }
}
/* Top action area — unified pill controls, all 40px tall */
  .top-actions{ display: flex; align-items: center; gap: 6px; margin-left: auto; }
/* Common pill style for items inside top-actions */
  .top-actions > .lang,
  .top-actions > a.icon-link,
  .top-actions > .user-menu .user-menu-trigger{
    height: 40px; padding: 0 12px;
    display: inline-flex; align-items: center; gap: 6px;
    border-radius: 999px; background: transparent !important; border: 0 !important;
    color: var(--ink); font-size: 13px; font-weight: 700; text-decoration: none;
    cursor: pointer; transition: background .12s, color .12s;
  }
.top-actions > .lang:hover,
  .top-actions > a.icon-link:hover,
  .top-actions > .user-menu .user-menu-trigger:hover,
  .top-actions > .user-menu.open .user-menu-trigger{ background: var(--soft) !important; color: var(--ink); }
/* Language: just clickable flag, no tile background */
  .top-actions .lang{ position: relative; gap: 4px; cursor: pointer; }
.top-actions .lang > span{ background: transparent !important; border: 0 !important; padding: 0 !important; color: inherit !important; font-weight: inherit !important; }
.top-actions .lang > span:not(.active){ display: none; }
.top-actions .lang > span.active{ display: inline-flex; align-items: center; gap: 6px; }
.top-actions .lang > span.active::after{ display: none !important; }
.top-actions .lang .flag{ width: 22px; height: 16px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); border-radius: 3px; }
.top-actions .lang .lang-dd{
    position: absolute; top: calc(100% + 4px); right: 0; z-index: 100;
    background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 4px;
    min-width: 130px; display: none; flex-direction: column;
    box-shadow: 0 8px 22px -6px rgba(0,0,0,.15);
  }
.top-actions .lang.open .lang-dd{ display: flex; }
.top-actions .lang .lang-dd span{
    padding: 7px 10px !important; border-radius: 4px; cursor: pointer;
    display: inline-flex !important; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600;
  }
.top-actions .lang .lang-dd span:hover{ background: var(--soft); color: var(--o-orange); }
/* Heart */
  .top-actions .icon-link.heart{ position: relative; font-size: 18px; padding: 0 12px; }
.top-actions .icon-link.heart .dot-c{
    position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px;
    background: var(--o-orange); color: #fff; border-radius: 999px; font-size: 9px; font-weight: 800;
    display: grid; place-items: center; border: 2px solid #fff;
  }
.top-actions .icon-link.heart:hover{ color: var(--o-orange); }
/* Hide standalone "Moje konto" link before user-menu.js wraps it */
  .top-actions > a.acc{ display: none; }
/* User-menu trigger override — match the same 40px pill */
  .top-actions .user-menu-trigger{ padding-right: 10px !important; }
.top-actions .user-menu-trigger .ava{
    width: 28px; height: 28px; flex: 0 0 28px;
    background: linear-gradient(135deg, #FFB088, var(--o-orange));
    color: #fff; font-weight: 800; font-size: 11px;
  }
.top-actions .user-menu-trigger .label{ font-size: 13px; font-weight: 700; color: var(--ink); }
.top-actions .user-menu-trigger .chev{ font-size: 11px; color: var(--muted); margin-left: 2px; }
/* Register / Dodaj — primary CTA */
  .btn-register{
    height: 40px; padding: 0 18px; background: var(--o-orange); color: #fff;
    border-radius: 999px; font-weight: 800; font-size: 13px;
    text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
    transition: filter .15s, transform .1s;
    box-shadow: 0 6px 14px -4px rgba(255,106,0,.4);
    margin-left: 4px;
  }
.btn-register:hover{ filter: brightness(1.05); color: #fff; }
.btn-register .lbl-mobile{ display: none; }
.top-actions .hamburger{
    display: inline-flex; width: 40px; height: 40px; border-radius: 999px;
    background: var(--ink); color: #fff; border: 0; align-items: center; justify-content: center;
    font-size: 22px; cursor: pointer; margin-left: 4px;
    transition: background .15s;
  }
.top-actions .hamburger:hover{ background: var(--o-orange); }
@media (max-width: 767.98px){
.top-actions{ gap: 4px; }
.top-actions > .user-menu{ display: none; }
.top-actions .lang, .top-actions > a.icon-link{ padding: 0 8px; }
.top-actions .lang .flag{ width: 24px; height: 17px; }
.btn-register{ padding: 0; width: 40px; height: 40px; justify-content: center; }
.btn-register .lbl-full, .btn-register .lbl-mobile{ display: none; }
.btn-register i{ font-size: 18px; }
}
@media (max-width: 379.98px){
.top-actions .lang{ display: none; }
}
/* Categories nav strip */
  .expo-nav{
    display: flex; align-items: center; gap: 28px; padding: 14px 0;
    border-bottom: 1px solid var(--line); overflow: visible; scrollbar-width: none;
  }
@media (max-width: 991.98px){
.expo-nav{ overflow-x: auto; overflow-y: visible; }
}
.expo-nav::-webkit-scrollbar{ display: none; }
.expo-nav a{
    color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14px;
    white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;
    padding-bottom: 4px; border-bottom: 2px solid transparent;
  }
.expo-nav a:hover{ color: var(--o-orange); }
.expo-nav a.has-icon i{ font-size: 16px; }
.expo-nav .all-cats{ font-weight: 800; }
.expo-nav .sep{ color: var(--line); }
/* "Jestem z Polski" hover popup */
  .pl-hover-wrap{ position: relative; display: inline-flex; align-items: center; }
.pl-hover-trigger{
    display: inline-flex !important; align-items: center; gap: 6px;
    padding-bottom: 4px; border-bottom: 2px solid transparent;
    color: var(--ink) !important; font-weight: 700 !important;
    white-space: nowrap; cursor: pointer; text-decoration: none;
    transition: color .12s, border-color .12s;
  }
.pl-hover-trigger:hover, .pl-hover-wrap:hover .pl-hover-trigger{
    color: var(--o-orange) !important;
    border-bottom-color: var(--o-orange);
  }
.mini-flag{
    width: 18px; height: 12px; border-radius: 2px;
    background: linear-gradient(to bottom, #fff 50%, #dc143c 50%);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);
    flex: 0 0 18px;
  }
.mini-flag.big{ width: 36px; height: 24px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.08); flex: 0 0 36px; }
.pl-info-popup{
    display: none; position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%);
    background: #fff; border: 1px solid var(--line); border-radius: 14px;
    box-shadow: 0 20px 50px -10px rgba(0,0,0,.22), 0 4px 14px -2px rgba(0,0,0,.06);
    padding: 18px 20px; width: 380px; max-width: calc(100vw - 32px); z-index: 200;
    text-align: left;
  }
.pl-info-popup::before{
    content: ""; position: absolute; top: -7px; left: 50%; transform: translateX(-50%) rotate(45deg);
    width: 12px; height: 12px; background: #fff; border-top: 1px solid var(--line); border-left: 1px solid var(--line);
  }
.pl-hover-wrap:hover .pl-info-popup,
  .pl-hover-wrap:focus-within .pl-info-popup{ display: block; animation: plPop .18s ease-out; }
.pl-info-head{ display: flex; gap: 12px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.pl-info-title{ font-weight: 800; color: var(--ink); font-size: 15px; line-height: 1.2; letter-spacing: -.01em; }
.pl-info-sub{ font-size: 12px; color: var(--o-orange); font-weight: 700; margin-top: 3px; }
.pl-info-list{ list-style: none; padding: 0; margin: 0; }
.pl-info-list li{
    display: flex; gap: 10px; align-items: flex-start; padding: 6px 0;
    font-size: 12.5px; color: var(--fg); line-height: 1.4;
  }
.pl-info-list li i{
    width: 22px; height: 22px; flex: 0 0 22px; border-radius: 6px;
    background: var(--o-orange-soft); color: var(--o-orange);
    display: grid; place-items: center; font-size: 12px;
    margin-top: 1px;
  }
.pl-info-foot{
    font-size: 10.5px; color: var(--muted); margin-top: 12px;
    padding-top: 10px; border-top: 1px dashed var(--line); line-height: 1.5;
  }
.pl-info-foot i{ color: var(--o-orange); margin-right: 3px; }
@media (max-width: 575.98px){
.pl-info-popup{ width: calc(100vw - 24px); left: 0; transform: none; }
.pl-info-popup::before{ left: 30px; transform: rotate(45deg); }
.pl-hover-wrap:hover .pl-info-popup{ transform: none; animation: none; }
}
/* ===== THEME SWITCHER FLOATING WIDGET — collapsible ===== */
  .theme-switcher{
    position: fixed; right: 16px; bottom: 90px; z-index: 60;
    background: #fff; border: 1px solid var(--line); border-radius: 18px;
    padding: 8px 6px; display: flex; flex-direction: column; gap: 6px; align-items: center;
    box-shadow: 0 8px 24px -8px rgba(0,0,0,.18);
    transition: padding .18s ease;
  }
.theme-switcher .ts-label{
    font-size: 9px; font-weight: 800; color: var(--muted);
    text-transform: uppercase; letter-spacing: .06em;
    writing-mode: horizontal-tb; padding: 0; margin-bottom: 2px;
    cursor: pointer; user-select: none;
  }
.theme-switcher button{
    width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff;
    cursor: pointer; padding: 0; outline: 1px solid var(--line);
    transition: transform .12s, height .2s ease, opacity .15s ease, border-width .15s ease, outline-width .15s;
  }
.theme-switcher button:hover{ transform: scale(1.15); }
.theme-switcher button.active{ outline: 2px solid var(--ink); transform: scale(1.1); }
/* Collapsed: hide non-active siblings completely (no gap leak) */
  .theme-switcher button:not(.active){
    display: none;
  }
/* Expanded on hover (desktop) or .open (mobile-tap) */
  .theme-switcher:hover button:not(.active),
  .theme-switcher.open button:not(.active){
    display: block;
    animation: tsBtnIn .15s ease-out;
  }
/* Tiny chevron hint when collapsed */
  .theme-switcher::after{
    content: "›"; font-weight: 800; color: var(--muted);
    font-size: 11px; line-height: 1; transform: rotate(-90deg);
    transition: opacity .15s, transform .2s;
  }
.theme-switcher:hover::after,
  .theme-switcher.open::after{ opacity: 0; transform: rotate(0deg); height: 0; margin: 0; }
.theme-switcher button[data-theme="orange"]{ background: linear-gradient(135deg, #FCA95F 0%, #FCA95F 50%, #B33A00 50%, #B33A00 100%); }
.theme-switcher button[data-theme="blue"]{ background: linear-gradient(135deg, #3B82F6 0%, #3B82F6 50%, #1E40AF 50%, #1E40AF 100%); }
.theme-switcher button[data-theme="green"]{ background: linear-gradient(135deg, #22C55E 0%, #22C55E 50%, #166534 50%, #166534 100%); }
.theme-switcher button[data-theme="purple"]{ background: linear-gradient(135deg, #A78BFA 0%, #A78BFA 50%, #6D28D9 50%, #6D28D9 100%); }
.theme-switcher button[data-theme="magenta"]{ background: linear-gradient(135deg, #D946EF 0%, #D946EF 50%, #86198F 50%, #86198F 100%); }
.theme-switcher button[data-theme="teal"]{ background: linear-gradient(135deg, #14B8A6 0%, #14B8A6 50%, #115E59 50%, #115E59 100%); }
.theme-switcher button[data-theme="slate"]{ background: linear-gradient(135deg, #94A3B8 0%, #94A3B8 50%, #334155 50%, #334155 100%); }
@media (max-width: 575.98px){
.theme-switcher{ bottom: 80px; padding: 6px 4px; gap: 4px; }
.theme-switcher .ts-label{ display: none; }
.theme-switcher button{ width: 22px; height: 22px; }
}
/* ===== THEME PALETTES (override accent via data-theme on html) ===== */
  html[data-theme="orange"]{ --o-orange: #FE5504; --o-orange-soft: #FFF0E5; --o-orange-dark: #B33A00; --o-orange-mid: #FCA95F; }
html[data-theme="blue"]{ --o-orange: #2563EB; --o-orange-soft: #EFF6FF; --o-orange-dark: #1E40AF; --o-orange-mid: #3B82F6; }
html[data-theme="green"]{ --o-orange: #16A34A; --o-orange-soft: #F0FDF4; --o-orange-dark: #166534; --o-orange-mid: #22C55E; }
html[data-theme="purple"]{ --o-orange: #8B5CF6; --o-orange-soft: #F5F3FF; --o-orange-dark: #6D28D9; --o-orange-mid: #A78BFA; }
html[data-theme="magenta"]{ --o-orange: #C026D3; --o-orange-soft: #FAF5FF; --o-orange-dark: #86198F; --o-orange-mid: #D946EF; }
html[data-theme="teal"]{ --o-orange: #0D9488; --o-orange-soft: #F0FDFA; --o-orange-dark: #115E59; --o-orange-mid: #14B8A6; }
html[data-theme="slate"]{ --o-orange: #475569; --o-orange-soft: #F1F5F9; --o-orange-dark: #1E293B; --o-orange-mid: #94A3B8; }
/* Make existing hardcoded oranges follow theme via var() */
  .logo-mark .b, .logo-mark .t{ color: var(--o-orange) !important; }
.top-actions .icon-link.heart:hover{ color: var(--o-orange); }
.top-actions .lang .lang-dd span:hover{ color: var(--o-orange); }
.top-actions .user-menu-trigger .ava{ background: linear-gradient(135deg, var(--o-orange-mid), var(--o-orange)); }
.btn-register{
    background: var(--o-orange) !important;
    box-shadow: 0 6px 14px -4px color-mix(in oklch, var(--o-orange) 50%, transparent) !important;
  }
.promo-strip-top .accio-logo i{ color: var(--o-orange); }
/* ===== HAMBURGER MENU OVERLAY — themed accents ===== */
  .menu-overlay .menu-list a:hover .ic{ background: var(--o-orange) !important; color: #fff !important; }
.menu-overlay .menu-list a .ic{ background: var(--o-orange-soft) !important; color: var(--o-orange) !important; }
.menu-overlay .menu-quick .qb i{ color: var(--o-orange) !important; }
.menu-overlay .menu-quick .qb.red{ background: var(--o-orange) !important; border-color: var(--o-orange) !important; }
.menu-overlay .menu-quick .qb.red:hover{ background: var(--o-orange-dark) !important; border-color: var(--o-orange-dark) !important; }
.menu-overlay .menu-quick .qb.red i{ color: #fff !important; }
.menu-overlay .menu-search .go{ background: var(--o-orange) !important; }
.menu-overlay .menu-search .go:hover{ background: var(--o-orange-dark) !important; }
.menu-overlay .menu-foot .lang.lang-flat span.active{ color: var(--o-orange) !important; }
.menu-overlay .menu-foot .socials a:hover{ color: var(--o-orange) !important; }
/* Wide visible scrollbar for hamburger menu */
  .menu-overlay .menu-inner{ scrollbar-width: auto !important; scrollbar-color: var(--o-orange) var(--soft-2); -webkit-overflow-scrolling: touch; }
.menu-overlay .menu-inner::-webkit-scrollbar{ width: 14px !important; display: block !important; }
.menu-overlay .menu-inner::-webkit-scrollbar-track{ background: var(--soft-2); border-radius: 0; }
.menu-overlay .menu-inner::-webkit-scrollbar-thumb{
    background: linear-gradient(180deg, var(--o-orange), var(--o-orange-mid));
    border-radius: 7px;
    border: 2px solid var(--soft-2);
    min-height: 60px;
  }
.menu-overlay .menu-inner::-webkit-scrollbar-thumb:hover{
    background: var(--o-orange-dark);
  }
/* Scrollable categories list — bulletproof for mobile */
  .menu-overlay .menu-list{
    overflow-y: visible !important;
    overflow-x: visible !important;
    max-height: none !important;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
  }
/* The whole menu-inner scrolls instead */
  .menu-overlay .menu-inner{
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow-y: scroll !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: auto !important;
    scrollbar-color: var(--o-orange) var(--soft-2);
    overscroll-behavior: contain;
  }
.menu-overlay .menu-inner::-webkit-scrollbar{ width: 14px !important; -webkit-appearance: none !important; display: block !important; }
.menu-overlay .menu-inner::-webkit-scrollbar-track{ background: var(--soft-2) !important; }
.menu-overlay .menu-inner::-webkit-scrollbar-thumb{
    background: var(--o-orange) !important;
    border-radius: 7px !important;
    border: 2px solid var(--soft-2) !important;
    min-height: 60px !important;
  }
.menu-overlay .menu-inner::-webkit-scrollbar-thumb:hover{ background: var(--o-orange-dark) !important; }
/* Autocomplete inside hamburger search */
  .menu-overlay .menu-search{ position: relative; }
.menu-overlay .menu-search .ms-suggest{
    display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30;
    background: #fff; border: 1px solid var(--line); border-radius: 10px;
    box-shadow: 0 12px 28px -6px rgba(0,0,0,.15);
    max-height: 50vh; overflow-y: auto;
    padding: 6px 0;
  }
.menu-overlay .menu-search.open .ms-suggest{ display: block; }
.menu-overlay .menu-search .ms-suggest .ms-item{
    display: flex; align-items: center; gap: 10px; padding: 8px 14px;
    text-decoration: none; color: var(--fg); cursor: pointer;
  }
.menu-overlay .menu-search .ms-suggest .ms-item:hover{ background: var(--o-orange-soft); color: var(--ink); }
.menu-overlay .menu-search .ms-suggest .ms-item .si{
    width: 28px; height: 28px; flex: 0 0 28px; border-radius: 6px;
    background: var(--o-orange-soft); color: var(--o-orange);
    display: grid; place-items: center; font-size: 13px;
  }
.menu-overlay .menu-search .ms-suggest .ms-item .st{ flex: 1; min-width: 0; }
.menu-overlay .menu-search .ms-suggest .ms-item .st .title{ font-weight: 700; font-size: 13px; color: var(--ink); line-height: 1.2; }
.menu-overlay .menu-search .ms-suggest .ms-item .st .sub{ font-size: 11px; color: var(--muted); margin-top: 1px; }
.menu-overlay .menu-search .ms-suggest .ms-label{
    display: block; padding: 6px 14px 2px;
    font-size: 9.5px; font-weight: 800; color: var(--muted);
    text-transform: uppercase; letter-spacing: .06em;
  }
/* Theme switcher inside hamburger menu (mobile) */
  .menu-theme-switcher{
    padding: 12px 4px 8px; border-top: 1px solid var(--line);
    margin-top: 8px;
  }
.menu-theme-switcher .mts-label{
    font-size: 10px; font-weight: 800; color: var(--muted);
    text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px;
  }
.menu-theme-switcher .mts-row{ display: flex; gap: 10px; flex-wrap: wrap; }
.menu-theme-switcher button{
    width: 36px; height: 36px; border-radius: 50%; border: 2px solid #fff;
    cursor: pointer; padding: 0; outline: 1px solid var(--line);
    transition: transform .12s;
  }
.menu-theme-switcher button:hover{ transform: scale(1.1); }
.menu-theme-switcher button.active{ outline: 2px solid var(--ink); transform: scale(1.08); }
.menu-theme-switcher button[data-theme="orange"]{ background: linear-gradient(135deg, #FCA95F 0%, #FCA95F 50%, #B33A00 50%, #B33A00 100%); }
.menu-theme-switcher button[data-theme="blue"]{ background: linear-gradient(135deg, #3B82F6 0%, #3B82F6 50%, #1E40AF 50%, #1E40AF 100%); }
.menu-theme-switcher button[data-theme="green"]{ background: linear-gradient(135deg, #22C55E 0%, #22C55E 50%, #166534 50%, #166534 100%); }
.menu-theme-switcher button[data-theme="purple"]{ background: linear-gradient(135deg, #A78BFA 0%, #A78BFA 50%, #6D28D9 50%, #6D28D9 100%); }
.menu-theme-switcher button[data-theme="magenta"]{ background: linear-gradient(135deg, #D946EF 0%, #D946EF 50%, #86198F 50%, #86198F 100%); }
.menu-theme-switcher button[data-theme="teal"]{ background: linear-gradient(135deg, #14B8A6 0%, #14B8A6 50%, #115E59 50%, #115E59 100%); }
.menu-theme-switcher button[data-theme="slate"]{ background: linear-gradient(135deg, #94A3B8 0%, #94A3B8 50%, #334155 50%, #334155 100%); }
/* CATEGORIES MEGA-MENU PANEL anchors to .expo-nav's .wrap */
  .cats-mega{
    display: none; position: absolute; left: 0; top: 100%; right: 0;
    margin-top: 4px; z-index: 80;
    background: #fff; border: 1px solid var(--line); border-radius: 16px;
    box-shadow: 0 24px 56px -12px rgba(0,0,0,.2), 0 4px 12px -2px rgba(0,0,0,.06);
    overflow: hidden;
  }
.cats-mega.open{ display: grid; grid-template-columns: 260px 1fr; min-height: 480px; }
.expo-nav a.all-cats{ position: relative; cursor: pointer; }
.expo-nav a.all-cats.open{ color: var(--o-orange) !important; }
.expo-nav a.all-cats.open::after{
    content: ""; position: absolute; left: 0; right: 0; bottom: -14px; height: 2px; background: var(--o-orange);
  }
@media (max-width: 767.98px){
.cats-mega.open{ grid-template-columns: 1fr; }
.cats-mega .cats-mega-rail{ max-height: 200px; }
}
.cats-mega-rail{
    background: var(--soft); border-right: 1px solid var(--line); overflow-y: auto;
    padding: 4px 0;
  }
@media (max-width: 767.98px){
.cats-mega-rail{ border-right: 0; border-bottom: 1px solid var(--line); }
}
.cats-mega-rail button{
    width: 100%; padding: 7px 14px; border: 0; background: transparent;
    text-align: left; font-weight: 600; font-size: 12.5px; color: var(--fg);
    cursor: pointer; display: flex; align-items: center; gap: 8px;
    border-left: 3px solid transparent; line-height: 1.2;
    transition: background .12s, color .12s, border-color .12s;
  }
.cats-mega-rail button:hover{ background: #fff; color: var(--ink); }
.cats-mega-rail button.active{ background: #fff; color: var(--o-orange); border-left-color: var(--o-orange); font-weight: 800; }
.cats-mega-rail button .ri{
    width: 20px; height: 20px; flex: 0 0 20px; display: grid; place-items: center;
    color: var(--o-orange); font-size: 14px;
  }
.cats-mega-rail button .arr{ margin-left: auto; color: var(--muted); font-size: 12px; opacity: 0; }
.cats-mega-rail button.active .arr, .cats-mega-rail button:hover .arr{ opacity: 1; }
.cats-mega-panel{ padding: 20px 22px; overflow-y: auto; max-height: 520px; }
.cats-mega-panel h3{ font-size: 15px; font-weight: 800; color: var(--ink); margin: 0 0 14px; display: flex; align-items: center; gap: 6px; }
.cats-mega-panel h3 a{ margin-left: auto; font-size: 12px; font-weight: 700; color: var(--o-orange); text-decoration: none; }
.cats-mega-panel h3 a:hover{ text-decoration: underline; }
/* Quick sublinks */
  .cats-mega-panel .sublinks{
    display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 16px;
    padding-top: 12px; border-top: 1px dashed var(--line);
  }
.cats-mega-panel .sublinks a{
    font-size: 12.5px; color: var(--green-700); font-weight: 600; text-decoration: none;
  }
.cats-mega-panel .sublinks a:hover{ color: var(--o-orange); text-decoration: underline; }
/* Darker outline-style border on themed buttons */
  .btn-mega-go, .btn-cta, .btn-register, .btn-post-ad,
  .promo-cta, .filters .btn-green, .filters .btn-primary,
  .more-btn, .toggle-cats, .filter-fab, .fab-post,
  .search-bar .btn-search{
    border: 1px solid var(--o-orange-dark) !important;
  }
/* Chat heart, fav */
  .heart.active, .chat-head .verified{ color: var(--o-orange-dark) !important; }
/* === COMPLETE COLOR SWEEP === */
  /* All avatars */
  body .acc-user .avatar, body .seller .avatar,
  body .conv-item .avatar, body .chat-head .avatar,
  body .post-meta .ava, body .testimonial .ava,
  body .story .who i, body .author-bar .ava,
  body .rel-card .meta .ava{
    background: linear-gradient(135deg, var(--o-orange-mid), var(--o-orange)) !important;
    color: #fff !important;
  }
body .conv-item .avatar .online{ background: var(--o-orange) !important; }
.mega-search:focus-within,
  .mega-search-inner:focus-within,
  .search-bar:focus-within,
  .search-bar .q:focus-within,
  .loc-picker-search-wrap:focus-within,
  .menu-overlay .menu-search:focus-within{
    outline: 0 !important;
    box-shadow: none !important;
  }
/* === HEADER CSS END === */