/* =========================================================
   ██████╗ SEYNCLOTHING — CSS COMPLETO
   ██╔══██╗  Moda editorial · Azul profundo & Preto
   ██████╔╝  Playfair Display + Inter + Space Grotesk
   ██╔══██╗  Versão 6.0 — limpo e sem conflitos
   ██████╔╝
   ╚═════╝
   ========================================================= */


/* =========================================================
   01. DESIGN TOKENS
   ========================================================= */
:root {

    --ink-0:      #04060b;
    --ink-1:      #070a12;
    --ink-2:      #0b1120;
    --ink-3:      #101a2e;
    --ink-4:      #17233d;

    --blue-0:     #0a2fa8;
    --blue-1:     #1a4dff;
    --blue-2:     #4d7cff;
    --blue-3:     #7fb0ff;
    --blue-4:     #b8d4ff;

    --paper-0:    #f5f7ff;
    --paper-1:    #e0e6f5;
    --paper-2:    #a4b2ca;
    --paper-3:    #5d6b83;
    --paper-4:    #38455c;

    --line-0:     rgba(127, 176, 255, .08);
    --line-1:     rgba(127, 176, 255, .16);
    --line-2:     rgba(127, 176, 255, .28);
    --line-3:     rgba(127, 176, 255, .45);
    --line-4:     rgba(127, 176, 255, .75);

    --halo-soft:  0 0 80px rgba(26, 77, 255, .18);
    --halo-mid:   0 0 60px rgba(26, 77, 255, .30);
    --halo-hard:  0 0 40px rgba(26, 77, 255, .50);

    --ff-display: 'Playfair Display', 'Times New Roman', Georgia, serif;
    --ff-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --ff-mono:    'Space Grotesk', 'JetBrains Mono', ui-monospace, monospace;

    --fs-nano:    clamp(0.60rem, 0.55rem + 0.20vw, 0.70rem);
    --fs-micro:   clamp(0.68rem, 0.62rem + 0.25vw, 0.78rem);
    --fs-label:   clamp(0.72rem, 0.66rem + 0.28vw, 0.82rem);
    --fs-small:   clamp(0.82rem, 0.76rem + 0.30vw, 0.92rem);
    --fs-body:    clamp(0.95rem, 0.88rem + 0.35vw, 1.05rem);
    --fs-lead:    clamp(1.10rem, 0.98rem + 0.50vw, 1.30rem);
    --fs-h4:      clamp(1.15rem, 1.00rem + 0.80vw, 1.50rem);
    --fs-h3:      clamp(1.50rem, 1.20rem + 1.40vw, 2.40rem);
    --fs-h2:      clamp(2.00rem, 1.40rem + 2.80vw, 4.00rem);
    --fs-h1:      clamp(2.60rem, 1.60rem + 5.00vw, 6.20rem);
    --fs-mega:    clamp(3.40rem, 1.60rem + 8.00vw, 9.00rem);
    --fs-giga:    clamp(5.00rem, 2.00rem + 14.0vw, 18.0rem);

    --gutter:     clamp(20px, 5vw, 96px);
    --gutter-y:   clamp(60px, 9vw, 140px);
    --header-h:   clamp(70px, 8vw, 92px);

    --space-1:    4px;
    --space-2:    8px;
    --space-3:    12px;
    --space-4:    16px;
    --space-5:    24px;
    --space-6:    32px;
    --space-7:    48px;
    --space-8:    64px;
    --space-9:    96px;

    --radius-0:    0px;
    --radius-1:    2px;
    --radius-pill: 999px;

    --ease-soft:    cubic-bezier(.22, 1, .36, 1);
    --ease-reveal:  cubic-bezier(.65, .05, .36, 1);
    --ease-back:    cubic-bezier(.34, 1.56, .64, 1);
    --ease-swift:   cubic-bezier(.16, 1, .30, 1);

    --t-fast:   .25s;
    --t-mid:    .45s;
    --t-slow:   .75s;
    --t-lazy:   1.20s;
}


/* =========================================================
   02. RESET & BASE
   ========================================================= */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    background: var(--ink-0);
    color: var(--paper-1);
    font-family: var(--ff-sans);
    font-size: var(--fs-body);
    font-weight: 400;
    line-height: 1.7;
    padding-top: var(--header-h);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "ss01" 1, "cv11" 1, "kern" 1, "liga" 1;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        radial-gradient(1200px 800px at 15% -10%, rgba(26, 77, 255, .10), transparent 60%),
        radial-gradient(900px 700px at 105% 15%, rgba(10, 47, 168, .14), transparent 65%),
        radial-gradient(1100px 900px at 50% 120%, rgba(26, 77, 255, .07), transparent 70%);
    pointer-events: none;
    z-index: 0;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.6 0 0 0 0 1 0 0 0 0.035 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
    opacity: .55;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 1;
}

body > * {
    position: relative;
    z-index: 2;
}

a { color: inherit; text-decoration: none; }

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
    color: inherit;
}

img, picture, video, svg { max-width: 100%; display: block; }

input, textarea, select { font: inherit; color: inherit; }

ul, ol { list-style: none; }

::selection { background: var(--blue-1); color: #fff; }
::-moz-selection { background: var(--blue-1); color: #fff; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ink-0); border-left: 1px solid var(--line-0); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--blue-1), var(--blue-0));
    border: 2px solid var(--ink-0);
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--blue-2), var(--blue-1));
}


/* =========================================================
   03. TIPOGRAFIA
   ========================================================= */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--ff-display);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--paper-0);
}

h1 { font-size: var(--fs-h1); font-style: italic; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { font-size: var(--fs-body); line-height: 1.75; color: var(--paper-2); }

strong, b { font-weight: 700; color: var(--paper-0); }

em, i { font-family: var(--ff-display); font-style: italic; }

code, kbd, samp { font-family: var(--ff-mono); font-size: .9em; }


/* =========================================================
   04. UTILITÁRIOS
   ========================================================= */
.skip-link {
    position: absolute;
    top: -100px;
    left: 20px;
    padding: 12px 20px;
    background: var(--blue-1);
    color: #fff;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    z-index: 9999;
    transition: top .3s var(--ease-soft);
}
.skip-link:focus { top: 20px; }

.reveal {
    opacity: 0;
    transform: translateY(48px);
    transition: opacity 1s var(--ease-reveal), transform 1s var(--ease-reveal);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

.reveal-left {
    opacity: 0;
    transform: translateX(-60px);
    transition: all 1s var(--ease-reveal);
}
.reveal-left.visible { opacity: 1; transform: translateX(0); }

.reveal-right {
    opacity: 0;
    transform: translateX(60px);
    transition: all 1s var(--ease-reveal);
}
.reveal-right.visible { opacity: 1; transform: translateX(0); }

.reveal-mask { overflow: hidden; display: inline-block; vertical-align: bottom; }
.reveal-mask > span { display: inline-block; transform: translateY(105%); transition: transform 1.1s var(--ease-reveal); }
.reveal-mask.visible > span { transform: translateY(0); }

.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }
.reveal-delay-4 { transition-delay: .4s; }
.reveal-delay-5 { transition-delay: .5s; }

.container { width: 100%; max-width: 1500px; margin: 0 auto; padding: 0 var(--gutter); }
.container-narrow { width: 100%; max-width: 900px; margin: 0 auto; padding: 0 var(--gutter); }

.divider-marker {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0 var(--gutter);
    margin: var(--gutter-y) 0;
    color: var(--paper-3);
}
.divider-marker::before, .divider-marker::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line-1);
}
.divider-marker span {
    font-family: var(--ff-display);
    font-style: italic;
    font-size: .9rem;
    letter-spacing: .12em;
}

.link-underline { position: relative; display: inline-block; }
.link-underline::after {
    content: "";
    position: absolute;
    left: 0; bottom: -4px;
    width: 100%; height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .5s var(--ease-soft);
}
.link-underline:hover::after { transform: scaleX(1); transform-origin: left; }


/* =========================================================
   05. LOADER
   ========================================================= */
.loader {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    background: var(--ink-0);
    z-index: 9998;
    transition: opacity .8s var(--ease-soft), visibility .8s var(--ease-soft);
}
.loader.done { opacity: 0; visibility: hidden; }
.loader-inner { text-align: center; }
.loader-brand {
    display: inline-flex;
    gap: 3px;
    font-family: var(--ff-display);
    font-style: italic;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    color: var(--paper-0);
    margin-bottom: 30px;
}
.loader-letter { opacity: 0; transform: translateY(20px); animation: loaderLetter .5s var(--ease-back) forwards; }
.loader-letter:nth-child(1) { animation-delay: .05s; }
.loader-letter:nth-child(2) { animation-delay: .10s; }
.loader-letter:nth-child(3) { animation-delay: .15s; }
.loader-letter:nth-child(4) { animation-delay: .20s; }
.loader-letter:nth-child(5) { animation-delay: .25s; }
.loader-letter:nth-child(6) { animation-delay: .30s; }
.loader-letter:nth-child(7) { animation-delay: .35s; }
.loader-letter:nth-child(8) { animation-delay: .40s; }
.loader-letter:nth-child(9) { animation-delay: .45s; }
@keyframes loaderLetter { to { opacity: 1; transform: translateY(0); } }
.loader-line { width: 200px; height: 1px; background: var(--line-1); margin: 0 auto 20px; overflow: hidden; }
.loader-line span { display: block; width: 0; height: 100%; background: var(--blue-1); animation: loaderLine 2s var(--ease-soft) forwards; }
@keyframes loaderLine { to { width: 100%; } }
.loader-meta {
    font-family: var(--ff-mono);
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .3em;
    color: var(--paper-3);
    text-transform: uppercase;
}


/* =========================================================
   06. CURSOR / HALO
   ========================================================= */
.cursor-halo {
    position: fixed;
    top: 0; left: 0;
    width: 360px; height: 360px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(26, 77, 255, .12), transparent 65%);
    pointer-events: none;
    transform: translate(-50%, -50%);
    mix-blend-mode: screen;
    z-index: 3;
    transition: opacity .4s var(--ease-soft);
}


/* =========================================================
   07. HEADER
   ========================================================= */
.header {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: var(--header-h);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
    padding: 0 var(--gutter);
    background: rgba(4, 6, 11, .82);
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    border-bottom: 1px solid var(--line-0);
    z-index: 200;
    transition: height .5s var(--ease-soft), background .5s var(--ease-soft), border-color .5s var(--ease-soft);
}

.header::after {
    content: "";
    position: absolute;
    left: 0; bottom: -1px;
    width: 100%; height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--blue-1) 25%, var(--blue-3) 50%, var(--blue-1) 75%, transparent 100%);
    background-size: 220% 100%;
    opacity: .5;
    animation: headerEnergy 8s linear infinite;
    pointer-events: none;
}

@keyframes headerEnergy { to { background-position: 220% 0; } }

.header.scrolled {
    height: 68px;
    background: rgba(4, 6, 11, .94);
    border-bottom-color: var(--line-1);
    box-shadow: 0 1px 0 rgba(127, 176, 255, .06), 0 20px 60px rgba(0, 0, 0, .55);
}

.logo {
    grid-column: 2;
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    font-family: var(--ff-display);
    font-size: clamp(1.5rem, 1rem + 1.4vw, 2rem);
    font-weight: 700;
    font-style: italic;
    letter-spacing: .02em;
    color: var(--paper-0);
    text-align: center;
    white-space: nowrap;
    transition: letter-spacing .6s var(--ease-soft), transform .5s var(--ease-soft);
}

.logo span {
    font-style: normal;
    font-weight: 400;
    color: var(--blue-3);
    padding-left: 3px;
    transition: color .4s var(--ease-soft);
}

.logo:hover { letter-spacing: .04em; transform: translateY(-1px); }
.logo:hover span { color: var(--blue-2); }

.nav {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: clamp(12px, 1.8vw, 28px);
}

.nav a {
    position: relative;
    display: inline-block;
    font-family: var(--ff-sans);
    font-size: var(--fs-micro);
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--paper-2);
    padding: 8px 0;
    transition: color .35s var(--ease-soft), letter-spacing .5s var(--ease-soft);
}

.nav a::before {
    content: "";
    position: absolute;
    left: -14px; top: 50%;
    width: 4px; height: 4px;
    background: var(--blue-1);
    border-radius: 50%;
    transform: translateY(-50%) scale(0);
    transition: transform .5s var(--ease-back);
}

.nav a:hover { color: var(--paper-0); letter-spacing: .26em; }
.nav a:hover::before { transform: translateY(-50%) scale(1); }
.nav a.active { color: var(--paper-0); }
.nav a.active::before { transform: translateY(-50%) scale(1); }
.nav .nav-close { display: none; }

.header-actions {
    grid-column: 3;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

.search-button,
.cart-button,
.menu-button {
    position: relative;
    width: 42px; height: 42px;
    display: grid;
    place-items: center;
    font-size: 1rem;
    color: var(--paper-2);
    border: 1px solid transparent;
    border-radius: 50%;
    transition: color .35s var(--ease-soft), background .35s var(--ease-soft), border-color .35s var(--ease-soft), transform .4s var(--ease-back);
}

.search-button:hover,
.cart-button:hover,
.menu-button:hover {
    color: var(--paper-0);
    background: rgba(127, 176, 255, .06);
    border-color: var(--line-2);
    transform: translateY(-2px);
}

#cart-count {
    position: absolute;
    top: 3px; right: 3px;
    min-width: 17px; height: 17px;
    display: grid;
    place-items: center;
    padding: 0 5px;
    font-family: var(--ff-mono);
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: 0;
    color: #fff;
    background: var(--blue-1);
    border-radius: var(--radius-pill);
    box-shadow: 0 0 0 2px var(--ink-0);
    transition: transform .4s var(--ease-back);
}
#cart-count.bump { animation: cartBump .5s var(--ease-back); }
@keyframes cartBump {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.4); }
    100% { transform: scale(1); }
}

.menu-button { display: none; }


/* =========================================================
   07.B BOTÃO DE CONTA — header
   ========================================================= */
.conta-wrap {
    position: relative;
    display: inline-block;
}

.conta-button {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 14px;
    color: #a4b2ca;
    border: 1px solid transparent;
    border-radius: 99px;
    text-decoration: none;
    transition: all .35s cubic-bezier(.22, 1, .36, 1);
    white-space: nowrap;
}

.conta-button:hover {
    color: #f5f7ff;
    background: rgba(127, 176, 255, .06);
    border-color: rgba(127, 176, 255, .28);
}

.conta-button svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.conta-nome {
    display: none;
    font-family: var(--ff-sans);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .04em;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.conta-button.logado .conta-nome { display: inline; }

.conta-button.logado {
    color: #10b981;
    border-color: rgba(16, 185, 129, .3);
    background: rgba(16, 185, 129, .08);
}

.conta-button.logado:hover {
    color: #34d399;
    border-color: #10b981;
    background: rgba(16, 185, 129, .14);
}

.conta-button.logado::after {
    content: "";
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
    border: 2px solid #04060b;
    box-shadow: 0 0 8px #10b981;
}

.conta-dropdown {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    min-width: 280px;
    padding: 6px;
    background: #070a12;
    border: 1px solid rgba(127, 176, 255, .28);
    border-radius: 12px;
    box-shadow:
        0 30px 80px rgba(0, 0, 0, .6),
        0 0 40px rgba(26, 77, 255, .1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all .3s cubic-bezier(.22, 1, .36, 1);
    z-index: 300;
    pointer-events: none;
}

.conta-wrap.aberto .conta-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.conta-dropdown-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 12px;
    border-bottom: 1px solid rgba(127, 176, 255, .16);
    margin-bottom: 6px;
}

.conta-avatar {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #1a4dff, #0a2fa8);
    color: #fff;
    font-family: var(--ff-display);
    font-size: 1.15rem;
    font-weight: 700;
    font-style: italic;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(26, 77, 255, .35);
}

.conta-dropdown-head > div { min-width: 0; flex: 1; }

.conta-dropdown-head strong {
    display: block;
    font-family: var(--ff-sans);
    font-size: .88rem;
    font-weight: 600;
    color: #f5f7ff;
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.conta-dropdown-head small {
    display: block;
    font-family: var(--ff-sans);
    font-size: .72rem;
    color: #5d6b83;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.conta-dropdown ul { padding: 4px; list-style: none; margin: 0; }

.conta-dropdown ul li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    font-family: var(--ff-sans);
    font-size: .84rem;
    font-weight: 500;
    color: #a4b2ca;
    text-decoration: none;
    border-radius: 6px;
    transition: all .25s cubic-bezier(.22, 1, .36, 1);
}

.conta-dropdown ul li a:hover {
    color: #f5f7ff;
    background: #0b1120;
}

.conta-dropdown ul li a svg {
    width: 15px;
    height: 15px;
    color: #7fb0ff;
    flex-shrink: 0;
}

.conta-dropdown-foot {
    padding: 4px;
    border-top: 1px solid rgba(127, 176, 255, .16);
    margin-top: 6px;
}

.conta-dropdown-foot button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    font-family: var(--ff-sans);
    font-size: .84rem;
    font-weight: 500;
    color: #ff6b6b;
    border-radius: 6px;
    transition: all .25s cubic-bezier(.22, 1, .36, 1);
    text-align: left;
    background: transparent;
    border: none;
    cursor: pointer;
}

.conta-dropdown-foot button:hover {
    background: rgba(239, 68, 68, .08);
    color: #ff8585;
}

.conta-dropdown-foot button svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}


/* =========================================================
   08. MENU MOBILE + BACKDROP
   ========================================================= */
.nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(4, 6, 11, .72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    z-index: 190;
    transition: opacity .5s var(--ease-soft), visibility .5s var(--ease-soft);
}
.nav-backdrop.active { opacity: 1; visibility: visible; }


/* =========================================================
   09. OVERLAY DE BUSCA
   ========================================================= */
.search-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--gutter);
    background: rgba(4, 6, 11, .94);
    backdrop-filter: blur(28px) saturate(140%);
    -webkit-backdrop-filter: blur(28px) saturate(140%);
    opacity: 0;
    visibility: hidden;
    z-index: 400;
    transition: opacity .55s var(--ease-soft), visibility .55s var(--ease-soft);
}
.search-overlay.open { opacity: 1; visibility: visible; }

.search-overlay::before {
    content: "BUSCAR";
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--ff-display);
    font-style: italic;
    font-weight: 700;
    font-size: clamp(8rem, 26vw, 32rem);
    line-height: .8;
    letter-spacing: -.05em;
    color: transparent;
    -webkit-text-stroke: 1px var(--line-0);
    pointer-events: none;
    user-select: none;
    opacity: .5;
}

.search-box {
    position: relative;
    width: min(760px, 100%);
    padding: clamp(32px, 5vw, 60px) 0;
    border-top: 1px solid var(--line-1);
    border-bottom: 1px solid var(--line-1);
    transform: translateY(24px);
    opacity: 0;
    transition: transform .7s var(--ease-soft) .05s, opacity .7s var(--ease-soft) .05s;
}
.search-overlay.open .search-box { transform: translateY(0); opacity: 1; }

.close-search {
    position: absolute;
    top: -68px; right: 0;
    width: 46px; height: 46px;
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--paper-2);
    border: 1px solid var(--line-1);
    border-radius: 50%;
    transition: all .4s var(--ease-soft);
}
.close-search:hover {
    color: var(--paper-0);
    border-color: var(--blue-1);
    background: rgba(26, 77, 255, .1);
    transform: rotate(90deg);
}

.search-box p {
    font-family: var(--ff-display);
    font-size: clamp(1.4rem, 1rem + 1.4vw, 2rem);
    font-style: italic;
    font-weight: 400;
    color: var(--paper-2);
    margin-bottom: 30px;
}

.search-box input {
    width: 100%;
    padding: 16px 0;
    font-family: var(--ff-display);
    font-size: clamp(1.6rem, 1rem + 2.4vw, 2.6rem);
    font-style: italic;
    color: var(--paper-0);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--line-2);
    outline: none;
    transition: border-color .4s var(--ease-soft);
}
.search-box input::placeholder { color: var(--paper-3); font-style: italic; }
.search-box input:focus { border-bottom-color: var(--blue-1); }

.search-box > button:last-child {
    margin-top: 30px;
    padding: 12px 0;
    font-family: var(--ff-sans);
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--paper-2);
    border-bottom: 1px solid transparent;
    transition: color .35s var(--ease-soft), border-color .35s var(--ease-soft), padding-left .35s var(--ease-soft);
}
.search-box > button:last-child:hover {
    color: var(--paper-0);
    border-bottom-color: var(--blue-1);
    padding-left: 12px;
}


/* =========================================================
   10. HERO
   ========================================================= */
.hero {
    position: relative;
    min-height: calc(100vh - var(--header-h));
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    align-items: end;
    gap: clamp(30px, 5vw, 80px);
    padding: clamp(60px, 9vw, 120px) var(--gutter) clamp(50px, 7vw, 100px);
    overflow: hidden;
    background:
        radial-gradient(1000px 800px at 78% 10%, rgba(26, 77, 255, .22), transparent 60%),
        radial-gradient(800px 600px at 8% 92%, rgba(10, 47, 168, .28), transparent 65%),
        linear-gradient(180deg, var(--ink-0) 0%, var(--ink-1) 60%, var(--ink-0) 100%);
}

.hero::before {
    content: "";
    position: absolute;
    inset: -4px;
    background-image:
        linear-gradient(var(--line-0) 1px, transparent 1px),
        linear-gradient(90deg, var(--line-0) 1px, transparent 1px);
    background-size: 80px 80px;
    -webkit-mask-image: radial-gradient(ellipse at 55% 40%, #000 0%, transparent 80%);
    mask-image: radial-gradient(ellipse at 55% 40%, #000 0%, transparent 80%);
    opacity: .9;
    animation: heroGridDrift 40s linear infinite;
    pointer-events: none;
}
@keyframes heroGridDrift { to { background-position: 80px 80px; } }

.hero::after {
    content: "Nº 01 — OUTONO / INVERNO 2026";
    position: absolute;
    left: 24px; top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: left center;
    font-family: var(--ff-mono);
    font-size: .62rem;
    font-weight: 500;
    letter-spacing: .38em;
    text-transform: uppercase;
    color: var(--paper-3);
    white-space: nowrap;
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 3;
    max-width: 880px;
    animation: heroRise 1.1s var(--ease-soft) both;
}

@keyframes heroRise {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
}

.hero-small {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--ff-sans);
    font-size: var(--fs-micro);
    font-weight: 600;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: var(--blue-3);
    padding-bottom: 14px;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--line-2);
    animation: heroRise 1.1s .1s var(--ease-soft) both;
}
.hero-small::before {
    content: "";
    width: 6px; height: 6px;
    background: var(--blue-1);
    border-radius: 50%;
    box-shadow: 0 0 12px var(--blue-1);
}

.hero h1 {
    font-family: var(--ff-display);
    font-size: var(--fs-h1);
    font-weight: 400;
    font-style: italic;
    line-height: .94;
    letter-spacing: -.025em;
    margin-bottom: 34px;
    color: var(--paper-0);
    animation: heroRise 1.1s .2s var(--ease-soft) both;
}
.hero h1 span { display: block; font-style: normal; font-weight: 700; color: var(--blue-3); }

.hero-description {
    max-width: 520px;
    font-family: var(--ff-sans);
    font-size: var(--fs-lead);
    line-height: 1.7;
    color: var(--paper-2);
    margin-bottom: 46px;
    animation: heroRise 1.1s .3s var(--ease-soft) both;
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    animation: heroRise 1.1s .4s var(--ease-soft) both;
}

.btn-primary,
.btn-secondary {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 17px 32px;
    font-family: var(--ff-sans);
    font-size: var(--fs-micro);
    font-weight: 600;
    letter-spacing: .3em;
    text-transform: uppercase;
    border-radius: var(--radius-0);
    overflow: hidden;
    transition: color .4s var(--ease-soft), background .4s var(--ease-soft), border-color .4s var(--ease-soft), transform .5s var(--ease-back);
}

.btn-primary::after,
.btn-secondary::after {
    content: "";
    display: inline-block;
    width: 22px;
    height: 1px;
    background: currentColor;
    transition: width .5s var(--ease-soft);
}

.btn-primary { color: var(--paper-0); background: #1a1a1a; }
.btn-primary:hover { background: #000; transform: translateY(-2px); }
.btn-primary:hover::after { width: 44px; }

.btn-secondary { color: var(--paper-0); background: transparent; border: 1px solid var(--line-2); }
.btn-secondary:hover { border-color: var(--blue-1); background: rgba(26, 77, 255, .08); transform: translateY(-2px); }
.btn-secondary:hover::after { width: 44px; }

.btn-block { width: 100%; justify-content: center; }

.hero-decoration {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding-bottom: 12px;
}
.hero-decoration span {
    font-family: var(--ff-display);
    font-size: var(--fs-giga);
    font-weight: 400;
    font-style: italic;
    line-height: .78;
    letter-spacing: -.05em;
    color: transparent;
    -webkit-text-stroke: 1px var(--line-2);
    user-select: none;
    pointer-events: none;
    animation: heroRise 1.3s .5s var(--ease-soft) both;
}


/* =========================================================
   11. TICKER
   ========================================================= */
.ticker {
    position: relative;
    display: flex;
    align-items: center;
    padding: 22px 0;
    background: var(--ink-1);
    border-top: 1px solid var(--line-1);
    border-bottom: 1px solid var(--line-1);
    overflow: hidden;
}
.ticker::before, .ticker::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    width: 100px;
    z-index: 2;
    pointer-events: none;
}
.ticker::before { left: 0; background: linear-gradient(90deg, var(--ink-1), transparent); }
.ticker::after { right: 0; background: linear-gradient(270deg, var(--ink-1), transparent); }

.ticker-track {
    display: flex;
    align-items: center;
    gap: 60px;
    white-space: nowrap;
    animation: tickerSlide 34s linear infinite;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-track > * {
    font-family: var(--ff-display);
    font-size: clamp(1rem, .8rem + .8vw, 1.5rem);
    font-style: italic;
    letter-spacing: .02em;
    color: var(--paper-2);
    display: inline-flex;
    align-items: center;
    gap: 60px;
}
.ticker-track > *::after {
    content: "◆";
    font-style: normal;
    font-size: .5em;
    color: var(--blue-1);
}
@keyframes tickerSlide { to { transform: translateX(-50%); } }


/* =========================================================
   12. TÍTULOS DE SEÇÃO
   ========================================================= */
.section-title { max-width: 1000px; margin: 0 0 clamp(48px, 6vw, 84px); }
.section-title > p {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: var(--ff-sans);
    font-size: var(--fs-micro);
    font-weight: 600;
    letter-spacing: .36em;
    text-transform: uppercase;
    color: var(--blue-3);
    margin-bottom: 22px;
}
.section-title > p::before {
    content: "";
    width: 40px;
    height: 1px;
    background: var(--blue-1);
}
.section-title h2 {
    font-family: var(--ff-display);
    font-size: var(--fs-h2);
    font-weight: 400;
    font-style: italic;
    line-height: 1;
    letter-spacing: -.025em;
    color: var(--paper-0);
}
.section-title h2 span { display: block; font-style: normal; font-weight: 700; color: var(--blue-3); }


/* =========================================================
   13. CATEGORIAS PRINCIPAIS
   ========================================================= */
.categories { padding: var(--gutter-y) var(--gutter); position: relative; }

.category-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 3vw, 44px);
    max-width: 1500px;
    margin: 0 auto;
}

.category-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: clamp(400px, 46vw, 560px);
    padding: clamp(32px, 4vw, 56px);
    border: 1px solid var(--line-1);
    overflow: hidden;
    isolation: isolate;
    transition: border-color .6s var(--ease-soft), transform .8s var(--ease-soft);
}

.street-card {
    background:
        linear-gradient(180deg, transparent 42%, rgba(4, 6, 11, .92) 100%),
        radial-gradient(600px 550px at 22% 28%, rgba(10, 47, 168, .6), transparent 65%),
        linear-gradient(160deg, #060d1e 0%, #04060b 100%);
}
.access-card {
    background:
        linear-gradient(180deg, transparent 42%, rgba(4, 6, 11, .92) 100%),
        radial-gradient(650px 550px at 50% 20%, rgba(26, 77, 255, .38), transparent 65%),
        linear-gradient(160deg, #0a1730 0%, #05070f 100%);
}
.old-card {
    background:
        linear-gradient(180deg, transparent 42%, rgba(4, 6, 11, .92) 100%),
        radial-gradient(600px 500px at 30% 25%, rgba(10, 47, 168, .5), transparent 65%),
        linear-gradient(160deg, #081020 0%, #04060b 100%);
}

.category-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(45deg, transparent 0, transparent 10px, rgba(127, 176, 255, .035) 10px, rgba(127, 176, 255, .035) 11px);
    opacity: 0;
    transition: opacity .6s var(--ease-soft);
    pointer-events: none;
    z-index: 1;
}

.category-card:hover { border-color: var(--line-3); transform: translateY(-6px); }
.category-card:hover::before { opacity: 1; }

.category-content { position: relative; z-index: 2; transition: transform .7s var(--ease-soft); }
.category-card:hover .category-content { transform: translateY(-10px); }

.category-content > span {
    display: inline-block;
    font-family: var(--ff-mono);
    font-size: var(--fs-micro);
    font-weight: 500;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: var(--blue-3);
    margin-bottom: 16px;
}

.category-content h3 {
    font-family: var(--ff-display);
    font-size: clamp(1.8rem, 1.4rem + 2vw, 3rem);
    font-weight: 400;
    font-style: italic;
    line-height: 1;
    letter-spacing: -.02em;
    margin-bottom: 20px;
    color: var(--paper-0);
}

.category-content p {
    max-width: 380px;
    font-size: var(--fs-body);
    line-height: 1.7;
    color: var(--paper-2);
    margin-bottom: 26px;
}

.category-content strong {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--paper-0);
    padding-bottom: 6px;
    border-bottom: 1px solid var(--line-2);
    transition: color .4s var(--ease-soft), border-color .4s var(--ease-soft), gap .5s var(--ease-soft);
}
.category-card:hover .category-content strong {
    color: var(--blue-3);
    border-bottom-color: var(--blue-1);
    gap: 22px;
}


/* =========================================================
   14. LOOKBOOK
   ========================================================= */
.lookbook { padding: var(--gutter-y) var(--gutter); }

.lookbook-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: clamp(14px, 1.6vw, 24px);
    max-width: 1500px;
    margin: 0 auto;
}

.lookbook-item {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: clamp(260px, 30vw, 420px);
    padding: clamp(22px, 2.6vw, 36px);
    overflow: hidden;
    border: 1px solid var(--line-1);
    background: var(--ink-2);
    transition: border-color .6s var(--ease-soft), transform .8s var(--ease-soft);
}
.lookbook-item:hover { border-color: var(--line-3); transform: translateY(-4px); }

.lookbook-item.span-3  { grid-column: span 3; }
.lookbook-item.span-4  { grid-column: span 4; }
.lookbook-item.span-5  { grid-column: span 5; }
.lookbook-item.span-6  { grid-column: span 6; }
.lookbook-item.span-7  { grid-column: span 7; }
.lookbook-item.span-8  { grid-column: span 8; }
.lookbook-item.span-12 { grid-column: span 12; }

.lookbook-item h4 {
    font-family: var(--ff-display);
    font-size: clamp(1.2rem, 1rem + .8vw, 1.7rem);
    font-style: italic;
    color: var(--paper-0);
    margin-bottom: 6px;
}
.lookbook-item small {
    font-family: var(--ff-sans);
    font-size: var(--fs-micro);
    font-weight: 600;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--blue-3);
}


/* =========================================================
   15. PULL-QUOTE
   ========================================================= */
.pull-quote {
    position: relative;
    max-width: 1100px;
    margin: var(--gutter-y) auto;
    padding: 0 var(--gutter);
    text-align: center;
}
.pull-quote::before {
    content: "\201C";
    position: absolute;
    top: -40px; left: 50%;
    transform: translateX(-50%);
    font-family: var(--ff-display);
    font-size: 8rem;
    font-style: italic;
    line-height: 1;
    color: var(--blue-1);
    opacity: .25;
}
.pull-quote blockquote {
    font-family: var(--ff-display);
    font-size: clamp(1.5rem, 1rem + 2vw, 3rem);
    font-style: italic;
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: -.015em;
    color: var(--paper-0);
    margin-bottom: 30px;
}
.pull-quote cite {
    display: block;
    font-family: var(--ff-sans);
    font-size: var(--fs-micro);
    font-weight: 600;
    letter-spacing: .34em;
    text-transform: uppercase;
    font-style: normal;
    color: var(--blue-3);
}
.pull-quote cite::before { content: "— "; color: var(--paper-3); }


/* =========================================================
   16. CATEGORIAS RÁPIDAS
   ========================================================= */
.quick-categories { padding: var(--gutter-y) var(--gutter); }

.quick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    max-width: 1500px;
    margin: 0 auto;
    border-top: 1px solid var(--line-1);
    border-left: 1px solid var(--line-1);
}

.quick-card {
    position: relative;
    padding: clamp(30px, 3.4vw, 48px) clamp(24px, 2.6vw, 40px);
    border-right: 1px solid var(--line-1);
    border-bottom: 1px solid var(--line-1);
    background: transparent;
    overflow: hidden;
    transition: background .5s var(--ease-soft);
}
.quick-card::before {
    content: "";
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 2px;
    background: var(--blue-1);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .7s var(--ease-soft);
}
.quick-card:hover { background: rgba(26, 77, 255, .05); }
.quick-card:hover::before { transform: scaleX(1); }
.quick-card span {
    display: block;
    font-family: var(--ff-display);
    font-size: .9rem;
    font-style: italic;
    font-weight: 400;
    color: var(--blue-3);
    margin-bottom: 30px;
    transition: transform .5s var(--ease-soft);
}
.quick-card:hover span { transform: translateX(6px); }
.quick-card h3 {
    font-family: var(--ff-display);
    font-size: clamp(1.4rem, 1rem + 1.2vw, 2rem);
    font-weight: 400;
    font-style: italic;
    letter-spacing: -.01em;
    margin-bottom: 10px;
    color: var(--paper-0);
    transition: color .4s var(--ease-soft);
}
.quick-card:hover h3 { color: var(--blue-3); }
.quick-card p { font-size: var(--fs-small); color: var(--paper-2); }


/* =========================================================
   17. GRID DE PRODUTOS
   ========================================================= */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: clamp(20px, 2.4vw, 40px) clamp(16px, 2vw, 28px);
    max-width: 1500px;
    margin: 0 auto;
}

.product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: transparent;
    border: none;
    overflow: hidden;
    isolation: isolate;
    transition: transform .7s var(--ease-soft);
    animation: productIn .7s var(--ease-soft) both;
}
.product-card:hover { transform: translateY(-4px); }

.product-card:nth-child(1)  { animation-delay: .00s; }
.product-card:nth-child(2)  { animation-delay: .05s; }
.product-card:nth-child(3)  { animation-delay: .10s; }
.product-card:nth-child(4)  { animation-delay: .15s; }
.product-card:nth-child(5)  { animation-delay: .20s; }
.product-card:nth-child(6)  { animation-delay: .25s; }
.product-card:nth-child(7)  { animation-delay: .30s; }
.product-card:nth-child(8)  { animation-delay: .35s; }
.product-card:nth-child(9)  { animation-delay: .40s; }
.product-card:nth-child(10) { animation-delay: .45s; }

@keyframes productIn {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

.product-media {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--ink-2);
    border: 1px solid var(--line-1);
    transition: border-color .5s var(--ease-soft);
}
.product-card:hover .product-media { border-color: var(--line-3); }

.product-media img,
.product-media .product-img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: opacity .6s var(--ease-soft), transform 1.2s var(--ease-soft);
}
.product-media .product-img--alt { opacity: 0; transform: scale(1.05); }
.product-card:hover .product-img--alt { opacity: 1; transform: scale(1); }
.product-card:hover .product-img--main { opacity: 0; transform: scale(1.04); }

.product-media::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 45%;
    background: linear-gradient(180deg, transparent, rgba(4, 6, 11, .65));
    opacity: 0;
    transition: opacity .5s var(--ease-soft);
    pointer-events: none;
    z-index: 1;
}
.product-card:hover .product-media::after { opacity: 1; }

