.mr-mobile-buy {
  display: none;
}

/* Keep visible geometry unchanged; extend the usable touch area. */
.mr-checkout {
  height: 100vh !important;
  height: 100dvh !important;
  padding-top: env(safe-area-inset-top, 0px) !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}
.mr-checkout-scroll {
  min-height: 0;
  overscroll-behavior: contain;
  scroll-padding-block: 24px;
}
.mr-checkout-close {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}
.mr-quantity-touch,
.mr-checkout button,
.mr-checkout a {
  position: relative;
}
.mr-quantity-touch::after {
  content: "";
  position: absolute;
  inset: -6px;
}
.mr-checkout button:not(.mr-quantity-touch)::after,
.mr-checkout a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  min-height: 44px;
  transform: translateY(-50%);
}
.mr-checkout input { scroll-margin-block: 24px; }
.mr-checkout-field { min-width: 0; }
.mr-email-domains {
  display: grid;
  max-height: 184px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--background);
  color: var(--foreground);
}
.mr-checkout .mr-email-domain {
  width: 100%;
  min-height: 44px;
  height: auto;
  justify-content: flex-start;
  padding: 10px 12px;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: left;
  border-radius: 0;
}
.mr-email-domain[aria-selected="true"] { background: var(--muted); }
.mr-checkout #mr-checkout-pix-code {
  -webkit-user-select: all;
  user-select: all;
}

/* Presentation only: preserve the original checkout fields and handlers. */
.mr-checkout { letter-spacing: 0; }
.mr-checkout .wood-panel h2 { letter-spacing: 0; }
.mr-checkout-scroll > div {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-block: 20px 28px;
}
.mr-checkout-scroll > div > p:first-child {
  margin-bottom: 0;
  font-size: 14px;
  line-height: 1.5;
}
.mr-checkout-scroll > div > .rounded-lg {
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  padding: 0 0 16px;
}
.mr-checkout-scroll > div > .rounded-lg > div:first-child > div:last-child p:last-child {
  font-size: 28px;
  line-height: 1.1;
}
.mr-checkout-scroll > div > .rounded-lg .truncate {
  white-space: normal;
  line-height: 1.25;
}
.mr-checkout-scroll > div > .rounded-lg > div:last-child {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}
.mr-checkout .mr-quantity-touch {
  width: 40px;
  height: 40px;
}
.mr-checkout .mr-checkout-field { gap: 8px; }
.mr-checkout .mr-checkout-field label {
  font-size: 14px;
  line-height: 1.2;
  color: var(--foreground);
}
.mr-checkout .mr-checkout-field input {
  min-height: 48px;
  font-size: 16px;
  border-radius: 6px;
  background: var(--card);
  box-shadow: none;
}
.mr-checkout .mr-checkout-field input:focus-visible {
  border-color: var(--primary);
  outline: 2px solid color-mix(in oklab, var(--primary) 25%, transparent);
  outline-offset: 2px;
}
.mr-checkout-scroll > div > .grid { gap: 16px; }
.mr-checkout-scroll button.font-display {
  min-height: 54px;
  height: auto;
  padding: 12px 16px;
  font-size: 22px;
  letter-spacing: 0;
  white-space: normal;
  line-height: 1.2;
}
.mr-checkout-scroll button[aria-pressed] {
  min-height: 76px;
  border-radius: 6px;
}
.mr-checkout-scroll button[aria-pressed="true"] {
  background: color-mix(in oklab, var(--primary) 8%, var(--card));
}
.mr-checkout footer {
  margin-top: 4px;
  padding-top: 20px;
  line-height: 1.6;
}
.mr-checkout footer p:first-child { color: var(--foreground); }
.mr-checkout footer [class*="tracking"] { letter-spacing: 0; }

/* Conversion clarity stays in the existing checkout, never a second form. */
.mr-checkout .mr-checkout-progress {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.mr-checkout .mr-checkout-step {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--border);
  color: var(--muted-foreground);
  font-size: 13px;
}
.mr-checkout .mr-checkout-step[data-complete="true"],
.mr-checkout .mr-checkout-step[aria-current="step"] {
  border-color: var(--primary);
  color: var(--primary);
  font-weight: 600;
}
.mr-checkout .mr-checkout-summary img { flex-shrink: 0; }
.mr-checkout .mr-checkout-summary > div:first-child > div:last-child { flex-shrink: 0; }
.mr-checkout .mr-checkout-primary { width: 100%; justify-content: center; }
/* The loading spinner is an svg inside this button; margin-left:auto was
   pushing it (and its label) to the right edge instead of keeping them
   together in the middle. */
