/* ==========================================================================
   R3X — Interações complementares
   Camada adicional: não substitui estilos existentes nem animacoes.css.
   Movimento (transform/animation) só roda quando o usuário não pediu
   movimento reduzido.
   ========================================================================== */

/* ---------- Estados e foco (sem movimento) ---------- */

header { transition: box-shadow var(--motion-standard) ease; }
header.is-scrolled { box-shadow: 0 6px 18px rgba(0, 0, 0, .28); }

/* Seção atual no menu */
.menu a[aria-current="true"] {
    color: var(--r3x-red);
    border-bottom-color: var(--r3x-red);
}

.cart-open:focus-visible,
.cart-close:focus-visible,
.qty-button:focus-visible,
.remove-item:focus-visible {
    outline: 3px solid rgba(228, 0, 22, .45);
    outline-offset: 2px;
    border-radius: 4px;
}

.search { transition: border-color var(--motion-fast) ease, background var(--motion-fast) ease; }
.search:focus { background: #222; }
.search.is-filled { border-color: var(--r3x-red); }

/* Cards: faixa vermelha de destaque no hover/foco */
.card::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--r3x-red);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--motion-standard) var(--motion-ease);
    pointer-events: none;
}
.card:focus-within {
    border-color: #d4d4d4;
    box-shadow: 0 9px 22px rgba(0, 0, 0, .11);
}
.card:focus-within::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
    .card:hover::after { transform: scaleX(1); }
}
.card[data-price-pending="true"]::after { display: none; }

/* Botões */
.product-action {
    transition: background var(--motion-fast) ease, border-color var(--motion-fast) ease,
                filter var(--motion-fast) ease, transform var(--motion-fast) var(--motion-ease);
}
.checkout-button {
    transition: filter var(--motion-fast) ease, transform var(--motion-fast) var(--motion-ease);
}
.btn { transition: filter var(--motion-fast) ease, transform var(--motion-fast) var(--motion-ease); }
.checkout-button:focus-visible { outline: 3px solid rgba(228, 0, 22, .45); outline-offset: 3px; }
.btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.qty-button,
.cart-close,
.remove-item {
    transition: border-color var(--motion-fast) ease, color var(--motion-fast) ease,
                background var(--motion-fast) ease, transform var(--motion-fast) var(--motion-ease);
}

/* Seletor de tamanho: escolhido e erro */
.product-size-control select {
    transition: border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}
.product-size-control select:has(option:checked:not([value=""])) {
    border-color: #111;
    box-shadow: 0 0 0 1px #111;
}
.product-size-control:has(.product-size-error:not([hidden])) select {
    border-color: #b90013;
    box-shadow: 0 0 0 2px rgba(228, 0, 22, .18);
}

/* Filtros ativos */
.catalog-filter-field select {
    transition: border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease,
                background var(--motion-fast) ease;
}
.catalog-filter-field select.is-filtered {
    border-color: var(--r3x-red);
    box-shadow: inset 3px 0 0 var(--r3x-red);
    background: #fff7f8;
    font-weight: 700;
}
#clearCatalogFilters { transition: opacity var(--motion-fast) ease, color var(--motion-fast) ease; }
#clearCatalogFilters.is-idle { opacity: .5; }
#clearCatalogFilters[data-count]:not([data-count="0"])::after { content: " (" attr(data-count) ")"; }
.catalog-results-status,
.search-results-status { width: fit-content; border-radius: 3px; }

/* Foco programático em títulos de visão (não mostrar anel) */
#productName[tabindex="-1"]:focus,
#categoryTitle[tabindex="-1"]:focus { outline: none; }

/* Bloqueio de rolagem com carrinho aberto */
body.r3x-scroll-lock { overflow: hidden; }

/* FAQ: indicador de aberto/fechado */
.faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 32px;
    list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: "+";
    flex: 0 0 auto;
    color: var(--r3x-red);
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
}
.faq details[open] summary::after { content: "−"; }
.faq summary:focus-visible { outline: 2px solid var(--r3x-red); outline-offset: 4px; }

