/* =========================================================================
   Maria Flor — camada de modernização visual
   =========================================================================
   Carregada DEPOIS do <style> inline do index.php, por isso vence os empates
   de especificidade sem precisar de !important na maior parte dos casos.

   Regra de ouro para manter o site funcionando:
   só mexemos em APARÊNCIA (cor, borda, sombra, tipografia, espaçamento).
   Nunca em display / position / z-index de elementos que o JS liga e desliga,
   porque o JS grava style.display inline e sempre venceria, criando bugs
   intermitentes difíceis de rastrear.

   Para reverter tudo: comente o <link> deste arquivo no index.php.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Tokens que o projeto não tinha (raio, sombra, espaço, transição)
   ------------------------------------------------------------------------- */
html.maria-flor {
  --mf-r-sm: 10px;
  --mf-r-md: 14px;
  --mf-r-lg: 20px;
  --mf-r-xl: 28px;
  --mf-r-pill: 999px;

  --mf-sp-1: 6px;
  --mf-sp-2: 10px;
  --mf-sp-3: 16px;
  --mf-sp-4: 24px;
  --mf-sp-5: 36px;

  /* Sombras em duas camadas: contorno curto + difusão longa. */
  --mf-sh-1: 0 1px 2px rgba(63, 16, 32, .05), 0 2px 8px rgba(63, 16, 32, .05);
  --mf-sh-2: 0 2px 4px rgba(63, 16, 32, .05), 0 8px 20px rgba(63, 16, 32, .08);
  --mf-sh-3: 0 4px 8px rgba(63, 16, 32, .06), 0 16px 36px rgba(63, 16, 32, .12);
  --mf-sh-rose: 0 6px 18px rgba(219, 39, 119, .28);

  --mf-line: rgba(157, 23, 77, .10);
  --mf-line-soft: rgba(157, 23, 77, .06);
  --mf-surface: #ffffff;
  --mf-surface-2: #fffafc;

  --mf-ease: cubic-bezier(.4, 0, .2, 1);
  --mf-dur: .22s;
}

/* -------------------------------------------------------------------------
   2. Fundo: menos rosa saturado, mais respiro
   O fundo antigo empilhava 4 gradientes fortes e deixava tudo rosa-sobre-rosa,
   o que achatava o contraste dos produtos. Aqui o rosa vira atmosfera.
   ------------------------------------------------------------------------- */
