/* _content/Hedernas/Components/Layout/MainLayout.razor.rz.scp.css */
/* Layout-skalet: alltid kolumn, tar hela h�jden */
.page[b-vvs3x91ejs] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100dvh; /* fyll viewport-h�jd */
}

/* L�t sidinneh�llet ta resterande h�jd under headern */
.site-main[b-vvs3x91ejs],
main[b-vvs3x91ejs] {
    flex: 1;
    display: block;
}

/* (Valfritt) Om du i framtiden l�gger footer h�r i layouten */
footer[b-vvs3x91ejs] {
    flex-shrink: 0;
}

/* Rensa bort allt fr�n template som du inte anv�nder:
   .sidebar, .top-row, ::deep, media queries som g�r .page till row, osv. */
/* _content/Hedernas/Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-nyf9rjx72z] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-nyf9rjx72z] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-nyf9rjx72z] {
    height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-nyf9rjx72z] {
    font-size: 1.1rem;
}

.bi[b-nyf9rjx72z] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-nyf9rjx72z] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-nyf9rjx72z] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-nyf9rjx72z] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.bi-lock-nav-menu[b-nyf9rjx72z] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}

.bi-person-nav-menu[b-nyf9rjx72z] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person' viewBox='0 0 16 16'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z'/%3E%3C/svg%3E");
}

.bi-person-badge-nav-menu[b-nyf9rjx72z] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-badge' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3Cpath d='M4.5 0A2.5 2.5 0 0 0 2 2.5V14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2.5A2.5 2.5 0 0 0 11.5 0h-7zM3 2.5A1.5 1.5 0 0 1 4.5 1h7A1.5 1.5 0 0 1 13 2.5v10.795a4.2 4.2 0 0 0-.776-.492C11.392 12.387 10.063 12 8 12s-3.392.387-4.224.803a4.2 4.2 0 0 0-.776.492V2.5z'/%3E%3C/svg%3E");
}

.bi-person-fill-nav-menu[b-nyf9rjx72z] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-fill' viewBox='0 0 16 16'%3E%3Cpath d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3C/svg%3E");
}

.bi-arrow-bar-left-nav-menu[b-nyf9rjx72z] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-arrow-bar-left' viewBox='0 0 16 16'%3E%3Cpath d='M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5ZM10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5Z'/%3E%3C/svg%3E");
}

.nav-item[b-nyf9rjx72z] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-nyf9rjx72z] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-nyf9rjx72z] {
        padding-bottom: 1rem;
    }

    .nav-item[b-nyf9rjx72z]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-nyf9rjx72z]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-nyf9rjx72z]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable[b-nyf9rjx72z] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-nyf9rjx72z] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-nyf9rjx72z] {
        display: none;
    }

    .nav-scrollable[b-nyf9rjx72z] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* _content/Hedernas/Components/Pages/Admin/Nyheter.razor.rz.scp.css */

/* ===== Nyheter admin (enkel) ===== */
.news-auth[b-ldqvrbflfx], .news-admin[b-ldqvrbflfx] {
    max-width: 800px;
    margin: 1rem auto;
    padding: 0 1rem;
}

.news-form[b-ldqvrbflfx] {
    display: grid;
    gap: .6rem;
    margin: .6rem 0 1rem;
}

    .news-form input[b-ldqvrbflfx], .news-form textarea[b-ldqvrbflfx] {
        width: 100%;
        padding: .6rem .7rem;
        border: 1px solid var(--card-line);
        border-radius: 6px;
        font: inherit;
    }

.news-list[b-ldqvrbflfx] {
    list-style: none;
    padding: 0;
    margin: .6rem 0 2rem;
    display: grid;
    gap: .6rem;
}

    .news-list li[b-ldqvrbflfx] {
        display: flex;
        align-items: start;
        justify-content: space-between;
        gap: .6rem;
        background: var(--card-bg);
        border: 1px solid var(--card-line);
        border-radius: 8px;
        padding: .7rem .8rem;
    }

    .news-list .btn[b-ldqvrbflfx] {
        white-space: nowrap;
    }

.err[b-ldqvrbflfx] {
    color: #b00020;
}


/* Editor i admin */
.news-editor[b-ldqvrbflfx] {
    display: grid;
    gap: .5rem;
}

.news-toolbar[b-ldqvrbflfx] {
    display: flex;
    align-items: center;
    gap: .5rem;
    justify-content: space-between;
}

.btn-mini[b-ldqvrbflfx] {
    border: 1px solid var(--card-line);
    background: var(--card-bg);
    border-radius: 6px;
    padding: .25rem .5rem;
    cursor: pointer;
}

    .btn-mini:hover[b-ldqvrbflfx] {
        background: #fff;
    }

.hint[b-ldqvrbflfx] {
    font-size: .85rem;
    opacity: .8;
}

.preview-toggle[b-ldqvrbflfx] {
    font-size: .9rem;
    opacity: .95;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

.news-textarea[b-ldqvrbflfx] {
    min-height: 140px;
    width: 100%;
    padding: .7rem .8rem;
    border: 1px solid var(--card-line);
    border-radius: 8px;
    font: inherit;
    line-height: 1.5;
    resize: vertical;
    background: #fff;
}

.news-preview[b-ldqvrbflfx] {
    border: 1px dashed var(--card-line);
    border-radius: 8px;
    padding: .7rem .8rem;
    background: #fff;
}

    /* Enkel stil för markdown i preview */
    .news-preview p[b-ldqvrbflfx] {
        margin: 0 0 .6rem;
    }

    .news-preview strong[b-ldqvrbflfx] {
        font-weight: 700;
    }

    .news-preview em[b-ldqvrbflfx] {
        font-style: italic;
    }

    .news-preview ul[b-ldqvrbflfx], .news-preview ol[b-ldqvrbflfx] {
        margin: .4rem 0 .6rem 1.2rem;
    }


/* valfritt – lägg i din admin- eller global-CSS */
.news-form[b-ldqvrbflfx] {
    display: grid;
    gap: .8rem;
    max-width: 780px;
}

.news-textarea[b-ldqvrbflfx] {
    min-height: 120px;
    font-family: system-ui, sans-serif;
}

.news-toolbar[b-ldqvrbflfx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
}

.btn-mini[b-ldqvrbflfx] {
    padding: .2rem .5rem;
    border-radius: 6px;
    border: 1px solid var(--card-line);
    background: #fff;
    cursor: pointer;
}

.news-list[b-ldqvrbflfx] {
    list-style: none;
    padding: 0;
    display: grid;
    gap: 1rem;
    max-width: 900px;
}

    .news-list li[b-ldqvrbflfx] {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        border: 1px solid var(--card-line);
        border-radius: 10px;
        padding: .8rem 1rem;
        background: #fff;
    }

.admin-news-embed .embed[b-ldqvrbflfx] {
    max-width: 620px;
}


.news-admin[b-ldqvrbflfx] {
    max-width: 1100px;
    margin: 0 auto 3rem;
    padding: 0 1rem;
}

.admin-panel[b-ldqvrbflfx] {
    background: #fff;
    border: 1px solid var(--card-line);
    border-radius: 12px;
    overflow: hidden;
    margin: 0 0 1rem;
}

.admin-panel__summary[b-ldqvrbflfx] {
    cursor: pointer;
    font-weight: 700;
    padding: .9rem 1rem;
    background: #f7f7f5;
    border-bottom: 1px solid var(--card-line);
}

.admin-form[b-ldqvrbflfx] {
    padding: 1rem;
}

.row[b-ldqvrbflfx] {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    margin-bottom: .9rem;
}

    .row.two[b-ldqvrbflfx] {
        gap: 1rem;
    }

        .row.two > *[b-ldqvrbflfx] {
            flex: 1;
        }

.input[b-ldqvrbflfx] {
    width: 100%;
    border: 1px solid var(--card-line);
    border-radius: 8px;
    padding: .6rem .7rem;
    font-size: 1rem;
}

    .input.mono[b-ldqvrbflfx] {
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    }

.hint[b-ldqvrbflfx] {
    color: #666;
    font-size: .9rem;
    align-self: flex-end;
}

.actions[b-ldqvrbflfx] {
    display: flex;
    gap: .6rem;
}

.btn[b-ldqvrbflfx] {
    border-radius: 8px;
    padding: .5rem .8rem;
    font-weight: 700;
    border: 1px solid transparent;
    cursor: pointer;
}

.btn--primary[b-ldqvrbflfx] {
    background: var(--green);
    color: #fff;
}

.btn--ghost[b-ldqvrbflfx] {
    background: #f5f5f2;
    border-color: var(--card-line);
}

.btn--danger[b-ldqvrbflfx] {
    background: #fff0f0;
    border: 1px solid #f3c2c2;
    color: #9b1c1c;
}

.admin-list[b-ldqvrbflfx] {
    margin-top: 1rem;
}

.admin-list__header[b-ldqvrbflfx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .6rem;
}

.list-actions[b-ldqvrbflfx] {
    display: flex;
    gap: .5rem;
}

.news-admin-list[b-ldqvrbflfx] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .8rem;
}

.admin-item[b-ldqvrbflfx] {
    border: 1px solid var(--card-line);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}

.bar[b-ldqvrbflfx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .6rem;
    padding: .6rem;
    background: #fbfbf8;
    border-bottom: 1px solid var(--card-line);
}

.left[b-ldqvrbflfx] {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: 1;
}

