/* ===========================================================================
   FechAí — Vitrine pública v1
   Camada visual final inspirada na referência aprovada: navegação limpa,
   hero legível, categorias fáceis de percorrer e cards de produto consistentes.
   Não altera dados, checkout, carrinho ou integrações.
   =========================================================================== */

:root{
  --vf-store-canvas:#faf9f7;
  --vf-store-surface:#ffffff;
  --vf-store-surface-soft:#f7f6f3;
  --vf-store-ink:#1f242d;
  --vf-store-muted:#69727d;
  --vf-store-line:#e7e4df;
  --vf-store-shadow:0 18px 50px rgba(26,31,39,.08);
  --vf-store-shadow-sm:0 8px 22px rgba(26,31,39,.065);
  --vf-store-radius:18px;
  --vf-store-radius-lg:26px;
}

html,
body{
  background:var(--vf-store-canvas)!important;
  color:var(--vf-store-ink)!important;
}

body{
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.vf-store-app{
  min-height:100dvh;
  padding-bottom:108px;
  background:
    radial-gradient(circle at 92% 0%,color-mix(in srgb,var(--vf-accent) 7%,transparent),transparent 25rem),
    linear-gradient(180deg,#fff 0,#faf9f7 360px);
}

/* Cabeçalho: compacto, legível e com foco na marca da loja. */
.vf-store-header{
  min-height:72px;
  padding:12px max(18px,calc((100vw - 1240px)/2));
  border-bottom:1px solid rgba(27,32,40,.08);
  background:rgba(255,255,255,.90)!important;
  box-shadow:0 7px 20px rgba(24,29,36,.045)!important;
  backdrop-filter:blur(16px) saturate(1.15);
}
.vf-brand{
  gap:11px;
  color:var(--vf-store-ink)!important;
  font-size:16px;
  letter-spacing:-.025em;
}
.vf-brand-avatar{
  width:42px;
  height:42px;
  border:1px solid var(--vf-store-line);
  border-radius:14px;
  background:var(--vf-store-surface)!important;
  box-shadow:0 5px 13px rgba(24,29,36,.08);
}
.vf-brand-avatar img{
  padding:3px!important;
  background:#fff!important;
  object-fit:contain!important;
}
.vf-header-actions{gap:8px}
.vf-icon-button,
.vf-cart-button{
  min-height:42px;
  border:1px solid var(--vf-store-line)!important;
  border-radius:13px;
  background:var(--vf-store-surface)!important;
  color:var(--vf-store-ink)!important;
  box-shadow:0 4px 12px rgba(24,29,36,.035);
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.vf-icon-button{width:42px}
.vf-cart-button{padding:0 12px}
.vf-cart-button span{
  min-width:21px;
  height:21px;
  background:var(--vf-accent)!important;
  color:#fff!important;
  font-size:11px;
}
.vf-icon-button:hover,
.vf-cart-button:hover{
  transform:translateY(-1px);
  border-color:color-mix(in srgb,var(--vf-accent) 44%,var(--vf-store-line));
  box-shadow:0 9px 18px color-mix(in srgb,var(--vf-accent) 12%,transparent);
}

/* Hero: imagem da loja continua visível, mas o texto nunca perde contraste. */
.vf-hero,
.vf-products-section,
.vf-active-order{width:min(1240px,calc(100% - 36px))}
.vf-featured-section,
.vf-public-notice{width:min(1240px,calc(100% - 36px))}
.vf-hero{
  min-height:286px;
  margin-top:24px;
  padding:30px clamp(24px,4vw,48px);
  align-items:center;
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--vf-store-radius-lg);
  background:
    radial-gradient(circle at 79% 34%,color-mix(in srgb,var(--vf-accent) 60%,transparent),transparent 22%),
    radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--vf-accent) 30%,transparent),transparent 34%),
    linear-gradient(132deg,#111827 0%,#18212d 54%,color-mix(in srgb,#141a24 54%,var(--vf-accent)) 100%)!important;
  box-shadow:0 24px 48px rgba(18,24,33,.16);
}
.vf-hero.has-banner{
  background-image:
    linear-gradient(96deg,rgba(9,14,22,.96) 0%,rgba(12,18,27,.87) 43%,rgba(11,16,24,.56) 70%,rgba(9,14,22,.38) 100%),
    var(--vf-store-banner-image),
    radial-gradient(circle at 82% 32%,color-mix(in srgb,var(--vf-accent) 57%,transparent),transparent 26%),
    linear-gradient(132deg,#111827 0%,#18212d 54%,color-mix(in srgb,#141a24 54%,var(--vf-accent)) 100%)!important;
  background-size:cover,var(--vf-store-banner-fit,cover),cover,cover!important;
  background-position:center,var(--vf-store-banner-position,center),center,center!important;
  background-repeat:no-repeat!important;
}
.vf-hero-overlay{
  z-index:0!important;
  opacity:0!important;
  background:transparent!important;
}
.vf-hero-content,
.vf-hero-stat{position:relative;z-index:1}
.vf-hero-content{max-width:760px}
.vf-badge{
  padding:8px 11px;
  border-color:rgba(255,255,255,.18);
  background:color-mix(in srgb,var(--vf-accent) 22%,rgba(255,255,255,.10));
  color:#fff;
  font-size:10px;
  box-shadow:inset 0 1px rgba(255,255,255,.12);
}
.vf-identity{gap:16px;margin-top:18px}
.vf-hero-logo{
  width:76px;
  height:76px;
  border:2px solid rgba(255,255,255,.96);
  border-radius:20px;
  background:#fff!important;
  box-shadow:0 12px 28px rgba(0,0,0,.26);
}
.vf-hero-logo img{padding:3px;object-fit:contain!important;background:#fff}
.vf-identity h1{
  color:#fff!important;
  font-size:clamp(32px,4.2vw,50px);
  font-weight:880;
  letter-spacing:-.05em;
  text-shadow:0 3px 18px rgba(0,0,0,.28);
}
.vf-identity p{
  max-width:620px;
  color:rgba(255,255,255,.93)!important;
  font-size:15px;
  font-weight:560;
}
.vf-hero-notice{
  max-width:620px;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.10);
  color:#fff;
}
.vf-hero-stat{
  min-width:226px;
  max-width:260px;
  padding:16px;
  border-color:rgba(255,255,255,.15);
  border-radius:16px;
  background:rgba(255,255,255,.105);
  box-shadow:inset 0 1px rgba(255,255,255,.12);
  backdrop-filter:blur(9px);
}
.vf-hero-stat::before{
  content:"\ea5d";
  display:inline-grid;
  place-items:center;
  width:32px;
  height:32px;
  margin-bottom:9px;
  border-radius:10px;
  background:color-mix(in srgb,var(--vf-accent) 28%,rgba(255,255,255,.10));
  color:#fff;
  font-family:"tabler-icons";
  font-size:18px;
}
.vf-hero-stat span{color:rgba(255,255,255,.72);font-weight:650}
.vf-hero-stat strong{color:#fff;font-size:13px;line-height:1.4}

/* Recados e estado da loja: aviso nítido sem chamar atenção excessiva. */
.vf-public-notice,
.vf-active-order{
  margin-top:16px;
  border:1px solid color-mix(in srgb,var(--vf-accent) 20%,var(--vf-store-line));
  border-radius:15px;
  background:color-mix(in srgb,var(--vf-accent) 6%,#fff);
  color:color-mix(in srgb,var(--vf-accent) 68%,#1f242d);
  box-shadow:0 6px 16px rgba(28,34,43,.035);
}
.vf-public-notice{padding:14px 16px;font-size:13px}
.vf-public-notice.blocked{
  border-color:#fed0d0!important;
  background:#fff7f7!important;
  color:#b42318!important;
  box-shadow:inset 4px 0 #ef4444;
}
.vf-active-order{padding:14px 16px}

/* Seções e filtros: mesma ordem visual da referência, com tema da própria loja. */
.vf-featured-section{
  margin-top:28px;
  padding:22px;
  border:1px solid var(--vf-store-line);
  border-radius:var(--vf-store-radius);
  background:linear-gradient(135deg,color-mix(in srgb,var(--vf-accent) 6%,#fff),#fff 64%);
  box-shadow:var(--vf-store-shadow-sm);
}
.vf-products-section{padding-top:32px}
.vf-products-heading{align-items:flex-end;gap:18px}
.vf-products-heading h2{
  color:var(--vf-store-ink)!important;
  font-size:clamp(26px,3vw,34px);
  font-weight:880;
  letter-spacing:-.045em;
}
.vf-products-heading p{margin-top:7px;color:var(--vf-store-muted)!important;font-size:14px;line-height:1.5}
.vf-section-kicker{color:color-mix(in srgb,var(--vf-accent) 82%,#223)!important;font-size:10px}
.vf-section-kicker i{color:var(--vf-accent)!important}
.vf-category-pills{
  position:sticky;
  top:72px;
  z-index:16;
  gap:9px;
  margin:18px 0 26px;
  padding:10px;
  border:1px solid var(--vf-store-line);
  border-radius:18px;
  background:rgba(255,255,255,.92)!important;
  box-shadow:0 9px 26px rgba(26,31,39,.055);
  backdrop-filter:blur(14px);
}
.vf-category-pills button{
  min-height:42px;
  padding:0 15px;
  border-color:transparent!important;
  border-radius:13px;
  background:transparent!important;
  color:#4c5662!important;
  font-size:13px;
  font-weight:780;
}
.vf-category-pills button:hover{
  transform:none;
  border-color:color-mix(in srgb,var(--vf-accent) 18%,transparent)!important;
  background:color-mix(in srgb,var(--vf-accent) 9%,#fff)!important;
  color:color-mix(in srgb,var(--vf-accent) 76%,#1e293b)!important;
  box-shadow:none;
}
.vf-category-pills button.active{
  border-color:var(--vf-accent)!important;
  background:var(--vf-accent)!important;
  color:#fff!important;
  box-shadow:0 9px 18px color-mix(in srgb,var(--vf-accent) 27%,transparent)!important;
}
.vf-menu-groups{gap:42px}
.vf-menu-category{scroll-margin-top:148px}
.vf-menu-category-heading{
  margin-bottom:18px;
  padding:0 0 14px;
  border-bottom-color:var(--vf-store-line);
}
.vf-menu-category-heading h3{
  color:var(--vf-store-ink)!important;
  font-size:clamp(22px,2.6vw,29px);
  font-weight:860;
}
.vf-menu-category-heading>span{
  border-color:color-mix(in srgb,var(--vf-accent) 18%,var(--vf-store-line));
  background:color-mix(in srgb,var(--vf-accent) 6%,#fff);
  color:color-mix(in srgb,var(--vf-accent) 74%,#3a4654);
}

/* Produto: foto com área limpa, dados bem hierarquizados e ação evidente. */
.vf-products-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.vf-product{
  min-height:100%;
  border-color:var(--vf-store-line)!important;
  border-radius:18px;
  background:var(--vf-store-surface)!important;
  box-shadow:0 7px 17px rgba(26,31,39,.045)!important;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.vf-product:hover{
  transform:translateY(-3px);
  border-color:color-mix(in srgb,var(--vf-accent) 38%,var(--vf-store-line))!important;
  box-shadow:0 16px 30px color-mix(in srgb,var(--vf-accent) 11%,transparent)!important;
}
.vf-product-image{
  height:198px;
  border-bottom:1px solid #f0eeeb;
  background:linear-gradient(145deg,#fff,#f5f4f1)!important;
}
.vf-product-image img{object-fit:contain!important;padding:12px;background:#fff}
.vf-product-image i{color:color-mix(in srgb,var(--vf-accent) 56%,#94a3b8)}
.vf-product-highlight-badge{
  top:12px;
  left:12px;
  padding:6px 9px;
  border:1px solid color-mix(in srgb,var(--vf-accent) 17%,var(--vf-store-line));
  background:rgba(255,255,255,.94);
  color:color-mix(in srgb,var(--vf-accent) 79%,#263444);
  box-shadow:0 6px 16px rgba(26,31,39,.08);
}
.vf-product-body{min-height:172px;padding:15px}
.vf-product-category{color:color-mix(in srgb,var(--vf-accent) 81%,#52606c)!important;font-size:10px}
.vf-product h3{color:var(--vf-store-ink)!important;font-size:16px;font-weight:830}
.vf-product p{color:var(--vf-store-muted)!important;font-size:12px;line-height:1.5}
.vf-product-customize{color:color-mix(in srgb,var(--vf-accent) 80%,#1f2937)!important}
.vf-product-footer{gap:10px;padding-top:14px}
.vf-product-footer strong{color:var(--vf-store-ink)!important;font-size:18px;font-weight:850}
.vf-add{
  min-width:42px;
  width:auto;
  height:42px;
  padding:0 13px;
  border:1px solid transparent;
  border-radius:12px;
  background:var(--vf-accent)!important;
  color:#fff!important;
  box-shadow:0 8px 17px color-mix(in srgb,var(--vf-accent) 28%,transparent)!important;
}
.vf-add:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.04)}
.vf-add:disabled{background:#d8d5d1!important;color:#77716b!important;box-shadow:none!important}
.vf-empty-grid{border-color:var(--vf-store-line);background:#fff}

/* Carrinho e fluxos de pedido seguem o mesmo contraste da vitrine. */
.vf-mobile-cart{
  right:max(18px,env(safe-area-inset-right));
  bottom:max(18px,env(safe-area-inset-bottom));
  min-height:58px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:17px;
  background:var(--vf-accent)!important;
  box-shadow:0 18px 34px color-mix(in srgb,var(--vf-accent) 35%,transparent)!important;
}
.vf-modal{background:rgba(15,18,24,.46)!important;backdrop-filter:blur(4px)}
.vf-modal-sheet{
  border:1px solid var(--vf-store-line)!important;
  border-radius:22px 22px 0 0!important;
  background:#fff!important;
  box-shadow:0 -14px 50px rgba(15,18,24,.16)!important;
}
.vf-modal-top{border-bottom-color:var(--vf-store-line)!important}
.vf-modal-top h2{color:var(--vf-store-ink)!important;font-weight:850}
.vf-close{border-color:var(--vf-store-line)!important;background:#fff!important;color:var(--vf-store-ink)!important}
.vf-btn,
.vf-payment-method,
.vf-fulfillment button{
  border-color:var(--vf-store-line)!important;
  background:#fff!important;
  color:var(--vf-store-ink)!important;
}
.vf-btn.vf-primary,
.vf-btn.primary,
.vf-primary{
  border-color:transparent!important;
  background:var(--vf-accent)!important;
  color:#fff!important;
  box-shadow:0 9px 19px color-mix(in srgb,var(--vf-accent) 24%,transparent)!important;
}
.vf-fulfillment button:hover,
.vf-payment-method:hover{border-color:var(--vf-accent)!important}
.vf-fulfillment button.active,
.vf-payment-method.active{
  border-color:var(--vf-accent)!important;
  background:color-mix(in srgb,var(--vf-accent) 7%,#fff)!important;
}
.vf-step-title>span{background:var(--vf-accent)!important}
.vf-checkout-heading,
.vf-checkout-card,
.vf-checkout-optional,
.vf-cash-change-card{
  border-color:var(--vf-store-line)!important;
  background:#fff!important;
}
.vf-checkout-heading{background:color-mix(in srgb,var(--vf-accent) 5%,#fff)!important}
.vf-checkout-heading h3,
.vf-step-title strong,
.vf-checkout-total strong{color:var(--vf-store-ink)!important}
.vf-checkout-kicker,
.vf-checkout-kicker i{color:color-mix(in srgb,var(--vf-accent) 82%,#1f2937)!important}
.vf-payment-method>i{background:color-mix(in srgb,var(--vf-accent) 10%,#fff)!important;color:var(--vf-accent)!important}
.vf-fulfillment button>i{background:color-mix(in srgb,var(--vf-accent) 10%,#fff)!important;color:var(--vf-accent)!important}

@media (max-width:980px){
  .vf-products-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .vf-hero{min-height:260px}
}
@media (max-width:720px){
  .vf-store-header{min-height:64px;padding:10px 16px}
  .vf-brand{font-size:15px}
  .vf-brand-avatar{width:38px;height:38px;border-radius:12px}
  .vf-hero,.vf-products-section,.vf-active-order,.vf-featured-section,.vf-public-notice{width:min(100% - 24px,1240px)}
  .vf-hero{min-height:0;margin-top:14px;padding:22px 18px;align-items:flex-start;gap:20px;flex-direction:column}
  .vf-hero-stat{min-width:0;max-width:none;width:100%;padding:14px}
  .vf-identity{gap:12px;margin-top:15px;align-items:flex-start}
  .vf-hero-logo{width:60px;height:60px;border-radius:17px}
  .vf-identity h1{font-size:32px}
  .vf-identity p{font-size:13px}
  .vf-featured-section{padding:16px}
  .vf-products-section{padding-top:25px}
  .vf-category-pills{top:64px;margin:15px 0 21px;padding:8px;border-radius:15px}
  .vf-category-pills button{min-height:39px;padding:0 13px;font-size:12px}
  .vf-products-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .vf-product{border-radius:16px}
  .vf-product-image{height:148px}
  .vf-product-image img{padding:9px}
  .vf-product-body{min-height:154px;padding:12px}
  .vf-product h3{font-size:14px}
  .vf-product p{font-size:11px}
  .vf-product-footer strong{font-size:16px}
  .vf-add{min-width:38px;height:38px;padding:0 10px}
  .vf-add-label{display:none}
}
@media (max-width:390px){
  .vf-header-actions{gap:5px}
  .vf-icon-button{width:38px;min-height:38px}
  .vf-cart-button{min-height:38px;padding:0 9px}
  .vf-products-grid{grid-template-columns:1fr 1fr;gap:9px}
  .vf-product-image{height:126px}
  .vf-product-body{padding:10px}
}

@media (prefers-reduced-motion:reduce){
  .vf-icon-button,.vf-cart-button,.vf-product,.vf-add{transition:none!important}
}