/* =====================================================
   ATHR STORE
   HEADER ONLY
===================================================== */


/* =====================================================
   COLORS
===================================================== */

:root {

    --burgundy: #8B1717;

    --burgundy-dark: #5E0D0D;

    --burgundy-light: #A52222;

    --white: #FFFFFF;

    --cream: #FCFAF7;

    --beige: #EDE3D5;

    --beige-dark: #D8C6B2;

    --gold: #B99A68;

    --charcoal: #191717;


    --title-font: "Noto Kufi Arabic", sans-serif;

    --body-font: "Tajawal", sans-serif;

}


/* =====================================================
   RESET
===================================================== */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    margin: 0;

    background: var(--cream);

    color: var(--charcoal);

    font-family: var(--body-font);

}


a {

    text-decoration: none;

    color: inherit;

}


button,
input {

    font-family: inherit;

}


/* =====================================================
   TOP BAR
===================================================== */

.top-bar {

    width: 100%;

    height: 38px;

    background: var(--burgundy-dark);

    color: var(--white);

}


.top-bar-container {

    width: min(1320px, 92%);

    height: 100%;

    margin: auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

}


.top-message,
.top-delivery {

    font-size: 12px;

    font-weight: 500;

    display: flex;

    align-items: center;

}




/* =====================================================
   MAIN HEADER — FINAL
===================================================== */

.main-header {
    width: 100%;
    background: #8B1717;
    color: #FFFFFF;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.10);
}


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

.header-container {
    width: min(1320px, 92%);
    height: 88px;
    margin: auto;

    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}


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

.desktop-nav {
    display: flex;
    align-items: center;
    gap: 32px;
}

.right-nav {
    justify-content: flex-start;
}

.left-nav {
    justify-content: flex-end;
}


/* =====================================================
   NAVIGATION LINKS
===================================================== */

.desktop-nav a {
    font-family: var(--title-font);
    font-size: 13px;
    font-weight: 500;
    color: #FFFFFF;

    position: relative;
    padding: 9px 0;

    white-space: nowrap;

    transition: color 0.25s ease;
}

.desktop-nav a:hover {
    color: #F0DCC4;
}


/* =====================================================
   ACTIVE PAGE
===================================================== */

.desktop-nav a.active {
    color: #FFFFFF;
}

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

    position: absolute;

    bottom: 0;
    right: 0;

    width: 30px;
    height: 2px;

    background: #FFFFFF;

    border-radius: 20px;
}


/* =====================================================
   CATEGORIES
===================================================== */

.categories-link {
    display: flex;
    align-items: center;
    gap: 7px;
}

.small-arrow {
    font-size: 15px;
    line-height: 1;

    transition: transform 0.25s ease;
}

.categories-link:hover .small-arrow {
    transform: rotate(180deg);
}


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

.logo {
    width: 125px;
    height: 88px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.logo img {
    width: 96px;
    height: auto;

    max-height: 70px;

    object-fit: contain;
    display: block;
}


/* =====================================================
   SEARCH
===================================================== */

.search-btn {
    width: 38px;
    height: 40px;

    padding: 0;

    border: none;
    background: transparent;

    color: #FFFFFF;

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    transition: 0.25s ease;
}

.search-btn:hover {
    color: #F0DCC4;
    transform: translateY(-1px);
}

.search-btn svg {
    width: 24px;
    height: 24px;

    fill: none;
    stroke: currentColor;

    stroke-width: 1.6;

    stroke-linecap: round;
}


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

.cart-btn {
    position: relative;

    width: 38px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #FFFFFF;

    transition: 0.25s ease;
}

.cart-btn:hover {
    color: #F0DCC4;
    transform: translateY(-1px);
}

.cart-btn svg {
    width: 25px;
    height: 25px;

    fill: none;
    stroke: currentColor;

    stroke-width: 1.5;

    stroke-linecap: round;
    stroke-linejoin: round;
}


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

.cart-count {
    position: absolute;

    top: -3px;
    right: -3px;

    min-width: 18px;
    height: 18px;

    padding: 0 4px;

    background: #FFFFFF;
    color: #8B1717;

    border-radius: 50px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-family: Arial, sans-serif;

    font-size: 10px;
    font-weight: 700;

    line-height: 1;
}


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

.mobile-menu-btn {
    display: none;

    width: 40px;
    height: 40px;

    padding: 0;

    border: none;
    background: transparent;

    cursor: pointer;

    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    gap: 5px;
}

.mobile-menu-btn span {
    width: 23px;
    height: 1.5px;

    background: #FFFFFF;

    display: block;

    border-radius: 10px;
}


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

.mobile-cart {
    display: none;

    position: relative;

    width: 40px;
    height: 40px;

    align-items: center;
    justify-content: center;

    color: #FFFFFF;
}

.mobile-cart svg {
    width: 24px;
    height: 24px;

    fill: none;
    stroke: currentColor;

    stroke-width: 1.5;

    stroke-linecap: round;
    stroke-linejoin: round;
}


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

@media (max-width: 900px) {

    .header-container {
        width: 92%;
        height: 70px;

        grid-template-columns: 1fr auto 1fr;
    }

    .desktop-nav {
        display: none;
    }

    .mobile-menu-btn {
        display: flex;
        justify-self: start;
    }

    .logo {
        width: 100px;
        height: 68px;

        justify-self: center;
    }

    .logo img {
        width: 74px;
        max-height: 56px;
    }

    .mobile-cart {
        display: flex;
        justify-self: end;
    }
}


/* =====================================================
   SMALL PHONES
===================================================== */

@media (max-width: 480px) {

    .header-container {
        width: 91%;
        height: 66px;
    }

    .logo {
        width: 94px;
        height: 63px;
    }

    .logo img {
        width: 70px;
        max-height: 53px;
    }

    .mobile-menu-btn span {
        width: 22px;
    }

}
/* =====================================================
   ATHR HERO
===================================================== */

.hero {
    width: 100%;
    background: #8B1717;
    color: #FFFFFF;
    overflow: hidden;
}

.hero-container {
    width: min(1380px, 94%);
    min-height: 600px;
    margin: auto;

    display: grid;
    grid-template-columns: 1.15fr 0.85fr;

    align-items: center;
    gap: 55px;

    padding: 45px 0 55px;
}


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

.hero-image-wrapper {
    width: 100%;
    position: relative;
}

.hero-image {
    width: 100%;
    height: 500px;

    background: #EDE3D5;

    border-radius: 26px;

    overflow: hidden;

    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.18);
}

.hero-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


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

.hero-content {
    direction: rtl;
    text-align: right;

    padding-left: 25px;
}

.hero-brand {
    display: block;

    margin-bottom: 18px;

    color: #E6D0B5;

    font-family: var(--title-font);

    font-size: 15px;
    font-weight: 500;
}

.hero-content h1 {
    margin: 0 0 22px;

    color: #FFFFFF;

    font-family: var(--title-font);

    font-size: clamp(38px, 4.2vw, 60px);

    line-height: 1.55;

    font-weight: 700;
}

.hero-content p {
    max-width: 510px;

    margin: 0 0 30px;

    color: #F8EEE5;

    font-family: var(--body-font);

    font-size: 18px;

    line-height: 2;
}


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

.hero-button {
    min-width: 185px;
    height: 56px;

    padding: 0 24px;

    background: #FFFFFF;

    color: #8B1717;

    border-radius: 8px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 20px;

    font-family: var(--title-font);

    font-size: 15px;

    font-weight: 700;

    transition:
        transform 0.25s ease,
        background 0.25s ease;
}

.hero-button:hover {
    background: #EDE3D5;

    transform: translateY(-2px);
}

.hero-button span {
    font-family: Arial, sans-serif;

    font-size: 23px;

    line-height: 1;
}


/* =====================================================
   DELIVERY
===================================================== */

.hero-delivery {
    margin-top: 19px;

    color: #F2E1D1;

    font-family: var(--body-font);

    font-size: 14px;
}


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

@media (max-width: 1000px) {

    .hero-container {
        gap: 30px;
    }

    .hero-content {
        padding-left: 5px;
    }

    .hero-content h1 {
        font-size: 40px;
    }

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

    .hero-image {
        height: 430px;
    }
}


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

