@import url("./tokens.css?v=20260710f2");
@import url("./forms.css?v=20260710f2");

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Prevent iOS rubber-band from exposing sideways overflow */
  overflow-x: clip;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--font-size-md);
  line-height: 1.45;
  background: var(--carrinho-mist);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  /* Prefer clip over hidden so sticky CTAs keep working */
  overflow-x: clip;
}

body::before {
  content: none;
}

#app {
  position: relative;
  z-index: var(--z-base);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  max-width: var(--shell-max);
  margin: 0 auto;
  width: 100%;
}

/* Shell locked at 430px ? store stays in the same phone frame */
#app.app-wide {
  max-width: var(--shell-max);
}

h1, h2, h3, .brand-wordmark, .hero-brand {
  font-family: var(--font-display);
  letter-spacing: -0.04em;
  line-height: 1.15;
  margin: 0;
}

.muted { color: var(--color-text-muted); }
.error { color: var(--color-status-danger); }
.ok { color: var(--color-status-success); }

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

button {
  cursor: pointer;
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-weight: 600;
  transition:
    background var(--motion-duration-fast) var(--motion-ease-standard),
    transform var(--motion-duration-fast) var(--motion-ease-standard),
    box-shadow var(--motion-duration-fast) var(--motion-ease-standard),
    opacity var(--motion-duration-fast) var(--motion-ease-standard);
}

button:active:not(:disabled) {
  transform: translateY(1px);
}

button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* #EA1D2C + white ? 4.5:1 borderline; deeper red for WCAG AA on CTAs */
.btn-primary {
  background: var(--carrinho-red-hover);
  color: #FFFFFF;
  font-weight: 700;
  border-radius: var(--ticket-radius);
  min-height: var(--touch-min);
  box-shadow: none;
}

.btn-primary:hover:not(:disabled) {
  background: var(--carrinho-red-pressed);
  color: #FFFFFF;
}

.btn-primary:focus-visible,
.btn-accent:focus-visible {
  box-shadow: var(--shadow-focus);
}

.btn-accent {
  background: var(--carrinho-red-hover);
  color: #FFFFFF;
  font-weight: 700;
  min-height: var(--touch-min);
}

.btn-accent:hover:not(:disabled) {
  background: var(--carrinho-red-pressed);
  color: #FFFFFF;
}

.btn-ghost {
  background: transparent;
  color: var(--carrinho-ink);
  border: 1px solid var(--carrinho-line);
  border-radius: var(--ticket-radius);
  min-height: var(--touch-min);
}

.btn-ghost:hover:not(:disabled) {
  background: var(--carrinho-mist-deep);
  color: var(--carrinho-ink);
}

.btn-soft {
  background: var(--carrinho-mist);
  color: var(--carrinho-ink);
  border-radius: var(--ticket-radius);
  min-height: var(--touch-min);
}

.btn-block { width: 100%; }

.btn-sm {
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-sm);
  min-height: var(--touch-min);
}

.link-btn {
  background: none;
  padding: 0;
  min-height: var(--touch-min);
  color: var(--carrinho-ink);
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--carrinho-red);
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--color-border-default);
  border-radius: var(--ticket-radius);
  padding: var(--space-3) var(--space-4);
  min-height: var(--touch-min);
  background: var(--color-surface-raised);
  color: var(--color-text-primary);
  text-align: left;
}

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23717171' d='M1.4.6 6 5.2 10.6.6 12 2 6 8 0 2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

textarea {
  min-height: 88px;
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--color-border-focus);
}

label.field {
  display: grid;
  gap: var(--field-gap, var(--space-2));
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
  min-width: 0;
  text-align: left;
}

.row {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  align-items: center;
}

.stack {
  display: grid;
  gap: var(--space-4);
}

/* ?? Sticky top bar ??
   Rhythm: 8 / 12 / 16. Row heights lock to 40 (tools) + 44 (search).
   Modes: browse | cart | slim ? see data-chrome.
   Parity with Flutter ConsumerTopChrome.
*/
.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  background: var(--glass-bg-strong);
  border-bottom: 1px solid var(--color-border-subtle);
  padding:
    calc(var(--space-3) + env(safe-area-inset-top, 0px))
    var(--gutter)
    var(--space-3);
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.topbar[hidden] {
  display: none !important;
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: 0;
  min-height: var(--icon-tool);
  height: var(--icon-tool);
}

/* ?? Context-aware chrome (data-chrome / .chrome-*) ??
   browse: In?cio ? location + full search + suggestion chips
   cart:   Carrinho ? location + slim search, no chips / no mic
   slim:   Pedidos / detalhe / Perfil ? location + bell only
*/
.topbar[data-chrome="slim"] .topbar-inner,
.topbar.chrome-slim .topbar-inner {
  margin-bottom: 0;
}

.topbar[data-chrome="slim"] .search-sticky,
.topbar[data-chrome="slim"] .voice-phrase-chips,
.topbar.chrome-slim .search-sticky,
.topbar.chrome-slim .voice-phrase-chips {
  display: none !important;
}

.topbar[data-chrome="cart"] .voice-phrase-chips,
.topbar.chrome-cart .voice-phrase-chips {
  display: none !important;
}

.topbar[data-chrome="cart"] .search-mic-wrap,
.topbar.chrome-cart .search-mic-wrap {
  display: none !important;
}

.topbar[data-chrome="cart"] .search-sticky,
.topbar.chrome-cart .search-sticky {
  margin-top: var(--space-2);
}

.topbar[data-chrome="cart"] .search-field,
.topbar.chrome-cart .search-field {
  min-height: 40px;
  height: 40px;
  border-radius: var(--radius-lg);
  padding: 0 var(--space-3);
}

.topbar[data-chrome="cart"] .search-field input,
.topbar.chrome-cart .search-field input {
  padding: var(--space-2) 0;
  font-size: var(--font-size-sm);
}

.topbar[data-chrome="cart"] .topbar-inner,
.topbar.chrome-cart .topbar-inner {
  margin-bottom: 0;
}

.topbar[data-chrome="browse"] .topbar-inner,
.topbar.chrome-browse .topbar-inner {
  margin-bottom: 0;
}

.topbar[data-chrome="browse"] .search-sticky,
.topbar.chrome-browse .search-sticky {
  margin-top: var(--space-2);
}

.topbar[data-chrome="browse"] .voice-phrase-chips:not(.is-open),
.topbar.chrome-browse .voice-phrase-chips:not(.is-open) {
  display: none !important;
}

.topbar[data-chrome="browse"] .voice-phrase-chips.is-open,
.topbar.chrome-browse .voice-phrase-chips.is-open {
  display: flex !important;
}

.location-chip {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  background: transparent;
  border: none;
  border-radius: var(--ticket-radius);
  padding: 0 var(--space-1) 0 2px;
  min-height: var(--icon-tool);
  height: var(--icon-tool);
  max-width: calc(100% - 96px);
  box-shadow: none;
  text-align: left;
  flex: 1 1 auto;
  min-width: 0;
}

.location-chip:hover {
  background: var(--carrinho-mist);
}

.location-chip:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.location-chip svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke: var(--carrinho-red);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.location-chip .chev {
  width: 14px;
  height: 14px;
  stroke: var(--carrinho-ink-muted);
  margin-left: 2px;
}

.location-text {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
  min-width: 0;
  line-height: 1.25;
  flex: 1 1 auto;
}

.location-label {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--carrinho-ink-muted);
  text-transform: none;
  letter-spacing: 0;
  flex-shrink: 0;
  line-height: 1.25;
}

.location-sep {
  display: inline;
  flex-shrink: 0;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--carrinho-ink-muted);
  line-height: 1.25;
}

.location-value {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 700;
  letter-spacing: 0;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  line-height: 1.25;
}

.topbar-tools {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  height: var(--icon-tool);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--carrinho-red);
  box-shadow: 0 0 0 2px var(--carrinho-red-soft);
  flex-shrink: 0;
}

.status-dot.online {
  background: var(--carrinho-ink);
  box-shadow: 0 0 0 2px rgba(26, 26, 26, 0.08);
}

.icon-btn {
  width: var(--icon-tool);
  height: var(--icon-tool);
  min-width: var(--icon-tool);
  min-height: var(--icon-tool);
  padding: 0;
  border-radius: var(--card-radius);
  background: var(--carrinho-mist);
  border: 1px solid transparent;
  display: grid;
  place-items: center;
  color: var(--carrinho-ink-soft);
  flex-shrink: 0;
  transition:
    background var(--motion-duration-fast) var(--motion-ease-standard),
    border-color var(--motion-duration-fast) var(--motion-ease-standard),
    transform var(--motion-duration-fast) var(--motion-ease-standard);
}

.icon-btn:hover {
  background: var(--carrinho-snow);
  border-color: var(--carrinho-line);
}

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

.icon-btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.search-mic:focus-visible,
.nav-btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.icon-btn svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-btn-avatar {
  border-radius: 50%;
}

.search-sticky {
  display: block;
  min-width: 0;
  overflow: visible;
  margin-top: 0;
}

.search-field {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--carrinho-snow);
  border: 1px solid var(--carrinho-line);
  border-radius: var(--radius-lg);
  padding: 0 6px 0 12px;
  min-height: var(--touch-min);
  height: var(--touch-min);
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  transition:
    border-color var(--motion-duration-fast) var(--motion-ease-standard),
    box-shadow var(--motion-duration-fast) var(--motion-ease-standard);
}

.search-field-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke: var(--carrinho-ink-muted);
  fill: none;
  stroke-width: 1.85;
  display: block;
}

.search-field input {
  border: none;
  padding: 0;
  height: 100%;
  background: transparent;
  border-radius: 0;
  box-shadow: none !important;
  min-width: 0;
  width: 100%;
  flex: 1 1 auto;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--carrinho-ink);
  line-height: 1.2;
}

.search-field input::placeholder {
  color: var(--carrinho-ink-muted);
  font-weight: 500;
  opacity: 1;
}

/* Flutter SearchBarWithMic: ink focus ring (not brand red) */
.search-field:focus-within {
  border-color: var(--carrinho-ink);
  box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.06);
}

.search-mic {
  width: var(--search-mic);
  height: var(--search-mic);
  min-width: var(--search-mic);
  padding: 0;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--carrinho-ink-soft);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: background var(--motion-duration-fast) var(--motion-ease-standard),
    color var(--motion-duration-fast) var(--motion-ease-standard),
    box-shadow var(--motion-duration-fast) var(--motion-ease-standard),
    transform var(--motion-duration-fast) var(--motion-ease-standard);
}

.search-mic-wrap {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.search-mic-wrap.tip-visible .search-mic:not(.is-listening) {
  color: var(--carrinho-red);
  background: var(--carrinho-yellow-soft);
}

.voice-mic-tip {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: auto;
  z-index: calc(var(--z-sticky) + 2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: max-content;
  min-width: 0;
  max-width: min(200px, calc(100vw - 2 * var(--gutter) - 12px));
  padding: 8px 10px;
  border-radius: var(--ticket-radius);
  background: var(--carrinho-ink);
  color: var(--carrinho-snow);
  border: 1px solid var(--carrinho-ink-deep);
  box-shadow: 0 8px 20px rgba(26, 26, 26, 0.16);
  pointer-events: auto;
  box-sizing: border-box;
  animation: voiceTipIn 0.28s var(--motion-ease-standard);
}

.voice-mic-tip[hidden] {
  display: none !important;
}

.voice-mic-tip::before {
  content: "";
  position: absolute;
  top: -5px;
  right: 14px;
  width: 8px;
  height: 8px;
  background: var(--carrinho-ink);
  border-left: 1px solid var(--carrinho-ink-deep);
  border-top: 1px solid var(--carrinho-ink-deep);
  transform: rotate(45deg);
}

.voice-mic-tip strong {
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--carrinho-yellow);
  line-height: 1.2;
}

.voice-mic-tip span {
  display: none;
}

.voice-mic-tip-dismiss {
  margin-top: 0;
  justify-self: auto;
  min-height: 28px;
  height: 28px;
  padding: 0 10px;
  border: none;
  border-radius: calc(var(--ticket-radius) - 2px);
  background: var(--carrinho-red);
  color: var(--carrinho-snow);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
}

.voice-mic-tip-dismiss:hover {
  background: var(--carrinho-red-hover);
}

@keyframes voiceTipIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.search-mic svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.search-mic:hover {
  color: var(--carrinho-ink);
  background: var(--carrinho-mist);
}

.search-mic:active {
  transform: scale(0.96);
}

.search-mic.is-listening {
  background: var(--carrinho-red);
  color: var(--carrinho-snow);
  box-shadow: 0 0 0 3px var(--carrinho-red-soft);
  animation: micPulse 1.2s ease-in-out infinite;
}

@keyframes micPulse {
  0%,
  100% {
    box-shadow: 0 0 0 3px var(--carrinho-red-soft);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(234, 29, 44, 0.18);
  }
}

.search-go {
  display: none !important;
}

/* ?? Screens ?? */
.screen {
  display: none;
  flex: 1;
  width: 100%;
  max-width: 100%;
  padding: 0 var(--gutter) calc(var(--nav-h) + 72px + env(safe-area-inset-bottom, 0px));
  /* opacity-only: transform on .screen creates a containing block and breaks sticky CTAs */
  animation: screenIn var(--motion-duration-slow) var(--motion-ease-emphasized) both;
  overflow: visible;
  box-sizing: border-box;
}

.screen.active {
  display: block;
}

#screen-home.active {
  display: flex;
  flex-direction: column;
  padding: 0;
}

#screen-cart.active,
#screen-checkout.active {
  padding-bottom: calc(var(--nav-h) + 96px + env(safe-area-inset-bottom, 0px));
}

@keyframes screenIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Intentional motion 1: content rise (safe ? not on .screen sticky ancestors) */
@keyframes contentRise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes floatLeaf {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-10px) rotate(3deg); }
}

@keyframes heroReveal {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulseSoft {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

@keyframes fabIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes chipSlide {
  from {
    opacity: 0;
    transform: translateX(8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ?? Welcome: brand-first, calm white/mist composition ?? */
.welcome {
  position: relative;
  min-height: min(100dvh, 100%);
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0;
  overflow: hidden;
  box-sizing: border-box;
  background: var(--grad-welcome);
}

.welcome::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 45% at 100% 0%, rgba(234, 29, 44, 0.04), transparent 55%),
    radial-gradient(ellipse 50% 35% at 0% 100%, rgba(255, 204, 0, 0.04), transparent 50%);
  pointer-events: none;
}

.welcome-inner {
  position: relative;
  z-index: var(--z-base);
  width: 100%;
  max-width: 22rem;
  margin: 0 auto;
  padding: var(--space-12) var(--gutter) calc(var(--space-12) + env(safe-area-inset-bottom, 0px));
  animation: heroReveal var(--motion-duration-hero) var(--motion-ease-emphasized) both;
}

.welcome-mark {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--carrinho-red);
  color: #FFFFFF;
  display: grid;
  place-items: center;
  margin-bottom: var(--space-6);
}

.welcome-brand {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 8vw, 2.75rem);
  font-weight: 700;
  color: var(--carrinho-ink);
  letter-spacing: var(--letter-spacing-display);
  line-height: var(--line-height-tight);
  margin: 0 0 var(--space-3);
}

.welcome-brand::after {
  content: none;
}

.welcome-slogan {
  font-family: var(--font-body);
  font-size: var(--font-size-md);
  font-weight: 500;
  color: var(--carrinho-ink-soft);
  letter-spacing: var(--letter-spacing-tight);
  margin: 0 0 var(--space-6);
  line-height: var(--line-height-snug);
}

/* Hero motion: shopping cart cruising a quiet shelf line (subtle) */
.welcome-cart-stage {
  position: relative;
  width: 100%;
  margin: 0 0 var(--space-8);
  height: 72px;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.88;
}

.welcome-cart-rail {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--carrinho-line) 12%,
    var(--carrinho-line) 88%,
    transparent 100%
  );
}

.welcome-cart-rail::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 4px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(224, 224, 224, 0.55) 18%,
    rgba(224, 224, 224, 0.55) 82%,
    transparent 100%
  );
}

.welcome-cart-mover {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  height: 64px;
  animation: cartCruise 14s linear infinite;
  will-change: transform;
  opacity: 0.92;
}

.welcome-cart-runner {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 120px;
  height: 72px;
}

.welcome-cart-shadow {
  position: absolute;
  left: 28px;
  bottom: 4px;
  width: 72px;
  height: 8px;
  border-radius: 50%;
  background: rgba(26, 26, 26, 0.1);
  filter: blur(3px);
  animation: cartShadow 10s ease-in-out infinite;
}

.welcome-cart-svg {
  display: block;
  width: 120px;
  height: 72px;
  overflow: visible;
}

.welcome-cart-wheel {
  transform-origin: center;
  transform-box: fill-box;
  animation: cartWheel 1.1s linear infinite;
}

.welcome-cart-item {
  transform-box: fill-box;
  transform-origin: center bottom;
}

.welcome-cart-item--a {
  animation: cartItemBob 2.4s ease-in-out infinite;
}

.welcome-cart-item--b {
  animation: cartItemBob 2.4s ease-in-out 0.35s infinite;
}

.welcome-cart-item--c {
  animation: cartItemBob 2.4s ease-in-out 0.7s infinite;
}

@keyframes cartCruise {
  0% {
    transform: translateX(-110px);
  }
  100% {
    transform: translateX(calc(100% + 8px));
  }
}

@keyframes cartShadow {
  0%, 100% {
    opacity: 0.35;
    transform: scaleX(0.88);
  }
  50% {
    opacity: 0.55;
    transform: scaleX(1);
  }
}

@keyframes cartWheel {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes cartItemBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1.5px); }
}

.welcome-sub {
  color: var(--carrinho-ink-muted);
  font-size: var(--font-size-sm);
  margin: 0 0 var(--space-8);
  max-width: 34ch;
  line-height: var(--line-height-relaxed);
}

.welcome-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: 0;
}

.welcome-actions .btn-primary {
  width: 100%;
  background: var(--carrinho-red);
  color: #FFFFFF;
  box-shadow: none;
  font-weight: 600;
}

.welcome-actions .btn-primary:hover:not(:disabled) {
  background: var(--carrinho-red-hover);
  color: #FFFFFF;
}

.welcome-actions .btn-ghost {
  width: 100%;
  border-color: var(--carrinho-line);
  color: var(--carrinho-ink);
  background: transparent;
  font-weight: 500;
}

.welcome-actions .btn-ghost:hover:not(:disabled) {
  background: var(--carrinho-mist-deep);
  color: var(--carrinho-ink);
}

.bottom-nav.is-hidden,
#app.welcome-mode .bottom-nav {
  display: none;
}

#app.welcome-mode .cart-fab {
  display: none !important;
}

/* ?? In?cio feed ?? */
#screen-inicio {
  padding-top: var(--space-2);
}

.feed-head {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.brand-strip {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0 var(--space-1);
  min-width: 0;
}

.brand-strip-copy {
  min-width: 0;
}

.brand-mark {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--carrinho-red);
  display: grid;
  place-items: center;
  box-shadow: none;
  flex-shrink: 0;
}

.brand-mark svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.brand-wordmark {
  font-family: var(--font-display);
  font-size: clamp(1rem, 3.6vw, 1.12rem);
  font-weight: 700;
  color: var(--carrinho-ink);
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-tight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brand-tagline {
  margin: 1px 0 0;
  font-size: var(--font-size-xs);
  color: var(--carrinho-ink-muted);
  font-weight: 500;
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-snug);
}

.thumb-glyph {
  font-size: 0.95em;
  line-height: 1;
  opacity: 0.85;
  filter: grayscale(0.15);
}

.product-thumb,
.deal-thumb,
.cart-thumb,
.fav-thumb {
  position: relative;
  overflow: hidden;
  background: var(--carrinho-snow);
}

.product-thumb img,
.deal-thumb img,
.cart-thumb img,
.fav-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
}

/* Catalog thumbs: fill the 96px plane ? no letterbox bars */
.product-thumb img,
.deal-thumb img {
  object-fit: cover;
}

.cart-thumb img,
.fav-thumb img {
  object-fit: cover;
}

.product-thumb.is-fallback::after,
.deal-thumb.is-fallback::after,
.cart-thumb.is-fallback::after,
.fav-thumb.is-fallback::after {
  content: attr(data-initial);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.1rem, 5.5vw, 1.45rem);
  color: var(--carrinho-red);
  letter-spacing: -0.03em;
  opacity: 0.88;
}

.fav-thumb {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-subtle);
  flex-shrink: 0;
}

.carrinho-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-3) var(--space-4);
  min-height: 56px;
  border-radius: var(--card-radius);
  background:
    linear-gradient(135deg, rgba(255, 204, 0, 0.14) 0%, rgba(255, 255, 255, 0.96) 48%),
    var(--carrinho-snow);
  border: 1px solid var(--carrinho-line);
  border-left: 3px solid var(--carrinho-red);
  box-shadow: none;
  animation: screenIn var(--motion-duration-slow) var(--motion-ease-emphasized) both;
}

.carrinho-banner-copy {
  min-width: 0;
  flex: 1 1 auto;
}

.carrinho-kicker {
  display: none;
}

.carrinho-banner-copy strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--font-size-sm);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--carrinho-ink);
  line-height: 1.2;
}

.carrinho-banner-copy p {
  margin: 2px 0 0;
  font-size: 11px;
  color: var(--carrinho-ink-soft);
  line-height: 1.25;
  max-width: 28ch;
}

.carrinho-banner .btn-sm {
  flex-shrink: 0;
  padding-inline: var(--space-4);
  background: var(--carrinho-red);
  color: #FFFFFF;
  font-weight: 600;
}

.carrinho-banner .btn-sm:hover:not(:disabled) {
  background: var(--carrinho-red-hover);
  color: #FFFFFF;
}

.shelf-chips {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  overflow-x: auto;
  padding: var(--space-2) 0;
  margin: 0 calc(var(--gutter) * -1);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--gutter);
}

.shelf-chips-sticky {
  position: sticky;
  top: calc(var(--topbar-stack, 118px) - 2px);
  z-index: calc(var(--z-sticky) - 1);
  background: rgba(247, 247, 247, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  margin-top: 0;
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid transparent;
}

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

.shelf-chip {
  flex: 0 0 auto;
  flex-shrink: 0;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--catalog-chip-h);
  height: var(--catalog-chip-h);
  padding: 0 var(--catalog-chip-pad-x);
  border-radius: var(--chip-radius);
  background: var(--carrinho-snow);
  border: 1px solid var(--carrinho-line);
  color: var(--carrinho-ink-soft);
  font-size: var(--font-size-xs);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  max-width: none;
  scroll-snap-align: start;
  transition:
    background var(--motion-duration-fast) var(--motion-ease-standard),
    border-color var(--motion-duration-fast) var(--motion-ease-standard),
    color var(--motion-duration-fast) var(--motion-ease-standard),
    font-weight var(--motion-duration-fast) var(--motion-ease-standard);
}

.shelf-chip.active,
.shelf-chip[aria-selected="true"],
.shelf-chip.chip.active,
.shelf-chip.chip[aria-selected="true"] {
  background: var(--carrinho-red);
  border-color: var(--carrinho-red);
  color: #FFFFFF;
  font-weight: 700;
}

.chips {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  overflow-x: auto;
  padding: var(--space-2) 0 var(--space-3);
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.chip {
  flex: 0 0 auto;
  flex-shrink: 0;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--catalog-chip-h);
  height: var(--catalog-chip-h);
  padding: 0 var(--catalog-chip-pad-x);
  border-radius: var(--chip-radius);
  background: var(--carrinho-snow);
  border: 1px solid var(--carrinho-line);
  color: var(--carrinho-ink-soft);
  font-size: var(--font-size-xs);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  max-width: none;
  scroll-snap-align: start;
  transition:
    background var(--motion-duration-fast) var(--motion-ease-standard),
    border-color var(--motion-duration-fast) var(--motion-ease-standard),
    color var(--motion-duration-fast) var(--motion-ease-standard);
}

.chip.active,
.chip[aria-selected="true"] {
  background: var(--carrinho-red);
  border-color: var(--carrinho-red);
  color: #FFFFFF;
  font-weight: 700;
}

.chips-compact {
  padding-bottom: var(--space-2);
}

.section-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin: var(--space-4) 0 var(--space-3);
  min-width: 0;
  padding: 0;
}

.section-label-stack {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
}

