/* =========================================================
   MEX LIGHT THEME OVERRIDES
   Loaded after style.css + pages.css + responsive.css
   Purpose: flip dark-default site to light content areas
            while keeping hero, footer and accent strips dark.
   ========================================================= */

/* ── Design tokens ────────────────────────────────────────── */
:root {
    --mex-white:       #ffffff;
    --mex-bg:          #f5f8fc;
    --mex-bg-soft:     #eef4fb;
    --mex-navy:        #071327;
    --mex-navy-2:      #0b1629;
    --mex-blue:        #1463ff;
    --mex-cyan:        #13c8ff;
    --mex-text:        #071327;
    --mex-muted:       #53677f;
    --mex-border:      #d7e3f2;
    --mex-dark-border: rgba(70, 140, 255, 0.35);
}

/* ── Body ────────────────────────────────────────────────── */
body {
    background-color: var(--mex-white);
    background-image: none;
    color: var(--mex-text);
}

/* Remove full-page watermark on light bg */
body::before {
    display: none;
}

/* ── Chemical formulas (override legacy cyan) ────────────── */
.chem-formula {
    color: var(--mex-navy) !important;
}

.hero .chem-formula,
.category-hero .chem-formula,
.products-dark-section .chem-formula,
.projects-showcase .chem-formula,
.category-cta__box .chem-formula,
.cta-card .chem-formula,
.page-content--dark .chem-formula,
.site-footer .chem-formula {
    color: #ffffff !important;
}

/* ── Global headings on light bg ─────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    color: var(--mex-navy);
}

/* Dark sections keep their own heading colours */
.hero h1, .hero h2, .hero h3,
.products-dark-section h2, .products-dark-section h3,
.projects-showcase h2, .projects-showcase h3,
.category-cta__box h2, .cta-card h2,
.site-footer h2, .site-footer h3,
.category-hero h1 {
    color: #ffffff !important;
}

.category-hero h2 {
    color: inherit;
}

/* ── Section eyebrow on light bg ─────────────────────────── */
.section-eyebrow {
    color: var(--mex-blue);
}

/* Preserve glowing cyan in dark contexts */
.hero .section-eyebrow,
.products-dark-section .section-eyebrow,
.projects-showcase .section-eyebrow,
.site-footer .section-eyebrow {
    color: var(--blue-bright);
}

/* section-heading h2 (used in category pages) */
.section-heading h2 {
    color: var(--mex-navy);
}

/* ── Homepage section backgrounds ───────────────────────── */
.product-tiles {
    background: var(--mex-white) !important;
    border-top:    1px solid var(--mex-border) !important;
    border-bottom: 1px solid var(--mex-border) !important;
}

.homepage-news {
    background: var(--mex-bg) !important;
}

.homepage-references {
    background: var(--mex-white) !important;
    border-top: 1px solid var(--mex-border) !important;
}

.about-preview {
    background: var(--mex-bg-soft) !important;
    border-bottom: 1px solid var(--mex-border) !important;
}

/* Homepage heading overrides (these had color:var(--t0) globally) */
.product-tiles h2,
.homepage-news__head h2,
.homepage-references__head h2,
.about-preview h2 {
    color: var(--mex-navy) !important;
}

.homepage-news__head p,
.homepage-references__head p,
.about-preview p {
    color: var(--mex-muted) !important;
}

/* News layout (2-col homepage layout) */
.news-layout .news-left h2 {
    color: var(--mex-navy) !important;
}

.news-layout .news-left p {
    color: var(--mex-muted) !important;
}

/* ── Buttons: outline + secondary on light bg ───────────── */
/* Override globally, then restore white text in dark sections */
.btn-outline,
.btn-secondary {
    color: var(--mex-navy) !important;
    border-color: var(--mex-blue) !important;
}

.btn-outline:hover,
.btn-secondary:hover {
    background: rgba(20, 99, 255, 0.07) !important;
    color: var(--mex-blue) !important;
    border-color: var(--mex-blue) !important;
    box-shadow: none !important;
}

/* Restore white text inside dark sections */
.hero .btn-outline,
.hero .btn-secondary,
.products-dark-section .btn-outline,
.products-dark-section .btn-secondary,
.projects-showcase .btn-outline,
.projects-showcase .btn-secondary,
.category-cta__box .btn-outline,
.category-cta__box .btn-secondary,
.cta-card .btn-outline,
.cta-card .btn-secondary,
.category-hero .btn-outline,
.category-hero .btn-secondary {
    color: var(--white) !important;
}

.hero .btn-outline,
.hero .btn-secondary,
.category-hero .btn-outline {
    border-color: rgba(255, 255, 255, 0.35) !important;
}

/* ── Menu toggle (hamburger) ─────────────────────────────── */
.menu-toggle {
    color: var(--mex-navy);
    border-color: var(--mex-border);
}

/* ── Dropdown navigation ─────────────────────────────────── */
.dropdown,
.subdropdown {
    background: #ffffff !important;
    border: 1px solid var(--mex-border) !important;
    box-shadow: 0 8px 32px rgba(7, 19, 39, 0.12), 0 2px 6px rgba(7, 19, 39, 0.06) !important;
}

.dropdown li a,
.subdropdown li a {
    color: var(--mex-text) !important;
}

.dropdown li a:hover,
.subdropdown li a:hover {
    background: var(--mex-bg) !important;
    color: var(--mex-blue) !important;
}

/* Fix subdropdown chevron arrow in white dropdown */
.dropdown .has-subdropdown > a::after {
    border-right-color: rgba(7, 19, 39, 0.45) !important;
    border-bottom-color: rgba(7, 19, 39, 0.45) !important;
}

/* ── Anchor nav pills (category pages) ──────────────────── */
.anchor-nav a {
    background: #ffffff !important;
    border: 1px solid var(--mex-border) !important;
    color: var(--mex-navy) !important;
    box-shadow: 0 2px 6px rgba(7, 19, 39, 0.06) !important;
}

.anchor-nav a:hover {
    background: var(--mex-bg-soft) !important;
    border-color: var(--mex-blue) !important;
    color: var(--mex-blue) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(20, 99, 255, 0.12) !important;
}

/* ── Product catalog cards ───────────────────────────────── */
.mex-product-card,
.product-card {
    background: #ffffff !important;
}

.mex-product-card__media,
.product-card__media {
    background: var(--mex-bg) !important;
}

