/* =========================================================
   AirPurifierFAQ Comparison Engine v2.1
========================================================= */

.apfaq-comparison-engine-active{
    --apfaq-ce-ink:#102f39;
    --apfaq-ce-text:#36515a;
    --apfaq-ce-muted:#70858c;
    --apfaq-ce-line:#dbe6e8;
    --apfaq-ce-soft:#f4f9fa;
    --apfaq-ce-accent:#0b8fa1;
}

/*
 * Content Builder + AI Writer can both output their own product
 * blocks. The premium Comparison Engine becomes the one canonical
 * comparison presentation on comparison pages.
 */
.apfaq-comparison-engine-active
.apfaq-page-shell:has(.apfaq-ce-module, .apfaq-ce-native-table)
> .apfaq-shell-compare,

.apfaq-comparison-engine-active
.apfaq-page-shell:has(.apfaq-ce-module, .apfaq-ce-native-table)
> .apfaq-shell-products,

.apfaq-comparison-engine-active
.apfaq-page-shell:has(.apfaq-ce-module, .apfaq-ce-native-table)
.apfaq-editorial__products{
    display:none!important;
}


/* =========================================================
   MAIN MODULE
========================================================= */

.apfaq-ce-module{
    width:min(1380px,calc(100% - 48px));
    margin:42px auto 50px;
    color:var(--apfaq-ce-ink);
    font-family:Lato,Arial,sans-serif;
}

.apfaq-ce-module,
.apfaq-ce-module *{
    box-sizing:border-box;
}

.apfaq-ce-head{
    max-width:780px;
    margin:0 0 22px;
}

.apfaq-ce-head>span,
.apfaq-ce-table-head>span{
    display:block;
    margin-bottom:7px;
    color:var(--apfaq-ce-accent);
    font-size:10.5px;
    line-height:1.2;
    font-weight:900;
    letter-spacing:.1em;
    text-transform:uppercase;
}

.apfaq-ce-head h2,
.apfaq-ce-table-head h2{
    margin:0;
    color:var(--apfaq-ce-ink);
    font-size:clamp(28px,2.4vw,38px);
    line-height:1.15;
    letter-spacing:-.025em;
}

.apfaq-ce-head p,
.apfaq-ce-table-head p{
    margin:8px 0 0;
    color:#61777e;
    font-size:14px;
    line-height:1.62;
}


/* =========================================================
   PRODUCT CARDS
========================================================= */

.apfaq-ce-products{
    display:grid;
    grid-template-columns:repeat(var(--apfaq-ce-cols,2),minmax(0,1fr));
    gap:16px;
}

.apfaq-ce-product{
    min-width:0;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    background:#fff;
    border:1px solid var(--apfaq-ce-line);
    box-shadow:0 8px 28px rgba(17,52,62,.045);
}

.apfaq-ce-product__topline{
    min-height:39px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:10px 15px;
    border-bottom:1px solid #edf2f3;
    background:#fbfdfd;
}

.apfaq-ce-product__topline span{
    color:var(--apfaq-ce-accent);
    font-size:10px;
    font-weight:900;
    letter-spacing:.07em;
    text-transform:uppercase;
}

.apfaq-ce-product__topline em{
    min-width:0;
    overflow:hidden;
    color:#6d8188;
    font-size:10px;
    font-style:normal;
    font-weight:700;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.apfaq-ce-product__media{
    height:300px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    overflow:hidden;
    background:#fff;
    text-decoration:none!important;
}

.apfaq-ce-product__img,
.apfaq-ce-product__media img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-width:100%!important;
    object-fit:contain!important;
    object-position:center center!important;
    background:#fff!important;
    transform:none!important;
}

.apfaq-ce-product__body{
    flex:1;
    display:flex;
    flex-direction:column;
    padding:20px 20px 21px;
    border-top:1px solid #edf2f3;
}

