/* Mundo loja/farmácia: /loja e /estetica. Só tokens; nenhum literal de cor, raio ou duração. */

.confirmar { display: inline-block; padding: 0 var(--spacing-6); border-radius: var(--radius-control); background: var(--alerta); color: var(--n-900); font-size: var(--font-size-13); font-weight: var(--weight-announce); line-height: 1.5; }

/* faixa de benefícios logo abaixo do cabeçalho */
.benefits { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); border-block: 1px solid var(--border); background: var(--bg); }
.benefits li { display: flex; flex-direction: column; gap: var(--spacing-2); padding: var(--spacing-20) var(--gutter); border-bottom: 1px solid var(--border); }
.benefits li:nth-child(odd) { border-right: 1px solid var(--border); }
.benefits li:nth-last-child(-n+2) { border-bottom: 0; }
.benefits strong { color: var(--text-strong); font-size: var(--font-size-18); font-weight: var(--weight-announce); }
.benefits span { font-size: var(--font-size-14); color: var(--text-muted); }
@media (min-width: 900px) {
  .benefits { grid-template-columns: repeat(4, 1fr); }
  .benefits li { border-bottom: 0; border-right: 1px solid var(--border); }
  .benefits li:last-child { border-right: 0; }
}

/* ── Cabeçalho de categoria: título grande à esquerda, apoio à direita (editorial 5/6) ── */
.cat-head { margin-bottom: var(--spacing-48); }
.cat-head__title { font-size: var(--text-h1); }
.cat-head .lead { max-width: 42ch; }
@media (min-width: 900px) { .cat-head { align-items: end; } }

/* ── Galeria de produtos: imagem grande, preço em mono, sem caixa decorativa ─────
   Grade é layout legítimo p/ catálogo; a hierarquia vem do tamanho da foto e do
   preço em mono, não de card-dentro-de-card. Linhas ímpares descem (offset de peso). */
.catalog { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-32) var(--spacing-16); margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .catalog { grid-template-columns: repeat(3, 1fr); gap: var(--spacing-48) var(--spacing-24); } }
@media (min-width: 1100px) {
  .catalog { grid-template-columns: repeat(4, 1fr); }
  .catalog .item:nth-child(4n+2), .catalog .item:nth-child(4n+3) { margin-top: var(--spacing-32); }
}
.item { position: relative; display: flex; flex-direction: column; gap: var(--spacing-4); }
.item__img { display: grid; place-items: center; margin-bottom: var(--spacing-12); border-radius: var(--radius-image); background: var(--n-0); overflow: hidden; }
.item__img img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply; transition: transform var(--dur-state) var(--ease-signature); }
.item:hover .item__img img, .item:focus-within .item__img img { transform: scale(1.05); }
.item__brand { color: var(--text-muted); font-size: var(--font-size-13); }
.item__name { font-size: var(--font-size-16); font-weight: var(--weight-emphasize); line-height: 1.35; letter-spacing: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.item__link { color: var(--text-strong); text-decoration: none; }
/* o nome estica sobre o card inteiro; a foto e o "Comprar" não precisam de link próprio */
.item__link::before { content: ""; position: absolute; inset: 0; border-radius: var(--radius-image); }
.item__link:hover { color: var(--acento); }
.item__foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--spacing-4) var(--spacing-12); margin-top: var(--spacing-8); }
.item__price { color: var(--acento); font-size: var(--font-size-18); font-weight: var(--weight-announce); }
.item__buy { display: inline-flex; align-items: center; gap: var(--spacing-4); color: var(--text-muted); font-size: var(--font-size-13); font-weight: var(--weight-emphasize); }
.item__buy i { transition: transform var(--dur-state) var(--ease-signature); }
.item:hover .item__buy { color: var(--acento); }
.item:hover .item__buy i { transform: translateX(4px); }

/* entrega e retirada: um bloco grande + linhas de apoio */
.fulfil { display: grid; gap: var(--spacing-24); }
@media (min-width: 900px) { .fulfil { grid-template-columns: 6fr 5fr; gap: var(--spacing-48); align-items: stretch; } }
.pickup { display: flex; flex-direction: column; gap: var(--spacing-24); justify-content: space-between; }
.pickup__times { display: flex; flex-wrap: wrap; gap: var(--spacing-16) var(--spacing-48); margin: 0; }
.pickup__times div { display: flex; flex-direction: column-reverse; gap: var(--spacing-4); }
.pickup__times dd { margin: 0; font: var(--weight-display) var(--text-display)/1 var(--mono); color: var(--vermelho-800); }
.pickup__times dt { font-size: var(--font-size-14); color: var(--text); }
.rows { margin: 0; padding: 0; list-style: none; }
.rows li { display: grid; grid-template-columns: auto 1fr; gap: var(--spacing-4) var(--spacing-16); padding-block: var(--spacing-20); border-top: 1px solid var(--border); }
.rows li:last-child { border-bottom: 1px solid var(--border); }
.rows i { grid-row: span 2; color: var(--acento-marca); font-size: var(--font-size-28); }
.rows h3 { font-size: var(--font-size-20); }
.rows p { font-size: var(--font-size-14); color: var(--text); }

