/* ═══════════════════════════════════════════════════════════════
   STRIORT INTERNATIONAL — store + admin
   Reuses the tokens from style.css; adds only what these two pages need.
   ═══════════════════════════════════════════════════════════════ */

/* ── hidden é hidden ──────────────────────────────────────────
   O atributo hidden vale display:none pela folha do navegador, e
   qualquer display: grid/flex do autor o vence. O projeto vinha
   remendando isso um seletor por vez; esta regra resolve para todos
   e para os próximos. */
[hidden] { display: none !important; }


.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;
}

/* ── Storefront ──────────────────────────────────────────────── */
.shop { padding: 9rem 0 5rem; }
/* 72rem menos a coluna de 15rem deixaria tres produtos por linha em
   vez de quatro. 84rem e' a largura do proprio cabecalho, entao a
   loja passa a alinhar com ele. */
.shop > .container { width: min(100% - 3rem, 84rem); }

.shop__head { max-width: 42rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.shop__head .section-title { margin-top: 0.6rem; }
.shop__head .section-lead { margin-top: 1rem; }

.shop__notice {
  border: 1px solid var(--brand-soft);
  background: var(--brand-tint);
  border-radius: var(--radius);
  padding: 1.4rem 1.6rem;
  margin-bottom: 2.5rem;
  font-size: 0.9rem;
  color: var(--ink);
}
.shop__notice p { margin-top: 0.5rem; color: var(--ink-soft); }
.shop__notice code {
  background: var(--white); border: 1px solid var(--line);
  border-radius: 0.35rem; padding: 0.05rem 0.35rem; font-size: 0.85em;
}

/* ── Filtros na lateral, grudados na tela ──────────────────────
   align-items:start e' o que faz o grudento funcionar. Sem ele o
   <aside> estica ate a altura da grade inteira, e um elemento tao
   alto quanto o que rola nunca chega a grudar em nada. */
.shop__body {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}

.shop__side {
  position: sticky;
  /* Abaixo do cabecalho fixo E da barra de busca, que tambem gruda.
     A altura do cabecalho vem medida do nav.js; a da barra sao os
     ~4,7rem do campo mais o respiro dela. */
  top: calc(var(--nav-h, 5rem) + 5.5rem);
}

.shop__filters {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  /* Uma abaixo da outra, todas da largura da coluna. */
  flex-direction: column;
  align-items: stretch;
}

/* Em coluna, o rotulo se le da esquerda — centrado, nove pilulas de
   larguras diferentes viram um ziguezague. */
.shop__side .shop__filter { text-align: left; padding: 0.6rem 1rem; }

@media (max-width: 62rem) {
  /* Aqui as pilulas ja somem e quem escolhe e' a lista suspensa; a
     coluna nao teria o que segurar. */
  .shop__body { grid-template-columns: 1fr; gap: 0; }
}

.shop__filter {
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 0.55rem 1.2rem;
  font-family: var(--font-cta);
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer;
  transition: color 0.3s, border-color 0.3s, background-color 0.3s;
}
.shop__filter:hover { border-color: var(--brand-soft); color: var(--brand); }
.shop__filter.is-active {
  background: var(--brand); border-color: var(--brand); color: var(--white);
}

.shop__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: clamp(1rem, 2vw, 1.8rem);
}
.shop__loading { color: var(--ink-soft); }

.pcard {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.45s var(--ease-lux), box-shadow 0.45s var(--ease-lux), border-color 0.45s;
}
.pcard:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-soft);
  border-color: var(--brand-soft);
}
.pcard--out { opacity: 0.62; }

.pcard__media {
  aspect-ratio: 1 / 1;
  background: var(--cream);
  display: grid; place-items: center;
  overflow: hidden;
}
/* imagens do card: ver .pcard__img em PRODUTO v2 */
.pcard__media--empty { background: repeating-linear-gradient(45deg, var(--cream), var(--cream) 10px, var(--cream-deep) 10px, var(--cream-deep) 20px); }

.pcard__body {
  display: flex; flex-direction: column; flex: 1;
  padding: 1.2rem 1.3rem 1.4rem;
  gap: 0.4rem;
}

.pcard__name {
  font-family: var(--font-display);
  font-size: 0.95rem; font-weight: 700; line-height: 1.3;
  color: var(--ink);
}
.pcard__size { font-size: 0.75rem; color: var(--brand); font-weight: 600; letter-spacing: 0.05em; }
.pcard__desc { font-size: 0.82rem; color: var(--ink-soft); }

.pcard__price { margin-top: auto; padding-top: 0.9rem; display: flex; align-items: baseline; gap: 0.5rem; }
.pcard__now { font-size: 1.15rem; font-weight: 700; color: var(--ink); }
.pcard__was { font-size: 0.85rem; color: var(--ink-soft); }
.pcard__tbd { font-size: 0.85rem; color: var(--ink-soft); font-style: italic; }

.pcard__add { width: 100%; margin-top: 0.9rem; justify-content: center; }
.pcard__add:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Cart drawer ─────────────────────────────────────────────── */
.cart { position: fixed; inset: 0; z-index: 90; }
.cart[hidden] { display: none; }
.cart__backdrop { position: absolute; inset: 0; background: rgba(19, 46, 45, 0.5); backdrop-filter: blur(3px); }

.cart__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(100%, 26rem);
  background: var(--white);
  display: flex; flex-direction: column;
  box-shadow: -20px 0 60px -24px rgba(19, 46, 45, 0.35);
  animation: cart-in 0.35s var(--ease-lux) both;
}
@keyframes cart-in { from { transform: translateX(100%); } to { transform: translateX(0); } }

.cart__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.4rem 1.5rem; border-bottom: 1px solid var(--line);
}
.cart__title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; }
.cart__close {
  background: none; border: 1px solid var(--line); border-radius: 999px;
  width: 2rem; height: 2rem; display: grid; place-items: center;
  color: var(--ink-soft); cursor: pointer; transition: color 0.3s, border-color 0.3s;
}
.cart__close:hover { color: var(--brand); border-color: var(--brand-soft); }

.cart__items { flex: 1; overflow-y: auto; padding: 1rem 1.5rem; }
.cart__empty { color: var(--ink-soft); font-size: 0.9rem; padding: 2rem 0; text-align: center; }

.cart__row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.9rem 0; border-bottom: 1px solid var(--line);
}
.cart__rowinfo { display: grid; gap: 0.2rem; }
.cart__rowname { font-size: 0.85rem; font-weight: 600; color: var(--ink); }
.cart__rowprice { font-size: 0.78rem; color: var(--ink-soft); }

.cart__qty { display: flex; align-items: center; gap: 0.15rem; flex: none; }
.cart__qty button {
  width: 1.75rem; height: 1.75rem;
  border: 1px solid var(--line); background: var(--white);
  border-radius: 0.5rem; color: var(--ink); cursor: pointer;
  font-size: 0.9rem; line-height: 1;
  transition: border-color 0.3s, color 0.3s;
}
.cart__qty button:hover { border-color: var(--brand); color: var(--brand); }
.cart__qtynum { min-width: 1.6rem; text-align: center; font-size: 0.85rem; font-weight: 600; }

.cart__foot { padding: 1.2rem 1.5rem 1.5rem; border-top: 1px solid var(--line); }
.cart__total { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.9rem; }
.cart__total strong { font-size: 1.25rem; font-family: var(--font-display); }
.cart__note { font-size: 0.72rem; color: var(--ink-soft); margin-top: 0.5rem; min-height: 1.6em; }
.cart__checkout { width: 100%; justify-content: center; margin-top: 0.8rem; }
.cart__checkout:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Admin: shell ────────────────────────────────────────────── */
.admin-body { background: var(--cream); }

.adm-login { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1.5rem; }
.adm-login[hidden] { display: none; }

.adm-login__card {
  width: min(100%, 24rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2.4rem;
  box-shadow: var(--shadow-soft);
  display: grid; gap: 0.55rem;
}
.adm-login__logo { width: 8rem; margin: 0 auto 0.8rem; }
.adm-login__title { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; text-align: center; }
.adm-login__sub { font-size: 0.85rem; color: var(--ink-soft); text-align: center; margin-bottom: 1rem; }
.adm-login__card label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.adm-login__card input {
  width: 100%; padding: 0.75rem 0.9rem;
  border: 1px solid var(--line); border-radius: 0.7rem;
  font: inherit; font-size: 0.9rem; color: var(--ink); background: var(--white);
}
.adm-login__card input:focus { outline: 2px solid var(--brand-soft); outline-offset: 1px; }
.adm-login__card .btn { margin-top: 1rem; justify-content: center; }
.adm-login__card code { background: var(--cream); border-radius: 0.3rem; padding: 0.05rem 0.3rem; font-size: 0.85em; }

.adm-msg { font-size: 0.8rem; color: var(--brand-deep); margin: 0 0 0.6rem; min-height: 1.2em; }
.adm-msg.is-error { color: #b3261e; }

.adm {
  display: grid;
  grid-template-columns: 16.5rem 1fr;
  min-height: 100vh;
  transition: grid-template-columns 0.25s var(--ease-lux);
}
.adm[hidden] { display: none; }

/* ── Sidebar ─────────────────────────────────────────────────── */
.side {
  position: sticky; top: 0; align-self: start;
  height: 100vh; display: flex; flex-direction: column;
  background: var(--white); border-right: 1px solid var(--line);
}

.side__brand {
  display: flex; align-items: center; gap: 0.65rem;
  padding: 1.25rem 1.3rem;
  border-bottom: 1px solid var(--line);
}
.side__brandtext { display: grid; line-height: 1.2; }
.side__brandtext strong { font-family: var(--font-display); font-size: 0.92rem; font-weight: 800; letter-spacing: 0.02em; }
.side__brandtext em { font-style: normal; font-size: 0.68rem; color: var(--ink-soft); letter-spacing: 0.08em; text-transform: uppercase; }

.side__nav { flex: 1; overflow-y: auto; padding: 0.9rem 0.7rem; display: grid; gap: 0.15rem; align-content: start; }

.side__link {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.68rem 0.8rem;
  border-radius: 0.6rem;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.87rem; font-weight: 500;
  border-left: 3px solid transparent;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.side__link svg {
  width: 1.15rem; height: 1.15rem; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.side__link:hover { background: var(--cream); color: var(--ink); }
.side__link.is-active {
  background: var(--brand-tint);
  color: var(--brand-deep);
  border-left-color: var(--brand);
  font-weight: 600;
}
.side__link:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

.side__badge {
  margin-left: auto;
  font-size: 0.7rem; font-weight: 600; font-style: normal;
  color: var(--ink-soft);
  background: var(--cream);
  border-radius: 999px; padding: 0.1rem 0.45rem;
}
.side__link.is-active .side__badge { background: var(--white); color: var(--brand-deep); }

.side__foot {
  border-top: 1px solid var(--line);
  padding: 0.9rem 1.3rem 1.1rem;
  display: grid; gap: 0.3rem;
}
.side__store { font-size: 0.78rem; color: var(--brand); text-decoration: none; font-weight: 600; }
.side__store:hover { text-decoration: underline; }
.side__who { font-size: 0.72rem; color: var(--ink-soft); word-break: break-all; }
.side__signout {
  justify-self: start;
  background: none; border: 0; padding: 0;
  font: inherit; font-size: 0.78rem; color: var(--ink-soft);
  cursor: pointer; text-decoration: underline;
}
.side__signout:hover { color: #b3261e; }

/* O botao existe em todas as larguras. No desktop ele oculta e
   reexibe a barra; no celular ele abre e fecha a gaveta. Sao dois
   comportamentos, e por isso duas classes diferentes — usar a mesma
   faria a barra reaparecer a cada clique no menu, porque o roteador
   fecha a gaveta a cada navegacao. */
.side__toggle {
  display: grid; gap: 4px; align-content: center;
  width: 2.4rem; height: 2.4rem; padding: 0.5rem;
  background: var(--white); border: 1px solid var(--line);
  border-radius: 0.6rem; cursor: pointer;
  margin-bottom: 1.2rem;
  transition: border-color 0.2s;
}
.side__toggle:hover { border-color: var(--brand); }
.side__toggle:focus-visible { outline: 2px solid var(--brand-soft); outline-offset: 2px; }
.side__toggle span { display: block; height: 2px; background: var(--ink); border-radius: 2px; }

/* ── Conteúdo ────────────────────────────────────────────────── */
/* container-type transforma esta area na referencia de medida das
   telas de dentro: elas passam a reagir ao espaco que sobrou depois da
   barra lateral, em vez do tamanho da janela. */
.adm__content {
  padding: 2rem clamp(1.2rem, 3vw, 2.6rem) 4rem;
  min-width: 0;
  container-type: inline-size;
  container-name: painel;
}

.view[hidden] { display: none; }

.view__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.2rem; flex-wrap: wrap; margin-bottom: 1.6rem;
}
.view__title { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; letter-spacing: -0.02em; }
.view__sub { font-size: 0.85rem; color: var(--ink-soft); margin-top: 0.25rem; }
.view__actions { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }

.view__search input, #adm-filter {
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--line); border-radius: 0.6rem;
  font: inherit; font-size: 0.85rem; color: var(--ink); background: var(--white);
}
.view__search input { min-width: 15rem; }
.view__search input:focus, #adm-filter:focus { outline: 2px solid var(--brand-soft); outline-offset: 1px; }

/* ── Tabela ──────────────────────────────────────────────────── */
.adm__tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.adm__table { width: 100%; border-collapse: collapse; font-size: 0.85rem; min-width: 44rem; }
.adm__table th {
  text-align: left; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 600;
  padding: 0.85rem 1rem; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--white);
}
.adm__table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--line); vertical-align: middle; color: var(--ink); }
.adm__table td.num { font-variant-numeric: tabular-nums; }
.adm__table tr:last-child td { border-bottom: 0; }
.adm__table tr.is-inactive { opacity: 0.55; }
.adm__thumb { width: 2.6rem; height: 2.6rem; object-fit: contain; background: var(--cream); border-radius: 0.5rem; display: block; }
.adm__thumb--empty {
  background: repeating-linear-gradient(45deg, var(--cream), var(--cream) 6px, var(--cream-deep) 6px, var(--cream-deep) 12px);
}

.pill {
  display: inline-block; font-size: 0.7rem; font-weight: 600;
  padding: 0.18rem 0.55rem; border-radius: 999px; white-space: nowrap;
}
.pill--ok    { background: var(--brand-tint); color: var(--brand-deep); }
.pill--off   { background: #fdeceb; color: #b3261e; }
.pill--draft { background: var(--cream-deep); color: var(--ink-soft); }

.adm__actions { white-space: nowrap; text-align: right; }
.adm__link {
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 0.8rem; font-weight: 600;
  color: var(--brand); padding: 0.2rem 0.5rem;
}
.adm__link:hover { text-decoration: underline; }
.adm__link--danger { color: #b3261e; }

/* ── Tela ainda não construída ───────────────────────────────── */
.soon {
  background: var(--white);
  border: 1px dashed var(--brand-soft);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 4vw, 2.6rem);
  max-width: 44rem;
}
.soon--next {
  border-style: solid;
  background: linear-gradient(175deg, var(--white) 60%, var(--brand-tint) 100%);
}
.soon h2 {
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 700;
  color: var(--brand-deep); margin-bottom: 0.7rem;
}
.soon > p { font-size: 0.92rem; color: var(--ink-soft); max-width: 40rem; }

.soon__needs { margin-top: 1.5rem; display: grid; gap: 0.15rem; }
.soon__needs dt {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--brand);
  margin-top: 1rem;
}
.soon__needs dd { margin: 0; font-size: 0.88rem; color: var(--ink-soft); }
.soon code {
  background: var(--cream); border: 1px solid var(--line);
  border-radius: 4px; padding: 0.05em 0.32em; font-size: 0.85em;
}

@media (max-width: 62rem) {
  .adm { grid-template-columns: 1fr; }
  .side {
    position: fixed; inset: 0 auto 0 0; z-index: 60;
    width: 16.5rem; transform: translateX(-100%);
    transition: transform 0.28s var(--ease-lux);
    box-shadow: 0 0 40px -10px rgba(19, 46, 45, 0.3);
  }
  .side.is-open { transform: translateX(0); }
  .view__head { align-items: flex-start; flex-direction: column; }
  .view__search input { min-width: 0; width: 100%; }
  .view__actions { width: 100%; }
}

/* ── Admin form modal ────────────────────────────────────────── */
.adm-modal { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 1.5rem; }
.adm-modal[hidden] { display: none; }
.adm-modal__backdrop { position: absolute; inset: 0; background: rgba(19, 46, 45, 0.5); backdrop-filter: blur(3px); }

