@layer base, layout, componentes;

@layer base {
  .container {
    width: min(100% - 2 * var(--espaco-md), 72rem);
    margin-inline: auto;
  }

  .botao {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--espaco-xs);
    padding: 0.85em 1.6em;
    border-radius: var(--raio-pill);
    font-weight: 600;
    font-size: var(--tamanho-pequeno);
    letter-spacing: 0.01em;
    text-decoration: none;
    border: 1px solid transparent;
    overflow: hidden;
    /* isolation cria um contexto de empilhamento próprio: o ::before do brilho (z-index -1)
       fica entre o fundo e o texto do botão, nunca por cima do texto — sem precisar de <span>. */
    isolation: isolate;
    transition: transform var(--duracao-rapida) var(--easing-padrao),
                background var(--duracao-media) var(--easing-padrao),
                box-shadow var(--duracao-media) var(--easing-padrao);
  }

  .botao:hover { transform: translateY(-2px); }
  .botao:active { transform: translateY(0); }

  /* Botão escuro — degradê vinho (rosa-600→rosa-800), não preto/marrom chapado */
  .botao--primario {
    background: var(--degrade-primario);
    color: var(--rosa-50);
    box-shadow: 0 1px 2px color-mix(in oklch, var(--rosa-800) 20%, transparent);
  }
  .botao--primario:hover { background: var(--degrade-primario-hover); box-shadow: var(--brilho-rosa); }

  /* Brilho que varre o botão no hover — mesmo motivo do shimmer do card, reforça "brilho" da marca */
  .botao--primario::before,
  .botao--destaque::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(115deg, transparent 40%, color-mix(in oklch, var(--branco) 45%, transparent) 50%, transparent 60%);
    transform: translateX(-120%);
    transition: transform 600ms var(--easing-padrao);
  }
  .botao--primario:hover::before,
  .botao--destaque:hover::before { transform: translateX(120%); }

  /* Botão de destaque — degradê no tom exato da logo, com texto escuro, pro CTA mais chamativo */
  .botao--destaque {
    background: var(--degrade-destaque);
    color: var(--rosa-800);
    box-shadow: var(--sombra-suave);
  }
  .botao--destaque:hover { background: var(--degrade-destaque-hover); box-shadow: var(--brilho-rosa); }

  .botao--fantasma {
    background: color-mix(in oklch, var(--branco) 60%, transparent);
    backdrop-filter: blur(8px);
    color: var(--rosa-800);
    border-color: var(--cor-borda);
  }
  .botao--fantasma:hover { border-color: var(--rosa-500); background: var(--rosa-100); }

  .botao--contorno {
    background: transparent;
    color: var(--rosa-800);
    border-color: var(--rosa-800);
  }

  .botao--pequeno { padding: 0.6em 1.1em; font-size: 0.8125rem; }
  .botao--bloco { width: 100%; }

  .botao--desabilitado {
    opacity: 0.5;
    pointer-events: none;
  }

  .botao-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--rosa-700);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-size: var(--tamanho-pequeno);
  }
  .botao-link:hover { color: var(--rosa-800); }
  .botao-link--perigo { color: var(--rosa-600); }

  .botao-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--raio-pill);
    color: var(--rosa-800);
  }
  .botao-icone:hover { background: var(--rosa-200); }

  .pilula {
    border: 1px solid var(--rosa-200);
    background: color-mix(in oklch, var(--branco) 70%, var(--rosa-100));
    color: var(--rosa-800);
    padding: 0.55em 1.2em;
    border-radius: var(--raio-pill);
    font-size: var(--tamanho-pequeno);
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 1px 2px color-mix(in oklch, var(--rosa-800) 6%, transparent);
    transition: background var(--duracao-rapida) var(--easing-padrao),
                color var(--duracao-rapida) var(--easing-padrao),
                box-shadow var(--duracao-rapida) var(--easing-padrao),
                transform var(--duracao-rapida) var(--easing-padrao);
  }
  .pilula:hover { background: var(--rosa-200); transform: translateY(-1px); }
  .pilula.is-ativa {
    background: var(--degrade-primario);
    color: var(--rosa-50);
    border-color: transparent;
    box-shadow: 0 4px 14px color-mix(in oklch, var(--rosa-700) 35%, transparent);
  }
  .pilula.is-ativa:hover { background: var(--degrade-primario-hover); }

  .stepper {
    display: inline-flex;
    align-items: center;
    gap: var(--espaco-xs);
    border: 1px solid var(--rosa-200);
    border-radius: var(--raio-pill);
    padding: 0.2em 0.4em;
  }
  .stepper__botao {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--raio-pill);
    border: none;
    background: var(--rosa-200);
    color: var(--rosa-800);
    font-size: 1rem;
    line-height: 1;
  }
  .stepper__botao:hover { background: var(--rosa-400); }
  .stepper__valor {
    min-width: 1.5rem;
    text-align: center;
    font-weight: 600;
  }
}

