/* MX Storm Forge — Hybrid homepage (Phase 9, v4.3.0)
   Loaded only on the front page, after phase6.css. Delete file + remove enqueue to revert. */

/* ---- cinematic backdrop (front page only) ---- */
body.home #content, body.home .col-full { position: relative; z-index: 1; }
body.home::before {
    content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background:
        radial-gradient(ellipse 60% 50% at 18% 12%, rgba(200,35,44,0.07), transparent 60%),
        radial-gradient(ellipse 55% 45% at 85% 40%, rgba(42,111,181,0.06), transparent 60%),
        radial-gradient(ellipse 60% 50% at 50% 95%, rgba(124,62,184,0.07), transparent 60%);
}
body.home::after {
    content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0.035;
    background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.5) 1px, transparent 0);
    background-size: 3px 3px;
}

.mxwh { position: relative; z-index: 1; }
.mxwh-inner { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; }

/* ---- ornate divider ---- */
.mxwh-rule { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 0 auto; max-width: 1280px; padding: 0 1.5rem; }
.mxwh-rule::before, .mxwh-rule::after { content: ""; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, var(--border-bright), transparent); }
.mxwh-rule span { color: var(--gold); font-size: 0.7rem; letter-spacing: 0.4em; }

/* ---- HERO ---- */
.mxwh-hero { text-align: center; padding: 6rem 1.5rem 3.5rem; }
.mxwh-tagline { font-family: var(--font-ui); text-transform: uppercase; letter-spacing: 0.45em; font-size: 0.66rem; color: var(--gold); display: block; margin-bottom: 1.1rem; }
.mxwh-hero h1 {
    font-family: var(--font-display) !important; font-weight: 400;
    font-size: clamp(2.4rem, 6vw, 4.4rem); letter-spacing: 0.22em !important; margin: 0 0 0.6rem;
    background: linear-gradient(180deg, #f5f7fa 0%, #6a6e74 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.mxwh-hero .sub {
    font-family: var(--font-body); font-style: italic; color: var(--silver);
    font-size: clamp(1rem, 1.8vw, 1.25rem); letter-spacing: 0.06em; max-width: 720px; margin: 0 auto 2rem; line-height: 1.55;
}
/* prominent search */
.mxwh-search { max-width: 560px; margin: 0 auto 1.6rem; position: relative; }
.mxwh-search input[type="search"] {
    width: 100%; background: rgba(255,255,255,0.05) !important; border: 1px solid var(--border-bright) !important;
    color: var(--silver-bright) !important; font-family: var(--font-ui) !important; font-size: 0.85rem !important;
    letter-spacing: 0.05em; padding: 1rem 3.2rem 1rem 1.2rem !important; border-radius: 0 !important; transition: all 0.3s;
}
.mxwh-search input[type="search"]:focus { outline: none; border-color: var(--gold) !important; background: rgba(179,148,86,0.06) !important; }
.mxwh-search input::placeholder { color: var(--silver-dim); text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.72rem; }
.mxwh-search button {
    position: absolute; right: 0; top: 0; height: 100%; width: 3.2rem; background: transparent !important;
    border: none !important; color: var(--silver-dim) !important; cursor: pointer; padding: 0 !important; margin: 0 !important;
    display: flex; align-items: center; justify-content: center; transition: color 0.3s;
}
.mxwh-search button:hover { color: var(--gold-bright) !important; }
.mxwh-search button svg { width: 18px; height: 18px; }
/* CTAs */
.mxwh-ctas { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1.2rem; }
.mxwh-btn { display: inline-block; font-family: var(--font-ui); text-transform: uppercase; letter-spacing: 0.25em; font-size: 0.7rem; padding: 0.95rem 2.2rem; border: 1px solid var(--silver); color: var(--silver-bright) !important; transition: all 0.3s; }
.mxwh-btn:hover { background: var(--silver-bright); color: var(--bg-base) !important; }
.mxwh-btn.gold { background: var(--gold); border-color: var(--gold); color: var(--bg-base) !important; }
.mxwh-btn.gold:hover { background: var(--gold-bright); border-color: var(--gold-bright); }
.mxwh-microtrust { font-family: var(--font-ui); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--silver-dim); }

