.elementor-kit-5{--e-global-color-primary:#1E4ED8;--e-global-color-secondary:#F59E0B;--e-global-color-text:#E5E7EB;--e-global-color-accent:#60A5FA;--e-global-typography-primary-font-family:"Cairo";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-weight:500;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:768px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ===================================================
   AZR MIXX – FINAL DESIGN SYSTEM (PRODUCTION READY)
   Elementor + WooCommerce + WoodMart
   =================================================== */


/* ===================================================
   1) DESIGN TOKENS (SINGLE SOURCE OF TRUTH)
   =================================================== */
:root {

  /* 🔵 Brand Colors */
  --color-primary: #1E4ED8;
  --color-primary-hover: #2563EB;
  --color-primary-active: #1D4ED8;

  --color-secondary: #F59E0B;        /* Gold Accent (LIMITED USE) */
  --color-secondary-soft: #FBBF24;   /* Prices */

  --color-accent: #60A5FA;

  /* 📝 Text Colors (CLEAR HIERARCHY) */
  --text-primary: #E5E7EB;           /* Main titles */
  --text-secondary: #CBD5E1;         /* Product names */
  --text-muted: #94A3B8;             /* Meta / filters / small text */

  /* 🧱 Backgrounds (CALM DARK) */
  --bg-main: #0C1422;
  --bg-section: #0B1220;
  --bg-card: #111C2E;
  --bg-footer-dark: #070D18;

  /* 📏 Borders */
  --border-light: #1E293B;
  --border-muted: #334155;

  /* ⚙️ States */
  --state-success: #22C55E;
  --state-warning: #F59E0B;
  --state-error: #EF4444;
  --state-info: #38BDF8;

  /* 📐 Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  /* 🌫️ Shadow (SUBTLE) */
  --shadow-soft: 0 6px 18px rgba(0,0,0,0.32);
  --shadow-hover: 0 14px 40px rgba(0,0,0,0.45);
}


/* ===================================================
   2) GLOBAL BACKGROUND (REDUCE VISUAL NOISE)
   =================================================== */
body,
.shop-content-area,
.archive-products {
  background-color: var(--bg-main);
}


/* ===================================================
   3) PRODUCT CARD – TEXT HIERARCHY
   =================================================== */

/* Product title */
.wd-products .product-title a {
  color: var(--text-secondary);
  font-weight: 500;
  line-height: 1.45;
  transition: color 0.2s ease;
}

.wd-products .product-title a:hover {
  color: var(--text-primary);
}

/* Price = visual priority */
.wd-products .price {
  color: var(--color-secondary-soft);
  font-weight: 600;
  margin-top: 4px;
}

/* Secondary / meta text */
.wd-products .woocommerce-product-details__short-description,
.wd-products .product-meta {
  color: var(--text-muted);
  font-size: 13px;
}


/* ===================================================
   4) BUTTON SYSTEM (WOO + WOODMART)
   =================================================== */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.wd-products .product-grid-item .button,
.wd-products .product-grid-item a.button,
.wd-products .product-grid-item .add_to_cart_button {
  background-color: var(--color-primary) !important;
  color: #ffffff !important;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  font-weight: 500;
  letter-spacing: 0.3px;
  transition: all 0.25s ease;
}

/* Hover */
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.wd-products .product-grid-item .button:hover {
  background-color: var(--color-primary-hover) !important;
  box-shadow: var(--shadow-hover);
}

/* Active */
.woocommerce a.button:active,
.wd-products .product-grid-item .button:active {
  background-color: var(--color-primary-active) !important;
}


/* ===================================================
   5) BADGES & HIGHLIGHTS (CONTROLLED ACCENT)
   =================================================== */

.wd-product-label,
.onsale,
.wd-discount-badge {
  background-color: var(--color-secondary);
  color: #111827;
  font-weight: 600;
}

/* Rating stars */
.woocommerce .star-rating span {
  color: var(--color-secondary);
}


/* ===================================================
   6) WOO ALERTS (CLEAN & READABLE)
   =================================================== */

.woocommerce-message {
  background: rgba(34,197,94,0.12);
  border-left: 4px solid var(--state-success);
  color: var(--text-primary);
}

.woocommerce-error {
  background: rgba(239,68,68,0.12);
  border-left: 4px solid var(--state-error);
  color: var(--text-primary);
}

.woocommerce-info {
  background: rgba(56,189,248,0.12);
  border-left: 4px solid var(--state-info);
  color: var(--text-primary);
}


/* ===================================================
   7) PAGE TITLE (FIX YELLOW OVERUSE)
   =================================================== */

.page-title,
.page-title h1 {
  color: var(--text-primary) !important;
}

.page-title:after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background-color: var(--color-secondary);
  margin-top: 10px;
}


/* ===================================================
   8) SIDEBAR FILTERS (UX IMPROVEMENT)
   =================================================== */

.widget-title {
  color: var(--text-primary);
}

.widget ul li a {
  color: var(--text-muted);
  transition: color 0.2s ease;
}

.widget ul li a:hover {
  color: var(--color-primary);
}/* End custom CSS */