/* Tablet */
@media (max-width: 980px){
    .hero-grid{
      grid-template-columns: 1fr;
    }
  
    .hero-art{
      justify-content: flex-start;
    }
  
    .info-grid{
      grid-template-columns: 1fr;
    }
  
    .cards-3{
      grid-template-columns: 1fr;
    }
  
    .section-head{
      flex-direction: column;
      align-items: flex-start;
    }
  }
  
  /* Mobile nav */
  @media (max-width: 860px){
    .hamburger{
      display: inline-flex;
    }
  
    .nav{
      position: fixed;
      top: 76px;
      left: 16px;
      right: 16px;
      background: rgba(255, 255, 255, 0.92);
      border: 1px solid rgba(31,26,23,0.12);
      border-radius: 18px;
      padding: 12px;
      box-shadow: 0 20px 60px rgba(17, 12, 10, 0.18);
  
      display: none;
      flex-direction: column;
      gap: 6px;
      z-index: 70;
    }
  
    .nav.is-open{
      display: flex;
    }
  
    .btn-nav{
      width: 100%;
      margin-left: 0;
      margin-top: 8px;
    }
  
    .brand-logo{
      height: 88px;
    }
  }
  
  /* Ajustes finos em telas pequenas */
  @media (max-width: 420px){
    .hero-ctas{
      flex-direction: column;
      align-items: stretch;
    }
  
    .modal-grid{
      grid-template-columns: 1fr;
    }
  }
  


  /* Pagamentos: grid responsivo */
@media (max-width: 980px){
    .page-hero-grid{
      grid-template-columns: 1fr;
    }
    .menu-hero-photo img{
        height: 280px;
      }
    .pay-grid{
      grid-template-columns: 1fr 1fr;
    }
  }
  
  @media (max-width: 520px){
    .pay-grid{
      grid-template-columns: 1fr;
    }
    .page-hero-actions{
      flex-direction: column;
      align-items: stretch;
    }
  }

  


  @media (max-width: 980px){
    .allergen-grid{
      grid-template-columns: 1fr 1fr;
    }
  }
  
  @media (max-width: 560px){
    .allergen-grid{
      grid-template-columns: 1fr;
    }
  
    .cta-panel{
      flex-direction: column;
      align-items: stretch;
    }
  
    .cta-actions{
      flex-direction: column;
      align-items: stretch;
    }
  }

  
  @media (max-width: 980px){
    .menu-grid{
      grid-template-columns: 1fr 1fr;
    }
  
    .controls-top{
      flex-direction: column;
      align-items: stretch;
    }
  
    .btn-compact{
      width: 100%;
    }
  
    .form-row{
      grid-template-columns: 1fr;
    }
  }
  
  @media (max-width: 560px){
    .menu-grid{
      grid-template-columns: 1fr;
    }
  
    .menu-controls{
      top: 70px;
    }
  
    .menu-actions{
      flex-direction: column;
    }
  
    .modal-order{
      width: min(720px, 100%);
    }

    .page-menu .menu-controls .search{
        flex: 0 0 auto;
        width: 100%;
        max-width: 520px;         /* garante que não “vira um círculo”/blob */
        padding: 10px 12px;
        border-radius: 18px;      /* menos “pílula gigante” no mobile */
      }
    
      .page-menu .menu-controls .search input{
        font-size: 16px;          /* melhora UX no iOS e mantém proporção */
      }
    
      .page-menu .menu-controls .controls-top{
        gap: 10px;
      }
    
      .page-menu .menu-controls .btn-compact{
        width: 100%;
      }
  }
  

  @media (max-width: 980px){
    .page-contact .page-hero-grid{
      grid-template-columns: 1fr;
    }
  
    .contact-grid{
      grid-template-columns: 1fr;
    }
  }
  
  @media (max-width: 560px){
    .contact-cards{
      grid-template-columns: 1fr;
    }
  
    .map-placeholder{
      height: 260px;
    }
  
    .wa-float{
      left: 16px;
      right: 16px;
      bottom: 14px;
      justify-content: center;
    }
  }


  @media (max-width: 980px){
    .page-about .page-hero-grid{
      grid-template-columns: 1fr;
    }
  
    .about-story{
      grid-template-columns: 1fr;
    }
  
    .story-highlights{
      grid-template-columns: 1fr;
    }
  
    .values-grid{
      grid-template-columns: 1fr 1fr;
    }
  
    .about-photo img{
      height: 280px;
    }
  }
  
  @media (max-width: 560px){
    .values-grid{
      grid-template-columns: 1fr;
    }
  
    .about-photo-mini{
      grid-template-columns: 1fr;
    }
  
    .about-photo-mini img{
      height: 160px;
    }
  }
  


  @media (max-width: 860px){
    .reviews-shell{
      grid-template-columns: 1fr;
    }
  
    .reviews-arrow{
      display: none; /* no mobile, arrasta no dedo */
    }
  
    .reviews-track{
      grid-auto-columns: 86%;
      padding: 8px 2px 12px;
    }
  
    .reviews-bottom{
      flex-direction: column;
      align-items: stretch;
    }
  
    .reviews-bottom .btn{
      width: 100%;
    }
  }
  

  /* ====================================
   BOTÃO FLUTUANTE WHATSAPP - RESPONSIVO
   ==================================== */

