/* =====================================================================
   Dozeria — componentes compartilhados entre o cardápio e o painel
   ===================================================================== */

/* ---------------------------------------------------------------------
   Botões
   ------------------------------------------------------------------- */

.dz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dz-2);
  min-height: var(--dz-tap);
  padding: var(--dz-2) var(--dz-5);
  border: 1px solid transparent;
  border-radius: var(--dz-r-pill);
  background: var(--dz-primary);
  color: var(--dz-text-invert);
  font-family: var(--dz-font-ui);
  font-size: var(--dz-fs-sm);
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
  text-align: center;
  transition: background-color var(--dz-dur-1) var(--dz-ease),
              border-color var(--dz-dur-1) var(--dz-ease),
              transform var(--dz-dur-1) var(--dz-ease),
              opacity var(--dz-dur-1) var(--dz-ease);
}

.dz-btn:hover { background: var(--dz-primary-hover); color: var(--dz-text-invert); }
.dz-btn:active { transform: translateY(1px); }

.dz-btn[disabled],
.dz-btn[aria-disabled="true"] {
  opacity: .55;
  pointer-events: none;
}

.dz-btn--accent {
  background: var(--dz-accent);
  color: var(--dz-cocoa-900);
}
.dz-btn--accent:hover { background: var(--dz-blue-400); color: var(--dz-cocoa-900); }

.dz-btn--ghost {
  background: transparent;
  border-color: var(--dz-border-strong);
  color: var(--dz-cocoa-800);
}
.dz-btn--ghost:hover { background: var(--dz-surface-alt); color: var(--dz-cocoa-900); }

.dz-btn--soft {
  background: var(--dz-surface-alt);
  color: var(--dz-cocoa-800);
}
.dz-btn--soft:hover { background: var(--dz-sand-300); color: var(--dz-cocoa-900); }

.dz-btn--whats {
  background: var(--dz-whats-500);
  color: #06301B;
}
.dz-btn--whats:hover { background: var(--dz-whats-700); color: #fff; }

.dz-btn--danger {
  background: transparent;
  border-color: var(--dz-danger);
  color: var(--dz-danger);
}
.dz-btn--danger:hover { background: var(--dz-danger-soft); color: var(--dz-danger); }

.dz-btn--block { width: 100%; }
.dz-btn--lg { min-height: 52px; padding-inline: var(--dz-6); font-size: var(--dz-fs-base); }

/* Fold fechado e SE 1ª: menos respiro lateral e sem espaçamento de letra,
   para "Enviar pedido no WhatsApp" caber numa linha. */
@media (max-width: 359px) {
  .dz-btn--lg { padding-inline: var(--dz-4); letter-spacing: 0; }

  /* O fim do rótulo ("no WhatsApp", "para os dados") some da tela no Fold
     fechado — o ícone ao lado já diz o destino — mas continua para o leitor
     de tela. Sem isso o botão quebrava em duas linhas. */
  .dz-btn__extra {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}
.dz-btn--sm { min-height: 36px; padding-inline: var(--dz-4); font-size: var(--dz-fs-xs); }

/* Em tela de toque os controles compactos do painel sobem para 44px.
   No mouse eles ficam em 36px, senão as tabelas do admin viram um rolo. */
@media (hover: none) and (pointer: coarse) {
  .dz-btn--sm { min-height: var(--dz-tap); }
  .dz-btn--sm.dz-btn--icon { width: var(--dz-tap); min-width: var(--dz-tap); }
  .dz-disclosure { min-height: var(--dz-tap); }
}

/* Botão só com ícone — mantém 44px de alvo. */
.dz-btn--icon {
  width: var(--dz-tap);
  min-width: var(--dz-tap);
  padding: 0;
  border-radius: var(--dz-r-pill);
}

.dz-btn-link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  background: none;
  border: 0;
  padding: 0;
  color: var(--dz-cocoa-700);
  font-family: var(--dz-font-ui);
  font-size: var(--dz-fs-sm);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.dz-btn-link:hover { color: var(--dz-cocoa-900); }

/* <summary> usado como "mostrar mais". Precisa de área de toque própria:
   um summary sem padding fica com a altura da linha (~21px). */
.dz-disclosure {
  display: inline-flex;
  align-items: center;
  gap: var(--dz-2);
  min-height: 40px;
  padding-block: var(--dz-2);
  font-family: var(--dz-font-ui);
  font-size: var(--dz-fs-sm);
  font-weight: 600;
  color: var(--dz-cocoa-700);
  cursor: pointer;
  list-style: none;
}

.dz-disclosure::-webkit-details-marker { display: none; }
.dz-disclosure::marker { content: ""; }

.dz-disclosure::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--dz-dur-1) var(--dz-ease);
}

