*, *::before, *::after { box-sizing: border-box; }

/* ═══════════════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════════════ */
.bl-hero {
    background: linear-gradient(150deg, #091e3a 0%, #0f3460 55%, #16213e 100%);
    padding: 56px 0 0;
    position: relative;
    overflow: hidden;
}
.bl-hero-ripple {
    position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(ellipse 60% 40% at 80% 20%, rgba(82,196,255,.07) 0%, transparent 70%),
        radial-gradient(ellipse 40% 60% at 10% 80%, rgba(82,196,255,.05) 0%, transparent 70%);
}
.bl-hero-inner { position: relative; z-index: 1; }
.bl-hero-badge {
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
    color: rgba(255,255,255,.9); font-size: .72rem; font-weight: 700;
    padding: .32rem .9rem; border-radius: 30px;
    text-transform: uppercase; letter-spacing: .8px; margin-bottom: 18px;
}
.bl-hero h1 {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 800; color: #fff;
    margin: 0 0 14px; line-height: 1.12; letter-spacing: -.5px;
}
.bl-hero-meta {
    display: flex; align-items: center; gap: 20px;
    flex-wrap: wrap; margin-bottom: 0;
}
.bl-hero-meta-item {
    display: flex; align-items: center; gap: 6px;
    color: rgba(255,255,255,.68); font-size: .88rem;
}
.bl-hero-meta-item svg { opacity: .7; flex-shrink: 0; }
.bl-hero-wave {
    display: block; width: 100%; height: 52px;
    margin-top: 36px;
}

/* ═══════════════════════════════════════════════════════════
   FILTER BAR
═══════════════════════════════════════════════════════════ */
.bl-filterbar {
    position: sticky; top: 72px; z-index: 800;
    background: #fff;
    border-bottom: 1px solid #e8e8e8;
    padding: 13px 0;
    box-shadow: 0 1px 0 rgba(0,0,0,.04);
}
.bl-filterbar-inner {
    display: flex; align-items: center; gap: 8px;
    overflow-x: auto; scrollbar-width: none;
}
.bl-filterbar-inner::-webkit-scrollbar { display: none; }
.bl-filter-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: .38rem .9rem; border-radius: 30px;
    border: 1.5px solid #ddd;
    background: #fff; color: #222;
    font-size: .8rem; font-weight: 500;
    cursor: pointer; white-space: nowrap;
    transition: all .18s;
    text-decoration: none; flex-shrink: 0;
}
.bl-filter-pill:hover { border-color: #888; color: #111; text-decoration: none; }
.bl-filter-pill.active {
    border-color: #111; background: #111; color: #fff; font-weight: 600;
}
.bl-filter-sep { width: 1px; height: 22px; background: #e0e0e0; flex-shrink: 0; margin: 0 3px; }
.bl-result-count {
    margin-left: auto; font-size: .8rem; color: #888;
    white-space: nowrap; flex-shrink: 0;
    font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════
   GRID
═══════════════════════════════════════════════════════════ */
.bl-grid-section { padding: 36px 0 72px; background: #fff; }
.bl-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 28px 16px;
}
@media (max-width: 1299px) { .bl-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1023px) { .bl-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px)  { .bl-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 10px; } }
@media (max-width: 479px)  { .bl-grid { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════
   CARD
═══════════════════════════════════════════════════════════ */
.bl-card {
    display: flex; flex-direction: column;
    text-decoration: none; color: inherit;
    cursor: pointer; border-radius: 16px;
    transition: transform .22s ease, box-shadow .22s ease;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    overflow: hidden;
}
.bl-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,.12);
    text-decoration: none; color: inherit;
}

/* ── Image slider ── */
.bl-img-wrap {
    position: relative;
    aspect-ratio: 4 / 3;
    background: #e8eef4;
    overflow: hidden;
    flex-shrink: 0;
}
.bl-img-track {
    display: flex;
    width: 100%; height: 100%;
    transition: transform .35s ease;
}
.bl-img-slide {
    min-width: 100%; height: 100%;
    flex-shrink: 0;
}
.bl-img-slide img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}

/* Arrow nav */
.bl-img-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 30px; height: 30px; border-radius: 50%;
    background: rgba(255,255,255,.92); border: none;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 4;
    opacity: 0; transition: opacity .2s;
    font-size: .75rem; color: #222;
}
.bl-img-arrow.prev { left: 10px; }
.bl-img-arrow.next { right: 10px; }
.bl-card:hover .bl-img-arrow { opacity: 1; }
.bl-img-arrow:hover { background: #fff; transform: translateY(-50%) scale(1.06); }

/* Image counter pill */
.bl-img-counter {
    position: absolute; bottom: 10px; right: 10px;
    background: rgba(0,0,0,.52); color: #fff;
    font-size: .68rem; font-weight: 600;
    padding: .18rem .55rem; border-radius: 20px;
    pointer-events: none; z-index: 3;
    backdrop-filter: blur(3px);
}

/* Top-left badge */
.bl-type-badge {
    position: absolute; top: 10px; left: 10px; z-index: 3;
    background: #fff;
    color: #222; font-size: .72rem; font-weight: 700;
    padding: 4px 10px; border-radius: 20px;
    letter-spacing: .2px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.18);
}

