/* Extensiv Alternative (post 2909) — audit fixes vs production.
   Loads after style.css (original build's [data-id] rules), so these
   !important overrides win on cascade order. Only the deltas are listed
   here; unchanged rules stay in style.css. */

/* ============ HERO (21396c8) ============
   Same recipe bug as Compare hub (2902): missing owl-head-bg background
   image, min-height, non-responsive heading/paragraph sizes, paragraph
   opacity, non-responsive padding, and the blob hidden below 1024px. */
[data-id="21396c8"]{
  background-image:url('../images/page-banner-owl.png') !important;
  background-repeat:no-repeat !important;
  background-position:0px 50% !important;
  background-size:auto !important;
  min-height:350px !important;
}
/* "Which WMS Is Actually Built for Your Operation?" — text-2xl lg:text-4xl = 24px/36px, was flat 32px */
[data-id="7cbcf3d"] .elementor-heading-title{ font-size:24px !important; }
@media (min-width:1024px){ [data-id="7cbcf3d"] .elementor-heading-title{ font-size:36px !important; line-height:40px !important;} }
/* Hero paragraph — text-white/80 never compiled on production (renders solid white); text-base lg:text-lg = 16px/18px, was flat 18px */
[data-id="595ba2d"] p{ color:#FFFFFF !important; font-size:16px !important; }
@media (min-width:1024px){ [data-id="595ba2d"] p{ font-size:18px !important; } }
/* Horizontal padding derives from .container (80px default / 24px at max-width:640px, sm breakpoint) — was flat 80px */
@media (max-width:640px){ [data-id="21396c8"]{ padding:32px 24px !important; } }
[data-id="21396c8"]::after{
  display:block !important; width:320px !important; height:208px !important; bottom:40px !important;
}
@media (min-width:768px){ [data-id="21396c8"]::after{ width:448px !important; } }
@media (min-width:1024px){
  [data-id="21396c8"]::after{ height:256px !important; bottom:auto !important; top:50% !important; transform:translateY(-50%) !important; }
}

/* Hero image (WizeFulfill vs Extensiv comparison) — production's max-h-72 = 288px
   applies to the <img> itself; the build put max-height on the wrapper only,
   so the <img> rendered full-size and pushed the text column to ~20% width. */
[data-id="9d6c3a9"] img{max-height:288px !important;width:auto !important;object-fit:contain !important;}
[data-id="9d6c3a9"]{flex:0 1 auto !important;overflow:hidden !important;}

/* ============ SECTION 2 — INTRO (a554bc6) ============ */
/* "Your WMS should work..." — text-xl lg:text-4xl = 20px/36px, was flat 30px */
[data-id="7fafb37"] .elementor-heading-title{ font-size:20px !important; line-height:28px !important;}
@media (min-width:1024px){ [data-id="7fafb37"] .elementor-heading-title{ font-size:36px !important; line-height:40px !important;} }
/* Buttons here use production's button-primary/-outline (CORAL), not the NAVY
   ctaButtons(false) default the build applied; base .button padding is
   12px 16px unconditionally, not 8px 12px. */
[data-id="9ab644e"] .elementor-button{ background:#E76152 !important; color:#FFFFFF !important; border-color:#E76152 !important; padding:12px 16px !important; }
[data-id="180f597"] .elementor-button{ color:#E76152 !important; border-color:#E76152 !important; padding:12px 16px !important; }

/* ============ SECTION 3 — WHERE THEY DIFFER (0e84c17) ============ */
/* "Where WizeFulfill and Extensiv Actually Differ" — text-xl lg:text-4xl = 20/36, was flat 30 */
[data-id="fc52b15"] .elementor-heading-title{ font-size:20px !important; line-height:28px !important;}
@media (min-width:1024px){ [data-id="fc52b15"] .elementor-heading-title{ font-size:36px !important; line-height:40px !important;} }
/* Row titles ("Workflow Customization" etc.) — text-base lg:text-lg = 16/18, was flat 18 */
[data-id="48d9923"] .elementor-heading-title,
[data-id="c2154ee"] .elementor-heading-title,
[data-id="1381f0b"] .elementor-heading-title,
[data-id="61582f0"] .elementor-heading-title,
[data-id="621dbe3"] .elementor-heading-title,
[data-id="77b80df"] .elementor-heading-title{ font-size:16px !important; }
@media (min-width:1024px){
  [data-id="48d9923"] .elementor-heading-title,
  [data-id="c2154ee"] .elementor-heading-title,
  [data-id="1381f0b"] .elementor-heading-title,
  [data-id="61582f0"] .elementor-heading-title,
  [data-id="621dbe3"] .elementor-heading-title,
  [data-id="77b80df"] .elementor-heading-title{ font-size:18px !important; line-height:28px !important;}
}
/* Numbered badge circles (01-06) — production uses #E8614A, not the sitewide CORAL (#E76152) */
[data-id="cc00cba"] p, [data-id="14a481f"] p, [data-id="289f960"] p,
[data-id="3b1b855"] p, [data-id="05afeff"] p, [data-id="a1ae1fa"] p{ background-color:#E8614A !important; }

/* ============ SECTION 4 — TABLE (8ff3e69) ============ */
/* "Quick-Decision Comparison" — text-xl lg:text-4xl = 20/36, was flat 30 */
[data-id="63a74b9"] .elementor-heading-title{ font-size:20px !important; line-height:28px !important;}
@media (min-width:1024px){ [data-id="63a74b9"] .elementor-heading-title{ font-size:36px !important; line-height:40px !important;} }

/* ============ SECTION 5 — RIGHT FIT (ba4aa70) ============ */
/* "Choosing the Right Fit..." — text-2xl lg:text-4xl = 24/36, was flat 32 */
[data-id="11ed173"] .elementor-heading-title{ font-size:24px !important; }
@media (min-width:1024px){ [data-id="11ed173"] .elementor-heading-title{ font-size:36px !important; line-height:40px !important;} }
/* Section background — production uses #E8614A here, not sitewide CORAL */
[data-id="ba4aa70"]{ background-color:#E8614A !important; }
/* Checklist card headings — text-lg lg:text-xl = 18/20, was flat 20 */
[data-id="c805b43"] .elementor-heading-title,
[data-id="0d8efdc"] .elementor-heading-title{ font-size:18px !important; line-height:28px !important;}
@media (min-width:1024px){
  [data-id="c805b43"] .elementor-heading-title,
  [data-id="0d8efdc"] .elementor-heading-title{ font-size:20px !important; line-height:28px !important;}
}

/* Checklist icon-lists (3e4036e wize / e9e1265 extensiv) — converted from raw
   html widgets to native icon-list widgets for real per-item editability.
   Values below reproduce the original inline-style look exactly (confirmed
   via getComputedStyle: 14px/20px text flat at all breakpoints — the
   text-sm lg:text-base class never compiled a responsive rule). */
[data-id="3e4036e"] .elementor-icon-list-icon i,
[data-id="3e4036e"] .elementor-icon-list-icon svg{ color:#E8614A !important; fill:#E8614A !important; }
[data-id="e9e1265"] .elementor-icon-list-icon i,
[data-id="e9e1265"] .elementor-icon-list-icon svg{ color:#FF65C2 !important; fill:#FF65C2 !important; }
[data-id="3e4036e"] .elementor-icon-list-text,
[data-id="e9e1265"] .elementor-icon-list-text{ color:#1C3343 !important; font-size:14px !important; line-height:20px !important; }
[data-id="3e4036e"] .elementor-icon-list-item,
[data-id="e9e1265"] .elementor-icon-list-item{ align-items:flex-start !important; }
[data-id="3e4036e"] .elementor-icon-list-icon,
[data-id="e9e1265"] .elementor-icon-list-icon{ padding-inline-end:12px !important; }
[data-id="3e4036e"] .elementor-icon-list-icon i,
[data-id="e9e1265"] .elementor-icon-list-icon i{ font-size:14px !important; width:auto !important; }
[data-id="3e4036e"] .elementor-icon-list-icon svg,
[data-id="e9e1265"] .elementor-icon-list-icon svg{ height:14px !important; width:14px !important; margin-top:3px !important; }
[data-id="3e4036e"] .elementor-icon-list-items .elementor-icon-list-item:not(:last-child),
[data-id="e9e1265"] .elementor-icon-list-items .elementor-icon-list-item:not(:last-child){ margin-block-end:16px !important; }

/* ============ SECTION 6 — FAQ (88889e0 / accordion b3d6902) ============ */
/* "Frequently Asked Questions" — text-2xl lg:text-3xl = 24/30, was flat 30 */
[data-id="c8c9a34"] .elementor-heading-title{ font-size:24px !important; }
@media (min-width:1024px){ [data-id="c8c9a34"] .elementor-heading-title{ font-size:30px !important; line-height:36px !important;} }

/* Accordion behavior fixes:
   1) Elementor's accordion JS auto-expands tab 1 on every page load
      (base-tabs.js autoExpand:true) — production's custom JS accordion
      starts fully closed. Force closed by default; only show the item
      Elementor has actually marked .elementor-active (user-clicked). */
[data-id="b3d6902"] .elementor-tab-content{ display:none !important; }
[data-id="b3d6902"] .elementor-tab-content.elementor-active{ display:block !important; }
/* 2) Active tab should invert to dark navy bg / white text, matching
   production's toggleFaq() (currently no active-state styling at all). */
[data-id="b3d6902"] .elementor-tab-title{ border-radius:12px !important; }
[data-id="b3d6902"] .elementor-tab-title.elementor-active{
  background:#1a2e44 !important; color:#ffffff !important; border-radius:12px 12px 0 0 !important;
}
/* Chevron flips down->up on open via Elementor's native icon-swap (closed/
   opened icon classes), same visual cue as production's rotating SVG chevron.
   (A transform:rotate() approach was tried first but never took effect in
   this environment — icon-swap is the native, framework-supported route.) */
/* 3) "WizeFulfill integrations page" link in FAQ #3 was stored with the
   sitewide CORAL (#E76152); production's actual inline style/computed color
   for this specific link is #E8614A. */
[data-id="b3d6902"] .elementor-tab-content a{ color:#E8614A !important; }

/* ============ CLOSING CTA (4017761) ============ */
/* Same .container-derived responsive padding fix as Compare hub: 80px default / 24px at max-width:640px, was flat 40px */
[data-id="4017761"]{ padding:64px 80px !important; }
@media (max-width:640px){ [data-id="4017761"]{ padding:64px 24px !important; } }