/* confiança */
.trust { display: grid; gap: var(--spacing-24); align-items: start; }
@media (min-width: 900px) { .trust { grid-template-columns: 5fr 7fr; gap: var(--spacing-64); } }
.pay { display: flex; flex-wrap: wrap; gap: var(--spacing-8); margin: 0; padding: 0; list-style: none; }
.pay li { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--spacing-12); border: 1px solid var(--border-strong); border-radius: var(--radius-control); background: var(--bg); color: var(--text-strong); font-size: var(--font-size-14); font-weight: var(--weight-emphasize); }
.pay .mono { font-size: var(--font-size-13); }

.band { display: flex; flex-direction: column; gap: var(--spacing-16); align-items: flex-start; }
@media (min-width: 720px) { .band { flex-direction: row; align-items: center; justify-content: space-between; } }
.band h2 { font-size: var(--text-h3); max-width: 24ch; }

/* ── Estética ───────────────────────────────────────────────────────── */
.perks { display: grid; gap: var(--spacing-24); margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .perks { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .perks { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--spacing-32); } }
.perks li { display: flex; flex-direction: column; gap: var(--spacing-8); }
.perks .icon-chip { margin-bottom: var(--spacing-8); }
.perks strong { color: var(--text-strong); font-size: var(--font-size-18); font-weight: var(--weight-announce); line-height: var(--leading-ui); }
.perks span { font-size: var(--font-size-14); }
.perks li:first-child strong { font-size: var(--text-h3); }

.services { display: grid; gap: var(--spacing-16); margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .services { grid-template-columns: 6fr 3fr 3fr; } }
.service { height: 100%; }
.service h3 { font-size: var(--text-h3); }
.service ul { margin: 0; padding-left: var(--spacing-20); font-size: var(--font-size-14); }
.service .icon-chip { width: 48px; height: 48px; font-size: var(--font-size-24); }

.price-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--bg); }
.price { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: var(--font-size-16); }
.price caption { padding: var(--spacing-16) var(--spacing-20); text-align: left; color: var(--text-muted); font-size: var(--font-size-14); }
.price th, .price td { padding: var(--spacing-16) var(--spacing-20); text-align: left; border-top: 1px solid var(--border); }
.price thead th { color: var(--text-strong); font-size: var(--font-size-14); font-weight: var(--weight-announce); }
.price tbody th { color: var(--text-strong); font-weight: var(--weight-announce); }
.price td { font-variant-numeric: tabular-nums; color: var(--text-muted); }
.price td.mono { color: var(--text-strong); }

.steps { display: grid; gap: var(--spacing-24); margin: 0; padding: 0; list-style: none; counter-reset: passo; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); gap: var(--spacing-48); } .steps li:nth-child(2) { margin-top: var(--spacing-48); } .steps li:nth-child(3) { margin-top: var(--spacing-96); } }
.steps li { counter-increment: passo; display: flex; flex-direction: column; gap: var(--spacing-8); }
.steps li::before { content: counter(passo); font: var(--weight-display) var(--text-display)/1 var(--mono); color: var(--acento-marca); }
.steps h3 { font-size: var(--font-size-24); }

/* FAQ com <details>; o marcador é o único elemento que gira (transform) */
.faq { display: grid; gap: 0; max-width: 46rem; }
.faq details { border-top: 1px solid var(--border-strong); }
.faq details:last-child { border-bottom: 1px solid var(--border-strong); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-16); min-height: 3.5rem; padding-block: var(--spacing-16); color: var(--text-strong); font-size: var(--font-size-18); font-weight: var(--weight-announce); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { flex: none; color: var(--acento); font-size: var(--font-size-24); transition: transform var(--dur-state) var(--ease-transform); }
.faq details[open] summary i { transform: rotate(45deg); }
.faq details p { padding-bottom: var(--spacing-20); }