/* BabyLar — camada responsiva mobile/tablet (escrita à mão, complementa app.css) */

.bl-mobile-bar,
.bl-mobile-search,
.bl-drawer,
.bl-drawer-overlay { display: none; }

/* imagens nunca estouram a tela */
img { max-width: 100%; }

@media (max-width: 1023px) {
  /* ---- oculta o cabeçalho/menu desktop ---- */
  .bl-desktop-head,
  .bl-desktop-nav { display: none !important; }

  /* ---- barra promocional ---- */
  .bl-promo { font-size: 12px; padding: 10px 14px; line-height: 1.3; }

  /* ---- barra mobile: menu / logo / carrinho ---- */
  .bl-mobile-bar {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 12px 14px 4px;
  }
  .bl-burger {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex-shrink: 0;
    color: var(--primary, #14806a); background: none; border: 0;
  }
  .bl-mobile-logo {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    min-width: 0; text-decoration: none;
  }
  .bl-mobile-logo span.bl-word {
    font-size: 26px; font-weight: 700; font-style: italic; letter-spacing: -.02em;
    color: var(--primary, #14806a); white-space: nowrap;
  }
  .bl-mobile-cart {
    display: flex; align-items: center; gap: 6px; flex-shrink: 0;
    color: var(--primary, #14806a); text-decoration: none;
  }
  .bl-mobile-cart .bl-count {
    display: flex; align-items: center; justify-content: center;
    height: 26px; min-width: 26px; padding: 0 6px; border-radius: 999px;
    background: #ececec; color: #333; font-size: 12px;
  }

  /* ---- busca mobile em linha própria ---- */
  .bl-mobile-search { display: block; position: relative; padding: 8px 14px 14px; }
  .bl-mobile-search input {
    width: 100%; height: 48px; border: 0; border-radius: 4px;
    background: #ececec; padding: 0 46px 0 16px; font-size: 14px; color: #333;
  }
  .bl-mobile-search input:focus { outline: 2px solid var(--ring, #14806a); }
  .bl-mobile-search button {
    position: absolute; right: 26px; top: 50%; transform: translateY(-50%);
    background: none; border: 0; color: #666;
  }

  /* ---- gaveta lateral de categorias ---- */
  .bl-drawer-overlay {
    display: block; position: fixed; inset: 0; z-index: 60;
    width: 100%; background: rgba(0, 0, 0, .45); opacity: 0; pointer-events: none;
    transition: opacity .25s ease;
  }
  .bl-drawer {
    display: flex; flex-direction: column; position: fixed; z-index: 61;
    top: 0; left: 0; bottom: 0; width: min(86vw, 340px);
    background: #fff; box-shadow: 0 0 30px rgba(0, 0, 0, .2);
    transform: translateX(-100%); transition: transform .28s ease;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  body.bl-drawer-open { overflow: hidden; }
  body.bl-drawer-open .bl-drawer-overlay { opacity: 1; pointer-events: auto; }
  body.bl-drawer-open .bl-drawer { transform: translateX(0); }

  .bl-drawer-top {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px; border-bottom: 1px solid #e6e6e6;
  }
  .bl-drawer-top strong { font-size: 14px; letter-spacing: .06em; color: var(--primary, #14806a); }
  .bl-drawer-close { background: none; border: 0; color: #444; padding: 6px; }
  .bl-drawer-user {
    display: flex; align-items: center; gap: 10px; padding: 14px 16px;
    border-bottom: 1px solid #e6e6e6; color: var(--primary, #14806a);
    font-size: 14px; text-decoration: none;
  }
  .bl-drawer-group { border-bottom: 1px solid #eee; }
  .bl-drawer-group > button {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; padding: 15px 16px; background: none; border: 0;
    font-size: 14px; letter-spacing: .04em; color: #222; text-align: left;
  }
  .bl-drawer-group > button svg { transition: transform .2s ease; flex-shrink: 0; }
  .bl-drawer-group.is-open > button { color: var(--primary, #14806a); }
  .bl-drawer-group.is-open > button svg { transform: rotate(180deg); }
  .bl-drawer-sub { display: none; padding: 0 16px 12px; background: #fafafa; }
  .bl-drawer-group.is-open .bl-drawer-sub { display: block; }
  .bl-drawer-sub a {
    display: block; padding: 10px 6px; font-size: 14px; color: #444; text-decoration: none;
  }
  .bl-drawer-sub a:active { color: var(--primary, #14806a); }
  .bl-drawer-foot { margin-top: auto; padding: 16px; }
  .bl-drawer-foot a {
    display: flex; align-items: center; justify-content: center; height: 44px;
    background: var(--primary, #14806a); color: #fff; font-size: 13px;
    font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    text-decoration: none; border-radius: 4px;
  }

  /* ---- banner principal ---- */
  .bl-hero img { width: 100%; height: auto; }
  .bl-hero [data-banner-dot] { box-shadow: 0 0 0 2px rgba(255,255,255,.6); }
  .bl-hero [data-banner-prev],
  .bl-hero [data-banner-next] { padding: 6px; }
  .bl-hero [data-banner-prev] svg,
  .bl-hero [data-banner-next] svg { width: 24px; height: 24px; }

  /* ---- formulários e tabelas não estouram a tela ---- */
  input, select, textarea { max-width: 100% !important; }
  button, a[class*="w-"] { max-width: 100%; white-space: normal; text-align: center; }
  input, select, textarea { min-width: 0 !important; }
  form[data-newsletter] { flex-direction: column; width: 100%; }
  form[data-newsletter] input, form[data-newsletter] button { width: 100%; justify-content: center; }
  table { display: block; width: 100%; overflow-x: auto; }
  main, footer { overflow-x: hidden; }

  /* ---- tabelas/grades largas não quebram a tela ---- */
  .bl-hero, body { overflow-x: hidden; }
}

@media (max-width: 480px) {
  .bl-mobile-logo span.bl-word { font-size: 22px; }
}