/* =========================================================
   IO PARFUM — CHECK-UP GERAL / ESTABILIDADE v3.9.0
   Desktop + Tablet + Mobile
   ========================================================= */

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

html,
body{
  width:100%;
  max-width:100%;
}

body{
  overflow-x:hidden !important;
}

main,
.site-header,
.site-footer,
.pa-container,
.woocommerce,
.woocommerce-page{
  min-width:0;
}

img,
video,
iframe{
  max-width:100%;
  height:auto;
}

button,
input,
select,
textarea{
  max-width:100%;
}

/* Badge sempre existe para o AJAX encontrar, mas zero fica invisível. */
.site-header .pa-cart-count.is-empty{
  display:none !important;
}

/* ---------- Busca ---------- */
.pa-search{
  min-width:0 !important;
}

.pa-live-search{
  box-sizing:border-box !important;
  width:100% !important;
  max-width:100% !important;
  max-height:min(430px,70dvh) !important;
  overflow-y:auto !important;
  overscroll-behavior:contain;
}

/* ---------- Menu desktop ---------- */
@media(min-width:1025px){
  .site-header .pa-mobile-drawer .pa-menu{
    flex-wrap:nowrap !important;
    gap:clamp(18px,2.1vw,30px) !important;
  }

  .site-header .pa-mobile-drawer .pa-menu > li > a{
    white-space:nowrap !important;
  }

  .site-header .pa-account-dropdown{
    max-width:min(310px,calc(100vw - 32px)) !important;
  }
}

/* ---------- Tablet 769–1024 ----------
   Corrige a faixa onde o JS já usava drawer mobile,
   mas o header ainda podia se comportar como desktop. */
@media(min-width:769px) and (max-width:1024px){
  .site-header .pa-header-main{
    display:grid !important;
    grid-template-columns:46px minmax(0,1fr) auto !important;
    grid-template-rows:auto 44px !important;
    column-gap:12px !important;
    row-gap:9px !important;
    align-items:center !important;
    min-height:0 !important;
    padding-top:10px !important;
    padding-bottom:10px !important;
  }

  .site-header .pa-logo{
    grid-column:1 / 3 !important;
    grid-row:1 !important;
    justify-self:start !important;
  }

  .site-header .pa-logo .custom-logo{
    max-width:165px !important;
    max-height:50px !important;
  }

  .site-header .pa-header-actions{
    grid-column:3 !important;
    grid-row:1 !important;
    justify-self:end !important;
    align-self:center !important;
  }

  .site-header .pa-header-mobile-toggle{
    grid-column:1 !important;
    grid-row:2 !important;
    width:44px !important;
    min-width:44px !important;
    height:44px !important;
    min-height:44px !important;
    padding:0 !important;
  }

  .site-header .pa-header-mobile-toggle .pa-mobile-toggle__label{
    display:none !important;
  }

  .site-header .pa-search{
    grid-column:2 / 4 !important;
    grid-row:2 !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
  }

  .site-header .pa-search input[type="search"]{
    width:100% !important;
    height:44px !important;
  }

  .site-header .pa-nav-inner{
    min-height:0 !important;
  }

  .pa-account-dropdown{
    max-width:min(300px,calc(100vw - 32px)) !important;
  }
}

