/* =========================================================
   ALAQ
   GLOBAL RESPONSIVE + LANGUAGE SYSTEM
========================================================= */


/* =========================================================
   GLOBAL SAFETY
========================================================= */

html {
    width: 100%;
    max-width: 100%;

    overflow-x: hidden;

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


body {
    width: 100%;
    max-width: 100%;

    min-width: 0;

    margin: 0;

    overflow-x: hidden;

    font-family:
        "Poppins",
        Arial,
        Helvetica,
        sans-serif;
}


*,
*::before,
*::after {
    box-sizing: border-box;
}


img,
svg,
video,
canvas {
    max-width: 100%;
}


img {
    height: auto;
}


input,
textarea,
select,
button {
    font-family: inherit;
}


main,
section,
article,
aside,
header,
footer,
nav,
div {
    min-width: 0;
}


/* =========================================================
   LANGUAGE FONTS
========================================================= */

/* ENGLISH */

html[lang="en"],
html[lang="en"] body,
html[dir="ltr"],
html[dir="ltr"] body {
    font-family:
        "Poppins",
        Arial,
        Helvetica,
        sans-serif;
}


/* ARABIC */

html[lang="ar"],
html[lang="ar"] body,
html[dir="rtl"],
html[dir="rtl"] body {
    font-family:
        "Cairo",
        Tahoma,
        Arial,
        sans-serif !important;
}


/* =========================================================
   FORCE CAIRO ON ALL ARABIC ELEMENTS
========================================================= */

html[dir="rtl"] *,
html[lang="ar"] * {
    font-family:
        "Cairo",
        Tahoma,
        Arial,
        sans-serif;
}


html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6 {
    letter-spacing:
        0 !important;
}


/* =========================================================
   RTL
========================================================= */

html[dir="rtl"] body {
    direction: rtl;

    text-align: right;
}


html[dir="rtl"]
input,
html[dir="rtl"]
textarea,
html[dir="rtl"]
select {
    direction: rtl;

    text-align: right;
}


html[dir="rtl"]
.desktop-navigation,
html[dir="rtl"]
.header-actions {
    direction: rtl;
}


html[dir="rtl"]
.mobile-navigation {
    direction: rtl;

    text-align: right;
}


/* =========================================================
   SHARED WIDTHS
========================================================= */

.header-container,
.collections-section,
.shop-hero-inner,
.shop-section,
.product-breadcrumb,
.single-product-section,
.cart-page-header,
.cart-main,
.checkout-page-header-inner,
.checkout-layout,
.account-hero,
.account-layout,
.orders-page,
.footer-grid,
.footer-bottom {
    width: 100%;

    max-width: 1400px;

    margin-left: auto;

    margin-right: auto;
}


/* =========================================================
   HEADER
========================================================= */

.site-header {
    position: sticky;

    top: 0;

    z-index: 1500;

    width: 100%;

    background:
        rgba(
            255,
            253,
            248,
            0.97
        );

    border-bottom:
        1px solid
        var(--alaq-border);

    backdrop-filter:
        blur(15px);

    -webkit-backdrop-filter:
        blur(15px);
}


.header-container {
    min-height: 76px;

    padding:
        0
        32px;

    display: grid;

    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 28px;
}


/* =========================================================
   LOGO
========================================================= */

.site-logo {
    width: 92px;

    height: 62px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: flex-start;

    overflow: hidden;
}


.site-logo img {
    width: 100%;

    height: 100%;

    object-fit: contain;

    display: block;
}


/* =========================================================
   DESKTOP NAV
========================================================= */

.desktop-navigation {
    min-width: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    gap:
        clamp(
            18px,
            2.4vw,
            34px
        );
}


.desktop-navigation a {
    position: relative;

    flex-shrink: 0;

    padding:
        28px
        0;

    color:
        var(--alaq-muted);

    font-size: 12px;

    font-weight: 500;

    white-space: nowrap;

    transition:
        color
        0.2s ease;
}


.desktop-navigation a:hover,
.desktop-navigation a.active {
    color:
        var(--alaq-green);
}


.desktop-navigation a.active::after {
    content: "";

    position: absolute;

    left: 0;

    right: 0;

    bottom: 18px;

    height: 2px;

    background:
        var(--alaq-green);
}


/* =========================================================
   HEADER ACTIONS
========================================================= */

.header-actions {
    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 14px;

    white-space: nowrap;
}


.language-button,
.header-icon-link,
.cart-link {
    font-size: 11px;
}


/* =========================================================
   CART
========================================================= */

.cart-link {
    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    color:
        var(--alaq-deep);
}


.cart-text {
    display: inline;
}


.mobile-cart-icon {
    display: none;

    width: 23px;

    height: 23px;
}


.mobile-cart-icon svg {
    width: 100%;

    height: 100%;

    display: block;
}


.cart-count {
    min-width: 19px;

    height: 19px;

    padding:
        0
        5px;

    border-radius: 99px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    background:
        var(--alaq-green);

    color:
        var(--alaq-white);

    font-size: 8px;

    font-weight: 700;
}


/* =========================================================
   MOBILE BUTTON
========================================================= */

.mobile-menu-button {
    display: none;

    width: 38px;

    height: 38px;

    padding: 0;

    border: 0;

    background:
        transparent;

    color:
        var(--alaq-green);

    font-size: 21px;

    line-height: 1;
}


/* =========================================================
   MOBILE NAVIGATION
========================================================= */

.mobile-navigation {
    display: none;

    width: 100%;

    padding:
        2px
        24px
        18px;

    border-top:
        1px solid
        var(--alaq-border);

    background:
        var(--alaq-white);
}


.mobile-navigation.active {
    display: flex;

    flex-direction: column;
}


.mobile-navigation a {
    width: 100%;

    padding:
        14px
        2px;

    border-bottom:
        1px solid
        var(--alaq-border);

    color:
        var(--alaq-deep);

    font-size: 12px;

    font-weight: 500;
}


.mobile-navigation a:last-child {
    border-bottom: 0;
}


.mobile-account-link {
    color:
        var(--alaq-green) !important;

    font-weight:
        700 !important;
}


/* =========================================================
   ANNOUNCEMENT
========================================================= */

.announcement-bar {
    width: 100%;
}


.announcement-bar p {
    overflow-wrap: anywhere;
}


/* =========================================================
   HERO
========================================================= */

.hero-section {
    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);
}