.mex-product-card .btn.mex-product-card__detail,
.product-card .btn.mex-product-card__detail {
    background: #ffffff !important;
}

.mex-product-card__description {
    color: var(--mex-muted) !important;
}

/* ── News cards ──────────────────────────────────────────── */
.news-card {
    background: #ffffff !important;
}

.news-card__title {
    color: var(--mex-navy) !important;
}

/* ── News empty state ────────────────────────────────────── */
.news-empty {
    background: var(--mex-bg) !important;
}

/* ── News page hero ──────────────────────────────────────── */
.news-page-hero h1,
.news-page-hero__content h1 {
    color: var(--mex-navy) !important;
}

/* ── News detail article ─────────────────────────────────── */
.news-detail-article {
    background: #ffffff !important;
}

.news-detail__title {
    color: var(--mex-navy) !important;
}

.news-detail__excerpt {
    color: var(--mex-muted) !important;
    border-left-color: var(--mex-blue) !important;
}

.news-detail__content {
    color: #374151 !important;
}

.news-detail-body h2,
.news-detail-body h3 {
    color: var(--mex-navy) !important;
}

/* ── News detail sidebar ─────────────────────────────────── */
.news-detail-sidebar__box {
    background: #ffffff !important;
}

.news-detail-sidebar__title {
    color: var(--mex-navy) !important;
}

.news-detail-related__head h2 {
    color: var(--mex-navy) !important;
}

/* ── About page panels ───────────────────────────────────── */
.about-intro__text,
.about-intro__box,
.about-history__wrap {
    background: #ffffff !important;
}

.about-intro__text h2,
.about-history__wrap h2 {
    color: var(--mex-navy) !important;
}

.about-card {
    background: #ffffff !important;
}

.about-segments__content,
.about-segments__cards {
    background: #ffffff !important;
}

/* ── Contact page panels ─────────────────────────────────── */
.contact-main-card,
.contact-side-card,
.contact-form-wrap {
    background: #ffffff !important;
}

.contact-main-card h2,
.contact-side-card h3,
.contact-form-intro h2 {
    color: var(--mex-navy) !important;
}

/* ── Form inputs ─────────────────────────────────────────── */
.form-field input,
.form-field select,
.form-field textarea {
    background: #ffffff !important;
    color: var(--mex-navy) !important;
    border-color: var(--mex-border) !important;
}

/* ── Reference cards (listing page) ─────────────────────── */
.reference-card {
    background: #ffffff !important;
}

.reference-card h3 {
    color: var(--mex-navy) !important;
}

/* ── Homepage reference cards ────────────────────────────── */
.homepage-reference-card {
    background: #ffffff !important;
    border: 1px solid var(--mex-border) !important;
}

.homepage-reference-card:hover {
    background: var(--mex-bg-soft) !important;
    border-color: var(--mex-blue) !important;
}

.homepage-reference-card h3 {
    color: var(--mex-navy) !important;
}

.homepage-reference-card__category {
    background: var(--mex-bg-soft) !important;
    border: 1px solid var(--mex-border) !important;
    color: var(--mex-blue) !important;
}

.homepage-reference-card__location {
    color: var(--mex-muted) !important;
}

.homepage-reference-card__meta {
    background: var(--mex-bg) !important;
    border: 1px solid var(--mex-border) !important;
}

.homepage-reference-card__meta span {
    color: var(--mex-muted) !important;
}

.homepage-reference-card__meta strong {
    color: var(--mex-navy) !important;
}

.homepage-reference-card__description {
    color: #374151 !important;
}

.homepage-reference-card__title-link:hover {
    color: var(--mex-blue) !important;
}

.homepage-reference-card__models a,
.homepage-reference-card__models strong {
    background: var(--mex-bg) !important;
    border: 1px solid var(--mex-border) !important;
    color: var(--mex-navy) !important;
}

.homepage-reference-card__models a:hover {
    border-color: var(--mex-blue) !important;
    color: var(--mex-blue) !important;
    background: var(--mex-bg-soft) !important;
}

.homepage-reference-card__image {
    background: var(--mex-bg) !important;
}

/* ── Product detail page ─────────────────────────────────── */
.product-detail-page__media-frame,
.product-detail__media {
    background: var(--mex-bg) !important;
    border-color: var(--mex-border) !important;
}

.product-detail-page__specs-list {
    background: #ffffff !important;
    border-color: var(--mex-border) !important;
}

.product-detail-page__spec-row {
    border-bottom-color: var(--mex-border) !important;
}

.product-detail-page__subtitle {
    color: var(--mex-muted) !important;
}

.product-detail-page__description {
    color: var(--mex-muted) !important;
}

/* ── Related product cards ───────────────────────────────── */
.related-product-card {
    background: #ffffff !important;
}

.related-product-card__media {
    background: var(--mex-bg) !important;
    border-right-color: var(--mex-border) !important;
}

/* ── Specs table (old-style category pages) ──────────────── */
.specs-table {
    background: #ffffff !important;
    border-color: var(--mex-border) !important;
}

.spec-row__label,
.spec-row__value {
    background: #ffffff !important;
    color: var(--mex-navy) !important;
    border-bottom-color: var(--mex-border) !important;
}

.spec-row__label {
    background: var(--mex-bg) !important;
    color: var(--mex-muted) !important;
}

/* ── content-narrow / feature-list / FAQ / usage (cat pages) */
.content-narrow h2 {
    color: var(--mex-navy) !important;
}

.content-narrow > p {
    color: #42536a !important;
}

.feature-list__item h3 {
    color: var(--mex-navy) !important;
}

.feature-list__item p {
    color: #42536a !important;
}

.faq-item summary {
    color: var(--mex-navy) !important;
}

.faq-item p {
    color: #42536a !important;
}

.usage-card {
    color: var(--mex-navy) !important;
    background: #ffffff !important;
}

/* ── Old-style product-detail (category listing pages) ───── */
.product-detail__subtitle {
    color: var(--mex-muted) !important;
}

.product-detail__specs h3,
.product-detail__options h3 {
    color: var(--mex-navy) !important;
}

/* ── Category intro text panels ──────────────────────────── */
.category-intro__text {
    background: #ffffff !important;
    border-color: var(--mex-border) !important;
}

.category-intro__text h2 {
    color: var(--mex-navy) !important;
}

