/* ============================================================
   home-feed.css
   List-first home page: restaurant cards with a carousel of dishes.
   Layout tokens live on .hf so light/dark only swap colours.
   ============================================================ */

.hf {
    --hf-bg: #f2f5f9;
    --hf-card: #ffffff;
    --hf-card-border: rgba(32, 33, 36, 0.08);
    --hf-text: #202124;
    --hf-muted: #686b72;
    --hf-pill-bg: #f5f6f7;
    --hf-pill-text: #3c4043;
    --hf-chip-bg: #ffffff;
    --hf-chip-border: rgba(32, 33, 36, 0.12);
    --hf-accent: var(--sheep-green-deep, #068125);
    --hf-accent-soft: rgba(6, 129, 37, 0.10);
    --hf-heading: var(--sheep-heading, #068125);
    --hf-brand: var(--sheep-accent, #0f8b27);
    --hf-media-bg: #e8eef6;
    --hf-shadow: 0 1px 2px rgba(32, 33, 36, 0.05), 0 8px 24px rgba(32, 33, 36, 0.06);
    --hf-dish-w: 168px;
    --hf-max-w: 1080px;
    color: var(--hf-text);
    background: var(--hf-bg);
    min-height: calc(100vh - var(--navbar-height, 56px));
    /* The join band and the footer follow the feed now: the room once kept for the phone's bottom
       bar was a blank gap before them (Benji, 2026-10-13); the footer keeps that room itself. */
    padding-bottom: 12px;
}

    /* No result, no favourite yet: the feed need not fill the screen, the join band comes right
       after the words. */
    .hf:has(.hf-empty) {
        min-height: 0;
    }

/* ---- wide screens (Benji, 2026-10-13): the universes already stand in the sidebar, so the home
   page no longer repeats them as a row of tabs; under "Qu'est-ce qui vous ferait plaisir ?" come
   the categories straight away. Phones and tablets, which have no sidebar, keep the row. ---- */
@media (min-width: 992px) {
    .hf-host .hf .hf-unis {
        display: none;
    }
}

    .hf.is-dark,
    [data-theme="dark"] .hf {
        --hf-bg: #111a2b;
        --hf-card: #1b2742;
        --hf-card-border: rgba(148, 163, 184, 0.14);
        --hf-text: #e9ebee;
        --hf-muted: #9ca8ba;
        --hf-pill-bg: rgba(148, 163, 184, 0.14);
        --hf-pill-text: #e9ebee;
        --hf-chip-bg: #1b2742;
        --hf-chip-border: rgba(148, 163, 184, 0.2);
        --hf-accent: #86d48f;
        --hf-accent-soft: rgba(74, 222, 128, 0.16);
        --hf-heading: var(--hf-text);
        --hf-media-bg: #24335a;
        --hf-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
    }

/* ---------- top area (sticky) ---------- */
.hf-top {
    background: var(--hf-bg);
    padding: 10px 16px 0;
}

/* Category bar: always visible while scrolling. */
.hf-cats {
    position: sticky;
    top: var(--hf-sticky-top, var(--navbar-height, 56px));
    z-index: 20;
    background: var(--hf-bg);
    padding: 6px 16px 0;
    border-bottom: 1px solid var(--hf-card-border);
}

.hf-topbar,
.hf-search,
.hf-chips,
.hf-filters {
    max-width: var(--hf-max-w);
    margin: 0 auto;
}

.hf-topbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.hf-mode {
    display: inline-flex;
    background: var(--hf-pill-bg);
    border-radius: 999px;
    padding: 3px;
    flex-shrink: 0;
}

.hf-mode-btn {
    border: 0;
    background: transparent;
    color: var(--hf-muted);
    font-weight: 600;
    font-size: 0.9rem;
    padding: 7px 14px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none; /* links now, as the top bar's pill (Benji, 2026-10-13) */
    transition: background .15s, color .15s;
}

    .hf-mode-btn.active {
        background: var(--hf-card);
        color: var(--hf-accent);
        box-shadow: 0 1px 3px rgba(32, 33, 36, 0.15);
    }

/* Left-aligned with the other filters: pushed right it would jump when the map opens. */
.hf-filters-right {
    margin-left: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
}

.hf-location {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 240px;
    border: 1px solid var(--hf-chip-border);
    background: var(--hf-chip-bg);
    color: var(--hf-text);
    border-radius: 999px;
    padding: 5px 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    text-align: left;
}

    .hf-location span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .hf-location i {
        color: var(--hf-accent);
    }

    .hf-location.is-located i {
        color: var(--hf-accent);
    }

.hf-spin {
    display: inline-block;
    animation: hf-spin 1s linear infinite;
}

@keyframes hf-spin {
    to {
        transform: rotate(360deg);
    }
}

.hf-mapbtn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--hf-accent);
    color: var(--hf-accent);
    background: var(--hf-accent-soft);
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
}

    .hf-mapbtn:hover {
        background: var(--hf-accent);
        color: #fff;
    }

.hf-search {
    position: relative;
    margin-bottom: 10px;
}

.hf-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--hf-muted);
    pointer-events: none;
}

.hf-search-input {
    width: 100%;
    border: 1px solid var(--hf-chip-border);
    background: var(--hf-chip-bg);
    color: var(--hf-text);
    border-radius: 999px;
    padding: 11px 40px 11px 40px;
    font-size: 1rem;
    outline: none;
}

    .hf-search-input:focus {
        border-color: var(--hf-accent);
        box-shadow: 0 0 0 3px var(--hf-accent-soft);
    }

    .hf-search-input::-webkit-search-cancel-button {
        display: none;
    }

.hf-search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: var(--hf-muted);
    font-size: 1.1rem;
    padding: 4px 8px;
}

.hf-chips {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 2px 0 10px;
    -webkit-overflow-scrolling: touch;
}

    .hf-chips::-webkit-scrollbar {
        display: none;
    }

.hf-chip {
    flex: 0 0 auto;
    width: 84px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 4px 2px;
    border: 0;
    background: transparent;
    color: var(--hf-text);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.15;
    text-align: center;
}

.hf-chip-art {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 18px;
    box-shadow: 0 4px 12px rgba(32, 33, 36, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--hf-chip-bg);
    border: 1px solid var(--hf-chip-border);
    color: var(--hf-accent);
    font-size: 1.6rem;
    transition: transform .15s ease, border-color .15s, box-shadow .15s;
}

@media (hover: hover) {
    /* Mouse-over: orange (brand colour two); chosen: green with an orange halo. */
    .hf-chip:hover .hf-chip-art {
        transform: translateY(-2px);
        border-color: var(--hf-brand);
        box-shadow: 0 6px 16px rgba(var(--sheep-accent-rgb), 0.25);
    }

    .hf-chip:hover .hf-chip-label {
        color: var(--hf-brand-dark, #068125);
    }

    .hf-see-all:hover,
    .hf-location:hover,
    .hf-mapbtn:not(.active):hover {
        color: var(--hf-brand-dark, #068125);
        border-color: var(--hf-brand);
    }
}

.hf-chip.active .hf-chip-art {
    border: 1px solid var(--hf-brand);
    background: var(--hf-brand);
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(var(--sheep-accent-rgb), 0.35);
}

.hf-chip.active .hf-chip-label {
    color: var(--hf-brand-dark, #068125);
    font-weight: 700;
}

/* Category line icons (inline SVG from CategoryIcons): coloured by the tile's text colour. */
.hf-ico {
    width: 28px;
    height: 28px;
    display: block;
    flex-shrink: 0;
}

.hf-chip.active .hf-ico {
    stroke-width: 2;
}

.hf-chip-label {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 100%;
}

/* "Coming soon" verticals: same tile, with a small tag (no greying). */
.hf-chip-soon {
    position: absolute;
    left: 50%;
    bottom: -7px;
    transform: translateX(-50%);
    white-space: nowrap;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--hf-brand);
    color: #ffffff;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.hf-chip.is-soon .hf-chip-label {
    color: var(--hf-muted);
}

.hf-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.hf-sort {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--hf-chip-border);
    background: var(--hf-chip-bg);
    border-radius: 999px;
    padding: 4px 10px;
    color: var(--hf-muted);
}

.hf-sort-select {
    border: 0;
    background: transparent;
    color: var(--hf-text);
    font-weight: 600;
    font-size: 0.85rem;
    outline: none;
}

.hf-distance {
    display: inline-flex;
    gap: 4px;
    background: var(--hf-pill-bg);
    border-radius: 999px;
    padding: 3px;
}

.hf-distance-chip {
    white-space: nowrap;
    border: 0;
    background: transparent;
    color: var(--hf-muted);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
}

    .hf-distance-chip.active {
        background: var(--hf-card);
        color: var(--hf-accent);
        box-shadow: 0 1px 3px rgba(32, 33, 36, 0.15);
    }

.hf-tagfilter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--hf-brand);
    color: #068125;
    background: transparent;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 0.82rem;
    font-weight: 700;
}

.hf-count {
    margin-left: auto;
    color: var(--hf-muted);
    font-size: 0.82rem;
    font-weight: 600;
}

/* ---------- list ---------- */
.hf-list {
    max-width: var(--hf-max-w);
    margin: 0 auto;
    padding: 14px 16px 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.hf-card {
    background: var(--hf-card);
    border: 1px solid var(--hf-card-border);
    border-radius: 18px;
    box-shadow: var(--hf-shadow);
    padding: 14px 0 14px;
    overflow: hidden;
}

    .hf-card.is-featured {
        border-color: rgba(var(--sheep-accent-rgb), 0.45);
    }

    /* Closed shops keep their photos in full colour: the ribbon and the pill say "closed". */

.hf-card-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 0 14px 10px;
}

.hf-logo {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    overflow: hidden;
    background: var(--hf-media-bg);
    display: block;
}

    .hf-logo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.hf-card-title {
    flex: 1 1 auto;
    min-width: 0;
}

.hf-name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: inherit;
    max-width: 100%;
}

    .hf-name h3 {
        margin: 0;
        font-size: 1.12rem;
        font-weight: 800;
        line-height: 1.25;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .hf-name:hover h3 {
        color: var(--hf-accent);
    }

.hf-verified {
    color: var(--hf-accent);
    font-size: 0.95rem;
    flex-shrink: 0;
}

.hf-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 5px;
}

.hf-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--hf-pill-bg);
    color: var(--hf-pill-text);
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.hf-pill-open {
    background: var(--hf-accent-soft);
    color: var(--hf-accent);
}

.hf-pill-closed {
    background: rgba(220, 38, 38, 0.12);
    color: #dc2626;
}

.hf-pill-featured {
    background: rgba(var(--sheep-accent-rgb), 0.16);
    color: #068125;
}

.hf-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 7px;
}

.hf-tag {
    white-space: nowrap;
    border: 1px solid transparent;
    background: var(--hf-accent-soft);
    color: var(--hf-accent);
    border-radius: 999px;
    padding: 1px 9px;
    font-size: 0.75rem;
    font-weight: 600;
}

    .hf-tag.active,
    .hf-tag:hover {
        border-color: var(--hf-accent);
        color: var(--hf-accent);
    }

.hf-card-arrow {
    flex-shrink: 0;
    align-self: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--hf-muted);
    background: var(--hf-pill-bg);
    text-decoration: none;
}

    .hf-card-arrow:hover {
        color: #fff;
        background: var(--hf-accent);
    }

/* ---------- dish carousel ---------- */
.hf-carousel-wrap {
    position: relative;
}

.hf-carousel {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding: 2px 14px 4px;
    -webkit-overflow-scrolling: touch;
    scroll-padding-left: 14px;
}

    .hf-carousel::-webkit-scrollbar {
        display: none;
    }

.hf-dish {
    flex: 0 0 var(--hf-dish-w);
    width: var(--hf-dish-w);
    scroll-snap-align: start;
    text-decoration: none;
    color: inherit;
    display: block;
}

.hf-dish-media {
    position: relative;
    width: 100%;
    height: var(--hf-dish-w);
    border-radius: 14px;
    overflow: hidden;
    background: var(--hf-media-bg);
}

    .hf-dish-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform .25s ease;
    }

    @media (hover: hover) {
        .hf-dish:hover .hf-dish-media img {
            transform: scale(1.04);
        }
    }

    .hf-dish-media.is-broken img {
        display: none;
    }

.hf-dish-placeholder {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--hf-muted);
    font-size: 2rem;
    text-align: center;
    padding: 10px;
}

    .hf-dish-placeholder span {
        font-size: 0.85rem;
        font-weight: 700;
        color: var(--hf-accent);
    }

.hf-dish-more .hf-dish-placeholder {
    color: var(--hf-accent);
    background: var(--hf-accent-soft);
}

.hf-dish-badge {
    position: absolute;
    left: 8px;
    top: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(32, 33, 36, 0.78);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
}

.hf-dish-badge-age {
    left: auto;
    right: 8px;
    background: rgba(220, 38, 38, 0.9);
}

.hf-dish.is-soldout .hf-dish-media img {
    opacity: 0.5;
}

.hf-dish-name {
    margin-top: 7px;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hf-dish-price {
    margin-top: 2px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--hf-accent);
}

.hf-car-arrow {
    display: none;
    position: absolute;
    top: calc(var(--hf-dish-w) / 2);
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--hf-card-border);
    background: var(--hf-card);
    color: var(--hf-text);
    box-shadow: var(--hf-shadow);
    z-index: 2;
    align-items: center;
    justify-content: center;
}

.hf-car-prev {
    left: 4px;
}

.hf-car-next {
    right: 4px;
}

/* ---------- misc ---------- */
.hf-more {
    display: flex;
    justify-content: center;
    padding: 6px 0 12px;
}

.hf-empty {
    text-align: center;
    padding: 60px 16px;
    color: var(--hf-muted);
}

    .hf-empty i {
        font-size: 3rem;
        color: var(--hf-accent);
    }

    .hf-empty h3 {
        margin: 12px 0 6px;
        color: var(--hf-text);
        font-weight: 800;
    }

.hf-fab {
    position: fixed;
    right: 16px;
    bottom: calc(var(--bottom-nav-h, 56px) + env(safe-area-inset-bottom) + 16px);
    z-index: 30;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border-radius: 999px;
    background: var(--hf-accent);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(6, 129, 37, 0.35);
}

    .hf-fab:hover {
        color: #fff;
        filter: brightness(1.05);
    }

/* skeletons */
.hf-skel {
    background: linear-gradient(90deg, var(--hf-media-bg) 25%, var(--hf-pill-bg) 50%, var(--hf-media-bg) 75%);
    background-size: 200% 100%;
    animation: hf-shimmer 1.3s infinite;
    border-radius: 10px;
}

.hf-skel-logo {
    width: 56px;
    height: 56px;
    border-radius: 14px;
}

.hf-skel-lines {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 6px;
}

.hf-skel-line {
    height: 14px;
}

.hf-skeleton-card .hf-dish .hf-skel-line {
    margin-top: 8px;
}

@keyframes hf-shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* ---------- responsive ---------- */
@media (max-width: 575.98px) {
    .hf {
        --hf-dish-w: 148px;
    }

    /* The filter block is tall on a phone: let it scroll away instead of pinning it. */
    .hf-top {
        position: static;
        padding: 8px 12px 6px;
    }

    .hf-distance {
        flex-shrink: 0;
    }

    .hf-sort {
        flex-shrink: 0;
    }

    /* Keep the words on the toggle (icons alone read as decoration); the location pill
       yields the space instead. */
    .hf-mode-btn {
        padding: 7px 11px;
        font-size: 0.82rem;
        gap: 5px;
    }

    .hf-location {
        padding: 8px 12px;
        font-size: 0.85rem;
        gap: 6px;
    }

    .hf-name h3 {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        font-size: 1.05rem;
    }

    .hf-tags {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        margin-left: -2px;
        padding: 2px;
    }

        .hf-tags::-webkit-scrollbar {
            display: none;
        }

    .hf-tag {
        flex-shrink: 0;
    }

    .hf-card-arrow {
        display: none;
    }

    .hf-filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

        .hf-filters::-webkit-scrollbar {
            display: none;
        }

    .hf-count {
        flex-shrink: 0;
        padding-right: 4px;
    }

    .hf-list {
        padding: 12px 10px 0;
        gap: 12px;
    }

    .hf-card {
        border-radius: 16px;
    }
}

@media (min-width: 992px) {
    .hf {
        --hf-dish-w: 200px;
        padding-bottom: 60px;
    }

    .hf-carousel-wrap:hover .hf-car-arrow {
        display: inline-flex;
    }

    .hf-name h3 {
        font-size: 1.25rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hf-skel,
    .hf-spin {
        animation: none;
    }

    .hf-dish-media img {
        transition: none;
    }
}

/* ---------- desktop side map ---------- */
.hf-body {
    max-width: var(--hf-max-w);
    margin: 0 auto;
}

.hf-mapbtn.active {
    background: var(--hf-accent);
    color: #fff;
}

.hf-map {
    position: relative;
    height: 42vh;
    min-height: 240px;
    margin: 12px 16px 0;
}

.hf-map-canvas {
    width: 100%;
    height: 100%;
    min-height: 420px;
    border-radius: 18px;
    overflow: hidden;
    background: var(--hf-media-bg);
    border: 1px solid var(--hf-card-border);
    box-shadow: var(--hf-shadow);
}

.hf-map-full {
    position: absolute;
    right: 12px;
    top: 12px;
    z-index: 800;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--hf-card);
    color: var(--hf-text);
    border: 1px solid var(--hf-card-border);
    box-shadow: var(--hf-shadow);
    text-decoration: none;
}

.hf-map-marker {
    background: transparent;
    border: 0;
}