/* ---------- Mobile ---------- */
@media(max-width:768px){
  body{
    min-width:320px;
  }

  .pa-container{
    min-width:0 !important;
  }

  /* Header */
  .site-header .pa-header-main{
    width:calc(100% - 24px) !important;
    max-width:none !important;
  }

  .site-header .pa-search input[type="search"]{
    min-width:0 !important;
  }

  .site-header .pa-account-dropdown{
    right:12px !important;
    left:auto !important;
    width:min(278px,calc(100vw - 24px)) !important;
    max-width:calc(100vw - 24px) !important;
  }

  /* Tap targets */
  .pa-mobile-drawer a,
  .woocommerce button.button,
  .woocommerce a.button,
  .woocommerce input.button{
    min-height:42px;
  }

  /* Inputs de checkout/conta: 16px evita zoom automático no iPhone. */
  .woocommerce-checkout input:not([type="checkbox"]):not([type="radio"]),
  .woocommerce-checkout select,
  .woocommerce-checkout textarea,
  .woocommerce-account input:not([type="checkbox"]):not([type="radio"]),
  .woocommerce-account select,
  .woocommerce-account textarea{
    font-size:16px !important;
  }

  /* Home / carrosséis */
  .pa-hero-wrap,
  .pa-hero-carousel,
  .pa-category-carousel,
  .pa-category-carousel__viewport{
    min-width:0 !important;
  }

  .pa-hero-carousel__image{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
  }

  /* Produtos */
  .woocommerce ul.products{
    width:100% !important;
  }

  .woocommerce ul.products li.product{
    min-width:0 !important;
    overflow:hidden;
  }

  .woocommerce ul.products li.product .woocommerce-loop-product__title{
    overflow-wrap:anywhere;
  }

  /* Produto único */
  .single-product div.product.type-product{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  .single-product div.product.type-product .images,
  .single-product div.product.type-product .summary,
  .single-product .pa-rebuild-gallery,
  .single-product .pa-rebuild-gallery__main{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  .single-product .pa-rebuild-gallery__main img{
    max-width:100% !important;
    height:auto !important;
    object-fit:contain !important;
  }

  /* Carrinho e checkout */
  .woocommerce-cart-form,
  .woocommerce-checkout,
  .woocommerce-checkout #customer_details,
  .woocommerce-checkout #order_review{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  .woocommerce-checkout .col2-set,
  .woocommerce-checkout .col2-set .col-1,
  .woocommerce-checkout .col2-set .col-2{
    width:100% !important;
    max-width:100% !important;
    float:none !important;
  }

  .woocommerce-checkout .form-row-first,
  .woocommerce-checkout .form-row-last,
  .woocommerce-account .form-row-first,
  .woocommerce-account .form-row-last{
    width:100% !important;
    float:none !important;
  }

  .woocommerce table.shop_table{
    max-width:100% !important;
  }

  /* Minha conta */
  .woocommerce-account .woocommerce-MyAccount-content{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  /* Rodapé */
  .site-footer .pa-footer-grid{
    min-width:0 !important;
  }

  /* WhatsApp */
  .pa-whatsapp-widget .pa-whatsapp-chat{
    max-width:calc(100vw - 24px) !important;
  }
}

@media(max-width:640px){
  .site-footer .pa-footer-grid{
    grid-template-columns:1fr !important;
    gap:26px !important;
  }

  .pa-newsletter{
    width:100% !important;
  }

  .pa-newsletter input{
    min-width:0 !important;
  }
}

@media(max-width:390px){
  .site-header .pa-header-main{
    width:calc(100% - 18px) !important;
  }

  .site-header .pa-account-dropdown{
    right:9px !important;
    width:calc(100vw - 18px) !important;
    max-width:calc(100vw - 18px) !important;
  }
}

/* ---------- Movimento reduzido ---------- */
@media(prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto !important;
  }

  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}


/* =========================================================
   MOBILE/TABLET — REMOVE FAIXA VAZIA ENTRE HEADER E HERO v3.9.2
   O menu agora é off-canvas; a barra .pa-nav não precisa ocupar altura.
   ========================================================= */
@media(max-width:1024px){
  .site-header .pa-nav{
    position:relative !important;
    width:100% !important;
    height:0 !important;
    min-height:0 !important;
    max-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    overflow:visible !important;
  }

  .site-header .pa-nav-inner{
    width:0 !important;
    max-width:0 !important;
    height:0 !important;
    min-height:0 !important;
    max-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    overflow:visible !important;
  }

  /* Drawer e backdrop continuam funcionando normalmente por serem fixed. */
  .site-header .pa-mobile-nav-backdrop,
  .site-header .pa-mobile-drawer{
    margin:0 !important;
  }

  /* Pequeno respiro visual entre header e banner, sem faixa vazia. */
  body.home .pa-hero-wrap{
    margin-top:10px !important;
  }
}

@media(max-width:768px){
  body.home .pa-hero-wrap{
    margin-top:8px !important;
  }
}


/* =========================================================
   MOBILE/TABLET — ELIMINA DEFINITIVAMENTE A FAIXA ENTRE HEADER E HERO v3.9.3
   ========================================================= */
@media(max-width:1024px){
  /* Nav/dentro do nav deixam de criar uma caixa no fluxo.
     Drawer e backdrop continuam fixed e funcionais. */
  .site-header .pa-nav,
  .site-header .pa-nav-inner{
    display:contents !important;
    width:auto !important;
    max-width:none !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
  }

  .site-header{
    margin-bottom:0 !important;
    padding-bottom:0 !important;
  }

  #content{
    margin-top:0 !important;
    padding-top:0 !important;
  }

  body.home #content > .pa-hero-wrap:first-child{
    margin-top:10px !important;
  }
}