.right[b-ldqvrbflfx] {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.icon-btn[b-ldqvrbflfx] {
    width: 30px;
    height: 30px;
    border: 1px solid var(--card-line);
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
}

.order-input[b-ldqvrbflfx] {
    width: 90px;
}

.title-input[b-ldqvrbflfx] {
    flex: 1;
    min-width: 180px;
    padding: .4rem .6rem;
    border: 1px solid var(--card-line);
    border-radius: 8px;
}

.thumb[b-ldqvrbflfx] {
    width: 40px;
    height: 28px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--card-line);
}

.edit[b-ldqvrbflfx] {
    padding: 1rem;
}
/* _content/Hedernas/Components/Pages/Butiken.razor.rz.scp.css */
/* Hero */
.butik_hero[b-m96qrcu71m] {
    position: relative;
    height: 60vh;
    background: url("images/butiken.jpg") center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}

.butik_overlay[b-m96qrcu71m] {
    width: 100%;
    text-align: center;
    color: #fff;
    padding: 2rem;
    background: var(--hero-dark);
    backdrop-filter: blur(2px);
    animation: butik_fade-b-m96qrcu71m .8s ease-out forwards;
}

    .butik_overlay h1[b-m96qrcu71m] {
        font-size: clamp(2.5rem, 6vw, 3.5rem);
        margin: 0 0 .6rem;
    }

    .butik_overlay p[b-m96qrcu71m] {
        font-size: 1.2rem;
        margin: 0 0 1.6rem;
    }

/* CTA-knapp i heron (egen klass) */
.butik_btn[b-m96qrcu71m] {
    display: inline-block;
    padding: .9rem 1.8rem;
    background: var(--yellow);
    color: var(--green);
    font-weight: bold;
    border-radius: 4px;
    text-decoration: none;
    transition: transform .2s;
}

    .butik_btn:hover[b-m96qrcu71m] {
        transform: translateY(-3px);
    }

/* Innehåll & grid */
.butik_section[b-m96qrcu71m] {
    padding: 4rem 1rem 6rem;
    text-align: center;
    animation: butik_fade-b-m96qrcu71m .8s ease-out .2s backwards;
}

.butik_intro[b-m96qrcu71m] {
    font-size: 1.1rem;
    line-height: 1.55;
    max-width: 800px;
    margin: 0 auto 3rem;
}

.butik_grid[b-m96qrcu71m] {
    display: grid;
    gap: 1.8rem;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    max-width: 1100px;
    margin: 0 auto;
}

.butik_card[b-m96qrcu71m] {
    background: #fff;
    border: 1px solid #dcd9d4;
    border-radius: 10px;
    padding: 2.2rem 1.4rem 2.6rem;
    box-shadow: 0 2px 4px rgba(0,0,0,.05);
    transition: transform .25s, box-shadow .25s;
    text-align: center;
}

    .butik_card:hover[b-m96qrcu71m] {
        transform: translateY(-8px) scale(1.03);
        box-shadow: 0 8px 18px rgba(0,0,0,.12);
    }

    .butik_card span[b-m96qrcu71m] {
        font-size: 2rem;
    }

    .butik_card h3[b-m96qrcu71m] {
        margin: .8rem 0 .6rem;
        font-size: 1.15rem;
        color: var(--green);
    }

    .butik_card p[b-m96qrcu71m] {
        margin: 0;
        font-size: .97rem;
        line-height: 1.45;
    }

@keyframes butik_fade-b-m96qrcu71m {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* _content/Hedernas/Components/Pages/HittaHit.razor.rz.scp.css */
.find-us[b-2jrmn6ceps] {
    padding: 4rem 1rem 6rem;
    text-align: center;
}

    .find-us h1[b-2jrmn6ceps] {
        font-size: 2.3rem;
        color: var(--green);
        margin-bottom: 1.2rem;
    }

.address[b-2jrmn6ceps] {
    font-size: 1.25rem;
    margin-bottom: 2rem;
}

.map-wrapper[b-2jrmn6ceps] {
    max-width: 900px;
    margin: 0 auto;
    border: 4px solid var(--green);
    border-radius: 8px;
    overflow: hidden;
}

    .map-wrapper iframe[b-2jrmn6ceps] {
        width: 100%;
        height: 450px;
        border: 0;
    }

.maps-link[b-2jrmn6ceps] {
    margin-top: 1rem;
    font-size: 1.05rem;
}

    .maps-link a[b-2jrmn6ceps] {
        color: var(--yellow);
        font-weight: bold;
        text-decoration: underline;
    }
/* _content/Hedernas/Components/Pages/Kategorier/Foder.razor.rz.scp.css */
/* ===== Hero (Foder) ===== */
.cat-hero--foder[b-d1ipt5wplr] {
    position: relative;
    height: 40vh;
    background: url("/images/Page/Foder/1.jpg") center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cat-hero__overlay[b-d1ipt5wplr] {
    width: 100%;
    text-align: center;
    color: #fff;
    padding: 2rem 1rem;
    background: rgba(0,0,0,.42);
    backdrop-filter: blur(1px);
}

    .cat-hero__overlay h1[b-d1ipt5wplr] {
        font-size: clamp(2rem, 5vw, 3rem);
        margin: 0 0 .4rem;
    }

    .cat-hero__overlay p[b-d1ipt5wplr] {
        margin: 0 0 1rem;
    }

/* ===== Intro ===== */
.cat-intro[b-d1ipt5wplr] {
    max-width: 900px;
    margin: 2rem auto 0;
    padding: 0 1rem 1rem;
    text-align: center;
    color: var(--green-dark);
}

/* ===== Rådgivningsruta ===== */
.feed-advice[b-d1ipt5wplr] {
    max-width: 900px;
    margin: .8rem auto 1.8rem;
    padding: .7rem .9rem;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .6rem .8rem;
    align-items: center;
    background: color-mix(in srgb, var(--green) 6%, #fff 94%);
    border: 1px solid color-mix(in srgb, var(--green) 16%, var(--card-line) 84%);
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(0,0,0,.04);
    color: var(--green-dark);
}

.fa-ico[b-d1ipt5wplr] {
    font-size: 1.4rem;
    line-height: 1;
    opacity: .95;
}

.fa-text[b-d1ipt5wplr] {
    margin: 0;
    font-size: .98rem;
    line-height: 1.4;
}

/* =========================================
   Delområden – RIKARE TILES (återbruk av din stil)
========================================= */
.cat-sections--rich[b-d1ipt5wplr] {
    padding: 2.2rem 1rem 1.2rem;
}

.cat-grid[b-d1ipt5wplr] {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    max-width: 1100px;
    margin: 0 auto;
}

/* Accent per underkategori */
.cat-tile[b-d1ipt5wplr] {
    --acc: var(--green);
}

    .cat-tile.is-hast[b-d1ipt5wplr] {
        --acc: #7a5a2e;
    }
    /* jordig brun */
    .cat-tile.is-hund[b-d1ipt5wplr] {
        --acc: #3b6e3f;
    }
    /* djupgrön */
    .cat-tile.is-katt[b-d1ipt5wplr] {
        --acc: #3e8f5c;
    }
    /* trädgårdsgrön */
    .cat-tile.is-tillskott[b-d1ipt5wplr] {
        --acc: #2f6d4b;
    }
    /* skogsgrön */
    .cat-tile.is-stro[b-d1ipt5wplr] {
        --acc: #b58500;
    }
    /* halmgul */
    .cat-tile.is-struppkarr[b-d1ipt5wplr] {
        --acc: #8a5a2f;
    }
/* lantlig brun */

/* Tile – mjuk papperston, subtil skugga */
.cat-tile[b-d1ipt5wplr] {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: .8rem 1rem;
    align-items: center;
    padding: 1rem 1rem 1.05rem;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--card-line) 75%, white 25%);
    background: linear-gradient(0deg, rgba(255,255,255,.92), rgba(255,255,255,.92)), repeating-linear-gradient(0deg, rgba(0,0,0,.012) 0 1px, rgba(0,0,0,0) 1px 3px), radial-gradient(120% 80% at 15% 10%, rgba(0,0,0,.03), transparent 50%);
    box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 8px rgba(0,0,0,.04);
}

    .cat-tile[b-d1ipt5wplr]::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 0;
        width: 6px;
        border-radius: 14px 0 0 14px;
        background: color-mix(in srgb, var(--acc) 70%, white 30%);
        opacity: .9;
    }

    .cat-tile:hover[b-d1ipt5wplr],
    .cat-tile:focus-visible[b-d1ipt5wplr] {
        border-color: color-mix(in srgb, var(--acc) 30%, var(--card-line) 70%);
        box-shadow: 0 10px 22px rgba(0,0,0,.08);
        background: linear-gradient(0deg, rgba(255,255,255,.96), rgba(255,255,255,.96)), repeating-linear-gradient(0deg, rgba(0,0,0,.01) 0 1px, rgba(0,0,0,0) 1px 3px), radial-gradient(120% 80% at 15% 10%, rgba(0,0,0,.02), transparent 50%);
    }

/* Ikon */
.cat-ico[b-d1ipt5wplr] {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 999px;
    color: var(--acc);
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--card-line) 70%, white 30%);
    box-shadow: 0 1px 0 rgba(255,255,255,.9) inset;
}

/* Text */
.cat-h[b-d1ipt5wplr] {
    margin: 0 0 .2rem;
    font-size: 1.15rem;
    color: var(--green);
}

.cat-p[b-d1ipt5wplr] {
    margin: 0;
    font-size: .97rem;
    color: var(--green-dark);
}

/* Chips */
.cat-chips[b-d1ipt5wplr] {
    margin: .55rem 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .4rem;
}

.cat-chip[b-d1ipt5wplr] {
    font-size: .8rem;
    line-height: 1;
    padding: .35rem .55rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--card-line) 70%, white 30%);
    color: color-mix(in srgb, var(--green-dark) 85%, black 15%);
}

