/* ==========================================================================
   Gireft Design System v2 — "Crisp Slate"
   Modern, clean marketplace theme. Loaded AFTER style.css, so the :root
   token overrides below re-skin every g-* component automatically.

   Palette:  slate ink #101828 · surface #ffffff · canvas #f7f8fa
             accent orange #ea580c · verified emerald #059669
             info blue #0284c7 · star amber #f59e0b
   Type:     Inter (UI/body) + Space Grotesk (display/prices) — local woff2.
   ========================================================================== */

/* Fonts -------------------------------------------------------------------- */
@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter-var-latin.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Space Grotesk';
    src: url('../fonts/space-grotesk-var-latin.woff2') format('woff2');
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
}

/* Tokens ------------------------------------------------------------------- */
:root {
    /* Base tokens consumed by style.css (admin/generated pages) */
    --brand: #ea580c;
    --brand-hover: #c2410c;
    --brand-dark: #101828;
    --brand-light: #fff1e7;
    --accent: #059669;
    --danger: #dc2626;
    --bg: #f7f8fa;
    --surface: #ffffff;
    --text: #101828;
    --muted: #667085;
    --border-color: #e7eaf0;

    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 16px;

    --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
    --shadow: 0 4px 12px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .05);
    --shadow-lg: 0 16px 40px rgba(16, 24, 40, .12);

    /* Gireft marketplace tokens */
    --g-bg: #f7f8fa;
    --g-surface: #ffffff;
    --g-ink: #101828;
    --g-muted: #667085;
    --g-terracotta: #ea580c;
    --g-terracotta-hover: #c2410c;
    --g-terracotta-soft: #fff1e7;
    --g-verified: #059669;
    --g-verified-soft: #e8f8f1;
    --g-river: #0284c7;
    --g-river-soft: #eaf5fd;
    --g-sand: #fde68a;
    --g-chip-bg: #f2f4f7;
    --g-chip-active: #101828;
    --g-star: #f59e0b;
    --g-line: #e7eaf0;
    --g-radius: 12px;
    --g-radius-sm: 8px;
    --g-shadow: 0 4px 12px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .05);
    --g-shadow-card: 0 16px 40px rgba(16, 24, 40, .12);

    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-heading: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
}

/* Base --------------------------------------------------------------------- */
html {
    background: var(--g-bg);
}

body {
    background: var(--g-bg);
    color: var(--g-ink);
    font-family: var(--font-body);
    font-size: 15px;
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.g-price,
.g-stat-card__value {
    font-family: var(--font-heading);
    letter-spacing: -.01em;
}

.g-price-kicker {
    color: var(--g-terracotta);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

::selection {
    background: #ffd8bd;
    color: var(--g-ink);
}

a {
    color: var(--g-terracotta);
}

a:hover {
    color: var(--g-terracotta-hover);
}

/* Shell -------------------------------------------------------------------- */
.navbar {
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
    background: rgba(255, 255, 255, .85);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border: 1px solid var(--g-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    /* backdrop-filter creates a stacking context; without an explicit z-index
       the navbar sits below the sticky search header (z-index:100), which then
       paints over the open account dropdown. Lift it above that header. */
    position: relative;
    z-index: 1030;
}

.g-brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
}

.nav-logo {
    width: auto;
    height: 40px;
    max-height: 40px;
    object-fit: contain;
}

.navbar-nav .nav-link {
    color: var(--g-muted);
    font-weight: 600;
    font-size: .9rem;
}

.navbar-nav .nav-link:hover {
    background: var(--g-chip-bg);
    color: var(--g-ink);
}

.navbar-nav .nav-link.active {
    background: var(--g-ink);
    color: #fff;
}

/* Scope to the toggle pill only. Using `.btn` also matched the Login button
   inside the dropdown, whose white background (!important) plus .button1's
   white text (!important) rendered it invisible. */
#user_logged_in .dropdown-toggle {
    background: var(--g-surface) !important;
    border: 1px solid var(--g-line) !important;
    color: var(--g-ink);
    font-weight: 600;
    font-size: .88rem;
    box-shadow: var(--shadow-sm);
}

#user_logged_in .dropdown-toggle:hover {
    border-color: #d3d9e3 !important;
    background: var(--g-chip-bg) !important;
}