.apfaq-ce-product__brand{
    margin-bottom:7px;
    color:var(--apfaq-ce-accent);
    font-size:10px;
    line-height:1.2;
    font-weight:900;
    letter-spacing:.06em;
    text-transform:uppercase;
}

.apfaq-ce-product h3{
    margin:0;
    color:var(--apfaq-ce-ink);
    font-size:18px;
    line-height:1.36;
    font-weight:800;
}

.apfaq-ce-product h3 a{
    color:inherit!important;
    text-decoration:none!important;
}

.apfaq-ce-product h3 a:hover{
    color:var(--apfaq-ce-accent)!important;
}

.apfaq-ce-product__fact{
    margin:10px 0 0!important;
    color:#6b7f86!important;
    font-size:12px!important;
    line-height:1.5!important;
}

.apfaq-ce-product__price{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    margin-top:auto;
    padding-top:18px;
}

.apfaq-ce-price-current{
    color:var(--apfaq-ce-ink);
    font-size:19px;
    font-weight:900;
}

.apfaq-ce-price-sale{
    display:inline-flex;
    align-items:center;
    min-height:24px;
    padding:3px 7px;
    background:#eaf8f5;
    color:#178268;
    font-size:10px;
    font-weight:900;
    letter-spacing:.03em;
}

.apfaq-ce-product__link{
    display:flex;
    width:100%;
    min-height:44px;
    align-items:center;
    justify-content:center;
    margin-top:13px;
    padding:10px 14px;
    background:var(--apfaq-ce-accent);
    color:#fff!important;
    font-size:12px;
    font-weight:900;
    text-decoration:none!important;
    transition:filter .16s ease;
}

.apfaq-ce-product__link:hover{
    filter:brightness(.93);
}


/* =========================================================
   CLEAN COMPARISON TABLE
========================================================= */

.apfaq-ce-table-section{
    margin-top:34px;
}

.apfaq-ce-table-head{
    max-width:760px;
    margin-bottom:16px;
}

.apfaq-ce-tablewrap{
    width:100%;
    overflow-x:auto;
    border:1px solid var(--apfaq-ce-line);
    background:#fff;
    -webkit-overflow-scrolling:touch;
}

.apfaq-ce-table{
    width:100%;
    min-width:760px;
    margin:0!important;
    border:0!important;
    border-collapse:collapse!important;
    table-layout:fixed!important;
}

.apfaq-ce-table th,
.apfaq-ce-table td{
    min-width:0;
    padding:15px 17px!important;
    border:0!important;
    border-right:1px solid #e4ecee!important;
    border-bottom:1px solid #e4ecee!important;
    vertical-align:middle!important;
    text-align:left!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:anywhere!important;
}

.apfaq-ce-table thead th{
    background:#eef6f7!important;
    color:#163842!important;
    font-size:12px!important;
    line-height:1.4!important;
    font-weight:900!important;
}

.apfaq-ce-table thead th:first-child{
    width:175px;
}

.apfaq-ce-table tbody th{
    width:175px;
    background:#f9fbfb!important;
    color:#39535c!important;
    font-size:12px!important;
    line-height:1.45!important;
    font-weight:800!important;
}

.apfaq-ce-table td{
    background:#fff!important;
    color:#314d56!important;
    font-size:12.5px!important;
    line-height:1.5!important;
}

.apfaq-ce-table tbody tr:nth-child(even) td{
    background:#fcfdfd!important;
}

.apfaq-ce-table tr:last-child>*{
    border-bottom:0!important;
}

.apfaq-ce-table tr>*:last-child{
    border-right:0!important;
}

.apfaq-ce-unknown{
    color:#9aa8ad;
    font-size:11px;
    font-style:italic;
}

.apfaq-ce-table .apfaq-ce-price-current{
    font-size:14px;
}

.apfaq-ce-table .apfaq-ce-price-sale{
    margin-left:6px;
    font-size:9px;
}