@media (max-width: 768px) {

    .hero-container {
        width: 92%;

        min-height: auto;

        display: flex;

        flex-direction: column;

        gap: 0;

        padding: 22px 0 38px;
    }


    /* الصورة أولًا */

    .hero-image-wrapper {
        width: 100%;

        order: 1;

        margin-bottom: 25px;
    }

    .hero-image {
        width: 100%;

        height: 350px;

        border-radius: 20px;
    }


    /* النص */

    .hero-content {
        width: 100%;

        order: 2;

        padding: 0;

        text-align: center;

        display: flex;

        flex-direction: column;

        align-items: center;
    }

    .hero-brand {
        margin-bottom: 9px;

        font-size: 13px;
    }

    .hero-content h1 {
        margin-bottom: 13px;

        font-size: clamp(28px, 8vw, 38px);

        line-height: 1.65;
    }

    .hero-content p {
        max-width: 390px;

        margin-bottom: 20px;

        font-size: 14px;

        line-height: 1.9;
    }


    /* الزر */

    .hero-button {
        width: min(230px, 80%);

        height: 52px;

        font-size: 14px;
    }

    .hero-delivery {
        margin-top: 15px;

        font-size: 12px;
    }
}


/* =====================================================
   SMALL PHONES
===================================================== */

@media (max-width: 480px) {

    .hero-container {
        width: 91%;

        padding-top: 18px;
    }

    .hero-image {
        height: 315px;

        border-radius: 18px;
    }

    .hero-content h1 {
        font-size: 28px;
    }

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

    .hero-button {
        width: 100%;

        max-width: 230px;
    }
}
/* =====================================================
   SEARCH PANEL
===================================================== */

.search-panel {

    width: 100%;

    position: absolute;

    top: 100%;

    right: 0;

    background: var(--white);

    padding: 18px 0;

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.10);

    display: none;

}


.search-panel.show {

    display: block;

}


.search-wrapper {

    width: min(900px, 90%);

    height: 52px;

    margin: auto;

    border: 1px solid var(--beige-dark);

    border-radius: 8px;

    display: flex;

    align-items: center;

    overflow: hidden;

}


.search-wrapper input {

    flex: 1;

    height: 100%;

    border: none;

    outline: none;

    padding: 0 18px;

    font-size: 16px;

    color: var(--charcoal);

}


.search-wrapper input::placeholder {

    color: #999;

}


.search-wrapper button {

    width: 55px;

    height: 100%;

    border: none;

    background: transparent;

    color: var(--burgundy);

    font-size: 30px;

    cursor: pointer;

}


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

.mobile-menu-btn {

    display: none;

    width: 40px;

    height: 40px;

    border: none;

    background: transparent;

    cursor: pointer;

    flex-direction: column;

    justify-content: center;

    align-items: flex-start;

    gap: 5px;

}


.mobile-menu-btn span {

    display: block;

    width: 23px;

    height: 1.5px;

    background: var(--white);

}


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

.mobile-cart {

    display: none;

    color: var(--white);

}


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

.mobile-menu {

    position: fixed;

    top: 0;

    right: -100%;

    width: min(370px, 88%);

    height: 100vh;

    background: var(--cream);

    color: var(--charcoal);

    z-index: 3000;

    padding: 25px;

    overflow-y: auto;

    transition: right 0.35s ease;

    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.15);

}


.mobile-menu.active {

    right: 0;

}


.mobile-menu-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-bottom: 20px;

    border-bottom: 1px solid var(--beige-dark);

}


.mobile-menu-top span {

    font-family: var(--title-font);

    font-size: 18px;

    font-weight: 700;

    color: var(--burgundy);

}


.mobile-menu-top button {

    width: 35px;

    height: 35px;

    border: none;

    background: transparent;

    color: var(--burgundy);

    font-size: 30px;

    cursor: pointer;

}


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

.mobile-navigation {

    display: flex;

    flex-direction: column;

    padding-top: 15px;

}


.mobile-navigation > a {

    font-family: var(--title-font);

    font-size: 14px;

    padding: 15px 0;

    border-bottom: 1px solid rgba(94, 13, 13, 0.08);

}


.mobile-navigation > a:hover,
.mobile-navigation > a.mobile-active {

    color: var(--burgundy);

}


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

.mobile-categories {

    background: var(--beige);

    border-radius: 10px;

    padding: 7px 15px;

    margin: 5px 0 10px;

}


.mobile-categories a {

    display: block;

    padding: 10px 0;

    font-size: 13px;

    border-bottom: 1px solid rgba(94, 13, 13, 0.08);

}


.mobile-categories a:last-child {

    border-bottom: none;

}


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

.mobile-social {

    margin-top: 30px;

    padding-top: 20px;

    border-top: 1px solid var(--beige-dark);

}


.mobile-social p {

    color: var(--burgundy);

    font-family: var(--title-font);

    font-weight: 600;

}


.mobile-social div {

    margin-top: 10px;

    display: flex;

    gap: 10px;

    font-size: 14px;

    color: var(--charcoal);

}


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

@media (max-width: 900px) {
 
    

    .top-bar {

        height: 34px;

    }


    .top-bar-container {

        width: 92%;

        justify-content: center;

    }


    .top-message {

        display: none;

    }


    .top-delivery {

        font-size: 11px;

    }


    .header-container {

        width: 92%;

        height: 72px;

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

    }


    .desktop-nav {

        display: none;

    }


    .mobile-menu-btn {

        display: flex;

        justify-self: start;

    }


    .logo {

        justify-self: center;

        width: 100px;

        height: 65px;

    }


    .logo img {

        width: 72px;

        max-height: 55px;

    }


    .mobile-cart {

        display: flex;

        justify-self: end;

    }

}


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

@media (max-width: 480px) {


    .top-bar {

        height: 32px;

    }


    .top-delivery {

        font-size: 10px;

    }


    .header-container {

        height: 68px;

    }


    .logo img {

        width: 68px;

    }


    .mobile-menu {

        width: 90%;

        padding: 22px;

    }

}

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

@media (max-width: 768px) {

    .athr-hero {
        height: 680px;
        min-height: 680px;
    }


    /* ---------------------------------------------
       IMAGE
    --------------------------------------------- */

    .athr-hero-bg img {
        object-fit: cover;

        /*
          نخلي المنتجات واضحة قدر الإمكان
          على شاشة الهاتف
        */
        object-position: center center;
    }


    /* ---------------------------------------------
       OVERLAY
       أقوى من جهة اليمين فقط
    --------------------------------------------- */

    .athr-hero-overlay {
        background:
            linear-gradient(
                to left,
                rgba(91, 12, 12, 0.94) 0%,
                rgba(91, 12, 12, 0.82) 22%,
                rgba(91, 12, 12, 0.56) 42%,
                rgba(91, 12, 12, 0.22) 65%,
                rgba(91, 12, 12, 0.04) 100%
            );
    }


    /* ---------------------------------------------
       CONTAINER
    --------------------------------------------- */

    .athr-hero-container {
        width: 100%;
        height: 100%;
    }


    /* ---------------------------------------------
       CONTENT
    --------------------------------------------- */

    .athr-hero-content {

        top: 0;
        right: 0;

        transform: none;

        width: 100%;
        max-width: none;

        height: 100%;

        box-sizing: border-box;

        padding:
            62px
            22px
            28px
            22px;

        display: flex;

        flex-direction: column;

        align-items: flex-end;

        justify-content: flex-start;

        text-align: right;
    }


    /* ---------------------------------------------
       TITLE
    --------------------------------------------- */

    .athr-hero-content h1 {

        width: 100%;
        max-width: 330px;

        margin: 0 0 16px;

        font-size: 37px;

        line-height: 1.38;

        font-weight: 800;

        text-align: right;
    }


    /* ---------------------------------------------
       DESCRIPTION
    --------------------------------------------- */

    .athr-hero-content p {

        width: 100%;
        max-width: 310px;

        margin: 0 0 20px;

        font-size: 14px;

        line-height: 1.85;

        text-align: right;
    }


    /* ---------------------------------------------
       BUTTON
    --------------------------------------------- */

    .athr-hero-button {

        min-width: 205px;

        width: auto;

        height: 52px;

        padding: 0 22px;

        gap: 13px;

        border-radius: 11px;

        font-size: 15px;
    }


    .athr-arrow {
        font-size: 21px;
    }


    /* ---------------------------------------------
       FEATURES
    --------------------------------------------- */

    .athr-hero-features {

        width: 100%;

        margin-top: auto;

        padding-top: 18px;

        display: flex;

        align-items: center;

        justify-content: center;

        direction: rtl;
    }


    .athr-feature {

        flex: 1;

        min-width: 0;

        gap: 8px;

        justify-content: center;

        text-align: center;

        flex-direction: column;
    }


    /* ---------------------------------------------
       ICON
    --------------------------------------------- */

    .athr-feature-icon {

        width: 42px;
        height: 42px;

        border-color:
            rgba(255, 255, 255, 0.65);
    }


    .athr-feature-icon svg {

        width: 22px;
        height: 22px;
    }


    /* ---------------------------------------------
       FEATURE TEXT
    --------------------------------------------- */

    .athr-feature-text {

        font-size: 12px;

        line-height: 1.65;

        text-align: center;
    }


    /* ---------------------------------------------
       DIVIDER
    --------------------------------------------- */

    .athr-feature-divider {

        width: 1px;

        height: 65px;

        margin: 0 10px;

        background:
            rgba(255, 255, 255, 0.45);
    }

}


