/*
 * Modern UI overrides — loaded last so it wins the cascade on every
 * front-end page (home, product, cart, checkout, blog, account).
 * Goal: one consistent, modern look on top of the existing template,
 * without touching page markup or logic.
 */

:root {
    /* Unify the site's "primary" color: several stylesheets and inline
       styles disagree (#c9030f, #bf8072, #E8600A, #c8f135 all show up as
       "the" brand color in different places). This keeps the brand's
       existing warm tone (--theme-primary-color) as the single source of
       truth and gives it a readable, slightly deeper twin for text/links. */
    --brand-primary: var(--theme-primary-color, #bf8072);
    --brand-primary-dark: #a5695a;
    --brand-ink: var(--theme-secondary-color, #141926);
    --brand-surface: #ffffff;
    --brand-surface-muted: #faf8f6;
    --brand-border: #ececec;

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 3px rgba(20, 25, 38, 0.06), 0 1px 2px rgba(20, 25, 38, 0.04);
    --shadow-md: 0 8px 24px rgba(20, 25, 38, 0.08);
    --shadow-lg: 0 16px 40px rgba(20, 25, 38, 0.12);

    --transition-fast: 150ms ease;
    --transition-base: 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Base typography & readability ---------- */

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    letter-spacing: -0.01em;
}

a {
    transition: color var(--transition-fast);
}

/* Align the hard-coded "primary" text/border color used across the
   older template CSS with the actual brand token, so accents don't
   flip between red, terracotta and orange from section to section. */
.text-primary {
    color: var(--brand-primary) !important;
}

.btn-primary,
.bg-primary {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}

/* ---------- Buttons ---------- */

.btn,
button,
input[type="submit"],
input[type="button"],
.add_cart_button,
.submit-btn,
.affilate-btn,
.whatsapp-order-btn,
[class*="btn-fe"],
[class*="btn1-fe"],
[class*="btn2-fe"] {
    border-radius: var(--radius-pill);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);
}

.btn:hover:not(:disabled),
.add_cart_button:hover,
.submit-btn:hover,
.affilate-btn:hover,
[class*="btn-fe"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.btn:active,
.add_cart_button:active,
.submit-btn:active {
    transform: translateY(0);
}

.cart-out-of-stock,
.stock-availability.out-stock {
    opacity: 0.85;
}

/* Minimum comfortable tap target on touch devices */
@media (hover: none) {
    .btn, button, .add_cart_button, .submit-btn, a.affilate-btn {
        min-height: 44px;
    }
}

/* ---------- Cards & product tiles ---------- */
/* Attribute selectors catch every "*-card*" / "*-card-fe" variant used
   across the homepage sections (bp-, mms-, hs-, card-fe, product-card-fe)
   without needing to touch each section's own markup. */

.card,
[class*="-card-fe"],
[class$="-card"],
.product-wrapper,
.product-container {
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.card:hover,
[class*="-card-fe"]:hover,
[class$="-card"]:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
}

.card img,
[class*="-card-fe"] img,
[class$="-card"] img {
    transition: transform var(--transition-base);
}

/* ---------- Forms ---------- */

.form-control,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
textarea,
select {
    border-radius: var(--radius-sm);
    border: 1px solid var(--brand-border);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-control:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(191, 128, 114, 0.18);
    outline: none;
}

/* ---------- Accessibility: visible keyboard focus everywhere ---------- */

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

/* ---------- Ratings / trust badges ---------- */

.star-rating,
.stars {
    color: #f5a623;
    letter-spacing: 1px;
}

.review-text span,
.review-count {
    color: var(--brand-ink);
    font-weight: 600;
}

/* ---------- Small-screen comfort ---------- */

@media (max-width: 576px) {
    .btn, button, .add_cart_button, .submit-btn {
        padding-top: 0.6rem;
        padding-bottom: 0.6rem;
    }

    h1, .h1 { font-size: 1.6rem; }
    h2, .h2 { font-size: 1.35rem; }
}