/* assets/css/style.css */
:root {
    --gold: #6abf4b;
    --gold-light: #b8e8a0;
    --gold-dark: #2d7a3a;
    --cream: #f0faf3;
    --deep: #0d2b1a;
    --charcoal: #1a4a2e;
    --muted: #4a7a5a;
    --white: #ffffff;
    --success: #4caf7d;
    --error: #e05252;
    --blue: #3b82f6;
    --shadow: 0 8px 32px rgba(13,43,26,0.12);
    --shadow-lg: 0 16px 48px rgba(13,43,26,0.18);
}

* { 
    margin:0; 
    padding:0; 
    box-sizing:border-box; 
}

html { 
    scroll-behavior:smooth; 
}

body { 
    font-family:'Cairo',sans-serif; 
    background:var(--cream); 
    color:var(--charcoal); 
    overflow-x:hidden; 
}

::-webkit-scrollbar { 
    width:6px; 
}

::-webkit-scrollbar-track { 
    background:var(--cream); 
}

::-webkit-scrollbar-thumb { 
    background:var(--gold); 
    border-radius:3px; 
}

/* ===== HEADER ===== */
header { 
    position:fixed; 
    top:0; 
    width:100%; 
    z-index:1000; 
    background:rgba(13,43,26,0.97); 
    backdrop-filter:blur(12px); 
    border-bottom:1px solid rgba(106,191,75,0.3); 
}

.header-top { 
    background:linear-gradient(90deg,var(--gold-dark),var(--gold),var(--gold-dark)); 
    padding:6px 0; 
    text-align:center; 
    font-size:13px; 
    color:var(--deep); 
    font-weight:600; 
}

nav { 
    display:flex; 
    align-items:center; 
    justify-content:space-between; 
    padding:14px 5%; 
    gap:20px; 
}

.logo { 
    font-family:'Playfair Display',serif; 
    font-size:26px; 
    color:var(--gold); 
    text-decoration:none; 
    letter-spacing:2px; 
    display:flex; 
    align-items:center; 
    gap:8px; 
}

.logo span { 
    color:var(--white); 
    font-size:13px; 
    font-family:'Cairo',sans-serif; 
    font-weight:400; 
    opacity:0.6; 
    letter-spacing:0; 
}

.logo-dot { 
    width:8px; 
    height:8px; 
    background:var(--gold); 
    border-radius:50%; 
    animation:pulse 2s infinite; 
}

@keyframes pulse { 
    0%,100%{opacity:1;transform:scale(1)} 
    50%{opacity:0.5;transform:scale(1.3)} 
}

.nav-links { 
    display:flex; 
    gap:28px; 
    list-style:none; 
    align-items:center; 
}

.nav-links a { 
    color:rgba(255,255,255,0.82); 
    text-decoration:none; 
    font-size:14px; 
    font-weight:500; 
    transition:color 0.2s; 
    position:relative; 
}

.nav-links a::after { 
    content:''; 
    position:absolute; 
    bottom:-3px; 
    right:0; 
    width:0; 
    height:1px; 
    background:var(--gold); 
    transition:width 0.3s; 
}

.nav-links a:hover { 
    color:var(--gold); 
}

.nav-links a:hover::after { 
    width:100%; 
}

.header-actions { 
    display:flex; 
    align-items:center; 
    gap:14px; 
}

.cart-btn { 
    position:relative; 
    background:none; 
    border:none; 
    cursor:pointer; 
    color:var(--white); 
    font-size:22px; 
    transition:color 0.2s; 
}

.cart-btn:hover { 
    color:var(--gold); 
}

.cart-count { 
    position:absolute; 
    top:-6px; 
    right:-6px; 
    background:var(--gold); 
    color:var(--deep); 
    border-radius:50%; 
    width:18px; 
    height:18px; 
    font-size:11px; 
    font-weight:700; 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    font-family:'Cairo',sans-serif; 
}

.cta-nav { 
    background:linear-gradient(135deg,var(--gold),var(--gold-dark)); 
    color:var(--deep); 
    padding:8px 20px; 
    border-radius:50px; 
    text-decoration:none; 
    font-weight:700; 
    font-size:13px; 
    transition:all 0.3s; 
    box-shadow:0 4px 16px rgba(106,191,75,0.3); 
    white-space:nowrap; 
}

.cta-nav:hover { 
    transform:translateY(-2px); 
    box-shadow:0 8px 24px rgba(106,191,75,0.45); 
}

.hamburger { 
    display:none; 
    flex-direction:column; 
    gap:5px; 
    cursor:pointer; 
    background:none; 
    border:none; 
    padding:4px; 
}

.hamburger span { 
    width:24px; 
    height:2px; 
    background:var(--white); 
    border-radius:2px; 
    transition:all 0.3s; 
}

