/* ===========================================================
   ml-home.css — Novo visual da tela inicial (estilo loja oficial)
   Carregado APENAS na index.html. Não afeta páginas de produto.
   =========================================================== */

:root {
  --store-banner-start: #25bfc8;
  --store-banner-main: #25f4ee;
  --store-banner-light: #8dfaf6;
}

/* Fundo neutro atrás do cartão da loja */
body.ml-home #root,
body.ml-home .container {
  background: #f2f2f2 !important;
}

/* Evita qualquer lampejo do layout antigo enquanto a home é montada. */
body.ml-home:not(.ml-ready) .page-content {
  visibility: hidden;
}

/* ---------- 1. CABEÇALHO CIANO COM LOGOS TIKTOK ---------- */
body.ml-home .header {
  background: linear-gradient(155deg, var(--store-banner-start) 0%, var(--store-banner-main) 52%, var(--store-banner-light) 100%) !important;
  border-bottom: none !important;
  padding: 10px 14px !important;
  overflow: hidden !important;
}

/* Padrão de logos do TikTok em diagonal atrás de tudo.
   A logo é branca sobre preto; o blend "screen" remove o preto. */
body.ml-home .header::before {
  content: "";
  position: absolute;
  inset: -140px;
  background: url("/loja/images/imported/tiktok-logo.png") repeat;
  background-size: 72px 72px;
  transform: rotate(-28deg);
  mix-blend-mode: screen;
  opacity: .22;
  pointer-events: none;
}

body.ml-home .header > * {
  position: relative;
  z-index: 1;
}

body.ml-home .header .header-back-btn,
body.ml-home .header .header-icon-btn,
body.ml-home .header .header-more-btn,
body.ml-home .header .header-search-icon-btn {
  color: #fff !important;
}

body.ml-home .header svg {
  stroke: #fff;
  color: #fff;
}

body.ml-home .header .header-more-btn svg {
  fill: #fff;
}

body.ml-home .header .header-share-btn img {
  filter: brightness(0) invert(1);
}

/* Campo de busca some; fica só a lupa (igual à referência) */
body.ml-home .header-search-wrapper {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

body.ml-home .header-search-wrapper .header-search {
  display: none;
}

body.ml-home .header-search-wrapper.ml-search-open .header-search {
  display: block;
  background: rgba(255, 255, 255, .18);
  color: #fff;
  border-radius: 999px;
  padding-left: 36px;
}

body.ml-home .header-search-wrapper.ml-search-open .header-search::placeholder {
  color: rgba(255, 255, 255, .8);
}

body.ml-home .header-search-icon-btn {
  position: static;
  transform: none;
}

/* ---------- 2. FAIXA "OFICIAL" ---------- */
.ml-official-bar {
  position: relative;
  z-index: 2;
  background: #21100c;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 36px;
  margin: 0 8px;
  padding: 7px 14px;
  border-radius: 12px 12px 0 0;
  font-size: 11.5px;
}

.ml-official-bar .ml-official-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
}

.ml-official-bar .ml-official-right {
  color: #f4cf91;
}

/* Logo do TikTok na faixa "Oficial" (no lugar do texto) */
.ml-official-bar .ml-official-logo {
  height: 16px;
  width: auto;
  display: block;
  /* a imagem é branca sobre preto; o blend remove o fundo preto */
  mix-blend-mode: screen;
}

/* Selo TikTok colado no nome da loja, com borda (igual ao exemplo) */
.ml-tt-badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 3px 8px;
  background: #000;
  border: 1px solid #f0b429;
  border-radius: 6px;
  flex-shrink: 0;
  margin-left: 2px;
}

.ml-tt-badge img {
  height: 12px;
  width: auto;
  display: block;
}

/* ---------- 3. CARTÃO BRANCO DA LOJA ---------- */
body.ml-home .ml-store-card {
  background: #fff;
  border-radius: 0 0 14px 14px;
  margin: 0 8px 8px;
  padding: 4px 0 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
  overflow: hidden;
}

