/* /Components/Layout/LimeCategoryNav.razor.rz.scp.css */
.tabs[b-oupldq38ux] {
    background: var(--ls-lime);
}

/* The layout's width, repeated: its scoped .ls-wrap does not reach markup written here. */
.tabs-list[b-oupldq38ux] {
    display: flex;
    gap: 0.25rem;
    box-sizing: border-box;
    max-width: var(--ls-max);
    margin: 0 auto;
    padding: 0.45rem 1.25rem 0;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
}

    .tabs-list a[b-oupldq38ux] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.65rem 1.1rem 0.75rem;
        border-radius: 0.75rem 0.75rem 0 0;
        color: var(--ls-lime-fg);
        font-size: 0.95rem;
        font-weight: 600;
        text-decoration: none;
        white-space: nowrap;
    }

        .tabs-list a:hover[b-oupldq38ux] {
            background: rgba(255, 255, 255, 0.35);
        }

        /* The page colour, so the tab reads as the top of the page it opens. */
        .tabs-list a[aria-current="page"][b-oupldq38ux] {
            background: var(--ls-page);
            color: var(--ls-primary);
        }

        .tabs-list a:focus-visible[b-oupldq38ux] {
            outline: 3px solid #258cfb;
            outline-offset: -3px;
        }

/* Search sits at the far end, apart from the categories. */
.tabs-search[b-oupldq38ux] {
    margin-left: auto;
}

@media (max-width: 767.98px) {
    .tabs-list[b-oupldq38ux] {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

        .tabs-list a[b-oupldq38ux] {
            padding: 0.55rem 0.85rem 0.65rem;
            font-size: 0.875rem;
        }

    .tabs-search[b-oupldq38ux] {
        margin-left: 0;
    }
}
/* /Components/Layout/LimeLayout.razor.rz.scp.css */
/* The palette of BlazorOnlineShopV1 — light green with a dark green that carries the text and buttons — in the
   V1_1 design: a white header, a light-green tab bar, rounded cards with soft shadows and a light footer. Set on the
   root of the layout, so every page and component of the site reads it. White on the dark green passes WCAG AA,
   which white on the light green itself would not, so the light green always carries dark text. */
.ls[b-7vwhphmw9x] {
    --ls-lime: #7cc243;
    --ls-lime-fg: #13290b;
    --ls-band: #e4f5d4;
    --ls-page: #f7fbf3;
    --ls-soft: #eef8e5;
    --ls-primary: #367a1f;
    --ls-primary-hover: #2b6318;
    --ls-border: #d3e8c2;
    --ls-text: #1b2a14;
    --ls-muted: #55684b;
    --ls-radius: 1rem;
    --ls-shadow: 0 1px 2px rgba(19, 41, 11, 0.06), 0 0.5rem 1.5rem rgba(19, 41, 11, 0.07);
    --ls-max: 76rem;
    --gallery-accent: var(--ls-primary);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--ls-page);
    color: var(--ls-text);
}

.ls-wrap[b-7vwhphmw9x] {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--ls-max);
    margin: 0 auto;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

/* White header: logo, search, the order cut-off. */
.ls-header[b-7vwhphmw9x] {
    background: #fff;
}

.ls-head[b-7vwhphmw9x] {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    min-height: 5.25rem;
}

.ls-logo[b-7vwhphmw9x] {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 0.65rem;
    color: var(--ls-lime-fg);
    text-decoration: none;
}

.ls-logo-text[b-7vwhphmw9x] {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}

    .ls-logo-text strong[b-7vwhphmw9x] {
        font-size: 1.3rem;
        font-weight: 800;
        letter-spacing: -0.01em;
    }

    .ls-logo-text span[b-7vwhphmw9x] {
        color: var(--ls-primary);
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.2em;
        text-transform: uppercase;
    }

