/* ==========================================================================
   MONSTER — LOJA
   --------------------------------------------------------------------------
   Componentes da vitrine, catálogo, produto e carrinho.
   Depende de tokens.css e base.css. Nenhum hex solto — só variáveis.
   ========================================================================== */

/* ==========================================================================
   Cartão de produto
   ========================================================================== */

.produto-card {
    display: flex;
    flex-direction: column;
    background: var(--fundo-superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-md);
    overflow: hidden;
    transition: border-color var(--transicao), box-shadow var(--transicao);
}

.produto-card:hover {
    border-color: var(--borda-marca);
    box-shadow: var(--sombra);
}

.produto-card__link {
    display: flex;
    flex-direction: column;
    flex: 1;
    color: inherit;
}

.produto-card__link:hover {
    text-decoration: none;
}

.produto-card__imagem {
    position: relative;
    aspect-ratio: 1;
    background: var(--fundo-sutil);
    display: grid;
    place-items: center;
    overflow: hidden;
}

.produto-card__imagem img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: var(--esp-3);
}

.produto-card__sem-imagem {
    font-size: 2.5rem;
    opacity: .35;
}

.produto-card__desconto {
    position: absolute;
    top: var(--esp-2);
    left: var(--esp-2);
    padding: 2px var(--esp-2);
    background: var(--laranja-500);
    color: var(--grafite-950);
    border-radius: var(--raio-sm);
    font-size: var(--txt-xs);
    font-weight: var(--peso-negrito);
}

.produto-card__tag {
    position: absolute;
    top: var(--esp-2);
    right: var(--esp-2);
}

.produto-card__corpo {
    display: flex;
    flex-direction: column;
    gap: var(--esp-1);
    padding: var(--esp-3);
    flex: 1;
}

.produto-card__marca {
    font-size: var(--txt-xs);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--texto-marca);
    font-weight: var(--peso-semi);
}

.produto-card__nome {
    font-family: var(--fonte-corpo);
    font-size: var(--txt-sm);
    font-weight: var(--peso-medio);
    line-height: 1.35;
    text-transform: none;
    letter-spacing: 0;
    /* Duas linhas no máximo, para os cartões ficarem alinhados */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.produto-card__codigo,
.produto-card__aplicacoes {
    font-size: var(--txt-xs);
    color: var(--texto-fraco);
}

.produto-card__preco {
    margin-top: auto;
    padding-top: var(--esp-2);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.produto-card__preco .preco {
    font-size: var(--txt-xl);
}

.produto-card__acao {
    padding: 0 var(--esp-3) var(--esp-3);
    margin: 0;
}

/* ==========================================================================
   Grade de produtos
   ========================================================================== */

.grade-produtos {
    display: grid;
    gap: var(--esp-4);
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

@media (min-width: 768px) {
    .grade-produtos { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}

/* ==========================================================================
   Vitrine
   ========================================================================== */

.hero {
    padding-block: var(--esp-12);
}

.hero__titulo {
    font-size: var(--txt-4xl);
    margin-bottom: var(--esp-3);
}

.hero__texto {
    color: var(--texto-suave);
    max-width: 54ch;
    margin-bottom: var(--esp-6);
}

@media (min-width: 768px) {
    .hero__titulo { font-size: var(--txt-5xl); }
}

.secao-titulo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--esp-4);
    margin-bottom: var(--esp-5);
    flex-wrap: wrap;
}

.secao-titulo h2 {
    font-size: var(--txt-2xl);
}

/* Atalhos por montadora */
.montadoras {
    display: grid;
    gap: var(--esp-3);
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
}

.montadora-atalho {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--esp-1);
    padding: var(--esp-4) var(--esp-3);
    background: var(--fundo-superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-md);
    text-align: center;
    color: inherit;
    transition: border-color var(--transicao-rapida);
}

.montadora-atalho:hover {
    border-color: var(--borda-marca);
    text-decoration: none;
}

.montadora-atalho strong { font-size: var(--txt-sm); }
.montadora-atalho small { color: var(--texto-fraco); font-size: var(--txt-xs); }

/* ==========================================================================
   Catálogo — filtros e resultados
   ========================================================================== */

.catalogo {
    display: grid;
    gap: var(--esp-6);
    align-items: start;
}

@media (min-width: 900px) {
    .catalogo { grid-template-columns: 240px minmax(0, 1fr); }
}

.filtros {
    position: sticky;
    top: var(--esp-4);
}

.filtros__grupo {
    padding: var(--esp-4);
    border-bottom: 1px solid var(--borda);
}

.filtros__grupo:last-child { border-bottom: 0; }

.filtros__titulo {
    font-size: var(--txt-sm);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--texto-suave);
    margin-bottom: var(--esp-3);
}