details[open] > .dz-disclosure::after { transform: translateY(1px) rotate(-135deg); }

.dz-disclosure:hover { color: var(--dz-cocoa-900); }

/* Link de volta com seta ("← Voltar ao cardápio") */
.dz-backlink {
  display: inline-flex;
  align-items: center;
  gap: var(--dz-2);
  min-height: 40px;
  font-family: var(--dz-font-ui);
  font-size: var(--dz-fs-sm);
  color: var(--dz-text-muted);
  text-decoration: none;
  margin-bottom: var(--dz-3);
}

.dz-backlink:hover { color: var(--dz-cocoa-900); }

/* ---------------------------------------------------------------------
   Selo / marca
   ------------------------------------------------------------------- */

.dz-seal {
  display: block;
  width: clamp(140px, 42vw, 208px);
  height: auto;
  margin-inline: auto;
}

.dz-seal--sm { width: 40px; }

.dz-lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--dz-2);
  min-height: 40px;
  text-decoration: none;
  color: var(--dz-cocoa-900);
}

.dz-lockup__mark {
  width: 36px;
  height: 36px;
  flex: none;
}

.dz-lockup__name {
  font-family: var(--dz-font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1;
}

.dz-lockup__tag {
  display: block;
  font-family: var(--dz-font-ui);
  font-size: var(--dz-fs-xs);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dz-text-subtle);
  margin-top: 2px;
}

/* Em tela muito estreita a assinatura sai: o cabeçalho fica apertado e ela
   é decorativa — o nome da marca continua ali. (Depois da regra base, para
   valer.) */
@media (max-width: 379px) {
  .dz-lockup__tag { display: none; }
}

/* ---------------------------------------------------------------------
   Decoração: escalopes (borda rendada) e onda
   ------------------------------------------------------------------- */

.dz-scallop {
  height: 12px;
  background-image: radial-gradient(circle at 6px 0, var(--dz-blue-300) 5.5px, transparent 6px);
  background-size: 12px 12px;
  background-repeat: repeat-x;
  background-position: center bottom;
}

/* ---------------------------------------------------------------------
   Cards
   ------------------------------------------------------------------- */

.dz-card {
  position: relative;
  background: var(--dz-surface);
  border: 1px solid var(--dz-border);
  border-radius: var(--dz-r-xl);
  box-shadow: var(--dz-shadow-sm);
  overflow: hidden;
}

.dz-card--blue {
  background: var(--dz-surface-blue);
  border-color: var(--dz-blue-300);
}

.dz-card--leaf {
  background: var(--dz-leaf-100);
  border-color: #CBDCBE;
}

.dz-card__body { padding: var(--dz-4); }
.dz-card__body--lg { padding: var(--dz-5); }

.dz-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--dz-surface-alt);
  overflow: hidden;
}

/* Fallback para navegadores sem aspect-ratio. */
@supports not (aspect-ratio: 1 / 1) {
  .dz-card__media { height: 0; padding-bottom: 100%; }
  .dz-card__media > * { position: absolute; inset: 0; }
}

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

.dz-card__placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 45%, var(--dz-cream-200), var(--dz-sand-300));
}

.dz-card__placeholder svg { width: 52%; opacity: .32; }

.dz-panel {
  background: var(--dz-surface);
  border: 1px solid var(--dz-border);
  border-radius: var(--dz-r-lg);
  box-shadow: var(--dz-shadow-sm);
}

.dz-panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--dz-3);
  padding: var(--dz-4);
  border-bottom: 1px solid var(--dz-border-soft);
}

.dz-panel__title {
  font-family: var(--dz-font-display);
  font-size: var(--dz-fs-lg);
  font-weight: 700;
  margin: 0;
}

.dz-panel__body { padding: var(--dz-4); }
.dz-panel__foot {
  padding: var(--dz-4);
  border-top: 1px solid var(--dz-border-soft);
  background: var(--dz-cream-100);
  border-radius: 0 0 calc(var(--dz-r-lg) - 1px) calc(var(--dz-r-lg) - 1px);
}

/* ---------------------------------------------------------------------
   Etiquetas: pill de preço, flags, badges
   ------------------------------------------------------------------- */

.dz-pricetag {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dz-pricetag__value {
  font-family: var(--dz-font-display);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--dz-cocoa-900);
  white-space: nowrap;
}

.dz-pricetag__unit {
  font-family: var(--dz-font-ui);
  font-size: var(--dz-fs-sm);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--dz-text-muted);
}

