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

:root {
  --clr-bg: #FAFAF8;
  --clr-bg-alt: #FFFFFF;
  --clr-surface: #FFFFFF;
  --clr-text: #1A1A1A;
  --clr-text-secondary: #6B6B6B;
  --clr-text-muted: #999999;
  --clr-border: rgba(0,0,0,0.08);
  --clr-border-light: rgba(0,0,0,0.05);
  --clr-primary: #C84B31;
  --clr-primary-hover: #9E3220;
  --clr-primary-light: #FCEAE6;
  --clr-accent: #D4A01A;
  --clr-accent-light: rgba(212,160,26,0.12);
  --clr-success: #3B6D11;
  --clr-success-light: #EAF3DE;
  --clr-danger: #A32D2D;
  --clr-danger-light: #FCEBEB;
  --clr-warning: #854F0B;
  --clr-warning-light: #FAEEDA;
  --clr-dark: #1A1A1A;
  --clr-dark-soft: #2D1A15;
  --clr-gradient-dark: linear-gradient(135deg, #1A1A1A 0%, #2D1A15 60%, #C84B31 100%);
  --clr-gradient-accent: linear-gradient(120deg, #1A1A1A, #3D1F15);
  --font-family: 'Cairo', sans-serif;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.12);
  --shadow-glow: 0 0 30px rgba(200,75,49,0.15);
  --transition: all 0.3s cubic-bezier(0.25,0.46,0.45,0.94);
  --max-width: 1200px;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-family);background:var(--clr-bg);color:var(--clr-text);direction:rtl;line-height:1.6;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
ul{list-style:none}
img{max-width:100%;display:block}
button,input,select,textarea{font-family:inherit;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--clr-primary)}

.container{max-width:var(--max-width);margin:0 auto;padding:0 4%}

/* ===== NAVBAR ===== */
.navbar{background:var(--clr-bg-alt);border-bottom:1px solid var(--clr-border);padding:0 4%;height:clamp(52px,7vw,64px);display:flex;align-items:center;justify-content:space-between;gap:2%;position:sticky;top:0;z-index:1000}
.logo{font-size:clamp(16px,3vw,22px);font-weight:900;color:var(--clr-primary);display:flex;align-items:center;gap:4px}
.logo span{color:var(--clr-text)}
.nav-links{display:flex;gap:clamp(1rem,3vw,2rem);font-size:clamp(12px,1.8vw,14px);font-weight:600}
.nav-links a{color:var(--clr-text-secondary);padding:4px 0;border-bottom:2px solid transparent;transition:var(--transition)}
.nav-links a:hover,.nav-links a.active{color:var(--clr-primary);border-bottom-color:var(--clr-primary)}
.nav-actions{display:flex;align-items:center;gap:clamp(6px,1.2vw,10px)}
.cart-btn{background:var(--clr-primary);color:#fff;border:none;padding:clamp(6px,1.2vw,9px) clamp(12px,2.5vw,18px);border-radius:var(--radius-md);font-size:clamp(11px,1.8vw,13px);font-weight:700;cursor:pointer;display:flex;align-items:center;gap:5px;transition:var(--transition)}
.cart-btn:hover{background:var(--clr-primary-hover);transform:translateY(-1px)}
.cart-count{background:var(--clr-accent);color:#fff;font-size:clamp(9px,1.3vw,11px);font-weight:700;width:clamp(14px,2.5vw,18px);height:clamp(14px,2.5vw,18px);border-radius:50%;display:flex;align-items:center;justify-content:center}
.ham-btn{display:none;background:none;border:none;font-size:clamp(18px,4vw,22px);color:var(--clr-text);cursor:pointer;padding:4px}
.mob-menu{display:none;flex-direction:column;background:var(--clr-bg-alt);border-bottom:1px solid var(--clr-border);padding:clamp(8px,2vw,12px) 4%;position:sticky;top:clamp(52px,7vw,64px);z-index:999}
.mob-menu a{display:block;padding:clamp(8px,1.5vw,11px) 0;font-size:clamp(13px,2vw,15px);font-weight:600;color:var(--clr-text-secondary);border-bottom:1px solid var(--clr-border-light)}
.mob-menu a:last-child{border:none}
.mob-menu.open{display:flex}

/* ===== BUTTONS ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:none;border-radius:var(--radius-md);font-weight:700;cursor:pointer;transition:var(--transition);font-size:clamp(12px,2vw,15px);padding:clamp(10px,2vw,14px) clamp(18px,4vw,32px);font-family:var(--font-family)}
.btn-primary{background:var(--clr-primary);color:#fff}
.btn-primary:hover{background:var(--clr-primary-hover);transform:translateY(-2px);box-shadow:var(--shadow-glow)}
.btn-outline{background:transparent;color:var(--clr-text);border:1.5px solid var(--clr-border)}
.btn-outline:hover{border-color:var(--clr-primary);color:var(--clr-primary)}
.btn-outline-light{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,0.3)}
.btn-outline-light:hover{border-color:#fff}
.btn-sm{padding:clamp(6px,1vw,9px) clamp(12px,2vw,18px);font-size:clamp(11px,1.6vw,13px)}
.btn-ghost{background:var(--clr-primary-light);color:var(--clr-primary);border:none;padding:clamp(6px,1vw,9px) clamp(12px,2vw,18px);border-radius:var(--radius-md);font-size:clamp(11px,1.6vw,13px);font-weight:700;cursor:pointer;transition:var(--transition)}
.btn-ghost:hover{background:var(--clr-primary);color:#fff}

/* ===== SECTION ===== */
.section{padding:clamp(2rem,4vw,4rem) 4%}
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:clamp(1rem,2.5vw,1.8rem)}
.section-title{font-size:clamp(18px,3vw,26px);font-weight:900}
.section-title span{color:var(--clr-primary)}
.see-all{font-size:clamp(11px,1.8vw,13px);color:var(--clr-primary);cursor:pointer;font-weight:600;background:none;border:none;padding:4px 0;border-bottom:1px dashed transparent;transition:var(--transition)}
.see-all:hover{border-bottom-color:var(--clr-primary)}

/* ===== CARDS ===== */
.card{background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:var(--radius-lg);overflow:hidden;transition:var(--transition)}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}

