/* Root sizing */
:root{
  --ccpuxb-tap-min: 40px; /* min touch target for mobile */
}

/* Swatch button */
.mau_xe_item {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 4px 8px 4px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  outline: none;
}
.mau_xe_item:focus-visible .mau_xe_item_color,
.mau_xe_item:focus-visible .mau_xe_item_img { outline: 2px solid #333; outline-offset: 2px; }

/* Color/gradient icon */
span.mau_xe_item_color {
  width: max(var(--ccpuxb-w, 50px), var(--ccpuxb-tap-min));
  height: max(var(--ccpuxb-h, 30px), calc(var(--ccpuxb-tap-min) - 4px));
  display: block;
  border: 1px solid #ddd;
  border-radius: 6px;
}

/* Image icon 64x64 (fixed) */
.mau_xe_item_img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  display: block;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
}

/* Active state */
.mau_xe_item.is-active .mau_xe_item_color,
.mau_xe_item.is-active .mau_xe_item_img { outline: 2px solid; }

/* List & title */
.devvn_car_list_color { font-size: 0; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.devvn_car_list_color > span, .devvn_car_list_color .mau_xe_item { font-size: 16px; }
.devvn_car_list_color span.mau_xe_title { margin-right: 6px; font-size: 14px; opacity: .9; }

/* Main area */
.mau_xe_main { margin-bottom: 10px !important; }
.ccpuxb-color-name { margin-top: 6px; font-size: 14px; }
.ccpuxb .ccpuxb-swatch-desc { margin-top: 6px; font-size: 14px; color: #444; }

/* Container + layout */
.ccpuxb .ccpuxb-inner { display: flex; align-items: stretch; gap: 12px; }

/* Layout directions */
.ccpuxb.ccpuxb-layout-left  .ccpuxb-inner { flex-direction: row; }
.ccpuxb.ccpuxb-layout-right .ccpuxb-inner { flex-direction: row-reverse; }
.ccpuxb.ccpuxb-layout-top   .ccpuxb-inner { flex-direction: column-reverse; }
.ccpuxb.ccpuxb-layout-bottom .ccpuxb-inner { flex-direction: column; }

/* Alignment of swatch area */
.ccpuxb.ccpuxb-align-left  .devvn_car_list_color { justify-content: flex-start; text-align: left; }
.ccpuxb.ccpuxb-align-center .devvn_car_list_color { justify-content: center; text-align: center; }
.ccpuxb.ccpuxb-align-right .devvn_car_list_color { justify-content: flex-end; text-align: right; }

/* Main image responsive */
.ccpuxb .ccpuxb-main-img {
  display: block;
  height: auto;
  max-width: var(--ccpuxb-car-w, 100%);
  max-height: var(--ccpuxb-car-h, none);
}
.ccpuxb .ccpuxb-caption { margin-top: 8px; font-size: 14px; color: #555; }

/* Shapes */
.ccpuxb .ccpuxb-shape-square .mau_xe_item_color,
.ccpuxb .ccpuxb-shape-square .mau_xe_item_img { border-radius: 0; }
.ccpuxb .ccpuxb-shape-rounded .mau_xe_item_color,
.ccpuxb .ccpuxb-shape-rounded .mau_xe_item_img { border-radius: 8px; }
.ccpuxb .ccpuxb-shape-circle .mau_xe_item_color,
.ccpuxb .ccpuxb-shape-circle .mau_xe_item_img { border-radius: 999px; }

/* Motion reduction */
@media (prefers-reduced-motion: reduce){
  .ccpuxb .ccpuxb-main-img { transition: none !important; animation: none !important; }
}

/* Mobile-first stacking */
@media (max-width: 640px) {
  .ccpuxb .ccpuxb-inner { flex-direction: column !important; gap: 12px; }
  .ccpuxb .devvn_car_list_color { justify-content: center; gap: 10px; }
}