.adm-modal__panel {
  position: relative;
  width: min(100%, 42rem); max-height: 90vh; overflow-y: auto;
  background: var(--white); border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.adm-modal__head {
  /* z-index explícito: o cabeçalho é sticky, e qualquer conteúdo do
     formulário com position (os cartões de tipo de cupom, por exemplo)
     pintaria por cima dele só por vir depois no HTML. */
  position: sticky; top: 0; z-index: 5; background: var(--white);
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.3rem 1.6rem; border-bottom: 1px solid var(--line);
}
.adm-modal__head h3 { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; }

.adm-form { padding: 1.5rem 1.6rem 1.8rem; display: grid; gap: 1.1rem; }
.adm-form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1.1rem; }
.adm-form__field { display: grid; gap: 0.35rem; }
.adm-form__field label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.adm-form__field input,
.adm-form__field select,
.adm-form__field textarea {
  width: 100%; padding: 0.7rem 0.85rem;
  border: 1px solid var(--line); border-radius: 0.7rem;
  font: inherit; font-size: 0.88rem; color: var(--ink); background: var(--white);
}
.adm-form__field textarea { resize: vertical; }
.adm-form__field input:focus,
.adm-form__field select:focus,
.adm-form__field textarea:focus { outline: 2px solid var(--brand-soft); outline-offset: 1px; }
.adm-form__hint { font-size: 0.72rem; color: var(--ink-soft); }
.adm-form__preview { max-width: 8rem; border-radius: 0.6rem; border: 1px solid var(--line); background: var(--cream); margin-top: 0.4rem; }

.adm-form__checks { display: flex; flex-wrap: wrap; gap: 1.4rem; font-size: 0.85rem; color: var(--ink); }
.adm-form__checks label { display: flex; align-items: center; gap: 0.45rem; cursor: pointer; }

.adm-form__actions { display: flex; justify-content: flex-end; gap: 0.7rem; padding-top: 0.4rem; }

@media (max-width: 40rem) {
  .adm__head { flex-direction: column; align-items: stretch; }
  .adm__bar { flex-wrap: wrap; }
  .shop { padding-top: 7.5rem; }
}

/* ═══════════════════════════════════════════════════════════════
   HISTÓRICO DE PEDIDOS (/orders)
   Cartão por pedido em vez de tabela: os mesmos cinco dados cabem
   sem rolagem lateral no celular, onde a maioria vai conferir.
   ═══════════════════════════════════════════════════════════════ */
.ord {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
  margin-bottom: 1rem;
}

.ord__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}

.ord__number {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.ord__date { font-size: 0.78rem; color: var(--ink-soft); margin-top: 0.15rem; }

/* A situação é a informação que se procura primeiro, então ela tem
   forma e cor próprias — não é só mais uma linha de texto. */
.ord__status {
  flex: none;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  white-space: nowrap;
}
.ord--pending   { background: #fdf4e3; color: #7a4b00; }
.ord--progress  { background: var(--brand-tint); color: var(--brand-deep); }
.ord--done      { background: #e6f4ea; color: #17603a; }
.ord--cancelled { background: #fdeceb; color: #b3261e; }

.ord__items {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.ord__items li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.86rem;
}
.ord__itemname { color: var(--ink); }
.ord__itemvalue { color: var(--ink-soft); font-variant-numeric: tabular-nums; flex: none; }

.ord__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.ord__track { display: grid; gap: 0.15rem; }
.ord__tracklabel {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.ord__trackcode {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--brand-deep);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
a.ord__trackcode { text-decoration: underline; text-underline-offset: 2px; }
a.ord__trackcode:hover { color: var(--brand); }
.ord__tracknone { font-size: 0.8rem; color: var(--ink-soft); font-style: italic; }

.ord__totals { display: grid; justify-items: end; gap: 0.1rem; }
.ord__shipping { font-size: 0.75rem; color: var(--ink-soft); }
.ord__total {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 30rem) {
  .ord__foot { flex-direction: column; align-items: stretch; }
  .ord__totals { justify-items: start; }
}

/* ═══════════════════════════════════════════════════════════════
   PRODUTO v2 — carrossel no card, subtítulo, desconto
   ═══════════════════════════════════════════════════════════════ */

/* As imagens ficam empilhadas no mesmo espaço; só a .is-on aparece.
   Trocar opacidade em vez de trocar o src evita o piscar do
   carregamento a cada passagem do mouse. */
.pcard__media { position: relative; }

.pcard__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 1rem;
  opacity: 0;
  transition: opacity 0.35s var(--ease-lux);
}
.pcard__img.is-on { opacity: 1; }

.pcard__dots {
  position: absolute;
  bottom: 0.6rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.3rem;
  opacity: 0;
  transition: opacity 0.3s;
}
.pcard:hover .pcard__dots { opacity: 1; }
.pcard__dots span {
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: var(--brand-soft);
  transition: background-color 0.3s;
}
.pcard__dots span.is-on { background: var(--brand); }

.pcard__off {
  position: absolute;
  top: 0.7rem;
  left: 0.7rem;
  background: var(--brand);
  color: var(--white);
  font-family: var(--font-cta);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.22rem 0.5rem;
  border-radius: 999px;
  z-index: 2;
}

.pcard__subtitle {
  font-size: 0.8rem;
  color: var(--ink-soft);
  line-height: 1.45;
}

@media (prefers-reduced-motion: reduce) {
  .pcard__img { transition: none; }
}

/* ── Formulário: preço calculado ─────────────────────────────── */
.adm-form__label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.adm-form__computed {
  display: block;
  padding: 0.7rem 0.85rem;
  border: 1px dashed var(--brand-soft);
  border-radius: 0.7rem;
  background: var(--brand-tint);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--brand-deep);
  font-variant-numeric: tabular-nums;
}

.adm-modal__panel--wide { width: min(100%, 52rem); }

.adm-form__block {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.2rem 1.3rem 1.4rem;
  margin: 0;
}
.adm-form__block legend {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 0 0.5rem;
}
.adm-form__counter {
  color: var(--ink-soft);
  font-weight: 500;
  letter-spacing: 0.04em;
}

/* ── Imagens no formulário ───────────────────────────────────── */
.imgs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  gap: 0.8rem;
  margin-top: 0.9rem;
}

.imgs__item {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 0.7rem;
  overflow: hidden;
  background: var(--cream);
  aspect-ratio: 1 / 1;
  display: grid;
}
/* A principal se distingue por borda, não só pela posição na grade. */
.imgs__item.is-main { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.imgs__item img { width: 100%; height: 100%; object-fit: contain; padding: 0.5rem; }

.imgs__tag {
  position: absolute;
  top: 0.35rem;
  left: 0.35rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.15rem 0.4rem;
  border-radius: 999px;
  background: var(--cream-deep);
  color: var(--ink-soft);
}
.imgs__item.is-main .imgs__tag { background: var(--brand); color: var(--white); }

.imgs__acts {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  gap: 1px;
  opacity: 0;
  transition: opacity 0.2s;
}
.imgs__item:hover .imgs__acts,
.imgs__item:focus-within .imgs__acts { opacity: 1; }
.imgs__acts button {
  flex: 1;
  border: 0;
  padding: 0.4rem 0.2rem;
  background: rgba(19, 46, 45, 0.88);
  color: var(--white);
  font: inherit;
  font-size: 0.62rem;
  font-weight: 600;
  cursor: pointer;
}
.imgs__acts button:hover { background: var(--brand-deep); }
.imgs__acts button.is-danger:hover { background: #b3261e; }

.imgs__add {
  display: inline-block;
  margin-top: 0.9rem;
  padding: 0.6rem 1.1rem;
  border: 1px dashed var(--brand-soft);
  border-radius: 0.7rem;
  color: var(--brand);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}
.imgs__add:hover { background: var(--brand-tint); border-color: var(--brand); }
.imgs__add[hidden] { display: none; }

/* ── Informações adicionais ──────────────────────────────────── */
/* ── Variações no formulário do produto ────────────────────────
   A foto vem primeiro porque é ela que distingue um sabor do outro
   de relance — o nome se lê depois. */
.vars { display: grid; gap: 0.7rem; margin-top: 0.9rem; }

.vars__row {
  display: grid;
  grid-template-columns: 4.6rem minmax(0, 1fr) 2rem;
  gap: 0.7rem; align-items: start;
}

.vars__foto {
  position: relative;
  width: 4.6rem; height: 4.6rem;
  border: 1px dashed var(--brand-soft);
  border-radius: 0.6rem;
  background: var(--white);
  display: grid; place-items: center;
  cursor: pointer; overflow: hidden;
}
.vars__foto:hover { border-color: var(--brand); background: var(--brand-tint); }
.vars__foto img { width: 100%; height: 100%; object-fit: contain; padding: 0.25rem; }
.vars__fotovazia {
  font-family: var(--font-cta);
  font-size: 0.66rem; font-weight: 600;
  color: var(--brand); text-align: center;
}
.vars__fotovazia[hidden] { display: none; }

/* Nome e preço na primeira linha, peso e SKU na segunda: o que se
   digita sempre vem antes do que quase sempre fica vazio. */
.vars__campos {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 0.45rem;
}
.vars__campos input[type="text"],
.vars__campos input[type="number"] {
  box-sizing: border-box; width: 100%; min-width: 0;
  border: 1px solid var(--line); border-radius: 0.5rem;
  padding: 0.45rem 0.6rem;
  font: inherit; font-size: 0.85rem;
  background: var(--white); color: var(--ink);
}
.vars__campos input:focus {
  outline: 2px solid var(--brand-soft); outline-offset: 1px;
  border-color: var(--brand);
}
.vars__nome { font-weight: 600; }
.vars__campos input::placeholder { color: var(--ink-soft); opacity: .7; font-size: 0.78rem; }

.vars__estoque {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.78rem; color: var(--ink-soft);
  grid-column: 1 / -1;
}

.vars__nota { margin-top: 0.9rem; }

@container painel (max-width: 52rem) {
  .vars__campos { grid-template-columns: minmax(0, 1fr); }
}

.infos { display: grid; gap: 0.7rem; margin-top: 0.9rem; }

.infos__row {
  display: grid;
  grid-template-columns: 12rem 1fr 2rem;
  gap: 0.6rem;
  align-items: start;
}
.infos__label,
.infos__value {
  width: 100%;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  font: inherit;
  font-size: 0.86rem;
  color: var(--ink);
  background: var(--white);
}
.infos__label { font-weight: 600; }
.infos__value { resize: vertical; }
.infos__label:focus,
.infos__value:focus { outline: 2px solid var(--brand-soft); outline-offset: 1px; }

.infos__del {
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: var(--white);
  color: var(--ink-soft);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.infos__del:hover { color: #b3261e; border-color: #eab3ae; }

.infos__add {
  margin-top: 0.9rem;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--brand);
  cursor: pointer;
}
.infos__add:hover { text-decoration: underline; }

/* ── Tabela do catálogo: nome + subtítulo, preço com desconto ── */
.adm__name { display: block; font-weight: 600; }
.adm__sub { display: block; font-size: 0.76rem; color: var(--ink-soft); margin-top: 0.1rem; }
.adm__was { margin-left: 0.4rem; font-size: 0.78rem; color: var(--ink-soft); }
.adm__imgcount {
  display: inline-block;
  margin-left: 0.3rem;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--ink-soft);
  vertical-align: top;
}

@media (max-width: 46rem) {
  .infos__row { grid-template-columns: 1fr 2rem; }
  .infos__label { grid-column: 1 / -1; }
}

/* ═══════════════════════════════════════════════════════════════
   FRETE — um cartão por zona
   ═══════════════════════════════════════════════════════════════ */
.fuel { display: flex; align-items: center; gap: 0.6rem; }
.fuel > span {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-soft);
}
.fuel__input {
  display: inline-flex; align-items: center; gap: 0.25rem;
  border: 1px solid var(--line); border-radius: 0.6rem;
  background: var(--white); padding-right: 0.6rem;
}
.fuel__input input {
  width: 4.5rem; border: 0; background: none;
  padding: 0.55rem 0.2rem 0.55rem 0.8rem;
  font: inherit; font-size: 0.9rem; font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.fuel__input input:focus { outline: none; }
.fuel__input:focus-within { outline: 2px solid var(--brand-soft); outline-offset: 1px; }
.fuel__input b { font-size: 0.85rem; color: var(--ink-soft); }

/* O aviso não é decorativo: sem ele alguém cobra a tarifa crua do
   cliente e a FedEx fatura outra coisa. */
.ship-warn {
  background: #fdf4e3;
  border: 1px solid #e8c98a;
  color: #7a4b00;
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  font-size: 0.85rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  max-width: 62rem;
}
.ship-warn strong { display: block; margin-bottom: 0.2rem; }

.zcard {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 1.4rem;
  overflow: hidden;
}

.zcard__head {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.2rem 1.4rem;
  flex-wrap: wrap;
}
.zcard__badge {
  display: grid; place-items: center;
  width: 2.6rem; height: 2.6rem; flex: none;
  border-radius: 50%;
  background: var(--brand); color: var(--white);
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 800;
}
.zcard__info { flex: 1; min-width: 14rem; }
.zcard__name {
  font-family: var(--font-display);
  font-size: 1rem; font-weight: 700; color: var(--ink);
}
.zcard__dests { font-size: 0.82rem; color: var(--ink-soft); margin-top: 0.15rem; }
.zcard__editdest {
  background: none; border: 0; padding: 0;
  font: inherit; font-size: 0.82rem; font-weight: 600;
  color: var(--brand); cursor: pointer;
}
.zcard__editdest:hover { text-decoration: underline; }

.zcard__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1rem;
  padding: 0 1.4rem 1.2rem;
  border-bottom: 1px solid var(--line);
}
.zfield { display: grid; gap: 0.3rem; }
.zfield span {
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-soft);
}
.zfield input {
  width: 100%; padding: 0.6rem 0.8rem;
  border: 1px solid var(--line); border-radius: 0.6rem;
  font: inherit; font-size: 0.88rem; color: var(--ink); background: var(--white);
}
.zfield input:focus { outline: 2px solid var(--brand-soft); outline-offset: 1px; }

.ztable { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.ztable th {
  text-align: left; font-size: 0.65rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-soft); font-weight: 600;
  padding: 0.7rem 1.4rem; background: var(--cream);
  border-bottom: 1px solid var(--line);
}
.ztable td {
  padding: 0.6rem 1.4rem;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.ztable tr:last-child td { border-bottom: 0; }
.ztable__range { color: var(--ink); font-variant-numeric: tabular-nums; }
.ztable__price {
  width: 6.5rem; padding: 0.4rem 0.6rem;
  border: 1px solid var(--line); border-radius: 0.5rem;
  font: inherit; font-size: 0.85rem; color: var(--ink); background: var(--white);
  font-variant-numeric: tabular-nums;
}
.ztable__price:focus { outline: 2px solid var(--brand-soft); outline-offset: 1px; }
.ztable__perkg { margin-left: 0.4rem; font-size: 0.72rem; color: var(--ink-soft); }
/* O que o cliente paga é o número que importa, então tem peso visual. */
.ztable__final { font-weight: 700; color: var(--brand-deep); font-variant-numeric: tabular-nums; }

/* ── Modal de destinos ───────────────────────────────────────── */
.dest { padding: 1.4rem 1.6rem 1.6rem; }
.dest__search { display: block; margin: 0.9rem 0; }
.dest__search input { width: 100%; }
.dest__list { max-height: 24rem; overflow-y: auto; border: 1px solid var(--line); border-radius: 0.7rem; }
.dest__row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.55rem 0.9rem;
  border-bottom: 1px solid var(--line);
}
.dest__row:last-child { border-bottom: 0; }
.dest__name { font-size: 0.87rem; color: var(--ink); }
.dest__code {
  margin-left: 0.5rem; font-size: 0.7rem; font-weight: 600;
  color: var(--ink-soft); font-variant-numeric: tabular-nums;
}
.dest__row select {
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--line); border-radius: 0.5rem;
  font: inherit; font-size: 0.8rem; color: var(--ink); background: var(--white);
}

@media (max-width: 46rem) {
  .zcard__head { flex-direction: column; align-items: flex-start; }
  .ztable th, .ztable td { padding-inline: 0.9rem; }
}

.ztable__hint {
  display: block;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--ink-faint, var(--ink-soft));
  margin-top: 0.1rem;
}

/* ═══════════════════════════════════════════════════════════════
   DESTINO NO CARRINHO
   ═══════════════════════════════════════════════════════════════ */
.cart__country { display: grid; gap: 0.3rem; margin-bottom: 0.9rem; }
.cart__country > span {
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-soft);
}
.cart__country select {
  width: 100%; padding: 0.6rem 0.8rem;
  border: 1px solid var(--line); border-radius: 0.6rem;
  font: inherit; font-size: 0.88rem; color: var(--ink); background: var(--white);
}
.cart__country select:focus { outline: 2px solid var(--brand-soft); outline-offset: 1px; }

