@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

     /* Remove margens da página */
    * { 
        margin: 0; 
        padding: 0; 
        box-sizing: border-box; 
    }

    html { 
        height: 100%;
        background-image: linear-gradient(to bottom, rgb(255,250,250), rgb(255,255,255));
        background-repeat: no-repeat;
        background-attachment: fixed;
        scroll-behavior: smooth;
    }

    body { 
        line-height: 1.6; 
        color: #333;
        height: 100%;
        font-family: 'Roboto', sans-serif;
    }

    h1 {
        font-family: 'Roboto', sans-serif;
        font-weight: 700;
    }


    .popup { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); justify-content: center; align-items: center; z-index: 1000; }
    .popup img { max-width: 90%; max-height: 90%; border-radius: 8px; }
    .popup.active { display: flex; }

    /* pequenos estilos locais para garantir boa apresentação */
    .product-wrap { 
        max-width: 900px; 
        margin: 1rem auto; 
        padding: 1rem; 
        margin-top: 4rem;
    }


    /* Estilo para o contêiner de produtos */
    .product-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 20px;
        padding: 15px;
    }


    /* Estilo para as imagens (baseado no seu CSS) */
    
    .image-grid img {
        width: auto;
        height: 400px;
        border-radius: 8px;
        object-fit: cover;
        cursor: zoom-in; /* Indica que a lupa está ativa */
        border:1px dashed #ddd; 
        border-radius: 6px;
        padding: 0px;
        margin-right: 15px;
    }
    /* Contêiner para a imagem com lupa */
    .product-grid .image-grid {
        position: relative;
        display: inline-block;
    }
    .product-info {
        padding: 0;
        width: auto;
        height: auto;
    }
    .product-title {
        background-color: #fff;
        border-radius: 6px;
        border: 1px dashed #ddd;
        padding: 0.5rem 0.8rem;
        font-size: 1.9rem;
        line-height: 1.6;
        height: auto;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        padding-left: 15px;
        text-overflow: ellipsis;
    }

    /* CONTAINER DOS DOIS ITENS (preço + botão) */

    .price-actions {
      display: flex;
      flex-wrap: wrap;           /* Permite quebra de linha */
      gap: 10px;                 /* Espaço entre as divs */
      padding-top: 10px;
      width: 100%;
      max-width: 400px;          /* Limita largura (opcional) */
      margin: 0 auto;           /* Ocupa toda a largura */
    }

    /* As duas primeiras divs: 50% cada (mesma linha) */
    .price-wrapper, .button-wrapper {
      flex: 1 1 calc(50% - 0px); /* 50% menos o gap */
      padding: 10px;
      text-align: center;
      box-sizing: border-box;
    }

    /* A terceira div: ocupa 100% da linha de baixo */
    .social-share {
      flex: 1 1 100%;            /* Ocupa toda a largura */
      padding: 20px;
      text-align: center;
      box-sizing: border-box;
    }

    /* PREÇO */

    .produto_preco {
        background-color: #fff;
        border-radius: 6px;
        border: 1px dashed #ddd;
        padding: 0.5rem 0.8rem;
        font-weight: bold;
        margin: 0;
        display: flex;
        flex-direction: column;
        line-height: 1.4;
        color: #e74c3c;
    }

    .products-price {
        font-size: 2.5rem;
        font-weight: bold;
    }
    .approx {
        font-size: 0.85rem;
        margin-top: 2px;
    }

    /* BOTÃO */

    .btn_prime {
        background: #0b76d1;
        color: #fff;
        font-size: 1.5rem;
        font-weight: 500;
        padding: 0.5rem 0.8rem;
        margin-top: 4px;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        text-decoration: none;
        display: inline-block;
        transition: background 0.3s ease;
        white-space: nowrap;
        height: fit-content;
    }

    .btn_prime:hover {
        background: #095a9e;
    }

    .btn_prime.disabled {
        background: #ccc;
        cursor: not-allowed;
        pointer-events: none;
    }

    /* ÍCONES SOCIAIS */
    .social-share1 {
        margin-top: 20px;
        text-align: center;
    }

    .share-actions {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 10px 0;
    }
    .icon-btn {
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 50%;
        width: 42px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background 0.2s, box-shadow 0.2s, transform 0.1s;
    }
    .icon-btn:hover {
        background: #f0f0f0;
        box-shadow: 0 0 5px rgba(0,0,0,0.15);
        transform: scale(1.05);
    }
    #copyMsg {
        font-size: 0.9em;
        color: green;
        margin-left: 8px;
    }
    .container {
        max-width: 1200px; 
        margin: 0rem auto; 
        padding: 0rem 2rem; 
    }


