/* Template "Botica" da vitrine do Modo Completo (kalymnosshop#219, T3), dos mockups de sites/flor-design (00-indice.html,
   "Template e cor da loja"). Camada "template": SÓ os valores dos tokens do contrato (KalShop.Web.Infra.StoreTokens) e o mínimo
   de regras de componente que a variação exige. Nenhuma tela duplicada: o markup é o mesmo do Padrão. Os tokens de marca
   (--brand e derivados) vêm do /tema.css, calculados no servidor com os pares de contraste deste template.
   Fontes servidas pela própria loja (CSP font-src 'self'; nada do Google Fonts), subconjunto latino, licença SIL OFL
   (assets/fonts/<família>/OFL.txt). Cor literal só no bloco :root de tokens; nas regras, só var(--…). */

@font-face { font-family: "Jost"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/jost/jost-400.woff2?v=1") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/jost/jost-500.woff2?v=1") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/jost/jost-600.woff2?v=1") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/cormorant-garamond/cormorant-garamond-500.woff2?v=1") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500; font-display: swap; src: url("/assets/fonts/cormorant-garamond/cormorant-garamond-500-italic.woff2?v=1") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/cormorant-garamond/cormorant-garamond-600.woff2?v=1") format("woff2"); }

@layer template {
  :root {
    /* Neutros quentes (não mudam com a marca). --muted é o "cocoa" do kaly-ux: o único secundário que passa também sobre o nude
       (5,74:1); o "muted" #7A6A62 dos mockups falha no nude (4,13:1) e por isso não entra. --surface-2 é o nude da logo e da capa;
       --bg, o areia da página; --line-strong passa 3:1 como borda de campo e de chip (3,47 no branco, 3,26 no areia). */
    --ink: #2B211D; --muted: #6B5249; --line: #E8DDD4; --line-strong: #9C8579; --bg: #FBF7F3; --card: #FFFFFF; --surface-2: #EFE4DC;
    /* Estados: do template, nunca da cor da loja. */
    --ok: #2F6B45; --ok-bg: #E6F1E9; --warn: #8A5300; --warn-bg: #FFF3DF; --danger: #A3231B; --danger-bg: #FCEBE9; --focus: #8C0080;
    /* Tipo: Cormorant só a partir de 1,3 rem (olho pequeno); texto, botões e campos em Jost. */
    --font-sans: "Jost", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --fs-sm: .875rem; --fs-h1: 2.05rem; --fs-h2: 1.65rem; --fs-h3: 1.05rem; --lh-base: 1.55;
    /* Forma */
    --r-sm: 8px; --r: 14px; --r-lg: 22px; --radius: var(--r-lg);
    --shadow: 0 1px 2px rgba(60,30,20,.05), 0 10px 24px -14px rgba(60,30,20,.30);
    --wrap: 1200px; --gap-sm: .5rem; --gap: 1.1rem; --tap: 48px;
  }

  /* ----- tipografia e cor de texto (as regras de componente que a variação exige) */
  :root { font-size: 16px; }
  /* Algarismos alinhados: os da Cormorant são de estilo antigo, e "#V001" ou "R$ 49,90" ficariam "#Vooı" e "R$ 49,9o". */
  h1, h2 { font-family: var(--font-serif); font-weight: 600; color: var(--brand-deep); line-height: 1.12; letter-spacing: .003em; font-variant-numeric: lining-nums; }
  /* Sem regra em "a": esta camada vence a de componentes, e um "a" daqui recoloriria o cartão, o cabeçalho e o rodapé. O link
     solto segue na cor da loja (--brand, par "--brand sobre --card"). */
  :focus-visible { outline-color: var(--brand-strong); }

  /* ----- botões em pílula; o principal escurece no hover */
  .btn { border-radius: 999px; border-width: 1.5px; font-weight: 500; letter-spacing: .01em; }
  .btn.primary:hover { background: var(--brand-strong); border-color: var(--brand-strong); }

  /* ----- faixa de aviso e cabeçalho no nude, como a logo */
  .announce { background: var(--brand-deep); color: var(--on-deep); font-weight: 500; letter-spacing: .08em; }
  .c-head { background: var(--surface-2); border-bottom-color: var(--line); }
  .c-brand { color: var(--brand-deep); }
  .c-brand span { font-family: var(--font-serif); font-size: 1.45rem; font-weight: 600; line-height: 1; }
  .c-brand .logo { border-radius: 50%; border: 0; }
  .c-search input { border-radius: 999px; border-width: 1.5px; }
  .c-cats { background: var(--bg); }
  .c-cats a { background: var(--card); }
  .c-cats a[aria-current="page"] { background: var(--brand-deep); border-color: var(--brand-deep); color: var(--on-deep); }

  /* ----- grade e cartão de produto: 2 colunas no celular, 4 no desktop, sem a sombra do cartão (a foto tem moldura própria) */
  .c-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem .8rem; }
  @media (min-width: 760px) { .c-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem 1.4rem; } }
  .c-card a { box-shadow: none; padding: 0; background: transparent; }
  .c-price-big { font-family: var(--font-serif); font-size: 1.9rem; color: var(--brand-deep); font-variant-numeric: lining-nums; }
  /* Esgotado (revisão kaly-ux no #223, item 3): selo compacto, não uma barra da largura do cartão; foto e preço esmaecidos. */
  .c-card .badge { align-self: flex-start; }
  .c-card.c-out img { opacity: .45; filter: grayscale(.6); }
  .c-card.c-out .c-price { color: var(--muted); font-weight: 500; }

  /* ----- página de ponta a ponta (revisão kaly-ux no #223, item 2): faixa de aviso, cabeçalho, categorias, benefícios e rodapé
     ocupam a largura toda; o conteúdo de todas as faixas e o do <main> ficam na mesma coluna de --wrap, alinhados. */
  body.store { max-width: none; }
  .c-head, .c-cats, .c-benefits, .c-foot { padding-left: max(1rem, calc((100% - var(--wrap)) / 2 + 1rem)); padding-right: max(1rem, calc((100% - var(--wrap)) / 2 + 1rem)); }
  .c-main { max-width: var(--wrap); }
  /* A capa fica no tamanho da arte (3:1 em até --wrap) e o resto da faixa, no nude da logo. */
  .c-cover { max-width: var(--wrap); margin-left: auto; margin-right: auto; box-shadow: 0 0 0 100vmax var(--surface-2); clip-path: inset(0 -100vmax); }
}