/* Aviso "adicionado ao carrinho" */
.r3x-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.r3x-toast {
    position: fixed;
    z-index: 1500;
    left: 50%;
    bottom: 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: calc(100% - 32px);
    padding: 12px 14px 12px 16px;
    border-left: 4px solid var(--r3x-red);
    border-radius: 6px;
    background: var(--r3x-black);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%);
    transition: opacity var(--motion-standard) ease, visibility 0s linear var(--motion-standard);
}
.r3x-toast.is-visible {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}
.r3x-toast button {
    min-height: 40px;
    padding: 0 4px;
    border: 0;
    background: none;
    color: #fff;
    font: inherit;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.r3x-toast button:hover { color: #ff6b79; }
.r3x-toast button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 520px) {
    .r3x-toast { bottom: 14px; width: calc(100% - 28px); justify-content: space-between; }
}

/* ---------- Movimento (somente sem preferência por movimento reduzido) ---------- */

@media (prefers-reduced-motion: no-preference) {

    @keyframes r3xFade { from { opacity: 0; } to { opacity: 1; } }
    @keyframes r3xViewIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
    @keyframes r3xPanelIn { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
    @keyframes r3xSheetIn { from { transform: translateY(100%); } to { transform: none; } }
    @keyframes r3xCardIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
    @keyframes r3xBump { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } }
    @keyframes r3xPulse { 0% { background-color: rgba(228, 0, 22, .18); } 100% { background-color: transparent; } }
    @keyframes r3xShake {
        0%, 100% { transform: translateX(0); }
        20% { transform: translateX(-6px); }
        40% { transform: translateX(5px); }
        60% { transform: translateX(-4px); }
        80% { transform: translateX(2px); }
    }
    @keyframes r3xFadeDown { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

    /* Abertura de produto e categoria */
    .product-view:not([hidden]),
    .category-view:not([hidden]) { animation: r3xViewIn 360ms var(--motion-ease) backwards; }
    .product-view:not([hidden]) .product-info { animation: r3xViewIn 420ms var(--motion-ease) 80ms backwards; }

    /* Carrinho e diálogo de ajuda */
    .cart-modal:not([hidden]) { animation: r3xFade 200ms ease backwards; }
    .cart-modal:not([hidden]) .cart-panel { animation: r3xPanelIn 280ms var(--motion-ease) backwards; }
    .help-dialog[open] { animation: r3xPanelIn 260ms var(--motion-ease) backwards; }
    .help-dialog[open]::backdrop { animation: r3xFade 200ms ease backwards; }
    @media (max-width: 520px) {
        .cart-modal:not([hidden]) .cart-panel { animation-name: r3xSheetIn; }
    }

    /* Cards reaparecendo após busca/filtro */
    .grid.r3x-refresh > .card:not([hidden]) {
        animation: r3xCardIn 380ms var(--motion-ease) calc(var(--r3x-i, 0) * 45ms) backwards;
    }

    /* Feedbacks */
    .cart-open.r3x-bump { animation: r3xBump 420ms var(--motion-ease); }
    .r3x-pulse { animation: r3xPulse 900ms ease-out; }
    .r3x-shake { animation: r3xShake 380ms ease; }
    .product-size-error:not([hidden]) { animation: r3xFadeDown 220ms ease backwards; }

    /* Toast */
    .r3x-toast {
        transform: translate(-50%, 16px);
        transition: opacity var(--motion-standard) ease, transform var(--motion-standard) var(--motion-ease),
                    visibility 0s linear var(--motion-standard);
    }
    .r3x-toast.is-visible { transform: translate(-50%, 0); }

    /* Microinterações de toque/clique */
    .product-action:active,
    .checkout-button:active,
    .btn:active { transform: scale(.98); }
    .qty-button:active { transform: scale(.9); }
    .cart-close:hover { transform: rotate(90deg); }
    @media (hover: hover) and (pointer: fine) {
        .btn:hover { transform: translateY(-1px); }
    }
}


/* ==========================================================================
   DIREÇÃO EDITORIAL — streetwear premium (R3X)
   Camada visual sobre o layout existente. Não altera dados nem funções.
   Paleta: preto #111, branco, vermelho #e40016.
   ========================================================================== */

:root { --r3x-red-soft: #ff4d5e; }

/* ---------- Cabeçalho ---------- */
.top { font-weight: 700; text-transform: uppercase; }
header { background: rgba(17, 17, 17, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    background: #fff;
    transform: scaleX(var(--r3x-progress, 0));
    transform-origin: left;
    pointer-events: none;
}
.logo { font-size: 34px; letter-spacing: -.09em; }
.menu a { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }

/* ---------- Hero ---------- */
.hero {
    display: grid;
    align-items: center;
    min-height: min(88vh, 860px);
    min-height: min(88svh, 860px);
}
.hero::after {
    content: "R3X";
    content: "R3X" / "";
    position: absolute;
    z-index: 0;
    right: -2vw;
    bottom: -7vw;
    font-size: 34vw;
    font-weight: 900;
    line-height: .8;
    letter-spacing: -.08em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, .08);
    pointer-events: none;
    user-select: none;
}
.hero-inner { padding-block: clamp(48px, 7vw, 96px); }
.hero-inner.has-promo { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.hero-inner:not(.has-promo) .hero-copy { max-width: none; }

.hero h1 {
    font-size: clamp(52px, 11vw, 150px);
    line-height: .86;
    letter-spacing: -.065em;
    color: transparent;
    -webkit-text-stroke: 2px #fff;
}
.hero h1 span {
    color: var(--r3x-red);
    -webkit-text-stroke: 0;
}
.hero-inner.has-promo h1 { font-size: clamp(44px, 5.9vw, 96px); }
.hero p { max-width: 440px; font-size: 17px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.btn:not(.btn-ghost)::after { content: "→"; margin-left: 10px; }
.btn-ghost {
    background: transparent;
    border: 2px solid #fff;
    color: #fff;
    padding-block: 13px;
}
.btn-ghost:hover { filter: none; background: #fff; color: var(--r3x-black); }

/* Campanha: quadro grande com sombra dura vermelha */
.promo-carousel { max-width: 680px; padding: 0 14px 14px 0; }
.promo-frame {
    border: 0;
    border-radius: 2px;
    box-shadow: 14px 14px 0 var(--r3x-red), 0 30px 80px rgba(0, 0, 0, .5);
}

/* ---------- Faixa editorial ---------- */
.r3x-marquee {
    overflow: hidden;
    background: var(--r3x-red);
    color: #fff;
    border-block: 1px solid rgba(0, 0, 0, .25);
}
.r3x-marquee-track { display: flex; width: max-content; }
.r3x-marquee-group { display: flex; flex: 0 0 auto; }
.r3x-marquee span {
    padding: 14px 28px;
    font-size: clamp(15px, 2vw, 22px);
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}
.r3x-marquee span::after { content: "/"; margin-left: 56px; opacity: .55; }

/* ---------- Filtros ---------- */
.container.catalog-filters {
    background: var(--r3x-soft-gray);
    box-shadow: 0 0 0 100vmax var(--r3x-soft-gray);
    clip-path: inset(0 -100vmax);
}
.catalog-filters-heading h2 {
    font-size: clamp(28px, 5vw, 56px);
    line-height: .95;
    letter-spacing: -.05em;
    font-weight: 900;
    text-transform: uppercase;
}
.catalog-filter-field { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.catalog-filter-field select {
    min-height: 48px;
    border: 2px solid var(--r3x-black);
    border-radius: 0;
    font-size: 14px;
    letter-spacing: 0;
    text-transform: none;
}

/* ---------- Títulos de seção ---------- */
.heading {
    position: relative;
    flex-wrap: wrap;
    row-gap: 10px;
    align-items: flex-end;
    margin-bottom: clamp(22px, 3vw, 34px);
    padding-bottom: 18px;
}
.heading::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 2px;
    background: var(--r3x-red);
}
.heading h2 {
    font-size: clamp(36px, 8vw, 104px);
    line-height: .88;
    letter-spacing: -.06em;
    font-weight: 900;
}
.heading h2::before { content: none; }
.heading h2::after {
    align-self: flex-start;
    margin: .12em 0 0 .4em;
    color: var(--r3x-red);
    font-size: clamp(12px, 1.4vw, 18px);
    font-weight: 800;
    letter-spacing: .12em;
}
#destaques .heading h2::after { content: "01"; }
#volei .heading h2::after { content: "02"; }
#basquete .heading h2::after { content: "03"; }
#corrida .heading h2::after { content: "04"; }
#casual .heading h2::after { content: "05"; }

.heading a {
    min-height: 44px;
    padding: 4px 18px;
    border: 1px solid currentColor;
    border-radius: 999px;
    letter-spacing: .06em;
    transition: background var(--motion-fast) ease, color var(--motion-fast) ease, border-color var(--motion-fast) ease;
}
.heading a:hover,
.heading a:focus-visible {
    background: var(--r3x-red);
    border-color: var(--r3x-red);
    color: #fff;
}

/* ---------- Seções escuras (ritmo claro/escuro) ---------- */
.container.is-dark {
    background: var(--r3x-black);
    color: #fff;
    box-shadow: 0 0 0 100vmax var(--r3x-black);
    clip-path: inset(0 -100vmax);
}
.is-dark .heading { border-bottom-color: #2b2b2b; }
.is-dark .heading h2 { color: #fff; }
.is-dark .heading a { color: #fff; }
.is-dark .card { background: #151515; border-color: #272727; box-shadow: none; }
.is-dark .card h3 { color: #fff; }
.is-dark .card .price { color: var(--r3x-red-soft); }
.is-dark .card .old { color: #8c8c8c; }
.is-dark .card-category { background: rgba(228, 0, 22, .16); color: #ff8a94; }
.is-dark .card:hover,
.is-dark .card:focus-within { border-color: var(--r3x-red); box-shadow: 0 12px 28px rgba(0, 0, 0, .5); }
.is-dark .buy:hover { background: #fff; color: var(--r3x-black); border-color: #fff; }
.is-dark .buy:focus-visible,
.is-dark .pagination-controls button:focus-visible { outline-color: #fff; }

/* ---------- Vitrine ---------- */
.pic { background: radial-gradient(ellipse at 50% 78%, #fff 0%, #f0f0f0 60%, #e4e4e4 100%); }
.card h3 { font-size: 16px; font-weight: 800; letter-spacing: -.01em; text-transform: uppercase; }
.card .price { font-size: 21px; letter-spacing: -.02em; }
.buy { min-height: 48px; font-size: 12px; letter-spacing: .06em; }
.card .tag { letter-spacing: .08em; }
.card .tag { border-radius: 0; }

@media (min-width: 801px) {
    .pic { height: clamp(240px, 26vw, 340px); }
}
/* Primeira coluna maior: o tênis da vez ganha destaque */
@media (min-width: 1001px) {
    .container .grid { grid-template-columns: 1.45fr 1fr 1fr 1fr; }
}

/* ---------- Banner de oferta ---------- */
.banner {
    background-color: var(--r3x-red);
    background-image: repeating-linear-gradient(115deg, rgba(0, 0, 0, .07) 0 2px, transparent 2px 18px);
}
.banner-inner { min-height: 280px; }
.banner h2 { font-size: clamp(48px, 11vw, 150px); line-height: .84; letter-spacing: -.065em; font-weight: 900; }
.banner p { max-width: 520px; font-size: 17px; }
.banner .btn { min-height: 56px; padding-inline: 30px; font-size: 14px; }
.banner .btn::after { color: var(--r3x-red); }

/* ---------- Benefícios ---------- */
.feature { transition: background var(--motion-standard) ease, border-color var(--motion-standard) ease; }
.feature:hover { background: rgba(255, 255, 255, .04); border-left-color: #fff; }
.feature b { font-size: 15px; letter-spacing: .02em; }

/* ---------- Produto e categoria ---------- */
.product-info h1 {
    font-size: clamp(30px, 4.2vw, 58px);
    line-height: .95;
    letter-spacing: -.05em;
    font-weight: 900;
    text-transform: uppercase;
}
.product-info .price { font-size: clamp(30px, 3.4vw, 42px); }
.category-view h1 {
    font-size: clamp(40px, 9vw, 110px);
    line-height: .9;
    letter-spacing: -.06em;
    font-weight: 900;
    border-left-width: 6px;
}

/* ---------- Rodapé ---------- */
footer { position: relative; margin-top: 0; overflow: hidden; }
footer::before {
    content: "R3X";
    content: "R3X" / "";
    position: absolute;
    left: 50%;
    bottom: -.16em;
    transform: translateX(-50%);
    font-size: clamp(140px, 34vw, 520px);
    font-weight: 900;
    line-height: .8;
    letter-spacing: -.09em;
    color: transparent;
    -webkit-text-stroke: 1px #2a2a2a;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
}
.footer { position: relative; z-index: 1; border-top: 1px solid #2a2a2a; padding-bottom: 60px; }
.copy { position: relative; z-index: 1; background: rgba(17, 17, 17, .85); }

/* ---------- Celular e tablet ---------- */
@media (max-width: 800px) {
    .hero { min-height: 0; }
    .hero-inner.has-promo { grid-template-columns: minmax(0, 1fr); }
    .hero h1,
    .hero-inner.has-promo h1 { font-size: clamp(34px, 11.6vw, 84px); }
    .hero-actions .btn { flex: 1 1 160px; }
    .promo-frame { box-shadow: 8px 8px 0 var(--r3x-red), 0 20px 50px rgba(0, 0, 0, .5); }
    .promo-carousel { padding: 0 8px 8px 0; }
    .banner h2 { font-size: clamp(44px, 12.5vw, 110px); }
    .r3x-marquee span { padding: 11px 20px; }
    .r3x-marquee span::after { margin-left: 40px; }
    .pic { height: 210px; }
}
@media (max-width: 480px) {
    .heading h2 { font-size: clamp(34px, 11vw, 52px); }
    .heading a { font-size: 11px; padding-inline: 14px; }
    .catalog-filters-heading { flex-wrap: wrap; }
    .pic { height: 172px; }
    .card h3 { font-size: 14px; }
    .card .price { font-size: 18px; }
}

/* ---------- Movimento editorial (sem preferência por movimento reduzido) ---------- */
@media (prefers-reduced-motion: no-preference) {

    @keyframes r3xMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

    .r3x-marquee-track { animation: r3xMarquee 38s linear infinite; }
    .r3x-marquee:hover .r3x-marquee-track { animation-play-state: paused; }

    /* Marca d'água do hero acompanha a rolagem de leve */
    .hero::after { transform: translate3d(0, calc(var(--r3x-py, 0) * .18px), 0); will-change: transform; }

    /* Título: linha vermelha se desenha e o nome sobe ao entrar na tela */
    .heading::after { transition: width 900ms var(--motion-ease) 150ms; }
    .reveal-on-scroll:not(.is-visible) .heading::after { width: 0; }
    .heading h2 { transition: transform 700ms var(--motion-ease) 100ms; }
    .reveal-on-scroll:not(.is-visible) .heading h2 { transform: translateY(.18em); }

    /* Imagem do tênis ganha vida no hover */
    @media (hover: hover) and (pointer: fine) {
        .card:hover .pic img { transform: scale(1.07) rotate(-2deg); }
    }

    .btn:not(.btn-ghost)::after { transition: transform var(--motion-fast) var(--motion-ease); }
    .btn:hover::after { transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
    .r3x-marquee-group + .r3x-marquee-group { display: none; }
}