.section-label-inicio {
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
}

.section-label-inicio h2 {
  font-family: var(--font-display);
  font-size: var(--font-size-md);
  font-weight: 800;
  letter-spacing: var(--letter-spacing-tight);
  color: var(--carrinho-ink);
  line-height: 1.2;
}

.section-sub {
  margin: 2px 0 0;
  font-size: var(--font-size-xs);
  line-height: var(--line-height-snug);
  font-weight: 500;
}

.section-label .section-sub {
  flex: 1 1 100%;
}

.home-catalog {
  margin-bottom: var(--space-2);
  /* Flat home feed = same 2-col density as store/search grids */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--catalog-gap);
  align-items: stretch;
}

.stores-deepdive {
  margin: var(--space-6) 0 var(--space-4);
  border: 1px solid var(--carrinho-line);
  border-radius: var(--card-radius);
  background: var(--carrinho-snow);
  padding: 0;
}

.stores-deepdive-summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--font-size-md);
  color: var(--carrinho-ink);
  user-select: none;
}

.stores-deepdive-summary::-webkit-details-marker {
  display: none;
}

.stores-deepdive-summary::after {
  content: "";
  width: 0.55em;
  height: 0.55em;
  border-right: 2px solid var(--carrinho-ink-muted);
  border-bottom: 2px solid var(--carrinho-ink-muted);
  transform: rotate(45deg);
  transition: transform 160ms ease;
  flex-shrink: 0;
  margin-left: auto;
}

.stores-deepdive[open] .stores-deepdive-summary::after {
  transform: rotate(-135deg);
  margin-top: 0.25em;
}

.stores-deepdive-hint {
  font-family: var(--font-body, inherit);
  font-size: var(--font-size-xs);
  font-weight: 500;
}

.stores-deepdive .city-toolbar {
  padding: 0 var(--space-4) var(--space-3);
}

.stores-deepdive .store-feed {
  padding: 0 var(--space-3) var(--space-3);
}

.cart-fee-provisional {
  margin: var(--space-2) 0 0;
  font-size: var(--font-size-xs);
}

.section-label-inline {
  margin: 0 0 var(--space-2);
  align-items: center;
}

.section-label-tight {
  margin-top: 0;
}

.section-label-spaced {
  margin-top: var(--space-6);
}

.section-label h2 {
  font-size: var(--font-size-lg);
  font-weight: 700;
  letter-spacing: var(--letter-spacing-tight);
  min-width: 0;
}

.section-label-sm {
  font-size: var(--font-size-sm) !important;
  font-weight: 700;
  letter-spacing: var(--letter-spacing-tight);
}

.section-aside {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--carrinho-ink-muted);
  flex-shrink: 0;
}

/* ?? Store feed ?? */
.store-feed {
  display: grid;
  gap: 0;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-radius: var(--ticket-radius);
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.store-feed:has(.empty),
.store-feed:has(.error),
.store-feed:has(> .muted) {
  border: none;
  background: transparent;
  overflow: visible;
}

.store-card {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-4);
  border-bottom: 1px solid var(--carrinho-line);
  background: transparent;
  width: 100%;
  text-align: left;
  border-radius: 0;
  animation: screenIn var(--motion-duration-normal) var(--motion-ease-emphasized) both;
}

.store-card:last-child {
  border-bottom: none;
}

.store-card:active {
  background: var(--carrinho-mist);
}

.store-logo {
  width: 52px;
  height: 52px;
  border-radius: var(--ticket-radius);
  background: var(--carrinho-ink);
  display: grid;
  place-items: center;
  border: none;
  flex-shrink: 0;
  align-self: start;
}

.store-logo-initial {
  font-family: var(--font-display);
  font-weight: 700;
  color: #FFFFFF;
  font-size: 1.1rem;
  letter-spacing: var(--letter-spacing-tight);
  line-height: 1;
}

.store-body {
  min-width: 0;
  align-self: start;
}

.store-chevron {
  align-self: center;
  color: var(--carrinho-ink-muted);
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1;
  opacity: 0.7;
}

.store-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  min-width: 0;
}

.store-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--font-size-md);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--carrinho-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}

.store-open-pill {
  flex-shrink: 0;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--carrinho-mist);
  color: var(--carrinho-ink-muted);
}

.store-open-pill.is-open {
  background: rgba(26, 26, 26, 0.06);
  color: var(--carrinho-ink);
}

.store-open-pill.is-closed {
  background: var(--carrinho-red-soft, rgba(234, 29, 44, 0.12));
  color: var(--carrinho-red);
}

.store-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  font-size: var(--font-size-xs);
  color: var(--carrinho-ink-muted);
  font-weight: 500;
  line-height: 1.35;
}

.store-meta .rating {
  color: var(--carrinho-ink-soft);
  font-weight: 700;
}

.store-meta .dot::before {
  content: "?";
  margin-right: 8px;
  color: var(--shelf-line-strong);
}

.store-meta .store-dist {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--carrinho-ink-soft);
  letter-spacing: 0.01em;
}

.store-fee {
  margin-top: 6px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--carrinho-ink-soft);
}

.store-fee-value {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--carrinho-ink);
}

/* ?? Store detail page ?? */
.page-nav-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0 var(--space-2);
}

.page-nav-label {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-text-muted);
}

.store-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  animation: screenIn var(--motion-duration-slow) var(--motion-ease-emphasized) both;
}

.store-visual {
  position: relative;
  min-height: 180px;
  border-radius: var(--card-radius);
  overflow: hidden;
  background: linear-gradient(145deg, var(--carrinho-ink-deep) 0%, #2A2A2A 55%, var(--carrinho-red-deep) 140%);
  box-shadow: var(--shadow-md);
}

.store-visual-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 70% 20%, rgba(255, 204, 0, 0.22), transparent 55%),
    linear-gradient(90deg, transparent 0 47%, rgba(255,255,255,0.06) 47% 53%, transparent 53%),
    linear-gradient(0deg, transparent 0 47%, rgba(255,255,255,0.04) 47% 53%, transparent 53%);
  background-size: auto, 40px 40px, 40px 40px;
  opacity: 0.85;
}

.store-visual-aisle {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 42%;
  height: 3px;
  border-radius: 0;
  background: var(--carrinho-red);
}

.store-visual-mark {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 88px;
  height: 88px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-brand-primary);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.4rem;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-lg);
  letter-spacing: -0.04em;
  z-index: var(--z-base);
}

.store-details {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 0;
}

.store-status-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--carrinho-yellow-soft);
  color: var(--carrinho-ink);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid rgba(255, 204, 0, 0.45);
  text-transform: none;
  max-width: 11rem;
  text-align: right;
  line-height: 1.25;
}

.status-pill.pending {
  background: var(--color-status-warning-soft, #fff6d6);
  color: var(--carrinho-ink);
  border-color: rgba(255, 204, 0, 0.55);
}

.status-pill.active {
  background: rgba(234, 29, 44, 0.08);
  color: var(--carrinho-red, #ea1d2c);
  border-color: rgba(234, 29, 44, 0.28);
}

.status-pill.done {
  background: var(--carrinho-yellow-soft);
  color: var(--carrinho-ink);
  border-color: rgba(255, 204, 0, 0.55);
}

.status-pill.cancelled {
  background: rgba(120, 120, 120, 0.12);
  color: var(--carrinho-ink-soft, #666);
  border-color: var(--carrinho-line);
}

.orders-filters {
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  margin-top: calc(var(--space-2) * -1);
  margin-bottom: var(--space-2);
}

.store-title {
  font-size: clamp(1.6rem, 5vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.04em;
}

.store-desc {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1.45;
  max-width: 36rem;
}

.store-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.stat-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-subtle);
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-text-secondary);
}

.stat-chip strong {
  color: var(--color-text-primary);
  font-weight: 800;
}

.store-address {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.store-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-1);
}

.store-actions-sticky {
  position: sticky;
  bottom: calc(var(--nav-h) + var(--space-3) + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-dropdown);
  margin: var(--space-4) calc(var(--gutter) * -1) 0;
  padding: var(--space-3) var(--gutter);
  background: var(--glass-bg-strong);
  border-top: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: 0 -8px 24px rgba(26, 26, 26, 0.06);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  width: calc(100% + 2 * var(--gutter));
  box-sizing: border-box;
}

.store-actions-sticky .btn-primary,
.store-actions-sticky .btn-accent {
  flex: 1 1 0;
  min-width: 0;
}

.map-section {
  margin-top: var(--space-2);
  margin-bottom: var(--space-2);
}

.map-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  min-height: 200px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border-subtle);
  background: var(--color-surface-subtle);
  box-shadow: var(--shadow-sm);
}

.map-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.map-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 8px;
  text-align: center;
  padding: var(--space-6);
  background:
    linear-gradient(160deg, var(--color-atmosphere-sky), var(--color-atmosphere-mist));
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.map-fallback[hidden] {
  display: none !important;
}

.map-pin {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: 0 auto;
  border-radius: var(--ticket-radius);
  background: var(--carrinho-red);
  color: #FFFFFF;
}

.map-pin svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.map-pin svg circle {
  fill: currentColor;
  stroke: none;
}

.map-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.map-link {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ?? Mapa tab (Leaflet + OSM) ?? */
#screen-mapa {
  padding: 0;
  overflow: hidden;
}

#screen-mapa.active {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - var(--topbar-stack, 72px));
  height: calc(100dvh - var(--topbar-stack, 72px));
  max-height: calc(100dvh - var(--topbar-stack, 72px));
  animation: none;
}

.mapa-shell {
  position: relative;
  flex: 1;
  min-height: 0;
  width: 100%;
  background:
    radial-gradient(120% 80% at 50% 0%, var(--carrinho-yellow-soft), transparent 55%),
    var(--carrinho-mist);
}

.mapa-canvas {
  position: absolute;
  inset: 0;
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
  z-index: 0;
  background: var(--carrinho-mist);
}

.mapa-canvas .leaflet-container {
  width: 100%;
  height: 100%;
  font-family: inherit;
  background: var(--carrinho-mist);
}

.mapa-float {
  position: absolute;
  top: var(--space-3);
  left: var(--gutter);
  right: var(--gutter);
  z-index: 2;
  display: grid;
  gap: var(--space-2);
  pointer-events: none;
}

.mapa-toolbar {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-start;
  pointer-events: auto;
}

.mapa-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--carrinho-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--carrinho-ink);
  font-size: var(--font-size-sm);
  font-weight: 600;
  box-shadow: 0 6px 20px rgba(26, 26, 26, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
}

.mapa-tool-btn svg {
  width: 18px;
  height: 18px;
  stroke: var(--carrinho-red);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

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

.mapa-tool-btn-icon {
  width: 40px;
  padding: 0;
  justify-content: center;
}

.mapa-status {
  margin: 0;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(26, 26, 26, 0.88);
  color: var(--carrinho-snow);
  font-size: var(--font-size-xs);
  font-weight: 500;
  width: fit-content;
  max-width: 100%;
  pointer-events: none;
}

.mapa-status[hidden] {
  display: none !important;
}

.mapa-marker {
  background: transparent;
  border: 0;
}

.mapa-pin {
  position: relative;
  width: 36px;
  height: 44px;
  display: grid;
  place-items: start center;
  filter: drop-shadow(0 4px 8px rgba(26, 26, 26, 0.22));
  transition: transform 160ms ease;
}

.mapa-pin-dot {
  width: 32px;
  height: 32px;
  border-radius: 50% 50% 50% 4px;
  transform: rotate(-45deg);
  background: var(--carrinho-red);
  border: 2px solid var(--carrinho-snow);
  display: grid;
  place-items: center;
}

.mapa-pin-dot span {
  transform: rotate(45deg);
  color: var(--carrinho-snow);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  font-family: "Bricolage Grotesque", "Figtree", sans-serif;
}

.mapa-pin.is-selected {
  transform: scale(1.14);
  z-index: 2;
}

.mapa-pin.is-selected .mapa-pin-dot {
  background: var(--carrinho-ink);
  box-shadow: 0 0 0 3px var(--carrinho-yellow);
}

.mapa-user-marker {
  background: transparent;
  border: 0;
}

.mapa-user-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--carrinho-yellow);
  border: 3px solid var(--carrinho-ink);
  box-shadow: 0 0 0 6px rgba(255, 204, 0, 0.28);
}

.mapa-sheet {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + var(--space-3));
  z-index: 3;
  padding: var(--space-3) var(--space-4) var(--space-4);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid var(--carrinho-line);
  box-shadow: 0 12px 32px rgba(26, 26, 26, 0.14);
  animation: mapaSheetIn 220ms var(--motion-ease-emphasized, ease) both;
}

.mapa-sheet[hidden] {
  display: none !important;
}

@keyframes mapaSheetIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mapa-sheet-handle {
  width: 36px;
  height: 4px;
  border-radius: 999px;
  background: var(--carrinho-line-strong);
  margin: 0 auto var(--space-3);
}

.mapa-sheet-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: var(--carrinho-mist);
  color: var(--carrinho-ink-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.mapa-sheet-body {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding-right: 28px;
}

.mapa-sheet-logo {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, var(--carrinho-red), var(--carrinho-red-deep));
  color: var(--carrinho-snow);
  font-family: "Bricolage Grotesque", "Figtree", sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
}

.mapa-sheet-copy {
  min-width: 0;
  flex: 1;
}

.mapa-sheet-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.mapa-sheet-name {
  font-size: 1.05rem;
  color: var(--carrinho-ink);
  font-family: "Bricolage Grotesque", "Figtree", sans-serif;
}

.mapa-sheet-meta {
  margin: 4px 0 0;
  font-size: var(--font-size-sm);
  color: var(--carrinho-ink-soft);
}

.mapa-sheet-addr {
  margin: 6px 0 0;
  font-size: var(--font-size-xs);
  line-height: 1.35;
}

.mapa-sheet-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.mapa-sheet-actions .btn-soft,
.mapa-sheet-actions .btn-primary {
  min-height: 44px;
  font-size: var(--font-size-sm);
}

.leaflet-control-attribution {
  font-size: 10px !important;
  background: rgba(255, 255, 255, 0.82) !important;
  color: var(--carrinho-ink-muted) !important;
  border-radius: 6px 0 0 0;
  max-width: 55%;
}

.leaflet-control-zoom a {
  color: var(--carrinho-ink) !important;
  border-color: var(--carrinho-line) !important;
}

@media (prefers-reduced-motion: reduce) {
  .mapa-sheet {
    animation: none;
  }
  .mapa-pin {
    transition: none;
  }
}

.menu-head {
  padding: var(--space-1) 0 var(--space-2);
}

.menu-head h1 {
  font-size: var(--font-size-xl);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.menu-head p {
  margin: var(--space-1) 0 0;
  font-size: var(--font-size-sm);
}

.search-result-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--ticket-radius);
  background: var(--carrinho-yellow-soft);
  border: 1px solid rgba(255, 204, 0, 0.45);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--carrinho-ink);
}

.search-result-main {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  flex: 1;
}

.search-result-count {
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  min-width: 1.75rem;
  height: 1.75rem;
  padding: 0 6px;
  border-radius: var(--ticket-radius);
  background: var(--carrinho-ink);
  color: var(--carrinho-snow);
  font-size: var(--font-size-xs);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.search-result-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.search-result-label {
  font-weight: 700;
  line-height: 1.25;
}

.search-result-meta {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--carrinho-ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-result-bar .link-btn {
  flex-shrink: 0;
  font-weight: 700;
}

.store-context-text {
  flex: 1;
  min-width: 0;
}

.cart-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.cart-sheet-head h2 {
  font-size: var(--font-size-md);
  font-weight: 700;
}

.totals-sheet {
  margin-top: var(--space-3);
}

.total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.total-row-grand {
  margin-top: var(--space-1);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-subtle);
  font-weight: 800;
  font-size: var(--font-size-md);
  color: var(--color-text-primary);
}

.total-row-plain {
  border-top: 0;
  padding: 0;
  margin: 0;
}

.order-detail-totals {
  margin: var(--space-3) 0 var(--space-4);
}

.order-detail-actions {
  margin-top: var(--space-4);
  gap: var(--space-2);
}

.quote-price {
  margin-top: var(--space-2);
}

.cart-line-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.cart-thumb {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-subtle);
  flex-shrink: 0;
}

.cart-line-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.cart-line-total {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-size: var(--font-size-sm);
}

.cart-checkout-bar {
  /* sticky bar styles near end */
}

.product-section-label {
  font-family: var(--font-display);
  font-size: var(--font-size-sm);
  font-weight: 800;
  color: var(--carrinho-ink);
  letter-spacing: -0.02em;
  padding: var(--space-3) 0 var(--space-1);
  grid-column: 1 / -1;
}

.menu-filters-sticky {
  position: sticky;
  top: calc(var(--topbar-stack, 118px) - 2px);
  z-index: calc(var(--z-sticky) - 1);
  background: rgba(247, 247, 247, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  margin: 0 calc(var(--gutter) * -1);
  padding: var(--space-2) var(--gutter) var(--space-3);
  border-bottom: 1px solid var(--carrinho-line);
}

.menu-filters-sticky .chips {
  padding: var(--space-1) 0 0;
  margin: 0;
  gap: var(--space-2);
}

.menu-filters-sticky .menu-cats .chip {
  background: var(--carrinho-snow);
  border: 1px solid var(--carrinho-line);
  font-weight: 500;
  height: var(--catalog-chip-h);
  min-height: var(--catalog-chip-h);
  padding: 0 var(--catalog-chip-pad-x);
}

.menu-filters-sticky .menu-cats .chip.active {
  background: var(--carrinho-red);
  border-color: var(--carrinho-red);
  color: var(--carrinho-snow);
  font-weight: 700;
}

.menu-filters-sticky .recent-searches {
  margin-bottom: var(--space-2);
}

.menu-sort-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.menu-sort-field {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 160px;
}

.menu-sort-label {
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--carrinho-ink-muted);
  flex-shrink: 0;
}

.menu-sort-field select {
  flex: 1;
  min-width: 0;
  min-height: var(--touch-min);
  border: 1px solid var(--carrinho-line);
  border-radius: var(--ticket-radius);
  background: var(--carrinho-snow);
  color: var(--carrinho-ink);
  font: inherit;
  font-weight: 600;
  padding: 0 10px;
}

.menu-avail-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--carrinho-ink-soft);
  cursor: pointer;
  user-select: none;
  min-height: var(--touch-min);
}

.menu-avail-toggle input {
  width: 18px;
  height: 18px;
  accent-color: var(--carrinho-red);
}

.addr-default-toggle {
  margin-top: 4px;
  padding: 10px 12px;
  border-radius: var(--ticket-radius);
  background: var(--carrinho-mist);
  border: 1px solid var(--carrinho-line);
}

/* ?? Products ?? */
.store-context {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) 0 var(--space-2);
}

.back-btn {
  width: var(--touch-min);
  height: var(--touch-min);
  padding: 0;
  border-radius: var(--ticket-radius);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-subtle);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.back-btn svg {
  width: 20px;
  height: 20px;
  stroke: var(--color-text-primary);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.store-context-name {
  font-weight: 700;
  font-family: var(--font-display);
  letter-spacing: -0.03em;
}

.store-context-meta {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.product-grid {
  display: grid;
  gap: var(--catalog-gap);
  padding-bottom: var(--space-6);
}

.product-section-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--catalog-gap);
  align-items: stretch;
}

.product-card {
  display: grid;
  grid-template-rows: var(--catalog-img-h) 1fr auto;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: stretch;
  min-height: 0;
  min-width: 0;
  height: 100%;
  padding: 0 0 var(--catalog-card-pad);
  border: 1px solid var(--carrinho-line);
  border-radius: var(--card-radius);
  background: var(--carrinho-snow);
  box-shadow: none;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  animation: screenIn var(--motion-duration-normal) var(--motion-ease-emphasized) both;
  transition: transform var(--motion-duration-fast) var(--motion-ease-standard),
    border-color var(--motion-duration-fast) var(--motion-ease-standard);
}

.product-card:active {
  transform: scale(0.985);
}

.product-card.is-unavailable {
  opacity: 0.55;
}

.product-card.is-unavailable .add-btn {
  background: var(--carrinho-line-strong);
  color: var(--carrinho-ink-muted);
}

.fav-toggle {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 2;
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  padding: 0;
  border: 1px solid var(--carrinho-line);
  border-radius: var(--ticket-radius);
  background: color-mix(in srgb, var(--carrinho-snow) 92%, transparent);
  color: var(--carrinho-ink-muted);
  font-size: 0.85rem;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: none;
}

.fav-toggle:hover {
  color: var(--carrinho-red);
  border-color: color-mix(in srgb, var(--carrinho-red) 35%, var(--carrinho-line));
}

.fav-toggle.is-on {
  color: var(--carrinho-red);
  border-color: color-mix(in srgb, var(--carrinho-red) 40%, var(--carrinho-line));
}

.product-sheet-fav {
  position: absolute;
  top: 8px;
  right: calc(10px + var(--touch-min) + 6px);
  width: var(--touch-min);
  height: var(--touch-min);
  border: 0;
  border-radius: var(--ticket-radius);
  background: var(--carrinho-mist);
  color: var(--carrinho-ink-muted);
  font-size: 1.25rem;
  line-height: 1;
  display: grid;
  place-items: center;
  z-index: var(--z-base);
  cursor: pointer;
}

.product-sheet-fav.is-on {
  color: var(--carrinho-red);
}

.privacy-stub-note {
  margin: 0 0 var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--carrinho-line);
  border-radius: var(--ticket-radius);
  background: var(--carrinho-mist);
  font-size: var(--font-size-sm);
  line-height: 1.45;
  color: var(--carrinho-ink);
}

.product-thumb {
  width: 100%;
  height: var(--catalog-img-h);
  max-height: var(--catalog-img-h);
  aspect-ratio: auto;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--carrinho-line);
  flex-shrink: 0;
  padding: var(--catalog-img-pad, 0);
  box-sizing: border-box;
  display: block;
  background: var(--carrinho-snow);
}

.product-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--catalog-info-gap, 4px);
  padding: var(--space-2) var(--catalog-card-pad) 0;
  flex: 1 1 auto;
  justify-content: flex-start;
}

.product-brand {
  font-size: 10px;
  font-weight: 700;
  color: var(--carrinho-ink-muted);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1;
  min-height: var(--catalog-brand-h, 14px);
  height: var(--catalog-brand-h, 14px);
  display: flex;
  align-items: center;
}

.product-name {
  font-weight: 600;
  font-size: var(--catalog-title-size);
  font-family: var(--font-display);
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--catalog-title-lh, 1.2);
  color: var(--carrinho-ink);
  display: -webkit-box;
  -webkit-line-clamp: var(--catalog-title-lines, 2);
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  padding: 0;
  /* Fixed 2-line slot ? 1-line titles don?t collapse the card */
  height: var(--catalog-title-h);
  min-height: var(--catalog-title-h);
  max-height: var(--catalog-title-h);
}

.product-unit-row {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: nowrap;
  margin-top: 0;
  min-height: var(--catalog-unit-h, 16px);
  height: var(--catalog-unit-h, 16px);
  overflow: hidden;
}

.product-unit {
  display: inline-flex;
  align-items: center;
  min-height: var(--catalog-unit-h, 16px);
  height: var(--catalog-unit-h, 16px);
  padding: 0 5px;
  border-radius: 4px;
  background: var(--carrinho-yellow-soft);
  color: var(--carrinho-ink);
  border: 1px solid rgba(255, 204, 0, 0.4);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1;
  box-sizing: border-box;
}

.product-stock-out {
  font-size: 10px;
  font-weight: 700;
  color: var(--carrinho-red);
  line-height: 1;
}

.product-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--catalog-add-size);
  grid-template-rows: auto var(--catalog-price-row-h) var(--catalog-ppu-slot);
  grid-template-areas:
    "was was"
    "price add"
    "ppu .";
  column-gap: var(--space-2);
  row-gap: 0;
  align-items: center;
  margin-top: auto;
  padding: var(--space-2) var(--catalog-card-pad) 0;
  min-width: 0;
  /* border-box: pad sits OUTSIDE the price|+|ppu block */
  min-height: calc(var(--catalog-footer-h) + var(--space-2));
  height: auto;
  box-sizing: border-box;
}