/* Pil (visas bara om du gör den klickbar med .cat-tile--link) */
.cat-arrow[b-d1ipt5wplr] {
    display: none;
}

.cat-tile--link .cat-arrow[b-d1ipt5wplr] {
    display: inline-block;
    opacity: 0;
    transform: translateX(-4px);
    transition: transform .15s, opacity .15s;
    color: var(--green);
    font-weight: 600;
}

.cat-tile--link:hover .cat-arrow[b-d1ipt5wplr],
.cat-tile--link:focus-visible .cat-arrow[b-d1ipt5wplr] {
    opacity: 1;
    transform: translateX(0);
}

/* Smalt */
@media (max-width: 520px) {
    .cat-grid[b-d1ipt5wplr] {
        grid-template-columns: 1fr;
    }

    .feed-advice[b-d1ipt5wplr] {
        grid-template-columns: auto 1fr;
    }
}

/* =========================================
   Varumärken – återanvänd din minimal-stil
========================================= */
.brands--minimal[b-d1ipt5wplr] {
    padding: 3rem 1rem 4rem;
    text-align: center;
}

    .brands--minimal h2[b-d1ipt5wplr] {
        font-size: 2rem;
        color: var(--green);
        margin: 0 0 .4rem;
    }

.brands__lead[b-d1ipt5wplr] {
    margin: 0 0 1.6rem;
    color: var(--green-dark);
}

.logo-grid[b-d1ipt5wplr] {
    display: grid;
    gap: .9rem;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    max-width: 1100px;
    margin: 0 auto;
}

    .logo-grid[data-compact="true"][b-d1ipt5wplr] {
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
        gap: .8rem;
    }

.logo-card[b-d1ipt5wplr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .55rem;
    padding: .9rem .9rem 1rem;
    text-decoration: none;
    color: inherit;
    background: linear-gradient(0deg, rgba(255,255,255,.90), rgba(255,255,255,.90)), repeating-linear-gradient(0deg, rgba(0,0,0,.015) 0 1px, rgba(0,0,0,0) 1px 3px), radial-gradient(120% 80% at 20% 10%, rgba(0,0,0,.03), transparent 50%);
    border: 1px solid color-mix(in srgb, var(--card-line) 75%, white 25%);
    border-radius: 10px;
    box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 8px rgba(0,0,0,.04);
    transition: border-color .2s, background-color .2s, box-shadow .2s, filter .2s;
    cursor: pointer;
}

    .logo-card:hover[b-d1ipt5wplr] {
        border-color: color-mix(in srgb, var(--green) 28%, var(--card-line) 72%);
        box-shadow: 0 8px 18px rgba(0,0,0,.08);
        background: linear-gradient(0deg, rgba(255,255,255,.94), rgba(255,255,255,.94)), repeating-linear-gradient(0deg, rgba(0,0,0,.012) 0 1px, rgba(0,0,0,0) 1px 3px), radial-gradient(120% 80% at 20% 10%, rgba(0,0,0,.02), transparent 50%);
    }

.logo-img[b-d1ipt5wplr] {
    max-width: 86%;
    max-height: 46px;
    object-fit: contain;
    filter: none;
    transition: filter .2s ease, opacity .2s ease;
}

.logo-card:hover .logo-img[b-d1ipt5wplr],
.logo-card:focus-visible .logo-img[b-d1ipt5wplr] {
    filter: grayscale(1) contrast(1.05);
}

.logo-grid:hover .logo-card:not(:hover) .logo-img[b-d1ipt5wplr] {
    opacity: .80;
}

.logo-name[b-d1ipt5wplr] {
    font-size: .95rem;
    color: color-mix(in srgb, var(--green-dark) 85%, black 15%);
}

/* =========================================
   Foto-strip – kompakt & enhetlig
========================================= */
.photo-strip[b-d1ipt5wplr] {
    padding: 1rem 0 1.6rem;
    text-align: center;
}

    .photo-strip h2[b-d1ipt5wplr] {
        margin: 0 0 .25rem;
        font-weight: 600;
        font-size: clamp(1.1rem, 2vw, 1.3rem);
        color: color-mix(in srgb, var(--green) 85%, black 15%);
    }

.photo-strip__lead[b-d1ipt5wplr] {
    margin: 0 0 .7rem;
    color: color-mix(in srgb, var(--green-dark) 80%, black 20%);
    font-size: .94rem;
    opacity: .9;
}

.strip[b-d1ipt5wplr] {
    --card-w: clamp(240px, 65vw, 420px);
    --card-h: calc(var(--card-w) * 0.5625);
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: var(--card-w);
    gap: .4rem;
    padding: .25rem .5rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: .5rem;
    -webkit-overflow-scrolling: touch;
    mask-image: none;
    scrollbar-width: none;
}

    .strip[b-d1ipt5wplr]::-webkit-scrollbar {
        display: none;
    }

.shot[b-d1ipt5wplr] {
    width: var(--card-w);
    height: var(--card-h);
    scroll-snap-align: start;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,.06);
    background: #fff;
    overflow: hidden;
    box-shadow: none;
}

    .shot img[b-d1ipt5wplr] {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }

@media (max-width: 520px) {
    .strip[b-d1ipt5wplr] {
        gap: .35rem;
    }
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
    .cat-tile[b-d1ipt5wplr], .logo-card[b-d1ipt5wplr], .cat-tile--link .cat-arrow[b-d1ipt5wplr] {
        transition: none !important;
    }
}
/* _content/Hedernas/Components/Pages/Kategorier/Jarn-bygg.razor.rz.scp.css */
/* ===== Hero (Järn & Bygg) ===== */
.cat-hero--jarn[b-i6fild4ui6] {
    position: relative;
    height: 40vh;
    background: url("/images/page/järn/4.jpg") center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cat-hero__overlay[b-i6fild4ui6] {
    width: 100%;
    text-align: center;
    color: #fff;
    padding: 2rem 1rem;
    background: rgba(0,0,0,.42);
    backdrop-filter: blur(1px);
}

    .cat-hero__overlay h1[b-i6fild4ui6] {
        font-size: clamp(2rem,5vw,3rem);
        margin: 0 0 .4rem;
    }

    .cat-hero__overlay p[b-i6fild4ui6] {
        margin: 0 0 1rem;
    }

/* ===== Intro ===== */
.cat-intro[b-i6fild4ui6] {
    max-width: 900px;
    margin: 2rem auto 0;
    padding: 0 1rem 1rem;
    text-align: center;
    color: var(--green-dark);
}

/* ===== Rådgivningsruta ===== */
.build-advice[b-i6fild4ui6] {
    max-width: 900px;
    margin: .9rem auto 1.8rem;
    padding: .7rem .95rem;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .6rem .8rem;
    align-items: center;
    background: color-mix(in srgb, var(--green) 6%, #fff 94%);
    border: 1px solid color-mix(in srgb, var(--green) 16%, var(--card-line) 84%);
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(0,0,0,.04);
    color: var(--green-dark);
}

.ba-ico[b-i6fild4ui6] {
    font-size: 1.35rem;
    line-height: 1;
    opacity: .95;
}

.ba-text[b-i6fild4ui6] {
    margin: 0;
    font-size: .98rem;
    line-height: 1.4;
}

/* ===== Delområden – rika tiles ===== */
.cat-sections--rich[b-i6fild4ui6] {
    padding: 2.2rem 1rem 1.2rem;
}

.cat-grid[b-i6fild4ui6] {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    max-width: 1100px;
    margin: 0 auto;
}

/* Accent per kategori (järn/bygg-palett) */
.cat-tile[b-i6fild4ui6] {
    --acc: var(--green);
}

    .cat-tile.is-skruv[b-i6fild4ui6] {
        --acc: #2f6d4b;
    }
    /* skogsgrön */
    .cat-tile.is-marksten[b-i6fild4ui6] {
        --acc: #8a4b2f;
    }
    /* tegel/marksten */
    .cat-tile.is-skalblock[b-i6fild4ui6] {
        --acc: #5d6b73;
    }
    /* betong/gråblå */
    .cat-tile.is-prefab[b-i6fild4ui6] {
        --acc: #7a5a2e;
    }
    /* jordig brun */
    .cat-tile.is-dran[b-i6fild4ui6] {
        --acc: #3e8f5c;
    }
    /* trädgårdsgrön */
    .cat-tile.is-betong[b-i6fild4ui6] {
        --acc: #6b6b6b;
    }
    /* betonggrå */
    .cat-tile.is-tak[b-i6fild4ui6] {
        --acc: #b25b13;
    }
    /* taktegel/terracotta */
    .cat-tile.is-fonster[b-i6fild4ui6] {
        --acc: #3b6e9a;
    }
/* sval blå */

/* Tile – mjuk papperston, subtil skugga */
.cat-tile[b-i6fild4ui6] {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: .8rem 1rem;
    align-items: center;
    padding: 1rem 1rem 1.05rem;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--card-line) 75%, white 25%);
    background: linear-gradient(0deg, rgba(255,255,255,.92), rgba(255,255,255,.92)), repeating-linear-gradient(0deg, rgba(0,0,0,.012) 0 1px, rgba(0,0,0,0) 1px 3px), radial-gradient(120% 80% at 15% 10%, rgba(0,0,0,.03), transparent 50%);
    box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 8px rgba(0,0,0,.04);
}

    .cat-tile[b-i6fild4ui6]::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 0;
        width: 6px;
        border-radius: 14px 0 0 14px;
        background: color-mix(in srgb, var(--acc) 70%, white 30%);
        opacity: .9;
    }

    .cat-tile:hover[b-i6fild4ui6], .cat-tile:focus-visible[b-i6fild4ui6] {
        border-color: color-mix(in srgb, var(--acc) 30%, var(--card-line) 70%);
        box-shadow: 0 10px 22px rgba(0,0,0,.08);
        background: linear-gradient(0deg, rgba(255,255,255,.96), rgba(255,255,255,.96)), repeating-linear-gradient(0deg, rgba(0,0,0,.01) 0 1px, rgba(0,0,0,0) 1px 3px), radial-gradient(120% 80% at 15% 10%, rgba(0,0,0,.02), transparent 50%);
    }