/* Tablets (≤ 768px) */
@media (max-width: 768px){
  .wa-float{
    width: 56px;
    height: 56px;
    bottom: 20px;
    right: 20px;
  }
  
  .wa-float-icon{
    width: 32px;
    height: 32px;
  }
}

/* Mobile (≤ 480px) */
@media (max-width: 480px){
  .wa-float{
    width: 52px;
    height: 52px;
    bottom: 16px;
    right: 16px;
  }
  
  .wa-float-icon{
    width: 28px;
    height: 28px;
  }
  
  /* Sombra mais leve no mobile pra economizar performance */
  .wa-float{
    box-shadow: 
      0 3px 10px rgba(37, 211, 102, 0.35),
      0 1px 4px rgba(0, 0, 0, 0.1);
  }
  
  .wa-float:hover{
    box-shadow: 
      0 6px 16px rgba(37, 211, 102, 0.4),
      0 2px 8px rgba(0, 0, 0, 0.12);
  }
}


/* ====================================
   LANG SWITCH - RESPONSIVO
   ==================================== */

/* Tablets (≤ 768px) */
@media (max-width: 768px){
  .lang-switch{
    gap: 8px;
  }
  
  .flag{
    width: 44px;
    height: 30px;
  }
}

/* Mobile (≤ 480px) */
@media (max-width: 480px){
  .lang-switch{
    gap: 6px;
  }
  
  .flag{
    width: 40px;
    height: 27px;
    border-width: 1.5px;
  }
  
  .flag-img{
    border-radius: 3px;
  }
}

