/* ==============================
   BODY LOCK VID MENY ÖPPEN
============================== */
body.menu-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
}
/* ===== SIDEBAR LAYOUT ===== */
.vendor-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: 320px; /* ändra efter design */
    height: 100%;
    background: #fff;
    box-shadow: -2px 0 6px rgba(0,0,0,0.2);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s ease;
}

.vendor-sidebar.open {
    transform: translateX(0);
}

/* ===== HEADER (titel, stäng/tilbaka-knapp) ===== */
.vendor-sidebar-header {
    flex: 0 0 50px; /* höjden på headern */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    border-bottom: 1px solid #eee;
}

/* ===== MENY-KONTAINER ===== */
#vendor-menu-container {
    flex: 1; /* tar resterande höjd */
    height: calc(100% - 85px); /* säkerhetsmarginal om flex inte används */
    overscroll-behavior: contain; /* låser scroll på mobiler */
    -webkit-overflow-scrolling: touch; /* smidigare scroll på iOS */
}

/* ===== SCROLLBAR (valfritt) ===== */
#vendor-menu-container::-webkit-scrollbar {
#vendor-menu-container::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.15);
    border-radius: 3px;
}
#vendor-menu-container::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.3);
}
/* ==============================
   OVERLAY
============================== */
.vendor-sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    backdrop-filter: blur(0px);
    z-index: 9998;
    opacity: 0;    width: 6px;
}

    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    pointer-events: none;
}
.vendor-sidebar-overlay.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* ==============================
   SIDOMENY
============================== */
.vendor-sidebar {
    position: fixed;
    top: 0px;
    left: 0;
    transform: translateX(-100%);
    width: 500px;
    max-width: 90%;
    height: 101%;
    box-shadow: 4px 0 20px rgba(0,0,0,0.15);
    overflow-y: auto;
    z-index: 9999;
    transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
    font-family: 'Inter', 'Segoe UI', sans-serif;
    font-size: 1.8rem;
    color: #111;
	padding-top: 0px;
	border-radius: 4px;
}
.vendor-sidebar.open { transform: translateX(0); }

/* Scrollbar */
.vendor-sidebar::-webkit-scrollbar { width: 8px; }
.vendor-sidebar::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 4px; }
.vendor-sidebar::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.25); }