/* O aviso precisa parar o olho: é o que explica por que o botão morreu. */
.cart__notice {
  border-radius: 0.7rem;
  padding: 0.85rem 1rem;
  margin-bottom: 0.9rem;
  font-size: 0.82rem;
  line-height: 1.55;
}
.cart__notice.is-blocked     { background: #fdefee; border: 1px solid #eab3ae; color: #8f2019; }
.cart__notice.is-distributor { background: var(--brand-tint); border: 1px solid var(--brand-soft); color: var(--brand-deep); }
.cart__notice[hidden] { display: none; }
.cart__contact { margin-top: 0.6rem; font-weight: 600; }
.cart__contact a { color: inherit; font-weight: 500; }

.cart__shipping {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 0.82rem; color: var(--ink-soft);
  padding-bottom: 0.5rem;
}
.cart__shipping[hidden] { display: none; }
.cart__shipping strong { color: var(--ink); font-variant-numeric: tabular-nums; }

/* ── Aviso no cadastro ───────────────────────────────────────── */
.authm__alert {
  border-radius: 0.7rem;
  padding: 0.8rem 0.95rem;
  font-size: 0.82rem;
  line-height: 1.55;
}
.authm__alert[hidden] { display: none; }
.authm__alert.is-blocked     { background: #fdefee; border: 1px solid #eab3ae; color: #8f2019; }
.authm__alert.is-distributor { background: var(--brand-tint); border: 1px solid var(--brand-soft); color: var(--brand-deep); }
.authm__alert-contact { margin-top: 0.5rem; font-weight: 600; }
.authm__alert-contact a { color: inherit; font-weight: 500; }
.authm__field--country[hidden] { display: none; }
.authm__field select {
  width: 100%; padding: 0.75rem 0.9rem;
  border: 1px solid var(--line); border-radius: 0.7rem;
  font: inherit; font-size: 0.9rem; color: var(--ink); background: var(--white);
}
.authm__field select:focus { outline: 2px solid var(--brand-soft); outline-offset: 1px; }

/* ═══════════════════════════════════════════════════════════════
   ADMIN — situação de país e distribuidores
   ═══════════════════════════════════════════════════════════════ */
.dest__row { flex-wrap: wrap; }
.dest__controls { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.dest__controls select,
.dest__controls input {
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--line); border-radius: 0.5rem;
  font: inherit; font-size: 0.78rem; color: var(--ink); background: var(--white);
}
.dest__lead { width: 9rem; }
.dest__dist { max-width: 11rem; }
.dest__dist[hidden] { display: none; }

/* Situação colorida: dá para varrer a lista e ver onde não se vende. */
.dest__status.is-blocked     { border-color: #eab3ae; color: #b3261e; background: #fdefee; }
.dest__status.is-distributor { border-color: var(--brand-soft); color: var(--brand-deep); background: var(--brand-tint); }

.zcard__flags { display: inline-flex; gap: 0.4rem; margin-top: 0.35rem; }
.zflag {
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.04em;
  padding: 0.12rem 0.45rem; border-radius: 999px;
}
.zflag--blocked { background: #fdefee; color: #b3261e; }
.zflag--dist    { background: var(--brand-tint); color: var(--brand-deep); }

.dists { margin-top: 2.5rem; }
.dists__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.dists__title { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; }

.dist {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1rem 1.3rem; margin-bottom: 0.7rem;
}
.dist__name { font-family: var(--font-display); font-size: 0.95rem; font-weight: 700; }
.dist__company { font-weight: 500; color: var(--ink-soft); margin-left: 0.5rem; font-size: 0.85rem; }
.dist__contacts { font-size: 0.8rem; color: var(--ink-soft); margin-top: 0.2rem; }
.dist__contacts.is-warn { color: #b3261e; }
.dist__countries { font-size: 0.78rem; color: var(--ink-faint, var(--ink-soft)); margin-top: 0.2rem; }

/* ═══════════════════════════════════════════════════════════════
   EDITOR DE TEXTO FORMATADO
   ═══════════════════════════════════════════════════════════════ */
.rt {
  border: 1px solid var(--line);
  border-radius: 0.7rem;
  background: var(--white);
  overflow: hidden;
}
.rt:focus-within { outline: 2px solid var(--brand-soft); outline-offset: 1px; }

.rt__bar {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.35rem 0.45rem;
  border-bottom: 1px solid var(--line);
  background: var(--white);
  flex-wrap: wrap;
}

.rt__btn {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0.4rem;
  background: none;
  color: var(--brand-deep);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 0.9rem;
  line-height: 1;
  transition: background-color 0.15s, color 0.15s;
}
.rt__btn:hover { background: var(--brand-tint); }
.rt__btn:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.rt__btn svg {
  width: 1.15rem; height: 1.15rem;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.rt__btn--b { font-weight: 800; }
.rt__btn--i { font-style: italic; font-family: Georgia, serif; }
.rt__btn--u { text-decoration: underline; text-underline-offset: 2px; }

/* O seletor de cor nativo fica invisível: o botão é que abre. */
.rt__color { position: relative; display: inline-flex; }
.rt__picker {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  pointer-events: none;
}

.rt__area {
  min-height: 7rem;
  max-height: 20rem;
  overflow-y: auto;
  padding: 0.8rem 0.9rem;
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ink);
}
.rt__area:focus { outline: none; }
.rt__area:empty::before {
  content: attr(data-placeholder);
  color: var(--ink-soft);
  pointer-events: none;
}
.rt__area p { margin: 0 0 0.6rem; }
.rt__area p:last-child { margin-bottom: 0; }
.rt__area ul, .rt__area ol { margin: 0 0 0.6rem; padding-left: 1.4rem; }
.rt__area li { margin-bottom: 0.2rem; }
.rt__area a { color: var(--brand); text-underline-offset: 2px; }

/* ══ LINHAS DE PRODUTO ═══════════════════════════════════════ */

/* ── Tela de Traduções ─────────────────────────────────────────
   Quatro colunas, e a do meio é a razão da tela: o inglês e a
   tradução lado a lado, na mesma altura, para o olho comparar sem
   rolar. Larguras declaradas com table-layout fixo, pela lição da
   tela de Catálogo — em layout automático o <input> pede vinte
   caracteres e estoura a coluna. */
.trad__bar {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
}
.trad__spacer { flex: 1; }

.trad__langs, .trad__abas { display: flex; gap: 0.3rem; }

.trad__lang, .trad__aba {
  display: flex; align-items: center; gap: 0.4rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  font-family: var(--font-cta);
  font-size: 0.72rem; font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
}
.trad__lang:hover, .trad__aba:hover { border-color: var(--brand-soft); color: var(--brand); }
.trad__lang.is-on, .trad__aba.is-on {
  background: var(--brand); border-color: var(--brand); color: var(--white);
}
.trad__flag { font-size: 0.95rem; line-height: 1; }

.trad__so {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.78rem; color: var(--ink-soft); cursor: pointer;
}
.trad__msg { font-size: 0.78rem; color: var(--brand); min-width: 6rem; }
.trad__msg.is-error { color: #b3261e; }

.trad__resumo {
  font-size: 0.8rem; color: var(--ink-soft);
  margin: 0 0 0.8rem;
}

.view[data-view="traducoes"] .adm__table {
  table-layout: fixed;
  min-width: 58rem;
}
.c--t1 { width: 13rem; }
.c--t4 { width: 7rem; }
/* c--t2 e c--t3 não declaram largura: dividem a sobra em partes
   iguais, e é nelas que a comparação acontece. */

.view[data-view="traducoes"] .adm__table td { vertical-align: top; padding: 0.7rem; }

.trad__prod { display: block; font-size: 0.84rem; line-height: 1.3; }
.trad__sku {
  display: block; margin-top: 0.2rem;
  font-family: var(--font-mono, monospace);
  font-size: 0.68rem; color: var(--ink-soft);
}
.trad__chave {
  font-size: 0.72rem; color: var(--brand-deep);
  background: var(--brand-tint);
  padding: 0.15rem 0.4rem; border-radius: 0.35rem;
  overflow-wrap: anywhere;
}

/* O rótulo do campo aparece dos DOIS lados, na mesma ordem: é o que
   mantém "Subtítulo" do inglês alinhado com "Subtítulo" da tradução
   quando um produto não tem volumetria e o outro tem. */
.trad__rot {
  display: block;
  font-size: 0.62rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--ink-soft);
  margin: 0.55rem 0 0.2rem;
}
.trad__rot:first-child { margin-top: 0; }

.trad__orig {
  margin: 0; font-size: 0.82rem; line-height: 1.4;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.trad__orig--alto {
  max-height: 5.4rem; overflow: auto;
  padding-right: 0.3rem;
  color: var(--ink-soft);
}

.trad__input {
  box-sizing: border-box;
  width: 100%; min-width: 0; max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  padding: 0.4rem 0.55rem;
  font: inherit; font-size: 0.82rem;
  background: var(--white);
  color: var(--ink);
}
.trad__input::placeholder { color: var(--ink-soft); opacity: 0.65; font-style: italic; }
.trad__input:focus { outline: 2px solid var(--brand-soft); outline-offset: 1px; border-color: var(--brand); }
.trad__input--alto { min-height: 5.4rem; resize: vertical; line-height: 1.4; }

.trad__ok {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.72rem; color: var(--ink-soft);
  cursor: pointer; white-space: nowrap;
}
.trad__ok.is-on { color: var(--brand); font-weight: 700; }

/* Área estreita: a coluna do produto some primeiro. O nome também
   está no inglês ao lado, então some sem levar informação embora. */
@container painel (max-width: 62rem) {
  .c--t1 { display: none; }
  .view[data-view="traducoes"] .adm__table { min-width: 44rem; }
}

/* ── Seções com subseções ──────────────────────────────────────
   O pai é destino E abre os filhos; a seta abre e fecha sem navegar.
   Separar os dois evita a surpresa de clicar na seção em que já se
   está e vê-la recolher. */
.side__group { display: block; }

.side__row { display: flex; align-items: center; }
/* O link ocupa o que sobra; a seta fica encostada à direita, onde a
   mão já a procura. */
.side__row .side__link { flex: 1; min-width: 0; }

.side__caret {
  flex: none;
  display: grid; place-items: center;
  width: 1.9rem; height: 1.9rem;
  margin-right: 0.35rem;
  background: none; border: 0; border-radius: 0.4rem;
  color: var(--ink-soft);
  cursor: pointer;
}
.side__caret:hover { background: var(--cream); color: var(--brand); }
.side__caret:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.side__caret svg {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
  /* Apontando para baixo quando aberto: a seta indica PARA ONDE o
     conteúdo se abre, não onde ele está. */
  transition: transform 0.2s;
}
.side__caret[aria-expanded="true"] svg { transform: rotate(90deg); }

/* GRUPO FECHADO COM A SEÇÃO ATIVA LÁ DENTRO acende a seta. Sem isso,
   estar em Cupons com Marketing recolhido não apareceria em lugar
   nenhum: o menu inteiro ficaria sem um único item aceso, e a pessoa
   perde a noção de onde está. */
.side__caret[data-tem-ativo="1"] {
  color: var(--brand);
  background: var(--brand-tint);
}

.side__sub[hidden] { display: none; }

/* Linhas é filha de Catálogo, e o recuo diz isso sem precisar de
   texto explicando a hierarquia. */
.side__link--sub {
  padding-left: 2.4rem;
  font-size: 0.82rem;
}
.side__link--sub svg { width: 16px; height: 16px; }

.lin__intro { margin: 0 0 1.2rem; max-width: 52ch; }

.lines { display: grid; gap: 0.7rem; }
.lines__empty { color: var(--ink-soft); font-size: 0.88rem; }

.line {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.3rem;
}
/* Linha inativa não some da tela do admin — some da loja. Meia opacidade
   diz "existe, mas não está no ar". */
.line.is-off { opacity: 0.62; }

.line__head {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem;
}
.line__name {
  font-family: var(--font-display);
  font-size: 1rem; font-weight: 700; margin: 0;
}

.line__off {
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: #b3261e;
}

.line__desc  { font-size: 0.84rem; color: var(--ink-soft); margin-top: 0.4rem; }
.line__count { font-size: 0.84rem; margin-top: 0.5rem; font-weight: 600; }
.line__items { font-size: 0.78rem; color: var(--ink-soft); margin-top: 0.15rem; }

.line__acts { display: flex; gap: 0.5rem; margin-top: 0.8rem; }
.btn--sm { padding: 0.45rem 1rem; font-size: 0.72rem; }
.btn.is-danger { color: #b3261e; border-color: #e6c3bf; }
.btn.is-danger:hover { background: #b3261e; border-color: #b3261e; color: var(--white); }

.lin__orphans {
  margin-top: 1.6rem; padding: 1rem 1.3rem;
  border: 1px dashed var(--line); border-radius: var(--radius);
  background: var(--cream);
}
.lin__orphans h2 { font-size: 0.9rem; font-family: var(--font-display); }
.lin__orphans p  { font-size: 0.82rem; color: var(--ink-soft); margin-top: 0.3rem; }
.lin__orphans ul { margin: 0.6rem 0 0 1.1rem; font-size: 0.84rem; }

/* ── Categoria ───────────────────────────────────────────────── */
/* Selo compacto: aparece na tabela do catálogo, no cartão da linha e
   em cada item do seletor de produtos. */
.catbadge {
  display: inline-block;
  font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  padding: 0.18rem 0.5rem; border-radius: 999px;
  white-space: nowrap;
}
.catbadge--professional { background: var(--brand); color: var(--white); }
.catbadge--home_care    { background: var(--brand-tint); color: var(--brand-deep); }
/* Sem categoria fica visivelmente pendente, de propósito: é uma
   decisão que ainda falta, não um estado normal. */
.catbadge--unset {
  background: transparent; color: var(--ink-soft);
  border: 1px dashed var(--line); font-weight: 600;
}

.line__mix { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.45rem; }

.bulk {
  margin-top: 0.9rem; padding-top: 0.9rem;
  border-top: 1px solid var(--cream-deep);
}
.bulk label {
  display: block; font-size: 0.78rem; font-weight: 600;
  margin-bottom: 0.35rem;
}
.bulk select { max-width: 20rem; }

/* ── Seletor de produtos ─────────────────────────────────────── */
.lin__search { margin: 0.7rem 0; display: block; max-width: 22rem; }

.picker {
  max-height: 19rem; overflow-y: auto;
  border: 1px solid var(--line); border-radius: 0.7rem;
  background: var(--white);
}
.picker__item {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.55rem 0.9rem;
  border-bottom: 1px solid var(--cream-deep);
  font-size: 0.85rem; cursor: pointer;
}
.picker__item:last-child { border-bottom: 0; }
/* Como <button>, o item nao ocupa a largura sozinho: sem isto a lista
   vira uma escadinha de retangulos de tamanhos diferentes. */
button.picker__item {
  width: 100%; text-align: left; background: none;
  font: inherit; color: inherit;
}
.picker__item:hover { background: var(--cream); }
.picker__name { flex: 1; }
.picker__sku  { font-size: 0.74rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
/* Marcar um produto de outra linha o move. O aviso aparece antes de
   salvar, não depois. */
.picker__moved {
  font-size: 0.7rem; font-weight: 600; color: #8a5a00;
  background: #fdf3dc; padding: 0.15rem 0.5rem; border-radius: 999px;
}
.picker__empty { padding: 1rem; color: var(--ink-soft); font-size: 0.85rem; }

/* ── Selo Bothanica Mineral PRO no título da loja ────────────── */
.shop__title {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}
.shop__title .section-title { margin: 0; }

.shop__seal {
  flex: none;              /* não cede largura e distorce, como o do topo */
  width: 5rem;
  height: auto;
  max-width: none;         /* anula o img { max-width: 100% } global */
}

/* Em tela estreita o título quebra em três linhas e o selo ao lado
   espreme demais o texto: ele sobe para cima, menor. */
@media (max-width: 34rem) {
  .shop__title { flex-direction: column; align-items: flex-start; gap: 0.7rem; }
  .shop__seal { width: 3.6rem; }
}

/* ══ CUPONS ══════════════════════════════════════════════════ */

/* ── Escolha do tipo, no admin ───────────────────────────────── */
.ctypes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 0.7rem;
  margin-top: 0.9rem;
}

.ctype {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 0.5rem;
  padding: 1.1rem 0.6rem;
  border: 2px solid var(--line);
  border-radius: 0.8rem;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.2s, background-color 0.2s;
}
/* O rádio real fica invisível mas continua na árvore: é ele que o
   teclado e o leitor de tela usam. Esconder com display:none tiraria
   os dois do caminho. */
.ctype input { position: absolute; opacity: 0; width: 0; height: 0; }
.ctype:hover { border-color: var(--brand-soft); }
.ctype.is-on { border-color: var(--brand); background: var(--brand-tint); }
.ctype input:focus-visible + .ctype__icon { outline: 2px solid var(--brand); outline-offset: 3px; }

.ctype__icon {
  display: grid; place-items: center;
  width: 2.6rem; height: 2.6rem;
  border-radius: 0.6rem;
  font-size: 1.1rem; font-weight: 700;
  color: var(--white);
}
.ctype__icon svg { width: 1.4rem; height: 1.4rem; }
/* Cores por tipo, como no painel que você mandou: a cor distingue as
   duas opções chamadas "Desconto" mais rápido que o rótulo. */
.ctype--amount  .ctype__icon { background: #e8695c; }
.ctype--percent .ctype__icon { background: #4aa3e8; }
.ctype--ship    .ctype__icon { background: #f0a44b; }
.ctype--fixed   .ctype__icon { background: #a78ad4; }
.ctype--bogo    .ctype__icon { background: #5fb98a; }

.ctype__label { font-size: 0.76rem; font-weight: 600; line-height: 1.3; }

.cup__code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82rem; font-weight: 700;
  background: var(--cream-deep); color: var(--brand-deep);
  padding: 0.2rem 0.5rem; border-radius: 0.35rem;
}

/* ── Campo no carrinho ───────────────────────────────────────── */
.cart__coupon { display: flex; gap: 0.5rem; margin: 0.9rem 0 0.3rem; }
.cart__coupon input {
  flex: 1; min-width: 0;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--line); border-radius: 0.6rem;
  font: inherit; font-size: 0.86rem;
  text-transform: uppercase;
}
.cart__coupon input::placeholder { text-transform: none; }
.cart__coupon .btn { padding: 0.65rem 1.1rem; font-size: 0.75rem; }

.cart__couponmsg { font-size: 0.78rem; min-height: 1.1em; margin-bottom: 0.4rem; }
.cart__couponmsg.is-ok { color: var(--brand); font-weight: 600; }
.cart__couponmsg.is-error { color: #b3261e; }

.cart__discount {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 0.88rem; color: var(--brand);
  font-weight: 600; margin-bottom: 0.4rem;
}

/* ══ E-MAIL MARKETING ════════════════════════════════════════ */

.mailtag {
  font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  padding: 0.2rem 0.55rem; border-radius: 999px;
}
.mailtag--draft { background: var(--cream-deep); color: var(--ink-soft); }
.mailtag--sent  { background: var(--brand); color: var(--white); }

/* ── Barra do editor ─────────────────────────────────────────── */
.mailbar {
  display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap;
  padding-bottom: 1rem; margin-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}
.mailbar__fields { display: flex; gap: 0.6rem; flex: 1; min-width: 14rem; }
.mailbar__fields input {
  flex: 1; min-width: 0;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--line); border-radius: 0.6rem;
  font: inherit; font-size: 0.86rem;
}
.mailbar__acts { display: flex; gap: 0.5rem; }

/* ── Duas colunas: paleta e tela ─────────────────────────────── */
.mailedit {
  display: grid;
  grid-template-columns: 15rem 1fr;
  gap: 1.4rem;
  align-items: start;
}
@media (max-width: 62rem) { .mailedit { grid-template-columns: 1fr; } }

.mailedit__panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem;
  position: sticky; top: 1rem;
}
.mailedit__paneltitle { font-size: 0.95rem; font-family: var(--font-display); margin: 0 0 0.8rem; }
.mailedit__group {
  font-size: 0.66rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--ink-soft);
  margin: 1rem 0 0.45rem;
}
.mailedit__blocks { display: grid; gap: 0.35rem; }

.mailblock {
  display: flex; align-items: center; gap: 0.6rem;
  width: 100%; padding: 0.55rem 0.7rem;
  border: 1px solid var(--line); border-radius: 0.6rem;
  background: var(--white); cursor: pointer;
  font: inherit; font-size: 0.82rem; text-align: left;
  transition: border-color 0.2s, background-color 0.2s;
}
.mailblock:hover { border-color: var(--brand); background: var(--brand-tint); }
.mailblock__icon {
  display: grid; place-items: center;
  width: 1.6rem; height: 1.6rem; flex: none;
  border-radius: 0.35rem;
  background: var(--cream-deep); color: var(--ink-soft);
  font-size: 0.8rem; font-weight: 700;
}

/* ── Tela do e-mail ──────────────────────────────────────────── */
.mailedit__canvas { background: var(--cream); border-radius: var(--radius); padding: 1.4rem; }
.mailedit__paper {
  max-width: 600px; margin: 0 auto;
  background: var(--white); border-radius: 0.8rem;
  overflow: hidden;
  box-shadow: 0 20px 40px -30px rgba(19, 46, 45, 0.4);
}
.mailedit__empty { text-align: center; color: var(--ink-soft); font-size: 0.88rem; padding: 2rem 0; }

.mailrow { position: relative; border-bottom: 1px dashed transparent; }
.mailrow:hover { border-bottom-color: var(--line); background: rgba(0, 149, 137, 0.03); }
.mailrow__body { padding: 0.9rem 1.4rem; }

/* Controles só aparecem no bloco sob o ponteiro: a tela tem de
   parecer o e-mail, não um formulário. */
.mailrow__ctrl {
  position: absolute; top: 0.3rem; right: 0.4rem;
  display: flex; gap: 2px; opacity: 0; transition: opacity 0.15s;
  z-index: 2;
}
.mailrow:hover .mailrow__ctrl,
.mailrow:focus-within .mailrow__ctrl { opacity: 1; }
.mailrow__ctrl button {
  width: 1.6rem; height: 1.6rem;
  border: 1px solid var(--line); border-radius: 0.35rem;
  background: var(--white); cursor: pointer;
  font-size: 0.7rem; line-height: 1; color: var(--ink-soft);
}
.mailrow__ctrl button:hover { border-color: var(--brand); color: var(--brand); }
.mailrow__ctrl button.is-danger:hover { border-color: #b3261e; color: #b3261e; }

.mailfield { outline: none; }
.mailfield:focus { background: var(--brand-tint); border-radius: 0.3rem; }
.mailfield:empty::before {
  content: attr(data-placeholder);
  color: var(--ink-soft); opacity: 0.65;
}
.mailfield.is-h1 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 900; line-height: 1.2; }
.mailfield.is-h2 { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--brand-logo); }
.mailfield.is-p  { font-size: 0.92rem; line-height: 1.6; color: var(--ink-soft); }

.mailbtnwrap { margin: 0.7rem 0 0.2rem; }
.mailbtn {
  display: inline-block; padding: 0.75rem 1.5rem;
  background: var(--brand-logo); color: var(--white);
  border-radius: 999px; font-size: 0.8rem; font-weight: 700;
  outline: none;
}

.maildiv { border: 0; border-top: 1px solid var(--line); margin: 0.6rem 0; }

.mailimg { cursor: pointer; border-radius: 0.5rem; overflow: hidden; }
.mailimg img { display: block; width: 100%; height: auto; }
.mailimg.is-empty {
  display: grid; place-items: center;
  min-height: 7rem;
  border: 2px dashed var(--brand-soft);
  color: var(--brand); font-size: 0.85rem; font-weight: 600;
  background: var(--brand-tint);
}

.mailinput { display: block; margin-top: 0.5rem; }
.mailinput span {
  display: block; font-size: 0.68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-soft); margin-bottom: 0.2rem;
}
.mailinput input {
  width: 100%; padding: 0.45rem 0.6rem;
  border: 1px solid var(--line); border-radius: 0.4rem;
  font: inherit; font-size: 0.78rem;
}

.mailfixed {
  font-size: 0.8rem; color: var(--ink-soft);
  background: var(--cream); border-radius: 0.5rem; padding: 0.7rem 0.9rem;
}

.mailprods { display: grid; gap: 0.4rem; margin-bottom: 0.6rem; font-size: 0.85rem; }
.mailprod { background: var(--cream); border-radius: 0.4rem; padding: 0.5rem 0.7rem; }

.mailcoupon {
  border: 2px dashed var(--brand-logo); border-radius: 0.5rem;
  padding: 0.9rem; text-align: center;
  font-size: 1.1rem; font-weight: 700; letter-spacing: 0.12em;
  color: var(--brand-logo); margin: 0.5rem 0;
}

/* O editor usa a largura toda: barra lateral do painel e mais duas
   colunas não cabem numa área estreita. */
.view--full { max-width: none; }

/* ── Preço de sócio: faixa para visitante ────────────────────── */
/* ── Convite ao cadastro ──────────────────────────────────────
   Era uma linha de texto pálido com um botão no fim, e lia-se como
   aviso de sistema. O desconto é o melhor argumento da loja para
   alguém criar conta e estava escrito do tamanho de uma nota de
   rodapé.

   O selo carrega o número, porque é o que se vê antes de ler. */
.shop__member {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.9rem 1.2rem;
  padding: 1.1rem 1.3rem;
  margin-bottom: 1.4rem;
  background: linear-gradient(135deg, var(--brand-tint), rgba(0, 149, 137, 0.02));
  border: 1px solid var(--brand-soft);
  border-radius: var(--radius);
  font-size: 0.88rem;
}
.shop__memberoff {
  flex: none;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 999px;
  background: var(--brand);
  color: var(--white);
  box-shadow: var(--shadow-brand);
  line-height: 1;
}
.shop__memberoff b { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; }
.shop__memberoff i { font-size: 0.62rem; font-style: normal; font-weight: 700; margin-top: 1px; }

.shop__membertext { flex: 1; min-width: 14rem; display: grid; gap: 0.2rem; }
.shop__membertext strong {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--brand-deep);
}
.shop__membertext span { color: var(--ink-soft); }

/* Os botões não quebram entre si: separá-los deixaria "Entrar"
   sozinho numa linha, parecendo outra coisa. */
.shop__memberacts { display: flex; gap: 0.5rem; flex: none; flex-wrap: nowrap; }
.shop__member .btn { padding: 0.6rem 1.15rem; font-size: 0.72rem; white-space: nowrap; }

@media (max-width: 40rem) {
  .shop__memberoff { width: 2.9rem; height: 2.9rem; }
  .shop__memberoff b { font-size: 1.05rem; }
  .shop__memberacts { width: 100%; }
  .shop__member .btn { flex: 1; justify-content: center; }
}

/* ── Índice de seção (Marketing) ─────────────────────────────── */
.hub {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 0.9rem;
  margin-bottom: 1.8rem;
}

.hub__card {
  display: flex; align-items: flex-start; gap: 0.9rem;
  padding: 1.2rem 1.3rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none; color: inherit;
  transition: border-color 0.2s, transform 0.2s;
}
.hub__card:hover { border-color: var(--brand); transform: translateY(-2px); }

.hub__icon {
  display: grid; place-items: center; flex: none;
  width: 2.6rem; height: 2.6rem;
  border-radius: 0.6rem;
  background: var(--brand-tint); color: var(--brand-deep);
}
.hub__icon svg { width: 1.4rem; height: 1.4rem; }

.hub__body { display: block; }
.hub__body strong {
  display: block;
  font-family: var(--font-display);
  font-size: 0.98rem; margin-bottom: 0.25rem;
}
.hub__body span { font-size: 0.83rem; color: var(--ink-soft); line-height: 1.5; }

/* ── Editor formatado nas seções de informação ───────────────── */
/* O contêiner é só o ponto de montagem: a borda e o fundo vêm do
   próprio .rt, e repeti-los aqui daria borda dupla. */
.infos__rich { min-width: 0; }

/* Nas seções o texto é curto — receituário, composição, aviso. A
   altura da descrição do produto (7rem) deixaria a lista cheia de
   caixas vazias. */
.infos__rich .rt__area { min-height: 4.5rem; max-height: 14rem; }

/* Oito botões numa coluna estreita: quebram em duas fileiras em vez
   de espremer ou vazar. */
.infos__rich .rt__bar { flex-wrap: wrap; }

/* ── Catálogo: SKU, peso e ordenação ─────────────────────────── */
.adm__sku {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* Produto sem peso não cota frete. Um traço discreto esconderia
   isso; o aviso precisa ser encontrável de relance. */
.adm__nowe {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #8a5a00;
  background: #fdf3dc;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  white-space: nowrap;
}

/* O cabeçalho vira botão: quem navega por teclado alcança a
   ordenação com Tab, o que um <th> clicável não permitiria. */
.adm__sort {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}
.adm__sort::after {
  content: "↕";
  font-size: 0.7em;
  opacity: 0.35;
}
.adm__sort:hover { color: var(--brand); }
.adm__sort:hover::after { opacity: 0.7; }
.adm__sort.is-on { color: var(--brand); }
.adm__sort.is-on::after { content: "↑"; opacity: 1; }
.adm__sort.is-on.is-desc::after { content: "↓"; }
.adm__sort:focus-visible { outline: 2px solid var(--brand-soft); outline-offset: 2px; }


/* ── Barra lateral recolhivel (desktop) ──────────────────────── */
/* Escopo em min-width: abaixo de 62rem a barra e uma gaveta fixa, e
   mexer nas colunas da grade ali quebraria esse comportamento. */
@media (min-width: 62.01rem) {
  .adm.is-collapsed { grid-template-columns: 0 1fr; }
  .adm.is-collapsed .side {
    overflow: hidden;
    border-right: 0;
    /* visibility acompanha a largura zero: sem isso o conteudo
       continua alcancavel por Tab dentro de uma coluna invisivel. */
    visibility: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  .adm { transition: none; }
}

/* ── Produto em tela inteira ─────────────────────────────────── */
/* Sem o recorte do pop-up, o formulário esticaria pela largura toda
   e os campos ficariam longos demais para ler. */
.adm-form--page {
  max-width: 60rem;
  padding: 0;
}

/* A barra acompanha a rolagem: num formulário longo, ter que voltar
   ao topo ou descer ao fim para salvar é atrito puro. */
.prodbar {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.4rem 0 1rem;
  margin-bottom: 1.4rem;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}
.prodbar__id { min-width: 0; }
.prodbar__acts { display: flex; gap: 0.5rem; flex: none; }

/* Dentro da area util, quem manda e' o espaco que sobrou da barra
   lateral — nao o tamanho da janela. */
@container painel (max-width: 40rem) {
  .prodbar { align-items: stretch; flex-direction: column; }
  .prodbar__acts .btn { flex: 1; }
}

/* ── Lotes: quantidade + desconto ────────────────────────────── */
.tiers { display: grid; gap: 0.6rem; margin: 0.9rem 0; }

.tier {
  display: grid;
  grid-template-columns: 8rem 8rem 1fr 2rem;
  gap: 0.7rem;
  align-items: end;
  padding: 0.7rem 0.9rem;
  background: var(--cream);
  border-radius: 0.7rem;
}
@media (max-width: 40rem) {
  .tier { grid-template-columns: 1fr 1fr; }
  .tier__calc { grid-column: 1 / -1; }
}

.tier__field { display: grid; gap: 0.25rem; }
.tier__field span {
  font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-soft);
}
.tier__field input {
  width: 100%; padding: 0.55rem 0.7rem;
  border: 1px solid var(--line); border-radius: 0.5rem;
  font: inherit; font-size: 0.86rem; background: var(--white);
}
.tier__field input:focus { outline: 2px solid var(--brand-soft); outline-offset: 1px; }

/* O resultado calculado, não digitado: o total da faixa em destaque
   e o valor por unidade abaixo, que é o número que o comprador de
   atacado realmente compara. */
.tier__calc { display: grid; gap: 0.1rem; padding-bottom: 0.4rem; }
.tier__calc strong { font-size: 1rem; color: var(--brand-deep); }
.tier__calc span { font-size: 0.74rem; color: var(--ink-soft); }

/* ── Edição em linha no catálogo ─────────────────────────────── */
.cell { padding: 0 !important; position: relative; }

/* A célula inteira é o alvo do clique. Um botão pequeno no meio da
   célula obrigaria a mira; ocupando tudo, clicar em qualquer ponto
   funciona. */
.cell__btn {
  display: block;
  width: 100%;
  min-height: 2.6rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  background: none;
  font: inherit;
  color: inherit;
  text-align: inherit;
  cursor: text;
  transition: border-color 0.15s, background-color 0.15s;
}
.cell__btn:hover { border-color: var(--line); background: var(--cream); }
.cell__btn:focus-visible { outline: 2px solid var(--brand-soft); outline-offset: -2px; }
.cell__btn.is-muted { color: var(--ink-soft); }

/* Os que alternam com um clique não são campo de texto: o cursor
   precisa dizer isso antes do clique. */
.cell__btn--pill { cursor: pointer; }
.cell__btn--sku { cursor: text; }

.cell__input {
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--brand);
  border-radius: 0.5rem;
  font: inherit;
  font-size: 0.86rem;
  background: var(--white);
}
.cell__input:focus { outline: 2px solid var(--brand-soft); outline-offset: 1px; }

/* Preço e desconto lado a lado dentro da mesma célula. */
.cell__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem; padding: 0.3rem; }
.cell__pair label { display: grid; gap: 0.15rem; }
.cell__pair span {
  font-size: 0.6rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--ink-soft);
}
.cell__pair .cell__input { padding: 0.4rem 0.5rem; font-size: 0.8rem; }

/* Confirmação de gravação: verde por um instante, vermelho se falhou.
   Sem isso não há como saber se a alteração pegou. */
.cell--ok   { animation: cell-ok 0.9s ease-out; }
.cell--erro { box-shadow: inset 0 0 0 2px #b3261e; border-radius: 0.5rem; }
@keyframes cell-ok {
  0%   { background: var(--brand-tint); }
  100% { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .cell--ok { animation: none; background: var(--brand-tint); }
}

/* ── Linhas: várias por produto ──────────────────────────────── */
.linepick { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.linepick__item {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--line); border-radius: 999px;
  font-size: 0.82rem; cursor: pointer;
  background: var(--white);
  transition: border-color 0.2s, background-color 0.2s;
}
.linepick__item:hover { border-color: var(--brand-soft); }
.linepick__item:has(input:checked) {
  border-color: var(--brand); background: var(--brand-tint); font-weight: 600;
}

/* Dentro da célula da tabela o espaço é curto: caixas empilhadas,
   sem pílula, e com altura máxima para não esticar a linha quando
   houver muitas linhas cadastradas. */
.linepick--cell {
  flex-direction: column; gap: 0.15rem;
  padding: 0.4rem 0.5rem;
  max-height: 12rem; overflow-y: auto;
  border: 1px solid var(--brand); border-radius: 0.5rem;
  background: var(--white);
}
.linepick--cell .linepick__item {
  border: 0; background: none; padding: 0.15rem 0; font-size: 0.78rem;
}
.linepick--cell .linepick__item:has(input:checked) { background: none; }

/* ── Cabeçalho do formulário de produto ──────────────────────── */
/* Título e Categoria são campos estreitos; Linhas precisa de
   largura para as caixas caberem lado a lado. Numa grade de três
   colunas iguais, as caixas quebravam a cada duas e empurravam a
   linha inteira para baixo. */
.adm-form__row--head {
  grid-template-columns: minmax(15rem, 1fr) minmax(18rem, 1.5fr);
  align-items: start;
}
.adm-form__col { display: grid; gap: 1.1rem; align-content: start; }

/* Alinha o topo das caixas com o topo do campo Título, apesar de o
   rótulo das duas colunas ter alturas diferentes. */
.adm-form__row--head .linepick { align-content: start; }

@media (max-width: 52rem) {
  .adm-form__row--head { grid-template-columns: 1fr; }
}

/* ══ PÁGINA DO PRODUTO ═══════════════════════════════════════ */
.prod { padding: 7rem 0 5rem; background: var(--cream); min-height: 70vh; }
.prod__back { margin-bottom: 1.4rem; }
.prod__state { color: var(--ink-soft); padding: 3rem 0; }

.prod__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  /* A primeira linha vale o tamanho das imagens; a segunda fica com
     todo o resto. Sem isso, quando a ficha da direita e' mais alta
     que imagens + secoes, a sobra e' repartida entre as duas linhas e
     abre um vao no meio da coluna esquerda. */
  grid-template-rows: auto 1fr;
  column-gap: clamp(1.5rem, 4vw, 3rem);
  row-gap: 1.6rem;
  align-items: start;
}

/* No desktop: imagens em cima à esquerda, seções logo abaixo delas, e
   a ficha ocupando a coluna direita inteira. Assim o espaço que
   sobrava sob as miniaturas passa a ser usado, e o botão de compra
   continua visível sem rolar. */
.prod__gallery  { grid-column: 1; grid-row: 1; }
.prod__info     { grid-column: 2; grid-row: 1 / span 2; }
/* Encostado no topo da segunda linha, que agora e' alta: sem isto
   as secoes ficariam centradas nela. */
.prod__sections { grid-column: 1; grid-row: 2; align-self: start; }

/* No celular a grade vira uma coluna e vale a ordem do HTML:
   imagens, ficha, seções — com o botão de compra antes dos textos
   longos. */
@media (max-width: 56rem) {
  .prod__grid { grid-template-columns: 1fr; }
  .prod__gallery, .prod__info, .prod__sections {
    grid-column: auto; grid-row: auto;
  }
}

/* ── Galeria ─────────────────────────────────────────────────── */
.prod__main {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
}
.prod__main img { width: 100%; height: 100%; object-fit: contain; padding: 1.5rem; }

.prod__thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));
  gap: 0.5rem;
  margin-top: 0.7rem;
}
.prod__thumb {
  aspect-ratio: 1 / 1;
  border: 2px solid var(--line);
  border-radius: 0.6rem;
  background: var(--white);
  padding: 0.3rem;
  cursor: pointer;
  overflow: hidden;
}
.prod__thumb img { width: 100%; height: 100%; object-fit: contain; }
.prod__thumb.is-on { border-color: var(--brand); }

/* ── Ficha ───────────────────────────────────────────────────── */
.prod__line {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--brand);
}
.prod__name {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800;
  line-height: 1.15; margin: 0.4rem 0 0.3rem;
}
.prod__subtitle { color: var(--ink-soft); font-size: 1rem; line-height: 1.5; }

.prod__price {
  display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap;
  margin: 1.3rem 0;
}
.prod__price strong { font-size: 1.9rem; font-weight: 800; color: var(--brand-deep); }
.prod__price s { color: var(--ink-soft); font-size: 1rem; }
.prod__off {
  background: var(--brand); color: var(--white);
  font-size: 0.7rem; font-weight: 700; padding: 0.2rem 0.5rem; border-radius: 999px;
}
.prod__tbd { color: var(--ink-soft); font-size: 1.1rem; }

.prod__member {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.9rem;
  padding: 0.8rem 1rem; margin-bottom: 1.2rem;
  background: var(--brand-tint); border: 1px solid var(--brand-soft);
  border-radius: var(--radius); font-size: 0.85rem;
}
.prod__member span { flex: 1; min-width: 8rem; color: var(--ink-soft); }

/* ── Lotes ───────────────────────────────────────────────────── */
/* ── Seletor de variação na página do produto ──────────────────
   Botões, não <select>: com dez sabores a lista esconderia nove, e a
   escolha aqui é o que decide preço e foto. */
.prod__vars { margin: 1.1rem 0 0.4rem; }
.prod__varlabel {
  display: block;
  font-family: var(--font-cta);
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 0.5rem;
}
.prod__varlist { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.prod__var {
  display: flex; align-items: center; gap: 0.45rem;
  background: var(--white);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 0.35rem 0.85rem 0.35rem 0.35rem;
  font-family: var(--font-cta);
  font-size: 0.78rem; font-weight: 600;
  color: var(--ink); cursor: pointer;
  transition: border-color .2s, background-color .2s;
}
.prod__var:hover { border-color: var(--brand-soft); }
.prod__var.is-on {
  border-color: var(--brand); background: var(--brand-tint);
  color: var(--brand-deep);
}
.prod__var:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* A miniatura é o que distingue um sabor do outro antes do nome. */
.prod__varimg {
  width: 1.9rem; height: 1.9rem; flex: none;
  border-radius: 50%; object-fit: cover;
  background: var(--cream);
}
.prod__var--semfoto { padding-left: 0.85rem; }
/* Esgotada continua visível, e riscada: sumir faria o cliente
   procurar um sabor que ele sabe que existe. */
.prod__var.is-out { opacity: .5; text-decoration: line-through; cursor: not-allowed; }

/* No carrinho, a variação vai embaixo do nome. */
.cart__rowvar {
  display: block;
  font-size: 0.76rem; color: var(--ink-soft);
  margin-top: 0.1rem;
}

.prod__tiers { margin-bottom: 1.4rem; }
.prod__tiers h2 { font-family: var(--font-display); font-size: 1rem; margin-bottom: 0.5rem; }
.prod__tiertable { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.prod__tiertable th {
  text-align: left; font-size: 0.66rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--ink-soft);
  padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--line);
}
.prod__tiertable td { padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--line); }
.prod__tiertable td.num { text-align: right; font-weight: 700; color: var(--brand-deep); }
/* Clicar na faixa preenche a quantidade — o cursor precisa avisar. */
.prod__tiertable tbody tr { cursor: pointer; }
.prod__tiertable tbody tr:hover { background: var(--brand-tint); }