/* ===== BADGE ===== */
.badge{display:inline-flex;align-items:center;gap:4px;padding:2px clamp(6px,1vw,10px);border-radius:var(--radius-sm);font-size:clamp(9px,1.3vw,11px);font-weight:700}
.badge-sale{background:var(--clr-primary);color:#fff}
.badge-new{background:var(--clr-accent);color:#fff}
.badge-hot{background:var(--clr-dark);color:#fff}

/* ===== PRODUCT CARD ===== */
.product-card{background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:var(--radius-lg);overflow:hidden;cursor:pointer;transition:var(--transition);position:relative}
.product-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.product-badge{position:absolute;top:8px;right:8px;z-index:2}
.product-img{height:clamp(120px,16vw,170px);display:flex;align-items:center;justify-content:center;font-size:clamp(42px,7vw,64px);background:var(--clr-bg);overflow:hidden}
.product-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.product-card:hover .product-img img{transform:scale(1.08)}
.product-body{padding:clamp(10px,1.8vw,14px)}
.product-cat{font-size:clamp(9px,1.3vw,11px);color:var(--clr-primary);font-weight:700;letter-spacing:0.5px;margin-bottom:3px}
.product-name{font-size:clamp(11px,1.8vw,14px);font-weight:700;margin-bottom:clamp(5px,1vw,8px);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.product-rating{display:flex;align-items:center;gap:3px;font-size:clamp(10px,1.5vw,12px);color:var(--clr-text-secondary);margin-bottom:clamp(6px,1.2vw,10px)}
.stars{color:var(--clr-accent);font-size:clamp(11px,1.6vw,13px)}
.product-footer{display:flex;align-items:center;justify-content:space-between}
.price-now{font-size:clamp(13px,2.5vw,18px);font-weight:900;color:var(--clr-primary)}
.price-old{font-size:clamp(10px,1.4vw,12px);color:var(--clr-text-muted);text-decoration:line-through;margin-top:1px}

/* ===== PRODUCT GRID ===== */
.products-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(150px,18vw,210px),1fr));gap:clamp(10px,2vw,16px)}

/* ===== CATEGORY CARD ===== */
.categories-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(90px,12vw,130px),1fr));gap:clamp(8px,1.5vw,12px)}
.cat-card{background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:var(--radius-lg);padding:clamp(0.8rem,2vw,1.4rem) clamp(0.5rem,1.5vw,1rem);text-align:center;cursor:pointer;transition:var(--transition)}
.cat-card:hover{transform:translateY(-3px);border-color:var(--clr-primary);box-shadow:var(--shadow-glow)}
.cat-icon{font-size:clamp(24px,4vw,36px);margin-bottom:clamp(4px,1vw,8px)}
.cat-name{font-size:clamp(11px,1.6vw,13px);font-weight:700}
.cat-count{font-size:clamp(9px,1.3vw,11px);color:var(--clr-text-secondary);margin-top:2px}

/* ===== FORMS ===== */
.form-group{margin-bottom:clamp(12px,2vw,18px)}
.form-group label{display:block;font-size:clamp(12px,1.6vw,14px);font-weight:700;margin-bottom:5px;color:var(--clr-text)}
.form-control{width:100%;padding:clamp(10px,1.8vw,13px) clamp(12px,2vw,16px);border:1.5px solid var(--clr-border);border-radius:var(--radius-md);font-size:clamp(13px,1.8vw,15px);background:var(--clr-bg);color:var(--clr-text);transition:var(--transition)}
.form-control:focus{border-color:var(--clr-primary);box-shadow:0 0 0 3px var(--clr-primary-light)}

