/* Integrations (post 270) — 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.
   NOTE: verified via curl fetches + direct MySQL reads + static reading of
   compiled style.css / Elementor plugin CSS / script.min.js — NOT via live
   browser click-through (tooling was restricted to non-browser methods for
   this page). See final report for what that means for confidence level. */

/* ============ HERO (37dc0fd) ============ */
/* Missing owl-head-bg background image + min-height, same as other pages. */
[data-id="37dc0fd"]{
  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;
}
/* Horizontal padding derives from .container (80px default / 24px at max-width:640px) — was flat 80px */
@media (max-width:640px){ [data-id="37dc0fd"]{ padding:32px 24px !important; } }
/* H1 uses a flat (non-responsive) text-4xl class = 36px/40px line-height on
   production at every breakpoint, not the 32px/38px the build used. */
[data-id="7a234f1"] .elementor-heading-title{ font-size:36px !important; line-height:40px !important; }

/* Decorative blob: production's span is "block" (always visible) with
   different position/size per breakpoint (confirmed via compiled Tailwind
   classes: left-1/2 + top-[60%] + h-52 by default, md:left-[70%] +
   md:top-1/2 at >=768px, lg:-translate-y-1/2 + lg:h-64 at >=1024px) — the
   build hid it entirely below 1024px, same bug pattern as Compare/Extensiv. */
[data-id="37dc0fd"]::after{
  display:block !important; left:50% !important; top:60% !important; height:208px !important;
}
@media (min-width:768px){
  [data-id="37dc0fd"]::after{ left:70% !important; top:50% !important; }
}
@media (min-width:1024px){
  [data-id="37dc0fd"]::after{ height:256px !important; transform:translateY(-50%) !important; }
}

/* ============ FILTER TABS (86a979e row) ============
   Bug: the button widgets' static "pill" look (transparent bg, navy
   border+text, radius, padding, font) was applied to the WRAPPER div
   ([data-id=X] with an empty selector) instead of the inner .elementor-button
   anchor that Elementor/the adapter script actually render/manipulate.
   Since post-270.css's sitewide default is
   `.elementor-widget-button .elementor-button{background-color:var(--e-global-color-accent)}`
   (the kit's default "Accent" global color, #61CE70 — a bright green that
   was never customized away from Elementor's factory default), the actual
   clickable surface was rendering as an unstyled green box with Elementor's
   default 3px radius / 12px 24px padding / 15px font, nested awkwardly
   inside the intended navy-bordered pill. Moving the styling onto
   .elementor-button (and neutralizing the wrapper's own box) fixes the
   default appearance.
   IMPORTANT: `background`/`color` on .elementor-button are deliberately NOT
   !important, and instead win via a higher-specificity compound selector
   ([data-id=X].elementor-widget-button, 3 selector components vs
   post-270.css's 2). The adapter script sets the active/inactive state via
   plain (non-important) inline style.background/color on this same element
   — an !important rule here would permanently block that toggle (same class
   of bug as the EDI button's display, above; caught the same way, via static
   reasoning since this page's interactivity could not be live-clicked this
   round). Every OTHER property here is never touched by JS, so !important
   is safe (and needed) for those to beat Elementor's own widget defaults.
   Confirmed via static reading of post-270.css + style.css + script text;
   not click-tested live per the no-browser-tools constraint for this page. */
[data-id="ff1f94f"], [data-id="ba3552d"], [data-id="980255b"],
[data-id="4ece58d"], [data-id="bcba16c"], [data-id="2ac48da"], [data-id="5a139f9"]{
  background:transparent !important; border:none !important; padding:0 !important;
}
[data-id="ff1f94f"].elementor-widget-button .elementor-button,
[data-id="ba3552d"].elementor-widget-button .elementor-button,
[data-id="980255b"].elementor-widget-button .elementor-button,
[data-id="4ece58d"].elementor-widget-button .elementor-button,
[data-id="bcba16c"].elementor-widget-button .elementor-button,
[data-id="2ac48da"].elementor-widget-button .elementor-button,
[data-id="5a139f9"].elementor-widget-button .elementor-button{
  background:transparent; color:#1C3343; /* no !important — see note above */
}
[data-id="ff1f94f"] .elementor-button, [data-id="ba3552d"] .elementor-button,
[data-id="980255b"] .elementor-button, [data-id="4ece58d"] .elementor-button,
[data-id="bcba16c"] .elementor-button, [data-id="2ac48da"] .elementor-button,
[data-id="5a139f9"] .elementor-button{
  border:1px solid #1C3343 !important;
  border-radius:6px !important; padding:8px 16px !important; font-weight:600 !important;
  font-size:14px !important; cursor:pointer !important; line-height:normal !important; display:inline-block !important;
}

