/* =====================================================================
   MYVPRO.COM — Kadence Child Theme Color Scheme
   Source: VPRO logo (gunmetal / brushed-steel black + red flame)
            + brand accent cyan #18b8d4
   Drop into your Kadence child theme's style.css (or Customizer > 
   Additional CSS). Overrides Kadence's --global-palette* variables so
   every block/element already bound to the palette updates automatically,
   then adds semantic tokens + targeted component rules for WooCommerce.
   ===================================================================== */

:root {

  /* ---------- 1. Brand primitives (from logo) ---------- */
  --vp-black:        #0b0b0c;   /* deep gunmetal black from wordmark */
  --vp-black-soft:    #17181b;
  --vp-steel-900:     #23262b;
  --vp-steel-700:     #45484e;
  --vp-steel-500:     #6c7075;
  --vp-steel-300:     #a7abb1;
  --vp-steel-100:     #d9dbde;
  --vp-silver:        #eceef0;  /* brushed metal highlight in letters */
  --vp-white:         #ffffff;

  --vp-red-900:       #7a0f14;
  --vp-red-700:       #a5141a;  /* flame base red */
  --vp-red:           #c81e26;  /* primary flame red */
  --vp-red-500:       #e0203a;  /* hot flame red */
  --vp-red-300:       #f2554f;
  --vp-red-bg:        #fdecea; /* tint for badges/backgrounds */

  --vp-btn:           #f04f36;  /* primary button fill */
  --vp-btn-hover:     #f2614a;

  --vp-cyan-900:      #0c6f80;
  --vp-cyan-700:      #0f9bb3;
  --vp-cyan:          #18b8d4;  /* brand cyan, new accent */
  --vp-cyan-300:      #6cd7e8;
  --vp-cyan-bg:        #e6f9fc;

  /* ---------- 2. Semantic tokens ---------- */
  --vp-ink:            var(--vp-black);
  --vp-ink-muted:      var(--vp-steel-500);
  --vp-line:           #e6e7ea;
  --vp-bg:             var(--vp-white);
  --vp-bg-subtle:      #f7f8f9;
  --vp-bg-dark:        var(--vp-black-soft);

  --vp-primary:        var(--vp-red);
  --vp-primary-dark:   var(--vp-red-700);
  --vp-primary-light:  var(--vp-red-300);

  --vp-accent:         var(--vp-cyan);
  --vp-accent-dark:    var(--vp-cyan-700);
  --vp-accent-bg:      var(--vp-cyan-bg);

  --vp-sale:           var(--vp-red);
  --vp-sale-bg:        var(--vp-red-bg);
  --vp-success:        #1e8e50;
  --vp-warning:        #d98c00;
  --vp-star:           #ffb91a;

  /* =====================================================================
     3. Kadence global palette overrides
     Kadence's slots 1–9 drive nearly all default block/button/link
     coloring; 11–15 are the extended "theme palette" swatches used in
     the color picker + some dynamic components (ratings, alerts, etc).
     ===================================================================== */
  --global-palette1:  var(--vp-primary);        /* was #a5141a — kept red family, tuned to logo flame */
  --global-palette2:  var(--vp-accent);         /* was gold #ffb91a — swapped to brand cyan #18b8d4 */
  --global-palette3:  var(--vp-ink);            /* was #0e0e0e */
  --global-palette4:  var(--vp-steel-700);      /* was #383838 */
  --global-palette5:  var(--vp-steel-500);      /* was #6b6b6b */
  --global-palette6:  var(--vp-steel-300);      /* was #8d8d8d */
  --global-palette7:  var(--vp-bg-subtle);      /* was #eeeeee */
  --global-palette8:  #fbfbfc;                  /* was #f8f8f8 */
  --global-palette9:  var(--vp-white);
  --global-palette11: var(--vp-success);        /* was #13612e */
  --global-palette12: var(--vp-accent-dark);    /* was #1159af — now cyan-based info color */
  --global-palette13: var(--vp-red-900);        /* was #b82105 — danger/deep red */
  --global-palette14: var(--vp-warning);        /* was #f7630c */
  --global-palette15: var(--vp-star);           /* was #f5a524 — unchanged, matches ratings */

  --global-palette9rgb: 255, 255, 255;
  --global-palette-highlight:      var(--global-palette1);
  --global-palette-highlight-alt:  var(--global-palette2);
  --global-palette-highlight-alt2: var(--global-palette9);

  /* Primary buttons */
  --global-palette-btn-bg:         var(--vp-btn);
  --global-palette-btn-bg-hover:   var(--vp-btn-hover);
  --global-palette-btn:            var(--vp-white);
  --global-palette-btn-hover:      var(--vp-white);

  /* Secondary buttons: light steel, cyan on hover */
  --global-palette-btn-sec-bg:         var(--global-palette7);
  --global-palette-btn-sec-bg-hover:   var(--vp-accent);
  --global-palette-btn-sec:            var(--vp-ink);
  --global-palette-btn-sec-hover:      var(--vp-white);
}

