/*==================================================
      HERSHOP MENU
      STAGE 01 — FOUNDATION
==================================================*/

/* Drawer */

.menu-drawer .popup-modal__content,
.menu-drawer__submenu{

    background:
        linear-gradient(
            180deg,
            rgba(36,13,36,.78),
            rgba(23,8,23,.90)
        ) !important;

    backdrop-filter:blur(30px);
    -webkit-backdrop-filter:blur(30px);

}

/* Content */

.menu-drawer .popup-modal__content__data,
.menu-drawer__inner-submenu{

    padding:28px;

}

/* Header */

.hershop-menu-header{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    padding:0 0 28px;

    margin-bottom:26px;

    border-bottom:1px solid rgba(216,191,122,.08);

}

/* Logo */

.hershop-menu-logo{

    margin-bottom:18px;

}

.hershop-menu-logo img{

    width:120px;

    height:auto;

    display:block;

}

/* Brand */

.hershop-menu-content h2{

    margin:0;

    color:#fff;

    font-size:24px;

    font-weight:700;

}

.hershop-menu-content p{

    margin-top:6px;

    color:rgba(255,255,255,.58);

    font-size:13px;

}

/* Navigation */

.menu-drawer__navigation ul,
.menu-drawer__submenu-content{

    display:flex;

    flex-direction:column;

    gap:0;

    margin:0;

    padding:0;

}

/* Menu Item */

.menu-drawer__menu-item{

    display:flex;

    align-items:center;

    justify-content:space-between;

    min-height:60px;

    padding:0 8px;

    background:transparent;

    border:none;

    border-radius:0;

    box-shadow:none;

}

/* Text */

.menu-drawer__menu-item span{

    font-size:16px;

    font-weight:600;

    color:#fff;

}

/* Divider */

.menu-drawer__navigation li{

    border-bottom:1px solid rgba(216,191,122,.07);

}

.menu-drawer__navigation li:last-child{

    border-bottom:none;

}

/* Account */

.menu-drawer__account-icons{

    margin-top:30px;

    padding-top:24px;

    border-top:1px solid rgba(216,191,122,.08);

}

/* Mobile */

@media(max-width:576px){

.menu-drawer .popup-modal__content__data,
.menu-drawer__inner-submenu{

    padding:20px;

}

}
/*==================================================
      HERSHOP MENU
      STAGE 02 — PREMIUM INTERACTION
==================================================*/

/* Menu Item */

.menu-drawer__menu-item{

    position:relative;

    transition:
        color .28s ease,
        padding-left .28s ease,
        background .28s ease;

}

/* Left Red Accent */

.menu-drawer__menu-item::before{

    content:"";

    position:absolute;

    left:-20px;

    top:50%;

    transform:translateY(-50%);

    width:3px;

    height:0;

    border-radius:20px;

    background:#F12027;

    transition:.28s ease;

}

/* Hover */

.menu-drawer__menu-item:hover{

    padding-left:16px;

    background:rgba(255,255,255,.025);

}

/* Accent */

.menu-drawer__menu-item:hover::before{

    height:30px;

}

/* Active */

.menu-drawer__menu-item--active{

    background:rgba(241,32,39,.08);

}

.menu-drawer__menu-item--active::before{

    height:34px;

}

/* Text */

.menu-drawer__menu-item span{

    transition:.28s ease;

    letter-spacing:.01em;

}

.menu-drawer__menu-item:hover span{

    color:#D8BF7A;

    letter-spacing:.04em;

}

.menu-drawer__menu-item--active span{

    color:#F12027;

}

/* Icons */

.menu-drawer__menu-item svg{

    opacity:.65;

    transition:.28s ease;

}

.menu-drawer__menu-item:hover svg{

    opacity:1;

    transform:translateX(3px);

}

.menu-drawer__menu-item:hover svg path{

    fill:#D8BF7A !important;

}

.menu-drawer__menu-item--active svg path{

    fill:#F12027 !important;

}

