/**
 * ثيمات حسب فئة المنتج — كل ثيم يغيّر الخطوط، الأشكال، الظلال، سلوك الهيدر/التنقل/البطاقات
 * المعرفات: tech-lab, fashion-runway, gourmet-market, luxury-atelier, kids-playground,
 *           home-studio, sport-pulse, beauty-bloom, chrono-vault, coastal-tide
 */

:root {
  --shop-radius: 14px;
  --shop-shadow: 0 14px 44px rgba(0, 0, 0, 0.2);
  --shop-bg: #070b12;
  --shop-fg: #e8edf7;
  --shop-header-bg: #0a0f18;
  --shop-nav-bg: #0d121c;
  --shop-card: #111827;
  --shop-border: #243044;
  --shop-accent: #22d3ee;
  --shop-accent2: #a855f7;
  --shop-link: #7dd3fc;
  --shop-input-bg: #0c101a;
  --shop-muted: rgba(232, 237, 247, 0.62);
  --shop-font-display: "Syne", "Tajawal", system-ui, sans-serif;
  --shop-font-body: "Outfit", "Tajawal", system-ui, sans-serif;
  --shop-title-gradient: linear-gradient(135deg, var(--shop-accent), var(--shop-accent2));
  --shop-nav-style: underline;
  --shop-card-hover-y: -5px;
}

html[dir="ltr"] :root {
  --shop-font-body: "Outfit", "DM Sans", system-ui, sans-serif;
}

