/*
 * Maple Insumos — maplehospitalar.com/insumos/ (includes/insumos.php). Carrega depois do loja.css, só nas páginas da seção.
 *
 * Cores invertidas em relação à loja principal: lá o azul-marinho é a superfície da marca e o laranja é a ação;
 * aqui o damasco (laranja suave) é a superfície e o azul-marinho é a ação. Sobre o damasco o texto é tinta
 * escura — laranja suave com texto branco não passa de 2:1. O rodapé e a faixa de cima ancoram em cacau.
 *
 * Contraste conferido (WCAG): tinta #0c1d31 sobre damasco #f6a26b 8:1; ferrugem #7a2a08 sobre damasco 4,7:1
 * (só título grande); link #b4461a no branco 5,5:1; pêssego #ffe3d0 sobre telha #9a3a12 5,7:1; texto do
 * rodapé #ecd6c7 sobre cacau #2a1910 11:1; botão branco sobre azul-marinho #152b47 14:1.
 */
body.ml-insumos {
  --ins-50: #fff7f1;
  --ins-100: #ffeadb;
  --ins-200: #fdd5b8;
  --ins-300: #f9bb8f;
  --ins-400: #f6a26b;   /* damasco: a superfície da marca */
  --ins-500: #ef8a4a;
  --ins-600: #e06a2b;   /* ícone e destaque sobre branco (3,3:1, não é texto) */
  --ins-700: #b4461a;   /* link e texto de destaque no branco */
  --ins-800: #9a3a12;   /* telha: faixa de cima */
  --ins-rust: #7a2a08;  /* ênfase do título sobre o damasco */
  --ins-cocoa: #2a1910; /* rodapé */
  --ins-ink: #0c1d31;

  --ml-blue: var(--ins-700);
  --ml-blue-500: var(--ins-600);
  --ml-sky: var(--ins-100);
  --ml-sky-300: var(--ins-300);
  --ml-action: #152b47;      /* a ação é o azul-marinho da casa */
  --ml-action-700: #0c1d31;
  --ml-bg: var(--ins-50);
  /* neutros quentes: o cinza-ardósia da loja azul esfriava os cartões sobre o pêssego (mesmo contraste ou mais) */
  --ml-ink-2: #64493a;   /* 7,8:1 no pêssego */
  --ml-ink-3: #6a5040;   /* 7,0:1 no pêssego */
  --ml-line: #f1dccd;
  --ml-shadow: 0 1px 2px rgba(122, 42, 8, .06), 0 2px 8px rgba(122, 42, 8, .07);
  --ml-shadow-lg: 0 22px 46px -18px rgba(122, 42, 8, .34);
  --ml-wa: #147a3c;          /* verde do WhatsApp escurecido: branco a 5,4:1 (o da loja dava 4,1) */

  caret-color: var(--ins-600);
}
html:has(body.ml-insumos) { scrollbar-color: var(--ins-500) var(--ins-50); accent-color: var(--ins-600); }
.ml-insumos ::selection { background: var(--ins-200); color: var(--ins-ink); }
.ml-insumos .ml-hero ::selection, .ml-insumos .ml-footer ::selection { background: var(--ins-ink); color: #fff; }
.ml-insumos :focus-visible { outline-color: var(--ml-action); }

/* Botão cheio: texto branco. ".maple-loja button { color: inherit }" (loja.css) pesa mais que ".ml-btn { color:
   #fff }"; na loja principal o texto escuro herdado ainda se lê sobre o laranja, aqui sumiria no azul-marinho. */
.maple-loja.ml-insumos .ml-btn:not(.ml-btn--ghost) { color: #fff; }

/* ---------- topo ---------- */
.ml-insumos .ml-topbar { background: var(--ins-800); color: #ffe3d0; }
.ml-insumos .ml-topbar .ml-ico { color: var(--ins-300); }
.ml-insumos .ml-topbar a:hover { color: #fff; }

.ml-insumos .ml-header {
  background: var(--ins-400); color: var(--ins-ink);
  /* o topo do herói é quase do mesmo tom (1,2:1): a linha de telha separa o cabeçalho do herói */
  border-bottom: 1px solid rgba(154, 58, 18, .35);
  box-shadow: 0 8px 22px -12px rgba(122, 42, 8, .45);
}
/* o logo oficial é branco: sobre o damasco ele vira tinta (mesmo desenho, sem arquivo novo) */
.ml-insumos .ml-logo img, .ml-insumos .ml-drawer__head img { filter: brightness(0); opacity: .86; }
.ml-insumos .ml-logo { color: var(--ins-ink); }
.ml-logo__linha {
  align-self: center; padding: 5px 10px 4px; border-radius: 999px;
  background: var(--ins-rust); color: #fff;  /* ferrugem, não marinho: o marinho é só da ação (9,7:1) */
  font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; line-height: 1;
}
.ml-insumos .ml-hact:hover { background: rgba(12, 29, 49, .08); }
.ml-insumos .ml-hact--cta { background: var(--ml-action); color: #fff; }
.ml-insumos .ml-hact--cta:hover { background: var(--ml-action-700); }
.ml-insumos .ml-badge { background: var(--ins-rust); color: #fff; border-color: var(--ins-400); }
.ml-insumos .ml-header .ml-menubtn { color: var(--ins-ink); }
.ml-insumos .ml-menubtn:hover { background: rgba(12, 29, 49, .08); }
.ml-insumos .ml-search__box { box-shadow: 0 0 0 1px rgba(122, 42, 8, .14); }
.ml-insumos .ml-search__box:focus-within { box-shadow: 0 0 0 3px var(--ins-ink); }

.ml-insumos .ml-catnav { background: var(--ins-200); }
.ml-insumos .ml-catnav__in { justify-content: flex-start; gap: 6px; }
.ml-insumos .ml-catnav a { color: #3b2214; padding-inline: 12px; }
.ml-insumos .ml-catnav a:first-child { margin-left: -12px; }
.ml-insumos .ml-catnav a:hover, .ml-insumos .ml-catnav a[aria-current] { color: var(--ins-ink); border-bottom-color: var(--ins-ink); background: rgba(255, 255, 255, .35); }
.ml-insumos .ml-catnav__promo b { background: var(--ins-ink); color: #fff; }
.ml-insumos .ml-catnav__ponte { margin-left: auto !important; display: inline-flex; gap: 6px; color: var(--ins-ink) !important; font-weight: 700 !important; }
.ml-insumos .ml-catnav__ponte .ml-ico { display: inline-block !important; width: 15px; height: 15px; }

/* menu lateral */
.ml-insumos .ml-drawer__head { background: var(--ins-400); }
.ml-insumos .ml-drawer .ml-drawer__close { color: var(--ins-ink); }
.ml-insumos .ml-drawer__close:hover { background: rgba(12, 29, 49, .08); }
.ml-insumos .ml-drawer__ico { background: var(--ins-100); color: var(--ins-700); }
.ml-insumos .ml-drawer__n { background: var(--ins-ink); color: #fff; }
.ml-insumos .ml-drawer__contato { background: var(--ins-800); }
.ml-insumos .ml-drawer__contato a { color: #ffe3d0; }
.ml-insumos .ml-drawer__contato .ml-ico { color: var(--ins-300); }
.ml-insumos .ml-drawer::backdrop, .ml-insumos .ml-drawer[open]::backdrop { background: rgba(42, 25, 16, .5); }

/* ---------- hero ---------- */
.ml-insumos .ml-hero--insumos {
  color: var(--ins-ink);
  background-color: var(--ins-400);
  /* luz quente no canto do texto, sombra suave atrás do painel: profundidade sem foto */
  background-image:
    radial-gradient(70% 90% at 8% 0%, rgba(255, 236, 220, .75), transparent 60%),
    radial-gradient(55% 70% at 92% 105%, rgba(224, 106, 43, .45), transparent 65%),
    linear-gradient(160deg, var(--ins-300) 0%, var(--ins-400) 48%, var(--ins-500) 100%);
}
.ml-insumos .ml-hero--insumos h1 { color: var(--ins-ink); max-width: 15ch; margin-bottom: 16px; }
.ml-insumos .ml-hero--insumos h1 em { color: var(--ins-rust); }
.ml-insumos .ml-hero--insumos .ml-hero__lead { color: #3b2214; }
.ml-insumos .ml-hero--insumos .ml-try { color: #4a2c1b; }
.ml-insumos .ml-hero--insumos .ml-chip--try {
  background: rgba(255, 255, 255, .5); border-color: rgba(122, 42, 8, .18); color: var(--ins-ink);
  font-family: inherit; font-size: 13px; font-weight: 600;
}
.ml-insumos .ml-hero--insumos .ml-chip--try:hover { background: #fff; border-color: rgba(122, 42, 8, .3); color: var(--ins-ink); }
.ml-insumos .ml-hero--insumos .ml-hero__prova { color: #4a2c1b; }
.ml-insumos .ml-hero--insumos .ml-hero__prova b { color: var(--ins-ink); }
.ml-insumos .ml-hero--insumos .ml-search--hero .ml-search__box { box-shadow: 0 24px 46px -18px rgba(122, 42, 8, .55), 0 0 0 1px rgba(122, 42, 8, .08); }

/* painel de categorias (no lugar da busca por equipamento) */
.ml-finder--cats h2 .ml-ico { color: var(--ins-600); }
.ml-pick { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ml-pick__item {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto 18px; align-items: center; gap: 12px;
  min-height: 64px; padding: 6px 10px 6px 6px; border-radius: 14px; border: 1px solid var(--ml-line);
  transition: background .18s ease, border-color .18s ease, transform .18s cubic-bezier(.2, .7, .2, 1);
}
.ml-pick__item:hover { background: var(--ins-50); border-color: var(--ins-300); transform: translateX(2px); }
.ml-pick__img { width: 52px; height: 52px; border-radius: 11px; background: var(--ins-100); display: grid; place-items: center; overflow: hidden; color: var(--ins-700); }
.ml-pick__img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; padding: 4px; }
.ml-pick__img .ml-ico { width: 26px; height: 26px; }
.ml-pick__nome { font-size: 15px; font-weight: 700; color: var(--ins-ink); line-height: 1.25; }
.ml-pick__n {
  min-width: 26px; height: 24px; padding: 0 8px; border-radius: 999px; background: var(--ins-100); color: var(--ins-800); /* 6,0:1 */
  font-size: 12.5px; font-weight: 700; display: inline-grid; place-items: center; font-variant-numeric: tabular-nums;
}
.ml-pick__seta { width: 18px; height: 18px; color: var(--ml-ink-3); }

/* ---------- seções ---------- */
.ml-insumos .ml-trust__ico { color: var(--ins-700); background: var(--ins-100); }
.ml-insumos .ml-cat__img { background: linear-gradient(180deg, #fffaf6, var(--ins-100)); }
.ml-insumos .ml-favband__ico { background: var(--ins-400); color: var(--ins-ink); }
.ml-insumos .ml-how li .ml-ico { background: var(--ins-ink); color: var(--ins-300); }

/* faixa "Maple Insumos": damasco claro, não o bloco escuro da loja principal */
.ml-insumos .ml-sobre { background: var(--ins-200); color: #3b2214; box-shadow: inset 0 0 0 1px rgba(122, 42, 8, .08); }
.ml-insumos .ml-sobre h2 { color: var(--ins-ink); }
.ml-insumos .ml-sobre li { background: rgba(255, 255, 255, .55); border-color: rgba(122, 42, 8, .12); }
.ml-insumos .ml-sobre li b { color: var(--ins-ink); }
.maple-loja.ml-insumos .ml-sobre__acoes .ml-btn--ghost { color: var(--ins-ink); box-shadow: inset 0 0 0 1.5px rgba(12, 29, 49, .35); }
.maple-loja.ml-insumos .ml-sobre__acoes .ml-btn--ghost:hover { background: rgba(255, 255, 255, .5); }

/* ---------- rodapé ---------- */
.ml-insumos .ml-footer { background: var(--ins-cocoa); color: #ecd6c7; }
.ml-insumos .ml-footer h3 { color: var(--ins-300); }
.ml-insumos .ml-footer__legal { color: #c8ab98; border-top-color: rgba(255, 227, 208, .12); }

/* ---------- faixas do topo: uma só ---------- */
/* o cupom deixa de ser marinho (o marinho é a ação) e, quando aparece, toma o lugar da faixa dos telefones */
.ml-insumos .ml-cupomtop { background: var(--ins-800); }
.ml-insumos .ml-cupomtop .ml-cupom__code { background: rgba(255, 255, 255, .14); }
.ml-insumos .ml-cupomtop + .ml-topbar { display: none; }
/* o "padding: 9px 0" do cupom no loja.css zera o recuo lateral do .ml-wrap: no celular o texto encostava na borda */
.ml-insumos .ml-cupomtop__in { padding-inline: 16px; }

/* ---------- cartões: neutro quente e o laranja como acento ---------- */
.ml-insumos .ml-card__img { background: linear-gradient(180deg, #fffaf6, var(--ins-100)); }
.ml-insumos .ml-card { transition: transform .2s cubic-bezier(.2, .7, .2, 1), box-shadow .2s ease; }
/* o cartão não tem borda: o aro damasco entra pela sombra */
.ml-insumos .ml-card:hover { box-shadow: 0 0 0 1.5px var(--ins-400), 0 16px 32px -14px rgba(180, 70, 26, .38); }
.ml-insumos .ml-card:focus-within { box-shadow: 0 0 0 2px var(--ins-600), var(--ml-shadow); }

/* medida em destaque no cartão (fotos iguais entre medidas) */
.ml-card__medida { margin: -2px 0 0; font-size: 14px; font-weight: 700; color: var(--ins-ink); font-variant-numeric: tabular-nums; }

/* seletor de medida na página do produto */
.ml-pdp__medidas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.ml-pdp__medidas > span { font-size: 13px; font-weight: 700; color: var(--ml-ink-2); margin-right: 4px; }
.ml-medida {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 12px;
  background: #fff; color: var(--ins-ink); font-weight: 700; font-size: 14px; text-decoration: none; font-variant-numeric: tabular-nums;
  box-shadow: inset 0 0 0 1.5px var(--ml-line); transition: box-shadow .15s ease, background .15s ease;
}
.ml-medida:hover { box-shadow: inset 0 0 0 1.5px var(--ins-400); background: var(--ins-50); }
.ml-medida.is-on { background: var(--ins-100); box-shadow: inset 0 0 0 2px var(--ins-600); }

/* catálogo inteiro logo abaixo do herói: o título mais forte da página depois do h1, 3 colunas (6 itens = 2 linhas) */
.ml-catalogo { margin-top: 36px; }
.ml-catalogo .ml-section-head h2 { font-size: clamp(28px, 2.6vw, 34px); }
@media (min-width: 901px) {
  .ml-insumos .ml-catalogo .ml-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
}

/* trilho de categorias com foto (o mesmo da loja principal): só no celular, onde o painel ao lado some */
.ml-herocats--insumos { display: none; }
.ml-insumos .ml-herocats__titulo { color: #4a2c1b; }   /* 6,2:1 no damasco */
.ml-insumos .ml-herocats .ml-cat { background: #fff; box-shadow: 0 8px 20px -12px rgba(122, 42, 8, .45); }
.ml-insumos .ml-herocats .ml-cat:focus-visible { outline-color: var(--ins-ink); }

/* busca sem resultado: cotação por WhatsApp ou e-mail, e o estoque logo abaixo */
.ml-insumos .ml-results .ml-empty { max-width: none; }
.ml-empty__acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.ml-empty__acoes .ml-btn { min-height: 48px; }
.ml-empty__estoque { margin: 40px 0 16px; font-size: clamp(24px, 2.4vw, 30px); color: var(--ml-navy); }
@media (min-width: 901px) {
  .ml-insumos .ml-catalogo__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
}

/* cartões no computador: foto 4:3 (o quadrado de 387 px deixava o preço da categoria abaixo da dobra) */
@media (min-width: 901px) {
  .ml-insumos .ml-card__img { aspect-ratio: 4 / 3; min-height: 0; overflow: hidden; }
  /* a foto é quadrada: sem isto ela empurrava a caixa de volta para 1:1 */
  .ml-insumos .ml-card__img img { width: 100%; height: 100%; object-fit: contain; }
}
/* dentro de uma categoria o rótulo repetia o nome dela em cada cartão */
.ml-insumos .ml-listbody .ml-card__cat { display: none; }

/* busca sem resultado: as categorias como saída */
.ml-empty__ou { margin-top: 26px; font-weight: 700; color: var(--ins-ink); }
.ml-empty__cats { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ml-medida span { font-weight: 600; color: var(--ml-ink-3); margin-left: 4px; }

/* categoria: grade de 3 (a seção tem poucos itens; 4 colunas deixavam buraco) e o cabeçalho da lista em pêssego */
@media (min-width: 901px) {
  .ml-insumos .ml-listbody .ml-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
}
.ml-insumos .ml-listhead { background: var(--ins-200); border-bottom-color: rgba(122, 42, 8, .12); }
/* no pêssego o link #b4461a da trilha dava 4,0:1: telha (5,2:1) */
.ml-insumos .ml-listhead .ml-crumbs a { color: var(--ins-800); }

/* placeholder da busca: o cinza da loja dava 3:1 no branco */
.ml-insumos .ml-search input::placeholder { color: #75594a; opacity: 1; }

/* "Não achou o insumo?": cacau quente, não o bloco azul-marinho da loja de peças */
.ml-insumos .ml-request { background: radial-gradient(600px 300px at 0% 100%, rgba(224, 106, 43, .28), transparent 70%), var(--ins-cocoa); }
.ml-insumos .ml-request__text > p { color: #f0dccd; }
.ml-insumos .ml-request__steps b { background: var(--ins-400); color: var(--ins-ink); }

/* cupom: "copiar" em branco (o branco a 85% dava 4,25:1 sobre o código) */
.ml-insumos .ml-cupomtop .ml-cupom__code span { color: #fff; }

/* "Reposição do almoxarifado": os quatro argumentos lado a lado, sem foto; título abaixo do da vitrine */
.ml-how--passos3 { display: block; }
.ml-how--passos3 > div { max-width: none; }
.ml-how--passos3 h2 { font-size: clamp(24px, 2.2vw, 28px); }
.ml-how--passos3 .ml-how__lead { max-width: 70ch; }
.ml-how--passos3 .ml-how__lead a { color: var(--ins-700); font-weight: 700; }
.ml-how--passos3 ul { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 22px; }
.ml-how--passos3 li { grid-template-columns: 1fr; gap: 12px; padding: 20px; border-radius: 16px; background: #fff; box-shadow: var(--ml-shadow); }

/* ---------- produto: a compra primeiro ---------- */
.ml-pdp__conta { margin: 10px 0 0; color: var(--ml-ink-2); font-size: 14px; line-height: 1.5; }
.ml-pdp__conta a { color: var(--ins-700); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.ml-pdp__share--icones { display: flex; gap: 8px; }
.ml-pdp__share--icones .ml-btn { width: 44px; height: 44px; padding: 0; }
.ml-pdp__share--icones .ml-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ml-insumos .ml-fav { width: 44px; height: 44px; }

/* alvos de toque no celular (medidos em 04/11: "Adicionar" 42px, busca 38px, trilha e rodapé 17–20px) */
@media (max-width: 760px) {
  .ml-insumos .ml-btn--add, .ml-insumos .ml-favband .ml-btn, .ml-insumos .ml-pdp__conta a { min-height: 44px; }
  .ml-insumos .ml-btn--add, .ml-insumos .ml-favband .ml-btn { display: inline-flex; align-items: center; justify-content: center; }
  .ml-insumos .ml-header .ml-search__box { min-height: 44px; }
  .ml-insumos .ml-header .ml-btn--search { min-height: 44px; min-width: 44px; }
  .ml-insumos .ml-crumbs a { display: inline-block; padding-block: 12px; margin-block: -12px; }
  /* trilha em uma linha: o item atual repetia o título inteiro logo abaixo (3 linhas no produto) */
  .ml-insumos .ml-crumbs > span:last-child { display: none; }
  .ml-insumos .ml-footer li a { display: inline-block; padding-block: 4px; }
}

@media (max-width: 1100px) {
  .ml-how--passos3 ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  /* o painel de categorias ao lado do herói vira o trilho abaixo da busca */
  .ml-insumos .ml-finder--cats { display: none; }
  .ml-herocats--insumos { display: block; }
}

@media (max-width: 640px) {
  /* telefones ficam no menu; herói mais curto, catálogo em duas colunas */
  .ml-insumos .ml-topbar { display: none; }
  .ml-insumos .ml-hero--insumos .ml-hero__in { padding-top: 24px; padding-bottom: 32px; gap: 22px; }
  .ml-how--passos3 ul { grid-template-columns: minmax(0, 1fr); }
  .ml-how--passos3 li { padding: 16px; }
  /* primeira tela: título em 3 linhas, sem a frase de prova (o cartão já diz "Pronta entrega") */
  .ml-insumos .ml-hero--insumos h1 { font-size: 26px; margin-bottom: 10px; }
  .ml-insumos .ml-hero--insumos .ml-hero__lead { font-size: 14.5px; line-height: 1.45; }
  .ml-insumos .ml-hero--insumos .ml-hero__in { padding-top: 14px; padding-bottom: 22px; gap: 18px; }
  .ml-insumos .ml-hero--insumos .ml-hero__prova { display: none; }
  .ml-insumos .ml-hero--insumos .ml-try { margin-top: 12px; }
  /* cupom em uma linha: some o "use no carrinho" */
  .ml-insumos .ml-cupomtop__ate { display: none; }
  .ml-insumos .ml-cupomtop__in { flex-wrap: nowrap; gap: 8px; padding-block: 6px; font-size: 13px; }
  .ml-insumos .ml-cupomtop b { font-size: 12.5px; line-height: 1.2; }
  .ml-insumos .ml-cupomtop__ico { display: none; }
  .ml-insumos .ml-cupomtop .ml-cupom__code { height: 32px; padding: 0 10px; margin-left: auto; flex: none; }
  /* o código e o ícone bastam no celular; o texto do cupom ganha a largura do "copiar" */
  .ml-insumos .ml-cupomtop .ml-cupom__code span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ml-insumos .ml-chip--try { min-height: 44px; }
  .ml-insumos .ml-catalogo .ml-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ml-catalogo { margin-top: 24px; }
  /* a barra de compra fixa do celular vem de produto-mobile.css (vale para a loja toda); aqui só a sombra quente */
  .ml-insumos .ml-pdp__buy .ml-pdp__cart { box-shadow: 0 -10px 28px -14px rgba(122, 42, 8, .32); }
  .ml-logo__linha { font-size: 10px; padding: 4px 8px 3px; letter-spacing: .1em; }
  .ml-pick__item { min-height: 58px; }
}
@media (prefers-reduced-motion: reduce) {
  .ml-pick__item { transition: none; }
  .ml-pick__item:hover { transform: none; }
}