/* ==========================================================================
   AALANKAAR STUDIOS — 08 · ELEMENTOR COMPATIBILITY
   The theme owns the design system; Elementor owns the layout of any page
   built with it. This file keeps the two out of each other's way.
   ========================================================================== */

/* --------------------------------------------------------------------------
   CONTAINER WIDTHS
   Elementor's own boxed width is respected, but a container dropped into a
   theme template still lines up with the theme grid.
   -------------------------------------------------------------------------- */

.elementor-section.elementor-section-boxed > .elementor-container,
.e-con.e-con-boxed > .e-con-inner{
  max-width:var(--maxw);
  padding-inline:var(--gutter);
}

/* Full-width sections must escape any theme padding they inherit. */
.elementor-section.elementor-section-full_width > .elementor-container{ max-width:100%; }

/* The theme's page wrapper adds no padding when Elementor is driving. */
.elementor-page .site-main,
.elementor-page .page-body{ padding:0; }

/* --------------------------------------------------------------------------
   TYPOGRAPHY INHERITANCE
   Elementor headings and text default to the theme's families so an author
   who changes nothing still gets an on-brand page.
   -------------------------------------------------------------------------- */

.elementor-widget-heading .elementor-heading-title{
  font-family:var(--font-display);
  font-weight:500;
  line-height:1.1;
  letter-spacing:var(--ls-display);
  color:var(--fg);
}
.elementor-widget-text-editor,
.elementor-widget-theme-post-content{
  font-family:var(--font-sans);
  line-height:var(--lh-loose);
  color:var(--fg-muted);
}

/* Elementor buttons adopt the theme button, including the wipe fill. */
.elementor-button{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--s-2);
  min-height:50px;
  padding:var(--s-3) var(--s-5);
  background-color:var(--c-ink);
  color:var(--c-ivory);
  font-family:var(--font-sans);
  font-size:var(--fs-label);
  font-weight:600;
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  border:1px solid var(--c-ink);
  border-radius:var(--radius-sm);
  overflow:hidden;
  isolation:isolate;
  transition:color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.elementor-button::before{
  content:"";
  position:absolute; inset:0;
  background:var(--c-vermilion);
  transform:translateY(101%);
  transition:transform var(--dur-3) var(--ease);
  z-index:-1;
}
.elementor-button:hover::before{ transform:translateY(0); }
.elementor-button:hover{ color:var(--c-ivory); border-color:var(--c-vermilion); }
/* An author who sets their own background in the panel wins. */
.elementor-button[style*="background"]::before{ display:none; }

/* --------------------------------------------------------------------------
   THEME BUILDER PARTS
   When Elementor Pro supplies the header or footer, the theme's own chrome
   is suppressed — see aalankaar_has_elementor_location() — but a Pro header
   still needs the sticky/blur behaviour to look right.
   -------------------------------------------------------------------------- */

.elementor-location-header{
  position:relative;
  z-index:var(--z-nav);
}
body.has-elementor-header .nav{ display:none; }
body.has-elementor-footer .footer{ display:none; }

/* --------------------------------------------------------------------------
   THE EDITOR ITSELF
   Inside the editor iframe the loader, cursor and page-transition veil are
   pure obstruction. Remove them and show all motion at rest.
   -------------------------------------------------------------------------- */

body.elementor-editor-active .loader,
body.elementor-editor-active .veil,
body.elementor-editor-active .cursor-layer,
body.elementor-editor-active .to-top{ display:none !important; }

body.elementor-editor-active,
body.elementor-editor-active *{ cursor:auto !important; }

/* Elementor's own overlays must clear the theme's fixed chrome. */
.elementor-editor-active .nav{ position:relative; }

/* --------------------------------------------------------------------------
   THEME WIDGETS
   Styling for the custom widgets registered in inc/elementor/widgets/.
   Each widget reuses the theme components above, so only the wrapper and
   the panel-driven variations live here.
   -------------------------------------------------------------------------- */

/* Product grid widget.
   The theme's own breakpoints override ul.products' grid-template-columns
   outright, which would otherwise beat the widget's responsive column
   control (that control only sets --shop-cols). Handing the property back
   to the custom property here, at a higher specificity, lets the author's
   per-device choice win inside the widget. */
.alk-widget-products ul.products,
.elementor-widget-aalankaar-products ul.products{
  grid-template-columns:repeat(var(--shop-cols, 3), minmax(0,1fr));
}

/* Section heading widget */
.alk-widget-heading .sec-head{ margin-bottom:0; }

/* Marquee widget */
.alk-widget-marquee{ overflow:hidden; }

/* Split feature widget */
.alk-widget-split .split-feature{ align-items:var(--alk-align, center); }

/* Collection index widget */
.alk-widget-collections .col-row:first-child{ border-top:1px solid var(--rule); }

/* Hero widget inside Elementor is never allowed to pull up under the nav —
   the author positions it themselves. */
.alk-widget-hero .hero{ margin-top:0; padding-top:var(--s-8); }