.product-was {
  grid-area: was;
  display: block;
  min-width: 0;
  max-width: 100%;
  height: var(--catalog-was-slot);
  margin: 0;
  padding: 0;
  font-size: var(--catalog-was-size);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  line-height: var(--catalog-was-slot);
  color: var(--carrinho-ink-muted);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--carrinho-ink-muted) 75%, transparent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-was .money-rs {
  font-size: 0.85em;
  font-weight: 500;
}

.product-was .money-num {
  font-weight: 500;
}

.product-price {
  grid-area: price;
  display: flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  height: var(--catalog-price-row-h);
  margin: 0;
  padding: 0;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  color: var(--carrinho-ink);
  font-size: var(--catalog-price-size);
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--catalog-price-lh, 1);
  white-space: nowrap;
  overflow: hidden;
}

.product-price .money,
.product-was .money,
.deal-price .money {
  display: inline-flex;
  align-items: baseline;
  gap: 0.15em;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

.product-price .money-rs {
  flex-shrink: 0;
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--carrinho-ink);
  transform: translateY(-0.04em);
}

.product-price .money-num {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.product-ppu {
  grid-area: ppu;
  display: flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  height: var(--catalog-ppu-slot);
  margin: 0;
  padding: 0;
  font-size: var(--catalog-ppu-size, 10px);
  color: var(--carrinho-ink-muted);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-ppu.is-empty {
  visibility: hidden;
  pointer-events: none;
}

.add-btn {
  grid-area: add;
  position: relative;
  flex-shrink: 0;
  align-self: center;
  justify-self: end;
  width: var(--catalog-add-size);
  height: var(--catalog-add-size);
  min-width: var(--catalog-add-size);
  min-height: var(--catalog-add-size);
  margin: 0;
  padding: 0;
  border: none;
  border-radius: var(--ticket-radius);
  background: var(--carrinho-red);
  color: #FFFFFF;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1;
  display: grid;
  place-items: center;
  box-shadow: none;
  z-index: var(--z-base);
  transition: background var(--motion-duration-fast) var(--motion-ease-standard),
    transform var(--motion-duration-fast) var(--motion-ease-standard);
}

/* Expand hit area without shifting the 32px visual */
.add-btn::before {
  content: "";
  position: absolute;
  inset: -6px;
}

.add-btn-icon {
  display: block;
  line-height: 1;
  transform: translateY(-0.5px);
  font-weight: 400;
}

.add-btn:hover:not(:disabled) {
  background: var(--carrinho-red-hover);
}

.add-btn:active:not(:disabled) {
  background: var(--carrinho-red-pressed);
  transform: scale(0.96);
}

.add-btn:disabled {
  cursor: not-allowed;
  opacity: 0.7;
  background: var(--carrinho-line-strong);
  color: var(--carrinho-ink-muted);
}

/* ?? Cart / quotes ?? */
.page-head {
  padding: var(--space-3) 0 var(--space-2);
}

.page-head h1 {
  font-size: var(--font-size-2xl);
  font-weight: 800;
  letter-spacing: var(--letter-spacing-tight);
}

.page-head p {
  margin: var(--space-1) 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-snug);
}

.page-head-compact {
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}

.page-head-compact h1 {
  font-size: clamp(1.25rem, 4.5vw, 1.45rem);
}

.login-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-4) 0 var(--space-2);
}

.login-brand .welcome-mark {
  margin-bottom: var(--space-2);
}

.login-brand .brand-wordmark {
  font-size: clamp(1.75rem, 7vw, 2.1rem);
  font-weight: 800;
}

.login-brand .brand-tagline {
  margin: 0;
  color: var(--carrinho-ink-soft);
  font-size: 1rem;
  font-weight: 600;
}

.login-actions {
  display: flex;
  gap: var(--space-3);
  align-items: stretch;
}

.login-actions .btn-soft,
.login-actions .btn-primary {
  flex: 1 1 0;
  min-height: var(--touch-min);
  min-width: 0;
}

.empty-rich,
.empty.empty-rich {
  padding: var(--space-8) var(--space-4);
  border-radius: var(--ticket-radius);
  background: var(--carrinho-snow);
  border: 1px solid var(--carrinho-line);
}

.empty-rich p {
  margin: 0;
  max-width: 28ch;
  color: var(--carrinho-ink-muted);
  line-height: var(--line-height-snug);
}

.skeleton-row {
  height: 72px;
}

.sheet {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.cart-list {
  display: grid;
}

.cart-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-subtle);
  min-width: 0;
}

.cart-line:last-child {
  border-bottom: none;
}

.item-title {
  font-weight: 600;
  font-size: var(--font-size-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.item-meta {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}

.qty {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.qty button {
  width: var(--touch-min);
  height: var(--touch-min);
  padding: 0;
  border-radius: var(--ticket-radius);
  display: grid;
  place-items: center;
  font-size: 1.15rem;
}

.subtotal-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  margin-top: 4px;
  border-top: 1px solid var(--color-border-subtle);
  font-weight: 700;
}

.price {
  font-variant-numeric: tabular-nums;
}

.compare-block {
  margin: var(--space-4) 0;
}

.compare-hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3);
}

.quote-list {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.quote-option {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-surface-subtle);
  position: relative;
}

.quote-option.best {
  border-color: var(--color-brand-primary);
  background: var(--color-brand-primary-soft);
}

.quote-option .tag {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-on-accent);
  background: var(--color-brand-accent);
  border-radius: var(--radius-pill);
  padding: 3px 8px;
  margin: 0 6px 6px 0;
}

.quote-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 4px;
}

.quote-gap {
  margin-top: 6px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: 1.35;
}

.quote-gap.ok-line {
  color: var(--carrinho-ink-soft);
}

.quote-sub-block {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--color-surface-raised) 88%, var(--color-brand-primary) 12%);
  border: 1px solid var(--color-border-subtle);
}

.quote-sub-title {
  font-size: var(--font-size-xs);
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--carrinho-ink);
}

.quote-sub-list {
  margin: 0;
  padding-left: 1.1em;
  font-size: var(--font-size-xs);
  line-height: 1.45;
  color: var(--carrinho-ink-soft);
}

.quote-sub-list .sub-opt-name {
  font-weight: 600;
  color: var(--carrinho-ink);
}

.checkout-line-missing {
  align-items: flex-start;
  gap: 8px;
}

.checkout-line-missing .missing-label {
  font-weight: 700;
  display: block;
  margin-bottom: 2px;
}

.order-missing-banner {
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--carrinho-yellow-soft);
  border: 1px solid rgba(255, 204, 0, 0.45);
  font-size: var(--font-size-sm);
  line-height: 1.4;
}

.quote-option .savings {
  margin-top: 6px;
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--color-brand-primary);
}

.quote-pick {
  margin-top: 10px;
}

/* ?? Active order status bar ? one thin line under browse chrome ?? */
.active-order-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  margin: var(--space-2) calc(var(--gutter) * -1) 0;
  padding: 8px var(--gutter);
  min-height: var(--touch-min);
  border: 0;
  border-top: 1px solid rgba(26, 26, 26, 0.06);
  background: linear-gradient(90deg, var(--carrinho-yellow-soft) 0%, var(--carrinho-snow) 55%);
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
  position: relative;
  z-index: 1;
  animation: screenIn var(--motion-duration-normal) var(--motion-ease-emphasized) both;
  box-sizing: border-box;
}

.active-order-bar[hidden] {
  display: none !important;
}

.active-order-bar:hover,
.active-order-bar:focus-visible {
  background: linear-gradient(90deg, var(--carrinho-yellow-soft) 0%, var(--carrinho-snow) 55%);
  outline: none;
}

.active-order-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--carrinho-red);
  box-shadow: 0 0 0 0 rgba(234, 29, 44, 0.45);
  animation: activeOrderPulse 1.6s ease-out infinite;
}

@keyframes activeOrderPulse {
  0% { box-shadow: 0 0 0 0 rgba(234, 29, 44, 0.45); }
  70% { box-shadow: 0 0 0 8px rgba(234, 29, 44, 0); }
  100% { box-shadow: 0 0 0 0 rgba(234, 29, 44, 0); }
}

.active-order-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 6px;
  line-height: 1.25;
  overflow: hidden;
}

.active-order-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--carrinho-ink-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.active-order-phase {
  font-family: var(--font-display);
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--carrinho-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1 1 120px;
  max-width: 100%;
}

.active-order-cta {
  flex-shrink: 0;
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--carrinho-red);
  min-height: var(--touch-min);
  display: inline-flex;
  align-items: center;
  padding: 0 4px;
}

body.skin-comfort .active-order-phase {
  font-size: var(--font-size-sm);
}

body.skin-comfort .active-order-cta {
  font-size: var(--font-size-xs);
}

/* Hide active-order under non-browse chrome (defense in depth vs JS) */
.topbar[data-chrome="slim"] .active-order-bar,
.topbar[data-chrome="cart"] .active-order-bar,
.topbar.chrome-slim .active-order-bar,
.topbar.chrome-cart .active-order-bar {
  display: none !important;
}

/* ?? Consumer tracking steps (pago ? separando ? saiu ? entregue) ?? */
.track-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin: 8px 0 10px;
  padding: 8px 6px;
  border-radius: var(--ticket-radius);
  background: var(--carrinho-snow);
  border: 1px solid var(--carrinho-line);
}

.track-step {
  display: grid;
  justify-items: center;
  gap: 4px;
  text-align: center;
  position: relative;
  min-width: 0;
}

.track-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 9px;
  left: calc(50% + 10px);
  right: calc(-50% + 10px);
  height: 2px;
  background: var(--carrinho-line);
  z-index: 0;
}

.track-step.is-done:not(:last-child)::after,
.track-step.is-current:not(:last-child)::after {
  background: var(--carrinho-red);
}

.track-step-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--carrinho-line);
  background: #fff;
  z-index: 1;
  position: relative;
  box-sizing: border-box;
}

.track-step.is-done .track-step-dot {
  background: var(--carrinho-red);
  border-color: var(--carrinho-red);
}

.track-step.is-current .track-step-dot {
  border-color: var(--carrinho-red);
  box-shadow: 0 0 0 3px rgba(234, 29, 44, 0.18);
  animation: pulseSoft 1.4s ease-in-out infinite;
}

.track-step-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--carrinho-ink-muted);
  line-height: 1.15;
  max-width: 100%;
}

.track-step.is-done .track-step-label,
.track-step.is-current .track-step-label {
  color: var(--carrinho-ink);
}

.track-eta-line {
  margin: 0 0 10px;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--carrinho-ink);
  text-align: left;
}

.track-eta-line .muted {
  font-weight: 500;
}

.track-steps-compact {
  margin: 8px 0 4px;
  padding: 6px 4px;
  gap: 2px;
}

.track-steps-compact .track-step-dot {
  width: 12px;
  height: 12px;
  border-width: 1.5px;
}

.track-steps-compact .track-step:not(:last-child)::after {
  top: 6px;
  left: calc(50% + 7px);
  right: calc(-50% + 7px);
  height: 1.5px;
}

.track-steps-compact .track-step-label {
  font-size: 9px;
}

.track-steps-compact .track-step.is-current .track-step-dot {
  box-shadow: 0 0 0 2px rgba(234, 29, 44, 0.16);
}

/* ?? Timeline ?? */
.timeline {
  display: grid;
  gap: 0;
  padding-left: 4px;
  margin-top: 8px;
}

.timeline-step {
  position: relative;
  padding: 0 0 18px 22px;
  border-left: 2px solid var(--color-border-subtle);
}

.timeline-step:last-child {
  border-left-color: transparent;
  padding-bottom: 0;
}

.timeline-step::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-surface-raised);
  border: 2px solid var(--color-brand-primary);
}

.timeline-step.done::before {
  background: var(--color-brand-primary);
}

.timeline-step.current::before {
  box-shadow: 0 0 0 4px var(--color-brand-primary-soft);
}

.order-status-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-brand-primary-soft);
  color: var(--color-brand-primary);
  font-size: var(--font-size-xs);
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  margin-bottom: 0;
}

.empty {
  text-align: left;
  padding: 24px 4px;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  display: grid;
  gap: var(--space-2);
  justify-items: start;
}

.empty strong {
  display: block;
  color: var(--carrinho-ink);
  font-family: var(--font-display);
  font-size: var(--font-size-md);
  font-weight: 700;
  letter-spacing: var(--letter-spacing-tight);
}

.empty .muted,
.empty p {
  margin: 0;
  max-width: 36ch;
  line-height: var(--line-height-snug);
}

.empty-left {
  text-align: left;
  justify-items: start;
}

.empty-friendly,
.empty-error {
  padding: var(--space-5) var(--space-3);
  border-radius: var(--ticket-radius);
  background: var(--carrinho-snow);
  border: 1px solid var(--carrinho-line);
  width: 100%;
  box-sizing: border-box;
}

.empty-error {
  border-color: var(--carrinho-red-soft);
  background: linear-gradient(180deg, var(--carrinho-red-soft) 0%, var(--carrinho-snow) 55%);
}

.empty-error strong {
  color: var(--carrinho-red);
}

.empty .btn-primary,
.empty .btn-soft,
.empty .btn-ghost {
  margin-top: 4px;
  min-width: 0;
}

.loading-line {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--space-6) var(--space-1);
  text-align: left;
  margin: 0;
}

.loading-line::before {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid var(--carrinho-line-strong, #ddd);
  border-top-color: var(--carrinho-red, #e11);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.order-number-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  font-weight: 800;
  letter-spacing: var(--letter-spacing-tight);
  color: var(--carrinho-ink);
  margin-bottom: 0;
}

.order-num {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: var(--letter-spacing-tight);
  color: var(--carrinho-ink);
  font-size: var(--font-size-md);
}

.order-list {
  display: grid;
  gap: var(--space-2);
}

.order-card {
  padding: var(--space-3);
  border-radius: var(--ticket-radius);
  border: 1px solid var(--carrinho-line);
  background: var(--carrinho-snow);
  text-align: left;
}

.order-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
}

.order-card-main {
  min-width: 0;
  text-align: left;
}

.order-card-sub {
  margin-top: 2px;
  font-size: var(--font-size-xs);
  line-height: 1.3;
}

.order-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: var(--space-2) 0;
}

.order-card-actions {
  gap: var(--space-2);
}

.order-detail-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.order-copy-btn {
  flex-shrink: 0;
  font-size: var(--font-size-xs);
  font-weight: 700;
}

.order-code-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.order-code-row .order-number-badge {
  margin-bottom: 0;
}

.qty-stepper {
  background: var(--carrinho-mist);
  border-radius: var(--ticket-radius);
  padding: 2px;
  gap: 0;
  display: inline-flex;
  align-items: center;
}

.qty-btn {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  border: none;
  background: var(--carrinho-snow);
  border-radius: calc(var(--ticket-radius) - 2px);
  color: var(--carrinho-ink);
  font-size: 1.2rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.qty-btn:active {
  background: var(--carrinho-mist);
  transform: scale(0.96);
}

.qty-btn.qty-plus {
  background: var(--carrinho-red);
  color: #fff;
}

.qty-btn.qty-plus:active {
  background: var(--carrinho-red-pressed);
}

.qty-val {
  min-width: 28px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.recent-searches {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  overflow-x: auto;
  padding-bottom: var(--space-1);
}

.recent-label {
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--carrinho-ink-muted);
  flex-shrink: 0;
}

.recent-chips {
  display: flex;
  gap: var(--space-2);
}

.recent-chip {
  flex-shrink: 0;
  white-space: nowrap;
}

.addr-picker {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.addr-option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  text-align: left;
  width: 100%;
  padding: var(--space-3);
  min-height: var(--touch-min);
  border-radius: var(--ticket-radius);
  border: 1px solid var(--carrinho-line);
  background: var(--carrinho-snow);
  color: inherit;
  cursor: pointer;
}

.addr-option-warn {
  border-color: rgba(234, 29, 44, 0.35);
}

.addr-option.selected {
  border-color: var(--carrinho-red);
  background: var(--carrinho-red-soft);
}

.addr-option strong {
  display: block;
  font-size: var(--font-size-sm);
}

.addr-option .muted {
  display: block;
  margin-top: 2px;
  font-size: var(--font-size-xs);
}

.addr-option-radio {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border-radius: 50%;
  border: 2px solid var(--carrinho-line-strong);
  flex-shrink: 0;
  position: relative;
}

.addr-option.selected .addr-option-radio {
  border-color: var(--carrinho-red);
}

.addr-option.selected .addr-option-radio::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--carrinho-red);
}

.delivery-live {
  /* polished block near end */
  margin: var(--space-4) 0;
}

.page-head-compact {
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}

.checkout-addr-block {
  margin-bottom: var(--space-1);
}

/* ?? Floating cart bar ?? */
.cart-fab {
  position: fixed;
  left: 50%;
  bottom: calc(var(--nav-h) + var(--space-3) + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: var(--z-cart-bar);
  width: min(calc(100% - var(--space-8)), calc(var(--shell-max) - var(--space-8)));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  min-height: var(--touch-min);
  border-radius: var(--radius-lg);
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-cart);
  font-weight: 700;
  animation: fabIn var(--motion-duration-normal) var(--motion-ease-emphasized) both;
}

.cart-fab[hidden] {
  display: none !important;
}

.cart-fab-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.cart-fab-count {
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--color-brand-accent);
  color: var(--color-text-on-accent);
  display: grid;
  place-items: center;
  font-size: 12px;
}

.cart-fab-total {
  font-variant-numeric: tabular-nums;
}

/* ?? Bottom nav ?? */
.bottom-nav {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--shell-max);
  bottom: 0;
  z-index: var(--z-sticky);
  /* border-box + safe-area: min-height must include inset so touch row stays =44px */
  min-height: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--color-border-subtle);
  padding: var(--space-1) var(--space-2) calc(var(--space-1) + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  padding-left: max(var(--space-2), env(safe-area-inset-left, 0px));
  padding-right: max(var(--space-2), env(safe-area-inset-right, 0px));
}

.bottom-nav-inner {
  max-width: var(--shell-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
}

.nav-btn {
  background: transparent;
  color: var(--color-text-muted);
  padding: 6px 2px;
  min-height: var(--touch-min);
  height: 100%;
  border-radius: var(--radius-md);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
  display: grid;
  grid-template-rows: 22px auto;
  gap: 5px;
  justify-items: center;
  align-content: center;
  align-items: center;
  position: relative;
  transition:
    color var(--motion-duration-fast) var(--motion-ease-standard),
    transform var(--motion-duration-fast) var(--motion-ease-standard);
}

.nav-btn svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--motion-duration-fast) var(--motion-ease-standard);
  display: block;
}

.nav-btn.active {
  color: var(--carrinho-red);
  background: transparent;
  font-weight: 700;
}

.nav-btn.active svg {
  transform: none;
  stroke-width: 2;
}

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

.nav-badge {
  position: absolute;
  top: 4px;
  right: calc(50% - 22px);
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--carrinho-red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  box-sizing: border-box;
  pointer-events: none;
}

.nav-badge[hidden] {
  display: none !important;
}

.nav-live-dot {
  position: absolute;
  top: 8px;
  right: calc(50% - 18px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--carrinho-red);
  box-shadow: 0 0 0 0 rgba(234, 29, 44, 0.45);
  animation: activeOrderPulse 1.6s ease-out infinite;
  pointer-events: none;
}

.nav-live-dot[hidden] {
  display: none !important;
}

.nav-btn.has-live {
  color: var(--carrinho-ink);
}

.nav-btn.has-live.active {
  color: var(--carrinho-red);
}

.active-order-bar.is-live .active-order-pulse {
  background: var(--carrinho-red);
  box-shadow: 0 0 0 0 rgba(234, 29, 44, 0.45);
  animation: activeOrderLivePulse 1.6s ease-out infinite;
}

@keyframes activeOrderLivePulse {
  0% { box-shadow: 0 0 0 0 rgba(234, 29, 44, 0.45); }
  70% { box-shadow: 0 0 0 10px rgba(234, 29, 44, 0); }
  100% { box-shadow: 0 0 0 0 rgba(234, 29, 44, 0); }
}

/* ?? Toast ?? */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--nav-h) + 76px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%) translateY(12px);
  z-index: var(--z-toast);
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-sm);
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--motion-duration-normal) var(--motion-ease-standard),
    transform var(--motion-duration-normal) var(--motion-ease-emphasized);
  max-width: min(calc(100vw - var(--space-8)), calc(var(--shell-max) - var(--space-8)));
  text-align: center;
}

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

.toast.error {
  background: var(--color-status-danger);
}

.settings-strip {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-subtle);
}

.settings-strip summary {
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-weight: 600;
}

.settings-strip[open] summary {
  margin-bottom: 12px;
  color: var(--color-text-secondary);
}

.profile-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-subtle);
  font-size: var(--font-size-sm);
  min-width: 0;
}

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

.profile-row span:last-child {
  font-weight: 600;
  text-align: right;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.account-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.account-hub {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--space-3);
}

.account-hub-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px 12px;
  min-height: 36px;
  border-radius: var(--radius-pill);
  background: var(--carrinho-mist);
  border: 1px solid var(--carrinho-line);
  color: var(--carrinho-ink);
  font-size: var(--font-size-sm);
  font-weight: 700;
  letter-spacing: -0.01em;
  box-shadow: none;
  cursor: pointer;
}

.account-hub-item strong {
  font-size: inherit;
  font-weight: inherit;
}

.account-hub-item span {
  display: none;
}

.account-hub-item.active {
  background: var(--carrinho-red);
  border-color: var(--carrinho-red);
  color: #fff;
}

.account-hub-item.active span {
  color: inherit;
}

.account-hub-item:active:not(:disabled) {
  transform: translateY(1px);
}

.addr-list {
  display: grid;
  gap: 0;
}

.addr-card {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-subtle);
}

.addr-card.is-selected {
  background: linear-gradient(90deg, var(--carrinho-red-soft), transparent 72%);
  margin: 0 calc(var(--gutter) * -0.35);
  padding-left: calc(var(--gutter) * 0.35);
  padding-right: calc(var(--gutter) * 0.35);
  border-radius: var(--ticket-radius);
}

.addr-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}

.addr-card-head strong {
  margin-bottom: 0;
}

.addr-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-end;
}

.addr-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--carrinho-red);
  color: #fff;
  line-height: 1.3;
}

.addr-badge-soft {
  background: var(--carrinho-yellow);
  color: var(--carrinho-ink);
}

.addr-card-line {
  margin: 0 0 8px;
  font-size: var(--font-size-xs);
  line-height: 1.35;
}

.addr-card-actions {
  flex-wrap: wrap;
  gap: 6px;
}

.addr-label-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.addr-label-field.is-hidden {
  display: none;
}

.addr-label-chip.active {
  background: var(--carrinho-red);
  color: #fff;
  border-color: var(--carrinho-red);
}

.addr-form-actions {
  display: grid;
  gap: 8px;
}

.addr-cache-note {
  font-size: var(--font-size-xs);
  margin: 0 0 4px;
  padding: 8px 10px;
  border-radius: var(--ticket-radius);
  background: var(--carrinho-yellow-soft);
  color: var(--carrinho-ink);
}

.account-quick-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  margin-top: var(--space-2);
  padding: 2px 0;
}

.account-link {
  appearance: none;
  border: none;
  background: none;
  padding: 6px 0;
  margin: 0;
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--carrinho-red);
  cursor: pointer;
  text-decoration: none;
  min-height: var(--touch-min);
  display: inline-flex;
  align-items: center;
}

.account-link:hover {
  text-decoration: underline;
}

.account-back {
  margin-bottom: 4px;
  align-self: start;
}

.prefs-block {
  display: grid;
  gap: 8px;
  margin-bottom: 4px;
}

@media (max-width: 360px) {
  .account-hub {
    gap: 4px;
  }

  .account-hub-item {
    padding: 7px 10px;
    font-size: var(--font-size-xs);
  }
}

.row-between {
  justify-content: space-between;
  align-items: center;
}

.fav-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  flex-wrap: wrap;
}

.fav-copy {
  flex: 1;
  min-width: 0;
}

.fav-brand {
  font-size: var(--font-size-xs);
}

.ntf-head {
  margin-bottom: var(--space-2);
}

.pane-divider {
  border: 0;
  border-top: 1px solid var(--color-border-subtle);
  margin: var(--space-3) 0;
}

.pane-subtitle {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 700;
  margin-bottom: var(--space-2);
}

.prefs-sheet {
  margin-top: var(--space-3);
}

.prefs-title {
  font-size: var(--font-size-md);
  margin: 0;
}

.prefs-city {
  margin: 0;
}