/* One rounded field: icon, words, category, button. */
.ls-search[b-7vwhphmw9x] {
    display: flex;
    flex: 1;
    align-items: center;
    min-width: 0;
    height: 3.1rem;
    padding: 0 0.3rem 0 1rem;
    background: var(--ls-page);
    border: 1px solid var(--ls-border);
    border-radius: 999px;
}

    .ls-search:focus-within[b-7vwhphmw9x] {
        border-color: var(--ls-primary);
        box-shadow: 0 0 0 3px rgba(124, 194, 67, 0.35);
    }

    .ls-search[b-7vwhphmw9x]  .ls-icon {
        flex: none;
        color: var(--ls-muted);
    }

    .ls-search input[b-7vwhphmw9x] {
        flex: 1;
        min-width: 0;
        height: 100%;
        padding: 0 0.75rem;
        border: 0;
        background: transparent;
        color: var(--ls-text);
        font-size: 1rem;
        outline: none;
    }

    .ls-search select[b-7vwhphmw9x] {
        flex: none;
        max-width: 11rem;
        height: 2.2rem;
        padding: 0 0.5rem;
        border: 0;
        border-left: 1px solid var(--ls-border);
        background: transparent;
        color: var(--ls-muted);
        font-size: 0.9rem;
    }

    .ls-search button[b-7vwhphmw9x] {
        flex: none;
        height: 2.5rem;
        margin-left: 0.3rem;
        padding: 0 1.4rem;
        border: 0;
        border-radius: 999px;
        background: var(--ls-primary);
        color: #fff;
        font-weight: 700;
    }

        .ls-search button:hover[b-7vwhphmw9x] {
            background: var(--ls-primary-hover);
        }

        .ls-search select:focus-visible[b-7vwhphmw9x], .ls-search button:focus-visible[b-7vwhphmw9x] {
            outline: 3px solid #258cfb;
            outline-offset: 2px;
        }

.ls-cutoff[b-7vwhphmw9x] {
    display: flex;
    flex: none;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    color: var(--ls-muted);
    font-size: 0.85rem;
    line-height: 1.3;
}

    .ls-cutoff[b-7vwhphmw9x]  .ls-icon {
        color: var(--ls-primary);
    }

    .ls-cutoff strong[b-7vwhphmw9x] {
        color: var(--ls-text);
    }

.ls-main[b-7vwhphmw9x] {
    flex: 1;
    padding-top: 1.75rem;
    padding-bottom: 3.5rem;
}

/* Bootstrap's pagination and breadcrumb in the site's colours; they are rendered by the pages, hence ::deep. */
.ls[b-7vwhphmw9x]  .pagination {
    --bs-pagination-color: var(--ls-primary);
    --bs-pagination-hover-color: var(--ls-primary-hover);
    --bs-pagination-active-bg: var(--ls-primary);
    --bs-pagination-active-border-color: var(--ls-primary);
    --bs-pagination-border-radius: 999px;
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(54, 122, 31, 0.3);
    gap: 0.35rem;
}

    .ls[b-7vwhphmw9x]  .pagination .page-link {
        min-width: 2.4rem;
        border-radius: 999px;
        text-align: center;
    }

.ls[b-7vwhphmw9x]  .breadcrumb {
    --bs-breadcrumb-divider: '›';
    --bs-breadcrumb-item-active-color: var(--ls-muted);
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
}

    .ls[b-7vwhphmw9x]  .breadcrumb a {
        color: var(--ls-primary);
        text-decoration: none;
    }

        .ls[b-7vwhphmw9x]  .breadcrumb a:hover {
            text-decoration: underline;
        }

/* A light footer, the colour of the search band of V1. */
.ls-footer[b-7vwhphmw9x] {
    padding-top: 2.5rem;
    background: var(--ls-band);
    border-top: 1px solid var(--ls-border);
    color: var(--ls-text);
    font-size: 0.9rem;
}

.ls-footer-grid[b-7vwhphmw9x] {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
    gap: 1.5rem 2rem;
    padding-bottom: 2rem;
}

.ls-footer-brand[b-7vwhphmw9x] {
    margin-bottom: 0.4rem;
    color: var(--ls-lime-fg);
    font-size: 1.15rem;
    font-weight: 800;
}