.product-badges {
    position: absolute;
    top: 14px; left: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 3;
}

.product-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    font-family: var(--ff-sans);
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--paper-0);
    background: rgba(4, 6, 11, .78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--line-2);
    border-radius: 0;
}
.product-badge--new { color: #fff; background: var(--blue-1); border-color: transparent; }
.product-badge--sale { color: #fff; background: var(--blue-0); border-color: transparent; }
.product-badge--out { color: var(--paper-3); background: rgba(4, 6, 11, .9); border-color: var(--line-1); }

.product-wish {
    position: absolute;
    top: 12px; right: 12px;
    width: 38px; height: 38px;
    display: grid;
    place-items: center;
    color: var(--paper-2);
    background: rgba(4, 6, 11, .6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--line-1);
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .4s var(--ease-soft), transform .4s var(--ease-soft), color .3s var(--ease-soft), border-color .3s var(--ease-soft);
    z-index: 3;
}
.product-card:hover .product-wish { opacity: 1; transform: translateY(0); }
.product-wish:hover { color: var(--blue-3); border-color: var(--blue-2); }
.product-wish.active { color: var(--blue-1); border-color: var(--blue-1); }
.product-wish svg { width: 16px; height: 16px; }

.product-actions {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .4s var(--ease-soft), transform .4s var(--ease-soft);
    z-index: 3;
}
.product-card:hover .product-actions {
    opacity: 1;
    transform: translateY(0);
}

.product-quick-add,
.product-buy-now {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 10px;
    font-family: var(--ff-sans);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background .3s var(--ease-soft), border-color .3s var(--ease-soft), color .3s var(--ease-soft);
}

.product-quick-add {
    color: var(--paper-0);
    background: rgba(4, 6, 11, .78);
    border: 1px solid rgba(127, 176, 255, .35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.product-quick-add:hover:not(:disabled) {
    background: rgba(127, 176, 255, .15);
    border-color: rgba(127, 176, 255, .7);
}
.product-quick-add:disabled,
.product-buy-now:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.product-buy-now {
    color: #fff;
    background: var(--blue-1);
    border: 1px solid var(--blue-1);
}
.product-buy-now:hover:not(:disabled) {
    background: var(--blue-0);
    border-color: var(--blue-0);
}

.product-quick-add svg,
.product-buy-now svg {
    width: 13px;
    height: 13px;
}

.product-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px 4px 4px;
}

.product-cat {
    font-family: var(--ff-mono);
    font-size: .6rem;
    font-weight: 500;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--blue-3);
    margin-bottom: 2px;
}

.product-name {
    font-family: var(--ff-display);
    font-size: clamp(1rem, .9rem + .5vw, 1.25rem);
    font-weight: 400;
    font-style: italic;
    letter-spacing: -.01em;
    line-height: 1.25;
    color: var(--paper-0);
    transition: color .35s var(--ease-soft);
}
.product-card:hover .product-name { color: var(--blue-3); }
.product-name a { color: inherit; }

.product-desc {
    font-family: var(--ff-sans);
    font-size: var(--fs-small);
    line-height: 1.55;
    color: var(--paper-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-price {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-top: 4px;
}
.product-price strong {
    font-family: var(--ff-sans);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--paper-0);
}
.product-price s {
    font-family: var(--ff-sans);
    font-size: .82rem;
    font-weight: 400;
    color: var(--paper-3);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.product-price em {
    font-family: var(--ff-sans);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-style: normal;
    color: var(--blue-3);
}

.product-colors {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}
.product-color {
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .18);
    cursor: pointer;
    transition: transform .3s var(--ease-soft), border-color .3s;
}
.product-color:hover { transform: scale(1.15); border-color: var(--blue-3); }
.product-color.active { border-color: var(--blue-1); box-shadow: 0 0 0 2px rgba(26, 77, 255, .25); }

.product-sizes {
    display: flex;
    gap: 4px;
    margin-top: 10px;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity .4s var(--ease-soft), max-height .4s var(--ease-soft), margin-top .4s var(--ease-soft);
}
.product-card:hover .product-sizes { opacity: 1; max-height: 40px; }

.product-size {
    width: 30px; height: 30px;
    display: grid;
    place-items: center;
    font-family: var(--ff-sans);
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: .05em;
    color: var(--paper-2);
    background: transparent;
    border: 1px solid var(--line-1);
    cursor: pointer;
    transition: color .3s var(--ease-soft), border-color .3s var(--ease-soft), background .3s var(--ease-soft);
}
.product-size:hover { color: var(--paper-0); border-color: var(--line-3); }
.product-size.active { color: #fff; background: var(--blue-1); border-color: var(--blue-1); }

.product-skeleton {
    aspect-ratio: 3 / 4;
    background: linear-gradient(100deg, var(--ink-2) 0%, var(--ink-3) 50%, var(--ink-2) 100%);
    background-size: 200% 100%;
    animation: skeleton 1.6s linear infinite;
}
@keyframes skeleton { to { background-position: -200% 0; } }


/* =========================================================
   18. PÁGINA DE CATEGORIA
   ========================================================= */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 22px var(--gutter) 0;
    font-family: var(--ff-sans);
    font-size: var(--fs-micro);
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--paper-3);
}
.breadcrumb a { color: var(--paper-2); transition: color .35s var(--ease-soft); }
.breadcrumb a:hover { color: var(--blue-3); }
.breadcrumb span[aria-hidden] { color: var(--paper-4); }
.breadcrumb [aria-current] { color: var(--blue-3); }

.category-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: end;
    gap: clamp(30px, 5vw, 80px);
    padding: clamp(70px, 10vw, 130px) var(--gutter) clamp(50px, 7vw, 90px);
    overflow: hidden;
    border-bottom: 1px solid var(--line-1);
}

.category-hero--street {
    background:
        radial-gradient(900px 700px at 78% 15%, rgba(26, 77, 255, .26), transparent 62%),
        radial-gradient(700px 500px at 8% 90%, rgba(10, 47, 168, .32), transparent 65%),
        linear-gradient(180deg, var(--ink-0) 0%, var(--ink-1) 100%);
}
.category-hero--access {
    background:
        radial-gradient(900px 700px at 78% 15%, rgba(26, 77, 255, .22), transparent 62%),
        radial-gradient(700px 500px at 8% 90%, rgba(10, 47, 168, .28), transparent 65%),
        linear-gradient(180deg, var(--ink-0) 0%, var(--ink-2) 100%);
}
.category-hero--old {
    background:
        radial-gradient(900px 700px at 78% 15%, rgba(10, 47, 168, .3), transparent 62%),
        radial-gradient(700px 500px at 8% 90%, rgba(26, 77, 255, .1), transparent 65%),
        linear-gradient(180deg, var(--ink-0) 0%, #06090f 100%);
}

.category-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--line-0) 1px, transparent 1px),
        linear-gradient(90deg, var(--line-0) 1px, transparent 1px);
    background-size: 72px 72px;
    -webkit-mask-image: radial-gradient(ellipse at 55% 50%, #000, transparent 78%);
    mask-image: radial-gradient(ellipse at 55% 50%, #000, transparent 78%);
    pointer-events: none;
    opacity: .8;
}

.category-hero-mark {
    position: absolute;
    right: -2vw; bottom: -1vw;
    font-family: var(--ff-display);
    font-style: italic;
    font-weight: 900;
    font-size: clamp(7rem, 22vw, 22rem);
    line-height: .8;
    letter-spacing: -.06em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(127, 176, 255, .1);
    user-select: none;
    pointer-events: none;
    white-space: nowrap;
}

.category-hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    animation: heroRise .9s var(--ease-soft) both;
}

.category-label {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: var(--ff-sans);
    font-size: var(--fs-micro);
    font-weight: 600;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: var(--blue-3);
    padding-bottom: 14px;
    margin-bottom: 28px;
    border-bottom: 1px solid var(--line-2);
}
.category-label span {
    font-family: var(--ff-display);
    font-style: italic;
    font-size: 1.1em;
    letter-spacing: 0;
    color: var(--blue-2);
}

.category-hero h1 {
    font-family: var(--ff-display);
    font-size: clamp(2.4rem, 1.4rem + 5vw, 5.6rem);
    font-weight: 400;
    font-style: italic;
    line-height: .96;
    letter-spacing: -.03em;
    color: var(--paper-0);
    margin-bottom: 30px;
}
.category-hero h1 em { display: block; font-style: normal; font-weight: 700; color: var(--blue-3); }
.category-hero p { max-width: 520px; font-size: var(--fs-lead); line-height: 1.7; color: var(--paper-2); }

.category-hero-meta {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(16px, 2vw, 32px);
    padding-top: 28px;
    border-top: 1px solid var(--line-1);
    animation: heroRise .9s .2s var(--ease-soft) both;
}
.category-hero-meta > div { display: flex; flex-direction: column; gap: 6px; }
.category-hero-meta span {
    font-family: var(--ff-mono);
    font-size: var(--fs-nano);
    font-weight: 500;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--paper-3);
}
.category-hero-meta strong {
    font-family: var(--ff-display);
    font-size: clamp(1rem, .8rem + .8vw, 1.5rem);
    font-style: italic;
    font-weight: 400;
    letter-spacing: -.01em;
    color: var(--paper-0);
}

.category-products { padding: clamp(60px, 8vw, 110px) var(--gutter) var(--gutter-y); }

.category-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: clamp(36px, 5vw, 60px);
    padding-bottom: 26px;
    border-bottom: 1px solid var(--line-1);
}
.category-heading .section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--ff-sans);
    font-size: var(--fs-micro);
    font-weight: 600;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: var(--blue-3);
    margin-bottom: 16px;
}
.category-heading .section-kicker span { color: var(--paper-4); letter-spacing: 0; }
.category-heading h2 {
    font-family: var(--ff-display);
    font-size: clamp(1.8rem, 1.2rem + 3vw, 3.6rem);
    font-weight: 400;
    font-style: italic;
    line-height: 1;
    letter-spacing: -.025em;
    color: var(--paper-0);
}
.category-heading h2 em { font-style: normal; font-weight: 700; color: var(--blue-3); }

.category-toolbar { display: flex; align-items: center; gap: 24px; }

.category-result-count {
    font-family: var(--ff-mono);
    font-size: var(--fs-micro);
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--paper-3);
}

.category-sort {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line-1);
    transition: border-color .35s var(--ease-soft);
}
.category-sort:hover { border-bottom-color: var(--line-3); }
.category-sort > span {
    font-family: var(--ff-sans);
    font-size: var(--fs-micro);
    font-weight: 600;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--paper-3);
}
.category-sort select {
    appearance: none;
    -webkit-appearance: none;
    padding: 0 26px 0 0;
    font-family: var(--ff-sans);
    font-size: var(--fs-micro);
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--paper-0);
    background: transparent;
    border: none;
    cursor: pointer;
    outline: none;
}
.category-sort select option { background: var(--ink-1); color: var(--paper-0); }
.category-sort svg {
    position: absolute;
    right: 0; top: 50%;
    transform: translateY(-50%);
    width: 14px; height: 14px;
    color: var(--paper-3);
    pointer-events: none;
    transition: color .35s var(--ease-soft);
}
.category-sort:hover svg { color: var(--blue-3); }


/* =========================================================
   19. EMPTY STATE
   ========================================================= */
.no-products {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: clamp(60px, 10vw, 140px) 24px;
    text-align: center;
}
.no-products.show { display: flex; }
.no-products-mark {
    display: block;
    font-family: var(--ff-display);
    font-size: clamp(4rem, 8vw, 7rem);
    font-style: italic;
    color: var(--line-2);
    line-height: 1;
    margin-bottom: 10px;
}
.no-products h3 {
    font-family: var(--ff-display);
    font-size: clamp(1.4rem, 1rem + 1.6vw, 2.2rem);
    font-weight: 400;
    font-style: italic;
    line-height: 1.1;
    color: var(--paper-0);
}
.no-products h3 em { font-style: normal; font-weight: 700; color: var(--blue-3); }
.no-products p { max-width: 420px; font-size: var(--fs-body); color: var(--paper-2); margin-bottom: 10px; }
.no-products .btn-secondary { margin-top: 6px; }


/* =========================================================
   20. NEWSLETTER
   ========================================================= */
.newsletter {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(30px, 5vw, 80px);
    align-items: center;
    margin: 0 var(--gutter) var(--gutter-y);
    padding: clamp(40px, 6vw, 80px);
    border: 1px solid var(--line-1);
    background:
        radial-gradient(700px 500px at 20% 30%, rgba(26, 77, 255, .14), transparent 65%),
        var(--ink-1);
}
.newsletter h3 {
    font-family: var(--ff-display);
    font-size: clamp(1.6rem, 1.1rem + 2vw, 2.8rem);
    font-style: italic;
    font-weight: 400;
    line-height: 1.05;
    color: var(--paper-0);
    margin-bottom: 14px;
}
.newsletter h3 span { display: block; font-style: normal; font-weight: 700; color: var(--blue-3); }
.newsletter p { font-size: var(--fs-body); color: var(--paper-2); }

.newsletter-form {
    display: flex;
    align-items: stretch;
    gap: 0;
    border-bottom: 1px solid var(--line-2);
}
.newsletter-form input {
    flex: 1;
    padding: 16px 0;
    font-family: var(--ff-display);
    font-size: 1.1rem;
    font-style: italic;
    color: var(--paper-0);
    background: transparent;
    border: none;
    outline: none;
}
.newsletter-form input::placeholder { color: var(--paper-3); font-style: italic; }
.newsletter-form button {
    padding: 0 22px;
    font-family: var(--ff-sans);
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--paper-0);
    transition: color .35s var(--ease-soft);
}
.newsletter-form button:hover { color: var(--blue-3); }


/* =========================================================
   21. CTA FINAL
   ========================================================= */
.final-cta {
    position: relative;
    margin: 0 var(--gutter) var(--gutter-y);
    padding: clamp(80px, 11vw, 160px) clamp(30px, 6vw, 90px);
    text-align: center;
    border-top: 1px solid var(--line-1);
    border-bottom: 1px solid var(--line-1);
    overflow: hidden;
    background:
        radial-gradient(900px 500px at 50% 50%, rgba(26, 77, 255, .16), transparent 65%);
}
.final-cta::before {
    content: "REPRESENTE";
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--ff-display);
    font-style: italic;
    font-weight: 700;
    font-size: clamp(6rem, 20vw, 20rem);
    line-height: .8;
    letter-spacing: -.06em;
    color: transparent;
    -webkit-text-stroke: 1px var(--line-0);
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
}
.final-cta > div { position: relative; z-index: 2; }
.final-cta p {
    font-family: var(--ff-sans);
    font-size: var(--fs-micro);
    font-weight: 600;
    letter-spacing: .4em;
    text-transform: uppercase;
    color: var(--blue-3);
    margin-bottom: 30px;
}
.final-cta h2 {
    font-family: var(--ff-display);
    font-size: clamp(2.2rem, 1.2rem + 5vw, 5rem);
    font-style: italic;
    font-weight: 400;
    line-height: .98;
    letter-spacing: -.025em;
    color: var(--paper-0);
    margin-bottom: 50px;
}
.final-cta h2 span { display: block; font-style: normal; font-weight: 700; color: var(--blue-3); }
.final-cta .btn-primary { background: var(--blue-1); color: #fff; }
.final-cta .btn-primary:hover { background: var(--blue-0); }


/* =========================================================
   22. FOOTER
   ========================================================= */
.footer {
    position: relative;
    padding: clamp(60px, 8vw, 100px) var(--gutter) 40px;
    border-top: 1px solid var(--line-1);
    background: var(--ink-0);
    text-align: center;
}
.footer-logo {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    font-family: var(--ff-display);
    font-size: clamp(1.6rem, 1rem + 1.6vw, 2.2rem);
    font-weight: 700;
    font-style: italic;
    letter-spacing: .02em;
    color: var(--paper-0);
    margin-bottom: 34px;
    transition: letter-spacing .6s var(--ease-soft);
}
.footer-logo span { font-style: normal; font-weight: 400; color: var(--blue-3); }
.footer-logo:hover { letter-spacing: .04em; }

.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px 32px;
    margin-bottom: 44px;
}
.footer-links a {
    position: relative;
    font-family: var(--ff-sans);
    font-size: var(--fs-micro);
    font-weight: 500;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--paper-2);
    transition: color .35s var(--ease-soft);
}
.footer-links a:hover { color: var(--paper-0); }
.admin-link { padding-left: 32px; border-left: 1px solid var(--line-1); }
.admin-link:hover { color: var(--blue-3) !important; }

.footer > p {
    font-family: var(--ff-display);
    font-size: .85rem;
    font-style: italic;
    color: var(--paper-3);
    padding-top: 34px;
    border-top: 1px solid var(--line-0);
}


/* =========================================================
   23. ADMIN
   ========================================================= */
.admin-wrap { max-width: 1100px; margin: 0 auto; padding: 60px var(--gutter) 120px; }

.admin-head {
    margin-bottom: 50px;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--line-1);
}
.admin-head h1 {
    font-family: var(--ff-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-style: italic;
    font-weight: 400;
    color: var(--paper-0);
    margin-bottom: 10px;
}
.admin-head p { color: var(--paper-2); max-width: 520px; }

.admin-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    padding: 40px;
    border: 1px solid var(--line-1);
    background: var(--ink-1);
    margin-bottom: 60px;
}

.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: span 2; }
.field label {
    font-family: var(--ff-sans);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--blue-3);
}
.field input, .field textarea, .field select {
    padding: 14px 16px;
    font-family: var(--ff-sans);
    font-size: .92rem;
    color: var(--paper-0);
    background: var(--ink-0);
    border: 1px solid var(--line-1);
    outline: none;
    transition: border-color .3s var(--ease-soft);
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--blue-1); }
.field textarea { min-height: 100px; resize: vertical; }

.admin-form button {
    grid-column: span 2;
    padding: 18px;
    font-family: var(--ff-sans);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: #fff;
    background: var(--blue-1);
    border: none;
    cursor: pointer;
    transition: background .3s var(--ease-soft);
}
.admin-form button:hover { background: var(--blue-0); }

.admin-list { display: flex; flex-direction: column; gap: 16px; }

.admin-item {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: 20px;
    align-items: center;
    padding: 18px;
    border: 1px solid var(--line-1);
    background: var(--ink-1);
}
.admin-item img { width: 80px; height: 100px; object-fit: cover; border: 1px solid var(--line-1); }
.admin-item h4 {
    font-family: var(--ff-display);
    font-style: italic;
    font-weight: 400;
    color: var(--paper-0);
    margin-bottom: 4px;
}
.admin-item small { font-family: var(--ff-mono); font-size: .7rem; letter-spacing: .12em; color: var(--paper-3); }
.admin-item button {
    padding: 10px 18px;
    font-size: .68rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--paper-2);
    border: 1px solid var(--line-1);
    background: transparent;
    cursor: pointer;
    transition: all .3s var(--ease-soft);
}
.admin-item button:hover { color: #ff6b6b; border-color: #ff6b6b; }

.admin-msg {
    margin-top: 24px;
    padding: 14px 20px;
    font-size: .85rem;
    display: none;
}
.admin-msg.show { display: block; animation: fadeUp .4s var(--ease-soft); }
.admin-msg.ok {
    background: rgba(26, 77, 255, .12);
    border: 1px solid var(--blue-1);
    color: var(--blue-3);
}


/* =========================================================
   24. TOAST
   ========================================================= */
.toast-stack {
    position: fixed;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 9999;
    pointer-events: none;
}

.toast {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 22px;
    background: var(--ink-3);
    border: 1px solid var(--line-2);
    border-left: 3px solid var(--blue-1);
    font-family: var(--ff-sans);
    font-size: .82rem;
    font-weight: 500;
    color: var(--paper-0);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .6), 0 0 40px rgba(26, 77, 255, .2);
    animation: toastIn .4s var(--ease-back);
    transition: opacity .3s, transform .3s;
    pointer-events: auto;
}
.toast.success { border-left-color: #10b981; }
.toast.error   { border-left-color: #ef4444; }
.toast.warn    { border-left-color: #f59e0b; }
.toast svg { width: 16px; height: 16px; flex-shrink: 0; }

@keyframes toastIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* =========================================================
   25. ANIMAÇÕES
   ========================================================= */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes slowZoom {
    from { transform: scale(1); }
    to   { transform: scale(1.06); }
}
.bg-zoom { animation: slowZoom 12s ease-in-out infinite alternate; }


/* =========================================================
   26. CARRINHO — PÁGINA
   ========================================================= */
.cart-page {
    --_ink-0:      var(--ink-0,     #04060b);
    --_ink-1:      var(--ink-1,     #070a12);
    --_ink-2:      var(--ink-2,     #0b1120);
    --_blue-0:     var(--blue-0,    #0a2fa8);
    --_blue-1:     var(--blue-1,    #1a4dff);
    --_blue-2:     var(--blue-2,    #4d7cff);
    --_blue-3:     var(--blue-3,    #7fb0ff);
    --_paper-0:    var(--paper-0,   #f5f7ff);
    --_paper-1:    var(--paper-1,   #e0e6f5);
    --_paper-2:    var(--paper-2,   #a4b2ca);
    --_paper-3:    var(--paper-3,   #5d6b83);
    --_paper-4:    var(--paper-4,   #38455c);
    --_line-0:     var(--line-0,    rgba(127, 176, 255, .08));
    --_line-1:     var(--line-1,    rgba(127, 176, 255, .16));
    --_line-2:     var(--line-2,    rgba(127, 176, 255, .28));
    --_line-3:     var(--line-3,    rgba(127, 176, 255, .45));
    --_ff-display: var(--ff-display, 'Playfair Display', 'Times New Roman', Georgia, serif);
    --_ff-sans:    var(--ff-sans,    'Inter', system-ui, -apple-system, sans-serif);
    --_ff-mono:    var(--ff-mono,    'Space Grotesk', ui-monospace, monospace);
    --_ease:       var(--ease-soft,  cubic-bezier(.22, 1, .36, 1));

    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    padding: 40px clamp(20px, 5vw, 80px) 100px;
    font-family: var(--_ff-sans);
    font-size: 16px;
    line-height: 1.6;
    color: var(--_paper-1);
    background: var(--_ink-0);
}

.cart-page *, .cart-page *::before, .cart-page *::after { box-sizing: border-box; }

.cart-page .breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 40px;
    font-family: var(--_ff-sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--_paper-3);
}
.cart-page .breadcrumb a { color: var(--_paper-2); text-decoration: none; transition: color .3s var(--_ease); }
.cart-page .breadcrumb a:hover { color: var(--_blue-3); }
.cart-page .breadcrumb span[aria-hidden] { color: var(--_paper-4); }
.cart-page .breadcrumb [aria-current] { color: var(--_blue-3); }

.cart-page .cart-heading {
    max-width: 720px;
    margin: 0 0 60px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--_line-1);
}
.cart-page .cart-heading .category-label {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    font-family: var(--_ff-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: var(--_blue-3);
}
.cart-page .cart-heading .category-label span { color: var(--_paper-4); }
.cart-page .cart-heading h1 {
    margin: 0 0 18px;
    font-family: var(--_ff-display);
    font-size: clamp(2rem, 1.4rem + 3vw, 3.6rem);
    font-weight: 400;
    font-style: italic;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--_paper-0);
}
.cart-page .cart-heading h1 em { display: block; font-style: normal; font-weight: 700; color: var(--_blue-3); }
.cart-page .cart-heading p { max-width: 480px; margin: 0; font-family: var(--_ff-sans); font-size: 15px; line-height: 1.7; color: var(--_paper-2); }

.cart-page .cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
    gap: clamp(24px, 4vw, 60px);
    align-items: start;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}
.cart-page .cart-items-column { min-width: 0; }

.cart-page .cart-items {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--_line-1);
}
.cart-page .cart-items:empty { display: none; }

.cart-page .cart-item {
    display: grid;
    grid-template-columns: 100px 1fr auto;
    gap: 20px;
    align-items: center;
    padding: 22px 0;
    border-bottom: 1px solid var(--_line-1);
}
.cart-page .cart-item-media {
    width: 100px; height: 125px;
    overflow: hidden;
    background: var(--_ink-2);
    border: 1px solid var(--_line-1);
}
.cart-page .cart-item-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cart-page .cart-item-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cart-page .cart-item-cat {
    font-family: var(--_ff-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--_blue-3);
}
.cart-page .cart-item-name {
    margin: 0;
    font-family: var(--_ff-display);
    font-size: 18px;
    font-style: italic;
    font-weight: 400;
    line-height: 1.25;
    color: var(--_paper-0);
    overflow: hidden;
    text-overflow: ellipsis;
}
.cart-page .cart-item-price { font-family: var(--_ff-sans); font-size: 14px; font-weight: 600; color: var(--_paper-2); }
.cart-page .cart-item-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.cart-page .cart-qty { display: inline-flex; align-items: center; border: 1px solid var(--_line-1); }
.cart-page .cart-qty button {
    width: 30px; height: 30px;
    display: grid;
    place-items: center;
    padding: 0;
    font-size: 14px;
    color: var(--_paper-2);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color .3s var(--_ease), background .3s var(--_ease);
}
.cart-page .cart-qty button:hover { color: var(--_paper-0); background: rgba(26, 77, 255, .1); }
.cart-page .cart-qty span {
    min-width: 30px;
    text-align: center;
    font-family: var(--_ff-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--_paper-0);
}
.cart-page .cart-item-remove {
    padding: 0;
    font-family: var(--_ff-sans);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--_paper-3);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color .3s var(--_ease);
}
.cart-page .cart-item-remove:hover { color: #ff6b6b; }

.cart-page .cart-empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 60px 0;
}
.cart-page .cart-empty-mark {
    font-family: var(--_ff-display);
    font-size: 80px;
    font-style: italic;
    line-height: 1;
    color: var(--_line-2);
    margin-bottom: 8px;
}
.cart-page .cart-empty h2 {
    margin: 0;
    font-family: var(--_ff-display);
    font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
    font-style: italic;
    font-weight: 400;
    line-height: 1.1;
    color: var(--_paper-0);
}
.cart-page .cart-empty h2 em { font-style: normal; font-weight: 700; color: var(--_blue-3); }
.cart-page .cart-empty p {
    max-width: 440px;
    margin: 0;
    font-family: var(--_ff-sans);
    font-size: 15px;
    line-height: 1.7;
    color: var(--_paper-2);
}
.cart-page .cart-empty-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.cart-page .cart-empty-actions .btn-primary,
.cart-page .cart-empty-actions .btn-secondary {
    display: inline-flex;
    align-items: center;
    padding: 14px 22px;
    font-family: var(--_ff-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .24em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 0;
    transition: all .3s var(--_ease);
}
.cart-page .cart-empty-actions .btn-primary { color: #fff; background: var(--_blue-1); }
.cart-page .cart-empty-actions .btn-primary:hover { background: var(--_blue-0); }
.cart-page .cart-empty-actions .btn-secondary { color: var(--_paper-0); background: transparent; border: 1px solid var(--_line-2); }
.cart-page .cart-empty-actions .btn-secondary:hover { border-color: var(--_blue-1); background: rgba(26, 77, 255, .08); }

.cart-page .cart-summary {
    position: sticky;
    top: 110px;
    padding: 28px;
    background: linear-gradient(180deg, var(--_ink-1), var(--_ink-2));
    border: 1px solid var(--_line-1);
}
.cart-page .cart-summary-content { display: flex; flex-direction: column; }
.cart-page .cart-summary-kicker {
    display: block;
    margin-bottom: 14px;
    font-family: var(--_ff-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--_blue-3);
}
.cart-page .cart-summary-title {
    margin: 0 0 24px;
    padding-bottom: 22px;
    font-family: var(--_ff-display);
    font-size: 22px;
    font-style: italic;
    font-weight: 400;
    line-height: 1.15;
    color: var(--_paper-0);
    border-bottom: 1px solid var(--_line-1);
}
.cart-page .cart-summary-title em { font-style: normal; font-weight: 700; color: var(--_blue-3); }
.cart-page .cart-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    padding: 8px 0;
    font-family: var(--_ff-sans);
    font-size: 14px;
}
.cart-page .cart-summary-row > span { color: var(--_paper-2); }
.cart-page .cart-summary-row strong { color: var(--_paper-0); font-weight: 600; text-align: right; }
.cart-page .cart-summary-row--total { padding-top: 16px; font-size: 15px; }
.cart-page .cart-summary-row--total strong {
    font-family: var(--_ff-display);
    font-size: 22px;
    font-style: italic;
    font-weight: 700;
    color: var(--_paper-0);
}
.cart-page .cart-summary-divider { height: 1px; background: var(--_line-1); margin: 12px 0; }
.cart-page .cart-summary-info {
    margin: 18px 0 22px;
    font-family: var(--_ff-sans);
    font-size: 12px;
    line-height: 1.6;
    color: var(--_paper-3);
}
.cart-page .checkout-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    padding: 18px 24px;
    font-family: var(--_ff-sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: #fff;
    background: var(--_blue-1);
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: background .3s var(--_ease), transform .4s var(--_ease);
    margin-bottom: 16px;
}
.cart-page .checkout-button:hover { background: var(--_blue-0); }
.cart-page .checkout-button svg { width: 18px; height: 18px; }
.cart-page .continue-shopping {
    display: inline-block;
    font-family: var(--_ff-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--_paper-2);
    text-decoration: none;
    transition: color .3s var(--_ease);
}
.cart-page .continue-shopping:hover { color: var(--_blue-3); }

.cart-page .pull-quote { max-width: 900px; margin: 100px auto 0; padding: 0 20px; text-align: center; }
.cart-page .pull-quote blockquote {
    margin: 0 0 20px;
    font-family: var(--_ff-display);
    font-size: clamp(1.4rem, 1rem + 1.4vw, 2rem);
    font-style: italic;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -.01em;
    color: var(--_paper-0);
}
.cart-page .pull-quote cite {
    display: block;
    font-family: var(--_ff-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .3em;
    text-transform: uppercase;
    font-style: normal;
    color: var(--_blue-3);
}
.cart-page .pull-quote cite::before { content: "— "; color: var(--_paper-4); }


/* =========================================================
   27. BUSCA E CHECKOUT
   ========================================================= */
.search-main,
.checkout-main {
    padding: clamp(30px, 4vw, 60px) clamp(20px, 5vw, 96px) clamp(80px, 10vw, 140px);
    max-width: 1500px;
    margin: 0 auto;
}

.search-main .breadcrumb,
.checkout-main .breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: clamp(30px, 4vw, 50px);
    font-family: var(--ff-sans);
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--paper-3);
}
.search-main .breadcrumb a,
.checkout-main .breadcrumb a { color: var(--paper-2); transition: color .3s; }
.search-main .breadcrumb a:hover,
.checkout-main .breadcrumb a:hover { color: var(--blue-3); }
.search-main .breadcrumb span[aria-hidden],
.checkout-main .breadcrumb span[aria-hidden] { color: var(--paper-4); }
.search-main .breadcrumb [aria-current],
.checkout-main .breadcrumb [aria-current] { color: var(--blue-3); }

.search-head,
.checkout-head {
    max-width: 720px;
    margin: 0 0 clamp(40px, 5vw, 60px);
    padding-bottom: 30px;
    border-bottom: 1px solid var(--line-1);
}
.search-head .category-label,
.checkout-head .category-label {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    font-family: var(--ff-sans);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: var(--blue-3);
}
.search-head .category-label span,
.checkout-head .category-label span { color: var(--paper-4); }
.search-head h1,
.checkout-head h1 {
    margin: 0 0 18px;
    font-family: var(--ff-display);
    font-size: clamp(2rem, 1.4rem + 3vw, 3.6rem);
    font-weight: 400;
    font-style: italic;
    line-height: 1.05;
    letter-spacing: -.02em;
    color: var(--paper-0);
}
.search-head h1 em,
.checkout-head h1 em { font-style: normal; font-weight: 700; color: var(--blue-3); word-break: break-word; }
.search-head p,
.checkout-head p { max-width: 480px; margin: 0; font-family: var(--ff-sans); font-size: 1rem; line-height: 1.7; color: var(--paper-2); }

.checkout-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr);
    gap: clamp(30px, 4vw, 70px);
    align-items: start;
}

.checkout-form { display: flex; flex-direction: column; gap: 30px; }

.checkout-step {
    padding: 32px;
    background: linear-gradient(180deg, var(--ink-1), var(--ink-2));
    border: 1px solid var(--line-1);
}
.step-head {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding-bottom: 24px;
    margin-bottom: 26px;
    border-bottom: 1px solid var(--line-0);
}
.step-num {
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    font-family: var(--ff-display);
    font-size: 1.05rem;
    font-style: italic;
    color: var(--blue-3);
    border: 1px solid var(--line-2);
    border-radius: 50%;
    flex-shrink: 0;
}
.step-head h2 {
    margin: 0 0 4px;
    font-family: var(--ff-display);
    font-size: 1.35rem;
    font-weight: 400;
    font-style: italic;
    line-height: 1.1;
    color: var(--paper-0);
}
.step-head p { margin: 0; font-size: .85rem; color: var(--paper-2); }

.checkout-step .field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.checkout-step .field:last-child { margin-bottom: 0; }
.checkout-step .field-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 18px;
}
.checkout-step .field-row:last-child { margin-bottom: 0; }
.checkout-step .field-row .field { flex: 1 1 180px; margin-bottom: 0; }
.checkout-step .field-row .field-grow { flex: 2 1 260px; }
.checkout-step label {
    font-family: var(--ff-sans);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--blue-3);
}
.checkout-step label span { color: #ef4444; margin-left: 2px; }
.checkout-step input,
.checkout-step select {
    padding: 14px 16px;
    font-family: var(--ff-sans);
    font-size: .92rem;
    color: var(--paper-0);
    background: var(--ink-0);
    border: 1px solid var(--line-1);
    border-radius: 0;
    outline: none;
    transition: border-color .3s;
}
.checkout-step input:focus,
.checkout-step select:focus { border-color: var(--blue-1); }
.checkout-step input::placeholder { color: var(--paper-3); }

.shipping-options { display: flex; flex-direction: column; gap: 10px; }
.shipping-option {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: var(--ink-0);
    border: 1px solid var(--line-1);
    cursor: pointer;
    transition: all .3s;
}
.shipping-option:hover { border-color: var(--line-2); }
.shipping-option:has(input:checked) { border-color: var(--blue-1); background: rgba(26, 77, 255, .06); }
.shipping-option input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px; height: 18px;
    border: 2px solid var(--line-2);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    transition: all .3s;
}
.shipping-option input[type="radio"]:checked { border-color: var(--blue-1); }
.shipping-option input[type="radio"]:checked::after {
    content: "";
    width: 8px; height: 8px;
    background: var(--blue-1);
    border-radius: 50%;
}
.shipping-info { flex: 1; min-width: 0; }
.shipping-info strong { display: block; font-family: var(--ff-sans); font-size: .92rem; font-weight: 600; color: var(--paper-0); }
.shipping-info small { display: block; font-size: .78rem; color: var(--paper-2); }
.shipping-price { font-family: var(--ff-sans); font-size: .88rem; font-weight: 700; color: var(--blue-3); flex-shrink: 0; }

.payment-methods {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 24px;
}
.payment-method {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: var(--ink-0);
    border: 1px solid var(--line-1);
    cursor: pointer;
    transition: all .3s;
}
.payment-method:hover { border-color: var(--line-2); }
.payment-method:has(input:checked) { border-color: var(--blue-1); background: rgba(26, 77, 255, .06); }
.payment-method input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px; height: 16px;
    margin-top: 2px;
    border: 2px solid var(--line-2);
    border-radius: 50%;
    cursor: pointer;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    transition: all .3s;
}
.payment-method input[type="radio"]:checked { border-color: var(--blue-1); }
.payment-method input[type="radio"]:checked::after {
    content: "";
    width: 7px; height: 7px;
    background: var(--blue-1);
    border-radius: 50%;
}
.payment-method > div { min-width: 0; }
.payment-method strong { display: block; font-family: var(--ff-sans); font-size: .85rem; font-weight: 600; color: var(--paper-0); margin-bottom: 2px; }
.payment-method small { display: block; font-size: .72rem; line-height: 1.4; color: var(--paper-2); }

.payment-detail { padding: 20px; background: var(--ink-2); border: 1px dashed var(--line-2); animation: fadeIn .4s ease; }
.payment-note { margin: 0; font-family: var(--ff-sans); font-size: .88rem; line-height: 1.7; color: var(--paper-2); }

.btn-finish-mobile {
    display: none;
    width: 100%;
    padding: 18px 24px;
    font-family: var(--ff-sans);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: #fff;
    background: var(--blue-1);
    border: none;
    cursor: pointer;
    transition: background .3s;
}
.btn-finish-mobile:hover { background: var(--blue-0); }

.checkout-summary { position: sticky; top: 110px; }
.summary-content {
    padding: 28px;
    background: linear-gradient(180deg, var(--ink-1), var(--ink-2));
    border: 1px solid var(--line-1);
}
.summary-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 300px;
    overflow-y: auto;
    padding: 4px 0 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--line-1);
}
.summary-item {
    display: grid;
    grid-template-columns: 50px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 6px 0;
}
.summary-item-media {
    position: relative;
    width: 50px; height: 62px;
    background: var(--ink-2);
    border: 1px solid var(--line-1);
}
.summary-item-media img { width: 100%; height: 100%; object-fit: cover; }
.summary-item-qty {
    position: absolute;
    top: -6px; right: -6px;
    min-width: 20px; height: 20px;
    display: grid;
    place-items: center;
    padding: 0 5px;
    font-family: var(--ff-mono);
    font-size: .62rem;
    font-weight: 700;
    color: #fff;
    background: var(--blue-1);
    border-radius: 99px;
}
.summary-item-info { min-width: 0; }
.summary-item-info strong {
    display: block;
    font-family: var(--ff-display);
    font-size: .92rem;
    font-style: italic;
    font-weight: 400;
    color: var(--paper-0);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.summary-item-info small {
    display: block;
    font-family: var(--ff-mono);
    font-size: .6rem;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--paper-3);
}
.summary-item-price {
    font-family: var(--ff-sans);
    font-size: .85rem;
    font-weight: 700;
    color: var(--paper-0);
    white-space: nowrap;
}
.summary-totals { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    font-family: var(--ff-sans);
    font-size: .88rem;
}
.summary-row span { color: var(--paper-2); }
.summary-row strong { color: var(--paper-0); font-weight: 600; text-align: right; }
.summary-row--discount strong { color: #10b981; }
.summary-divider { height: 1px; background: var(--line-1); margin: 6px 0; }
.summary-row--total { padding-top: 10px; font-size: .98rem; }
.summary-row--total strong {
    font-family: var(--ff-display);
    font-size: 1.35rem;
    font-style: italic;
    font-weight: 700;
    color: var(--paper-0);
}
.summary-info {
    margin: 20px 0 0;
    font-family: var(--ff-sans);
    font-size: .72rem;
    line-height: 1.6;
    color: var(--paper-3);
    text-align: center;
}

.checkout-success {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 30px;
    background: rgba(4, 6, 11, .95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    opacity: 0;
    visibility: hidden;
    z-index: 700;
    transition: opacity .4s, visibility .4s;
}
.checkout-success.open { opacity: 1; visibility: visible; }
.success-box {
    max-width: 480px;
    padding: 50px 40px;
    text-align: center;
    background: linear-gradient(180deg, var(--ink-1), var(--ink-2));
    border: 1px solid var(--line-2);
    transform: translateY(20px);
    transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}
.checkout-success.open .success-box { transform: translateY(0); }
.success-icon {
    display: grid;
    place-items: center;
    width: 72px; height: 72px;
    margin: 0 auto 24px;
    color: #10b981;
    border: 2px solid #10b981;
    border-radius: 50%;
    animation: pulseGreen 2s ease-in-out infinite;
}
.success-icon svg { width: 32px; height: 32px; }
@keyframes pulseGreen {
    0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, .4); }
    50%      { box-shadow: 0 0 0 12px rgba(16, 185, 129, 0); }
}
.success-box h2 {
    margin: 0 0 16px;
    font-family: var(--ff-display);
    font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem);
    font-weight: 400;
    font-style: italic;
    line-height: 1.1;
    color: var(--paper-0);
}
.success-box h2 em { font-style: normal; font-weight: 700; color: #10b981; }
.success-box p {
    margin: 0 0 30px;
    font-family: var(--ff-sans);
    font-size: .92rem;
    line-height: 1.7;
    color: var(--paper-2);
}
.success-code {
    padding: 20px;
    margin-bottom: 30px;
    background: var(--ink-0);
    border: 1px dashed var(--line-2);
}
.success-code span {
    display: block;
    font-family: var(--ff-mono);
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--paper-3);
    margin-bottom: 8px;
}
.success-code strong {
    font-family: var(--ff-display);
    font-size: 1.6rem;
    font-style: italic;
    font-weight: 700;
    color: var(--blue-3);
}
.success-box .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 32px;
    font-family: var(--ff-sans);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: #fff;
    background: var(--blue-1);
    text-decoration: none;
    transition: background .3s;
}
.success-box .btn-primary:hover { background: var(--blue-0); }


/* =========================================================
   28. MODAL PIX
   ========================================================= */
.pix-modal {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    z-index: 800;
    transition: opacity .4s, visibility .4s;
}
.pix-modal.open { opacity: 1; visibility: visible; }
.pix-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 6, 11, .94);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
.pix-dialog {
    position: relative;
    width: 100%;
    max-width: 520px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    padding: 32px;
    background: linear-gradient(180deg, var(--ink-1), var(--ink-2));
    border: 1px solid var(--line-2);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .7);
    overflow-y: auto;
    transform: translateY(20px) scale(.98);
    transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