.mr-checkout .mr-checkout-primary svg { margin-left: 0; flex-shrink: 0; }
.mr-checkout .mr-checkout-totals,
.mr-checkout .mr-checkout-delivery {
  padding: 0 0 16px;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.mr-checkout .mr-checkout-totals { gap: 10px; }
.mr-checkout .mr-checkout-totals > span:last-child {
  align-items: center;
  padding-top: 12px;
  font-size: 16px;
}
.mr-checkout .mr-checkout-totals > span:last-child > span { font-size: 30px; }
.mr-checkout .mr-order-bump { border-radius: 6px; }
.mr-checkout .mr-order-bump input { flex-shrink: 0; }
.mr-checkout .mr-checkout-field input[aria-invalid="true"] {
  border-color: var(--destructive);
  outline: 1px solid var(--destructive);
}

@media (max-width: 767px) {
  .mr-checkout .wood-panel { height: 52px; }
  .mr-checkout-scroll > div { gap: 12px; padding-block: 14px 20px; }
  .mr-checkout-scroll > div > p:first-child { font-size: 13px; }
  .mr-checkout .mr-checkout-summary { padding-bottom: 10px; }
  .mr-checkout .mr-checkout-summary > div:last-child { margin-top: 6px; }
  .mr-checkout .mr-checkout-fields,
  .mr-checkout .mr-checkout-fields > .grid { gap: 10px; }
  .mr-checkout .mr-checkout-field { gap: 5px; }
  .mr-checkout .mr-checkout-field label { font-size: 13px; }
  /* 16px keeps iOS from zooming the page when a field is focused; the box
     itself is the smallest height that is still comfortable to tap. */
  .mr-checkout .mr-checkout-field input { min-height: 44px; padding-block: 8px; }
  .mr-checkout .mr-checkout-fields label:has(#mr-no-email) { min-height: 40px; }
  .mr-checkout-scroll button.font-display { min-height: 48px; font-size: 18px; padding: 10px 14px; }
  .mr-checkout-scroll button[aria-pressed] { min-height: 60px; }
  .mr-checkout .mr-checkout-step { font-size: 12px; padding-bottom: 8px; }
  .mr-checkout .mr-checkout-totals > span:last-child > span { font-size: 26px; }
  .mr-checkout footer { font-size: 11px; padding-top: 14px; }
}

@media (max-width: 767px) {
  /* Compact the original header without changing its legacy React markup.
     The hamburger keeps its 44px touch target, so the row height is set by
     the logo instead of shrinking the tap area. */
  .mr-store-with-buy header.wood-panel > div {
    padding-block: 3px;
  }
  .mr-store-with-buy header.wood-panel img {
    height: 44px;
    width: auto;
  }

  /* The product art is a 1000x1000 square, so on phones the photo box keeps the
     full content width and stays square: the art then fills the card from edge
     to edge with no empty side bars and nothing cropped. */
  .mr-store-with-buy #produto > div > div:nth-of-type(1) {
    max-width: none;
    margin-inline: 0;
  }
  .mr-store-with-buy #produto > div > div:nth-of-type(1) img {
    max-height: none;
  }

  /* Mobile-first typography: the legacy markup was authored for a desktop
     page, so on phones the headings, lead text and section gaps are scaled to
     what a mobile-only site would use. Everything is scoped to the storefront
     (.mr-store-with-buy), which does not contain the checkout, so the purchase
     form keeps its own sizes, and no text, price or button is rewritten. */
  .mr-store-with-buy h1 {
    font-size: 30px;
    line-height: 1.05;
  }
  .mr-store-with-buy h2 {
    font-size: 24px;
    line-height: 1.15;
  }
  .mr-store-with-buy h3 {
    font-size: 18px;
    line-height: 1.2;
  }
  .mr-store-with-buy p.text-lg {
    font-size: 16px;
    line-height: 24px;
  }
  .mr-store-with-buy section {
    padding-block: 26px;
  }

  /* Footer small print used 10px and 12px, which is hard to read on a phone.
     Only the size and the line spacing change; colours, wording and links stay
     exactly as they are. */
  .mr-store-with-buy footer [class*="text-[10px]"] {
    font-size: 11px;
    letter-spacing: 0.08em;
  }
  .mr-store-with-buy footer [class*="text-xs"] {
    font-size: 13px;
    line-height: 1.5;
  }


  .mr-store-with-buy {
    padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  }

  .mr-mobile-buy {
    position: fixed;
    inset: auto 0 0;
    z-index: 45;
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 78px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--border);
    background: var(--background);
    color: var(--foreground);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  }

  /* On mobile the card's own button is out of the way and the fixed bottom bar
     is the only "Comprar agora", so the shopper never sees two identical
     buttons. The bar keeps clicking the original button, so checkout, price,
     bump and tracking are untouched. */
  .mr-store-with-buy #mr-product-buy {
    display: none;
  }



  .mr-mobile-buy-price {
    flex: 0 0 auto;
    font-family: var(--font-display);
    font-size: 28px;
    line-height: 1;
    letter-spacing: 0;
    color: var(--primary);
    white-space: nowrap;
  }

  .mr-mobile-buy .mr-mobile-buy-button {
    flex: 1;
    min-width: 0;
    min-height: 54px;
    border-radius: 6px;
    font-family: var(--font-display);
    font-size: 22px;
    letter-spacing: 0;
    background: var(--primary);
    color: var(--primary-foreground);
  }

  /* Impulso de compra: brilho suave no botão, sem mexer o elemento de lugar
     (posição estável = toque nunca erra o alvo). */
  @keyframes mr-buy-glow {
    0%, 100% { box-shadow: 0 6px 16px -8px color-mix(in oklab, var(--primary) 55%, transparent); }
    50% { box-shadow: 0 8px 24px -4px color-mix(in oklab, var(--primary) 85%, transparent); }
  }
  .mr-mobile-buy .mr-mobile-buy-button { animation: mr-buy-glow 1.8s ease-in-out infinite; }
  .mr-mobile-buy-price { animation: mr-buy-glow 1.8s ease-in-out infinite; }

  @media (prefers-reduced-motion: reduce) {
    .mr-mobile-buy .mr-mobile-buy-button, .mr-mobile-buy-price { animation: none; }
  }
}
/* The menu's "Atendimento" row is a plain button while the other rows are
   headings that already use the display font; this keeps them identical. */
.mr-menu-atendimento {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-size: 16px;
  /* Same row height as the heading rows next to it (min-h-14 is not part of
     the compiled stylesheet this page loads). */
  min-height: 56px;
}