.logout-btn {
  margin-top: var(--space-3);
}

.settings-api-btn {
  margin-top: var(--space-3);
}

.privacy-action {
  margin-top: var(--space-2);
}

.addr-card:last-child {
  border-bottom: none;
}

.addr-card strong {
  display: block;
  margin-bottom: 4px;
}

.addr-card .muted {
  margin: 0 0 8px;
}

.ntf-unread {
  border-left: 3px solid var(--carrinho-red, #EA1D2C);
  padding-left: 10px;
}

.ntf-bell-btn {
  position: relative;
}

.ntf-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--carrinho-red, #ea1d2c);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  pointer-events: none;
}

.ntf-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ntf-card {
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
  background: transparent;
}

.ntf-card:last-child {
  border-bottom: none;
}

.ntf-card-top {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.ntf-kind {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--carrinho-ink-soft);
}

.ntf-kind-status { color: var(--carrinho-ink); }
.ntf-kind-sub { color: var(--carrinho-ink-soft); }
.ntf-kind-pin { color: var(--carrinho-ink-soft); }
.ntf-kind-promo { color: var(--carrinho-red-deep, #C01018); }

.ntf-new {
  font-size: 11px;
  font-weight: 700;
  color: var(--carrinho-red, #ea1d2c);
}

.ntf-when {
  margin-left: auto;
  font-size: 12px;
}

.ntf-title {
  display: block;
  font-size: var(--font-size-sm);
  margin-bottom: 4px;
}

.ntf-body {
  margin: 0 0 10px;
  font-size: var(--font-size-sm);
}

.ntf-card-actions {
  gap: var(--space-2);
  flex-wrap: wrap;
}

.ntf-empty {
  padding: var(--space-3) 0;
}

.ntf-sheet {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
}

.ntf-sheet[hidden] {
  display: none !important;
}

.ntf-sheet-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: rgba(26, 26, 26, 0.42);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: auto;
}

.ntf-sheet-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: min(78vh, 640px);
  display: flex;
  flex-direction: column;
  background: var(--color-surface, #fff);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.14);
  transform: translateY(110%);
  transition: transform 0.24s ease;
  pointer-events: auto;
  padding: 0 var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
}

.ntf-sheet.is-open {
  pointer-events: auto;
}

.ntf-sheet.is-open .ntf-sheet-backdrop {
  opacity: 1;
}

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

.ntf-sheet-handle {
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: var(--color-border-subtle, #ddd);
  margin: 10px auto 6px;
}

.ntf-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: 4px;
}

.ntf-sheet-title {
  margin: 0;
  font-size: var(--font-size-lg);
  font-family: "Bricolage Grotesque", sans-serif;
}

.ntf-sheet-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.ntf-sheet-close {
  width: var(--touch-min);
  height: var(--touch-min);
  min-width: var(--touch-min);
  min-height: var(--touch-min);
  border: 0;
  border-radius: var(--ticket-radius);
  background: var(--carrinho-mist);
  font-size: 22px;
  line-height: 1;
  color: var(--carrinho-ink-soft);
}

.ntf-sheet-lead {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-sm);
}

.ntf-sheet-list {
  overflow: auto;
  flex: 1;
  min-height: 0;
  padding-bottom: var(--space-2);
}

body.ntf-sheet-open {
  overflow: hidden;
}

.field.check-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-direction: row;
  font-size: 14px;
  margin: var(--space-2) 0;
  min-height: var(--touch-min);
}

.field.check-row input {
  width: auto;
  margin: 0;
  min-width: var(--touch-min);
  min-height: var(--touch-min);
}

.export-preview {
  margin-top: var(--space-3);
  max-height: 220px;
  overflow: auto;
  padding: var(--space-3);
  font-size: var(--font-size-xs);
  background: var(--carrinho-mist, #f5f5f5);
  border-radius: 8px;
  border: 1px solid var(--color-border-subtle, #e5e5e5);
  white-space: pre-wrap;
  word-break: break-word;
}

@media (max-width: 374px) {
  :root {
    --gutter: 12px;
  }

  .carrinho-banner {
    flex-direction: column;
    align-items: stretch;
  }

  .carrinho-banner .btn-sm {
    width: 100%;
  }

  .voice-mic-tip {
    right: auto;
    left: 0;
    max-width: min(220px, calc(100vw - 2 * var(--gutter)));
  }

  .voice-mic-tip::before {
    right: auto;
    left: 14px;
  }

  .product-rail {
    grid-auto-columns: minmax(118px, 132px);
  }

  .pay-method-row {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
  }

  /* Keep 2-col product grid like Flutter ? one-thumb catalog density */
  .product-section-grid,
  .home-catalog {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--catalog-gap);
  }

  .nav-btn {
    font-size: 11px;
    padding: 6px 2px;
    gap: 5px;
  }

  .city-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .city-toolbar-field {
    min-width: 0;
    width: 100%;
  }

  .login-actions {
    flex-direction: column;
  }

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

  .pix-actions {
    grid-template-columns: 1fr;
  }

  .sticky-cta-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .sticky-cta-bar .btn-primary {
    width: 100%;
    min-width: 0;
  }

  .cart-line {
    flex-wrap: wrap;
  }

  .cart-line-right {
    flex-direction: row;
    align-items: center;
    width: 100%;
    justify-content: space-between;
  }

  .store-actions-sticky {
    flex-direction: column;
  }

  .store-actions-sticky .btn-primary,
  .store-actions-sticky .btn-accent {
    width: 100%;
  }

  .menu-sort-row {
    flex-direction: column;
    align-items: stretch;
  }

  .menu-sort-field {
    flex: 1 1 auto;
  }

  .voice-phrase-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

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

/* Phone ~375?767: keep shell tight, prevent form/CTA squeeze */
@media (min-width: 375px) and (max-width: 767px) {
  .voice-mic-tip {
    max-width: min(220px, calc(100vw - 2 * var(--gutter) - 24px));
  }

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

  .sticky-cta-bar .btn-primary {
    flex: 1 1 auto;
    min-width: 0;
  }

  .login-actions {
    flex-wrap: nowrap;
  }

  .pay-method-row {
    grid-template-columns: 1fr 1fr;
  }
}

/* Locked phone shell ? never steal viewport with wide store/catalog */
@media (min-width: 768px) {
  .store-visual {
    min-height: 200px;
  }

  .map-frame {
    aspect-ratio: 16 / 10;
  }

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

  .product-section-label {
    grid-column: 1 / -1;
  }

  
  .voice-mic-tip {
    max-width: 240px;
  }

  .sticky-cta-bar {
    flex-wrap: nowrap;
  }

  .sticky-cta-bar .btn-primary {
    flex: 0 0 auto;
    min-width: 148px;
  }

  .pay-method-row {
    grid-template-columns: 1fr 1fr;
  }

  .card-form-row {
    grid-template-columns: 1.2fr 0.8fr;
  }

  .login-actions {
    flex-direction: row;
  }

  .city-toolbar {
    flex-wrap: wrap;
  }
}

@media (min-width: 1024px) {
  #app.app-wide {
    max-width: var(--shell-max);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .welcome-cart-mover,
  .welcome-cart-shadow,
  .welcome-cart-wheel,
  .welcome-cart-item--a,
  .welcome-cart-item--b,
  .welcome-cart-item--c,
  .nav-live-dot,
  .active-order-pulse,
  .search-mic.is-listening,
  .feed-head,
  .page-head,
  .store-hero-grid,
  .cart-sheet,
  .checkout-sheet,
  .tracking-sheet,
  .product-card {
    animation: none !important;
  }

  .welcome-cart-mover {
    transform: none;
    will-change: auto;
  }

  .welcome-cart-runner {
    left: 50%;
    transform: translateX(-50%) scale(0.86);
  }

  .welcome-cart-shadow {
    opacity: 0.45;
    transform: none;
  }

  .nav-live-dot,
  .active-order-pulse {
    box-shadow: none;
  }
}

.product-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(128px, var(--catalog-rail-col, 140px));
  gap: var(--catalog-gap);
  overflow-x: auto;
  margin: 0 calc(var(--gutter) * -1);
  padding: 0 var(--gutter) var(--space-2);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

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

.deal-card {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 0;
  text-align: left;
  background: var(--carrinho-snow);
  border: 1px solid var(--carrinho-line);
  border-radius: var(--card-radius);
  padding: 0 0 var(--catalog-card-pad);
  box-shadow: none;
  min-height: 0;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  transition: transform var(--motion-duration-fast) var(--motion-ease-standard),
    border-color var(--motion-duration-fast) var(--motion-ease-standard);
}

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

.deal-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--catalog-info-gap, 4px);
  padding: var(--space-2) var(--catalog-card-pad) 0;
  flex: 1 1 auto;
  justify-content: flex-start;
}

.deal-card .deal-name,
.deal-card strong.deal-name {
  font-size: var(--catalog-title-size);
  line-height: var(--catalog-title-lh, 1.2);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--letter-spacing-tight);
  color: var(--carrinho-ink);
  display: -webkit-box;
  -webkit-line-clamp: var(--catalog-title-lines, 2);
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding: 0;
  margin: 0;
  height: var(--catalog-title-h);
  min-height: var(--catalog-title-h);
  max-height: var(--catalog-title-h);
  min-width: 0;
}

.deal-thumb {
  width: 100%;
  height: var(--catalog-img-h);
  max-height: var(--catalog-img-h);
  aspect-ratio: auto;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--carrinho-line);
  margin-bottom: 0;
  padding: var(--catalog-img-pad, 0);
  box-sizing: border-box;
  display: block;
  background: var(--carrinho-snow);
  flex-shrink: 0;
}

/* Deal cards reuse .product-footer grid (price / ppu / +) */
.deal-card .product-footer {
  align-self: stretch;
}

.deal-add-btn {
  width: var(--catalog-add-size);
  height: var(--catalog-add-size);
  min-width: var(--catalog-add-size);
  min-height: var(--catalog-add-size);
  font-size: 1.25rem;
}

.deal-card .deal-brand,
.deal-card .muted.deal-brand {
  padding: 0;
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--carrinho-ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-height: var(--catalog-brand-h, 14px);
  height: var(--catalog-brand-h, 14px);
  line-height: var(--catalog-brand-h, 14px);
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

.deal-unit {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin: 0;
  min-height: var(--catalog-unit-h, 16px);
  height: var(--catalog-unit-h, 16px);
  padding: 0 5px;
  border-radius: 4px;
  background: var(--carrinho-yellow-soft);
  color: var(--carrinho-ink);
  border: 1px solid rgba(255, 204, 0, 0.4);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1;
  box-sizing: border-box;
}

.checkout-pay {
  padding: var(--space-3) 0;
  border-top: 1px solid var(--carrinho-line);
  border-bottom: 1px solid var(--carrinho-line);
}

.checkout-coupon-block {
  padding: var(--space-2) 0;
}

.coupon-row {
  display: flex;
  gap: var(--space-2);
  align-items: stretch;
}

.coupon-row input {
  flex: 1;
  min-width: 0;
  text-transform: uppercase;
}

.coupon-row .btn-soft {
  flex-shrink: 0;
}

.total-row-discount .price {
  color: var(--carrinho-red-deep);
}

.checkout-pay-label {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--carrinho-ink-muted);
  margin-bottom: 6px;
}

.checkout-pay-lead {
  margin: 0 0 12px;
  font-size: var(--font-size-xs);
  line-height: 1.4;
}

.checkout-review-block {
  padding: var(--space-2) 0 var(--space-3);
  border-top: 1px solid var(--carrinho-line);
}

.checkout-summary {
  margin-top: var(--space-2);
}

.checkout-review-store {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
}

.checkout-review-addr {
  font-size: var(--font-size-xs);
}

.checkout-line-copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.checkout-line-brand {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--carrinho-ink-muted);
}

.checkout-line-name {
  font-weight: 600;
}

.checkout-line-unit {
  font-size: var(--font-size-xs);
}

.checkout-fees {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px dashed var(--carrinho-line);
}

.card-form-step {
  margin: 0 0 4px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--carrinho-ink-soft);
}

.pix-step-title {
  margin: 0;
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

.pix-amount-line {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: 800;
  color: var(--carrinho-ink);
  font-variant-numeric: tabular-nums;
}

.pix-demo-note {
  margin: 0;
  font-size: var(--font-size-xs);
  line-height: 1.4;
}

.pix-steps {
  margin: 0;
  padding-left: 1.2rem;
  font-size: var(--font-size-sm);
  color: var(--carrinho-ink-soft);
  line-height: 1.45;
}

.pix-steps li + li {
  margin-top: 2px;
}

.account-guest-list {
  margin: 0;
  padding-left: 1.15rem;
  display: grid;
  gap: 4px;
}

.account-section-head {
  margin-bottom: 2px;
}

.account-section-lead,
.prefs-lead {
  margin: 2px 0 0;
  font-size: var(--font-size-xs);
  line-height: 1.35;
}

.profile-row-rich {
  align-items: flex-start;
}

.profile-phone {
  display: block;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

.account-pane {
  display: grid;
  gap: var(--space-3);
  text-align: left;
}

.profile-sheet .field {
  gap: 4px;
}

#screen-profile .field-hint {
  max-width: 40ch;
}

.pay-method-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.pay-method {
  cursor: pointer;
}

.pay-method input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pay-method-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: var(--touch-min);
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--carrinho-line);
  border-radius: var(--card-radius);
  background: var(--carrinho-snow);
  transition:
    border-color var(--motion-duration-fast) var(--motion-ease-standard),
    background var(--motion-duration-fast) var(--motion-ease-standard),
    transform var(--motion-duration-fast) var(--motion-ease-standard),
    box-shadow var(--motion-duration-fast) var(--motion-ease-standard);
}

.pay-method-card strong {
  font-family: var(--font-display);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--carrinho-ink);
}

.pay-method input:checked + .pay-method-card {
  border-color: var(--carrinho-red);
  background: var(--carrinho-red-soft);
  box-shadow: 0 0 0 1px var(--carrinho-red);
  transform: none;
}

.pay-method input:focus-visible + .pay-method-card {
  outline: 2px solid var(--carrinho-red);
  outline-offset: 2px;
}

.card-form {
  display: grid;
  gap: var(--space-3);
  margin-top: 14px;
  animation: payFadeIn 0.22s ease;
}

.card-form-row {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--space-3);
}

.card-form .field {
  display: grid;
  gap: var(--field-gap, 6px);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--carrinho-ink-soft);
}

.card-form .field input,
.pix-panel .field textarea {
  width: 100%;
  border: 1px solid var(--carrinho-line);
  border-radius: var(--ticket-radius);
  padding: var(--space-3) var(--space-4);
  font: inherit;
  font-weight: 500;
  color: var(--carrinho-ink);
  background: var(--carrinho-snow);
  min-height: var(--touch-min);
}

.card-form-hint {
  margin: 0;
  font-size: var(--font-size-xs);
}

.card-form-hint code {
  color: var(--carrinho-red);
  font-size: var(--font-size-xs);
}

.pix-panel {
  display: grid;
  gap: 12px;
  margin-top: 4px;
  padding: var(--space-4);
  border-radius: 12px;
  background: var(--carrinho-mist);
  border: 1px solid var(--carrinho-line);
  animation: payFadeIn 0.25s ease;
}

.pix-panel[hidden],
.card-form[hidden] {
  display: none !important;
}

.pix-qr {
  width: 148px;
  height: 148px;
  margin: 0 auto;
  padding: 10px;
  background: var(--carrinho-snow);
  border: 2px solid var(--carrinho-ink);
  border-radius: 8px;
}

.pix-qr-inner {
  width: 100%;
  height: 100%;
  background:
    linear-gradient(90deg, var(--carrinho-ink) 2px, transparent 2px) 0 0 / 12px 12px,
    linear-gradient(var(--carrinho-ink) 2px, transparent 2px) 0 0 / 12px 12px,
    linear-gradient(135deg, var(--carrinho-ink) 0 18%, transparent 18% 40%, var(--carrinho-red) 40% 48%, transparent 48%);
  opacity: 0.85;
}

.pix-panel .field {
  display: grid;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
}

.pix-panel textarea {
  resize: vertical;
  min-height: 72px;
  font-size: var(--font-size-xs);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  word-break: break-all;
}

.pix-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

@keyframes payFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.order-status-pill.pending-pay {
  background: var(--carrinho-yellow-soft);
  color: var(--carrinho-ink);
  border: 1px solid rgba(255, 204, 0, 0.5);
}

.order-status-pill.paid {
  background: var(--carrinho-red-soft);
  color: var(--carrinho-red-deep);
}

.order-status-pill.cancelled {
  background: rgba(120, 120, 120, 0.12);
  color: var(--carrinho-ink-soft, #666);
  border: 1px solid var(--carrinho-line);
}

.checkout-lines {
  display: grid;
  gap: 8px;
  margin: 4px 0 0;
}

.checkout-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--font-size-sm);
}

.checkout-line span:last-child {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  flex-shrink: 0;
}

.tracking-sheet .order-status-pill {
  margin-bottom: 0;
}

.order-detail-sheet,
.tracking-sheet {
  text-align: left;
}

.order-detail-page-head {
  padding-bottom: var(--space-1);
}

.order-detail-head-text {
  min-width: 0;
  text-align: left;
}

.order-detail-head-text h1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mono {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
}

/* ?? Offline banner ?? */
.offline-banner {
  position: sticky;
  top: 0;
  z-index: calc(var(--z-sticky) + 5);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--gutter);
  min-height: var(--touch-min);
  background: var(--carrinho-ink);
  color: #fff;
  font-size: var(--font-size-xs);
  font-weight: 600;
  animation: screenIn var(--motion-duration-normal) var(--motion-ease-emphasized) both;
  flex-wrap: wrap;
}

.offline-banner[hidden] {
  display: none !important;
}

.offline-banner-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--carrinho-red);
  box-shadow: 0 0 0 3px rgba(234, 29, 44, 0.35);
  flex-shrink: 0;
  animation: pulseSoft 1.4s ease-in-out infinite;
}

.offline-banner-text {
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}

.offline-banner-retry {
  flex-shrink: 0;
  min-height: var(--touch-min);
  padding: 0 var(--space-3);
  border-radius: var(--ticket-radius);
  background: #FFFFFF;
  color: var(--carrinho-ink);
  font-size: 12px;
  font-weight: 600;
}

/* ?? Sticky CTAs ?? */
.sticky-cta-bar {
  position: sticky;
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
  z-index: calc(var(--z-sticky) - 1);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin: var(--space-4) calc(var(--gutter) * -1) 0;
  padding: var(--space-3) var(--gutter);
  background: var(--glass-bg-strong);
  border-top: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: 0 -8px 24px rgba(26, 26, 26, 0.06);
  box-sizing: border-box;
  width: calc(100% + 2 * var(--gutter));
  max-width: none;
}

.sticky-cta-meta {
  display: grid;
  min-width: 0;
  flex: 1 1 96px;
  line-height: 1.2;
}

.sticky-cta-label {
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--carrinho-ink-muted);
}

.sticky-cta-value {
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  font-weight: 800;
  letter-spacing: var(--letter-spacing-tight);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sticky-cta-bar .btn-primary {
  flex: 1 1 auto;
  min-width: min(148px, 100%);
  min-height: var(--touch-min);
}

.checkout-sticky-bar {
  margin-top: var(--space-3);
  flex-wrap: nowrap;
}

.checkout-sticky-bar .btn-primary {
  flex: 1 1 auto;
  min-width: min(148px, 100%);
  min-height: var(--touch-min);
}

.cart-checkout-bar {
  margin-top: 0;
  margin-bottom: 0;
}

/* ?? Live chip / SSE ?? */
.order-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.live-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  min-height: 28px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  background: var(--carrinho-yellow-soft);
  border: 1px solid rgba(255, 204, 0, 0.45);
  color: var(--carrinho-ink);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.live-chip[hidden] {
  display: none !important;
}

.live-chip.is-reconnecting,
.live-chip.is-polling {
  background: var(--carrinho-mist);
  border-color: var(--carrinho-line);
  color: var(--carrinho-ink-muted);
}

.live-chip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--carrinho-red);
  animation: pulseSoft 1.1s ease-in-out infinite;
}

.live-chip.is-reconnecting .live-chip-dot,
.live-chip.is-polling .live-chip-dot {
  background: var(--carrinho-ink-muted);
}

/* ?? Skeleton polish ?? */
.skeleton-row {
  height: 72px;
  border-radius: var(--ticket-radius);
  background: linear-gradient(
    90deg,
    var(--carrinho-mist) 0%,
    #fff 40%,
    var(--carrinho-mist) 80%
  );
  background-size: 220% 100%;
  animation: shimmer 1.15s ease-in-out infinite;
  margin-bottom: 10px;
  border: 1px solid var(--carrinho-line);
}

.skeleton-store {
  height: 88px;
}

.skeleton-product {
  height: calc(var(--catalog-img-h) + 88px);
  aspect-ratio: auto;
  margin-bottom: 0;
}

.product-grid:has(> .skeleton-row) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--catalog-gap);
}

@media (min-width: 768px) {
  .product-grid:has(> .skeleton-row) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@keyframes shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* ?? Delivery live block ?? */
.delivery-live {
  margin: var(--space-4) 0;
  padding: var(--space-4);
  border-radius: var(--card-radius);
  background: var(--carrinho-snow);
  border: 1px solid var(--carrinho-line);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

.delivery-live::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--carrinho-red);
}

.delivery-live-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.delivery-live .item-title {
  font-family: var(--font-display);
  font-size: var(--font-size-md);
  letter-spacing: var(--letter-spacing-tight);
}

.delivery-eta {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  background: var(--carrinho-yellow-soft);
  color: var(--carrinho-ink);
  border: 1px solid rgba(255, 204, 0, 0.45);
  font-size: var(--font-size-xs);
  font-weight: 600;
}

.delivery-pin-box {
  margin: 12px 0;
  padding: 14px 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--carrinho-yellow-soft), var(--carrinho-yellow));
  border: 1px solid rgba(255, 193, 7, 0.55);
  text-align: center;
}

.delivery-pin-code {
  font-family: var(--font-display), ui-monospace, monospace;
  font-size: 2rem;
  letter-spacing: 0.28em;
  font-weight: 800;
  color: var(--carrinho-ink);
  margin: 6px 0;
}

.btn-primary:not(:focus-visible) {
  box-shadow: none;
}

.btn-primary:hover:not(:disabled):not(:focus-visible) {
  box-shadow: none;
}

.cart-fab {
  background: var(--carrinho-ink-deep);
  border-radius: 12px;
}

.cart-fab:hover {
  transform: translateX(-50%);
}

.carrinho-banner {
  border-radius: var(--card-radius);
}

.store-card:hover {
  background: var(--carrinho-mist);
}

.store-logo {
  background: var(--carrinho-ink);
}

.add-btn {
  box-shadow: none;
}

.pay-method-card {
  min-height: var(--touch-min);
  justify-content: center;
}

.pix-qr {
  box-shadow: var(--shadow-sm);
}

.login-brand {
  padding-top: var(--space-4);
}

.login-hero {
  margin: 0 calc(var(--gutter) * -1);
  padding: var(--space-6) var(--gutter) var(--space-4);
  background: var(--carrinho-snow);
  border-bottom: 1px solid var(--carrinho-line);
}

.login-sheet {
  margin-top: var(--space-2);
}

.login-head {
  margin-bottom: var(--space-2);
}

.login-head p {
  margin: 4px 0 0;
  color: var(--carrinho-ink-soft);
  font-size: var(--font-size-sm);
}

.auth-status:empty {
  display: none;
}

.welcome-demo-foot {
  margin: var(--space-8) 0 0;
  font-size: 11px;
  line-height: var(--line-height-snug);
  text-align: center;
  color: var(--carrinho-ink-muted);
  letter-spacing: 0.01em;
  opacity: 0.72;
}

.demo-honesty {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--carrinho-line);
  background: var(--carrinho-mist);
}

.demo-honesty strong {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--carrinho-ink);
  margin: 0 0 var(--space-1);
}

.demo-honesty p {
  margin: 0;
  font-size: 12px;
  line-height: var(--line-height-snug);
  color: var(--carrinho-ink-muted);
}

.demo-honesty strong + p strong {
  display: inline;
  font-size: inherit;
  font-weight: 700;
  color: var(--carrinho-ink-soft);
  font-variant-numeric: tabular-nums;
}

