/* THEME: BANGRO Dark — bold, high-contrast marketplace feel */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
    --bg: #0E1015;
    --text: #F3F5F8;
    --muted: #8A93A6;
    --border: #262B34;
    --card-bg: #171A21;
    --header-bg: rgba(14, 16, 21, 0.88);
    --img-bg: #1D2028;

    --accent: #FF7A3D;
    --accent-hover: #FF9159;
    --accent-contrast: #15110C;
    --accent-glow: rgba(255, 122, 61, 0.22);

    --skeleton-a: #1B1E26;
    --skeleton-b: #262A34;

    --radius: 16px;
    --radius-sm: 10px;
    --radius-lg: 999px;

    --font-display: 'Space Grotesk', 'Inter', sans-serif;
    --font-body: 'Inter', -apple-system, sans-serif;
    --brand-weight: 800;
    --brand-tracking: -0.03em;

    --card-hover-shadow: 0 14px 32px rgba(255, 122, 61, 0.14);
    --btn-hover-shadow: 0 8px 20px rgba(255, 122, 61, 0.35);
}

.hero {
    background: radial-gradient(60% 100% at 50% 0%, rgba(255, 122, 61, 0.10) 0%, transparent 70%);
}

/* Signature: price-tag notch on the "Check Price" button */
.btn-check {
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
    padding-right: 26px;
}

@media (max-width: 460px) {
    .btn-check {
        clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
        padding-right: 18px;
    }
}

.card {
    box-shadow: 0 1px 0 rgba(255,255,255,0.02) inset;
}