/*
Theme Name: Hello Elementor Child - Storefront UI
Theme URI: https://vigixcore.com
Description: Child theme for Hello Elementor tailored for the Storefront UI with full-width layout, clean CSS tokens, and WooCommerce optimization.
Author: VigixCore Team
Author URI: https://vigixcore.com
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
*/

/* Inherit child styles and integrate custom tokens */
:root {
  --ink: #111111;
  --muted: #6c6c6c;
  --line: #e7e7e7;
  --soft: #f5f5f5;
  --yellow: #ffd400;
  --green: #149447;
  --red: #ff2020;
  --max: 1600px;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif;
  color: var(--ink);
  background-color: #ffffff;
  margin: 0;
  padding: 0;
  overflow-x: clip;
}

/* Ensure Elementor full-width pages match design */
.elementor-section.elementor-section-boxed > .elementor-container {
  max-width: var(--max);
}

/* ==========================================================================
   GLOBAL OVERRIDE: Replace Hello Elementor Pink (#c36) with Red Everywhere
   ========================================================================== */

/* 1. Global Button Hovers */
[type=button]:focus,
[type=button]:hover,
[type=submit]:focus,
[type=submit]:hover,
button:focus,
button:hover {
  background-color: #e22323;
  color: #ffffff;
  border-color: #e22323;
}

/* 2. Product Category Tabs & Pill Buttons (Big Deals, Top Picks, Best Sellers, etc.) */
.tabs .tab:hover,
.tabs button:hover,
.tab:hover,
button.tab:hover,
button[data-tab-target]:hover,
button[data-category]:hover {
  background: #e22323 !important;
  color: #ffffff !important;
  border-color: #e22323 !important;
  box-shadow: 0 4px 12px rgba(226, 35, 35, 0.25) !important;
}

.tabs .tab.active:hover,
.tab.active:hover {
  background: #e22323 !important;
  color: #ffffff !important;
  border-color: #e22323 !important;
}

/* 3. Modal Tabs, Nav Tabs & Pills */
.sf-tab-btn:hover,
.boat-tab-btn:hover,
.Storefront-tab-btn:hover,
.sf-category-pill:hover,
.sf-pill:hover,
.sf-filter-btn:hover {
  background: #e22323 !important;
  color: #ffffff !important;
  border-color: #e22323 !important;
}

/* 4. Default link hover to red instead of parent theme #336 */
a:hover {
  color: #e22323;
}