/* ——— 1 · إلكترونيات وتقنية — شبكة داكنة ونيون ——— */
html[data-theme="tech-lab"] {
  --shop-radius: 6px;
  --shop-shadow: 0 0 0 1px rgba(34, 211, 238, 0.12), 0 24px 64px rgba(0, 0, 0, 0.55);
  --shop-bg: #05080f;
  --shop-fg: #e6faff;
  --shop-header-bg: linear-gradient(180deg, #0a1628 0%, #060a12 100%);
  --shop-nav-bg: #060910;
  --shop-card: #0c1220;
  --shop-border: #1e3a5f;
  --shop-accent: #22d3ee;
  --shop-accent2: #e879f9;
  --shop-link: #67e8f9;
  --shop-input-bg: #080c14;
  --shop-muted: rgba(180, 230, 255, 0.55);
  --shop-font-display: "Syne", "Tajawal", sans-serif;
  --shop-font-body: "Outfit", "Tajawal", sans-serif;
  --shop-title-gradient: linear-gradient(90deg, #22d3ee, #c084fc 55%, #f472b6);
  --shop-card-hover-y: -5px;
}
html[data-theme="tech-lab"] .shop-body {
  background-color: var(--shop-bg);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -20%, color-mix(in srgb, var(--shop-accent) 14%, transparent), transparent),
    radial-gradient(ellipse 60% 40% at 100% 50%, color-mix(in srgb, var(--shop-accent2) 10%, transparent), transparent);
}
html[data-theme="tech-lab"] .shop-header {
  border-bottom: 1px solid color-mix(in srgb, var(--shop-accent) 35%, transparent);
  backdrop-filter: blur(12px);
}
html[data-theme="tech-lab"] .shop-title {
  letter-spacing: -0.03em;
  font-weight: 800;
}
html[data-theme="tech-lab"] .shop-nav-inner {
  gap: 4px 12px;
}
html[data-theme="tech-lab"] .shop-nav-link {
  border-radius: 4px;
  padding: 8px 14px;
  border-bottom: none;
  background: transparent;
}
html[data-theme="tech-lab"] .shop-nav-link:hover {
  background: color-mix(in srgb, var(--shop-accent) 18%, transparent);
  box-shadow: 0 0 24px color-mix(in srgb, var(--shop-accent) 25%, transparent);
}
html[data-theme="tech-lab"] .hero-banner {
  border-radius: var(--shop-radius);
  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0c4a6e 100%);
  border: 1px solid color-mix(in srgb, var(--shop-accent) 40%, var(--shop-border));
  box-shadow: var(--shop-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
html[data-theme="tech-lab"] .card-product {
  border-radius: var(--shop-radius);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
}
html[data-theme="tech-lab"] .btn-primary {
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.82rem;
}
html[data-theme="tech-lab"] .header-search {
  border-radius: 6px;
}

/* ——— 2 · أزياء وموضة — تحريري، سيريف، مساحات واسعة ——— */
html[data-theme="fashion-runway"] {
  --shop-radius: 2px;
  --shop-shadow: 0 20px 50px rgba(15, 10, 8, 0.08);
  --shop-bg: #faf9f7;
  --shop-fg: #1a1410;
  --shop-header-bg: #ffffff;
  --shop-nav-bg: #f5f3f0;
  --shop-card: #ffffff;
  --shop-border: #e7e2dc;
  --shop-accent: #1a1410;
  --shop-accent2: #8b7355;
  --shop-link: #3d3428;
  --shop-input-bg: #ffffff;
  --shop-muted: rgba(26, 20, 16, 0.55);
  --shop-font-display: "Fraunces", "Tajawal", serif;
  --shop-font-body: "Outfit", "Tajawal", sans-serif;
  --shop-title-gradient: linear-gradient(180deg, #1a1410, #4a3f35);
  --shop-card-hover-y: -6px;
}
html[data-theme="fashion-runway"] .shop-title {
  font-weight: 600;
  letter-spacing: 0.02em;
  font-style: italic;
  -webkit-text-fill-color: var(--shop-fg);
  background: none;
  color: var(--shop-fg);
}
html[data-theme="fashion-runway"] .shop-header {
  border-bottom: 1px solid var(--shop-border);
}
html[data-theme="fashion-runway"] .shop-nav-link {
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.72rem;
  border-bottom: none;
  padding: 8px 0;
}
html[data-theme="fashion-runway"] .shop-nav-link:hover {
  opacity: 1;
  color: var(--shop-accent);
}
html[data-theme="fashion-runway"] .hero-banner {
  border-radius: 0;
  background: #f0ebe4;
  border: none;
  box-shadow: none;
}
html[data-theme="fashion-runway"] .card-product {
  border-radius: 0;
  box-shadow: none;
  border: 1px solid var(--shop-border);
}
html[data-theme="fashion-runway"] .card-product:hover {
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.1);
}
html[data-theme="fashion-runway"] .section-title {
  font-family: var(--shop-font-display);
  font-weight: 600;
  letter-spacing: 0.04em;
}
html[data-theme="fashion-runway"] .btn-primary {
  border-radius: 0;
  padding: 14px 32px;
}

/* ——— 3 · أغذية ومشروبات — دفء أرضي، أشكال عضوية ——— */
html[data-theme="gourmet-market"] {
  --shop-radius: 28px;
  --shop-shadow: 0 16px 40px rgba(120, 53, 15, 0.12);
  --shop-bg: #fffbf5;
  --shop-fg: #422006;
  --shop-header-bg: linear-gradient(180deg, #fff7ed, #fffbf5);
  --shop-nav-bg: #ffedd5;
  --shop-card: #ffffff;
  --shop-border: #e7d5c4;
  --shop-accent: #c2410c;
  --shop-accent2: #ea580c;
  --shop-link: #9a3412;
  --shop-input-bg: #fff;
  --shop-muted: rgba(66, 32, 6, 0.6);
  --shop-font-display: "Fraunces", "Tajawal", serif;
  --shop-font-body: "Nunito", "Tajawal", sans-serif;
  --shop-title-gradient: linear-gradient(135deg, #c2410c, #ea580c);
  --shop-card-hover-y: -6px;
}
html[data-theme="gourmet-market"] .shop-body {
  background-color: var(--shop-bg);
  background-image: radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--shop-accent) 12%, transparent), transparent 40%);
}
html[data-theme="gourmet-market"] .shop-nav-link {
  border-radius: 999px;
  padding: 8px 16px;
  border-bottom: none;
  background: rgba(255, 255, 255, 0.5);
}
html[data-theme="gourmet-market"] .shop-nav-link:hover {
  background: color-mix(in srgb, var(--shop-accent) 15%, white);
}
html[data-theme="gourmet-market"] .hero-banner {
  border-radius: calc(var(--shop-radius) + 8px);
  background: linear-gradient(145deg, #fff7ed, #ffedd5 45%, #fed7aa);
  border: 2px solid color-mix(in srgb, var(--shop-accent) 25%, transparent);
}
html[data-theme="gourmet-market"] .card-product {
  border-radius: var(--shop-radius);
  overflow: visible;
}
html[data-theme="gourmet-market"] .card-img-wrap {
  border-radius: calc(var(--shop-radius) - 4px) calc(var(--shop-radius) - 4px) 0 0;
}
html[data-theme="gourmet-market"] .pill.accent {
  border-radius: 999px;
}

/* ——— 4 · مجوهرات وفخامة — ذهبي داكن، خطوط رفيعة ——— */
html[data-theme="luxury-atelier"] {
  --shop-radius: 4px;
  --shop-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  --shop-bg: #0a0908;
  --shop-fg: #faf6eb;
  --shop-header-bg: linear-gradient(165deg, #14110d, #0a0908);
  --shop-nav-bg: #0f0d0a;
  --shop-card: #16130f;
  --shop-border: #3d3428;
  --shop-accent: #d4af37;
  --shop-accent2: #f4e4a6;
  --shop-link: #e8d48b;
  --shop-input-bg: #12100c;
  --shop-muted: rgba(250, 246, 235, 0.55);
  --shop-font-display: "Playfair Display", "Tajawal", serif;
  --shop-font-body: "Outfit", "Tajawal", sans-serif;
  --shop-title-gradient: linear-gradient(135deg, #f4e4a6, #d4af37 45%, #b8860b);
  --shop-card-hover-y: -4px;
}
html[data-theme="luxury-atelier"] .shop-header {
  border-bottom: 1px solid color-mix(in srgb, var(--shop-accent) 35%, transparent);
}
html[data-theme="luxury-atelier"] .shop-title {
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 1.1rem;
}
html[data-theme="luxury-atelier"] .shop-nav-link {
  letter-spacing: 0.15em;
  font-size: 0.68rem;
  text-transform: uppercase;
  border-bottom: 1px solid transparent;
  padding-bottom: 10px;
}
html[data-theme="luxury-atelier"] .shop-nav-link:hover {
  border-bottom-color: var(--shop-accent);
}
html[data-theme="luxury-atelier"] .hero-banner {
  background: radial-gradient(ellipse at 30% 0%, rgba(212, 175, 55, 0.15), transparent 50%), #12100c;
  border: 1px solid color-mix(in srgb, var(--shop-accent) 45%, transparent);
  box-shadow: inset 0 0 80px rgba(212, 175, 55, 0.06);
}
html[data-theme="luxury-atelier"] .card-product {
  border: 1px solid color-mix(in srgb, var(--shop-accent) 22%, var(--shop-border));
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
}
html[data-theme="luxury-atelier"] .section-title {
  font-family: var(--shop-font-display);
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* ——— 5 · أطفال وألعاب — مرح، فقاعات، ألوان ——— */
html[data-theme="kids-playground"] {
  --shop-radius: 20px;
  --shop-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shop-bg: #fffbf5;
  --shop-fg: #3b2506;
  --shop-header-bg: #ffffff;
  --shop-nav-bg: #fef7ed;
  --shop-card: #ffffff;
  --shop-border: #fde68a;
  --shop-accent: #db2777;
  --shop-accent2: #7c3aed;
  --shop-link: #be185d;
  --shop-input-bg: #fff;
  --shop-muted: rgba(59, 37, 6, 0.6);
  --shop-font-display: "Nunito", "Tajawal", sans-serif;
  --shop-font-body: "Nunito", "Tajawal", sans-serif;
  --shop-title-gradient: linear-gradient(135deg, #db2777, #7c3aed);
  --shop-card-hover-y: -6px;
}
html[data-theme="kids-playground"] .shop-title {
  font-weight: 900;
  letter-spacing: -0.01em;
}
html[data-theme="kids-playground"] .shop-nav-link {
  border-radius: 999px;
  border-bottom: none;
  padding: 10px 18px;
  background: #fff;
  border: 1.5px solid var(--shop-border);
}
html[data-theme="kids-playground"] .shop-nav-link:hover {
  border-color: var(--shop-accent);
  background: color-mix(in srgb, var(--shop-accent) 8%, #fff);
}
html[data-theme="kids-playground"] .hero-banner {
  background: linear-gradient(135deg, #fef7ed, #fce7f3 50%, #ede9fe);
  border: 2px solid var(--shop-border);
  border-radius: var(--shop-radius);
}
html[data-theme="kids-playground"] .card-product {
  border: 1.5px solid var(--shop-border);
  border-radius: var(--shop-radius);
}
html[data-theme="kids-playground"] .card-product:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(219, 39, 119, 0.12);
}
html[data-theme="kids-playground"] .btn-primary {
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(219, 39, 119, 0.25);
}

/* ——— 6 · ديكور ومنزل — إسكندنافي هادئ ——— */
html[data-theme="home-studio"] {
  --shop-radius: 12px;
  --shop-shadow: 0 4px 24px rgba(28, 40, 54, 0.06);
  --shop-bg: #f8fafc;
  --shop-fg: #1e293b;
  --shop-header-bg: #ffffff;
  --shop-nav-bg: #f1f5f9;
  --shop-card: #ffffff;
  --shop-border: #e2e8f0;
  --shop-accent: #0f766e;
  --shop-accent2: #0d9488;
  --shop-link: #115e59;
  --shop-input-bg: #ffffff;
  --shop-muted: rgba(30, 41, 59, 0.55);
  --shop-font-display: "Outfit", "Tajawal", sans-serif;
  --shop-font-body: "Outfit", "Tajawal", sans-serif;
  --shop-title-gradient: linear-gradient(135deg, #0f766e, #14b8a6);
  --shop-card-hover-y: -5px;
}
html[data-theme="home-studio"] .shop-header {
  box-shadow: 0 1px 0 rgba(15, 118, 110, 0.12);
  border-bottom: none;
}
html[data-theme="home-studio"] .shop-nav-inner {
  justify-content: flex-start;
  gap: 8px 24px;
}
html[data-theme="home-studio"] .hero-banner {
  background: #ffffff;
  border: 1px solid var(--shop-border);
  box-shadow: var(--shop-shadow);
}
html[data-theme="home-studio"] .card-product {
  box-shadow: var(--shop-shadow);
  border: 1px solid var(--shop-border);
}
html[data-theme="home-studio"] .trust-strip {
  background: #ffffff;
}

/* ——— 7 · رياضة ولياقة — طاقة، قَصّ مائل ——— */
html[data-theme="sport-pulse"] {
  --shop-radius: 4px;
  --shop-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  --shop-bg: #0c0a09;
  --shop-fg: #fafaf9;
  --shop-header-bg: #1c1917;
  --shop-nav-bg: #0f0d0c;
  --shop-card: #1c1917;
  --shop-border: #44403c;
  --shop-accent: #a3e635;
  --shop-accent2: #22d3ee;
  --shop-link: #bef264;
  --shop-input-bg: #0c0a09;
  --shop-muted: rgba(250, 250, 249, 0.55);
  --shop-font-display: "Bebas Neue", "Tajawal", sans-serif;
  --shop-font-body: "Outfit", "Tajawal", sans-serif;
  --shop-title-gradient: linear-gradient(105deg, #a3e635, #22d3ee);
  --shop-card-hover-y: -6px;
}
html[data-theme="sport-pulse"] .shop-title {
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
html[data-theme="sport-pulse"] .shop-topbar {
  background: linear-gradient(90deg, #a3e635, #22d3ee);
  color: #0c0a09;
  font-weight: 800;
}
html[data-theme="sport-pulse"] .shop-nav-link {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.82rem;
  border-bottom: 2.5px solid transparent;
}
html[data-theme="sport-pulse"] .shop-nav-link:hover {
  border-bottom-color: var(--shop-accent);
}
html[data-theme="sport-pulse"] .hero-banner {
  background: linear-gradient(135deg, #1c1917 0%, #14532d 40%, #0c4a6e 100%);
  border: none;
}
html[data-theme="sport-pulse"] .card-product {
  border: 1px solid var(--shop-border);
}
html[data-theme="sport-pulse"] .card-product:hover {
  border-color: var(--shop-accent);
  box-shadow: 0 0 24px rgba(163, 230, 53, 0.15);
}
html[data-theme="sport-pulse"] .btn-primary {
  border-radius: 4px;
}

/* ——— 8 · تجميل وعناية — زجاجي ناعم ——— */
html[data-theme="beauty-bloom"] {
  --shop-radius: 20px;
  --shop-shadow: 0 8px 32px rgba(219, 39, 119, 0.12);
  --shop-bg: #fdf2f8;
  --shop-fg: #831843;
  --shop-header-bg: #ffffff;
  --shop-nav-bg: #fdf2f8;
  --shop-card: #ffffff;
  --shop-border: rgba(244, 114, 182, 0.3);
  --shop-accent: #db2777;
  --shop-accent2: #a855f7;
  --shop-link: #be185d;
  --shop-input-bg: #ffffff;
  --shop-muted: rgba(131, 24, 67, 0.55);
  --shop-font-display: "Fraunces", "Tajawal", serif;
  --shop-font-body: "Nunito", "Tajawal", sans-serif;
  --shop-title-gradient: linear-gradient(135deg, #db2777, #a855f7);
  --shop-card-hover-y: -5px;
}
html[data-theme="beauty-bloom"] .shop-body {
  background-color: var(--shop-bg);
  background-image: linear-gradient(
    180deg,
    var(--shop-bg) 0%,
    color-mix(in srgb, var(--shop-bg) 88%, var(--shop-accent2) 12%) 50%,
    color-mix(in srgb, var(--shop-bg) 80%, var(--shop-accent2) 20%) 100%
  );
}
html[data-theme="beauty-bloom"] .shop-header {
  border-bottom: 1px solid var(--shop-border);
}
html[data-theme="beauty-bloom"] .card-product {
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 32px rgba(219, 39, 119, 0.08);
}
html[data-theme="beauty-bloom"] .hero-banner {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(253, 242, 248, 0.95));
  border: 1px solid rgba(244, 114, 182, 0.4);
  backdrop-filter: blur(12px);
}
html[data-theme="beauty-bloom"] .header-search:focus {
  box-shadow: 0 0 0 3px rgba(219, 39, 119, 0.2);
}

/* ——— 9 · ساعات وإكسسوار راقٍ — سويسري داكن ——— */
html[data-theme="chrono-vault"] {
  --shop-radius: 2px;
  --shop-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
  --shop-bg: #0f1411;
  --shop-fg: #ecfdf5;
  --shop-header-bg: #141c17;
  --shop-nav-bg: #0f1612;
  --shop-card: #1a2420;
  --shop-border: #2d3f36;
  --shop-accent: #34d399;
  --shop-accent2: #6ee7b7;
  --shop-link: #a7f3d0;
  --shop-input-bg: #0c100e;
  --shop-muted: rgba(236, 253, 245, 0.55);
  --shop-font-display: "Outfit", "Tajawal", sans-serif;
  --shop-font-body: "Outfit", "Tajawal", sans-serif;
  --shop-title-gradient: linear-gradient(180deg, #ecfdf5, #34d399);
  --shop-card-hover-y: -3px;
}
html[data-theme="chrono-vault"] .shop-title {
  font-weight: 300;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-size: 0.95rem;
}
html[data-theme="chrono-vault"] .shop-nav-link {
  font-weight: 500;
  letter-spacing: 0.1em;
  font-size: 0.75rem;
  text-transform: uppercase;
}
html[data-theme="chrono-vault"] .hero-banner {
  background: radial-gradient(circle at 50% 120%, rgba(52, 211, 153, 0.12), transparent 55%), #141c17;
  border: 1px solid var(--shop-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
html[data-theme="chrono-vault"] .card-product {
  border-radius: var(--shop-radius);
  border: 1px solid var(--shop-border);
  box-shadow: none;
}
html[data-theme="chrono-vault"] .card-product:hover {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--shop-accent) 50%, transparent);
}

/* ——— 10 · شاطئ وحياة — رمل وماء ——— */
html[data-theme="coastal-tide"] {
  --shop-radius: 22px;
  --shop-shadow: 0 16px 48px rgba(14, 116, 144, 0.15);
  --shop-bg: #f0fdfa;
  --shop-fg: #134e4a;
  --shop-header-bg: linear-gradient(180deg, #ccfbf1, #f0fdfa);
  --shop-nav-bg: #e0f2fe;
  --shop-card: #ffffff;
  --shop-border: #99f6e4;
  --shop-accent: #0d9488;
  --shop-accent2: #06b6d4;
  --shop-link: #0f766e;
  --shop-input-bg: #ffffff;
  --shop-muted: rgba(19, 78, 74, 0.58);
  --shop-font-display: "Outfit", "Tajawal", sans-serif;
  --shop-font-body: "Nunito", "Tajawal", sans-serif;
  --shop-title-gradient: linear-gradient(135deg, #0d9488, #06b6d4 60%, #fbbf24);
  --shop-card-hover-y: -5px;
}
html[data-theme="coastal-tide"] .shop-body {
  background-color: var(--shop-bg);
  background-image: linear-gradient(
    180deg,
    var(--shop-bg) 0%,
    color-mix(in srgb, var(--shop-bg) 90%, var(--shop-accent) 10%) 40%,
    color-mix(in srgb, var(--shop-bg) 85%, var(--shop-accent2) 15%) 100%
  );
}
html[data-theme="coastal-tide"] .shop-nav-link {
  border-radius: 999px;
  padding: 8px 16px;
  border-bottom: none;
  background: rgba(255, 255, 255, 0.7);
}
html[data-theme="coastal-tide"] .hero-banner {
  background: linear-gradient(135deg, #e0f2fe, #ccfbf1 45%, #fef9c3);
  border: 1px solid color-mix(in srgb, var(--shop-accent) 30%, transparent);
}
html[data-theme="coastal-tide"] .card-product {
  border-radius: var(--shop-radius);
}
html[data-theme="coastal-tide"] .trust-strip {
  border-radius: calc(var(--shop-radius) + 4px);
  background: rgba(255, 255, 255, 0.8);
}

/* ترحيل: الثيمات القديمة → أقرب فئة (نفس متغيرات الثيم الجديد) */
html[data-theme="aurora"] {
  --shop-radius: 6px;
  --shop-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shop-bg: #05080f;
  --shop-fg: #e6faff;
  --shop-header-bg: linear-gradient(180deg, #0a1628 0%, #060a12 100%);
  --shop-nav-bg: #060910;
  --shop-card: #0c1220;
  --shop-border: #1e3a5f;
  --shop-accent: #22d3ee;
  --shop-accent2: #e879f9;
  --shop-link: #67e8f9;
  --shop-input-bg: #080c14;
  --shop-font-display: "Syne", "Tajawal", sans-serif;
  --shop-font-body: "Outfit", "Tajawal", sans-serif;
  --shop-title-gradient: linear-gradient(90deg, #22d3ee, #c084fc 55%, #f472b6);
}
html[data-theme="obsidian"],
html[data-theme="slate"] {
  --shop-radius: 2px;
  --shop-bg: #0f1411;
  --shop-fg: #ecfdf5;
  --shop-header-bg: #141c17;
  --shop-nav-bg: #0f1612;
  --shop-card: #1a2420;
  --shop-border: #2d3f36;
  --shop-accent: #34d399;
  --shop-accent2: #6ee7b7;
  --shop-link: #a7f3d0;
  --shop-input-bg: #0c100e;
  --shop-font-display: "Outfit", "Tajawal", sans-serif;
  --shop-font-body: "Outfit", "Tajawal", sans-serif;
  --shop-title-gradient: linear-gradient(180deg, #ecfdf5, #34d399);
}
html[data-theme="saffron"],
html[data-theme="emerald"],
html[data-theme="coral"] {
  --shop-radius: 24px;
  --shop-bg: #fffbf5;
  --shop-fg: #422006;
  --shop-header-bg: linear-gradient(180deg, #fff7ed, #fffbf5);
  --shop-nav-bg: #ffedd5;
  --shop-card: #ffffff;
  --shop-border: #e7d5c4;
  --shop-accent: #c2410c;
  --shop-accent2: #ea580c;
  --shop-font-display: "Fraunces", "Tajawal", serif;
  --shop-font-body: "Nunito", "Tajawal", sans-serif;
  --shop-title-gradient: linear-gradient(135deg, #c2410c, #ea580c);
}
html[data-theme="nordic"] {
  --shop-radius: 12px;
  --shop-bg: #f8fafc;
  --shop-fg: #1e293b;
  --shop-header-bg: #ffffff;
  --shop-nav-bg: #f1f5f9;
  --shop-card: #ffffff;
  --shop-border: #e2e8f0;
  --shop-accent: #0f766e;
  --shop-accent2: #14b8a6;
  --shop-font-display: "Outfit", "Tajawal", sans-serif;
  --shop-font-body: "Outfit", "Tajawal", sans-serif;
  --shop-title-gradient: linear-gradient(135deg, #0f766e, #14b8a6);
}
html[data-theme="rose"] {
  --shop-radius: 20px;
  --shop-bg: #fdf2f8;
  --shop-fg: #831843;
  --shop-header-bg: #ffffff;
  --shop-nav-bg: #fdf2f8;
  --shop-card: #ffffff;
  --shop-border: rgba(244, 114, 182, 0.3);
  --shop-accent: #db2777;
  --shop-accent2: #a855f7;
  --shop-font-display: "Fraunces", "Tajawal", serif;
  --shop-font-body: "Nunito", "Tajawal", sans-serif;
  --shop-title-gradient: linear-gradient(135deg, #db2777, #a855f7);
}
html[data-theme="noir"],
html[data-theme="gold"] {
  --shop-radius: 4px;
  --shop-bg: #0a0908;
  --shop-fg: #faf6eb;
  --shop-header-bg: linear-gradient(165deg, #14110d, #0a0908);
  --shop-nav-bg: #0f0d0a;
  --shop-card: #16130f;
  --shop-border: #3d3428;
  --shop-accent: #d4af37;
  --shop-accent2: #f4e4a6;
  --shop-font-display: "Playfair Display", "Tajawal", serif;
  --shop-font-body: "Outfit", "Tajawal", sans-serif;
  --shop-title-gradient: linear-gradient(135deg, #f4e4a6, #d4af37 45%, #b8860b);
}

/* ——— 11 · قيمنق نيوني — مضلّع، توهّج، سايبربانك ——— */
html[data-theme="gaming-neon"] {
  --shop-radius: 0;
  --shop-shadow: 0 0 32px rgba(0, 255, 135, 0.18), 0 0 64px rgba(255, 0, 229, 0.1);
  --shop-bg: #08050e;
  --shop-fg: #e8e0ff;
  --shop-header-bg: linear-gradient(180deg, #0e0a18 0%, #08050e 100%);
  --shop-nav-bg: #0c0814;
  --shop-card: #110d1a;
  --shop-border: #2d1f5e;
  --shop-accent: #00ff87;
  --shop-accent2: #ff00e5;
  --shop-link: #66ffb2;
  --shop-input-bg: #0a0710;
  --shop-muted: rgba(232, 224, 255, 0.5);
  --shop-font-display: "Orbitron", "Tajawal", sans-serif;
  --shop-font-body: "Rajdhani", "Tajawal", sans-serif;
  --shop-title-gradient: linear-gradient(105deg, #00ff87, #00e5ff 40%, #ff00e5);
  --shop-card-hover-y: -6px;
}
html[data-theme="gaming-neon"] .shop-body {
  background-color: var(--shop-bg);
  background-image:
    radial-gradient(ellipse 70% 50% at 20% 0%, color-mix(in srgb, var(--shop-accent) 8%, transparent), transparent),
    radial-gradient(ellipse 60% 50% at 80% 100%, color-mix(in srgb, var(--shop-accent2) 7%, transparent), transparent);
}
html[data-theme="gaming-neon"] .shop-header {
  border-bottom: 2px solid;
  border-image: linear-gradient(90deg, #00ff87, #ff00e5) 1;
  backdrop-filter: blur(10px);
}
html[data-theme="gaming-neon"] .shop-title {
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
html[data-theme="gaming-neon"] .shop-nav-link {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.8rem;
  padding: 8px 14px;
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
  background: transparent;
  transition: background 0.2s, color 0.2s;
}
html[data-theme="gaming-neon"] .shop-nav-link:hover {
  background: rgba(0, 255, 135, 0.12);
  color: #00ff87;
}
html[data-theme="gaming-neon"] .shop-topbar {
  background: linear-gradient(90deg, #00ff87, #00e5ff 50%, #ff00e5);
  color: #08050e;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
html[data-theme="gaming-neon"] .hero-banner {
  border-radius: 0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%);
  background: linear-gradient(135deg, #0e0a18 0%, #1a0a30 40%, #0c2a20 100%);
  border: 1px solid rgba(0, 255, 135, 0.3);
  box-shadow: 0 0 40px rgba(0, 255, 135, 0.08), inset 0 0 80px rgba(255, 0, 229, 0.04);
}
html[data-theme="gaming-neon"] .card-product {
  border-radius: 0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
  border: 1px solid var(--shop-border);
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.3s;
}
html[data-theme="gaming-neon"] .card-product:hover {
  border-color: #00ff87;
  box-shadow: 0 0 20px rgba(0, 255, 135, 0.2), 0 0 40px rgba(255, 0, 229, 0.1);
}
html[data-theme="gaming-neon"] .btn-primary {
  border-radius: 0;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 900;
  font-size: 0.82rem;
}
html[data-theme="gaming-neon"] .header-search {
  border-radius: 0;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  border: 1px solid rgba(0, 255, 135, 0.3);
  font-weight: 700;
}

/* ——— 12 · Intex-style — خلفية دافئة، هيدر نظيف، أكسنت برتقالي ——— */
html[data-theme="intex-modern"] {
  --shop-radius: 18px;
  --shop-shadow: 0 12px 34px rgba(78, 42, 21, 0.08);
  --shop-bg: #f7f3ef;
  --shop-fg: #2b211a;
  --shop-header-bg: #ffffff;
  --shop-nav-bg: #ffffff;
  --shop-card: #ffffff;
  --shop-border: #eee3d8;
  --shop-accent: #c44a1f;
  --shop-accent2: #f16c2f;
  --shop-link: #9f3e1b;
  --shop-input-bg: #ffffff;
  --shop-muted: rgba(43, 33, 26, 0.56);
  --shop-font-display: "Outfit", "Tajawal", sans-serif;
  --shop-font-body: "Outfit", "Tajawal", sans-serif;
  --shop-title-gradient: linear-gradient(135deg, #b8451e, #f16c2f);
  --shop-card-hover-y: -4px;
}
html[data-theme="intex-modern"] .shop-body {
  background-color: var(--shop-bg);
}
html[data-theme="intex-modern"] .shop-header {
  border-bottom: 1px solid var(--shop-border);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
}
html[data-theme="intex-modern"] .shop-nav {
  border-bottom: 1px solid var(--shop-border);
}
html[data-theme="intex-modern"] .shop-nav-inner {
  justify-content: center;
  gap: 8px 18px;
}
html[data-theme="intex-modern"] .shop-nav-link {
  border-bottom: none;
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.85rem;
  font-weight: 600;
}
html[data-theme="intex-modern"] .shop-nav-link:hover {
  background: color-mix(in srgb, var(--shop-accent) 12%, #fff);
}
html[data-theme="intex-modern"] .hero-banner {
  background: #fff;
  border: 1px solid var(--shop-border);
  box-shadow: var(--shop-shadow);
}
html[data-theme="intex-modern"] .card-product {
  border-radius: 16px;
  border: 1px solid var(--shop-border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}
html[data-theme="intex-modern"] .card-product:hover {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.08);
}
html[data-theme="intex-modern"] .btn-primary,
html[data-theme="intex-modern"] .btn-add-cart,
html[data-theme="intex-modern"] .pill.accent {
  border-radius: 999px;
  background: linear-gradient(135deg, #c44a1f, #f16c2f);
  color: #fff;
  border: none;
}
html[data-theme="intex-modern"] .section-title {
  font-weight: 800;
  font-size: 1.35rem;
}

/* ══════════════════════════════════════════════════════
   ✦ PREMIUM THEMES — 5 New World-Class Themes
   ══════════════════════════════════════════════════════ */

/* ——— P1 · Velvet Noir — أسود مخملي + ذهبي حريري ——— */
html[data-theme="velvet-noir"] {
  --shop-radius: 0px;
  --shop-shadow: 0 30px 80px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(201, 169, 110, 0.15);
  --shop-bg: #09070a;
  --shop-fg: #f5f0ea;
  --shop-header-bg: linear-gradient(165deg, #120f10 0%, #09070a 100%);
  --shop-nav-bg: #0e0b0d;
  --shop-card: #130f12;
  --shop-border: #2e2520;
  --shop-accent: #c9a96e;
  --shop-accent2: #e8d5a3;
  --shop-link: #dfc990;
  --shop-input-bg: #100d0f;
  --shop-muted: rgba(245, 240, 234, 0.5);
  --shop-font-display: "Cormorant Garamond", "Tajawal", serif;
  --shop-font-body: "Outfit", "Tajawal", sans-serif;
  --shop-title-gradient: linear-gradient(135deg, #e8d5a3 0%, #c9a96e 40%, #a07040 70%, #c9a96e 100%);
  --shop-card-hover-y: -4px;
}
html[data-theme="velvet-noir"] .shop-body {
  background-color: var(--shop-bg);
  background-image:
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(201, 169, 110, 0.06), transparent),
    radial-gradient(ellipse 60% 40% at 10% 80%, rgba(160, 112, 64, 0.04), transparent);
}
html[data-theme="velvet-noir"] .shop-header {
  border-bottom: 1px solid rgba(201, 169, 110, 0.2);
  backdrop-filter: blur(14px);
}
html[data-theme="velvet-noir"] .shop-title {
  font-family: "Cormorant Garamond", "Tajawal", serif;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.05em;
  font-size: 1.5rem;
}
html[data-theme="velvet-noir"] .shop-nav-link {
  letter-spacing: 0.18em;
  font-size: 0.68rem;
  text-transform: uppercase;
  border-bottom: 1px solid transparent;
}
html[data-theme="velvet-noir"] .shop-nav-link:hover {
  border-bottom-color: var(--shop-accent);
}
html[data-theme="velvet-noir"] .hero-banner {
  background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(201, 169, 110, 0.08), transparent 65%), #110e0f;
  border: 1px solid rgba(201, 169, 110, 0.2);
}
html[data-theme="velvet-noir"] .card-product {
  border: 1px solid rgba(201, 169, 110, 0.12);
  background: linear-gradient(160deg, #180f14, #100c10);
}
html[data-theme="velvet-noir"] .card-product:hover {
  border-color: rgba(201, 169, 110, 0.4);
  box-shadow: 0 0 30px rgba(201, 169, 110, 0.08), 0 20px 50px rgba(0, 0, 0, 0.5);
}
html[data-theme="velvet-noir"] .btn-primary {
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.74rem;
}
html[data-theme="velvet-noir"] .section-title {
  font-family: "Cormorant Garamond", "Tajawal", serif;
  font-weight: 400;
  font-style: italic;
  font-size: 1.6rem;
  letter-spacing: 0.04em;
}

/* ——— P2 · Aurora Borealis — شفق قطبي، تقني ——— */
html[data-theme="aurora-borealis"] {
  --shop-radius: 16px;
  --shop-shadow: 0 20px 60px rgba(99, 102, 241, 0.2), 0 0 0 1px rgba(99, 102, 241, 0.1);
  --shop-bg: #030810;
  --shop-fg: #e2e8ff;
  --shop-header-bg: rgba(6, 10, 22, 0.85);
  --shop-nav-bg: rgba(8, 12, 26, 0.9);
  --shop-card: rgba(10, 16, 34, 0.9);
  --shop-border: rgba(99, 102, 241, 0.2);
  --shop-accent: #818cf8;
  --shop-accent2: #34d399;
  --shop-link: #a5b4fc;
  --shop-input-bg: rgba(6, 10, 20, 0.8);
  --shop-muted: rgba(226, 232, 255, 0.55);
  --shop-font-display: "Space Grotesk", "Tajawal", sans-serif;
  --shop-font-body: "Space Grotesk", "Tajawal", sans-serif;
  --shop-title-gradient: linear-gradient(90deg, #818cf8 0%, #a78bfa 25%, #06b6d4 55%, #34d399 80%, #818cf8 100%);
  --shop-card-hover-y: -6px;
}
html[data-theme="aurora-borealis"] .shop-body {
  background-color: var(--shop-bg);
  background-image:
    radial-gradient(ellipse 80% 50% at 20% 0%, rgba(99, 102, 241, 0.15), transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 30%, rgba(6, 182, 212, 0.12), transparent 55%),
    radial-gradient(ellipse 50% 60% at 50% 100%, rgba(52, 211, 153, 0.08), transparent 50%);
}
html[data-theme="aurora-borealis"] .shop-header {
  border-bottom: 1px solid rgba(99, 102, 241, 0.2);
  backdrop-filter: blur(20px) saturate(1.5);
}
html[data-theme="aurora-borealis"] .shop-title {
  font-weight: 700;
  letter-spacing: -0.02em;
}
html[data-theme="aurora-borealis"] .shop-nav-link {
  border-radius: 8px;
  padding: 8px 14px;
  font-weight: 600;
  font-size: 0.84rem;
  border-bottom: none;
}
html[data-theme="aurora-borealis"] .shop-nav-link:hover {
  background: rgba(99, 102, 241, 0.15);
  box-shadow: 0 0 20px rgba(99, 102, 241, 0.2);
}
html[data-theme="aurora-borealis"] .hero-banner {
  border-radius: var(--shop-radius);
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(6, 182, 212, 0.08)), rgba(10, 16, 34, 0.95);
  border: 1px solid rgba(99, 102, 241, 0.25);
  box-shadow: 0 0 60px rgba(99, 102, 241, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(8px);
}
html[data-theme="aurora-borealis"] .card-product {
  border-radius: var(--shop-radius);
  background: rgba(10, 16, 34, 0.85);
  border: 1px solid rgba(99, 102, 241, 0.15);
  backdrop-filter: blur(12px);
}
html[data-theme="aurora-borealis"] .card-product:hover {
  border-color: rgba(99, 102, 241, 0.45);
  box-shadow: 0 0 30px rgba(99, 102, 241, 0.15), 0 20px 50px rgba(0, 0, 0, 0.3);
}
html[data-theme="aurora-borealis"] .btn-primary {
  border-radius: 10px;
  font-weight: 700;
}
html[data-theme="aurora-borealis"] .section-title {
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: -0.01em;
}

/* ——— P3 · Desert Rose — خوخي رملي، رومانسي شرقي ——— */
html[data-theme="desert-rose"] {
  --shop-radius: 4px;
  --shop-shadow: 0 20px 60px rgba(80, 30, 20, 0.2);
  --shop-bg: #1a0f0d;
  --shop-fg: #f9ede8;
  --shop-header-bg: linear-gradient(168deg, #22120e 0%, #1a0f0d 100%);
  --shop-nav-bg: #1e1210;
  --shop-card: #231511;
  --shop-border: #3d2219;
  --shop-accent: #e8927c;
  --shop-accent2: #f5c9a0;
  --shop-link: #f0ab8e;
  --shop-input-bg: #180d0b;
  --shop-muted: rgba(249, 237, 232, 0.55);
  --shop-font-display: "Cinzel", "Tajawal", serif;
  --shop-font-body: "Outfit", "Tajawal", sans-serif;
  --shop-title-gradient: linear-gradient(135deg, #f5c9a0 0%, #e8927c 45%, #c96c52 100%);
  --shop-card-hover-y: -4px;
}
html[data-theme="desert-rose"] .shop-body {
  background-color: var(--shop-bg);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(232, 146, 124, 0.1), transparent),
    radial-gradient(ellipse 60% 40% at 90% 80%, rgba(245, 201, 160, 0.06), transparent);
}
html[data-theme="desert-rose"] .shop-header {
  border-bottom: 1px solid rgba(232, 146, 124, 0.2);
  backdrop-filter: blur(12px);
}
html[data-theme="desert-rose"] .shop-title {
  font-family: "Cinzel", "Tajawal", serif;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 1.2rem;
}
html[data-theme="desert-rose"] .shop-nav-link {
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom: 1px solid transparent;
}
html[data-theme="desert-rose"] .shop-nav-link:hover {
  border-bottom-color: var(--shop-accent);
}
html[data-theme="desert-rose"] .hero-banner {
  background: radial-gradient(ellipse 70% 80% at 60% 50%, rgba(232, 146, 124, 0.12), transparent 60%), #1e110d;
  border: 1px solid rgba(232, 146, 124, 0.2);
  box-shadow: inset 0 0 80px rgba(232, 146, 124, 0.04);
}
html[data-theme="desert-rose"] .card-product {
  border: 1px solid rgba(232, 146, 124, 0.12);
  background: linear-gradient(160deg, #291510, #1e110e);
}
html[data-theme="desert-rose"] .card-product:hover {
  border-color: rgba(232, 146, 124, 0.35);
  box-shadow: 0 0 24px rgba(232, 146, 124, 0.1), 0 20px 48px rgba(0, 0, 0, 0.45);
}
html[data-theme="desert-rose"] .btn-primary {
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.76rem;
}
html[data-theme="desert-rose"] .section-title {
  font-family: "Cinzel", "Tajawal", serif;
  font-weight: 400;
  font-size: 1.35rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ——— P4 · Midnight Carbon — كربوني، أزرق كهربائي ——— */
html[data-theme="midnight-carbon"] {
  --shop-radius: 8px;
  --shop-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(59, 130, 246, 0.1);
  --shop-bg: #080a0f;
  --shop-fg: #e8eeff;
  --shop-header-bg: linear-gradient(180deg, #0d1117 0%, #080a0f 100%);
  --shop-nav-bg: #090b11;
  --shop-card: #0d1117;
  --shop-border: #1e2a3d;
  --shop-accent: #3b82f6;
  --shop-accent2: #60a5fa;
  --shop-link: #93c5fd;
  --shop-input-bg: #07090d;
  --shop-muted: rgba(232, 238, 255, 0.55);
  --shop-font-display: "Inter", "Tajawal", sans-serif;
  --shop-font-body: "Inter", "Tajawal", sans-serif;
  --shop-title-gradient: linear-gradient(105deg, #60a5fa 0%, #818cf8 50%, #a78bfa 100%);
  --shop-card-hover-y: -5px;
}
html[data-theme="midnight-carbon"] .shop-body {
  background-color: var(--shop-bg);
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 1px, transparent 1px, transparent 6px),
    radial-gradient(ellipse 70% 50% at 30% 0%, rgba(59, 130, 246, 0.1), transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 90%, rgba(96, 165, 250, 0.06), transparent 55%);
}
html[data-theme="midnight-carbon"] .shop-header {
  border-bottom: 1px solid rgba(59, 130, 246, 0.2);
  backdrop-filter: blur(16px);
}
html[data-theme="midnight-carbon"] .shop-title {
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 1.5rem;
}
html[data-theme="midnight-carbon"] .shop-nav-link {
  font-weight: 700;
  font-size: 0.82rem;
  border-radius: 6px;
  border-bottom: none;
}
html[data-theme="midnight-carbon"] .shop-nav-link:hover {
  background: rgba(59, 130, 246, 0.15);
  box-shadow: 0 0 16px rgba(59, 130, 246, 0.2);
}
html[data-theme="midnight-carbon"] .hero-banner {
  background: linear-gradient(135deg, #0d1523 0%, #1a1f2e 50%, #0a1020 100%);
  border: 1px solid rgba(59, 130, 246, 0.2);
  box-shadow: 0 0 40px rgba(59, 130, 246, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
html[data-theme="midnight-carbon"] .card-product {
  border: 1px solid var(--shop-border);
  background: linear-gradient(160deg, #0f1420, #0a0d14);
}
html[data-theme="midnight-carbon"] .card-product:hover {
  border-color: rgba(59, 130, 246, 0.4);
  box-shadow: 0 0 24px rgba(59, 130, 246, 0.12), 0 20px 48px rgba(0, 0, 0, 0.4);
}
html[data-theme="midnight-carbon"] .btn-primary {
  border-radius: 6px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
html[data-theme="midnight-carbon"] .section-title {
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
}

/* ——— P5 · Sakura Zen — زهر كرز، هدوء ياباني ——— */
html[data-theme="sakura-zen"] {
  --shop-radius: 18px;
  --shop-shadow: 0 12px 40px rgba(180, 100, 120, 0.12);
  --shop-bg: #fef8f5;
  --shop-fg: #2d1a22;
  --shop-header-bg: rgba(255, 252, 250, 0.92);
  --shop-nav-bg: #fff5f7;
  --shop-card: #ffffff;
  --shop-border: rgba(212, 134, 154, 0.25);
  --shop-accent: #c9607a;
  --shop-accent2: #5c8a6e;
  --shop-link: #a84d65;
  --shop-input-bg: #ffffff;
  --shop-muted: rgba(45, 26, 34, 0.55);
  --shop-font-display: "Cormorant Garamond", "Tajawal", serif;
  --shop-font-body: "Outfit", "Tajawal", sans-serif;
  --shop-title-gradient: linear-gradient(135deg, #c9607a 0%, #e891a6 50%, #5c8a6e 100%);
  --shop-card-hover-y: -6px;
}
html[data-theme="sakura-zen"] .shop-body {
  background-color: var(--shop-bg);
  background-image:
    radial-gradient(circle at 15% 20%, rgba(201, 96, 122, 0.06), transparent 35%),
    radial-gradient(circle at 85% 70%, rgba(92, 138, 110, 0.05), transparent 35%);
}
html[data-theme="sakura-zen"] .shop-header {
  border-bottom: 1px solid rgba(201, 96, 122, 0.15);
  backdrop-filter: blur(16px);
}
html[data-theme="sakura-zen"] .shop-title {
  font-family: "Cormorant Garamond", "Tajawal", serif;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.03em;
  font-size: 1.55rem;
}
html[data-theme="sakura-zen"] .shop-nav-link {
  border-radius: 999px;
  padding: 7px 16px;
  border-bottom: none;
  font-weight: 500;
  font-size: 0.84rem;
}
html[data-theme="sakura-zen"] .shop-nav-link:hover {
  background: rgba(201, 96, 122, 0.1);
  color: var(--shop-accent);
}
html[data-theme="sakura-zen"] .hero-banner {
  border-radius: calc(var(--shop-radius) + 6px);
  background: linear-gradient(135deg, rgba(255, 245, 247, 0.95) 0%, rgba(255, 250, 248, 0.98) 100%);
  border: 1px solid rgba(201, 96, 122, 0.2);
  box-shadow: 0 12px 40px rgba(180, 100, 120, 0.08);
}
html[data-theme="sakura-zen"] .card-product {
  border-radius: var(--shop-radius);
  border: 1px solid rgba(201, 96, 122, 0.15);
  box-shadow: 0 4px 20px rgba(180, 100, 120, 0.06);
}
html[data-theme="sakura-zen"] .card-product:hover {
  box-shadow: 0 8px 30px rgba(180, 100, 120, 0.14), 0 16px 40px rgba(0, 0, 0, 0.04);
  border-color: rgba(201, 96, 122, 0.3);
}
html[data-theme="sakura-zen"] .btn-primary {
  border-radius: 999px;
  font-weight: 600;
}
html[data-theme="sakura-zen"] .section-title {
  font-family: "Cormorant Garamond", "Tajawal", serif;
  font-weight: 400;
  font-style: italic;
  font-size: 1.6rem;
  letter-spacing: 0.02em;
}

/* Global theme mobile guardrails */
@media (max-width: 900px) {
  html[data-theme] .shop-nav-inner {
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 6px;
  }

  html[data-theme] .shop-nav-link {
    white-space: nowrap;
    flex: 0 0 auto;
  }

  html[data-theme] .hero-banner {
    box-shadow: none;
  }

  html[data-theme] .card-product {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  }
}

@media (max-width: 600px) {
  html[data-theme] .shop-title {
    font-size: clamp(1rem, 4.2vw, 1.25rem);
  }

  html[data-theme] .grid-products {
    grid-template-columns: 1fr;
  }
}