/* ====== Tokens do Figma ====== */
:root {
  /* Tamanhos base do layout (fluido) */
  --cs-card-w: 363px;    /* largura ideal desktop */
  --cs-card-h: 563px;    /* altura ideal desktop */
  --cs-pad: 24px;

  /* Cores */
  --cs-title: #160D42;
  --cs-price: #9C9B9E;
  --cs-buy-bg: #EFFF56;
  --cs-buy-text: #160D42;

  /* Raios */
  --cs-radius-card: 40px;
  --cs-radius-img: 16px;
  --cs-radius-cta: 48px;

  /* Sombra (X:0 Y:22 Blur:40 Spread:2 Cor:#320D42 @ 8%) */
  --cs-shadow: 0 22px 40px 2px rgba(50, 13, 66, 0.08);
}

/* ====== Card ====== */
ul.products li.product.cs-product-card {
  background: #fff;
  border-radius: var(--cs-radius-card);
  box-shadow: var(--cs-shadow);
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease;
  /* responsivo: ocupa 100% da coluna, mas não passa de 363px */
  width: 100%;
  max-width: var(--cs-card-w);
  /* altura não é fixa pra continuar acessível; se quiser “travar”, use min-height */
  min-height: 0;
}

ul.products li.product.cs-product-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 56px 4px rgba(50, 13, 66, 0.10);
}

/* Imagem */
.cs-card-media {
  position: relative;
  display: block;
  padding: var(--cs-pad) var(--cs-pad) 0; /* 24px laterais e top */
  background: #fff;
  margin-bottom: 24px; /* gap imagem → título = 24px */
}

.cs-card-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--cs-radius-img);
}

/* Badges (se usar) */
.cs-badge {
  position: absolute;
  top: calc(var(--cs-pad) + 8px);
  right: calc(var(--cs-pad) + 8px);
  font-size: 12px;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  letter-spacing: .04em;
}

/* Body */
.cs-card-body {
  padding: 0 var(--cs-pad) var(--cs-pad);
  font-family: 'Anton', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Título (Anton 32, cor #160D42) */
.cs-title {
  margin: 0 0 8px 0;                  /* gap título → preço = 8px */
  font-size: clamp(22px, 4.2vw, 32px);
  line-height: 1.05;
  font-weight: 400;                   /* Anton não usa 700 */
  text-transform: none;               /* deixe como no Figma */
  color: var(--cs-title);
}

.cs-title a {
  color: inherit;
  text-decoration: none;
}

/* Preço (Anton 24, #9C9B9E) */
.cs-price {
  margin: 0 0 24px 0;                 /* gap preço → CTA = 24px */
}

.cs-price .price {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: inherit;
  font-size: clamp(16px, 3.2vw, 24px);
  font-weight: 400;
  color: var(--cs-price);
}

/* Woo já imprime <del> e <ins> quando há promoção */
.cs-price del { opacity: .8; }
.cs-price ins {
  text-decoration: none;
  color: var(--cs-title);             /* se quiser promo em outra cor, troque aqui */
}

/* CTA (Anton 18, #160D42 em bg #EFFF56) */
.cs-footer .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;                        /* 315px quando card = 363px com padding 24 */
  height: 59px;
  border-radius: var(--cs-radius-cta);
  background: var(--cs-buy-bg);
  color: var(--cs-buy-text);
  font-family: 'Anton', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: clamp(16px, 2.8vw, 18px);
  font-weight: 400;
  letter-spacing: .02em;
  text-transform: none;
  transition: transform .15s ease, filter .15s ease;
  border: none;
}

.cs-footer .button:hover { transform: translateY(-1px); filter: brightness(.97); }

/* ====== Responsividade fina ====== */
@media (max-width: 768px) {
  /* mantém proporções; só reduz tipografia automaticamente via clamp */
  ul.products li.product.cs-product-card { max-width: 100%; }
  .cs-card-media { padding: 20px 20px 0; margin-bottom: 20px; }
  .cs-card-body { padding: 0 20px 20px; }
}

@media (max-width: 480px) {
  .cs-card-media { padding: 16px 16px 0; margin-bottom: 16px; }
  .cs-card-body { padding: 0 16px 16px; }
  .cs-footer .button { height: 54px; }
}