/* Ikon */
.cat-ico[b-i6fild4ui6] {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 999px;
    color: var(--acc);
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--card-line) 70%, white 30%);
    box-shadow: 0 1px 0 rgba(255,255,255,.9) inset;
}

/* Text */
.cat-h[b-i6fild4ui6] {
    margin: 0 0 .2rem;
    font-size: 1.15rem;
    color: var(--green);
}

.cat-p[b-i6fild4ui6] {
    margin: 0;
    font-size: .97rem;
    color: var(--green-dark);
}

/* Chips */
.cat-chips[b-i6fild4ui6] {
    margin: .55rem 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .4rem;
}

.cat-chip[b-i6fild4ui6] {
    font-size: .8rem;
    line-height: 1;
    padding: .35rem .55rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--card-line) 70%, white 30%);
    color: color-mix(in srgb, var(--green-dark) 85%, black 15%);
}

/* Pil visas om du gör artikeln klickbar som länk-container */
.cat-arrow[b-i6fild4ui6] {
    display: none;
}

.cat-tile--link .cat-arrow[b-i6fild4ui6] {
    display: inline-block;
    opacity: 0;
    transform: translateX(-4px);
    transition: transform .15s, opacity .15s;
    color: var(--green);
    font-weight: 600;
}

.cat-tile--link:hover .cat-arrow[b-i6fild4ui6],
.cat-tile--link:focus-visible .cat-arrow[b-i6fild4ui6] {
    opacity: 1;
    transform: translateX(0);
}

/* ===== Prisnotis ===== */
.price-note[b-i6fild4ui6] {
    max-width: 900px;
    margin: .8rem auto 2.2rem;
    padding: .7rem .95rem;
    background: linear-gradient(0deg, rgba(255,255,240,.92), rgba(255,255,240,.92));
    border: 1px dashed color-mix(in srgb, var(--yellow) 40%, #c3b36a 60%);
    border-radius: 12px;
    color: color-mix(in srgb, var(--green-dark) 85%, black 15%);
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

.price-note__text[b-i6fild4ui6] {
    margin: 0;
    font-size: .98rem;
}

/* ===== Foto-strip (återanvänder din kompakta variant) ===== */
.photo-strip[b-i6fild4ui6] {
    padding: 1rem 0 1.6rem;
    text-align: center;
}

    .photo-strip h2[b-i6fild4ui6] {
        margin: 0 0 .25rem;
        font-weight: 600;
        font-size: clamp(1.1rem, 2vw, 1.3rem);
        color: color-mix(in srgb, var(--green) 85%, black 15%);
    }

.photo-strip__lead[b-i6fild4ui6] {
    margin: 0 0 .7rem;
    color: color-mix(in srgb, var(--green-dark) 80%, black 20%);
    font-size: .94rem;
    opacity: .9;
}

.strip[b-i6fild4ui6] {
    --card-w: clamp(240px, 65vw, 420px);
    --card-h: calc(var(--card-w) * 0.5625);
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: var(--card-w);
    gap: .4rem;
    padding: .25rem .5rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: .5rem;
    -webkit-overflow-scrolling: touch;
    mask-image: none;
    scrollbar-width: none;
}

    .strip[b-i6fild4ui6]::-webkit-scrollbar {
        display: none;
    }

.shot[b-i6fild4ui6] {
    width: var(--card-w);
    height: var(--card-h);
    scroll-snap-align: start;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,.06);
    background: #fff;
    overflow: hidden;
    box-shadow: none;
}

    .shot img[b-i6fild4ui6] {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }

@media (max-width:520px) {
    .cat-grid[b-i6fild4ui6] {
        grid-template-columns: 1fr;
    }

    .strip[b-i6fild4ui6] {
        gap: .35rem;
    }
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion:reduce) {
    .cat-tile[b-i6fild4ui6], .cat-tile--link .cat-arrow[b-i6fild4ui6] {
        transition: none !important;
    }
}

.cat-tile.is-oljor[b-i6fild4ui6] {
    --acc: #a5682a;
}
/* varm “oljebärnstens”-ton */
/* _content/Hedernas/Components/Pages/Kategorier/Skog-tradgard.razor.rz.scp.css */
/* =========================================
   Skog & Trädgård – scoped CSS
   Hero + Intro + Delområden (rika tiles) + Varumärken
========================================= */

/* ===== Hero ===== */
.cat-hero[b-f8sv02jikq] {
    position: relative;
    height: 40vh;
    background: url("/images/Page/Skog/6.jpg") center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cat-hero__overlay[b-f8sv02jikq] {
    width: 100%;
    text-align: center;
    color: #fff;
    padding: 2rem 1rem;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(1px);
}

    .cat-hero__overlay h1[b-f8sv02jikq] {
        font-size: clamp(2rem, 5vw, 3rem);
        margin: 0 0 .4rem;
    }

    .cat-hero__overlay p[b-f8sv02jikq] {
        margin: 0 0 1rem;
    }

/* ===== Intro ===== */
.cat-intro[b-f8sv02jikq] {
    max-width: 900px;
    margin: 2rem auto 0;
    padding: 0 1rem 1rem;
    text-align: center;
}

/* =========================================
   Delområden – RIKARE TILES
========================================= */
.cat-sections--rich[b-f8sv02jikq] {
    padding: 2.5rem 1rem 1.2rem;
}

.cat-grid[b-f8sv02jikq] {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    max-width: 1100px;
    margin: 0 auto;
}

/* Accent per kategori */
.cat-tile[b-f8sv02jikq] {
    --acc: var(--green);
}

    .cat-tile.is-skog[b-f8sv02jikq] {
        --acc: #2f6d4b;
    }
    /* djupgrön */
    .cat-tile.is-tradgard[b-f8sv02jikq] {
        --acc: #3e8f5c;
    }
    /* trädgårdsgrön */
    .cat-tile.is-lantbruk[b-f8sv02jikq] {
        --acc: #7a5a2e;
    }
    /* jordig brun */
    .cat-tile.is-gas[b-f8sv02jikq] {
        --acc: #b25b13;
    }
/* varm orange */

/* Tile – mjuk papperston, subtil skugga */
.cat-tile[b-f8sv02jikq] {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: .8rem 1rem;
    align-items: center;
    padding: 1rem 1rem 1.05rem;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--card-line) 75%, white 25%);
    background: linear-gradient(0deg, rgba(255,255,255,.92), rgba(255,255,255,.92)), repeating-linear-gradient(0deg, rgba(0,0,0,.012) 0 1px, rgba(0,0,0,0) 1px 3px), radial-gradient(120% 80% at 15% 10%, rgba(0,0,0,.03), transparent 50%);
    box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 8px rgba(0,0,0,.04);
}

    /* Vänster accent */
    .cat-tile[b-f8sv02jikq]::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 0;
        width: 6px;
        border-radius: 14px 0 0 14px;
        background: color-mix(in srgb, var(--acc) 70%, white 30%);
        opacity: .85;
    }

    /* Hover/fokus – subtil lyftning */
    .cat-tile:hover[b-f8sv02jikq],
    .cat-tile:focus-visible[b-f8sv02jikq] {
        border-color: color-mix(in srgb, var(--acc) 28%, var(--card-line) 72%);
        box-shadow: 0 10px 22px rgba(0,0,0,.08);
        background: linear-gradient(0deg, rgba(255,255,255,.96), rgba(255,255,255,.96)), repeating-linear-gradient(0deg, rgba(0,0,0,.01) 0 1px, rgba(0,0,0,0) 1px 3px), radial-gradient(120% 80% at 15% 10%, rgba(0,0,0,.02), transparent 50%);
    }

/* Ikon */
.cat-ico[b-f8sv02jikq] {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 999px;
    color: var(--acc);
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--card-line) 70%, white 30%);
    box-shadow: 0 1px 0 rgba(255,255,255,.9) inset;
}

    .cat-ico svg[b-f8sv02jikq] {
        display: block;
    }

/* Text */
.cat-h[b-f8sv02jikq] {
    margin: 0 0 .2rem;
    font-size: 1.15rem;
    color: var(--green);
}

.cat-p[b-f8sv02jikq] {
    margin: 0;
    font-size: .97rem;
    color: var(--green-dark);
}

/* Chips – små taggar */
.cat-chips[b-f8sv02jikq] {
    margin: .55rem 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .4rem;
}

.cat-chip[b-f8sv02jikq] {
    font-size: .8rem;
    line-height: 1;
    padding: .35rem .55rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--card-line) 70%, white 30%);
    color: color-mix(in srgb, var(--green-dark) 85%, black 15%);
}

/* Pil visas ENDAST för länk-tiles */
.cat-arrow[b-f8sv02jikq] {
    display: none;
}

.cat-tile--link .cat-arrow[b-f8sv02jikq] {
    display: inline-block;
    opacity: 0;
    transform: translateX(-4px);
    transition: transform .15s, opacity .15s;
    color: var(--green);
    font-weight: 600;
}