/* Mangiare VIP - responsivo */
@media (max-width: 900px){
  .vip-card{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px){
  .vip-card{
    padding: 18px;
    border-radius: 16px;
  }

  .vip-form .btn{
    width: 100%;
  }
}


@media (max-width: 520px){
  .top-notice__text{
    padding: 10px 12px;
    font-size: 14px;
    text-wrap: balance;
  }
}


@media (max-width: 520px){
  .allergens-modal-body{
    max-height: 62vh;
  }
}


@media (max-width: 520px){
  .welcome-modal{
    width: 92vw;
    padding: 16px;
  }

  .allergens-modal-body{
    max-height: 62vh;
  }
}


@media (max-width: 520px){
  .allergens-modal{
    padding: 18px 16px 16px;
    border-radius: 18px;
  }

  .allergens-modal .btn.btn-primary{
    width: 100%;
  }

  .allergens-modal-body{
    max-height: 58vh;
  }
}


/* =========================
   ORDER MODAL — CART (RESP)
   ========================= */

   @media (max-width: 720px){
    .alert-icon{width: 80px; height: 80px;}

    .pay-note-title{font-size: 20px;}

    .mini-dott{
      width: 18px;
      height: 10px;
      border-radius: 999px;
      background: linear-gradient(135deg, var(--primary), var(--accent));
      box-shadow: 0 6px 14px rgba(197,22,29,0.18);
    
      background: var(--brand-green);
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-green) 18%, transparent);
    }

    .mini-doti{
      width: 18px;
      height: 10px;
      border-radius: 999px;
      background: linear-gradient(135deg, var(--primary), var(--accent));
      box-shadow: 0 6px 14px rgba(197,22,29,0.18);
    
      background: var(--brand-green);
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-green) 18%, transparent);
    }

    .mini-dotz{
      width: 18px;
      height: 10px;
      border-radius: 999px;
      background: linear-gradient(135deg, var(--primary), var(--accent));
      box-shadow: 0 6px 14px rgba(197,22,29,0.18);
    
      background: var(--brand-green);
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-green) 18%, transparent);
    }

    .modal-order .cart-head{
      flex-direction: column;
      align-items: flex-start;
    }
  
    .modal-order #cart-add{
      width: 100%;
      justify-content: center;
    }
  
    .modal-order .cart-item{
      flex-direction: column;
      align-items: stretch;
      gap: 10px;
    }
  
    .modal-order .cart-item-actions{
      justify-content: space-between;
    }
  
    .modal-order .cart-qty{
      width: 110px;
    }
  
    .modal-order .cart-picker-actions{
      flex-direction: column;
    }
  
    .modal-order .cart-picker-actions .btn{
      width: 100%;
    }
  }
  
  @media (max-width: 520px){
    .modal-order .cart-title{
      font-size: 16px;
    }
  
    .modal-order .cart-total-value{
      font-size: 16px;
    }
  
    .modal-order .cart-item{
      padding: 10px;
      border-radius: 12px;
    }
  
    .modal-order .cart-qty,
    .modal-order .cart-remove{
      height: 42px;
    }
  }

  .modal-order #order-fulfillment{
    width: 100%;
  }
  

  /* =========================
   FIX: Modal/Popup scroll mobile
   (welcome-overlay, allergens alert, etc)
   ========================= */

@media (max-width: 720px){
  /* Overlay (fundo) precisa permitir scroll vertical */
  #welcome-overlay,
  .modal-overlay,
  .overlay{
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;  /* scroll suave iOS */
  }

  /* Card/conteúdo interno do modal */
  #welcome-overlay > *,
  .modal-overlay > *,
  .overlay > *{
    max-height: none;                    /* evita travar altura */
    margin: auto;
    position: relative;
  }
}

/* Telas muito pequenas (≤ 375px tipo iPhone SE) */
@media (max-width: 420px){
  #welcome-overlay,
  .modal-overlay,
  .overlay{
    padding: 14px;                       /* reduz padding pra dar mais espaço */
  }

  #welcome-overlay .btn,
  .modal-overlay .btn,
  .overlay .btn{
    font-size: 15px;                     /* botão um pouco menor */
    padding: 12px 18px;
  }
}



/* =========================
   Meio-a-Meio: Mobile
   ========================= */

   @media (max-width: 720px){
    .half-flavors-block{
      grid-template-columns: 1fr;
      gap: 12px;
    }
  
    .half-price-preview{
      font-size: 15px;
      padding: 14px 16px;
    }
  
    .half-price-preview strong{
      font-size: 18px;
    }
  
    /* Botão meio-a-meio fica embaixo no mobile */
    .controls-top{
      flex-direction: column;
      align-items: stretch;
    }
  
    .controls-top .btn-compact{
      width: 100%;
    }
  }

  
  /* =========================
   Ofertas da Semana: Mobile
   ========================= */

@media (max-width: 720px){
  .weekly-deals{
    padding: 60px 0;
  }

  .section-badge{
    font-size: 12px;
    padding: 7px 16px;
  }

  .badge-icon{
    width: 12px;
    height: 16px;
  }

  .deals-grid{
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 36px;
  }

  .deal-media{
    height: 220px;
  }

  .deal-name{
    font-size: 20px;
  }

  .deal-price-new{
    font-size: 26px;
  }

  .deal-body{
    padding: 20px;
  }

  .deal-badge{
    top: 12px;
    right: 12px;
    font-size: 10px;
    padding: 5px 12px;
  }
}


@media (max-width: 520px){
  #weekly-feature-subtitle{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: baseline;
  }
}