/* =====================================================
   SMALL PHONES
===================================================== */

@media (max-width: 430px) {

    .athr-hero {

        height: 650px;
        min-height: 650px;
    }


    .athr-hero-content {

        padding:
            55px
            18px
            25px
            18px;
    }


    .athr-hero-content h1 {

        max-width: 315px;

        font-size: 34px;

        line-height: 1.4;

        margin-bottom: 13px;
    }


    .athr-hero-content p {

        max-width: 295px;

        font-size: 13px;

        line-height: 1.8;

        margin-bottom: 18px;
    }


    .athr-hero-button {

        min-width: 195px;

        height: 50px;

        font-size: 15px;
    }


    .athr-feature-text {

        font-size: 11px;
    }


    .athr-feature-icon {

        width: 40px;
        height: 40px;
    }


    .athr-feature-divider {

        height: 60px;

        margin: 0 7px;
    }

}


/* =====================================================
   VERY SMALL PHONES
===================================================== */

@media (max-width: 360px) {

    .athr-hero {

        height: 620px;
        min-height: 620px;
    }


    .athr-hero-content {

        padding:
            48px
            15px
            22px
            15px;
    }


    .athr-hero-content h1 {

        font-size: 30px;

        max-width: 285px;
    }


    .athr-hero-content p {

        font-size: 12px;

        max-width: 270px;
    }


    .athr-hero-button {

        min-width: 180px;

        height: 48px;

        font-size: 14px;
    }


    .athr-feature-text {

        font-size: 10px;
    }


    .athr-feature-icon {

        width: 37px;
        height: 37px;
    }

}
/* =====================================================
   ATHR HERO - MOBILE VERSION
===================================================== */

@media (max-width: 768px) {

    .athr-hero {
        position: relative;
        width: 100%;
        height: 700px;
        min-height: 700px;
        overflow: hidden;
    }


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

    .athr-hero-bg {
        position: absolute;
        inset: 0;

        width: 100%;
        height: 100%;

        z-index: 1;
    }

    .athr-hero-bg img {
        width: 100%;
        height: 100%;

        display: block;

        object-fit: cover;

        /*
         * نخلي المنتجات في المنتصف
         * حتى تظهر بشكل أفضل على الهاتف
         */
        object-position: center center;
    }


    /* =================================================
       BURGUNDY OVERLAY
       أقوى من جهة النص - اليمين
    ================================================= */

    .athr-hero-overlay {
        position: absolute;
        inset: 0;

        z-index: 2;

        background:
            linear-gradient(
                to left,
                rgba(91, 12, 12, 0.94) 0%,
                rgba(91, 12, 12, 0.84) 20%,
                rgba(91, 12, 12, 0.62) 40%,
                rgba(91, 12, 12, 0.30) 62%,
                rgba(91, 12, 12, 0.08) 82%,
                rgba(91, 12, 12, 0.00) 100%
            );
    }


    /* =================================================
       CONTAINER
    ================================================= */

    .athr-hero-container {
        position: relative;

        width: 100%;
        height: 100%;

        z-index: 3;
    }


    /* =================================================
       CONTENT
    ================================================= */

    .athr-hero-content {

        position: absolute;

        top: 0;
        right: 0;

        transform: none;

        width: 100%;
        max-width: none;

        height: 100%;

        box-sizing: border-box;

        padding:
            58px
            22px
            25px
            22px;

        display: flex;

        flex-direction: column;

        align-items: flex-end;

        justify-content: flex-start;

        text-align: right;
    }


    /* =================================================
       SMALL BRAND TEXT
       إذا موجود
    ================================================= */

    .athr-hero-content > span {
        color: #ffffff;

        font-size: 13px;

        margin-bottom: 12px;
    }


    /* =================================================
       TITLE
    ================================================= */

    .athr-hero-content h1 {

        width: 100%;
        max-width: 330px;

        margin: 0 0 15px;

        color: #ffffff;

        font-size: 36px;

        line-height: 1.4;

        font-weight: 800;

        text-align: right;
    }


    /* =================================================
       DESCRIPTION
    ================================================= */

    .athr-hero-content p {

        width: 100%;
        max-width: 315px;

        margin: 0 0 20px;

        color: #ffffff;

        font-size: 14px;

        line-height: 1.85;

        text-align: right;
    }


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

    .athr-hero-button {

        display: inline-flex;

        align-items: center;
        justify-content: center;

        gap: 13px;

        width: 205px;
        min-width: 205px;

        height: 52px;

        padding: 0 20px;

        box-sizing: border-box;

        border-radius: 11px;

        background: #ffffff;

        color: #641111;

        text-decoration: none;

        font-size: 15px;

        font-weight: 700;

        box-shadow:
            0 7px 22px rgba(0, 0, 0, 0.20);
    }


    .athr-arrow {
        font-size: 21px;

        line-height: 1;
    }


    /* =================================================
       FEATURES
    ================================================= */

    .athr-hero-features {

        width: 100%;

        margin-top: auto;

        padding-top: 20px;

        display: flex;

        align-items: center;

        justify-content: center;

        direction: rtl;
    }


    /* =================================================
       FEATURE
    ================================================= */

    .athr-feature {

        flex: 1;

        min-width: 0;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        gap: 8px;

        text-align: center;

        color: #ffffff;
    }


    /* =================================================
       FEATURE ICON
    ================================================= */

    .athr-feature-icon {

        width: 43px;
        height: 43px;

        flex-shrink: 0;

        display: flex;

        align-items: center;
        justify-content: center;

        border:
            1px solid rgba(255, 255, 255, 0.65);

        border-radius: 50%;
    }


    .athr-feature-icon svg {

        width: 23px;
        height: 23px;

        color: #ffffff;
    }


    /* =================================================
       FEATURE TEXT
    ================================================= */

    .athr-feature-text {

        color: #ffffff;

        font-size: 12px;

        line-height: 1.65;

        text-align: center;
    }


    .athr-feature-text strong {

        color: #ffffff;

        font-weight: 600;
    }


    /* =================================================
       DIVIDER
    ================================================= */

    .athr-feature-divider {

        width: 1px;

        height: 65px;

        margin: 0 10px;

        background:
            rgba(255, 255, 255, 0.50);
    }

}


/* =====================================================
   SMALL PHONES
===================================================== */

@media (max-width: 430px) {

    .athr-hero {

        height: 670px;
        min-height: 670px;
    }


    .athr-hero-content {

        padding:
            52px
            18px
            23px
            18px;
    }


    .athr-hero-content h1 {

        max-width: 315px;

        font-size: 34px;

        line-height: 1.4;

        margin-bottom: 13px;
    }


    .athr-hero-content p {

        max-width: 295px;

        font-size: 13px;

        line-height: 1.8;

        margin-bottom: 18px;
    }


    .athr-hero-button {

        width: 195px;
        min-width: 195px;

        height: 50px;

        font-size: 15px;
    }


    .athr-feature-icon {

        width: 41px;
        height: 41px;
    }


    .athr-feature-icon svg {

        width: 22px;
        height: 22px;
    }


    .athr-feature-text {

        font-size: 11px;

        line-height: 1.6;
    }


    .athr-feature-divider {

        height: 60px;

        margin: 0 7px;
    }

}


/* =====================================================
   VERY SMALL PHONES
===================================================== */

@media (max-width: 360px) {

    .athr-hero {

        height: 640px;
        min-height: 640px;
    }


    .athr-hero-content {

        padding:
            45px
            15px
            20px
            15px;
    }


    .athr-hero-content h1 {

        max-width: 285px;

        font-size: 30px;
    }


    .athr-hero-content p {

        max-width: 270px;

        font-size: 12px;
    }


    .athr-hero-button {

        width: 180px;
        min-width: 180px;

        height: 48px;

        font-size: 14px;
    }


    .athr-feature-icon {

        width: 38px;
        height: 38px;
    }


    .athr-feature-icon svg {

        width: 20px;
        height: 20px;
    }


    .athr-feature-text {

        font-size: 10px;
    }


    .athr-feature-divider {

        height: 57px;

        margin: 0 5px;
    }

}
/* =====================================================
   ATHR CATEGORIES
===================================================== */