/* ── Comprar ─────────────────────────────────────────────────── */
.prod__buy { display: flex; align-items: end; gap: 0.7rem; flex-wrap: wrap; }
.prod__qty { display: grid; gap: 0.25rem; }
.prod__qty span {
  font-size: 0.66rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--ink-soft);
}
.prod__qty input {
  width: 5.5rem; padding: 0.85rem 0.8rem;
  border: 1px solid var(--line); border-radius: 0.7rem;
  font: inherit; font-size: 1rem; text-align: center; background: var(--white);
}
.prod__added { font-size: 0.85rem; color: var(--brand); min-height: 1.2em; margin-top: 0.6rem; }
.prod__added a { color: var(--brand-logo); font-weight: 700; }

/* ── Ficha técnica e textos ──────────────────────────────────── */
.prod__meta {
  display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 1rem;
  margin: 1.6rem 0; padding-top: 1.2rem;
  border-top: 1px solid var(--line); font-size: 0.86rem;
}
.prod__meta dt { color: var(--ink-soft); }
.prod__meta dd { font-weight: 600; }

.prod__desc { font-size: 0.92rem; line-height: 1.7; color: var(--ink-soft); }
.prod__desc p { margin-bottom: 0.8rem; }
.prod__desc ul, .prod__desc ol { margin: 0 0 0.9rem 1.2rem; }
.prod__desc li { margin-bottom: 0.3rem; }
.prod__desc strong { color: var(--ink); }