.sheet {
  border-radius: var(--card-radius);
  box-shadow: none;
  border: 1px solid var(--carrinho-line);
}

.topbar {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

.bottom-nav {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

#screen-home .welcome {
  margin: 0;
}

/* -- Onboarding overlay ? same 430px shell, geo step must not break layout -- */
.onboard {
  position: fixed;
  inset: 0;
  z-index: var(--z-onboard);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, rgba(247, 247, 247, 0.98) 100%);
  padding:
    max(var(--space-4), env(safe-area-inset-top, 0px))
    var(--gutter)
    max(var(--space-4), env(safe-area-inset-bottom, 0px));
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.onboard[hidden] {
  display: none !important;
}

#app.onboard-open > :not(.onboard):not(.offline-banner) {
  visibility: hidden;
  pointer-events: none;
}

.onboard-panel {
  width: 100%;
  max-width: var(--shell-max);
  margin: auto 0;
  min-height: min(100%, calc(100dvh - 2 * var(--space-4)));
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-4) 0;
  box-sizing: border-box;
  animation: onboard-in 0.45s var(--motion-ease-standard) both;
}

@keyframes onboard-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.onboard-progress {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  flex-shrink: 0;
}

.onboard-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--carrinho-line-strong);
  transition: width 0.25s ease, background 0.25s ease;
}

.onboard-dot.active {
  width: 22px;
  background: var(--carrinho-red);
}

.onboard-dot.done {
  background: var(--carrinho-ink);
}

.onboard-step {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-align: center;
  min-width: 0;
  width: 100%;
}

.onboard-step[hidden] {
  display: none !important;
}

.onboard-step[data-onboard-step="2"] {
  text-align: left;
}

.onboard-step[data-onboard-step="2"] .onboard-h,
.onboard-step[data-onboard-step="2"] .onboard-lead {
  text-align: center;
}

.onboard-mark {
  width: 56px;
  height: 56px;
  margin: 0 auto;
  border-radius: var(--radius-lg);
  display: grid;
  place-items: center;
  background: var(--carrinho-red);
  color: #fff;
  box-shadow: var(--shadow-md);
  flex-shrink: 0;
}

.onboard-brand {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 6vw, 2.35rem);
  letter-spacing: var(--letter-spacing-display);
  color: var(--carrinho-ink);
  margin: 0;
}

.onboard-slogan {
  margin: calc(var(--space-1) * -1) 0 0;
  font-weight: 700;
  color: var(--carrinho-red);
  font-size: var(--font-size-md);
}

.onboard-h {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 5vw, 1.85rem);
  letter-spacing: var(--letter-spacing-tight);
  margin: 0;
}

.onboard-lead {
  margin: 0;
  color: var(--carrinho-ink-soft);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
  max-width: 36ch;
  margin-inline: auto;
}

.onboard-nav-row {
  display: flex;
  gap: var(--space-3);
  justify-content: space-between;
  margin-top: var(--space-2);
  width: 100%;
}

.onboard-nav-row .btn-primary,
.onboard-nav-row .btn-ghost {
  flex: 1 1 0;
  min-width: 0;
  min-height: var(--touch-min);
}

.btn-block {
  width: 100%;
  min-height: var(--touch-min);
}

.skin-cards,
.skin-toggle {
  display: grid;
  gap: var(--space-3);
  text-align: left;
  width: 100%;
}

.skin-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  align-items: flex-start;
  padding: var(--space-4);
  border-radius: var(--card-radius);
  border: 2px solid var(--carrinho-line);
  background: var(--carrinho-snow);
  color: var(--carrinho-ink);
  text-align: left;
  min-height: var(--touch-min);
  width: 100%;
  box-sizing: border-box;
}

.skin-card strong {
  font-size: var(--font-size-md);
}

.skin-card span {
  color: var(--carrinho-ink-muted);
  font-size: var(--font-size-sm);
  font-weight: 500;
  line-height: var(--line-height-snug);
}

.skin-card.active,
.skin-card[aria-checked="true"] {
  border-color: var(--carrinho-red);
  background: var(--carrinho-red-soft);
  box-shadow: 0 0 0 1px var(--carrinho-red);
}

.onboard-geo-icon {
  margin-right: var(--space-2);
}

.onboard-geo-status {
  min-height: 1.4em;
  margin: 0;
  font-size: var(--font-size-sm);
  word-break: break-word;
}

.onboard-step .field {
  width: 100%;
  text-align: left;
}

.onboard-step select {
  width: 100%;
  max-width: 100%;
}

.onboard-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--carrinho-ink-muted);
  font-size: var(--font-size-sm);
  width: 100%;
}

.onboard-divider::before,
.onboard-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--carrinho-line);
}

.onboard-summary {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--card-radius);
  background: var(--carrinho-snow);
  border: 1px solid var(--carrinho-line);
  text-align: left;
  width: 100%;
  box-sizing: border-box;
}

.onboard-summary-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
  min-width: 0;
}

.onboard-summary-row span {
  color: var(--carrinho-ink-muted);
  flex-shrink: 0;
}

.onboard-summary-row strong {
  min-width: 0;
  text-align: right;
  word-break: break-word;
}

.city-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-width: 0;
}

.city-toolbar-field {
  margin: 0;
  flex: 1 1 140px;
  min-width: 140px;
}

.city-toolbar-field select {
  min-height: var(--touch-min);
}

/* Voice entry lives in header search mic ? no duplicate promo on In?cio */
.voice-shop-stub {
  display: none !important;
}

.prefs-sheet .skin-toggle {
  margin-top: 4px;
}

.field-label {
  display: block;
  margin-bottom: 0;
  font-weight: 600;
  font-size: var(--form-label-size, var(--font-size-xs));
  line-height: var(--line-height-snug);
  color: var(--color-text-secondary);
}

/* -- Modo conforto: larger type, bigger targets, higher contrast, calmer UI -- */
html.skin-comfort,
body.skin-comfort {
  --font-size-md: 18px;
  --font-size-sm: 16px;
  --font-size-lg: 22px;
  --font-size-xl: 26px;
  --font-size-2xl: 32px;
  --touch-min: 52px;
  --chip-h: 52px;
  --gutter: 16px;
  --shell-max: 430px;
}

body.skin-comfort {
  font-size: 18px;
  line-height: 1.55;
  color: #111;
}

body.skin-comfort .onboard-panel {
  gap: var(--space-6);
}

body.skin-comfort .onboard-step {
  gap: var(--space-4);
}

body.skin-comfort .city-toolbar {
  gap: var(--space-3);
}

body.skin-comfort .product-section-grid {
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

body.skin-comfort .section-label-stack {
  gap: var(--space-4);
}

body.skin-comfort .welcome-brand,
body.skin-comfort .onboard-brand {
  font-size: clamp(2rem, 7vw, 2.6rem);
}

body.skin-comfort .welcome-slogan,
body.skin-comfort .onboard-slogan {
  font-size: 1.15rem;
}

body.skin-comfort .brand-wordmark {
  font-size: clamp(1.15rem, 4.2vw, 1.35rem);
}

body.skin-comfort .brand-tagline {
  font-size: 1rem;
}

body.skin-comfort .welcome-sub,
body.skin-comfort .onboard-lead,
body.skin-comfort .muted {
  font-size: 1.05rem;
  color: #333;
}

body.skin-comfort .btn-primary,
body.skin-comfort .btn-soft,
body.skin-comfort .btn-ghost,
body.skin-comfort .btn-accent,
body.skin-comfort .nav-btn,
body.skin-comfort .add-btn,
body.skin-comfort .chip,
body.skin-comfort .shelf-chip,
body.skin-comfort .link-btn,
body.skin-comfort .skin-card,
body.skin-comfort select,
body.skin-comfort input:not([type="search"]):not([type="checkbox"]):not([type="radio"]) {
  min-height: var(--touch-min);
}

body.skin-comfort .location-chip {
  min-height: 44px;
  height: 44px;
}

body.skin-comfort .icon-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
}

body.skin-comfort .search-mic {
  width: var(--touch-min);
  height: var(--touch-min);
  min-width: var(--touch-min);
}

body.skin-comfort .topbar-inner {
  min-height: 44px;
  height: 44px;
}

body.skin-comfort .topbar-tools {
  height: 44px;
}

body.skin-comfort .search-field {
  min-height: 48px;
  height: 48px;
}

body.skin-comfort {
  --catalog-add-size: var(--touch-min);
  --catalog-price-row-h: var(--touch-min);
  --catalog-ppu-slot: 14px;
  --catalog-price-block-h: calc(var(--catalog-price-row-h) + var(--catalog-ppu-slot));
  --catalog-footer-h: var(--catalog-price-block-h);
}

body.skin-comfort .add-btn {
  width: var(--catalog-add-size);
  height: var(--catalog-add-size);
  min-width: var(--catalog-add-size);
  min-height: var(--catalog-add-size);
  font-size: 1.45rem;
}

body.skin-comfort .deal-add-btn {
  width: var(--catalog-add-size);
  height: var(--catalog-add-size);
  min-width: var(--catalog-add-size);
  min-height: var(--catalog-add-size);
}

body.skin-comfort .nav-btn {
  font-size: 0.95rem;
  gap: 4px;
}

body.skin-comfort .nav-btn svg {
  width: 26px;
  height: 26px;
}

body.skin-comfort .store-name,
body.skin-comfort .product-name,
body.skin-comfort h1,
body.skin-comfort h2 {
  font-size: 1.2em;
}

body.skin-comfort .product-price,
body.skin-comfort .price {
  font-size: 1.15em;
  font-weight: 700;
}

body.skin-comfort .carrinho-kicker {
  font-size: 0.95rem;
}

body.skin-comfort .bottom-nav-inner {
  gap: 4px;
}

body.skin-comfort .cart-fab {
  min-height: 56px;
  font-size: 1.05rem;
}

body.skin-comfort .search-field input {
  font-size: 1.1rem;
}

body.skin-comfort .topbar {
  border-bottom: 2px solid var(--carrinho-ink);
}

body.skin-comfort .sticky-cta-bar,
body.skin-comfort .store-actions-sticky {
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}

body.skin-comfort .fav-row {
  flex-wrap: wrap;
  align-items: flex-start;
}

@media (prefers-reduced-motion: reduce) {
  .onboard-panel {
    animation: none;
  }

  .search-mic.is-listening {
    animation: none;
  }
}

/* ?? Product detail light sheet ?? */
.product-sheet {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-overlay, 40) + 20);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}

.product-sheet[hidden] {
  display: none !important;
}

.product-sheet-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  margin: 0;
  background: var(--color-surface-overlay, rgba(20, 20, 20, 0.48));
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: auto;
  cursor: pointer;
}

.product-sheet-panel {
  position: relative;
  width: min(100%, 430px);
  max-height: min(88vh, 640px);
  overflow: auto;
  background: var(--carrinho-snow);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 32px rgba(20, 20, 20, 0.14);
  transform: translateY(110%);
  /* Intentional motion 2: sheet slide-up */
  transition: transform var(--motion-duration-normal) var(--motion-ease-emphasized);
  pointer-events: auto;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}

.product-sheet.is-open {
  pointer-events: auto;
}

.product-sheet.is-open .product-sheet-backdrop {
  opacity: 1;
}

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

.product-sheet-handle {
  width: 36px;
  height: 4px;
  border-radius: 999px;
  background: var(--carrinho-line-strong);
  margin: 10px auto 6px;
}

.product-sheet-close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: var(--touch-min);
  height: var(--touch-min);
  border: 0;
  border-radius: var(--ticket-radius);
  background: var(--carrinho-mist);
  color: var(--carrinho-ink);
  font-size: 1.4rem;
  line-height: 1;
  display: grid;
  place-items: center;
  z-index: var(--z-base);
}

.product-sheet-media {
  padding: 0 var(--space-4);
}

.product-sheet-thumb {
  width: 100%;
  aspect-ratio: 1;
  max-height: 220px;
  margin: 0 auto;
  border-radius: var(--card-radius);
  border: 1px solid var(--carrinho-line);
  overflow: hidden;
  background: linear-gradient(145deg, var(--carrinho-mist) 0%, #e8ece8 100%);
  position: relative;
}

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

.product-sheet-thumb.is-fallback::after {
  content: attr(data-initial);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2rem;
  color: var(--carrinho-ink-muted);
}

.product-sheet-body {
  padding: var(--space-4) var(--space-4) var(--space-2);
  display: grid;
  gap: 6px;
}

.product-sheet-brand {
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--carrinho-ink-muted);
}

.product-sheet-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  font-weight: 700;
  letter-spacing: var(--letter-spacing-tight);
  line-height: 1.25;
  color: var(--carrinho-ink);
}

.product-sheet-meta {
  font-size: var(--font-size-xs);
  color: var(--carrinho-ink-muted);
}

.product-sheet-price-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 8px 0 12px;
}

.product-sheet-price {
  font-size: 1.35rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--carrinho-ink);
}

.product-sheet-ppu {
  font-size: var(--font-size-xs);
  color: var(--carrinho-ink-muted);
  font-variant-numeric: tabular-nums;
}

.product-sheet-body .btn-block {
  width: 100%;
  min-height: var(--touch-min);
}

body.product-sheet-open {
  overflow: hidden;
}

/* ?? Form UX (aligned with admin/merchant) ?? */
.field .field-label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--field-label-gap, var(--space-2));
  line-height: var(--line-height-snug);
}

.field .req {
  color: var(--carrinho-red);
  font-weight: 700;
}

.field-hint {
  font-size: var(--font-size-xs);
  font-weight: 400;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.field.error input,
.field.error select,
.field.error textarea {
  border-color: var(--carrinho-red);
  background: var(--carrinho-red-soft, #fde8ea);
}

.field-error {
  font-size: var(--font-size-xs);
  color: var(--carrinho-red);
  font-weight: 600;
  margin-top: 2px;
}

.account-sticky-bar {
  position: sticky;
  bottom: calc(var(--nav-h, 64px) + env(safe-area-inset-bottom, 0px));
  margin: var(--space-4) calc(var(--gutter) * -1) 0;
  padding: var(--space-3) var(--gutter) calc(var(--space-2) + 2px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.94) 22%, #fff 55%);
  z-index: var(--z-base);
  width: calc(100% + 2 * var(--gutter));
  box-sizing: border-box;
  box-shadow: none;
  border: none;
}

.btn-primary:disabled,
.btn-soft:disabled,
button:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.product-thumb.is-fallback,
.product-sheet-thumb.is-fallback,
.deal-thumb.is-fallback,
.cart-thumb.is-fallback,
.fav-thumb.is-fallback {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255, 204, 0, 0.12), transparent 55%),
    var(--carrinho-mist);
}

/* ?? Cart depth ?? */
.cart-page-head {
  margin-bottom: var(--space-2);
}

.cart-store-line {
  margin-top: 4px;
  color: var(--carrinho-ink-soft);
  font-weight: 600;
}

.cart-missing-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0 0 var(--space-3);
  padding: var(--space-3);
  border-radius: var(--ticket-radius);
  background: var(--carrinho-yellow-soft);
  border: 1px solid rgba(255, 204, 0, 0.55);
  color: var(--carrinho-ink);
  font-size: var(--font-size-sm);
  line-height: 1.35;
}

.cart-missing-banner[hidden] {
  display: none !important;
}

.cart-missing-banner strong {
  color: var(--carrinho-red-deep);
  font-weight: 800;
}

.cart-empty .cart-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
  justify-content: flex-start;
}

.cart-empty .cart-empty-actions .btn-primary,
.cart-empty .cart-empty-actions .btn-soft {
  margin-top: 0;
  min-width: 0;
}

.totals-sheet-head {
  margin-bottom: var(--space-2);
}

.totals-sheet-head .section-label-sm {
  margin: 0;
}

.totals-hint {
  margin: 4px 0 0;
  font-size: var(--font-size-xs);
}

.fee-note {
  font-weight: 500;
}

.cart-line {
  align-items: flex-start;
  padding: var(--space-3) 0;
}

.cart-line.is-missing {
  background: linear-gradient(90deg, var(--carrinho-yellow-soft) 0%, transparent 72%);
  margin: 0 calc(var(--space-2) * -1);
  padding-inline: var(--space-2);
  border-radius: var(--ticket-radius);
}

.cart-line-info {
  min-width: 0;
}

.cart-line-store {
  display: block;
  margin-top: 3px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--carrinho-ink-muted);
}

.cart-line-warn {
  margin-top: 4px;
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--carrinho-red-deep);
}

.cart-line-right {
  gap: 6px;
}

.cart-line-remove {
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--carrinho-ink-muted);
  padding: 0 var(--space-2);
  min-height: var(--touch-min);
  display: inline-flex;
  align-items: center;
}

.cart-line-remove:hover {
  color: var(--carrinho-red);
}

.cart-thumb {
  width: 56px;
  height: 56px;
}

#screen-cart.active,
#screen-checkout.active {
  padding-bottom: calc(var(--nav-h) + 96px + env(safe-area-inset-bottom, 0px));
}

.cart-checkout-bar {
  position: sticky;
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
}

@media (prefers-reduced-motion: reduce) {
  .voice-mic-tip {
    animation: none;
  }
}


/* ?? Diferenciais BR (demo) ?? */
.voice-phrase-chips {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0 0;
  margin: 0 calc(var(--gutter) * -1) 0;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  background: transparent;
  border-bottom: none;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.voice-phrase-chips[hidden] {
  display: none !important;
}
.voice-phrase-chips::-webkit-scrollbar {
  display: none;
}
.voice-phrase-tip {
  display: none !important;
}
.voice-phrase-chip {
  flex: 0 0 auto;
  min-height: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--carrinho-line);
  background: var(--carrinho-snow);
  color: var(--carrinho-ink);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
}
.voice-phrase-chip:hover {
  border-color: var(--carrinho-red);
  background: var(--carrinho-red-soft);
}
.fee-explainer {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border-radius: 12px;
  background: var(--carrinho-yellow-soft);
  border: 1px solid rgba(255, 204, 0, 0.45);
}
.fee-explainer summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--carrinho-ink);
  font-size: var(--font-size-sm);
}
.fee-explainer-list {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-4);
  color: var(--carrinho-ink-soft);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}
.faltou-sheet {
  margin: var(--space-4) 0;
  padding: var(--space-4);
  border-radius: 12px;
  background: var(--carrinho-snow);
  border: 1px solid var(--carrinho-line);
  border-left: 3px solid var(--carrinho-red);
}
.faltou-head strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-1);
}
.faltou-card {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border-radius: 12px;
  background: var(--carrinho-mist);
}
.faltou-actions {
  margin-top: var(--space-3);
  gap: var(--space-2);
  flex-wrap: wrap;
}
.delivery-pin-edu {
  margin: var(--space-2) 0 0;
  font-size: var(--font-size-sm);
  color: var(--carrinho-ink);
  line-height: 1.4;
}
.comfort-confirm-hint {
  margin: var(--space-2) 0 0;
  text-align: center;
  font-size: var(--font-size-sm);
}
body.skin-comfort .voice-phrase-chip {
  min-height: var(--touch-min);
  height: var(--touch-min);
  font-size: 0.9rem;
}
body.skin-comfort .faltou-actions .btn-primary,
body.skin-comfort .faltou-actions .btn-soft,
body.skin-comfort #psAddBtn {
  min-height: 56px;
  font-size: 1.05rem;
}
body.skin-comfort .delivery-pin-code {
  font-size: 2.4rem;
}

/* ?? Deep mobile pass 360?430px: overflow, sticky stack, tap targets ?? */
@media (max-width: 430px) {
  :root {
    --gutter: 12px;
  }

  html,
  body,
  #app {
    overflow-x: clip;
    max-width: 100%;
  }

  .topbar {
    padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
    padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
  }

  .topbar-inner {
    gap: var(--space-2);
    min-height: var(--icon-tool);
    height: var(--icon-tool);
  }

  .location-chip {
    max-width: calc(100% - 96px);
  }

  /* Keep ?Entregar em ? ?? like Flutter ? ellipsis on address only */
  .location-label,
  .location-sep {
    display: inline;
  }

  .location-value {
    font-size: var(--font-size-sm);
  }

  .search-field {
    padding-right: 4px;
  }

  .product-section-grid,
  .home-catalog {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--catalog-gap);
  }

  .product-name {
    font-size: var(--catalog-title-size);
    height: var(--catalog-title-h);
    min-height: var(--catalog-title-h);
    max-height: var(--catalog-title-h);
  }

  .product-price {
    font-size: var(--catalog-price-size);
  }

  .add-btn {
    width: var(--catalog-add-size);
    height: var(--catalog-add-size);
    min-width: var(--catalog-add-size);
    min-height: var(--catalog-add-size);
  }

  .voice-phrase-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }

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

  .active-order-bar {
    gap: 6px;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .active-order-kicker {
    width: 100%;
    flex-basis: 100%;
  }

  .active-order-phase {
    flex: 1 1 auto;
    font-size: var(--font-size-xs);
  }

  .active-order-cta {
    margin-left: auto;
  }

  .sticky-cta-bar,
  .cart-checkout-bar,
  .store-actions-sticky {
    bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
    z-index: calc(var(--z-sticky) - 1);
    width: calc(100% + 2 * var(--gutter));
    max-width: none;
    box-sizing: border-box;
  }

  .sticky-cta-bar {
    flex-wrap: nowrap;
    gap: var(--space-2);
    padding-top: var(--space-3);
    padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px) * 0);
  }

  .sticky-cta-meta {
    flex: 1 1 auto;
    min-width: 0;
  }

  .sticky-cta-value {
    font-size: var(--font-size-md);
  }

  .sticky-cta-bar .btn-primary {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 58%;
    min-height: var(--touch-min);
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }

  .checkout-sticky-bar .btn-primary {
    max-width: 58%;
    width: auto;
    min-height: 48px;
    font-size: var(--font-size-md);
  }

  .pay-method-card {
    min-height: var(--touch-min);
    padding: var(--space-3);
  }

  .cart-fab {
    width: min(calc(100% - var(--space-6)), calc(var(--shell-max) - var(--space-6)));
    bottom: calc(var(--nav-h) + var(--space-2) + env(safe-area-inset-bottom, 0px));
  }

  .toast {
    bottom: calc(var(--nav-h) + 72px + env(safe-area-inset-bottom, 0px));
    max-width: calc(100vw - var(--space-6));
  }

  .bottom-nav {
    z-index: var(--z-sticky);
  }

  .screen {
    padding-bottom: calc(var(--nav-h) + 80px + env(safe-area-inset-bottom, 0px));
  }

  #screen-cart.active,
  #screen-checkout.active {
    padding-bottom: calc(var(--nav-h) + 108px + env(safe-area-inset-bottom, 0px));
  }

  .product-rail,
  .cat-rail,
  .store-rail {
    margin-left: calc(var(--gutter) * -1);
    margin-right: calc(var(--gutter) * -1);
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .product-rail::-webkit-scrollbar,
  .cat-rail::-webkit-scrollbar,
  .store-rail::-webkit-scrollbar {
    display: none;
  }

  .card-form-row,
  .pix-actions,
  .form-stack .card-form-row {
    grid-template-columns: 1fr;
  }

  .pay-method-row {
    grid-template-columns: 1fr 1fr;
  }

  .login-actions,
  .cart-empty .cart-empty-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }

  .login-actions > *,
  .cart-empty .cart-empty-actions .btn-primary,
  .cart-empty .cart-empty-actions .btn-soft,
  .cart-empty .cart-empty-actions .btn-sm {
    width: 100%;
  }

  .section-head .link-btn,
  .rail-head .link-btn {
    min-height: var(--touch-min);
    display: inline-flex;
    align-items: center;
    padding: 0 var(--space-2);
  }

  .feed-head,
  .page-head,
  .store-hero-grid,
  .cart-sheet,
  .checkout-sheet,
  .tracking-sheet {
    animation: contentRise var(--motion-duration-slow) var(--motion-ease-emphasized) both;
  }
}