.footer {
    background: var(--g-ink);
    color: rgba(255, 255, 255, .64);
    margin-top: 0;
}

.g-footer-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.g-footer-logo {
    width: 104px;
    filter: brightness(0) invert(1);
    opacity: .9;
}

.footer p {
    margin: 0;
    color: rgba(255, 255, 255, .64);
    font-size: .85rem;
}

/* Page rhythm --------------------------------------------------------------- */
.g-page {
    background: var(--g-bg);
    min-height: 100vh;
}

.g-home-header,
.g-directory-header {
    background: rgba(247, 248, 250, .88) !important;
    border-bottom: 1px solid var(--g-line) !important;
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
}

.g-product-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    align-items: center;
    padding: 2rem 0 1rem;
}

.g-product-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--g-terracotta);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: .6rem;
}

.g-product-hero h1 {
    color: var(--g-ink);
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -.03em;
    margin: 0;
}

.g-product-hero p {
    color: var(--g-muted);
    max-width: 620px;
    margin: .8rem 0 0;
    font-size: 1.02rem;
    line-height: 1.6;
}

.g-hero-metrics {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    margin-top: 1.1rem;
}

.g-hero-metric {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 36px;
    padding: .35rem .8rem;
    border: 1px solid var(--g-line);
    background: var(--g-surface);
    border-radius: 999px;
    color: var(--g-ink);
    font-size: .8rem;
    font-weight: 500;
    box-shadow: var(--shadow-sm);
}

.g-hero-metric i {
    color: var(--g-verified);
}

/* Hero art — real site photography in a clean framed card */
.g-product-hero__art {
    display: none;
    color: transparent;
    overflow: hidden;
}

.g-surface-panel {
    background: var(--g-surface);
    border: 1px solid var(--g-line);
    border-radius: var(--g-radius);
    box-shadow: var(--shadow-sm);
}

/* Controls ------------------------------------------------------------------ */
.g-search-bar {
    display: flex;
    align-items: stretch;
    border: 1.5px solid var(--g-line);
    background: var(--g-surface);
    border-radius: 999px;
    box-shadow: var(--shadow);
    overflow: hidden;
    position: relative;
    transition: border-color .15s, box-shadow .15s;
}

.g-search-bar:focus-within {
    border-color: var(--g-terracotta);
    box-shadow: 0 0 0 4px rgba(234, 88, 12, .12);
}

.g-search-bar input {
    flex: 1 1 0%;
    min-width: 0;
    min-height: 48px;
    padding: .7rem 1.1rem;
    border: none;
    background: transparent;
    font-weight: 500;
    font-size: .9rem;
    color: var(--g-ink);
    outline: none;
}

.g-search-bar input::placeholder {
    color: #98a2b3;
    font-weight: 400;
}

.g-search-bar button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    border: none;
    background: var(--g-terracotta);
    color: #fff !important;
    padding: 0 1.3rem;
    font-weight: 600;
    font-size: .85rem;
    cursor: pointer;
    flex-shrink: 0;
    margin: 0;
    border-radius: 0 999px 999px 0;
    box-shadow: none;
    transition: background .15s;
}

.button1,
.submit-btn,
.create-btn {
    background: var(--g-terracotta);
    color: #fff !important;
    font-weight: 600;
    box-shadow: none;
    transition: background .15s;
}

.g-search-bar button:hover,
.button1:hover,
.submit-btn:hover,
.create-btn:hover {
    background: var(--g-terracotta-hover);
    color: #fff !important;
}

.form-control,
.form-select {
    border-color: var(--g-line);
    border-radius: var(--g-radius-sm);
    color: var(--g-ink);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--g-terracotta);
    box-shadow: 0 0 0 4px rgba(234, 88, 12, .12);
}

.g-area-select {
    min-height: 38px;
    border: 1px solid var(--g-line);
    background: var(--g-surface);
    border-radius: 999px;
    box-shadow: var(--shadow-sm);
}

.g-area-select i {
    color: var(--g-terracotta) !important;
}