.ls-footer-title[b-7vwhphmw9x] {
    margin-bottom: 0.6rem;
    color: var(--ls-primary);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ls-footer ul[b-7vwhphmw9x] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ls-footer li + li[b-7vwhphmw9x] {
    margin-top: 0.35rem;
}

.ls-footer a[b-7vwhphmw9x] {
    color: var(--ls-text);
    text-decoration: none;
}

    .ls-footer a:hover[b-7vwhphmw9x] {
        color: var(--ls-primary);
        text-decoration: underline;
    }

.ls-footer-bottom[b-7vwhphmw9x] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem;
    padding-top: 1rem;
    padding-bottom: 1.5rem;
    border-top: 1px solid var(--ls-border);
    color: var(--ls-muted);
    font-size: 0.8rem;
}

@media (max-width: 991.98px) {
    .ls-cutoff[b-7vwhphmw9x] {
        display: none;
    }

    .ls-footer-grid[b-7vwhphmw9x] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* A phone: the search goes under the logo, without the category list, which the tabs already give. */
@media (max-width: 767.98px) {
    .ls-head[b-7vwhphmw9x] {
        flex-wrap: wrap;
        gap: 0.75rem;
        padding-top: 0.85rem;
        padding-bottom: 0.85rem;
    }

    .ls-search[b-7vwhphmw9x] {
        flex-basis: 100%;
        height: 2.9rem;
    }

        .ls-search select[b-7vwhphmw9x] {
            display: none;
        }

        .ls-search button[b-7vwhphmw9x] {
            padding: 0 1rem;
        }

    .ls-main[b-7vwhphmw9x] {
        padding-top: 1.25rem;
    }

    .ls-footer-grid[b-7vwhphmw9x] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Layout/LimeProductGrid.razor.rz.scp.css */
/* Four columns across the full width, three on a tablet, two on a phone. */
.cards[b-4cwuy229za] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
    margin: 0 0 2rem;
    padding: 0;
    list-style: none;
}

.cards-3[b-4cwuy229za] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.card[b-4cwuy229za] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border-radius: var(--ls-radius);
    box-shadow: var(--ls-shadow);
    overflow: hidden;
    transition: transform 0.15s, box-shadow 0.15s;
}

    .card:hover[b-4cwuy229za] {
        transform: translateY(-3px);
        box-shadow: 0 1px 2px rgba(19, 41, 11, 0.06), 0 0.9rem 2rem rgba(19, 41, 11, 0.12);
    }

@media (prefers-reduced-motion: reduce) {
    .card[b-4cwuy229za], .card:hover[b-4cwuy229za] {
        transform: none;
        transition: none;
    }
}

/* The picture on a light tint, so the white of the drawing does not melt into the card. */
.card-thumb[b-4cwuy229za] {
    position: relative;
    display: block;
    padding: 0.9rem;
    background: var(--ls-soft);
}

    .card-thumb img[b-4cwuy229za] {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 0.6rem;
    }