.dz-flag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px var(--dz-2);
  border-radius: var(--dz-r-pill);
  background: var(--dz-surface-alt);
  border: 1px solid var(--dz-border);
  font-family: var(--dz-font-ui);
  font-size: var(--dz-fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--dz-text-muted);
  white-space: nowrap;
}

.dz-flag--leaf { background: var(--dz-leaf-100); border-color: #CBDCBE; color: #4C6640; }
.dz-flag--blue { background: var(--dz-blue-100); border-color: var(--dz-blue-300); color: var(--dz-blue-800); }
.dz-flag--rose { background: #FDEEEF; border-color: var(--dz-rose-300); color: var(--dz-rose-800); }

.dz-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px var(--dz-2);
  border-radius: var(--dz-r-pill);
  font-family: var(--dz-font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  border: 1px solid transparent;
  white-space: nowrap;
}

.dz-badge--info { background: var(--dz-info-soft); border-color: var(--dz-blue-300); color: var(--dz-blue-800); }
.dz-badge--accent { background: var(--dz-accent-soft); border-color: var(--dz-blue-400); color: var(--dz-blue-800); }
.dz-badge--success { background: var(--dz-success-soft); border-color: #C6DBB8; color: var(--dz-success-ink); }
.dz-badge--warning { background: var(--dz-warning-soft); border-color: #E7CF9C; color: var(--dz-warning-ink); }
.dz-badge--danger { background: var(--dz-danger-soft); border-color: #E7BDB2; color: var(--dz-danger-ink); }
.dz-badge--muted { background: var(--dz-surface-alt); border-color: var(--dz-border); color: var(--dz-text-muted); }

/* ---------------------------------------------------------------------
   Caixa de ingredientes e nota de topper
   ------------------------------------------------------------------- */

.dz-ingredients {
  padding: var(--dz-3);
  background: var(--dz-sand-300);
  border-radius: var(--dz-r-md);
}

.dz-ingredients__label {
  display: block;
  font-family: var(--dz-font-ui);
  font-size: var(--dz-fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--dz-cocoa-700);
  margin-bottom: 3px;
}

.dz-ingredients__text {
  font-size: var(--dz-fs-sm);
  line-height: 1.55;
  color: var(--dz-cocoa-800);
  margin: 0;
}

.dz-topper {
  display: flex;
  align-items: flex-start;
  gap: var(--dz-2);
  padding: var(--dz-2) var(--dz-3);
  background: var(--dz-cream-200);
  border-left: 3px solid var(--dz-blue-300);
  border-radius: 0 var(--dz-r-sm) var(--dz-r-sm) 0;
  font-size: var(--dz-fs-sm);
  color: var(--dz-cocoa-800);
}

.dz-topper__icon { color: var(--dz-blue-600); margin-top: 2px; }

/* ---------------------------------------------------------------------
   Chips (categoria, escolha de topper)
   ------------------------------------------------------------------- */

.dz-chips {
  display: flex;
  gap: var(--dz-2);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-block: var(--dz-1);
}

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

.dz-chips--wrap { flex-wrap: wrap; overflow: visible; }

/* Centraliza só quando os chips cabem: com overflow-x, centralizar
   esconderia o primeiro item fora da área visível. */
@media (min-width: 640px) {
  .dz-chips--center { justify-content: center; flex-wrap: wrap; overflow: visible; }
}

.dz-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--dz-2);
  min-height: var(--dz-tap);
  padding: var(--dz-2) var(--dz-4);
  background: var(--dz-surface);
  border: 1px solid var(--dz-border);
  border-radius: var(--dz-r-pill);
  font-family: var(--dz-font-ui);
  font-size: var(--dz-fs-sm);
  font-weight: 500;
  color: var(--dz-text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dz-dur-1) var(--dz-ease),
              border-color var(--dz-dur-1) var(--dz-ease),
              color var(--dz-dur-1) var(--dz-ease);
}

.dz-chip:hover { border-color: var(--dz-border-strong); color: var(--dz-cocoa-900); }

.dz-chip.is-active,
.dz-chip[aria-pressed="true"],
.dz-chip[aria-current="true"] {
  background: var(--dz-accent-soft);
  border-color: var(--dz-blue-400);
  color: var(--dz-cocoa-900);
  font-weight: 600;
}

/* Escolha de topper com input real por baixo (funciona sem JS). */
.dz-choice {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dz-2);
}

.dz-choice__item { position: relative; }

.dz-choice__input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.dz-choice__label {
  display: flex;
  align-items: center;
  gap: var(--dz-2);
  min-height: var(--dz-tap);
  padding: var(--dz-2) var(--dz-4);
  background: var(--dz-surface);
  border: 1px solid var(--dz-border);
  border-radius: var(--dz-r-pill);
  font-family: var(--dz-font-ui);
  font-size: var(--dz-fs-sm);
  color: var(--dz-text-muted);
  cursor: pointer;
  transition: background-color var(--dz-dur-1) var(--dz-ease),
              border-color var(--dz-dur-1) var(--dz-ease);
}

.dz-choice__input:checked + .dz-choice__label {
  background: var(--dz-accent-soft);
  border-color: var(--dz-blue-400);
  color: var(--dz-cocoa-900);
  font-weight: 600;
}

.dz-choice__input:focus-visible + .dz-choice__label {
  outline: 2px solid var(--dz-focus);
  outline-offset: 2px;
}

/* Escolha do sabor base (Versão Zero Lactose): opções do mesmo peso, em
   grade de duas colunas — "Coco Queimado" ao lado de "Chocolate" sem uma
   pílula ficar do dobro da outra. Quebra linha em vez de cortar. */
.dz-choice--grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dz-choice--grid .dz-choice__label {
  justify-content: center;
  height: 100%;
  padding-inline: var(--dz-3);
  text-align: center;
  line-height: 1.25;
}

/* Tentou adicionar sem escolher: a grade inteira acusa, não só a mensagem. */
.dz-choice.is-invalid .dz-choice__label { border-color: var(--dz-danger); }

/* ---------------------------------------------------------------------
   Stepper de quantidade
   ------------------------------------------------------------------- */

.dz-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--dz-border-strong);
  border-radius: var(--dz-r-pill);
  background: var(--dz-surface);
}