.g-chip {
    min-height: 36px;
    background: var(--g-surface);
    border: 1px solid var(--g-line);
    color: var(--g-ink);
    font-weight: 600;
    font-size: .82rem;
    box-shadow: var(--shadow-sm);
    transition: border-color .15s, background .15s, color .15s;
}

.g-chip:hover {
    border-color: #d3d9e3;
    background: var(--g-chip-bg);
}

.g-chip.active,
.g-chip--active {
    background: var(--g-ink);
    border-color: var(--g-ink);
    color: #fff;
}

.g-material-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex: 0 0 18px;
}

.g-material-icon--all { background-image: url("../brand/gireft-mark.svg?v=5"); }
.g-material-icon--river-sand { background-image: url("../brand/material-river-sand.svg?v=5"); }
.g-material-icon--cement { background-image: url("../brand/material-cement.svg?v=5"); }
.g-material-icon--bulk-water { background-image: url("../brand/material-bulk-water.svg?v=5"); }
.g-material-icon--quarry-dust { background-image: url("../brand/material-quarry-dust.svg?v=5"); }
.g-material-icon--crushed-stone-gravel { background-image: url("../brand/material-gravel.svg?v=5"); }
.g-material-icon--bricks-blocks { background-image: url("../brand/material-bricks.svg?v=5"); }

