/* ========== THEME: Art With Mays - Luxurious Edition ==========
 * ----------------------------------------------------------- */
:root {
    /* brand */
    --primary: #f06ec8;     /* وردي */
    --secondary: #7c3aed;   /* بنفسجي */
    --sky: #38bdf8;         /* سماوي */
    --mint: #10b981;        /* أخضر نعنعي */
    --amber: #f59e0b;       /* عنبري */
    --rose: #fb7185;        /* روز */

    /* basics */
    --ink: #0f172a;
    --muted: #5c6475; /* Darker muted for better contrast */
    --bg: #f8f9fc;    /* Very light grey background for depth */
    --surface: #ffffff;
    --radius: 18px; /* Slightly larger radius */
    --container: 1200px; /* Increased max width */
    
    /* Luxurious Shadows */
    --shadow-1: 0 10px 30px rgba(2,6,23,.08); /* Deeper */
    --shadow-2: 0 20px 50px rgba(2,6,23,.15); /* More prominent */
    --shadow-input-focus: 0 0 0 5px rgba(124,58,237,.15); /* Softer focus glow */
}

/* Dark Mode Enhancements (Richer, deeper contrast) */
:root.dark {
    --bg: #0b1020;
    --surface: #121a31;
    --ink: #eef2ff;
    --muted: #97a0b3;
    --border: #202b46;
    --shadow-1: 0 10px 30px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 20px 50px rgba(0, 0, 0, 0.65);
    --shadow-input-focus: 0 0 0 5px rgba(240,110,200,.15); /* Pink focus glow in dark */
}

/* -------- Base -------- */
*, *::before, *::after { box-sizing: border-box }
html,body { margin:0; padding:0; overflow-x:hidden; }
body {
    font-family: "Cairo", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color: var(--ink); background: var(--bg);
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.small { font-size: 0.95rem }
.muted { color: var(--muted) }
.row { display: grid; gap: 20px } /* Increased gap */
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px }