/* ============ "Many Others" / EDI Connections trigger (5f7a8da / b283d82) ============
   Added: production reveals a "Many Others" button (data-target=
   #edi-connections-modal) only while the Retail EDI filter is active; the
   migrated build never created this element at all, leaving the EDI
   Connections modal (one of the two approved preserved-html-widget
   exceptions) with no way to open it. Widget + adapter-script wiring added
   via direct _elementor_data patch; this is just its visual styling
   (button-outline equivalent: transparent bg, navy border+text). */
/* Hidden by default (!important is safe here since Elementor's own
   .e-flexbox-base{display:flex} is non-important and loads AFTER this file
   — without !important it would win the tie by load order and the button
   would flash visible before JS runs). The adapter script toggles a class
   (edi-more-visible), not inline style, specifically so this !important
   default doesn't fight the show/hide behavior the way an inline-style
   toggle would have (same class of bug as the filter-button background
   above, avoided the same way: important vs. non-important never mixes
   with a property the JS also sets directly on that element). */
[data-id="5f7a8da"]{ display:none !important; justify-content:center !important; width:100% !important; margin-top:64px !important; }
[data-id="5f7a8da"].edi-more-visible{ display:flex !important; }
[data-id="b283d82"] .elementor-button{
  background:transparent !important; border:1px solid #1C3343 !important; color:#1C3343 !important;
  border-radius:8px !important; padding:12px 16px !important; font-size:14px !important; font-weight:500 !important;
}

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

/* ── Visual-parity vs production — Integrations ── */

/* Filter tabs: plain text labels, active tab gets coral text + underline.
   Adapter script now sets data-state="active" on the wrapper instead of
   inline styles, so CSS can target both states cleanly. */