/* Seções em sanfona: são muitas — composição, modo de uso, avisos —
   e abertas de uma vez empurrariam o botão de compra para longe. */
.prod__sections { margin-top: 0; }
.prod__section { border-top: 1px solid var(--line); }
.prod__section summary {
  padding: 0.9rem 0; cursor: pointer;
  font-weight: 700; font-size: 0.88rem;
  list-style: none;
}
.prod__section summary::-webkit-details-marker { display: none; }
.prod__section summary::after { content: "+"; float: right; color: var(--brand); font-weight: 400; }
.prod__section[open] summary::after { content: "−"; }
.prod__sectionbody {
  padding-bottom: 1rem; font-size: 0.86rem; line-height: 1.65; color: var(--ink-soft);
}
.prod__sectionbody ul { margin: 0 0 0.6rem 1.2rem; }

/* ── Card da loja como link ──────────────────────────────────── */
.pcard--link { cursor: pointer; }
.pcard--link:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

/* Volumetria logo abaixo do subtítulo: é a primeira pergunta de quem
   compara dois frascos, então ganha peso próprio em vez de ficar
   entre SKU e peso na ficha técnica. */
.prod__size {
  display: inline-block;
  margin-top: 0.6rem;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
}

/* Produto sem volumetria não mostra a pílula na loja. A falta precisa
   aparecer no painel, mas com menos alarme que "sem peso" — este não
   quebra o frete, só empobrece a página do produto. */
.adm__nosize {
  font-size: 0.7rem;
  color: var(--ink-soft);
  font-style: italic;
}

/* ── Cabeçalho da loja: texto à esquerda, selo de envio à direita ── */
.shop__intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.shop__intro .shop__head { margin-bottom: 0; }

/* Abaixo de 62rem o selo desce e vira faixa: espremido ao lado do
   título ele ficaria ilegível, e escondê-lo desperdiçaria um
   argumento de venda que vale em qualquer tela. */
@media (max-width: 62rem) {
  .shop__intro { grid-template-columns: 1fr; }
}

.shipbadge {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 0.1rem;
  padding: 1.6rem 1.8rem;
  min-width: 15rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 20px 40px -34px rgba(19, 46, 45, 0.5);
}

.shipbadge__art { width: 6.5rem; height: 6.5rem; color: var(--brand); }

.shipbadge__big {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 900;
  line-height: 1;
  color: var(--brand-deep);
  letter-spacing: -0.02em;
}
.shipbadge__big span { color: var(--brand); }

.shipbadge__label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.7rem;
}

.shipbadge__text {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 13rem;
}
.shipbadge__text strong { color: var(--ink); }

@media (max-width: 62rem) {
  /* Deitado: o selo vira uma faixa horizontal, que ocupa menos altura
     no topo da lista de produtos. */
  .shipbadge {
    grid-template-columns: auto 1fr;
    justify-items: start;
    text-align: left;
    align-items: center;
    gap: 0 1.1rem;
    min-width: 0;
    padding: 1.1rem 1.3rem;
  }
  .shipbadge__art { grid-row: 1 / span 3; width: 4rem; height: 4rem; }
  .shipbadge__big { font-size: 1.8rem; }
  .shipbadge__label { margin-bottom: 0.2rem; }
  .shipbadge__text { max-width: none; }
}

/* ── Barra de ferramentas da loja ────────────────────────────── */
.shop__tools {
  display: flex;
  gap: 0.6rem;
  align-items: center;

  /* Gruda logo abaixo do cabeçalho fixo. A altura vem do nav.js, que
     a mede de verdade — o cabeçalho muda de altura conforme a largura
     da tela, e um número escrito aqui erraria nas faixas em que ele
     quebra em duas linhas. */
  position: sticky;
  top: var(--nav-h, 5rem);
  z-index: 20;

  /* Fundo e margem negativa: sem eles os produtos passariam por baixo
     da barra, visíveis nas beiradas do container. */
  background: var(--cream);
  padding: 0.8rem 0;
  margin: 0 -0.6rem 1rem;
  padding-inline: 0.6rem;
}

.shop__search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}
.shop__search svg {
  position: absolute; left: 0.9rem;
  width: 1.1rem; height: 1.1rem;
  color: var(--ink-soft); pointer-events: none;
}
.shop__search input {
  width: 100%;
  padding: 0.8rem 1rem 0.8rem 2.6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  font: inherit; font-size: 0.9rem;
}
.shop__search input:focus {
  outline: 2px solid var(--brand-soft); outline-offset: 1px;
  border-color: var(--brand);
}

/* A lista suspensa só existe no celular; no desktop as pílulas cabem
   numa linha e mostram tudo de uma vez, o que é melhor. */
.shop__pick { display: none; position: relative; }

.shop__pickbtn {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem; width: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  font: inherit; font-size: 0.9rem; color: inherit;
  cursor: pointer; text-align: left;
}
.shop__pickbtn svg { width: 1.1rem; height: 1.1rem; flex: none; color: var(--ink-soft); }
.shop__pickbtn[aria-expanded="true"] { border-color: var(--brand); }
.shop__pickbtn[aria-expanded="true"] svg { transform: rotate(180deg); }
.shop__pickbtn:focus-visible { outline: 2px solid var(--brand-soft); outline-offset: 2px; }

.shop__picklist {
  position: absolute; inset-inline: 0; top: calc(100% + 0.35rem);
  z-index: 30;
  margin: 0; padding: 0.35rem; list-style: none;
  max-height: 60vh; overflow-y: auto;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  box-shadow: 0 24px 44px -24px rgba(19, 46, 45, 0.35);
}
.shop__picklist li {
  padding: 0.7rem 0.9rem;
  border-radius: 0.6rem;
  font-size: 0.9rem;
  cursor: pointer;
}
.shop__picklist li:hover { background: var(--cream); }
.shop__picklist li.is-on { background: var(--brand-tint); color: var(--brand-deep); font-weight: 700; }
.shop__picklist li:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

.shop__count {
  font-size: 0.8rem; color: var(--ink-soft);
  margin-bottom: 1rem; min-height: 1.2em;
}

@media (max-width: 62rem) {
  /* Nove pílulas viravam nove linhas e empurravam os produtos para
     fora da primeira tela. No celular quem escolhe é a lista. */
  .shop__filters { display: none; }
  .shop__pick { display: block; flex: 1; }
  .shop__tools { flex-wrap: wrap; }
  .shop__search { flex-basis: 100%; }
}

/* Duas colunas no celular: o card de 15rem forçava uma coluna só, e
   rolar 52 produtos um a um é caminhada longa demais. */
@media (max-width: 46rem) {
  .shop__grid { grid-template-columns: 1fr 1fr; gap: 0.7rem; }
  .pcard__name { font-size: 0.86rem; }
  .pcard__subtitle, .pcard__size { font-size: 0.72rem; }
  .pcard__now { font-size: 1rem; }
  .pcard__add { padding: 0.7rem 0.6rem; font-size: 0.68rem; }
  .pcard__body { padding: 0.7rem 0.8rem 0.8rem; }
}