/* Heart */
.bl-heart {
    position: absolute; top: 10px; right: 10px; z-index: 5;
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(255,255,255,.88);
    border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.05rem; line-height: 1;
    transition: background .15s, transform .18s;
    box-shadow: 0 1px 4px rgba(0,0,0,.12);
}
.bl-heart:hover { background: #fff; transform: scale(1.14); }
.bl-heart.saved { color: #e31c5f; }

/* Dots */
.bl-dots {
    position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
    display: flex; gap: 4px; z-index: 3; pointer-events: none;
}
.bl-dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: rgba(255,255,255,.55);
    transition: background .2s, width .2s;
}
.bl-dot.active { background: #fff; width: 14px; border-radius: 3px; }

/* ── Card body ── */
.bl-card-body {
    padding: 16px 16px 18px;
    display: flex; flex-direction: column; flex: 1;
}

/* Title row */
.bl-title-row {
    display: flex; justify-content: space-between;
    align-items: flex-start; gap: 8px; margin-bottom: 4px;
}
.bl-title {
    font-size: .93rem; font-weight: 700; color: #1a1a1a;
    line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
    flex: 1; margin: 0;
}
.bl-rating {
    display: flex; align-items: center; gap: 3px;
    font-size: .8rem; font-weight: 700; color: #1a1a1a;
    flex-shrink: 0; margin-top: 1px;
}
.bl-rating svg { color: #222; }

/* Location */
.bl-location {
    font-size: .8rem; color: #717171; margin-bottom: 10px;
    display: flex; align-items: center; gap: 4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Feature tags */
.bl-tags {
    display: flex; flex-wrap: wrap; gap: 5px;
    margin-bottom: 12px;
}
.bl-tag {
    display: inline-flex; align-items: center; gap: 4px;
    background: #f4f6f9; color: #444;
    font-size: .71rem; font-weight: 600;
    padding: .2rem .55rem; border-radius: 6px;
    letter-spacing: .1px;
}

/* Divider */
.bl-card-divider { height: 1px; background: #f0f0f0; margin-bottom: 12px; }

/* Price row */
.bl-price-row {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    margin-bottom: 12px;
}
.bl-price {
    font-size: 1.05rem; font-weight: 800; color: #1a1a1a;
}
.bl-price-unit { font-size: .78rem; color: #717171; font-weight: 400; }
.bl-price-old {
    font-size: .8rem; color: #f20000;
    text-decoration: line-through;
}
.bl-discount-badge {
    font-size: .68rem; background: #fef2e8; color: #c0392b;
    font-weight: 800; padding: .18rem .48rem; border-radius: 6px;
    border: 1px solid #fdd9c6;
    margin-left: auto;
}

/* ═══════════════════════════════════════════════════════════
   EMPTY STATE
═══════════════════════════════════════════════════════════ */
.bl-empty {
    text-align: center; padding: 80px 20px;
    grid-column: 1 / -1;
}
.bl-empty-icon { font-size: 4rem; opacity: .25; margin-bottom: 18px; }
.bl-empty-title { font-size: 1.15rem; font-weight: 700; color: #444; margin-bottom: 6px; }
.bl-empty-sub   { font-size: .9rem; color: #888; }