/* ===== TOAST ===== */
.toast{position:fixed;top:80px;left:50%;transform:translateX(-50%) translateY(-20px);background:var(--clr-dark);color:#fff;padding:clamp(10px,1.5vw,14px) clamp(16px,3vw,28px);border-radius:var(--radius-md);font-size:clamp(12px,1.8vw,14px);font-weight:600;opacity:0;transition:all 0.35s cubic-bezier(0.25,0.46,0.45,0.94);pointer-events:none;z-index:9999;direction:rtl;white-space:nowrap;box-shadow:var(--shadow-lg)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ===== FOOTER ===== */
.footer{background:var(--clr-dark);padding:clamp(2rem,4vw,3rem) 4% clamp(1.2rem,2.5vw,1.5rem)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:clamp(1.5rem,3vw,2.5rem);margin-bottom:clamp(1.5rem,3vw,2rem)}
.footer-brand .logo{font-size:clamp(18px,3vw,24px);margin-bottom:8px}
.footer-brand p{font-size:clamp(12px,1.6vw,14px);color:rgba(255,255,255,0.45);line-height:1.7;max-width:300px}
.footer-col h4{font-size:clamp(13px,1.8vw,15px);font-weight:800;color:#fff;margin-bottom:clamp(10px,1.5vw,16px)}
.footer-col a{display:block;font-size:clamp(11px,1.5vw,13px);color:rgba(255,255,255,0.4);margin-bottom:clamp(6px,1vw,10px);transition:var(--transition)}
.footer-col a:hover{color:var(--clr-primary);padding-right:4px}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.08);padding-top:clamp(12px,2vw,18px);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.footer-bottom p{font-size:clamp(11px,1.4vw,13px);color:rgba(255,255,255,0.25)}

/* ===== FEATURES STRIP ===== */
.features-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(clamp(150px,18vw,190px),1fr));gap:clamp(8px,1.5vw,12px)}
.feature-item{background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:var(--radius-md);padding:clamp(0.8rem,2vw,1.2rem);display:flex;align-items:center;gap:clamp(8px,1.5vw,12px)}
.feature-icon{width:clamp(36px,5.5vw,46px);height:clamp(36px,5.5vw,46px);border-radius:var(--radius-md);background:var(--clr-primary-light);display:flex;align-items:center;justify-content:center;font-size:clamp(18px,3vw,24px);flex-shrink:0}
.feature-text strong{display:block;font-size:clamp(11px,1.7vw,13px);font-weight:700;margin-bottom:1px}
.feature-text span{font-size:clamp(10px,1.4vw,12px);color:var(--clr-text-secondary)}

/* ===== PAGE HEADER ===== */
.page-header{background:var(--clr-gradient-dark);padding:clamp(2rem,5vw,3.5rem) 4%;text-align:center;color:#fff}
.page-header h1{font-size:clamp(22px,4vw,36px);font-weight:900;margin-bottom:6px}
.page-header p{font-size:clamp(13px,2vw,16px);color:rgba(255,255,255,0.55);max-width:500px;margin:0 auto}
.page-breadcrumb{font-size:clamp(11px,1.5vw,13px);color:rgba(255,255,255,0.4);margin-bottom:10px}
.page-breadcrumb a{color:rgba(255,255,255,0.7)}.page-breadcrumb a:hover{color:#fff}

/* ===== STATE MESSAGES ===== */
.empty-state{text-align:center;padding:clamp(2rem,5vw,4rem)}
.empty-state .icon{font-size:clamp(48px,8vw,72px);margin-bottom:12px;opacity:0.4}
.empty-state h3{font-size:clamp(16px,2.5vw,20px);font-weight:700;margin-bottom:6px}
.empty-state p{font-size:clamp(13px,1.8vw,15px);color:var(--clr-text-secondary)}
.loading{text-align:center;padding:clamp(2rem,4vw,3rem);color:var(--clr-text-secondary);font-size:clamp(14px,2vw,16px)}

/* ===== PAGE WRAPPER ===== */
.page-wrap{min-height:100vh;display:flex;flex-direction:column}
.page-wrap main{flex:1}

/* ===== RESPONSIVE ===== */
@media(max-width:900px){
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
}
@media(max-width:640px){
  .nav-links{display:none}
  .ham-btn{display:block}
  .footer-grid{grid-template-columns:1fr}
  .products-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .categories-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .features-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:400px){
  .categories-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cat-count{display:none}
}

/* ===== ANIMATIONS ===== */
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes scaleIn{from{opacity:0;transform:scale(0.92)}to{opacity:1;transform:scale(1)}}
@keyframes slideDown{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.anim-fade-up{animation:fadeUp 0.6s ease forwards}
.anim-fade-in{animation:fadeIn 0.6s ease forwards}
.anim-scale-in{animation:scaleIn 0.5s ease forwards}
.anim-delay-1{animation-delay:0.1s}.anim-delay-2{animation-delay:0.2s}.anim-delay-3{animation-delay:0.3s}
.anim-delay-4{animation-delay:0.4s}.anim-delay-5{animation-delay:0.5s}