.hf-map-badge {
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    border: 2px solid #fff;
    box-shadow: 0 4px 12px rgba(32, 33, 36, 0.28);
    transition: transform .15s ease;
}

    .hf-map-badge img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* Zoomed in: the shop's own photo, round. */
    .hf-map-badge.is-photo {
        border-radius: 50%;
        border-width: 3px;
    }

    /* Closed: full-colour logo, slate ring (no greying, same rule as the cards). */
    .hf-map-badge.is-closed {
        border-color: #9aa0a6;
    }

    .hf-map-badge.is-active {
        border-color: var(--sheep-accent, #0f8b27);
        box-shadow: 0 6px 18px rgba(var(--sheep-accent-rgb), 0.45);
    }

/* The map popup reuses the map page's card (.sheep-popup in map.css); these are the extras. */
.hf-map-popup-status {
    font-size: 0.8rem;
    font-weight: 700;
    margin: -2px 0 6px;
}

    .hf-map-popup-status.is-open {
        color: var(--sheep-green, #068125);
    }

    .hf-map-popup-status.is-closed {
        color: #dc2626;
    }

.hf-map-popup-verified {
    color: var(--sheep-green, #068125);
    font-size: 0.9em;
}

/* Split view (desktop): the map is a fixed right pane from the navbar to the bottom of the
   window, the header and the list live in the left pane. It never scrolls away. */
@media (min-width: 992px) {
    .hf {
        --hf-map-w: clamp(360px, 42vw, 1000px);
    }

        .hf.hf-map-on {
            padding-right: var(--hf-map-w);
        }

            /* With the map on, the list fills the whole left pane (no centred column with
               empty margins on both sides). */
            .hf.hf-map-on .hf-top,
            .hf.hf-map-on .hf-body {
                --hf-max-w: none;
            }

            .hf.hf-map-on .hf-top,
            .hf.hf-map-on .hf-list {
                padding-left: 20px;
                padding-right: 20px;
            }

            .hf.hf-map-on .hf-map {
                position: fixed;
                top: var(--hf-sticky-top, var(--navbar-height, 56px));
                right: 0;
                bottom: 0;
                width: var(--hf-map-w);
                height: auto;
                min-height: 0;
                margin: 0;
                z-index: 15;
                padding: 12px 12px 12px 0;
                background: var(--hf-bg);
            }

            .hf.hf-map-on .hf-map-canvas {
                height: 100%;
                min-height: 0;
            }

    /* The footer sits under the list, not under the map pane. */
    .hf-host:has(.hf.hf-map-on) .sheep-public-footer {
        margin-right: var(--hf-map-w);
    }
}

/* Cards below the fold skip layout and paint until scrolled near: with a dozen
   carousels of large images this is what keeps scrolling and the sidebar animation smooth. */
.hf-card {
    content-visibility: auto;
    contain-intrinsic-size: auto 400px;
}


/* ---------- closed shop ribbon ---------- */
.hf-closed-ribbon {
    position: absolute;
    top: 10px;
    left: 24px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(32, 33, 36, 0.82);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    backdrop-filter: blur(6px);
    pointer-events: none;
}

/* ---------- closed popup ---------- */
.hf-modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2000;
    background: rgba(32, 33, 36, 0.55);
    backdrop-filter: blur(2px);
}

.hf-modal {
    position: fixed;
    z-index: 2001;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(420px, calc(100vw - 32px));
    padding: 24px 22px 20px;
    border-radius: 20px;
    background: var(--hf-card);
    color: var(--hf-text);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    text-align: center;
    animation: hf-pop .18s ease-out;
}

    .hf-modal h3 {
        font-size: 1.15rem;
        font-weight: 800;
        margin: 10px 0 6px;
    }

    .hf-modal p {
        color: var(--hf-muted);
        margin-bottom: 18px;
    }

.hf-modal-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(32, 33, 36, 0.08);
    color: #068125;
    font-size: 1.6rem;
}

.hf-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

@keyframes hf-pop {
    from {
        opacity: 0;
        transform: translate(-50%, -46%);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

/* ---------- coming-soon vertical ---------- */
.hf-soon-art {
    width: 84px;
    height: 84px;
    margin: 0 auto;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--hf-accent-soft);
    color: var(--hf-accent);
    font-size: 2.4rem;
}

    .hf-soon-art .hf-ico {
        width: 42px;
        height: 42px;
    }

.hf-soon .hf-soon-art + h3 {
    margin-top: 16px;
}

@media (max-width: 575.98px) {
    .hf-chip {
        width: 74px;
    }

    .hf-chip-art {
        width: 54px;
        height: 54px;
        border-radius: 16px;
    }

    .hf-chip-art .hf-ico {
        width: 26px;
        height: 26px;
    }

    .hf-closed-ribbon {
        left: 18px;
    }
}


/* ---------- touch feel (app and phones) ---------- */
.hf a,
.hf button {
    -webkit-tap-highlight-color: transparent;
}

/* No overscroll-behavior-x: contain anywhere: Chromium (and the Windows WebView, and laptops with
   a touch screen that match "hover: none") used it to swallow the vertical wheel over a row, which
   stopped the page scrolling while the pointer was over a picture. */

/* Press feedback instead of hover. */
.hf-dish:active .hf-dish-media,
.hf-chip:active .hf-chip-art,
.hf-mode-btn:active,
.hf-location:active,
.hf-fab:active {
    transform: scale(0.97);
    transition: transform .08s ease;
}

.hf-name,
.hf-dish,
.hf-chip {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}


/* ---------- wide screens: use the width ---------- */
@media (min-width: 1400px) {
    .hf {
        --hf-max-w: 1480px;
    }
}

@media (min-width: 1700px) {
    .hf {
        --hf-dish-w: 220px;
    }

        .hf.hf-map-on .hf-body {
            --hf-dish-w: 200px;
        }
}


/* ============================================================
   Rows of shops + photo-carousel store cards (2026-10-03)
   ============================================================ */

.hf-filters {
    padding: 10px 16px 0;
}

.hf-row,
.hf-results {
    margin-top: 18px;
}

.hf-row-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

    .hf-row-head h2 {
        position: relative;
        margin: 0;
        color: var(--hf-heading);
        padding-bottom: 6px;
        font-size: 1.3rem;
        font-weight: 800;
        letter-spacing: -0.01em;
    }

        .hf-row-head h2::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 36px;
            height: 3px;
            border-radius: 2px;
            background: var(--hf-brand);
        }

.hf-row-count {
    color: var(--hf-muted);
    font-weight: 700;
    font-size: 0.85rem;
}

.hf-row-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

.hf-see-all {
    border: 0;
    background: transparent;
    color: var(--hf-accent);
    font-weight: 700;
    font-size: 0.9rem;
    padding: 6px 8px;
}

    .hf-see-all::after {
        content: " \2192";
    }

.hf-row-arrow,
.hf-back {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--hf-card-border);
    background: var(--hf-card);
    color: var(--hf-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.hf-row-arrow {
    display: none;
}

/* A row: shops side by side, the next one peeking on the right. */
.hf-strip {
    display: flex;
    align-items: stretch;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-left: 2px;
    scrollbar-width: none;
    padding: 2px 2px 8px;
    -webkit-overflow-scrolling: touch;
}

    .hf-strip::-webkit-scrollbar {
        display: none;
    }

    .hf-strip > .hf-store {
        flex: 0 0 var(--hf-store-w, 300px);
        width: var(--hf-store-w, 300px);
        scroll-snap-align: start;
    }

/* Results / "all shops": wrapped grid of the same cards. --hf-store-w is what the cards' placeholder
   height (skipped cards) is computed from, so it must be near the real column width here too. */
.hf-grid {
    --hf-store-w: 300px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px 16px;
}

/* ---------- store card ---------- */
.hf-store {
    min-width: 0;
    display: flex;
    flex-direction: column;
    border-radius: 18px;
    background: var(--hf-card);
    box-shadow: var(--hf-shadow);
    overflow: hidden;
    /* No content-visibility here: Chrome sized rendered cards in the row to the placeholder
       height (contain-intrinsic-size) and left an empty band under every strip on narrow
       screens. The pictures are lazy-loaded anyway, so rendering all cards costs little. */
}

/* 4:3 picture box. The padding trick works on every WebView (aspect-ratio needs Chrome 88). */
.hf-store-media {
    position: relative;
    width: 100%;
    padding-top: 75%;
    border-radius: 0;
    overflow: hidden;
    background: var(--hf-media-bg);
}

.hf-slides {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    /* Swiping past the last photo carries on to the next shop in the row. */
    overscroll-behavior-x: auto;
    -webkit-overflow-scrolling: touch;
}

    .hf-slides::-webkit-scrollbar {
        display: none;
    }

.hf-slide {
    position: relative;
    /* The mouse-over zoom grows the picture: clip it to its slide, or its edge shows over the next. */
    overflow: hidden;
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: block;
    color: inherit;
    text-decoration: none;
}

    .hf-slide img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 1;
    }

.hf-slide-placeholder,
.hf-fill {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.hf-slide-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hf-muted);
    font-size: 2.6rem;
}

.hf-slide.is-broken img {
    display: none;
}

.hf-slide-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    padding: 34px 12px 22px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.68), rgba(0, 0, 0, 0));
    color: #fff;
    font-weight: 700;
    pointer-events: none;
}

.hf-slide-name {
    font-size: 0.92rem;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.hf-slide-price {
    flex-shrink: 0;
    font-size: 0.88rem;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(32, 33, 36, 0.82);
    color: #fff;
    backdrop-filter: blur(4px);
}

.hf-slide-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(32, 33, 36, 0.8);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
}

.hf-slide-badge-age {
    background: rgba(220, 38, 38, 0.92);
}

.hf-slide.is-soldout img {
    opacity: 0.55;
}

.hf-slide-more {
    background: var(--hf-accent-soft);
}

.hf-slide-more-inner {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--hf-accent);
    font-weight: 800;
}

    .hf-slide-more-inner i {
        font-size: 2rem;
    }

.hf-store-media .hf-closed-ribbon,
.hf-featured-ribbon {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
}

.hf-featured-ribbon {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--hf-brand);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 800;
    pointer-events: none;
}

.hf-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 8px;
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: 5px;
    pointer-events: none;
}

.hf-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    transition: width .2s ease, background .2s ease;
}

    .hf-dot.active {
        width: 16px;
        border-radius: 999px;
        background: #fff;
    }

.hf-slide-arrow {
    position: absolute;
    top: 50%;
    z-index: 4;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, 0.94);
    color: #202124;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    display: none;
    align-items: center;
    justify-content: center;
}

.hf-slide-prev {
    left: 8px;
}

.hf-slide-next {
    right: 8px;
}

.hf-store-info {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px 12px;
}

    .hf-store-info .hf-logo {
        width: 38px;
        height: 38px;
        border-radius: 10px;
        flex-shrink: 0;
    }

.hf-store-text {
    min-width: 0;
    flex: 1 1 auto;
}

.hf-store .hf-name h3 {
    font-size: 1rem;
    white-space: nowrap;
    display: block;
}

.hf-store .hf-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-top: 3px;
    color: var(--hf-muted);
    font-size: 0.8rem;
    font-weight: 600;
}

.hf-status.is-open {
    color: var(--hf-accent);
    font-weight: 800;
}

.hf-status.is-closed {
    color: #dc2626;
    font-weight: 800;
}

.hf-store .hf-tags {
    margin-top: 6px;
    flex-wrap: nowrap;
    overflow: hidden;
}

.hf-store-skeleton .hf-store-media {
    box-shadow: none;
}

/* Pointer devices: arrows on hover (touch devices swipe). */
@media (hover: hover) {
    .hf-store-media:hover .hf-slide-arrow {
        display: inline-flex;
    }

    .hf-store-media[data-at-start] .hf-slide-prev,
    .hf-store-media[data-at-end] .hf-slide-next {
        display: none !important;
    }

    .hf-row-arrow {
        display: inline-flex;
    }

    .hf-store-media:hover .hf-slide img {
        transform: scale(1.03);
        transition: transform .3s ease;
    }
}

/* Touch screens: a swipe anywhere on a card moves the ROW of shops. The dish photos inside a card
   are no longer finger-scrollable (that nested carousel caught every swipe, so the row could only be
   moved by touching the gap between two cards); they change with the small arrows instead.
   overflow: hidden still allows the programmatic scroll the arrows and dots rely on. */
@media (hover: none) {
    .hf-slides {
        overflow: hidden;
    }

    .hf-slide-arrow {
        display: inline-flex;
        width: 30px;
        height: 30px;
        background: rgba(255, 255, 255, 0.82);
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.22);
        font-size: 0.85rem;
    }

    .hf-slide-prev {
        left: 6px;
    }

    .hf-slide-next {
        right: 6px;
    }

    .hf-store-media[data-at-start] .hf-slide-prev,
    .hf-store-media[data-at-end] .hf-slide-next {
        display: none !important;
    }
}

@media (max-width: 575.98px) {
    .hf-strip {
        --hf-store-w: 78vw;
        gap: 12px;
    }

    .hf-grid {
        grid-template-columns: 1fr;
    }

    .hf-row-head h2 {
        font-size: 1.12rem;
    }

    .hf-cats {
        padding: 4px 10px 0;
    }

    .hf-filters {
        padding: 8px 12px 0;
    }

    .hf-map {
        margin: 10px 10px 0;
        height: 22vh;
        min-height: 170px;
    }

    .hf-map-canvas {
        min-height: 0;
    }
}

@media (min-width: 1400px) {
    .hf-strip {
        --hf-store-w: 320px;
    }
}

@media (min-width: 992px) {
    .hf.hf-map-on .hf-cats,
    .hf.hf-map-on .hf-filters {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* ---------- ribbons, promotions, ratings ---------- */
.hf-ribbons {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    pointer-events: none;
}

    .hf-ribbons .hf-closed-ribbon,
    .hf-ribbons .hf-featured-ribbon {
        position: static;
    }

/* Same look as the promotion pill on the shop page: red to orange, white, bold. */
.hf-promo-ribbon {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--sheep-orange-dark, #e76423), var(--sheep-orange, #ef8839));
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 800;
    box-shadow: 0 4px 12px rgba(var(--sheep-orange-rgb), 0.35);
}

.hf-rating {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Five stars drawn as text; the gold layer is clipped to the rating (tenth precision). */
.hf-stars {
    position: relative;
    display: inline-block;
    font-size: 0.8rem;
    line-height: 1;
    letter-spacing: 1px;
    color: rgba(154, 160, 166, 0.45);
}

    .hf-stars::before {
        content: "★★★★★";
    }

.hf-stars-fill {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    white-space: nowrap;
    color: #f59e0b;
}

    .hf-stars-fill::before {
        content: "★★★★★";
    }

.hf-rating-value {
    font-weight: 800;
}

.hf-rating.is-high .hf-rating-value {
    color: #16a34a;
}

.hf-rating.is-mid .hf-rating-value {
    color: #ca8a04;
}

.hf-rating.is-low .hf-rating-value {
    color: #ea580c;
}

.hf.is-dark .hf-rating.is-mid .hf-rating-value {
    color: #facc15;
}

.hf.is-dark .hf-rating.is-high .hf-rating-value {
    color: #86d48f;
}

.hf-rating-count {
    color: var(--hf-muted);
    font-weight: 600;
}

.hf-new {
    color: #068125;
    font-weight: 800;
}


/* ---------- Delivery mode uses the full width (2026-10-03) ---------- */
@media (min-width: 992px) {
    .hf {
        --hf-max-w: none;
    }

    .hf-top,
    .hf-cats,
    .hf-filters {
        padding-left: 24px;
        padding-right: 24px;
    }

    .hf-list {
        padding-left: 24px;
        padding-right: 24px;
    }
}

/* ---------- big side arrows around each row ---------- */
.hf-row-body {
    position: relative;
}

.hf-side-arrow {
    display: none;
}

/* Pointer devices from tablet width: a gutter on each side holds a large arrow, vertically
   centred on the pictures. Touch devices swipe instead. */
@media (hover: hover) and (min-width: 768px) {
    .hf-row-body {
        padding: 0 58px;
    }

    .hf-side-arrow {
        position: absolute;
        top: 0;
        z-index: 5;
        width: 46px;
        height: calc(var(--hf-store-w, 300px) * 0.75);
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 14px;
        background: transparent;
        color: var(--hf-text);
        font-size: 1.6rem;
        transition: background .15s ease, color .15s ease, opacity .15s ease;
    }

        .hf-side-arrow i {
            width: 46px;
            height: 46px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--hf-card);
            border: 1px solid var(--hf-card-border);
            box-shadow: var(--hf-shadow);
        }

        .hf-side-arrow:hover i {
            background: var(--hf-accent);
            border-color: var(--hf-accent);
            color: #fff;
        }

    .hf-side-prev {
        left: 4px;
    }

    .hf-side-next {
        right: 4px;
    }

    .hf-row-body[data-at-start] .hf-side-prev,
    .hf-row-body[data-at-end] .hf-side-next {
        opacity: 0;
        pointer-events: none;
    }
}

/* ---------- demo disclaimer ---------- */
.hf-demo-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0 0;
    padding: 8px 14px;
    border-radius: 12px;
    background: rgba(var(--sheep-orange-rgb), 0.12);
    border: 1px solid rgba(var(--sheep-orange-rgb), 0.35);
    color: var(--hf-text);
    font-size: 0.85rem;
    font-weight: 600;
}

    .hf-demo-note i {
        color: var(--sheep-orange-dark, #e76423);
    }

/* Arrows are sized from the card width: declare it where both the arrows and the strip see it. */
.hf-row-body {
    --hf-store-w: 300px;
}

@media (min-width: 1400px) {
    .hf-row-body {
        --hf-store-w: 320px;
    }
}

@media (max-width: 575.98px) {
    .hf-row-body {
        --hf-store-w: 78vw;
    }
}

/* ---------- category shortcuts in the navigation menus (NavCategoryLinks) ---------- */
.nav-cat-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-style: normal;
}

    .nav-cat-ico .hf-ico {
        width: 0.95em;
        height: 0.95em;
    }

.maui-navmenu-link .nav-cat-ico .hf-ico,
.offcanvas .nav-link .nav-cat-ico .hf-ico {
    width: 1.15em;
    height: 1.15em;
}

.nav-cats-divider {
    height: 1px;
    margin: 6px 12px;
    background: rgba(255, 255, 255, 0.14);
}

/* ---------- /categories: every category in a grid ---------- */
.hf-catpage {
    padding-left: 16px;
    padding-right: 16px;
}

.hf-catpage-head,
.hf-catpage-section,
.hf-catpage .hf-catgrid {
    max-width: var(--hf-max-w);
    margin-left: auto;
    margin-right: auto;
}

.hf-catpage-head {
    padding-top: 20px;
}

    .hf-catpage-head h1 {
        font-size: 1.6rem;
        font-weight: 800;
        margin: 0;
    }

    .hf-catpage-head p {
        color: var(--hf-muted);
        margin: 4px 0 0;
    }

.hf-catpage-section {
    font-size: 1.05rem;
    font-weight: 800;
    margin-top: 26px;
    margin-bottom: 12px;
}

.hf-catgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}

.hf-cattile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 18px 10px 14px;
    border-radius: 18px;
    background: var(--hf-card);
    border: 1px solid var(--hf-card-border);
    box-shadow: var(--hf-shadow);
    color: var(--hf-text);
    text-decoration: none;
    text-align: center;
    transition: transform .15s ease, border-color .15s;
}

    .hf-cattile:active {
        transform: scale(0.97);
    }

@media (hover: hover) {
    .hf-cattile:hover {
        transform: translateY(-2px);
        border-color: var(--hf-brand);
        color: var(--hf-text);
        box-shadow: 0 8px 20px rgba(var(--sheep-accent-rgb), 0.2);
    }

        .hf-cattile:hover .hf-cattile-art {
            color: var(--hf-brand-dark, #068125);
        }
}

.hf-cattile-art {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--hf-accent-soft);
    color: var(--hf-accent);
}

    .hf-cattile-art .hf-ico {
        width: 32px;
        height: 32px;
    }

.hf-cattile-label {
    font-weight: 700;
    line-height: 1.2;
}

.hf-cattile-count {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--hf-muted);
}

.hf-cattile.is-soon .hf-cattile-art {
    background: var(--hf-pill-bg);
    color: var(--hf-muted);
}

.hf-cattile-skel {
    box-shadow: none;
}

    .hf-cattile-skel .hf-skel-line {
        height: 14px;
    }

@media (max-width: 575.98px) {
    .hf-catgrid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }

    .hf-cattile {
        padding: 14px 6px 10px;
        border-radius: 16px;
    }

    .hf-cattile-art {
        width: 52px;
        height: 52px;
        border-radius: 15px;
    }

        .hf-cattile-art .hf-ico {
            width: 26px;
            height: 26px;
        }

    .hf-cattile-label {
        font-size: 0.82rem;
    }
}


/* Leaflet's panes carry z-indexes of 400+. Without its own stacking context the map painted over
   the sticky category bar and the card arrows while the page scrolled past it (phones). */
.hf-map-canvas {
    position: relative;
    z-index: 0;
    isolation: isolate;
}

/* ---------- "Carte Sheep-Me" button (top row) and the "show on the map" pin on cards ---------- */
.hf-mapbtn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    font-size: 0.82rem;
    border-radius: 999px;
    border: 1px solid var(--hf-chip-border);
    background: var(--hf-chip-bg);
    color: var(--hf-text);
    font-weight: 700;
    font-size: 0.9rem;
    white-space: nowrap;
    transition: background .15s, color .15s, border-color .15s;
}

    .hf-mapbtn i {
        color: var(--hf-accent);
    }

    .hf-mapbtn.active {
        background: var(--hf-accent);
        border-color: var(--hf-accent);
        color: #fff;
    }

        .hf-mapbtn.active i {
            color: #fff;
        }

.hf-map-pin {
    flex-shrink: 0;
    align-self: flex-start;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--hf-chip-border);
    background: var(--hf-chip-bg);
    color: var(--hf-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    transition: color .15s, border-color .15s, background .15s;
}

    .hf-map-pin:hover {
        color: var(--hf-accent);
        border-color: var(--hf-accent);
        background: var(--hf-accent-soft);
    }

/* Website: the top bar carries the delivery / pickup choice and the search box, so the feed's
   own pill and search go, and with them the whole header. (The app keeps them.) */
.hf-host-modebar .hf-mode,
.hf-host-modebar .hf-top {
    display: none;
}

.hf-host-modebar .hf-cats {
    padding-top: 6px;
}

@media (max-width: 575.98px) {
    /* Phones: the filter row scrolls sideways; position and map come first so they are seen. */
    .hf-filters-right {
        order: -1;
        margin-left: 0;
        flex-shrink: 0;
    }

    .hf-location {
        max-width: 170px;
    }

    .hf-mapbtn {
        padding: 5px 10px;
    }

        .hf-mapbtn span {
            display: none;
        }
}

