/* ─────────────────────────────────────────
   AMRITA × ELEMENTOR — Compatibility CSS
   assets/css/elementor-compat.css
   
   Ensures Amrita design tokens work inside
   Elementor widgets, and that Elementor's
   default resets don't break our theme.
───────────────────────────────────────── */

/* ── 1. EXPOSE AMRITA TOKENS AS ELEMENTOR GLOBALS ── */
:root {
  /* Map Amrita tokens to Elementor's expected global variable names */
  --e-global-color-primary:        var(--amrita-brown-dark, #4A2E1A);
  --e-global-color-secondary:      var(--amrita-brown-mid,  #A0795A);
  --e-global-color-accent:         var(--amrita-gold,       #BFA06A);
  --e-global-color-text:           var(--amrita-text-dark,  #2E1C0F);
  --e-global-color-secondary-text: var(--amrita-text-light, #A08060);

  --e-global-typography-primary-font-family:   'Cormorant Garamond';
  --e-global-typography-primary-font-weight:   300;
  --e-global-typography-secondary-font-family: 'Jost';
  --e-global-typography-secondary-font-weight: 200;
  --e-global-typography-text-font-family:      'Jost';
  --e-global-typography-text-font-weight:      300;
  --e-global-typography-accent-font-family:    'EB Garamond';
}

/* ── 2. ELEMENTOR SECTION / CONTAINER RESETS ── */
.elementor-section,
.e-container,
.elementor-container {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  color: var(--amrita-text-dark);
}

/* ── 3. ELEMENTOR HEADINGS — apply Cormorant Garamond ── */
.elementor-widget-heading .elementor-heading-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  letter-spacing: 0.02em;
  line-height: 1.1;
}

/* ── 4. ELEMENTOR BUTTONS — inherit Amrita style ── */
.elementor-widget-button .elementor-button {
  border-radius: 40px;
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-size: 10px;
  transition: transform 0.2s, box-shadow 0.3s;
  cursor: none;
}
.elementor-widget-button .elementor-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(74,46,26,0.18);
}
/* Primary button style */
.elementor-widget-button .elementor-button.elementor-button-link,
.elementor-widget-button .elementor-button[class*="elementor-size-"] {
  padding: 14px 32px;
}

/* ── 5. ELEMENTOR IMAGE WIDGETS ── */
.elementor-widget-image img {
  border-radius: inherit;
  display: block;
}
/* Common Amrita rounded image shapes */
.amrita-rounded-top img  { border-radius: 160px 160px 40px 40px; }
.amrita-rounded img      { border-radius: 40px; }
.amrita-circle img       { border-radius: 50%; }
.amrita-pill img         { border-radius: 120px; }

/* ── 6. ELEMENTOR TEXT EDITOR ── */
.elementor-widget-text-editor {
  font-family: 'EB Garamond', serif;
  font-size: 18px;
  line-height: 1.85;
  color: var(--amrita-text-mid);
}

/* ── 7. ELEMENTOR WOO WIDGETS ── */

/* Product Archive / Shop */
.elementor-wc-products 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;
}
.elementor-wc-products ul.products li.product {
  margin: 0 !important;
  width: auto !important;
  background: var(--amrita-cream);
  border-radius: 28px;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.4s;
}
.elementor-wc-products ul.products li.product:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 64px rgba(74,46,26,0.14);
}
.elementor-wc-products ul.products li.product a img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94);
}
.elementor-wc-products ul.products li.product:hover a img {
  transform: scale(1.04);
}
.elementor-wc-products ul.products li.product .woocommerce-loop-product__title {
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 400 !important;
  font-size: 22px !important;
  color: var(--amrita-brown-dark) !important;
  padding: 16px 28px 8px !important;
}
.elementor-wc-products ul.products li.product .price {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  color: var(--amrita-brown-dark);
  padding: 0 28px;
}
.elementor-wc-products ul.products li.product .add_to_cart_button,
.elementor-wc-products ul.products li.product .button {
  display: block;
  margin: 16px 28px 28px;
  padding: 12px 24px;
  background: var(--amrita-brown-dark) !important;
  color: var(--amrita-cream) !important;
  border: none;
  border-radius: 40px;
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  text-align: center;
  transition: background 0.3s;
}
.elementor-wc-products ul.products li.product .add_to_cart_button:hover {
  background: var(--amrita-brown) !important;
}