@media (max-width: 360px) {
  :root {
    --gutter: 10px;
  }

  .nav-btn {
    font-size: 10px;
    padding: 6px 0;
    gap: 4px;
    grid-template-rows: 20px auto;
  }

  .nav-btn svg {
    width: 20px;
    height: 20px;
  }

  .sticky-cta-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .sticky-cta-bar .btn-primary {
    width: 100%;
    max-width: none;
  }

  .icon-btn {
    width: var(--icon-tool);
    height: var(--icon-tool);
    min-width: var(--icon-tool);
    min-height: var(--icon-tool);
  }

  .location-chip {
    max-width: calc(100% - 92px);
  }

  .location-label {
    font-size: 12px;
  }

  .product-section-grid,
  .home-catalog {
    gap: var(--catalog-gap);
  }

  .product-info {
    padding: var(--space-1) var(--catalog-card-pad) 0;
  }

  .deal-info {
    padding: var(--space-1) var(--catalog-card-pad) 0;
  }

  .product-footer,
  .deal-card .product-footer {
    padding: var(--space-1) var(--catalog-card-pad) 0;
    min-height: calc(var(--catalog-footer-h) + var(--space-1));
  }
}

/* ?? Content templates polish ?? */
.content-sheet {
  box-shadow: none;
  border-color: var(--carrinho-line);
  background: var(--carrinho-snow);
}

.form-stack {
  display: grid;
  gap: var(--form-stack-gap, var(--space-3));
  align-items: start;
}

.form-stack > .field,
.form-stack > .card-form-row,
.addr-form.form-stack > .field,
.addr-form.form-stack > .card-form-row {
  margin: 0;
}

.form-stack .card-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--form-row-gap, var(--space-3));
  align-items: start;
}

.form-stack .field {
  gap: var(--field-gap, var(--space-1));
}

.form-stack .field input,
.form-stack .field select,
.form-stack .field textarea {
  min-height: var(--touch-min);
}

.empty-short,
.empty.empty-short {
  padding: var(--space-4) var(--space-3);
  gap: var(--space-2);
  border-radius: var(--ticket-radius);
  background: transparent;
  border: none;
  width: 100%;
  box-sizing: border-box;
}

.empty-short.empty-friendly,
.empty-short.empty-error {
  background: var(--carrinho-snow);
  border: 1px solid var(--carrinho-line);
}

.empty-short p,
.empty-short .muted {
  max-width: 28ch;
  font-size: var(--font-size-sm);
}

.store-feed:has(.empty-short),
.product-grid:has(.empty-short),
.product-rail:has(.empty-short),
.order-list:has(.empty-short),
.cart-list:has(.empty-short) {
  border: none;
  background: transparent;
}

.store-desc {
  max-width: 28ch;
  line-height: var(--line-height-snug);
  color: var(--carrinho-ink-muted);
}

.carrinho-banner {
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
}

.carrinho-banner-copy p {
  display: none;
}

.section-label {
  margin: var(--space-3) 0 var(--space-2);
}

.section-label-inicio {
  margin-top: var(--space-2);
}

.page-head-compact p {
  margin-top: 2px;
  font-size: var(--font-size-xs);
}

.skin-toggle {
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

.skin-card {
  padding: var(--space-3);
  align-items: center;
  justify-content: center;
  text-align: center;
}

.skin-card span {
  display: none;
}

.ntf-profile-actions {
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.checkout-pay-lead,
.compare-hint,
.card-form-step,
.card-form-hint,
.pix-demo-note {
  display: block;
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-snug);
  color: var(--carrinho-ink-muted);
  max-width: var(--helper-max-ch, 36ch);
}

.pix-demo-note {
  margin-top: var(--space-2);
  margin-bottom: 0;
}

.card-form-step {
  margin-bottom: var(--space-2);
  font-weight: 600;
  color: var(--carrinho-ink-soft);
}

.pay-method-card {
  min-height: var(--touch-min);
}

.account-guest {
  padding: var(--space-2) 0;
}

.menu-head {
  margin-bottom: var(--space-2);
}

.menu-head h1 {
  margin: 0;
}

.cart-sheet-head.section-label,
.totals-sheet-head.section-label {
  margin-top: 0;
}

@media (max-width: 380px) {
  .form-stack .card-form-row,
  .skin-toggle {
    grid-template-columns: 1fr;
  }
}

/* ?? Form UX polish (profile / checkout) ?? */
.field input::placeholder,
.field textarea::placeholder {
  color: var(--color-text-muted);
  opacity: 0.85;
}

input:focus,
select:focus,
textarea:focus,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: var(--shadow-focus);
}

.btn-primary:focus-visible,
.btn-ghost:focus-visible,
.btn-soft:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.login-actions {
  display: flex;
  gap: var(--space-3);
  align-items: stretch;
}

.login-actions .btn-primary {
  flex: 1.2;
}

.login-actions .btn-ghost {
  flex: 1;
}

.pix-actions {
  display: flex;
  gap: var(--space-3);
  align-items: stretch;
}

.pix-actions .btn-primary {
  flex: 1.2;
}

.pix-actions .btn-ghost {
  flex: 1;
}

.addr-form-actions .btn-ghost {
  margin-bottom: var(--space-2);
}

.field.error .field-hint {
  display: none;
}

#screen-profile .form-stack,
.profile-sheet .form-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.card-form .field-hint,
.checkout-sheet .field-hint {
  font-size: var(--font-size-xs);
  font-weight: 400;
  color: var(--color-text-muted);
}

/* ?? Consumer surfaces polish: profile / cart / orders / checkout / search ?? */

/* Shared line tables (checkout + order detail) */
.checkout-lines {
  display: grid;
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--carrinho-line);
}

.checkout-line,
.order-item-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-3);
  padding: var(--table-cell-pad-y) 0;
  border-bottom: 1px solid var(--color-border-subtle);
  font-size: var(--table-font-size);
  min-width: 0;
}

.checkout-line:last-child,
.order-item-row:last-child {
  border-bottom: none;
}

.checkout-line-copy {
  min-width: 0;
}

.line-price,
.checkout-line > .line-price,
.checkout-line > span:last-child {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  flex-shrink: 0;
  text-align: right;
  white-space: nowrap;
  color: var(--carrinho-ink);
  min-width: 4.5rem;
}

.checkout-fees .total-row,
.order-detail-totals .total-row {
  padding: var(--table-cell-pad-y) 0;
  font-size: var(--table-font-size);
}

.order-detail-totals .total-row-grand {
  margin-top: var(--space-1);
  padding-top: var(--space-3);
}

/* Orders list ? even cards */
.order-list {
  display: grid;
  gap: var(--space-3);
}

.order-card {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--card-radius);
  border: 1px solid var(--carrinho-line);
  background: var(--carrinho-snow);
  box-shadow: none;
}

.order-card-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-3);
}

.order-card .status-pill {
  justify-self: end;
  max-width: 9.5rem;
  text-align: center;
  white-space: normal;
}

.order-card-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-2) 0 0;
  border-top: 1px solid var(--color-border-subtle);
  font-size: var(--font-size-sm);
}

.order-card-meta .price {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--carrinho-ink);
}

.order-card-meta .muted {
  justify-self: end;
  text-align: right;
}

.order-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
}

.order-card-actions .btn-sm {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--touch-min);
}

.order-card .track-steps-compact {
  margin: var(--space-1) 0 0;
}

.orders-filters .chip {
  min-height: var(--catalog-chip-h);
  height: var(--catalog-chip-h);
  font-weight: 500;
  padding: 0 var(--catalog-chip-pad-x);
}

.orders-filters .chip.active,
.orders-filters .chip[aria-selected="true"] {
  font-weight: 700;
}

.tracking-sheet {
  padding: var(--space-3) var(--space-4);
}

.order-detail-toolbar {
  margin-bottom: var(--space-3);
}

.order-detail-sheet .checkout-lines {
  margin-top: var(--space-1);
}

/* Cart ? aligned rows */
#screen-cart .cart-list {
  display: grid;
  gap: 0;
}

#screen-cart .cart-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-subtle);
}

#screen-cart .cart-line:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

#screen-cart .cart-line:first-child {
  padding-top: 0;
}

#screen-cart .cart-thumb {
  width: var(--product-thumb);
  height: var(--product-thumb);
  border-radius: var(--ticket-radius);
}

#screen-cart .cart-line-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
  min-width: 7.5rem;
}

#screen-cart .cart-line-total {
  font-size: var(--font-size-sm);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  min-width: 4.5rem;
  text-align: right;
}

#screen-cart .totals-sheet .total-row {
  padding: var(--table-cell-pad-y) 0;
}

#screen-cart .cart-sheet,
#screen-cart .totals-sheet {
  padding: var(--space-4);
}

#screen-cart .compare-block {
  margin-top: var(--space-3);
}

/* Checkout ? section rhythm */
#screen-checkout .checkout-sheet {
  gap: 0;
  padding: var(--space-4);
}

#screen-checkout .checkout-addr-block,
#screen-checkout .checkout-review-block,
#screen-checkout .checkout-coupon-block,
#screen-checkout .checkout-pay {
  padding: var(--space-3) 0;
  border-top: 1px solid var(--carrinho-line);
}

#screen-checkout .checkout-addr-block {
  border-top: none;
  padding-top: 0;
}

#screen-checkout .section-label-inline {
  margin-top: 0;
  margin-bottom: var(--space-2);
}

#screen-checkout .pay-method-row {
  gap: var(--space-2);
}

#screen-checkout .pay-method-card {
  min-height: var(--touch-comfort);
  border-radius: var(--ticket-radius);
  border: 1px solid var(--carrinho-line);
  background: var(--carrinho-mist);
  padding: var(--space-3);
}

#screen-checkout .pay-method input:checked + .pay-method-card {
  border-color: var(--carrinho-red);
  background: var(--carrinho-red-soft);
  box-shadow: inset 0 0 0 1px var(--carrinho-red);
}

#screen-checkout .card-form {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--carrinho-line);
}

#screen-checkout .pix-panel {
  margin-top: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--card-radius);
  border: 1px solid var(--carrinho-line);
  background: var(--carrinho-mist);
  display: grid;
  gap: var(--space-3);
}

/* Profile ? form + hub */
#screen-profile .profile-sheet {
  padding: var(--space-4);
  gap: var(--space-4);
}

#screen-profile .account-hub {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

#screen-profile .account-hub-item {
  width: 100%;
  min-height: var(--touch-min);
  padding: var(--space-2);
  border-radius: var(--ticket-radius);
  font-size: var(--font-size-xs);
  letter-spacing: 0;
}

#screen-profile .account-pane {
  gap: var(--space-4);
}

#screen-profile .profile-row-rich {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--carrinho-line);
  border-radius: var(--ticket-radius);
  background: var(--carrinho-mist);
}

#screen-profile .profile-phone {
  font-size: var(--font-size-md);
  font-weight: 800;
  color: var(--carrinho-ink);
}

#screen-profile .account-quick-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  padding: 0;
  margin: 0;
}

#screen-profile .account-link {
  justify-content: center;
  min-height: var(--touch-min);
  padding: 0 var(--space-2);
  border-radius: var(--ticket-radius);
  border: 1px solid var(--carrinho-line);
  background: var(--carrinho-snow);
  color: var(--carrinho-ink);
  text-decoration: none;
}

#screen-profile .account-link:hover {
  border-color: var(--carrinho-red);
  background: var(--carrinho-red-soft);
  color: var(--carrinho-red-deep);
  text-decoration: none;
}

#screen-profile .addr-card {
  padding: var(--space-3) 0;
}

#screen-profile .addr-card-actions {
  flex-wrap: wrap;
  gap: var(--space-2);
}

#screen-profile .addr-form {
  display: grid;
  gap: var(--space-3);
}

#screen-profile .field input,
#screen-profile .field select,
#screen-profile .field textarea,
#screen-checkout .field input,
#screen-checkout .field select,
#screen-checkout .field textarea,
#screen-login .field input {
  border-radius: var(--ticket-radius);
  border-color: var(--carrinho-line);
  background: var(--carrinho-snow);
}

/* Search ? filters / result bar (catalog grid untouched) */
#screen-search .menu-head {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

#screen-search .search-result-bar {
  margin-top: 0;
  border-radius: var(--ticket-radius);
}

#screen-search .menu-filters-sticky {
  border-bottom-color: var(--carrinho-line);
  background: color-mix(in srgb, var(--carrinho-mist) 92%, transparent);
}

#screen-search .menu-sort-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

#screen-search .menu-sort-field select {
  border-radius: var(--ticket-radius);
  border-color: var(--carrinho-line);
}

#screen-search .store-context {
  padding-top: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border-subtle);
  margin-bottom: var(--space-2);
}

#screen-search .recent-searches {
  margin-bottom: var(--space-2);
}

@media (max-width: 380px) {
  #screen-profile .account-hub {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #screen-profile .account-quick-links {
    grid-template-columns: 1fr;
  }

  #screen-search .menu-sort-row {
    grid-template-columns: 1fr;
  }

  #screen-cart .cart-line-right {
    min-width: 6.5rem;
  }
}

/* -----------------------------------------------------------
   Ultra polish pass ? forms ? wrap ? map ? auth ? rhythm
   Tokens: --field-gap ? --form-stack-gap ? --grad-welcome ? --helper-max-ch
   ----------------------------------------------------------- */

/* Text wrapping / alignment ? never blow the 430 shell */
.product-name,
.item-title,
.checkout-line-name,
.quote-option strong,
.order-card-main strong,
.addr-card-line,
.mapa-sheet-name,
.mapa-sheet-addr,
.location-value,
.store-title,
.store-desc,
.brand-tagline,
.section-sub,
.field-hint,
.empty p,
.empty .muted {
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
}

.field-hint {
  max-width: var(--helper-max-ch, 36ch);
  line-height: var(--line-height-snug);
}

.field-hint-warn {
  color: var(--carrinho-red-deep);
  font-weight: 600;
}

.field-hint.ok {
  color: var(--carrinho-ink);
}

.field-hint.error {
  color: var(--carrinho-red);
  font-weight: 600;
}

/* OTP / auth */
.otp-input {
  font-family: var(--font-mono);
  font-size: var(--font-size-xl);
  font-weight: 600;
  letter-spacing: 0.28em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

.otp-input::placeholder {
  letter-spacing: 0.28em;
  opacity: 0.45;
}

#screen-login .login-sheet.form-stack {
  gap: var(--form-stack-gap);
  padding: var(--space-4);
}

#screen-login .login-actions {
  margin-top: var(--space-1);
  width: 100%;
}

#screen-login .auth-status {
  margin: 0;
  min-height: 0;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-snug);
  max-width: var(--helper-max-ch);
}

#screen-login .auth-status:not(:empty) {
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--ticket-radius);
  background: var(--carrinho-mist);
  border: 1px solid var(--carrinho-line);
}

#screen-login .login-hero {
  background:
    var(--grad-sun-mist),
    var(--carrinho-snow);
}

#screen-login .login-brand .brand-wordmark {
  line-height: var(--line-height-tight);
}

#screen-login .login-head h1 {
  letter-spacing: var(--letter-spacing-tight);
}

/* Coupon row ? equal height with field */
.coupon-row {
  align-items: stretch;
}

.coupon-row input {
  border-radius: var(--ticket-radius);
}

.coupon-row .btn-soft {
  min-height: var(--touch-min);
  padding-inline: var(--space-4);
  white-space: nowrap;
}

/* Compare quotes ? clearer hierarchy */
.quote-option {
  display: grid;
  gap: var(--space-2);
  border-radius: var(--card-radius);
  padding: var(--space-4);
}

.quote-option.best {
  border-width: 2px;
  box-shadow: inset 0 0 0 1px var(--carrinho-red-soft);
}

.quote-option .tag {
  font-size: var(--font-size-xs);
  border-radius: var(--ticket-radius);
  padding: var(--space-1) var(--space-2);
}

.quote-price {
  font-family: var(--font-display);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--letter-spacing-tight);
  font-size: var(--font-size-lg);
}

.quote-pick {
  min-height: var(--touch-min);
  margin-top: var(--space-1);
}

.compare-block .section-label {
  margin-bottom: var(--space-3);
}

.compare-block #quoteBtn {
  margin-bottom: var(--space-2);
}

/* Map ? tokenized chrome */
.mapa-tool-btn {
  gap: var(--space-2);
  min-height: var(--touch-min);
  padding: 0 var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--glass-bg-strong);
  box-shadow: var(--shadow-md);
  font-family: var(--font-body);
}

.mapa-tool-btn-icon {
  width: var(--touch-min);
  min-width: var(--touch-min);
  padding: 0;
}

.mapa-status {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--ticket-radius);
  max-width: min(100%, 28ch);
  overflow-wrap: anywhere;
}

.mapa-sheet-name {
  font-family: var(--font-display);
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-snug);
}

.mapa-sheet-meta,
.mapa-sheet-addr {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-snug);
  max-width: 36ch;
}

.mapa-sheet-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

.mapa-sheet-actions .btn-soft,
.mapa-sheet-actions .btn-primary {
  min-height: var(--touch-min);
  min-width: 0;
}

.mapa-pin-dot span {
  font-family: var(--font-display);
  font-size: var(--font-size-xs);
}

/* Empty states ? one template */
.empty,
.empty-short,
.empty-friendly,
.empty-rich {
  text-align: left;
  justify-items: start;
}

.empty strong,
.empty-short strong,
.empty-friendly strong,
.empty-rich strong {
  max-width: var(--copy-max-ch, 28ch);
  line-height: var(--line-height-snug);
}

.empty p,
.empty-short p,
.empty .muted {
  max-width: var(--copy-max-ch, 28ch);
}

/* Section rhythm ? catalog / offers / cart */
.section-label h2,
.section-label-sm {
  overflow-wrap: anywhere;
}

.section-sub {
  max-width: var(--helper-max-ch, 36ch);
}

.carrinho-banner-copy strong {
  display: block;
  line-height: var(--line-height-snug);
  overflow-wrap: anywhere;
}

.carrinho-kicker {
  font-size: var(--font-size-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--carrinho-ink-muted);
}

/* Profile address form ? align with checkout card rows */
#screen-profile .addr-form.form-stack {
  gap: var(--form-section-gap, var(--space-3));
}

#screen-profile .addr-label-presets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
}

#screen-profile .addr-label-chip {
  min-height: 40px;
  border-radius: var(--ticket-radius);
}

#screen-profile .addr-default-toggle {
  margin-top: 0;
  padding: var(--space-3);
  min-height: var(--touch-min);
}

#screen-profile .demo-honesty {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-snug);
}

.demo-honesty {
  overflow-wrap: anywhere;
}

.demo-honesty strong,
.demo-honesty p {
  max-width: none;
}

/* Checkout pay label rhythm */
.checkout-pay-label {
  margin-bottom: var(--space-2);
  font-size: var(--font-size-xs);
}

#screen-checkout .coupon-row {
  margin-top: 0;
}

#screen-checkout .checkout-coupon-block .field {
  gap: var(--field-gap);
}

/* Micro type ? token */
.checkout-line-brand,
.welcome-demo-foot,
.addr-badge,
.order-card-sub {
  font-size: var(--font-size-xs);
}

.welcome-demo-foot {
  letter-spacing: 0.01em;
}

/* Active order bar ? wrap safely */
.active-order-copy {
  min-width: 0;
}

.active-order-phase {
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Sticky CTAs ? equal button height */
.sticky-cta-bar .btn-primary,
.cart-checkout-bar .btn-primary,
.checkout-sticky-bar .btn-primary {
  min-height: var(--touch-min);
  white-space: nowrap;
}

.sticky-cta-label {
  font-size: var(--font-size-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--carrinho-ink-muted);
  font-weight: 700;
}

.sticky-cta-value {
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--letter-spacing-tight);
}

/* Fee soft gradient ? token */
.active-order-bar,
.cart-fee-provisional {
  background: var(--grad-fee-soft, linear-gradient(90deg, var(--carrinho-yellow-soft) 0%, var(--carrinho-snow) 55%));
}

/* Desktop: phone shell fills height, soft frame ? no floating gap */
@media (min-width: 768px) {
  body {
    background:
      var(--grad-sun-mist),
      var(--grad-flare-mist),
      var(--carrinho-mist);
  }

  #app {
    box-shadow:
      0 0 0 1px rgba(224, 224, 224, 0.9),
      var(--shadow-lg);
    background: var(--carrinho-mist);
    min-height: 100dvh;
    overflow: clip;
  }

  .welcome {
    border-radius: 0;
  }

  .bottom-nav {
    border-radius: 0;
  }

  .topbar {
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }

  .screen {
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }
}

@media (max-width: 380px) {
  .otp-input {
    font-size: var(--font-size-lg);
    letter-spacing: 0.2em;
  }

  .mapa-sheet-actions {
    grid-template-columns: 1fr;
  }

  .login-actions {
    flex-direction: column;
  }

  .login-actions .btn-ghost,
  .login-actions .btn-primary {
    width: 100%;
    flex: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .quote-option,
  .mapa-tool-btn,
  .otp-input {
    transition: none;
  }
}

/* -----------------------------------------------------------
   Catalog optical lock ? price row === + midline ? PPU reserved
   Structure: was (opt) ? price|+ ? ppu. Density locked (96px / 2-col).
   ----------------------------------------------------------- */

/* Catalog cards ? locked optical stack (row heights match) */
.product-card,
.deal-card {
  align-content: stretch;
  height: 100%;
}

.home-catalog,
.product-section-grid,
.product-grid:has(> .product-card),
.product-grid:has(> .product-section-grid) {
  align-items: stretch;
}

.home-catalog .product-card,
.product-section-grid .product-card,
.product-rail .deal-card {
  height: 100%;
}

/* Thumbs ? edge-to-edge cover, fallback centered glyph */
.product-thumb,
.deal-thumb {
  position: relative;
  overflow: hidden;
  background: var(--carrinho-snow);
}

.product-thumb > img,
.deal-thumb > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  object-fit: cover;
  object-position: center center;
}

.product-thumb.is-fallback,
.deal-thumb.is-fallback {
  display: grid;
  place-items: center;
}

/* Title / brand / unit ? fixed slots so a row shares one baseline */
.product-brand,
.deal-card .deal-brand,
.deal-card .muted.deal-brand {
  height: var(--catalog-brand-h);
  min-height: var(--catalog-brand-h);
  line-height: var(--catalog-brand-h);
}

.product-name,
.deal-card .deal-name,
.deal-card strong.deal-name {
  height: var(--catalog-title-h);
  min-height: var(--catalog-title-h);
  max-height: var(--catalog-title-h);
  line-height: var(--catalog-title-lh);
}

.product-unit-row,
.deal-unit {
  height: var(--catalog-unit-h);
  min-height: var(--catalog-unit-h);
}

/* Price + add ? + shares the price row only; PPU always reserved under */
.product-footer,
.deal-card .product-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--catalog-add-size);
  grid-template-rows: auto var(--catalog-price-row-h) var(--catalog-ppu-slot);
  grid-template-areas:
    "was was"
    "price add"
    "ppu .";
  align-items: center;
  min-height: calc(var(--catalog-footer-h) + var(--space-2));
  height: auto;
}

.product-footer .add-btn,
.deal-card .product-footer .add-btn,
.deal-card .deal-add-btn {
  grid-area: add;
  align-self: center;
  justify-self: end;
  margin: 0;
}

.product-footer .product-price {
  grid-area: price;
  height: var(--catalog-price-row-h);
  font-feature-settings: "tnum" 1;
}

.product-footer .product-ppu {
  grid-area: ppu;
  height: var(--catalog-ppu-slot);
}

.product-footer .product-was {
  grid-area: was;
}

/* Rails ? snap + equal card stretch */
.product-rail {
  align-items: stretch;
  scroll-padding-inline: var(--gutter);
  gap: var(--catalog-gap);
  padding-bottom: var(--space-2);
}

.product-rail .deal-card {
  height: 100%;
}

/* Chips ? inactive 500 / active 700 ? equal pad ? brand red active */
.shelf-chips,
.chips,
.voice-phrase-chips {
  align-items: center;
  gap: var(--space-2);
}

.shelf-chip,
.chip,
.voice-phrase-chip {
  box-sizing: border-box;
  min-height: var(--catalog-chip-h);
  height: var(--catalog-chip-h);
  padding: 0 var(--catalog-chip-pad-x);
  font-size: var(--font-size-xs);
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.shelf-chip.active,
.shelf-chip[aria-selected="true"],
.chip.active,
.chip[aria-selected="true"] {
  font-weight: 700;
}

.voice-phrase-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--chip-radius);
  scroll-snap-align: start;
  font-weight: 500;
}

.voice-phrase-chips {
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--gutter);
}

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

.shelf-chips-sticky {
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}

.menu-filters-sticky .chips {
  align-items: center;
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}

.menu-filters-sticky .menu-cats .chip {
  height: var(--catalog-chip-h);
  min-height: var(--catalog-chip-h);
  padding: 0 var(--catalog-chip-pad-x);
  font-weight: 500;
}

