/* ==========================================================================
   Pricetracker Side Menu — Bästa.nu
   Multi-column desktop / slide-push mobile.
   Uses pt-sm__ prefix to avoid Astra collisions.
   ========================================================================== */

.pt-side-menu,
.pt-side-menu__panel,
.pt-side-menu__columns,
.pt-sm__col {
    --ptsh-bg: #ffffff;
    --ptsh-text: #1b3152;
    --ptsh-muted: #6b7280;
    --ptsh-border: #e5e7eb;
    --ptsh-active-bg: #f3f4f6;
    --ptsh-accent: #1b3152;
    --ptsh-col-width: 300px;
    --ptsm-root-width: 340px;
}

/* ---------- SVG sprite icons (hidden definitions) ---------- */
.pt-sm-sprites { position: absolute; width: 0; height: 0; overflow: hidden; }

.pt-side-menu { display: none; }
.pt-side-menu.is-open { display: block; }

.pt-side-menu__backdrop {
    position: fixed; inset: 0; z-index: 9998;
    background: rgba(0,0,0,.35); opacity: 0;
    transition: opacity .2s ease;
}
.pt-side-menu.is-open .pt-side-menu__backdrop { opacity: 1; }

.pt-side-menu__panel {
    position: fixed; top: 0; left: 0; z-index: 9999; height: 100dvh;
    display: flex; flex-direction: column; background: #fff;
    box-shadow: 4px 0 24px rgba(15,23,42,.16);
    transform: translateX(-100%);
    opacity: .98;
    transition: transform .25s ease, opacity .25s ease;
    overflow: hidden; width: var(--ptsm-panel-width, 340px);
}
.pt-side-menu.is-open .pt-side-menu__panel {
    transform: translateX(0);
    opacity: 1;
    animation: pt-side-menu-panel-in .25s ease both;
}

/* Top utility row */
.pt-side-menu__utility {
    display: flex;
    align-items: center;
    padding: .75rem;
    border-bottom: 1px solid var(--ptsh-border);
    background: #fff;
    flex-shrink: 0;
}

.pt-side-menu__utility-link,
a.pt-side-menu__utility-link,
button.pt-side-menu__utility-link,
a.pt-side-menu__utility-link:hover,
a.pt-side-menu__utility-link:focus,
a.pt-side-menu__utility-link:visited,
button.pt-side-menu__utility-link:hover,
button.pt-side-menu__utility-link:focus {
    display: flex !important;
    align-items: center !important;
    gap: .75rem !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: .15rem !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: var(--ptsh-text) !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transform: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    cursor: pointer !important;
    text-align: left !important;
}

.pt-side-menu__utility-link:hover,
.pt-side-menu__utility-link:focus {
    background: #f9fafb !important;
}

.pt-side-menu__utility-icon {
    width: 42px !important;
    height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    border: 1px solid var(--ptsh-border) !important;
    border-radius: 999px !important;
    background: #f9fafb !important;
    color: var(--ptsh-text) !important;
}