/* ===== HERO ===== */
.hero { 
    min-height:100vh; 
    background:linear-gradient(135deg,#0d0a04 0%,#0d2b1a 40%,#241a0a 100%); 
    position:relative; 
    display:flex; 
    align-items:center; 
    overflow:hidden; 
    padding-top:90px; 
}

.hero::before { 
    content:''; 
    position:absolute; 
    inset:0; 
    background:radial-gradient(ellipse at 20% 50%,rgba(106,191,75,0.15) 0%,transparent 60%),
                radial-gradient(ellipse at 80% 20%,rgba(59,130,246,0.08) 0%,transparent 50%); 
}

.hero-grid { 
    position:absolute; 
    inset:0; 
    background-image:linear-gradient(rgba(106,191,75,0.04) 1px,transparent 1px),
                    linear-gradient(90deg,rgba(106,191,75,0.04) 1px,transparent 1px); 
    background-size:60px 60px; 
}

.hero-content { 
    position:relative; 
    z-index:2; 
    padding:0 5%; 
    display:grid; 
    grid-template-columns:1fr 1fr; 
    gap:60px; 
    align-items:center; 
    width:100%; 
    max-width:1200px; 
    margin:0 auto; 
}

.hero-text { 
    animation:fadeInRight 1s ease forwards; 
}

@keyframes fadeInRight { 
    from{opacity:0;transform:translateX(40px)} 
    to{opacity:1;transform:translateX(0)} 
}

.hero-badge { 
    display:inline-flex; 
    align-items:center; 
    gap:8px; 
    background:rgba(106,191,75,0.12); 
    border:1px solid rgba(106,191,75,0.3); 
    color:var(--gold); 
    padding:6px 16px; 
    border-radius:50px; 
    font-size:13px; 
    font-weight:600; 
    margin-bottom:24px; 
}

.hero h1 { 
    font-size:clamp(34px,4.5vw,60px); 
    color:var(--white); 
    line-height:1.25; 
    margin-bottom:20px; 
    font-weight:900; 
}

.hero h1 .highlight { 
    background:linear-gradient(135deg,var(--gold),var(--gold-light)); 
    -webkit-background-clip:text; 
    -webkit-text-fill-color:transparent; 
    background-clip:text; 
}

.hero p { 
    font-size:16px; 
    color:rgba(255,255,255,0.65); 
    line-height:1.9; 
    margin-bottom:36px; 
    max-width:500px; 
}

.hero-btns { 
    display:flex; 
    gap:14px; 
    flex-wrap:wrap; 
}

.btn-primary { 
    background:linear-gradient(135deg,var(--gold),var(--gold-dark)); 
    color:var(--deep); 
    padding:14px 30px; 
    border-radius:50px; 
    text-decoration:none; 
    font-weight:700; 
    font-size:15px; 
    border:none; 
    cursor:pointer; 
    transition:all 0.3s; 
    box-shadow:0 6px 24px rgba(106,191,75,0.35); 
    display:inline-flex; 
    align-items:center; 
    gap:8px; 
    font-family:'Cairo',sans-serif; 
}

.btn-primary:hover { 
    transform:translateY(-3px); 
    box-shadow:0 12px 36px rgba(106,191,75,0.5); 
}

.btn-outline { 
    background:transparent; 
    color:var(--white); 
    padding:14px 30px; 
    border-radius:50px; 
    text-decoration:none; 
    font-weight:600; 
    font-size:15px; 
    border:1px solid rgba(255,255,255,0.3); 
    cursor:pointer; 
    transition:all 0.3s; 
    display:inline-flex; 
    align-items:center; 
    gap:8px; 
    font-family:'Cairo',sans-serif; 
}

.btn-outline:hover { 
    border-color:var(--gold); 
    color:var(--gold); 
}

.hero-stats { 
    display:flex; 
    gap:32px; 
    margin-top:48px; 
    flex-wrap:wrap; 
}

.stat { 
    text-align:center; 
}

.stat-num { 
    font-size:26px; 
    font-weight:900; 
    color:var(--gold); 
    display:block; 
    line-height:1; 
}

.stat-label { 
    font-size:11px; 
    color:rgba(255,255,255,0.5); 
    margin-top:4px; 
}

.hero-visual { 
    animation:fadeInLeft 1s ease 0.3s both; 
    display:flex; 
    justify-content:center; 
    align-items:center; 
}

@keyframes fadeInLeft { 
    from{opacity:0;transform:translateX(-40px)} 
    to{opacity:1;transform:translateX(0)} 
}

.target-cards { 
    display:grid; 
    grid-template-columns:1fr 1fr; 
    gap:16px; 
}

.target-card { 
    background:rgba(255,255,255,0.05); 
    border:1px solid rgba(106,191,75,0.2); 
    border-radius:20px; 
    padding:24px 20px; 
    text-align:center; 
    backdrop-filter:blur(8px); 
    transition:all 0.3s; 
}

.target-card:hover { 
    background:rgba(106,191,75,0.1); 
    border-color:rgba(106,191,75,0.4); 
    transform:translateY(-5px); 
}

.target-card .t-icon { 
    font-size:36px; 
    margin-bottom:10px; 
    display:block; 
}

.target-card h3 { 
    color:var(--white); 
    font-size:15px; 
    font-weight:700; 
    margin-bottom:6px; 
}

.target-card p { 
    color:rgba(255,255,255,0.5); 
    font-size:12px; 
    line-height:1.6; 
}

/* ===== SECTION COMMON ===== */
section { 
    padding:90px 5%; 
}

.section-header { 
    text-align:center; 
    margin-bottom:56px; 
}

.section-tag { 
    display:inline-block; 
    background:rgba(106,191,75,0.12); 
    color:var(--gold); 
    border:1px solid rgba(106,191,75,0.3); 
    padding:5px 14px; 
    border-radius:50px; 
    font-size:12px; 
    font-weight:600; 
    letter-spacing:1px; 
    margin-bottom:14px; 
}

.section-title { 
    font-size:clamp(26px,3.5vw,40px); 
    color:var(--deep); 
    font-weight:900; 
    margin-bottom:12px; 
    line-height:1.3; 
}

.section-title-light { 
    color:var(--white); 
}

.section-desc { 
    font-size:16px; 
    color:var(--muted); 
    max-width:580px; 
    margin:0 auto; 
    line-height:1.8; 
}

.section-desc-light { 
    color:rgba(255,255,255,0.55); 
}

.section-divider { 
    width:60px; 
    height:3px; 
    background:linear-gradient(90deg,var(--gold),var(--gold-light)); 
    margin:16px auto 0; 
    border-radius:2px; 
}

/* ===== WHO WE SERVE ===== */
.audience { 
    background:var(--white); 
}

.audience-grid { 
    display:grid; 
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); 
    gap:24px; 
    max-width:1100px; 
    margin:0 auto; 
}

.audience-card { 
    padding:32px 24px; 
    border-radius:20px; 
    text-align:center; 
    border:1.5px solid rgba(106,191,75,0.15); 
    transition:all 0.3s; 
    cursor:default; 
    background:var(--cream); 
}

.audience-card:hover { 
    border-color:var(--gold); 
    box-shadow:0 8px 32px rgba(106,191,75,0.15); 
    transform:translateY(-4px); 
}

.audience-icon { 
    font-size:44px; 
    margin-bottom:14px; 
    display:block; 
}

.audience-card h3 { 
    font-size:17px; 
    font-weight:700; 
    color:var(--deep); 
    margin-bottom:8px; 
}

.audience-card p { 
    font-size:13px; 
    color:var(--muted); 
    line-height:1.7; 
}

/* ===== CATEGORIES ===== */
.categories { 
    background:var(--deep); 
}

.categories-grid { 
    display:grid; 
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); 
    gap:24px; 
    max-width:1200px; 
    margin:0 auto; 
}

