/*==================================================
WEST BOX UI
Part 1
Reset + Variables + Global
==================================================*/

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;500;600;700;800;900&display=swap');

:root{

--primary:#7C3AED;
--primary-light:#A855F7;
--primary-dark:#5B21B6;

--bg:#F8F7FC;
--white:#ffffff;

--text:#111827;
--text-light:#6B7280;

--border:#ECECF3;

--shadow-sm:0 5px 15px rgba(124,58,237,.08);
--shadow:0 15px 40px rgba(124,58,237,.12);
--shadow-lg:0 25px 60px rgba(124,58,237,.18);

--radius:18px;
--radius-lg:28px;

--transition:.35s ease;

}

*{

margin:0;

padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:'Cairo',sans-serif;

background:var(--bg);

color:var(--text);

overflow-x:hidden;

line-height:1.7;

}

img{

display:block;

max-width:100%;

}

a{

text-decoration:none;

color:inherit;

}

button{

font-family:'Cairo',sans-serif;

cursor:pointer;

border:none;

outline:none;

}

input,
textarea,
select{

font-family:'Cairo',sans-serif;

outline:none;

}

ul{

list-style:none;

}

.container{

width:min(92%,1300px);

margin:auto;

}

section{

padding:90px 0;

}

.section-head{

text-align:center;

margin-bottom:60px;

}

.section-head span{

display:inline-block;

padding:8px 18px;

background:rgba(124,58,237,.08);

color:var(--primary);

border-radius:50px;

font-size:14px;

font-weight:700;

margin-bottom:15px;

}

.section-head h2{

font-size:42px;

font-weight:900;

margin-bottom:15px;

}

.section-head p{

max-width:650px;

margin:auto;

color:var(--text-light);

font-size:17px;

}

.btn-primary{

display:inline-flex;

align-items:center;

justify-content:center;

padding:16px 34px;

border-radius:60px;

background:linear-gradient(135deg,var(--primary),var(--primary-light));

color:#fff;

font-weight:700;

transition:var(--transition);

box-shadow:var(--shadow);

}

.btn-primary:hover{

transform:translateY(-4px);

}

.btn-secondary{

display:inline-flex;

align-items:center;

justify-content:center;

padding:16px 34px;

border-radius:60px;

background:#fff;

border:2px solid var(--primary);

color:var(--primary);

font-weight:700;

transition:var(--transition);

}

.btn-secondary:hover{

background:var(--primary);

color:#fff;

}

.loader{

position:fixed;

inset:0;

background:#fff;

display:flex;

justify-content:center;

align-items:center;

z-index:99999;

transition:.5s;

}

.loader.hide{

opacity:0;

visibility:hidden;

}

.loader-circle{

width:70px;

height:70px;

border-radius:50%;

border:6px solid rgba(124,58,237,.12);

border-top-color:var(--primary);

animation:spin 1s linear infinite;

}

@keyframes spin{

to{

transform:rotate(360deg);

}

}

.title-lg{

font-size:54px;

font-weight:900;

line-height:1.2;

}

.text-muted{

color:var(--text-light);

}

.card{

background:#fff;

border-radius:var(--radius-lg);

box-shadow:var(--shadow-sm);

transition:var(--transition);

overflow:hidden;

}

.card:hover{

transform:translateY(-8px);

box-shadow:var(--shadow);

}

.badge{

display:inline-flex;

align-items:center;

gap:8px;

padding:8px 18px;

border-radius:50px;

background:#F3E8FF;

color:var(--primary);

font-size:13px;

font-weight:700;

}

.grid{

display:grid;

gap:30px;

}




/*==================================================
PART 2
NAVBAR
==================================================*/

.header{

position:fixed;

top:0;

right:0;

left:0;

z-index:1000;

padding:18px 0;

transition:.35s ease;

}

.header.scrolled{

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

backdrop-filter:blur(18px);

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

padding:12px 0;

}

.header .container{

display:flex;

align-items:center;

justify-content:space-between;

gap:40px;

}

.logo{

display:flex;

align-items:center;

gap:15px;

}