@layer layout {
  /* Degradê rosa quente + "bokeh" (pontinhos de brilho) ecoando assets/img_para_header.jpeg —
     tudo estático (sem animação) de propósito: um SVG animado no cabeçalho já causou bug de
     renderização em navegador mobile real (ver .hero__brilho); aqui o brilho vem só do
     background composto em camadas, que não tem esse risco. */
  .cabecalho {
    position: sticky;
    top: 0;
    z-index: 20;
    background:
      radial-gradient(circle 2px at 8% 35%,  color-mix(in oklch, var(--branco) 85%, transparent), transparent 70%),
      radial-gradient(circle 3px at 16% 70%, color-mix(in oklch, var(--rosa-200) 80%, transparent), transparent 70%),
      radial-gradient(circle 2px at 24% 25%, color-mix(in oklch, var(--branco) 75%, transparent), transparent 70%),
      radial-gradient(circle 3px at 33% 60%, color-mix(in oklch, var(--rosa-300) 70%, transparent), transparent 70%),
      radial-gradient(circle 2px at 45% 30%, color-mix(in oklch, var(--branco) 65%, transparent), transparent 70%),
      radial-gradient(circle 2px at 58% 65%, color-mix(in oklch, var(--rosa-200) 60%, transparent), transparent 70%),
      radial-gradient(circle 2px at 72% 30%, color-mix(in oklch, var(--branco) 55%, transparent), transparent 70%),
      linear-gradient(90deg,
        color-mix(in oklch, var(--rosa-300) 42%, var(--branco)),
        color-mix(in oklch, var(--rosa-100) 55%, var(--branco)) 55%,
        color-mix(in oklch, var(--rosa-50) 70%, var(--branco)));
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(90deg, var(--rosa-300), var(--rosa-200), transparent) 1;
  }

  .cabecalho__faixa {
    width: min(100% - 2 * var(--espaco-md), 72rem);
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espaco-md);
    padding-block: var(--espaco-sm);
  }

  .cabecalho__marca {
    display: flex;
    align-items: center;
    gap: var(--espaco-sm);
    text-decoration: none;
  }
  /* A marca já é um círculo com fundo transparente (assets/logo-marca.png), sem moldura extra. */
  .cabecalho__wordmark { display: block; width: auto; height: 44px; }

  .cabecalho__nav ul { display: flex; gap: var(--espaco-md); }
  .cabecalho__nav a {
    position: relative;
    display: inline-block;
    padding-block: 0.3rem;
    text-decoration: none;
    font-weight: 600;
    font-size: var(--tamanho-pequeno);
    color: var(--rosa-800);
  }
  .cabecalho__nav a:hover { color: var(--rosa-600); }
  /* Indicador da seção atual (scroll-spy em js/cabecalho.js) — traço em degradê embaixo do link */
  .cabecalho__nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: 0;
    height: 2px;
    border-radius: var(--raio-pill);
    background: var(--degrade-destaque-hover);
    transition: right var(--duracao-media) var(--easing-padrao);
  }
  .cabecalho__nav a.is-atual { color: var(--rosa-600); }
  .cabecalho__nav a.is-atual::after { right: 0; }

  @media (max-width: 54rem) {
    .cabecalho__nav { display: none; }
  }

  .cabecalho__acoes { display: flex; align-items: center; gap: var(--espaco-xs); }

  @media (max-width: 30rem) {
    /* Em telas bem estreitas o ícone do Instagram some do cabeçalho (ele já está no
       menu hambúrguer) pra sobrar espaço decente de toque pro carrinho e pro menu. */
    .cabecalho__icone-social { display: none; }
  }

  /* Instagram com mais destaque no cabeçalho — pedido explícito pra chamar mais atenção:
     fundo preenchido em degradê (em vez de só um ícone de contorno) + glow + pulso sutil. */
  .cabecalho__icone-social {
    position: relative;
    isolation: isolate;
    background: var(--degrade-destaque);
    color: var(--rosa-800);
    box-shadow: 0 2px 8px color-mix(in oklch, var(--rosa-500) 35%, transparent);
    transition: transform var(--duracao-rapida) var(--easing-padrao), box-shadow var(--duracao-media) var(--easing-padrao);
  }
  .cabecalho__icone-social:hover {
    background: var(--degrade-destaque-hover);
    transform: translateY(-2px) scale(1.06);
    box-shadow: var(--brilho-rosa);
  }
  /* Anel que pulsa pra fora e some — chama o olho sem travar interação (aria-hidden, decorativo) */
  .cabecalho__icone-social::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: var(--raio-pill);
    background: var(--rosa-400);
    animation: pulso-instagram 2.4s ease-out infinite;
  }
  @keyframes pulso-instagram {
    0% { opacity: 0.55; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.9); }
  }

  .botao-carrinho {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--raio-pill);
    border: none;
    background: transparent;
    color: var(--rosa-800);
  }
  .botao-carrinho:hover { background: var(--rosa-200); }

  .botao-menu {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--raio-pill);
    border: none;
    background: transparent;
    color: var(--rosa-800);
  }
  .botao-menu:hover { background: var(--rosa-200); }

  @media (max-width: 54rem) {
    .botao-menu { display: inline-flex; }
  }
  .botao-carrinho__contador {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 1.1rem;
    height: 1.1rem;
    padding-inline: 0.2rem;
    border-radius: var(--raio-pill);
    background: var(--rosa-500);
    color: var(--rosa-50);
    font-size: 0.65rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* HERO — assimétrico, texto + vídeo lado a lado, fugindo do hero centralizado padrão.
     position:relative + os dois ::before/::after criam o "glow" desfocado atrás do conteúdo
     (glassmorphism/soft-gradient é tendência atual de site de joalheria — ver pesquisa de mercado);
     substitui o fundo plano por profundidade sem introduzir cor fora da rampa da marca. */
  /* Hero em largura total com a arte inteira como fundo (1280x548, sem recorte): a proporção
     da seção é a da imagem, e um degradê rosa à esquerda mantém o texto legível sobre o lírio. */
  .hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    aspect-ratio: 1280 / 548;
    padding-block: var(--espaco-xl);
    padding-inline: max(var(--espaco-md), calc(50% - 36rem + var(--espaco-md)));
    background-color: var(--rosa-50);
    background-image:
      linear-gradient(90deg,
        color-mix(in oklch, var(--rosa-50) 85%, transparent) 0%,
        color-mix(in oklch, var(--rosa-50) 40%, transparent) 45%,
        transparent 70%),
      url("../assets/hero-fundo.webp");
    background-size: 100% 100%, 100% auto;
    background-position: 0 0, center;
    background-repeat: no-repeat;
  }

  .hero__conteudo { position: relative; z-index: 2; max-width: 34rem; }

  .hero::before,
  .hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.55;
    pointer-events: none;
  }
  .hero::before {
    width: 26rem;
    height: 26rem;
    top: -6rem;
    left: -8rem;
    background: var(--rosa-300);
  }
  .hero::after {
    width: 22rem;
    height: 22rem;
    bottom: -4rem;
    right: 2rem;
    background: var(--rosa-200);
  }
  /* Terceiro brilho, mais quente/vívido, centralizado atrás do título — reforça o
     "com brilho" sem recorrer a emoji; é luz e cor, não um sticker. */
  .hero::before {
    background: radial-gradient(circle, var(--rosa-300), transparent 70%);
  }

  /* Brilhos (sparkles) decorativos — pequenos "diamantes de 4 pontas" que piscam, ecoando
     o bokeh/sparkle que já aparece no vídeo da logo. Puramente decorativo (aria-hidden). */
  .hero__brilhos {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: visible;
  }
  .hero__brilho {
    /* Nem "filter" nem "transform" aqui — tirei o drop-shadow numa rodada e o quadrado
       continuou aparecendo (reproduzido num iPhone real), então o problema era a animação
       de "transform: scale/rotate" direto no elemento <svg>: esse navegador mobile promove
       o SVG a uma camada de composição própria durante a animação e pinta o retângulo
       delimitador dessa camada em vez de só a forma da estrela. Só opacidade anima aqui —
       é o tipo de animação CSS mais compatível que existe, sem promoção de camada estranha. */
    position: absolute;
    animation: brilho-pisca 2.8s ease-in-out infinite;
  }
  .hero__brilho--1 { top: 6%;  left: 2%;   color: var(--rosa-400); animation-delay: 0s; }
  .hero__brilho--2 { top: 72%; left: 34%;  color: var(--branco);   animation-delay: 0.9s; animation-duration: 2.2s; }
  .hero__brilho--3 { top: 14%; left: 48%;  color: var(--rosa-300); animation-delay: 1.6s; animation-duration: 3.4s; }
  .hero__brilho--4 { top: 85%; left: 6%;   color: var(--rosa-500); animation-delay: 0.4s; animation-duration: 2.6s; }

  @keyframes brilho-pisca {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
  }

  @media (max-width: 54rem) {
    .hero {
      aspect-ratio: auto;
      padding-block: var(--espaco-lg);
      padding-inline: var(--espaco-md);
      background-image:
        linear-gradient(180deg,
          color-mix(in oklch, var(--rosa-50) 60%, transparent),
          color-mix(in oklch, var(--rosa-50) 48%, transparent)),
        url("../assets/hero-fundo.webp");
      background-size: 100% 100%, cover;
      background-position: 0 0, 84% center;
    }
    /* Os brilhos já causaram dois bugs de renderização em navegador mobile real (filter e,
       depois, transform animado) — são só enfeite, então no mobile a prioridade é
       confiabilidade: tiram esse elemento de cena em vez de arriscar um terceiro caso. */
    .hero__brilhos { display: none; }
  }

  .hero__etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    font-size: var(--tamanho-pequeno);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rosa-600);
    margin-bottom: var(--espaco-sm);
  }
  /* Pequeno traço decorativo antes do rótulo — detalhe editorial, sem precisar de ícone */
  .hero__etiqueta::before {
    content: "";
    display: inline-block;
    width: 1.75rem;
    height: 2px;
    border-radius: var(--raio-pill);
    background: linear-gradient(90deg, var(--rosa-500), transparent);
  }

  .hero__titulo {
    font-size: var(--tamanho-h1);
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: var(--espaco-sm);
    color: var(--rosa-800);
  }
  .hero__titulo em {
    /* Degradê rosa-700→rosa-500: os dois extremos ficam ≥3.28:1 sobre o fundo (texto
       grande de título, limiar AA é 3:1) — rosa-400 sozinho (2.28:1) reprovaria aqui. */
    font-style: italic;
    background: linear-gradient(100deg, var(--rosa-700), var(--rosa-500));
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
  }

  .hero__texto {
    color: var(--cor-texto-suave);
    max-width: 38ch;
    line-height: 1.7;
    margin-bottom: var(--espaco-md);
  }

  .hero__cta { display: flex; flex-wrap: wrap; gap: var(--espaco-sm); }


  .catalogo {
    width: min(100% - 2 * var(--espaco-md), 72rem);
    margin-inline: auto;
    padding-block: var(--espaco-xl);
  }
  .catalogo__cabecalho { margin-bottom: var(--espaco-md); max-width: 46ch; }
  .catalogo__cabecalho h2 { font-size: var(--tamanho-h2); margin-bottom: var(--espaco-xs); color: var(--rosa-800); }

  /* Subtítulo de seção com ornamento de brilho (estrelinha vetorial, não emoji) */
  .secao__subtitulo {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    color: var(--cor-texto-suave);
    font-size: var(--tamanho-pequeno);
    font-weight: 600;
  }
  .secao__subtitulo svg { color: var(--rosa-500); }

  /* Linha de categorias em círculos (referência "Compre por categoria") */
  .categorias {
    display: flex;
    gap: var(--espaco-md);
    overflow-x: auto;
    padding-block: var(--espaco-xs) var(--espaco-md);
    margin-bottom: var(--espaco-sm);
  }
  .categoria {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--espaco-xs);
    flex-shrink: 0;
    border: none;
    background: none;
    color: var(--rosa-800);
    font-size: var(--tamanho-pequeno);
    font-weight: 600;
  }
  .categoria__circulo {
    display: grid;
    place-items: center;
    width: 4.25rem;
    height: 4.25rem;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--rosa-100), var(--rosa-300));
    color: var(--rosa-700);
    border: 1px solid var(--rosa-200);
    box-shadow: 0 4px 12px color-mix(in oklch, var(--rosa-800) 8%, transparent);
    transition: transform var(--duracao-media) var(--easing-padrao), box-shadow var(--duracao-media) var(--easing-padrao);
  }
  .categoria:hover .categoria__circulo { transform: translateY(-3px); box-shadow: var(--brilho-rosa); }
  .categoria__circulo img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
  }
  .categoria.is-ativa .categoria__circulo {
    box-shadow: 0 0 0 2px var(--branco), 0 0 0 4px var(--rosa-600);
    border-color: transparent;
  }

  .catalogo__grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: var(--espaco-md);
  }

  /* Celular: dois cards lado a lado, com a faixa de preço/ação compactada pra caber. */
  @media (max-width: 40rem) {
    .catalogo__grade {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--espaco-sm);
    }
    .produto-card__corpo { padding: 0.6rem; }
    .produto-card__nome { font-size: 0.95rem; }
    .produto-card__preco { font-size: 0.95rem; }
    .produto-card__rodape {
      flex-direction: column;
      align-items: stretch;
      padding: 0.6rem;
    }
    .produto-card__rodape .stepper { justify-content: center; }
    .produto-card__rodape .botao { width: 100%; }
  }

  .catalogo__estado {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--cor-texto-suave);
    padding-block: var(--espaco-lg);
  }

  /* Sobre: a arte da flor cobre a seção inteira como fundo; o texto fica na metade direita,
     onde a arte é só um degradê rosa claro. */
  .sobre {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    aspect-ratio: 2.3 / 1;
    padding-block: var(--espaco-lg);
    padding-inline: max(var(--espaco-md), calc(50% - 36rem + var(--espaco-md)));
    /* A seção é bem mais larga que a foto: posiciona perto do fundo pra manter a sacola (logo) e a flor visíveis. */
    /* Véu rosa suave do lado do texto, pra leitura ficar confortável sem esconder a foto. */
    background:
      linear-gradient(90deg,
        transparent 0 42%,
        color-mix(in oklch, var(--rosa-50) 80%, transparent) 60%),
      url("../assets/img_sacola_section_essencia.jpeg") center 88% / cover no-repeat;
    background-color: var(--rosa-50);
  }
  .sobre__texto { grid-column: 2; max-width: 36rem; }
  @media (max-width: 54rem) {
    .sobre {
      grid-template-columns: 1fr;
      aspect-ratio: auto;
      padding-block: var(--espaco-lg);
      padding-inline: var(--espaco-md);
      background-image:
        linear-gradient(180deg,
          color-mix(in oklch, var(--rosa-50) 70%, transparent),
          color-mix(in oklch, var(--rosa-50) 60%, transparent)),
        url("../assets/img_sacola_section_essencia.jpeg");
      background-size: 100% 100%, cover;
      background-position: 0 0, center;
    }
    .sobre__texto { grid-column: auto; }
  }
  .sobre__texto h2 { font-size: var(--tamanho-h2); margin-bottom: var(--espaco-sm); color: var(--rosa-800); }
  .sobre__texto p { color: var(--cor-texto-suave); max-width: 60ch; margin-bottom: var(--espaco-sm); }
  .sobre__assinatura {
    margin-top: var(--espaco-md);
    font-family: var(--fonte-display);
    font-style: italic;
    font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem);
    color: var(--rosa-600);
  }

  /* Rodapé escuro em vinho (como na referência), com texto rosa-100 */
  .rodape {
    background: var(--rosa-800);
    color: var(--rosa-100);
    padding-block: var(--espaco-md);
  }
  /* Desktop: marca à esquerda, links no centro, cidade e copyright à direita — tudo numa faixa só. */
  .rodape__faixa {
    width: min(100% - 2 * var(--espaco-md), 72rem);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--espaco-sm) var(--espaco-md);
    font-size: var(--tamanho-pequeno);
  }
  .rodape__info { justify-self: end; text-align: right; display: grid; gap: 0.2rem; }
  .rodape__direitos { font-size: 0.8125rem; }
  @media (max-width: 54rem) {
    .rodape__faixa { grid-template-columns: 1fr; justify-items: center; text-align: center; }
    .rodape__info { justify-self: center; text-align: center; }
    .rodape__admin { justify-self: center; }
  }
  .rodape__marca {
    display: inline-flex;
    align-items: center;
    gap: var(--espaco-sm);
    text-decoration: none;
    font-family: var(--fonte-display);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--rosa-50);
  }
  .rodape__marca em { font-style: italic; color: var(--rosa-300); }
  .rodape__logo { display: block; }
  .rodape__nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--espaco-md); }
  .rodape__nav a { color: var(--rosa-100); text-decoration: none; font-weight: 600; }
  .rodape__nav a:hover { color: var(--rosa-300); text-decoration: underline; text-underline-offset: 4px; }
  .rodape__local { color: var(--rosa-200); }
  .rodape__direitos { color: var(--rosa-300); font-size: 0.8125rem; }
  .rodape__admin { color: var(--rosa-400); opacity: 0.6; justify-self: end; padding: 0.25rem; }
  .rodape__admin:hover { opacity: 1; color: var(--rosa-300); }
}

