/*
 * WishNest theme cleanup overrides.
 *
 * Layered on top of Evara's main.css (which is loaded first in index.html).
 * Every rule in here is a deliberate brand swap from Evara green/yellow
 * to the final WishNest Royal Warmth palette:
 *
 *
 * These tokens are exposed as CSS custom properties on :root so component
 * code can reference --wn-* anywhere without re-defining the palette.
 */

 :root {
  /* WishNest Brand v2 tokens (see /docs/DESIGNER_BRIEF.md § 5) */
  --wn-primary:        #4B1E3F;  /* Deep Plum — wordmark, CTAs, primary UI */
  --wn-primary-dark:   #2A1A22;  /* Charcoal Plum — body text, max-depth */
  --wn-primary-light:  #6D3A5C;  /* soft plum accent */

  --wn-rose:           #C24E3E;  /* Rose Terracotta — sympathy/autumn accents */
  --wn-rose-light:     #D8786A;
  --wn-rose-soft:      #F4E2DD;

  --wn-gold:           #D4AF37;  /* Antique Warm Gold — brand-system value */
  --wn-gold-soft:      #E6C76B;

  --wn-cream:          #EAD7C6;  /* Blush Sand — backgrounds, gift card stock */
  --wn-cream-2:        #F2E4D7;  /* soft section background */
  --wn-neutral:        #FAF1E6;  /* warm neutral blocks */

  --wn-brown:          #8B5E3C;  /* nest / earthy local warmth */
  --wn-text:           #2A1A22;
  --wn-muted:          #6B5A60;
  --wn-success:        #3A7D44;
  --wn-canvas:         #FFF8F3;  /* Ivory — main page background */

  /* ── Aliases for the ExperienceSystems / Phase-11 components ──────
   * Those components were authored with shorter token names and a hard-
   * coded fallback (e.g. `var(--primary, #7B2346)`). Aliasing here means
   * they share ONE source of truth with the rest of the site. Change a
   * brand value in --wn-* above and every component re-themes together.
   */
  --primary:           var(--wn-primary);
  --primary-dark:      var(--wn-primary-dark);
  --gold:              var(--wn-gold);
  --gold-soft:         var(--wn-gold-soft);
  --pink-soft:         var(--wn-rose-soft);
  --rose:              var(--wn-rose);
  --bg-main:           var(--wn-cream);
  --bg-soft:           var(--wn-cream-2);
  --bg-cream:          var(--wn-neutral);
  --text-dark:         var(--wn-text);
  --text-soft:         var(--wn-muted);

  /* Replace Evara's ambient brand colour */
  --brand-color:       var(--wn-primary);
}

/* ── Typography colour shift ────────────────────────────────────── */

body {
  color: var(--wn-brown);
  background: #fff;
}
h1, h2, h3, h4, h5, h6,
.section-title, .section-title-heading, .heading_s1 h4 {
  color: var(--wn-brown) !important;
}

/* ── Brand accent text ──────────────────────────────────────────── */

.text-brand,
.section-title-heading span,
.product-price span,
.evara-product-bottom .product-price span,
.cart_total_amount strong.text-brand,
.evara-success-reference strong,
.product-price.primary-color span,
.product-price ins span,
.product-price ins {
  color: var(--wn-primary) !important;
}

a {
  color: var(--wn-primary);
}
a:hover {
  color: var(--wn-primary-dark);
}

/* ── Buttons ────────────────────────────────────────────────────── */

.btn,
.btn-fill-out,
.button-add-to-cart,
.button-contactForm {
  background: var(--wn-primary) !important;
  color: #fff !important;
  border: 1px solid var(--wn-primary) !important;
  border-radius: 6px !important;
}
.btn:hover,
.btn-fill-out:hover,
.button-add-to-cart:hover,
.button-contactForm:hover {
  background: var(--wn-primary-dark) !important;
  border-color: var(--wn-primary-dark) !important;
  color: #fff !important;
}

.btn-fill-line {
  background: #fff !important;
  color: var(--wn-primary) !important;
  border: 1px solid var(--wn-primary) !important;
}
.btn-fill-line:hover {
  background: var(--wn-primary) !important;
  color: #fff !important;
}

/* Brushstroke hero buttons retain the painted texture but recoloured  */
.btn-brush, .btn-brush-1, .btn-brush-2, .btn-brush-3 {
  color: var(--wn-primary-dark) !important;
}

/* ── Header / nav ───────────────────────────────────────────────── */

.header-area {
  background: #fff;
}
.header-bottom.header-bottom-bg-color {
  background: var(--wn-cream-2) !important;
}
.header-bottom.sticky-bar.evara-sticky-active {
  background: #fff !important;
  box-shadow: 0 6px 24px rgba(73, 54, 37, 0.08) !important;
}