.card-badge[b-4cwuy229za] {
    position: absolute;
    top: 1.4rem;
    left: 1.4rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: #fff;
    color: #b02a37;
    font-size: 0.75rem;
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.card-body[b-4cwuy229za] {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 0.9rem 1.1rem 1.1rem;
}

.card-brand[b-4cwuy229za] {
    margin-bottom: 0.25rem;
    color: var(--ls-primary);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Two lines at most, so the prices line up across a row. The full name is on the product page. */
.card-name[b-4cwuy229za] {
    display: -webkit-box;
    margin-bottom: 0.85rem;
    overflow: hidden;
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

    .card-name a[b-4cwuy229za] {
        color: var(--ls-text);
        text-decoration: none;
    }

        .card-name a:hover[b-4cwuy229za] {
            color: var(--ls-primary);
            text-decoration: underline;
        }

.card-buy[b-4cwuy229za] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 0.5rem;
    margin-top: auto;
}

.card-price[b-4cwuy229za] {
    color: var(--ls-lime-fg);
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

/* A dot before the word, so the state reads at a glance. */
.card-stock[b-4cwuy229za] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
}

    .card-stock[b-4cwuy229za]::before {
        content: "";
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 50%;
        background: currentColor;
    }

.in-stock[b-4cwuy229za] {
    color: #2b6318;
}

.out-of-stock[b-4cwuy229za] {
    color: #b02a37;
}

@media (max-width: 991.98px) {
    .cards[b-4cwuy229za], .cards-3[b-4cwuy229za] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .cards[b-4cwuy229za], .cards-3[b-4cwuy229za] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }

    .card-thumb[b-4cwuy229za] {
        padding: 0.6rem;
    }

    .card-badge[b-4cwuy229za] {
        top: 1rem;
        left: 1rem;
    }

    .card-body[b-4cwuy229za] {
        padding: 0.7rem 0.8rem 0.85rem;
    }

    .card-name[b-4cwuy229za] {
        font-size: 0.9rem;
    }

    .card-price[b-4cwuy229za] {
        font-size: 1.1rem;
    }
}
/* /Components/Pages/LimeCategory.razor.rz.scp.css */
/* A white panel at the top of the list: the category's icon, name and description, and the count on the right. */
.page-head[b-25q4qnlgut] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1.75rem;
    padding: 1.4rem 1.6rem;
    background: #fff;
    border-radius: var(--ls-radius);
    box-shadow: var(--ls-shadow);
}

.page-icon[b-25q4qnlgut] {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 1rem;
    background: var(--ls-band);
    color: var(--ls-primary);
}

.page-title[b-25q4qnlgut] {
    flex: 1;
    min-width: 0;
}

    .page-title h1[b-25q4qnlgut] {
        margin-bottom: 0.3rem;
        font-size: 1.9rem;
        font-weight: 800;
        letter-spacing: -0.01em;
    }

    .page-title p[b-25q4qnlgut] {
        max-width: 46rem;
        margin: 0;
        color: var(--ls-muted);
    }

.page-count[b-25q4qnlgut] {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: flex-end;
    margin: 0;
    color: var(--ls-muted);
    font-size: 0.85rem;
}

    .page-count strong[b-25q4qnlgut] {
        color: var(--ls-lime-fg);
        font-size: 1.6rem;
        line-height: 1.1;
    }

@media (max-width: 767.98px) {
    .page-head[b-25q4qnlgut] {
        flex-wrap: wrap;
        gap: 0.9rem;
        padding: 1.1rem;
    }

    .page-icon[b-25q4qnlgut] {
        width: 3rem;
        height: 3rem;
    }

    .page-title[b-25q4qnlgut] {
        flex-basis: calc(100% - 4rem);
    }

        .page-title h1[b-25q4qnlgut] {
            font-size: 1.45rem;
        }

    .page-count[b-25q4qnlgut] {
        flex-direction: row;
        align-items: baseline;
        gap: 0.35rem;
    }

        .page-count strong[b-25q4qnlgut] {
            font-size: 1rem;
        }
}
/* /Components/Pages/LimeHome.razor.rz.scp.css */
/* The hero: full width, a soft light-green gradient, the text on the left and a 2 × 2 collage on the right. */
.hero[b-11txlyiig1] {
    background:
        radial-gradient(circle at 90% 10%, rgba(124, 194, 67, 0.28), transparent 40%),
        linear-gradient(180deg, var(--ls-page) 0%, var(--ls-band) 100%);
    border-bottom: 1px solid var(--ls-border);
}

/* The layout's width, repeated: its scoped .ls-wrap does not reach markup written here. */
.hero-inner[b-11txlyiig1] {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: center;
    gap: 3rem;
    box-sizing: border-box;
    max-width: var(--ls-max);
    margin: 0 auto;
    padding: 3rem 1.25rem 3.25rem;
}

.hero-kicker[b-11txlyiig1] {
    display: inline-block;
    margin-bottom: 1rem;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    background: #fff;
    color: var(--ls-primary);
    font-size: 0.8rem;
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(19, 41, 11, 0.08);
}

