/* Shared mobile header: compact controls and an expandable navigation panel. */
@media (max-width: 980px) {
  body .site-header:is(.home-header, .cariama-identity-header, .site-header) {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(60px, 1fr) auto auto auto !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 84px !important;
    padding: 10px 16px !important;
    overflow: visible !important;
    border-top: 2px solid #d5ac63 !important;
    border-bottom: 1px solid rgba(243, 215, 167, .24) !important;
    background: #005535 url("../artes/bg-header-verde-preto.png") center / cover no-repeat !important;
    color: #f3d7a7 !important;
    box-shadow: 0 6px 24px rgba(0, 49, 29, .10) !important;
    z-index: 100 !important;
  }

  body .site-header::before {
    position: absolute;
    inset: 0 0 auto;
    height: 82px;
    z-index: 0;
    /* Keep the header wallpaper stable while the menu opens. */
    background: url("../artes/bg-header-verde-preto.png") center / cover no-repeat !important;
    opacity: .3;
    mask-image: linear-gradient(to bottom, #000 65%, transparent);
    pointer-events: none;
    content: "";
  }

  body .site-header .brand {
    grid-column: 1;
    grid-row: 1;
    justify-self: start !important;
    width: 60px !important;
    height: 60px !important;
    margin: 0 !important;
  }

  body .site-header .brand img {
    width: 60px !important;
    height: 60px !important;
    max-height: none !important;
    object-fit: contain;
  }

  body .site-header .brand span { display: none !important; }
  body .site-header .home-header-actions,
  body .site-header:is(.home-header, .cariama-identity-header).is-open .home-header-actions {
    display: contents !important;
    position: static !important;
  }
  body .site-header .home-header-actions > .header-icon-link:not(.header-cart-button) { display: none !important; }

  body .site-header .cariama-language-switcher {
    position: static !important;
    grid-column: 2;
    grid-row: 1;
    display: flex !important;
    align-items: center;
    gap: 0 !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 24px;
    background: rgba(255, 247, 231, .06);
    transform: none !important;
  }

  body .site-header .cariama-language-option {
    display: grid !important;
    place-items: center;
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
    border: 0 !important;
    border-radius: 50%;
    background: transparent;
    box-shadow: none !important;
    transform: none !important;
  }

  body .site-header .cariama-language-option img {
    width: 20px !important;
    height: 20px !important;
  }

  body .site-header .cariama-language-option.is-active { background: rgba(243, 215, 167, .13); }
  body .site-header .cariama-language-option::after { display: none !important; }

  body .site-header .header-cart-button,
  body .site-header .menu-toggle {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    grid-row: 1;
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    color: #f3d7a7 !important;
  }

  body .site-header .header-cart-button { grid-column: 3; }
  body .site-header .header-cart-button > img { width: 22px !important; height: 22px !important; }
  body .site-header .header-cart-button > span {
    top: 1px !important;
    right: 0 !important;
    display: grid;
    place-items: center;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px;
    padding: 0;
    border: 2px solid #005535;
    border-radius: 50%;
    font: 600 9px/1 Inter, sans-serif;
  }

  body .site-header .menu-toggle {
    grid-column: 4;
    flex-direction: column;
    gap: 5px;
    border: 1px solid rgba(243, 215, 167, .22) !important;
    border-radius: 12px !important;
    background: rgba(255, 247, 231, .08) !important;
    cursor: pointer;
  }

  body .site-header .menu-toggle span {
    width: 18px;
    height: 2px;
    margin: 0 !important;
    border-radius: 2px;
    background: #f3d7a7 !important;
    transition: transform 180ms ease, opacity 180ms ease;
  }

  body .site-header.is-open .menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body .site-header.is-open .menu-toggle span:nth-child(2) { opacity: 0; }
  body .site-header.is-open .menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  body .site-header .site-nav {
    position: static !important;
    display: none !important;
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-self: stretch !important;
    gap: 4px !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    max-height: calc(100dvh - 108px);
    overflow-y: auto !important;
    margin: 2px 0 !important;
    padding: 8px !important;
    border: 1px solid rgba(243, 215, 167, .3) !important;
    border-radius: 12px !important;
    background: #faf5e9 !important;
    box-shadow: 0 8px 24px rgba(0, 35, 21, .12) !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  body .site-header.is-open .site-nav {
    display: grid !important;
    animation: cariama-mobile-dropdown 200ms ease-out both;
  }

  body .site-header .site-nav a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 48px !important;
    padding: 12px 16px !important;
    border: 0 !important;
    border-radius: 8px;
    background: transparent !important;
    color: #005535 !important;
    font-family: Inter, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: .01em !important;
    line-height: 1.4 !important;
    text-transform: none !important;
    text-decoration: none !important;
  }

  body .site-header .site-nav a[aria-current="page"],
  body .site-header .site-nav a:hover { background: #ececde !important; }
  body .site-header .site-nav a::after {
    position: static !important;
    display: block !important;
    width: 7px !important;
    height: 7px !important;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    background: none !important;
    transform: rotate(45deg) !important;
    content: "";
    opacity: .55;
  }

  body .site-header :is(a, button):focus-visible {
    outline: 2px solid #ef8052;
    outline-offset: 3px;
  }
}

@media (max-width: 360px) {
  body .site-header:is(.home-header, .cariama-identity-header, .site-header) { padding: 10px 12px !important; gap: 4px !important; }
}

@keyframes cariama-mobile-dropdown {
  from { opacity: 0; translate: 0 -6px; }
  to { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  body .site-header.is-open .site-nav { animation: none !important; }
  body .site-header .menu-toggle span { transition: none; }
}

/* O atalho de conta é um item da segunda linha da grade, e nunca uma
   sobreposição da linha de idiomas/carrinho.  Este bloco fica neste arquivo
   (o último CSS carregado no celular) para não ser substituído por estilos
   antigos do cabeçalho. */
@media (max-width: 620px) {
  body .site-header:is(.home-header, .cariama-identity-header, .site-header) {
    grid-template-columns: minmax(60px, 1fr) 38px 44px 44px !important;
    grid-template-rows: 60px 42px !important;
    column-gap: 4px !important;
    row-gap: 12px !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 12px 10px 16px !important;
  }

  /* Evita uma área vazia grande abaixo do botão, sem alterar as duas linhas. */
  body .home-header.site-header,
  body .home-header.site-header.is-scrolled,
  body .home-header.site-header:not(.is-open) {
    height: 172px !important;
    min-height: 172px !important;
  }

  body .site-header .home-header-actions,
  body .site-header:is(.home-header, .cariama-identity-header).is-open .home-header-actions {
    display: contents !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  body .site-header .header-account-button {
    position: static !important;
    display: inline-flex !important;
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    align-self: center !important;
    justify-self: center !important;
    width: 112px !important;
    min-width: 112px !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    font-size: 13px !important;
    transform: none !important;
  }

  /* Instagram e carrinho seguem juntos no lado direito. */
  body .site-header .home-header-actions > .header-icon-link:not(.header-cart-button) {
    display: flex !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body .site-header .cariama-language-switcher {
    position: absolute !important;
    top: 20px !important;
    left: 50% !important;
    grid-column: auto !important;
    grid-row: auto !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    z-index: 2;
  }

  body .site-header .cariama-language-option {
    width: 38px !important;
    height: 38px !important;
    flex-basis: 38px !important;
  }

  body .site-header .header-cart-button { grid-column: 3 !important; }
  body .site-header .menu-toggle { grid-column: 4 !important; }
}

/* No tablet há largura para todos os controles na mesma barra.  O botão não
   deve ocupar uma linha inteira ao sair do layout de celular. */
@media (min-width: 621px) and (max-width: 980px) {
  body .site-header:is(.home-header, .cariama-identity-header, .site-header) {
    grid-template-columns: minmax(120px, 1fr) 38px 44px 44px !important;
    grid-template-rows: 60px 42px !important;
    min-height: 0 !important;
    padding: 12px 20px 16px !important;
  }

  body .site-header .header-account-button {
    position: static !important;
    display: inline-flex !important;
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    align-self: center !important;
    justify-self: center !important;
    width: 112px !important;
    min-width: 112px !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 16px !important;
    transform: none !important;
  }

  body .site-header .home-header-actions > .header-icon-link:not(.header-cart-button) {
    display: flex !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  body .site-header .cariama-language-switcher {
    position: absolute !important;
    top: 20px !important;
    left: 50% !important;
    grid-column: auto !important;
    grid-row: auto !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    z-index: 2;
  }
  body .site-header .header-cart-button { grid-column: 3 !important; }
  body .site-header .menu-toggle { grid-column: 4 !important; }
}

/* O painel de navegação aberto sempre fica acima dos atalhos do cabeçalho.
   Sem isso, as bandeiras atravessam os links do menu em telas móveis. */
@media (max-width: 980px) {
  body .site-header.is-open .site-nav {
    position: relative !important;
    z-index: 20 !important;
  }

  body .site-header.is-open .cariama-language-switcher {
    z-index: 1 !important;
  }
}

/* Painel do menu: compacto e centrado, mas ainda flexível em qualquer tela. */
@media (max-width: 980px) {
  body .site-header .site-nav {
    width: min(420px, calc(100% - 32px)) !important;
    max-width: min(420px, calc(100% - 32px)) !important;
    justify-self: center !important;
    align-self: start !important;
    margin: 8px auto 0 !important;
    padding: 6px !important;
  }

  body .site-header .site-nav a {
    min-height: 42px !important;
    padding: 9px 14px !important;
  }
}

/* Mobile containment: the header must be an opaque, independent layer.
   This prevents a hero frame or a wide editorial block from leaking into it. */
@media (max-width: 980px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  body .site-header:is(.home-header, .cariama-identity-header, .site-header) {
    box-sizing: border-box !important;
    clear: both;
    isolation: isolate;
    margin: 0 !important;
    z-index: 1000 !important;
  }

  body .site-header:not(.is-open) {
    overflow: hidden !important;
  }

  body .site-header.is-open {
    overflow: visible !important;
    /* Repeat the full-width wallpaper, rather than cropping its leaf borders. */
    background-size: 100% auto !important;
    background-position: center !important;
    background-repeat: repeat-y !important;
  }

  /* One open-menu treatment for every page: no page-specific gradient or
     solid fallback may replace the botanical wallpaper while it expands. */
  body .site-header.is-open,
  body .home-header.site-header.is-open,
  body .published-home-header.site-header.is-open,
  body .cariama-identity-header.site-header.is-open{
    background-color: #005535 !important;
    background-image: url("../artes/bg-header-verde-preto.png") !important;
    background-position: center !important;
    background-size: 100% auto !important;
    background-repeat: repeat-y !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  body .site-header > :not(.site-nav),
  body .site-header.is-open .site-nav {
    z-index: 1;
  }

  /* One stable wallpaper behind the mobile controls; no translucent layer. */
  body .site-header::before {
    display: none !important;
    background-image: none !important;
  }

  body .site-header:is(.home-header, .cariama-identity-header, .site-header) {
    min-height: 84px !important;
    border-bottom: 0 !important;
    background: #005535 url("../artes/bg-header-verde-preto.png") center / 100% auto repeat-y !important;
    box-shadow: none !important;
  }

  /* Brand/About must not reintroduce its old translucent white gradient. */
  body .cariama-identity-header.site-header,
  body .cariama-identity-header.site-header:not(.is-scrolled):not(.is-open),
  body .cariama-identity-header.site-header.is-scrolled{
    background: #005535 url("../artes/bg-header-verde-preto.png") center / cover no-repeat !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* The compact bar must keep the same full-width leaf wallpaper on every
     mobile template, including Store and the institutional pages. */
  body .site-header.is-scrolled,
  body .home-header.site-header.is-scrolled,
  body .published-home-header.site-header.is-scrolled,
  body .cariama-identity-header.site-header.is-scrolled,
  body .store-header.site-header.is-scrolled{
    background-color: #005535 !important;
    background-image: url("../artes/bg-header-verde-preto.png") !important;
    background-position: center !important;
    background-size: 100% auto !important;
    background-repeat: no-repeat !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  body.home .published-hero,
  body.front-page .published-hero,
  body.page-template-front-page .published-hero {
    position: relative;
    z-index: 0;
    clear: both;
    width: 100%;
    max-width: 100%;
    margin-top: 0 !important;
  }

  body.cariama-view-brand main,
  body.cariama-view-brand .cariama-about-hero,
  body.cariama-view-brand .cariama-home-origin-journey {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }
}