.fme-cpv { clear: both; margin: 20px 0 30px; }
.fme-cpv-scroll { max-height: 460px; overflow: auto; border: 1px solid #d6d6d6; }
.fme-cpv-table { width: 100%; margin: 0; border-collapse: collapse; font-size: 1.3rem; }
.fme-cpv-table th { position: sticky; top: 0; z-index: 1; padding: 10px 8px; background: #f5f5f5; text-align: left; white-space: nowrap; }
.fme-cpv-table td { padding: 8px; border-top: 1px solid #ececec; vertical-align: middle; }
.fme-cpv-size { font-weight: 600; }
.fme-cpv-sku { color: #666; white-space: nowrap; }
.fme-cpv-swatch { display: inline-block; width: 20px; height: 20px; border: 1px solid #bbb; border-radius: 3px; vertical-align: middle; }
.fme-cpv-color-name { margin-left: 4px; }
.fme-cpv-dot { display: inline-block; width: 10px; height: 10px; margin-right: 5px; border-radius: 50%; }
.fme-cpv-in { background: #2e8b57; }
.fme-cpv-low { background: #e6a700; }
.fme-cpv-out { background: #c0392b; }
.fme-cpv-old { display: block; color: #888; text-decoration: line-through; }
.fme-cpv-now { font-weight: 600; }
.fme-cpv-tier { display: block; color: #1979c3; font-size: 1.1rem; white-space: nowrap; }
.fme-cpv-qty { white-space: nowrap; }
.fme-cpv-qty input[type=number] { width: 52px; height: 30px; padding: 0 4px; text-align: center; }
.fme-cpv-step { width: 26px; height: 30px; padding: 0; line-height: 1; }
.fme-cpv-subtotal { font-weight: 600; white-space: nowrap; }
.fme-cpv-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 16px; padding: 14px 0 0; }
.fme-cpv-reset { margin-right: auto; }
.fme-cpv-colors { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.fme-cpv-colors-label { font-weight: 600; }
.fme-cpv-color { padding: 3px; background: transparent; border: 2px solid transparent; border-radius: 4px; }
.fme-cpv-color.selected { border-color: #1979c3; }
/* Other extensions style every button on the page, so these rules name the grid's own buttons. */
.fme-cpv button.fme-cpv-step { width: 26px !important; height: 30px !important; margin: 0 !important; padding: 0 !important; color: #333 !important; font-size: 1.6rem !important; line-height: 1 !important; vertical-align: middle; background: #f0f0f0 !important; border: 1px solid #ccc !important; border-radius: 3px !important; box-shadow: none !important; }
.fme-cpv button.fme-cpv-step:hover:not(:disabled) { background: #e2e2e2 !important; }
.fme-cpv button.fme-cpv-step:disabled { opacity: .4; }
.fme-cpv .fme-cpv-qty input[type=number] { margin: 0 2px; vertical-align: middle; }
.fme-cpv button.fme-cpv-reset { width: auto !important; margin: 0 auto 0 0 !important; color: #333 !important; background: #f0f0f0 !important; border: 1px solid #ccc !important; }
.fme-cpv button.fme-cpv-reset:hover { background: #e2e2e2 !important; }
.fme-cpv button.fme-cpv-submit { width: auto !important; margin: 0 !important; }
.fme-cpv button.fme-cpv-color { width: auto !important; height: auto !important; margin: 0 !important; padding: 3px !important; background: transparent !important; border: 2px solid transparent !important; box-shadow: none !important; }
.fme-cpv button.fme-cpv-color.selected { border-color: #1979c3 !important; }
@media (min-width: 768px) {
    .fme-cpv-table th, .fme-cpv-table td { padding-right: 5px; padding-left: 5px; }
}
.fme-cpv .fme-cpv-tier { white-space: normal; }
.fme-cpv .fme-cpv-qty input[type=number] { width: 42px; padding: 0 2px; -moz-appearance: textfield; }
.fme-cpv .fme-cpv-qty input[type=number]::-webkit-inner-spin-button, .fme-cpv .fme-cpv-qty input[type=number]::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }
.fme-cpv button.fme-cpv-step { width: 24px !important; }