/*
 * DealnMeet Discovery Home — hlc-nearby.css V7.3
 * Theme: Blocksy + WooCommerce only
 *
 * V7.3 changes:
 *   - Compressed desktop header: horizontal row (Swiggy-style), ~56px tall
 *   - GPS button always visible on desktop (never hidden after location set)
 *   - Unified card spec: one image height (170px), one typography set,
 *     one body size — for ALL sections (carousel and grid)
 *   - § 15 context overrides: carousel WIDTHS only, zero dimension overrides
 *   - .ct-header-placeholder zeroed in § 0 (Blocksy spacer)
 *
 * Card reference: Vendor Dashboard Customer App Preview
 *   --c-prev: #0b1628  border-radius: 18px
 *   timer: top-left (flash=red+pulse, offpeak=white+purple-dot)
 *   title: 16px/900/white (hero)
 *   phrase: 11px/400/rgba(255,255,255,.7) (secondary)
 */


/* ═══════════════════════════════════════════════════════════
   § 0  BLOCKSY ISOLATION — Discovery page only
   ═══════════════════════════════════════════════════════════ */

/* ── Rules shared across ALL app pages live in App Shell Foundation v1.
   enqueue_app_foundation() in class-hlc-nearby.php emits them as inline
   CSS under body.hlc-app-page on every vendor, discovery, and customer
   page. Nothing below duplicates those rules.

   Foundation covers:
     • [data-vertical-spacing*="top"] padding-top: 16px
     • .ct-page-title-wrap / .entry-title suppression
     • .ct-header-placeholder / .header-placeholder suppression
     • .ct-sidebar suppression
     • .entry-content / .page-content clean slate
     • .ct-container > article max-width / overflow
     • .hlc-app-shell base container rule

   Only Discovery-specific Blocksy overrides remain here.  ──── */

/* Sidebar column collapse — Discovery always full-width */
.has-right-sidebar .content-wrap,
.has-left-sidebar  .content-wrap { grid-template-columns: 1fr !important; }


/* ═══════════════════════════════════════════════════════════
   § 1  DESIGN TOKENS
   ═══════════════════════════════════════════════════════════ */

.hlc-nearby-wrap {
    --g:        16px;
    --page:     #ffffff;
    --card:     #0b1628;
    --green:    #0c831f;
    --green-lt: #f0faf1;
    --green-dk: #0a6b19;
    --red:      #dc2626;
    --atshop:   #4ade80;
    --tx:       #111827;
    --tx2:      #4b5563;
    --tx3:      #9ca3af;
    --line:     #f0f0f0;
    --surface:  #f4f4f6;
    --ease:     cubic-bezier(.4,0,.2,1);
    --r:        18px;
    --pill:     999px;
    --max-w:    1320px;
}


/* ═══════════════════════════════════════════════════════════
   § 2  PAGE SHELL
   Mobile: 100vw full-bleed. Desktop: centered max-width.
   ═══════════════════════════════════════════════════════════ */

.hlc-nearby-wrap {
    padding: 0 var(--g) 64px;
    background: var(--page);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    color: var(--tx);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    box-sizing: border-box;
    width: 100%;
}

@media (max-width: 767px) {
    /* Explicit 0 margins — align wrapper with Blocksy's content container.
       auto margins computed to 24px each side because Blocksy constrains
       the parent container to 352px on a 400px viewport (confirmed by
       DevTools horizontal-inset diagnostic). margin:auto centred our
       wrapper in the 48px gap instead of aligning it with the container. */
    .hlc-nearby-wrap {
        left: auto;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        transform: none;
    }
}
@media (min-width: 768px) {
    .hlc-nearby-wrap { --g: 20px; max-width: var(--max-w); margin-left: auto; margin-right: auto; padding-bottom: 80px; }
}


/* ═══════════════════════════════════════════════════════════
   § 3  APP HEADER
   Mobile: elements stacked (location → search → GPS).
   Desktop ≥768px: compact horizontal row — Swiggy-style.
     [Location info] [──── Search ────] [Use My Location]
   GPS button: always visible on desktop (never suppressed).
   ═══════════════════════════════════════════════════════════ */

.hlc-app-hdr {
    padding: 14px 0 12px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 14px;
}