@media(max-width:768px){
  body.home #content > .pa-hero-wrap:first-child{
    margin-top:8px !important;
  }
}


/* =========================================================
   IPHONE/SAFARI — NAV MOBILE FORA DO FLUXO v3.9.4
   Remove qualquer espaço residual entre cabeçalho e banner.
   ========================================================= */
@media(max-width:1024px){
  .site-header > .pa-nav{
    position:fixed !important;
    left:0 !important;
    top:0 !important;
    right:auto !important;
    bottom:auto !important;

    width:0 !important;
    min-width:0 !important;
    max-width:0 !important;

    height:0 !important;
    min-height:0 !important;
    max-height:0 !important;

    margin:0 !important;
    padding:0 !important;
    border:0 !important;

    background:transparent !important;
    overflow:visible !important;
    z-index:350 !important;
  }

  .site-header > .pa-nav > .pa-nav-inner{
    position:static !important;
    display:block !important;

    width:0 !important;
    min-width:0 !important;
    max-width:0 !important;

    height:0 !important;
    min-height:0 !important;
    max-height:0 !important;

    margin:0 !important;
    padding:0 !important;
    border:0 !important;

    overflow:visible !important;
  }

  .site-header{
    margin:0 !important;
    padding-bottom:0 !important;
  }

  #content{
    margin:0 !important;
    padding:0 !important;
  }

  body.home .pa-hero-wrap,
  body.home #content > .pa-hero-wrap,
  body.home #content > .pa-container.pa-hero-wrap{
    margin-top:0 !important;
    padding-top:0 !important;
  }

  body.home .pa-hero-wrap .pa-hero-carousel{
    margin-top:0 !important;
  }

  /* Drawer/backdrop seguem fixed e não dependem do tamanho do nav-pai. */
  .site-header .pa-mobile-nav-backdrop{
    position:fixed !important;
    inset:0 !important;
  }

  .site-header .pa-mobile-drawer{
    position:fixed !important;
    top:0 !important;
    bottom:0 !important;
  }
}


/* =========================================================
   MOBILE HERO MAIS PREENCHIDO v3.9.5
   Banner mais cheio no celular, com margens laterais menores
   e melhor aproveitamento da largura visível.
   ========================================================= */
@media(max-width:768px){
  body.home .pa-hero-wrap,
  body.home #content > .pa-hero-wrap,
  body.home #content > .pa-container.pa-hero-wrap{
    width:100% !important;
    max-width:none !important;
    margin:8px 0 18px !important;
    padding:0 8px !important;
    box-sizing:border-box !important;
  }

  body.home .pa-hero-wrap .pa-hero-carousel,
  body.home #content > .pa-hero-wrap .pa-hero-carousel,
  body.home #content > .pa-container.pa-hero-wrap .pa-hero-carousel{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    height:340px !important;
    border-radius:16px !important;
  }

  body.home .pa-hero-wrap .pa-hero-carousel__image,
  body.home #content > .pa-hero-wrap .pa-hero-carousel__image,
  body.home #content > .pa-container.pa-hero-wrap .pa-hero-carousel__image{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center center !important;
  }

  body.home .pa-hero-wrap + #categorias,
  body.home .pa-hero-carousel + #categorias{
    padding-top:34px !important;
  }
}

@media(max-width:480px){
  body.home .pa-hero-wrap,
  body.home #content > .pa-hero-wrap,
  body.home #content > .pa-container.pa-hero-wrap{
    padding:0 6px !important;
    margin:6px 0 16px !important;
  }

  body.home .pa-hero-wrap .pa-hero-carousel,
  body.home #content > .pa-hero-wrap .pa-hero-carousel,
  body.home #content > .pa-container.pa-hero-wrap .pa-hero-carousel{
    height:320px !important;
    border-radius:15px !important;
  }

  body.home .pa-hero-wrap + #categorias,
  body.home .pa-hero-carousel + #categorias{
    padding-top:30px !important;
  }
}


/* =========================================================
   MOBILE HERO FULL WIDTH v3.9.6
   No mobile, o banner passa a ocupar toda a largura visível,
   sem margens laterais e com preenchimento total.
   ========================================================= */
