@font-face {
  font-family: 'Moranga';
  src: url('/fonts/Moranga-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Moranga';
  src: url('/fonts/Moranga-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Moranga';
  src: url('/fonts/Moranga-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@500;600;700;800&family=Hanken+Grotesk:wght@400;500;600;700&display=swap');

:root {
  --bg: #fdfcfe;
  --ink: #161616;
  --soft: #9b98a3;
  --mint: #d4efd9;
  --mint-deep: #1e3a2a;
  --lilac: #eaddf7;
  --lilac-deep: #4c3370;
  --lilac-bg: #f5effb;
  --violet: #8b7cf6;
  --line: #f0edf4;
  --placeholder: #f1eff5;
  --r-lg: 28px;
  --r: 22px;
  --r-md: 20px;
  --touch: 56px;
  --display: 'Moranga', 'Urbanist', sans-serif;
  --body: 'Hanken Grotesk', sans-serif;
  --sidebar-w: 260px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  height: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overscroll-behavior-y: none;
}

body {
  font-family: var(--body);
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
}

button,
input,
select {
  font: inherit;
}

button {
  border: none;
}

a {
  color: inherit;
}

.app {
  width: 100%;
  min-height: 100vh;
  background: var(--bg);
  position: relative;
  overflow-x: hidden;
}

/* ===== AUTH / CHECKOUT / ONBOARDING ===== */
.auth-page {
  min-height: 100vh;
  min-height: 100dvh;
  background: #f9f8f8;
  display: flex;
  flex-direction: column;
}

.auth-panel {
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
  padding: 26px 22px 30px;
  display: flex;
  flex-direction: column;
}

.auth-logo {
  align-self: flex-end;
  margin-bottom: 26px;
}

.auth-logo img {
  height: 34px;
  width: auto;
  display: block;
}

.auth-body {
  display: flex;
  flex-direction: column;
}

.auth-head h1 {
  font-family: var(--display);
  font-size: clamp(46px, 13vw, 58px);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 0.96;
  color: var(--ink);
}

.auth-head p {
  margin-top: 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}

.auth-head + * {
  margin-top: 26px;
}

.auth-body .field {
  margin: 0 0 14px;
}

/* labels ficam só para leitores de tela (design usa placeholder) */
.auth-body .field label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.auth-body .input {
  width: 100%;
  height: 62px;
  border: 1.5px solid #ececea;
  border-radius: 16px;
  background: #fff;
  padding: 0 20px;
  font-family: var(--body);
  font-size: 16.5px;
  font-weight: 500;
  color: var(--ink);
}

.auth-body .input::placeholder {
  color: #b7b4bd;
  font-weight: 500;
}

.auth-body .input:focus {
  outline: none;
  border-color: var(--ink);
}

.auth-body .btn-save,
.auth-submit {
  width: 100%;
  height: 62px;
  border-radius: 16px;
  background: var(--ink);
  color: #fff;
  border: none;
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  cursor: pointer;
  margin-top: 6px;
}

.auth-body .btn-save:active,
.auth-submit:active {
  transform: scale(0.99);
}

.auth-form {
  margin-top: 2px;
}

.auth-footer {
  margin-top: 22px;
  text-align: center;
}

.auth-footer a {
  color: var(--ink);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
}

.auth-footer a:hover {
  text-decoration: underline;
}

.auth-error {
  margin: 0 0 16px;
  padding: 13px 16px;
  border-radius: 14px;
  background: #ffe8e8;
  color: #8a1f1f;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
}

.auth-field-hint {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--soft);
}

.auth-host {
  display: block;
  text-align: center;
  margin-top: 16px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--soft);
}

.auth-art {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 24px 40px;
}

.auth-art img {
  width: min(76%, 300px);
  height: auto;
  display: block;
}

@media (min-width: 860px) {
  .auth-page {
    flex-direction: row;
  }

  .auth-panel {
    flex: 1 1 50%;
    max-width: none;
    margin: 0;
    padding: 40px clamp(40px, 6vw, 104px);
  }

  .auth-logo {
    align-self: flex-start;
  }

  .auth-body {
    flex: 1;
    justify-content: center;
    max-width: 400px;
  }

  .auth-art {
    flex: 1 1 50%;
    padding: 40px;
  }

  .auth-art img {
    width: min(84%, 560px);
  }
}

.sidebar {
  display: none;
}

.content-shell {
  background: var(--bg);
}

.main {
  padding: 28px 20px 0;
  position: relative;
  animation: page-fade-in 0.28s ease both;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.logo,
.sb-logo {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
}

.logo {
  font-size: 22px;
  gap: 9px;
}

.logo .mark,
.sb-logo .mark {
  background: var(--ink);
  color: #fff;
  display: grid;
  place-items: center;
}

.brand-logo {
  display: block;
  width: auto;
  height: 28px;
}

.sb-logo .brand-logo {
  height: 28px;
}

.logo .mark {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  font-size: 18px;
}

.top-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-icon,
.icon-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 0.12s, background 0.15s;
}

.btn-icon:active,
.icon-btn:active {
  transform: scale(0.94);
}

.btn-icon svg,
.icon-btn svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btn-search {
  background: var(--lilac-bg);
}

.btn-search svg {
  width: 23px;
  height: 23px;
  stroke: var(--ink);
}

.btn-add {
  height: 52px;
  border-radius: 999px;
  cursor: pointer;
  background: var(--ink);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 52px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 15px;
  text-decoration: none;
  transition: transform 0.12s;
}

.btn-add svg {
  width: 22px;
  height: 22px;
  stroke: #fff;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btn-add .lbl {
  display: none;
  white-space: nowrap;
}

.search-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  background: var(--bg);
  padding: 24px 20px 18px;
  border-bottom: 1.5px solid var(--line);
  display: flex;
  align-items: center;
  gap: 10px;
  transform: translateY(-110%);
  transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 10px 24px -18px rgba(22, 22, 22, 0.25);
}

.search-overlay.show {
  transform: translateY(0);
}

.search-pill,
.search-inline {
  flex: 1;
  background: var(--lilac-bg);
  border-radius: 999px;
  height: 60px;
  padding: 0 8px 0 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.search-inline {
  display: none;
  max-width: 520px;
  height: 56px;
}

.search-pill svg.lupa,
.search-inline svg.lupa {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  stroke: var(--soft);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.search-pill input,
.search-inline input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  outline: none;
  font-family: var(--body);
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
}

.search-pill input::-webkit-search-cancel-button,
.search-inline input::-webkit-search-cancel-button {
  display: none;
}

.search-clear {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex-shrink: 0;
  cursor: pointer;
  background: rgba(22, 22, 22, 0.06);
  display: grid;
  place-items: center;
  transition: transform 0.12s, background 0.15s;
}

.search-clear:active {
  transform: scale(0.94);
}

.search-clear:hover {
  background: rgba(22, 22, 22, 0.1);
}

.search-clear svg {
  width: 18px;
  height: 18px;
  stroke: var(--ink);
  fill: none;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.search-pill input::placeholder,
.search-inline input::placeholder {
  color: var(--soft);
}

.cancel {
  background: none;
  cursor: pointer;
  font-family: var(--body);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  padding: 8px 4px;
  flex-shrink: 0;
}

.page-head {
  margin-top: 30px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.page-head h1 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 34px;
  letter-spacing: -0.025em;
  line-height: 1;
}

.page-head .count {
  font-size: 15px;
  font-weight: 600;
  color: var(--soft);
  margin-top: 8px;
}

.sort {
  cursor: pointer;
  font-family: var(--body);
  font-weight: 700;
  font-size: 14px;
  border: none;
  background: var(--lilac-bg);
  color: var(--ink);
  height: 48px;
  padding: 0 20px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  white-space: nowrap;
  text-decoration: none;
  transition: transform 0.12s;
}

.sort:active {
  transform: scale(0.98);
}

.sort.del {
  background: #ffe8e8;
  color: #8a1f1f;
}

.sort:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.list {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.swipe-wrap {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
}

.swipe-actions {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: flex-end;
}

.swipe-actions button {
  width: 74px;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.swipe-actions svg {
  width: 22px;
  height: 22px;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.swipe-actions .edit {
  background: var(--lilac);
}

.swipe-actions .edit svg {
  stroke: var(--lilac-deep);
}

.swipe-actions .del {
  background: var(--violet);
}

.swipe-actions .del svg {
  stroke: #fff;
}

.item {
  position: relative;
  z-index: 2;
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition:
    transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 0.15s,
    box-shadow 0.15s;
  cursor: pointer;
  text-decoration: none;
  color: var(--ink);
  width: 100%;
}

.swipe-wrap.open .item {
  transform: translateX(-148px);
}

.avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--placeholder);
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 800;
  font-size: 18px;
  overflow: hidden;
  position: relative;
}

.avatar.admin {
  background: #1e1e1e;
  color: #fff;
}

.avatar.editor {
  background: var(--lilac);
  color: var(--lilac-deep);
}

.avatar.user {
  background: var(--mint);
  color: var(--mint-deep);
}

.avatar.selected {
  background: var(--ink);
  color: #fff;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.avatar-link {
  display: block;
  text-decoration: none;
}

.item .info {
  flex: 1;
  min-width: 0;
}

.item .t {
  font-family: var(--display);
  font-weight: 700;
  font-size: 15.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item .email {
  font-size: 13px;
  color: var(--soft);
  font-weight: 500;
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.role-badge {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
}

.role-badge.admin {
  background: #1e1e1e;
  color: #fff;
}

.role-badge.editor {
  background: var(--lilac);
  color: var(--lilac-deep);
}

.role-badge.user {
  background: var(--mint);
  color: var(--mint-deep);
}

/* ===== Linha estilo catálogo (thumb + badges + contador) ===== */
.thumb {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  flex-shrink: 0;
  background: var(--placeholder);
  display: grid;
  place-items: center;
  overflow: hidden;
  font-family: var(--display);
  font-weight: 800;
  font-size: 18px;
  cursor: grab;
  touch-action: none;
}

.thumb:active {
  cursor: grabbing;
}

/* Placeholder durante o arrasto (SortableJS) */
.drag-ghost {
  opacity: 0.45;
}

.drag-ghost .item {
  border-color: var(--violet);
  border-style: dashed;
}

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thumb svg {
  width: 22px;
  height: 22px;
  stroke: #c9c5d2;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.thumb.selected {
  background: var(--ink);
  color: #fff;
}

.item .meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
  flex-wrap: wrap;
}

.item .sub {
  font-size: 13px;
  color: var(--soft);
  font-weight: 500;
}

.badge {
  font-size: 11.5px;
  font-weight: 700;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
}

.badge.on {
  background: var(--mint);
  color: var(--mint-deep);
}

.badge.off {
  background: #e7e5ea;
  color: #5c5a61;
}

.badge.hidden {
  background: var(--lilac);
  color: var(--lilac-deep);
}

.badge.lateral {
  background: var(--lilac);
  color: var(--lilac-deep);
}

.item .right {
  flex-shrink: 0;
  text-align: right;
}

.item .count {
  font-family: var(--display);
  font-weight: 800;
  font-size: 17px;
}

.item .count-lbl {
  font-size: 12px;
  color: var(--soft);
  font-weight: 600;
  margin-top: 3px;
}

.row-actions {
  display: none;
}

.empty {
  margin-top: 20px;
  border: 2px dashed var(--line);
  border-radius: var(--r-lg);
  padding: 44px 28px;
  text-align: center;
  display: none;
}

.empty.show {
  display: block;
}

.empty .ic {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--lilac-bg);
  display: grid;
  place-items: center;
  margin: 0 auto;
}

.empty .ic svg {
  width: 27px;
  height: 27px;
  stroke: var(--lilac-deep);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.empty b {
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  display: block;
  margin-top: 18px;
}

.empty p {
  font-size: 14.5px;
  color: var(--soft);
  font-weight: 500;
  margin-top: 8px;
  line-height: 1.55;
}

.nav {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  border-radius: 999px;
  padding: 10px;
  display: flex;
  gap: 6px;
  max-width: calc(100% - 32px);
  overflow-x: auto;
  scrollbar-width: none;
  box-shadow: 0 16px 34px -12px rgba(22, 22, 22, 0.4);
  z-index: 50;
}

.nav::-webkit-scrollbar {
  display: none;
}

.nav a {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: rgba(253, 252, 254, 0.45);
  transition: all 0.2s;
  text-decoration: none;
}

.nav-label {
  max-width: 100%;
  font: 500 9px/1.1 var(--body);
  color: rgba(253, 252, 254, 0.75);
  text-align: center;
  white-space: nowrap;
}

.nav a.active .nav-label { color: #fff; }

.nav a svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav a.active {
  background: rgba(253, 252, 254, 0.14);
  color: #fff;
}

.toast {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translate(-50%, 16px);
  background: var(--ink);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  height: 54px;
  padding: 0 26px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 11px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 99;
  white-space: nowrap;
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.toast .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--mint);
}

/* Popover de sucesso ao cadastrar item */
.created-pop-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(22, 22, 22, 0.28);
  backdrop-filter: blur(3px);
  animation: created-fade 0.18s ease;
}

.created-pop {
  position: relative;
  width: min(100%, 400px);
  padding: 34px 28px 26px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg);
  color: var(--ink);
  text-align: center;
  box-shadow: 0 26px 70px -28px rgba(22, 22, 22, 0.5);
  animation: created-pop-in 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.created-pop__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  background: var(--lilac-bg);
  color: var(--soft);
  cursor: pointer;
}

.created-pop__close svg {
  width: 17px;
  height: 17px;
}

.created-pop__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 18px;
  border-radius: 999px;
  background: var(--mint);
  color: var(--mint-deep);
}

.created-pop__badge svg {
  width: 30px;
  height: 30px;
  stroke-width: 2.6;
}

.created-pop__title {
  font-family: var(--display);
  font-weight: 800;
  font-size: 23px;
  margin: 0 0 8px;
}

.created-pop__text {
  color: var(--soft);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.55;
  margin: 0 0 22px;
}

.created-pop__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 56px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 16px 34px -12px rgba(22, 22, 22, 0.45);
  transition: transform 0.12s;
}

.created-pop__cta:active {
  transform: scale(0.98);
}

.created-pop__later {
  width: 100%;
  margin-top: 12px;
  padding: 10px;
  border: none;
  background: transparent;
  color: var(--soft);
  font-family: var(--body);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}

@keyframes created-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes created-pop-in {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.confirm-popover {
  position: fixed;
  width: min(calc(100vw - 40px), 420px);
  max-height: calc(100vh - 40px);
  margin: auto;
  inset: 0;
  padding: 22px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg);
  color: var(--ink);
  box-shadow: 0 24px 70px -28px rgba(22, 22, 22, 0.45);
}

.confirm-popover::backdrop {
  background: rgba(22, 22, 22, 0.22);
}

.confirm-body {
  font-size: 14.5px;
  color: var(--soft);
  font-weight: 500;
  line-height: 1.55;
  margin-top: 10px;
}

.confirm-field {
  display: block;
  margin-top: 16px;
}

.confirm-field small {
  display: block;
  margin-bottom: 10px;
}

.confirm-field b {
  color: var(--ink);
}

.confirm-popover .top-right {
  justify-content: flex-end;
  margin-top: 22px;
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--placeholder) 25%,
    var(--bg) 50%,
    var(--placeholder) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

.skeleton-title {
  width: 180px;
  height: 34px;
  border-radius: 999px;
  display: block;
}

.skeleton-list {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.skeleton-form {
  margin-top: 24px;
  display: grid;
  gap: 16px;
}

.skeleton-field {
  height: var(--touch);
  border-radius: var(--r-md);
  display: block;
}

.skeleton-card {
  min-height: 120px;
  border-radius: var(--r-lg);
  display: block;
}

.skeleton-row {
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg);
}

.skeleton-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  flex-shrink: 0;
  display: block;
}

.skeleton-stack {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.skeleton-line {
  height: 13px;
  border-radius: 999px;
  display: block;
}

.skeleton-line.wide {
  width: min(260px, 74%);
}

.skeleton-line.short {
  width: min(180px, 52%);
}

.page-transition {
  position: fixed;
  inset: 0;
  z-index: 80;
  padding: 28px 20px;
  background: rgba(253, 252, 254, 0.42);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease;
}

.page-transition.show {
  opacity: 1;
  pointer-events: auto;
}

.page-transition-card {
  min-width: 168px;
  margin: 72px auto 0;
  border: 1.5px solid rgba(240, 237, 244, 0.92);
  border-radius: 999px;
  background: rgba(253, 252, 254, 0.94);
  box-shadow: 0 18px 40px -24px rgba(22, 22, 22, 0.26);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: max-content;
}

.page-spinner {
  width: 24px;
  height: 24px;
  position: relative;
  flex-shrink: 0;
}

.page-spinner-ring,
.page-spinner-dot {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.page-spinner-ring {
  border: 2px solid rgba(76, 51, 112, 0.14);
  border-top-color: var(--lilac-deep);
  animation: page-spinner-rotate 0.82s linear infinite;
}

.page-spinner-dot {
  inset: 7px;
  background: var(--violet);
  opacity: 0.18;
}

.page-transition-copy {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.operation-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: var(--bg);
  color: var(--ink);
  opacity: 0;
  pointer-events: none;
  /* will-change garante compositing na GPU — evita o freeze visual no iOS Safari */
  will-change: opacity;
  transition: opacity 0.22s ease;
}

.operation-overlay.show {
  opacity: 1;
  pointer-events: auto;
}

.operation-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 118px;
  padding: 0 28px;
}

.operation-steps {
  max-width: 720px;
}

.operation-step {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(34px, 10vw, 52px);
  line-height: 1.04;
  letter-spacing: -0.04em;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(10px);
  will-change: opacity, transform, max-height;
}

.operation-overlay.show .operation-step {
  animation: op-step-enter 0.36s cubic-bezier(0.2, 0.8, 0.2, 1)
    var(--op-step-delay) forwards;
}

.operation-overlay.show .operation-step.will-dim {
  animation:
    op-step-enter 0.36s cubic-bezier(0.2, 0.8, 0.2, 1) var(--op-step-delay)
    forwards,
    op-step-past 0.22s ease var(--op-step-dim-delay) forwards;
}

@keyframes op-step-enter {
  from {
    max-height: 0;
    opacity: 0;
    transform: translateY(10px);
    margin-bottom: 0;
  }
  to {
    max-height: 240px;
    opacity: 1;
    transform: none;
    margin-bottom: 0;
  }
}

@keyframes op-step-past {
  from {
    color: var(--ink);
    margin-bottom: 0;
  }
  to {
    color: rgba(22, 22, 22, 0.1);
    margin-bottom: 30px;
  }
}

.operation-bar {
  height: 6px;
  border-radius: 999px;
  background: #eeeeee;
  overflow: hidden;
  margin-top: 42px;
  max-width: 720px;
}

/* Barra CSS-driven: usa animation com duração vinda de --op-duration (JS seta via inline style).
   Não depende de setInterval nem de mudança de estado — roda mesmo quando o JS congela no mobile. */
.operation-bar span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--violet);
}

.operation-overlay.show .operation-bar span {
  animation: op-fill var(--op-duration, 2.7s) cubic-bezier(0.4, 0, 0.2, 1)
    forwards;
}

@keyframes op-fill {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

.is-navigating .main {
  animation: page-fade-out 0.18s ease both;
}

/* Só opacidade — sem transform: animar transform no .main criaria um
   containing block que quebra position:fixed (ex.: a save-area no mobile). */
@keyframes page-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes page-fade-out {
  from {
    opacity: 1;
    transform: none;
  }

  to {
    opacity: 0.74;
    transform: translateY(4px);
  }
}

@keyframes skeleton-shimmer {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}

@keyframes page-spinner-rotate {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .main,
  .is-navigating .main,
  .skeleton,
  .operation-step,
  .operation-overlay.show .operation-bar span {
    animation: none;
  }

  .page-transition {
    transition: none;
  }

  .operation-overlay,
  .operation-bar span {
    transition: none;
  }

  .page-spinner-ring {
    animation: none;
  }

  .operation-overlay.show .operation-step {
    animation: none;
  }

  .operation-overlay.show .operation-step:first-child {
    max-height: 240px;
    opacity: 1;
    transform: none;
    margin-bottom: 0;
    color: var(--ink);
  }

  .operation-overlay.show .operation-step:not(:first-child) {
    display: none;
  }

  .operation-overlay.show .operation-bar span {
    width: 100%;
  }
}

.bottom-space {
  height: 120px;
}

.head-row {
  display: block;
}

.hero {
  margin-top: 26px;
}

.hero .hi {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--soft);
}