.pix-modal.open .pix-dialog { transform: translateY(0) scale(1); }
.pix-close {
    position: absolute;
    top: 16px; right: 16px;
    width: 38px; height: 38px;
    display: grid;
    place-items: center;
    color: var(--paper-2);
    background: transparent;
    border: 1px solid var(--line-1);
    border-radius: 50%;
    cursor: pointer;
    transition: all .3s;
}
.pix-close:hover {
    color: var(--paper-0);
    border-color: var(--blue-1);
    transform: rotate(90deg);
}
.pix-close svg { width: 16px; height: 16px; }

.pix-head {
    margin-bottom: 26px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--line-1);
}
.pix-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    font-family: var(--ff-mono);
    font-size: .66rem;
    font-weight: 500;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--blue-3);
}
.pix-dot {
    width: 8px; height: 8px;
    background: #10b981;
    border-radius: 50%;
    box-shadow: 0 0 12px #10b981;
    animation: pixPulse 1.6s ease-in-out infinite;
}
@keyframes pixPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .35; }
}
.pix-head h2 {
    margin: 0;
    font-family: var(--ff-display);
    font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
    font-weight: 400;
    font-style: italic;
    line-height: 1.05;
    letter-spacing: -.02em;
    color: var(--paper-0);
}
.pix-head h2 em { font-style: normal; font-weight: 700; color: var(--blue-3); }

.pix-body {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 24px;
    align-items: center;
    margin-bottom: 24px;
}
.pix-qr-wrap {
    position: relative;
    width: 200px; height: 200px;
    padding: 12px;
    background: var(--paper-0);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.pix-qr-wrap canvas { width: 100% !important; height: 100% !important; display: block; }
.pix-qr-logo {
    position: absolute;
    top: 50%; left: 50%;
    width: 34px; height: 34px;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    background: var(--blue-1);
    border-radius: 50%;
    border: 3px solid var(--paper-0);
    pointer-events: none;
}
.pix-qr-logo span {
    font-family: var(--ff-display);
    font-size: 1rem;
    font-weight: 700;
    font-style: italic;
    color: #fff;
}

.pix-info { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pix-valor-row, .pix-countdown-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line-0);
}
.pix-valor-row > span, .pix-countdown-row > span {
    font-family: var(--ff-sans);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--paper-3);
}
.pix-valor-row strong {
    font-family: var(--ff-display);
    font-size: 1.5rem;
    font-style: italic;
    font-weight: 700;
    color: var(--paper-0);
}
.pix-countdown-row strong {
    font-family: var(--ff-mono);
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--blue-3);
}
.pix-aviso {
    margin: 0;
    font-family: var(--ff-sans);
    font-size: .82rem;
    line-height: 1.6;
    color: var(--paper-2);
    transition: color .3s;
}

.pix-codigo-wrap {
    padding: 18px;
    margin-bottom: 22px;
    background: var(--ink-0);
    border: 1px dashed var(--line-2);
}
.pix-codigo-wrap label {
    display: block;
    margin-bottom: 10px;
    font-family: var(--ff-sans);
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--blue-3);
}
.pix-codigo-wrap code {
    display: block;
    padding: 10px 0;
    font-family: var(--ff-mono);
    font-size: .72rem;
    line-height: 1.5;
    color: var(--paper-2);
    word-break: break-all;
    max-height: 60px;
    overflow: hidden;
    margin-bottom: 12px;
}
.pix-copiar {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    font-family: var(--ff-sans);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--paper-0);
    background: transparent;
    border: 1px solid var(--line-2);
    cursor: pointer;
    transition: all .3s;
}
.pix-copiar:hover { border-color: var(--blue-1); background: rgba(26, 77, 255, .1); }
.pix-copiar.copied { border-color: #10b981; color: #10b981; background: rgba(16, 185, 129, .08); }
.pix-copiar svg { width: 14px; height: 14px; }

.pix-foot {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    padding-top: 20px;
    border-top: 1px solid var(--line-1);
}
.pix-confirmar {
    padding: 16px 24px;
    font-family: var(--ff-sans);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: #fff;
    background: var(--blue-1);
    border: none;
    cursor: pointer;
    transition: background .3s;
}
.pix-confirmar:hover { background: var(--blue-0); }
.pix-confirmar:disabled { background: var(--paper-4); color: var(--paper-3); cursor: wait; }
.pix-cancelar {
    padding: 16px 22px;
    font-family: var(--ff-sans);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--paper-2);
    background: transparent;
    border: 1px solid var(--line-1);
    cursor: pointer;
    transition: all .3s;
}
.pix-cancelar:hover { color: var(--paper-0); border-color: var(--line-2); }


/* =========================================================
   29. RESPONSIVO GERAL
   ========================================================= */
@media (max-width: 1280px) {
    .category-grid { grid-template-columns: repeat(2, 1fr); }
    .category-grid .category-card:last-child { grid-column: span 2; min-height: 400px; }
}

@media (max-width: 1080px) {
    .header { grid-template-columns: auto 1fr auto; }
    .logo { grid-column: 2; justify-self: center; }

    .nav {
        position: fixed;
        top: 0; right: 0;
        width: min(420px, 88vw);
        height: 100vh;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 4px;
        padding: 100px 40px;
        background: var(--ink-1);
        border-left: 1px solid var(--line-2);
        box-shadow: -50px 0 120px rgba(0, 0, 0, .85);
        transform: translateX(105%);
        transition: transform .65s var(--ease-soft);
        z-index: 195;
    }
    .nav.open { transform: translateX(0); }

    .nav a {
        width: 100%;
        font-family: var(--ff-display);
        font-size: 1.6rem;
        font-style: italic;
        font-weight: 400;
        letter-spacing: 0;
        text-transform: none;
        color: var(--paper-0);
        padding: 18px 0;
        border-bottom: 1px solid var(--line-0);
    }
    .nav a::before { display: none; }
    .nav a:hover { letter-spacing: 0; color: var(--blue-3); }
    .nav a.active { color: var(--blue-3); }

    .menu-button { display: grid; }

    .nav .nav-close {
        display: grid;
        position: absolute;
        top: 22px; right: 24px;
        width: 40px; height: 40px;
        place-items: center;
        font-size: 1.4rem;
        color: var(--paper-2);
        border: 1px solid var(--line-1);
        border-radius: 50%;
        transition: all .4s var(--ease-soft);
    }
    .nav .nav-close:hover {
        color: var(--paper-0);
        border-color: var(--blue-1);
        transform: rotate(90deg);
    }

    .hero { grid-template-columns: 1fr; }
    .hero-decoration { display: none; }
    .hero::after { display: none; }

    .category-grid { grid-template-columns: 1fr; }
    .category-grid .category-card:last-child { grid-column: auto; }
    .category-hero { grid-template-columns: 1fr; }
    .category-hero-mark { opacity: .5; }

    .newsletter { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    .header { padding: 0 18px; }
    .logo { font-size: 1.35rem; }
    .header.scrolled .logo { font-size: 1.15rem; }

    .search-button, .cart-button, .menu-button {
        width: 38px; height: 38px; font-size: .92rem;
    }

    .conta-button { width: 38px; height: 38px; padding: 0; justify-content: center; }
    .conta-button svg { width: 16px; height: 16px; }
    .conta-nome { display: none !important; }
    .conta-dropdown { display: none; }

    .hero { min-height: auto; padding: 60px 18px 80px; }
    .hero-buttons { flex-direction: column; align-items: stretch; }
    .hero-buttons a { justify-content: space-between; }

    .quick-grid { border-left: none; }
    .quick-card { border-left: 1px solid var(--line-1); }

    .lookbook-grid { grid-template-columns: repeat(6, 1fr); }
    .lookbook-item.span-3,
    .lookbook-item.span-4,
    .lookbook-item.span-5,
    .lookbook-item.span-6,
    .lookbook-item.span-7 { grid-column: span 6; }

    .footer-links { gap: 10px 20px; }
    .admin-link { border-left: none; padding-left: 0; }
    .pull-quote::before { font-size: 5rem; top: -20px; }

    .breadcrumb { padding: 60px var(--gutter) 0;}
    .category-hero { padding: 60px 18px 60px; }
    .category-hero-meta { grid-template-columns: 1fr; gap: 18px; padding-top: 22px; }
    .category-hero-meta > div {
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--line-0);
    }
    .category-heading { flex-direction: column; align-items: flex-start; }
    .category-toolbar { width: 100%; justify-content: space-between; }

    .products-grid { grid-template-columns: repeat(2, 1fr); gap: 12px 10px; }
    .product-info { padding: 12px 2px 4px; gap: 4px; }
    .product-cat { font-size: .55rem; letter-spacing: .26em; }
    .product-name { font-size: .95rem; }
    .product-desc { display: none; }
    .product-price strong { font-size: .92rem; }
    .product-price s { font-size: .72rem; }
    .product-sizes { display: none; }
    .product-wish { opacity: 1; transform: none; width: 32px; height: 32px; }

    .product-actions {
        opacity: 1;
        transform: none;
        grid-template-columns: 1fr;
        gap: 4px;
        left: 8px;
        right: 8px;
        bottom: 8px;
    }
    .product-quick-add,
    .product-buy-now {
        padding: 10px 8px;
        font-size: .58rem;
        letter-spacing: .16em;
    }
    .product-quick-add svg,
    .product-buy-now svg { width: 12px; height: 12px; }

    .admin-form { grid-template-columns: 1fr; padding: 24px; }
    .field--full, .admin-form button { grid-column: span 1; }
    .admin-item { grid-template-columns: 60px 1fr; }

    /* Carrinho */
    .cart-page { padding: 30px 18px 80px; }
    .cart-page .cart-layout { grid-template-columns: 1fr; }
    .cart-page .cart-summary { position: static; }
    .cart-page .cart-item { grid-template-columns: 74px 1fr; gap: 14px; padding: 18px 0; }
    .cart-page .cart-item-media { width: 74px; height: 92px; }
    .cart-page .cart-item-actions {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    .cart-page .cart-heading { margin-bottom: 40px; padding-bottom: 24px; }
    .cart-page .cart-summary { padding: 22px; }

    /* Checkout */
    .search-main,
    .checkout-main { padding: 30px 18px 90px; }

    .checkout-layout { grid-template-columns: 1fr; }
    .checkout-summary { position: static; }
    .checkout-step { padding: 24px 20px; }
    .payment-methods { grid-template-columns: 1fr; }
    .btn-finish-mobile { display: block; }
    .checkout-form > .btn-primary { display: none; }
    .summary-content { padding: 22px; }

    /* PIX */
    .pix-dialog { padding: 24px 20px; }
    .pix-body { grid-template-columns: 1fr; justify-items: center; }
    .pix-qr-wrap { width: 180px; height: 180px; }
    .pix-info { width: 100%; }
    .pix-foot { grid-template-columns: 1fr; }
    .pix-confirmar { width: 100%; }

    .success-box { padding: 40px 24px; }

    .loader-brand { font-size: 1.8rem; }
    .loader-line { width: 160px; }

    .cursor-halo { display: none; }
}

@media (max-width: 520px) {
    .hero h1 { font-size: clamp(2.2rem, 8vw, 3.2rem); }
    .hero-small { font-size: .6rem; letter-spacing: .28em; }

    .section-title h2 { font-size: clamp(1.8rem, 7vw, 2.6rem); }
    .pull-quote blockquote { font-size: 1.35rem; }

    .final-cta h2 { font-size: clamp(1.8rem, 7vw, 2.8rem); }

    .footer-logo { font-size: 1.5rem; }
    .footer-links a { font-size: .62rem; letter-spacing: .2em; }

    .toast-stack { left: 16px; right: 16px; transform: none; bottom: 20px; }
    .toast { width: 100%; }

    .category-hero h1 { font-size: clamp(2rem, 8vw, 3rem); }
    .category-hero-meta strong { font-size: .95rem; }

    .cart-page .cart-heading h1 { font-size: clamp(1.7rem, 7vw, 2.4rem); }
    .cart-page .cart-summary-title { font-size: 1.15rem; }
    .cart-page .cart-summary-row--total strong { font-size: 1.3rem; }

    .search-head h1,
    .checkout-head h1 { font-size: clamp(1.7rem, 7vw, 2.4rem); }

    .step-num { width: 36px; height: 36px; font-size: .95rem; }
    .step-head h2 { font-size: 1.15rem; }

    .success-icon { width: 60px; height: 60px; }
    .success-icon svg { width: 26px; height: 26px; }
    .success-code strong { font-size: 1.3rem; }

    .pix-qr-wrap { width: 150px; height: 150px; }
    .pix-valor-row strong { font-size: 1.2rem; }
    .pix-countdown-row strong { font-size: 1.05rem; }
}

@media (max-width: 420px) {
    .logo { font-size: 1.15rem; }
    .logo span { display: none; }
    .ticker-track > * { font-size: 1rem; }
    .final-cta::before { font-size: clamp(4rem, 28vw, 12rem); }
}

@media (min-width: 1600px) {
    body { font-size: 17px; }
    .container { max-width: 1680px; }
}


/* =========================================================
   30. ACESSIBILIDADE
   ========================================================= */
:focus-visible {
    outline: 2px solid var(--blue-2);
    outline-offset: 4px;
    transition: outline-offset .2s var(--ease-soft);
}
:focus:not(:focus-visible) { outline: none; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .reveal, .reveal-left, .reveal-right { opacity: 1; transform: none; }
    .reveal-mask > span { transform: none; }
    body::after { display: none; }
}


/* =========================================================
   31. PÁGINA DO PRODUTO — botão comprar agora
   ========================================================= */
.btn-buy-now {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 18px 28px;
    margin-top: 6px;
    font-family: var(--ff-sans);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: #fff;
    background: var(--blue-1);
    border: none;
    cursor: pointer;
    transition: background .3s var(--ease-soft), transform .3s var(--ease-soft);
}

.btn-buy-now:hover {
    background: var(--blue-0);
    transform: translateY(-1px);
}

.btn-buy-now svg {
    width: 16px;
    height: 16px;
}

.btn-buy-now[disabled] {
    background: var(--paper-4);
    color: var(--paper-3);
    cursor: not-allowed;
    transform: none;
}


/* =========================================================
   32. CHECKOUT — RESUMO (fora do contexto .cart-page)
   Classes usadas em finalizar.html que antes só existiam
   aninhadas dentro de .cart-page.
   ========================================================= */

.cart-summary-kicker {
    display: block;
    margin-bottom: 14px;
    font-family: var(--ff-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--blue-3);
}

.cart-summary-title {
    margin: 0 0 24px;
    padding-bottom: 22px;
    font-family: var(--ff-display);
    font-size: 22px;
    font-style: italic;
    font-weight: 400;
    line-height: 1.15;
    color: var(--paper-0);
    border-bottom: 1px solid var(--line-1);
}

.cart-summary-title em {
    font-style: normal;
    font-weight: 700;
    color: var(--blue-3);
}


/* =========================================================
   33. FOOTER — contatos (e-mail + WhatsApp)
   ========================================================= */

.footer-contato {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin: 0 0 26px;
    padding: 0;
}

.footer-contato-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    font-family: var(--ff-sans);
    font-size: .82rem;
    font-weight: 500;
    letter-spacing: .04em;
    color: var(--paper-2);
    background: transparent;
    border: 1px solid var(--line-1);
    border-radius: 99px;
    text-decoration: none;
    transition: all .35s var(--ease-soft);
}

.footer-contato-link:hover {
    color: var(--blue-3);
    border-color: var(--blue-2);
    background: rgba(26, 77, 255, .06);
    transform: translateY(-2px);
}

.footer-contato-link svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.footer-contato-link[href*="wa.me"]:hover {
    color: #25D366;
    border-color: rgba(37, 211, 102, .45);
    background: rgba(37, 211, 102, .08);
}

@media (max-width: 480px) {
    .footer-contato {
        flex-direction: column;
        gap: 8px;
    }
    .footer-contato-link {
        width: 100%;
        justify-content: center;
        font-size: .76rem;
        padding: 9px 16px;
    }
}
/* =========================================================
   TEMA CLARO — v2 (corrigido e completo)
   Substitui todas as seções anteriores de tema claro
   ========================================================= */

/* ---------------------------------------------------------
   VARIÁVEIS
   --------------------------------------------------------- */
[data-tema="claro"] {
    --ink-0: #f5f7ff;
    --ink-1: #eef1f8;
    --ink-2: #e5eaf5;
    --ink-3: #dde3f0;
    --ink-4: #ccd4e5;

    --paper-0: #050810;
    --paper-1: #0b1120;
    --paper-2: #38455c;
    --paper-3: #5d6b83;
    --paper-4: #7a8aa8;

    --line-0: rgba(10, 20, 50, .10);
    --line-1: rgba(10, 20, 50, .18);
    --line-2: rgba(10, 20, 50, .30);
    --line-3: rgba(10, 20, 50, .45);
    --line-4: rgba(10, 20, 50, .65);

    --blue-3: #1a4dff;
    --blue-4: #0a2fa8;
}

/* ---------------------------------------------------------
   BASE / FUNDOS
   --------------------------------------------------------- */
[data-tema="claro"] body {
    background: var(--ink-0);
    color: var(--paper-1);
}

[data-tema="claro"] body::before {
    background:
        radial-gradient(1200px 800px at 15% -10%, rgba(26, 77, 255, .06), transparent 60%),
        radial-gradient(900px 700px at 105% 15%, rgba(10, 47, 168, .04), transparent 65%),
        radial-gradient(1100px 900px at 50% 120%, rgba(26, 77, 255, .04), transparent 70%);
}

[data-tema="claro"] body::after { opacity: .12; }

/* ---------------------------------------------------------
   HEADER
   --------------------------------------------------------- */
[data-tema="claro"] .header {
    background: rgba(245, 247, 255, .85);
    border-bottom-color: rgba(10, 20, 50, .08);
}

[data-tema="claro"] .header.scrolled {
    background: rgba(245, 247, 255, .96);
    box-shadow: 0 1px 0 rgba(10, 20, 50, .06), 0 20px 60px rgba(0, 0, 0, .08);
}

[data-tema="claro"] .header::after { opacity: .35; }

/* ---------------------------------------------------------
   NAV / MENU MOBILE
   --------------------------------------------------------- */
[data-tema="claro"] .nav-backdrop { background: rgba(245, 247, 255, .72); }

[data-tema="claro"] .nav.open {
    background: #eef1f8;
    border-left-color: rgba(10, 20, 50, .2);
}

[data-tema="claro"] .nav a {
    color: #050810;
    border-bottom-color: rgba(10, 20, 50, .08);
}

