/* CreaRock Setups — tarjetas "Arma tu setup".
   Para ajustar colores sin tocar el plugin, redefine las variables en
   Woodmart → Theme Settings → Custom CSS, por ejemplo: .crs-grid{--crs-accent:#00A098} */
.crs-grid{
  --crs-ink:#0B0B0C; --crs-ink-2:#2B2B2E; --crs-muted:#6E6E73;
  --crs-line:#E7E6E1; --crs-line-2:#D9D8D2; --crs-surface:#fff; --crs-sunken:#F2F1ED;
  --crs-accent:#00A098; --crs-accent-ink:#00786F; --crs-accent-soft:#E3F5F3;
  --crs-radius:18px; --crs-cols:3;
  display:grid; gap:16px;
  /* Máximo --crs-cols columnas; baja sola a 2 o 1 según el ancho disponible (mín. 270px por tarjeta). */
  grid-template-columns:repeat(auto-fill,minmax(max(270px,calc((100% - (var(--crs-cols) - 1) * 16px) / var(--crs-cols))),1fr));
}
.crs-card{
  background:var(--crs-surface); border:1px solid var(--crs-line); border-radius:var(--crs-radius);
  padding:20px; display:flex; flex-direction:column; gap:14px; min-width:0;
  transition:border-color .15s, box-shadow .15s;
}
.crs-card:hover{border-color:var(--crs-line-2); box-shadow:0 12px 32px -12px rgba(11,11,12,.22)}
.crs-top{display:flex; justify-content:space-between; align-items:flex-start; gap:10px}
.crs-grid .crs-title{font-size:19px; line-height:1.15; letter-spacing:-.02em; font-weight:700; margin:0; color:var(--crs-ink)}
.crs-lvl{font-size:12px; color:var(--crs-muted); margin-top:4px}
.crs-badge{
  flex:none; display:inline-flex; align-items:center; height:22px; padding:0 8px; border-radius:6px;
  font-size:11px; font-weight:600; white-space:nowrap; background:var(--crs-accent-soft); color:var(--crs-accent-ink);
}
.crs-thumbs{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
.crs-thumbs a{
  aspect-ratio:1/1; border-radius:10px; border:1px solid var(--crs-line); background:#fff;
  display:grid; place-items:center; overflow:hidden;
}
.crs-thumbs a:hover{border-color:var(--crs-ink)}
.crs-thumbs img{width:80%!important; height:80%!important; object-fit:contain; margin:0!important}
.crs-thumbs a.is-out img{opacity:.35; filter:grayscale(1)}
.crs-list{list-style:none; margin:0!important; padding:0!important; font-size:13px; display:grid; gap:5px}
.crs-list li{display:flex; justify-content:space-between; gap:10px; margin:0; min-width:0}
.crs-list li a{color:var(--crs-ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; text-decoration:none}
.crs-list li a:hover{text-decoration:underline}
.crs-list li span{color:var(--crs-muted); white-space:nowrap; font-variant-numeric:tabular-nums}
.crs-list li.is-out a{color:var(--crs-muted); text-decoration:line-through}
.crs-list li.is-out span{color:#C8322B; font-weight:600}
.crs-total{
  display:flex; justify-content:space-between; align-items:flex-end; gap:10px;
  border-top:1px dashed var(--crs-line-2); padding-top:12px; margin-top:auto; font-size:13px; color:var(--crs-muted);
}
.crs-total > span:first-child{display:flex; flex-direction:column; gap:2px; white-space:nowrap}
.crs-save{font-style:normal; font-size:12px; font-weight:600; color:var(--crs-accent-ink)}
.crs-amount{display:flex; flex-direction:column; align-items:flex-end; line-height:1.15}
.crs-amount del{font-size:12px; color:var(--crs-muted)}
.crs-amount b{font-size:20px; font-weight:700; letter-spacing:-.01em; color:var(--crs-ink); font-variant-numeric:tabular-nums}
.crs-amount .woocommerce-Price-amount{color:inherit}
.crs-grid .crs-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:44px; height:auto; padding:10px 18px; line-height:1.2; margin:0;
  border:0; border-radius:8px; background:var(--crs-ink); color:#fff; font:inherit; font-size:14px; font-weight:600;
  text-transform:none; letter-spacing:0; cursor:pointer; transition:background .15s, opacity .15s;
}
.crs-grid .crs-btn:hover{background:#26262a; color:#fff}
.crs-grid .crs-btn:focus-visible{outline:2px solid var(--crs-accent); outline-offset:2px}
.crs-grid .crs-btn[disabled]{opacity:.45; cursor:not-allowed}
.crs-btn span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.crs-btn svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; flex:none}
.crs-btn.is-loading{opacity:.7; pointer-events:none}
.crs-btn.is-loading svg{animation:crs-spin .8s linear infinite}
.crs-btn.is-done{background:var(--crs-accent)}
@keyframes crs-spin{to{transform:rotate(360deg)}}
.crs-msg{font-size:12px; color:var(--crs-muted); min-height:0; text-align:center}
.crs-msg:empty{display:none}
.crs-msg a{font-weight:600; color:var(--crs-accent-ink)}
.crs-msg.is-error{color:#C8322B}

@media (max-width:600px){ .crs-grid{grid-template-columns:1fr} }
/* WooCommerce agrega su propio enlace "Ver carrito" tras el evento added_to_cart; ya lo mostramos en el mensaje. */
.crs-card .added_to_cart{display:none!important}