/* =========================================================
   FRIALTO — APP BASE UI (DEFINITIVO)
   Base: Poppins + #e4100e
   ========================================================= */

:root{
  --fr-red:#e4100e;
  --fr-red-dark:#b90c0a;
  --fr-bg:#f6f7f9;
  --fr-card:#ffffff;
  --fr-ink:#111827;
  --fr-muted:#6b7280;
  --fr-line:#e5e7eb;

  --fr-radius-xl:26px;
  --fr-radius-lg:18px;
  --fr-radius-md:14px;

  --fr-shadow: 0 10px 28px rgba(17,24,39,.08);
  --fr-shadow-hover: 0 16px 40px rgba(17,24,39,.14);
}

/* RESET */
*,
*::before,
*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ font-size:16px; }
body{
  font-family:'Poppins', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  background:var(--fr-bg);
  color:var(--fr-ink);
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; height:auto; display:block; }
button{ font-family:inherit; }

.fr-container{
  max-width:1280px;
  margin:0 auto;
  padding:24px;
}
@media (max-width: 768px){
  .fr-container{ padding:16px; }
  body{ padding-bottom:84px; } /* espaço para bottom nav */
}

/* =========================================================
   HEADER — BARRA VERMELHA FINA + BUSCA CENTRAL (PC)
   Usa seu header.php atual (classes existentes)
   ========================================================= */
.site-header{
  background:#fff;
  border-bottom:1px solid var(--fr-line);
}

/* barra superior fina */
.header-top-bar{
  background:var(--fr-red);
  color:#fff;
}
.header-container{
  max-width:1280px;
  margin:0 auto;
  padding:10px 24px;
  display:flex;
  align-items:center;
  gap:16px;
}
@media (max-width:768px){
  .header-container{ padding:10px 16px; justify-content:center; }
}

/* logo */
.site-logo .custom-logo,
.site-logo-img{
  height:34px;
  width:auto;
  display:block;
}
@media (min-width: 1024px){
  /* logo no canto direito no PC */
  .header-top-bar .header-container{
    justify-content:space-between;
  }
  .site-logo{ order:3; }
  .header-icons-desktop{ order:1; }
}
@media (max-width:1023px){
  .site-logo{ display:flex; justify-content:center; width:100%; }
}

/* ícones desktop */
.header-icons-desktop{
  display:flex;
  align-items:center;
  gap:14px;
}
.header-icons-desktop .header-icon{
  display:flex;
  align-items:center;
  gap:8px;
  color:#fff;
  font-weight:600;
  font-size:.92rem;
  opacity:.96;
}
.header-icons-desktop .header-icon i{ font-size:1rem; }
.header-icons-desktop .header-icon:hover{ opacity:1; }

.cart-count{
  min-width:20px;
  height:20px;
  border-radius:999px;
  background:#fff;
  color:var(--fr-red);
  font-size:.75rem;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-left:4px;
}

/* mobile icons no topo (você já tem container) */
.header-icons-mobile{ display:none; }
@media (max-width:768px){
  .header-icons-desktop{ display:none; }
  .header-icons-mobile{ display:none; } /* no mobile, a navegação principal será a bottom nav */
}

/* busca desktop (barra branca abaixo do vermelho) */
.header-search-bar{
  background:#fff;
}
.search-form{
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:center;
  padding:14px 24px;
}
.search-field{
  width:min(760px, 100%);
  height:44px;
  border:1px solid var(--fr-line);
  border-radius:999px;
  padding:0 16px;
  outline:none;
  background:#fff;
}
.search-field:focus{
  border-color:rgba(228,16,14,.45);
  box-shadow:0 0 0 4px rgba(228,16,14,.12);
}
.search-submit{
  height:44px;
  border-radius:999px;
  border:none;
  background:var(--fr-red);
  color:#fff;
  padding:0 18px;
  font-weight:700;
  cursor:pointer;
}
.search-submit:hover{ background:var(--fr-red-dark); }

