/* CSS Gerado pelo Customizer V2 - 29/07/2025, 18:44:17 */

 /* --- CSS: Mensagem de Boas-Vindas (Overlay) --- */
 #custom-overlay-wrapper {
     position: fixed;
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
     background: rgba(0, 0, 0, 0.4);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     z-index: 9999;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     color: white;
     text-align: center;
     padding: 2rem;
     opacity: 0;
     animation: overlayEntrance 0.5s ease forwards;
 }

 @media (max-width: 480px),
 (orientation: portrait) {

     /* Estilos para telas com largura máxima de 480px ou orientação retrato */
     #custom-overlay-wrapper {
         display: flex;
         width: auto;

     }
 }



 #custom-overlay-wrapper h1 {
     font-size: 2.5rem;
     font-weight: 700;
     margin-bottom: 1rem;
 }

 #custom-overlay-wrapper h1 strong {
     color:rgb(34, 184, 167);
 }

 #custom-overlay-wrapper p {
     font-size: 1.1rem;
     color: rgba(255, 255, 255, 0.8);
     margin-top: 0;
     margin-bottom: 2rem;
 }

 .custom-overlay-buttons {
     display: flex;
     gap: 1rem;
     flex-wrap: wrap;
     justify-content: center;
 }

 .custom-overlay-btn {
     padding: 0.8rem 1.5rem;
     border-radius: 999px;
     cursor: pointer;
     font-weight: bold;
     font-size: 1rem;
     transition: all 0.3s ease;
     border: 2px solid transparent;
 }

 .custom-overlay-btn.primary {
     background-color: #32bcad;
     color: white;
 }

 .custom-overlay-btn.primary:hover {
     filter: brightness(1.2);
 }

 .custom-overlay-btn.secondary {
     background-color: transparent;
     color: white;
     border-color: white;
 }

 .custom-overlay-btn.secondary:hover {
     background-color: white;
     color: #32bcad;
 }

 @keyframes overlayEntrance {
     from {
         opacity: 0;
         transform: scale(0.95);
     }

     to {
         opacity: 1;
         transform: scale(1);
     }
 }

 @keyframes overlayExit {
     from {
         opacity: 1;
         transform: scale(1);
     }

     to {
         opacity: 0;
         transform: scale(0.95);
     }
 }

 /* --- CSS: Pop-ups de Vendas --- */
 .sales-popup {
     position: fixed;
     bottom: 25px;
     left: 25px;
     z-index: 9999;
     background-color: rgba(18, 18, 18, 0.85);
     backdrop-filter: blur(10px);
     color: #fff;
     padding: 15px 20px;
     border-radius: 12px;
     border: 1px solid rgba(255, 255, 255, 0.1);
     box-shadow: 0 5px 25px rgba(0, 0, 0, 0.4);
     display: flex;
     align-items: center;
     gap: 15px;
     opacity: 0;
     transform: translateY(20px);
     visibility: hidden;
     transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
 }

 .sales-popup.show {
     opacity: 1;
     transform: translateY(0);
     visibility: visible;
 }

 .sales-popup .popup-icon {
     font-size: 1.5rem;
     color: #32BCAD;
     width: 24px;
     height: 24px;
 }

 .sales-popup .popup-icon svg {
     fill: currentColor;
 }

 .sales-popup p {
     margin: 0;
     color: #b3b3b3 !important;
     font-size: 0.9rem;
 }

 .sales-popup p strong {
     color: #ffffff !important;
     font-weight: 600;
 }

 /* --- CSS: Fundo de Partículas (Constelação) --- */
 #constellation-bg {
     position: fixed;
     top: 0;
     left: 0;
     z-index: -1;
     pointer-events: none;
 }








 /* CSS Gerado pelo Customizer V2 - 29/07/2025, 23:48:09 */

 /* --- CSS: Banner (Carrossel) --- */
 :root {
     --cor-primaria-banner: #8a2be2;
     --cor-destaque-banner: #b967ff;
 }

 .boaplay-hero {
     display: inline;
     justify-content: center;
     align-items: center;
     gap: 30px;
     font-family: 'Inter', sans-serif;
     position: relative;
     margin-top: 20px;
     width: 100%;
     padding-bottom: 0px;
 }

 .boaplay-hero-image {
     flex: 1;
     position: relative;
     cursor: pointer;
     max-width: 990px;
     display: flex;
     justify-content: center;
     align-items: center;
     overflow: hidden;
     width: 100%;
     margin: 30px auto;
     border-radius: 10px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
 }

 .progress-bar {
     position: absolute;
     bottom: 0;
     left: 0;
     height: 5px;
     background: rgba(255, 255, 255, 0.8);
     width: 100%;
     overflow: hidden;
 }

 .progress-bar {
     display: none;
 }


 /* Cards personalizados com animações geral*/

 .sc-284a1cfc-6.vxvis.product_card:hover {
     transition: 0.5s !important;
     box-shadow: 0 0 10px 4px #32BCAD !important;
     border: 2px solid #32BCAD !important;
 }

 /*
 .boaplay-hero-image:hover .progress-bar {
     display: block;
 } */

 /* .progress {
     height: 100%;
     width: 0%;
     background-color: #32BCAD;
     animation: progressAnim 15s linear infinite;
 }

 @keyframes progressAnim {
     from {
         width: 0%;
     }

     to {
         width: 100%;
     }
 } */


 .boaplay-hero-image img#boaplay-banner-img {
     width: 1000px;
     height: 400px;
     border-radius: 10px;
 }

 .boaplay-hero-titulo {
     display: flex;
     justify-content: center;
     color: #ffffff;
     width: 100%;
 }

 .boaplay-hero-titulo span {
     color: #52dfcf;
 }

 .boaplay-hero-p {
     display: flex;
     justify-content: center;
     margin-bottom: 10px;
     color: #fff;
     width: 100%;
 }

 .boaplay-hero-image:hover {
     transform: scale(1.02);
 }

 .boaplay-hero-image {
     transition: transform 0.5s ease;
 }

 @media (max-width: 480px) {


     .boaplay-hero-image {
         display: flex;
         justify-content: center;
     }

     .boaplay-hero-p {
         font-size: x-small;
     }

     .boaplay-hero-image img#boaplay-banner-img {
         display: flex;
         justify-content: center;
         width: 400px;
         height: 200px;
     }

     .boaplay-hero-left {
         text-align: center;
     }

     .boaplay-hero {
         margin-bottom: 0px;
         padding-bottom: 0px;
     }

 }

 @media (max-width: 365px) {
     .boaplay-hero-p {
         font-size: x-small;
     }

     .boaplay-hero-left {
         text-align: center;
     }

     .boaplay-hero-image {
         display: flex;
         justify-content: center;

     }

     .boaplay-hero-image img#boaplay-banner-img {
         display: flex;
         justify-content: center;
         width: 330px;
         height: 200px;
     }
 }

 /* Outros estilos foram omitidos por brevidade, mas devem ser incluídos */




 /* CSS Gerado pelo Customizer V2 - 30/07/2025, 00:42:05 */

 /* --- CSS: Cards de Produto (Efeito Vidro) --- */
 .product_card,
 .sc-284a1cfc-6.vxvis {
     background: rgba(255, 255, 255, 0.05) !important;
     backdrop-filter: blur(20px) !important;
     -webkit-backdrop-filter: blur(20px) !important;
     box-shadow: none !important;
     color: white !important;
     transition: transform 0.3s ease, border-color 0.3s ease !important;
     cursor: pointer !important;
 }

 .product_card,
 .sc-284a1cfc-8.fnFnrU {
     border-bottom: none !important;
 }

 .product_card:hover,
 .sc-284a1cfc-6.vxvis:hover {
     transform: scale(1.02) !important;
     border-color: rgba(255, 255, 255, 0.1) !important;
     box-shadow: rgba(18,193,232,0.456) 0px 3px 8px !important;
     transition: box-shadow 500ms;
 }

 .product_card button,
 .sc-284a1cfc-28.fTaNqf {
     background: rgba(255, 255, 255, 0.05) !important;
     backdrop-filter: blur(10px) !important;
     border: 1px solid rgba(255, 255, 255, 0.1) !important;
     border-radius: 12px !important;
     color: white !important;
     font-weight: 600 !important;
     transition: all 0.3s ease !important;
 }

 .product_card div svg,
 .sc-284a1cfc-27.dvSgdE {
     fill: rgba(255, 255, 255, 1) !important;
 }

 .product_card button:hover,
 .sc-284a1cfc-28.fTaNqf:hover {
     background: rgba(82, 223, 207, 1) !important;
 }

 .product_info,
 .sc-284a1cfc-17,
 .sc-284a1cfc-22,
 .sc-284a1cfc-8,
 .sc-284a1cfc-8 img,
 .product_card div {
     background: transparent !important;
 }


 /* --- CSS: Novas Categorias Customizadas (VERSÃO FINAL) --- */

 /* ESTILOS PADRÃO PARA DESKTOP (Layout de Grade) */
 .container-categorias-custom {
     display: grid;
     grid-template-columns: repeat(auto-fill, 170px);
     justify-content: start;
     /* gap: 16px;
     padding: 25px 20px; */
     /* margin: 0 auto; */
 }

 .card-categoria-custom {
     position: relative;
     display: block;
     overflow: hidden;
     border-radius: 10px;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
     aspect-ratio: 10 / 12;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

 .imagem-categoria-custom {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }

 .overlay-categoria-custom {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 60%);
     opacity: 0.9;
     transition: opacity 0.3s ease;
 }

 .card-categoria-custom:hover {
     transform: translateY(-8px);
     box-shadow: 0 10px 25px rgb(0, 172, 182);
 }

 .card-categoria-custom:hover .imagem-categoria-custom {
     transform: scale(1.1);
 }

 .card-categoria-custom:hover .overlay-categoria-custom {
     opacity: 0.7;
 }

 /* ESTILOS PARA CELULAR (Layout de Slider Horizontal) */
 @media (max-width: 480px) {
     .container-categorias-custom {
         display: flex;
         /* Transforma em slider */
         justify-content: flex-start;
         /* Alinha à esquerda para o scroll */
         overflow-x: auto;
         padding-left: 0px;
         margin-top: 0px;
         padding-top: 0px;
         /* Habilita o scroll horizontal */
         scroll-snap-type: x mandatory;
         scroll-behavior: smooth;
         /* width: 396px; */
         /* padding: 20px 15px; */
         /* Ajusta o padding para o slider */
         /* gap: 12px; */
         /* Esconde a barra de rolagem */
         scrollbar-width: none;
         -ms-overflow-style: none;
     }

     .container-categorias-custom::-webkit-scrollbar {
         display: none;
     }

     .card-categoria-custom {
         flex: 0 0 140px;
         /* Tamanho fixo dos cards no slider */
         scroll-snap-align: start;
     }
 }

 @media (max-width: 365px) {
     .card-categoria-custom {
         flex: 0 0 120px;
         /* Cards menores para telas muito pequenas */
     }

     .container-categorias-custom {
         display: flex;
         /* width: 300px; */
         padding-left: 0px;
         padding-top: 0px;
     }
 }