/* Marketplace cards ---------------------------------------------------------- */
.g-section-heading {
    color: var(--g-muted);
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.g-section-heading i {
    color: var(--g-terracotta);
}

.g-listing-card,
.g-review-card,
.g-write-review,
.g-stat-card,
.record-list-item,
.category-card,
.modal-content {
    border-radius: var(--g-radius);
}

.g-listing-card {
    background: var(--g-surface);
    border: 1px solid var(--g-line);
    box-shadow: var(--shadow-sm);
    transition: box-shadow .18s, transform .18s, border-color .18s;
    overflow: hidden;
}

.g-listing-card:hover {
    border-color: #d3d9e3;
    box-shadow: var(--g-shadow-card);
    transform: translateY(-2px);
}

/* Photo placeholders — use real material photography instead of icon tiles */
.g-listing-card__photo,
.g-listing-card__photo-placeholder {
    background: linear-gradient(135deg, #eef1f5, #f7f8fa);
    max-height: 300px;
}

.g-listing-card__photo-placeholder,
.g-listing-row__thumb,
.g-my-listing-row__thumb {
    color: transparent;
    background-size: cover;
    background-position: center;
}

/* Slugs come from product names — one line per seeded product. */
.g-listing-card__photo-placeholder:has(.g-material-badge-icon--river-sand),
.g-listing-row__thumb:has(.g-material-badge-icon--river-sand),
.g-listing-card__photo-placeholder:has(.g-material-badge-icon--pit-sand),
.g-listing-row__thumb:has(.g-material-badge-icon--pit-sand) { background-image: url("../img/stock/mat-river-sand.jpg"); }
.g-listing-card__photo-placeholder:has(.g-material-badge-icon--cement),
.g-listing-row__thumb:has(.g-material-badge-icon--cement),
.g-listing-card__photo-placeholder:has(.g-material-badge-icon--opc-42-5-cement),
.g-listing-row__thumb:has(.g-material-badge-icon--opc-42-5-cement) { background-image: url("../img/stock/mat-cement.jpg"); }
.g-listing-card__photo-placeholder:has(.g-material-badge-icon--bulk-water),
.g-listing-row__thumb:has(.g-material-badge-icon--bulk-water) { background-image: url("../img/stock/mat-bulk-water.jpg"); }
.g-listing-card__photo-placeholder:has(.g-material-badge-icon--quarry-dust),
.g-listing-row__thumb:has(.g-material-badge-icon--quarry-dust) { background-image: url("../img/stock/mat-quarry-dust.jpg"); }
.g-listing-card__photo-placeholder:has(.g-material-badge-icon--crushed-stone-gravel),
.g-listing-row__thumb:has(.g-material-badge-icon--crushed-stone-gravel),
.g-listing-card__photo-placeholder:has(.g-material-badge-icon--ballast-crushed-stone),
.g-listing-row__thumb:has(.g-material-badge-icon--ballast-crushed-stone),
.g-listing-card__photo-placeholder:has(.g-material-badge-icon--hardcore),
.g-listing-row__thumb:has(.g-material-badge-icon--hardcore) { background-image: url("../img/stock/mat-gravel.jpg"); }
.g-listing-card__photo-placeholder:has(.g-material-badge-icon--bricks-blocks),
.g-listing-row__thumb:has(.g-material-badge-icon--bricks-blocks),
.g-listing-card__photo-placeholder:has(.g-material-badge-icon--machine-cut-blocks),
.g-listing-row__thumb:has(.g-material-badge-icon--machine-cut-blocks),
.g-listing-card__photo-placeholder:has(.g-material-badge-icon--clay-bricks),
.g-listing-row__thumb:has(.g-material-badge-icon--clay-bricks) { background-image: url("../img/stock/mat-bricks.jpg"); }

/* Hide the icon tile whenever a photo background took its place */
.g-listing-card__photo-placeholder:has(.g-material-badge-icon) .g-material-badge-icon,
.g-listing-row__thumb:has(.g-material-badge-icon) .g-material-badge-icon {
    opacity: 0;
}

.g-material-badge-icon {
    display: inline-flex;
    width: 52px;
    height: 52px;
    background: url("../brand/material-river-sand.svg?v=5") center / contain no-repeat;
}

.g-material-badge-icon--river-sand,
.g-material-badge-icon--pit-sand { background-image: url("../brand/material-river-sand.svg?v=5"); }
.g-material-badge-icon--cement,
.g-material-badge-icon--opc-42-5-cement { background-image: url("../brand/material-cement.svg?v=5"); }
.g-material-badge-icon--bulk-water { background-image: url("../brand/material-bulk-water.svg?v=5"); }
.g-material-badge-icon--quarry-dust { background-image: url("../brand/material-quarry-dust.svg?v=5"); }
.g-material-badge-icon--crushed-stone-gravel,
.g-material-badge-icon--ballast-crushed-stone,
.g-material-badge-icon--hardcore { background-image: url("../brand/material-gravel.svg?v=5"); }
.g-material-badge-icon--bricks-blocks,
.g-material-badge-icon--machine-cut-blocks,
.g-material-badge-icon--clay-bricks { background-image: url("../brand/material-bricks.svg?v=5"); }

.g-listing-row {
    min-height: 76px;
}

.g-listing-row.featured {
    background: linear-gradient(90deg, #fff7f0, var(--g-surface));
    border: 1px solid #fed7aa;
}

.g-listing-row__thumb,
.g-my-listing-row__thumb {
    background-color: #eef1f5;
}

.g-featured-badge {
    background: var(--g-ink);
    color: #fff;
    letter-spacing: .06em;
}

.g-featured-badge i {
    color: var(--g-star);
}

.g-verified-badge {
    color: var(--g-verified);
    font-weight: 600;
}

.g-btn-call {
    border: 1px solid var(--g-line);
    background: var(--g-surface);
    color: var(--g-ink);
    font-weight: 600;
}

.g-btn-call:hover {
    border-color: #d3d9e3;
    background: var(--g-chip-bg);
    color: var(--g-ink);
}

.g-btn-wa,
.g-btn--green {
    background: var(--g-verified);
    color: #fff;
}

.g-btn-wa:hover,
.g-btn--green:hover {
    background: #047857;
    color: #fff;
}

.g-empty-state {
    color: var(--g-muted);
}

.g-empty-state i {
    color: #cfd6e0;
}

.g-skeleton {
    background: linear-gradient(90deg, #eef1f5 0%, #f8fafc 48%, #eef1f5 100%);
    background-size: 220% 100%;
    animation: g-shimmer 1.5s infinite linear;
}

@keyframes g-shimmer {
    to { background-position: -220% 0; }
}

/* Supplier profile ------------------------------------------------------------ */
.g-supplier-hero {
    border: 1px solid var(--g-line);
    background: var(--g-surface);
    box-shadow: var(--shadow-sm);
}

.g-supplier-hero__logo {
    border-radius: var(--g-radius);
    background: url("../brand/gireft-mark.svg?v=5") center / cover no-repeat;
    border-color: var(--g-line);
}

.g-supplier-hero__name {
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: -.02em;
}

.g-contact-bar {
    box-shadow: var(--g-shadow);
    border: 1px solid var(--g-line);
    background: var(--g-surface);
}

/* Auth ------------------------------------------------------------------------ */
.account-body {
    background:
        linear-gradient(160deg, rgba(16, 24, 40, .93), rgba(16, 24, 40, .78)),
        url("../img/stock/hero-quarry.jpg") center / cover no-repeat fixed;
}

.account-logo {
    max-width: 230px;
    background: transparent;
    box-shadow: none;
    padding: 0;
}

.az-card-signin {
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .98);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.az-signin-header h2 {
    color: var(--g-ink);
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: -.02em;
}

/* Generated/admin pages -------------------------------------------------------- */
.hero-section {
    background:
        linear-gradient(150deg, rgba(16, 24, 40, .92), rgba(16, 24, 40, .72)),
        url("../img/stock/site-supply.jpg") center / cover no-repeat;
    border-radius: var(--g-radius);
}

thead {
    background: var(--g-ink);
}

.table-button {
    border-color: var(--g-line) !important;
    color: var(--g-ink);
}

.table-button:hover {
    background: var(--g-terracotta);
    border-color: var(--g-terracotta) !important;
}

/* Legacy compatibility ----------------------------------------------------------
   Old generated pages use these hardcoded hooks; map them onto v2 tokens. */
.bg-nav,
.az-header {
    background: var(--g-ink) !important;
    border-color: var(--g-terracotta) !important;
}

.az-footer {
    background: var(--g-ink) !important;
    border-color: var(--g-verified) !important;
}

.text-green,
.color-sdagreen {
    color: var(--g-verified) !important;
}

.text-yellow,
.color-sdagold,
.acc-alt-link {
    color: var(--g-star) !important;
}

.bg-green,
.light-mode {
    background: var(--g-surface) !important;
    color: var(--g-ink) !important;
}

.bg-sdagold,
.bg-4 {
    background: var(--g-sand) !important;
}

.dark-mode {
    background: var(--g-ink) !important;
    color: #fff !important;
}

.acc-btn {
    background: var(--g-terracotta) !important;
    color: #fff !important;
}

.acc-btn:hover {
    background: var(--g-terracotta-hover) !important;
    color: #fff !important;
}

.s-item.active {
    color: var(--g-star) !important;
}

.color-1 { color: var(--g-terracotta) !important; }
.color-2 { color: var(--g-verified) !important; }
.color-3 { color: var(--g-river) !important; }
.color-4 { color: var(--g-star) !important; }
.color-5 { color: var(--g-ink) !important; }

.border-1 { border-color: var(--g-terracotta) !important; }
.border-2 { border-color: var(--g-verified) !important; }
.border-3 { border-color: var(--g-river) !important; }
.border-4 { border-color: var(--g-sand) !important; }
.border-5 { border-color: var(--g-ink) !important; }

.bg-1 { background: var(--g-terracotta) !important; }
.bg-2 { background: var(--g-verified) !important; }
.bg-3 { background: var(--g-river) !important; }
.bg-5 { background: var(--g-ink) !important; }

.g-status-pill--pending {
    background: #fef3c7;
    color: #92400e;
}

.g-status-pill--suspended {
    background: #fee2e2;
    color: #991b1b;
}

.g-action-card--amber {
    border-color: var(--g-star);
}

.g-action-card__btn--amber,
.g-alert-banner--amber {
    background: var(--g-star);
}

.g-action-card__btn--amber:hover {
    background: #d97706;
}

/* Responsive ---------------------------------------------------------------- */
@media (min-width: 768px) {
    .g-product-hero {
        grid-template-columns: minmax(0, 1fr) 380px;
    }

    .g-product-hero h1 {
        font-size: 3rem;
    }

    .g-product-hero__art {
        display: block;
        min-height: 300px;
        border-radius: var(--radius-lg);
        border: 1px solid var(--g-line);
        background:
            linear-gradient(200deg, rgba(16, 24, 40, 0) 55%, rgba(16, 24, 40, .38)),
            url("../img/stock/hero-quarry.jpg") center / cover no-repeat;
        box-shadow: var(--g-shadow-card);
    }
}

@media (max-width: 767.98px) {
    .g-product-hero {
        padding: 1.25rem 0 0.5rem;
    }
    .g-product-hero h1 {
        font-size: 1.65rem;
        line-height: 1.2;
    }
    .g-product-hero p {
        font-size: 0.92rem;
        line-height: 1.5;
    }
}

/* --- Material chip bar enhancements --------------------------------- */
.g-chips-bar {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    padding: .35rem 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
    width: 100%;
}

.g-chips-bar::-webkit-scrollbar {
    display: none;
}

.g-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem .9rem;
    border-radius: 999px;
    border: 1.5px solid var(--g-line);
    background: var(--g-surface);
    color: var(--g-ink);
    font-size: .82rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    flex-shrink: 0;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
    text-decoration: none;
}

.g-chip:hover {
    background: var(--g-line);
    color: var(--g-ink);
}

.g-chip.active, .g-chip--active {
    background: var(--g-chip-active);
    color: #fff !important;
    border-color: var(--g-chip-active);
}

.g-chip--location {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .85rem;
    border-radius: 999px;
    border: 1.5px solid var(--g-line);
    background: var(--g-surface);
    color: var(--g-ink);
    font-size: .82rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    flex-shrink: 0;
}

.g-chip--location select {
    border: none;
    background: transparent;
    color: var(--g-ink);
    font-weight: 600;
    font-size: .82rem;
    cursor: pointer;
    outline: none;
    padding: 0;
    max-width: 135px;
}

.g-chip--location.has-area {
    border-color: var(--g-terracotta);
    background: rgba(234, 88, 12, .06);
    color: var(--g-terracotta);
}

@media (max-width: 575.98px) {
    .navbar {
        margin-top: .4rem !important;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    .nav-logo {
        height: 34px;
    }

    .g-search-bar {
        border-radius: 999px !important;
        overflow: hidden !important;
    }

    .g-search-bar input {
        min-height: 44px;
        padding: .55rem .75rem .55rem 1rem;
        font-size: .88rem;
    }

    .g-search-bar button {
        padding: 0 1.05rem;
        font-size: .82rem;
        border-radius: 0 999px 999px 0 !important;
    }

    .g-chips-bar {
        gap: .4rem;
        padding: .25rem 0 .4rem;
    }

    .g-chip {
        padding: .35rem .75rem;
        font-size: .78rem;
    }

    .g-chip--location {
        padding: .35rem .75rem;
        font-size: .78rem;
    }

    .g-chip--location select {
        font-size: .78rem;
        max-width: 110px;
    }

    .g-product-hero {
        padding: 0.85rem 0 0.25rem;
        gap: 0.5rem;
    }

    .g-product-hero__eyebrow {
        font-size: 0.68rem;
        letter-spacing: 0.1em;
        margin-bottom: 0.25rem;
    }

    .g-product-hero h1 {
        font-size: 1.35rem;
        line-height: 1.22;
        letter-spacing: -0.02em;
        margin-bottom: 0.35rem;
    }

    .g-product-hero p {
        font-size: 0.84rem;
        line-height: 1.45;
        margin: 0.25rem 0 0;
        color: var(--g-muted);
    }

    .g-hero-metrics {
        display: flex;
        flex-wrap: wrap;
        gap: 0.35rem;
        margin-top: 0.65rem;
    }

    .g-hero-metric {
        min-height: 28px;
        padding: 0.2rem 0.55rem;
        font-size: 0.72rem;
        border-radius: 999px;
        background: #f8fafc;
        border: 1px solid var(--g-line);
        color: var(--g-ink);
        box-shadow: none;
        gap: 0.35rem;
    }

    .g-hero-actions {
        display: flex;
        gap: 0.5rem;
        margin-top: 0.75rem !important;
        width: 100%;
    }

    .g-hero-actions .g-btn {
        flex: 1 1 0%;
        justify-content: center;
        text-align: center;
        padding: 0.45rem 0.5rem;
        font-size: 0.78rem;
        white-space: nowrap;
    }
}

/* ==========================================================================
   Autocomplete suggestions dropdown
   ========================================================================== */
.g-autocomplete-wrapper {
    position: relative;
    width: 100%;
}

.g-search-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050;
    background: var(--g-surface);
    border: 1px solid var(--g-line);
    border-radius: var(--g-radius);
    box-shadow: var(--g-shadow-card);
    margin-top: 0.4rem;
    max-height: 380px;
    overflow-y: auto;
    display: none;
    animation: gFadeIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.g-search-suggestions__section {
    padding: 0.4rem 0;
}

.g-search-suggestions__section:not(:last-child) {
    border-bottom: 1px solid var(--g-line);
}

.g-search-suggestions__title {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--g-muted);
    padding: 0.3rem 1rem;
}

.g-search-suggestions__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    color: var(--g-ink);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    font-size: 0.88rem;
    font-weight: 500;
}

.g-search-suggestions__item:hover,
.g-search-suggestions__item.active {
    background: var(--g-chip-bg);
    color: var(--g-ink);
    text-decoration: none;
}

.g-search-suggestions__icon {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--g-radius-sm);
    background: var(--g-chip-bg);
    color: var(--g-muted);
    font-size: 0.8rem;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}

.g-search-suggestions__item:hover .g-search-suggestions__icon,
.g-search-suggestions__item.active .g-search-suggestions__icon {
    background: var(--g-terracotta);
    color: #fff;
}

@keyframes gFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   Toast notifications
   ========================================================================== */
#toast-container {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 2050;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    pointer-events: none;
}