.apfaq-ce-note{
    max-width:850px;
    margin:13px 0 0!important;
    color:#75888e!important;
    font-size:11.5px!important;
    line-height:1.55!important;
}


/* =========================================================
   MAKE LONG ARTICLE CONTENT FEEL CONNECTED TO THE MODULE
========================================================= */

.apfaq-comparison-engine-active
.apfaq-page-shell--comparison
.apfaq-page-shell__body{
    margin-top:0!important;
}

.apfaq-comparison-engine-active
.apfaq-page-shell--comparison
.apfaq-page-shell__body
> h2:first-child{
    margin-top:0!important;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1100px){

    .apfaq-ce-products{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .apfaq-ce-product__media{
        height:260px;
    }
}

@media(max-width:700px){

    .apfaq-ce-module{
        width:calc(100% - 28px);
        margin:30px auto 38px;
    }

    .apfaq-ce-head{
        margin-bottom:16px;
    }

    .apfaq-ce-head h2,
    .apfaq-ce-table-head h2{
        font-size:27px;
    }

    .apfaq-ce-products{
        grid-template-columns:1fr;
        gap:12px;
    }

    .apfaq-ce-product__media{
        height:280px;
        padding:16px;
    }

    .apfaq-ce-product__body{
        padding:17px;
    }

    .apfaq-ce-table-section{
        margin-top:28px;
    }

    .apfaq-ce-tablewrap{
        margin-left:0;
        margin-right:0;
    }

    .apfaq-ce-table{
        min-width:680px;
    }

    .apfaq-ce-table th,
    .apfaq-ce-table td{
        padding:12px 13px!important;
    }

    .apfaq-ce-table thead th:first-child,
    .apfaq-ce-table tbody th{
        width:145px;
    }
}

@media(max-width:430px){

    .apfaq-ce-product__media{
        height:240px;
    }
}


/* v2.1.1: visual comparison sits directly below the Article Experience TOC */
.apfaq-ae-toc + .apfaq-ce-module{
    margin-top:30px;
}

@media(max-width:700px){
    .apfaq-ae-toc + .apfaq-ce-module{
        margin-top:22px;
    }
}


/* =========================================================
   v2.2.0 - NATIVE COMPARISON TABLE MODE
========================================================= */

.apfaq-ce-native-products{
    width:100%;
    margin:20px 0 24px;
    color:var(--apfaq-ce-ink);
}

.apfaq-ce-native-products__head{
    max-width:760px;
    margin:0 0 16px;
}

.apfaq-ce-native-products__head>span{
    display:block;
    margin-bottom:6px;
    color:var(--apfaq-ce-accent);
    font-size:10px;
    line-height:1.2;
    font-weight:900;
    letter-spacing:.09em;
    text-transform:uppercase;
}

.apfaq-ce-native-products__head h2{
    margin:0;
    color:var(--apfaq-ce-ink);
    font-size:clamp(25px,2vw,33px);
    line-height:1.15;
    letter-spacing:-.02em;
}

.apfaq-ce-native-products__head p{
    margin:8px 0 0;
    color:#647980;
    font-size:13px;
    line-height:1.58;
}

/*
 * Existing AI Writer table becomes the canonical comparison table.
 */
.apfaq-comparison-engine-active .apfaq-ce-native-table{
    width:100%!important;
    margin:18px 0 30px!important;
    border:1px solid var(--apfaq-ce-line)!important;
    border-collapse:collapse!important;
    table-layout:fixed!important;
    background:#fff!important;
}

.apfaq-comparison-engine-active .apfaq-ce-native-table th,
.apfaq-comparison-engine-active .apfaq-ce-native-table td{
    padding:15px 17px!important;
    border:0!important;
    border-right:1px solid #dfe9eb!important;
    border-bottom:1px solid #dfe9eb!important;
    vertical-align:top!important;
    text-align:left!important;
    color:#294650!important;
    font-size:13px!important;
    line-height:1.58!important;
    word-break:normal!important;
    overflow-wrap:anywhere!important;
    background:#fff!important;
}

.apfaq-comparison-engine-active .apfaq-ce-native-table thead th{
    background:#eef6f7!important;
    color:#173842!important;
    font-weight:900!important;
}

.apfaq-comparison-engine-active .apfaq-ce-native-table tbody tr:nth-child(even) td{
    background:#fbfdfd!important;
}

.apfaq-comparison-engine-active .apfaq-ce-native-table tbody th{
    width:190px;
    background:#f7fafb!important;
    color:#294650!important;
    font-weight:800!important;
}

.apfaq-comparison-engine-active .apfaq-ce-native-table tr>*:last-child{
    border-right:0!important;
}

.apfaq-comparison-engine-active .apfaq-ce-native-table tr:last-child>*{
    border-bottom:0!important;
}

/*
 * Exact model-vs-model table headers become real mini product cards.
 */
.apfaq-ce-native-table__product-head{
    padding:14px!important;
}

.apfaq-ce-table-product{
    display:flex;
    min-height:100%;
    flex-direction:column;
    align-items:flex-start;
}

.apfaq-ce-table-product__image{
    width:100%;
    height:170px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:10px;
    padding:8px;
    background:#fff;
    text-decoration:none!important;
}

.apfaq-ce-table-product__image img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-width:100%!important;
    object-fit:contain!important;
    object-position:center!important;
    background:#fff!important;
}

