.no-prods-message {
    text-align: center;
}

.add-favorito-single, .add-favorito-loop {
    position: absolute;
    z-index: 3;
    right: 10px;
    font-size: 20px !important;
    top: 2px;
}

.favorites_grid,
.login_block {
    display: block !important;
}

.usg_add_to_cart_1 a {
    padding: 8px 0 !important;
}

.promo-sticker {
    display: inline-block;
    background-color: #FF5B00;
    color: white;
    padding: 4px 8px;
    font-size: 15px;
    border-radius: 7px;
    font-weight: bold;
    text-transform: uppercase;
    position: absolute;
    top: -10px;
    left: -10px;
    max-width: 210px;
    inline-size: max-content;
}

.menu-toggle {
    width: 90px;
    background-color: #00733c;
    padding: 5px;
    border-radius: 15px;
    font-size: 18px;
    font-weight: bold;
    border: 1px solid #5ABE28;
}

.menu-toggle.open {
    background-color: #5ABE28;
}

.custom-menu-wrapper {
    position: relative;
    z-index: 10;
}

.custom-menu {
    display: none;
    position: absolute;
    left: 0;
    z-index: 999;
    background: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    top: calc(100% + 39px);
    width: auto;
    min-width: 200px;
    white-space: nowrap;
    padding: 10px 0 5px 0;
}

.custom-menu::before {
    content: '';
    position: absolute;
    left: 20%;
    transform: translateX(-50%);
    top: -10px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #fff; /* Fundo do menu */
    z-index: 1;
}

.custom-menu li:hover {
    background-color: #5ABE28;
}

.custom-menu li a:hover {
    color: #fff !important;
}

.custom-menu a {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center; /* vertical centering */
    padding: 5px 15px;
    text-decoration: none;
    color: #333;
}

.custom-menu .arrow {
    position: absolute;
    right: 0;
}

.custom-menu,
.custom-menu ul {
    list-style: none;
    margin: 0;
}

.custom-menu .menu-icon {
    width: 28px;
    height: 28px;
    margin-right: 8px;
    object-fit: contain;
    flex-shrink: 0;
}

.custom-menu li.separator {
    height: 1px;
    background: #ccc;
    margin: 5px 0;
}

.custom-menu li {
    position: relative;
    color: #00733C;
    font-weight: bold;
    margin: 0;
}

.custom-menu .submenu {
    display: none;
    position: absolute;
    top: 0;
    left: 100%;
    white-space: nowrap;
    background: #def2d4;
    border: 1px solid #ccc;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    z-index: 999;
}

.custom-menu li:hover > .submenu {
    display: block;
}


.login-box.open,
.register-box.open { display: block !important; }

.login-menu-wrapper {
  position: relative;
  display: inline-block;
  z-index: 10;
}

.login-toggle {
  background-color: #5ec132;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 999px;
  font-weight: bold;
  cursor: pointer;
}

.login-box,
.register-box {
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  background: white;
  border: 1px solid #ccc;
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
  min-width: 300px;
}

.login-box::before,
.login-box::after,
.register-box::before,
.register-box::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.login-box::after,
.register-box::after {
  top: -11px;
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-bottom: 11px solid #ccc;
}

.login-box::before,
.register-box::before {
  top: -10px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #fff;
  z-index: 1;
}

.login-box-inner,
.register-box-inner {
  padding: 20px;
  text-align: center;
}

.login-box-inner p,
.register-box-inner p {
  margin: 0 0 10px;
  color: #007e3a;
}

.login-box-inner .title,
.register-box-inner .title {
  font-weight: bold;
}

.login-box-inner input,
.register-box-inner input {
  margin-bottom: 10px;
  border: 1px #ccc solid !important;
  color: #999 !important;
  font-weight: unset !important;
}

.login-box-inner button,
.register-box-inner button {
  width: 100%;
  padding: 12px;
  background-color: #007e3a;
  color: white;
  border: none;
  border-radius: 999px;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
}

.login-links {
  margin-top: 10px;
  font-size: 13px;
  color: #007e3a;
}

/* container */
.qty-wrapper{
  display:inline-flex;
  align-items:stretch;
}

/* minus / plus buttons */
.qty-wrapper .qty-button{
  appearance:none;
  border:2px solid #9f9f9f;
  background:#fff;
  padding:.45rem .75rem;
  line-height:1;
  cursor:pointer;
  user-select:none;
  font-weight:600;
  height: 47px;
  font-size: 24px;
}

/* left & right rounding */
.qty-wrapper .qty-button.minus,
.qty-wrapper .qty-button.plus {
    border-radius: 7px;
}

/* middle input box (separate borders) */
.qty-wrapper input.qty {
    text-align: center;
    border: 2px solid #9f9f9f;
    margin: 0 5px;
    border-radius: 7px;
    width: 30px !important;
    line-height: 5px !important;
    min-height: 35px;
    font-size: 25px;
}

