/* Barakah Plus storefront theme — deep green + white + mint, matched to the logo.
   Loaded after main.css; colour tokens live in main.css :root. */

body {
    background-color: #f5faf7;
}

::selection {
    background: var(--brand-accent);
    color: #fff;
}

/* ---------- Header ---------- */
header .fa-user,
header .fa-truck,
header .fa-shopping-cart {
    color: var(--brand);
    transition: color 0.2s ease;
}

header a:hover .fa-user,
header a:hover .fa-truck,
header a:hover .fa-shopping-cart {
    color: var(--brand-accent);
}

.js-cart-item-count {
    background: var(--brand-accent) !important;
    color: #fff !important;
    font-weight: 700;
}

.search-bar input:focus {
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 3px var(--brand-soft);
    outline: none;
}

.search-bar button:hover {
    background: var(--brand-accent);
}

/* ---------- Marquee ---------- */
.whatsapp-marquee-mobile {
    background: linear-gradient(90deg, var(--brand-dark) 0%, var(--brand) 55%, var(--brand-bright) 100%);
    border-bottom: 2px solid var(--brand-accent);
    box-shadow: 0 2px 6px rgba(15, 81, 50, 0.2);
}

.whatsapp-marquee-mobile i {
    color: var(--brand-accent);
}

/* ---------- Hero slider ---------- */
.slide-btn {
    background: var(--brand);
    color: #fff;
    border-radius: 999px;
    transition: background 0.2s ease, transform 0.2s ease;
}

.slide-btn:hover {
    background: var(--brand-accent);
    color: #fff;
    transform: translateY(-1px);
}

/* ---------- Section headings ---------- */
.section-title {
    color: var(--brand);
    font-weight: 700;
}

.section-title:after {
    background: linear-gradient(90deg, var(--brand-accent) 0%, var(--brand) 100%);
    height: 3px;
    border-radius: 3px;
}

/* ---------- Product cards ---------- */
.product-card {
    border: 1px solid rgba(15, 81, 50, 0.08);
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.product-card:hover {
    border-color: rgba(31, 165, 124, 0.55);
    box-shadow: 0 10px 24px rgba(15, 81, 50, 0.12);
}

.product-badge {
    background: var(--brand-accent);
    color: #fff;
    font-weight: 700;
}

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

.discount {
    color: var(--brand-accent-dark);
    font-weight: 600;
}

.product-rating {
    color: var(--brand-accent);
}

.add-to-cart:hover,
.order-now:hover {
    background: var(--brand-accent);
    border-color: var(--brand-accent);
    color: #fff;
}

/* ---------- Footer ---------- */
footer {
    background: linear-gradient(180deg, var(--brand-dark) 0%, #072a1a 100%);
    color: #e7efe9;
    border-top: 4px solid var(--brand-accent);
}

.footer-column h3 {
    color: #fff;
}

.footer-links a {
    color: #d5e4da;
}

.footer-links a:hover {
    color: var(--brand-accent-light);
}

/* ---------- Product page ---------- */
.product-sale-price {
    color: var(--brand) !important;
}

#discountPercentage {
    background: var(--brand-mint) !important;
    color: var(--brand-accent-dark) !important;
    font-weight: 700;
}