@keyframes dotPulse {
  0%,80%,100%{opacity:.3;transform:scale(.8);}
  40%{opacity:1;transform:scale(1.2);}
}

    /* ============================================================
       VARIÁVEIS GLOBAIS E RESET
    ============================================================ */
    :root {
      --cafe:      #2C1810;
      --cafe-mid:  #4A2C1D;
      --cafe-soft: #7A4E38;
      --creme:     #F8F0E0;
      --creme-mid: #EDE0C4;
      --creme-dark:#D9CAAC;
      --terra:     #C4622D;
      --terra-soft:#D98256;
      --ouro:      #C9913A;
      --ouro-soft: #E3B56A;
      --branco:    #FDFAF5;
      --cinza:     #888;
      --erro:      #C0392B;
      --sucesso:   #27AE60;
      --shadow:    rgba(44,24,16,.18);
      --radius:    12px;
      --radius-sm: 8px;
      --trans:     .22s ease;
      --font-serif: 'Playfair Display', Georgia, serif;
      --font-sans:  'Lato', sans-serif;
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      font-family: var(--font-sans);
      background: var(--creme);
      color: var(--cafe);
      min-height: 100vh;
      overflow-x: hidden;
    }
    img { display: block; max-width: 100%; }
    a { text-decoration: none; color: inherit; }
    button { cursor: pointer; font-family: var(--font-sans); border: none; outline: none; }
    input, select, textarea { font-family: var(--font-sans); outline: none; }

    /* ============================================================
       BARRA SUPERIOR (HEADER PÚBLICO)
    ============================================================ */
    #header {
      background: var(--cafe);
      padding: 0 2rem;
      position: sticky;
      top: 0;
      z-index: 100;
      box-shadow: 0 2px 18px var(--shadow);
    }
    .header-inner {
      max-width: 1100px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 80px;
    }
    .logo {
      display: flex;
      align-items: center;
      gap: .7rem;
    }
    .hero-logo-wrap {
      display: flex;
      justify-content: center;
      margin-bottom: 1.8rem;
      position: relative;
      z-index: 1;
    }
    .logo-icon {
      height: 220px;
      max-width: 220px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      background: rgba(255, 255, 255, 0.95);
      border-radius: 50%;
      padding: 0;
      border: 2.5px solid rgba(201, 145, 58, 0.55);
      box-shadow:
        0 0 0 6px rgba(201, 145, 58, 0.12),
        0 8px 32px rgba(0, 0, 0, 0.35);
      font-size: 2.5rem;
      aspect-ratio: 1 / 1;
      transition: box-shadow .3s ease;
    }
    .logo-icon img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 50%;
      display: block;
      background: transparent;
    }
    /* Oculta o wrap quando não há logo (emoji padrão) */
    .hero-logo-wrap:not(.tem-logo) .logo-icon {
      font-size: 3rem;
    }
    .logo-text {
      font-family: var(--font-serif);
      font-size: 1.25rem;
      font-weight: 600;
      color: var(--creme);
      line-height: 1.1;
    }
    .logo-text span { color: var(--ouro-soft); font-style: italic; font-weight: 400; display: block; font-size: .88rem; }

    /* Logo mini no header */
    .logo-icon-header {
      width: 64px; height: 64px;
      border-radius: 50%;
      background: rgba(255,255,255,.95);
      border: 2px solid rgba(201,145,58,.6);
      box-shadow: 0 0 0 3px rgba(201,145,58,.15), 0 2px 10px rgba(0,0,0,.25);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      overflow: hidden;
      font-size: 1.2rem;
    }
    .logo-icon-header img {
      width: 100%; height: 100%;
      object-fit: cover;
      border-radius: 50%;
      background: transparent;
    }

    /* Busca */
    .search-wrap {
      position: relative;
      display: flex;
      align-items: center;
    }
    #searchInput {
      background: rgba(255,255,255,.1);
      border: 1.5px solid rgba(255,255,255,.2);
      border-radius: 24px;
      padding: .42rem 1.1rem .42rem 2.4rem;
      color: var(--creme);
      font-size: .88rem;
      width: 200px;
      transition: var(--trans);
    }
    #searchInput::placeholder { color: rgba(255,255,255,.4); }
    #searchInput:focus { background: rgba(255,255,255,.15); border-color: var(--ouro-soft); width: 240px; }
    .search-icon {
      position: absolute; left: .75rem;
      color: rgba(255,255,255,.5); font-size: .9rem; pointer-events: none;
    }

    /* Botão login discreto */
    #btnLoginTopo {
      background: transparent;
      border: 1.5px solid rgba(255,255,255,.25);
      color: rgba(255,255,255,.6);
      border-radius: 20px;
      padding: .35rem .9rem;
      font-size: .78rem;
      letter-spacing: .04em;
      transition: var(--trans);
    }
    #btnLoginTopo:hover { border-color: var(--ouro-soft); color: var(--ouro-soft); }

    /* ============================================================
       HERO BANNER
    ============================================================ */
    #hero {
      padding: 4.5rem 2rem 3.8rem;
      text-align: center;
      position: relative;
      overflow: hidden;
      background: linear-gradient(135deg, var(--cafe) 0%, var(--cafe-mid) 55%, var(--cafe-soft) 100%);
      transition: padding .4s ease, min-height .4s ease;
    }

    /* Hero minimizado durante a busca */
    #hero.buscando {
      padding: 1rem 2rem;
    }
    #hero.buscando .hero-logo-wrap,
    #hero.buscando .hero-badge,
    #hero.buscando h1,
    #hero.buscando p,
    #hero.buscando #heroDots {
      display: none;
    }
    #hero.buscando #heroOverlay {
      background: rgba(20,10,5,.75);
    }

    /* Slides do carrossel — ficam atrás de tudo */
    .hero-slide {
      position: absolute; top: 0; right: 0; bottom: 0; left: 0;
      background-size: cover;
      background-position: center;
      opacity: 0;
      transition: opacity 1.2s ease;
      z-index: 0;
    }
    .hero-slide.active { opacity: 1; }

    /* Overlay escuro sobre as fotos para manter legibilidade */
    #heroOverlay {
      position: absolute; top: 0; right: 0; bottom: 0; left: 0;
      background: linear-gradient(
        to bottom,
        rgba(20, 10, 5, 0.62) 0%,
        rgba(44, 24, 16, 0.72) 100%
      );
      z-index: 1;
    }

    /* Pontos de navegação do carrossel */
    #heroDots {
      position: absolute;
      bottom: 1rem; left: 50%;
      transform: translateX(-50%);
      display: flex; gap: .45rem;
      z-index: 3;
    }
    .hero-dot {
      width: 7px; height: 7px;
      border-radius: 50%;
      background: rgba(255,255,255,.35);
      transition: background .3s, transform .3s;
      cursor: pointer;
      border: none; padding: 0;
    }
    .hero-dot.active {
      background: var(--ouro);
      transform: scale(1.3);
    }

    /* Conteúdo do hero fica acima dos slides */
    #hero > *:not(.hero-slide):not(#heroOverlay):not(#heroDots) {
      position: relative;
      z-index: 2;
    }

    #hero::before {
      content: '';
      position: absolute; top: 0; right: 0; bottom: 0; left: 0;
      background: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='30' cy='30' r='1.5' fill='rgba(201,145,58,.12)'/%3E%3C/svg%3E") repeat;
      z-index: 1;
      pointer-events: none;
    }
    .hero-badge {
      display: inline-block;
      background: var(--ouro);
      color: var(--cafe);
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      padding: .3rem .9rem;
      border-radius: 20px;
      margin-bottom: 1rem;
    }
    #hero h1 {
      font-family: var(--font-serif);
      font-size: clamp(1.4rem, 4vw, 3.2rem);
      color: var(--creme);
      line-height: 1.15;
      margin-bottom: .8rem;
      white-space: nowrap;
    }
    #hero h1 em { color: var(--ouro-soft); font-style: italic; }
    #hero p {
      color: rgba(255,255,255,.65);
      font-size: 1rem;
      max-width: 500px;
      margin: 0 auto;
      line-height: 1.7;
    }

    /* ============================================================
       NAVEGAÇÃO POR CATEGORIAS
    ============================================================ */
    #catNav {
      background: var(--branco);
      border-bottom: 2px solid var(--creme-dark);
      padding: 0 2rem;
      position: sticky;
      top: 80px;
      z-index: 90;
    }
    .catNav-inner {
      max-width: 1100px;
      margin: 0 auto;
      display: flex;
      gap: .25rem;
      overflow-x: auto;
      scrollbar-width: none;
    }
    .catNav-inner::-webkit-scrollbar { display: none; }
    .cat-btn {
      white-space: nowrap;
      padding: .8rem 1.2rem;
      background: transparent;
      border-bottom: 3px solid transparent;
      color: var(--cafe-soft);
      font-size: .88rem;
      font-weight: 700;
      letter-spacing: .03em;
      transition: var(--trans);
    }
    .cat-btn:hover { color: var(--terra); }
    .cat-btn.active { color: var(--terra); border-color: var(--terra); }

    /* ============================================================
       CONTEÚDO PRINCIPAL
    ============================================================ */
    #main {
      max-width: 1100px;
      margin: 0 auto;
      padding: 2.5rem 1.5rem 4rem;
    }

    /* Seção de categoria */
    .category-section {
      margin-bottom: 3.5rem;
    }
    .category-section.hidden { display: none; }

    .cat-header {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin-bottom: 1.6rem;
    }
    .cat-header h2 {
      font-family: var(--font-serif);
      font-size: 1.65rem;
      font-weight: 800;
      color: var(--cafe);
    }
    .cat-line {
      flex: 1;
      height: 2px;
      background: linear-gradient(to right, var(--ouro), transparent);
    }

    /* Grid de produtos */
    .products-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
      gap: 1.4rem;
    }

    /* Card de produto */
    .product-card {
      background: var(--branco);
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: 0 2px 12px var(--shadow);
      transition: transform var(--trans), box-shadow var(--trans);
      display: flex;
      flex-direction: column;
      cursor: pointer; /* necessário para clicks no iOS Safari */
      -webkit-tap-highlight-color: rgba(0,0,0,0.05);
    }
    .product-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 24px rgba(44,24,16,.22);
    }
    .product-img-wrap {
      width: 100%;
      height: 180px;
      overflow: hidden;
      background: var(--creme-mid);
      position: relative;
    }
    .product-img-wrap img {
      width: 100%; height: 100%;
      object-fit: cover;
      transition: transform .4s ease;
    }
    .product-card:hover .product-img-wrap img { transform: scale(1.06); }
    .product-img-placeholder {
      width: 100%; height: 100%;
      display: flex; align-items: center; justify-content: center;
      font-size: 3rem; color: var(--creme-dark);
    }
    .product-body {
      padding: 1rem 1.1rem 1.2rem;
      display: flex;
      flex-direction: column;
      flex: 1;
    }
    .product-name {
      font-family: var(--font-serif);
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--cafe);
      margin-bottom: .35rem;
    }
    .product-desc {
      font-size: .82rem;
      color: var(--cafe-soft);
      line-height: 1.55;
      flex: 1;
      margin-bottom: .8rem;
    }
    .product-price {
      font-family: var(--font-serif);
      font-size: 1.15rem;
      font-weight: 700;
      color: var(--terra);
    }

    .product-price-wrap {
      display: flex;
      flex-direction: column;
      gap: .1rem;
      margin-top: .2rem;
    }
    .product-price-promo-badge {
      display: inline-block;
      background: var(--terra);
      color: #fff;
      font-size: .62rem;
      font-weight: 800;
      letter-spacing: .06em;
      padding: .15rem .45rem;
      border-radius: 20px;
      width: fit-content;
    }
    .product-price-old {
      font-size: .88rem;
      color: var(--cinza);
      text-decoration: line-through;
    }
    .product-price-promo {
      font-size: 1.25rem;
      color: var(--terra);
    }

    /* Estado vazio */
    .empty-state {
      grid-column: 1/-1;
      text-align: center;
      padding: 3rem;
      color: var(--cinza);
    }
    .empty-state-icon { font-size: 2.5rem; margin-bottom: .6rem; }

    /* ============================================================
       SEÇÃO DE CONTATO / WHATSAPP
    ============================================================ */
    #contato {
      background: linear-gradient(135deg, var(--cafe-mid) 0%, var(--cafe) 100%);
      padding: 3.5rem 2rem;
      text-align: center;
    }
    #contato h2 {
      font-family: var(--font-serif);
      color: var(--creme);
      font-size: 1.8rem;
      margin-bottom: .6rem;
    }
    #contato p {
      color: rgba(255,255,255,.6);
      margin-bottom: 1.6rem;
      font-size: .95rem;
    }
    .btn-whatsapp {
      display: inline-flex;
      align-items: center;
      gap: .6rem;
      background: #25D366;
      color: #fff;
      padding: .9rem 2rem;
      border-radius: 30px;
      font-size: 1rem;
      font-weight: 700;
      letter-spacing: .02em;
      box-shadow: 0 4px 20px rgba(37,211,102,.4);
      transition: transform var(--trans), box-shadow var(--trans);
    }
    .btn-whatsapp:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 28px rgba(37,211,102,.55);
    }
    .btn-whatsapp svg { width: 22px; height: 22px; fill: #fff; }

    /* FOOTER */
    footer {
      background: var(--cafe);
      text-align: center;
      padding: 1.2rem;
      color: rgba(255,255,255,.3);
      font-size: .75rem;
    }

    /* ============================================================
       MODAL BASE
    ============================================================ */
    .modal-overlay {
      display: none;
      position: fixed; top: 0; right: 0; bottom: 0; left: 0;
      background: rgba(20,10,5,.7);
      -webkit-backdrop-filter: blur(4px);
      backdrop-filter: blur(4px);
      z-index: 1000;
      align-items: flex-start;
      justify-content: center;
      padding: 1.5rem 1rem;
      overflow-y: auto;
    }
    .modal-overlay.open { display: flex; }
    .modal-box {
      background: var(--branco);
      border-radius: var(--radius);
      width: 100%;
      max-width: 440px;
      max-height: calc(100vh - 3rem);
      padding: 2rem 2rem 1.8rem;
      position: relative;
      box-shadow: 0 20px 60px rgba(0,0,0,.4);
      animation: modalIn .28s ease;
      overflow-y: auto;
      margin: auto;
    }
    @keyframes modalIn {
      from { transform: translateY(20px) scale(.97); opacity: 0; }
      to   { transform: none; opacity: 1; }
    }
    .modal-title {
      font-family: var(--font-serif);
      font-size: 1.45rem;
      font-weight: 800;
      color: var(--cafe);
      margin-bottom: 1.8rem;
    }
    .modal-close {
      position: absolute; top: 1rem; right: 1rem;
      background: var(--creme-mid);
      border: none;
      width: 30px; height: 30px;
      border-radius: 50%;
      font-size: 1rem;
      color: var(--cafe-soft);
      display: flex; align-items: center; justify-content: center;
      transition: var(--trans);
    }
    .modal-close:hover { background: var(--creme-dark); color: var(--cafe); }

    /* ============================================================
       FORMULÁRIOS (COMPARTILHADO)
    ============================================================ */
    .form-group {
      margin-bottom: 1rem;
    }
    .form-label {
      display: block;
      font-size: .8rem;
      font-weight: 700;
      letter-spacing: .05em;
      text-transform: uppercase;
      color: var(--cafe-soft);
      margin-bottom: .4rem;
    }
    .form-input, .form-select, .form-textarea {
      width: 100%;
      padding: .62rem .9rem;
      border: 1.5px solid var(--creme-dark);
      border-radius: var(--radius-sm);
      font-size: .9rem;
      color: var(--cafe);
      background: var(--branco);
      transition: border-color var(--trans), box-shadow var(--trans);
    }
    .form-input:focus, .form-select:focus, .form-textarea:focus {
      border-color: var(--ouro);
      box-shadow: 0 0 0 3px rgba(201,145,58,.15);
    }
    .form-textarea { resize: vertical; min-height: 80px; }
    .form-input.error, .form-select.error, .form-textarea.error {
      border-color: var(--erro);
    }
    .error-msg { color: var(--erro); font-size: .78rem; margin-top: .25rem; }

    /* Abas de fonte de imagem (URL / Upload) */
    .img-source-tabs {
      display: flex;
      gap: .3rem;
      margin-bottom: .55rem;
      background: var(--creme-mid);
      border-radius: var(--radius-sm);
      padding: .25rem;
    }
    .img-tab {
      flex: 1;
      padding: .38rem .6rem;
      border-radius: 6px;
      background: transparent;
      border: none;
      font-size: .8rem;
      font-weight: 700;
      color: var(--cafe-soft);
      transition: var(--trans);
      letter-spacing: .03em;
    }
    .img-tab.active { background: var(--branco); color: var(--terra); box-shadow: 0 1px 4px var(--shadow); }
    .img-tab:hover:not(.active) { color: var(--cafe); }

    /* Área de drag & drop para upload */
    .upload-drop-area {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: .3rem;
      width: 100%;
      padding: 1.2rem 1rem;
      border: 2px dashed var(--creme-dark);
      border-radius: var(--radius-sm);
      background: var(--creme);
      cursor: pointer;
      transition: border-color var(--trans), background var(--trans);
      text-align: center;
    }
    .upload-drop-area:hover,
    .upload-drop-area.drag-over { border-color: var(--ouro); background: rgba(201,145,58,.06); }
    .upload-icon { font-size: 1.8rem; line-height: 1; }
    .upload-text { font-size: .85rem; font-weight: 700; color: var(--cafe); }
    .upload-hint { font-size: .74rem; color: var(--cinza); }
    .upload-file-name {
      font-size: .78rem;
      color: var(--sucesso);
      margin-top: .35rem;
      font-weight: 700;
      min-height: 1.1em;
    }

    /* Preview de imagem */
    .img-preview-wrap {
      width: 100%;
      height: 130px;
      border-radius: var(--radius-sm);
      overflow: hidden;
      background: var(--creme-mid);
      display: flex; align-items: center; justify-content: center;
      margin-top: .6rem;
      font-size: .82rem;
      color: var(--cinza);
      position: relative;
    }
    .img-preview-wrap img { width: 100%; height: 100%; object-fit: cover; }
    .preview-remove {
      position: absolute; top: .4rem; right: .4rem;
      background: rgba(44,24,16,.7);
      color: #fff;
      border: none;
      border-radius: 50%;
      width: 24px; height: 24px;
      font-size: .8rem;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      transition: background var(--trans);
    }
    .preview-remove:hover { background: var(--erro); }

    /* Botões */
    .btn {
      display: inline-flex; align-items: center; gap: .4rem;
      padding: .62rem 1.4rem;
      border-radius: var(--radius-sm);
      font-size: .88rem;
      font-weight: 700;
      letter-spacing: .03em;
      transition: var(--trans);
    }
    .btn-primary {
      background: var(--terra);
      color: #fff;
    }
    .btn-primary:hover { background: var(--terra-soft); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(196,98,45,.35); }
    .btn-secondary {
      background: var(--creme-mid);
      color: var(--cafe);
    }
    .btn-secondary:hover { background: var(--creme-dark); }
    .btn-outline {
      background: transparent;
      border: 1.5px solid var(--creme-dark);
      color: var(--cafe-soft);
    }
    .btn-outline:hover { border-color: var(--terra); color: var(--terra); }
    .btn-danger {
      background: #fef0ef;
      color: var(--erro);
      border: 1.5px solid #fad4d1;
    }
    .btn-danger:hover { background: var(--erro); color: #fff; }
    .btn-gold {
      background: var(--ouro);
      color: var(--cafe);
    }
    .btn-gold:hover { background: var(--ouro-soft); transform: translateY(-1px); }
    .btn-sm { padding: .38rem .85rem; font-size: .78rem; }
    .btn-full { width: 100%; justify-content: center; }

    /* Alertas */
    .alert {
      padding: .7rem 1rem;
      border-radius: var(--radius-sm);
      font-size: .85rem;
      margin-bottom: 1rem;
    }
    .alert-success { background: #eafaf1; color: var(--sucesso); border-left: 3px solid var(--sucesso); }
    .alert-error   { background: #fdf3f2; color: var(--erro);    border-left: 3px solid var(--erro); }

    /* ============================================================
       PAINEL ADMINISTRATIVO
    ============================================================ */
    #adminPanel {
      display: none;
      position: fixed; top: 0; right: 0; bottom: 0; left: 0;
      background: var(--creme);
      z-index: 500;
      overflow-y: auto;
    }
    #adminPanel.open { display: block; }

    .admin-topbar {
      background: var(--cafe);
      padding: 0 2rem;
      position: sticky;
      top: 0;
      z-index: 10;
    }
    .admin-topbar-inner {
      max-width: 1100px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 60px;
    }
    .admin-brand {
      font-family: var(--font-serif);
      color: var(--ouro);
      font-size: 1.1rem;
      font-weight: 700;
    }
    .admin-user-info {
      display: flex;
      align-items: center;
      gap: .8rem;
    }
    .badge-role {
      font-size: .7rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .08em;
      padding: .25rem .7rem;
      border-radius: 14px;
    }
    .badge-admin    { background: var(--ouro); color: var(--cafe); }
    .badge-func     { background: var(--terra); color: #fff; }
    .admin-username { color: rgba(255,255,255,.75); font-size: .85rem; }

    /* Abas do admin */
    .admin-tabs {
      background: var(--branco);
      border-bottom: 2px solid var(--creme-dark);
      padding: 0 2rem;
      overflow-x: auto;
      scrollbar-width: none;
    }
    .admin-tabs::-webkit-scrollbar { display: none; }
    .admin-tabs-inner {
      max-width: 1100px;
      margin: 0 auto;
      display: flex;
      gap: .2rem;
      min-width: max-content; /* impede que os botões encolham */
    }
    .admin-tab {
      padding: .85rem 1.3rem;
      background: transparent;
      border-bottom: 3px solid transparent;
      color: var(--cafe-soft);
      font-size: .88rem;
      font-weight: 700;
      letter-spacing: .03em;
      transition: var(--trans);
      white-space: nowrap;
    }
    .admin-tab:hover  { color: var(--terra); }
    .admin-tab.active { color: var(--terra); border-color: var(--terra); }
    .admin-tab.hidden { display: none; }

    .admin-content {
      max-width: 1100px;
      margin: 0 auto;
      padding: 2rem 1.5rem 4rem;
    }

    /* Painéis de abas */
    .tab-panel { display: none; }
    .tab-panel.active { display: block; }

    /* Seção interna */
    .admin-section-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 1.8rem;
      flex-wrap: wrap;
      gap: .8rem;
    }
    .admin-section-title {
      font-family: var(--font-serif);
      font-size: 1.4rem;
      font-weight: 800;
      color: var(--cafe);
    }

    /* Tabela admin */
    .admin-table-wrap {
      background: var(--branco);
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: 0 2px 10px var(--shadow);
      overflow-x: auto;
    }
    .admin-table {
      width: 100%;
      border-collapse: collapse;
      font-size: .88rem;
    }
    .admin-table th {
      background: var(--cafe);
      color: var(--creme);
      text-align: left;
      padding: .75rem 1rem;
      font-size: .75rem;
      letter-spacing: .06em;
      text-transform: uppercase;
      white-space: nowrap;
    }
    .admin-table td {
      padding: .8rem 1rem;
      border-bottom: 1px solid var(--creme-mid);
      vertical-align: middle;
      color: var(--cafe);
    }
    .admin-table tr:last-child td { border-bottom: none; }
    .admin-table tr:hover td { background: var(--creme); }

    /* Thumb produto na tabela */
    .table-thumb {
      width: 48px; height: 48px;
      border-radius: 8px;
      object-fit: cover;
      background: var(--creme-mid);
    }
    .table-thumb-placeholder {
      width: 48px; height: 48px;
      border-radius: 8px;
      background: var(--creme-mid);
      display: flex; align-items: center; justify-content: center;
      font-size: 1.4rem;
    }

    /* Pill de ações */
    .actions-cell { display: flex; gap: .4rem; flex-wrap: wrap; }

    /* ============================================================
       DRAG & DROP — REORDENAÇÃO DE LINHAS
    ============================================================ */
    .drag-handle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px; height: 28px;
      border-radius: 6px;
      color: var(--creme-dark);
      font-size: 1.1rem;
      cursor: grab;
      transition: color var(--trans), background var(--trans);
      user-select: none;
    }
    .drag-handle:hover { color: var(--cafe-soft); background: var(--creme-mid); }
    .drag-handle:active { cursor: grabbing; }
    tr.dragging > td { opacity: .3; background: var(--creme) !important; }
    tr.drag-over-top    > td { box-shadow: inset 0 3px 0 var(--terra); }
    tr.drag-over-bottom > td { box-shadow: inset 0 -3px 0 var(--terra); }
    .drag-hint {
      display: flex; align-items: center; gap: .4rem;
      font-size: .76rem; color: var(--cinza);
      margin-bottom: .55rem; padding: .2rem 0;
    }

    /* Empty admin */
    .admin-empty {
      text-align: center;
      padding: 3rem;
      color: var(--cinza);
    }

    /* ============================================================
       MODAL GRANDE (produto / usuário)
    ============================================================ */
    .modal-box.large { max-width: 560px; }

    /* ============================================================
       TOAST NOTIFICAÇÃO
    ============================================================ */
    #toast {
      position: fixed;
      bottom: 2rem;
      left: 50%;
      transform: translateX(-50%) translateY(80px);
      background: var(--cafe);
      color: var(--creme);
      padding: .75rem 1.5rem;
      border-radius: 30px;
      font-size: .88rem;
      font-weight: 700;
      box-shadow: 0 6px 24px rgba(0,0,0,.35);
      transition: transform .3s ease, opacity .3s ease;
      opacity: 0;
      z-index: 2000;
      pointer-events: none;
      white-space: nowrap;
    }
    #toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
    #toast.success { background: var(--sucesso); }
    #toast.error   { background: var(--erro); }

    /* ============================================================
       MODAL DE CONFIRMAÇÃO
    ============================================================ */
    #confirmModal .modal-box { max-width: 360px; text-align: center; }
    .confirm-icon { font-size: 2.8rem; margin-bottom: .6rem; }
    .confirm-msg { color: var(--cafe-soft); font-size: .95rem; margin-bottom: 1.4rem; line-height: 1.5; }
    .confirm-actions { display: flex; gap: .6rem; justify-content: center; }

    /* ============================================================
       RESPONSIVO
    ============================================================ */
    @media (max-width: 640px) {
      #header { padding: 0 1rem; }
      #searchInput { width: 130px; }
      #searchInput:focus { width: 160px; }
      #hero { padding: 2.5rem 1rem 2.5rem; }
      #catNav { padding: 0 1rem; }
      #main { padding: 1.5rem 1rem 3rem; }
      .products-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; }
      .product-img-wrap { height: 130px; }
      .admin-content { padding: 1.5rem 1rem 3rem; }
      .admin-tabs { padding: 0 1rem; }
    }

    /* ============================================================
       RESPONSIVIDADE MOBILE — melhorias completas
    ============================================================ */

    /* ── Telas até 480px (celulares pequenos) ─────────────── */
    @media (max-width: 480px) {

      /* Header: reduz altura e esconde o nome da empresa */
      .header-inner { height: 64px; }
      #catNav { top: 64px; }
      .cliente-dropdown { top: 64px; }
      .logo-text { display: none; }
      .logo-icon-header { width: 48px; height: 48px; }
      #searchInput { width: 110px; font-size: .8rem; }
      #searchInput:focus { width: 140px; }
      #btnLoginTopo { padding: .3rem .6rem; font-size: .72rem; }
      #btnClienteArea { padding: .3rem .6rem; font-size: .72rem; }

      /* Hero: logo menor, título em uma linha */
      .logo-icon { height: 140px; max-width: 140px; padding: 1.2rem; }
      .hero-logo-wrap { margin-bottom: 1.2rem; }
      #hero h1 { font-size: 1.2rem; white-space: normal; }
      #hero p { font-size: .88rem; }
      .hero-badge { font-size: .65rem; }

      /* Produtos: uma coluna só */
      .products-grid { grid-template-columns: 1fr 1fr; gap: .75rem; }
      .product-img-wrap { height: 120px; }
      .product-name { font-size: .88rem; }
      .product-price { font-size: .95rem; }

      /* Carrinho */
      #carrinhoDrawer { max-width: 100%; width: 100%; }

      /* Modais: ocupa tela toda */
      .modal-box { padding: 1.4rem 1.1rem; margin: .5rem; border-radius: var(--radius); }
      .modal-box.large { max-width: 100%; margin: 0; border-radius: 0; }
      .modal-title { font-size: 1.1rem; }

      /* Admin: topbar compacta */
      .admin-topbar { padding: 0 1rem; height: 56px; }
      .admin-brand { display: none; }
      .admin-user-name { max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .admin-content { padding: 1.2rem .8rem 3rem; }

      /* Tabelas: fonte menor */
      .admin-table { font-size: .78rem; }
      .admin-table th { padding: .6rem .7rem; font-size: .68rem; }
      .admin-table td { padding: .65rem .7rem; }
      .table-thumb { width: 36px; height: 36px; }

      /* Formulários */
      .form-input, .form-select, .form-textarea { font-size: .88rem; padding: .55rem .8rem; }
      .btn { font-size: .82rem; padding: .5rem .9rem; }
      .btn-sm { font-size: .75rem; padding: .35rem .65rem; }

      /* Relatórios */
      .rel-card-body { padding: .8rem; }
      .rel-grid { grid-template-columns: 1fr 1fr; }

      /* Pedidos */
      .pedido-header { padding: .8rem 1rem; }
      .pedido-numero { font-size: .85rem; }

      /* Configurações: grid 1 coluna */
      #tabWhatsapp > div[style*="grid"] { grid-template-columns: 1fr !important; }
    }

    /* ── Telas 481px–768px (celulares grandes e tablets) ──── */
    @media (min-width: 481px) and (max-width: 768px) {

      .header-inner { height: 72px; }
      #catNav { top: 72px; }
      .cliente-dropdown { top: 72px; }
      .logo-text span { display: none; } /* esconde o slogan, mantém o nome */
      .logo-icon-header { width: 52px; height: 52px; }

      .logo-icon { height: 170px; max-width: 170px; }

      .products-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }

      .modal-box { margin: 1rem; }
      .modal-box.large { max-width: calc(100% - 2rem); }

      .admin-content { padding: 1.5rem 1.2rem 3rem; }
      .admin-table { font-size: .82rem; }

      .rel-grid { grid-template-columns: repeat(2, 1fr); }
      #tabWhatsapp > div[style*="grid"] { grid-template-columns: 1fr !important; }
    }

    /* ── Touch: área de toque mínima nos botões ───────────── */
    @media (hover: none) and (pointer: coarse) {
      .btn, .admin-tab, .cat-btn, .rel-period-btn,
      .hero-dot, .qtd-btn, .detalhe-qtd-btn { min-height: 40px; min-width: 40px; }
      .product-card { cursor: default; }
      /* Remove hover effects que não fazem sentido no touch */
      .product-card:hover .product-card-overlay { opacity: 0; }
    }

    /* ============================================================
       ABA DE ESTOQUE
    ============================================================ */

    /* Cards de resumo */
    .estoque-resumo {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      gap: 1rem;
      margin-bottom: .4rem;
    }
    .estoque-card {
      background: var(--branco);
      border-radius: var(--radius);
      padding: 1.1rem 1.3rem;
      box-shadow: 0 2px 10px var(--shadow);
      display: flex;
      flex-direction: column;
      gap: .25rem;
      border-left: 4px solid transparent;
    }
    .estoque-card-label {
      font-size: .72rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .07em;
      color: var(--cinza);
    }
    .estoque-card-valor {
      font-family: var(--font-serif);
      font-size: 2rem;
      font-weight: 800;
      line-height: 1;
      color: var(--cafe);
    }
    .estoque-card-sub {
      font-size: .75rem;
      color: var(--cinza);
    }
    .estoque-card.ok     { border-color: var(--sucesso); }
    .estoque-card.ok     .estoque-card-valor { color: var(--sucesso); }
    .estoque-card.baixo  { border-color: var(--ouro); }
    .estoque-card.baixo  .estoque-card-valor { color: var(--ouro); }
    .estoque-card.zero   { border-color: var(--erro); }
    .estoque-card.zero   .estoque-card-valor { color: var(--erro); }
    .estoque-card.total  { border-color: var(--cafe-soft); }
    .estoque-card.excesso { border-color: #1a6fa8; }
    .estoque-card.excesso .estoque-card-valor { color: #1a6fa8; }

    /* Badges de status */
    .badge-estoque {
      display: inline-flex;
      align-items: center;
      gap: .3rem;
      padding: .28rem .65rem;
      border-radius: 20px;
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .04em;
      white-space: nowrap;
    }
    .badge-estoque.ok      { background: #eafaf1; color: var(--sucesso); }
    .badge-estoque.baixo   { background: #fef9ec; color: #b7860a; }
    .badge-estoque.zero    { background: #fdf3f2; color: var(--erro); }
    .badge-estoque.excesso { background: #eaf4fd; color: #1a6fa8; }

    /* Ajuste rápido inline */
    .qtd-control {
      display: flex;
      align-items: center;
      gap: .3rem;
    }
    .qtd-btn {
      width: 28px; height: 28px;
      border-radius: 6px;
      background: var(--creme-mid);
      color: var(--cafe);
      font-size: 1.1rem;
      font-weight: 700;
      line-height: 1;
      display: flex; align-items: center; justify-content: center;
      transition: var(--trans);
      flex-shrink: 0;
    }
    .qtd-btn:hover { background: var(--ouro); color: var(--cafe); }
    .qtd-btn.minus:hover { background: var(--erro); color: #fff; }
    .qtd-input {
      width: 56px;
      text-align: center;
      font-family: var(--font-serif);
      font-size: 1rem;
      font-weight: 700;
      color: var(--cafe);
      background: var(--creme);
      border: 1.5px solid var(--creme-dark);
      border-radius: 6px;
      padding: .22rem .3rem;
      transition: border-color var(--trans), box-shadow var(--trans);
      -moz-appearance: textfield;
    }
    .qtd-input::-webkit-inner-spin-button,
    .qtd-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
    .qtd-input:focus {
      outline: none;
      border-color: var(--ouro);
      box-shadow: 0 0 0 3px rgba(201,145,58,.18);
      background: var(--branco);
    }

    /* Botões de filtro de status */
    .estoque-filtro-btn {
      padding: .32rem .8rem;
      border-radius: 20px;
      background: var(--creme-mid);
      color: var(--cafe-soft);
      font-size: .75rem;
      font-weight: 700;
      border: 1.5px solid transparent;
      transition: var(--trans);
      white-space: nowrap;
    }
    .estoque-filtro-btn:hover { border-color: var(--ouro-soft); color: var(--cafe); }
    .estoque-filtro-btn.active { background: var(--cafe); color: var(--creme); }

    /* Badge de tipo no histórico */
    .badge-tipo {
      display: inline-flex; align-items: center; gap: .25rem;
      padding: .22rem .6rem;
      border-radius: 12px;
      font-size: .72rem;
      font-weight: 700;
    }
    .badge-tipo.entrada { background: #eafaf1; color: var(--sucesso); }
    .badge-tipo.saida   { background: #fdf3f2; color: var(--erro); }
    .badge-tipo.ajuste  { background: #fef9ec; color: #b7860a; }

    /* Coluna de quantidade no histórico */
    .hist-qtd-plus  { color: var(--sucesso); font-weight: 700; }
    .hist-qtd-minus { color: var(--erro);    font-weight: 700; }
    .hist-qtd-adj   { color: #b7860a;        font-weight: 700; }


    /* ============================================================
       PRODUCT CARD — clicável
    ============================================================ */
    .product-card { cursor: pointer; }
    .product-card-overlay {
      position: absolute; top: 0; right: 0; bottom: 0; left: 0;
      background: rgba(44,24,16,.55);
      display: flex; align-items: center; justify-content: center;
      opacity: 0;
      transition: opacity var(--trans);
    }
    .product-card:hover .product-card-overlay { opacity: 1; }
    .product-card-overlay span {
      color: #fff;
      font-weight: 700;
      font-size: .85rem;
      letter-spacing: .06em;
      border: 1.5px solid rgba(255,255,255,.7);
      padding: .4rem 1rem;
      border-radius: 20px;
      -webkit-backdrop-filter: blur(2px);
      backdrop-filter: blur(2px);
    }

    /* ============================================================
       MODAL DETALHE DE PRODUTO (área pública)
    ============================================================ */
    #modalDetalhe .modal-box {
      max-width: 600px;
      padding: 0;
      overflow-y: auto;
      max-height: calc(100vh - 3rem);
    }
    .detalhe-img {
      width: 100%;
      height: 260px;
      object-fit: cover;
      display: block;
    }
    .detalhe-img-placeholder {
      width: 100%; height: 260px;
      background: var(--creme-mid);
      display: flex; align-items: center; justify-content: center;
      font-size: 4rem;
    }
    .detalhe-body {
      padding: 1.6rem 1.8rem 1.8rem;
    }
    .detalhe-cat-tag {
      display: inline-block;
      background: var(--creme-mid);
      color: var(--cafe-soft);
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      padding: .22rem .75rem;
      border-radius: 20px;
      margin-bottom: .7rem;
    }
    .detalhe-nome {
      font-family: var(--font-serif);
      font-size: 1.6rem;
      font-weight: 800;
      color: var(--cafe);
      margin-bottom: .5rem;
      line-height: 1.2;
    }
    .detalhe-desc {
      font-size: .92rem;
      color: var(--cafe-soft);
      line-height: 1.65;
      margin-bottom: 1.2rem;
    }
    .detalhe-preco {
      font-family: var(--font-serif);
      font-size: 1.7rem;
      font-weight: 800;
      color: var(--terra);
      margin-bottom: 1.8rem;
    }
    .detalhe-footer {
      display: flex;
      align-items: center;
      gap: 1rem;
      flex-wrap: wrap;
    }
    .detalhe-qtd-wrap {
      display: flex;
      align-items: center;
      gap: .5rem;
      background: var(--creme-mid);
      border-radius: 30px;
      padding: .3rem .5rem;
    }
    .detalhe-qtd-btn {
      width: 34px; height: 34px;
      border-radius: 50%;
      background: var(--branco);
      border: none;
      font-size: 1.3rem;
      font-weight: 700;
      color: var(--cafe);
      display: flex; align-items: center; justify-content: center;
      transition: var(--trans);
    }
    .detalhe-qtd-btn:hover { background: var(--cafe); color: var(--creme); }
    .detalhe-qtd-num {
      min-width: 36px;
      text-align: center;
      font-family: var(--font-serif);
      font-size: 1.2rem;
      font-weight: 800;
      color: var(--cafe);
    }
    .btn-add-cart {
      flex: 1;
      background: var(--terra);
      color: #fff;
      border: none;
      border-radius: 30px;
      padding: .75rem 1.5rem;
      font-size: .95rem;
      font-weight: 700;
      display: flex; align-items: center; justify-content: center; gap: .5rem;
      transition: var(--trans);
      min-width: 200px;
    }
    .btn-add-cart:hover { background: var(--terra-soft); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(196,98,45,.35); }
    .btn-add-cart:active { transform: none; }
    .detalhe-esgotado {
      flex: 1;
      text-align: center;
      background: #fdf3f2;
      color: var(--erro);
      border-radius: 30px;
      padding: .75rem 1.5rem;
      font-weight: 700;
      font-size: .9rem;
    }
    .btn-reservar-whatsapp {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: .5rem;
      background: #25D366;
      color: #fff;
      font-weight: 700;
      font-size: .95rem;
      border-radius: 30px;
      padding: .75rem 1.5rem;
      text-decoration: none;
      transition: background var(--trans);
    }
    .btn-reservar-whatsapp:hover { background: #1dae54; }

    /* ============================================================
       BOTÃO FLUTUANTE DO CARRINHO
    ============================================================ */
    #btnCarrinho {
      position: fixed;
      bottom: 2rem;
      right: 2rem;
      width: 58px; height: 58px;
      background: var(--terra);
      color: #fff;
      border: none;
      border-radius: 50%;
      font-size: 1.5rem;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 6px 24px rgba(196,98,45,.45);
      z-index: 400;
      transition: transform var(--trans), box-shadow var(--trans), background var(--trans);
    }
    #btnCarrinho:hover { transform: scale(1.1); box-shadow: 0 10px 30px rgba(196,98,45,.55); background: var(--terra-soft); }
    #btnCarrinho.hidden { display: none; }
    .carrinho-badge {
      position: absolute;
      top: -4px; right: -4px;
      background: var(--ouro);
      color: var(--cafe);
      font-size: .68rem;
      font-weight: 800;
      width: 22px; height: 22px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      border: 2px solid #fff;
      pointer-events: none;
    }

    /* ============================================================
       DRAWER DO CARRINHO
    ============================================================ */
    #carrinhoOverlay {
      display: none;
      position: fixed; top: 0; right: 0; bottom: 0; left: 0;
      background: rgba(20,10,5,.55);
      -webkit-backdrop-filter: blur(3px);
      backdrop-filter: blur(3px);
      z-index: 800;
    }
    #carrinhoOverlay.open { display: block; }
    #carrinhoDrawer {
      position: fixed;
      top: 0; right: 0; bottom: 0;
      width: 100%;
      max-width: 420px;
      background: var(--branco);
      z-index: 801;
      display: flex;
      flex-direction: column;
      transform: translateX(110%);
      transition: transform .32s cubic-bezier(.22,1,.36,1);
      box-shadow: -8px 0 40px rgba(44,24,16,.2);
    }
    #carrinhoDrawer.open { transform: translateX(0); }
    .carrinho-header {
      background: var(--cafe);
      color: var(--creme);
      padding: 1.2rem 1.4rem;
      display: flex; align-items: center; justify-content: space-between;
      flex-shrink: 0;
    }
    .carrinho-titulo {
      font-family: var(--font-serif);
      font-size: 1.25rem;
      font-weight: 700;
      display: flex; align-items: center; gap: .5rem;
    }
    .carrinho-fechar {
      background: rgba(255,255,255,.12);
      color: #fff;
      border: none;
      width: 32px; height: 32px;
      border-radius: 50%;
      font-size: 1rem;
      display: flex; align-items: center; justify-content: center;
      transition: background var(--trans);
    }
    .carrinho-fechar:hover { background: rgba(255,255,255,.25); }
    .carrinho-itens {
      flex: 1;
      overflow-y: auto;
      padding: 1rem 1.4rem;
    }
    .carrinho-vazio {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
      gap: .6rem;
      color: var(--cinza);
      font-size: .95rem;
    }
    .carrinho-vazio-icon { font-size: 3rem; }
    .carrinho-item {
      display: flex;
      gap: .8rem;
      align-items: center;
      padding: .9rem 0;
      border-bottom: 1px solid var(--creme-mid);
    }
    .carrinho-item:last-child { border-bottom: none; }
    .carrinho-item-img {
      width: 56px; height: 56px;
      border-radius: 8px;
      object-fit: cover;
      flex-shrink: 0;
      background: var(--creme-mid);
    }
    .carrinho-item-info { flex: 1; min-width: 0; }
    .carrinho-item-nome {
      font-weight: 700;
      font-size: .88rem;
      color: var(--cafe);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .carrinho-item-preco {
      font-family: var(--font-serif);
      font-size: .82rem;
      color: var(--terra);
      font-weight: 700;
      margin-top: .15rem;
    }
    .carrinho-item-controles {
      display: flex;
      align-items: center;
      gap: .35rem;
      flex-shrink: 0;
    }
    .ci-btn {
      width: 26px; height: 26px;
      border-radius: 50%;
      border: 1.5px solid var(--creme-dark);
      background: transparent;
      color: var(--cafe);
      font-size: .9rem;
      font-weight: 700;
      display: flex; align-items: center; justify-content: center;
      transition: var(--trans);
    }
    .ci-btn:hover { background: var(--cafe); color: var(--creme); border-color: var(--cafe); }
    .ci-btn.remove:hover { background: var(--erro); border-color: var(--erro); }
    .ci-qtd {
      min-width: 22px;
      text-align: center;
      font-weight: 800;
      font-size: .9rem;
      color: var(--cafe);
    }
    .carrinho-footer {
      padding: 1.2rem 1.4rem;
      border-top: 2px solid var(--creme-mid);
      flex-shrink: 0;
      background: var(--branco);
    }
    .carrinho-total-linha {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1rem;
    }
    .carrinho-total-label {
      font-size: .85rem;
      color: var(--cafe-soft);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .05em;
    }
    .carrinho-total-valor {
      font-family: var(--font-serif);
      font-size: 1.5rem;
      font-weight: 800;
      color: var(--terra);
    }
    .btn-pedido-wa {
      width: 100%;
      background: #25D366;
      color: #fff;
      border: none;
      border-radius: 30px;
      padding: .85rem 1.5rem;
      font-size: .95rem;
      font-weight: 700;
      display: flex; align-items: center; justify-content: center; gap: .6rem;
      transition: var(--trans);
      box-shadow: 0 4px 16px rgba(37,211,102,.35);
      margin-bottom: .6rem;
    }
    .btn-pedido-wa:hover { background: #1ebe5d; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(37,211,102,.5); }
    .btn-limpar-carrinho {
      width: 100%;
      background: transparent;
      color: var(--cinza);
      border: none;
      font-size: .78rem;
      padding: .3rem;
      text-align: center;
      text-decoration: underline;
      transition: color var(--trans);
    }
    .btn-limpar-carrinho:hover { color: var(--erro); }

    @media (max-width: 480px) {
      #btnCarrinho { bottom: 1.2rem; right: 1.2rem; width: 52px; height: 52px; }
      #carrinhoDrawer { max-width: 100%; }
    }


    /* ============================================================
       ABA DE RELATÓRIOS
    ============================================================ */
    .rel-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 1rem;
      margin-bottom: 2rem;
    }
    .rel-kpi {
      background: var(--branco);
      border-radius: var(--radius);
      padding: 1.2rem 1.4rem;
      box-shadow: 0 2px 10px var(--shadow);
      border-left: 4px solid var(--ouro);
      display: flex; flex-direction: column; gap: .2rem;
    }
    .rel-kpi-label {
      font-size: .7rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: .07em; color: var(--cinza);
    }
    .rel-kpi-valor {
      font-family: var(--font-serif); font-size: 1.9rem;
      font-weight: 800; line-height: 1; color: var(--cafe);
    }
    .rel-kpi-sub { font-size: .74rem; color: var(--cinza); }
    .rel-kpi.verde  { border-color: var(--sucesso); }
    .rel-kpi.verde  .rel-kpi-valor { color: var(--sucesso); }
    .rel-kpi.terra  { border-color: var(--terra); }
    .rel-kpi.terra  .rel-kpi-valor { color: var(--terra); }
    .rel-kpi.azul   { border-color: #1a6fa8; }
    .rel-kpi.azul   .rel-kpi-valor { color: #1a6fa8; }
    .rel-kpi.roxo   { border-color: #7c4dbe; }
    .rel-kpi.roxo   .rel-kpi-valor { color: #7c4dbe; }

    .rel-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.2rem;
      margin-bottom: 1.6rem;
    }
    @media (max-width: 700px) { .rel-row { grid-template-columns: 1fr; } }

    .rel-card {
      background: var(--branco);
      border-radius: var(--radius);
      box-shadow: 0 2px 10px var(--shadow);
      overflow: hidden;
    }
    .rel-card-header {
      padding: 1rem 1.3rem .6rem;
      border-bottom: 1px solid var(--creme-mid);
    }
    .rel-card-title {
      font-family: var(--font-serif); font-size: 1rem;
      font-weight: 800; color: var(--cafe);
    }
    .rel-card-body { padding: 1rem 1.3rem 1.2rem; }

    .rel-bar-row {
      display: flex; align-items: center; gap: .7rem;
      margin-bottom: .6rem;
    }
    .rel-bar-label {
      font-size: .78rem; color: var(--cafe-soft); font-weight: 700;
      min-width: 130px; max-width: 130px;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .rel-bar-track {
      flex: 1; height: 10px; background: var(--creme-mid);
      border-radius: 10px; overflow: hidden;
    }
    .rel-bar-fill {
      height: 100%; border-radius: 10px;
      background: linear-gradient(90deg, var(--terra), var(--ouro));
      transition: width .5s ease;
    }
    .rel-bar-val {
      font-size: .75rem; font-weight: 700; color: var(--cafe);
      min-width: 36px; text-align: right;
    }

    .rel-donut-wrap {
      display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
    }
    .rel-legend { display: flex; flex-direction: column; gap: .45rem; flex: 1; }
    .rel-legend-item {
      display: flex; align-items: center; gap: .5rem;
      font-size: .78rem; color: var(--cafe-soft);
    }
    .rel-legend-dot {
      width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
    }
    .rel-legend-pct { font-weight: 700; color: var(--cafe); margin-left: auto; }

    .rel-full { grid-column: 1 / -1; }
    .rel-period-btn {
      padding: .28rem .75rem; border-radius: 20px; font-size: .74rem;
      font-weight: 700; border: 1.5px solid transparent;
      background: var(--creme-mid); color: var(--cafe-soft);
      transition: var(--trans);
    }
    .rel-period-btn.active { background: var(--cafe); color: var(--creme); }
    .rel-period-btn:hover:not(.active) { border-color: var(--ouro-soft); color: var(--cafe); }

    .rel-table { width: 100%; border-collapse: collapse; font-size: .83rem; }
    .rel-table th {
      text-align: left; padding: .5rem .7rem;
      font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
      color: var(--cinza); border-bottom: 2px solid var(--creme-mid);
    }
    .rel-table td {
      padding: .55rem .7rem; border-bottom: 1px solid var(--creme-mid);
      color: var(--cafe); vertical-align: middle;
    }
    .rel-table tr:last-child td { border-bottom: none; }
    .rel-table tr:hover td { background: var(--creme); }
    .rel-rank { font-family: var(--font-serif); font-weight: 800; color: var(--ouro); }


    /* ============================================================
       ÁREA DO CLIENTE (HEADER PÚBLICO)
    ============================================================ */
    .header-actions {
      display: flex; align-items: center; gap: .55rem; flex-shrink: 0;
    }
    #btnClienteArea {
      background: transparent;
      border: 1.5px solid rgba(255,255,255,.25);
      color: rgba(255,255,255,.75);
      border-radius: 20px;
      padding: .35rem .9rem;
      font-size: .78rem;
      letter-spacing: .04em;
      transition: var(--trans);
      white-space: nowrap;
    }
    #btnClienteArea:hover { border-color: var(--ouro-soft); color: var(--ouro-soft); }
    #btnClienteArea.logado {
      background: var(--ouro);
      border-color: var(--ouro);
      color: var(--cafe);
      font-weight: 700;
    }
    #btnClienteArea.logado:hover { background: var(--ouro-soft); border-color: var(--ouro-soft); }

    /* Modal tabs (Login / Cadastro) */
    .modal-auth-tabs {
      display: flex; gap: .3rem;
      background: var(--creme-mid);
      border-radius: var(--radius-sm);
      padding: .25rem; margin-bottom: 1.4rem;
    }
    .modal-auth-tab {
      flex: 1; padding: .42rem .6rem;
      border-radius: 6px; background: transparent; border: none;
      font-size: .84rem; font-weight: 700; color: var(--cafe-soft);
      transition: var(--trans); letter-spacing: .02em;
    }
    .modal-auth-tab.active {
      background: var(--branco); color: var(--terra);
      box-shadow: 0 1px 4px var(--shadow);
    }
    .modal-auth-tab:hover:not(.active) { color: var(--cafe); }

    /* Dropdown do cliente logado */
    .cliente-dropdown {
      display: none; position: fixed;
      top: 80px; right: 1rem;
      background: var(--branco);
      border-radius: var(--radius);
      box-shadow: 0 8px 32px var(--shadow);
      min-width: 220px; z-index: 300;
      overflow: hidden;
      animation: modalIn .2s ease;
    }
    .cliente-dropdown.open { display: block; }
    .cliente-dropdown-header {
      background: var(--cafe);
      padding: .9rem 1.1rem;
    }
    .cliente-dropdown-nome {
      font-family: var(--font-serif); font-size: 1rem;
      font-weight: 700; color: var(--creme); line-height: 1.2;
    }
    .cliente-dropdown-sub {
      font-size: .72rem; color: rgba(255,255,255,.55); margin-top: .15rem;
    }
    .cliente-dropdown-item {
      display: flex; align-items: center; gap: .6rem;
      padding: .75rem 1.1rem; font-size: .85rem;
      color: var(--cafe-soft); font-weight: 600;
      transition: background var(--trans);
      border: none; background: none; width: 100%; text-align: left;
      cursor: pointer;
    }
    .cliente-dropdown-item:hover { background: var(--creme); color: var(--cafe); }
    .cliente-dropdown-item.sair { color: var(--erro); }
    .cliente-dropdown-divider { height: 1px; background: var(--creme-mid); }


    /* ============================================================
       ABA DE PEDIDOS
    ============================================================ */
    .pedido-card {
      background: var(--branco);
      border-radius: var(--radius);
      box-shadow: 0 2px 12px var(--shadow);
      margin-bottom: 1rem;
      overflow: hidden;
      border-left: 4px solid transparent;
      transition: box-shadow var(--trans);
    }
    .pedido-card.pendente  { border-color: var(--ouro); }
    .pedido-card.confirmado{ border-color: var(--sucesso); }
    .pedido-card.cancelado { border-color: var(--cinza); opacity: .7; }

    .pedido-header {
      display: flex; align-items: center; justify-content: space-between;
      flex-wrap: wrap; gap: .6rem;
      padding: .9rem 1.2rem;
      background: var(--creme);
      border-bottom: 1px solid var(--creme-mid);
      cursor: pointer;
    }
    .pedido-header-left { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
    .pedido-numero {
      font-family: var(--font-serif); font-size: .95rem;
      font-weight: 800; color: var(--cafe);
    }
    .pedido-hora {
      font-size: .75rem; color: var(--cinza);
    }
    .pedido-cliente-tag {
      font-size: .75rem; font-weight: 700;
      background: var(--cafe); color: var(--creme);
      padding: .18rem .6rem; border-radius: 20px;
    }
    .badge-status {
      display: inline-flex; align-items: center; gap: .3rem;
      padding: .25rem .75rem; border-radius: 20px;
      font-size: .72rem; font-weight: 800;
      letter-spacing: .04em; text-transform: uppercase;
      white-space: nowrap;
    }
    .badge-status.pendente   { background: #fef9ec; color: #b7860a; }
    .badge-status.confirmado { background: #eafaf1; color: var(--sucesso); }
    .badge-status.cancelado  { background: #f4f4f4; color: var(--cinza); }

    .pedido-body {
      padding: .85rem 1.2rem 1rem;
    }
    .pedido-itens {
      display: flex; flex-direction: column; gap: .35rem;
      margin-bottom: .9rem;
    }
    .pedido-item-linha {
      display: flex; align-items: center; gap: .6rem;
      font-size: .86rem; color: var(--cafe);
    }
    .pedido-item-qtd {
      background: var(--creme-mid); border-radius: 6px;
      padding: .1rem .45rem; font-weight: 800;
      font-size: .78rem; color: var(--cafe); flex-shrink: 0;
    }
    .pedido-item-nome { flex: 1; }
    .pedido-item-sub {
      font-family: var(--font-serif); font-weight: 700;
      color: var(--terra); font-size: .85rem; flex-shrink: 0;
    }
    .pedido-total-linha {
      display: flex; justify-content: space-between; align-items: center;
      padding-top: .7rem; border-top: 1.5px dashed var(--creme-mid);
    }
    .pedido-total-label { font-size: .78rem; font-weight: 700; color: var(--cinza); text-transform: uppercase; letter-spacing: .05em; }
    .pedido-total-valor { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 800; color: var(--terra); }

    .pedido-actions {
      display: flex; gap: .5rem; flex-wrap: wrap;
      padding: .7rem 1.2rem;
      background: var(--creme);
      border-top: 1px solid var(--creme-mid);
    }

    .pedidos-vazio {
      text-align: center; padding: 3.5rem 2rem;
      color: var(--cinza);
    }
    .pedidos-vazio-icon { font-size: 2.8rem; margin-bottom: .6rem; }

    .pedidos-filtros {
      display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1.4rem;
    }


    /* ============================================================
       GERENCIADOR DE MÍDIA DO HERO
    ============================================================ */
    .hero-slide video {
      position: absolute; top: 0; right: 0; bottom: 0; left: 0;
      width: 100%; height: 100%;
      object-fit: cover;
    }

    .hero-media-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
      gap: .8rem;
      margin-top: 1rem;
    }
    .hero-media-item {
      background: var(--creme-mid);
      border-radius: var(--radius-sm);
      overflow: hidden;
      border: 2px solid transparent;
      transition: border-color var(--trans), box-shadow var(--trans);
      position: relative;
    }
    .hero-media-item:hover { border-color: var(--ouro-soft); box-shadow: 0 2px 10px var(--shadow); }
    .hero-media-thumb {
      width: 100%; height: 88px;
      object-fit: cover; display: block;
      background: var(--creme-mid);
    }
    .hero-media-thumb-video {
      width: 100%; height: 88px;
      display: flex; align-items: center; justify-content: center;
      background: var(--cafe); font-size: 2rem;
    }
    .hero-media-label {
      padding: .3rem .5rem;
      font-size: .7rem; font-weight: 700;
      color: var(--cafe-soft);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .hero-media-actions {
      position: absolute; top: .3rem; right: .3rem;
      display: flex; gap: .25rem;
    }
    .hero-media-btn {
      width: 22px; height: 22px;
      border-radius: 50%;
      background: rgba(44,24,16,.65);
      color: #fff; border: none;
      font-size: .65rem;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; transition: background var(--trans);
    }
    .hero-media-btn:hover { background: var(--erro); }
    .hero-media-btn.mover { background: rgba(44,24,16,.65); }
    .hero-media-btn.mover:hover { background: var(--ouro); color: var(--cafe); }
    .hero-media-ordem {
      position: absolute; top: .3rem; left: .3rem;
      background: var(--cafe);
      color: var(--ouro);
      font-size: .65rem; font-weight: 800;
      width: 20px; height: 20px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
    }
    .hero-media-tipo {
      position: absolute; bottom: 2rem; left: .3rem;
      background: rgba(44,24,16,.7);
      color: #fff; font-size: .6rem; font-weight: 700;
      padding: .1rem .4rem; border-radius: 10px;
      text-transform: uppercase; letter-spacing: .05em;
    }


    /* ============================================================
       FILTRO AVANÇADO DE DATA — RELATÓRIOS
    ============================================================ */

    .rel-date-input {
      padding: .38rem .7rem;
      border: 1.5px solid var(--creme-dark);
      border-radius: var(--radius-sm);
      font-size: .82rem;
      color: var(--cafe);
      background: var(--branco);
      font-family: var(--font-sans);
      transition: border-color var(--trans);
    }
    .rel-date-input:focus { outline: none; border-color: var(--ouro); box-shadow: 0 0 0 3px rgba(201,145,58,.15); }

    /* Tag mostrando o período ativo */
    .rel-periodo-tag {
      font-size: .74rem;
      font-weight: 700;
      color: var(--cafe-soft);
      background: var(--creme-mid);
      padding: .22rem .75rem;
      border-radius: 20px;
      white-space: nowrap;
    }
    .rel-periodo-tag strong { color: var(--terra); }


    /* ============================================================
       MODAL DE CONFIRMAÇÃO DE PEDIDO COM DESCONTO
    ============================================================ */
    .conf-pedido-itens {
      background: var(--creme);
      border-radius: var(--radius-sm);
      padding: .8rem 1rem;
      margin-bottom: 1rem;
      max-height: 200px;
      overflow-y: auto;
    }
    .conf-pedido-item {
      display: flex; justify-content: space-between; align-items: center;
      padding: .3rem 0;
      border-bottom: 1px solid var(--creme-dark);
      font-size: .85rem; color: var(--cafe);
    }
    .conf-pedido-item:last-child { border-bottom: none; }
    .conf-pedido-item-nome { flex: 1; }
    .conf-pedido-item-val  { font-family: var(--font-serif); font-weight: 700; color: var(--terra); flex-shrink: 0; }

    .conf-totais {
      background: var(--branco);
      border: 1.5px solid var(--creme-dark);
      border-radius: var(--radius-sm);
      padding: .7rem 1rem;
      margin-bottom: 1rem;
    }
    .conf-linha {
      display: flex; justify-content: space-between; align-items: center;
      padding: .25rem 0; font-size: .88rem;
    }
    .conf-linha.destaque {
      border-top: 1.5px dashed var(--creme-dark);
      margin-top: .3rem; padding-top: .5rem;
    }
    .conf-linha-label { color: var(--cafe-soft); font-weight: 700; }
    .conf-linha-val   { font-family: var(--font-serif); font-weight: 800; color: var(--cafe); }
    .conf-linha.destaque .conf-linha-val { color: var(--sucesso); font-size: 1.15rem; }
    .conf-linha.desconto .conf-linha-val { color: var(--erro); }

    .desconto-wrap {
      display: flex; gap: .6rem; align-items: flex-end;
      margin-bottom: 1rem;
    }
    .desconto-tipo-btn {
      padding: .35rem .75rem;
      border-radius: 20px;
      border: 1.5px solid var(--creme-dark);
      background: var(--creme-mid);
      color: var(--cafe-soft);
      font-size: .78rem; font-weight: 700;
      transition: var(--trans); cursor: pointer;
    }
    .desconto-tipo-btn.active { background: var(--cafe); color: var(--creme); border-color: var(--cafe); }


    /* iOS Safari — garante cliques em todos elementos interativos */
    a, button, [onclick], .product-card, .pedido-header,
    .cat-btn, .rel-period-btn, .admin-tab, .hero-dot,
    .hero-media-btn, .logo-icon-header, .carrinho-fechar {
      -webkit-tap-highlight-color: rgba(0,0,0,0.05);
      touch-action: manipulation;
    }
    /* Garante que divs com onclick sejam clicáveis no Safari */
    [onclick] { cursor: pointer; }


/* ── Toggle mostrar/ocultar senha ── */
.input-senha-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.input-senha-wrap .form-input {
  flex: 1;
  padding-right: 2.6rem;
}
.btn-ver-senha {
  position: absolute;
  right: .5rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: .25rem;
  color: var(--texto-claro, #888);
  opacity: .7;
}
.btn-ver-senha:hover { opacity: 1; }