/* Cart Widget */
.elementor-widget-woocommerce-cart-widget .cart_list li {
  border-bottom: 1px solid rgba(160,121,90,0.12);
  padding: 12px 0;
}

/* Checkout */
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-shipping-fields h3,
.woocommerce-checkout h3 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: 28px;
  color: var(--amrita-brown-dark);
  margin-bottom: 20px;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  border: 1px solid rgba(160,121,90,0.3);
  border-radius: 12px;
  padding: 12px 16px;
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  color: var(--amrita-text-dark);
  background: var(--amrita-white);
  transition: border-color 0.2s;
}
.woocommerce form .form-row input.input-text:focus {
  border-color: var(--amrita-brown-mid);
  outline: none;
  box-shadow: 0 0 0 3px rgba(160,121,90,0.1);
}
.woocommerce #place_order,
.woocommerce button[type="submit"].button {
  background: var(--amrita-brown-dark) !important;
  color: var(--amrita-cream) !important;
  border-radius: 40px !important;
  border: none !important;
  font-family: 'Jost', sans-serif !important;
  font-weight: 300 !important;
  font-size: 10px !important;
  letter-spacing: 0.3em !important;
  text-transform: uppercase !important;
  padding: 16px 40px !important;
  transition: background 0.3s, transform 0.2s !important;
  cursor: none !important;
}
.woocommerce #place_order:hover,
.woocommerce button[type="submit"].button:hover {
  background: var(--amrita-brown) !important;
  transform: translateY(-2px) !important;
}

/* ── 8. ELEMENTOR POPUP OVERLAY ── */
.elementor-popup-modal .dialog-widget-content {
  border-radius: 28px;
  font-family: 'Jost', sans-serif;
}

/* ── 9. SCROLL REVEAL — works inside Elementor sections ── */
.elementor-section .reveal,
.e-container .reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.76,0,0.24,1),
              transform 0.8s cubic-bezier(0.76,0,0.24,1);
}
.elementor-section .reveal.visible,
.e-container .reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── 10. ELEMENTOR EDITOR — hide cursor override in editor ── */
.elementor-editor-active body,
.elementor-editor-active * {
  cursor: default !important;
}
.elementor-editor-active .cursor,
.elementor-editor-active .cursor-follower,
.elementor-editor-active .grain {
  display: none !important;
}

/* ── 11. ELEMENTOR PAGE TEMPLATES ── */

/* Full Width — no sidebar */
.page-template-elementor_canvas header,
.page-template-elementor_canvas footer,
.page-template-elementor_canvas .grain,
.page-template-elementor_canvas .cursor,
.page-template-elementor_canvas .cursor-follower {
  display: none;
}

/* Theme template — show our header/footer */
.page-template-elementor_theme_template header,
.page-template-elementor_theme_template footer {
  display: flex;
}

/* ── 12. AMRITA UTILITY CLASSES FOR ELEMENTOR ──
   Apply these as Custom CSS Classes in Elementor panel
   e.g. Section → Advanced → CSS Classes → "amrita-section-dark" */

.amrita-section-dark { background: var(--amrita-brown-dark) !important; }
.amrita-section-cream { background: var(--amrita-cream) !important; }
.amrita-section-cream-dark { background: var(--amrita-cream-dark) !important; }

.amrita-text-heading {
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 300 !important;
  letter-spacing: 0.02em !important;
}
.amrita-text-label {
  font-size: 9.5px !important;
  font-weight: 200 !important;
  letter-spacing: 0.35em !important;
  text-transform: uppercase !important;
  color: var(--amrita-brown-mid) !important;
}
.amrita-divider-gold {
  border-left: 2px solid var(--amrita-brown-light);
  padding-left: 24px;
}
.amrita-card-product {
  background: var(--amrita-cream);
  border-radius: 28px;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.4s;
}
.amrita-card-product:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 64px rgba(74,46,26,0.14);
}

/* ── 13. RESPONSIVE ADJUSTMENTS ── */
@media (max-width: 1024px) {
  .elementor-wc-products ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 767px) {
  .elementor-wc-products ul.products {
    grid-template-columns: 1fr !important;
  }
  .elementor-editor-active .cursor,
  .elementor-editor-active .cursor-follower {
    display: none !important;
  }
}