/* ---- TRUST STRIP (real icons) ---- */
.mxwh-trust { border-top: 1px solid var(--border-line); border-bottom: 1px solid var(--border-line); background: var(--bg-deep); }
.mxwh-trust .mxwh-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; padding-top: 1.5rem; padding-bottom: 1.5rem; }
.mxwh-trust .ti { display: flex; align-items: center; gap: 0.8rem; justify-content: center; }
.mxwh-trust .ti svg { width: 26px; height: 26px; color: var(--gold); flex-shrink: 0; }
.mxwh-trust .ti b { display: block; font-family: var(--font-ui); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--silver-bright); font-weight: 600; }
.mxwh-trust .ti span { font-family: var(--font-body); font-style: italic; font-size: 0.88rem; color: var(--silver-dim); }

/* ---- SECTION shell ---- */
.mxwh-sec { padding: 4rem 0; }
.mxwh-sec > .mxwh-inner > h2 { text-align: center; font-size: clamp(1.4rem, 3vw, 2rem); letter-spacing: 0.2em !important; margin: 0 0 0.5rem; color: var(--silver-bright) !important; }
.mxwh-sec .lead { text-align: center; font-family: var(--font-body); font-style: italic; color: var(--silver-dim); font-size: 1.05rem; margin: 0 auto 2.4rem; max-width: 680px; }

/* ---- BRANDS ---- */
.mxwh-brands { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.7rem; }
.mxwh-brand { display: flex; flex-direction: column; gap: 0.2rem; padding: 1rem 1.1rem; background: var(--bg-card); border: 1px solid var(--border-line); transition: all 0.25s; }
.mxwh-brand:hover { background: var(--bg-card-hover); border-color: var(--gold); transform: translateY(-3px); }
.mxwh-brand .bn { font-family: var(--font-ui); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--silver-bright) !important; }
.mxwh-brand .bc { font-family: var(--font-ui); font-size: 0.66rem; color: var(--silver-dim); }

/* ---- MYTHOS feature ---- */
.mxwh-mythos { background: var(--bg-deep); border-top: 1px solid var(--border-line); border-bottom: 1px solid var(--border-line); position: relative; overflow: hidden; }
.mxwh-mythos::before { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse at 20% 30%, rgba(200,35,44,0.06), transparent 60%), radial-gradient(ellipse at 70% 50%, rgba(42,111,181,0.06), transparent 60%), radial-gradient(ellipse at 90% 70%, rgba(124,62,184,0.06), transparent 60%); }
.mxwh-mythos .mxwh-inner { display: grid; grid-template-columns: 1.05fr 1fr; gap: 3.5rem; align-items: center; position: relative; z-index: 1; }
.mxwh-mythos .txt .mxwh-tagline { margin-bottom: 0.9rem; }
.mxwh-mythos h2 { text-align: left !important; font-size: clamp(1.8rem, 4vw, 2.8rem); letter-spacing: 0.15em !important; margin: 0 0 1rem;
    background: linear-gradient(180deg, #f0f2f5 0%, var(--gold) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.mxwh-mythos p { font-family: var(--font-body); font-size: 1.1rem; font-style: italic; color: var(--silver); line-height: 1.7; margin: 0 0 1.6rem; }
.mxwh-lines { display: flex; gap: 1.4rem; margin: 0 0 1.8rem; }
.mxwh-lines i { font-style: normal; font-family: var(--font-ui); font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--silver-dim); display: flex; align-items: center; gap: 0.5rem; }
.mxwh-lines i::before { content: ""; width: 9px; height: 9px; border-radius: 50%; }
.mxwh-lines .ares::before { background: var(--ares-red); }
.mxwh-lines .pos::before { background: var(--poseidon-blue); }
.mxwh-lines .had::before { background: var(--hades-purple); }
.mxwh-mythos .pic { border: 1px solid var(--border-line); overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.55); }
.mxwh-mythos .pic img { width: 100%; height: auto; display: block; }