/* ── news-intro / references-intro / contact heading fixes ── */
.news-intro__text h2,
.references-intro__text h2,
.contact-main-card h2 {
    color: var(--mex-navy) !important;
}

/* References intro panels */
.references-intro__text,
.references-intro__stats {
    background: #ffffff !important;
    border-color: var(--mex-border) !important;
}

/* ── Admin panels ────────────────────────────────────────── */
.admin-tabs__link {
    background: #ffffff !important;
    border-color: var(--mex-border) !important;
}

.admin-section-card {
    background: #ffffff !important;
}

.admin-section-card p {
    color: var(--mex-muted) !important;
}

.admin-form {
    background: #ffffff !important;
    border-color: var(--mex-border) !important;
}

/* =========================================================
   PROJECTS SHOWCASE — redesigned 3-card grid
   ========================================================= */

/* Override old inner-grid layout for new structure */
.projects-showcase__inner {
    display: block !important;
}

.projects-showcase__head {
    text-align: center;
    max-width: 620px;
    margin: 0 auto 48px;
}

.projects-showcase__head h2 {
    font-size: clamp(1.9rem, 2.4vw, 2.5rem);
    line-height: 1.1;
    color: #ffffff !important;
    margin-bottom: 16px;
}

.projects-showcase__head p {
    font-size: 1rem;
    line-height: 1.78;
    color: var(--t1);
    margin: 0;
}

.projects-showcase__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

/* Individual project card */
.project-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(70, 140, 255, 0.22);
    padding: 40px 28px 32px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    clip-path: polygon(12px 0%, 100% 0%, calc(100% - 12px) 100%, 0% 100%);
}

.project-card:hover {
    transform: translateY(-6px);
    background: rgba(255, 255, 255, 0.07);
    border-color: var(--blue-glow);
    box-shadow: 0 16px 40px rgba(0, 184, 255, 0.15);
}

.project-card__logo {
    width: 110px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    flex-shrink: 0;
}

.project-card__logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.project-card__name {
    margin: 0 0 12px;
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1.2;
    color: #ffffff;
    letter-spacing: -0.015em;
}

.project-card__desc {
    margin: 0 0 20px;
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--t1);
    flex: 1;
}

.project-card__link {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--blue-glow);
    transition: color 0.2s ease;
}

.project-card:hover .project-card__link {
    color: #ffffff;
}

/* ── Responsive breakpoints ─────────────────────────────── */
@media (max-width: 1024px) {
    .projects-showcase__cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .projects-showcase__head {
        max-width: 520px;
    }
}

@media (max-width: 768px) {
    .projects-showcase__cards {
        grid-template-columns: 1fr;
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
    }

    .projects-showcase__head h2 {
        font-size: 1.75rem;
    }
}

/* =========================================================
   TARGETED REDESIGN FIXES (frontend only — body.mex-site)
   ========================================================= */

/* ── 1) Button contrast only — geometry from style.css (clip-path) ── */
body.mex-site .btn,
body.mex-site .btn-primary {
    background: var(--mex-blue) !important;
    color: #ffffff !important;
    border-color: rgba(34, 104, 255, 0.75) !important;
}

body.mex-site .btn:hover,
body.mex-site .btn-primary:hover {
    background: #1857d8 !important;
    border-color: #00b8ff !important;
    color: #ffffff !important;
}

body.mex-site .hero.hero-main-slider .btn:not(.btn-outline):not(.btn-secondary) {
    background: var(--mex-blue) !important;
    color: #ffffff !important;
    border-color: rgba(34, 104, 255, 0.75) !important;
}

body.mex-site .hero.hero-main-slider .btn:not(.btn-outline):not(.btn-secondary):hover {
    background: #00b8ff !important;
    border-color: #00d8ff !important;
    color: #ffffff !important;
}

/* Secondary on light backgrounds */
body.mex-site .btn-outline,
body.mex-site .btn-secondary {
    background: transparent !important;
    color: var(--mex-navy) !important;
    border-color: var(--mex-blue) !important;
    box-shadow: none !important;
}

body.mex-site .btn-outline:hover,
body.mex-site .btn-secondary:hover {
    background: rgba(20, 99, 255, 0.1) !important;
    color: var(--mex-blue) !important;
    border-color: var(--mex-blue) !important;
}

/* Secondary on dark backgrounds */
body.mex-site .hero .btn-outline,
body.mex-site .hero .btn-secondary,
body.mex-site .category-hero .btn-outline,
body.mex-site .category-hero .btn-secondary,
body.mex-site .products-dark-section .btn-outline,
body.mex-site .projects-showcase .btn-outline,
body.mex-site .category-cta__box .btn-outline,
body.mex-site .cta-card .btn-outline,
body.mex-site .page-content--dark .btn-outline,
body.mex-site .page-content--dark .btn-secondary {
    background: transparent !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.55) !important;
    box-shadow: none !important;
}

body.mex-site .hero .btn-outline:hover,
body.mex-site .hero .btn-secondary:hover,
body.mex-site .category-hero .btn-outline:hover,
body.mex-site .category-hero .btn-secondary:hover,
body.mex-site .page-content--dark .btn-outline:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.85) !important;
    color: #ffffff !important;
}

/* Primary in category hero stays blue */
body.mex-site .category-hero .btn-primary,
body.mex-site .category-hero .btn:not(.btn-outline):not(.btn-secondary) {
    background: var(--mex-blue) !important;
    color: #ffffff !important;
    border-color: rgba(34, 104, 255, 0.75) !important;
}

/* White primary CTA on dark footer-style cards */
body.mex-site .category-intro__box .btn:not(.btn-outline),
body.mex-site .category-cta__box .btn:not(.btn-outline),
body.mex-site .cta-card .btn:not(.btn-outline) {
    background: #ffffff !important;
    color: var(--mex-navy) !important;
    border-color: rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 0 18px rgba(255, 255, 255, 0.15) !important;
}

body.mex-site .cta-card .btn:not(.btn-outline):hover,
body.mex-site .category-intro__box .btn:not(.btn-outline):hover {
    background: #eef4ff !important;
    color: var(--mex-blue) !important;
    border-color: #ffffff !important;
}

/* Product card buttons — colors only */
body.mex-site .mex-product-card .btn.mex-product-card__detail,
body.mex-site .product-card .btn.mex-product-card__detail {
    background: #ffffff !important;
    color: var(--mex-navy) !important;
    border-color: var(--mex-blue) !important;
}