/* Back */

.menu-drawer__back-button{

    padding-left:8px;

    transition:.28s ease;

}

.menu-drawer__back-button:hover{

    padding-left:14px;

}

.menu-drawer__back-button:hover svg path{

    fill:#D8BF7A !important;

}

/* Divider */

.menu-drawer__navigation>ul>li{

    transition:background .25s ease;

}

.menu-drawer__navigation>ul>li:hover{

    background:rgba(255,255,255,.015);

}

/* Bubble */

.menu-drawer__button-bubble{

    background:#F12027;

    color:#fff;

    box-shadow:0 0 14px rgba(241,32,39,.25);

}
/*==================================================
      HERSHOP MENU
      STAGE 03 — SUBMENU
==================================================*/

/* ==========================================
   SUBMENU
========================================== */

.menu-drawer__submenu{

    position:absolute !important;

    inset:0 !important;

    width:100% !important;

    height:100% !important;

    z-index:9999 !important;

    background:
        linear-gradient(
            180deg,
            rgba(36,13,36,.82),
            rgba(22,8,22,.94)
        ) !important;

    backdrop-filter:blur(34px) !important;
    -webkit-backdrop-filter:blur(34px) !important;

    border-left:1px solid rgba(216,191,122,.10) !important;

    box-shadow:
        -24px 0 60px rgba(0,0,0,.35) !important;

}

/*==========================================*/

.menu-drawer__inner-submenu{

    width:100% !important;

    height:100% !important;

    padding:24px !important;

    overflow-y:auto !important;

    background:transparent !important;

}

/*==========================================*/

.menu-drawer__submenu::before{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:

        radial-gradient(

            circle at 15% 15%,

            rgba(241,32,39,.08),

            transparent 32%

        ),

        radial-gradient(

            circle at 85% 85%,

            rgba(216,191,122,.05),

            transparent 35%

        ),

        radial-gradient(

            circle at 60% 100%,

            rgba(62,107,67,.05),

            transparent 38%

        );

}

/*==========================================*/

.menu-drawer__submenu-content{

    position:relative;

    z-index:2;

}

/*==========================================*/

.menu-drawer__submenu .menu-drawer__menu-item{

    border-radius:12px;

}

/*==========================================*/

.menu-drawer__submenu .menu-drawer__menu-item:hover{

    background:rgba(255,255,255,.03);

}

/*==========================================*/

.menu-drawer__submenu .menu-drawer__menu-item:hover span{

    color:#D8BF7A;

}

/*==========================================*/

.menu-drawer__submenu .menu-drawer__menu-item:hover svg path{

    fill:#D8BF7A !important;

}

/*==========================================*/

.menu-drawer__submenu .menu-drawer__menu-item--active{

    background:rgba(241,32,39,.08);

}

.menu-drawer__submenu .menu-drawer__menu-item--active span{

    color:#F12027;

}

.menu-drawer__submenu .menu-drawer__menu-item--active svg path{

    fill:#F12027 !important;

}

/*==========================================*/

.menu-drawer__back-button{

    transition:.30s ease;

}

.menu-drawer__back-button:hover{

    padding-left:14px;

}

.menu-drawer__back-button:hover svg path{

    fill:#D8BF7A !important;

}

/*==========================================*/

.menu-drawer__inner-submenu::-webkit-scrollbar{

    width:4px;

}

.menu-drawer__inner-submenu::-webkit-scrollbar-thumb{

    background:rgba(216,191,122,.18);

    border-radius:30px;

}
/* ==========================================
   FORCE SUBMENU TEXT
========================================== */

.menu-drawer__submenu a,
.menu-drawer__submenu span,
.menu-drawer__submenu .menu-drawer__menu-item,
.menu-drawer__submenu .menu-drawer__menu-item__link{

    color:#ffffff !important;

}

/* Hover */