@media(max-width:768px){
  body.home .pa-hero-wrap,
  body.home #content > .pa-hero-wrap,
  body.home #content > .pa-container.pa-hero-wrap{
    width:100vw !important;
    max-width:100vw !important;
    margin-top:0 !important;
    margin-bottom:18px !important;
    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;
    padding:0 !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }

  body.home .pa-hero-wrap .pa-hero-carousel,
  body.home #content > .pa-hero-wrap .pa-hero-carousel,
  body.home #content > .pa-container.pa-hero-wrap .pa-hero-carousel{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    height:340px !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }

  body.home .pa-hero-wrap .pa-hero-carousel__viewport,
  body.home .pa-hero-wrap .pa-hero-carousel__track,
  body.home .pa-hero-wrap .pa-hero-carousel__slide,
  body.home .pa-hero-wrap .pa-hero-carousel__link,
  body.home .pa-hero-wrap .pa-hero-carousel__link picture,
  body.home .pa-hero-wrap .pa-hero-carousel__image{
    width:100% !important;
    height:100% !important;
  }

  body.home .pa-hero-wrap .pa-hero-carousel__image{
    object-fit:cover !important;
    object-position:center center !important;
    display:block !important;
  }

  body.home .pa-hero-wrap .pa-hero-carousel__arrow--prev{ left:12px !important; }
  body.home .pa-hero-wrap .pa-hero-carousel__arrow--next{ right:12px !important; }
}

@media(max-width:480px){
  body.home .pa-hero-wrap .pa-hero-carousel,
  body.home #content > .pa-hero-wrap .pa-hero-carousel,
  body.home #content > .pa-container.pa-hero-wrap .pa-hero-carousel{
    height:300px !important;
  }
}


/* =========================================================
   BANNER INTERMEDIÁRIO MOBILE FULL v3.9.7
   No mobile, o banner "Descubra o mundo da perfumaria árabe"
   ocupa toda a largura da tela e o texto fica melhor encaixado.
   ========================================================= */
@media(max-width:768px){
  body.home .pa-section > .pa-container > .pa-mid-banner{
    width:100vw !important;
    max-width:100vw !important;
    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;
    margin-top:0 !important;
    margin-bottom:0 !important;
    min-height:320px !important;
    border-radius:0 !important;
    box-shadow:none !important;
    display:flex !important;
    align-items:flex-end !important;
    overflow:hidden !important;
  }

  body.home .pa-section > .pa-container > .pa-mid-banner .pa-mid-banner__media{
    inset:0 !important;
    background-size:cover !important;
    background-position:center center !important;
    transform:none !important;
  }

  body.home .pa-section > .pa-container > .pa-mid-banner:before{
    background:linear-gradient(
      90deg,
      rgba(34,27,23,.46) 0%,
      rgba(34,27,23,.32) 38%,
      rgba(34,27,23,.16) 66%,
      rgba(34,27,23,.08) 100%
    ) !important;
  }

  body.home .pa-section > .pa-container > .pa-mid-banner .pa-mid-banner__content{
    width:100% !important;
    max-width:78% !important;
    padding:24px 24px 26px !important;
  }

  body.home .pa-section > .pa-container > .pa-mid-banner h2{
    margin:0 0 10px !important;
    max-width:100% !important;
    font-size:clamp(18px, 5.8vw, 24px) !important;
    line-height:1.13 !important;
    letter-spacing:.01em !important;
    text-transform:uppercase !important;
  }

  body.home .pa-section > .pa-container > .pa-mid-banner p{
    max-width:100% !important;
    margin:0 0 16px !important;
    font-size:14px !important;
    line-height:1.5 !important;
  }

  body.home .pa-section > .pa-container > .pa-mid-banner .pa-btn{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:auto !important;
    max-width:100% !important;
    min-width:0 !important;
    padding:14px 22px !important;
    font-size:14px !important;
    line-height:1.2 !important;
    white-space:normal !important;
    text-align:center !important;
    border-radius:14px !important;
  }
}

@media(max-width:480px){
  body.home .pa-section > .pa-container > .pa-mid-banner{
    min-height:300px !important;
  }

  body.home .pa-section > .pa-container > .pa-mid-banner .pa-mid-banner__content{
    max-width:82% !important;
    padding:20px 18px 22px !important;
  }

  body.home .pa-section > .pa-container > .pa-mid-banner h2{
    font-size:clamp(16px, 6.2vw, 22px) !important;
    line-height:1.12 !important;
  }

  body.home .pa-section > .pa-container > .pa-mid-banner p{
    font-size:13px !important;
    line-height:1.45 !important;
  }

  body.home .pa-section > .pa-container > .pa-mid-banner .pa-btn{
    padding:13px 18px !important;
    font-size:13px !important;
  }
}