.main-menu nav > ul > li > a {
  color: var(--wn-brown) !important;
}
.main-menu nav > ul > li > a:hover,
.main-menu nav > ul > li > a.active {
  color: var(--wn-primary) !important;
}

.hotline p i { color: var(--wn-primary) !important; }
.hotline p span { color: var(--wn-brown) !important; }

.categori-button-active {
  color: var(--wn-brown) !important;
}
.categori-button-active:hover { color: var(--wn-primary) !important; }

.header-info ul li i,
.search-style-2 .evara-search-cat-chevron {
  color: var(--wn-primary) !important;
}

.pro-count.blue,
.pro-count.white {
  background: var(--wn-primary) !important;
  color: #fff !important;
}

.search-style-2 .evara-search form {
  border-color: var(--wn-primary-light) !important;
}

/* ── Product cards ──────────────────────────────────────────────── */

.evara-product-tile {
  border-color: var(--wn-cream) !important;
  background: #fff;
}
.evara-product-tile:hover {
  box-shadow: 0 8px 24px rgba(178, 7, 50, 0.12) !important;
}
.evara-product-tile .product-action-1 .action-btn:hover {
  background: var(--wn-primary) !important;
  border-color: var(--wn-primary) !important;
}
.evara-product-tile .product-action-1 .action-btn.is-active-wishlist {
  background: var(--wn-primary) !important;
  border-color: var(--wn-primary) !important;
}
.evara-product-tile .evara-product-title a:hover {
  color: var(--wn-primary) !important;
}

/* Wishnest add-to-cart — soft pink at rest, deep rose on hover */
.evara-add-to-cart {
  background: var(--wn-cream) !important;
  color: var(--wn-primary) !important;
}
.evara-add-to-cart:hover {
  background: var(--wn-primary) !important;
  color: #fff !important;
}

/* Hot / sale badges */
.product-badges .hot {
  background: var(--wn-primary) !important;
  color: #fff !important;
}
.product-badges .new {
  background: var(--wn-olive) !important;
}

/* ── Banners + hero ─────────────────────────────────────────────── */

.banner-img .banner-text span {
  color: var(--wn-primary) !important;
}
.banner-img .banner-text h4 {
  color: var(--wn-brown) !important;
}
.banner-img .banner-text a {
  color: var(--wn-primary) !important;
}

.home-slider .hero-slider-content-2 h5 {
  color: var(--wn-primary) !important;
}
.home-slider .hero-slider-content-2 .text-brand {
  color: var(--wn-primary) !important;
}

/* ── Sliders / sliders thumbs / pagination ──────────────────────── */

.react-hero-dot.is-active {
  background: var(--wn-primary) !important;
}
.react-hero-arrow:hover {
  background: var(--wn-primary) !important;
  color: #fff !important;
}

.pagination-area .page-item .page-link:hover,
.pagination-area .page-item.active .page-link {
  background: var(--wn-primary) !important;
  border-color: var(--wn-primary) !important;
  color: #fff !important;
}

/* ── Sidebar widgets ────────────────────────────────────────────── */

.widget-category-2 li,
.evara-cat-tree {
  border-color: var(--wn-cream) !important;
}
.category-button.active {
  color: var(--wn-primary) !important;
}
.category-button:hover {
  color: var(--wn-primary) !important;
}
.evara-cat-toggle:hover {
  background: var(--wn-primary) !important;
  border-color: var(--wn-primary) !important;
  color: #fff !important;
}
.evara-price-display {
  color: var(--wn-primary) !important;
}
.evara-price-slider::-webkit-slider-thumb {
  background: var(--wn-primary) !important;
}
.evara-price-slider::-moz-range-thumb {
  background: var(--wn-primary) !important;
}

/* ── Cart hover dropdown ────────────────────────────────────────── */

.evara-cart-hover {
  border-color: var(--wn-cream) !important;
}
.shopping-cart-footer .shopping-cart-button a {
  background: var(--wn-primary) !important;
}
.shopping-cart-footer .shopping-cart-button a.outline {
  background: #fff !important;
  color: var(--wn-primary) !important;
  border-color: var(--wn-primary) !important;
}
.shopping-cart-footer .shopping-cart-button a:hover {
  background: var(--wn-primary-dark) !important;
}
.shopping-cart-footer .shopping-cart-button a.outline:hover {
  background: var(--wn-primary) !important;
  color: #fff !important;
}
.evara-cart-hover-list .shopping-cart-title h4:last-child {
  color: var(--wn-primary) !important;
}

