/* =====================================================================
   PALETA – personalize aqui
   ===================================================================*/
   :root{
    --brand-color:#05376E;                     /* cor principal (botões, destaques) */
    --navbar-bg:#05376E;                       /* ↳ NAVBAR      */
    --discount-bg:#05376E;                     /* fundo do badge de desconto        */
    --discount-text:#ffffff;                   /* texto do badge de desconto        */
    --bg-page:#f3f5f7;                         /* fundo da página                    */
    --radius:1rem;                             /* raio dos cantos arredondados       */
    font-family:'Nunito',sans-serif;
  }
  
  body {
    background:var(--bg-page);
    padding-top: 56px; /* ex.: 3.5rem = 56px */
  }

  /* Esconde o body até o JS remover 'js-loading' */
  body.js-loading > :not(.loader-overlay) {
    visibility: hidden;
  }
  .loader-overlay {
    position: fixed;
    top: 0; left: 0; width:100%; height:100%;
    background:#fff;
    display:flex; align-items:center; justify-content:center;
    z-index:2000;
  }
  body:not(.js-loading) .loader-overlay {
    display:none;
  }
  /* CABEÇALHO -------------------------------------------------------*/
  .app-header{
    background:var(--navbar-bg);               /* MUDE AQUI A COR DA NAVBAR          */
    padding:.75rem 0;
    color:#fff;
  }
  .app-header .nav-link{color:#fff;font-weight:600;}
  .app-header .nav-link:hover{opacity:.8;}
  .text-brand{color:var(--brand-color);}
  
  /* título maior e não clicável -----------------------------------*/
  .site-title{
    font-size:1.35rem;        /* ajuste como quiser */
    cursor:default;
    white-space:nowrap;       /* evita quebrar em 1 linha */
  }
  @media (max-width: 576px){
    .site-title{font-size:1.1rem;}
  }

  /* BOTÕES ----------------------------------------------------------*/
  .btn-brand{
    background:var(--brand-color)!important;
    color:#fff!important;
    border:none;
    transition:all .25s;
  }
  .btn-brand:hover{transform:translateY(-1px);filter:brightness(1.05);}
  
  .btn-outline-brand{
    border:1px solid var(--brand-color)!important;
    color:var(--brand-color)!important;
    background:transparent!important;
    transition:all .25s;
  }
  .btn-outline-brand:hover{
    background:var(--brand-color)!important;
    color:#fff!important;
  }
  
  /* FILTRO DE LOJAS -------------------------------------------------*/
  #filters .store-pill{
    background:#fff;
    border:1px solid #e5e5e5;
    border-radius:3rem;
    padding:.6rem 1.1rem;
    display:flex;
    align-items:center;
    gap:.4rem;
    font-weight:600;
    cursor:pointer;
    transition:all .25s;
  }
  #filters .store-pill.active,
  #filters .store-pill:hover{
    background:var(--brand-color);
    color:#fff;
    border-color:var(--brand-color);
  }
  #filters img{height:24px;width:24px;}
  
  /* SIDEBAR (WhatsApp) ---------------------------------------------*/
  .promo-sidebar{
    position:fixed;        /* mantém sempre visível */
    bottom:2rem;
    right:2rem;
    width:260px;
    background:#fff;
    border-radius:var(--radius);
    padding:1.5rem;
    box-shadow:0 4px 12px rgba(0,0,0,.15);
    z-index:1050;          /* acima dos cards */
  }
  
  /* CARD DE OFERTA --------------------------------------------------*/
  .card-oferta{
    background:#fff;
    border:none;
    border-radius:var(--radius);
    box-shadow:0 6px 16px rgba(0,0,0,.05);
    transition:transform .3s;
    height:100%;
  }
  .card-oferta:hover{transform:translateY(-6px);}
  .card-oferta .img-wrapper{position:relative;}
  
  .product-image{
    border-top-left-radius:var(--radius);
    border-top-right-radius:var(--radius);
    height:220px;
    object-fit:contain;
  }
  
  /* badge % desconto ------------------------------------------------*/
  .badge-desconto{
    position:absolute;top:.6rem;right:.6rem;
    background:var(--discount-bg);color:var(--discount-text);
    font-size:.8rem;font-weight:700;padding:.35rem .7rem;border-radius:2rem;
  }

  /* badge CUPOM -----------------------------------------------------*/
  .cupom-badge{
    background:#fff5fa;color:var(--brand-color);
    font-size:.95rem;font-weight:700;
    border:1px dashed var(--brand-color);
    padding:.35rem .7rem;border-radius:.4rem;
    display:inline-block;cursor:pointer;user-select:none;
  }

  /* linha de cupom: altura fixa p/ alinhamento de todos os cards ----*/
  .coupon-line{min-height:1.9rem/*~28-30px*/;}

  /* estado copiado --------------------------------------------------*/
  .cupom-badge.copied{background:#e7f9e9;border-color:#54b168;color:#54b168;}
    
  /* badge tempo -----------------------------------------------------*/
  .timer-badge{
    position:absolute;
    bottom:.6rem;
    left:.6rem;
    font-size:.75rem;
    background:rgba(0,0,0,.7);
    color:#fff;
    padding:.25rem .6rem;
    border-radius:.4rem;
    pointer-events:none;
    z-index:2;
  }
  
  /* logo loja -------------------------------------------------------*/
  .store-logo{
    position:absolute;
    top:.6rem;
    left:.6rem;
    width:38px;
    height:38px;
    border-radius:50%;
    background:#fff;
    padding:3px;
    box-shadow:0 2px 6px rgba(0,0,0,.1);
  }
  
  .preco-original{text-decoration:line-through;opacity:.7;font-size:.95rem;}
  .preco-original-related{text-decoration:line-through;opacity:.7;font-size:.85rem;}

  .cupom-badge{
    background:#fff5fa;
    color:var(--brand-color);
    font-size:.75rem;
    border:1px dashed var(--brand-color);
  }
  
  /* nome do produto – 2 linhas -------------------------------------*/
  .product-name{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    min-height:3rem;
  }
  
  /* PÁGINA PRODUTO --------------------------------------------------*/
  .image-wrapper{
    background:#fff;
    border-radius:var(--radius);
    padding:1rem;
    box-shadow:0 6px 16px rgba(0,0,0,.05);
  }
  .main-image{object-fit:contain;border-radius:var(--radius);}
  .highlight-box{
    background:#fff;
    border-radius:var(--radius);
    padding:2rem;
    box-shadow:0 6px 16px rgba(0,0,0,.05);
  }
  
/* ================================================================
   MOBILE SEARCH – full-width, sem laterais e sem cantos
   ================================================================*/
   @media (max-width: 767.98px){
    /* EXISTENTES */
    .mobile-search{width:100%;padding:0;margin-top:1rem;}
    .mobile-search .input-group{box-shadow:none;border-radius:0;width:100%;}
    .mobile-search .input-group-text{border:none!important;border-top-left-radius:0!important;border-bottom-left-radius:0!important;background:#fff;}
    .mobile-search .form-control{border:none!important;border-top-right-radius:0!important;border-bottom-right-radius:0!important;box-shadow:none!important;}
    .card-oferta .text-brand{font-size:1.3rem;}
    .card-oferta .text-brand-related{font-size:1.1rem;}
    .card-oferta .preco-original{font-size:1.1rem;}
    .cupom-badge{font-size:1.05rem;}
  
    /* NOVAS REGRAS PARA PÁGINA DE PRODUTO */
    /* Aumenta preço e cupom na highlight-box */
    .highlight-box .h3.text-brand {
      font-size: 2rem;
      line-height: 1.2;
    }
    .highlight-box .cupom-badge {
      font-size: 1.1rem;
      padding: .5rem .9rem;
    }
  }

  /* aumenta font-size do cupom */
  .highlight-box .cupom-badge {
    font-size: 1.1rem;
    padding: .4rem .8rem;
  }

  /* aside WhatsApp */
  .promo-sidebar {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 260px;
    background: #fff;
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    z-index: 1050;
  }
  .promo-sidebar .sidebar-close {
    position: absolute;
    top: .5rem;
    right: .5rem;
  }
  .promo-sidebar .promo-logo {
    font-size: 2rem;
    color: #25D366;
    display: block;
    margin-bottom: 1rem;
  }
  .promo-sidebar.collapsed .promo-content,
  .promo-sidebar.collapsed .sidebar-close {
    display: none;
  }