.hero h1 {
  font-family: var(--display);
  font-size: 31px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin-top: 5px;
}

.hero h1 .spark {
  color: var(--lilac-deep);
}

.sales {
  margin-top: 20px;
  background: var(--mint);
  border-radius: var(--r);
  padding: 20px;
  color: var(--mint-deep);
}

.sales .row1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sales .label {
  font-size: 12.5px;
  font-weight: 700;
  opacity: 0.7;
}

.period {
  cursor: pointer;
  font-family: var(--body);
  font-weight: 700;
  font-size: 12px;
  background: var(--ink);
  color: #fff;
  padding: 6px 13px;
  border-radius: 999px;
}

.sales .value {
  font-family: var(--display);
  font-size: 38px;
  font-weight: 500;
  letter-spacing: -0.025em;
  margin-top: 10px;
  color: var(--ink);
}

.sales .sub {
  font-size: 12.5px;
  font-weight: 600;
  margin-top: 4px;
  opacity: 0.7;
}

.sales .link {
  display: inline-block;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1.5px solid var(--ink);
  padding-bottom: 1px;
}

.blocks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}

.block {
  border-radius: var(--r);
  padding: 18px;
  min-height: 122px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-decoration: none;
  transition: transform 0.15s;
}

.block:hover {
  transform: translateY(-2px);
}

.block.dark {
  background: var(--ink);
  color: #fff;
}

.block.lilac {
  background: var(--lilac);
  color: var(--lilac-deep);
}

.block .arrow svg {
  width: 30px;
  height: 30px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.block .b-label {
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
}

/* Card "Visitas na loja" (ocupa um slot do grid de blocos, com número grande). */
.visits-block {
  justify-content: flex-start;
  gap: 6px;
}
.vb-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.vb-period {
  font-family: var(--body);
  font-weight: 700;
  font-size: 12px;
  color: var(--lilac-deep);
  background: rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  padding: 3px 10px;
  line-height: 1.4;
}
.vb-num {
  font-family: var(--display);
  font-weight: 800;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.02em;
  margin-top: auto;
}
.vb-sub { text-decoration: none; }
.vb-delta {
  font-size: 12px;
  font-weight: 700;
  color: var(--lilac-deep);
  opacity: 0.85;
}
.vb-delta.up { color: #1e7a48; }
.vb-delta.down { color: #b23b3b; }

.sec {
  margin-top: 30px;
}

.sec-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.sec-head h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
}

.sec-head small,
.sec-head .right {
  font-size: 12px;
  color: var(--soft);
  font-weight: 500;
}

.sec-head .right {
  margin-left: auto;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
}

.dash-list {
  margin-top: 6px;
}

.dash-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 2px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
}

.dash-row:last-child {
  border-bottom: none;
}

.dash-row .info {
  flex: 1;
  min-width: 0;
}

.dash-row .t {
  font-family: var(--display);
  font-weight: 700;
  font-size: 14.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-row .s {
  font-size: 12px;
  color: var(--soft);
  margin-top: 3px;
  font-weight: 500;
}

.dash-row .val {
  flex-shrink: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: 15px;
}

.dash-row .val small {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 500;
  color: var(--soft);
}

.visits {
  margin-top: 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.visits .num {
  font-family: var(--display);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.visits .lbl {
  font-size: 12px;
  font-weight: 600;
  color: var(--soft);
  margin-top: 1px;
}

.bars {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 40px;
}

.bars i {
  width: 8px;
  border-radius: 4px;
  background: var(--mint);
  transform-origin: bottom;
}

.bars i:nth-child(1) {
  height: 30%;
}
.bars i:nth-child(2) {
  height: 45%;
}
.bars i:nth-child(3) {
  height: 38%;
}
.bars i:nth-child(4) {
  height: 62%;
}
.bars i:nth-child(5) {
  height: 50%;
}
.bars i:nth-child(6) {
  height: 78%;
}
.bars i:nth-child(7) {
  height: 100%;
  background: var(--lilac-deep);
}

.blog-scroll {
  display: flex;
  gap: 12px;
  margin-top: 14px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: none;
  margin-right: -22px;
  padding-right: 22px;
}

.blog-scroll::-webkit-scrollbar {
  display: none;
}

.blog-card {
  min-width: 225px;
  max-width: 225px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 18px;
  text-decoration: none;
  color: var(--ink);
}

.kicker {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
}

.kicker.mint {
  background: var(--mint);
  color: var(--mint-deep);
}

.kicker.lilac {
  background: var(--lilac);
  color: var(--lilac-deep);
}

.blog-card h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 14.5px;
  line-height: 1.3;
  margin-top: 10px;
  letter-spacing: -0.01em;
}

.blog-card p {
  font-size: 12px;
  color: var(--soft);
  margin-top: 6px;
  line-height: 1.5;
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.form-panel {
  margin-top: 20px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px;
}

.form-panel .btn-add {
  width: 100%;
}

.form-panel .btn-add .lbl {
  display: inline;
}

.field {
  margin-top: 16px;
}

.field label {
  font-size: 14.5px;
  font-weight: 700;
  display: block;
  margin-bottom: 10px;
}

.input {
  width: 100%;
  font-family: var(--body);
  font-size: 16.5px;
  font-weight: 500;
  height: var(--touch);
  padding: 0 22px;
  border-radius: var(--r-md);
  border: 2px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  outline: none;
  transition: border-color 0.2s;
}

textarea.input {
  height: auto;
  min-height: 110px;
  padding: 16px 22px;
  line-height: 1.5;
  resize: vertical;
}

.input::placeholder {
  color: var(--soft);
}

.input:focus {
  border-color: var(--ink);
}

.status-select {
  font-weight: 800;
}

.status-select.status-active {
  background: var(--mint);
  color: var(--mint-deep);
  border-color: var(--mint);
}

.status-select.status-suspended {
  background: #1e1e1e;
  color: #fff;
  border-color: #1e1e1e;
}

.status-select.status-cancelled {
  background: var(--lilac);
  color: var(--lilac-deep);
  border-color: var(--lilac);
}

.input:-webkit-autofill,
.input:-webkit-autofill:hover,
.input:-webkit-autofill:focus {
  font-family: var(--body);
  font-size: 16.5px;
  font-weight: 500;
  line-height: normal;
  appearance: none;
  -webkit-text-fill-color: var(--ink);
  box-shadow: 0 0 0 1000px var(--bg) inset;
  caret-color: var(--ink);
  transition: background-color 9999s ease-in-out 0s;
}

.btn-back {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  flex-shrink: 0;
  cursor: pointer;
  background: var(--lilac-bg);
  display: grid;
  place-items: center;
  transition: transform 0.12s;
  text-decoration: none;
}

.btn-back:active {
  transform: scale(0.94);
}

.btn-back svg {
  width: 23px;
  height: 23px;
  stroke: var(--ink);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.top-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.02em;
}

.btn-save-top {
  display: none;
}

.sec-label {
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.sec-label small {
  font-family: var(--body);
  font-size: 12.5px;
  color: var(--soft);
  font-weight: 500;
}

.form-grid {
  margin-top: 28px;
}

/* No mobile a 2ª coluna empilha como "segundo bloco" — respiro antes dela. */
.form-grid.balanced .col-b {
  margin-top: 36px;
}

.form-grid .sec-label:not(:first-child) {
  margin-top: 32px;
}

.avatar-wrap {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.avatar-slot {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--placeholder);
  border: 2px dashed var(--line);
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.avatar-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.avatar-slot:hover {
  border-color: var(--ink);
}

.avatar-slot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0);
  transition: background 0.2s;
  pointer-events: none;
}

.avatar-slot:hover::after,
.avatar-slot.drag-over::after {
  background: rgba(0, 0, 0, 0.28);
}

.avatar-slot.filled {
  border: none;
}

.avatar-slot .remove {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  border: 2.5px solid var(--bg);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.avatar-slot .initial {
  font-family: var(--display);
  font-weight: 800;
  font-size: 32px;
  position: absolute;
  opacity: 0;
  transition: opacity 0.2s;
}

.avatar-slot.role-admin {
  background: #1e1e1e;
}

.avatar-slot.role-admin .initial {
  color: #fff;
  opacity: 1;
}

.avatar-slot.role-editor {
  background: var(--lilac);
}

.avatar-slot.role-editor .initial {
  color: var(--lilac-deep);
  opacity: 1;
}

.avatar-slot.role-user {
  background: var(--mint);
}

.avatar-slot.role-user .initial {
  color: var(--mint-deep);
  opacity: 1;
}

.avatar-slot.status-active {
  background: var(--mint);
}

.avatar-slot.status-active .initial {
  color: var(--mint-deep);
  opacity: 1;
}

.avatar-slot.status-suspended {
  background: #1e1e1e;
}

.avatar-slot.status-suspended .initial {
  color: #fff;
  opacity: 1;
}

.avatar-slot.status-cancelled {
  background: var(--lilac);
}

.avatar-slot.status-cancelled .initial {
  color: var(--lilac-deep);
  opacity: 1;
}

.avatar-hint {
  font-size: 13px;
  color: var(--soft);
  font-weight: 500;
  line-height: 1.55;
}

.avatar-hint b {
  font-family: var(--display);
  font-weight: 700;
  font-size: 14.5px;
  display: block;
  color: var(--ink);
  margin-bottom: 4px;
}

.pw-wrap {
  position: relative;
}

.pw-wrap .input {
  padding-right: 56px;
}

.pw-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.pw-toggle svg {
  width: 19px;
  height: 19px;
  stroke: var(--soft);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pw-toggle:hover svg {
  stroke: var(--ink);
}

.field .hint {
  font-size: 12.5px;
  color: var(--soft);
  font-weight: 500;
  margin-top: 7px;
}

.role-select {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}

.role-opt {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--r-md);
  border: 2px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.18s, background 0.18s;
}

.role-opt:hover {
  border-color: var(--soft);
}

.role-opt.selected {
  border-color: var(--ink);
  background: var(--bg);
}

.role-dot {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  flex-shrink: 0;
}

.role-opt.role-admin .role-dot {
  background: #1e1e1e;
}

.role-opt.role-editor .role-dot {
  background: var(--lilac);
}

.role-opt.role-user .role-dot {
  background: var(--mint);
}

.role-info {
  flex: 1;
}

.role-info b {
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  display: block;
}

.role-info small {
  font-size: 12.5px;
  color: var(--soft);
  font-weight: 500;
  margin-top: 2px;
  display: block;
  line-height: 1.35;
}

.role-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid var(--line);
  background: var(--bg);
  color: transparent;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
  transition: all 0.15s;
}

.role-opt.selected .role-check {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}

.save-area {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, var(--bg) 35%);
  padding: 24px 20px 22px;
  z-index: 50;
}

.btn-save {
  width: 100%;
  font-family: var(--display);
  font-weight: 700;
  font-size: 16.5px;
  height: 60px;
  border-radius: 999px;
  cursor: pointer;
  background: var(--ink);
  color: #fff;
  box-shadow: 0 16px 34px -12px rgba(22, 22, 22, 0.45);
  transition: transform 0.12s;
}

.btn-save:active {
  transform: scale(0.98);
}

.btn-save:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

/* .btn-save nasceu para <button>; em <a> (conectar Mercado Pago, que precisa
   ser link por causa da CSP form-action) o anchor é inline e não centraliza
   nem respeita height sozinho. */
a.btn-save {
  display: inline-grid;
  place-items: center;
  width: auto;
  padding: 0 28px;
  text-decoration: none;
  box-sizing: border-box;
}

.panel-tabs {
  background: var(--lilac-bg);
  border-radius: 999px;
  padding: 6px;
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
}

.panel-tabs button {
  flex: 1;
  height: 44px;
  border-radius: 999px;
  cursor: pointer;
  background: transparent;
  color: var(--soft);
  font-family: var(--display);
  font-weight: 800;
  font-size: 14px;
  transition: background 0.16s, color 0.16s, transform 0.12s;
}

.panel-tabs button:active {
  transform: scale(0.98);
}

.panel-tabs button.active {
  background: var(--bg);
  color: var(--ink);
  box-shadow: 0 8px 18px -14px rgba(22, 22, 22, 0.35);
}

/* ===== Filter chips (pills com scroll horizontal) — padrão reutilizável ===== */
.chips {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
  margin-top: 20px;
  margin-bottom: 18px;
  padding-bottom: 4px;
}

.chips::-webkit-scrollbar {
  display: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
  white-space: nowrap;
  height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  background: var(--bg);
  border: 1.5px solid var(--line);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 700;
  font-size: 14.5px;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.12s;
}

.chip:active {
  transform: scale(0.98);
}

.chip.on {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.chip .n {
  font-size: 11.5px;
  font-weight: 800;
  min-width: 24px;
  height: 24px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  padding: 0 7px;
  background: var(--lilac-bg);
  color: var(--ink);
}

.chip.on .n {
  background: var(--mint);
  color: var(--mint-deep);
}

/* ===== Componentes de formulário (padrão reutilizável) ===== */

/* Contador de caracteres — abaixo de input/textarea */
.char-count {
  font-size: 12px;
  color: var(--soft);
  font-weight: 600;
  text-align: right;
  margin-top: 6px;
}

/* Toggle switch + linha de toggle */
.toggles-group {
  margin-top: 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  padding: 4px 20px;
  background: var(--bg);
}

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: var(--touch);
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}

.toggle-row:last-child {
  border-bottom: none;
}

.toggle-row .txt b {
  font-family: var(--display);
  font-weight: 700;
  font-size: 15.5px;
  display: block;
}

.toggle-row .txt span {
  font-size: 13px;
  color: var(--soft);
  font-weight: 500;
  margin-top: 2px;
  display: block;
}

.switch {
  width: 58px;
  height: 34px;
  border-radius: 999px;
  flex-shrink: 0;
  background: var(--line);
  position: relative;
  cursor: pointer;
  border: none;
  transition: background 0.2s;
}

.switch::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s;
}

.switch.on {
  background: var(--ink);
}

.switch.on::after {
  transform: translateX(24px);
}

/* Combobox / autocomplete — input com dropdown de opções */
.combo {
  position: relative;
  margin-top: 14px;
}

.combo-list {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: 0 18px 36px -16px rgba(22, 22, 22, 0.22);
  z-index: 30;
  overflow: hidden;
  display: none;
}

.combo-list.show {
  display: block;
}

.combo-opt {
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--body);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ink);
  padding: 16px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}

.combo-opt:last-child {
  border-bottom: none;
}

.combo-opt:hover {
  background: var(--lilac-bg);
}

.combo-opt .meta {
  font-size: 12px;
  color: var(--soft);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

.combo-opt .meta .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.combo-opt .meta .dot.on {
  background: #3dbe7b;
}

.combo-opt .meta .dot.off {
  background: var(--soft);
}

.combo-empty {
  padding: 18px 22px;
  font-size: 14px;
  color: var(--soft);
  font-weight: 500;
}

/* Pills selecionadas (tags removíveis) */
.sel-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 700;
  height: 44px;
  padding: 0 12px 0 18px;
  border-radius: 999px;
  transition: opacity 0.2s, transform 0.2s;
}

.pill.lilac {
  background: var(--lilac);
  color: var(--lilac-deep);
}

.pill.mint {
  background: var(--mint);
  color: var(--mint-deep);
}

.pill .x {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  display: grid;
  place-items: center;
}

.pill.lilac .x {
  background: rgba(76, 51, 112, 0.14);
  color: var(--lilac-deep);
}

.pill.mint .x {
  background: rgba(30, 58, 42, 0.12);
  color: var(--mint-deep);
}

.pill.removing {
  opacity: 0;
  transform: scale(0.85);
}

/* ===== Controles visuais de formulário ===== */

/* Segmented control (alternância de modos) */
.seg {
  display: flex;
  gap: 4px;
  margin-top: 26px;
  background: var(--lilac-bg);
  padding: 5px;
  border-radius: 999px;
}

.seg button {
  flex: 1;
  border: none;
  cursor: pointer;
  font-family: var(--body);
  font-size: 15px;
  font-weight: 700;
  color: var(--soft);
  height: 50px;
  border-radius: 999px;
  background: transparent;
  transition: all 0.2s;
}

.seg button.on {
  background: var(--bg);
  color: var(--ink);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.seg-hint {
  font-size: 13px;
  color: var(--soft);
  font-weight: 500;
  margin-top: 10px;
  line-height: 1.5;
  padding: 0 4px;
}

/* Stepper numérico (campo com - / valor / +) */
.qty-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}

.qty-field {
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.qty-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  color: var(--soft);
}

.stepper-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}

.step-btn {
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  display: grid;
  place-items: center;
  transition: background 0.15s;
  flex-shrink: 0;
}

.step-btn:hover {
  background: var(--lilac-bg);
}

.step-btn:disabled {
  color: var(--soft);
  cursor: not-allowed;
}

.step-val {
  font-family: var(--display);
  font-weight: 800;
  font-size: 20px;
  flex: 1;
  text-align: center;
}

/* Cards de seleção visual (radio com ícone) */
.layout-opts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 14px;
}

.layout-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 12px;
  border-radius: var(--r-md);
  border: 2px solid var(--line);
  background: var(--bg);
  cursor: pointer;
  transition: all 0.18s;
}

.layout-opt:hover {
  border-color: var(--soft);
}

.layout-opt.selected {
  border-color: var(--ink);
  background: var(--lilac-bg);
}

.layout-ic {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--placeholder);
  display: grid;
  place-items: center;
  transition: background 0.18s;
}

.layout-opt.selected .layout-ic {
  background: var(--lilac);
}

.layout-ic svg {
  width: 22px;
  height: 22px;
  stroke: var(--soft);
  transition: stroke 0.18s;
}

.layout-opt.selected .layout-ic svg {
  stroke: var(--lilac-deep);
}

.layout-lbl {
  font-family: var(--display);
  font-weight: 700;
  font-size: 13.5px;
  color: var(--soft);
  transition: color 0.18s;
}

.layout-opt.selected .layout-lbl {
  color: var(--ink);
}

/* Chips menores de seleção única (aparência) */
.appear-group {
  margin-top: 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px 20px;
}

.appear-sub {
  font-size: 13px;
  font-weight: 700;
  color: var(--soft);
  display: block;
  margin-bottom: 12px;
}

.appear-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.appear-chip {
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--bg);
  font-family: var(--body);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--soft);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.appear-chip:hover {
  border-color: var(--soft);
}

.appear-chip.selected {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

/* Dimensões customizadas (aparece quando aparência = customizado) */
.custom-size {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}

.custom-size.show {
  display: grid;
}

.custom-size .size-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.custom-size .size-label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--soft);
}

.custom-size .size-input-wrap {
  position: relative;
}

.custom-size .size-input {
  width: 100%;
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  height: 52px;
  padding: 0 42px 0 18px;
  border-radius: var(--r-md);
  border: 2px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  outline: none;
  transition: border-color 0.2s;
  -moz-appearance: textfield;
}

.custom-size .size-input::-webkit-outer-spin-button,
.custom-size .size-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

.custom-size .size-input:focus {
  border-color: var(--ink);
}

.custom-size .size-unit {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--soft);
  pointer-events: none;
}

/* ===== Upload de imagem ===== */

/* Placeholder compartilhado (ícone + rótulo + dica) */
.img-single .ph-ic,
.img-slot .ph-ic {
  border-radius: 50%;
  background: var(--placeholder);
  display: grid;
  place-items: center;
}

