/* SDFood — layout compacto e minimalista (mobile lojista, somente Beleza / Acessórios / Cards).
   Escopo: body.sd-retail[data-device="mobile"]. Bordas finas, sem sombras, sem roxo ao tocar. */

html body.sd-retail[data-device="mobile"] {
  --cx-line: #e6e3ea;
  --cx-soft: #f7f6f9;
  --cx-ink: #1f1a26;
  --cx-mute: #6f6878;
  --cx-r: 10px;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- Remover roxo ao clicar / foco ---------- */
html body.sd-retail[data-device="mobile"] * { -webkit-tap-highlight-color: transparent !important; }

html body.sd-retail[data-device="mobile"] nav .active,
html body.sd-retail[data-device="mobile"] nav .is-active,
html body.sd-retail[data-device="mobile"] nav [aria-current] {
  background: var(--cx-soft) !important;
  font-weight: 650 !important;
}
html body.sd-retail[data-device="mobile"] nav .active svg,
html body.sd-retail[data-device="mobile"] nav .is-active svg { stroke: currentColor; }
html body.sd-retail[data-device="mobile"] input:focus,
html body.sd-retail[data-device="mobile"] select:focus,
html body.sd-retail[data-device="mobile"] textarea:focus {
  border-color: #b9b4c0 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* ---------- Abas: cartões com borda, sem sombra, menos espaço ---------- */
html body.sd-retail[data-device="mobile"] main section,
html body.sd-retail[data-device="mobile"] [class*="card"]:not(input):not(label),
html body.sd-retail[data-device="mobile"] [class*="-panel"],
html body.sd-retail[data-device="mobile"] [class*="-box"] {
  box-shadow: none !important;
}
html body.sd-retail[data-device="mobile"] [class*="card"]:not(input):not(label):not(.settings-card),
html body.sd-retail[data-device="mobile"] .coupon-admin-list-wrap {
  border: 1px solid var(--cx-line) !important;
  border-radius: var(--cx-r) !important;
}
html body.sd-retail[data-device="mobile"] [class*="card"] [class*="card"] { border: 0 !important; }

html body.sd-retail[data-device="mobile"] .seller-settings-eyebrow,
html body.sd-retail[data-device="mobile"] [class*="eyebrow"] {
  margin: 0 0 2px !important;
  font-size: 10.5px !important;
  letter-spacing: .08em !important;
}
html body.sd-retail[data-device="mobile"] main h1 { margin: 0 !important; font-size: 22px !important; line-height: 1.15 !important; }
html body.sd-retail[data-device="mobile"] main h1 + p { margin: 2px 0 0 !important; font-size: 12.5px !important; line-height: 1.35 !important; }

/* Cupons: cabeçalho quebrado (texto vertical) */
html body.sd-retail[data-device="mobile"] .seller-coupons-mobile-head {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 10px !important;
  height: auto !important;
}
html body.sd-retail[data-device="mobile"] .seller-coupons-mobile-head > div { width: 100% !important; min-width: 0 !important; }
html body.sd-retail[data-device="mobile"] .seller-coupons-mobile-head h1 { font-size: 22px !important; writing-mode: horizontal-tb !important; }
html body.sd-retail[data-device="mobile"] .coupon-mobile-list,
html body.sd-retail[data-device="mobile"] .coupon-admin-list { gap: 8px !important; }
html body.sd-retail[data-device="mobile"] .seller-coupons-empty,
html body.sd-retail[data-device="mobile"] .coupon-admin-list-wrap { padding: 12px !important; min-height: 0 !important; margin: 10px 0 0 !important; }

/* Promoções: cartões de criar cupom sem altura vazia */
html body.sd-retail[data-device="mobile"] main button[class*="coupon"],
html body.sd-retail[data-device="mobile"] main a[class*="coupon"] {
  min-height: 0 !important;
  height: auto !important;
  padding: 12px 14px !important;
}

/* ---------- Criar / editar produto ---------- */
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .drawer-head {
  padding: 10px 14px !important;
  min-height: 0 !important;
  border-bottom: 1px solid var(--cx-line) !important;
  box-shadow: none !important;
}
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-modal-icon { width: 32px !important; height: 32px !important; border-radius: 8px !important; }
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-modal-copy h2 { font-size: 16px !important; margin: 0 !important; }
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-modal-sub { font-size: 11.5px !important; margin: 0 !important; }
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay #closeDrawer { width: 32px !important; height: 32px !important; box-shadow: none !important; }

html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-launch-form.product-editor-form {
  padding: 10px 12px 0 !important;
}
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-launch-form .sd-tab-panel {
  display: grid !important;
  gap: 10px !important;
  padding: 0 !important;
}
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-launch-form .field { margin: 0 !important; min-width: 0 !important; }
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-launch-form label:not(.sd-switch):not(.check-row) {
  margin: 0 0 4px !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
  color: var(--cx-ink) !important;
}
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-launch-form input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-launch-form select {
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 10px !important;
  font-size: 13.5px !important;
  border: 1px solid var(--cx-line) !important;
  border-radius: 8px !important;
  background-color: #fff !important;
  box-shadow: none !important;
}
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-launch-form textarea {
  min-height: 60px !important;
  height: 60px !important;
  padding: 8px 10px !important;
  font-size: 13.5px !important;
  border: 1px solid var(--cx-line) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-launch-form .map-help,
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-launch-form small {
  display: block !important;
  margin: 3px 0 0 !important;
  font-size: 10.5px !important;
  line-height: 1.3 !important;
  color: var(--cx-mute) !important;
}
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-launch-form .sd-char-count { text-align: right !important; margin-top: 2px !important; }

/* Grades em 2 colunas onde cabe */
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-launch-form .two-col,
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-launch-form .seller-encomenda-fields {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 8px !important;
  align-items: start !important;
}
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-launch-form .sd-two:not(.seller-encomenda-fields) { gap: 10px !important; }
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-launch-form .section-create-row {
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 6px !important;
  margin-top: -4px !important;
}
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay #addProductSection {
  height: 38px !important;
  padding: 0 12px !important;
  border: 1px solid var(--cx-line) !important;
  background: var(--cx-soft) !important;
  color: var(--cx-ink) !important;
  box-shadow: none !important;
}

/* Preço + disponível na mesma linha */
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-launch-form .sd-price-avail {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
  gap: 10px !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-launch-form .sd-price-input {
  height: 38px !important;
  min-height: 38px !important;
  border: 1px solid var(--cx-line) !important;
  border-radius: 8px !important;
  background: #fff !important;
}
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-launch-form .sd-price-input input { border: 0 !important; height: 36px !important; min-height: 36px !important; }
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-launch-form .sd-switch-field {
  height: 38px !important;
  min-height: 38px !important;
  gap: 8px !important;
  padding: 0 10px !important;
  border: 1px solid var(--cx-line) !important;
  border-radius: 8px !important;
  font-size: 12.5px !important;
}

/* Blocos com borda: foto, status, cores */
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-launch-form .product-inline-photo,
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-launch-form .product-promo-status,
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-launch-form .sd-beauty-options-editor,
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-launch-form .product-addons-block {
  margin: 0 !important;
  padding: 10px !important;
  border: 1px solid var(--cx-line) !important;
  border-radius: var(--cx-r) !important;
  background: #fff !important;
  box-shadow: none !important;
}
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-launch-form .form-section-heading,
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-launch-form .settings-title {
  min-height: 0 !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: var(--cx-ink) !important;
}
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-launch-form .form-section-heading::before,
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-launch-form .settings-title::before { display: none !important; }

html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-launch-form .sd-dropzone {
  min-height: 0 !important;
  padding: 8px 10px !important;
  border: 1px dashed #d4d0da !important;
  border-radius: 8px !important;
  background: var(--cx-soft) !important;
}
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-launch-form .sd-dropzone-inner {
  min-height: 0 !important;
  padding: 0 !important;
  gap: 8px !important;
  font-size: 11.5px !important;
  line-height: 1.3 !important;
  align-items: center !important;
}
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-launch-form .sd-dropzone-inner * { margin: 0 !important; font-size: 11.5px !important; line-height: 1.3 !important; }
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-launch-form .sd-dropzone-inner strong,
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-launch-form .sd-dropzone-inner b { font-size: 12.5px !important; }

/* Status: checkbox e preço promocional alinhados */
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-launch-form .product-promo-status {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  align-items: end !important;
  gap: 8px !important;
}
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-launch-form .product-promo-status .settings-title { grid-column: 1 / -1 !important; margin: 0 !important; }
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-launch-form .product-promo-status .check-row {
  height: 38px !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 0 10px !important;
  gap: 8px !important;
  border: 1px solid var(--cx-line) !important;
  border-radius: 8px !important;
  background: #fff !important;
  font-size: 12.5px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-launch-form .product-promo-status .check-row input { width: 16px !important; height: 16px !important; margin: 0 !important; }
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-launch-form .product-promo-status .field { margin: 0 !important; display: block !important; }
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-launch-form .product-promo-status .field label { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }

/* Cores, fotos e medidas */
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay #beautyOptionsBuilder { gap: 10px !important; }
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay #beautyOptionsBuilder > .field + .field { padding-top: 10px !important; border-top: 1px solid var(--cx-line) !important; }
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-beauty-options-editor [class*="row"] { gap: 6px !important; margin: 0 0 6px !important; }
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-beauty-options-editor input[type="color"] { width: 38px !important; height: 38px !important; padding: 2px !important; border-radius: 8px !important; border: 1px solid var(--cx-line) !important; }
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-beauty-options-editor button {
  min-height: 34px !important;
  box-shadow: none !important;
}
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-beauty-options-editor button:not(.primary) {
  border: 1px solid var(--cx-line) !important;
  background: var(--cx-soft) !important;
  color: var(--cx-ink) !important;
}
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-beauty-options-editor p,
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-beauty-options-editor [class*="empty"] { margin: 2px 0 6px !important; font-size: 11px !important; }

/* Rodapé */
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-modal-footer {
  gap: 8px !important;
  padding: 10px 0 !important;
  border-top: 1px solid var(--cx-line) !important;
  box-shadow: none !important;
}
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-modal-footer button { height: 40px !important; min-height: 40px !important; box-shadow: none !important; }
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-modal-footer .outline { border: 1px solid var(--cx-line) !important; color: var(--cx-ink) !important; background: #fff !important; }

/* Promoções: cartões de modo de cupom (texto estava invisível e com espaço vazio) */
html body.sd-retail[data-device="mobile"] .promotion-mode-grid { gap: 8px !important; }
html body.sd-retail[data-device="mobile"] .promotion-mode-card {
  min-height: 0 !important;
  height: auto !important;
  padding: 12px !important;
  display: grid !important;
  gap: 4px !important;
  background: #fff !important;
  background-image: none !important;
  border: 1px solid var(--cx-line) !important;
  border-radius: var(--cx-r) !important;
}
html body.sd-retail[data-device="mobile"] .promotion-mode-card h2 { margin: 0 !important; font-size: 14px !important; color: var(--cx-ink) !important; }
html body.sd-retail[data-device="mobile"] .promotion-mode-card p { margin: 0 !important; font-size: 12px !important; color: var(--cx-mute) !important; }
html body.sd-retail[data-device="mobile"] .promotion-mode-card button {
  margin-top: 6px !important;
  height: 36px !important;
  min-height: 36px !important;
  border: 1px solid var(--cx-line) !important;
  border-radius: 8px !important;
  background: var(--cx-soft) !important;
  color: var(--cx-ink) !important;
  box-shadow: none !important;
  justify-content: center !important;
}

/* Status: checkbox ocupa a linha toda, preço promocional abaixo */
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-launch-form .product-promo-status { grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; }
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-launch-form .product-promo-status .check-row { width: 100% !important; }
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-launch-form .product-promo-status .field label { white-space: normal !important; }

/* v2 — menos embolado: campos em coluna única, mais respiro entre eles */
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-launch-form .sd-tab-panel { gap: 14px !important; }
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-launch-form .two-col,
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-launch-form .seller-encomenda-fields {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 14px !important;
}
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-launch-form label:not(.sd-switch):not(.check-row) { margin-bottom: 6px !important; font-size: 12.5px !important; }
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-launch-form .map-help,
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-launch-form small { margin-top: 4px !important; font-size: 11px !important; }
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-launch-form input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-launch-form select { height: 40px !important; min-height: 40px !important; width: 100% !important; }
/* Preço: campo com borda própria, "Disponível" ao lado */
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-launch-form .sd-price-avail { gap: 8px !important; }
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-launch-form .sd-price-input {
  display: flex !important; align-items: center !important; gap: 4px !important;
  height: 40px !important; min-height: 40px !important; padding: 0 0 0 10px !important;
  border: 1px solid var(--cx-line) !important; border-radius: 8px !important; background: #fff !important;
}
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-launch-form .sd-price-input input {
  flex: 1 !important; height: 38px !important; min-height: 38px !important; border: 0 !important; padding: 0 8px 0 0 !important; background: transparent !important;
}
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-launch-form .sd-switch-field { height: 40px !important; min-height: 40px !important; }
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-launch-form .sd-price-input input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]) {
  border: 0 !important; height: 38px !important; min-height: 38px !important; padding: 0 8px 0 0 !important; background: transparent !important;
}

/* v3 — Cores, fotos e medidas: cada item em um mini cartão organizado */
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay #beautyOptionsBuilder > .field + .field { border-top: 0 !important; padding-top: 0 !important; }
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay #beautyColorsBuilder,
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay #beautySizesBuilder { display: grid !important; gap: 8px !important; margin: 0 0 8px !important; }

html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-beauty-color-row,
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-beauty-size-row {
  position: relative !important;
  display: grid !important;
  margin: 0 !important;
  padding: 8px !important;
  gap: 6px !important;
  border: 1px solid var(--cx-line) !important;
  border-radius: 8px !important;
  background: var(--cx-soft) !important;
  box-shadow: none !important;
}
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-beauty-color-row {
  grid-template-columns: 38px minmax(0, 1fr) 32px !important;
  grid-template-areas: "hex name rm" "file file file" "st st st" !important;
  align-items: center !important;
}
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-beauty-color-row .sd-beauty-color-hex { grid-area: hex !important; width: 38px !important; height: 38px !important; min-height: 38px !important; padding: 2px !important; border-radius: 8px !important; background: #fff !important; }
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-beauty-color-row .sd-beauty-color-name { grid-area: name !important; width: 100% !important; }
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-beauty-color-row .sd-beauty-remove { grid-area: rm !important; }
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-beauty-color-row .sd-beauty-color-filelabel {
  grid-area: file !important;
  width: 100% !important;
  height: 36px !important;
  min-height: 36px !important;
  margin: 0 !important;
  justify-content: center !important;
  gap: 6px !important;
  border: 1px solid var(--cx-line) !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: var(--cx-ink) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
}
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-beauty-color-row .sd-beauty-photo-status { grid-area: st !important; margin: 0 !important; text-align: center !important; font-size: 10.5px !important; }
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-beauty-color-row .sd-beauty-color-preview:not([src=""]) { grid-area: st !important; }

html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-beauty-size-row { grid-template-columns: minmax(0, 1fr) 32px !important; align-items: start !important; }
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-beauty-size-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 6px !important; min-width: 0 !important; }
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-beauty-size-grid input { min-width: 0 !important; width: 100% !important; font-size: 12.5px !important; padding: 0 8px !important; }
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-beauty-size-row .sd-beauty-remove { position: static !important; }

html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-beauty-color-row input:not([type="checkbox"]):not([type="color"]):not([type="file"]),
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-beauty-size-row input { height: 38px !important; min-height: 38px !important; background: #fff !important; }
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-beauty-remove {
  width: 32px !important; height: 32px !important; min-height: 32px !important; padding: 0 !important; margin: 0 !important;
  border: 1px solid var(--cx-line) !important; border-radius: 8px !important; background: #fff !important; color: var(--cx-mute) !important;
  justify-content: center !important; align-items: center !important; justify-self: end !important;
}
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay #addBeautyColor,
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay #addBeautySize {
  display: flex !important; width: 100% !important; height: 36px !important; min-height: 36px !important; margin: 0 !important;
  justify-content: center !important; align-items: center !important;
  border: 1px dashed #cfcad6 !important; border-radius: 8px !important; background: #fff !important; color: var(--cx-ink) !important;
  font-size: 12.5px !important; font-weight: 600 !important;
}

/* Rodapé fixo sem cobrir campos */
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-launch-form .sd-tab-panel { padding-bottom: 12px !important; }
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-modal-footer {
  position: sticky !important; bottom: 0 !important; z-index: 5 !important;
  margin: 0 -12px !important; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) !important;
  background: #fff !important; display: grid !important; grid-template-columns: 1fr 1fr !important;
}

/* v4 — visual mais bonito: cor redonda, cartões leves */
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-beauty-color-row,
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-beauty-size-row {
  padding: 10px !important;
  gap: 8px !important;
  border-radius: 14px !important;
  background: #fff !important;
  border-color: #ebe8ef !important;
}
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-beauty-color-row { grid-template-columns: 34px minmax(0, 1fr) 30px !important; }
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-beauty-color-row .sd-beauty-color-hex {
  -webkit-appearance: none !important; appearance: none !important;
  width: 34px !important; height: 34px !important; min-height: 34px !important;
  padding: 0 !important; border: 0 !important; border-radius: 50% !important;
  background: transparent !important; overflow: hidden !important; cursor: pointer !important;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px #e3dfe8 !important;
}
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-beauty-color-hex::-webkit-color-swatch-wrapper { padding: 0 !important; }
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-beauty-color-hex::-webkit-color-swatch { border: 0 !important; border-radius: 50% !important; }
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-beauty-color-hex::-moz-color-swatch { border: 0 !important; border-radius: 50% !important; }
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-beauty-color-row input:not([type="color"]):not([type="file"]),
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-beauty-size-row input {
  height: 36px !important; min-height: 36px !important;
  border-radius: 10px !important; border: 1px solid #ebe8ef !important;
  background: #faf9fb !important; font-size: 12.5px !important;
}
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-beauty-color-row .sd-beauty-color-filelabel {
  height: 34px !important; min-height: 34px !important;
  border: 0 !important; border-radius: 10px !important;
  background: #f4f2f6 !important; color: #3d3546 !important; font-size: 12px !important;
}
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-beauty-color-row .sd-beauty-camera-icon { width: 15px !important; height: 15px !important; opacity: .7 !important; filter: grayscale(1) !important; }
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-beauty-color-row .sd-beauty-photo-status { font-size: 10.5px !important; color: #a39cab !important; }
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-beauty-remove {
  width: 30px !important; height: 30px !important; min-height: 30px !important;
  border: 0 !important; border-radius: 50% !important; background: #f4f2f6 !important;
  color: #8a8293 !important; font-size: 12px !important;
}
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay #addBeautyColor,
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay #addBeautySize {
  height: 38px !important; border-radius: 12px !important; border-color: #dcd7e2 !important;
  background: #faf9fb !important; color: #3d3546 !important; font-weight: 600 !important;
}
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay .sd-beauty-color-row .sd-beauty-color-hex { max-width: 34px !important; max-height: 34px !important; aspect-ratio: 1 / 1 !important; justify-self: center !important; align-self: center !important; }

/* v5 — círculos perfeitos (cor e ×) */
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay #beautyOptionsBuilder .sd-beauty-color-row input.sd-beauty-color-hex[type="color"] {
  width: 32px !important; min-width: 32px !important; max-width: 32px !important;
  height: 32px !important; min-height: 32px !important; max-height: 32px !important;
  padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 50% !important;
  -webkit-appearance: none !important; appearance: none !important; flex: none !important;
}
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay #beautyOptionsBuilder input.sd-beauty-color-hex::-webkit-color-swatch-wrapper { padding: 0 !important; border-radius: 50% !important; }
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay #beautyOptionsBuilder input.sd-beauty-color-hex::-webkit-color-swatch { border: 0 !important; border-radius: 50% !important; }
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay #beautyOptionsBuilder button.small-outline.sd-beauty-remove {
  width: 30px !important; min-width: 30px !important; max-width: 30px !important;
  height: 30px !important; min-height: 30px !important; max-height: 30px !important;
  padding: 0 !important; margin: 0 !important; flex: none !important; aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important; line-height: 1 !important; align-self: center !important;
}
html body.sd-retail[data-device="mobile"] #overlay#overlay#overlay#overlay#overlay #beautyOptionsBuilder .sd-beauty-size-row button.sd-beauty-remove { align-self: start !important; margin-top: 3px !important; }