[data-tema="claro"] .nav a:hover,
[data-tema="claro"] .nav a.active { color: #1a4dff; }

/* ---------------------------------------------------------
   CONTA (botão + dropdown)  ← CORRIGIDO
   --------------------------------------------------------- */
[data-tema="claro"] .conta-button {
    color: #38455c;
    background: transparent;
    border-color: transparent;
}

[data-tema="claro"] .conta-button:hover {
    color: #050810;
    background: rgba(26, 77, 255, .08);
    border-color: rgba(26, 77, 255, .3);
}

[data-tema="claro"] .conta-button.logado {
    color: #059669;
    border-color: rgba(5, 150, 105, .35);
    background: rgba(16, 185, 129, .1);
}

[data-tema="claro"] .conta-button.logado:hover {
    color: #047857;
    border-color: #059669;
    background: rgba(16, 185, 129, .18);
}

[data-tema="claro"] .conta-button.logado::after {
    border-color: #f5f7ff;
}

[data-tema="claro"] .conta-dropdown {
    background: #ffffff;
    border-color: rgba(10, 20, 50, .18);
    box-shadow:
        0 30px 80px rgba(0, 0, 0, .12),
        0 0 40px rgba(26, 77, 255, .06);
}

[data-tema="claro"] .conta-dropdown-head {
    border-bottom-color: rgba(10, 20, 50, .12);
}

[data-tema="claro"] .conta-dropdown-head strong {
    color: #050810;
}

[data-tema="claro"] .conta-dropdown-head small {
    color: #5d6b83;
}

[data-tema="claro"] .conta-dropdown ul li a {
    color: #38455c;
}

[data-tema="claro"] .conta-dropdown ul li a:hover {
    color: #050810;
    background: #eef1f8;
}

[data-tema="claro"] .conta-dropdown ul li a svg {
    color: #1a4dff;
}

[data-tema="claro"] .conta-dropdown-foot {
    border-top-color: rgba(10, 20, 50, .12);
}

[data-tema="claro"] .conta-dropdown-foot button {
    color: #dc2626;
}

[data-tema="claro"] .conta-dropdown-foot button:hover {
    background: rgba(239, 68, 68, .08);
    color: #b91c1c;
}

/* ---------------------------------------------------------
   BOTÕES  ← CORREÇÃO CRÍTICA
   --------------------------------------------------------- */
[data-tema="claro"] .btn-primary {
    color: #ffffff;
}

[data-tema="claro"] .btn-primary:hover {
    color: #ffffff;
}

[data-tema="claro"] .btn-secondary {
    color: #050810;
    border-color: rgba(10, 20, 50, .35);
    background: transparent;
}

[data-tema="claro"] .btn-secondary:hover {
    background: rgba(26, 77, 255, .1);
    border-color: #1a4dff;
    color: #1a4dff;
}

[data-tema="claro"] .btn-ghost {
    color: #38455c;
    border-color: rgba(10, 20, 50, .28);
}

[data-tema="claro"] .btn-ghost:hover {
    color: #050810;
    background: #e5eaf5;
    border-color: rgba(10, 20, 50, .45);
}

/* ---------------------------------------------------------
   OVERLAYS / MODAIS
   --------------------------------------------------------- */
[data-tema="claro"] .search-overlay { background: rgba(245, 247, 255, .96); }

[data-tema="claro"] .pix-backdrop {
    background: rgba(10, 20, 50, .55);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

[data-tema="claro"] .checkout-success {
    background: rgba(10, 20, 50, .55);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

[data-tema="claro"] .cursor-halo {
    background: radial-gradient(circle, rgba(26, 77, 255, .08), transparent 65%);
}

/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */
[data-tema="claro"] .hero {
    background:
        radial-gradient(1000px 800px at 78% 10%, rgba(26, 77, 255, .14), transparent 60%),
        radial-gradient(800px 600px at 8% 92%, rgba(10, 47, 168, .10), transparent 65%),
        linear-gradient(180deg, var(--ink-0) 0%, var(--ink-1) 60%, var(--ink-0) 100%);
}

/* ---------------------------------------------------------
   CATEGORIAS — cards
   --------------------------------------------------------- */
[data-tema="claro"] .street-card,
[data-tema="claro"] .access-card,
[data-tema="claro"] .old-card {
    background:
        linear-gradient(180deg, transparent 42%, rgba(245, 247, 255, .94) 100%),
        radial-gradient(600px 550px at 22% 28%, rgba(26, 77, 255, .18), transparent 65%),
        linear-gradient(160deg, #e5eaf5 0%, #f5f7ff 100%);
}

[data-tema="claro"] .category-card::before {
    background-image:
        repeating-linear-gradient(45deg,
            transparent 0, transparent 10px,
            rgba(10, 20, 50, .05) 10px, rgba(10, 20, 50, .05) 11px);
}

/* ---------------------------------------------------------
   CATEGORY HERO
   --------------------------------------------------------- */
[data-tema="claro"] .category-hero--street,
[data-tema="claro"] .category-hero--access,
[data-tema="claro"] .category-hero--old {
    background:
        radial-gradient(900px 700px at 78% 15%, rgba(26, 77, 255, .12), transparent 62%),
        radial-gradient(700px 500px at 8% 90%, rgba(10, 47, 168, .08), transparent 65%),
        linear-gradient(180deg, var(--ink-0) 0%, var(--ink-1) 100%);
}

/* ---------------------------------------------------------
   TICKER / NEWSLETTER / CTA
   --------------------------------------------------------- */
[data-tema="claro"] .newsletter,
[data-tema="claro"] .ticker { background: var(--ink-1); }

[data-tema="claro"] .ticker::before { background: linear-gradient(90deg, var(--ink-1), transparent); }
[data-tema="claro"] .ticker::after  { background: linear-gradient(270deg, var(--ink-1), transparent); }

[data-tema="claro"] .ticker-track > * { color: #38455c; }

[data-tema="claro"] .final-cta {
    background: radial-gradient(900px 500px at 50% 50%, rgba(26, 77, 255, .10), transparent 65%);
}

/* ---------------------------------------------------------
   TEXTO DECORATIVO OUTLINE (stroke)  ← Boost de contraste
   --------------------------------------------------------- */
[data-tema="claro"] .search-overlay::before,
[data-tema="claro"] .final-cta::before,
[data-tema="claro"] .category-hero-mark {
    -webkit-text-stroke: 1px rgba(10, 20, 50, .28);
}

[data-tema="claro"] .hero::after,
[data-tema="claro"] .hero-decoration span {
    -webkit-text-stroke: 1px rgba(10, 20, 50, .30);
}

/* ---------------------------------------------------------
   PLACEHOLDERS
   --------------------------------------------------------- */
[data-tema="claro"] input::placeholder,
[data-tema="claro"] textarea::placeholder {
    color: rgba(10, 20, 50, .45);
}

/* ---------------------------------------------------------
   AZUIS CLAROS → AZUIS ESCUROS (contraste)
   --------------------------------------------------------- */
[data-tema="claro"] .hero-small,
[data-tema="claro"] .section-kicker,
[data-tema="claro"] .section-title > p,
[data-tema="claro"] .category-label,
[data-tema="claro"] .category-content > span,
[data-tema="claro"] .quick-card span,
[data-tema="claro"] .lookbook-item small,
[data-tema="claro"] .final-cta p,
[data-tema="claro"] .pull-quote cite,
[data-tema="claro"] .product-cat,
[data-tema="claro"] .footer-links a:hover,
[data-tema="claro"] .breadcrumb a,
[data-tema="claro"] .breadcrumb [aria-current],
[data-tema="claro"] .cart-summary-kicker,
[data-tema="claro"] .summary-item-info small,
[data-tema="claro"] .shipping-price,
[data-tema="claro"] .pix-kicker,
[data-tema="claro"] .pix-countdown-row strong {
    color: #1a4dff;
}

/* ---------------------------------------------------------
   PAPÉIS CLAROS → PAPÉIS ESCUROS
   --------------------------------------------------------- */
[data-tema="claro"] .nav a,
[data-tema="claro"] .nav a.active,
[data-tema="claro"] .category-content strong,
[data-tema="claro"] .category-content h3,
[data-tema="claro"] .pull-quote blockquote,
[data-tema="claro"] .hero h1,
[data-tema="claro"] .section-title h2,
[data-tema="claro"] .lookbook-item h4,
[data-tema="claro"] .quick-card h3,
[data-tema="claro"] .newsletter h3,
[data-tema="claro"] .product-name,
[data-tema="claro"] .product-price strong,
[data-tema="claro"] .detail-title,
[data-tema="claro"] .detail-price,
[data-tema="claro"] .detail-label-value,
[data-tema="claro"] .cart-summary-title,
[data-tema="claro"] .cart-summary-row strong,
[data-tema="claro"] .summary-row strong,
[data-tema="claro"] .summary-item-info strong,
[data-tema="claro"] .checkout-head h1,
[data-tema="claro"] .checkout-step h2,
[data-tema="claro"] .footer-logo,
[data-tema="claro"] .footer > p,
[data-tema="claro"] .conta-head h1,
[data-tema="claro"] .conta-section-head h2,
[data-tema="claro"] .conta-head-info > p,
[data-tema="claro"] .auth-title,
[data-tema="claro"] .auth-visual-text h2,
[data-tema="claro"] .pedido-num,
[data-tema="claro"] .pedido-foot strong,
[data-tema="claro"] .carrinho-item-nome,
[data-tema="claro"] .carrinho-item-subtotal,
[data-tema="claro"] .carrinho-total strong,
[data-tema="claro"] .endereco-info strong,
[data-tema="claro"] .notif-text strong,
[data-tema="claro"] .review-name,
[data-tema="claro"] .review-comentario,
[data-tema="claro"] .reviews-summary-nota,
[data-tema="claro"] .pix-head h2,
[data-tema="claro"] .pix-valor-row strong,
[data-tema="claro"] .reembolso-head h2,
[data-tema="claro"] .modal-head h3,
[data-tema="claro"] .step-head h2,
[data-tema="claro"] .step-num,
[data-tema="claro"] .field label,
[data-tema="claro"] .checkout-step label {
    color: #050810;
}

/* ---------------------------------------------------------
   CINZAS CLAROS → CINZAS ESCUROS
   --------------------------------------------------------- */
[data-tema="claro"] .hero-description,
[data-tema="claro"] .section-head-right p,
[data-tema="claro"] .category-content p,
[data-tema="claro"] .category-hero p,
[data-tema="claro"] .newsletter p,
[data-tema="claro"] .product-desc,
[data-tema="claro"] .detail-desc,
[data-tema="claro"] .summary-info,
[data-tema="claro"] .cart-summary-info,
[data-tema="claro"] .checkout-head p,
[data-tema="claro"] .step-head p,
[data-tema="claro"] .auth-sub,
[data-tema="claro"] .payment-note,
[data-tema="claro"] .shipping-info small,
[data-tema="claro"] .summary-row span,
[data-tema="claro"] .cart-summary-row > span,
[data-tema="claro"] .conta-head-label,
[data-tema="claro"] .conta-section-head p,
[data-tema="claro"] .pedido-data,
[data-tema="claro"] .pedido-foot span,
[data-tema="claro"] .carrinho-item-qtd,
[data-tema="claro"] .carrinho-item-cat,
[data-tema="claro"] .endereco-info p,
[data-tema="claro"] .endereco-info small,
[data-tema="claro"] .notif-text small,
[data-tema="claro"] .reviews-summary-total,
[data-tema="claro"] .review-date,
[data-tema="claro"] .pix-aviso,
[data-tema="claro"] .footer-contato-link {
    color: #38455c;
}

/* ---------------------------------------------------------
   PAINÉIS / INPUTS / CARDS
   --------------------------------------------------------- */
[data-tema="claro"] .checkout-step,
[data-tema="claro"] .summary-content,
[data-tema="claro"] .cart-summary,
[data-tema="claro"] .modal-dialog,
[data-tema="claro"] .pix-dialog,
[data-tema="claro"] .reembolso-dialog,
[data-tema="claro"] .success-box {
    background: #eef1f8;
    border-color: rgba(10, 20, 50, .18);
}

[data-tema="claro"] input,
[data-tema="claro"] textarea,
[data-tema="claro"] select,
[data-tema="claro"] .checkout-step input,
[data-tema="claro"] .checkout-step select,
[data-tema="claro"] .field input,
[data-tema="claro"] .field textarea,
[data-tema="claro"] .field select,
[data-tema="claro"] .conta-field input,
[data-tema="claro"] .auth-field input,
[data-tema="claro"] .shipping-option,
[data-tema="claro"] .payment-method {
    background: #ffffff;
    color: #050810;
    border-color: rgba(10, 20, 50, .25);
}

[data-tema="claro"] input:hover,
[data-tema="claro"] textarea:hover,
[data-tema="claro"] select:hover { border-color: rgba(10, 20, 50, .4); }

[data-tema="claro"] input:focus,
[data-tema="claro"] textarea:focus,
[data-tema="claro"] select:focus { border-color: #1a4dff; }

[data-tema="claro"] select option {
    background: #ffffff;
    color: #050810;
}

[data-tema="claro"] .pedido-card,
[data-tema="claro"] .endereco-card,
[data-tema="claro"] .review-card,
[data-tema="claro"] .carrinho-item,
[data-tema="claro"] .notif-opcao,
[data-tema="claro"] .conta-nav {
    background: #eef1f8;
    border-color: rgba(10, 20, 50, .15);
}

[data-tema="claro"] .review-card--minha {
    background: linear-gradient(180deg, rgba(26, 77, 255, .08), rgba(26, 77, 255, .02));
    border-color: rgba(26, 77, 255, .4);
}

[data-tema="claro"] .pix-codigo-wrap,
[data-tema="claro"] .reembolso-motivo,
[data-tema="claro"] .order-item,
[data-tema="claro"] .order-totals,
[data-tema="claro"] .success-code,
[data-tema="claro"] .payment-detail {
    background: #ffffff;
    border-color: rgba(10, 20, 50, .12);
}

[data-tema="claro"] .reembolso-textarea,
[data-tema="claro"] #reembolsoModalObs {
    background: #ffffff !important;
    color: #050810 !important;
    border-color: rgba(10, 20, 50, .18) !important;
}

/* QR PIX — fundo branco obrigatório  ← NOVO */
[data-tema="claro"] .pix-qr-wrap {
    background: #ffffff;
    box-shadow: 0 0 0 1px rgba(10, 20, 50, .15) inset;
}

[data-tema="claro"] .pix-qr-logo { border-color: #ffffff; }

/* ---------------------------------------------------------
   AUTH (login)
   --------------------------------------------------------- */
[data-tema="claro"] .auth-visual {
    background:
        radial-gradient(700px 500px at 30% 20%, rgba(26, 77, 255, .1), transparent 65%),
        linear-gradient(160deg, #eef1f8 0%, #f5f7ff 100%);
    border-color: rgba(10, 20, 50, .12);
}

[data-tema="claro"] .auth-benefits li { color: #38455c; }

[data-tema="claro"] .auth-tabs {
    background: #eef1f8;
    border-color: rgba(10, 20, 50, .12);
}

[data-tema="claro"] .auth-tab { color: #5d6b83; }

[data-tema="claro"] .auth-tab:hover {
    color: #050810;
    background: #e5eaf5;
}

/* ---------------------------------------------------------
   TOAST
   --------------------------------------------------------- */
[data-tema="claro"] .toast {
    background: #ffffff;
    border-color: rgba(10, 20, 50, .15);
    color: #050810;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .12), 0 0 40px rgba(26, 77, 255, .1);
}

/* ---------------------------------------------------------
   BUSCA
   --------------------------------------------------------- */
[data-tema="claro"] .search-box input {
    color: #050810;
    border-bottom-color: rgba(10, 20, 50, .25);
}

[data-tema="claro"] .search-box > button:last-child { color: #38455c; }
[data-tema="claro"] .search-box > button:last-child:hover { color: #050810; }

/* ---------------------------------------------------------
   BREADCRUMB
   --------------------------------------------------------- */
[data-tema="claro"] .breadcrumb { color: #5d6b83; }
[data-tema="claro"] .breadcrumb a { color: #38455c; }

/* ---------------------------------------------------------
   FOOTER
   --------------------------------------------------------- */
[data-tema="claro"] .footer {
    background: #eef1f8;
    border-top-color: rgba(10, 20, 50, .12);
}

[data-tema="claro"] .footer > p {
    border-top-color: rgba(10, 20, 50, .12);
}

[data-tema="claro"] .footer-contato-link {
    color: #38455c;
    border-color: rgba(10, 20, 50, .25);
}

[data-tema="claro"] .footer-contato-link:hover {
    color: #1a4dff;
    border-color: #1a4dff;
    background: rgba(26, 77, 255, .08);
}

[data-tema="claro"] .footer-contato-link[href*="wa.me"]:hover {
    color: #128C7E;
    background: rgba(37, 211, 102, .1);
    border-color: rgba(37, 211, 102, .5);
}

/* ---------------------------------------------------------
   CARDS DE PRODUTO
   --------------------------------------------------------- */
[data-tema="claro"] .product-media::after {
    background: linear-gradient(180deg, transparent, rgba(245, 247, 255, .55));
}

[data-tema="claro"] .product-card:hover .product-media {
    border-color: rgba(10, 20, 50, .35);
}

[data-tema="claro"] .product-card:hover .product-name { color: #1a4dff; }

[data-tema="claro"] .product-quick-add {
    background: rgba(255, 255, 255, .9);
    color: #050810;
    border-color: rgba(26, 77, 255, .35);
}

[data-tema="claro"] .product-quick-add:hover:not(:disabled) {
    background: rgba(26, 77, 255, .1);
    border-color: rgba(26, 77, 255, .7);
}

[data-tema="claro"] .product-badge {
    background: rgba(255, 255, 255, .9);
    color: #050810;
    border-color: rgba(10, 20, 50, .2);
}

[data-tema="claro"] .product-badge--new,
[data-tema="claro"] .product-badge--sale {
    color: #fff;
    border-color: transparent;
}

[data-tema="claro"] .product-badge--out {
    background: rgba(255, 255, 255, .95);
    color: #5d6b83;
    border-color: rgba(10, 20, 50, .15);
}

[data-tema="claro"] .product-skeleton {
    background: linear-gradient(100deg, #e5eaf5 0%, #dde3f0 50%, #e5eaf5 100%);
    background-size: 200% 100%;
}

/* ---------------------------------------------------------
   FAVORITOS (coração)
   --------------------------------------------------------- */
[data-tema="claro"] .product-wish {
    color: #38455c;
    background: rgba(255, 255, 255, .9);
    border-color: rgba(10, 20, 50, .15);
}

[data-tema="claro"] .product-wish:hover {
    color: #1a4dff;
    background: #ffffff;
    border-color: #1a4dff;
}

[data-tema="claro"] .product-wish.active {
    color: #1a4dff;
    background: rgba(26, 77, 255, .1);
    border-color: #1a4dff;
}

[data-tema="claro"] .product-wish.active svg { fill: #1a4dff; }

[data-tema="claro"] .btn-wish-large {
    color: #38455c;
    background: rgba(255, 255, 255, .9);
    border-color: rgba(10, 20, 50, .18);
}

[data-tema="claro"] .btn-wish-large:hover {
    color: #1a4dff;
    background: #ffffff;
    border-color: #4d7cff;
}

[data-tema="claro"] .btn-wish-large.active {
    color: #1a4dff;
    background: rgba(26, 77, 255, .1);
    border-color: #1a4dff;
}

[data-tema="claro"] .btn-wish-large.active svg { fill: #1a4dff; }

/* ---------------------------------------------------------
   BOTÕES SECUNDÁRIOS / GHOST / ESPECÍFICOS
   --------------------------------------------------------- */
[data-tema="claro"] .cart-page .cart-qty { border-color: rgba(10, 20, 50, .28); }
[data-tema="claro"] .cart-page .cart-qty button { color: #38455c; }
[data-tema="claro"] .cart-page .cart-qty button:hover {
    color: #050810;
    background: rgba(26, 77, 255, .1);
}

[data-tema="claro"] .detail-size {
    color: #38455c;
    border-color: rgba(10, 20, 50, .28);
}

[data-tema="claro"] .detail-size:hover {
    color: #050810;
    border-color: rgba(10, 20, 50, .5);
}

[data-tema="claro"] .pedido-filtro {
    color: #38455c;
    border-color: rgba(10, 20, 50, .25);
}

[data-tema="claro"] .pedido-filtro:hover {
    color: #050810;
    border-color: rgba(10, 20, 50, .45);
}

[data-tema="claro"] .btn-add-endereco {
    color: #050810;
    border-color: rgba(10, 20, 50, .35);
}

[data-tema="claro"] .btn-add-endereco:hover {
    border-color: #1a4dff;
    background: rgba(26, 77, 255, .08);
    color: #1a4dff;
}

[data-tema="claro"] .btn-notificacoes {
    color: #050810;
    border-color: rgba(10, 20, 50, .28);
}

[data-tema="claro"] .btn-notificacoes:hover:not(:disabled) {
    border-color: #1a4dff;
    background: rgba(26, 77, 255, .08);
}

/* ---------------------------------------------------------
   LINHAS / SEPARADORES
   --------------------------------------------------------- */
[data-tema="claro"] .summary-divider,
[data-tema="claro"] .cart-summary-divider,
[data-tema="claro"] .panel-head,
[data-tema="claro"] .modal-section,
[data-tema="claro"] .step-head,
[data-tema="claro"] .conta-head,
[data-tema="claro"] .conta-section-head,
[data-tema="claro"] .table td,
[data-tema="claro"] .table th,
[data-tema="claro"] .quick-grid,
[data-tema="claro"] .quick-card {
    border-color: rgba(10, 20, 50, .18);
}

/* ---------------------------------------------------------
   SCROLLBAR
   --------------------------------------------------------- */
[data-tema="claro"] ::-webkit-scrollbar-thumb {
    background: rgba(10, 20, 50, .25);
    border-color: var(--ink-0);
}

[data-tema="claro"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(10, 20, 50, .4);
}

[data-tema="claro"] ::-webkit-scrollbar-track {
    border-left-color: rgba(10, 20, 50, .08);
}

/* ---------------------------------------------------------
   BOTÃO DE TEMA
   --------------------------------------------------------- */
.theme-button {
    position: relative;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: var(--paper-2);
    background: none;
    border: 1px solid transparent;
    border-radius: 50%;
    cursor: pointer;
    transition: all .35s cubic-bezier(.22, 1, .36, 1);
}

.theme-button:hover {
    color: var(--paper-0);
    background: rgba(127, 176, 255, .06);
    border-color: var(--line-2);
    transform: translateY(-2px);
}

[data-tema="claro"] .theme-button:hover {
    background: rgba(26, 77, 255, .08);
}

.theme-button svg {
    width: 18px;
    height: 18px;
    transition: transform .4s cubic-bezier(.34, 1.56, .64, 1);
}

.theme-button:hover svg { transform: rotate(20deg); }

.theme-button .icone-sol { display: block; }
.theme-button .icone-lua { display: none; }

[data-tema="claro"] .theme-button .icone-sol { display: none; }
[data-tema="claro"] .theme-button .icone-lua { display: block; }

@media (max-width: 720px) {
    .theme-button { width: 38px; height: 38px; }
    .theme-button svg { width: 16px; height: 16px; }
}

/* ---------------------------------------------------------
   TRANSIÇÕES SUAVES AO TROCAR TEMA
   --------------------------------------------------------- */
[data-tema] body,
[data-tema] .header,
[data-tema] .footer,
[data-tema] .product-card,
[data-tema] .cart-item,
[data-tema] .pedido-card,
[data-tema] .conta-button,
[data-tema] .btn-primary,
[data-tema] .btn-secondary {
    transition:
        background-color .35s ease,
        color .35s ease,
        border-color .35s ease;
}

/* =========================================================
   FIM — SEYNCLOTHING CSS v6.0 (tema claro v2)
   ========================================================= */
   /* =========================================================
   TEMA CLARO — v3 SUPER FIX (LEGIBILIDADE MÁXIMA)
   Cola no FINAL do arquivo CSS — sobrescreve tudo acima
   ========================================================= */

/* ---------------------------------------------------------
   1. PALETA CLARA REFORÇADA — contraste alto
   --------------------------------------------------------- */
[data-tema="claro"] {
    --ink-0: #ffffff;
    --ink-1: #f7f9fc;
    --ink-2: #eef2f8;
    --ink-3: #e2e8f0;
    --ink-4: #cbd5e1;

    --paper-0: #000000;   /* títulos: preto puro */
    --paper-1: #111827;   /* texto principal */
    --paper-2: #1f2937;   /* corpo/secundário */
    --paper-3: #374151;   /* apoio */
    --paper-4: #4b5563;   /* detalhe */

    --line-0: rgba(0, 0, 0, .10);
    --line-1: rgba(0, 0, 0, .18);
    --line-2: rgba(0, 0, 0, .30);
    --line-3: rgba(0, 0, 0, .45);
    --line-4: rgba(0, 0, 0, .65);

    --blue-0: #0a2fa8;
    --blue-1: #1a4dff;
    --blue-2: #3b6aff;
    --blue-3: #0a2fa8;   /* ← textos "azuis" ficam ESCUROS */
    --blue-4: #0a2fa8;
}

/* ---------------------------------------------------------
   2. BASE / BODY
   --------------------------------------------------------- */
[data-tema="claro"] body {
    background: #ffffff;
    color: #1f2937;
}

[data-tema="claro"] body::before {
    background:
        radial-gradient(1200px 800px at 15% -10%, rgba(26, 77, 255, .05), transparent 60%),
        radial-gradient(900px 700px at 105% 15%, rgba(10, 47, 168, .03), transparent 65%),
        radial-gradient(1100px 900px at 50% 120%, rgba(26, 77, 255, .03), transparent 70%);
}

[data-tema="claro"] body::after { opacity: .04; }

/* ---------------------------------------------------------
   3. TIPOGRAFIA FORÇADA
   --------------------------------------------------------- */
[data-tema="claro"] h1,
[data-tema="claro"] h2,
[data-tema="claro"] h3,
[data-tema="claro"] h4,
[data-tema="claro"] h5,
[data-tema="claro"] h6 {
    color: #000000;
}

[data-tema="claro"] p,
[data-tema="claro"] li,
[data-tema="claro"] small,
[data-tema="claro"] dt,
[data-tema="claro"] dd {
    color: #1f2937;
}

[data-tema="claro"] strong,
[data-tema="claro"] b {
    color: #000000;
}

[data-tema="claro"] em,
[data-tema="claro"] i,
[data-tema="claro"] cite,
[data-tema="claro"] blockquote {
    color: #111827;
}

[data-tema="claro"] code,
[data-tema="claro"] kbd,
[data-tema="claro"] samp {
    color: #111827;
}

/* ---------------------------------------------------------
   4. HEADER
   --------------------------------------------------------- */
[data-tema="claro"] .header {
    background: rgba(255, 255, 255, .92);
    border-bottom-color: rgba(0, 0, 0, .08);
}

[data-tema="claro"] .header.scrolled {
    background: rgba(255, 255, 255, .98);
    border-bottom-color: rgba(0, 0, 0, .12);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .05), 0 20px 60px rgba(0, 0, 0, .08);
}

[data-tema="claro"] .logo {
    color: #000000;
}

[data-tema="claro"] .logo span {
    color: #1a4dff;
}

[data-tema="claro"] .nav a {
    color: #1f2937;
}

[data-tema="claro"] .nav a:hover,
[data-tema="claro"] .nav a.active {
    color: #000000;
}

[data-tema="claro"] .search-button,
[data-tema="claro"] .cart-button,
[data-tema="claro"] .menu-button {
    color: #374151;
}

[data-tema="claro"] .search-button:hover,
[data-tema="claro"] .cart-button:hover,
[data-tema="claro"] .menu-button:hover {
    color: #000000;
    background: rgba(26, 77, 255, .08);
    border-color: rgba(26, 77, 255, .3);
}

[data-tema="claro"] #cart-count {
    color: #ffffff;
    background: #1a4dff;
    box-shadow: 0 0 0 2px #ffffff;
}

/* ---------------------------------------------------------
   5. BOTÃO DE CONTA — CORREÇÃO CRÍTICA
   --------------------------------------------------------- */
[data-tema="claro"] .conta-button {
    color: #1f2937 !important;
    background: transparent;
    border-color: rgba(0, 0, 0, .15);
}

[data-tema="claro"] .conta-button svg {
    color: #1f2937;
    stroke: currentColor;
}

[data-tema="claro"] .conta-nome {
    color: #1f2937 !important;
}

[data-tema="claro"] .conta-button:hover {
    color: #000000 !important;
    background: rgba(26, 77, 255, .1);
    border-color: #1a4dff;
}

[data-tema="claro"] .conta-button.logado {
    color: #047857 !important;
    border-color: rgba(4, 120, 87, .5);
    background: rgba(16, 185, 129, .12);
}

[data-tema="claro"] .conta-button.logado .conta-nome {
    color: #047857 !important;
}

[data-tema="claro"] .conta-button.logado::after {
    border-color: #ffffff;
    background: #059669;
    box-shadow: 0 0 8px #059669;
}

/* Dropdown da conta — fundo BRANCO */
[data-tema="claro"] .conta-dropdown {
    background: #ffffff;
    border-color: rgba(0, 0, 0, .12);
    box-shadow:
        0 30px 80px rgba(0, 0, 0, .15),
        0 0 40px rgba(26, 77, 255, .06);
}

[data-tema="claro"] .conta-dropdown-head {
    border-bottom-color: rgba(0, 0, 0, .1);
}

[data-tema="claro"] .conta-dropdown-head strong {
    color: #000000 !important;
}

[data-tema="claro"] .conta-dropdown-head small {
    color: #4b5563 !important;
}

[data-tema="claro"] .conta-dropdown ul li a {
    color: #1f2937 !important;
}

[data-tema="claro"] .conta-dropdown ul li a:hover {
    color: #000000 !important;
    background: #eef2f8;
}

[data-tema="claro"] .conta-dropdown ul li a svg {
    color: #1a4dff;
    stroke: currentColor;
}

[data-tema="claro"] .conta-dropdown-foot {
    border-top-color: rgba(0, 0, 0, .1);
}

[data-tema="claro"] .conta-dropdown-foot button {
    color: #dc2626 !important;
}

[data-tema="claro"] .conta-dropdown-foot button:hover {
    background: rgba(239, 68, 68, .1);
    color: #991b1b !important;
}

/* ---------------------------------------------------------
   6. HERO
   --------------------------------------------------------- */
[data-tema="claro"] .hero {
    background:
        radial-gradient(1000px 800px at 78% 10%, rgba(26, 77, 255, .12), transparent 60%),
        radial-gradient(800px 600px at 8% 92%, rgba(10, 47, 168, .08), transparent 65%),
        linear-gradient(180deg, #ffffff 0%, #f7f9fc 60%, #ffffff 100%);
}

[data-tema="claro"] .hero-small {
    color: #0a2fa8 !important;
    border-bottom-color: rgba(0, 0, 0, .2);
}

[data-tema="claro"] .hero h1 {
    color: #000000 !important;
}

[data-tema="claro"] .hero h1 span {
    color: #1a4dff !important;
}

[data-tema="claro"] .hero-description {
    color: #1f2937 !important;
}

[data-tema="claro"] .hero::after {
    color: #6b7280;
}

[data-tema="claro"] .hero-decoration span {
    -webkit-text-stroke: 1px rgba(0, 0, 0, .35);
}

/* ---------------------------------------------------------
   7. BOTÕES — CORREÇÃO CRÍTICA
   --------------------------------------------------------- */
[data-tema="claro"] .btn-primary {
    color: #ffffff !important;
    background: #1a4dff;
}

[data-tema="claro"] .btn-primary:hover {
    color: #ffffff !important;
    background: #0a2fa8;
}

[data-tema="claro"] .btn-secondary {
    color: #000000 !important;
    border-color: rgba(0, 0, 0, .35);
    background: transparent;
}

[data-tema="claro"] .btn-secondary:hover {
    background: rgba(26, 77, 255, .1);
    border-color: #1a4dff;
    color: #1a4dff !important;
}

[data-tema="claro"] .btn-buy-now {
    color: #ffffff !important;
    background: #1a4dff;
}

[data-tema="claro"] .btn-buy-now:hover {
    background: #0a2fa8;
}

[data-tema="claro"] .btn-buy-now[disabled] {
    background: #cbd5e1;
    color: #64748b !important;
}

/* ---------------------------------------------------------
   8. TICKER / DIVISORES
   --------------------------------------------------------- */
[data-tema="claro"] .ticker {
    background: #f7f9fc;
    border-color: rgba(0, 0, 0, .1);
}

[data-tema="claro"] .ticker::before { background: linear-gradient(90deg, #f7f9fc, transparent); }
[data-tema="claro"] .ticker::after  { background: linear-gradient(270deg, #f7f9fc, transparent); }

[data-tema="claro"] .ticker-track > * {
    color: #1f2937 !important;
}

[data-tema="claro"] .ticker-track > *::after {
    color: #1a4dff;
}

[data-tema="claro"] .divider-marker {
    color: #4b5563;
}

/* ---------------------------------------------------------
   9. SECTION TITLES
   --------------------------------------------------------- */
[data-tema="claro"] .section-title > p,
[data-tema="claro"] .section-kicker {
    color: #0a2fa8 !important;
}

[data-tema="claro"] .section-title h2 {
    color: #000000 !important;
}

[data-tema="claro"] .section-title h2 span {
    color: #1a4dff !important;
}

/* ---------------------------------------------------------
   10. CATEGORIAS
   --------------------------------------------------------- */
[data-tema="claro"] .street-card,
[data-tema="claro"] .access-card,
[data-tema="claro"] .old-card {
    background:
        linear-gradient(180deg, transparent 42%, rgba(255, 255, 255, .96) 100%),
        radial-gradient(600px 550px at 22% 28%, rgba(26, 77, 255, .14), transparent 65%),
        linear-gradient(160deg, #eef2f8 0%, #ffffff 100%);
}

[data-tema="claro"] .category-card {
    border-color: rgba(0, 0, 0, .12);
}

[data-tema="claro"] .category-card::before {
    background-image:
        repeating-linear-gradient(45deg,
            transparent 0, transparent 10px,
            rgba(0, 0, 0, .05) 10px, rgba(0, 0, 0, .05) 11px);
}

[data-tema="claro"] .category-content > span {
    color: #0a2fa8 !important;
}

[data-tema="claro"] .category-content h3 {
    color: #000000 !important;
}

[data-tema="claro"] .category-content p {
    color: #1f2937 !important;
}

[data-tema="claro"] .category-content strong {
    color: #000000 !important;
    border-bottom-color: rgba(0, 0, 0, .3);
}

[data-tema="claro"] .category-card:hover .category-content strong {
    color: #0a2fa8 !important;
    border-bottom-color: #1a4dff;
}

/* ---------------------------------------------------------
   11. LOOKBOOK / QUICK CATEGORIES / PULL-QUOTE
   --------------------------------------------------------- */
[data-tema="claro"] .lookbook-item {
    background: #f7f9fc;
    border-color: rgba(0, 0, 0, .12);
}

[data-tema="claro"] .lookbook-item h4 {
    color: #000000 !important;
}

[data-tema="claro"] .lookbook-item small {
    color: #0a2fa8 !important;
}

[data-tema="claro"] .quick-card {
    border-color: rgba(0, 0, 0, .12);
}

[data-tema="claro"] .quick-card span {
    color: #0a2fa8 !important;
}

[data-tema="claro"] .quick-card h3 {
    color: #000000 !important;
}

[data-tema="claro"] .quick-card:hover h3 {
    color: #1a4dff !important;
}

[data-tema="claro"] .quick-card p {
    color: #1f2937 !important;
}

[data-tema="claro"] .pull-quote blockquote {
    color: #000000 !important;
}

[data-tema="claro"] .pull-quote cite {
    color: #0a2fa8 !important;
}

[data-tema="claro"] .pull-quote::before {
    color: #1a4dff;
    opacity: .35;
}

/* ---------------------------------------------------------
   12. CARDS DE PRODUTO
   --------------------------------------------------------- */
[data-tema="claro"] .product-media {
    background: #eef2f8;
    border-color: rgba(0, 0, 0, .12);
}

[data-tema="claro"] .product-card:hover .product-media {
    border-color: rgba(0, 0, 0, .35);
}

[data-tema="claro"] .product-media::after {
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .7));
}

[data-tema="claro"] .product-badge {
    background: rgba(255, 255, 255, .95);
    color: #000000 !important;
    border-color: rgba(0, 0, 0, .18);
}

[data-tema="claro"] .product-badge--new,
[data-tema="claro"] .product-badge--sale {
    color: #ffffff !important;
    background: #1a4dff;
    border-color: transparent;
}

[data-tema="claro"] .product-badge--out {
    background: rgba(255, 255, 255, .95);
    color: #4b5563 !important;
    border-color: rgba(0, 0, 0, .15);
}

[data-tema="claro"] .product-wish {
    color: #374151 !important;
    background: rgba(255, 255, 255, .95);
    border-color: rgba(0, 0, 0, .15);
}

[data-tema="claro"] .product-wish:hover {
    color: #1a4dff !important;
    background: #ffffff;
    border-color: #1a4dff;
}

[data-tema="claro"] .product-wish.active {
    color: #1a4dff !important;
    background: rgba(26, 77, 255, .1);
    border-color: #1a4dff;
}

[data-tema="claro"] .product-wish.active svg { fill: #1a4dff; }

[data-tema="claro"] .product-quick-add {
    color: #000000 !important;
    background: rgba(255, 255, 255, .95);
    border-color: rgba(0, 0, 0, .25);
}

[data-tema="claro"] .product-quick-add:hover:not(:disabled) {
    background: rgba(26, 77, 255, .1);
    border-color: #1a4dff;
    color: #1a4dff !important;
}

[data-tema="claro"] .product-quick-add svg,
[data-tema="claro"] .product-buy-now svg {
    stroke: currentColor;
}

[data-tema="claro"] .product-buy-now {
    color: #ffffff !important;
    background: #1a4dff;
    border-color: #1a4dff;
}

[data-tema="claro"] .product-buy-now:hover:not(:disabled) {
    background: #0a2fa8;
    border-color: #0a2fa8;
}

[data-tema="claro"] .product-cat {
    color: #0a2fa8 !important;
}

[data-tema="claro"] .product-name {
    color: #000000 !important;
}

[data-tema="claro"] .product-card:hover .product-name {
    color: #1a4dff !important;
}

[data-tema="claro"] .product-desc {
    color: #1f2937 !important;
}

[data-tema="claro"] .product-price strong {
    color: #000000 !important;
}

[data-tema="claro"] .product-price s {
    color: #4b5563 !important;
}

[data-tema="claro"] .product-price em {
    color: #0a2fa8 !important;
}

[data-tema="claro"] .product-color {
    border-color: rgba(0, 0, 0, .25);
}

[data-tema="claro"] .product-size {
    color: #1f2937 !important;
    border-color: rgba(0, 0, 0, .22);
}

[data-tema="claro"] .product-size:hover {
    color: #000000 !important;
    border-color: rgba(0, 0, 0, .5);
}

[data-tema="claro"] .product-size.active {
    color: #ffffff !important;
    background: #1a4dff;
    border-color: #1a4dff;
}

[data-tema="claro"] .product-skeleton {
    background: linear-gradient(100deg, #eef2f8 0%, #e2e8f0 50%, #eef2f8 100%);
    background-size: 200% 100%;
}

/* ---------------------------------------------------------
   13. BREADCRUMB / CATEGORIA
   --------------------------------------------------------- */
[data-tema="claro"] .breadcrumb {
    color: #4b5563 !important;
}

[data-tema="claro"] .breadcrumb a {
    color: #1f2937 !important;
}

[data-tema="claro"] .breadcrumb a:hover {
    color: #1a4dff !important;
}

[data-tema="claro"] .breadcrumb [aria-current] {
    color: #0a2fa8 !important;
}

[data-tema="claro"] .category-label {
    color: #0a2fa8 !important;
    border-bottom-color: rgba(0, 0, 0, .2);
}

[data-tema="claro"] .category-label span {
    color: #1a4dff !important;
}

[data-tema="claro"] .category-hero h1 {
    color: #000000 !important;
}

[data-tema="claro"] .category-hero h1 em {
    color: #1a4dff !important;
}

[data-tema="claro"] .category-hero p {
    color: #1f2937 !important;
}

[data-tema="claro"] .category-hero--street,
[data-tema="claro"] .category-hero--access,
[data-tema="claro"] .category-hero--old {
    background:
        radial-gradient(900px 700px at 78% 15%, rgba(26, 77, 255, .1), transparent 62%),
        radial-gradient(700px 500px at 8% 90%, rgba(10, 47, 168, .06), transparent 65%),
        linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
}

[data-tema="claro"] .category-hero-mark {
    -webkit-text-stroke: 1px rgba(0, 0, 0, .25);
}

[data-tema="claro"] .category-hero-meta {
    border-top-color: rgba(0, 0, 0, .15);
}

[data-tema="claro"] .category-hero-meta span {
    color: #4b5563 !important;
}

[data-tema="claro"] .category-hero-meta strong {
    color: #000000 !important;
}

[data-tema="claro"] .category-result-count {
    color: #4b5563 !important;
}

[data-tema="claro"] .category-sort > span {
    color: #4b5563 !important;
}

[data-tema="claro"] .category-sort select {
    color: #000000 !important;
}

[data-tema="claro"] .category-sort select option {
    background: #ffffff;
    color: #000000;
}

[data-tema="claro"] .category-sort svg {
    color: #4b5563;
}

/* ---------------------------------------------------------
   14. NO PRODUCTS / EMPTY
   --------------------------------------------------------- */
[data-tema="claro"] .no-products-mark {
    color: rgba(0, 0, 0, .2);
}

[data-tema="claro"] .no-products h3 {
    color: #000000 !important;
}

[data-tema="claro"] .no-products h3 em {
    color: #1a4dff !important;
}

[data-tema="claro"] .no-products p {
    color: #1f2937 !important;
}

/* ---------------------------------------------------------
   15. NEWSLETTER / FINAL CTA
   --------------------------------------------------------- */
[data-tema="claro"] .newsletter {
    background:
        radial-gradient(700px 500px at 20% 30%, rgba(26, 77, 255, .1), transparent 65%),
        #f7f9fc;
    border-color: rgba(0, 0, 0, .12);
}

[data-tema="claro"] .newsletter h3 {
    color: #000000 !important;
}

[data-tema="claro"] .newsletter h3 span {
    color: #1a4dff !important;
}

[data-tema="claro"] .newsletter p {
    color: #1f2937 !important;
}

[data-tema="claro"] .newsletter-form {
    border-bottom-color: rgba(0, 0, 0, .25);
}

[data-tema="claro"] .newsletter-form input {
    color: #000000 !important;
}

[data-tema="claro"] .newsletter-form input::placeholder {
    color: #6b7280 !important;
}

[data-tema="claro"] .newsletter-form button {
    color: #000000 !important;
}

[data-tema="claro"] .newsletter-form button:hover {
    color: #1a4dff !important;
}

[data-tema="claro"] .final-cta {
    background: radial-gradient(900px 500px at 50% 50%, rgba(26, 77, 255, .08), transparent 65%);
    border-color: rgba(0, 0, 0, .12);
}

[data-tema="claro"] .final-cta::before {
    -webkit-text-stroke: 1px rgba(0, 0, 0, .2);
}

[data-tema="claro"] .final-cta p {
    color: #0a2fa8 !important;
}

[data-tema="claro"] .final-cta h2 {
    color: #000000 !important;
}

[data-tema="claro"] .final-cta h2 span {
    color: #1a4dff !important;
}

/* ---------------------------------------------------------
   16. FOOTER
   --------------------------------------------------------- */
[data-tema="claro"] .footer {
    background: #f7f9fc;
    border-top-color: rgba(0, 0, 0, .12);
}

[data-tema="claro"] .footer-logo {
    color: #000000 !important;
}

[data-tema="claro"] .footer-logo span {
    color: #1a4dff !important;
}

[data-tema="claro"] .footer-links a {
    color: #1f2937 !important;
}

[data-tema="claro"] .footer-links a:hover {
    color: #1a4dff !important;
}

[data-tema="claro"] .admin-link {
    border-left-color: rgba(0, 0, 0, .15);
}

[data-tema="claro"] .admin-link:hover {
    color: #0a2fa8 !important;
}

[data-tema="claro"] .footer > p {
    color: #4b5563 !important;
    border-top-color: rgba(0, 0, 0, .1);
}

[data-tema="claro"] .footer-contato-link {
    color: #1f2937 !important;
    border-color: rgba(0, 0, 0, .25);
}

[data-tema="claro"] .footer-contato-link:hover {
    color: #1a4dff !important;
    border-color: #1a4dff;
    background: rgba(26, 77, 255, .08);
}

[data-tema="claro"] .footer-contato-link[href*="wa.me"]:hover {
    color: #128C7E !important;
    background: rgba(37, 211, 102, .12);
    border-color: rgba(18, 140, 126, .5);
}

[data-tema="claro"] .footer-contato-link svg {
    stroke: currentColor;
}

/* ---------------------------------------------------------
   17. FORMS / INPUTS (leitura)
   --------------------------------------------------------- */
[data-tema="claro"] input,
[data-tema="claro"] textarea,
[data-tema="claro"] select,
[data-tema="claro"] .field input,
[data-tema="claro"] .field textarea,
[data-tema="claro"] .field select,
[data-tema="claro"] .checkout-step input,
[data-tema="claro"] .checkout-step select,
[data-tema="claro"] .conta-field input,
[data-tema="claro"] .auth-field input {
    background: #ffffff;
    color: #000000 !important;
    border-color: rgba(0, 0, 0, .25);
}

[data-tema="claro"] input::placeholder,
[data-tema="claro"] textarea::placeholder {
    color: #6b7280 !important;
}

[data-tema="claro"] input:focus,
[data-tema="claro"] textarea:focus,
[data-tema="claro"] select:focus {
    border-color: #1a4dff;
    outline: none;
}

[data-tema="claro"] select option {
    background: #ffffff;
    color: #000000;
}

[data-tema="claro"] .field label,
[data-tema="claro"] .checkout-step label {
    color: #0a2fa8 !important;
}

[data-tema="claro"] .field label span,
[data-tema="claro"] .checkout-step label span {
    color: #dc2626 !important;
}

/* ---------------------------------------------------------
   18. CARRINHO
   --------------------------------------------------------- */
[data-tema="claro"] .cart-page {
    background: #ffffff;
    color: #1f2937;
}

[data-tema="claro"] .cart-page .cart-heading h1 {
    color: #000000 !important;
}

[data-tema="claro"] .cart-page .cart-heading h1 em {
    color: #1a4dff !important;
}

[data-tema="claro"] .cart-page .cart-heading p {
    color: #1f2937 !important;
}

[data-tema="claro"] .cart-page .cart-item {
    border-bottom-color: rgba(0, 0, 0, .12);
}

[data-tema="claro"] .cart-page .cart-item-media {
    background: #eef2f8;
    border-color: rgba(0, 0, 0, .12);
}

[data-tema="claro"] .cart-page .cart-item-cat {
    color: #0a2fa8 !important;
}

[data-tema="claro"] .cart-page .cart-item-name {
    color: #000000 !important;
}

[data-tema="claro"] .cart-page .cart-item-price {
    color: #1f2937 !important;
}

[data-tema="claro"] .cart-page .cart-qty {
    border-color: rgba(0, 0, 0, .25);
}

[data-tema="claro"] .cart-page .cart-qty button {
    color: #1f2937 !important;
}

[data-tema="claro"] .cart-page .cart-qty button:hover {
    color: #000000 !important;
    background: rgba(26, 77, 255, .12);
}

[data-tema="claro"] .cart-page .cart-qty span {
    color: #000000 !important;
}

[data-tema="claro"] .cart-page .cart-item-remove {
    color: #4b5563 !important;
}

[data-tema="claro"] .cart-page .cart-item-remove:hover {
    color: #dc2626 !important;
}

[data-tema="claro"] .cart-page .cart-summary {
    background: #f7f9fc;
    border-color: rgba(0, 0, 0, .12);
}

[data-tema="claro"] .cart-page .cart-summary-kicker {
    color: #0a2fa8 !important;
}

[data-tema="claro"] .cart-page .cart-summary-title {
    color: #000000 !important;
    border-bottom-color: rgba(0, 0, 0, .12);
}

[data-tema="claro"] .cart-page .cart-summary-title em {
    color: #1a4dff !important;
}

[data-tema="claro"] .cart-page .cart-summary-row > span {
    color: #1f2937 !important;
}

[data-tema="claro"] .cart-page .cart-summary-row strong {
    color: #000000 !important;
}

[data-tema="claro"] .cart-page .cart-summary-row--total strong {
    color: #000000 !important;
}

[data-tema="claro"] .cart-page .cart-summary-divider {
    background: rgba(0, 0, 0, .12);
}

[data-tema="claro"] .cart-page .cart-summary-info {
    color: #4b5563 !important;
}

[data-tema="claro"] .cart-page .checkout-button {
    color: #ffffff !important;
    background: #1a4dff;
}

[data-tema="claro"] .cart-page .checkout-button:hover {
    background: #0a2fa8;
}

[data-tema="claro"] .cart-page .continue-shopping {
    color: #1f2937 !important;
}

[data-tema="claro"] .cart-page .continue-shopping:hover {
    color: #1a4dff !important;
}

[data-tema="claro"] .cart-page .cart-empty-mark {
    color: rgba(0, 0, 0, .2);
}

[data-tema="claro"] .cart-page .cart-empty h2 {
    color: #000000 !important;
}

[data-tema="claro"] .cart-page .cart-empty h2 em {
    color: #1a4dff !important;
}

[data-tema="claro"] .cart-page .cart-empty p {
    color: #1f2937 !important;
}

[data-tema="claro"] .cart-page .pull-quote blockquote {
    color: #000000 !important;
}

[data-tema="claro"] .cart-page .pull-quote cite {
    color: #0a2fa8 !important;
}

/* ---------------------------------------------------------
   19. RESUMO CHECKOUT (fora de cart-page)
   --------------------------------------------------------- */
[data-tema="claro"] .cart-summary-kicker {
    color: #0a2fa8 !important;
}

[data-tema="claro"] .cart-summary-title {
    color: #000000 !important;
}

[data-tema="claro"] .cart-summary-title em {
    color: #1a4dff !important;
}

/* ---------------------------------------------------------
   20. CHECKOUT
   --------------------------------------------------------- */
[data-tema="claro"] .search-main,
[data-tema="claro"] .checkout-main {
    color: #1f2937;
}

[data-tema="claro"] .search-head h1,
[data-tema="claro"] .checkout-head h1 {
    color: #000000 !important;
}

[data-tema="claro"] .search-head h1 em,
[data-tema="claro"] .checkout-head h1 em {
    color: #1a4dff !important;
}

[data-tema="claro"] .search-head p,
[data-tema="claro"] .checkout-head p {
    color: #1f2937 !important;
}

[data-tema="claro"] .checkout-step {
    background: #f7f9fc;
    border-color: rgba(0, 0, 0, .12);
}

[data-tema="claro"] .step-head {
    border-bottom-color: rgba(0, 0, 0, .1);
}

[data-tema="claro"] .step-num {
    color: #0a2fa8 !important;
    border-color: rgba(0, 0, 0, .25);
}

[data-tema="claro"] .step-head h2 {
    color: #000000 !important;
}

[data-tema="claro"] .step-head p {
    color: #1f2937 !important;
}

[data-tema="claro"] .shipping-option {
    background: #ffffff;
    border-color: rgba(0, 0, 0, .15);
}

[data-tema="claro"] .shipping-option:hover {
    border-color: rgba(0, 0, 0, .3);
}

[data-tema="claro"] .shipping-option:has(input:checked) {
    border-color: #1a4dff;
    background: rgba(26, 77, 255, .05);
}

[data-tema="claro"] .shipping-option input[type="radio"] {
    border-color: rgba(0, 0, 0, .35);
}

[data-tema="claro"] .shipping-info strong {
    color: #000000 !important;
}

[data-tema="claro"] .shipping-info small {
    color: #1f2937 !important;
}

[data-tema="claro"] .shipping-price {
    color: #0a2fa8 !important;
}

[data-tema="claro"] .payment-method {
    background: #ffffff;
    border-color: rgba(0, 0, 0, .15);
}

[data-tema="claro"] .payment-method:hover {
    border-color: rgba(0, 0, 0, .3);
}

[data-tema="claro"] .payment-method:has(input:checked) {
    border-color: #1a4dff;
    background: rgba(26, 77, 255, .05);
}

[data-tema="claro"] .payment-method input[type="radio"] {
    border-color: rgba(0, 0, 0, .35);
}

[data-tema="claro"] .payment-method strong {
    color: #000000 !important;
}

[data-tema="claro"] .payment-method small {
    color: #1f2937 !important;
}

[data-tema="claro"] .payment-detail {
    background: #eef2f8;
    border-color: rgba(0, 0, 0, .25);
}

[data-tema="claro"] .payment-note {
    color: #1f2937 !important;
}

[data-tema="claro"] .btn-finish-mobile {
    color: #ffffff !important;
    background: #1a4dff;
}

[data-tema="claro"] .btn-finish-mobile:hover {
    background: #0a2fa8;
}

[data-tema="claro"] .summary-content {
    background: #f7f9fc;
    border-color: rgba(0, 0, 0, .12);
}

[data-tema="claro"] .summary-items {
    border-bottom-color: rgba(0, 0, 0, .12);
}

[data-tema="claro"] .summary-item-media {
    background: #eef2f8;
    border-color: rgba(0, 0, 0, .12);
}

[data-tema="claro"] .summary-item-info strong {
    color: #000000 !important;
}

[data-tema="claro"] .summary-item-info small {
    color: #4b5563 !important;
}

[data-tema="claro"] .summary-item-price {
    color: #000000 !important;
}

[data-tema="claro"] .summary-row span {
    color: #1f2937 !important;
}

[data-tema="claro"] .summary-row strong {
    color: #000000 !important;
}

[data-tema="claro"] .summary-row--total strong {
    color: #000000 !important;
}

[data-tema="claro"] .summary-divider {
    background: rgba(0, 0, 0, .12);
}

[data-tema="claro"] .summary-info {
    color: #4b5563 !important;
}

/* ---------------------------------------------------------
   21. SUCESSO
   --------------------------------------------------------- */
[data-tema="claro"] .checkout-success {
    background: rgba(0, 0, 0, .45);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

[data-tema="claro"] .success-box {
    background: #ffffff;
    border-color: rgba(0, 0, 0, .15);
}

[data-tema="claro"] .success-box h2 {
    color: #000000 !important;
}

[data-tema="claro"] .success-box p {
    color: #1f2937 !important;
}

[data-tema="claro"] .success-code {
    background: #f7f9fc;
    border-color: rgba(0, 0, 0, .25);
}

[data-tema="claro"] .success-code span {
    color: #4b5563 !important;
}

[data-tema="claro"] .success-code strong {
    color: #1a4dff !important;
}

/* ---------------------------------------------------------
   22. PIX
   --------------------------------------------------------- */
[data-tema="claro"] .pix-backdrop {
    background: rgba(0, 0, 0, .5);
}

[data-tema="claro"] .pix-dialog {
    background: #ffffff;
    border-color: rgba(0, 0, 0, .15);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .2);
}

[data-tema="claro"] .pix-close {
    color: #1f2937 !important;
    border-color: rgba(0, 0, 0, .15);
}

[data-tema="claro"] .pix-close:hover {
    color: #000000 !important;
    border-color: #1a4dff;
}

[data-tema="claro"] .pix-head {
    border-bottom-color: rgba(0, 0, 0, .12);
}

[data-tema="claro"] .pix-kicker {
    color: #0a2fa8 !important;
}

[data-tema="claro"] .pix-head h2 {
    color: #000000 !important;
}

[data-tema="claro"] .pix-head h2 em {
    color: #1a4dff !important;
}

[data-tema="claro"] .pix-qr-wrap {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, .15);
}

[data-tema="claro"] .pix-qr-logo {
    border-color: #ffffff;
}

[data-tema="claro"] .pix-valor-row > span,
[data-tema="claro"] .pix-countdown-row > span {
    color: #4b5563 !important;
}

[data-tema="claro"] .pix-valor-row strong {
    color: #000000 !important;
}

[data-tema="claro"] .pix-countdown-row strong {
    color: #1a4dff !important;
}

[data-tema="claro"] .pix-aviso {
    color: #1f2937 !important;
}

[data-tema="claro"] .pix-codigo-wrap {
    background: #f7f9fc;
    border-color: rgba(0, 0, 0, .25);
}

[data-tema="claro"] .pix-codigo-wrap label {
    color: #0a2fa8 !important;
}

[data-tema="claro"] .pix-codigo-wrap code {
    color: #1f2937 !important;
}

[data-tema="claro"] .pix-copiar {
    color: #000000 !important;
    border-color: rgba(0, 0, 0, .3);
}

[data-tema="claro"] .pix-copiar:hover {
    border-color: #1a4dff;
    background: rgba(26, 77, 255, .08);
    color: #1a4dff !important;
}

[data-tema="claro"] .pix-copiar.copied {
    border-color: #10b981;
    color: #059669 !important;
    background: rgba(16, 185, 129, .1);
}

[data-tema="claro"] .pix-foot {
    border-top-color: rgba(0, 0, 0, .12);
}

[data-tema="claro"] .pix-confirmar {
    color: #ffffff !important;
    background: #1a4dff;
}

[data-tema="claro"] .pix-confirmar:hover {
    background: #0a2fa8;
}

[data-tema="claro"] .pix-confirmar:disabled {
    background: #cbd5e1;
    color: #64748b !important;
}

[data-tema="claro"] .pix-cancelar {
    color: #1f2937 !important;
    border-color: rgba(0, 0, 0, .2);
}

[data-tema="claro"] .pix-cancelar:hover {
    color: #000000 !important;
    border-color: rgba(0, 0, 0, .4);
}

/* ---------------------------------------------------------
   23. BUSCA OVERLAY
   --------------------------------------------------------- */
[data-tema="claro"] .search-overlay {
    background: rgba(255, 255, 255, .97);
}

[data-tema="claro"] .search-overlay::before {
    -webkit-text-stroke: 1px rgba(0, 0, 0, .22);
}

[data-tema="claro"] .search-box {
    border-top-color: rgba(0, 0, 0, .15);
    border-bottom-color: rgba(0, 0, 0, .15);
}

[data-tema="claro"] .search-box p {
    color: #1f2937 !important;
}

[data-tema="claro"] .search-box input {
    color: #000000 !important;
    border-bottom-color: rgba(0, 0, 0, .3);
}

[data-tema="claro"] .search-box input::placeholder {
    color: #6b7280 !important;
}

[data-tema="claro"] .close-search {
    color: #1f2937 !important;
    border-color: rgba(0, 0, 0, .2);
}

[data-tema="claro"] .close-search:hover {
    color: #000000 !important;
    border-color: #1a4dff;
    background: rgba(26, 77, 255, .08);
}

[data-tema="claro"] .search-box > button:last-child {
    color: #1f2937 !important;
}

[data-tema="claro"] .search-box > button:last-child:hover {
    color: #000000 !important;
    border-bottom-color: #1a4dff;
}

/* ---------------------------------------------------------
   24. TOAST / ADMIN
   --------------------------------------------------------- */
[data-tema="claro"] .toast {
    background: #ffffff;
    border-color: rgba(0, 0, 0, .15);
    color: #000000 !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .15);
}

[data-tema="claro"] .toast svg {
    stroke: currentColor;
}

[data-tema="claro"] .admin-head h1 {
    color: #000000 !important;
}

[data-tema="claro"] .admin-head p {
    color: #1f2937 !important;
}

[data-tema="claro"] .admin-form {
    background: #f7f9fc;
    border-color: rgba(0, 0, 0, .12);
}

[data-tema="claro"] .admin-form button {
    color: #ffffff !important;
    background: #1a4dff;
}

[data-tema="claro"] .admin-form button:hover {
    background: #0a2fa8;
}

[data-tema="claro"] .admin-item {
    background: #f7f9fc;
    border-color: rgba(0, 0, 0, .12);
}

[data-tema="claro"] .admin-item h4 {
    color: #000000 !important;
}

[data-tema="claro"] .admin-item small {
    color: #4b5563 !important;
}

[data-tema="claro"] .admin-item button {
    color: #1f2937 !important;
    border-color: rgba(0, 0, 0, .2);
}

[data-tema="claro"] .admin-item button:hover {
    color: #dc2626 !important;
    border-color: #dc2626;
}

[data-tema="claro"] .admin-msg.ok {
    background: rgba(26, 77, 255, .1);
    border-color: #1a4dff;
    color: #0a2fa8 !important;
}

/* ---------------------------------------------------------
   25. CURSOR HALO / MENU MOBILE
   --------------------------------------------------------- */
[data-tema="claro"] .cursor-halo {
    background: radial-gradient(circle, rgba(26, 77, 255, .08), transparent 65%);
}

[data-tema="claro"] .nav-backdrop {
    background: rgba(0, 0, 0, .35);
}

[data-tema="claro"] .nav.open {
    background: #ffffff;
    border-left-color: rgba(0, 0, 0, .15);
    box-shadow: -50px 0 120px rgba(0, 0, 0, .15);
}

[data-tema="claro"] .nav a {
    color: #000000 !important;
    border-bottom-color: rgba(0, 0, 0, .08);
}

[data-tema="claro"] .nav a:hover,
[data-tema="claro"] .nav a.active {
    color: #1a4dff !important;
}

[data-tema="claro"] .nav .nav-close {
    color: #1f2937;
    border-color: rgba(0, 0, 0, .2);
}

/* ---------------------------------------------------------
   26. AUTH / LOGIN (se houver)
   --------------------------------------------------------- */
[data-tema="claro"] .auth-visual {
    background:
        radial-gradient(700px 500px at 30% 20%, rgba(26, 77, 255, .08), transparent 65%),
        linear-gradient(160deg, #f7f9fc 0%, #ffffff 100%);
    border-color: rgba(0, 0, 0, .12);
}

[data-tema="claro"] .auth-title {
    color: #000000 !important;
}

[data-tema="claro"] .auth-sub {
    color: #1f2937 !important;
}

[data-tema="claro"] .auth-benefits li {
    color: #1f2937 !important;
}

[data-tema="claro"] .auth-tabs {
    background: #f7f9fc;
    border-color: rgba(0, 0, 0, .12);
}

[data-tema="claro"] .auth-tab {
    color: #4b5563 !important;
}

[data-tema="claro"] .auth-tab:hover {
    color: #000000 !important;
    background: #eef2f8;
}

/* ---------------------------------------------------------
   27. BOTÃO DE TEMA
   --------------------------------------------------------- */
.theme-button {
    position: relative;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: var(--paper-2);
    background: none;
    border: 1px solid transparent;
    border-radius: 50%;
    cursor: pointer;
    transition: all .35s cubic-bezier(.22, 1, .36, 1);
}

.theme-button:hover {
    color: var(--paper-0);
    background: rgba(127, 176, 255, .06);
    border-color: var(--line-2);
    transform: translateY(-2px);
}

[data-tema="claro"] .theme-button {
    color: #1f2937;
}

[data-tema="claro"] .theme-button:hover {
    color: #000000;
    background: rgba(26, 77, 255, .1);
    border-color: rgba(26, 77, 255, .3);
}

.theme-button svg {
    width: 18px;
    height: 18px;
    transition: transform .4s cubic-bezier(.34, 1.56, .64, 1);
    stroke: currentColor;
}

.theme-button:hover svg { transform: rotate(20deg); }

.theme-button .icone-sol { display: block; }
.theme-button .icone-lua { display: none; }

[data-tema="claro"] .theme-button .icone-sol { display: none; }
[data-tema="claro"] .theme-button .icone-lua { display: block; }

@media (max-width: 720px) {
    .theme-button { width: 38px; height: 38px; }
    .theme-button svg { width: 16px; height: 16px; }
}

/* ---------------------------------------------------------
   28. SCROLLBAR + TRANSIÇÕES
   --------------------------------------------------------- */
[data-tema="claro"] ::-webkit-scrollbar-track {
    background: #f7f9fc;
    border-left-color: rgba(0, 0, 0, .1);
}

[data-tema="claro"] ::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .25);
    border-color: #f7f9fc;
}

[data-tema="claro"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, .4);
}

[data-tema] body,
[data-tema] .header,
[data-tema] .footer,
[data-tema] .product-card,
[data-tema] .cart-item,
[data-tema] .pedido-card,
[data-tema] .conta-button,
[data-tema] .btn-primary,
[data-tema] .btn-secondary {
    transition:
        background-color .35s ease,
        color .35s ease,
        border-color .35s ease;
}

/* =========================================================
   FIM — SUPER FIX TEMA CLARO v3
   ========================================================= */

   /* =========================================================
   🔥 TEMA CLARO — v4 NUCLEAR (LEGIBILIDADE GARANTIDA)
   Força TODO texto a ser visível. Cola no FINAL do CSS.
   ========================================================= */

/* ---------------------------------------------------------
   BASE: TUDO ESCURO POR PADRÃO
   --------------------------------------------------------- */
[data-tema="claro"],
[data-tema="claro"] body,
[data-tema="claro"] main,
[data-tema="claro"] section,
[data-tema="claro"] article,
[data-tema="claro"] aside,
[data-tema="claro"] header,
[data-tema="claro"] footer,
[data-tema="claro"] nav,
[data-tema="claro"] div,
[data-tema="claro"] span,
[data-tema="claro"] p,
[data-tema="claro"] a,
[data-tema="claro"] li,
[data-tema="claro"] ul,
[data-tema="claro"] ol,
[data-tema="claro"] small,
[data-tema="claro"] label,
[data-tema="claro"] strong,
[data-tema="claro"] b,
[data-tema="claro"] em,
[data-tema="claro"] i,
[data-tema="claro"] cite,
[data-tema="claro"] blockquote,
[data-tema="claro"] figcaption,
[data-tema="claro"] dt,
[data-tema="claro"] dd,
[data-tema="claro"] code,
[data-tema="claro"] kbd,
[data-tema="claro"] samp,
[data-tema="claro"] pre,
[data-tema="claro"] h1,
[data-tema="claro"] h2,
[data-tema="claro"] h3,
[data-tema="claro"] h4,
[data-tema="claro"] h5,
[data-tema="claro"] h6,
[data-tema="claro"] th,
[data-tema="claro"] td,
[data-tema="claro"] legend,
[data-tema="claro"] caption {
    color: #111827;
}

/* Títulos sempre PRETO */
[data-tema="claro"] h1,
[data-tema="claro"] h2,
[data-tema="claro"] h3,
[data-tema="claro"] h4,
[data-tema="claro"] h5,
[data-tema="claro"] h6,
[data-tema="claro"] strong,
[data-tema="claro"] b,
[data-tema="claro"] legend {
    color: #000000 !important;
}

/* Parágrafos e corpo */
[data-tema="claro"] p,
[data-tema="claro"] li,
[data-tema="claro"] dd,
[data-tema="claro"] small,
[data-tema="claro"] figcaption,
[data-tema="claro"] caption {
    color: #1f2937 !important;
}

/* ---------------------------------------------------------
   SVGs e ícones — SEMPRE herdam cor do texto
   --------------------------------------------------------- */
[data-tema="claro"] svg {
    color: inherit;
    fill: currentColor;
    stroke: currentColor;
}

[data-tema="claro"] svg[fill="none"],
[data-tema="claro"] svg [fill="none"] {
    fill: none;
}

[data-tema="claro"] svg[stroke="none"],
[data-tema="claro"] svg [stroke="none"] {
    stroke: none;
}

/* ---------------------------------------------------------
   BOTÕES COM FUNDO COLORIDO → TEXTO BRANCO
   (whitelist: onde o fundo é escuro/azul)
   --------------------------------------------------------- */
[data-tema="claro"] .btn-primary,
[data-tema="claro"] .btn-primary *,
[data-tema="claro"] .btn-buy-now,
[data-tema="claro"] .btn-buy-now *,
[data-tema="claro"] .product-buy-now,
[data-tema="claro"] .product-buy-now *,
[data-tema="claro"] .checkout-button,
[data-tema="claro"] .checkout-button *,
[data-tema="claro"] .pix-confirmar,
[data-tema="claro"] .pix-confirmar *,
[data-tema="claro"] .btn-finish-mobile,
[data-tema="claro"] .btn-finish-mobile *,
[data-tema="claro"] .admin-form button,
[data-tema="claro"] .admin-form button *,
[data-tema="claro"] .success-box .btn-primary,
[data-tema="claro"] .success-box .btn-primary *,
[data-tema="claro"] .cart-page .checkout-button,
[data-tema="claro"] .cart-page .checkout-button *,
[data-tema="claro"] .cart-page .cart-empty-actions .btn-primary,
[data-tema="claro"] .cart-page .cart-empty-actions .btn-primary *,
[data-tema="claro"] .product-size.active,
[data-tema="claro"] .product-size.active *,
[data-tema="claro"] .product-badge--new,
[data-tema="claro"] .product-badge--sale,
[data-tema="claro"] #cart-count,
[data-tema="claro"] .conta-avatar,
[data-tema="claro"] .summary-item-qty,
[data-tema="claro"] .pix-qr-logo span {
    color: #ffffff !important;
}

/* ---------------------------------------------------------
   INPUTS — texto preto garantido
   --------------------------------------------------------- */
[data-tema="claro"] input,
[data-tema="claro"] textarea,
[data-tema="claro"] select,
[data-tema="claro"] option,
[data-tema="claro"] optgroup {
    color: #000000 !important;
    background-color: #ffffff;
    border-color: rgba(0, 0, 0, .25);
}

[data-tema="claro"] input::placeholder,
[data-tema="claro"] textarea::placeholder {
    color: #6b7280 !important;
    opacity: 1;
}

[data-tema="claro"] input:focus,
[data-tema="claro"] textarea:focus,
[data-tema="claro"] select:focus {
    color: #000000 !important;
    border-color: #1a4dff !important;
    outline: none;
}

/* ---------------------------------------------------------
   HEADER
   --------------------------------------------------------- */
[data-tema="claro"] .header,
[data-tema="claro"] .header * {
    color: #1f2937;
}

[data-tema="claro"] .logo,
[data-tema="claro"] .logo span {
    color: #000000 !important;
}

[data-tema="claro"] .logo span {
    color: #1a4dff !important;
}

[data-tema="claro"] .nav a {
    color: #1f2937 !important;
}

[data-tema="claro"] .nav a:hover,
[data-tema="claro"] .nav a.active {
    color: #1a4dff !important;
}

[data-tema="claro"] .search-button,
[data-tema="claro"] .cart-button,
[data-tema="claro"] .menu-button,
[data-tema="claro"] .theme-button {
    color: #1f2937 !important;
}

[data-tema="claro"] .search-button:hover,
[data-tema="claro"] .cart-button:hover,
[data-tema="claro"] .menu-button:hover,
[data-tema="claro"] .theme-button:hover {
    color: #000000 !important;
    background: rgba(26, 77, 255, .1) !important;
    border-color: rgba(26, 77, 255, .3) !important;
}

[data-tema="claro"] #cart-count {
    color: #ffffff !important;
    background: #1a4dff !important;
    box-shadow: 0 0 0 2px #ffffff !important;
}

/* ---------------------------------------------------------
   CONTA — botão + dropdown
   --------------------------------------------------------- */
[data-tema="claro"] .conta-button,
[data-tema="claro"] .conta-button *,
[data-tema="claro"] .conta-button svg {
    color: #1f2937 !important;
    stroke: currentColor !important;
}

[data-tema="claro"] .conta-button:hover,
[data-tema="claro"] .conta-button:hover * {
    color: #000000 !important;
}

[data-tema="claro"] .conta-nome {
    color: #1f2937 !important;
}

[data-tema="claro"] .conta-button.logado,
[data-tema="claro"] .conta-button.logado *,
[data-tema="claro"] .conta-button.logado .conta-nome {
    color: #047857 !important;
}

[data-tema="claro"] .conta-dropdown {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, .15) !important;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .15) !important;
}

[data-tema="claro"] .conta-dropdown-head strong,
[data-tema="claro"] .conta-dropdown-head strong * {
    color: #000000 !important;
}

[data-tema="claro"] .conta-dropdown-head small,
[data-tema="claro"] .conta-dropdown-head small * {
    color: #4b5563 !important;
}

[data-tema="claro"] .conta-dropdown ul li a,
[data-tema="claro"] .conta-dropdown ul li a * {
    color: #1f2937 !important;
}

[data-tema="claro"] .conta-dropdown ul li a:hover,
[data-tema="claro"] .conta-dropdown ul li a:hover * {
    color: #000000 !important;
    background: #eef2f8 !important;
}

[data-tema="claro"] .conta-dropdown ul li a svg {
    color: #1a4dff !important;
    stroke: currentColor !important;
}

[data-tema="claro"] .conta-dropdown-foot button,
[data-tema="claro"] .conta-dropdown-foot button * {
    color: #dc2626 !important;
}

[data-tema="claro"] .conta-dropdown-foot button:hover,
[data-tema="claro"] .conta-dropdown-foot button:hover * {
    color: #991b1b !important;
    background: rgba(239, 68, 68, .1) !important;
}

/* ---------------------------------------------------------
   HERO / TICKER / DIVISORES
   --------------------------------------------------------- */
[data-tema="claro"] .hero,
[data-tema="claro"] .hero * {
    color: #1f2937;
}

[data-tema="claro"] .hero h1,
[data-tema="claro"] .hero h1 span {
    color: #000000 !important;
}

[data-tema="claro"] .hero h1 span {
    color: #1a4dff !important;
}

[data-tema="claro"] .hero-small {
    color: #0a2fa8 !important;
    border-bottom-color: rgba(0, 0, 0, .2) !important;
}

[data-tema="claro"] .hero-description {
    color: #1f2937 !important;
}

[data-tema="claro"] .hero::after {
    color: #6b7280 !important;
}

[data-tema="claro"] .ticker,
[data-tema="claro"] .ticker * {
    color: #1f2937 !important;
}

[data-tema="claro"] .ticker-track > * {
    color: #1f2937 !important;
}

[data-tema="claro"] .divider-marker,
[data-tema="claro"] .divider-marker * {
    color: #4b5563 !important;
}

[data-tema="claro"] .skip-link {
    color: #ffffff !important;
    background: #1a4dff !important;
}

/* ---------------------------------------------------------
   SECTION TITLES
   --------------------------------------------------------- */
[data-tema="claro"] .section-title > p,
[data-tema="claro"] .section-kicker {
    color: #0a2fa8 !important;
}

[data-tema="claro"] .section-title h2 {
    color: #000000 !important;
}

[data-tema="claro"] .section-title h2 span {
    color: #1a4dff !important;
}

/* ---------------------------------------------------------
   CATEGORIAS / LOOKBOOK / QUICK / PULL-QUOTE
   --------------------------------------------------------- */
[data-tema="claro"] .category-content > span,
[data-tema="claro"] .lookbook-item small,
[data-tema="claro"] .quick-card span,
[data-tema="claro"] .pull-quote cite {
    color: #0a2fa8 !important;
}

[data-tema="claro"] .category-content h3,
[data-tema="claro"] .category-content strong,
[data-tema="claro"] .lookbook-item h4,
[data-tema="claro"] .quick-card h3,
[data-tema="claro"] .pull-quote blockquote {
    color: #000000 !important;
}

[data-tema="claro"] .category-content p,
[data-tema="claro"] .quick-card p {
    color: #1f2937 !important;
}

[data-tema="claro"] .quick-card:hover h3,
[data-tema="claro"] .category-card:hover .category-content strong {
    color: #1a4dff !important;
}

/* ---------------------------------------------------------
   PRODUTOS (grid) — REforço máximo
   --------------------------------------------------------- */
[data-tema="claro"] .product-info,
[data-tema="claro"] .product-info * {
    color: #1f2937;
}

[data-tema="claro"] .product-cat {
    color: #0a2fa8 !important;
}

[data-tema="claro"] .product-name,
[data-tema="claro"] .product-name a {
    color: #000000 !important;
}

[data-tema="claro"] .product-card:hover .product-name,
[data-tema="claro"] .product-card:hover .product-name a {
    color: #1a4dff !important;
}

[data-tema="claro"] .product-desc {
    color: #1f2937 !important;
}

[data-tema="claro"] .product-price strong {
    color: #000000 !important;
}

[data-tema="claro"] .product-price s {
    color: #4b5563 !important;
}

[data-tema="claro"] .product-price em {
    color: #0a2fa8 !important;
}

[data-tema="claro"] .product-size {
    color: #1f2937 !important;
    border-color: rgba(0, 0, 0, .25) !important;
}

[data-tema="claro"] .product-size:hover {
    color: #000000 !important;
    border-color: rgba(0, 0, 0, .5) !important;
}

[data-tema="claro"] .product-quick-add,
[data-tema="claro"] .product-quick-add * {
    color: #000000 !important;
}

[data-tema="claro"] .product-quick-add:hover:not(:disabled),
[data-tema="claro"] .product-quick-add:hover:not(:disabled) * {
    color: #1a4dff !important;
}

[data-tema="claro"] .product-wish {
    color: #374151 !important;
}

[data-tema="claro"] .product-wish:hover,
[data-tema="claro"] .product-wish.active {
    color: #1a4dff !important;
}

/* ---------------------------------------------------------
   BREADCRUMB / CATEGORIA
   --------------------------------------------------------- */
[data-tema="claro"] .breadcrumb,
[data-tema="claro"] .breadcrumb * {
    color: #4b5563;
}

[data-tema="claro"] .breadcrumb a {
    color: #1f2937 !important;
}

[data-tema="claro"] .breadcrumb a:hover {
    color: #1a4dff !important;
}

[data-tema="claro"] .breadcrumb [aria-current],
[data-tema="claro"] .breadcrumb span[aria-current] {
    color: #0a2fa8 !important;
}

[data-tema="claro"] .category-label,
[data-tema="claro"] .category-label span {
    color: #0a2fa8 !important;
}

[data-tema="claro"] .category-hero h1,
[data-tema="claro"] .category-hero h1 em {
    color: #000000 !important;
}

[data-tema="claro"] .category-hero h1 em {
    color: #1a4dff !important;
}

[data-tema="claro"] .category-hero p {
    color: #1f2937 !important;
}

[data-tema="claro"] .category-hero-meta span {
    color: #4b5563 !important;
}

[data-tema="claro"] .category-hero-meta strong {
    color: #000000 !important;
}

[data-tema="claro"] .category-result-count,
[data-tema="claro"] .category-sort > span {
    color: #4b5563 !important;
}

[data-tema="claro"] .category-sort select {
    color: #000000 !important;
}

[data-tema="claro"] .category-sort svg {
    color: #4b5563 !important;
}

/* ---------------------------------------------------------
   EMPTY STATE / NO PRODUCTS
   --------------------------------------------------------- */
[data-tema="claro"] .no-products h3 {
    color: #000000 !important;
}

[data-tema="claro"] .no-products h3 em {
    color: #1a4dff !important;
}

[data-tema="claro"] .no-products p {
    color: #1f2937 !important;
}

[data-tema="claro"] .no-products-mark {
    color: rgba(0, 0, 0, .25) !important;
}

/* ---------------------------------------------------------
   NEWSLETTER / CTA FINAL
   --------------------------------------------------------- */
[data-tema="claro"] .newsletter h3,
[data-tema="claro"] .newsletter h3 span {
    color: #000000 !important;
}

[data-tema="claro"] .newsletter h3 span {
    color: #1a4dff !important;
}

[data-tema="claro"] .newsletter p {
    color: #1f2937 !important;
}

[data-tema="claro"] .newsletter-form input {
    color: #000000 !important;
}

[data-tema="claro"] .newsletter-form input::placeholder {
    color: #6b7280 !important;
}

[data-tema="claro"] .newsletter-form button {
    color: #000000 !important;
}

[data-tema="claro"] .newsletter-form button:hover {
    color: #1a4dff !important;
}

[data-tema="claro"] .final-cta p {
    color: #0a2fa8 !important;
}

[data-tema="claro"] .final-cta h2,
[data-tema="claro"] .final-cta h2 span {
    color: #000000 !important;
}

[data-tema="claro"] .final-cta h2 span {
    color: #1a4dff !important;
}

/* ---------------------------------------------------------
   FOOTER
   --------------------------------------------------------- */
[data-tema="claro"] .footer,
[data-tema="claro"] .footer * {
    color: #1f2937;
}

[data-tema="claro"] .footer-logo,
[data-tema="claro"] .footer-logo span {
    color: #000000 !important;
}

[data-tema="claro"] .footer-logo span {
    color: #1a4dff !important;
}

[data-tema="claro"] .footer-links a {
    color: #1f2937 !important;
}

[data-tema="claro"] .footer-links a:hover {
    color: #1a4dff !important;
}

[data-tema="claro"] .footer > p {
    color: #4b5563 !important;
    border-top-color: rgba(0, 0, 0, .12) !important;
}

[data-tema="claro"] .admin-link {
    color: #1f2937 !important;
    border-left-color: rgba(0, 0, 0, .15) !important;
}

[data-tema="claro"] .admin-link:hover {
    color: #0a2fa8 !important;
}

[data-tema="claro"] .footer-contato-link,
[data-tema="claro"] .footer-contato-link * {
    color: #1f2937 !important;
    border-color: rgba(0, 0, 0, .25);
}

[data-tema="claro"] .footer-contato-link:hover,
[data-tema="claro"] .footer-contato-link:hover * {
    color: #1a4dff !important;
    border-color: #1a4dff;
    background: rgba(26, 77, 255, .08);
}

[data-tema="claro"] .footer-contato-link[href*="wa.me"]:hover,
[data-tema="claro"] .footer-contato-link[href*="wa.me"]:hover * {
    color: #128C7E !important;
    border-color: rgba(18, 140, 126, .5);
    background: rgba(37, 211, 102, .12);
}

/* ---------------------------------------------------------
   CARRINHO — tudo forçado
   --------------------------------------------------------- */
[data-tema="claro"] .cart-page,
[data-tema="claro"] .cart-page * {
    color: #1f2937;
}

[data-tema="claro"] .cart-page .cart-heading h1,
[data-tema="claro"] .cart-page .cart-heading h1 em {
    color: #000000 !important;
}

[data-tema="claro"] .cart-page .cart-heading h1 em {
    color: #1a4dff !important;
}

[data-tema="claro"] .cart-page .cart-heading p {
    color: #1f2937 !important;
}

[data-tema="claro"] .cart-page .cart-heading .category-label,
[data-tema="claro"] .cart-page .cart-heading .category-label span {
    color: #0a2fa8 !important;
}

[data-tema="claro"] .cart-page .cart-item-cat {
    color: #0a2fa8 !important;
}

[data-tema="claro"] .cart-page .cart-item-name {
    color: #000000 !important;
}

[data-tema="claro"] .cart-page .cart-item-price {
    color: #1f2937 !important;
}

[data-tema="claro"] .cart-page .cart-qty span {
    color: #000000 !important;
}

[data-tema="claro"] .cart-page .cart-qty button {
    color: #1f2937 !important;
}

[data-tema="claro"] .cart-page .cart-qty button:hover {
    color: #000000 !important;
    background: rgba(26, 77, 255, .15) !important;
}

[data-tema="claro"] .cart-page .cart-item-remove {
    color: #4b5563 !important;
}

[data-tema="claro"] .cart-page .cart-item-remove:hover {
    color: #dc2626 !important;
}

[data-tema="claro"] .cart-page .cart-summary-kicker {
    color: #0a2fa8 !important;
}

[data-tema="claro"] .cart-page .cart-summary-title,
[data-tema="claro"] .cart-page .cart-summary-title em {
    color: #000000 !important;
}

[data-tema="claro"] .cart-page .cart-summary-title em {
    color: #1a4dff !important;
}

[data-tema="claro"] .cart-page .cart-summary-row > span {
    color: #1f2937 !important;
}

[data-tema="claro"] .cart-page .cart-summary-row strong {
    color: #000000 !important;
}

[data-tema="claro"] .cart-page .cart-summary-row--total strong {
    color: #000000 !important;
}

[data-tema="claro"] .cart-page .cart-summary-info {
    color: #4b5563 !important;
}

[data-tema="claro"] .cart-page .continue-shopping {
    color: #1f2937 !important;
}

[data-tema="claro"] .cart-page .continue-shopping:hover {
    color: #1a4dff !important;
}

[data-tema="claro"] .cart-page .cart-empty-mark {
    color: rgba(0, 0, 0, .25) !important;
}

[data-tema="claro"] .cart-page .cart-empty h2,
[data-tema="claro"] .cart-page .cart-empty h2 em {
    color: #000000 !important;
}

[data-tema="claro"] .cart-page .cart-empty h2 em {
    color: #1a4dff !important;
}

[data-tema="claro"] .cart-page .cart-empty p {
    color: #1f2937 !important;
}

[data-tema="claro"] .cart-page .pull-quote blockquote {
    color: #000000 !important;
}

[data-tema="claro"] .cart-page .pull-quote cite {
    color: #0a2fa8 !important;
}

[data-tema="claro"] .cart-page .breadcrumb,
[data-tema="claro"] .cart-page .breadcrumb a,
[data-tema="claro"] .cart-page .breadcrumb span {
    color: #1f2937 !important;
}

/* RESUMO FORA do cart-page (checkout) */
[data-tema="claro"] .cart-summary-kicker {
    color: #0a2fa8 !important;
}

[data-tema="claro"] .cart-summary-title,
[data-tema="claro"] .cart-summary-title em {
    color: #000000 !important;
}

[data-tema="claro"] .cart-summary-title em {
    color: #1a4dff !important;
}

/* ---------------------------------------------------------
   CHECKOUT
   --------------------------------------------------------- */
[data-tema="claro"] .search-main,
[data-tema="claro"] .search-main *,
[data-tema="claro"] .checkout-main,
[data-tema="claro"] .checkout-main * {
    color: #1f2937;
}

[data-tema="claro"] .search-head h1,
[data-tema="claro"] .search-head h1 em,
[data-tema="claro"] .checkout-head h1,
[data-tema="claro"] .checkout-head h1 em {
    color: #000000 !important;
}

[data-tema="claro"] .search-head h1 em,
[data-tema="claro"] .checkout-head h1 em {
    color: #1a4dff !important;
}

[data-tema="claro"] .search-head p,
[data-tema="claro"] .checkout-head p {
    color: #1f2937 !important;
}

[data-tema="claro"] .search-head .category-label,
[data-tema="claro"] .checkout-head .category-label {
    color: #0a2fa8 !important;
}

[data-tema="claro"] .search-head .category-label span,
[data-tema="claro"] .checkout-head .category-label span {
    color: #4b5563 !important;
}

[data-tema="claro"] .step-head h2 {
    color: #000000 !important;
}

[data-tema="claro"] .step-head p {
    color: #1f2937 !important;
}

[data-tema="claro"] .step-num {
    color: #0a2fa8 !important;
    border-color: rgba(0, 0, 0, .25) !important;
}

[data-tema="claro"] .field label,
[data-tema="claro"] .checkout-step label {
    color: #0a2fa8 !important;
}

[data-tema="claro"] .shipping-info strong {
    color: #000000 !important;
}

[data-tema="claro"] .shipping-info small {
    color: #1f2937 !important;
}

[data-tema="claro"] .shipping-price {
    color: #0a2fa8 !important;
}

[data-tema="claro"] .payment-method strong {
    color: #000000 !important;
}

[data-tema="claro"] .payment-method small {
    color: #1f2937 !important;
}

[data-tema="claro"] .payment-note {
    color: #1f2937 !important;
}

[data-tema="claro"] .summary-item-info strong {
    color: #000000 !important;
}

[data-tema="claro"] .summary-item-info small {
    color: #4b5563 !important;
}

[data-tema="claro"] .summary-item-price {
    color: #000000 !important;
}

[data-tema="claro"] .summary-row span {
    color: #1f2937 !important;
}

[data-tema="claro"] .summary-row strong {
    color: #000000 !important;
}

[data-tema="claro"] .summary-row--total strong {
    color: #000000 !important;
}

[data-tema="claro"] .summary-info {
    color: #4b5563 !important;
}

/* ---------------------------------------------------------
   SUCESSO
   --------------------------------------------------------- */
[data-tema="claro"] .success-box h2,
[data-tema="claro"] .success-box h2 em {
    color: #000000 !important;
}

[data-tema="claro"] .success-box h2 em {
    color: #059669 !important;
}

[data-tema="claro"] .success-box p {
    color: #1f2937 !important;
}

[data-tema="claro"] .success-code span {
    color: #4b5563 !important;
}

[data-tema="claro"] .success-code strong {
    color: #1a4dff !important;
}

/* ---------------------------------------------------------
   PIX MODAL
   --------------------------------------------------------- */
[data-tema="claro"] .pix-kicker {
    color: #0a2fa8 !important;
}

[data-tema="claro"] .pix-head h2,
[data-tema="claro"] .pix-head h2 em {
    color: #000000 !important;
}

[data-tema="claro"] .pix-head h2 em {
    color: #1a4dff !important;
}

[data-tema="claro"] .pix-valor-row > span,
[data-tema="claro"] .pix-countdown-row > span {
    color: #4b5563 !important;
}

[data-tema="claro"] .pix-valor-row strong {
    color: #000000 !important;
}

[data-tema="claro"] .pix-countdown-row strong {
    color: #1a4dff !important;
}

[data-tema="claro"] .pix-aviso {
    color: #1f2937 !important;
}

[data-tema="claro"] .pix-codigo-wrap label {
    color: #0a2fa8 !important;
}

[data-tema="claro"] .pix-codigo-wrap code {
    color: #1f2937 !important;
}

[data-tema="claro"] .pix-copiar,
[data-tema="claro"] .pix-copiar * {
    color: #000000 !important;
    border-color: rgba(0, 0, 0, .3);
}

[data-tema="claro"] .pix-copiar:hover,
[data-tema="claro"] .pix-copiar:hover * {
    color: #1a4dff !important;
    border-color: #1a4dff;
    background: rgba(26, 77, 255, .08);
}

[data-tema="claro"] .pix-copiar.copied,
[data-tema="claro"] .pix-copiar.copied * {
    color: #059669 !important;
    border-color: #059669;
    background: rgba(16, 185, 129, .1);
}

[data-tema="claro"] .pix-close {
    color: #1f2937 !important;
    border-color: rgba(0, 0, 0, .2);
}

[data-tema="claro"] .pix-close:hover {
    color: #000000 !important;
    border-color: #1a4dff;
}

[data-tema="claro"] .pix-cancelar {
    color: #1f2937 !important;
    border-color: rgba(0, 0, 0, .25);
}

[data-tema="claro"] .pix-cancelar:hover {
    color: #000000 !important;
    border-color: rgba(0, 0, 0, .5);
}

/* ---------------------------------------------------------
   BUSCA OVERLAY
   --------------------------------------------------------- */
[data-tema="claro"] .search-box p {
    color: #1f2937 !important;
}

[data-tema="claro"] .search-box input {
    color: #000000 !important;
}

[data-tema="claro"] .search-box input::placeholder {
    color: #6b7280 !important;
}

[data-tema="claro"] .search-box > button:last-child {
    color: #1f2937 !important;
}

[data-tema="claro"] .search-box > button:last-child:hover {
    color: #000000 !important;
}

[data-tema="claro"] .close-search {
    color: #1f2937 !important;
    border-color: rgba(0, 0, 0, .2);
}

[data-tema="claro"] .close-search:hover {
    color: #000000 !important;
    border-color: #1a4dff;
}

/* ---------------------------------------------------------
   TOAST / ADMIN
   --------------------------------------------------------- */
[data-tema="claro"] .toast,
[data-tema="claro"] .toast * {
    color: #000000 !important;
    background: #ffffff;
    border-color: rgba(0, 0, 0, .15);
}

[data-tema="claro"] .admin-head h1 {
    color: #000000 !important;
}

[data-tema="claro"] .admin-head p {
    color: #1f2937 !important;
}

[data-tema="claro"] .admin-item h4 {
    color: #000000 !important;
}

[data-tema="claro"] .admin-item small {
    color: #4b5563 !important;
}

[data-tema="claro"] .admin-item button {
    color: #1f2937 !important;
    border-color: rgba(0, 0, 0, .2);
}

[data-tema="claro"] .admin-item button:hover {
    color: #dc2626 !important;
    border-color: #dc2626;
}

[data-tema="claro"] .admin-msg.ok {
    color: #0a2fa8 !important;
    background: rgba(26, 77, 255, .1);
    border-color: #1a4dff;
}

/* ---------------------------------------------------------
   MENU MOBILE
   --------------------------------------------------------- */
[data-tema="claro"] .nav.open,
[data-tema="claro"] .nav.open * {
    color: #000000;
}

[data-tema="claro"] .nav.open a {
    color: #000000 !important;
    border-bottom-color: rgba(0, 0, 0, .08) !important;
}

[data-tema="claro"] .nav.open a:hover,
[data-tema="claro"] .nav.open a.active {
    color: #1a4dff !important;
}

[data-tema="claro"] .nav .nav-close {
    color: #1f2937 !important;
    border-color: rgba(0, 0, 0, .2);
}

/* ---------------------------------------------------------
   LOADER
   --------------------------------------------------------- */
[data-tema="claro"] .loader {
    background: #ffffff !important;
}

[data-tema="claro"] .loader,
[data-tema="claro"] .loader * {
    color: #000000;
}

[data-tema="claro"] .loader-meta {
    color: #4b5563 !important;
}

[data-tema="claro"] .loader-line {
    background: rgba(0, 0, 0, .15);
}

/* ---------------------------------------------------------
   AUTH / LOGIN
   --------------------------------------------------------- */
[data-tema="claro"] .auth-title {
    color: #000000 !important;
}

[data-tema="claro"] .auth-sub {
    color: #1f2937 !important;
}

[data-tema="claro"] .auth-benefits li {
    color: #1f2937 !important;
}

[data-tema="claro"] .auth-tab {
    color: #4b5563 !important;
}

[data-tema="claro"] .auth-tab:hover,
[data-tema="claro"] .auth-tab.active {
    color: #000000 !important;
}

/* ---------------------------------------------------------
   FALLBACK UNIVERSAL: força cor mínima legível
   --------------------------------------------------------- */
[data-tema="claro"] *[style*="color: #a4b2ca"],
[data-tema="claro"] *[style*="color: #f5f7ff"],
[data-tema="claro"] *[style*="color: #e0e6f5"],
[data-tema="claro"] *[style*="color: #7fb0ff"],
[data-tema="claro"] *[style*="color: #b8d4ff"],
[data-tema="claro"] *[style*="color: #5d6b83"],
[data-tema="claro"] *[style*="color: #38455c"] {
    color: #1f2937 !important;
}

/* ---------------------------------------------------------
   FIM — SUPER FIX v4 NUCLEAR
   --------------------------------------------------------- */

   /* =========================================================
   RESPONSIVE.CSS — Ajustes finos para mobile e tablet
   Cola DEPOIS de style.css, cliente.css, produtos.css, admin.css
   ========================================================= */

/* ---------------------------------------------------------
   00. GLOBAIS — evita overflow horizontal e melhora toque
   --------------------------------------------------------- */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* Safe area — iPhone com notch / barra inferior */
body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

/* Alvos de toque: mínimo 44x44px em botões interativos */
@media (max-width: 900px) {
    button, a, input, select, textarea,
    .nav-item, .conta-nav-item, .auth-tab,
    .pedido-filtro, .shipping-option, .payment-method {
        -webkit-tap-highlight-color: transparent;
    }

    .icon-btn,
    .search-button,
    .cart-button,
    .menu-button,
    .theme-button,
    .conta-button {
        min-width: 42px;
        min-height: 42px;
    }
}

/* Imagens nunca estouram */
img, video, canvas, svg {
    max-width: 100%;
    height: auto;
}

/* Tabelas viram scroll horizontal quando preciso */
@media (max-width: 900px) {
    .table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .table {
        min-width: 600px;
    }
}


/* =========================================================
   01. HEADER — mobile
   ========================================================= */
@media (max-width: 1080px) {
    .header {
        padding: 0 16px;
        gap: 12px;
    }

    .header-actions {
        gap: 2px;
    }

    .logo {
        font-size: clamp(1.2rem, 5vw, 1.6rem);
    }
}

@media (max-width: 480px) {
    .header {
        padding: 0 12px;
        gap: 8px;
    }

    .logo {
        font-size: 1.15rem;
    }

    .logo span {
        display: none;
    }

    .header-actions .search-button,
    .header-actions .cart-button,
    .header-actions .menu-button,
    .header-actions .theme-button {
        width: 38px;
        height: 38px;
    }

    .header-actions .conta-button {
        width: 38px;
        height: 38px;
        padding: 0;
        justify-content: center;
    }
}


/* =========================================================
   02. MENU MOBILE — sidebar
   ========================================================= */
@media (max-width: 1080px) {
    .nav {
        width: min(400px, 90vw);
        padding: 90px 32px 40px;
        overflow-y: auto;
    }

    .nav a {
        font-size: 1.4rem;
        padding: 16px 0;
    }

    .nav .nav-close {
        top: 18px;
        right: 18px;
    }
}

@media (max-width: 480px) {
    .nav {
        width: 100vw;
        padding: 80px 24px 40px;
    }

    .nav a {
        font-size: 1.2rem;
        padding: 14px 0;
    }
}


/* =========================================================
   03. HERO — home
   ========================================================= */
@media (max-width: 1080px) {
    .hero {
        grid-template-columns: 1fr;
        min-height: auto;
        padding: 80px 24px 60px;
    }

    .hero-decoration {
        display: none;
    }

    .hero::after {
        display: none;
    }

    .hero-content {
        max-width: 100%;
    }

    .hero h1 {
        font-size: clamp(2.2rem, 8vw, 3.4rem);
        line-height: 1;
        margin-bottom: 26px;
    }

    .hero-description {
        font-size: 1rem;
        margin-bottom: 32px;
        max-width: 100%;
    }

    .hero-small {
        font-size: .68rem;
        letter-spacing: .28em;
        padding-bottom: 12px;
        margin-bottom: 22px;
    }
}

@media (max-width: 480px) {
    .hero {
        padding: 60px 18px 50px;
    }

    .hero h1 {
        font-size: clamp(1.9rem, 9vw, 2.6rem);
        margin-bottom: 22px;
    }

    .hero-buttons {
        flex-direction: column;
        gap: 10px;
    }

    .hero-buttons a {
        width: 100%;
        justify-content: space-between;
        padding: 16px 22px;
        font-size: .68rem;
    }

    .hero-description {
        font-size: .95rem;
    }
}


/* =========================================================
   04. TICKER
   ========================================================= */
@media (max-width: 480px) {
    .ticker {
        padding: 16px 0;
    }

    .ticker-track {
        gap: 40px;
    }

    .ticker-track > * {
        gap: 40px;
        font-size: 1rem;
    }
}


/* =========================================================
   05. TÍTULOS DE SEÇÃO
   ========================================================= */
@media (max-width: 720px) {
    .section-title {
        margin-bottom: 32px;
    }

    .section-title h2 {
        font-size: clamp(1.6rem, 6.5vw, 2.4rem);
    }

    .section-title > p {
        font-size: .66rem;
        letter-spacing: .3em;
        margin-bottom: 16px;
    }

    .section-head {
        grid-template-columns: 1fr;
        gap: 16px;
        padding-bottom: 24px;
        margin-bottom: 32px;
    }

    .section-head .section-title {
        font-size: clamp(1.6rem, 6.5vw, 2.4rem);
    }

    .section-head-right p {
        font-size: .92rem;
    }
}


/* =========================================================
   06. CATEGORIAS (cards grandes)
   ========================================================= */
@media (max-width: 1280px) {
    .category-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .category-grid .category-card:last-child {
        grid-column: span 2;
        min-height: 360px;
    }
}

@media (max-width: 1080px) {
    .category-grid {
        grid-template-columns: 1fr;
    }
    .category-grid .category-card:last-child {
        grid-column: auto;
    }
}

@media (max-width: 720px) {
    .categories {
        padding: 60px 18px;
    }

    .category-card {
        min-height: 340px;
        padding: 28px 24px;
    }

    .category-content h3 {
        font-size: 1.6rem;
    }

    .category-content p {
        font-size: .92rem;
        margin-bottom: 20px;
    }
}


/* =========================================================
   07. LOOKBOOK
   ========================================================= */
@media (max-width: 1080px) {
    .lookbook {
        padding: 60px 18px;
    }
}

@media (max-width: 720px) {
    .lookbook-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 12px;
    }

    .lookbook-item.span-3,
    .lookbook-item.span-4,
    .lookbook-item.span-5,
    .lookbook-item.span-6,
    .lookbook-item.span-7,
    .lookbook-item.span-8 {
        grid-column: span 6;
        min-height: 220px;
    }

    .lookbook-item h4 {
        font-size: 1.15rem;
    }

    .lookbook-item small {
        font-size: .62rem;
        letter-spacing: .24em;
    }
}


/* =========================================================
   08. PULL-QUOTE
   ========================================================= */
@media (max-width: 720px) {
    .pull-quote {
        padding: 0 20px;
        margin: 60px auto;
    }

    .pull-quote::before {
        font-size: 5rem;
        top: -18px;
    }

    .pull-quote blockquote {
        font-size: 1.25rem;
        line-height: 1.3;
    }

    .pull-quote cite {
        font-size: .66rem;
        letter-spacing: .26em;
    }
}


/* =========================================================
   09. QUICK CATEGORIES
   ========================================================= */
@media (max-width: 720px) {
    .quick-categories {
        padding: 60px 18px;
    }

    .quick-grid {
        border-left: none;
        grid-template-columns: 1fr;
    }

    .quick-card {
        border-left: 1px solid var(--line-1);
        padding: 26px 22px;
    }

    .quick-card span {
        font-size: .82rem;
        margin-bottom: 18px;
    }

    .quick-card h3 {
        font-size: 1.3rem;
    }
}


/* =========================================================
   10. PRODUTOS — grid
   ========================================================= */
@media (max-width: 900px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px 10px;
    }
}

@media (max-width: 480px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px 8px;
    }
}

@media (max-width: 360px) {
    .products-grid {
        grid-template-columns: 1fr;
    }
}

/* Card de produto em mobile */
@media (max-width: 720px) {
    .product-info {
        padding: 12px 2px 4px;
        gap: 4px;
    }

    .product-cat {
        font-size: .55rem;
        letter-spacing: .24em;
    }

    .product-name {
        font-size: .92rem;
        line-height: 1.2;
    }

    .product-desc {
        display: none;
    }

    .product-price strong {
        font-size: .92rem;
    }

    .product-price s {
        font-size: .72rem;
    }

    .product-price em {
        font-size: .6rem;
    }

    .product-sizes {
        display: none;
    }

    .product-wish {
        opacity: 1;
        transform: none;
        width: 34px;
        height: 34px;
        top: 8px;
        right: 8px;
    }

    .product-badges {
        top: 8px;
        left: 8px;
        gap: 4px;
    }

    .product-badge {
        padding: 5px 9px;
        font-size: .55rem;
        letter-spacing: .22em;
    }

    /* Botões sempre visíveis no mobile */
    .product-actions {
        opacity: 1;
        transform: none;
        grid-template-columns: 1fr;
        gap: 4px;
        left: 8px;
        right: 8px;
        bottom: 8px;
    }

    .product-quick-add,
    .product-buy-now {
        padding: 10px 8px;
        font-size: .58rem;
        letter-spacing: .16em;
    }

    .product-quick-add svg,
    .product-buy-now svg {
        width: 12px;
        height: 12px;
    }
}


/* =========================================================
   11. CATEGORY HERO (páginas internas)
   ========================================================= */
@media (max-width: 1080px) {
    .category-hero {
        grid-template-columns: 1fr;
        padding: 80px 24px 50px;
    }

    .category-hero-mark {
        font-size: clamp(4rem, 18vw, 12rem);
        opacity: .4;
    }
}

@media (max-width: 720px) {
    .breadcrumb {
        padding: 50px 18px 0;
        font-size: .62rem;
        gap: 8px;
        flex-wrap: wrap;
    }

    .category-hero {
        padding: 50px 18px 50px;
    }

    .category-label {
        font-size: .62rem;
        letter-spacing: .28em;
        padding-bottom: 12px;
        margin-bottom: 20px;
    }

    .category-hero h1 {
        font-size: clamp(2rem, 9vw, 3rem);
        margin-bottom: 20px;
    }

    .category-hero p {
        font-size: .98rem;
    }

    .category-hero-meta {
        grid-template-columns: 1fr;
        gap: 14px;
        padding-top: 20px;
    }

    .category-hero-meta > div {
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        padding-bottom: 10px;
        border-bottom: 1px solid var(--line-0);
    }

    .category-hero-meta strong {
        font-size: 1rem;
    }

    .category-products {
        padding: 50px 18px 80px;
    }

    .category-heading {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
        padding-bottom: 22px;
        margin-bottom: 30px;
    }

    .category-heading h2 {
        font-size: clamp(1.5rem, 6.5vw, 2.2rem);
    }

    .category-toolbar {
        width: 100%;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 12px;
    }

    .category-result-count {
        font-size: .62rem;
    }

    .category-sort select {
        font-size: .68rem;
    }
}


/* =========================================================
   12. PÁGINA DO PRODUTO
   ========================================================= */
@media (max-width: 1080px) {
    .product-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .product-gallery {
        position: static;
    }
}

@media (max-width: 720px) {
    .product-main {
        padding: 20px 16px 70px;
    }

    .product-gallery {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .gallery-thumbs {
        order: 2;
        flex-direction: row;
        overflow-x: auto;
        gap: 8px;
        padding-bottom: 6px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .gallery-thumbs::-webkit-scrollbar {
        display: none;
    }

    .gallery-thumb {
        flex: 0 0 66px;
        aspect-ratio: 3 / 4;
    }

    .gallery-main {
        order: 1;
    }

    .gallery-zoom {
        bottom: 10px;
        right: 10px;
        padding: 9px;
        border-radius: 50%;
    }

    .gallery-zoom span {
        display: none;
    }

    .detail-title {
        font-size: clamp(1.4rem, 6vw, 2rem);
    }

    .detail-price {
        font-size: 1.4rem;
    }

    .detail-price-old {
        font-size: .9rem;
    }

    .detail-desc {
        font-size: .95rem;
        line-height: 1.6;
    }

    .detail-sizes {
        gap: 6px;
    }

    .detail-size {
        min-width: 48px;
        height: 44px;
        padding: 0 12px;
        font-size: .72rem;
    }

    .detail-color {
        width: 30px;
        height: 30px;
    }

    .detail-qty button {
        width: 42px;
        height: 42px;
    }

    .detail-qty span {
        min-width: 42px;
        font-size: .88rem;
    }

    .detail-actions {
        flex-direction: column-reverse;
        gap: 8px;
    }

    .btn-add-cart {
        padding: 18px;
        font-size: .72rem;
        letter-spacing: .24em;
    }

    .btn-buy-now {
        padding: 16px 20px;
        font-size: .72rem;
        letter-spacing: .24em;
    }

    .btn-wish-large {
        width: 100%;
        height: 52px;
    }

    .detail-benefits li {
        padding: 14px 0;
    }

    .detail-benefits strong {
        font-size: .82rem;
    }

    .detail-benefits small {
        font-size: .72rem;
    }

    .related-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .related-head h2 {
        font-size: clamp(1.4rem, 6vw, 2rem);
    }
}


/* =========================================================
   13. AVALIAÇÕES
   ========================================================= */
@media (max-width: 720px) {
    .reviews-section {
        padding: 50px 18px 0;
    }

    .reviews-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        padding-bottom: 22px;
        margin-bottom: 28px;
    }

    .reviews-head h2 {
        font-size: clamp(1.3rem, 5.5vw, 1.9rem);
    }

    .reviews-summary {
        gap: 12px;
    }

    .reviews-summary-nota {
        font-size: 2.2rem;
    }

    .review-form-wrap {
        padding: 22px 18px;
        margin-bottom: 28px;
    }

    .review-form-title {
        font-size: 1.2rem;
    }

    .review-star-pick {
        width: 34px;
        height: 34px;
    }

    .review-head {
        grid-template-columns: 38px 1fr auto;
        gap: 10px;
        margin-bottom: 10px;
    }

    .review-head .estrelas {
        grid-column: 2 / -1;
    }

    .review-avatar {
        width: 38px;
        height: 38px;
        font-size: 1rem;
    }

    .review-name {
        font-size: .88rem;
    }

    .review-comentario {
        font-size: .88rem;
    }

    .review-form-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .review-form-actions .btn-primary {
        width: 100%;
        justify-content: center;
    }
}


/* =========================================================
   14. CARRINHO
   ========================================================= */
@media (max-width: 900px) {
    .cart-page {
        padding: 30px 18px 80px;
    }

    .cart-page .cart-layout {
        grid-template-columns: 1fr;
    }

    .cart-page .cart-summary {
        position: static;
    }

    .cart-page .cart-heading {
        margin-bottom: 36px;
        padding-bottom: 22px;
    }

    .cart-page .cart-heading h1 {
        font-size: clamp(1.6rem, 6.5vw, 2.4rem);
    }

    .cart-page .cart-item {
        grid-template-columns: 74px 1fr;
        gap: 14px;
        padding: 18px 0;
    }

    .cart-page .cart-item-media {
        width: 74px;
        height: 92px;
    }

    .cart-page .cart-item-actions {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding-top: 12px;
        border-top: 1px solid var(--_line-0);
    }

    .cart-page .cart-summary {
        padding: 22px;
    }

    .cart-page .cart-summary-title {
        font-size: 1.15rem;
    }

    .cart-page .cart-summary-row--total strong {
        font-size: 1.3rem;
    }
}

/* Carrinho dentro da conta (minha-conta) */
@media (max-width: 720px) {
    .carrinho-item {
        grid-template-columns: 70px 1fr;
        gap: 12px;
        padding: 16px 0;
    }

    .carrinho-item-media {
        width: 70px;
        height: 88px;
    }

    .carrinho-item-actions {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding-top: 10px;
        border-top: 1px solid var(--_line-0);
    }

    .carrinho-rodape {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .carrinho-finalizar {
        justify-content: center;
    }
}


/* =========================================================
   15. CHECKOUT
   ========================================================= */
@media (max-width: 900px) {
    .search-main,
    .checkout-main {
        padding: 30px 18px 90px;
    }

    .checkout-layout {
        grid-template-columns: 1fr;
    }

    .checkout-summary {
        position: static;
    }

    .checkout-step {
        padding: 24px 20px;
    }

    .payment-methods {
        grid-template-columns: 1fr;
    }

    .btn-finish-mobile {
        display: block;
        width: 100%;
        margin-top: 14px;
    }

    .checkout-form > .btn-primary {
        display: none;
    }

    .summary-content {
        padding: 22px;
    }

    .search-head h1,
    .checkout-head h1 {
        font-size: clamp(1.6rem, 6.5vw, 2.4rem);
    }
}

@media (max-width: 520px) {
    .step-num {
        width: 36px;
        height: 36px;
        font-size: .95rem;
    }

    .step-head {
        gap: 14px;
        padding-bottom: 18px;
        margin-bottom: 22px;
    }

    .step-head h2 {
        font-size: 1.15rem;
    }

    .step-head p {
        font-size: .8rem;
    }

    .checkout-step .field-row {
        flex-direction: column;
        gap: 14px;
    }

    .checkout-step .field-row .field {
        flex: 1 1 100%;
    }
}


/* =========================================================
   16. PIX MODAL
   ========================================================= */
@media (max-width: 720px) {
    .pix-dialog {
        padding: 24px 20px;
    }

    .pix-body {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 18px;
    }

    .pix-qr-wrap {
        width: 180px;
        height: 180px;
    }

    .pix-info {
        width: 100%;
    }

    .pix-foot {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .pix-confirmar {
        width: 100%;
    }
}

@media (max-width: 400px) {
    .pix-qr-wrap {
        width: 150px;
        height: 150px;
    }

    .pix-valor-row strong {
        font-size: 1.2rem;
    }

    .pix-countdown-row strong {
        font-size: 1.05rem;
    }
}


/* =========================================================
   17. SUCESSO DO CHECKOUT
   ========================================================= */
@media (max-width: 520px) {
    .success-box {
        padding: 40px 24px;
    }

    .success-box h2 {
        font-size: 1.5rem;
    }

    .success-icon {
        width: 60px;
        height: 60px;
    }

    .success-icon svg {
        width: 26px;
        height: 26px;
    }

    .success-code strong {
        font-size: 1.3rem;
    }
}


/* =========================================================
   18. LOGIN / CADASTRO
   ========================================================= */
@media (max-width: 900px) {
    .auth-wrap {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .auth-visual {
        order: -1;
        min-height: 260px;
        padding: 34px 28px;
    }

    .auth-visual-text h2 {
        font-size: 1.6rem;
        margin-bottom: 20px;
    }

    .auth-benefits li {
        font-size: .85rem;
    }

    .cliente-main {
        padding: 30px 18px 70px;
    }
}

@media (max-width: 520px) {
    .auth-title {
        font-size: 1.8rem;
    }

    .auth-sub {
        font-size: .92rem;
    }

    .auth-tabs {
        padding: 3px;
    }

    .auth-tab {
        padding: 10px 12px;
        font-size: .68rem;
        letter-spacing: .08em;
    }

    .auth-field input {
        padding: 14px 16px;
        font-size: .92rem;
    }
}


/* =========================================================
   19. MINHA CONTA
   ========================================================= */
@media (max-width: 900px) {
    .conta-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .conta-sidebar {
        position: static;
    }

    .conta-nav {
        flex-direction: row;
        overflow-x: auto;
        padding: 6px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .conta-nav::-webkit-scrollbar {
        display: none;
    }

    .conta-nav-item {
        flex: 0 0 auto;
        padding: 10px 16px;
        border-radius: 99px;
        white-space: nowrap;
    }

    .conta-nav-item em {
        display: none;
    }

    .conta-head {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        padding-bottom: 22px;
        margin-bottom: 24px;
    }

    .conta-head-user {
        gap: 14px;
    }

    .conta-avatar {
        width: 56px;
        height: 56px;
        font-size: 1.5rem;
    }

    .conta-head h1 {
        font-size: 1.5rem;
    }

    .conta-logout {
        align-self: flex-start;
    }
}

@media (max-width: 720px) {
    .pedidos-filtros {
        gap: 6px;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 6px;
        scrollbar-width: none;
    }

    .pedidos-filtros::-webkit-scrollbar {
        display: none;
    }

    .pedido-filtro {
        flex: 0 0 auto;
        padding: 8px 14px;
        font-size: .7rem;
    }

    .pedido-card {
        padding: 20px 18px;
    }

    .pedido-timeline {
        grid-template-columns: repeat(4, 1fr);
        gap: 4px;
        padding: 18px 0;
    }

    .timeline-icone {
        width: 26px;
        height: 26px;
    }

    .timeline-icone svg {
        width: 12px;
        height: 12px;
    }

    .timeline-label {
        font-size: .58rem;
    }

    .pedido-foot strong {
        font-size: 1.2rem;
    }

    .notif-opcao {
        grid-template-columns: 40px 1fr;
        padding: 16px;
    }

    .notif-opcao .btn-notificacoes,
    .notif-opcao .notif-badge {
        grid-column: 1 / -1;
        justify-self: stretch;
        text-align: center;
        justify-content: center;
    }

    .notif-icon {
        width: 40px;
        height: 40px;
    }

    .notif-icon svg {
        width: 18px;
        height: 18px;
    }

    .conta-form-actions {
        flex-direction: column;
    }

    .conta-form-actions .btn-primary,
    .conta-form-actions .btn-secondary {
        width: 100%;
        justify-content: center;
    }

    .conta-field-row {
        flex-direction: column;
        gap: 14px;
    }

    .enderecos-list {
        grid-template-columns: 1fr;
    }

    .endereco-actions .btn-ghost-sm {
        width: 100%;
    }
}


/* =========================================================
   20. MODAL DE REEMBOLSO
   ========================================================= */
@media (max-width: 720px) {
    .reembolso-dialog {
        padding: 24px 20px;
        border-radius: 12px;
    }

    .reembolso-head h2 {
        font-size: 1.4rem;
    }

    .reembolso-foot {
        flex-direction: column;
    }

    .reembolso-btn-cancelar,
    .reembolso-btn-confirmar {
        width: 100%;
    }
}


/* =========================================================
   21. FOOTER
   ========================================================= */
@media (max-width: 720px) {
    .footer {
        padding: 50px 18px 30px;
    }

    .footer-logo {
        font-size: 1.4rem;
        margin-bottom: 26px;
    }

    .footer-links {
        gap: 12px 22px;
        margin-bottom: 30px;
    }

    .footer-links a {
        font-size: .62rem;
        letter-spacing: .22em;
    }

    .admin-link {
        border-left: none;
        padding-left: 0;
    }

    .footer > p {
        padding-top: 24px;
        font-size: .78rem;
    }
}

@media (max-width: 480px) {
    .footer-contato {
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }

    .footer-contato-link {
        width: 100%;
        justify-content: center;
        font-size: .76rem;
        padding: 10px 16px;
    }
}


/* =========================================================
   22. BUSCA (overlay + página)
   ========================================================= */
@media (max-width: 720px) {
    .search-overlay {
        padding: 24px 18px;
    }

    .search-overlay::before {
        font-size: clamp(6rem, 30vw, 12rem);
    }

    .search-box {
        padding: 30px 0;
    }

    .search-box p {
        font-size: 1.1rem;
        margin-bottom: 20px;
    }

    .search-box input {
        font-size: 1.4rem;
        padding: 14px 0;
    }

    .close-search {
        top: -56px;
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }
}

@media (max-width: 720px) {
    .search-head {
        padding-bottom: 24px;
        margin-bottom: 30px;
    }

    .search-head h1 {
        font-size: clamp(1.5rem, 6.5vw, 2.2rem);
    }

    .search-head p {
        font-size: .92rem;
    }
}


/* =========================================================
   23. ADMIN
   ========================================================= */
@media (max-width: 1024px) {
    .sidebar {
        transform: translateX(-100%);
        box-shadow: 0 30px 80px rgba(0, 0, 0, .7);
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .sidebar-backdrop.active {
        display: block;
    }

    .app-shell {
        margin-left: 0 !important;
    }

    .mobile-menu {
        display: grid;
    }

    .sidebar-collapse {
        display: none;
    }

    .topbar {
        padding: 0 20px;
    }

    .content {
        padding: 24px 20px;
    }
}

@media (max-width: 720px) {
    .topbar {
        gap: 10px;
        padding: 0 14px;
    }

    .topbar-title h1 {
        font-size: 16px;
    }

    .breadcrumb {
        display: none;
    }

    .user-info,
    .user-chevron {
        display: none;
    }

    .content {
        padding: 18px 14px;
    }

    .page-head {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .page-head .btn {
        width: 100%;
        justify-content: center;
    }

    .toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .toolbar-search {
        max-width: none;
    }

    .toolbar-filters {
        flex-direction: column;
    }

    .kpi-grid,
    .kpi-grid-6 {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .kpi {
        padding: 16px;
    }

    .kpi-value {
        font-size: 22px;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .table th,
    .table td {
        padding: 10px 14px;
    }

    .panel-head {
        padding: 14px 16px;
        flex-wrap: wrap;
    }

    .chart-wrap {
        padding: 14px 14px 6px;
    }

    .chart-axis-x {
        padding: 0 14px;
    }

    .panel-foot {
        padding: 12px 14px;
        gap: 14px;
    }

    .cell-product strong {
        max-width: 160px;
    }

    .toast-stack {
        left: 14px;
        right: 14px;
        bottom: 14px;
    }

    .toast {
        min-width: 0;
        max-width: none;
    }

    .modal-head,
    .modal-body {
        padding: 18px;
    }

    .modal-dialog {
        max-height: 94vh;
    }

    .table-foot {
        padding: 12px 14px;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .estoque-tamanhos {
        grid-template-columns: repeat(2, 1fr);
    }

    .estoque-produto-head {
        grid-template-columns: 50px 1fr;
        gap: 10px;
        padding: 12px 14px;
    }

    .estoque-produto-head img {
        width: 50px;
        height: 50px;
    }

    .estoque-total {
        grid-column: 1 / -1;
        text-align: center;
    }

    .modal-foot-split {
        flex-direction: column;
        gap: 10px;
    }

    .modal-foot-split > div {
        width: 100%;
    }

    .modal-foot-split button {
        flex: 1;
    }

    .alerta-reembolsos {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        padding: 14px;
    }

    .alerta-reembolsos svg {
        margin: 0 auto;
    }

    .admin-login-box {
        padding: 30px 22px;
    }

    .admin-login-box h1 {
        font-size: 22px;
    }

    .admin-login-brand strong {
        font-size: 13px;
    }
}


/* =========================================================
   24. NOTIFICAÇÕES (dropdown)
   ========================================================= */
@media (max-width: 720px) {
    .dropdown-menu {
        min-width: 0;
        width: calc(100vw - 24px);
        right: -8px;
    }

    .user-menu {
        min-width: 0;
        width: calc(100vw - 24px);
        right: -8px;
    }
}


/* =========================================================
   25. BOTÃO DE TEMA — tamanho mobile
   ========================================================= */
@media (max-width: 720px) {
    .theme-button {
        width: 38px;
        height: 38px;
    }

    .theme-button svg {
        width: 16px;
        height: 16px;
    }
}


/* =========================================================
   26. WHATSAPP FLOAT
   ========================================================= */
@media (max-width: 480px) {
    .wa-float {
        bottom: 16px;
        right: 16px;
        width: 54px;
        height: 54px;
    }

    .wa-float svg {
        width: 26px;
        height: 26px;
    }

    .wa-float-tooltip {
        display: none;
    }
}


/* =========================================================
   27. AJUSTES FINAIS — telas pequenas
   ========================================================= */
@media (max-width: 400px) {
    :root {
        --gutter: 16px;
        --header-h: 64px;
    }

    body {
        font-size: 15px;
    }

    h1 { font-size: clamp(1.8rem, 9vw, 2.6rem); }
    h2 { font-size: clamp(1.5rem, 7vw, 2.2rem); }
    h3 { font-size: clamp(1.2rem, 5.5vw, 1.6rem); }

    .btn-primary,
    .btn-secondary {
        padding: 14px 22px;
        font-size: .62rem;
        letter-spacing: .22em;
    }

    .final-cta {
        padding: 60px 18px;
    }

    .final-cta h2 {
        font-size: clamp(1.6rem, 8vw, 2.4rem);
    }

    .final-cta::before {
        font-size: clamp(4rem, 30vw, 10rem);
    }

    .newsletter {
        padding: 30px 20px;
        margin: 0 12px 60px;
    }

    .newsletter h3 {
        font-size: 1.4rem;
    }

    .newsletter-form {
        flex-direction: column;
        border-bottom: none;
    }

    .newsletter-form input {
        padding: 14px 16px;
        border: 1px solid var(--line-2);
        margin-bottom: 10px;
        border-radius: 0;
    }

    .newsletter-form button {
        padding: 14px 20px;
        background: var(--blue-1);
        color: #fff;
        border-radius: 0;
    }
}


/* =========================================================
   28. ORIENTAÇÃO PAISAGEM em celulares
   ========================================================= */
@media (max-height: 500px) and (orientation: landscape) {
    .hero {
        min-height: auto;
        padding: 40px 24px;
    }

    .hero h1 {
        font-size: 2rem;
    }

    .nav {
        padding: 60px 30px 30px;
        justify-content: flex-start;
    }

    .admin-login-box {
        max-height: 94vh;
        overflow-y: auto;
    }
}


/* =========================================================
   29. TOUCH — melhorias em dispositivos móveis
   ========================================================= */
@media (hover: none) and (pointer: coarse) {
    /* Remove hover que travam em touch */
    .product-card:hover {
        transform: none;
    }

    .category-card:hover {
        transform: none;
    }

    .quick-card:hover::before {
        transform: scaleX(0);
    }

    /* Mostra ações que dependiam de hover */
    .product-wish {
        opacity: 1;
        transform: none;
    }

    .product-actions {
        opacity: 1;
        transform: none;
    }

    .product-sizes {
        opacity: 1;
        max-height: 40px;
    }

    /* Feedback tátil */
    .product-card:active {
        transform: scale(.98);
        transition: transform .15s;
    }

    .btn-primary:active,
    .btn-secondary:active,
    .checkout-button:active {
        transform: scale(.97);
    }

    .category-card:active {
        transform: scale(.99);
    }
}


/* =========================================================
   30. ALTO CONTRASTE / PREFERÊNCIAS
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
    .wa-float {
        animation: none;
    }

    .ticker-track {
        animation-duration: 60s;
    }
}

/* =========================================================
   FIM — RESPONSIVE.CSS
   ========================================================= */
/* =========================================================
   FIX — TEXTOS DECORATIVOS GIGANTES (TEMA CLARO) — v2
   Contorno mais grosso e visível
   ========================================================= */

/* HERO — "Seynclothing" gigante no canto */
[data-tema="claro"] .hero-decoration span {
    color: transparent !important;
    -webkit-text-stroke: 3px rgba(26, 77, 255, .55) !important;
    opacity: 1;
}

/* CATEGORY HERO — nome da categoria gigante no fundo */
[data-tema="claro"] .category-hero-mark {
    color: transparent !important;
    -webkit-text-stroke: 3px rgba(26, 77, 255, .45) !important;
    opacity: 1;
}

/* BUSCA — "BUSCAR" gigante no overlay */
[data-tema="claro"] .search-overlay::before {
    color: transparent !important;
    -webkit-text-stroke: 3px rgba(26, 77, 255, .40) !important;
    opacity: 1;
}

/* CTA FINAL — "REPRESENTE" gigante no fundo */
[data-tema="claro"] .final-cta::before {
    color: transparent !important;
    -webkit-text-stroke: 3px rgba(26, 77, 255, .40) !important;
    opacity: 1;
}
/* =========================================================
   FIX — SEÇÃO DE AVALIAÇÕES NO TEMA CLARO
   Corrige: card preto, estrelas invisíveis, textarea escuro
   ========================================================= */

/* Wrap geral da seção */
[data-tema="claro"] .reviews-section {
    background: transparent;
    color: #1e293b;
}

[data-tema="claro"] .reviews-head {
    border-bottom-color: rgba(15, 23, 42, .12);
}

[data-tema="claro"] .reviews-head .section-kicker {
    color: #1a4dff !important;
}

/* Título "O que dizem sobre essa peça" — remove gradiente/transparência */
[data-tema="claro"] .reviews-head .section-title,
[data-tema="claro"] .reviews-head h2 {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: #0a0e1a !important;
    color: #0a0e1a !important;
}

[data-tema="claro"] .reviews-head h2 em,
[data-tema="claro"] .reviews-head h2 span {
    color: #1a4dff !important;
    -webkit-text-fill-color: #1a4dff !important;
}

/* Resumo (estrelas + nota) */
[data-tema="claro"] .reviews-summary {
    color: #1e293b;
}

[data-tema="claro"] .reviews-summary .estrelas,
[data-tema="claro"] .reviews-summary svg {
    color: #1a4dff !important;
    fill: #1a4dff !important;
}

[data-tema="claro"] .reviews-summary-nota {
    color: #0a0e1a !important;
}

[data-tema="claro"] .reviews-summary-total {
    color: #64748b !important;
}

/* ============================================
   Card do formulário "Avalie essa peça"
   ESTAVA PRETO — agora fica claro
   ============================================ */
[data-tema="claro"] .review-form-wrap {
    background: #f8fafc !important;
    border: 1px solid rgba(15, 23, 42, .12) !important;
    box-shadow: 0 10px 40px rgba(15, 23, 42, .04);
}

[data-tema="claro"] .review-form-wrap *,
[data-tema="claro"] .review-form * {
    color: inherit;
}

[data-tema="claro"] .review-form-title {
    color: #0a0e1a !important;
}

/* ============================================
   Estrelas de seleção — ESTAVAM CINZA ESCURO
   ============================================ */
[data-tema="claro"] .review-star-pick button,
[data-tema="claro"] .review-star-pick svg {
    color: #cbd5e1 !important;
    fill: #cbd5e1 !important;
    stroke: #cbd5e1 !important;
    transition: color .2s, fill .2s;
}

[data-tema="claro"] .review-star-pick button:hover,
[data-tema="claro"] .review-star-pick button.hovered,
[data-tema="claro"] .review-star-pick button.selected,
[data-tema="claro"] .review-star-pick button.active {
    color: #1a4dff !important;
    fill: #1a4dff !important;
    stroke: #1a4dff !important;
}

/* ============================================
   Textarea de avaliação — ESTAVA ESCURO
   ============================================ */
[data-tema="claro"] .review-form-wrap textarea,
[data-tema="claro"] .review-form textarea,
[data-tema="claro"] .review-form-wrap .review-textarea {
    background: #ffffff !important;
    color: #0a0e1a !important;
    border: 1px solid rgba(15, 23, 42, .2) !important;
}

[data-tema="claro"] .review-form-wrap textarea::placeholder,
[data-tema="claro"] .review-form textarea::placeholder {
    color: #94a3b8 !important;
}

[data-tema="claro"] .review-form-wrap textarea:focus,
[data-tema="claro"] .review-form textarea:focus {
    border-color: #1a4dff !important;
    outline: none;
}

/* Rodapé do form "Seu nome será exibido publicamente" */
[data-tema="claro"] .review-form-actions small,
[data-tema="claro"] .review-form-note {
    color: #64748b !important;
}

/* Botão enviar */
[data-tema="claro"] .review-form-actions .btn-primary {
    color: #ffffff !important;
    background: #1a4dff;
    border-color: #1a4dff;
}

[data-tema="claro"] .review-form-actions .btn-primary:hover {
    background: #0a2fa8;
    border-color: #0a2fa8;
}

[data-tema="claro"] .review-form-actions .btn-primary * {
    color: #ffffff !important;
}

/* ============================================
   Cards de avaliações publicadas
   ============================================ */
[data-tema="claro"] .review-card {
    background: #f8fafc;
    border-color: rgba(15, 23, 42, .1);
}

[data-tema="claro"] .review-card--minha {
    background: linear-gradient(180deg, rgba(26, 77, 255, .06), rgba(26, 77, 255, .02));
    border-color: rgba(26, 77, 255, .35);
}

[data-tema="claro"] .review-name {
    color: #0a0e1a !important;
}

[data-tema="claro"] .review-date {
    color: #64748b !important;
}

[data-tema="claro"] .review-comentario {
    color: #475569 !important;
}

[data-tema="claro"] .review-avatar {
    background: linear-gradient(135deg, #1a4dff, #0a2fa8);
    color: #fff !important;
}

[data-tema="claro"] .review-card .estrelas,
[data-tema="claro"] .review-card .estrelas svg {
    color: #1a4dff !important;
    fill: #1a4dff !important;
}

/* Mensagem "Nenhuma avaliação" */
[data-tema="claro"] .reviews-empty,
[data-tema="claro"] .reviews-empty p {
    color: #64748b !important;
}

/* ============================================
   FIM — FIX AVALIAÇÕES TEMA CLARO
   ============================================ */

  /* =========================================================
   COOKIE BANNER — LGPD (adaptável ao tema)
   ========================================================= */

.cookie-banner-inner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--ink-1);
    border-top: 3px solid var(--blue-1);
    padding: 24px 32px;
    z-index: 9999;
    transform: translateY(100%);
    opacity: 0;
    transition: transform .4s ease, opacity .4s ease, background-color .35s ease, border-color .35s ease;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, .35);
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    justify-content: space-between;
    font-family: var(--ff-sans);
}

#cookieBanner.show .cookie-banner-inner {
    transform: translateY(0);
    opacity: 1;
}

.cookie-banner-text {
    flex: 1;
    min-width: 280px;
}

.cookie-banner-text strong {
    display: block;
    color: var(--paper-0);
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 8px;
    transition: color .35s ease;
}

.cookie-banner-text p {
    color: var(--paper-2);
    font-size: 0.88rem;
    line-height: 1.65;
    margin: 0;
    transition: color .35s ease;
}

.cookie-banner-text a {
    color: var(--blue-3);
    text-decoration: underline;
    font-weight: 600;
}

.cookie-banner-text a:hover {
    color: var(--blue-2);
}

.cookie-banner-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.cookie-btn {
    padding: 12px 22px;
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .25s;
    border: 2px solid transparent;
    white-space: nowrap;
}

.cookie-btn-accept {
    background: var(--blue-1);
    color: #ffffff;
    border-color: var(--blue-1);
}

.cookie-btn-accept:hover {
    background: var(--blue-0);
    border-color: var(--blue-0);
    transform: translateY(-1px);
}

.cookie-btn-reject {
    background: transparent;
    color: var(--paper-2);
    border-color: var(--line-2);
}

.cookie-btn-reject:hover {
    background: rgba(127, 176, 255, .08);
    border-color: var(--line-3);
    color: var(--paper-0);
}

.cookie-btn-custom {
    background: transparent;
    color: var(--blue-3);
    border-color: var(--line-2);
}

.cookie-btn-custom:hover {
    background: rgba(127, 176, 255, .1);
    border-color: var(--blue-2);
}

/* ---------------------------------------------------------
   MODAL DE PERSONALIZAÇÃO
   --------------------------------------------------------- */
#cookieModal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
}

#cookieModal.show {
    display: block;
}

.cookie-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 6, 11, .75);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.cookie-modal-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--ink-1);
    border: 1px solid var(--line-2);
    border-radius: 12px;
    padding: 32px;
    width: 90%;
    max-width: 540px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
    animation: cookieModalIn .3s ease;
    font-family: var(--ff-sans);
    transition: background-color .35s ease, border-color .35s ease;
}

@keyframes cookieModalIn {
    from { opacity: 0; transform: translate(-50%, -48%); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
}

.cookie-modal-box h3 {
    font-family: var(--ff-display);
    font-size: 1.6rem;
    font-style: italic;
    color: var(--paper-0);
    margin: 0 0 8px;
    font-weight: 700;
    transition: color .35s ease;
}

.cookie-modal-box > p {
    color: var(--paper-2);
    font-size: 0.9rem;
    margin: 0 0 24px;
    line-height: 1.6;
    transition: color .35s ease;
}

.cookie-cat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--line-1);
    transition: border-color .35s ease;
}

.cookie-cat:last-of-type {
    border-bottom: none;
}

.cookie-cat-info strong {
    display: block;
    color: var(--paper-0);
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 4px;
    transition: color .35s ease;
}

.cookie-cat-info small {
    color: var(--paper-3);
    font-size: 0.82rem;
    line-height: 1.55;
    transition: color .35s ease;
}

.cookie-cat-status {
    color: var(--blue-3);
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
    background: rgba(127, 176, 255, .12);
    padding: 4px 10px;
    border-radius: 12px;
    border: 1px solid var(--line-2);
}

.cookie-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
    flex-shrink: 0;
}

.cookie-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.cookie-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: var(--line-2);
    border-radius: 26px;
    transition: .3s;
}

.cookie-slider:before {
    content: "";
    position: absolute;
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background: var(--paper-0);
    border-radius: 50%;
    transition: .3s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}

.cookie-switch input:checked + .cookie-slider {
    background: var(--blue-1);
}

.cookie-switch input:checked + .cookie-slider:before {
    transform: translateX(22px);
    background: #ffffff;
}

.cookie-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 28px;
    flex-wrap: wrap;
}

/* ---------------------------------------------------------
   RESPONSIVO
   --------------------------------------------------------- */
@media (max-width: 640px) {
    .cookie-banner-inner {
        padding: 20px 18px;
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
    }
    .cookie-banner-text strong {
        font-size: 1rem;
    }
    .cookie-banner-text p {
        font-size: 0.82rem;
    }
    .cookie-banner-actions {
        width: 100%;
        gap: 8px;
    }
    .cookie-btn {
        flex: 1;
        text-align: center;
        padding: 12px 10px;
        font-size: 0.82rem;
    }
    .cookie-modal-box {
        padding: 24px 20px;
    }
    .cookie-modal-box h3 {
        font-size: 1.3rem;
    }
}

/* ---------------------------------------------------------
   COOKIE BANNER — adaptação por data-tema no próprio elemento
   --------------------------------------------------------- */
[data-tema="claro"].cookie-banner-inner,
[data-tema="claro"] .cookie-banner-inner {
    background: #f7f9fc;
    border-top-color: #1a4dff;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, .12);
}

[data-tema="claro"].cookie-banner-inner .cookie-banner-text strong,
[data-tema="claro"] .cookie-banner-text strong {
    color: #000000;
}

[data-tema="claro"].cookie-banner-inner .cookie-banner-text p,
[data-tema="claro"] .cookie-banner-text p {
    color: #1f2937;
}

[data-tema="claro"] .cookie-banner-text a {
    color: #1a4dff;
}

[data-tema="claro"] .cookie-btn-reject {
    color: #1f2937;
    border-color: rgba(0, 0, 0, .3);
}

[data-tema="claro"] .cookie-btn-reject:hover {
    background: rgba(26, 77, 255, .08);
    border-color: #1a4dff;
    color: #1a4dff;
}

[data-tema="claro"] .cookie-btn-custom {
    color: #1a4dff;
    border-color: #1a4dff;
}

[data-tema="claro"] .cookie-btn-custom:hover {
    background: rgba(26, 77, 255, .1);
}

[data-tema="claro"].cookie-modal-box,
[data-tema="claro"] .cookie-modal-box {
    background: #ffffff;
    border-color: rgba(0, 0, 0, .15);
}

[data-tema="claro"] .cookie-modal-box h3 {
    color: #000000;
}

[data-tema="claro"] .cookie-modal-box > p {
    color: #1f2937;
}

[data-tema="claro"] .cookie-cat {
    border-bottom-color: rgba(0, 0, 0, .1);
}

[data-tema="claro"] .cookie-cat-info strong {
    color: #000000;
}

[data-tema="claro"] .cookie-cat-info small {
    color: #4b5563;
}

[data-tema="claro"] .cookie-cat-status {
    color: #1a4dff;
    background: rgba(26, 77, 255, .08);
    border-color: rgba(26, 77, 255, .3);
}

[data-tema="claro"] .cookie-slider {
    background: rgba(0, 0, 0, .25);
}

[data-tema="claro"] .cookie-slider:before {
    background: #ffffff;
}

[data-tema="claro"] .cookie-switch input:checked + .cookie-slider {
    background: #1a4dff;
}

/* Força tema claro no próprio elemento com data-tema="claro" */
#cookieBanner[data-tema="claro"] .cookie-banner-inner {
    background: #f7f9fc;
}

#cookieBanner[data-tema="claro"] .cookie-banner-text strong {
    color: #000000;
}

#cookieBanner[data-tema="claro"] .cookie-banner-text p {
    color: #1f2937;
}

#cookieModal[data-tema="claro"] .cookie-modal-box {
    background: #ffffff;
}

#cookieModal[data-tema="claro"] .cookie-modal-box h3 {
    color: #000000;
}

#cookieModal[data-tema="claro"] .cookie-modal-box > p {
    color: #1f2937;
}

#cookieModal[data-tema="claro"] .cookie-cat-info strong {
    color: #000000;
}
#cookieModal[data-tema="claro"] .cookie-cat-info small {
    color: #4b5563;
}
#cookieModal[data-tema="claro"] .cookie-cat-info small {
    color: #4b5563;
}

/* ---------------------------------------------------------
   1. HEADER — abre espaço à esquerda SE o hambúrguer estiver visível
   --------------------------------------------------------- */
.header {
    padding-left: var(--gutter) !important;
}

/* Quando o JS adiciona a classe "tem-filtro" no body, o header ganha espaço */
body.tem-filtro .header {
    padding-left: 88px !important;
}

@media (max-width: 720px) {
    body.tem-filtro .header {
        padding-left: 68px !important;
    }
}


/* ---------------------------------------------------------
   2. BOTÃO HAMBÚRGUER — escondido por padrão, aparece com .visivel
   --------------------------------------------------------- */
.header .menu-button {
    position: absolute !important;
    top: 50% !important;
    left: 20px !important;
    right: auto !important;
    transform: translateY(-50%) !important;

    width: 46px !important;
    height: 46px !important;
    display: none !important;             /* ESCONDIDO por padrão */
    place-items: center !important;

    background: rgba(127, 176, 255, .06) !important;
    border: 1px solid rgba(127, 176, 255, .18) !important;
    border-radius: 10px !important;
    color: var(--paper-1) !important;

    cursor: pointer !important;
    z-index: 210 !important;
    transition: all .3s cubic-bezier(.22, 1, .36, 1) !important;
}

/* Quando o JS adicionar .visivel, ELE APARECE */
.header .menu-button.visivel {
    display: grid !important;
}

.header .menu-button:hover {
    background: rgba(127, 176, 255, .14) !important;
    border-color: rgba(127, 176, 255, .45) !important;
    color: var(--paper-0) !important;
    transform: translateY(-50%) scale(1.04) !important;
}

.header .menu-button svg {
    width: 22px !important;
    height: 22px !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
}

@media (max-width: 720px) {
    .header .menu-button {
        left: 14px !important;
        width: 40px !important;
        height: 40px !important;
        border-radius: 8px !important;
    }
    .header .menu-button svg {
        width: 20px !important;
        height: 20px !important;
    }
}


/* ---------------------------------------------------------
   3. GAVETA LATERAL (nav que abre) — limpa e única
   --------------------------------------------------------- */
.header .nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    width: min(400px, 88vw) !important;
    height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 100px 40px !important;
    background: var(--ink-1) !important;
    border-left: none !important;
    border-right: 1px solid var(--line-2) !important;
    box-shadow: 50px 0 120px rgba(0, 0, 0, .85) !important;
    transform: translateX(-105%) !important;
    transition: transform .5s cubic-bezier(.22, 1, .36, 1) !important;
    z-index: 195 !important;
}

.header .nav.open {
    transform: translateX(0) !important;
}

/* ---------------------------------------------------------
   🔤 FONTE DO MENU — troque aqui se quiser outra fonte
   --------------------------------------------------------- */
.header .nav a {
    width: 100% !important;

    /* ===> MUDE A FONTE AQUI: ===> */
    font-family: var(--ff-sans) !important;    /* Inter — moderna. Troque para --ff-display se quiser serifada */
    font-style: normal !important;             /* normal (sem itálico). Mude para italic se preferir */
    /* <=== FIM ===< */

    font-size: 1.6rem !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--paper-0) !important;
    padding: 18px 0 !important;
    border-bottom: 1px solid var(--line-0) !important;
    transition: color .25s, padding-left .25s !important;
}