.pt-side-menu__utility-icon svg {
    width: 18px !important;
    height: 18px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

/* Avatar variant — shown when the user is logged in. Replaces the
   generic silhouette SVG with their first initial on a soft pastel
   gradient (matches /mitt-konto/ sidebar and onboarding-popup style).
   !important mirrors the rest of this file so theme button rules
   can't bleed in. */
.pt-side-menu__utility-icon--avatar {
    background: linear-gradient(135deg, #e0f2fe 0%, #ede9fe 100%) !important;
    border-color: transparent !important;
    color: #2563eb !important;
}

.pt-side-menu__utility-initial {
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    color: #2563eb !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
}

.pt-side-menu__utility-text {
    flex: 1 !important;
    min-width: 0 !important;
}

.pt-side-menu__utility-title {
    display: block !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    color: var(--ptsh-text) !important;
}

.pt-side-menu__utility-subtitle {
    display: block !important;
    margin-top: 2px !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    color: var(--ptsh-muted) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.pt-side-menu__utility-chevron {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    color: var(--ptsh-muted) !important;
}

/* ---------- Columns ---------- */
.pt-side-menu__columns { display: flex; flex: 1; min-height: 0; overflow: hidden; }

.pt-sm__col {
    width: var(--ptsh-col-width); min-width: var(--ptsh-col-width); height: 100%;
    display: flex; flex-direction: column; overflow: hidden;
    flex-shrink: 0;
    box-shadow: 6px 0 12px -4px rgba(0,0,0,.1); position: relative; z-index: 1;
}
.pt-sm__col:last-child { box-shadow: none; }

/* Scroll endast under kolumnrubrik (.pt-sm__head) */
.pt-sm__scroll {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-width: thin !important;
    scrollbar-color: #d1d5db transparent !important;
}
.pt-sm__scroll::-webkit-scrollbar { width: 5px; }
.pt-sm__scroll::-webkit-scrollbar-track { background: transparent; }
.pt-sm__scroll::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
.pt-sm__scroll::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

.pt-sm__col[data-depth="0"] { width: 340px; min-width: 340px; }

/* ---------- Column header bar ---------- */
.pt-sm__head {
    display: flex !important; align-items: center !important; height: 52px !important; min-height: 52px !important;
    padding: 0 !important; background: #eff6ff !important; color: #000 !important;
    flex-shrink: 0 !important; gap: 0 !important;
     font-size: 15px !important; font-weight: 600 !important;
    letter-spacing: .01em !important; line-height: 1.2 !important;
    border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
}

.pt-sm__head-title {
    flex: 1 !important; min-width: 0 !important; padding: 0 .75rem !important;
    overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
    color: #000 !important;
}

.pt-sm__head-close,
.pt-sm__head-back {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    width: 44px !important; height: 52px !important; flex-shrink: 0 !important;
    cursor: pointer !important; color: #000 !important; opacity: .85 !important;
    border: 0 !important; border-radius: 0 !important; background: transparent !important;
    padding: 0 !important; box-shadow: none !important; transform: none !important;
    appearance: none !important; -webkit-appearance: none !important;
}
.pt-sm__head-close:hover, .pt-sm__head-back:hover { opacity: 1 !important; }

.pt-sm__head-back { display: none !important; }

.pt-sm__x-icon, .pt-sm__back-icon {
    width: 20px !important; height: 20px !important; fill: none !important; stroke: currentColor !important;
    stroke-width: 2 !important; stroke-linecap: round !important;
}

/* ---------- Item list ---------- */
.pt-sm__list { list-style: none !important; margin: 0 !important; padding: 0 !important; }

.pt-sm__item {
    display: flex !important; align-items: center !important; height: 54px !important;
    margin: 0 !important; padding: 0 !important; border-bottom: 1px solid var(--ptsh-border) !important;
    transition: background .1s ease !important;
}
.pt-sm__item:last-child { border-bottom: 0 !important; }
.pt-sm__item:hover { background: var(--ptsh-active-bg) !important; }

/* Link (label part — navigates to page) */
.pt-sm__link,
a.pt-sm__link,
button.pt-sm__link,
a.pt-sm__link:hover,
a.pt-sm__link:focus,
a.pt-sm__link:visited,
button.pt-sm__link:hover,
button.pt-sm__link:focus {
    display: flex !important; align-items: center !important; flex: 1 !important; min-width: 0 !important;
    height: 54px !important; padding: 0 !important; gap: 0 !important;
    color: var(--ptsh-text) !important; text-decoration: none !important;
    font-size: 14px !important; font-weight: 400 !important; line-height: 1.3 !important;
    background: transparent !important; border: 0 !important; box-shadow: none !important;
    transform: none !important; outline: none !important;
     text-align: left !important;
    appearance: none !important; -webkit-appearance: none !important;
}

.pt-sm__link--expand { cursor: pointer !important; }

.pt-sm__item.is-active .pt-sm__link { font-weight: 500 !important; }

/* Icon */
.pt-sm__icon {
    width: 54px !important; height: 54px !important; display: flex !important;
    align-items: center !important; justify-content: center !important; flex-shrink: 0 !important;
}
.pt-sm__icon img { width: 28px !important; height: 28px !important; border-radius: 2px !important; object-fit: contain !important; }
.pt-sm__icon-badge {
    width: 32px !important; height: 32px !important; border-radius: 999px !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
}
/* Guider + Fyndhörnan: ingen bakgrund, bara ikon */
.pt-sm__icon-badge--guide,
.pt-sm__icon-badge--deal {
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.pt-sm__icon-badge--guide { color: #000 !important; }
.pt-sm__icon-badge--deal { color: #b91c1c !important; }

/* Fyndhörnan (root-rad under Guider): luft före avdelare / produktkategorier */
.pt-sm__item--fyndhorn { margin-bottom: 0.4rem !important; }

/* Guider underkolumn: mellanrum under "Se allt" / före första guide-länken */
.pt-sm__list--guides-sub {
    padding-top: 0.65rem !important;
    margin-top: 0 !important;
}
.pt-sm__icon-symbol { width: 18px !important; height: 18px !important; display: block !important; }

/* Label */
.pt-sm__label { flex: 1 !important; min-width: 0 !important; padding: 0 .75rem !important; color: var(--ptsh-text) !important; }
.pt-sm__link:not(:has(.pt-sm__icon)) .pt-sm__label { padding-left: 1rem !important; }

/* Arrow (expand button — opens sub-column) */
.pt-sm__arrow {
    width: 54px !important; height: 54px !important; display: flex !important;
    align-items: center !important; justify-content: center !important; flex-shrink: 0 !important;
    border: 0 !important; cursor: pointer !important;
    background: transparent !important; transition: background .1s ease !important;
    padding: 0 !important; border-radius: 100px !important; box-shadow: none !important;
    appearance: none !important; -webkit-appearance: none !important;
}
.pt-sm__arrow:hover { background: #e2e8f0 !important; }
.pt-sm__item.is-active .pt-sm__arrow { background: #ebf4ff !important; }

.pt-sm__chevron {
    width: 20px !important; height: 20px !important; fill: none !important; stroke: currentColor !important;
    color: var(--ptsh-text) !important;
    stroke-width: 2 !important; stroke-linecap: round !important; stroke-linejoin: round !important;
}

/* ---------- Divider ---------- */
.pt-sm__divider { height: 0; border-bottom: 2px solid var(--ptsh-border); }

/* ---------- View-all ---------- */
.pt-sm__view-all,
a.pt-sm__view-all,
a.pt-sm__view-all:hover,
a.pt-sm__view-all:focus,
a.pt-sm__view-all:visited {
    display: flex !important; align-items: center !important; height: 44px !important;
    padding: 0 1rem !important; margin: 0 !important; border-bottom: 1px solid var(--ptsh-border) !important;
    border-radius: 0 !important; background: #fafafa !important; color: var(--ptsh-accent) !important;
    font-size: 13px !important; font-weight: 600 !important; text-decoration: none !important;
    box-shadow: none !important; transform: none !important;
}
a.pt-sm__view-all:hover { background: var(--ptsh-active-bg) !important; }

/* ==========================================================================
   Desktop
   ========================================================================== */
@media (min-width: 1025px) {
    .pt-side-menu__panel { max-width: min(1240px, 92vw); }
    .pt-side-menu__utility {
        width: min(var(--ptsm-root-width, 340px), 100%);
        max-width: 100%;
        align-self: flex-start;
        box-sizing: border-box;
    }
    .pt-sm__col.is-entering {
        animation: pt-sm-desktop-enter .22s cubic-bezier(.22,.61,.36,1);
        will-change: transform, opacity;
    }
}

@keyframes pt-side-menu-panel-in {
    from {
        transform: translateX(-100%);
        opacity: .98;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes pt-sm-desktop-enter {
    from {
        opacity: 0;
        transform: translateX(-18px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ==========================================================================
   Mobile
   ========================================================================== */
@media (max-width: 1024px) {
    .pt-side-menu__panel { width: min(300px, 85vw); }
    .pt-side-menu__utility {
        width: 100%;
        align-self: stretch;
    }

    .pt-side-menu__columns { position: relative; flex: 1; overflow: hidden; }

    .pt-sm__col {
        position: absolute; inset: 0; width: 100% !important; min-width: 100% !important;
        transform: translateX(100%);
        transition: transform .3s cubic-bezier(.4,0,.2,1);
        box-shadow: none; background: #fff;
    }
    .pt-sm__col.is-current { transform: translateX(0); }
    .pt-sm__col.is-prev { transform: translateX(-100%); }

    .pt-sm__head-back { display: inline-flex !important; }
    .pt-sm__back-icon { stroke: currentColor; }

    .pt-sm__item { height: 48px !important; }
    .pt-sm__link, a.pt-sm__link, button.pt-sm__link { height: 48px !important; }
    .pt-sm__arrow { width: 48px !important; height: 48px !important; }
    .pt-sm__icon { width: 48px !important; height: 48px !important; }
    .pt-sm__icon img { width: 26px !important; height: 26px !important; }

    .pt-sm__head { height: 48px !important; min-height: 48px !important; font-size: 14px !important; }
    .pt-sm__head-close, .pt-sm__head-back { width: 40px !important; height: 48px !important; }
    .pt-sm__x-icon, .pt-sm__back-icon { width: 18px !important; height: 18px !important; }
}

/* ---------- Focus-visible ---------- */
.pt-sm__link:focus-visible,
a.pt-sm__link:focus-visible,
button.pt-sm__link:focus-visible,
.pt-side-menu__utility-link:focus-visible,
.pt-sm__arrow:focus-visible,
.pt-sm__head-close:focus-visible,
.pt-sm__head-back:focus-visible,
a.pt-sm__view-all:focus-visible {
    outline: 2px solid #1d4ed8 !important;
    outline-offset: -2px !important;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .pt-side-menu__panel,
    .pt-side-menu__backdrop,
    .pt-sm__col,
    .pt-sm__arrow,
    .pt-sm__item { transition: none !important; }
}