.cat-tile--link:hover .cat-arrow[b-f8sv02jikq],
.cat-tile--link:focus-visible .cat-arrow[b-f8sv02jikq] {
    opacity: 1;
    transform: translateX(0);
}

/* Smalare skärmar */
@media (max-width: 520px) {
    .cat-grid[b-f8sv02jikq] {
        grid-template-columns: 1fr;
    }

    .cat-tile[b-f8sv02jikq] {
        grid-template-columns: auto 1fr auto;
    }
}

/* =========================================
   Varumärken – logo-vägg, hovrad logga blir svartvit
========================================= */
.brands--minimal[b-f8sv02jikq] {
    padding: 3rem 1rem 5rem;
    text-align: center;
}

    .brands--minimal h2[b-f8sv02jikq] {
        font-size: 2rem;
        color: var(--green);
        margin: 0 0 .4rem;
    }

.brands__lead[b-f8sv02jikq] {
    margin: 0 0 2rem;
    color: var(--green-dark);
}

/* Grid */
.logo-grid[b-f8sv02jikq] {
    display: grid;
    gap: .9rem;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    max-width: 1100px;
    margin: 0 auto;
}
    /* Tätare alternativ: <div class="logo-grid" data-compact="true"> */
    .logo-grid[data-compact="true"][b-f8sv02jikq] {
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
        gap: .8rem;
    }

/* Kort */
.logo-card[b-f8sv02jikq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .55rem;
    padding: .9rem .9rem 1rem;
    text-decoration: none;
    color: inherit;
    background: linear-gradient(0deg, rgba(255,255,255,.90), rgba(255,255,255,.90)), repeating-linear-gradient( 0deg, rgba(0,0,0,.015) 0 1px, rgba(0,0,0,0) 1px 3px ), radial-gradient(120% 80% at 20% 10%, rgba(0,0,0,.03), transparent 50%);
    border: 1px solid color-mix(in srgb, var(--card-line) 75%, white 25%);
    border-radius: 10px;
    box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 8px rgba(0,0,0,.04);
    transition: border-color .2s, background-color .2s, box-shadow .2s, filter .2s;
    cursor: pointer;
}

    .logo-card:hover[b-f8sv02jikq] {
        border-color: color-mix(in srgb, var(--green) 28%, var(--card-line) 72%);
        box-shadow: 0 8px 18px rgba(0,0,0,.08);
        background: linear-gradient(0deg, rgba(255,255,255,.94), rgba(255,255,255,.94)), repeating-linear-gradient( 0deg, rgba(0,0,0,.012) 0 1px, rgba(0,0,0,0) 1px 3px ), radial-gradient(120% 80% at 20% 10%, rgba(0,0,0,.02), transparent 50%);
    }

/* Logga – färg normalt, svartvit på HOVER av kortet */
.logo-img[b-f8sv02jikq] {
    max-width: 86%;
    max-height: 46px;
    object-fit: contain;
    filter: none;
    transition: filter .2s ease, opacity .2s ease;
}

.logo-card:hover .logo-img[b-f8sv02jikq],
.logo-card:focus-visible .logo-img[b-f8sv02jikq] {
    filter: grayscale(1) contrast(1.05);
}
/* Dämpa icke-hovrade loggor svagt när griden hovras */
.logo-grid:hover .logo-card:not(:hover) .logo-img[b-f8sv02jikq] {
    opacity: .80;
}

/* Namn */
.logo-name[b-f8sv02jikq] {
    font-size: .95rem;
    color: color-mix(in srgb, var(--green-dark) 85%, black 15%);
    line-height: 1;
}

/* Compact */
.logo-grid[data-compact="true"] .logo-card[b-f8sv02jikq] {
    padding: .7rem .7rem .8rem;
}

.logo-grid[data-compact="true"] .logo-img[b-f8sv02jikq] {
    max-height: 36px;
}

.logo-grid[data-compact="true"] .logo-name[b-f8sv02jikq] {
    font-size: .9rem;
}

/* ===== Små skärmar ===== */
@media (max-width: 480px) {
    .logo-card[b-f8sv02jikq] {
        padding: 1rem .9rem;
    }
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
    .cat-tile[b-f8sv02jikq],
    .logo-card[b-f8sv02jikq],
    .cat-tile--link .cat-arrow[b-f8sv02jikq] {
        transition: none !important;
    }
}

/* ===== Foto-strip – diskret variant (overrides) ===== */
.photo-strip[b-f8sv02jikq] {
    padding: 1.4rem 0 2.2rem;
    text-align: center;
}

    .photo-strip h2[b-f8sv02jikq] {
        margin: 0 0 .25rem;
        font-weight: 600;
        font-size: clamp(1.1rem, 2vw, 1.35rem);
        color: color-mix(in srgb, var(--green) 85%, black 15%);
    }

.photo-strip__lead[b-f8sv02jikq] {
    margin: 0 0 .8rem;
    color: color-mix(in srgb, var(--green-dark) 80%, black 20%);
    font-size: .95rem;
    opacity: .9;
}

/* Själva remsan – mindre kolumnbredd, mindre gap, ingen maskfade */
.strip[b-f8sv02jikq] {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 65%; /* mobil: visar en bild mestadels */
    gap: .5rem;
    padding: .1rem .5rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: .5rem;
    -webkit-overflow-scrolling: touch;
    mask-image: none; /* ta bort fade i kanterna */
}

@media (min-width: 600px) {
    .strip[b-f8sv02jikq] {
        grid-auto-columns: 45%;
    }
}

@media (min-width: 960px) {
    .strip[b-f8sv02jikq] {
        grid-auto-columns: 30%;
    }
}

/* Dölj scrollbars */
.strip[b-f8sv02jikq] {
    scrollbar-width: none;
}

    .strip[b-f8sv02jikq]::-webkit-scrollbar {
        display: none;
    }

/* Kort – helt utan skuggor och med svagare kant */
.shot[b-f8sv02jikq] {
    position: relative;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,.06);
    overflow: hidden;
    background: #fff; /* ren, låg kontrast */
    box-shadow: none; /* ingen skugga */
    scroll-snap-align: start;
    aspect-ratio: 16 / 9; /* lägre höjd */
}

    .shot.wide[b-f8sv02jikq] {
        aspect-ratio: 16 / 9;
    }

    .shot.tall[b-f8sv02jikq] {
        aspect-ratio: 4 / 5;
    }
    /* fortfarande lite högre, men diskret */

    /* Bild – ingen zoom, bara marginell förändring */
    .shot img[b-f8sv02jikq] {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        transform: none;
        transition: filter .15s ease;
        filter: saturate(1) contrast(1);
    }

    .shot:hover img[b-f8sv02jikq] {
        filter: saturate(1.02) contrast(1.01);
    }
    /* knappt märkbar */

    /* Fokus (tangentbord) – tunn ring för tillgänglighet */
    .shot:focus-within[b-f8sv02jikq] {
        outline: 2px solid color-mix(in srgb, var(--yellow) 40%, white 60%);
        outline-offset: 2px;
    }

/* Extra kompakt på små skärmar */
@media (max-width: 520px) {
    .strip[b-f8sv02jikq] {
        gap: .4rem;
    }
}

/* Reduced motion – inga animationer */
@media (prefers-reduced-motion: reduce) {
    .shot img[b-f8sv02jikq] {
        transition: none !important;
    }
}


/* ===== Foto-strip – uniform & diskret ===== */
.photo-strip[b-f8sv02jikq] {
    padding: 1rem 0 1.6rem;
    text-align: center;
}

    .photo-strip h2[b-f8sv02jikq] {
        margin: 0 0 .25rem;
        font-weight: 600;
        font-size: clamp(1.1rem, 2vw, 1.3rem);
        color: color-mix(in srgb, var(--green) 85%, black 15%);
    }

.photo-strip__lead[b-f8sv02jikq] {
    margin: 0 0 .7rem;
    color: color-mix(in srgb, var(--green-dark) 80%, black 20%);
    font-size: .94rem;
    opacity: .9;
}

/* Samma storlek på alla kort – styr via variabler */
.strip[b-f8sv02jikq] {
    /* Justera EN gång här: behåller exakt lika storlek för alla bilder */
    --card-w: clamp(240px, 65vw, 420px); /* bredd per kort (fluid men lika för alla) */
    --card-h: calc(var(--card-w) * 0.5625); /* 16:9 höjd – samma för alla */

    display: grid;
    grid-auto-flow: column; /* liggande rull */
    grid-auto-columns: var(--card-w); /* alla kolumner exakt samma bredd */
    gap: .4rem;
    padding: .25rem .5rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: .5rem;
    -webkit-overflow-scrolling: touch;
    /* Diskret: inga fades eller synliga scrollbars */
    mask-image: none;
    scrollbar-width: none;
}

    .strip[b-f8sv02jikq]::-webkit-scrollbar {
        display: none;
    }

/* Kort – exakt storlek, nertonat utseende */
.shot[b-f8sv02jikq] {
    width: var(--card-w);
    height: var(--card-h);
    scroll-snap-align: start;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,.06);
    background: #fff;
    overflow: hidden;
    box-shadow: none;
}

    /* Bild – fyll exakt, ingen zoom/animation */
    .shot img[b-f8sv02jikq] {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover; /* beskär jämnt – allt blir exakt lika */
        transform: none;
        transition: none;
    }

/* Riktigt små skärmar: lite tätare */
@media (max-width: 520px) {
    .strip[b-f8sv02jikq] {
        gap: .35rem;
    }
}
/* _content/Hedernas/Components/Pages/Kategorier/Verkstad.razor.rz.scp.css */
/* =========================================
   Maskin & Verkstad – scoped CSS
   Hero + Intro + Rådgivning + Delområden + Varumärken + Foto-remsa
========================================= */

