@font-face {
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/dm-sans-latin.woff2") format("woff2");
}

/* Carrinho público: revisão longa em página, sem dialogs ou ações dependentes de JavaScript. */
.cart-summary {
    display: flex;
    min-height: 44px;
    margin: 18px 0;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.cart-count {
    display: inline-grid;
    min-width: 24px;
    min-height: 24px;
    margin-left: 6px;
    place-items: center;
    border-radius: 999px;
    color: var(--white);
    background: var(--ink);
}

.cart-summary .button.storefront-cart-link {
    position: relative;
    min-height: 24px;
    padding: 0 8px;
    gap: 4px;
    font-size: 11px;
}

.cart-summary .button.storefront-cart-link:hover {
    transform: none;
}

.storefront-cart-link::before {
    position: absolute;
    inset: -10px 0;
    content: "";
}

.storefront-cart-icon {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.storefront-cart-link .cart-count {
    min-width: 16px;
    min-height: 16px;
    margin-left: 0;
    font-size: 9px;
}

.cart-feedback {
    max-width: 34ch;
    font-size: 14px;
    font-weight: 700;
}

.storefront-topbar {
    position: sticky;
    z-index: 20;
    top: 0;
    display: flex;
    min-height: 32px;
    margin: 10px 0;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid rgba(19, 36, 58, 0.1);
    background: rgba(247, 242, 231, 0.93);
    backdrop-filter: blur(12px);
}

.storefront-topbar-name {
    display: block;
    overflow: hidden;
    font-size: 12px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.storefront-topbar .cart-summary {
    min-height: 24px;
    margin: 0;
    align-items: center;
    flex: 0 0 auto;
    flex-direction: row;
}

.storefront-quantity-control {
    display: inline-flex;
    overflow: visible;
    align-items: center;
    border: 2px solid var(--mustard);
    border-radius: 999px;
    background: var(--white);
}

.storefront-quantity-control form {
    display: flex;
    margin: 0;
}

.storefront-quantity-button {
    position: relative;
    display: grid;
    width: 46px;
    min-height: 20px;
    padding: 0;
    place-items: center;
    border-radius: 999px;
    background: transparent;
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
}

.storefront-add-button {
    width: auto;
    min-height: 20px;
    padding: 0 10px;
    grid-auto-flow: column;
    gap: 4px;
    white-space: nowrap;
}

.storefront-add-label {
    font-size: 13px;
    font-weight: 800;
}

.storefront-quantity-button::before {
    position: absolute;
    inset: -12px 0;
    content: "";
}

.storefront-quantity-button:hover:not(:disabled) {
    background: rgba(244, 184, 63, 0.2);
}

.storefront-quantity-button:disabled {
    cursor: not-allowed;
    opacity: 0.35;
}

.storefront-quantity-button svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.storefront-quantity-value {
    min-width: 30px;
    text-align: center;
    font-size: 15px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 20px;
}

.cart-page {
    padding-bottom: 64px;
}

.cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(280px, 0.8fr);
    align-items: start;
    gap: 28px;
}

.cart-items {
    display: grid;
    gap: 16px;
}

.cart-item {
    display: grid;
    padding: 16px;
    grid-template-columns: 112px minmax(0, 1fr) minmax(150px, auto);
    align-items: center;
    gap: 18px;
    border: 2px solid var(--ink);
    border-radius: 18px;
    background: var(--white);
}

.cart-item > img {
    width: 112px;
    height: 112px;
    border-radius: 12px;
    object-fit: cover;
}

.cart-item-copy > :first-child,
.cart-item-copy > :last-child {
    margin-block: 0;
}

.cart-item-actions {
    display: flex;
    justify-content: flex-end;
}

.cart-quantity-control {
    display: inline-flex;
    overflow: visible;
    align-items: center;
    border: 2px solid var(--mustard);
    border-radius: 999px;
    background: var(--white);
}

.cart-quantity-control form {
    display: flex;
    margin: 0;
}

.cart-quantity-button {
    position: relative;
    display: grid;
    width: 46px;
    min-height: 20px;
    padding: 0;
    place-items: center;
    border-radius: 999px;
    background: transparent;
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
}

.cart-quantity-button::before {
    position: absolute;
    inset: -12px 0;
    content: "";
}

.cart-quantity-button:hover:not(:disabled) {
    background: rgba(244, 184, 63, 0.2);
}

.cart-quantity-button:disabled {
    cursor: not-allowed;
    opacity: 0.35;
}

.cart-quantity-button svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.cart-quantity-value {
    min-width: 30px;
    text-align: center;
    font-size: 15px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 20px;
}

.cart-checkout {
    position: sticky;
    top: 20px;
}

.delivery-choice,
.payment-choice {
    gap: 12px;
}

.choice-row {
    display: flex;
    align-items: center;
    gap: 9px;
    font-weight: 700;
}

.choice-row input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--ink);
}

.delivery-address {
    display: none;
    gap: 14px;
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid var(--line);
}

.delivery-choice:has(#modalidade-entrega:checked) .delivery-address {
    display: grid;
}

.delivery-freight-location {
    display: none;
    margin: 0;
    text-align: center;
    font-size: 11px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.delivery-choice:has(#modalidade-entrega:checked) .delivery-freight-location {
    display: block;
}

.delivery-freeship-note {
    display: none;
    margin: 2px 0 0;
    text-align: center;
    font-size: 11px;
    line-height: 1.35;
}

.delivery-choice:has(#modalidade-entrega:checked) .delivery-freeship-note {
    display: block;
}

.delivery-freeship-note:empty,
.delivery-choice:has(#modalidade-entrega:checked) .delivery-freeship-note:empty {
    display: none;
}

.delivery-freeship-note strong {
    font-weight: 800;
}

.delivery-freeship-note--atingido {
    color: var(--green);
}

.delivery-freeship-note--faltando {
    color: var(--ink-soft);
}

.delivery-address .notice {
    margin-top: 2px;
}

.cart-empty-form {
    margin-top: 14px;
}

.cart-checkout .button,
.cart-empty-form .button {
    width: 100%;
}

.confirmed-items {
    display: grid;
    padding: 0;
    gap: 10px;
    list-style: none;
}

.confirmed-items li {
    display: grid;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
    gap: 3px;
}

@media (max-width: 879px) {
    .cart-summary {
        align-items: flex-end;
        flex-direction: column;
    }

    .cart-layout {
        grid-template-columns: 1fr;
    }

    .cart-checkout {
        position: static;
    }
}

@media (max-width: 680px) {
    .cart-header .header-inner {
        gap: 8px;
    }

    .cart-header .brand {
        min-width: 0;
    }

    .cart-back-link {
        flex: 0 0 auto;
        padding-inline: 10px;
        font-size: 12px;
        white-space: nowrap;
    }

    .cart-item {
        grid-template-columns: 76px minmax(0, 1fr);
        align-items: start;
    }

    .cart-item > img {
        width: 76px;
        height: 76px;
    }

    .cart-item-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }

    .cart-item-copy h2 {
        font-size: 19px;
        line-height: 1.1;
        overflow-wrap: anywhere;
    }
}

/* Carrinho — layout compacto (v2): espacos externos reduzidos, campos baixos,
   botoes retangulares sem sombra. O controle de quantidade permanece o original. */
.site-header.cart-header .header-inner {
    min-height: 56px;
    gap: 12px;
}

/* Marca da loja no lugar da marca do Super Ofertas: logo pequena (ou monograma)
   e nome que trunca antes de empurrar o link de voltar. */
.site-header.cart-header .cart-brand {
    min-width: 0;
    gap: 9px;
    color: inherit;
    text-decoration: none;
}

.site-header.cart-header .cart-brand-logo,
.site-header.cart-header .cart-brand-monogram {
    width: 32px;
    height: 32px;
    flex: none;
    border: 1.5px solid var(--ink);
    border-radius: 50%;
    object-fit: cover;
    background: var(--white);
}

.site-header.cart-header .cart-brand-monogram {
    display: grid;
    place-items: center;
    color: var(--white);
    background: var(--coral);
    font-family: "Bitter", Georgia, serif;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
}

.site-header.cart-header .cart-brand-name {
    overflow: hidden;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.01em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Carrinho vazio nao tem loja: o link de voltar sozinho fica na direita. */
.site-header.cart-header .header-inner {
    justify-content: flex-end;
}

.site-header.cart-header .header-inner:has(.cart-brand) {
    justify-content: space-between;
}

.site-header.cart-header .cart-back-link {
    min-height: 32px;
    padding: 6px 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 700;
}

.site-header.cart-header .cart-back-link:hover {
    transform: none;
    background: var(--paper-deep);
}

.page-shell.cart-page {
    padding-block: 14px 28px;
}

.cart-page .section-heading {
    margin-bottom: 12px;
}

.cart-page .section-heading .eyebrow {
    margin-bottom: 2px;
    font-size: 10.5px;
    letter-spacing: 0.16em;
}

/* O titulo aqui e orientacao, nao chamada: 60% menor que o h1 padrao libera a
   dobra para os itens do carrinho. */
.cart-page .section-heading h1 {
    margin-block: 0;
    font-size: clamp(15px, 2.4vw, 30px);
}

.cart-page .section-heading .lead {
    margin-block: 2px 0;
    font-size: 13.5px;
}

.cart-page .cart-layout {
    gap: 12px;
}

.cart-page .cart-items {
    gap: 12px;
}

.cart-page .cart-item {
    padding: 14px;
    gap: 12px;
    border-width: 1px;
    border-color: var(--line);
    border-radius: 14px;
}

.cart-page .cart-item-copy h2 {
    margin-block: 0;
    font-size: 17px;
    line-height: 1.2;
}

.cart-page .cart-item-copy p {
    margin-block: 3px 0;
    font-size: 14px;
}

.cart-page .cart-item-copy .small-copy {
    font-size: 12px;
}

.cart-page .cart-checkout {
    padding: 14px;
    border-width: 1px;
    border-color: var(--line);
    border-radius: 14px;
}

.cart-page .cart-checkout .eyebrow {
    margin-bottom: 1px;
    font-size: 10.5px;
    letter-spacing: 0.16em;
}

.cart-page .cart-checkout h2 {
    margin-block: 0;
    font-size: 21px;
}

.cart-page .cart-checkout .form-stack {
    margin-top: 10px;
    gap: 9px;
}

.cart-page .cart-checkout .field,
.cart-page .cart-checkout .field-group {
    gap: 3px;
}

.cart-page .cart-checkout .field label,
.cart-page .cart-checkout .field-label {
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.2;
}

.cart-page .cart-checkout .field input,
.cart-page .cart-checkout .field select {
    min-height: 32px;
    padding: 0 9px;
    border-width: 1px;
    border-color: var(--line);
    border-radius: 8px;
    font-size: 13.5px;
    line-height: 1;
}

.cart-page .cart-checkout .field select {
    padding-right: 28px;
    background-position: right 9px center;
}

.cart-page .cart-checkout .field-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto auto;
    align-items: start;
    gap: 8px;
}

/* Cada campo do par compartilha as linhas rotulo/campo/erro do pai para que a
   mensagem de erro ou o rotulo em duas linhas nao desloque o campo vizinho. */
.cart-page .cart-checkout .field-pair > .field {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    align-content: start;
    row-gap: 3px;
}

.cart-page .delivery-choice,
.cart-page .payment-choice {
    display: grid;
    gap: 4px;
}

.cart-page .delivery-choice .choice-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

/* Rotulo e preco ficam empilhados dentro de `.choice-text` e o radio centraliza
   no bloco inteiro: assim o preco alinha a esquerda sob "Entrega" e a bolinha
   fica na mesma altura da bolinha de "Retirada na loja". */
.cart-page .delivery-choice .choice-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    min-height: 32px;
    padding: 5px 9px;
    gap: 1px 7px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--white);
    font-size: 13px;
    line-height: 1.2;
    cursor: pointer;
}

.cart-page .delivery-choice .choice-row > span {
    min-width: 0;
}

.cart-page .delivery-choice .choice-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    min-width: 0;
}

.cart-page .delivery-choice .choice-row input {
    flex: none;
    width: 14px;
    height: 14px;
    accent-color: var(--coral);
}

.cart-page .delivery-choice .choice-row:has(input:checked) {
    border-color: var(--ink);
    background: var(--paper);
}

/* O select nativo abre o picker do sistema no celular, que nao aceita estilo e
   destoa da tela. As formas de pagamento sao poucas e fixas, entao viram radios
   empilhados: sem cartao por opcao, porque a escolha e texto curto e a caixa so
   consumiria altura sem acrescentar informacao. */
.cart-page .payment-choice {
    gap: 5px;
    padding: 9px 10px;
    border-width: 1px;
    border-radius: 8px;
}

/* A mensagem do grupo de radio nasce dentro da legend, ao lado do rotulo: ali
   ela nao empurra nenhuma opcao nem entra na linha de um radio. */
.choice-legend-error:empty {
    display: none;
}

.choice-legend-error .field-error {
    margin-left: 6px;
    font-size: inherit;
    font-weight: inherit;
}

.cart-page .payment-choice .choice-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

.cart-page .payment-choice .choice-row {
    display: flex;
    align-items: center;
    min-height: 26px;
    gap: 8px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
}

.cart-page .payment-choice .choice-row + .choice-row {
    border-top: 1px solid var(--line);
}

.cart-page .payment-choice .choice-row input {
    width: 14px;
    height: 14px;
    accent-color: var(--coral);
}

.cart-page .delivery-choice .choice-price {
    display: inline-flex;
    align-items: center;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    white-space: nowrap;
}

.cart-page .delivery-choice .choice-price-free {
    align-items: baseline;
    gap: 6px;
}

.cart-page .delivery-choice .choice-price-free s {
    color: var(--ink-soft);
    font-size: 11.5px;
    font-weight: 700;
}

/* Em telas estreitas as duas modalidades empilham em vez de espremer o rotulo.
   Com o card inteiro disponivel sobra largura, entao rotulo e preco voltam para
   a mesma linha. */
@media (max-width: 400px) {
    .cart-page .delivery-choice .choice-list {
        grid-template-columns: 1fr;
    }

    .cart-page .delivery-choice .choice-text {
        flex-direction: row;
        align-items: center;
        gap: 7px;
    }
}

.cart-page .delivery-address {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 8px;
    padding: 9px;
    border: 1px dashed var(--line);
    border-radius: 8px;
    background: var(--paper);
    gap: 8px;
}

.cart-page .delivery-address > #endereco-entrega {
    grid-column: 1 / -1;
}

.cart-page .delivery-address .small-copy {
    font-size: 11.5px;
    line-height: 1.35;
}

.cart-page .cart-checkout .small-copy.muted {
    font-size: 12px;
    line-height: 1.4;
}

.cart-page .cart-checkout .button,
.cart-page .cart-empty-form .button {
    min-height: 42px;
    padding: 0 14px;
    border-width: 1px;
    border-radius: 6px;
    font-size: 15px;
}

.cart-page .cart-checkout .button:hover,
.cart-page .cart-empty-form .button:hover {
    transform: none;
}

.cart-page .cart-checkout .button.primary {
    border-color: var(--coral-dark);
}

.cart-page .cart-checkout .button.primary:hover {
    background: var(--coral-dark);
}

.cart-page .cart-empty-form {
    margin-top: 6px;
}

.cart-page .cart-empty-form .button.ghost {
    min-height: 34px;
    border-color: transparent;
    color: var(--ink-soft);
    font-size: 13.5px;
    font-weight: 700;
}

.cart-page .cart-empty-form .button.ghost:hover {
    color: var(--coral-dark);
    text-decoration: underline;
}

.lot-counter-page {
    display: grid;
    padding-block: 12px;
    padding-bottom: calc(74px + env(safe-area-inset-bottom));
    gap: 10px;
}

.site-header.lot-header .header-inner {
    min-height: 56px;
    gap: 12px;
}

.site-header.lot-header .brand-logo {
    height: 42px;
}

.site-header.lot-header .button.small {
    min-height: 32px;
    padding: 6px 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 12.5px;
}

.site-header.lot-header .button.small:hover {
    transform: none;
    background: var(--paper-deep);
}

.lot-counter-page .surface {
    padding: 12px;
    border-width: 1px;
    border-color: var(--line);
    border-radius: var(--radius);
}

.lot-counter-hero {
    display: grid;
    gap: 0;
}

.lot-hero-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.lot-counter-hero h1 {
    margin-block: 0;
    font-size: 23px;
    line-height: 1.1;
}

.lot-hero-line {
    margin: 3px 0 0;
    color: var(--ink-soft);
    font-size: 12.5px;
    line-height: 1.35;
}