/* hover/focus */
.qty-wrapper .qty-button:hover{ background:#f7f7f7; }
.qty-wrapper input.qty:focus{ box-shadow:0 0 0 2px rgba(0,115,70,.15); }

/* disabled/gray state (stay visible) */
.qty-wrapper .qty-button.is-disabled,
.qty-wrapper .qty-button:disabled{
  color:#9aa0a6;
  background:#f2f2f2;
  border-color:#e1e1e1;
  cursor:not-allowed;
}

/* optional: tighter on very small screens */
@media (max-width:420px){
  .qty-wrapper input.qty{ width:2.6rem; }
  .qty-wrapper .qty-button{ padding:.4rem .6rem; }
}


/* badge */
.fvb-pickup-badge{
  display:block;
  width:100%;
  max-width:520px;                /* adjust or remove */
  margin:.5rem 0;
  padding:.6rem 1rem;
  text-align:center;
  font-weight:600;
  font-size:18px;
  line-height:1.2;
  color:#1b7d3d;                  /* green text */
  background:#eaf6d5;             /* soft green background */
  border:1px solid #d8eab8;
  border-radius:7px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.02);
}

/* optional: shrink on small screens */
@media (max-width:480px){
  .fvb-pickup-badge{ font-size:13px; padding:.55rem .9rem; }
}


.cart .quantity {
    margin-right: 10px;
}



.fvb-recently-viewed-products {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5 products per row */
    gap: 20px; /* Space between products */
}

.fvb-recently-viewed-products .woocommerce-LoopProduct-link {
    padding: 8px;
}

.fvb-recently-viewed-products .product {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    justify-content: space-between; /* Push the button to the bottom */
    align-items: center; /* Center-align content */
    border-radius: 5px; /* Rounded corners */
    background-color: #fff; /* White background */
    list-style-type: none;
    height: 100%; /* Make all product cards the same height */
    box-sizing: border-box; /* Include padding in height calculation */
}

.fvb-recently-viewed-products img {
    max-width: 100%; /* Make images responsive */
    height: auto; /* Maintain aspect ratio */
    margin-bottom: 10px; /* Space below the image */
}

.fvb-recently-viewed-products h2 {
    color: #007346;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 0.4rem;
}

.fvb-recently-viewed-products .price {
    font-size: 14px;
    margin-bottom: 10px;
    color: #ea5b0b;
    font-weight: 600;
}

/* Ensure the button stays at the bottom */
.fvb-recently-viewed-products .button {
    margin-top: auto; /* Push the button to the bottom */
    border-radius: 5px !important;
    width: 100%; /* Stretch the button to fit the container width */
}


.w-search.layout_simple .w-btn {
    background: #5ac828 !important;
    height: 37px !important;
    width: 55px;
    margin: 0;
    border-radius: 0 15px 15px 0;
    color: white;
}

.w-search.layout_simple input {
    font-size: 0.8rem;
}

.center-buttons {
    display: flex;
    justify-content: center;
}

.align-right {
    display: flex;
    justify-content: flex-end;
}

.green-border {
    border: 4px #139d13 solid !important;
}

.red-border {
    border: 4px #cf0c0c solid !important;
}

.blue-border {
    border: 4px #39a6e5 solid !important;
}

.woocommerce-product-gallery__trigger {
    color: #009b4b !important;
}



/* cada item com submenu passa a ter seta à direita */
.us_menu_1 .menu > li.has-sub-toggle,
.us_menu_1 .menu .sub-menu > li.has-sub-toggle {
  position: relative;
}

/* o link ocupa a linha toda (texto à esquerda) */
.us_menu_1 .menu li > a {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding-right: 2rem; /* espaço para a seta */
  margin-left: 40px;
}

/* seta encostada à direita */
.submenu-toggle {
  position: absolute;
  right: .25rem;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: .25rem .4rem;
}

/* só existe seta nos itens com submenu (o JS já garante isso) */
.us_menu_1 .menu li:not(.has-sub-toggle) > .submenu-toggle { display: none; }

/* estado drilled: esconder itens de topo, mostrar apenas o corrente */
.us_menu_1 .menu.is-drilled > li { display: none; }
.us_menu_1 .menu.is-drilled > li.is-current { display: block; }
.us_menu_1 .menu.is-drilled > li.is-current > a { display: none; }

/* sub-menu visível e animação */
.us_menu_1 .menu li > .sub-menu { display: none; transform: translateX(20px); opacity: 0; transition: transform .25s ease, opacity .25s ease; }
.us_menu_1 .menu li > .sub-menu.is-open { display: block; transform: translateX(0); opacity: 1; }

