:root {
      --bg:          oklch(0.985 0.012 8);
      --fg:          oklch(0.32  0.09  12);
      --card:        oklch(1     0     0);
      --primary:     oklch(0.62  0.16  8);
      --primary-fg:  oklch(0.99  0.005 0);
      --secondary:   oklch(0.92  0.04  8);
      --muted:       oklch(0.96  0.018 8);
      --muted-fg:    oklch(0.5   0.05  12);
      --border:      oklch(0.9   0.03  8);
      --grad-hero:   linear-gradient(135deg, oklch(0.985 0.012 8), oklch(0.92 0.06 8) 60%, oklch(0.78 0.12 6));
      --grad-soft:   linear-gradient(180deg, oklch(0.985 0.012 8), oklch(0.96 0.03 8));
      --shadow-soft: 0 10px 40px -15px oklch(0.62 0.16 8 / 0.25);
      --shadow-luxe: 0 30px 60px -20px oklch(0.55 0.18 10 / 0.35);
      --display:     "Abril Fatface", serif;
      --body-font:   "Cabin", system-ui, sans-serif;
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body { font-family: var(--body-font); background: var(--bg); color: var(--fg); -webkit-font-smoothing: antialiased; }
    a { text-decoration: none; color: inherit; }
    img { display: block; max-width: 100%; }
    button { cursor: pointer; font-family: inherit; }
    input  { font-family: inherit; }
    h1,h2,h3 { font-family: var(--display); letter-spacing: 0.005em; }

    
    .logo-icon img {
 border-radius: 50%; ;
  object-fit: cover;
}

    @keyframes fadeUp {
      from { opacity:0; transform:translateY(22px); }
      to   { opacity:1; transform:translateY(0); }
    }
    @keyframes float {
      0%,100% { transform:translateY(0); }
      50%      { transform:translateY(-10px); }
    }
    .fade-up  { animation: fadeUp 0.7s ease-out both; }
    .fu1 { animation-delay:.08s; }
    .fu2 { animation-delay:.16s; }
    .fu3 { animation-delay:.24s; }

    .wrap { max-width:1280px; margin:0 auto; padding:0 1.5rem; }

    /* ── Navbar ── */
    .navbar {
      position:sticky; top:0; z-index:40;
      backdrop-filter:blur(20px);
      background:oklch(0.985 0.012 8 / 0.85);
      border-bottom:1px solid var(--border);
    }
    .nav-inner {
      display:flex; align-items:center; justify-content:space-between;
      gap:1rem; height:5rem;
    }
    .logo { display:flex; align-items:center; gap:.6rem; cursor:pointer; }
    .logo-icon {
      width:2.25rem; height:2.25rem; border-radius:50%;
      background:var(--grad-hero); display:grid; place-items:center;
      box-shadow:var(--shadow-soft); flex-shrink:0;
    }
    .logo-name { font-family:var(--display); font-size:1.5rem; }
    .nav-links { display:flex; align-items:center; gap:2rem; font-size:.875rem; }
    .nav-links a { transition:color .2s; cursor:pointer; }
    .nav-links a:hover, .nav-links a.active { color:var(--primary); }
    .nav-search {
      display:flex; align-items:center; gap:.5rem;
      background:oklch(0.92 0.04 8 / .6);
      border-radius:999px; padding:.5rem 1rem; width:16rem;
    }
    .nav-search input { background:transparent; border:none; outline:none; font-size:.875rem; width:100%; }
    .nav-search input::placeholder { color:var(--muted-fg); }
    .hamburger { display:none; background:none; border:none; padding:.5rem; border-radius:999px; transition:background .2s; }
    .hamburger:hover { background:var(--secondary); }
    .mobile-menu { display:none; border-top:1px solid var(--border); background:oklch(0.985 0.012 8 / .97); backdrop-filter:blur(20px); }
    .mobile-menu.open { display:block; }
    .mobile-menu nav { display:flex; flex-direction:column; gap:.75rem; padding:1rem 1.5rem; font-size:.9rem; }
    .mobile-menu nav a { cursor:pointer; transition:color .2s; }
    .mobile-menu nav a:hover { color:var(--primary); }
    .mob-search { display:flex; align-items:center; gap:.5rem; background:oklch(0.92 0.04 8 / .6); border-radius:999px; padding:.5rem 1rem; margin-top:.5rem; }
    .mob-search input { background:transparent; border:none; outline:none; font-size:.875rem; width:100%; }

    /* ── Hero ── */
    .hero { position:relative; overflow:hidden; }
    .hero-overlay { position:absolute; inset:0; background:var(--grad-hero); opacity:.92; }
    .hero-grid {
      position:relative; display:grid; gap:3rem; align-items:center;
      padding:5rem 1.5rem; max-width:1280px; margin:0 auto;
    }
    .hero-badge { display:inline-flex; align-items:center; gap:.5rem; font-size:.7rem; text-transform:uppercase; letter-spacing:.3em; color:var(--primary); }
    .hero-h1 { font-size:clamp(2.8rem,7vw,4.5rem); line-height:1.05; margin-top:1rem; }
    .hero-h1 em { display:block; font-style:italic; color:var(--primary); }
    .hero-desc { margin-top:1.5rem; font-size:1.05rem; color:var(--muted-fg); max-width:28rem; }
    .hero-btns { margin-top:2rem; display:flex; flex-wrap:wrap; gap:.75rem; }
    .btn-primary {
      display:inline-flex; align-items:center; gap:.5rem; border-radius:999px;
      background:var(--primary); color:var(--primary-fg);
      padding:.875rem 1.75rem; font-size:.875rem; font-weight:600; border:none;
      box-shadow:var(--shadow-luxe); transition:transform .2s; cursor:pointer;
    }
    .btn-primary:hover { transform:scale(1.02); }
    .btn-ghost {
      display:inline-flex; align-items:center; gap:.5rem; border-radius:999px;
      background:var(--card); border:1px solid var(--border);
      padding:.875rem 1.75rem; font-size:.875rem; font-weight:500; transition:background .2s; cursor:pointer;
    }
    .btn-ghost:hover { background:var(--secondary); }
    .hero-img-wrap { position:relative; }
    .hero-img-glow { position:absolute; inset:-1.5rem; background:oklch(1 0 0 / .3); border-radius:2.5rem; filter:blur(2rem); }
    .hero-img { position:relative; border-radius:2rem; box-shadow:var(--shadow-luxe); width:100%; aspect-ratio:4/3; object-fit:cover; }

    /* ── Perks ── */
    .perks { border-top:1px solid oklch(0.9 0.03 8 / .6); border-bottom:1px solid oklch(0.9 0.03 8 / .6); background:oklch(1 0 0 / .4); }
    .perks-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; padding:1.5rem; max-width:1280px; margin:0 auto; }
    .perk { display:flex; align-items:center; gap:.75rem; justify-content:center; font-size:.875rem; color:var(--muted-fg); }
    .perk svg { width:1rem; height:1rem; color:var(--primary); flex-shrink:0; }

    /* ── Section Headers ── */
    .section-tag { font-size:.7rem; text-transform:uppercase; letter-spacing:.3em; color:var(--primary); }
    .section-h2 { font-size:clamp(2rem,4vw,3rem); margin-top:.5rem; }

    /* ── Categories ── */
    .categories { padding:5rem 0; }
    .section-header { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:2.5rem; }
    .cat-grid { display:grid; gap:1.25rem; }
    .cat-card { position:relative; aspect-ratio:4/5; border-radius:1.5rem; overflow:hidden; display:block; cursor:pointer; }
    .cat-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .7s; }
    .cat-card:hover img { transform:scale(1.1); }
    .cat-overlay { position:absolute; inset:0; background:linear-gradient(to top, oklch(0.32 0.09 12 / .65), oklch(0.32 0.09 12 / .1) 50%, transparent); }
    .cat-text { position:absolute; bottom:0; padding:1.5rem; color:var(--primary-fg); }
    .cat-label { font-size:.68rem; text-transform:uppercase; letter-spacing:.25em; opacity:.8; }
    .cat-name { font-family:var(--display); font-size:1.75rem; margin-top:.25rem; }
    .cat-discover { margin-top:.75rem; display:inline-flex; align-items:center; gap:.25rem; font-size:.875rem; }
    .cat-discover svg { width:1rem; height:1rem; transition:transform .2s; }
    .cat-card:hover .cat-discover svg { transform:translateX(4px); }

    /* ── Products ── */
    .featured { padding-bottom:6rem; }
    .products-header { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:2.5rem; }
    .products-header a { font-size:.875rem; display:flex; align-items:center; gap:.25rem; transition:color .2s; cursor:pointer; }
    .products-header a:hover { color:var(--primary); }
    .products-header a svg { width:1rem; height:1rem; }
    .prod-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; }
    .prod-card {
      display:block; cursor:pointer; border-radius:1.5rem; overflow:hidden;
      background:var(--card); border:1px solid oklch(0.9 0.03 8 / .5);
      box-shadow:var(--shadow-soft);
      transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s;
    }
    .prod-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-luxe); }
    .prod-img { aspect-ratio:1; overflow:hidden; background:var(--muted); }
    .prod-img img { width:100%; height:100%; object-fit:cover; transition:transform .7s; }
    .prod-card:hover .prod-img img { transform:scale(1.05); }
    .prod-info { padding:1.25rem; }
    .prod-cat { font-size:.68rem; text-transform:uppercase; letter-spacing:.2em; color:var(--muted-fg); }
    .prod-name { font-family:var(--display); font-size:1.2rem; margin-top:.25rem; }
    .prod-price-row { display:flex; align-items:baseline; justify-content:space-between; margin-top:.75rem; }
    .prod-price-row span:first-child { font-size:.875rem; color:var(--muted-fg); }
    .prod-price { font-weight:600; color:var(--primary); }

    /* ── Shop Page ── */
    .shop-section { padding:3.5rem 0; }
    .shop-hero { text-align:center; margin-bottom:2.5rem; }
    .shop-hero p { margin-top:.75rem; color:var(--muted-fg); max-width:36rem; margin-left:auto; margin-right:auto; }
    .shop-controls { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:2.5rem; }
    .filter-pills { display:flex; flex-wrap:wrap; gap:.5rem; }
    .pill { padding:.5rem 1.25rem; border-radius:999px; font-size:.875rem; border:1px solid var(--border); background:var(--card); cursor:pointer; transition:all .2s; }
    .pill:hover { background:var(--secondary); }
    .pill.active { background:var(--primary); color:var(--primary-fg); border-color:var(--primary); box-shadow:var(--shadow-soft); }
    .shop-search { display:flex; align-items:center; gap:.5rem; background:oklch(0.92 0.04 8 / .6); border-radius:999px; padding:.5rem 1rem; width:100%; }
    .shop-search input { background:transparent; border:none; outline:none; font-size:.875rem; width:100%; }
    .shop-search input::placeholder { color:var(--muted-fg); }
    .no-results { text-align:center; padding:5rem 0; color:var(--muted-fg); }

    /* ── Product Detail ── */
    .product-detail { padding:2.5rem 0 4rem; }
    .back-link { display:inline-flex; align-items:center; gap:.5rem; font-size:.875rem; color:var(--muted-fg); margin-bottom:2rem; transition:color .2s; cursor:pointer; }
    .back-link:hover { color:var(--primary); }
    .back-link svg { width:1rem; height:1rem; }
    .detail-grid { display:grid; gap:2.5rem; }
    .detail-img-wrap { position:relative; border-radius:2rem; overflow:hidden; background:var(--grad-soft); box-shadow:var(--shadow-luxe); aspect-ratio:1; }
    .detail-img-wrap img { width:100%; height:100%; object-fit:cover; }
    .detail-cat { font-size:.7rem; text-transform:uppercase; letter-spacing:.3em; color:var(--primary); }
    .detail-name { font-size:clamp(2rem,5vw,3rem); margin-top:.5rem; }
    .detail-price-display { margin-top:.5rem; font-size:1.5rem; font-weight:600; color:var(--primary); }
    .detail-desc { margin-top:1.5rem; color:var(--muted-fg); line-height:1.7; }
    .size-label { font-size:.875rem; font-weight:500; margin-bottom:.75rem; display:block; margin-top:2rem; }
    .size-btns { display:flex; gap:.75rem; }
    .size-btn { flex:1; border-radius:1rem; border:1px solid var(--border); background:var(--card); padding:1rem; text-align:center; cursor:pointer; transition:all .2s; }
    .size-btn:hover { background:var(--secondary); }
    .size-btn.active { border-color:var(--primary); background:oklch(0.62 0.16 8 / .1); box-shadow:var(--shadow-soft); }
    .sb-size { font-family:var(--display); font-size:1.25rem; }
    .sb-price { font-size:.75rem; color:var(--muted-fg); margin-top:.25rem; }
    .qty-row { margin-top:2rem; }
    .qty-ctrl { display:inline-flex; align-items:center; border-radius:999px; border:1px solid var(--border); background:var(--card); overflow:hidden; margin-top:.75rem; }
    .qty-btn { background:none; border:none; padding:.75rem 1rem; transition:background .2s; display:flex; align-items:center; }
    .qty-btn:hover { background:var(--secondary); }
    .qty-btn svg { width:1rem; height:1rem; }
    .qty-val { padding:0 1.5rem; font-weight:600; min-width:3rem; text-align:center; }
    .order-box { margin-top:2.5rem; padding:1.5rem; border-radius:1.5rem; background:var(--grad-soft); border:1px solid oklch(0.9 0.03 8 / .6); box-shadow:var(--shadow-soft); }
    .order-total { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:1rem; }
    .order-total span:first-child { font-size:.875rem; color:var(--muted-fg); }
    .order-total-price { font-family:var(--display); font-size:2rem; color:var(--primary); }
    .wa-btn { display:flex; align-items:center; justify-content:center; gap:.5rem; width:100%; border-radius:999px; background:#25D366; color:#fff; padding:1rem 2rem; font-size:.875rem; font-weight:600; box-shadow:var(--shadow-luxe); transition:transform .2s; border:none; text-decoration:none; }
    .wa-btn:hover { transform:scale(1.01); }
    .wa-btn svg { width:1rem; height:1rem; }
    .wa-note { margin-top:.75rem; font-size:.75rem; color:var(--muted-fg); text-align:center; display:flex; align-items:center; justify-content:center; gap:.25rem; }

    /* ── Footer ── */
    .footer { margin-top:6rem; border-top:1px solid var(--border); background:var(--grad-soft); }
    .footer-grid { display:grid; gap:2.5rem; padding:3.5rem 0; }
    .footer-brand p { margin-top:1rem; font-size:.875rem; color:var(--muted-fg); max-width:22rem; }
    .footer-col h4 { font-family:var(--display); font-size:1.1rem; margin-bottom:.75rem; }
    .footer-col ul { list-style:none; display:flex; flex-direction:column; gap:.5rem; }
    .footer-col ul a { font-size:.875rem; color:var(--muted-fg); transition:color .2s; cursor:pointer; }
    .footer-col ul a:hover { color:var(--primary); }
    .social-row { display:flex; gap:.75rem; }
    .social-btn { width:2.5rem; height:2.5rem; border-radius:50%; background:var(--card); border:1px solid oklch(0.9 0.03 8 / .6); display:grid; place-items:center; box-shadow:var(--shadow-soft); transition:all .2s; text-decoration:none; color:inherit; }
    .social-btn:hover { background:var(--primary); color:var(--primary-fg); transform:scale(1.1); }
    .social-btn svg { width:1rem; height:1rem; }
 
  .footer-copy {
  width: 100%;
  text-align: center;   /* يخليه في النص */
  padding: 20px 0 10px;
  margin-top: auto;     /* ينزّله لتحت جوه الفوتر */
  color: var(--muted-fg);
  font-size: 14px;
} 
.social-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.social-text {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: #444;
  text-align: left;
}

    .social-bar {
  display: flex;
  gap: 10px;
  align-items: center;
}

.social {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  color: #000;
  font-size: 18px;
  text-decoration: none;
  transition: 0.3s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
 

/* Hover effect */
.social:hover {
  transform: translateY(-4px) scale(1.1);
}

/* ألوان كل منصة */
.instagram { color: #E1306C; }
.facebook  { color: #1877F2; }
.tiktok    { color: #000; }
    /* ── WhatsApp FAB ── */
    .wa-fab { position:fixed; bottom:1.5rem; right:1.5rem; z-index:50; width:3.5rem; height:3.5rem; border-radius:50%; background:#25D366; color:#fff; display:grid; place-items:center; box-shadow:var(--shadow-luxe); animation:float 6s ease-in-out infinite; text-decoration:none; transition:transform .2s; }
    .wa-fab:hover { transform:scale(1.1) !important; animation-play-state:paused; }
    .wa-fab svg { width:1.5rem; height:1.5rem; }

    /* ── Pages ── */
    .page { display:none; }
    .page.active { display:block; }

    /* ── SVG inline helpers ── */
    svg { vertical-align:middle; }

    /* ── Responsive ── */
    @media (min-width:768px) {
      .nav-links, .nav-search { display:flex !important; }
      .hamburger { display:none !important; }
      .perks-grid { grid-template-columns:repeat(4,1fr); }
      .footer-grid { grid-template-columns:2fr 1fr 1fr; }
      .shop-search { width:18rem; }
      .detail-grid { grid-template-columns:1fr 1fr; }
    }
    @media (max-width:767px) {
      .nav-links, .nav-search { display:none; }
      .hamburger { display:flex !important; align-items:center; }
      .hero-grid { padding:3rem 1.5rem; }
    }
    @media (min-width:1024px) {
      .hero-grid { grid-template-columns:1fr 1fr; }
      .prod-grid { grid-template-columns:repeat(4,1fr); }
      .cat-grid { grid-template-columns:repeat(3,1fr); }
    }