body { font-family: var(--font-sans); background-color: #fbf9f8; color: #1b1c1c; }
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--font-display); }

/* Kill Bootstrap's border-radius everywhere */
*, *::before, *::after { border-radius: 0 !important; }

:root {
    --color-primary: #000000;
    --color-secondary: #bb001f;
    --color-surface: #fbf9f8;
    --color-surface-low: #f5f3f3;
    --color-surface-high: #e9e8e7;
    --color-surface-highest: #e4e2e2;
    --color-outline: #747878;
    --color-outline-variant: #c4c7c7;
    --color-on-surface-variant: #444748;
    --color-tertiary-container: #1a1c1c;

    --font-sans: 'Geist', sans-serif;
    --font-mono: 'Geist Mono', monospace;
    --font-display: 'Bricolage Grotesque', sans-serif;
}

.brutalist-shadow { box-shadow: 4px 4px 0 0 #000; }
.brutalist-shadow-hover { transition: box-shadow .15s, transform .15s; }
.brutalist-shadow-hover:hover { box-shadow: 6px 6px 0 0 #000; transform: translate(-2px,-2px); }

.label-mono {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.state-grid { column-count: 2; }
@media (min-width: 768px) { .state-grid { column-count: 3; } }
@media (min-width: 1024px) { .state-grid { column-count: 5; } }

.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* Navbar */
.navbar { background-color: #fbf9f8; border-bottom: 1px solid var(--color-outline-variant); }
.navbar-brand { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; letter-spacing: -0.02em; color: #000 !important; text-transform: uppercase; }
.nav-link { color: var(--color-on-surface-variant) !important; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; }
.nav-link.active, .nav-link:hover { color: #000 !important; }
.nav-link.active { border-bottom: 2px solid #000; padding-bottom: 2px; }

/* Hero */
.hero { min-height: 870px; display: flex; align-items: center; overflow: hidden; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(to right, rgba(251,249,248,.9), rgba(251,249,248,.7)); z-index: 1; }
.hero-content { position: relative; z-index: 2; }

/* Shop card image */
.card-img-top { height: 192px; object-fit: cover; }
.card { border-color: var(--color-outline-variant) !important; }

/* Section tones */
.bg-surface-low { background-color: var(--color-surface-low); }
.bg-surface-high { background-color: var(--color-surface-high); }
.bg-tertiary { background-color: var(--color-tertiary-container); }

/* Pagination */
.page-link { color: #000; border-color: var(--color-outline-variant); font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; }
.link-underline { text-decoration: none; border-bottom: 1px solid rgb(var(--bs-dark-rgb)); color: rgb(var(--bs-dark-rgb)); padding-bottom: 0.25rem; }
.link-more { text-decoration: none; color: var(--bs-danger); display: inline-flex; align-items: center; gap: 0.25rem; }
.link-plain { text-decoration: none; color: rgb(var(--bs-dark-rgb)); }
.page-item.active .page-link { background-color: #000; border-color: #000; color: #fff; }
.page-link:hover { color: #000; }

/* Btn overrides */
.btn-dark { background-color: #000; border-color: #000; }
.btn-dark:hover { background-color: var(--color-secondary); border-color: var(--color-secondary); }
.btn-danger { background-color: var(--color-secondary); border-color: var(--color-secondary); }
.city-tabs .btn.active { background-color: #000; border-color: #000; color: #fff; }

/* Search section input group */
.hero-search { border: 1px solid #000; background: #fbf9f8; }
.hero-search .input-group-text { background: transparent; border: none; border-right: 1px solid var(--color-outline-variant); color: var(--color-outline); }
.hero-search .form-control { background: transparent; border: none; font-family: var(--font-sans); }
.hero-search .form-control:focus { box-shadow: none; }

/* Section max-width cap */
.section-inner { max-width: 1280px; margin-left: auto; margin-right: auto; }

/* Footer link colors */
footer a { color: rgba(131,132,132,.9); text-decoration: none; }
footer a:hover { color: var(--color-secondary); }

/* Form select */
.form-select { border-color: var(--color-outline-variant); background-color: transparent; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; }
.form-select:focus { box-shadow: none; border-color: #000; }

/* ── Typography classes ── */
.section-title    { font-size: 32px; font-weight: 700; text-transform: uppercase; }
.display-title    { font-size: clamp(40px, 6vw, 64px); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
.display-title-sm { font-size: clamp(32px, 5vw, 64px); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
.body-lg          { font-size: 18px; line-height: 1.6; }
.meta-text        { font-size: 12px; color: var(--color-on-surface-variant); }
.micro-text       { font-size: 10px; color: var(--color-on-surface-variant); }
.tag-chip         { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-on-surface-variant); border-color: var(--color-outline-variant) !important; }
.text-on-surface  { color: var(--color-on-surface-variant); }
.text-on-dark     { color: #858383; }
.text-outline     { color: var(--color-outline); }

/* ── Icon size helpers ── */
.icon-rating { font-size: 13px; }
.icon-sm     { font-size: 11px; }
.icon-box    { width: 64px; height: 64px; }

/* ── Size caps ── */
.content-cap { max-width: 672px; }
.search-cap  { max-width: 560px; }

/* ── Card button variants ── */
.btn-card     { font-size: 10px; flex: 1 1 auto; padding-top: .5rem; padding-bottom: .5rem; }
.btn-map      { font-size: 10px; border-color: var(--color-outline-variant) !important; flex: 1 1 auto; padding-top: .5rem; padding-bottom: .5rem; }

/* ── Footer text tones ── */
.footer-heading { font-family: var(--font-display); font-size: 1.1rem; color: #838484; }
.footer-text    { color: rgba(131,132,132,.7); font-size: 15px; }
.footer-label   { color: rgba(131,132,132,.5); }
.footer-copy    { color: rgba(131,132,132,.4); }

.top-section { margin-top: 53px !important }

.tom-select {
    padding: 0px;
}

.tom-select .ts-control {
    padding: 16px 12px 16px 8px;
}

@media (max-width: 768px) {
    .hero-overlay {
        background: rgba(251,249,248,.7);
    }
}