/**
 * PixelSaude Brand Overrides
 * Loaded AFTER styles.css — CSS custom properties cascade, so these override
 * Hyvä's default oklch blue tokens without touching the vendor build pipeline.
 */

/* ============================================================
   1. Brand CSS Token Overrides
   Replaces Hyvä's default blue oklch values with brand palette
   ============================================================ */
:root {
    --color-primary-lighter: #4A4F59;
    --color-primary:         #373B43;
    --color-primary-darker:  #23272F;
    --color-secondary-lighter: #4D9AAF;
    --color-secondary:         #378093;
    --color-secondary-darker:  #245A69;
    --color-on-primary:   #ffffff;
    --color-on-secondary: #ffffff;
}

/* ============================================================
   2. Gradient Buttons
   btn-primary (product cards, checkout CTA) and btn-brand (hero, newsletter)
   both use the coral→sand→teal gradient with SVG noise overlay
   ============================================================ */
.btn.btn-primary,
button.btn-primary,
a.btn-primary,
.btn-brand {
    position: relative;
    overflow: hidden;
    background-image: linear-gradient(90deg, #CB533F 0%, #AE8368 52%, #378093 100%) !important;
    background-color: transparent !important;
    color: #ffffff !important;
    border-color: transparent !important;
}

.btn.btn-primary::before,
button.btn-primary::before,
a.btn-primary::before,
.btn-brand::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 200px 200px;
    mix-blend-mode: overlay;
    opacity: 0.18;
    pointer-events: none;
    border-radius: inherit;
    z-index: 1;
}

/* Text and icons must sit above the noise layer */
.btn.btn-primary > *,
button.btn-primary > *,
a.btn-primary > *,
.btn-brand > * {
    position: relative;
    z-index: 2;
}

.btn.btn-primary:hover,
button.btn-primary:hover,
a.btn-primary:hover,
.btn-brand:hover {
    filter: brightness(1.08);
    color: #ffffff !important;
    text-decoration: none;
}

.btn.btn-primary:active,
button.btn-primary:active,
a.btn-primary:active,
.btn-brand:active {
    filter: brightness(0.95);
    transform: scale(0.98);
}

/* btn-brand standalone (used in hero / newsletter — without .btn base) */
.btn-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    border: 2px solid transparent;
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.5rem;
    user-select: none;
    vertical-align: middle;
    cursor: pointer;
    text-decoration: none;
    transition: filter 150ms ease, transform 150ms ease;
}

/* ============================================================
   3. Rating Stars — brand teal
   ============================================================ */
.rating-summary {
    color: #378093 !important;
}

/* ============================================================
   4. Header Icons — dark grey
   ============================================================ */
#header .btn.bg-transparent,
#header button.bg-transparent {
    color: #23272F;
}

/* ============================================================
   5. Cart badge — brand primary (dark grey background)
   ============================================================ */
#header span.bg-primary {
    background-color: #CB533F !important;
}