body.mex-site .mex-product-card .btn.mex-product-card__request,
body.mex-site .product-card .btn.mex-product-card__request {
    background: var(--mex-blue) !important;
    color: #ffffff !important;
    border-color: var(--mex-blue) !important;
}

/* ── 2) Hero benefit row ────────────────────────────────── */
body.mex-site .hero-features {
    gap: 28px 40px;
    margin-top: 40px;
    padding-top: 26px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

body.mex-site .hero-feature {
    gap: 14px;
    min-width: min(100%, 200px);
}

body.mex-site .hero-feature-icon {
    width: 44px;
    height: 44px;
    font-size: 1.05rem;
    color: #7ec8ff;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(120, 180, 255, 0.45);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12) inset;
}

body.mex-site .hero-feature-text strong {
    font-size: 0.9rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.01em;
}

body.mex-site .hero-feature-text span {
    font-size: 0.8rem;
    color: rgba(220, 235, 255, 0.82);
    line-height: 1.35;
}

@media (max-width: 768px) {
    body.mex-site .hero-features {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }

    body.mex-site .hero-feature {
        width: 100%;
    }
}

/* ── 3) Light catalog tiles (category pickers) ──────────── */
body.mex-site .page-content--muted {
    background: var(--mex-bg) !important;
    border-top: 1px solid var(--mex-border);
    border-bottom: 1px solid var(--mex-border);
}

body.mex-site .page-content--muted .section-heading h2 {
    color: var(--mex-navy) !important;
}

body.mex-site .page-content--muted .section-heading p {
    color: var(--mex-muted) !important;
}

body.mex-site .page-content--muted .section-heading__eyebrow {
    background: #ffffff;
    border: 1px solid var(--mex-border);
    color: var(--mex-blue);
}

body.mex-site .page-content--muted .tiles-grid,
body.mex-site .page-content--muted .product-category-grid {
    gap: 20px;
    background: transparent;
    border: none;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

body.mex-site .page-content--muted .tile {
    min-height: 0;
    padding: 28px 26px 24px;
    background: #ffffff;
    border: 1px solid var(--mex-border);
    box-shadow: 0 2px 8px rgba(7, 19, 39, 0.04);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

body.mex-site .page-content--muted .tile::before {
    width: 3px;
    background: var(--mex-blue);
}

body.mex-site .page-content--muted .tile:hover {
    background: #ffffff;
    border-color: var(--mex-blue);
    box-shadow: 0 8px 24px rgba(20, 99, 255, 0.1);
    transform: translateY(-2px);
}

body.mex-site .page-content--muted .tile h3 {
    color: var(--mex-navy);
    font-size: 1.12rem;
}

body.mex-site .page-content--muted .tile:hover h3 {
    color: var(--mex-blue);
}

body.mex-site .page-content--muted .tile p {
    color: var(--mex-muted);
    max-width: none;
}

body.mex-site .page-content--muted .tile-link {
    opacity: 1;
    transform: none;
    color: var(--mex-blue);
    margin-top: 16px;
}

/* ── 3b) /generatory-dusiku/ — dark / light section rhythm ─ */
body.mex-site .page-content--dark {
    position: relative;
    background:
        linear-gradient(rgba(34, 104, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(34, 104, 255, 0.04) 1px, transparent 1px),
        linear-gradient(180deg, #060912 0%, #0a1628 48%, #0e2040 100%) !important;
    background-size: 48px 48px, 48px 48px, auto !important;
    border-top: 1px solid rgba(70, 140, 255, 0.22) !important;
    border-bottom: 1px solid rgba(70, 140, 255, 0.22) !important;
}

body.mex-site .page-content--dark .content-narrow {
    position: relative;
    z-index: 1;
}

body.mex-site .page-content--dark .content-narrow h2 {
    color: #ffffff !important;
}

body.mex-site .page-content--dark .content-narrow > p {
    color: rgba(215, 232, 255, 0.9) !important;
}

body.mex-site .page-content--light {
    background: #ffffff !important;
    border-top: 1px solid var(--mex-border);
    border-bottom: 1px solid var(--mex-border);
}

body.mex-site .page-content--light .content-narrow h2,
body.mex-site .page-content--soft .content-narrow h2 {
    color: var(--mex-navy) !important;
}

body.mex-site .page-content--light .content-narrow > p,
body.mex-site .page-content--soft .content-narrow > p {
    color: #42536a !important;
}

body.mex-site .page-content--light .feature-list__item {
    background: #ffffff !important;
    border: 1px solid var(--mex-border) !important;
    box-shadow: 0 4px 16px rgba(7, 19, 39, 0.05) !important;
    backdrop-filter: none !important;
}

body.mex-site .page-content--light .feature-list__item h3 {
    color: var(--mex-navy) !important;
}

body.mex-site .page-content--light .feature-list__item p {
    color: #42536a !important;
}

body.mex-site .page-content--light .feature-list__item:hover {
    border-color: var(--mex-blue) !important;
    box-shadow: 0 8px 24px rgba(20, 99, 255, 0.1) !important;
}

body.mex-site .page-content--soft {
    background: var(--mex-bg-soft) !important;
    border-top: 1px solid var(--mex-border);
    border-bottom: 1px solid var(--mex-border);
}

body.mex-site .page-content--soft .section-heading__eyebrow,
body.mex-site .page-content--light.faq-section .section-heading__eyebrow {
    background: #ffffff;
    border: 1px solid var(--mex-border);
    color: var(--mex-blue);
}

body.mex-site .page-content--light.faq-section {
    background: #ffffff !important;
}

body.mex-site .page-content--light .faq-item {
    background: #ffffff !important;
    border: 1px solid var(--mex-border) !important;
    box-shadow: 0 4px 14px rgba(7, 19, 39, 0.05) !important;
}

body.mex-site .page-content--light .faq-item summary {
    color: var(--mex-navy) !important;
}

body.mex-site .page-content--light .faq-item p {
    color: #42536a !important;
}

body.mex-site .page-content--light .faq-item summary::after {
    background: rgba(20, 99, 255, 0.12) !important;
    color: var(--mex-blue) !important;
}

body.mex-site .page-content--light .faq-item[open] summary::after {
    background: #dce9ff !important;
}

body.mex-site .cta-section .cta-card {
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.08), transparent 42%),
        linear-gradient(135deg, #0a1628 0%, #0e2040 100%) !important;
    border: 1px solid rgba(70, 140, 255, 0.28) !important;
}

body.mex-site .cta-section .cta-card h2 {
    color: #ffffff !important;
}

body.mex-site .cta-section .cta-card p {
    color: rgba(220, 235, 255, 0.88) !important;
}

/* ── 4) Product detail polish ───────────────────────────── */
body.mex-site .page-product-detail .product-detail-page__body {
    background: var(--mex-bg);
}

body.mex-site .product-detail-page__hero {
    grid-template-columns: minmax(0, 0.95fr) minmax(340px, 1.05fr);
    gap: 36px;
}

body.mex-site .product-detail-page__media-frame {
    min-height: 320px;
    max-height: 420px;
    padding: 24px 20px;
    background: #ffffff !important;
}

body.mex-site .product-detail-page__image {
    max-width: 92%;
    max-height: 300px;
}

body.mex-site .product-detail-page__title {
    font-size: clamp(1.85rem, 2.6vw, 2.35rem);
}

body.mex-site .product-detail-page__subtitle {
    color: var(--mex-muted) !important;
    font-size: 1.02rem;
}

body.mex-site .product-detail-page__description {
    color: #374151 !important;
    font-size: 0.95rem;
    line-height: 1.7;
}

body.mex-site .product-detail-page__specs-title,
body.mex-site .product-detail-page__options-title {
    color: var(--mex-muted) !important;
}

body.mex-site .product-detail-page__specs-list {
    background: #ffffff !important;
}

body.mex-site .product-detail-page__spec-row {
    padding: 13px 18px;
}

body.mex-site .product-detail-page__cta-buttons {
    align-items: stretch;
}

body.mex-site .product-detail-page__cta-buttons .btn {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
}

body.mex-site .related-product-card {
    background: #ffffff !important;
    border: 1px solid var(--mex-border);
}

body.mex-site .related-product-card__media {
    background: var(--mex-bg) !important;
}

body.mex-site .product-detail-page__benefits-strip-inner {
    background: #ffffff !important;
    border-color: var(--mex-border) !important;
}

body.mex-site .product-detail-page__benefit-item {
    color: #374151 !important;
}

@media (max-width: 900px) {
    body.mex-site .product-detail-page__hero {
        grid-template-columns: 1fr;
    }

    body.mex-site .product-detail-page__media-frame {
        min-height: 260px;
        max-height: none;
    }
}

/* ── 5) News detail — related grid ──────────────────────── */
.news-grid--related[data-count="1"] {
    grid-template-columns: minmax(0, 1fr);
    max-width: 400px;
}

.news-grid--related[data-count="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 840px;
}

.news-grid--related[data-count="3"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
    .news-grid--related[data-count="2"],
    .news-grid--related[data-count="3"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: none;
    }
}

@media (max-width: 600px) {
    .news-grid--related[data-count="2"],
    .news-grid--related[data-count="3"] {
        grid-template-columns: 1fr;
    }

    .news-grid--related[data-count="1"] {
        max-width: none;
    }
}

/* =========================================================
   IRON SIGNAL — Precision Dark product design
   Scope: body.mex-site only (no admin bleed)
   Target: product list cards + product detail page
   ========================================================= */

:root {
    --is-dark-img:     #0d1828;
    --is-dark-img-h:   #111f35;
    --is-navy:         #071327;
    --is-blue:         #1463ff;
    --is-spec-line:    #e8eef8;
    --is-spec-lbl:     #53677f;
    --is-card-border:  #ccd8eb;
    --is-card-hover-sh: 0 8px 28px rgba(20, 99, 255, 0.14);
}

/* ─────────────────────────────────────────────────────────
   A) PRODUCT LIST — cards
   ───────────────────────────────────────────────────────── */

/* Card shell */
body.mex-site .mex-product-card,
body.mex-site .product-card {
    background: #ffffff !important;
    border: 1px solid var(--is-card-border) !important;
    border-top: 2px solid var(--is-card-border) !important;
    box-shadow: 0 2px 8px rgba(7, 19, 39, 0.04) !important;
    transition: border-color 0.18s ease, border-top-color 0.18s ease, box-shadow 0.18s ease !important;
}

body.mex-site .mex-product-card:hover,
body.mex-site .product-card:hover {
    border-color: var(--is-blue) !important;
    border-top-color: var(--is-blue) !important;
    box-shadow: var(--is-card-hover-sh) !important;
}

/* Image area — light vitrína */
body.mex-site .mex-product-card__media,
body.mex-site .product-card__media {
    background: #ffffff !important;
    border-bottom: 1px solid rgba(20, 99, 255, 0.14) !important;
    height: 260px !important;
}

body.mex-site .mex-product-card:hover .mex-product-card__media,
body.mex-site .product-card:hover .product-card__media {
    background: #f0f6ff !important;
}

/* Product image — larger + drop-shadow */
body.mex-site .mex-product-card__image {
    max-width: 78% !important;
    max-height: 78% !important;
    filter: drop-shadow(0 6px 18px rgba(0, 20, 60, 0.16)) !important;
    transition: transform 0.25s ease, filter 0.25s ease !important;
}

body.mex-site .mex-product-card:hover .mex-product-card__image {
    transform: scale(1.03) !important;
    filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.6)) !important;
}

/* Card body */
body.mex-site .mex-product-card__body,
body.mex-site .product-card__body {
    padding: 20px 22px 20px !important;
}

/* Title */
body.mex-site .mex-product-card__title {
    font-size: 1.2rem !important;
    font-weight: 800 !important;
    color: var(--is-navy) !important;
    margin: 0 0 6px !important;
    letter-spacing: -0.01em !important;
}

body.mex-site .mex-product-card__title-link { color: var(--is-navy) !important; }
body.mex-site .mex-product-card__title-link:hover { color: var(--is-blue) !important; }

/* Subtitle */
body.mex-site .mex-product-card__subtitle {
    font-size: 0.82rem !important;
    color: var(--mex-muted) !important;
    margin-bottom: 12px !important;
    line-height: 1.5 !important;
}

/* Specs — clean 2-col technical table, no bullet dot */
body.mex-site .mex-product-card__specs {
    border-top: 1px solid var(--is-spec-line) !important;
    margin-bottom: 12px !important;
}

body.mex-site .mex-product-card__spec {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 0 8px !important;
    padding: 7px 0 !important;
    border-bottom: 1px solid var(--is-spec-line) !important;
    border-top: none !important;
}

body.mex-site .mex-product-card__spec:first-child { border-top: none !important; }
body.mex-site .mex-product-card__spec:last-child { border-bottom: 1px solid var(--is-spec-line) !important; }

body.mex-site .mex-product-card__spec::before { display: none !important; }

body.mex-site .mex-product-card__spec-label {
    font-size: 0.78rem !important;
    color: var(--is-spec-lbl) !important;
    font-weight: 400 !important;
}

body.mex-site .mex-product-card__spec-value {
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    color: var(--is-navy) !important;
    white-space: nowrap !important;
}

/* Description */
body.mex-site .mex-product-card__description {
    color: var(--mex-muted) !important;
    font-size: 0.82rem !important;
    margin-bottom: 12px !important;
}

/* CTA zone */
body.mex-site .mex-product-card__actions {
    border-top: 1px solid #e8eef8 !important;
    padding-top: 14px !important;
}

/* Ghost "Detail" button */
body.mex-site .mex-product-card .btn.mex-product-card__detail,
body.mex-site .product-card .btn.mex-product-card__detail {
    background: #ffffff !important;
    color: var(--is-navy) !important;
    border: 1px solid #b8cadf !important;
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;
}

body.mex-site .mex-product-card .btn.mex-product-card__detail:hover,
body.mex-site .product-card .btn.mex-product-card__detail:hover {
    background: #f0f6ff !important;
    border-color: var(--is-blue) !important;
    color: var(--is-blue) !important;
}

/* Primary "Poptat" button */
body.mex-site .mex-product-card .btn.mex-product-card__request,
body.mex-site .product-card .btn.mex-product-card__request {
    background: var(--is-blue) !important;
    border-color: var(--is-blue) !important;
    color: #ffffff !important;
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;
}

body.mex-site .mex-product-card .btn.mex-product-card__request:hover,
body.mex-site .product-card .btn.mex-product-card__request:hover {
    background: #0f52d9 !important;
    border-color: #0f52d9 !important;
}

/* ─────────────────────────────────────────────────────────
   B) PRODUCT DETAIL PAGE
   ───────────────────────────────────────────────────────── */

/* Page body background */
body.mex-site .page-product-detail .product-detail-page__body {
    background: #f4f7fb !important;
}

/* Hero layout — give image column slightly more weight */
body.mex-site .product-detail-page__hero {
    grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.95fr) !important;
    gap: 36px !important;
}

/* Image panel — light vitrína */
body.mex-site .product-detail-page__media-frame {
    background: #ffffff !important;
    border: 1px solid rgba(20, 99, 255, 0.18) !important;
    border-top: 2px solid rgba(20, 99, 255, 0.45) !important;
    min-height: 440px !important;
    max-height: none !important;
    padding: 36px 32px !important;
}

body.mex-site .product-detail-page__gallery:hover .product-detail-page__media-frame {
    background: #f5f8fc !important;
}

/* Product image in detail */
body.mex-site .product-detail-page__image {
    max-width: 85% !important;
    max-height: 360px !important;
    filter: drop-shadow(0 10px 30px rgba(0, 20, 60, 0.14)) !important;
    transition: transform 0.3s ease !important;
}

body.mex-site .product-detail-page__gallery:hover .product-detail-page__image {
    transform: scale(1.02) !important;
}

/* Breadcrumb — clean minimal on light bg */
body.mex-site .product-detail-page__breadcrumb {
    font-size: 0.8rem !important;
    color: var(--mex-muted) !important;
}

body.mex-site .product-detail-page__breadcrumb a {
    color: var(--is-blue) !important;
    font-weight: 500 !important;
}

body.mex-site .product-detail-page__breadcrumb span:last-child {
    color: var(--is-navy) !important;
    font-weight: 600 !important;
}

/* Category tag — technical outline style */
body.mex-site .product-detail-page__category-tag {
    background: transparent !important;
    border: 1px solid rgba(20, 99, 255, 0.30) !important;
    color: var(--is-blue) !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.12em !important;
    padding: 5px 12px !important;
}

/* Title — dominant */
body.mex-site .product-detail-page__title {
    font-size: clamp(2rem, 3.2vw, 2.9rem) !important;
    font-weight: 900 !important;
    color: var(--is-navy) !important;
    letter-spacing: -0.03em !important;
    line-height: 1.05 !important;
    margin-bottom: 12px !important;
}

/* Subtitle */
body.mex-site .product-detail-page__subtitle {
    font-size: 1rem !important;
    color: var(--mex-muted) !important;
    font-weight: 500 !important;
    margin-bottom: 16px !important;
    line-height: 1.55 !important;
}

/* Description */
body.mex-site .product-detail-page__description {
    color: #42536a !important;
    font-size: 0.92rem !important;
    line-height: 1.7 !important;
    margin-bottom: 18px !important;
}

/* Specs section title */
body.mex-site .product-detail-page__specs-title,
body.mex-site .product-detail-page__options-title {
    font-size: 0.68rem !important;
    letter-spacing: 0.13em !important;
    color: var(--is-spec-lbl) !important;
    margin-bottom: 8px !important;
}

/* Specs list — blue accent top border */
body.mex-site .product-detail-page__specs-list {
    background: #ffffff !important;
    border: 1px solid var(--mex-border) !important;
    border-top: 2px solid var(--is-blue) !important;
}

/* Spec rows — clean 2-col, no bullet */
body.mex-site .product-detail-page__spec-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 0 16px !important;
    padding: 11px 16px !important;
    border-bottom: 1px solid #eff4fb !important;
}