@media (max-width:768px){
  .header-search-bar{ display:none; } /* mobile sem busca no topo */
}

/* =========================================================
   HOME — HERO SLIDER
   ========================================================= */
.fr-home-wrap{ padding-top:22px; }

.fr-hero-slider{
  position:relative;
  border-radius:var(--fr-radius-xl);
  overflow:hidden;
  box-shadow:var(--fr-shadow);
  background:#111;
}

.fr-hero-track{
  display:flex;
  transition:transform .55s cubic-bezier(.2,.9,.2,1);
  will-change:transform;
}

.fr-hero-slide{
  min-width:100%;
  position:relative;
  padding:54px 54px;
  background-image: var(--bg);
  background-size:cover;
  background-position:center;
}

.fr-hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.25));
}

.fr-hero-content{
  position:relative;
  max-width:560px;
  color:#fff;
}

.fr-hero-title{
  font-size:2.1rem;
  font-weight:800;
  letter-spacing:-.02em;
}
.fr-hero-desc{
  margin-top:10px;
  opacity:.96;
  font-size:1rem;
}
.fr-hero-cta{
  display:inline-flex;
  margin-top:18px;
  background:var(--fr-red);
  color:#fff;
  font-weight:800;
  border-radius:999px;
  padding:12px 18px;
  box-shadow:0 10px 22px rgba(228,16,14,.35);
}
.fr-hero-cta:hover{ background:var(--fr-red-dark); }

.fr-hero-dots{
  position:absolute;
  left:18px;
  bottom:16px;
  display:flex;
  gap:8px;
  z-index:3;
}
.fr-hero-dot{
  width:10px; height:10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.55);
  background:rgba(255,255,255,.25);
  cursor:pointer;
}
.fr-hero-dot.is-active{
  background:#fff;
  border-color:#fff;
}

@media (max-width:768px){
  .fr-hero-slide{ padding:26px 18px; }
  .fr-hero-title{ font-size:1.45rem; }
  .fr-hero-desc{ font-size:.95rem; }
  .fr-hero-dots{ left:14px; bottom:12px; }
}

/* =========================================================
   SEÇÕES
   ========================================================= */
.fr-section{ margin-top:26px; }
.fr-section-head{ margin-bottom:14px; }
.fr-section-title{
  font-size:1.25rem;
  font-weight:800;
  letter-spacing:-.01em;
}
.fr-section-sub{
  margin-top:4px;
  color:var(--fr-muted);
  font-size:.92rem;
}

/* =========================================================
   FILTER CHIPS (CATEGORIAS)
   ========================================================= */
.fr-home-cats-row{
  display:flex;
  gap:10px;
  overflow:auto;
  padding:6px 2px;
  scrollbar-width:none;
}
.fr-home-cats-row::-webkit-scrollbar{ display:none; }

.fr-cat-chip{
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--fr-line);
  background:#fff;
  border-radius:999px;
  padding:10px 14px;
  cursor:pointer;
  white-space:nowrap;
  transition:all .18s ease;
  box-shadow:0 8px 16px rgba(17,24,39,.06);
}
.fr-cat-ico{
  width:30px; height:30px;
  border-radius:999px;
  background:rgba(228,16,14,.10);
  color:var(--fr-red);
  display:flex;
  align-items:center;
  justify-content:center;
}
.fr-cat-txt{
  font-weight:800;
  font-size:.92rem;
}
.fr-cat-chip:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 24px rgba(17,24,39,.12);
}
.fr-cat-chip.is-active{
  border-color:rgba(228,16,14,.35);
  background:linear-gradient(180deg, rgba(228,16,14,.10), rgba(228,16,14,.04));
}
.fr-cat-chip.is-active .fr-cat-ico{
  background:var(--fr-red);
  color:#fff;
}

/* =========================================================
   GRID + CARD
   ========================================================= */
.fr-products-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:18px;
}