[data-id="ff1f94f"] .elementor-button,[data-id="ba3552d"] .elementor-button,[data-id="980255b"] .elementor-button,[data-id="4ece58d"] .elementor-button,[data-id="bcba16c"] .elementor-button,[data-id="2ac48da"] .elementor-button,[data-id="5a139f9"] .elementor-button{color:#1A1A1A !important;font-size:16px !important;font-weight:600 !important;line-height:28px !important;border:none !important;background:transparent !important;padding:4px 0 !important;}
[data-id="ff1f94f"][data-state="active"] .elementor-button,[data-id="ba3552d"][data-state="active"] .elementor-button,[data-id="980255b"][data-state="active"] .elementor-button,[data-id="4ece58d"][data-state="active"] .elementor-button,[data-id="bcba16c"][data-state="active"] .elementor-button,[data-id="2ac48da"][data-state="active"] .elementor-button,[data-id="5a139f9"][data-state="active"] .elementor-button{color:#E76152 !important;}
[data-id="ff1f94f"][data-state="active"],[data-id="ba3552d"][data-state="active"],[data-id="980255b"][data-state="active"],[data-id="4ece58d"][data-state="active"],[data-id="bcba16c"][data-state="active"],[data-id="2ac48da"][data-state="active"],[data-id="5a139f9"][data-state="active"]{border-bottom:3px solid #E76152 !important;position:relative !important;padding-top:28px !important;}
[data-id="ff1f94f"][data-state="active"]::before,[data-id="ba3552d"][data-state="active"]::before,[data-id="980255b"][data-state="active"]::before,[data-id="4ece58d"][data-state="active"]::before,[data-id="bcba16c"][data-state="active"]::before,[data-id="2ac48da"][data-state="active"]::before,[data-id="5a139f9"][data-state="active"]::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:32px;height:20px;background-image:url("data:image/svg+xml,%3Csvg width='32' height='20' viewBox='0 0 32 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.888.256C11.248 6.136 20.461 6.185 29.902.224c0 3.443.032 6.432-.017 9.437-.016 1.397.195 2.631.891 3.914 1.798 3.265.988 7.309-1.733 9.892-2.671 2.534-6.752 2.972-9.974 1.088-.405-.244-.794-.487-1.263-.78-.648 1.121-1.247 2.16-1.943 3.379-.697-1.235-1.296-2.323-1.976-3.525-2.3 1.624-4.664 2.404-7.368 1.754C1.176 24.084-1.431 18.253 1.143 13.364c.437-.845.697-1.868.713-2.826.097-3.314.032-6.627.032-10.282zm21.569 10.72c-3.465-.032-6.396 2.826-6.445 6.27-.048 3.443 2.834 6.432 6.267 6.464 3.433.049 6.412-2.842 6.477-6.286.065-3.378-2.898-6.416-6.299-6.448zM8.398 23.597c3.497-.016 6.218-2.729 6.25-6.221.016-3.492-2.866-6.4-6.315-6.367-3.336.032-6.202 2.972-6.202 6.367 0 3.41 2.85 6.237 6.267 6.221z' fill='url(%23a)'/%3E%3Cpath d='M13.79 17.376c0 2.957-2.461 5.425-5.408 5.41-3.012-.017-5.425-2.453-5.425-5.491.016-2.972 2.445-5.376 5.425-5.376 3.028.016 5.424 2.436 5.408 5.457zM8.398 16.922c1.311 0 2.332-1.024 2.332-2.323 0-1.348-1.053-2.404-2.397-2.388-1.247.016-2.283 1.088-2.283 2.355-.017 1.332 1.003 2.355 2.348 2.356z' fill='%23153243'/%3E%3Cpath d='M28.8 17.376c0 2.957-2.46 5.425-5.408 5.41-3.011-.017-5.424-2.453-5.424-5.491.016-2.972 2.445-5.376 5.424-5.376 3.012.016 5.409 2.436 5.409 5.457zm-5.408-.454c1.312 0 2.332-1.024 2.332-2.323 0-1.348-1.053-2.404-2.397-2.388-1.247.016-2.283 1.088-2.283 2.355-.016 1.332 1.02 2.356 2.348 2.356z' fill='%23153243'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='2.916' y1='.86' x2='26.83' y2='20.265' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23153243'/%3E%3Cstop offset='.1' stop-color='%23213544'/%3E%3Cstop offset='.282' stop-color='%23413C46'/%3E%3Cstop offset='.524' stop-color='%2376484A'/%3E%3Cstop offset='.815' stop-color='%23BD584F'/%3E%3Cstop offset='1' stop-color='%23EE6352'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");background-repeat:no-repeat;background-size:contain;background-position:center;}
[data-id="86a979e"]{border-bottom:1px solid #e5e7eb !important;padding-bottom:8px !important;justify-content:space-between !important;gap:0 !important;}

/* Logo grid: production has visible gray borders, 6-per-row on desktop.
   Use container-child selector to avoid repeating for each logo widget. */
[data-id="605dcc1"] > .elementor-widget-image{border:2px solid #e5e7eb !important;border-radius:8px !important;padding:16px 24px !important;transition:border-color .2s !important;min-height:112px !important;display:flex !important;align-items:center !important;justify-content:center !important;}
[data-id="605dcc1"] > .elementor-widget-image:hover{border-color:#E76152 !important;}
@media (min-width:1024px){
[data-id="605dcc1"] > .elementor-widget-image{width:calc(16.6667% - 20px) !important;flex:0 0 auto !important;}
}
@media (min-width:640px) and (max-width:1023px){
[data-id="605dcc1"] > .elementor-widget-image{width:calc(25% - 18px) !important;flex:0 0 auto !important;}
}
@media (max-width:639px){
[data-id="605dcc1"] > .elementor-widget-image{width:calc(50% - 12px) !important;flex:0 0 auto !important;}
}
[data-id="605dcc1"] > .elementor-widget-image img{max-height:48px !important;width:auto !important;object-fit:contain !important;}

/* Bottom CTA: heading+text on left, buttons on right (desktop) */
[data-id="63bb1d7"] .elementor-heading-title{line-height:32px !important;}
@media (min-width:1024px){
[data-id="7779592"]{display:grid !important;grid-template-columns:1fr auto !important;align-items:center !important;gap:16px !important;}
[data-id="63bb1d7"]{grid-column:1 !important;}
[data-id="6067de1"]{grid-column:1 !important;}
[data-id="9c614ea"]{grid-column:2 !important;grid-row:1/3 !important;align-self:center !important;}
}