/* ---------- phones: two shops per row plus a glimpse of the third ---------- */
@media (max-width: 575.98px) {
    .hf-strip,
    .hf-row-body {
        /* 16 px gutters and 10 px gaps: two cards across plus a glimpse of the third. */
        --hf-store-w: calc((100vw - 52px) / 2.3);
        gap: 10px;
    }

    .hf-grid {
        /* 16 px gutters and one 10 px gap around two columns. */
        --hf-store-w: calc((100vw - 42px) / 2);
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px 10px;
    }

    .hf-store {
        border-radius: 14px;
    }

    .hf-store-info {
        padding: 8px 8px 10px;
    }

    .hf-slide-caption {
        padding: 18px 6px 12px;
    }

    .hf-slide-name {
        display: none;
    }

    .hf-slide-price {
        font-size: 0.66rem;
        padding: 1px 6px;
    }

    .hf-slide-badge {
        top: 5px;
        right: 5px;
        font-size: 0.58rem;
        padding: 1px 5px;
    }

    .hf-ribbons {
        top: 5px;
        left: 5px;
        gap: 3px;
        max-width: calc(100% - 10px);
    }

    .hf-closed-ribbon,
    .hf-featured-ribbon,
    .hf-promo-ribbon {
        font-size: 0.58rem;
        padding: 2px 6px;
        gap: 3px;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .hf-slide-arrow {
        width: 22px;
        height: 22px;
        font-size: 0.7rem;
    }

    .hf-slide-prev {
        left: 3px;
    }

    .hf-slide-next {
        right: 3px;
    }

    .hf-dots {
        bottom: 4px;
        gap: 3px;
    }

    .hf-dot {
        width: 4px;
        height: 4px;
    }

    .hf-store-info {
        gap: 0;
        padding: 7px 9px 9px;
    }

        .hf-store-info .hf-logo,
        .hf-store .hf-tags,
        .hf-store .hf-map-pin,
        .hf-store .hf-rating-count {
            display: none;
        }

    .hf-store .hf-name h3 {
        font-size: 0.78rem;
        line-height: 1.2;
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .hf-store .hf-verified {
        font-size: 0.7rem;
    }

    .hf-store .hf-meta {
        font-size: 0.66rem;
        gap: 1px 6px;
        margin-top: 2px;
    }

        /* Only the rating (or "New") and open/closed fit; time and distance are on the menu page. */
        .hf-store .hf-meta > span:not(.hf-rating):not(.hf-new):not(.hf-status):not(.hf-fee) {
            display: none;
        }

    .hf-stars {
        font-size: 0.66rem;
        letter-spacing: 0.5px;
    }
}

/* ---------- short landscape screens (a phone on its side): compact chrome ---------- */
@media (max-height: 520px) and (orientation: landscape) {
    /* Location, map button and search on one row. */
    .hf-top {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 6px 12px 0;
        max-width: none;
    }

    .hf-topbar {
        margin: 0;
        flex: 0 0 auto;
        max-width: none;
    }

    .hf-search {
        flex: 1 1 auto;
        margin: 0;
        max-width: none;
    }

    .hf-search-input {
        padding: 7px 36px 7px 36px;
        font-size: 0.85rem;
    }

    .hf-location,
    .hf-mapbtn {
        padding: 7px 11px;
        font-size: 0.82rem;
    }

    /* Category tiles: small, one-line labels, and they no longer stick (no room for it). */
    .hf-cats {
        position: static;
        padding: 4px 12px 0;
    }

    .hf-chips {
        gap: 4px;
        padding: 2px 0 6px;
    }

    .hf-chip {
        width: 60px;
        gap: 3px;
        padding: 2px 0;
    }

    .hf-chip-art {
        width: 40px;
        height: 40px;
        border-radius: 11px;
    }

        .hf-chip-art .hf-ico {
            width: 20px;
            height: 20px;
        }

    .hf-chip-label {
        font-size: 0.64rem;
        line-height: 1.1;
        -webkit-line-clamp: 1;
    }

    .hf-chip-soon {
        font-size: 0.5rem;
    }

    .hf-filters {
        padding: 4px 12px 0;
    }

    .hf-row,
    .hf-results {
        margin-top: 10px;
    }

    .hf-row-head {
        margin-bottom: 6px;
    }

        .hf-row-head h2 {
            font-size: 1rem;
        }

    /* Smaller cards, so a full row fits under the chrome. */
    .hf-strip,
    .hf-row-body {
        --hf-store-w: 190px;
        gap: 10px;
    }

    .hf-demo-note {
        display: none;
    }
}

/* ---------- category chips as compact pills: small icon, label beside it (2026-10-08) ---------- */
.hf-chip {
    position: relative;
    width: auto;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 5px 12px 5px 6px;
    border-radius: 999px;
    background: var(--hf-chip-bg);
    border: 1px solid var(--hf-chip-border);
    box-shadow: 0 2px 8px rgba(32, 33, 36, 0.05);
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
    transition: border-color .15s, background .15s, box-shadow .15s;
}

.hf-chip-art {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: var(--hf-accent-soft);
    border: 0;
    box-shadow: none;
}

    .hf-chip .hf-ico {
        width: 18px;
        height: 18px;
    }

.hf-chip-label {
    display: inline;
    -webkit-line-clamp: unset;
    overflow: visible;
    max-width: none;
}

.hf-chip.active {
    background: var(--hf-brand);
    border-color: var(--hf-brand);
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(var(--sheep-accent-rgb), 0.35);
}

    .hf-chip.active .hf-chip-art {
        background: rgba(255, 255, 255, 0.22);
        border: 0;
        color: #fff;
        box-shadow: none;
    }

    .hf-chip.active .hf-chip-label {
        color: #fff;
    }

.hf-chip-soon {
    left: auto;
    right: 8px;
    top: -8px;
    bottom: auto;
    transform: none;
    font-size: 0.55rem;
}

@media (hover: hover) {
    .hf-chip:hover {
        border-color: var(--hf-brand);
        box-shadow: 0 6px 16px rgba(var(--sheep-accent-rgb), 0.2);
    }

        .hf-chip:hover .hf-chip-art {
            transform: none;
            border-color: transparent;
            box-shadow: none;
        }
}

@media (max-width: 575.98px), (max-height: 520px) and (orientation: landscape) {
    .hf-chip {
        width: auto;
        padding: 4px 10px 4px 5px;
        font-size: 0.8rem;
    }

    .hf-chip-art {
        width: 26px;
        height: 26px;
    }

    .hf-chip-label {
        font-size: 0.8rem;
        -webkit-line-clamp: unset;
    }
}

/* ---------- category chips, round 2 (2026-10-08): two lines, green text, bare icons, lower ---------- */
/* One line when the chips fit the width; two lines (read left to right, scrolling together) only
   when they do not: site.js measures and sets .is-two-lines. Room above for the "Soon" tags. */
.hf-chips {
    display: flex;
    flex-direction: row;
    gap: 6px;
    padding: 9px 0 8px;
}

.hf-chip-line {
    display: contents;
}

.hf-chips.is-two-lines {
    flex-direction: column;
    gap: 10px;
}

    .hf-chips.is-two-lines .hf-chip-line {
        display: flex;
        gap: 6px;
        width: max-content;
    }

/* The "Soon" tag hangs on the chip's top-right corner (it was anchored to the small icon box
   and stuck out to the left of the chip, cut off on the first chip of a line). */
.hf-chip .hf-chip-art {
    position: static;
}

.hf-chip {
    padding: 6px 12px 6px 9px;
    gap: 6px;
    color: var(--hf-accent);
}

.hf-chip-art {
    width: 22px;
    height: 22px;
    background: transparent;
    color: var(--hf-accent);
}

.hf-chip-label,
.hf-chip.is-soon .hf-chip-label {
    color: var(--hf-accent);
}

.hf-chip.is-soon {
    opacity: 0.8;
}

.hf-chip.active .hf-chip-art {
    background: transparent;
}

.hf-chip-soon {
    top: -9px;
}

@media (max-width: 575.98px), (max-height: 520px) and (orientation: landscape) {
    .hf-chip {
        padding: 4px 10px 4px 8px;
    }

    .hf-chip-art {
        width: 20px;
        height: 20px;
    }

        .hf-chip .hf-ico {
            width: 16px;
            height: 16px;
        }
}

/* ---------- favourites and the satellite button (2026-10-08) ---------- */
.hf-card-actions {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hf-fav {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--hf-chip-border);
    background: var(--hf-chip-bg);
    color: var(--hf-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    transition: color .15s, border-color .15s, transform .15s;
}

    .hf-fav:hover {
        color: #e11d48;
        border-color: #e11d48;
    }

    .hf-fav.is-on {
        color: #e11d48;
        border-color: rgba(225, 29, 72, 0.4);
        background: rgba(225, 29, 72, 0.08);
    }

    .hf-fav:active {
        transform: scale(0.9);
    }

.hf-far-warning {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(var(--sheep-orange-rgb), 0.14);
    color: var(--sheep-orange-dark, #e76423);
    font-size: 0.74rem;
    font-weight: 700;
}

.is-dark .hf-far-warning,
[data-theme="dark"] .hf-far-warning {
    color: var(--sheep-accent);
}

@media (max-width: 575.98px) {
    .hf-card-actions {
        gap: 4px;
    }

    .hf-fav {
        width: 28px;
        height: 28px;
        font-size: 0.85rem;
    }
}

/* The Satellite / Plan button under the map's zoom buttons (feed map and /map). */
.sheep-map-sat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    background: #fff;
    color: #202124;
    font: 700 12px/1.2 system-ui, sans-serif;
    cursor: pointer;
    background-clip: padding-box;
}

    .sheep-map-sat:hover {
        color: #068125;
    }

    .sheep-map-sat.is-on {
        background: #08701f;
        color: #fff;
    }

/* The chosen category chip: a small cross says "tap to clear". */
.hf-chip-x {
    font-size: 0.7rem;
    margin-left: 2px;
    opacity: 0.9;
}

/* A shop picked on the map: its cards get an orange ring for a moment. */
.hf-store.is-map-selected {
    box-shadow: 0 0 0 3px var(--hf-brand), var(--hf-shadow);
    transition: box-shadow .2s ease;
}

/* The customer's position on the feed map: the client sheep, never hidden by shops. */
.hf-map-user {
    background: transparent;
    border: 0;
}

    .hf-map-user img {
        display: block;
        width: 64px;
        height: 64px;
        filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.35));
    }

/* ---------- colourful category icons (2026-10-10) ---------- */
/* Illustrations instead of line icons in the chips, the category tiles and the "soon" card.
   On the orange chosen chip they sit on a small white disc so orange icons stay visible. */
.hf-chip-art {
    width: 26px;
    height: 26px;
}

    .hf-chip .hf-ico-art {
        width: 24px;
        height: 24px;
    }

.hf-chip.active .hf-ico-art {
    background: #fff;
    border-radius: 50%;
    padding: 2px;
}

.hf-cattile-art .hf-ico-art {
    width: 44px;
    height: 44px;
}

.hf-soon-art .hf-ico-art {
    width: 56px;
    height: 56px;
}

.hf-chip.is-soon .hf-ico-art,
.hf-cattile.is-soon .hf-ico-art {
    filter: saturate(0.75);
}

@media (max-width: 575.98px), (max-height: 520px) and (orientation: landscape) {
    .hf-chip-art {
        width: 24px;
        height: 24px;
    }

        .hf-chip .hf-ico-art {
            width: 22px;
            height: 22px;
        }

    .hf-cattile-art .hf-ico-art {
        width: 36px;
        height: 36px;
    }
}

/* Deep-green page headings (light mode; --hf-heading follows the text colour in dark mode). */
.hf-catpage-head h1,
.hf-catpage-section {
    color: var(--hf-heading);
}

/* ---------- hero carousel on Accueil (2026-10-10) ---------- */
/* Wide: text left on a warm cream, photo right with a rounded left edge, controls on the photo.
   Narrow (container below 640 px: phones, or the list next to the map): the photo fills the card
   under a green shade, the title and button sit on top, the description and tag are dropped. */
.hf-hero {
    container-type: inline-size;
    position: relative;
    margin: 4px 0 24px;
    border-radius: 26px;
    overflow: hidden;
    background: #fff4e2;
    box-shadow: var(--hf-shadow);
}

[data-theme="dark"] .hf-hero,
.hf.is-dark .hf-hero {
    background: var(--hf-card);
}

.hf-hero-slide {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    min-height: 300px;
    animation: hf-hero-in .35s ease;
}

@keyframes hf-hero-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.hf-hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding: 30px 20px 56px 36px;
    min-width: 0;
}

.hf-hero-eyebrow {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hf-accent);
}

    .hf-hero-eyebrow::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--hf-brand);
    }

.hf-hero-title {
    margin: 0;
    font-size: clamp(1.6rem, 3.2vw, 2.45rem);
    line-height: 1.05;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: var(--hf-heading);
}

    /* A darker orange than the brand one: large text on cream still reads (contrast above 3:1). */
    .hf-hero-title em {
        display: block;
        font-style: normal;
        color: #bf6a00;
    }

[data-theme="dark"] .hf-hero-title em,
.hf.is-dark .hf-hero-title em {
    color: #068125;
}

.hf-hero-text {
    margin: 0;
    max-width: 36ch;
    font-size: 0.95rem;
    color: var(--hf-muted);
}

.hf-hero-cta {
    align-self: flex-start;
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 18px;
    border: 0;
    border-radius: 14px;
    background: var(--sheep-green-deep, var(--sheep-green));
    color: #fff;
    font-weight: 800;
    transition: background .15s, color .15s, transform .15s;
}

    .hf-hero-cta:hover,
    .hf-hero-cta:focus-visible {
        background: var(--hf-brand);
        color: #202124;
        transform: translateY(-1px);
    }

.hf-hero-media {
    position: relative;
    margin: 10px 10px 10px 0;
    border-radius: 150px 22px 22px 150px;
    overflow: hidden;
    background: var(--hf-media-bg);
}

    .hf-hero-media img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: var(--hf-hero-pos, 50% 50%);
    }

.hf-hero-label {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(32, 33, 36, 0.72);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
}

.hf-hero-controls {
    position: absolute;
    right: 24px;
    bottom: 22px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    border-radius: 999px;
    background: rgba(32, 33, 36, 0.62);
}

.hf-hero-arrow,
.hf-hero-dot {
    border: 0;
    background: transparent;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.hf-hero-arrow {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 0.8rem;
}

    .hf-hero-arrow:hover {
        background: rgba(255, 255, 255, 0.16);
    }

.hf-hero-dot {
    width: 22px;
    height: 28px;
    padding: 0;
}

    .hf-hero-dot span {
        width: 7px;
        height: 7px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.6);
        transition: width .2s, background .2s;
    }

    .hf-hero-dot.active span {
        width: 18px;
        background: var(--hf-brand);
    }

@container (max-width: 640px) {
    .hf-hero-slide {
        position: relative;
        grid-template-columns: 1fr;
        min-height: 200px;
    }

    .hf-hero-media {
        position: absolute;
        inset: 0;
        margin: 0;
        border-radius: 0;
    }

        .hf-hero-media img {
            object-position: 80% 50%;
        }

        .hf-hero-media::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, rgba(14, 50, 9, 0.94) 0%, rgba(14, 50, 9, 0.8) 42%, rgba(14, 50, 9, 0.1) 82%);
        }

    .hf-hero-copy {
        position: relative;
        z-index: 1;
        max-width: 74%;
        gap: 6px;
        padding: 18px 18px 46px;
    }

    .hf-hero-eyebrow {
        color: #cdeccf;
    }

    .hf-hero-title,
    .hf-hero-title em {
        font-size: 1.4rem;
    }

    .hf-hero-title {
        color: #fff;
    }

        .hf-hero-title em,
        [data-theme="dark"] .hf-hero-title em,
        .hf.is-dark .hf-hero-title em {
            color: #068125;
        }

    .hf-hero-text,
    .hf-hero-label,
    .hf-hero-arrow {
        display: none;
    }

    .hf-hero-cta {
        padding: 8px 14px;
        font-size: 0.85rem;
        white-space: nowrap;
        background: var(--hf-brand);
        color: #202124;
    }

    .hf-hero-controls {
        right: 12px;
        bottom: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hf-hero-slide {
        animation: none;
    }
}

/* ---------- map markers with the colourful icons (2026-10-10) ---------- */
/* Round white badge, the icon a little more saturated so it pops on the map tiles; the open /
   closed / chosen rings stay as before. Photos (zoomed right in) keep their full frame. */