html.maria-flor body {
  background:
    radial-gradient(1200px 620px at 50% -12%, rgba(252, 231, 243, .95), transparent 62%),
    radial-gradient(900px 500px at 8% 12%, rgba(253, 242, 248, .8), transparent 55%),
    linear-gradient(180deg, #fffdfe 0%, #fef7fa 45%, #fdf2f8 100%) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html.maria-flor ::selection {
  background: rgba(219, 39, 119, .18);
  color: var(--mf-wine, #9d174d);
}

/* Foco visível e elegante para navegação por teclado. */
html.maria-flor a:focus-visible,
html.maria-flor button:focus-visible,
html.maria-flor input:focus-visible,
html.maria-flor select:focus-visible,
html.maria-flor textarea:focus-visible,
html.maria-flor .product-card:focus-visible,
html.maria-flor .category:focus-visible {
  outline: 2px solid var(--mf-rose, #db2777);
  outline-offset: 3px;
  border-radius: var(--mf-r-sm);
}

/* -------------------------------------------------------------------------
   3. Vitrine — categorias em acordeão
   ------------------------------------------------------------------------- */
html.maria-flor .accordion-item {
  background: var(--mf-surface);
  border: 1px solid var(--mf-line-soft);
  border-radius: var(--mf-r-lg);
  box-shadow: var(--mf-sh-1);
  margin-bottom: var(--mf-sp-3);
  transition: box-shadow var(--mf-dur) var(--mf-ease);
}

html.maria-flor .accordion-item:hover {
  box-shadow: var(--mf-sh-2);
}

html.maria-flor .accordion-header {
  padding: 20px 22px;
  font-family: var(--mf-font-display, 'Playfair Display', serif);
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--mf-ink, #3f1020);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--mf-dur) var(--mf-ease),
              border-color var(--mf-dur) var(--mf-ease);
}

html.maria-flor .accordion-header:hover {
  background: linear-gradient(180deg, var(--mf-surface-2), transparent);
}

/* Só mostra a divisória quando a categoria está aberta. */
html.maria-flor .accordion-content.active {
  border-top-color: var(--mf-line-soft);
}

html.maria-flor .accordion-header i {
  color: var(--mf-rose, #db2777);
  font-size: .85rem;
  opacity: .75;
}

html.maria-flor .accordion-content {
  padding: var(--mf-sp-3) var(--mf-sp-3) var(--mf-sp-4);
}

/* -------------------------------------------------------------------------
   4. Cards de produto
   Duas colunas no desktop usando multi-coluna (column-count), e não grid:
   o JS abre o acordeão gravando style.display = "block" inline, então um
   display:grid aqui seria sobrescrito. column-count funciona sobre block.
   ------------------------------------------------------------------------- */
@media (min-width: 900px) {
  html.maria-flor .accordion-content {
    column-count: 2;
    column-gap: var(--mf-sp-3);
  }

  html.maria-flor .accordion-content > .product-card {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
  }

  html.maria-flor .accordion-content > .empty-category {
    column-span: all;
  }
}

@media (min-width: 1400px) {
  html.maria-flor .accordion-content {
    column-count: 3;
  }
}

html.maria-flor .product-card {
  padding: 14px;
  gap: 14px;
  margin-bottom: var(--mf-sp-3);
  border: 1px solid var(--mf-line-soft);
  border-radius: var(--mf-r-md);
  background: var(--mf-surface);
  box-shadow: var(--mf-sh-1);
  transition: transform var(--mf-dur) var(--mf-ease),
              box-shadow var(--mf-dur) var(--mf-ease),
              border-color var(--mf-dur) var(--mf-ease);
}

html.maria-flor .product-card:hover {
  transform: translateY(-3px);
  border-color: rgba(219, 39, 119, .22);
  box-shadow: var(--mf-sh-3);
}

html.maria-flor .product-card:active {
  transform: translateY(-1px);
}

/* Imagem maior: é o que vende. */
html.maria-flor .product-card img {
  width: 116px;
  height: 116px;
  margin-left: 0;
  border-radius: var(--mf-r-sm);
  box-shadow: none;
  background: var(--mf-surface-2);
  transition: transform var(--mf-dur) var(--mf-ease);
}

html.maria-flor .product-card:hover img {
  transform: scale(1.04);
}

html.maria-flor .product-info {
  padding-right: 0;
  min-width: 0;
}

/* Nome em duas linhas em vez de cortado no meio da palavra. */
html.maria-flor .product-info h4 {
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.32;
  letter-spacing: -.01em;
  color: var(--mf-ink, #3f1020);
  margin-bottom: 5px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

html.maria-flor .product-info p.description {
  font-size: .82rem;
  line-height: 1.5;
  color: var(--mf-ink-muted, #6b3a4a);
  opacity: .82;
  margin-bottom: 10px;
}

/* Preço com peso de verdade — antes competia com o nome. */
html.maria-flor .product-info .price,
html.maria-flor .product-info .price.promotional .new-price {
  font-size: 1.2rem;
  font-weight: 750;
  letter-spacing: -.02em;
  color: var(--mf-wine, #9d174d);
  font-variant-numeric: tabular-nums;
}

html.maria-flor .product-info .price.promotional {
  flex-direction: row;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

html.maria-flor .product-info .price.promotional .old-price {
  font-size: .82rem;
  opacity: .55;
  order: 2;
}

/* -------------------------------------------------------------------------
   5. Estado "esgotado" (novo controle de estoque)
   ------------------------------------------------------------------------- */
html.maria-flor .product-card.esgotado {
  opacity: .78;
  cursor: not-allowed;
  border-style: dashed;
  border-color: rgba(157, 23, 77, .22);
  box-shadow: none;
}

html.maria-flor .product-card.esgotado:hover {
  transform: none;
  box-shadow: none;
}

html.maria-flor .product-card.esgotado img {
  filter: grayscale(85%);
}

html.maria-flor .product-card.esgotado:hover img {
  transform: none;
}

html.maria-flor .mf-badge-esgotado {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  padding: 4px 11px;
  border-radius: var(--mf-r-pill);
  background: rgba(63, 16, 32, .88);
  color: #fff;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
}

/* -------------------------------------------------------------------------
   6. Chips de categoria
   ------------------------------------------------------------------------- */
html.maria-flor .categories-wrapper {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

html.maria-flor .categories-wrapper::-webkit-scrollbar {
  height: 0;
}

html.maria-flor .category {
  border-radius: var(--mf-r-md);
  border: 1px solid var(--mf-line);
  background: rgba(255, 255, 255, .78);
  box-shadow: var(--mf-sh-1);
  backdrop-filter: blur(6px);
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--mf-ink, #3f1020);
  transition: transform var(--mf-dur) var(--mf-ease),
              box-shadow var(--mf-dur) var(--mf-ease),
              border-color var(--mf-dur) var(--mf-ease),
              background var(--mf-dur) var(--mf-ease);
}

html.maria-flor .category:hover {
  transform: translateY(-2px);
  border-color: rgba(219, 39, 119, .3);
  box-shadow: var(--mf-sh-2);
}

html.maria-flor .category.active {
  border-color: transparent;
  background: linear-gradient(135deg, var(--mf-rose, #db2777), var(--mf-wine, #9d174d));
  color: #fff;
  box-shadow: var(--mf-sh-rose);
}

html.maria-flor .category.active * {
  color: #fff;
}

/* -------------------------------------------------------------------------
   7. Hero e faixa de privacidade
   ------------------------------------------------------------------------- */
html.maria-flor .lab3d-logo-shell {
  border-radius: var(--mf-r-lg);
  box-shadow: var(--mf-sh-3);
}

html.maria-flor .mf-privacy-strip > * {
  border-radius: var(--mf-r-pill);
  border: 1px solid var(--mf-line);
  background: rgba(255, 255, 255, .82);
  box-shadow: var(--mf-sh-1);
  backdrop-filter: blur(8px);
  font-size: .8rem;
  font-weight: 550;
}

html.maria-flor .lab3d-pers-spotlight {
  border-radius: var(--mf-r-lg);
  border: 1px solid var(--mf-line);
  background: rgba(255, 255, 255, .9);
  box-shadow: var(--mf-sh-2);
  transition: transform var(--mf-dur) var(--mf-ease),
              box-shadow var(--mf-dur) var(--mf-ease);
}

html.maria-flor .lab3d-pers-spotlight:hover {
  transform: translateY(-2px);
  box-shadow: var(--mf-sh-3);
}

/* -------------------------------------------------------------------------
   8. Mais vendidos — redesign dos cards
   IMPORTANTE: `.mf-bestsellers-card-btn` é o CARD INTEIRO (botão que envolve
   imagem + texto + CTA), não só o botão "Ver produto". Pintar ele de rosa
   faz o texto escuro sumir — exatamente o bug que a cliente reportou.
   ------------------------------------------------------------------------- */
html.maria-flor .mf-bestsellers {
  border-radius: var(--mf-r-xl);
  border: 1px solid var(--mf-line-soft);
  background: rgba(255, 255, 255, .78);
  box-shadow: var(--mf-sh-2);
  backdrop-filter: blur(10px);
}

/* Wrapper do article — só estrutura, sem fundo próprio. */
html.maria-flor .mf-bestsellers-card {
  border: none;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

/* O card de verdade: fundo claro, texto escuro legível. */
html.maria-flor .mf-bestsellers-card-btn {
  border-radius: 18px !important;
  border: 1px solid var(--mf-line-soft) !important;
  background: #ffffff !important;
  box-shadow: var(--mf-sh-1) !important;
  color: var(--mf-ink, #3f1020) !important;
  font-weight: inherit;
  letter-spacing: normal;
  overflow: hidden;
  filter: none !important;
  transition: transform var(--mf-dur) var(--mf-ease),
              box-shadow var(--mf-dur) var(--mf-ease),
              border-color var(--mf-dur) var(--mf-ease);
}

html.maria-flor .mf-bestsellers-card-btn:hover {
  transform: translateY(-5px);
  border-color: rgba(219, 39, 119, .28) !important;
  box-shadow: var(--mf-sh-3) !important;
  filter: none !important;
}

html.maria-flor .mf-bestsellers-card--featured .mf-bestsellers-card-btn {
  border-color: rgba(219, 39, 119, .22) !important;
  box-shadow: 0 10px 28px rgba(219, 39, 119, .14) !important;
}

/* Área da foto: blush suave, produto em destaque. */
html.maria-flor .mf-bestsellers-media {
  background: linear-gradient(165deg, #fff8fb 0%, #fce7f3 100%);
  border-bottom: 1px solid var(--mf-line-soft);
}

html.maria-flor .mf-bestsellers-media img {
  border-radius: 0;
}

/* Ranking — pílula discreta no canto. */
html.maria-flor .mf-bestsellers-rank {
  min-width: 28px;
  padding: 4px 8px;
  border-radius: var(--mf-r-pill);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .04em;
  color: #fff;
  background: rgba(63, 16, 32, .88);
  box-shadow: 0 2px 8px rgba(63, 16, 32, .25);
  backdrop-filter: blur(4px);
}

html.maria-flor .mf-bestsellers-card--featured .mf-bestsellers-rank {
  background: linear-gradient(135deg, var(--mf-rose, #db2777), var(--mf-wine, #9d174d));
}

html.maria-flor .mf-bestsellers-hot {
  padding: 4px 9px;
  border-radius: var(--mf-r-pill);
  font-size: .62rem;
  color: #78350f;
  background: #fef3c7;
  box-shadow: 0 2px 8px rgba(251, 191, 36, .35);
}

/* Corpo: contraste alto, hierarquia clara. */
html.maria-flor .mf-bestsellers-body {
  gap: 5px;
  padding: 12px 12px 13px;
  background: #ffffff;
}

html.maria-flor .mf-bestsellers-name {
  color: var(--mf-ink, #3f1020) !important;
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.3;
}

html.maria-flor .mf-bestsellers-meta {
  color: var(--mf-ink-muted, #6b3a4a) !important;
  font-size: .68rem;
  font-weight: 550;
}

html.maria-flor .mf-bestsellers-meta i {
  color: var(--mf-rose, #db2777);
}

html.maria-flor .mf-bestsellers-meta--new {
  color: var(--mf-wine, #9d174d) !important;
}

html.maria-flor .mf-bestsellers-price {
  color: var(--mf-wine, #9d174d) !important;
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

html.maria-flor .mf-bestsellers-price-old {
  color: #9d6b7a !important;
  font-size: .72rem;
  opacity: .75;
}

/* CTA — único bloco rosa do card. */
html.maria-flor .mf-bestsellers-cta {
  margin-top: 8px;
  padding: 9px 12px;
  border-radius: var(--mf-r-pill);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: -.005em;
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--mf-rose, #db2777), var(--mf-wine, #9d174d));
  box-shadow: 0 4px 12px rgba(219, 39, 119, .28);
  transition: transform var(--mf-dur) var(--mf-ease),
              box-shadow var(--mf-dur) var(--mf-ease),
              gap var(--mf-dur) var(--mf-ease);
}

html.maria-flor .mf-bestsellers-card-btn:hover .mf-bestsellers-cta {
  gap: 10px;
  box-shadow: 0 6px 16px rgba(219, 39, 119, .36);
}

/* -------------------------------------------------------------------------
   9. Barra de status da loja
   ------------------------------------------------------------------------- */
html.maria-flor .mf-store-bar {
  border-radius: var(--mf-r-lg);
  border: 1px solid var(--mf-line-soft);
  background: rgba(255, 255, 255, .82);
  box-shadow: var(--mf-sh-1);
  backdrop-filter: blur(10px);
}

html.maria-flor .mf-status {
  border-radius: var(--mf-r-pill);
  font-weight: 650;
  letter-spacing: .02em;
}

html.maria-flor .mf-quick-icon--wa,
html.maria-flor .mf-quick-icon--cart {
  border-radius: var(--mf-r-pill);
  box-shadow: var(--mf-sh-1);
  transition: transform var(--mf-dur) var(--mf-ease),
              box-shadow var(--mf-dur) var(--mf-ease);
}

html.maria-flor .mf-quick-icon--wa:hover,
html.maria-flor .mf-quick-icon--cart:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: var(--mf-sh-2);
}

html.maria-flor .mf-location {
  border-radius: var(--mf-r-md);
  border: 1px solid var(--mf-line-soft);
  background: rgba(255, 255, 255, .74);
}

/* -------------------------------------------------------------------------
   10. Modal de produto
   O problema maior era a descrição ocupando a largura inteira da tela,
   criando linhas de leitura longas demais.
   ------------------------------------------------------------------------- */
html.maria-flor .produto-modal-content,
html.maria-flor #produto-modal .modal-content {
  border-radius: var(--mf-r-xl) var(--mf-r-xl) 0 0;
  box-shadow: 0 -8px 60px rgba(63, 16, 32, .28);
  border: none;
}

html.maria-flor #produto-detalhes {
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}

html.maria-flor #produto-detalhes p,
html.maria-flor #produto-detalhes .produto-descricao {
  font-size: .92rem;
  line-height: 1.65;
  color: var(--mf-ink-muted, #6b3a4a);
}

html.maria-flor .lab3d-prod-gallery-main {
  border-radius: var(--mf-r-lg);
  overflow: hidden;
  background: var(--mf-surface-2);
  box-shadow: var(--mf-sh-1);
}

html.maria-flor #lab3d-prod-gallery-thumbs img {
  border-radius: var(--mf-r-sm);
  border: 2px solid transparent;
  transition: border-color var(--mf-dur) var(--mf-ease),
              transform var(--mf-dur) var(--mf-ease);
}

html.maria-flor #lab3d-prod-gallery-thumbs img:hover {
  transform: translateY(-2px);
  border-color: var(--mf-rose, #db2777);
}

html.maria-flor .preco-box {
  border-radius: var(--mf-r-md);
  border: 1px solid var(--mf-line-soft);
  background: var(--mf-surface-2);
}

html.maria-flor .quantidade-controls button {
  border-radius: var(--mf-r-pill);
  border: 1px solid var(--mf-line);
  background: var(--mf-surface);
  box-shadow: var(--mf-sh-1);
  transition: transform var(--mf-dur) var(--mf-ease),
              border-color var(--mf-dur) var(--mf-ease);
}

html.maria-flor .quantidade-controls button:hover {
  transform: scale(1.08);
  border-color: var(--mf-rose, #db2777);
}

/* Chips de variação de cor. */
html.maria-flor .mf-cor-chip {
  border-radius: var(--mf-r-md);
  border: 1px solid var(--mf-line);
  background: var(--mf-surface);
  transition: transform var(--mf-dur) var(--mf-ease),
              border-color var(--mf-dur) var(--mf-ease),
              box-shadow var(--mf-dur) var(--mf-ease);
}

html.maria-flor .mf-cor-chip:hover {
  transform: translateY(-2px);
  box-shadow: var(--mf-sh-2);
}

html.maria-flor .mf-cor-chip.is-selected {
  border-color: var(--mf-rose, #db2777);
  box-shadow: 0 0 0 3px rgba(219, 39, 119, .16);
}

html.maria-flor .mf-cor-swatch {
  border-radius: var(--mf-r-pill);
  box-shadow: inset 0 0 0 1px rgba(63, 16, 32, .12);
}

/* -------------------------------------------------------------------------
   11. Botões de ação
   ------------------------------------------------------------------------- */
html.maria-flor .btn-finalizar-pedido,
html.maria-flor .lab3d-hero-buttons--solo a,
html.maria-flor .btn-adicionar-carrinho {
  border-radius: var(--mf-r-pill);
  font-weight: 650;
  letter-spacing: -.01em;
  box-shadow: var(--mf-sh-rose);
  transition: transform var(--mf-dur) var(--mf-ease),
              box-shadow var(--mf-dur) var(--mf-ease),
              filter var(--mf-dur) var(--mf-ease);
}

html.maria-flor .btn-finalizar-pedido:hover,
html.maria-flor .lab3d-hero-buttons--solo a:hover,
html.maria-flor .btn-adicionar-carrinho:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 12px 30px rgba(219, 39, 119, .34);
}

html.maria-flor .btn-finalizar-pedido:active,
html.maria-flor .btn-adicionar-carrinho:active {
  transform: translateY(0);
}

html.maria-flor .btn-limpar-carrinho {
  border-radius: var(--mf-r-pill);
  border: 1px solid var(--mf-line);
  background: transparent;
  color: var(--mf-ink-muted, #6b3a4a);
  transition: border-color var(--mf-dur) var(--mf-ease),
              color var(--mf-dur) var(--mf-ease);
}

html.maria-flor .btn-limpar-carrinho:hover {
  border-color: rgba(157, 23, 77, .4);
  color: var(--mf-wine, #9d174d);
}

/* -------------------------------------------------------------------------
   12. Carrinho
   ------------------------------------------------------------------------- */
html.maria-flor #carrinho-flutuante {
  border-radius: var(--mf-r-lg);
  border: 1px solid var(--mf-line-soft);
  box-shadow: var(--mf-sh-3);
  overflow: hidden;
}

html.maria-flor .carrinho-header {
  background: linear-gradient(135deg, var(--mf-rose, #db2777), var(--mf-wine, #9d174d));
  color: #fff;
  font-weight: 650;
}

html.maria-flor #carrinho-itens-lista > *,
html.maria-flor #carrinho-mobile-itens-lista > * {
  border-radius: var(--mf-r-sm);
  border-bottom: 1px solid var(--mf-line-soft);
}

html.maria-flor #modal-carrinho-mobile-content {
  border-radius: var(--mf-r-xl) var(--mf-r-xl) 0 0;
  box-shadow: 0 -8px 50px rgba(63, 16, 32, .26);
}

html.maria-flor #carrinho-flutuante-mobile {
  box-shadow: var(--mf-sh-rose);
  transition: transform var(--mf-dur) var(--mf-ease);
}

html.maria-flor #carrinho-flutuante-mobile:active {
  transform: scale(.94);
}

/* -------------------------------------------------------------------------
   13. Navegação inferior no mobile
   ------------------------------------------------------------------------- */
html.maria-flor #bottom-nav-mobile {
  border-top: 1px solid var(--mf-line-soft);
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(14px);
  box-shadow: 0 -4px 20px rgba(63, 16, 32, .08);
}

html.maria-flor .bottom-nav-link {
  font-weight: 600;
  letter-spacing: -.005em;
  transition: color var(--mf-dur) var(--mf-ease);
}

html.maria-flor .bottom-nav-badge {
  border-radius: var(--mf-r-pill);
  box-shadow: 0 2px 8px rgba(219, 39, 119, .4);
}

/* -------------------------------------------------------------------------
   14. Checkout — barrinha / modal de endereço e frete
   Os estilos do checkout nascem de uma template string JS e são injetados
   DEPOIS deste arquivo. Por isso #modal-checkout + !important pontual.
   ------------------------------------------------------------------------- */
html.maria-flor #modal-checkout {
  backdrop-filter: blur(6px);
  background: rgba(63, 16, 32, .55) !important;
}

html.maria-flor #modal-checkout .modal-content {
  border-radius: 24px !important;
  border: 1px solid rgba(219, 39, 119, .12) !important;
  box-shadow: 0 24px 80px rgba(63, 16, 32, .35) !important;
  background: #fffafc !important;
  max-width: 560px !important;
  overflow: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(219, 39, 119, .35) transparent;
}

html.maria-flor #modal-checkout .modal-content::-webkit-scrollbar {
  width: 6px;
}

html.maria-flor #modal-checkout .modal-content::-webkit-scrollbar-thumb {
  background: rgba(219, 39, 119, .35);
  border-radius: 999px;
}

html.maria-flor #modal-checkout .modal-header {
  background: linear-gradient(135deg, #fff 0%, #fdf2f8 100%) !important;
  border-bottom: 1px solid rgba(219, 39, 119, .1) !important;
  padding: 18px 22px !important;
  position: sticky;
  top: 0;
  z-index: 5;
}

html.maria-flor #modal-checkout .modal-header h2 {
  font-family: var(--mf-font-display, 'Playfair Display', serif) !important;
  font-size: 1.35rem !important;
  font-weight: 600 !important;
  color: var(--mf-ink, #3f1020) !important;
  letter-spacing: -.02em;
  margin: 0 !important;
  display: flex;
  align-items: center;
  gap: 10px;
}

html.maria-flor #modal-checkout .modal-header h2 i {
  color: var(--mf-rose, #db2777);
  font-size: 1.1rem;
}

html.maria-flor #modal-checkout .modal-close {
  width: 40px;
  height: 40px;
  border-radius: 999px !important;
  border: 1px solid rgba(219, 39, 119, .15) !important;
  background: #fff !important;
  color: var(--mf-wine, #9d174d) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(63, 16, 32, .06);
  transition: transform .2s ease, box-shadow .2s ease;
}

html.maria-flor #modal-checkout .modal-close:hover {
  transform: scale(1.06);
  box-shadow: 0 4px 14px rgba(219, 39, 119, .18);
}

html.maria-flor #modal-checkout .modal-body {
  padding: 18px 20px 28px !important;
}

html.maria-flor #modal-checkout .checkout-section {
  margin-bottom: 22px !important;
  padding: 16px 16px 14px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid rgba(219, 39, 119, .08);
  box-shadow: 0 2px 10px rgba(63, 16, 32, .04);
}

html.maria-flor #modal-checkout .checkout-section-title {
  font-size: .95rem !important;
  font-weight: 750 !important;
  letter-spacing: -.01em;
  color: var(--mf-ink, #3f1020) !important;
  margin-bottom: 14px !important;
  gap: 8px !important;
}

html.maria-flor #modal-checkout .checkout-section-title i {
  color: var(--mf-rose, #db2777);
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #fce7f3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
}

html.maria-flor #modal-checkout .form-group label {
  font-size: .78rem !important;
  font-weight: 700 !important;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--mf-ink-muted, #6b3a4a) !important;
  margin-bottom: 6px !important;
}

html.maria-flor #modal-checkout .form-group input,
html.maria-flor #modal-checkout .form-group textarea,
html.maria-flor #modal-checkout .form-group select,
html.maria-flor #modal-checkout input,
html.maria-flor #modal-checkout select,
html.maria-flor #modal-checkout textarea {
  border-radius: 12px !important;
  border: 1.5px solid rgba(219, 39, 119, .14) !important;
  background: #fff !important;
  color: var(--mf-ink, #3f1020) !important;
  padding: 12px 14px !important;
  font-size: .95rem !important;
  transition: border-color .2s ease, box-shadow .2s ease !important;
}

html.maria-flor #modal-checkout .form-group input:focus,
html.maria-flor #modal-checkout .form-group textarea:focus,
html.maria-flor #modal-checkout .form-group select:focus,
html.maria-flor #modal-checkout input:focus,
html.maria-flor #modal-checkout select:focus,
html.maria-flor #modal-checkout textarea:focus {
  border-color: var(--mf-rose, #db2777) !important;
  box-shadow: 0 0 0 3px rgba(219, 39, 119, .14) !important;
  outline: none !important;
}

html.maria-flor #modal-checkout .btn-buscar-cep {
  border-radius: 12px !important;
  background: linear-gradient(135deg, var(--mf-rose, #db2777), var(--mf-wine, #9d174d)) !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(219, 39, 119, .28);
  font-weight: 700;
  padding: 12px 18px !important;
}

html.maria-flor #modal-checkout .tipo-entrega-btn,
html.maria-flor #modal-checkout .forma-pagamento-card {
  border-radius: 14px !important;
  border: 1.5px solid rgba(219, 39, 119, .12) !important;
  background: #fff !important;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease !important;
}

html.maria-flor #modal-checkout .tipo-entrega-btn:hover,
html.maria-flor #modal-checkout .forma-pagamento-card:hover {
  transform: translateY(-2px);
  border-color: rgba(219, 39, 119, .35) !important;
  box-shadow: 0 8px 20px rgba(219, 39, 119, .12);
}

html.maria-flor #modal-checkout .tipo-entrega-btn.selected,
html.maria-flor #modal-checkout .forma-pagamento-card.selected {
  border-color: var(--mf-rose, #db2777) !important;
  background: linear-gradient(180deg, #fff 0%, #fdf2f8 100%) !important;
  box-shadow: 0 0 0 3px rgba(219, 39, 119, .14), 0 8px 20px rgba(219, 39, 119, .12) !important;
  margin-bottom: 0 !important;
}

html.maria-flor #modal-checkout .forma-pagamento-card.selected::after {
  background: linear-gradient(135deg, var(--mf-rose, #db2777), var(--mf-wine, #9d174d)) !important;
  bottom: -10px !important;
}

html.maria-flor #modal-checkout .tipo-entrega-btn i,
html.maria-flor #modal-checkout .forma-pagamento-card i,
html.maria-flor #modal-checkout .forma-pagamento-card iconify-icon {
  color: var(--mf-rose, #db2777) !important;
}

/* Card de frete — rosa da marca no lugar do azul/roxo legado */
html.maria-flor #modal-checkout .lab3d-frete-card {
  border-radius: 16px !important;
  margin-top: 12px !important;
  padding: 16px 18px !important;
  box-shadow: 0 8px 24px rgba(63, 16, 32, .08) !important;
}

html.maria-flor #modal-checkout .lab3d-frete-loading {
  background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 100%) !important;
  border: 1px solid rgba(219, 39, 119, .25) !important;
  color: var(--mf-ink, #3f1020) !important;
}

html.maria-flor #modal-checkout .lab3d-frete-loading .lab3d-frete-shimmer-bar {
  background: linear-gradient(90deg, rgba(219,39,119,.15) 0%, rgba(157,23,77,.55) 45%, rgba(219,39,119,.15) 100%) !important;
  background-size: 220% 100% !important;
}

html.maria-flor #modal-checkout .lab3d-frete-loading-ico {
  background: #fff !important;
  color: var(--mf-rose, #db2777);
  animation: none !important;
}

html.maria-flor #modal-checkout .lab3d-frete-success {
  background: linear-gradient(155deg, #fff 0%, #fdf2f8 50%, #fce7f3 100%) !important;
  border: 1px solid rgba(219, 39, 119, .28) !important;
  color: var(--mf-ink, #3f1020) !important;
}

html.maria-flor #modal-checkout .lab3d-frete-success .lab3d-frete-head {
  color: var(--mf-ink, #3f1020) !important;
}

html.maria-flor #modal-checkout .lab3d-frete-success .lab3d-frete-valor {
  color: var(--mf-wine, #9d174d) !important;
  font-size: 1.35rem !important;
}

html.maria-flor #modal-checkout .lab3d-frete-success .muted {
  color: var(--mf-ink-muted, #6b3a4a) !important;
}

html.maria-flor #modal-checkout .lab3d-frete-success a {
  color: var(--mf-rose, #db2777) !important;
}

html.maria-flor #modal-checkout .lab3d-frete-check {
  color: var(--mf-rose, #db2777) !important;
}

html.maria-flor #modal-checkout .lab3d-frete-error {
  background: linear-gradient(135deg, #fff5f7 0%, #ffe4e6 100%) !important;
  border: 1px solid rgba(190, 24, 93, .3) !important;
  color: #9f1239 !important;
}

html.maria-flor #modal-checkout .resumo-pedido {
  background: linear-gradient(180deg, #fff 0%, #fdf2f8 100%) !important;
  border: 1px solid rgba(219, 39, 119, .14) !important;
  border-radius: 16px !important;
  padding: 18px 20px !important;
  box-shadow: 0 6px 20px rgba(219, 39, 119, .08);
}

html.maria-flor #modal-checkout .resumo-linha {
  color: var(--mf-ink-muted, #6b3a4a);
  font-size: .92rem;
}

html.maria-flor #modal-checkout .resumo-total,
html.maria-flor #modal-checkout #resumo-total {
  font-size: 1.4rem !important;
  font-weight: 800 !important;
  letter-spacing: -.02em;
  color: var(--mf-wine, #9d174d) !important;
  font-variant-numeric: tabular-nums;
}

html.maria-flor #modal-checkout .carrinho-resumo-item {
  border-radius: 10px;
  padding: 12px 10px !important;
  border-bottom: 1px solid rgba(219, 39, 119, .08) !important;
}

html.maria-flor #modal-checkout .carrinho-resumo-preco {
  color: var(--mf-wine, #9d174d) !important;
}

html.maria-flor #modal-checkout .btn-finalizar-pedido {
  border-radius: 999px !important;
  padding: 16px 20px !important;
  font-size: 1.05rem !important;
  font-weight: 750 !important;
  letter-spacing: -.01em;
  background: linear-gradient(135deg, var(--mf-rose, #db2777), var(--mf-wine, #9d174d)) !important;
  box-shadow: 0 10px 28px rgba(219, 39, 119, .35) !important;
  margin-top: 8px;
}

html.maria-flor #modal-checkout .btn-finalizar-pedido:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}

@media (max-width: 768px) {
  html.maria-flor #modal-checkout {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  html.maria-flor #modal-checkout .modal-content {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92vh !important;
    margin: 0 !important;
    border-radius: 22px 22px 0 0 !important;
    border-bottom: none !important;
  }

  html.maria-flor #modal-checkout .modal-header {
    padding: 14px 16px 12px !important;
  }

  html.maria-flor #modal-checkout .modal-header::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    border-radius: 999px;
    background: rgba(219, 39, 119, .25);
    margin: 0 auto 12px;
  }

  html.maria-flor #modal-checkout .modal-body {
    padding: 12px 14px 28px !important;
  }

  html.maria-flor #modal-checkout .checkout-section {
    padding: 14px;
    margin-bottom: 14px !important;
  }
}

/* -------------------------------------------------------------------------
   15. Rodapé
   ------------------------------------------------------------------------- */
html.maria-flor .mf-footer {
  border-top: 1px solid var(--mf-line-soft);
}

html.maria-flor .mf-footer-inner {
  padding-top: var(--mf-sp-5);
  padding-bottom: var(--mf-sp-5);
}

html.maria-flor .mf-footer-brand {
  font-family: var(--mf-font-display, 'Playfair Display', serif);
  letter-spacing: -.01em;
}

/* -------------------------------------------------------------------------
   16. Mobile
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {
  html.maria-flor .accordion-header {
    padding: 17px 18px;
    font-size: 1.1rem;
  }

  html.maria-flor .accordion-content {
    padding: 12px 12px var(--mf-sp-3);
  }

  html.maria-flor .product-card {
    padding: 12px;
    gap: 12px;
    margin-bottom: 12px;
  }

  html.maria-flor .product-card img {
    width: 92px;
    height: 92px;
  }

  html.maria-flor .product-info h4 {
    font-size: .95rem;
  }

  html.maria-flor .product-info .price,
  html.maria-flor .product-info .price.promotional .new-price {
    font-size: 1.1rem;
  }

  /* Toque não tem hover: o transform ficava "grudado" após o tap. */
  html.maria-flor .product-card:hover {
    transform: none;
  }

  html.maria-flor .product-card:hover img {
    transform: none;
  }
}

@media (hover: none) {
  html.maria-flor .product-card:hover,
  html.maria-flor .category:hover,
  html.maria-flor .mf-bestsellers-card-btn:hover {
    transform: none;
  }
}

/* Respeita quem pediu menos movimento no sistema. */
@media (prefers-reduced-motion: reduce) {
  html.maria-flor *,
  html.maria-flor *::before,
  html.maria-flor *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}