/**
 * ECP Global Styles
 * Shared design tokens and reusable components across the entire site.
 * Enqueued site-wide so PDP, header, archive pages, etc. all inherit.
 */

/* ─── DESIGN TOKENS ─── */
:root {
  /* Brand colors */
  --ecp-navy:          #2a3a52;
  --ecp-navy-hover:    #1e2c3d;
  --ecp-navy-light:    #3d4f6a;
  --ecp-success:       #31856c;
  --ecp-gold:          #c2a67d;
  --ecp-gold-light:    #d4bc9a;
  --ecp-terracotta:    #b8472a;

  /* Backgrounds */
  --ecp-bg:            #faf8f5;
  --ecp-bg-warm:       #f5f3ef;
  --ecp-bg-warm-alt:   #f7f6f4;

  /* Text */
  --ecp-text:          #333333;
  --ecp-text-mid:      #555555;
  --ecp-text-light:    #666666;
  --ecp-text-muted:    #888888;
  --ecp-text-faint:    #999999;

  /* Borders */
  --ecp-border:        #e8e8e8;
  --ecp-border-light:  #dddddd;
  --ecp-border-warm:   #e8e2da;

  /* Typography */
  --ecp-font-display:  'Merriweather', Georgia, 'Times New Roman', serif;
  --ecp-font-body:     'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Button */
  --ecp-btn-radius:    6px;
  --ecp-btn-py:        14px;
  --ecp-btn-px:        28px;
}


/* ─── GLOBAL BUTTON ───
   Single source of truth. Use class="ecp-btn" on <a> or <button>.
   !important beats Elementor / theme link color rules so CTAs stay
   white-on-navy everywhere without per-button overrides. */

.ecp-btn,
a.ecp-btn,
button.ecp-btn,
.ecp-btn:visited {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  background: var(--ecp-navy) !important;
  background-color: var(--ecp-navy) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--ecp-btn-radius) !important;
  padding: var(--ecp-btn-py) var(--ecp-btn-px) !important;
  font-family: var(--ecp-font-body) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px;
  cursor: pointer;
  text-decoration: none !important;
  text-align: center;
  line-height: 1.4;
  box-shadow: none !important;
  transition: background 0.15s, background-color 0.15s, color 0.15s;
}
.ecp-btn:hover,
.ecp-btn:focus,
a.ecp-btn:hover,
a.ecp-btn:focus,
button.ecp-btn:hover,
button.ecp-btn:focus,
.ecp-btn:visited:hover {
  background: var(--ecp-navy-hover) !important;
  background-color: var(--ecp-navy-hover) !important;
  color: #fff !important;
  text-decoration: none !important;
}

/* Full-width variant */
.ecp-btn--full {
  display: flex !important;
  width: 100%;
}

/* Loading state */
.ecp-btn.is-loading {
  opacity: 0.6;
  cursor: wait;
  pointer-events: none;
}

/* Success state */
.ecp-btn.is-success {
  background: var(--ecp-success) !important;
  background-color: var(--ecp-success) !important;
  color: #fff !important;
}

/* Secondary: outlined */
.ecp-btn--outline,
a.ecp-btn--outline {
  background: transparent !important;
  background-color: transparent !important;
  border: 1.5px solid var(--ecp-border-light) !important;
  color: var(--ecp-navy) !important;
}
.ecp-btn--outline:hover,
a.ecp-btn--outline:hover {
  border-color: var(--ecp-navy) !important;
  background: transparent !important;
  color: var(--ecp-navy) !important;
}


/* ─── WPVibe preview Tailwind collision ───
   WPVibe injects Tailwind utilities including `.columns-4 { columns: 4 }`.
   WooCommerce uses the same class for product-grid column COUNT, which then
   enables CSS multi-column fragmentation and destroys archive grids. */
.woocommerce.columns-4,
.woocommerce.columns-3,
.woocommerce.columns-2,
.woocommerce.columns-5,
.woocommerce.columns-6,
ul.products.columns-4,
ul.products.columns-3,
ul.products.columns-2,
ul.products.columns-5,
ul.products.columns-6 {
  columns: auto !important;
  column-count: auto !important;
  column-width: auto !important;
}


/* ==========================================================================
   Homepage utility / info band (Contact · Shipping · FAQ · Wholesale)
   Elementor hide_desktop/tablet/mobile classes leave gaps at laptop,
   mobile_extra, tablet_extra, and widescreen breakpoints in custom-frontend.css.
   Hard-hide for all viewports so guests never see the band under the blog.
   ========================================================================== */
.elementor-element-54a4860,
.elementor-element.elementor-element-54a4860 {
  display: none !important;
}