/* ==========================================================================
   EnterprisePro Pack Machines — home page (dark theme)
   Loaded only on the front page (see inc-homepage-enqueue.php).
   Matches the dark palette already used site-wide (#0d1b2a page background,
   #172132→#121b29 panel cards, light text, blue accent, WhatsApp-green CTAs) —
   see the --ep-* tokens and body/.tax-machine-category rules already on
   your site. All selectors stay eppm- prefixed / scoped under .eppm-home,
   so front-page.php needed no changes for this update.
   ========================================================================== */

.eppm-home{
	--eppm-bg:#0d1b2a; --eppm-panel:#172132; --eppm-panel-2:#121b29; --eppm-panel-soft:#1d2431;
	--eppm-ink:#f5f8fd; --eppm-muted:#a9b7cd; --eppm-line:rgba(126,195,255,.16);
	--eppm-navy:#0b2a4a; --eppm-navy-deep:#071d34; --eppm-on-navy:#f5f8fd; --eppm-on-navy-muted:#a9b7cd;
	--eppm-grid:rgba(255,255,255,.06); --eppm-navy-line:rgba(255,255,255,.14);
	--eppm-accent:#7ec3ff; --eppm-accent-strong:#4dabf7;
	--eppm-gold:#25D366; --eppm-gold-text:#ffffff; /* WhatsApp-green primary CTA, matching .wa-cta / .ep-whatsapp-float site-wide */
	--eppm-sel-bg:#1677d2; --eppm-sel-fg:#ffffff; --eppm-focus:#4dabf7;
	--eppm-font-display:'Bebas Neue','Oswald',Impact,'Arial Narrow',sans-serif;
	--eppm-font-body:'DM Sans',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
	background:var(--eppm-bg) !important;
	color:var(--eppm-ink);
	font-family:var(--eppm-font-body);
	overflow-x:hidden;
	/* Break out of whatever width the theme's content container (e.g.
	   .ast-container) is actually rendering at — this is what was making
	   the background AND the text clip at the same line: an ancestor was
	   wider than the real screen. Sizing against 100vw instead of 100%
	   makes this element match the true device width regardless of what
	   its parent is doing. */
	width:100vw;
	margin-left:calc(50% - 50vw);
}
/* Clip any stray horizontal overflow at the page level too, so a wide
   element anywhere doesn't create a sideways scroll that misaligns every
   full-bleed section's background on mobile. Scoped to body.home so it
   can never affect any other page. */
body.home{overflow-x:hidden !important}
.eppm-home *{box-sizing:border-box}
.eppm-home img,.eppm-home svg{max-width:100%}
.eppm-home h1,.eppm-home h2,.eppm-home h3,.eppm-home p,.eppm-home li,.eppm-home span,.eppm-home b{overflow-wrap:break-word;word-break:break-word}
.eppm-home :focus-visible{outline:3px solid var(--eppm-focus);outline-offset:3px;border-radius:4px}
.eppm-wrap{width:min(1160px,100% - 48px);margin-inline:auto}
.eppm-ico{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* buttons and links */
.eppm-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 22px;border-radius:8px;font-family:var(--eppm-font-body);font-weight:700;font-size:16px;text-decoration:none;border:1.5px solid transparent;cursor:pointer;line-height:1.2}
.eppm-btn-gold{background:var(--eppm-gold);color:var(--eppm-gold-text) !important}
.eppm-btn-gold:hover{background:#1ebe5a;color:var(--eppm-gold-text) !important}
.eppm-btn-ghost{border-color:rgba(255,255,255,.4);color:var(--eppm-on-navy) !important}
.eppm-btn-ghost:hover{background:rgba(255,255,255,.08);color:var(--eppm-on-navy) !important}
.eppm-link{color:var(--eppm-accent-strong) !important;font-weight:700;text-decoration:underline;text-underline-offset:4px}
.eppm-link:hover{color:var(--eppm-accent) !important;text-decoration-thickness:2px}

/* hero */
.eppm-hero{background-color:var(--eppm-navy);color:var(--eppm-on-navy);
	background-image:linear-gradient(var(--eppm-grid) 1px,transparent 1px),linear-gradient(90deg,var(--eppm-grid) 1px,transparent 1px);
	background-size:56px 56px}
.eppm-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;padding:76px 0 92px}
.eppm-hero h1{font-family:var(--eppm-font-display);font-weight:400;font-size:clamp(50px,7.4vw,96px);line-height:.95;letter-spacing:.01em;margin:0 0 22px;color:var(--eppm-on-navy) !important}
.eppm-hero .eppm-sub{color:var(--eppm-on-navy-muted);font-size:19px;max-width:34em;margin:0 0 30px}
.eppm-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.eppm-phone{color:var(--eppm-on-navy);font-weight:500;text-underline-offset:4px}