.category-card { 
    position:relative; 
    border-radius:24px; 
    overflow:hidden; 
    cursor:pointer; 
    aspect-ratio:3/4; 
    background:var(--charcoal); 
    border:1px solid rgba(106,191,75,0.15); 
    transition:all 0.4s; 
}

.category-card:hover { 
    transform:translateY(-8px); 
    border-color:rgba(106,191,75,0.4); 
    box-shadow:0 24px 48px rgba(0,0,0,0.4); 
}

.category-bg { 
    position:absolute; 
    inset:0; 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    font-size:80px; 
    transition:all 0.4s; 
}

.category-card:hover .category-bg { 
    transform:scale(1.1); 
}

.cat-beauty .category-bg { 
    background:linear-gradient(135deg,#2a1a2a,#3d1f35); 
}

.cat-slim .category-bg { 
    background:linear-gradient(135deg,#0a1f1a,#123028); 
}

.cat-medical .category-bg { 
    background:linear-gradient(135deg,#0d1f2d,#122535); 
}

.cat-skin .category-bg { 
    background:linear-gradient(135deg,#2a1a10,#3d2a10); 
}

.category-info { 
    position:absolute; 
    bottom:0; 
    left:0; 
    right:0; 
    padding:24px; 
    background:linear-gradient(transparent,rgba(0,0,0,0.85)); 
}

.category-info h3 { 
    color:var(--white); 
    font-size:20px; 
    font-weight:700; 
    margin-bottom:4px; 
}

.category-info p { 
    color:var(--gold); 
    font-size:13px; 
    font-weight:500; 
}

.category-arrow { 
    position:absolute; 
    top:20px; 
    left:20px; 
    width:36px; 
    height:36px; 
    background:rgba(106,191,75,0.15); 
    border:1px solid rgba(106,191,75,0.3); 
    border-radius:50%; 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    color:var(--gold); 
    font-size:16px; 
    opacity:0; 
    transition:all 0.3s; 
}

.category-card:hover .category-arrow { 
    opacity:1; 
}

/* ===== PRODUCTS ===== */
.products { 
    background:var(--cream); 
}

.filter-tabs { 
    display:flex; 
    gap:10px; 
    justify-content:center; 
    flex-wrap:wrap; 
    margin-bottom:48px; 
}

.filter-tab { 
    padding:9px 22px; 
    border-radius:50px; 
    border:1px solid rgba(106,191,75,0.3); 
    background:transparent; 
    color:var(--muted); 
    font-size:14px; 
    font-weight:600; 
    cursor:pointer; 
    transition:all 0.2s; 
    font-family:'Cairo',sans-serif; 
}

.filter-tab.active,
.filter-tab:hover { 
    background:linear-gradient(135deg,var(--gold),var(--gold-dark)); 
    color:var(--deep); 
    border-color:transparent; 
    box-shadow:0 4px 16px rgba(106,191,75,0.3); 
}

.products-grid { 
    display:grid; 
    grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); 
    gap:28px; 
    max-width:1200px; 
    margin:0 auto; 
}

.product-card { 
    background:var(--white); 
    border-radius:20px; 
    overflow:hidden; 
    box-shadow:var(--shadow); 
    transition:all 0.3s; 
    cursor:pointer; 
    position:relative; 
}

.product-card:hover { 
    transform:translateY(-6px); 
    box-shadow:var(--shadow-lg); 
}

.product-badge { 
    position:absolute; 
    top:14px; 
    right:14px; 
    padding:4px 12px; 
    border-radius:50px; 
    font-size:11px; 
    font-weight:700; 
    z-index:2; 
}

.badge-new { 
    background:var(--gold); 
    color:var(--deep); 
}

.badge-sale { 
    background:var(--error); 
    color:var(--white); 
}

.badge-best { 
    background:var(--success); 
    color:var(--white); 
}

.badge-pharma { 
    background:var(--blue); 
    color:var(--white); 
}

.product-img { 
    height:210px; 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    font-size:64px; 
    position:relative; 
    overflow:hidden; 
    transition:all 0.3s; 
}

.product-card:hover .product-img { 
    font-size:72px; 
}

.product-img-beauty { 
    background:linear-gradient(135deg,#fce4ec,#f8bbd0); 
}

.product-img-slim { 
    background:linear-gradient(135deg,#e8f5e9,#c8e6c9); 
}

.product-img-medical { 
    background:linear-gradient(135deg,#e3f2fd,#bbdefb); 
}

.product-img-skin { 
    background:linear-gradient(135deg,#fff8e1,#ffecb3); 
}

.product-view-btn { 
    position:absolute; 
    bottom:0; 
    left:0; 
    right:0; 
    background:rgba(13,43,26,0.7); 
    color:var(--gold); 
    font-size:13px; 
    font-weight:700; 
    padding:10px; 
    text-align:center; 
    transform:translateY(100%); 
    transition:transform 0.3s; 
    font-family:'Cairo',sans-serif; 
}

.product-card:hover .product-view-btn { 
    transform:translateY(0); 
}

.product-info { 
    padding:20px; 
}

.product-cat { 
    font-size:11px; 
    color:var(--gold); 
    font-weight:600; 
    text-transform:uppercase; 
    letter-spacing:1px; 
    margin-bottom:6px; 
}

.product-name { 
    font-size:16px; 
    font-weight:700; 
    color:var(--deep); 
    margin-bottom:8px; 
    line-height:1.4; 
}

.product-stars { 
    color:var(--gold); 
    font-size:13px; 
    margin-bottom:12px; 
}

.product-stars span { 
    color:var(--muted); 
    margin-right:4px; 
    font-size:12px; 
}

.product-pricing { 
    display:flex; 
    align-items:center; 
    gap:10px; 
    margin-bottom:16px; 
}

.price-current { 
    font-size:20px; 
    font-weight:900; 
    color:var(--deep); 
}

.price-old { 
    font-size:14px; 
    color:var(--muted); 
    text-decoration:line-through; 
}

.price-currency { 
    font-size:13px; 
    color:var(--muted); 
}

.product-card-btns { 
    display:flex; 
    gap:8px; 
}

.add-cart-btn { 
    flex:1; 
    padding:11px; 
    background:linear-gradient(135deg,var(--gold),var(--gold-dark)); 
    color:var(--deep); 
    border:none; 
    border-radius:12px; 
    font-size:14px; 
    font-weight:700; 
    cursor:pointer; 
    transition:all 0.3s; 
    font-family:'Cairo',sans-serif; 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    gap:6px; 
}

.add-cart-btn:hover { 
    box-shadow:0 6px 20px rgba(106,191,75,0.4); 
    transform:translateY(-2px); 
}

.quick-view-btn { 
    width:44px; 
    height:44px; 
    border-radius:12px; 
    border:1.5px solid rgba(106,191,75,0.3); 
    background:transparent; 
    cursor:pointer; 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    font-size:18px; 
    transition:all 0.2s; 
}

.quick-view-btn:hover { 
    background:rgba(106,191,75,0.1); 
    border-color:var(--gold); 
}

/* ===== PRODUCT DETAIL MODAL ===== */
.pd-overlay { 
    position:fixed; 
    inset:0; 
    background:rgba(0,0,0,0.75); 
    z-index:4000; 
    opacity:0; 
    pointer-events:none; 
    transition:opacity 0.3s; 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    padding:20px; 
}

.pd-overlay.open { 
    opacity:1; 
    pointer-events:all; 
}

.pd-modal { 
    background:var(--white); 
    border-radius:28px; 
    width:100%; 
    max-width:960px; 
    max-height:90vh; 
    overflow-y:auto; 
    transform:scale(0.92) translateY(20px); 
    transition:all 0.4s cubic-bezier(0.16,1,0.3,1); 
    display:grid; 
    grid-template-columns:1fr 1fr; 
}

.pd-overlay.open .pd-modal { 
    transform:scale(1) translateY(0); 
}

.pd-close { 
    position:absolute; 
    top:16px; 
    left:16px; 
    width:36px; 
    height:36px; 
    border-radius:50%; 
    border:none; 
    background:rgba(0,0,0,0.08); 
    cursor:pointer; 
    font-size:18px; 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    transition:all 0.2s; 
    z-index:10; 
}

.pd-close:hover { 
    background:rgba(0,0,0,0.15); 
}

.pd-gallery { 
    background:var(--cream); 
    border-radius:28px 0 0 28px; 
    padding:28px; 
    display:flex; 
    flex-direction:column; 
    gap:16px; 
    position:relative; 
}

.pd-main-img { 
    border-radius:20px; 
    height:300px; 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    font-size:90px; 
    transition:all 0.3s; 
    overflow:hidden; 
    position:relative; 
}

.pd-main-img .img-placeholder { 
    transition:all 0.4s; 
}

.pd-thumbs { 
    display:flex; 
    gap:10px; 
    overflow-x:auto; 
    padding-bottom:4px; 
}

.pd-thumb { 
    width:72px; 
    height:72px; 
    border-radius:12px; 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    font-size:26px; 
    cursor:pointer; 
    border:2px solid transparent; 
    transition:all 0.2s; 
    flex-shrink:0; 
}

.pd-thumb.active,
.pd-thumb:hover { 
    border-color:var(--gold); 
    transform:scale(1.05); 
}

.pd-info { 
    padding:32px 28px; 
    display:flex; 
    flex-direction:column; 
    gap:0; 
    overflow-y:auto; 
    position:relative; 
}

.pd-cat-tag { 
    display:inline-block; 
    background:rgba(106,191,75,0.12); 
    color:var(--gold-dark); 
    border:1px solid rgba(106,191,75,0.3); 
    padding:4px 12px; 
    border-radius:50px; 
    font-size:12px; 
    font-weight:700; 
    margin-bottom:12px; 
}

.pd-title { 
    font-size:22px; 
    font-weight:900; 
    color:var(--deep); 
    margin-bottom:10px; 
    line-height:1.35; 
}

.pd-stars-row { 
    display:flex; 
    align-items:center; 
    gap:10px; 
    margin-bottom:16px; 
}

.pd-stars { 
    color:var(--gold); 
    font-size:16px; 
}

.pd-reviews { 
    font-size:13px; 
    color:var(--muted); 
}

.pd-pricing { 
    display:flex; 
    align-items:baseline; 
    gap:12px; 
    margin-bottom:20px; 
}

.pd-price { 
    font-size:30px; 
    font-weight:900; 
    color:var(--deep); 
}

.pd-price-currency { 
    font-size:16px; 
    color:var(--muted); 
}

.pd-old-price { 
    font-size:16px; 
    color:var(--muted); 
    text-decoration:line-through; 
}

.pd-discount { 
    background:var(--error); 
    color:var(--white); 
    padding:3px 10px; 
    border-radius:50px; 
    font-size:12px; 
    font-weight:700; 
}

.pd-desc { 
    font-size:14px; 
    color:var(--muted); 
    line-height:1.85; 
    margin-bottom:20px; 
    border-top:1px solid rgba(106,191,75,0.12); 
    padding-top:20px; 
}

.pd-specs { 
    margin-bottom:20px; 
}

.pd-specs h4 { 
    font-size:14px; 
    font-weight:700; 
    color:var(--deep); 
    margin-bottom:12px; 
}

.pd-spec-row { 
    display:flex; 
    justify-content:space-between; 
    align-items:center; 
    padding:8px 0; 
    border-bottom:1px solid rgba(106,191,75,0.1); 
    font-size:13px; 
}

.pd-spec-row .spec-label { 
    color:var(--muted); 
}

.pd-spec-row .spec-val { 
    font-weight:600; 
    color:var(--deep); 
}

.pd-targets { 
    display:flex; 
    gap:8px; 
    flex-wrap:wrap; 
    margin-bottom:20px; 
}

.pd-target-tag { 
    display:flex; 
    align-items:center; 
    gap:6px; 
    background:rgba(59,130,246,0.08); 
    border:1px solid rgba(59,130,246,0.2); 
    color:var(--blue); 
    padding:5px 12px; 
    border-radius:50px; 
    font-size:12px; 
    font-weight:600; 
}

.pd-qty-row { 
    display:flex; 
    align-items:center; 
    gap:16px; 
    margin-bottom:20px; 
}

.pd-qty-label { 
    font-size:14px; 
    font-weight:600; 
    color:var(--charcoal); 
}

.pd-qty-ctrl { 
    display:flex; 
    align-items:center; 
    gap:10px; 
    background:var(--cream); 
    border-radius:12px; 
    padding:6px 12px; 
}

.pd-qty-btn { 
    width:30px; 
    height:30px; 
    border-radius:8px; 
    border:none; 
    background:var(--white); 
    box-shadow:0 2px 6px rgba(0,0,0,0.08); 
    cursor:pointer; 
    font-size:16px; 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    transition:all 0.2s; 
    color:var(--charcoal); 
}

.pd-qty-btn:hover { 
    background:var(--gold); 
    color:var(--deep); 
}

.pd-qty-num { 
    font-size:16px; 
    font-weight:700; 
    color:var(--deep); 
    min-width:28px; 
    text-align:center; 
}

.pd-action-btns { 
    display:flex; 
    flex-direction:column; 
    gap:10px; 
}

.pd-add-cart { 
    width:100%; 
    padding:14px; 
    background:linear-gradient(135deg,var(--gold),var(--gold-dark)); 
    color:var(--deep); 
    border:none; 
    border-radius:14px; 
    font-size:16px; 
    font-weight:700; 
    cursor:pointer; 
    font-family:'Cairo',sans-serif; 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    gap:8px; 
    transition:all 0.3s; 
}

.pd-add-cart:hover { 
    box-shadow:0 8px 24px rgba(106,191,75,0.4); 
    transform:translateY(-2px); 
}

.pd-order-btn { 
    width:100%; 
    padding:12px; 
    background:var(--deep); 
    color:var(--white); 
    border:none; 
    border-radius:14px; 
    font-size:15px; 
    font-weight:700; 
    cursor:pointer; 
    font-family:'Cairo',sans-serif; 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    gap:8px; 
    transition:all 0.3s; 
}

.pd-order-btn:hover { 
    background:var(--charcoal); 
}

.pd-tabs { 
    display:flex; 
    gap:0; 
    border-bottom:1.5px solid rgba(106,191,75,0.15); 
    margin-bottom:20px; 
}

.pd-tab { 
    padding:10px 18px; 
    font-size:13px; 
    font-weight:600; 
    cursor:pointer; 
    border:none; 
    background:none; 
    font-family:'Cairo',sans-serif; 
    color:var(--muted); 
    border-bottom:2.5px solid transparent; 
    margin-bottom:-1.5px; 
    transition:all 0.2s; 
}

.pd-tab.active { 
    color:var(--gold-dark); 
    border-bottom-color:var(--gold); 
}

.pd-tab-content { 
    display:none; 
}

.pd-tab-content.active { 
    display:block; 
}

/* ===== FEATURES ===== */
.features { 
    background:linear-gradient(135deg,var(--deep),var(--charcoal)); 
    position:relative; 
    overflow:hidden; 
}

.features::before { 
    content:''; 
    position:absolute; 
    inset:0; 
    background:radial-gradient(ellipse at 30% 50%,rgba(106,191,75,0.1),transparent 60%); 
}

.features-grid { 
    display:grid; 
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); 
    gap:28px; 
    max-width:1200px; 
    margin:0 auto; 
    position:relative; 
    z-index:1; 
}

.feature-card { 
    text-align:center; 
    padding:36px 24px; 
    background:rgba(255,255,255,0.04); 
    border:1px solid rgba(106,191,75,0.15); 
    border-radius:20px; 
    transition:all 0.3s; 
}

.feature-card:hover { 
    background:rgba(106,191,75,0.08); 
    border-color:rgba(106,191,75,0.3); 
    transform:translateY(-4px); 
}

.feature-icon { 
    font-size:42px; 
    margin-bottom:16px; 
    display:block; 
}

.feature-card h3 { 
    color:var(--white); 
    font-size:17px; 
    font-weight:700; 
    margin-bottom:10px; 
}

.feature-card p { 
    color:rgba(255,255,255,0.5); 
    font-size:14px; 
    line-height:1.7; 
}

/* ===== ORDER ===== */
.order-section { 
    background:var(--cream); 
}

.order-container { 
    max-width:900px; 
    margin:0 auto; 
    background:var(--white); 
    border-radius:28px; 
    box-shadow:var(--shadow-lg); 
    overflow:hidden; 
}

.order-header { 
    background:linear-gradient(135deg,var(--deep),var(--charcoal)); 
    padding:36px 48px; 
    text-align:center; 
    position:relative; 
    overflow:hidden; 
}

.order-header::before { 
    content:''; 
    position:absolute; 
    inset:0; 
    background:radial-gradient(ellipse at 50% 0%,rgba(106,191,75,0.2),transparent 60%); 
}

.order-header h2 { 
    color:var(--white); 
    font-size:26px; 
    font-weight:900; 
    position:relative; 
}

.order-header p { 
    color:rgba(255,255,255,0.55); 
    margin-top:8px; 
    position:relative; 
    font-size:15px; 
}

.order-form { 
    padding:40px 48px; 
}

/* قسم الكوبون */
.coupon-section { 
    margin-bottom: 30px;
    padding: 20px;
    background: rgba(106,191,75,0.05);
    border-radius: 16px;
    border: 1px dashed rgba(106,191,75,0.3);
}

.coupon-input-group { 
    display: flex; 
    gap: 10px; 
    align-items: center;
}

.coupon-input-group input { 
    flex: 1; 
    padding: 14px 16px; 
    border: 1.5px solid rgba(106,191,75,0.2); 
    border-radius: 12px; 
    font-family: 'Cairo', sans-serif; 
    font-size: 14px;
    transition: all 0.2s;
}

.coupon-input-group input:focus { 
    outline: none; 
    border-color: var(--gold); 
    box-shadow: 0 0 0 3px rgba(106,191,75,0.12); 
}

.coupon-input-group button { 
    padding: 14px 28px; 
    background: linear-gradient(135deg, var(--gold), var(--gold-dark)); 
    color: var(--deep); 
    border: none; 
    border-radius: 12px; 
    font-weight: 700; 
    font-family: 'Cairo', sans-serif;
    cursor: pointer; 
    transition: all 0.3s; 
    white-space: nowrap;
}

.coupon-input-group button:hover { 
    transform: translateY(-2px); 
    box-shadow: 0 6px 20px rgba(106,191,75,0.4); 
}

.coupon-message { 
    font-size: 13px; 
    margin-top: 10px; 
    padding: 8px 12px; 
    border-radius: 8px; 
    display: none;
}

.coupon-message.show { 
    display: block; 
}

.coupon-message.success { 
    background: rgba(76, 175, 127, 0.1); 
    color: var(--success); 
    border: 1px solid rgba(76, 175, 127, 0.3); 
}

.coupon-message.error { 
    background: rgba(224, 82, 82, 0.1); 
    color: var(--error); 
    border: 1px solid rgba(224, 82, 82, 0.3); 
}

.form-grid { 
    display:grid; 
    grid-template-columns:1fr 1fr; 
    gap:20px; 
}

.form-full { 
    grid-column:1/-1; 
}

.form-group { 
    display:flex; 
    flex-direction:column; 
    gap:8px; 
}

.form-group label { 
    font-size:14px; 
    font-weight:600; 
    color:var(--charcoal); 
}

.form-group label span { 
    color:var(--error); 
}

.form-control { 
    padding:12px 16px; 
    border:1.5px solid rgba(106,191,75,0.2); 
    border-radius:12px; 
    font-family:'Cairo',sans-serif; 
    font-size:14px; 
    color:var(--charcoal); 
    background:var(--cream); 
    transition:all 0.2s; 
    outline:none; 
    appearance:none; 
}

.form-control:focus { 
    border-color:var(--gold); 
    background:var(--white); 
    box-shadow:0 0 0 3px rgba(106,191,75,0.12); 
}

select.form-control { 
    cursor:pointer; 
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23c9a84c' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); 
    background-repeat:no-repeat; 
    background-position:left 14px center; 
    padding-left:36px; 
}

.form-control::placeholder { 
    color:var(--muted); 
}

textarea.form-control { 
    resize:vertical; 
    min-height:100px; 
}

.cart-preview { 
    background:rgba(106,191,75,0.06); 
    border:1px solid rgba(106,191,75,0.2); 
    border-radius:16px; 
    padding:20px; 
    margin-bottom:24px; 
}

.cart-preview h4 { 
    font-size:15px; 
    font-weight:700; 
    margin-bottom:14px; 
    color:var(--deep); 
}

.cart-item { 
    display:flex; 
    align-items:center; 
    justify-content:space-between; 
    padding:10px 0; 
    border-bottom:1px solid rgba(106,191,75,0.15); 
    gap:12px; 
}

.cart-item:last-child { 
    border-bottom:none; 
}

.cart-item-info { 
    display:flex; 
    align-items:center; 
    gap:10px; 
}

.cart-item-emoji { 
    font-size:22px; 
}

.cart-item-name { 
    font-size:14px; 
    font-weight:600; 
    color:var(--deep); 
}

.cart-item-qty { 
    font-size:12px; 
    color:var(--muted); 
}

.cart-item-price { 
    font-weight:700; 
    color:var(--gold-dark); 
    font-size:14px; 
}

.cart-item-remove { 
    background:none; 
    border:none; 
    cursor:pointer; 
    color:var(--error); 
    font-size:16px; 
}

.cart-total { 
    display:flex; 
    justify-content:space-between; 
    align-items:center; 
    padding-top:14px; 
    border-top:2px solid rgba(106,191,75,0.2); 
    font-weight:700; 
    font-size:17px; 
    color:var(--deep); 
}

.cart-total .total-price { 
    color:var(--gold-dark); 
    font-size:20px; 
}

.empty-cart { 
    text-align:center; 
    padding:20px; 
    color:var(--muted); 
    font-size:14px; 
}

.submit-order-btn { 
    width:100%; 
    padding:16px; 
    background:linear-gradient(135deg,var(--gold),var(--gold-dark)); 
    color:var(--deep); 
    border:none; 
    border-radius:14px; 
    font-size:17px; 
    font-weight:900; 
    cursor:pointer; 
    transition:all 0.3s; 
    font-family:'Cairo',sans-serif; 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    gap:10px; 
    box-shadow:0 6px 24px rgba(106,191,75,0.3); 
}

.submit-order-btn:hover { 
    transform:translateY(-3px); 
    box-shadow:0 12px 36px rgba(106,191,75,0.45); 
}

.whatsapp-btn { 
    width:100%; 
    padding:14px; 
    background:linear-gradient(135deg,#25D366,#128C7E); 
    color:var(--white); 
    border:none; 
    border-radius:14px; 
    font-size:16px; 
    font-weight:700; 
    cursor:pointer; 
    transition:all 0.3s; 
    font-family:'Cairo',sans-serif; 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    gap:10px; 
    margin-top:12px; 
    box-shadow:0 6px 20px rgba(37,211,102,0.25); 
}

.whatsapp-btn:hover { 
    transform:translateY(-2px); 
    box-shadow:0 10px 30px rgba(37,211,102,0.4); 
}

/* ===== TESTIMONIALS ===== */
.testimonials { 
    background:var(--deep); 
    overflow:hidden; 
}

.testimonials-track { 
    display:flex; 
    gap:24px; 
    animation:scrollTrack 35s linear infinite; 
    width:max-content; 
}

@keyframes scrollTrack { 
    from{transform:translateX(0)} 
    to{transform:translateX(-50%)} 
}

.testimonials-track:hover { 
    animation-play-state:paused; 
}

.testimonial-card { 
    width:320px; 
    flex-shrink:0; 
    background:rgba(255,255,255,0.05); 
    border:1px solid rgba(106,191,75,0.2); 
    border-radius:20px; 
    padding:28px; 
}

.testimonial-stars { 
    color:var(--gold); 
    font-size:14px; 
    margin-bottom:14px; 
}

.testimonial-text { 
    color:rgba(255,255,255,0.75); 
    font-size:14px; 
    line-height:1.8; 
    margin-bottom:20px; 
    font-style:italic; 
}

.testimonial-author { 
    display:flex; 
    align-items:center; 
    gap:12px; 
}

.author-avatar { 
    width:44px; 
    height:44px; 
    border-radius:50%; 
    background:linear-gradient(135deg,var(--gold),#d4a5b5); 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    font-size:18px; 
    font-weight:700; 
    color:var(--deep); 
    flex-shrink:0; 
}

.author-name { 
    color:var(--white); 
    font-weight:700; 
    font-size:14px; 
}

.author-location { 
    color:var(--gold); 
    font-size:12px; 
    margin-top:2px; 
}

.author-type { 
    color:rgba(255,255,255,0.4); 
    font-size:11px; 
}

/* ===== SHIPPING ===== */
.shipping { 
    background:linear-gradient(135deg,#f8f4ee,#f0ebe2); 
    text-align:center; 
}

.countries-grid { 
    display:flex; 
    flex-wrap:wrap; 
    gap:12px; 
    justify-content:center; 
    max-width:900px; 
    margin:0 auto; 
}

.country-chip { 
    display:flex; 
    align-items:center; 
    gap:8px; 
    background:#ffffff; 
    border:1.5px solid rgba(45,122,58,0.2); 
    padding:10px 20px; 
    border-radius:50px; 
    font-size:13px; 
    font-weight:600; 
    color:#1a4a2e; 
    box-shadow:0 2px 10px rgba(0,0,0,0.07); 
    transition:all 0.2s; 
}

.country-chip:hover { 
    border-color:#6abf4b; 
    color:#2d7a3a; 
    background:#f0faf3;
    transform:translateY(-2px); 
    box-shadow:0 6px 16px rgba(106,191,75,0.2); 
}

.country-flag { 
    font-size:22px;
    line-height:1;
}

/* ===== FLOATING WA ===== */
.float-wa { 
    position:fixed; 
    bottom:28px; 
    left:28px; 
    z-index:999; 
    width:58px; 
    height:58px; 
    background:linear-gradient(135deg,#25D366,#128C7E); 
    border-radius:50%; 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    font-size:28px; 
    box-shadow:0 6px 24px rgba(37,211,102,0.45); 
    cursor:pointer; 
    animation:pulseWA 2s infinite; 
    text-decoration:none; 
    transition:transform 0.3s; 
}

.float-wa:hover { 
    transform:scale(1.1); 
}

@keyframes pulseWA { 
    0%,100%{box-shadow:0 6px 24px rgba(37,211,102,0.45)} 
    50%{box-shadow:0 6px 40px rgba(37,211,102,0.7)} 
}

/* ===== CART SIDEBAR ===== */
.cart-overlay { 
    position:fixed; 
    inset:0; 
    background:rgba(0,0,0,0.6); 
    z-index:2000; 
    opacity:0; 
    pointer-events:none; 
    transition:opacity 0.3s; 
}

.cart-overlay.open { 
    opacity:1; 
    pointer-events:all; 
}

.cart-sidebar { 
    position:fixed; 
    top:0; 
    right:-420px; 
    width:400px; 
    height:100%; 
    background:var(--white); 
    z-index:2001; 
    transition:right 0.4s cubic-bezier(0.16,1,0.3,1); 
    display:flex; 
    flex-direction:column; 
}

.cart-sidebar.open { 
    right:0; 
}

.cart-sidebar-header { 
    padding:24px; 
    background:var(--deep); 
    display:flex; 
    align-items:center; 
    justify-content:space-between; 
}

.cart-sidebar-header h3 { 
    color:var(--white); 
    font-size:18px; 
    font-weight:700; 
}

.close-cart { 
    background:none; 
    border:none; 
    color:rgba(255,255,255,0.6); 
    font-size:22px; 
    cursor:pointer; 
    width:36px; 
    height:36px; 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    border-radius:50%; 
    transition:all 0.2s; 
}

.close-cart:hover { 
    background:rgba(255,255,255,0.1); 
    color:var(--white); 
}

.cart-sidebar-items { 
    flex:1; 
    overflow-y:auto; 
    padding:20px; 
}

.cart-sidebar-empty { 
    text-align:center; 
    padding:60px 20px; 
    color:var(--muted); 
}

.cart-sidebar-empty .empty-icon { 
    font-size:64px; 
    margin-bottom:16px; 
}

.cart-sidebar-empty p { 
    font-size:16px; 
}

.cart-sidebar-item { 
    display:flex; 
    gap:14px; 
    padding:16px 0; 
    border-bottom:1px solid rgba(106,191,75,0.1); 
}

.sidebar-item-img { 
    width:60px; 
    height:60px; 
    border-radius:12px; 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    font-size:28px; 
    flex-shrink:0; 
}

.sidebar-item-details { 
    flex:1; 
}

.sidebar-item-name { 
    font-size:14px; 
    font-weight:700; 
    color:var(--deep); 
    margin-bottom:4px; 
}

.sidebar-item-price { 
    font-size:14px; 
    color:var(--gold-dark); 
    font-weight:700; 
}

.qty-controls { 
    display:flex; 
    align-items:center; 
    gap:8px; 
    margin-top:8px; 
}

.qty-btn { 
    width:26px; 
    height:26px; 
    border-radius:8px; 
    border:1px solid rgba(106,191,75,0.3); 
    background:none; 
    cursor:pointer; 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    font-size:14px; 
    transition:all 0.2s; 
    color:var(--charcoal); 
}

.qty-btn:hover { 
    background:var(--gold); 
    border-color:var(--gold); 
    color:var(--deep); 
}

.qty-num { 
    font-size:14px; 
    font-weight:700; 
    color:var(--deep); 
    min-width:20px; 
    text-align:center; 
}

.sidebar-remove { 
    background:none; 
    border:none; 
    color:#ccc; 
    cursor:pointer; 
    font-size:18px; 
    transition:color 0.2s; 
    align-self:flex-start; 
}

.sidebar-remove:hover { 
    color:var(--error); 
}

.cart-sidebar-footer { 
    padding:20px; 
    border-top:1px solid rgba(106,191,75,0.1); 
    background:#fafaf8; 
}

.sidebar-total { 
    display:flex; 
    justify-content:space-between; 
    font-size:18px; 
    font-weight:900; 
    color:var(--deep); 
    margin-bottom:16px; 
}

.sidebar-total span:last-child { 
    color:var(--gold-dark); 
}

.checkout-btn { 
    width:100%; 
    padding:14px; 
    background:linear-gradient(135deg,var(--gold),var(--gold-dark)); 
    color:var(--deep); 
    border:none; 
    border-radius:12px; 
    font-size:15px; 
    font-weight:700; 
    cursor:pointer; 
    font-family:'Cairo',sans-serif; 
    transition:all 0.3s; 
}

.checkout-btn:hover { 
    box-shadow:0 8px 24px rgba(106,191,75,0.4); 
}

/* ===== TOAST ===== */
.toast { 
    position:fixed; 
    bottom:28px; 
    right:28px; 
    background:var(--deep); 
    color:var(--white); 
    padding:14px 22px; 
    border-radius:16px; 
    font-size:14px; 
    font-weight:600; 
    box-shadow:var(--shadow-lg); 
    z-index:9999; 
    transform:translateY(80px); 
    opacity:0; 
    transition:all 0.4s cubic-bezier(0.16,1,0.3,1); 
    display:flex; 
    align-items:center; 
    gap:10px; 
    border:1px solid rgba(106,191,75,0.3); 
    max-width:300px; 
}

.toast.show { 
    transform:translateY(0); 
    opacity:1; 
}

/* ===== SUCCESS MODAL ===== */
.modal-overlay { 
    position:fixed; 
    inset:0; 
    background:rgba(0,0,0,0.7); 
    z-index:5000; 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    opacity:0; 
    pointer-events:none; 
    transition:opacity 0.3s; 
}

.modal-overlay.open { 
    opacity:1; 
    pointer-events:all; 
}

.modal { 
    background:var(--white); 
    border-radius:28px; 
    padding:48px; 
    max-width:440px; 
    width:90%; 
    text-align:center; 
    transform:scale(0.85); 
    transition:transform 0.4s cubic-bezier(0.16,1,0.3,1); 
    position:relative; 
}

.modal-overlay.open .modal { 
    transform:scale(1); 
}

.modal-icon { 
    font-size:72px; 
    margin-bottom:20px; 
    display:block; 
}

.modal h3 { 
    font-size:24px; 
    font-weight:900; 
    color:var(--deep); 
    margin-bottom:12px; 
}

.modal p { 
    color:var(--muted); 
    font-size:15px; 
    line-height:1.7; 
    margin-bottom:28px; 
}

.modal-close-btn { 
    position:absolute; 
    top:18px; 
    right:18px; 
    background:none; 
    border:none; 
    color:var(--muted); 
    font-size:22px; 
    cursor:pointer; 
}

/* ===== FOOTER ===== */
footer { 
    background:var(--deep); 
    border-top:1px solid rgba(106,191,75,0.15); 
    padding:60px 5% 28px; 
}

.footer-grid { 
    display:grid; 
    grid-template-columns:1.5fr 1fr 1fr 1fr; 
    gap:48px; 
    max-width:1200px; 
    margin:0 auto; 
    padding-bottom:48px; 
    border-bottom:1px solid rgba(106,191,75,0.1); 
}

.footer-brand .logo { 
    font-size:22px; 
    display:inline-flex; 
    margin-bottom:16px; 
}

.footer-brand p { 
    color:rgba(255,255,255,0.45); 
    font-size:14px; 
    line-height:1.8; 
    margin-bottom:20px; 
}

.social-links { 
    display:flex; 
    gap:10px; 
}

.social-link { 
    width:36px; 
    height:36px; 
    background:rgba(106,191,75,0.1); 
    border:1px solid rgba(106,191,75,0.2); 
    border-radius:10px; 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    color:var(--gold); 
    font-size:16px; 
    text-decoration:none; 
    transition:all 0.2s; 
}

.social-link:hover { 
    background:var(--gold); 
    color:var(--deep); 
}

.footer-col h4 { 
    color:var(--white); 
    font-size:15px; 
    font-weight:700; 
    margin-bottom:20px; 
}

.footer-links { 
    list-style:none; 
    display:flex; 
    flex-direction:column; 
    gap:10px; 
}

.footer-links a { 
    color:rgba(255,255,255,0.45); 
    text-decoration:none; 
    font-size:14px; 
    transition:color 0.2s; 
}

.footer-links a:hover { 
    color:var(--gold); 
}

.footer-contact { 
    display:flex; 
    flex-direction:column; 
    gap:12px; 
}

.contact-item { 
    display:flex; 
    gap:10px; 
    align-items:flex-start; 
}

.contact-item .icon { 
    color:var(--gold); 
    font-size:16px; 
    flex-shrink:0; 
    margin-top:2px; 
}

.contact-item p { 
    color:rgba(255,255,255,0.45); 
    font-size:13px; 
    line-height:1.6; 
}

.footer-bottom { 
    max-width:1200px; 
    margin:24px auto 0; 
    display:flex; 
    align-items:center; 
    justify-content:space-between; 
    flex-wrap:wrap; 
    gap:12px; 
}

.footer-bottom p { 
    color:rgba(255,255,255,0.3); 
    font-size:13px; 
}

.payment-icons { 
    display:flex; 
    gap:8px; 
}

.payment-icon { 
    background:rgba(255,255,255,0.06); 
    border:1px solid rgba(255,255,255,0.08); 
    padding:4px 10px; 
    border-radius:6px; 
    font-size:11px; 
    color:rgba(255,255,255,0.4); 
    font-weight:600; 
}

/* ===== MOBILE MENU ===== */
.mobile-menu { 
    position:fixed; 
    top:0; 
    right:-100%; 
    width:80%; 
    max-width:320px; 
    height:100%; 
    background:var(--deep); 
    z-index:1500; 
    padding:90px 28px 28px; 
    transition:right 0.4s cubic-bezier(0.16,1,0.3,1); 
    border-left:1px solid rgba(106,191,75,0.15); 
}

.mobile-menu.open { 
    right:0; 
}

.mobile-menu .nav-links { 
    display:flex; 
    flex-direction:column; 
    gap:4px; 
}

.mobile-menu .nav-links a { 
    padding:14px 0; 
    font-size:16px; 
    border-bottom:1px solid rgba(106,191,75,0.08); 
}

/* ===== RESPONSIVE ===== */
@media(max-width:900px){
    .hero-content{grid-template-columns:1fr;gap:40px;}
    .hero-visual{order:-1;}
    .form-grid{grid-template-columns:1fr;}
    .footer-grid{grid-template-columns:1fr 1fr;gap:32px;}
    .nav-links{display:none;}
    .hamburger{display:flex;}
    .pd-modal{grid-template-columns:1fr;}
    .pd-gallery{border-radius:28px 28px 0 0;}
}

@media(max-width:600px){
    section{padding:60px 5%;}
    .order-form{padding:24px;}
    .order-header{padding:28px 24px;}
    .footer-grid{grid-template-columns:1fr;}
    .cart-sidebar{width:100%;right:-100%;}
    .target-cards{grid-template-columns:1fr 1fr;}
    .coupon-input-group{flex-direction:column;}
    .coupon-input-group button{width:100%;}
}