.header .nav a::before { display: none !important; }

.header .nav a:hover {
    color: var(--blue-3) !important;
    padding-left: 10px !important;
}

.header .nav a.active {
    color: var(--blue-3) !important;
}

/* Botão X (fechar) — só aparece quando o menu está aberto */
.header .nav .nav-close {
    display: none !important;
    position: absolute !important;
    top: 22px !important;
    right: 24px !important;
    width: 40px !important;
    height: 40px !important;
    place-items: center !important;
    color: var(--paper-2) !important;
    border: 1px solid var(--line-1) !important;
    border-radius: 50% !important;
    background: transparent !important;
    cursor: pointer !important;
    transition: all .35s cubic-bezier(.22, 1, .36, 1) !important;
}

.header .nav.open .nav-close {
    display: grid !important;
}

.header .nav .nav-close:hover {
    color: var(--paper-0) !important;
    border-color: var(--blue-1) !important;
    transform: rotate(90deg) !important;
}

@media (max-width: 720px) {
    .header .nav {
        width: 100vw !important;
        padding: 80px 28px 40px !important;
    }
    .header .nav a {
        font-size: 1.4rem !important;
        padding: 16px 0 !important;
    }
}


/* ---------------------------------------------------------
   4. FILTRO DE GÊNERO — botões
   --------------------------------------------------------- */
