/* ── Font Awesome ────────────────────────────────────── */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css');

/* ── Scrollbar ───────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.dark ::-webkit-scrollbar-thumb { background: #4b5563; }
.dark ::-webkit-scrollbar-thumb:hover { background: #6b7280; }

/* ── No-scrollbar utility ────────────────────────────── */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ── Material icon alignment ─────────────────────────── */
.material-icons-outlined, .material-symbols-outlined {
    vertical-align: middle;
}

/* ── Pulse-orange live indicator dot ─────────────────── */
@keyframes pulse-ring {
    0% { transform: scale(0.8); opacity: 1; }
    70% { transform: scale(1.5); opacity: 0; }
    100% { transform: scale(0.8); opacity: 0; }
}
.pulse-orange {
    display: inline-block;
    width: 8px; height: 8px;
    background: #E07348;
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
}
.pulse-orange::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: #E07348;
    animation: pulse-ring 1.5s ease-out infinite;
}

/* ── Hero gradient ───────────────────────────────────── */
.hero-gradient {
    background: linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.35)),
        url('https://images.unsplash.com/photo-1526047932273-341f2a7631f9?q=80&w=2080&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
}

/* ── Promo banner (category page) ────────────────────── */
.promo-banner {
    background-image: linear-gradient(to right, rgba(0,0,0,0.8), rgba(0,0,0,0.2)),
        url('https://lh3.googleusercontent.com/aida-public/AB6AXuA_lRgZnc9VXKhaRTWAR2DLXsuJiHsPzoYkthj0pL7HuoZ2ZXH3iPnwhkSLGXxZxb79A4j-5IRAHs5XTz80xrv2qcFAc39gHTFRjrRmWr1Cxoy2c5FwCdQ49a2v0MwuRT-6n5TNCjOigVENhmlyJLs-0_DHLIN_GhJ1K2U0-inn5Tef8GML8yvxklSxR1Ez_2JDG0eP-69sa2FxYCc7G0qo8YzysgNlnt78fyn0-o7ZtCvHEY1CHlS9E2l-MkjMGvPxS-stOGnYQWk');
    background-size: cover;
    background-position: center;
}

/* ── Primary button (orange brand color) ─────────────── */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    background: linear-gradient(135deg, #E07348 0%, #D96841 50%, #C55A35 100%);
    color: #fff;
    font-weight: 700;
    font-size: 0.875rem;
    padding: 0.625rem 1rem;
    border-radius: 0.5rem;
    transition: opacity 0.2s, transform 0.15s, box-shadow 0.2s;
    cursor: pointer;
    border: none;
    width: 100%;
    box-shadow: 0 2px 8px rgba(217,104,65,0.35);
}
.btn-primary:hover { opacity: 0.92; box-shadow: 0 4px 16px rgba(217,104,65,0.45); }
.btn-primary:active { transform: scale(0.97); }

/* ── Secondary button (green) ────────────────────────── */
.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    background: linear-gradient(135deg, #3A7D3B 0%, #2C5F2D 60%, #1e4a1f 100%);
    color: #fff;
    font-weight: 700;
    font-size: 0.875rem;
    padding: 0.625rem 1rem;
    border-radius: 0.5rem;
    transition: opacity 0.2s, transform 0.15s, box-shadow 0.2s;
    cursor: pointer;
    border: none;
    width: 100%;
    box-shadow: 0 2px 8px rgba(44,95,45,0.35);
}
.btn-secondary:hover { opacity: 0.92; box-shadow: 0 4px 16px rgba(44,95,45,0.45); }
.btn-secondary:active { transform: scale(0.97); }

/* ── WhatsApp button ─────────────────────────────────── */
.btn-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    background-color: #25D366;
    color: #fff;
    font-weight: 700;
    font-size: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    transition: background-color 0.2s;
    cursor: pointer;
    border: none;
    width: 100%;
}
.btn-whatsapp:hover { background-color: #128C7E; }

/* ── Uniform product card ────────────────────────────── */
.product-card {
    background: #fff;
    border-radius: 0.75rem;
    overflow: hidden;
    border: 1px solid #f1f5f9;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    transition: box-shadow 0.3s, transform 0.3s;
    cursor: pointer;
    position: relative;
}
.dark .product-card {
    background: #1e293b;
    border-color: #334155;
}
.product-card:hover {
    box-shadow: 0 12px 32px rgba(0,0,0,.12);
    transform: translateY(-4px);
}

/* Add-to-cart button sits above the card link */
.product-card .add-to-cart-btn {
    position: relative;
    z-index: 2;
}
/* Quick-add hover overlay on card image */
.product-card .card-image-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(217,104,65,0.15) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}
.product-card:hover .card-image-wrap::after { opacity: 1; }