/* product picker */
.eppm-picker{background:linear-gradient(180deg,var(--eppm-panel) 0%,var(--eppm-panel-2) 100%);color:var(--eppm-ink);border-radius:16px;padding:26px;border:1px solid var(--eppm-line);box-shadow:0 24px 60px rgba(0,0,0,.45)}
.eppm-picker-title{margin:0;font-size:18px;font-weight:700;color:var(--eppm-ink)}
.eppm-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0 22px}
.eppm-tab{display:flex;align-items:center;gap:10px;padding:11px 12px;border:1.5px solid var(--eppm-line);border-radius:10px;background:transparent;color:var(--eppm-ink);font:500 15px/1.2 var(--eppm-font-body);cursor:pointer;text-align:left}
.eppm-tab:hover{border-color:var(--eppm-accent-strong)}
.eppm-tab[aria-selected="true"]{background:var(--eppm-sel-bg);border-color:var(--eppm-sel-bg);color:var(--eppm-sel-fg) !important}
.eppm-pane-head{display:flex;align-items:center;gap:12px;color:var(--eppm-accent-strong)}
.eppm-pane-head .eppm-ico{width:34px;height:34px}
.eppm-pane h3{font-family:var(--eppm-font-display);font-weight:400;font-size:36px;line-height:1;margin:0;color:var(--eppm-ink) !important}
.eppm-pane p{margin:10px 0 14px;color:var(--eppm-muted)}
.eppm-pane ul{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:9px}
.eppm-pane li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;color:var(--eppm-ink) !important}
.eppm-pane li::before{content:"";flex:none;width:6px;height:11px;margin:4px 4px 0 3px;border:solid var(--eppm-accent-strong);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.eppm-pane .eppm-btn{width:100%}
.eppm-pane .eppm-more{display:inline-block;margin-top:14px}

/* trust strip */
.eppm-trust{background:var(--eppm-panel-soft);border-bottom:1px solid var(--eppm-line)}
.eppm-trust ul{list-style:none;margin:0;padding:20px 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px 24px}
.eppm-trust li{display:flex;align-items:center;gap:12px;font-weight:500;font-size:15px;line-height:1.3;color:var(--eppm-ink) !important}
.eppm-trust .eppm-ico{color:var(--eppm-accent-strong);width:28px;height:28px;stroke-width:2}

/* sections */
.eppm-sec{padding:84px 0}
.eppm-sec-alt{background:var(--eppm-panel-soft);border-block:1px solid var(--eppm-line)}
.eppm-sec-head{max-width:660px;margin-bottom:40px}
.eppm-home h2{font-family:var(--eppm-font-display);font-weight:400;font-size:clamp(38px,5vw,58px);line-height:1;letter-spacing:.01em;margin:0 0 14px;color:var(--eppm-ink) !important}
.eppm-sec-head p{color:var(--eppm-muted);margin:0;max-width:60ch}

/* production lines */
.eppm-lines{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.eppm-line-card{background:linear-gradient(180deg,var(--eppm-panel) 0%,var(--eppm-panel-2) 100%);border:1px solid var(--eppm-line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 16px 36px rgba(0,0,0,.2)}
.eppm-plate{background-color:var(--eppm-navy);background-image:linear-gradient(var(--eppm-grid) 1px,transparent 1px),linear-gradient(90deg,var(--eppm-grid) 1px,transparent 1px);background-size:28px 28px;height:172px !important;display:grid;place-items:center;color:var(--eppm-accent);overflow:hidden !important}
.eppm-plate-img{width:100% !important;height:100% !important;object-fit:cover !important;max-width:none !important;margin:0 !important;display:block !important}
.eppm-plate .eppm-ico{width:88px;height:88px;stroke-width:2}
.eppm-line-body{padding:22px 22px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.eppm-line-body h3{font-family:var(--eppm-font-display);font-weight:400;font-size:34px;line-height:1;margin:0;color:var(--eppm-ink) !important}
.eppm-line-body p{margin:0;color:var(--eppm-muted)}
.eppm-line-body .eppm-link{margin-top:auto;padding-top:8px}

/* category index */
.eppm-cats{display:grid;grid-template-columns:repeat(3,1fr);column-gap:48px}
.eppm-cat{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 4px;border-bottom:1px solid var(--eppm-line);text-decoration:none;font-weight:500;color:var(--eppm-ink) !important}
.eppm-cat .eppm-ico{width:16px;height:16px;color:var(--eppm-muted);stroke-width:2.5}
.eppm-cat:hover{color:var(--eppm-accent-strong) !important}
.eppm-cat:hover .eppm-ico{color:var(--eppm-accent-strong)}

/* machines: search + chips */
.eppm-mach-tools{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center;justify-content:space-between;margin-bottom:28px}
.eppm-mach-search{display:flex;align-items:center;gap:10px;border:1.5px solid var(--eppm-line);border-radius:10px;padding:0 14px;background:var(--eppm-panel);flex:1;min-width:240px;max-width:380px}
.eppm-mach-search .eppm-ico{width:20px;height:20px;color:var(--eppm-muted);stroke-width:2.2}
.eppm-mach-search input{flex:1;border:0;background:transparent;color:var(--eppm-ink);font:inherit;font-size:15.5px;padding:11px 0;outline:none;min-width:0}
.eppm-mach-search input::placeholder{color:var(--eppm-muted)}
.eppm-mach-search:focus-within{border-color:var(--eppm-accent-strong)}
.eppm-chips{display:flex;flex-wrap:wrap;gap:8px}
.eppm-chip{font:500 14.5px/1 var(--eppm-font-body);padding:9px 15px;border-radius:999px;border:1.5px solid var(--eppm-line);background:transparent;color:var(--eppm-ink);cursor:pointer}
.eppm-chip:hover{border-color:var(--eppm-accent-strong)}
.eppm-chip[aria-pressed="true"]{background:var(--eppm-sel-bg);border-color:var(--eppm-sel-bg);color:var(--eppm-sel-fg) !important}
.eppm-mach-empty{color:var(--eppm-muted);padding:8px 0 28px;margin:0}
.eppm-machine[hidden]{display:none}

/* featured machines */
.eppm-machines{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.eppm-machine{background:linear-gradient(180deg,var(--eppm-panel) 0%,var(--eppm-panel-2) 100%);border:1px solid var(--eppm-line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 16px 36px rgba(0,0,0,.2)}
.eppm-nameplate{position:relative;height:150px !important;display:flex;align-items:center;padding:0 22px;color:var(--eppm-on-navy);background-color:var(--eppm-navy);background-image:linear-gradient(var(--eppm-grid) 1px,transparent 1px),linear-gradient(90deg,var(--eppm-grid) 1px,transparent 1px);background-size:28px 28px;overflow:hidden !important}
.eppm-nameplate-img{width:100% !important;height:100% !important;object-fit:cover !important;max-width:none !important;margin:0 !important;display:block !important}
.eppm-nameplate b{font-family:var(--eppm-font-display);font-weight:400;font-size:44px;letter-spacing:.02em;line-height:1}
.eppm-machine-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.eppm-machine-body h3{font-size:18px;font-weight:700;line-height:1.3;margin:0 0 6px;color:var(--eppm-ink) !important}
.eppm-machine-body p{margin:0;color:var(--eppm-muted);font-size:15.5px}
.eppm-specs{list-style:none;margin:14px 0 0;padding:12px 0;border-top:1px solid var(--eppm-line);border-bottom:1px solid var(--eppm-line);display:grid;gap:7px}
.eppm-specs li{display:flex;justify-content:space-between;gap:12px;font-size:14.5px}
.eppm-specs li span{color:var(--eppm-muted)}
.eppm-specs li b{font-weight:700;text-align:right;color:var(--eppm-ink) !important}
.eppm-machine-actions{margin-top:auto;padding-top:18px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.eppm-machine-actions .eppm-link{margin-left:auto}
.eppm-price-val{font-size:22px;font-weight:700;letter-spacing:-.01em;color:var(--eppm-ink) !important;line-height:1.2}
.eppm-price-val.eppm-price-unset{font-size:16px;font-weight:500;color:var(--eppm-muted) !important}

/* why us */
.eppm-why{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:start}
.eppm-why-lead{color:var(--eppm-muted);max-width:40ch;margin:0}
.eppm-why-list{display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
.eppm-why-item{padding:22px 0 24px;border-top:1px solid var(--eppm-line)}
.eppm-why-item h3{font-size:18px;font-weight:700;margin:0 0 6px;color:var(--eppm-ink) !important}
.eppm-why-item p{margin:0;color:var(--eppm-muted);font-size:16px}

/* installations */
.eppm-shots{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.eppm-shot{margin:0}
.eppm-shot img{width:100% !important;max-width:none !important;height:auto !important;aspect-ratio:4/3 !important;object-fit:cover !important;border-radius:12px;display:block;border:1px solid var(--eppm-line);margin:0 !important}
.eppm-shot figcaption{margin-top:10px;font-size:15px;color:var(--eppm-muted)}

/* final CTA */
.eppm-cta{background:var(--eppm-navy);color:var(--eppm-on-navy);padding:84px 0}
.eppm-cta-inner{display:flex;justify-content:space-between;align-items:center;gap:32px 48px;flex-wrap:wrap}
.eppm-cta h2{color:var(--eppm-on-navy) !important;margin-bottom:12px}
.eppm-cta p{margin:0;color:var(--eppm-on-navy-muted);max-width:42ch}

@media (max-width:1000px){
	.eppm-hero-grid{grid-template-columns:1fr;gap:44px;padding:56px 0 64px}
	.eppm-lines{grid-template-columns:1fr}
	.eppm-machines{grid-template-columns:1fr 1fr}
	.eppm-cats{grid-template-columns:1fr 1fr}
	.eppm-why{grid-template-columns:1fr;gap:32px}
}
@media (max-width:680px){
	.eppm-sec{padding:60px 0}
	.eppm-machines,.eppm-cats,.eppm-shots,.eppm-why-list{grid-template-columns:1fr}
	.eppm-picker{padding:20px}
	.eppm-mach-tools{flex-direction:column;align-items:stretch}
	.eppm-mach-search{max-width:none}
}