/* =========================================================================
   SparkleWorks design system
   A festive-but-trustworthy identity for a fireworks/crackers storefront:
   deep night-sky ink + warm gold + spark-red accent. Layered on top of
   Bootstrap 5 (loaded via CDN in the layouts) using its CSS custom
   properties, so we get Bootstrap's grid/utilities for free while the
   look stays distinctive rather than default-Bootstrap-blue.
   ========================================================================= */

:root {
    --sw-ink:        #14162B;   /* near-black navy - body text, dark surfaces */
    --sw-night:       #171A34;  /* hero / header background (night sky) */
    --sw-night-2:     #23264A;  /* secondary night gradient stop */
    --sw-gold:        #F0B429;  /* primary accent - festive gold */
    --sw-gold-dark:   #C6890B;
    --sw-spark:       #E8433A;  /* CTA / spark-red accent */
    --sw-spark-dark:  #B8281F;
    --sw-bg:          #FBF9F4;  /* warm-white page background */
    --sw-surface:     #FFFFFF;
    --sw-muted:       #6B6E85;
    --sw-line:        #E9E5D8;

    --bs-primary: var(--sw-spark);
    --bs-primary-rgb: 232, 67, 58;
    --bs-link-color: var(--sw-spark);
    --bs-link-hover-color: var(--sw-spark-dark);
    --bs-body-color: var(--sw-ink);
    --bs-body-bg: var(--sw-bg);
    --bs-border-radius: .6rem;
    --bs-border-radius-lg: .9rem;
    --bs-border-radius-sm: .4rem;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--sw-bg);
    color: var(--sw-ink);
}

h1, h2, h3, h4, h5, h6, .font-display {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    letter-spacing: -0.01em;
}

/* Prices, order numbers, SKUs - a distinct "ticket/receipt" mono treatment
   used consistently site-wide so numbers always feel authoritative. */
.price, .font-mono {
    font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
    font-weight: 600;
    letter-spacing: -0.02em;
}

a { text-decoration: none; }

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */
.btn {
    border-radius: 999px;
    font-weight: 600;
    padding-left: 1.15rem;
    padding-right: 1.15rem;
}

.btn-primary {
    background: var(--sw-spark);
    border-color: var(--sw-spark);
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--sw-spark-dark);
    border-color: var(--sw-spark-dark);
}

.btn-gold {
    background: var(--sw-gold);
    border-color: var(--sw-gold);
    color: var(--sw-ink);
}
.btn-gold:hover {
    background: var(--sw-gold-dark);
    border-color: var(--sw-gold-dark);
    color: #fff;
}

.btn-outline-primary {
    color: var(--sw-spark);
    border-color: var(--sw-spark);
}
.btn-outline-primary:hover {
    background: var(--sw-spark);
    border-color: var(--sw-spark);
}

/* Little arrow nudge on primary CTAs, used sparingly (add-to-cart, submit). */
.btn-cta .btn-arrow { display: inline-block; transition: transform .15s ease; margin-left: .35rem; }
.btn-cta:hover .btn-arrow { transform: translateX(3px); }

/* ---------------------------------------------------------------------
   Header / nav
   --------------------------------------------------------------------- */
.sw-topbar {
    background: var(--sw-night);
    color: #E7E7F2;
    font-size: .82rem;
}
.sw-topbar a { color: #C9CBE0; }
.sw-topbar a:hover { color: #fff; }

.sw-navbar {
    background: var(--sw-surface);
    border-bottom: 1px solid var(--sw-line);
}

.sw-brand {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--sw-ink) !important;
}
.sw-brand .spark { color: var(--sw-spark); }

.sw-category-strip {
    background: var(--sw-ink);
    overflow-x: auto;
    white-space: nowrap;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.sw-category-strip::-webkit-scrollbar { display: none; }
.sw-category-strip a {
    color: #D6D7E6;
    font-size: .85rem;
    padding: .55rem .9rem;
    display: inline-block;
    border-bottom: 2px solid transparent;
}
.sw-category-strip a:hover, .sw-category-strip a.active {
    color: var(--sw-gold);
    border-bottom-color: var(--sw-gold);
}

/* ---------------------------------------------------------------------
   Hero (night sky + animated fireworks canvas, see components/fireworks)
   --------------------------------------------------------------------- */
.sw-hero {
    position: relative;
    background: radial-gradient(ellipse at top, var(--sw-night-2) 0%, var(--sw-night) 60%, #0D0E1E 100%);
    color: #fff;
    overflow: hidden;
}
.sw-hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.sw-hero .sw-hero-content { position: relative; z-index: 2; }
.sw-hero h1 { font-size: clamp(1.8rem, 4.5vw, 3.1rem); }
.sw-hero .lead { color: #C9CBE0; }

.sw-safety-strip {
    background: #FFF6DE;
    border-top: 1px solid #F0DFA5;
    border-bottom: 1px solid #F0DFA5;
    font-size: .85rem;
}

/* ---------------------------------------------------------------------
   Product cards
   --------------------------------------------------------------------- */
.sw-card {
    background: var(--sw-surface);
    border: 1px solid var(--sw-line);
    border-radius: var(--bs-border-radius-lg);
    overflow: hidden;
    transition: box-shadow .18s ease, transform .18s ease;
    position: relative;
    padding: 10px 15px;
}
.sw-card:hover {
    box-shadow: 0 10px 24px rgba(20, 22, 43, .08);
    transform: translateY(-2px);
}

.sw-card .sw-thumb {
    background: linear-gradient(160deg, #FBF3DD 0%, #F5E8C8 100%);
}

/* Diagonal discount ribbon - the site's signature badge, used instead of
   a generic corner-square badge. */
.sw-ribbon {
    position: absolute;
    top: 14px;
    left: -34px;
    width: 130px;
    transform: rotate(-45deg);
    background: var(--sw-spark);
    color: #fff;
    font-family: 'IBM Plex Mono', monospace;
    font-size: .72rem;
    font-weight: 700;
    text-align: center;
    padding: .2rem 0;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
    z-index: 3;
}

.badge-stock {
    background: #E8F5E9;
    color: #1B5E20;
}
.badge-out {
    background: #F3F0FA;
    color: #6B6E85;
}

/* Order status badges (used instead of Bootstrap's flat bg-* utilities) */
.badge-status-pending    { background:#FFF3CD; color:#7A5B00; }
.badge-status-processing { background:#E0ECFF; color:#1B4695; }
.badge-status-shipped    { background:#E4E0FA; color:#4A2FA8; }
.badge-status-delivered  { background:#E1F5E4; color:#166534; }
.badge-status-cancelled  { background:#FBE2E1; color:#9A2B23; }

/* ---------------------------------------------------------------------
   Misc
   --------------------------------------------------------------------- */
.sw-section-title {
    display: flex;
    align-items: center;
    gap: .6rem;
}
.sw-section-title .dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--sw-spark);
    display: inline-block;
}

.sw-footer {
    background: var(--sw-ink);
    color: #C9CBE0;
}
.sw-footer a { color: #C9CBE0; }
.sw-footer a:hover { color: var(--sw-gold); }
.sw-footer h6 { color: #fff; }

.sw-faq-item .accordion-button:not(.collapsed) {
    background: #FFF6DE;
    color: var(--sw-ink);
    box-shadow: none;
}
.sw-faq-item .accordion-button:focus { box-shadow: none; }

@media (max-width: 576px) {
    .btn { font-size: .9rem; }
    .sw-hero { padding-top: 2.5rem; padding-bottom: 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .sw-hero canvas { display: none; }
}