@layer componentes {
  /* Menu mobile — Popover API nativa, mesma lógica do painel do carrinho (ver nota ali sobre
     nunca declarar "display" fora de :popover-open, senão o fechado some o "display:none" nativo). */
  .menu-mobile {
    /* [popover] vem do navegador com "width/height: fit-content" por padrão — sem sobrescrever
       aqui, left:0/right:0 não esticam a caixa e ela fica do tamanho do conteúdo, colada à
       esquerda (foi exatamente o que aconteceu até corrigir isso). */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    max-height: 85vh;
    margin: 0;
    border: none;
    border-bottom: 1px solid var(--rosa-200);
    background: color-mix(in oklch, var(--branco) 88%, var(--rosa-50));
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    padding: var(--espaco-lg) var(--espaco-md) var(--espaco-md);
    box-shadow: var(--sombra-elevada);
    transform: translateY(-100%);
    transition: transform var(--duracao-media) var(--easing-padrao), display var(--duracao-media) allow-discrete, overlay var(--duracao-media) allow-discrete;
  }
  .menu-mobile::backdrop {
    background: color-mix(in oklch, var(--rosa-800) 35%, transparent);
  }
  .menu-mobile:popover-open {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-md);
    transform: translateY(0);
  }
  @starting-style {
    .menu-mobile:popover-open { transform: translateY(-100%); }
  }
  .menu-mobile nav ul {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }
  .menu-mobile nav a {
    display: block;
    padding: 0.85em var(--espaco-xs);
    border-radius: var(--raio-sm);
    text-decoration: none;
    font-family: var(--fonte-display);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--rosa-800);
  }
  .menu-mobile nav a:hover,
  .menu-mobile nav a.is-atual { background: var(--rosa-100); color: var(--rosa-700); }
  .menu-mobile__acoes {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-sm);
    padding-top: var(--espaco-sm);
    border-top: 1px solid var(--rosa-200);
  }

  .produto-card {
    background: var(--degrade-superficie);
    border: 1px solid var(--rosa-200);
    border-radius: var(--raio-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--duracao-media) var(--easing-padrao), transform var(--duracao-media) var(--easing-padrao), border-color var(--duracao-media) var(--easing-padrao);
  }
  .produto-card:hover {
    box-shadow: var(--brilho-rosa);
    transform: translateY(-4px);
    border-color: var(--rosa-400);
  }
  /* Os cards surgem um após o outro, em vez de aparecerem todos de uma vez. */
  .produto-card { animation: surgir-card 0.5s var(--easing-padrao) backwards; }
  .produto-card:nth-child(2) { animation-delay: 0.05s; }
  .produto-card:nth-child(3) { animation-delay: 0.1s; }
  .produto-card:nth-child(4) { animation-delay: 0.15s; }
  .produto-card:nth-child(5) { animation-delay: 0.2s; }
  .produto-card:nth-child(6) { animation-delay: 0.25s; }
  .produto-card:nth-child(n + 7) { animation-delay: 0.3s; }
  @keyframes surgir-card {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .produto-card { animation: none; }
  }

  .produto-card__imagem {
    width: 100%;
    height: auto; /* os atributos width/height do HTML não podem travar a altura */
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
  }
  .produto-card__imagem--placeholder {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--espaco-xs);
    background: linear-gradient(155deg, var(--rosa-300), var(--rosa-100));
    color: var(--rosa-700);
    overflow: hidden;
  }
  /* Brilho diagonal que varre o placeholder no hover — reforça "realçando com brilho" sem emoji/sticker */
  .produto-card__imagem--placeholder::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 40%, color-mix(in oklch, var(--branco) 65%, transparent) 50%, transparent 60%);
    transform: translateX(-120%);
    transition: transform 700ms var(--easing-padrao);
  }
  .produto-card:hover .produto-card__imagem--placeholder::after { transform: translateX(120%); }
  .produto-card__imagem--placeholder span {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--rosa-700);
  }

  .produto-card__descricao { display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; margin-bottom: 0.4rem; }
  .produto-card__texto {
    font-size: var(--tamanho-pequeno);
    color: var(--cor-texto-suave);
    line-height: 1.5;
    white-space: pre-line;
  }
  .produto-card__texto--longo:not(.is-aberta) {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .produto-card__ver-mais {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--rosa-700);
    font-size: var(--tamanho-pequeno);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .produto-card__ver-mais:hover { color: var(--rosa-800); }
  .produto-card__corpo { padding: var(--espaco-sm); flex: 1; }
  .produto-card__categoria {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rosa-600);
    margin-bottom: 0.2rem;
  }
  .produto-card__nome { font-size: 1.05rem; margin-bottom: 0.3rem; color: var(--rosa-800); }
  .produto-card__preco { font-weight: 700; color: var(--rosa-700); }

  .produto-card__rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espaco-xs);
    padding: var(--espaco-sm);
    border-top: 1px solid var(--rosa-200);
  }

  /* Painel do carrinho — Popover API nativa, sem JS pra abrir/fechar */
  .painel-carrinho {
    /* Sem "display" aqui de propósito: o padrão fechado precisa continuar usando o
       "display: none" nativo do navegador pra [popover] — declarar display aqui
       (mesmo "none") sobrescreveria a regra do user-agent, já que CSS de autor
       sempre vence CSS de user-agent, e o painel ficaria visível sempre. */
    position: fixed;
    inset-block: 0;
    inset-inline-start: auto;
    right: 0;
    left: auto;
    width: min(26rem, 100vw);
    height: 100%;
    margin: 0;
    border: none;
    border-left: 1px solid color-mix(in oklch, var(--branco) 40%, var(--rosa-200));
    background: color-mix(in oklch, var(--branco) 82%, var(--rosa-50));
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    color: var(--cor-texto);
    padding: var(--espaco-md);
    box-shadow: -16px 0 48px color-mix(in oklch, var(--rosa-800) 14%, transparent);
    transition: transform var(--duracao-media) var(--easing-padrao), display var(--duracao-media) allow-discrete, overlay var(--duracao-media) allow-discrete;
    transform: translateX(100%);
  }

  .painel-carrinho::backdrop {
    background: color-mix(in oklch, var(--rosa-800) 40%, transparent);
    backdrop-filter: blur(2px);
  }

  .painel-carrinho:popover-open {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-md);
    transform: translateX(0);
  }

  @starting-style {
    .painel-carrinho:popover-open { transform: translateX(100%); }
  }

  .painel-carrinho__cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .painel-carrinho__cabecalho h2 { color: var(--rosa-800); }
  .botao-fechar {
    background: none;
    border: none;
    color: var(--rosa-800);
    width: 2rem;
    height: 2rem;
    border-radius: var(--raio-pill);
  }
  .botao-fechar:hover { background: var(--rosa-200); }

  .painel-carrinho__itens { flex: 1; overflow-y: auto; }
  .painel-carrinho__vazio { color: var(--cor-texto-suave); text-align: center; padding-block: var(--espaco-lg); }

  .carrinho-item__lista { display: flex; flex-direction: column; gap: var(--espaco-sm); }
  .carrinho-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espaco-sm);
    padding-bottom: var(--espaco-sm);
    border-bottom: 1px solid var(--rosa-200);
  }
  .carrinho-item__nome { font-weight: 600; font-size: 0.95rem; color: var(--rosa-800); }
  .carrinho-item__preco { color: var(--cor-texto-suave); font-size: 0.85rem; }
  .carrinho-item__controles { display: flex; align-items: center; gap: var(--espaco-xs); }
  .carrinho-item__remover {
    background: none;
    border: none;
    color: var(--rosa-700);
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--raio-pill);
  }
  .carrinho-item__remover:hover { background: var(--rosa-200); color: var(--rosa-600); }

  /* Capa de peça com várias fotos: botão que ocupa a imagem inteira, com selo no canto. */
  .produto-card__fotos {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
  }
  .produto-card__fotos:focus-visible { outline: 3px solid var(--rosa-600); outline-offset: -3px; }
  .produto-card__selo-fotos {
    position: absolute;
    right: var(--espaco-xs);
    bottom: var(--espaco-xs);
    padding: 0.2rem 0.6rem;
    border-radius: var(--raio-pill);
    background: color-mix(in oklch, var(--branco) 90%, transparent);
    color: var(--rosa-800);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
  }

  /* Galeria de fotos da peça (diálogo nativo + carrossel com scroll-snap). */
  .galeria {
    margin: auto;
    padding: var(--espaco-sm);
    width: min(100% - 2 * var(--espaco-sm), 40rem);
    max-height: 100dvh;
    border: none;
    border-radius: var(--raio-md);
    background: var(--cor-superficie);
    color: var(--cor-texto);
  }
  .galeria[open] { display: flex; flex-direction: column; gap: var(--espaco-xs); }
  /* Entrada/saída suaves em CSS puro (@starting-style + allow-discrete). Em navegador sem suporte,
     o diálogo só aparece e some direto — nada quebra. */
  .galeria {
    opacity: 0;
    translate: 0 14px;
    transition: opacity var(--duracao-media) var(--easing-padrao), translate var(--duracao-media) var(--easing-padrao),
      overlay var(--duracao-media) allow-discrete, display var(--duracao-media) allow-discrete;
  }
  .galeria[open] { opacity: 1; translate: 0 0; }
  @starting-style {
    .galeria[open] { opacity: 0; translate: 0 14px; }
  }
  .galeria::backdrop {
    background: transparent;
    transition: background-color var(--duracao-media) var(--easing-padrao), overlay var(--duracao-media) allow-discrete,
      display var(--duracao-media) allow-discrete;
  }
  .galeria[open]::backdrop { background: color-mix(in oklch, var(--rosa-900) 70%, transparent); }
  @starting-style {
    .galeria[open]::backdrop { background: transparent; }
  }
  .galeria__acoes { display: flex; gap: var(--espaco-xs); }
  .galeria__fechar[aria-pressed="true"] { background: var(--rosa-200); }
  .galeria__cabecalho { display: flex; align-items: center; justify-content: space-between; gap: var(--espaco-sm); }
  .galeria__titulo { font-size: var(--tamanho-h3); }
  .galeria__fechar,
  .galeria__seta {
    display: grid;
    place-items: center;
    width: 2.75rem; /* alvo de toque mínimo de 44px */
    height: 2.75rem;
    border: none;
    border-radius: var(--raio-pill);
    background: color-mix(in oklch, var(--branco) 88%, transparent);
    color: var(--rosa-800);
    cursor: pointer;
  }
  .galeria__fechar:hover,
  .galeria__seta:hover:not(:disabled) { background: var(--rosa-100); }
  .galeria__seta:disabled { opacity: 0.35; cursor: default; }
  .galeria__palco { position: relative; }
  .galeria__faixa {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    border-radius: var(--raio-md);
    background: var(--rosa-50);
    min-height: 8rem;
  }
  .galeria__faixa::-webkit-scrollbar { display: none; }
  .galeria__slide {
    flex: 0 0 100%;
    max-height: 70dvh;
    overflow: hidden;
    scroll-snap-align: center;
    scrollbar-width: none;
  }
  .galeria__slide::-webkit-scrollbar { display: none; }
  .galeria__foto {
    display: block;
    width: 100%;
    max-height: 70dvh;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    cursor: zoom-in;
  }
  /* Foto ampliada: 2,5x maior que a caixa; o slide rola pra mover a imagem. */
  .galeria__slide.is-zoom { overflow: auto; }
  .galeria__slide.is-zoom .galeria__foto { width: 250%; max-width: none; max-height: none; cursor: zoom-out; }
  .galeria__esqueleto {
    flex: 0 0 100%;
    aspect-ratio: 1 / 1;
    background: var(--rosa-100);
    animation: pulsar-esqueleto 1.2s ease-in-out infinite alternate;
  }
  @keyframes pulsar-esqueleto { from { opacity: 0.45; } to { opacity: 1; } }
  .galeria__seta { position: absolute; top: 50%; translate: 0 -50%; }
  .galeria__seta--anterior { left: var(--espaco-xs); }
  .galeria__seta--proxima { right: var(--espaco-xs); }
  .galeria__rodape { display: flex; align-items: center; justify-content: space-between; gap: var(--espaco-sm); }
  .galeria__miniaturas { display: flex; gap: var(--espaco-xs); }
  .galeria__miniatura {
    width: 3.5rem;
    height: 3.5rem;
    padding: 0;
    border: 2px solid transparent;
    border-radius: var(--raio-sm);
    overflow: hidden;
    background: none;
    cursor: pointer;
  }
  .galeria__miniatura img { width: 100%; height: 100%; object-fit: cover; }
  .galeria__miniatura[aria-current="true"] { border-color: var(--rosa-600); }
  .galeria__contador { font-size: var(--tamanho-pequeno); color: var(--cor-texto-suave); }
  @media (prefers-reduced-motion: reduce) {
    .galeria__faixa { scroll-behavior: auto; }
    .galeria, .galeria::backdrop { transition: none; }
    .galeria__esqueleto { animation: none; }
  }

  .painel-carrinho__rodape { display: flex; flex-direction: column; gap: var(--espaco-sm); }
  .painel-carrinho__subtotal {
    display: flex;
    justify-content: space-between;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--rosa-800);
  }
}