.lot-hero-line strong {
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.lot-facts {
    display: grid;
    margin: 10px 0 0;
    padding-top: 9px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px 10px;
    border-top: 1px solid var(--line-soft);
}

.lot-facts dt {
    color: var(--ink-soft);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.lot-facts dd {
    margin: 0;
    font-size: 13.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.lot-fact-wide {
    grid-column: 1 / -1;
}

.lot-fact-wide dd {
    color: var(--ink-soft);
    font-size: 12.5px;
    font-weight: 500;
}

/* Aviso tipografico: sem caixa nem faixa lateral. */
.lot-late-warning {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding-bottom: 8px;
    align-items: baseline;
    gap: 0 6px;
    border-bottom: 1px solid var(--red);
    font-size: 13px;
    line-height: 1.35;
}

.lot-late-warning strong {
    color: var(--red);
    font-weight: 800;
}

.lot-late-warning span {
    color: var(--ink-soft);
}

/* Acao em lote fixa no rodape. */
.lot-bulk-bar {
    position: fixed;
    z-index: 6;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 9px 16px calc(9px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: var(--white);
}

.lot-bulk-bar-inner {
    display: flex;
    width: min(calc(100% - 0px), var(--content));
    margin-inline: auto;
    align-items: center;
    gap: 10px;
}

.lot-bulk-bar form {
    flex: 1;
}

.lot-bulk-bar .button {
    width: 100%;
    min-height: 40px;
    border-width: 1px;
    border-radius: 6px;
    font-size: 14px;
}

.lot-bulk-bar .button:hover {
    transform: none;
}

.lot-bulk-bar .lot-total {
    margin: 0;
    line-height: 1.15;
    white-space: nowrap;
}

.lot-bulk-bar .lot-total small {
    display: block;
    color: var(--ink-soft);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.lot-bulk-bar .lot-total strong {
    font-size: 17px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.lot-counter-list {
    display: grid;
    gap: 10px;
}

.lot-counter-item {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) minmax(150px, auto);
    align-items: start;
    gap: 10px;
}

.lot-counter-item > img {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    object-fit: cover;
}

.lot-counter-item > .offer-thumb {
    width: 56px;
    height: 56px;
    border-radius: 8px;
}

.lot-counter-copy h2 {
    margin-block: 0;
    font-size: 16px;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.lot-counter-item .page-heading-row {
    align-items: flex-start;
    gap: 8px;
}

/* Rotulo e valor na mesma linha: os cinco dados cabem em duas linhas. */
.lot-item-details {
    display: flex;
    margin: 4px 0 0;
    flex-wrap: wrap;
    gap: 2px 10px;
}

.lot-item-details div {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.lot-item-details dt {
    color: var(--ink-soft);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.lot-item-details dd {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.lot-child-actions {
    display: grid;
    gap: 8px;
}

.lot-counter-page .lot-child-actions .button.small {
    width: 100%;
    min-height: 36px;
    padding: 0 12px;
    border-width: 1px;
    border-radius: 6px;
    font-size: 13.5px;
}

.lot-counter-page .lot-child-actions .button.small:hover {
    transform: none;
}

.lot-counter-page .lot-child-actions .button.danger {
    border-color: #e3bdba;
    color: var(--red);
    background: var(--white);
}

.lot-counter-page .lot-child-actions .button.danger:hover {
    background: #fff0ee;
}

/* Bandeirola menor, mesmo formato. */
.lot-counter-page .status-badge {
    min-height: 22px;
    padding: 4px 14px 4px 8px;
    clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 50%, 100% 100%, 0 100%);
    font-size: 10.5px;
}

@media (max-width: 879px) {
    .lot-counter-item {
        grid-template-columns: 56px minmax(0, 1fr);
        align-items: start;
    }

    .lot-child-actions {
        grid-column: 1 / -1;
        margin-top: 9px;
        padding-top: 9px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        border-top: 1px solid var(--line-soft);
    }
}

@media (max-width: 480px) {
    .lot-child-actions {
        grid-template-columns: 1fr;
    }

    .lot-counter-item .page-heading-row {
        align-items: flex-start;
        flex-direction: column;
    }
}

@font-face {
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/fonts/dm-sans-latin.woff2") format("woff2");
}

@font-face {
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/fonts/dm-sans-latin.woff2") format("woff2");
}

@font-face {
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/dm-sans-latin.woff2") format("woff2");
}

@font-face {
    font-family: "Bitter";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/bitter-latin.woff2") format("woff2");
}

@font-face {
    font-family: "Bitter";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("/fonts/bitter-latin.woff2") format("woff2");
}

:root {
    --ink: #13243a;
    --ink-soft: #405066;
    --paper: #f7f2e7;
    --paper-deep: #eee5d4;
    --white: #fffdf8;
    --coral: #ef5b45;
    --coral-dark: #c9382a;
    --mustard: #f4b83f;
    --teal: #138f85;
    --green: #267a53;
    --red: #b9312c;
    --signal-coral: #ff6f61;
    --signal-orange: #ff9b4a;
    --signal-yellow: #ffd84d;
    --signal-green: #45dca5;
    --signal-blue: #42c6f2;
    --signal-violet: #b691f5;
    --line: #d9cfbd;
    --radius: 18px;
    --radius-small: 11px;
    --content: 1180px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--ink);
    background: var(--paper);
    font-family: "DM Sans", system-ui, sans-serif;
    line-height: 1.5;
}

body.admin-body {
    background: #eef1f4;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    color: inherit;
    font: inherit;
}

button,
.button {
    min-height: 46px;
}

button {
    border: 0;
    cursor: pointer;
}

button:disabled,
.button:disabled,
form[aria-busy="true"] .button {
    cursor: wait;
    opacity: 0.65;
}

img {
    display: block;
    max-width: 100%;
}

:focus-visible {
    outline: 3px solid var(--mustard);
    outline-offset: 3px;
}

.skip-link {
    position: fixed;
    z-index: 100;
    top: 8px;
    left: 8px;
    padding: 10px 16px;
    color: var(--white);
    background: var(--ink);
    border-radius: 8px;
    transform: translateY(-150%);
}

.skip-link:focus {
    transform: translateY(0);
}

.site-header {
    position: sticky;
    z-index: 20;
    top: 0;
    border-bottom: 1px solid rgba(19, 36, 58, 0.1);
    background: rgba(247, 242, 231, 0.93);
    backdrop-filter: blur(12px);
}

.header-inner,
.page-shell {
    width: min(calc(100% - 32px), var(--content));
    margin-inline: auto;
}

.header-inner {
    display: flex;
    min-height: 72px;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.brand {
    display: inline-flex;
    align-items: center;
}

.brand-logo {
    display: block;
    width: auto;
    height: 54px;
    aspect-ratio: 615 / 380;
    border-radius: 8px;
    object-fit: contain;
}

.main-nav,
.header-actions,
.button-row,
.inline-cluster,
.filter-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.main-nav a {
    padding: 10px 8px;
    color: var(--ink-soft);
    font-size: 14px;
    font-weight: 700;
}

.main-nav a[aria-current="page"] {
    color: var(--coral-dark);
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 18px;
    border: 2px solid var(--ink);
    border-radius: 6px;
    background: var(--white);
    font-weight: 800;
    line-height: 1;
    transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.button:hover {
    transform: none;
}

.button.primary {
    color: var(--white);
    background: var(--coral);
}

.button.secondary {
    background: var(--mustard);
}

.button.ghost {
    border-color: transparent;
    background: transparent;
}

.button.danger {
    color: var(--white);
    background: var(--red);
}

.button.small {
    min-height: 38px;
    padding: 8px 13px;
    font-size: 13px;
}

.button.block {
    width: 100%;
}

.eyebrow {
    margin: 0 0 9px;
    color: var(--coral-dark);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1,
h2,
h3 {
    font-family: "Bitter", Georgia, serif;
    line-height: 1.02;
    letter-spacing: -0.035em;
}

h1 {
    margin-bottom: 18px;
    font-size: clamp(38px, 6vw, 74px);
}

h2 {
    margin-bottom: 14px;
    font-size: clamp(28px, 4vw, 42px);
}

h3 {
    margin-bottom: 8px;
    font-size: 22px;
}

.lead {
    max-width: 62ch;
    color: var(--ink-soft);
    font-size: clamp(17px, 2vw, 20px);
}

.muted {
    color: var(--ink-soft);
}

.small-copy {
    font-size: 13px;
}

.page-shell {
    padding-block: 42px 80px;
}

/* A vitrine nao tem cabecalho de site acima: o topo vazio so empurrava as ofertas
   para fora da dobra, entao a ficha da loja encosta no topo em qualquer largura. */
.page-shell.storefront-page {
    padding-top: 10px;
}

.hero {
    position: relative;
    display: grid;
    min-height: 500px;
    overflow: hidden;
    grid-template-columns: minmax(0, 0.88fr) minmax(480px, 1.12fr);
    border: 2px solid var(--ink);
    border-radius: 26px;
    background: var(--white);
}

.hero-copy {
    z-index: 1;
    padding: clamp(32px, 5vw, 64px);
    align-self: center;
}

.hero-copy h1 {
    max-width: 8ch;
}

.hero-visual {
    min-height: 100%;
    background: url("/images/superofertas-hero-bd15f658.webp") center / cover no-repeat;
}

.hero-sticker {
    position: absolute;
    right: 48%;
    bottom: 38px;
    width: 116px;
    height: 116px;
    padding: 18px 10px;
    color: var(--ink);
    background: var(--mustard);
    border: 2px solid var(--ink);
    border-radius: 46% 54% 45% 55%;
    font-family: "Bitter", Georgia, serif;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.05;
    text-align: center;
    transform: rotate(-8deg);
}

.section {
    margin-top: 64px;
}

.section-heading {
    display: flex;
    margin-bottom: 22px;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
}

/* Trilha de categorias: rolagem horizontal no dedo, sem barra visivel e sem
   quebrar linha, com os nomes em ordem alfabetica vindos da propria vitrine. */
.category-rail {
    display: flex;
    max-width: min(62%, 720px);
    min-width: 0;
    overflow-x: auto;
    flex: 0 1 auto;
    gap: 6px;
    padding-bottom: 2px;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

.category-rail::-webkit-scrollbar {
    display: none;
}

.category-chip {
    flex: 0 0 auto;
    padding: 4px 11px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink);
    background: var(--white);
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
    text-decoration: none;
    scroll-snap-align: start;
}

.category-chip:hover,
.category-chip:focus-visible {
    border-color: var(--ink);
    background: var(--paper);
}

/* A topbar da vitrine e sticky: o salto precisa parar antes dela, nao atras. */
.storefront-category-group {
    scroll-margin-top: 56px;
}

.section-heading > div {
    max-width: 720px;
}

.search-panel {
    display: grid;
    margin-top: -26px;
    padding: 20px;
    position: relative;
    z-index: 2;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 12px;
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    background: var(--white);
}

.field,
.field-group {
    display: grid;
    gap: 7px;
}

/* Campo unico de cidade: busca em cima, sugestoes marcaveis logo abaixo. */
.municipio-picker[hidden] {
    display: none;
}

.municipio-picker {
    display: grid;
    gap: 7px;
}

.municipio-sugestoes {
    display: grid;
    gap: 6px;
}

.municipio-sugestoes .choice-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 40px;
    padding: 6px 10px;
    gap: 9px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--white);
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.municipio-sugestoes .choice-row input[type="radio"] {
    flex: 0 0 auto;
    width: 18px;
    min-width: 18px;
    height: 18px;
    min-height: 18px;
    margin: 0;
    padding: 0;
    accent-color: var(--coral);
}

.municipio-sugestoes .choice-row span {
    flex: 1 1 auto;
    min-width: 0;
}

.municipio-sugestoes .choice-row:has(input:checked) {
    border-color: var(--ink);
    background: var(--paper);
}

.municipio-sugestoes .field-hint {
    margin: 0;
}

.field label,
.field-label {
    font-size: 13px;
    font-weight: 800;
}

.field input,
.field select,
.field textarea,
.search-input {
    width: 100%;
    min-height: 48px;
    padding: 11px 14px;
    border: 2px solid #a9a08f;
    border-radius: 10px;
    background: var(--white);
}

.field textarea {
    min-height: 110px;
    resize: vertical;
}

/* O select nativo do celular chega com fundo, seta e metrica do sistema, o que
   destoa dos demais campos. Zerar a aparencia e desenhar a seta em SVG mantem o
   campo identico ao input em qualquer plataforma. */
.field select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 38px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%2313243a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    background-size: 12px 8px;
    color: var(--ink);
    text-overflow: ellipsis;
}

.field select:disabled {
    color: var(--ink-soft);
    background-color: var(--paper-deep);
    opacity: 1;
}

.field select:invalid,
.field select option[value=""] {
    color: var(--ink-soft);
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.search-input:focus {
    border-color: var(--ink);
    outline: 3px solid rgba(244, 184, 63, 0.55);
    outline-offset: 1px;
}

.field-hint {
    margin: 0;
    color: var(--ink-soft);
    font-size: 12px;
}

/* O preenchimento automatico do navegador pinta o campo de azul e quebra a
   identidade da tela. Recortar o fundo no texto devolve o campo transparente
   sem esconder o valor; a transicao longa evita o flash azul inicial. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
textarea:-webkit-autofill {
    -webkit-text-fill-color: var(--ink);
    -webkit-background-clip: text;
    background-clip: text;
    caret-color: var(--ink);
    transition: background-color 100000s ease-in-out 0s;
}

.field-error {
    margin: 0;
    color: var(--red);
    font-size: 13px;
    font-weight: 700;
}

.input-error {
    border-color: var(--red) !important;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.product-card {
    overflow: hidden;
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    background: var(--white);
}

.product-art {
    position: relative;
    display: grid;
    aspect-ratio: 4 / 5;
    container-type: inline-size;
    isolation: isolate;
    min-height: 180px;
    place-items: center;
    overflow: hidden;
    background-color: #dcd4c4;
    background-image: url("/images/superofertas-hero-bd15f658.webp");
    background-repeat: no-repeat;
    background-size: auto 360px;
}

.product-gallery {
    min-width: 0;
}

[data-gallery-swipe] {
    touch-action: pan-y;
    user-select: none;
}

.product-gallery-trigger {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: grid;
    width: 100%;
    height: 100%;
    padding: 12px;
    place-items: center;
    border: 0;
    color: inherit;
    background: rgba(220, 212, 196, 0.92);
    cursor: zoom-in;
}

.product-gallery-trigger[hidden] {
    display: none;
}

.product-gallery-trigger:focus-visible {
    outline-offset: -5px;
}

.product-gallery-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    -webkit-user-drag: none;
    user-select: none;
}

.product-gallery-image[hidden] {
    display: none;
}

/* Foto Mágica: as medidas e âncoras são as receitas 4:5 validadas no
   protótipo. A receita é calculada no servidor; esta camada não recebe input. */
.foto-magica-overlay {
    --fm-pad: 5.5cqi;
    --fm-accent: #ff4d17;
    --fm-accent-2: #ffb020;
    --fm-deep: #0b1220;
    --fm-on-accent: #fff;
    --fm-red: #d92d3c;
    --fm-green: #0f9d68;
    position: absolute;
    z-index: 2;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.foto-magica-overlay[data-foto-magica-receita="varejo-essencial"],
.foto-magica-overlay[data-foto-magica-receita="ultima-chance"] {
    --fm-accent: #ff4d17;
    --fm-accent-2: #ffb020;
    --fm-deep: #2a1006;
}

.foto-magica-overlay[data-foto-magica-receita="editorial-limpo"],
.foto-magica-overlay[data-foto-magica-receita="so-essencial"] {
    --fm-accent: #111827;
    --fm-accent-2: #e5e7eb;
    --fm-deep: #0b1220;
}

.foto-magica-overlay[data-foto-magica-receita="liquidacao-classica"] {
    --fm-accent: #d92d3c;
    --fm-accent-2: #ffd7dc;
    --fm-deep: #3e0a12;
}

.foto-magica-overlay[data-foto-magica-receita="loja-do-bairro"] {
    --fm-accent: #0f9d68;
    --fm-accent-2: #d6f5e4;
    --fm-deep: #07301f;
}

.foto-magica-overlay[data-foto-magica-receita="moda-pop"] {
    --fm-accent: #6d3bd6;
    --fm-accent-2: #e5d5ff;
    --fm-deep: #241145;
}

.foto-magica-overlay[data-foto-magica-receita="eletronico"] {
    --fm-accent: #2563eb;
    --fm-accent-2: #c7d8ff;
    --fm-deep: #05101f;
}

.foto-magica-overlay[data-foto-magica-receita="mercado-retro"] {
    --fm-accent: #9a5b32;
    --fm-accent-2: #f2d6b3;
    --fm-deep: #33190c;
}

.foto-magica-overlay[data-foto-magica-receita="cupom-digital"] {
    --fm-accent: #b08246;
    --fm-accent-2: #f6e7cf;
    --fm-deep: #3a2a14;
}

.foto-magica-overlay[data-foto-magica-receita="fim-de-semana"] {
    --fm-accent: #0b6bcb;
    --fm-accent-2: #7fd4ff;
    --fm-deep: #062a4a;
}

.foto-magica-overlay .at {
    position: absolute;
}

.foto-magica-overlay .p-tl { top: var(--fm-pad); left: var(--fm-pad); }
.foto-magica-overlay .p-tr { top: var(--fm-pad); right: var(--fm-pad); }
.foto-magica-overlay .p-bl { bottom: var(--fm-pad); left: var(--fm-pad); }
.foto-magica-overlay .p-br { right: var(--fm-pad); bottom: var(--fm-pad); }

.fm-scrim {
    position: absolute;
    z-index: 1;
    inset: 0;
}

.fm-scrim-b {
    background: linear-gradient(to top, rgba(8, 12, 20, 0.86) 0, rgba(8, 12, 20, 0.5) 14%, rgba(8, 12, 20, 0.18) 30%, transparent 48%);
}

.fm-scrim-tl {
    background: radial-gradient(120% 90% at 0% 0%, rgba(8, 12, 20, 0.6) 0, transparent 52%);
}

.fm-frame {
    position: absolute;
    z-index: 3;
    inset: 0;
    border-radius: inherit;
}

.fm-frame.fr-inset {
    inset: 3.2cqi;
    border: 1px solid rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(11, 18, 32, 0.1);
}

.fm-frame.fr-brackets {
    --fm-border: 0.8cqi;
    --fm-length: 12cqi;
    inset: 3cqi;
    background:
        linear-gradient(var(--fm-accent), var(--fm-accent)) left top / var(--fm-length) var(--fm-border) no-repeat,
        linear-gradient(var(--fm-accent), var(--fm-accent)) left top / var(--fm-border) var(--fm-length) no-repeat,
        linear-gradient(var(--fm-accent), var(--fm-accent)) right top / var(--fm-length) var(--fm-border) no-repeat,
        linear-gradient(var(--fm-accent), var(--fm-accent)) right top / var(--fm-border) var(--fm-length) no-repeat,
        linear-gradient(var(--fm-accent), var(--fm-accent)) left bottom / var(--fm-length) var(--fm-border) no-repeat,
        linear-gradient(var(--fm-accent), var(--fm-accent)) left bottom / var(--fm-border) var(--fm-length) no-repeat,
        linear-gradient(var(--fm-accent), var(--fm-accent)) right bottom / var(--fm-length) var(--fm-border) no-repeat,
        linear-gradient(var(--fm-accent), var(--fm-accent)) right bottom / var(--fm-border) var(--fm-length) no-repeat;
}

.fm-frame.fr-corner2 {
    --fm-border: 0.8cqi;
    --fm-length: 14cqi;
    inset: 3cqi;
    background:
        linear-gradient(var(--fm-deep), var(--fm-deep)) left top / var(--fm-length) var(--fm-border) no-repeat,
        linear-gradient(var(--fm-deep), var(--fm-deep)) left top / var(--fm-border) var(--fm-length) no-repeat,
        linear-gradient(var(--fm-deep), var(--fm-deep)) right bottom / var(--fm-length) var(--fm-border) no-repeat,
        linear-gradient(var(--fm-deep), var(--fm-deep)) right bottom / var(--fm-border) var(--fm-length) no-repeat;
}

.fm-frame.fr-notch {
    inset: 2.4cqi;
    border: 0.6cqi solid var(--fm-accent-2);
    border-radius: 2cqi;
    clip-path: polygon(0 0, 100% 0, 100% 42%, 96% 50%, 100% 58%, 100% 100%, 0 100%, 0 58%, 4% 50%, 0 42%);
}

.fm-frame.fr-grad {
    inset: 2.4cqi;
    padding: 0.75cqi;
    border-radius: 1.6cqi;
    background: linear-gradient(135deg, var(--fm-accent), var(--fm-accent-2));
    -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
    mask-composite: exclude;
}

.fm-frame.fr-glow {
}

.fm-badge {
    z-index: 6;
    display: grid;
    place-items: center;
    color: #fff;
    background: var(--fm-red);
    font-weight: 850;
    line-height: 1;
    letter-spacing: -0.02em;
    text-align: center;
}

.fm-badge u {
    display: block;
    font-size: 6.6cqi;
    letter-spacing: -0.045em;
    text-decoration: none;
}

.fm-badge s {
    display: block;
    margin-top: 0.35cqi;
    font-size: 2.5cqi;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-decoration: none;
}

.fm-badge.bg-circle {
    width: 22cqi;
    padding: 1cqi;
    border-radius: 50%;
    aspect-ratio: 1;
}

.fm-badge.bg-pill {
    padding: 1.6cqi 3cqi;
    border-radius: 99px;
    font-size: 4.2cqi;
}

.fm-badge.bg-tag {
    padding: 1.6cqi 3cqi 1.6cqi 5.4cqi;
    border-radius: 1.2cqi;
    clip-path: polygon(0 50%, 3.2cqi 0, 100% 0, 100% 100%, 3.2cqi 100%);
    font-size: 4.2cqi;
}

.fm-badge.bg-star {
    width: 24cqi;
    padding: 2cqi;
    clip-path: polygon(50% 0, 58% 9%, 69% 4%, 73% 16%, 85% 15%, 85% 27%, 96% 31%, 91% 42%, 100% 50%, 91% 58%, 96% 69%, 85% 73%, 85% 85%, 73% 84%, 69% 96%, 58% 91%, 50% 100%, 42% 91%, 31% 96%, 27% 84%, 15% 85%, 15% 73%, 4% 69%, 9% 58%, 0 50%, 9% 42%, 4% 31%, 15% 27%, 15% 15%, 27% 16%, 31% 4%, 42% 9%);
    aspect-ratio: 1;
}

.fm-badge.bg-star u { font-size: 5.4cqi; }
.fm-badge.bg-star s { font-size: 2.1cqi; }
.fm-badge.bg-dark { color: var(--fm-accent-2); background: var(--fm-deep); }
.fm-badge.bg-brand { color: var(--fm-on-accent); background: var(--fm-accent); }

.fm-price {
    position: absolute;
    z-index: 6;
    display: grid;
    gap: 0.4cqi;
    padding: 2.2cqi 3cqi;
    border-radius: 1.6cqi;
    color: #fff;
    background: var(--fm-deep);
    font-variant-numeric: tabular-nums;
}

.fm-price em {
    display: block;
    font-size: 3.2cqi;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.05em;
    opacity: 0.7;
    text-transform: uppercase;
}

.fm-price strong {
    display: block;
    font-size: 8cqi;
    font-weight: 850;
    line-height: 0.94;
    letter-spacing: -0.05em;
}

.fm-price strong span {
    margin-right: 0.12em;
    font-size: 0.52em;
    font-weight: 750;
    letter-spacing: 0;
    opacity: 0.85;
    vertical-align: 0.24em;
}

.fm-price.pr-gold { color: var(--fm-deep); background: var(--fm-accent-2); }
.fm-price.pr-white { color: var(--fm-deep); background: #fff; }
.fm-price.pr-glass { background: rgba(11, 18, 32, 0.52); backdrop-filter: blur(9px) saturate(1.3); }
.fm-price.pr-cut { border-radius: 1.2cqi; clip-path: polygon(0 0, 100% 0, 100% 100%, 3cqi 100%, 0 calc(100% - 3cqi)); }

.fm-price.pr-bar {
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: baseline;
    gap: 2cqi;
    padding: 3cqi 4cqi;
    border-radius: 0;
    background: linear-gradient(to top, rgba(8, 12, 20, 0.86), rgba(8, 12, 20, 0.5));
}

.fm-price.pr-bar em { margin-right: auto; font-size: 2.6cqi; }
.fm-price.pr-bar strong { font-size: 7.4cqi; }
.fm-price.pr-wide { right: var(--fm-pad); left: var(--fm-pad); text-align: left; }

.fm-band {
    position: absolute;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 2cqi;
    padding: 2cqi 3cqi;
    color: #fff;
    background: var(--fm-deep);
    font-size: 3cqi;
    font-weight: 750;
    letter-spacing: 0.03em;
}

.fm-band.bd-bottom { right: 0; bottom: 0; left: 0; }
.fm-band.bd-top { top: 0; right: 0; left: 0; }
.fm-band.bd-glass { background: rgba(11, 18, 32, 0.5); backdrop-filter: blur(10px); }
.fm-band.bd-brand { color: var(--fm-on-accent); background: var(--fm-accent); }
.fm-band.bd-thin { padding: 1.3cqi 3cqi; font-size: 2.5cqi; letter-spacing: 0.14em; text-transform: uppercase; }
.fm-band.bd-center { justify-content: center; text-align: center; }
.fm-band.bd-spread { justify-content: space-between; }
.fm-band.bd-spread b { font-weight: 850; }

.fm-ribbon {
    position: absolute;
    z-index: 6;
    top: 0;
    left: 0;
    width: 38cqi;
    height: 38cqi;
    overflow: hidden;
}

.fm-ribbon i {
    position: absolute;
    top: 8.4cqi;
    left: -11cqi;
    display: block;
    width: 44cqi;
    padding: 1.5cqi 0;
    rotate: -45deg;
    color: #fff;
    background: var(--fm-red);
    font-size: 2.7cqi;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-align: center;
    text-transform: uppercase;
}

.fm-label {
    z-index: 6;
    padding: 1.3cqi 2.4cqi;
    border-radius: 0.9cqi;
    color: var(--fm-deep);
    background: #fff;
    font-size: 2.7cqi;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.fm-label.lb-dark { color: #fff; background: var(--fm-deep); }
.fm-label.lb-brand { color: var(--fm-on-accent); background: var(--fm-accent); }
.fm-label.lb-green { color: #fff; background: var(--fm-green); }
.fm-label.lb-glass { background: rgba(255, 255, 255, 0.86); backdrop-filter: blur(8px); }

.fm-label.lb-dot::before {
    display: inline-block;
    width: 1.4cqi;
    height: 1.4cqi;
    margin-right: 1.2cqi;
    border-radius: 50%;
    background: currentColor;
    content: "";
    opacity: 0.65;
    vertical-align: middle;
}

.fm-display {
    z-index: 6;
    max-width: 62cqi;
    color: #fff;
    font-size: 9cqi;
    font-weight: 850;
    line-height: 0.92;
    letter-spacing: -0.05em;
    text-transform: uppercase;
}

.fm-display.dp-tilt { rotate: -3.5deg; transform-origin: left center; }
.fm-display.dp-gold { color: var(--fm-accent-2); }

.fm-urg {
    z-index: 6;
    display: grid;
    gap: 1.2cqi;
    padding: 2cqi 2.6cqi;
    border-radius: 1.4cqi;
    color: #fff;
    background: rgba(11, 18, 32, 0.72);
    font-size: 2.7cqi;
    font-weight: 700;
    backdrop-filter: blur(8px);
}

.fm-urg .hd { display: flex; align-items: baseline; justify-content: space-between; gap: 2cqi; }
.fm-urg .hd b { font-weight: 800; }
.fm-urg .hd i { font-style: normal; font-weight: 600; opacity: 0.72; }
.fm-urg.ug-bar { right: var(--fm-pad); left: var(--fm-pad); }

/* Seta discreta: so o chevron, sem circulo nem fundo. A area de toque continua
   grande porque o botao mantem 32px, mas o desenho visivel e apenas o traco. */
.gallery-arrow {
    position: absolute;
    z-index: 3;
    top: 50%;
    display: grid;
    width: 32px;
    height: 32px;
    padding: 0;
    place-items: center;
    transform: translateY(-50%);
    border: 0;
    color: var(--ink);
    background: none;
    line-height: 1;
    cursor: pointer;
}

/* Chevron desenhado em SVG: o glifo tipografico renderiza fino demais e fora do
   eixo em parte das fontes do sistema. O halo branco garante leitura sobre foto
   escura sem devolver a caixa ao redor. */
.gallery-arrow-icon {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentcolor;
    stroke-width: 2.25;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.gallery-arrow:hover .gallery-arrow-icon,
.gallery-arrow:focus-visible .gallery-arrow-icon {
    stroke-width: 2.75;
}

.gallery-previous {
    left: 2px;
}

.gallery-next {
    right: 2px;
}

/* ------------------------------------------- galeria ampliada da vitrine ---
   Tela cheia com as fotos empilhadas: rolar troca de foto e a pinca amplia
   cada uma sem barra de rolagem. */

.gallery-modal {
    --gallery-modal-header-height: 44px;
    --gallery-modal-gap: 4px;
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: var(--white);
}

.gallery-modal[open] {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
}

.gallery-modal::backdrop {
    background: var(--white);
}

.gallery-modal-header {
    display: flex;
    height: calc(var(--gallery-modal-header-height) + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 10px 0 16px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--line);
    background: var(--white);
}

.gallery-modal-heading {
    margin: 0;
    color: var(--ink);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.gallery-modal-list {
    padding: var(--gallery-modal-gap);
    padding-bottom: calc(var(--gallery-modal-gap) + env(safe-area-inset-bottom));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.gallery-modal-list::-webkit-scrollbar {
    display: none;
}

/* A altura acompanha a proporcao da foto: nada de faixa vazia entre uma
   imagem e a seguinte. */
.gallery-modal-item {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    margin: 0 0 var(--gallery-modal-gap);
    overflow: hidden;
    background: var(--white);
    line-height: 0;
    touch-action: pan-y;
    user-select: none;
}

.gallery-modal-item:last-child {
    margin-bottom: 0;
}

.gallery-modal-item[data-gallery-zoomed="true"] {
    z-index: 1;
    touch-action: none;
}

.gallery-modal-image {
    --gallery-zoom-scale: 1;
    --gallery-zoom-x: 0px;
    --gallery-zoom-y: 0px;
    display: block;
    width: 100%;
    height: auto;
    max-height: calc(100dvh - var(--gallery-modal-header-height) -
        var(--gallery-modal-gap) * 2);
    object-fit: contain;
    transform: translate3d(var(--gallery-zoom-x), var(--gallery-zoom-y), 0)
        scale(var(--gallery-zoom-scale));
    transform-origin: center;
    -webkit-user-drag: none;
    user-select: none;
    will-change: transform;
}

.gallery-modal-image--settling {
    transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.gallery-modal-close {
    display: grid;
    width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: var(--ink);
    background: transparent;
    font-size: 0;
    line-height: 1;
    cursor: pointer;
}

.gallery-modal-close::after {
    color: inherit;
    content: "\00d7";
    font-size: 26px;
    font-weight: 400;
}

.gallery-modal-close:active {
    background: rgba(19, 36, 58, 0.08);
}

.gallery-modal-close:focus-visible {
    outline: 2px solid var(--signal-blue);
    outline-offset: 2px;
}

html.gallery-modal-open {
    overflow: hidden;
}

.art-lamp {
    background-position: 70% 13%;
}

.art-shoe {
    background-position: 42% 82%;
}

.art-shirt {
    background-position: 78% 88%;
}

.art-fan {
    background-position: 95% 39%;
}

.art-coffee {
    background-position: 58% 56%;
}

.art-toy {
    background-position: 100% 88%;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.status-badge {
    --status-accent: var(--signal-violet);
    min-height: 28px;
    padding: 6px 20px 6px 10px;
    color: var(--ink);
    background: var(--status-accent);
    border: 0;
    border-radius: 0;
    clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 50%, 100% 100%, 0 100%);
    line-height: 1.1;
    white-space: nowrap;
}

.status-badge.success {
    --status-accent: var(--signal-green);
}

.status-badge.warning {
    --status-accent: var(--signal-yellow);
}

.status-badge.neutral {
    --status-accent: var(--signal-blue);
}

.status-badge.danger {
    --status-accent: var(--signal-coral);
}

.product-body {
    padding: 20px;
}

/* O nome do produto vem antes da foto: quem varre a grade le o que e o
   produto e so entao olha a imagem. */
.product-heading {
    padding: 20px 20px 10px;
}

.product-heading h3 {
    margin: 0;
}

.product-store {
    margin-bottom: 8px;
    color: var(--ink-soft);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.price-row {
    display: grid;
    margin: 14px 0 17px;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: baseline;
    justify-content: start;
    column-gap: 8px;
    row-gap: 0;
}

.price-values {
    display: grid;
    min-width: 0;
    justify-items: start;
}

.price-old {
    color: var(--ink-soft);
    font-size: 13px;
    text-decoration: line-through;
}

.price-label {
    color: var(--ink-soft);
    font-size: 13px;
}

.price-new {
    font-family: "Bitter", Georgia, serif;
    font-size: 27px;
    font-weight: 800;
}

.price-discount {
    padding: 3px 7px;
    border-radius: 5px;
    color: #a61b2b;
    background: #fdeaec;
    font-size: 11px;
    font-weight: 800;
}

/* Vitrine da loja: etiqueta de preco compacta do card publico. */
.storefront-price-tag {
    position: relative;
    isolation: isolate;
    display: grid;
    margin: 14px 0 17px 14px;
    /* A ponta esquerda da etiqueta e desenhada em SVG esticado (preserveAspectRatio
       none), entao ela ocupa sempre 14% da largura: o recuo do texto tambem precisa
       ser proporcional, senao o preco invade a diagonal quando o card encolhe. */
    padding: 8px 10px 8px calc(14% - 6px);
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 3px 7px;
}

.storefront-tag-shape {
    position: absolute;
    z-index: 0;
    top: -1px;
    left: -14px;
    width: calc(100% + 15px);
    height: calc(100% + 2px);
    overflow: visible;
    pointer-events: none;
}

.storefront-tag-shape path {
    fill: #faf6ee;
    stroke: #b4aa98;
    stroke-width: 1.5;
    stroke-dasharray: 4 3;
    stroke-linecap: butt;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.storefront-price-tag .price-old,
.storefront-price-tag .price-label,
.storefront-price-tag .price-discount,
.storefront-price-tag .price-new {
    position: relative;
    z-index: 2;
}

.storefront-price-tag .price-old,
.storefront-price-tag .price-label,
.storefront-price-tag .price-new {
    margin-inline-start: 5px;
    white-space: nowrap;
}

.storefront-price-tag .price-new {
    grid-column: 1 / -1;
}

.storefront-tag-hole {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: -4px;
    width: 5px;
    height: 5px;
    border: 1px solid #928875;
    border-radius: 50%;
    background: var(--white);
    transform: translate(-50%, -50%);
}

.storefront-offer-actions {
    display: grid;
    margin-top: auto;
    padding-top: 18px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}

.storefront-offer-card {
    display: flex;
    flex-direction: column;
}

.storefront-offer-card--descricao-aberta {
    border-color: var(--green);
}

.storefront-offer-card--expired {
    filter: grayscale(0.85);
    opacity: 0.58;
}

.storefront-offer-card--expired .product-body {
    justify-content: space-between;
}

.expiry--expired {
    margin-top: auto;
}

.storefront-offer-card .product-body {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.storefront-description-slot {
    display: flex;
    min-height: calc(12px * 1.15);
    align-items: center;
}

button.storefront-offer-description {
    width: fit-content;
    max-width: 100%;
    min-height: 0;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.15;
    overflow-wrap: anywhere;
    text-align: left;
    white-space: normal;
}

.storefront-offer-description:focus-visible {
    outline: 3px solid var(--mustard);
    outline-offset: 3px;
}

@media (max-width: 680px) {
    .storefront-offer-description {
        margin: 0;
    }
}

.storefront-stock {
    display: flex;
    min-width: 0;
    min-height: 32px;
    padding: 5px 7px;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    color: #18765b;
    background: #edf6f1;
    white-space: nowrap;
}

.feed-stock {
    justify-content: flex-start;
    overflow-wrap: anywhere;
    line-height: 1.25;
    white-space: normal;
}

.storefront-stock::before {
    width: 6px;
    height: 6px;
    flex: 0 0 auto;
    margin-right: 4px;
    border-radius: 50%;
    background: #18765b;
    content: "";
}

.gallery-dots.storefront-gallery-dots {
    position: absolute;
    z-index: 8;
    right: 0;
    bottom: 0;
    left: 0;
    min-height: 24px;
    padding: 0;
    background: transparent;
}

.storefront-gallery-dots .gallery-dot::before {
    width: 5px;
    height: 5px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    background: #d8e0ea;
}

.storefront-gallery-dots .gallery-dot[aria-current="true"]::before {
    background: var(--signal-coral);
    transform: scale(1.2);
}

.expiry {
    display: flex;
    margin: 0;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: var(--coral-dark);
    font-size: 13px;
    font-weight: 800;
}

.card-footer {
    display: flex;
    margin-top: 18px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.carregamento {
    justify-content: center;
    margin-top: 30px;
}

.stock {
    color: var(--ink-soft);
    font-size: 12px;
    font-weight: 700;
}

.surface,
.notice,
.empty-state {
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    background: var(--white);
}

.surface {
    padding: clamp(22px, 4vw, 38px);
}

.notice {
    display: flex;
    padding: 16px 18px;
    align-items: flex-start;
    gap: 12px;
}

.notice.success {
    border-color: var(--green);
    background: #eaf7ef;
}

.notice.warning {
    border-color: #b77b00;
    background: #fff4d4;
}

.notice.danger {
    border-color: var(--red);
    background: #fff0ee;
}

.notice strong {
    display: block;
}

.notice p {
    margin: 2px 0 0;
}

.empty-state {
    padding: 52px 24px;
    text-align: center;
}

.empty-icon {
    display: grid;
    width: 70px;
    height: 70px;
    margin: 0 auto 18px;
    place-items: center;
    border: 2px solid var(--ink);
    border-radius: 50%;
    background: var(--mustard);
    font-size: 30px;
}

.auth-layout {
    display: grid;
    min-height: calc(100vh - 72px);
    grid-template-columns: minmax(0, 1fr) minmax(420px, 0.82fr);
}

.auth-art {
    position: relative;
    min-height: 620px;
    background: url("/images/superofertas-hero-bd15f658.webp") center / cover no-repeat;
}

.auth-art-copy {
    position: absolute;
    right: 26px;
    bottom: 28px;
    left: 26px;
    padding: 26px;
    color: var(--white);
    background: rgba(19, 36, 58, 0.91);
    border: 2px solid var(--white);
    border-radius: var(--radius);
}

.auth-eyebrow {
    color: var(--mustard);
}

.auth-title {
    font-size: 50px;
}

.auth-panel {
    display: grid;
    padding: clamp(32px, 6vw, 76px);
    align-content: center;
    background: var(--paper);
}

.form-stack {
    display: grid;
    gap: 18px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.divider {
    height: 1px;
    margin-block: 10px;
    background: var(--line);
}

.dashboard-shell {
    display: grid;
    min-height: 100vh;
    grid-template-columns: 260px minmax(0, 1fr);
}

.sidebar {
    position: sticky;
    top: 0;
    display: flex;
    height: 100vh;
    padding: 0;
    flex-direction: column;
    color: var(--ink);
    background: var(--paper);
    border-right: 1px solid var(--line);
}

/* A arte do logo tem fundo branco proprio: a faixa inteira e branca e a
   imagem nao recebe raio nem borda, senao aparece a quina do PNG. */
.sidebar-head {
    display: flex;
    padding: 14px 12px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: #fff;
    border-bottom: 1px solid var(--line-soft);
}

.sidebar .brand {
    margin-bottom: 0;
    min-width: 0;
}

.sidebar .brand-logo {
    height: 44px;
    border-radius: 0;
}

.sidebar-close {
    display: none;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    align-items: center;
    justify-content: center;
    color: var(--ink-soft);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 19px;
    line-height: 1;
    text-decoration: none;
}

.sidebar-close:hover {
    color: var(--ink);
    background: var(--paper-deep);
}

.sidebar-shop {
    display: grid;
    padding: 10px 12px;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    background: var(--white);
    border-bottom: 1px solid var(--line-soft);
}

.sidebar-initial {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    color: #fff;
    background: var(--coral);
    border-radius: 50%;
    font-family: "Bitter", Georgia, serif;
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
}

.sidebar-nav {
    display: grid;
    padding: 10px 8px;
    align-content: start;
    gap: 2px;
    flex: 1;
    overflow-y: auto;
}

.sidebar-group {
    margin: 0;
    padding: 10px 6px 4px;
    color: var(--ink-soft);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.sidebar-nav a {
    display: grid;
    min-height: 42px;
    padding: 0 8px;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    color: var(--ink);
    border-left: 3px solid transparent;
    border-radius: var(--radius-small);
    font-size: 14px;
    font-weight: 700;
}

.sidebar-nav a:hover {
    background: var(--paper-deep);
}

.sidebar-nav a[aria-current="page"] {
    color: var(--coral-dark);
    background: var(--white);
    border-left-color: var(--coral);
    outline: 1px solid var(--line-soft);
    outline-offset: -1px;
}

/* Na lista lateral a contagem e um numero, nao um estado: a bandeirola
   apontada encostava na borda da gaveta e parecia cortada. */
.sidebar-nav .status-badge {
    display: inline-grid;
    min-width: 20px;
    min-height: 20px;
    padding: 0 6px;
    place-items: center;
    background: var(--mustard);
    border-radius: var(--radius-pill);
    clip-path: none;
    font-size: 11px;
    letter-spacing: 0;
}

.sidebar-icon {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.sidebar-footer {
    margin-top: auto;
    padding: 10px 12px 12px;
    background: var(--white);
    border-top: 1px solid var(--line);
}

/* Plano no rodape: capacidade e vigencia decidem se da para publicar. */
.sidebar-plan {
    display: block;
    margin-bottom: 8px;
    padding: 9px 10px;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-small);
    text-decoration: none;
}

.sidebar-plan:hover {
    background: var(--paper-deep);
}

.sidebar-plan-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.sidebar-plan-name {
    font-size: 12px;
    font-weight: 700;
}

.sidebar-plan-usage {
    color: var(--ink-soft);
    font-size: 11.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.sidebar-plan-bar {
    display: block;
    height: 5px;
    margin-top: 6px;
    overflow: hidden;
    background: var(--paper-deep);
    border-radius: 3px;
}

.sidebar-plan-bar i {
    display: block;
    height: 100%;
    background: var(--coral);
}

.sidebar-plan-term {
    display: block;
    margin-top: 5px;
    color: var(--ink-soft);
    font-size: 10.5px;
}

.shop-identity {
    margin-bottom: 10px;
    min-width: 0;
}

.shop-identity strong,
.shop-identity span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shop-identity strong {
    font-size: 13.5px;
}

.shop-identity span {
    color: var(--ink-soft);
    font-size: 12px;
}

/* Fora do celular a gaveta nao existe: o veu nunca cobre o painel. */
.sidebar-veil {
    display: none;
}

.dashboard-main {
    min-width: 0;
    padding: 24px clamp(20px, 4vw, 52px) 70px;
    background: var(--paper);
}

.dashboard-topbar,
.page-heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.dashboard-topbar {
    margin-bottom: 36px;
}

.dashboard-title {
    font-size: clamp(42px, 6vw, 54px);
}

.merchant-page-header {
    display: grid;
    margin-bottom: 24px;
    padding: 26px 28px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 28px;
    border: 2px solid var(--ink);
    border-radius: 20px;
    background: var(--white);
}

.merchant-page-header-main {
    min-width: 0;
}

.merchant-page-header-main .eyebrow {
    margin-bottom: 6px;
}

.merchant-page-header-main .dashboard-title {
    margin-bottom: 9px;
    line-height: 1;
}

.merchant-page-header-main .lead {
    max-width: 62ch;
    margin-bottom: 0;
}

.merchant-page-header-actions {
    display: grid;
    justify-items: end;
    gap: 14px;
}

.merchant-page-header-actions .balance-pill,
.merchant-page-header-actions .telegram-status-badge {
    margin-left: 0;
}

.merchant-page-header-status {
    display: inline-flex;
    padding: 7px 11px;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.merchant-page-header-buttons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.merchant-profile-page-header .merchant-profile-avatar {
    width: 76px;
    height: 76px;
    border-width: 3px;
    border-radius: 18px;
    font-size: 30px;
    transform: none;
}

.merchant-profile-header-actions {
    grid-template-columns: auto auto;
    align-items: center;
}

.mobile-menu-button {
    display: none;
}

.balance-pill {
    display: inline-flex;
    margin-left: auto;
    padding: 8px 14px;
    align-items: center;
    gap: 8px;
    border: 2px solid var(--ink);
    border-radius: 999px;
    background: var(--white);
    font-weight: 800;
}

.balance-dot {
    width: 10px;
    height: 10px;
    background: var(--teal);
    border-radius: 50%;
}

/* Indicador sem ação é um resumo, não um controle. Links mantêm o oval. */
.balance-pill:not(a):not(button) {
    border-left: 6px solid var(--signal-green);
    border-radius: var(--radius-small);
    background: #fff7cf;
}

.stats-grid {
    display: grid;
    margin: 26px 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.stat-card {
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius-small);
    background: var(--white);
}

.stat-card span {
    color: var(--ink-soft);
    font-size: 13px;
    font-weight: 700;
}

.stat-card strong {
    display: block;
    margin-top: 3px;
    font-family: "Bitter", Georgia, serif;
    font-size: 30px;
}

.data-card {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
}

.data-card-header {
    display: flex;
    min-height: 62px;
    padding: 14px 18px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--line);
}

.data-card-header h3 {
    margin: 0;
    font-family: "DM Sans", sans-serif;
    font-size: 16px;
    letter-spacing: 0;
}

.offer-list {
    display: grid;
}

.offer-row {
    display: grid;
    padding: 16px 18px;
    grid-template-columns: 72px minmax(180px, 1fr) minmax(125px, auto) minmax(120px, auto) auto;
    align-items: center;
    gap: 16px;
    border-bottom: 1px solid var(--line);
}

.offer-row:last-child {
    border-bottom: 0;
}

.offer-thumb {
    width: 72px;
    height: 64px;
    border-radius: 9px;
    background-color: var(--paper-deep);
    background-image: url("/images/superofertas-hero-bd15f658.webp");
    background-repeat: no-repeat;
    background-size: auto 220px;
}

img.offer-thumb {
    object-fit: cover;
    background: var(--paper-deep);
}

.offer-meta strong,
.offer-meta span {
    display: block;
}

.offer-meta span,
.row-label {
    color: var(--ink-soft);
    font-size: 12px;
}

.tabs {
    display: flex;
    margin: 20px 0;
    gap: 8px;
    border-bottom: 1px solid var(--line);
}

.tabs button,
.tabs a {
    padding: 11px 13px;
    color: var(--ink-soft);
    background: transparent;
    border-bottom: 3px solid transparent;
    font-weight: 800;
}

.tabs [aria-selected="true"],
.tabs [aria-current="page"] {
    color: var(--coral-dark);
    border-color: var(--coral);
}

.reservation-card {
    display: grid;
    padding: 20px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;
    border-bottom: 1px solid var(--line);
}

.reservation-card:last-child {
    border-bottom: 0;
}

.reservation-code {
    display: inline-block;
    margin: 8px 0;
    padding: 6px 10px;
    background: var(--paper-deep);
    border-radius: 7px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.plan-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.plan-card {
    position: relative;
    display: grid;
    padding: 12px;
    gap: 5px;
    border: 2px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
    cursor: pointer;
}

.plan-card:has(input:checked) {
    border-color: var(--ink);
}

.plan-card input {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
    accent-color: var(--coral);
}

.plan-card strong {
    font-family: "Bitter", Georgia, serif;
    font-size: 22px;
}

.plan-checkout {
    gap: 18px;
}

.plan-payment-grid {
    margin-top: 2px;
}

.plan-card.featured::before {
    position: absolute;
    top: -11px;
    left: 20px;
    padding: 4px 13px 4px 8px;
    content: "melhor valor";
    color: var(--ink);
    background: var(--mustard);
    border: 0;
    border-radius: 0;
    clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 50%, 100% 100%, 0 100%);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ledger-list {
    display: grid;
}

.ledger-row {
    display: grid;
    padding: 15px 18px;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 20px;
    border-bottom: 1px solid var(--line);
}

.ledger-row:last-child {
    border-bottom: 0;
}

.amount {
    font-weight: 800;
}

.amount.positive {
    color: var(--green);
}

.amount.negative {
    color: var(--red);
}

.upload-zone {
    position: relative;
    display: grid;
    min-height: 230px;
    padding: 28px;
    place-items: center;
    text-align: center;
    border: 2px dashed #8b8170;
    border-radius: var(--radius);
    background: #fbf8f1;
}

.upload-zone input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

.upload-zone::before {
    content: "⌁";
    display: grid;
    width: 66px;
    height: 66px;
    place-items: center;
    border: 2px solid var(--ink);
    border-radius: 50%;
    background: var(--mustard);
    font-size: 24px;
    font-weight: 800;
}

.upload-preview {
    position: relative;
    min-height: 360px;
    overflow: hidden;
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    background: url("/images/superofertas-hero-bd15f658.webp") 43% 83% / auto 610px no-repeat;
}

img.upload-preview {
    width: 100%;
    object-fit: cover;
}

.photo-fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.photo-field {
    display: grid;
    gap: 8px;
}

.photo-preview-thumb {
    width: 100%;
    height: 96px;
    border: 2px solid var(--ink);
    border-radius: 9px;
    background: var(--paper-deep);
    object-fit: cover;
}

.photo-preview-thumb[hidden] {
    display: none;
}

.offer-editor {
    scroll-margin-top: 24px;
}

.merchant-edit-section {
    display: none;
}

.merchant-view-painel .merchant-reservations-section,
.merchant-view-painel .merchant-new-section,
.merchant-view-painel .merchant-install-section,
.merchant-view-reservas .merchant-panel-heading,
.merchant-view-reservas .merchant-panel-section,
.merchant-view-reservas .merchant-new-section,
.merchant-view-reservas .merchant-install-section,
.merchant-view-nova .merchant-panel-heading,
.merchant-view-nova .merchant-panel-section,
.merchant-view-nova .merchant-reservations-section,
.merchant-view-nova .merchant-install-section,
.merchant-view-editar .merchant-panel-heading,
.merchant-view-editar .merchant-panel-section,
.merchant-view-editar .merchant-reservations-section,
.merchant-view-editar .merchant-new-section,
.merchant-view-editar .merchant-install-section {
    display: none;
}

.merchant-view-editar .merchant-edit-section.is-selected {
    display: block;
}

.pwa-install-prompt[hidden],
.pwa-install-prompt [hidden] {
    display: none;
}

.pwa-install-prompt {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 80;
    width: min(420px, calc(100vw - 32px));
    padding: 24px;
    border: 2px solid var(--ink);
}

.pwa-install-prompt h2,
.pwa-install-prompt p {
    margin-top: 0;
}

.pwa-install-close {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    color: var(--ink);
    font-size: 1.7rem;
    cursor: pointer;
}

.pwa-install-actions,
.pwa-install-ios {
    margin-top: 16px;
}

.pwa-install-network {
    margin-bottom: 0;
}

@media (max-width: 560px) {
    .pwa-install-prompt {
        right: 12px;
        bottom: 12px;
        width: calc(100vw - 24px);
        padding: 20px;
    }
}

@media print {
    .pwa-install-prompt {
        display: none;
    }
}

.merchant-view-reservas .merchant-reservations-section,
.merchant-view-nova .merchant-new-section,
.merchant-view-editar .merchant-edit-section.is-selected {
    margin-top: 0;
}

.dashboard-expiry-notice {
    margin-top: 24px;
}

.offer-tabs {
    display: flex;
    margin-bottom: 20px;
    gap: 34px;
    border-bottom: 1px solid var(--line);
}

.offer-finder {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    margin-bottom: 14px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--paper);
}

.merchant-view-painel .merchant-panel-section.section {
    margin-top: 24px;
}

.merchant-view-painel .offer-finder,
.merchant-view-painel .offer-tabs {
    margin-bottom: 24px;
}

.offer-finder-name,
.offer-finder-name .field {
    margin: 0;
}

.offer-finder-input {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.offer-finder-barcode {
    display: flex;
    align-items: end;
}

.offer-finder-scan {
    min-height: 48px;
    white-space: nowrap;
}

.offer-search-result {
    display: flex;
    gap: 10px;
    margin: -2px 0 14px;
    align-items: center;
    justify-content: space-between;
}

.new-offer-barcode-question {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 18px;
    padding: clamp(20px, 4vw, 36px);
    align-items: center;
}

.new-offer-barcode-question h3 {
    margin: 3px 0 8px;
}

.new-offer-barcode-question p {
    margin-bottom: 0;
}

.new-offer-barcode-icon {
    display: grid;
    width: 56px;
    height: 56px;
    place-items: center;
    border-radius: 14px;
    color: var(--paper);
    background: var(--ink);
    font-size: 30px;
}

.new-offer-barcode-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.new-offer-barcode-saved {
    display: flex;
    gap: 12px;
    padding: 10px;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--paper);
}

.new-offer-barcode-saved div,
.new-offer-barcode-saved span {
    display: block;
}

.new-offer-barcode-saved span {
    color: var(--ink-soft);
    font-size: 13px;
}

/* ------------------------------------------------------- leitores de camera ---
   Palco escuro: a imagem da camera e o conteudo, entao a moldura clara some e
   sobram cantos em L, o veu externo e a faixa de estado. */

.barcode-scanner-dialog {
    width: min(94vw, 620px);
    max-width: none;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--white);
    background: #0e1826;
}

.barcode-scanner-dialog::backdrop {
    background: rgb(10 27 48 / 78%);
}

.barcode-scanner-panel {
    display: grid;
    gap: 0;
    padding: 0;
}

.barcode-scanner-heading {
    display: grid;
    padding: 11px 12px;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
    justify-content: normal;
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.barcode-scanner-heading .eyebrow {
    margin: 0;
    color: rgba(255, 253, 248, 0.62);
}

.barcode-scanner-heading h2 {
    margin: 1px 0 0;
    color: var(--white);
    font-family: "Bitter", Georgia, serif;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.1;
}

.barcode-scanner-heading .button {
    color: var(--white);
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.22);
}

.barcode-scanner-heading .button:hover {
    background: rgba(255, 255, 255, 0.2);
}

.barcode-scanner-camera {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border: 0;
    border-radius: 0;
    background: #101d2e;
}

.barcode-scanner-camera video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Oito barras brancas desenham os quatro cantos em L; o veu externo vem do
   outline externo, que continua acompanhando qualquer tamanho de moldura. */
.barcode-scanner-guide {
    position: absolute;
    inset: 30% 8%;
    border: 0;
    border-radius: 4px;
    outline: 999px solid rgb(10 27 48 / 46%);
    background:
        linear-gradient(#fff, #fff) 0 0 / 26px 3px no-repeat,
        linear-gradient(#fff, #fff) 0 0 / 3px 26px no-repeat,
        linear-gradient(#fff, #fff) 100% 0 / 26px 3px no-repeat,
        linear-gradient(#fff, #fff) 100% 0 / 3px 26px no-repeat,
        linear-gradient(#fff, #fff) 0 100% / 26px 3px no-repeat,
        linear-gradient(#fff, #fff) 0 100% / 3px 26px no-repeat,
        linear-gradient(#fff, #fff) 100% 100% / 26px 3px no-repeat,
        linear-gradient(#fff, #fff) 100% 100% / 3px 26px no-repeat;
}

/* Linha de leitura: so o codigo de barras varre uma faixa horizontal. */
.barcode-scanner-guide::after {
    position: absolute;
    top: 50%;
    right: 8px;
    left: 8px;
    height: 2px;
    background: var(--coral);
    content: "";
}

.barcode-scanner-guide.withdrawal-qr-guide {
    width: min(62%, 280px);
    inset: 50% auto auto 50%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
}

.barcode-scanner-guide.withdrawal-qr-guide::after {
    display: none;
}

.barcode-scanner-status {
    min-height: 24px;
    margin: 0;
    padding: 11px 12px calc(11px + env(safe-area-inset-bottom));
    color: rgba(255, 253, 248, 0.72);
    background: rgba(255, 255, 255, 0.05);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.4;
    text-align: left;
}

.offer-tabs strong,
.offer-tabs span {
    padding: 12px 14px;
}

.offer-tabs strong {
    color: var(--coral-dark);
    border-bottom: 3px solid var(--coral);
}

.data-card-heading {
    display: flex;
    min-height: 60px;
    padding: 16px 18px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
}

.active-offers-heading {
    flex-wrap: wrap;
    gap: 8px 16px;
}

.active-offers-heading-group {
    display: flex;
    min-width: min(100%, 292px);
    flex: 1 1 300px;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.active-offers-heading-group > strong {
    flex: 0 0 auto;
    white-space: nowrap;
}

.active-offers-heading > .small-copy {
    min-width: 0;
    flex: 0 1 180px;
}

.active-offers-sort {
    display: flex;
    min-width: 0;
    flex: 0 0 auto;
}

.active-offers-sort select {
    width: auto;
    min-width: 0;
    height: 34px;
    min-height: 34px;
    padding: 0 9px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 13.5px;
    line-height: 1;
    color: var(--ink);
    background: var(--white);
}

.merchant-new-section .surface h3,
.merchant-new-section .summary-card h3,
.merchant-edit-section .surface h3 {
    font-size: clamp(28px, 3vw, 42px);
}

.scan-product img {
    width: 92px;
    height: 82px;
    object-fit: cover;
    border-radius: 9px;
}

.offer-form,
.qr-store-layout {
    margin-top: 30px;
}

.sidebar-logout {
    display: flex;
    width: 100%;
    min-height: 38px;
    padding-left: 0;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: var(--ink);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 6px;
}

.sidebar-logout:hover {
    background: var(--paper-deep);
}

.ledger-reference {
    margin: 0;
}

.preview-tag {
    position: absolute;
    right: 14px;
    bottom: 14px;
    padding: 7px 10px;
    color: var(--white);
    background: var(--ink);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 800;
}

.two-column {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
    gap: 24px;
    align-items: start;
}

.registration-title {
    max-width: 12ch;
}

.registration-form,
.registration-notice {
    margin-top: 34px;
}

.summary-card {
    padding: 24px;
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    background: var(--mustard);
}

.summary-line {
    display: flex;
    padding: 9px 0;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid rgba(19, 36, 58, 0.2);
}

.summary-line:last-child {
    border-bottom: 0;
}

.summary-list {
    display: grid;
    margin: 0;
    padding: 16px 18px;
    gap: 12px;
}

.summary-list > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, auto);
    align-items: start;
    gap: 12px;
}

.summary-list dt {
    color: var(--ink-soft);
}

.summary-list dd {
    min-width: 0;
    margin: 0;
    font-weight: 800;
    overflow-wrap: anywhere;
    text-align: right;
}

.qr-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 34px;
    align-items: center;
}

.fake-qr {
    display: grid;
    width: 250px;
    height: 250px;
    padding: 18px;
    place-items: center;
    border: 2px solid var(--ink);
    background:
        conic-gradient(from 90deg at 25% 25%, var(--ink) 0 25%, transparent 0 75%, var(--ink) 0) 0 0 / 42px 42px,
        conic-gradient(from 180deg at 75% 75%, transparent 0 25%, var(--ink) 0 50%, transparent 0) 8px 8px / 34px 34px,
        var(--white);
}

.fake-qr::after {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    content: "g";
    color: var(--white);
    background: var(--coral);
    border: 7px solid var(--white);
    border-radius: 50%;
    font-family: "Bitter", Georgia, serif;
    font-size: 36px;
    font-weight: 800;
}

.print-poster {
    max-width: 440px;
    margin-inline: auto;
    padding: 48px 36px;
    text-align: center;
    border: 3px solid var(--ink);
    background: var(--white);
}

.print-poster .fake-qr {
    width: 210px;
    height: 210px;
    margin: 22px auto;
}

.print-poster > img {
    width: 210px;
    height: 210px;
    margin: 22px auto;
    padding: 10px;
    border: 2px solid var(--ink);
    background: var(--white);
}

.qr-poster-brand {
    justify-content: center;
    gap: 14px;
}

.qr-poster-brand .brand-logo {
    width: 64px;
    height: 64px;
    object-fit: contain;
}

.qr-store-name {
    margin: 24px 0 0;
}

.break-anywhere {
    overflow-wrap: anywhere;
}

.telegram-link-card {
    margin-top: 34px;
}

.telegram-status {
    margin-top: 24px;
}

.telegram-status-badge {
    margin-left: auto;
}

.telegram-qr {
    width: 250px;
    height: 250px;
    padding: 18px;
    object-fit: contain;
    border: 2px solid var(--ink);
    background: var(--white);
}

.telegram-actions {
    margin-top: 18px;
}

.store-hero {
    display: grid;
    margin-bottom: 30px;
    padding: clamp(14px, 2.5vw, 24px) clamp(20px, 5vw, 54px);
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 28px;
    border: 2px solid var(--ink);
    border-radius: 24px;
    background: var(--white);
}

/* Ficha da empresa no topo da vitrine: rotulo pequeno em maiusculas sobre o
   valor, em colunas que se acomodam a largura disponivel. */
.store-identity {
    display: grid;
    margin: 12px 0 0;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 8px 22px;
    font-size: 13px;
    line-height: 1.35;
}

.store-identity > div {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.store-identity dt {
    color: var(--ink-soft);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.store-identity dd {
    margin: 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.store-identity a {
    color: inherit;
}

.store-monogram {
    display: grid;
    width: 116px;
    height: 116px;
    place-items: center;
    color: var(--white);
    background: var(--coral);
    border: 2px solid var(--ink);
    border-radius: 50%;
    font-family: "Bitter", Georgia, serif;
    font-size: 44px;
    font-weight: 800;
}

.store-hours-summary {
    max-width: 76ch;
    margin: 22px 0 8px;
    color: var(--ink);
    line-height: 1.55;
}

.store-hours-separator {
    margin-inline: 0.5rem;
}

.modal-demo {
    display: grid;
    min-height: calc(100vh - 72px);
    padding: 40px 16px;
    place-items: center;
    background:
        linear-gradient(rgba(19, 36, 58, 0.7), rgba(19, 36, 58, 0.7)),
        url("/images/superofertas-hero-bd15f658.webp") center / cover;
}

.dialog {
    width: min(100%, 620px);
    padding: clamp(26px, 5vw, 44px);
    border: 2px solid var(--ink);
    border-radius: 24px;
    background: var(--paper);
}

.reservation-dialog {
    display: none;
}

.reservation-dialog h1 {
    font-size: 42px;
}

.reservation-dialog:target {
    position: fixed;
    z-index: 40;
    inset: 24px;
    display: block;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    margin: auto;
    outline: 100vmax solid rgba(19, 36, 58, 0.72);
}

.confirmation-code {
    margin: 22px 0;
    padding: 20px;
    text-align: center;
    border: 2px dashed var(--ink);
    border-radius: var(--radius);
    background: var(--white);
}

.confirmation-code strong {
    display: block;
    margin-top: 5px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: clamp(30px, 8vw, 46px);
    letter-spacing: 0.12em;
}

.consumer-confirmation-grid {
    display: grid;
    margin: 22px 0;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 22px;
    align-items: center;
}

.fake-qr.consumer-qr {
    width: 180px;
    height: 180px;
    padding: 12px;
    background-size: 31px 31px, 25px 25px;
}

img.consumer-qr {
    width: min(100%, 240px);
    padding: 12px;
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    background: var(--white);
}

.fake-qr.consumer-qr::after {
    width: 46px;
    height: 46px;
    border-width: 5px;
    font-size: 28px;
}

.scan-result {
    width: min(100%, 760px);
    margin-inline: auto;
}

.counter-title {
    font-size: clamp(40px, 7vw, 60px);
}

.counter-details {
    margin: 22px 0;
}

.counter-footnote,
.counter-summary {
    margin-top: 18px;
}

.counter-summary {
    padding: 20px;
}

.counter-centered {
    margin-inline: auto;
    text-align: center;
}

.counter-actions {
    justify-content: center;
}

.reservation-unavailable {
    display: none;
}

.reservation-unavailable:target {
    display: block;
}

body:has(.reservation-unavailable:target) #resgate-normal {
    display: none;
}

.scan-product {
    display: grid;
    padding: 20px 0;
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    border-block: 1px solid var(--line);
}

.scan-product .offer-thumb {
    width: 92px;
    height: 82px;
}

.admin-header {
    color: var(--white);
    background: var(--ink);
}

.admin-header .header-inner {
    min-height: 64px;
}

.admin-header .brand-logo {
    height: 48px;
}

.admin-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}

.admin-body .page-heading-row h1 {
    font-size: clamp(42px, 5vw, 54px);
}

.admin-view-pagamentos .admin-moderation-view,
.admin-view-pagamentos .admin-support-view,
.admin-view-moderacao .admin-payments-view,
.admin-view-moderacao .admin-support-view,
.admin-view-suporte .admin-payments-view,
.admin-view-suporte .admin-moderation-view {
    display: none;
}

.admin-payments-layout {
    align-items: start;
}

.admin-payment-shop,
.admin-payment-plan,
.admin-payment-validity {
    vertical-align: top;
}

.admin-payment-shop > * + *,
.admin-payment-plan > * + *,
.admin-payment-validity > * + * {
    margin-top: 3px;
}

.admin-payment-meta,
.admin-payment-date-range {
    display: block;
    color: var(--ink-soft);
    font-size: 12px;
    line-height: 1.35;
}

.admin-payment-effect {
    display: block;
    margin-top: 2px;
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
}

.admin-payment-date-label {
    color: var(--ink-soft);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.admin-payment-date-range {
    white-space: nowrap;
}

.admin-payment-context {
    display: grid;
    gap: 5px;
}

.admin-payment-context p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 12px;
    line-height: 1.35;
}

.admin-payment-context strong {
    color: var(--ink);
}

@media (min-width: 880px) {
    .admin-payments-layout {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    }
}

@media (max-width: 719px) {
    .admin-payment-date-range {
        white-space: normal;
    }
}

.admin-payment-history {
    overflow-x: auto;
}

.admin-payment-history .admin-payment-history-table {
    min-width: 1040px;
}

.admin-payment-history-table td {
    vertical-align: top;
    font-size: 12px;
}

.admin-payment-history-shop {
    min-width: 220px;
}

.admin-payment-history-payment {
    min-width: 160px;
}

@media (max-width: 719px) {
    .admin-payment-history .admin-payment-history-table {
        min-width: 0;
    }
}

.admin-payment-decision {
    min-width: 0;
}

.admin-receipt-preview {
    position: relative;
    display: block;
    min-height: 280px;
    overflow: hidden;
    border: 2px solid var(--ink);
    background: var(--cream);
}

.admin-receipt-preview img {
    width: 100%;
    height: 280px;
    object-fit: cover;
}

.admin-receipt-preview .preview-tag {
    position: absolute;
    top: 14px;
    right: auto;
    bottom: auto;
    left: 14px;
}

.admin-receipt-pdf {
    display: grid;
    place-content: center;
    gap: 10px;
    padding: 28px;
    color: var(--ink);
    text-align: center;
}

.admin-receipt-pdf-mark {
    justify-self: center;
    padding: 10px 14px;
    border: 2px solid var(--red);
    color: var(--red);
    font-weight: 900;
}

.admin-payment-decision .button-row form {
    flex: 1 1 190px;
}

.admin-payment-decision .button-row button {
    width: 100%;
}

.admin-moderation-view .tabs a {
    color: inherit;
    font-weight: 800;
    text-decoration: none;
}

.admin-moderation-view .tabs a.active {
    color: var(--white);
    background: var(--ink);
}

.admin-search {
    min-width: min(280px, 100%);
}

.admin-section-ofertas #lojas-admin,
.admin-section-ofertas #municipios-admin,
.admin-section-lojas #ofertas-admin,
.admin-section-lojas #municipios-admin,
.admin-section-municipios #ofertas-admin,
.admin-section-municipios #lojas-admin {
    display: none;
}

.admin-tab-panel:target {
    scroll-margin-top: 84px;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
}

.admin-table th,
.admin-table td {
    padding: 14px 12px;
    text-align: left;
    border-bottom: 1px solid var(--line);
}

.admin-table th {
    color: var(--ink-soft);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.admin-table td {
    font-size: 14px;
}

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

.footer {
    margin-top: 70px;
    padding: 34px 0;
    color: #d1d8e1;
    background: var(--ink);
}

.footer-inner {
    display: flex;
    width: min(calc(100% - 32px), var(--content));
    margin-inline: auto;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.footer .brand-logo {
    height: 48px;
}

@media (max-width: 960px) {
    .main-nav {
        display: none;
    }

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

    .hero-visual {
        min-height: 360px;
        grid-row: 1;
    }

    .hero-sticker {
        right: 28px;
        bottom: 330px;
    }

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

    .auth-layout {
        grid-template-columns: 1fr;
    }

    .auth-art {
        min-height: 360px;
    }

    .dashboard-shell {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: fixed;
        z-index: 40;
        width: min(76vw, 286px);
        transform: translateX(-105%);
        transition: transform 180ms ease;
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .sidebar:target {
        transform: translateX(0);
    }

    .sidebar-close {
        display: inline-flex;
    }

    /* Toque fora tambem fecha: o veu e uma ancora que troca o :target. */
    .sidebar:target ~ .sidebar-veil {
        position: fixed;
        z-index: 39;
        display: block;
        inset: 0;
        background: rgba(19, 36, 58, 0.44);
    }

    .mobile-menu-button {
        display: inline-flex;
    }

    .merchant-page-header {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .merchant-page-header-actions {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
    }

    .merchant-page-header-actions .mobile-menu-button {
        margin-right: auto;
    }

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

    .two-column {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 680px) {
    .cart-page .delivery-address > #endereco-entrega {
        display: grid;
        gap: 18px;
    }

    .reservation-dialog h1 {
        font-size: 36px;
    }

    .header-inner {
        min-height: 64px;
    }

    .header-actions .button.ghost {
        display: none;
    }

    .header-actions .button.ghost[data-pwa-header-install]:not([hidden]) {
        display: inline-flex;
    }

    .page-shell {
        width: min(calc(100% - 22px), var(--content));
        padding-top: 28px;
    }

    .page-shell.storefront-page {
        padding-top: 8px;
    }

    .hero {
    }

    .hero-copy {
        padding: 28px 22px 34px;
    }

    .hero-visual {
        min-height: 260px;
    }

    .hero-sticker {
        right: 18px;
        bottom: 236px;
        width: 90px;
        height: 90px;
        font-size: 15px;
    }

    .search-panel {
        grid-template-columns: 1fr;
        margin-top: 18px;
    }

    .product-grid,
    .plan-grid,
    .form-grid,
    .stats-grid {
        grid-template-columns: 1fr;
    }

    .product-art,
    .product-gallery-trigger {
        min-height: 160px;
        height: 160px;
    }

    .photo-fields {
        grid-template-columns: 1fr;
    }

    .section {
        margin-top: 48px;
    }

    .section-heading,
    .page-heading-row,
    .dashboard-topbar,
    .footer-inner {
        align-items: flex-start;
        flex-direction: column;
    }

    .auth-art {
        min-height: 280px;
    }

    .auth-panel {
        padding: 34px 22px 70px;
    }

    .dashboard-main {
        padding: 24px 14px 80px;
    }

    .balance-pill {
        margin-left: 0;
        font-size: 13px;
    }

    .reservation-card {
        grid-template-columns: 1fr;
    }

    .reservation-card.reservation-card-finalizada {
        grid-template-columns: minmax(0, 1fr) minmax(118px, 42%);
        align-items: start;
        gap: 12px;
    }

    .reservation-card-finalizada .reservation-card-meta {
        align-self: start;
        text-align: right;
    }

    .ledger-row {
        grid-template-columns: 1fr auto;
    }

    .ledger-row > :last-child {
        display: none;
    }

    .qr-layout,
    .store-hero,
    .consumer-confirmation-grid {
        grid-template-columns: 1fr;
    }

    .fake-qr {
        width: min(100%, 250px);
    }

    .admin-table {
        min-width: 700px;
    }

    .data-card.table-scroll {
        overflow-x: auto;
    }
}

@page {
    size: A4 portrait;
    margin: 12mm;
}

@media print {
    .site-header,
    .sidebar,
    .dashboard-topbar,
    .no-print {
        display: none !important;
    }

    body,
    .dashboard-main {
        background: white;
    }

    .dashboard-shell {
        display: block;
    }

    .print-poster {
        margin-top: 1cm;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }
}

/* Compatibilidade temporária para templates funcionais anteriores ao guia visual. */
.pagina {
    width: min(calc(100% - 32px), var(--content));
    margin-inline: auto;
    padding-block: 42px 80px;
}

.pagina-estreita {
    width: min(calc(100% - 32px), 620px);
}

.cabecalho-lojista {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.cabecalho-lojista form {
    display: block;
}

.cartao {
    display: grid;
    gap: 12px;
    margin-top: 24px;
    padding: clamp(22px, 4vw, 38px);
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    background: var(--white);
}

.cartao > :first-child,
.cartao > :last-child {
    margin-block: 0;
}

.marca {
    margin-bottom: 8px;
    color: var(--coral-dark);
    font-weight: 800;
    letter-spacing: -0.02em;
}

form {
    display: grid;
    gap: 16px;
}

fieldset {
    display: grid;
    min-width: 0;
    gap: 10px;
    margin: 0;
    padding: 18px;
    border: 2px solid var(--line);
    border-radius: var(--radius-small);
    background: var(--white);
}

input,
select,
textarea {
    min-width: 0;
    max-width: 100%;
}

.lista-cidades,
.grade-ofertas,
.grade-admin {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    padding: 0;
    list-style: none;
}

.lista-cidades a {
    display: block;
    min-height: 46px;
    padding: 14px;
    border: 2px solid var(--ink);
    border-radius: var(--radius-small);
    background: var(--white);
}

.erro,
.sucesso,
.aviso {
    padding: 16px 18px;
    border: 2px solid;
    border-radius: var(--radius-small);
}

.erro {
    border-color: var(--red);
    background: #fff0ee;
}

.sucesso {
    border-color: var(--green);
    background: #eaf7ef;
}

.aviso {
    border-color: #b77b00;
    background: #fff4d4;
}

.carregar-mais {
    width: 100%;
    margin-top: 24px;
}

.oferta img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-small);
}

.oferta strong {
    display: block;
    color: var(--coral-dark);
    font-family: "Bitter", Georgia, serif;
    font-size: 22px;
}

.slogan {
    font-family: "Bitter", Georgia, serif;
    font-size: 20px;
    font-weight: 800;
}

.material-qr {
    text-align: center;
}

.material-qr .brand {
    justify-content: center;
}

.material-qr img {
    width: min(100%, 352px);
    margin-inline: auto;
    image-rendering: pixelated;
}

@media (max-width: 680px) {
    .pagina {
        width: min(calc(100% - 22px), var(--content));
        padding-top: 28px;
    }

    .cabecalho-lojista {
        align-items: stretch;
        flex-direction: column;
    }

    .cabecalho-lojista button {
        width: 100%;
    }
}

@media print {
    .nao-imprimir {
        display: none !important;
    }

    .material-qr {
        width: 100%;
        padding: 0;
    }
}

/* ============================================================================
   LAYOUT V2 — docs/proposta-mudanca-layout-estilo/roteiro-pratico.md
   Breakpoint canonico: 880px.
   Abaixo: abas no rodape, cartoes compactos e bottom sheets.
   Acima: barra lateral, tabela e modal.
   A identidade nao muda: mesmos tokens, Bitter em titulo e preco,
   DM Sans em corpo e nome de produto.
   ============================================================================ */

:root {
    --ink-mute: #6b7c92;
    --line-soft: #e8dfcd;
    --radius-pill: 999px;
    --tap: 48px;
}

/* ------------------------------------------------------ fatos operacionais ---
   Mantem metadados em uma linha, mas sem a silhueta oval dos botoes. */

.chip-row {
    display: flex;
    margin: 0;
    padding: 0;
    align-items: center;
    gap: 6px 10px;
    flex-wrap: wrap;
    list-style: none;
}

.chip-row.scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: thin;
}

.chip {
    --chip-accent: var(--signal-blue);
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 5px;
    padding: 5px 8px 5px 13px;
    border: 0;
    border-bottom: 2px solid var(--ink);
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.chip::before {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 0;
    width: 5px;
    background: var(--chip-accent);
    content: "";
}

.chip-row > .chip:nth-child(4n + 1) { --chip-accent: var(--signal-blue); }
.chip-row > .chip:nth-child(4n + 2) { --chip-accent: var(--signal-orange); }
.chip-row > .chip:nth-child(4n + 3) { --chip-accent: var(--signal-green); }
.chip-row > .chip:nth-child(4n + 4) { --chip-accent: var(--signal-violet); }

.chip.on {
    --chip-accent: var(--ink);
    color: var(--ink);
    background: transparent;
    border-color: var(--ink);
}

.chip.warn {
    --chip-accent: var(--signal-orange);
    color: var(--ink);
    background: transparent;
    border-color: var(--ink);
}

.chip.ok {
    --chip-accent: var(--signal-green);
    color: var(--ink);
    background: transparent;
    border-color: var(--ink);
}

.chip.hot {
    --chip-accent: var(--signal-coral);
    color: var(--ink);
    background: transparent;
    border-color: var(--ink);
}

/* Chip clicavel e acao: volta ao formato oval dos demais botoes. */
a.chip,
button.chip {
    min-height: 38px;
    padding: 7px 12px;
    border: 2px solid var(--ink);
    border-radius: var(--radius-pill);
    background: var(--white);
    cursor: pointer;
}

a.chip::before,
button.chip::before {
    display: none;
}

a.chip.on,
button.chip.on {
    color: var(--white);
    background: var(--ink);
}

a.chip.warn,
button.chip.warn {
    background: var(--signal-yellow);
}

a.chip.ok,
button.chip.ok {
    background: var(--signal-green);
}

a.chip.hot,
button.chip.hot {
    background: var(--signal-coral);
}

/* ------------------------------------------------------- contagem regressiva */

.countdown {
    font-variant-numeric: tabular-nums;
    font-weight: 800;
}

/* -------------------------------------------------------- barra de abas ---
   5 destinos fixos no rodape. Substitui o drawer no celular. */

.tabbar {
    display: none;
}

.tabbar-glyph {
    font-size: 19px;
    line-height: 1;
}

.tabbar-badge {
    position: absolute;
    top: 2px;
    right: 18%;
    display: grid;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    place-items: center;
    color: var(--white);
    background: var(--coral);
    border: 1.5px solid var(--ink);
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 800;
}

/* -------------------------------------------------------------- KPI 2x2 --- */

.kpi-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.kpi {
    display: grid;
    min-height: 68px;
    padding: 9px 11px;
    align-content: center;
    gap: 2px;
    border: 1px solid var(--line);
    border-radius: var(--radius-small);
    background: var(--white);
}

.kpi strong {
    font-family: "Bitter", Georgia, serif;
    font-size: 24px;
    line-height: 1;
}

.kpi span {
    color: var(--ink-soft);
    font-size: 12px;
    font-weight: 700;
}

/* ------------------------------------------------------ controle segmentado */

.segmented {
    display: grid;
    grid-auto-flow: column;
    gap: 3px;
    padding: 3px;
    background: var(--paper-deep);
    border: 2px solid var(--ink);
    border-radius: var(--radius-pill);
}

.segmented a {
    display: grid;
    min-height: 40px;
    padding: 6px 8px;
    place-items: center;
    color: var(--ink-soft);
    border-radius: var(--radius-pill);
    font-size: 13px;
    font-weight: 800;
    text-align: center;
}

.segmented a[aria-current="page"] {
    color: var(--ink);
    background: var(--white);
}

/* ------------------------------------------------------------ bottom sheet ---
   <dialog> nativo. Sem JS, os gatilhos degradam para ancora, que e o
   comportamento que ja existia. */

.sheet-dialog {
    width: min(100%, 560px);
    max-width: 100%;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
}

/* --------------------------------------------- sheet unico de confirmacao ---
   Acao irreversivel: marca de alerta, olho curto e titulo serifado antes da
   pergunta, para a decisao nao depender so do texto corrido. */

#sheet-confirmacao .sheet-heading {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px;
}

.sheet-mark {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    color: var(--red);
    background: #fff0ee;
    border-radius: 50%;
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
}

.sheet-eyebrow {
    margin: 0;
    color: var(--ink-soft);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

#sheet-confirmacao .sheet-heading h2 {
    margin: 1px 0 0;
    font-family: "Bitter", Georgia, serif;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.1;
}

.sheet-alvo {
    display: grid;
    padding-top: 12px;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    border-top: 1px solid var(--line-soft);
}

.sheet-alvo[hidden] {
    display: none;
}

.sheet-alvo img {
    width: 40px;
    height: 40px;
    background: var(--paper-deep);
    border-radius: var(--radius-small);
    object-fit: cover;
}

.sheet-alvo h3 {
    margin: 0;
    font-family: "Bitter", Georgia, serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.15;
}

.sheet-alvo p {
    margin: 1px 0 0;
    color: var(--ink-soft);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

/* Perde e mantem lado a lado: a decisao precisa dos dois lados. */
.sheet-efeitos {
    display: grid;
    margin: 0;
    padding: 12px 0 0;
    gap: 5px;
    border-top: 1px solid var(--line-soft);
    list-style: none;
}

.sheet-efeitos[hidden] {
    display: none;
}

.sheet-efeito {
    position: relative;
    padding-left: 21px;
    color: var(--ink-soft);
    font-size: 12px;
    line-height: 1.35;
}

.sheet-efeito::before {
    position: absolute;
    top: 2px;
    left: 0;
    display: grid;
    width: 14px;
    height: 14px;
    place-items: center;
    border-radius: 50%;
    font-size: 9px;
    font-weight: 800;
}

.sheet-efeito.perde::before {
    color: var(--red);
    background: #fff0ee;
    content: "\00d7";
}

.sheet-efeito.mantem::before {
    color: var(--green);
    background: #e6f4ec;
    content: "\2713";
}

/* Palavra digitada: separada do resto e com a cor do risco. */
.sheet-risco {
    padding: 9px 10px;
    background: #fff8f7;
    border: 1px solid var(--red);
    border-radius: var(--radius-small);
}

.sheet-risco[hidden] {
    display: none;
}

.sheet-risco-rotulo {
    margin: 0;
    color: var(--red);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.sheet-risco-texto {
    margin: 2px 0 0;
    color: var(--ink-soft);
    font-size: 11.5px;
    line-height: 1.35;
}

.sheet-risco-texto b {
    color: var(--ink);
    font-weight: 800;
    letter-spacing: 0.04em;
}

.sheet-risco-campo {
    width: 100%;
    height: 38px;
    margin-top: 6px;
    padding: 0 9px;
    color: var(--ink);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-small);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sheet-risco-campo:focus {
    border-color: var(--ink);
    outline: 2px solid rgba(19, 36, 58, 0.1);
    outline-offset: 0;
    outline: 0;
}

#sheet-confirmacao .button.danger:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

#sheet-confirmacao [data-confirmacao-mensagem] {
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid var(--line-soft);
    color: var(--ink-soft);
    font-size: 13px;
    line-height: 1.45;
}

#sheet-confirmacao .button-row {
    padding-top: 12px;
    border-top: 1px solid var(--line-soft);
}

#sheet-confirmacao .sticky-cta {
    background: linear-gradient(to top, var(--white) 72%, rgba(255, 253, 248, 0));
}

/* Superficie clara e sem relevo: o alerta vem do texto e da cor do botao. */
#sheet-confirmacao .button {
    border-radius: 6px;
}

#sheet-confirmacao .button.danger {
    color: #fff;
    background: var(--red);
    border-color: #8f221e;
}

#sheet-confirmacao .button.danger:hover {
    background: #8f221e;
}

.sheet-dialog[open] {
    display: block;
}

.sheet-dialog::backdrop {
    background: rgba(19, 36, 58, 0.72);
}

.sheet-body {
    display: grid;
    max-height: min(82dvh, 720px);
    padding: 18px 20px 20px;
    overflow-y: auto;
    gap: 14px;
}

.sheet-description {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--ink);
    font-size: 15px;
    line-height: 1.5;
    white-space: pre-wrap;
}

.sheet-grabber {
    width: 44px;
    height: 4px;
    margin: 0 auto;
    background: var(--line);
    border-radius: var(--radius-pill);
}

.sheet-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

[id^="sheet-descricao-"] .sheet-heading h2 {
    min-width: 0;
    overflow-wrap: anywhere;
}

.sheet-produto {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.sheet-produto img {
    width: 64px;
    height: 64px;
    border: 2px solid var(--ink);
    border-radius: 10px;
    background: var(--paper-deep);
    object-fit: cover;
}

.sticky-cta {
    position: sticky;
    bottom: 0;
    padding-top: 10px;
    background: linear-gradient(to top, var(--white) 72%, rgba(255, 253, 248, 0));
}

/* ------------------------------------------------------------ zona de risco ---
   Acao destrutiva sai do fluxo principal: uma acao primaria por bloco. */

.risk-zone {
    border: 2px solid var(--red);
    border-radius: var(--radius-small);
    background: #fff7f6;
}

.risk-zone > summary {
    padding: 13px 16px;
    color: var(--red);
    font-weight: 800;
    cursor: pointer;
    list-style-position: inside;
}

.risk-zone > summary::marker {
    color: var(--red);
}

.risk-zone > .risk-body {
    display: grid;
    padding: 0 16px 16px;
    gap: 14px;
}

.risk-zone .button.danger {
    color: var(--red);
    background: var(--white);
    border-color: var(--red);
}

/* Bloco recolhivel neutro: extrato, material de impressao, historico. */
.disclosure {
    border: 2px solid var(--line);
    border-radius: var(--radius-small);
    background: var(--white);
}

.disclosure > summary {
    min-height: var(--tap);
    padding: 13px 16px;
    display: flex;
    align-items: center;
    font-weight: 800;
    cursor: pointer;
}

.disclosure > .disclosure-body {
    padding: 0 16px 16px;
}

/* ------------------------------------------------------- campo copiavel --- */

.copy-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 8px 8px 8px 12px;
    border: 2px solid var(--ink);
    border-radius: var(--radius-small);
    background: var(--white);
}

.copy-field code {
    overflow: hidden;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.copy-field .copy-success {
    border-color: var(--green);
    color: var(--green);
}

/* --------------------------------------------------------- mostrar senha --- */

.password-field {
    position: relative;
}

.password-field input {
    padding-right: 40px;
}

.password-toggle {
    position: absolute;
    right: 0;
    bottom: 0;
    display: grid;
    width: 36px;
    min-height: 32px;
    height: 32px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--ink-soft);
}

.password-toggle svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.password-toggle:hover {
    color: var(--ink);
}

.password-toggle .icone-oculto {
    display: none;
}

.password-toggle[aria-pressed="true"] .icone-visivel {
    display: none;
}

.password-toggle[aria-pressed="true"] .icone-oculto {
    display: block;
}

/* Login — layout compacto: campos baixos, botao retangular sem sombra e
   aviso tipografico no lugar do card com faixa lateral. */
.site-header.auth-header .header-inner {
    min-height: 56px;
    gap: 12px;
}

.site-header.auth-header .brand-logo {
    height: 42px;
}

.site-header.auth-header .small-copy {
    font-size: 12.5px;
}

.auth-panel .form-stack {
    gap: 10px;
}

.auth-panel .auth-title {
    margin-block: 0;
}

.auth-panel .eyebrow {
    margin-bottom: 2px;
    font-size: 10.5px;
    letter-spacing: 0.16em;
}

.auth-panel .lead {
    margin-block: 3px 0;
    font-size: 13.5px;
}

/* As classes utilitarias `.erro`, `.sucesso` e `.aviso` desenham caixa: borda
   de 2px nos quatro lados, fundo e raio. Quando o mesmo elemento tambem e um
   aviso tipografico, sobrava a caixa nas laterais e so a linha de baixo ficava
   com 1px, o que aparecia como borda inferior mais fina. Zerar a caixa aqui
   devolve a regra fina em todos os estados. */
.auth-flash {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0 0 9px;
    border: 0;
    border-radius: 0;
    background: transparent;
    align-items: baseline;
    gap: 0 6px;
    border-bottom: 1px solid var(--line);
    font-size: 13px;
    line-height: 1.35;
}

.auth-flash strong {
    font-weight: 800;
}

.auth-flash span {
    color: var(--ink-soft);
}

.auth-flash.erro {
    border-bottom-color: var(--coral);
}

.auth-flash.erro strong {
    color: var(--coral-dark);
}

.auth-flash.ok {
    border-bottom-color: var(--green);
}

.auth-flash.ok strong {
    color: var(--green);
}

.auth-flash.aviso {
    border-bottom-color: #b77b00;
}

.auth-flash.aviso strong {
    color: #b77b00;
}

.auth-panel .field {
    gap: 3px;
}

.auth-panel .field label,
.auth-panel .field-label {
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.2;
}

.auth-panel .field input {
    min-height: 32px;
    padding: 0 9px;
    border-width: 1px;
    border-color: var(--line);
    border-radius: 8px;
    font-size: 13.5px;
    line-height: 1;
}

.auth-panel .field input:focus {
    border-color: var(--ink);
    outline: 2px solid rgba(19, 36, 58, 0.12);
    outline-offset: 0;
}

.auth-panel .button {
    min-height: 42px;
    margin-top: 4px;
    border-width: 1px;
    border-radius: 6px;
    font-size: 15px;
}

.auth-panel .button:hover {
    transform: none;
}

.auth-panel .button.primary {
    border-color: var(--coral-dark);
}

.auth-panel .button.primary:hover {
    background: var(--coral-dark);
}

.auth-panel .divider {
    margin-block: 4px 0;
}

.auth-aside-compacta {
    display: none;
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper-deep);
    color: var(--ink-soft);
    font-size: 12px;
    line-height: 1.4;
}

.auth-aside-compacta strong {
    display: block;
    color: var(--ink);
    font-size: 12.5px;
}

@media (max-width: 879px) {
    .auth-panel {
        align-content: center;
        padding: 18px 14px 24px;
    }

    .auth-panel .auth-title {
        font-size: 32px;
        line-height: 1.05;
    }

    .auth-aside-compacta {
        display: block;
    }
}

/* -------------------------------------------------------- passos 1-2-3 --- */

.step-head {
    display: flex;
    margin-bottom: 8px;
    align-items: center;
    gap: 9px;
    color: var(--ink-soft);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.step-head i {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    color: var(--white);
    background: var(--ink);
    border-radius: 50%;
    font-size: 12px;
    font-style: normal;
}

/* ---------------------------------------------------- publicar nova oferta ---
   Os quatro cartoes reproduzem a proposta mobile sem mudar o contrato POST. */

.new-offer-fields {
    gap: 12px;
}

.new-offer-card {
    display: grid;
    padding: 12px;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-small);
    background: var(--white);
}

.new-offer-card .step-head {
    margin-bottom: 0;
}

.new-offer-photo-slots {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.new-offer-photo-slot {
    position: relative;
    display: grid;
    aspect-ratio: 1;
    overflow: hidden;
    place-items: center;
    border: 1.5px dashed var(--line);
    border-radius: var(--radius-small);
    color: var(--ink-soft);
    background: var(--white);
    cursor: pointer;
}

.new-offer-photo-slot:focus-within {
    outline: 3px solid var(--mustard);
    outline-offset: 2px;
}

.new-offer-photo-slot input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

.edit-offer-photo-trigger {
    position: absolute;
    inset: 0;
    display: grid;
    width: 100%;
    height: 100%;
    padding: 0;
    place-items: center;
    overflow: hidden;
    color: inherit;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.new-offer-photo-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.edit-offer-photo-slot .new-offer-photo-image {
    display: block;
    min-width: 0;
    min-height: 0;
    object-position: center;
}

.new-offer-photo-image[hidden],
.new-offer-photo-image.is-empty {
    display: none;
}

.new-offer-photo-empty {
    display: grid;
    place-items: center;
    font-size: 11px;
    line-height: 1.15;
    text-align: center;
}

.new-offer-photo-empty b {
    font-size: 17px;
    font-weight: 500;
}

.new-offer-photo-slot.is-filled {
    border-style: solid;
}

.new-offer-photo-slot.is-filled .new-offer-photo-empty {
    display: none;
}

.edit-offer-photo-remove {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 2;
    display: none;
    width: 28px;
    min-width: 28px;
    height: 28px;
    min-height: 28px;
    padding: 6px;
    place-items: center;
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    background: rgba(19, 36, 58, 0.82);
    cursor: pointer;
}

.new-offer-photo-slot.is-filled .edit-offer-photo-remove {
    display: grid;
}

.edit-offer-photo-remove svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.edit-offer-photo-remove:focus-visible,
.edit-offer-photo-trigger:focus-visible {
    outline: 3px solid var(--mustard);
    outline-offset: -3px;
}

.new-offer-photo-actions {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}

.new-offer-photo-actions .button {
    min-height: 38px;
    padding: 7px 12px;
    color: var(--ink);
    background: var(--white);
}

.new-offer-photo-actions .button.is-selected {
    color: var(--white);
    border-color: var(--ink);
    background: var(--ink);
}

.new-offer-help {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
}

/* --------------------------------------------------------- editor pos-foto ---
   Um unico dialogo atende os tres slots de nova oferta e de troca. A moldura
   fica em HTML para manter alcas, foco e gestos independentes da imagem. */

body.crop-editor-open {
    overflow: hidden;
}

.crop-editor-dialog {
    width: min(calc(100% - 32px), 780px);
    height: min(92dvh, 820px);
    max-width: none;
    max-height: none;
    margin: auto;
    padding: 0;
    overflow: hidden;
    color: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #0e1826;
}

.crop-editor-dialog[open] {
    display: block;
}

.crop-editor-dialog::backdrop {
    background: rgba(19, 36, 58, 0.78);
    backdrop-filter: blur(3px);
}

.crop-editor-shell {
    display: grid;
    height: 100%;
    grid-template-rows: auto minmax(0, 1fr) auto;
}

.crop-editor-header {
    display: grid;
    padding: 11px 12px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px;
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.crop-editor-header .eyebrow {
    margin: 0;
    color: rgba(255, 253, 248, 0.62);
}

.crop-editor-header h2 {
    margin: 1px 0 0;
    color: var(--white);
    font-family: "Bitter", Georgia, serif;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.1;
}

.crop-editor-hint {
    display: grid;
    margin: 3px 0 0;
    color: rgba(255, 253, 248, 0.62);
    font-size: 11.5px;
    line-height: 1.4;
}

.crop-editor-close {
    display: grid;
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    place-items: center;
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
}

.crop-editor-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.crop-editor-body {
    display: grid;
    min-height: 0;
    padding: 14px 12px;
    grid-template-rows: minmax(180px, 1fr) auto;
    gap: 10px;
    background: transparent;
}

.crop-editor-stage {
    position: relative;
    width: 100%;
    min-height: 180px;
    height: 100%;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-small);
    background:
        repeating-conic-gradient(rgba(255, 255, 255, 0.035) 0% 25%, transparent 0% 50%)
        50% / 18px 18px,
        #101820;
    touch-action: none;
    user-select: none;
}

.crop-editor-canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    pointer-events: none;
}

.crop-editor-box {
    position: absolute;
    z-index: 2;
    box-sizing: border-box;
    border: 2px solid #fff;
    outline: 9999px solid rgba(6, 13, 22, 0.62);
    border: 1px solid rgba(19, 36, 58, 0.75);
    cursor: move;
    outline: 0;
    touch-action: none;
}

.crop-editor-box::before,
.crop-editor-box::after {
    position: absolute;
    content: "";
    pointer-events: none;
}

.crop-editor-box::before {
    top: 33.333%;
    right: 0;
    bottom: 33.333%;
    left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.48);
    border-bottom: 1px solid rgba(255, 255, 255, 0.48);
}

.crop-editor-box::after {
    top: 0;
    right: 33.333%;
    bottom: 0;
    left: 33.333%;
    border-right: 1px solid rgba(255, 255, 255, 0.48);
    border-left: 1px solid rgba(255, 255, 255, 0.48);
}

.crop-editor-handle {
    position: absolute;
    z-index: 3;
    box-sizing: border-box;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    touch-action: none;
}

.crop-editor-handle::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    border: 0;
    border-radius: 3px;
    background: #fff;
    outline: 1.5px solid #0e1826;
    content: "";
    transform: translate(-50%, -50%);
}

.crop-editor-handle-ne::after,
.crop-editor-handle-nw::after,
.crop-editor-handle-se::after,
.crop-editor-handle-sw::after {
    background: var(--coral);
}

.crop-editor-handle-n,
.crop-editor-handle-s {
    left: 50%;
    transform: translateX(-50%);
}

.crop-editor-handle-e,
.crop-editor-handle-w {
    top: 50%;
    transform: translateY(-50%);
}

.crop-editor-handle-n { top: 0; }
.crop-editor-handle-s { bottom: 0; }
.crop-editor-handle-e { right: 0; }
.crop-editor-handle-w { left: 0; }
.crop-editor-handle-ne { top: 0; right: 0; }
.crop-editor-handle-nw { top: 0; left: 0; }
.crop-editor-handle-se { right: 0; bottom: 0; }
.crop-editor-handle-sw { bottom: 0; left: 0; }

.crop-editor-handle-n::after,
.crop-editor-handle-s::after {
    width: 24px;
    height: 4px;
    left: 50%;
    transform: translateX(-50%);
}

.crop-editor-handle-n::after {
    top: 0;
}

.crop-editor-handle-s::after {
    top: auto;
    bottom: 0;
}

.crop-editor-handle-e::after,
.crop-editor-handle-w::after {
    width: 4px;
    height: 24px;
    top: 50%;
    transform: translateY(-50%);
}

.crop-editor-handle-e::after {
    left: auto;
    right: 0;
}

.crop-editor-handle-w::after {
    left: 0;
}

.crop-editor-handle-ne::after {
    top: 0;
    right: 0;
    left: auto;
    transform: none;
}

.crop-editor-handle-nw::after {
    top: 0;
    left: 0;
    transform: none;
}

.crop-editor-handle-se::after {
    top: auto;
    right: 0;
    bottom: 0;
    left: auto;
    transform: none;
}

.crop-editor-handle-sw::after {
    top: auto;
    bottom: 0;
    left: 0;
    transform: none;
}

/* Coluna unica encostada no canto: o polegar alcanca sem cobrir a moldura. */
.crop-editor-zoom {
    position: absolute;
    z-index: 4;
    right: 12px;
    bottom: 12px;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    background: rgba(14, 24, 38, 0.78);
    backdrop-filter: blur(4px);
}

.crop-editor-rotate {
    position: absolute;
    z-index: 4;
    box-sizing: border-box;
    bottom: 12px;
    left: 12px;
    display: grid;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    place-items: center;
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    background: rgba(14, 24, 38, 0.78);
    font-size: 25px;
    font-weight: 700;
    line-height: 1;
    backdrop-filter: blur(4px);
}

.crop-editor-rotate:hover {
    background: rgba(255, 255, 255, 0.14);
}

.crop-editor-rotate:disabled {
    opacity: 0.35;
}

.crop-editor-zoom-button {
    display: grid;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    place-items: center;
    color: var(--white);
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
}

.crop-editor-zoom-button + .crop-editor-zoom-button {
    border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.crop-editor-zoom-button:hover {
    background: rgba(255, 255, 255, 0.14);
}

.crop-editor-zoom-button[aria-disabled="true"] {
    opacity: 0.35;
}

.crop-editor-status {
    display: grid;
    min-height: 0;
    margin: 0;
    padding: 8px 10px;
    grid-template-columns: minmax(0, 1fr);
    color: #ffe4e0;
    background: rgba(185, 49, 44, 0.22);
    border: 1px solid rgba(255, 111, 97, 0.55);
    border-radius: var(--radius-small);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
}

.crop-editor-status:empty {
    display: none;
}

.crop-editor-footer {
    display: flex;
    padding: 11px 12px calc(11px + env(safe-area-inset-bottom));
    justify-content: flex-end;
    gap: 8px;
    background: rgba(255, 255, 255, 0.05);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Botoes claros nao sobrevivem ao palco escuro: contorno leitoso e coral. */
.crop-editor-footer .button {
    color: var(--white);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.22);
}

.crop-editor-footer .button:hover {
    background: rgba(255, 255, 255, 0.18);
}

.crop-editor-footer .button.primary {
    color: #fff;
    background: var(--coral);
    border-color: var(--coral-dark);
}

.crop-editor-footer .button.primary:hover {
    background: var(--coral-dark);
}

.crop-editor-footer .button:disabled {
    opacity: 0.45;
}

.crop-editor-footer .crop-editor-confirm {
    min-width: 150px;
}

.crop-editor-dialog button:focus-visible,
.crop-editor-box:focus-visible {
    outline: 3px solid var(--mustard);
    outline-offset: 2px;
}

.crop-editor-dialog button:disabled {
    cursor: wait;
}

@media (max-width: 879px) {
    .crop-editor-dialog {
        width: 100%;
        height: 100dvh;
        max-height: none;
        border: 0;
        border-radius: 0;
    }

    .crop-editor-body {
        padding: 12px 10px;
        grid-template-rows: minmax(180px, 1fr) auto;
        overflow-y: auto;
    }

    .crop-editor-footer {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .crop-editor-footer .crop-editor-confirm {
        width: 100%;
        min-width: 0;
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .crop-editor-footer [data-photo-crop-cancel] {
        grid-column: 1;
        grid-row: 2;
    }

    .crop-editor-footer [data-photo-crop-retake] {
        grid-column: 2;
        grid-row: 2;
    }
}

/* Cada campo mantem a propria altura: a mensagem de erro de um lado nao pode
   esticar o campo do lado. */
.new-offer-price-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 8px;
}

.new-offer-money-control {
    display: flex;
    min-height: var(--tap);
    align-items: center;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-small);
    background: var(--white);
}

.new-offer-money-control:focus-within {
    border-color: var(--ink);
    outline: 3px solid rgba(245, 184, 55, 0.3);
}

.new-offer-money-control > span {
    padding-left: 10px;
    color: var(--ink-mute);
    font-size: 13px;
    white-space: nowrap;
}

.new-offer-money-control input {
    min-width: 0;
    min-height: 46px;
    padding: 9px 8px 9px 4px;
    border: 0;
    outline: 0;
}

.new-offer-money-control input:focus {
    border: 0;
    outline: 0;
}

.new-offer-live-row,
.new-offer-limit-row {
    display: flex;
    min-height: 28px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
}

.new-offer-limit-toggle > span {
    display: inline-flex;
    min-height: 28px;
    padding: 5px 10px;
    align-items: center;
    color: var(--white);
    border-radius: var(--radius-pill);
    background: var(--ink);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.new-offer-live-price {
    color: var(--ink);
    font-family: "Bitter", Georgia, serif;
    font-size: 17px;
    font-weight: 800;
    white-space: nowrap;
}

.new-offer-product .field {
    gap: 5px;
}

.new-offer-product .field-hint {
    font-size: 11px;
}

.new-offer-product input[data-live-title] {
    font-size: 14px;
}

/* A line-height de 30px centralizava a primeira linha na altura de 32px, mas
   abria um vao enorme entre as linhas seguintes. O recuo agora vem do padding
   e o entrelinhas volta ao normal. */
.new-offer-product textarea[data-live-description],
.merchant-edit-section textarea[data-live-description] {
    min-height: 32px;
    height: 32px;
    padding: 6px 9px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 13.5px;
    line-height: 18px;
    overflow-y: hidden;
    resize: none;
}

.new-offer-duration {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.new-offer-duration-options {
    display: flex;
    width: 100%;
    max-width: 100%;
    margin-top: 5px;
    padding: 0 0 3px;
    gap: 6px;
    overflow-x: auto;
    contain: inline-size paint;
    scrollbar-width: thin;
}

.new-offer-duration-option {
    position: relative;
    flex: 0 0 auto;
    cursor: pointer;
}

.new-offer-duration-option span {
    display: inline-flex;
    min-height: 38px;
    padding: 7px 11px;
    align-items: center;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--white);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.new-offer-duration-option input:checked + span {
    color: var(--white);
    border-color: var(--ink);
    background: var(--ink);
}

.new-offer-duration-option input:focus-visible + span {
    outline: 3px solid var(--mustard);
    outline-offset: 2px;
}

@media (max-width: 680px) {
    .new-offer-duration-options {
        display: grid;
        padding-bottom: 0;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        overflow: visible;
        contain: none;
    }

    .new-offer-duration-option {
        min-width: 0;
    }

    .new-offer-duration-option span {
        width: 100%;
        min-height: var(--tap);
        padding-inline: 5px;
        justify-content: center;
    }
}

.new-offer-limit-toggle {
    cursor: pointer;
}

.new-offer-limit-field[hidden] {
    display: none;
}

.new-offer-preview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 8px;
}

.new-offer-preview-card {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-small);
    background: var(--white);
}

.new-offer-preview-art {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--paper-deep);
}

.new-offer-preview-art img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.new-offer-preview-art img[hidden],
.new-offer-preview-discount[hidden] {
    display: none;
}

.new-offer-preview-discount {
    position: absolute;
    left: 7px;
    bottom: 7px;
    padding: 4px 12px 4px 7px;
    color: var(--ink);
    border-radius: 0;
    background: var(--signal-coral);
    clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 50%, 100% 100%, 0 100%);
    font-size: 10px;
    font-weight: 800;
}

.new-offer-preview-body {
    display: grid;
    padding: 7px 8px 9px;
    gap: 4px;
}

.new-offer-preview-duration {
    width: max-content;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: var(--ink-soft);
    background: transparent;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.35;
}

.new-offer-preview-duration.ok {
    color: var(--green);
}

.new-offer-preview-duration.warn {
    color: #835a00;
}

.new-offer-preview-duration.hot {
    color: var(--coral-dark);
}

.new-offer-preview-title {
    display: -webkit-box;
    min-height: 32px;
    margin: 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
}

.new-offer-preview-old {
    color: var(--ink-soft);
    font-size: 0.72rem;
    text-decoration: line-through;
    white-space: nowrap;
}

.new-offer-preview-price {
    font-family: "Bitter", Georgia, serif;
    font-size: 19px;
    line-height: 1;
}

.new-offer-preview-body .muted {
    margin: 2px 0 0;
    font-size: 10px;
    line-height: 1.35;
}

.new-offer-preview-note {
    display: flex;
    padding: 12px 10px;
    align-items: flex-start;
    gap: 8px;
    border: 1px solid #b9cee4;
    border-radius: var(--radius-small);
    background: #edf5fc;
    font-size: 12px;
    line-height: 1.45;
}

.new-offer-preview-note > span {
    color: #32628f;
}

.new-offer-preview-note p {
    margin: 0;
}

/* --------------------------------------------------------- editar oferta ---
   No celular, referencia atual, regra, fotos e dados seguem a proposta. */

.edit-offer-layout {
    display: grid;
    gap: 12px;
}

/* Editar oferta — layout compacto: a previa do feed continua inteira, o resto
   perde altura (campos baixos, botoes retangulares, zona de risco em linha). */
.merchant-edit-section .page-heading-row {
    align-items: flex-start;
    gap: 10px;
}

.merchant-edit-section .page-heading-row .eyebrow {
    margin-bottom: 1px;
    font-size: 10.5px;
    letter-spacing: 0.16em;
}

.merchant-edit-section .page-heading-row .dashboard-title {
    margin-block: 0;
    font-size: 23px;
    line-height: 1.1;
}

.merchant-edit-section .page-heading-row .lead {
    margin-block: 2px 0;
    font-size: 12.5px;
}

.merchant-edit-section .status-badge {
    min-height: 22px;
    padding: 4px 14px 4px 8px;
    clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 50%, 100% 100%, 0 100%);
    font-size: 10.5px;
}

.edit-offer-layout {
    gap: 10px;
}

.edit-offer-current-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: start;
}

/* Previa: mesmo card do publico, so que em escala menor. */
.edit-offer-current .merchant-storefront-preview .product-body {
    padding: 10px;
}

.edit-offer-current .merchant-storefront-preview .product-heading {
    padding: 10px 10px 8px;
}

.edit-offer-current .merchant-storefront-preview h3 {
    margin-top: 0;
    font-size: 14px;
    line-height: 1.15;
}

.edit-offer-current .merchant-storefront-preview .storefront-price-tag {
    margin: 9px 0 10px 9px;
    padding: 5px 7px 5px calc(14% - 7px);
}

.edit-offer-current .merchant-storefront-preview .price-old {
    font-size: 10px;
}

.edit-offer-current .merchant-storefront-preview .price-discount {
    padding: 2px 5px;
    font-size: 9px;
}

.edit-offer-current .merchant-storefront-preview .price-new {
    font-size: 19px;
}

.edit-offer-current .merchant-storefront-preview .storefront-offer-actions {
    padding-top: 8px;
    gap: 6px;
}

.edit-offer-current .merchant-storefront-preview .storefront-stock {
    min-height: 26px;
    padding: 4px 6px;
    font-size: 10.5px;
}

.merchant-storefront-add {
    cursor: default;
}

.merchant-storefront-add .storefront-quantity-button {
    height: 24px;
    min-height: 24px;
}

.merchant-storefront-add .storefront-add-label {
    font-size: 11.5px;
}

.edit-offer-current .merchant-storefront-preview-image {
    padding: 0;
}

/* Passos e campos. */
.merchant-edit-section .new-offer-card {
    padding: 12px;
    gap: 9px;
}

.merchant-edit-section .step-head {
    margin-bottom: 0;
    font-size: 10.5px;
    letter-spacing: 0.12em;
}

.merchant-edit-section .step-head i {
    width: 18px;
    height: 18px;
    font-size: 11px;
}

.merchant-edit-section .field {
    gap: 3px;
}

.merchant-edit-section .field-label {
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.2;
}

.merchant-edit-section .field input,
.merchant-edit-section .field select,
.merchant-edit-section button.new-offer-category-trigger {
    box-sizing: border-box;
    height: 32px;
    min-height: 32px;
    max-height: 32px;
    padding: 0 9px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 13.5px;
    line-height: 1;
}

.merchant-edit-section .field-hint {
    font-size: 11px;
}

.edit-offer-stock-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    align-items: start;
    gap: 8px;
}

.edit-offer-data .new-offer-money-control {
    min-height: 32px;
    border-width: 1px;
}

.edit-offer-data .new-offer-money-control input {
    min-height: 32px;
    font-size: 13.5px;
}

.edit-offer-data .field .edit-offer-title-input {
    min-height: 44px;
    padding: 7px 9px;
    border-width: 1px;
    border-radius: 8px;
    font-size: 13.5px;
    line-height: 1.3;
}

/* Fotos: seis posicoes fixas. */
.merchant-edit-section .new-offer-photo-slots {
    gap: 8px;
}

.merchant-edit-section .new-offer-photo-actions .button {
    min-height: 36px;
    padding: 0 12px;
    border-width: 1px;
    border-radius: 6px;
    font-size: 13.5px;
}

.merchant-edit-section .new-offer-photo-actions .button:hover {
    transform: none;
}

.merchant-edit-section .new-offer-help {
    font-size: 11.5px;
    line-height: 1.35;
}

/* Botoes e acoes finais. */
.merchant-edit-section .button {
    border-width: 1px;
    border-radius: 6px;
}

.merchant-edit-section .button:hover {
    transform: none;
}

.merchant-edit-section .button.primary {
    border-color: var(--coral-dark);
}

.edit-offer-data .button.primary {
    min-height: 40px;
    margin-top: 3px;
}

.edit-offer-actions {
    gap: 8px;
}

.edit-offer-action-row {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
}

.edit-offer-action-row .merchant-delivery-row {
    min-width: 0;
    flex: 1;
}

.edit-offer-delete-form {
    margin: 0;
    flex: 0 0 auto;
}

.edit-offer-delete-form .edit-offer-risk {
    display: block;
}

.edit-offer-delete-form .button.danger {
    display: grid;
    width: 32px;
    min-height: 32px;
    padding: 0;
    place-items: center;
}

.edit-offer-delete-form .button.danger svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}



.edit-offer-current-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: stretch;
    gap: 8px;
}

.edit-offer-current .merchant-storefront-preview {
    min-width: 0;
}

.merchant-storefront-preview-image {
    padding: 12px;
}

.merchant-storefront-preview .storefront-reserve,
.merchant-preview-dots .gallery-dot {
    cursor: default;
}

.edit-offer-kpis {
    display: grid;
    gap: 8px;
}

.edit-offer-kpi {
    display: flex;
    min-width: 0;
    padding: 6px 9px;
    align-items: baseline;
    gap: 6px;
    border: 1px solid var(--line);
    border-radius: var(--radius-small);
    background: var(--white);
}

.edit-offer-kpi strong {
    overflow: hidden;
    font-size: 17px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    text-overflow: ellipsis;
}

.edit-offer-kpi span {
    color: var(--ink-soft);
    font-size: 11px;
}

.edit-offer-lock {
    margin: 9px 0 0;
    padding-top: 9px;
    border-top: 1px solid var(--mustard);
    color: var(--ink-soft);
    font-size: 12px;
    line-height: 1.4;
}

.edit-offer-lock strong {
    color: var(--ink);
    font-weight: 800;
}

.edit-offer-free,
.edit-offer-locked {
    --edit-info-accent: var(--signal-green);
    position: static;
    display: inline-flex;
    min-height: 0;
    padding: 0;
    align-items: center;
    gap: 6px;
    border: 0;
    border-radius: 0;
    color: #297558;
    background: transparent;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.05em;
    line-height: 1;
    text-transform: uppercase;
}

.edit-offer-free::before,
.edit-offer-locked::before {
    position: static;
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    content: "";
    background: var(--edit-info-accent);
    transform: rotate(45deg);
}

.edit-offer-locked {
    --edit-info-accent: var(--signal-violet);
    color: var(--ink-soft);
    letter-spacing: 0;
    text-transform: none;
}

.edit-offer-field-label {
    display: flex;
    align-items: center;
    gap: 6px;
}

.edit-offer-data input[readonly] {
    color: var(--ink-mute);
    background: #fbfaf7;
}

.edit-offer-data .new-offer-money-control input {
    padding-left: 10px;
}

.reservation-search {
    align-items: flex-end;
}

.edit-offer-data .field .edit-offer-title-input {
    height: 58px;
    min-height: 58px;
    resize: vertical;
}

.edit-offer-data .field .edit-offer-title-input[readonly] {
    color: var(--ink-mute);
    background: #fbfaf7;
    resize: none;
}

.edit-offer-data .button.primary {
    width: 100%;
}

.edit-offer-actions .risk-zone {
    margin: 0;
}

.edit-offer-actions {
    display: grid;
    gap: 14px;
}

@media (max-width: 879px) {
    .merchant-edit-section > .page-heading-row .dashboard-title {
        font-size: 23px;
        line-height: 1.1;
    }

}

/* ----------------------------------------------- pontos da galeria de fotos ---
   Ficam fora da imagem. A area clicavel e maior que a bolinha visivel. */

.gallery-dots {
    display: flex;
    min-height: 24px;
    padding: 0 8px;
    align-items: center;
    justify-content: center;
    gap: 0;
    background: var(--white);
}

.gallery-dots[hidden] {
    display: none;
}

.gallery-dot {
    display: grid;
    width: 28px;
    height: 24px;
    min-height: 24px;
    padding: 0;
    place-items: center;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.gallery-dot::before {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    content: "";
    background: var(--ink-mute);
}

.gallery-dot[aria-current="true"]::before {
    background: var(--signal-coral);
    transform: scale(1.3);
}

.gallery-dot:focus-visible {
    outline: 2px solid var(--signal-blue);
    outline-offset: -2px;
}

/* ============================================================================
   Abaixo de 880px: abas no rodape, cartoes e sheets.
   ============================================================================ */

@media (max-width: 879px) {
    /* O drawer sai; a barra de abas entra. */
    .dashboard-shell > .sidebar,
    .mobile-menu-button {
        display: none;
    }

    .dashboard-main {
        padding-top: 14px;
        padding-bottom: calc(86px + env(safe-area-inset-bottom));
        scroll-padding-bottom: calc(80px + env(safe-area-inset-bottom));
    }

    .dashboard-main :is(a, button, input, select, textarea, [tabindex]):not([tabindex="-1"]) {
        scroll-margin-bottom: calc(80px + env(safe-area-inset-bottom));
    }

    .merchant-page-header {
        margin-bottom: 18px;
        padding: 19px 18px 20px;
        grid-template-columns: 1fr;
        gap: 18px;
        border-radius: 16px;
    }

    .merchant-page-header-main .dashboard-title {
        font-size: clamp(36px, 11vw, 46px);
    }

    .merchant-page-header-main .lead {
        font-size: 16px;
        line-height: 1.4;
    }

    .merchant-page-header-actions {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    .merchant-page-header-buttons {
        flex: 1;
    }

    .merchant-page-header-buttons .button {
        flex: 1;
    }

    .merchant-profile-header-actions {
        justify-content: flex-start;
    }

    .merchant-profile-page-header .merchant-profile-avatar {
        width: 58px;
        height: 58px;
        border-radius: 14px;
        font-size: 24px;
    }

    .tabbar {
        position: fixed;
        z-index: 45;
        right: 0;
        bottom: 0;
        left: 0;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 2px;
        padding: 4px 4px calc(6px + env(safe-area-inset-bottom));
        background: var(--white);
        border-top: 2px solid var(--ink);
    }

    .tabbar a {
        position: relative;
        display: grid;
        min-height: var(--tap);
        padding: 5px 2px;
        align-content: center;
        justify-items: center;
        gap: 3px;
        color: var(--ink-soft);
        border-radius: var(--radius-small);
        font-size: 11px;
        font-weight: 700;
        text-align: center;
    }

    .tabbar a[aria-current="page"] {
        color: var(--coral-dark);
        background: #fdeceb;
    }

    /* KPI vira grade 2x2 de 68px; o detalhe some para devolver rolagem. */
    .stats-grid {
        margin: 16px 0;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .stat-card {
        min-height: 68px;
        padding: 9px 11px;
    }

    .stat-card strong {
        font-size: 24px;
    }

    /* Só o KPI do painel perde o detalhe, para devolver uma tela de rolagem.
       O "como funciona" público precisa da explicação: ali o texto é o
       conteúdo, não decoração. */
    .dashboard-main .stat-card p {
        display: none;
    }

    /* Grade de ofertas em 2 colunas com cartao compacto. */
    .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .product-card {
    }

    .product-art {
        min-height: 0;
        height: auto;
    }

    .product-gallery-trigger {
        min-height: 0;
        height: 100%;
    }

    .product-gallery-trigger {
        padding: 6px;
    }

    .merchant-storefront-preview-image {
        padding: 6px;
    }

    .product-body {
        padding: 9px 10px 11px;
    }

    .product-store {
        margin-bottom: 4px;
        font-size: 10px;
    }

    .product-heading {
        /* O h3 mantem os 4px de respiro proprio nesta faixa. */
        padding: 9px 10px 3px;
    }

    /* Nome de produto em DM Sans, no maximo 2 linhas. */
    .product-heading h3,
    .product-body h3 {
        display: -webkit-box;
        margin-bottom: 4px;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        font-family: "DM Sans", system-ui, sans-serif;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0;
        line-height: 1.25;
    }

    .price-row {
        margin: 6px 0 7px;
        column-gap: 7px;
    }

    .price-new {
        font-size: 20px;
    }

    .price-old {
        font-size: 11px;
    }

    .expiry {
        font-size: 12px;
    }

    .card-footer {
        margin-top: 9px;
        flex-direction: column;
        align-items: stretch;
        gap: 7px;
    }

    .card-footer .button {
        width: 100%;
    }

    .stock {
        font-size: 11px;
    }

    .storefront-price-tag {
        margin: 7px 0 0 11px;
        padding: 6px 3px 0 calc(14% - 8px);
        gap: 3px 2px;
    }

    .storefront-price-tag .price-old {
        font-size: 8px;
    }

    .storefront-price-tag .price-discount {
        padding: 3px 4px;
        font-size: 8px;
        white-space: nowrap;
    }

    .storefront-price-tag .price-new {
        font-size: clamp(13px, 4.1vw, 20px);
        letter-spacing: -0.055em;
    }

    .storefront-product-grid .storefront-offer-actions {
        margin-top: 0;
        padding-top: 2px;
        grid-template-columns: minmax(0, 1fr);
        justify-items: end;
        gap: 5px;
    }

    .storefront-product-grid .storefront-stock {
        width: 100%;
        min-height: 24px;
        padding: 3px 4px;
        justify-self: stretch;
        font-size: 8px;
    }

    .feed-offer-actions {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
    }

    .feed-store-link {
        width: 100%;
        text-align: center;
    }

    .storefront-quantity-button {
        width: 44px;
        min-height: 20px;
    }

    .storefront-add-button {
        width: auto;
    }

    /* Sem hover confiavel: somente os pontos externos e o gesto horizontal. */
    .gallery-arrow {
        display: none;
    }

    /* Sheet encosta no rodape e ocupa a largura toda. */
    .sheet-dialog {
        width: 100%;
        max-width: 100%;
        margin: auto auto 0;
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius: 22px 22px 0 0;
    }

    /* Uma acao primaria por bloco: a secundaria vira contorno. */
    .button-row {
        flex-wrap: wrap;
    }

    .button-row > form,
    .button-row > .button {
        flex: 1 1 100%;
    }

    .button-row .button {
        width: 100%;
    }
}

@media (max-width: 390px) {
    .merchant-page-header {
        padding-inline: 16px;
    }

    .merchant-page-header-actions:not(.merchant-profile-header-actions) {
        align-items: stretch;
        flex-direction: column;
    }

    .merchant-page-header-actions:not(.merchant-profile-header-actions) > :first-child {
        align-self: flex-start;
    }

    .merchant-page-header-buttons,
    .merchant-page-header-buttons .button,
    .merchant-page-header-actions > .button {
        width: 100%;
    }
}

@media (max-width: 350px) {
    .storefront-stock {
        padding-inline: 3px;
    }

    .storefront-stock::before {
        display: none;
    }

    .storefront-reserve.button.small {
        min-width: 66px;
        padding-inline: 6px;
        font-size: 11px;
    }
}

/* Trava a rolagem do fundo enquanto um sheet estiver aberto. */
html.sheet-open {
    overflow: hidden;
}

/* ============================================================================
   Abaixo de 720px: a tabela do admin vira cartao com acoes visiveis.
   A coluna de acao ficava fora do viewport em 390px.
   ============================================================================ */

@media (max-width: 719px) {
    .data-card.table-scroll {
        overflow-x: visible;
    }

    .admin-table {
        min-width: 0;
    }

    .admin-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

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

    .admin-table tr {
        margin: 12px;
        padding: 12px 14px;
        border: 2px solid var(--ink);
        border-radius: var(--radius-small);
        background: var(--white);
    }

    .admin-table td {
        padding: 8px 0;
        border-bottom: 1px dashed var(--line-soft);
    }

    .admin-table tr:last-child td,
    .admin-table td:last-child {
        border-bottom: 0;
    }

    .admin-table td::before {
        display: block;
        margin-bottom: 3px;
        content: attr(data-rotulo);
        color: var(--ink-soft);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .admin-table td:empty::before {
        content: attr(data-rotulo);
    }

    .admin-table td .button-row {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ============================================================================
   Acima de 880px: barra lateral, tabela e modal continuam valendo.
   ============================================================================ */

@media (min-width: 880px) {
    /* Grade que se acomoda: a quarta oferta nao fica sozinha em 1440px. */
    .product-grid {
        grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    }

    /* Setas da galeria somente no hover, sem poluir a foto. */
    .product-art .gallery-arrow {
        opacity: 0;
        transition: opacity 120ms ease;
    }

    .product-art:hover .gallery-arrow,
    .product-art .gallery-arrow:focus-visible {
        opacity: 1;
    }
}

/* Entre 880px e 960px a barra lateral ja e util: nada de drawer. */
@media (min-width: 880px) and (max-width: 960px) {
    .dashboard-shell {
        grid-template-columns: 220px minmax(0, 1fr);
    }

    .dashboard-shell > .sidebar {
        position: sticky;
        display: flex;
        width: auto;
        transform: none;
    }
}

/* A coluna escura acompanha a pagina inteira, sem cortar na altura da janela. */
@media (min-width: 880px) {
    .dashboard-shell > .sidebar {
        height: 100dvh;
        min-height: 100dvh;
        overflow-y: auto;
    }
}

/* Texto so para leitor de tela. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Aba "Mais": reabre a barra lateral como gaveta, sem JavaScript. */
@media (max-width: 879px) {
    .dashboard-shell > .sidebar:target {
        position: fixed;
        z-index: 50;
        top: 0;
        bottom: 0;
        left: 0;
        display: flex;
        width: min(76vw, 286px);
        height: 100dvh;
        overflow-y: auto;
        transform: none;
    }

    /* O veu fica abaixo da gaveta e acima do painel: tocar fora troca o
       :target e fecha, sem nenhum JavaScript. */
    .dashboard-shell > .sidebar:target ~ .sidebar-veil {
        position: fixed;
        z-index: 49;
        display: block;
        inset: 0;
        background: rgba(19, 36, 58, 0.44);
    }
}

/* Na edicao de oferta, a previa sobe para o topo no celular:
   o lojista precisa ver o que esta no ar antes de mexer nos campos. */
@media (max-width: 879px) {
    .merchant-edit-section .two-column > aside {
        order: -1;
    }
}

/* A cidade abre a pagina inicial, entao nao herda o respiro de secao. */
.home-cidades {
    margin-top: 0;
}

/* Login: a arte lateral so aparece quando ha largura para ela.
   Abaixo de 880px ela empurrava o formulario para fora da primeira tela. */
@media (max-width: 879px) {
    .auth-layout {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .auth-art {
        display: none;
    }
}

/* Cadastro: a etapa 2 nascia no topo da coluna direita enquanto a etapa 1
   descia a esquerda. Empilhado, a ordem de leitura volta a ser 1 e depois 2. */
@media (max-width: 879px) {
    .registration-form {
        grid-template-columns: 1fr;
    }
}

/* Abas de ofertas agora sao links: precisam de alvo de toque e estado. */
.offer-tabs a {
    display: inline-flex;
    min-height: var(--tap);
    padding: 12px 14px;
    align-items: center;
    color: var(--ink-soft);
    border-bottom: 3px solid transparent;
    font-weight: 800;
}

.offer-tabs a[aria-current="page"] {
    color: var(--coral-dark);
    border-bottom-color: var(--coral);
}

@media (max-width: 879px) {
    .offer-finder,
    .new-offer-barcode-question {
        grid-template-columns: 1fr;
    }

    .offer-finder-barcode,
    .offer-finder-scan,
    .new-offer-barcode-actions,
    .new-offer-barcode-actions > *,
    .new-offer-barcode-actions form .button {
        width: 100%;
    }

    .new-offer-barcode-actions {
        display: grid;
    }

    .offer-tabs {
        gap: 4px;
        overflow-x: auto;
    }

    .offer-tabs a {
        padding: 12px 10px;
        font-size: 13px;
        white-space: nowrap;
    }

    .reservation-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow-x: visible;
    }

    .reservation-tabs a {
        justify-content: center;
        text-align: center;
        white-space: normal;
    }
}

/* ============================================================================
   Melhorias de desktop. O celular ja resolveu densidade e navegacao; aqui
   sobra largura para acompanhar contexto sem rolar.
   ============================================================================ */

@media (min-width: 880px) {
    .edit-offer-current-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .edit-offer-current .merchant-storefront-preview {
        width: min(100%, 280px);
        justify-self: center;
    }

    .edit-offer-current .edit-offer-kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .edit-offer-layout {
        grid-template-columns: minmax(0, 1fr) minmax(300px, 0.82fr);
        grid-template-areas:
            "lock current"
            "photos current"
            "data current"
            "actions current";
        align-items: start;
    }

    .edit-offer-current {
        position: sticky;
        top: 24px;
        grid-area: current;
    }

    .edit-offer-lock {
        grid-area: lock;
    }

    .edit-offer-photos {
        grid-area: photos;
    }

    .edit-offer-data {
        grid-area: data;
    }

    .edit-offer-actions {
        grid-area: actions;
    }

    /* Resumo, custo e previa acompanham a rolagem do formulario em nova
       e editar oferta. */
    .offer-editor .two-column > aside {
        position: sticky;
        top: 24px;
    }

    /* Filtros do feed ficam a mao durante a rolagem da grade. */
    .search-panel {
        position: sticky;
        top: 88px;
    }

    /* Sheet de reserva em duas colunas: foto e resumo a esquerda,
       formulario a direita. */
    .sheet-dialog {
        width: min(100%, 760px);
    }

    .sheet-dialog .sheet-body {
        grid-template-columns: 240px minmax(0, 1fr);
        column-gap: 22px;
        align-items: start;
    }

    .sheet-dialog .sheet-grabber {
        display: none;
    }

    .sheet-dialog .sheet-heading,
    .sheet-dialog form {
        grid-column: 2;
    }

    .sheet-dialog .sheet-produto {
        grid-column: 1;
        grid-row: 1 / span 3;
        grid-template-columns: minmax(0, 1fr);
    }

    .sheet-dialog .sheet-produto img {
        width: 100%;
        height: 180px;
    }

    /* Comprovante ocupa a coluna principal: a decisao depende de ler a
       imagem, nao de adivinhar. */
    .admin-receipt-preview img {
        height: min(60dvh, 560px);
        object-fit: contain;
        background: var(--paper-deep);
    }
}

/* O selo "Preço baixo, perto de você." pertence a foto, nao ao titulo. Ancorado pelo
   rodape ele caia sobre o H1 no celular, porque a medida partia do fim do
   hero empilhado. Ancorar pelo topo prende o selo a imagem. */
@media (max-width: 879px) {
    .hero-visual {
        min-height: 260px;
    }

    .hero-sticker {
        top: 180px;
        right: 16px;
        bottom: auto;
        width: 92px;
        height: 92px;
        font-size: 15px;
    }
}

/* Fallback sem JavaScript: o :target precisa da mesma geometria do <dialog>
   aberto. Com o inset antigo de 24px somado a largura do sheet, o formulario
   nascia mais largo que a tela e os campos saiam pela direita. */
.reservation-dialog:target {
    position: fixed;
    z-index: 40;
    inset: auto 0 0;
    max-height: 88dvh;
    margin: 0 auto;
    overflow-y: auto;
}

@media (min-width: 880px) {
    .reservation-dialog:target {
        inset: 50% auto auto 50%;
        max-height: min(82dvh, 720px);
        margin: 0;
        transform: translate(-50%, -50%);
    }
}

/* Uma acao primaria por bloco na fila de reservas. "Produto indisponível"
   cancela a reserva: fica em contorno, nao com o mesmo peso solido de
   "Confirmar retirada". Erro nao pode ser tao facil quanto acerto. */
.reservation-card .button.secondary {
    color: var(--ink);
    background: var(--white);
}

/* Planos em grade também no celular. Empilhados em coluna única,
   mantêm a leitura do pagamento em telas estreitas. */
@media (max-width: 879px) {
    .plan-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .plan-card {
        padding: 8px 10px;
        gap: 2px;
    }

    .plan-card strong {
        font-size: 19px;
    }

    .plan-card input {
        top: 10px;
        right: 10px;
    }
}

/* ---------------------------------------------------- cadastro em passos ---
   Sem JavaScript nada disso se aplica: os tres blocos ficam visiveis e o
   cadastro funciona como antes. `passos-ativos` so entra pelo script. */

.registration-passos {
    display: grid;
    gap: 20px;
}

.passos-trilha {
    display: grid;
    margin: 0 0 20px;
    padding: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    list-style: none;
    counter-reset: passo;
}

.passos-trilha li {
    padding: 10px 8px 12px;
    border-top: 4px solid var(--line);
    color: var(--ink-soft);
    font-size: 12px;
    font-weight: 700;
    counter-increment: passo;
}

.passos-trilha li::before {
    content: counter(passo) ". ";
}

.passos-trilha li[aria-current="true"] {
    color: var(--coral-dark);
    border-top-color: var(--coral);
}

.passo-acoes {
    margin-top: 4px;
}

/* O botao de voltar nunca compete com o de avancar. */
.passo-acoes [data-passo-voltar] {
    border-color: transparent;
    background: transparent;
}

@media (max-width: 879px) {
    .passo-acoes {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .passo-acoes .button {
        width: 100%;
    }
}

/* `.form-stack` define `display: grid`, que vence o `display: none` que o
   navegador aplica a `[hidden]`. Sem isto os passos ficam todos visiveis
   mesmo marcados como ocultos. */
.registration-passos [data-passo][hidden] {
    display: none;
}

/* ------------------------------------------------ horario semanal --- */

.horario-semana-organizada {
    gap: 12px;
    padding: clamp(14px, 2.2vw, 22px);
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--white);
}

.horario-semana-legenda {
    padding: 0 8px;
    color: var(--ink);
    font-family: "Bitter", Georgia, serif;
    font-size: 20px;
    font-weight: 800;
}

.horario-semana-intro {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.horario-semana-intro strong {
    font-size: 17px;
}

.horario-semana-intro p {
    max-width: 64ch;
    margin: 4px 0 0;
    color: var(--ink-soft);
    font-size: 13px;
}

.horario-comercial-button {
    white-space: nowrap;
}

.horario-semana-acoes {
    display: flex;
    max-width: 430px;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.button.secondary.horario-comercial-intervalo {
    background: var(--white);
}

.horario-comercial-resumo {
    display: grid;
    margin: 14px 0 0;
    padding: 10px 12px;
    gap: 5px;
    border-left: 4px solid var(--coral);
    border-radius: 8px 14px 14px 8px;
    color: var(--ink);
    background: var(--paper);
    font-size: 13px;
}

.horario-comercial-feedback {
    min-height: 20px;
    margin: 6px 0 4px;
    color: #087b72;
    font-size: 12px;
    font-weight: 800;
}

.horario-validacao {
    margin: 0;
    color: var(--red);
    font-size: 13px;
    font-weight: 700;
}

.horario-validacao[hidden] {
    display: none;
}

.horario-grade {
    display: grid;
    gap: 12px;
    overflow: visible;
    border: 0;
    background: transparent;
}

.horario-dia {
    display: grid;
    padding: 14px;
    grid-template-columns: minmax(96px, 0.38fr) repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--white);
}

.horario-dia:nth-child(even) {
    background: var(--white);
}

.horario-dia:last-child {
    border-bottom: 1px solid var(--line);
}

.horario-rotulo {
    display: flex;
    min-height: 48px;
    padding: 9px 10px;
    align-items: center;
    border-left: 4px solid var(--coral);
    border-radius: 7px;
    background: var(--paper);
    font-size: 15px;
}

.horario-dia:nth-child(even) .horario-rotulo {
    border-left-color: var(--coral);
    background: var(--paper);
}

.horario-dia:nth-child(3n) .horario-rotulo {
    border-left-color: var(--coral);
    background: var(--paper);
}

.horario-periodo {
    display: grid;
    min-width: 0;
    gap: 6px;
    padding: 9px 10px 10px;
    border: 1px solid #cfc5b5;
    border-radius: 12px;
    background: var(--white);
}

.horario-periodo-opcional {
    border-color: var(--line);
    background: var(--white);
}

.horario-periodo-rotulo {
    color: var(--ink);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.horario-periodo-rotulo small {
    color: #7d658c;
    font-size: 9px;
    letter-spacing: 0.04em;
}

.horario-campos {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
    gap: 7px;
    align-items: end;
}

.horario-campo {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.horario-campo > span {
    color: var(--ink-soft);
    font-size: 10px;
    font-weight: 800;
}

.horario-campo input[type="time"] {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 7px 8px;
    border: 2px solid #8f8779;
    border-radius: 9px;
    color: var(--ink);
    background: var(--white);
    font-size: 14px;
    font-weight: 700;
}

.horario-campo input[type="time"]:focus {
    border-color: var(--ink);
    outline: 3px solid rgba(244, 184, 63, 0.55);
    outline-offset: 1px;
}

.horario-ate {
    padding-bottom: 12px;
    color: var(--ink-soft);
    font-size: 10px;
    font-weight: 800;
}

@media (max-width: 680px) {
    .horario-semana-organizada {
        padding: 13px;
        border-radius: 16px;
    }

    .horario-semana-intro {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
    }

    .horario-comercial-button {
        width: 100%;
        white-space: normal;
    }

    .horario-semana-acoes {
        display: grid;
        width: 100%;
        max-width: none;
        justify-content: stretch;
    }

    .horario-comercial-resumo {
        line-height: 1.45;
    }

    .horario-dia {
        padding: 14px 12px 16px;
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .horario-rotulo {
        min-height: 42px;
    }

    .horario-periodo {
        padding: 10px;
    }
}

/* ------------------------------------------------ perfil da loja --- */

.store-logo {
    width: 190px;
    height: 190px;
    border: 5px solid var(--white);
    border-radius: 28px 28px 56px 28px;
    object-fit: cover;
    transform: rotate(1.5deg);
}

.merchant-profile-main {
    background:
        radial-gradient(circle at 92% 4%, rgba(66, 198, 242, 0.22), transparent 22rem),
        radial-gradient(circle at 16% 34%, rgba(255, 216, 77, 0.18), transparent 20rem),
        #fff8ed;
}

.merchant-profile-kicker {
    color: #9c2644;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.merchant-profile-hero {
    position: relative;
    display: grid;
    margin-bottom: 24px;
    padding: 28px;
    overflow: hidden;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px;
    border: 2px solid var(--ink);
    border-radius: 30px 30px 64px 30px;
    background:
        linear-gradient(125deg, rgba(255, 255, 255, 0.96) 0 56%, transparent 56%),
        repeating-linear-gradient(-45deg, #ff7182 0 18px, #ff8d62 18px 36px);
}

.merchant-profile-avatar,
.merchant-profile-logo-preview {
    display: grid;
    overflow: hidden;
    place-items: center;
    flex: 0 0 auto;
    color: var(--white);
    background: linear-gradient(145deg, #9a32e7, #ff4f75);
    font-family: "Bitter", serif;
    font-weight: 800;
}

.merchant-profile-avatar {
    width: 112px;
    height: 112px;
    border: 4px solid var(--ink);
    border-radius: 30px 30px 48px 30px;
    font-size: 42px;
    transform: rotate(-2deg);
}

.merchant-profile-avatar img,
.merchant-profile-logo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.merchant-profile-logo-preview img[hidden] {
    display: none;
}

.merchant-profile-stamp {
    display: grid;
    width: 104px;
    height: 104px;
    place-content: center;
    border: 3px solid var(--ink);
    border-radius: 50%;
    color: var(--ink);
    background: var(--signal-yellow);
    line-height: 1;
    text-align: center;
    transform: rotate(8deg);
}

.merchant-profile-stamp span {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.18em;
}

.merchant-profile-stamp strong {
    font-family: "Bitter", serif;
    font-size: 21px;
}

.merchant-profile-form {
    display: grid;
    gap: 20px;
}

.merchant-profile-card {
    min-width: 0;
    padding: 24px;
    border: 2px solid var(--ink);
    border-radius: 24px;
    background: var(--white);
}

.merchant-profile-card:nth-of-type(2) {
    border-top: 9px solid var(--signal-violet);
}

.merchant-profile-card:nth-of-type(3) {
    border-top: 9px solid var(--signal-blue);
}

.merchant-profile-card:nth-of-type(4) {
    border-top: 9px solid var(--signal-green);
}

.merchant-profile-card-head {
    display: flex;
    margin-bottom: 20px;
    align-items: center;
    gap: 14px;
}

.merchant-profile-card-head h2,
.merchant-profile-card-head p {
    margin: 0;
}

.merchant-profile-number {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border: 2px solid var(--ink);
    border-radius: 12px 12px 20px 12px;
    background: var(--signal-yellow);
    font-weight: 900;
    transform: rotate(-3deg);
}

.merchant-profile-identity-grid {
    display: grid;
    margin-bottom: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.merchant-profile-identity-grid > div {
    display: grid;
    padding: 13px 15px;
    gap: 2px;
    border: 1px solid #e3d7c5;
    border-radius: 14px;
    background: #fff8e8;
}

.merchant-profile-identity-grid span {
    color: #7a5360;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.merchant-profile-logo-layout {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    align-items: center;
    gap: 24px;
}

.merchant-profile-logo-preview {
    width: 160px;
    height: 160px;
    border: 3px solid var(--ink);
    border-radius: 22px 22px 44px 22px;
    font-size: 56px;
}

.merchant-logo-upload {
    border-color: #9a32e7;
    background: #fbf1ff;
}

.merchant-remove-logo {
    display: flex;
    padding: 12px 14px;
    align-items: center;
    gap: 10px;
    border: 1px dashed #e34e70;
    border-radius: 14px;
    color: #9c2644;
    background: #fff1f4;
    font-weight: 700;
}

.merchant-profile-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.merchant-field-wide {
    grid-column: 1 / -1;
}

.merchant-hours-card {
    background:
        linear-gradient(150deg, rgba(69, 220, 165, 0.08), transparent 46%),
        var(--white);
}

.merchant-deadline-rule {
    margin-bottom: 18px;
    padding: 16px 18px;
    border: 2px solid #087b72;
    border-radius: 16px 16px 28px 16px;
    background: #dffff3;
}

.merchant-deadline-rule strong {
    color: #075d57;
}

.merchant-deadline-rule p {
    margin: 4px 0 0;
}

.merchant-hours-week {
    margin-bottom: 18px;
}

.merchant-timezone {
    max-width: 620px;
}

.merchant-profile-savebar {
    display: flex;
    padding: 15px 18px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border: 2px solid var(--ink);
    border-radius: 20px;
    color: var(--ink);
    background: var(--signal-yellow);
}

.merchant-profile-savebar div {
    display: grid;
}

.merchant-profile-savebar span {
    font-size: 13px;
}

@media (max-width: 879px) {
    .store-hero {
        margin-bottom: 24px;
        padding: 18px;
        grid-template-columns: minmax(0, 1fr) 68px;
        align-items: start;
        gap: 12px;
    }

    .store-hero h1 {
        font-size: clamp(30px, 9vw, 38px);
        line-height: 1;
    }

    .store-hours-summary {
        margin: 12px 0 6px;
        font-size: 13px;
        line-height: 1.4;
    }

    .store-logo {
        width: 68px;
        height: 68px;
        border-width: 3px;
        border-radius: 16px 16px 24px 16px;
    }

    .store-monogram {
        width: 68px;
        height: 68px;
        font-size: 27px;
    }

    .merchant-profile-main {
        padding-bottom: 110px;
    }

    .merchant-profile-hero {
        padding: 20px;
        grid-template-columns: 74px minmax(0, 1fr);
        gap: 16px;
        border-radius: 22px 22px 42px 22px;
    }

    .merchant-profile-avatar {
        width: 74px;
        height: 74px;
        border-radius: 20px 20px 30px 20px;
        font-size: 28px;
    }

    .merchant-profile-stamp {
        display: none;
    }

    .merchant-profile-card {
        padding: 18px 15px;
        border-radius: 20px;
    }

    .merchant-profile-identity-grid,
    .merchant-profile-fields {
        grid-template-columns: 1fr;
    }

    .merchant-field-wide {
        grid-column: auto;
    }

    .merchant-profile-logo-layout {
        grid-template-columns: 90px minmax(0, 1fr);
        gap: 14px;
    }

    .merchant-profile-logo-preview {
        width: 90px;
        height: 90px;
        border-radius: 18px 18px 28px 18px;
        font-size: 34px;
    }

    .merchant-profile-savebar {
        align-items: stretch;
        flex-direction: column;
    }

    .merchant-profile-savebar .button {
        width: 100%;
    }
}

/* Cartões usam contorno leve; sombras ficam restritas a controles e elementos decorativos. */
.hero,
.store-hero,
.product-card,
.surface,
.empty-state,
.stat-card,
.data-card,
.plan-card,
.summary-card,
.new-offer-card,
.new-offer-preview-card,
.merchant-page-header,
.merchant-profile-hero,
.merchant-profile-card {
    border-width: 1px;
    border-color: var(--line);
}

.plan-card:has(input:checked),
.merchant-profile-card:nth-of-type(2),
.merchant-profile-card:nth-of-type(3),
.merchant-profile-card:nth-of-type(4) {
    border-width: 1px;
}


/* ============================================================================
   Minha loja — layout compacto.
   A tela ocupava cerca de 3600px no celular: cada dia da semana mostrava dois
   periodos abertos, cada aviso era um cartao e cada campo tinha 48px. Aqui os
   blocos perdem decoracao e altura sem perder nenhuma informacao.
   ========================================================================= */

.merchant-profile-main {
    padding-bottom: calc(118px + env(safe-area-inset-bottom));
}

.merchant-profile-page-header {
    padding: 12px;
    margin-bottom: 10px;
    align-items: flex-start;
    gap: 10px;
}

.merchant-profile-page-header .eyebrow {
    margin-bottom: 1px;
    font-size: 10.5px;
    letter-spacing: 0.16em;
}

.merchant-profile-page-header .dashboard-title {
    margin-block: 0;
    font-size: 26px;
    line-height: 1.05;
}

.merchant-profile-page-header .lead {
    margin-block: 2px 0;
    font-size: 12.5px;
}

.merchant-profile-header-actions .merchant-profile-avatar {
    width: 34px;
    height: 34px;
    border-width: 1px;
    border-radius: 8px;
    background: var(--paper-deep);
    color: var(--ink);
    font-size: 16px;
    transform: none;
}

.merchant-profile-header-actions .merchant-page-header-status {
    font-size: 10.5px;
}

/* Avisos tipograficos no lugar dos cartoes. */
/* As classes utilitarias `.erro`, `.sucesso` e `.aviso` desenham caixa: borda
   de 2px nos quatro lados, fundo e raio. Quando o mesmo elemento tambem e um
   aviso tipografico, sobrava a caixa nas laterais e so a linha de baixo ficava
   com 1px, o que aparecia como borda inferior mais fina. Zerar a caixa aqui
   devolve a regra fina em todos os estados. */
.merchant-profile-flash {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 10px;
    padding: 0 0 8px;
    border: 0;
    border-radius: 0;
    background: transparent;
    align-items: baseline;
    gap: 0 6px;
    border-bottom: 1px solid var(--line);
    font-size: 13px;
    line-height: 1.35;
}

.merchant-profile-flash span {
    color: var(--ink-soft);
}

.merchant-profile-flash.ok {
    border-bottom-color: var(--green);
}

.merchant-profile-flash.ok strong {
    color: var(--green);
}

.merchant-profile-flash.erro {
    border-bottom-color: var(--coral);
}

.merchant-profile-flash.erro strong {
    color: var(--coral-dark);
}

.merchant-profile-form {
    display: grid;
    gap: 10px;
}

.merchant-profile-card,
.merchant-profile-card:nth-of-type(2),
.merchant-profile-card:nth-of-type(3),
.merchant-profile-card:nth-of-type(4) {
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.merchant-hours-card {
    background: var(--white);
}

.merchant-profile-card-head {
    margin-bottom: 9px;
    gap: 8px;
}

.merchant-profile-card-head p.eyebrow {
    margin-bottom: 0;
    font-size: 10px;
    letter-spacing: 0.14em;
}

.merchant-profile-card-head h2 {
    font-size: 17px;
    line-height: 1.15;
}

.merchant-profile-number {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    border: 0;
    border-radius: 50%;
    color: var(--white);
    background: var(--ink);
    font-size: 10.5px;
    transform: none;
}

/* Identidade: pares densos, sem caixa por dado. */
.merchant-profile-identity-grid {
    margin-bottom: 8px;
    gap: 7px 10px;
}

.merchant-profile-identity-grid > div {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.merchant-profile-identity-grid span {
    color: var(--ink-soft);
    font-size: 10px;
    letter-spacing: 0.08em;
}

.merchant-profile-identity-grid strong,
.merchant-profile-identity-grid a {
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.merchant-profile-identity-grid a {
    color: var(--teal);
}

.merchant-identity-wide {
    grid-column: 1 / -1;
}

/* Logotipo em uma linha; a remocao e um botao direto. */
.merchant-profile-logo-layout {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 10px;
}

.merchant-profile-logo-preview {
    width: 56px;
    height: 56px;
    border: 1px solid var(--line);
    border-radius: var(--radius-small);
    background: var(--paper-deep);
    color: var(--ink);
    font-size: 24px;
}

.merchant-profile-logo-layout .form-stack {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.merchant-logo-upload {
    display: inline-flex;
    min-height: 34px;
    margin: 0;
    padding: 0 12px;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--white);
    font-size: 13px;
    font-weight: 700;
    text-align: left;
}

.merchant-logo-upload::before {
    content: none;
}

.merchant-logo-hint {
    width: 100%;
    margin: 0;
    font-size: 11px;
    line-height: 1.35;
}

.merchant-profile-card .merchant-remove-logo {
    display: grid;
    width: 34px;
    min-height: 34px;
    padding: 0;
    flex: 0 0 34px;
    place-items: center;
    border: 1px solid #e3bdba;
    border-radius: 6px;
    color: var(--red);
    background: var(--white);
}

.merchant-profile-card .merchant-remove-logo:hover {
    transform: none;
    background: #fff0ee;
}

.merchant-remove-logo svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Campos do balcao. */
.merchant-profile-fields {
    gap: 8px;
}

.merchant-profile-card .field {
    gap: 3px;
}

.merchant-profile-card .field-label {
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.2;
}

.merchant-profile-card .field input,
.merchant-profile-card .field select {
    min-height: 32px;
    padding: 0 9px;
    border-width: 1px;
    border-color: var(--line);
    border-radius: 8px;
    font-size: 13.5px;
    line-height: 1;
}

.merchant-profile-card .field select {
    padding-right: 28px;
    background-position: right 9px center;
}

.merchant-profile-card .field-hint {
    font-size: 11px;
}

.merchant-profile-card .delivery-choice {
    display: grid;
    gap: 4px;
}

.merchant-profile-card .delivery-choice .choice-row {
    height: 30px;
    padding: 0 9px;
    gap: 7px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--white);
    font-size: 12.5px;
    cursor: pointer;
}

.merchant-profile-card .delivery-choice .choice-row input {
    width: 14px;
    height: 14px;
}

.merchant-profile-card .delivery-choice .choice-row:has(input:checked) {
    border-color: var(--ink);
    background: var(--paper);
}

.merchant-profile-card .delivery-choice legend + .choice-row,
.merchant-profile-card .delivery-choice {
    margin-top: 0;
}

.merchant-profile-card .delivery-choice:has(.choice-row) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.merchant-profile-card .delivery-choice legend {
    grid-column: 1 / -1;
    margin-bottom: 1px;
}

@media (max-width: 480px) {
    .merchant-profile-card .delivery-choice .choice-row {
        height: auto;
        min-height: 42px;
    }

    .merchant-profile-card .delivery-choice .choice-row span {
        line-height: 1.2;
        text-wrap: balance;
    }
}

/* Entrega: o interruptor traduz sem entrega, gratis e com taxa. */
.merchant-delivery-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
}

.merchant-delivery-switch {
    display: inline-flex;
    height: 32px;
    padding: 0 9px;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--white);
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.merchant-delivery-switch input {
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: var(--ink);
}

.merchant-delivery-switch input:focus {
    outline: none;
}

.merchant-delivery-value {
    position: relative;
    display: block;
}

.merchant-delivery-value i {
    position: absolute;
    top: 0;
    left: 9px;
    display: flex;
    height: 32px;
    align-items: center;
    color: var(--ink-soft);
    font-size: 12.5px;
    font-weight: 700;
    font-style: normal;
}

.merchant-profile-card .merchant-delivery-value input {
    padding-left: 30px;
    font-variant-numeric: tabular-nums;
}

.merchant-delivery.sem-entrega .merchant-delivery-value {
    opacity: 0.45;
}

.merchant-freeship {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--line);
}

.merchant-freeship[data-frete-gratis-ativo="false"] .merchant-delivery-value {
    opacity: 0.45;
}

.merchant-freeship-city {
    font-weight: 700;
}

.merchant-delivery-description textarea {
    min-height: 32px;
    height: 32px;
    padding: 0 9px;
    border-width: 1px;
    border-color: var(--line);
    border-radius: 8px;
    font-size: 13.5px;
    line-height: 30px;
    resize: none;
    overflow-y: hidden;
}

/* Regra do prazo: linha, nao cartao. */
.merchant-deadline-rule {
    margin-bottom: 9px;
    padding: 0 0 9px;
    border: 0;
    border-bottom: 1px solid var(--line-soft);
    border-radius: 0;
    background: transparent;
    color: var(--ink-soft);
    font-size: 11.5px;
    line-height: 1.4;
}

.merchant-deadline-rule strong {
    display: block;
    color: var(--ink);
    font-size: 12.5px;
}

.merchant-deadline-rule p {
    margin: 2px 0 0;
    font-size: 11.5px;
}

/* Semana: um dia por linha, segundo periodo sob demanda. */
.merchant-hours-week {
    margin-bottom: 10px;
}

.horario-semana-organizada {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.horario-semana-intro {
    flex-direction: column;
    gap: 8px;
}

.horario-semana-intro strong {
    font-size: 13px;
}

.horario-semana-intro p {
    margin-top: 2px;
    font-size: 11.5px;
    line-height: 1.35;
}

.horario-semana-acoes {
    max-width: none;
    width: 100%;
    justify-content: stretch;
    gap: 6px;
}

.horario-semana-acoes .button {
    flex: 1;
    min-height: 34px;
    min-width: 130px;
    padding: 0 12px;
    border-width: 1px;
    border-radius: 6px;
    background: var(--white);
    font-size: 13px;
}

.horario-semana-acoes .button:hover {
    transform: none;
    background: var(--paper-deep);
}

.horario-comercial-detalhe {
    margin: 8px 0 0;
}

.horario-comercial-detalhe summary {
    color: var(--ink-soft);
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
}

.horario-comercial-resumo {
    margin: 5px 0 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--ink-soft);
    font-size: 11.5px;
}

.horario-comercial-feedback:empty {
    min-height: 0;
    margin: 0;
}

.horario-grade {
    gap: 6px;
    margin-top: 8px;
}

.horario-dia {
    display: grid;
    padding: 7px 9px;
    grid-template-columns: auto 70px minmax(0, 1fr);
    grid-template-areas:
        "estado dia periodo"
        ". . opcional";
    column-gap: 8px;
    row-gap: 0;
    align-items: center;
    border-radius: var(--radius-small);
}

.horario-dia-topo {
    display: contents;
}

.horario-rotulo {
    grid-area: dia;
    order: 0;
    min-height: 0;
    padding: 0 0 0 7px;
    border-left: 3px solid var(--coral);
    border-radius: 0;
    background: transparent;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
}

.horario-rotulo-curto {
    display: none;
}

.horario-dia:nth-child(even) .horario-rotulo,
.horario-dia:nth-child(3n) .horario-rotulo {
    border-left-color: var(--coral);
    background: transparent;
}

.horario-aberto {
    grid-area: estado;
    order: -1;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    box-sizing: border-box;
    min-width: 82px;
    min-height: 30px;
    padding: 0 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--ink-soft);
    background: var(--white);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.horario-aberto input {
    width: 13px;
    height: 13px;
    margin: 0;
    accent-color: var(--ink);
}

.horario-aberto:has(input:checked) {
    border-color: var(--ink);
    color: var(--ink);
    background: var(--paper);
}

@media (max-width: 879px) {
    .horario-rotulo-completo {
        display: none;
    }

    .horario-rotulo-curto {
        display: inline;
    }

    .horario-semana-organizada .horario-dia {
        grid-template-columns: auto 42px minmax(0, 1fr);
        column-gap: 6px;
    }

    .horario-semana-organizada .horario-campo input[type="time"] {
        padding: 0 6px 0 5px;
    }

    .horario-semana-organizada .horario-campo input[type="time"]::-webkit-calendar-picker-indicator {
        margin-inline: 0;
        width: 1.1em;
    }

    .horario-aberto {
        position: relative;
        min-width: 30px;
        width: 30px;
        padding: 0;
        justify-content: center;
        gap: 0;
    }

    .horario-aberto [data-horario-estado] {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
}

.horario-aberto[hidden],
.horario-remover-intervalo[hidden] {
    display: none;
}

.horario-intervalo[hidden] {
    display: inline-grid;
    visibility: hidden;
    pointer-events: none;
}

.horario-periodo,
.horario-periodo-opcional {
    grid-area: periodo;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    gap: 0;
}

.horario-periodo-rotulo {
    display: none;
}

.horario-periodo-opcional {
    grid-area: opcional;
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.horario-periodo-opcional .horario-periodo-rotulo {
    display: block;
    grid-column: 1 / 3;
    grid-row: 2;
    margin-bottom: 0;
    color: var(--ink-soft);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.1em;
}

.horario-campos {
    margin-top: 6px;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
    gap: 6px;
    align-items: center;
}

.horario-periodo-opcional .horario-campos {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
    grid-column: 3;
    grid-row: 2;
    margin-top: 0;
}

.horario-campo > span {
    display: none;
}

.horario-campo input[type="time"] {
    min-height: 30px;
    padding: 0 4px;
    border-width: 1px;
    border-color: var(--line);
    border-radius: 8px;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.horario-ate {
    padding-bottom: 0;
    font-size: 11px;
    font-weight: 600;
}

.horario-intervalo {
    display: inline-grid;
    width: 30px;
    min-width: 30px;
    height: 30px;
    min-height: 30px;
    padding: 6px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--ink-soft);
    background: var(--white);
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
    text-align: center;
}

.horario-intervalo:hover {
    background: var(--paper-deep);
    color: var(--ink);
}

.horario-remover-intervalo {
    display: inline-grid;
    width: 30px;
    min-width: 30px;
    height: 30px;
    min-height: 30px;
    padding: 6px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--ink-soft);
    background: var(--white);
}

.horario-remover-intervalo:hover {
    background: var(--paper-deep);
    color: var(--ink);
}

.horario-remover-intervalo svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Com JavaScript o segundo periodo so aparece quando o dia tem intervalo. */
.horario-dia:not(.tem-intervalo):has([data-horario-intervalo-adicionar]:not([hidden])) .horario-periodo-opcional {
    display: none;
}

.horario-dia.tem-intervalo .horario-periodo-opcional {
    display: contents;
}

@media (max-width: 879px) {
    .horario-semana-organizada .horario-dia.tem-intervalo {
        grid-template-columns: 30px 42px minmax(0, 1fr);
        grid-template-areas:
            "estado dia periodo"
            ". . opcional";
        row-gap: 6px;
    }

    .horario-semana-organizada .horario-dia.tem-intervalo .horario-periodo-opcional {
        display: contents;
    }

    .horario-semana-organizada .horario-dia.tem-intervalo .horario-periodo-opcional .horario-periodo-rotulo {
        grid-column: 1 / 3;
        grid-row: 2;
        min-width: 0;
        overflow: hidden;
        letter-spacing: 0.04em;
        line-height: 1.15;
        align-self: center;
    }

    .horario-semana-organizada .horario-dia.tem-intervalo .horario-periodo-opcional .horario-campos {
        grid-column: 3;
        grid-row: 2;
        min-width: 0;
    }
}

.horario-dia.dia-fechado .horario-periodo {
    display: none;
}

.merchant-timezone {
    max-width: none;
}

/* Salvar fixo acima da tabbar. */
.merchant-profile-savebar {
    position: fixed;
    z-index: 5;
    right: 0;
    bottom: calc(56px + env(safe-area-inset-bottom));
    left: 0;
    padding: 9px 16px;
    align-items: center;
    gap: 10px;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    background: var(--white);
}

.merchant-profile-savebar div {
    min-width: 0;
    line-height: 1.2;
}

.merchant-profile-savebar strong {
    font-size: 12.5px;
}

.merchant-profile-savebar span {
    color: var(--ink-soft);
    font-size: 11px;
}

.merchant-profile-savebar .button {
    flex: 1;
    max-width: 220px;
    min-height: 40px;
    border-width: 1px;
    border-radius: 6px;
    border-color: var(--coral-dark);
    font-size: 14px;
}

.merchant-profile-savebar .button:hover {
    transform: none;
}

@media (min-width: 880px) {
    .merchant-profile-savebar {
        position: static;
        padding: 12px 14px;
        border: 1px solid var(--line);
        border-radius: var(--radius);
    }

    .merchant-profile-main {
        display: grid;
        padding-bottom: 40px;
        justify-items: center;
    }

    .merchant-profile-main > .merchant-page-header,
    .merchant-profile-main > .merchant-profile-form {
        width: min(100%, 920px);
    }
}


/* ============================================================================
   Nova oferta — layout compacto.
   O formulario tinha quatro cartoes altos, chips de duracao em carrossel e um
   cartao de resumo antes do botao. Aqui a acao acompanha a rolagem e a previa
   passa a ser o cartao real da vitrine.
   ========================================================================= */

.new-offer-form {
    margin-top: 10px;
    padding-bottom: calc(70px + env(safe-area-inset-bottom));
}

.new-offer-fields {
    gap: 10px;
}

.new-offer-card {
    padding: 12px;
    gap: 9px;
    border-radius: var(--radius);
}

.new-offer-card .step-head {
    font-size: 10.5px;
    letter-spacing: 0.12em;
}

.new-offer-card .step-head i {
    width: 20px;
    height: 20px;
    font-size: 10.5px;
}

.new-offer-card .field {
    align-content: start;
    gap: 3px;
}

/* Erro fica compacto sob o campo, sem alterar a altura do proprio campo. */
.new-offer-card .field-error {
    margin: 0;
    font-size: 11.5px;
    line-height: 1.25;
}

.new-offer-card .field-label {
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.2;
}

.new-offer-card .field input,
.new-offer-card button.new-offer-category-trigger {
    box-sizing: border-box;
    height: 32px;
    min-height: 32px;
    max-height: 32px;
    padding: 0 9px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 13.5px;
    line-height: 1;
}

.new-offer-product input[data-live-title] {
    font-size: 13.5px;
}

.new-offer-photo-slots {
    gap: 8px;
}

.new-offer-photo-actions .button {
    min-height: 34px;
    padding: 0 12px;
    border-width: 1px;
    border-radius: 6px;
    font-size: 13px;
}

.new-offer-photo-actions .button:hover {
    transform: none;
}

.new-offer-help {
    font-size: 11.5px;
    line-height: 1.35;
}

/* Preco: o R$ vira prefixo do proprio campo, na mesma altura dos demais. */
.new-offer-money-control {
    height: 32px;
    min-height: 32px;
    max-height: 32px;
    align-self: start;
    padding-left: 9px;
    border-width: 1px;
    border-radius: 8px;
    gap: 2px;
}

.new-offer-money-control > span {
    color: var(--ink-soft);
    font-size: 12.5px;
    font-weight: 700;
}

.new-offer-card .new-offer-money-control input {
    height: 30px;
    min-height: 30px;
    max-height: 30px;
    padding: 0 6px;
    border: 0;
    font-size: 13.5px;
    font-variant-numeric: tabular-nums;
}

.new-offer-live-row {
    min-height: 0;
    margin-top: 2px;
    padding-top: 8px;
    border-top: 1px solid var(--line-soft);
    font-size: 12px;
}

.new-offer-live-price {
    font-size: 16px;
}

/* Unidades e limite dividem a linha. */
.new-offer-stock-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    align-items: start;
    gap: 8px;
}

.new-offer-limit .new-offer-limit-row {
    display: grid;
    min-height: 0;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
}

.new-offer-limit-toggle {
    display: inline-flex;
    height: 32px;
    padding: 0 9px;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--white);
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
}

.new-offer-limit-toggle input {
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: var(--ink);
}

.new-offer-limit-toggle input:focus-visible {
    outline: none;
}

.new-offer-limit-toggle:has(input:checked) {
    border-color: var(--ink);
    background: var(--paper);
}

.new-offer-limit-toggle > span {
    min-height: 0;
    padding: 0;
    color: inherit;
    background: transparent;
    border-radius: 0;
    font-size: 12.5px;
    font-weight: 700;
}

.new-offer-limit-field {
    display: block;
}

.new-offer-limit-field.sem-limite {
    opacity: 0.45;
}

/* Duracao: as sete opcoes cabem na tela, em ordem. */
.new-offer-duration-options,
.new-offer-duration .new-offer-duration-options {
    display: grid;
    margin-top: 3px;
    padding: 0;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 5px;
    overflow: visible;
    contain: none;
}

.new-offer-duration-option span {
    display: grid;
    width: 100%;
    min-height: 30px;
    padding: 0;
    place-items: center;
    border-width: 1px;
    border-radius: 6px;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

/* Previa: o cartao da vitrine em escala menor. */
.new-offer-preview-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: start;
    gap: 10px;
}

.new-offer-feed-preview .new-offer-preview-card {
    overflow: hidden;
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    background: var(--white);
}

.new-offer-preview-card .product-art {
    aspect-ratio: 4 / 5;
    min-height: 0;
}

.new-offer-preview-card .product-body {
    padding: 10px;
}

.new-offer-preview-card .product-heading {
    padding: 10px 10px 8px;
}

.new-offer-preview-card h3 {
    margin: 0;
    font-size: 14px;
    line-height: 1.15;
}

.new-offer-preview-card .storefront-price-tag {
    margin: 9px 0 10px 9px;
    padding: 5px 7px 5px calc(14% - 7px);
}

.new-offer-preview-card .price-old {
    font-size: 10px;
}

.new-offer-preview-card .price-discount {
    padding: 2px 5px;
    font-size: 9px;
}

.new-offer-preview-card .price-new {
    font-size: 19px;
}

.new-offer-preview-card .storefront-offer-actions {
    padding-top: 8px;
    gap: 6px;
}

.new-offer-preview-card .storefront-stock {
    min-height: 26px;
    padding: 4px 6px;
    font-size: 10.5px;
}

.new-offer-preview-note {
    margin: 0;
    padding-left: 9px;
    border-left: 2px solid var(--line);
    color: var(--ink-soft);
    font-size: 11.5px;
    line-height: 1.4;
}

.new-offer-preview-note [data-live-preview-duration] {
    display: block;
    color: var(--ink);
    font-weight: 800;
}

/* Resumo sem cartao amarelo; o compromisso vira linha. */
.new-offer-form .summary-card {
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
}

.new-offer-form .summary-card .eyebrow {
    margin-bottom: 4px;
    font-size: 10.5px;
    letter-spacing: 0.14em;
}

.new-offer-form .summary-line {
    padding: 5px 0;
    gap: 10px;
    border-bottom-color: var(--line-soft);
    font-size: 12.5px;
    color: var(--ink-soft);
}

.new-offer-form .summary-line strong {
    color: var(--ink);
    font-size: 13.5px;
}

.new-offer-commitment {
    margin: 9px 0 0;
    padding-top: 9px;
    border-top: 1px solid var(--mustard);
    color: var(--ink-soft);
    font-size: 11.5px;
    line-height: 1.4;
}

.new-offer-commitment strong {
    display: block;
    color: var(--ink);
    font-size: 12.5px;
}

.new-offer-form .summary-card .small-copy {
    margin-top: 7px;
    font-size: 11px;
    line-height: 1.35;
}

/* Publicar acompanha a rolagem no celular. */
.new-offer-publish-bar {
    position: fixed;
    z-index: 5;
    right: 0;
    bottom: calc(56px + env(safe-area-inset-bottom));
    left: 0;
    display: flex;
    padding: 9px 16px;
    align-items: center;
    gap: 10px;
    border-top: 1px solid var(--line);
    background: var(--white);
}

.new-offer-publish-summary {
    min-width: 0;
    margin: 0;
    line-height: 1.2;
}

.new-offer-publish-summary strong {
    display: block;
    font-size: 12.5px;
}

.new-offer-publish-summary span {
    color: var(--ink-soft);
    font-size: 11px;
}

.new-offer-publish-bar .button {
    flex: 1;
    max-width: 220px;
    min-height: 40px;
    border-width: 1px;
    border-radius: 6px;
    border-color: var(--coral-dark);
    font-size: 14px;
}

.new-offer-publish-bar .button:hover {
    transform: none;
}

@media (min-width: 880px) {
    .new-offer-publish-bar {
        position: static;
        padding: 12px;
        border: 1px solid var(--line);
        border-radius: var(--radius);
    }

    .new-offer-form {
        padding-bottom: 0;
    }
}


/* Nova oferta, passo do codigo de barras: pergunta curta, acoes lado a lado. */
.merchant-new-section > div > .eyebrow {
    margin-bottom: 1px;
    font-size: 10.5px;
    letter-spacing: 0.16em;
}

.merchant-new-section .dashboard-title {
    margin-block: 0;
    font-size: 26px;
    line-height: 1.05;
}

.merchant-new-section > div > .lead {
    margin-block: 2px 0;
    font-size: 12.5px;
}

.new-offer-barcode-question {
    padding: 12px;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    border-width: 1px;
    border-color: var(--line);
    border-radius: var(--radius);
}

.new-offer-barcode-question .eyebrow {
    margin-bottom: 0;
    font-size: 10px;
    letter-spacing: 0.14em;
}

.new-offer-barcode-question h3 {
    margin: 1px 0 0;
    font-size: 19px;
    line-height: 1.15;
}

.new-offer-barcode-question p {
    margin: 4px 0 0;
    color: var(--ink-soft);
    font-size: 12.5px;
    line-height: 1.4;
}

.new-offer-barcode-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-small);
    color: var(--white);
}

.new-offer-barcode-icon svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
}

.new-offer-barcode-actions {
    grid-column: 1 / -1;
    margin-top: 10px;
    padding-top: 10px;
    gap: 8px;
    border-top: 1px solid var(--line-soft);
}

.new-offer-barcode-actions form {
    flex: 1;
}

.new-offer-barcode-actions .button {
    width: 100%;
    min-height: 40px;
    padding: 0 14px;
    border-width: 1px;
    border-radius: 6px;
    font-size: 14px;
}

.new-offer-barcode-actions .button:hover {
    transform: none;
}

.new-offer-barcode-actions .button.primary {
    border-color: var(--coral-dark);
}

.new-offer-barcode-actions > .button:not(.primary) {
    width: auto;
    flex: 0 0 auto;
}


/* ============================================================================
   Painel de ofertas — layout compacto.
   Os indicadores viravam quatro cartoes altos, os chips da lista eram cortados
   na borda e cada oferta gastava uma tela. Aqui tudo cabe sem rolagem lateral.
   ========================================================================= */

.merchant-panel-heading {
    padding: 12px;
    margin-bottom: 10px;
    align-items: flex-start;
    gap: 10px;
}

.merchant-panel-heading .eyebrow {
    margin-bottom: 1px;
    font-size: 10.5px;
    letter-spacing: 0.16em;
}

.merchant-panel-heading .dashboard-title {
    margin-block: 0;
    font-size: 26px;
    line-height: 1.05;
}

.merchant-panel-heading .lead {
    margin-block: 2px 0;
    font-size: 12.5px;
}

/* Avisos tipograficos. */
.merchant-toast-region {
    position: fixed;
    z-index: 100;
    top: 16px;
    right: 16px;
    left: 16px;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

/* O aviso nascia branco sobre pagina clara e passava despercebido. Cada estado
   ganha superficie tingida, barra lateral e icone: a leitura nao depende so da
   cor, e o texto escuro sobre fundo suave mantem o contraste AA. */
.merchant-toast {
    display: grid;
    width: min(100%, 480px);
    grid-template-columns: 20px minmax(0, 1fr) 28px;
    align-items: start;
    gap: 10px;
    padding: 13px 14px 13px 14px;
    border: 1px solid var(--green);
    border-left: 5px solid var(--green);
    border-radius: 10px;
    background: #ecfdf5;
    color: #14532d;
    font-size: 13px;
    line-height: 1.35;
    pointer-events: auto;
    transition: opacity 180ms ease, transform 180ms ease;
}

.merchant-toast strong,
.merchant-toast span {
    display: block;
}

.merchant-toast-icon {
    width: 20px;
    height: 20px;
    margin-top: 1px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.merchant-toast.ok strong {
    color: #14532d;
}

/* Ambar para o aviso: alerta sem a agressividade do vermelho. */
.merchant-toast.erro {
    border-color: #d97706;
    border-left-color: #b45309;
    background: #fef3c7;
    color: #78350f;
}

.merchant-toast.erro strong {
    color: #78350f;
}

.merchant-toast.erro span {
    color: #92400e;
}

.merchant-toast span {
    margin-top: 2px;
    color: #166534;
}

.merchant-toast-close {
    width: 28px;
    height: 28px;
    margin: -4px -4px -4px 0;
    flex: 0 0 auto;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    opacity: 0.75;
}

.merchant-toast-close:hover {
    background: rgb(19 36 58 / 8%);
    opacity: 1;
}

.merchant-toast-close:focus-visible {
    outline: 2px solid var(--signal-blue);
    outline-offset: 2px;
}

.merchant-toast.is-closing {
    opacity: 0;
    transform: translateY(-8px);
}

@media (max-width: 480px) {
    .merchant-toast-region {
        top: 8px;
        right: 8px;
        left: 8px;
    }
}

/* As classes utilitarias `.erro`, `.sucesso` e `.aviso` desenham caixa: borda
   de 2px nos quatro lados, fundo e raio. Quando o mesmo elemento tambem e um
   aviso tipografico, sobrava a caixa nas laterais e so a linha de baixo ficava
   com 1px, o que aparecia como borda inferior mais fina. Zerar a caixa aqui
   devolve a regra fina em todos os estados. */
.merchant-flash {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 10px;
    padding: 0 0 8px;
    border: 0;
    border-radius: 0;
    background: transparent;
    align-items: baseline;
    gap: 0 6px;
    border-bottom: 1px solid var(--line);
    font-size: 13px;
    line-height: 1.35;
}

.merchant-flash span {
    color: var(--ink-soft);
}

.merchant-flash.ok {
    border-bottom-color: var(--green);
}

.merchant-flash.ok strong {
    color: var(--green);
}

.merchant-flash.erro {
    border-bottom-color: var(--coral);
}

.merchant-flash.erro strong {
    color: var(--coral-dark);
}

.dashboard-expiry-notice {
    display: block;
    margin: 0 0 10px;
    padding: 0 0 9px;
    border: 0;
    border-bottom: 1px solid var(--mustard);
    border-radius: 0;
    background: transparent;
    color: var(--ink-soft);
    font-size: 11.5px;
    line-height: 1.4;
}

.dashboard-expiry-notice strong {
    display: block;
    color: var(--ink);
    font-size: 12.5px;
}

/* Indicadores do painel: rotulo a esquerda, numero a direita, uma linha cada.
   Escopado ao painel e a administracao: no feed publico a mesma grade explica
   os passos e precisa manter a descricao. */
.dashboard-main .stats-grid,
.admin-body .stats-grid {
    margin: 0 0 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.dashboard-main .stat-card,
.admin-body .stat-card {
    display: flex;
    min-height: 38px;
    padding: 6px 9px;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.dashboard-main .stat-card span,
.admin-body .stat-card span {
    min-width: 0;
    overflow: hidden;
    font-size: 11px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-main .stat-card strong,
.admin-body .stat-card strong {
    flex: 0 0 auto;
    margin-top: 0;
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 18px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.dashboard-main .stat-card .small-copy,
.admin-body .stat-card .small-copy {
    display: none;
}

/* Busca: campo, botao e leitura por codigo na mesma linha. */
.offer-finder {
    margin-bottom: 10px;
    padding: 12px;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    border-radius: var(--radius);
    background: var(--white);
}

.offer-finder .field {
    gap: 3px;
}

.offer-finder .field-label {
    font-size: 11.5px;
    font-weight: 700;
}

.offer-finder-input {
    gap: 8px;
}

.offer-finder .field input {
    min-height: 34px;
    padding: 0 9px;
    border-width: 1px;
    border-color: var(--line);
    border-radius: 8px;
    font-size: 13.5px;
    line-height: 1;
}

.offer-finder .button {
    min-height: 34px;
    padding: 0 12px;
    border-width: 1px;
    border-radius: 6px;
    font-size: 13px;
}

.offer-finder .button:hover {
    transform: none;
}

.offer-finder-scan {
    display: grid;
    width: 34px;
    min-height: 34px;
    padding: 0;
    place-items: center;
}

.offer-finder-scan svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
}

.offer-finder-scan-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.offer-search-result {
    margin: 0 0 10px;
    font-size: 12.5px;
}

/* Abas sem barra de rolagem visivel. */
.offer-tabs {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.offer-tabs::-webkit-scrollbar {
    display: none;
}

/* Lista: os cinco dados em texto, status e acao na coluna da direita. */
.data-card-heading {
    padding: 12px 12px 9px;
    font-size: 13.5px;
}

.offer-row {
    padding: 10px 12px;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: start;
    gap: 4px 10px;
    border-bottom-color: var(--line-soft);
}

.offer-thumb,
img.offer-thumb {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-small);
    background-image: none;
}

.offer-title {
    min-width: 0;
    overflow: hidden;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.offer-title-row,
.offer-edit-title {
    display: flex;
    align-items: center;
    gap: 6px;
}

.barcode-indicator {
    width: 18px;
    height: 12px;
    flex: 0 0 auto;
    color: var(--ink-soft);
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 1.6;
}

.offer-edit-title .barcode-indicator {
    width: 22px;
    height: 14px;
}

.offer-edit-title .dashboard-title {
    min-width: 0;
}

.barcode-indicator-confirmed {
    width: 32px;
    height: 22px;
    flex: 0 0 32px;
    color: var(--green, #247a45);
}

.offer-row .chip-row {
    margin-top: 3px;
    gap: 2px 10px;
}

.offer-row .chip {
    padding: 0;
    border: 0;
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.offer-row .chip::before {
    content: none;
}

.offer-row .chip .countdown {
    color: var(--ink);
    font-weight: 700;
}

.offer-expiry {
    display: flex;
    margin: 2px 0 0;
    align-items: baseline;
    gap: 4px;
    font-size: 10.5px;
}

.offer-expiry .row-label {
    font-size: 10.5px;
}

.offer-expiry strong {
    font-size: 10.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.offer-row-side {
    display: grid;
    justify-items: end;
    gap: 6px;
}

/* O interruptor cola a esquerda da bandeirola porque ela ja diz o estado da
   oferta: o rotulo visivel repetia o recado e roubava largura dos cinco dados. */
.offer-status-line {
    display: flex;
    align-items: center;
    gap: 4px;
}

.offer-row .status-badge {
    flex: 0 0 auto;
}

/* Form em flex: como bloco, o rotulo inline-flex criava linha de texto e o
   descendente empurrava o quadrado para cima da bandeirola. */
.offer-row .merchant-delivery-row {
    display: flex;
    align-items: center;
}

.offer-row .merchant-delivery-switch {
    width: 28px;
    height: 22px;
    padding: 0;
    justify-content: center;
    gap: 0;
    border-radius: 6px;
}

.offer-row .merchant-delivery-switch input {
    width: 15px;
    height: 15px;
}

.offer-row .status-badge {
    min-height: 20px;
    padding: 3px 13px 3px 7px;
    clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 50%, 100% 100%, 0 100%);
    font-size: 9.5px;
}

.offer-row .button.small {
    min-height: 28px;
    padding: 0 10px;
    border-width: 1px;
    border-radius: 6px;
    font-size: 12px;
}

.offer-row .button.small:hover {
    transform: none;
}

/* Desktop: a linha vira flex sem quebra. Miniatura, dados e acoes ficam sempre
   na mesma faixa e so os cinco dados reagem quando a janela aperta. */
@media (min-width: 880px) {
    .offer-row {
        display: flex;
        padding: 10px 16px;
        align-items: center;
        gap: 14px;
        flex-wrap: nowrap;
    }

    .offer-thumb,
    img.offer-thumb {
        width: 56px;
        height: 56px;
        flex: 0 0 56px;
    }

    .offer-meta {
        flex: 1 1 auto;
        min-width: 0;
    }

    .offer-title {
        font-size: 15px;
    }

    .offer-facts {
        display: flex;
        margin-top: 4px;
        align-items: baseline;
        gap: 4px 14px;
        flex-wrap: wrap;
    }

    .offer-row .chip-row {
        margin-top: 0;
        gap: 4px 14px;
    }

    .offer-row .chip {
        font-size: 12px;
    }

    .offer-expiry {
        margin: 0;
        font-size: 11px;
    }

    /* Divisor curto separa a expiracao dos cinco dados sem abrir outra linha. */
    .offer-expiry::before {
        width: 1px;
        height: 11px;
        margin-right: 10px;
        background: var(--line);
        content: "";
    }

    .offer-row-side {
        margin-left: auto;
        gap: 7px;
        flex: 0 0 auto;
    }

    .offer-status-line {
        gap: 5px;
    }

    .offer-row .merchant-delivery-switch {
        width: 30px;
        height: 24px;
    }
}

@media (min-width: 880px) {
    .dashboard-main .stats-grid,
    .admin-body .stats-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .dashboard-main .stat-card,
    .admin-body .stat-card {
        display: block;
        min-height: 0;
        padding: 14px;
    }

    .dashboard-main .stat-card span,
    .admin-body .stat-card span {
        white-space: normal;
    }

    .dashboard-main .stat-card strong,
    .admin-body .stat-card strong {
        display: block;
        margin-top: 3px;
        font-size: 26px;
    }

    .dashboard-main .stat-card .small-copy,
    .admin-body .stat-card .small-copy {
        display: block;
        margin-top: 3px;
    }
}


/* ============================================================================
   Plano — layout compacto.
   O cabecalho, a situacao e o catalogo ocupavam tres blocos com a mesma
   informacao; os planos vinham em dois por linha e ficavam cortados.
   ========================================================================= */

.merchant-plan-header {
    padding: 12px;
    margin-bottom: 0;
    align-items: flex-start;
    gap: 10px;
}

.merchant-plan-header .eyebrow {
    margin-bottom: 1px;
    font-size: 10.5px;
    letter-spacing: 0.16em;
}

.merchant-plan-header .dashboard-title {
    margin-block: 0;
    font-size: 26px;
    line-height: 1.05;
}

.merchant-plan-header .lead {
    margin-block: 2px 0;
    font-size: 12.5px;
}

.plan-facts {
    display: grid;
    margin: 10px 0 0;
    padding-top: 9px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px 10px;
    border-top: 1px solid var(--line-soft);
}

.plan-facts dt {
    color: var(--ink-soft);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.plan-facts dd {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.25;
}

.plan-fact-ok {
    color: var(--green);
}

.plan-fact-wide {
    grid-column: 1 / -1;
}

.plan-fact-wide dd {
    color: var(--ink-soft);
    font-size: 12.5px;
    font-weight: 500;
}

/* Secoes. */
.dashboard-main .section-heading {
    margin-bottom: 9px;
}

.dashboard-main .section-heading .eyebrow {
    margin-bottom: 1px;
    font-size: 10px;
    letter-spacing: 0.14em;
}

.dashboard-main .section-heading h2 {
    margin-block: 0;
    font-size: 19px;
    line-height: 1.15;
}

/* A pagina de plano e curta: 64px entre secoes empurravam os planos para fora
   da primeira dobra sem separar nada melhor que uma folga discreta. */
.dashboard-main .section {
    margin-top: 18px;
}

/* Teste gratis: cartao curto com titulo, condicao e acao no tamanho padrao. */
.trial-card {
    display: grid;
    padding: 16px 18px;
    gap: 5px;
    justify-items: start;
}

.trial-card-titulo {
    margin-block: 0;
    font-size: 18px;
    line-height: 1.2;
}

.trial-card-detalhe {
    margin: 0;
    color: var(--ink-soft);
    font-size: 13.5px;
    line-height: 1.35;
}

.trial-card form {
    margin-top: 7px;
}

.trial-card .button {
    width: auto;
    min-height: 38px;
    padding: 0 16px;
    border-width: 1px;
    border-radius: 6px;
    font-size: 14px;
}

.trial-card .button:hover {
    transform: none;
}

.trial-card .button.primary {
    border-color: var(--coral-dark);
}

.trial-card .button.primary:hover {
    background: var(--coral-dark);
}

/* Planos: uma linha cada, com o vigente marcado. */
.plan-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
}

.plan-card {
    display: grid;
    min-height: 0;
    padding: 8px 9px;
    grid-template-columns: 16px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    border: 1px solid var(--line);
    border-radius: var(--radius-small);
    background: var(--white);
    cursor: pointer;
}

.plan-card input {
    position: static;
    width: 16px;
    height: 16px;
    margin: 0;
    opacity: 1;
    accent-color: var(--coral);
}

.plan-card:has(input:checked) {
    border-color: var(--ink);
    background: var(--paper);
}

.plan-card-atual {
    border-left: 3px solid var(--green);
}

.plan-card-name {
    display: grid;
    min-width: 0;
    gap: 1px;
}

.plan-card-name strong {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
}

.plan-card-name .muted {
    font-size: 11.5px;
}

.plan-card-price {
    flex: 0 0 auto;
    font-size: 13.5px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.plan-card-price small {
    color: var(--ink-soft);
    font-size: 10.5px;
    font-weight: 500;
}

.plan-card-price-prorata {
    display: grid;
    gap: 2px;
    justify-items: end;
    white-space: normal;
}

.plan-card-price-prorata strong {
    font-size: 13.5px;
}

.plan-card-price-prorata .plan-card-price-eyebrow {
    font-size: 9.5px;
    line-height: 1;
}

/* Pagamento: os dois passos no mesmo cartao. */
.plan-payment-grid {
    display: grid;
    margin-top: 10px;
    padding: 12px;
    gap: 8px;
    border-width: 1px;
    border-color: var(--line);
    border-radius: var(--radius);
}

.plan-payment-grid .step-head {
    margin-bottom: 0;
    font-size: 10.5px;
    letter-spacing: 0.12em;
}

.plan-payment-grid .step-head i {
    width: 20px;
    height: 20px;
    font-size: 10.5px;
}

.plan-step-two {
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid var(--line-soft);
}

.plan-payment-grid .field-label {
    font-size: 11.5px;
    font-weight: 700;
}

.plan-payment-grid .copy-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}

.plan-payment-grid .copy-field code {
    display: flex;
    height: 32px;
    padding: 0 9px;
    align-items: center;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    font-size: 12.5px;
    white-space: nowrap;
}

.plan-payment-grid .button.small {
    min-height: 32px;
    padding: 0 12px;
    border-width: 1px;
    border-radius: 6px;
    font-size: 13px;
}

.plan-payment-grid .button.small:hover {
    transform: none;
}

/* Comprovante: faixa baixa, com o nome do arquivo abaixo. */
.plan-upload {
    display: grid;
    gap: 6px;
}

.plan-upload .upload-zone {
    display: flex;
    min-height: 34px;
    margin: 0;
    padding: 0 10px;
    align-items: center;
    border: 1px dashed var(--line);
    border-radius: 8px;
    background: var(--paper);
    text-align: left;
}

.plan-upload .upload-zone::before {
    content: none;
}

.plan-upload .upload-zone > span {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 700;
}

.plan-upload .upload-zone svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    fill: none;
    stroke: var(--ink-soft);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.plan-upload .field-hint {
    font-size: 11px;
    line-height: 1.35;
}

.plan-upload [data-nome-arquivo-alvo] {
    color: var(--ink);
    font-weight: 700;
}

.plan-upload.tem-arquivo .upload-zone {
    border-style: solid;
    border-color: var(--ink);
}

/* Enviar acompanha a rolagem no celular. */
.plan-submit-bar {
    position: fixed;
    z-index: 5;
    right: 0;
    bottom: calc(56px + env(safe-area-inset-bottom));
    left: 0;
    display: flex;
    padding: 9px 16px;
    align-items: center;
    gap: 10px;
    border-top: 1px solid var(--line);
    background: var(--white);
}

.plan-submit-copy {
    min-width: 0;
    margin: 0;
    line-height: 1.2;
}

.plan-submit-copy strong {
    display: block;
    font-size: 12.5px;
}

.plan-submit-copy span {
    color: var(--ink-soft);
    font-size: 11px;
}

.plan-submit-bar .button {
    flex: 1;
    max-width: 200px;
    min-height: 40px;
    border-width: 1px;
    border-color: var(--coral-dark);
    border-radius: 6px;
    font-size: 14px;
}

.plan-submit-bar .button:hover {
    transform: none;
}

.plan-checkout {
    padding-bottom: calc(70px + env(safe-area-inset-bottom));
}

/* Historico em linhas. */
.plan-payment-list {
    padding: 12px;
}

.plan-payment-row {
    display: flex;
    margin: 0;
    padding: 7px 0;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    border-top: 1px solid var(--line-soft);
    font-size: 12.5px;
}

.plan-payment-row:first-child {
    padding-top: 0;
    border-top: 0;
}

.plan-payment-row strong {
    font-variant-numeric: tabular-nums;
}

.plan-payment-status {
    color: var(--ink-soft);
    white-space: nowrap;
}

.dashboard-main .empty-state {
    padding: 14px;
    border-width: 1px;
    border-color: var(--line);
    border-radius: var(--radius);
    font-size: 12.5px;
}

@media (min-width: 880px) {
    .plan-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .plan-submit-bar {
        position: static;
        margin-top: 10px;
        padding: 12px;
        border: 1px solid var(--line);
        border-radius: var(--radius);
    }

    .plan-checkout {
        padding-bottom: 0;
    }
}


/* ============================================================================
   QR da loja — layout compacto.
   O cabecalho e o cartao de link repetiam endereco e acoes; sobravam cinco
   botoes de largura total antes do cartaz.
   ========================================================================= */

.merchant-qr-header {
    padding: 12px;
    margin-bottom: 10px;
    align-items: flex-start;
    gap: 10px;
}

.merchant-qr-header .eyebrow {
    margin-bottom: 1px;
    font-size: 10.5px;
    letter-spacing: 0.16em;
}

.merchant-qr-header .dashboard-title {
    margin-block: 0;
    font-size: 26px;
    line-height: 1.05;
}

.merchant-qr-header .lead {
    margin-block: 2px 0;
    font-size: 12.5px;
}

.qr-permalink {
    display: grid;
    margin-top: 10px;
    padding-top: 10px;
    gap: 4px;
    border-top: 1px solid var(--line-soft);
}

.qr-permalink .copy-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}

.qr-permalink code {
    display: flex;
    height: 32px;
    padding: 0 9px;
    align-items: center;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    font-size: 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.qr-permalink .field-hint {
    font-size: 11px;
    line-height: 1.35;
}

.qr-actions {
    display: grid;
    margin-top: 10px;
    padding-top: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    border-top: 1px solid var(--line-soft);
}

.qr-action-wide {
    grid-column: 1 / -1;
}

.merchant-qr-header .button {
    width: 100%;
    min-height: 34px;
    padding: 0 12px;
    border-width: 1px;
    border-radius: 6px;
    font-size: 13px;
}

.merchant-qr-header .button:hover {
    transform: none;
}

.merchant-qr-header .button.primary {
    border-color: var(--coral-dark);
}

/* Cartaz de balcao: fundo local sem controles, pronto para impressao. */
.qr-store-layout {
    margin-top: 0;
}

/*
 * Previa do cartaz: as mesmas medidas do PNG A4 gerado em CartazQrPng, so que
 * em `cqw` — 1cqw equivale a 12,4px do arquivo final, entao o que aparece aqui
 * e o que sai na impressora, apenas menor.
 */
.print-poster.qr-poster-card {
    position: relative;
    container-type: inline-size;
    isolation: isolate;
    width: min(100%, 420px);
    /* Sem o padding herdado de `.print-poster` o `cqw` mede a folha inteira. */
    padding: 0;
    aspect-ratio: 1240 / 1754;
    margin-inline: auto;
    overflow: hidden;
    border: 0;
    border-radius: 16px;
    background: #13243a;
}

.qr-poster-background,
.qr-poster-overlay,
.qr-poster-frame {
    position: absolute;
    inset: 0;
}

.qr-poster-background {
    z-index: 0;
    background: url("/images/superofertas-hero-bd15f658.webp") center / cover;
}

/* Veu escuro: a foto vira fundo e para de disputar com o QR. */
.qr-poster-overlay {
    z-index: 1;
    background: linear-gradient(
        to bottom,
        rgb(19 36 58 / 84%),
        rgb(19 36 58 / 94%)
    );
}

.qr-poster-frame {
    z-index: 2;
    margin: 3.39cqw;
    border: 0.56cqw solid rgb(244 184 63 / 55%);
    border-radius: 2.26cqw;
}

.qr-poster-inner {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: block;
}

.qr-poster-logos {
    position: absolute;
    top: 7.74cqw;
    left: 12.1cqw;
    display: flex;
    width: 75.8cqw;
    height: 16.94cqw;
    align-items: center;
    justify-content: center;
    padding: 2.74cqw;
    gap: 2.74cqw;
    border-radius: 3.23cqw;
    background: #fffdf8;
}

.qr-poster-logo-divider {
    width: 0.16cqw;
    height: 8.4cqw;
    background: #e3ddd0;
}

.qr-poster-super-logo,
.qr-poster-merchant-logo {
    display: block;
    width: 33cqw;
    height: 11.4cqw;
    object-fit: contain;
}

.qr-poster-headline {
    position: absolute;
    top: 26.6cqw;
    left: 0;
    width: 100%;
    margin: 0;
    color: #fffdf8;
    font-family: "Bitter", Georgia, serif;
    font-size: 6.94cqw;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
}

/* Painel claro: o leitor de QR acerta sempre que o fundo dele e solido. */
.qr-poster-panel {
    position: absolute;
    top: 46.77cqw;
    left: 9.68cqw;
    display: flex;
    width: 80.65cqw;
    height: 74.19cqw;
    flex-direction: column;
    align-items: center;
    padding: 4.52cqw;
    border: 0.48cqw solid #f4b83f;
    border-radius: 3.55cqw;
    background: #fffdf8;
}

.qr-poster-code {
    display: block;
    width: 48.39cqw;
    height: 48.39cqw;
}

.qr-poster-instruction {
    margin: 2.6cqw 0 0;
    color: #13243a;
    font-size: 3.87cqw;
    font-weight: 700;
    line-height: 1.2;
}

.qr-poster-support {
    margin: 0.9cqw 0 0;
    color: #405066;
    font-size: 2.9cqw;
    line-height: 1.2;
}

.qr-poster-address {
    width: 51.6cqw;
    margin: 2.4cqw 0 0;
    padding-top: 2.4cqw;
    border-top: 0.08cqw solid #e3ddd0;
    color: #ef5b45;
    font-size: 3.06cqw;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    overflow-wrap: anywhere;
}

.qr-poster-signature {
    position: absolute;
    top: 124cqw;
    left: 0;
    width: 100%;
    text-align: center;
}

.qr-poster-store-label {
    margin: 0;
    color: #f4b83f;
    font-size: 2.42cqw;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1.2;
    text-transform: uppercase;
}

.qr-store-name {
    margin: 2.4cqw 0 0;
    color: #fffdf8;
    font-family: "Bitter", Georgia, serif;
    font-size: 5.32cqw;
    font-weight: 700;
    line-height: 1.2;
}

@media print {
    .print-poster.qr-poster-card {
        width: 148mm;
        height: 210mm;
        aspect-ratio: auto;
        margin: 0 auto;
    }
}


/* ============================================================================
   Balcao da reserva — layout compacto.
   Cada estado empilhava cartao, aviso em caixa e resumo em outro cartao: a
   decisao acontece com o consumidor esperando e precisa caber numa tela.
   ========================================================================= */

.site-header.counter-header .header-inner {
    min-height: 56px;
    gap: 12px;
}

.site-header.counter-header .brand-logo {
    height: 42px;
}

.site-header.counter-header .button.small {
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 12.5px;
}

.site-header.counter-header .button.small:hover {
    transform: none;
    background: var(--paper-deep);
}

.page-shell.counter-page {
    padding-block: 12px 24px;
}

.counter-page .scan-result {
    padding: 12px;
    border-width: 1px;
    border-color: var(--line);
    border-radius: var(--radius);
}

.counter-page .page-heading-row {
    align-items: flex-start;
    gap: 10px;
}

.counter-page .eyebrow {
    margin-bottom: 1px;
    font-size: 10.5px;
    letter-spacing: 0.16em;
}

.counter-title {
    margin-block: 0;
    font-size: 23px;
    line-height: 1.1;
}

.counter-page .lead {
    margin-block: 4px 0;
    font-size: 12.5px;
    line-height: 1.4;
}

.counter-page .status-badge {
    min-height: 22px;
    padding: 4px 16px 4px 8px;
    clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 50%, 100% 100%, 0 100%);
    font-size: 10.5px;
}

/* Avisos tipograficos no lugar das caixas. */
/* As classes utilitarias `.erro`, `.sucesso` e `.aviso` desenham caixa: borda
   de 2px nos quatro lados, fundo e raio. Quando o mesmo elemento tambem e um
   aviso tipografico, sobrava a caixa nas laterais e so a linha de baixo ficava
   com 1px, o que aparecia como borda inferior mais fina. Zerar a caixa aqui
   devolve a regra fina em todos os estados. */
.counter-flash {
    display: flex;
    flex-wrap: wrap;
    margin: 10px 0 0;
    padding: 9px 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    align-items: baseline;
    gap: 0 5px;
    border-top: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: 11.5px;
    line-height: 1.4;
}

.counter-flash strong {
    display: block;
    width: 100%;
    font-size: 12.5px;
}

.counter-flash.ok {
    border-top-color: var(--green);
}

.counter-flash.ok strong {
    color: var(--green);
}

.counter-flash.aviso {
    border-top-color: var(--mustard);
}

.counter-flash.aviso strong {
    color: var(--ink);
}

.counter-flash.perigo {
    border-top-color: var(--coral);
}

.counter-flash.perigo strong {
    color: var(--coral-dark);
}

/* Produto identificado em uma linha. */
.scan-product {
    margin-top: 10px;
    padding: 10px 0 0;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    border-block: 0;
    border-top: 1px solid var(--line-soft);
}

.scan-product > img,
.scan-product .offer-thumb {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-small);
    object-fit: cover;
}

.scan-product h3 {
    margin: 0;
    font-size: 15px;
    line-height: 1.15;
}

.scan-product p {
    margin: 2px 0 0;
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
}

/* Dados da retirada e efeitos em linhas. */
.counter-details {
    margin: 10px 0 0;
    padding-top: 9px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px 10px;
    border-top: 1px solid var(--line-soft);
}

.counter-details .row-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.counter-details strong,
.counter-details p {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.25;
}

.counter-details .reservation-code {
    font-size: 17px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
}

.counter-summary {
    display: grid;
    margin-top: 10px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.counter-summary .summary-line {
    padding: 6px 0;
    gap: 10px;
    border-bottom: 0;
    border-top: 1px solid var(--line-soft);
    color: var(--ink-soft);
    font-size: 12px;
}

.counter-summary .summary-line:first-child {
    border-top: 0;
}

.counter-summary .summary-line strong {
    color: var(--ink);
    font-size: 12.5px;
    text-align: right;
}

/* Acoes: a principal ocupa o espaco, a saida fica ao lado. */
.counter-page .button-row {
    display: grid;
    margin-top: 11px;
    padding-top: 11px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    border-top: 1px solid var(--line-soft);
}

.counter-page .button-row .button {
    width: 100%;
    min-height: 40px;
    padding: 0 14px;
    border-width: 1px;
    border-radius: 6px;
    font-size: 14px;
}

.counter-page .button-row .button:hover {
    transform: none;
}

.counter-page .button-row .button.primary {
    border-color: var(--coral-dark);
}

.counter-footnote {
    margin-top: 9px;
    font-size: 11px;
    line-height: 1.35;
}

/* Estado final: confirmacao curta. */
.counter-page .empty-icon {
    width: 44px;
    height: 44px;
    margin: 0 auto 10px;
    border-width: 1px;
    font-size: 20px;
}

.counter-page .counter-actions {
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
}


/* Reserva finalizada: resultado, produto e dados na mesma tela. */
.counter-final-head {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.counter-final-mark {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 50%;
    background: var(--paper-deep);
    color: var(--ink);
    font-size: 18px;
    font-weight: 800;
}

.counter-final-mark.success {
    color: var(--green);
    background: #e6f4ec;
}

.counter-final-mark.neutral {
    color: #0f5f7a;
    background: #dff1fb;
}

.counter-final-mark.danger {
    color: var(--red);
    background: #fff0ee;
}

.counter-final .counter-title {
    font-size: 21px;
}

.counter-final-facts {
    display: grid;
    margin: 10px 0 0;
    padding-top: 9px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px 10px;
    border-top: 1px solid var(--line-soft);
}

.counter-final-facts dt {
    color: var(--ink-soft);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.counter-final-facts dd {
    margin: 0;
    font-size: 12.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.25;
}

.counter-final-code dd {
    font-size: 16px;
    letter-spacing: 0.04em;
}

.counter-final .counter-actions {
    grid-template-columns: minmax(0, 1fr) auto;
}


/* ============================================================================
   Fila de reservas — layout compacto.
   Cada reserva ocupava quase uma tela e repetia a quantidade em dois lugares.
   ========================================================================= */

.merchant-reservations-heading {
    padding: 12px;
    margin-bottom: 10px;
    align-items: flex-start;
    gap: 10px;
}

.merchant-reservations-heading .eyebrow {
    margin-bottom: 1px;
    font-size: 10.5px;
    letter-spacing: 0.16em;
}

.merchant-reservations-heading .dashboard-title {
    margin-block: 0;
    font-size: 26px;
    line-height: 1.05;
}

.merchant-reservations-heading .lead {
    margin-block: 2px 0;
    font-size: 12.5px;
}

.merchant-reservations-heading .merchant-page-header-buttons {
    gap: 8px;
}

.merchant-reservations-heading .button {
    min-height: 34px;
    padding: 0 12px;
    border-width: 1px;
    border-radius: 6px;
    font-size: 13px;
}

.merchant-reservations-heading .button:hover {
    transform: none;
}

.merchant-reservations-heading .button.primary {
    border-color: var(--coral-dark);
}

.reservation-tabs {
    margin-bottom: 10px;
}

/* Busca em uma linha. */
.reservation-search {
    display: grid;
    margin-bottom: 10px;
    padding: 12px;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: end;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
}

.reservation-search .field {
    gap: 3px;
}

.reservation-search .field-label {
    font-size: 11.5px;
    font-weight: 700;
}

.reservation-search input {
    min-height: 34px;
    padding: 0 9px;
    border-width: 1px;
    border-color: var(--line);
    border-radius: 8px;
    font-size: 13.5px;
    line-height: 1;
}

.reservation-search .button {
    min-height: 34px;
    padding: 0 12px;
    border-width: 1px;
    border-radius: 6px;
    font-size: 13px;
}

.reservation-search .button:hover {
    transform: none;
}

/* Uma reserva por bloco. */
.reservation-card {
    display: block;
    padding: 9px 12px;
    border-bottom: 1px solid var(--line-soft);
}

.reservation-card-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.reservation-card h3 {
    margin: 0;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.2;
}

/* Dados da reserva em duas colunas. */
.reservation-card-dados {
    display: grid;
    margin: 6px 0 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 5px 10px;
}

.reservation-card-dados dt {
    color: var(--ink-soft);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.2;
}

.reservation-card-dados dd {
    margin: 1px 0 0;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.reservation-card-consumidor,
.reservation-card-prazo-item {
    grid-column: 1 / -1;
}

.reservation-card-consumidor dd {
    color: var(--ink);
    font-weight: 700;
}

/* Telefone em linha propria: em uma linha so o nome empurrava o numero para
   fora e o balcao precisa dos dois de relance. */
.reservation-card-consumidor dd a {
    display: block;
    margin-top: 1px;
    color: var(--ink-soft);
    font-size: 11.5px;
    font-weight: 500;
}

@media (min-width: 480px) {
    .reservation-card-consumidor,
    .reservation-card-prazo-item {
        grid-column: auto;
    }
}

.reservation-card .reservation-code {
    /* A regra geral do codigo usa margem propria; dentro da grade quem espaca
       e o gap, senao a linha do codigo desalinha das vizinhas. */
    margin: 0;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.reservation-card-prazo {
    color: var(--ink-soft);
    font-size: 11.5px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.reservation-card-prazo strong {
    color: var(--ink);
}

.reservation-card-prazo .countdown.warn {
    color: #835a00;
}

.reservation-card-prazo .countdown.hot {
    color: var(--coral-dark);
}

.reservation-card .status-badge {
    min-height: 20px;
    padding: 3px 13px 3px 7px;
    clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 50%, 100% 100%, 0 100%);
    font-size: 9.5px;
}

.reservation-card-meta {
    display: block;
    margin-top: 8px;
}

.reservation-card-meta .button-row {
    display: grid;
    margin: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}

.reservation-card-meta .button-row form {
    margin: 0;
}

.reservation-card-meta .button {
    width: 100%;
    min-height: 30px;
    padding: 0 10px;
    border-width: 1px;
    border-radius: 6px;
    font-size: 12.5px;
}

.reservation-card-meta .button:hover {
    transform: none;
}

.reservation-card-meta .button.primary {
    border-color: var(--coral-dark);
}

.reservation-card-meta .button.secondary {
    color: var(--white);
    background: var(--coral);
    border-color: var(--coral-dark);
}

.reservation-card-meta .button.secondary:hover {
    background: var(--coral-dark);
}

.reservation-call {
    flex: 0 0 auto;
}

.reservation-card-finalizada .reservation-card-meta:empty {
    display: none;
}

/* ============================================================================
   Fila de reservas agrupada.
   O pai representa a reserva; cada linha interna representa um produto.
   ============================================================================ */

.merchant-reservations-section .reservation-tabs {
    display: flex;
    margin-bottom: 10px;
    gap: 8px;
    flex-wrap: wrap;
    border-bottom: 0;
}

.merchant-reservations-section .reservation-tabs a {
    --tab-accent: var(--signal-violet);
    display: inline-flex;
    min-height: 30px;
    padding: 7px 22px 7px 12px;
    align-items: center;
    color: var(--ink-soft);
    background: var(--paper-deep);
    border: 0;
    border-radius: 0;
    clip-path: polygon(0 0, 100% 0, calc(100% - 11px) 50%, 100% 100%, 0 100%);
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1.1;
    text-decoration: none;
    white-space: nowrap;
}

.merchant-reservations-section .reservation-tabs a:hover {
    color: var(--ink);
}

.merchant-reservations-section .reservation-tabs a[aria-current="page"] {
    color: var(--ink);
    background: var(--tab-accent);
}

.merchant-reservations-section .reservation-tabs .tab-pendentes {
    --tab-accent: var(--signal-yellow);
}

.merchant-reservations-section .reservation-tabs .tab-resgatadas {
    --tab-accent: var(--signal-green);
}

.merchant-reservations-section .reservation-tabs .tab-expiradas {
    --tab-accent: var(--signal-coral);
}

.merchant-reservations-section .reservation-tabs .tab-canceladas {
    --tab-accent: var(--signal-blue);
}

.merchant-reservations-section .reservation-list {
    display: grid;
    gap: 8px;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.merchant-reservations-section .reservation-group {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
}

.merchant-reservations-section .reservation-group-finalizada {
    opacity: 0.72;
}

.merchant-reservations-section .reservation-group-header {
    display: grid;
    margin: 0;
    padding: 11px 14px 10px;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr) minmax(0, 1.1fr) auto;
    align-items: center;
    gap: 8px 22px;
    background: var(--paper-deep);
    border-bottom: 1px solid var(--line);
}

.merchant-reservations-section .reservation-group-header > .reservation-group-top,
.merchant-reservations-section .reservation-group-header > .reservation-group-facts {
    display: contents;
}

.merchant-reservations-section .reservation-group .reservation-field {
    min-width: 0;
}

.merchant-reservations-section .reservation-group-consumidor {
    grid-column: 1;
    grid-row: 1;
}

.merchant-reservations-section .reservation-group-codigo {
    grid-column: 2;
    grid-row: 1;
}

.merchant-reservations-section .reservation-group-prazo {
    grid-column: 3;
    grid-row: 1;
}

.merchant-reservations-section .reservation-group-status {
    grid-column: 4;
    grid-row: 1;
}

.merchant-reservations-section .reservation-field dt,
.merchant-reservations-section .reservation-field-label {
    margin: 0;
    color: var(--ink-soft);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.2;
}

.merchant-reservations-section .reservation-field dd,
.merchant-reservations-section .reservation-group-consumidor-value {
    margin: 2px 0 0;
    font-size: 12.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.merchant-reservations-section .reservation-consumer-name {
    display: block;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.15;
}

.merchant-reservations-section .reservation-consumer-phone {
    display: inline-flex;
    margin-top: 1px;
    align-items: center;
    gap: 5px;
    color: var(--ink-soft);
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
}

.merchant-reservations-section .reservation-consumer-phone:hover {
    text-decoration: underline;
}

.merchant-reservations-section .reservation-consumer-phone svg {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.merchant-reservations-section .reservation-code {
    display: inline-flex;
    margin: 0;
    padding: 2px 8px;
    align-items: center;
    border: 1px solid var(--ink);
    border-radius: 6px;
    background: var(--white);
    color: var(--ink);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-decoration: none;
}

.merchant-reservations-section .reservation-group-prazo dd {
    display: flex;
    min-height: 21px;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 4px;
}

.merchant-reservations-section .reservation-group-prazo strong {
    color: var(--ink);
}

.merchant-reservations-section .countdown {
    color: var(--ink-soft);
    font-weight: 700;
}

.merchant-reservations-section .countdown.warn {
    color: #835a00;
}

.merchant-reservations-section .countdown.hot {
    color: var(--coral-dark);
}

.merchant-reservations-section .reservation-group .status-badge {
    min-height: 28px;
    padding: 6px 20px 6px 10px;
}

.merchant-reservations-section .reservation-group-subheader {
    display: flex;
    margin: 0;
    padding: 6px 14px;
    align-items: center;
    gap: 5px 14px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--line-soft);
    background: var(--white);
    color: var(--ink-soft);
    font-size: 11.5px;
    font-weight: 600;
}

.merchant-reservations-section .reservation-group-subheader strong {
    color: var(--ink);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.merchant-reservations-section .reservation-group-subheader .sep {
    color: var(--line);
}

.merchant-reservations-section .reservation-items {
    margin: 0;
    padding: 0;
    list-style: none;
}

.merchant-reservations-section .reservation-item {
    display: grid;
    padding: 7px 14px;
    grid-template-columns: 44px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--line-soft);
}

.merchant-reservations-section .reservation-item:last-child {
    border-bottom: 0;
}

.merchant-reservations-section .reservation-item .offer-thumb {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-small);
    background-color: var(--paper-deep);
    background-position: center;
    background-size: cover;
    object-fit: cover;
}

.merchant-reservations-section .reservation-item-copy {
    min-width: 0;
}

.merchant-reservations-section .reservation-item .offer-title {
    min-width: 0;
    margin: 0;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.merchant-reservations-section .reservation-item .offer-desc {
    display: -webkit-box;
    overflow: hidden;
    margin: 2px 0 0;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    color: var(--ink-mute);
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.25;
}

.merchant-reservations-section .reservation-item-line {
    display: contents;
}

.merchant-reservations-section .reservation-item-price {
    min-width: 118px;
    margin: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.merchant-reservations-section .reservation-item-unit {
    display: block;
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.merchant-reservations-section .reservation-item-total {
    display: block;
    margin-top: 1px;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.15;
    white-space: nowrap;
}

.merchant-reservations-section .reservation-item-total.riscado {
    color: var(--ink-mute);
    text-decoration: line-through;
}

.merchant-reservations-section .reservation-item-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.merchant-reservations-section .reservation-item-actions form {
    margin: 0;
}

.merchant-reservations-section .icon-button {
    display: inline-grid;
    width: 32px;
    height: 30px;
    min-height: 30px;
    padding: 0;
    place-items: center;
    border: 1px solid var(--ink);
    border-radius: 6px;
    background: var(--white);
    color: var(--ink);
    cursor: pointer;
}

.merchant-reservations-section .icon-button svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.merchant-reservations-section .icon-button.confirmar {
    color: var(--white);
    background: var(--coral);
    border-color: var(--coral-dark);
}

.merchant-reservations-section .icon-button.confirmar:hover {
    background: var(--coral-dark);
}

.merchant-reservations-section .icon-button.indisponivel:hover {
    background: var(--paper-deep);
}

.merchant-reservations-section .icon-button:focus-visible {
    outline: 3px solid var(--mustard);
    outline-offset: 1px;
}

.merchant-reservations-section .item-status {
    display: inline-flex;
    min-height: 22px;
    padding: 3px 8px;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--paper);
    color: var(--ink-soft);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.merchant-reservations-section .item-status.ok {
    border-color: var(--green);
    color: var(--green);
    background: rgba(69, 220, 165, 0.22);
}

.merchant-reservations-section .item-status.off {
    border-color: var(--red);
    color: var(--red);
    background: rgba(255, 111, 97, 0.18);
}

.merchant-reservations-section .reservation-group-footer {
    display: flex;
    padding: 10px 14px 12px;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    background: var(--white);
}

/* Resumo do rodape: subtotal, frete e total sempre nessa ordem. */
.merchant-reservations-section .reservation-summary {
    display: flex;
    margin: 0;
    align-items: flex-end;
    gap: 22px;
    flex-wrap: wrap;
    font-variant-numeric: tabular-nums;
}

.merchant-reservations-section .reservation-summary-row {
    display: grid;
    align-content: end;
    gap: 3px;
}

.merchant-reservations-section .reservation-summary-row dt {
    margin: 0;
    color: var(--ink-soft);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Todas as linhas usam a mesma caixa de valor para os rotulos e os numeros
   ficarem alinhados mesmo quando o frete traz o botao de editar. */
.merchant-reservations-section .reservation-summary-row dd {
    display: flex;
    min-height: 30px;
    margin: 0;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
}

.merchant-reservations-section .reservation-summary-total dt {
    color: var(--ink);
}

.merchant-reservations-section .reservation-summary-total dd {
    font-size: 17px;
    font-weight: 800;
    line-height: 1.2;
}

.merchant-reservations-section .reservation-total-pendente {
    color: var(--ink-soft);
    font-size: 13px;
    font-weight: 700;
}

.merchant-reservations-section .reservation-summary-row .baixa {
    width: 100%;
    margin-bottom: -4px;
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 600;
}


.merchant-reservations-section .reservation-freight-field {
    display: flex;
    width: 150px;
    height: 30px;
    min-height: 30px;
    max-height: 30px;
    padding-left: 8px;
    align-items: center;
    gap: 2px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--white);
}

.merchant-reservations-section .reservation-freight-field:focus-within {
    border-color: var(--ink);
    outline: 3px solid rgba(245, 184, 55, 0.3);
}

.merchant-reservations-section .reservation-freight-prefixo {
    color: var(--ink-soft);
    font-size: 12px;
    font-weight: 700;
}

.merchant-reservations-section .reservation-freight-field input {
    width: 100%;
    flex: 1 1 auto;
    min-width: 0;
    height: 28px;
    min-height: 28px;
    max-height: 28px;
    padding: 0 6px;
    border: 0;
    border-radius: 0;
    outline: 0;
    background: transparent;
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Frete a combinar: check e X ficam dentro do campo e so aparecem apos edicao. */
.merchant-reservations-section .reservation-freight-form {
    display: flex;
    margin: 0;
    align-items: center;
}

.merchant-reservations-section .reservation-freight-acoes {
    display: none;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
    padding-right: 3px;
}

.merchant-reservations-section .reservation-freight-form.alterado .reservation-freight-acoes {
    display: inline-flex;
}

.merchant-reservations-section .reservation-freight-icon {
    box-sizing: border-box;
    display: inline-flex;
    width: 22px;
    height: 22px;
    min-height: 0;
    max-height: 22px;
    padding: 0;
    align-self: center;
    line-height: 1;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--ink-soft);
    cursor: pointer;
}

.merchant-reservations-section .reservation-freight-icon svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.2;
}

.merchant-reservations-section .reservation-freight-icon.salvar {
    color: var(--coral-dark);
}

.merchant-reservations-section .reservation-freight-icon.salvar:hover {
    background: rgba(255, 111, 97, 0.16);
}

.merchant-reservations-section .reservation-freight-icon.cancelar:hover {
    background: var(--paper);
    color: var(--ink);
}

.merchant-reservations-section .reservation-freight-icon.editar {
    width: 22px;
    height: 22px;
    max-height: 22px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: var(--white);
}

.merchant-reservations-section .reservation-freight-icon.editar svg {
    width: 12px;
    height: 12px;
}

.merchant-reservations-section .reservation-freight-erro {
    width: 100%;
    color: var(--red);
    font-size: 11px;
    font-weight: 700;
}

.merchant-reservations-section .reservation-group-confirm .button[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
}

.merchant-reservations-section .reservation-group-confirm {
    display: flex;
    margin: 0;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.merchant-reservations-section .reservation-group-confirm .button {
    min-height: 30px;
    padding: 0 10px;
    border-width: 1px;
    border-radius: 6px;
    font-size: 12.5px;
}

.merchant-reservations-section .reservation-group-confirm .button:hover {
    transform: none;
}

.merchant-reservations-section .reservation-group-confirm .button.primary {
    border-color: var(--coral-dark);
}

.merchant-reservations-section .reservation-group-confirm .button svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.merchant-reservations-section .reservation-label-narrow {
    display: none;
}

.merchant-reservations-section .reservation-list-legend {
    display: flex;
    margin: 12px 0 0;
    align-items: center;
    gap: 6px 18px;
    flex-wrap: wrap;
    color: var(--ink-soft);
    font-size: 11.5px;
    font-weight: 600;
}

.merchant-reservations-section .reservation-list-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.merchant-reservations-section .reservation-list-legend svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

@media (max-width: 879px) {
    .merchant-reservations-section .reservation-tabs {
        margin: 0 -12px 12px;
        padding: 0 12px 2px;
        gap: 7px;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .merchant-reservations-section .reservation-tabs::-webkit-scrollbar {
        display: none;
    }

    .merchant-reservations-section .reservation-tabs a {
        min-height: 30px;
        padding: 7px 20px 7px 11px;
        flex: 0 0 auto;
        font-size: 12px;
    }

    .merchant-reservations-section .reservation-list {
        display: grid;
        gap: 12px;
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    .merchant-reservations-section .reservation-group {
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: var(--white);
    }

    .merchant-reservations-section .reservation-group-header {
        display: block;
        padding: 10px 12px 9px;
    }

    .merchant-reservations-section .reservation-group-header > .reservation-group-top {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 8px;
    }

    .merchant-reservations-section .reservation-group-header > .reservation-group-facts {
        display: grid;
        margin: 8px 0 0;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
        gap: 7px 14px;
    }

    .merchant-reservations-section .reservation-group-consumidor,
    .merchant-reservations-section .reservation-group-codigo,
    .merchant-reservations-section .reservation-group-prazo,
    .merchant-reservations-section .reservation-group-status {
        grid-column: auto;
        grid-row: auto;
    }

    .merchant-reservations-section .reservation-group-consumidor .reservation-field-label {
        display: none;
    }

    .merchant-reservations-section .reservation-group .status-badge {
        min-height: 26px;
        padding: 5px 18px 5px 9px;
        font-size: 10.5px;
    }

    .merchant-reservations-section .reservation-group-facts .reservation-field dt {
        font-size: 9px;
    }

    .merchant-reservations-section .reservation-group-facts .reservation-field dd {
        min-height: 21px;
        font-size: 12.5px;
    }

    .merchant-reservations-section .reservation-group-subheader {
        padding: 5px 12px;
        gap: 4px 10px;
        font-size: 11px;
    }

    .merchant-reservations-section .reservation-item {
        padding: 8px 12px;
        grid-template-columns: 44px minmax(0, 1fr);
        align-items: start;
        gap: 4px 10px;
    }

    .merchant-reservations-section .reservation-item .offer-thumb {
        grid-row: span 2;
    }

    .merchant-reservations-section .reservation-item .offer-desc {
        -webkit-line-clamp: 2;
    }

    .merchant-reservations-section .reservation-item-line {
        display: flex;
        margin-top: 6px;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        grid-column: 2;
    }

    .merchant-reservations-section .reservation-item-price {
        min-width: 0;
        text-align: left;
    }

    .merchant-reservations-section .reservation-item-unit {
        font-size: 10.5px;
    }

    .merchant-reservations-section .reservation-item-total {
        font-size: 13.5px;
    }

    .merchant-reservations-section .reservation-item-actions {
        gap: 7px;
        flex: 0 0 auto;
    }

    .merchant-reservations-section .icon-button {
        position: relative;
        width: 36px;
        height: 32px;
        min-height: 32px;
    }

    .merchant-reservations-section .icon-button::before {
        position: absolute;
        inset: -8px -6px;
        content: "";
    }

    .merchant-reservations-section .icon-button svg {
        width: 18px;
        height: 18px;
    }

    .merchant-reservations-section .reservation-group-footer {
        display: flex;
        padding: 10px 12px 12px;
        align-items: stretch;
        gap: 10px;
        flex-direction: column;
    }

    /* Mobile: cada linha do resumo vira rotulo a esquerda e valor a direita. */
    .merchant-reservations-section .reservation-summary {
        display: grid;
        width: 100%;
        gap: 6px;
    }

    .merchant-reservations-section .reservation-summary-row {
        display: grid;
        min-height: 0;
        align-items: center;
        gap: 10px;
        grid-template-columns: 1fr auto;
    }

    .merchant-reservations-section .reservation-summary-row dt {
        font-size: 9.5px;
    }

    .merchant-reservations-section .reservation-summary-row dd {
        justify-content: flex-end;
        min-height: 0;
        font-size: 14px;
        text-align: right;
    }

    .merchant-reservations-section .reservation-summary-total {
        padding-top: 7px;
        border-top: 1px solid var(--line);
    }

    .merchant-reservations-section .reservation-summary-total dd {
        font-size: 16px;
    }

    .merchant-reservations-section .reservation-summary-row .baixa {
        width: 100%;
        font-size: 10.5px;
        text-align: right;
    }

    .merchant-reservations-section .reservation-freight-field {
        width: 156px;
        height: 32px;
        min-height: 32px;
        max-height: 32px;
    }

    .merchant-reservations-section .reservation-freight-field input {
        height: 30px;
        min-height: 30px;
        max-height: 30px;
    }

    .merchant-reservations-section .reservation-group-confirm {
        width: 100%;
    }

    .merchant-reservations-section .reservation-group-confirm .button {
        width: 100%;
        min-height: 36px;
        padding: 0 12px;
        justify-content: center;
    }

    .merchant-reservations-section .reservation-label-wide {
        display: none;
    }

    .merchant-reservations-section .reservation-label-narrow {
        display: inline;
    }

    .merchant-reservations-section .reservation-list-legend {
        display: grid;
        margin-top: 12px;
        gap: 6px;
    }

    .merchant-reservations-section .reservation-list-legend span {
        gap: 8px;
    }
}


/* ============================================================================
   Telegram — layout compacto.
   O cabecalho, o cartao do QR e os avisos eram blocos separados, e o QR de
   250px aparecia antes de o lojista saber para que servia.
   ========================================================================= */

.telegram-link-card {
    padding: 12px;
    margin-top: 0;
    border-width: 1px;
    border-color: var(--line);
    border-radius: var(--radius);
}

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

.telegram-head .eyebrow {
    margin-bottom: 1px;
    font-size: 10.5px;
    letter-spacing: 0.16em;
}

.telegram-head .dashboard-title {
    margin-block: 0;
    font-size: 24px;
    line-height: 1.05;
}

.telegram-link-card .lead {
    margin-block: 3px 0;
    font-size: 12.5px;
    line-height: 1.4;
}

.telegram-head .status-badge {
    min-height: 22px;
    padding: 4px 16px 4px 8px;
    clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 50%, 100% 100%, 0 100%);
    font-size: 10.5px;
}

.telegram-flash {
    display: block;
    margin: 10px 0 0;
    padding-top: 9px;
    border-top: 1px solid var(--green);
    color: var(--ink-soft);
    font-size: 11.5px;
    line-height: 1.4;
}

.telegram-flash strong {
    display: block;
    color: var(--green);
    font-size: 12.5px;
}

/* QR ao lado dos passos. */
.telegram-link-grid {
    display: grid;
    margin-top: 10px;
    padding-top: 10px;
    grid-template-columns: 120px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    border-top: 1px solid var(--line-soft);
}

.telegram-link-grid .eyebrow {
    margin-bottom: 1px;
    font-size: 10px;
    letter-spacing: 0.14em;
}

.telegram-link-grid h2 {
    margin: 0;
    font-size: 15px;
    line-height: 1.15;
}

.telegram-qr,
.telegram-link-grid .fake-qr {
    width: 120px;
    height: 120px;
    margin: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-small);
    background: var(--paper);
}

.telegram-link-grid .fake-qr {
    display: grid;
    padding: 8px;
    place-items: center;
    border-style: dashed;
    color: var(--ink-soft);
    font-size: 10.5px;
    line-height: 1.3;
    text-align: center;
}

.telegram-link-grid .fake-qr::after {
    content: none;
}

.telegram-steps {
    margin: 5px 0 0;
    padding-left: 16px;
    color: var(--ink-soft);
    font-size: 11.5px;
    line-height: 1.45;
}

.telegram-expira {
    margin: 6px 0 0;
    padding-top: 6px;
    border-top: 1px solid var(--mustard);
    color: var(--ink-soft);
    font-size: 11px;
    line-height: 1.35;
}

.telegram-expira strong {
    color: var(--ink);
}

/* Acoes numa linha. */
.telegram-actions {
    display: flex;
    margin-top: 10px;
    padding-top: 10px;
    align-items: center;
    gap: 8px;
    border-top: 1px solid var(--line-soft);
}

.telegram-actions form {
    margin: 0;
    flex: 1;
}

.telegram-actions .button {
    width: 100%;
    min-height: 34px;
    padding: 0 12px;
    border-width: 1px;
    border-radius: 6px;
    font-size: 13px;
}

.telegram-actions .button:hover {
    transform: none;
}

.telegram-actions .button.primary {
    border-color: var(--coral-dark);
}

.telegram-actions .button.primary[href] {
    flex: 1;
}

.telegram-desvincular {
    color: var(--red);
    border-color: #e3bdba;
    background: var(--white);
}

.telegram-desvincular:hover {
    background: #fff0ee;
}

/* Exemplo do aviso. */
.telegram-sample {
    padding: 12px;
    margin-top: 10px;
    border-width: 1px;
    border-color: var(--line);
    border-radius: var(--radius);
}

.telegram-sample .eyebrow {
    margin-bottom: 1px;
    font-size: 10px;
    letter-spacing: 0.14em;
}

.telegram-sample h2 {
    margin: 0 0 9px;
    font-size: 17px;
    line-height: 1.15;
}

.telegram-sample-box {
    display: grid;
    padding: 9px 10px;
    grid-template-columns: 26px minmax(0, 1fr);
    align-items: start;
    gap: 9px;
    border: 1px solid var(--line);
    border-radius: var(--radius-small);
    background: var(--paper);
}

.telegram-sample-box > span {
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border-radius: 50%;
    background: #e6f4ec;
    color: var(--green);
    font-size: 13px;
}

.telegram-sample-box strong {
    font-size: 12.5px;
}

.telegram-sample-box p {
    margin: 1px 0 0;
    color: var(--ink-soft);
    font-size: 11.5px;
    line-height: 1.4;
}


/* ============================================================================
   Cadastro — layout compacto e consulta de CEP automatica.
   ========================================================================= */

.page-shell.registration-page {
    padding-top: 10px;
}

.registration-form,
.registration-notice {
    margin-top: 10px;
}

.registration-title {
    max-width: none;
    margin-block: 0;
    font-size: 26px;
    line-height: 1.05;
}

.page-shell .registration-form .surface {
    padding: 12px;
    border-width: 1px;
    border-color: var(--line);
    border-radius: var(--radius);
}

.registration-form .form-stack {
    gap: 9px;
}

.registration-form .field {
    gap: 3px;
}

.registration-form .field-label {
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.2;
}

.registration-form .field input,
.registration-form .field select {
    min-height: 32px;
    padding: 0 9px;
    border-width: 1px;
    border-color: var(--line);
    border-radius: 8px;
    font-size: 13.5px;
    line-height: 1;
}

.registration-form .field select {
    padding-right: 28px;
    background-position: right 9px center;
}

.registration-form .field-hint {
    font-size: 11px;
    line-height: 1.35;
}

.registration-form .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.registration-form .step-head {
    margin-bottom: 6px;
    font-size: 10.5px;
    letter-spacing: 0.12em;
}

.registration-form .step-head i {
    width: 20px;
    height: 20px;
    font-size: 10.5px;
}

.registration-form h2 {
    margin: 0;
    font-size: 17px;
    line-height: 1.15;
}

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

.registration-form .checkbox-field {
    display: flex;
    padding: 8px 9px;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.35;
}

.registration-form .checkbox-field:has([aria-invalid="true"]) {
    border-color: var(--red);
}

.registration-form .checkbox-field .field-error {
    flex: 1 0 100%;
    margin: 0 0 0 23px;
}

.registration-form .checkbox-field input {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    margin: 1px 0 0;
    accent-color: var(--coral);
}

.registration-form .checkbox-field > span {
    flex: 1 1 0;
    min-width: 0;
}

.registration-form .divider {
    margin-block: 2px;
}

/* Resultado da consulta de CEP: uma linha, sem cartao. */
.cep-status {
    margin: 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: 11.5px;
    line-height: 1.4;
}

.cep-status.encontrado {
    border-bottom-color: var(--green);
}

.cep-status.encontrado strong {
    color: var(--green);
}

.cep-status.encontrado .cep-status-endereco {
    color: var(--ink);
}

.cep-status.nao-encontrado {
    border-bottom-color: var(--mustard);
}

.cep-status.nao-encontrado strong {
    color: var(--ink);
}

/* Endereco resolvido fica recolhido: so o numero exige digitacao. */
.endereco-conferir {
    padding: 0 9px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
}

.endereco-conferir summary {
    padding: 8px 0;
    color: var(--ink-soft);
    font-size: 12.5px;
    font-weight: 700;
    list-style: none;
    cursor: pointer;
}

.endereco-conferir summary::-webkit-details-marker {
    display: none;
}

.endereco-conferir summary::before {
    content: "▸ ";
}

.endereco-conferir[open] summary::before {
    content: "▾ ";
}

.endereco-conferir[open] .form-stack {
    padding-bottom: 9px;
}

/* Trilha e acoes. */
.passos-trilha {
    display: grid;
    margin: 10px 0 0;
    padding: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    list-style: none;
}

.passos-trilha li {
    display: grid;
    gap: 3px;
    color: var(--ink-soft);
    font-size: 10.5px;
    font-weight: 700;
}

.passos-trilha li::before {
    content: none;
}

.registration-form .passo-acoes {
    display: grid;
    margin-top: 2px;
    padding-top: 10px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    border-top: 1px solid var(--line-soft);
}

.registration-form .passo-acoes .button {
    width: 100%;
    min-height: 40px;
    padding: 0 14px;
    border-width: 1px;
    border-radius: 6px;
    font-size: 14px;
}

.registration-form .passo-acoes .button:hover {
    transform: none;
}

.registration-form .passo-acoes .button.primary {
    border-color: var(--coral-dark);
}

.registration-form .small-copy {
    margin-top: 9px;
    font-size: 11px;
    line-height: 1.35;
}


/* ============================================================================
   Vitrine da loja — layout compacto.
   O cabecalho ocupava meia tela antes da primeira oferta e o botao de adicionar
   gastava duas linhas em cada cartao.
   ========================================================================= */

.store-hero {
    margin-bottom: 10px;
    padding: 12px;
    grid-template-columns: minmax(0, 1fr) 56px;
    align-items: start;
    gap: 10px;
    border-width: 1px;
    border-color: var(--line);
    border-radius: var(--radius);
}

.store-hero .eyebrow {
    margin-bottom: 1px;
    font-size: 10.5px;
    letter-spacing: 0.16em;
}

.store-hero h1 {
    margin-block: 0;
    font-size: 20px;
    line-height: 1.05;
}

.store-hero .lead {
    margin-block: 2px 0;
    font-size: 12.5px;
    line-height: 1.4;
}

/* No celular a ficha da empresa e referencia, nao chamada: tipografia miuda para
   nao roubar altura das ofertas. */
.store-hero .eyebrow {
    font-size: 9.5px;
}

.store-identity {
    margin-top: 7px;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px 12px;
    font-size: 11px;
    line-height: 1.3;
}

.store-identity dt {
    font-size: 9px;
    letter-spacing: 0.06em;
}

.store-logo,
.store-monogram {
    width: 56px;
    height: 56px;
    border-width: 1px;
    border-radius: var(--radius-small);
    object-fit: cover;
}

.store-monogram {
    font-size: 22px;
}

/* Estado agora em destaque; quadro completo sob demanda. */
.store-hours-summary {
    display: flex;
    flex-wrap: wrap;
    max-width: none;
    margin: 9px 0 0;
    padding-top: 9px;
    grid-column: 1 / -1;
    align-items: baseline;
    gap: 4px 10px;
    border-top: 1px solid var(--line-soft);
    color: var(--ink-soft);
    font-size: 11.5px;
    line-height: 1.4;
}

.store-delivery-info {
    grid-column: 1 / -1;
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--line-soft);
    color: var(--ink-soft);
    font-size: 11.5px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.store-state {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--red);
    font-size: 12px;
    font-weight: 800;
}

.store-state i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.store-state.aberta {
    color: var(--green);
}

.store-hours-detail summary {
    color: var(--ink-soft);
    font-size: 11.5px;
    font-weight: 700;
    list-style: none;
    cursor: pointer;
}

.store-hours-detail summary::-webkit-details-marker {
    display: none;
}

.store-hours-detail summary::before {
    content: "▸ ";
}

.store-hours-detail[open] summary::before {
    content: "▾ ";
}

.store-hours-detail p {
    margin: 3px 0 0;
    font-size: 11.5px;
}

/* Barra da loja acompanha a rolagem. */
.storefront-topbar {
    position: sticky;
    z-index: 5;
    top: 0;
    margin-bottom: 10px;
    padding: 8px 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line-soft);
}

.storefront-topbar-name {
    min-width: 0;
    overflow: hidden;
    font-size: 12.5px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.storefront-cart-link {
    min-height: 32px;
    padding: 0 11px;
    border-width: 1px;
    border-radius: 6px;
    font-size: 12.5px;
}

.storefront-cart-link:hover {
    transform: none;
}

.storefront-cart-icon {
    width: 15px;
    height: 15px;
}

/* Titulo da lista. */
.page-shell > .section-heading {
    margin-bottom: 10px;
}

.page-shell > .section-heading .eyebrow {
    margin-bottom: 1px;
    font-size: 10.5px;
    letter-spacing: 0.16em;
}

.page-shell > .section-heading h2 {
    margin-block: 0;
    font-size: 21px;
    line-height: 1.1;
}

/* Cartoes: corpo mais justo e acao em uma linha. */
/* No celular a trilha desce para a propria linha e usa a largura inteira, que e
   onde sobra espaco; no desktop ela fica ao lado do titulo. */
.storefront-section-heading {
    flex-wrap: wrap;
    align-items: end;
    gap: 8px 16px;
}

.storefront-section-heading .category-rail {
    width: 100%;
    max-width: 100%;
    flex-basis: 100%;
    margin-inline: -2px;
    padding-inline: 2px;
}

.category-chip {
    padding: 3px 9px;
    font-size: 11px;
}

.storefront-offer-groups,
.storefront-category-group {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.storefront-product-grid {
    gap: 10px;
}

.storefront-category-band {
    margin: 0;
    padding: 0 2px 6px;
    color: var(--ink-soft);
    border-bottom: 1px solid var(--line);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1.2;
    text-transform: uppercase;
}

button.new-offer-category-trigger {
    display: flex;
    width: 100%;
    align-items: center;
    text-align: start;
    color: var(--ink);
    border: 1px solid var(--line);
    background: var(--white);
    font-weight: 400;
}

.sheet-categoria-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    max-height: min(92dvh, 860px);
    padding: 10px 12px 14px;
}

.sheet-categoria-body .sheet-heading,
.sheet-categoria-body .sheet-grabber,
.sheet-categoria-body .sheet-categoria-busca,
.sheet-categoria-body #sheet-categoria-resultados {
    grid-column: 1;
}

.sheet-categoria-body .sheet-heading h2 {
    margin: 0;
    font-size: 16px;
    line-height: 1.2;
}

.sheet-categoria-busca {
    display: grid;
    gap: 4px;
}

.sheet-categoria-body .field {
    gap: 3px;
}

.sheet-categoria-body .field-label {
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.2;
}

.sheet-categoria-body .field input {
    min-height: 32px;
    padding: 0 9px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 13.5px;
    line-height: 1;
}

.sheet-categoria-body .field-hint {
    font-size: 11px;
}

.sheet-categoria-criar {
    margin: 4px 0 0;
}

button.sheet-categoria-add {
    display: inline-flex;
    box-sizing: border-box;
    height: 32px;
    min-height: 32px;
    max-height: 32px;
    padding: 0 12px;
    align-items: center;
    color: var(--white);
    border: 1px solid var(--ink);
    border-radius: 6px;
    background: var(--coral);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

button.sheet-categoria-add:hover {
    transform: none;
}

button.category-sheet-none {
    box-sizing: border-box;
    width: 100%;
    height: 22px;
    min-height: 22px;
    max-height: 22px;
    padding: 0 8px;
    text-align: start;
    color: var(--ink-soft);
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    font-size: 13px;
    font-weight: 400;
    line-height: 1;
}

button.category-sheet-none[aria-pressed="true"] {
    background: var(--paper-deep);
}

.category-sheet-list {
    box-sizing: border-box;
    min-height: calc(5 * 22px);
    max-height: calc(10 * 22px);
    margin: 0;
    padding: 3px;
    overflow-x: hidden;
    overflow-y: auto;
    list-style: none;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--white);
}

.category-sheet-item {
    display: flex;
    align-items: center;
    gap: 0;
}

#sheet-categoria.sheet-dialog .category-sheet-item form {
    grid-column: auto;
}

.category-sheet-item form.category-sheet-icon-form {
    display: flex;
    flex: 0 0 22px;
    margin: 0;
    align-items: center;
    justify-content: center;
}

.category-sheet-item:has(.category-sheet-edit) {
    flex-wrap: wrap;
}

.category-sheet-edit {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    gap: 0;
    align-items: center;
}

.category-sheet-edit-field {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

.category-sheet-edit-field input {
    box-sizing: border-box;
    width: 100%;
    height: 22px;
    min-height: 22px;
    max-height: 22px;
    padding: 0 8px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--white);
    color: var(--ink);
    font: inherit;
    font-size: 13px;
}

.category-sheet-edit-field input:focus {
    outline: 2px solid var(--mustard);
    outline-offset: 0;
}

.category-sheet-edit-erro {
    flex: 1 1 100%;
    margin: 0 8px 4px;
    color: var(--coral);
    font-size: 12px;
}

button.category-sheet-row {
    box-sizing: border-box;
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    height: 22px;
    min-height: 22px;
    max-height: 22px;
    padding: 0 8px;
    overflow: hidden;
    text-align: start;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ink);
    border: 0;
    border-radius: 4px;
    background: transparent;
    font-size: 13px;
    font-weight: 400;
    line-height: 1;
}

button.category-sheet-row[aria-pressed="true"],
button.category-sheet-row[aria-selected="true"] {
    background: var(--paper-deep);
}

button.category-sheet-row.is-proxima {
    background: color-mix(in srgb, var(--mustard) 42%, var(--white));
}

button.category-sheet-icon,
button.category-sheet-delete {
    display: grid;
    width: 22px;
    height: 22px;
    min-height: 22px;
    max-height: 22px;
    padding: 0;
    place-items: center;
    color: var(--ink-soft);
    border: 0;
    background: transparent;
}

button.category-sheet-save {
    color: var(--green);
}

.category-sheet-icon svg,
.category-sheet-delete svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

@media (max-width: 720px) {
    #sheet-categoria.sheet-dialog {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        max-height: var(--sheet-visible-height, 92dvh);
        margin: auto 0 var(--sheet-keyboard-inset, 0px);
        overflow: hidden;
        border-radius: 16px 16px 0 0;
    }

    #sheet-categoria.sheet-dialog .sheet-categoria-body {
        box-sizing: border-box;
        max-height: var(--sheet-visible-height, 92dvh);
        overflow: hidden;
        grid-template-rows: auto auto auto minmax(0, 1fr);
    }

    #sheet-categoria.sheet-dialog #sheet-categoria-resultados {
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
    }

    #sheet-categoria.sheet-dialog .category-sheet-list {
        max-height: none;
    }
}

@media (min-width: 880px) {
    /* Desktop tem largura sobrando: a ficha da empresa cabe em uma linha so,
       com o endereco ocupando o dobro das demais colunas. */
    .store-identity {
        grid-template-columns:
            minmax(120px, 0.9fr)
            minmax(120px, 0.8fr)
            minmax(230px, 2.2fr)
            minmax(115px, 0.7fr);
        gap: 6px 26px;
    }

    #sheet-categoria.sheet-dialog {
        width: min(100%, 400px);
    }

    #sheet-categoria.sheet-dialog .sheet-body {
        grid-template-columns: minmax(0, 1fr);
    }

    #sheet-categoria.sheet-dialog .sheet-heading,
    #sheet-categoria.sheet-dialog .sheet-categoria-busca,
    #sheet-categoria.sheet-dialog .sheet-grabber,
    #sheet-categoria.sheet-dialog #sheet-categoria-resultados {
        grid-column: 1;
    }
}

.storefront-offer-card .product-body {
    padding: 9px 9px 3px;
}

.storefront-offer-card .product-heading {
    padding: 9px 9px 7px;
}

.storefront-offer-card h3 {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.15;
}

.storefront-offer-card .storefront-price-tag {
    margin: 4px 0 9px 8px;
    padding: 5px 6px 5px calc(14% - 7px);
}

.storefront-offer-card .price-old {
    font-size: 9.5px;
}

    .storefront-offer-card .price-discount {
    padding: 2px 4px;
    font-size: 8.5px;
}

.storefront-offer-card .price-new {
    font-size: 17px;
}

.storefront-offer-card .storefront-offer-actions {
    margin-top: 0;
    padding-top: 2px;
    gap: 6px;
}

.storefront-offer-card .expiry {
    margin-top: auto;
    padding-top: 2px;
}

/* Linha de acao do card: o controle de quantidade e o selo de estoque seguem a
   metrica do carrinho (.cart-quantity-control), 20px de botao dentro da borda
   de 2px, ou seja 24px de altura fechada. */
.storefront-offer-card .storefront-stock {
    min-height: 24px;
    padding: 0 6px;
    font-size: 10px;
}

.storefront-offer-card .storefront-quantity-button {
    width: 26px;
    height: 20px;
    min-height: 20px;
    font-size: 14px;
}

.storefront-offer-card .storefront-add-button {
    width: auto;
    height: 20px;
    min-height: 20px;
    padding: 0 10px;
    gap: 4px;
}

.storefront-offer-card .storefront-add-label {
    font-size: 11.5px;
}

.storefront-offer-card .storefront-quantity-value {
    min-width: 18px;
    font-size: 12px;
    line-height: 20px;
}

.storefront-offer-card .storefront-quantity-button svg {
    width: 13px;
    height: 13px;
}

.storefront-gallery-dots {
    min-height: 16px;
    padding: 5px 8px 0;
}

.storefront-gallery-dots .gallery-dot {
    width: 18px;
    height: 16px;
    min-height: 16px;
}

@media (max-width: 680px) {
    .storefront-offer-card .storefront-offer-description {
        margin: 0;
    }

    .storefront-offer-card .storefront-price-tag {
        margin-top: 4px;
    }

    .storefront-offer-card .expiry {
        width: 100%;
        align-self: stretch;
        justify-content: center;
    }

    .store-hero {
        grid-template-columns: minmax(0, 1fr) 56px;
        align-items: start;
    }

    .store-hero h1 {
        font-size: 20px;
        line-height: 1.05;
    }
}


/* ============================================================================
   Telas publicas restantes e administracao — layout compacto.
   ========================================================================= */

/* --- Erro e carrinho vazio: saidas concretas no lugar da meia tela vazia --- */
.erro-page .surface,
.cart-empty {
    padding: 12px;
    border-width: 1px;
    border-color: var(--line);
    border-radius: var(--radius);
    text-align: left;
}

.erro-page .eyebrow {
    margin-bottom: 1px;
    font-size: 10.5px;
    letter-spacing: 0.16em;
}

.erro-page h1 {
    margin-block: 0;
    font-size: 24px;
    line-height: 1.05;
}

.erro-page .lead {
    margin-block: 3px 0;
    font-size: 12.5px;
    line-height: 1.4;
}

.erro-destinos {
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px solid var(--line-soft);
}

.erro-destinos h2 {
    margin: 0 0 6px;
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 11.5px;
    font-weight: 700;
}

.erro-destino {
    display: flex;
    margin: 0;
    padding: 7px 0;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    border-top: 1px solid var(--line-soft);
    font-size: 12.5px;
}

.erro-destino:first-of-type {
    padding-top: 0;
    border-top: 0;
}

.erro-destino span {
    color: var(--ink-soft);
    font-size: 11.5px;
}

.erro-acoes,
.cart-empty-actions {
    display: grid;
    margin-top: 11px;
    padding-top: 11px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    border-top: 1px solid var(--line-soft);
}

.erro-acoes .button,
.cart-empty-actions .button {
    width: 100%;
    min-height: 40px;
    padding: 0 14px;
    border-width: 1px;
    border-radius: 6px;
    font-size: 14px;
}

.erro-acoes .button:hover,
.cart-empty-actions .button:hover {
    transform: none;
}

.erro-acoes .button.primary,
.cart-empty-actions .button.primary {
    border-color: var(--coral-dark);
}

.cart-empty-head {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.cart-empty .empty-icon {
    width: 36px;
    height: 36px;
    margin: 0;
    border-width: 1px;
    font-size: 17px;
}

.cart-empty h2 {
    margin: 0;
    font-size: 19px;
    line-height: 1.15;
}

.cart-empty p {
    margin: 2px 0 0;
    font-size: 12.5px;
    line-height: 1.4;
}

/* --- Inicio: uma cidade por linha, com o numero de ofertas visivel --- */
.page-shell.home-page {
    padding-top: 0;
}

.site-header.home-header .header-actions .button.small:not(.ghost) {
    min-height: 32px;
    padding: 6px 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 12.5px;
}

.site-header.home-header .header-actions .button.small:not(.ghost):hover {
    transform: none;
    background: var(--paper-deep);
}

.home-page .hero-copy .button {
    min-height: 40px;
    padding: 0 14px;
    border-width: 1px;
    border-radius: 6px;
    font-size: 14px;
}

.home-page .hero-copy .button:hover {
    transform: none;
}

.home-page .hero-copy .button.primary {
    border-color: var(--coral-dark);
}

.home-page .hero-copy h1 {
    margin-inline: auto;
    text-align: center;
}

.home-page .hero-copy .eyebrow {
    text-align: center;
}

.home-page .hero-copy .lead {
    text-align: justify;
}

.home-page .hero-copy .button-row {
    justify-content: center;
}

.home-cidades {
    padding: 12px;
    border-width: 1px;
    border-color: var(--line);
    border-radius: var(--radius);
}

.home-cidades .eyebrow {
    margin-bottom: 1px;
    font-size: 10.5px;
    letter-spacing: 0.16em;
}

.home-cidades h2 {
    margin: 0;
    font-size: 24px;
    line-height: 1.05;
}

.home-cidades-lista {
    display: grid;
    margin-top: 10px;
    gap: 6px;
}

.home-cidade {
    display: flex;
    min-height: 38px;
    padding: 0 10px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-small);
    background: var(--white);
    color: var(--ink);
    font-size: 13.5px;
    font-weight: 700;
}

.home-cidade:hover {
    background: var(--paper-deep);
}

.home-cidade-ofertas {
    color: var(--ink-soft);
    font-size: 11.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.home-cidade.sem-oferta {
    color: var(--ink-soft);
}

/* --- Feed: marcador no lugar da faixa mostarda --- */
.feed-atualizado {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.feed-atualizado i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
}

/* --- Instalar o app: faixa no rodape, sem cobrir a pagina --- */
.pwa-install-prompt {
    position: fixed;
    z-index: 30;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    padding: 8px 14px calc(8px + env(safe-area-inset-bottom));
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    background: var(--white);
}

.pwa-install-prompt[hidden] {
    display: none;
}

.pwa-install-prompt .eyebrow {
    display: none;
}

.pwa-install-prompt h2 {
    margin: 0;
    flex: 1 0 100%;
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 12.5px;
    font-weight: 800;
    line-height: 1.2;
}

.pwa-install-prompt > p {
    margin: 0;
    flex: 1;
    min-width: 140px;
    color: var(--ink-soft);
    font-size: 11px;
    line-height: 1.3;
}

.pwa-install-actions,
.pwa-install-ios {
    display: flex;
    margin: 0;
    align-items: center;
    gap: 8px;
}

.pwa-install-prompt .button {
    min-height: 32px;
    padding: 0 12px;
    border-width: 1px;
    border-radius: 6px;
    font-size: 12.5px;
}

.pwa-install-prompt .button:hover {
    transform: none;
}

.pwa-install-prompt .button.primary {
    border-color: var(--coral-dark);
}

.pwa-install-close {
    position: static;
    order: 3;
    width: 28px;
    height: 28px;
    min-height: 28px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--white);
    color: var(--ink-soft);
    font-size: 14px;
}

.pwa-install-network {
    flex: 1 0 100%;
    margin: 0;
    font-size: 10.5px;
}

/* --- Administracao local --- */
.admin-body .page-heading-row {
    align-items: flex-start;
    gap: 10px;
}

.admin-body .page-heading-row .eyebrow {
    margin-bottom: 1px;
    font-size: 10.5px;
    letter-spacing: 0.16em;
}

.admin-body .page-heading-row h1 {
    margin-block: 0;
    font-size: 24px;
    line-height: 1.05;
}

.admin-body .page-heading-row .lead {
    margin-block: 2px 0;
    font-size: 12.5px;
}

.admin-body .page-heading-row .button {
    min-height: 32px;
    padding: 0 12px;
    border-width: 1px;
    border-radius: 6px;
    font-size: 13px;
}

.admin-body .page-heading-row .button:hover {
    transform: none;
}

.admin-body .data-card {
    border-width: 1px;
    border-color: var(--line);
    border-radius: var(--radius);
}

.admin-body .data-card-header {
    padding: 12px 12px 9px;
}

.admin-body .data-card-header h3 {
    font-size: 13.5px;
}

.admin-body .status-badge {
    min-height: 20px;
    padding: 3px 13px 3px 7px;
    clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 50%, 100% 100%, 0 100%);
    font-size: 9.5px;
}

.admin-body .admin-payment-decision {
    padding: 12px;
    border-width: 1px;
    border-color: var(--line);
    border-radius: var(--radius);
}

.admin-body .admin-payment-decision h2 {
    margin: 0;
    font-size: 19px;
    line-height: 1.15;
}

.admin-decision-note {
    margin: 0;
    padding-top: 9px;
    border-top: 1px solid var(--mustard);
    color: var(--ink-soft);
    font-size: 11.5px;
    line-height: 1.4;
}

.admin-decision-note strong {
    color: var(--ink);
    font-size: 12.5px;
}

.admin-body .admin-payment-decision .button-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}

.admin-body .admin-payment-decision .button-row form {
    margin: 0;
}

.admin-body .admin-payment-decision .button {
    width: 100%;
    min-height: 36px;
    padding: 0 12px;
    border-width: 1px;
    border-radius: 6px;
    font-size: 13.5px;
}

.admin-body .admin-payment-decision .button:hover {
    transform: none;
}

@media (max-width: 879px) {
    .admin-body .admin-table td {
        padding: 5px 12px;
        font-size: 12.5px;
    }

    .admin-body .admin-table tbody tr {
        padding-block: 7px;
    }
}


/* Publicar bloqueado: catalogo cheio ou vigencia inativa. As duas telas eram
   um botao solto; agora explicam o estado e oferecem saida sem sair da tela. */
.publish-block {
    padding: 12px;
    border-width: 1px;
    border-color: var(--line);
    border-radius: var(--radius);
}

.publish-block-head {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
}

.publish-block-mark {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 50%;
    background: #fff4d4;
    color: #835a00;
    font-size: 17px;
    font-weight: 800;
}

.publish-block-mark.parado {
    background: #fff0ee;
    color: var(--red);
}

.publish-block h3 {
    margin: 0;
    font-size: 19px;
    line-height: 1.15;
}

.publish-block p {
    margin: 3px 0 0;
    color: var(--ink-soft);
    font-size: 12.5px;
    line-height: 1.4;
}

.publish-block p strong {
    color: var(--ink);
}

.publish-block-usage {
    display: grid;
    margin-top: 10px;
    padding-top: 9px;
    gap: 4px;
    border-top: 1px solid var(--line-soft);
}

.publish-block-usage-line {
    display: flex;
    margin: 0;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
}

.publish-block-usage-line strong {
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.publish-block-bar {
    display: block;
    height: 6px;
    overflow: hidden;
    border-radius: 3px;
    background: var(--paper-deep);
}

.publish-block-bar i {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--coral);
}

.publish-block-exits {
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px solid var(--line-soft);
}

.publish-block-exits h4 {
    margin: 0 0 6px;
    font-size: 11.5px;
    font-weight: 700;
}

.publish-block-exit {
    display: flex;
    margin: 0;
    padding: 7px 0;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    border-top: 1px solid var(--line-soft);
    font-size: 12.5px;
}

.publish-block-exit:first-of-type {
    padding-top: 0;
    border-top: 0;
}

.publish-block-exit span {
    color: var(--ink-soft);
    font-size: 11.5px;
    white-space: nowrap;
}

.publish-block-actions {
    display: grid;
    margin-top: 11px;
    padding-top: 11px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    border-top: 1px solid var(--line-soft);
}

.publish-block-actions .button {
    width: 100%;
    min-height: 40px;
    padding: 0 14px;
    border-width: 1px;
    border-radius: 6px;
    font-size: 14px;
}

.publish-block-actions .button:hover {
    transform: none;
}

.publish-block-actions .button.primary {
    border-color: var(--coral-dark);
}


/* Plano: a barra fixa reservava espaco so no formulario e cobria o historico. */
.plan-main {
    padding-bottom: calc(112px + env(safe-area-inset-bottom));
}

.plan-checkout {
    padding-bottom: 0;
}

/* Historico com data e situacao, aproveitando a largura sobrando. */
.plan-payment-list {
    display: grid;
    gap: 0;
}

.plan-payment-row {
    display: grid;
    padding: 8px 0;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    border-top: 1px solid var(--line-soft);
    font-size: 12.5px;
}

.plan-payment-row:first-child {
    padding-top: 0;
    border-top: 0;
}

.plan-payment-row > div > strong {
    display: block;
    font-size: 13px;
    line-height: 1.2;
}

.plan-payment-when {
    display: block;
    margin-top: 2px;
    color: var(--ink-soft);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.plan-payment-side {
    display: grid;
    justify-items: end;
    gap: 3px;
}

.plan-payment-side strong {
    font-size: 13.5px;
    font-variant-numeric: tabular-nums;
}

.plan-payment-status {
    color: var(--ink-soft);
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap;
}

.plan-payment-status.success {
    color: var(--green);
}

.plan-payment-status.warning {
    color: #835a00;
}

.plan-payment-status.danger {
    color: var(--red);
}

@media screen and (min-width: 880px) {
    .plan-main {
        display: grid;
        padding-bottom: 40px;
        justify-items: center;
    }

    .merchant-qr-main,
    .telegram-main {
        display: grid;
        justify-items: center;
    }

    .merchant-view-painel .merchant-operation-main,
    .merchant-view-reservas .merchant-operation-main,
    .merchant-view-nova .merchant-operation-main {
        display: grid;
        justify-items: center;
    }

    .plan-main > *,
    .merchant-qr-main > *,
    .telegram-main > *,
    .merchant-view-painel .merchant-operation-main > *,
    .merchant-view-reservas .merchant-operation-main > *,
    .merchant-view-nova .merchant-operation-main > * {
        width: min(100%, 920px);
    }
}


/* Catalogo e acao do painel seguem o mesmo botao retangular do resto da tela:
   as duas pilulas com sombra eram o unico oval restante no cabecalho. */
.merchant-panel-heading .balance-pill,
.dashboard-topbar .balance-pill,
.merchant-qr-header .balance-pill,
.merchant-plan-header .balance-pill {
    min-height: 34px;
    margin-left: 0;
    padding: 0 10px;
    gap: 6px;
    border-width: 1px;
    border-color: var(--line);
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.merchant-panel-heading .balance-pill:hover,
.dashboard-topbar .balance-pill:hover {
    background: var(--paper-deep);
}

.merchant-panel-heading .balance-dot,
.dashboard-topbar .balance-dot,
.merchant-qr-header .balance-dot,
.merchant-plan-header .balance-dot {
    width: 7px;
    height: 7px;
    background: var(--green);
}

.merchant-panel-heading .button,
.dashboard-topbar .button {
    min-height: 34px;
    padding: 0 12px;
    border-width: 1px;
    border-radius: 6px;
    font-size: 13px;
}

.merchant-panel-heading .button:hover,
.dashboard-topbar .button:hover {
    transform: none;
}

.merchant-panel-heading .button.primary,
.dashboard-topbar .button.primary {
    border-color: var(--coral-dark);
}

.merchant-panel-heading .merchant-page-header-actions,
.dashboard-topbar {
    flex-wrap: wrap;
    gap: 8px;
}

/* ------------------------------------------- sheet de WhatsApp ao consumidor ---
   O sheet nao tem foto do produto, entao a grade de duas colunas do sheet de
   reserva deixaria a coluna da esquerda vazia e jogaria titulo e formulario
   para a direita. Aqui o corpo volta a ser de uma coluna so.

   O botao segue o mesmo relevo do sheet de confirmacao: superficie plana,
   retangular, sem sombra dura, porque a acao vive dentro do dialogo. */

#sheet-whatsapp-consumidor .button {
    border-radius: 6px;
}

#sheet-whatsapp-consumidor .button.primary {
    border-color: var(--coral-dark);
}

#sheet-whatsapp-consumidor .button.primary:hover {
    background: var(--coral-dark);
}

#sheet-whatsapp-consumidor .button-row {
    padding-top: 12px;
    border-top: 1px solid var(--line-soft);
}

#sheet-whatsapp-consumidor .sticky-cta {
    background: linear-gradient(to top, var(--white) 72%, rgba(255, 253, 248, 0));
}

#sheet-whatsapp-consumidor .sheet-heading h2 {
    margin: 0;
    font-family: "Bitter", Georgia, serif;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.1;
}

#sheet-whatsapp-consumidor .sheet-eyebrow {
    margin: 0 0 2px;
}

#sheet-whatsapp-consumidor .sheet-whatsapp-telefone {
    margin: 3px 0 0;
    color: var(--ink-soft);
    font-size: 13px;
    font-weight: 700;
}

#sheet-whatsapp-consumidor .sheet-whatsapp-telefone[hidden] {
    display: none;
}

#sheet-whatsapp-consumidor form {
    display: grid;
    gap: 14px;
}

/* Campo com a mesma metrica compacta dos inputs do painel do lojista
   (.merchant-profile-card .field input): 32px de altura, borda fina e texto de
   13,5px. A altura cresce com o texto ate dez linhas, medida por
   whatsapp-consumidor.js; a line-height fixa mantem essa conta previsivel. */
#sheet-whatsapp-consumidor .field {
    gap: 3px;
}

#sheet-whatsapp-consumidor .field label {
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.2;
}

#sheet-whatsapp-consumidor .field textarea {
    min-height: 32px;
    padding: 6px 9px;
    border-width: 1px;
    border-color: var(--line);
    border-radius: 8px;
    font-size: 13.5px;
    line-height: 18px;
    resize: none;
}

@media (min-width: 880px) {
    #sheet-whatsapp-consumidor {
        width: min(100%, 560px);
    }

    #sheet-whatsapp-consumidor .sheet-body {
        grid-template-columns: minmax(0, 1fr);
        column-gap: 0;
    }

    #sheet-whatsapp-consumidor .sheet-heading,
    #sheet-whatsapp-consumidor form {
        grid-column: 1;
    }
}
.city-store-search {
    grid-template-columns: minmax(0, 1fr) auto;
}

.city-store-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.city-store-card {
    display: flex;
    align-items: center;
    min-height: 92px;
    color: inherit;
    background: var(--surface, #fffdf7);
    border: 1px solid var(--border, #d8d2c3);
    border-radius: 8px;
}

.city-store-card-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
    padding: 1rem;
    color: inherit;
    text-decoration: none;
}

.city-store-favorite {
    display: grid;
    justify-items: center;
    gap: .25rem;
    padding: 1rem;
    border-left: 1px solid var(--border, #d8d2c3);
    font-size: .8rem;
}

.city-store-card:hover {
    border-color: currentColor;
}

.city-store-logo {
    display: grid;
    place-items: center;
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    overflow: hidden;
    border: 1px solid var(--border, #d8d2c3);
    border-radius: 50%;
    font-weight: 800;
}

.city-store-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.city-store-copy {
    display: grid;
    gap: .25rem;
}

.city-store-copy span {
    color: var(--muted, #5f625b);
}

@media (max-width: 640px) {
    .city-store-search {
        grid-template-columns: 1fr;
    }
}

/* Ajustes contextuais da vitrine da cidade e do consumidor. */
/* Acesso compacto do consumidor. */
.auth-center {
    display: grid;
    min-height: calc(100vh - 72px);
    place-items: center;
    padding: 32px 16px 64px;
}

.auth-center-cadastro {
    padding: 28px 16px 56px;
}

.auth-card {
    width: min(100%, 400px);
    padding: 28px 26px 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
    text-align: left;
}

.auth-center-cadastro .auth-card {
    padding: 24px 22px 20px;
}

.auth-card .eyebrow {
    margin-bottom: 3px;
}

.auth-center-cadastro .eyebrow {
    font-size: 10.5px;
}

.auth-card h1 {
    margin: 0 0 4px;
    font-size: 30px;
}

.auth-center-cadastro h1 {
    font-size: 23px;
}

.auth-card .lead {
    margin: 0 0 18px;
    font-size: 14px;
}

.auth-center-cadastro .lead {
    margin-bottom: 14px;
    font-size: 13px;
}

.auth-card .field {
    gap: 3px;
    margin-bottom: 10px;
}

.auth-card .field-label {
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.2;
}

.auth-card .field input,
.auth-card .field select {
    min-height: 32px;
    padding: 0 9px;
    border-width: 1px;
    border-color: var(--line);
    border-radius: 8px;
    font-size: 13.5px;
    line-height: 1;
}

.auth-card .field-hint,
.auth-card .field-error {
    font-size: 11px;
}

.auth-card .password-field {
    position: relative;
}

.auth-card .password-field input {
    padding-right: 36px;
}

.auth-card .password-toggle {
    top: 19px;
    right: 6px;
    width: 24px;
    height: 24px;
}

.auth-card .button.block {
    min-height: 42px;
    margin-top: 8px;
    border-width: 1px;
    font-size: 15px;
}

.auth-center-cadastro .button.block {
    min-height: 40px;
    margin-top: 4px;
    font-size: 14.5px;
}

.auth-card-terms {
    margin: 10px 0 0;
    color: var(--ink-soft);
    font-size: 11.5px;
    text-align: center;
}

.auth-card-links {
    display: flex;
    margin: 14px 0 0;
    padding-top: 14px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    border-top: 1px solid var(--line-soft);
    font-size: 13.5px;
}

.auth-center-cadastro .auth-card-links {
    margin-top: 12px;
    padding-top: 12px;
    justify-content: center;
    gap: 6px;
    color: var(--ink-soft);
    font-size: 12.5px;
}

.auth-card-links a {
    font-weight: 700;
}

.auth-aside {
    width: min(100%, 400px);
    margin-top: 14px;
    color: var(--ink-soft);
    font-size: 13px;
    text-align: center;
}

.auth-center-password-change {
    padding: 28px 16px 56px;
}

.auth-stack {
    display: grid;
    width: min(100%, 400px);
    gap: 14px;
}

.auth-stack .auth-card {
    width: 100%;
    padding: 22px 22px 20px;
}

.auth-stack .auth-card h1 {
    font-size: 23px;
}

.auth-stack .auth-card .eyebrow {
    font-size: 10.5px;
}

.auth-stack .auth-card .lead {
    margin-bottom: 14px;
    font-size: 13px;
}

.auth-stack .auth-card .button.block {
    min-height: 40px;
    margin-top: 6px;
    font-size: 14.5px;
}

.auth-stack .auth-card-links {
    margin-top: 12px;
    padding-top: 12px;
    font-size: 12.5px;
}

.link-button {
    padding: 0;
    border: 0;
    color: var(--ink);
    background: transparent;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.link-button:disabled {
    color: var(--ink-soft);
    cursor: wait;
}

/* Vitrine municipal de lojas. */
.city-showcase-page {
    padding-top: 0;
}

.city-bar {
    position: sticky;
    z-index: 20;
    top: 0;
    margin-bottom: 18px;
    padding: 8px 0 7px;
    border-bottom: 1px solid var(--line-soft);
    background: var(--paper);
}

.city-bar-row {
    display: flex;
    min-height: 30px;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.city-bar-place {
    color: var(--coral-dark);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
}

.city-bar-place:hover,
.city-bar-place:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.city-bar-divider {
    width: 1px;
    height: 14px;
    background: var(--line);
}

.city-bar-meta {
    color: var(--ink-soft);
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
}

.city-bar-meta strong {
    color: var(--ink);
}

.city-bar .category-rail {
    max-width: none;
    margin-top: 6px;
}

.storefront-category-group {
    scroll-margin-top: 96px;
    gap: 6px;
}

.storefront-category-band {
    margin-bottom: 0;
}

.favorite-band {
    display: flex;
    align-items: center;
    gap: 6px;
}

.favorite-band > span {
    color: var(--signal-blue);
}

.city-store-showcase-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.product-card.store-card {
    position: relative;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    background: var(--white);
}

.store-card-link {
    display: flex;
    flex: 1;
    flex-direction: column;
    color: inherit;
}

.store-card-art {
    position: relative;
    display: grid;
    aspect-ratio: 16 / 9;
    place-items: center;
    overflow: hidden;
    border-bottom: 1px solid var(--line-soft);
    background: var(--paper-deep);
}

.store-card-art .store-card-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.store-card-monogram {
    display: grid;
    width: 82px;
    height: 82px;
    place-items: center;
    border: 1px solid var(--line-soft);
    border-radius: 50%;
    background: var(--white);
    font-family: "Bitter", Georgia, serif;
    font-size: 30px;
    font-weight: 700;
}

.store-card-body {
    display: grid;
    padding: 10px 14px 6px;
    gap: 3px;
}

.store-card-body h3 {
    margin: 0 0 2px;
    font-size: 18px;
    line-height: 1.1;
}

.store-card-facts {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    color: var(--ink-soft);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.25;
}

.store-card-offers {
    padding: 3px 10px;
    border-radius: 999px;
    color: var(--ink);
    background: var(--mustard);
    font-size: 12px;
    font-weight: 800;
}

.store-card-offers.vazio {
    color: var(--ink-soft);
    background: var(--paper-deep);
}

.store-card-cta {
    display: grid;
    padding: 8px 14px 12px;
    gap: 6px;
    justify-items: center;
    text-align: center;
}

.store-card-cta .muted {
    margin: 0;
    font-size: 12px;
}

.store-card-cta .button {
    min-width: 150px;
    white-space: nowrap;
}

.favorite-toggle-form {
    position: absolute;
    z-index: 3;
    top: 8px;
    right: 8px;
}

.favorite-toggle {
    display: grid;
    width: 40px;
    height: 40px;
    padding: 0;
    place-items: center;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.favorite-toggle svg {
    width: 26px;
    height: 26px;
    fill: var(--white);
    stroke: var(--signal-blue);
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.favorite-toggle[aria-pressed="true"] svg {
    fill: var(--signal-blue);
}

.store-card--fechada .store-card-art,
.store-card--fechada .store-card-body,
.store-card--fechada .store-card-cta {
    opacity: .55;
}

.store-card--fechada .store-card-body .store-state {
    opacity: 1;
}

.city-topbar .city-label-short {
    display: none;
}

@media (max-width: 1100px) {
    .city-store-showcase-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    .city-store-showcase-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
}

@media (max-width: 680px) {
    .city-topbar .city-label-long {
        display: none;
    }

    .city-topbar .city-label-short {
        display: inline;
    }

    .city-store-showcase-grid {
        gap: 10px;
    }

    .store-card-body {
        padding: 8px 10px 6px;
    }

    .store-card-body h3 {
        font-size: 15.5px;
    }

    .store-card-facts {
        font-size: 11.5px;
    }

    .store-card-cta {
        padding: 6px 10px 10px;
        justify-items: stretch;
    }

    .store-card-cta .button {
        width: 100%;
        min-width: 0;
        padding: 8px 10px;
        font-size: 12.5px;
    }

    .store-card-monogram {
        width: 60px;
        height: 60px;
        font-size: 22px;
    }
}

.merchant-store-photo-composer {
    display: grid;
    gap: 10px;
}

.merchant-store-photo-slot {
    width: min(100%, 360px);
    aspect-ratio: 16 / 9;
}

.merchant-store-photo-slot .new-offer-photo-image {
    object-fit: cover;
}


/* Landing pública do lojista. */
.merchant-landing-page {
    display: grid;
    gap: 0;
    padding-top: 42px;
    padding-bottom: 48px;
}

.merchant-hero {
    display: grid;
    padding: clamp(26px, 4vw, 44px);
    grid-template-columns: minmax(0, 1.25fr) minmax(250px, .75fr);
    gap: clamp(20px, 4vw, 44px);
    align-items: center;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    background: var(--white);
}

.merchant-hero .hero-copy {
    text-align: left;
}

.merchant-hero h1 {
    max-width: 22ch;
    margin-bottom: 12px;
    font-size: clamp(30px, 4.4vw, 50px);
    line-height: 1.04;
    text-wrap: balance;
}

.merchant-hero .lead {
    max-width: 46ch;
    margin-bottom: 18px;
    font-size: 15.5px;
}

.merchant-hero .button-row {
    gap: 10px;
    flex-wrap: wrap;
}

.merchant-hero-panel {
    display: grid;
    padding: 20px;
    gap: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-small);
    background: var(--paper);
}

.merchant-hero-fact {
    display: flex;
    padding-bottom: 10px;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--line-soft);
    font-size: 14px;
    font-weight: 700;
}

.merchant-hero-fact:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.merchant-hero-fact strong {
    font-family: "Bitter", Georgia, serif;
    font-size: 20px;
}

.merchant-landing-page > .section {
    margin-top: 40px;
}

.merchant-benefits,
.merchant-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.merchant-benefit,
.merchant-steps li {
    display: grid;
    padding: 18px;
    gap: 6px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-small);
    background: var(--white);
}

.merchant-benefit strong {
    font-size: 16px;
}

.merchant-benefit span,
.merchant-steps li {
    color: var(--ink-soft);
    font-size: 13.5px;
}

.merchant-steps {
    margin: 0;
    padding: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    counter-reset: passo;
    list-style: none;
}

.merchant-steps li {
    padding: 16px;
}

.merchant-steps li::before {
    counter-increment: passo;
    content: counter(passo);
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 50%;
    color: var(--white);
    background: var(--ink);
    font-size: 12px;
    font-weight: 800;
}

.merchant-steps strong {
    color: var(--ink);
    font-size: 15px;
}

.merchant-cta-row {
    display: flex;
    margin-top: 40px;
    padding: 22px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    background: var(--paper-deep);
}

.merchant-cta-row h2 {
    margin: 0;
    font-size: clamp(22px, 3vw, 30px);
}

@media (max-width: 860px) {
    .merchant-landing-page {
        padding-top: 24px;
    }

    .merchant-hero,
    .merchant-benefits,
    .merchant-steps {
        grid-template-columns: 1fr;
    }

    .merchant-hero h1 {
        max-width: none;
    }
}

@media (max-width: 640px) {
    .merchant-landing-header .merchant-city-link,
    .merchant-landing-header .merchant-login-link {
        display: none;
    }

    .merchant-hero .button-row,
    .merchant-cta-row .button-row {
        display: grid;
        width: 100%;
    }
}

/* Seletor público de município. */
.city-pick {
    width: min(calc(100% - 32px), 600px);
    margin-inline: auto;
    padding-block: 26px 52px;
}

.city-pick-intro {
    margin-bottom: 16px;
}

.city-pick-intro .eyebrow {
    margin-bottom: 4px;
    font-size: 10.5px;
}

.city-pick-intro h1 {
    margin: 0;
    font-size: 23px;
}

.city-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.city-item {
    display: flex;
    min-height: 44px;
    padding: 7px 11px;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: var(--white);
    color: inherit;
}

.city-item:hover {
    border-color: var(--line);
    background: var(--paper);
}

.city-item-name {
    font-size: 13.5px;
    font-weight: 800;
    line-height: 1.15;
}

.city-item-name > span {
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
}

.city-item-count {
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--mustard);
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.city-item-count.vazio {
    color: var(--ink-soft);
    background: var(--paper-deep);
}

.city-pick-foot {
    display: flex;
    margin-top: 18px;
    padding-top: 12px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    border-top: 1px solid var(--line-soft);
    color: var(--ink-soft);
    font-size: 12.5px;
}

@media (max-width: 480px) {
    .city-list {
        grid-template-columns: 1fr;
    }

    .city-pick-header .header-actions {
        display: none;
    }
}

/* Perfil compacto do consumidor. */
.account-shell {
    width: min(calc(100% - 32px), 880px);
    margin-inline: auto;
    padding-block: 28px 72px;
}

.account-header {
    display: flex;
    margin-bottom: 20px;
    padding-bottom: 14px;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--line-soft);
}

.account-header h1 {
    margin: 0;
    font-size: 26px;
}

.account-header .eyebrow,
.account-card-head .eyebrow {
    margin-bottom: 3px;
    font-size: 10.5px;
}

.account-tabs {
    display: flex;
    gap: 8px;
}

.account-card {
    margin-bottom: 18px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
}

.account-card-head {
    display: flex;
    margin-bottom: 14px;
    align-items: start;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.account-card-head h2 {
    margin: 0;
    font-size: 17px;
}

.account-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
}

.account-card .field {
    gap: 3px;
}

.account-card .field-label {
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.2;
}

.account-card .field input,
.account-card .field select {
    min-height: 32px;
    padding: 0 9px;
    border-width: 1px;
    border-color: var(--line);
    border-radius: 8px;
    font-size: 13.5px;
    line-height: 1;
}

.account-card .municipio-picker {
    grid-column: 1 / -1;
    gap: 5px;
}

.account-card .municipio-sugestoes {
    display: grid;
    margin-top: 2px;
    padding: 7px 9px;
    gap: 5px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: var(--paper);
}

.account-card .choice-row {
    gap: 7px;
    font-size: 13px;
    font-weight: 700;
}

.account-card .choice-row input {
    width: 15px;
    height: 15px;
}

.account-actions {
    display: flex;
    margin-top: 16px;
    padding-top: 14px;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    border-top: 1px solid var(--line-soft);
}

.button.tight {
    min-height: 36px;
    padding: 8px 14px;
    border-width: 1px;
    font-size: 13.5px;
}

.telegram-block {
    display: grid;
    grid-template-columns: 148px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.telegram-block-linked {
    grid-template-columns: 1fr auto;
    align-items: center;
}

.telegram-qr-slot {
    display: grid;
    width: 100%;
    aspect-ratio: 1;
    padding: 10px;
    place-items: center;
    border: 1px dashed var(--line);
    border-radius: var(--radius-small);
    background: var(--paper);
    color: var(--ink-soft);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

.telegram-steps-list {
    margin: 0 0 12px;
    padding-left: 20px;
    color: var(--ink-soft);
    font-size: 14px;
}

.telegram-steps-list li {
    margin-bottom: 4px;
}

.telegram-steps-list strong {
    color: var(--ink);
}

.telegram-note {
    margin: 0;
    padding: 10px 12px;
    border-left: 3px solid var(--mustard);
    background: var(--paper);
    color: var(--ink-soft);
    font-size: 13px;
}

.telegram-sample-preview {
    display: flex;
    margin-top: 14px;
    padding: 12px 14px;
    align-items: start;
    gap: 10px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-small);
    background: var(--paper);
}

.telegram-sample-preview strong,
.notice-row strong {
    display: block;
    font-size: 14.5px;
}

.telegram-sample-preview p,
.notice-row span {
    margin: 2px 0 0;
    color: var(--ink-soft);
    font-size: 13px;
}

.status-pill {
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.status-pill.ok {
    color: var(--white);
    background: var(--green);
}

.status-pill.pendente {
    color: var(--ink);
    background: var(--mustard);
}

.notice-row {
    display: flex;
    padding: 12px 0;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--line-soft);
    font-size: 14px;
}

@media (max-width: 720px) {
    .account-grid,
    .telegram-block,
    .telegram-block-linked {
        grid-template-columns: 1fr;
    }

    .account-shell {
        padding-top: 20px;
    }
}