/* ==========================================================================
   Hualinfei B2B Theme — Responsive Stylesheet
   Breakpoints: 1080px (tablet) / 880px (mobile menu) / 640px / 480px (phone)
   ========================================================================== */

/* --------------------------------------------
   Tablet (<= 1080px)
-------------------------------------------- */
@media (max-width: 1080px) {
    *,
    *::before,
    *::after {
        min-width: 0;
    }

    .section-heading {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 14px;
    }

    .hero__inner,
    .home-conversion__inner,
    .product-detail__grid,
    .product-gallery-section__inner,
    .contact-form-section__inner {
        grid-template-columns: 1fr;
    }

    .hero__content {
        max-width: 640px;
    }

    .hero__text {
        max-width: 100%;
    }

    .home-conversion__head p:not(.section-eyebrow) {
        max-width: 100%;
    }

    .contact-form-section__copy,
    .product-inquiry {
        position: static;
    }

    .category-grid,
    .why-grid,
    .product-advantage-grid,
    .capability-grid,
    .application-list,
    .recently-viewed__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .quality-process__steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .about-card-grid--products,
    .about-card-grid--trust,
    .quality-card-grid--overview,
    .quality-card-grid--products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .inquiry-cta__actions,
    .request-sample__inner > .button,
    .about-cta__inner > .button,
    .quality-cta__inner > .button {
        justify-self: start;
    }
}

