/* ============================================================================
   Conforta Colchões — Componentes (namespace .cc-*)
   Botões, badges, section-header, category cards, trust bar, simulador CTA,
   skeleton e empty-state. Não conflita com classes legadas. Depende de tokens.css.
   ========================================================================== */

/* ---------------------------------- Botões --------------------------------
   Parte 17 (C3): skins .cc-btn* REMOVIDAS daqui.
   Fonte de verdade: css/tw-src.css → css/tw.css (@layer components).
   Páginas loja linkam tw.css (Parte 5). Não reintroduzir dual skin.
   --------------------------------------------------------------------------- */

/* ---------------------------------- Badges -------------------------------- */
.cc-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: var(--cc-radius-pill);
  font-size: var(--cc-fs-xs); font-weight: 800; letter-spacing: 0.02em;
  background: var(--cc-brand-tint); color: var(--cc-brand-700);
}
.cc-badge--offer   { background: var(--cc-accent-tint);  color: var(--cc-accent-700); }
.cc-badge--trust   { background: var(--cc-success-tint); color: var(--cc-success-700); }
.cc-badge--neutral { background: var(--cc-sand-soft);    color: var(--cc-ink); }

/* ------------------------------ Section header ---------------------------- */
.cc-section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--cc-sp-4); margin-bottom: var(--cc-sp-8); flex-wrap: wrap;
}
.cc-section-head__titles { max-width: 60ch; }
.cc-section-title {
  font-family: var(--cc-font-display); color: var(--cc-ink);
  font-size: var(--cc-fs-xl); font-weight: 600; letter-spacing: var(--cc-tracking-tight);
}
.cc-section-sub { margin-top: 6px; color: var(--cc-muted); font-size: var(--cc-fs-sm); }
.cc-section-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; font-size: var(--cc-fs-sm); color: var(--cc-brand-600);
  transition: gap var(--cc-transition);
}
.cc-section-link:hover { gap: 11px; }

/* ------------------------------ Trust bar --------------------------------- */
.cc-trustbar {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--cc-sp-2);
  background: var(--cc-surface); border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius-lg); padding: var(--cc-sp-4) var(--cc-sp-2);
  box-shadow: var(--cc-shadow-sm);
}
.cc-trustbar__item { display: flex; align-items: center; gap: 10px; padding: 6px 12px; min-width: 0; }
.cc-trustbar__item + .cc-trustbar__item { border-left: 1px solid var(--cc-line-soft); }
.cc-trustbar__icon { flex-shrink: 0; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--cc-brand-tint); color: var(--cc-brand); }
.cc-trustbar__label { display: block; font-weight: 800; color: var(--cc-ink); font-size: var(--cc-fs-sm); line-height: 1.15; }
.cc-trustbar__sub { display: block; font-size: var(--cc-fs-xs); color: var(--cc-muted); }
@media (max-width: 768px) {
  .cc-trustbar { grid-template-columns: 1fr 1fr; }
  .cc-trustbar__item:nth-child(odd) { border-left: 0; }
}

/* ------------------------------ Category cards ---------------------------- */
.cc-cat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--cc-sp-4); }
.cc-cat-card {
  position: relative; display: flex; flex-direction: column; gap: 4px;
  padding: var(--cc-sp-5); min-height: 122px; justify-content: flex-end;
  background: var(--cc-surface); border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius-lg); color: var(--cc-ink);
  box-shadow: var(--cc-shadow-xs);
  transition: transform var(--cc-transition), box-shadow var(--cc-transition), border-color var(--cc-transition);
  overflow: hidden;
}
.cc-cat-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(160deg, var(--cc-sand-soft) 0%, transparent 60%); opacity: 0.7; z-index: 0;
}
.cc-cat-card > * { position: relative; z-index: 1; }
.cc-cat-card:hover { transform: translateY(-4px); box-shadow: var(--cc-shadow); border-color: var(--cc-sand-deep); }
.cc-cat-card__icon { width: 40px; height: 40px; color: var(--cc-brand); margin-bottom: auto; }
.cc-cat-card__name { font-family: var(--cc-font-display); font-weight: 600; font-size: var(--cc-fs-md); letter-spacing: -0.01em; }
.cc-cat-card__hint { font-size: var(--cc-fs-xs); color: var(--cc-muted); font-weight: 600; }
@media (max-width: 1024px) { .cc-cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px)  { .cc-cat-grid { grid-template-columns: 1fr 1fr; } }