.img-single .ph-ic svg,
.img-slot .ph-ic svg,
.slot svg {
  stroke: #c9c5d2;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.img-single .ph-lbl,
.img-slot .ph-lbl {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--soft);
  text-align: center;
}

.img-single .ph-hint,
.img-slot .ph-hint {
  font-size: 12px;
  color: var(--soft);
  opacity: 0.7;
  text-align: center;
}

/* Single (capa / 16:9) */
.img-single {
  margin-top: 14px;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 220px;
  border-radius: var(--r-lg);
  border: 2px dashed var(--line);
  background: var(--bg);
  display: grid;
  place-items: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s, background 0.2s;
}

.img-single:active,
.img-slot:active,
.slot:active {
  background: var(--lilac-bg);
}

/* Hover do mouse e arrasto de arquivo sobre a área de upload */
.img-single:hover,
.img-slot:hover,
.slot:hover {
  border-color: var(--soft);
}

.img-single.drag-over,
.img-slot.drag-over,
.slot.drag-over {
  border-color: var(--violet);
  background: var(--lilac-bg);
}

.img-single .ph-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.img-single .ph-ic {
  width: 52px;
  height: 52px;
}

.img-single .ph-ic svg {
  width: 22px;
  height: 22px;
}

.img-single.filled,
.img-slot.filled,
.slot.filled {
  border: none;
  background: var(--placeholder);
}

.slot.filled[draggable='true'] {
  cursor: grab;
}

.slot.dragging {
  opacity: 0.4;
}

.img-single.filled .ph-content {
  opacity: 0.5;
}

/* Slots (banner — empilhados, principal + laterais) */
.img-slots {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.img-slot {
  width: 100%;
  border-radius: var(--r-lg);
  border: 2px dashed var(--line);
  background: var(--bg);
  display: grid;
  place-items: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s, background 0.2s;
}

.img-slot.main-slot {
  aspect-ratio: 16 / 9;
}

.img-slot.side-slot {
  aspect-ratio: 1 / 1;
  max-width: 160px;
}

.img-slot .ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px;
}

.img-slot .ph-ic {
  width: 44px;
  height: 44px;
}

.img-slot .ph-ic svg {
  width: 20px;
  height: 20px;
}

.img-slot.filled .ph {
  opacity: 0.4;
}

.side-slot-wrap {
  display: none;
}

.side-slot-wrap.show {
  display: block;
}

/* Grade (item — quadrados 3 colunas) */
.img-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 14px;
}

.slot {
  aspect-ratio: 1;
  border-radius: var(--r-md);
  border: 2px dashed var(--line);
  background: var(--bg);
  display: grid;
  place-items: center;
  cursor: pointer;
  position: relative;
  transition: border-color 0.2s, background 0.2s;
}

/* Slot de capa compacto (upload único, estilo grid) */
.cover-slot-wrap {
  width: 120px;
  margin-top: 14px;
}

.slot-ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.slot-ph span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--soft);
}

/* Ilustração decorativa no topo de um form */
.form-illustration {
  display: block;
  width: 100%;
  height: auto;
  max-height: 240px;
  object-fit: contain;
  margin-bottom: 8px;
}

/* ===== Item: preço com prefixo + builder de variações ===== */
.price-wrap {
  position: relative;
}

.price-wrap .prefix {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  color: var(--soft);
  pointer-events: none;
}

.price-wrap .input {
  padding-left: 50px;
  font-family: var(--display);
  font-weight: 700;
}

.var-block {
  margin-top: 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px;
  background: var(--bg);
}

.var-block .vb-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.var-block .vb-name {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 15.5px;
  background: var(--mint);
  color: var(--mint-deep);
  height: 40px;
  padding: 0 18px;
  border-radius: 999px;
}

/* Setas de reordenar + excluir, à direita do nome da variável. */
.vb-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.vb-move {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--lilac-bg);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: opacity 0.13s;
}

.vb-move svg {
  width: 18px;
  height: 18px;
  stroke: var(--soft);
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vb-move:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.vb-del {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--lilac-bg);
  cursor: pointer;
  display: grid;
  place-items: center;
}

.vb-del svg {
  width: 18px;
  height: 18px;
  stroke: var(--soft);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.opt-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.opt-img {
  width: var(--touch);
  height: var(--touch);
  border-radius: 16px;
  flex-shrink: 0;
  border: 2px dashed var(--line);
  background: var(--bg);
  display: grid;
  place-items: center;
  cursor: pointer;
  position: relative;
  transition: background 0.2s;
}

.opt-img:active {
  background: var(--lilac-bg);
}

.opt-img svg {
  width: 19px;
  height: 19px;
  stroke: #c9c5d2;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.opt-img.filled {
  border: none;
  background: var(--placeholder);
}

.variation-library[open] { overflow: visible; }
.variation-option-image { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; }
.variation-image-hint { font: 500 12.5px/1.5 var(--body); color: var(--soft); margin: 10px 0 0; }

.opt-img .remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  border: 2px solid var(--bg);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  display: none;
  place-items: center;
  cursor: pointer;
}

.opt-img.filled .remove {
  display: grid;
}

.opt-row .input {
  min-width: 0;
}

.opt-row .opt-name {
  flex: 1.4;
}


.opt-del {
  width: 44px;
  height: var(--touch);
  border-radius: 16px;
  flex-shrink: 0;
  border: 2px solid var(--line);
  background: var(--bg);
  cursor: pointer;
  display: grid;
  place-items: center;
}

.opt-del svg {
  width: 18px;
  height: 18px;
  stroke: var(--soft);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.add-opt {
  width: 100%;
  margin-top: 12px;
  height: 48px;
  border-radius: 16px;
  border: 2px dashed var(--line);
  background: transparent;
  cursor: pointer;
  font-family: var(--body);
  font-weight: 700;
  font-size: 14px;
  color: var(--soft);
  transition: background 0.15s;
}

.add-opt:active {
  background: var(--lilac-bg);
}

/* Acordeão de variações no acervo (settings) */
.var-acc {
  margin-top: 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg);
  overflow: hidden;
}

.var-acc > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
}

.var-drag {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  cursor: grab;
  touch-action: none;
}

.var-drag:active {
  cursor: grabbing;
}

.var-drag svg {
  width: 18px;
  height: 18px;
  fill: var(--soft);
  stroke: none;
}

.var-acc > summary::-webkit-details-marker {
  display: none;
}

.var-acc-count {
  font-size: 13px;
  color: var(--soft);
  font-weight: 600;
}

.var-acc-chevron {
  margin-left: auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--soft);
  border-bottom: 2px solid var(--soft);
  transform: rotate(45deg);
  transition: transform 0.2s;
  flex-shrink: 0;
}

.var-acc[open] .var-acc-chevron {
  transform: rotate(-135deg);
}

.var-acc[open] > summary {
  border-bottom: 1px solid var(--line);
}

.var-acc-body {
  padding: 16px;
}

.slot svg {
  width: 24px;
  height: 24px;
}

/* Botão remover (compartilhado pelos uploads) */
.img-single .remove,
.img-slot .remove,
.slot .remove {
  position: absolute;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  border: none;
  cursor: pointer;
  font-weight: 700;
  display: none;
  place-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.img-single .remove {
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  font-size: 14px;
}

.img-slot .remove {
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  font-size: 13px;
}

.slot .remove {
  top: -7px;
  right: -7px;
  width: 26px;
  height: 26px;
  border: 2.5px solid var(--bg);
  font-size: 13px;
  line-height: 1;
}

.img-single.filled .remove,
.img-slot.filled .remove,
.slot.filled .remove {
  display: grid;
}

/* Tag de capa/posição sobre a imagem */
.img-single .cover-tag,
.slot-tag {
  position: absolute;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(22, 22, 22, 0.65);
  color: #fff;
  border-radius: 999px;
  display: none;
}

.img-single .cover-tag {
  bottom: 12px;
  left: 12px;
  font-size: 10.5px;
  padding: 4px 12px;
}

.slot-tag {
  bottom: 10px;
  left: 10px;
  font-size: 10px;
  letter-spacing: 0.07em;
  padding: 3px 10px;
}

.img-single.filled .cover-tag,
.img-slot.filled .slot-tag {
  display: block;
}

.slot .cover-tag {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--soft);
}

.slot.filled .cover-tag {
  background: var(--ink);
  color: #fff;
  padding: 3px 10px;
  border-radius: 999px;
}

.billing-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.billing-grid {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.billing-grid .field {
  margin-top: 0;
}

.invoice-list {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tenant-admin-list {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.invoice-row {
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px;
  display: grid;
  gap: 12px;
  background: var(--bg);
}

.invoice-main {
  min-width: 0;
}

.invoice-id {
  font-family: var(--display);
  font-weight: 800;
  font-size: 15px;
}

.invoice-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--soft);
  font-size: 12.5px;
  font-weight: 600;
  margin-top: 4px;
}

.invoice-status {
  width: max-content;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.invoice-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: block;
}

.invoice-status.pending {
  background: var(--lilac-bg);
  color: var(--lilac-deep);
}

.invoice-status.pending i {
  background: var(--violet);
}

.invoice-status.paid {
  background: var(--mint);
  color: var(--mint-deep);
}

.invoice-status.paid i {
  background: #3dbe7b;
}

.invoice-status.cancelled {
  background: #ffe8e8;
  color: #8a1f1f;
}

.invoice-status.cancelled i {
  background: #d85555;
}

.invoice-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.invoice-actions button,
.invoice-actions a {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  cursor: pointer;
  background: var(--lilac-bg);
  display: grid;
  place-items: center;
  transition: transform 0.12s;
  text-decoration: none;
}

.invoice-actions button:active,
.invoice-actions a:active {
  transform: scale(0.94);
}

.invoice-actions svg {
  width: 18px;
  height: 18px;
  stroke: var(--ink);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.invoice-action.danger {
  background: var(--violet);
}

.invoice-action.danger svg {
  stroke: #fff;
}

.invoice-avatar {
  width: 36px;
  height: 36px;
  font-size: 13px;
}

.tenant-admin-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 16px;
  cursor: pointer;
}

.tenant-admin-avatar {
  width: 52px;
  height: 52px;
  font-size: 18px;
}

.tenant-admin-info {
  min-width: 0;
}

.tenant-admin-status {
  margin-left: 66px;
}

.tenant-admin-actions {
  display: flex;
  gap: 8px;
  margin-left: 66px;
}

.tenant-admin-actions .invoice-action {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  cursor: pointer;
  background: var(--lilac-bg);
  display: grid;
  place-items: center;
  transition: transform 0.12s;
  text-decoration: none;
}

.tenant-admin-actions .invoice-action:active {
  transform: scale(0.94);
}

.tenant-admin-actions .invoice-action:focus-visible {
  outline: none;
}

.tenant-admin-actions .invoice-action svg {
  width: 18px;
  height: 18px;
  stroke: var(--ink);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.empty.inline {
  display: block;
  margin-top: 0;
  padding: 28px 22px;
}

.sg-page-head {
  align-items: flex-start;
}

.sg-anchor-row {
  margin-top: 24px;
}

.sg-hero {
  margin-top: 22px;
  display: grid;
  gap: 18px;
}

.sg-hero-copy,
.sg-hero-aside,
.sg-demo-card,
.sg-color-card,
.sg-type-card {
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  background: rgba(253, 252, 254, 0.92);
}

.sg-hero-copy {
  padding: 24px;
}

.sg-hero-copy h2 {
  margin-top: 12px;
  font-family: var(--display);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.sg-hero-copy p {
  margin-top: 12px;
  max-width: 64ch;
  color: var(--soft);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.65;
}

.sg-hero-aside {
  padding: 18px;
}

.sg-hero-aside .visits {
  margin-top: 0;
}

.sg-hero-aside .form-panel {
  margin-top: 14px;
}

.sg-color-grid,
.sg-stack,
.sg-demo-grid {
  margin-top: 18px;
  display: grid;
  gap: 14px;
}

.sg-color-card,
.sg-type-card,
.sg-demo-card {
  padding: 18px;
}

.sg-color-swatch {
  height: 100px;
  border-radius: var(--r);
  border: 1px solid rgba(22, 22, 22, 0.06);
}

.sg-color-swatch.dark {
  background: var(--ink);
}

.sg-color-swatch.lilac {
  background: var(--lilac);
}

.sg-color-swatch.lilac-bg {
  background: var(--lilac-bg);
}

.sg-color-swatch.mint {
  background: var(--mint);
}

.sg-color-swatch.soft {
  background: var(--soft);
}

.sg-color-swatch.line {
  background: var(--line);
}

.sg-color-meta {
  margin-top: 14px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.sg-color-name,
.sg-demo-label,
.sg-type-eyebrow {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sg-color-token,
.sg-color-value,
.sg-demo-card p,
.sg-type-card p {
  color: var(--soft);
}

.sg-color-token,
.sg-color-value {
  margin-top: 4px;
  font-size: 12.5px;
  font-weight: 600;
}

.sg-color-card p,
.sg-demo-card p,
.sg-type-card p {
  margin-top: 12px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.6;
}

.sg-type-display {
  margin-top: 12px;
  font-family: var(--display);
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.98;
}

.sg-type-heading {
  margin-top: 12px;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.08;
}

.sg-type-body {
  margin-top: 12px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.7;
}

.sg-type-caption {
  margin-top: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--soft);
  line-height: 1.5;
}

.sg-demo-row {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.sg-demo-row-wrap {
  flex-wrap: wrap;
}

.sg-visible-save-top {
  display: inline-flex;
}

.sg-static-chips {
  margin-bottom: 0;
  padding-bottom: 0;
}

.sg-search-visible {
  display: flex;
  max-width: none;
}

.sg-overlay-demo {
  position: relative;
  inset: auto;
  padding: 0;
  border: none;
  box-shadow: none;
  transform: none;
  background: transparent;
}

.sg-form-stage {
  margin-top: 18px;
  display: grid;
  gap: 20px;
}

.sg-form-column .field:first-of-type {
  margin-top: 18px;
}

.sg-save-area {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  margin-top: 18px;
  padding: 0;
  background: none;
}

.sg-block-grid {
  margin-top: 18px;
}

.sg-blog-card {
  display: block;
  min-width: 100%;
  max-width: none;
}

@media (min-width: 920px) {
  .sg-hero {
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.8fr);
    align-items: start;
  }

  .sg-color-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sg-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sg-demo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sg-form-stage {
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
  }

  html {
    scrollbar-width: thin;
    scrollbar-color: var(--lilac) transparent;
  }

  html::-webkit-scrollbar {
    width: 8px;
  }

  html::-webkit-scrollbar-track {
    background: transparent;
  }

  html::-webkit-scrollbar-thumb {
    background: var(--lilac);
    border-radius: 999px;
  }

  body {
    background: #efe7f8;
    min-height: 100vh;
  }

  .app {
    display: flex;
    background: transparent;
    min-height: 100vh;
    overflow: visible;
  }

  .sidebar {
    display: flex;
    flex-direction: column;
    width: var(--sidebar-w);
    height: 100vh;
    position: sticky;
    top: 0;
    background: var(--bg);
    border-right: 1.5px solid var(--line);
    padding: 32px 20px 28px;
    flex-shrink: 0;
    overflow-y: auto;
  }

  .sb-logo {
    font-size: 23px;
    gap: 10px;
    padding: 0 12px;
  }

  .sb-logo .mark {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    font-size: 19px;
  }

  .sb-nav {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .sb-nav a {
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: var(--display);
    font-weight: 400;
    font-size: 15.5px;
    color: var(--soft);
    text-decoration: none;
    height: 54px;
    padding: 0 18px;
    border-radius: 18px;
    transition: all 0.15s;
  }

  .sb-nav a svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
  }

  .sb-nav a:hover {
    background: var(--lilac-bg);
    color: var(--ink);
  }

  .sb-nav a.active {
    background: var(--ink);
    color: #fff;
  }

  .sb-foot {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-radius: 20px;
    background: var(--lilac-bg);
  }

  .sb-foot .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #3dbe7b;
    flex-shrink: 0;
    box-shadow: 0 0 0 4px rgba(61, 190, 123, 0.18);
  }

  .sb-profile {
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
  }

  .sb-profile:hover {
    background: var(--lilac);
  }

  .sb-profile .sb-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--ink);
    color: #fff;
    display: grid;
    place-items: center;
    overflow: hidden;
    font-family: var(--display);
    font-weight: 800;
    font-size: 15px;
  }

  .sb-profile .sb-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .sb-logo {
    text-decoration: none;
  }

  .sb-foot b {
    font-family: var(--display);
    font-weight: 700;
    font-size: 14px;
    display: block;
  }

  .sb-foot span {
    font-size: 12px;
    color: var(--soft);
    font-weight: 600;
  }

  .content-shell {
    flex: 1;
    background: var(--bg);
    min-height: 100vh;
    display: flex;
    overflow: visible;
  }

  .main {
    flex: 1;
    max-width: 1080px;
    margin: 0 auto;
    padding: 36px 48px 60px;
    min-height: 100vh;
    overflow: visible;
  }

  .topbar {
    gap: 16px;
  }

  .top-title {
    font-size: 28px;
  }

  .btn-save-top {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-left: auto;
    font-family: var(--display);
    font-weight: 700;
    font-size: 15.5px;
    height: 54px;
    padding: 0 28px;
    border-radius: 999px;
    cursor: pointer;
    background: var(--ink);
    color: #fff;
    transition: transform 0.12s;
  }

  .btn-save-top:hover {
    transform: translateY(-1px);
  }

  .btn-save-top:active {
    transform: scale(0.97);
  }

  .save-area {
    display: none;
  }

  .form-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 48px;
    margin-top: 28px;
    align-items: start;
  }

  /* Variante de colunas equilibradas (ex.: form de categoria) */
  .form-grid.balanced {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  /* No desktop são colunas lado a lado — sem o respiro de empilhamento. */
  .form-grid.balanced .col-b {
    margin-top: 0;
  }

  .form-grid .sec-label:not(:first-child) {
    margin-top: 34px;
  }

  .col-a,
  .col-b {
    padding-bottom: 40px;
  }

  .col-b .sec-label:first-child {
    margin-top: 0px;
  }

  .billing-grid {
    grid-template-columns: 1fr 1fr;
  }

  .invoice-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
  }

  .invoice-actions {
    justify-content: flex-end;
  }

  .tenant-admin-row {
    grid-template-columns: 56px minmax(0, 1fr) auto auto;
    align-items: center;
    padding: 16px 22px;
  }

  .tenant-admin-avatar {
    width: 56px;
    height: 56px;
    font-size: 20px;
  }

  .tenant-admin-status,
  .tenant-admin-actions {
    margin-left: 0;
  }

  .tenant-admin-actions {
    justify-content: flex-end;
  }

  .avatar-wrap {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
  }

  .avatar-slot {
    width: 120px;
    height: 120px;
  }

  .avatar-slot .initial {
    font-size: 42px;
  }

  .avatar-hint {
    text-align: center;
  }

  .btn-back:hover {
    background: var(--lilac-bg);
  }

  .topbar .logo {
    display: none;
  }

  .search-inline {
    display: flex;
  }

  .btn-search,
  .search-overlay {
    display: none;
  }

  .mobile-only-right {
    display: none !important;
  }

  .desk-right {
    display: flex !important;
  }

  .dashboard-search-overlay {
    display: flex;
    padding: 28px 48px 20px;
  }

  .dashboard-search-overlay .search-pill {
    max-width: 640px;
    margin: 0 auto 0 0;
    height: 60px;
  }

  .icon-btn {
    width: 48px;
    height: 48px;
  }

  .icon-btn:hover {
    background: var(--lilac-bg);
  }

  .icon-btn svg {
    width: 23px;
    height: 23px;
  }

  .page-transition {
    left: var(--sidebar-w);
  }

  .page-transition-card {
    margin-top: 42px;
  }

  .operation-overlay {
    background: rgba(253, 252, 254, 0.92);
    backdrop-filter: blur(10px);
  }

  .operation-content {
    left: var(--sidebar-w);
    right: 0;
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
    padding: 0 48px;
  }

  /* Centraliza o bloco de passos junto com a barra (ambos max-width 720px),
     senão o texto fica à esquerda e a barra centralizada — desalinhados. */
  .operation-steps {
    margin: 0 auto;
  }

  .operation-step {
    font-size: clamp(40px, 4.5vw, 64px);
  }

  .operation-bar {
    margin: 34px auto 0;
  }

  .btn-add {
    width: auto;
    padding: 0 26px;
  }

  .btn-add .lbl {
    display: inline;
  }

  .page-head {
    margin-top: 38px;
  }

  .page-head h1 {
    font-size: 40px;
  }

  .list {
    margin-top: 24px;
    gap: 12px;
  }

  .swipe-actions {
    display: none;
  }

  .swipe-wrap {
    overflow: visible;
  }

  .swipe-wrap.open .item {
    transform: none;
  }

  .item {
    cursor: pointer;
    padding: 16px 22px;
  }

  .item:hover {
    border-color: var(--ink);
    box-shadow: 0 10px 26px -18px rgba(22, 22, 22, 0.3);
  }

  .row-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    margin-left: 10px;
    opacity: 0;
    transform: translateX(6px);
    transition: opacity 0.18s, transform 0.18s;
  }

  .item:hover .row-actions {
    opacity: 1;
    transform: none;
  }

  .row-actions button {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: transform 0.12s;
  }

  .row-actions .edit {
    background: var(--lilac);
  }

  .row-actions .edit svg {
    stroke: var(--lilac-deep);
  }

  .row-actions .del {
    background: var(--violet);
  }

  .row-actions .del svg {
    stroke: #fff;
  }

  .row-actions svg {
    width: 19px;
    height: 19px;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
  }

  .avatar {
    width: 56px;
    height: 56px;
    font-size: 20px;
  }

  .head-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
  }

  .hero {
    margin-top: 0;
  }

  .hero h1 {
    font-size: 36px;
  }

  .dash {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 40px;
    margin-top: 34px;
    align-items: start;
  }

  .sales {
    margin-top: 0;
    padding: 28px;
    border-radius: var(--r-lg);
  }

  .sales .value {
    font-size: 46px;
  }

  .blocks {
    margin-top: 14px;
    gap: 14px;
  }

  .block {
    min-height: 140px;
    border-radius: var(--r-lg);
    padding: 22px;
  }

  .block .b-label {
    font-size: 16px;
  }

  .col-right .sec:first-child {
    margin-top: 0;
  }

  .visits {
    padding: 22px 24px;
    border-radius: var(--r-lg);
  }

  .visits .num {
    font-size: 32px;
  }

  .blog-scroll {
    margin-right: 0;
    padding-right: 0;
    flex-direction: column;
    overflow: visible;
  }

  .blog-card {
    min-width: 0;
    max-width: none;
  }

  .dash-row {
    padding: 16px 10px;
    border-radius: 14px;
  }

  .dash-row:hover {
    background: var(--lilac-bg);
  }

  .dash-row,
  .dash-row:last-child {
    border-bottom: 1px solid var(--line);
  }

  .dash-list .dash-row:last-child {
    border-bottom: none;
  }

  .nav {
    display: none;
  }

  .bottom-space {
    height: 40px;
  }

  .toast {
    bottom: 36px;
  }
}