.hero h1[b-11txlyiig1] {
    margin-bottom: 1rem;
    color: var(--ls-lime-fg);
    font-size: clamp(1.9rem, 4vw, 3.1rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.08;
}

.hero-lead[b-11txlyiig1] {
    max-width: 34rem;
    margin-bottom: 1.75rem;
    color: var(--ls-muted);
    font-size: 1.1rem;
    line-height: 1.6;
}

.hero-actions[b-11txlyiig1] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.btn-main[b-11txlyiig1], .btn-ghost[b-11txlyiig1] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem 1.4rem;
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none;
}

.btn-main[b-11txlyiig1] {
    background: var(--ls-primary);
    color: #fff;
}

    .btn-main:hover[b-11txlyiig1] {
        background: var(--ls-primary-hover);
        color: #fff;
    }

.btn-ghost[b-11txlyiig1] {
    background: #fff;
    border: 1px solid var(--ls-border);
    color: var(--ls-lime-fg);
}

    .btn-ghost:hover[b-11txlyiig1] {
        border-color: var(--ls-primary);
        color: var(--ls-primary);
    }

.hero-collage[b-11txlyiig1] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

    /* A gentle stagger, so the four read as a collage rather than a table. */
    .hero-collage li:nth-child(2)[b-11txlyiig1] {
        transform: translateY(1.25rem);
    }

    .hero-collage li:nth-child(4)[b-11txlyiig1] {
        transform: translateY(1.25rem);
    }

    .hero-collage a[b-11txlyiig1] {
        position: relative;
        display: block;
        border-radius: var(--ls-radius);
        overflow: hidden;
        box-shadow: var(--ls-shadow);
        background: #fff;
    }

    .hero-collage img[b-11txlyiig1] {
        display: block;
        width: 100%;
        height: auto;
    }

    .hero-collage span[b-11txlyiig1] {
        position: absolute;
        left: 0.6rem;
        bottom: 0.6rem;
        padding: 0.25rem 0.7rem;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.92);
        color: var(--ls-lime-fg);
        font-size: 0.8rem;
        font-weight: 700;
    }

/* The benefits: one white strip of four. */
.benefits[b-11txlyiig1] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 2.75rem;
    background: #fff;
    border-radius: var(--ls-radius);
    box-shadow: var(--ls-shadow);
}

.benefit[b-11txlyiig1] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1.15rem 1.25rem;
}

    .benefit + .benefit[b-11txlyiig1] {
        border-left: 1px solid var(--ls-border);
    }

.benefit-icon[b-11txlyiig1] {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.85rem;
    background: var(--ls-band);
    color: var(--ls-primary);
}

.benefit p[b-11txlyiig1] {
    display: flex;
    flex-direction: column;
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.35;
}

.benefit strong[b-11txlyiig1] {
    font-size: 0.95rem;
}

.benefit span[b-11txlyiig1] {
    color: var(--ls-muted);
}

.home-section[b-11txlyiig1] {
    margin-bottom: 2.75rem;
}

.section-head[b-11txlyiig1] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-bottom: 1.1rem;
}

    .section-head h2[b-11txlyiig1] {
        margin: 0;
        font-size: 1.6rem;
        font-weight: 800;
        letter-spacing: -0.01em;
    }

    .section-head a[b-11txlyiig1] {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        color: var(--ls-primary);
        font-weight: 600;
        text-decoration: none;
    }

        .section-head a:hover[b-11txlyiig1] {
            text-decoration: underline;
        }

/* Category tiles: the picture beside the text. */
.tiles[b-11txlyiig1] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tile[b-11txlyiig1] {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr);
    align-items: center;
    gap: 1.25rem;
    height: 100%;
    padding: 1rem;
    background: #fff;
    border-radius: var(--ls-radius);
    box-shadow: var(--ls-shadow);
    color: var(--ls-text);
    text-decoration: none;
    transition: box-shadow 0.15s;
}

    .tile:hover[b-11txlyiig1] {
        box-shadow: 0 0 0 2px var(--ls-lime), var(--ls-shadow);
    }

    .tile img[b-11txlyiig1] {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 0.7rem;
        background: var(--ls-soft);
    }