.toast {
    pointer-events: auto;
    min-width: 290px;
    max-width: 390px;
    background: var(--g-ink);
    border: 1px solid rgba(255, 255, 255, .08);
    color: #fff;
    border-radius: var(--g-radius);
    padding: 0.85rem 1.25rem;
    box-shadow: var(--g-shadow-card);
    font-size: 0.88rem;
    font-family: var(--font-body);
    font-weight: 500;
    opacity: 0;
    transform: translateY(1.2rem) scale(0.96);
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: none;
}

.toast.show {
    display: flex;
    opacity: 1;
    transform: translateY(0) scale(1);
}

@media (max-width: 575.98px) {
    #toast-container {
        left: 1rem;
        right: 1rem;
        bottom: 1.5rem;
        align-items: center;
    }

    .toast {
        width: 100%;
        min-width: 0;
    }
}

.g-card-signin-wide {
    max-width: 720px !important;
}

/* ==========================================================================
   Registration wizard
   ========================================================================== */
.g-wizard-steps {
    display: flex;
    justify-content: center;
    gap: .4rem;
    list-style: none;
    padding: 0;
    margin: 0 0 .5rem;
    flex-wrap: wrap;
}

.g-wizard-steps li {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .3rem .8rem;
    border: 1px solid var(--g-line);
    border-radius: 999px;
    background: var(--g-surface);
    color: var(--g-muted);
    font-size: .78rem;
    font-weight: 600;
}

.g-wizard-steps li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--g-chip-bg);
    color: var(--g-muted);
    font-size: .7rem;
    font-weight: 700;
}

.g-wizard-steps li.active {
    border-color: var(--g-terracotta);
    color: var(--g-ink);
}

.g-wizard-steps li.active span {
    background: var(--g-terracotta);
    color: #fff;
}

.g-wizard-steps li.done {
    border-color: var(--g-verified);
    color: var(--g-verified);
}

.g-wizard-steps li.done span {
    background: var(--g-verified);
    color: #fff;
}

.g-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: .5rem;
}

.g-product-check {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .55rem .8rem;
    border: 1px solid var(--g-line);
    border-radius: var(--g-radius-sm);
    background: var(--g-surface);
    cursor: pointer;
    font-size: .86rem;
    font-weight: 500;
    margin: 0;
    transition: border-color .15s, background .15s;
}

.g-product-check:hover {
    border-color: #d3d9e3;
    background: var(--g-chip-bg);
}

.g-product-check:has(input:checked) {
    border-color: var(--g-terracotta);
    background: var(--g-terracotta-soft);
}

.g-product-check input {
    accent-color: var(--g-terracotta);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}