.gender-filter {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 30px var(--gutter);
    margin-top: 20px;
    flex-wrap: wrap;
}

.btn-gender {
    padding: 10px 24px;
    font-family: var(--ff-sans);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--paper-2);
    background: transparent;
    border: 1px solid var(--line-2);
    border-radius: 99px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-gender:hover {
    border-color: var(--blue-1);
    color: var(--paper-0);
}

.btn-gender.active {
    background: var(--blue-1);
    border-color: var(--blue-1);
    color: #ffffff;
}


/* ---------------------------------------------------------
   5. TEMA CLARO — ajustes no hambúrguer e gaveta
   --------------------------------------------------------- */
[data-tema="claro"] .header .menu-button {
    background: rgba(26, 77, 255, .04) !important;
    border-color: rgba(0, 0, 0, .12) !important;
    color: #1f2937 !important;
}

[data-tema="claro"] .header .menu-button:hover {
    background: rgba(26, 77, 255, .10) !important;
    border-color: #1a4dff !important;
    color: #000000 !important;
}

[data-tema="claro"] .header .nav {
    background: #ffffff !important;
    border-right-color: rgba(0, 0, 0, .15) !important;
}

[data-tema="claro"] .header .nav a {
    color: #000000 !important;
    border-bottom-color: rgba(0, 0, 0, .08) !important;
}