.hero-content,
.hero-visual {
    min-width: 0;
}


.hero-content h1 {
    overflow-wrap: anywhere;
}


/* =========================================================
   BENEFITS
========================================================= */

.benefits-section {
    width: 100%;

    display: grid;

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


/* =========================================================
   COLLECTIONS
========================================================= */

.collections-grid {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 14px;
}


.collection-card {
    min-width: 0;

    min-height: 245px;
}


.collection-card-content h3 {
    overflow-wrap: anywhere;
}


/* =========================================================
   PRODUCT GRID
========================================================= */

.product-grid {
    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap:
        28px
        18px;
}


.product-card {
    min-width: 0;
}


.product-card-info h3 {
    overflow-wrap: anywhere;
}


/* =========================================================
   HOME ABOUT
========================================================= */

.home-about-section {
    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);
}


/* =========================================================
   CONTACT CTA
========================================================= */

.contact-cta-section {
    min-width: 0;

    flex-wrap: wrap;
}


/* =========================================================
   FOOTER
========================================================= */

.footer-grid {
    display: grid;

    grid-template-columns:
        2fr
        1fr
        1fr
        1fr;

    gap: 45px;
}


/* =========================================================
   SHOP
========================================================= */

.shop-toolbar {
    min-width: 0;
}


.category-filters {
    min-width: 0;
}


.shop-search {
    flex-shrink: 0;
}


/* =========================================================
   PRODUCT PAGE
========================================================= */

.single-product-section {
    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(350px, 0.92fr);

    gap:
        clamp(
            35px,
            6vw,
            90px
        );
}


.single-product-gallery,
.single-product-info {
    min-width: 0;
}


/* =========================================================
   CART
========================================================= */

.cart-main {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(320px, 390px);

    gap:
        clamp(
            35px,
            5vw,
            65px
        );
}


.cart-items-column,
.cart-summary {
    min-width: 0;
}


/* =========================================================
   CHECKOUT
========================================================= */

.checkout-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(340px, 420px);

    gap:
        clamp(
            40px,
            6vw,
            90px
        );
}


