/* ─────────────────────────────────────────────
   Responsive fixes
───────────────────────────────────────────── */

/* Tablet header (Elementor tablet range 768–1024px): the language / cart /
   menu icons stacked in a column, making the header ~190px tall with the
   icons floating mid-screen. Lay them out in a row at the far edge, as on
   phones (mirrors automatically on /ar/). Header template #958 serves both
   languages; the selector outranks Elementor's own rules whatever the load order. */
@media (min-width: 768px) and (max-width: 1024px) {
    .elementor-958.elementor-location-header .elementor-element.elementor-element-bde1e5e {
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        gap: 10px;
        flex-grow: 1;
    }
}

/* Arabic typography: the site-wide Zain rule (Customizer → Additional CSS) skips
   any element whose class contains "fa" or "ion", which accidentally matches
   elementor-size-de[fa]ult and elementor-sect[ion]. Those headings kept Poppins,
   which has no Arabic glyphs, so Arabic text fell back to a random system font.

   "Zain Bold" comes first because that is what these headings were already set to
   in Elementor — naming only 'Zain' here quietly downgraded every Arabic heading on
   the site to the lighter face, which reads thinner and smaller. Zain stays as the
   fallback so a heading that never had Zain Bold still gets an Arabic-capable font
   rather than dropping to Poppins. */
html[lang="ar"] .elementor-heading-title,
html[lang="ar"] .product_title,
html[lang="ar"] .woocommerce-loop-product__title {
    font-family: 'Zain Bold', 'Zain', sans-serif !important;
}

/* Tablet contact page: the e-mail address has no break opportunity, so at 768px
   it ran out of its column and touched the "Open Store" text next to it. */
@media (min-width: 768px) and (max-width: 1024px) {
    .elementor-icon-box-description {
        overflow-wrap: anywhere;
    }
}

/* RTL pagination: WooCommerce already prints ← for "next" on the Arabic shop, but
   the theme's RTL stylesheet mirrors the glyph again (rotateY), so the arrow ended
   up pointing back towards page 1. */
body.rtl .woocommerce-pagination .page-numbers li .next,
body.rtl .woocommerce-pagination .page-numbers li .prev {
    transform: none !important;
}

/* RTL product pages: WooCommerce's RTL stylesheet floats every button inside
   form.cart to the right (div.product form.cart .button{float:right}), which on
   the Arabic SCRAEGG page shrinks the WhatsApp inquiry button and makes the note
   and stock line run underneath it. Keep the panel's own full-width layout. */
.rtl .cb-scraegg-inquiry .cb-scraegg-whatsapp-button {
    float: none !important;
    width: 100%;
}

.rtl .cb-scraegg-inquiry-note,
.rtl .cb-scraegg-inquiry .stock {
    clear: both;
}

/* Touch targets below the 24px minimum on phones/tablets. */
@media (pointer: coarse) {
    .elementor-widget-woocommerce-product-meta a,
    .product_meta a {
        display: inline-block;
        min-height: 24px;
        padding: 2px 0;
    }

    .woocommerce-cart-form .product-remove a.remove,
    .wc-menu-cart__products a.remove {
        min-width: 28px;
        min-height: 28px;
        line-height: 26px;
    }

    .woocommerce-cart-form a,
    .woocommerce-cart .shipping-calculator-button {
        display: inline-block;
        min-height: 24px;
    }

    /* Review form: the rating stars are 19px and the consent checkbox 13px.
       The stars keep their size (5 of them at 24px wrap onto a second line in
       the narrow "Your rating" row); grow the tappable area around them instead. */
    p.stars a::after {
        content: "";
        position: absolute;
        top: -4px;
        right: -3px;
        bottom: -4px;
        left: -3px;
    }

    #review_form input[type="checkbox"] {
        width: 24px;
        height: 24px;
    }
}

/* Product description / spec tables: on small phones (320px) cells with
   16px padding could not shrink, so the table ran past the screen edge and
   was cut off. Let cells wrap instead. */
@media (max-width: 480px) {
    .woocommerce-Tabs-panel table {
        table-layout: fixed;
        width: 100%;
    }

    .woocommerce-Tabs-panel table th,
    .woocommerce-Tabs-panel table td {
        padding: 8px;
        overflow-wrap: anywhere;
    }
}

/* Logged-in My Account dashboard: the intro links are inline text inside a
   paragraph, so they kept a 23px tap target on phones. */
@media (pointer: coarse) {
    .woocommerce-MyAccount-content a,
    .woocommerce-MyAccount-navigation a {
        display: inline-block;
        min-height: 24px;
        padding: 2px 0;
    }
}