/* ==============================
   HEADER I SIDEBAR
============================== */
.vendor-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 15px;
    font-size: 2rem;
    font-weight: 700;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 10;
}
.vendor-sidebar-close,
.vendor-back-btn {
    background: none;
    border: none;
    font-size: 1.9rem;
    cursor: pointer;
    color: #555;
    transition: all 0.25s ease;
    padding: 4px 10px;
    border-radius: 45px;
}
.vendor-sidebar-close:hover,
.vendor-back-btn:hover { color: #111; background: rgba(0,0,0,0.00); }
/* Back-knappen: grundläge dold men behåller layouten */
.vendor-back-btn {
    display: inline-flex;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}
.vendor-back-btn.show { visibility: visible; }
.vendor-back-btn.show.visible { opacity: 1; }
.vendor-back-btn svg { stroke: #333; width: 22px; height: 22px; margin-left: -2px; margin-top: 5px; }

/* ==============================
   MENY
============================== */
.vendor-menu { list-style: none; margin: 0; padding: 0; }
.vendor-menu-item { border-bottom: 1px solid rgb(0 0 0 / 15%); transition: transform 0.35s ease, opacity 0.35s ease; margin-top: 6px; padding-bottom: 2px; }
.vendor-menu-link {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* titel nära ikon */
    gap: 12px;
    padding: 8px 24px;
    text-decoration: none;
    font-size: 1.6rem;
    font-weight: 420;
    color: #111;
    border-radius: 12px;
    background: #fff;
    transition: all 0.25s ease;
}

.vendor-menu-link.active { background: linear-gradient(90deg, #e0f7ff, #fff); color: #0077cc; font-weight: 600; }
.vendor-menu-item.active-parent > .vendor-menu-link { background: linear-gradient(90deg, #e0f0ff, #fff); color: #005bb5; font-weight: 600; }

/* Ikoner */
.vendor-menu-icon {
    width: 36px;
    height: 36px;
    object-fit: contain;
    border-radius: 8px;
    flex-shrink: 0;
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
}
.vendor-menu-link:hover .vendor-menu-icon { transform: scale(1.05); }

/* SVG-ikoner direkt i länken */
.vendor-menu-link svg.menu-icon { width:30px; height:30px; flex:0 0 30px; color:#333; fill:none; stroke:currentColor; stroke-width:1.55; transition:color 0.2s ease, transform 0.2s ease; }
.vendor-menu-link:hover svg.menu-icon { color:#444; transform:scale(1.04); }

/* Pilar */
.submenu-arrow {
    font-size: 1.4rem;
    display: inline-block;
    transition: transform 0.3s ease, color 0.3s ease;
    color: #888;
    margin-left: auto;
}
.vendor-menu-item.open > .vendor-menu-link .submenu-arrow { transform: rotate(90deg); color: #1a73e8; }
.vendor-menu-link:hover .submenu-arrow { color: #1a73e8; transform: scale(1.2) rotate(0deg); }

/* Underkategori slide */
#vendor-menu-container.slide-in { transform: translateX(0); opacity: 1; }
#vendor-menu-container.slide-out { transform: translateX(-100%); opacity: 0; }
#vendor-menu-container.slide-in-back { transform: translateX(0); opacity: 1; }
#vendor-menu-container.slide-out-back { transform: translateX(100%); opacity: 0; }
.vendor-menu-item ul.vendor-menu {
    padding-left: 16px;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.35s ease, opacity 0.35s ease;
}
.vendor-menu-item.open > ul.vendor-menu { max-height: 1000px; opacity: 1; }

/* ==============================
   HAMBURGER TOGGLE
============================== */
.sidebar-toggle-wrapper {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    padding-left: 10px;
    margin-top: 10px;
}
.vendor-sidebar-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 28px;
    background: none;
    color: #000;
    font-weight: 600;
    font-size: 16px;
    border: none;
    cursor: pointer;
    flex-direction: row;
    border-radius: 0;
}
.vendor-toggle-icon {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 20px;
    height: 16px;
}
.vendor-toggle-icon .line {
    display: block;
    width: 100%;
    height: 2px;
    background: #000;
    transition: all 0.25s ease;
}
.vendor-sidebar-toggle.active .line:nth-child(1) { transform: rotate(45deg) translate(3px, 3px); }
.vendor-sidebar-toggle.active .line:nth-child(2) { opacity: 0; }
.vendor-sidebar-toggle.active .line:nth-child(3) { transform: rotate(-45deg) translate(4px, -4px); }
.vendor-toggle-label { font-weight: 400; font-size: 15px; color: #000; text-align: center; text-transform: capitalize; }

/* ==============================
   HEADER WRAPPER
============================== */
.header-top {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    padding: 0 10px;
}
.account-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 12px;
    padding: 4px 0px;
    gap: 2px;
}
.account-wrapper .account-trigger {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.account-wrapper .hd-icon svg { width: 32px; height: 32px; fill: #333; }
.login-text { font-size: 12px; margin-top: 2px; display: block; text-align: center; }

/* ==============================
   ACCOUNT ICON
============================== */
.account-wrapper li {
    list-style: none;
    position: relative;
}
.account-wrapper li::before {
    content: '';
    display: inline-block;
    width: 32px;
    height: 32px;
    margin-right: 8px;
    background-image: url('path-to-user-icon.svg');
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
}

/* ==============================
   RESPONSIVT (Desktop→Tablet)
============================== */
@media (max-width: 1024px) {
    .vendor-sidebar { width: 100%; max-width: 100vw; font-size: 1.6rem; }
    .vendor-menu-link { font-size: 1.6rem; padding: 16px 20px; }
    .vendor-sidebar-header { padding: 16px; font-size: 1.6rem; }
    .vendor-menu-icon,
    .vendor-menu-link svg.menu-icon { width: 32px; height: 32px; }
    .sidebar-toggle-wrapper { padding-left: 0; order: -1; }
    .vendor-sidebar-toggle { padding: 12px 22px; font-size: 15px; margin: -40px 0 20px -14px; }
}

/* ==============================
   MOBIL (<=768px): större text/ikoner
============================== */
@media (max-width: 768px) {
    .vendor-sidebar { font-size: 1.7rem; line-height: 1.6; }
    .vendor-menu-link { padding: 18px 20px; font-size: 1.7rem; }
    .vendor-sidebar-header { padding: 16px; font-size: 1.7rem; line-height: 1.6; }
    .vendor-menu-icon,
    .vendor-menu-link svg.menu-icon { width: 40px; height: 40px; } /* större ikoner */
    .submenu-arrow { font-size: 1.5rem; }

    /* Hamburgare upp, text under */
    .header-top {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 12px;
    }
    .vendor-sidebar-toggle {
        flex-direction: column; /* Icon över text */
        align-items: center;
        justify-content: center;
        margin-top: 0;
        padding: 0;
    }
    .vendor-toggle-icon { margin-bottom: 2px; }
    .vendor-toggle-label { font-size: 14px; text-align: center; }

    .account-wrapper { flex-direction: column; align-items: center; gap: 2px; }
    .account-wrapper .account-trigger { flex-direction: column; align-items: center; gap: 2px; }
    .login-text { font-size: 12px; margin-top: 2px; }

    .header-search-wrap {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }
    .header-search-wrap .mobi-cart-wrapper {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
}

/* ==============================
   MOBIL (<=576px)
============================== */
@media (max-width: 576px) {
    .vendor-sidebar-toggle { padding: 8px 16px; font-size: 13px; }
    .vendor-toggle-label { font-size: 12px; }
    .account-wrapper .account-trigger { font-size: 11px; padding: 3px 5px; }
    .account-wrapper .hd-icon svg { width: 20px; height: 20px; } /* lite större än tidigare 16px */
    .login-text { font-size: 11px; margin-top: 0; text-align: center; }
}

/* ==============================
   MOBIL (<=480px): håll storleken uppe
============================== */
@media (max-width: 480px) {
    .vendor-sidebar { font-size: 1.6rem; line-height: 1.7; }
    .vendor-menu-link { padding: 16px 18px; font-size: 1.6rem; }
    .vendor-sidebar-header { padding: 14px; font-size: 1.6rem; line-height: 1.7; }
    .vendor-menu-icon,
    .vendor-menu-link svg.menu-icon { width: 38px; height: 38px; }
    .vendor-sidebar-toggle { padding: 6px 12px; font-size: 12px; margin-left: -26px; margin-bottom: 20px; }
    .account-wrapper .account-trigger { font-size: 10.5px; padding: 2px 4px; }
}

/* ==============================
   MOBIL (<=400px)
============================== */
@media (max-width: 400px) {
    .vendor-sidebar { font-size: 1.55rem; }
    .vendor-menu-link { padding: 14px 16px; font-size: 1.55rem; }
    .vendor-sidebar-header { font-size: 1.55rem; padding: 12px; }
    .vendor-menu-icon,
    .vendor-menu-link svg.menu-icon { width: 36px; height: 36px; }
    .vendor-sidebar-toggle { margin-top: -8px; margin-left: -26px; margin-bottom: 28px; }
}

/* ==============================
   MOBIL (<=360px)
============================== */
@media (max-width: 360px) {
    .vendor-sidebar { font-size: 1.5rem; }
    .vendor-menu-link { font-size: 1.5rem; }
    .vendor-sidebar-header { font-size: 1.5rem; }
    .vendor-menu-icon,
    .vendor-menu-link svg.menu-icon { width: 34px; height: 34px; }
}

/* ==============================
   KNAPP: Visa desktop-knapp först >=768
============================== */
#sidebarToggle {
    display: inline-flex !important;
}
@media (max-width: 767px) {
    #sidebarToggle.sidebarpro-fallback-visible {
        display: inline-flex !important;
    }
}

/* ==============================
   Övriga småjusteringar
============================== */
.account-wrapper .hd-icon { margin-right: 8px; vertical-align: middle; }

/* Dölj mobil-knappen på desktop */
.mobile-only { display: none; }
@media (max-width: 768px) { .mobile-only { display: block; } }

.header-wrapper-right .authorization-link.mobile-only {
    display: inline-block;
    margin-right: 10px; /* avstånd mellan account och cart */
    vertical-align: middle;
}

/* ==============================
   EXTRA: Läsbarhet på mobil
============================== */
@media (max-width: 768px) {
    .vendor-menu-link { line-height: 1.6; }
}
@media (max-width: 480px) {
    .vendor-menu-link { line-height: 1.7; }
}

/* Visa "Varukorg" under kundvagn på mobil */
@media (max-width: 768px) {
  .page-header .mobi-cart-wrapper .action.showcart {
    display: flex;
    flex-direction: column;   /* ikon över text */
    align-items: center;
    position: relative;
  }

  .page-header .mobi-cart-wrapper .action.showcart::after {
    content: "Cart";      /* text under */
    font-size: 12px;
    margin-top: 4px;
    color: #000;              /* byt färg om behövs */
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
  }
}

/* ==============================
   Konto / Login & Cart - Codazon
   Text under ikon på mobil och flytta upp cart
   (behåller dina tidigare inställningar)
============================== */
@media (max-width: 768px) {
    /* Konto / Login - behåller dina inställningar */
    .authorization-link.authorization-style-01 .account-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .authorization-link.authorization-style-01 .account-wrapper .hd-icon {
        margin-bottom: 4px;
    }

    .authorization-link.authorization-style-01 .account-wrapper .text-uppercase {
        display: block;
        font-size: 10px;
        font-weight: 500;
        color: #000;
        text-align: center;
        line-height: 1.2;
        margin: 0;
    }

    /* Varukorg */
    .page-header .mobi-cart-wrapper .action.showcart {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        margin-top: -6px;
    }

    .page-header .mobi-cart-wrapper .action.showcart > .cart-icon {
        display: flex;
        justify-content: center;
        margin-bottom: 2px;
    }

    /* Visa text dynamiskt */
    .page-header .mobi-cart-wrapper .action.showcart .text {
        display: block !important;   /* tvingar fram texten */
        font-size: 8px;              /* behåller din tidigare textstorlek */
        font-weight: 500;
        color: #000;
        text-align: center;
        line-height: 1.2;
        margin-top: -8px;            /* behåller tidigare avstånd */
    }

    /* Ta bort eventuell statisk ::after */
    .page-header .mobi-cart-wrapper .action.showcart::after {
        content: none;
    }
}

@media (max-width: 768px) {
    .header.panel {
        display: flex;
        align-items: flex-start; /* vertikal justering */
        justify-content: flex-end; /* höger sida */
        gap: 12px; /* avstånd mellan account och cart */
        padding: 0 10px;
    }

    /* Konto / Login */
    .header.panel .mobile-account {
        display: flex;
        flex-direction: column; /* ikon ovanför text */
        align-items: center;
        justify-content: center;
        margin-top: -4px; /* matchar cart */
		margin-right: 40px;
    }

    .header.panel .mobile-account .hd-icon {
        font-size: 20px;
        margin-bottom: 0px;
		margin-top: 8px;
    }

    .header.panel .mobile-account .text-uppercase {
        font-size: 8px;
        line-height: 1;
        margin: 0; /* tar bort extra margins */
        text-align: center;
        text-transform: none;		
        margin-left: -7px;
		padding-bottom: 3px;
		margin-top: -3px;
    }


}



/* ==============================
   Vertikala linjer vid back och close
============================== */
.vendor-sidebar-header {
    position: relative; /* säkerställ att linjer kan positioneras */
}

/* Linje vid back-knappen (vänster) */
.vendor-sidebar-header .back-line {
    position: absolute;
    top: 0px; /* följer headern */
    bottom: -1px;
    left: 60px; /* desktopläge nära back-knappen */
    width: 1px;
    background-color: rgba(0,0,0,0.15);
}

/* Linje vid close-knappen (höger) */
.vendor-sidebar-header .close-line {
    position: absolute;
    top: 0px;
    bottom: -1px;
    right: 60px; /* desktopläge nära close-knappen */
    width: 1px;
    background-color: rgba(0,0,0,0.15);
}

/* ==============================
   Responsiva justeringar
============================== */
@media (max-width: 768px) {
    .vendor-sidebar-header .back-line {
        left: 44px;   /* flytta in linjen lite närmare knappen */
        top: 6px;
        bottom: 6px;
    }
    .vendor-sidebar-header .close-line {
        right: 44px;
        top: 6px;
        bottom: 6px;
    }
}

@media (max-width: 480px) {
    .vendor-sidebar-header .back-line {
        left: 54px;   /* ännu närmare knappen på liten mobil */
        top: 4px;
        bottom: 0px;
    }
    .vendor-sidebar-header .close-line {
        right: 54px;
        top: 4px;
        bottom: 0px;
    }
}
.vendor-sidebar-header h3#sidebar-title {
    margin: -6px; /* nollställer negativa marginaler */
	margin-inline: 22px;
	text-align: center;
}


/* Max 768px = alla mobiler + små tablets */
@media (max-width: 768px) {
    .vendor-sidebar-header {
        font-size: 1.6rem;
        padding-left: 4px;
        padding-right: 4px;
    }
}

/* Max 480px = små mobiler */
@media (max-width: 480px) {
    .vendor-sidebar-header {
        font-size: 1.5rem;
        padding-left: 0px;
        padding-right: 2px;
    }
}

/* Max 360px = extra små skärmar (t.ex. äldre iPhones) */
@media (max-width: 360px) {
    .vendor-sidebar-header {
        font-size: 1.4rem;
        padding-left: 0px;
        padding-right: 1px;
    }
}


/* Sidebar-header sticky på toppen */
.vendor-sidebar-header {
    position: sticky;   /* gör så den följer med */
    top: 0;             /* alltid fastklistrad högst upp */
    z-index: 1000;      /* så att den inte göms av innehållet */
    background: #fff;   /* bakgrund så texten inte "flyter" över menyn */
    padding: 15px 20px; /* lite padding så det ser bra ut */
    border-bottom: 1px solid rgba(0,0,0,0.1); /* tunn linje under */
	padding: 10px;
}

/* Mobilanpassning */
@media (max-width: 768px) {
    .vendor-sidebar {
        width: 100%;      /* hela skärmen */
        max-width: none;  /* ta bort max-bredd */
    }

    .vendor-sidebar-header {
        padding: 6px 5px;
        display: flex;
        align-items: center;
    }

    .vendor-back-btn,
    .vendor-sidebar-close {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        background: transparent;
    }

    .vendor-back-btn svg {
        stroke: #333;
        width: 26px;
        height: 26px;
    }

    .vendor-sidebar-header h3#sidebar-title {
        font-size: 18px;
        margin: 0;
        flex: 1;
        text-align: center;
    }

    .vendor-menu-link {
        padding: 15px 20px;
        font-size: 14px;
    }

    .vendor-menu-link svg.menu-icon,
    .vendor-menu-link img.menu-icon {
        width: 24px;
        height: 24px;
        margin-right: 12px;
    }

    .submenu-arrow svg {
        width: 18px;
        height: 18px;
    }
}

/* Mobilplacering */
@media (max-width: 480px) {
    .vendor-sidebar-header .back-line {
        left: 54px;
        top: 4px;
        bottom: 0;
    }

    /* Dölj back-line i root (huvudkategori) */
    .vendor-sidebar.root .vendor-sidebar-header .back-line {
        display: none !important;
    }
}
@media (max-width: 768px) {
    .vendor-back-btn svg {
        stroke: #333;
        width: 26px;
        height: 26px;
    }

    /* Dölj bakåtpilen i root-läge */
    .vendor-sidebar.root .vendor-back-btn svg {
        display: none !important;
    }
}

.vendor-menu {
    list-style: none;
    margin: 0px;
    padding: 1px;
}

@media (max-width: 480px) {
    .vendor-sidebar.root .vendor-back-btn.show {
        display: none !important;
    }

    /* Visa knappen på underkategori-sidor */
    body.category .vendor-sidebar.root .vendor-back-btn.show {
        display: block !important;
    }
}


@media only screen and (max-width: 767px) {
    .page-header .nav-toggle {
        position: relative;
    }

    .page-header .nav-toggle .menu-label {
        display: block;
        font-size: 14px;
        color: #333;
        text-align: center;
        margin-top: 5px; /* avstånd under hamburgermenyn */
    }
}

@media (min-width: 768px) {
  #sidebarToggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: -10px;
    margin-bottom: 5px;
    padding: 15px 16px;
    background: rgb(255, 255, 255); /* ljus, semi-transparent */
    border: 0px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    color: #333;
    backdrop-filter: blur(6px); /* glassmorphic-effekt */
    overflow: hidden; /* nödvändigt för bubblor */
    transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
  }

  #sidebarToggle:hover {
    background: rgba(255, 255, 255, 1);
    border-color: #dbd9d9;
    box-shadow: 0 0px 2px rgba(0, 0, 0, 0.12);
    color: #1a73e8;
  }

  #sidebarToggle:active {
    transform: translateY(1px) scale(0.98);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    background: rgba(240, 240, 240, 1);
  }

  /* Bubbeleffekt */
  #sidebarToggle::before {
    content: '';
    position: absolute;
    top: 48%;
    left: 23%;
    width: 10px;
    height: 10px;
    background: rgba(230, 230, 230, 0.47); /* accentfärg bubbel */
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.5s ease, opacity 0.5s ease;
  }

  #sidebarToggle:hover::before {
    transform: translate(-50%, -50%) scale(4);
    opacity: 1;
  }
}


/* ==============================
   Hover-effekt för back- och close-knappar
============================== */
.vendor-back-btn,
.vendor-sidebar-close {
    position: relative; /* för pseudo-element */
    overflow: hidden;
    border-radius: 50%; /* rund cirkel */
}

.vendor-back-btn::before,
.vendor-sidebar-close::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(0, 0, 0, 0.08); /* ljus hoverfärg */
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.35s ease;
    pointer-events: none;
}

.vendor-back-btn:hover::before,
.vendor-sidebar-close:hover::before {
    width: 120%;   /* större än knappen */
    height: 120%;
    background: rgba(0, 0, 0, 0.12); /* lite starkare på hover */
}

/* Mjuk övergång för ikonen också */
.vendor-back-btn svg,
.vendor-sidebar-close svg {
    transition: transform 0.25s ease, stroke 0.25s ease;
}

.vendor-back-btn:hover svg,
.vendor-sidebar-close:hover svg {
    transform: scale(1.1);
    stroke: #111;
}


//* ==============================
   Vertikala linjer centrerade
============================== */
.vendor-sidebar-header {
    position: relative; /* säkerställ att linjer kan positioneras */
}

/* Linje vid back-knappen (vänster) */
.vendor-sidebar-header .back-line {
    position: absolute;
    left: 66px;  /* justera för desktop */
    width: 1px;
    height: calc(100% - 0px); /* tar hänsyn till padding */
    top: 52%;
    transform: translateY(-50%);
    background-color: rgba(0,0,0,0.15);
}

/* Linje vid close-knappen (höger) */
.vendor-sidebar-header .close-line {
    position: absolute;
    right: 66px; /* justera för desktop */
    width: 1px;
    height: calc(100% - -3px);
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0,0,0,0.15);
}

/* RESPONSIVT */
@media (max-width: 768px) {
    .vendor-sidebar-header .back-line { left: 44px; height: calc(100% - 1px); }
    .vendor-sidebar-header .close-line { right: 44px; height: calc(100% - 1px); }
}
@media (max-width: 480px) {
    .vendor-sidebar-header .back-line { left: 54px; height: calc(100% - 1px); }
    .vendor-sidebar-header .close-line { right: 54px; height: calc(100% - 1px); }
}

/* Dölj back-linje och knapp i root */
.vendor-sidebar.root .vendor-back-btn,
.vendor-sidebar.root .vendor-sidebar-header .back-line {
    display: none !important;
}

/* Visa back-linje och knapp i underkategori */
body.category .vendor-sidebar.root .vendor-back-btn.show,
body.category .vendor-sidebar.root .vendor-sidebar-header .back-line {
    display: block !important;
}


/* Stängknappen: samma höjd överallt */
.vendor-sidebar-close {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    position: relative;
}

/* SVG-ikonen centrerad */
.vendor-sidebar-close svg {
    width: 26px;
    height: 26px;
    stroke: #333;
}

/* Hover-effekt */
.vendor-sidebar-close:hover svg {
    transform: scale(1.1);
    stroke: #111;
}

/* Pseudo-element hover-effekt */
.vendor-sidebar-close::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.35s ease;
    pointer-events: none;
}