/* barra voltar */
.menu-back { list-style: none; margin: 0 0 .5rem 0; padding: 0; }
.menu-back-btn { background: none; border: 0; font-weight: 600; cursor: pointer; padding: .25rem 0; }


/* alinhamento da seta à direita, apenas em itens com submenu */
.us_menu_1 .menu li.has-sub-toggle { position: relative; }
.us_menu_1 .menu li > a { display:flex; align-items:center; gap:.5rem; padding-right:2rem; }
.submenu-toggle{
  position:absolute; right:.5rem; top:50%; transform:translateY(-50%);
  background:transparent; border:0; font-size:1.2rem; line-height:1; cursor:pointer;
}

/* estado “drilled”: só mostra o item corrente e o seu sub-menu */
.us_menu_1 .menu.is-drilled > li { display:none; }
.us_menu_1 .menu.is-drilled > li.is-current { display:block; }
.us_menu_1 .menu.is-drilled > li.is-current > a { display:none; } /* esconde o link de topo */

/* SUBMENU WRAPPER */
.us_menu_1 .menu li > .sub-menu{
  display:none; transform:translateX(20px); opacity:0;
  transition:transform .25s ease, opacity .25s ease;
  margin:0; padding:0;
}
.us_menu_1 .menu li > .sub-menu.is-open{
  display:block; transform:translateX(0); opacity:1;
}

/* Barra superior “‹ Voltar” (branca, separada) */
.us_menu_1 .menu .sub-menu > .menu-back{
  list-style:none; margin:0; padding:.75rem 1rem;
  background:#ffffff;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.us_menu_1 .menu .menu-back-btn{
  background:none; border:0; padding:0; cursor:pointer;
  color:#177d4a; font-weight:600;
}

/* Área do submenu (fundo verde-claro, como no design) */
.us_menu_1 .menu .sub-menu{
  background:#e8f4e6; /* verde-claro */
  padding:0 0 1rem 0;
}
.us_menu_1 .menu .sub-menu > li{
  list-style:none; margin:0; padding:0;
}
.us_menu_1 .menu .sub-menu > li > a{
  display:block; padding:1rem 0; /* espaçamento grande */
  color:#177d4a; font-weight:700; text-decoration:none; margin-left: 25px;
}
.us_menu_1 .menu .sub-menu > li > a:hover{
  text-decoration:underline;
}

/* setas dentro do submenu (só quando há filhos) */
.us_menu_1 .menu .sub-menu > li.has-sub-toggle > a{ padding-right:2rem; }
.us_menu_1 .menu .sub-menu > li.has-sub-toggle > .submenu-toggle{ right:1rem; }




/* Responsive Design */
@media (max-width: 1024px) {
    .fvb-recently-viewed-products {
        grid-template-columns: repeat(3, 1fr); /* 3 products per row */
    }
}

@media (max-width: 768px) {
    .fvb-recently-viewed-products {
        grid-template-columns: repeat(2, 1fr); /* 2 products per row */
    }
}

@media (max-width: 480px) {
    .fvb-recently-viewed-products {
        grid-template-columns: repeat(1, 1fr); /* 1 product per row */
    }
}



@media (max-width: 768px) {
  body.auth-open { overflow: hidden; }
  body.auth-open::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 9;
  }

  /* A caixa vira “quase fullscreen”, ancorada por baixo do header */
  .login-box,
  .register-box {
    position: fixed;
    top: var(--header-offset, 80px); /* ajusta se o teu header for mais alto */
    left: 0;
    right: 0;
    transform: none;
    min-width: 100vw;
    height: calc(100vh - var(--header-offset, 80px));
    border: none;
    border-radius: 0;
    box-shadow: none;
    z-index: 10;
  }

  /* Conteúdo scrollável dentro da “folha” */
  .login-box-inner,
  .register-box-inner {
    height: 100%;
    overflow: auto;
    padding: 24px 40px;
    max-width: 640px;
    margin: 0 auto;
  }

  /* Garante que o wrapper não atrapalha o posicionamento fixo */
  .login-menu-wrapper { position: static; z-index: auto; }
  
  .login-box::before,
    .login-box::after,
    .register-box::before,
    .register-box::after {
      content: '';
      position: absolute;
      left: 73%;
      transform: translateX(-50%);
    }
    
    .login-box::after,
    .register-box::after {
      top: -11px;
      border-left: 11px solid transparent;
      border-right: 11px solid transparent;
      border-bottom: 11px solid #ccc;
    }
    
    .login-box::before,
    .register-box::before {
      top: -10px;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 10px solid #fff;
      z-index: 1;
    }
    
    .login-box-inner .title, .register-box-inner .title {
        font-size: 20px;
    }
    
    .login-box-inner p, .register-box-inner p {
        font-size: 16px;
    }
    
    .login-links {
        font-size: 16px;
    }
}
