/* =================================================================== SELO "TEST DATA" — MARKETPLACE ------------------------------------------------------------------- Mesmo selo do mainGateway (lá ele marca depoimentos fixos e o cartão de formulário). Aqui ele acompanha os títulos das vitrines de produto, que ainda listam catálogo de exemplo: "Promotional Products" home do marketplace "Products in " categorias, favoritos, preferências e a vitrine do vendedor Ao contrário do gateway, aqui o selo é um de verdade ao lado do título — e não um ::before —, porque a posição pedida é ao lado do texto, acompanhando o fluxo do cabeçalho. Quando o catálogo de exemplo sair, basta remover os dos templates e este arquivo. =================================================================== */ .mock-data-badge { /* alinha com a linha de base visual do título, sem esticar o header */ display: inline-block; vertical-align: middle; width: 34px; height: 34px; margin-left: 10px; /* Discreto: apagado e levemente inclinado, como um carimbo. Legível de perto, sem competir com o título da seção. */ opacity: .55; transform: rotate(-12deg); /* Os cabeçalhos de vitrine aparecem tanto sobre cartão claro quanto sobre a faixa azul da categoria. Um contorno branco fininho segue o traço do carimbo (é drop-shadow, não box-shadow: acompanha o alfa do PNG em vez de desenhar um quadrado) e o mantém legível nos dois. */ filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, .9)); /* Decorativo: não deve ser alvo de clique nem entrar na navegação. */ pointer-events: none; flex: 0 0 auto; } /* `.content-header` é flex com `justify-content: space-between`: solto lá dentro, o selo iria parar na ponta direita da tela, longe do título. Um wrapper mantém título e selo colados como um item só. */ .content-header .content-header__title { display: inline-flex; align-items: center; margin: 0; } /* Variante de CANTO — ficha do produto. Na vitrine o selo acompanha o título; na ficha ele carimba o cartão inteiro, então vai para o canto superior direito. O container é um grid sem `position`, e sem a âncora relativa abaixo o selo se penduraria no primeiro ancestral posicionado (a página), indo parar longe do cartão. Este arquivo é o ÚLTIMO stylesheet do , então a âncora vence o styleProductDetails.css sem precisar de !important. */ .product-detail-container { position: relative; } .product-detail-container .mock-data-badge--corner { position: absolute; top: 12px; right: 12px; margin-left: 0; z-index: 2; } @media (max-width: 700px) { .product-detail-container .mock-data-badge--corner { top: 8px; right: 8px; } } /* No tema escuro o vermelho perde contraste; um pouco mais de opacidade e de contorno compensam. */ body[data-theme="dark"] .mock-data-badge { opacity: .68; filter: drop-shadow(0 0 2px rgba(255, 255, 255, .95)); } @media (max-width: 700px) { .mock-data-badge { width: 26px; height: 26px; margin-left: 8px; } } @media (prefers-reduced-motion: reduce) { .mock-data-badge { transform: none; } }