/* Vitrine do Modo Completo — camada components (kalymnosshop#219, T1). Os .c-* que saíram do app.css, com os MESMOS valores.
   SÓ var(--…): nenhuma cor literal (o teste de contrato confere). O markup é o mesmo para todos os templates; a variação de
   cada template vem da camada "template" e a cor da loja, do /tema.css. */
@layer components {
  .c-head { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; padding: .8rem 1rem; background: var(--card); border-bottom: 1px solid var(--line); }
  .c-brand { display: flex; gap: .5rem; align-items: center; font-weight: 700; color: var(--ink); text-decoration: none; }
  .c-brand .logo { width: 40px; height: 40px; border-radius: var(--r); object-fit: cover; border: 1px solid var(--line); }
  .c-search { flex: 1 1 14rem; }
  .c-search input { width: 100%; }
  .c-cart-link { margin-left: auto; color: var(--ink); font-weight: 600; text-decoration: none; }
  .c-cart-count { display: inline-block; min-width: 1.4em; padding: 0 .35em; border-radius: 999px; background: var(--brand); color: var(--on-brand); text-align: center; font-size: var(--fs-sm); }
  .c-cats { display: flex; gap: .4rem; overflow-x: auto; padding: .6rem 1rem; border-bottom: 1px solid var(--line); }
  .c-cats a { white-space: nowrap; padding: .3rem .8rem; border-radius: 999px; border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
  .c-cats a[aria-current="page"] { border-color: var(--brand); color: var(--brand); font-weight: 600; }
  .c-main { max-width: 1080px; margin: 0 auto; padding: 1rem; }
  .c-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--gap); }
  /* #230: área de destaques na home do catálogo (antes da lista geral); os cards são os mesmos da .c-grid. */
  .c-highlights { margin: 0 0 1.5rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--line); }
  .c-highlights .c-grid + h3, .c-highlights .c-grid + .c-grid { margin-top: 1.6rem; }   /* grupo sem categoria: sem subtítulo, mas separado */
  .c-card a { display: flex; flex-direction: column; gap: .3rem; height: 100%; padding: .6rem; border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; }
  .c-card img, .c-noimg { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r); background: var(--bg); display: block; }
  .c-card.c-out img { opacity: .55; }
  .c-name { font-weight: 600; }
  .c-price { font-weight: 700; color: var(--ink); }
  .c-price small { font-weight: 400; color: var(--muted); margin-right: .2rem; }
  .c-price s { color: var(--muted); font-weight: 400; margin-right: .3rem; }
  .c-price-big { font-size: 1.5rem; }
  .c-product-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
  @media (min-width: 760px) { .c-product-grid { grid-template-columns: 1fr 1fr; } }
  .c-gallery > img { width: 100%; height: auto; border-radius: var(--radius); background: var(--bg); }
  .c-axis { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--gap-sm); }
  .c-axis legend { font-weight: 600; margin-bottom: .3rem; }
  .c-chip { position: relative; }
  .c-chip input { position: absolute; opacity: 0; }
  .c-chip span { display: inline-block; padding: .4rem .9rem; border-radius: 999px; border: 1px solid var(--line); cursor: pointer; }
  .c-chip input:checked + span { border-color: var(--brand); color: var(--brand); font-weight: 600; }
  .c-chip input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
  .c-chip.c-out span { color: var(--muted); text-decoration: line-through; }
  .c-lines { list-style: none; padding: 0; margin: 0 0 1rem; }
  .c-line { display: flex; gap: .7rem; align-items: center; padding: .7rem 0; border-bottom: 1px solid var(--line); }
  .c-line img, .c-line .c-noimg { width: 64px; height: 64px; flex: none; }
  .c-line.c-problem { background: var(--danger-bg); }
  .c-qty { display: flex; gap: .3rem; align-items: center; }
  /* Linha do carrinho no celular (revisão kaly-ux no #223): em linha única o nome quebrava uma palavra por linha e o −/+ cobria a
     variante e o nome. Em grade: miniatura com nome e variante na 1ª linha; quantidade, Remover e total na 2ª. Vale para todos os
     templates (no Botica, desde o #223). */
  @media (max-width: 640px) {
    .c-cart .c-line { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-areas: "img info info" "img qty total"; gap: .5rem .7rem; align-items: center; }
    .c-cart .c-line > img, .c-cart .c-line > .c-noimg { grid-area: img; align-self: start; }
    .c-cart .c-line > .grow { grid-area: info; }
    .c-cart .c-line > .c-qty { grid-area: qty; }
    .c-cart .c-line > strong { grid-area: total; justify-self: end; }
  }
  .c-subtotal, .c-total { text-align: right; font-size: 1.1rem; }
  .c-long, .c-policy { white-space: pre-line; color: var(--ink); }
  /* Capa acima do cabeçalho, de ponta a ponta como a faixa do cabeçalho: sem margem nem canto; width/height no HTML reservam o espaço. */
  .c-cover { width: 100%; max-width: 100%; height: auto; aspect-ratio: 3 / 1; object-fit: cover; display: block; margin: 0; border-radius: 0; background: var(--bg); }
  .c-foot { max-width: 1080px; margin: 2rem auto 0; padding: 1rem; border-top: 1px solid var(--line); }
  .c-foot p { margin: .3rem 0; }
  /* #212: "Meus pedidos" (link no cabeçalho, lista da sessão e do aparelho) */
  .c-head-links { margin-left: auto; display: flex; gap: 1rem; align-items: center; }
  .c-head-links .c-cart-link { margin-left: 0; }
  .c-orders-link { color: var(--ink); font-weight: 600; text-decoration: none; }
  /* Celular: marca e links na primeira linha, busca inteira embaixo (sem o "Carrinho" sozinho numa linha). */
  @media (max-width: 640px) { .c-search { order: 3; flex: 1 1 100%; } }
  /* /catalogo sem a marca. Desktop: busca ocupa o espaço, "Meus pedidos" e "Carrinho" à direita na mesma linha.
     Celular: os dois links ocupam a primeira linha (um em cada ponta, sem buraco à esquerda) e a busca inteira fica embaixo. */
  .c-head-nobrand .c-search { flex: 1 1 auto; min-width: 0; }
  .c-head-nobrand .c-head-links { flex: none; white-space: nowrap; }
  @media (max-width: 640px) {
    .c-head-nobrand .c-search { flex: 1 1 100%; }
    .c-head-nobrand .c-head-links { flex: 1 1 100%; margin-left: 0; justify-content: space-between; }
  }
  .c-mo-list { list-style: none; padding: 0; margin: 0 0 1rem; }
  .c-mo-list a { display: flex; flex-wrap: wrap; gap: .3rem .8rem; align-items: center; padding: .7rem 0; border-bottom: 1px solid var(--line);
    color: var(--ink); text-decoration: none; min-height: var(--tap); }
  .c-mo-list a strong { flex: 1 1 8rem; }
  .c-mo-list .badge:empty { display: none; }

  /* ----- capacidades de template (kalymnosshop#219, T3): blocos e variações GENÉRICAS, com nome de função e não de template.
     Um template liga a capacidade em TemplateSpec.Capabilities; o layout põe uma classe cap-<capacidade> no <html> e os blocos só
     renderizam com ela. Sem capacidade (o Padrão), nada daqui se aplica e o markup é o mesmo. */

  /* benefits-strip: faixa de benefícios com os dados da loja (envio, PIX, trocas, despacho) */
  .c-benefits { list-style: none; margin: 0; padding: var(--gap) 1rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap);
    background: var(--card); border-bottom: 1px solid var(--line); }
  .c-benefits li { display: flex; flex-direction: column; gap: .1rem; padding-left: .7rem; border-left: 3px solid var(--brand); font-size: var(--fs-sm); line-height: 1.3; }
  .c-benefits strong { color: var(--ink); font-weight: 600; }
  .c-benefits span { color: var(--muted); }
  .c-benefits a { color: var(--ink); }
  @media (min-width: 760px) { .c-benefits { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: var(--gap) 1.25rem; } }

  /* photo-contain: foto de produto em 4:5 inteira, sobre o branco do cartão (fotos com fundo branco não ficam cortadas) */
  .cap-photo-contain .c-card img, .cap-photo-contain .c-card .c-noimg { aspect-ratio: 4 / 5; object-fit: contain; padding: 9%;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
  .cap-photo-contain .c-gallery > img { aspect-ratio: 4 / 5; object-fit: contain; background: var(--card); border: 1px solid var(--line); }
  .cap-photo-contain .thumbs img { object-fit: contain; background: var(--card); }

  /* strong-borders: bordas de campo, chip e categoria com --line-strong (componente de interface, 3:1) */
  .cap-strong-borders .c-chip span, .cap-strong-borders .c-cats a, .cap-strong-borders fieldset { border-color: var(--line-strong); }

  /* chip-filled: chip de variante escolhido preenchido e com ✓ (não só a cor da borda) */
  .cap-chip-filled .c-chip span { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 1rem; background: var(--card); }
  .cap-chip-filled .c-chip input:checked + span { background: var(--brand-deep); border-color: var(--brand-deep); color: var(--on-deep); font-weight: 600; }
  .cap-chip-filled .c-chip input:checked + span::before { content: "\2713\00a0"; }

  /* footer-deep: rodapé numa faixa da cor profunda da marca, com o texto claro calculado para ela */
  .cap-footer-deep body.store { padding-bottom: 0; }
  .cap-footer-deep .c-foot { max-width: none; margin: 3rem 0 0; padding: 2rem 1.25rem 1.5rem; border-top: 0; background: var(--brand-deep); color: var(--on-deep); }
  .cap-footer-deep .c-foot a { color: var(--on-deep); }
  .cap-footer-deep .c-foot strong { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 500; }
}