/*
 * Cabeçalho responsivo do ABC Pedagógico.
 *
 * Usa os textos reais presentes no HTML. Não depende de pseudo-elementos,
 * evitando botões vazios quando CSS antigo, minificação ou cache interfere.
 */

.abc-site-header .abc-header-action--products {
  background: var(--abc-mobile-files-background, #ff3b9d) !important;
  border-color: var(--abc-mobile-files-background, #ff3b9d) !important;
  color: #fff !important;
}

.abc-site-header .abc-header-action--cart {
  background: var(--abc-mobile-cart-background, #2f8cff) !important;
  border-color: var(--abc-mobile-cart-background, #2f8cff) !important;
  color: #fff !important;
}

.abc-site-header .abc-header-action--products svg,
.abc-site-header .abc-header-action--products .abc-header-action__label,
.abc-site-header .abc-header-action--cart svg,
.abc-site-header .abc-header-action--cart > span:not(.abc-cart-count) {
  color: #fff !important;
}

.abc-site-header .abc-header-action__label--mobile {
  display: none;
}

@media (max-width: 782px) {
  .abc-site-header .abc-header-main {
    display: grid !important;
    grid-template-columns: minmax(96px, 1fr) auto !important;
    grid-template-areas:
      "branding actions"
      "search search"
      "menu menu" !important;
    align-items: center !important;
    gap: 10px 8px !important;
    width: min(100% - 22px, 1180px) !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  .abc-site-header .abc-branding {
    grid-area: branding !important;
    min-width: 0 !important;
  }

  .abc-site-header .abc-branding img {
    display: block !important;
    width: auto !important;
    max-width: min(var(--abc-mobile-logo-width, 128px), 34vw) !important;
    max-height: 64px !important;
  }

  .abc-site-header .abc-header-actions {
    grid-area: actions !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: auto !important;
    min-width: 0 !important;
    gap: 8px !important;
  }

  .abc-site-header .abc-header-action--products {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 min(var(--abc-mobile-files-width, 142px), 38vw) !important;
    width: min(var(--abc-mobile-files-width, 142px), 38vw) !important;
    min-width: min(var(--abc-mobile-files-width, 142px), 38vw) !important;
    height: var(--abc-mobile-action-height, 48px) !important;
    min-height: var(--abc-mobile-action-height, 48px) !important;
    padding: 0 10px !important;
    border-radius: 16px !important;
    overflow: visible !important;
    background: var(--abc-mobile-files-background, #ff3b9d) !important;
    border-color: var(--abc-mobile-files-background, #ff3b9d) !important;
    color: #fff !important;
    font-size: 14px !important;
    line-height: 1 !important;
    text-indent: 0 !important;
    white-space: nowrap !important;
  }

  .abc-site-header .abc-header-action--products svg {
    display: none !important;
  }

  .abc-site-header .abc-header-action--products .abc-header-action__label--desktop {
    display: none !important;
  }

  .abc-site-header .abc-header-action--products .abc-header-action__label--mobile {
    position: static !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    transform: none !important;
    color: #fff !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-indent: 0 !important;
    white-space: nowrap !important;
  }

  .abc-site-header .abc-header-action--products::before,
  .abc-site-header .abc-header-action--products::after {
    content: none !important;
    display: none !important;
  }

  .abc-site-header .abc-header-action--cart {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 var(--abc-mobile-action-height, 48px) !important;
    width: var(--abc-mobile-action-height, 48px) !important;
    min-width: var(--abc-mobile-action-height, 48px) !important;
    height: var(--abc-mobile-action-height, 48px) !important;
    min-height: var(--abc-mobile-action-height, 48px) !important;
    padding: 0 !important;
    border-radius: 999px !important;
    background: var(--abc-mobile-cart-background, #2f8cff) !important;
    border-color: var(--abc-mobile-cart-background, #2f8cff) !important;
  }

  .abc-site-header .abc-header-action--cart > span:not(.abc-cart-count) {
    display: none !important;
  }

  .abc-site-header .abc-search {
    grid-area: search !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .abc-site-header .abc-menu-toggle {
    grid-area: menu !important;
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 16px !important;
    border-radius: 14px !important;
    background: var(--abc-mobile-menu-background, #ffde21) !important;
    color: var(--abc-mobile-menu-text, #223047) !important;
    font-size: 16px !important;
    line-height: 1 !important;
  }

  .abc-site-header .abc-menu-toggle .abc-menu-toggle__label {
    position: static !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    color: var(--abc-mobile-menu-text, #223047) !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .abc-site-header .abc-menu-toggle::before,
  .abc-site-header .abc-menu-toggle::after {
    content: none !important;
    display: none !important;
  }

  .abc-site-header .abc-menu-toggle svg {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    margin-right: 8px !important;
    color: var(--abc-mobile-menu-text, #223047) !important;
  }
}

@media (max-width: 390px) {
  .abc-site-header .abc-header-action--products,
  .abc-site-header .abc-header-action--products .abc-header-action__label--mobile {
    font-size: 13px !important;
  }
}