/* fundo ciano só atrás do cartão, com logos do TikTok em diagonal */
body.ml-home .ml-store-bg {
  position: relative;
  background: linear-gradient(180deg, var(--store-banner-main) 0%, var(--store-banner-light) 62%, #f2f2f2 62%);
  padding-top: 0;
  overflow: hidden;
}

body.ml-home .ml-store-bg::before {
  content: "";
  position: absolute;
  top: -140px;
  left: -140px;
  right: -140px;
  height: 60%;
  background: url("/loja/images/imported/tiktok-logo.png") repeat;
  background-size: 84px 84px;
  transform: rotate(-28deg);
  mix-blend-mode: screen;
  opacity: .25;
  pointer-events: none;
}

body.ml-home .ml-store-bg > * {
  position: relative;
  z-index: 1;
}

body.ml-home .store-section {
  margin-top: 0 !important;
  border-bottom: none !important;
  padding: 12px 14px 4px !important;
}

body.ml-home .store-logo {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  overflow: hidden;
  background: transparent;
  flex-shrink: 0;
}

body.ml-home .store-logo img {
  object-fit: cover !important;
  border-radius: 0 !important;
  transform: scale(2.36);
}

body.ml-home .store-buttons {
  gap: 6px;
}

body.ml-home .store-follow-btn,
body.ml-home .store-message-btn {
  border-radius: 999px !important;
  padding: 6px 22px !important;
  font-size: 12.5px !important;
}

body.ml-home .coupons-container {
  padding: 8px 14px 4px !important;
  gap: 8px;
}

/* Cupons lado a lado ocupando a linha toda, sem estourar a tela */
body.ml-home .coupon-card {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  gap: 6px;
  padding: 10px !important;
  border-radius: 16px !important;
  overflow: hidden;
}

body.ml-home .coupon-text {
  min-width: 0;
  flex: 1 1 auto;
}

body.ml-home .coupon-title {
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.ml-home .coupon-subtitle {
  font-size: 10.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.ml-home .coupon-btn {
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 10.5px;
  flex-shrink: 0;
  margin-left: auto;
}

/* ---------- 4. ABAS + FILTROS ---------- */
body.ml-home .nav-tabs {
  position: static !important;
  background: #fff !important;
  border-radius: 14px 14px 0 0;
  margin: 0 8px;
  justify-content: space-around;
  gap: 0;
}

body.ml-home .nav-tabs:before {
  display: none;
}

body.ml-home .nav-tab {
  font-size: 13.5px;
}

.ml-filter-bar {
  background: #fff;
  margin: 0 8px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-top: 1px solid #f0f0f0;
  overflow-x: auto;
  scrollbar-width: none;
}

.ml-filter-bar::-webkit-scrollbar {
  display: none;
}

.ml-filter {
  background: none;
  border: none;
  padding: 0;
  font-size: 12.5px;
  color: #8d8d8d;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}

.ml-filter.active {
  color: #111;
  font-weight: 700;
}

.ml-filter-bar .ml-view-toggle {
  margin-left: auto;
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  display: flex;
}

/* ---------- 5. LISTA DE PRODUTOS ---------- */
body.ml-home #principais-produtos-section,
body.ml-home #produtos-recomendados-section>h2 {
  display: none !important;
}

body.ml-home #produtos-recomendados-section {
  padding: 0 !important;
  background: transparent !important;
}

body.ml-home #recommended-grid {
  display: block !important;
  background: #fff;
  margin: 0 8px 12px;
  border-radius: 0 0 14px 14px;
  overflow: hidden;
}

/* Cada produto vira uma linha */
body.ml-home #recommended-grid .product-card-rec {
  display: flex !important;
  gap: 10px;
  padding: 12px 14px;
  border: none !important;
  border-bottom: 1px solid #f1f1f1 !important;
  border-radius: 0 !important;
  background: #fff !important;
}

body.ml-home #recommended-grid .product-card-rec:last-child {
  border-bottom: none !important;
}


