/* El rollo de papel pintado en lugar del circulo giratorio, en todo el sitio.
   Generado a mano; el dibujo (rollo-tira.svg) lo genera `rollo-sitio/genera-svg.js` a partir
   del mismo codigo que corre en el buscador.

   COMO FUNCIONA
   `rollo-tira.svg` son 61 fotogramas en fila (60 del ciclo + una copia del primero). El CSS
   estira la tira a 6100 % del ancho de la caja, con lo que cada fotograma mide exactamente lo
   que mide la caja, y va corriendo `background-position-x` del 0 % al 100 % en 60 escalones:
   un folioscopio. La animacion es del ELEMENTO, no de la imagen, y por eso funciona igual en
   todos los navegadores; una animacion metida dentro del SVG puede quedarse congelada cuando
   el SVG entra como imagen de fondo.

   `background-size: 6100% auto` hace que la altura salga sola de la proporcion del dibujo
   (50 x 24), asi que NO hay que saber cuanto mide cada caja: el rollo nunca se deforma.
   Por eso la regla general no toca ni el tamano ni la posicion de ninguna caja del tema.
   Solo cuatro indicadores, los grandes y los que estan centrados con margenes calculados a
   mano, se agrandan a proposito, y ahi se recalculan sus desplazamientos.

   `--wd-anim-state` es del tema: vale `running` mientras algo carga de verdad y `paused` el
   resto del tiempo. Se respeta tal cual, para que un indicador escondido no siga gastando
   pintura en segundo plano, igual que hacia su circulo. */

:root{
  --hwp-rollo:url(rollo-tira.svg);
  --hwp-rollo-quieto:url(rollo-quieto.svg);
  --hwp-rollo-dur:2.4s;
}

@keyframes hwp-rollo{ to{ background-position-x:100%; } }

/* ------------------------------------------------------------------ regla general
   Todos los sitios donde el tema dibuja su circulo. Se apaga el borde (que ERA el circulo) y
   se pinta el rollo dentro de la misma caja. */
.wd-loader:after,
.dropdown-html-placeholder:after,
.wd-action-btn>a:after,
.single_add_to_cart_button:after,
:is(.blockOverlay,.wd-loader-overlay):after,
.cart-item-image:after,
.product-element-top:after,
.hotspot-content .add_to_cart_button:after,
.wd-add-btn-replace .add-to-cart-loop:after,
.wd-plan-footer .add-to-cart-loop:after,
.wd-compare-table .add_to_cart_button:after,
.popup-quick-view .wd-scroll-content>a:after,
table.wishlist_table .product-add-to-cart a.button.ajax_add_to_cart:after,
.wd-load-more-loader .load-more-loading:before,
.searchform .searchsubmit:before,
div.wpcf7 .wpcf7-spinner:before,
#cboxLoadingGraphic:after,
.pswp__preloader__donut{
  border-color:transparent !important;   /* el circulo del tema, apagado */
  border-radius:0 !important;
  background-image:var(--hwp-rollo) !important;
  background-repeat:no-repeat !important;
  background-size:6100% auto !important; /* 61 fotogramas; el alto sale de la proporcion */
  background-position-x:0% !important;
  background-position-y:center !important;
  animation:hwp-rollo var(--hwp-rollo-dur) steps(60) infinite var(--wd-anim-state,paused) !important;
}

/* El circulo de PhotoSwipe se dibuja con dos capas mas; se apagan. */
.pswp__preloader__donut{ border-width:0 !important; }
.pswp__preloader__donut:before,
.pswp__preloader__donut:after{ content:none !important; }

/* ---------------------------------------------------- los cuatro que si se agrandan */

/* 1. El indicador de la rejilla: es el mas visible del sitio, el que sale al filtrar o
      cambiar de pagina en la tienda. Su caja era de 30 px y va dentro de un contenedor
      centrado, asi que agrandarlo solo obliga a recolocar la pegada al centro. */
.wd-sticky-loader .wd-loader:after{
  width:56px !important; height:27px !important;
}
.wd-sticky-loader .wd-loader{ top:calc(50% - 13px); }

/* 2. Las capas que tapan un bloque mientras se recarga (carrito, pago, resenas, comparar).
      Estaban centradas a mano con 26 px; se recalcula el centro para el tamano nuevo. */
:is(.blockOverlay,.wd-loader-overlay):after{
  width:46px !important; height:22px !important;
  top:calc(50% - 11px) !important;
  left:calc(50% - 23px) !important;
  inset-inline-start:calc(50% - 23px) !important;
}

/* 3. El boton de anadir al carrito de la ficha: 18 px era demasiado poco para que se lea un
      rollo. Se centra igual, con las cuentas del tamano nuevo. */
.single_add_to_cart_button:after{
  width:40px !important; height:19px !important;
  top:calc(50% - 9.5px) !important;
  left:calc(50% - 20px) !important;
  inset-inline-start:calc(50% - 20px) !important;
}

/* 4. Los botones redondos de la ficha (lista de deseos, comparar, vista rapida). Van en em
      porque el tema los escala con el tamano del icono. */
.wd-action-btn>a:after{
  width:2em !important; height:.96em !important;
  left:calc(50% - 1em) !important;
  inset-inline-start:calc(50% - 1em) !important;
  top:calc(50% - .48em) !important;
}

/* ------------------------------------------------- quien pide que nada se mueva
   Un solo fotograma, el de medio papel y medio rollo, que es el mas legible. */
@media (prefers-reduced-motion:reduce){
  .wd-loader:after,
  .dropdown-html-placeholder:after,
  .wd-action-btn>a:after,
  .single_add_to_cart_button:after,
  :is(.blockOverlay,.wd-loader-overlay):after,
  .cart-item-image:after,
  .product-element-top:after,
  .hotspot-content .add_to_cart_button:after,
  .wd-add-btn-replace .add-to-cart-loop:after,
  .wd-plan-footer .add-to-cart-loop:after,
  .wd-compare-table .add_to_cart_button:after,
  .popup-quick-view .wd-scroll-content>a:after,
  table.wishlist_table .product-add-to-cart a.button.ajax_add_to_cart:after,
  .wd-load-more-loader .load-more-loading:before,
  .searchform .searchsubmit:before,
  div.wpcf7 .wpcf7-spinner:before,
  #cboxLoadingGraphic:after,
  .pswp__preloader__donut{
    background-image:var(--hwp-rollo-quieto) !important;
    background-size:100% auto !important;
    animation:none !important;
  }
}