.menu-filters-sticky .menu-cats .chip.active {
  font-weight: 700;
}

/* Forms ? label ? control ? hint: 4 / control / 0 extra; field?field 12 */
label.field,
.form-stack .field,
#screen-login .field,
#screen-checkout .field,
#screen-profile .field,
.addr-form .field,
.card-form .field,
.onboard-step .field {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--field-gap);
  align-content: start;
  min-width: 0;
  margin: 0;
}

label.field > .field-label,
.field > .field-label,
.field > .field-label-row {
  margin: 0;
  line-height: 1.25;
  min-height: 0;
}

label.field > input,
label.field > select,
label.field > textarea,
.field > input,
.field > select,
.field > textarea {
  min-height: var(--touch-min);
  height: auto;
  margin: 0;
}

.field-hint,
.field-error {
  margin-top: 0;
  margin-bottom: 0;
  line-height: var(--form-hint-lh, 1.35);
}

.form-stack,
#screen-profile .form-stack,
.profile-sheet .form-stack,
#screen-login .login-sheet.form-stack,
#screen-checkout .checkout-sheet.form-stack,
.addr-form.form-stack {
  gap: var(--form-stack-gap, var(--space-3));
}

.login-actions {
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
  margin: 0;
}

.login-actions .btn-primary,
.login-actions .btn-ghost,
.login-actions .btn-soft,
.pix-actions .btn-primary,
.pix-actions .btn-ghost,
.onboard-nav-row .btn-primary,
.onboard-nav-row .btn-ghost,
.addr-form-actions .btn-primary,
.addr-form-actions .btn-ghost,
.addr-form-actions .btn-soft {
  min-height: var(--touch-min);
  box-sizing: border-box;
}

.coupon-row {
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
}

.coupon-row .btn-soft,
.coupon-row input {
  min-height: var(--touch-min);
  height: var(--touch-min);
  box-sizing: border-box;
}

.card-form-row,
.form-stack .card-form-row {
  align-items: start;
  gap: var(--form-grid-gap, var(--space-3));
  min-width: 0;
}

.card-form-row > .field,
.form-stack .card-form-row > .field {
  min-width: 0;
}

/* Chrome ? search icon/text/mic ? nav icon/label */
.topbar-inner {
  align-items: center;
}

.location-text {
  align-items: center;
  line-height: 1.2;
}

.location-label,
.location-value,
.location-sep {
  line-height: 1.2;
}

.search-field {
  gap: 10px;
  padding: 0 6px 0 12px;
}

.search-field-icon,
.search-mic svg,
.icon-btn svg,
.location-chip > svg:first-child {
  display: block;
  flex-shrink: 0;
}

.search-mic {
  border-radius: var(--ticket-radius);
  width: var(--search-mic);
  height: var(--search-mic);
  min-width: var(--search-mic);
}

.bottom-nav {
  padding-top: 6px;
  padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
}

.bottom-nav-inner {
  align-items: stretch;
  min-height: var(--touch-min);
  height: var(--touch-min);
}

.nav-btn {
  min-height: var(--touch-min);
  padding: 0 2px;
  gap: 5px;
}

.nav-btn span,
.nav-btn .nav-label {
  line-height: 1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: inherit;
  font-weight: inherit;
}

/* Empty states ? compact, left-aligned */
.empty,
.empty-short,
.empty-friendly,
.empty-rich {
  display: grid;
  gap: var(--space-2);
  justify-items: start;
  align-content: start;
  min-width: 0;
}

.empty-short,
.empty.empty-short {
  padding: var(--space-4) var(--space-3);
}

.empty-rich,
.empty.empty-rich {
  padding: var(--space-6) var(--space-4);
}

.empty .btn-primary,
.empty-short .btn-primary,
.empty-friendly .btn-primary {
  min-height: var(--touch-min);
  margin-top: var(--space-1);
}

/* Sticky CTAs ? one row rhythm */
.sticky-cta-bar,
.cart-checkout-bar,
.checkout-sticky-bar,
.store-actions-sticky {
  align-items: center;
  min-width: 0;
}

.sticky-cta-meta {
  align-content: center;
  gap: 1px;
}

.sticky-cta-bar .btn-primary,
.cart-checkout-bar .btn-primary,
.checkout-sticky-bar .btn-primary,
.store-actions-sticky .btn-primary,
.store-actions-sticky .btn-accent {
  min-height: var(--touch-min);
  height: var(--touch-min);
  padding-block: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Quote cards */
.quote-list {
  gap: var(--space-2);
}

.quote-option {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  min-width: 0;
  align-content: start;
}

.quote-option > strong,
.quote-option .quote-store {
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: var(--line-height-snug);
}

.quote-option .tag {
  margin: 0;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--ticket-radius);
  line-height: 1;
  align-self: start;
}

.quote-price {
  margin-top: 0;
  line-height: 1.15;
}

.quote-breakdown {
  gap: var(--space-1) var(--space-3);
  margin-top: 0;
}

.quote-gap,
.quote-option .savings {
  margin-top: 0;
}

.quote-sub-block {
  margin-top: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--ticket-radius);
}

.quote-pick {
  margin-top: var(--space-1);
  min-height: var(--touch-min);
  height: var(--touch-min);
  padding-block: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Overflow guards */
.product-card,
.deal-card,
.quote-option,
.order-card,
.addr-card,
.cart-line,
.sticky-cta-bar,
.search-result-bar,
.carrinho-banner {
  min-width: 0;
}

.product-info,
.product-footer,
.deal-footer,
.quote-option > *,
.cart-line-main,
.cart-line-right {
  min-width: 0;
}

.product-section-label {
  overflow-wrap: anywhere;
  min-width: 0;
}

/* Desktop shell ? flush frame, no cramped corners */
@media (min-width: 768px) {
  #app {
    box-shadow:
      0 0 0 1px rgba(224, 224, 224, 0.95),
      0 24px 64px rgba(20, 20, 20, 0.1);
  }

  .bottom-nav {
    max-width: var(--shell-max);
  }

  .home-catalog,
  .product-section-grid {
    gap: var(--catalog-gap);
  }
}

@media (max-width: 380px) {
  .product-footer,
  .deal-card .product-footer {
    column-gap: var(--space-1);
  }

  .sticky-cta-bar {
    gap: var(--space-2);
  }

  .shelf-chip,
  .chip,
  .voice-phrase-chip {
    padding: 0 12px;
  }
}

/* -----------------------------------------------------------
   Fourth-pass chrome lock ? menus ? nav ? search ? toasts
   Wins cascade over prior passes. Brand #EA1D2C / #FFCC00.
   Structure / catalog / map / app.js flows untouched.
   ----------------------------------------------------------- */

/* ?? Header / location ?? */
.topbar {
  padding-top: max(var(--space-2), env(safe-area-inset-top, 0px));
  padding-bottom: var(--space-2);
}

.topbar-inner {
  align-items: center;
  min-height: var(--icon-tool);
  height: var(--icon-tool);
  gap: var(--space-2);
}

.location-chip {
  align-items: center;
  gap: 6px;
  padding: 0 2px 0 0;
  max-width: calc(100% - 96px);
}

.location-chip > svg:first-child {
  width: 16px;
  height: 16px;
  stroke: var(--carrinho-red);
}

.location-text {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  line-height: 1.2;
}

.location-label,
.location-sep {
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--carrinho-ink-muted);
  line-height: 1.2;
  flex-shrink: 0;
}

.location-value {
  font-size: var(--font-size-sm);
  font-weight: 700;
  line-height: 1.2;
  color: var(--carrinho-ink);
}

.location-chip .chev {
  width: 14px;
  height: 14px;
  margin-left: 0;
  stroke: var(--carrinho-ink-muted);
}

.topbar-tools {
  gap: 8px;
  height: var(--icon-tool);
}

.icon-btn {
  width: var(--icon-tool);
  height: var(--icon-tool);
  border-radius: var(--ticket-radius);
}

.ntf-badge {
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  line-height: 16px;
  font-size: 10px;
  font-weight: 700;
  background: var(--carrinho-red);
  color: #fff;
  box-shadow: 0 0 0 2px var(--carrinho-snow);
}

/* ?? Search field: icon ? text ? mic ?? */
.search-sticky {
  margin-top: var(--space-2);
}

.search-field {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--touch-min);
  height: var(--touch-min);
  padding: 0 4px 0 12px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--carrinho-line);
  background: var(--carrinho-snow);
}

.search-field-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: block;
  stroke: var(--carrinho-ink-muted);
}

.search-field input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0;
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: 500;
  line-height: 1.2;
  border: 0;
  background: transparent;
}

.search-mic-wrap {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin: 0;
}

.search-mic {
  width: var(--search-mic);
  height: var(--search-mic);
  min-width: var(--search-mic);
  min-height: var(--search-mic);
  padding: 0;
  margin: 0;
  border-radius: var(--ticket-radius);
  display: grid;
  place-items: center;
}

.search-mic svg {
  width: 18px;
  height: 18px;
  display: block;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.topbar[data-chrome="cart"] .search-field,
.topbar.chrome-cart .search-field {
  min-height: 40px;
  height: 40px;
  padding: 0 12px;
  gap: 8px;
}

/* ?? Shelf / category / menu chips ?? */
.shelf-chips,
.chips,
.voice-phrase-chips,
.orders-filters,
.menu-cats {
  display: flex;
  align-items: center;
  gap: 8px;
}

.shelf-chip,
.chip,
.voice-phrase-chip,
.orders-filters .chip,
.menu-cats .chip {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--catalog-chip-h);
  height: var(--catalog-chip-h);
  padding: 0 var(--catalog-chip-pad-x);
  border-radius: var(--chip-radius);
  font-size: var(--font-size-xs);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
}

.shelf-chip.active,
.shelf-chip[aria-selected="true"],
.chip.active,
.chip[aria-selected="true"],
.orders-filters .chip.active,
.orders-filters .chip[aria-selected="true"],
.menu-cats .chip.active,
.menu-cats .chip[aria-selected="true"] {
  background: var(--carrinho-red);
  border-color: var(--carrinho-red);
  color: #fff;
  font-weight: 700;
}

.shelf-chips-sticky,
.menu-filters-sticky .chips {
  padding-top: 8px;
  padding-bottom: 8px;
}

/* ?? Bottom nav: icon / label / badge ?? */
.bottom-nav {
  box-sizing: border-box;
  min-height: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
  height: auto;
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
  padding-left: max(6px, env(safe-area-inset-left, 0px));
  padding-right: max(6px, env(safe-area-inset-right, 0px));
  background: var(--glass-bg-strong);
  border-top: 1px solid var(--color-border-subtle);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

.bottom-nav-inner {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch;
  gap: 0;
  min-height: var(--touch-min);
  height: var(--touch-min);
}

.nav-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  min-height: var(--touch-min);
  height: 100%;
  padding: 2px 2px 0;
  margin: 0;
  border: 0;
  border-radius: var(--ticket-radius);
  background: transparent;
  color: var(--carrinho-ink-muted);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}

.nav-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 24px;
  height: 22px;
  flex-shrink: 0;
}

.nav-btn svg,
.nav-icon svg {
  width: 22px;
  height: 22px;
  display: block;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-label {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1;
  text-align: center;
}

.nav-btn.active {
  color: var(--carrinho-red);
  background: var(--carrinho-red-soft);
  font-weight: 700;
}

.nav-btn.active svg,
.nav-btn.active .nav-icon svg {
  stroke-width: 2.05;
}

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

.nav-badge {
  position: absolute;
  top: -5px;
  right: -9px;
  left: auto;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--carrinho-red);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  box-sizing: border-box;
  box-shadow: 0 0 0 2px var(--carrinho-snow);
  pointer-events: none;
}

.nav-live-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  left: auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--carrinho-red);
  box-shadow: 0 0 0 2px var(--carrinho-snow);
  pointer-events: none;
}

.nav-btn.has-live {
  color: var(--carrinho-ink);
}

.nav-btn.has-live.active {
  color: var(--carrinho-red);
}

/* ?? Toast / snackbar ?? */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--nav-h) + 16px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%) translateY(10px);
  z-index: var(--z-toast);
  box-sizing: border-box;
  width: max-content;
  max-width: min(calc(100vw - 32px), calc(var(--shell-max) - 32px));
  min-height: 40px;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--carrinho-ink-deep);
  color: #fff;
  font-size: var(--font-size-sm);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
  text-align: center;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
  box-shadow: 0 10px 28px rgba(20, 20, 20, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.06);
  opacity: 0;
  pointer-events: none;
}

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

.toast.error {
  background: var(--carrinho-red);
  border-color: rgba(255, 255, 255, 0.12);
  color: #fff;
}

/* Sit above cart FAB when it is visible */
#app:has(.cart-fab:not([hidden])) .toast {
  bottom: calc(var(--nav-h) + 68px + env(safe-area-inset-bottom, 0px));
}

/* ?? Offline / cart / active-order banners ?? */
.offline-banner {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px var(--gutter);
  background: var(--carrinho-ink);
  color: #fff;
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: 1.3;
}

.offline-banner-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.offline-banner-retry {
  flex-shrink: 0;
  min-height: 32px;
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--ticket-radius);
  background: var(--carrinho-yellow);
  color: var(--carrinho-ink);
  font-size: 12px;
  font-weight: 700;
}

.cart-missing-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 12px;
  border-radius: var(--ticket-radius);
  background: var(--carrinho-yellow-soft);
  border: 1px solid rgba(255, 204, 0, 0.55);
  color: var(--carrinho-ink);
  font-size: var(--font-size-sm);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.active-order-bar {
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px var(--gutter);
  margin-top: 8px;
}

.active-order-copy {
  min-width: 0;
  overflow: hidden;
}

.active-order-phase {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.active-order-cta {
  flex-shrink: 0;
  font-weight: 700;
  color: var(--carrinho-red);
}

.live-chip {
  gap: 6px;
  min-height: 28px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  background: var(--carrinho-yellow-soft);
  border: 1px solid rgba(255, 204, 0, 0.45);
  color: var(--carrinho-ink);
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.03em;
}

/* ?? Notification sheet + profile cards ?? */
.ntf-sheet {
  z-index: var(--z-modal-nested);
}

.ntf-sheet-panel {
  left: 50%;
  right: auto;
  width: 100%;
  max-width: var(--shell-max);
  transform: translateX(-50%) translateY(110%);
  border-radius: 16px 16px 0 0;
  background: var(--carrinho-snow);
  padding: 0 var(--gutter) calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -12px 40px rgba(20, 20, 20, 0.14);
}

.ntf-sheet.is-open .ntf-sheet-panel {
  transform: translateX(-50%) translateY(0);
}

.ntf-sheet-handle {
  width: 36px;
  height: 4px;
  margin: 10px auto 8px;
  background: var(--carrinho-line-strong);
}

.ntf-sheet-head {
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  min-height: var(--touch-min);
}

.ntf-sheet-title {
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  font-weight: 700;
  letter-spacing: var(--letter-spacing-tight);
  color: var(--carrinho-ink);
}

.ntf-sheet-close {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  border-radius: var(--ticket-radius);
  background: var(--carrinho-mist);
  color: var(--carrinho-ink-soft);
  font-size: 20px;
  line-height: 1;
}

.ntf-sheet-lead {
  margin: 0 0 12px;
  overflow-wrap: anywhere;
}

.ntf-card {
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border-subtle);
}

.ntf-card-top {
  display: flex;
  align-items: center;
  gap: 6px 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
  min-width: 0;
}

.ntf-kind {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--carrinho-ink-muted);
}

.ntf-new {
  font-size: 10px;
  font-weight: 700;
  color: var(--carrinho-red);
}

.ntf-when {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 11px;
  color: var(--carrinho-ink-muted);
}

.ntf-title {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 4px;
  overflow-wrap: anywhere;
  color: var(--carrinho-ink);
}

.ntf-body {
  margin: 0 0 10px;
  font-size: var(--font-size-sm);
  line-height: 1.4;
  overflow-wrap: anywhere;
  color: var(--carrinho-ink-soft);
}

.ntf-unread {
  border-left: 3px solid var(--carrinho-red);
  padding-left: 10px;
  background: linear-gradient(90deg, var(--carrinho-red-soft) 0%, transparent 72%);
}

.ntf-empty {
  padding: 16px 0;
}

/* ?? Narrow phones: keep chrome rhythm ?? */
@media (max-width: 360px) {
  .nav-btn {
    font-size: 9px;
    gap: 2px;
    padding: 2px 1px 0;
  }

  .nav-icon {
    width: 22px;
    height: 20px;
  }

  .nav-btn svg,
  .nav-icon svg {
    width: 20px;
    height: 20px;
  }

  .search-field {
    gap: 6px;
    padding: 0 4px 0 10px;
  }

  .toast {
    max-width: calc(100vw - 24px);
    padding: 10px 14px;
  }

  .location-label {
    display: none;
  }

  .location-sep {
    display: none;
  }
}

@media (max-width: 480px) {
  .toast {
    bottom: calc(var(--nav-h) + 14px + env(safe-area-inset-bottom, 0px));
  }

  #app:has(.cart-fab:not([hidden])) .toast {
    bottom: calc(var(--nav-h) + 64px + env(safe-area-inset-bottom, 0px));
  }
}


/* -----------------------------------------------------------
   Ultra-deep form / screen polish ? e1
   Wins prior passes. Tokens: --field-gap ? --form-stack-gap ? forms.css
   Brand red/yellow. Structure locked.
   ----------------------------------------------------------- */

/* ?? Fields: label ? control ? hint ?? */
label.field,
.form-stack .field,
#screen-login .field,
#screen-checkout .field,
#screen-profile .field,
.addr-form .field,
.card-form .field {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--field-gap, var(--space-1));
  align-content: start;
  margin: 0;
  min-width: 0;
  font-size: var(--form-label-size, var(--font-size-xs));
  font-weight: var(--font-weight-semibold, 600);
  color: var(--carrinho-ink-soft);
}

.field > .field-label-row,
.field > .field-label {
  margin: 0;
  line-height: 1.25;
  color: var(--carrinho-ink);
  font-size: var(--form-label-size, var(--font-size-xs));
  font-weight: var(--font-weight-semibold, 600);
}

.field > input,
.field > select,
.field > textarea,
.coupon-row input {
  margin: 0;
  min-height: var(--touch-min);
  padding: var(--form-field-pad-y, var(--space-2)) var(--form-field-pad-x, var(--space-3));
  border-radius: var(--form-radius, var(--ticket-radius));
  border: 1px solid var(--carrinho-line);
  background: var(--carrinho-snow);
  box-sizing: border-box;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--carrinho-ink);
}

.field > textarea {
  min-height: 88px;
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
  resize: vertical;
}

.field-hint,
.field-error {
  margin: 0;
  max-width: var(--helper-max-ch, 36ch);
  font-size: var(--form-hint-size, var(--font-size-xs));
  font-weight: var(--font-weight-regular, 400);
  line-height: var(--form-hint-lh, 1.35);
  color: var(--color-text-muted);
}

.field-error {
  color: var(--carrinho-red);
  font-weight: var(--font-weight-semibold, 600);
}

.field.error .field-hint { display: none; }

.form-stack,
#screen-login .login-sheet.form-stack,
#screen-checkout .checkout-sheet.form-stack,
#screen-profile .form-stack,
.profile-sheet .form-stack,
.addr-form.form-stack,
.card-form.form-stack {
  display: grid;
  gap: var(--form-stack-gap, var(--space-3));
  align-items: start;
}

.form-stack > .field,
.form-stack > .card-form-row,
.addr-form.form-stack > .field,
.addr-form.form-stack > .card-form-row {
  margin: 0;
}

.card-form-row,
.form-stack .card-form-row,
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--form-grid-gap, var(--space-3));
  align-items: start;
  min-width: 0;
}

.card-form-row > .field,
.field-row > .field {
  min-width: 0;
}

/* ?? Section titles (red accent bar) ?? */
.form-section-title,
.pane-subtitle.form-section-title,
.section-label-sm.form-section-title,
.checkout-pay-label.form-section-title {
  display: block;
  margin: 0 0 var(--space-1);
  padding-left: var(--space-2);
  border-left: 3px solid var(--carrinho-red);
  font-family: var(--font-display);
  font-size: var(--form-label-size, var(--font-size-xs));
  font-weight: var(--font-weight-extrabold, 800);
  letter-spacing: var(--letter-spacing-wide, 0.04em);
  text-transform: uppercase;
  color: var(--carrinho-ink);
  line-height: var(--line-height-snug, 1.3);
}

.form-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0 0 var(--space-2);
  min-width: 0;
}

.form-section-head .form-section-title {
  margin-bottom: 0;
  flex: 1 1 auto;
  min-width: 0;
}

.form-section-head .link-btn {
  flex-shrink: 0;
  min-height: 0;
  padding: var(--space-1) 0;
  line-height: 1.2;
  font-size: var(--font-size-xs);
}

.form-section-hint,
.checkout-pay-lead.form-section-hint {
  margin: 0 0 var(--space-3);
  padding-left: 11px;
  font-size: var(--form-hint-size, var(--font-size-xs));
  font-weight: 400;
  color: var(--color-text-muted);
  line-height: var(--line-height-snug);
  max-width: var(--helper-max-ch, 36ch);
}

.account-section-head.form-section {
  margin: 0 0 var(--space-2);
  padding: 0;
  border: 0;
}

.account-section-head .form-section-title {
  margin-bottom: 0;
}

.compare-section.form-section {
  margin: 0 0 var(--space-3);
  padding: 0;
  border: 0;
}

.compare-section .form-section-hint {
  margin-bottom: 0;
}

/* ?? Buttons: equal height ?? */
.btn-primary,
.btn-ghost,
.btn-soft,
.btn-accent,
.btn-sm,
.login-actions .btn-primary,
.login-actions .btn-ghost,
.pix-actions .btn-primary,
.pix-actions .btn-soft,
.pix-actions .btn-ghost,
.coupon-row .btn-soft,
.addr-form-actions .btn-primary,
.addr-form-actions .btn-ghost,
.sticky-cta-bar .btn-primary,
.cart-checkout-bar .btn-primary,
.checkout-sticky-bar .btn-primary,
.account-sticky-bar .btn-primary,
.empty .btn-primary,
.empty .btn-soft,
.empty-short .btn-primary {
  min-height: var(--touch-min);
  box-sizing: border-box;
}

.login-actions,
.pix-actions {
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
  width: 100%;
  margin: 0;
}

.login-actions .btn-primary,
.pix-actions .btn-primary {
  flex: 1.25;
}

.login-actions .btn-ghost,
.pix-actions .btn-soft,
.pix-actions .btn-ghost {
  flex: 1;
}

.coupon-row {
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
  margin: 0;
}

.coupon-row input,
.coupon-row .btn-soft {
  height: var(--touch-min);
  min-height: var(--touch-min);
}

.coupon-row .btn-soft {
  flex-shrink: 0;
  padding-inline: var(--space-4);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ?? OTP ?? */
.field-otp .otp-input,
.otp-input {
  font-family: var(--font-mono);
  font-size: var(--font-size-xl);
  font-weight: 600;
  letter-spacing: 0.32em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  padding-left: var(--space-3);
  padding-right: var(--space-3);
  height: var(--touch-comfort);
  min-height: var(--touch-comfort);
}

.otp-input::placeholder {
  letter-spacing: 0.32em;
  opacity: 0.4;
}

#screen-login .login-sheet {
  padding: var(--space-4);
}

#screen-login .login-actions {
  margin-top: var(--space-1);
}

#screen-login .auth-status:not(:empty) {
  margin-top: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--ticket-radius);
  background: var(--carrinho-mist);
  border: 1px solid var(--carrinho-line);
  font-size: var(--font-size-sm);
  max-width: none;
}

/* ?? Checkout steps ?? */
#screen-checkout .checkout-sheet {
  gap: 0;
  padding: var(--space-4);
}

#screen-checkout .checkout-step {
  padding: var(--space-4) 0;
  border-top: 1px solid var(--carrinho-line);
}

#screen-checkout .checkout-step:first-child {
  border-top: 0;
  padding-top: 0;
}

#screen-checkout .checkout-step:last-of-type {
  padding-bottom: var(--space-2);
}

#screen-checkout .checkout-pay .form-section-title {
  margin-bottom: var(--space-1);
}

#screen-checkout .checkout-pay .form-section-hint {
  margin-bottom: var(--space-3);
}

