/**
 * 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: none !important;
    background-color: #1e949c !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;
}

/* ============================================================
   6. Header mobile — logo centralizado na linha do menu/ícones
   (o Hyvä dá w-full ao logo no mobile, jogando-o pra linha própria)
   ============================================================ */
@media (max-width: 639.98px) {
    #header .container {
        position: relative;
    }
    #header .container > div:first-child {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: auto;
        padding-bottom: 0;
    }
    #header .container > div:first-child img {
        max-height: 42px;
        width: auto;
    }
}

/* ============================================================
   7. Menu desktop — manter as categorias em uma única linha
   (nomes longos com gap-x-7 do Hyvä quebravam o menu em 2 linhas,
   e a segunda linha ficava sob o dropdown)
   ============================================================ */
@media (min-width: 1024px) {
    #header .navigation nav > ul {
        flex-wrap: nowrap;
        column-gap: 1rem;
    }
    #header .navigation nav > ul > li > span {
        white-space: nowrap;
    }
    #header .navigation nav > ul > li > span > a.level-0 {
        font-size: 0.9375rem;
    }
}
@media (min-width: 1280px) {
    #header .navigation nav > ul {
        column-gap: 1.5rem;
    }
    #header .navigation nav > ul > li > span > a.level-0 {
        font-size: 1rem;
    }
}

/* ============================================================
   8. Card de produto — badge de desconto e subtítulo
   ============================================================ */
.product-item .product-discount-badge {
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.15);
}
.product-item .product-item-subtitle {
    min-height: 2.2em;
}