/* ESTILO POPUP DHZ */
 .sales-popup-dhz {
     position: fixed;
     bottom: 20px;
     left: 20px;
     background: #111;
     color: #fff;
     padding: 12px 16px;
     border-radius: 10px;
     opacity: 0;
     transform: translateY(20px);
     transition: all 0.4s ease;
     z-index: 999999;
     font-size: 14px;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
 }

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

 .popup-content-dhz {
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .popup-icon-dhz {
     font-size: 18px;
 }

 :root {
     --primary-purple: #cc34eb;
     --secondary-purple: #8a2be2;
     --deep-bg-1: rgba(18, 8, 28, 0.95);
     --deep-bg-2: rgba(10, 5, 18, 0.98);
     --text-main: rgba(255, 255, 255, 0.92);
     --text-secondary: rgba(255, 255, 255, 0.70);
 }

 /* ================= CARD ROXO PREMIUM ================= */
 .product_card {
     position: relative !important;
     overflow: hidden !important;
     border-radius: 14px !important;
     color: var(--text-main) !important;
     background: radial-gradient(120% 140% at 10% 0%, rgba(204, 52, 235, 0.22) 0%, transparent 55%), radial-gradient(120% 140% at 90% 0%, rgba(138, 43, 226, 0.18) 0%, transparent 55%), linear-gradient(135deg, var(--deep-bg-1) 0%, var(--deep-bg-2) 100%) !important;
     border: 1px solid rgba(204, 52, 235, 0.28) !important;
     box-shadow: 0 10px 22px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 0 1px rgba(204, 52, 235, 0.12) !important;
     backdrop-filter: blur(14px) !important;
     transition: 220ms ease !important;
 }

 .product_card:hover {
     border-color: rgba(204, 52, 235, 0.45) !important;
     transform: translateY(-4px) !important;
     box-shadow: 0 18px 40px rgba(0, 0, 0, 0.50), inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 0 0 1px rgba(204, 52, 235, 0.16), 0 0 32px rgba(204, 52, 235, 0.18) !important;
 }

 /* Badge OFF */
 .product_card .product_info div[class*="-12"] {
     background: linear-gradient(135deg, #cc34eb, #8a2be2) !important;
     color: #fff !important;
     border-radius: 8px !important;
     padding: 5px 10px !important;
     font-weight: 800 !important;
 }

 .product_card .product_info div[class*="-12"]::after {
     content: " OFF";
 }

 /* Botão */
 .product_card button {
     background: linear-gradient(135deg, #cc34eb, #8a2be2) !important;
     border: 1px solid rgba(255, 255, 255, 0.15) !important;
     border-radius: 12px !important;
     color: #fff !important;
     font-weight: 700 !important;
     padding: 11px 22px !important;
     transition: 200ms ease !important;
 }

 .product_card button:hover {
     transform: translateY(-2px) !important;
     box-shadow: 0 0 20px rgba(204, 52, 235, 0.35) !important;
 }

 /* ================= SELO PAGAMENTO ================= */
 .selo-pagamento-seguro {
     margin-top: 12px;
     display: flex;
     justify-content: center;
 }

 .selo-content {
     display: flex;
     align-items: center;
     gap: 8px;
     padding: 8px 14px;
     border-radius: 10px;
     background: rgba(204, 52, 235, 0.12);
     border: 1px solid rgba(204, 52, 235, 0.45);
     color: #ffffff;
     font-size: 13px;
     font-weight: 600;
 }

 /* ================= VERIFICADO PERFIL ================= */
 .profile-container {
     position: relative;
     display: inline-block;
 }

 .selo-verificado-perfil {
     position: absolute;
     bottom: 0;
     right: 0;
     width: 22px;
     height: 22px;
     background: #cc34eb;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
 }

 .selo-verificado-perfil svg {
     width: 14px;
     height: 14px;
 }
 }

 #powered-ereemby {
     display: none !important;
 }

 /* CSS Personalizado Ereemby - Tema 3 (Vertical Grid & Mobile Marquee) */
 :root {
     --t3-highlight: #a855f7;
     /* Roxo principal */
     --t3-text-main: #ffffff;
     --t3-text-sec: #b8a9d9;
     /* Roxo claro para texto secundário */
     --t3-btn-bg: #1a1026;
     /* Fundo roxo escuro */
     --t3-btn-border: #6b21a8;
     /* Borda roxa */
 }

 #tema-gerado-t3,
 #tema-gerado-t3 * {
     box-sizing: border-box;
 }

 .t3-hero {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 40px;
     padding: 50px 20px;
     font-family: 'Poppins', sans-serif;
     width: 100%;
     max-width: 1300px;
     margin: 0 auto;
 }

 /* ESQUERDA - TEXTO */
 .t3-left {
     flex: 1;
     max-width: 500px;
     z-index: 2;
 }

 .t3-left h1 {
     font-size: 3.5rem;
     font-weight: 700;
     color: var(--t3-text-main) !important;
     line-height: 1.1;
     margin-bottom: 20px;
     letter-spacing: -1px;
 }

 .t3-left h1 span {
     color: var(--t3-highlight) !important;
 }

 .t3-left p {
     font-size: 1.05rem;
     color: var(--t3-text-sec) !important;
     margin-bottom: 35px;
     line-height: 1.6;
 }

 .t3-btn {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     padding: 14px 32px;
     background: var(--t3-btn-bg);
     color: var(--t3-text-main) !important;
     border: 1px solid var(--t3-btn-border);
     border-radius: 12px;
     text-decoration: none;
     font-weight: 600;
     font-size: 1rem;
     transition: all 0.3s ease;
 }

 .t3-btn:hover {
     border-color: var(--t3-highlight);
     transform: translateY(-3px);
     box-shadow: 0 10px 25px rgba(168, 85, 247, 0.4);
     filter: brightness(1.2);
 }

 /* DIREITA - GRADE VERTICAL SCROLLING (PC - 3 COLUNAS) */
 .t3-right {
     flex: 1.2;
     height: 450px;
     overflow: hidden;
     display: flex;
     gap: 15px;
     justify-content: center;
     mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
     -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
 }

 .t3-col {
     display: flex;
     flex-direction: column;
     gap: 15px;
     width: 30%;
 }

 .t3-inner {
     display: flex;
     flex-direction: column;
     gap: 15px;
 }

 .t3-item {
     border-radius: 12px;
     overflow: hidden;
     border: 1px solid rgba(168, 85, 247, 0.15);
     transition: transform 0.3s, border-color 0.3s;
     position: relative;
     flex-shrink: 0;
     background: #111;
 }

 .t3-item img {
     width: 100%;
     height: 110px;
     object-fit: cover;
     display: block;
     opacity: 0.9;
     transition: opacity 0.3s;
 }

 .t3-item:hover {
     transform: scale(1.05);
     border-color: var(--t3-highlight);
     z-index: 5;
     box-shadow: 0 10px 25px rgba(168, 85, 247, 0.5);
 }

 .t3-item:hover img {
     opacity: 1;
 }

 .t3-item::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, transparent 100%);
     pointer-events: none;
 }

 /* ANIMAÇÕES VERTICAIS */
 @keyframes scrollUpT3 {
     0% {
         transform: translateY(0);
     }

     100% {
         transform: translateY(-50%);
     }
 }

 @keyframes scrollDownT3 {
     0% {
         transform: translateY(-50%);
     }

     100% {
         transform: translateY(0);
     }
 }

 .vc-slow {
     animation: scrollUpT3 40s linear infinite;
 }

 .vc-med {
     animation: scrollDownT3 30s linear infinite;
 }

 .vc-fast {
     animation: scrollUpT3 25s linear infinite;
 }

 .t3-col:hover .t3-inner {
     animation-play-state: paused;
 }

 /* MOBILE - 2 FILEIRAS HORIZONTAIS */
 .t3-mobile-marquee {
     display: none;
     width: 100%;
     overflow: hidden;
     mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
     -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
     margin-top: 30px;
 }

 .t3-mq-row {
     display: flex;
     gap: 12px;
     width: 100%;
     overflow: hidden;
     margin-bottom: 15px;
 }

 .t3-mq-inner {
     display: flex;
     gap: 12px;
     width: max-content;
 }

 @keyframes scrollMobileRightT3 {
     0% {
         transform: translateX(0);
     }

     100% {
         transform: translateX(-50%);
     }
 }

 @keyframes scrollMobileLeftT3 {
     0% {
         transform: translateX(-50%);
     }

     100% {
         transform: translateX(0);
     }
 }

 .mq-row-right {
     animation: scrollMobileRightT3 25s linear infinite;
 }

 .mq-row-left {
     animation: scrollMobileLeftT3 25s linear infinite;
 }

 .t3-mq-item {
     width: 150px;
     height: 90px;
     flex-shrink: 0;
     border-radius: 12px;
     overflow: hidden;
     border: 1px solid rgba(168, 85, 247, 0.15);
     background: #111;
 }

 .t3-mq-item img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 /* RESPONSIVIDADE */
 @media (max-width: 900px) {
     .t3-hero {
         flex-direction: column;
         text-align: center;
         gap: 20px;
         padding: 40px 15px;
     }

     .t3-left {
         max-width: 100%;
     }

     .t3-left h1 {
         font-size: 2.8rem;
     }

     .t3-right {
         display: none;
     }

     .t3-mobile-marquee {
         display: block;
     }
 }

 #custom-modal-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.92);
     display: flex;
     justify-content: center;
     align-items: center;
     z-index: 10000;
     font-family: 'Arial', sans-serif;
 }

 .modal-box {
     background: #000;
     width: 320px;
     padding: 40px 25px;
     border-radius: 30px;
     border: 2px solid #a855f7;
     box-shadow: 0 0 30px rgba(168, 85, 247, 0.6);
     text-align: center;
     position: relative;
     color: white;
 }

 .close-x {
     position: absolute;
     top: 15px;
     right: 20px;
     font-size: 22px;
     cursor: pointer;
     color: #a855f7;
 }

 .modal-logo img {
     width: 240px;
     margin-bottom: 15px;
 }

 .modal-title {
     font-size: 28px;
     color: #a855f7;
     margin-bottom: 10px;
 }

 .modal-text {
     font-size: 14px;
     margin-bottom: 20px;
     color: #ccc;
 }

 .modal-label {
     font-size: 12px;
     letter-spacing: 2px;
     margin-bottom: 10px;
     color: #a855f7;
 }

 .modal-button {
     background: #a855f7;
     padding: 12px;
     border-radius: 10px;
     font-weight: bold;
     cursor: pointer;
     transition: 0.3s;
 }

 .modal-button:hover {
     background: #9333ea;
 }