#screen-checkout .pay-method-row {
  gap: var(--space-2);
}

#screen-checkout .pay-method-card {
  min-height: var(--touch-comfort);
  border-radius: var(--ticket-radius);
  border: 1px solid var(--carrinho-line);
  background: var(--carrinho-mist);
  padding: var(--space-3);
  gap: 2px;
}

#screen-checkout .pay-method input:checked + .pay-method-card {
  border-color: var(--carrinho-red);
  background: var(--carrinho-red-soft);
  box-shadow: inset 0 0 0 1px var(--carrinho-red);
}

#screen-checkout .card-form {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--carrinho-line);
}

#screen-checkout .pix-panel {
  margin-top: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--card-radius);
  border: 1px solid var(--carrinho-line);
  background: var(--carrinho-mist);
  display: grid;
  gap: var(--space-3);
}

#screen-checkout .addr-option {
  padding: var(--space-3);
  border-radius: var(--ticket-radius);
  gap: var(--space-3);
}

#screen-checkout .addr-option.selected {
  border-color: var(--carrinho-red);
  background: var(--carrinho-red-soft);
}

/* ?? Cart lines ?? */
#screen-cart .cart-sheet,
#screen-cart .totals-sheet {
  padding: var(--space-4);
}

#screen-cart .cart-list {
  display: grid;
  gap: 0;
}

#screen-cart .cart-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-subtle);
  min-width: 0;
}

#screen-cart .cart-line:first-child { padding-top: 0; }
#screen-cart .cart-line:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

#screen-cart .cart-line-main {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-width: 0;
}

#screen-cart .cart-thumb {
  width: var(--product-thumb);
  height: var(--product-thumb);
  border-radius: var(--ticket-radius);
  border: 1px solid var(--carrinho-line);
  flex-shrink: 0;
  object-fit: cover;
}

#screen-cart .cart-line-info {
  min-width: 0;
  display: grid;
  gap: 2px;
  align-content: start;
}

#screen-cart .item-title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  line-height: var(--line-height-snug);
  color: var(--carrinho-ink);
}

#screen-cart .item-meta {
  font-size: var(--font-size-xs);
  color: var(--carrinho-ink-muted);
  line-height: 1.3;
}

#screen-cart .cart-line-warn {
  margin-top: 2px;
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--carrinho-red-deep);
}

#screen-cart .cart-line-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
  min-width: 7rem;
}

#screen-cart .cart-line-total {
  font-size: var(--font-size-sm);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--carrinho-ink);
  min-width: 4.5rem;
}

#screen-cart .qty-stepper {
  gap: 0;
}

#screen-cart .qty-btn {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
}

#screen-cart .cart-line-remove {
  min-height: 0;
  padding: 0;
  font-size: var(--font-size-xs);
}

#screen-cart .totals-sheet .total-row {
  padding: var(--table-cell-pad-y) 0;
  font-size: var(--table-font-size);
}

#screen-cart .totals-sheet .total-row-grand {
  margin-top: var(--space-1);
  padding-top: var(--space-3);
  border-top: 1px solid var(--carrinho-line);
  font-weight: 800;
}

#screen-cart .compare-block {
  margin-top: var(--space-3);
}

#screen-cart .compare-block #quoteBtn {
  margin-bottom: var(--space-3);
  min-height: var(--touch-min);
}

/* ?? Profile / address ?? */
#screen-profile .profile-sheet {
  padding: var(--space-4);
  gap: var(--space-4);
}

#screen-profile .account-pane {
  gap: var(--space-4);
}

#screen-profile .account-hub {
  gap: var(--space-2);
  margin-bottom: 0;
}

#screen-profile .account-hub-item {
  min-height: var(--touch-min);
  border-radius: var(--ticket-radius);
  font-size: var(--font-size-xs);
  font-weight: 600;
}

#screen-profile .account-hub-item.active {
  background: var(--carrinho-red);
  color: var(--carrinho-snow);
  border-color: var(--carrinho-red);
}

#screen-profile .addr-form.form-stack {
  gap: var(--form-stack-gap, var(--space-3));
}

#screen-profile .addr-label-presets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
}

#screen-profile .addr-label-chip {
  min-height: 40px;
  height: 40px;
  border-radius: var(--ticket-radius);
  font-weight: 500;
}

#screen-profile .addr-label-chip.active {
  background: var(--carrinho-red);
  border-color: var(--carrinho-red);
  color: var(--carrinho-snow);
  font-weight: 700;
}

#screen-profile .addr-default-toggle {
  margin: 0;
  padding: var(--space-3);
  min-height: var(--touch-min);
  border-radius: var(--ticket-radius);
  border: 1px solid var(--carrinho-line);
  background: var(--carrinho-mist);
}

#screen-profile .addr-card {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-subtle);
}

#screen-profile .addr-card:last-child {
  border-bottom: 0;
}

#screen-profile .addr-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.addr-form-actions.account-sticky-bar,
.addr-form-actions.sticky-cta-bar {
  display: grid;
  gap: var(--space-2);
  flex-direction: column;
  align-items: stretch;
}

.addr-form-actions .btn-primary,
.addr-form-actions .btn-ghost {
  width: 100%;
  margin: 0;
}

.account-sticky-bar .btn-primary {
  width: 100%;
  height: var(--touch-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-block: 0;
}

#screen-profile .account-quick-links {
  gap: var(--space-2);
}

#screen-profile .account-link {
  min-height: var(--touch-min);
  border-radius: var(--ticket-radius);
}

#screen-profile .demo-honesty {
  padding: var(--space-3);
  border-radius: var(--ticket-radius);
  border: 1px solid rgba(255, 204, 0, 0.55);
  background: var(--carrinho-yellow-soft);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-snug);
}

#screen-profile .demo-honesty strong {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--carrinho-ink);
}

#screen-profile .profile-row {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border-subtle);
  font-size: var(--font-size-sm);
}

#screen-profile .field.check-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--touch-min);
  padding: var(--space-2) 0;
  font-size: var(--font-size-sm);
}

/* ?? Orders ?? */
.order-list {
  display: grid;
  gap: var(--space-3);
}

.order-card {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--card-radius);
  border: 1px solid var(--carrinho-line);
  background: var(--carrinho-snow);
  box-shadow: none;
  min-width: 0;
}

.order-card-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-3);
}

.order-card-main strong,
.order-card-main .order-num {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-snug);
  overflow-wrap: anywhere;
}

.order-card-sub {
  margin-top: 2px;
  font-size: var(--font-size-xs);
  line-height: 1.3;
  color: var(--carrinho-ink-muted);
}

.order-card-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-2) 0 0;
  border-top: 1px solid var(--color-border-subtle);
  font-size: var(--font-size-sm);
}

.order-card-meta .price {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.order-card-meta .muted {
  justify-self: end;
  text-align: right;
}

.order-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
}

.order-card-actions .btn-sm {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--touch-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-block: 0;
}

.orders-filters {
  margin: 0 0 var(--space-3);
  gap: var(--space-2);
}

.tracking-sheet {
  padding: var(--space-3) var(--space-4);
}

.order-detail-sheet .form-section-head {
  margin-top: var(--space-3);
}

.order-detail-sheet .form-section-head:first-child {
  margin-top: 0;
}

/* ?? Empty states ?? */
.empty,
.empty-short,
.empty-friendly,
.empty-rich {
  display: grid;
  gap: var(--space-2);
  justify-items: start;
  align-content: start;
  text-align: left;
  min-width: 0;
  box-sizing: border-box;
}

.empty-short,
.empty.empty-short {
  padding: var(--space-4) var(--space-3);
}

.empty-friendly,
.empty-short.empty-friendly {
  border: 1px solid var(--carrinho-line);
  border-left: 3px solid var(--carrinho-red);
  border-radius: var(--ticket-radius);
  background: var(--carrinho-snow);
  padding: var(--space-4) var(--space-3) var(--space-4) calc(var(--space-3) + 2px);
}

.empty-title,
.empty strong,
.empty-short strong,
.empty-friendly strong {
  display: block;
  max-width: var(--copy-max-ch, 28ch);
  font-family: var(--font-display);
  font-size: var(--font-size-md);
  font-weight: 700;
  letter-spacing: var(--letter-spacing-tight);
  color: var(--carrinho-ink);
  line-height: var(--line-height-snug);
}

.empty p,
.empty .muted,
.empty-short p,
.empty-short .muted {
  margin: 0;
  max-width: var(--copy-max-ch, 28ch);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-snug);
  color: var(--carrinho-ink-muted);
}

.empty .btn-primary,
.empty-short .btn-primary,
.empty-friendly .btn-primary,
.cart-empty-actions .btn-primary,
.cart-empty-actions .btn-soft {
  margin-top: var(--space-1);
  min-height: var(--touch-min);
  height: var(--touch-min);
  padding-block: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cart-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-1);
  width: 100%;
}

.cart-empty-actions .btn-primary,
.cart-empty-actions .btn-soft {
  margin-top: 0;
  flex: 1 1 auto;
  min-width: 0;
}

.cart-list:has(.empty),
.order-list:has(.empty) {
  border: none;
  background: transparent;
}

/* ?? Sticky CTAs ?? */
.sticky-cta-bar .btn-primary,
.cart-checkout-bar .btn-primary,
.checkout-sticky-bar .btn-primary {
  height: var(--touch-min);
  padding-block: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.sticky-cta-label {
  font-size: var(--font-size-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--carrinho-ink-muted);
}

.sticky-cta-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--letter-spacing-tight);
}

/* ?? Page heads ?? */
.page-head-compact {
  padding-top: var(--space-2);
  padding-bottom: var(--space-3);
}

.page-head-compact h1 {
  font-size: clamp(1.25rem, 4.5vw, 1.45rem);
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-tight);
}

.page-head-compact p {
  margin-top: 2px;
  font-size: var(--font-size-xs);
  line-height: var(--line-height-snug);
  color: var(--carrinho-ink-muted);
  max-width: var(--helper-max-ch, 36ch);
}

@media (max-width: 380px) {
  .card-form-row,
  .form-stack .card-form-row,
  .field-row {
    grid-template-columns: 1fr;
  }

  .login-actions,
  .pix-actions,
  .cart-empty-actions {
    flex-direction: column;
  }

  .login-actions > *,
  .pix-actions > *,
  .cart-empty-actions > * {
    width: 100%;
    flex: none;
  }

  .otp-input,
  .field-otp .otp-input {
    font-size: var(--font-size-lg);
    letter-spacing: 0.22em;
  }

  #screen-cart .cart-line-right {
    min-width: 6.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pay-method-card,
  .otp-input,
  .order-card,
  .addr-option {
    transition: none;
  }
}

/* -----------------------------------------------------------
   Cart ? compare ? checkout ? ultra polish (2026-07-10f2)
   Totals alignment ? fee rows ? coupon ? sticky dual CTA ? quotes
   ----------------------------------------------------------- */

.price-cell {
  font-variant-numeric: tabular-nums;
  text-align: right;
  min-width: 5.5rem;
  flex-shrink: 0;
  white-space: nowrap;
}

.price-pending {
  color: var(--carrinho-ink-muted);
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.01em;
  min-width: 0;
}

.total-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--table-cell-pad-y) 0;
}

.total-row > span:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.total-row .price,
.total-row .price-cell {
  justify-self: end;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.total-row-grand {
  margin-top: var(--space-1);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-subtle);
}

.total-row-grand .price,
.total-row-grand .price-cell {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: var(--letter-spacing-tight);
}

.fee-note {
  font-weight: 500;
  font-size: 0.92em;
  white-space: nowrap;
}

.cart-fee-provisional {
  margin: var(--space-2) 0 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--ticket-radius);
  font-size: var(--font-size-xs);
  line-height: 1.4;
  color: var(--carrinho-ink-soft);
}

/* Sticky dual actions */
.sticky-cta-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-end;
}

.sticky-cta-actions .btn-primary,
.sticky-cta-actions .sticky-cta-secondary {
  min-height: var(--touch-min);
  white-space: nowrap;
}

.sticky-cta-secondary {
  flex: 0 0 auto;
  padding-inline: var(--space-3);
  font-weight: 700;
}

.sticky-cta-actions .btn-primary {
  flex: 1 1 auto;
  min-width: min(132px, 100%);
  max-width: 100%;
}

.cart-checkout-bar,
.checkout-sticky-bar {
  flex-wrap: nowrap;
  align-items: center;
}

.cart-checkout-bar .sticky-cta-meta,
.checkout-sticky-bar .sticky-cta-meta {
  flex: 0 1 auto;
  max-width: 42%;
}

/* Quote cards ? hierarchy */
.quote-list {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.quote-option {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--card-radius);
  border: 1px solid var(--carrinho-line);
  background: var(--carrinho-snow);
  box-shadow: none;
}

.quote-option.best {
  border-color: var(--carrinho-red);
  border-width: 2px;
  background:
    linear-gradient(180deg, var(--carrinho-red-soft) 0%, var(--carrinho-snow) 42%);
  box-shadow: inset 0 0 0 1px rgba(234, 29, 44, 0.08);
}

.quote-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}

.quote-option .tag {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 3px 8px;
  border-radius: var(--ticket-radius);
  background: var(--carrinho-yellow);
  color: var(--carrinho-ink);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
}

.quote-option.best .tag {
  background: var(--carrinho-red);
  color: #fff;
}

.quote-store-name {
  margin: 0;
  flex: 1 1 100%;
  font-family: var(--font-display);
  font-size: var(--font-size-md);
  font-weight: 800;
  letter-spacing: var(--letter-spacing-tight);
  line-height: 1.2;
  color: var(--carrinho-ink);
  overflow-wrap: anywhere;
}

.quote-total-band {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
}

.quote-total-label {
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--carrinho-ink-muted);
}

.quote-price {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--font-size-xl, 1.35rem);
  font-weight: 800;
  letter-spacing: var(--letter-spacing-tight);
  font-variant-numeric: tabular-nums;
  color: var(--carrinho-ink);
  line-height: 1.1;
}

.quote-fees {
  display: grid;
  gap: 0;
}

.quote-fees .total-row {
  padding: 4px 0;
  font-size: var(--font-size-xs);
  color: var(--carrinho-ink-soft);
}

.quote-fees .total-row .price-cell {
  min-width: 4.75rem;
  color: var(--carrinho-ink);
  font-weight: 700;
}

.quote-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.quote-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 8px;
  border-radius: var(--ticket-radius);
  background: var(--carrinho-mist);
  border: 1px solid var(--carrinho-line);
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--carrinho-ink-soft);
  white-space: nowrap;
}

.quote-pick {
  margin-top: var(--space-1);
  min-height: var(--touch-min);
}

.quote-option.best .quote-pick.btn-primary {
  width: 100%;
}

.flow-msg:empty {
  display: none;
}

.compare-block #quoteBtn {
  min-height: var(--touch-min);
  font-weight: 800;
}

/* Coupon field */
#screen-checkout .checkout-coupon-block {
  display: grid;
  gap: var(--field-gap);
}

#screen-checkout .coupon-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: stretch;
}

#screen-checkout .coupon-row input {
  min-height: var(--touch-min);
  height: var(--touch-min);
  border-radius: var(--ticket-radius);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
}

#screen-checkout .coupon-row .btn-soft {
  min-height: var(--touch-min);
  height: var(--touch-min);
  padding-inline: var(--space-4);
  font-weight: 700;
}

#screen-checkout .checkout-coupon-block .field-hint {
  margin: 0;
}

#screen-checkout .checkout-fees .total-row {
  font-size: var(--font-size-sm);
}

#screen-checkout .checkout-fees .total-row-grand {
  font-size: var(--font-size-md);
}

/* Cart line polish */
#screen-cart .cart-line-total {
  min-width: 5rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

#screen-cart .qty-stepper {
  align-self: flex-end;
}

#screen-cart .cart-line-remove {
  align-self: flex-end;
  min-height: 36px;
}

#screen-cart .totals-sheet {
  padding-bottom: var(--space-3);
}

#screen-cart.active,
#screen-checkout.active {
  padding-bottom: calc(var(--nav-h) + 112px + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 430px) {
  .sticky-cta-actions {
    flex: 1 1 auto;
  }

  .sticky-cta-secondary {
    padding-inline: var(--space-2);
    font-size: var(--font-size-sm);
  }

  .sticky-cta-actions .btn-primary {
    font-size: var(--font-size-sm);
    padding-inline: var(--space-3);
  }

  .quote-price {
    font-size: var(--font-size-lg);
  }
}

@media (max-width: 360px) {
  .sticky-cta-bar.cart-checkout-bar {
    flex-wrap: wrap;
  }

  .cart-checkout-bar .sticky-cta-meta {
    max-width: none;
    width: 100%;
  }

  .sticky-cta-actions {
    width: 100%;
  }

  .sticky-cta-actions .btn-primary,
  .sticky-cta-secondary {
    flex: 1 1 auto;
    max-width: none;
  }
}

/* -----------------------------------------------------------
   Chrome final lock ? e2 (must be last in cascade)
   Bottom nav ? search ? chips ? toast ? banners ? ntf
   ----------------------------------------------------------- */

.bottom-nav {
  box-sizing: border-box;
  min-height: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
  padding-left: max(6px, env(safe-area-inset-left, 0px));
  padding-right: max(6px, env(safe-area-inset-right, 0px));
  background: var(--glass-bg-strong);
  border-top: 1px solid var(--color-border-subtle);
}

.bottom-nav-inner {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch;
  gap: 0;
  min-height: var(--touch-min);
  height: var(--touch-min);
}

.nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  min-height: var(--touch-min);
  height: 100%;
  padding: 2px 2px 0;
  border-radius: var(--ticket-radius);
  background: transparent;
  color: var(--carrinho-ink-muted);
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
}

.nav-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 24px;
  height: 22px;
  flex-shrink: 0;
}

.nav-btn svg,
.nav-icon svg {
  width: 22px;
  height: 22px;
  display: block;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-label {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1;
  text-align: center;
}

.nav-btn.active {
  color: var(--carrinho-red);
  background: var(--carrinho-red-soft);
  font-weight: 700;
}

.nav-btn.active svg,
.nav-btn.active .nav-icon svg {
  stroke-width: 2.05;
}

.nav-badge {
  position: absolute;
  top: -5px;
  right: -9px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--carrinho-red);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--carrinho-snow);
  pointer-events: none;
}

.nav-live-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--carrinho-red);
  box-shadow: 0 0 0 2px var(--carrinho-snow);
  pointer-events: none;
}

.search-field {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--touch-min);
  height: var(--touch-min);
  padding: 0 4px 0 12px;
}

.search-field-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: block;
}

.search-mic {
  width: var(--search-mic);
  height: var(--search-mic);
  min-width: var(--search-mic);
  border-radius: var(--ticket-radius);
  display: grid;
  place-items: center;
}

.search-mic svg {
  width: 18px;
  height: 18px;
  display: block;
}

.location-chip {
  align-items: center;
  gap: 6px;
}

.location-text {
  align-items: center;
  gap: 6px;
  line-height: 1.2;
}

.shelf-chip.active,
.shelf-chip[aria-selected="true"],
.chip.active,
.chip[aria-selected="true"],
.orders-filters .chip.active,
.menu-cats .chip.active {
  background: var(--carrinho-red);
  border-color: var(--carrinho-red);
  color: #fff;
  font-weight: 700;
}

.toast {
  left: 50%;
  bottom: calc(var(--nav-h) + 16px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%) translateY(10px);
  z-index: var(--z-toast);
  width: max-content;
  max-width: min(calc(100vw - 32px), calc(var(--shell-max) - 32px));
  min-height: 40px;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--carrinho-ink-deep);
  color: #fff;
  font-size: var(--font-size-sm);
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
  box-shadow: 0 10px 28px rgba(20, 20, 20, 0.22);
}

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

.toast.error {
  background: var(--carrinho-red);
  color: #fff;
}

#app:has(.cart-fab:not([hidden])) .toast {
  bottom: calc(var(--nav-h) + 68px + env(safe-area-inset-bottom, 0px));
}

.offline-banner {
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px var(--gutter);
  background: var(--carrinho-ink);
  color: #fff;
}

.offline-banner-retry {
  min-height: 32px;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--ticket-radius);
  background: var(--carrinho-yellow);
  color: var(--carrinho-ink);
  font-weight: 700;
}

.ntf-sheet {
  z-index: var(--z-modal-nested);
}

.ntf-sheet-panel {
  left: 50%;
  right: auto;
  width: 100%;
  max-width: var(--shell-max);
  transform: translateX(-50%) translateY(110%);
  border-radius: 16px 16px 0 0;
  background: var(--carrinho-snow);
}

.ntf-sheet.is-open .ntf-sheet-panel {
  transform: translateX(-50%) translateY(0);
}

.ntf-title,
.ntf-body,
.ntf-sheet-lead,
.cart-missing-banner,
.offline-banner-text {
  overflow-wrap: anywhere;
}

.ntf-unread {
  border-left: 3px solid var(--carrinho-red);
  padding-left: 10px;
  background: linear-gradient(90deg, var(--carrinho-red-soft) 0%, transparent 72%);
}

.ntf-badge {
  background: var(--carrinho-red);
  color: #fff;
  box-shadow: 0 0 0 2px var(--carrinho-snow);
}

@media (max-width: 360px) {
  .nav-btn { font-size: 9px; gap: 2px; }
  .nav-icon { width: 22px; height: 20px; }
  .nav-btn svg, .nav-icon svg { width: 20px; height: 20px; }
  .location-label, .location-sep { display: none; }
  .search-field { gap: 6px; padding: 0 4px 0 10px; }
}

/* ?? Search autocomplete (products / brands / categories) ?? */
.search-sticky {
  position: relative;
  overflow: visible;
}

.search-suggest {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: var(--z-dropdown);
  max-height: min(52vh, 320px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0;
  padding: 6px;
  border-radius: 14px;
  border: 1px solid var(--carrinho-line);
  background: var(--carrinho-snow);
  box-shadow:
    0 10px 28px rgba(26, 26, 26, 0.12),
    0 0 0 1px rgba(234, 29, 44, 0.06);
  scrollbar-width: thin;
}

.search-suggest[hidden] {
  display: none !important;
}

.search-suggest-group {
  padding: 4px 8px 2px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--carrinho-ink-muted);
}

.search-suggest-item {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--carrinho-ink);
  text-align: left;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
}

.search-suggest-item:hover,
.search-suggest-item.is-active {
  background: var(--carrinho-red-soft);
}

.search-suggest-item.is-active {
  box-shadow: inset 3px 0 0 var(--carrinho-red);
}

.search-suggest-ico {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: var(--carrinho-mist);
  color: var(--carrinho-ink-soft);
}

.search-suggest-item[data-kind="brand"] .search-suggest-ico {
  background: var(--carrinho-yellow);
  color: var(--carrinho-ink);
}

.search-suggest-item[data-kind="category"] .search-suggest-ico {
  background: var(--carrinho-red);
  color: #fff;
}

.search-suggest-item[data-kind="product"] .search-suggest-ico {
  background: var(--carrinho-yellow-soft);
  color: var(--carrinho-red-deep);
  border: 1px solid rgba(255, 204, 0, 0.55);
}

.search-suggest-item[data-kind="recent"] .search-suggest-ico {
  background: var(--carrinho-mist-deep);
  color: var(--carrinho-ink-muted);
}

.search-suggest-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.search-suggest-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-suggest-meta {
  font-size: 11px;
  font-weight: 500;
  color: var(--carrinho-ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-suggest-kind {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--carrinho-ink-muted);
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--carrinho-mist);
}

.search-suggest-item[data-kind="brand"] .search-suggest-kind {
  background: var(--carrinho-yellow-soft);
  color: var(--carrinho-ink);
}

.search-suggest-item[data-kind="category"] .search-suggest-kind {
  background: var(--carrinho-red-soft);
  color: var(--carrinho-red-deep);
}

.search-suggest-empty {
  padding: 14px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--carrinho-ink-muted);
  text-align: center;
}

.topbar[data-chrome="cart"] .search-suggest,
.topbar.chrome-cart .search-suggest,
.topbar[data-chrome="slim"] .search-suggest,
.topbar.chrome-slim .search-suggest {
  display: none !important;
}

.search-field:focus-within {
  border-color: var(--carrinho-red);
  box-shadow: 0 0 0 3px rgba(234, 29, 44, 0.12);
}

body.skin-comfort .search-suggest-item {
  min-height: 48px;
  font-size: 14px;
}