.checkout-left,
.checkout-summary {
    min-width: 0;
}


/* =========================================================
   ACCOUNT
========================================================= */

.account-layout {
    display: grid;

    grid-template-columns:
        250px
        minmax(0, 1fr);

    gap:
        clamp(
            35px,
            5vw,
            70px
        );
}


.account-sidebar,
.account-content {
    min-width: 0;
}


/* =========================================================
   ORDERS
========================================================= */

.customer-order-card,
.order-card-main {
    min-width: 0;
}


/* =========================================================
   LOGIN / REGISTER
========================================================= */

.login-page,
.register-page {
    width: 100%;

    min-height: 100vh;
}


/* =========================================================
   LARGE LAPTOP
========================================================= */

@media (
    max-width: 1200px
) {

    .header-container {
        padding:
            0
            24px;

        gap: 20px;
    }


    .desktop-navigation {
        gap: 20px;
    }


    .desktop-navigation a {
        font-size: 11px;
    }


    .collections-section,
    .shop-section,
    .product-breadcrumb,
    .single-product-section,
    .cart-page-header,
    .cart-main,
    .checkout-layout,
    .account-hero,
    .account-layout,
    .orders-page {
        padding-left: 24px;

        padding-right: 24px;
    }


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


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


    .footer-grid,
    .footer-bottom {
        padding-left: 24px;

        padding-right: 24px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (
    max-width: 960px
) {

    /* NAV */

    .header-container {
        min-height: 68px;

        grid-template-columns:
            auto
            minmax(0, 1fr);

        padding:
            0
            20px;
    }


    .desktop-navigation {
        display: none;
    }


    .header-actions {
        grid-column: 2;

        justify-self: end;
    }


    .mobile-menu-button {
        display: inline-flex;

        align-items: center;

        justify-content: center;
    }


    .site-logo {
        width: 78px;

        height: 54px;
    }


    /* HERO */

    .hero-section {
        grid-template-columns:
            1fr;
    }


    .hero-content {
        min-height: auto;

        padding:
            75px
            40px;
    }


    .hero-visual {
        min-height: 500px;
    }


    /* COLLECTIONS */

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


    /* PRODUCTS */

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


    /* ABOUT */

    .home-about-section {
        grid-template-columns:
            1fr;
    }


    .home-about-visual {
        min-height: 460px;
    }


    /* CART */

    .cart-main {
        grid-template-columns:
            1fr;
    }


    .cart-summary {
        position: static;
    }


    /* CHECKOUT */

    .checkout-layout {
        grid-template-columns:
            1fr;
    }


    .checkout-summary {
        position: static;
    }


    /* ACCOUNT */

    .account-layout {
        grid-template-columns:
            1fr;

        gap: 35px;
    }


    .account-sidebar {
        width: 100%;
    }


    .account-navigation {
        display: flex;

        flex-direction: row;

        overflow-x: auto;

        scrollbar-width: none;
    }


    .account-navigation::-webkit-scrollbar {
        display: none;
    }


    .account-navigation a,
    .account-navigation button {
        width: auto;

        min-width: max-content;

        padding:
            0
            18px;

        flex-shrink: 0;
    }


    /* FOOTER */

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

}


/* =========================================================
   MOBILE
========================================================= */

@media (
    max-width: 768px
) {

    /* =====================================================
       HEADER
    ====================================================== */

    .header-container {
        min-height: 64px;

        padding:
            0
            15px;

        gap: 10px;
    }


    .site-logo {
        width: 68px;

        height: 49px;
    }


    .header-actions {
        gap: 9px;
    }


    /* Account goes into hamburger */

    .header-icon-link {
        display: none;
    }


    .language-button {
        padding:
            5px;

        font-size: 10px;
    }


    /* =====================================================
       MOBILE CART
    ====================================================== */

    .cart-text {
        display: none;
    }


    .mobile-cart-icon {
        display: block;
    }


    .cart-link {
        width: 36px;

        height: 38px;

        position: relative;

        display: flex;

        align-items: center;

        justify-content: center;

        color:
            var(--alaq-green);
    }


    .cart-count {
        position: absolute;

        top: 0;

        right: -2px;

        min-width: 16px;

        height: 16px;

        padding:
            0
            3px;

        border:
            2px solid
            var(--alaq-white);

        border-radius: 99px;

        background:
            var(--alaq-green);

        color:
            var(--alaq-white);

        font-size: 7px;
    }


    html[dir="rtl"]
    .cart-count {
        right: auto;

        left: -2px;
    }


    .cart-count.empty {
        display: none;
    }


    /* =====================================================
       MOBILE NAV
    ====================================================== */

    .mobile-navigation {
        max-height:
            calc(
                100vh - 64px
            );

        overflow-y: auto;

        padding:
            2px
            16px
            17px;
    }


    /* =====================================================
       HERO
    ====================================================== */

    .hero-content {
        padding:
            65px
            20px;
    }


    .hero-content h1 {
        font-size:
            clamp(
                42px,
                13vw,
                58px
            );

        letter-spacing: -2px;
    }


    html[dir="rtl"]
    .hero-content h1 {
        font-size:
            clamp(
                36px,
                10vw,
                50px
            );

        line-height: 1.35;

        letter-spacing:
            0;
    }


    .hero-content p {
        font-size: 13px;
    }


    .hero-buttons {
        width: 100%;

        flex-wrap: wrap;
    }


    .hero-visual {
        min-height: 380px;

        padding: 18px;
    }


    .hero-logo-image {
        width: 65%;
    }


    /* =====================================================
       BENEFITS
    ====================================================== */

    .benefits-section {
        grid-template-columns:
            1fr;
    }


    .benefit-item {
        border-inline-end: 0;

        border-bottom:
            1px solid
            var(--alaq-border);
    }


    /* =====================================================
       COLLECTIONS
    ====================================================== */

    .collections-section {
        padding:
            65px
            16px;
    }


    .collections-header {
        margin-bottom: 28px;
    }


    .collections-header h2 {
        font-size:
            clamp(
                32px,
                9vw,
                42px
            );

        letter-spacing: -1.5px;
    }


    html[dir="rtl"]
    .collections-header h2 {
        letter-spacing: 0;
    }


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

        gap: 10px;
    }


    .collection-card {
        min-height: 185px;

        padding: 14px;
    }


    .collection-card-content h3 {
        font-size: 15px;
    }


    html[dir="rtl"]
    .collection-card-content h3 {
        font-size: 16px;

        line-height: 1.5;
    }


    .collection-arrow {
        width: 29px;

        height: 29px;
    }


    .collection-watermark {
        font-size: 150px;
    }


    /* =====================================================
       PRODUCTS
    ====================================================== */

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

        gap:
            24px
            10px;
    }


    .product-card-info {
        padding-top: 11px;
    }


    .product-category {
        font-size: 7px;
    }


    .product-card-info h3 {
        margin-bottom: 5px;

        font-size: 13px;

        line-height: 1.35;
    }


    .product-price {
        font-size: 10px;
    }


    /* =====================================================
       HOME ABOUT
    ====================================================== */

    .home-about-visual {
        min-height: 350px;
    }


    .home-about-content {
        padding:
            60px
            20px;
    }


    /* =====================================================
       CTA
    ====================================================== */

    .contact-cta-section {
        padding:
            55px
            20px;

        align-items: flex-start;

        flex-direction: column;
    }


    /* =====================================================
       SHOP
    ====================================================== */

    .shop-hero {
        padding:
            60px
            16px
            45px;
    }


    .shop-hero h1 {
        font-size:
            clamp(
                38px,
                11vw,
                50px
            );
    }


    html[dir="rtl"]
    .shop-hero h1 {
        letter-spacing: 0;
    }


    .shop-section {
        padding:
            28px
            16px
            70px;
    }


    .shop-toolbar {
        align-items: stretch;

        flex-direction: column;

        gap: 16px;
    }


    .category-filters {
        width: 100%;

        flex-wrap: nowrap;

        overflow-x: auto;

        padding-bottom: 5px;

        scrollbar-width: none;
    }


    .category-filters::-webkit-scrollbar {
        display: none;
    }


    .category-filter {
        flex-shrink: 0;
    }


    .shop-search {
        width: 100%;

        max-width: none;
    }


    /* =====================================================
       PRODUCT PAGE
    ====================================================== */

    .product-breadcrumb {
        padding:
            18px
            16px
            0;

        overflow-x: auto;

        white-space: nowrap;
    }


    .single-product-section {
        padding:
            24px
            16px
            70px;

        grid-template-columns:
            1fr;

        gap: 30px;
    }


    .single-product-info {
        position: static;
    }


    .single-product-info h1 {
        font-size:
            clamp(
                32px,
                9vw,
                42px
            );

        letter-spacing: -1.5px;
    }


    html[dir="rtl"]
    .single-product-info h1 {
        letter-spacing: 0;

        line-height: 1.4;
    }


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


    .product-size-button {
        min-width: 50px;

        height: 42px;
    }


    /* =====================================================
       CART
    ====================================================== */

    .cart-page-header {
        padding:
            55px
            16px
            38px;
    }


    .cart-main {
        padding:
            0
            16px
            70px;

        gap: 35px;
    }


    .cart-item {
        grid-template-columns:
            90px
            minmax(0, 1fr);

        gap: 14px;
    }


    .cart-item-image {
        width: 90px;
    }


    .cart-item-actions {
        grid-column:
            1 / -1;

        padding-left: 104px;

        display: flex;

        align-items: center;

        justify-content: space-between;

        flex-direction: row;

        flex-wrap: wrap;
    }


    html[dir="rtl"]
    .cart-item-actions {
        padding-left: 0;

        padding-right: 104px;
    }


    .cart-summary {
        padding: 25px;
    }


    /* =====================================================
       CHECKOUT
    ====================================================== */

    .checkout-page-header {
        padding:
            55px
            16px
            38px;
    }


    .checkout-layout {
        padding:
            35px
            16px
            70px;

        gap: 35px;
    }


    .checkout-addresses,
    .payment-methods {
        grid-template-columns:
            1fr;
    }


    .checkout-block-heading {
        flex-direction: column;

        align-items: flex-start;
    }


    html[dir="rtl"]
    .checkout-block-heading {
        align-items: flex-start;
    }


    .checkout-form-grid {
        grid-template-columns:
            1fr;
    }


    .checkout-form-group.full-width {
        grid-column: auto;
    }


    .checkout-summary {
        padding: 25px;
    }


    /* =====================================================
       ACCOUNT
    ====================================================== */

    .account-hero {
        padding:
            55px
            16px
            38px;
    }


    .account-layout,
    .orders-page {
        padding:
            0
            16px
            70px;
    }


    .profile-grid,
    .account-quick-grid,
    .account-address-grid {
        grid-template-columns:
            1fr;
    }


    .profile-field {
        border-inline-end: 0;

        border-bottom:
            1px solid
            var(--alaq-border) !important;
    }


    .profile-field:last-child {
        border-bottom:
            0 !important;
    }


    /* =====================================================
       ORDERS
    ====================================================== */

    .orders-toolbar {
        align-items: flex-start;

        flex-direction: column;
    }


    .order-card-main {
        grid-template-columns:
            1fr;

        gap: 18px;

        padding: 20px;
    }


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


    .order-card-total {
        align-items: flex-start;
    }


    html[dir="rtl"]
    .order-card-total {
        align-items: flex-start;
    }


    .order-card-footer {
        padding:
            14px
            20px;

        align-items: flex-start;

        flex-direction: column;
    }


    /* =====================================================
       FOOTER
    ====================================================== */

    .site-footer {
        padding:
            50px
            16px
            20px;
    }


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

        gap:
            35px
            22px;

        padding-left: 0;

        padding-right: 0;
    }


    .footer-bottom {
        padding-left: 0;

        padding-right: 0;
    }


    /* =====================================================
       LOGIN / REGISTER
    ====================================================== */

    .login-page,
    .register-page {
        display: block;
    }


    .login-visual,
    .register-visual {
        display: none;
    }


    .login-panel,
    .register-panel {
        width: 100%;

        min-height: 100vh;

        padding:
            32px
            20px;
    }


    .login-mobile-logo,
    .register-mobile-logo {
        display: block;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (
    max-width: 560px
) {

    .header-container {
        padding:
            0
            12px;
    }


    .site-logo {
        width: 62px;

        height: 46px;
    }


    .header-actions {
        gap: 6px;
    }


    .cart-link {
        width: 33px;
    }


    .mobile-menu-button {
        width: 34px;

        height: 34px;
    }


    /* HERO */

    .hero-buttons {
        flex-direction: column;
    }


    .primary-link-button,
    .secondary-link-button {
        width: 100%;

        flex: none;
    }


    /* COLLECTIONS */

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

        gap: 7px;
    }


    .collection-card {
        min-height: 165px;

        padding: 12px;
    }


    .collection-arrow {
        width: 28px;

        height: 28px;

        font-size: 11px;
    }


    .collection-card-content h3 {
        font-size: 13px;
    }


    html[dir="rtl"]
    .collection-card-content h3 {
        font-size: 14px;
    }


    .collection-label,
    .collection-shop-text,
    .collection-number {
        font-size: 7px;
    }


    /* PRODUCTS */

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

        gap:
            20px
            8px;
    }


    .product-card-info h3 {
        font-size: 12px;
    }


    /* CART */

    .cart-section-heading {
        align-items: flex-start;

        flex-direction: column;
    }


    .cart-item {
        grid-template-columns:
            78px
            minmax(0, 1fr);
    }


    .cart-item-image {
        width: 78px;
    }


    .cart-item-actions {
        padding-left: 92px;
    }


    html[dir="rtl"]
    .cart-item-actions {
        padding-left: 0;

        padding-right: 92px;
    }


    .cart-quantity-control {
        width: 110px;
    }


    /* MODALS */

    .checkout-modal,
    .order-details-modal,
    .auth-required-modal {
        padding: 10px;
    }


    .checkout-modal-card,
    .checkout-success-card,
    .order-details-card,
    .auth-required-card {
        width: 100%;

        max-height:
            calc(
                100vh - 20px
            );

        padding:
            35px
            18px;
    }


    .success-actions,
    .auth-required-actions {
        grid-template-columns:
            1fr;
    }


    .order-details-info-grid {
        grid-template-columns:
            1fr;
    }


    /* FOOTER */

    .footer-grid {
        grid-template-columns:
            1fr;
    }


    .footer-bottom {
        align-items: flex-start;

        flex-direction: column;
    }


    /* LOGIN */

    .login-panel,
    .register-panel {
        padding:
            25px
            16px;
    }


    .login-card-header h2,
    .register-card-header h2 {
        font-size: 30px;
    }

}


