/* ============================================================
   IONCARE — REDESIGN: Bold Monochrome + Coral Accent
   ============================================================ */

/* ── 1. OVERRIDE SHOPIFY BASE COLOR TOKENS ───────────────── */
:root {
    /* Buttons: near-black instead of teal */
    --color-base-button: 15 15 15 !important;
    --color-base-button-gradient: #0f0f0f !important;
    --color-base-button-text: 255 255 255 !important;

    /* Highlight / accent: vivid coral */
    --color-base-highlight: 232 72 40 !important;

    /* Background: warm off-white */
    --color-base-background: 250 248 245 !important;

    /* Text: deep near-black */
    --color-base-text: 12 12 12 !important;

    /* Drawer buttons: black */
    --color-drawer-button-background: 15 15 15 !important;
    --color-drawer-button-gradient: #0f0f0f !important;
    --color-drawer-button-text: 255 255 255 !important;

    /* Shadow: neutral instead of teal glow */
    --color-shadow: 0 0 0 !important;

    /* Shape: sharp/minimal radius */
    --rounded-button: 4px !important;
    --rounded-card: 6px !important;
    --rounded-block: 6px !important;

    /* Custom tokens */
    --neo-coral: #e84828;
    --neo-black: #0f0f0f;
    --neo-bg: #faf8f5;
    --neo-border: #d8d4cc;
    --neo-muted: #706d68;
    --transition: all 0.28s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Propagate to body and all custom-property inheritance chains */
body, html {
    --rounded-button: 4px !important;
    --rounded-card: 6px !important;
    background-color: var(--neo-bg) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── 2. TOPBAR / ANNOUNCEMENT BAR ────────────────────────── */
.topbar-section,
.topbar-section [id] {
    --gradient-background: #0f0f0f !important;
    --color-background: 15 15 15 !important;
    --color-foreground: 240 240 240 !important;
    --color-highlight: 232 72 40 !important;
    background: #0f0f0f !important;
    color: #f0f0f0 !important;
}

.topbar,
nav.topbar {
    background: #0f0f0f !important;
    color: #f0f0f0 !important;
}

.topbar a,
.topbar p,
.topbar span {
    color: #f0f0f0 !important;
}

/* ── 3. HEADER ───────────────────────────────────────────── */
.header-section,
.header-section [id] {
    --color-background: 15 15 15 !important;
    --color-foreground: 245 245 245 !important;
    --color-border: 40 40 40 !important;
}

.header,
.header__wrapper,
header.header {
    background: #0f0f0f !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid #2a2a2a !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
}

/* Logo text: white + coral dot / accent */
.header__logo-text,
.header .logo,
.header [class*="logo"] {
    color: #ffffff !important;
    font-weight: 800 !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
}

/* All header links/icons white */
.header a,
.header button,
.header svg,
.header .icon,
.header nav a {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

.header a:hover,
.header nav a:hover {
    color: var(--neo-coral) !important;
    stroke: var(--neo-coral) !important;
}

/* Cart count bubble: coral */
.cart-count-bubble {
    background-color: var(--neo-coral) !important;
    color: #fff !important;
}

/* ── 4. BUTTONS ──────────────────────────────────────────── */
.button,
.btn,
button.button--primary,
a.button--primary,
.button--primary {
    background: var(--neo-black) !important;
    border: 2px solid var(--neo-black) !important;
    color: #fff !important;
    border-radius: 4px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    font-size: 0.8rem !important;
    transition: var(--transition) !important;
    box-shadow: none !important;
}

.button:hover,
.button--primary:hover,
.btn:hover {
    background: var(--neo-coral) !important;
    border-color: var(--neo-coral) !important;
    color: #fff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(232, 72, 40, 0.35) !important;
}

/* Slideshow / hero CTA */
.slideshow-word .button--primary,
.banner__box .button--primary {
    backdrop-filter: none !important;
    background: var(--neo-coral) !important;
    border: 2px solid var(--neo-coral) !important;
    box-shadow: 0 4px 18px rgba(232, 72, 40, 0.4) !important;
    border-radius: 4px !important;
}

.slideshow-word .button--primary:hover,
.banner__box .button--primary:hover {
    background: #c83a1e !important;
    border-color: #c83a1e !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 28px rgba(232, 72, 40, 0.5) !important;
}

/* ── 5. PRODUCT CARDS ────────────────────────────────────── */
.product-card,
.card,
.card-wrapper {
    background: #ffffff !important;
    border-radius: 6px !important;
    border: 1.5px solid var(--neo-border) !important;
    box-shadow: none !important;
    transition: var(--transition) !important;
    overflow: hidden;
}

.product-card:hover,
.card:hover,
.card-wrapper:hover {
    border-color: var(--neo-black) !important;
    box-shadow: 4px 4px 0 0 var(--neo-black) !important;
    transform: translate(-2px, -2px) !important;
}

/* ── 6. SPLIT-WORDS TYPOGRAPHY ───────────────────────────── */
.split-words {
    font-weight: 300 !important;
}

.split-words .word:not(:first-child) {
    font-weight: 900 !important;
    color: var(--neo-coral) !important;
}

.split-words .word {
    margin-right: 0.3em;
}

/* Hero / banner headings */
.banner__box h2,
.hero__title,
.banner__heading {
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.25);
    letter-spacing: -0.02em;
    font-weight: 900;
}

/* ── 7. SECTION / RICH-TEXT BOXES ────────────────────────── */
.rich-text figure {
    border: 1.5px solid var(--neo-border) !important;
    box-shadow: none !important;
    background: #fff !important;
    border-radius: 6px !important;
    transition: var(--transition) !important;
}

.rich-text figure:hover {
    border-color: var(--neo-black) !important;
    box-shadow: 4px 4px 0 0 var(--neo-black) !important;
    transform: translate(-2px, -2px) !important;
}

/* Section headings */
.title-wrapper {
    padding-bottom: 2rem;
}

.title-wrapper h2,
.section-heading,
.collection-hero__title {
    position: relative;
    padding-bottom: 14px;
}

.title-wrapper h2::after,
.section-heading::after {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: var(--neo-coral);
    margin-top: 12px;
    border-radius: 0;
}

/* Section backgrounds: warm off-white */
.color-background-1,
[class*="color-scheme-1"],
.section--plain {
    background-color: var(--neo-bg) !important;
}

/* List markers */
.rich-text ul li::marker {
    color: var(--neo-coral);
}

/* ── 8. FOOTER ───────────────────────────────────────────── */
.footer,
.footer-section,
footer {
    background: #0f0f0f !important;
    color: #ccc !important;
    border-top: none !important;
}

.footer a,
.footer p,
.footer span,
.footer-section a,
.footer-section p {
    color: #aaa !important;
}

.footer a:hover,
.footer-section a:hover {
    color: var(--neo-coral) !important;
}

/* ── 9. CHECKOUT ─────────────────────────────────────────── */
.checkout-header {
    background: #0f0f0f;
    padding: 1.5rem 0;
    border-bottom: 1px solid #2a2a2a;
    margin-bottom: 2rem;
    box-shadow: none;
}

.checkout-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.checkout-header .logo {
    font-size: 1.3rem;
    font-weight: 900;
    color: #ffffff;
    text-decoration: none;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.checkout-header .logo span {
    font-weight: 300;
    color: var(--neo-coral);
}

.checkout-secure-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #888;
    font-weight: 500;
}

.checkout-secure-badge svg {
    color: #4ade80;
}

.step-indicator .step.active .step-circle {
    background: var(--neo-coral) !important;
    border-color: var(--neo-coral) !important;
}

.step-indicator .step.completed .step-circle {
    background: var(--neo-black) !important;
    border-color: var(--neo-black) !important;
}

/* ── 10. MISC ─────────────────────────────────────────────── */
.spacing-section {
    transition: height 0.3s ease;
}

@media (max-width: 768px) {
    .spacing-section {
        height: 20px !important;
    }
}

/* Price highlights */
.price--on-sale .price-item--sale,
.price--sale {
    color: var(--neo-coral) !important;
}

/* Focus ring */
:focus-visible {
    outline: 2px solid var(--neo-coral) !important;
    outline-offset: 2px !important;
}