.filtros__lista {
    display: flex;
    flex-direction: column;
    gap: var(--esp-2);
    margin: 0;
    padding: 0;
    max-height: 260px;
    overflow-y: auto;
}

.filtros__lista a {
    display: flex;
    justify-content: space-between;
    gap: var(--esp-2);
    font-size: var(--txt-sm);
    color: var(--texto-suave);
}

.filtros__lista a:hover { color: var(--texto-marca); text-decoration: none; }
.filtros__lista a[aria-current="page"] { color: var(--texto-marca); font-weight: var(--peso-semi); }
.filtros__lista span { color: var(--texto-fraco); font-size: var(--txt-xs); }

.resultado-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-4);
    flex-wrap: wrap;
    margin-bottom: var(--esp-5);
}

.vazio {
    padding-block: var(--esp-16);
    text-align: center;
}

.vazio__icone { font-size: 3rem; opacity: .3; display: block; margin-bottom: var(--esp-3); }

/* ==========================================================================
   Seletor de moto
   ========================================================================== */

.seletor-moto {
    display: grid;
    gap: var(--esp-3);
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    align-items: end;
}

.moto-escolhida {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-4);
    flex-wrap: wrap;
    padding: var(--esp-4);
    background: var(--fundo-sutil);
    border: 1px solid var(--borda-marca);
    border-radius: var(--raio-md);
    margin-bottom: var(--esp-5);
}

/* ==========================================================================
   Página do produto
   ========================================================================== */

.produto {
    display: grid;
    gap: var(--esp-8);
}

@media (min-width: 860px) {
    .produto { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); }
}

.galeria__principal {
    aspect-ratio: 1;
    background: var(--fundo-superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-md);
    display: grid;
    place-items: center;
    overflow: hidden;
}

.galeria__principal img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: var(--esp-4);
}

.galeria__miniaturas {
    display: flex;
    gap: var(--esp-2);
    margin-top: var(--esp-3);
    flex-wrap: wrap;
}

.galeria__miniatura {
    width: 64px;
    height: 64px;
    padding: 0;
    background: var(--fundo-superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-sm);
    cursor: pointer;
    overflow: hidden;
}

.galeria__miniatura[aria-current="true"] { border-color: var(--borda-marca); }
.galeria__miniatura img { width: 100%; height: 100%; object-fit: contain; }

.compra {
    position: sticky;
    top: var(--esp-4);
}

.compra__preco { display: flex; flex-direction: column; gap: var(--esp-1); }
.compra__preco .preco { font-size: var(--txt-4xl); }

.compra__quantidade {
    display: flex;
    align-items: center;
    gap: var(--esp-2);
}

.compra__quantidade input {
    width: 72px;
    text-align: center;
}

.trilha {
    display: flex;
    gap: var(--esp-2);
    flex-wrap: wrap;
    margin-bottom: var(--esp-5);
    font-size: var(--txt-sm);
    color: var(--texto-fraco);
}

.trilha a { color: var(--texto-suave); }

/* Tabela de aplicação */
.aplicacoes-lista {
    display: grid;
    gap: var(--esp-2);
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.aplicacao-item {
    padding: var(--esp-3);
    background: var(--fundo-sutil);
    border-radius: var(--raio);
    font-size: var(--txt-sm);
}

.aplicacao-item strong { display: block; }
.aplicacao-item small { color: var(--texto-fraco); }

/* ==========================================================================
   Carrinho
   ========================================================================== */

.carrinho {
    display: grid;
    gap: var(--esp-6);
    align-items: start;
}

@media (min-width: 900px) {
    .carrinho { grid-template-columns: minmax(0, 1fr) 320px; }
}

.carrinho-item {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    gap: var(--esp-3);
    padding: var(--esp-4);
    border-bottom: 1px solid var(--borda);
    align-items: center;
}

.carrinho-item:last-child { border-bottom: 0; }

.carrinho-item__imagem {
    width: 72px;
    height: 72px;
    background: var(--fundo-sutil);
    border-radius: var(--raio-sm);
    display: grid;
    place-items: center;
    overflow: hidden;
}

.carrinho-item__imagem img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }

.carrinho-item__acoes {
    display: flex;
    align-items: center;
    gap: var(--esp-3);
}

.resumo {
    position: sticky;
    top: var(--esp-4);
}

.resumo__linha {
    display: flex;
    justify-content: space-between;
    gap: var(--esp-3);
    padding-block: var(--esp-2);
}

.resumo__total {
    border-top: 1px solid var(--borda);
    margin-top: var(--esp-2);
    padding-top: var(--esp-3);
    font-size: var(--txt-lg);
    font-weight: var(--peso-semi);
}

@media (max-width: 640px) {
    .carrinho-item { grid-template-columns: 56px minmax(0, 1fr); }
    .carrinho-item__acoes { grid-column: 1 / -1; justify-content: space-between; }
}