.athr-categories {

    width: 100%;

    padding: 75px 0 85px;

    background: #ffffff;

    direction: rtl;
}


/* =====================================================
   CONTAINER
===================================================== */

.athr-section-container {

    width: 100%;

    max-width: 1250px;

    margin: 0 auto;

    padding: 0 25px;

    box-sizing: border-box;
}


/* =====================================================
   SECTION HEADING
===================================================== */

.athr-section-heading {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    margin-bottom: 45px;

    text-align: center;
}


.athr-section-heading h2 {

    margin: 0;

    color: #151515;

    font-size: 36px;

    line-height: 1.4;

    font-weight: 800;
}


/* =====================================================
   SMALL BURGUNDY LINE
===================================================== */

.athr-heading-line {

    display: block;

    width: 58px;

    height: 4px;

    margin-top: 13px;

    border-radius: 10px;

    background: #721515;
}


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

.athr-categories-grid {

    display: grid;

    grid-template-columns:
        repeat(5, 1fr);

    gap: 32px 24px;

    width: 100%;
}


/* =====================================================
   CATEGORY CARD
===================================================== */

.athr-category-card {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: flex-start;

    text-align: center;

    text-decoration: none;

    color: #171717;

    transition:
        transform 0.25s ease;
}


.athr-category-card:hover {

    transform: translateY(-5px);
}


/* =====================================================
   IMAGE
===================================================== */

.athr-category-image {

    width: 100%;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    border-radius: 50%;

    background: #f5eeee;

    box-shadow:
        0 5px 18px rgba(0, 0, 0, 0.06);
}


.athr-category-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.35s ease;
}


.athr-category-card:hover
.athr-category-image img {

    transform: scale(1.06);
}


/* =====================================================
   CATEGORY NAME
===================================================== */

.athr-category-card h3 {

    margin: 17px 0 0;

    color: #222222;

    font-size: 17px;

    line-height: 1.5;

    font-weight: 600;

}


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

@media (max-width: 1000px) {

    .athr-categories {

        padding:
            60px 0 70px;
    }


    .athr-categories-grid {

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

        gap: 28px 18px;
    }


    .athr-section-heading h2 {

        font-size: 32px;
    }


    .athr-category-card h3 {

        font-size: 15px;
    }

}


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

@media (max-width: 768px) {

    .athr-categories {

        padding:
            48px 0 55px;
    }


    .athr-section-container {

        padding:
            0 16px;
    }


    /* ---------------------------------------------
       TITLE
    --------------------------------------------- */

    .athr-section-heading {

        margin-bottom: 30px;
    }


    .athr-section-heading h2 {

        font-size: 28px;

        line-height: 1.4;
    }


    .athr-heading-line {

        width: 48px;

        height: 3px;

        margin-top: 9px;
    }


    /* ---------------------------------------------
       MOBILE GRID
    --------------------------------------------- */

    .athr-categories-grid {

        display: grid;

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

        gap:
            25px 14px;
    }


    /* ---------------------------------------------
       IMAGE
    --------------------------------------------- */

    .athr-category-image {

        width: 100%;

        aspect-ratio: 1 / 1;

        border-radius: 50%;
    }


    /* ---------------------------------------------
       TEXT
    --------------------------------------------- */

    .athr-category-card h3 {

        margin-top: 10px;

        font-size: 13px;

        line-height: 1.55;

        font-weight: 600;
    }

}


/* =====================================================
   SMALL PHONES
===================================================== */

@media (max-width: 430px) {

    .athr-categories {

        padding:
            42px 0 50px;
    }


    .athr-section-container {

        padding:
            0 14px;
    }


    .athr-section-heading {

        margin-bottom: 26px;
    }


    .athr-section-heading h2 {

        font-size: 26px;
    }


    .athr-categories-grid {

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

        gap:
            23px 11px;
    }


    .athr-category-card h3 {

        font-size: 12px;

        line-height: 1.5;

        margin-top: 9px;
    }

}
/* =====================================================
   ATHR - CATEGORIES | MOBILE
   دائرتين في كل صف
===================================================== */

@media (max-width: 768px) {

    .categories-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px 18px;
        padding: 0 18px;
        width: 100%;
        box-sizing: border-box;
    }

    .category-card {
        width: 100%;
        text-align: center;
    }

    .category-card img {
        width: 145px;
        height: 145px;
        max-width: 100%;
        object-fit: cover;
        border-radius: 50%;
        display: block;
        margin: 0 auto 12px;
    }

    .category-card h3,
    .category-card p {
        font-size: 16px;
        line-height: 1.5;
        margin: 0;
        text-align: center;
    }

}


/* =====================================================
   الجوالات الصغيرة
===================================================== */

@media (max-width: 430px) {

    .categories-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 22px 12px;
        padding: 0 14px;
    }

    .category-card img {
        width: 135px;
        height: 135px;
    }

    .category-card h3,
    .category-card p {
        font-size: 15px;
    }

}
/* =====================================================
   ATHR PRODUCTS — SUPABASE DYNAMIC SECTIONS
===================================================== */
.athr-products-section {
    width: 100%;
    padding: 82px 0;
    background: #FCFAF7;
}

.athr-products-section.athr-new-arrivals {
    background: #FFFFFF;
}

.athr-products-grid {
    width: min(1320px, 92%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.athr-product-card {
    min-width: 0;
    background: #FFFFFF;
    border: 1px solid rgba(94, 13, 13, 0.08);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(25, 23, 23, 0.06);
    transition: transform .25s ease, box-shadow .25s ease;
}

.athr-product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 36px rgba(25, 23, 23, 0.10);
}

.athr-product-image {
    display: block;
    aspect-ratio: 1 / 1;
    background: #F4EEE8;
    overflow: hidden;
}

.athr-product-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .35s ease;
}

.athr-product-card:hover .athr-product-image img {
    transform: scale(1.035);
}

.athr-product-info {
    padding: 17px 17px 18px;
    text-align: right;
}

.athr-product-category {
    display: block;
    margin-bottom: 6px;
    color: #8B1717;
    font-size: 11px;
    font-weight: 600;
}

.athr-product-info h3 {
    margin: 0 0 15px;
    color: #191717;
    font-family: var(--title-font);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.7;
}

.athr-product-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.athr-product-price {
    color: #5E0D0D;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
}

.athr-add-cart {
    border: 0;
    border-radius: 9px;
    padding: 9px 12px;
    background: #8B1717;
    color: #FFFFFF;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    transition: background .2s ease, transform .2s ease;
}

.athr-add-cart:hover {
    background: #5E0D0D;
    transform: translateY(-1px);
}

.athr-products-loading,
.athr-products-message {
    grid-column: 1 / -1;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #777;
    text-align: center;
    font-size: 14px;
}