/* Spinner de upload (grid de imagens + imagem de opção) */
@keyframes spin {
  to { transform: rotate(360deg); }
}
.spinner {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2.5px solid var(--line);
  border-top-color: var(--ink);
  animation: spin 0.7s linear infinite;
}

/* Entrada "Criar/Cadastrar" no autocomplete */
.combo-opt.create {
  color: #2d6335;
  font-weight: 800;
}

/* Opção do item: linha extra (descrição + preço promo) */
/* Cada opção da variável é um cartão fechado: foto+nome+excluir na 1ª linha,
   preços na 2ª, descrição na 3ª. Antes tudo dividia a mesma linha e os campos
   se encavalavam. */
.opt-item {
  margin-bottom: 10px;
  padding: 12px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md, 20px);
  background: var(--bg);
}

/* Dentro do cartão o espaçamento vem do gap/margin dos blocos, não da linha. */
.opt-item .opt-row {
  margin-top: 0;
}

.opt-item .opt-row .opt-name {
  flex: 1;
}

.opt-prices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}

.opt-prices .price-wrap .input {
  width: 100%;
}

.opt-item .opt-extra {
  margin-top: 8px;
  padding-left: 0;
}


/* No celular os dois preços empilham para o rótulo "Promo R$" não espremer. */
@media (max-width: 480px) {
  .opt-prices {
    grid-template-columns: 1fr;
  }
}
.opt-extra {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  padding-left: 2px;
}
.opt-desc-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 600;
  color: var(--soft);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 2px;
  transition: color 0.15s;
}
.opt-desc-toggle:hover {
  color: var(--ink);
}
.opt-desc-toggle .pl {
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
}
.price-wrap.promo {
  margin-left: auto;
  max-width: 150px;
  flex-shrink: 0;
}
/* Dentro do cartão da opção o promo ocupa a coluna inteira do grid. */
.opt-prices .price-wrap.promo {
  margin-left: 0;
  max-width: none;
}
.opt-prices .price-wrap.promo .input {
  padding-left: 100px;
}
.opt-desc-field {
  margin-top: 8px;
  min-height: 58px;
  resize: vertical;
}

/* ===== ADMIN: PIX no settings ===== */
.pix-form {
  margin-top: 8px;
  margin-bottom: 8px;
}
.pix-form .btn-save {
  margin-top: 6px;
}

/* ===== ADMIN: lista de pedidos ===== */
.ord-list {
  display: flex;
  flex-direction: column;
  margin-top: 8px;
}
.ord-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 6px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  transition: background 0.12s;
}
.ord-row:hover {
  background: var(--bg);
}
.ord-num {
  font-weight: 800;
  font-size: 15px;
  color: var(--soft);
  min-width: 46px;
}
.ord-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ord-name {
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
}
.ord-sub {
  font-size: 12.5px;
  color: var(--soft);
}
.ord-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.ord-total {
  font-weight: 800;
  font-size: 15px;
  color: var(--ink);
}
.ord-status {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  background: #fde9c8;
  color: #9a6a12;
}
.ord-status.novo {
  background: #dce2f9;
  color: #2d3a75;
}
.ord-status.aguardando_pagamento {
  background: #fbf0d4;
  color: #7a5a12;
}
.ord-status.pago {
  background: #d4efd9;
  color: #1e3a2a;
}
.ord-status.enviado {
  background: #eaddf7;
  color: #4c3370;
}
.ord-status.entregue {
  background: #e7e5ea;
  color: #3d3b42;
}
.ord-status.atrasado {
  background: #fbf0d4;
  color: #7a5a12;
}
.ord-status.cancelado {
  background: #fbe3e0;
  color: #8c2f25;
}

/* ===== ADMIN: detalhe do pedido ===== */
.ord-detail {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 8px;
}
.ord-card {
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg, 18px);
  padding: 18px;
  background: var(--bg);
}
.ord-card-h {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--soft);
  margin-bottom: 12px;
}
.ord-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  font-size: 14px;
}
.ord-line span {
  color: var(--soft);
}
.ord-line b {
  color: var(--ink);
  text-align: right;
}
.ord-line.total {
  border-top: 1px solid var(--line);
  margin-top: 8px;
  padding-top: 12px;
  font-size: 16px;
}
.ord-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
}
.ord-item-img {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: var(--placeholder, #eee);
  overflow: hidden;
  flex-shrink: 0;
}
.ord-item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ord-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ord-item-info b {
  font-size: 14px;
  color: var(--ink);
}
.ord-item-opt {
  font-size: 12px;
  color: var(--soft);
}
.ord-item-qty {
  font-size: 13px;
  font-weight: 700;
  color: var(--soft);
}
.ord-item-price {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
  min-width: 78px;
  text-align: right;
}
.ord-pix {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}
.ord-pix .qr-code-box {
  background: #fff;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--line);
}
.ord-pix .qr-code-box svg {
  width: 200px;
  height: 200px;
  display: block;
}
.ord-pix-code {
  width: 100%;
  font-size: 11px;
  color: var(--soft);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  word-break: break-all;
  font-family: ui-monospace, monospace;
}

/* ===== ADMIN: form de edição do pedido ===== */
.status-select {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.s-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 2px solid var(--line);
  background: var(--bg);
  cursor: pointer;
  font-family: var(--body);
  font-size: 14px;
  font-weight: 700;
  color: var(--soft);
  transition: all 0.15s;
}
.s-opt .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.s-opt[data-s="novo"].selected {
  background: #dce2f9;
  border-color: #2d3a75;
  color: #2d3a75;
}
.s-opt[data-s="pago"].selected {
  background: #d4efd9;
  border-color: #1e3a2a;
  color: #1e3a2a;
}
.s-opt[data-s="enviado"].selected {
  background: #eaddf7;
  border-color: #4c3370;
  color: #4c3370;
}
.s-opt[data-s="entregue"].selected {
  background: #e7e5ea;
  border-color: #5c5a61;
  color: #3d3b42;
}
.s-opt[data-s="atrasado"].selected {
  background: #fbf0d4;
  border-color: #7a5a12;
  color: #7a5a12;
}
.s-opt[data-s="cancelado"].selected {
  background: #fbe3e0;
  border-color: #8c2f25;
  color: #8c2f25;
}

.order-items {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.order-item {
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md, 20px);
  padding: 14px 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.order-item .thumb {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  flex-shrink: 0;
  background: var(--placeholder, #f1eff5);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.order-item .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.order-item .thumb svg {
  width: 19px;
  height: 19px;
  stroke: #c9c5d2;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.oi-inf {
  flex: 1;
  min-width: 0;
}
.oi-title {
  width: 100%;
  border: none;
  background: transparent;
  font-family: var(--display);
  font-weight: 700;
  font-size: 14.5px;
  color: var(--ink);
  padding: 2px 0;
  outline: none;
}
.oi-sub {
  font-size: 12.5px;
  color: var(--soft);
  font-weight: 500;
  margin-top: 2px;
}
.oi-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}
/* Abre o seletor de variações da linha (mesmo sheet do PDV). */
.oi-vars {
  order: 3;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--bg);
  cursor: pointer;
  font-family: var(--display);
  font-weight: 700;
  font-size: 12px;
  color: var(--soft);
  transition: border-color 0.13s, color 0.13s;
}
.oi-vars:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.oi-qty {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--placeholder, #f1eff5);
  border-radius: 10px;
  padding: 2px;
}
.oi-qty button {
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  font-size: 18px;
  color: var(--ink);
  border-radius: 8px;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.oi-qty span {
  min-width: 24px;
  text-align: center;
  font-weight: 700;
  font-size: 14px;
}
.oi-price {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--placeholder, #f1eff5);
  border-radius: 10px;
  padding: 0 10px;
  height: 34px;
}
.oi-price span {
  font-size: 12px;
  font-weight: 700;
  color: var(--soft);
}
.oi-price input {
  width: 72px;
  border: none;
  background: transparent;
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  outline: none;
}
.oi-del {
  width: 34px;
  height: 34px;
  border: none;
  background: transparent;
  border-radius: 10px;
  cursor: pointer;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--soft);
  transition: background 0.13s, color 0.13s;
}
.oi-del:hover {
  background: #fbe3e0;
  color: #8c2f25;
}
.oi-del svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
}

.totals {
  margin-top: 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg, 28px);
  padding: 18px 20px;
}
.total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 0;
  font-size: 14.5px;
  font-weight: 600;
}
.total-row.grand {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 800;
}
.total-row .label {
  color: var(--soft);
}
.total-row.grand .label {
  color: var(--ink);
}

select.input {
  cursor: pointer;
  appearance: none;
}

/* Botão imprimir (desktop na topbar, mobile na save-area) */
.btn-print { display: none; }

