/* 🎨 PALETA DE CORES NOTURNA */
    :root {
      --fundo-escuro: #0a0a0a;
      --fundo-card: #141414;      
      --borda: #222222;           
      --texto-principal: #ffffff; 
      --texto-secundario: #8a8a8a;
      --vermelho-destaque: #b30000;
      --vermelho-hover: #e60000;   
      --verde-status: #25d366;
    }

    * { 
      box-sizing: border-box; 
      margin: 0; 
      padding: 0; 
    }

    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: var(--fundo-escuro);
      color: var(--texto-principal);
      padding-bottom: 60px;
    }

    /* ─── TOPO DO SITE ─── */
    header {
      background-color: var(--fundo-card);
      border-bottom: 1px solid var(--borda);
      padding: 15px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: sticky;
      top: 0;
      z-index: 100;
    }
    .logo { 
      font-weight: bold; 
      font-size: 20px; 
      letter-spacing: 1px; 
      color: var(--texto-principal); 
    }
    .logo span { 
      color: var(--vermelho-destaque); 
    }

    /* ─── ESTRUTURA DO BANNER E PERFIL ─── */
    .header-loja-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
      position: relative;
    }
    
    .banner-retangulo {
      width: 100%;
      height: 250px;
      background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.7)), url('https://i.ibb.co/pBbHPfpS/banner.jpg') center/cover;
      border-radius: 12px;
      border: 1px solid var(--borda);
    }

    .info-loja-bloco {
      display: flex;
      align-items: flex-end;
      padding: 0 20px;
      margin-top: -60px;
      margin-bottom: 25px;
    }

    .perfil-quadrado {
      width: 130px;
      height: 130px;
      background-color: var(--fundo-card);
      border: 4px solid var(--fundo-escuro);
      border-radius: 16px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      flex-shrink: 0;
    }
    .perfil-quadrado img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .texto-loja {
      margin-left: 20px;
      margin-bottom: 10px;
    }
    .texto-loja h2 {
      font-size: 26px;
      font-weight: bold;
      margin-bottom: 8px;
    }
    .status-linha {
      font-size: 13px;
      color: var(--texto-secundario);
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .status-aberto {
      color: var(--verde-status);
      font-weight: bold;
    }
    .separador-ponto {
      color: var(--borda);
    }

    /* ─── BARRA DE AÇÕES E FILTROS ─── */
    .barra-acoes {
      display: flex;
      align-items: center;
      gap: 15px;
      margin-bottom: 30px;
      flex-wrap: wrap;
    }

    .caixinha-seletor {
      background-color: var(--fundo-card);
      border: 1px solid var(--borda);
      color: var(--texto-principal);
      padding: 12px 16px;
      border-radius: 8px;
      font-size: 14px;
      cursor: pointer;
      outline: none;
      min-width: 180px;
      font-family: inherit;
      -webkit-appearance: none;
      background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
      background-repeat: no-repeat;
      background-position: right 10px center;
      padding-right: 30px;
    }
    .caixinha-seletor option {
      background-color: var(--fundo-card);
      color: var(--texto-principal);
    }

    .busca-container {
      position: relative;
      flex-grow: 1;
    }
    .busca-input {
      width: 100%;
      background-color: var(--fundo-card);
      border: 1px solid var(--borda);
      color: var(--texto-principal);
      padding: 12px 16px 12px 40px;
      border-radius: 8px;
      font-size: 14px;
      outline: none;
    }
    .busca-input:focus {
      border-color: var(--vermelho-destaque);
    }
    .busca-icone {
      position: absolute;
      left: 14px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--texto-secundario);
    }

    /* ─── CONTEÚDO PRINCIPAL ─── */
    .conteudo {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
    }

    .secao-titulo { 
      font-size: 20px;
      margin-bottom: 20px; 
      border-left: 4px solid var(--vermelho-destaque); 
      padding-left: 10px; 
    }
    
    .grade-produtos {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 20px;
      margin-bottom: 40px;
    }

    /* CARD DO PRODUTO EM DESTAQUE (VERTICAL) */
    .card-produto {
      background-color: var(--fundo-card);
      border: 1px solid var(--borda);
      border-radius: 8px;
      padding: 15px;
      display: flex;
      flex-direction: column;
      transition: transform 0.2s, border-color 0.2s;
    }
    .card-produto:hover { 
      transform: translateY(-4px); 
      border-color: var(--vermelho-destaque); 
    }
    
    .card-produto img {
      width: 100%;
      height: 160px;
      object-fit: contain;
      background-color: #0d0d0d;
      border-radius: 6px;
      margin-bottom: 12px;
    }
    .card-produto h3 { 
      font-size: 15px; 
      font-weight: 600; 
      line-height: 1.4; 
      margin-bottom: 8px; 
      height: 42px; 
      overflow: hidden; 
    }
    .card-produto .marca { 
      font-size: 11px; 
      text-transform: uppercase; 
      color: var(--vermelho-destaque); 
      font-weight: bold; 
      margin-bottom: 4px; 
    }
    .card-produto .preco { 
      font-size: 18px; 
      font-weight: bold; 
      margin-bottom: 12px; 
      margin-top: auto; 
    }
    
    .card-produto button {
      background-color: var(--vermelho-destaque);
      color: white;
      border: none;
      padding: 10px;
      border-radius: 6px;
      font-weight: bold;
      cursor: pointer;
      transition: 0.2s;
    }
    .card-produto button:hover { 
      background-color: var(--vermelho-hover); 
    }

    /* ─── LAYOUT HORIZONTAL ─── */
    .grade-produtos-horizontal {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
      margin-bottom: 40px;
    }

    .card-produto-horizontal {
      background-color: var(--fundo-card);
      border: 1px solid var(--borda);
      border-radius: 8px;
      padding: 15px;
      display: flex;
      flex-direction: row; 
      gap: 15px;
      align-items: center;
      transition: transform 0.2s, border-color 0.2s;
    }
    .card-produto-horizontal:hover { 
      transform: translateY(-2px); 
      border-color: var(--vermelho-destaque); 
    }

    .card-produto-horizontal img {
      width: 120px;
      height: 120px;
      object-fit: contain;
      background-color: #0d0d0d;
      border-radius: 6px;
      flex-shrink: 0;
    }

    .card-horizontal-info {
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      height: 100%;
    }
    .card-horizontal-info h3 { 
      font-size: 15px; 
      font-weight: 600; 
      line-height: 1.3; 
      margin-bottom: 6px; 
    }
    .card-horizontal-info .marca { 
      font-size: 11px; 
      text-transform: uppercase; 
      color: var(--vermelho-destaque); 
      font-weight: bold; 
      margin-bottom: 4px; 
    }
    .card-horizontal-info .preco { 
      font-size: 16px; 
      font-weight: bold; 
      margin-top: auto; 
      margin-bottom: 10px; 
    }

    .card-horizontal-info button {
      background-color: var(--vermelho-destaque);
      color: white;
      border: none;
      padding: 8px 12px;
      border-radius: 6px;
      font-weight: bold;
      cursor: pointer;
      transition: 0.2s;
      align-self: flex-start;
    }
    .card-horizontal-info button:hover { 
      background-color: var(--vermelho-hover); 
    }

    /* 🛒 SACOLA FLUTUANTE E LATERAL */
    #sacola-flutuante {
      position: fixed;
      bottom: 30px;
      right: 30px;
      background-color: var(--vermelho-destaque);
      color: white;
      width: 65px;
      height: 65px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.6);
      cursor: pointer;
      transition: transform 0.2s;
      z-index: 1000;
    }
    #sacola-flutuante:hover { 
      transform: scale(1.1); 
      background-color: var(--vermelho-hover); 
    }
    .contador-sacola {
      position: absolute;
      top: -2px;
      right: -2px;
      background-color: white;
      color: black;
      font-size: 11px;
      font-weight: bold;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .sacola-lateral {
      position: fixed;
      top: 0;
      right: -360px;
      width: 360px;
      height: 100%;
      background-color: var(--fundo-card);
      border-left: 1px solid var(--borda);
      box-shadow: -5px 0 15px rgba(0,0,0,0.5);
      z-index: 2000;
      transition: right 0.3s ease;
      display: flex;
      flex-direction: column;
      padding: 20px;
      padding-bottom: 45px;
    }
    .sacola-lateral.aberta {
      right: 0;
    }
    .sacola-topo {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      border-bottom: 1px solid var(--borda);
      padding-bottom: 10px;
    }
    .fechar-sacola {
      background: none;
      border: none;
      color: white;
      font-size: 22px;
      cursor: pointer;
    }
    .sacola-itens {
      flex-grow: 1;
      overflow-y: auto;
      margin-bottom: 20px;
    }
    .item-carrinho {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--borda);
    }
    .item-info {
      max-width: 60%;
    }
    .item-info h4 {
      font-size: 14px;
      font-weight: 600;
      line-height: 1.3;
      margin-bottom: 4px;
    }
    .item-info p {
      color: var(--vermelho-destaque);
      font-weight: bold;
      font-size: 14px;
    }
    .qtd-controles {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .btn-qtd {
      background: #222;
      border: 1px solid #333;
      color: white;
      width: 28px;
      height: 28px;
      border-radius: 6px;
      cursor: pointer;
      font-weight: bold;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: 0.2s;
    }
    .btn-qtd:hover {
      background-color: var(--vermelho-destaque);
      border-color: var(--vermelho-destaque);
    }
    .sacola-fim {
      border-top: 1px solid var(--borda);
      padding-top: 15px;
    }
    .total-linha {
      display: flex;
      justify-content: space-between;
      font-weight: bold;
      margin-bottom: 15px;
      font-size: 18px;
    }
    .campo-endereco, .campo-sacola-input {
      width: 100%;
      background: #0a0a0a;
      border: 1px solid var(--borda);
      color: white;
      padding: 12px;
      border-radius: 8px;
      margin-bottom: 12px;
      resize: none;
      font-family: inherit;
      font-size: 13px;
    }
    .campo-endereco:focus, .campo-sacola-input:focus {
      border-color: var(--vermelho-destaque);
      outline: none;
    }

    /* ─── JANELA DE DETALHES (MODAL) ─── */
    .modal-produto {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.85);
      z-index: 3000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
    .modal-conteudo {
      background: var(--fundo-card);
      border: 1px solid var(--borda);
      width: 100%;
      max-width: 600px;
      border-radius: 12px;
      display: flex;
      overflow: hidden;
      position: relative;
    }
    .modal-esquerda {
      width: 45%;
      background: #0d0d0d;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
    .modal-esquerda img {
      width: 100%;
      height: auto;
      max-height: 220px;
      object-fit: contain;
    }
    .modal-direita {
      width: 55%;
      padding: 25px;
      display: flex;
      flex-direction: column;
    }
    .modal-fechar {
      position: absolute;
      top: 15px;
      right: 15px;
      background: none;
      border: none;
      color: white;
      font-size: 20px;
      cursor: pointer;
    }
    .modal-qtd {
      display: flex;
      align-items: center;
      gap: 15px;
      margin: 15px 0;
    }
    .modal-qtd span {
      font-size: 18px;
      font-weight: bold;
      width: 30px;
      text-align: center;
    }

    /* RESPONSIVIDADE CELULAR */
    @media (max-width: 768px) {
      .info-loja-bloco { 
        flex-direction: column; 
        align-items: center; 
        text-align: center; 
        margin-top: -50px; 
      }
      .texto-loja { 
        margin-left: 0; 
        margin-top: 10px; 
      }
      .barra-acoes { 
        flex-direction: column; 
        align-items: stretch; 
      }
      .caixinha-seletor { 
        width: 100%; 
      }
      .sacola-lateral { 
        width: 100%; 
        right: -100%; 
      }
      .grade-produtos-horizontal { 
        grid-template-columns: 1fr; 
      }
      .modal-conteudo { 
        flex-direction: column; 
      }
      .modal-esquerda, .modal-direita { 
        width: 100%; 
      }
    }

    /* ─── RODAPÉ INSTITUCIONAL ─── */
    .rodape-loja {
      background-color: #000000;
      border-top: 1px solid var(--borda);
      padding: 40px 20px;
      text-align: center;
      font-size: 13px;
      color: var(--texto-secundario);
      line-height: 1.8;
    }
    .rodape-empresa {
      color: var(--texto-principal);
      font-weight: 600;
      letter-spacing: 0.5px;
    }
    .rodape-aviso {
      font-size: 12px;
      margin-top: 15px;
      opacity: 0.8;
    }
    .rodape-direitos {
      margin-top: 20px;
      font-size: 11px;
      border-top: 1px solid #111111;
      padding-top: 15px;
    }
    .rodape-autoria {
      margin-top: 5px;
      font-size: 12px;
    }
    .rodape-autoria span {
      color: var(--texto-principal);
      font-weight: bold;
    }