/* ══ VENDAS ═════════════════════════════════════════════════ */

/* ── Faturamento ─────────────────────────────────────────────
   Quatro números em linha no desktop, dois a dois no celular. */
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.8rem;
  margin: 0 0 1.4rem;
}
.kpi {
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  background: var(--white);
}
.kpi__label {
  margin: 0; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-soft);
}
.kpi__value {
  margin: 0.3rem 0 0.15rem;
  font-family: var(--font-display);
  font-size: 1.55rem; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.kpi__sub { margin: 0; font-size: 0.76rem; color: var(--ink-soft); }

/* ── Selo de situação ────────────────────────────────────────
   A cor carrega o significado, mas o texto vem junto: quem não
   distingue as cores continua lendo a situação. */
.st {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.72rem; font-weight: 600; white-space: nowrap;
}
.st--wait { background: #fdf3dc; color: #8a5a00; }
.st--ok   { background: #e3f5ee; color: #146c4e; }
.st--work { background: #e6f0fb; color: #1b4f8a; }
.st--ship { background: #ede7fb; color: #4b2f8f; }
.st--done { background: var(--brand-tint); color: var(--brand-deep); }
.st--off  { background: #f0f0f0; color: #6b6b6b; }

.adm__row--click { cursor: pointer; }
.adm__row--click:hover { background: var(--cream); }
.cell__sub {
  display: block; font-size: 0.74rem; color: var(--ink-soft);
}
.cell--acts { text-align: right; white-space: nowrap; }

/* Tabela ou lista sem nada: precisa dizer isso com todas as letras.
   Uma area em branco parece falha de carregamento. */
.adm__empty { color: var(--ink-soft); font-size: 0.88rem; }

/* ── Detalhe do pedido ────────────────────────────
   Denso de propósito. Esta tela é lida dezenas de vezes por dia por
   quem separa e despacha: 13px e cartões justos põem itens, endereço e
   pagamento na mesma dobra, sem rolagem. Fonte grande aqui não é
   generosidade — é rolagem a mais em cada pedido. */

.ped__crumb {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.78rem; color: var(--ink-soft); margin-bottom: 0.7rem;
}
.ped__crumb a { color: var(--brand); text-decoration: none; }
.ped__crumb a:hover { text-decoration: underline; }
.ped__crumb b { color: var(--ink); font-weight: 600; }

.ped__top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.1rem; flex-wrap: wrap;
}
.ped__id { min-width: 0; }
.ped__titleline { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.ped__titleline h1 {
  margin: 0; font-family: var(--font-display);
  font-size: 1.45rem; font-weight: 800; letter-spacing: -0.02em; color: var(--ink);
}
.ped__chips { display: inline-flex; gap: 0.35rem; flex-wrap: wrap; }
.ped__when { margin: 0.25rem 0 0; font-size: 0.8rem; color: var(--ink-soft); }

.ped {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 21rem;
  gap: 1rem;
  align-items: start;
}
.ped__main, .ped__side { display: grid; gap: 1rem; min-width: 0; }
/* Filho de grade nasce com min-width:auto, ou seja, se RECUSA a
   encolher abaixo do próprio conteúdo. Sem esta linha, a lista de
   itens empurra a coluna da esquerda para fora da faixa e passa por
   baixo do cartão da direita. */
.ped__main > *, .ped__side > * { min-width: 0; }

.ped__card {
  border: 1px solid var(--line); border-radius: 0.7rem;
  background: var(--white); overflow: hidden;
}
.ped__cardhead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.7rem; padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--line);
}
.ped__cardhead h2 {
  margin: 0; font-family: var(--font-body);
  font-size: 0.92rem; font-weight: 700; color: var(--ink); letter-spacing: 0;
}
.ped__count { font-weight: 500; color: var(--ink-soft); }

/* Faixa de ação sobre os itens. O tom separa "o que fazer" de "o que
   tem", sem gastar outro cartão. */
.ped__strip {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.7rem; flex-wrap: wrap;
  padding: 0.6rem 1.1rem;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  font-size: 0.8rem; font-weight: 600; color: var(--ink-soft);
}
.btn--xs { padding: 0.35rem 0.8rem; font-size: 0.76rem; border-radius: 0.4rem; }

/* ── Itens ──────────────────────────────────── */
.ped__items { padding: 0 1.1rem; }
.ped__item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto 2.6rem 5rem;
  gap: 0.75rem; align-items: center;
  padding: 0.75rem 0; border-bottom: 1px solid var(--cream-deep);
}
.ped__item:last-child { border-bottom: 0; }

.ped__thumb {
  width: 44px; height: 44px; border-radius: 0.45rem; overflow: hidden;
  background: var(--cream); border: 1px solid var(--line);
}
.ped__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ped__itembody { min-width: 0; }
.ped__itemname {
  margin: 0; font-size: 0.85rem; font-weight: 600; color: var(--ink);
  line-height: 1.3;
}
.ped__itemsku {
  margin: 0.15rem 0 0; font-size: 0.72rem; color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.ped__tag {
  display: inline-block; margin-top: 0.28rem;
  padding: 0.1rem 0.45rem; border-radius: 0.3rem;
  background: var(--brand-tint); color: var(--brand-deep);
  font-size: 0.68rem; font-weight: 600;
}
.ped__itemprice {
  font-size: 0.8rem; color: var(--ink); text-align: right;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ped__itemprice s { color: var(--ink-soft); margin-right: 0.3rem; }
.ped__itemqty {
  font-size: 0.8rem; color: var(--ink-soft); text-align: right; white-space: nowrap;
}
.ped__itemtotal {
  font-size: 0.85rem; font-weight: 700; color: var(--ink); text-align: right;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ped__tracknote {
  margin: 0; padding: 0 1.1rem 0.9rem;
  font-size: 0.76rem; color: #8a5a00;
}
.ped__tracknote:empty { padding: 0; }

/* ── Totais ────────────────────────────────── */
.ped__totals {
  display: grid; grid-template-columns: 1fr auto;
  gap: 0.4rem 1rem; margin: 0; padding: 0.9rem 1.1rem 1.1rem;
  font-size: 0.83rem;
}
.ped__totals dt { color: var(--ink-soft); }
.ped__totals dd {
  margin: 0; text-align: right; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.ped__totals .is-total {
  padding-top: 0.55rem; margin-top: 0.15rem;
  border-top: 1px solid var(--line);
  font-weight: 700; color: var(--ink); font-size: 0.95rem;
}
.ped__totals .is-soft { color: var(--ink-soft); font-size: 0.78rem; }

/* ── Informações do pedido ──────────────────────── */
.ped__info { padding: 0.9rem 1.1rem 1.1rem; }
.ped__infoh {
  margin: 0 0 0.35rem; font-size: 0.78rem; font-weight: 700; color: var(--ink);
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--line);
}
.ped__infobody { margin: 0 0 1.05rem; }
.ped__infobody:last-child { margin-bottom: 0; }
.ped__infobody p {
  margin: 0 0 0.12rem; font-size: 0.8rem; line-height: 1.45; color: var(--ink-soft);
}
.ped__strong { color: var(--ink) !important; font-weight: 600; }
.ped__soft { color: var(--ink-soft); font-size: 0.74rem !important; }
.ped__alerta { color: #8a5a00 !important; font-weight: 600; }
.ped__code {
  font-family: Consolas, Menlo, monospace; font-size: 0.78rem !important;
  color: var(--ink) !important; letter-spacing: 0.02em;
}
.ped__link {
  display: inline-block; font-size: 0.8rem; color: var(--brand);
  text-decoration: none; word-break: break-all;
}
.ped__link:hover { text-decoration: underline; }

/* ── Alterar situação ─────────────────────────── */
.ped__field { display: block; padding: 0 1.1rem; margin-bottom: 0.7rem; }
.ped__field:first-of-type { margin-top: 0.9rem; }
.ped__field > span {
  display: block; margin-bottom: 0.22rem;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--ink-soft);
}
.ped__field select, .ped__field input {
  width: 100%; padding: 0.45rem 0.6rem; font: inherit; font-size: 0.83rem;
  border: 1px solid var(--line); border-radius: 0.45rem;
  background: var(--white); color: var(--ink);
}
.ped__save { margin: 0 1.1rem 1.1rem; width: calc(100% - 2.2rem); }

/* ── Atividade ──────────────────────────────── */
.ped__timeline { list-style: none; margin: 0; padding: 1rem 1.1rem 1.1rem 1.9rem; }
.ped__step {
  position: relative; padding: 0 0 0.85rem 0.85rem;
  border-left: 2px solid var(--line);
}
.ped__step:last-child { border-left-color: transparent; padding-bottom: 0; }
.ped__step::before {
  content: ""; position: absolute; left: -0.36rem; top: 0.28rem;
  width: 0.58rem; height: 0.58rem; border-radius: 50%; background: var(--line);
}
.ped__step--ok::before   { background: #146c4e; }
.ped__step--work::before { background: #1b4f8a; }
.ped__step--ship::before { background: #4b2f8f; }
.ped__step--done::before { background: var(--brand); }
.ped__step--wait::before { background: #d8a11a; }
.ped__step--off::before  { background: #9b9b9b; }
.ped__step-t { margin: 0; font-size: 0.82rem; font-weight: 600; color: var(--ink); }
.ped__step-q { margin: 0.1rem 0 0; font-size: 0.72rem; color: var(--ink-soft); }
.ped__step-n { margin: 0.2rem 0 0; font-size: 0.76rem; color: var(--ink-soft); }

/* CONSULTA DE CONTAINER, e não de mídia.

   @media mede a JANELA. Mas a área útil do painel encolhe quando a
   barra lateral está aberta, e a janela não sabe disso: numa tela de
   1366px com a barra aberta sobram ~1100px de conteúdo, e a grade
   continuava em duas colunas porque a JANELA passava dos 62rem.

   @container mede o espaço que o elemento realmente tem. */
@container painel (max-width: 60rem) {
  .ped { grid-template-columns: 1fr; }
  /* No estreito, o que se FAZ com o pedido vem antes da conferência
     dos itens: é a razão de ter aberto a tela. */
  .ped__side { order: -1; }
}

@container painel (max-width: 34rem) {
  .ped__item {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    grid-template-areas: "f n t" "f p q";
    row-gap: 0.3rem;
  }
  .ped__thumb { grid-area: f; }
  .ped__itembody { grid-area: n; }
  .ped__itemprice { grid-area: p; text-align: left; }
  .ped__itemqty { grid-area: q; }
  .ped__itemtotal { grid-area: t; }
}

/* Navegador sem suporte a container query cai aqui: melhor uma coluna
   sempre, em tela média, do que duas colunas se sobrepondo. */
@supports not (container-type: inline-size) {
  @media (max-width: 78rem) {
    .ped { grid-template-columns: 1fr; }
    .ped__side { order: -1; }
  }
}

/* ── Itens do pedido manual ──────────────────────────────── */
.venitems { margin-top: 0.8rem; display: grid; gap: 0.4rem; }
.venitem {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 6rem 4.5rem 5.5rem 2rem;
  align-items: center; gap: 0.5rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--line); border-radius: 0.6rem;
  background: var(--white);
}
.venitem__name {
  font-size: 0.85rem; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.venitem__price, .venitem__qty {
  padding: 0.3rem 0.45rem; font-size: 0.82rem;
  border: 1px solid var(--line); border-radius: 0.4rem;
  text-align: right; font-variant-numeric: tabular-nums;
  min-width: 0;
}
.venitem__total {
  font-size: 0.85rem; font-weight: 600; text-align: right;
  font-variant-numeric: tabular-nums;
}
.venitem__del {
  border: 0; background: none; cursor: pointer;
  font-size: 1.1rem; line-height: 1; color: var(--ink-soft);
  padding: 0.2rem;
}
.venitem__del:hover { color: #b3261e; }

@media (max-width: 40rem) {
  .venitem {
    grid-template-columns: minmax(0, 1fr) 4.5rem 2rem;
    grid-template-areas: "n n x" "p q t";
    gap: 0.4rem;
  }
  .venitem__name  { grid-area: n; white-space: normal; }
  .venitem__del   { grid-area: x; }
  .venitem__price { grid-area: p; }
  .venitem__qty   { grid-area: q; }
  .venitem__total { grid-area: t; }
}

/* ── Lista suspensa de produtos (pedido manual) ───────────────
   O catalogo tem dezenas de itens: aberto, ele empurrava o resto do
   formulario para fora da tela. Fechado, o mesmo campo abre a lista e
   filtra o que ela mostra. */
.combo { position: relative; max-width: 30rem; }

.combo__input {
  width: 100%;
  padding: 0.6rem 2.4rem 0.6rem 0.85rem;
  border: 1px solid var(--line); border-radius: 0.6rem;
  font: inherit; font-size: 0.9rem; color: var(--ink);
  background: var(--white);
}
.combo__input:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-tint);
}

.combo__caret {
  position: absolute; top: 0; right: 0; height: 100%;
  width: 2.3rem; display: grid; place-items: center;
  border: 0; background: none; cursor: pointer; color: var(--ink-soft);
}
.combo__caret svg { width: 1.05rem; height: 1.05rem; }
.combo__input[aria-expanded="true"] + .combo__caret { transform: rotate(180deg); }

.combo__list {
  position: absolute; top: calc(100% + 0.3rem); left: 0; right: 0;
  z-index: 20;
  max-height: 17rem;
  box-shadow: 0 14px 34px -14px rgba(19, 46, 45, 0.35);
}
.combo__list .picker__item.is-active { background: var(--cream-deep); }

/* ── Campo com unidade (desconto em USD ou %) ─────────────────
   Um só número, duas leituras. Trocar a unidade NÃO converte o que
   está digitado — 10 dólares não vira 10 por cento sozinho —, então
   a nota embaixo do campo sempre diz quanto deu em dinheiro. */
.moneyin { display: flex; align-items: stretch; gap: 0.4rem; }
.moneyin input { flex: 1; min-width: 0; }

.moneyin__unit {
  display: flex; flex: none;
  border: 1px solid var(--line); border-radius: 0.5rem;
  overflow: hidden; background: var(--cream);
}
.moneyin__unit button {
  border: 0; background: none; cursor: pointer;
  padding: 0 0.6rem; font: inherit; font-size: 0.78rem; font-weight: 600;
  color: var(--ink-soft);
}
.moneyin__unit button + button { border-left: 1px solid var(--line); }
.moneyin__unit button.is-on { background: var(--brand); color: var(--white); }

/* ── Nota sob um campo ───────────────────────────────────────
   Onde o cálculo se explica: de quanto foi o frete e por qual peso,
   quanto o percentual abateu. Silenciosa por padrão. */
.adm-form__note {
  margin: 0.35rem 0 0;
  font-size: 0.76rem; line-height: 1.45; color: var(--ink-soft);
  min-height: 1.1rem;
}
.adm-form__note.is-error { color: #8a5a00; }
.adm-form__note:empty { min-height: 0; }

.linkbtn {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; font-size: inherit; font-weight: 600;
  color: var(--brand); text-decoration: underline;
}
.linkbtn:hover { color: var(--brand-deep); }

/* ══ RELATÓRIOS ═════════════════════════════════════════════ */

/* ── Barra de filtros ────────────────────────────────────────
   Um filtro só manda em tudo que vem abaixo. Fica grudado no topo
   porque a tela é longa e ninguém deve ter de rolar de volta para
   lembrar de que período está olhando. */
.relbar {
  position: sticky; top: 0; z-index: 4;
  background: var(--cream);
  padding: 0.9rem 0 1rem;
  margin: 0 0 1.2rem;
  border-bottom: 1px solid var(--line);
  display: grid; gap: 0.7rem;
}

.relbar__presets { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.relbar__presets button {
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--white); cursor: pointer;
  padding: 0.35rem 0.85rem;
  font: inherit; font-size: 0.8rem; font-weight: 600; color: var(--ink-soft);
}
.relbar__presets button:hover { border-color: var(--brand-soft); color: var(--ink); }
.relbar__presets button.is-on {
  background: var(--brand); border-color: var(--brand); color: var(--white);
}

.relbar__campos {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem;
}
.relbar__campo { display: grid; gap: 0.2rem; }
.relbar__campo > span {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-soft);
}
.relbar__campo input, .relbar__campo select {
  padding: 0.4rem 0.55rem; font: inherit; font-size: 0.82rem;
  border: 1px solid var(--line); border-radius: 0.5rem;
  background: var(--white); color: var(--ink);
}

/* ── Cartão ──────────────────────────────────────────────── */
.relcard {
  position: relative;
  padding: 1.1rem 1.2rem 1.3rem;
  border: 1px solid var(--line); border-radius: 0.9rem;
  background: var(--white);
  margin-bottom: 1.1rem;
}
.relcard__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 0.8rem; margin-bottom: 0.9rem; flex-wrap: wrap;
}
.relcard__head h2 {
  margin: 0; font-family: var(--font-display);
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft);
}
.relcard__hint { margin: 0; font-size: 0.76rem; color: var(--ink-soft); }
.relcard__hint.is-error { color: #8a5a00; }

.relgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1.1rem;
  margin-bottom: 1.1rem;
}
.relgrid .relcard { margin: 0; }

/* ── Gráfico de barras ───────────────────────────────────── */
.graf { position: relative; }
.graf__teto {
  font-size: 0.72rem; color: var(--ink-soft);
  border-bottom: 1px dashed var(--line);
  padding-bottom: 0.2rem; margin-bottom: 0.3rem;
  font-variant-numeric: tabular-nums;
}
.graf__barras {
  display: flex; align-items: flex-end; gap: 2px;
  height: 11rem; overflow-x: auto; padding-bottom: 0.2rem;
}
.graf__col {
  flex: 1 0 auto; min-width: 0.55rem;
  display: flex; flex-direction: column; justify-content: flex-end;
  align-items: center; height: 100%; cursor: default;
}
.graf__barra {
  width: 100%; max-width: 2.4rem;
  background: linear-gradient(180deg, var(--brand-bright), var(--brand));
  border-radius: 3px 3px 0 0;
  transition: filter 0.15s;
}
.graf__barra.is-zero { background: var(--line); }
.graf__col:hover .graf__barra, .graf__col:focus .graf__barra { filter: brightness(1.15); }
.graf__col:focus { outline: none; }
.graf__col:focus .graf__barra { box-shadow: 0 0 0 2px var(--brand-tint); }
.graf__rot {
  margin-top: 0.3rem; font-size: 0.62rem; color: var(--ink-soft);
  white-space: nowrap; overflow: hidden; max-width: 100%;
}

/* ── Quadros de ranking ──────────────────────────────────── */
.rank { display: grid; gap: 0.55rem; }
.rank__l {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.2rem 0.6rem; align-items: baseline;
}
.rank__n {
  font-size: 0.84rem; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.rank__v {
  font-size: 0.8rem; font-weight: 600; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.rank__bar {
  grid-column: 1 / -1; height: 4px; border-radius: 999px;
  background: var(--cream-deep); overflow: hidden;
}
.rank__bar i { display: block; height: 100%; background: var(--brand); }
.rank__pos { color: var(--ink-soft); width: 2rem; }

/* ── Mapa-múndi ──────────────────────────────────────────── */
.mapa { position: relative; }
.mapa__svg { width: 100%; height: auto; display: block; }

/* O mapa vive sobre um fundo proprio, e nao sobre o branco do
   cartao: sem esse contraste o desenho inteiro sumia. Pais sem venda
   fica num verde-acinzentado visivel, mas sem competir com quem
   vendeu; o contorno branco separa vizinho de vizinho. */
.mapa {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 0.7rem;
  padding: 0.6rem;
  overflow: hidden;   /* o rabicho da Chukotka passa da borda direita */
}
.mapa__paises path {
  fill: #b9d3ce; stroke: var(--white); stroke-width: 0.7;
  transition: fill 0.15s;
}
.mapa__paises path.tem-venda { cursor: pointer; }
.mapa__paises path:hover,
.mapa__paises path.is-alvo {
  stroke: var(--ink); stroke-width: 1.2;
  /* O pais realcado sobe: com stroke mais grosso, o vizinho desenhado
     depois no HTML comia metade da borda. */
  paint-order: stroke fill;
}
.mapa__paises path.is-alvo { fill: var(--brand-bright); }

.mapa__tip {
  position: absolute; z-index: 6; pointer-events: none;
  display: grid; gap: 0.1rem;
  padding: 0.45rem 0.7rem; border-radius: 0.5rem;
  background: var(--ink); color: var(--white);
  font-size: 0.78rem; line-height: 1.35;
  box-shadow: 0 8px 22px -8px rgba(0, 0, 0, 0.5);
  max-width: 15rem;
}
.mapa__tip strong { font-size: 0.82rem; }

.mapa__escala {
  display: flex; align-items: center; gap: 0.25rem;
  margin-top: 0.7rem; flex-wrap: wrap;
}
.mapa__escala i {
  width: 1.6rem; height: 0.6rem; border-radius: 2px; display: block;
}
.mapa__escala-t { font-size: 0.7rem; color: var(--ink-soft); }

/* ── Ranking de países ───────────────────────────────────── */
.paiscel { display: flex; align-items: center; gap: 0.55rem; }
.flag {
  flex: none; width: 24px; height: 18px; border-radius: 2px;
  overflow: hidden; display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px rgba(19, 46, 45, 0.12);
}
.flag img { display: block; width: 24px; height: 18px; object-fit: cover; max-width: none; }
/* Sem a imagem, o código do país no lugar — a linha continua legível. */
.flag--texto {
  background: var(--cream-deep); color: var(--ink-soft);
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.02em;
}

.fatia { min-width: 6rem; }
.fatia__bar {
  height: 4px; border-radius: 999px; background: var(--cream-deep);
  overflow: hidden; margin-top: 0.25rem;
}
.fatia__bar i { display: block; height: 100%; background: var(--brand); }

@container painel (max-width: 48rem) {
  .relbar { position: static; }
  .relbar__campos { display: grid; grid-template-columns: 1fr 1fr; }
  .relbar__campos .btn { grid-column: 1 / -1; }
}

/* ══ PÁGINA DE OBRIGADO ═════════════════════════════════════ */
.thanks { padding: calc(var(--nav-h, 5rem) + 3rem) 0 5rem; }
.thanks__box {
  max-width: 34rem; margin: 0 auto;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 2.2rem 2rem 2rem;
  text-align: center;
}
.thanks__wait { color: var(--ink-soft); margin: 0; }
.thanks__mark {
  width: 3rem; height: 3rem; margin: 0 auto 1rem;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--brand-tint); color: var(--brand-deep);
  font-size: 1.5rem; font-weight: 700;
}
.thanks__box .section-title { margin: 0 0 0.5rem; }
.thanks__lead { color: var(--ink-soft); margin: 0 0 1.6rem; }

.thanks__meta {
  display: grid; grid-template-columns: auto 1fr;
  gap: 0.3rem 1rem; text-align: left;
  margin: 0 0 1.4rem; padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--line); font-size: 0.9rem;
}
.thanks__meta dt { color: var(--ink-soft); }
.thanks__meta dd { margin: 0; font-weight: 600; }

/* A cor acompanha a situação, mas o texto diz a mesma coisa: quem não
   distingue as cores continua sabendo se o pagamento saiu. */
.thanks__st { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px; }
.thanks__st--ok   { background: var(--brand-tint); color: var(--brand-deep); }
.thanks__st--wait { background: #fdf3dc; color: #8a5a00; }

.thanks__items { list-style: none; margin: 0 0 1.2rem; padding: 0; text-align: left; }
.thanks__items li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.45rem 0; border-bottom: 1px solid var(--cream-deep);
  font-size: 0.9rem;
}
.thanks__items li:last-child { border-bottom: 0; }
.thanks__iname { min-width: 0; }
.thanks__ival { font-variant-numeric: tabular-nums; white-space: nowrap; }

.thanks__totals {
  display: grid; grid-template-columns: 1fr auto; gap: 0.3rem 1rem;
  text-align: left; margin: 0 0 1.5rem; font-size: 0.9rem;
}
.thanks__totals dt { color: var(--ink-soft); }
.thanks__totals dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.thanks__totals .is-total {
  padding-top: 0.5rem; border-top: 1px solid var(--line);
  font-weight: 700; font-size: 1.05rem; color: var(--ink);
}

.thanks__note { font-size: 0.82rem; color: var(--ink-soft); margin: 0 0 1.5rem; }
.thanks__acts { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; }

/* ── Dois botões de pagamento no carrinho ─────────────────── */
.cart__pay { display: grid; gap: 0.5rem; }
.btn--paypal {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  background: #ffc439; color: #172b4d; border: 1px solid #e5a800;
}
.btn--paypal:hover:not(:disabled) { background: #f5b800; color: #172b4d; }
.btn--paypal:disabled, .cart__checkout:disabled { opacity: 0.5; cursor: not-allowed; }
.cart__payerr {
  margin: 0.6rem 0 0; font-size: 0.82rem; color: #b3261e;
}

/* ── Rastreamento ────────────────────────────────────────────
   O botão fica separado do "Salvar situação" porque é outra coisa:
   aquele muda um campo, este despacha o pedido e avisa o cliente. */
.ped__track {
  width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  margin-top: 0.6rem;
}
.ped__track svg { flex: none; }

/* Caixa de marcar com explicação: a linha de baixo diz o que a
   escolha faz, para ninguém desmarcar sem saber o que perde. */
.trk__check {
  display: flex; align-items: flex-start; gap: 0.6rem;
  padding: 0.7rem 0.85rem; margin-bottom: 0.5rem;
  border: 1px solid var(--line); border-radius: 0.6rem;
  background: var(--white); cursor: pointer;
}
.trk__check:hover { border-color: var(--brand-soft); }
.trk__check input { margin-top: 0.15rem; flex: none; }
.trk__check span { display: block; font-size: 0.85rem; line-height: 1.35; }
.trk__check strong { display: block; font-weight: 600; color: var(--ink); }
.trk__check em {
  display: block; margin-top: 0.15rem;
  font-style: normal; font-size: 0.78rem; color: var(--ink-soft);
}
.trk__check input:disabled + span strong { color: var(--ink-soft); }

#trk-url { font-family: Consolas, Menlo, monospace; font-size: 0.8rem; }
.adm-form__note code {
  background: var(--cream-deep); padding: 0.05rem 0.3rem;
  border-radius: 0.25rem; font-size: 0.9em;
}

/* ── Ficha do cliente ────────────────────────────────────────
   Rótulo e valor em duas colunas: são vinte campos e a maioria cabe
   numa linha. Um cartão por campo gastaria três telas de rolagem. */
.ficha { padding: 1.2rem 1.6rem 1.6rem; }
.ficha__h {
  margin: 1.3rem 0 0.5rem; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--brand);
}
.ficha__h:first-child { margin-top: 0; }
.ficha__dl {
  display: grid; grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 0.3rem 0.9rem; margin: 0; font-size: 0.84rem;
}
.ficha__dl dt { color: var(--ink-soft); }
.ficha__dl dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
/* Par sem rótulo — lista de pedidos, observação — ocupa a linha toda. */
.ficha__dl dt:empty { display: none; }
.ficha__dl dt:empty + dd { grid-column: 1 / -1; }

@media (max-width: 34rem) {
  .ficha__dl { grid-template-columns: 1fr; gap: 0 0; }
  .ficha__dl dt { margin-top: 0.6rem; font-size: 0.72rem; }
}

/* A coluna de origem carrega texto da Wix, às vezes longo
   ("Formulário de chat", "Membros do site"). Não pode empurrar a
   tabela para fora. */
.cell__origem {
  max-width: 11rem; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-size: 0.8rem; color: var(--ink-soft);
}

/* ── Checkouts abandonados ───────────────────────────────────
   A nota explica o que a tela NÃO vê. O nome "carrinho abandonado"
   promete mais do que qualquer loja consegue entregar sem rastrear o
   visitante, e é melhor dizer isso do que deixar alguém achando que a
   lista está incompleta por defeito. */
.cart__nota {
  margin: 0 0 1.2rem;
  padding: 0.75rem 1rem;
  background: var(--cream);
  border-left: 3px solid var(--brand-soft);
  border-radius: 0 0.4rem 0.4rem 0;
  font-size: 0.83rem; line-height: 1.5; color: var(--ink-soft);
}
.cart__nota strong { color: var(--ink); font-weight: 600; }

.cell--acts .btn--xs + .btn--xs { margin-left: 0.35rem; }
.cell--acts .btn--xs:disabled { opacity: 0.45; cursor: not-allowed; }

/* ── Ações da ficha: excluir de um lado, salvar do outro ─────
   Distância entre o botão destrutivo e o que se aperta sempre. Lado a
   lado, o dedo erra. */
.adm-form__actions--split { display: flex; align-items: center; gap: 0.6rem; }
.adm-form__spacer { flex: 1; }

.btn--perigo { color: #b3261e; border-color: #f0d3d0; }
.btn--perigo:hover:not(:disabled) { background: #fdeceb; border-color: #e8b4af; color: #8f1d17; }

/* No estreito, empilhar — mas o excluir vai para o fim, longe do
   polegar que acabou de tocar em Salvar. */
@media (max-width: 34rem) {
  .adm-form__actions--split { flex-wrap: wrap; }
  .adm-form__spacer { display: none; }
  .adm-form__actions--split .btn { flex: 1 1 100%; }
  .btn--perigo { order: 9; margin-top: 0.4rem; }
}

/* ── Coluna de seleção ───────────────────────────────────────
   Estreita e fixa: a caixa de marcar não cresce, então dar-lhe espaço
   proporcional só rouba largura do nome. */
.col--check { width: 2.4rem; padding-right: 0 !important; }
.col--check input { cursor: pointer; margin: 0; }
tr.is-marcada { background: var(--brand-tint); }
tr.is-marcada:hover { background: var(--brand-tint); }

/* ── Cabeçalho ordenável ─────────────────────────────────────
   A seta aparece só na coluna ativa. Uma seta em todas ensina que dá
   para clicar, e depois não diz mais nada sobre qual está valendo. */
.adm__table th .ord {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; color: inherit; letter-spacing: inherit;
  text-transform: inherit; display: inline-flex; align-items: center; gap: 0.3rem;
}
.adm__table th .ord:hover { color: var(--brand); }
.adm__table th .ord::after {
  content: ""; width: 0; height: 0; opacity: 0;
  border-left: 3.5px solid transparent; border-right: 3.5px solid transparent;
  border-bottom: 4.5px solid currentColor;
  transition: transform 0.15s;
}
.adm__table th .ord--on { color: var(--brand); }
.adm__table th .ord--on::after { opacity: 1; }
.adm__table th .ord--desc::after { transform: rotate(180deg); }
.adm__table th .ord:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ── Barra de ações em lote ──────────────────────────────────
   Aparece só com algo marcado. Fixa e vazia o tempo todo vira ruído;
   assim ela é a própria confirmação de que a seleção existe. */
.lote {
  display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
  padding: 0.7rem 1rem; margin-bottom: 1rem;
  background: var(--brand-tint); border: 1px solid var(--brand-soft);
  border-radius: 0.6rem;
  font-size: 0.86rem; font-weight: 600; color: var(--brand-deep);
}
.lote__spacer { flex: 1; }

/* ── E-mail e telefone, colunas próprias ─────────────────────
   E-mail longo não pode empurrar a tabela; ele encurta com reticências
   e o valor inteiro fica no atributo title e na ficha. O telefone não
   quebra em duas linhas: número partido no meio não se lê. */
.cell__email {
  display: inline-block; max-width: 15rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  vertical-align: bottom;
}
.cell__fone { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ══ CATÁLOGO: NENHUMA COLUNA ESPREMIDA ═════════════════════
   São doze colunas. Sem largura mínima, o navegador espreme a única
   que quebra linha — o nome — até uma palavra por linha, e empurra as
   ações para fora da vista. Cada coluna passa a declarar o espaço de
   que precisa, e o que sobrar vai para o nome. */

/* table-layout FIXO, e não automático.

   No automático o navegador dimensiona a coluna pela largura NATURAL
   do conteúdo — e a largura natural de um <input> é cerca de vinte
   caracteres. Bastava clicar em Volumetria para a coluna inchar e
   empurrar todas as outras, porque a largura declarada, no automático,
   é só uma sugestão.

   No fixo ela é respeitada. As colunas ficam com o que se pediu, o
   campo de edição cabe dentro delas, e o nome — a única sem largura
   declarada — fica com todo o resto. */
.view[data-view="catalogo"] .adm__table {
  table-layout: fixed;
  /* AS LARGURAS SAEM DA MEDIDA DO CONTEUDO, nao de estimativa. As duas
     que vinham cortadas estavam curtas por pouco:

       acoes  "Editar Clonar Excluir" a 0,73rem   -> 10,7rem (tinha 8,5)
       cat    chip PROFESSIONAL, 12 letras altas  ->  8,0rem (tinha 7)

     No table-layout fixo o que nao cabe TRANSBORDA a celula, e o
     cartao apara o excesso. Nao ha aviso: some texto e pronto. Por
     isso cada uma leva folga sobre a medida.

     .c--nome nao declara largura — absorve a sobra. O piso dela vem do
     min-width da tabela, calculado abaixo em cada faixa. */
  min-width: 77.5rem;   /* 57,4 das oito + 20 de piso para o nome */
}

.c--sku     { width: 5.5rem;  white-space: nowrap; }
.c--img     { width: 3.4rem; }
/* .c--nome NAO declara largura: e' ela que absorve a sobra. */
.c--linha   { width: 7.5rem; }
.c--cat     { width: 8.5rem; }
.c--preco   { width: 9.5rem; }
.c--estoque { width: 6.5rem; }
.c--visivel { width: 5rem; }
.c--acoes   { width: 11.5rem; }

/* Conteúdo que não cabe transborda e some. Estes três aparam de
   propósito — meia palavra de linha ainda se entende. */
.c--linha, .c--cat, .c--estoque { overflow: hidden; }
.c--sku code, .c--preco { white-space: nowrap; }

/* O campo de edição vive dentro da largura da coluna, com a borda
   contada junto — sem box-sizing ele estoura pela grossura da borda. */
.adm__table .cell__input {
  box-sizing: border-box;
  width: 100%; min-width: 0; max-width: 100%;
}

/* AS AÇÕES FICAM GRUDADAS À DIREITA, para o caso de a tela ser mais
   estreita do que qualquer faixa prevista aqui: rolando, Editar,
   Clonar e Excluir acompanham em vez de sair de vista. */
.c--acoes {
  white-space: nowrap; text-align: right;
  position: sticky; right: 0;
  background: var(--white);
  box-shadow: -8px 0 8px -8px rgba(19, 46, 45, 0.18);
}
thead .c--acoes { background: var(--white); z-index: 3; }
.adm__table tr:hover .c--acoes { background: var(--cream); }

/* O nome respira em vez de virar uma coluna de palavras soltas. */
.c--nome .adm__name {
  display: block; line-height: 1.35;
  overflow-wrap: anywhere; hyphens: auto;
}
/* O aviso veio da coluna de peso, que saiu; é um selo, não uma linha
   de texto, e por isso precisa de caixa própria e ar em cima. */
.c--nome .adm__nowe {
  display: inline-block;
  margin-top: 0.3rem;
}

/* Espaço horizontal é o que falta; o vertical sobra. Linhas mais
   justas põem mais produto na mesma tela. */
.view[data-view="catalogo"] .adm__table td { padding: 0.6rem 0.7rem; }
.view[data-view="catalogo"] .adm__table th { padding: 0.7rem 0.7rem; }

/* A cada coluna que some, o piso do nome desce junto — senão o
   min-width sobraria maior que a área e a tabela rolaria à toa.

   Em 68rem de área útil (1366px com a barra lateral aberta): Linha
   some, as sete restantes somam 49,9rem e o nome fica com 18,1rem.
   Sem rolagem e sem nada aparado. */
@container painel (max-width: 76rem) {
  .c--linha { display: none; }
  .view[data-view="catalogo"] .adm__table { min-width: 67.9rem; }
}
@container painel (max-width: 66rem) {
  .c--cat { display: none; }
  .view[data-view="catalogo"] .adm__table { min-width: 57.4rem; }
}

/* Ações compactas: as três palavras cabem em 11,5rem com folga. */
.view[data-view="catalogo"] .c--acoes .adm__link {
  font-size: 0.73rem; padding: 0.2rem 0.22rem;
}

/* Preço e desconto dividem a célula; sem isto os dois campos pedem
   mais largura do que a coluna tem e transbordam. */
.c--preco .cell__pair { grid-template-columns: 1fr 1fr; gap: 0.25rem; padding: 0.2rem; }
.c--preco .cell__pair input { box-sizing: border-box; width: 100%; min-width: 0; }

/* ═══ Restrição de venda por país ═════════════════════════════
   A linha de cima adiciona; a lista de baixo mostra o que já está
   restrito. Separadas de propósito: misturar o formulário com o
   resultado faz a pessoa perder de vista o que já cadastrou. */
.paises {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) auto;
  gap: 0.6rem;
  align-items: end;
}
.paises label { display: grid; gap: 0.25rem; min-width: 0; }
.paises label > span {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--adm-ink-soft, #5b6b6a);
}
.paises label > span em { font-weight: 400; text-transform: none; letter-spacing: 0; }
.paises input { width: 100%; box-sizing: border-box; min-width: 0; }
.paises .infos__add { margin: 0; white-space: nowrap; }

.paises__lista { list-style: none; margin: 0.9rem 0 0; padding: 0; display: grid; gap: 0.35rem; }
.paises__vazio { font-size: 0.8rem; color: var(--adm-ink-soft, #5b6b6a); font-style: italic; }
.paises__item {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
  gap: 0.7rem;
  align-items: center;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--adm-line, #e2e8e7);
  border-radius: 0.5rem;
  background: #fff;
}
.paises__nome { font-weight: 600; font-size: 0.85rem; }
/* O motivo pode ser longo e não pode empurrar o botão de remover para
   fora da linha; corta com reticências em vez de quebrar o item. */
.paises__motivotxt {
  font-size: 0.78rem;
  color: var(--adm-ink-soft, #5b6b6a);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.paises__x {
  background: none;
  border: 0;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 0.2rem;
  color: var(--adm-ink-soft, #5b6b6a);
  cursor: pointer;
}
.paises__x:hover { color: #b3261e; }

@media (max-width: 46rem) {
  .paises { grid-template-columns: 1fr; }
}

/* ═══ Painel · Pagamentos ═════════════════════════════════════ */
.pgto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 0.9rem;
  margin-bottom: 1.6rem;
}
.pgto__card {
  border: 1px solid var(--adm-line, #e2e8e7);
  border-radius: 0.9rem;
  background: #fff;
  padding: 1.1rem 1.2rem;
  display: grid;
  gap: 0.55rem;
  align-content: start;
}
.pgto__top { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.pgto__top h2 { margin: 0; font-size: 1.05rem; }

.pgto__pill {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
}
/* Verde é "está oferecido", não "está tudo bem" — um provedor pode
   estar oferecido e sem nenhum aviso, que é o estado a vigiar. */
.pgto__pill.is-on  { background: rgba(0, 149, 137, 0.12); color: var(--brand-deep, #15625c); }
.pgto__pill.is-off { background: #f0f2f2; color: #5b6b6a; }

.pgto__papel { margin: 0; font-size: 0.8rem; color: var(--adm-ink-soft, #5b6b6a); }

.pgto__dl {
  margin: 0.2rem 0 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.3rem 0.9rem;
  font-size: 0.83rem;
}
.pgto__dl dt { color: var(--adm-ink-soft, #5b6b6a); }
.pgto__dl dd { margin: 0; font-weight: 600; text-align: right; }

.pgto__link { justify-self: start; margin-top: 0.4rem; font-size: 0.72rem; padding: 0.5rem 1rem; }

.pgto__nota {
  border-left: 3px solid var(--brand-soft, #9edcd4);
  padding: 0.2rem 0 0.2rem 1rem;
  max-width: 46rem;
}
.pgto__nota h2 { font-size: 0.95rem; margin: 0 0 0.4rem; }
.pgto__nota p { margin: 0 0 0.6rem; font-size: 0.86rem; color: var(--adm-ink-soft, #5b6b6a); line-height: 1.55; }

/* ═══ Escolher países para a tabela de taxas ══════════════════ */
.paissel {
  max-height: 20rem;
  overflow-y: auto;
  border: 1px solid var(--adm-line, #e2e8e7);
  border-radius: 0.6rem;
  margin: 0.6rem 0 0.9rem;
}
.paissel__item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.8rem;
  border-bottom: 1px solid var(--adm-line, #eef2f1);
  cursor: pointer;
  font-size: 0.87rem;
}
.paissel__item:last-child { border-bottom: 0; }
.paissel__item:hover { background: #f7fbfa; }
.paissel__item.is-on { background: rgba(0, 149, 137, 0.07); }
/* TODOS cola no topo: com 217 linhas, rolar de volta para marcar
   todos seria uma viagem de ida e volta a cada busca. */
.paissel__item--todos {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #fff;
  border-bottom: 1px solid var(--adm-line, #e2e8e7);
}
.paissel__item--todos:hover { background: #f7fbfa; }
.paissel__code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  color: var(--adm-ink-soft, #5b6b6a);
  background: #f0f4f3;
  border-radius: 0.3rem;
  padding: 0.1rem 0.4rem;
}
.paissel__vazio { padding: 1rem 0.8rem; font-size: 0.85rem; color: var(--adm-ink-soft, #5b6b6a); }
.paissel__valores { margin-top: 0; }
/* O contador empurra os botões para a direita e fica visível na hora
   de confirmar: 217 países é um clique que convém enxergar antes. */
.paissel__conta { margin-right: auto; font-size: 0.83rem; color: var(--adm-ink-soft, #5b6b6a); }

/* ── Campos soltos dentro de um bloco de formulário ───────────
   Estas regras existiam só para .adm-form__field, e as telas mais
   novas (taxas, recibo) escrevem o campo direto: label > span +
   input. Sem isto o navegador desenha o campo cru — caixa cinza de
   1995 ao lado de campos arredondados na mesma tela.

   :not([class]) NÃO É ENFEITE. Dentro dos mesmos blocos moram labels
   com papel próprio — o alvo de arrastar imagem, a busca de países —
   e transformá-los em grade de campo os quebraria. Aqui só entra
   label sem classe nenhuma, mais o __wide, que existe justamente
   para ser um campo de largura inteira. */
.adm-form__block > label:not([class]),
.adm-form__block > label.adm-form__wide,
.adm-form__row > label:not([class]),
.adm-form__row > label.adm-form__wide { display: grid; gap: 0.35rem; align-content: start; }

.adm-form__block > label:not([class]) > span,
.adm-form__block > label.adm-form__wide > span,
.adm-form__row > label:not([class]) > span,
.adm-form__row > label.adm-form__wide > span {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-soft);
}
/* O "(opcional)", "(só você vê)": explica o campo sem virar título. */
.adm-form__block > label > span em,
.adm-form__row > label > span em {
  font-style: normal; text-transform: none; letter-spacing: 0;
  font-weight: 500; opacity: 0.75;
}
.adm-form__block > label:not([class]) > :is(input, select, textarea),
.adm-form__block > label.adm-form__wide > :is(input, select, textarea),
.adm-form__row > label:not([class]) > :is(input, select, textarea),
.adm-form__row > label.adm-form__wide > :is(input, select, textarea) {
  width: 100%; padding: 0.7rem 0.85rem;
  border: 1px solid var(--line); border-radius: 0.7rem;
  font: inherit; font-size: 0.88rem; color: var(--ink); background: var(--white);
}
.adm-form__block > label > textarea { resize: vertical; line-height: 1.5; }
.adm-form__block > label > :is(input, select, textarea):focus {
  outline: 2px solid var(--brand-soft); outline-offset: 1px;
}
.adm-form__block > label + label,
.adm-form__block > .adm-form__row,
.adm-form__block > .adm-form__hint + label { margin-top: 0.9rem; }
.adm-form__block > .adm-form__hint { margin: 0.15rem 0 0; }
.adm-form__wide { grid-column: 1 / -1; }

.adm-form__msg { font-size: 0.82rem; min-height: 1.2em; margin: 0; }
.adm-form__msg.is-error { color: #b3261e; }
.adm-form__msg.is-ok { color: var(--brand-deep); }

/* ══ RECIBO ═══════════════════════════════════════════════════
   Opções à esquerda, o documento à direita. As duas colunas rolam
   juntas até a prévia encostar no topo, e daí ela fica — mexer no
   rodapé é justamente quando o formulário está longe do começo, e
   uma prévia que sobe embora é uma prévia que não se olha. */
.rec {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 1.6rem;
  align-items: start;
}
.rec__form { padding: 0; gap: 1.2rem; }

.rec__previa { position: sticky; top: 0.5rem; display: grid; gap: 0.7rem; }
.rec__previa-topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.rec__previa-tit {
  font-family: var(--font-display); font-size: 0.95rem; font-weight: 700;
  color: var(--ink); margin: 0;
}
.rec__previa-sub { margin: 0.15rem 0 0; font-size: 0.72rem; color: var(--ink-soft); }
.rec__idioma select {
  padding: 0.45rem 0.7rem; border: 1px solid var(--line); border-radius: 0.6rem;
  font: inherit; font-size: 0.82rem; background: var(--white); color: var(--ink);
}

.rec__quadro {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--cream);
  /* Toma a altura que sobra da janela, e não uma medida fixa: o
     recibo tem quase mil pixels, e um quadro mais baixo cortaria
     justamente o rodapé — que é o campo que se está editando. Rodapé
     comprido ainda rola por dentro. */
  height: calc(100vh - 10.5rem);
  max-height: 56rem;
  min-height: 26rem;
}
.rec__quadro iframe { width: 100%; height: 100%; border: 0; display: block; background: var(--cream); }
/* "Montando…" fica por cima em vez de piscar a prévia para branco:
   trocar srcdoc a cada pausa já é uma repintura, e apagar antes
   dobraria o pisca. */
.rec__carregando {
  position: absolute; top: 0.5rem; right: 0.6rem; margin: 0;
  font-size: 0.7rem; color: var(--ink-soft);
  background: var(--white); border: 1px solid var(--line);
  border-radius: 999px; padding: 0.15rem 0.6rem;
}

.rec__check { display: flex; align-items: center; gap: 0.5rem; font-size: 0.87rem; color: var(--ink); cursor: pointer; }
.rec__check + .rec__check { margin-top: 0.5rem; }
.rec__check input { width: auto; }

/* Abaixo disto a prévia deixa de caber ao lado: 600px de recibo numa
   coluna de 400 é um recibo ilegível. Ela vai para baixo do
   formulário, inteira. */
@media (max-width: 1100px) {
  .rec { grid-template-columns: 1fr; }
  .rec__previa { position: static; }
  .rec__quadro { height: 44rem; }
}

/* ══ E-MAIL ═══════════════════════════════════════════════════ */
.emails__intro { margin: 0 0 1.2rem; max-width: 46rem; }
.emails__intro a { color: var(--brand-deep); }

.emails__grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: 1rem;
}
.emails__card {
  display: block;
  padding: 1.15rem 1.25rem 1.3rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  text-decoration: none;
  color: inherit;
}
.emails__card:hover { border-color: var(--brand); }
.emails__card h2 {
  display: flex; align-items: center; gap: 0.6rem;
  margin: 0 0 0.4rem;
  font-family: var(--font-display); font-size: 1rem; font-weight: 700;
  color: var(--ink);
}
.emails__card p { margin: 0; font-size: 0.83rem; line-height: 1.5; color: var(--ink-soft); }
.emails__meta {
  margin-top: 0.7rem !important;
  font-size: 0.74rem !important;
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
  padding-top: 0.6rem;
}
/* O remetente não é uma das mensagens: é o que todas assinam. A cor
   diz isso antes de a pessoa ler o texto do cartão. */
.emails__card--rem { background: var(--cream); }

.emails__tag {
  font-size: 0.63rem; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; padding: 0.15rem 0.5rem;
  border-radius: 999px; background: var(--cream-deep); color: var(--ink-soft);
}
.emails__tag.is-on { background: rgba(0, 149, 137, 0.13); color: var(--brand-deep); }
/* Desligado é estado legítimo, não erro: perde cor, não ganha vermelho. */
.emails__card.is-off h2, .emails__card.is-off p { opacity: 0.62; }

/* ── As abas de idioma ───────────────────────────────────────
   Um seletor só: o idioma que se edita é o que a prévia mostra.
   Dois seria a tela deixando escrever em alemão enquanto mostra o
   francês, e ninguém confere o que não está olhando. */
.msg__idiomas {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem;
  margin: 0.9rem 0 0.2rem;
}
.msg__idiomas-rot {
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-soft);
}
.msg__abas { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.msg__aba {
  font: inherit; font-size: 0.78rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--white); color: var(--ink-soft); cursor: pointer;
}
.msg__aba:hover { border-color: var(--brand); }
.msg__aba.is-on {
  background: var(--brand-deep); border-color: var(--brand-deep); color: #fff;
}
.msg__marcas { margin-top: 0.9rem !important; }
.msg__marcas span { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* Interruptor travado: o recibo não se desliga, e o cinza diz isso
   sem precisar do texto ao lado — que está lá mesmo assim. */
.rec__check input:disabled { cursor: not-allowed; }
.rec__check input:disabled + span { opacity: 0.55; }

/* ══ REPRESENTANTES ═══════════════════════════════════════════ */
.reps__intro { max-width: 46rem; margin: 0 0 1.2rem; line-height: 1.55; }
.reps__intro a { color: var(--brand-deep); }
/* País bloqueado por regulação: aparece na lista para se saber que
   existe, e não é marcável — o produto não pode chegar lá, com ou sem
   representante. */
.paissel__item.is-off { opacity: 0.5; cursor: not-allowed; }
.paissel__item.is-off:hover { background: transparent; }