/* ---- WHY MX (services) ---- */
.mxwh-why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.mxwh-card { background: var(--bg-card); border: 1px solid var(--border-line); padding: 2.2rem 1.8rem; transition: all 0.3s; }
.mxwh-card:hover { border-color: var(--border-bright); transform: translateY(-4px); }
.mxwh-card svg { width: 28px; height: 28px; color: var(--gold); margin-bottom: 1rem; }
.mxwh-card h3 { font-size: 1rem !important; letter-spacing: 0.14em !important; margin: 0 0 0.7rem; }
.mxwh-card p { font-family: var(--font-body); color: var(--silver); font-size: 1.02rem; line-height: 1.6; margin: 0; }

/* ---- ASSURANCE quotes (value props, not fabricated reviews) ---- */
.mxwh-assure { background: var(--bg-deep); border-top: 1px solid var(--border-line); }
.mxwh-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.mxwh-quote { text-align: center; padding: 1.5rem; }
.mxwh-quote .q { font-family: var(--font-body); font-style: italic; font-size: 1.15rem; color: var(--silver-bright); line-height: 1.5; margin-bottom: 0.8rem; }
.mxwh-quote .who { font-family: var(--font-ui); font-size: 0.64rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }

/* ---- SEO band ---- */
.mxwh-seo { background: var(--bg-base); }
.mxwh-seo p { font-family: var(--font-ui); font-size: 0.82rem; line-height: 1.7; color: var(--silver-dim); max-width: 820px; margin: 0 auto 0.9rem; text-align: center; }

/* ---- responsive ---- */
@media (max-width: 880px) {
    .mxwh-hero { padding: 4rem 1rem 2.5rem; }
    .mxwh-trust .mxwh-inner { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    .mxwh-trust .ti { justify-content: flex-start; }
    .mxwh-mythos .mxwh-inner { grid-template-columns: 1fr; gap: 2rem; }
    .mxwh-mythos h2 { text-align: center !important; }
    .mxwh-mythos .txt { text-align: center; }
    .mxwh-lines { justify-content: center; }
    .mxwh-why { grid-template-columns: 1fr; }
    .mxwh-quotes { grid-template-columns: 1fr; }
}

/* ---- FIX: featured product grid on homepage (front page is not a .woocommerce body, so global grid CSS doesn't reach it) ---- */
.mxwh-featuredsec ul.products { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:1.2rem; }
.mxwh-featuredsec ul.products::before, .mxwh-featuredsec ul.products::after { content:none !important; display:none !important; }
.mxwh-featuredsec ul.products li.product { width:auto !important; margin:0 !important; padding:0 !important; float:none !important; background:var(--bg-card); border:1px solid var(--border-line); overflow:hidden; display:flex; flex-direction:column; text-align:left; transition:transform .4s, border-color .4s, box-shadow .4s; }
.mxwh-featuredsec ul.products li.product:hover { transform:translateY(-5px); border-color:var(--border-bright); box-shadow:0 22px 45px rgba(0,0,0,.5); }
.mxwh-featuredsec ul.products li.product > a { display:block; }
.mxwh-featuredsec ul.products li.product img { width:100% !important; aspect-ratio:4/5; object-fit:cover; margin:0 !important; display:block; background:#f4f4f5; }
.mxwh-featuredsec ul.products li.product .woocommerce-loop-product__title { font-family:var(--font-display); color:var(--silver-bright); font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; padding:.9rem 1rem .3rem; margin:0; }
.mxwh-featuredsec ul.products li.product .price { color:var(--silver-bright) !important; font-family:var(--font-display); font-size:1rem; letter-spacing:.05em; padding:.5rem 1rem 0; margin:auto 0 0; border-top:1px solid var(--border-line); display:block; }
.mxwh-featuredsec ul.products li.product .price del { color:var(--silver-faint); font-family:var(--font-ui); font-size:.7rem; }
.mxwh-featuredsec ul.products li.product .price ins { text-decoration:none; }
.mxwh-featuredsec ul.products li.product .star-rating { display:none; }
.mxwh-featuredsec ul.products li.product .button { margin:.7rem 1rem 1rem !important; padding:.6rem .8rem !important; font-size:.58rem !important; text-align:center; }
@media (max-width:880px){ .mxwh-featuredsec ul.products { grid-template-columns:repeat(2,1fr); gap:.6rem; } }