/* Selo 3D: etiqueta de garrafa pendurada no barbante (aprovada com BLACK FRIDAY)
 * Substitui a bola laranja de desconto: aparece nos produtos com mkx_products_features.a_partir_30_off > 0
 * Template: templates/includes/selo-black-november.html
 * Parada; anima ao passar o mouse no card e, no celular, uma vez ao aparecer na tela
 * (classe .selo-bf-play, posta por /js/selo-black-november.js)
 */

/* textos com volume */
.selo-bf-ouro {
  background: linear-gradient(180deg, #fff7cf 0, #ffd84f 30%, #e8a317 58%, #ffcc3d 80%, #c27a0c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 0 #7a4306) drop-shadow(0 1px 0 #6b3a05) drop-shadow(0 1px 1px rgba(0, 0, 0, .7));
}
.selo-bf-prata {
  color: #f4f5f7;
  text-shadow: 0 1px 0 #9aa0a8, 0 2px 0 #5d6168, 0 3px 2px rgba(0, 0, 0, .7);
}

/* etiqueta de garrafa pendurada, balançando no barbante */
.selo-bftag {
  --w: 60px;
  --tw: calc(var(--w) * 1.12); /* largura do cartão */
  width: calc(var(--tw) + var(--w) * .25);
  height: calc(var(--w) * 1.75);
  position: relative;
  perspective: 420px;
  margin: -14px 0 0 2px;
  /* a sombra fica aqui: filter no cartão achataria o 3D e o verso não apareceria */
  filter: drop-shadow(0 5px 5px rgba(0, 0, 0, .45));
  pointer-events: none;
  user-select: none;
  font-family: Poppins, Arial, sans-serif;
  line-height: 1;
  text-align: center;
  -webkit-text-size-adjust: 100%; /* celular não aumenta o texto sozinho */
  text-size-adjust: 100%;
}
.selo-bftag__pin {
  position: absolute;
  top: 0;
  left: 50%;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff3c0, #c27a0c 60%, #5a3608);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .5);
  z-index: 2;
}
.selo-bftag__swing {
  position: absolute;
  top: 4px;
  left: 50%;
  width: var(--tw);
  margin-left: calc(var(--tw) / -2);
  transform-origin: 50% 0;
  transform-style: preserve-3d;
  animation: bftag-swing 5s ease-in-out infinite;
  animation-delay: var(--bf-delay, 0s);
}
.selo-bftag__string {
  display: block;
  width: 2px;
  height: calc(var(--w) * .22);
  margin: 0 auto;
  background: repeating-linear-gradient(180deg, #e9d9a8 0 2px, #b39554 2px 3px);
}
.selo-bftag__card {
  position: relative;
  width: var(--tw);
  height: calc(var(--w) * 1.36);
  transform-style: preserve-3d;
}
.selo-bftag__face,
.selo-bftag__edge {
  position: absolute;
  inset: 0;
  clip-path: polygon(22% 0, 78% 0, 100% 15%, 100% 100%, 0 100%, 0 15%);
}
.selo-bftag__edge { background: linear-gradient(90deg, #7a4b10, #ffd77a 50%, #5a3608); }
.selo-bftag__edge:nth-child(1) { transform: translateZ(1px); }
.selo-bftag__edge:nth-child(2) { transform: translateZ(0); }
.selo-bftag__edge:nth-child(3) { transform: translateZ(-1px); }
.selo-bftag__face {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: calc(var(--w) * .16);
  background:
    linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .18) 50%, transparent 60%) no-repeat,
    radial-gradient(circle at 40% 30%, #3a332d, #121010 75%);
  background-size: 300% 100%, auto;
  animation: bftag-shine 5s ease-in-out infinite;
  animation-delay: var(--bf-delay, 0s);
}
/* filete dourado e o ilhós do furo */
.selo-bftag__face::before {
  content: "";
  position: absolute;
  inset: 3px;
  clip-path: polygon(22% 0, 78% 0, 100% 15%, 100% 100%, 0 100%, 0 15%);
  box-shadow: inset 0 0 0 1.5px #ffc83a;
  border: 1.5px solid #ffc83a;
  opacity: .9;
}
.selo-bftag__face::after {
  content: "";
  position: absolute;
  top: calc(var(--w) * .05);
  left: 50%;
  width: calc(var(--w) * .14);
  height: calc(var(--w) * .14);
  margin-left: calc(var(--w) * -.07);
  border-radius: 50%;
  background: #0a0908;
  box-shadow: 0 0 0 2px #e8a317, 0 0 0 3px #7a4306;
}
.selo-bftag__front { transform: translateZ(1.5px); }
.selo-bftag__back { transform: rotateY(180deg) translateZ(1.5px); opacity: 0; }
.selo-bftag__black { font-size: calc(var(--w) * .17); font-weight: 900; letter-spacing: .02em; }
.selo-bftag__friday { font-size: calc(var(--w) * .12); font-weight: 900; }
/* corta os filetes dourados laterais só na altura do NOVEMBER: faixa da cor do fundo
   nas bordas (fica por cima do filete, que é o ::before da face) */
.selo-bftag__faixa {
  position: relative;
  align-self: stretch;
  display: block;
  margin-top: 1px;
  padding: 1px 0;
  background: linear-gradient(90deg, #15120f 0 12%, transparent 12% 88%, #15120f 88%);
}
.selo-bftag__pct { font-size: calc(var(--w) * .3); font-weight: 900; margin-top: calc(var(--w) * .06); letter-spacing: -.03em; }
.selo-bftag__off { font-size: calc(var(--w) * .13); font-weight: 800; letter-spacing: .12em; }
.selo-bftag__cb { font: 700 calc(var(--w) * .44)/1 "Bodoni 72", Didot, Georgia, "Times New Roman", serif; }
.selo-bftag__casa { font-size: calc(var(--w) * .075); font-weight: 700; letter-spacing: .03em; color: #ffd84f; margin-top: 4px; }

/* monograma CB (o B dentro do C), usado no lugar do desconto na etiqueta da shop info.
   SVG com o C e o B do logo oficial (os mesmos do favicon) */
.selo-bftag__mono {
  display: block;
  width: calc(var(--w) * .6);
  height: calc(var(--w) * .6);
  margin-top: calc(var(--w) * .02);
  overflow: visible;
  fill: url(#selo-cb-prata);
  filter: drop-shadow(0 1px 0 #5d6168) drop-shadow(0 2px 1px rgba(0, 0, 0, .7));
}
/* contorno escuro em volta do B para separar as duas letras */
.selo-bftag__mono-b {
  stroke: #121010;
  stroke-width: 1.2px;
  paint-order: stroke;
}
.selo-bftag--cb .selo-bftag__black { font-size: calc(var(--w) * .17 + 1px); }
.selo-bftag--cb .selo-bftag__friday { font-size: calc(var(--w) * .16 + 1px); }
.selo-bftag--cb .selo-bftag__faixa { margin-top: -2px; }
.selo-bftag--cb .selo-bftag__mono { width: calc(var(--w) * .45); height: calc(var(--w) * .45); margin-top: calc(var(--w) * .04); }

/* balança no barbante e, de vez em quando, vira mostrando o verso */
@keyframes bftag-swing {
  0%   { transform: rotateZ(4deg)  rotateY(-15deg); }
  20%  { transform: rotateZ(-9deg) rotateY(25deg); }
  40%  { transform: rotateZ(7deg)  rotateY(-20deg); }
  47.5% { transform: rotateZ(1.5deg) rotateY(90deg); }
  55%  { transform: rotateZ(-4deg) rotateY(200deg); }
  70%  { transform: rotateZ(5deg)  rotateY(160deg); }
  77.5% { transform: rotateZ(-.5deg) rotateY(270deg); }
  85%  { transform: rotateZ(-6deg) rotateY(345deg); }
  100% { transform: rotateZ(4deg)  rotateY(345deg); }
}
/* troca de face exatamente quando a etiqueta fica de lado (47,5% = 90°, 77,5% = 270°).
   Não usa backface-visibility: no Chrome o verso às vezes não era desenhado e a
   etiqueta aparecia "pelada", só com a borda dourada da espessura */
@keyframes bftag-front {
  0%    { opacity: 1; animation-timing-function: step-end; }
  47.5% { opacity: 0; animation-timing-function: step-end; }
  77.5% { opacity: 1; animation-timing-function: step-end; }
  100%  { opacity: 1; }
}
@keyframes bftag-back {
  0%    { opacity: 0; animation-timing-function: step-end; }
  47.5% { opacity: 1; animation-timing-function: step-end; }
  77.5% { opacity: 0; animation-timing-function: step-end; }
  100%  { opacity: 0; }
}
@keyframes bftag-shine {
  0%, 10% { background-position: 100% 0, 0 0; }
  35%, 100% { background-position: -50% 0, 0 0; }
}

/* tamanhos por contexto */
#shop-info-black .selo-bftag { --w: calc(var(--s) * 76px); margin: 0; }
.product-thumb-mini .selo-bftag { --w: 36px; margin: 0; }
.main-photo .selo-bftag,
.mobile-images .selo-bftag { --w: 90px; margin: 0; }
@media (max-width: 992px) {
  .selo-bftag { --w: 60px; margin: -12px 0 0 0; } /* mesma medida do computador: com 46px o NOVEMBER não cabia */
  .main-photo .selo-bftag,
  .mobile-images .selo-bftag { --w: 70px; }
  #shop-info-black .selo-bftag { --w: 62px; }
}

/* parada até passar o mouse no card; a pose parada é o primeiro quadro da animação */
.selo-bftag__swing,
.selo-bftag__face { animation-name: none; }
.selo-bftag__swing { transform: rotateZ(4deg) rotateY(-15deg); }
.selo-bftag__face { background-position: 100% 0, 0 0; }
:is(.product-thumb, .product-thumb-mini, .main-photo, .mobile-images, .shop-info-ticket):hover .selo-bftag__swing { animation-name: bftag-swing; }
:is(.product-thumb, .product-thumb-mini, .main-photo, .mobile-images, .shop-info-ticket):hover .selo-bftag__front { animation-name: bftag-shine, bftag-front; }
:is(.product-thumb, .product-thumb-mini, .main-photo, .mobile-images, .shop-info-ticket):hover .selo-bftag__back { animation-name: bftag-shine, bftag-back; }

/* celular (sem mouse): roda uma vez quando aparece na tela (o último quadro é igual à pose parada) */
.selo-bf-play .selo-bftag__swing { animation-name: bftag-swing; animation-iteration-count: 1; }
.selo-bf-play .selo-bftag__front { animation-name: bftag-shine, bftag-front; animation-iteration-count: 1; }
.selo-bf-play .selo-bftag__back { animation-name: bftag-shine, bftag-back; animation-iteration-count: 1; }

@media (prefers-reduced-motion: reduce) {
  .selo-bftag__swing,
  .selo-bftag__face { animation: none; }
}

/* o selo fica por cima do painel de filtros do hover (z-index 2)
   e continua visível quando o card esconde a foto */
.product-thumb .selos:has(.selo-bftag) { z-index: 3; }
.product-thumb:not(.product-thumb-mini):hover .selos:has(.selo-bftag) {
  opacity: 1;
  visibility: visible;
}

/* card com o selo: no hover os filtros aparecem no topo e a foto continua por baixo,
   aparecendo cortada na área vazia do painel (que fica transparente) */
.product-thumb:not(.product-thumb-mini):has(.selo-bftag):hover .product-img {
  opacity: 1;
  visibility: visible;
}
.product-thumb:not(.product-thumb-mini):has(.selo-bftag) .product-thumb-filters-overlay {
  background: transparent;
}
/* o fundo azul (levemente transparente, a foto aparece de leve) fica só atrás dos
   filtros: cada filtro ocupa a largura toda, com o respiro do painel (16px dos lados,
   12px em cima) por dentro, e a linha divisória é desenhada no próprio fundo */
.product-thumb:not(.product-thumb-mini):has(.selo-bftag) .product-thumb-filters-overlay .filter-group {
  width: calc(100% + 32px);
  margin: 0 -16px;
  padding: 8px 16px;
  border-bottom: none;
  background:
    linear-gradient(rgba(13, 59, 116, 0.3), rgba(13, 59, 116, 0.3)) no-repeat 16px 100% / calc(100% - 32px) 1px,
    rgba(239, 245, 255, .82);
}
.product-thumb:not(.product-thumb-mini):has(.selo-bftag) .product-thumb-filters-overlay .filter-group:first-child {
  margin-top: -12px;
  padding-top: 20px;
}
.product-thumb:not(.product-thumb-mini):has(.selo-bftag) .product-thumb-filters-overlay .filter-group:nth-child(4) {
  background: rgba(239, 245, 255, .82);
}

/* etiqueta no canto direito do card e da foto do produto */
.product-thumb .selos.right:has(.selo-bftag) { right: 6px; left: auto; }
.produto-container .mobile-images .selos.right:has(.selo-bftag) {
  position: absolute; z-index: 3; top: 20px; right: 20px;
}
.selos.right .selo-bftag { margin-left: 0; margin-right: 2px; }

/* Ofertas Relampago: selo ao lado do losango, e nao na frente da garrafa, alternando como a bola antiga:
   cards impares em cima a esquerda, pares embaixo a direita
   (o main.css tira o top/left dos .selos dessa vitrine para posicionar a bola antiga) */
#ofertas-relampago .slick-slide .product-thumb .selos:has(.selo-bftag) {
  top: 0;
  bottom: auto;
  left: 4px;
  right: auto;
  z-index: 12;
}
#ofertas-relampago .slick-slide:nth-child(even) .product-thumb .selos:has(.selo-bftag) {
  top: auto;
  bottom: 0;
  left: auto;
  right: 4px;
}