.apfaq-ce-table-product__brand{
    display:block;
    margin-bottom:5px;
    color:var(--apfaq-ce-accent);
    font-size:9px;
    font-weight:900;
    letter-spacing:.06em;
    text-transform:uppercase;
}

.apfaq-ce-table-product strong{
    display:block;
    color:var(--apfaq-ce-ink);
    font-size:13px;
    line-height:1.4;
}

.apfaq-ce-table-product strong a{
    color:inherit!important;
    text-decoration:none!important;
}

.apfaq-ce-table-product__price{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:6px;
    margin-top:8px;
}

.apfaq-ce-table-product__price .apfaq-ce-price-current{
    font-size:14px;
}

.apfaq-ce-table-product__price .apfaq-ce-price-sale{
    font-size:8px;
}

.apfaq-ce-table-product__button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:34px;
    margin-top:10px;
    padding:7px 11px;
    border:1px solid var(--apfaq-ce-accent);
    color:var(--apfaq-ce-accent)!important;
    background:#fff;
    font-size:10px;
    font-weight:900;
    text-decoration:none!important;
}

.apfaq-ce-table-product__button:hover{
    color:#fff!important;
    background:var(--apfaq-ce-accent);
}

/*
 * Category/brand pages can show multiple representatives.
 * Their product cards remain compact and the original conceptual
 * comparison table stays directly below.
 */
.apfaq-ce-native-products .apfaq-ce-products{
    grid-template-columns:repeat(var(--apfaq-ce-cols,2),minmax(0,1fr));
}

.apfaq-ce-native-products .apfaq-ce-product__media{
    height:220px;
}

.apfaq-ce-native-products .apfaq-ce-product h3{
    font-size:15px;
}

@media(max-width:760px){

    .apfaq-comparison-engine-active .apfaq-ce-native-table{
        min-width:720px!important;
    }

    .apfaq-comparison-engine-active .apfaq-page-shell__body{
        overflow-x:visible!important;
    }

    .apfaq-comparison-engine-active .apfaq-ce-native-table{
        display:table!important;
    }

    .apfaq-ce-native-products .apfaq-ce-products{
        grid-template-columns:1fr!important;
    }

    .apfaq-ce-native-products .apfaq-ce-product__media{
        height:250px;
    }

    .apfaq-ce-table-product__image{
        height:130px;
    }
}