.logo-icon{

width:62px;

height:62px;

border-radius:20px;

background:linear-gradient(135deg,#7C3AED,#A855F7);

display:flex;

justify-content:center;

align-items:center;

font-size:26px;

color:#fff;

box-shadow:0 15px 35px rgba(124,58,237,.30);

transition:.35s;

}

.logo:hover .logo-icon{

transform:rotate(-8deg) scale(1.05);

}

.logo-text h2{

font-size:28px;

font-weight:900;

color:#111827;

line-height:1;

}

.logo-text span{

font-size:13px;

color:#7C3AED;

font-weight:700;

}

.navbar{

display:flex;

align-items:center;

gap:35px;

}

.navbar a{

position:relative;

font-size:16px;

font-weight:700;

color:#374151;

transition:.3s;

}

.navbar a:hover{

color:#7C3AED;

}

.navbar a::after{

content:"";

position:absolute;

bottom:-8px;

right:0;

width:0;

height:3px;

border-radius:10px;

background:#7C3AED;

transition:.35s;

}

.navbar a:hover::after{

width:100%;

}

.header-actions{

display:flex;

align-items:center;

gap:18px;

}

.cart-btn{

width:56px;

height:56px;

border-radius:18px;

background:#fff;

display:flex;

justify-content:center;

align-items:center;

position:relative;

font-size:22px;

color:#7C3AED;

box-shadow:0 10px 25px rgba(124,58,237,.12);

transition:.35s;

}

.cart-btn:hover{

transform:translateY(-5px);

background:#7C3AED;

color:#fff;

}

.cart-btn span{

position:absolute;

top:-8px;

left:-8px;

width:24px;

height:24px;

border-radius:50%;

background:#EF4444;

display:flex;

justify-content:center;

align-items:center;

color:#fff;

font-size:12px;

font-weight:bold;

border:2px solid #fff;

}

.menu-toggle{

display:none;

width:52px;

height:52px;

border-radius:16px;

background:#7C3AED;

color:#fff;

font-size:22px;

align-items:center;

justify-content:center;

cursor:pointer;

}

@media(max-width:992px){

.navbar{

position:fixed;

top:90px;

right:-100%;

width:300px;

height:calc(100vh - 90px);

background:#fff;

display:flex;

flex-direction:column;

align-items:flex-start;

padding:35px;

box-shadow:-15px 0 40px rgba(0,0,0,.08);

transition:.4s;

}

.navbar.active{

right:0;

}

.navbar a{

width:100%;

padding:15px 0;

border-bottom:1px solid #eee;

}

.menu-toggle{

display:flex;

}

.logo-text span{

display:none;

}

}



/*==================================================
PART 3
HERO SECTION
==================================================*/

.hero{

position:relative;

padding:180px 0 120px;

overflow:hidden;

background:
linear-gradient(
180deg,
#ffffff 0%,
#faf7ff 100%
);

}

.hero::before{

content:"";

position:absolute;

width:700px;

height:700px;

background:rgba(124,58,237,.08);

border-radius:50%;

top:-250px;

left:-180px;

filter:blur(30px);

}

.hero::after{

content:"";

position:absolute;

width:550px;

height:550px;

background:rgba(168,85,247,.10);

border-radius:50%;

bottom:-250px;

right:-120px;

filter:blur(40px);

}

.hero-grid{

display:grid;

grid-template-columns:1.1fr .9fr;

align-items:center;

gap:70px;

position:relative;

z-index:5;

}

.hero-content h1{

font-size:68px;

font-weight:900;

line-height:1.15;

margin:20px 0;

color:#111827;

}

.hero-content h1 span{

background:linear-gradient(135deg,#7C3AED,#A855F7);

background-clip:text;
-webkit-background-clip:text;

color:transparent;
-webkit-text-fill-color:transparent;

}

.hero-content p{

font-size:20px;

line-height:2;

color:#6B7280;

max-width:650px;

margin-bottom:35px;

}

.hero-badge{

display:inline-flex;

align-items:center;

gap:10px;

padding:10px 22px;

border-radius:60px;

background:#F3E8FF;

color:#7C3AED;

font-weight:700;

font-size:15px;

box-shadow:0 10px 25px rgba(124,58,237,.12);

}

.hero-buttons{

display:flex;

gap:18px;

margin-top:35px;

}

.hero-stats{

display:flex;

gap:20px;

margin-top:55px;

flex-wrap:wrap;

}

.stat-box{

background:#fff;

padding:22px 30px;

border-radius:22px;

box-shadow:0 20px 40px rgba(124,58,237,.10);

min-width:150px;

transition:.35s;

}

.stat-box:hover{

transform:translateY(-8px);

}

.stat-box h3{

font-size:34px;

font-weight:900;

color:#7C3AED;

margin-bottom:6px;

}

.stat-box p{

font-size:15px;

margin:0;

color:#6B7280;

}

.hero-image{

position:relative;

display:flex;

justify-content:center;

align-items:center;

}

.circle-bg{

position:absolute;

width:520px;

height:520px;

border-radius:50%;

background:

linear-gradient(
135deg,
#7C3AED,
#A855F7
);

opacity:.08;

animation:floatCircle 8s infinite ease-in-out;

}

.hero-image{
    display:flex;
    justify-content:center;
    align-items:center;
    margin-top:40px;
}

.hero-circle{
    position:relative;
    width:min(85vw,520px);
    aspect-ratio:1/1;

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

    overflow:hidden;
    border-radius:50%;

    background:#fff;
}

/* الصورة */
.hero-circle img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    animation:heroFloat 5s infinite ease-in-out;
}

/* ============================
   Floating Cards
============================ */

.floating-card{
    position:absolute;
    background:#fff;
    padding:16px 20px;
    border-radius:18px;
    display:flex;
    align-items:center;
    gap:12px;
    font-weight:700;
    box-shadow:0 20px 45px rgba(124,58,237,.18);
    z-index:20;
    animation:floatCard 4s infinite ease-in-out;
}

.floating-card i{
    width:42px;
    height:42px;
    border-radius:50%;
    background:#F3E8FF;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#7C3AED;
}

.card-one{
    top:40px;
    right:-10px;
}

.card-two{
    bottom:110px;
    left:-30px;
    animation-delay:1s;
}

.card-three{
    bottom:0;
    right:50px;
    animation-delay:2s;
}

/* ============================
   Animations
============================ */

@keyframes heroFloat{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-18px);
    }

    100%{
        transform:translateY(0);
    }

}

