/*
 * Loja (LOJA.md, seção 12): carregado só nas páginas da loja e nas páginas com o bloco "Produtos"
 * (SiteView, extraCss). Usa as mesmas variáveis do site.css (--brand, --ink, --muted, --line...).
 * Cada parte da loja tem a sua seção marcada abaixo; celular primeiro, telas largas no fim de cada seção.
 */

/* ===== Vitrine: /loja, /loja/{categoria}, /produto/{slug} e bloco "Produtos" ===== */

/* Botão de formulário com o mesmo visual do .btn (link) do site. */
button.btn { border: 0; cursor: pointer; font: inherit; font-weight: 600; }

/* Categorias + busca */
.shop-tools { display: grid; gap: 20px; margin-bottom: 28px; }
/* min-width 0: sem isso, a faixa de categorias (que rola de lado) alargaria a coluna da grade e a página. */
.shop-tools > * { min-width: 0; }
/* No celular, as categorias rolam de lado dentro da própria faixa (a página não ganha rolagem horizontal). */
.shop-cats ul {
  list-style: none; margin: 0 -20px; padding: 2px 20px 6px; display: flex; gap: 8px;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin;
}
.shop-cats a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; white-space: nowrap;
  border: 1px solid #cfd5db; border-radius: 999px; color: var(--ink); text-decoration: none; font-weight: 500;
}
.shop-cats a:hover { border-color: var(--brand); color: var(--brand); }
.shop-cats a[aria-current="page"] { background: var(--brand); border-color: var(--brand); color: #fff; }
.shop-search label { display: block; font-weight: 600; margin-bottom: 6px; }
.shop-search-row { display: flex; gap: 8px; }
.shop-search input {
  flex: 1; min-width: 0; min-height: 48px; padding: 0 18px; font: inherit; color: var(--ink);
  background: #fff; border: 1px solid #8a939d; border-radius: 999px;
}
.shop-search .btn { flex-shrink: 0; padding: 0 22px; }

.shop-empty { font-size: 1.125rem; color: var(--muted); margin: 32px 0 8px; }
.shop-empty-link a, .shop-result a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.shop-result { color: var(--muted); margin-bottom: 16px; }

/* Grade de cartões: 2 colunas no celular, 3 no tablet, 4 no computador */
.product-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px;
}
.product-card { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.product-photo {
  position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 12px; background: var(--bg-alt); margin-bottom: 6px;
}
.product-img { width: 100%; height: 100%; object-fit: cover; }
/* Sem foto: a inicial do produto sobre a cor do site (como o ícone da aba). */
.product-initial {
  display: grid; place-items: center; width: 100%; height: 100%;
  background: var(--brand); color: #fff; font: 700 clamp(2.5rem, 12vw, 4rem)/1 var(--f-title), sans-serif;
}
.product-name { font-family: var(--f-text), sans-serif; font-size: 1rem; font-weight: 600; line-height: 1.3; margin: 0; }
.product-name a { color: var(--ink); text-decoration: none; }
/* O link do nome cobre o cartão inteiro (foto e preço também abrem o produto). */
.product-name a::after { content: ""; position: absolute; inset: 0; }
.product-card:hover .product-name a { color: var(--brand); text-decoration: underline; }
.product-name a:focus-visible { outline: none; }
.product-card:has(a:focus-visible) { outline: 3px solid var(--brand); outline-offset: 4px; border-radius: 12px; }
.product-price { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.price-sale s { display: block; color: var(--muted); font-weight: 400; font-size: .875rem; }
.price-sale strong { color: var(--ink); }
.product-card:has(.tag-out) .product-img, .product-card:has(.tag-out) .product-initial { opacity: .55; }
/* Etiquetas sobre a foto (no HTML ficam depois do preço: o leitor de tela lê nome, preço e etiqueta). */
.product-tags { position: absolute; top: 8px; left: 8px; right: 8px; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; }
.tag { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .75rem; font-weight: 700; line-height: 1.4; }
.tag-sale { background: #b42318; color: #fff; }
.tag-out { background: var(--ink); color: #fff; }

/* Paginação: "Anterior" à esquerda, "Próxima" à direita */
.pager { display: flex; gap: 12px; margin-top: 36px; }
.pager a {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px;
  border: 1px solid #cfd5db; border-radius: 999px; color: var(--ink); text-decoration: none; font-weight: 600;
}
.pager a:hover { border-color: var(--brand); color: var(--brand); }
.pager-next { margin-left: auto; }

/* Bloco "Produtos" */
.products-block h2 + .product-grid, .products-block h1 + .product-grid { margin-top: 28px; }
.products-more { margin-top: 32px; text-align: center; }

/* Página do produto */
.product-page { padding-top: clamp(16px, 3vw, 40px); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; margin-bottom: 12px; font-size: .9375rem; color: var(--muted); }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; margin: 0 -8px; } /* alvo ≥ 44 px também em "Loja" */
.shop-notice { margin: 0 0 20px; padding: 12px 16px; border-radius: 12px; background: #e0f2fe; color: #0c4a6e; }
.product-layout { display: grid; gap: 24px; }
.product-gallery { min-width: 0; }
/* Fotos lado a lado; o dedo (ou a miniatura) passa de uma para outra, sempre parando numa foto inteira. */
.gallery-track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  border-radius: var(--radius); background: var(--bg-alt); scrollbar-width: none;
}
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-slide { flex: 0 0 100%; margin: 0; aspect-ratio: 1; scroll-snap-align: start; scroll-margin-top: calc(var(--nav-h) + 8px); }
.gallery-img { width: 100%; height: 100%; object-fit: contain; }
.gallery-thumbs { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.gallery-thumbs a { display: block; width: 64px; height: 64px; overflow: hidden; border: 2px solid var(--line); border-radius: 10px; }
.gallery-thumbs a:hover { border-color: var(--brand); }
.gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.product-photo-big { margin: 0; border-radius: var(--radius); }
.product-photo-big .product-initial { font-size: clamp(4rem, 20vw, 8rem); }
.product-info { min-width: 0; }
.product-info h1 { font-size: clamp(1.75rem, 4.5vw, 2.5rem); margin-bottom: 12px; }
.product-info .product-price { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 20px; font-size: 1.5rem; }
.product-info .price-sale s { display: inline; font-size: 1rem; }
.add-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 28px; }
.qty label { display: block; font-weight: 600; font-size: .9375rem; margin-bottom: 4px; }
.qty input {
  width: 96px; min-height: 48px; padding: 0 12px; font: inherit; color: var(--ink);
  background: #fff; border: 1px solid #8a939d; border-radius: 12px;
}
.add-form .btn { flex: 1 1 200px; }
.sold-out { margin: 0 0 28px; padding: 14px 18px; border-radius: 12px; background: var(--bg-alt); font-weight: 600; }
.product-text { max-width: 640px; }
/*
 * Loja de demonstração: primeira linha da descrição ("Este é um produto teste. Link oficial…") em vermelho.
 * O texto já diz tudo (não depende da cor); fundo próprio para o contraste passar no AA (7:1 ou mais) também
 * quando o navegador escurece a página. Link longo quebra em qualquer ponto; o padding aumenta a área de toque.
 */
.product-demo {
  padding: 10px 14px; border-left: 4px solid #b91c1c; border-radius: 8px;
  background: #fef2f2; color: #991b1b; font-weight: 600; overflow-wrap: anywhere;
}
.product-demo a { color: inherit; padding: 12px 0; }
@media (prefers-color-scheme: dark) {
  .product-demo { background: #450a0a; color: #fecaca; border-left-color: #f87171; }
}

@media (min-width: 761px) {
  .shop-cats ul { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
  .shop-search { max-width: 480px; }
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 20px; }
  .product-name { font-size: 1.0625rem; }
  .product-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
}

@media (min-width: 1025px) {
  .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 24px; }
}

/* ===== fim da vitrine ===== */

/* ===== Seção pedido (P5): /pedido e /pedido/{code} ===== */
.order-lookup, .order-page { max-width: 720px; }
.order-lookup h1, .order-page h1 { font-size: clamp(1.875rem, 5vw, 2.5rem); }
.order-page h2 { font-size: 1.375rem; margin-top: 36px; }

/* Avisos: ícone de texto + cor, nunca só a cor. */
.order-lookup .notice, .order-page .notice {
  margin: 0 0 20px; padding: 12px 16px; border-radius: 10px;
  background: #e0f2fe; color: #0c4a6e; border-left: 4px solid #0369a1;
}
.order-lookup .notice-error, .order-page .notice-error { background: #fef2f2; color: #7f1d1d; border-left-color: #b91c1c; }
.order-lookup .notice-error::before, .order-page .notice-error::before { content: "! "; font-weight: 700; }

/* Formulário de consulta */
.order-lookup .shop-form { display: grid; gap: 18px; margin-top: 24px; }
.order-lookup .field { display: grid; gap: 6px; }
.order-lookup label { font-weight: 600; }
.order-lookup input {
  width: 100%; min-height: 48px; padding: 10px 14px; font: inherit; font-size: 1rem; /* 16 px: o iPhone não dá zoom */
  color: var(--ink); background: #fff; border: 1px solid #8a939c; border-radius: 10px;
}
.order-lookup input:focus-visible { outline: 3px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
.order-lookup input[aria-invalid="true"] { border: 2px solid #b91c1c; }
.order-lookup .field-error { margin: 0; color: #b91c1c; font-size: .9375rem; font-weight: 600; }
.order-lookup .btn, .order-page .btn { border: 0; font: inherit; font-weight: 600; cursor: pointer; }
.order-lookup .btn { justify-self: start; }

/* Página do pedido */
.order-placed {
  display: inline-block; margin: 0 0 12px; padding: 6px 14px; border-radius: 999px;
  background: #dcfce7; color: #14532d; font-weight: 700;
}
.order-placed::before { content: "✓ "; }
.order-date { color: var(--muted); margin-top: -.25em; }
.order-box { margin: 24px 0 0; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-alt); }
.order-status { font-size: 1.125rem; }
.order-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.order-actions form { margin: 0; }
.order-page .btn-secondary { background: #fff; color: var(--brand); box-shadow: inset 0 0 0 2px var(--brand); }
.order-tracking { margin-top: 16px; }
.order-tracking strong { font-variant-numeric: tabular-nums; letter-spacing: .03em; overflow-wrap: anywhere; }

.order-items { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.order-items li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.order-item-name { min-width: 0; }
.order-item-price { flex-shrink: 0; text-align: right; font-variant-numeric: tabular-nums; }
.order-item-price small { display: block; color: var(--muted); font-size: .8125rem; }
.order-totals { margin: 12px 0 0; }
.order-totals div { display: flex; justify-content: space-between; gap: 16px; padding: 4px 0; }
.order-totals dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.order-totals .order-total { font-size: 1.125rem; font-weight: 700; padding-top: 8px; }
.order-address { font-style: normal; line-height: 1.6; }
.order-notes-title { font-size: 1.0625rem; margin: 24px 0 6px; }
.order-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 36px; }
.order-links > a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

/* Celular: botões ocupam a largura toda (alvo grande, nada espremido). */
@media (max-width: 600px) {
  .order-lookup .btn, .order-actions .btn, .order-actions form, .order-links .btn { width: 100%; }
  .order-box { padding: 16px; }
}
/* ===== Fim da seção pedido (P5) ===== */

/* ===== Seção carrinho e checkout (P4): /carrinho e /checkout ===== */
.cart-page h1, .checkout-page h1 { font-size: clamp(1.875rem, 5vw, 2.5rem); }
.cart-page button.btn, .checkout-page button.btn { border: 0; cursor: pointer; font: inherit; font-weight: 600; }
.cart-page .btn-light { background: #fff; color: var(--brand); box-shadow: inset 0 0 0 2px var(--brand); }

/* Avisos: ícone de texto + cor, nunca só a cor. */
.cart-page .shop-alert, .checkout-page .shop-alert {
  margin: 0 0 20px; padding: 12px 16px; border-radius: 10px; font-weight: 600;
  background: #fef2f2; color: #7f1d1d; border-left: 4px solid #b91c1c;
}
.cart-page .shop-alert::before, .checkout-page .shop-alert::before { content: "! "; }
.cart-page .shop-alert:focus, .checkout-page .shop-alert:focus { outline: 3px solid #b91c1c; outline-offset: 2px; }
.cart-page .shop-notices, .checkout-page .shop-notices {
  margin: 0 0 20px; padding: 12px 16px; border-radius: 10px;
  background: #e0f2fe; color: #0c4a6e; border-left: 4px solid #0369a1;
}
.cart-page .shop-notices ul, .checkout-page .shop-notices ul { margin: 0; padding-left: 20px; }
.cart-page .shop-notices p, .checkout-page .shop-notices p { margin: 0; }

/* Carrinho */
.cart-empty { font-size: 1.125rem; margin-bottom: 20px; }
.cart-lines { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
/* Celular: foto | nome e preço, e embaixo quantidade, total e remover. */
.cart-line {
  display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center;
  gap: 8px 14px; padding: 16px 0; border-bottom: 1px solid var(--line);
}
.cart-thumb { grid-row: span 2; align-self: start; display: block; width: 72px; height: 72px; border-radius: 10px; overflow: hidden; background: var(--bg-alt); }
.cart-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-initial { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 1.75rem; font-weight: 700; color: var(--brand); }
.cart-info { grid-column: 2 / 4; min-width: 0; }
.cart-name { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-weight: 600; text-decoration: none; }
.cart-name:hover { color: var(--brand); text-decoration: underline; }
.cart-unit { margin: 0; color: var(--muted); font-size: .9375rem; }
.cart-unit s { color: var(--muted); }
.cart-qty { display: flex; align-items: center; gap: 8px; }
.cart-qty label { font-size: .875rem; color: var(--muted); }
.cart-qty input, .checkout-page input, .checkout-page select, .checkout-page textarea {
  min-height: 48px; padding: 10px 12px; font: inherit; font-size: 1rem; /* 16 px: o iPhone não dá zoom */
  color: var(--ink); background: #fff; border: 1px solid #8a939c; border-radius: 10px;
}
.cart-qty input { width: 76px; }
.cart-line-total { grid-column: 3; margin: 0; font-weight: 700; text-align: right; white-space: nowrap; }
.cart-remove { grid-column: 2 / 4; margin: 0; }
.cart-page .link-btn {
  min-height: 44px; padding: 0 4px; margin-left: -4px; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: .9375rem; color: #b91c1c; text-decoration: underline; text-underline-offset: .15em;
}
.cart-foot { display: grid; gap: 24px; margin-top: 24px; }
.cart-foot > .btn { justify-self: start; }
.cart-checkout { display: grid; gap: 12px; }
.cart-subtotal { display: flex; justify-content: space-between; align-items: baseline; margin: 0; font-size: 1.25rem; }
.cart-hint { margin: 0; color: var(--muted); font-size: .9375rem; }
.cart-go { width: 100%; }
.cart-more { justify-self: center; display: inline-flex; align-items: center; min-height: 44px; }

/* Checkout: uma coluna no celular, resumo recolhível no topo. */
.co-layout { display: grid; gap: 24px; }
.co-summary { min-width: 0; }
.co-details { border: 1px solid var(--line); border-radius: 12px; background: var(--bg-alt); }
.co-details summary {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 52px;
  padding: 10px 16px; cursor: pointer; font-weight: 600; list-style: none;
}
.co-details summary::-webkit-details-marker { display: none; }
.co-summary-title::before { content: "▸ "; color: var(--brand); }
.co-details[open] .co-summary-title::before { content: "▾ "; }
.co-items, .co-totals { margin: 0; padding: 0 16px; }
.co-items { list-style: none; border-top: 1px solid var(--line); padding-top: 12px; }
.co-items li, .co-totals div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
.co-qty { color: var(--muted); white-space: nowrap; }
/* Valores nunca quebram no meio ("R$" de um lado, "79,80" do outro). */
.co-items li > span:last-child, .co-totals dd { white-space: nowrap; }
/* "Resumo do pedido" numa linha; o valor ("R$ 104,80 + entrega") é que quebra, se precisar. */
.co-summary-title { white-space: nowrap; }
/* Sem espaço na linha (320 px, total grande), o valor desce inteiro para a linha de baixo, à direita. */
.co-details summary { flex-wrap: wrap; }
.co-total-short { margin-left: auto; text-align: right; overflow-wrap: normal; }
.co-totals { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 8px; }
.co-totals dt, .co-totals dd { margin: 0; }
.co-totals dd { text-align: right; }
.co-grand { font-weight: 700; font-size: 1.125rem; }
.co-edit { display: inline-flex; align-items: center; min-height: 44px; margin: 4px 16px 8px; }

.co-form { display: grid; gap: 28px; min-width: 0; }
.co-group { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 16px; }
.co-group legend { padding: 0; margin-bottom: 12px; font-family: var(--f-title), sans-serif; font-weight: 700; font-size: 1.25rem; }
.co-address[hidden] { display: none; }
.checkout-page .field { display: grid; gap: 6px; min-width: 0; }
.checkout-page .field label { font-weight: 600; }
.checkout-page input, .checkout-page select, .checkout-page textarea { width: 100%; }
.checkout-page textarea { resize: vertical; min-height: 96px; }
.checkout-page input:focus-visible, .checkout-page select:focus-visible, .checkout-page textarea:focus-visible {
  outline: 3px solid var(--brand); outline-offset: 1px; border-color: var(--brand);
}
.checkout-page [aria-invalid="true"] { border: 2px solid #b91c1c; }
.checkout-page .field-error { margin: 0; color: #b91c1c; font-size: .9375rem; font-weight: 600; }
.checkout-page .field-error::before { content: "! "; content: "! " / ""; } /* o "!" é enfeite: fora da leitura (texto alternativo vazio) */
/* Número e complemento, cidade e estado lado a lado (cabem em 390 px). */
.co-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 12px; align-items: start; }
.co-row-cep { grid-template-columns: minmax(0, 1fr); gap: 4px; }
.co-row-cep .field-cep input { max-width: 200px; }
.co-row .field-state { min-width: 0; }
.co-row:has(.field-state) { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.co-cep-status { margin: 0; font-size: .9375rem; color: #7f1d1d; font-weight: 600; }
.co-cep-status:empty { display: none; }
.co-hint, .co-option-desc, .co-privacy { color: var(--muted); font-size: .9375rem; margin: 0; }

/* Opções de entrega: o cartão inteiro é clicável (o rótulo se estica por cima dele). */
.co-option {
  position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 2px 12px; align-items: center;
  padding: 14px 16px; border: 1px solid #8a939c; border-radius: 12px; background: #fff;
}
.co-option:has(input:checked) { border: 2px solid var(--brand); padding: 13px 15px; }
/* O rádio fica por cima do rótulo esticado (continua clicável e o Playwright consegue marcá-lo). */
.co-option input { position: relative; z-index: 1; width: 22px; height: 22px; min-height: 0; margin: 0; accent-color: var(--brand); }
.co-option label { font-weight: 600; cursor: pointer; }
.co-option label::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.co-option:has(input:focus-visible) { outline: 3px solid var(--brand); outline-offset: 2px; }
.co-option-desc { grid-column: 2; }
.co-delivery[aria-invalid="true"] { border: 0; }
.co-delivery[aria-invalid="true"] .co-option { border-color: #b91c1c; }
.co-pay { margin: 0; }
.co-submit { width: 100%; min-height: 52px; font-size: 1.0625rem; }
.co-submit:disabled { opacity: .7; cursor: wait; }
/* Loja de demonstração: botão final desativado (cinza, sem "esperando") e o aviso logo abaixo. */
.co-submit.is-demo { opacity: 1; cursor: not-allowed; background: #6b7280; filter: none; }
.co-actions { display: grid; gap: 10px; }
.co-demo { margin: 0; color: var(--muted); font-size: .9375rem; }

/* Celular estreito (320 px): rótulo "Quantidade" acima do campo, para o total da linha caber ao lado. */
@media (max-width: 359px) {
  .cart-qty { flex-direction: column; align-items: flex-start; gap: 2px; }
}

@media (min-width: 600px) {
  .cart-line { grid-template-columns: 88px minmax(0, 1fr) auto auto; }
  .cart-thumb { width: 88px; height: 88px; }
  .cart-info { grid-column: 2; }
  .cart-qty { grid-column: 3; }
  .cart-line-total { grid-column: 4; min-width: 100px; }
  .cart-remove { grid-column: 2 / 5; }
  .cart-checkout { justify-self: end; width: min(100%, 380px); }
  .cart-foot { grid-template-columns: 1fr auto; align-items: start; }
}

/* Computador: formulário à esquerda e resumo fixo à direita (o checkout.js abre o resumo). */
@media (min-width: 900px) {
  .co-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; align-items: start; }
  .co-summary { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--nav-h) + 16px); }
  .co-form { grid-column: 1; grid-row: 1; }
  .co-submit { width: auto; justify-self: start; padding: 0 40px; }
}
/* ===== Fim da seção carrinho e checkout (P4) ===== */