/* =========================================================
   EXTRA SMALL
========================================================= */

@media (
    max-width: 380px
) {

    .header-container {
        padding:
            0
            9px;
    }


    .site-logo {
        width: 57px;
    }


    .language-button {
        font-size: 9px;
    }


    .collections-grid {
        gap: 6px;
    }


    .collection-card {
        min-height: 155px;

        padding: 10px;
    }


    .collection-card-content h3 {
        font-size: 12px;
    }


    html[dir="rtl"]
    .collection-card-content h3 {
        font-size: 13px;
    }


    .product-card-info h3 {
        font-size: 11px;
    }


    .cart-main,
    .checkout-layout,
    .account-layout,
    .orders-page,
    .single-product-section {
        padding-left: 12px;

        padding-right: 12px;
    }

}


/* =========================================================
   LONG TEXT SAFETY
========================================================= */

.product-card h3,
.collection-card h3,
.account-customer span,
.checkout-address-info,
.order-number-area strong,
.single-product-info h1,
.footer-column a {
    overflow-wrap: anywhere;
}


/* =========================================================
   ARABIC DETAILS
========================================================= */

html[dir="rtl"]
.section-eyebrow,
html[dir="rtl"]
.hero-eyebrow,
html[dir="rtl"]
.collection-label,
html[dir="rtl"]
.summary-eyebrow,
html[dir="rtl"]
.checkout-summary-eyebrow {
    letter-spacing:
        0.4px !important;
}


html[dir="rtl"]
.password-wrapper input {
    padding-left: 75px;

    padding-right: 14px;
}


html[dir="rtl"]
.password-toggle {
    right: auto;

    left: 12px;
}


/* =========================================================
   TOUCH DEVICES
========================================================= */

@media (
    hover: none
) {

    .collection-card:hover,
    .product-card:hover,
    .primary-link-button:hover,
    .secondary-link-button:hover,
    .login-button:hover,
    .register-button:hover,
    .place-order-button:hover {
        transform: none;
    }

}