/* HoneyKiss, ajustes por breakpoint global.
   Media query de um componente só fica junto do componente. Aqui ficam apenas
   as que reorganizam várias áreas ao mesmo tempo.
   Carregado por ÚLTIMO para preservar a ordem da cascata original. */


/* ============================================================ RESPONSIVO */
/* .offer__grid e .buybox NÃO ficam mais aqui: a página de produto trouxe os
   dois para css/product.css, com ponto de quebra próprio em 900px. Como este
   arquivo carrega por último, as regras daqui venciam as de lá e a página de
   produto caía em coluna única já em 1100px. */
@media (max-width:1100px){
  .pgrid{grid-template-columns:repeat(2,1fr)}
  .props__grid{grid-template-columns:repeat(2,1fr)}
  .footer__top{grid-template-columns:1fr 1fr}
  .footer__brand{grid-column:1 / -1}
}
@media (max-width:860px){
  .header__inner{min-height:70px}
  .brand__logo{height:34px}
  .hero{height:88vh}
  .hero__cta{bottom:52px}
  /* Empilhado: o texto vem primeiro e a imagem ganha altura própria,
     já que não há mais coluna irmã para acompanhar. */
  .split__card{grid-template-columns:1fr;min-height:0}
  .split__media .frame{aspect-ratio:16/10}
  /* O trilho usa grid-auto-columns, não grid-template-columns: aqui só
     estreitamos o cartão para caber um e meio na tela, sinalizando que
     há mais para o lado. As setas passam a ter função de verdade. */
  /* Largura firme, não minmax(0,78%): com mínimo zero as colunas encolhem
     para caber no contêiner rolável em vez de transbordar, e aí não sobra
     nada para as setas rolarem. */
  .reviews{grid-auto-columns:78%}
  .revs__head{flex-direction:column;align-items:flex-start;gap:1.25rem}
  .revs h2{max-width:none}
  .revs__arrow{width:52px;height:52px}
}
/* Abaixo de 768px as setas do carrossel descem para uma linha centralizada,
   no mesmo ponto de quebra usado pela referência */
@media (max-width:767px){
  .fgal__arrow{display:none}
  .fgal__arrows-mobile{display:flex}
}
@media (max-width:420px){
  .icon-btn--account{display:none}
}
@media (max-width:560px){
  :root{--fs-micro:13px;--fs-small:15px}
  .pgrid{gap:1rem}
  .footer__top{grid-template-columns:1fr}
  .footer__bottom{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
  .marquee__track{animation:none;transform:none}
}