body.mex-site .product-detail-page__spec-row:last-child { border-bottom: none !important; }
body.mex-site .product-detail-page__spec-row::before { display: none !important; }

body.mex-site .product-detail-page__spec-row dt {
    font-size: 0.84rem !important;
    font-weight: 400 !important;
    color: var(--is-spec-lbl) !important;
}

body.mex-site .product-detail-page__spec-row dd {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    color: var(--is-navy) !important;
    text-align: right !important;
    white-space: nowrap !important;
}

/* Highlight chips */
body.mex-site .product-detail-page__highlight {
    background: #f0f6ff !important;
    border: 1px solid rgba(20, 99, 255, 0.20) !important;
    color: var(--is-navy) !important;
}

/* CTA primary */
body.mex-site .page-product-detail .product-detail-page__cta-primary.btn {
    background: var(--is-blue) !important;
    border-color: var(--is-blue) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 0.88rem !important;
    letter-spacing: 0.04em !important;
    min-height: 50px !important;
}

body.mex-site .page-product-detail .product-detail-page__cta-primary.btn:hover {
    background: #0f52d9 !important;
    border-color: #0f52d9 !important;
}

/* CTA brochure */
body.mex-site .page-product-detail .product-detail-page__cta-brochure.btn {
    background: #ffffff !important;
    color: var(--is-navy) !important;
    border: 1px solid #b8cadf !important;
    font-weight: 600 !important;
    font-size: 0.88rem !important;
    min-height: 50px !important;
}