/* ── Social icons (Font Awesome) ─────────────────────── */
.social-icons a {
    font-size: 1.1rem;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    transition: color 0.2s, background-color 0.2s;
}
.social-icons a:hover {
    color: #D96841;
}

/* ── Mobile nav links (full-screen overlay) ──────────── */
.mobile-nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.125rem 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    font-size: 1.25rem;
    font-weight: 700;
    font-family: 'Playfair Display', serif;
    color: #1e293b;
    text-decoration: none;
    letter-spacing: -0.01em;
    transition: color 0.2s, padding-left 0.2s;
}
.dark .mobile-nav-link { color: #f1f5f9; border-color: rgba(255,255,255,0.07); }
.mobile-nav-link:hover { color: #D96841; padding-left: 0.5rem; }
.mobile-nav-link:last-child { border-bottom: none; }

/* ── Savings progress section ────────────────────────── */
.savings-section {
    background: linear-gradient(135deg, #fff8f6 0%, #fff 100%);
    border: 1px solid #fde8de;
    border-radius: 1rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
.dark .savings-section {
    background: linear-gradient(135deg, #1e1610 0%, #1e293b 100%);
    border-color: #7c3320;
}
.savings-bar-track {
    width: 100%;
    height: 10px;
    background: #f1f5f9;
    border-radius: 9999px;
    overflow: hidden;
    margin: 0.75rem 0;
}
.dark .savings-bar-track { background: #334155; }
.savings-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #C55A35, #E07348, #D96841);
    border-radius: 9999px;
    transition: width 0.5s cubic-bezier(.4,0,.2,1);
    width: 0%;
}

/* ── Search overlay animation ────────────────────────── */
#search-overlay { animation: fadeIn 0.18s ease; }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

/* ── Toast slide-up animation ────────────────────────── */
@keyframes toastSlide {
    from { opacity: 0; transform: translateX(-50%) translateY(16px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.dayone-toast { animation: toastSlide 0.3s cubic-bezier(.4,0,.2,1); }

/* ── Image Zoom Overlay ──────────────────────────────── */
.zoom-overlay {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(0,0,0,0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
    animation: fadeIn 0.2s ease;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.zoom-overlay img {
    max-width: 92vw;
    max-height: 90vh;
    border-radius: 0.75rem;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    object-fit: contain;
    transform: scale(1);
    transition: transform 0.25s ease;
}
.zoom-overlay img.zoomed-in {
    transform: scale(1.8);
    cursor: grab;
}
.zoom-overlay .zoom-close {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    width: 2.5rem;
    height: 2.5rem;
    background: rgba(255,255,255,0.15);
    color: #fff;
    border: none;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    font-size: 1.25rem;
}
.zoom-overlay .zoom-close:hover { background: rgba(255,255,255,0.3); }
.zoom-overlay .zoom-hint {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,0.5);
    font-size: 0.75rem;
    text-align: center;
}

/* ── Product page tabs ───────────────────────────────── */
.tab-btn { cursor: pointer; }
.tab-btn.active {
    border-bottom-color: #D96841;
    color: #D96841;
    font-weight: 700;
}
.tab-content { display: none; }
.tab-content.active { display: block; }

/* ── Muted accent badge ──────────────────────────────── */
.badge-green {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: rgba(217,104,65,0.12);
    color: #C55A35;
    font-size: 0.625rem;
    font-weight: 800;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid rgba(217,104,65,0.25);
}

/* ── Free delivery badge (neutral) ──────────────────── */
.badge-delivery {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: #f8fafc;
    color: #64748b;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    border: 1px solid #e2e8f0;
}
.dark .badge-delivery {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.12);
    color: #94a3b8;
}