@keyframes floatCircle{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.08);
    }

    100%{
        transform:scale(1);
    }

}

@keyframes floatCard{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-12px);
    }

    100%{
        transform:translateY(0);
    }

}

/* ============================
   Tablet
============================ */

@media (max-width:992px){

.hero{
    padding-top:140px;
}

.hero-grid{
    grid-template-columns:1fr;
    text-align:center;
}

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

.hero-content p{
    margin:auto auto 35px;
}

.hero-buttons{
    justify-content:center;
    flex-wrap:wrap;
}

.hero-stats{
    justify-content:center;
}

.hero-image{
    margin-top:40px;
}

.hero-circle{
    width:380px;
}

.floating-card{
    display:none;
}

}

/* ============================
   Mobile
============================ */

@media (max-width:768px){

.hero-image{
    margin-top:35px;
}

.hero-circle{
    width:320px;
}

}

/* ============================
   Small Mobile
============================ */

@media (max-width:480px){

.hero-image{
    padding:10px;
}

.hero-circle{
    width:260px;
}

}

/* ============================
   Very Small Screens
============================ */

@media (max-width:360px){

.hero-circle{
    width:220px;
}

}


/*==================================================
PART 4
STORES SECTION
==================================================*/

.stores-section{

background:#fff;

position:relative;

}

.stores-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(270px,1fr));

gap:30px;

margin-top:50px;

}

.store-card{

background:#fff;

border-radius:28px;

overflow:hidden;

box-shadow:0 12px 35px rgba(124,58,237,.08);

transition:.35s;

border:1px solid #f1eff8;

position:relative;

}

.store-card:hover{

transform:translateY(-10px);

box-shadow:0 25px 60px rgba(124,58,237,.16);

}