@media (max-width:1024px){
  .fr-products-grid{ grid-template-columns:repeat(3, 1fr); }
}
@media (max-width:768px){
  .fr-products-grid{ grid-template-columns:repeat(2, 1fr); gap:14px; }
}

.frcat-card{
  background:var(--fr-card);
  border:1px solid rgba(229,231,235,.9);
  border-radius:var(--fr-radius-lg);
  overflow:hidden;
  box-shadow:var(--fr-shadow);
  transition:transform .18s ease, box-shadow .18s ease;
  display:flex;
  flex-direction:column;
}
.frcat-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--fr-shadow-hover);
}

.frcat-media{ background:#f1f5f9; }
.frcat-media img{
  width:100%;
  aspect-ratio: 1 / 1;
  object-fit:cover;
}

.frcat-link{ padding:12px 12px 0 12px; display:block; }
.frcat-title{
  font-size:.95rem;
  font-weight:800;
  line-height:1.2;
  margin-top:10px;
  min-height:38px;
}
.frcat-price{
  margin-top:6px;
  font-weight:900;
  color:var(--fr-red);
}

.frcat-btn-add{
  margin:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:none;
  border-radius:14px;
  padding:12px 12px;
  background:var(--fr-red);
  color:#fff;
  font-weight:900;
  cursor:pointer;
  transition:background .16s ease, transform .12s ease;
}
.frcat-btn-add:hover{ background:var(--fr-red-dark); }
.frcat-btn-add:active{ transform:scale(.98); }

/* pequenos ajustes Woo */
.price-per-kg{ font-weight:800; color:var(--fr-muted); font-size:.85em; margin-left:4px; }

/* =========================================================
   LOADING / EMPTY
   ========================================================= */
.fr-home-loading{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:10px;
  padding:24px 0;
  color:var(--fr-muted);
}
.fr-spinner{
  width:30px; height:30px;
  border-radius:999px;
  border:3px solid rgba(17,24,39,.12);
  border-top-color: var(--fr-red);
  animation:frspin .75s linear infinite;
}
@keyframes frspin{ to{ transform:rotate(360deg); } }

.fr-empty{
  background:#fff;
  border:1px dashed rgba(229,231,235,.95);
  border-radius:16px;
  padding:14px;
  color:var(--fr-muted);
}
.fr-link{ color:var(--fr-red); font-weight:900; margin-left:8px; }

/* =========================================================
   PAGINAÇÃO (AJAX)
   ========================================================= */
.fr-pagination{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:14px;
  flex-wrap:wrap;
}
.fr-page-btn{
  border:1px solid var(--fr-line);
  background:#fff;
  border-radius:12px;
  padding:10px 12px;
  font-weight:900;
  cursor:pointer;
  min-width:44px;
}
.fr-page-btn.is-active{
  background:var(--fr-red);
  border-color:var(--fr-red);
  color:#fff;
}

/* =========================================================
   PEDIDOS
   ========================================================= */
.fr-orders-list{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:14px;
}
@media (max-width:768px){
  .fr-orders-list{ grid-template-columns:1fr; }
}
.fr-order-card{
  background:#fff;
  border:1px solid rgba(229,231,235,.9);
  border-radius:18px;
  padding:14px;
  box-shadow:var(--fr-shadow);
}
.fr-order-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.fr-order-title{
  font-weight:900;
}
.fr-order-meta{
  color:var(--fr-muted);
  font-size:.9rem;
  margin-top:4px;
}
.fr-order-items{
  display:flex;
  gap:10px;
  margin-top:12px;
  overflow:auto;
  padding-bottom:6px;
  scrollbar-width:none;
}
.fr-order-items::-webkit-scrollbar{ display:none; }
.fr-oi{
  width:54px;
  height:54px;
  border-radius:14px;
  overflow:hidden;
  background:#f1f5f9;
  flex:0 0 auto;
}
.fr-oi img{ width:100%; height:100%; object-fit:cover; }

.fr-order-actions{
  margin-top:12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.fr-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:14px;
  padding:10px 12px;
  font-weight:900;
  cursor:pointer;
  border:1px solid var(--fr-line);
  background:#fff;
}
.fr-btn-primary{
  background:var(--fr-red);
  color:#fff;
  border-color:var(--fr-red);
}
.fr-btn-primary:hover{ background:var(--fr-red-dark); }

/* =========================================================
   MAIS VENDIDOS — textura/área diferenciada
   ========================================================= */
.fr-bestsellers-bg{
  background:
    radial-gradient(circle at 12% 18%, rgba(228,16,14,.10), transparent 42%),
    radial-gradient(circle at 88% 42%, rgba(17,24,39,.08), transparent 40%),
    linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.92));
  border:1px solid rgba(229,231,235,.95);
  border-radius:var(--fr-radius-xl);
  padding:18px;
  box-shadow:var(--fr-shadow);
}