[data-tema="claro"] .header .nav a:hover,
[data-tema="claro"] .header .nav a.active {
    color: #1a4dff !important;
}

[data-tema="claro"] .header .nav .nav-close {
    color: #1f2937 !important;
    border-color: rgba(0, 0, 0, .2) !important;
}

[data-tema="claro"] .btn-gender {
    color: #1f2937;
    border-color: rgba(0, 0, 0, .2);
}

[data-tema="claro"] .btn-gender.active {
    background: #1a4dff;
    color: #ffffff;
    border-color: #1a4dff;
}


/* ---------------------------------------------------------
   1. FILTRO DE GÊNERO — posicionado entre hero e ticker
   --------------------------------------------------------- */
.gender-filter {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 32px var(--gutter) 24px;
    margin: 0;
    flex-wrap: wrap;
    background: transparent;
}

.btn-gender {
    padding: 10px 26px;
    font-family: var(--ff-sans);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--paper-2);
    background: transparent;
    border: 1px solid var(--line-2);
    border-radius: 99px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-gender:hover {
    border-color: var(--blue-1);
    color: var(--paper-0);
    transform: translateY(-1px);
}

.btn-gender.active {
    background: var(--blue-1);
    border-color: var(--blue-1);
    color: #ffffff;
    box-shadow: 0 0 20px rgba(26, 77, 255, .35);
}

/* Tema claro */
[data-tema="claro"] .btn-gender {
    color: #1f2937;
    border-color: rgba(0, 0, 0, 0.2);
}

[data-tema="claro"] .btn-gender.active {
    background: #1a4dff;
    color: #ffffff;
    border-color: #1a4dff;
}

@media (max-width: 720px) {
    .gender-filter {
        padding: 24px 18px 18px;
        gap: 8px;
    }
    .btn-gender {
        padding: 9px 20px;
        font-size: 0.72rem;
    }
}


/* ---------------------------------------------------------
   2. HAMBÚRGUER — escondido por padrão, APARECE SÓ com .visivel
   (usando :not() para vencer qualquer regra antiga)
   --------------------------------------------------------- */