.vendor-sidebar-close:hover::before {
    width: 120%;
    height: 120%;
    background: rgba(0, 0, 0, 0.12);
}

/* Responsivt: behåll samma höjd på mobil */
@media (max-width: 768px) {
    .vendor-sidebar-close {
        width: 44px;
        height: 44px;
    }

    .vendor-sidebar-close svg {
        width: 26px;
        height: 26px;
    }
}





/* Kategoriikoner – tunn, neutral outline-stil enligt referensbilden */
.vendor-menu-link svg.menu-icon {
    width: 24px !important;
    height: 24px !important;
    flex: 0 0 24px;
    fill: none !important;
    stroke: currentColor;
    stroke-width: 1.35;
    color: #777;
}
.vendor-menu-link:hover svg.menu-icon { color: #444; }

/* Endast kategoriikoner: större och något bredare. Meny, text och radhöjd lämnas oförändrade. */
.vendor-menu-link svg.menu-icon,
.vendor-menu-link img.menu-icon,
.vendor-menu-icon {
    width: 30px !important;
    height: 30px !important;
    min-width: 38px !important;
    flex: 0 0 38px !important;
    object-fit: contain;
}

/* =========================================================
   UNDERSIDOR / UNDERKATEGORIER
   Samma fulla menybredd som huvudmenyn, med tydligare rader
   och en rubrik som inte krockar med tillbaka/stäng-knappar.
========================================================= */
.vendor-sidebar:not(.root) .vendor-sidebar-header {
    box-sizing: border-box;
    width: 100%;
    gap: 8px;
}

.vendor-sidebar:not(.root) .vendor-sidebar-header h3#sidebar-title {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 17px;
    line-height: 1.25;
    text-align: left;
}