/* -------- Header (More transparent and elegant) -------- */
.header {
    position: sticky; top: 0; z-index: 50;
    backdrop-filter: saturate(180%) blur(12px); /* Higher blur for elegance */
    background: rgba(255, 255, 255, 0.85);
    border-bottom: 1px solid var(--border, #f0f0f0);
    transition: background .3s;
}
:root.dark .header { background: rgba(18, 26, 49, 0.9); border-bottom-color: #223159; }

.nav { display: flex; align-items: center; justify-content: space-between; height: 72px; } /* Taller header */
.logo { font-weight: 800; font-size: 1.25rem; }

.header nav a {
    margin: 0 10px; padding: 8px 14px; border-radius: 12px;
    color: var(--ink); opacity: 0.9;
    transition: background 0.2s ease, opacity 0.2s ease;
}
.header nav a:hover { background: #f0f3f8; opacity: 1; }
:root.dark .header nav a { color: var(--ink); }
:root.dark .header nav a:hover { background: #1a223f; }
.header .btn { margin-left: 10px }

/* -------- Buttons (Luxurious press effect) -------- */
.btn {
    --grad: linear-gradient(90deg, var(--primary), var(--secondary));
    background: var(--grad); color: #fff;
    border: none; border-radius: 999px; padding: 12px 22px; font-weight: 700; font-size: 1.05rem;
    box-shadow: 0 12px 30px rgba(124,58,237,.28); /* Prominent initial shadow */
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); /* Bouncy transition */
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
}
.btn:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 18px 45px rgba(124,58,237,.38);
    filter: brightness(1.1);
}
.btn:active { transform: translateY(0.5px) scale(0.98); box-shadow: var(--shadow-1); }

.btn.outline {
    background: transparent; color: var(--ink); border: 1px solid var(--border, #e8e8e8);
    box-shadow: none; padding: 11px 21px; /* To match filled button height */
}
.btn.outline:hover { border-color: var(--secondary); color: var(--secondary); background: rgba(124,58,237,.05); }

/* -------- Inputs (Smoother focus) -------- */
input, textarea, select {
    padding: 14px 16px; border-radius: 14px; border: 1px solid #e6e6e9; background: var(--surface);
    color: var(--ink); outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}
:root.dark input, :root.dark textarea, :root.dark select {
    background: #121a31; border-color: #203156; color: #eaeefe;
}
input:focus, textarea:focus, select:focus {
    border-color: var(--primary);
    box-shadow: var(--shadow-input-focus);
}

/* -------- Sections -------- */
.section { padding: clamp(64px, 10vw, 120px) 0 } /* Larger sections */
.section+.section { padding-top: clamp(40px, 6vw, 80px) }
.section.alt { background: var(--bg); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border) }

/* -------- Hero (clean) -------- */
.hero-clean {
    background:
        radial-gradient(1000px 500px at 10% -10%, #fff0f8 0, transparent 65%),
        radial-gradient(1000px 500px at 100% 0%, #fff7e3 0, transparent 60%),
        var(--surface);
    border-bottom: 1px solid var(--border);
}
:root.dark .hero-clean {
    background:
        radial-gradient(1000px 500px at 10% -10%, rgba(240, 110, 200, 0.15) 0, transparent 65%),
        radial-gradient(1000px 500px at 100% 0%, rgba(124, 58, 237, 0.1) 0, transparent 60%),
        var(--paper);
    border-bottom-color: #1e2a4d;
}
.hero-inner { text-align: center; padding: clamp(90px, 12vw, 140px) 0 clamp(80px, 10vw, 120px); max-width: 900px; margin: 0 auto }
.brand-mark { width: 96px; height: 96px; border-radius: 24px; box-shadow: var(--shadow-1); margin-bottom: 20px } /* Larger mark */
.hero-title { font-size: clamp(48px, 6vw, 72px); line-height: 1.1; letter-spacing: -0.03em; margin: 8px 0 12px; font-weight: 800; }
.hero-subtitle { color: var(--muted); max-width: 680px; margin: 0 auto 16px; font-size: 1.15rem; }

/* -------- Grid / Cards (Elevated) -------- */
.grid { display: grid; gap: 24px }
.cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)) }
@media (max-width:1100px){ .cols-3{ grid-template-columns: repeat(2, minmax(0,1fr)) } } /* Adjusted breakpoint */
@media (max-width:640px){ .cols-3{ grid-template-columns: 1fr } }

.card {
    background: var(--surface); border: 1px solid var(--border, #eee); border-radius: 20px; /* Enhanced radius */
    box-shadow: var(--shadow-1);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: var(--primary); }
:root.dark .card { border-color: #223159; }
:root.dark .card:hover { border-color: var(--primary); }
.card .content { padding: 18px 18px 20px } /* More padding */

/* Product card */
.card.product .thumb { aspect-ratio: 1 / 1; background: #f8fafc; } /* Square aspect ratio for art */
.card.product .thumb img { transition: transform .5s cubic-bezier(0.25, 1, 0.5, 1); }
.card.product:hover .thumb img { transform: scale(1.05) }
.card.product .title { font-size: 1.15rem; margin: 10px 0 6px; font-weight: 700; }
.price { font-weight: 900; color: var(--primary); font-size: 1.25rem; }

/* Badges (Subtle 3D look) */
.badge {
    font-size: 0.85rem; padding: 7px 11px; border-radius: 999px;
    border: 1px solid #eef;
    background: #f8f9ff; color: #3b3b55;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Category coloring */
.badge[data-cat="Watercolor"]{ background:#e0f2fe; color:#0c4a6e; border-color:#bae6fd }
.badge[data-cat="Acrylic"]{ background:#efe9ff; color:#6d28d9; border-color:#e9d5ff }
.badge[data-cat="Kids"], .badge[data-cat="kids"]{ background:#fff7d6; color:#a16207; border-color:#fde68a }
.badge[data-cat="Craft"]{ background:#dcfce7; color:#065f46; border-color:#bbf7d0 }
/* Dark Mode Badges */
:root.dark .badge { background: #1f2740; border-color: #334155; color: #d1d5db; box-shadow: none; }
:root.dark .badge[data-cat="Watercolor"]{ background: #173b5a; color: #94a3b8; }
:root.dark .badge[data-cat="Acrylic"]{ background: #2f254e; color: #a5b4fc; }
:root.dark .badge[data-cat="Kids"], :root.dark .badge[data-cat="kids"]{ background: #4a3410; color: #facc15; }
:root.dark .badge[data-cat="Craft"]{ background: #134e4a; color: #34d399; }


/* -------- Shop / search -------- */
#search { border-radius: 14px; padding: 14px 16px; border-color: #d1d5db; }
#results-count { color: var(--muted) }

/* -------- Footer (More spacious) -------- */
.footer { border-top: 1px solid var(--border); background: var(--surface); padding: 50px 0; }
.footer .cols { display: grid; gap: 30px; grid-template-columns: repeat(3, minmax(0,1fr)) }
.footer h4 { margin: .2rem 0 .8rem; font-size: 1.15rem; font-weight: 700; color: var(--ink); }
.footer ul { list-style: none; padding: 0; }
.footer li { margin-bottom: 8px; }
.footer a { color: var(--muted); transition: color .15s ease; }
.footer a:hover { color: var(--primary); }
@media (max-width:780px){ .footer .cols{ grid-template-columns: 1fr } }

/* -------- Utilities -------- */
.section-head { margin-bottom: 24px }
.link-muted { color: var(--muted); }
.link-muted:hover { color: var(--ink); }