/* ===== TG15 mobile layout fixes ===== */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  position: relative;
}

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

img, video, canvas, svg {
  max-width: 100% !important;
  height: auto;
}

@media (max-width: 767px) {
  .container-x {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Headings */
  .heading-display {
    font-size: clamp(1.55rem, 7.2vw, 2.1rem) !important;
    line-height: 1.18 !important;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  h1.heading-display {
    font-size: clamp(1.7rem, 8vw, 2.25rem) !important;
  }

  /* Header */
  header.sticky {
    padding-top: env(safe-area-inset-top, 0px);
  }

  header nav {
    display: none !important;
  }

  header .container-x {
    min-height: 56px;
    gap: 8px !important;
  }

  header a.rounded-full,
  header .rounded-full {
    white-space: nowrap;
    font-size: 12px !important;
    padding: 8px 12px !important;
    max-width: 46vw;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Generic grids: force single column */
  main .grid {
    grid-template-columns: 1fr !important;
  }

  /* Keep small internal 3-col tables readable */
  #dosagem .grid.grid-cols-3,
  #comprar .grid.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  /* Product / buy */
  #produto > .grid,
  #produto .grid.gap-10 {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }

  #comprar {
    gap: 0.85rem !important;
  }

  #comprar .rounded-2xl {
    padding: 12px !important;
  }

  #comprar .font-price {
    font-size: clamp(1.6rem, 8vw, 2rem) !important;
    line-height: 1.1 !important;
  }

  /* comparative prices as stacked rows */
  #comprar .card-premium .grid.grid-cols-3 {
    grid-template-columns: 1fr !important;
    gap: 0.65rem !important;
  }

  #comprar .card-premium .grid.grid-cols-3 > div {
    min-width: 0;
    display: flex !important;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
  }

  #comprar .card-premium .grid.grid-cols-3 > div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }

  /* Dosing: full width, no crushed side-by-side */
  #dosagem .mt-10.grid,
  #dosagem .grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* On mobile show only the HTML dosing table; hide the image duplicate */
  #dosagem button[aria-label="Ampliar tabela oficial"],
  #dosagem button[aria-label*="tabela oficial"] {
    display: none !important;
  }

  #dosagem .card-premium {
    width: 100% !important;
    max-width: 100% !important;
  }

  #dosagem .card-premium .grid.grid-cols-3 {
    grid-template-columns: 1.1fr 1.4fr 0.9fr !important;
    gap: 0.4rem !important;
  }

  #dosagem .card-premium .grid.grid-cols-3 > div {
    min-width: 0 !important;
    overflow: hidden;
  }

  #dosagem .card-premium .leading-tight {
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal !important;
  }

  #dosagem .card-premium .text-sm,
  #dosagem .card-premium .text-xs,
  #dosagem .card-premium .font-bold {
    line-height: 1.2 !important;
  }

  /* Videos / results / famous / reviews / benefits already forced via main .grid */

  /* Footer spacing above home indicator */
  footer {
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
  }

  main {
    padding-bottom: 12px;
  }

  /* Avoid absolute blur orbs causing scroll width */
  .card-premium {
    max-width: 100% !important;
    overflow: hidden;
  }
}

@media (max-width: 380px) {
  .container-x {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}