body.mex-site .page-product-detail .product-detail-page__cta-brochure.btn:hover {
    background: #f0f6ff !important;
    border-color: var(--is-blue) !important;
    color: var(--is-blue) !important;
}

/* Back link */
body.mex-site .product-detail-page__back { color: var(--mex-muted) !important; font-size: 0.82rem !important; }
body.mex-site .product-detail-page__back:hover { color: var(--is-blue) !important; }

/* Benefits strip — light tech accent */
body.mex-site .product-detail-page__benefits-strip-inner {
    background: #f0f6ff !important;
    border: 1px solid rgba(20, 99, 255, 0.16) !important;
    border-top: 2px solid var(--is-blue) !important;
}

body.mex-site .product-detail-page__benefits-label {
    background: rgba(20, 99, 255, 0.08) !important;
    border-right: 1px solid rgba(20, 99, 255, 0.18) !important;
    color: var(--is-navy) !important;
}

body.mex-site .product-detail-page__benefit-item {
    color: var(--is-navy) !important;
    border-right-color: rgba(20, 99, 255, 0.14) !important;
}

body.mex-site .product-detail-page__benefit-item::before {
    background: var(--is-blue) !important;
}

/* ─────────────────────────────────────────────────────────
   C) RELATED PRODUCTS section
   ───────────────────────────────────────────────────────── */

