/* ── Variáveis de tema ─────────────────────────────── */
    :root {
      --bg:        #080c14;
      --surface:   #0f1623;
      --border:    rgba(255,255,255,0.07);
      --accent:    #3b82f6;
      --accent-2:  #10b981;
      --text:      #f1f5f9;
      --muted:     #475569;
    }
 
    /* ── Base ──────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; }
 
    body {
      font-family: 'Inter', sans-serif;
      background-color: var(--bg);
      color: var(--text);
      min-height: 100vh;
    }
 
    /* Fundo com grade sutil */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background-image:
        linear-gradient(rgba(59,130,246,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(59,130,246,0.03) 1px, transparent 1px);
      background-size: 40px 40px;
      pointer-events: none;
      z-index: 0;
    }
 
    /* ── Barra de busca ────────────────────────────────── */
    .search-wrap {
      position: relative;
      max-width: 480px;
      margin: 0 auto 3rem;
    }
    .search-wrap svg {
      position: absolute;
      left: 1rem;
      top: 50%;
      transform: translateY(-50%);
      color: var(--muted);
      pointer-events: none;
    }
    #busca-sabor {
      width: 100%;
      padding: .75rem 1rem .75rem 2.75rem;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 999px;
      color: var(--text);
      font-size: .875rem;
      outline: none;
      transition: border-color .2s, box-shadow .2s;
    }
    #busca-sabor::placeholder { color: var(--muted); }
    #busca-sabor:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(59,130,246,.15);
    }
 
    /* ── Card de produto ───────────────────────────────── */
    .product-card {
      position: relative;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 1.5rem;
      padding: 1.5rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
      overflow: hidden;
      z-index: 1;
    }
    .product-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 50% -20%, rgba(59,130,246,.08), transparent 70%);
      pointer-events: none;
    }
    .product-card:hover {
      transform: translateY(-6px);
      border-color: rgba(59,130,246,.4);
      box-shadow: 0 20px 40px -15px rgba(59,130,246,.25);
    }
 
    /* ── Imagem ────────────────────────────────────────── */
    .product-card .img-wrap {
      position: relative;
      width: 100%;
      height: 11rem;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 1.25rem;
    }
    .product-card .img-wrap img {
      max-height: 100%;
      object-fit: contain;
      transition: transform .5s ease;
      filter: drop-shadow(0 8px 20px rgba(0,0,0,.5));
    }
    .product-card:hover .img-wrap img { transform: scale(1.08); }
 
    /* ── Título ────────────────────────────────────────── */
    .product-card h2 {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 1.25rem;
      font-weight: 900;
      letter-spacing: .05em;
      text-transform: uppercase;
      text-align: center;
      margin-bottom: 1rem;
      color: var(--text);
    }
 
    /* ── Divisor de sabores ────────────────────────────── */
    .sabores-label {
      width: 100%;
      font-size: .625rem;
      font-weight: 700;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--muted);
      text-align: center;
      padding-bottom: .5rem;
      margin-bottom: .75rem;
      border-bottom: 1px solid var(--border);
    }
 
    /* ── Badges de sabor ───────────────────────────────── */
    .sabores-container {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      gap: .35rem;
      justify-content: center;
    }
 
    /* Badge individual */
    .sabor-badge {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 2px;
      border-radius: 9999px;
      background: linear-gradient(135deg, rgba(59,130,246,.5), rgba(16,185,129,.3));
      text-decoration: none;
      transition: transform .2s, filter .2s;
      cursor: pointer;
    }
    .sabor-badge:hover {
      transform: scale(1.07);
      filter: brightness(1.2);
    }
    .sabor-badge:active { transform: scale(.97); }
 
    .sabor-badge__glow {
      position: absolute;
      inset: 0;
      border-radius: inherit;
      opacity: 0;
      background: radial-gradient(circle at center, rgba(59,130,246,.5), transparent 70%);
      transition: opacity .3s;
    }
    .sabor-badge:hover .sabor-badge__glow { opacity: 1; }
 
    .sabor-badge__text {
      position: relative;
      display: block;
      padding: .35rem .8rem;
      background: var(--bg);
      border-radius: 9999px;
      font-size: .65rem;
      font-weight: 600;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--text);
      white-space: nowrap;
    }
 
    /* ── Estado: sem estoque ───────────────────────────── */
    .sem-estoque {
      width: 100%;
      text-align: center;
      font-size: .7rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .12em;
      color: #ef4444;
      padding: .75rem;
      border: 1px solid rgba(239,68,68,.15);
      border-radius: .75rem;
      background: rgba(239,68,68,.04);
      font-style: italic;
      opacity: .8;
    }
    .sem-estoque--erro { color: #f97316; border-color: rgba(249,115,22,.15); background: rgba(249,115,22,.04); }
 
    /* ── Loading ───────────────────────────────────────── */
    .loading-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: .5rem;
      padding: .75rem 0;
    }
    .loading-animation {
      width: 18px; height: 18px;
      border: 2px solid rgba(255,255,255,.1);
      border-top-color: var(--accent);
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    .loading-txt {
      font-size: .6rem;
      font-style: italic;
      color: var(--muted);
      animation: blink 2s ease-in-out infinite;
    }
    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:.4} }
 
    /* ── Tags de puffs / série ─────────────────────────── */
    .badge-puffs, .badge-serie {
      font-size: .6rem;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
      padding: .25rem .5rem;
      border-radius: .35rem;
    }
    .badge-puffs { background: rgba(59,130,246,.15); color: #93c5fd; }
    .badge-serie { background: rgba(255,255,255,.07); color: #e2e8f0; }
 
    /* ── Oculto (busca) ────────────────────────────────── */
    section[hidden] { display: none !important; }

    .glow-text {
      text-shadow: 0 0 40px rgba(6, 182, 212, 0.4);
    }
    .card-glow:hover {
      box-shadow: 0 0 60px rgba(6, 182, 212, 0.08);
    }