.menu-drawer__submenu a:hover,
.menu-drawer__submenu .menu-drawer__menu-item:hover,
.menu-drawer__submenu .menu-drawer__menu-item:hover span{

    color:#D8BF7A !important;

}

/* Active */

.menu-drawer__submenu .menu-drawer__menu-item--active,
.menu-drawer__submenu .menu-drawer__menu-item--active span,
.menu-drawer__submenu .menu-drawer__menu-item--active a{

    color:#F12027 !important;

}


/*==================================================
      HERSHOP MENU
      STAGE 04 — ACCOUNT & FOOTER
==================================================*/

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

.menu-drawer__account-icons{

    margin-top:30px;

    padding-top:24px;

    border-top:1px solid rgba(216,191,122,.08);

}

/*==========================================*/

.menu-drawer__account-icons .header__button{

    border-radius:14px;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;

}

/*==========================================*/

.menu-drawer__account-icons .header__button:hover{

    background:rgba(216,191,122,.05);

    color:#D8BF7A;

    transform:translateX(6px);

}

/*==========================================
PHONE
==========================================*/

.menu-drawer .header-phone-number__desktop{

    border-radius:14px;

    transition:
        background .25s ease,
        transform .25s ease;

}

.menu-drawer .header-phone-number__desktop:hover{

    background:rgba(62,107,67,.08);

    transform:translateX(6px);

}

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

.menu-drawer .header-social-icons a{

    border-radius:12px;

    transition:
        background .25s ease,
        transform .25s ease;

}

.menu-drawer .header-social-icons a:hover{

    background:rgba(255,255,255,.03);

    transform:translateX(6px);

}

.menu-drawer .header-social-icons svg{

    opacity:.7;

    transition:.25s ease;

}

.menu-drawer .header-social-icons a:hover svg{

    opacity:1;

    transform:rotate(-8deg);

}

.menu-drawer .header-social-icons a:hover svg path{

    fill:#D8BF7A !important;

}

/*==========================================
SELECTORS
==========================================*/

.menu-drawer__selectors .disclosure-selector{

    background:rgba(255,255,255,.03);

    border:1px solid rgba(216,191,122,.08);

}

.menu-drawer__selectors .disclosure-selector:hover{

    border-color:#D8BF7A;

}

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

.menu-drawer__account-icons::after{

    content:"HERSHOP";

    display:block;

    margin-top:28px;

    text-align:center;

    font-size:11px;

    letter-spacing:.45em;

    color:rgba(216,191,122,.22);

}

/*==========================================
BOTTOM LINE
==========================================*/

.menu-drawer__account-icons::before{

    content:"";

    display:block;

    width:100%;

    height:1px;

    margin-bottom:22px;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(216,191,122,.18),

            transparent

        );

}

/*==================================================
      HERSHOP MENU
      STAGE 04 — ACCOUNT & FOOTER
==================================================*/

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

.menu-drawer__account-icons{

    margin-top:30px;

    padding-top:24px;

    border-top:1px solid rgba(216,191,122,.08);

}

/*==========================================*/

.menu-drawer__account-icons .header__button{

    border-radius:14px;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;

}

/*==========================================*/

.menu-drawer__account-icons .header__button:hover{

    background:rgba(216,191,122,.05);

    color:#D8BF7A;

    transform:translateX(6px);

}

/*==========================================
PHONE
==========================================*/

.menu-drawer .header-phone-number__desktop{

    border-radius:14px;

    transition:
        background .25s ease,
        transform .25s ease;

}

.menu-drawer .header-phone-number__desktop:hover{

    background:rgba(62,107,67,.08);

    transform:translateX(6px);

}

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

.menu-drawer .header-social-icons a{

    border-radius:12px;

    transition:
        background .25s ease,
        transform .25s ease;

}

.menu-drawer .header-social-icons a:hover{

    background:rgba(255,255,255,.03);

    transform:translateX(6px);

}

.menu-drawer .header-social-icons svg{

    opacity:.7;

    transition:.25s ease;

}