/* ===== Hero ===== */
.cat-hero[b-yng6pbey9j] {
    position: relative;
    height: 40vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #2f4f3a; /* fallback */
}

.cat-hero--maskin-foder[b-yng6pbey9j] {
    background: url("/images/Page/Maskin/3.jpg") center/cover no-repeat;
}

.cat-hero__overlay[b-yng6pbey9j] {
    width: 100%;
    text-align: center;
    color: #fff;
    padding: 2rem 1rem;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(1px);
}

    .cat-hero__overlay h1[b-yng6pbey9j] {
        font-size: clamp(2rem, 5vw, 3rem);
        margin: 0 0 .4rem;
    }

    .cat-hero__overlay p[b-yng6pbey9j] {
        margin: 0;
    }

/* ===== Intro ===== */
.cat-intro[b-yng6pbey9j] {
    max-width: 900px;
    margin: 2rem auto 0;
    padding: 0 1rem 1rem;
    text-align: center;
    color: color-mix(in srgb, var(--green-dark) 85%, black 15%);
}

/* ===== Rådgivningsruta ===== */
.build-advice[b-yng6pbey9j] {
    max-width: 980px;
    margin: 1rem auto 2rem;
    padding: .9rem 1rem;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .7rem 1rem;
    align-items: center;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--card-line) 75%, white 25%);
    background: linear-gradient(0deg, rgba(255,255,255,.94), rgba(255,255,255,.94)), radial-gradient(120% 80% at 15% 10%, rgba(0,0,0,.03), transparent 50%);
    box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 8px rgba(0,0,0,.05);
}

.ba-ico[b-yng6pbey9j] {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--card-line) 70%, white 30%);
    color: var(--green);
    font-size: 1.1rem;
}

.ba-text[b-yng6pbey9j] {
    margin: 0;
    color: var(--green-dark);
}

/* =========================================
   Delområden – rika tiles
========================================= */
.cat-sections--rich[b-yng6pbey9j] {
    padding: 2.5rem 1rem 1.2rem;
}

.cat-grid[b-yng6pbey9j] {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    max-width: 1100px;
    margin: 0 auto;
}

/* Bas */
.cat-tile[b-yng6pbey9j] {
    --acc: var(--green);
}

    .cat-tile.is-verkstad[b-yng6pbey9j] {
        --acc: #2f6d4b;
    }
    /* djupgrön */
    .cat-tile.is-atv[b-yng6pbey9j] {
        --acc: #4a6a4a;
    }
    /* olivgrön */
    .cat-tile.is-slipning[b-yng6pbey9j] {
        --acc: #b88a2e;
    }
    /* mässing */
    .cat-tile.is-forvaring[b-yng6pbey9j] {
        --acc: #3b6b77;
    }
    /* blågrå */
    .cat-tile.is-slap[b-yng6pbey9j] {
        --acc: #3f7aa8;
    }
    /* blå */
    .cat-tile.is-slap-salj[b-yng6pbey9j] {
        --acc: #345a7a;
    }
    /* mörkblå */
    .cat-tile.is-batteri[b-yng6pbey9j] {
        --acc: #8a6b1f;
    }
    /* bärnstensgul */
    .cat-tile.is-oljor[b-yng6pbey9j] {
        --acc: #6f4b2a;
    }
    /* nötbrun */
    .cat-tile.is-tereshire[b-yng6pbey9j] {
        --acc: #5b5b5b;
    }
/* grafit */

.cat-tile[b-yng6pbey9j] {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: .8rem 1rem;
    align-items: center;
    padding: 1rem 1rem 1.05rem;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--card-line) 75%, white 25%);
    background: linear-gradient(0deg, rgba(255,255,255,.94), rgba(255,255,255,.94)), repeating-linear-gradient(0deg, rgba(0,0,0,.012) 0 1px, rgba(0,0,0,0) 1px 3px), radial-gradient(120% 80% at 15% 10%, rgba(0,0,0,.03), transparent 50%);
    box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 8px rgba(0,0,0,.05);
    transition: border-color .2s, background-color .2s, box-shadow .2s, transform .2s;
}

    .cat-tile[b-yng6pbey9j]::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 0;
        width: 6px;
        border-radius: 14px 0 0 14px;
        background: color-mix(in srgb, var(--acc) 70%, white 30%);
        opacity: .9;
    }

    .cat-tile:hover[b-yng6pbey9j], .cat-tile:focus-visible[b-yng6pbey9j] {
        transform: translateY(-2px);
        border-color: color-mix(in srgb, var(--acc) 28%, var(--card-line) 72%);
        box-shadow: 0 10px 22px rgba(0,0,0,.08);
        background: linear-gradient(0deg, rgba(255,255,255,.97), rgba(255,255,255,.97)), repeating-linear-gradient(0deg, rgba(0,0,0,.01) 0 1px, rgba(0,0,0,0) 1px 3px), radial-gradient(120% 80% at 15% 10%, rgba(0,0,0,.02), transparent 50%);
    }

.cat-ico[b-yng6pbey9j] {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 999px;
    color: var(--acc);
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--card-line) 70%, white 30%);
    box-shadow: 0 1px 0 rgba(255,255,255,.9) inset;
    font-size: 1.2rem;
}

.cat-h[b-yng6pbey9j] {
    margin: 0 0 .2rem;
    font-size: 1.15rem;
    color: var(--green);
}

.cat-p[b-yng6pbey9j] {
    margin: 0;
    font-size: .97rem;
    color: var(--green-dark);
}

.cat-chips[b-yng6pbey9j] {
    margin: .55rem 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .4rem;
}

.cat-chip[b-yng6pbey9j] {
    font-size: .8rem;
    line-height: 1;
    padding: .35rem .55rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--card-line) 70%, white 30%);
    color: color-mix(in srgb, var(--green-dark) 85%, black 15%);
}

/* Pil endast om du gör hela kortet klickbart */
.cat-arrow[b-yng6pbey9j] {
    display: none;
}

.cat-tile--link .cat-arrow[b-yng6pbey9j] {
    display: inline-block;
    opacity: 0;
    transform: translateX(-4px);
    transition: transform .15s, opacity .15s;
    color: var(--green);
    font-weight: 600;
}

.cat-tile--link:hover .cat-arrow[b-yng6pbey9j],
.cat-tile--link:focus-visible .cat-arrow[b-yng6pbey9j] {
    opacity: 1;
    transform: translateX(0);
}

@media (max-width:520px) {
    .cat-grid[b-yng6pbey9j] {
        grid-template-columns: 1fr;
    }

    .cat-tile[b-yng6pbey9j] {
        grid-template-columns: auto 1fr auto;
    }
}

/* =========================================
   Varumärken – maskinmärken vi servar
========================================= */
.brands--minimal[b-yng6pbey9j] {
    padding: 3rem 1rem 5rem;
    text-align: center;
}

    .brands--minimal h2[b-yng6pbey9j] {
        font-size: 2rem;
        color: var(--green);
        margin: 0 0 .4rem;
    }

.brands__lead[b-yng6pbey9j] {
    margin: 0 0 2rem;
    color: var(--green-dark);
}

.logo-grid[b-yng6pbey9j] {
    display: grid;
    gap: .9rem;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    max-width: 1100px;
    margin: 0 auto;
}

    .logo-grid[data-compact="true"][b-yng6pbey9j] {
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
        gap: .8rem;
    }

.logo-card[b-yng6pbey9j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .55rem;
    padding: .9rem .9rem 1rem;
    text-decoration: none;
    color: inherit;
    background: linear-gradient(0deg, rgba(255,255,255,.92), rgba(255,255,255,.92));
    border: 1px solid color-mix(in srgb, var(--card-line) 75%, white 25%);
    border-radius: 10px;
    box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 8px rgba(0,0,0,.04);
    transition: border-color .2s, box-shadow .2s, background-color .2s, filter .2s;
}

    .logo-card:hover[b-yng6pbey9j] {
        border-color: color-mix(in srgb, var(--green) 28%, var(--card-line) 72%);
        box-shadow: 0 8px 18px rgba(0,0,0,.08);
    }

.logo-img[b-yng6pbey9j] {
    max-width: 86%;
    max-height: 46px;
    object-fit: contain;
    transition: filter .2s ease, opacity .2s ease;
}

.logo-card:hover .logo-img[b-yng6pbey9j],
.logo-card:focus-visible .logo-img[b-yng6pbey9j] {
    filter: grayscale(1) contrast(1.05);
}

.logo-grid:hover .logo-card:not(:hover) .logo-img[b-yng6pbey9j] {
    opacity: .85;
}

.logo-name[b-yng6pbey9j] {
    font-size: .95rem;
    color: color-mix(in srgb, var(--green-dark) 85%, black 15%);
    line-height: 1;
}

/* =========================================
   Foto-remsa – uniform & diskret
========================================= */
.photo-strip[b-yng6pbey9j] {
    padding: 1rem 0 1.6rem;
    text-align: center;
}

    .photo-strip h2[b-yng6pbey9j] {
        margin: 0 0 .25rem;
        font-weight: 600;
        font-size: clamp(1.1rem, 2vw, 1.3rem);
        color: color-mix(in srgb, var(--green) 85%, black 15%);
    }

.photo-strip__lead[b-yng6pbey9j] {
    margin: 0 0 .7rem;
    color: color-mix(in srgb, var(--green-dark) 80%, black 20%);
    font-size: .94rem;
    opacity: .9;
}