.store-cover{

height:220px;

background:linear-gradient(135deg,#7C3AED,#A855F7);

display:flex;

align-items:center;

justify-content:center;

overflow:hidden;

position:relative;

}

.store-cover::before{

content:"";

position:absolute;

width:280px;

height:280px;

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

border-radius:50%;

top:-120px;

left:-80px;

}

.store-cover img{

width:100%;

height:100%;

object-fit:cover;

transition:.4s;

}

.store-card:hover .store-cover img{

transform:scale(1.08);

}

.store-placeholder{

font-size:70px;

color:#fff;

z-index:2;

}

.store-body{

padding:25px;

}

.store-body h3{

font-size:24px;

font-weight:800;

margin-bottom:10px;

color:#111827;

}

.store-body p{

color:#6B7280;

font-size:15px;

margin-bottom:25px;

line-height:1.8;

}

.store-footer{

display:flex;

justify-content:space-between;

align-items:center;

}

.store-btn{

display:inline-flex;

align-items:center;

gap:10px;

padding:14px 26px;

background:linear-gradient(135deg,#7C3AED,#A855F7);

color:#fff;

border-radius:60px;

font-weight:700;

transition:.3s;

}

.store-btn:hover{

transform:translateY(-4px);

}

.store-count{

display:flex;

align-items:center;

gap:8px;

font-size:14px;

color:#7C3AED;

font-weight:700;

}

.store-count i{

width:36px;

height:36px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:#F3E8FF;

}

.store-ribbon{

position:absolute;

top:18px;

left:18px;

background:#fff;

padding:8px 16px;

border-radius:50px;

font-size:13px;

font-weight:700;

color:#7C3AED;

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

z-index:10;

}

@media(max-width:768px){

.store-cover{

height:180px;

}

.store-body{

padding:20px;

}

.store-body h3{

font-size:20px;

}

.store-footer{

flex-direction:column;

gap:15px;

align-items:flex-start;

}

.store-btn{

width:100%;

justify-content:center;

}

}


/*==================================================
PART 5
PRODUCTS
==================================================*/

.products-section{

padding:100px 0;

background:#F8F7FC;

}

.products-top{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:45px;

gap:20px;

flex-wrap:wrap;

}

.search-box{

width:380px;

max-width:100%;

position:relative;

}

.search-box input{

width:100%;

height:58px;

padding:0 55px 0 20px;

border:none;

background:#fff;

border-radius:50px;

box-shadow:0 12px 30px rgba(124,58,237,.08);

font-size:15px;

transition:.3s;

}

.search-box input:focus{

box-shadow:0 0 0 4px rgba(124,58,237,.15);

}

.search-box i{

position:absolute;

right:22px;

top:50%;

transform:translateY(-50%);

font-size:18px;

color:#7C3AED;

}

.products-grid{

display:grid;

grid-template-columns:repeat(auto-fill,minmax(280px,1fr));

gap:30px;

}

.product-card{

background:#fff;

border-radius:24px;

overflow:hidden;

transition:.35s;

box-shadow:0 10px 35px rgba(124,58,237,.08);

position:relative;

}

.product-card:hover{

transform:translateY(-10px);

box-shadow:0 25px 60px rgba(124,58,237,.15);

}

.product-image{

height:240px;

overflow:hidden;

background:#fff;

display:flex;

justify-content:center;

align-items:center;

}

.product-image img{

width:100%;

height:100%;

object-fit:cover;

transition:.45s;

}

.product-card:hover img{

transform:scale(1.08);

}

.product-placeholder{

font-size:70px;

color:#DDD6FE;

}

.product-body{

padding:22px;

}

.product-body h3{

font-size:22px;

font-weight:800;

margin-bottom:10px;

color:#111827;

}

.product-desc{

color:#6B7280;

font-size:14px;

line-height:1.8;

height:48px;

overflow:hidden;

margin-bottom:20px;

}

.product-footer{

display:flex;

justify-content:space-between;

align-items:center;

}

.product-price{

font-size:26px;

font-weight:900;

color:#7C3AED;

}

.product-price span{

font-size:15px;

font-weight:600;

margin-right:3px;

}

.cart-button{

width:55px;

height:55px;

border-radius:18px;

background:linear-gradient(135deg,#7C3AED,#A855F7);

display:flex;

justify-content:center;

align-items:center;

color:#fff;

font-size:20px;

transition:.3s;

}

.cart-button:hover{

transform:rotate(-10deg) scale(1.08);

}

@media(max-width:768px){

.products-top{

flex-direction:column;

align-items:flex-start;

}

.search-box{

width:100%;

}

}

/*==================================================
PART 6
CONTACT + FOOTER
==================================================*/

.contact-section{

padding:110px 0;

background:#fff;

position:relative;

overflow:hidden;

}

.contact-wrapper{

display:grid;

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

gap:60px;

align-items:center;

}

.contact-info h2{

font-size:44px;

font-weight:900;

margin-bottom:20px;

color:#111827;

}

.contact-info p{

font-size:17px;

line-height:2;

color:#6B7280;

margin-bottom:35px;

}

.contact-list{

display:flex;

flex-direction:column;

gap:18px;

}

.contact-item{

display:flex;

align-items:center;

gap:18px;

background:#fff;

padding:18px 22px;

border-radius:18px;

box-shadow:0 12px 30px rgba(124,58,237,.08);

transition:.3s;

}

.contact-item:hover{

transform:translateY(-6px);

}

.contact-item i{

width:60px;

height:60px;

border-radius:18px;

display:flex;

justify-content:center;

align-items:center;

font-size:22px;

background:linear-gradient(135deg,#7C3AED,#A855F7);

color:#fff;

}

.contact-item h4{

font-size:18px;

margin-bottom:5px;

}

.contact-item span{

font-size:15px;

color:#6B7280;

}

.contact-card{

background:linear-gradient(135deg,#7C3AED,#A855F7);

border-radius:30px;

padding:45px;

color:#fff;

box-shadow:0 25px 60px rgba(124,58,237,.25);

}

.contact-card h3{

font-size:34px;

margin-bottom:20px;

}

.contact-card p{

line-height:2;

margin-bottom:35px;

opacity:.95;

}

.social-links{

display:flex;

gap:15px;

flex-wrap:wrap;

}

.social-links a{

width:58px;

height:58px;

border-radius:18px;

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

display:flex;

justify-content:center;

align-items:center;

color:#fff;

font-size:22px;

transition:.35s;

backdrop-filter:blur(10px);

}

.social-links a:hover{

background:#fff;

color:#7C3AED;

transform:translateY(-6px);

}

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

.footer{

background:#111827;

padding:70px 0 30px;

color:#fff;

}

.footer-grid{

display:grid;

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

gap:40px;

margin-bottom:40px;

}

.footer h3{

font-size:24px;

margin-bottom:18px;

}

.footer p{

color:#D1D5DB;

line-height:2;

}

.footer-links{

display:flex;

flex-direction:column;

gap:14px;

}

.footer-links a{

color:#D1D5DB;

transition:.3s;

}

.footer-links a:hover{

color:#A855F7;

padding-right:8px;

}

.footer-bottom{

padding-top:25px;

border-top:1px solid rgba(255,255,255,.08);

display:flex;

justify-content:space-between;

align-items:center;

flex-wrap:wrap;

gap:15px;

}

.footer-bottom p{

margin:0;

color:#9CA3AF;

}

.footer-social{

display:flex;

gap:12px;

}

.footer-social a{

width:45px;

height:45px;

border-radius:14px;

background:#1F2937;

display:flex;

justify-content:center;

align-items:center;

transition:.3s;

}

.footer-social a:hover{

background:#7C3AED;

}

@media(max-width:992px){

.contact-wrapper{

grid-template-columns:1fr;

}

.footer-grid{

grid-template-columns:1fr;

}

.footer-bottom{

flex-direction:column;

text-align:center;

}

}


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

.social-icons{

display:flex;

justify-content:center;

align-items:center;

gap:18px;

flex-wrap:wrap;

margin-top:35px;

}

.social-icons a{

width:70px;

height:70px;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

font-size:28px;

background:#fff;

color:#7C3AED;

box-shadow:0 15px 35px rgba(124,58,237,.15);

transition:.35s;

}

.social-icons a:hover{

transform:translateY(-10px) scale(1.08);

background:linear-gradient(135deg,#7C3AED,#A855F7);

color:#fff;

box-shadow:0 25px 45px rgba(124,58,237,.35);

}

.facebook:hover{

background:#1877F2;

}

.instagram:hover{

background:linear-gradient(135deg,#833AB4,#E1306C,#FCAF45);

}

.whatsapp:hover{

background:#25D366;

}

.telegram:hover{

background:#229ED9;

}

.tiktok:hover{

background:#000;

}

.email:hover{

background:#EA4335;

}


/*==================================================
                STORE PAGE
==================================================*/

:root{

--primary:#7C3AED;

--primary2:#A855F7;

--dark:#111827;

--text:#374151;

--border:#ECECEC;

--bg:#F8F9FC;

--white:#ffffff;

}

.store-navbar{

position:sticky;

top:0;

z-index:999;

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

backdrop-filter:blur(18px);

border-bottom:1px solid rgba(0,0,0,.05);

}

.store-navbar .container{

max-width:1300px;

margin:auto;

padding:18px 30px;

display:flex;

align-items:center;

justify-content:space-between;

}

.store-logo{

display:flex;

align-items:center;

gap:12px;

font-size:26px;

font-weight:800;

color:var(--primary);

}

.store-logo i{

font-size:30px;

}

.back-btn{

display:flex;

align-items:center;

gap:10px;

padding:12px 22px;

background:#F3F4F6;

border-radius:40px;

text-decoration:none;

color:#444;

transition:.35s;

font-weight:700;

}

.back-btn:hover{

background:var(--primary);

color:#fff;

transform:translateY(-2px);

}

.cart-btn{

width:52px;

height:52px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:linear-gradient(135deg,var(--primary),var(--primary2));

color:#fff;

text-decoration:none;

font-size:20px;

box-shadow:0 10px 30px rgba(124,58,237,.25);

transition:.3s;

}

.cart-btn:hover{

transform:scale(1.08);

}

.store-header{

background:linear-gradient(135deg,#ffffff,#F7F2FF);

padding:70px 0;

}

.store-header .container{

max-width:1300px;

margin:auto;

padding:0 30px;

}

.store-info{

display:flex;

align-items:center;

gap:35px;

flex-wrap:wrap;

margin-bottom:40px;

}

.store-image{

width:170px;

height:170px;

border-radius:50%;

background:#fff;

overflow:hidden;

box-shadow:0 20px 50px rgba(124,58,237,.18);

display:flex;

align-items:center;

justify-content:center;

}

.store-image img{

width:100%;

height:100%;

object-fit:cover;

}

.store-placeholder{

font-size:65px;

color:var(--primary);

}

.store-details h1{

font-size:42px;

margin-bottom:15px;

color:var(--dark);

font-weight:900;

}

.store-details p{

font-size:18px;

color:#6B7280;

margin-bottom:30px;

}

.store-stats{

display:flex;

gap:25px;

flex-wrap:wrap;

}

.store-stats div{

background:#fff;

padding:18px 28px;

border-radius:18px;

box-shadow:0 15px 35px rgba(0,0,0,.05);

text-align:center;

min-width:120px;

}

.store-stats h3{

font-size:30px;

color:var(--primary);

margin-bottom:5px;

}

.store-stats span{

font-size:14px;

color:#777;

}

.store-search{

position:relative;

max-width:700px;

margin:auto;

}

.store-search input{

width:100%;

height:65px;

border:none;

border-radius:50px;

padding:0 65px 0 25px;

font-family:Cairo;

font-size:17px;

background:#fff;

box-shadow:0 15px 40px rgba(0,0,0,.06);

outline:none;

transition:.3s;

}

.store-search input:focus{

box-shadow:0 15px 45px rgba(124,58,237,.20);

}

.store-search i{

position:absolute;

right:25px;

top:50%;

transform:translateY(-50%);

font-size:20px;

color:var(--primary);

}


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

.store-categories{

    padding:35px 0;

    background:#fff;

    border-bottom:1px solid #eee;

}

.category-list{

    display:flex;

    gap:15px;

    overflow-x:auto;

    padding-bottom:10px;

    scrollbar-width:none;

}

.category-list::-webkit-scrollbar{

    display:none;

}

.category-btn{

    border:none;

    background:#F3F4F6;

    color:#555;

    padding:14px 28px;

    border-radius:50px;

    cursor:pointer;

    font-family:'Cairo',sans-serif;

    font-size:15px;

    font-weight:700;

    transition:.35s;

    white-space:nowrap;

}

.category-btn:hover{

    background:#7C3AED;

    color:#fff;

}

.category-btn.active{

    background:linear-gradient(135deg,#7C3AED,#A855F7);

    color:#fff;

    box-shadow:0 12px 30px rgba(124,58,237,.25);

}


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

.store-products{

    padding:70px 0;

    background:#F8F9FC;

}

.products-grid{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));

    gap:30px;

}

.product-card{

    background:#fff;

    border-radius:24px;

    overflow:hidden;

    transition:.35s;

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

    border:1px solid #eee;

}

.product-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 55px rgba(124,58,237,.18);

}

.product-image{

    width:100%;

    height:260px;

    overflow:hidden;

    background:#F4F4F4;

}

.product-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.4s;

}

.product-card:hover img{

    transform:scale(1.08);

}

.product-placeholder{

    width:100%;

    height:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:70px;

    color:#BDBDBD;

}

.product-body{

    padding:22px;

}

.product-category{

    display:inline-block;

    padding:6px 16px;

    border-radius:30px;

    background:#F3E8FF;

    color:#7C3AED;

    font-size:13px;

    font-weight:700;

    margin-bottom:15px;

}

.product-title{

    font-size:22px;

    font-weight:800;

    color:#111827;

    margin-bottom:12px;

}

.product-description{

    color:#6B7280;

    font-size:15px;

    line-height:1.8;

    min-height:60px;

}

.product-bottom{

    margin-top:25px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.product-price{

    font-size:28px;

    font-weight:900;

    color:#7C3AED;

}

.product-price span{

    font-size:14px;

    color:#888;

}
.product-actions{

display:flex;

gap:12px;

margin-top:22px;

}

.product-actions a{

flex:1;

height:50px;

border-radius:14px;

display:flex;

justify-content:center;

align-items:center;

gap:10px;

font-size:15px;

font-weight:700;

text-decoration:none;

transition:.35s;

}

.details-btn{

background:#F3F4F6;

color:#374151;

border:1px solid #E5E7EB;

}

.details-btn:hover{

background:#111827;

color:#fff;

transform:translateY(-2px);

}

.cart-btn{

background:linear-gradient(135deg,#7C3AED,#A855F7);

color:#fff;

box-shadow:0 12px 25px rgba(124,58,237,.25);

}

.cart-btn:hover{

transform:translateY(-2px);

box-shadow:0 18px 35px rgba(124,58,237,.35);

}
.empty-products{

    grid-column:1/-1;

    background:#fff;

    border-radius:20px;

    padding:70px;

    text-align:center;

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

}

.empty-products i{

    font-size:70px;

    color:#A855F7;

    margin-bottom:20px;

}

.empty-products h2{

    margin-bottom:10px;

    color:#111827;

}

.empty-products p{

    color:#777;

}

/*==================================================
        STORE PAGE ANIMATIONS
==================================================*/

.store-header,
.store-categories,
.store-products{

    animation:fadeUp .8s ease;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.product-card{

    position:relative;

}

.product-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:linear-gradient(90deg,#7C3AED,#A855F7);

    transform:scaleX(0);

    transition:.35s;

    transform-origin:left;

}

.product-card:hover::before{

    transform:scaleX(1);

}

.product-image{

    position:relative;

}

.product-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(to top,rgba(0,0,0,.15),transparent);

    opacity:0;

    transition:.3s;

}

.product-card:hover .product-image::after{

    opacity:1;

}

.store-search input::placeholder{

    color:#999;

}

.store-search input{

    transition:.35s;

}

.store-search input:focus{

    transform:translateY(-2px);

}

/* Scroll ناعم */

html{

    scroll-behavior:smooth;

}

/*==================================================
        RESPONSIVE
==================================================*/

@media(max-width:992px){

.store-info{

flex-direction:column;

text-align:center;

}

.store-stats{

justify-content:center;

}

.products-grid{

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

}

.store-details h1{

font-size:34px;

}

}

@media(max-width:768px){

.store-navbar .container{

padding:15px;

}

.store-logo span{

display:none;

}

.store-image{

width:130px;

height:130px;

}

.store-details h1{

font-size:28px;

}

.store-search input{

height:58px;

font-size:15px;

}

.products-grid{

grid-template-columns:1fr;

gap:22px;

}

.product-image{

height:220px;

}

.category-btn{

padding:12px 20px;

font-size:14px;

}

}

@media(max-width:480px){

.store-header{

padding:45px 0;

}

.store-details p{

font-size:15px;

}

.store-stats{

gap:12px;

}

.store-stats div{

padding:14px;

min-width:95px;

}

.store-stats h3{

font-size:22px;

}

.product-title{

font-size:18px;

}

.product-price{

font-size:22px;

}

.details-btn,

.product-actions .cart-btn{

width:44px;

height:44px;

}

}


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

.product-wrapper{

display:grid;

grid-template-columns:420px 1fr;

gap:45px;

align-items:start;

}


.product-image-box{

background:#fff;

border-radius:30px;

padding:25px;

box-shadow:0 15px 40px rgba(0,0,0,.08);

position:sticky;

top:120px;

}


.main-product-image{

width:100%;

height:380px;

object-fit:cover;

border-radius:22px;

transition:.4s;

}


.main-product-image:hover{

transform:scale(1.03);

}



.product-no-image{

height:380px;

display:flex;

align-items:center;

justify-content:center;

font-size:80px;

color:#c4b5fd;

background:#f8f7ff;

border-radius:22px;

}



/* معلومات المنتج */

.product-info-box{

background:#fff;

padding:35px;

border-radius:30px;

box-shadow:0 15px 40px rgba(0,0,0,.06);

}



@media(max-width:900px){


.product-wrapper{

grid-template-columns:1fr;

}


.product-image-box{

position:relative;

top:0;

}


.main-product-image{

height:300px;

}


}

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


.product-navbar{

position:sticky;

top:0;

z-index:999;

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

backdrop-filter:blur(15px);

border-bottom:1px solid #eee;

}


.product-navbar .container{

max-width:1300px;

margin:auto;

padding:18px 30px;

display:flex;

align-items:center;

justify-content:space-between;

}


.product-navbar .logo{

font-size:25px;

font-weight:900;

color:#7C3AED;

display:flex;

align-items:center;

gap:10px;

}


/* Meta */

.product-meta{

display:flex;

gap:15px;

flex-wrap:wrap;

margin-bottom:20px;

}


.product-meta span{

background:#F3E8FF;

color:#7C3AED;

padding:10px 18px;

border-radius:30px;

font-size:14px;

font-weight:700;

display:flex;

align-items:center;

gap:8px;

}



/* Title */


.product-title{

font-size:42px;

font-weight:900;

color:#111827;

margin-bottom:25px;

line-height:1.4;

}



/* Price */


.product-price-box{

background:linear-gradient(135deg,#7C3AED,#A855F7);

padding:25px;

border-radius:25px;

color:#fff;

margin-bottom:30px;

}


.product-price-box span{

font-size:15px;

opacity:.9;

}


.product-price-box h2{

font-size:42px;

margin-top:8px;

}


.product-price-box small{

font-size:18px;

margin-right:8px;

}




/* Description */


.product-description{

background:#F9FAFB;

padding:25px;

border-radius:22px;

margin-bottom:30px;

}


.product-description h3{

font-size:20px;

margin-bottom:15px;

color:#111827;

}


.product-description h3 i{

color:#7C3AED;

}


.product-description p{

color:#6B7280;

font-size:16px;

line-height:2;

}





/* Quantity */


.quantity-box h3{

font-size:18px;

margin-bottom:15px;

}


.quantity-control{

display:flex;

align-items:center;

gap:15px;

margin-bottom:30px;

}


.quantity-control button{

width:45px;

height:45px;

border:none;

border-radius:50%;

background:#7C3AED;

color:white;

font-size:18px;

cursor:pointer;

transition:.3s;

}


.quantity-control button:hover{

transform:scale(1.1);

}



.quantity-control input{

width:80px;

height:45px;

text-align:center;

border:1px solid #ddd;

border-radius:15px;

font-size:20px;

font-family:Cairo;

}




/* Add Cart Button */


.add-product-cart{

width:100%;

height:60px;

border:none;

border-radius:18px;

background:linear-gradient(135deg,#7C3AED,#A855F7);

color:white;

font-size:18px;

font-weight:800;

cursor:pointer;

display:flex;

align-items:center;

justify-content:center;

gap:12px;

transition:.35s;

box-shadow:0 15px 35px rgba(124,58,237,.25);

}


.add-product-cart:hover{

transform:translateY(-4px);

box-shadow:0 25px 45px rgba(124,58,237,.35);

}





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


.similar-section{

background:#F8F9FC;

padding:80px 0;

}



.section-title{

text-align:center;

margin-bottom:45px;

}


.section-title h2{

font-size:35px;

font-weight:900;

color:#111827;

}


.section-title p{

color:#777;

}





.similar-grid{

display:grid;

grid-template-columns:repeat(auto-fill,minmax(240px,1fr));

gap:25px;

}



.similar-card{

background:#fff;

border-radius:25px;

padding:15px;

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

transition:.35s;

}


.similar-card:hover{

transform:translateY(-8px);

}


.similar-card img{

width:100%;

height:220px;

object-fit:cover;

border-radius:20px;

}



.similar-placeholder{

height:220px;

display:flex;

align-items:center;

justify-content:center;

background:#F3F4F6;

border-radius:20px;

font-size:60px;

color:#C4B5FD;

}



.similar-card h3{

font-size:20px;

margin:18px 0 10px;

color:#111827;

}



.similar-price{

font-size:22px;

font-weight:900;

color:#7C3AED;

margin-bottom:15px;

}



.similar-card a{

display:block;

text-align:center;

background:#F3E8FF;

color:#7C3AED;

padding:12px;

border-radius:15px;

text-decoration:none;

font-weight:700;

transition:.3s;

}


.similar-card a:hover{

background:#7C3AED;

color:#fff;

}





/* FOOTER */


.product-footer{

background:#111827;

color:#fff;

text-align:center;

padding:25px;

font-size:15px;

}



/* MOBILE */


@media(max-width:600px){


.product-title{

font-size:30px;

}


.product-price-box h2{

font-size:32px;

}


.product-info-box{

padding:22px;

}


.similar-grid{

grid-template-columns:1fr;

}


}