.hf-map-badge:not(.is-photo) {
    border-radius: 50%;
    padding: 4px;
    border-color: var(--sheep-green-deep, #068125);
}

    .hf-map-badge:not(.is-photo) img {
        object-fit: contain;
        filter: saturate(1.45) contrast(1.08);
    }

    .hf-map-badge.is-closed:not(.is-photo) {
        border-color: #9aa0a6;
    }

    .hf-map-badge.is-active:not(.is-photo) {
        border-color: var(--sheep-accent, #0f8b27);
    }

/* ---------- hero photo flush with the card (2026-10-10) ---------- */
/* The photo meets the card's top, right and bottom edges with a straight left edge that fades
   softly from the card's colour into the picture (no curved shape). */
@container (min-width: 641px) {
    .hf-hero-media {
        margin: 0;
        border-radius: 0;
    }

        .hf-hero-media::before {
            content: "";
            position: absolute;
            inset: 0 auto 0 0;
            z-index: 1;
            width: 32%;
            background: linear-gradient(90deg, #fff4e2 0%, rgba(255, 244, 226, 0) 100%);
            pointer-events: none;
        }

    [data-theme="dark"] .hf-hero-media::before,
    .hf.is-dark .hf-hero-media::before {
        background: linear-gradient(90deg, var(--hf-card) 0%, transparent 100%);
    }
}

/* ---------- large map (2026-10-10) ---------- */
/* Desktop only: the map takes two thirds of the space right of the sidebar; the shops beside it
   switch to the plain grid, which falls to one or two columns by itself. */
.hf-map-size {
    display: none;
}

@media (min-width: 992px) {
    .hf-map-size {
        position: absolute;
        top: 14px;
        right: 14px;
        z-index: 500;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 18px 10px 14px;
        border: 0;
        border-radius: 999px;
        background: #fff;
        color: var(--sheep-green-deep, #068125);
        font-size: 0.8rem;
        font-weight: 800;
        box-shadow: 0 4px 14px rgba(32, 33, 36, 0.22);
    }

        .hf-map-size:hover {
            background: var(--sheep-accent, #0f8b27);
            color: #202124;
        }

    .hf.hf-map-on.hf-map-wide {
        --hf-map-w: calc((100vw - var(--sidebar-push-expanded, 242px)) * 2 / 3);
    }

        .hf.hf-map-wide .hf-grid {
            grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        }
}

/* ==========================================================================
   Accueil layout (2026-10-10): hero, then the pinned category bar with the
   universes (row 1) and round category tiles (row 2); discover tiles and the
   values strip before "all shops".
   ========================================================================== */
.hf-hero-wrap {
    max-width: var(--hf-max-w);
    margin: 0 auto;
    padding: 12px 16px 0;
}

    .hf-hero-wrap .hf-hero {
        margin: 0 0 6px;
    }

@media (min-width: 992px) {
    .hf-hero-wrap {
        padding: 16px 24px 0;
    }

    .hf.hf-map-on .hf-hero-wrap {
        padding-left: 20px;
        padding-right: 20px;
    }
}

.hf-cats {
    padding-top: 10px;
}

/* ---- row 1: universes ---- */
.hf-unis {
    max-width: var(--hf-max-w);
    margin: 0 auto;
    display: flex;
    gap: 8px;
    padding: 2px 0 8px;
    overflow-x: auto;
    scrollbar-width: none;
}

    .hf-unis::-webkit-scrollbar {
        display: none;
    }

.hf-uni {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 14px 0 9px;
    border: 1px solid var(--hf-chip-border);
    border-radius: 12px;
    background: var(--hf-chip-bg);
    color: var(--hf-text);
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
    transition: border-color .15s, background .15s, color .15s;
}

    .hf-uni .hf-ico-art {
        width: 24px;
        height: 24px;
    }

    .hf-uni .hf-ico:not(.hf-ico-art) {
        width: 20px;
        height: 20px;
    }

    .hf-uni:hover {
        border-color: var(--hf-brand);
    }

    .hf-uni.active {
        background: var(--sheep-green-deep, var(--sheep-green));
        border-color: var(--sheep-green-deep, var(--sheep-green));
        color: #fff;
    }

        .hf-uni.active .hf-ico-art {
            background: #fff;
            border-radius: 7px;
            padding: 2px;
        }

    .hf-uni.is-soon {
        opacity: 0.78;
    }

.hf-uni-soon {
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(var(--sheep-orange-rgb), 0.16);
    color: var(--sheep-orange-ink, #a94a1c);
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

[data-theme="dark"] .hf-uni-soon,
.hf.is-dark .hf-uni-soon {
    color: var(--sheep-orange-ink, #f9c792);
}

/* ---- row 2: category tiles (round icons, label below) ---- */
.hf-cats .hf-tiles,
.hf-cats .hf-tiles.is-two-lines {
    display: flex;
    flex-direction: row;
    gap: 4px;
    padding: 6px 0 10px;
    overflow-x: auto;
    scrollbar-width: none;
}

    .hf-cats .hf-tiles::-webkit-scrollbar {
        display: none;
    }

.hf-tile {
    position: relative;
    flex: 0 0 auto;
    width: 86px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 4px 0 0;
    border: 0;
    background: transparent;
    color: var(--hf-text);
    text-decoration: none;
}

.hf-tile-art {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f6f7;
    border: 2px solid transparent;
    transition: border-color .15s, background .15s, box-shadow .15s, transform .15s;
}

[data-theme="dark"] .hf-tile-art,
.hf.is-dark .hf-tile-art {
    background: var(--hf-pill-bg);
}

.hf-tile .hf-ico-art {
    width: 34px;
    height: 34px;
}

.hf-tile .hf-ico:not(.hf-ico-art) {
    width: 24px;
    height: 24px;
    color: var(--hf-accent);
}

.hf-tile-label {
    max-width: 86px;
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.15;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (hover: hover) {
    .hf-tile:hover .hf-tile-art {
        border-color: var(--hf-brand);
        transform: translateY(-2px);
    }
}

.hf-tile.active .hf-tile-art {
    border-color: var(--hf-brand);
    background: #fff;
    box-shadow: 0 6px 14px rgba(var(--sheep-accent-rgb), 0.3);
}

.hf-tile.active .hf-tile-label {
    font-weight: 800;
    color: var(--hf-heading);
}

.hf-tile-x {
    position: absolute;
    top: 0;
    right: 12px;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--hf-brand);
    color: #202124;
    font-size: 0.55rem;
}

.hf-tile.is-soon {
    opacity: 0.72;
}

.hf-tile-soon {
    position: absolute;
    top: -3px;
    left: 50%;
    transform: translateX(-50%);
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--hf-brand);
    color: #202124;
    font-size: 0.52rem;
    font-weight: 800;
    text-transform: uppercase;
    white-space: nowrap;
}

.hf-tile-all .hf-tile-art {
    background: var(--hf-accent-soft);
}

/* Phones: one-line chips for the tiles, so the pinned bar stays short. */
@media (max-width: 575.98px) {
    .hf-uni {
        height: 36px;
        font-size: 0.8rem;
        padding: 0 12px 0 8px;
    }

    .hf-cats .hf-tiles,
    .hf-cats .hf-tiles.is-two-lines {
        gap: 6px;
        padding: 2px 0 8px;
    }

    .hf-tile {
        width: auto;
        flex-direction: row;
        gap: 6px;
        padding: 3px 11px 3px 4px;
        border: 1px solid var(--hf-chip-border);
        border-radius: 999px;
        background: var(--hf-chip-bg);
    }

    .hf-tile-art {
        width: 26px;
        height: 26px;
        border: 0;
        background: transparent;
    }

    .hf-tile .hf-ico-art {
        width: 22px;
        height: 22px;
    }

    .hf-tile-label {
        max-width: none;
        display: block;
        white-space: nowrap;
        font-size: 0.78rem;
    }

    .hf-tile.active {
        background: var(--hf-brand);
        border-color: var(--hf-brand);
    }

        .hf-tile.active .hf-tile-art {
            background: #fff;
            box-shadow: none;
        }

        .hf-tile.active .hf-tile-label {
            color: #202124;
        }

    .hf-tile-x {
        position: static;
        width: auto;
        height: auto;
        background: transparent;
    }

    .hf-tile-soon {
        position: static;
        transform: none;
    }
}

/* ---- discover tiles ---- */
.hf-discover {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin: 8px 0 22px;
}

.hf-discover-tile {
    position: relative;
    display: flex;
    min-height: 190px;
    border-radius: 22px;
    overflow: hidden;
    background: #e8f4e1;
}

    .hf-discover-tile.is-peach { background: #fff1dc; }
    .hf-discover-tile.is-pink { background: #fde8ef; }
    .hf-discover-tile.is-lavender { background: #eeeafd; }
    .hf-discover-tile.is-mint { background: #e3f6f1; }

[data-theme="dark"] .hf-discover-tile,
.hf.is-dark .hf-discover-tile {
    background: var(--hf-card);
}

.hf-discover-copy {
    position: relative;
    z-index: 1;
    flex: 1 1 55%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 22px 0 22px 24px;
}

.hf-discover-tag {
    margin: 0;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hf-muted);
}

.hf-discover-copy h3 {
    margin: 0 0 6px;
    font-size: 1.35rem;
    font-weight: 900;
    line-height: 1.1;
    color: var(--hf-heading);
}

.hf-discover-tile.is-pink .hf-discover-copy h3 {
    color: #9d174d;
}

[data-theme="dark"] .hf-discover-tile.is-pink .hf-discover-copy h3,
.hf.is-dark .hf-discover-tile.is-pink .hf-discover-copy h3 {
    color: var(--hf-heading);
}

.hf-discover-cta {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 0;
    border-radius: 12px;
    background: #fff;
    color: #202124;
    font-size: 0.85rem;
    font-weight: 800;
    box-shadow: 0 4px 10px rgba(32, 33, 36, 0.08);
    transition: background .15s, transform .15s;
}

    .hf-discover-cta:hover {
        background: var(--hf-brand);
        transform: translateY(-1px);
    }

.hf-discover-art {
    position: relative;
    flex: 1 1 45%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.hf-discover-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 120px 0 0 120px;
}

.hf-discover-icon {
    width: 64px;
    height: 64px;
    filter: saturate(1.25) drop-shadow(0 6px 10px rgba(32, 33, 36, 0.12));
}

    .hf-discover-icon:nth-child(2) {
        width: 78px;
        height: 78px;
        margin-top: -18px;
    }

/* ---- values strip ---- */
.hf-values {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px 24px;
    margin: 0 0 28px;
    padding: 20px 24px;
    border: 1px solid var(--hf-card-border);
    border-radius: 20px;
    background: var(--hf-accent-soft);
}

    .hf-values > div {
        display: flex;
        align-items: flex-start;
        gap: 12px;
    }

    .hf-values i {
        font-size: 1.5rem;
        color: var(--hf-accent);
        line-height: 1;
    }

    .hf-values span {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .hf-values strong {
        font-size: 0.92rem;
        color: var(--hf-heading);
    }

    .hf-values small {
        font-size: 0.82rem;
        color: var(--hf-muted);
    }

/* ---------- estimated delivery fee on the cards (2026-10-10) ---------- */
.hf-fee {
    color: var(--hf-accent);
    font-weight: 700;
    white-space: nowrap;
}

/* ---------- phones and tablets: the map can be enlarged too (2026-10-10) ---------- */
@media (max-width: 991.98px) {
    .hf-map {
        position: relative;
    }

    .hf-map-size {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 500;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 13px;
        border: 0;
        border-radius: 999px;
        background: #fff;
        color: var(--sheep-green-deep, #068125);
        font-size: 0.78rem;
        font-weight: 800;
        box-shadow: 0 4px 14px rgba(32, 33, 36, 0.22);
    }

    .hf.hf-map-wide .hf-map {
        height: 62vh;
        min-height: 320px;
    }
}

/* ---------- Phones: delivery / pickup moves from the top bar into the page (Benji, 2026-10-11) ----------
   The top bar keeps the full logo, the search, the language and the sign-in; the shop list shows
   its own switch above the categories (same choice, DeliveryModeState). Its search box stays
   hidden: the one in the top bar does the job. */
@media (max-width: 991.98px) {
    .hf-host-modebar .hf-top {
        display: block;
    }

    .hf-host-modebar .hf-mode {
        display: inline-flex;
    }

    .hf-host-modebar .hf-search {
        display: none;
    }

    .hf-host-modebar .hf-topbar {
        margin-bottom: 0;
    }
}

/* ==========================================================================
   Accueil, model design (sheep-me-lausanne, Benji, 2026-10-12)
   White page. The hero: a small grey overline with an orange dot, a big serif title (second line
   in italics), grey text, the orange gradient button, and the photo beside it (under it on
   phones) with a large rounded top-left corner. Then a section heading over the universes (white
   tabs, the chosen one pale orange) and the categories (pictures on light grey squares, names
   under them). The category block scrolls with the page, as on the model. Cards: white, hairline,
   20 px corners, the photo inset with its own corners. Website only (.hf-host): the app keeps
   its layout and only takes the colours.
   ========================================================================== */
.hf-host .hf {
    --hf-bg: #ffffff;
    --hf-card-border: #e9ebee;
    --hf-chip-border: #e9ebee;
    --hf-heading: #202124;
    --hf-media-bg: #f5f6f7;
    --hf-shadow: none;
}

[data-theme="dark"] .hf-host .hf {
    --hf-bg: #111a2b;
    --hf-card-border: rgba(148, 163, 184, 0.18);
    --hf-chip-border: rgba(148, 163, 184, 0.22);
    --hf-heading: #e9ebee;
    --hf-media-bg: #1b2742;
}

/* ---- delivery / pickup (phones, above the page) ---- */
.hf-host .hf .hf-mode {
    border-radius: 11px;
    background: var(--sheep-soft);
}

.hf-host .hf .hf-mode-btn {
    border-radius: 8px;
    font-size: 0.8rem;
}

    .hf-host .hf .hf-mode-btn.active {
        background: var(--sheep-accent-soft);
        color: var(--sheep-accent-ink);
        box-shadow: inset 0 0 0 1px var(--sheep-accent-line);
    }

/* ---- hero ---- */
.hf-host .hf .hf-hero-wrap {
    padding-top: 8px;
}

/* Desktop: the hero stands as far below the top bar as from the sides, 24 px (Benji, 2026-10-12);
   it touched the bar. The bar is 62 px tall there and the page starts at 56 px, hence 6 + 24. */
@media (min-width: 992px) {
    .hf-host .hf .hf-hero-wrap {
        padding-top: 30px;
    }
}

.hf-host .hf .hf-hero {
    margin: 0 0 6px;
    border-radius: 0;
    overflow: visible;
    background: transparent;
    box-shadow: none;
}

/* Compact hero (Eric, 2026-10-16): the first restaurant row shows without scrolling on a 900 px-high
   screen. Smaller picture and title, tighter paddings; the same content. */
.hf-host .hf .hf-hero-slide {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 24px;
    min-height: 0;
}

.hf-host .hf .hf-hero-copy {
    gap: 0;
    padding: 6px 16px 6px 4px;
}

.hf-host .hf .hf-hero-eyebrow {
    margin: 0 0 8px;
    gap: 8px;
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--hf-muted);
}

    .hf-host .hf .hf-hero-eyebrow::before {
        width: 6px;
        height: 6px;
        background: var(--sheep-accent);
    }

.hf-host .hf .hf-hero-title,
.hf-host .hf .hf-hero-title em {
    font-family: var(--sheep-serif);
    font-weight: 400;
    font-size: clamp(1.6rem, 2.6vw, 2rem);
    line-height: 1.08;
    letter-spacing: -0.045em;
    color: var(--hf-text);
}

    .hf-host .hf .hf-hero-title em {
        display: block;
        font-style: italic;
    }

.hf-host .hf .hf-hero-text {
    display: block;
    max-width: 420px;
    margin: 8px 0 0;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--hf-muted);
}

.hf-host .hf .hf-hero-cta {
    min-width: 200px;
    min-height: 42px;
    margin-top: 12px;
    justify-content: space-between;
    gap: 24px;
    padding: 10px 16px;
    border-radius: 14px;
    background: var(--sheep-grad);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 650;
    white-space: nowrap;
}

    .hf-host .hf .hf-hero-cta:hover,
    .hf-host .hf .hf-hero-cta:focus-visible {
        background: var(--sheep-grad-hover);
        color: #fff;
        box-shadow: 0 6px 16px rgba(var(--sheep-accent-dark-rgb), 0.24);
    }

.hf-host .hf .hf-hero-media {
    height: clamp(180px, 16vw, 220px);
    margin: 0;
    border-radius: 95px 24px 24px 24px;
    box-shadow: 0 8px 28px rgba(32, 33, 36, 0.05);
}

    .hf-host .hf .hf-hero-media::before,
    .hf-host .hf .hf-hero-media::after {
        display: none;
    }

.hf-host .hf .hf-hero-label {
    top: 16px;
    right: 16px;
    background: rgba(255, 255, 255, 0.94);
    color: #202124;
    font-weight: 650;
}

    .hf-host .hf .hf-hero-label i {
        color: var(--sheep-green);
    }

.hf-host .hf .hf-hero-controls {
    right: 18px;
    bottom: 16px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 2px 10px rgba(32, 33, 36, 0.1);
}

.hf-host .hf .hf-hero-arrow {
    color: #202124;
}

    .hf-host .hf .hf-hero-arrow:hover {
        background: #f5f6f7;
    }

.hf-host .hf .hf-hero-dot span {
    background: #dadce0;
}

.hf-host .hf .hf-hero-dot.active span {
    background: var(--sheep-accent);
}

/* Phones (or the list squeezed by the map): text, button, then the photo. */
@container (max-width: 640px) {
    .hf-host .hf .hf-hero-slide {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .hf-host .hf .hf-hero-copy {
        max-width: none;
        padding: 6px 2px 0;
    }

    .hf-host .hf .hf-hero-eyebrow {
        margin-bottom: 6px;
        font-size: 0.6rem;
        color: var(--hf-muted);
    }

    .hf-host .hf .hf-hero-title,
    .hf-host .hf .hf-hero-title em {
        font-size: clamp(1.95rem, 8.6vw, 2.6rem);
        color: var(--hf-text);
    }

    .hf-host .hf .hf-hero-text {
        margin-top: 6px;
        font-size: 0.86rem;
        line-height: 1.45;
    }

    .hf-host .hf .hf-hero-cta {
        align-self: stretch;
        width: 100%;
        min-width: 0;
        margin-top: 10px;
        padding: 11px 16px;
        font-size: 0.875rem;
    }

    .hf-host .hf .hf-hero-media {
        position: relative;
        inset: auto;
        height: 140px;
        border-radius: 60px 20px 20px 20px;
    }

    .hf-host .hf .hf-hero-label {
        display: inline-flex;
        top: 12px;
        right: 12px;
    }

    .hf-host .hf .hf-hero-controls {
        right: 12px;
        bottom: 12px;
    }
}

/* ---- section heading over the categories ---- */
.hf-section-head {
    max-width: var(--hf-max-w);
    margin: 10px auto 2px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.hf-overline {
    display: none;   /* compact home (Eric, 2026-10-16): the title alone */
    margin-bottom: 10px;
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--hf-muted);
}

.hf-section-head h2 {
    margin: 0;
    font-size: clamp(1.2rem, 1.8vw, 1.35rem);
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: -0.045em;
    color: var(--hf-heading);
}

.hf-text-link {
    flex-shrink: 0;
    padding: 12px 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--sheep-accent-ink);
    text-decoration: none;
    white-space: nowrap;
}

    .hf-text-link:hover,
    .hf-text-link:focus-visible {
        color: var(--sheep-accent);
    }

@media (min-width: 992px) {
    .hf-section-head {
        padding: 0 24px;
    }
}

/* ---- universes and categories: scroll with the page ---- */
.hf-host .hf .hf-cats {
    position: relative;
    top: auto;
    border-bottom: 0;
    padding-top: 14px;
}

.hf-host .hf .hf-unis {
    gap: 7px;
    padding: 2px 0 12px;
}

.hf-host .hf .hf-uni {
    height: 46px;
    padding: 0 15px 0 11px;
    border: 1px solid var(--hf-chip-border);
    border-radius: 11px;
    background: var(--hf-chip-bg);
    color: var(--hf-text);
    font-size: 0.78rem;
    font-weight: 500;
}

    .hf-host .hf .hf-uni .hf-ico-art {
        width: 28px;
        height: 28px;
    }

    .hf-host .hf .hf-uni:hover {
        border-color: var(--sheep-accent-line);
    }

    .hf-host .hf .hf-uni.active {
        background: var(--sheep-accent-soft);
        border-color: var(--sheep-accent);
        color: var(--sheep-accent-ink);
        font-weight: 700;
    }

        .hf-host .hf .hf-uni.active .hf-ico-art {
            background: transparent;
            padding: 0;
        }

.hf-host .hf .hf-cats .hf-tiles,
.hf-host .hf .hf-cats .hf-tiles.is-two-lines {
    gap: 10px;
    padding: 4px 0 12px;
}

.hf-host .hf .hf-tile {
    width: 84px;
    flex-direction: column;
    gap: 8px;
    padding: 0 0 4px;
    border: 0;
    border-radius: 17px;
    background: transparent;
}

.hf-host .hf .hf-tile-art {
    width: 80px;
    height: 79px;
    border: 1px solid transparent;
    border-radius: 20px;
    background: var(--sheep-soft);
    box-shadow: none;
}

.hf-host .hf .hf-tile .hf-ico-art {
    width: 62px;
    height: 62px;
}

.hf-host .hf .hf-tile .hf-ico:not(.hf-ico-art) {
    width: 30px;
    height: 30px;
    color: var(--sheep-green);
}

.hf-host .hf .hf-tile-label {
    max-width: 84px;
    display: -webkit-box;
    white-space: normal;
    font-size: 0.66rem;
    font-weight: 550;
    color: var(--hf-text);
}

@media (hover: hover) {
    .hf-host .hf .hf-tile:hover .hf-tile-art {
        border-color: var(--sheep-accent-line);
        transform: translateY(-2px);
    }
}

.hf-host .hf .hf-tile.active {
    background: transparent;
    border-color: transparent;
}

    .hf-host .hf .hf-tile.active .hf-tile-art {
        background: var(--sheep-accent-soft);
        border-color: var(--sheep-accent);
        box-shadow: none;
    }

    .hf-host .hf .hf-tile.active .hf-tile-label {
        color: var(--sheep-accent-ink);
        font-weight: 700;
    }

.hf-host .hf .hf-tile-x {
    position: absolute;
    top: 4px;
    right: 6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--sheep-grad);
    color: #fff;
    font-size: 0.55rem;
}

.hf-host .hf .hf-tile-soon {
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    border: 1px solid var(--sheep-accent-line);
    background: #fff;
    color: var(--sheep-accent-ink);
}

.hf-host .hf .hf-tile-all .hf-tile-art {
    background: var(--sheep-green-soft);
}

@media (min-width: 992px) {
    .hf-host .hf .hf-tile {
        width: 104px;
    }

    .hf-host .hf .hf-tile-art {
        width: 96px;
        height: 94px;
        border-radius: 24px;
    }

    .hf-host .hf .hf-tile .hf-ico-art {
        width: 74px;
        height: 74px;
    }

    .hf-host .hf .hf-tile-label {
        max-width: 104px;
        font-size: 0.7rem;
    }
}

[data-theme="dark"] .hf-host .hf .hf-tile-art {
    background: #1b2742;
}

[data-theme="dark"] .hf-host .hf .hf-tile-soon {
    background: #1b2742;
}

/* ---- filters: white chips with a hairline, the chosen one pale orange ---- */
.hf-host .hf .hf-filters {
    gap: 7px;
    padding-top: 6px;
}

.hf-host .hf .hf-sort,
.hf-host .hf .hf-distance-chip,
.hf-host .hf .hf-location,
.hf-host .hf .hf-mapbtn {
    min-height: 42px;
    border: 1px solid var(--hf-chip-border);
    border-radius: 11px;
    background: var(--hf-chip-bg);
    color: var(--hf-muted);
    font-size: 0.78rem;
    font-weight: 550;
    box-shadow: none;
}

.hf-host .hf .hf-sort {
    padding: 0 12px;
}

.hf-host .hf .hf-sort-select {
    font-size: 0.78rem;
    font-weight: 550;
}

.hf-host .hf .hf-distance {
    gap: 7px;
    padding: 0;
    border-radius: 0;
    background: transparent;
}

.hf-host .hf .hf-distance-chip {
    padding: 0 14px;
}

.hf-host .hf .hf-location,
.hf-host .hf .hf-mapbtn {
    padding: 0 14px;
    color: var(--hf-text);
}

    .hf-host .hf .hf-location i,
    .hf-host .hf .hf-mapbtn i {
        color: var(--sheep-green);
    }

    .hf-host .hf .hf-distance-chip.active,
    .hf-host .hf .hf-mapbtn.active {
        background: var(--sheep-accent-soft);
        border-color: var(--sheep-accent);
        color: var(--sheep-accent-ink);
        font-weight: 700;
    }

        .hf-host .hf .hf-mapbtn.active i {
            color: var(--sheep-accent-ink);
        }

.hf-host .hf .hf-tagfilter {
    min-height: 42px;
    border-radius: 11px;
    border-color: var(--sheep-accent);
    background: var(--sheep-accent-soft);
    color: var(--sheep-accent-ink);
}

/* ---- rows: plain headings, "Tout voir" in dark orange ---- */
.hf-host .hf .hf-row-head h2 {
    padding-bottom: 0;
    font-size: 1.45rem;
    font-weight: 650;
    letter-spacing: -0.04em;
    color: var(--hf-heading);
}

    .hf-host .hf .hf-row-head h2::after {
        display: none;
    }

.hf-host .hf .hf-row-count {
    font-weight: 500;
}

.hf-host .hf .hf-see-all {
    color: var(--sheep-accent-ink);
    font-size: 0.8rem;
    font-weight: 600;
}

    .hf-host .hf .hf-see-all:hover {
        color: var(--sheep-accent);
    }

.hf-host .hf .hf-see-all {
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .hf-host .hf .hf-row-head h2 {
        font-size: 1.15rem;
        letter-spacing: -0.03em;
    }
}

/* ---- shop cards ---- */
.hf-host .hf .hf-store {
    padding: 8px;
    border: 1px solid var(--hf-card-border);
    border-radius: 20px;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

@media (hover: hover) {
    .hf-host .hf .hf-store:hover {
        border-color: #dadce0;
        box-shadow: 0 8px 24px rgba(32, 33, 36, 0.06);
    }
}

.hf-host .hf .hf-store-media {
    border-radius: 13px;
}

.hf-host .hf .hf-store-info {
    padding: 12px 6px 6px;
}

.hf-host .hf .hf-store .hf-name h3 {
    font-size: 1.02rem;
    font-weight: 650;
    letter-spacing: -0.025em;
}

.hf-host .hf .hf-store .hf-meta {
    font-size: 0.78rem;
    font-weight: 400;
}

.hf-host .hf .hf-fav,
.hf-host .hf .hf-map-pin {
    border-color: var(--hf-chip-border);
    color: var(--sheep-green);
}

    .hf-host .hf .hf-fav:hover,
    .hf-host .hf .hf-fav.is-on {
        color: var(--sheep-green);
        border-color: rgba(6, 129, 37, 0.3);
        background: var(--sheep-green-soft);
    }

/* ---- discover tiles: the model's light grey panels, serif titles, a dark orange link ---- */
.hf-host .hf .hf-discover-tile,
.hf-host .hf .hf-discover-tile.is-peach,
.hf-host .hf .hf-discover-tile.is-pink,
.hf-host .hf .hf-discover-tile.is-lavender,
.hf-host .hf .hf-discover-tile.is-mint {
    border-radius: 25px;
    background: var(--sheep-soft);
}

.hf-host .hf .hf-discover-tag {
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.14em;
}

.hf-host .hf .hf-discover-copy h3,
.hf-host .hf .hf-discover-tile.is-pink .hf-discover-copy h3 {
    font-family: var(--sheep-serif);
    font-size: 1.55rem;
    font-weight: 400;
    letter-spacing: -0.04em;
    color: var(--hf-heading);
}

.hf-host .hf .hf-discover-cta {
    padding: 10px 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--sheep-accent-ink);
    font-size: 0.85rem;
    font-weight: 600;
}

    .hf-host .hf .hf-discover-cta:hover {
        background: transparent;
        color: var(--sheep-accent);
        transform: none;
    }

.hf-host .hf .hf-discover-photo {
    border-radius: 95px 0 0 0;
}

/* ---- values: white with a hairline, green icons ---- */
.hf-host .hf .hf-values {
    border: 1px solid var(--hf-card-border);
    border-radius: 19px;
    background: var(--hf-card);
    padding: 24px 28px;
}

    .hf-host .hf .hf-values i {
        color: var(--sheep-green);
    }

    .hf-host .hf .hf-values strong {
        font-weight: 650;
    }

/* The map's enlarge button: the gradient on hover, like every orange button. */
.hf-map-size:hover {
    background: var(--sheep-grad);
    color: #fff;
}

/* Signed in on a phone: the top bar's delivery / pickup button does the job, so the list's own
   switch above the categories goes (visitors keep it). */
@media (max-width: 991.98px) {
    body:has(.sheep-mode-switch-top) .hf-host-modebar .hf-top {
        display: none;
    }
}

/* ==========================================================================
   Hero, dark banner (Benji's captures, 2026-10-12)
   A dark card per slide (brown for the restaurants, deep green for the groceries), the photo on the
   right fading into it, a small white line, a heavy rounded title (white, then orange), white
   text and a white pill button; arrows and dots centred at the bottom. The words follow delivery /
   pickup (HomeHero.razor). Narrow: the photo on top, the words under it on the dark card.
   ========================================================================== */
.hf-host .hf .hf-hero {
    border-radius: 18px;
    overflow: hidden;
    background: #24160d;
    box-shadow: none;
}

.hf-host .hf .hf-hero-slide {
    --hero-bg: #24160d;
    position: relative;
    display: block;
    min-height: 272px;
    background: var(--hero-bg);
}

    .hf-host .hf .hf-hero-slide.is-grocery {
        --hero-bg: #17301a;
    }

    .hf-host .hf .hf-hero-slide.is-offers {
        --hero-bg: #2e1610;
    }

    .hf-host .hf .hf-hero-slide.is-delivery {
        --hero-bg: #13261b;
    }

    /* Benji's Asian food and flowers pictures (2026-10-12): a warm dark brown, a deep wine red. */
    .hf-host .hf .hf-hero-slide.is-asian {
        --hero-bg: #20140c;
    }

    .hf-host .hf .hf-hero-slide.is-flowers {
        --hero-bg: #2b1419;
    }

.hf-host .hf .hf-hero-media {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: 66%;
    height: auto;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--hero-bg);
}

    .hf-host .hf .hf-hero-media::before {
        content: "";
        display: block;
        position: absolute;
        inset: 0 auto 0 0;
        z-index: 1;
        width: 42%;
        background: linear-gradient(90deg, var(--hero-bg) 0%, transparent 100%);
        pointer-events: none;
    }

    .hf-host .hf .hf-hero-media img {
        object-position: var(--hf-hero-pos, 50% 50%);
    }

.hf-host .hf .hf-hero-label {
    display: none;
}

.hf-host .hf .hf-hero-copy {
    position: relative;
    z-index: 2;
    max-width: 54%;
    gap: 0;
    padding: 34px 40px 52px;
}

.hf-host .hf .hf-hero-eyebrow {
    margin: 0 0 12px;
    font-family: var(--sheep-display);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
    color: #fff;
}

    .hf-host .hf .hf-hero-eyebrow::before {
        display: none;
    }

.hf-host .hf .hf-hero-title,
.hf-host .hf .hf-hero-title em {
    font-family: var(--sheep-display);
    font-size: clamp(1.9rem, 2.9vw, 2.65rem);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: #fff;
}

    .hf-host .hf .hf-hero-title em {
        display: block;
        font-style: normal;
        color: #8fdc9e;
    }

.hf-host .hf .hf-hero-text {
    max-width: 440px;
    margin: 14px 0 0;
    font-family: var(--sheep-display);
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.92);
}

.hf-host .hf .hf-hero-cta {
    align-self: flex-start;
    width: auto;
    min-width: 0;
    min-height: 0;
    margin-top: 22px;
    justify-content: flex-start;
    gap: 10px;
    padding: 11px 20px;
    border-radius: 999px;
    background: #fff;
    color: #202124;
    font-family: var(--sheep-display);
    font-size: 0.84rem;
    font-weight: 800;
    text-decoration: none;
    box-shadow: none;
}

    .hf-host .hf .hf-hero-cta:hover,
    .hf-host .hf .hf-hero-cta:focus-visible {
        background: #fff;
        color: #202124;
        transform: translateY(-1px);
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
    }

.hf-host .hf .hf-hero-controls {
    left: 50%;
    right: auto;
    bottom: 12px;
    transform: translateX(-50%);
    gap: 6px;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

.hf-host .hf .hf-hero-arrow {
    display: inline-flex;
    width: 26px;
    height: 26px;
    color: #fff;
}

    .hf-host .hf .hf-hero-arrow:hover {
        background: rgba(255, 255, 255, 0.14);
    }

.hf-host .hf .hf-hero-dot {
    width: 14px;
}

    .hf-host .hf .hf-hero-dot span {
        width: 7px;
        height: 7px;
        background: rgba(255, 255, 255, 0.55);
    }

    .hf-host .hf .hf-hero-dot.active span {
        width: 7px;
        background: #8fdc9e;
    }

@container (max-width: 640px) {
    .hf-host .hf .hf-hero-slide {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .hf-host .hf .hf-hero-media {
        position: relative;
        inset: auto;
        order: -1;
        width: 100%;
        height: 170px;
        border-radius: 0;
    }

        .hf-host .hf .hf-hero-media::before {
            inset: auto 0 0 0;
            width: 100%;
            height: 55%;
            background: linear-gradient(0deg, var(--hero-bg) 0%, transparent 100%);
        }

    .hf-host .hf .hf-hero-copy {
        max-width: none;
        padding: 6px 20px 50px;
    }

    .hf-host .hf .hf-hero-title,
    .hf-host .hf .hf-hero-title em {
        font-size: clamp(1.6rem, 7.4vw, 2rem);
        color: #fff;
    }

        .hf-host .hf .hf-hero-title em {
            color: #8fdc9e;
        }

    .hf-host .hf .hf-hero-text {
        margin-top: 10px;
        font-size: 0.86rem;
    }

    .hf-host .hf .hf-hero-cta {
        align-self: flex-start;
        width: auto;
        margin-top: 16px;
        font-size: 0.82rem;
    }

    .hf-host .hf .hf-hero-controls {
        right: auto;
        bottom: 12px;
    }

    .hf-host .hf .hf-hero-arrow {
        display: inline-flex;
    }
}

/* ---- the hero turns by itself (Benji, 2026-10-12) ----
   Every slide sits in the same grid cell, so the banner keeps the height of the tallest one and
   never jumps. The new slide fades in over the old one (which stays until it is covered), its photo
   settles from a slight zoom and its words rise in one after the other. Nothing moves for visitors
   who asked their device for less motion. */
.hf-hero-track {
    display: grid;
}

    .hf-hero-track > .hf-hero-slide {
        grid-area: 1 / 1;
        opacity: 0;
        visibility: hidden;
        animation: none;
        transition: opacity 0s linear .9s, visibility 0s linear .9s;
    }

        .hf-hero-track > .hf-hero-slide.is-current {
            z-index: 1;
            opacity: 1;
            visibility: visible;
            transition: opacity .9s ease, visibility 0s;
        }

    .hf-hero-track .hf-hero-media {
        overflow: hidden;
    }

    .hf-hero-track .is-current .hf-hero-media img {
        animation: hf-hero-settle 7s cubic-bezier(.2, .6, .3, 1) backwards;
    }

    .hf-hero-track .is-current .hf-hero-copy > * {
        animation: hf-hero-rise .7s cubic-bezier(.2, .7, .3, 1) backwards;
    }

        .hf-hero-track .is-current .hf-hero-copy > :nth-child(1) {
            animation-delay: .15s;
        }

        .hf-hero-track .is-current .hf-hero-copy > :nth-child(2) {
            animation-delay: .25s;
        }

        .hf-hero-track .is-current .hf-hero-copy > :nth-child(3) {
            animation-delay: .35s;
        }

        .hf-hero-track .is-current .hf-hero-copy > :nth-child(4) {
            animation-delay: .45s;
        }

@keyframes hf-hero-settle {
    from {
        transform: scale(1.07);
    }

    to {
        transform: scale(1);
    }
}

@keyframes hf-hero-rise {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* Pause / play, after the arrows. */
.hf-host .hf .hf-hero-pause {
    margin-left: 4px;
    font-size: 0.8rem;
}

@media (prefers-reduced-motion: reduce) {
    .hf-hero-track > .hf-hero-slide,
    .hf-hero-track > .hf-hero-slide.is-current {
        transition: none;
    }

    .hf-hero-track .is-current .hf-hero-media img,
    .hf-hero-track .is-current .hf-hero-copy > * {
        animation: none;
    }
}

/* The universes under it: the chosen one in solid orange, as in the captures. */
.hf-host .hf .hf-uni.active {
    background: var(--sheep-grad);
    border-color: transparent;
    color: #fff;
}

    .hf-host .hf .hf-uni.active .hf-ico:not(.hf-ico-art) {
        color: #fff;
    }

/* ---- the home grid cut by distance (Benji, 2026-10-12) ----
   One grid of shops, a heading for each distance band ("À moins de 1 km", "De 1 à 2 km"...),
   with room between the bands. */
.hf-by-distance .hf-grid + .hf-band-head {
    margin-top: 30px;
}

/* ---- the hero on phones and tablets: lower, the picture on the right (Benji, 2026-10-12) ----
   Below 640 px of hero width (phones, small tablets, the list squeezed by the map) the words stay on
   the left and the photo on the right, fading into the dark banner as on desktop, instead of the
   photo above the words: about half as tall. The description keeps to two lines. */
@container (max-width: 640px) {
    .hf-host .hf .hf-hero-slide {
        display: block;
        min-height: 0;
    }

    .hf-host .hf .hf-hero-media {
        position: absolute;
        inset: 0 0 0 auto;
        order: 0;
        width: 46%;
        height: auto;
    }

        .hf-host .hf .hf-hero-media::before {
            inset: 0 auto 0 0;
            width: 55%;
            height: auto;
            background: linear-gradient(90deg, var(--hero-bg) 0%, transparent 100%);
        }

    .hf-host .hf .hf-hero-copy {
        max-width: 64%;
        padding: 16px 12px 40px 16px;
    }

    .hf-host .hf .hf-hero-eyebrow {
        margin-bottom: 6px;
        font-size: 0.66rem;
    }

    .hf-host .hf .hf-hero-title,
    .hf-host .hf .hf-hero-title em {
        font-size: clamp(1.1rem, 5vw, 1.45rem);
    }

    .hf-host .hf .hf-hero-text {
        display: -webkit-box;
        margin-top: 6px;
        overflow: hidden;
        font-size: 0.74rem;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .hf-host .hf .hf-hero-cta {
        margin-top: 10px;
        padding: 7px 12px;
        font-size: 0.72rem;
    }

    .hf-host .hf .hf-hero-controls {
        bottom: 8px;
    }
}

/* Tablets (700 to 991 px): the desktop layout, words left and picture right, a little lower. */
@media (min-width: 700px) and (max-width: 991.98px) {
    .hf-host .hf .hf-hero-slide {
        min-height: 220px;
    }

    .hf-host .hf .hf-hero-copy {
        padding: 24px 28px 44px;
    }

    .hf-host .hf .hf-hero-title,
    .hf-host .hf .hf-hero-title em {
        font-size: clamp(1.5rem, 3.4vw, 1.9rem);
    }

    .hf-host .hf .hf-hero-text {
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .hf-host .hf .hf-hero-cta {
        margin-top: 14px;
        padding: 9px 16px;
    }
}

/* ---- /categories by universe, as on the model (Benji, 2026-10-12) ----
   Small capitals over a big black title, then one card per universe: a pastel head (its own colour)
   with the picture, the name and "Découvrir", and the universe's categories one per line with their
   picture and a chevron. Three cards side by side, two on tablets, one on phones; the cards of a row
   share their height. */
.hf-catpage .hf-catpage-head {
    padding-top: 28px;
}

.hf-catpage-over {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #8a4b22;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

    .hf-catpage-over i {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--sheep-accent, #0f8b27);
    }

.hf-catpage .hf-catpage-head h1 {
    margin: 10px 0 0;
    color: var(--hf-text);
    font-family: var(--sheep-display, inherit);
    font-size: clamp(1.9rem, 1.2rem + 2.4vw, 2.75rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.05;
}

.hf-catpage .hf-catpage-head p {
    margin: 12px 0 0;
    color: var(--hf-muted);
    font-size: 0.92rem;
}

.hf-unicards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    max-width: var(--hf-max-w);
    margin: 30px auto 48px;
}

.hf-unicard {
    --uni-tint: #fff1e6;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--hf-card-border);
    border-radius: 18px;
    background: var(--hf-card);
}

    .hf-unicard.is-grocery {
        --uni-tint: #eaf5e7;
    }

    .hf-unicard.is-health {
        --uni-tint: #e6f3f3;
    }

    .hf-unicard.is-electronics {
        --uni-tint: #efedfb;
    }

    .hf-unicard.is-flowers {
        --uni-tint: #fdedf1;
    }

    .hf-unicard.is-shopping {
        --uni-tint: #fff4dc;
    }

.hf-unicard-head {
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 98px;
    padding: 18px 24px;
    background: var(--uni-tint);
    color: var(--hf-text);
    text-decoration: none;
}

.hf-unicard-art {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}

    .hf-unicard-art .hf-ico,
    .hf-unicard-art .hf-ico-art {
        width: 52px;
        height: 52px;
    }

.hf-unicard-titles {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

    .hf-unicard-titles h2 {
        margin: 0;
        color: var(--hf-text);
        font-family: var(--sheep-display, inherit);
        font-size: 1.15rem;
        font-weight: 800;
        letter-spacing: -0.01em;
    }

.hf-unicard-go {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--sheep-accent-ink, #08701f);
    font-size: 0.8rem;
    font-weight: 700;
}

    .hf-unicard-go .bi {
        transition: transform .2s ease;
    }

.hf-unicard-list {
    margin: 0;
    padding: 6px 18px 8px;
    list-style: none;
}

    .hf-unicard-list li + li {
        border-top: 1px solid var(--hf-card-border);
    }

.hf-unicard-row {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 58px;
    padding: 0 6px;
    border-radius: 10px;
    color: var(--hf-text);
    text-decoration: none;
    transition: background-color .15s ease;
}

.hf-unicard-ico {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

    .hf-unicard-ico .hf-ico,
    .hf-unicard-ico .hf-ico-art {
        width: 30px;
        height: 30px;
    }

.hf-unicard-name {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 0;
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.25;
    overflow-wrap: break-word;
}

.hf-unicard-soon {
    flex: 0 0 auto;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--hf-pill-bg);
    color: var(--hf-muted);
    font-size: 0.66rem;
    font-weight: 700;
}

.hf-unicard-chev {
    flex: 0 0 auto;
    color: var(--hf-muted);
    font-size: 0.78rem;
    -webkit-text-stroke: 0.4px;
    transition: transform .2s ease, color .15s ease;
}

.hf-unicard-row.is-soon .hf-unicard-name {
    color: var(--hf-muted);
}

.hf-unicard-row.is-soon .hf-ico-art {
    filter: saturate(0.75);
}

@media (hover: hover) {
    .hf-unicard-head:hover .hf-unicard-art {
        transform: scale(1.07);
    }

    .hf-unicard-head:hover .hf-unicard-go .bi {
        transform: translateX(4px);
    }

    .hf-unicard-row:hover {
        background: var(--hf-bg);
    }

        .hf-unicard-row:hover .hf-unicard-chev {
            color: var(--sheep-accent-ink, #08701f);
            transform: translateX(3px);
        }
}

.hf-unicard-head:focus-visible,
.hf-unicard-row:focus-visible {
    outline: 2px solid var(--sheep-accent, #0f8b27);
    outline-offset: -2px;
}

/* Dark theme: the heads keep their colour as a light wash over the dark card. */
.hf.is-dark .hf-catpage-over {
    color: #e3b08c;
}

.hf.is-dark .hf-unicard {
    --uni-tint: rgba(var(--sheep-accent-rgb), 0.13);
}

    .hf.is-dark .hf-unicard.is-grocery {
        --uni-tint: rgba(98, 180, 92, 0.14);
    }

    .hf.is-dark .hf-unicard.is-health {
        --uni-tint: rgba(64, 170, 170, 0.14);
    }

    .hf.is-dark .hf-unicard.is-electronics {
        --uni-tint: rgba(130, 115, 230, 0.16);
    }

    .hf.is-dark .hf-unicard.is-flowers {
        --uni-tint: rgba(232, 96, 140, 0.14);
    }

    .hf.is-dark .hf-unicard.is-shopping {
        --uni-tint: rgba(240, 190, 70, 0.13);
    }

.hf.is-dark .hf-unicard-go,
.hf.is-dark .hf-unicard-row:hover .hf-unicard-chev {
    color: var(--sheep-accent-ink);
}

@media (max-width: 1099.98px) {
    .hf-unicards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }
}

@media (max-width: 639.98px) {
    .hf-catpage .hf-catpage-head {
        padding-top: 18px;
    }

    .hf-unicards {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
        margin-top: 22px;
    }

    .hf-unicard {
        border-radius: 16px;
    }

    .hf-unicard-head {
        gap: 14px;
        min-height: 80px;
        padding: 14px 18px;
    }

    .hf-unicard-art {
        width: 46px;
        height: 46px;
    }

        .hf-unicard-art .hf-ico,
        .hf-unicard-art .hf-ico-art {
            width: 44px;
            height: 44px;
        }

    .hf-unicard-list {
        padding: 4px 14px 6px;
    }

    .hf-unicard-row {
        min-height: 52px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hf-unicard-art,
    .hf-unicard-go .bi,
    .hf-unicard-chev {
        transition: none;
    }
}

/* ---- phones: a lower hero, the title and its button only (Benji, 2026-10-12) ----
   The small line over the title and the description under it go: the slide keeps its big title,
   the button and the picture on the right, so the hero takes less height. */
@container (max-width: 640px) {
    .hf-host .hf .hf-hero-eyebrow,
    .hf-host .hf .hf-hero-text {
        display: none;
    }

    .hf-host .hf .hf-hero-copy {
        padding: 16px 12px 34px 16px;
    }

    .hf-host .hf .hf-hero-cta {
        margin-top: 12px;
    }
}

/* ---- phones and tablets: the big map fills the screen (Benji, 2026-10-12) ----
   Opened from the bottom bar's map button (or "Agrandir la carte"), the map covers the page between
   the top bar and the bottom bar, rounded, over the list; "Réduire la carte" brings the list back. */
@media (max-width: 991.98px) {
    .hf.hf-map-wide .hf-map {
        position: fixed;
        z-index: 1025;
        top: calc(var(--navbar-height, 56px) + 6px);
        right: 8px;
        bottom: calc(56px + env(safe-area-inset-bottom) + 8px);
        left: 8px;
        height: auto;
        min-height: 0;
        margin: 0;
        border-radius: 18px;
        box-shadow: 0 12px 32px rgba(32, 33, 36, 0.22);
    }

        .hf.hf-map-wide .hf-map-canvas {
            height: 100%;
            min-height: 0;
        }
}

/* ---- the second review (2026-10-12): calmer shop cards, one slot for every shop logo ----
   The photo and the name come first: the carousel dots are tiny and faint, the ribbons and the
   price smaller and without glow. The shop's logo sits in the same white square for every shop,
   with the same inner margin, whatever its proportions. */
.hf-dots {
    bottom: 6px;
    gap: 4px;
}

.hf-dot {
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, 0.45);
}

    .hf-dot.active {
        width: 10px;
        background: rgba(255, 255, 255, 0.92);
    }

.hf-slide-price {
    padding: 2px 8px;
    background: rgba(32, 33, 36, 0.62);
    font-size: 0.76rem;
}

@media (min-width: 576px) {
    .hf-ribbons .hf-closed-ribbon,
    .hf-ribbons .hf-featured-ribbon,
    .hf-promo-ribbon {
        padding: 3px 9px;
        font-size: 0.7rem;
        box-shadow: none;
    }
}

.hf-logo {
    width: 48px;
    height: 48px;
    padding: 4px;
    border: 1px solid var(--hf-card-border);
    border-radius: 12px;
    background: #fff;
}

    .hf-logo img {
        border-radius: 8px;
        object-fit: contain;
    }

.hf.is-dark .hf-logo {
    background: #24335a;
}

/* The universe tabs: a bigger picture, so it reads at a glance. */
.hf-host .hf .hf-uni .hf-ico-art {
    width: 32px;
    height: 32px;
}

/* The category tiles: the picture fills its frame (less empty margin around a small object). */
.hf-host .hf .hf-tile .hf-ico-art {
    width: 70px;
    height: 70px;
}

/* ---- the phone hero, after Benji's picture (2026-10-12) ----
   A deep green wash over the photo on every slide (green first, not black), the small line back
   ("Près de chez vous" / "À emporter", two words with an orange dot), a title running in long lines (its orange
   end follows on the same line, for contrast), an orange pill button with dark words, the dots small in
   the bottom right corner (no arrows: the dots and the auto-play do the job). Low: about 140 px on a phone; no mascot there (it would cover the words). Wide screens keep
   their own hero: the short line is hidden. */
.hf-hero-eyebrow-short {
    display: none;
}

@container (max-width: 640px) {
    .hf-host .hf .hf-hero-slide,
    .hf-host .hf .hf-hero-slide.is-restaurants,
    .hf-host .hf .hf-hero-slide.is-asian,
    .hf-host .hf .hf-hero-slide.is-grocery,
    .hf-host .hf .hf-hero-slide.is-flowers {
        --hero-bg: #1c3a21;
        min-height: 0;
    }

    .hf-host .hf .hf-hero-media::after {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(28, 58, 33, 0.42);
        pointer-events: none;
    }

    .hf-host .hf .hf-hero-eyebrow {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0 0 6px;
        color: #e4efe5;
        font-size: 0.64rem;
        font-weight: 800;
        letter-spacing: 0.16em;
        text-transform: uppercase;
    }

        .hf-host .hf .hf-hero-eyebrow::before {
            width: 9px;
            height: 9px;
            background: var(--sheep-orange, #ef8839);
        }

    .hf-host .hf .hf-hero-eyebrow-long {
        display: none;
    }

    .hf-host .hf .hf-hero-eyebrow-short {
        display: inline;
    }

    .hf-host .hf .hf-hero-copy {
        max-width: 84%;
        padding: 14px 14px 20px 16px;
        position: relative;
        z-index: 3;
    }

    .hf-host .hf .hf-hero-title,
    .hf-host .hf .hf-hero-title em {
        font-size: clamp(1.12rem, 5.1vw, 1.4rem);
        line-height: 1.15;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
    }

    .hf-host .hf .hf-hero-title em {
        display: inline;
        color: #ff9a1f;
    }

    .hf-host .hf .hf-hero-cta,
    .hf-host .hf .hf-hero-cta:hover,
    .hf-host .hf .hf-hero-cta:focus-visible {
        min-width: 0;
        min-height: 0;
        margin-top: 10px;
        gap: 8px;
        padding: 8px 13px;
        border-radius: 999px;
        background: #ff9a1f;
        color: #202124;
        font-size: 0.76rem;
        font-weight: 800;
        text-shadow: none;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
    }

    /* The dots alone, small, in the bottom right corner under the photo (a pill beside the button
       ran into the longer buttons on phones). */
    .hf-host .hf .hf-hero-controls {
        left: auto;
        right: 12px;
        bottom: 4px;
        gap: 5px;
        padding: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
    }

    /* Each dot's tap area only as tall as the corner below the button (it covered the end of the
       longer buttons on small phones); the button stays on top anyway. */
    .hf-host .hf .hf-hero-dot {
        height: 12px;
        min-height: 0;
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
    }

    .hf-host .hf .hf-hero-slide .hf-hero-copy {
        z-index: 4;
    }

    .hf-host .hf .hf-hero-arrow {
        display: none;
    }

    .hf-host .hf .hf-hero-dot span {
        width: 6px;
        height: 6px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.55);
    }

    .hf-host .hf .hf-hero-dot.active span {
        width: 16px;
        background: #ff9a1f;
    }
}

/* ---- the phone hero, finer (Benji, 2026-10-12) ----
   The orange dot before "Près de chez vous" (the desktop hero hides it), with a soft halo that
   breathes slowly. The photo runs under most of the card and the green fades in gently: solid only
   at the far left, then lighter and lighter, so the picture shows through early and for long; the
   overall green wash is light, and a faint shade at the bottom keeps the dots readable. */
@container (max-width: 640px) {
    .hf-host .hf .hf-hero-eyebrow::before {
        content: "";
        display: block;
        flex: 0 0 auto;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #ff9a1f;
        box-shadow: 0 0 0 3px rgba(255, 154, 31, 0.22);
        animation: hf-hero-dot-breathe 2.8s ease-in-out infinite;
    }

    .hf-host .hf .hf-hero-media {
        width: 78%;
    }

        .hf-host .hf .hf-hero-media::before {
            inset: 0 auto 0 0;
            width: 100%;
            background: linear-gradient(90deg,
                rgba(28, 58, 33, 1) 0%,
                rgba(28, 58, 33, 0.8) 20%,
                rgba(28, 58, 33, 0.46) 46%,
                rgba(28, 58, 33, 0.14) 74%,
                rgba(28, 58, 33, 0) 100%);
        }

        .hf-host .hf .hf-hero-media::after {
            background:
                linear-gradient(0deg, rgba(8, 22, 12, 0.34) 0%, rgba(8, 22, 12, 0) 38%),
                rgba(28, 58, 33, 0.12);
        }

    .hf-host .hf .hf-hero-title,
    .hf-host .hf .hf-hero-title em {
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 12px rgba(0, 0, 0, 0.35);
    }

    /* The orange words keep their contrast over a warm photo: a dark green glow just around them. */
    .hf-host .hf .hf-hero-title em {
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 0 14px rgba(10, 32, 16, 0.75), 0 0 4px rgba(10, 32, 16, 0.6);
    }

    .hf-host .hf .hf-hero-eyebrow {
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    }

    .hf-host .hf .hf-hero-slide {
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    }
}

@keyframes hf-hero-dot-breathe {
    0%, 100% {
        box-shadow: 0 0 0 3px rgba(255, 154, 31, 0.22);
    }

    50% {
        box-shadow: 0 0 0 5px rgba(255, 154, 31, 0.08);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hf-host .hf .hf-hero-eyebrow::before {
        animation: none;
    }
}

/* ---- the wide hero in the same palette as the phone one (Benji, 2026-10-12) ----
   Tablets and desktop: a deep green under every slide instead of the brown and wine tones, the
   photo fading into it, the small line in capitals with the orange dot, the title's last words in
   orange, an orange pill button with dark words, the active dot orange. */
@container (min-width: 641px) {
    .hf-host .hf .hf-hero-slide,
    .hf-host .hf .hf-hero-slide.is-restaurants,
    .hf-host .hf .hf-hero-slide.is-asian,
    .hf-host .hf .hf-hero-slide.is-grocery,
    .hf-host .hf .hf-hero-slide.is-flowers,
    .hf-host .hf .hf-hero-slide.is-offers,
    .hf-host .hf .hf-hero-slide.is-delivery {
        --hero-bg: #1c3a21;
    }

    .hf-host .hf .hf-hero-media::before {
        width: 50%;
        background: linear-gradient(90deg, #1c3a21 0%, rgba(28, 58, 33, 0.72) 40%, rgba(28, 58, 33, 0.25) 75%, rgba(28, 58, 33, 0) 100%);
    }

    .hf-host .hf .hf-hero-media::after {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(28, 58, 33, 0.16);
        pointer-events: none;
    }

    .hf-host .hf .hf-hero-eyebrow {
        display: flex;
        align-items: center;
        gap: 9px;
        margin: 0 0 14px;
        color: #e4efe5;
        font-size: 0.68rem;
        font-weight: 800;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    }

        .hf-host .hf .hf-hero-eyebrow::before {
            content: "";
            display: block;
            flex: 0 0 auto;
            width: 9px;
            height: 9px;
            border-radius: 50%;
            background: #ff9a1f;
            box-shadow: 0 0 0 3px rgba(255, 154, 31, 0.22);
            animation: hf-hero-dot-breathe 2.8s ease-in-out infinite;
        }

    .hf-host .hf .hf-hero-title {
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 2px 12px rgba(0, 0, 0, 0.3);
    }

    .hf-host .hf .hf-hero-title em {
        color: #ff9a1f;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 14px rgba(10, 32, 16, 0.7), 0 0 4px rgba(10, 32, 16, 0.55);
    }

    .hf-host .hf .hf-hero-cta {
        background: #ff9a1f;
        color: #202124;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
    }

        .hf-host .hf .hf-hero-cta:hover,
        .hf-host .hf .hf-hero-cta:focus-visible {
            background: #ffa83c;
            color: #202124;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.32);
        }

    .hf-host .hf .hf-hero-dot span {
        background: rgba(255, 255, 255, 0.5);
    }

    .hf-host .hf .hf-hero-dot.active span {
        background: #ff9a1f;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hf-host .hf .hf-hero-eyebrow::before {
        animation: none;
    }
}

/* No result: a shop front in a pale green disc and a kind line, instead of a sad face (Benji, 2026-10-12). */
.hf-empty.hf-empty-soon i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--sheep-accent-soft, #e6f4e8);
    color: var(--sheep-accent-dark, #068125);
    font-size: 2rem;
}

.hf-empty.hf-empty-soon p {
    max-width: 420px;
    margin: 0 auto 16px;
}

.hf.is-dark .hf-empty.hf-empty-soon i {
    background: rgba(var(--sheep-accent-light-rgb), 0.16);
    color: var(--sheep-accent-ink);
}

/* ---- bigger category pictures, easier to tell apart (Benji, 2026-10-12) ----
   The pictures fill their tiles almost to the edge and grow by about a quarter: the category
   tiles of the home page, the universe tabs, and the /categories page's cards and rows. */
.hf-host .hf .hf-tile {
    width: 92px;
}

.hf-host .hf .hf-tile-art {
    width: 88px;
    height: 86px;
    border-radius: 22px;
}

.hf-host .hf .hf-tile .hf-ico-art {
    width: 82px;
    height: 82px;
}

.hf-host .hf .hf-tile-label {
    max-width: 92px;
    font-size: 0.72rem;
}

@media (min-width: 992px) {
    .hf-host .hf .hf-tile {
        width: 116px;
    }

    .hf-host .hf .hf-tile-art {
        width: 108px;
        height: 106px;
        border-radius: 26px;
    }

    .hf-host .hf .hf-tile .hf-ico-art {
        width: 98px;
        height: 98px;
    }

    .hf-host .hf .hf-tile-label {
        max-width: 116px;
        font-size: 0.76rem;
    }
}

.hf-host .hf .hf-uni {
    height: 54px;
    padding: 0 16px 0 9px;
}

    .hf-host .hf .hf-uni .hf-ico-art {
        width: 42px;
        height: 42px;
    }

/* /categories: the universe's picture and each category's picture larger. */
.hf-unicard-art {
    width: 70px;
    height: 70px;
}

    .hf-unicard-art .hf-ico,
    .hf-unicard-art .hf-ico-art {
        width: 68px;
        height: 68px;
    }

.hf-unicard-ico {
    width: 44px;
    height: 44px;
}

    .hf-unicard-ico .hf-ico,
    .hf-unicard-ico .hf-ico-art {
        width: 42px;
        height: 42px;
    }

.hf-unicard-row {
    min-height: 64px;
}

@media (max-width: 639.98px) {
    .hf-unicard-art {
        width: 58px;
        height: 58px;
    }

        .hf-unicard-art .hf-ico,
        .hf-unicard-art .hf-ico-art {
            width: 56px;
            height: 56px;
        }

    .hf-unicard-row {
        min-height: 60px;
    }
}

/* The list's own delivery / pickup (the smallest phones): a pill too, like the top bar's. */
.hf-host .hf .hf-mode {
    border-radius: 999px;
}

.hf-host .hf .hf-mode-btn {
    border-radius: 999px;
}

/* ---- the hero after Benji's picture: light, the brand orange (2026-10-12) ----
   Wide (tablets, desktop): on the page's white, the words on the left (the small "Près de chez vous"
   line with its orange dot, a big heavy title whose last line is orange, a grey line, the orange
   gradient button with a diagonal arrow), the photo on the right in its own frame with a big
   rounded top-left corner, the slide's tag as a white pill at its top right and the arrows and dots
   in a white pill at its bottom right. Phones: the same palette, kept low (title and button), the
   photo fading into white under the words. Replaces the green banner. The lettering is the earlier
   one (Nunito, heavy), which Benji prefers to the serif of his picture.
   The colour follows the site's (Benji, 2026-10-13): green, or orange for the readers who chose it
   in their profile; the names below date from the orange picture. */
/* The hero in the second colour (Benji, 2026-10-13): orange on the green site, green on the orange
   one, a complement to the rest of the page. The "orange" tokens hold that other colour. */
.hf-host .hf {
    --hero-orange: var(--sheep-grad-second);
    --hero-orange-hover: var(--sheep-grad-second-hover);
    --hero-orange-dot: var(--sheep-orange);
    --hero-orange-words: var(--sheep-orange-dark);
}

.hf-host .hf.is-dark {
    --hero-orange-words: var(--sheep-orange);
}

.hf-host .hf .hf-hero-eyebrow-long {
    display: none;
}

.hf-host .hf .hf-hero-eyebrow-short {
    display: inline;
}

/* The hero is its own container, so its box is set here, outside the size queries: no banner around
   it any more (on phones the slides themselves are the rounded card). */
.hf-host .hf .hf-hero {
    border-radius: 0;
    overflow: visible;
    background: transparent;
    box-shadow: none;
}

/* Every slide's words at the same height (Benji, 2026-10-12): the slides share one grid whose rows
   are the small line, the title, the line under it and the button, each as tall as on the slide that
   needs the most; the empty rows above and below centre the whole. The button never moves from one
   slide to the next. */
.hf-host .hf .hf-hero-track {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 1fr auto auto auto auto 1fr;
}

    .hf-host .hf .hf-hero-track > .hf-hero-slide {
        grid-area: auto;
        grid-row: 1 / -1;
        grid-column: 1;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: subgrid;
        min-height: 0;
    }

.hf-host .hf .hf-hero-track .hf-hero-copy {
    grid-row: 2 / span 4;
    grid-column: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: subgrid;
    justify-items: start;
}

/* From one slide to the next (Benji, 2026-10-12): the words fade out, then the new ones fade in
   (rising a little, one after the other), while the new photo fades in over the old one. */
.hf-host .hf .hf-hero-track > .hf-hero-slide {
    opacity: 1;
    transition: visibility 0s linear .9s;
}

    .hf-host .hf .hf-hero-track > .hf-hero-slide.is-current {
        transition: visibility 0s;
    }

.hf-host .hf .hf-hero-track > .hf-hero-slide .hf-hero-media {
    opacity: 0;
    transition: opacity 0s linear .9s;
}

.hf-host .hf .hf-hero-track > .hf-hero-slide.is-current .hf-hero-media {
    opacity: 1;
    transition: opacity .9s ease;
}

.hf-host .hf .hf-hero-track > .hf-hero-slide .hf-hero-copy {
    opacity: 0;
    transition: opacity .35s ease;
}

.hf-host .hf .hf-hero-track > .hf-hero-slide.is-current .hf-hero-copy {
    opacity: 1;
    transition: none;
}

.hf-host .hf .hf-hero-track .is-current .hf-hero-copy > :nth-child(1) {
    animation-delay: .35s;
}

.hf-host .hf .hf-hero-track .is-current .hf-hero-copy > :nth-child(2) {
    animation-delay: .45s;
}

.hf-host .hf .hf-hero-track .is-current .hf-hero-copy > :nth-child(3) {
    animation-delay: .55s;
}

.hf-host .hf .hf-hero-track .is-current .hf-hero-copy > :nth-child(4) {
    animation-delay: .65s;
}

@media (prefers-reduced-motion: reduce) {
    .hf-host .hf .hf-hero-track > .hf-hero-slide,
    .hf-host .hf .hf-hero-track > .hf-hero-slide .hf-hero-media,
    .hf-host .hf .hf-hero-track > .hf-hero-slide .hf-hero-copy {
        transition: none;
    }
}

@container (min-width: 641px) {
    .hf-host .hf .hf-hero-track {
        min-height: clamp(290px, 34cqi, 390px);
    }

    .hf-host .hf .hf-hero-slide,
    .hf-host .hf .hf-hero-slide.is-restaurants,
    .hf-host .hf .hf-hero-slide.is-asian,
    .hf-host .hf .hf-hero-slide.is-grocery,
    .hf-host .hf .hf-hero-slide.is-flowers,
    .hf-host .hf .hf-hero-slide.is-offers,
    .hf-host .hf .hf-hero-slide.is-delivery {
        --hero-bg: var(--hf-bg, #fff);
        background: transparent;
        box-shadow: none;
    }

    .hf-host .hf .hf-hero-media {
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        width: 48%;
        height: auto;
        overflow: hidden;
        border-radius: 64px 22px 22px 22px;
        background: var(--hf-media-bg, #f1f3f4);
        box-shadow: 0 8px 28px rgba(32, 33, 36, 0.08);
    }

        .hf-host .hf .hf-hero-media::before,
        .hf-host .hf .hf-hero-media::after {
            display: none;
        }

    .hf-host .hf .hf-hero-label {
        position: absolute;
        top: 16px;
        right: 16px;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 6px 13px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.96);
        color: #202124;
        font-size: 0.74rem;
        font-weight: 700;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    }

        .hf-host .hf .hf-hero-label i {
            color: var(--sheep-orange-dark, #e76423);
        }

    .hf-host .hf .hf-hero-copy {
        max-width: 48%;
        padding: 18px 28px 18px 2px;
    }

    .hf-host .hf .hf-hero-eyebrow {
        display: flex;
        align-items: center;
        gap: 9px;
        margin: 0 0 16px;
        font-family: var(--sheep-display);
        font-size: 0.66rem;
        font-weight: 800;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--hf-muted);
        text-shadow: none;
    }

        .hf-host .hf .hf-hero-eyebrow::before {
            content: "";
            display: block;
            flex: 0 0 auto;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--hero-orange-dot);
            box-shadow: none;
            animation: none;
        }

    .hf-host .hf .hf-hero-title,
    .hf-host .hf .hf-hero-title em {
        font-family: var(--sheep-display);
        font-size: clamp(1.5rem, 3cqi, 1.95rem);
        font-weight: 900;
        line-height: 1.08;
        letter-spacing: -0.02em;
        color: var(--hf-text);
        text-shadow: none;
    }

    .hf-host .hf .hf-hero-title em {
        display: block;
        font-style: normal;
        color: var(--hero-orange-words);
    }

    .hf-host .hf .hf-hero-text {
        display: block;
        max-width: 420px;
        margin: 16px 0 0;
        overflow: visible;
        font-family: var(--sheep-display);
        font-size: 0.92rem;
        font-weight: 600;
        line-height: 1.5;
        color: var(--hf-muted);
        -webkit-line-clamp: unset;
    }

    .hf-host .hf .hf-hero-cta,
    .hf-host .hf .hf-hero-cta:hover,
    .hf-host .hf .hf-hero-cta:focus-visible {
        min-width: 250px;
        min-height: 54px;
        margin-top: 26px;
        justify-content: space-between;
        gap: 24px;
        padding: 14px 22px;
        border-radius: 14px;
        background: var(--hero-orange);
        color: #fff;
        font-family: var(--sheep-display);
        font-size: 0.9rem;
        font-weight: 800;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
        box-shadow: 0 10px 22px rgba(var(--sheep-orange-dark-rgb), 0.22);
    }

        .hf-host .hf .hf-hero-cta:hover,
        .hf-host .hf .hf-hero-cta:focus-visible {
            background: var(--hero-orange-hover);
            box-shadow: 0 12px 26px rgba(var(--sheep-orange-dark-rgb), 0.3);
        }

    .hf-host .hf .hf-hero-controls {
        left: auto;
        right: 16px;
        bottom: 16px;
        transform: none;
        gap: 2px;
        padding: 3px 6px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.96);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    }

    .hf-host .hf .hf-hero-arrow {
        display: inline-flex;
        width: 28px;
        height: 28px;
        color: #202124;
    }

        .hf-host .hf .hf-hero-arrow:hover {
            background: #f1f3f4;
        }

    .hf-host .hf .hf-hero-dot {
        width: 18px;
    }

        .hf-host .hf .hf-hero-dot span {
            width: 6px;
            height: 6px;
            background: #dadce0;
        }

        .hf-host .hf .hf-hero-dot.active span {
            width: 16px;
            background: var(--hero-orange-dot);
        }
}

@container (max-width: 640px) {
    .hf-host .hf .hf-hero-slide,
    .hf-host .hf .hf-hero-slide.is-restaurants,
    .hf-host .hf .hf-hero-slide.is-asian,
    .hf-host .hf .hf-hero-slide.is-grocery,
    .hf-host .hf .hf-hero-slide.is-flowers,
    .hf-host .hf .hf-hero-slide.is-offers,
    .hf-host .hf .hf-hero-slide.is-delivery {
        --hero-bg: var(--hf-card, #fff);
        --hero-fade: 255, 255, 255;
        background: transparent;
        box-shadow: none;
    }

    /* The card is the strip that holds the slides, so the outgoing words can fade under the new ones. */
    .hf-host .hf .hf-hero-track {
        overflow: hidden;
        border-radius: 18px;
        background: var(--hf-card, #fff);
        box-shadow: 0 0 0 1px var(--hf-card-border), 0 4px 16px rgba(32, 33, 36, 0.05);
    }

        .hf-host .hf .hf-hero-media::before {
            background: linear-gradient(90deg,
                rgba(var(--hero-fade), 1) 0%,
                rgba(var(--hero-fade), 0.9) 22%,
                rgba(var(--hero-fade), 0.55) 48%,
                rgba(var(--hero-fade), 0.15) 76%,
                rgba(var(--hero-fade), 0) 100%);
        }

        .hf-host .hf .hf-hero-media::after {
            display: none;
        }

    .hf-host .hf .hf-hero-eyebrow {
        color: var(--hf-muted);
        font-family: var(--sheep-display);
        font-weight: 800;
        text-shadow: none;
    }

        .hf-host .hf .hf-hero-eyebrow::before {
            width: 6px;
            height: 6px;
            background: var(--hero-orange-dot);
            box-shadow: none;
            animation: none;
        }

    .hf-host .hf .hf-hero-title,
    .hf-host .hf .hf-hero-title em {
        font-family: var(--sheep-display);
        font-size: clamp(1.12rem, 5.1vw, 1.4rem);
        font-weight: 900;
        line-height: 1.15;
        letter-spacing: -0.01em;
        color: var(--hf-text);
        text-shadow: 0 0 10px rgba(var(--hero-fade), 0.95), 0 0 3px rgba(var(--hero-fade), 0.9);
    }

    .hf-host .hf .hf-hero-title em {
        font-style: normal;
        color: var(--hero-orange-words);
    }

    .hf-host .hf .hf-hero-cta,
    .hf-host .hf .hf-hero-cta:hover,
    .hf-host .hf .hf-hero-cta:focus-visible {
        border-radius: 11px;
        background: var(--hero-orange);
        color: #fff;
        font-family: var(--sheep-display);
        font-weight: 800;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
        box-shadow: 0 6px 14px rgba(var(--sheep-orange-dark-rgb), 0.24);
    }

    .hf-host .hf .hf-hero-controls {
        right: 10px;
        bottom: 6px;
        padding: 0 5px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.94);
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
    }

    .hf-host .hf .hf-hero-dot {
        filter: none;
    }

        .hf-host .hf .hf-hero-dot span {
            background: #c4c7cc;
        }

        .hf-host .hf .hf-hero-dot.active span {
            background: var(--hero-orange-dot);
        }

    /* Dark theme: the card's grey instead of white. */
    .hf-host .hf.is-dark .hf-hero-slide {
        --hero-fade: 38, 40, 44;
    }
}

/* ---- no "Tout" chip among the universes (Benji, 2026-10-13) ----
   The row of universe tabs no longer shows the "Tout" button first: "Toutes les catégories" stands
   just above it in words, and the logo and "Accueil" bring every universe back. The button stays
   in the markup (its place and its code are untouched), only hidden. */
.hf-host .hf .hf-unis > .hf-uni:first-child {
    display: none;
}

/* Every empty state the same way (Benji, 2026-10-13): the icon in a pale disc of the site's colour,
   as "Pas encore arrivé chez Sheep-Me" (favourites, no result, nothing nearby). */
.hf-empty > i,
.hf-empty > .bi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin-bottom: 4px;
    border-radius: 50%;
    background: var(--sheep-accent-soft, #e6f4e8);
    color: var(--sheep-accent-dark, #068125);
    font-size: 2rem;
}

.hf.is-dark .hf-empty > i,
.hf.is-dark .hf-empty > .bi {
    background: rgba(var(--sheep-accent-light-rgb), 0.16);
    color: var(--sheep-accent-ink);
}

/* ---- delivery / pickup, each in its colour, as the top bar's pill (Benji, 2026-10-13): the chosen
   side solid, delivery in the main colour's gradient, pickup in the second colour's. */
.hf-host .hf .hf-mode-btn.active {
    background: var(--sheep-grad);
    color: #fff;
    box-shadow: 0 4px 12px rgba(var(--sheep-accent-dark-rgb), 0.28);
}

    .hf-host .hf .hf-mode-btn.active[data-mode="pickup"] {
        background: var(--sheep-grad-second);
        box-shadow: 0 4px 12px rgba(var(--sheep-orange-dark-rgb), 0.28);
        text-shadow: 0 1px 1px rgba(var(--sheep-orange-ink-rgb), 0.25);
    }

/* The side not chosen keeps its icon only, as the top bar's pill (Benji, 2026-10-14). */
.hf-host .hf .hf-mode-btn:not(.active) span {
    display: none;
}

.hf-host .hf .hf-mode-btn:not(.active) {
    padding-left: 12px;
    padding-right: 12px;
}

/* One width in both modes, as the top bar's pill (Benji, 2026-10-14): the name's box as wide as
   the longer name (hidden copy of the other, data-other), the icons of one width. */
.hf-host .hf .hf-mode-btn span[data-other] {
    display: inline-grid;
    grid-template-columns: minmax(0, max-content);
    justify-items: center;
    text-align: center;
}

    .hf-host .hf .hf-mode-btn span[data-other]::after {
        content: attr(data-other);
        grid-column: 1;
        height: 0;
        overflow: hidden;
        visibility: hidden;
        white-space: nowrap;
    }

.hf-host .hf .hf-mode-btn .bi {
    display: inline-block;
    width: 1.25em;
    text-align: center;
}

    /* ...and the side not chosen still hides its name (the grid above would show it). */
    .hf-host .hf .hf-mode-btn:not(.active) span[data-other] {
        display: none;
    }

/* ---- three trust points under the hero (Benji's mockup, 2026-10-14) ----
   Three columns with hairlines between them on tablets and desktop; stacked rows on phones. */
.hf-host .hf .hf-trust {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 6px 0 4px;
    padding: 0;
    list-style: none;
}

    .hf-host .hf .hf-trust li {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 12px 18px;
        border-left: 1px solid var(--sheep-line, #e9ebee);
    }

        .hf-host .hf .hf-trust li:first-child {
            padding-left: 0;
            border-left: 0;
        }

.hf-trust-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    border-radius: 50%;
    background: var(--sheep-accent-soft);
    color: var(--sheep-accent-dark);
    font-size: 1.45rem;
}

.hf-trust-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

    .hf-trust-text strong {
        font-size: 0.98rem;
        font-weight: 750;
        line-height: 1.2;
    }

    .hf-trust-text small {
        font-size: 0.84rem;
        color: var(--hf-muted);
    }

@media (max-width: 767.98px) {
    .hf-host .hf .hf-trust {
        grid-template-columns: 1fr;
        margin: 2px 0 6px;
    }

        .hf-host .hf .hf-trust li {
            padding: 9px 4px;
            border-left: 0;
            border-top: 1px solid var(--sheep-line, #e9ebee);
        }

            .hf-host .hf .hf-trust li:first-child {
                padding-left: 4px;
                border-top: 0;
            }

    .hf-trust-ico {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
        font-size: 1.15rem;
    }

    .hf-trust-text strong {
        font-size: 0.92rem;
    }
}

/* Narrow desktops (992 to 1199 px): the three points a little tighter, so their words hold. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .hf-host .hf .hf-trust li {
        gap: 10px;
        padding: 10px 12px;
    }

    .hf-trust-ico {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
        font-size: 1.2rem;
    }

    .hf-trust-text strong {
        font-size: 0.88rem;
    }

    .hf-trust-text small {
        font-size: 0.78rem;
    }
}

/* Desktop (Benji's review, 2026-10-14): the hero on its own white card, its top on the same line as
   the side menu's (6 px of bar below the page's start, then the same 12 px gap), the same corners. */
@media (min-width: 992px) {
    .hf-host .hf .hf-hero-wrap {
        padding-top: calc(6px + var(--side-gap, 12px));
    }

    .hf-host .hf .hf-hero {
        margin: 0 0 8px;
        padding: 12px 24px 12px 28px;
        border: 1px solid var(--sheep-line, #e9ebee);
        border-radius: 24px;
        background: #fff;
        box-shadow: 0 6px 24px rgba(32, 33, 36, 0.06);
        overflow: hidden;
    }

    [data-theme="dark"] .hf-host .hf .hf-hero {
        border-color: rgba(255, 255, 255, 0.09);
        background: #1b2742;
        box-shadow: none;
    }
}

@media (min-width: 992px) {
    .hf-host .hf .hf-hero-wrap {
        padding-top: calc(2px + var(--side-gap, 12px));
    }
}

/* Closer to Benji's mockup (2026-10-14): the hero's card on a soft cream-to-green wash instead of
   white, without a frame; the three points a little bigger on wide screens, with a hairline under
   them before the next section. */
@media (min-width: 992px) {
    .hf-host .hf .hf-hero {
        border: 0;
        background: linear-gradient(120deg, #fff6ea 0%, #f7f9f2 55%, #e6f3e1 100%);
        box-shadow: 0 2px 14px rgba(32, 33, 36, 0.06);
    }

    [data-theme="dark"] .hf-host .hf .hf-hero {
        background: linear-gradient(120deg, #262c3a 0%, #212837 55%, #1e2b33 100%);
        box-shadow: none;
    }

    .hf-host .hf .hf-trust {
        margin-bottom: 10px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--sheep-line, #e9ebee);
    }

    [data-theme="dark"] .hf-host .hf .hf-trust {
        border-bottom-color: rgba(255, 255, 255, 0.09);
    }
}

@media (min-width: 1200px) {
    .hf-trust-ico {
        width: 60px;
        height: 60px;
        flex-basis: 60px;
        font-size: 1.6rem;
    }

    .hf-trust-text strong {
        font-size: 1.02rem;
    }

    .hf-trust-text small {
        font-size: 0.88rem;
    }
}

/* Beside the open map the column is narrow: the three points step aside. */
.hf-host .hf.hf-map-on .hf-trust {
    display: none;
}

/* The "Tout" tile at the left of the categories (Benji, 2026-10-14): the universe's picture on a
   pale green ground, lit like the others while no category is chosen. */
.hf-host .hf .hf-tile-all .hf-tile-art {
    background: var(--sheep-accent-soft);
}

.hf-host .hf .hf-tile-all .hf-ico-art {
    width: 56px;
    height: 56px;
}

.hf-host .hf .hf-tile-all.active .hf-tile-art {
    background: #fff;
}

[data-theme="dark"] .hf-host .hf .hf-tile-all.active .hf-tile-art {
    background: var(--hf-pill-bg);
}

/* The "Tout" tile (Benji, 2026-10-15): always the grid; white with a hairline when a category is
   chosen, the site's colour with a white grid while none is. */
.hf-host .hf .hf-tile-all .hf-tile-art {
    border: 1px solid var(--sheep-line, #e9ebee);
    background: #fff;
}

.hf-host .hf .hf-tile-all .hf-ico:not(.hf-ico-art) {
    color: var(--sheep-accent-dark);
}

.hf-host .hf .hf-tile.hf-tile-all.active .hf-tile-art {
    border-color: transparent;
    background: var(--sheep-grad);
    box-shadow: 0 6px 14px rgba(var(--sheep-accent-rgb), 0.3);
}

    .hf-host .hf .hf-tile.hf-tile-all.active .hf-ico:not(.hf-ico-art) {
        color: #fff;
    }

[data-theme="dark"] .hf-host .hf .hf-tile-all .hf-tile-art {
    border-color: rgba(255, 255, 255, 0.12);
    background: var(--hf-pill-bg);
}

[data-theme="dark"] .hf-host .hf .hf-tile.hf-tile-all.active .hf-tile-art {
    border-color: transparent;
    background: var(--sheep-grad);
}

/* The feed's column takes the page's colour (Benji, 2026-10-15: its white left a band of another
   colour around the side menu's card). */
.hf-host .hf,
.hf-host .hf.is-dark {
    background: transparent;
}

/* The three points lined up with the hero (Benji, 2026-10-15): the hero sits in a wrap padded 24 px
   each side, the row takes the same margins. */
@media (min-width: 768px) {
    .hf-host .hf .hf-trust {
        margin-left: 24px;
        margin-right: 24px;
    }
}

@media (max-width: 767.98px) {
    .hf-host .hf .hf-trust {
        margin-left: 16px;
        margin-right: 16px;
    }
}

/* Phones (Benji, 2026-10-15): with the bigger title, "Toutes les catégories" goes under it, so the
   title keeps the whole width (two lines instead of three). */
@media (max-width: 767.98px) {
    .hf-host .hf .hf-section-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}

/* ---- no universes' row on the website's home (Benji, 2026-10-15) ----
   The main categories are already in the side menu (and the phone menu): the home drops its row
   of universe pills and keeps the chosen universe's category tiles, with "Toutes les catégories"
   for the rest. Only on the website (the page with the side menu); the phone app, whose menu does
   not list them, keeps its row. */
body:has(.sheep-sidebar) .hf-host .hf .hf-unis {
    display: none !important;
}

/* ---- the favourites without the categories (Benji, 2026-10-15) ----
   "In the favourites, signed in, the categories' part should not be on the page": the tiles row
   steps aside there (the hero and its heading already did). */
.hf-host .hf.hf-favs .hf-cats {
    display: none !important;
}

/* ---- smaller category tiles on phones and tablets (Benji, 2026-10-15) ----
   "The sub-categories' icons are far too big; smaller, very pretty, easier to browse": 70 px tiles
   with a 64 px plinth and the picture at 56 px, the label a touch smaller, the row tighter; about
   five tiles show at once instead of three. The "Tout" grid follows. Desktop keeps its size. */
@media (max-width: 991.98px) {
    .hf-host .hf .hf-tiles {
        gap: 8px;
    }

    .hf-host .hf .hf-tile {
        width: 70px;
    }

    .hf-host .hf .hf-tile-art {
        width: 64px;
        height: 62px;
        border-radius: 18px;
    }

    .hf-host .hf .hf-tile .hf-ico-art {
        width: 56px;
        height: 56px;
    }

    .hf-host .hf .hf-tile-all .hf-ico:not(.hf-ico-art) {
        width: 26px;
        height: 26px;
    }

    .hf-host .hf .hf-tile-label {
        max-width: 72px;
        font-size: 0.68rem;
        line-height: 1.2;
    }
}

/* ---- "Toutes les catégories": the fifteen universes and their sub-categories (Benji, 2026-10-15) ----
   The nine universes the catalogue does not know yet get the same card, tinted in their plinth's
   colour, with "Bientôt" in place of "Découvrir". Every card ends with its sub-categories drawn so
   far: small tiles (picture and name) two by two, softened, under a "Bientôt" overline. */
.hf-unicard.is-extra {
    --uni-tint: rgba(var(--uni-rgb), 0.12);
}

.hf.is-dark .hf-unicard.is-extra {
    --uni-tint: rgba(var(--uni-rgb), 0.18);
}

.hf-unicard-soon-head {
    align-self: flex-start;
}

.hf-unicard-more {
    padding: 4px 18px 16px;
}

.hf-unicard-more-title {
    display: block;
    margin: 6px 6px 8px;
    color: var(--hf-muted, #686b72);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hf-unicard-subs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hf-unicard-sub {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 5px 8px 5px 5px;
    border-radius: 12px;
    background: rgba(var(--uni-rgb), 0.06);
    color: var(--hf-text);
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.2;
}

    .hf-unicard-sub .hf-ico-art {
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
        opacity: 0.9;
    }

    .hf-unicard-sub span {
        min-width: 0;
        overflow-wrap: anywhere;
    }

.hf.is-dark .hf-unicard-sub {
    background: rgba(var(--uni-rgb), 0.1);
}

/* The sub-category tiles: one per line in a narrow card (desktop's three columns), two per line
   when the card has the room (phones, tablets); words break only between syllables. */
.hf-unicard-more {
    container-type: inline-size;
}

.hf-unicard-subs {
    grid-template-columns: minmax(0, 1fr);
}

@container (min-width: 300px) {
    .hf-unicard-subs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.hf-unicard-sub span {
    overflow-wrap: normal;
    hyphens: auto;
}

/* The universe opened from the side menu: scrolled to just under the top bar, ringed in its colour
   (Benji, 2026-10-15: the categories not wired yet open their card here). */
.hf-unicard {
    scroll-margin-top: calc(var(--navbar-height, 56px) + 16px);
}

    .hf-unicard:target {
        box-shadow: 0 0 0 3px rgba(var(--uni-rgb, 18, 118, 58), 0.55), 0 10px 28px rgba(var(--uni-rgb, 18, 118, 58), 0.18);
    }

.hf-unicard.is-target {
    box-shadow: 0 0 0 3px rgba(var(--uni-rgb, 18, 118, 58), 0.55), 0 10px 28px rgba(var(--uni-rgb, 18, 118, 58), 0.18);
}

/* ---- the home's category tiles smaller on desktop, "Tout" quieter (Benji, 2026-10-15) ----
   The row of tiles: 88 px tiles with the picture at 70 px (was 116 / 98). "Tout" chosen is no longer
   a filled green square: a white tile with a thin ring of the site's colour, a faint wash and the
   grid in that colour, so it marks the choice without shouting; same on phones. */
@media (min-width: 992px) {
    .hf-host .hf:not(.hf-map-on) .hf-tile {
        width: 88px;
    }

    .hf-host .hf:not(.hf-map-on) .hf-tile-art {
        width: 80px;
        height: 78px;
        border-radius: 20px;
    }

    .hf-host .hf:not(.hf-map-on) .hf-tile .hf-ico-art {
        width: 70px;
        height: 70px;
    }

    .hf-host .hf:not(.hf-map-on) .hf-tile-all .hf-ico:not(.hf-ico-art) {
        width: 28px;
        height: 28px;
    }

    .hf-host .hf:not(.hf-map-on) .hf-tile-label {
        max-width: 90px;
        font-size: 0.72rem;
    }
}

.hf-host .hf .hf-tile.hf-tile-all.active .hf-tile-art {
    border: 1.5px solid rgba(var(--sheep-accent-rgb), 0.45);
    background: rgba(var(--sheep-accent-rgb), 0.07);
    box-shadow: none;
}

    .hf-host .hf .hf-tile.hf-tile-all.active .hf-ico:not(.hf-ico-art) {
        color: var(--sheep-accent-dark);
    }

.hf-host .hf .hf-tile.hf-tile-all.active .hf-tile-label {
    color: var(--sheep-accent-ink);
}

[data-theme="dark"] .hf-host .hf .hf-tile.hf-tile-all.active .hf-tile-art,
.hf-host .hf.is-dark .hf-tile.hf-tile-all.active .hf-tile-art {
    border-color: rgba(var(--sheep-accent-rgb), 0.5);
    background: rgba(var(--sheep-accent-rgb), 0.12);
    box-shadow: none;
}

    [data-theme="dark"] .hf-host .hf .hf-tile.hf-tile-all.active .hf-ico:not(.hf-ico-art),
    .hf-host .hf.is-dark .hf-tile.hf-tile-all.active .hf-ico:not(.hf-ico-art) {
        color: var(--sheep-accent);
    }

/* ---- map markers drawn like the sub-category tiles (Benji, 2026-10-15) ----
   "The map pictograms are not like the sub-categories": the same rounded square on the tiles' soft
   grey, the picture filling it in its true colours (no extra saturation), a white rim and a soft
   shadow so it reads on the map. Chosen: a ring of the site's colour on white, like a chosen tile.
   Closed: slate rim, as before. Night: the tiles' night plinth with a quiet rim. */
.hf-map-badge:not(.is-photo) {
    border-radius: 30%;
    padding: 1px;
    background: #f5f6f7;
    border: 2px solid #fff;
    box-shadow: 0 3px 10px rgba(32, 33, 36, 0.28);
}

    .hf-map-badge:not(.is-photo) img {
        object-fit: contain;
        filter: none;
    }

    .hf-map-badge.is-closed:not(.is-photo) {
        border-color: #9aa0a6;
    }

    .hf-map-badge.is-active:not(.is-photo) {
        border-color: var(--sheep-accent, #0f8b27);
        background: #fff;
        box-shadow: 0 6px 16px rgba(var(--sheep-accent-rgb), 0.4);
    }

[data-theme="dark"] .hf-map-badge:not(.is-photo),
.hf.is-dark .hf-map-badge:not(.is-photo) {
    background: var(--hf-pill-bg, #24335a);
    border-color: #3d4759;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45);
}

    [data-theme="dark"] .hf-map-badge.is-closed:not(.is-photo),
    .hf.is-dark .hf-map-badge.is-closed:not(.is-photo) {
        border-color: #6b7280;
    }

    [data-theme="dark"] .hf-map-badge.is-active:not(.is-photo),
    .hf.is-dark .hf-map-badge.is-active:not(.is-photo) {
        border-color: var(--sheep-accent, #0f8b27);
        background: #313a4c;
    }

/* ---- beside the map, the categories' tiles stay at the top while the list scrolls (Benji, 2026-10-15) ----
   "With the map open, when we go down, at least the sub-categories should always show at the top":
   the row of tiles sticks right under the top bar (where the map starts) while the hero, the filters
   and the addresses scroll under it; a soft shadow marks its lower edge. Desktop, map open. */
@media (min-width: 992px) {
    .hf-host .hf.hf-map-on .hf-cats {
        position: sticky;
        top: var(--hf-sticky-top, var(--navbar-height, 56px));
        z-index: 6;
        box-shadow: 0 10px 14px -14px rgba(32, 33, 36, 0.45);
    }

    [data-theme="dark"] .hf-host .hf.hf-map-on .hf-cats,
    .hf-host .hf.hf-map-on.is-dark .hf-cats {
        box-shadow: 0 10px 14px -12px rgba(0, 0, 0, 0.7);
    }
}

/* ---- one line for the hero, the map and the pinned tiles (Benji, 2026-10-15) ----
   "Move the menu up, the hero to the same height, and in pickup everything aligned all the time,
   going down and back up": the hero's card, the map and the side menu all start 8 px under the top
   bar; the map keeps 8 px at its right and bottom like the menu's card at its left and bottom; the
   row of tiles beside the map pins on that same line, the 8 px above it filled with the page's
   ground so nothing shows through while the list scrolls. */
@media (min-width: 992px) {
    .hf-host .hf .hf-hero-wrap {
        padding-top: calc(var(--hf-sticky-top, 51px) + var(--side-gap, 8px) - var(--navbar-height, 56px));
    }

    .hf.hf-map-on .hf-map {
        padding: var(--side-gap, 8px) var(--side-gap, 8px) var(--side-gap, 8px) 0;
    }

    .hf-host .hf.hf-map-on .hf-cats {
        top: calc(var(--hf-sticky-top, 51px) + var(--side-gap, 8px));
    }

        .hf-host .hf.hf-map-on .hf-cats::before {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: 100%;
            height: var(--side-gap, 8px);
            background: var(--hf-bg);
            pointer-events: none;
        }
}

/* ---- the categories' tiles smaller, the same in delivery and beside the map (Benji, 2026-10-15) ----
   "The top menu with every sub-category, pinned when we go down, is good but too big; in delivery
   too; make both the same size": on desktop, 64 px tiles with a 56 px plinth and the picture at
   48 px (was 88 / 80 / 70 in delivery, 78 / 70 / 60 beside the map), the names a touch smaller, the
   row tighter; about a third less height, the same in both modes. */
@media (min-width: 992px) {
    .hf-host .hf .hf-cats {
        padding-top: 10px;
    }

    .hf-host .hf .hf-cats .hf-tiles {
        gap: 8px;
        padding-top: 2px;
        padding-bottom: 8px;
    }

    .hf-host .hf .hf-cats .hf-tile {
        width: 64px;
        gap: 5px;
    }

    .hf-host .hf .hf-cats .hf-tile-art {
        width: 56px;
        height: 54px;
        border-radius: 15px;
    }

    .hf-host .hf .hf-cats .hf-tile .hf-ico-art {
        width: 48px;
        height: 48px;
    }

    .hf-host .hf .hf-cats .hf-tile-all .hf-ico:not(.hf-ico-art) {
        width: 22px;
        height: 22px;
    }

    .hf-host .hf .hf-cats .hf-tile-label {
        max-width: 68px;
        font-size: 0.66rem;
        line-height: 1.18;
    }

    .hf-host .hf .hf-cats .hf-tile-x {
        right: 0;
    }
}

/* ---- in delivery too, the categories' tiles stay at the top once passed (Benji, 2026-10-15) ----
   "In delivery mode, when we go down, the sub-categories should stay stuck at the top once we have
   passed them": as beside the map, the row of tiles pins 8 px under the top bar, on the line of the
   side menu's card, the 8 px above it filled with the page's ground, a soft shadow under it. Desktop. */
@media (min-width: 992px) {
    .hf-host .hf:not(.hf-map-on) .hf-cats {
        position: sticky;
        top: calc(var(--hf-sticky-top, 51px) + var(--side-gap, 8px));
        z-index: 6;
        box-shadow: 0 10px 14px -14px rgba(32, 33, 36, 0.45);
    }

        .hf-host .hf:not(.hf-map-on) .hf-cats::before {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: 100%;
            height: var(--side-gap, 8px);
            background: var(--hf-bg);
            pointer-events: none;
        }

    [data-theme="dark"] .hf-host .hf:not(.hf-map-on) .hf-cats,
    .hf-host .hf.is-dark:not(.hf-map-on) .hf-cats {
        box-shadow: 0 10px 14px -12px rgba(0, 0, 0, 0.7);
    }
}

/* ---- the universes' cover pictures on "Toutes les catégories" (Benji, 2026-10-15) ----
   Benji's photos (the Sheep-Me bag or box above Lausanne) open their universe's card, edge to edge
   in its rounded top, a wide band framed a little left of the middle where the bag stands. */
.hf-unicard-cover {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 2.1 / 1;
    object-fit: cover;
    object-position: 40% 50%;
}

/* ---- the hero's counter when it has many slides (Benji's kit, 2026-10-15) ----
   Eighteen slides: "3 / 18" between the arrows instead of eighteen dots, in the controls' pill, the
   same small bold figures on phones (where a swipe changes the slide). */
.hf-host .hf .hf-hero-count {
    display: inline-flex;
    align-items: center;
    min-width: 44px;
    justify-content: center;
    padding: 0 6px;
    font-size: 0.78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: inherit;
    white-space: nowrap;
}

/* ==========================================================================
   Compact home (Eric, 2026-10-16): the first row of shops shows without scrolling, on a
   900 px-high desktop screen and above the phone's bar. Last in the file so it wins over the
   rules above at equal specificity: smaller hero picture and title, tighter spacing, a smaller
   section title and demo notice, slightly smaller category tiles. Same content, nothing removed.
   ========================================================================== */
@container (min-width: 641px) {
    .hf-host .hf .hf-hero-media {
        height: 220px;
    }
    .hf-host .hf .hf-hero-slide {
        gap: 24px;
        min-height: 0;
    }
    .hf-host .hf .hf-hero-copy {
        padding: 4px 12px 4px 4px;
    }
    .hf-host .hf .hf-hero-eyebrow {
        margin: 0 0 6px;
    }
    .hf-host .hf .hf-hero-title,
    .hf-host .hf .hf-hero-title em {
        font-size: clamp(1.45rem, 2.6cqi, 1.7rem);
        line-height: 1.08;
    }
    .hf-host .hf .hf-hero-title {
        color: var(--sheep-green-deep, #068125);   /* green like the section title (Eric, 2026-10-16); the em keeps its orange */
    }
    .hf-host .hf .hf-hero-text {
        max-width: 520px;
        margin: 6px 0 0;
        font-size: 0.9rem;
        line-height: 1.45;
    }
    .hf-host .hf .hf-hero-cta {
        min-height: 42px;
        min-width: 0;
        margin-top: 10px;
        padding: 10px 16px;
    }
}
.hf-host .hf .hf-section-head {
    margin: 8px auto 2px;
}
.hf-host .hf .hf-section-head h2 {
    font-size: clamp(1.15rem, 1.6vw, 1.35rem);
    color: var(--sheep-green-deep, #068125);   /* green, not black (Eric, 2026-10-16) */
}
.hf-host .hf .hf-tile-art {
    width: 60px;
    height: 60px;
}
.hf-host .hf .hf-tile .hf-ico-art {
    width: 50px;
    height: 50px;
}
.hf-host .hf .hf-demo-note {
    margin-top: 8px;
    padding: 6px 12px;
    font-size: 0.85rem;
}
@media (max-width: 767.98px) {
    .hf-host .hf .hf-section-head {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin: 6px auto 0;
    }
    .hf-host .hf .hf-section-head h2 {
        font-size: 1.15rem;
    }
    .hf-host .hf .hf-tile-art {
        width: 56px;
        height: 56px;
    }
    .hf-host .hf .hf-tile .hf-ico-art {
        width: 46px;
        height: 46px;
    }
}
@container (max-width: 640px) {
    .hf-host .hf .hf-hero-media {
        height: 125px;
    }
}

/* The carousel track is a grid (the slides share its rows as a subgrid) with a minimum height of
   clamp(290px, 34cqi, 390px): that minimum, not the slides, set the hero's height. The paragraph is
   clamped to two lines so a long slide cannot stretch the others. */
@container (min-width: 641px) {
    .hf-host .hf .hf-hero-track {
        min-height: 230px;
    }
    .hf-host .hf .hf-hero-text {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}
.hf-host .hf .hf-hero {
    padding: 8px 20px 8px 24px;
}
.hf-host .hf .hf-list .hf-results {
    margin-top: 10px;
}
.hf-host .hf .hf-demo-note {
    margin-top: 6px;
}
@media (max-width: 767.98px) {
    /* The title keeps one line when it can; the link wraps under it, right-aligned, instead of running
       off the screen (Eric, 2026-10-16). */
    .hf-host .hf .hf-section-head {
        flex-wrap: wrap;
        row-gap: 2px;
    }
    .hf-host .hf .hf-section-head > div {
        flex: 1 1 auto;
        min-width: 0;
    }
    .hf-host .hf .hf-section-head h2 {
        font-size: 1.05rem;
    }
    .hf-host .hf .hf-section-head .hf-text-link {
        flex: 0 0 auto;
        margin-left: auto;
        font-size: 0.8rem;
        white-space: nowrap;
    }
    .hf-host .hf .hf-hero {
        padding: 10px 14px;
    }
}

/* Phones: the slide counter sits in the top-right corner instead of taking a line of its own,
   and the title is a size smaller, so the first shops show above the phone's bar. */
@container (max-width: 640px) {
    .hf-host .hf .hf-hero-controls {
        top: 8px;
        right: 10px;
        bottom: auto;
    }
    .hf-host .hf .hf-hero-copy {
        padding-top: 0;
        padding-bottom: 4px;
    }
    .hf-host .hf .hf-hero-title,
    .hf-host .hf .hf-hero-title em {
        font-size: clamp(1.05rem, 4.8vw, 1.3rem);
    }
    .hf-host .hf .hf-hero-cta {
        margin-top: 8px;
    }
}
/* The hero title in the brand green at every size (Eric, 2026-10-16); its italic line keeps the orange. */
.hf-host .hf .hf-hero-title {
    color: var(--sheep-green-deep, #068125);
}

/* ---- phones too: the categories' tiles stay at the top once passed (Benji, 2026-10-16: "on mobile,
   in a category, when we go down, the sub-categories must stick at the top too") ----
   Phones and tablets: the row of tiles pins right under the top bar (and the map pane's own bar),
   on the page's ground with a soft shadow under it, as on desktop. A tile chosen further down brings
   the list back to its first addresses (site.js). */
@media (max-width: 991.98px) {
    .hf-host .hf .hf-cats {
        position: sticky;
        top: var(--hf-sticky-top, 56px);
        z-index: 6;
        background: var(--hf-bg);
        box-shadow: 0 10px 14px -14px rgba(32, 33, 36, 0.45);
    }

    [data-theme="dark"] .hf-host .hf .hf-cats,
    .hf-host .hf.is-dark .hf-cats {
        box-shadow: 0 10px 14px -12px rgba(0, 0, 0, 0.7);
    }
}

/* ---- the pinned row compact on phones (Benji, 2026-10-16: "too tall once it sticks") ----
   Once pinned (is-stuck, set by site.js), the row of tiles shrinks from about 124 to 70 px: smaller
   plinths (40 px, pictures 34 px), the names on one smaller line, tighter padding. At the top of the
   page the tiles keep their full size. */
@media (max-width: 991.98px) {
    .hf-host .hf .hf-cats.is-stuck {
        padding-top: 4px;
    }

        .hf-host .hf .hf-cats.is-stuck .hf-tiles {
            gap: 6px;
            padding-top: 2px;
            padding-bottom: 6px;
        }

        .hf-host .hf .hf-cats.is-stuck .hf-tile {
            width: 58px;
            gap: 3px;
            padding-top: 2px;
        }

        .hf-host .hf .hf-cats.is-stuck .hf-tile-art {
            width: 40px;
            height: 40px;
            border-radius: 12px;
        }

        .hf-host .hf .hf-cats.is-stuck .hf-tile .hf-ico-art {
            width: 34px;
            height: 34px;
        }

        .hf-host .hf .hf-cats.is-stuck .hf-tile-all .hf-ico:not(.hf-ico-art) {
            width: 18px;
            height: 18px;
        }

        .hf-host .hf .hf-cats.is-stuck .hf-tile-label {
            max-width: 60px;
            font-size: 0.6rem;
            line-height: 1.15;
            -webkit-line-clamp: 1;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .hf-host .hf .hf-cats.is-stuck .hf-tile-x {
            width: 15px;
            height: 15px;
        }
}

/* ---- the categories page (Eric, 2026-10-16): main topics only, no covers on phones, and in the green
   mode just the universes that have shops, their categories in a row of chips ---- */
details.hf-unicard-more > summary.hf-unicard-more-title {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

    details.hf-unicard-more > summary.hf-unicard-more-title::-webkit-details-marker {
        display: none;
    }

    details.hf-unicard-more > summary.hf-unicard-more-title::after {
        content: "";
        width: 7px;
        height: 7px;
        border-right: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;
        transform: rotate(45deg) translateY(-2px);
        transition: transform .2s ease;
    }

    details.hf-unicard-more[open] > summary.hf-unicard-more-title::after {
        transform: rotate(-135deg) translateY(-2px);
    }

details.hf-unicard-more > .hf-unicard-subs {
    margin-top: 8px;
}

/* Phones: no cover pictures on this page, in either mode. */
@media (max-width: 767.98px) {
    .hf-catpage .hf-unicard-cover {
        display: none;
    }
}

/* The green mode: only the universes the catalogue knows, no covers, the categories with shops as chips. */
html:not([data-accent="orange"]) .hf-catpage .hf-unicard.is-extra,
html:not([data-accent="orange"]) .hf-catpage .hf-unicard-cover,
html:not([data-accent="orange"]) .hf-catpage .hf-unicard-list li:has(> .hf-unicard-row.is-soon),
html:not([data-accent="orange"]) .hf-catpage .hf-unicard-chev {
    display: none;
}

html:not([data-accent="orange"]) .hf-catpage .hf-unicard-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 18px 16px;
}

    html:not([data-accent="orange"]) .hf-catpage .hf-unicard-list li + li {
        border-top: 0;
    }

html:not([data-accent="orange"]) .hf-catpage .hf-unicard-row {
    min-height: 40px;
    gap: 8px;
    padding: 4px 14px 4px 6px;
    border-radius: 999px;
    background: rgba(var(--uni-rgb), 0.08);
}

    html:not([data-accent="orange"]) .hf-catpage .hf-unicard-row .hf-unicard-ico {
        width: 26px;
        height: 26px;
    }

        html:not([data-accent="orange"]) .hf-catpage .hf-unicard-row .hf-unicard-ico .hf-ico,
        html:not([data-accent="orange"]) .hf-catpage .hf-unicard-row .hf-unicard-ico .hf-ico-art {
            width: 24px;
            height: 24px;
        }

    html:not([data-accent="orange"]) .hf-catpage .hf-unicard-row .hf-unicard-name {
        padding: 0;
        font-size: 0.84rem;
    }