/* ── Account dropdown / avatar ─────────────────────────────────── */

.evara-avatar-img {
  border-color: var(--wn-primary) !important;
}
.evara-account-item:hover {
  background: var(--wn-cream-2) !important;
  color: var(--wn-primary) !important;
}
.evara-account-badge {
  background: var(--wn-primary) !important;
}

/* ── Product details ────────────────────────────────────────────── */

.evara-detail-wishlist-btn:hover {
  border-color: var(--wn-primary) !important;
  color: var(--wn-primary) !important;
}
.evara-detail-wishlist-btn.is-active {
  background: var(--wn-primary) !important;
  border-color: var(--wn-primary) !important;
}
.tab-style3 .nav-tabs .nav-link.active {
  color: var(--wn-primary) !important;
  border-bottom-color: var(--wn-primary) !important;
}
.evara-gallery-open:hover {
  background: var(--wn-primary) !important;
  border-color: var(--wn-primary) !important;
}
.thumb-item.is-active { border-color: var(--wn-primary) !important; }

/* In-stock pill (status badge across the site) */
.evara-status-tag.evara-status-delivered,
.evara-pill.evara-pill-success,
.in-stock.text-success {
  background: var(--wn-olive-light) !important;
  color: var(--wn-olive) !important;
}

/* ── Quantity selector ──────────────────────────────────────────── */

.detail-qty .qty-up:hover,
.detail-qty .qty-down:hover {
  background: var(--wn-primary) !important;
  color: #fff !important;
}

/* ── Forms (auth, shipping, profile) ────────────────────────────── */

.evara-form-row input:focus,
.evara-form-row select:focus,
.evara-form-row textarea:focus,
.evara-admin-input:focus,
.evara-admin-select:focus,
.evara-admin-textarea:focus {
  border-color: var(--wn-primary) !important;
  box-shadow: 0 0 0 3px rgba(178, 7, 50, 0.15) !important;
}
.evara-btn-block {
  background: var(--wn-primary) !important;
}
.evara-btn-block:hover { background: var(--wn-primary-dark) !important; }
.evara-auth-links a { color: var(--wn-primary) !important; }
.evara-avatar-uploader {
  border-color: var(--wn-cream) !important;
}
.evara-avatar-uploader-text label {
  background: var(--wn-primary) !important;
}
.evara-avatar-preview { border-color: var(--wn-primary) !important; }

/* ── Checkout step indicator ───────────────────────────────────── */

.evara-checkout-step.is-active { color: var(--wn-primary) !important; }
.evara-checkout-step.is-active .evara-checkout-step-icon {
  background: var(--wn-primary) !important;
}
.evara-checkout-step.is-complete { color: var(--wn-brown) !important; }
.evara-checkout-step.is-complete .evara-checkout-step-icon {
  background: var(--wn-brown) !important;
}

/* ── Wishlist / orders status pills ─────────────────────────────── */

.evara-status-pending {
  background: var(--wn-cream) !important;
  color: var(--wn-primary) !important;
}
.evara-status-shipped {
  background: #fde4ec !important;
  color: var(--wn-primary) !important;
}

/* ── PaymentSuccess ────────────────────────────────────────────── */

.evara-success-checkmark {
  background: linear-gradient(135deg, var(--wn-primary), var(--wn-primary-dark)) !important;
  box-shadow: 0 10px 30px rgba(178, 7, 50, 0.3) !important;
}
.evara-success-reference {
  background: var(--wn-cream) !important;
  border-color: var(--wn-primary-light) !important;
}

/* ── Why-choose-us section ─────────────────────────────────────── */

.evara-why-section {
  background: var(--wn-cream-2) !important;
}
.evara-why-icon {
  background: linear-gradient(135deg, var(--wn-primary), var(--wn-primary-dark)) !important;
}
.evara-why-cta {
  border-left-color: var(--wn-primary) !important;
}
.evara-faq-q i { color: var(--wn-primary) !important; }

/* ── Footer ────────────────────────────────────────────────────── */

footer.main {
  background: #fff;
}
footer.main .newsletter {
  background: var(--wn-primary) !important;
  border-radius: 12px;
}
footer.main .form-subcriber .btn.bg-dark {
  background: var(--wn-brown) !important;
  color: #fff !important;
}
footer.main .footer-list a:hover,
footer.main .widget-title:hover {
  color: var(--wn-primary) !important;
}

/* ── Toast container — top-right + brand styling ──────────────── */