@media (max-width: 1000px) {
    .athr-products-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .athr-products-section {
        padding: 58px 0;
    }

    .athr-products-grid {
        width: min(92%, 520px);
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .athr-product-info {
        padding: 13px 12px 14px;
    }

    .athr-product-info h3 {
        font-size: 12px;
        margin-bottom: 12px;
    }

    .athr-product-price {
        font-size: 13px;
    }

    .athr-add-cart {
        padding: 8px 9px;
        font-size: 10px;
    }
}

/* =====================================================
   ATHR FINAL SITE SYSTEM
===================================================== */
body{min-height:100vh}
button{font-family:inherit}
.nav-dropdown-wrap{position:relative;display:flex;align-items:center}
.nav-dropdown-btn{font-family:var(--title-font);font-size:13px;font-weight:500;color:#fff;background:transparent;border:0;cursor:pointer;padding:9px 0;display:flex;align-items:center;gap:7px}
.nav-dropdown-btn:hover{color:#F0DCC4}
.categories-dropdown{position:absolute;top:calc(100% + 10px);right:50%;transform:translateX(50%) translateY(-8px);width:240px;background:#fff;border:1px solid rgba(94,13,13,.08);border-radius:14px;padding:9px;box-shadow:0 18px 40px rgba(0,0,0,.14);opacity:0;visibility:hidden;pointer-events:none;transition:.22s ease;z-index:1200}
.categories-dropdown.show{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(50%) translateY(0)}
.categories-dropdown a{display:block!important;color:#2a2626!important;font-family:var(--body-font)!important;font-size:14px!important;padding:10px 12px!important;border-radius:9px}
.categories-dropdown a:hover{background:#F7EFE6;color:#8B1717!important}
.mobile-categories-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;font-family:var(--title-font);font-size:14px;padding:15px 0;border:0;border-bottom:1px solid rgba(94,13,13,.08);background:transparent;color:var(--charcoal);cursor:pointer;text-align:right}
.mobile-categories-toggle span{transition:.2s ease}.mobile-categories-toggle.open span{transform:rotate(180deg)}
.mobile-categories{display:none}.mobile-categories.open{display:block}
.search-results{width:min(900px,90%);margin:10px auto 0;max-height:360px;overflow:auto;border-radius:12px}
.search-result{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid rgba(94,13,13,.08);padding:10px 12px;margin-bottom:7px;border-radius:11px;color:#222}
.search-result img{width:52px;height:52px;object-fit:cover;border-radius:8px;background:#F4EEE8}.search-result strong{display:block;font-size:13px}.search-result small{color:#8B1717;font-size:11px}.search-empty{background:#fff;padding:18px;text-align:center;color:#777;border-radius:11px}
.athr-social-section{background:#F7EFE6;padding:78px 0 88px;text-align:center;direction:rtl}.athr-social-kicker{display:block;color:#8B1717;letter-spacing:3px;font-size:11px;font-weight:700;margin-bottom:12px}.athr-social-heading{margin-bottom:14px}.athr-social-heading h2{font-size:40px}.athr-social-text{color:#6d6662;font-size:16px;line-height:1.9;margin:0 auto 28px}.athr-social-buttons{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}.social-button{min-width:190px;height:58px;padding:0 24px;border-radius:30px;background:#fff;border:1px solid rgba(94,13,13,.09);display:inline-flex;align-items:center;justify-content:center;gap:12px;color:#4a4240;font-weight:700;box-shadow:0 8px 24px rgba(45,25,20,.05);transition:.25s ease}.social-button:hover{transform:translateY(-3px);color:#8B1717}.social-button svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.social-button:nth-child(2) svg{fill:none}
.athr-footer{background:#5E0D0D;color:#fff;padding:68px 0 0;direction:rtl}.footer-container{width:min(1250px,92%);margin:0 auto;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:50px;padding-bottom:50px}.footer-brand img{width:95px;display:block;margin-bottom:16px}.footer-brand p{color:#F3E7DD;font-size:14px;line-height:1.9}.footer-column h3{font-family:var(--title-font);font-size:15px;margin-bottom:18px;color:#fff}.footer-column a{display:block;color:#F0E2D7;font-size:13px;padding:7px 0;transition:.2s}.footer-column a:hover{color:#fff;transform:translateX(-2px)}.footer-social{display:flex;gap:12px}.footer-social a{width:44px;height:44px;border:1px solid rgba(255,255,255,.22);border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0}.footer-social a:hover{transform:translateY(-2px)}.footer-social svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.footer-bottom{border-top:1px solid rgba(255,255,255,.14);text-align:center;padding:18px 15px;color:#EADBD0;font-size:12px}
/* generic internal pages */
.page-hero{background:linear-gradient(135deg,#5E0D0D,#8B1717);color:#fff;padding:72px 0 68px;text-align:center}.page-hero .eyebrow{display:block;color:#E7D8C0;letter-spacing:3px;font-size:11px;font-weight:700;margin-bottom:12px}.page-hero h1{font-family:var(--title-font);font-size:38px;margin:0 0 12px}.page-hero p{font-size:15px;color:#F6EDE6;line-height:1.9}.internal-container{width:min(1250px,92%);margin:0 auto}.shop-main,.categories-main,.contact-main,.product-main,.cart-main{padding:62px 0 90px}.shop-toolbar{background:#fff;border:1px solid rgba(94,13,13,.08);border-radius:18px;padding:18px;display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:28px;box-shadow:0 8px 25px rgba(25,23,23,.04)}.filter-row{display:flex;gap:9px;flex-wrap:wrap}.filter-chip{border:1px solid #dfd2c5;background:#fff;color:#4d4540;border-radius:22px;padding:9px 14px;cursor:pointer;font-size:12px;transition:.2s}.filter-chip:hover,.filter-chip.active{background:#8B1717;color:#fff;border-color:#8B1717}.sort-select{height:42px;border:1px solid #dfd2c5;border-radius:10px;padding:0 36px 0 12px;background:#fff;outline:none;color:#333;min-width:170px;direction:rtl;cursor:pointer}.shop-category-intro{max-width:850px;margin:0 auto 30px;padding:22px 25px;text-align:center;background:#faf7f4;border:1px solid rgba(139,23,23,.10);border-radius:18px;display:none}.shop-category-intro.show{display:block}.shop-category-intro h2{margin:0 0 8px;font-family:var(--title-font);font-size:22px;color:#5E0D0D}.shop-category-intro p{margin:0;font-family:"Tajawal",sans-serif;font-size:15px;line-height:1.9;color:#666}.page-products-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}.page-products-grid .athr-product-card{height:100%}.shop-state{grid-column:1/-1;text-align:center;padding:45px;color:#777;background:#fff;border-radius:16px}.category-index{display:grid;grid-template-columns:repeat(5,1fr);gap:15px;margin-bottom:55px}.category-index-card{background:#fff;border:1px solid rgba(94,13,13,.08);border-radius:15px;padding:18px;text-align:center;transition:.2s}.category-index-card:hover{transform:translateY(-3px);box-shadow:0 10px 25px rgba(0,0,0,.06)}.category-index-card span{display:block;color:#8B1717;font-weight:700;font-size:13px}.category-section{padding:50px 0;border-top:1px solid rgba(94,13,13,.08)}.category-section:first-of-type{border-top:0}.category-title{text-align:right;margin-bottom:10px}.category-title h2{font-family:var(--title-font);font-size:25px;color:#222}.category-title p{color:#777;font-size:14px;line-height:1.9;margin-top:8px}.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.contact-card{background:#fff;border:1px solid rgba(94,13,13,.08);border-radius:18px;padding:34px 25px;text-align:center;transition:.25s}.contact-card:hover{transform:translateY(-4px);box-shadow:0 15px 30px rgba(0,0,0,.07)}.contact-card .contact-icon{width:58px;height:58px;border-radius:50%;margin:0 auto 18px;background:#F7EFE6;color:#8B1717;display:flex;align-items:center;justify-content:center}.contact-card svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.contact-card h2{font-family:var(--title-font);font-size:18px;margin-bottom:8px}.contact-card p{color:#777;font-size:13px;margin-bottom:18px}.contact-card a{display:inline-flex;align-items:center;justify-content:center;min-width:150px;height:44px;border-radius:10px;background:#8B1717;color:#fff;font-size:13px;font-weight:700}.product-detail{display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:center}.product-detail-image{background:#F4EEE8;border-radius:22px;overflow:hidden;aspect-ratio:1/1}.product-detail-image img{width:100%;height:100%;object-fit:cover}.product-detail-info .category-label{color:#8B1717;font-size:12px;font-weight:700}.product-detail-info h1{font-family:var(--title-font);font-size:34px;line-height:1.6;margin:12px 0}.product-detail-info .detail-price{font-size:22px;font-weight:800;color:#5E0D0D;margin-bottom:20px}.product-detail-info .detail-note{color:#777;line-height:1.9;font-size:14px;margin-bottom:25px}.primary-large{border:0;background:#8B1717;color:#fff;border-radius:11px;height:52px;padding:0 28px;font-weight:700;cursor:pointer}.cart-list{background:#fff;border:1px solid rgba(94,13,13,.08);border-radius:18px;overflow:hidden}.cart-item{display:grid;grid-template-columns:80px 1fr auto auto;gap:18px;align-items:center;padding:18px;border-bottom:1px solid #eee}.cart-item:last-child{border-bottom:0}.cart-item img{width:80px;height:80px;border-radius:10px;object-fit:cover;background:#F4EEE8}.cart-item h3{font-size:14px}.cart-item p{font-size:12px;color:#8B1717;margin-top:5px}.qty-control{display:flex;align-items:center;gap:8px}.qty-control button{width:30px;height:30px;border:1px solid #ddd;background:#fff;border-radius:7px;cursor:pointer}.remove-item{border:0;background:transparent;color:#9a6d6d;cursor:pointer}.cart-summary{margin-top:20px;background:#fff;border:1px solid rgba(94,13,13,.08);border-radius:18px;padding:22px;display:flex;justify-content:space-between;align-items:center;gap:15px}.cart-summary strong{font-size:18px;color:#5E0D0D}.empty-cart{text-align:center;background:#fff;border-radius:18px;padding:55px;color:#777}
@media(max-width:1000px){.page-products-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.category-index{grid-template-columns:repeat(3,1fr)}.footer-container{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.nav-dropdown-wrap{display:none}.search-panel{top:100%}.footer-container{gap:28px}}
@media(max-width:700px){.shop-category-intro{margin:0 15px 25px;padding:18px 16px}.shop-category-intro h2{font-size:18px}.shop-category-intro p{font-size:13px}.athr-social-section{padding:58px 0 65px}.athr-social-heading h2{font-size:31px}.athr-social-text{font-size:14px;padding:0 10px}.social-button{width:min(250px,90%);min-width:0;height:54px}.page-hero{padding:52px 18px}.page-hero h1{font-size:29px}.shop-main,.categories-main,.contact-main,.product-main,.cart-main{padding:40px 0 60px}.shop-toolbar{align-items:stretch;flex-direction:column}.filter-row{display:grid;grid-template-columns:repeat(2,1fr)}.filter-chip{width:100%}.sort-select{width:100%}.page-products-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.category-index{grid-template-columns:repeat(2,1fr);gap:12px}.category-section{padding:35px 0}.category-title h2{font-size:20px}.category-title p{font-size:13px}.contact-grid{grid-template-columns:1fr;gap:14px}.product-detail{grid-template-columns:1fr;gap:25px}.product-detail-info h1{font-size:25px}.cart-item{grid-template-columns:65px 1fr auto;gap:11px}.cart-item img{width:65px;height:65px}.qty-control{grid-column:2}.remove-item{grid-column:3;grid-row:1}.cart-summary{flex-direction:column;align-items:stretch;text-align:center}.footer-container{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}}
@media(max-width:430px){.page-products-grid{gap:11px}.athr-product-bottom{flex-direction:column;align-items:stretch}.athr-add-cart{width:100%}.athr-product-price{text-align:center}.filter-row{gap:7px}.filter-chip{font-size:11px;padding:8px 6px}.category-index-card{padding:14px 8px}.footer-container{grid-template-columns:1fr;text-align:center}.footer-brand{grid-column:auto}.footer-brand img{margin:0 auto 14px}.footer-social{justify-content:center}}

.athr-mini-toast{position:fixed;bottom:25px;right:25px;background:#5E0D0D;color:#fff;padding:12px 18px;border-radius:10px;box-shadow:0 10px 25px rgba(0,0,0,.18);z-index:5000;font-size:13px;opacity:0;transform:translateY(10px);pointer-events:none;transition:.25s}.athr-mini-toast.show{opacity:1;transform:translateY(0)}
@media(max-width:700px){.athr-mini-toast{right:15px;left:15px;bottom:15px;text-align:center}}

/* Footer matches the ATHR social section reference */
.athr-footer-social{background:#F7EFE6;color:#4a4240;padding:0;direction:rtl}.footer-social-inner{width:min(900px,92%);margin:0 auto;text-align:center;padding-top:62px}.footer-social-inner .athr-social-kicker{margin-bottom:8px}.footer-social-inner h2{font-family:var(--title-font);font-size:38px;color:#5E0D0D;margin:0 0 12px}.footer-social-inner p{font-size:15px;color:#6d6662;line-height:1.9;margin:0 auto 25px}.footer-social-buttons{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;padding-bottom:42px}.footer-social-buttons a{min-width:190px;height:58px;padding:0 24px;border-radius:30px;background:#fff;border:1px solid rgba(94,13,13,.09);display:inline-flex;align-items:center;justify-content:center;gap:12px;color:#4a4240;font-weight:700;box-shadow:0 8px 24px rgba(45,25,20,.05);transition:.25s ease}.footer-social-buttons a:hover{transform:translateY(-3px);color:#8B1717}.footer-social-buttons svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.athr-footer-social .footer-bottom{border-top:1px solid rgba(94,13,13,.10);padding:17px 15px 20px;color:#786e69;font-size:12px}
@media(max-width:700px){.shop-category-intro{margin:0 15px 25px;padding:18px 16px}.shop-category-intro h2{font-size:18px}.shop-category-intro p{font-size:13px}.footer-social-inner{padding-top:50px}.footer-social-inner h2{font-size:31px}.footer-social-inner p{font-size:13px;padding:0 8px}.footer-social-buttons{gap:10px;padding-bottom:32px}.footer-social-buttons a{width:min(250px,90%);min-width:0;height:54px}}

/* =====================================================
   ATHR - MOBILE ONLY
   لا يؤثر على الكمبيوتر
===================================================== */

@media (max-width: 768px) {

  /* =========================
     SEARCH ICON
  ========================= */

  .mobile-search-btn {
    display: flex !important;

    position: absolute;
    left: 62px;
    top: 16px;

    width: 40px;
    height: 40px;

    padding: 0;
    margin: 0;

    border: 0;
    background: transparent;

    color: #ffffff;

    align-items: center;
    justify-content: center;

    z-index: 20;
  }

  .mobile-search-btn svg {
    width: 26px;
    height: 26px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;

    stroke-linecap: round;
  }


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

  .athr-hero {
    height: 680px !important;
    min-height: 680px !important;

    position: relative;
    overflow: hidden;

    background: #5e0d0d;
  }


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

  .athr-hero-bg {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    z-index: 1;
  }

  .athr-hero-bg img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    /*
      نركز الصورة على المنتجات
      ونترك مساحة مناسبة للكلام يمين
    */
    object-position: 42% center;
  }


  /* =========================
     BURGUNDY — فقط جهة اليمين
  ========================= */

  .athr-hero-overlay {
    position: absolute;

    inset: 0;

    z-index: 2;

    background: linear-gradient(
      to left,
      rgba(94, 13, 13, 0.96) 0%,
      rgba(94, 13, 13, 0.88) 20%,
      rgba(94, 13, 13, 0.58) 36%,
      rgba(94, 13, 13, 0.20) 52%,
      rgba(94, 13, 13, 0.00) 68%
    ) !important;
  }


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

  .athr-hero-container {
    position: relative;

    width: 100%;
    height: 100%;

    z-index: 3;
  }

  .athr-hero-content {
    position: absolute;

    top: 0;
    right: 0;

    width: 100%;
    height: 100%;

    padding: 70px 22px 24px;

    box-sizing: border-box;

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    justify-content: flex-start;

    text-align: right;

    transform: none;
  }


  /* =========================
     TITLE
  ========================= */

  .athr-hero-content h1 {
    width: 100%;
    max-width: 255px;

    margin: 0 0 16px;

    font-size: 31px !important;

    line-height: 1.45 !important;

    font-weight: 800;

    text-align: right;
  }


  /* =========================
     DESCRIPTION
  ========================= */

  .athr-hero-content p {
    width: 100%;
    max-width: 255px;

    margin: 0 0 20px;

    font-size: 13px !important;

    line-height: 1.9 !important;

    text-align: right;
  }


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

  .athr-hero-button {
    width: 185px !important;
    min-width: 185px !important;

    height: 50px !important;

    padding: 0 18px;

    border-radius: 12px;

    font-size: 15px !important;

    gap: 12px;
  }


  .athr-arrow {
    font-size: 20px;
  }


  /* =========================
     FEATURES
  ========================= */

  .athr-hero-features {
    width: 100%;

    margin-top: auto;

    padding-top: 20px;

    display: flex;

    align-items: center;

    justify-content: center;
  }


  .athr-feature {
    flex: 1;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 7px;

    text-align: center;
  }


  /* =========================
     CATEGORIES
     2 PER ROW
  ========================= */

  .athr-categories-grid {
    display: grid !important;

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

    gap: 28px 18px !important;

    width: 100%;

    overflow: visible !important;

    padding: 0 10px 30px !important;

    box-sizing: border-box;
  }


  .athr-category-card {
    width: 100% !important;

    min-width: 0 !important;

    flex: none !important;

    text-align: center;
  }


  .athr-category-image {
    width: 145px !important;
    height: 145px !important;

    max-width: 100%;

    margin: 0 auto;
  }


  .athr-category-card h3 {
    margin-top: 10px !important;

    font-size: 15px !important;

    line-height: 1.5 !important;

    text-align: center;
  }

}


/* =====================================================
   SMALL PHONES
===================================================== */

@media (max-width: 430px) {

  .athr-hero {
    height: 660px !important;
    min-height: 660px !important;
  }

  .athr-hero-content {
    padding: 62px 18px 20px;
  }

  .athr-hero-content h1 {
    max-width: 245px;

    font-size: 29px !important;
  }

  .athr-hero-content p {
    max-width: 245px;

    font-size: 12px !important;
  }

  .athr-hero-button {
    width: 175px !important;
    min-width: 175px !important;

    height: 48px !important;

    font-size: 14px !important;
  }

  .athr-category-image {
    width: 135px !important;
    height: 135px !important;
  }

  .athr-category-card h3 {
    font-size: 14px !important;
  }

}
/* ==========================================
   ATHR MOBILE HERO - FINAL
   للجوال فقط
========================================== */

@media (max-width: 768px){

  .athr-hero{
    height: 680px !important;
    min-height: 680px !important;
    position: relative;
    overflow: hidden;
    background: #5e0d0d !important;
  }

  /* الصورة */
  .athr-hero-bg{
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;

    width: 100% !important;
    height: 100% !important;

    overflow: hidden !important;
  }

  .athr-hero-bg img{
    width: 100% !important;
    height: 100% !important;

    object-fit:  contain !important;

    /*
      نقل الصورة قليلًا لليسار
      حتى تظهر المنتجات بشكل أرتب
    */
    object-position: center 85% !important;
    transform: scale(2.10) !important;
   
  }


  /* العنابي يكون من جهة اليمين فقط */
  .athr-hero-overlay{
    position: absolute !important;
    inset: 0 !important;

    background: linear-gradient(
      to left,
      #5e0d0d 0%,
      rgba(94,13,13,.94) 18%,
      rgba(94,13,13,.75) 30%,
      rgba(94,13,13,.40) 43%,
      rgba(94,13,13,.12) 56%,
      rgba(94,13,13,0) 70%
    ) !important;
  }


  /* محتوى الهيرو */
  .athr-hero-content{
    position: absolute !important;

    top: 0 !important;
    right: 0 !important;
    left: 0 !important;

    width: 100% !important;
    height: 100% !important;

    padding: 72px 18px 22px 18px !important;

    box-sizing: border-box !important;

    display: flex !important;
    flex-direction: column !important;

    align-items: flex-end !important;
    justify-content: flex-start !important;

    text-align: right !important;

    transform: none !important;
  }


  /* الكلام أقصى اليمين */
  .athr-hero-content h1{
    width: 100% !important;

    max-width: 250px !important;

    margin: 0 0 14px auto !important;

    font-size: 38px !important;
    line-height: 1.45 !important;

    text-align: right !important;
  }


  .athr-hero-content p{
    width: 100% !important;

    max-width: 245px !important;

    margin: 0 0 20px auto !important;

    font-size: 12.5px !important;
    line-height: 1.9 !important;

    text-align: right !important;
  }


  /* الزر */
  .athr-hero-button{
    width: 180px !important;
    min-width: 180px !important;

    height: 50px !important;

    margin-left: auto !important;
    margin-right: 0 !important;

    font-size: 15px !important;

    border-radius: 12px !important;
  }


  /* المميزات تحت */
  .athr-hero-features{
    width: 100% !important;

    margin-top: auto !important;

    padding-top: 15px !important;

    display: flex !important;

    justify-content: center !important;
    align-items: center !important;

    direction: rtl !important;
  }


  /* الأقسام - قسمين */
  .athr-categories-grid{
    display: grid !important;

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

    gap: 28px 16px !important;

    width: 100% !important;

    overflow: visible !important;

    padding: 0 8px 30px !important;

    box-sizing: border-box !important;
  }


  .athr-category-card{
    width: 100% !important;
    min-width: 0 !important;

    text-align: center !important;
  }


  .athr-category-image{
    width: 140px !important;
    height: 140px !important;

    max-width: 100% !important;

    margin: 0 auto !important;
  }


  .athr-category-card h3{
    font-size: 14px !important;
    line-height: 1.5 !important;

    text-align: center !important;

    margin-top: 10px !important;
  }

}


/* الجوالات الصغيرة */
@media (max-width: 430px){

  .athr-hero{
    height: 650px !important;
    min-height: 650px !important;
  }

  .athr-hero-content{
    padding-top: 68px !important;
    padding-right: 15px !important;
    padding-left: 15px !important;
  }

  .athr-hero-content h1{
    max-width: 235px !important;
    font-size: 38px !important;
  }

  .athr-hero-content p{
    max-width: 230px !important;
    font-size: 12px !important;
  }

  .athr-hero-button{
    width: 170px !important;
    min-width: 170px !important;
    height: 48px !important;
  }

  .athr-category-image{
    width: 135px !important;
    height: 135px !important;
  }
}
/* =========================================
   ATHR MOBILE HERO - FINAL
========================================= */

@media (max-width: 768px) {

  .athr-hero {
    position: relative !important;
    height: 680px !important;
    min-height: 680px !important;
    overflow: hidden !important;
  }

  /* صورة الجوال */
  .athr-hero-bg {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  .athr-hero-bg picture {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
  }

  .athr-hero-bg img{
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;
}

  /* العنابي من جهة اليمين */
  .athr-hero-overlay {
    position: absolute !important;
    inset: 0 !important;

    background: linear-gradient(
      to left,
      rgba(94, 13, 13, 0.96) 0%,
      rgba(94, 13, 13, 0.82) 20%,
      rgba(94, 13, 13, 0.50) 38%,
      rgba(94, 13, 13, 0.18) 55%,
      rgba(94, 13, 13, 0) 72%
    ) !important;
  }

  /* محتوى الهيرو */
  .athr-hero-content {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    box-sizing: border-box !important;

    padding: 70px 22px 28px !important;

    display: flex !important;
    flex-direction: column !important;

    align-items: flex-end !important;
    justify-content: flex-start !important;

    text-align: right !important;
  }

  /* العنوان أعلى اليمين */
  .athr-hero-content h1 {
    width: 100% !important;
    max-width: 280px !important;

    margin: 0 0 12px auto !important;

    font-size: 38px !important;
    line-height: 1.45 !important;

    text-align: right !important;
  }

  /* الوصف */
  .athr-hero-content p {
    width: 100% !important;
    max-width: 275px !important;

    margin: 0 0 0 auto !important;

    font-size: 13px !important;
    line-height: 1.9 !important;

    text-align: right !important;
  }

  /* زر تسوق الآن في المنتصف تحت الصورة */
  .athr-hero-button {
    position: absolute !important;

    left: 50% !important;
    bottom: 115px !important;

    transform: translateX(-50%) !important;

    width: 190px !important;
    min-width: 190px !important;
    height: 52px !important;

    margin: 0 !important;

    border-radius: 13px !important;

    font-size: 16px !important;
  }

  /* المميزات */
  .athr-hero-features {
    position: absolute !important;

    left: 0 !important;
    right: 0 !important;
    bottom: 20px !important;

    width: 100% !important;

    margin: 0 !important;

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


/* الجوالات الصغيرة */
@media (max-width: 430px) {

  .athr-hero {
    height: 680px !important;
    min-height: 680px !important;
  }

  .athr-hero-content {
    padding-top: 65px !important;
    padding-right: 18px !important;
    padding-left: 18px !important;
  }

  .athr-hero-content h1 {
    max-width: 260px !important;
    font-size: 38px !important;
  }

  .athr-hero-content p {
    max-width: 255px !important;
    font-size: 12.5px !important;
  }

  .athr-hero-button {
    width: 185px !important;
    min-width: 185px !important;
    bottom: 115px !important;
  }
}
/* =====================================================
   ATHR HERO — DESKTOP FIX
   إصلاح اللابتوب فقط بدون التأثير على الجوال
===================================================== */

@media (min-width: 769px) {

    .athr-hero {
        position: relative !important;
        width: 100% !important;
        height: 650px !important;
        min-height: 650px !important;
        overflow: hidden !important;
        background: #5d1010 !important;
    }

    .athr-hero-bg {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 1 !important;
    }

    .athr-hero-bg picture {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
    }

    .athr-hero-bg img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
        transform: none !important;
    }

    .athr-hero-overlay {
        position: absolute !important;
        inset: 0 !important;
        z-index: 2 !important;

        background: linear-gradient(
            to left,
            rgba(91, 12, 12, 0.92) 0%,
            rgba(91, 12, 12, 0.76) 20%,
            rgba(91, 12, 12, 0.48) 38%,
            rgba(91, 12, 12, 0.18) 58%,
            rgba(91, 12, 12, 0) 78%
        ) !important;
    }

    .athr-hero-container {
        position: relative !important;
        z-index: 3 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: 1400px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }

    .athr-hero-content {
        position: absolute !important;
        top: 43% !important;
        right: 4% !important;
        left: auto !important;

        width: 43% !important;
        max-width: 570px !important;
        height: auto !important;

        padding: 0 !important;

        display: block !important;

        transform: translateY(-50%) !important;

        text-align: right !important;
        color: #ffffff !important;
    }

    .athr-hero-content h1 {
        width: auto !important;
        max-width: none !important;

        margin: 0 0 22px !important;

        font-size: clamp(42px, 4.2vw, 68px) !important;
        line-height: 1.35 !important;
        font-weight: 800 !important;

        text-align: right !important;
    }

    .athr-hero-content p {
        width: auto !important;
        max-width: 570px !important;

        margin: 0 0 28px !important;

        font-size: clamp(16px, 1.35vw, 21px) !important;
        line-height: 1.9 !important;
        font-weight: 400 !important;

        text-align: right !important;
    }

    .athr-hero-button {
        position: static !important;

        width: auto !important;
        min-width: 210px !important;
        height: 58px !important;

        margin: 0 !important;

        padding: 0 28px !important;

        border-radius: 12px !important;

        font-size: 17px !important;
        transform: none !important;
    }

    .athr-hero-features {
        position: static !important;

        width: 100% !important;

        margin-top: 32px !important;
        padding: 0 !important;

        display: flex !important;

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

        direction: rtl !important;
    }

    .athr-feature {
        display: flex !important;

        flex-direction: row !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 12px !important;

        flex: none !important;
        min-width: auto !important;

        text-align: right !important;
    }

    .athr-feature-icon {
        width: 48px !important;
        height: 48px !important;
        flex-shrink: 0 !important;
    }

    .athr-feature-icon svg {
        width: 25px !important;
        height: 25px !important;
    }

    .athr-feature-text {
        font-size: 14px !important;
        line-height: 1.7 !important;
        text-align: right !important;
    }

    .athr-feature-divider {
        width: 1px !important;
        height: 45px !important;
        margin: 0 28px !important;
    }
}
/* =====================================================
   ATHR DESKTOP HERO — DEFINITIVE FIX
   لا يؤثر على الجوال
===================================================== */

@media (min-width: 769px) {

    /* 1 — الهيرو */
    .athr-hero {
        position: relative !important;
        display: block !important;

        width: 100% !important;
        height: 650px !important;
        min-height: 650px !important;

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

        overflow: hidden !important;

        background-image: url("../images/hero/hero-products.jpg") !important;
        background-repeat: no-repeat !important;
        background-size: cover !important;
        background-position: center center !important;
    }


    /* 2 — نخفي طبقة الصورة القديمة في اللابتوب */
    .athr-hero-bg {
        display: none !important;
    }


    /* 3 — نلغي أي Overlay قديم */
    .athr-hero-overlay {
        position: absolute !important;

        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;

        width: 100% !important;
        height: 100% !important;

        display: block !important;

        z-index: 2 !important;

        background:
            linear-gradient(
                to left,
                rgba(91, 12, 12, 0.92) 0%,
                rgba(91, 12, 12, 0.76) 20%,
                rgba(91, 12, 12, 0.48) 38%,
                rgba(91, 12, 12, 0.18) 58%,
                rgba(91, 12, 12, 0) 78%
            ) !important;

        border-radius: 0 !important;
    }


    /* 4 — حاوية المحتوى */
    .athr-hero-container {
        position: relative !important;

        width: 100% !important;
        height: 650px !important;

        max-width: 1400px !important;

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

        z-index: 5 !important;
    }


    /* 5 — محتوى اليمين */
    .athr-hero-content {
        position: absolute !important;

        top: 43% !important;
        right: 4% !important;
        left: auto !important;

        width: 43% !important;
        max-width: 570px !important;

        height: auto !important;

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

        display: block !important;

        transform: translateY(-50%) !important;

        background: transparent !important;

        text-align: right !important;

        color: #fff !important;
    }


    /* 6 — العنوان */
    .athr-hero-content h1 {
        display: block !important;

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

        background: transparent !important;

        color: #fff !important;

        font-size: clamp(42px, 4.2vw, 68px) !important;
        line-height: 1.35 !important;

        font-weight: 800 !important;
    }


    /* 7 — الوصف */
    .athr-hero-content p {
        display: block !important;

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

        background: transparent !important;

        color: #fff !important;

        font-size: clamp(16px, 1.35vw, 21px) !important;
        line-height: 1.9 !important;
    }


/* 8 — الزر */
.athr-hero-button {
    position: static !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 210px !important;
    min-width: 210px !important;
    height: 58px !important;

    margin: 0 0 32px auto !important;
    padding: 0 !important;

    box-sizing: border-box !important;

    transform: none !important;

    background: #fff !important;
    color: #641111 !important;

    border-radius: 12px !important;

    line-height: 1 !important;
    text-align: center !important;

    gap: 8px !important;
}


/* النص داخل الزر */
.athr-hero-button > span {
    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    position: static !important;

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

    transform: none !important;

    line-height: 1.2 !important;
}


  /* 9 — المميزات */
.athr-hero-features {
    position: static !important;

    width: 100% !important;

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

    display: flex !important;

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

    direction: rtl !important;

    background: transparent !important;
}


/* كل ميزة */
.athr-feature {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    flex-direction: row !important;

    gap: 12px !important;

    background: transparent !important;

    flex: 0 0 auto !important;
}


/* الأيقونة */
.athr-feature-icon {
    width: 42px !important;
    height: 42px !important;

    flex: 0 0 42px !important;

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

.athr-feature-icon svg {
    width: 27px !important;
    height: 27px !important;
}


/* النص */
.athr-feature-text {
    font-size: 14px !important;
    line-height: 1.7 !important;

    text-align: right !important;

    white-space: nowrap !important;
}


/* الخط الفاصل */
.athr-feature-divider {
    display: block !important;

    width: 1px !important;
    min-width: 1px !important;

    height: 55px !important;

    margin: 0 28px !important;

    background: rgba(255,255,255,0.7) !important;

    flex: 0 0 1px !important;
}

    .athr-feature {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        flex-direction: row !important;

        background: transparent !important;
    }


    /* 10 — إلغاء أي عناصر Hero قديمة */
    .athr-hero > .hero,
    .athr-hero .hero-image,
    .athr-hero .hero-image-wrapper {
        display: none !important;
    }
}
/* =====================================================
   ATHR — FIX GIANT HEADER LOGO
   Desktop + Laptop
===================================================== */

@media (min-width: 769px) {

    .main-header {
        position: sticky !important;
        top: 0 !important;
        width: 100% !important;
        height: 88px !important;
        z-index: 1000 !important;
        background: #8B1717 !important;
    }

    .header-container {
        width: min(1320px, 92%) !important;
        height: 88px !important;
        margin: 0 auto !important;

        display: grid !important;
        grid-template-columns: 1fr 125px 1fr !important;
        align-items: center !important;
    }

    /* مكان اللوجو */
    .main-header .logo {
        width: 125px !important;
        height: 88px !important;

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

        overflow: hidden !important;
        position: relative !important;
    }

    /* اللوجو نفسه */
    .main-header .logo img {
        display: block !important;

        width: 96px !important;
        height: 70px !important;

        max-width: 96px !important;
        max-height: 70px !important;

        min-width: 0 !important;
        min-height: 0 !important;

        object-fit: contain !important;

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

        position: static !important;

        transform: none !important;
    }

    /* الهيدر الأيمن */
    .main-header .right-nav {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 32px !important;

        height: 88px !important;
    }

    /* الهيدر الأيسر */
    .main-header .left-nav {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 32px !important;

        height: 88px !important;
    }

    .main-header .desktop-nav a,
    .main-header .nav-dropdown-btn,
    .main-header .search-btn,
    .main-header .cart-btn {
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;
    }

    /* نضمن أن الهيرو يبدأ بعد الهيدر */
    .athr-hero {
        margin-top: 0 !important;
    }
}
/* =====================================================
   FINAL FIX — MOBILE HEADER BUTTONS ON DESKTOP
===================================================== */

@media (min-width: 769px) {

    /* إخفاء زر البحث الخاص بالجوال */
    .mobile-search-btn {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: 0 !important;
        max-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    /* إخفاء زر القائمة الخاص بالجوال */
    .mobile-menu-btn {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        min-width: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* حماية أي SVG داخل أزرار الجوال */
    .mobile-search-btn svg,
    .mobile-menu-btn svg {
        width: 24px !important;
        height: 24px !important;
        max-width: 24px !important;
        max-height: 24px !important;
    }
}