.strip[b-yng6pbey9j] {
    --card-w: clamp(240px, 65vw, 420px);
    --card-h: calc(var(--card-w) * 0.5625); /* 16:9 */
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: var(--card-w);
    gap: .4rem;
    padding: .25rem .5rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: .5rem;
    -webkit-overflow-scrolling: touch;
    mask-image: none;
    scrollbar-width: none;
}

    .strip[b-yng6pbey9j]::-webkit-scrollbar {
        display: none;
    }

.shot[b-yng6pbey9j] {
    width: var(--card-w);
    height: var(--card-h);
    scroll-snap-align: start;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,.06);
    background: #fff;
    overflow: hidden;
}

    .shot img[b-yng6pbey9j] {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }

@media (max-width:520px) {
    .strip[b-yng6pbey9j] {
        gap: .35rem;
    }
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
    .cat-tile[b-yng6pbey9j], .logo-card[b-yng6pbey9j] {
        transition: none !important;
    }
}
/* _content/Hedernas/Components/Pages/Start.razor.rz.scp.css */
/* ===========================
   Hero (start)
=========================== */
.hero[b-h26smphl7r] {
    position: relative;
    height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    margin-bottom: 0;
}

    .hero[b-h26smphl7r]::before {
        content: "";
        position: absolute;
        inset: 0;
        background: url("images/start.jpg") center -120px/cover no-repeat;
        filter: brightness(0.65);
    }

.hero-overlay[b-h26smphl7r] {
    position: relative;
    z-index: 1;
    max-width: 900px;
    padding: 2rem;
    color: var(--bg-light);
    text-shadow: 0 2px 4px rgba(0,0,0,0.55);
}

    .hero-overlay h1[b-h26smphl7r] {
        font-size: clamp(2.3rem, 5vw, 3.5rem);
        margin: 0 0 0.75rem;
    }

    .hero-overlay p[b-h26smphl7r] {
        font-size: 1.2rem;
        margin: 0 0 2rem;
    }

/* ===========================
   Lead (centrerad) + Finansiering
=========================== */
.lead-wrap[b-h26smphl7r] {
    max-width: 980px;
    margin: 0 auto 1.2rem;
    padding: 0 1rem;
    text-align: center;
}

.lead[b-h26smphl7r] {
    margin: 0 0 1rem;
    color: var(--green-dark);
    font-size: clamp(1.05rem, 2.6vw, 1.25rem);
    line-height: 1.55;
    max-width: 60ch;
    margin-left: auto;
    margin-right: auto;
    letter-spacing: .005em;
    -webkit-hyphens: auto;
    hyphens: auto;
    overflow-wrap: break-word;
}

    .lead em[b-h26smphl7r] {
        font-style: normal;
        font-weight: 500;
    }

@media (max-width: 520px) {
    .lead[b-h26smphl7r] {
        font-size: 1rem;
        line-height: 1.45;
        max-width: 36ch;
    }

        .lead br[b-h26smphl7r] {
            display: none;
        }
}

/* Finansiering – subtil infobox */
.finance-note[b-h26smphl7r] {
    max-width: 760px;
    margin: .85rem auto 2rem;
    padding: .55rem .9rem;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: .6rem;
    background: color-mix(in srgb, var(--green) 6%, #fff 94%);
    border: 1px solid color-mix(in srgb, var(--green) 18%, var(--card-line) 82%);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,.04);
    color: var(--green-dark);
}

.fn-icon[b-h26smphl7r] {
    width: 28px;
    height: 28px;
    color: color-mix(in srgb, var(--green) 85%, #000 15%);
    opacity: .9;
}

.fn-text[b-h26smphl7r] {
    margin: 0;
    font-size: .98rem;
    line-height: 1.35;
}

.finance-note a[b-h26smphl7r] {
    color: var(--green);
    text-decoration: underline;
}

@media (max-width: 520px) {
    .finance-note[b-h26smphl7r] {
        margin: .7rem 1rem 1.2rem;
        padding: .55rem .8rem;
        grid-template-columns: 20px 1fr;
        gap: .5rem;
    }

    .fn-icon[b-h26smphl7r] {
        width: 20px;
        height: 20px;
    }

    .fn-text[b-h26smphl7r] {
        font-size: .95rem;
    }
}

/* ===========================
   Kategorier (lika stora kort)
=========================== */
.categories[b-h26smphl7r] {
    padding: 4rem 1rem 3.5rem;
    text-align: center;
}

    .categories .grid[b-h26smphl7r] {
        display: grid;
        gap: 1.2rem;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        align-items: stretch;
        justify-items: stretch;
        max-width: 1200px;
        margin: 0 auto;
    }

@media (max-width: 992px) {
    .categories .grid[b-h26smphl7r] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 380px) {
    .categories .grid[b-h26smphl7r] {
        grid-template-columns: 1fr;
    }
}

.categories .grid > *[b-h26smphl7r] {
    min-width: 0;
}

/* Kort – identisk storlek */
.card[b-h26smphl7r] {
    position: relative;
    background: var(--card-bg);
    border: 1px solid var(--card-line);
    border-radius: 12px;
    height: 180px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.1rem .9rem;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
    transition: transform .2s, box-shadow .2s, border-color .2s, background-color .2s;
    overflow: hidden;
}

    .card:hover[b-h26smphl7r] {
        transform: translateY(-3px);
        box-shadow: 0 10px 22px rgba(0,0,0,.10);
        border-color: color-mix(in srgb, var(--green) 28%, var(--card-line) 72%);
        background: #fff;
    }

.card-img[b-h26smphl7r] {
    width: 64px;
    height: 64px;
    object-fit: contain;
    margin-bottom: .55rem;
    flex: 0 0 auto;
}

.card-title[b-h26smphl7r] {
    margin: 0;
}

:host[b-h26smphl7r] {
    --green: #2f6f4e;
    --green-dark: #204d37;
    --card-line: rgba(0,0,0,.12);
    --paper-1: #fffdf7;
    --paper-2: #fff9ef;
    --title-serif: "Cormorant Garamond","Garamond","Baskerville","Palatino Linotype","Book Antiqua",Georgia,serif;
}

/* pierca scoped-gränsen till länken i h3 */
.categories[b-h26smphl7r]  a.card-title-link {
    font-family: var(--title-serif) !important;
    font-weight: 400;
    font-style: italic;
    font-size: 1.22rem;
    line-height: 1.28;
    letter-spacing: .01em;
    color: color-mix(in srgb, var(--green) 88%, black 12%);
    text-decoration: none;
    /* elegant underline-animation */
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 1px;
    transition: background-size .25s ease, color .2s ease;
    /* samma titelyta i alla kort (3 rader) */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    min-height: calc(1.28em * 3);
    max-width: 20ch;
    margin-inline: auto;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

.categories .card:hover[b-h26smphl7r]  a.card-title-link {
    background-size: 100% 1px;
}

.categories[b-h26smphl7r]  a.card-title-link:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--yellow) 60%, white 40%);
    outline-offset: 3px;
    border-radius: 6px;
    background-size: 100% 1px;
}

/* ===========================
   Nyheter – SHOWCASE (glass)
=========================== */

.home-news--showcase[b-h26smphl7r] {
    padding: 1.6rem 1rem 2.2rem;
    background: linear-gradient(180deg, rgba(0,0,0,.02), transparent 40%);
}

    .home-news--showcase .home-news__header[b-h26smphl7r] {
        max-width: 1200px;
        margin: 0 auto 1rem;
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 1rem;
    }

    .home-news--showcase h2[b-h26smphl7r] {
        margin: 0;
        font-size: clamp(1.2rem,2.8vw,1.6rem);
        color: var(--green);
        font-weight: 800;
        letter-spacing: .2px;
    }

    .home-news--showcase .news-admin-link[b-h26smphl7r] {
        font-size: .95rem;
        color: var(--green);
        text-decoration: underline;
        opacity: .95;
    }

    .home-news--showcase .news-empty[b-h26smphl7r] {
        text-align: center;
        color: var(--green-dark);
        opacity: .85;
        max-width: 1100px;
        margin: .5rem auto 0;
    }

/* Grid */
.news-grid[b-h26smphl7r] {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    gap: 1.2rem;
    grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
}

/* KORT (glass) */
.news-card[b-h26smphl7r] {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    overflow: clip;
    background: linear-gradient(135deg, rgba(255,255,255,.65), rgba(255,255,255,.48));
    border: 1px solid color-mix(in srgb, var(--card-line) 70%, white 30%);
    box-shadow: 0 10px 24px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.04);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

    .news-card:hover[b-h26smphl7r] {
        transform: translateY(-3px);
        box-shadow: 0 16px 32px rgba(0,0,0,.14), 0 3px 10px rgba(0,0,0,.06);
        border-color: color-mix(in srgb, var(--green) 28%, var(--card-line) 72%);
    }

/* ===== BORD (titelrad) – visas alltid, samma höjd med/utan titel ===== */
.news-head[b-h26smphl7r] {
    background: var(--green);
    color: #fff;
    min-height: 56px; /* samma höjd alltid */
    display: flex;
    align-items: center;
    padding: 0 16px;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}

.news-card.no-title .news-head[b-h26smphl7r] {
    /* fortfarande grön och samma höjd – bara ingen text */
}

/* Titel – vit & klipps om den inte får plats */
.news-title[b-h26smphl7r] {
    margin: 0;
    width: 100%;
    font-weight: 600;
    font-size: 1.08rem;
    letter-spacing: .01em;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* klipp */
}