/* Sem overflow:hidden no stepper (ele cortava o anel de foco): o anel fica
   para dentro, e os botões das pontas acompanham o arredondado. */
.dz-stepper__btn:focus-visible,
.dz-stepper__input:focus-visible { outline-offset: -3px; }
.dz-stepper > :first-child { border-radius: var(--dz-r-pill) 0 0 var(--dz-r-pill); }
.dz-stepper > :last-child { border-radius: 0 var(--dz-r-pill) var(--dz-r-pill) 0; }

.dz-stepper__btn {
  display: grid;
  place-items: center;
  width: var(--dz-tap);
  height: var(--dz-tap);
  border: 0;
  background: transparent;
  color: var(--dz-cocoa-800);
  transition: background-color var(--dz-dur-1) var(--dz-ease);
}

.dz-stepper__btn:hover { background: var(--dz-surface-alt); }
.dz-stepper__btn[disabled] { opacity: .35; pointer-events: none; }

/* Célula do meio do stepper: o número e a palavra da unidade juntos, para
   lerem como uma coisa só ("2 centos"). A borda que separava o input dos
   botões passou para cá, senão apareceria no meio do par. */
.dz-stepper__field {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  height: var(--dz-tap);
  padding-inline: 8px;
  border-inline: 1px solid var(--dz-border-soft);
}

.dz-stepper__unit {
  font-family: var(--dz-font-ui);
  font-size: var(--dz-fs-xs);
  font-weight: 600;
  color: var(--dz-text-muted);
  white-space: nowrap;
}

