/* Typography */
:root {
    --brand-accent: #e03131; /* red */
}

body {
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji';
    background: #0f0f10;
}

.fw-extrabold { font-weight: 800; }

.hero-section {
    background: radial-gradient(1200px 600px at 10% 0%, rgba(248, 192, 69, 0.08), transparent),
                radial-gradient(1200px 600px at 100% 10%, rgba(248, 192, 69, 0.05), transparent);
}

.hero-media img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.card-product {
    background: #101113;
    border: 1px solid rgba(255,255,255,0.08);
    transition: transform .2s ease, box-shadow .2s ease;
}

.card-product:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.6);
}

.badge-category {
    background: rgba(248, 192, 69, 0.12);
    color: var(--brand-accent);
    border: 1px solid rgba(224, 49, 49, 0.25);
}

.price-tag {
    color: var(--brand-accent);
}

.text-warning { color: var(--brand-accent) !important; }
.btn-outline-warning { border-color: var(--brand-accent); color: var(--brand-accent); }
.btn-outline-warning:hover { background-color: var(--brand-accent); color: #fff; }

.btn-warning, .btn-danger {
    background-color: var(--brand-accent);
    border-color: var(--brand-accent);
    color: #fff;
}

.btn-warning:hover, .btn-danger:hover {
    filter: brightness(1.05);
}

.offcanvas.text-bg-dark {
    background: #0f0f10 !important;
}

.toast { background: #111; color: #ddd; border-color: #333; }
.toast-header { background: #0f0f10; color: #aaa; border-bottom-color: #333; }

.product-img {
    height: 180px;
    object-fit: cover;
}

@media (min-width: 768px) {
    .product-img { height: 220px; }
}

/* Landing page styles */
.landing-hero { min-height: 80vh; display: grid; place-items: center; background: #0f0f10; position: relative; }
.landing-logo { width: 120px; height: 120px; object-fit: cover; border-radius: 16px; box-shadow: 0 10px 30px rgba(224, 49, 49, .3); }
.py-7 { padding-top: 6rem; padding-bottom: 6rem; }

.hero-bg-images .bg-img { position: absolute; opacity: .12; filter: grayscale(100%); transition: transform 10s ease; }
.hero-bg-images .i1 { bottom: -40px; left: -40px; width: 420px; transform: rotate(-6deg) scale(1.05); }
.hero-bg-images .i2 { top: 10%; right: -60px; width: 480px; transform: rotate(8deg) scale(1.05); }
.hero-bg-images .i3 { bottom: 10%; right: 20%; width: 360px; transform: rotate(-3deg) scale(1.05); }
.landing-hero:hover .bg-img { transform: rotate(0deg) scale(1.1); opacity: .18; }

/* animated blobs */
.bg-anim .blob { position: absolute; width: 360px; height: 360px; background: radial-gradient(circle at 30% 30%, rgba(224,49,49,.55), rgba(224,49,49,0)); filter: blur(24px); animation: float 12s ease-in-out infinite; }
.bg-anim .b1 { top: -60px; left: -40px; }
.bg-anim .b2 { right: -80px; top: 10%; animation-delay: -4s; }
.bg-anim .b3 { right: 10%; bottom: -80px; animation-delay: -8s; }
@keyframes float { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-20px);} }