body.ml-home .ml-row-img {
  width: 86px;
  height: 86px;
  flex-shrink: 0;
  border-radius: 10px;
  object-fit: cover;
  background: #f7f7f7;
}

body.ml-home .ml-row-info {
  flex: 1;
  min-width: 0;
}

body.ml-home .ml-tags {
  display: flex;
  gap: 4px;
  align-items: center;
  margin-bottom: 3px;
  flex-wrap: wrap;
}

body.ml-home .ml-tag-oficial {
  background: #f39c12;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 3px;
}

body.ml-home .ml-tag-top {
  background: #e74c3c;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 3px;
}

body.ml-home .ml-row-title {
  font-size: 12px;
  line-height: 1.3;
  color: #2b3f8f;
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 0 4px;
}

body.ml-home .ml-row-badges {
  display: flex;
  gap: 5px;
  margin-bottom: 3px;
  flex-wrap: wrap;
}

body.ml-home .ml-badge-off {
  background: #ffe3ea;
  color: #ff2b56;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
}

body.ml-home .ml-badge-frete {
  background: #e1fff1;
  color: #00a650;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 4px;
}

body.ml-home .ml-row-stars {
  font-size: 10.5px;
  color: #888;
  margin-bottom: 3px;
}

body.ml-home .ml-row-stars i {
  color: #ffb800;
  font-style: normal;
}

body.ml-home .ml-row-price {
  color: #ff2b56;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.1;
}

body.ml-home .ml-row-price small {
  font-size: 12px;
  font-weight: 800;
}

body.ml-home .ml-row-old {
  display: block;
  font-size: 11px;
  color: #b0b0b0;
  text-decoration: line-through;
  margin-top: 1px;
}

body.ml-home .ml-row-actions {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  align-self: flex-end;
}

body.ml-home .ml-btn-cart {
  background: #ffe3ea;
  color: #ff2b56;
  border: none;
  border-radius: 8px;
  width: 34px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}

body.ml-home .ml-btn-buy {
  background: #ff2b56;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0 14px;
  height: 30px;
  font-size: 12.5px;
  font-weight: 700;
}

/* ---------- Ajustes de especificidade (sobrepõem o CSS antigo) ---------- */
body.ml-home #recommended-grid .product-card-rec img.ml-row-img {
  width: 86px !important;
  height: 86px !important;
  aspect-ratio: auto !important;
  border-radius: 10px !important;
  object-fit: cover !important;
  flex: 0 0 86px !important;
}


body.ml-home #recommended-grid .product-card-rec .ml-row-info {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

body.ml-home #recommended-grid .product-card-rec .ml-row-title {
  height: auto !important;
  font-size: 12px !important;
  color: #2b3f8f !important;
}

body.ml-home .header-search-wrapper .header-search {
  display: none !important;
}

body.ml-home .header-search-wrapper.ml-search-open .header-search {
  display: block !important;
}

body.ml-home .ml-store-bg {
  padding-top: 0;
}

/* Botões originais (carrinho + comprar) reaproveitados na linha */
body.ml-home #recommended-grid .product-card-rec .action-y2k-container {
  display: flex !important;
  gap: 6px !important;
  align-items: center !important;
}

body.ml-home #recommended-grid .product-card-rec .cart-y2k-btn {
  background: #ffe3ea !important;
  color: #ff2b56 !important;
  border: none !important;
  border-radius: 8px !important;
  width: 34px !important;
  height: 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

body.ml-home #recommended-grid .product-card-rec .cart-y2k-btn svg {
  width: 16px !important;
  height: 16px !important;
  stroke: #ff2b56 !important;
}

body.ml-home #recommended-grid .product-card-rec .buy-y2k-btn {
  background: #ff2b56 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 0 14px !important;
  height: 30px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

/* Cabeçalho: nada de caixa branca de busca */
body.ml-home .header-search-wrapper:not(.ml-search-open) {
  background: transparent !important;
}

body.ml-home .header .header-share-btn img {
  display: none !important;
}