.menu-drawer .header-social-icons a:hover svg{

    opacity:1;

    transform:rotate(-8deg);

}

.menu-drawer .header-social-icons a:hover svg path{

    fill:#D8BF7A !important;

}

/*==========================================
SELECTORS
==========================================*/

.menu-drawer__selectors .disclosure-selector{

    background:rgba(255,255,255,.03);

    border:1px solid rgba(216,191,122,.08);

}

.menu-drawer__selectors .disclosure-selector:hover{

    border-color:#D8BF7A;

}

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

.menu-drawer__account-icons::after{

    content:"HERSHOP";

    display:block;

    margin-top:28px;

    text-align:center;

    font-size:11px;

    letter-spacing:.45em;

    color:rgba(216,191,122,.22);

}

/*==========================================
BOTTOM LINE
==========================================*/

.menu-drawer__account-icons::before{

    content:"";

    display:block;

    width:100%;

    height:1px;

    margin-bottom:22px;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(216,191,122,.18),

            transparent

        );

}
/*==========================================
ACCOUNT TITLE
==========================================*/

.menu-drawer h1,
.menu-drawer h2,
.menu-drawer h3,
.menu-drawer h4,
.menu-drawer h5,
.menu-drawer h6{

    color:#fff !important;

}

.menu-drawer .h1,
.menu-drawer .h2,
.menu-drawer .h3,
.menu-drawer .h4,
.menu-drawer .h5,
.menu-drawer .h6{

    color:#fff !important;

}

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

.menu-drawer__account-icons a,
.menu-drawer__account-icons span,
.menu-drawer__account-icons p{

    color:#fff !important;

}

/*==========================================
GREEN ICONS
==========================================*/

.menu-drawer__account-icons svg{

    color:#3E6B43 !important;

}

.menu-drawer__account-icons svg path{

    fill:#3E6B43 !important;
    stroke:#3E6B43 !important;

}

/* Hover */

.menu-drawer__account-icons a:hover{

    color:#D8BF7A !important;

}

.menu-drawer__account-icons a:hover svg path{

    fill:#D8BF7A !important;
    stroke:#D8BF7A !important;

}
.hershop-menu-watermark{

    position:absolute;

    left:-170px;

    top:50%;

    transform:translateY(-50%);

    width:420px;

    height:420px;

    opacity:.18;      /* بدل .05 */

    z-index:1;

    pointer-events:none;

}

.hershop-menu-watermark img{

    width:100%;

    height:100%;

    object-fit:contain;

    display:block;

    filter:
        grayscale(100%)
        brightness(2.8)
        contrast(.9);

}
.hershop-menu-title h2{

    margin:0;

    font-size:34px;

    font-weight:800;

    letter-spacing:.08em;

}

.hershop-red{

    color:#F12027;

}

.hershop-green{

    color:#3E6B43;

}

.hershop-menu-title p{

    margin-top:8px;

    color:rgba(255,255,255,.55);

    font-size:12px;

    letter-spacing:.18em;

    text-transform:uppercase;

}
/* خلي الهيدر ميمنعش الضغط */
.hershop-menu-brand{
    pointer-events:none;
}

/* اللوجو مجرد ديكور */
.hershop-menu-watermark{
    pointer-events:none;
}

/* العنوان كمان */
.hershop-menu-title{
    pointer-events:none;
}

/* خلي زر الرجوع فوق أي حاجة */
.menu-drawer__back-button{
    position:relative;
    z-index:99999;
    pointer-events:auto;
}

.menu-drawer__back-button svg{
    pointer-events:auto;
}
/* Back Arrow */

.menu-drawer__back-button svg{

    color:#3E6B43 !important;

}

.menu-drawer__back-button svg path{

    fill:#3E6B43 !important;

    stroke:#3E6B43 !important;

}

/* Hover */

.menu-drawer__back-button:hover svg path{

    fill:#D8BF7A !important;

    stroke:#D8BF7A !important;

}