/*
====================================================================
  TEPANTI PREMIUM THEME LAYER — Storefront
  Deep Emerald + Gold accent. Loaded from includes/header.php.
  Pure visual layer: no layout/logic changes.
====================================================================
*/

:root {
    --tp-gold: #d4af37;
    --tp-gold-soft: #f1dc9a;
    --tp-emerald-dark: #0b3d20;
    --tp-grad-hero: linear-gradient(135deg, #0b3d20 0%, #14532d 55%, #166534 100%);
    --tp-card-shadow: 0 10px 28px rgba(8, 40, 22, 0.08);
    --tp-card-shadow-hover: 0 20px 40px rgba(8, 40, 22, 0.16);
}

html { scroll-behavior: smooth; }

body { background: #f4faf6 !important; }

::selection { background: #166534; color: #ffffff; }


/* ---------- Hero / banner blocks ---------- */

.legal-hero,
.about-hero,
.faq-hero,
.contact-hero,
.auth-header,
.search-page-header,
.tepanti-live-chat-header {
    background: var(--tp-grad-hero) !important;
    box-shadow:
        0 18px 40px rgba(8, 40, 22, 0.30),
        inset 0 -3px 0 rgba(212, 175, 55, 0.9) !important;
}


/* ---------- Cards ---------- */

.product-card,
.about-card,
.contact-card,
.category-card,
.faq-item,
.legal-content,
.tepanti-payment-card,
.current-status-card {
    border-color: rgba(22, 101, 52, 0.14) !important;
    box-shadow: var(--tp-card-shadow) !important;
}

.product-card:hover,
.about-card:hover,
.contact-card:hover,
.category-card:hover,
.faq-item:hover {
    border-color: rgba(212, 175, 55, 0.85) !important;
    box-shadow: var(--tp-card-shadow-hover) !important;
}

.product-card:hover,
.contact-card:hover,
.category-card:hover {
    transform: translateY(-4px);
}


/* ---------- Primary buttons ---------- */

.product-add-cart-button {
    background: linear-gradient(135deg, #166534 0%, #0f4a26 100%) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 22px rgba(22, 101, 52, 0.35);
}

.product-add-cart-button:hover {
    box-shadow: 0 14px 28px rgba(22, 101, 52, 0.45);
}

.pagination-current {
    background: linear-gradient(135deg, #166534 0%, #0f4a26 100%) !important;
    color: #ffffff !important;
    box-shadow:
        0 0 0 2px rgba(212, 175, 55, 0.85),
        0 6px 14px rgba(22, 101, 52, 0.3) !important;
}


/* ---------- Form focus ---------- */

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
select:focus,
textarea:focus {
    border-color: #166534 !important;
    box-shadow: 0 0 0 4px rgba(22, 101, 52, 0.14) !important;
    outline: none;
}