.Toastify__toast-container {
  top: 1em !important;
  right: 1em !important;
  bottom: auto !important;
  left: auto !important;
  width: 360px !important;
  max-width: calc(100vw - 24px);
  z-index: 99999 !important;
}
.Toastify__toast {
  border-radius: 10px !important;
  border-left: 4px solid var(--wn-primary) !important;
  font-family: 'Lato', sans-serif !important;
  color: var(--wn-brown) !important;
  background: #fff !important;
  box-shadow: 0 8px 24px rgba(73, 54, 37, 0.12) !important;
  padding: 14px 16px !important;
}
.Toastify__toast--success {
  border-left-color: var(--wn-olive) !important;
}
.Toastify__toast--success .Toastify__toast-icon svg { fill: var(--wn-olive) !important; }
.Toastify__toast--error {
  border-left-color: #7B2346 !important;
}
.Toastify__toast--info {
  border-left-color: var(--wn-primary-light) !important;
}
.Toastify__toast--info .Toastify__toast-icon svg { fill: var(--wn-primary) !important; }
.Toastify__progress-bar { background: var(--wn-primary) !important; }
.Toastify__progress-bar--success { background: var(--wn-olive) !important; }

@media (max-width: 480px) {
  .Toastify__toast-container {
    width: calc(100vw - 24px) !important;
    top: 0.5em !important;
    right: 0.5em !important;
  }
}

/* ── Scroll-to-top button ─────────────────────────────────────── */

.evara-scroll-top {
  background: var(--wn-primary) !important;
  box-shadow: 0 4px 16px rgba(178, 7, 50, 0.4) !important;
}
.evara-scroll-top:hover {
  background: var(--wn-primary-dark) !important;
}

/* ── Mega menu ─────────────────────────────────────────────────── */

.evara-megamenu {
  border-color: var(--wn-cream) !important;
  box-shadow: 0 12px 30px rgba(73, 54, 37, 0.15) !important;
}
.evara-megamenu-rail {
  background: var(--wn-cream-2) !important;
}
.evara-megamenu-rail li a > i:first-child,
.evara-megamenu-panel-header h4 i {
  color: var(--wn-primary) !important;
}
.evara-megamenu-rail li a:hover,
.evara-megamenu-rail li.is-active a,
.evara-megamenu-subs li a:hover,
.evara-megamenu-viewall {
  color: var(--wn-primary) !important;
}

/* ── Breadcrumb ────────────────────────────────────────────────── */

.breadcrumb a:hover { color: var(--wn-primary) !important; }

/* ── Admin shell brand tokens (consumed by AdminLayout.css) ────── */

.evara-admin-body {
  background: var(--wn-canvas) !important;
}
.evara-admin-logo-mark {
  background: linear-gradient(135deg, var(--wn-primary), var(--wn-primary-dark)) !important;
}
.evara-admin-nav-item.is-active {
  background: var(--wn-primary) !important;
  color: #fff !important;
}
.evara-admin-nav-item:hover {
  background: var(--wn-cream-2) !important;
  color: var(--wn-primary) !important;
}
.evara-admin-btn:not(.evara-admin-btn-outline):not(.evara-admin-btn-danger) {
  background: var(--wn-primary) !important;
}
.evara-admin-btn:not(.evara-admin-btn-outline):not(.evara-admin-btn-danger):hover {
  background: var(--wn-primary-dark) !important;
}
.evara-admin-btn-outline {
  color: var(--wn-primary) !important;
  border-color: var(--wn-primary) !important;
}
.evara-admin-btn-outline:hover {
  background: var(--wn-primary) !important;
  color: #fff !important;
}
.evara-stat-card.tint-green .evara-stat-icon {
  background: var(--wn-olive-light) !important;
  color: var(--wn-olive) !important;
}
.evara-stat-card.tint-pink .evara-stat-icon {
  background: var(--wn-cream) !important;
  color: var(--wn-primary) !important;
}
.evara-pill.evara-pill-success {
  background: var(--wn-olive-light) !important;
  color: var(--wn-olive) !important;
}

/* ── Subtle African-inspired pattern accent ─────────────────────── */

/*
 * Tiny zigzag bar applied as an "African accent" stripe under select
 * section titles and at the top of the hero. Uses CSS only, no images.
 * Kept very subtle so the page doesn't feel over-decorated.
 */
.wn-zigzag {
  height: 8px;
  background-image:
    linear-gradient(135deg, var(--wn-primary) 25%, transparent 25%) -8px 0,
    linear-gradient(225deg, var(--wn-primary) 25%, transparent 25%) -8px 0,
    linear-gradient(315deg, var(--wn-primary) 25%, transparent 25%),
    linear-gradient(45deg, var(--wn-primary) 25%, transparent 25%);
  background-size: 16px 16px;
  background-color: var(--wn-cream);
  opacity: 0.55;
  margin: 0;
}