body.mex-site .related-products__header { border-bottom-color: var(--mex-border) !important; }

body.mex-site .related-products__header h2 {
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    color: var(--is-navy) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
}

body.mex-site .related-products__category-link {
    color: var(--is-blue) !important;
    font-size: 0.82rem !important;
}

body.mex-site .related-product-card {
    background: #ffffff !important;
    border: 1px solid var(--mex-border) !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
}

body.mex-site .related-product-card:hover {
    border-color: var(--is-blue) !important;
    box-shadow: 0 6px 20px rgba(20, 99, 255, 0.12) !important;
}

/* Related card image — light panel */
body.mex-site .related-product-card__media {
    background: #f5f8fc !important;
    border-right: 1px solid rgba(20, 99, 255, 0.14) !important;
}

body.mex-site .related-product-card__image {
    filter: drop-shadow(0 4px 10px rgba(0, 20, 60, 0.13)) !important;
}

body.mex-site .related-product-card__title { color: var(--is-navy) !important; font-weight: 700 !important; }
body.mex-site .related-product-card__title-link { color: var(--is-navy) !important; }
body.mex-site .related-product-card__title-link:hover { color: var(--is-blue) !important; }
body.mex-site .related-product-card__description { color: var(--mex-muted) !important; }
body.mex-site .related-product-card__detail-link { color: var(--is-blue) !important; font-weight: 600 !important; }

/* ─────────────────────────────────────────────────────────
   D) OLD-STYLE category product-detail layout (product-layout.php)
      Used in /samostatne-agregaty/ etc.
   ───────────────────────────────────────────────────────── */

body.mex-site .product-detail__media {
    background: #ffffff !important;
    border: 1px solid rgba(20, 99, 255, 0.18) !important;
    border-top: 2px solid rgba(20, 99, 255, 0.45) !important;
}

body.mex-site .product-detail__media img {
    filter: drop-shadow(0 8px 24px rgba(0, 20, 60, 0.15)) !important;
}

body.mex-site .product-detail__media:hover img {
    transform: scale(1.03) !important;
}

body.mex-site .product-detail__content h2 { color: var(--is-navy) !important; }
body.mex-site .product-detail__subtitle { color: var(--mex-muted) !important; }

/* Spec table in old-style layout */
body.mex-site .specs-table {
    background: #ffffff !important;
    border: 1px solid var(--mex-border) !important;
    border-top: 2px solid var(--is-blue) !important;
}

