/* =============================================================================
   Design System Tactical Hybrid 2.0 · COMPONENTES (R02-B) — todos com prefixo ac-
   Somente primitivas visuais. Sem lógica comercial: preço, estoque e variações continuam do WooCommerce.
   Fonte: core.css / pages.css do protótipo R02-A homologado.
   ============================================================================= */

/* ---- Botões ---- */
.ac-btn { --bg: var(--ac-graphite-900); --fg: var(--ac-bone-100); --bd: var(--ac-graphite-900); --fill: var(--ac-olive-800);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: var(--ac-btn-h); padding: 0 1.5rem; border: 1.5px solid var(--bd); border-radius: var(--ac-r-pill);
  background: var(--bg); color: var(--fg); font: var(--ac-fw-semibold) var(--ac-fs-sm)/1.1 var(--ac-font); letter-spacing: var(--ac-ls-label); text-transform: uppercase; text-decoration: none; overflow: hidden; isolation: isolate; cursor: pointer;
  transition: background var(--ac-t2) var(--ac-ease), color var(--ac-t2) var(--ac-ease), border-color var(--ac-t2) var(--ac-ease), transform var(--ac-t1) var(--ac-ease), box-shadow var(--ac-t2) var(--ac-ease); }
.ac-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--fill); transform: translateY(101%); transition: transform var(--ac-t3) var(--ac-ease-out); }
.ac-btn:hover::before { transform: none; } .ac-btn:active { transform: scale(.985); }
.ac-btn svg { flex: none; transition: transform var(--ac-t2) var(--ac-ease); } .ac-btn:hover svg.ac-ar { transform: translateX(3px); }
.ac-btn--sand { --bg: var(--ac-sand-500); --fg: var(--ac-graphite-900); --bd: var(--ac-sand-500); --fill: var(--ac-sand-300); }          /* primário sobre fundo escuro */
.ac-btn--line { --bg: transparent; --fg: var(--ac-graphite-900); --bd: var(--ac-graphite-900); --fill: var(--ac-graphite-900); } .ac-btn--line:hover { --fg: var(--ac-bone-100); }
.ac-dark .ac-btn--line, .ac-olive .ac-btn--line { --fg: var(--ac-text-inverse); --bd: rgb(245 243 238 / .5); --fill: var(--ac-bone-100); } .ac-dark .ac-btn--line:hover, .ac-olive .ac-btn--line:hover { --fg: var(--ac-graphite-900); }
.ac-btn--light { --bg: var(--ac-bone-100); --fg: var(--ac-graphite-900); --bd: var(--ac-bone-100); --fill: var(--ac-sand-300); }                  /* claro sobre fundo escuro */
.ac-btn--lg { min-height: var(--ac-btn-h-lg); padding-inline: 2rem; font-size: var(--ac-fs-md); } .ac-btn--sm { min-height: var(--ac-btn-h-sm); padding-inline: 1.1rem; font-size: var(--ac-fs-xs); } .ac-btn--block { width: 100%; }
.ac-btn[aria-disabled="true"], .ac-btn:disabled { --bg: var(--ac-disabled-bg); --fg: var(--ac-disabled-text); --bd: var(--ac-disabled-border); cursor: not-allowed; } .ac-btn[aria-disabled="true"]::before, .ac-btn:disabled::before { display: none; }
.ac-btn.is-busy { color: transparent; pointer-events: none; } .ac-btn.is-busy::after { content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--fg); border-right-color: transparent; animation: ac-spin .75s linear infinite; }
.ac-btn.is-busy svg { opacity: 0; } .ac-btn.is-done { --bg: var(--ac-success); --bd: var(--ac-success); --fg: #fff; } .ac-btn.is-done::before { display: none; }
@keyframes ac-spin { to { transform: rotate(1turn); } }
.ac-iconbtn { display: inline-grid; place-items: center; width: var(--ac-tap); height: var(--ac-tap); border: 0; border-radius: 50%; background: transparent; color: inherit; position: relative; transition: background var(--ac-t2); cursor: pointer; }
.ac-iconbtn:hover { background: rgb(127 127 127 / .16); }

/* ---- Links ---- */
.ac-textlink { display: inline-flex; align-items: center; gap: .45rem; min-height: var(--ac-tap); font-weight: var(--ac-fw-semibold); font-size: var(--ac-fs-sm); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; color: var(--ac-text); background: linear-gradient(currentColor, currentColor) 0 calc(100% - 10px) / 100% 1px no-repeat; transition: background-size var(--ac-t3) var(--ac-ease-out); }
.ac-textlink:hover { background-size: 0 1px; background-position: 100% calc(100% - 10px); } .ac-dark .ac-textlink, .ac-olive .ac-textlink { color: var(--ac-accent); }
.ac-link { color: var(--ac-text); font-weight: var(--ac-fw-medium); text-decoration: underline; text-decoration-color: var(--ac-sand-600); text-decoration-thickness: 2px; } .ac-link:hover { text-decoration-color: var(--ac-text); }
.ac-row > .ac-link { display: inline-flex; align-items: center; min-height: var(--ac-tap); }   /* link isolado: alvo de toque; em frase segue o texto (WCAG 2.5.8) */
.ac-dark .ac-link, .ac-olive .ac-link { color: var(--ac-text-inverse); text-decoration-color: var(--ac-accent); }

/* ---- Superfícies ---- */
.ac-card { position: relative; display: grid; gap: .8rem; align-content: start; } .ac-card > * { min-width: 0; }
.ac-card__stage { position: relative; aspect-ratio: 1 / 1.08; border-radius: var(--ac-r-3); background: var(--ac-stage); overflow: hidden; display: grid; place-items: center; }
.ac-card__stage img { width: 86%; height: 79%; object-fit: contain; filter: var(--ac-shadow-boot); }
.ac-card__stage--dark { background: var(--ac-stage-dark); } .ac-card__stage--dark img { filter: var(--ac-shadow-boot-dark); } .ac-card__stage--olive { background: var(--ac-stage-olive); } .ac-card__stage--olive img { filter: var(--ac-shadow-boot-dark); }
.ac-card__tags { position: absolute; left: .7rem; top: .7rem; z-index: 2; display: flex; gap: .3rem; flex-wrap: wrap; }
.ac-card__brand { font: var(--ac-fw-medium) var(--ac-fs-mono)/1.2 var(--ac-font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ac-accent-strong); }
.ac-card__body { display: grid; gap: .3rem; padding-inline: .15rem; }
.ac-dark .ac-card__brand, .ac-olive .ac-card__brand { color: var(--ac-accent); }
.ac-panel { background: var(--ac-surface); border: 1px solid var(--ac-border); border-radius: var(--ac-r-3); padding: var(--ac-sp-5); }
.ac-panel--dark { background: var(--ac-bg-dark); border-color: var(--ac-border-dark); color: var(--ac-text-inverse); }
.ac-editorial { display: grid; gap: var(--ac-sp-5); padding: var(--ac-sp-6); border-radius: var(--ac-r-4); background: var(--ac-stage-dark); color: var(--ac-text-inverse); overflow: hidden; }
.ac-separator { border: 0; border-top: 1px solid var(--ac-border); margin: 0; } .ac-dark .ac-separator, .ac-olive .ac-separator { border-color: var(--ac-border-dark); }

/* ---- Selos (badges) · rótulos técnicos em mono; sem dados comerciais fictícios ---- */
.ac-tag { display: inline-flex; align-items: center; gap: .35em; height: 24px; padding: 0 .55rem; border-radius: var(--ac-r-pill); font: 600 var(--ac-fs-mono)/1 var(--ac-font-mono); letter-spacing: .1em; text-transform: uppercase; background: var(--ac-bone-200); color: var(--ac-text); white-space: nowrap; }
.ac-tag--sale { background: var(--ac-graphite-900); color: var(--ac-sand-300); }      /* promoção */
.ac-tag--kit { background: var(--ac-olive-800); color: var(--ac-bone-100); }          /* Compra Coletiva */
.ac-tag--new { background: var(--ac-sand-100); color: var(--ac-sand-700); }           /* produto novo */
.ac-tag--feature { background: var(--ac-sand-500); color: var(--ac-graphite-900); }   /* destaque */
.ac-tag--ok { background: var(--ac-success-bg); color: var(--ac-success); }            /* disponível */
.ac-tag--warn { background: var(--ac-warning-bg); color: var(--ac-warning); }          /* poucas unidades / atenção */
.ac-tag--out { background: transparent; color: var(--ac-text-muted); box-shadow: inset 0 0 0 1px var(--ac-border-strong); } /* indisponível */

/* ---- Preço (só apresentação: o valor vem do WooCommerce) ---- */
.ac-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .55rem; font-variant-numeric: tabular-nums; }
.ac-price__now { font-weight: var(--ac-fw-bold); font-size: var(--ac-fs-lg); letter-spacing: -.01em; } .ac-card .ac-price__now { font-size: var(--ac-fs-xl); } .ac-price__was { font-size: var(--ac-fs-sm); color: var(--ac-text-muted); text-decoration: line-through; }
.ac-price__from { width: 100%; font: var(--ac-fw-medium) var(--ac-fs-mono)/1.6 var(--ac-font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ac-text-muted); }
.ac-dark .ac-price__was, .ac-olive .ac-price__was, .ac-dark .ac-price__from, .ac-olive .ac-price__from { color: var(--ac-text-inverse-2); }