/* Esconde o menu-button em qualquer variação que ele apareça */
.header .menu-button:not(.visivel),
.header .header-actions .menu-button:not(.visivel) {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

/* Mostra o menu-button quando tiver a classe .visivel */
.header .menu-button.visivel,
.header .header-actions .menu-button.visivel {
    display: grid !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;

    position: absolute !important;
    top: 50% !important;
    left: 20px !important;
    right: auto !important;
    transform: translateY(-50%) !important;

    width: 46px !important;
    height: 46px !important;
    place-items: center !important;

    background: rgba(127, 176, 255, .06) !important;
    border: 1px solid rgba(127, 176, 255, .18) !important;
    border-radius: 10px !important;
    color: var(--paper-1) !important;
    cursor: pointer !important;
    z-index: 210 !important;
}

.header .menu-button.visivel:hover {
    background: rgba(127, 176, 255, .14) !important;
    border-color: rgba(127, 176, 255, .45) !important;
    color: var(--paper-0) !important;
}

.header .menu-button.visivel svg {
    width: 22px !important;
    height: 22px !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
}

/* Esconde o hambúrguer quando o body não tem a classe 'tem-filtro' */
body:not(.tem-filtro) .header .menu-button {
    display: none !important;
}

@media (max-width: 720px) {
    .header .menu-button.visivel,
    .header .header-actions .menu-button.visivel {
        left: 14px !important;
        width: 40px !important;
        height: 40px !important;
    }
    .header .menu-button.visivel svg {
        width: 20px !important;
        height: 20px !important;
    }
}

/* Tema claro */
[data-tema="claro"] .header .menu-button.visivel {
    background: rgba(26, 77, 255, .04) !important;
    border-color: rgba(0, 0, 0, .12) !important;
    color: #1f2937 !important;
}

[data-tema="claro"] .header .menu-button.visivel:hover {
    background: rgba(26, 77, 255, .10) !important;
    border-color: #1a4dff !important;
    color: #000000 !important;
}


/* ---------------------------------------------------------
   3. GAVETA LATERAL — garante que fique fechada
   --------------------------------------------------------- */
.header .nav {
    transform: translateX(-105%) !important;
}

.header .nav.open {
    transform: translateX(0) !important;
}

.header .nav .nav-close {
    display: none !important;
}

.header .nav.open .nav-close {
    display: grid !important;
}
/* =========================================================
   🔥 FIX NUCLEAR — HAMBÚRGUER + BOTÕES DE GÊNERO
   Cola no final do style.css
   ========================================================= */

/* 1. FILTRO DE GÊNERO */
.gender-filter {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 32px var(--gutter) 24px;
    flex-wrap: wrap;
}

.btn-gender {
    padding: 10px 26px;
    font-family: var(--ff-sans);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--paper-2);
    background: transparent;
    border: 1px solid var(--line-2);
    border-radius: 99px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-gender:hover {
    border-color: var(--blue-1);
    color: var(--paper-0);
}

.btn-gender.active {
    background: var(--blue-1);
    border-color: var(--blue-1);
    color: #ffffff;
}

@media (max-width: 720px) {
    .gender-filter { padding: 24px 18px 18px; gap: 8px; }
    .btn-gender { padding: 9px 20px; font-size: 0.72rem; }
}

/* 2. HAMBÚRGUER — escondido SEMPRE, SÓ aparece com .visivel */
.header .menu-button,
.header .header-actions .menu-button {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.header .menu-button.visivel,
.header .header-actions .menu-button.visivel {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Tema claro */
[data-tema="claro"] .btn-gender { color: #1f2937; border-color: rgba(0, 0, 0, 0.2); }
[data-tema="claro"] .btn-gender.active { background: #1a4dff; color: #fff; border-color: #1a4dff; }

/* =========================================================
   ✅ AJUSTES FINAIS — Filtro de gênero dentro do Hero
   + Hambúrguer SEM moldura/sombra
   ========================================================= */

/* ---------------------------------------------------------
   1. FILTRO DE GÊNERO — dentro do hero
   --------------------------------------------------------- */
.gender-filter {
    display: flex;
    gap: 10px;
    margin-bottom: 26px;
    flex-wrap: wrap;
    animation: heroRise 1.1s .05s var(--ease-soft) both;
}

.btn-gender {
    padding: 8px 22px;
    font-family: var(--ff-sans);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--paper-2);
    background: transparent;
    border: 1px solid var(--line-2);
    border-radius: 99px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-gender:hover {
    border-color: var(--blue-1);
    color: var(--paper-0);
    transform: translateY(-1px);
}

.btn-gender.active {
    background: var(--blue-1);
    border-color: var(--blue-1);
    color: #ffffff;
    box-shadow: 0 0 20px rgba(26, 77, 255, .35);
}

/* Tema claro */
[data-tema="claro"] .btn-gender {
    color: #1f2937;
    border-color: rgba(0, 0, 0, 0.2);
}

[data-tema="claro"] .btn-gender.active {
    background: #1a4dff;
    color: #ffffff;
    border-color: #1a4dff;
}

@media (max-width: 720px) {
    .gender-filter {
        margin-bottom: 20px;
        gap: 8px;
    }
    .btn-gender {
        padding: 7px 16px;
        font-size: 0.66rem;
    }
}


/* ---------------------------------------------------------
   2. HAMBÚRGUER — SEM MOLDURA, SEM SOMBRA, só o ícone
   --------------------------------------------------------- */
.header .menu-button.visivel,
.header .header-actions .menu-button.visivel {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    color: var(--paper-1) !important;

    position: absolute !important;
    top: 50% !important;
    left: 20px !important;
    right: auto !important;
    transform: translateY(-50%) !important;

    width: 42px !important;
    height: 42px !important;
    display: grid !important;
    place-items: center !important;
    z-index: 210 !important;
    cursor: pointer !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.header .menu-button.visivel:hover {
    color: var(--blue-1) !important;
    background: transparent !important;
}

.header .menu-button.visivel svg {
    width: 26px !important;
    height: 26px !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
}

/* Escondido por padrão */
.header .menu-button:not(.visivel),
.header .header-actions .menu-button:not(.visivel) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

@media (max-width: 720px) {
    .header .menu-button.visivel {
        left: 14px !important;
        width: 38px !important;
        height: 38px !important;
    }
    .header .menu-button.visivel svg {
        width: 24px !important;
        height: 24px !important;
    }
}

/* Tema claro */
[data-tema="claro"] .header .menu-button.visivel {
    color: #1f2937 !important;
    background: transparent !important;
    border: none !important;
}

[data-tema="claro"] .header .menu-button.visivel:hover {
    color: #1a4dff !important;
}
/* =========================================================
   🔨 SOLUÇÃO BRUTA — Gaveta com display none + Botões direita
   ========================================================= */

/* 1. GAVETA TOTALMENTE ESCONDIDA quando fechada */
.header .nav:not(.open) {
    display: none !important;
}

/* 2. GAVETA visível só quando aberta */
.header .nav.open {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    width: min(400px, 88vw) !important;
    height: 100vh !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 100px 40px !important;
    background: var(--ink-1) !important;
    border-right: 1px solid var(--line-2) !important;
    box-shadow: 50px 0 120px rgba(0, 0, 0, .85) !important;
    transform: translateX(0) !important;
    z-index: 195 !important;
}

/* 3. BOTÕES DE GÊNERO — alinhados à direita */
.gender-filter {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 0 24px 0 !important;
    padding: 0 !important;
    flex-wrap: wrap !important;
    animation: heroRise 1.1s .05s var(--ease-soft) both !important;
}

/* Em telas pequenas fica à esquerda */
@media (max-width: 900px) {
    .gender-filter {
        justify-content: flex-start !important;
    }
}

/* =========================================================
   ✅ AJUSTE — Botões mais pra cima/meio + Temas de fonte
   ========================================================= */

/* ---------------------------------------------------------
   1. BOTÕES DE GÊNERO — mais pra cima e centralizados
   --------------------------------------------------------- */
.gender-filter {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 auto 40px auto !important;
    transform: translateY(-80px) !important;
    flex-wrap: wrap !important;
}

@media (max-width: 900px) {
    .gender-filter {
        transform: translateY(-40px) !important;
        margin-bottom: 20px !important;
    }
}

@media (max-width: 600px) {
    .gender-filter {
        transform: translateY(-20px) !important;
        margin-bottom: 10px !important;
    }
}


/* ---------------------------------------------------------
   2. TEMA FEMININO — fonte elegante + paleta suave
   --------------------------------------------------------- */
body.tema-feminino h1,
body.tema-feminino h2,
body.tema-feminino h3,
body.tema-feminino .logo,
body.tema-feminino .product-name,
body.tema-feminino .hero-decoration span,
body.tema-feminino .section-title h2 {
    font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
}

body.tema-feminino h1 {
    font-style: italic !important;
    font-weight: 500 !important;
}

body.tema-feminino .hero h1 span,
body.tema-feminino .section-title h2 span {
    color: #c8618c !important;
}

body.tema-feminino .hero-small,
body.tema-feminino .section-kicker,
body.tema-feminino .product-cat {
    color: #c8618c !important;
}

body.tema-feminino .btn-primary {
    background: #c8618c !important;
    border-color: #c8618c !important;
}

body.tema-feminino .btn-primary:hover {
    background: #a84a70 !important;
    border-color: #a84a70 !important;
}

body.tema-feminino .btn-gender.active {
    background: #c8618c !important;
    border-color: #c8618c !important;
    box-shadow: 0 0 20px rgba(200, 97, 140, .35) !important;
}


/* ---------------------------------------------------------
   3. TEMA MASCULINO — fonte forte + paleta sóbria
   --------------------------------------------------------- */
body.tema-masculino h1,
body.tema-masculino h2,
body.tema-masculino h3,
body.tema-masculino .logo,
body.tema-masculino .product-name,
body.tema-masculino .hero-decoration span,
body.tema-masculino .section-title h2 {
    font-family: 'Oswald', 'Inter', sans-serif !important;
    font-weight: 500 !important;
    font-style: normal !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
}

body.tema-masculino .hero h1 {
    font-size: clamp(2rem, 1.2rem + 4vw, 5rem) !important;
    line-height: 1.05 !important;
}

body.tema-masculino .hero h1 span,
body.tema-masculino .section-title h2 span {
    color: #2a3a4a !important;
    font-weight: 700 !important;
}

body.tema-masculino .hero-small,
body.tema-masculino .section-kicker,
body.tema-masculino .product-cat {
    color: #2a3a4a !important;
}

body.tema-masculino .btn-primary {
    background: #1a1a1a !important;
    border-color: #1a1a1a !important;
}

body.tema-masculino .btn-primary:hover {
    background: #000 !important;
    border-color: #000 !important;
}

body.tema-masculino .btn-gender.active {
    background: #1a1a1a !important;
    border-color: #1a1a1a !important;
    box-shadow: 0 0 20px rgba(26, 26, 26, .35) !important;
}

/* Transição suave ao trocar de tema */
body {
    transition: background-color .4s ease, color .4s ease !important;
}
body h1, body h2, body h3, body .logo, body .product-name {
    transition: font-family .3s ease, color .3s ease !important;
}

/* Botão de gênero ativo — destaque */
.btn-gender.active {
    background: var(--blue-1) !important;
    border-color: var(--blue-1) !important;
    color: #ffffff !important;
    box-shadow: 0 0 20px rgba(26, 77, 255, .35);
}

body.tema-feminino .btn-gender.active {
    background: #c8618c !important;
    border-color: #c8618c !important;
    box-shadow: 0 0 20px rgba(200, 97, 140, .35);
}

body.tema-masculino .btn-gender.active {
    background: #1a1a1a !important;
    border-color: #1a1a1a !important;
    box-shadow: 0 0 20px rgba(26, 26, 26, .35);
}

/* =========================================================
   🎨 BLOCO FINAL — TEMAS POR GÊNERO (claro + escuro)
   Deve ser o ÚLTIMO bloco do arquivo
   ========================================================= */

/* =========================================================
   1. TEMA ESCURO (padrão) — PÁGINA INICIAL
   Já vem do CSS base acima. Não precisa sobrescrever.
   ========================================================= */

/* =========================================================
   2. TEMA CLARO (padrão) — PÁGINA INICIAL
   Já vem das regras [data-tema="claro"] acima. OK.
   ========================================================= */

/* =========================================================
   3. MASCULINO = IGUAL À PÁGINA INICIAL
   Sem overrides — herda tudo do padrão (claro E escuro).
   ========================================================= */
body.tema-masculino .btn-gender.active {
    background: #1a4dff !important;
    border-color: #1a4dff !important;
    color: #fff !important;
    box-shadow: 0 0 20px rgba(26, 77, 255, .35) !important;
}

/* =========================================================
   4. TEMA FEMININO — ESCURO (padrão sem data-tema)
   Fundo escuro vinho + detalhes rosa
   ========================================================= */
body.tema-feminino {
    background-color: #1a0e14 !important;
    color: #f5e6ec !important;
}

body.tema-feminino::before {
    background:
        radial-gradient(1200px 800px at 15% -10%, rgba(200, 97, 140, .12), transparent 60%),
        radial-gradient(900px 700px at 105% 15%, rgba(168, 74, 112, .1), transparent 65%) !important;
}

body.tema-feminino .header {
    background: rgba(26, 14, 20, .88) !important;
    border-bottom-color: rgba(200, 97, 140, .2) !important;
}
body.tema-feminino .header.scrolled {
    background: rgba(26, 14, 20, .96) !important;
}
body.tema-feminino .logo { color: #ffffff !important; }
body.tema-feminino .logo span { color: #e89bb5 !important; }
body.tema-feminino .nav a { color: #e8c4d2 !important; }
body.tema-feminino .nav a:hover,
body.tema-feminino .nav a.active { color: #ffffff !important; }
body.tema-feminino .search-button,
body.tema-feminino .cart-button,
body.tema-feminino .menu-button,
body.tema-feminino .conta-button { color: #e8c4d2 !important; }

body.tema-feminino .hero {
    background:
        radial-gradient(1000px 800px at 78% 10%, rgba(200, 97, 140, .2), transparent 60%),
        radial-gradient(800px 600px at 8% 92%, rgba(168, 74, 112, .18), transparent 65%),
        linear-gradient(180deg, #1a0e14 0%, #241018 60%, #1a0e14 100%) !important;
}
body.tema-feminino .hero h1 { color: #ffffff !important; }
body.tema-feminino .hero h1 span { color: #e89bb5 !important; }
body.tema-feminino .hero-small { color: #e89bb5 !important; border-bottom-color: rgba(200, 97, 140, .3) !important; }
body.tema-feminino .hero-description { color: #e8c4d2 !important; }
body.tema-feminino .hero-decoration span {
    color: transparent !important;
    -webkit-text-stroke: 2px rgba(200, 97, 140, .4) !important;
}

body.tema-feminino .ticker {
    background: #241018 !important;
    border-color: rgba(200, 97, 140, .15) !important;
}
body.tema-feminino .ticker::before { background: linear-gradient(90deg, #241018, transparent) !important; }
body.tema-feminino .ticker::after { background: linear-gradient(270deg, #241018, transparent) !important; }
body.tema-feminino .ticker-track > * { color: #e8c4d2 !important; }

body.tema-feminino h1,
body.tema-feminino h2,
body.tema-feminino h3,
body.tema-feminino h4 { color: #ffffff !important; }
body.tema-feminino p { color: #e8c4d2 !important; }

body.tema-feminino .section-title h2 { color: #ffffff !important; }
body.tema-feminino .section-title h2 span { color: #e89bb5 !important; }
body.tema-feminino .section-title > p,
body.tema-feminino .section-kicker { color: #e89bb5 !important; }

body.tema-feminino .category-card { border-color: rgba(200, 97, 140, .2) !important; }
body.tema-feminino .category-content h3 { color: #ffffff !important; }
body.tema-feminino .category-content p { color: #e8c4d2 !important; }
body.tema-feminino .category-content > span { color: #e89bb5 !important; }
body.tema-feminino .category-content strong { color: #ffffff !important; }

body.tema-feminino .lookbook-item {
    background: #241018 !important;
    border-color: rgba(200, 97, 140, .2) !important;
}
body.tema-feminino .lookbook-item h4 { color: #ffffff !important; }
body.tema-feminino .lookbook-item small { color: #e89bb5 !important; }

body.tema-feminino .pull-quote blockquote { color: #ffffff !important; }
body.tema-feminino .pull-quote cite { color: #e89bb5 !important; }

body.tema-feminino .product-media {
    background: #241018 !important;
    border-color: rgba(200, 97, 140, .2) !important;
}
body.tema-feminino .product-name,
body.tema-feminino .product-name a { color: #ffffff !important; }
body.tema-feminino .product-desc { color: #e8c4d2 !important; }
body.tema-feminino .product-price strong { color: #ffffff !important; }
body.tema-feminino .product-price s { color: #8a6a78 !important; }
body.tema-feminino .product-cat { color: #e89bb5 !important; }

body.tema-feminino .quick-card { border-color: rgba(200, 97, 140, .18) !important; }
body.tema-feminino .quick-card h3 { color: #ffffff !important; }
body.tema-feminino .quick-card p { color: #e8c4d2 !important; }
body.tema-feminino .quick-card span { color: #e89bb5 !important; }

body.tema-feminino .newsletter {
    background: radial-gradient(700px 500px at 20% 30%, rgba(200, 97, 140, .15), transparent 65%), #241018 !important;
    border-color: rgba(200, 97, 140, .2) !important;
}
body.tema-feminino .newsletter h3 { color: #ffffff !important; }
body.tema-feminino .newsletter h3 span { color: #e89bb5 !important; }
body.tema-feminino .newsletter p { color: #e8c4d2 !important; }

body.tema-feminino .final-cta {
    background: radial-gradient(900px 500px at 50% 50%, rgba(200, 97, 140, .18), transparent 65%) !important;
    border-color: rgba(200, 97, 140, .2) !important;
}
body.tema-feminino .final-cta h2 { color: #ffffff !important; }
body.tema-feminino .final-cta h2 span { color: #e89bb5 !important; }
body.tema-feminino .final-cta p { color: #e89bb5 !important; }

body.tema-feminino .footer {
    background: #1a0e14 !important;
    border-top-color: rgba(200, 97, 140, .2) !important;
}
body.tema-feminino .footer-logo { color: #ffffff !important; }
body.tema-feminino .footer-logo span { color: #e89bb5 !important; }
body.tema-feminino .footer-links a { color: #e8c4d2 !important; }
body.tema-feminino .footer > p { color: #8a6a78 !important; border-top-color: rgba(200, 97, 140, .15) !important; }
body.tema-feminino .footer-contato-link { color: #e8c4d2 !important; border-color: rgba(200, 97, 140, .3) !important; }

body.tema-feminino .btn-gender {
    color: #e8c4d2 !important;
    border-color: rgba(200, 97, 140, .4) !important;
}
body.tema-feminino .btn-gender:hover { color: #ffffff !important; border-color: #e89bb5 !important; }
body.tema-feminino .btn-gender.active {
    background: #c8618c !important;
    border-color: #c8618c !important;
    color: #ffffff !important;
    box-shadow: 0 0 20px rgba(200, 97, 140, .35) !important;
}
body.tema-feminino .btn-primary {
    background: #c8618c !important;
    border-color: #c8618c !important;
    color: #ffffff !important;
}
body.tema-feminino .btn-primary:hover {
    background: #a84a70 !important;
    border-color: #a84a70 !important;
}
body.tema-feminino .btn-secondary {
    color: #ffffff !important;
    border-color: rgba(200, 97, 140, .4) !important;
}

/* =========================================================
   5. TEMA FEMININO — CLARO ([data-tema="claro"])
   Fundo rosado claro
   ========================================================= */
[data-tema="claro"] body.tema-feminino {
    background-color: #fdf5f8 !important;
    color: #3a1f2b !important;
}

[data-tema="claro"] body.tema-feminino::before {
    background:
        radial-gradient(1200px 800px at 15% -10%, rgba(200, 97, 140, .1), transparent 60%),
        radial-gradient(900px 700px at 105% 15%, rgba(168, 74, 112, .08), transparent 65%) !important;
}

[data-tema="claro"] body.tema-feminino .header {
    background: rgba(253, 245, 248, .92) !important;
    border-bottom-color: rgba(200, 97, 140, .2) !important;
}
[data-tema="claro"] body.tema-feminino .logo { color: #3a1f2b !important; }
[data-tema="claro"] body.tema-feminino .logo span { color: #c8618c !important; }
[data-tema="claro"] body.tema-feminino .nav a { color: #5a3a48 !important; }
[data-tema="claro"] body.tema-feminino .nav a:hover,
[data-tema="claro"] body.tema-feminino .nav a.active { color: #3a1f2b !important; }
[data-tema="claro"] body.tema-feminino .search-button,
[data-tema="claro"] body.tema-feminino .cart-button,
[data-tema="claro"] body.tema-feminino .menu-button,
[data-tema="claro"] body.tema-feminino .conta-button { color: #5a3a48 !important; }

[data-tema="claro"] body.tema-feminino .hero {
    background:
        radial-gradient(1000px 800px at 78% 10%, rgba(200, 97, 140, .14), transparent 60%),
        radial-gradient(800px 600px at 8% 92%, rgba(168, 74, 112, .1), transparent 65%),
        linear-gradient(180deg, #fdf5f8 0%, #fae8ef 60%, #fdf5f8 100%) !important;
}
[data-tema="claro"] body.tema-feminino .hero h1 { color: #3a1f2b !important; }
[data-tema="claro"] body.tema-feminino .hero h1 span { color: #c8618c !important; }
[data-tema="claro"] body.tema-feminino .hero-small { color: #c8618c !important; border-bottom-color: rgba(200, 97, 140, .3) !important; }
[data-tema="claro"] body.tema-feminino .hero-description { color: #5a3a48 !important; }
[data-tema="claro"] body.tema-feminino .hero-decoration span {
    color: transparent !important;
    -webkit-text-stroke: 2px rgba(200, 97, 140, .4) !important;
}

[data-tema="claro"] body.tema-feminino .ticker {
    background: #fae8ef !important;
    border-color: rgba(200, 97, 140, .15) !important;
}
[data-tema="claro"] body.tema-feminino .ticker::before { background: linear-gradient(90deg, #fae8ef, transparent) !important; }
[data-tema="claro"] body.tema-feminino .ticker::after { background: linear-gradient(270deg, #fae8ef, transparent) !important; }
[data-tema="claro"] body.tema-feminino .ticker-track > * { color: #5a3a48 !important; }

[data-tema="claro"] body.tema-feminino h1,
[data-tema="claro"] body.tema-feminino h2,
[data-tema="claro"] body.tema-feminino h3,
[data-tema="claro"] body.tema-feminino h4 { color: #3a1f2b !important; }
[data-tema="claro"] body.tema-feminino p { color: #5a3a48 !important; }

[data-tema="claro"] body.tema-feminino .section-title h2 { color: #3a1f2b !important; }
[data-tema="claro"] body.tema-feminino .section-title h2 span { color: #c8618c !important; }
[data-tema="claro"] body.tema-feminino .section-title > p,
[data-tema="claro"] body.tema-feminino .section-kicker { color: #c8618c !important; }

[data-tema="claro"] body.tema-feminino .category-card { border-color: rgba(200, 97, 140, .2) !important; }
[data-tema="claro"] body.tema-feminino .category-content h3 { color: #3a1f2b !important; }
[data-tema="claro"] body.tema-feminino .category-content p { color: #5a3a48 !important; }
[data-tema="claro"] body.tema-feminino .category-content > span { color: #c8618c !important; }
[data-tema="claro"] body.tema-feminino .category-content strong { color: #3a1f2b !important; }

[data-tema="claro"] body.tema-feminino .lookbook-item {
    background: #fae8ef !important;
    border-color: rgba(200, 97, 140, .2) !important;
}
[data-tema="claro"] body.tema-feminino .lookbook-item h4 { color: #3a1f2b !important; }
[data-tema="claro"] body.tema-feminino .lookbook-item small { color: #c8618c !important; }

[data-tema="claro"] body.tema-feminino .pull-quote blockquote { color: #3a1f2b !important; }
[data-tema="claro"] body.tema-feminino .pull-quote cite { color: #c8618c !important; }

[data-tema="claro"] body.tema-feminino .product-media {
    background: #fae8ef !important;
    border-color: rgba(200, 97, 140, .2) !important;
}
[data-tema="claro"] body.tema-feminino .product-name,
[data-tema="claro"] body.tema-feminino .product-name a { color: #3a1f2b !important; }
[data-tema="claro"] body.tema-feminino .product-desc { color: #5a3a48 !important; }
[data-tema="claro"] body.tema-feminino .product-price strong { color: #3a1f2b !important; }
[data-tema="claro"] body.tema-feminino .product-price s { color: #8a6a78 !important; }
[data-tema="claro"] body.tema-feminino .product-cat { color: #c8618c !important; }

[data-tema="claro"] body.tema-feminino .quick-card { border-color: rgba(200, 97, 140, .18) !important; }
[data-tema="claro"] body.tema-feminino .quick-card h3 { color: #3a1f2b !important; }
[data-tema="claro"] body.tema-feminino .quick-card p { color: #5a3a48 !important; }
[data-tema="claro"] body.tema-feminino .quick-card span { color: #c8618c !important; }

[data-tema="claro"] body.tema-feminino .newsletter {
    background: radial-gradient(700px 500px at 20% 30%, rgba(200, 97, 140, .12), transparent 65%), #fae8ef !important;
    border-color: rgba(200, 97, 140, .2) !important;
}
[data-tema="claro"] body.tema-feminino .newsletter h3 { color: #3a1f2b !important; }
[data-tema="claro"] body.tema-feminino .newsletter h3 span { color: #c8618c !important; }
[data-tema="claro"] body.tema-feminino .newsletter p { color: #5a3a48 !important; }

[data-tema="claro"] body.tema-feminino .final-cta {
    background: radial-gradient(900px 500px at 50% 50%, rgba(200, 97, 140, .12), transparent 65%) !important;
    border-color: rgba(200, 97, 140, .2) !important;
}
[data-tema="claro"] body.tema-feminino .final-cta h2 { color: #3a1f2b !important; }
[data-tema="claro"] body.tema-feminino .final-cta h2 span { color: #c8618c !important; }
[data-tema="claro"] body.tema-feminino .final-cta p { color: #c8618c !important; }

[data-tema="claro"] body.tema-feminino .footer {
    background: #fae8ef !important;
    border-top-color: rgba(200, 97, 140, .2) !important;
}
[data-tema="claro"] body.tema-feminino .footer-logo { color: #3a1f2b !important; }
[data-tema="claro"] body.tema-feminino .footer-logo span { color: #c8618c !important; }
[data-tema="claro"] body.tema-feminino .footer-links a { color: #5a3a48 !important; }
[data-tema="claro"] body.tema-feminino .footer > p { color: #8a6a78 !important; border-top-color: rgba(200, 97, 140, .15) !important; }
[data-tema="claro"] body.tema-feminino .footer-contato-link { color: #5a3a48 !important; border-color: rgba(200, 97, 140, .3) !important; }

[data-tema="claro"] body.tema-feminino .btn-gender {
    color: #5a3a48 !important;
    border-color: rgba(200, 97, 140, .4) !important;
}
[data-tema="claro"] body.tema-feminino .btn-gender:hover { color: #3a1f2b !important; border-color: #c8618c !important; }
[data-tema="claro"] body.tema-feminino .btn-gender.active {
    background: #c8618c !important;
    border-color: #c8618c !important;
    color: #ffffff !important;
    box-shadow: 0 0 20px rgba(200, 97, 140, .3) !important;
}
[data-tema="claro"] body.tema-feminino .btn-primary {
    background: #c8618c !important;
    border-color: #c8618c !important;
    color: #ffffff !important;
}
[data-tema="claro"] body.tema-feminino .btn-primary:hover {
    background: #a84a70 !important;
    border-color: #a84a70 !important;
}
[data-tema="claro"] body.tema-feminino .btn-secondary {
    color: #3a1f2b !important;
    border-color: rgba(200, 97, 140, .4) !important;
}

/* =========================================================
   FIM — TEMAS POR GÊNERO (claro + escuro)
   ========================================================= */
   /* =========================================================
   🌸 TEMA FEMININO — MODO ESCURO
   Fundo vinho escuro + detalhes rosa
   (Ativo quando o site está no tema escuro padrão)
   ========================================================= */

/* Body e fundo geral */
body.tema-feminino:not([data-tema="claro"]) {
    background-color: #1a0e14 !important;
    color: #f5e6ec !important;
}

body.tema-feminino {
    background-color: #1a0e14 !important;
}

/* Remove o fundo claro caso esteja sobrescrevendo */
html:not([data-tema="claro"]) body.tema-feminino {
    background-color: #1a0e14 !important;
    color: #f5e6ec !important;
}

/* Efeito de fundo */
body.tema-feminino::before {
    background:
        radial-gradient(1200px 800px at 15% -10%, rgba(200, 97, 140, .15), transparent 60%),
        radial-gradient(900px 700px at 105% 15%, rgba(168, 74, 112, .12), transparent 65%),
        radial-gradient(1100px 900px at 50% 120%, rgba(200, 97, 140, .08), transparent 70%) !important;
}

/* HEADER */
body.tema-feminino .header {
    background: rgba(26, 14, 20, .88) !important;
    border-bottom-color: rgba(200, 97, 140, .2) !important;
}
body.tema-feminino .header.scrolled {
    background: rgba(26, 14, 20, .96) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .6) !important;
}
body.tema-feminino .logo { color: #ffffff !important; }
body.tema-feminino .logo span { color: #e89bb5 !important; }
body.tema-feminino .nav a { color: #e8c4d2 !important; }
body.tema-feminino .nav a:hover,
body.tema-feminino .nav a.active { color: #ffffff !important; }
body.tema-feminino .search-button,
body.tema-feminino .cart-button,
body.tema-feminino .menu-button,
body.tema-feminino .conta-button { color: #e8c4d2 !important; }
body.tema-feminino .search-button:hover,
body.tema-feminino .cart-button:hover,
body.tema-feminino .menu-button:hover {
    color: #ffffff !important;
    background: rgba(200, 97, 140, .12) !important;
    border-color: rgba(200, 97, 140, .4) !important;
}

/* HERO */
body.tema-feminino .hero {
    background:
        radial-gradient(1000px 800px at 78% 10%, rgba(200, 97, 140, .22), transparent 60%),
        radial-gradient(800px 600px at 8% 92%, rgba(168, 74, 112, .2), transparent 65%),
        linear-gradient(180deg, #1a0e14 0%, #241018 60%, #1a0e14 100%) !important;
}
body.tema-feminino .hero h1 { color: #ffffff !important; }
body.tema-feminino .hero h1 span { color: #e89bb5 !important; }
body.tema-feminino .hero-small {
    color: #e89bb5 !important;
    border-bottom-color: rgba(200, 97, 140, .35) !important;
}
body.tema-feminino .hero-description { color: #e8c4d2 !important; }
body.tema-feminino .hero-decoration span {
    color: transparent !important;
    -webkit-text-stroke: 2px rgba(200, 97, 140, .45) !important;
    opacity: 1 !important;
}
body.tema-feminino .hero::after {
    color: #8a6a78 !important;
}

/* TICKER */
body.tema-feminino .ticker {
    background: #241018 !important;
    border-color: rgba(200, 97, 140, .15) !important;
}
body.tema-feminino .ticker::before { background: linear-gradient(90deg, #241018, transparent) !important; }
body.tema-feminino .ticker::after  { background: linear-gradient(270deg, #241018, transparent) !important; }
body.tema-feminino .ticker-track > * { color: #e8c4d2 !important; }

/* TÍTULOS E TEXTOS */
body.tema-feminino h1,
body.tema-feminino h2,
body.tema-feminino h3,
body.tema-feminino h4,
body.tema-feminino h5,
body.tema-feminino h6 { color: #ffffff !important; }
body.tema-feminino p { color: #e8c4d2 !important; }
body.tema-feminino .section-title h2 { color: #ffffff !important; }
body.tema-feminino .section-title h2 span { color: #e89bb5 !important; }
body.tema-feminino .section-title > p,
body.tema-feminino .section-kicker { color: #e89bb5 !important; }
body.tema-feminino .section-kicker span { color: #8a6a78 !important; }

/* CATEGORIAS */
body.tema-feminino .category-card { border-color: rgba(200, 97, 140, .22) !important; }
body.tema-feminino .category-content h3 { color: #ffffff !important; }
body.tema-feminino .category-content p { color: #e8c4d2 !important; }
body.tema-feminino .category-content > span { color: #e89bb5 !important; }
body.tema-feminino .category-content strong { color: #ffffff !important; }

/* LOOKBOOK */
body.tema-feminino .lookbook-item {
    background: #241018 !important;
    border-color: rgba(200, 97, 140, .22) !important;
}
body.tema-feminino .lookbook-item h4 { color: #ffffff !important; }
body.tema-feminino .lookbook-item small { color: #e89bb5 !important; }

/* PULL-QUOTE */
body.tema-feminino .pull-quote blockquote { color: #ffffff !important; }
body.tema-feminino .pull-quote cite { color: #e89bb5 !important; }

/* CARDS DE PRODUTO */
body.tema-feminino .product-media {
    background: #241018 !important;
    border-color: rgba(200, 97, 140, .22) !important;
}
body.tema-feminino .product-name,
body.tema-feminino .product-name a { color: #ffffff !important; }
body.tema-feminino .product-desc { color: #e8c4d2 !important; }
body.tema-feminino .product-price strong { color: #ffffff !important; }
body.tema-feminino .product-price s { color: #8a6a78 !important; }
body.tema-feminino .product-cat { color: #e89bb5 !important; }

/* QUICK CATEGORIES */
body.tema-feminino .quick-card { border-color: rgba(200, 97, 140, .18) !important; }
body.tema-feminino .quick-card h3 { color: #ffffff !important; }
body.tema-feminino .quick-card p { color: #e8c4d2 !important; }
body.tema-feminino .quick-card span { color: #e89bb5 !important; }

/* NEWSLETTER */
body.tema-feminino .newsletter {
    background: radial-gradient(700px 500px at 20% 30%, rgba(200, 97, 140, .18), transparent 65%), #241018 !important;
    border-color: rgba(200, 97, 140, .22) !important;
}
body.tema-feminino .newsletter h3 { color: #ffffff !important; }
body.tema-feminino .newsletter h3 span { color: #e89bb5 !important; }
body.tema-feminino .newsletter p { color: #e8c4d2 !important; }
body.tema-feminino .newsletter-form { border-bottom-color: rgba(200, 97, 140, .35) !important; }
body.tema-feminino .newsletter-form input { color: #ffffff !important; }
body.tema-feminino .newsletter-form button { color: #ffffff !important; }

/* FINAL CTA */
body.tema-feminino .final-cta {
    background: radial-gradient(900px 500px at 50% 50%, rgba(200, 97, 140, .2), transparent 65%) !important;
    border-color: rgba(200, 97, 140, .22) !important;
}
body.tema-feminino .final-cta h2 { color: #ffffff !important; }
body.tema-feminino .final-cta h2 span { color: #e89bb5 !important; }
body.tema-feminino .final-cta p { color: #e89bb5 !important; }

/* FOOTER */
body.tema-feminino .footer {
    background: #1a0e14 !important;
    border-top-color: rgba(200, 97, 140, .2) !important;
}
body.tema-feminino .footer-logo { color: #ffffff !important; }
body.tema-feminino .footer-logo span { color: #e89bb5 !important; }
body.tema-feminino .footer-links a { color: #e8c4d2 !important; }
body.tema-feminino .footer > p {
    color: #8a6a78 !important;
    border-top-color: rgba(200, 97, 140, .15) !important;
}
body.tema-feminino .footer-contato-link {
    color: #e8c4d2 !important;
    border-color: rgba(200, 97, 140, .3) !important;
}

/* BOTÕES */
body.tema-feminino .btn-gender {
    color: #e8c4d2 !important;
    border-color: rgba(200, 97, 140, .4) !important;
    background: transparent !important;
}
body.tema-feminino .btn-gender:hover {
    color: #ffffff !important;
    border-color: #e89bb5 !important;
}
body.tema-feminino .btn-gender.active {
    background: #c8618c !important;
    border-color: #c8618c !important;
    color: #ffffff !important;
    box-shadow: 0 0 20px rgba(200, 97, 140, .4) !important;
}
body.tema-feminino .btn-primary {
    background: #c8618c !important;
    border-color: #c8618c !important;
    color: #ffffff !important;
}
body.tema-feminino .btn-primary:hover {
    background: #a84a70 !important;
    border-color: #a84a70 !important;
}
body.tema-feminino .btn-secondary {
    color: #ffffff !important;
    border-color: rgba(200, 97, 140, .45) !important;
    background: transparent !important;
}
body.tema-feminino .btn-secondary:hover {
    background: rgba(200, 97, 140, .12) !important;
    border-color: #e89bb5 !important;
}

/* SCROLLBAR (opcional, pra combinar) */
body.tema-feminino ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #c8618c, #a84a70);
    border-color: #1a0e14;
}

/* =========================================================
   FIM — FEMININO NO MODO ESCURO
   ========================================================= */

   /* =========================================================
   🔄 INVERTER INICIAL ↔ MASCULINO
   - Cores trocadas entre os dois
   - Masculino com a fonte da Inicial (Playfair italic)
   ========================================================= */

/* ---------------------------------------------------------
   1. INICIAL (padrão) = CORES do Masculino (cinza-azulado)
   --------------------------------------------------------- */
body:not(.tema-masculino):not(.tema-feminino) .hero h1 span,
body:not(.tema-masculino):not(.tema-feminino) .section-title h2 span,
body:not(.tema-masculino):not(.tema-feminino) .category-content strong {
    color: #2a3a4a !important;
    font-style: normal !important;
    font-weight: 700 !important;
}

body:not(.tema-masculino):not(.tema-feminino) .logo span {
    color: #2a3a4a !important;
}

/* ---------------------------------------------------------
   2. MASCULINO = CORES da Inicial + FONTE da Inicial
   --------------------------------------------------------- */

/* 🖋️ Fonte Playfair italic (igual à inicial) */
body.tema-masculino h1,
body.tema-masculino h2,
body.tema-masculino h3,
body.tema-masculino h4,
body.tema-masculino h5,
body.tema-masculino h6,
body.tema-masculino .logo,
body.tema-masculino .product-name,
body.tema-masculino .section-title h2,
body.tema-masculino .hero-decoration span,
body.tema-masculino .category-content h3,
body.tema-masculino .lookbook-item h4,
body.tema-masculino .quick-card h3,
body.tema-masculino .newsletter h3,
body.tema-masculino .final-cta h2,
body.tema-masculino .footer-logo,
body.tema-masculino .pull-quote blockquote,
body.tema-masculino .cart-summary-title,
body.tema-masculino .hero h1 {
    font-family: 'Playfair Display', 'Times New Roman', Georgia, serif !important;
    font-style: italic !important;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: -0.02em !important;
}

/* Hero h1 no tamanho grande (igual à inicial) */
body.tema-masculino .hero h1 {
    font-size: var(--fs-h1) !important;
    line-height: 0.94 !important;
    color: #ffffff !important;
}

/* 🎨 Cores azuis brilhantes (cor da inicial) */
body.tema-masculino .hero h1 span,
body.tema-masculino .section-title h2 span {
    color: #7fb0ff !important;
    font-style: normal !important;
    font-weight: 700 !important;
}

body.tema-masculino .logo {
    font-style: italic !important;
    text-transform: none !important;
}

body.tema-masculino .logo span {
    color: #7fb0ff !important;
    font-style: normal !important;
}

/* =========================================================
   🌞 MASCULINO NO MODO CLARO — CORES LEGÍVEIS
   Azul escuro para contraste com fundo claro
   ========================================================= */

[data-tema="claro"] body.tema-masculino .hero h1 span,
[data-tema="claro"] body.tema-masculino .section-title h2 span,
[data-tema="claro"] body.tema-masculino .category-content strong {
    color: #0a2fa8 !important;
}

[data-tema="claro"] body.tema-masculino .logo {
    color: #0a0e1a !important;
}

[data-tema="claro"] body.tema-masculino .logo span {
    color: #0a2fa8 !important;
}

[data-tema="claro"] body.tema-masculino .hero-small,
[data-tema="claro"] body.tema-masculino .section-kicker,
[data-tema="claro"] body.tema-masculino .product-cat,
[data-tema="claro"] body.tema-masculino .section-title > p {
    color: #0a2fa8 !important;
}

[data-tema="claro"] body.tema-masculino .hero h1 {
    color: #0a0e1a !important;
}

[data-tema="claro"] body.tema-masculino .btn-gender {
    color: #1f2937 !important;
    border-color: rgba(10, 20, 50, .3) !important;
}

[data-tema="claro"] body.tema-masculino .btn-gender.active {
    background: #1a4dff !important;
    border-color: #1a4dff !important;
    color: #ffffff !important;
    box-shadow: 0 0 20px rgba(26, 77, 255, .25) !important;
}

[data-tema="claro"] body.tema-masculino .btn-primary {
    background: #1a4dff !important;
    border-color: #1a4dff !important;
    color: #ffffff !important;
}

[data-tema="claro"] body.tema-masculino .btn-secondary {
    color: #0a0e1a !important;
    border-color: rgba(10, 20, 50, .35) !important;
}

[data-tema="claro"] body.tema-masculino .hero-decoration span {
    color: transparent !important;
    -webkit-text-stroke: 2px rgba(10, 47, 168, .35) !important;
    opacity: 1 !important;
}

[data-tema="claro"] body.tema-masculino .hero-description {
    color: #1f2937 !important;
}

[data-tema="claro"] body.tema-masculino .category-content > span,
[data-tema="claro"] body.tema-masculino .lookbook-item small,
[data-tema="claro"] body.tema-masculino .quick-card span,
[data-tema="claro"] body.tema-masculino .pull-quote cite {
    color: #0a2fa8 !important;
}

[data-tema="claro"] body.tema-masculino .category-content h3,
[data-tema="claro"] body.tema-masculino .lookbook-item h4,
[data-tema="claro"] body.tema-masculino .quick-card h3,
[data-tema="claro"] body.tema-masculino .pull-quote blockquote,
[data-tema="claro"] body.tema-masculino .product-name,
[data-tema="claro"] body.tema-masculino .product-price strong,
[data-tema="claro"] body.tema-masculino .newsletter h3,
[data-tema="claro"] body.tema-masculino .final-cta h2,
[data-tema="claro"] body.tema-masculino .footer-logo {
    color: #0a0e1a !important;
}

[data-tema="claro"] body.tema-masculino .newsletter h3 span,
[data-tema="claro"] body.tema-masculino .final-cta h2 span {
    color: #0a2fa8 !important;
}

[data-tema="claro"] body.tema-masculino .category-content p,
[data-tema="claro"] body.tema-masculino .quick-card p,
[data-tema="claro"] body.tema-masculino .product-desc,
[data-tema="claro"] body.tema-masculino .newsletter p {
    color: #1f2937 !important;
}

[data-tema="claro"] body.tema-masculino .footer-links a {
    color: #1f2937 !important;
}
/* =========================================================
   FORÇA O BOTÃO "VER DESTAQUES" A SER PRETO NA PÁGINA INICIAL
   ========================================================= */

/* No tema escuro */
body:not(.tema-masculino):not(.tema-feminino) .hero-buttons .btn-primary {
    background: #111111 !important;
    border-color: #111111 !important;
    color: #ffffff !important;
}
body:not(.tema-masculino):not(.tema-feminino) .hero-buttons .btn-primary:hover {
    background: #000000 !important;
    border-color: #000000 !important;
}

/* No tema claro (o que você está usando na print) */
[data-tema="claro"] body:not(.tema-masculino):not(.tema-feminino) .hero-buttons .btn-primary {
    background: #111111 !important;
    border-color: #111111 !important;
    color: #ffffff !important;
}
[data-tema="claro"] body:not(.tema-masculino):not(.tema-feminino) .hero-buttons .btn-primary:hover {
    background: #000000 !important;
    border-color: #000000 !important;
}

/* Mantém o azul no tema masculino */
body.tema-masculino .hero-buttons .btn-primary,
[data-tema="claro"] body.tema-masculino .hero-buttons .btn-primary {
    background: var(--blue-1) !important;
    border-color: var(--blue-1) !important;
    color: #ffffff !important;
}
body.tema-masculino .hero-buttons .btn-primary:hover,
[data-tema="claro"] body.tema-masculino .hero-buttons .btn-primary:hover {
    background: var(--blue-0) !important;
    border-color: var(--blue-0) !important;
}

/* =========================================================
   TEXTO DE FUNDO DO HERO (SEYNCLOTHING GIGANTE)
   ========================================================= */

/* 1. Padrão e Masculino — Contorno Azul */
.hero-decoration span {
    color: transparent !important;
    -webkit-text-stroke: 2px var(--blue-2) !important;
    opacity: 0.8 !important;
}

/* No tema claro, o azul fica um pouco mais escuro pra aparecer bem */
[data-tema="claro"] .hero-decoration span {
    -webkit-text-stroke: 2px rgba(26, 77, 255, 0.45) !important;
}

/* Masculino (garante que o azul se mantenha) */
body.tema-masculino .hero-decoration span,
[data-tema="claro"] body.tema-masculino .hero-decoration span {
    -webkit-text-stroke: 2px var(--blue-2) !important;
}

/* 2. Feminino — Contorno Rosa */
body.tema-feminino .hero-decoration span {
    -webkit-text-stroke: 2px #c8618c !important; /* Rosa escuro */
    opacity: 0.9 !important;
}

/* Feminino no tema claro */
[data-tema="claro"] body.tema-feminino .hero-decoration span {
    -webkit-text-stroke: 2px rgba(200, 97, 140, 0.6) !important;
}