.elementor-1074 .elementor-element.elementor-element-4bbdf3d{--display:flex;}/* Start custom CSS *//* ============================================================
   ACORN — MOBILE FIT PATCH  (Elementor / Customizer edition)

   WHAT'S DIFFERENT FROM acorn-mobile-fit.css
   Every body.elementor-page-1074 is prefixed with `body`. That raises each rule
   from (1 id, 1 class) to (1 id, 1 class, 1 element), so it wins
   against the page's own inline <style> block regardless of
   which one the browser loads first.

   That means this file is placement-proof. Paste it into ANY of:
     • Elementor → hamburger → Site Settings → Custom CSS   (Pro)
     • Elementor → page → Settings → Advanced → Custom CSS  (Pro)
     • Appearance → Customize → Additional CSS              (free)
     • A child theme's style.css
   One paste in Site Settings covers all five pages.

   Rules for IDs that don't exist on a given page simply never
   match, so this is safe to load site-wide. Nothing here can
   leak out and restyle the rest of the WordPress site.

   No !important anywhere — specificity does the work, which
   leaves you able to override these later without escalating.
   ============================================================ */


/* ── 1. WRAPPER GUARD ──────────────────────────────────────
   #acorn-dns and #acorn-hs already have this inline. The other
   three don't. Stops one stray wide child dragging the page.

   overflow-x must be `clip`, NOT `hidden` — all three of these
   pages use position:sticky on .masthead, and overflow:hidden
   on any ancestor silently disables sticky positioning.
   ---------------------------------------------------------- */
body #acorn-home,
body #acorn-svc,
body #acorn-tools{
  width:100%;
  max-width:none;
  overflow-x:clip;
  -webkit-text-size-adjust:100%;
}


/* ── 2. GRID TRACK FLOORS ──────────────────────────────────
   `minmax(290px,1fr)` is a hard floor — the track stays 290px
   even inside a 288px container. `min(100%,290px)` lets it
   collapse. Same pattern DNS.html and Script.html already use.
   ---------------------------------------------------------- */

/* Home.html — lines 224, 287, 376 */
body #acorn-home .doors{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
body #acorn-home .tiers{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
body #acorn-home .certs{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}

/* Services.html — lines 161, 190, 205 */
body #acorn-svc .tiers{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
body #acorn-svc .bonuses{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
body #acorn-svc .capacity{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}

/* check-my-computer.html — lines 144, 211 */
body #acorn-tools .tools{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
body #acorn-tools .outs{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}


/* ── 3. GRID / FLEX CHILDREN THAT WON'T SHRINK ─────────────
   A grid or flex item defaults to min-width:auto — "as wide as
   my content" — so it pushes past its track. The track fix in
   section 2 and this item fix are a pair; you need both.
   ---------------------------------------------------------- */
body #acorn-home .doors > *, body #acorn-home .tiers > *, body #acorn-home .certs > *,
body #acorn-svc .tiers > *, body #acorn-svc .bonuses > *, body #acorn-svc .capacity > *,
body #acorn-tools .tools > *, body #acorn-tools .outs > *,
body #acorn-dns .grid-2 > *, body #acorn-dns .grid-3 > *, body #acorn-dns .fgrid > *{
  min-width:0;
}


/* ── 4. LONG UNBREAKABLE STRINGS ───────────────────────────
   Emails, URLs and PowerShell one-liners have no spaces, so
   they set a minimum content width nothing can shrink below.
   check-my-computer's .cmd code and Script's <code> already
   handle this correctly — these are the spots that don't.
   ---------------------------------------------------------- */
body #acorn-home .reach__row a,
body #acorn-home .reach__row span,
body #acorn-svc .foot a,
body #acorn-tools .foot a{
  overflow-wrap:anywhere;
  word-break:break-word;
  min-width:0;
}

/* Home.html:405 — .reach__row is `88px 1fr`. At 320px that
   leaves ~184px for contact@acornsecurity.net. Stack it. */
@media (max-width:400px){
  body #acorn-home .reach__row{grid-template-columns:1fr;gap:2px}
  body #acorn-home .mission__row{grid-template-columns:1fr;gap:2px}
}


/* ── 5. MEDIA SAFETY NET ───────────────────────────────────
   Home.html already has img{max-width:100%}. The others don't.
   Insurance against the next image or embed you add.
   ---------------------------------------------------------- */
body #acorn-svc img, body #acorn-svc svg, body #acorn-svc video,
body #acorn-svc iframe, body #acorn-svc table,
body #acorn-tools img, body #acorn-tools svg, body #acorn-tools video,
body #acorn-tools iframe, body #acorn-tools table,
body #acorn-dns img, body #acorn-dns video,
body #acorn-dns iframe, body #acorn-dns table{
  max-width:100%;
  height:auto;
}

/* Tables can't shrink below their content. Give them their own
   scroll box rather than letting them widen the whole page. */
body #acorn-svc table,
body #acorn-tools table,
body #acorn-dns table{
  display:block;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}


/* ── 6. NARROW-PHONE TIGHTENING (≤380px) ───────────────────
   Buys back horizontal room on iPhone SE / older Androids.
   ---------------------------------------------------------- */
@media (max-width:380px){
  body #acorn-home .wrap,
  body #acorn-svc .wrap,
  body #acorn-tools .wrap{padding:0 12px}

  /* DNS.html:257 — min-width:104px on buttons */
  body #acorn-dns .btn{min-width:0}

  /* Footer nav to one column so link text stops crowding */
  body #acorn-home .foot__nav,
  body #acorn-svc .foot__nav,
  body #acorn-tools .foot__nav{grid-template-columns:1fr}
}


/* ── 7. ELEMENTOR CONTAINER ARMOUR ─────────────────────────
   COMMENTED OUT BY DEFAULT. Only enable if the console check
   shows the outermost overflowing element is Elementor's
   (.e-con, .elementor-section, .elementor-container) rather
   than one of yours.

   This mirrors the armour already in Script.html, extended to
   the other four page IDs. The :has() guard means it only ever
   applies on pages that actually contain one of these wrappers.

body .elementor-widget-container:has(#acorn-home),
body .elementor-widget-container:has(#acorn-svc),
body .elementor-widget-container:has(#acorn-tools),
body .elementor-widget-container:has(#acorn-dns),
body .elementor-widget-html:has(#acorn-home),
body .elementor-widget-html:has(#acorn-svc),
body .elementor-widget-html:has(#acorn-tools),
body .elementor-widget-html:has(#acorn-dns),
body .e-con:has(#acorn-home),
body .e-con:has(#acorn-svc),
body .e-con:has(#acorn-tools),
body .e-con:has(#acorn-dns),
body .e-con-inner:has(#acorn-home),
body .e-con-inner:has(#acorn-svc),
body .e-con-inner:has(#acorn-tools),
body .e-con-inner:has(#acorn-dns),
body .elementor-section:has(#acorn-home),
body .elementor-section:has(#acorn-svc),
body .elementor-section:has(#acorn-tools),
body .elementor-section:has(#acorn-dns),
body .elementor-container:has(#acorn-home),
body .elementor-container:has(#acorn-svc),
body .elementor-container:has(#acorn-tools),
body .elementor-container:has(#acorn-dns){
  padding-left:0 !important;
  padding-right:0 !important;
  max-width:none !important;
  width:100% !important;
  overflow-x:clip;
}
   ---------------------------------------------------------- *//* End custom CSS */