.save-area-row {
  display: flex;
  gap: 12px;
  align-items: stretch;
}
.save-area-row .btn-save {
  flex: 1;
}
.btn-print-m {
  width: 62px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.btn-print-m svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Copiar código PIX (detalhe do pedido) */
.ord-pix-copy {
  display: flex;
  align-items: stretch;
  gap: 8px;
  width: 100%;
}
.ord-pix-copy .ord-pix-code {
  flex: 1;
}
.ord-copy-btn {
  flex-shrink: 0;
  width: 46px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 10px;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--soft);
  transition: color 0.13s, border-color 0.13s;
}
.ord-copy-btn:hover {
  color: var(--ink);
  border-color: var(--soft);
}
.ord-copy-btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (min-width: 920px) {
  .btn-print {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    width: 54px;
    height: 54px;
    border-radius: 999px;
    border: 1.5px solid var(--line);
    background: var(--bg);
    color: var(--ink);
    cursor: pointer;
    transition: background 0.12s, transform 0.12s;
  }
  .btn-print:hover {
    background: var(--lilac-bg, #f5effb);
  }
  .btn-print svg {
    width: 21px;
    height: 21px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .btn-print + .btn-save-top {
    margin-left: 0;
  }
}

/* save-area-row só no mobile (o display:flex acima vencia o none do desktop) */
@media (min-width: 920px) {
  .save-area-row {
    display: none;
  }
}

/* ===== ADMIN: lista de pedidos (busca + chips + cards) ===== */
.btn-new-order {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  text-decoration: none;
  font-family: var(--display);
  font-weight: 700;
  font-size: 14.5px;
  flex-shrink: 0;
}
.btn-new-order svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ord-search {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--lilac-bg, #f5effb);
  border-radius: 999px;
  height: 54px;
  padding: 0 22px;
  margin-top: 22px;
}
.ord-search .lupa {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  stroke: var(--soft);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ord-search input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  outline: none;
  font-family: var(--body);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
}
.ord-search input::placeholder {
  color: var(--soft);
}

.status-wrap {
  position: relative;
  margin-top: 18px;
}
.status-chips {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.status-chips::-webkit-scrollbar {
  display: none;
}
.chip {
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--bg);
  font-family: var(--body);
  font-size: 14px;
  font-weight: 700;
  color: var(--soft);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: all 0.15s;
}
.chip .n {
  font-size: 11px;
  font-weight: 800;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--lilac-bg, #f5effb);
  color: var(--ink);
  padding: 0 5px;
}
.chip.on {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.chip.on .n {
  background: #d4efd9;
  color: #1e3a2a;
}

.o-list {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.o-card {
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg, 28px);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.o-card:hover {
  border-color: var(--soft);
  box-shadow: 0 6px 20px -14px rgba(22, 22, 22, 0.3);
}
.o-info {
  flex: 1;
  min-width: 0;
}
.o-num {
  font-family: var(--display);
  font-weight: 800;
  font-size: 16px;
  color: var(--ink);
}
.o-client {
  font-size: 13.5px;
  color: var(--soft);
  font-weight: 500;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.o-date {
  font-size: 12px;
  color: var(--soft);
  font-weight: 500;
  margin-top: 2px;
}
.o-right {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}
.o-amount {
  font-family: var(--display);
  font-weight: 800;
  font-size: 17px;
  color: var(--ink);
}

.ord-empty {
  margin-top: 20px;
  border: 2px dashed var(--line);
  border-radius: var(--r-lg, 28px);
  padding: 44px 28px;
  text-align: center;
}
.ord-empty b {
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  display: block;
}
.ord-empty p {
  font-size: 14.5px;
  color: var(--soft);
  font-weight: 500;
  margin-top: 8px;
}

/* ===== PDV (novo pedido) ===== */
.pdv { width: 100%; min-height: 100dvh; background: var(--bg); }
.pdv-body { display: flex; height: 100dvh; overflow: hidden; }
.col-left { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.pdv-top { padding: 18px 18px 14px; flex-shrink: 0; border-bottom: 1.5px solid var(--line); }
.pdv-header { display: flex; align-items: center; gap: 12px; }
.pdv-title { font-family: var(--display); font-weight: 800; font-size: 20px; }
.pdv-title small { font-family: var(--body); font-weight: 600; font-size: 13px; color: var(--soft); margin-left: 6px; }
.search-wrap { margin-top: 14px; position: relative; }
.search-box { width: 100%; height: 54px; border-radius: 999px; border: 2px solid var(--line); background: var(--bg); padding: 0 20px 0 50px; font-family: var(--body); font-size: 16px; font-weight: 500; color: var(--ink); outline: none; }
.search-box:focus { border-color: var(--ink); }
.search-ic { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; stroke: var(--soft); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.products-area { flex: 1; overflow-y: auto; padding: 16px 18px; }
.prod-empty { text-align: center; color: var(--soft); padding: 40px; font-weight: 600; }
.prod-grid { display: flex; flex-direction: column; gap: 8px; }
.prod-card { width: 100%; display: flex; align-items: center; gap: 12px; background: var(--bg); border: 1.5px solid var(--line); border-radius: var(--r-md, 20px); padding: 12px 14px; cursor: pointer; text-align: left; position: relative; transition: border-color 0.13s; }
.prod-card:hover { border-color: var(--soft); }
.prod-card.in-cart-yes { border-color: #1e3a2a; }
.prod-card .thumb { width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0; background: var(--placeholder, #f1eff5); display: grid; place-items: center; overflow: hidden; }
.prod-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.prod-card .thumb svg { width: 19px; height: 19px; stroke: #c9c5d2; fill: none; stroke-width: 1.8; }
.prod-card .inf { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.prod-card .pname { font-family: var(--display); font-weight: 700; font-size: 14.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prod-card .pprice { flex-shrink: 0; font-family: var(--display); font-weight: 800; font-size: 15px; color: var(--ink); }
.prod-card .in-cart { position: absolute; top: -8px; left: -8px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; background: #1e3a2a; color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; }

.cart-panel { width: 380px; flex-shrink: 0; border-left: 1.5px solid var(--line); display: flex; flex-direction: column; background: var(--bg); }
.cart-handle { display: flex; align-items: center; justify-content: space-between; padding: 20px 20px 14px; border-bottom: 1.5px solid var(--line); flex-shrink: 0; }
.cart-handle .lbl { font-family: var(--display); font-weight: 800; font-size: 16px; }
.cart-handle .total { font-family: var(--display); font-weight: 800; font-size: 17px; }
.cart-items { flex: 1; overflow-y: auto; padding: 8px 16px; }
.cart-empty { text-align: center; color: var(--soft); padding: 40px 20px; font-weight: 600; font-size: 14px; }
.cart-row { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--line); }
.cart-row .cname { flex: 1; min-width: 0; font-family: var(--display); font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cart-row .subtotal { font-family: var(--display); font-weight: 800; font-size: 14px; flex-shrink: 0; min-width: 72px; text-align: right; }
.cart-footer { flex-shrink: 0; padding: 16px 20px 20px; border-top: 1.5px solid var(--line); }
.cart-footer .total-line { display: flex; justify-content: space-between; font-weight: 700; color: var(--soft); font-size: 13px; margin-bottom: 12px; }
.btn-checkout { width: 100%; height: 58px; border-radius: 16px; border: none; cursor: pointer; background: var(--ink); color: #fff; font-family: var(--display); font-weight: 700; font-size: 16px; display: flex; align-items: center; justify-content: center; gap: 10px; transition: opacity 0.13s; }
.btn-checkout:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-checkout .checkout-total { font-size: 14px; font-weight: 700; opacity: 0.85; }

.pdv-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(22, 22, 22, 0.5); display: grid; place-items: center; padding: 20px; }
.pdv-checkout { width: 100%; max-width: 460px; max-height: 92dvh; overflow-y: auto; background: var(--bg); border-radius: var(--r-lg, 28px); padding: 22px; display: flex; flex-direction: column; }
.pc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.pc-head b { font-family: var(--display); font-weight: 800; font-size: 19px; }
.pc-close { width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer; background: var(--lilac-bg, #f5effb); font-size: 20px; color: var(--soft); }
.pc-body { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 8px; }
/* No grid, o espaçamento vem do gap — zera margens dos filhos diretos. */
.pc-body > .field,
.pc-body > .flow-fee,
.pc-body > .flow-err,
.pc-body > .flow-hint,
.pc-body > .flow-welcome { margin-top: 0; }
.pc-body > .field { align-self: start; }
.pdv-checkout .btn-save { flex-shrink: 0; margin-top: 18px; }

/* Seletor de variações — espelha as opções da vitrine no PDV e na edição de
   pedido (islands/Pdv.tsx e islands/OrderForm.tsx, via VariationPicker). */
.pdv-variations { width: 100%; max-width: 460px; max-height: 92dvh; background: var(--bg); border-radius: var(--r-lg, 28px); padding: 22px; display: flex; flex-direction: column; }
.pv-hint { font-size: 12.5px; font-weight: 500; color: var(--soft); margin-top: 2px; }
.pv-body { flex: 1; overflow-y: auto; margin-top: 6px; }
.pv-block { padding: 14px 0; border-bottom: 1px solid var(--line); }
.pv-block:last-child { border-bottom: none; }
.pv-lbl { font-family: var(--display); font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--soft); margin-bottom: 10px; }
.pv-opcional { margin-left: 8px; font-family: var(--body); font-weight: 600; font-size: 11px; text-transform: none; letter-spacing: 0; color: var(--soft); opacity: 0.8; }
.pv-opt { width: 100%; display: flex; align-items: center; gap: 12px; padding: 11px 14px; margin-bottom: 8px; background: var(--bg); border: 1.5px solid var(--line); border-radius: var(--r-md, 16px); cursor: pointer; text-align: left; transition: border-color 0.13s; }
.pv-opt:last-child { margin-bottom: 0; }
.pv-opt:hover { border-color: var(--soft); }
.pv-opt.sel { border-color: var(--ink); }
.pv-check { width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%; border: 2px solid var(--line); position: relative; }
.pv-opt.sel .pv-check { border-color: var(--ink); }
.pv-opt.sel .pv-check::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--ink); }
.pv-opt-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pv-opt-name { font-family: var(--display); font-weight: 700; font-size: 14.5px; color: var(--ink); }
.pv-opt-desc { font-size: 12.5px; font-weight: 500; color: var(--soft); }
.pv-opt-price { flex-shrink: 0; font-family: var(--display); font-weight: 800; font-size: 14px; color: var(--ink); }
.pv-swatches { display: flex; flex-wrap: wrap; gap: 12px; }
.pv-swatch { width: 74px; background: none; border: none; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pv-swatch-img { width: 62px; height: 62px; border-radius: 14px; overflow: hidden; background: var(--placeholder, #f1eff5); border: 2px solid var(--line); transition: border-color 0.13s; }
.pv-swatch.sel .pv-swatch-img { border-color: var(--ink); }
.pv-swatch-img img { width: 100%; height: 100%; object-fit: cover; }
.pv-swatch-name { font-size: 12px; font-weight: 600; color: var(--soft); text-align: center; line-height: 1.2; }
.pv-swatch.sel .pv-swatch-name { color: var(--ink); }
.pv-foot { flex-shrink: 0; display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1.5px solid var(--line); }
.pv-foot .btn-save { flex: 1; margin-top: 0; }

/* Produto com variações: aviso no card e preço "a partir de". */
.prod-card .has-vars { position: absolute; bottom: -7px; right: 12px; padding: 2px 8px; border-radius: 999px; background: var(--lilac-bg, #f5effb); border: 1px solid var(--line); font-size: 10.5px; font-weight: 700; color: var(--soft); }
.prod-card .pfrom { display: block; font-family: var(--body); font-size: 10.5px; font-weight: 600; color: var(--soft); line-height: 1; }
.prod-card .pprice { text-align: right; }

/* Linha do carrinho: título + opções escolhidas. */
.cart-row .cinfo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cart-row .cinfo .cname { white-space: normal; }
.cart-row .copts { font-size: 12px; font-weight: 600; color: var(--soft); line-height: 1.25; }

/* Tablet/desktop: modal mais largo e formulário em 2 colunas. */
@media (min-width: 620px) {
  .pdv-checkout { max-width: 620px; padding: 28px; }
  .pc-body { grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .pc-span { grid-column: 1 / -1; }
}
.flow-err { color: #e53935; font-size: 13px; font-weight: 600; margin-top: 10px; }
.flow-hint { color: var(--soft, #6b6b6b); font-size: 13px; font-weight: 500; margin-top: 10px; }
.tag-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.tag-chip-editable {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 13px;
  border-radius: 999px;
  background: var(--lilac-bg, #f5effb);
  border: 1px solid var(--line, #f0edf4);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink, #161616);
}
.tag-chip-editable button {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background: rgba(22, 22, 22, 0.08);
  color: var(--ink, #161616);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.tag-chip-editable button:hover { background: rgba(22, 22, 22, 0.16); }
.tag-add-row { display: flex; gap: 8px; }
.tag-add-row .input { flex: 1; }
.tag-add-btn {
  flex-shrink: 0;
  padding: 0 18px;
  border: none;
  border-radius: 14px;
  background: var(--ink, #161616);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}
.tag-add-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.tags-page { margin-top: 20px; display: grid; gap: 18px; }
.tag-create { display: flex; gap: 10px; }
.tag-create .input { flex: 1; }
.tag-create .sort { flex-shrink: 0; }
.tag-list { display: grid; gap: 10px; }
.tag-empty { color: var(--soft, #6b6b6b); font-size: 14px; line-height: 1.5; }
.tag-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border: 1.5px solid var(--line, #f0edf4);
  border-radius: 16px;
  background: var(--bg, #fff);
}
.tag-name { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tag-item .tag-chip {
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--lilac-bg, #f5effb);
  font-weight: 700;
  font-size: 13px;
}
.tag-count { color: var(--soft, #9b98a3); font-size: 13px; font-weight: 600; }
.tag-actions { display: flex; gap: 6px; flex-shrink: 0; }
.tag-edit { display: flex; gap: 8px; align-items: center; width: 100%; flex-wrap: wrap; }
.tag-edit .input { flex: 1; min-width: 160px; }
.icon-btn {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 12px;
  background: var(--lilac-bg, #f5effb);
  color: var(--ink, #161616);
  cursor: pointer;
}
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn.del { background: #ffe8e8; color: #8a1f1f; }
.sort.ghost { background: transparent; }
.client-cats { margin: 6px 0 14px; }
.client-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.client-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--lilac-bg, #f5effb);
  border: 1px solid var(--line, #f0edf4);
  color: var(--ink, #161616);
  font-size: 12px;
  font-weight: 700;
}
.stock-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.stock-fields .field { margin-top: 0; }
.stock-fields .stock-hint {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--soft, #6b6b6b);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.5;
}
.coupon-row { display: flex; gap: 8px; }
.coupon-row .input { flex: 1; text-transform: uppercase; }
.coupon-apply {
  flex-shrink: 0;
  padding: 0 20px;
  border: none;
  border-radius: 14px;
  background: var(--accent, var(--ink, #161616));
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}
.coupon-apply:disabled { opacity: 0.5; cursor: not-allowed; }
.coupon-applied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1.5px dashed var(--mint-deep, #1e3a2a);
  background: var(--mint, #d4efd9);
}
.coupon-applied-info { display: flex; flex-direction: column; gap: 2px; }
.coupon-applied-info b { font-size: 14px; letter-spacing: 0.03em; }
.coupon-applied-info span { font-size: 12.5px; color: var(--soft, #6b6b6b); }
.coupon-remove {
  flex-shrink: 0;
  border: none;
  background: none;
  color: #e5484d;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}
.flow-fee {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--card, #f7f7f7);
  font-size: 14px;
  font-weight: 700;
}
.total-fee .fee-input {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.total-fee .fee-input input {
  width: 82px;
  text-align: right;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 4px 8px;
  font: inherit;
  background: var(--card);
}

@media (max-width: 919px) {
  .pdv-body { display: block; height: auto; overflow: visible; }
  .col-left { display: block; }
  .pdv-top { position: sticky; top: 0; z-index: 5; background: var(--bg); }
  .products-area { overflow: visible; }
  .cart-panel { width: 100%; border-left: none; border-top: 1.5px solid var(--line); }
  .cart-items { max-height: none; }
}

/* Remover item no carrinho do PDV */
.pdv-remove {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: #fbe3e0;
  color: #8c2f25;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: background 0.13s;
}
.pdv-remove:hover {
  background: #f6cfc9;
}
.pdv-remove svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
}

/* Spinner do CEP */
.cep-wrap { position: relative; }
.cep-spinner {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
}

/* Entrega (settings) */
.dlv { margin-top: 28px; }
.dlv-modes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
.dlv-mode {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.dlv-mode.on { border-color: var(--accent); background: var(--accent-soft, #f0fdf4); }
.dlv-mode-label { font-weight: 700; font-size: 14px; }
.dlv-mode-hint { font-size: 12px; color: var(--muted); }
.dlv-city { font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.dlv-zones { display: flex; flex-direction: column; gap: 10px; }
.dlv-zone {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 10px;
  align-items: end;
}
.dlv-zone-del {
  width: 40px;
  height: 44px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.dlv-zone-del:hover { border-color: #ef4444; color: #ef4444; }
.dlv-add {
  align-self: flex-start;
  margin-top: 10px;
  padding: 8px 14px;
  border: 1.5px dashed var(--border);
  border-radius: 10px;
  background: transparent;
  color: var(--accent);
  font-weight: 700;
  cursor: pointer;
}
.dlv-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 14px;
  cursor: pointer;
}
.dlv-check input { width: 18px; height: 18px; accent-color: var(--accent); }
@media (min-width: 920px) {
  .dlv-modes { grid-template-columns: repeat(4, 1fr); }
}

/* WhatsApp (settings) */
.wa { margin-top: 28px; }
.wa-box {
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 18px;
  background: var(--card);
}
.wa-muted { color: var(--muted); font-size: 13.5px; }
.wa-hint { font-size: 13.5px; color: var(--muted); margin-bottom: 14px; }
.wa-qr-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.wa-qr {
  width: 240px;
  height: 240px;
  border-radius: 12px;
  background: #fff;
  padding: 8px;
}
.wa-poll {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
}
.wa-connected { display: flex; flex-direction: column; gap: 14px; }
.wa-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 15px;
}
.wa-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, .18);
}
.wa-num { color: var(--muted); font-weight: 500; margin-left: 4px; }
.wa-test { font-size: 13.5px; color: var(--accent); font-weight: 600; }
.wa-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.wa-num-row { display: flex; gap: 10px; align-items: stretch; }
.wa-num-row .input { flex: 1; }
.wa-num-row .btn-outline { white-space: nowrap; }

/* Identidade visual (settings) */
.brand { margin-top: 28px; }
.brand-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}
.brand-img { display: flex; align-items: center; gap: 14px; }
.brand-preview {
  width: 72px;
  height: 72px;
  border-radius: 14px;
  border: 1.5px solid var(--border);
  background: var(--placeholder);
  display: grid;
  place-items: center;
  overflow: hidden;
  flex-shrink: 0;
}
.brand-preview img { width: 100%; height: 100%; object-fit: contain; }
.brand-empty { color: var(--soft); font-size: 22px; }
/* Xadrez para revelar transparência do logo/ícone. */
.brand-preview-check {
  background-image:
    linear-gradient(45deg, #e6e3ec 25%, transparent 25%),
    linear-gradient(-45deg, #e6e3ec 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e6e3ec 75%),
    linear-gradient(-45deg, transparent 75%, #e6e3ec 75%);
  background-size: 12px 12px;
  background-position: 0 0, 0 6px, 6px -6px, -6px 0;
  background-color: #fff;
}
.brand-logo-h { display: flex; align-items: center; gap: 16px; }
.brand-logo-h input[type='range'] { flex: 1; accent-color: var(--violet); }
.brand-logo-demo {
  display: grid;
  place-items: center;
  min-width: 120px;
  height: 100px;
  padding: 8px 14px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--placeholder);
  overflow: hidden;
}
.brand-logo-demo img { width: auto; max-width: 200px; object-fit: contain; }
.brand-img-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.brand-color { display: flex; align-items: center; gap: 10px; }
.brand-color input[type='color'] {
  width: 46px;
  height: 44px;
  padding: 0;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: none;
  cursor: pointer;
}
.brand-color .input { max-width: 160px; }
.brand-reset {
  border: none;
  background: none;
  color: var(--soft);
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
}
.brand-tip {
  font-size: 13px;
  color: var(--muted);
  margin: 14px 0 16px;
}
@media (min-width: 920px) {
  .brand-grid { grid-template-columns: 1fr 1fr; gap: 18px; }
}
.btn-outline {
  padding: 10px 18px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: transparent;
  font-weight: 700;
  cursor: pointer;
  color: var(--ink, inherit);
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }
.btn-outline:disabled { opacity: .55; cursor: default; }

/* Clientes */
.client-avatar-sm {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 800;
  font-size: 15px;
  background: var(--lilac, #eaddf7);
  color: var(--lilac-deep, #4c3370);
}
.btn-danger-soft {
  width: 100%;
  height: 52px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  background: #fbe3e0;
  color: #8c2f25;
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
}
.btn-danger-soft:hover {
  background: #f6cfc9;
}

.payment-integration-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  padding: 18px;
  margin-bottom: 28px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}

.payment-integration-card p {
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.mp-card-wrap {
  min-height: 250px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.mp-3ds-frame {
  width: 100%;
  min-height: 520px;
  margin-top: 20px;
  border: 0;
  border-radius: 12px;
  background: #fff;
}

@media (min-width: 920px) {
  .payment-integration-card {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* Boas-vindas ao cliente identificado (checkout/PDV) */
.flow-welcome {
  background: #d4efd9;
  color: #1e3a2a;
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 600;
  margin-top: 6px;
}

/* Iniciais (avatar) no thumb das listas de pedidos/clientes */
.item .thumb {
  font-family: var(--display);
  font-weight: 800;
  font-size: 15px;
  color: var(--soft);
}

/* Observações/descrição da opção no item do pedido */
.oi-note {
  font-style: italic;
  color: var(--soft);
}

/* Lista de banners: thumb retangular + rótulo de vínculo */
.item .thumb.banner {
  width: 92px;
  border-radius: 12px;
}
.link-lbl {
  font-size: 12.5px;
  color: var(--soft);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 3px;
}

/* Hub de configurações (lista de seções) */
.settings-hub {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}
.settings-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg);
  text-decoration: none;
  color: var(--ink);
  transition: border-color .15s, transform .08s;
}
.settings-row:active { transform: scale(.99); }
.settings-row:hover { border-color: var(--violet); }
.settings-ic {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--lilac-bg);
  display: grid;
  place-items: center;
  font-size: 22px;
  flex-shrink: 0;
}
.settings-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.settings-txt b { font-family: var(--display); font-weight: 700; font-size: 16px; }
.settings-txt span { font-size: 13px; color: var(--soft); font-weight: 500; }
.settings-chevron {
  width: 22px;
  height: 22px;
  stroke: var(--soft);
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
@media (min-width: 920px) {
  .settings-hub { max-width: 640px; }
}

/* Upload da imagem OG (SEO) */
.og-field { display: flex; align-items: center; gap: 14px; }
.og-preview {
  width: 120px;
  height: 63px;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: var(--placeholder);
  display: grid;
  place-items: center;
  overflow: hidden;
  flex-shrink: 0;
  font-size: 11px;
  color: var(--soft);
  font-weight: 600;
}
.og-preview img { width: 100%; height: 100%; object-fit: cover; }

/* Modo de operação (settings/carrinho) */
.op-modes { display: flex; flex-direction: column; gap: 10px; }
.op-mode {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
  padding: 14px 16px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: var(--bg);
  cursor: pointer;
  transition: border-color .15s;
}
.op-mode.on { border-color: var(--violet); background: var(--lilac-bg); }
.op-mode-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--line);
  flex-shrink: 0;
  margin-top: 2px;
  position: relative;
}
.op-mode.on .op-mode-check { border-color: var(--violet); }
.op-mode.on .op-mode-check::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--violet);
}
.op-mode-txt { display: flex; flex-direction: column; gap: 3px; }
.op-mode-txt b { font-family: var(--display); font-weight: 700; font-size: 15px; }
.op-mode-txt span { font-size: 13px; color: var(--soft); font-weight: 500; line-height: 1.4; }

/* ===== ANALYTICS (home admin + /admin/analytics) ===== */
.dash-empty {
  padding: 22px;
  text-align: center;
  color: var(--soft);
  font-weight: 600;
  font-size: 13.5px;
}

.an-wrap { max-width: 1100px; }

.an-header { margin-bottom: 20px; }
.an-header h1 {
  font-family: var(--display);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.an-header p {
  color: var(--soft);
  font-weight: 600;
  font-size: 14px;
  margin-top: 4px;
}

.an-kpis {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 22px;
}
.an-kpi {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.an-kpi-lbl {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.an-kpi-val {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.an-kpi-sub { font-size: 12px; font-weight: 600; color: var(--soft); }

.an-delta { font-size: 12.5px; font-weight: 700; }
.an-delta.up { color: #1e9e5a; }
.an-delta.down { color: #e5484d; }
.an-delta.flat { color: var(--soft); }

.an-chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 140px;
  margin-top: 14px;
}
.an-chart-col {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: flex-end;
}
.an-chart-col i {
  display: block;
  width: 100%;
  border-radius: 4px 4px 0 0;
  background: var(--lilac);
  transition: background 0.13s;
}
.an-chart-col:hover i { background: var(--lilac-deep); }

.an-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.an-break { margin-top: 14px; }
.an-break + .an-break { margin-top: 18px; }
.an-break h3 {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.an-break-row { margin-bottom: 10px; }
.an-break-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}
.an-break-val { color: var(--soft); font-weight: 600; flex-shrink: 0; }
.an-track {
  height: 7px;
  border-radius: 99px;
  background: var(--line);
  overflow: hidden;
}
.an-track i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--mint-deep);
}

@media (min-width: 920px) {
  .an-kpis { grid-template-columns: repeat(4, 1fr); }
  .an-cols { grid-template-columns: 1fr 1fr; }
}

/* Lista "Mais vistos" (home admin) — thumb + título + contagem. */
.viewed-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
}
.viewed-row:last-child { border-bottom: none; }
.viewed-thumb {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  flex-shrink: 0;
  background: var(--placeholder);
  display: grid;
  place-items: center;
  overflow: hidden;
  font-size: 20px;
}
.viewed-thumb img { width: 100%; height: 100%; object-fit: cover; }
.viewed-info {
  flex: 1;
  min-width: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.viewed-count {
  flex-shrink: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: 16px;
  color: var(--lilac-deep);
}
.viewed-count small {
  font-family: var(--body);
  font-weight: 600;
  font-size: 11px;
  color: var(--soft);
  margin-left: 2px;
}

/* ===== FILTRO DE CATEGORIAS (chips com scroll + setas/fade no desktop) ===== */
.cats-wrap { position: relative; margin-top: 20px; }
.cats {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
  padding-bottom: 4px;
}
.cats::-webkit-scrollbar { display: none; }
.cat-arrow { display: none; }
.cat {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--body);
  font-size: 14.5px;
  font-weight: 700;
  height: 48px;
  padding: 0 20px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  background: var(--bg);
  border: 1.5px solid var(--line);
  color: var(--ink);
  transition: all 0.15s;
}
.cat .n {
  font-size: 11.5px;
  font-weight: 800;
  min-width: 24px;
  height: 24px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  padding: 0 7px;
  background: var(--lilac-bg);
  color: var(--ink);
}
.cat.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.cat.on .n { background: var(--mint); color: var(--mint-deep); }

@media (min-width: 920px) {
  .cat:hover { border-color: var(--ink); }
  .cat-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid var(--line);
    background: var(--bg);
    cursor: pointer;
    display: grid;
    place-items: center;
    box-shadow: 0 8px 20px -8px rgba(22, 22, 22, 0.25);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.15s;
  }
  .cat-arrow svg {
    width: 19px;
    height: 19px;
    stroke: var(--ink);
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .cat-arrow:hover { transform: translateY(-50%) scale(1.06); }
  .cat-arrow.left { left: -14px; }
  .cat-arrow.right { right: -14px; }
  .cat-arrow.show { opacity: 1; pointer-events: auto; }
  .cats-wrap.has-left .cats {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px);
    mask-image: linear-gradient(90deg, transparent 0, #000 56px);
  }
  .cats-wrap.has-right .cats {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent 100%);
  }
  .cats-wrap.has-left.has-right .cats {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
  }
}

/* ── Gerenciador de mídia (admin/media) ──────────────────────────────────── */

/* Segue a linguagem do .sort (Selecionar/Apagar), ao lado do grade/lista. */
.move-select {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23161616' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  max-width: 190px;
}

.view-toggle {
  display: flex;
  gap: 2px;
  background: var(--lilac-bg);
  border-radius: 999px;
  padding: 4px;
}

.view-toggle button {
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--soft);
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}

.view-toggle button.on {
  background: #fff;
  color: var(--ink);
}

.view-toggle svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.media-area {
  position: relative;
}

.media-crumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0 0 16px;
  font-size: 14px;
}

.media-crumbs span {
  color: var(--soft);
}

.media-crumbs button {
  cursor: pointer;
  border: none;
  background: transparent;
  font-family: var(--body);
  font-size: 14px;
  font-weight: 600;
  color: var(--soft);
  padding: 4px 0;
}

.media-crumbs button.on {
  color: var(--ink);
  font-weight: 700;
}

/* Zona de soltar do drag-and-drop de upload — cobre a área toda. */
.media-dropzone {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: var(--r);
  background: rgba(139, 124, 246, 0.08);
  border: 2px dashed var(--violet);
  pointer-events: none;
}

.media-area.dropping .media-dropzone {
  display: flex;
}

.media-dropzone-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 24px 32px;
  border-radius: var(--r-md);
  background: #fff;
  box-shadow: 0 18px 40px -14px rgba(22, 22, 22, 0.3);
  text-align: center;
}

.media-dropzone-card svg {
  width: 32px;
  height: 32px;
  fill: none;
  stroke: var(--violet);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.media-dropzone-card b {
  font-family: var(--display);
  font-size: 18px;
}

.media-dropzone-card span {
  font-size: 13px;
  color: var(--soft);
}

.media-error {
  margin: 0 0 14px;
  padding: 12px 16px;
  border-radius: var(--r-md);
  background: #ffe8e8;
  color: #8a1f1f;
  font-size: 14px;
  font-weight: 600;
}

.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px;
}

.media-card {
  cursor: pointer;
  border-radius: var(--r-md);
  padding: 8px;
  background: #fff;
  border: 1px solid var(--line);
  transition: transform 0.12s, border-color 0.15s;
}

.media-card:active {
  transform: scale(0.98);
}

.media-card.selected {
  border-color: var(--violet);
  background: var(--lilac-bg);
}

/* Alças de arraste anunciam o gesto; sem isto nada indica que dá pra arrastar. */
.media-thumb,
.media-card.folder .folder-face {
  cursor: grab;
}

.media-dragging,
.media-dragging .media-thumb,
.media-dragging .folder-face,
.drag-chosen,
.drag-chosen .media-thumb {
  cursor: grabbing !important;
}

.media-dragging {
  user-select: none;
}

/* No modo fallback (toque) o Sortable põe um clone sob o dedo — ele precisa ser
   transparente ao elementFromPoint, senão o alvo detectado é sempre o clone. */
.sortable-fallback {
  pointer-events: none !important;
}

.media-thumb {
  position: relative;
  aspect-ratio: 1;
  border-radius: 14px;
  overflow: hidden;
  background: var(--placeholder);
}

.media-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.media-check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: transparent;
  border: 2px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
}

.media-check.on {
  background: var(--violet);
  color: #fff;
}

/* Cards de pasta: a .folder-drop cobre o card e é a lista-alvo do Sortable,
   então soltar um arquivo em qualquer ponto do card cai dentro da pasta. */
.media-card.folder .folder-face {
  position: relative;
  aspect-ratio: 1;
  border-radius: 14px;
  background: var(--lilac-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.folder-ic svg {
  width: 46%;
  height: 46%;
  fill: none;
  stroke: var(--lilac-deep);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.folder-ic {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Pista de que a pasta aceita o arquivo, aplicada no onMove do Sortable. */
.media-card.folder.drop-on .folder-face {
  outline: 2px dashed var(--violet);
  outline-offset: -3px;
  background: rgba(139, 124, 246, 0.16);
  transform: scale(1.04);
}

.media-card.folder .folder-face {
  transition: transform 0.14s ease, background 0.14s ease;
}

.folder-acts {
  display: inline-flex;
  gap: 2px;
  margin-left: auto;
}

.folder-acts button {
  cursor: pointer;
  border: none;
  background: transparent;
  padding: 2px;
  color: var(--soft);
  display: flex;
}

.folder-acts button:hover {
  color: var(--ink);
}

.folder-acts svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.thumb.folder-thumb {
  background: var(--lilac-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.thumb.folder-thumb svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: var(--lilac-deep);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.media-name {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-sub {
  font-size: 12px;
  color: var(--soft);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Popover de detalhes — mesma mecânica do carrinho da loja. A nav mobile some
   enquanto ele está aberto: `.main` anima opacity com fill `both`, virando um
   stacking context permanente que prenderia o popover abaixo da pill. */
.media-sheet-open .nav {
  display: none;
}

.media-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0);
  pointer-events: none;
  transition: background 0.28s ease;
}

.media-overlay.on {
  background: rgba(0, 0, 0, 0.52);
  pointer-events: auto;
}

.media-sheet {
  width: 100%;
  max-width: 520px;
  max-height: 92dvh;
  background: #fff;
  border-radius: var(--r) var(--r) 0 0;
  transform: translateY(100%);
  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.media-overlay.on .media-sheet {
  transform: translateY(0);
}

.media-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.media-sheet-head b {
  font-family: var(--display);
  font-size: 18px;
}

.media-sheet-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

.media-preview {
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--placeholder);
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 40dvh;
}

.media-preview img {
  max-width: 100%;
  max-height: 40dvh;
  object-fit: contain;
  display: block;
}

.media-title {
  margin: 16px 0 4px;
  font-weight: 700;
  word-break: break-all;
}

.media-facts {
  display: flex;
  flex-direction: column;
}

.media-facts > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.media-facts > div:last-child {
  border-bottom: none;
}

.media-facts dt {
  font-size: 14px;
  color: var(--soft);
  flex-shrink: 0;
}

.media-facts dd {
  font-size: 14px;
  font-weight: 600;
  text-align: right;
  word-break: break-word;
}

.media-sheet-foot {
  display: flex;
  gap: 10px;
  padding: 16px 20px calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  flex-shrink: 0;
  overflow-x: auto;
}

.media-sheet-foot .sort {
  flex: 1;
  min-width: fit-content;
}

@media (min-width: 920px) {
  .media-grid {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 18px;
  }

  .media-overlay {
    align-items: center;
  }

  .media-sheet {
    border-radius: var(--r);
    transform: translateY(24px) scale(0.98);
    opacity: 0;
    transition: transform 0.28s ease, opacity 0.28s ease;
  }

  .media-overlay.on .media-sheet {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* Matriz de notificações do tenant (evento × canal) — /dash */
.notify-matrix {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}
.notify-row {
  display: grid;
  grid-template-columns: 1fr 72px 72px;
  align-items: center;
  gap: 8px;
}
.notify-row .switch {
  justify-self: center;
}
.notify-head {
  font-size: 12px;
  color: var(--soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.notify-head span {
  text-align: center;
}
.notify-head span:first-child {
  text-align: left;
}
.notify-label {
  font-size: 14px;
  font-weight: 600;
}

/* Seletor reutilizável: biblioteca do tenant ou novo upload. */
.media-source {
  position: relative;
  display: inline-flex;
}

.media-source-cover,
.media-source-slot,
.media-source-avatar {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  padding: 0;
  cursor: pointer;
}

.media-source-cover,
.media-source-slot {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

.media-source-cover .ph-content {
  width: 100%;
}

.img-single:not(.filled) {
  overflow: visible;
}

.slot > .media-source,
.opt-img > .media-source,
.img-single > .media-source {
  width: 100%;
  height: 100%;
}

.avatar-slot > .media-source {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
}

.avatar-slot {
  overflow: visible;
}

.avatar-slot img {
  overflow: hidden;
}

.media-source-avatar {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  z-index: 2;
}

.avatar-slot .remove {
  z-index: 4;
}

.media-source-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 350;
  width: min(290px, calc(100vw - 32px));
  padding: 8px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg);
  box-shadow: 0 18px 50px rgba(22, 22, 22, 0.18);
}

.slot .media-source-menu,
.opt-img .media-source-menu,
.avatar-slot .media-source-menu {
  left: 50%;
  transform: translateX(-50%);
}

.media-source-menu > button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 10px 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.media-source-menu > button:hover {
  background: var(--lilac-bg);
}

.media-source-menu button span:last-child {
  display: grid;
  gap: 3px;
}

.media-source-menu b {
  font-size: 13.5px;
  line-height: 1.2;
}

.media-source-menu small {
  color: var(--soft);
  font-size: 11.5px;
}

.media-source-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--lilac-bg);
}

.media-source-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.media-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-top: 24px;
  background: rgba(22, 22, 22, 0.48);
}

.media-picker {
  width: 100%;
  max-height: min(88vh, 780px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--bg);
  box-shadow: 0 -18px 60px rgba(22, 22, 22, 0.2);
}

.media-picker header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 20px 14px;
  border-bottom: 1px solid var(--line);
}

.media-picker header > div {
  display: grid;
  gap: 3px;
}

.media-picker header b {
  font-family: var(--display);
  font-size: 20px;
  letter-spacing: -0.015em;
}

.media-picker header span,
.media-picker-state {
  color: var(--soft);
  font-size: 13px;
}

.media-picker header > button {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: var(--placeholder);
  color: var(--ink);
  font-size: 22px;
  cursor: pointer;
}

.media-picker-search {
  padding: 16px 20px;
}

.media-picker-grid {
  min-height: 220px;
  padding: 0 20px 20px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 10px;
}

.media-picker-grid > button {
  min-width: 0;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.12s;
}

.media-picker-grid > button.selected {
  border-color: var(--violet);
  background: var(--lilac-bg);
}

.media-picker-grid > button:active {
  transform: scale(0.98);
}

.media-picker-thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
}

.media-picker-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  background: var(--placeholder);
}

.media-picker-check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 2px solid var(--bg);
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  box-shadow: 0 4px 12px rgba(22, 22, 22, 0.2);
}

.media-picker-check svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.media-picker-card-text {
  width: 100%;
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 0 3px 3px;
}

.media-picker-card-text b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
  font-weight: 700;
}

.media-picker-card-text small {
  color: var(--soft);
  font-size: 10.5px;
}

.media-picker-grid .media-picker-state,
.media-picker-grid .flow-err {
  grid-column: 1 / -1;
  padding: 28px 0;
  text-align: center;
}

.media-picker footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 72px;
  padding: 11px 20px calc(11px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  color: var(--soft);
  font-size: 12px;
}

.media-picker-confirm {
  min-width: 168px;
  background: var(--ink);
  color: #fff;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 919px) {
  .media-source-menu,
  .slot .media-source-menu,
  .opt-img .media-source-menu,
  .avatar-slot .media-source-menu {
    position: fixed;
    top: auto;
    right: 16px;
    bottom: calc(18px + env(safe-area-inset-bottom));
    left: 16px;
    width: auto;
    transform: none;
  }
}

@media (min-width: 920px) {
  .media-picker-overlay {
    align-items: center;
    padding: 28px;
  }

  .media-picker {
    width: min(820px, 100%);
    border-bottom: 1px solid var(--line);
    border-radius: var(--r-lg);
  }

  .media-picker-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ===== CENTRAL DE AJUDA (/admin/help) ===== */
.help-search {
  margin-top: 8px;
  background: var(--lilac-bg);
  border-radius: 999px;
  height: 56px;
  padding: 0 8px 0 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 520px;
}

.help-search svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  stroke: var(--soft);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.help-search input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  outline: none;
  font-family: var(--body);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}

.help-search input::-webkit-search-cancel-button {
  display: none;
}

.help-section {
  margin-top: 30px;
}

.help-sec-head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.help-sec-ic {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--lilac-bg);
  display: grid;
  place-items: center;
  font-size: 22px;
  flex-shrink: 0;
}

.help-sec-txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.help-sec-txt b {
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
}

.help-sec-txt span {
  font-size: 13px;
  color: var(--soft);
  font-weight: 500;
}

.help-soon {
  margin: 12px 0 0 60px;
  font-size: 13.5px;
  color: var(--soft);
  font-weight: 500;
}

.help-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.help-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px 12px 12px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg);
  text-align: left;
  cursor: pointer;
  font-family: var(--body);
  color: var(--ink);
  transition: border-color .15s, transform .08s;
}

.help-card:hover {
  border-color: var(--violet);
}

.help-card:active {
  transform: scale(.99);
}

.help-thumb {
  position: relative;
  width: 116px;
  height: 66px;
  border-radius: 14px;
  background: var(--lilac-bg);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  overflow: hidden;
}

/* hqdefault do YouTube vem 4:3 com tarja preta — o cover recorta pra 16:9. */
.help-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.help-thumb svg {
  position: relative;
  width: 26px;
  height: 26px;
  fill: var(--lilac-deep);
  stroke: none;
}

/* Sobre a capa, o play ganha disco branco pra manter contraste. */
.help-thumb.has-img svg {
  width: 30px;
  height: 30px;
  padding: 7px;
  border-radius: 50%;
  background: rgba(253, 252, 254, .92);
  fill: var(--ink);
  box-sizing: border-box;
}

.help-dur {
  position: absolute;
  right: 6px;
  bottom: 5px;
  background: rgba(22, 22, 22, .78);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
}

.help-card-txt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.help-card-txt b {
  font-family: var(--display);
  font-weight: 700;
  font-size: 15.5px;
}

.help-card-txt span {
  font-size: 13px;
  color: var(--soft);
  font-weight: 500;
  line-height: 1.45;
}

.help-ext {
  margin-left: 5px;
  font-size: 12px;
  color: var(--soft);
}

.help-empty {
  margin-top: 20px;
  border: 2px dashed var(--line);
  border-radius: var(--r-lg);
  padding: 44px 28px;
  text-align: center;
}

.help-empty .ic {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--lilac-bg);
  display: grid;
  place-items: center;
  margin: 0 auto;
}

.help-empty .ic svg {
  width: 27px;
  height: 27px;
  stroke: var(--lilac-deep);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.help-empty b {
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  display: block;
  margin-top: 18px;
}

.help-empty p {
  font-size: 14.5px;
  color: var(--soft);
  font-weight: 500;
  margin-top: 8px;
  line-height: 1.55;
  max-width: 420px;
  margin-inline: auto;
}

/* Player em overlay */
.help-player {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(22, 22, 22, .72);
  display: grid;
  place-items: center;
  padding: 20px;
}

.help-player-box {
  width: min(880px, 100%);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  background: var(--bg);
  border-radius: var(--r-md);
  padding: 16px;
}

.help-player-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.help-player-head b {
  flex: 1;
  min-width: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
}

.help-player-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--lilac-bg);
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}

.help-player-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
}

.help-player-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.help-player-desc {
  margin-top: 12px;
  font-size: 14px;
  color: var(--soft);
  font-weight: 500;
  line-height: 1.55;
}

@media (min-width: 920px) {
  .help-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Economia acompanha o período selecionado no card de vendas. */
.savings-block { gap: 10px; }
.savings-value { font-family: var(--display); font-weight: 800; font-size: clamp(24px, 3.5vw, 36px); line-height: 1.1; overflow-wrap: anywhere; }
.savings-reference { font-size: 12px; line-height: 1.4; opacity: .8; }

.business-hours { margin-top: 18px; display: grid; gap: 14px; }
.business-day { padding: 14px 0; border-bottom: 1px solid var(--line); display: grid; gap: 10px; }
.business-day label { display: flex; align-items: center; gap: 8px; }
.business-day small { opacity: .6; }
.business-day-times { display: flex; flex-wrap: wrap; gap: 14px; }
.business-day-times label { font-size: 13px; }
.business-day-times input[type=time] { width: 120px; }
.business-closed { margin: 12px 24px; }

/* Composição meia a meia: escolhas compartilhadas sem duplicar adicionais. */
.half-editor,.half-settings{border:1px solid #ddd;border-radius:16px;padding:16px;margin:12px 0;max-width:100%;box-sizing:border-box}.half-editor label,.half-settings label{display:block;margin:10px 0}.half-editor select,.half-settings select{width:100%;max-width:100%;box-sizing:border-box}.half-editor fieldset{border:0;padding:8px 0;min-width:0}.half-options{display:flex;gap:8px;flex-wrap:wrap}.half-option{border:1px solid #ccc;background:transparent;padding:10px;border-radius:12px;cursor:pointer}.half-option.selected{border:2px solid var(--accent,#7151d5)}.half-option:disabled{opacity:.5;cursor:not-allowed}.half-entry{margin:12px 0}.half-settings fieldset label{display:block}

/* Categoria: mesmos campos, chips e toggle das configurações do painel. */
.category-half { margin-top: 28px; min-width: 0; }
.category-half .toggle-row { padding-block: 14px; }
.category-half .category-half-enabled { border-bottom: 1px solid var(--line); }
.category-half .txt { min-width: 0; line-height: 1.45; }
.category-half-options { padding-bottom: 16px; }
.category-half .input { min-width: 0; max-width: 100%; padding-inline: 14px; }
.category-half .hint, .category-half-hint { line-height: 1.5; }
.category-half-sizes { margin: 20px 0 0; padding: 0; border: 0; min-width: 0; }
.category-half-sizes legend { margin-bottom: 10px; padding: 0; font-size: 14.5px; font-weight: 700; }
.category-half-sizes .appear-chip { height: auto; min-height: 38px; white-space: normal; overflow-wrap: anywhere; padding-block: 8px; }
.category-half-hint { font: 500 12.5px/1.5 var(--body); color: var(--soft); margin: 8px 0 0; }
.category-half-note { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.category-half :is(.switch, .appear-chip):focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.half-editor .btn-save,.half-entry .btn-save{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid currentColor;border-radius:12px;padding:10px 14px;margin:10px 8px 4px 0;background:transparent;color:inherit;font:inherit;font-weight:600;cursor:pointer}.half-editor .btn-save:disabled{opacity:.5;cursor:not-allowed}.half-editor small{display:block;margin-top:6px}.half-editor h3{margin:0 0 14px}.half-editor .input{font:inherit;border:1px solid #ddd;border-radius:12px;padding:12px}.half-entry .btn-save{background:var(--accent,#7151d5);color:#fff;border-color:transparent}

.half-hint{font-size:13px;line-height:1.5;padding:0 20px;color:var(--text-muted,#666)}.half-buy{flex-direction:column;gap:2px}.half-buy small{font-size:10px;font-weight:400}.half-flavors p{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.half-flavors b{font-size:14px}.half-flavors .cart-item-opt{width:auto}.sheet-bar:has(.half-buy) .qty-ctrl{flex-shrink:0}.sheet-bar:has(.half-buy) .add-b{min-width:0;padding-inline:12px}

/* PDV: compact product actions and a clear catalog → order → customer flow. */
.pdv .pdv-guide{font:400 13px/1.5 var(--body);color:var(--soft);margin:10px 0 0}
.pdv .pdv-product{border:1.5px solid var(--line);border-radius:18px;padding:4px;background:var(--bg)}
.pdv .pdv-product .prod-card{border:0;border-radius:14px;box-shadow:none;padding:10px;min-height:68px;background:transparent}
.pdv .pdv-product .prod-card .has-vars{display:none}
.pdv .pdv-product .pname{white-space:normal;line-height:1.35;text-align:left}
.pdv .pdv-product-actions{display:flex;gap:8px;padding:0 10px 10px 68px;flex-wrap:wrap}
.pdv-item-action{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px 15px;max-width:100%;border:1px solid var(--line);border-radius:10px;background:var(--lilac-bg,#f5effb);color:var(--ink);font:600 13px/1.3 var(--body);cursor:pointer;box-shadow:none}
.pdv-item-action-half{background:transparent}
.pdv-item-action:hover,.pdv-item-action:focus-visible{border-color:var(--ink);background:var(--lilac-bg,#f5effb)}
.pdv .cart-empty{display:grid;gap:8px;padding:40px 12px;line-height:1.5;font-weight:400}
.pdv .cart-empty b{font-weight:700;color:var(--ink)}
.pdv-cart-count{color:var(--soft);font:500 13px var(--body)}
.pdv .cart-row{display:grid;grid-template-columns:minmax(0,1fr) auto 30px;gap:8px;align-items:center;padding:14px 0}
.pdv .cart-row .cinfo{grid-column:1 / -1;display:flex;flex-direction:column;gap:5px;min-width:0}
.pdv .cart-row .cname{display:block;white-space:normal;line-height:1.4}
.pdv .cart-row .copts{font:400 12px/1.5 var(--body);color:var(--soft)}
.pdv-edit-line{align-self:flex-start;padding:3px 0;border:0;background:transparent;color:var(--ink);font:600 12px/1.5 var(--body);text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:28px}
.pdv .cart-row .oi-qty{justify-self:start;margin:0}
.pdv .cart-row .subtotal{min-width:0}
.pdv .cart-footer .total-line{align-items:center;margin-bottom:14px}
.pdv .cart-footer .total-line strong{font-size:20px;color:var(--ink)}
.pdv .btn-checkout{height:48px;font-size:14px;border-radius:12px}
.pdv-next-hint{margin:9px 0 0;text-align:center;font:400 11px/1.5 var(--body);color:var(--soft)}
.pdv-cart-jump,.pdv-products-jump{display:none}
.pdv-half-dialog{overflow-y:auto;overscroll-behavior:contain;max-height:calc(100dvh - 40px)}
.pdv-half-dialog .half-editor{border:0;border-radius:0;padding:0;margin:16px 0 0;box-shadow:none}
.pdv-half-dialog .half-editor>h3{font:700 14px/1.4 var(--body);margin-bottom:12px}
.pdv-half-dialog .half-editor label{font:600 13px/1.5 var(--body);margin:12px 0}
.pdv-half-dialog .half-editor select{margin-top:5px;min-height:44px;padding:9px 12px;font:400 14px var(--body);border-radius:10px}
.pdv-half-dialog .half-editor fieldset{padding:10px 0}
.pdv-half-dialog .half-editor legend{font:600 13px/1.5 var(--body);padding-bottom:7px}
.pdv-half-dialog .half-option{font:500 13px/1.3 var(--body);min-height:40px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;color:var(--ink)}
.pdv-half-dialog .half-option.selected{background:var(--lilac-bg,#f5effb);border-color:var(--ink);font-weight:700}
.pdv-half-dialog .half-editor>[role=status]{background:var(--lilac-bg,#f5effb);padding:12px;border-radius:10px;font:600 14px/1.5 var(--body);margin:12px 0 6px}
.pdv-half-dialog .half-editor>small{font:400 12px/1.5 var(--body);color:var(--soft)}
.pdv-half-dialog .half-editor>.btn-save{width:auto;max-width:100%;height:auto;min-height:44px;display:inline-flex;margin:16px 8px 0 0;padding:10px 16px;border:1px solid var(--line);border-radius:10px;box-shadow:none;font:600 13px/1.4 var(--body);color:var(--ink);background:transparent;vertical-align:top}
.pdv-half-dialog .half-editor>.btn-save:first-of-type{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.pdv-half-dialog .half-editor>.btn-save:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:919px){
 .pdv .pdv-header{gap:8px}.pdv-cart-jump{display:block;margin-left:auto;min-height:40px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);font:600 12px var(--body);white-space:nowrap}
 .pdv .pdv-top{padding:12px}.pdv .pdv-guide{font-size:12px}.pdv .search-box{height:44px;font-size:14px}.pdv .products-area{padding:12px}
 .pdv .cart-panel{scroll-margin-top:175px}.pdv .cart-handle{gap:10px;padding:16px 12px}.pdv .cart-items{padding:0 12px}
 .pdv-products-jump{display:block;margin-left:auto;border:0;background:transparent;color:var(--ink);font:600 12px var(--body);text-decoration:underline;min-height:40px}
 .pdv .cart-footer{padding:16px 12px}.pdv .pdv-overlay{padding:12px}.pdv-half-dialog{padding:18px;max-height:calc(100dvh - 24px);border-radius:20px}
 .pdv .prod-card .inf{align-items:flex-start;flex-direction:column;gap:5px}.pdv .pdv-product-actions{padding-left:10px}.pdv .pdv-product .pname{font-size:14px}
 .pdv .pdv-title{font-size:18px}.pdv .pdv-title small{display:block;margin-left:0;font-size:11px}
}
@media(min-width:920px){.pdv .pdv-product{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center}.pdv .pdv-product-actions{padding:10px;flex-wrap:nowrap}.pdv .pdv-product .prod-card{min-height:76px}}

/* PDV selected options follow the platform's black/white contrast. */
.pdv .pdv-item-action{background:transparent}
.pdv .pdv-item-action:hover,.pdv .pdv-item-action:focus-visible{background:#f3f3f3}
.pdv .pdv-item-action.selected{background:var(--ink,#161616);color:#fff;border-color:var(--ink,#161616)}
.pdv-half-dialog .half-option.selected{background:var(--ink,#161616);color:#fff;border-color:var(--ink,#161616)}
.pdv .pv-opt.sel,.pdv .pv-swatch.sel{background:var(--ink,#161616);color:#fff;border-color:var(--ink,#161616)}
.pdv .pv-opt.sel .pv-opt-name,.pdv .pv-opt.sel .pv-opt-desc,.pdv .pv-opt.sel .pv-opt-price,.pdv .pv-swatch.sel .pv-swatch-name{color:#fff}
.pdv .pv-opt.sel .pv-check{border-color:#fff}.pdv .pv-opt.sel .pv-check::after{background:#fff}
.pdv-half-dialog .flavor-select{margin:12px 0}
.pdv-half-dialog .flavor-select>label{margin:0 0 5px}
.pdv-half-dialog .flavor-select .combo{margin:0}
.pdv-half-dialog .flavor-select input{padding:10px 36px 10px 12px;min-height:44px;font:400 14px var(--body);border-radius:10px;max-width:100%}
.pdv-half-dialog .flavor-select input:focus{border-color:var(--ink);outline:2px solid var(--ink);outline-offset:2px}
.flavor-select-icon{position:absolute;right:12px;top:13px;width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;pointer-events:none}
.pdv-half-dialog .flavor-select .combo-list{position:relative;top:auto;margin-top:8px;max-height:min(220px,30dvh);overflow-y:auto;overscroll-behavior:contain;border-radius:10px}
.pdv-half-dialog .flavor-select .combo-opt{min-height:44px;padding:10px 12px;font-size:13px;gap:12px;white-space:normal}
.pdv-half-dialog .flavor-select .combo-opt span:first-child{min-width:0;overflow-wrap:anywhere}
.pdv-half-dialog .flavor-select .combo-opt.selected{background:var(--ink,#161616);color:#fff}
.pdv-half-dialog .flavor-select .combo-opt.highlighted{outline:2px solid var(--ink);outline-offset:-3px;background:#f3f3f3}
.pdv-half-dialog .flavor-select .combo-opt.selected.highlighted{background:var(--ink,#161616);outline-color:#fff}
.pdv-half-dialog .flavor-select .combo-opt:disabled{opacity:.45;cursor:not-allowed}
.pdv-half-dialog .flavor-select .combo-empty{padding:14px 12px;font-size:13px}

/* Subscription cycle summaries share the existing form panel. */
.invoice-cycle-summary { display: grid; gap: 8px; line-height: 1.5; overflow-wrap: anywhere; }
.invoice-cycle-summary small { color: var(--soft); }

.brand-category-navigation { margin-top: 32px; }
.brand-category-navigation .toggle-row { margin-top: 20px; }
.brand-category-navigation .switch.on { background: var(--ink); }
.brand-cats-preview { margin-top: 18px; border: 1px solid var(--line); border-radius: var(--r-lg); overflow-x: auto; }
.brand-cats-rail { display: flex; width: max-content; padding: 16px; }
.brand-cat-preview { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 84px; font-size: 11px; text-align: center; overflow-wrap: anywhere; }
.brand-cat-circle { display: grid; place-items: center; width: 70px; height: 70px; border-radius: 50%; background: transparent; font-size: 28px; }
.brand-category-navigation .brand-cat-circle { overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.item-image-background > .sort { margin-top: 10px; }

/* Platform tenant actions and billing policy share the existing compact controls. */
.tenant-top-actions { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px;flex-wrap:wrap; }
.tenant-top-actions form { margin:0 0 0 auto; }
.tenant-top-actions .sort { display:inline-flex;align-items:center;justify-content:center;width:auto;height:36px;min-height:36px;box-sizing:border-box;padding:0 12px;white-space:nowrap; }
.tenant-top-actions .tenant-access { background:#111;color:#fff;border-color:#111; }
.billing-automation { margin:20px 0;padding:18px;border:1px solid var(--line,#e5e7eb);border-radius:12px; }
.billing-automation .sec-label { margin-top:0; }
.billing-automation .hint { line-height:1.5; }
.variation-defaults{display:grid;gap:12px;margin:14px 0;padding:16px;border:1px solid var(--line);border-radius:14px}.variation-defaults label{display:grid;gap:6px;font-size:13px;font-weight:600}.variation-default-price{font-size:11px;max-width:130px}.variation-library .opt-row{flex-wrap:wrap}.variation-library .opt-del,.variation-library .vb-del{width:auto;gap:5px;font-size:11px;padding:8px}.variation-library .opt-del svg,.variation-library .vb-del svg{width:16px;flex-shrink:0}
.variation-library .opt-del,.variation-library .vb-del{display:inline-flex;align-items:center;justify-content:center;height:auto;min-height:36px;border-radius:10px;white-space:nowrap;padding:8px 10px;line-height:1.2}

.pdv-line-observation{font-size:12px;line-height:1.4;white-space:pre-wrap;overflow-wrap:anywhere;margin:6px 0;color:var(--ink)}
.pdv-variations .pv-body>.field{margin:16px 0 0}
.pdv-variations .pv-hint{white-space:pre-line}

.load-more{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:24px;padding:14px;color:inherit;font-size:13px}
.load-more p{margin:0}
.media-picker-grid>.load-more{grid-column:1/-1}

/* Item editor: quiet sections and a shared scale for form controls. */
[data-island=ItemForm] { --display: var(--body); }
[data-island=ItemForm] .top-title { font-weight: 600; letter-spacing: -.5px; }
.item-editor { --editor-border: #e3e3e8; --editor-muted: #707079; --editor-radius: 10px; }
.item-editor .item-panel { min-width: 0; padding: 0; border: 0; background: none; }
.item-editor .item-variants:empty { display: none; }
.item-editor .sec-label { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; font: 600 17px/1.4 var(--body); letter-spacing: 0; text-transform: none; margin-bottom: 16px; }
.item-editor .sec-label:not(:first-child) { margin-top: 28px; }
.item-editor .sec-label:first-child { margin-top: 0 !important; }
.item-editor .sec-label small { display: block; margin: 0; font: 400 13px/1.5 var(--body); color: var(--editor-muted); }
.item-editor .field { margin: 0 0 20px; }
.item-editor .field:last-child { margin-bottom: 0; }
.item-editor .field label { display: block; font: 500 15px/1.5 var(--body); margin-bottom: 8px; }
.item-editor .input { border: 1px solid var(--editor-border); border-radius: var(--editor-radius); background: #fff; padding: 11px 12px; font: 400 16px/1.5 var(--body); box-sizing: border-box; }
.item-editor input.input { height: 44px; min-height: 44px; }
.item-editor textarea.input { min-height: 112px; resize: vertical; }
.item-editor #it-desc { min-height: 180px; }
.item-editor .char-count { margin-top: 6px; font: 400 12px/1.4 var(--body); color: var(--editor-muted); }
.item-editor .input:focus { border-color: #8a8a94; outline: 2px solid #ededf0; outline-offset: 1px; }
.item-editor .seg { display: flex; padding: 4px; gap: 4px; height: auto; border: 1px solid var(--editor-border); border-radius: var(--editor-radius); background: transparent; }
.item-editor .seg button { min-height: 36px; height: auto; border-radius: 7px; font: 500 15px/1.4 var(--body); }
.item-editor .seg button.on { background: var(--ink); color: #fff; box-shadow: none; }
.item-editor .seg-hint, .item-editor .flow-hint, .item-editor .stock-hint { font: 400 13px/1.5 var(--body); color: var(--editor-muted); margin-top: 8px; }
.item-editor .toggle-row { gap: 16px; padding: 14px 0; align-items: center; }
.item-editor .toggle-row .txt { flex: 1; min-width: 0; }
.item-editor .toggle-row .txt b { display: block; font: 500 15px/1.5 var(--body); }
.item-editor .toggle-row .txt span { display: block; font: 400 13px/1.5 var(--body); color: var(--editor-muted); margin-top: 3px; }
.item-editor .switch { flex-shrink: 0; }
.item-editor .toggles-group { padding: 0; border: 0; border-radius: 0; background: none; }
.item-editor .price-wrap { display: flex; align-items: center; border: 1px solid var(--editor-border); border-radius: var(--editor-radius); background: #fff; }
.item-editor .price-wrap .prefix { position: static; transform: none; padding-left: 12px; flex-shrink: 0; font: 500 15px/1.5 var(--body); color: var(--editor-muted); }
.item-editor .price-wrap .input { flex: 1; width: 0; min-width: 0; padding-left: 8px; text-align: left; border: 0; background: transparent; box-shadow: none; outline: none; }
.item-editor .price-wrap:focus-within { border-color: #8a8a94; outline: 2px solid #ededf0; outline-offset: 1px; }
.item-editor .var-block { margin-top: 20px; padding: 0; border: 0; border-top: 1px solid var(--editor-border); border-radius: 0; background: none; }
.item-editor .vb-head { margin: 20px 0 8px; gap: 12px; }
.item-editor .vb-name { padding: 0; height: auto; background: none; color: var(--ink); font: 600 16px/1.5 var(--body); overflow-wrap: anywhere; }
.item-editor .vb-actions { flex-shrink: 0; }
.item-editor :is(.vb-move,.vb-del,.opt-del) { width: 36px; height: 36px; min-height: 36px; border: 1px solid var(--editor-border); border-radius: 8px; background: transparent; }
.item-editor .opt-item { padding: 16px 0; margin: 0; border: 0; border-top: 1px solid var(--editor-border); border-radius: 0; background: none; }
.item-editor .opt-row { margin: 0; gap: 12px; }
.item-editor .opt-img { width: 44px; height: 44px; border-radius: var(--editor-radius); }
.item-editor .variation-option-image { border-radius: var(--editor-radius); object-fit: contain; }
.item-editor .variation-image-hint { display: block; margin: 10px 0; font: 400 14px/1.5 var(--body); color: var(--editor-muted); }
.item-editor :is(.variation-inherit,.variation-availability) { display: flex; align-items: flex-start; gap: 8px; }
.item-editor .variation-image-hint input { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 1px; accent-color: var(--ink); }
.item-editor .opt-prices { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px; margin-top: 12px; }
.item-editor .opt-extra { margin: 10px 0; }
.item-editor .opt-desc-toggle { font: 500 14px/1.5 var(--body); color: var(--editor-muted); }
.item-editor .opt-desc-field { margin-top: 0; }
.item-editor .appear-chips { gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.item-editor .appear-chip { min-height: 36px; height: auto; padding: 8px 12px; border-radius: 8px; font: 500 14px/1.4 var(--body); }
.item-editor .img-grid { gap: 12px; margin-top: 0; }
.item-editor .slot { border-radius: var(--editor-radius); border-width: 1px; }
.item-editor .pill { height: auto; padding: 8px 12px; border-radius: 8px; font: 500 14px/1.5 var(--body); }
.item-editor .sel-pills { gap: 8px; margin-top: 12px; }
@media (max-width: 999px) {
  .item-editor.form-grid { display: flex; flex-direction: column; gap: 28px; }
  .item-editor > .col-a, .item-editor > .col-b { display: contents; }
  .item-editor .item-media { order: 0; }
  .item-editor .item-information { order: 1; }
  .item-editor .item-kind { order: 2; }
  .item-editor .item-pricing { order: 3; }
  .item-editor .item-variants { order: 4; }
  .item-editor .item-categories { order: 5; }
  .item-editor .save-area { order: 6; }
}
@media (min-width: 1000px) {
  .item-editor.form-grid { grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); gap: 48px; align-items: start; }
  .item-editor > .col-a, .item-editor > .col-b { display: flex; flex-direction: column; gap: 32px; margin-top: 0; }
  .item-editor .img-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .item-editor .img-grid .slot:first-child.filled { grid-column: 1 / -1; aspect-ratio: 1.15; }
}

[data-island=ItemForm] :is(.btn-save-top,.btn-back) { height: 44px; min-height: 44px; }
[data-island=ItemForm] .btn-save-top { border-radius: 10px; font: 600 15px/1.4 var(--body); padding: 0 20px; }
[data-island=ItemForm] .btn-back { width: 44px; }
.item-editor .brand-color { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; gap: 10px; max-width: none; }
.item-editor .brand-color input[type=color] { width: 44px; height: 44px; border: 1px solid var(--editor-border); border-radius: var(--editor-radius); padding: 3px; }
.item-editor .item-image-background .sort { min-height: 36px; height: auto; margin-top: 10px; padding: 8px 12px; border: 1px solid var(--editor-border); border-radius: 8px; background: transparent; color: var(--ink); font: 500 14px/1.4 var(--body); }
.item-editor .item-image-background .avatar-hint { text-align: left; margin: 8px 0 0; font: 400 13px/1.5 var(--body); color: var(--editor-muted); }
.item-editor .pill { background: transparent; border: 1px solid var(--editor-border); color: var(--ink); }
@media (max-width: 480px) {
  .item-editor .opt-prices { grid-template-columns: minmax(0,1fr); }
  .item-editor .input { font-size: 16px; }
}
.item-editor .opt-prices .price-wrap .input { padding-left: 8px; width: 0; }
.item-editor .price-wrap.promo { max-width: none; margin-left: 0; }
/* Contextual help keeps the editor quiet; the portal stays clear of clipping containers. */
.item-help-trigger { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; flex: 0 0 28px; width: 28px; height: 28px; padding: 5px; margin-left: 4px; border: 0; border-radius: 50%; background: transparent; color: #85858f; cursor: help; }
.item-help-trigger svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.item-help-trigger:hover,.item-help-trigger:focus-visible { color: var(--ink); background: #ededf0; }
.item-help-trigger:focus-visible { outline: 2px solid #8a8a94; outline-offset: 1px; }
.item-help-tooltip { z-index: 10000; box-sizing: border-box; padding: 12px 14px; border-radius: 10px; background: #222228; color: #fff; font: 400 14px/1.55 var(--body,sans-serif); box-shadow: 0 4px 18px #0002; overflow-wrap: anywhere; }
.item-editor .sec-label:has(>.item-help-trigger) { flex-direction: row; align-items: center; gap: 4px; }
.item-editor .toggle-row .txt b { display: flex; align-items: center; gap: 4px; }
.item-editor .image-color-label { display: flex; align-items: center; margin-bottom: 8px; }
.item-editor .image-color-label label { margin: 0; }
.item-editor .brand-color { display: flex; gap: 8px; }
.item-editor .brand-color>.input { flex: 1; width: 0; min-width: 0; }
.item-editor .brand-color>input[type=color] { flex: 0 0 44px; }
.item-editor .variation-inherit { align-items: center; }
.item-editor .variation-inherit span { flex: 1; }
.item-editor .brand-color>.input { max-width: none; }

/* Price controls share a row when the column can fit readable labels and values. */
.item-editor .item-pricing { container-type: inline-size; }
.item-price-fields { display: grid; grid-template-columns: minmax(0,1fr); gap: 16px; }
.item-editor .item-price-fields .field { min-width: 0; margin: 0; }
.item-editor .item-price-fields .item-price-heading { display: flex; align-items: center; min-height: 44px; margin: 0 0 8px; font: 500 15px/1.4 var(--body); }
.item-editor .promo-heading { gap: 4px; }
.item-editor .promo-heading>span { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.item-editor .promo-heading .item-help-trigger { margin-left: 0; }
.item-editor .promo-heading .switch { margin-left: 4px; }
.item-editor .opt-row .opt-name { text-overflow: ellipsis; }
@container (min-width: 440px) {
  .item-price-fields { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
}
/* Item photos: animated sorting, with a clear placeholder and lifted preview. */
.item-photo-grid .item-photo { cursor: grab; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.item-photo-grid .item-photo:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.item-photo-grid .item-photo img { pointer-events: none; }
.item-photo-grid .item-photo-chosen { cursor: grabbing; box-shadow: 0 0 0 2px var(--ink); }
.item-photo-grid .item-photo-ghost { opacity: .22; border: 2px dashed #8a8a94; }
.item-photo-floating { position: fixed; z-index: 10000 !important; overflow: hidden; border-radius: 10px; background: #fff; box-shadow: 0 12px 32px #0003; opacity: .94 !important; pointer-events: none !important; transform-origin: center; }
.item-photo-floating img { width: 100%; height: 100%; object-fit: contain; }
.item-photo-floating .remove { display: none !important; }
.item-photo-grid.photo-sorting .item-photo { cursor: grabbing; }
@media (prefers-reduced-motion: reduce) {
  .item-photo-grid .item-photo { transition: none !important; }
}

.item-editor .appear-chips + .item-image-background { margin-top: 20px; }
.payment-methods-form, .delivery-settings-form { max-width: 720px; margin: 28px 0 40px; }
.payment-methods-form h2, .delivery-settings-form h2,.payment-integrations-title { font: 600 22px/1.4 var(--body); margin: 24px 0 12px; }
.payment-method-card, .settings-method-card { margin: 20px 0; padding: 20px; border: 1px solid #e3e3e8; border-radius: 12px; }
.payment-method-heading, .settings-method-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.payment-method-heading h3, .settings-method-heading h3 { font: 600 18px/1.4 var(--body); }
.payment-method-heading .switch, .settings-method-heading .switch { flex-shrink: 0; }
.payment-help { font: 400 15px/1.6 var(--body); color: #707079; margin: 12px 0; }
.payment-methods-form .input, .delivery-settings-form .input { border-radius: 10px; font-size: 16px; }

/* Entrega segue a hierarquia e os controles de pagamentos. */
.delivery-fields {border:0;padding:0;margin:0;min-width:0}
.delivery-zones-title {font:600 16px/1.5 var(--body);margin:24px 0 8px}
.delivery-settings-form .field {min-width:0}
.delivery-settings-form .dlv-zone {grid-template-columns:minmax(0,1fr) minmax(0,1fr) 40px}
.delivery-settings-form .dlv-zone .field {margin-bottom:0}
.delivery-settings-form .dlv-city {font-size:14px}
.delivery-settings-form .dlv-add {color:var(--text);border-style:solid;font-size:14px;min-height:40px}
.delivery-error {color:#b42318;font-size:15px;line-height:1.5;margin:16px 0}
.shipping-parcel-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
.shipping-parcel-grid .field {min-width:0;margin:0}

/* Cotações Frenet: controles compartilhados pela vitrine e pelo PDV. */
.frenet-options {border:0;padding:0;margin:16px 0;min-width:0}
.frenet-options legend {font-family:inherit;font-size:16px;font-weight:600;line-height:1.5;margin-bottom:12px}
.frenet-options label {display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--border,#e3e3e8);border-radius:10px;margin-bottom:10px;cursor:pointer;color:inherit}
.frenet-options label:has(input:checked) {border-color:var(--green,var(--ink,#161616));background:color-mix(in srgb,var(--green,var(--ink,#161616)) 8%,transparent)}
.frenet-options label span {display:flex;flex-direction:column;gap:4px;min-width:0;overflow-wrap:anywhere}
.frenet-options input[type=radio] {width:18px;height:18px;margin:0;flex-shrink:0;accent-color:var(--green,var(--ink,#161616))}
.frenet-options small {display:block;font-size:13px;line-height:1.5;opacity:.75}
.frenet-retry {font:inherit;font-size:14px;padding:10px 14px;border:1px solid var(--border,#e3e3e8);border-radius:10px;background:transparent;color:inherit;cursor:pointer;margin:8px 0}

.delivery-settings-form h4 {font:600 16px/1.5 var(--body);margin:24px 0 10px}
.footer-settings {margin:32px 0;padding-bottom:32px;border-bottom:1px solid var(--line)}
.footer-settings>label {display:flex;align-items:center;gap:10px;font:500 16px/1.6 var(--body);margin:20px 0}
.footer-settings h3 {font:600 22px/1.5 var(--body);margin-bottom:16px}
.footer-settings .field {margin:18px 0}
.footer-settings .purchase-input-grid {display:grid;grid-template-columns:1fr 1fr;gap:16px}
.footer-column-settings {padding:20px 0;border-top:1px solid var(--line);margin-top:24px}
.footer-link-settings {display:grid;grid-template-columns:1fr 1.5fr 36px;gap:10px;margin:12px 0}
.footer-link-settings .input {min-width:0}
.footer-link-settings>button {border:0;background:transparent;font-size:22px;cursor:pointer}
@media(max-width:600px){.footer-link-settings {grid-template-columns:minmax(0,1fr) 36px}.footer-link-settings .input:nth-child(2) {grid-column:1;grid-row:2}.footer-link-settings>button {grid-column:2;grid-row:1/span 2}}
/* Operation settings use the same section spacing, fields and switches as the page. */
.operation-settings .operation-section {margin:28px 0 0}
.operation-settings .operation-section .sec-label {margin-bottom:16px}
.operation-settings .operation-section .field {margin:0 0 16px}
.operation-settings .operation-section .field>label {display:block;font:600 14px/1.5 var(--body);color:var(--ink);margin-bottom:8px}
.operation-settings .operation-section select.input {appearance:auto;box-sizing:border-box;width:100%;min-height:50px;border:1px solid var(--line);border-radius:10px;padding:10px 14px;background:var(--white,#fff);color:var(--ink);font:500 15px/1.5 var(--body)}
.operation-settings .operation-section .toggle-row .txt {min-width:0}
.operation-settings .operation-section .switch {flex-shrink:0}
/* Item editor C-30: scoped tokens and card rhythm from the supplied edititem reference. */
.item-editor {--editor-border:#e3e3e1;--editor-muted:#737373;gap:20px;align-items:start}
.item-editor .col-a,.item-editor .col-b {display:flex;flex-direction:column;gap:20px;min-width:0}
.item-editor .item-panel {padding:24px;background:#fafafa;border:1px solid #ededeb;border-radius:14px;margin:0}
.item-editor .item-panel>.sec-label {font-size:18px;line-height:1.4;margin-bottom:20px}
.item-editor .input,.item-editor .price-wrap {background:#fff;border-color:var(--editor-border);border-radius:10px;min-height:48px}
.item-editor .input {font-size:15px;line-height:1.5}
.item-editor .item-short-description {min-height:84px;height:auto;resize:vertical}
.item-editor .item-subsection {padding-top:20px;margin-top:24px;border-top:1px solid var(--editor-border)}
.item-editor .item-subsection .sec-label {font-size:16px}
.item-editor .item-panel.item-variants:empty {display:none}
.item-editor .item-photo-grid {margin:0 0 20px}
.item-editor .item-configuration .toggles-group {border:0;padding:0;background:transparent}
.item-editor .item-configuration .toggle-row {padding:12px 0}
.item-editor .description-editor {border:1px solid var(--editor-border);background:#fff;border-radius:10px;overflow:hidden}
.item-editor .pell-actionbar {display:flex;flex-wrap:wrap;gap:4px;padding:8px;border-bottom:1px solid var(--editor-border);background:#f6f6f4}
.item-editor .pell-button {display:inline-flex;align-items:center;justify-content:center;width:36px;height:34px;padding:6px;border:0;border-radius:6px;background:transparent;color:#1a1a1a;cursor:pointer;font:600 15px var(--body)}
.item-editor .pell-button:hover,.item-editor .pell-button-selected {background:#e5e5e2}
.item-editor .pell-content {padding:16px;min-height:220px;max-height:540px;overflow:auto;outline:none;font:400 15px/1.7 var(--body);overflow-wrap:anywhere}
.item-editor .pell-content:empty:before {content:attr(data-placeholder);color:var(--editor-muted);pointer-events:none}
.item-editor .pell-content p {margin:0 0 12px}
.item-editor .pell-content ul,.item-editor .pell-content ol {padding-left:24px;margin:12px 0}
.item-editor .pell-content h2,.item-editor .pell-content h3 {font:600 20px/1.4 var(--body);margin:16px 0 10px}
.item-editor .pell-content a {color:#2457ad;text-decoration:underline}
.item-editor .description-editor:focus-within {border-color:#737373}
@media(max-width:759px){.item-editor .item-panel{padding:18px}.item-editor .col-a,.item-editor .col-b{display:contents}.item-editor .item-information{order:1}.item-editor .item-media{order:2}.item-editor .item-kind{order:3}.item-editor .item-variants{order:4}.item-editor .item-categories{order:5}.item-editor .item-configuration{order:6}.item-editor .item-shipping{order:7}.item-editor .save-area{order:8}.item-editor .pell-content{min-height:180px}}
@media(min-width:960px){.item-editor.form-grid{grid-template-columns:minmax(0,1.15fr) minmax(300px,1fr);gap:20px}}
.item-editor .item-photo-grid:not(:has(.filled))>.slot{grid-column:1/-1;aspect-ratio:1.3;min-height:220px}
/* C-31: align the real desktop editor to the supplied reference. */
@media(min-width:960px){.main:has([data-island=ItemForm]){max-width:1240px}.item-editor.form-grid{grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr)}}
.item-editor .item-panel{border:0;border-radius:18px;padding:28px}
.item-editor .item-short-description{height:88px;min-height:88px}
.item-editor .pell-content{height:250px;min-height:180px;max-height:520px;resize:vertical}
.item-editor .item-image-setting-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}
.item-editor .item-image-setting-heading .sec-label{font-size:15px;margin:0!important}
.item-editor .item-image-setting-heading .switch{flex-shrink:0}
.item-editor .item-image-overrides{margin-top:20px}
.item-editor .item-image-overrides>.sec-label{font-size:14px}
.item-editor .media-source-slot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.item-editor .gallery-upload-hint{font:400 13px/1.5 var(--body);color:#4f4f4f;max-width:230px;text-align:center}
.item-editor .item-photo-grid:not(:has(.filled))>.slot{min-height:180px;aspect-ratio:auto;height:180px}
.item-editor .pell-button{font-weight:400;font-size:14px;color:#4f4f4f}
.item-editor .pell-button-selected{background:#d4efd9;color:#161616}
@media(max-width:759px){.item-editor .item-panel{padding:18px}}
.item-editor textarea.item-short-description{height:88px;min-height:88px}
.item-editor .pell-button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.item-editor .item-identifier-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.item-editor .item-identifier-grid>.field:last-child{grid-column:1/-1}
.item-editor .item-identifier-grid .field{min-width:0;margin:0 0 16px}
.item-editor .remissive-picker .selected-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.item-editor .remissive-picker .tag{max-width:100%;overflow-wrap:anywhere;display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:24px;background:var(--mint);font:500 14px/1.4 var(--body)}
.item-editor .remissive-picker .tag .x{border:0;background:transparent;color:inherit;cursor:pointer;min-width:24px;min-height:24px;font-size:18px}
.item-editor .remissive-status{padding:12px 16px;font:400 13px/1.5 var(--body);color:#4f4f4f}
.item-editor .remissive-picker .combo-opt.active{background:#f2f2f0}
@media(max-width:759px){.item-editor .item-identification{order:6}.item-editor .item-configuration{order:7}.item-editor .item-shipping{order:8}.item-editor .save-area{order:9}}
.historical-order-notice{display:flex;flex-direction:column;gap:8px;padding:16px 20px;margin:0 0 24px;border:1px solid var(--line,#e5e5e5);border-radius:12px;background:var(--surface,#fafafa);font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.item-editor .item-tags-picker .selected-tags{max-height:184px;overflow:auto;padding:2px 4px 2px 0;scrollbar-width:thin}
/* Dashboard grid children must never impose their product-title min-content width. */
.dash>.col-left,.dash>.col-right,.dash .sec,.dash .blocks,.dash .block,.dash .dash-list,.dash .dash-row{min-width:0;max-width:100%}
.dash .dash-row{width:100%;box-sizing:border-box}
.dash .sales .value{font-size:clamp(24px,3.4vw,46px);overflow-wrap:anywhere;line-height:1.15}
.dash .savings-value{font-size:clamp(22px,2.6vw,36px);overflow-wrap:normal;word-break:normal;line-height:1.15}
@media(min-width:900px){.dash{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}}

.dash .sales,.dash .block{container-type:inline-size}
.dash .sales .value{font-size:clamp(20px,10cqw,46px)}
.dash .savings-value{font-size:clamp(18px,12cqw,36px)}

.dash .dashboard-visits{grid-template-columns:minmax(0,1fr)}
.action-toast{position:fixed;z-index:1500;right:24px;top:24px;display:flex;align-items:center;gap:10px;padding:14px 16px;max-width:calc(100vw - 48px);background:#fff;color:#171717;border:1px solid var(--line);border-radius:14px;box-shadow:0 8px 30px #0002;opacity:0;visibility:hidden;transform:translateY(-8px);transition:.18s}.action-toast.is-visible{opacity:1;visibility:visible;transform:none}.action-toast svg{width:20px;height:20px;color:#287347}.action-toast button{border:0;background:transparent;font-size:22px;margin-left:8px}

.saved-carts-topbar .search-inline{display:flex;min-width:0;margin-left:auto}
.saved-carts .tags-page{gap:16px}.saved-carts-hint{margin:0}
.saved-carts .saved-cart-row{min-width:0}
.saved-carts .saved-cart-name{min-width:0;flex:1;flex-direction:column;align-items:flex-start;gap:8px}
.saved-carts .tag-chip{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;box-sizing:border-box;color:inherit;text-decoration:none}
.saved-carts .tag-count{line-height:1.5;overflow-wrap:anywhere}
.saved-carts .tag-actions{align-self:center}
.saved-carts .saved-carts-empty{margin:12px 0}
.saved-carts .tag-list[aria-busy=true]{opacity:.6}
.saved-cart-pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px}
.saved-carts .icon-btn:disabled{opacity:.45;cursor:wait}
@media(max-width:700px){.saved-carts-topbar{flex-wrap:wrap}.saved-carts-topbar .top-title{flex:1}.saved-carts-topbar .search-inline{flex:0 0 100%;max-width:none;margin-top:8px}.saved-carts .saved-cart-row{padding:12px}.saved-carts .tag-count{font-size:12px}}

/* Delivery areas reuse settings fields, tag rows and the form save actions. */
.delivery-areas-form .areas-list-toolbar{display:flex;align-items:center;gap:16px;margin:24px 0 18px}
.delivery-areas-form .areas-list-toolbar .search-inline{display:flex;min-width:0;margin-right:auto}
.delivery-areas-form .area-list-row{min-width:0}
.delivery-areas-form .area-name{flex:1;min-width:0;border:0;background:transparent;text-align:left;color:inherit;font:inherit;cursor:pointer;padding:0}
.delivery-areas-form .area-name strong{display:block;font-size:15px;font-weight:600;margin-bottom:8px;overflow-wrap:anywhere}
.delivery-areas-form .area-name .tag-count{display:block;line-height:1.5;overflow-wrap:anywhere}
.delivery-areas-form .tag-actions{align-items:center}
.delivery-areas-form .icon-btn:disabled{opacity:.35;cursor:default}
.delivery-areas-form .areas-mobile-save{margin-top:28px}
.delivery-area-drawer{position:fixed;inset:0 0 0 auto;margin:0;width:min(720px,100vw);max-width:100vw;height:100dvh;max-height:100dvh;box-sizing:border-box;border:0;border-radius:20px 0 0 20px;padding:0;background:var(--bg);color:var(--ink);box-shadow:-12px 0 50px #0002;overflow:hidden}
.delivery-area-drawer[open]{display:flex;flex-direction:column;animation:delivery-area-enter .18s ease-out}
.delivery-area-drawer.is-closing{animation:delivery-area-leave .18s ease-in forwards}
.delivery-area-drawer::backdrop{background:#0005}
.area-drawer-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px 28px;border-bottom:1px solid var(--line);flex-shrink:0}
.area-drawer-heading h2{margin:0}
.area-drawer-form{display:flex;flex-direction:column;min-height:0;flex:1}
.area-drawer-fields{flex:1;min-height:0;overflow:auto;padding:28px;overscroll-behavior:contain}
.area-drawer-fields .field{margin-bottom:22px;min-width:0}
.area-drawer-fields .field>label{display:block;margin-bottom:10px;font:600 14px/1.5 var(--body)}
.area-drawer-fields .input{box-sizing:border-box;width:100%;min-width:0}
.area-drawer-fields textarea{resize:vertical;font:inherit;line-height:1.5}
.area-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:20px 0;font:500 14px/1.5 var(--body)}
.area-toggle-row .switch{flex-shrink:0}
.area-method-card .settings-method-heading{margin-bottom:22px}
.area-method-card .settings-method-heading h3{overflow-wrap:anywhere;min-width:0;margin:0}
.area-method-card .tag-actions{align-items:center}
.area-method-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.area-drawer-footer{display:flex;align-items:center;gap:16px;justify-content:flex-end;padding:18px 28px;border-top:1px solid var(--line);background:var(--bg);padding-bottom:max(18px,env(safe-area-inset-bottom));flex-shrink:0}
.area-drawer-footer .btn-save{margin:0;width:auto;min-width:150px}
@keyframes delivery-area-enter{from{transform:translateX(100%)}to{transform:translateX(0)}}
@keyframes delivery-area-leave{from{transform:translateX(0)}to{transform:translateX(100%)}}
@media(min-width:920px){.delivery-areas-form .areas-mobile-save{display:none}}
@media(max-width:700px){.delivery-areas-form .areas-list-toolbar{flex-wrap:wrap}.delivery-areas-form .areas-list-toolbar .search-inline{flex-basis:100%;max-width:none}.delivery-areas-form .area-list-row{padding:12px;flex-wrap:wrap}.delivery-areas-form .area-name{flex-basis:100%}.delivery-areas-form .tag-actions{margin-left:auto}.delivery-area-drawer{width:100vw;border-radius:0}.area-drawer-heading{padding:18px 20px}.area-drawer-fields{padding:20px}.area-method-grid{grid-template-columns:minmax(0,1fr)}.area-drawer-footer{padding-left:20px;padding-right:20px}.area-method-card{padding:16px}}
@media(prefers-reduced-motion:reduce){.delivery-area-drawer[open],.delivery-area-drawer.is-closing{animation:none}}