.ecc-customizer {
  --ecc-ink: #10151f;
  --ecc-muted: #697386;
  --ecc-red: #b70f1b;
  --ecc-line: #dfe3e8;
  margin: 24px 0;
  padding: 22px;
  color: var(--ecc-ink);
  background: #fff;
  border: 1px solid var(--ecc-line);
  border-radius: 14px;
  box-shadow: 0 12px 35px rgba(16, 21, 31, .08);
}

.ecc-customizer__heading { margin-bottom: 18px; }
.ecc-customizer__heading h3 { margin: 3px 0 6px; font-size: clamp(20px, 2vw, 26px); }
.ecc-customizer__heading p { margin: 0; color: var(--ecc-muted); font-size: 14px; }
.ecc-customizer__eyebrow { color: var(--ecc-red); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.ecc-customizer__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.ecc-field { display: flex; flex-direction: column; gap: 7px; margin: 0; font-size: 13px; font-weight: 700; }
.ecc-field abbr { color: var(--ecc-red); text-decoration: none; }
.ecc-field input[type="text"] { width: 100%; min-height: 46px; margin: 0; padding: 10px 13px; color: var(--ecc-ink); background: #f8f9fb; border: 1px solid var(--ecc-line); border-radius: 8px; box-shadow: none; }
.ecc-field input[type="text"]:focus { outline: 2px solid rgba(183, 15, 27, .18); border-color: var(--ecc-red); }
.ecc-field--wide { grid-column: 1 / -1; }
.ecc-upload { position: relative; }
.ecc-upload__input { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.ecc-upload__dropzone { display: flex; align-items: center; gap: 14px; min-height: 92px; padding: 14px; cursor: pointer; background: #f8f9fb; border: 1px dashed #bac2ce; border-radius: 10px; transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.ecc-upload__dropzone:hover { background: #fff7f7; border-color: var(--ecc-red); transform: translateY(-1px); }
.ecc-upload__icon { display: grid; flex: 0 0 42px; width: 42px; height: 42px; place-items: center; color: #fff; background: var(--ecc-red); border-radius: 50%; font-size: 24px; line-height: 1; }
.ecc-upload__copy { display: flex; min-width: 0; flex-direction: column; }
.ecc-upload__copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ecc-upload__copy small { margin-top: 3px; color: var(--ecc-muted); font-weight: 400; }
.ecc-upload__preview { order: -1; width: 64px; height: 64px; object-fit: cover; border-radius: 8px; }
.ecc-upload__dropzone.has-image .ecc-upload__icon { display: none; }
.ecc-cart-photo { display: inline-flex; align-items: center; gap: 8px; }
.ecc-cart-photo img { width: 44px; height: 44px; object-fit: cover; border-radius: 5px; }

@media (max-width: 560px) {
  .ecc-customizer { padding: 17px; }
  .ecc-customizer__grid { grid-template-columns: 1fr; }
  .ecc-field--wide { grid-column: auto; }
}