/* Custom Product Display v3.4.9 - fixed layout */
.cpd-wrapper { margin: 20px 0; padding: 12px; border: 1px solid #e6e6e6; background: #fff; box-sizing: border-box; }
.cpd-layout { display: flex; gap: 20px; align-items: stretch; flex-wrap: nowrap; }

/* Left column: ensure image + meta sit horizontally, centred vertically */
.cpd-left { flex: 0 0 40%; min-width: 260px; display: flex; align-items: center; justify-content: center; }
.cpd-left-inner { display: flex; flex-direction: row; align-items: center; gap: 18px; }

/* image */
.cpd-image-wrap { flex: 0 0 auto; }
.cpd-img { width: 160px; height: auto; border: 1px solid #ddd; border-radius: 6px; display: block; background: #fafafa; }

/* meta (right of image) */
.cpd-meta { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 8px; min-width: 120px; }

/* price */
.cpd-price-text { font-size: 16px; font-weight: 700; color: #222; }
.cpd-price-disabled, .cpd-price-disabled { color: #888; font-style: italic; }

/* buttons stacked vertically */
.cpd-buttons-wrap { display: flex; flex-direction: column; gap: 8px; width: 100%; }

/* button base */
.cpd-btn { display: inline-block; padding: 10px 16px; border-radius: 999px; font-weight: 700; text-transform: uppercase !important; cursor: pointer; border: none; text-align: center; box-sizing: border-box; }

/* specific colors (use !important to override theme) */
.cpd-btn.cpd-add-to-cart { background-color: #8bc34a !important; color: #fff !important; }
.cpd-btn.cpd-buy-now { background-color: #0073aa !important; color: #fff !important; }

/* added / loading states */
.cpd-btn.cpd-loading { opacity: 0.7; pointer-events: none; }
.cpd-btn.cpd-added { background-color: #c8e6c9 !important; color: #2e7d32 !important; pointer-events: none; }

/* unavailable */
.cpd-unavailable { opacity: 0.6; color: #666; font-weight: 600; }

/* right column (description) */
.cpd-right { flex: 1 1 auto; min-width: 260px; }
.cpd-title { font-size: 18px; margin: 0 0 8px 0; color: #111; }
.cpd-description { color: #333; font-size: 15px; line-height: 1.6; }
.cpd-description a { color: #0073aa; text-decoration: underline; }

/* Responsive: when narrow, stack into single column */
@media (max-width: 700px) {
  .cpd-layout { flex-direction: column; gap: 12px; }
  .cpd-left { width: 100%; min-width: 0; }
  .cpd-right { width: 100%; }
}