/* Cherokee Disc Bag Builder - responsive & image fixes */
:root {
  --cdbg-gap: 16px;
  --cdbg-card-radius: 14px;
}

.cdbg-app { max-width: 1200px; margin: 0 auto; padding: 12px; }
.cdbg-header h2 { margin: 0 0 6px; }
.cdbg-sub { margin: 0 0 16px; color: #667; }

.cdbg-layout { display: grid; grid-template-columns: 2fr 1fr; gap: var(--cdbg-gap); }

.cdbg-controls { display: grid; gap: 8px; margin-bottom: 10px; }
.cdbg-filters { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; }
.cdbg-filters label { font-size: 12px; display: grid; gap: 4px; }

.cdbg-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--cdbg-gap); }
.cdbg-card { border: 1px solid #e5e7eb; border-radius: var(--cdbg-card-radius); padding: 10px; background: #fff; display: grid; gap: 8px; }
.cdbg-card h4 { margin: 0; font-size: 16px; }
.cdbg-meta { font-size: 12px; color: #555; }

.cdbg-imgwrap { width: 100%; aspect-ratio: 1.3 / 1; overflow: hidden; border-radius: 10px; background: #f6f7f8; display: grid; place-items: center; }
.cdbg-imgwrap img { width: 100%; height: 100%; object-fit: contain; }

.cdbg-actions { display: flex; gap: 8px; }
.cdbg-btn { cursor: pointer; padding: 8px 10px; border-radius: 10px; border: 1px solid #d1d5db; background: #f9fafb; }
.cdbg-btn:hover { background: #eef2ff; }

.cdbg-bag { border: 1px solid #e5e7eb; border-radius: var(--cdbg-card-radius); padding: 12px; background: #fff; display: grid; gap: 12px; height: fit-content; }
.cdbg-bag-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.cdbg-bag-item { display: grid; grid-template-columns: 48px 1fr auto; gap: 10px; align-items: center; }
.cdbg-bag-item img { width: 48px; height: 48px; object-fit: contain; border-radius: 6px; }

.cdbg-tag { font-size: 11px; padding: 2px 6px; background:#eef2ff; border-radius: 999px; border:1px solid #c7d2fe; }

.cdbg-summary, .cdbg-suggestions { border-top: 1px dashed #e5e7eb; padding-top: 8px; }

/* Responsiveness */
@media (max-width: 1024px) {
  .cdbg-layout { grid-template-columns: 1fr; }
  .cdbg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .cdbg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cdbg-filters { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 480px) {
  .cdbg-grid { grid-template-columns: 1fr; }
}

/* Global image warp fix (safe) */
img, .wp-block-image img, .elementor img {
  max-width: 100%;
  height: auto;
}

/* Background image helpers */
.cdbg-bg-cover { background-size: cover; background-position: center; }
.cdbg-bg-contain { background-size: contain; background-position: center; background-repeat: no-repeat; }


/* Inline SVG minis and overlay */
.cdbg-mini-svg svg { display:block; width:80px; height:48px; }
.cdbg-overlay { display:grid; gap:8px; }
.cdbg-overlay-header { display:flex; align-items:center; justify-content:space-between; }
.cdbg-overlay-title { font-weight:600; }
.cdbg-toggle { display:flex; align-items:center; gap:6px; font-size:12px; }
.cdbg-overlay-canvas { border:1px dashed #e5e7eb; border-radius:10px; padding:6px; background:#fff; overflow:auto; }

/* Safety: images never warp */
img, .wp-block-image img, .elementor img { max-width:100%; height:auto; object-fit:contain; }


/* Status + Suggest */
#cdbg-app-status { margin-top: 6px; }
.cdbg-suggest { border:1px solid #e5e7eb; border-radius:10px; background:#fff; margin-top:6px; max-height:240px; overflow:auto; box-shadow:0 4px 20px rgba(0,0,0,0.06); }
.cdbg-sugg-item { padding:8px 10px; cursor:pointer; }
.cdbg-sugg-item:hover, .cdbg-sugg-item.active { background:#eef2ff; }