/* Bella Pink - melhorias de navegação e usabilidade
   Mantém o layout/base atual e torna a experiência mais direta no celular.
*/

/* ---------- Loja: navegação ---------- */
.commerce-tabs a{
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}
.commerce-tabs a:hover{transform:translateY(-1px)}

/* ---------- Painel: menu lateral no desktop ---------- */
.admin-side-nav{display:none}

@media (min-width:1100px){
  body.admin-body.admin-sidebar-ready{padding-left:246px}
  body.admin-body.admin-sidebar-ready .site-header{left:246px;width:calc(100% - 246px)}
  body.admin-body.admin-sidebar-ready .admin-main.container{width:min(calc(100% - 54px),var(--container));max-width:none}
  body.admin-body.admin-sidebar-ready .admin-header-actions{display:none}

  .admin-side-nav{
    position:fixed;
    z-index:90;
    inset:0 auto 0 0;
    width:246px;
    display:flex;
    flex-direction:column;
    padding:22px 16px 18px;
    background:linear-gradient(180deg,#fffafd 0%,#fff1f7 100%);
    border-right:1px solid var(--line);
    box-shadow:12px 0 32px rgba(107,40,76,.06);
    overflow:auto;
  }
  .admin-side-brand{
    display:flex;
    align-items:center;
    gap:11px;
    padding:4px 8px 20px;
    border-bottom:1px solid var(--line);
    margin-bottom:16px;
  }
  .admin-side-brand .brand-mark{flex:0 0 40px}
  .admin-side-brand strong{display:block;font-family:"Playfair Display",serif;letter-spacing:.08em}
  .admin-side-brand small{display:block;color:var(--pink-600);font-size:.72rem}
  .admin-side-label{
    padding:4px 10px 8px;
    color:#a07b8e;
    font-size:.68rem;
    font-weight:900;
    letter-spacing:.1em;
    text-transform:uppercase;
  }
  .admin-side-links{display:flex;flex-direction:column;gap:4px}
  .admin-side-link{
    min-height:43px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:0 11px;
    border-radius:12px;
    color:var(--muted);
    font-weight:800;
    font-size:.86rem;
    transition:.18s ease;
  }
  .admin-side-link span{width:23px;text-align:center;font-size:1rem}
  .admin-side-link:hover{background:white;color:var(--pink-600)}
  .admin-side-link.active{background:var(--pink-500);color:white;box-shadow:0 8px 20px rgba(220,79,145,.2)}
  .admin-side-footer{
    margin-top:auto;
    padding-top:16px;
    border-top:1px solid var(--line);
    display:grid;
    gap:7px;
  }
  .admin-side-action{
    width:100%;
    min-height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    border:1px solid var(--line);
    border-radius:12px;
    background:white;
    color:var(--wine);
    cursor:pointer;
    font-weight:800;
  }
  .admin-side-action.primary{background:var(--pink-500);border-color:var(--pink-500);color:white}

  #adminApp section[id],#adminApp form[id]{scroll-margin-top:96px}
}

/* ---------- Celular: entrada mais limpa e catálogo mais cedo ---------- */
@media (max-width:720px){
  body:not(.admin-body){padding-bottom:72px}

  body:not(.admin-body) .site-header{
    position:sticky;
    top:0;
    z-index:70;
    background:rgba(255,250,252,.97);
    box-shadow:0 5px 20px rgba(107,40,76,.07);
  }
  body:not(.admin-body) .header-inner{
    min-height:auto;
    padding:8px 0 9px;
    gap:8px 10px;
    flex-wrap:wrap;
  }
  body:not(.admin-body) .brand{gap:7px;min-width:0}
  body:not(.admin-body) .brand-mark{width:35px;height:35px;border-radius:11px}
  body:not(.admin-body) .brand strong{font-size:.83rem}
  body:not(.admin-body) .brand small{font-size:.64rem}
  body:not(.admin-body) .cart-button{
    min-height:39px;
    padding:0 11px;
    margin-left:auto;
  }
  body:not(.admin-body) .cart-button-text{display:none}

  body:not(.admin-body) .commerce-tabs{
    order:4;
    width:100%;
    margin:0;
    padding-top:7px;
    gap:6px;
    overflow:visible;
    border-top:1px solid rgba(240,220,230,.8);
  }
  body:not(.admin-body) .commerce-tabs a{
    flex:1;
    min-width:0;
    padding:8px 6px;
    text-align:center;
    border-radius:11px;
    font-size:.75rem;
  }

  /* Hero compacto: preserva identidade, mas deixa produtos próximos da primeira tela. */
  body:not(.admin-body) .hero{padding:18px 0 15px}
  body:not(.admin-body) .hero-grid{display:block}
  body:not(.admin-body) .hero-card{display:none}
  body:not(.admin-body) .hero-copy .eyebrow{font-size:.67rem}
  body:not(.admin-body) .hero h1{
    margin:7px 0 8px;
    max-width:none;
    font-size:clamp(1.7rem,8.5vw,2.15rem);
    line-height:1.03;
  }
  body:not(.admin-body) .hero-copy>p{
    margin:0;
    max-width:none;
    font-size:.88rem;
    line-height:1.4;
  }
  body:not(.admin-body) .hero-actions{margin-top:12px;gap:7px}
  body:not(.admin-body) .hero-actions .btn{min-height:40px;padding:0 13px;font-size:.78rem}
  body:not(.admin-body) .trust-row{display:none}

  /* Avisos de Atacado/Encomenda continuam visíveis, mas ocupam menos altura. */
  body:not(.admin-body) .commerce-banner-inner{padding:9px 0;gap:7px}
  body:not(.admin-body) .commerce-banner-copy{min-width:0}
  body:not(.admin-body) .commerce-banner-copy strong{font-size:.82rem}
  body:not(.admin-body) .commerce-banner-copy small{font-size:.68rem;line-height:1.3}
  body:not(.admin-body) .commerce-progress-track{height:8px}
  body:not(.admin-body) .commerce-progress-text{margin-top:4px}

  body:not(.admin-body) .category-section{padding:14px 0 0}
  body:not(.admin-body) .category-section .section-heading{margin-bottom:9px}
  body:not(.admin-body) .category-section .eyebrow{display:none}
  body:not(.admin-body) .category-section h2{font-size:1.35rem;margin:0}
  body:not(.admin-body) .category-strip{gap:7px;padding-bottom:7px}
  body:not(.admin-body) .category-chip{min-height:37px;padding:0 12px;font-size:.73rem}

  body:not(.admin-body) .products-section{padding:20px 0 48px}
  body:not(.admin-body) .products-section .section-heading{gap:10px;margin-bottom:12px}
  body:not(.admin-body) .products-section .section-heading .eyebrow{font-size:.65rem}
  body:not(.admin-body) .products-section .section-heading h2{font-size:1.75rem;margin-top:2px}
  body:not(.admin-body) .products-section .section-heading p{font-size:.78rem;margin-top:3px}
  body:not(.admin-body) .search-box{height:42px;border-radius:13px}
  body:not(.admin-body) .results-info{margin-bottom:8px;font-size:.78rem}

  body:not(.admin-body) .product-grid{gap:9px}
  body:not(.admin-body) .product-card{border-radius:16px}
  body:not(.admin-body) .product-body{padding:10px}
  body:not(.admin-body) .product-name{font-size:.88rem}
  body:not(.admin-body) .product-category{font-size:.6rem}
  body:not(.admin-body) .product-bottom{gap:5px}
  body:not(.admin-body) .add-cart-btn{padding:8px 9px;font-size:.7rem}
  body:not(.admin-body) .price small{font-size:.6rem}
  body:not(.admin-body) .price strong{font-size:.92rem}

  /* Barra inferior mais compacta e fácil de tocar. */
  body:not(.admin-body) .mobile-nav{min-height:64px}
  body:not(.admin-body) .mobile-nav a,
  body:not(.admin-body) .mobile-nav button{font-size:.62rem}
}

@media (max-width:390px){
  body:not(.admin-body) .hero h1{font-size:1.65rem}
  body:not(.admin-body) .commerce-tabs a{font-size:.7rem;padding:8px 4px}
}