.vendor-sidebar:not(.root) .vendor-sidebar-header h3#sidebar-title a,
.vendor-sidebar:not(.root) .vendor-sidebar-header h3#sidebar-title span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vendor-sidebar:not(.root) #vendor-menu-container,
.vendor-sidebar:not(.root) #vendor-menu-container > ul.vendor-menu {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
}

.vendor-sidebar:not(.root) #vendor-menu-container > ul.vendor-menu > .vendor-menu-item {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #dedede;
}

.vendor-sidebar:not(.root) #vendor-menu-container > ul.vendor-menu > .vendor-menu-item > .vendor-menu-link {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 42px;
    padding: 6px 16px;
    gap: 8px;
    border-radius: 0;
    line-height: 1.2;
    font-size: 14px;
    overflow-wrap: anywhere;
}

.vendor-sidebar:not(.root) #vendor-menu-container > ul.vendor-menu > .vendor-menu-item.se-all,
.vendor-sidebar:not(.root) #vendor-menu-container > ul.vendor-menu > .vendor-menu-item.see-all {
    background: #f7f7f7;
}

.vendor-sidebar:not(.root) #vendor-menu-container > ul.vendor-menu > .vendor-menu-item.se-all > .vendor-menu-link,
.vendor-sidebar:not(.root) #vendor-menu-container > ul.vendor-menu > .vendor-menu-item.see-all > .vendor-menu-link {
    min-height: 42px;
    padding: 6px 16px;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 600;
    color: #333;
}