.dz-stepper__input {
  width: 52px;
  height: var(--dz-tap);
  border: 0;
  border-inline: 1px solid var(--dz-border-soft);
  background: transparent;
  text-align: center;
  font-family: var(--dz-font-ui);
  font-size: var(--dz-fs-base);
  font-weight: 600;
  color: var(--dz-cocoa-900);
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Dentro da célula, a borda e a largura fixa são da célula, não do input. */
.dz-stepper__field .dz-stepper__input {
  width: 2.2em;
  padding: 0;
  border-inline: 0;
  text-align: right;
}

.dz-stepper__input::-webkit-outer-spin-button,
.dz-stepper__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ---------------------------------------------------------------------
   Formulários
   ------------------------------------------------------------------- */

.dz-field { margin-bottom: var(--dz-4); }

.dz-field__label {
  display: block;
  font-family: var(--dz-font-ui);
  font-size: var(--dz-fs-sm);
  font-weight: 600;
  color: var(--dz-cocoa-800);
  margin-bottom: var(--dz-1);
}

.dz-field__req { color: var(--dz-danger); font-weight: 400; }

.dz-field__hint {
  display: block;
  font-family: var(--dz-font-ui);
  font-size: var(--dz-fs-xs);
  color: var(--dz-text-subtle);
  margin-top: var(--dz-1);
  letter-spacing: 0;
  text-transform: none;
}

.dz-field__error {
  display: block;
  font-family: var(--dz-font-ui);
  font-size: var(--dz-fs-xs);
  font-weight: 600;
  color: var(--dz-danger);
  margin-top: var(--dz-1);
}

.dz-input,
.dz-select,
.dz-textarea {
  display: block;
  width: 100%;
  min-height: var(--dz-tap);
  padding: var(--dz-2) var(--dz-3);
  background: var(--dz-surface);
  border: 1px solid var(--dz-border-strong);
  border-radius: var(--dz-r-md);
  font-family: var(--dz-font-ui);
  font-size: var(--dz-fs-base);
  color: var(--dz-text);
  transition: border-color var(--dz-dur-1) var(--dz-ease),
              box-shadow var(--dz-dur-1) var(--dz-ease);
}

.dz-input::placeholder,
.dz-textarea::placeholder { color: var(--dz-text-subtle); }

.dz-input:focus,
.dz-select:focus,
.dz-textarea:focus {
  outline: none;
  border-color: var(--dz-blue-600);
  box-shadow: 0 0 0 3px var(--dz-blue-100);
}

.dz-input[aria-invalid="true"],
.dz-select[aria-invalid="true"],
.dz-textarea[aria-invalid="true"] {
  border-color: var(--dz-danger);
}

.dz-textarea { min-height: 96px; resize: vertical; line-height: 1.5; }

.dz-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--dz-8);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236E4A34' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--dz-3) center;
}

.dz-input-group {
  display: flex;
  align-items: stretch;
}

.dz-input-group__prefix {
  display: grid;
  place-items: center;
  padding-inline: var(--dz-3);
  background: var(--dz-surface-alt);
  border: 1px solid var(--dz-border-strong);
  border-right: 0;
  border-radius: var(--dz-r-md) 0 0 var(--dz-r-md);
  font-family: var(--dz-font-ui);
  font-size: var(--dz-fs-sm);
  font-weight: 600;
  color: var(--dz-text-muted);
  white-space: nowrap;
}

.dz-input-group .dz-input {
  border-radius: 0 var(--dz-r-md) var(--dz-r-md) 0;
}

/* Grid de campos */
.dz-fields {
  display: grid;
  gap: 0 var(--dz-4);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .dz-fields--2 { grid-template-columns: 1fr 1fr; }
  .dz-fields--3 { grid-template-columns: repeat(3, 1fr); }
  .dz-field--full { grid-column: 1 / -1; }
  .dz-field--narrow { max-width: 180px; }
}

/* Checkbox e radio em blocos clicáveis */
.dz-check {
  display: flex;
  align-items: flex-start;
  gap: var(--dz-3);
  padding: var(--dz-3);
  border: 1px solid var(--dz-border);
  border-radius: var(--dz-r-md);
  background: var(--dz-surface);
  cursor: pointer;
  transition: border-color var(--dz-dur-1) var(--dz-ease),
              background-color var(--dz-dur-1) var(--dz-ease);
}

.dz-check:hover { border-color: var(--dz-border-strong); }

.dz-check input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--dz-cocoa-700);
}

.dz-check__text { font-family: var(--dz-font-ui); font-size: var(--dz-fs-sm); }

.dz-check__title {
  display: block;
  font-weight: 600;
  color: var(--dz-cocoa-900);
}

.dz-check__desc {
  display: block;
  color: var(--dz-text-muted);
  font-size: var(--dz-fs-xs);
  margin-top: 2px;
}

.dz-check:has(input:checked) {
  border-color: var(--dz-blue-400);
  background: var(--dz-blue-100);
}

/* Fallback para navegadores sem :has() */
.dz-check.is-checked {
  border-color: var(--dz-blue-400);
  background: var(--dz-blue-100);
}

/* O texto ao lado é curto, então sem min-height o label fica com ~24px de
   altura — abaixo do alvo de toque, mesmo com o input dentro dele. */
.dz-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--dz-3);
  min-height: 40px;
  cursor: pointer;
  font-family: var(--dz-font-ui);
  font-size: var(--dz-fs-sm);
}

.dz-switch input {
  width: 20px;
  height: 20px;
  flex: none;
  accent-color: var(--dz-cocoa-700);
}

@media (hover: none) and (pointer: coarse) {
  .dz-switch { min-height: var(--dz-tap); }
}

/* ---------------------------------------------------------------------
   Alertas e avisos
   ------------------------------------------------------------------- */

.dz-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--dz-3);
  padding: var(--dz-3) var(--dz-4);
  border: 1px solid var(--dz-border);
  border-radius: var(--dz-r-md);
  background: var(--dz-surface-alt);
  font-family: var(--dz-font-ui);
  font-size: var(--dz-fs-sm);
  color: var(--dz-cocoa-800);
}