/* Brödtext */
.news-body[b-h26smphl7r] {
    padding: .9rem 1rem .6rem;
    color: var(--green-dark);
    font-size: .98rem;
    line-height: 1.55;
}

    .news-body p[b-h26smphl7r] {
        margin: 0 0 .6rem;
    }

    .news-body a[b-h26smphl7r] {
        color: var(--green);
        text-decoration: underline;
    }

/* ===== Embed – fullbredd & centrerad ===== */
.news-embed[b-h26smphl7r] {
    /* ingen horisontell padding → kan bli full-bleed mot kortets kant */
    padding: 0 0 1rem 0;
    display: flex;
    justify-content: center;
}

    .news-embed .embed[b-h26smphl7r] {
        width: 100%;
        max-width: 100%;
        margin: 0;
        border-radius: 0; /* följer kortets kanter */
        background: #fff;
        box-shadow: 0 4px 14px rgba(0,0,0,.08);
        overflow: hidden;
    }

/* Om du vill ha runda nederkanter när embed ligger sist i kortet */
.news-card.no-body .news-embed .embed[b-h26smphl7r] {
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
}

/* FB-ratio (justera vid behov) */
.embed.embed--fb[b-h26smphl7r] {
    aspect-ratio: 500 / 589;
}

.embed.embed--auto[b-h26smphl7r] {
    aspect-ratio: 16 / 9;
}

@supports not (aspect-ratio: 1) {
    .embed.embed--fb[b-h26smphl7r] {
        padding-top: calc(589/500*100%);
        height: 0;
    }

    .embed.embed--auto[b-h26smphl7r] {
        padding-top: 56.25%;
        height: 0;
    }

        .embed.embed--fb iframe[b-h26smphl7r], .embed.embed--auto iframe[b-h26smphl7r] {
            position: absolute;
            inset: 0;
        }
}

.embed iframe[b-h26smphl7r] {
    width: 100% !important;
    height: 100% !important;
    display: block;
    border: 0;
}

/* ===== Diskret FOOTER ===== */
.news-actions[b-h26smphl7r] {
    margin-top: auto;
    padding: .5rem .75rem .6rem;
    display: flex;
    justify-content: flex-end;
    border-top: 1px dashed rgba(0,0,0,.08);
}

.news-action-link[b-h26smphl7r] {
    font-size: .92rem;
    color: color-mix(in srgb, var(--green) 80%, #000 20%);
    text-decoration: underline;
    opacity: .9;
}

    .news-action-link:hover[b-h26smphl7r] {
        opacity: 1;
    }

/* Små skärmar */
@media (max-width:560px) {
    .news-grid[b-h26smphl7r] {
        grid-template-columns: 1fr;
    }

    .news-body[b-h26smphl7r] {
        padding: .8rem .85rem .6rem;
    }

    .news-actions[b-h26smphl7r] {
        padding: .45rem .7rem .6rem;
    }
}



/* ===========================
   Service
=========================== */
.service[b-h26smphl7r] {
    background: var(--green-dark);
    color: var(--bg-light);
    padding: 3.5rem 1rem;
    text-align: center;
}

    .service h2[b-h26smphl7r] {
        font-size: 2rem;
        margin: 0 0 1rem;
    }

    .service p[b-h26smphl7r] {
        font-size: 1.15rem;
        margin: 0 0 2rem;
    }


    /* ===== Service – rikare layout ===== */
    .service.service--rich[b-h26smphl7r] {
        /* din befintliga .service bakgrund funkar redan – vi behåller den */
        /* padding finns redan i din .service; lägg till lite tightare spacing i komponenterna nedan */
    }

.service-inner[b-h26smphl7r] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1rem;
}

.service-head[b-h26smphl7r] {
    text-align: center;
    margin-bottom: 1.2rem;
}

    .service-head h2[b-h26smphl7r] {
        margin: 0 0 .4rem;
    }

.service-lead[b-h26smphl7r] {
    margin: 0;
    font-size: 1.08rem;
    opacity: .95;
}

.hide-sm[b-h26smphl7r] {
    display: inline;
}

@media (max-width: 560px) {
    .hide-sm[b-h26smphl7r] {
        display: none;
    }
}

/* Grid: lista + CTA */
.service-grid[b-h26smphl7r] {
    display: grid;
    gap: 1.2rem;
    grid-template-columns: 2fr 1fr;
}

@media (max-width: 860px) {
    .service-grid[b-h26smphl7r] {
        grid-template-columns: 1fr;
    }
}

/* Lista med tjänster */
.service-list[b-h26smphl7r] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .9rem;
    grid-template-columns: repeat(2, minmax(240px, 1fr));
}

@media (max-width: 620px) {
    .service-list[b-h26smphl7r] {
        grid-template-columns: 1fr;
    }
}

.service-item[b-h26smphl7r] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .75rem;
    align-items: start;
    padding: .9rem .95rem;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,.12) inset, 0 2px 8px rgba(0,0,0,.06);
}

.svc-icon[b-h26smphl7r] {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    color: color-mix(in srgb, var(--yellow) 78%, white 22%);
}

    .svc-icon svg[b-h26smphl7r] {
        width: 26px;
        height: 26px;
        display: block;
    }

.svc-text h3[b-h26smphl7r] {
    margin: 0 0 .2rem;
    font-size: 1.05rem;
    color: var(--bg-light);
}

.svc-text p[b-h26smphl7r] {
    margin: 0;
    font-size: .98rem;
    color: color-mix(in srgb, var(--bg-light) 88%, black 12%);
    opacity: .95;
}

/* CTA-kort */
.service-cta .cta-card[b-h26smphl7r] {
    height: 100%;
    display: grid;
    align-content: start;
    gap: .5rem;
    padding: 1.1rem;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
    text-align: left;
}

.cta-title[b-h26smphl7r] {
    margin: 0;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--bg-light);
}

.cta-card p[b-h26smphl7r] {
    margin: 0;
}

.cta-meta[b-h26smphl7r] {
    margin-top: .4rem;
    font-size: .92rem;
    opacity: .9;
}

/* Ljus knapp för mörk bakgrund */
.btn.btn--light[b-h26smphl7r] {
    display: inline-block;
    margin-top: .2rem;
    background: var(--bg-light);
    color: var(--green-dark);
    border: 1px solid color-mix(in srgb, var(--bg-light) 80%, #000 20%);
    border-radius: 10px;
    padding: .55rem .9rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}

    .btn.btn--light:hover[b-h26smphl7r] {
        transform: translateY(-1px);
        box-shadow: 0 6px 14px rgba(0,0,0,.18);
    }

/* Av-sticka endast service-head */
header.service-head[b-h26smphl7r],
.service .service-head[b-h26smphl7r] {
    position: static !important; /* ersätt ev. sticky/-webkit-sticky */
    top: auto !important;
    inset-block-start: auto !important; /* logiskt 'top' */
    z-index: auto !important;
    /* om sticky-läget tidigare gav blur/skugga, nollställ dem också */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}

/* (valfritt) säkerställ normal layout/spacing */
.service-head[b-h26smphl7r] {
    background: transparent; /* ingen fixad bakgrund från sticky-variant */
}

/* Av-sticka endast denna header */
.service-head[b-h26smphl7r] {
    position: static !important;
    top: auto !important;
    inset-block-start: auto !important;
    z-index: auto !important;
    /* Centrera och ge lite luft */
    display: block;
    text-align: center;
    max-width: 1000px;
    margin: 0 auto 1.2rem;
    padding: .5rem 1rem;
    /* Nollställ ev. visuella effekter från tidigare sticky-version */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    background: transparent;
}

    /* Snygg, tydlig rubrik – färg ärver från .service (ofta ljus text på mörk bakgrund) */
    .service-head h2[b-h26smphl7r] {
        margin: 0;
        font-weight: 800;
        line-height: 1.15;
        font-size: clamp(1.6rem, 3.2vw, 2.2rem);
        color: inherit;
        letter-spacing: .2px;
    }

    /* Om du har kvar en gammal underrad i DOM:en, göm den här */
    .service-head .service-lead[b-h26smphl7r] {
        display: none !important;
    }


/* ===========================
   Info (öppettider/kontakt)
=========================== */
.info[b-h26smphl7r] {
    background: var(--green);
    color: var(--bg-light);
    padding: 3rem 1rem;
}

.info-wrapper[b-h26smphl7r] {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
    text-align: center;
}

.info-column[b-h26smphl7r] {
    min-width: 250px;
}

.info h2[b-h26smphl7r] {
    font-size: 2rem;
    margin: 0 0 1rem;
}

.info p[b-h26smphl7r], .info td[b-h26smphl7r] {
    font-size: 1.1rem;
    margin: .25rem 0;
}

.hours-table[b-h26smphl7r] {
    margin: 0 auto;
    border-collapse: collapse;
}

    .hours-table td[b-h26smphl7r] {
        padding: .35rem .8rem;
    }

    .hours-table tr:not(:last-child) td[b-h26smphl7r] {
        border-bottom: 1px solid rgba(255,255,255,0.25);
    }

.info a[b-h26smphl7r] {
    color: var(--bg-light);
    text-decoration: underline;
}

.hours-note[b-h26smphl7r] {
    margin-top: .4rem;
    font-size: .95rem;
    opacity: .9;
}

/* ===========================
   Kompaktare hero i mobil
=========================== */
@media (max-width: 520px) {
    .hero[b-h26smphl7r] {
        height: 54vh;
    }

        .hero + .categories[b-h26smphl7r] {
            padding-top: .6rem;
        }

    .lead-wrap[b-h26smphl7r] {
        margin-bottom: .8rem;
    }

    .lead[b-h26smphl7r] {
        margin-bottom: .8rem;
    }
}