:root {
    --brand: #e8611c;
    --brand-dark: #c74f13;
    --dark: #1f2937;
}

body { font-family: 'Segoe UI', Arial, sans-serif; color: #333; background: #f7f7f9; }

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

.top-bar { background: var(--dark); color: #ddd; }
.main-header { background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.06); z-index: 1000; }
.header-icon-link { color: var(--dark); text-align: center; }
.cart-badge { top: -6px; right: -10px; font-size: .65rem; }

.category-nav { background: var(--dark); }
.category-nav .nav-link { color: #eee; white-space: nowrap; font-size: .92rem; padding: .55rem .9rem; }
.category-nav .nav-link:hover { color: var(--brand); }

.hero-banner { background: linear-gradient(120deg, var(--brand), #f5a95c); border-radius: 12px; color: #fff; padding: 3rem 2rem; }

.product-card { background: #fff; border-radius: 10px; overflow: hidden; border: 1px solid #eee; transition: box-shadow .2s, transform .2s; height: 100%; }
.product-card:hover { box-shadow: 0 10px 24px rgba(0,0,0,.08); transform: translateY(-3px); }
.product-card .img-wrap { height: 190px; display: flex; align-items: center; justify-content: center; background: #fafafa; overflow: hidden; }
.product-card .img-wrap img { max-height: 100%; max-width: 100%; object-fit: cover; width:100%; height:100%; }
.product-card .price-old { text-decoration: line-through; color: #999; font-size: .85rem; }
.product-card .price-new { color: var(--brand); font-weight: 700; }
.badge-sale { position: absolute; top: 10px; left: 10px; background: var(--brand); color: #fff; font-size: .72rem; padding: .25rem .5rem; border-radius: 4px; }

.category-tile { border-radius: 10px; overflow: hidden; text-align: center; background: #fff; border: 1px solid #eee; padding: 1rem .5rem; text-decoration: none; color: var(--dark); display: block; }
.category-tile:hover { box-shadow: 0 8px 18px rgba(0,0,0,.07); }
.category-tile img { height: 60px; object-fit: contain; margin-bottom: .5rem; }

.site-footer { background: var(--dark); }
.site-footer a { color: #cfcfcf; text-decoration: none; }
.site-footer a:hover { color: var(--brand); }
.text-light-50 { color: #b8b8b8 !important; }

.whatsapp-float { position: fixed; bottom: 24px; right: 24px; background: #25D366; color: #fff; width: 55px; height: 55px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; box-shadow: 0 4px 10px rgba(0,0,0,.2); z-index: 999; }
.whatsapp-float:hover { color: #fff; transform: scale(1.05); }

.qty-input { width: 70px; }

.step-indicator .step { color: #aaa; }
.step-indicator .step.active { color: var(--brand); font-weight: 700; }

.admin-sidebar { min-height: 100vh; background: var(--dark); }
.admin-sidebar a { color: #cfd3d8; display: block; padding: .65rem 1.2rem; text-decoration: none; border-left: 3px solid transparent; }
.admin-sidebar a:hover, .admin-sidebar a.active { background: rgba(255,255,255,.06); color: #fff; border-left-color: var(--brand); }
.stat-card { border-radius: 10px; padding: 1.25rem; color: #fff; }