/* =====================================================================
   4. Component-level styling
   ===================================================================== */

/* --- Header / top bar --- */
.site-header,
.header-main-layout-3 .site-header,
.header-topbar {
  background-color: var(--vp-bg);
  border-bottom: 1px solid var(--vp-line);
}
.announcement-bar,
.kadence-woo-notice-top,
.site-top-header-wrap {
  background-color: var(--vp-ink);
  color: var(--vp-silver);
}
.main-navigation ul li a {
  color: var(--vp-ink);
}
.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a {
  color: var(--vp-primary);
}
.main-navigation ul li.menu-item-has-children:hover > a {
  color: var(--vp-accent);
}

/* --- Links --- */
a { color: var(--vp-primary); }
a:hover, a:focus { color: var(--vp-accent-dark); }

/* --- Buttons (theme + WooCommerce) --- */
.kt-button,
button:not(.splide__arrow):not(.vp-home-hero__arrow):not(.vp-home-deals__arrow):not(.pswp__button):not(.vp-age__btn):not(.drawer-toggle):not(.drawer-sub-toggle):not(.header-cart-button):not(.search-toggle-open):not(.vp-slogan__prev):not(.vp-slogan__next),
input[type="submit"],
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.single_add_to_cart_button {
  background-color: var(--vp-btn);
  border-color: var(--vp-btn);
  color: var(--vp-white);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.kt-button:hover,
button:not(.splide__arrow):not(.vp-home-hero__arrow):not(.vp-home-deals__arrow):not(.pswp__button):not(.vp-age__btn):not(.drawer-toggle):not(.drawer-sub-toggle):not(.header-cart-button):not(.search-toggle-open):not(.vp-slogan__prev):not(.vp-slogan__next):hover,
input[type="submit"]:hover,
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce #respond input#submit:hover,
.single_add_to_cart_button:hover {
  background-color: var(--vp-btn-hover);
  border-color: var(--vp-btn-hover);
  color: var(--vp-white);
}

/* Outline / "Shop all" style secondary buttons */
.kt-button.kt-btn-style-outline,
.wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent;
  border-color: var(--vp-ink);
  color: var(--vp-ink);
}
.kt-button.kt-btn-style-outline:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: var(--vp-accent);
  border-color: var(--vp-accent);
  color: var(--vp-white);
}

/* --- Product cards / archive --- */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--vp-primary);
  font-weight: 600;
}
.woocommerce ul.products li.product .price del {
  color: var(--vp-ink-muted);
  opacity: .7;
}
.woocommerce ul.products li.product .price ins {
  color: var(--vp-primary);
  text-decoration: none;
}
.woocommerce span.onsale,
.kadence-product-badge,
.badge-sale {
  background-color: var(--vp-sale);
  color: var(--vp-white);
}
.kadence-product-badge.badge-new {
  background-color: var(--vp-accent);
  color: var(--vp-white);
}

/* Star ratings */
.woocommerce .star-rating span,
.star-rating span::before {
  color: var(--vp-star);
}

/* --- Category / promo tiles overlays --- */
.kadence-column-highlight,
.kt-row-column-wrap .kt-inside-inner-col a.kt-btn-style-basic {
  color: var(--vp-white);
}

/* --- Section backgrounds --- */
.section-bg-subtle,
.alternate-bg,
.kt-row-layout-id.bg-subtle {
  background-color: var(--vp-bg-subtle);
}
.section-bg-dark {
  background-color: var(--vp-bg-dark);
  color: var(--vp-silver);
}

/* --- Footer --- */
.site-footer,
.footer-widget-area {
  background-color: var(--vp-ink);
  color: var(--vp-steel-300);
}
.site-footer a {
  color: var(--vp-steel-100);
}
.site-footer a:hover {
  color: var(--vp-accent);
}
.site-footer h2, .site-footer h3, .site-footer h4 {
  color: var(--vp-white);
}

/* --- Forms / inputs --- */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="tel"],
select,
textarea {
  border-color: var(--vp-line);
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus {
  border-color: var(--vp-accent);
  outline: none;
  box-shadow: 0 0 0 2px var(--vp-accent-bg);
}

/* --- Badges: USD pricing / Free shipping / 21+ strip --- */
.trust-badges-row,
.vp-info-strip {
  color: var(--vp-ink-muted);
}
.trust-badges-row .dot,
.vp-info-strip .dot {
  color: var(--vp-accent);
}

/* --- Age / nicotine warning bar --- */
.age-warning-bar,
.nicotine-warning-bar {
  background-color: var(--vp-red-900);
  color: var(--vp-white);
}

/* --- Sale / clearance callouts on homepage --- */
.callout-clearance,
.badge-clearance {
  background-color: var(--vp-primary);
  color: var(--vp-white);
}
.callout-cyan,
.badge-new-arrival {
  background-color: var(--vp-accent);
  color: var(--vp-white);
}