/* ============================================================
   BELARA MOBILE CATALOG POLISH V1
   Mobile <= 767px

   Screenshot-verified corrections:
   - Give direct WooCommerce archive titles a real side gutter.
   - Replace the mixed legacy/new filter layout with one compact bar.
   - Keep the filter form collapsed unless used or already active.
   - Center the official Saudi Business seal inside its footer slot.
   - Remove only the small excess beneath the mobile footer.
   ============================================================ */

@media (max-width: 767px) {

    /* Direct archive titles are not always wrapped by
       .woocommerce-products-header on this installation. */
    body.tax-product_cat h1.page-title,
    body.woocommerce-shop h1.page-title,
    body.post-type-archive-product h1.page-title {
        position: relative !important;

        width: calc(100% - 40px) !important;
        max-width: 680px !important;

        margin: 18px auto 12px !important;
        padding: 0 2px !important;

        color: #2A1210 !important;
        font-family: "Almarai", sans-serif !important;
        font-size: clamp(25px, 6.6vw, 29px) !important;
        font-weight: 700 !important;
        line-height: 1.4 !important;

        text-align: right !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    /* When WooCommerce does provide the wrapper, the wrapper owns
       the gutter and its title fills only that wrapper. */
    body.tax-product_cat .woocommerce-products-header
    h1.page-title,
    body.woocommerce-shop .woocommerce-products-header
    h1.page-title,
    body.post-type-archive-product .woocommerce-products-header
    h1.page-title {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }


    /* --------------------------------------------------------
       Compact catalog controls
       -------------------------------------------------------- */

    body.tax-product_cat
    .belara-mobile-catalog-toolbar-v1
    .belara-smart-filter__intro,
    body.woocommerce-shop
    .belara-mobile-catalog-toolbar-v1
    .belara-smart-filter__intro,
    body.post-type-archive-product
    .belara-mobile-catalog-toolbar-v1
    .belara-smart-filter__intro,
    .belara-mobile-catalog-toolbar-v11
    > .belara-smart-filter,
    .belara-mobile-catalog-toolbar-v11
    .belara-mobile-filter-toggle-v1 {
        display: none !important;
    }

    .belara-mobile-catalog-toolbar-v1
    .belara-mobile-catalog-toolbar-v11,
    .belara-mobile-catalog-toolbar-v1.belara-mobile-catalog-toolbar-v11 {
        width: calc(100% - 32px) !important;
        max-width: 680px !important;

        margin: 0 auto 14px !important;
        padding: 10px !important;

        display: block !important;

        border: 1px solid rgba(201, 163, 91, .34) !important;
        border-radius: 15px !important;

        background: rgba(255, 250, 246, .98) !important;
        box-shadow: 0 5px 18px rgba(42, 18, 16, .045) !important;

        direction: rtl !important;
        box-sizing: border-box !important;
        clear: both !important;
    }

    .belara-mobile-catalog-bar-v11 {
        width: 100% !important;

        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-areas:
            "count count"
            "filter order" !important;
        align-items: center !important;
        gap: 8px !important;

        direction: rtl !important;
        box-sizing: border-box !important;
    }

    .belara-mobile-catalog-bar-v11
    .woocommerce-result-count {
        grid-area: count !important;

        float: none !important;
        width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 2px 2px !important;

        display: block !important;

        color: #806863 !important;
        font-family: "Almarai", sans-serif !important;
        font-size: 11.5px !important;
        font-weight: 500 !important;
        line-height: 1.55 !important;

        text-align: right !important;
        white-space: normal !important;
    }

    .belara-mobile-filter-toggle-v11 {
        grid-area: filter !important;

        width: 100% !important;
        min-width: 0 !important;
        min-height: 44px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;

        margin: 0 !important;
        padding: 8px 12px !important;

        border: 1px solid rgba(201, 163, 91, .58) !important;
        border-radius: 10px !important;

        background: #FFF7EF !important;
        color: #2A1210 !important;

        font-family: "Almarai", sans-serif !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;

        white-space: nowrap !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
    }

    .belara-mobile-filter-toggle-v11
    .belara-mobile-filter-chevron-v11 {
        display: inline-block !important;
        color: #6B4636 !important;
        font-family: Arial, sans-serif !important;
        font-size: 15px !important;
        line-height: 1 !important;
        transition: transform .2s ease !important;
    }

    .belara-mobile-filter-toggle-v11[aria-expanded="true"]
    .belara-mobile-filter-chevron-v11 {
        transform: rotate(180deg) !important;
    }

    .belara-mobile-catalog-bar-v11
    .woocommerce-ordering {
        grid-area: order !important;

        float: none !important;
        width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .belara-mobile-catalog-bar-v11
    .woocommerce-ordering select {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 44px !important;

        margin: 0 !important;
        padding: 0 11px !important;

        border: 1px solid rgba(42, 18, 16, .14) !important;
        border-radius: 10px !important;

        background-color: #FFFFFF !important;
        color: #2A1210 !important;

        font-family: "Almarai", sans-serif !important;
        font-size: 11.5px !important;
        font-weight: 600 !important;

        text-overflow: ellipsis !important;
        box-sizing: border-box !important;
    }

    .belara-mobile-catalog-bar-v11.is-orderless-v11 {
        grid-template-areas:
            "count count"
            "filter filter" !important;
    }

    .belara-mobile-filter-panel-v11 {
        width: 100% !important;

        margin: 10px 0 0 !important;
        padding: 12px 2px 2px !important;

        border-top: 1px solid rgba(42, 18, 16, .09) !important;
        box-sizing: border-box !important;
    }

    .belara-mobile-filter-panel-v11[hidden] {
        display: none !important;
    }

    .belara-mobile-filter-panel-v11
    .belara-smart-filter__form {
        width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;

        border: 0 !important;
        box-sizing: border-box !important;
    }

    .belara-mobile-filter-panel-v11
    .belara-filter-field {
        width: 100% !important;
        min-width: 0 !important;

        display: flex !important;
        flex-direction: column !important;
        gap: 5px !important;
    }

    .belara-mobile-filter-panel-v11
    .belara-filter-field--color {
        grid-column: 1 / -1 !important;
    }

    .belara-mobile-filter-panel-v11
    .belara-filter-field > span {
        color: #6B5A53 !important;
        font-family: "Almarai", sans-serif !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        line-height: 1.5 !important;
    }

    .belara-mobile-filter-panel-v11
    .belara-filter-field select,
    .belara-mobile-filter-panel-v11
    .belara-filter-field input {
        width: 100% !important;
        min-width: 0 !important;
        height: 43px !important;

        margin: 0 !important;
        padding: 0 10px !important;

        border: 1px solid rgba(42, 18, 16, .14) !important;
        border-radius: 9px !important;

        background: #FFFFFF !important;
        color: #2A1210 !important;

        font-family: "Almarai", sans-serif !important;
        font-size: 11.5px !important;

        box-sizing: border-box !important;
    }

    .belara-mobile-filter-panel-v11
    .belara-filter-apply,
    .belara-mobile-filter-panel-v11
    .belara-filter-reset {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 43px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        margin: 0 !important;
        padding: 8px 10px !important;

        border-radius: 9px !important;

        font-family: "Almarai", sans-serif !important;
        font-size: 11.5px !important;
        font-weight: 700 !important;

        text-decoration: none !important;
        box-sizing: border-box !important;
    }

    .belara-mobile-filter-panel-v11
    .belara-filter-apply {
        border: 1px solid #2A1210 !important;
        background: #2A1210 !important;
        color: #FFFFFF !important;
    }

    .belara-mobile-filter-panel-v11
    .belara-filter-reset {
        border: 1px solid rgba(201, 163, 91, .65) !important;
        background: #FFFFFF !important;
        color: #6B4636 !important;
    }


    /* --------------------------------------------------------
       Footer finishing
       -------------------------------------------------------- */

    body.belara2-site {
        padding-bottom:
            calc(66px + env(safe-area-inset-bottom)) !important;
    }

    body.belara2-site .belara-sbc-official-slot {
        display: grid !important;
        place-items: start center !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 340px !important;
        margin-inline: auto !important;
        text-align: center !important;
    }

    body.belara2-site
    .belara-sbc-official-slot
    .sbc-seal-frame {
        justify-self: center !important;
        align-self: start !important;
        margin-inline: auto !important;
        text-align: center !important;
    }

    body.belara2-site
    .belara-sbc-official-slot
    .sbc-seal-frame > * {
        float: none !important;
        margin-inline: auto !important;
    }


    /* --------------------------------------------------------
       Native drawer finishing
       -------------------------------------------------------- */

    body.belara2-site
    #belara2-drawer.belara-drawer-rooted-v12 {
        position: fixed !important;
        inset: 0 !important;

        width: 100vw !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;
        z-index: 100300 !important;
    }

    body.belara2-site
    #belara2-drawer.belara-drawer-rooted-v12
    .belara2-drawer-panel {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: auto !important;

        width: min(82vw, 360px) !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;

        margin: 0 !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
    }

    body.belara2-site
    #belara2-drawer
    .belara2-menu a::after {
        content: "‹" !important;

        position: static !important;
        inset: auto !important;

        flex: 0 0 auto !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 18px !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        background: none !important;
        color: #C9A35B !important;

        font-family: Arial, sans-serif !important;
        font-size: 21px !important;
        line-height: 1 !important;

        transform: none !important;
        transition: none !important;
    }

    body.belara2-site
    #belara2-drawer
    .belara2-menu li:has(> a:empty) {
        display: none !important;
    }

    body.belara-native-drawer-open-v1
    .belara2-mobile-bottom {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}


@media (max-width: 370px) {
    .belara-mobile-catalog-toolbar-v1.belara-mobile-catalog-toolbar-v11 {
        width: calc(100% - 24px) !important;
        padding: 8px !important;
    }

    .belara-mobile-catalog-bar-v11 {
        gap: 7px !important;
    }

    .belara-mobile-filter-toggle-v11,
    .belara-mobile-catalog-bar-v11
    .woocommerce-ordering select {
        font-size: 10.8px !important;
    }
}


/* ============================================================
   BELARA MOBILE CATALOG CONTROL ALIGN V1
   Exact equal-width and equal-height alignment for Safari.
   ============================================================ */

@media (max-width: 767px) {

    .belara-mobile-catalog-bar-v11 {
        align-items: start !important;
    }

    .belara-mobile-filter-toggle-v11 {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;

        align-self: start !important;
        justify-self: stretch !important;

        position: static !important;
        inset: auto !important;

        margin: 0 !important;

        transform: none !important;
        vertical-align: top !important;
        box-sizing: border-box !important;
    }

    .belara-mobile-catalog-bar-v11
    .woocommerce-ordering {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;

        display: flex !important;
        align-items: stretch !important;
        align-self: start !important;
        justify-self: stretch !important;

        position: static !important;
        inset: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        line-height: 0 !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

    .belara-mobile-catalog-bar-v11
    .woocommerce-ordering select {
        flex: 1 1 auto !important;
        align-self: stretch !important;

        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;

        position: static !important;
        inset: auto !important;

        margin: 0 !important;

        transform: none !important;
        vertical-align: top !important;
        box-sizing: border-box !important;
    }
}


/* ============================================================
   BELARA MOBILE CATALOG FINISH V1
   Screenshot-verified footer and wishlist finishing.
   ============================================================ */

@media (max-width: 767px) {

    /* Keep the externally rendered verification seal in a
       predictable LTR centering context.  JavaScript performs the
       final geometry correction after the external widget settles. */
    body.belara2-site
    .belara-sbc-official-slot {
        position: relative !important;

        display: flex !important;
        align-items: flex-start !important;
        justify-content: center !important;

        width: 100% !important;
        max-width: 340px !important;

        margin-inline: auto !important;
        padding: 0 !important;

        direction: ltr !important;
        text-align: center !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    body.belara2-site
    .belara-sbc-official-slot
    .sbc-seal-frame {
        flex: 0 0 auto !important;
        float: none !important;
        align-self: flex-start !important;
        justify-self: auto !important;

        margin: 0 auto !important;

        transform-origin: top center !important;
        box-sizing: border-box !important;
    }

    /* Isolate Latin licence identifiers from the RTL sentence so
       FL-152055708 and both expiry numbers never reorder or split. */
    body.belara2-site
    .belara-business-license-card span,
    body.belara2-site
    .belara-freelance-card span,
    body.belara2-site
    .belara-business-license-card small,
    body.belara2-site
    .belara-freelance-card small {
        unicode-bidi: isolate !important;
    }

    body.belara2-site
    .belara-business-license-card b,
    body.belara2-site
    .belara-freelance-card b {
        display: inline-block !important;

        direction: ltr !important;
        unicode-bidi: isolate !important;
        white-space: nowrap !important;

        font-variant-numeric: tabular-nums !important;
    }

    /* Hide the platform-dependent heart character and draw the
       same crisp icon on every Safari/iOS version. */
    body.belara2-site
    .belara2-wishlist-button {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        background: #FFFFFF !important;
        color: transparent !important;

        font-size: 0 !important;
        line-height: 0 !important;
        text-indent: 0 !important;

        box-shadow: 0 3px 10px rgba(42, 18, 16, .10) !important;
    }

    body.belara2-site
    .belara2-wishlist-button::before {
        content: "" !important;

        display: block !important;
        width: 25px !important;
        height: 25px !important;

        background-color: #2A1210 !important;

        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 0 0 0-7.78Z' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
        -webkit-mask-position: center !important;
        -webkit-mask-repeat: no-repeat !important;
        -webkit-mask-size: contain !important;

        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 0 0 0-7.78Z' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
        mask-position: center !important;
        mask-repeat: no-repeat !important;
        mask-size: contain !important;
    }

    body.belara2-site
    .belara2-wishlist-button.is-active {
        border-color: rgba(142, 30, 27, .34) !important;
        background: #FFF7F3 !important;
    }

    body.belara2-site
    .belara2-wishlist-button.is-active::before {
        background-color: #8E1E1B !important;

        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 0 0 0-7.78Z' fill='black'/%3E%3C/svg%3E") !important;
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 0 0 0-7.78Z' fill='black'/%3E%3C/svg%3E") !important;
    }

    body.belara2-site
    .belara2-wishlist-button:focus-visible {
        outline: 2px solid #C9A35B !important;
        outline-offset: 2px !important;
    }
}