.tile-body[b-11txlyiig1] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.tile-name[b-11txlyiig1] {
    font-size: 1.15rem;
    font-weight: 800;
}

.tile-text[b-11txlyiig1] {
    color: var(--ls-muted);
    font-size: 0.9rem;
    line-height: 1.45;
}

.tile-count[b-11txlyiig1] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.25rem;
    color: var(--ls-primary);
    font-weight: 700;
}

/* About and FAQ side by side. */
.home-split[b-11txlyiig1] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 1.5rem;
}

.about[b-11txlyiig1], .faq[b-11txlyiig1] {
    padding: 1.6rem 1.75rem;
    background: #fff;
    border-radius: var(--ls-radius);
    box-shadow: var(--ls-shadow);
}

    .about h2[b-11txlyiig1], .faq h2[b-11txlyiig1] {
        margin-bottom: 1rem;
        font-size: 1.35rem;
        font-weight: 800;
    }

    .about p[b-11txlyiig1] {
        line-height: 1.65;
    }

        .about p:last-child[b-11txlyiig1] {
            margin-bottom: 0;
        }

.faq details[b-11txlyiig1] {
    border-top: 1px solid var(--ls-border);
}

    .faq details:last-of-type[b-11txlyiig1] {
        border-bottom: 1px solid var(--ls-border);
    }

.faq summary[b-11txlyiig1] {
    position: relative;
    padding: 0.85rem 2rem 0.85rem 0;
    font-weight: 600;
    list-style: none;
    cursor: pointer;
}

    .faq summary[b-11txlyiig1]::-webkit-details-marker {
        display: none;
    }

    /* A plus that turns into a minus when the answer is open. */
    .faq summary[b-11txlyiig1]::after {
        content: "+";
        position: absolute;
        top: 50%;
        right: 0.25rem;
        transform: translateY(-50%);
        color: var(--ls-primary);
        font-size: 1.4rem;
        font-weight: 400;
    }

.faq details[open] summary[b-11txlyiig1]::after {
    content: "−";
}

.faq summary:focus-visible[b-11txlyiig1] {
    outline: 3px solid #258cfb;
    outline-offset: 2px;
}

.faq details p[b-11txlyiig1] {
    margin: 0 0 1rem;
    color: var(--ls-muted);
    line-height: 1.6;
}

@media (max-width: 991.98px) {
    .hero-inner[b-11txlyiig1] {
        grid-template-columns: minmax(0, 1fr);
        gap: 2rem;
    }

    .hero-collage[b-11txlyiig1] {
        max-width: 30rem;
    }

    .benefits[b-11txlyiig1] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

        .benefit:nth-child(3)[b-11txlyiig1] {
            border-left: 0;
        }

        .benefit:nth-child(n + 3)[b-11txlyiig1] {
            border-top: 1px solid var(--ls-border);
        }

    .tiles[b-11txlyiig1], .home-split[b-11txlyiig1] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 575.98px) {
    .hero-inner[b-11txlyiig1] {
        padding: 2rem 1rem 2.5rem;
    }

    .hero-collage[b-11txlyiig1] {
        gap: 0.6rem;
    }

    .benefits[b-11txlyiig1] {
        grid-template-columns: minmax(0, 1fr);
    }

        .benefit + .benefit[b-11txlyiig1] {
            border-left: 0;
            border-top: 1px solid var(--ls-border);
        }

    .tile[b-11txlyiig1] {
        grid-template-columns: 6rem minmax(0, 1fr);
        gap: 0.9rem;
    }

    .tile-text[b-11txlyiig1] {
        display: none;
    }

    .about[b-11txlyiig1], .faq[b-11txlyiig1] {
        padding: 1.25rem;
    }
}
/* /Components/Pages/LimeProduct.razor.rz.scp.css */
/* Gallery and details side by side on one white panel; the details carry a buy box with the price. */
.product[b-2g2n4bk7w0] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2.5rem;
    padding: 1.75rem;
    background: #fff;
    border-radius: var(--ls-radius);
    box-shadow: var(--ls-shadow);
}

