/**
 * InnoSewa – Elementor Pro Compatibility & Overrides
 *
 * IMPORTANT: Do NOT add !important to typography/color properties here.
 * Elementor Pro generates per-widget CSS (.elementor-element-XXXX rules)
 * that must be able to override theme defaults. Use !important only for
 * structural/layout rules (display, float, grid, positioning).
 */

/* ============================================================
   ELEMENTOR CONTAINER MAX-WIDTH
   ============================================================ */
.elementor-section.elementor-section-boxed > .elementor-container,
.e-con.e-con-boxed > .e-con-inner {
  max-width: var(--container-max) !important;
}

/* ============================================================
   ELEMENTOR GLOBAL TYPOGRAPHY — fallback defaults only, no !important
   Elementor Pro's per-widget CSS will override these freely.
   ============================================================ */
.elementor-widget-heading .elementor-heading-title {
  font-family: var(--font-display);
}

.elementor-widget-text-editor {
  font-family: var(--font-body);
}

/* ============================================================
   ELEMENTOR BUTTONS — fallback defaults, no !important on design props
   ============================================================ */
.elementor-button {
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: .04em;
  transition: all var(--transition);
}

.elementor-button-primary,
.elementor-button.elementor-size-md {
  background-color: var(--gold);
  color: var(--tobacco);
  border: 2px solid var(--gold);
}

.elementor-button-primary:hover {
  background-color: var(--honey);
  border-color: var(--honey);
  color: var(--tobacco);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* ============================================================
   ELEMENTOR WooCommerce PRODUCTS — structural layout only with !important
   (overrides WooCommerce's floats/widths — purely structural, not design)
   ============================================================ */
.elementor-widget-woocommerce-products .products,
.elementor-widget-archive-products .products,
.elementor-widget-woocommerce-archive-products .products,
.elementor ul.products,
.elementor-page ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 28px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
  clear: both !important;
}

.elementor-widget-woocommerce-products .products li.product,
.elementor-widget-archive-products .products li.product,
.elementor-widget-woocommerce-archive-products .products li.product,
.elementor ul.products li.product,
.elementor-page ul.products li.product {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid rgba(200,144,42,.12);
  background: var(--white);
  transition: all var(--transition);
  display: flex !important;
  flex-direction: column !important;
}

.elementor-widget-woocommerce-products .products li.product:hover,
.elementor-widget-archive-products .products li.product:hover,
.elementor-page ul.products li.product:hover,
.elementor ul.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
  border-color: rgba(200,144,42,.3);
}

@media (max-width: 900px) {
  .elementor ul.products,
  .elementor-page ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 540px) {
  .elementor ul.products,
  .elementor-page ul.products { grid-template-columns: 1fr !important; }
}

/* ============================================================
   ELEMENTOR FORM WIDGET — structural border/radius with !important,
   design props (color, font) without !important
   ============================================================ */
.elementor-field-group .elementor-field {
  border: 1.5px solid var(--smoke) !important;
  border-radius: var(--r-md) !important;
  font-family: var(--font-body);
  color: var(--espresso);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.elementor-field-group .elementor-field:focus {
  border-color: var(--gold) !important;
  box-shadow: var(--shadow-gold) !important;
  outline: none !important;
}

.elementor-button[type="submit"] {
  background-color: var(--gold);
  color: var(--tobacco);
}

/* ============================================================
   ELEMENTOR IMAGE BOX — fallback defaults only
   ============================================================ */
.elementor-image-box-title {
  font-family: var(--font-display);
  color: var(--tobacco);
}

.elementor-image-box-description {
  font-family: var(--font-body);
  color: var(--ash);
}

/* ============================================================
   ELEMENTOR ICON LIST — fallback defaults only
   ============================================================ */
.elementor-icon-list-icon svg { fill: var(--gold); }
.elementor-icon-list-icon i { color: var(--gold); }

/* ============================================================
   ELEMENTOR PROGRESS BAR (Strength rating) — structural with !important
   ============================================================ */
.elementor-progress-wrapper {
  border-radius: var(--r-pill) !important;
  overflow: hidden !important;
  background: var(--smoke) !important;
}

.elementor-progress-bar {
  background: linear-gradient(90deg, var(--caramel), var(--honey)) !important;
  border-radius: var(--r-pill) !important;
}

/* ============================================================
   ELEMENTOR ACCORDION / TOGGLE — fallback defaults only
   ============================================================ */
.elementor-accordion .elementor-tab-title {
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--tobacco);
  border-bottom: 1px solid var(--smoke) !important;
  padding: var(--sp-md);
  transition: all var(--transition);
}

.elementor-accordion .elementor-tab-title.elementor-active {
  color: var(--gold);
  background: rgba(200,144,42,.05);
}

/* ============================================================
   ELEMENTOR SECTION / COLUMN BACKGROUNDS — custom helper classes
   Users apply these manually via Elementor CSS Classes field.
   !important is appropriate here as they are intentional overrides.
   ============================================================ */
.elementor-section.innosewa-bg-tobacco { background: var(--tobacco) !important; }
.elementor-section.innosewa-bg-parchment { background: var(--parchment) !important; }
.elementor-section.innosewa-bg-cream { background: var(--cream) !important; }

/* ============================================================
   ELEMENTOR THEME BUILDER – HEADER/FOOTER
   ============================================================ */
.elementor-location-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
}

/* ============================================================
   ELEMENTOR POPUP
   ============================================================ */
.elementor-popup-modal .dialog-widget-content {
  border-radius: var(--r-xl) !important;
  border: 1px solid rgba(200,144,42,.2) !important;
  overflow: hidden !important;
}

/* ============================================================
   ELEMENTOR GALLERY
   ============================================================ */
.elementor-gallery-item__overlay {
  background: rgba(28,18,8,.7);
}

/* ============================================================
   INNOSEWA CUSTOM ELEMENTOR CLASSES
   Apply these in Elementor's "CSS Classes" field on any widget/section.
   !important is intentional — these are explicit user-applied overrides.
   ============================================================ */
/* .btn-primary-el – gold CTA button */
.btn-primary-el .elementor-button {
  background: var(--gold) !important;
  color: var(--tobacco) !important;
  border: none !important;
  font-size: .9rem !important;
}

/* .section-dark-el – dark tobacco background section */
.section-dark-el {
  background: var(--tobacco) !important;
  color: var(--cream) !important;
}

/* .card-el – standard card container */
.card-el {
  background: var(--white) !important;
  border-radius: var(--r-xl) !important;
  padding: var(--sp-xl) !important;
  border: 1px solid rgba(200,144,42,.12) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all var(--transition) !important;
}
.card-el:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-xl) !important;
}

/* .gold-badge-el – floating gold badge */
.gold-badge-el {
  background: var(--gold) !important;
  color: var(--tobacco) !important;
  border-radius: var(--r-lg) !important;
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
}