/* === MOBILE FIX VYRON FIT v205 === */
/* Aplica overrides em todas as páginas pra mobile-first perfeito */

/* iOS Safari fix - inputs */
input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="password"], input[type="search"], textarea, select {
  font-size: 16px !important; /* evita zoom no iOS */
}

@media (max-width: 768px) {
  /* === GLOBAL === */
  body {
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  /* Container reset */
  .container, .acc-wrap, .plp, .cart-wrap, .co-wrap {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* === HEADER MOBILE === */
  .topbar {
    font-size: 11px !important;
    padding: 6px 12px !important;
  }
  .topbar-left { display: none !important; }
  .topbar-right { gap: 10px !important; }
  .topbar-right a { font-size: 10px !important; }

  .lhead-main {
    padding: 10px 12px !important;
    gap: 8px !important;
    flex-wrap: wrap;
  }
  .lhead-brand { gap: 6px !important; }
  .lhead-brand svg { width: 28px !important; height: 28px !important; }
  .lhead-brand .vname { font-size: 14px !important; letter-spacing: 2px !important; }
  .lhead-brand .vfit { font-size: 11px !important; }

  /* Busca: ocupa linha inteira no mobile */
  .lhead-search {
    order: 3;
    width: 100% !important;
    max-width: none !important;
    margin-top: 6px;
  }
  .lhead-search input {
    padding: 10px 44px 10px 14px !important;
    font-size: 14px !important;
  }
  .lhead-search button { width: 32px !important; height: 32px !important; font-size: 14px !important; }

  .lhead-icons { gap: 6px !important; flex: 1; justify-content: flex-end; }
  .lhead-ico { padding: 4px 6px !important; }
  .lhead-ico svg { width: 22px !important; height: 22px !important; }
  .lhead-ico span { display: none !important; }
  .lhead-ico .cb { width: 16px !important; height: 16px !important; font-size: 9px !important; top: -2px !important; right: -2px !important; }

  /* Mega menu hide on mobile, show horizontal scroll */
  .lmenu-row {
    padding: 0 12px !important;
    gap: 0 !important;
  }
  .lmenu-row > a, .lmenu-row > div {
    padding: 10px 12px !important;
    font-size: 11px !important;
    letter-spacing: 1px !important;
  }
  .lmenu-drop { display: none !important; }

  /* === HERO === */
  .hero-c { height: 320px !important; }
  .hero-slide h2 { font-size: 24px !important; line-height: 1.1 !important; }
  .hero-slide p { font-size: 13px !important; margin-bottom: 16px !important; }
  .hero-slide .tag { font-size: 9px !important; padding: 4px 10px !important; margin-bottom: 10px !important; }
  .hero-slide .content { padding: 0 20px !important; }
  .hero-c-arrow { width: 36px !important; height: 36px !important; font-size: 18px !important; }
  .hero-c-arrow.l { left: 8px !important; }
  .hero-c-arrow.r { right: 8px !important; }
  .btn-big { padding: 12px 22px !important; font-size: 12px !important; }

  /* HERO home full */
  .hero:has(.hero-content), .hero:has(.hero-mockup-img) { min-height: 80vh !important; }
  .hero-content { padding: 100px 20px 40px !important; grid-template-columns: 1fr !important; gap: 20px !important; text-align: center !important; }
  .hero-logo { justify-content: center !important; gap: 10px !important; margin-bottom: 16px !important; }
  .hero-logo .v-svg { width: 56px !important; height: 56px !important; }
  .hero-logo .v-text { font-size: 36px !important; letter-spacing: 4px !important; }
  .hero-logo .v-fit { font-size: 18px !important; letter-spacing: 3px !important; }
  .hero h1 { font-size: 32px !important; }
  .hero p { font-size: 14px !important; }
  .hero-cta { justify-content: center !important; flex-direction: column; }
  .hero-cta a { width: 100% !important; }
  .hero-mockup-img { max-width: 90% !important; }

  /* STATS */
  .stats { padding: 24px 14px !important; }
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }
  .stat-item .v { font-size: 28px !important; }
  .stat-item .l { font-size: 9px !important; }

  /* === SECTIONS === */
  section { padding: 50px 14px !important; }
  .section-head { margin-bottom: 28px !important; }
  .section-head h2 { font-size: 26px !important; }
  .section-head p { font-size: 13px !important; }
  .section-head .eyebrow { font-size: 10px !important; letter-spacing: 3px !important; }

  .sec-title h2 { font-size: 16px !important; }
  .sec-title .more { font-size: 10px !important; }

  /* === SHOP CARDS === */
  .pgrid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .pcard-body { padding: 10px !important; gap: 4px !important; }
  .pcard-name { font-size: 12px !important; min-height: 30px !important; }
  .pcard-prc .now { font-size: 16px !important; }
  .pcard-prc .was { font-size: 10px !important; }
  .pcard-pix { font-size: 9px !important; }
  .pcard-inst { font-size: 9px !important; }
  .pcard-cat { font-size: 8px !important; }
  .pcard-rating { font-size: 9px !important; }
  .pcard-fav { width: 28px !important; height: 28px !important; top: 6px !important; right: 6px !important; font-size: 12px !important; }
  .pcard-badge { top: 6px !important; left: 6px !important; }
  .pcard-badge span { font-size: 8px !important; padding: 2px 6px !important; }
  .pcard-vlogo { padding: 2px 6px !important; bottom: 6px !important; right: 6px !important; }
  .pcard-vlogo .vn { font-size: 8px !important; letter-spacing: 1px !important; }
  .pcard-vlogo .vf { font-size: 7px !important; }

  /* === SHOWCASE BANNER === */
  .shop-featured-banner { padding: 20px !important; gap: 20px !important; }
  .shop-banner-content h3 { font-size: 28px !important; }
  .shop-banner-features { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .shop-banner-features .feat { font-size: 11px !important; }
  .shop-banner-tag { font-size: 10px !important; padding: 8px 14px !important; }
  .shop-banner-img { aspect-ratio: 4/5 !important; }

  /* === PLP FILTERS === */
  .plp { grid-template-columns: 1fr !important; gap: 12px !important; }
  .fside { display: none; position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; z-index: 200 !important; max-height: 100vh !important; overflow-y: auto !important; padding: 60px 18px 20px !important; }
  .fside.show { display: block !important; }
  .fside::before { content: "× FECHAR"; position: fixed; top: 12px; right: 12px; background: #16a34a; color: #000; padding: 8px 14px; border-radius: 8px; font-size: 12px; font-weight: 800; cursor: pointer; z-index: 201; }
  .fhead .filter-toggle { display: inline-flex !important; }

  .fhead h1 { font-size: 18px !important; }
  .fhead .res { font-size: 12px !important; }
  .pagination button, .pagination span { padding: 6px 10px !important; font-size: 11px !important; min-width: 30px !important; }

  /* === PDP === */
  .pdp { gap: 20px !important; }
  .gal-thumbs { flex-direction: row !important; width: auto !important; overflow-x: auto; gap: 6px !important; padding-bottom: 4px; }
  .gal-thumb { width: 60px !important; flex-shrink: 0; }
  .info h1 { font-size: 20px !important; }
  .info .meta { font-size: 10px !important; gap: 8px !important; flex-wrap: wrap; }
  .info .rating { font-size: 12px !important; }
  .price-box { padding: 14px !important; }
  .price-box .now { font-size: 28px !important; }
  .price-box .pix { padding: 8px 12px !important; }
  .price-box .pix .nm { font-size: 11px !important; }
  .price-box .pix .v { font-size: 14px !important; }
  .price-box .inst { font-size: 11px !important; }
  .opt-row .o { padding: 7px 12px !important; font-size: 12px !important; min-width: 42px !important; }
  .opt-row .swatch { width: 36px !important; height: 36px !important; }
  .qty-actions { flex-wrap: wrap; }
  .qty button { padding: 0 12px !important; height: 44px !important; }
  .btn-buy { font-size: 12px !important; height: 44px !important; }
  .btn-wish { width: 44px !important; height: 44px !important; }
  .trust-pills { grid-template-columns: 1fr !important; }
  .tabs-head .t { padding: 12px 14px !important; font-size: 11px !important; }
  .tabs-pane { font-size: 13px !important; }

  /* === CART === */
  .cart-list h2 { font-size: 14px !important; }
  .citem { grid-template-columns: 60px 1fr !important; gap: 8px !important; padding: 10px 0 !important; }
  .citem-img { width: 60px !important; }
  .citem-info .nm { font-size: 12px !important; }
  .citem-info .opts { font-size: 10px !important; }
  .citem .ctrls, .citem .price-c { grid-column: 1 / -1; justify-self: stretch !important; display: flex; align-items: center; justify-content: space-between; margin-top: 4px !important; }
  .ctrls { width: auto; }
  .ctrls button { padding: 0 10px !important; height: 32px !important; font-size: 14px !important; }
  .ctrls input { width: 32px !important; font-size: 12px !important; }
  .price-c .now { font-size: 14px !important; text-align: right; }

  .summary { position: relative !important; top: 0 !important; padding: 16px !important; }
  .summary h3 { font-size: 12px !important; }
  .sum-row { font-size: 12px !important; padding: 6px 0 !important; }
  .sum-row.total { font-size: 14px !important; }
  .sum-row.total b { font-size: 20px !important; }
  .go-checkout { padding: 12px !important; font-size: 12px !important; }

  /* === CHECKOUT === */
  .steps { margin: 14px auto 20px !important; }
  .step .n { width: 30px !important; height: 30px !important; font-size: 12px !important; }
  .step .l { font-size: 9px !important; letter-spacing: 0 !important; }
  .co-main { padding: 16px !important; }
  .co-main h2 { font-size: 15px !important; }
  .co-main .sub { font-size: 12px !important; }
  .row2, .row3 { grid-template-columns: 1fr !important; gap: 8px !important; }
  .addr-card, .frete-card { padding: 12px !important; }
  .pay-tabs .t { padding: 12px 14px !important; font-size: 11px !important; }
  .pix-info .v { font-size: 26px !important; }
  .pix-info .qr { width: 130px !important; height: 130px !important; font-size: 60px !important; }
  .btn-row { flex-direction: column; }
  .btn-row .btn-back, .btn-row .btn-next { width: 100%; text-align: center; }

  /* === FAQ / ACCOUNT === */
  .acc-side { position: relative !important; top: 0 !important; padding: 14px !important; }
  .acc-side a { padding: 9px 10px !important; font-size: 12px !important; }
  .acc-main { padding: 16px !important; }
  .acc-main h1 { font-size: 18px !important; }
  .acc-main .sub { font-size: 12px !important; }
  .acc-item .acc-q { padding: 12px 14px !important; font-size: 12px !important; }
  .acc-item .acc-a { font-size: 12px !important; }

  /* Orders */
  .order-card { grid-template-columns: 1fr !important; padding: 12px !important; }
  .order-card .code { font-size: 12px !important; }
  .order-card .dt { font-size: 10px !important; }
  .order-card .total { font-size: 16px !important; }
  .order-card .badge { font-size: 9px !important; padding: 2px 8px !important; }
  .order-card .btn { padding: 6px 10px !important; font-size: 9px !important; }
  .order-card .items-thumbs img { width: 38px !important; height: 38px !important; }
  .order-card .items-thumbs .more { width: 38px !important; height: 38px !important; }
  .track-step .n { width: 22px !important; height: 22px !important; font-size: 9px !important; }
  .track-step .l { font-size: 7px !important; }

  /* === PRECOS === */
  .hero-precos { padding: 36px 14px 24px !important; }
  .hero-precos h1 { font-size: 26px !important; }
  .hero-precos .eb { font-size: 10px !important; letter-spacing: 3px !important; }
  .hero-precos p { font-size: 13px !important; }
  .bil-toggle { margin: 18px 0 22px !important; }
  .bil-toggle .opt { padding: 8px 14px !important; font-size: 11px !important; }
  .aud-tabs { gap: 4px !important; }
  .aud-tabs .t { padding: 8px 12px !important; font-size: 10px !important; letter-spacing: 0 !important; }
  .plans { grid-template-columns: 1fr !important; gap: 14px !important; padding: 0 14px 40px !important; }
  .plan { padding: 22px 18px !important; }
  .plan h3 { font-size: 18px !important; letter-spacing: 1px !important; }
  .plan .price { font-size: 32px !important; }
  .plan li { font-size: 12px !important; padding: 5px 0 !important; }
  .compare-sec table { font-size: 11px !important; }
  .compare-sec th, .compare-sec td { padding: 8px 6px !important; font-size: 10px !important; }
  .compare-sec h2 { font-size: 18px !important; }
  .faq-sec h2 { font-size: 22px !important; }
  .faq-h { padding: 14px 16px !important; font-size: 13px !important; }
  .faq-a { font-size: 12px !important; }

  /* === FOOTER === */
  .lfoot { padding: 32px 16px 18px !important; margin-top: 32px !important; }
  .lfoot-grid { grid-template-columns: 1fr 1fr !important; gap: 24px !important; }
  .lfoot-brand { grid-column: 1 / -1; }
  .lfoot h6 { font-size: 10px !important; letter-spacing: 1.5px !important; }
  .lfoot a { font-size: 11px !important; padding: 4px 0 !important; }
  .lfoot-bottom { font-size: 10px !important; gap: 8px !important; flex-direction: column; text-align: center; }

  /* MOBILE BNAV ativo - já tem display:flex em <=768px */
  body { padding-bottom: 70px; } /* espaço pra bnav */
  .lmnav a { font-size: 8px !important; padding: 4px 6px !important; }
  .lmnav a svg { width: 18px !important; height: 18px !important; }

  /* === DASHBOARDS USER/PRO === */
  .brand-vyron-big { margin: 10px auto 16px !important; }
  .brand-vyron-big svg { width: 50px !important; height: 50px !important; }
  .brand-vyron-big .name { font-size: 24px !important; letter-spacing: 4px !important; }
  .brand-vyron-big .tag { font-size: 12px !important; letter-spacing: 3px !important; }

  .card { padding: 14px !important; }
  .kpi-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .kpi { padding: 10px !important; }
  .kpi .v { font-size: 20px !important; }
  .kpi .l { font-size: 9px !important; }

  /* Tabs gerais */
  .tabs { gap: 4px !important; padding: 4px 0 !important; }
  .tabs .t { padding: 8px 12px !important; font-size: 10px !important; letter-spacing: 0.5px !important; }

  /* Form groups touch friendly */
  .form-group input, .form-group select, .form-group textarea, .fg input, .fg select, .fg textarea {
    padding: 12px 14px !important;
    font-size: 16px !important; /* evita zoom no iOS */
    min-height: 44px;
  }

  /* Buttons touch friendly */
  .btn, button {
    min-height: 40px;
  }

  /* App showcase phones */
  .app-grid { grid-template-columns: 1fr !important; gap: 30px !important; }
  .app-left h2 { font-size: 32px !important; letter-spacing: -1px !important; }
  .app-left .lead { font-size: 13px !important; }
  .app-features-grid { grid-template-columns: 1fr 1fr !important; gap: 14px !important; }
  .app-feat h4 { font-size: 11px !important; }
  .app-feat p { font-size: 11px !important; }
  .app-domain-bar { padding: 10px 14px !important; }
  .app-domain-bar .domain { font-size: 12px !important; }
  .app-domain-bar .tag { font-size: 10px !important; }
  .phone-mockup { width: 220px !important; }
  .phone-mockup.behind { display: none !important; }
  .app-right { min-height: 480px !important; }

  /* Features strip */
  .features-strip-grid { grid-template-columns: 1fr 1fr !important; gap: 14px !important; }
  .fstr-ico { width: 36px !important; height: 36px !important; }
  .fstr-ico svg { width: 16px !important; height: 16px !important; }
  .fstr-item h5 { font-size: 10px !important; }
  .fstr-item span { font-size: 9px !important; }

  /* Phrase strip */
  .phrase-strip { padding: 32px 14px !important; }
  .phrase { font-size: 13px !important; letter-spacing: 3px !important; }

  /* Trust */
  .trust-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .trust-item h5 { font-size: 11px !important; }
  .trust-item p { font-size: 10px !important; }
  .trust-ico { width: 38px !important; height: 38px !important; font-size: 16px !important; }

  /* Brand mini fixed */
  div[style*="position:fixed"][style*="top:8px"] {
    font-size: 11px !important;
    padding: 3px 10px !important;
    letter-spacing: 2px !important;
  }
}

/* === MUITO PEQUENO (<= 400px) === */
@media (max-width: 400px) {
  .pgrid { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }
  .hero-c { height: 280px !important; }
  .hero-slide h2 { font-size: 20px !important; }
  .shop-banner-features { grid-template-columns: 1fr !important; }
  .stats-grid { grid-template-columns: 1fr 1fr !important; }
  .stat-item .v { font-size: 22px !important; }
  .features-strip-grid, .trust-grid { grid-template-columns: 1fr !important; }
  .lfoot-grid { grid-template-columns: 1fr !important; }
  .acc-side a { font-size: 11px !important; padding: 8px 8px !important; }
}

/* === LANDSCAPE TELEFONE === */
@media (max-height: 500px) and (orientation: landscape) {
  .hero, .hero-c { min-height: auto !important; }
  .hero-content { padding: 80px 20px 20px !important; }
}

/* iOS safe areas (notch) */
@supports (padding: max(0px)) {
  body {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }
  .lmnav {
    padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
  }
}


/* === L206 BNAV CENTRADA — força centralização perfeita === */
.bnav, nav.bnav, .bottom-nav, .lmnav {
  display: flex !important;
  justify-content: space-around !important;
  align-items: center !important;
  padding: 8px 4px !important;
  gap: 0 !important;
}
.bnav a, nav.bnav a, .bottom-nav a, .lmnav a {
  flex: 1 1 0% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 6px 2px !important;
  gap: 3px !important;
  min-width: 0 !important;
}
.bnav .ic, nav.bnav .ic {
  display: block !important;
  text-align: center !important;
  width: 100% !important;
}
/* botão central elevado mantém destaque mas vai pro mesmo eixo */
.bnav a.center, nav.bnav a.center {
  align-items: center !important;
  justify-content: center !important;
}
.bnav a.center .ic {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.bnav .lbl {
  display: block !important;
  text-align: center !important;
}


/* === L214 BNAV — Mapa center destaca só quando ativo === */
.bnav a.center:not(.active), nav.bnav a.center:not(.active) {
  background: rgba(255,255,255,.04) !important;
  margin: 0 4px !important;
  padding: 8px 2px !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  color: #94a3b8 !important;
  font-weight: 600 !important;
  transform: none !important;
  border: 1px solid transparent !important;
}
.bnav a.center:not(.active) .ic, nav.bnav a.center:not(.active) .ic {
  color: #94a3b8 !important;
  font-size: 18px !important;
  filter: none !important;
}
.bnav a.center:not(.active):hover {
  background: rgba(34,197,94,.06) !important;
  color: #16a34a !important;
  border-color: rgba(34,197,94,.2) !important;
}
.bnav a.center:not(.active):hover .ic { color: #16a34a !important; }
/* Quando ativo: mantém o destaque lime original */
.bnav a.center.active, nav.bnav a.center.active {
  /* destaque suave dark - sem verde - request user */
  background: rgba(34,197,94,.08) !important;
  border-radius: 12px !important;
  padding: 8px 4px !important;
  margin: 0 4px !important;
  color: #16a34a !important;
  font-weight: 800 !important;
  box-shadow: none !important;
  border: 1px solid rgba(34,197,94,.18) !important;
}
.bnav a.center.active .ic { color: #16a34a !important; font-size: 20px !important; filter: none !important; }