/* The pictures on the same light tint as on the cards. */
.product-gallery[b-2g2n4bk7w0] {
    padding: 1rem;
    border-radius: 0.85rem;
    background: var(--ls-soft);
}

.product-brand[b-2g2n4bk7w0] {
    margin-bottom: 0.4rem;
    color: var(--ls-primary);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.product-info h1[b-2g2n4bk7w0] {
    margin-bottom: 0.4rem;
    color: var(--ls-lime-fg);
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.product-code[b-2g2n4bk7w0] {
    margin-bottom: 1rem;
    color: var(--ls-muted);
    font-size: 0.9rem;
}

.key-specs[b-2g2n4bk7w0] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
}

    .key-specs li[b-2g2n4bk7w0] {
        padding: 0.35rem 0.8rem;
        border-radius: 999px;
        background: var(--ls-band);
        color: var(--ls-lime-fg);
        font-size: 0.85rem;
        font-weight: 700;
    }

        .key-specs li span[b-2g2n4bk7w0] {
            color: var(--ls-muted);
            font-weight: 400;
        }

.buy-box[b-2g2n4bk7w0] {
    margin-bottom: 1.25rem;
    padding: 1.1rem 1.3rem;
    border: 1px solid var(--ls-border);
    border-radius: 0.85rem;
}

    .buy-box p[b-2g2n4bk7w0] {
        margin: 0;
    }

.product-price[b-2g2n4bk7w0] {
    color: var(--ls-lime-fg);
    font-size: 2.3rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

    .product-price small[b-2g2n4bk7w0] {
        color: var(--ls-muted);
        font-size: 0.85rem;
        font-weight: 400;
        letter-spacing: 0;
    }

/* A dot before the word, as on the cards. */
.stock[b-2g2n4bk7w0] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.5rem !important;
    font-weight: 700;
}

    .stock[b-2g2n4bk7w0]::before {
        content: "";
        width: 0.55rem;
        height: 0.55rem;
        border-radius: 50%;
        background: currentColor;
    }

.in-stock[b-2g2n4bk7w0] {
    color: #2b6318;
}

.out-of-stock[b-2g2n4bk7w0] {
    color: #b02a37;
}

.buy-note[b-2g2n4bk7w0] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.75rem !important;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--ls-border);
    color: var(--ls-muted);
    font-size: 0.9rem;
}

    .buy-note[b-2g2n4bk7w0]  .ls-icon {
        color: var(--ls-primary);
    }

.product-summary[b-2g2n4bk7w0] {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.65;
}

.specs[b-2g2n4bk7w0], .related[b-2g2n4bk7w0] {
    margin-top: 2.25rem;
}

    .specs h2[b-2g2n4bk7w0], .related h2[b-2g2n4bk7w0] {
        margin-bottom: 1rem;
        font-size: 1.4rem;
        font-weight: 800;
    }

/* The specifications as a grid of small cards, two or three across. */
.spec-grid[b-2g2n4bk7w0] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 0.75rem;
    margin: 0;
}

    .spec-grid div[b-2g2n4bk7w0] {
        padding: 0.85rem 1rem;
        background: #fff;
        border-radius: 0.75rem;
        box-shadow: var(--ls-shadow);
    }

    .spec-grid dt[b-2g2n4bk7w0] {
        color: var(--ls-muted);
        font-size: 0.8rem;
        font-weight: 400;
    }

    .spec-grid dd[b-2g2n4bk7w0] {
        margin: 0.15rem 0 0;
        font-weight: 700;
    }

@media (max-width: 991.98px) {
    .product[b-2g2n4bk7w0] {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
    }

    .product-gallery[b-2g2n4bk7w0] {
        max-width: 30rem;
    }
}