/* Grid de Produtos */

    .grid { 
        display: grid; 
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
        gap: 2rem; 
        margin-top: 2rem; 
    }
    .card { 
        background-color: #fffafa;
        border: 1px solid #ddd; 
        border-radius: 8px; 
        overflow: hidden; 
        transition: transform 0.3s; 
        width: 200px; 
    }
    .card:hover { transform: translateY(-5px); }


    .image-container, .thumb  { 
        width:200px; 
        height: auto; 
        overflow: hidden; 
        border: 0px; 
    }

    .thumb  { 
        object-fit: cover; 
        cursor: zoom-in;  
        transition: transform 0.3s ease;
    }

    .image-container .thumb:hover { 
        transform: scale(1.08); 
        transition: transform 0.3s ease, box-shadow 0.3s ease; 
    }

    .card-body { 
        padding: 1rem 0;  
        width: auto; 
        height: 150px; 
        font-size: 1.1rem; 
        margin-bottom: 0.5rem; 
    }
  
    .card-title {
        font-size: 1.2rem;
        margin-bottom: 0.5rem;
        line-height: 1.6; /* Standard line height */
        height: 3.8rem; /* 1.2rem (font-size) * 1.5 (line-height) * 2 (lines) */
        display: -webkit-box;
        -webkit-line-clamp: 2;  /* Limits to 2 lines */
        -webkit-box-orient: vertical;
        overflow: hidden;
        padding-left: 5px;
        text-overflow: ellipsis;
    }

    .parent-container { /* Replace with your actual parent container class */
        position: relative;
        min-height: 100%; /* Ensure the container takes full height if needed */
        line-height: 1.8; /* Standard line height */
        height: 0.2rem; /* 1.2rem (font-size) * 1.5 (line-height) * 2 (lines) */
        width: auto; 
    }
    
    .aside-price {
        bottom: 115px;
    }

    .aside-price1 {
        padding: 0px;
        font-weight: 700;
        display: inline-block;
        line-height: 1.4;
        font-size: 0.8rem; 
        font-weight: bold;
        color: red;
    }

    .fire::before {
      content: "";
      position: absolute;
      margin-top: -2px;
      width: 21px;
      height: 24px;
      background: url('../img/favicon.png') 0 100% no-repeat;
      background-size: 21px 24px;;
    }

    .fire span {
        padding-left: 30px;
    }

    .aside-price2 {
        font-size: 1.2rem; 
        font-weight: bold;
        width: 100%;
        color: red;
    }

    .actions, .aside-price {
        position: absolute;
        left: 0;
        width: 100%;
        padding: 0; /* Remove padding desnecessário */
        box-sizing: border-box;
        display: flex;           /* FLEX É OBRIGATÓRIO */
        justify-content: center; /* CENTRALIZA HORIZONTALMENTE */
        align-items: center;     /* CENTRALIZA VERTICALMENTE */
    }
    .actions {
        bottom: 75px;
    }
   
    .btn { 
        background: #0b76d1; 
        font-size: 1.2rem;
        color: #fff; 
        padding: 0.2rem 0.6rem; 
        text-decoration: none; 
        border-radius: 4px; 
        transition: background 0.3s;
        cursor: pointer; 
        text-align: center;
    }

    .btn:hover { 
        background: #333; 
    }

    .loading { text-align: center; padding: 2rem; display: none; 
    }
    
    .resultados { 
        margin: 10rem auto; 
    }

    #footer {
        background: #001122;
        text-align: center;
        padding: 0;
        width: 100%;
        height: 100px;
        margin-top: auto;
        flex-shrink: 0;
    }

    #footer_Column {
        width: 100%;
        height: 100px;
        display: flex;           /* Garante que o dt possa se expandir corretamente */
        align-items: center;     /* Opcional: reforça centralização vertical */
        justify-content: center; /* Opcional: reforça centralização horizontal */
    }

    #footer_Column dt {
        border-bottom: 1px solid #444;
        background: transparent;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #a0d8ff;
        width: 90%;
        height: 100%;
        margin: 0;
        padding: 0;
        text-align: center;
        font-size: 1.2rem; 
    }

       #cookie-consent {
        display: none; 
        position: fixed; 
        bottom: 0; 
        width: 100%; 
        background: #001122; 
        font-size: 1.2rem; 
        color: #fff; 
        padding: 10px; 
        text-align: center;
    }
       #cookie-consent p {
        color: #a0d8ff;
    }

       #cookie-consent a {
        line-height: 3em; 
        color: #ffffff; 
        text-decoration: none; 
    }
       #cookie-consent a:hover {
        color: yellow; 
    }



    .controls-container { 
        text-align: center;
        position: absolute;
        top: 15px;
        left: 88%;
    }

    .controls-container a { 
        color: #f4f4f4; 
        font-size: 12px;
        font-weight: bold;
        text-decoration: none;
    }

    .controls select {
        width: 100%; 
        padding: 8px; 
        border: 1px solid #ddd; 
        border-radius: 4px;
    }

    .controls-container { 
        text-align: center;
        position: absolute;
        top: 15px;
        left: 88%;
    }

    .controls-container a { 
        color: #f4f4f4; 
        font-size: 12px;
        font-weight: bold;
        text-decoration: none;
    }

    .controls select {
        width: 100%; 
        padding: 8px; 
        border: 1px solid #ddd; 
        border-radius: 4px;
    }


    /* Estilo do nome do vendedor (sem link) */
    .vendedor-nome {
        margin-left: 8px;
        font-size: 14px;
        color: #555;
        font-weight: bold;
    }



    .vendedor-info { 
        display: inline-flex; 
        align-items: center; 
        gap: 6px; 
        font-size: 14px;
        color: #555;
        font-weight: bold;
        margin: auto; 
        padding: 2px;
        line-height: 1.2; /* Standard line height */
        height: 2.4rem; /* 1.2rem (font-size) * 1.5 (line-height) * 2 (lines) */
        display: -webkit-box;
    }
    .vendedor-info img { 
        width: auto; 
        height: auto; 
        max-width: 20px; 
        max-height: 20px; 
        image-rendering: crisp-edges;
        margin-right: 4px;
        margin-bottom: -4px;
    }
        
    .container h2 {
        display: block;
        font-size: 1.6em;
        margin-block-start: 0.83em;
        margin-block-end: 0.83em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        font-weight: bold;
        unicode-bidi: isolate;
        padding: 10px;
    }

    .panel_adicionar{ 
        background:#fff; 
        border:1px solid #eee; 
        padding:1rem; 
        margin-bottom:1rem; 
        margin-top: 5rem; 
        border-radius:6px;
        width: auto; 
        height: 320px; 
        font-size: 1.2rem; 
    } 

    .panel_adicionar input { 
        padding: 8px; 
        border: 1px solid #ddd; 
        border-radius: 4px;
    }

    .panel{ 
        background:#fff; 
        border:1px solid #eee; 
        padding:1rem; 
        margin-bottom:1rem; 
        border-radius:6px;
        padding: 1rem;  
    }

    .preview-img { width: auto; height: 50px; }
    .error { color: red; }
    .success { color: green; } 

    .link_filiado { 
        display: inline-block;  
        width: 200px;  
        white-space: nowrap;  
        overflow: hidden; 
        text-overflow: ellipsis; 
    }
   
    .stardust-carousel {
        position: relative;
        overflow: hidden;
        max-width: 1200px;
        margin: 0 auto;
        margin-top: 5px;
    }

    .stardust-carousel__item-list-wrapper {
        padding-top: 100px; /* Proporção 797x235 */
        position: relative;
        overflow: hidden;
    }

    .stardust-carousel__item-list {
        display: flex;
        transition: transform 0.5s ease;
    }

    .stardust-carousel__item {
        flex-shrink: 0;
    }

    .stardust-carousel__item-inner-wrapper {
        position: relative;
    }

    .bWc0R0 {
        display: block;
        width: 100%;
        height: 100%;
    }

    .UkIsx8 img {
        width: 100%;
        height: auto;
        display: block;
    }

    .stardust-carousel__arrow {
        position: absolute;
        top: 280px;
        transform: translateY(-50%);
        background: rgba(0, 0, 0, 0.5);
        border: none;
        cursor: pointer;
        padding: 10px;
    }

    .stardust-carousel__arrow--prev {
        left: 10px;
    }

    .stardust-carousel__arrow--next {
        right: 10px;
    }

    .stardust-icon {
        width: 20px;
        height: 20px;
        fill: white;
    }

    .stardust-carousel__dots {
        display: flex;
        justify-content: center;
        margin-top: 10px;
    }

    .stardust-carousel__dot {
        width: 8px;
        height: 8px;
        background: #ccc;
        border-radius: 50%;
        margin: 0 5px;
        cursor: pointer;
    }

    .stardust-carousel__dot--active {
        background: #000;
    }

    .skew-menu {
        text-align: center;
        top: 132px;
        width: 100%;
        left: 0px;
        padding: 0;
        position: fixed;
        background-color: #0b76d1;
    }

    .skew-menu ul {
        display: inline-block;
        margin: 0;
        padding: 0;
        list-style: none;
        /* Removido: transform: skew(-25deg); */
    }

    .skew-menu ul li {
        background: transparent;
        float: left;
        
        text-transform: uppercase;
        color: #fff;
        font-size: 12px;
        font-weight: bolder;
        transition: all 0.3s linear;
    }

    .skew-menu ul li:hover {
        background: #eee;
        color: tomato;
    }

    .skew-menu ul li a {
        display: block;
        padding: 0.1em 0.8em;
        color: inherit;
        text-decoration: none;
        /* Removido: transform: skew(25deg); */
    }

    .skew-menu li {
        display: inline-block;
    }

    .skew-menu a {
        position: relative;
        display: inline-block;
        padding: 8px 16px;
        color: #333;
        text-decoration: none;
        border-radius: 4px;
        font-size: 14px;
        transition: background 0.2s;
    }

    /* Estilo do tooltip */
    .skew-menu a[data-description]:hover::after {
        content: attr(data-description);
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        background: #fff;
        color: #333;
        padding: 8px 12px;
        border-radius: 4px;
        font-size: 12px;
        width: max-content;
        max-width: 250px;
        z-index: 10;
        text-align: left;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    /* Seta do tooltip */
    .skew-menu a[data-description]:hover::before {
        content: '';
        position: absolute;
        top: calc(100% - 6px);
        left: 50%;
        transform: translateX(-50%);
        border: 6px solid transparent;
        border-bottom-color: #333;
        z-index: 10;
    }

    #countdown {
        font-size: 25px;
        color: red;
    }

    .search-title {
        margin: 0 !important;
        padding-left: 0 !important;
        text-align: left;
        font-size: 1.1em;
        color: #666;
    }

    .search-title strong {
    font-weight: bold;
    color: #000;
    }

    .text-primary {
        color: #007bff;
        font-style: normal;
    }



    .pagination { margin-top: 2rem; text-align: center; }
    .pagination a:hover { text-decoration: underline; }
    .pagination a { color: #0b76d1; padding: 8px 12px; margin: 0 5px; background: #f1f1f1; text-decoration: none; border-radius: 4px; }
    .pagination span { color: #666; padding: 0.5rem 1rem; margin: 0 0.25rem; }



    .btn_vermais {
        width: 400px;
        display: inline-block;
        margin: 50px auto;
        padding: auto;
        line-height: 2;
        background: #007bff;
        color: #fff;
        font-weight: 600;
        font-size: 1.2rem;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        transition: 0.2s;
    }
    .btn_vermais:hover {
        background: #0056b3;
    }




    /* Reset e container */
    .category-section {
        width: 100%;
        background: #001122;
        margin: auto;
        padding: 0 0.5rem;
        padding-bottom: 8rem;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }

    .category-title {
        font-size: 1.3rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
        padding: 3rem;
        color: #a0d8ff;
        text-align: left;
    }

    /* Grid principal */
    .category-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 0.5rem 0.8rem; /* Menos espaço entre colunas e linhas */
    }

    /* Cada coluna */
    .category-column {
        display: flex;
        flex-direction: column;
        gap: 0.25rem; /* Aproxima o título das subcategorias */
    }

    /* Título da categoria */
    .category-name {
        font-size: 0.8rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        color: #a0d8ff;
        margin: 0;
    }

    /* Links principais */
    .category-link {
        color: #a0d8ff;
        text-decoration: none;
        transition: color 0.2s ease;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .category-link:hover {
        color: #ff6b35;
    }

    /* Lista de subcategorias */
    .subcategory-list {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem; /* Menor espaçamento entre subcategorias */
        font-size: 0.75rem;
        line-height: 1.2;
        color: #a0d8ff;
    }

    .subcategory-list a {
        cursor: pointer;
        text-decoration: none;
    }

    .subcategory-item {
        color: inherit;
        text-decoration: none !important;
        white-space: nowrap;
    }

    .subcategory-item:hover {
        color: #ff6b35;
        text-decoration: underline;
    }

    .subcategory-separator {
        color: #aaa;
        font-weight: 300;
    }

    /* Responsivo */
    @media (max-width: 768px) {
        .category-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 0.6rem;
        }
        .category-title { font-size: 1.2rem; }
    }

    @media (max-width: 480px) {
        .category-grid {
            grid-template-columns: 1fr;
        }
        .subcategory-list {
            font-size: 0.75rem;
            gap: 0.3rem;
        }
    }








    /* Responsividade */
    @media only screen and (max-width: 728px) and (min-width: 360px)  {

      body {
        zoom: 0.80; /* Funciona no Chrome/Edge */
        -moz-transform: scale(0.80); /* Firefox */
        transform-origin: 0 0;
      }

    .product-grid {
        border: 1px solid #ddd !important;
        border-radius: 8px !important;
        width: 97% !important;
        height: auto !important;
    }

    .price-actions {
      padding: 10px;
    }
    .product-info {
        padding: 1rem 0;
    }
    .product-title {
        font-size: 1.5rem;
        -webkit-line-clamp: 2;
    }
    .produto_preco {
        line-height: 1.1;
    }
    .products-price {
        font-size: 1.6rem;
    }
    .approx {
        font-size: 0.65rem;
        margin-top: 2px;
    }

    /* BOTÃO */

    .btn_prime {
        margin: 0px;
        font-size: 1.0rem;
        font-weight: bold;
        padding: 0.4rem 0.6rem;
    }
    .price-wrapper, .button-wrapper {
      padding: 5px;
    }
    .social-share {
      padding: 10px;
    }

    .image-grid img {
        width: 280px !important;
        height: auto !important;
    }   

    .brand-container {
        width: 10%;
        left: 1%;
        top: 25px !important;
    }   
    .brand-text {
        font-size: 0px !important;
    }

    .controls-container { 
        top: 0;
        left: 0;
    }
    .controls-container a { 
        color: transparent; 
        font-size: 0;
        text-decoration: none;
    }
    .controls select {
        width: 0; 
        padding: 0; 
        border: 0; 
        border-radius: 0;
    }
    .skew-menu {
        padding-left: 5px !important;
        top: 90px !important;
    }
    .skew-menu a {
        font-size: 11px !important;
    }
    .skew-menu a[data-description]:hover::after {
        box-shadow: 0 0px 0px !important;
        background: transparent !important;
        font-size: 0px !important;
    }

    /* Seta do tooltip */
    .skew-menu a[data-description]:hover::before {
        top: calc(0% - 0px) !important;
        transform: translateX(-0%)!important;
        border: 0px solid transparent!important;
    }

    .preview-img_produtos {
        width: 0px !important;
        height: 0px !important;
     }

    table.list {
        margin-left: -30px !important;
    }
     #list_created, 
     #list_modified,
     #list_expires, 
     #list_clicks, 
     #list_img {
        font-size: 0px !important;
        border: 0px !important;
        padding: 0px !important;
     }
    .grid { 
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
    }
 }