/* ── Location row ── */
.hlc-loc { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.hlc-loc__info { min-width: 0; flex: 1; }
.hlc-loc__label { display: block; font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--tx3); margin-bottom: 2px; line-height: 1; }
.hlc-loc__place { display: flex; align-items: center; gap: 5px; }
.hlc-loc__pin   { color: var(--green); flex-shrink: 0; }
.hlc-loc__city  { font-size: 17px; font-weight: 900; color: var(--tx); letter-spacing: -.3px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.hlc-loc__dist  { font-size: 12px; color: var(--tx3); white-space: nowrap; flex-shrink: 0; }
.hlc-loc__change {
    flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 12px; font-weight: 700; color: var(--green); text-decoration: none;
    background: var(--green-lt); padding: 6px 12px; border-radius: var(--pill);
    transition: background .15s var(--ease), transform .1s;
}
.hlc-loc__change:hover  { background: #d4edda; }
.hlc-loc__change:active { transform: scale(.97); }

/* ── Search bar ── */
.hlc-searchbar { position: relative; display: flex; align-items: center; }
.hlc-searchbar__ico { position: absolute; left: 13px; color: var(--tx3); pointer-events: none; z-index: 1; }
.hlc-searchbar__input {
    width: 100%; padding: 12px 44px 12px 40px;
    background: var(--surface); border: 1.5px solid transparent; border-radius: 10px;
    font-size: 14px; font-family: inherit; color: var(--tx); outline: none;
    transition: border-color .2s var(--ease), background .2s, box-shadow .2s;
}
.hlc-searchbar__input::placeholder { color: var(--tx3); }
.hlc-searchbar__input:focus { background: var(--page); border-color: #d1d5db; box-shadow: 0 2px 12px rgba(0,0,0,.06); }
.hlc-searchbar__btn {
    position: absolute; right: 7px; width: 32px; height: 32px;
    background: var(--tx); color: var(--page); border: none; border-radius: 7px;
    font-size: 19px; font-weight: 700; cursor: pointer;
    display: flex; align-items: center; justify-content: center; padding-top: 1px;
    transition: background .15s;
}
.hlc-searchbar__btn:hover { background: #0a0a14; }

/* ── GPS button ── */
.hlc-gps-btn {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    width: 100%; margin-top: 10px; padding: 12px 16px;
    background: var(--tx); color: var(--page); border: none; border-radius: 10px;
    font-size: 14px; font-weight: 800; font-family: inherit; cursor: pointer;
    transition: background .15s, transform .1s;
}
.hlc-gps-btn:hover  { background: #0a0a14; }
.hlc-gps-btn:active { transform: scale(.98); }
/* Mobile: hide when located */
.hlc-nearby-wrap[data-hlc-located="1"] .hlc-gps-btn { display: none; }

/* ── Locating spinner ── */
#hlc-locating { margin-top: 10px; text-align: center; font-size: 13px; color: var(--tx2); line-height: 1.55; }
#hlc-locating p { margin: 2px 0; }
.hlc-nearby-wrap[data-hlc-located="1"] #hlc-locating { display: none; }
.hlc-locating-spinner { width: 20px; height: 20px; margin: 0 auto 8px; border: 2.5px solid var(--line); border-top-color: var(--green); border-radius: 50%; animation: hlc-spin .7s linear infinite; }
.hlc-locating-sub { color: var(--tx3); font-size: 12px; }
@keyframes hlc-spin { to { transform: rotate(360deg); } }


/* ── DESKTOP HEADER: premium horizontal layout ─────────────────
   Three elements, same height (46px), clean hierarchy:
     [📍 Location pill ▾]  [══ Search... ══]  [⊕ Near me outline]
   Location pill is structured to accept a <select> replacement
   in Milestone 2B (city dropdown) — no layout change will be
   needed when the PHP swap happens.
   ─────────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
    .hlc-app-hdr {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 14px 0;
        flex-wrap: nowrap;
    }

    /* ── Location pill — styled as dropdown trigger ── */
    .hlc-loc {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        height: 46px;
        padding: 0 10px 0 14px;
        min-width: 160px;
        max-width: 220px;
        background: var(--surface);
        border: 1.5px solid var(--line);
        border-radius: var(--pill);
        margin-bottom: 0;
        cursor: pointer;
        transition: border-color .2s var(--ease), background .2s;
        overflow: hidden;
    }
    .hlc-loc:hover { border-color: #c0c0cc; background: var(--page); }

    .hlc-loc__info { flex: 1; min-width: 0; }
    .hlc-loc__label {
        display: block;
        font-size: 9px;
        font-weight: 700;
        letter-spacing: .6px;
        text-transform: uppercase;
        color: var(--tx3);
        margin-bottom: 2px;
        line-height: 1;
    }
    .hlc-loc__place { display: flex; align-items: center; gap: 4px; }
    .hlc-loc__pin   { color: var(--green); flex-shrink: 0; width: 12px; height: 12px; }
    .hlc-loc__city  { font-size: 13px; font-weight: 800; max-width: 110px; letter-spacing: -.2px; }
    .hlc-loc__dist  { font-size: 10px; color: var(--tx3); flex-shrink: 0; }

    /* Change link becomes a compact chevron pill inside the location pill */
    .hlc-loc__change {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        gap: 2px;
        padding: 3px 8px;
        font-size: 10px;
        font-weight: 700;
        color: var(--green);
        background: var(--green-lt);
        border: none;
        border-radius: var(--pill);
        text-decoration: none;
        white-space: nowrap;
        transition: background .15s;
    }
    .hlc-loc__change:hover  { background: #d4edda; transform: none; }
    .hlc-loc__change:active { transform: none; }

    /* ── Search bar: hero element, pill-shaped ── */
    .hlc-searchbar { flex: 1 1 auto; min-width: 0; }
    .hlc-searchbar__input {
        height: 46px;
        padding: 0 48px 0 44px;
        border-radius: var(--pill);
        font-size: 14px;
        background: var(--surface);
        border: 1.5px solid transparent;
    }
    .hlc-searchbar__input:focus {
        background: var(--page);
        border-color: #d1d5db;
        box-shadow: 0 2px 16px rgba(0,0,0,.07);
    }
    .hlc-searchbar__ico { left: 16px; }
    .hlc-searchbar__btn {
        right: 6px;
        width: 36px;
        height: 36px;
        border-radius: var(--pill);
        font-size: 20px;
    }

    /* ── GPS button: outline secondary pill ── */
    .hlc-gps-btn {
        flex: 0 0 auto;
        display: flex;
        width: auto;
        margin-top: 0;
        height: 46px;
        padding: 0 16px;
        background: transparent;
        color: var(--tx2);
        border: 1.5px solid var(--line);
        border-radius: var(--pill);
        font-size: 13px;
        font-weight: 700;
        min-width: 0;
        white-space: nowrap;
        box-shadow: none;
        transition: background .15s var(--ease), border-color .15s, color .15s;
    }
    .hlc-gps-btn:hover  { background: var(--surface); border-color: var(--tx3); color: var(--tx); }
    .hlc-gps-btn:active { transform: scale(.97); }

    /* Always visible on desktop regardless of location state */
    .hlc-nearby-wrap[data-hlc-located="1"] .hlc-gps-btn { display: flex !important; }

    /* Spinner: never needed on desktop (GPS triggers inline) */
    #hlc-locating { display: none !important; }
}


/* ═══════════════════════════════════════════════════════════
   § 4  RESULT COUNT & DISCOVERY NOTICE
   ═══════════════════════════════════════════════════════════ */

.hlc-result-count { font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--tx3); margin: 0 0 8px; }
.hlc-discovery-notice { font-size: 12px; color: var(--tx3); text-align: center; margin: 0 0 8px; line-height: 1.4; }


/* ═══════════════════════════════════════════════════════════
   § 5  COLLECTION CHIP RAIL
   ═══════════════════════════════════════════════════════════ */

.hlc-collections {
    display: flex; gap: 8px;
    margin: 0 calc(-1 * var(--g)) 16px;
    padding: 2px var(--g) 8px;
    overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.hlc-collections::-webkit-scrollbar { display: none; }

.hlc-chip {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 7px 13px;
    background: var(--surface); border: 1.5px solid transparent; border-radius: var(--pill);
    text-decoration: none; color: var(--tx); font-size: 13px; font-weight: 700; white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    transition: background .18s var(--ease), color .18s, transform .1s;
}
.hlc-chip:hover  { background: #eaeaee; }
.hlc-chip:active { transform: scale(.95); }
.hlc-chip.is-active { background: var(--tx); border-color: var(--tx); color: var(--page); box-shadow: 0 3px 12px rgba(17,24,39,.2); }
.hlc-chip__emoji { font-size: 14px; line-height: 1; }


/* ═══════════════════════════════════════════════════════════
   § 6  SECTION HEADERS
   ═══════════════════════════════════════════════════════════ */

.hlc-section { margin-bottom: 22px; }
.hlc-section__hdr { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.hlc-section__title { font-size: 19px; font-weight: 900; letter-spacing: -.4px; color: var(--tx); line-height: 1.2; margin: 0 0 2px; }
.hlc-section__sub   { font-size: 11.5px; color: var(--tx3); margin: 0; }
.hlc-see-all {
    flex-shrink: 0; align-self: center;
    display: inline-flex; align-items: center;
    font-size: 12px; font-weight: 700; color: var(--green); background: var(--green-lt);
    padding: 5px 12px; border-radius: var(--pill); text-decoration: none; white-space: nowrap;
    transition: background .15s, transform .1s;
}
.hlc-see-all:hover  { background: #d4edda; }
.hlc-see-all:active { transform: scale(.97); }
.hlc-see-all--back  { color: var(--tx2); background: var(--surface); }
.hlc-see-all--back:hover { background: #eaeaee; }

@media (min-width: 768px) { .hlc-section__title { font-size: 21px; } }


/* ═══════════════════════════════════════════════════════════
   § 7  HORIZONTAL DISCOVERY CAROUSEL
   ═══════════════════════════════════════════════════════════ */

.hlc-nearby-scroll {
    display: flex; gap: 12px;
    margin: 0 calc(-1 * var(--g));
    padding: 4px var(--g) 14px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.hlc-nearby-scroll::-webkit-scrollbar { display: none; }
.hlc-nearby-scroll .hlc-card { flex: 0 0 84vw; max-width: 320px; scroll-snap-align: start; }

@media (min-width: 600px) { .hlc-nearby-scroll .hlc-card { flex: 0 0 52vw; max-width: 320px; } }
@media (min-width: 768px) { .hlc-nearby-scroll .hlc-card { flex: 0 0 265px; max-width: 265px; } }
@media (min-width: 992px) { .hlc-nearby-scroll .hlc-card { flex: 0 0 280px; max-width: 280px; } }
@media (min-width: 1200px){ .hlc-nearby-scroll .hlc-card { flex: 0 0 295px; max-width: 295px; } }


/* ═══════════════════════════════════════════════════════════
   § 8  ALL DEALS FEED — vertical grid
   ═══════════════════════════════════════════════════════════ */

.hlc-nearby-hdr { display: flex; align-items: flex-start; justify-content: space-between; padding-top: 24px; border-top: 1px solid var(--line); margin-bottom: 16px; }
.hlc-nearby-grid { display: flex; flex-direction: column; gap: 12px; margin-bottom: 6px; }
.hlc-nearby-grid .hlc-card { width: 100%; }

@media (min-width: 768px) {
    .hlc-nearby-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .hlc-nearby-grid .hlc-card { width: auto; }
}
@media (min-width: 992px)  { .hlc-nearby-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .hlc-nearby-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; } }


/* ═══════════════════════════════════════════════════════════
   § 9  EMPTY STATES
   ═══════════════════════════════════════════════════════════ */

.hlc-no-results { padding: 48px var(--g); text-align: center; color: var(--tx2); font-size: 14px; line-height: 1.7; }
.hlc-no-results strong { display: block; font-size: 17px; font-weight: 800; color: var(--tx); margin-bottom: 8px; }
.hlc-no-results a { color: var(--green); font-weight: 700; text-decoration: none; }


/* ═══════════════════════════════════════════════════════════
   § 10 LOAD MORE
   ═══════════════════════════════════════════════════════════ */

.hlc-load-more-wrap { padding: 18px 0 0; }
.hlc-load-more {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 14px;
    background: var(--page); border: 1.5px solid #e5e7eb; border-radius: var(--r);
    font-size: 13.5px; font-weight: 800; font-family: inherit; color: var(--tx);
    text-decoration: none; cursor: pointer;
    transition: border-color .2s var(--ease), box-shadow .2s, transform .1s;
}
.hlc-load-more:hover  { border-color: #c0c0cc; box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.hlc-load-more:active { transform: scale(.99); }
.hlc-load-more__count { font-size: 11.5px; font-weight: 400; color: var(--tx3); }
.hlc-load-more--done  { text-align: center; padding: 14px; font-size: 13px; color: var(--tx3); }


/* ═══════════════════════════════════════════════════════════
   § 11 DEAL CARD BASE SHELL
   ═══════════════════════════════════════════════════════════ */

.hlc-card {
    display: block; background: var(--card); border-radius: var(--r); overflow: hidden;
    text-decoration: none; color: inherit;
    -webkit-transform: translateZ(0); transform: translateZ(0);
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 2px 8px rgba(0,0,0,.14), 0 8px 24px rgba(0,0,0,.12);
    will-change: transform, box-shadow;
    transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.hlc-card:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }


/* ═══════════════════════════════════════════════════════════
   § 12 CARD IMAGE ZONE — 170px unified height
   ═══════════════════════════════════════════════════════════ */

.hlc-card__img {
    position: relative;
    height: 170px;
    overflow: hidden;
    background: #1b263b;
}

.hlc-card__img-bg {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    background-color: #1b263b;
    transition: transform .45s cubic-bezier(.25,.46,.45,.94);
    will-change: transform; z-index: 0;
}
.hlc-card__img::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to bottom, transparent 30%, rgba(11,22,40,.90) 100%);
    z-index: 2; pointer-events: none;
}
.hlc-card__img--ph .hlc-card__img-bg {
    background: linear-gradient(148deg, #1b263b 0%, #0d1017 52%, #1a1035 100%);
}
.hlc-card__img--ph .hlc-card__img-bg::before {
    content: 'DealnMeet';
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 17px; font-weight: 900; letter-spacing: 5px; text-transform: uppercase;
    color: rgba(255,255,255,.07); user-select: none;
}

/* ── Timer badge: top-left ── */
.hlc-card__timer {
    position: absolute; top: 10px; left: 10px; z-index: 4;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 9px; border-radius: 7px;
    font-size: 11px; font-weight: 900; white-space: nowrap;
}
.hlc-timer--flash   { background: var(--red); color: #fff; animation: hlc-pulse 1.2s infinite; }
.hlc-timer--offpeak { background: rgba(255,255,255,.93); color: #0f172a; border: 1px solid rgba(0,0,0,.08); }
.hlc-timer--expiry  { background: rgba(217,119,6,.9); color: #fff; }
.hlc-timer--validity{ background: rgba(255,255,255,.18); color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.hlc-timer--expired { background: rgba(100,116,139,.55); color: rgba(255,255,255,.65); animation: none !important; }
.hlc-timer--ended   { opacity: .45; animation: none !important; }

@keyframes hlc-pulse { 0%,100%{opacity:1} 50%{opacity:.72} }

.hlc-timer-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.hlc-timer--flash   .hlc-timer-dot { background: rgba(255,255,255,.8); }
.hlc-timer--offpeak .hlc-timer-dot { background: #7c3aed; }
.hlc-timer--expiry  .hlc-timer-dot { background: rgba(255,255,255,.8); }
.hlc-timer--validity .hlc-timer-dot{ background: rgba(255,255,255,.6); }
.hlc-timer--expired  .hlc-timer-dot{ background: rgba(255,255,255,.45); }

/* ── Distance badge ── */
.hlc-card__dist {
    position: absolute; top: 10px; left: 10px; z-index: 4;
    display: inline-flex; align-items: center; gap: 3px;
    background: rgba(0,0,0,.62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    color: rgba(255,255,255,.9); font-size: 10.5px; font-weight: 700;
    padding: 4px 10px; border-radius: var(--pill);
}
/* ── Discount badge: top-right ── */
.hlc-card__discount {
    position: absolute; top: 10px; right: 10px; z-index: 4;
    background: var(--red); color: #fff;
    font-size: 10.5px; font-weight: 900; letter-spacing: .3px;
    padding: 4px 9px; border-radius: 7px; white-space: nowrap;
}


/* ═══════════════════════════════════════════════════════════
   § 13 CARD OVERLAY
   ═══════════════════════════════════════════════════════════ */

.hlc-card__overlay {
    position: absolute; bottom: 0; left: 0; right: 0; z-index: 3;
    padding: 8px 13px 11px;
}
.hlc-card__title {
    font-size: 16px; font-weight: 900; line-height: 1.25; color: #fff; margin: 0 0 3px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    text-shadow: 0 1px 8px rgba(0,0,0,.65);
}
.hlc-card__phrase {
    font-size: 11px; font-weight: 400; line-height: 1.4;
    color: rgba(255,255,255,.7); margin: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}


/* ═══════════════════════════════════════════════════════════
   § 14 CARD BODY
   ═══════════════════════════════════════════════════════════ */

.hlc-card__body {
    background: var(--card);
    padding: 10px 12px 11px;
    border-top: 1px solid rgba(255,255,255,.06);
}

.hlc-card--customer .hlc-card__brand { display: none !important; }

.hlc-card__brand { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.hlc-card__avatar {
    flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
    background: var(--avatar-bg, var(--green)); color: #fff;
    font-size: 10px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    border: 1.5px solid rgba(255,255,255,.1); user-select: none;
}
.hlc-card__brand-info { min-width: 0; flex: 1; }
.hlc-card__shop-name { font-size: 11.5px; font-weight: 700; color: rgba(255,255,255,.82); margin: 0 0 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hlc-card__locality  { font-size: 9px; font-weight: 500; color: rgba(255,255,255,.28); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; letter-spacing: .3px; }

.hlc-card__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-bottom: 3px; }
.hlc-card__prices { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hlc-card__regular { font-size: 11px; font-weight: 400; color: rgba(255,255,255,.26); text-decoration: line-through; line-height: 1; }
.hlc-card__regular .woocommerce-Price-amount { color: inherit; }
.hlc-card__face { font-size: 21px; font-weight: 900; color: #fff; line-height: 1; letter-spacing: -.4px; }
.hlc-card__face .woocommerce-Price-amount { color: inherit; }

.hlc-card__book {
    flex-shrink: 0; display: inline-flex; align-items: center; white-space: nowrap;
    height: 33px; padding: 0 12px;
    background: var(--green); color: #fff;
    font-size: 12px; font-weight: 800; border-radius: 8px;
    box-shadow: 0 3px 10px rgba(12,131,31,.28);
    transition: background .15s;
}
.hlc-card__book .woocommerce-Price-amount { color: inherit; }
.hlc-card__atshop { display: block; font-size: 10px; font-weight: 700; color: var(--atshop); margin-top: 2px; }
.hlc-card__atshop .woocommerce-Price-amount { color: inherit; }


/* ═══════════════════════════════════════════════════════════
   § 15 CONTEXT OVERRIDES — CAROUSEL WIDTHS ONLY
   Card dimensions identical in all contexts.
   ═══════════════════════════════════════════════════════════ */

/* (Carousel widths in § 7. Grid widths in § 8. Nothing else to override.) */


/* ═══════════════════════════════════════════════════════════
   § 16 CAROUSEL NAVIGATION ARROWS (desktop only)
   ═══════════════════════════════════════════════════════════ */

.hlc-carousel-nav { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.hlc-carousel-prev,
.hlc-carousel-next {
    width: 30px; height: 30px;
    background: var(--surface); border: 1.5px solid #e5e7eb; border-radius: 50%;
    display: none;
    align-items: center; justify-content: center;
    cursor: pointer; color: var(--tx2); padding: 0;
    transition: background .15s var(--ease), color .15s, opacity .2s;
    flex-shrink: 0;
}
@media (min-width: 768px) { .hlc-carousel-prev, .hlc-carousel-next { display: flex; } }
.hlc-carousel-prev:hover, .hlc-carousel-next:hover { background: var(--tx); color: var(--page); }
.hlc-carousel-prev:disabled, .hlc-carousel-next:disabled { opacity: .3; cursor: default; }


/* ═══════════════════════════════════════════════════════════
   § 17 MICRO-INTERACTIONS
   ═══════════════════════════════════════════════════════════ */

.hlc-card:hover { transform: translateY(-3px); box-shadow: 0 4px 12px rgba(0,0,0,.18), 0 14px 36px rgba(0,0,0,.16); }
.hlc-card:active { transform: scale(.993); }
.hlc-card:hover .hlc-card__img-bg { transform: scale(1.05); }
.hlc-card:hover .hlc-card__book   { background: var(--green-dk); }
.hlc-card:active .hlc-card__book  { background: var(--green-dk); }

@media (prefers-reduced-motion: reduce) {
    .hlc-card, .hlc-card__img-bg, .hlc-card__book,
    .hlc-chip, .hlc-load-more, .hlc-loc__change,
    .hlc-see-all, .hlc-gps-btn, .hlc-searchbar__input,
    .hlc-locating-spinner { transition: none; animation: none; }
    .hlc-timer--flash { animation: none; }
}


/* ═══════════════════════════════════════════════════════════
   § 18 SMALL MOBILE (< 360px)
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 359px) {
    .hlc-nearby-wrap    { --g: 12px; }
    .hlc-loc__city      { font-size: 15px; max-width: 160px; }
    .hlc-section__title { font-size: 17px; }
    .hlc-nearby-scroll .hlc-card { flex: 0 0 90vw; }
}