@media (max-width: 575.98px) {
    .product[b-2g2n4bk7w0] {
        padding: 1rem;
    }

    .product-info h1[b-2g2n4bk7w0] {
        font-size: 1.45rem;
    }

    .product-price[b-2g2n4bk7w0] {
        font-size: 1.9rem;
    }
}
/* /Components/Pages/LimeSearch.razor.rz.scp.css */
/* The same white panel as a category's, with the search icon. */
.page-head[b-cp5jmpwgzb] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1.75rem;
    padding: 1.4rem 1.6rem;
    background: #fff;
    border-radius: var(--ls-radius);
    box-shadow: var(--ls-shadow);
}

    .page-head h1[b-cp5jmpwgzb] {
        margin-bottom: 0.3rem;
        font-size: 1.9rem;
        font-weight: 800;
        letter-spacing: -0.01em;
        overflow-wrap: anywhere;
    }

    .page-head p[b-cp5jmpwgzb] {
        max-width: 46rem;
        margin: 0;
        color: var(--ls-muted);
    }

.page-icon[b-cp5jmpwgzb] {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 1rem;
    background: var(--ls-band);
    color: var(--ls-primary);
}

.suggest-title[b-cp5jmpwgzb] {
    margin-bottom: 0.75rem;
    font-weight: 700;
}

.suggest[b-cp5jmpwgzb] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0;
    list-style: none;
}

    .suggest a[b-cp5jmpwgzb] {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.5rem 1rem;
        background: #fff;
        border-radius: 999px;
        box-shadow: var(--ls-shadow);
        color: var(--ls-lime-fg);
        font-weight: 600;
        text-decoration: none;
    }

        .suggest a:hover[b-cp5jmpwgzb] {
            box-shadow: 0 0 0 2px var(--ls-lime), var(--ls-shadow);
        }

        .suggest a[b-cp5jmpwgzb]  .ls-icon {
            color: var(--ls-primary);
        }

@media (max-width: 767.98px) {
    .page-head[b-cp5jmpwgzb] {
        align-items: flex-start;
        gap: 0.9rem;
        padding: 1.1rem;
    }

        .page-head h1[b-cp5jmpwgzb] {
            font-size: 1.45rem;
        }

    .page-icon[b-cp5jmpwgzb] {
        width: 3rem;
        height: 3rem;
    }
}
/* /Components/Shared/ProductGallery.razor.rz.scp.css */
.gallery[b-z0hbh1pns7] {
    position: relative;
}

/* Out of sight but still focusable, so the arrow keys switch pictures as in any radio group. */
.gallery-radio[b-z0hbh1pns7] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.gallery-main[b-z0hbh1pns7] {
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    overflow: hidden;
    background: #fff;
}

.gallery-slide[b-z0hbh1pns7] {
    display: none;
}

    .gallery-slide img[b-z0hbh1pns7], .gallery-thumbs img[b-z0hbh1pns7] {
        display: block;
        width: 100%;
        height: auto;
    }

/* Up to three pictures a product; a rule per number, since CSS cannot match an input to its slide otherwise. */
#snimka-1:checked ~ .gallery-main .slide-1[b-z0hbh1pns7],
#snimka-2:checked ~ .gallery-main .slide-2[b-z0hbh1pns7],
#snimka-3:checked ~ .gallery-main .slide-3[b-z0hbh1pns7] {
    display: block;
}

.gallery-thumbs[b-z0hbh1pns7] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

    .gallery-thumbs label[b-z0hbh1pns7] {
        width: 4.5rem;
        border: 2px solid var(--border);
        border-radius: 0.4rem;
        overflow: hidden;
        cursor: pointer;
        background: #fff;
    }

#snimka-1:checked ~ .gallery-thumbs .thumb-1[b-z0hbh1pns7],
#snimka-2:checked ~ .gallery-thumbs .thumb-2[b-z0hbh1pns7],
#snimka-3:checked ~ .gallery-thumbs .thumb-3[b-z0hbh1pns7] {
    border-color: var(--gallery-accent, var(--accent-strong));
}

#snimka-1:focus-visible ~ .gallery-thumbs .thumb-1[b-z0hbh1pns7],
#snimka-2:focus-visible ~ .gallery-thumbs .thumb-2[b-z0hbh1pns7],
#snimka-3:focus-visible ~ .gallery-thumbs .thumb-3[b-z0hbh1pns7] {
    outline: 3px solid #258cfb;
    outline-offset: 2px;
}