/* =========================================================
   FOOTER (genérico, caso seu footer tenha classes diferentes)
   ========================================================= */
.site-footer{
  margin-top:40px;
  padding:26px 16px 32px;
  text-align:center;
  color:rgba(17,24,39,.7);
}
.site-footer img{
  margin:0 auto 10px auto;
  height:38px;
  width:auto;
}
.site-footer a{ color:var(--fr-red); font-weight:800; }
/* =========================================================
   FRIALTO — GRID & CARD AJUSTE DESKTOP (APP FEEL)
   ========================================================= */

/* GRID PRINCIPAL — DESKTOP */
@media (min-width: 1024px) {
  .fr-products-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
  }
}

/* CARD DE PRODUTO */
.frcat-card {
  padding: 16px 16px 18px;
  border-radius: 18px;
  transition: transform .2s ease, box-shadow .2s ease;
}

.frcat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0,0,0,.08);
}

/* IMAGEM */
.frcat-media {
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 14px;
}

/* TÍTULO */
.frcat-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 8px;
  padding: 0 2px;
}

/* PREÇO */
.frcat-price {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 12px;
  padding: 0 2px;
}

/* BOTÃO */
.frcat-btn-add {
  font-size: 14px;
  padding: 10px 0;
  border-radius: 14px;
}

/* MOBILE mantém confortável */
@media (max-width: 768px) {
  .fr-products-grid {
    gap: 16px;
  }
}
/* =========================================================
   FRIALTO — ÁREA DE PEDIDOS (DESTAQUE PREMIUM)
   ========================================================= */

.fr-home-orders {
  margin-top: 64px;
  padding: 48px 32px;
  border-radius: 32px;
  background:
    radial-gradient(
      circle at top right,
      rgba(227, 24, 55, 0.08),
      transparent 55%
    ),
    #f8f9fb;
}

/* Cabeçalho da seção */
.fr-home-orders .fr-section-head {
  margin-bottom: 28px;
}

/* GRID DOS PEDIDOS */
.fr-orders-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

/* CARD DE PEDIDO — um pouco menor que produto */
.fr-order-card {
  background: #fff;
  border-radius: 20px;
  padding: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

/* Botão repetir */
.fr-btn-reorder {
  margin-top: 16px;
  font-size: 14px;
  border-radius: 14px;
}
/* =========================================================
   FRIALTO — CONTAINER DESKTOP (RESPIRO PREMIUM)
   ========================================================= */

@media (min-width: 1200px) {

  .fr-home,
  .fr-section,
  .fr-header-app {
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 32px;
    padding-right: 32px;
  }
}
/* =========================
   CARDS DE PRODUTO — AJUSTE PREMIUM
========================= */

.frcat-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* IMAGEM MAIS ALTA */
.frcat-media img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 14px;
}

/* TÍTULO */
.frcat-title {
  font-size: 14px;
  margin: 10px 0 6px;
}

/* PREÇO */
.frcat-price {
  margin-bottom: 12px;
}

/* BOTÃO SEMPRE NO MESMO LUGAR */
.frcat-btn-add {
  margin-top: auto;
}