@media (max-width: 768px) {
    .vendor-sidebar:not(.root) .vendor-sidebar-header {
        padding: 6px 8px;
    }

    .vendor-sidebar:not(.root) .vendor-sidebar-header h3#sidebar-title {
        font-size: 16px;
    }

    .vendor-sidebar:not(.root) #vendor-menu-container > ul.vendor-menu > .vendor-menu-item > .vendor-menu-link {
        min-height: 52px !important;
        padding: 10px 14px;
        gap: 8px;
        font-size: 14px;
        line-height: 1.2;
        align-items: center;
    }

    .vendor-sidebar:not(.root) #vendor-menu-container > ul.vendor-menu > .vendor-menu-item.se-all > .vendor-menu-link,
    .vendor-sidebar:not(.root) #vendor-menu-container > ul.vendor-menu > .vendor-menu-item.see-all > .vendor-menu-link {
        min-height: 52px !important;
        padding: 10px 14px;
    }
}


/* =========================================================
   HUVUDKATEGORIER – kompaktare rader
   Ikoner behåller 30x30 px och 38 px reserverad bredd.
========================================================= */
.vendor-sidebar.root #vendor-menu-container > ul.vendor-menu > .vendor-menu-item {
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid #dedede;
}

.vendor-sidebar.root #vendor-menu-container > ul.vendor-menu > .vendor-menu-item > .vendor-menu-link {
    box-sizing: border-box;
    min-height: 42px !important;
    padding: 6px 16px !important;
    gap: 8px !important;
    border-radius: 0 !important;
    line-height: 1.2;
    font-size: 14px;
}

