/* Shared responsive geometry for Safqa layouts. Native CS-Cart behavior stays intact. */
:root {
    --safqa-page-gutter: clamp(12px, 1.5vw, 42px);
    --safqa-content-max: 1580px;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

html body.theme-safqa {
    overflow-x: clip;
}

html body.theme-safqa img,
html body.theme-safqa video,
html body.theme-safqa iframe {
    max-width: 100%;
}

/* Laptop and desktop: fill the available viewport without touching card logic. */
@media (min-width: 1440px) {
    :root { --safqa-content-max: 1760px; }

    html body.theme-safqa .sq-ultimate-header .sq-top-bar-inner,
    html body.theme-safqa .sq-ultimate-header .sq-main-header-inner,
    html body.theme-safqa .sq-ultimate-header .sq-subnav-inner,
    html body.theme-safqa .sq-fashion-footer .sq-footer-inner,
    html body.theme-safqa .sq-signature-storefront,
    html body.theme-safqa .sq-classic-cat-page {
        width: min(var(--safqa-content-max), calc(100% - (var(--safqa-page-gutter) * 2))) !important;
        max-width: none !important;
    }

    html body.theme-safqa:has(.sq-fashion-category) .cat-content-grid > .container-fluid-row,
    html body.theme-safqa:has(.safqa-fashion-catalog) .cat-content-grid > .container-fluid-row {
        width: min(var(--safqa-content-max), calc(100vw - (var(--safqa-page-gutter) * 2))) !important;
        max-width: none !important;
    }

    html body.theme-safqa:has(.sq-fashion-category) .cat-content-grid > .container-fluid-row > .row-fluid,
    html body.theme-safqa:has(.safqa-fashion-catalog) .cat-content-grid > .container-fluid-row > .row-fluid {
        width: 100% !important;
        max-width: none !important;
    }
}

/* Large monitors and living-room TVs: deliberately widen sections and add
   density instead of leaving a narrow desktop page in a huge blank canvas. */
@media (min-width: 1920px) {
    :root {
        --safqa-page-gutter: clamp(28px, 3vw, 76px);
        --safqa-content-max: 2200px;
    }

    /* UniTheme2 limits the row's parent as well as the row itself. Widen both
       layers or an ultra-wide catalog remains constrained to the old desktop max. */
    html body.theme-safqa:has(.sq-fashion-category) .cat-content-grid > .container-fluid-row,
    html body.theme-safqa:has(.safqa-fashion-catalog) .cat-content-grid > .container-fluid-row,
    html body.theme-safqa:has(.sq-fashion-category) .safqa-fashion-catalog-toolbar {
        width: min(var(--safqa-content-max), calc(100vw - (var(--safqa-page-gutter) * 2))) !important;
        max-width: none !important;
    }

    html body.theme-safqa:has(.sq-fashion-category) .cat-content-grid > .container-fluid-row > .row-fluid,
    html body.theme-safqa:has(.safqa-fashion-catalog) .cat-content-grid > .container-fluid-row > .row-fluid {
        width: 100% !important;
        max-width: none !important;
    }

    html body.theme-safqa:has(.safqa-fashion-category) .safqa-fashion-catalog #categories_view_pagination_contents.safqa-fashion-catalog__grid {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }

    html body.theme-safqa .sq-signature-storefront .sq-story-bubbles-row { grid-template-columns: repeat(10, minmax(0, 1fr)); }
    html body.theme-safqa .sq-signature-storefront .sq-cards-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (min-width: 2560px) {
    :root {
        --safqa-page-gutter: clamp(40px, 4vw, 112px);
        --safqa-content-max: 2560px;
    }

    html body.theme-safqa:has(.sq-fashion-category) .cat-content-grid > .container-fluid-row,
    html body.theme-safqa:has(.safqa-fashion-catalog) .cat-content-grid > .container-fluid-row {
        width: min(var(--safqa-content-max), calc(100vw - (var(--safqa-page-gutter) * 2))) !important;
        max-width: none !important;
    }

    html body.theme-safqa:has(.sq-fashion-category) .cat-content-grid > .container-fluid-row > .row-fluid,
    html body.theme-safqa:has(.safqa-fashion-catalog) .cat-content-grid > .container-fluid-row > .row-fluid {
        width: 100% !important;
        max-width: none !important;
    }

    html body.theme-safqa:has(.sq-fashion-category) .safqa-fashion-catalog #categories_view_pagination_contents.safqa-fashion-catalog__grid {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }

    html body.theme-safqa .sq-signature-storefront .sq-story-bubbles-row { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    html body.theme-safqa .sq-signature-storefront .sq-cards-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* Tablet: avoid cramped desktop controls while keeping the sidebar drawer
   available through the existing native filter trigger. */
@media (min-width: 768px) and (max-width: 1199px) {
    html body.theme-safqa .sq-signature-storefront,
    html body.theme-safqa .sq-classic-cat-page {
        width: calc(100% - 32px) !important;
        max-width: none !important;
    }

    html body.theme-safqa:has(.sq-fashion-category) .cat-content-grid > .container-fluid-row > .row-fluid {
        width: calc(100% - 32px) !important;
    }

    html body.theme-safqa .sq-signature-storefront .sq-story-bubbles-row { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* Phones: preserve safe gutters, prevent card controls overflowing, and let
   browser zoom work normally for all Android and iOS users. */
@media (max-width: 767px) {
    :root { --safqa-page-gutter: 10px; }

    html body.theme-safqa .sq-signature-storefront,
    html body.theme-safqa .sq-classic-cat-page {
        width: calc(100% - (var(--safqa-page-gutter) * 2)) !important;
        max-width: none !important;
        margin-inline: auto !important;
    }

    html body.theme-safqa .sq-fashion-footer { padding-inline: var(--safqa-page-gutter) !important; }
    html body.theme-safqa .sq-fashion-footer .sq-footer-inner { width: 100% !important; }
    html body.theme-safqa .sq-signature-storefront .sq-story-bubbles-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
    html body.theme-safqa .sq-signature-storefront .sq-cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

@media (max-width: 389px) {
    html body.theme-safqa .sq-signature-storefront .sq-story-bubbles-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}