/* ------------------------------ Simulador CTA ----------------------------- */
.cc-sim {
  display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: var(--cc-sp-8);
  background: linear-gradient(135deg, var(--cc-brand-800) 0%, var(--cc-brand) 70%);
  border-radius: var(--cc-radius-xl); padding: clamp(24px, 4vw, 48px);
  color: #fff; overflow: hidden; box-shadow: var(--cc-shadow-lg);
}
.cc-sim__eyebrow { color: rgba(255,255,255,0.72); font-weight: 800; letter-spacing: var(--cc-tracking-wide); text-transform: uppercase; font-size: var(--cc-fs-xs); }
.cc-sim h2 { color: #fff; font-size: var(--cc-fs-2xl); margin: 10px 0 12px; }
.cc-sim p { color: rgba(255,255,255,0.88); max-width: 46ch; margin-bottom: var(--cc-sp-6); }
.cc-sim__art { aspect-ratio: 4/3; border-radius: var(--cc-radius-lg); background: rgba(255,255,255,0.08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='0.5' stroke-width='1'%3E%3Cpath d='M3 7l9-4 9 4-9 4-9-4z'/%3E%3Cpath d='M3 7v10l9 4 9-4V7'/%3E%3Cpath d='M12 11v10'/%3E%3C/svg%3E") center/72px no-repeat; border: 1px solid rgba(255,255,255,0.18); }
@media (max-width: 768px) { .cc-sim { grid-template-columns: 1fr; } .cc-sim__art { display: none; } }

/* ------------------------------ Skeleton ---------------------------------- */
.cc-skeleton {
  position: relative; overflow: hidden;
  background: var(--cc-sand-soft); border-radius: var(--cc-radius-sm);
}
.cc-skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.65), transparent);
  transform: translateX(-100%); animation: cc-shimmer 1.4s infinite;
}
@keyframes cc-shimmer { 100% { transform: translateX(100%); } }
.cc-skeleton-card { border: 1px solid var(--cc-line); border-radius: var(--cc-radius); overflow: hidden; background: #fff; }
.cc-skeleton-card .cc-skeleton-img { aspect-ratio: 1/1; border-radius: 0; }
.cc-skeleton-card .cc-skeleton-line { height: 12px; margin: 12px 14px; }
.cc-skeleton-card .cc-skeleton-line.sm { width: 45%; }

/* ------------------------------ Empty state ------------------------------- */
.cc-empty {
  grid-column: 1 / -1; text-align: center; padding: var(--cc-sp-16) var(--cc-sp-4);
  color: var(--cc-muted);
}
.cc-empty__icon { width: 56px; height: 56px; margin: 0 auto var(--cc-sp-4); color: var(--cc-faint); }
.cc-empty__title { font-family: var(--cc-font-display); color: var(--cc-ink); font-size: var(--cc-fs-lg); margin-bottom: 6px; }

/* ============================================================================
   PRODUCT CARD — sistema UNIFICADO (home + catálogo).
   Cobre `div.product-card` (home) e `article.product-card` (catálogo).
   Fonte única de verdade: não redefinir `.product-card` em index.css/produtos.css.
   ========================================================================== */
.product-card {
  position: relative; display: flex; flex-direction: column; min-height: 100%;
  background: var(--cc-surface); border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius-lg); overflow: hidden; box-shadow: var(--cc-shadow-xs);
  transition: transform var(--cc-transition), box-shadow var(--cc-transition), border-color var(--cc-transition);
  cursor: pointer; outline: none;
}
.product-card:hover,
.product-card:focus-visible { transform: translateY(-4px); box-shadow: var(--cc-shadow); border-color: var(--cc-sand-deep); }
.product-card:focus-visible { outline: 3px solid var(--cc-brand-600); outline-offset: 2px; }

.product-card .product-image {
  position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden;
  background: var(--cc-sand-soft);
}
.product-card .product-image img,
.product-card .product-image video { width: 100%; height: 100%; object-fit: cover; transition: transform var(--cc-transition-slow); }
.product-card:hover .product-image img { transform: scale(1.04); }
.product-card .placeholder,
.product-card .placeholder-img { position: absolute; inset: 0; display: grid; place-items: center; color: var(--cc-faint); }

/* Badges (catálogo) + flash de desconto (home) — pílula no topo-esquerdo */
.product-card .product-badges { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; gap: 6px; flex-wrap: wrap; z-index: 2; }
.product-card .product-badge,
.product-card .product-flash {
  display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: var(--cc-radius-pill);
  font-size: var(--cc-fs-xs); font-weight: 800; letter-spacing: 0.02em;
  background: var(--cc-brand); color: #fff;
}
.product-card .product-flash { position: absolute; top: 12px; left: 12px; z-index: 2; background: var(--cc-accent); }
.product-card .product-badge.offer { background: var(--cc-accent); }
.product-card .product-badge.best  { background: var(--cc-sand-deep); color: var(--cc-ink); }
.product-card .product-badge.new   { background: var(--cc-success); }
.product-card .product-badge.delivery { background: var(--cc-success); }

.product-card .product-body { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 16px 16px 18px; }
.product-card .product-category { font-size: var(--cc-fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cc-muted); }
.product-card .product-name {
  font-family: var(--cc-font-display); font-weight: 600; font-size: var(--cc-fs-md); color: var(--cc-ink);
  line-height: 1.25; letter-spacing: -0.01em; margin: 2px 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.product-card .product-desc { font-size: var(--cc-fs-sm); color: var(--cc-muted); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.product-card .product-size,
.product-card .product-price-label { font-size: var(--cc-fs-xs); color: var(--cc-muted); }
.product-card .product-price-label { text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
.product-card .product-old-price { font-size: var(--cc-fs-sm); color: var(--cc-faint); text-decoration: line-through; }
.product-card .product-price { font-family: var(--cc-font-display); font-weight: 600; font-size: var(--cc-fs-lg); color: var(--cc-ink); line-height: 1.1; }
.product-card .product-installment { font-size: var(--cc-fs-xs); color: var(--cc-success-700); font-weight: 700; }
.product-card .product-countdown { font-size: var(--cc-fs-xs); color: var(--cc-accent-700); font-weight: 800; }

/* Ações — home (.product-card-actions) e catálogo (.product-actions).
   Parte 11: CTAs = library .cc-btn* (tw.css). Layout grid full-width. */
.product-card .product-card-actions,
.product-card .product-actions {
  margin-top: auto;
  padding-top: 12px;
  display: grid;
  gap: 8px;
}
.product-card .product-card-actions .cc-btn,
.product-card .product-actions .cc-btn {
  width: 100%;
  box-shadow: none;
}