.vendor-sidebar.root #vendor-menu-container > ul.vendor-menu > .vendor-menu-item > .vendor-menu-link > span:first-of-type {
    line-height: 1.25;
}

.vendor-sidebar.root #vendor-menu-container > ul.vendor-menu > .vendor-menu-item > .vendor-menu-link .submenu-arrow {
    margin-left: auto;
    flex: 0 0 auto;
}

@media (max-width: 768px) {
    .vendor-sidebar.root #vendor-menu-container > ul.vendor-menu > .vendor-menu-item > .vendor-menu-link {
        min-height: 42px !important;
        padding: 6px 14px !important;
        gap: 8px !important;
        font-size: 14px;
    }
}


/* Smart category search – searches all category levels without changing menu navigation. */
.vendor-sidebar-search {
    position: sticky;
    top: 56px;
    z-index: 9;
    background-clip: padding-box;
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 10px 14px 8px;
    padding: 0 12px;
    min-height: 42px;
    border: 1px solid #e2e4e7;
    border-radius: 10px;
    background: #f5f6f7;
    box-sizing: border-box;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.vendor-sidebar-search:focus-within {
    background: #fff;
    border-color: #8b98a5;
    box-shadow: 0 0 0 3px rgba(70, 90, 110, .09);
}
.vendor-sidebar-search-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    fill: none;
    stroke: #7b838c;
    stroke-width: 1.7;
    stroke-linecap: round;
}
.vendor-sidebar-search input {
    width: 100%;
    min-width: 0;
    height: 40px;
    padding: 0;
    margin: 0;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    color: #20252b;
    font-size: 14px;
}
.vendor-sidebar-search input::placeholder { color: #858c94; opacity: 1; }
.vendor-sidebar-search button {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #e9ecef;
    color: #4b535b;
    font-size: 20px;
    line-height: 24px;
    cursor: pointer;
}
.vendor-sidebar-search button[hidden] { display: none !important; }
.vendor-sidebar:not(.root) .vendor-sidebar-search { display: none; }
.vendor-menu-search-results { margin: 0; padding: 0; }
.vendor-menu-search-result { margin: 0 !important; padding: 0 !important; border-bottom: 1px solid #e8e8e8; }
.vendor-menu-search-result .vendor-menu-link { min-height: 42px; padding: 6px 16px; gap: 8px; border-radius: 0; }
.vendor-menu-search-result .menu-icon { width: 30px !important; height: 30px !important; min-width: 38px !important; flex: 0 0 38px !important; color: #6f7780; }
.vendor-search-result-copy { display: flex; flex: 1 1 auto; min-width: 0; flex-direction: column; gap: 1px; }
.vendor-search-result-copy strong { font-size: 14px; font-weight: 600; line-height: 1.25; }
.vendor-search-result-copy small { overflow: hidden; color: #858b92; font-size: 10px; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.vendor-search-result-arrow { margin-left: auto; color: #8b9299; font-size: 22px; line-height: 1; transition: transform .16s ease, color .16s ease; }
.vendor-menu-search-result .vendor-menu-link:hover .vendor-search-result-arrow { transform: translateX(2px); color: #303840; }
.vendor-search-empty { display: flex; flex-direction: column; gap: 4px; padding: 22px 16px; color: #333; font-size: 14px; }
.vendor-search-empty span { color: #858b92; font-size: 12px; }
.vendor-search-count { padding: 9px 16px 7px; color: #7b838b; font-size: 11px; letter-spacing: .01em; border-bottom: 1px solid #eef0f2; }
.vendor-menu-search-result .vendor-menu-link { transition: background .16s ease; }
.vendor-menu-search-result .vendor-menu-link:hover { background: #f5f7f8; }
.vendor-menu-search-result .vendor-menu-link:focus-visible { outline: 2px solid #8998a6; outline-offset: -2px; background: #f5f7f8; }
@media (max-width: 768px) {
    .vendor-sidebar-search { margin: 8px 10px 6px; min-height: 40px; }
    .vendor-sidebar-search input { height: 38px; font-size: 14px; }
}

/* Clean, restrained navigation polish */
.vendor-sidebar-search {
    border-color: #e7e9ec;
    border-radius: 8px;
    background: #f8f9fa;
    box-shadow: none;
}
.vendor-sidebar-search:focus-within {
    border-color: #aeb7c0;
    background: #fff;
    box-shadow: 0 0 0 2px rgba(70, 85, 100, .06);
}
.vendor-menu-search-result { border-bottom-color: #f0f1f2; }
.vendor-menu-search-result:last-of-type { border-bottom: 0; }
.vendor-menu-search-result .vendor-menu-link:hover { background: #f8f9fa; }
.vendor-search-result-copy strong { color: #252a30; font-weight: 550; }
.vendor-search-result-copy small { color: #9299a1; }
.vendor-search-count { border-bottom-color: #f2f3f4; }
.vendor-search-empty { padding: 18px 16px; }
.vendor-search-result-arrow { font-size: 20px; }


/* Smart Navigation PRO: accessible, restrained search refinements */
.vendor-menu-search-result mark {
    padding: 0 1px;
    color: inherit;
    background: #fff1c7;
    border-radius: 2px;
}
.vendor-menu-search-result .vendor-menu-link:focus-visible {
    outline: 2px solid #7b8794;
    outline-offset: -2px;
    background: #f6f7f8;
}
.vendor-menu-search-results .vendor-search-count {
    user-select: none;
}
@media (prefers-reduced-motion: reduce) {
    .vendor-menu-search-result .vendor-menu-link,
    .vendor-menu-search-result .vendor-search-result-arrow {
        transition: none !important;
    }
}


/* Compact shortcuts for the three most recently visited categories. */
.vendor-sidebar-recent { padding: 10px 16px 9px; border-bottom: 1px solid #eeeeee; background: #fff; }
.vendor-sidebar-recent[hidden] { display: none !important; }
.vendor-sidebar-recent-heading { margin: 0 0 7px; color: #7a8088; font-size: 11px; font-weight: 600; letter-spacing: .045em; line-height: 1.3; text-transform: uppercase; }
.vendor-sidebar-recent-list { display: flex; flex-wrap: wrap; gap: 6px; }
.vendor-sidebar-recent-link { display: inline-flex; align-items: center; min-height: 28px; max-width: 100%; padding: 4px 10px; border: 1px solid #e8eaed; border-radius: 5px; background: #fafbfc; color: #343a40; font-size: 12px; line-height: 1.25; text-decoration: none; transition: background-color .15s ease, border-color .15s ease; }
.vendor-sidebar-recent-link:hover, .vendor-sidebar-recent-link:focus-visible { border-color: #cfd5dc; background: #f1f3f5; color: #171a1d; text-decoration: none; outline: none; }

/* Mobile-only refinements: left-aligned title, stable search scale and balanced category rows.
   Desktop styles remain untouched. */
@media (max-width: 768px) {
    .vendor-sidebar-header {
        box-sizing: border-box;
        min-height: 56px;
        padding: 6px 8px !important;
        gap: 0;
    }

    .vendor-sidebar.root .vendor-sidebar-header h3#sidebar-title,
    .vendor-sidebar:not(.root) .vendor-sidebar-header h3#sidebar-title {
        flex: 1 1 auto;
        min-width: 0;
        margin: 0 !important;
        padding: 0 8px;
        text-align: left !important;
        justify-content: flex-start;
        font-size: 17px;
        line-height: 1.2;
    }

    .vendor-sidebar-search {
        box-sizing: border-box;
        margin: 8px 10px 7px;
        min-height: 44px;
        padding: 0 12px;
    }

    /* 16px prevents iOS Safari from automatically zooming the page on input focus. */
    .vendor-sidebar-search input {
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        height: 44px;
        font-size: 16px !important;
        line-height: 1.25;
        -webkit-text-size-adjust: 100%;
        touch-action: manipulation;
    }

    .vendor-sidebar.root #vendor-menu-container > ul.vendor-menu > .vendor-menu-item > .vendor-menu-link {
        min-height: 52px !important;
        padding: 10px 14px !important;
        align-items: center;
        line-height: 1.2;
    }

    .vendor-sidebar.root #vendor-menu-container > ul.vendor-menu > .vendor-menu-item > .vendor-menu-link > span:first-of-type {
        line-height: 1.2;
    }
}


/* SidebarPro Smart Auto Placement */
.sidebarpro-auto-placed {
    display: inline-flex !important;
    align-items: center !important;
    align-self: stretch;
    flex: 0 0 auto;
    margin: 0 !important;
    min-height: 42px;
    padding: 8px 16px !important;
    position: relative !important;
    inset: auto !important;
    z-index: 2;
    vertical-align: middle;
}


/* SidebarPro responsive fallback: keep its own trigger available on mobile
   unless JS has found a native theme menu (which hides it inline). */
#sidebarToggle {
    display: inline-flex !important;
}
@media (max-width: 767px) {
    #sidebarToggle {
        display: inline-flex !important;
        position: relative;
        margin: 0;
        padding: 8px 12px;
        min-height: 40px;
        align-items: center;
        justify-content: center;
        z-index: 5;
    }
    .sidebar-toggle-wrapper {
        display: flex;
        width: auto;
        max-width: 100%;
        margin: 0;
        padding: 0;
        align-items: center;
    }
}