body.mex-site .spec-row { border-bottom-color: #eff4fb !important; }

body.mex-site .spec-row__label {
    background: #f8fafc !important;
    color: var(--is-spec-lbl) !important;
    font-weight: 600 !important;
}

body.mex-site .spec-row__value {
    background: #ffffff !important;
    color: var(--is-navy) !important;
    font-weight: 600 !important;
}

/* ─────────────────────────────────────────────────────────
   E) Responsive — mobile adjustments
   ───────────────────────────────────────────────────────── */

@media (max-width: 900px) {
    body.mex-site .product-detail-page__hero {
        grid-template-columns: 1fr !important;
    }

    body.mex-site .product-detail-page__media-frame {
        min-height: 300px !important;
        max-height: none !important;
    }
}

@media (max-width: 640px) {
    body.mex-site .mex-product-card__media,
    body.mex-site .product-card__media {
        height: 220px !important;
    }
}

/* ─────────────────────────────────────────────────────────
   F) PRODUKTY PAGE — category tile grid (light theme)
   ───────────────────────────────────────────────────────── */

/* Section padding a heading */
body.mex-site .product-tiles {
    background: var(--mex-bg) !important;
    border-top:    1px solid var(--mex-border) !important;
    border-bottom: 1px solid var(--mex-border) !important;
    padding: 72px 0 80px !important;
}

body.mex-site .product-tiles h2 {
    color: var(--mex-navy) !important;
}

/* Grid — světlý border místo tmavého gap */
body.mex-site .tiles-grid {
    background: var(--mex-border) !important;
    border: 1px solid var(--mex-border) !important;
    border-radius: 0 !important;
    overflow: hidden !important;
}

/* Jednotlivé dlaždice */
body.mex-site .tile {
    background: #ffffff !important;
    min-height: 220px !important;
    transition: background 0.2s ease, box-shadow 0.2s ease !important;
}

body.mex-site .tile:hover {
    background: #f0f6ff !important;
    transform: none !important;
}

/* Levý accent pruh na hover */
body.mex-site .tile::before {
    background: var(--mex-blue) !important;
}

/* Icon (N₂, CO₂, SECO…) */
body.mex-site .tile-icon {
    color: rgba(20, 99, 255, 0.10) !important;
    font-size: 2rem !important;
}

body.mex-site .tile:hover .tile-icon {
    color: rgba(20, 99, 255, 0.22) !important;
}

/* Nadpis dlaždice */
body.mex-site .tile h3 {
    color: var(--mex-navy) !important;
    font-size: 1.05rem !important;
}

body.mex-site .tile:hover h3 {
    color: var(--mex-blue) !important;
}

/* Popis */
body.mex-site .tile p {
    color: var(--mex-muted) !important;
}

/* Odkaz "Zjistit více →" — vždy viditelný na světlém pozadí */
body.mex-site .tile-link {
    color: var(--mex-blue) !important;
    opacity: 1 !important;
    transform: none !important;
    font-size: 0.8rem !important;
}

body.mex-site .tile:hover .tile-link {
    color: #0a4fd4 !important;
}

/* Homepage — reprezentativní dlaždice, grid 3 + 2 (ne 5 úzkých sloupců) */
body.mex-site .product-tiles--homepage {
    padding: 72px 0 80px !important;
}

body.mex-site .product-tiles--homepage .tiles-layout {
    grid-template-columns: minmax(260px, 30%) minmax(0, 1fr) !important;
    gap: 36px 40px !important;
    align-items: start !important;
}

body.mex-site .product-tiles--homepage .tiles-grid--homepage,
body.mex-site .product-tiles--homepage .tiles-grid {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    grid-auto-rows: auto !important;
    gap: 16px !important;
    background: transparent !important;
    border: none !important;
    overflow: visible !important;
}

/* Horní řada: 3 karty; spodní řada: 2 karty vycentrované */
body.mex-site .product-tiles--homepage .tile:nth-child(1),
body.mex-site .product-tiles--homepage .tile:nth-child(2),
body.mex-site .product-tiles--homepage .tile:nth-child(3) {
    grid-column: span 2 !important;
}

body.mex-site .product-tiles--homepage .tile:nth-child(4) {
    grid-column: 2 / span 2 !important;
}

body.mex-site .product-tiles--homepage .tile:nth-child(5) {
    grid-column: 4 / span 2 !important;
}

body.mex-site .product-tiles--homepage .tile {
    min-width: 220px !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 22px 22px 20px !important;
    border: 1px solid var(--mex-border) !important;
    border-radius: 0 !important;
    box-shadow: 0 2px 10px rgba(7, 19, 39, 0.04) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}

body.mex-site .product-tiles--homepage .tile::before {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 0 !important;
    background: var(--mex-blue) !important;
}

body.mex-site .product-tiles--homepage .tile:hover {
    border-color: var(--mex-blue) !important;
    box-shadow: 0 8px 24px rgba(20, 99, 255, 0.1) !important;
}

body.mex-site .product-tiles--homepage .tile:hover::before {
    height: 3px !important;
}

body.mex-site .product-tiles--homepage .tile-icon {
    position: static !important;
    display: block !important;
    margin: 0 0 10px !important;
    font-size: 1.35rem !important;
    color: rgba(20, 99, 255, 0.5) !important;
    letter-spacing: -0.04em !important;
}

body.mex-site .product-tiles--homepage .tile:hover .tile-icon {
    color: rgba(20, 99, 255, 0.75) !important;
}

body.mex-site .product-tiles--homepage .tile h3 {
    font-size: 1.1rem !important;
    line-height: 1.3 !important;
    margin-bottom: 10px !important;
    max-width: none !important;
    hyphens: none !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

body.mex-site .product-tiles--homepage .tile p {
    flex: 1 1 auto !important;
    max-width: none !important;
    font-size: 0.9rem !important;
    line-height: 1.55 !important;
    margin-bottom: 14px !important;
    hyphens: none !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}

body.mex-site .product-tiles--homepage .tile-link {
    margin-top: auto !important;
    letter-spacing: 0.06em !important;
    transition: color 0.2s ease, transform 0.2s ease !important;
}

body.mex-site .product-tiles--homepage .tile:hover .tile-link {
    transform: translateX(3px) !important;
}

body.mex-site .product-tiles--homepage .tile h3 .chem-formula,
body.mex-site .product-tiles--homepage .tile p .chem-formula {
    color: inherit !important;
}

/* ── Large desktop — wider container, taller cards ── */
@media (min-width: 1400px) {
    body.mex-site .product-tiles--homepage {
        padding: 88px 0 96px !important;
    }

    body.mex-site .product-tiles--homepage .tiles-layout {
        width: min(1440px, calc(100% - 80px)) !important;
        gap: 48px 56px !important;
    }

    body.mex-site .product-tiles--homepage .tile {
        padding: 28px 26px 24px !important;
        min-height: 180px !important;
    }

    body.mex-site .product-tiles--homepage .tiles-left h2,
    body.mex-site .product-tiles--homepage .tiles-left h2 {
        font-size: 2.1rem !important;
    }
}

@media (max-width: 1100px) {
    body.mex-site .product-tiles--homepage .tiles-grid--homepage,
    body.mex-site .product-tiles--homepage .tiles-grid {
        grid-template-columns: repeat(2, minmax(220px, 1fr)) !important;
    }

    body.mex-site .product-tiles--homepage .tile:nth-child(n) {
        grid-column: auto !important;
    }
}

@media (max-width: 900px) {
    body.mex-site .product-tiles--homepage .tiles-layout {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 600px) {
    body.mex-site .product-tiles--homepage .tiles-grid--homepage,
    body.mex-site .product-tiles--homepage .tiles-grid {
        grid-template-columns: 1fr !important;
    }

    body.mex-site .product-tiles--homepage .tile:nth-child(n) {
        grid-column: auto !important;
        min-width: 0 !important;
    }
}

/* ── News listing redesign ───────────────────────────────── */
body.mex-site .news-card:hover .news-card__title {
    color: var(--mex-blue) !important;
}

body.mex-site .news-filter-chip.is-active {
    background: var(--mex-blue) !important;
    border-color: var(--mex-blue) !important;
    color: #ffffff !important;
}