/* --------------------------------------------
   Mobile menu & stacked layouts (<= 880px)
-------------------------------------------- */
@media (max-width: 880px) {
    .site-header__inner {
        flex-wrap: wrap;
        gap: 10px;
        min-height: 64px;
        padding: 10px 0;
    }

    .site-logo {
        order: 0;
        margin-right: auto;
    }

    .site-logo img {
        max-width: 148px;
        max-height: 46px;
    }

    .theme-toggle {
        order: 1;
        width: 44px;
        height: 44px;
    }

    .header-cta {
        order: 2;
        min-height: 44px;
        padding: 0 14px;
        font-size: 13px;
    }

    .menu-toggle {
        display: inline-flex;
        order: 3;
        min-height: 44px;
    }

    .site-navigation {
        display: none;
        order: 4;
        width: 100%;
        margin-left: 0;
        padding: 8px 0 4px;
        border-top: 1px solid var(--line);
    }

    .site-header.is-menu-open .site-navigation {
        display: block;
    }

    .primary-menu {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .primary-menu a {
        display: flex;
        align-items: center;
        min-height: 46px;
        padding: 0 6px;
        border-radius: var(--radius-s);
        color: var(--ink);
        font-size: 15px;
        font-weight: 620;
    }

    .primary-menu a::after {
        content: none;
    }

    .primary-menu a:hover {
        background: var(--bg-soft);
    }

    /* Stacked grids */
    .contact-content__grid,
    .contact-rfq__inner,
    .about-overview__grid,
    .about-support__inner,
    .quality-focus__inner,
    .product-detail__body-inner,
    .product-gallery,
    .inquiry-cta__inner,
    .request-sample__inner,
    .about-cta__inner,
    .quality-cta__inner,
    .site-footer__inner {
        grid-template-columns: 1fr;
    }

    .product-detail__lead,
    .product-gallery-section__copy p:not(.section-eyebrow) {
        max-width: 100%;
    }

    .inquiry-cta__actions {
        justify-content: flex-start;
    }

    /* Form readability (iOS zoom guard) */
    .rfq-form input,
    .rfq-form select,
    .rfq-form textarea {
        font-size: 16px;
    }

    /* Compare dock becomes a bottom sheet */
    .compare-dock {
        right: 12px;
        left: 12px;
        bottom: calc(84px + env(safe-area-inset-bottom, 0px));
        width: auto;
    }

    .back-to-top {
        right: 14px;
        bottom: calc(14px + env(safe-area-inset-bottom, 0px));
        width: 46px;
        height: 46px;
    }

    body.has-product-sticky .back-to-top {
        bottom: calc(148px + env(safe-area-inset-bottom, 0px));
    }

    body.has-product-sticky .compare-dock {
        bottom: calc(214px + env(safe-area-inset-bottom, 0px));
    }

    .product-sticky-bar__text span {
        display: none;
    }
}

/* --------------------------------------------
   Phone (<= 640px)
-------------------------------------------- */
@media (max-width: 640px) {
    .container {
        width: calc(100% - 40px);
    }

    .section {
        padding: clamp(56px, 12vw, 72px) 0;
    }

    .hero {
        padding: 52px 0 60px;
    }

    h1 {
        font-size: clamp(2rem, 8.6vw, 2.5rem);
        overflow-wrap: anywhere;
    }

    h2 {
        font-size: clamp(1.55rem, 6.6vw, 1.9rem);
        overflow-wrap: anywhere;
    }

    h3,
    p,
    a,
    span,
    dd,
    li {
        overflow-wrap: break-word;
    }

    .section-heading {
        margin-bottom: 30px;
    }

    .product-grid,
    .category-grid,
    .capability-grid,
    .application-list,
    .why-grid,
    .home-conversion__grid,
    .product-advantage-grid,
    .recently-viewed__grid,
    .quality-process__steps,
    .about-card-grid--products,
    .about-card-grid--trust,
    .about-card-grid--support,
    .quality-card-grid--overview,
    .quality-card-grid--products,
    .quality-check-grid,
    .contact-methods,
    .contact-rfq__list,
    .rfq-form__grid {
        grid-template-columns: 1fr;
    }

    .home-conversion-card,
    .category-card {
        min-height: auto;
    }

    /* Full-width action groups */
    .hero__actions,
    .product-cta-group,
    .inquiry-cta__actions,
    .contact-hero__actions,
    .rfq-form__footer,
    .compare-hero__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .hero__actions .button,
    .product-cta-group .button,
    .inquiry-cta__actions .button,
    .contact-hero__actions .button,
    .rfq-form__footer .button,
    .compare-hero__actions .button,
    .request-sample__inner > .button,
    .about-cta__inner > .button,
    .quality-cta__inner > .button {
        width: 100%;
    }

    .contact-hero__bar {
        align-items: stretch;
        flex-direction: column;
    }

    .contact-trust-strip {
        grid-template-columns: 1fr;
    }

    .contact-trust-strip span + span {
        border-top: 1px solid var(--line);
        border-left: 0;
    }

    .rfq-form {
        padding: 22px;
    }

    .rfq-form input,
    .rfq-form select,
    .rfq-form textarea {
        min-height: 52px;
    }

    .rfq-phone-control {
        grid-template-columns: minmax(104px, 0.46fr) minmax(0, 1fr);
    }

    .inquiry-template__head {
        align-items: stretch;
        flex-direction: column;
    }

    .inquiry-template__head .button {
        width: 100%;
        min-height: 44px;
    }

    .product-card__link {
        min-height: 44px;
        padding: 8px 0;
    }

    .site-footer__links {
        gap: 0 20px;
    }

    .site-footer__links a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    .product-sticky-bar__inner {
        gap: 12px;
    }

    .product-sticky-bar__actions {
        flex: 1 1 auto;
    }

    .product-sticky-bar__actions .button {
        flex: 1 1 auto;
        min-height: 44px;
        padding: 0 12px;
        font-size: 13px;
    }

    .filter-chips {
        gap: 8px;
    }

    .filter-chip {
        min-height: 36px;
        padding: 0 13px;
        font-size: 13px;
    }

    .faq-item summary {
        min-height: 54px;
        padding-right: 48px;
    }

    /* Lightbox on small screens — HyperOS gestures are primary */
    .lightbox__stage {
        gap: 10px;
        padding: 56px 12px 20px;
    }

    .lightbox__img {
        max-width: calc(100vw - 24px);
        max-height: calc(100vh - 220px);
    }

    .lightbox__nav {
        display: none;
    }

    .lightbox__close--main {
        top: calc(10px + env(safe-area-inset-top, 0px));
        right: 10px;
        width: 44px;
        height: 44px;
    }

    .lightbox__close--main svg {
        width: 18px;
        height: 18px;
    }

    .lightbox__toolbar {
        gap: 4px;
        padding: 5px;
    }

    .lightbox__button {
        min-width: 44px;
        height: 44px;
        padding: 0 10px;
    }

    .compare-dock__actions .button {
        min-height: 44px;
    }

    .lightbox__button svg {
        width: 16px;
        height: 16px;
    }

    .lightbox__button--reset {
        font-size: 12px;
    }

    .lightbox__dots {
        gap: 7px;
    }

    .lightbox__dot {
        width: 6px;
        height: 6px;
    }


}

/* --------------------------------------------
   Small phone (<= 480px)
-------------------------------------------- */
@media (max-width: 480px) {
    .site-logo img {
        max-width: 112px;
        max-height: 44px;
    }

    .header-cta {
        min-height: 44px;
        padding: 0 10px;
        font-size: 12.5px;
    }

    .theme-toggle {
        width: 44px;
        height: 44px;
    }

    .menu-toggle {
        min-height: 44px;
        padding: 0 10px;
    }

    .hero__proof span {
        font-size: 13px;
    }

    .compare-dock__thumbs {
        display: none;
    }

    .recently-viewed__grid {
        grid-template-columns: 1fr;
    }

}

/* Keep the compact header rules after <=480px so the cascade cannot
   enlarge tiny-screen controls or logo sizing again. */
@media (max-width: 360px) {
    .site-header__inner {
        gap: 6px;
    }

    .site-logo img {
        max-width: 96px;
        max-height: 44px;
    }

    .header-cta {
        min-height: 44px;
        padding: 0 9px;
        font-size: 12px;
    }

    .menu-toggle {
        width: 44px;
        min-height: 44px;
        padding: 0;
        justify-content: center;
    }

    .menu-toggle__text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

/* Flag select responsive */
@media (max-width: 880px) {
    .flag-select__trigger {
        font-size: 16px;
    }

    .rfq-phone-control .flag-select__trigger {
        font-size: 14px;
    }
}

@media (max-width: 640px) {
    .flag-select__list {
        max-height: 240px;
    }
}

/* ==========================================================================
   Product Catalog directory — responsive
   ========================================================================== */
@media (max-width: 1080px) {
    .catalog-directory {
        grid-template-columns: minmax(200px, 224px) minmax(0, 1fr);
        gap: 28px;
    }

    .catalog-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 880px) {
    .catalog-hero__inner {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 28px;
    }

    .catalog-hero__stats {
        width: min(100%, 360px);
    }

    .catalog-directory {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }

    .catalog-filter {
        position: static;
        min-width: 0;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .catalog-filter__head {
        display: flex;
        align-items: end;
        justify-content: space-between;
        gap: 16px;
        padding: 0 0 14px;
    }

    .catalog-filter__list {
        display: flex;
        max-width: 100%;
        gap: 8px;
        margin-top: 14px;
        padding: 0 0 10px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-snap-type: inline proximity;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }

    .catalog-filter__list li {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    .catalog-filter__link {
        min-width: max-content;
        padding-inline: 14px 10px;
        border-color: var(--line);
        background: var(--bg-card);
    }

    .catalog-results__toolbar {
        min-height: 0;
    }
}

@media (max-width: 640px) {
    .catalog-hero {
        padding-bottom: 44px;
    }

    .catalog-hero__stats {
        width: 100%;
    }

    .catalog-hero__stat {
        min-height: 96px;
        padding: 17px;
    }

    .catalog-directory-section {
        padding-bottom: 64px;
    }

    .catalog-filter__head h2 {
        font-size: 1.12rem;
    }

    .catalog-results__toolbar {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
        padding-bottom: 16px;
    }

    .catalog-results__summary {
        width: 100%;
        justify-content: space-between;
    }

    .catalog-product-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .catalog-product-card .product-card__body > p {
        -webkit-line-clamp: 2;
    }

    .catalog-product-card .product-card__actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px 14px;
    }

    .catalog-product-card .product-card__link {
        justify-content: center;
        text-align: center;
    }

    .catalog-product-card .product-card__actions button:last-child {
        grid-column: 1 / -1;
    }

    .catalog-rfq {
        align-items: flex-start;
        flex-direction: column;
    }

    .catalog-rfq > .button {
        width: 100%;
    }
}

@media (max-width: 360px) {
    .catalog-hero__stats {
        gap: 8px;
    }

    .catalog-hero__stat {
        min-height: 90px;
        padding: 14px 12px;
    }

    .catalog-hero__stat dt {
        font-size: 12px;
    }

    .catalog-filter__link {
        padding-inline: 12px 9px;
    }
}
/* ==========================================================================
   Catalog guidance — responsive
   ========================================================================== */
@media (max-width: 640px) {
    .catalog-banner {
        flex-direction: column;
        align-items: flex-start;
    }

    .catalog-banner__art {
        display: none;
    }

    .catalog-nudge__inner {
        flex-direction: column;
        align-items: flex-start;
    }
}