/* ============================================================
   ChemSmog — mobile review (Widerview, 2026-09-30)
   Loaded last. Mobile-only unless stated.
   ============================================================ */

/* dropdown pills: weight 500 + no tracking (weight 600 + tracking rendered
   "AT TIVE" on iOS Safari); chevron kept */
body .cs-select-pill {
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-shadow: none !important;
}
body .cs-pill-tabs a.is-active { text-shadow: none !important; }

/* FAQ: category switch is client-side, panels toggle via [hidden] */
.cs-faq-panel[hidden] { display: none !important; }

/* legal links row lives in the footer bottom strip on mobile only */
.cs-footer__legal-row { display: none; }

/* ---------- drawer (all mobile/tablet widths) ---------- */
@media (max-width: 991.98px) {
    body #menu-mobile { display: flex; flex-direction: column; }
    body #menu-mobile .panel__content { flex: 1 1 auto; display: flex; flex-direction: column; }
    body #menu-mobile .panel__header {
        background: linear-gradient(90deg, var(--cs-btn-g1) 0%, var(--cs-btn-g2) 100%) !important;
        color: #fff !important;
    }
    body #menu-mobile .panel__header h3 {
        color: #fff !important;
        font-family: 'Fredoka', sans-serif !important;
        font-weight: 500 !important;
        font-size: 20px !important;
    }
    body #menu-mobile .panel__header .svg-icon,
    body #menu-mobile .panel__header svg { color: #fff !important; fill: #fff !important; }
    body #menu-mobile .menu--mobile > li > a {
        color: var(--cs-blue) !important;
        font-family: 'Fredoka', sans-serif !important;
        font-size: 16px !important;
    }
    body #menu-mobile .menu--mobile > li > a:hover,
    body #menu-mobile .menu--mobile > li > a:focus,
    body #menu-mobile .menu--mobile > li > a:active,
    body #menu-mobile .menu--mobile > li.active > a,
    body #menu-mobile .menu--mobile > li.current-menu-item > a { color: var(--cs-green) !important; }

    body #menu-mobile .cs-drawer__social {
        margin-top: auto;
        padding: 22px 20px 26px;
        display: flex;
        align-items: center;
        gap: 14px;
        font-family: 'Fredoka', sans-serif;
        font-size: 14px;
        color: var(--cs-blue);
        border-top: 1px solid rgba(0, 0, 0, 0.06);
    }
    body #menu-mobile .cs-drawer__social a {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: var(--cs-blue);
        text-decoration: none;
        font-weight: 500;
    }
    body #menu-mobile .cs-drawer__social a:hover,
    body #menu-mobile .cs-drawer__social a:active { color: var(--cs-green); }

    /* auctions: quick-bid panel stays in the flow (no hover on touch),
       so the card grows instead of overlapping the footer */
    body .cs-auction-card__bid-actions {
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        pointer-events: auto !important;
        border: none !important;
        padding: 4px 12px 12px !important;
    }
}

/* ---------- phones ---------- */
@media (max-width: 767.98px) {
    /* hero: shorter (slides are absolutely positioned, the section height is explicit) */
    body .cs-hero { height: 430px !important; min-height: 0 !important; }

    /* category cards: full square image, card grows to fit */
    html body .cs-cat-card,
    html body .cs-products .cs-cat-card {
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: auto !important;
        padding: 16px 12px 12px !important;
    }
    html body .cs-cat-card .cs-cat-card__title { min-height: 0 !important; margin: 0 0 12px !important; }
    html body .cs-cat-card .cs-cat-card__img,
    html body .cs-products .cs-cat-card .cs-cat-card__img {
        width: 100% !important;
        height: auto !important;
        flex: 0 0 auto !important;
        aspect-ratio: 1 / 1 !important;
        margin-top: auto !important;
    }

    /* about: value boxes 2 per row, same shape as desktop */
    body .cs-values2__grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        padding: 0 16px !important;
    }
    body .cs-value2-card {
        min-height: 0 !important;
        border-radius: 70px !important;
        padding: 26px 14px 24px !important;
    }
    body .cs-value2-card__icon { width: 44px !important; height: 44px !important; margin-bottom: 10px !important; }
    body .cs-value2-card__title { font-size: 16px !important; margin: 0 0 8px !important; }
    body .cs-value2-card__body { font-size: 13px !important; line-height: 1.45 !important; }
    body .cs-value2-card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        width: calc(50% - 6px);
        justify-self: center;
    }

    /* about: team cards 2 per row, same shape as desktop, bigger texts */
    body .cs-team2-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        padding: 0 16px !important;
    }
    body .cs-team2-card {
        border-radius: 12px 12px 999px 999px !important;
        padding: 18px 12px 84% !important;
        width: auto !important;
        flex: none !important;
    }
    body .cs-team2-card__name { font-size: 16px !important; }
    body .cs-team2-card__role { font-size: 13px !important; }
    body .cs-team2-card__linkedin { font-size: 13px !important; }
    body .cs-team2-card__photo { width: 59% !important; height: auto !important; aspect-ratio: 1 / 1; bottom: 0 !important; margin-bottom: 17% !important; }
    body .cs-team2-card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        width: calc(50% - 6px);
        justify-self: center;
    }

    /* contact: person cards 2 per row */
    body .cs-person-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
    body .cs-person-card { padding: 18px 14px 84% !important; border-radius: 12px 12px 999px 999px !important; }
    body .cs-person-card__role { font-size: 12px !important; }
    body .cs-person-card__name { font-size: 15px !important; margin: 0 0 8px !important; white-space: normal !important; overflow-wrap: anywhere; }
    body .cs-person-card__line { font-size: 13px !important; }
    body .cs-person-card__avatar { width: 59% !important; height: auto !important; aspect-ratio: 1 / 1; bottom: 0 !important; margin-bottom: 17% !important; }

    /* listing toolbar: one control per row, inside the container */
    body .cs-list-toolbar__left,
    body .cs-list-toolbar__right { width: 100% !important; max-width: 100% !important; }
    body .cs-list-toolbar__right {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    body .cs-list-toolbar__label { margin: 0 !important; }
    body .cs-list-toolbar__right .cs-select-pill {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    body .cs-clear-filter { justify-self: start; }
    body .cs-pill-tabs { max-width: 100% !important; }

    /* footer: 2 link columns + newsletter; legal links move to the bottom strip */
    body .cs-footer__col:nth-child(3) { display: none !important; }
    body .cs-footer__legal-row {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px 16px;
        list-style: none;
        margin: 0 0 6px;
        padding: 0;
        width: 100%;
    }
    body .cs-footer__legal-row a {
        color: #fff;
        font-family: 'Fredoka', sans-serif;
        font-size: 13px;
        text-decoration: none;
        white-space: nowrap;
    }
    body .cs-footer__bottom-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 6px !important;
        text-align: center !important;
    }
    body .cs-footer__bottom-left,
    body .cs-footer__bottom-right { display: contents !important; }
    body .cs-footer__sep,
    body .cs-footer__social { display: none !important; }
    body .cs-footer__legal-row { order: 1; }
    body .cs-footer__logo-icon { order: 2; margin-top: 6px; }
    body .cs-footer__copyright { order: 3; }
    body .cs-footer__taxid { order: 4; }
    body .cs-footer__credits { order: 5; opacity: 0.85; }
}