/* Sellos «Bellota 100 % ibérico» y «100 % natural» con nota al pulsar (13-nov-2026). Independiente del tema: los
   colores salen de --sb-sello-color (el sello) y de --sb-nota-* (la nota); cada tienda los ajusta a su paleta. */
.sb-sellos { position: absolute; top: 12px; right: 12px; z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; color: var(--sb-sello-color, #8f431f); }
.sb-sello-btn { display: block; margin: 0; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; line-height: 0; cursor: pointer; pointer-events: auto; -webkit-tap-highlight-color: transparent; box-shadow: none; }
.sb-sello-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.sb-sello-btn .sb-sello { display: block; }
.sb-sello__fondo { fill: #fff; fill-opacity: .8; }
.sb-sello-nota { position: absolute; z-index: 30; box-sizing: border-box; width: 300px; max-width: calc(100% - 16px); margin: 0; padding: 12px 14px; background: var(--sb-nota-fondo, #fff); color: var(--sb-nota-texto, #2e241c); border: 1px solid var(--sb-nota-borde, #d39b73); box-shadow: 0 8px 22px rgba(46, 36, 28, .16); font-size: 13px; font-weight: 400; line-height: 1.5; text-align: left; letter-spacing: 0; text-transform: none; white-space: normal; }
.sb-sello-nota::before { content: ''; position: absolute; top: -6px; right: var(--sb-nota-flecha, 24px); width: 10px; height: 10px; background: inherit; border-left: 1px solid var(--sb-nota-borde, #d39b73); border-top: 1px solid var(--sb-nota-borde, #d39b73); transform: rotate(45deg); }
.sb-sello-nota__tit { display: block; margin: 0 0 4px; font-size: 16px; font-weight: 700; line-height: 1.25; color: var(--sb-sello-color, #8f431f); }
.sb-sello-nota p { margin: 0; }
[data-sb-sello-ancla="tarjeta"] > .sb-sello-nota { left: 8px; right: 8px; width: auto; max-width: none; }
[data-sb-sello-ancla="tarjeta"]:has(> .sb-sello-nota) { z-index: 31; }
@media (max-width: 767.98px) {
  .sb-sellos { top: 8px; right: 8px; }
  .sb-sellos .sb-sello { width: 60px; height: 60px; }
  .sb-sellos--tarjeta .sb-sello { width: 48px; height: 48px; }
}
@media (min-width: 768px) {
  .sb-sello-nota { width: 360px; padding: 16px 18px; font-size: 15px; }
  .sb-sello-nota__tit { font-size: 18px; }
}
/* 14-nov (igual que QA-46 del tema 1.2.5). Sergio: «en el sello de natural agrega un pequeño movimiento de 3 o 4 segundos al inicio
   para indicar que se puede hacer clic». Cuando el sello aparece en pantalla (custom.js §8 le pone --aviso), se balancea un
   poco y le sale una onda, dos veces (unos 3,7 s en total), y se para. No se repite en las páginas siguientes una vez
   pulsado un sello. Sin movimiento si el sistema pide «reducir movimiento». */
.sb-sello-btn { position: relative; }
.sb-sello-btn::after { content: ''; position: absolute; inset: 6%; border: 2px solid currentColor; border-radius: 50%; opacity: 0; pointer-events: none; }
.sb-sello-btn .sb-sello { transform-origin: 50% 50%; }
.sb-sello-btn--aviso .sb-sello { animation: sb-sello-hola 1.7s ease-in-out .3s 2; }
.sb-sello-btn--aviso::after { animation: sb-sello-onda 1.7s ease-out .3s 2; }
@keyframes sb-sello-hola {
  0%, 62%, 100% { transform: rotate(0) scale(1); }
  12% { transform: rotate(-8deg) scale(1.06); }
  24% { transform: rotate(7deg) scale(1.08); }
  36% { transform: rotate(-5deg) scale(1.06); }
  48% { transform: rotate(3deg) scale(1.03); }
}
@keyframes sb-sello-onda {
  0% { transform: scale(.92); opacity: .5; }
  70%, 100% { transform: scale(1.3); opacity: 0; }
}
/* 14-nov: se mueve SIEMPRE (Sergio: «se debe mover» en las 3 webs), también con «reducir movimiento» (dura menos de 5 s).
   Si el tema de la tienda tiene una regla global que anula animaciones con prefers-reduced-motion, hay que sacar de ella
   .sb-sello-btn--aviso .sb-sello y .sb-sello-btn--aviso::after (en el tema nuevo: *:not(…, .sb-sello-btn--aviso .sb-sello)). */
@media (prefers-reduced-motion: reduce) {
  .sb-sello-btn.sb-sello-btn--aviso .sb-sello { animation-duration: 1.7s !important; animation-iteration-count: 2 !important; }
  .sb-sello-btn.sb-sello-btn--aviso::after { animation-duration: 1.7s !important; animation-iteration-count: 2 !important; }
}
/* Nota del «100 % natural»: título y lista de 5 (texto de Sergio, 14-nov) */
.sb-sello-nota__lista { margin: 6px 0 0; padding: 0 0 0 18px; list-style: disc; }
.sb-sello-nota__lista li { margin: 2px 0 0; padding: 0; }
.sb-sello-nota__lista li::marker { color: var(--sb-sello-color, #8f431f); }
.sb-sello-nota .sb-sello-nota__cierre { margin: 8px 0 0; font-style: italic; font-size: 1.05em; }   /* frase final (versión definitiva, 14-nov) */

/* ---- soberanossellos (soberanos.es, PS 1.7.8 tema warehouse): paleta de la tienda y defensas frente a los estilos del tema ---- */
.sb-sellos, .sb-sello-nota { --sb-sello-color: #a9521f; --sb-nota-borde: #e3b48a; --sb-nota-texto: #2d2d2d; --sb-nota-fondo: #fff; }
.sb-sello-btn, .sb-sello-btn:hover, .sb-sello-btn:focus, .sb-sello-btn:active { width: auto; height: auto; min-width: 0; min-height: 0; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; color: inherit; text-transform: none; transform: none; opacity: 1; }
.sb-sello-btn:focus:not(:focus-visible) { outline: none; }
.sb-sello-nota p { font-size: inherit; line-height: inherit; color: inherit; font-weight: 400; }
.sb-sello-nota__tit { text-transform: none; letter-spacing: 0; }
@media (max-width: 767.98px) {
  .sb-sellos--ficha [data-sb-sello="bellota"] { display: none; }
}

/* lista de la nota del natural (14-nov): que el tema no le quite viñetas, márgenes ni tamaño */
.sb-sello-nota ul.sb-sello-nota__lista { margin: 6px 0 0; padding: 0 0 0 18px; list-style: disc outside; font-size: inherit; line-height: inherit; color: inherit; text-align: left; }
.sb-sello-nota ul.sb-sello-nota__lista li { display: list-item; list-style: inherit; margin: 2px 0 0; padding: 0; font-size: inherit; line-height: inherit; color: inherit; background: none; border: 0; }
.sb-sello-nota ul.sb-sello-nota__lista li::before, .sb-sello-nota ul.sb-sello-nota__lista li::after { content: none; }
/* 14-nov: en la ficha el sello va FUERA de la foto (no tapa el producto), en una fila propia ENCIMA de ella, a la derecha */
.sb-sellos.sb-sellos--fuera { position: static; top: auto; right: auto; flex-direction: row; justify-content: flex-end; margin: 0 0 10px; }