/* ==============================
   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:36px; height:24px; flex-shrink:0; fill:#0077cc; transition:transform 0.3s, fill 0.3s; }
.vendor-menu-link:hover svg.menu-icon { transform: scale(1.1); fill:#005bb5; }

/* 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: none; }
@media (min-width: 768px) { #sidebarToggle { display: inline-flex; } }

/* ==============================
   Ö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;
    }
}