.dc-layout{display:grid;grid-template-columns:1fr 360px;gap:24px;align-items:start}
@media(max-width:980px){.dc-layout{grid-template-columns:1fr}}
.dc-head{display:flex;gap:12px;align-items:center;margin-bottom:14px}
.dc-search{flex:1;padding:12px 14px;border:1px solid #ddd;border-radius:14px;background:#fff}
.dc-counter{padding:12px 14px;border:1px solid #eee;border-radius:14px;background:#fafafa;white-space:nowrap;font-weight:800}

.dc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media(max-width:980px){.dc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.dc-grid{grid-template-columns:1fr}}

.dc-card{border:1px solid #ededed;border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 10px 24px rgba(0,0,0,.04);display:grid;grid-template-rows:auto 1fr}
.dc-card.is-out{opacity:.55}
.dc-img{background:#fff;padding:18px;display:grid;place-items:center}
.dc-img img{width:auto;max-width:100%;max-height:220px;height:auto;object-fit:contain;display:block}
.dc-body{padding:14px 14px 16px;display:grid;gap:10px}
.dc-title{margin:0;font-size:16px;font-weight:900;line-height:1.2}
.dc-meta{display:flex;align-items:center;justify-content:space-between;gap:10px}
.dc-price{font-weight:900;font-size:15px}
.dc-badge{font-size:12px;padding:5px 10px;border-radius:999px;background:#f1f1f1;border:1px solid rgba(0,0,0,.06)}
.dc-badge.dc-low{background:#fff3cd}
.dc-badge.dc-out{background:#f8d7da}
.dc-stock-note{opacity:.65}

.dc-actions{margin-top:2px}
.dc-add,.dc-stepper{width:100%;height:46px;border-radius:10px}
.dc-add{border:1px solid rgba(0,0,0,.12);background:#e7e7e7;color:#222;font-weight:900;cursor:pointer}
.dc-add:disabled{opacity:.5;cursor:not-allowed}
.dc-stepper{border:1px solid rgba(0,0,0,.18);background:#fff;display:none;align-items:center;justify-content:space-between;padding:0 10px;gap:8px}

.dc-qty{width:64px!important;max-width:64px!important;height:40px;border:none!important;background:transparent;text-align:center;font-weight:900;font-size:15px;padding:0!important;outline:none}
.dc-actions[data-state="empty"] .dc-add{display:inline-flex;align-items:center;justify-content:center}
.dc-actions[data-state="empty"] .dc-stepper{display:none}
.dc-actions[data-state="added"] .dc-add{display:none}
.dc-actions[data-state="added"] .dc-stepper{display:flex}

.dc-side{position:sticky;top:18px;border:1px solid #eee;border-radius:18px;background:#fff;overflow:hidden;box-shadow:0 14px 28px rgba(0,0,0,.06)}
.dc-side-top{padding:14px;border-bottom:1px solid #f1f1f1}
.dc-side-title{font-weight:900;margin-bottom:6px}
.dc-side-msg{padding:10px 12px;border-radius:14px;background:#f7f7f7;font-size:13px}
.dc-side-list{padding:14px;display:grid;gap:10px}
.dc-empty{opacity:.75}
.dc-line{border:1px solid #f1f1f1;border-radius:16px;padding:10px;display:grid;gap:8px}
.dc-line-controls{display:flex;gap:8px;align-items:center}
.dc-mini,.dc-remove{border:1px solid #ddd;background:#fff;border-radius:12px;height:34px;padding:0 10px;cursor:pointer}
.dc-mini-qty{min-width:22px;text-align:center;font-weight:900}
.dc-side-bottom{padding:14px;border-top:1px solid #f1f1f1;display:grid;gap:10px}
.dc-totals{display:grid;gap:6px}
.dc-addbox-form{width:100%;height:50px;border-radius:999px;font-weight:900; padding: 0px 15px;}
.dc-small{opacity:.7;padding: 18px; margin-bottom:10px;}

/* ===== SIDEBAR COMPACTO (como el de antes) ===== */

.dc-side-list{
  padding: 14px;
  display: grid;
  gap: 10px;
}

.dc-line{
  border: 1px solid #ececec;
  border-radius: 16px;
  padding: 12px;
  display: grid;
  gap: 10px;
  background: #fff;
}

.dc-line-title{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 15px;
}

.dc-line-title strong{
  font-weight: 900;
  line-height: 1.2;
}

.dc-warn{
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #fff3cd;
  border: 1px solid rgba(0,0,0,.06);
  white-space: nowrap;
}

/* Controles más finos y alineados */
.dc-line-controls{
  display: grid;
  grid-template-columns: 44px 1fr 44px 44px;
  gap: 10px;
  align-items: center;
}

/* el número en el centro, sin “botón” */
.dc-mini-qty{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  border-radius: 12px;
  border: 1px solid #e9e9e9;
  background: #fafafa;
  font-weight: 900;
}

/* botones cuadrados pero pequeños y consistentes */
.dc-mini, .dc-remove{
  height: 44px;
  width: 44px;
  padding: 0 !important;
  border-radius: 12px;
  border: 1px solid #e3e3e3;
  background: #fff;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

.dc-remove{
  background: #fff;
  border-color: #eee;
  opacity: .9;
}

.dc-mini:hover, .dc-remove:hover{
  transform: translateY(-1px);
}

/* Si tu tema fuerza width:100% a buttons, lo neutralizamos */
.dc-side button{
  width: auto !important;
}

/* ===== Header sidebar "TU BOX" como la captura ===== */

.dc-side-top{
  padding: 18px 18px 14px;
  border-bottom: 1px solid #f1f1f1;
}

.dc-side-title{
  font-size: 26px;
  font-weight: 900;
  letter-spacing: .3px;
  margin: 0 0 12px;
}

/* Barra negra gruesa */
.dc-side-top::after{
  content: "";
  display: block;
  height: 14px;
  border-radius: 999px;
  background: #111;
  margin: 8px 0 10px;
}

/* Contador "20/20 snacks" */
.dc-side-top .dc-progress-text,
.dc-side-top .dc-counter-text{
  font-size: 18px;
  opacity: .7;
  margin: 0 0 12px;
}

/* Mensaje/alerta amarillo */
.dc-side-msg{
  margin-top: 10px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #fff3cd;
  border: 1px solid rgba(0,0,0,.06);
  font-size: 15px;
  line-height: 1.35;
  color: #333;
}

/* Cuando sea OK o BAD (si luego quieres colores distintos) */
.dc-side-msg.is-ok{ background:#d1e7dd; }
.dc-side-msg.is-bad{ background:#f8d7da; }

.elementor-widget-woocommerce-product-add-to-cart {
	display: none!important;
} 
.dc-addbox {
	border:1px solid rgba(0,0,0,.12);
	background:#31210E!important;
	color:#fff!important;
	font-weight:900!important;
	cursor:pointer!important
}
.dc-step {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(0,0,0,.14);
    font-size: 20px;
    padding: 0px 15px!important;
    cursor: pointer!important;
}