.dz-alert__icon { flex: none; margin-top: 1px; }
.dz-alert__body { flex: 1; min-width: 0; }
.dz-alert__title { display: block; font-weight: 600; margin-bottom: 2px; }

.dz-alert--success { background: var(--dz-success-soft); border-color: #C6DBB8; color: #38562A; }
.dz-alert--success .dz-alert__icon { color: var(--dz-success); }

.dz-alert--error { background: var(--dz-danger-soft); border-color: #E7BDB2; color: #7E3323; }
.dz-alert--error .dz-alert__icon { color: var(--dz-danger); }

.dz-alert--warning { background: var(--dz-warning-soft); border-color: #E7CF9C; color: #7E5615; }
.dz-alert--warning .dz-alert__icon { color: var(--dz-warning); }

.dz-alert--info { background: var(--dz-info-soft); border-color: var(--dz-blue-300); color: var(--dz-blue-800); }
.dz-alert--info .dz-alert__icon { color: var(--dz-blue-600); }

/* ---------------------------------------------------------------------
   Estado vazio
   ------------------------------------------------------------------- */

.dz-empty {
  padding: var(--dz-10) var(--dz-4);
  text-align: center;
  color: var(--dz-text-muted);
}

.dz-empty__icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto var(--dz-4);
  border-radius: 50%;
  background: var(--dz-surface-alt);
  color: var(--dz-cocoa-400);
}

.dz-empty__title {
  font-family: var(--dz-font-display);
  font-size: var(--dz-fs-h3);
  color: var(--dz-cocoa-900);
  margin-bottom: var(--dz-2);
}

.dz-empty__text { font-family: var(--dz-font-ui); font-size: var(--dz-fs-sm); margin-bottom: var(--dz-5); }

/* ---------------------------------------------------------------------
   Bottom sheet / modal
   ------------------------------------------------------------------- */

.dz-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--dz-z-overlay);
  background: rgba(59, 35, 23, .5);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dz-dur-2) var(--dz-ease);
}

.dz-overlay.is-open { opacity: 1; pointer-events: auto; }

.dz-sheet {
  position: fixed;
  z-index: var(--dz-z-sheet);
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background: var(--dz-surface);
  border-radius: var(--dz-r-2xl) var(--dz-r-2xl) 0 0;
  box-shadow: var(--dz-shadow-lg);
  transform: translateY(101%);
  transition: transform var(--dz-dur-3) var(--dz-ease);
}

.dz-sheet.is-open { transform: translateY(0); }

.dz-sheet__grab {
  width: 44px;
  height: 4px;
  margin: var(--dz-3) auto var(--dz-1);
  border-radius: var(--dz-r-pill);
  background: var(--dz-border-strong);
}

.dz-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dz-3);
  padding: var(--dz-2) var(--dz-4) var(--dz-3);
  border-bottom: 1px solid var(--dz-border-soft);
}

.dz-sheet__title {
  font-family: var(--dz-font-display);
  font-size: var(--dz-fs-h3);
  margin: 0;
}

.dz-sheet__body {
  padding: var(--dz-4);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1;
}

.dz-sheet__foot {
  padding: var(--dz-4);
  padding-bottom: calc(var(--dz-4) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--dz-border-soft);
  background: var(--dz-cream-100);
}

