/* ============================================================
 * Denewar Theme — visual overrides
 * Dark surface + bold red accent + soft red glow on cards.
 * All colors reference CSS variables (var(--c-*)) so the
 * merchant can recolor from the standard color picker.
 * ============================================================ */

/* Body softer dark background with subtle red radial */
body {
    background:
        radial-gradient(circle at 85% -10%, rgba(var(--c-primary-rgb, 225,29,46), 0.10), transparent 55%),
        radial-gradient(circle at 0% 100%, rgba(var(--c-primary-rgb, 225,29,46), 0.05), transparent 50%),
        var(--c-bg);
}

/* ───── Header ───── */
#claude-header {
    border-bottom-color: var(--c-border);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02);
}

/* ───── Cards: rounded + red glow on hover ───── */
.bg-c-surface,
[class*="rounded-c-main"],
[class*="rounded-c-lg"] {
    transition: box-shadow .35s ease, transform .35s ease, border-color .35s ease;
}

.group:hover > .rounded-c-main,
a.group:hover .rounded-c-main {
    box-shadow:
        0 0 0 1px rgba(var(--c-primary-rgb, 225,29,46), 0.35),
        0 18px 40px -12px rgba(var(--c-primary-rgb, 225,29,46), 0.45);
}

/* Product card subtle outer glow */
[class*="product-card"],
.product-card {
    border-radius: 1rem;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
}
[class*="product-card"]:hover,
.product-card:hover {
    border-color: rgba(var(--c-primary-rgb, 225,29,46), 0.5);
    box-shadow: 0 12px 32px -10px rgba(var(--c-primary-rgb, 225,29,46), 0.4);
    transform: translateY(-2px);
}

/* ───── Primary CTA buttons: pill + glow ───── */
a[class*="bg-gradient-to-r"][class*="from-c-primary"],
button[class*="bg-gradient-to-r"][class*="from-c-primary"] {
    border-radius: 9999px;
    box-shadow:
        0 8px 20px -6px rgba(var(--c-primary-rgb, 225,29,46), 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
a[class*="bg-gradient-to-r"][class*="from-c-primary"]:hover,
button[class*="bg-gradient-to-r"][class*="from-c-primary"]:hover {
    box-shadow:
        0 12px 28px -8px rgba(var(--c-primary-rgb, 225,29,46), 0.75),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    filter: brightness(1.05);
}

/* Outline / secondary buttons sit on dark nicely */
a[class*="border-c-border"][class*="text-c-text"]:hover {
    background: rgba(var(--c-primary-rgb, 225,29,46), 0.08);
    border-color: rgba(var(--c-primary-rgb, 225,29,46), 0.6);
}

/* ───── Categories: stronger image overlay ───── */
section#categories a.group .absolute.inset-0.bg-gradient-to-t {
    background-image: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.92) 0%,
        rgba(0, 0, 0, 0.55) 40%,
        rgba(0, 0, 0, 0.05) 100%
    );
}
section#categories a.group:hover img {
    transform: scale(1.08);
}

/* ───── Hero badge: pill-style brand chip ───── */
section#hero .inline-flex.rounded-full {
    background: rgba(var(--c-primary-rgb, 225,29,46), 0.12);
    border-color: rgba(var(--c-primary-rgb, 225,29,46), 0.35);
    backdrop-filter: blur(6px);
}

/* ───── Testimonials: dark quote glyph more visible ───── */
section#testimonials .text-c-text\/5 {
    color: rgba(var(--c-primary-rgb, 225,29,46), 0.10) !important;
}

/* ───── Footer: stronger contrast on dark ───── */
footer {
    background: linear-gradient(180deg, var(--c-surface) 0%, #0a0a0a 100%);
}
footer .border-white\/10 {
    border-color: rgba(255, 255, 255, 0.06);
}

/* ───── Cart sidebar polish ───── */
[x-show="$store.ui.cartOpen"] .border-l {
    border-color: var(--c-border);
}

/* ───── Scrollbar (cosmetic, dark only) ───── */
.custom-scrollbar::-webkit-scrollbar { width: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(var(--c-primary-rgb, 225,29,46), 0.4);
    border-radius: 9999px;
}