/* ---- Formulários (classes para estilização futura dos formulários reais; não substituem os do WooCommerce) ---- */
.ac-field { display: grid; gap: .35rem; } .ac-field > * { min-width: 0; }
.ac-label { font-size: var(--ac-fs-sm); font-weight: var(--ac-fw-medium); } .ac-hint { font-size: var(--ac-fs-xs); color: var(--ac-text-muted); }
.ac-field-error { display: flex; gap: .35rem; align-items: flex-start; font-size: var(--ac-fs-sm); font-weight: var(--ac-fw-medium); color: var(--ac-error); }
/* Controles: seletor com elemento (0,1,1) para vencer, por ordem de carga, as regras globais do F4 (input[type=text]…) sem !important. */
input.ac-input, select.ac-select, textarea.ac-textarea { width: 100%; min-height: var(--ac-field-h); height: auto; padding: 0 1rem; margin: 0; background-color: var(--ac-surface); color: var(--ac-text); border: 1.5px solid var(--ac-border-strong); border-radius: var(--ac-r-2); font: inherit; font-size: var(--ac-fs-md); transition: border-color var(--ac-t1), box-shadow var(--ac-t1); }
textarea.ac-textarea { padding: .8rem 1rem; min-height: 120px; }
select.ac-select { appearance: none; padding-right: 2.8rem; background: var(--ac-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23111820' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 1rem center; }
input.ac-input:hover, select.ac-select:hover { border-color: var(--ac-text-2); }
input.ac-input:focus-visible, select.ac-select:focus-visible, textarea.ac-textarea:focus-visible { outline: none; border-color: var(--ac-graphite-900); box-shadow: 0 0 0 4px rgb(192 164 107 / .45); }
.ac-field.is-invalid input.ac-input, .ac-field.is-invalid select.ac-select, input.ac-input[aria-invalid="true"], select.ac-select[aria-invalid="true"] { border: 1.5px solid var(--ac-error); background-color: #FFFBFA; }
input.ac-input:disabled, select.ac-select:disabled, textarea.ac-textarea:disabled { background-color: var(--ac-disabled-bg); color: var(--ac-disabled-text); border-color: var(--ac-disabled-border); cursor: not-allowed; }
.ac-check { display: inline-flex; gap: .7rem; align-items: center; min-height: var(--ac-tap); cursor: pointer; } .ac-check input { width: 20px; height: 20px; accent-color: var(--ac-graphite-900); margin: 0; }
.ac-check:has(input:disabled) { color: var(--ac-disabled-text); cursor: not-allowed; }

/* ---- Seletor de tamanho (aparência e estados; a fonte de verdade das variações é o WooCommerce) ---- */
.ac-sizes { display: flex; flex-wrap: wrap; gap: .4rem; }
.ac-sz { position: relative; display: inline-grid; place-items: center; min-width: var(--ac-size-chip); height: var(--ac-size-chip); padding: 0 .75rem; border: 1.5px solid var(--ac-border-strong); border-radius: var(--ac-r-2); background: var(--ac-surface); font: var(--ac-fw-medium) var(--ac-fs-md)/1 var(--ac-font); font-variant-numeric: tabular-nums; color: var(--ac-text); cursor: pointer; transition: border-color var(--ac-t1), background var(--ac-t2) var(--ac-ease), color var(--ac-t2), transform var(--ac-t1) var(--ac-ease); }
.ac-sz:hover { border-color: var(--ac-graphite-900); }
.ac-sz[aria-checked="true"], .ac-sz[aria-pressed="true"], .ac-sz.is-selected { background: var(--ac-graphite-900); border-color: var(--ac-graphite-900); color: var(--ac-bone-100); animation: ac-pick var(--ac-t3) var(--ac-ease-out); }
.ac-sz[aria-checked="true"]::after, .ac-sz[aria-pressed="true"]::after, .ac-sz.is-selected::after { content: ""; position: absolute; right: 5px; top: 5px; width: 6px; height: 6px; background: var(--ac-accent); border-radius: 1px; }   /* seleção também por marcador, não só por cor */
.ac-sz[aria-disabled="true"], .ac-sz.is-unavailable { color: var(--ac-disabled-text); border-style: dashed; background: var(--ac-bone-100) linear-gradient(to top right, transparent calc(50% - .75px), var(--ac-border-strong) calc(50% - .75px), var(--ac-border-strong) calc(50% + .75px), transparent calc(50% + .75px)); cursor: not-allowed; }
.ac-sz[aria-disabled="true"]:hover, .ac-sz.is-unavailable:hover { border-color: var(--ac-border-strong); }
@keyframes ac-pick { 0% { transform: scale(.92); } 60% { transform: scale(1.04); } 100% { transform: none; } }
.ac-dark .ac-sz, .ac-olive .ac-sz { background: transparent; color: var(--ac-text-inverse); border-color: rgb(245 243 238 / .32); } .ac-dark .ac-sz:hover, .ac-olive .ac-sz:hover { border-color: var(--ac-text-inverse); }
.ac-dark .ac-sz[aria-checked="true"], .ac-olive .ac-sz[aria-checked="true"] { background: var(--ac-sand-500); border-color: var(--ac-sand-500); color: var(--ac-graphite-900); } .ac-dark .ac-sz[aria-checked="true"]::after, .ac-olive .ac-sz[aria-checked="true"]::after { background: var(--ac-graphite-900); }
.ac-dark .ac-sz[aria-disabled="true"], .ac-olive .ac-sz[aria-disabled="true"] { color: var(--ac-text-inverse-3); border-color: rgb(245 243 238 / .18); background: transparent linear-gradient(to top right, transparent calc(50% - .75px), rgb(245 243 238 / .22) calc(50% - .75px), rgb(245 243 238 / .22) calc(50% + .75px), transparent calc(50% + .75px)); }
.ac-pill { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: 0 1rem; border-radius: var(--ac-r-pill); border: 1.5px solid var(--ac-border-strong); background: var(--ac-surface); font-size: var(--ac-fs-sm); font-weight: var(--ac-fw-medium); text-decoration: none; color: var(--ac-text); cursor: pointer; transition: all var(--ac-t2) var(--ac-ease); }
.ac-pill:hover { border-color: var(--ac-graphite-900); } .ac-pill[aria-pressed="true"], .ac-pill[aria-selected="true"] { background: var(--ac-graphite-900); color: var(--ac-bone-100); border-color: var(--ac-graphite-900); }
.ac-dark .ac-pill, .ac-olive .ac-pill { background: transparent; color: var(--ac-text-inverse); border-color: rgb(245 243 238 / .3); }
.ac-dark .ac-pill[aria-selected="true"], .ac-olive .ac-pill[aria-selected="true"], .ac-dark .ac-pill[aria-pressed="true"], .ac-olive .ac-pill[aria-pressed="true"] { background: var(--ac-bone-100); color: var(--ac-graphite-900); border-color: var(--ac-bone-100); }

/* ---- Navegação e feedback ---- */
.ac-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; list-style: none; font-size: var(--ac-fs-sm); color: var(--ac-text-muted); }
.ac-breadcrumb li + li::before { content: "/"; margin-right: .5rem; color: var(--ac-border-strong); } .ac-breadcrumb a { display: inline-flex; align-items: center; min-height: var(--ac-tap); text-decoration: none; } .ac-breadcrumb a:hover { color: var(--ac-text); text-decoration: underline; }
.ac-breadcrumb [aria-current] { color: var(--ac-text); }
.ac-dots { display: flex; gap: .4rem; align-items: center; } .ac-dot { position: relative; width: 44px; height: 44px; border: 0; background: none; padding: 0; display: grid; place-items: center; cursor: pointer; }
.ac-dot::before { content: ""; width: 18px; height: 3px; border-radius: 2px; background: currentColor; opacity: .3; transition: opacity var(--ac-t2), width var(--ac-t2); } .ac-dot[aria-current="true"]::before, .ac-dot[aria-selected="true"]::before { opacity: 1; width: 28px; background: var(--ac-accent); }
.ac-note { display: flex; gap: .75rem; align-items: flex-start; padding: .9rem 1rem; border-radius: var(--ac-r-2); background: var(--ac-info-bg); font-size: var(--ac-fs-sm); } .ac-note svg { flex: none; margin-top: 2px; } .ac-note strong { display: block; }
.ac-note--ok { background: var(--ac-success-bg); } .ac-note--err { background: var(--ac-error-bg); } .ac-note--err strong { color: var(--ac-error); } .ac-note--warn { background: var(--ac-warning-bg); }
.ac-empty { display: grid; justify-items: center; gap: .75rem; padding: 3rem 1rem; text-align: center; } .ac-empty__ic { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 50%; background: var(--ac-stone); }
.ac-skel { border-radius: var(--ac-r-2); background: linear-gradient(100deg, var(--ac-bone-200) 30%, var(--ac-bone-50) 50%, var(--ac-bone-200) 70%) 0 0 / 300% 100%; animation: ac-shimmer 1.3s linear infinite; } @keyframes ac-shimmer { to { background-position: -150% 0; } }
.ac-bar { height: 3px; border-radius: 3px; background: var(--ac-bone-300); overflow: hidden; } .ac-bar > i { display: block; height: 100%; background: var(--ac-graphite-900); transition: width var(--ac-t3) var(--ac-ease-out); }
.ac-dark .ac-bar, .ac-olive .ac-bar { background: rgb(245 243 238 / .14); } .ac-dark .ac-bar > i, .ac-olive .ac-bar > i { background: var(--ac-accent); }

/* ---- Escala mobile da Home (R02-A · refinamento mobile) — OPT-IN: adicione .ac-scale-mobile ao contêiner da página (ex.: Home na R04).
   Fora dele os componentes seguem a escala base do protótipo (core.css). ---- */
@media (max-width: 699.98px) {
  .ac-scale-mobile { --ac-fs-mono: .75rem; }
  .ac-scale-mobile .ac-btn { font-size: .9375rem; letter-spacing: .06em; } .ac-scale-mobile .ac-btn--lg { min-height: 56px; padding-inline: 1.25rem; }
  .ac-scale-mobile .ac-pill { min-height: 44px; font-size: .9375rem; } .ac-scale-mobile .ac-kicker { letter-spacing: .12em; } .ac-scale-mobile .ac-sizes { gap: .5rem; }
}