@media (min-width: 640px) {
  .dz-sheet {
    left: 50%;
    bottom: auto;
    top: 50%;
    right: auto;
    width: min(560px, calc(100vw - 48px));
    max-height: 86vh;
    border-radius: var(--dz-r-xl);
    transform: translate(-50%, -46%) scale(.97);
    opacity: 0;
    transition: transform var(--dz-dur-2) var(--dz-ease), opacity var(--dz-dur-2) var(--dz-ease);
  }

  .dz-sheet.is-open { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  .dz-sheet__grab { display: none; }
  .dz-sheet__head { padding-top: var(--dz-4); }
}

body.dz-locked { overflow: hidden; }

/* ---------------------------------------------------------------------
   Toast
   ------------------------------------------------------------------- */

.dz-toasts {
  position: fixed;
  z-index: var(--dz-z-toast);
  left: var(--dz-3);
  right: var(--dz-3);
  bottom: calc(var(--dz-cartbar-real, calc(var(--dz-cartbar-h) + env(safe-area-inset-bottom, 0px))) + var(--dz-3));
  display: flex;
  flex-direction: column;
  gap: var(--dz-2);
  pointer-events: none;
}

@media (min-width: 640px) {
  .dz-toasts {
    left: auto; right: var(--dz-5); width: 360px;
    bottom: calc(var(--dz-cartbar-real, calc(var(--dz-cartbar-h) + env(safe-area-inset-bottom, 0px))) + var(--dz-5));
  }
  body.dz-cart-empty .dz-toasts,
  .dz-admin .dz-toasts { bottom: var(--dz-5); }
}

.dz-toast {
  display: flex;
  align-items: center;
  gap: var(--dz-3);
  padding: var(--dz-3) var(--dz-4);
  background: var(--dz-cocoa-900);
  color: var(--dz-cream-50);
  border-radius: var(--dz-r-md);
  box-shadow: var(--dz-shadow-lg);
  font-family: var(--dz-font-ui);
  font-size: var(--dz-fs-sm);
  pointer-events: auto;
  animation: dz-toast-in var(--dz-dur-2) var(--dz-ease);
}

.dz-toast--success { background: #3C5E2E; }
.dz-toast--error { background: #8A3A28; }

@keyframes dz-toast-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------------------------------------------------------------------
   Totais
   ------------------------------------------------------------------- */

/* Aqui, e não no site.css: o painel também usa esta lista (resumo do
   pedido, contato do cliente) e não carrega o CSS do site — a página do
   pedido mostrava Subtotal e valor desalinhados, com a margem do <dd>. */

.dz-totals {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--dz-3);
}

.dz-totals__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--dz-4);
  font-size: var(--dz-fs-base);
}

.dz-totals__row dt {
  margin: 0;
  color: var(--dz-text-muted);
}

.dz-totals__row dd {
  margin: 0;
  min-width: 0;
  font-weight: 600;
  text-align: right;
}

.dz-totals__row--grand {
  padding-top: var(--dz-3);
  border-top: 1px solid var(--dz-border-strong);
}

.dz-totals__row--grand dt {
  color: var(--dz-text);
  font-weight: 600;
}

.dz-totals__row--grand dd {
  font-family: var(--dz-font-display);
  font-size: 1.5rem;
  font-weight: 700;
}

/* ---------------------------------------------------------------------
   Tabela (vira cards no mobile)
   ------------------------------------------------------------------- */

/* Rede de segurança: se ainda assim o conteúdo passar da largura, a tabela
   rola na horizontal em vez de empurrar a página inteira. */
.dz-table-wrap {
  position: relative;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.dz-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--dz-font-ui);
  font-size: var(--dz-fs-sm);
}

.dz-table th {
  text-align: left;
  font-size: var(--dz-fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--dz-text-muted);
  padding: var(--dz-3) var(--dz-3);
  border-bottom: 1px solid var(--dz-border);
  white-space: nowrap;
}

.dz-table td {
  padding: var(--dz-3);
  border-bottom: 1px solid var(--dz-border-soft);
  vertical-align: middle;
}

.dz-table tbody tr:hover { background: var(--dz-cream-100); }
.dz-table tbody tr:last-child td { border-bottom: 0; }

.dz-table__num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dz-table__actions { text-align: right; white-space: nowrap; }

/**
 * A tabela vira cards empilhados abaixo de 1100px — e não de 900px.
 *
 * O motivo é o painel: a partir de 900px a barra lateral passa a ocupar 248px,
 * então em 900px de janela sobram só ~600px de conteúdo, estreito demais para
 * uma tabela de 6 colunas. Em 1100px sobram ~800px, que cabem.
 */
@media (max-width: 1099px) {
  .dz-table thead { display: none; }

  .dz-table,
  .dz-table tbody,
  .dz-table tr,
  .dz-table td { display: block; width: 100%; }

  /* Sem overflow:hidden: nenhum filho pinta fundo nos cantos, e o corte
     comia a área de toque ampliada dos links da primeira linha. */
  .dz-table tr {
    margin-bottom: var(--dz-3);
    border: 1px solid var(--dz-border);
    border-radius: var(--dz-r-md);
    background: var(--dz-surface);
  }

  .dz-table tr:hover { background: var(--dz-surface); }

  .dz-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dz-4);
    padding: var(--dz-2) var(--dz-3);
    border-bottom: 1px solid var(--dz-border-soft);
    text-align: right;
  }

  /* Sem isto, o min-width:auto do flex impede a célula de encolher e uma
     palavra longa (um e-mail, por exemplo) vaza para fora da tela. */
  .dz-table td,
  .dz-table td > * {
    min-width: 0;
  }

  /* Valor que quebra de linha continua à direita, como os outros. */
  .dz-table td { flex-wrap: wrap; }
  .dz-table td > :last-child { margin-left: auto; text-align: right; }

  .dz-table td:last-child { border-bottom: 0; }

  /* O rótulo da coluna vira prefixo da célula. */
  .dz-table td::before {
    content: attr(data-label);
    flex: none;
    font-size: var(--dz-fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--dz-text-subtle);
    text-align: left;
  }

  .dz-table td[data-label=""]::before { content: none; }
  .dz-table__num, .dz-table__actions { text-align: right; }

  /* Quando rótulo e conteúdo não cabem lado a lado (Fold, SE 1ª), o
     conteúdo desce para a linha de baixo em vez de ser espremido a 5px. */
  .dz-table td { flex-wrap: wrap; row-gap: var(--dz-1); }
  .dz-cell { min-width: 0; overflow-wrap: anywhere; }

  /* Os botões da linha (Desativar, Editar) quebram em vez de vazar. */
  .dz-table__actions > .dz-row { flex-wrap: wrap !important; }
}

/* Link solto (nome na tabela, telefone, e-mail): o texto tem 16px de
   altura, pouco para o dedo. O padding amplia a área de toque para 40px e a
   margem negativa devolve o espaço — o desenho da linha não muda. */
.dz-tap,
.dz-table td a:not(.dz-btn):not(.dz-codelink) {
  display: inline-block;
  min-width: 44px; /* "PIX" tem 21px de largura */
  padding-block: 12px;
  margin-block: -12px;
}

/* ---------------------------------------------------------------------
   Paginação
   ------------------------------------------------------------------- */

.dz-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--dz-1);
  margin-top: var(--dz-5);
}

.dz-pager__link {
  display: grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  padding-inline: var(--dz-2);
  border: 1px solid var(--dz-border);
  border-radius: var(--dz-r-sm);
  background: var(--dz-surface);
  font-family: var(--dz-font-ui);
  font-size: var(--dz-fs-sm);
  color: var(--dz-text-muted);
  text-decoration: none;
}

.dz-pager__link:hover { border-color: var(--dz-border-strong); color: var(--dz-cocoa-900); }

.dz-pager__link[aria-current="page"] {
  background: var(--dz-cocoa-800);
  border-color: var(--dz-cocoa-800);
  color: var(--dz-cream-50);
  font-weight: 600;
}

.dz-pager__gap { padding-inline: var(--dz-2); color: var(--dz-text-subtle); }

/* ---------------------------------------------------------------------
   Caixa de código copiável (PIX copia e cola)
   ------------------------------------------------------------------- */

.dz-code {
  display: block;
  width: 100%;
  padding: var(--dz-3);
  background: var(--dz-cream-200);
  border: 1px dashed var(--dz-border-strong);
  border-radius: var(--dz-r-md);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1.5;
  color: var(--dz-cocoa-800);
  word-break: break-all;
  resize: none;
  min-height: 92px;
}

/* ---------------------------------------------------------------------
   Campos a 16px no celular

   O Safari do iPhone dá zoom na página inteira ao focar um campo com fonte
   menor que 16px — e não desfaz sozinho ao sair. No checkout isso empurra
   o layout para os lados a cada campo tocado. 16px desliga o zoom sem
   precisar travar a escala da página (o que tiraria o zoom de quem precisa).
   ------------------------------------------------------------------- */
@media (max-width: 899px) {
  .dz-input,
  .dz-select,
  .dz-textarea,
  .dz-stepper__input {
    font-size: 16px;
  }
}

/* A ênfase dos títulos: mesma família, peso menor, tom mais claro.
   É o <em> que rich_em() injeta a partir dos *asteriscos* — no site e na
   saudação do painel, por isso mora aqui. */
.dz-em {
  font-style: italic;
  font-weight: 500;
  color: var(--dz-text-muted);
}

/* iPhone/iPad dão zoom em qualquer campo com letra menor que 16px — em tela
   de toque, os campos ficam com 16px no mínimo (no desktop, o tamanho do design). */
@media (pointer: coarse) {
  .dz-input,
  .dz-select,
  .dz-textarea,
  .dz-stepper__input { font-size: max(16px, var(--dz-fs-base)); }
}

/* Página sem a barra da sacola (checkout, acompanhar…): o aviso fica no pé. */
body:not(.dz-site--has-cart).dz-site .dz-toasts,
body.dz-cart-empty .dz-toasts { bottom: calc(var(--dz-3) + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 640px) {
  body:not(.dz-site--has-cart).dz-site .dz-toasts,
  body.dz-cart-empty .dz-toasts { bottom: var(--dz-5); }
}